open-index/open-npm huggingface dataset:
npm package: @hautechai/webui.appbar
Description: Top navigation bar component with configurable left, center, and right content areas for application headers.
Author: HautechAI
Latest version: 2.1.9

# AppBar

## Purpose

Top navigation bar component with configurable left, center, and right content areas for application headers.

## Installation

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

# npm
npm install @hautechai/webui.appbar

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

## Parameters

| Parameter | Type            | Description                                                                                  |
| --------- | --------------- | -------------------------------------------------------------------------------------------- |
| hierarchy | 'mid' \| 'low'  | Visual hierarchy level affecting background color and styling prominence (defaults to 'mid') |
| left      | React.ReactNode | Optional content displayed in the left section of the app bar                                |
| center    | React.ReactNode | Optional content displayed in the center section of the app bar                              |
| right     | React.ReactNode | Optional content displayed in the right section of the app bar                               |

## Usage Example

```tsx
<AppBar hierarchy="mid" left={<Logo />} center={<SearchBar />} right={<UserMenu />} />
```
npm package: @hautechai/webui.appbarmobile
Description: Mobile-optimized version of the app bar with responsive behavior and vertical content sections.
Author: HautechAI
Latest version: 2.1.9

# AppBarMobile

## Purpose

Mobile-optimized version of the app bar with responsive behavior and vertical content sections.

## Installation

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

# npm
npm install @hautechai/webui.appbarmobile

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

## Parameters

| Parameter | Type            | Description                                                                       |
| --------- | --------------- | --------------------------------------------------------------------------------- |
| hierarchy | 'mid' \| 'low'  | Optional visual hierarchy level affecting background color and styling prominence |
| top       | React.ReactNode | Optional content displayed in the top section of the mobile app bar               |
| center    | React.ReactNode | Optional content displayed in the center section of the mobile app bar            |
| bottom    | React.ReactNode | Optional content displayed in the bottom section of the mobile app bar            |

## Usage Example

```tsx
<AppBarMobile hierarchy="mid" top={<BackButton />} center={<Title />} bottom={<NavigationTabs />} />
```
npm package: @hautechai/webui.aspectratio
Description: Component for selecting and managing aspect ratios with predefined options and custom ratio calculation.
Author: HautechAI
Latest version: 2.1.30

# AspectRatio

## Purpose

Component for selecting and managing aspect ratios with predefined options and custom ratio calculation.

## Installation

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

# npm
npm install @hautechai/webui.aspectratio

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

## Parameters

| Parameter      | Type                                                       | Description                                                    |
| -------------- | ---------------------------------------------------------- | -------------------------------------------------------------- |
| options        | string[]                                                   | Array of available aspect ratio options                        |
| defaultOptions | [string, string, string]                                   | Tuple of three default aspect ratio options                    |
| sizeForRatio   | (aspectRatio: string) => { width: number; height: number } | Function that calculates dimensions for a given aspect ratio   |
| value          | string                                                     | Optional controlled selected aspect ratio value                |
| onChange       | (aspectRatio: string) => void                              | Optional callback function triggered when aspect ratio changes |

## Usage Example

```tsx
<AspectRatio
    options={['16:9', '4:3', '1:1', '3:2']}
    defaultOptions={['16:9', '4:3', '1:1']}
    sizeForRatio={(ratio) => calculateSize(ratio)}
    value={selectedRatio}
    onChange={setSelectedRatio}
/>
```
npm package: @hautechai/webui.avatar
Description: User profile image or initials display component for representing users in interfaces.
Author: HautechAI
Latest version: 2.1.11

# Avatar

## Purpose

User profile image or initials display component for representing users in interfaces.

## Installation

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

# npm
npm install @hautechai/webui.avatar

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

## Parameters

| Parameter | Type                           | Description                                                                        |
| --------- | ------------------------------ | ---------------------------------------------------------------------------------- |
| src       | string                         | Optional URL for the user's profile image                                          |
| initials  | string                         | Optional text initials to display when image is not available                      |
| icon      | ReactNode                      | Optional icon component to display as fallback                                     |
| size      | 'small' \| 'medium' \| 'large' | Optional size variant. 'small' (24x24), 'medium' (40x40, default), 'large' (60x60) |
| gradient  | [string, string]               | Optional two colors for vertical gradient background                               |

## Usage Example

```tsx
// Basic usage with different sizes
<Avatar src="/path/to/avatar.jpg" size="small" />
<Avatar initials="JD" size="medium" />
<Avatar icon={<UserIcon />} size="large" />

// With gradient background
<Avatar initials="AB" gradient={['#ff6b6b', '#4ecdc4']} />
<Avatar icon={<UserIcon />} size="large" gradient={['#667eea', '#764ba2']} />
```
npm package: @hautechai/webui.badge
Description: Small notification indicator component to highlight status, notifications, or count information with color coding.
Author: HautechAI
Latest version: 2.1.10

# Badge

## Purpose

Small notification indicator component to highlight status, notifications, or count information with color coding.

## Installation

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

# npm
npm install @hautechai/webui.badge

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

## Parameters

| Parameter | Type                           | Description                                                    |
| --------- | ------------------------------ | -------------------------------------------------------------- |
| color     | 'success' \| 'error' \| 'info' | Required color variant indicating the badge's semantic meaning |
| label     | string                         | Required text content displayed within the badge               |

## Usage Example

```tsx
<Badge color="success" label="Active" />
```
npm package: @hautechai/webui.bottomsheet
Description: Slide-up modal panel component optimized for mobile-first interfaces and contextual actions.
Author: HautechAI
Latest version: 2.1.9

# BottomSheet

## Purpose

Slide-up modal panel component optimized for mobile-first interfaces and contextual actions.

## Installation

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

# npm
npm install @hautechai/webui.bottomsheet

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

## Parameters

| Parameter     | Type                | Description                                                             |
| ------------- | ------------------- | ----------------------------------------------------------------------- |
| open          | boolean             | Optional flag controlling the visibility state of the bottom sheet      |
| onClose       | () => void          | Optional callback function triggered when the bottom sheet should close |
| children      | React.ReactNode     | Content to be displayed within the bottom sheet                         |
| inset         | object              | Optional positioning insets with top, left, right, bottom number values |
| zIndex        | number              | Optional z-index value for layering control                             |
| backdropStyle | React.CSSProperties | Optional custom styles for the backdrop overlay                         |

## Usage Example

```tsx
<BottomSheet open={isOpen} onClose={handleClose} inset={{ bottom: 20 }}>
    <ActionMenu />
</BottomSheet>
```
npm package: @hautechai/webui.button
Description: Primary action button component with customizable variants, hierarchies, icons, and styling options for user interactions.
Author: HautechAI
Latest version: 2.1.10

# Button

## Purpose

Primary action button component with customizable variants, hierarchies, icons, and styling options for user interactions.

## Installation

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

# npm
npm install @hautechai/webui.button

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

## Parameters

| Parameter    | Type                                             | Description                                                                |
| ------------ | ------------------------------------------------ | -------------------------------------------------------------------------- |
| id           | string                                           | Optional identifier for the button element                                 |
| variant      | 'filled' \| 'outlined'                           | Visual style variant - filled (solid background) or outlined (border only) |
| hierarchy    | 'primary' \| 'secondary'                         | Button importance level affecting color scheme and visual prominence       |
| size         | 'medium' \| 'small'                              | Size variant controlling padding, font size, and overall dimensions        |
| label        | string                                           | 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 | Click event handler function                                               |
| stretch      | boolean                                          | When true, button expands to fill available width                          |

## Usage Example

```tsx
<Button variant="filled" hierarchy="primary" label="Save Changes" onClick={handleSave} />
```
npm package: @hautechai/webui.buttonbase
Description: Base button component providing common button functionality and styling foundation for other button components.
Author: HautechAI
Latest version: 2.1.9

# ButtonBase

## Purpose

Base button component providing common button functionality and styling foundation for other button components.

## Installation

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

# npm
npm install @hautechai/webui.buttonbase

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

## Parameters

| Parameter | Type                                           | Description                                                         |
| --------- | ---------------------------------------------- | ------------------------------------------------------------------- |
| id        | string                                         | Optional identifier for the button element                          |
| className | string                                         | Optional CSS class name for custom styling                          |
| onClick   | ComponentProps<typeof StyledButton>['onClick'] | Optional click event handler function                               |
| disabled  | boolean                                        | When true, disables button interaction and applies disabled styling |
| stretch   | boolean                                        | When true, button expands to fill available width                   |
| children  | React.ReactNode                                | Content to be displayed within the button                           |

## Usage Example

```tsx
<ButtonBase onClick={handleClick} stretch={true} className="custom-button">
    Custom Button Content
</ButtonBase>
```
npm package: @hautechai/webui.card
Description: Content container component displaying an image with label and action buttons for showcasing media or content items.
Author: HautechAI
Latest version: 2.1.27

# Card

## Purpose

Content container component displaying an image with label and action buttons for showcasing media or content items.

## Installation

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

# npm
npm install @hautechai/webui.card

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

## Parameters

| Parameter     | Type                                 | Description                                             |
| ------------- | ------------------------------------ | ------------------------------------------------------- |
| label         | string                               | Text label displayed below the image                    |
| image         | string                               | Source URL for the card's main image                    |
| icon          | React.ReactNode                      | Optional icon overlay displayed on the image            |
| aspectRatio   | number                               | Optional aspect ratio to maintain for the image display |
| width         | number \| string                     | Optional fixed width for the card                       |
| height        | number \| string                     | Optional fixed height for the card                      |
| fullWidth     | boolean                              | When true, card expands to fill available width         |
| onDownload    | () => void                           | Optional callback function for download action          |
| onClick       | React.MouseEventHandler<HTMLElement> | Optional click handler for the entire card              |
| href          | string                               | Optional URL to make the card act as a link             |
| tileComponent | TileProps['component']               | Optional component override for the tile element        |

## Usage Example

```tsx
<Card
    label="Sample Image"
    image="/path/to/image.jpg"
    aspectRatio={16 / 9}
    onDownload={handleDownload}
    onClick={handleCardClick}
/>
```
npm package: @hautechai/webui.chat
Description: A conversational interface component for displaying messages between users and agents, with support for typing indicators and diverse avatar styles.
Author: HautechAI
Latest version: 2.1.4

# Chat

## Purpose

A conversational interface component for displaying messages between users and agents, with support for typing indicators and diverse avatar styles.

## Parameters

| Parameter | Type          | Description                                           |
| --------- | ------------- | ----------------------------------------------------- |
| messages  | ChatMessage[] | Array of chat messages to display in the conversation |
| className | string        | Optional CSS class name for custom styling            |

### ChatMessage

| Parameter | Type    | Description                                             |
| --------- | ------- | ------------------------------------------------------- |
| id        | string  | Unique identifier for the message                       |
| author    | Author  | Information about the message author                    |
| content   | string  | Optional message text content (not used for typing)     |
| isTyping  | boolean | Optional flag indicating the author is currently typing |

### Author

| Parameter | Type             | Description                                        |
| --------- | ---------------- | -------------------------------------------------- |
| name      | string           | Display name of the message author                 |
| initials  | string           | Optional initials for avatar display               |
| gradient  | [string, string] | Optional two colors for gradient avatar background |
| avatarSrc | string           | Optional URL for avatar image                      |

## Usage Example

```tsx
// Basic conversation
const messages = [
    {
        id: '1',
        author: {
            name: 'You',
            initials: 'J',
            gradient: ['#517D89', '#C5D8DC'],
        },
        content: 'Hello, how can I help you today?',
    },
    {
        id: '2',
        author: {
            name: 'Agent',
            avatarSrc: '/path/to/avatar.jpg',
        },
        content: 'I am here to assist you with your questions.',
    },
];

<Chat messages={messages} />;

// With typing indicator
const messagesWithTyping = [
    ...messages,
    {
        id: '3',
        author: {
            name: 'Agent',
            avatarSrc: '/path/to/avatar.jpg',
        },
        isTyping: true,
    },
];

<Chat messages={messagesWithTyping} />;
```
npm package: @hautechai/webui.checkbox
Description: Input control for boolean selection with visual checkmark indicator and controlled/uncontrolled modes.
Author: HautechAI
Latest version: 2.1.24

# Checkbox

## Purpose

Input control for boolean selection with visual checkmark indicator and controlled/uncontrolled modes.

## Installation

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

# npm
npm install @hautechai/webui.checkbox

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

## Parameters

| Parameter | Type                       | Description                                                              |
| --------- | -------------------------- | ------------------------------------------------------------------------ |
| checked   | boolean                    | Optional controlled state value for the checkbox                         |
| onChange  | (checked: boolean) => void | Optional callback function triggered when checkbox state changes         |
| readOnly  | boolean                    | When true, prevents user interaction while maintaining visual state      |
| children  | React.ReactNode            | Optional content (typically label text) displayed alongside the checkbox |

## Usage Example

```tsx
<Checkbox checked={isAccepted} onChange={setIsAccepted}>
    I agree to the terms and conditions
</Checkbox>
```
npm package: @hautechai/webui.chip
Description: Compact element component for displaying tags, filters, or selection indicators with optional icons and popover content.
Author: HautechAI
Latest version: 2.1.11

# Chip

## Purpose

Compact element component for displaying tags, filters, or selection indicators with optional icons and popover content.

## Installation

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

# npm
npm install @hautechai/webui.chip

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

## Parameters

| Parameter   | Type      | Description                                                |
| ----------- | --------- | ---------------------------------------------------------- |
| icon        | ReactNode | Optional icon displayed before the label                   |
| image       | string    | Optional image URL displayed as chip avatar                |
| label       | string    | Required text content displayed on the chip                |
| maxWidth    | number    | Optional maximum width constraint for the chip             |
| showPopover | boolean   | When true, enables popover interaction on chip hover/click |

## Usage Example

```tsx
<Chip icon={<TagIcon />} label="React" maxWidth={120} showPopover={true} />
```
npm package: @hautechai/webui.colorpickercontent
Description: Color picker content component with SV panel, hue/alpha sliders, eyedropper, and format inputs
Author: HautechAI
Latest version: 1.0.17

# ColorPickerContent

## Purpose

Color picker content component with SV panel, hue/alpha sliders, eyedropper, and format inputs for comprehensive color selection.

## Parameters

| Parameter | Type                      | Description                                             |
| --------- | ------------------------- | ------------------------------------------------------- |
| value     | HSVColor                  | Optional current color value in HSV format              |
| onChange  | (color: HSVColor) => void | Optional callback when color changes                    |
| withAlpha | boolean                   | Optional whether to show alpha controls (default: true) |

## Usage Example

```tsx
import { ColorPickerContent } from '@hautechai/webui.colorpickercontent';

const MyComponent = () => {
    const [color, setColor] = useState({ h: 0, s: 100, v: 100, a: 1 });

    return <ColorPickerContent value={color} onChange={setColor} withAlpha={true} />;
};
```

## Features

- **SV Panel**: 2D gradient square for saturation and value selection with draggable handle
- **Hue Slider**: Horizontal rainbow gradient (0-360°) with draggable handle
- **Alpha Slider**: Horizontal checkerboard background with color gradient (0-100% alpha) and draggable handle
- **Eyedropper Button**: Uses browser EyeDropper API if available, disabled with tooltip if not supported
- **Color Format Inputs**:
    - Format dropdown with HEX, RGB, HSL options
    - Color value input with format-specific validation
    - Alpha percentage input (0-100%)
- **Two Modes**: With or without alpha channel controls
- **Accessibility**: Proper focus management, keyboard navigation, and ARIA labels
npm package: @hautechai/webui.colorpickerinput
Description: Color picker input component based on TextInput with popover color selection
Author: HautechAI
Latest version: 1.0.18

# ColorPickerInput

## Purpose

Color picker input component based on TextInput with popover color selection, supporting hex color values with optional alpha channel.

## Parameters

| Parameter        | Type                                             | Description                                                                   |
| ---------------- | ------------------------------------------------ | ----------------------------------------------------------------------------- |
| alphaEnabled     | boolean                                          | Optional whether to enable alpha channel support (default: false)             |
| popoverDirection | PopoverPosition[]                                | Optional popover positioning directions (default: bottom, top, left, right)   |
| onColorChange    | (color: string) => void                          | Optional callback when color value changes                                    |
| preventPopover   | boolean                                          | Optional prevent popover from opening while keeping hover controls functional |
| value            | string                                           | Optional hex color value (default: #000000)                                   |
| onChange         | (e: React.ChangeEvent<HTMLInputElement>) => void | Optional input change handler                                                 |
| size             | 'medium' \| 'small'                              | Optional input size (default: medium)                                         |
| placeholder      | string                                           | Optional placeholder text                                                     |
| disabled         | boolean                                          | Optional disabled state                                                       |
| className        | string                                           | Optional CSS class name                                                       |
| hasError         | boolean                                          | Optional error state                                                          |
| variation        | 'filled' \| 'outlined'                           | Optional input style variation (default: filled)                              |
| hoverControls    | React.ReactNode                                  | Optional controls displayed on hover/focus with xs gap from trailing elements |

## Usage Example

```tsx
import { ColorPickerInput } from '@hautechai/webui.colorpickerinput';

const MyComponent = () => {
    const [color, setColor] = useState('#FF0000');

    return (
        <ColorPickerInput
            value={color}
            onChange={(e) => setColor(e.target.value)}
            onColorChange={(color) => setColor(color)}
            alphaEnabled={true}
            placeholder="Select a color"
        />
    );
};
```
npm package: @hautechai/webui.column
Description: Vertical layout container component for stacking child components with configurable spacing and alignment options.
Author: HautechAI
Latest version: 2.1.9

# Column

## Purpose

Vertical layout container component for stacking child components with configurable spacing and alignment options.

## Installation

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

# npm
npm install @hautechai/webui.column

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

## Parameters

| Parameter | Type                                        | Description                                                |
| --------- | ------------------------------------------- | ---------------------------------------------------------- |
| className | string                                      | Optional CSS class name for custom styling                 |
| spacing   | keyof ThemeType['foundation']['spacing']    | Optional spacing between child elements using theme values |
| align     | Align                                       | Optional horizontal alignment of child elements            |
| stretch   | boolean                                     | When true, stretches the column to fill available space    |
| overflow  | 'hidden' \| 'visible' \| 'scroll' \| 'auto' | Optional overflow behavior for content                     |
| overflowX | 'hidden' \| 'visible' \| 'scroll' \| 'auto' | Optional horizontal overflow behavior                      |
| overflowY | 'hidden' \| 'visible' \| 'scroll' \| 'auto' | Optional vertical overflow behavior                        |
| children  | React.ReactNode                             | Child components to be stacked vertically                  |

## Usage Example

```tsx
<Column spacing="l" align="center" stretch>
    <Header />
    <Content />
    <Footer />
</Column>
```
npm package: @hautechai/webui.contextmenu
Description: Right-click or interaction-triggered menu component with contextual actions and flexible presentation options.
Author: HautechAI
Latest version: 2.1.27

# ContextMenu

## Purpose

Right-click or interaction-triggered menu component with contextual actions and flexible presentation options.

## Installation

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

# npm
npm install @hautechai/webui.contextmenu

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

## Parameters

| Parameter   | Type                    | Description                                                                          |
| ----------- | ----------------------- | ------------------------------------------------------------------------------------ |
| heading     | object                  | Optional heading configuration with data and optional badge string                   |
| menus       | ReactNode[]             | Optional array of menu content elements                                              |
| children    | React.ReactNode         | Required trigger element that activates the context menu                             |
| variation   | 'menu' \| 'bottomSheet' | Optional presentation style - popup menu or mobile bottom sheet (defaults to 'menu') |
| isLeftClick | boolean                 | When true, activates on left click instead of right click                            |

## Usage Example

```tsx
<ContextMenu
    heading={{ data: 'Actions', badge: '3' }}
    menus={[<MenuSection1 />, <MenuSection2 />]}
    variation="menu"
    isLeftClick={false}
>
    <ContentElement />
</ContextMenu>
```
npm package: @hautechai/webui.counter
Description: Numeric display component with increment/decrement controls for selecting numeric values within optional constraints.
Author: HautechAI
Latest version: 2.1.27

# Counter

## Purpose

Numeric display component with increment/decrement controls for selecting numeric values within optional constraints.

## Installation

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

# npm
npm install @hautechai/webui.counter

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

## Parameters

| Parameter | Type                    | Description                                                     |
| --------- | ----------------------- | --------------------------------------------------------------- |
| min       | number                  | Optional minimum value constraint                               |
| max       | number                  | Optional maximum value constraint                               |
| step      | number                  | Optional increment/decrement step value (defaults to 1)         |
| value     | number                  | Optional controlled current value (defaults to 0)               |
| onChange  | (value: number) => void | Required callback function triggered when counter value changes |

## Usage Example

```tsx
<Counter min={0} max={100} step={5} value={currentCount} onChange={setCurrentCount} />
```
npm package: @hautechai/webui.dataitem
Description: Structured display component for key-value data pairs with flexible layout options and visual hierarchy.
Author: HautechAI
Latest version: 2.1.27

# DataItem

## Purpose

Structured display component for key-value data pairs with flexible layout options and visual hierarchy.

## Installation

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

# npm
npm install @hautechai/webui.dataitem

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

## Parameters

| Parameter    | Type                | Description                                                                                          |
| ------------ | ------------------- | ---------------------------------------------------------------------------------------------------- |
| label        | string              | Required label text for the data item                                                                |
| value        | string              | Required value text for the data item                                                                |
| primary      | 'data' \| 'heading' | Optional emphasis setting - 'data' emphasizes value, 'heading' emphasizes label (defaults to 'data') |
| size         | 'medium' \| 'small' | Optional size variant controlling typography and spacing (defaults to 'medium')                      |
| stretch      | boolean             | When true, item expands to fill available width                                                      |
| direction    | 'row' \| 'column'   | Optional layout direction - row for horizontal, column for vertical                                  |
| trailingIcon | React.ReactNode     | Optional icon displayed at the end (only available in row direction)                                 |
| leadingIcon  | React.ReactNode     | Optional icon displayed at the beginning (only available in column direction)                        |
| hintProps    | HintProps           | Optional hint configuration (only available in column direction)                                     |

## Usage Example

```tsx
<DataItem
    label="Email"
    value="user@example.com"
    direction="row"
    primary="data"
    size="medium"
    trailingIcon={<EditIcon />}
/>
```
npm package: @hautechai/webui.divider
Description: Visual separator line component used to divide content sections with consistent theme-based styling.
Author: HautechAI
Latest version: 2.1.9

# Divider

## Purpose

Visual separator line component used to divide content sections with consistent theme-based styling.

## Installation

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

# npm
npm install @hautechai/webui.divider

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

## Parameters

This component has no configurable parameters - it renders as a styled divider line using theme stroke and color values.

## Usage Example

```tsx
<div>
    <Content1 />
    <Divider />
    <Content2 />
</div>
```
npm package: @hautechai/webui.dotsloader
Description: Animated loading indicator with three dots that pulse in sequence to show loading or processing states.
Author: HautechAI
Latest version: 1.0.3

# DotsLoader

## Purpose

Animated loading indicator with three dots that pulse in sequence to show loading or processing states.

## Parameters

| Parameter | Type   | Description                             |
| --------- | ------ | --------------------------------------- |
| className | string | Optional CSS class name for styling     |
| speed     | number | Animation speed in seconds (default: 3) |

## Usage Example

```tsx
<DotsLoader />
<DotsLoader speed={1} /> // Fast animation
<DotsLoader speed={5} /> // Slow animation
```
npm package: @hautechai/webui.dropdown
Description: Select input component with customizable options and styling variants for choosing from predefined values.
Author: HautechAI
Latest version: 2.1.29

# Dropdown

## Purpose

Select input component with customizable options and styling variants for choosing from predefined values.

## Installation

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

# npm
npm install @hautechai/webui.dropdown

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

## Parameters

| Parameter     | Type                                    | Description                                                                                                           |
| ------------- | --------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| label         | string                                  | Optional label displayed above or within the dropdown                                                                 |
| disabled      | boolean                                 | When true, disables dropdown interaction and applies disabled styling                                                 |
| type          | 'filled' \| 'outlined' \| 'flat'        | Optional visual style variant (defaults to standard appearance)                                                       |
| size          | 'xsmall' \| 'small' \| 'medium'         | Optional size (defaults to 'medium'). xsmall mirrors small sizing (16px icon) but uses tighter padding when collapsed |
| collapsed     | boolean                                 | When true, renders only the toggle icon (no label) for ultra-compact UI                                               |
| value         | string                                  | Optional controlled selected value                                                                                    |
| options       | Array<{ label: string; value: string }> | Required array of selectable options with label and value properties                                                  |
| onChange      | (value: string) => void                 | Optional callback function triggered when selection changes                                                           |
| hasError      | boolean                                 | When true, applies error styling to indicate validation failure                                                       |
| hoverControls | React.ReactNode                         | Optional controls displayed on hover/focus with xs gap from the arrow icon                                            |

## Usage Example

```tsx
<Dropdown
    label="Select Country"
    type="filled"
    size="small"
    collapsed={false}
    value={selectedCountry}
    options={[
        { label: 'United States', value: 'us' },
        { label: 'Canada', value: 'ca' },
    ]}
    onChange={setSelectedCountry}
    hasError={!!countryError}
/>
```
npm package: @hautechai/webui.editabletext
Description: EditableText component that switches between text display and input editing modes
Author: HautechAI
Latest version: 2.1.16

# EditableText

## Purpose

A component that displays text which can be switched to edit mode by double-clicking. In view mode, it renders as styled typography with automatic emphasis based on selected state, and in edit mode, it becomes a TextInput field for text editing.

## Installation

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

# npm
npm install @hautechai/webui.editabletext

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

## Parameters

| Parameter       | Type                    | Description                                                                                  |
| --------------- | ----------------------- | -------------------------------------------------------------------------------------------- |
| text            | string                  | The text content to display or edit                                                          |
| mode            | 'view' \| 'edit'        | Controls whether the component is in display or editing mode                                 |
| size            | 'medium' \| 'small'     | Typography size variant (optional, defaults to 'medium')                                     |
| selected        | boolean                 | When true, applies emphasized typography styling (optional, defaults to false)               |
| onStartEditing  | () => void              | Callback triggered when double-clicking in view mode (optional)                              |
| onChange        | (value: string) => void | Callback triggered when the text content changes in edit mode (optional)                     |
| onFinishEditing | () => void              | Callback triggered when clicking outside the input or pressing Enter in edit mode (optional) |

## Usage Example

```tsx
const [text, setText] = useState('Click twice to edit');
const [mode, setMode] = useState<'view' | 'edit'>('view');

<EditableText
    text={text}
    mode={mode}
    size="medium"
    selected={false}
    onStartEditing={() => setMode('edit')}
    onChange={setText}
    onFinishEditing={() => setMode('view')}
/>;
```
npm package: @hautechai/webui.field
Description: Form field wrapper component providing label, error states, and validation feedback for form inputs.
Author: HautechAI
Latest version: 2.1.26

# Field

## Purpose

Form field wrapper component providing label, error states, and validation feedback for form inputs.

## Installation

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

# npm
npm install @hautechai/webui.field

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

## Parameters

| Parameter     | Type                       | Description                                                             |
| ------------- | -------------------------- | ----------------------------------------------------------------------- |
| label         | string                     | Optional text label displayed for the field                             |
| labelPosition | 'left' \| 'right' \| 'top' | Position of the label relative to the field content (defaults to 'top') |
| error         | string                     | Optional error message displayed when field validation fails            |
| caption       | string                     | Optional help text or caption displayed below the field                 |
| actionButton  | React.ReactNode            | Optional action button or component displayed next to the label         |
| locked        | true                       | Optional flag indicating the field is locked/readonly                   |
| onLockedClick | () => void                 | Optional callback function when locked field is clicked                 |
| children      | React.ReactNode            | Field content (input, textarea, etc.) to be wrapped                     |

## Usage Example

```tsx
<Field label="Email Address" error={emailError} caption="We'll never share your email">
    <TextInput value={email} onChange={setEmail} />
</Field>
```
npm package: @hautechai/webui.floatingpanel
Description: Draggable overlay panel component that floats above content with positioning and resize capabilities.
Author: HautechAI
Latest version: 2.1.27

# FloatingPanel

## Purpose

Draggable overlay panel component that floats above content with positioning and resize capabilities.

## Installation

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

# npm
npm install @hautechai/webui.floatingpanel

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

## Parameters

| Parameter | Type            | Description                                          |
| --------- | --------------- | ---------------------------------------------------- |
| children  | React.ReactNode | Required content displayed within the floating panel |
| title     | string          | Optional panel title displayed in the header         |
| position  | object          | Optional initial position with x and y coordinates   |
| size      | object          | Optional initial size with width and height values   |
| resizable | boolean         | When true, allows panel resizing                     |
| draggable | boolean         | When true, allows panel dragging (typically default) |

May include additional parameters for styling and interaction constraints.

## Usage Example

```tsx
<FloatingPanel title="Settings" position={{ x: 100, y: 100 }} size={{ width: 400, height: 300 }} resizable={true}>
    <SettingsForm />
</FloatingPanel>
```
npm package: @hautechai/webui.fullscreen
Description: Component wrapper that enables fullscreen mode for its child content with toggle functionality.
Author: HautechAI
Latest version: 2.1.9

# FullScreen

## Purpose

Component wrapper that enables fullscreen mode for its child content with toggle functionality.

## Installation

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

# npm
npm install @hautechai/webui.fullscreen

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

## Parameters

| Parameter | Type            | Description                                         |
| --------- | --------------- | --------------------------------------------------- |
| children  | React.ReactNode | Required content to be displayed in fullscreen mode |

May include additional parameters for controlling fullscreen behavior and exit functionality.

## Usage Example

```tsx
<FullScreen>
    <VideoPlayer />
</FullScreen>
```
npm package: @hautechai/webui.hint
Description: Tooltip-like component for providing contextual help information with flexible positioning and content options.
Author: HautechAI
Latest version: 2.1.26

# Hint

## Purpose

Tooltip-like component for providing contextual help information with flexible positioning and content options.

## Installation

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

# npm
npm install @hautechai/webui.hint

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

## Parameters

| Parameter | Type            | Description                                                     |
| --------- | --------------- | --------------------------------------------------------------- |
| text      | string          | Required help text or hint content to display                   |
| children  | React.ReactNode | Required trigger element that activates the hint on interaction |
| position  | string          | Optional positioning relative to the trigger element            |

May include additional parameters for styling and interaction behavior.

## Usage Example

```tsx
<Hint text="This field is required" position="top">
    <InputField />
</Hint>
```
npm package: @hautechai/webui.horizontaltextalignmentcontrol
Description: Multi-option alignment selector for horizontal text alignment with icon-only interface using left, center, and right alignment options.
Author: HautechAI
Latest version: 1.0.7

# HorizontalTextAlignmentControl

## Purpose

Multi-option alignment selector for horizontal text alignment with icon-only interface using left, center, and right alignment options.

## Parameters

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

## Usage Example

```tsx
<HorizontalTextAlignmentControl value={alignment} onChange={(event, value) => setAlignment(value)} size="default" />
```
npm package: @hautechai/webui.hovercontrols
Description: Action buttons or controls that appear when hovering over a target element, providing contextual interactions.
Author: HautechAI
Latest version: 2.1.24

# HoverControls

## Purpose

Action buttons or controls that appear when hovering over a target element, providing contextual interactions.

## Installation

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

# npm
npm install @hautechai/webui.hovercontrols

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

## Parameters

| Parameter | Type            | Description                                            |
| --------- | --------------- | ------------------------------------------------------ |
| children  | React.ReactNode | Required target element that triggers hover controls   |
| controls  | React.ReactNode | Required control elements displayed on hover           |
| position  | string          | Optional positioning of controls relative to target    |
| delay     | number          | Optional delay in milliseconds before showing controls |

May include additional parameters for animation and interaction behavior.

## Usage Example

```tsx
<HoverControls
    controls={
        <>
            <IconButton icon={<EditIcon />} />
            <IconButton icon={<DeleteIcon />} />
        </>
    }
    position="top-right"
>
    <ContentCard />
</HoverControls>
```