@simplysm/solid 13.0.98 → 13.0.99

package/docs/form-control.md

@@ -1,117 +1,154 @@
-# Form Controls
+# Form Control
 
-Source: `src/components/form-control/**/*.tsx`
+Source: `src/components/form-control/**`
 
-## Button
+## `Button`
 
-Themed button with ripple effect. Extends `JSX.ButtonHTMLAttributes<HTMLButtonElement>`.
+Styled button component with theme, variant, and size support. Includes ripple effect.
 
-```ts
-interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
-  theme?: SemanticTheme;       // "primary" | "info" | "success" | "warning" | "danger" | "base" (default: "base")
-  variant?: "solid" | "outline" | "ghost";  // default: "outline"
-  size?: ComponentSize;        // "xs" | "sm" | "md" | "lg" | "xl" (default: "md")
-  inset?: boolean;             // borderless style
+```typescript
+export interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+  theme?: ButtonTheme;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  inset?: boolean;
 }
 ```
 
-## Select
+| Prop | Type | Description |
+|------|------|-------------|
+| `theme` | `SemanticTheme` | Color theme. Default: `"base"` |
+| `variant` | `"solid" \| "outline" \| "ghost"` | Visual variant. Default: `"outline"` |
+| `size` | `ComponentSize` | Button size. Default: `"md"` |
+| `inset` | `boolean` | Removes border and border-radius for embedded usage |
 
-Single or multiple select dropdown. Supports two modes: `items` prop mode and `children` mode.
+---
 
-```ts
-// Common props
-interface SelectCommonProps<TValue> {
-  disabled?: boolean;
-  required?: boolean;
-  placeholder?: string;
-  size?: ComponentSize;
-  inset?: boolean;
-  validate?: (value: unknown) => string | undefined;
-  lazyValidation?: boolean;
-  itemSearchText?: (item: TValue) => string;  // enables search input
-  isItemHidden?: (item: TValue) => boolean;
-  class?: string;
-  style?: JSX.CSSProperties;
-}
+## `Select`
 
-// Single select
-interface SelectSingleProps<TValue> extends SelectCommonProps<TValue> {
-  multiple?: false;
-  value?: TValue;
-  onValueChange?: (value: TValue | undefined) => void;
-}
+Dropdown select component supporting single and multiple selection, search filtering, hierarchical items, and custom rendering via slots.
 
-// Multiple select
-interface SelectMultipleProps<TValue> extends SelectCommonProps<TValue> {
-  multiple: true;
-  value?: TValue[];
-  onValueChange?: (value: TValue[]) => void;
-  tagDirection?: "horizontal" | "vertical";
-  hideSelectAll?: boolean;
-}
-
-// Items mode: pass items array + ItemTemplate
-// Children mode: pass children + renderValue
+```typescript
+export type SelectProps<TValue = unknown> =
+  | (SelectSingleBaseProps<TValue> & SelectWithItemsPropsBase<TValue>)
+  | (SelectSingleBaseProps<TValue> & SelectWithChildrenPropsBase<TValue>)
+  | (SelectMultipleBaseProps<TValue> & SelectWithItemsPropsBase<TValue>)
+  | (SelectMultipleBaseProps<TValue> & SelectWithChildrenPropsBase<TValue>);
 ```
 
-### Sub-components
+| Prop | Type | Description |
+|------|------|-------------|
+| `value` | `TValue \| TValue[]` | Currently selected value(s) |
+| `onValueChange` | `(value) => void` | Value change callback |
+| `multiple` | `boolean` | Enable multiple selection mode |
+| `disabled` | `boolean` | Disabled state |
+| `required` | `boolean` | Required input |
+| `placeholder` | `string` | Placeholder text |
+| `size` | `ComponentSize` | Trigger size. Default: `"md"` |
+| `inset` | `boolean` | Borderless style |
+| `validate` | `(value) => string \| undefined` | Custom validation function |
+| `lazyValidation` | `boolean` | Show error only after blur |
+| `itemSearchText` | `(item: TValue) => string` | Search text extraction (shows search input when set) |
+| `isItemHidden` | `(item: TValue) => boolean` | Determine if item is hidden |
+| `items` | `TValue[]` | Items array (items mode) |
+| `itemChildren` | `(item, index, depth) => TValue[] \| undefined` | Child items for tree structure |
+| `renderValue` | `(value: TValue) => JSX.Element` | Custom value renderer (required in children mode) |
+| `tagDirection` | `"horizontal" \| "vertical"` | Multiple selection tag direction |
+| `hideSelectAll` | `boolean` | Hide select all button (multiple mode) |
 
-- **`Select.Item<TValue>`** -- Selectable item. Props: `value: TValue`, `disabled?: boolean`. Supports nested items via `Select.Item.Children`.
-- **`Select.Header`** -- Custom header slot rendered above dropdown list.
-- **`Select.Action`** -- Action button appended to the trigger. Extends button attributes.
-- **`Select.ItemTemplate`** -- Render template for `items` mode. Child is a function: `(item, index, depth) => JSX.Element`.
+### Sub-components
 
-## Combobox
+- **`Select.Item`** -- Selectable item in dropdown. Props: `value: TValue`, `disabled?: boolean`
+- **`Select.Item.Children`** -- Nested children slot for hierarchical items
+- **`Select.Header`** -- Custom header slot in dropdown
+- **`Select.Action`** -- Action button appended to trigger
+- **`Select.ItemTemplate`** -- Template function for items mode rendering
+
+### `SelectContextValue`
+
+```typescript
+export interface SelectContextValue<TValue = unknown> {
+  multiple: Accessor<boolean>;
+  isSelected: (value: TValue) => boolean;
+  toggleValue: (value: TValue) => void;
+  closeDropdown: () => void;
+  setItemTemplate: (fn: ((...args: unknown[]) => JSX.Element) | undefined) => void;
+  size: Accessor<ComponentSize>;
+}
+```
 
-Autocomplete component with async search and debounced loading.
+### `SelectItemProps`
 
-```ts
-interface ComboboxBaseProps<TValue> {
-  value?: TValue;
-  onValueChange?: (value: TValue) => void;
-  loadItems: (query: string) => TValue[] | Promise<TValue[]>;  // required
-  debounceMs?: number;                // default: 300
-  renderValue: (value: TValue) => JSX.Element;  // required
+```typescript
+export interface SelectItemProps<TValue = unknown> {
+  value: TValue;
   disabled?: boolean;
-  required?: boolean;
-  validate?: (value: TValue | undefined) => string | undefined;
-  lazyValidation?: boolean;
-  placeholder?: string;
-  size?: ComponentSize;
-  inset?: boolean;
-  class?: string;
-  style?: JSX.CSSProperties;
-  children?: JSX.Element;
 }
+```
 
-// Custom value variants
-interface ComboboxCustomParserProps<TValue> extends ComboboxBaseProps<TValue> {
-  allowsCustomValue: true;
-  parseCustomValue: (text: string) => TValue;
-}
+---
 
-interface ComboboxCustomStringProps extends ComboboxBaseProps<string> {
-  allowsCustomValue: true;
-  parseCustomValue?: undefined;  // TValue must be string
-}
+## `Combobox`
 
-interface ComboboxDefaultProps<TValue> extends ComboboxBaseProps<TValue> {
-  allowsCustomValue?: false;
-}
+Autocomplete component supporting async search, custom value parsing, and item selection.
+
+```typescript
+export type ComboboxProps<TValue = unknown> =
+  | ComboboxCustomParserProps<TValue>
+  | ComboboxCustomStringProps
+  | ComboboxDefaultProps<TValue>;
 ```
 
+| Prop | Type | Description |
+|------|------|-------------|
+| `value` | `TValue` | Currently selected value |
+| `onValueChange` | `(value: TValue) => void` | Value change callback |
+| `loadItems` | `(query: string) => TValue[] \| Promise<TValue[]>` | Item load function (required) |
+| `debounceMs` | `number` | Debounce delay. Default: `300` |
+| `renderValue` | `(value: TValue) => JSX.Element` | Render selected value (required) |
+| `disabled` | `boolean` | Disabled state |
+| `required` | `boolean` | Required input |
+| `validate` | `(value) => string \| undefined` | Custom validation |
+| `lazyValidation` | `boolean` | Show error only after blur |
+| `placeholder` | `string` | Placeholder text |
+| `size` | `ComponentSize` | Trigger size |
+| `inset` | `boolean` | Borderless style |
+| `allowsCustomValue` | `boolean` | Allow custom text value |
+| `parseCustomValue` | `(text: string) => TValue` | Parse custom text to TValue |
+
 ### Sub-components
 
-- **`Combobox.Item<TValue>`** -- Selectable item. Props: `value: TValue`, `disabled?: boolean`.
-- **`Combobox.ItemTemplate`** -- Render template for loaded items. Child is a function: `(item, index) => JSX.Element`.
+- **`Combobox.Item`** -- Selectable item in dropdown. Props: `value: TValue`, `disabled?: boolean`
+- **`Combobox.ItemTemplate`** -- Template function for item rendering
+
+### `ComboboxContextValue`
 
-## TextInput
+```typescript
+export interface ComboboxContextValue<TValue = unknown> {
+  isSelected: (value: TValue) => boolean;
+  selectValue: (value: TValue) => void;
+  closeDropdown: () => void;
+  setItemTemplate: (fn: ((...args: unknown[]) => JSX.Element) | undefined) => void;
+}
+```
 
-Text input field with format support and IME handling.
+### `ComboboxItemProps`
 
-```ts
-interface TextInputProps {
+```typescript
+export interface ComboboxItemProps<TValue = unknown> {
+  value: TValue;
+  disabled?: boolean;
+}
+```
+
+---
+
+## `TextInput`
+
+Text input field with format masking, prefix slot, and IME composition handling.
+
+```typescript
+export interface TextInputProps {
   value?: string;
   onValueChange?: (value: string) => void;
   type?: "text" | "password" | "email";
@@ -122,7 +159,7 @@ interface TextInputProps {
   readOnly?: boolean;
   size?: ComponentSize;
   inset?: boolean;
-  format?: string;               // e.g., "XXX-XXXX-XXXX"
+  format?: string;
   required?: boolean;
   minLength?: number;
   maxLength?: number;
@@ -131,23 +168,39 @@ interface TextInputProps {
   lazyValidation?: boolean;
   class?: string;
   style?: JSX.CSSProperties;
-  children?: JSX.Element;         // TextInput.Prefix slot
+  children?: JSX.Element;
 }
 ```
 
+| Prop | Type | Description |
+|------|------|-------------|
+| `value` | `string` | Input value |
+| `onValueChange` | `(value: string) => void` | Value change callback |
+| `type` | `"text" \| "password" \| "email"` | Input type. Default: `"text"` |
+| `format` | `string` | Input format mask (e.g., `"XXX-XXXX-XXXX"`) |
+| `required` | `boolean` | Required input |
+| `minLength` / `maxLength` | `number` | Length constraints |
+| `pattern` | `string \| RegExp` | Input validation pattern |
+
 ### Sub-components
 
-- **`TextInput.Prefix`** -- Prefix content displayed before the input.
+- **`TextInput.Prefix`** -- Prefix slot (e.g., icon or currency symbol)
+
+### Standalone Export
+
+- **`TextInputPrefix`** -- The slot component, also accessible via `TextInput.Prefix`
+
+---
 
-## NumberInput
+## `NumberInput`
 
-Numeric input with thousand separator and decimal formatting.
+Numeric input field with thousand separator, decimal formatting, and prefix slot.
 
-```ts
-interface NumberInputProps {
+```typescript
+export interface NumberInputProps {
   value?: number;
   onValueChange?: (value: number | undefined) => void;
-  useGrouping?: boolean;          // default: true
+  useGrouping?: boolean;
   minimumFractionDigits?: number;
   placeholder?: string;
   title?: string;
@@ -162,25 +215,35 @@ interface NumberInputProps {
   max?: number;
   validate?: (value: number | undefined) => string | undefined;
   lazyValidation?: boolean;
-  children?: JSX.Element;         // NumberInput.Prefix slot
+  children?: JSX.Element;
 }
 ```
 
+| Prop | Type | Description |
+|------|------|-------------|
+| `useGrouping` | `boolean` | Show thousand separator. Default: `true` |
+| `minimumFractionDigits` | `number` | Minimum decimal places |
+| `min` / `max` | `number` | Value range constraints |
+
 ### Sub-components
 
-- **`NumberInput.Prefix`** -- Prefix content displayed before the input.
+- **`NumberInput.Prefix`** -- Prefix slot
+
+### Standalone Export
 
-## DatePicker
+- **`NumberInputPrefix`** -- The slot component
 
-Date input supporting year, month, and date units. Uses `DateOnly` from `@simplysm/core-common`.
+---
 
-```ts
-type DatePickerUnit = "year" | "month" | "date";
+## `DatePicker`
 
-interface DatePickerProps {
+Date input field supporting year, month, and date units with `DateOnly` type.
+
+```typescript
+export interface DatePickerProps {
   value?: DateOnly;
   onValueChange?: (value: DateOnly | undefined) => void;
-  unit?: DatePickerUnit;          // default: "date"
+  unit?: "year" | "month" | "date";
   min?: DateOnly;
   max?: DateOnly;
   title?: string;
@@ -196,17 +259,22 @@ interface DatePickerProps {
 }
 ```
 
-## DateTimePicker
+| Prop | Type | Description |
+|------|------|-------------|
+| `unit` | `"year" \| "month" \| "date"` | Date unit. Default: `"date"` |
+| `min` / `max` | `DateOnly` | Date range constraints |
+
+---
 
-DateTime input supporting minute and second units. Uses `DateTime` from `@simplysm/core-common`.
+## `DateTimePicker`
 
-```ts
-type DateTimePickerUnit = "minute" | "second";
+DateTime input field supporting minute and second units with `DateTime` type.
 
-interface DateTimePickerProps {
+```typescript
+export interface DateTimePickerProps {
   value?: DateTime;
   onValueChange?: (value: DateTime | undefined) => void;
-  unit?: DateTimePickerUnit;      // default: "minute"
+  unit?: "minute" | "second";
   min?: DateTime;
   max?: DateTime;
   title?: string;
@@ -222,17 +290,21 @@ interface DateTimePickerProps {
 }
 ```
 
-## TimePicker
+| Prop | Type | Description |
+|------|------|-------------|
+| `unit` | `"minute" \| "second"` | DateTime unit. Default: `"minute"` |
 
-Time input supporting minute and second units. Uses `Time` from `@simplysm/core-common`.
+---
 
-```ts
-type TimePickerUnit = "minute" | "second";
+## `TimePicker`
 
-interface TimePickerProps {
+Time input field supporting minute and second units with `Time` type.
+
+```typescript
+export interface TimePickerProps {
   value?: Time;
   onValueChange?: (value: Time | undefined) => void;
-  unit?: TimePickerUnit;          // default: "minute"
+  unit?: "minute" | "second";
   title?: string;
   disabled?: boolean;
   readOnly?: boolean;
@@ -248,12 +320,14 @@ interface TimePickerProps {
 }
 ```
 
-## Textarea
+---
+
+## `Textarea`
 
-Auto-resizing textarea with IME handling.
+Auto-resizing textarea with IME composition handling.
 
-```ts
-interface TextareaProps {
+```typescript
+export interface TextareaProps {
   value?: string;
   onValueChange?: (value: string) => void;
   placeholder?: string;
@@ -262,7 +336,7 @@ interface TextareaProps {
   readOnly?: boolean;
   size?: ComponentSize;
   inset?: boolean;
-  minRows?: number;               // default: 1
+  minRows?: number;
   required?: boolean;
   minLength?: number;
   maxLength?: number;
@@ -273,16 +347,22 @@ interface TextareaProps {
 }
 ```
 
-## Checkbox
+| Prop | Type | Description |
+|------|------|-------------|
+| `minRows` | `number` | Minimum visible rows. Default: `1` |
 
-Checkbox with check indicator. Renders via `SelectableBase`.
+---
 
-```ts
-interface CheckboxProps {
+## `Checkbox`
+
+Checkbox toggle component with square indicator and check icon.
+
+```typescript
+export interface CheckboxProps {
   checked?: boolean;
   onCheckedChange?: (checked: boolean) => void;
   disabled?: boolean;
-  size?: ComponentSize;
+  size?: CheckboxSize;
   inset?: boolean;
   inline?: boolean;
   required?: boolean;
@@ -294,16 +374,18 @@ interface CheckboxProps {
 }
 ```
 
-## Radio
+---
 
-Radio button with dot indicator. Always selects on click (never deselects).
+## `Radio`
 
-```ts
-interface RadioProps {
+Radio button component with circular indicator. Always selects to `true` (cannot deselect).
+
+```typescript
+export interface RadioProps {
   checked?: boolean;
   onCheckedChange?: (checked: boolean) => void;
   disabled?: boolean;
-  size?: ComponentSize;
+  size?: CheckboxSize;
   inset?: boolean;
   inline?: boolean;
   required?: boolean;
@@ -315,63 +397,59 @@ interface RadioProps {
 }
 ```
 
-## CheckboxGroup
+---
 
-Multi-select group of checkboxes.
+## `CheckboxGroup`
 
-```ts
-interface CheckboxGroupProps<TValue> {
-  value?: TValue[];
-  onValueChange?: (value: TValue[]) => void;
-  disabled?: boolean;
-  size?: ComponentSize;
-  inline?: boolean;
-  inset?: boolean;
-  required?: boolean;
-  validate?: (value: TValue[]) => string | undefined;
-  lazyValidation?: boolean;
-  class?: string;
-  style?: JSX.CSSProperties;
-  children?: JSX.Element;
-}
-```
+Group component for multi-value checkbox selection.
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `value` | `TValue[]` | Selected values |
+| `onValueChange` | `(value: TValue[]) => void` | Change callback |
+| `disabled` | `boolean` | Disable all items |
+| `size` | `CheckboxSize` | Size for all items |
+| `inline` | `boolean` | Inline display |
+| `inset` | `boolean` | Inset style |
+| `required` | `boolean` | Required (at least one selected) |
+| `validate` | `(value: TValue[]) => string \| undefined` | Custom validation |
+| `lazyValidation` | `boolean` | Lazy validation |
 
 ### Sub-components
 
-- **`CheckboxGroup.Item<TValue>`** -- Props: `value: TValue`, `disabled?: boolean`, `children?: JSX.Element`.
+- **`CheckboxGroup.Item`** -- Individual item. Props: `value: TValue`, `disabled?: boolean`, `children?: JSX.Element`
 
-## RadioGroup
+---
 
-Single-select group of radio buttons.
+## `RadioGroup`
 
-```ts
-interface RadioGroupProps<TValue> {
-  value?: TValue;
-  onValueChange?: (value: TValue) => void;
-  disabled?: boolean;
-  size?: ComponentSize;
-  inline?: boolean;
-  inset?: boolean;
-  required?: boolean;
-  validate?: (value: TValue | undefined) => string | undefined;
-  lazyValidation?: boolean;
-  class?: string;
-  style?: JSX.CSSProperties;
-  children?: JSX.Element;
-}
-```
+Group component for single-value radio selection.
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `value` | `TValue` | Selected value |
+| `onValueChange` | `(value: TValue) => void` | Change callback |
+| `disabled` | `boolean` | Disable all items |
+| `size` | `CheckboxSize` | Size for all items |
+| `inline` | `boolean` | Inline display |
+| `inset` | `boolean` | Inset style |
+| `required` | `boolean` | Required |
+| `validate` | `(value: TValue \| undefined) => string \| undefined` | Custom validation |
+| `lazyValidation` | `boolean` | Lazy validation |
 
 ### Sub-components
 
-- **`RadioGroup.Item<TValue>`** -- Props: `value: TValue`, `disabled?: boolean`, `children?: JSX.Element`.
+- **`RadioGroup.Item`** -- Individual item. Props: `value: TValue`, `disabled?: boolean`, `children?: JSX.Element`
 
-## ColorPicker
+---
 
-Native HTML color picker input.
+## `ColorPicker`
 
-```ts
-interface ColorPickerProps {
-  value?: string;                 // #RRGGBB format
+Color picker input using native `<input type="color">`.
+
+```typescript
+export interface ColorPickerProps {
+  value?: string;
   onValueChange?: (value: string | undefined) => void;
   title?: string;
   disabled?: boolean;
@@ -385,14 +463,14 @@ interface ColorPickerProps {
 }
 ```
 
-## DateRangePicker
+---
 
-Date range input with period type selector (day/month/range).
+## `DateRangePicker`
 
-```ts
-type DateRangePeriodType = "day" | "month" | "range";
+Date range picker with period type selector (day/month/range). Automatically adjusts from/to when period type changes.
 
-interface DateRangePickerProps {
+```typescript
+export interface DateRangePickerProps {
   periodType?: DateRangePeriodType;
   onPeriodTypeChange?: (value: DateRangePeriodType) => void;
   from?: DateOnly;
@@ -407,13 +485,21 @@ interface DateRangePickerProps {
 }
 ```
 
-## RichTextEditor
+### `DateRangePeriodType`
+
+```typescript
+export type DateRangePeriodType = "day" | "month" | "range";
+```
+
+---
 
-Tiptap-based rich text editor with toolbar (text formatting, alignment, colors, tables, images).
+## `RichTextEditor`
 
-```ts
-interface RichTextEditorProps {
-  value?: string;                 // HTML string
+WYSIWYG rich text editor powered by TipTap with toolbar. Supports text alignment, color, highlight, tables, and images.
+
+```typescript
+export interface RichTextEditorProps {
+  value?: string;
   onValueChange?: (value: string) => void;
   disabled?: boolean;
   size?: ComponentSize;
@@ -422,17 +508,19 @@ interface RichTextEditorProps {
 }
 ```
 
-## Numpad
+---
 
-Numeric keypad for touch-friendly number input.
+## `Numpad`
 
-```ts
-interface NumpadProps {
+On-screen numpad with digit buttons, clear, backspace, and optional enter/minus buttons.
+
+```typescript
+export interface NumpadProps {
   value?: number;
   onValueChange?: (value: number | undefined) => void;
   placeholder?: string;
   required?: boolean;
-  inputDisabled?: boolean;        // disable direct text field input
+  inputDisabled?: boolean;
   withEnterButton?: boolean;
   withMinusButton?: boolean;
   onEnterButtonClick?: () => void;
@@ -442,12 +530,14 @@ interface NumpadProps {
 }
 ```
 
-## StatePreset
+---
+
+## `StatePreset`
 
-Save and restore named state presets to synced storage.
+Save/restore named state presets to sync storage. Displays preset chips with restore, overwrite, and delete actions.
 
-```ts
-interface StatePresetProps<TValue> {
+```typescript
+export interface StatePresetProps<TValue> {
   storageKey: string;
   value: TValue;
   onValueChange: (value: TValue) => void;
@@ -457,81 +547,74 @@ interface StatePresetProps<TValue> {
 }
 ```
 
-## ThemeToggle
+---
 
-Theme cycle button (light -> system -> dark -> light). Must be used inside `ThemeProvider`.
+## `ThemeToggle`
 
-```ts
-interface ThemeToggleProps extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+Theme toggle button cycling through light, system, dark modes. Must be used inside `ThemeProvider`.
+
+```typescript
+export interface ThemeToggleProps extends Omit<
+  JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+  "children"
+> {
   size?: ComponentSize;
 }
 ```
 
-## Invalid
+---
+
+## `Invalid`
 
-Validation indicator wrapper. Wraps a child element and shows a validation error via dot or border.
+Validation wrapper that displays error indicators (border highlight or dot) on child elements. Integrates with native form validation via hidden input.
 
-```ts
-interface InvalidProps {
-  /** Validation error message. Non-empty = invalid. */
+```typescript
+export interface InvalidProps {
   message?: string;
-  /** Visual indicator variant */
   variant?: "border" | "dot";
-  /** When true, visual display only appears after target loses focus */
   lazyValidation?: boolean;
 }
 ```
 
-## Field Style Exports
-
-Exported from `src/components/form-control/field/Field.styles.ts`:
-
-```ts
-const fieldSurface: string;                           // bg + text + border + focus-within
-const fieldBaseClass: string;                         // inline-flex + fieldSurface
-const fieldSizeClasses: Record<ComponentSize, string>;
-const fieldInputClass: string;                        // input element styles
-function getFieldWrapperClass(options: {
-  size?: ComponentSize;
-  disabled?: boolean;
-  inset?: boolean;
-  includeCustomClass?: string | false;
-  extra?: string | false;
-}): string;
-function getTextareaWrapperClass(options: {
-  size?: ComponentSize;
-  disabled?: boolean;
-  inset?: boolean;
-  includeCustomClass?: string | false;
-}): string;
-```
-
-## Checkbox Style Exports
-
-Exported from `src/components/form-control/checkbox/Checkbox.styles.ts`:
-
-```ts
-type CheckboxSize = ComponentSize;
-const checkboxBaseClass: string;
-const indicatorBaseClass: string;
-const checkedClass: string;
-const checkboxSizeClasses: Record<CheckboxSize, string>;
-```
-
-## DropdownTrigger Style Exports
-
-Exported from `src/components/form-control/DropdownTrigger.styles.ts`:
-
-```ts
-const triggerBaseClass: string;
-const triggerDisabledClass: string;
-const triggerInsetClass: string;
-const triggerSizeClasses: Record<ComponentSize, string>;
-const chevronWrapperClass: string;
-function getTriggerClass(options: {
-  size?: ComponentSize;
-  disabled?: boolean;
-  inset?: boolean;
-  class?: string;
-}): string;
-```
+| Prop | Type | Description |
+|------|------|-------------|
+| `message` | `string` | Validation error message. Non-empty means invalid |
+| `variant` | `"border" \| "dot"` | Visual indicator style. Default: `"dot"` |
+| `lazyValidation` | `boolean` | Show error only after the target loses focus |
+
+---
+
+## Style Exports
+
+### `Field.styles`
+
+Shared style constants and utility functions for form field components.
+
+| Export | Type | Description |
+|--------|------|-------------|
+| `fieldSurface` | `string` | Common field surface class |
+| `fieldBaseClass` | `string` | Base wrapper class |
+| `fieldSizeClasses` | `Record<ComponentSize, string>` | Size-specific classes |
+| `fieldInsetClass` | `string` | Inset mode styles |
+| `fieldInsetSizeHeightClasses` | `Record<ComponentSize, string>` | Inset height classes |
+| `fieldDisabledClass` | `string` | Disabled styles |
+| `textAreaBaseClass` | `string` | Textarea base class |
+| `textAreaSizeClasses` | `Record<ComponentSize, string>` | Textarea size classes |
+| `fieldInputClass` | `string` | Inner input element class |
+| `fieldGapClasses` | `Record<ComponentSize, string>` | Gap classes for prefix icons |
+| `getFieldWrapperClass` | `(options) => string` | Generate wrapper class |
+| `getTextareaWrapperClass` | `(options) => string` | Generate textarea wrapper class |
+
+### `Checkbox.styles`
+
+| Export | Type | Description |
+|--------|------|-------------|
+| `CheckboxSize` | `ComponentSize` | Size type alias |
+| `checkboxBaseClass` | `string` | Wrapper base class |
+| `indicatorBaseClass` | `string` | Indicator base class |
+| `checkedClass` | `string` | Checked state class |
+| `checkboxSizeClasses` | `Record<CheckboxSize, string>` | Size classes |
+| `checkboxInsetClass` | `string` | Inset class |
+| `checkboxInsetSizeHeightClasses` | `Record<CheckboxSize, string>` | Inset height classes |
+| `checkboxInlineClass` | `string` | Inline class |
+| `checkboxDisabledClass` | `string` | Disabled class |