open-index/open-npm huggingface dataset:
npm package: @hautechai/webui.slider
Description: Range input control component for selecting numeric values within a specified range with visual feedback.
Author: HautechAI
Latest version: 2.1.9

# Slider

## Purpose

Range input control component for selecting numeric values within a specified range with visual feedback.

## Installation

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

# npm
npm install @hautechai/webui.slider

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

## Parameters

| Parameter | Type                    | Description                                            |
| --------- | ----------------------- | ------------------------------------------------------ |
| min       | number                  | Minimum value of the slider range                      |
| max       | number                  | Maximum value of the slider range                      |
| step      | number                  | Optional increment step between values (defaults to 1) |
| value     | number                  | Current selected value of the slider                   |
| onChange  | (value: number) => void | Callback function triggered when slider value changes  |

## Usage Example

```tsx
<Slider min={0} max={100} step={5} value={currentValue} onChange={setCurrentValue} />
```
npm package: @hautechai/webui.switch
Description: Toggle control component for boolean on/off states with visual feedback and controlled/uncontrolled modes.
Author: HautechAI
Latest version: 2.1.9

# Switch

## Purpose

Toggle control component for boolean on/off states with visual feedback and controlled/uncontrolled modes.

## Installation

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

# npm
npm install @hautechai/webui.switch

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

## Parameters

| Parameter | Type                       | Description                                                         |
| --------- | -------------------------- | ------------------------------------------------------------------- |
| checked   | boolean                    | Optional controlled state value for the switch                      |
| onChange  | (checked: boolean) => void | Optional callback function triggered when switch state changes      |
| disabled  | boolean                    | When true, disables switch interaction and applies disabled styling |

## Usage Example

```tsx
<Switch checked={isEnabled} onChange={setIsEnabled} disabled={isLoading} />
```
npm package: @hautechai/webui.table
Description: Data table component with sorting, selection, pagination, and customizable columns for displaying structured data.
Author: HautechAI
Latest version: 2.1.9

# Table

## Purpose

Data table component with sorting, selection, pagination, and customizable columns for displaying structured data.

## Installation

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

# npm
npm install @hautechai/webui.table

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

## Parameters

| Parameter  | Type                                        | Description                                                   |
| ---------- | ------------------------------------------- | ------------------------------------------------------------- |
| data       | array                                       | Required array of data objects to display in table rows       |
| columns    | array                                       | Required column configuration with headers and cell renderers |
| sortable   | boolean                                     | When true, enables column sorting functionality               |
| selectable | boolean                                     | When true, enables row selection with checkboxes              |
| pagination | object                                      | Optional pagination configuration                             |
| onSort     | (column: string, direction: string) => void | Optional sort change callback                                 |
| onSelect   | (selectedRows: any[]) => void               | Optional selection change callback                            |

May include additional parameters for filtering and custom cell rendering.

## Usage Example

```tsx
<Table
    data={tableData}
    columns={columnConfig}
    sortable={true}
    selectable={true}
    onSort={handleSort}
    onSelect={handleSelection}
/>
```
npm package: @hautechai/webui.textbutton
Description: Text-only button component optimized for minimal visual presence with hierarchy and icon support.
Author: HautechAI
Latest version: 2.2.0

# TextButton

## Purpose

Text-only button component optimized for minimal visual presence with hierarchy and icon support.

## Installation

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

# npm
npm install @hautechai/webui.textbutton

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

## Parameters

| Parameter    | Type                                             | Description                                                                     |
| ------------ | ------------------------------------------------ | ------------------------------------------------------------------------------- |
| hierarchy    | 'primary' \| 'secondary'                         | Optional visual hierarchy affecting color and emphasis (defaults to 'primary')  |
| size         | 'medium' \| 'small' \| 'xsmall'                  | Optional size variant controlling typography and spacing (defaults to 'medium') |
| 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
<TextButton
    hierarchy="primary"
    size="medium"
    label="Learn More"
    trailingIcon={<ArrowIcon />}
    onClick={handleLearnMore}
/>
```
npm package: @hautechai/webui.textinput
Description: Single-line text input component with icon support, validation states, and various input types.
Author: HautechAI
Latest version: 2.1.13

# TextInput

## Purpose

Single-line text input component with icon support, validation states, and various input types.

## Installation

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

# npm
npm install @hautechai/webui.textinput

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

## Parameters

| Parameter     | Type                                             | Description                                                                   |
| ------------- | ------------------------------------------------ | ----------------------------------------------------------------------------- |
| className     | string                                           | Optional CSS class name for custom styling                                    |
| placeholder   | string                                           | Optional placeholder text displayed when input is empty                       |
| disabled      | boolean                                          | When true, disables input interaction and applies disabled styling            |
| leadingIcon   | React.ReactNode                                  | Optional icon displayed at the beginning of the input                         |
| trailingIcon  | React.ReactNode                                  | Optional icon displayed at the end of the input                               |
| hoverControls | React.ReactNode                                  | Optional controls displayed on hover/focus with xs gap from trailing elements |
| value         | string                                           | Optional controlled value for the input                                       |
| onChange      | (e: React.ChangeEvent<HTMLInputElement>) => void | Optional callback function triggered when input value changes                 |
| step          | number                                           | Optional step value for numeric inputs                                        |
| hasError      | boolean                                          | When true, applies error styling to indicate validation failure               |
| type          | 'text' \| 'password' \| 'email' \| 'number'      | Required input type specification                                             |
| size          | 'medium' \| 'small'                              | Optional size variant. 'medium' (default) or 'small' matching Figma specs     |

## Usage Example

```tsx
<TextInput
    type="email"
    placeholder="Enter your email"
    leadingIcon={<EmailIcon />}
    value={email}
    onChange={handleEmailChange}
    hasError={!!emailError}
/>
```
npm package: @hautechai/webui.theme
Description: Theme configuration object containing all design system values including colors, spacing, typography, and styling constants.
Author: HautechAI
Latest version: 2.1.10

# Theme

## Purpose

Theme configuration object containing all design system values including colors, spacing, typography, and styling constants.

## Installation

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

# npm
npm install @hautechai/webui.theme

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

## Parameters

This component exports a theme object with design system values and does not accept props. It provides:

- Foundation values (animation, corner radius, spacing, stroke, elevation)
- Color palette (layout, actions, semantic colors)
- Typography system
- Component-specific styling tokens

## Usage Example

```tsx
import { Theme } from '@hautechai/webui.theme';

// Access theme values
const primaryColor = Theme.palette.actions.primary;
const mediumSpacing = Theme.foundation.spacing.m;
```
npm package: @hautechai/webui.themeprovider
Description: Context provider component for theme management, supplying theme values to all child components in the component tree.
Author: HautechAI
Latest version: 2.1.8

# ThemeProvider

## Purpose

Context provider component for theme management, supplying theme values to all child components in the component tree.

## Installation

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

# npm
npm install @hautechai/webui.themeprovider

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

## Parameters

| Parameter | Type            | Description                                               |
| --------- | --------------- | --------------------------------------------------------- |
| theme     | ThemeType       | Optional theme object to override default theme values    |
| children  | React.ReactNode | Required child components that will receive theme context |

## Usage Example

```tsx
import { ThemeProvider, Theme } from '@hautechai/webui.themeprovider';

<ThemeProvider theme={customTheme || Theme}>
    <App />
</ThemeProvider>;
```
npm package: @hautechai/webui.tile
Description: Content tile component with image/video background, overlay content, and flexible sizing options.
Author: HautechAI
Latest version: 2.1.9

# Tile

## Purpose

Content tile component with image/video background, overlay content, and flexible sizing options.

## Installation

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

# npm
npm install @hautechai/webui.tile

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

## Parameters

| Parameter   | Type                      | Description                                                        |
| ----------- | ------------------------- | ------------------------------------------------------------------ |
| className   | string                    | Optional CSS class name for custom styling                         |
| icon        | React.ReactNode           | Optional icon overlay displayed on the tile                        |
| src         | string                    | Optional source URL for image or video content                     |
| selected    | boolean                   | When true, applies selected state styling                          |
| size        | TileSize                  | Optional predefined size variant                                   |
| width       | number \| string          | Optional custom width (mutually exclusive with size)               |
| height      | number \| string          | Optional custom height (mutually exclusive with size)              |
| aspectRatio | number                    | Optional aspect ratio constraint                                   |
| component   | 'div' \| 'img' \| 'video' | Optional HTML element type for the tile (defaults to 'div')        |
| alt         | string                    | Optional alt text for accessibility (when component is 'img')      |
| color       | IconColorProp             | Optional background color (theme path, currentColor, hex, or rgba) |

## Usage Example

```tsx
<Tile
    src="/path/to/image.jpg"
    icon={<PlayIcon />}
    aspectRatio={16 / 9}
    selected={isSelected}
    component="img"
    alt="Content preview"
    color="actions.primary"
/>

// Using hex color
<Tile
    icon={<PlayIcon />}
    size="medium"
    color="#ff6b35"
/>

// Using theme palette path
<Tile
    icon={<StarIcon />}
    color="layout.surfaceHigh"
/>
```
npm package: @hautechai/webui.tiletabgroup
Description: Tab container component using tile-based visual style for organizing content sections with visual tab indicators.
Author: HautechAI
Latest version: 2.1.9

# TileTabGroup

## Purpose

Tab container component using tile-based visual style for organizing content sections with visual tab indicators.

## Installation

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

# npm
npm install @hautechai/webui.tiletabgroup

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

## Parameters

| Parameter   | Type                              | Description                                            |
| ----------- | --------------------------------- | ------------------------------------------------------ |
| children    | React.ReactNode                   | Required tab content, typically TileTabItem components |
| value       | string \| number                  | Optional controlled active tab identifier              |
| onChange    | (value: string \| number) => void | Optional callback function when tab changes            |
| orientation | 'horizontal' \| 'vertical'        | Optional tab layout direction                          |
| size        | string                            | Optional size variant for tab styling                  |

May include additional parameters for styling and animation behavior.

## Usage Example

```tsx
<TileTabGroup value={activeTab} onChange={setActiveTab} orientation="horizontal">
    <TileTabItem value="tab1" label="Overview" />
    <TileTabItem value="tab2" label="Details" />
</TileTabGroup>
```
npm package: @hautechai/webui.tiletabitem
Description: Individual tab item component within a TileTabGroup, representing a single content section with tile-based styling.
Author: HautechAI
Latest version: 2.1.10

# TileTabItem

## Purpose

Individual tab item component within a TileTabGroup, representing a single content section with tile-based styling.

## Installation

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

# npm
npm install @hautechai/webui.tiletabitem

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

## Parameters

| Parameter | Type             | Description                                       |
| --------- | ---------------- | ------------------------------------------------- |
| value     | string \| number | Required unique identifier for this tab item      |
| label     | string           | Required text label displayed on the tab          |
| icon      | React.ReactNode  | Optional icon displayed alongside the label       |
| disabled  | boolean          | When true, disables tab selection and interaction |
| children  | React.ReactNode  | Optional content displayed when tab is active     |

May include additional parameters for custom styling and badges.

## Usage Example

```tsx
<TileTabItem value="settings" label="Settings" icon={<SettingsIcon />} disabled={!hasPermission}>
    <SettingsPanel />
</TileTabItem>
```
npm package: @hautechai/webui.timelineruler
Description: A timeline ruler component that displays graduated time markers with both numbered and unnumbered graduations. The ruler automatically calculates appropriate time intervals based on scale and available space.
Author: HautechAI
Latest version: 1.0.4

# TimelineRuler

## Purpose

A timeline ruler component that displays graduated time markers with both numbered and unnumbered graduations. The ruler automatically calculates appropriate time intervals based on scale and available space.

## Parameters

| Parameter                   | Type   | Description                                           |
| --------------------------- | ------ | ----------------------------------------------------- |
| scale                       | number | Pixels per second - determines the scale of the ruler |
| length                      | number | Total length of the timeline in seconds               |
| numberedGraduationsDistance | number | Distance between numbered graduations in pixels       |

## Usage Example

```tsx
<TimelineRuler scale={50} length={10} numberedGraduationsDistance={100} />
```
npm package: @hautechai/webui.timelinetoolbar
Description: Timeline toolbar component with playback controls and time display
Author: HautechAI
Latest version: 1.0.10

# TimelineToolbar

## Purpose

Timeline toolbar component with playback controls and time display for timeline interfaces. Provides standard media controls including play/pause, seek, and repeat functionality.

## Parameters

| Parameter       | Type       | Description                                                       |
| --------------- | ---------- | ----------------------------------------------------------------- |
| currentTime     | number     | Current playback time in seconds                                  |
| repeatEnabled   | boolean    | Whether repeat is enabled                                         |
| isPlaying       | boolean    | Optional. Whether the player is currently playing (default false) |
| onSkipToStart   | () => void | Optional callback when skip to start button is clicked            |
| onRewindBack    | () => void | Optional callback when rewind back button is clicked              |
| onPlayPause     | () => void | Optional callback when play/pause button is clicked               |
| onRewindForward | () => void | Optional callback when rewind forward button is clicked           |
| onSkipToEnd     | () => void | Optional callback when skip to end button is clicked              |
| onRepeatToggle  | () => void | Optional callback when repeat button is toggled                   |

## Usage Example

```tsx
<TimelineToolbar
    currentTime={125}
    repeatEnabled={false}
    isPlaying={true}
    onSkipToStart={() => console.log('Skip to start')}
    onRewindBack={() => console.log('Rewind back')}
    onPlayPause={() => console.log('Play/pause')}
    onRewindForward={() => console.log('Rewind forward')}
    onSkipToEnd={() => console.log('Skip to end')}
    onRepeatToggle={() => console.log('Toggle repeat')}
/>
```
npm package: @hautechai/webui.toggleiconbutton
Description: Toggle button component optimized for displaying icons with different color schemes and a checked state for toggle functionality.
Author: HautechAI
Latest version: 2.1.9

# ToggleIconButton

## Purpose

Toggle button component optimized for displaying icons with different color schemes and a checked state for toggle functionality.

## Installation

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

# npm
npm install @hautechai/webui.toggleiconbutton

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

## Parameters

| Parameter | Type                                             | Description                                                               |
| --------- | ------------------------------------------------ | ------------------------------------------------------------------------- |
| variant   | 'filled' \| 'outlined' \| 'flat' \| 'primary'    | Optional visual style variant (defaults to 'filled')                      |
| size      | 'medium' \| 'small' \| 'xsmall'                  | Optional size variant with fixed dimensions (defaults to 'medium')        |
| icon      | React.ReactNode                                  | Required icon component to be displayed                                   |
| checked   | boolean                                          | When true, applies alternate styling for toggle state (defaults to false) |
| 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
<ToggleIconButton variant="primary" size="medium" icon={<StarIcon />} checked={isStarred} onClick={handleToggle} />
```
npm package: @hautechai/webui.toolbutton
Description: ToolButton component with selected state
Author: HautechAI
Latest version: 2.1.9

# ToolButton

## Purpose

Icon button component with selected state functionality, designed for toolbar interfaces where users can toggle tool selection.

## Installation

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

# npm
npm install @hautechai/webui.toolbutton

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

## Parameters

| Parameter | Type                                             | Description                                                             |
| --------- | ------------------------------------------------ | ----------------------------------------------------------------------- |
| icon      | React.ReactNode                                  | Required icon component to be displayed (size will be injected as 24px) |
| selected  | boolean                                          | Optional selected state of the button (defaults to false)               |
| 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
<ToolButton icon={<BrushIcon />} selected={currentTool === 'brush'} onClick={() => setCurrentTool('brush')} />
```
npm package: @hautechai/webui.tooltip
Description: Contextual popup component providing additional information or help text with flexible positioning and sizing options.
Author: HautechAI
Latest version: 2.1.12

# Tooltip

## Purpose

Contextual popup component providing additional information or help text with flexible positioning and sizing options.

## Installation

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

# npm
npm install @hautechai/webui.tooltip

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

## Parameters

| Parameter       | Type                                   | Description                                                                  |
| --------------- | -------------------------------------- | ---------------------------------------------------------------------------- |
| text            | string                                 | Required tooltip content text to display                                     |
| children        | React.ReactNode                        | Required trigger element that activates the tooltip on hover                 |
| position        | 'right' \| 'left' \| 'top' \| 'bottom' | Optional tooltip positioning relative to trigger element                     |
| reposition      | boolean                                | Optional flag to enable automatic repositioning when tooltip goes off-screen |
| boundaryElement | HTMLElement                            | Optional boundary element for repositioning calculations                     |
| size            | 'small' \| 'medium'                    | Optional size variant affecting padding and appearance                       |
| buttonLabel     | string                                 | Optional button label (only available when size is 'medium')                 |
| onClick         | () => void                             | Optional click handler for button (only available when size is 'medium')     |
| zIndex          | number                                 | Optional z-index for tooltip layering (defaults to 1000)                     |

## Usage Example

```tsx
<Tooltip
    text="This is helpful information"
    position="top"
    size="medium"
    buttonLabel="Learn More"
    onClick={handleLearnMore}
>
    <Button label="Hover me" />
</Tooltip>
```
npm package: @hautechai/webui.typography
Description: Text rendering component with various predefined styles, variants, and color options for consistent typography.
Author: HautechAI
Latest version: 2.1.10

# Typography

## Purpose

Text rendering component with various predefined styles, variants, and color options for consistent typography.

## Installation

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

# npm
npm install @hautechai/webui.typography

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

## Parameters

| Parameter | Type                                              | Description                                                          |
| --------- | ------------------------------------------------- | -------------------------------------------------------------------- |
| className | string                                            | Optional CSS class name for custom styling                           |
| variant   | keyof typeof variants                             | Required text style variant from predefined typography system        |
| children  | React.ReactNode                                   | Text content to be rendered                                          |
| color     | Paths<ThemeType['palette'], { leavesOnly: true }> | Optional color from theme palette (e.g., 'layout.onSurface.primary') |
| textAlign | TextAlign                                         | Optional text alignment: 'left', 'right', 'center', or 'inherit'     |
| noWrap    | boolean                                           | When true, prevents text wrapping to multiple lines                  |
| overflow  | 'auto' \| 'hidden' \| 'ellipsis'                  | Optional overflow behavior for text content                          |

## Usage Example

```tsx
<Typography variant="LabelMediumEmphasized" color="layout.onSurface.primary" textAlign="center">
    Welcome to the application
</Typography>
```
npm package: @hautechai/webui.user
Description: User profile display component showing avatar, title, subtitle, and optional action elements.
Author: HautechAI
Latest version: 2.1.12

# User

## Purpose

User profile display component showing avatar, title, subtitle, and optional action elements.

## Installation

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

# npm
npm install @hautechai/webui.user

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

## Parameters

| Parameter | Type            | Description                                                       |
| --------- | --------------- | ----------------------------------------------------------------- |
| avatar    | string          | Optional URL for the user's profile image                         |
| title     | string          | Optional primary text typically showing the user's name           |
| subtitle  | string          | Optional secondary text for additional user information           |
| actions   | React.ReactNode | Optional action buttons or elements displayed alongside user info |

## Usage Example

```tsx
<User avatar="/path/to/avatar.jpg" title="John Doe" subtitle="Software Engineer" actions={<Button label="Edit" />} />
```
npm package: @hautechai/webui.userbalance
Description: Specialized component for displaying user account balance information with formatting and action options.
Author: HautechAI
Latest version: 2.1.27

# UserBalance

## Purpose

Specialized component for displaying user account balance information with formatting and action options.

## Installation

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

# npm
npm install @hautechai/webui.userbalance

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

## Parameters

| Parameter   | Type             | Description                                             |
| ----------- | ---------------- | ------------------------------------------------------- |
| balance     | number \| string | Required current balance amount                         |
| currency    | string           | Optional currency symbol or code (e.g., "$", "USD")     |
| format      | string           | Optional number formatting style                        |
| actions     | React.ReactNode  | Optional action buttons (e.g., "Add Funds", "Withdraw") |
| pending     | number \| string | Optional pending transaction amount                     |
| showHistory | boolean          | Optional flag to show balance history link              |

May include additional parameters for styling and transaction display.

## Usage Example

```tsx
<UserBalance balance={1250.75} currency="$" format="currency" pending={25.0} actions={<Button label="Add Funds" />} />
```
npm package: @hautechai/webui.verticalalignmentcontrol
Description: Multi-option alignment selector for vertical alignment with icon-only interface using top, middle, and bottom alignment options.
Author: HautechAI
Latest version: 1.0.7

# VerticalAlignmentControl

## Purpose

Multi-option alignment selector for vertical alignment with icon-only interface using top, middle, and bottom alignment options.

## Parameters

| Parameter | Type                                                              | Description                                                 |
| --------- | ----------------------------------------------------------------- | ----------------------------------------------------------- |
| value     | 'top' \| 'middle' \| 'bottom'                                     | Optional controlled selected alignment value                |
| onChange  | (event: MouseEvent, value: 'top' \| 'middle' \| 'bottom') => void | Optional callback function when alignment selection changes |
| size      | 'default' \| 'small'                                              | Optional size variant - small has reduced height            |

## Usage Example

```tsx
<VerticalAlignmentControl value={alignment} onChange={(event, value) => setAlignment(value)} size="default" />
```
npm package: @hautechai/webui.visualeditorcolorpickerinput
Description: Visual editor color picker input with keyframe support and port toggle
Author: HautechAI
Latest version: 1.0.5

# VisualEditorColorPickerInput

## Purpose

A visual editor color picker input component that combines color selection with keyframe support and port connectivity for timeline-based editing interfaces. It extends ColorPickerInput with hover controls for port toggle and keyframes management.

## Parameters

| Parameter        | Type                                            | Description                                                 |
| ---------------- | ----------------------------------------------- | ----------------------------------------------------------- |
| value            | string                                          | The current color value (hex, rgb, etc.)                    |
| isPort           | boolean                                         | Whether this input is currently connected as a port         |
| keyframesState   | 'noKeyframes' \| 'hasKeyframes' \| 'isKeyframe' | The current keyframe state of the input                     |
| onChange         | (color: string) => void                         | Callback when the color value changes                       |
| onToggleKeyframe | () => void                                      | Callback when the keyframe toggle button is clicked         |
| onTogglePort     | () => void                                      | Callback when the port toggle button is clicked             |
| className        | string                                          | Additional CSS class names for the container                |
| placeholder      | string                                          | Placeholder text for the input field                        |
| disabled         | boolean                                         | Whether the input is disabled                               |
| hasError         | boolean                                         | Whether the input has an error state                        |
| variation        | 'filled' \| 'outlined'                          | Visual style variation of the input                         |
| size             | 'medium' \| 'small'                             | Size of the input component                                 |
| testId           | string                                          | Test identifier for the component                           |
| alphaEnabled     | boolean                                         | Whether to enable alpha channel support in the color picker |

## Usage Example

```tsx
import { VisualEditorColorPickerInput } from '@hautechai/webui.visualeditorcolorpickerinput';

<VisualEditorColorPickerInput
    value="#ff6b35"
    isPort={false}
    keyframesState="noKeyframes"
    onChange={(color) => console.log('Color changed:', color)}
    onToggleKeyframe={() => console.log('Toggle keyframe')}
    onTogglePort={() => console.log('Toggle port')}
    alphaEnabled={true}
    placeholder="Choose color"
/>;
```
npm package: @hautechai/webui.visualeditordropdown
Description: Visual editor dropdown with keyframe support and port state management
Author: HautechAI
Latest version: 1.0.3

# VisualEditorDropDown

## Purpose

A dropdown component for visual editors that provides option selection with keyframe timeline support and port state management. Based on the Dropdown component, it adds hover controls for workflow integration and keyframe toggle functionality.

## Parameters

| Parameter        | Type                                    | Description                                                      |
| ---------------- | --------------------------------------- | ---------------------------------------------------------------- |
| value            | string                                  | The currently selected option value                              |
| options          | Array<{ label: string; value: string }> | Array of selectable options                                      |
| isPort           | boolean                                 | Whether the component is in port mode (shows UnlinkIcon)         |
| keyframesState   | KeyframeToggleState                     | State of keyframes ('noKeyframes', 'hasKeyframes', 'isKeyframe') |
| onChange         | (value: string) => void                 | Callback when the selected value changes                         |
| onToggleKeyframe | () => void                              | Callback when the keyframe toggle is clicked                     |
| onTogglePort     | () => void                              | Callback when the port toggle button is clicked                  |
| label            | string                                  | Label text to display when no option is selected                 |
| disabled         | boolean                                 | Whether the dropdown is disabled                                 |
| hasError         | boolean                                 | Whether to display error styling                                 |
| type             | 'filled' \| 'outlined' \| 'flat'        | Visual style variant of the dropdown                             |
| size             | 'medium' \| 'small'                     | Size variant of the dropdown                                     |
| collapsed        | boolean                                 | Whether to show the dropdown in collapsed mode                   |
| className        | string                                  | Additional CSS classes                                           |
| testId           | string                                  | Test identifier for the component                                |

## Usage Example

```tsx
const options = [
    { label: 'Option 1', value: 'opt1' },
    { label: 'Option 2', value: 'opt2' },
    { label: 'Option 3', value: 'opt3' },
];

<VisualEditorDropDown
    value="opt1"
    options={options}
    isPort={false}
    keyframesState="noKeyframes"
    onChange={(value) => console.log('Selected:', value)}
    onToggleKeyframe={() => console.log('Keyframe toggled')}
    onTogglePort={() => console.log('Port toggled')}
    label="Select an option"
/>;
```
npm package: @hautechai/webui.visualeditorinput
Description: Visual editor input component with keyframe support
Author: HautechAI
Latest version: 2.1.37

# VisualEditorInput

## Purpose

A wrapper component that adds Port toggle and Keyframes toggle functionality to any input component. This component provides a consistent visual editor interface for inputs in the design system.

## Parameters

| Parameter        | Type                                            | Description                                                              |
| ---------------- | ----------------------------------------------- | ------------------------------------------------------------------------ |
| children         | React.ReactNode                                 | Required input component to wrap (e.g., TextInput, NumberWithUnitsInput) |
| isPort           | boolean                                         | Required port connection state - affects hover controls display          |
| keyframesState   | 'noKeyframes' \| 'hasKeyframes' \| 'isKeyframe' | Required keyframe timeline state                                         |
| onToggleKeyframe | () => void                                      | Optional callback for keyframe toggle interactions                       |
| onTogglePort     | () => void                                      | Optional callback for port connection toggle                             |
| disabled         | boolean                                         | Optional disabled state for the entire component                         |
| size             | 'medium' \| 'small'                             | Optional size variant (defaults to 'small')                              |
| testId           | string                                          | Optional test identifier for testing                                     |

## Usage Example

```tsx
// With TextInput
<VisualEditorInput
    isPort={false}
    keyframesState="noKeyframes"
    onToggleKeyframe={() => console.log('Keyframe toggled')}
    onTogglePort={() => console.log('Port toggled')}
>
    <TextInput
        type="text"
        value="Sample text"
        placeholder="Enter text"
        onChange={(e) => setValue(e.target.value)}
    />
</VisualEditorInput>

// With NumberWithUnitsInput
<VisualEditorInput
    isPort={false}
    keyframesState="noKeyframes"
    onToggleKeyframe={() => console.log('Keyframe toggled')}
    onTogglePort={() => console.log('Port toggled')}
>
    <NumberWithUnitsInput
        value="100"
        units="px"
        availableUnits={['px', '%', 'em']}
        onChange={(value) => setValue(value)}
        onChangeUnits={(units) => setUnits(units)}
        placeholder="Enter value"
    />
</VisualEditorInput>
```
npm package: @hautechai/webui.zoom
Description: Zoom control component with increment/decrement buttons
Author: HautechAI
Latest version: 1.0.9

# Zoom

## Purpose

A zoom control component that displays zoom percentage with increment and decrement buttons. Provides an intuitive interface for adjusting zoom levels in applications. The buttons automatically round values to the previous or next step multiples.

## Parameters

| Parameter | Type                    | Description                                                                                                              |
| --------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| value     | number                  | The current zoom value (e.g., 100 for 100%)                                                                              |
| onChange  | (value: number) => void | Callback function called when zoom value changes                                                                         |
| step      | number                  | Optional. The step value for increment/decrement (default: 10). Buttons round to the nearest step multiple when clicked. |

## Usage Example

```tsx
import { Zoom } from '@hautechai/webui.zoom';

const [zoomLevel, setZoomLevel] = useState(100);

// Default step (10) - buttons will round to nearest 10
<Zoom value={zoomLevel} onChange={setZoomLevel} />

// Custom step (25) - buttons will round to nearest 25
<Zoom value={zoomLevel} onChange={setZoomLevel} step={25} />

// Example behavior with step=10:
// If value is 123.7, minus button changes to 120, plus button changes to 130
```