open-index/open-npm huggingface dataset:
npm package: @hautechai/webui.iconbutton
Description: Button component optimized for displaying icons with customizable variants, sizes, and styling options.
Author: HautechAI
Latest version: 2.2.0

# IconButton

## Purpose

Button component optimized for displaying icons with customizable variants, sizes, and styling options.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.iconbutton

# npm
npm install @hautechai/webui.iconbutton

# yarn
yarn add @hautechai/webui.iconbutton
```

## Parameters

| Parameter        | Type                                             | Description                                                                |
| ---------------- | ------------------------------------------------ | -------------------------------------------------------------------------- |
| variant          | 'filled' \| 'outlined' \| 'flat' \| 'primary'    | Optional visual style variant (defaults to 'filled')                       |
| size             | 'medium' \| 'small' \| 'xsmall'                  | Optional size variant controlling button dimensions (defaults to 'medium') |
| icon             | React.ReactNode                                  | Required icon component to be displayed                                    |
| disabled         | boolean                                          | When true, disables button interaction and applies disabled styling        |
| onClick          | (e: React.MouseEvent<HTMLButtonElement>) => void | Optional click event handler function                                      |
| customBackground | string                                           | Optional custom background color override                                  |

## Usage Example

```tsx
<IconButton variant="outlined" size="xsmall" icon={<PlusIcon />} onClick={handleAddItem} />
```
npm package: @hautechai/webui.imageinput
Description: Specialized input component for image upload and preview with cropping and editing capabilities.
Author: HautechAI
Latest version: 2.1.27

# ImageInput

## Purpose

Specialized input component for image upload and preview with cropping and editing capabilities.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.imageinput

# npm
npm install @hautechai/webui.imageinput

# yarn
yarn add @hautechai/webui.imageinput
```

## Parameters

| Parameter   | Type                    | Description                                                       |
| ----------- | ----------------------- | ----------------------------------------------------------------- |
| value       | string                  | Optional current image URL or base64 data                         |
| onChange    | (image: string) => void | Optional callback function triggered when image changes           |
| placeholder | string                  | Optional placeholder text for empty state                         |
| accept      | string                  | Optional image file type restrictions (defaults to image formats) |
| disabled    | boolean                 | When true, disables image input interaction                       |

May include additional parameters for image processing, cropping, and size constraints.

## Usage Example

```tsx
<ImageInput
    value={currentImage}
    onChange={setCurrentImage}
    placeholder="Upload profile picture"
    disabled={isUploading}
/>
```
npm package: @hautechai/webui.imageinputwithsamples
Description: Enhanced image input component that includes predefined sample images for quick selection alongside upload functionality.
Author: HautechAI
Latest version: 2.1.27

# ImageInputWithSamples

## Purpose

Enhanced image input component that includes predefined sample images for quick selection alongside upload functionality.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.imageinputwithsamples

# npm
npm install @hautechai/webui.imageinputwithsamples

# yarn
yarn add @hautechai/webui.imageinputwithsamples
```

## Parameters

| Parameter   | Type                    | Description                                             |
| ----------- | ----------------------- | ------------------------------------------------------- |
| value       | string                  | Optional current image URL or base64 data               |
| onChange    | (image: string) => void | Optional callback function triggered when image changes |
| samples     | string[]                | Optional array of sample image URLs for quick selection |
| placeholder | string                  | Optional placeholder text for empty state               |
| disabled    | boolean                 | When true, disables input interaction                   |

May include additional parameters for customizing sample layout and upload options.

## Usage Example

```tsx
<ImageInputWithSamples
    value={selectedImage}
    onChange={setSelectedImage}
    samples={['/sample1.jpg', '/sample2.jpg', '/sample3.jpg']}
    placeholder="Choose or upload an image"
/>
```
npm package: @hautechai/webui.keyframetoggle
Description: Keyframe toggle component for timeline interactions
Author: HautechAI
Latest version: 2.1.25

# KeyframeToggle

## Purpose

Toggle button component for keyframe interactions in timeline interfaces. Displays different visual states and styles based on keyframe status.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.keyframetoggle

# npm
npm install @hautechai/webui.keyframetoggle

# yarn
yarn add @hautechai/webui.keyframetoggle
```

## Parameters

| Parameter | Type                                             | Description                                                     |
| --------- | ------------------------------------------------ | --------------------------------------------------------------- |
| onClick   | (e: React.MouseEvent<HTMLButtonElement>) => void | Optional click event handler function                           |
| state     | 'noKeyframes' \| 'hasKeyframes' \| 'isKeyframe'  | Required state determining the visual appearance and icon style |
| disabled  | boolean                                          | Optional flag to disable interactions and apply disabled styles |

## Usage Example

```tsx
<KeyframeToggle state="noKeyframes" onClick={handleToggle} />
```
npm package: @hautechai/webui.layertreeitemchild
Description: Child item component for layer tree with editable label and optional input
Author: HautechAI
Latest version: 1.0.9

# LayerTreeItemChild

## Purpose

Child item component for layer trees with editable label and optional input field. Companion component to LayerTreeItemParent for displaying nested layer items.

## Parameters

| Parameter | Type                    | Description                                                                 |
| --------- | ----------------------- | --------------------------------------------------------------------------- |
| label     | string                  | Required text label to display                                              |
| selected  | boolean                 | Optional flag indicating if the item is in selected state (affects styling) |
| input     | React.ReactNode         | Optional React Node to display/edit value on the right side                 |
| onChange  | (value: string) => void | Optional handler called when the label text is changed via editing          |
| onSelect  | () => void              | Optional handler called when the item is selected                           |

## Usage Example

```tsx
<LayerTreeItemChild
    label="Child Item"
    selected={false}
    input={<VisualEditorInput value="100" units="px" />}
    onChange={(newLabel) => setLabel(newLabel)}
    onSelect={() => setSelected(true)}
/>
```
npm package: @hautechai/webui.layertreeitemparent
Description: Header component for layer tree items with expandable/collapsible functionality, icon, and label. Works as the parent header for LayerTreeFolder components.
Author: HautechAI
Latest version: 2.1.30

# LayerTreeItemParent

## Purpose

Header component for layer tree items with expandable/collapsible functionality, icon, and label. Works as the parent header for LayerTreeFolder components.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.layertreeitemparent

# npm
npm install @hautechai/webui.layertreeitemparent

# yarn
yarn add @hautechai/webui.layertreeitemparent
```

## Parameters

| Parameter      | Type                    | Description                                                                             |
| -------------- | ----------------------- | --------------------------------------------------------------------------------------- |
| icon           | React.ReactNode         | Required icon component to display next to the label                                    |
| label          | string                  | Required text label to display                                                          |
| selected       | boolean                 | Optional flag indicating if the item is in selected state (affects styling)             |
| expanded       | boolean                 | Optional flag indicating if the item is expanded (rotates arrow 90 degrees clockwise)   |
| editable       | boolean                 | Optional flag indicating if the text label can be edited (enables double-click to edit) |
| onExpandToggle | () => void              | Optional click handler for the expand/collapse arrow button                             |
| onClick        | () => void              | Optional click handler for the item content area                                        |
| onChange       | (value: string) => void | Optional handler called when the label text is changed via editing                      |

## Usage Example

```tsx
<LayerTreeItemParent
    icon={<FolderIcon />}
    label="My Folder"
    selected={false}
    expanded={true}
    editable={true}
    onExpandToggle={() => setExpanded(!expanded)}
    onClick={() => setSelected(true)}
    onChange={(newLabel) => setLabel(newLabel)}
/>
```
npm package: @hautechai/webui.linkbutton
Description: Button component styled as a hyperlink with minimal visual presence and navigation capabilities.
Author: HautechAI
Latest version: 2.1.11

# LinkButton

## Purpose

Button component styled as a hyperlink with minimal visual presence and navigation capabilities.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.linkbutton

# npm
npm install @hautechai/webui.linkbutton

# yarn
yarn add @hautechai/webui.linkbutton
```

## Parameters

| Parameter    | Type                                             | Description                                                                    |
| ------------ | ------------------------------------------------ | ------------------------------------------------------------------------------ |
| size         | 'small' \| 'xsmall'                              | Optional size variant controlling typography and spacing (defaults to 'small') |
| label        | string                                           | Required text content displayed on the button                                  |
| leadingIcon  | React.ReactNode                                  | Optional icon displayed before the label text                                  |
| trailingIcon | React.ReactNode                                  | Optional icon displayed after the label text                                   |
| disabled     | boolean                                          | When true, disables button interaction and applies disabled styling            |
| onClick      | (e: React.MouseEvent<HTMLButtonElement>) => void | Optional click event handler function                                          |

## Usage Example

```tsx
<LinkButton size="small" label="View Details" trailingIcon={<ExternalLinkIcon />} onClick={handleViewDetails} />
```
npm package: @hautechai/webui.logo
Description: Brand logo display component with variant options for different contexts and sizing needs.
Author: HautechAI
Latest version: 2.1.6

# Logo

## Purpose

Brand logo display component with variant options for different contexts and sizing needs.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.logo

# npm
npm install @hautechai/webui.logo

# yarn
yarn add @hautechai/webui.logo
```

## Parameters

| Parameter | Type                 | Description                                                                                                    |
| --------- | -------------------- | -------------------------------------------------------------------------------------------------------------- |
| name      | 'hautech' \| 'liana' | Optional brand name - 'hautech' for Hautech logo (default), 'liana' for Liana logo                             |
| variant   | 'full' \| 'icon'     | Optional logo variant - 'full' shows complete logo with text, 'icon' shows minimal icon only (default: 'full') |

Inherits all standard SVG element properties through SVGProps<SVGSVGElement>.

## Usage Example

```tsx
// Hautech logos
<Logo name="hautech" variant="full" width={165} height={40} />
<Logo name="hautech" variant="icon" width={32} height={32} />

// Liana logos
<Logo name="liana" variant="full" width={92} height={26} />
<Logo name="liana" variant="icon" width={32} height={26} />

// Default behavior (Hautech full logo)
<Logo />
```
npm package: @hautechai/webui.masonry
Description: Grid layout component that arranges items in a masonry-style layout with dynamic positioning based on content height.
Author: HautechAI
Latest version: 2.1.9

# Masonry

## Purpose

Grid layout component that arranges items in a masonry-style layout with dynamic positioning based on content height.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.masonry

# npm
npm install @hautechai/webui.masonry

# yarn
yarn add @hautechai/webui.masonry
```

## Parameters

| Parameter | Type             | Description                                     |
| --------- | ---------------- | ----------------------------------------------- |
| children  | React.ReactNode  | Required items to be arranged in masonry layout |
| columns   | number           | Optional number of columns in the masonry grid  |
| gap       | number \| string | Optional spacing between masonry items          |
| width     | number \| string | Optional total width of the masonry container   |

May include additional parameters for responsive behavior and item sizing.

## Usage Example

```tsx
<Masonry columns={3} gap={16} width="100%">
    <Card1 />
    <Card2 />
    <Card3 />
</Masonry>
```
npm package: @hautechai/webui.menu
Description: Dropdown menu container component for navigation or actions with selectable options and popover positioning.
Author: HautechAI
Latest version: 2.1.13

# Menu

## Purpose

Dropdown menu container component for navigation or actions with selectable options and popover positioning.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.menu

# npm
npm install @hautechai/webui.menu

# yarn
yarn add @hautechai/webui.menu
```

## Parameters

| Parameter        | Type                                   | Description                                                                |
| ---------------- | -------------------------------------- | -------------------------------------------------------------------------- |
| options          | (MenuItemProps & { value?: string })[] | Required array of menu item configurations with labels and optional values |
| value            | string                                 | Optional controlled selected value                                         |
| onChange         | (value: string) => void                | Optional callback function triggered when menu item is selected            |
| trigger          | () => React.ReactNode                  | Optional function returning the trigger element for the menu               |
| contentPositions | PopoverProps['contentPositions']       | Optional positioning configuration for the menu popover                    |
| size             | 'small' \| 'medium'                    | Optional size for main menu items; defaults to 'small'                     |

## Usage Example

```tsx
<Menu
    options={[
        { label: 'Edit', value: 'edit', leadingIcon: <EditIcon /> },
        { label: 'Delete', value: 'delete', leadingIcon: <DeleteIcon /> },
    ]}
    size="small"
    value={selectedAction}
    onChange={setSelectedAction}
    trigger={() => <Button label="Actions" />}
/>
```
npm package: @hautechai/webui.menuitem
Description: Individual menu item component with configurable appearance, icons, and interaction states.
Author: HautechAI
Latest version: 2.1.11

# MenuItem

## Purpose

Individual menu item component with configurable appearance, icons, and interaction states.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.menuitem

# npm
npm install @hautechai/webui.menuitem

# yarn
yarn add @hautechai/webui.menuitem
```

## Parameters

| Parameter    | Type                | Description                                                                                |
| ------------ | ------------------- | ------------------------------------------------------------------------------------------ |
| label        | string              | Required text content displayed in the menu item                                           |
| type         | 'main' \| 'CTA'     | Optional type affecting styling - 'main' for regular items, 'CTA' for call-to-action items |
| size         | 'medium' \| 'small' | Optional size variant (only available when type is 'main')                                 |
| isSelected   | boolean             | Optional flag indicating the item's selected state                                         |
| leadingIcon  | React.ReactNode     | Optional icon displayed before the label                                                   |
| trailingIcon | React.ReactNode     | Optional icon displayed after the label                                                    |
| onClick      | () => void          | Optional click event handler function                                                      |

## Usage Example

```tsx
<MenuItem
    label="Save Document"
    type="CTA"
    leadingIcon={<SaveIcon />}
    isSelected={isCurrentAction}
    onClick={handleSave}
/>
```
npm package: @hautechai/webui.modal
Description: Overlay dialog component for focused user interactions with backdrop and positioning controls.
Author: HautechAI
Latest version: 2.1.9

# Modal

## Purpose

Overlay dialog component for focused user interactions with backdrop and positioning controls.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.modal

# npm
npm install @hautechai/webui.modal

# yarn
yarn add @hautechai/webui.modal
```

## Parameters

| Parameter       | Type                | Description                                                             |
| --------------- | ------------------- | ----------------------------------------------------------------------- |
| open            | boolean             | Optional flag controlling the visibility state of the modal             |
| onClose         | () => void          | Optional callback function triggered when modal backdrop is clicked     |
| children        | React.ReactNode     | Content to be displayed within the modal                                |
| contentPosition | object              | Optional positioning object with left, top, right, bottom number values |
| backdropStyle   | React.CSSProperties | Optional custom styles for the backdrop overlay                         |

## Usage Example

```tsx
<Modal open={isOpen} onClose={handleClose} contentPosition={{ top: 50, left: 50 }}>
    <ModalContent>
        <DialogForm />
    </ModalContent>
</Modal>
```
npm package: @hautechai/webui.nodecontainer
Description: Container component for Node system
Author: HautechAI
Latest version: 1.0.9

# NodeContainer

## Purpose

Container component that provides the basic structure and styling for Node components in the node-based interface.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.nodecontainer

# npm
npm install @hautechai/webui.nodecontainer

# yarn
yarn add @hautechai/webui.nodecontainer
```

## Parameters

| Parameter | Type            | Description                                               |
| --------- | --------------- | --------------------------------------------------------- |
| children  | React.ReactNode | Child components to be rendered inside the node container |
| width     | number          | Optional width of the node container in pixels            |
| selected  | boolean         | Whether the node container is in selected state           |

## Usage Example

```tsx
// Basic node container
<NodeContainer>
    <NodeHeader label="My Node" />
    <NodeContent>Node content here</NodeContent>
</NodeContainer>

// Selected node container
<NodeContainer selected={true}>
    <NodeHeader label="Selected Node" />
    <NodeContent>This node is selected</NodeContent>
</NodeContainer>

// Node container with custom width
<NodeContainer width={400} selected={false}>
    <NodeHeader label="Custom Width Node" />
</NodeContainer>
```
npm package: @hautechai/webui.nodecontent
Description: Content area component for Node system
Author: HautechAI
Latest version: 1.0.10

# NodeContent

## Purpose

Content area component that provides proper padding and styling for node content. Includes a bottom border for visual separation.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.nodecontent

# npm
npm install @hautechai/webui.nodecontent

# yarn
yarn add @hautechai/webui.nodecontent
```

## Parameters

| Parameter | Type            | Description                                          |
| --------- | --------------- | ---------------------------------------------------- |
| children  | React.ReactNode | Content to be displayed inside the node content area |
npm package: @hautechai/webui.nodefooter
Description: Footer component for Node system
Author: HautechAI
Latest version: 1.0.8

# NodeFooter

## Purpose

Footer component for nodes that displays input and output ports. Provides proper layout for port connections.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.nodefooter

# npm
npm install @hautechai/webui.nodefooter

# yarn
yarn add @hautechai/webui.nodefooter
```

## Parameters

| Parameter   | Type            | Description                                             |
| ----------- | --------------- | ------------------------------------------------------- |
| inputPorts  | React.ReactNode | Input ports to display on the left side of the footer   |
| outputPorts | React.ReactNode | Output ports to display on the right side of the footer |
npm package: @hautechai/webui.nodegroup
Description: NodeGroup components for collapsible container with items
Author: HautechAI
Latest version: 1.0.11

# NodeGroup

## Purpose

A set of components for creating collapsible groups of items with headers. Provides a hierarchical organization structure for node-like data.

## Components

### NodeGroup

Main container component that provides collapsible functionality.

| Parameter | Type            | Description                                     |
| --------- | --------------- | ----------------------------------------------- |
| label     | string          | Text label for the group header                 |
| collapsed | boolean         | Whether the group is collapsed (default: false) |
| children  | React.ReactNode | Children to render when expanded                |
| onToggle  | () => void      | Handler for toggle state                        |

### NodeGroupHeader

Header component with label and collapse/expand indicator.

| Parameter | Type       | Description                    |
| --------- | ---------- | ------------------------------ |
| label     | string     | Text label to display          |
| collapsed | boolean    | Whether the group is collapsed |
| onToggle  | () => void | Handler for toggle state       |

### NodeGroupItem

Individual item component with icon, title, and optional subtitle.

| Parameter  | Type            | Description                                                             |
| ---------- | --------------- | ----------------------------------------------------------------------- |
| icon       | React.ReactNode | Icon to display at the start of the item                                |
| title      | string          | Primary title text                                                      |
| subtitle   | string          | Optional subtitle text                                                  |
| isDragging | boolean         | Whether the item is being dragged (reduces opacity and adds background) |

## Usage Example

```tsx
<NodeGroup label="Extract" collapsed={false} onToggle={() => setCollapsed(!collapsed)}>
    <NodeGroupItem
        icon={<MyIcon />}
        title="BoundingBox info"
        subtitle="Extracts details (position, size) from a bounding box"
    />
    <NodeGroupItem icon={<MyIcon />} title="Image info" subtitle="Extracts metadata or dimensions from an image" />
</NodeGroup>
```
npm package: @hautechai/webui.nodeheader
Description: Header component for Node system
Author: HautechAI
Latest version: 1.0.8

# NodeHeader

## Purpose

Header component for nodes that displays an icon, label, and badge. Uses Typography component for consistent text styling.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.nodeheader

# npm
npm install @hautechai/webui.nodeheader

# yarn
yarn add @hautechai/webui.nodeheader
```

## Parameters

| Parameter | Type            | Description                                                         |
| --------- | --------------- | ------------------------------------------------------------------- |
| icon      | React.ReactNode | Optional icon to display on the left side of the header             |
| label     | string          | Text label for the node, displayed using Typography component       |
| badge     | React.ReactNode | Optional badge component to display on the right side of the header |
npm package: @hautechai/webui.nodeport
Description: Port component for Node system
Author: HautechAI
Latest version: 1.2.0

# NodePort

## Purpose

Port component for input and output connections on nodes. Uses Typography component for consistent label styling and includes visual port handles.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.nodeport

# npm
npm install @hautechai/webui.nodeport

# yarn
yarn add @hautechai/webui.nodeport
```

## Parameters

| Parameter         | Type                                          | Description                                                                                                                                                   |
| ----------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| type              | 'input' \| 'output'                           | Specifies whether this is an input or output port, affecting positioning and styling                                                                          |
| label             | string                                        | Optional label for the port, displayed using Typography component                                                                                             |
| interactiveHandle | ReactNode                                     | Optional interactive element rendered inside the port handle for custom interactions                                                                          |
| state             | 'normal' \| 'warning' \| 'error' \| 'success' | Optional state of the port. Warning state shows warning icon next to label, error state colors the port handle red, success state uses actions.success tokens |

## Usage Example

```tsx
// Basic usage
<NodePort type="input" label="Input Port" />

// Warning state with icon
<NodePort type="input" label="Warning Port" state="warning" />

// Error state with red port handle
<NodePort type="input" label="Error Port" state="error" />

// Success state with themed success tokens (no icon)
<NodePort type="input" label="Success Port" state="success" />

// With interactive handle
<NodePort
    type="output"
    label="Output Port"
    interactiveHandle={
        <div style={{
            width: '20px',
            height: '20px',
            backgroundColor: 'transparent',
            border: '1px solid red',
            cursor: 'pointer'
        }} />
    }
/>

## Theming

Success state styling uses the following theme tokens:
- actions.success (background)
- actions.onSuccess (border and text color)
```
npm package: @hautechai/webui.numberwithunitsinput
Description: Number input with units selection
Author: HautechAI
Latest version: 1.0.16

# NumberWithUnitsInput

## Purpose

Number input component with units selection and hover-based dropdown. Provides numeric input functionality with trailing units display that switches to a dropdown on hover for easy unit selection.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.numberwithunitsinput

# npm
npm install @hautechai/webui.numberwithunitsinput

# yarn
yarn add @hautechai/webui.numberwithunitsinput
```

## Parameters

| Parameter      | Type                    | Description                                              |
| -------------- | ----------------------- | -------------------------------------------------------- |
| value          | string                  | Required input value                                     |
| onChange       | (value: string) => void | Optional callback for input value changes                |
| units          | string                  | Required current unit display (e.g., 'px', '%', 'em')    |
| availableUnits | string[]                | Required array of available units for dropdown selection |
| onChangeUnits  | (units: string) => void | Optional callback for unit selection changes             |
| placeholder    | string                  | Optional input placeholder text                          |
| disabled       | boolean                 | Optional disabled state for the entire component         |
| size           | 'medium' \| 'small'     | Optional size variant (defaults to 'small')              |
| variation      | 'filled' \| 'outlined'  | Optional input style variant (defaults to 'filled')      |
| leadingIcon    | React.ReactNode         | Optional icon element displayed at input start           |
| hoverControls  | React.ReactNode         | Optional controls displayed on hover/focus               |
| hasError       | boolean                 | Optional error state styling                             |
| className      | string                  | Optional CSS class name for styling the input element    |

## Usage Example

```tsx
<NumberWithUnitsInput
    value="100"
    units="px"
    availableUnits={['px', '%', 'em', 'rem']}
    onChange={(value) => console.log('Value changed:', value)}
    onChangeUnits={(units) => console.log('Units changed:', units)}
    placeholder="Enter value"
    leadingIcon={<PlaceholderIcon />}
/>
```
npm package: @hautechai/webui.operationitem
Description: Component for displaying operation status, progress, and details with actions for ongoing or completed operations.
Author: HautechAI
Latest version: 2.1.11

# OperationItem

## Purpose

Component for displaying operation status, progress, and details with actions for ongoing or completed operations.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.operationitem

# npm
npm install @hautechai/webui.operationitem

# yarn
yarn add @hautechai/webui.operationitem
```

## Parameters

| Parameter   | Type            | Description                                       |
| ----------- | --------------- | ------------------------------------------------- |
| title       | string          | Required operation title or name                  |
| status      | string          | Required current status of the operation          |
| progress    | number          | Optional progress percentage (0-100)              |
| description | string          | Optional detailed description of the operation    |
| actions     | React.ReactNode | Optional action buttons or controls               |
| timestamp   | string          | Optional timestamp for operation start/completion |

May include additional parameters for status indicators and operation metadata.

## Usage Example

```tsx
<OperationItem
    title="File Upload"
    status="In Progress"
    progress={75}
    description="Uploading document.pdf"
    actions={<Button label="Cancel" />}
/>
```
npm package: @hautechai/webui.pagination
Description: Navigation control component for paginated content with page numbers and navigation functionality.
Author: HautechAI
Latest version: 2.1.27

# Pagination

## Purpose

Navigation control component for paginated content with page numbers and navigation functionality.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.pagination

# npm
npm install @hautechai/webui.pagination

# yarn
yarn add @hautechai/webui.pagination
```

## Parameters

| Parameter    | Type                     | Description                                                      |
| ------------ | ------------------------ | ---------------------------------------------------------------- |
| totalPages   | number                   | Required total number of pages available                         |
| currentPage  | number                   | Required current active page number                              |
| onPageChange | (page: number) => void   | Required callback function triggered when page selection changes |
| getPageHref  | (page: number) => string | Optional function to generate href URLs for each page link       |

## Usage Example

```tsx
<Pagination
    totalPages={10}
    currentPage={currentPage}
    onPageChange={handlePageChange}
    getPageHref={(page) => `/items?page=${page}`}
/>
```
npm package: @hautechai/webui.panel
Description: Content container component with configurable hierarchy, sizing, and visual styling options.
Author: HautechAI
Latest version: 2.1.9

# Panel

## Purpose

Content container component with configurable hierarchy, sizing, and visual styling options.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.panel

# npm
npm install @hautechai/webui.panel

# yarn
yarn add @hautechai/webui.panel
```

## Parameters

| Parameter   | Type                     | Description                                                                            |
| ----------- | ------------------------ | -------------------------------------------------------------------------------------- |
| className   | string                   | Optional CSS class name for custom styling                                             |
| children    | React.ReactNode          | Optional content to be displayed within the panel                                      |
| hierarchy   | 'mid' \| 'low' \| 'high' | Optional visual hierarchy level affecting background and elevation (defaults to 'mid') |
| size        | 'small' \| 'medium'      | Optional size variant controlling padding and dimensions (defaults to 'medium')        |
| stretch     | boolean                  | When true, panel expands to fill available space                                       |
| highlighted | boolean                  | When true, applies highlighted styling to draw attention                               |

## Usage Example

```tsx
<Panel hierarchy="high" size="medium" highlighted={true} stretch={false}>
    <ContentArea />
</Panel>
```
npm package: @hautechai/webui.popover
Description: Floating content container component positioned relative to trigger elements with flexible content and positioning.
Author: HautechAI
Latest version: 2.1.10

# Popover

## Purpose

Floating content container component positioned relative to trigger elements with flexible content and positioning.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.popover

# npm
npm install @hautechai/webui.popover

# yarn
yarn add @hautechai/webui.popover
```

## Parameters

| Parameter        | Type                                            | Description                                                                |
| ---------------- | ----------------------------------------------- | -------------------------------------------------------------------------- |
| content          | ({ close }: { close: () => void }) => ReactNode | Required function returning popover content with access to close function  |
| contentPositions | PopoverPosition[]                               | Optional array of preferred positioning options for the popover            |
| trigger          | () => ReactNode                                 | Required function returning the trigger element that activates the popover |

## Usage Example

```tsx
<Popover
    content={({ close }) => (
        <div>
            <p>Popover content</p>
            <Button label="Close" onClick={close} />
        </div>
    )}
    contentPositions={['top', 'right', 'bottom', 'left']}
    trigger={() => <Button label="Open Popover" />}
/>
```
npm package: @hautechai/webui.previews
Description: Component for displaying content previews or thumbnails with navigation and selection capabilities.
Author: HautechAI
Latest version: 2.1.9

# Previews

## Purpose

Component for displaying content previews or thumbnails with navigation and selection capabilities.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.previews

# npm
npm install @hautechai/webui.previews

# yarn
yarn add @hautechai/webui.previews
```

## Parameters

| Parameter | Type                | Description                                            |
| --------- | ------------------- | ------------------------------------------------------ |
| items     | array               | Required array of preview items with URLs and metadata |
| selected  | string \| number    | Optional identifier of currently selected preview      |
| onSelect  | (item: any) => void | Optional callback function when preview is selected    |
| layout    | string              | Optional layout style (grid, list, carousel)           |
| size      | string              | Optional preview thumbnail size variant                |

May include additional parameters for navigation controls and preview behavior.

## Usage Example

```tsx
<Previews items={imageList} selected={selectedId} onSelect={handlePreviewSelect} layout="grid" size="medium" />
```
npm package: @hautechai/webui.price
Description: Formatted display component for pricing information with price value and billing period.
Author: HautechAI
Latest version: 2.1.11

# Price

## Purpose

Formatted display component for pricing information with price value and billing period.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.price

# npm
npm install @hautechai/webui.price

# yarn
yarn add @hautechai/webui.price
```

## Parameters

| Parameter | Type   | Description                                                      |
| --------- | ------ | ---------------------------------------------------------------- |
| price     | string | Required price value text (e.g., "$29.99", "Free")               |
| period    | string | Required billing period text (e.g., "month", "year", "one-time") |

## Usage Example

```tsx
<Price price="$29.99" period="month" />
```
npm package: @hautechai/webui.progress
Description: Visual indicator component displaying animated loading progress with customizable size.
Author: HautechAI
Latest version: 2.1.5

# Progress

## Purpose

Visual indicator component displaying animated loading progress with customizable size.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.progress

# npm
npm install @hautechai/webui.progress

# yarn
yarn add @hautechai/webui.progress
```

## Parameters

| Parameter | Type   | Description                                                  |
| --------- | ------ | ------------------------------------------------------------ |
| size      | number | Optional size dimension in pixels for the progress indicator |

## Usage Example

```tsx
<Progress size={40} />
```
npm package: @hautechai/webui.propertyblock
Description: A flexible container component for displaying property information with optional remove/add functionality and collapsible content.
Author: HautechAI
Latest version: 2.1.30

# PropertyBlock

## Purpose

A flexible container component for displaying property information with optional remove/add functionality and collapsible content.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.propertyblock

# npm
npm install @hautechai/webui.propertyblock

# yarn
yarn add @hautechai/webui.propertyblock
```

## Parameters

| Parameter | Type            | Description                                                                                                   |
| --------- | --------------- | ------------------------------------------------------------------------------------------------------------- |
| children  | React.ReactNode | Optional content to be displayed within the property block                                                    |
| removable | boolean         | When true, displays a remove/add button (defaults to false)                                                   |
| removed   | boolean         | When true, hides content and shows add button, when false shows content and remove button (defaults to false) |
| className | string          | Optional CSS class name for custom styling                                                                    |
| label     | string          | The text displayed in the property header (defaults to "Property")                                            |
| onToggle  | () => void      | Optional callback function called when the remove/add button is clicked                                       |

## Usage Example

```tsx
<PropertyBlock removable>
    <div>Custom property content</div>
</PropertyBlock>

<PropertyBlock label="Custom Property Name">
    <div>Content for custom property</div>
</PropertyBlock>
```
npm package: @hautechai/webui.row
Description: Horizontal layout container component for arranging child components in a row with flexible spacing and alignment options.
Author: HautechAI
Latest version: 2.1.9

# Row

## Purpose

Horizontal layout container component for arranging child components in a row with flexible spacing and alignment options.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.row

# npm
npm install @hautechai/webui.row

# yarn
yarn add @hautechai/webui.row
```

## Parameters

| Parameter  | Type                                     | Description                                                |
| ---------- | ---------------------------------------- | ---------------------------------------------------------- |
| className  | string                                   | Optional CSS class name for custom styling                 |
| children   | React.ReactNode                          | Child components to be arranged horizontally               |
| spacing    | keyof ThemeType['foundation']['spacing'] | Optional spacing between child elements using theme values |
| wrap       | boolean                                  | When true, allows items to wrap to new lines when needed   |
| reverse    | boolean                                  | When true, reverses the order of child elements            |
| stretch    | boolean                                  | When true, stretches the row to fill available space       |
| align      | Align                                    | Optional vertical alignment of child elements              |
| justify    | Justify                                  | Optional horizontal distribution of child elements         |
| fullHeight | boolean                                  | When true, row takes full available height                 |
| noOverflow | boolean                                  | When true, prevents content overflow                       |

## Usage Example

```tsx
<Row spacing="m" align="center" justify="space-between">
    <Button label="Cancel" />
    <Button label="Save" />
</Row>
```
npm package: @hautechai/webui.segmentedcontrol
Description: Multi-option selector component with segmented button appearance for choosing between related options.
Author: HautechAI
Latest version: 2.1.14

# SegmentedControl

## Purpose

Multi-option selector component with segmented button appearance for choosing between related options.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.segmentedcontrol

# npm
npm install @hautechai/webui.segmentedcontrol

# yarn
yarn add @hautechai/webui.segmentedcontrol
```

## Parameters

| Parameter    | Type                                       | Description                                                         |
| ------------ | ------------------------------------------ | ------------------------------------------------------------------- |
| options      | Option[]                                   | Required array of selectable options with labels and values         |
| value        | string                                     | Optional controlled selected value                                  |
| defaultValue | string                                     | Optional default selected value                                     |
| onChange     | (event: MouseEvent, value: string) => void | Optional callback function when selection changes                   |
| material     | boolean                                    | When true, uses material design variant instead of HIG              |
| whitespace   | keyof ThemeType['foundation']['spacing']   | Optional spacing to add left/right padding to items                 |
| stretch      | boolean                                    | When true, component takes full width with evenly distributed items |
| size         | 'default' \| 'small'                       | Optional size variant - small has 28px total height                 |

## Usage Example

```tsx
<SegmentedControl
    options={[
        { label: 'List', value: 'list' },
        { label: 'Grid', value: 'grid' },
        { label: 'Cards', value: 'cards' },
    ]}
    value={viewMode}
    onChange={(event, value) => setViewMode(value)}
    stretch={true}
    whitespace="l"
/>
```
npm package: @hautechai/webui.sidebar
Description: Navigation panel component typically positioned on the page side with collapsible sections and navigation items.
Author: HautechAI
Latest version: 2.1.9

# Sidebar

## Purpose

Navigation panel component typically positioned on the page side with collapsible sections and navigation items.

## Installation

```bash
# pnpm (recommended)
pnpm add @hautechai/webui.sidebar

# npm
npm install @hautechai/webui.sidebar

# yarn
yarn add @hautechai/webui.sidebar
```

## Parameters

| Parameter | Type              | Description                                              |
| --------- | ----------------- | -------------------------------------------------------- |
| children  | React.ReactNode   | Required navigation content and menu items               |
| collapsed | boolean           | Optional state controlling whether sidebar is collapsed  |
| onToggle  | () => void        | Optional callback function for collapse/expand actions   |
| position  | 'left' \| 'right' | Optional positioning side (typically defaults to 'left') |
| width     | number \| string  | Optional width when expanded                             |

May include additional parameters for animation and responsive behavior.

## Usage Example

```tsx
<Sidebar collapsed={isSidebarCollapsed} onToggle={toggleSidebar} position="left" width={250}>
    <NavigationMenu />
</Sidebar>
```