@geomak/ui 5.7.2 → 5.9.0

package/dist/index.d.cts

@@ -614,6 +614,10 @@ interface IconButtonProps {
     loading?: boolean;
     loadingIcon?: React.ReactNode;
     title?: string;
+    /** Extra classes appended to the button. */
+    className?: string;
+    /** Inline style on the button. */
+    style?: React.CSSProperties;
 }
 /**
  * Square icon-only button.
@@ -622,7 +626,7 @@ interface IconButtonProps {
  * <IconButton icon={<Icon.Search />} onClick={doSearch} />
  * <IconButton type="bordered" icon={<Icon.Edit />} />
  */
-declare function IconButton({ icon, onClick, type, buttonType, disabled, size, loading, loadingIcon, }: IconButtonProps): react_jsx_runtime.JSX.Element;
+declare function IconButton({ icon, onClick, type, buttonType, disabled, size, loading, loadingIcon, className, style, }: IconButtonProps): react_jsx_runtime.JSX.Element;
 
 interface ModalProps {
     /**
@@ -646,6 +650,8 @@ interface ModalProps {
     hasFooter?: boolean;
     title?: React__default.ReactNode;
     children?: React__default.ReactNode;
+    /** Extra classes merged onto the modal panel. */
+    className?: string;
 }
 /**
  * Centred modal dialog powered by Radix Dialog + Framer Motion.
@@ -659,7 +665,7 @@ interface ModalProps {
  *   Are you sure you want to delete this item?
  * </Modal>
  */
-declare function Modal({ width, size, isOpen, onClose, onOk, onCancel, okText, cancelText, hasFooter, title, children, }: ModalProps): react_jsx_runtime.JSX.Element;
+declare function Modal({ width, size, isOpen, onClose, onOk, onCancel, okText, cancelText, hasFooter, title, children, className, }: ModalProps): react_jsx_runtime.JSX.Element;
 
 interface DrawerProps {
     isOpen?: boolean;
@@ -674,6 +680,8 @@ interface DrawerProps {
     onCancel?: () => void;
     title?: React__default.ReactNode;
     children?: React__default.ReactNode;
+    /** Extra classes merged onto the drawer panel. */
+    className?: string;
 }
 /**
  * Side-sliding drawer panel powered by Radix Dialog + Framer Motion.
@@ -687,7 +695,7 @@ interface DrawerProps {
  *   <FilterForm />
  * </Drawer>
  */
-declare function Drawer({ isOpen, onClose, hasFooter, placement, width, okText, cancelText, onOk, onCancel, title, children, }: DrawerProps): react_jsx_runtime.JSX.Element;
+declare function Drawer({ isOpen, onClose, hasFooter, placement, width, okText, cancelText, onOk, onCancel, title, children, className, }: DrawerProps): react_jsx_runtime.JSX.Element;
 
 interface TooltipProps {
     children: React__default.ReactNode;
@@ -959,6 +967,10 @@ interface ListProps {
      * `'comfortable'` (default) for typical UI, `'spacious'` for hero rows.
      */
     density?: 'compact' | 'comfortable' | 'spacious';
+    /** Extra classes merged onto the list root. */
+    className?: string;
+    /** Inline style on the list root. */
+    style?: React__default.CSSProperties;
 }
 /**
  * Vertical clickable list with optional avatar / description / trailing
@@ -998,7 +1010,7 @@ interface ListProps {
  * />
  * ```
  */
-declare function List({ items, onItemClick, activeKey, density, }: ListProps): react_jsx_runtime.JSX.Element;
+declare function List({ items, onItemClick, activeKey, density, className, style, }: ListProps): react_jsx_runtime.JSX.Element;
 
 interface ScalableContainerProps {
     /** Resting width. Any CSS length / percent. Default `'100%'`. */
@@ -1071,6 +1083,10 @@ interface GridCardProps {
     buttonText?: string;
     /** Called when the button is clicked. Receives the full item. */
     onOpen?: (item: GridCardItem) => void;
+    /** Extra classes merged onto the card root. */
+    className?: string;
+    /** Inline style on the card root. */
+    style?: React__default.CSSProperties;
 }
 /**
  * Application card tile (grid layout).
@@ -1083,7 +1099,7 @@ interface GridCardProps {
  *   onOpen={({ to }) => navigate(to!)}
  * />
  */
-declare function GridCard({ item, buttonText, onOpen }: GridCardProps): react_jsx_runtime.JSX.Element;
+declare function GridCard({ item, buttonText, onOpen, className, style }: GridCardProps): react_jsx_runtime.JSX.Element;
 
 interface OpaqueGridCardProps {
     item: GridCardItem;
@@ -1376,6 +1392,10 @@ interface TableProps<T extends Record<string, any> = Record<string, any>> {
     loading?: boolean;
     /** Number of skeleton rows to render when `loading` is true. Default `8`. */
     loadingRowCount?: number;
+    /** Extra classes merged onto the table wrapper root. */
+    className?: string;
+    /** Inline style on the table wrapper root. */
+    style?: React__default.CSSProperties;
 }
 /** ─────────────────── main component ─────────────────── */
 /**
@@ -1418,7 +1438,7 @@ interface TableProps<T extends Record<string, any> = Record<string, any>> {
  * />
  * ```
  */
-declare function Table<T extends Record<string, any> = Record<string, any>>({ columns, rows, getRowKey, pagination, expandRow, hasSearch, footer, header, loading, loadingRowCount, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+declare function Table<T extends Record<string, any> = Record<string, any>>({ columns, rows, getRowKey, pagination, expandRow, hasSearch, footer, header, loading, loadingRowCount, className, style, }: TableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface ThemeSwitchProps {
     checked: boolean;
@@ -1515,6 +1535,8 @@ interface SidebarProps {
     collapsedWidth?: number;
     /** Slot rendered at the bottom of the sidebar (theme switch, user avatar…) */
     footer?: React__default.ReactNode;
+    /** Extra classes merged onto the sidebar root (`<aside>`). */
+    className?: string;
 }
 /** ─────────────────── main component ─────────────────── */
 /**
@@ -1532,7 +1554,7 @@ interface SidebarProps {
  *   onToggle={() => setOpen(o => !o)}
  * />
  */
-declare function Sidebar({ sections, isExpanded, onToggle, expandedWidth, collapsedWidth, footer, }: SidebarProps): react_jsx_runtime.JSX.Element;
+declare function Sidebar({ sections, isExpanded, onToggle, expandedWidth, collapsedWidth, footer, className, }: SidebarProps): react_jsx_runtime.JSX.Element;
 
 interface AppShellProps {
     /**
@@ -1787,6 +1809,7 @@ interface SkeletonCardProps extends SkeletonBaseProps {
 declare function SkeletonCard({ hasAvatar, lines, className, style }: SkeletonCardProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonProps {
+    /** Button content (text or nodes). */
     content?: React__default.ReactNode;
     /** Visual style variant */
     variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
@@ -1794,12 +1817,17 @@ interface ButtonProps {
     size?: 'sm' | 'md' | 'lg';
     /** HTML button type */
     buttonType?: 'button' | 'submit' | 'reset';
+    /** Show a loading spinner and disable the control. */
     loading?: boolean;
+    /** Disable interaction and dim the control. */
     disabled?: boolean;
     /** Inline style overrides (width, etc.). Margins/layout belong in the parent. */
     style?: React__default.CSSProperties;
+    /** Extra classes appended to the button (override variant/size styles). */
+    className?: string;
     /** Leading icon — rendered before content */
     icon?: React__default.ReactNode;
+    /** Click handler. */
     onClick?: React__default.MouseEventHandler<HTMLButtonElement>;
     /**
      * @deprecated Pass `variant` instead. Kept for API compat — currently no-op.
@@ -1818,7 +1846,7 @@ interface ButtonProps {
  * <Button content="Cancel" variant="secondary" />
  * <Button content="Loading…" loading buttonType="submit" />
  */
-declare function Button({ content, variant, size, buttonType, loading, disabled, style, icon, onClick, }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ content, variant, size, buttonType, loading, disabled, style, icon, onClick, className, }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Shared field foundation for all oxygen-ui inputs.
@@ -1937,31 +1965,45 @@ interface FieldProps {
 declare function Field({ label, htmlFor, errorId, errorMessage, layout, required, helperText, labelAlign, labelStyle, labelWidth, className, children, }: FieldProps): react_jsx_runtime.JSX.Element;
 
 interface TextInputProps {
+    /** Controlled string value. */
     value?: string;
+    /** Native change handler — read `e.target.value`. */
     onChange?: React__default.ChangeEventHandler<HTMLInputElement>;
+    /** Disable interaction and dim the field. */
     disabled?: boolean;
+    /** Field label rendered above (vertical) or beside (horizontal) the input. */
     label?: React__default.ReactNode;
+    /** `id` for the input + the `<label htmlFor>` link. */
     htmlFor?: string;
+    /** Placeholder shown when the field is empty. */
     placeholder?: string;
+    /** Native form field name (used for `FormData` serialisation). */
     name?: string;
     /** Native input type. Defaults to `'text'`. */
     type?: 'text' | 'email' | 'url' | 'tel';
+    /** Inline style applied to the `<input>` element. */
     inputStyle?: React__default.CSSProperties;
+    /** Inline style applied to the field shell / adornment wrapper. */
     style?: React__default.CSSProperties;
     /** Label/input orientation. Defaults to `'vertical'`. */
     layout?: 'horizontal' | 'vertical';
     /** Size preset — controls height, padding, and font. Default `'md'`. */
     size?: FieldSize;
+    /** Native blur handler. */
     onBlur?: React__default.FocusEventHandler<HTMLInputElement>;
+    /** Validation message — shown under the input; also flags it red + `aria-invalid`. */
     errorMessage?: React__default.ReactNode;
     /** Contextual help revealed via an info icon + tooltip beside the label. */
     helperText?: React__default.ReactNode;
+    /** Extra classes merged onto the field root element. */
+    className?: string;
     /** Mark the field required (renders an asterisk after the label). */
     required?: boolean;
     /** Optional leading adornment (icon / prefix). */
     prefix?: React__default.ReactNode;
     /** Optional trailing adornment (icon / suffix / unit). */
     suffix?: React__default.ReactNode;
+    /** @deprecated Use `htmlFor`. */
     id?: string;
 }
 /**
@@ -1985,7 +2027,7 @@ interface TextInputProps {
  * />
  * ```
  */
-declare function TextInput({ value, onChange, disabled, label, htmlFor, placeholder, name, type, inputStyle, style, layout, size, onBlur, errorMessage, helperText, required, prefix, suffix, }: TextInputProps): react_jsx_runtime.JSX.Element;
+declare function TextInput({ value, onChange, disabled, label, htmlFor, placeholder, name, type, inputStyle, style, layout, size, onBlur, errorMessage, helperText, className, required, prefix, suffix, }: TextInputProps): react_jsx_runtime.JSX.Element;
 
 interface NumberInputProps {
     /** Step size for the up/down buttons and native arrow-key handling. Default `1`. */
@@ -2000,24 +2042,39 @@ interface NumberInputProps {
             name?: string;
         };
     }) => void;
+    /** Field label, placed above (vertical) or beside (horizontal) the control. */
     label?: React__default.ReactNode;
+    /** The control id; the field label links to it for accessibility. */
     htmlFor?: string;
+    /** Native form field name (used for FormData serialisation). */
     name?: string;
+    /** Disable interaction and dim the control. */
     disabled?: boolean;
     /** Label/input orientation. Defaults to `'vertical'`. */
     layout?: 'horizontal' | 'vertical';
     /** Size preset. Default `'md'`. */
     size?: FieldSize;
+    /** Validation message — shown under the control; also flags it red and sets aria-invalid. */
     errorMessage?: React__default.ReactNode;
     /** Contextual help revealed via an info icon + tooltip beside the label. */
     helperText?: React__default.ReactNode;
+    /** Extra classes merged onto the field root element. */
+    className?: string;
+    /** Show a required asterisk after the label. */
     required?: boolean;
+    /** Inline style applied to the inner input element. */
     inputStyle?: React__default.CSSProperties;
+    /** Inline style applied to the label. */
     labelStyle?: React__default.CSSProperties;
+    /** Placeholder shown when the field is empty. */
     placeholder?: string;
+    /** Inline style applied to the control shell. */
     style?: React__default.CSSProperties;
+    /** Minimum allowed value. */
     min?: number;
+    /** Maximum allowed value. */
     max?: number;
+    /** Render read-only — visible but not editable. */
     readOnly?: boolean;
     /** Optional precision for floating-point steps (number of decimal places to round to). */
     precision?: number;
@@ -2054,26 +2111,40 @@ interface NumberInputProps {
  * <NumberInput label="Tonnage" step={0.25} precision={2} />
  * ```
  */
-declare function NumberInput({ step, value, onChange, label, htmlFor, name, disabled, layout, size, errorMessage, helperText, required, inputStyle, labelStyle, placeholder, style, min, max, readOnly, precision, }: NumberInputProps): react_jsx_runtime.JSX.Element;
+declare function NumberInput({ step, value, onChange, label, htmlFor, name, disabled, layout, size, errorMessage, helperText, className, required, inputStyle, labelStyle, placeholder, style, min, max, readOnly, precision, }: NumberInputProps): react_jsx_runtime.JSX.Element;
 
 interface PasswordProps {
+    /** Controlled value. */
     value?: string;
+    /** Fires when the value changes. */
     onChange?: React__default.ChangeEventHandler<HTMLInputElement>;
+    /** Disable interaction and dim the control. */
     disabled?: boolean;
+    /** Field label, placed above (vertical) or beside (horizontal) the control. */
     label?: React__default.ReactNode;
+    /** The control id; the field label links to it for accessibility. */
     htmlFor?: string;
+    /** Placeholder shown when the field is empty. */
     placeholder?: string;
+    /** Native form field name (used for FormData serialisation). */
     name?: string;
+    /** Inline style applied to the inner input element. */
     inputStyle?: React__default.CSSProperties;
+    /** Inline style applied to the control shell. */
     style?: React__default.CSSProperties;
     /** Label/input orientation. Defaults to `'vertical'`. */
     layout?: 'horizontal' | 'vertical';
     /** Size preset — controls height, padding, and font. Default `'md'`. */
     size?: FieldSize;
+    /** Blur handler — useful for touched/validation timing. */
     onBlur?: React__default.FocusEventHandler<HTMLInputElement>;
+    /** Validation message — shown under the control; also flags it red and sets aria-invalid. */
     errorMessage?: React__default.ReactNode;
     /** Contextual help revealed via an info icon + tooltip beside the label. */
     helperText?: React__default.ReactNode;
+    /** Extra classes merged onto the field root element. */
+    className?: string;
+    /** Show a required asterisk after the label. */
     required?: boolean;
     /** Override the "reveal" (password hidden) icon. */
     showIcon?: React__default.ReactNode;
@@ -2089,17 +2160,26 @@ interface PasswordProps {
  * <Password label="Password" value={pw} onChange={(e) => setPw(e.target.value)} />
  * ```
  */
-declare function Password({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout, size, onBlur, errorMessage, helperText, required, showIcon, hideIcon, }: PasswordProps): react_jsx_runtime.JSX.Element;
+declare function Password({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout, size, onBlur, errorMessage, helperText, className, required, showIcon, hideIcon, }: PasswordProps): react_jsx_runtime.JSX.Element;
 
 interface SearchInputProps {
+    /** Controlled value. */
     value?: string;
+    /** Fires when the value changes. */
     onChange?: React__default.ChangeEventHandler<HTMLInputElement>;
+    /** Disable interaction and dim the control. */
     disabled?: boolean;
+    /** Field label, placed above (vertical) or beside (horizontal) the control. */
     label?: React__default.ReactNode;
+    /** The control id; the field label links to it for accessibility. */
     htmlFor?: string;
+    /** Placeholder shown when the field is empty. */
     placeholder?: string;
+    /** Native form field name (used for FormData serialisation). */
     name?: string;
+    /** Inline style applied to the inner input element. */
     inputStyle?: React__default.CSSProperties;
+    /** Inline style applied to the control shell. */
     style?: React__default.CSSProperties;
     /** Label/input orientation. Defaults to `'vertical'`. */
     layout?: 'horizontal' | 'vertical';
@@ -2109,6 +2189,8 @@ interface SearchInputProps {
     icon?: React__default.ReactNode;
     /** Contextual help revealed via an info icon + tooltip beside the label. */
     helperText?: React__default.ReactNode;
+    /** Extra classes merged onto the field root element. */
+    className?: string;
 }
 /**
  * Search field with a leading magnifier icon. Uses `type="search"` for the
@@ -2163,6 +2245,8 @@ interface CheckboxProps {
     labelPosition?: 'left' | 'right';
     /** @deprecated Use `checked`. Kept for API compatibility. */
     value?: boolean;
+    /** Extra classes merged onto the component root. */
+    className?: string;
 }
 /**
  * Accessible checkbox powered by Radix Checkbox.
@@ -2185,7 +2269,7 @@ interface CheckboxProps {
  * />
  */
 declare function Checkbox({ checked, value, // legacy alias
-onChange, label, description, name, htmlFor, errorMessage, helperText, disabled, required, layout, labelPosition, }: CheckboxProps): react_jsx_runtime.JSX.Element;
+onChange, label, description, name, htmlFor, errorMessage, helperText, disabled, required, layout, labelPosition, className, }: CheckboxProps): react_jsx_runtime.JSX.Element;
 
 interface RadioOption {
     /** Stable value submitted / reported on change. */
@@ -2198,13 +2282,17 @@ interface RadioOption {
     disabled?: boolean;
 }
 interface RadioGroupProps {
+    /** The selectable options. */
     options: RadioOption[];
     /** Controlled selected value. */
     value?: string;
     /** Uncontrolled initial value. */
     defaultValue?: string;
+    /** Fires when the value changes. */
     onChange?: (value: string) => void;
+    /** Native form field name (used for FormData serialisation). */
     name?: string;
+    /** Field label, placed above (vertical) or beside (horizontal) the control. */
     label?: React__default.ReactNode;
     /**
      * Option arrangement. `'vertical'` (default) stacks options in a column;
@@ -2219,10 +2307,15 @@ interface RadioGroupProps {
     labelPosition?: 'left' | 'right';
     /** Size preset — controls the dot + text size. Default `'md'`. */
     size?: FieldSize;
+    /** Disable interaction and dim the control. */
     disabled?: boolean;
+    /** Show a required asterisk after the label. */
     required?: boolean;
     /** Contextual help revealed via an info icon + tooltip beside the label. */
     helperText?: React__default.ReactNode;
+    /** Extra classes merged onto the field root element. */
+    className?: string;
+    /** Validation message — shown under the control; also flags it red and sets aria-invalid. */
     errorMessage?: React__default.ReactNode;
 }
 /**
@@ -2248,13 +2341,14 @@ interface RadioGroupProps {
  * />
  * ```
  */
-declare function RadioGroup({ options, value, defaultValue, onChange, name, label, layout, labelPosition, size, disabled, required, helperText, errorMessage, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+declare function RadioGroup({ options, value, defaultValue, onChange, name, label, layout, labelPosition, size, disabled, required, helperText, className, errorMessage, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
 
 interface SwitchInputProps {
     /** Controlled on/off state. */
     checked?: boolean;
     /** Uncontrolled initial state. */
     defaultChecked?: boolean;
+    /** Fires when the value changes. */
     onChange?: (e: {
         target: {
             checked: boolean;
@@ -2274,13 +2368,19 @@ interface SwitchInputProps {
     layout?: 'horizontal' | 'vertical';
     /** Contextual help revealed via an info icon + tooltip beside the label. */
     helperText?: React__default.ReactNode;
+    /** Extra classes merged onto the field root element. */
+    className?: string;
     /** Label rendered to the left of the track, emphasised while off. */
     offLabel?: React__default.ReactNode;
     /** Label rendered to the right of the track, emphasised while on. */
     onLabel?: React__default.ReactNode;
+    /** Native form field name (used for FormData serialisation). */
     name?: string;
+    /** Show a required asterisk after the label. */
     required?: boolean;
+    /** Disable interaction and dim the control. */
     disabled?: boolean;
+    /** Validation message — shown under the control; also flags it red and sets aria-invalid. */
     errorMessage?: React__default.ReactNode;
 }
 /**
@@ -2300,7 +2400,7 @@ interface SwitchInputProps {
  * <Switch label="Email notifications" checked={on} onChange={({ target }) => setOn(target.checked)} />
  * <Switch offLabel="Monthly" onLabel="Yearly" checked={yearly} onChange={...} />
  */
-declare function Switch({ checked, defaultChecked, onChange, checkedIcon, uncheckedIcon, label, layout, helperText, offLabel, onLabel, name, required, disabled, errorMessage, }: SwitchInputProps): react_jsx_runtime.JSX.Element;
+declare function Switch({ checked, defaultChecked, onChange, checkedIcon, uncheckedIcon, label, layout, helperText, className, offLabel, onLabel, name, required, disabled, errorMessage, }: SwitchInputProps): react_jsx_runtime.JSX.Element;
 
 interface DropdownItem {
     key: string | number;
@@ -2318,11 +2418,17 @@ type DropdownKey = string | number;
  */
 type DropdownValue = DropdownKey | DropdownKey[];
 interface DropdownProps {
+    /** Enable multi-select (value becomes an array of keys). */
     isMultiselect?: boolean;
+    /** Show a search box inside the dropdown panel. */
     hasSearch?: boolean;
+    /** Field label, placed above (vertical) or beside (horizontal) the control. */
     label?: React__default.ReactNode;
+    /** Native form field name (used for FormData serialisation). */
     name?: string;
+    /** Controlled value. */
     value?: DropdownValue;
+    /** Fires when the value changes. */
     onChange?: (e: {
         target: {
             value: DropdownValue;
@@ -2330,21 +2436,32 @@ interface DropdownProps {
             name?: string;
         };
     }) => void;
+    /** Blur handler — useful for touched/validation timing. */
     onBlur?: React__default.FocusEventHandler;
+    /** Disable interaction and dim the control. */
     disabled?: boolean;
     /** Label/input orientation. Defaults to `'vertical'`. */
     layout?: 'horizontal' | 'vertical';
     /** Contextual help revealed via an info icon + tooltip beside the label. */
     helperText?: React__default.ReactNode;
+    /** Show a required asterisk after the label. */
     required?: boolean;
+    /** Validation message — shown under the control; also flags it red and sets aria-invalid. */
     errorMessage?: React__default.ReactNode;
+    /** Inline style applied to the control shell. */
     style?: React__default.CSSProperties;
+    /** The control id; the field label links to it for accessibility. */
     htmlFor?: string;
+    /** The selectable items. */
     items?: DropdownItem[];
+    /** Inline style applied to the label. */
     labelStyle?: React__default.CSSProperties;
+    /** Placeholder shown when the field is empty. */
     placeholder?: string;
     /** Size preset. Default `'md'`. */
     size?: FieldSize;
+    /** Extra classes merged onto the component root. */
+    className?: string;
 }
 /**
  * Select / multi-select dropdown powered by Radix Popover.
@@ -2361,7 +2478,7 @@ interface DropdownProps {
  * // Multi-select
  * <Dropdown isMultiselect label="Fuels" items={fuels} value={form.fuels} onChange={handleChange} />
  */
-declare function Dropdown({ isMultiselect, hasSearch, label, name, value, onChange, disabled, layout, helperText, required, errorMessage, style, htmlFor, items, labelStyle, placeholder, size, }: DropdownProps): react_jsx_runtime.JSX.Element;
+declare function Dropdown({ isMultiselect, hasSearch, label, name, value, onChange, disabled, layout, helperText, required, errorMessage, style, htmlFor, items, labelStyle, placeholder, size, className, }: DropdownProps): react_jsx_runtime.JSX.Element;
 
 interface AutoCompleteItem {
     key: string;
@@ -2370,11 +2487,17 @@ interface AutoCompleteItem {
     icon?: React__default.ReactNode;
 }
 interface AutoCompleteProps {
+    /** Disable interaction and dim the control. */
     disabled?: boolean;
+    /** Field label, placed above (vertical) or beside (horizontal) the control. */
     label?: React__default.ReactNode;
+    /** Placeholder shown when the field is empty. */
     placeholder?: string;
+    /** Native form field name (used for FormData serialisation). */
     name?: string;
+    /** Inline style applied to the inner input element. */
     inputStyle?: React__default.CSSProperties;
+    /** Inline style applied to the control shell. */
     style?: React__default.CSSProperties;
     /** Label/input orientation. Defaults to `'vertical'`. */
     layout?: 'horizontal' | 'vertical';
@@ -2396,6 +2519,7 @@ interface AutoCompleteProps {
      * typing. Default `250`. Ignored when `items` is used.
      */
     debounce?: number;
+    /** Fires when a suggestion is selected, with its value. */
     onItemClick?: (value: string) => void;
     /** Custom "empty" message */
     emptyText?: string;
@@ -2409,8 +2533,11 @@ interface AutoCompleteProps {
     errorMessage?: React__default.ReactNode;
     /** Contextual help revealed via an info icon + tooltip beside the label. */
     helperText?: React__default.ReactNode;
+    /** Extra classes merged onto the field root element. */
+    className?: string;
     /** Mark required (asterisk after the label). */
     required?: boolean;
+    /** The control id; the field label links to it for accessibility. */
     htmlFor?: string;
 }
 /**
@@ -2449,7 +2576,7 @@ interface AutoCompleteProps {
  * />
  * ```
  */
-declare function AutoComplete({ disabled, label, placeholder, name, inputStyle, style, layout, items, onSearch, debounce, onItemClick, emptyText, loadingText, size, icon, errorMessage, helperText, required, htmlFor, }: AutoCompleteProps): react_jsx_runtime.JSX.Element;
+declare function AutoComplete({ disabled, label, placeholder, name, inputStyle, style, layout, items, onSearch, debounce, onItemClick, emptyText, loadingText, size, icon, errorMessage, helperText, className, required, htmlFor, }: AutoCompleteProps): react_jsx_runtime.JSX.Element;
 
 interface TreeSelectNode {
     key: string | number;
@@ -2473,19 +2600,27 @@ interface TreeSelectProps {
             name?: string;
         };
     }) => void;
+    /** Field label, placed above (vertical) or beside (horizontal) the control. */
     label?: React__default.ReactNode;
+    /** Placeholder shown when the field is empty. */
     placeholder?: string;
     /** Form control id linkage. */
     htmlFor?: string;
+    /** Native form field name (used for FormData serialisation). */
     name?: string;
     /** Label/trigger orientation. Defaults to `'horizontal'`. */
     layout?: 'horizontal' | 'vertical';
     /** Contextual help revealed via an info icon + tooltip beside the label. */
     helperText?: React__default.ReactNode;
+    /** Extra classes merged onto the field root element. */
+    className?: string;
     /** Show a required asterisk after the label. */
     required?: boolean;
+    /** Disable interaction and dim the control. */
     disabled?: boolean;
+    /** Validation message — shown under the control; also flags it red and sets aria-invalid. */
     errorMessage?: React__default.ReactNode;
+    /** Inline style applied to the control shell. */
     style?: React__default.CSSProperties;
     /**
      * Whether parent (branch) nodes can be selected. When `false`, parents
@@ -2534,10 +2669,12 @@ interface TreeSelectProps {
  * />
  * ```
  */
-declare function TreeSelect({ label, name, value, onChange, disabled, layout, helperText, required, errorMessage, style, htmlFor, items, placeholder, parentsSelectable, defaultExpandedKeys, size, }: TreeSelectProps): react_jsx_runtime.JSX.Element;
+declare function TreeSelect({ label, name, value, onChange, disabled, layout, helperText, className, required, errorMessage, style, htmlFor, items, placeholder, parentsSelectable, defaultExpandedKeys, size, }: TreeSelectProps): react_jsx_runtime.JSX.Element;
 
 interface FileInputProps {
+    /** Allow selecting more than one file. */
     allowMultiple?: boolean;
+    /** Fires when the value changes. */
     onChange?: (e: {
         target: {
             files: File[];
@@ -2546,8 +2683,11 @@ interface FileInputProps {
             value?: string;
         };
     }) => void;
+    /** Native form field name (used for FormData serialisation). */
     name?: string;
+    /** The control id; the field label links to it for accessibility. */
     htmlFor?: string;
+    /** Field label, placed above (vertical) or beside (horizontal) the control. */
     label?: React__default.ReactNode;
     /** Accepted MIME types / extensions, e.g. `'.xlsx,application/pdf'`. */
     accept?: string;
@@ -2557,10 +2697,15 @@ interface FileInputProps {
     hint?: React__default.ReactNode;
     /** Maximum file size in bytes. Files above this are rejected with an error. */
     maxSize?: number;
+    /** Validation message — shown under the control; also flags it red and sets aria-invalid. */
     errorMessage?: React__default.ReactNode;
     /** Contextual help revealed via an info icon + tooltip beside the label. */
     helperText?: React__default.ReactNode;
+    /** Extra classes merged onto the field root element. */
+    className?: string;
+    /** Disable interaction and dim the control. */
     disabled?: boolean;
+    /** Show a required asterisk after the label. */
     required?: boolean;
     /** Override the upload glyph in the empty state. */
     icon?: React__default.ReactNode;
@@ -2585,17 +2730,20 @@ interface FileInputProps {
  * />
  * ```
  */
-declare function FileInput({ allowMultiple, onChange, name, htmlFor, label, accept, prompt, hint, maxSize, errorMessage, helperText, disabled, required, icon, }: FileInputProps): react_jsx_runtime.JSX.Element;
+declare function FileInput({ allowMultiple, onChange, name, htmlFor, label, accept, prompt, hint, maxSize, errorMessage, helperText, className, disabled, required, icon, }: FileInputProps): react_jsx_runtime.JSX.Element;
 
 interface DatePickerProps {
     /** Current date. `null` / `undefined` means "no date selected". */
     value?: Date | null;
     /** Fires with the next date (or `null` if cleared via the clear button). */
     onChange?: (date: Date | null) => void;
+    /** Field label, placed above (vertical) or beside (horizontal) the control. */
     label?: React__default.ReactNode;
     /** Text shown in the trigger when no date is selected. Default `"Select a date…"`. */
     placeholder?: string;
+    /** The control id; the field label links to it for accessibility. */
     htmlFor?: string;
+    /** Native form field name (used for FormData serialisation). */
     name?: string;
     /** Label/trigger orientation. Defaults to `'horizontal'`. */
     layout?: 'horizontal' | 'vertical';
@@ -2603,12 +2751,15 @@ interface DatePickerProps {
     helperText?: React__default.ReactNode;
     /** Show a required asterisk after the label. */
     required?: boolean;
+    /** Disable interaction and dim the control. */
     disabled?: boolean;
+    /** Validation message — shown under the control; also flags it red and sets aria-invalid. */
     errorMessage?: React__default.ReactNode;
     /** Earliest selectable date. Dates before this render disabled. */
     min?: Date;
     /** Latest selectable date. Dates after this render disabled. */
     max?: Date;
+    /** Inline style applied to the control shell. */
     style?: React__default.CSSProperties;
     /**
      * Custom formatter for the trigger display. Defaults to
@@ -2661,13 +2812,21 @@ type TemporalPickerProps = DatePickerProps;
 declare function DatePicker({ value, onChange, label, placeholder, htmlFor, name: _name, layout, helperText, required, disabled, errorMessage, min, max, style, format, weekStartsOn, clearable, size, }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
 interface TextAreaProps {
+    /** Controlled value. */
     value?: string;
+    /** Fires when the value changes. */
     onChange?: React__default.ChangeEventHandler<HTMLTextAreaElement>;
+    /** Blur handler — useful for touched/validation timing. */
     onBlur?: React__default.FocusEventHandler<HTMLTextAreaElement>;
+    /** Disable interaction and dim the control. */
     disabled?: boolean;
+    /** Field label, placed above (vertical) or beside (horizontal) the control. */
     label?: React__default.ReactNode;
+    /** The control id; the field label links to it for accessibility. */
     htmlFor?: string;
+    /** Placeholder shown when the field is empty. */
     placeholder?: string;
+    /** Native form field name (used for FormData serialisation). */
     name?: string;
     /** Label/control orientation. Default `'vertical'`. */
     layout?: 'horizontal' | 'vertical';
@@ -2688,11 +2847,17 @@ interface TextAreaProps {
     showCount?: boolean;
     /** CSS `resize` behaviour. Default `'vertical'` (or `'none'` when autoGrow). */
     resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    /** Validation message — shown under the control; also flags it red and sets aria-invalid. */
     errorMessage?: React__default.ReactNode;
     /** Contextual help revealed via an info icon + tooltip beside the label. */
     helperText?: React__default.ReactNode;
+    /** Extra classes merged onto the field root element. */
+    className?: string;
+    /** Show a required asterisk after the label. */
     required?: boolean;
+    /** Inline style applied to the control shell. */
     style?: React__default.CSSProperties;
+    /** Inline style applied to the inner input element. */
     inputStyle?: React__default.CSSProperties;
 }
 /**
@@ -2711,7 +2876,7 @@ interface TextAreaProps {
  * <TextArea label="Bio" maxLength={280} showCount value={bio} onChange={onChange} />
  * ```
  */
-declare function TextArea({ value, onChange, onBlur, disabled, label, htmlFor, placeholder, name, layout, size, rows, autoGrow, maxRows, maxLength, showCount, resize, errorMessage, helperText, required, style, inputStyle, }: TextAreaProps): react_jsx_runtime.JSX.Element;
+declare function TextArea({ value, onChange, onBlur, disabled, label, htmlFor, placeholder, name, layout, size, rows, autoGrow, maxRows, maxLength, showCount, resize, errorMessage, helperText, className, required, style, inputStyle, }: TextAreaProps): react_jsx_runtime.JSX.Element;
 
 interface SegmentedOption {
     value: string;
@@ -2720,16 +2885,19 @@ interface SegmentedOption {
     disabled?: boolean;
 }
 interface SegmentedControlProps {
+    /** The selectable options. */
     options: SegmentedOption[];
     /** Controlled selected value. */
     value?: string;
     /** Uncontrolled initial value. */
     defaultValue?: string;
+    /** Fires when the value changes. */
     onChange?: (value: string) => void;
     /** Size preset. Default `'md'`. */
     size?: FieldSize;
     /** Stretch to fill the container, segments share the width equally. */
     fullWidth?: boolean;
+    /** Disable interaction and dim the control. */
     disabled?: boolean;
     /** Optional label, positioned per `layout`. */
     label?: React__default.ReactNode;
@@ -2737,10 +2905,15 @@ interface SegmentedControlProps {
     layout?: 'horizontal' | 'vertical';
     /** Contextual help revealed via an info icon + tooltip beside the label. */
     helperText?: React__default.ReactNode;
+    /** Extra classes merged onto the field root element. */
+    className?: string;
     /** Native form field name (emits a hidden input carrying the value). */
     name?: string;
+    /** Show a required asterisk after the label. */
     required?: boolean;
+    /** Validation message — shown under the control; also flags it red and sets aria-invalid. */
     errorMessage?: React__default.ReactNode;
+    /** Accessible label for the control. */
     'aria-label'?: string;
 }
 /**
@@ -2770,7 +2943,7 @@ interface SegmentedControlProps {
  * />
  * ```
  */
-declare function SegmentedControl({ options, value, defaultValue, onChange, size, fullWidth, disabled, label, layout, helperText, name, required, errorMessage, 'aria-label': ariaLabel, }: SegmentedControlProps): react_jsx_runtime.JSX.Element;
+declare function SegmentedControl({ options, value, defaultValue, onChange, size, fullWidth, disabled, label, layout, helperText, className, name, required, errorMessage, 'aria-label': ariaLabel, }: SegmentedControlProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Slider value. A single number for a one-thumb slider, or a `[min, max]`
@@ -2782,14 +2955,21 @@ interface SliderMark {
     label?: React__default.ReactNode;
 }
 interface SliderProps {
+    /** Controlled value. */
     value?: SliderValue;
+    /** Uncontrolled initial value. */
     defaultValue?: SliderValue;
+    /** Fires when the value changes. */
     onChange?: (value: SliderValue) => void;
     /** Fired once at the end of a drag/keyboard interaction. */
     onChangeEnd?: (value: SliderValue) => void;
+    /** Minimum allowed value. */
     min?: number;
+    /** Maximum allowed value. */
     max?: number;
+    /** Step increment between values. */
     step?: number;
+    /** Field label, placed above (vertical) or beside (horizontal) the control. */
     label?: React__default.ReactNode;
     /** Show the current value(s) next to the label. */
     showValue?: boolean;
@@ -2799,14 +2979,21 @@ interface SliderProps {
     marks?: SliderMark[];
     /** Show a value tooltip above the thumb while dragging. */
     tooltip?: boolean;
+    /** Size preset — controls height, padding, and font. Default 'md'. */
     size?: FieldSize;
+    /** Disable interaction and dim the control. */
     disabled?: boolean;
+    /** Validation message — shown under the control; also flags it red and sets aria-invalid. */
     errorMessage?: React__default.ReactNode;
     /** Contextual help revealed via an info icon + tooltip beside the label. */
     helperText?: React__default.ReactNode;
+    /** Extra classes merged onto the field root element. */
+    className?: string;
     /** Show a required asterisk after the label. */
     required?: boolean;
+    /** Native form field name (used for FormData serialisation). */
     name?: string;
+    /** The control id; the field label links to it for accessibility. */
     htmlFor?: string;
 }
 /**
@@ -2830,24 +3017,36 @@ interface SliderProps {
  * />
  * ```
  */
-declare function Slider({ value, defaultValue, onChange, onChangeEnd, min, max, step, label, showValue, formatValue, marks, tooltip, size, disabled, errorMessage, helperText, required, name, htmlFor, }: SliderProps): react_jsx_runtime.JSX.Element;
+declare function Slider({ value, defaultValue, onChange, onChangeEnd, min, max, step, label, showValue, formatValue, marks, tooltip, size, disabled, errorMessage, helperText, className, required, name, htmlFor, }: SliderProps): react_jsx_runtime.JSX.Element;
 
 interface TagsInputProps {
     /** Controlled list of tags. */
     value?: string[];
     /** Uncontrolled initial tags. */
     defaultValue?: string[];
+    /** Fires when the value changes. */
     onChange?: (tags: string[]) => void;
+    /** Field label, placed above (vertical) or beside (horizontal) the control. */
     label?: React__default.ReactNode;
+    /** The control id; the field label links to it for accessibility. */
     htmlFor?: string;
+    /** Native form field name (used for FormData serialisation). */
     name?: string;
+    /** Placeholder shown when the field is empty. */
     placeholder?: string;
+    /** Label/control orientation: 'horizontal' or 'vertical'. */
     layout?: 'horizontal' | 'vertical';
+    /** Size preset — controls height, padding, and font. Default 'md'. */
     size?: FieldSize;
+    /** Disable interaction and dim the control. */
     disabled?: boolean;
+    /** Validation message — shown under the control; also flags it red and sets aria-invalid. */
     errorMessage?: React__default.ReactNode;
     /** Contextual help revealed via an info icon + tooltip beside the label. */
     helperText?: React__default.ReactNode;
+    /** Extra classes merged onto the field root element. */
+    className?: string;
+    /** Show a required asterisk after the label. */
     required?: boolean;
     /** Maximum number of tags. Further input is ignored once reached. */
     maxTags?: number;
@@ -2873,30 +3072,41 @@ interface TagsInputProps {
  *   validate={(t) => /.+@.+\..+/.test(t) || 'Not a valid email'} />
  * ```
  */
-declare function TagsInput({ value, defaultValue, onChange, label, htmlFor, name, placeholder, layout, size, disabled, errorMessage, helperText, required, maxTags, dedupe, validate, separators, }: TagsInputProps): react_jsx_runtime.JSX.Element;
+declare function TagsInput({ value, defaultValue, onChange, label, htmlFor, name, placeholder, layout, size, disabled, errorMessage, helperText, className, required, maxTags, dedupe, validate, separators, }: TagsInputProps): react_jsx_runtime.JSX.Element;
 
 interface OtpInputProps {
     /** Number of code boxes. Default `6`. */
     length?: number;
+    /** Controlled value. */
     value?: string;
+    /** Fires when the value changes. */
     onChange?: (code: string) => void;
     /** Fired when every box is filled. */
     onComplete?: (code: string) => void;
+    /** Field label, placed above (vertical) or beside (horizontal) the control. */
     label?: React__default.ReactNode;
+    /** The control id; the field label links to it for accessibility. */
     htmlFor?: string;
+    /** Native form field name (used for FormData serialisation). */
     name?: string;
     /** `'numeric'` (default) restricts to digits; `'alphanumeric'` allows letters too. */
     mode?: 'numeric' | 'alphanumeric';
     /** Render boxes as masked dots (for PIN entry). */
     masked?: boolean;
+    /** Size preset — controls height, padding, and font. Default 'md'. */
     size?: FieldSize;
+    /** Disable interaction and dim the control. */
     disabled?: boolean;
+    /** Validation message — shown under the control; also flags it red and sets aria-invalid. */
     errorMessage?: React__default.ReactNode;
+    /** Show a required asterisk after the label. */
     required?: boolean;
     /** Label/control orientation. Default `'vertical'`. */
     layout?: 'horizontal' | 'vertical';
     /** Contextual help revealed via an info icon + tooltip beside the label. */
     helperText?: React__default.ReactNode;
+    /** Extra classes merged onto the field root element. */
+    className?: string;
     /** Render a visual gap after this many boxes (e.g. `3` → `123 456`). */
     groupAfter?: number;
 }
@@ -2910,11 +3120,14 @@ interface OtpInputProps {
  * <OtpInput length={6} value={code} onChange={setCode} onComplete={verify} />
  * ```
  */
-declare function OtpInput({ length, value, onChange, onComplete, label, htmlFor, name, mode, masked, size, disabled, errorMessage, required, layout, helperText, groupAfter, }: OtpInputProps): react_jsx_runtime.JSX.Element;
+declare function OtpInput({ length, value, onChange, onComplete, label, htmlFor, name, mode, masked, size, disabled, errorMessage, required, layout, helperText, className, groupAfter, }: OtpInputProps): react_jsx_runtime.JSX.Element;
 
 interface RatingProps {
+    /** Controlled value. */
     value?: number;
+    /** Uncontrolled initial value. */
     defaultValue?: number;
+    /** Fires when the value changes. */
     onChange?: (value: number) => void;
     /** Number of icons. Default `5`. */
     count?: number;
@@ -2924,17 +3137,24 @@ interface RatingProps {
     readOnly?: boolean;
     /** Clicking the current value again clears to 0. Default `true`. */
     clearable?: boolean;
+    /** Field label, placed above (vertical) or beside (horizontal) the control. */
     label?: React__default.ReactNode;
+    /** Size preset — controls height, padding, and font. Default 'md'. */
     size?: FieldSize;
+    /** Disable interaction and dim the control. */
     disabled?: boolean;
     /** Override the icon. Receives a `filled` flag. Default is a star. */
     icon?: (filled: boolean) => React__default.ReactNode;
+    /** Validation message — shown under the control; also flags it red and sets aria-invalid. */
     errorMessage?: React__default.ReactNode;
+    /** Native form field name (used for FormData serialisation). */
     name?: string;
     /** Label/control orientation. Default `'vertical'`. */
     layout?: 'horizontal' | 'vertical';
     /** Contextual help revealed via an info icon + tooltip beside the label. */
     helperText?: React__default.ReactNode;
+    /** Extra classes merged onto the field root element. */
+    className?: string;
     /** Show a required asterisk after the label. */
     required?: boolean;
 }
@@ -2953,17 +3173,24 @@ interface RatingProps {
  * <Rating value={4.5} allowHalf readOnly />
  * ```
  */
-declare function Rating({ value, defaultValue, onChange, count, allowHalf, readOnly, clearable, label, size, disabled, icon, errorMessage, name, layout, helperText, required, }: RatingProps): react_jsx_runtime.JSX.Element;
+declare function Rating({ value, defaultValue, onChange, count, allowHalf, readOnly, clearable, label, size, disabled, icon, errorMessage, name, layout, helperText, className, required, }: RatingProps): react_jsx_runtime.JSX.Element;
 
 interface TimePickerProps {
     /** Value as `"HH:mm"` (24h) or `"HH:mm:ss"`. `null`/`undefined` = unset. */
     value?: string | null;
+    /** Fires when the value changes. */
     onChange?: (value: string | null) => void;
+    /** Field label, placed above (vertical) or beside (horizontal) the control. */
     label?: React__default.ReactNode;
+    /** The control id; the field label links to it for accessibility. */
     htmlFor?: string;
+    /** Native form field name (used for FormData serialisation). */
     name?: string;
+    /** Placeholder shown when the field is empty. */
     placeholder?: string;
+    /** Label/control orientation: 'horizontal' or 'vertical'. */
     layout?: 'horizontal' | 'vertical';
+    /** Size preset — controls height, padding, and font. Default 'md'. */
     size?: FieldSize;
     /** Display in 12-hour format with AM/PM (value stays 24h `"HH:mm"`). */
     use12Hours?: boolean;
@@ -2971,11 +3198,17 @@ interface TimePickerProps {
     withSeconds?: boolean;
     /** Minute step. Default `1`. Use `5` / `15` for coarse pickers. */
     minuteStep?: number;
+    /** Disable interaction and dim the control. */
     disabled?: boolean;
+    /** Validation message — shown under the control; also flags it red and sets aria-invalid. */
     errorMessage?: React__default.ReactNode;
     /** Contextual help revealed via an info icon + tooltip beside the label. */
     helperText?: React__default.ReactNode;
+    /** Extra classes merged onto the field root element. */
+    className?: string;
+    /** Show a required asterisk after the label. */
     required?: boolean;
+    /** Inline style applied to the control shell. */
     style?: React__default.CSSProperties;
 }
 /**
@@ -2988,7 +3221,7 @@ interface TimePickerProps {
  * <TimePicker label="Departure" value={time} onChange={setTime} minuteStep={15} use12Hours />
  * ```
  */
-declare function TimePicker({ value, onChange, label, htmlFor, name, placeholder, layout, size, use12Hours, withSeconds, minuteStep, disabled, errorMessage, helperText, required, style, }: TimePickerProps): react_jsx_runtime.JSX.Element;
+declare function TimePicker({ value, onChange, label, htmlFor, name, placeholder, layout, size, use12Hours, withSeconds, minuteStep, disabled, errorMessage, helperText, className, required, style, }: TimePickerProps): react_jsx_runtime.JSX.Element;
 
 interface DateRange {
     start: Date | null;
@@ -3000,25 +3233,41 @@ interface DateRangePreset {
     range: () => DateRange;
 }
 interface DateRangePickerProps {
+    /** Controlled value. */
     value?: DateRange;
+    /** Fires when the value changes. */
     onChange?: (range: DateRange) => void;
+    /** Field label, placed above (vertical) or beside (horizontal) the control. */
     label?: React__default.ReactNode;
+    /** The control id; the field label links to it for accessibility. */
     htmlFor?: string;
+    /** Placeholder shown when the field is empty. */
     placeholder?: string;
+    /** Label/control orientation: 'horizontal' or 'vertical'. */
     layout?: 'horizontal' | 'vertical';
+    /** Size preset — controls height, padding, and font. Default 'md'. */
     size?: FieldSize;
+    /** Earliest selectable date. */
     min?: Date;
+    /** Latest selectable date. */
     max?: Date;
     /** 0 = Sunday, 1 = Monday. Default `0`. */
     weekStartsOn?: 0 | 1;
     /** Quick-select presets shown in a rail beside the calendars. */
     presets?: DateRangePreset[];
+    /** Custom formatter for the displayed value. */
     format?: (d: Date) => string;
+    /** Disable interaction and dim the control. */
     disabled?: boolean;
+    /** Validation message — shown under the control; also flags it red and sets aria-invalid. */
     errorMessage?: React__default.ReactNode;
     /** Contextual help revealed via an info icon + tooltip beside the label. */
     helperText?: React__default.ReactNode;
+    /** Extra classes merged onto the field root element. */
+    className?: string;
+    /** Show a required asterisk after the label. */
     required?: boolean;
+    /** Inline style applied to the control shell. */
     style?: React__default.CSSProperties;
 }
 /**
@@ -3038,26 +3287,38 @@ interface DateRangePickerProps {
  * />
  * ```
  */
-declare function DateRangePicker({ value, onChange, label, htmlFor, placeholder, layout, size, min, max, weekStartsOn, presets, format, disabled, errorMessage, helperText, required, style, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
+declare function DateRangePicker({ value, onChange, label, htmlFor, placeholder, layout, size, min, max, weekStartsOn, presets, format, disabled, errorMessage, helperText, className, required, style, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
 
 interface ColorPickerProps {
     /** Hex string, e.g. `"#0466c8"`. */
     value?: string;
+    /** Fires when the value changes. */
     onChange?: (hex: string) => void;
+    /** Field label, placed above (vertical) or beside (horizontal) the control. */
     label?: React__default.ReactNode;
+    /** The control id; the field label links to it for accessibility. */
     htmlFor?: string;
+    /** Native form field name (used for FormData serialisation). */
     name?: string;
+    /** Label/control orientation: 'horizontal' or 'vertical'. */
     layout?: 'horizontal' | 'vertical';
+    /** Size preset — controls height, padding, and font. Default 'md'. */
     size?: FieldSize;
     /** Preset swatches shown in the popover. Defaults to a balanced 12-color set. */
     swatches?: string[];
     /** Show the native eyedropper / full picker fallback via `<input type="color">`. Default `true`. */
     allowCustom?: boolean;
+    /** Disable interaction and dim the control. */
     disabled?: boolean;
+    /** Validation message — shown under the control; also flags it red and sets aria-invalid. */
     errorMessage?: React__default.ReactNode;
     /** Contextual help revealed via an info icon + tooltip beside the label. */
     helperText?: React__default.ReactNode;
+    /** Extra classes merged onto the field root element. */
+    className?: string;
+    /** Show a required asterisk after the label. */
     required?: boolean;
+    /** Placeholder shown when the field is empty. */
     placeholder?: string;
 }
 /**
@@ -3070,7 +3331,7 @@ interface ColorPickerProps {
  * <ColorPicker label="Brand colour" value={color} onChange={setColor} />
  * ```
  */
-declare function ColorPicker({ value, onChange, label, htmlFor, name, layout, size, swatches, allowCustom, disabled, errorMessage, helperText, required, placeholder, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
+declare function ColorPicker({ value, onChange, label, htmlFor, name, layout, size, swatches, allowCustom, disabled, errorMessage, helperText, className, required, placeholder, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Native, dependency-free validation. A field carries one rule or an array of
@@ -3239,7 +3500,10 @@ interface UseFormReturn {
     isValid: boolean;
     getValue: (name: string) => unknown;
     getValues: () => FormValues;
-    setValue: (name: string, value: unknown) => void;
+    setValue: (name: string, value: unknown, opts?: {
+        validate?: boolean;
+        touch?: boolean;
+    }) => void;
     setValues: (patch: FormValues) => void;
     setError: (name: string, error: string | undefined) => void;
     validateField: (name: string) => Promise<string | undefined>;
@@ -3386,4 +3650,98 @@ declare const FormContext: React$1.Context<FormStore>;
 /** Read the enclosing `<Form>`'s store. Throws if used outside a `<Form>`. */
 declare function useFormStore(): FormStore;
 
-export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ErrorMap, type ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, fieldShell, isRequired, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };
+/** The normalised value emitted on change / submit. */
+interface CreditCardValue {
+    /** Digits only (no spaces). */
+    number: string;
+    /** Cardholder name. */
+    name: string;
+    /** `MM/YY`. */
+    expiry: string;
+    /** Digits only. */
+    cvv: string;
+    /** Detected brand id (`'visa'`, `'amex'`…) or `null`. */
+    brand: string | null;
+}
+interface CreditCardFormProps {
+    /** Called with the validated card once every field passes on submit. */
+    onSubmit?: (card: CreditCardValue) => void | Promise<void>;
+    /** Called on every keystroke with the current (possibly invalid) card. */
+    onChange?: (card: CreditCardValue) => void;
+    /** Seed the fields (uncontrolled). Number/expiry are auto-formatted. */
+    defaultValue?: Partial<CreditCardValue>;
+    /** Size preset for the inner fields. Default `'md'`. */
+    size?: FieldSize;
+    /** Disable every field + the submit button. */
+    disabled?: boolean;
+    /** Require the cardholder name. Default `true`. */
+    requireName?: boolean;
+    /** Hide the built-in submit button (when embedding in a larger form). */
+    hideSubmit?: boolean;
+    /** Submit button label. Default `'Pay'`. */
+    submitLabel?: React__default.ReactNode;
+    /** Extra classes on the root `<form>`. */
+    className?: string;
+    /** Inline style on the root `<form>`. */
+    style?: React__default.CSSProperties;
+}
+/**
+ * Unified credit-card form built on the oxygen-ui {@link useForm} Form API.
+ *
+ * One component owns all four fields and their cross-field rules — card number
+ * (brand detection + grouping + Luhn), expiry (`MM/YY`, real month, not past),
+ * CVV (brand-aware length), and cardholder name. It is deliberately NOT shipped
+ * as separate inputs: a CVV or expiry field has no meaning outside a card form.
+ *
+ * Self-contained: render it and handle `onSubmit(card)`; the card is only
+ * delivered once everything validates. Use `onChange` for live updates (e.g. a
+ * card preview) and `hideSubmit` to embed it inside a larger form.
+ *
+ * @example
+ * <CreditCardForm onSubmit={(card) => pay(card)} submitLabel="Pay $49" />
+ */
+declare function CreditCardForm({ onSubmit, onChange, defaultValue, size, disabled, requireName, hideSubmit, submitLabel, className, style, }: CreditCardFormProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Zero-dependency credit-card helpers: brand detection, Luhn checksum, and
+ * display formatting. Pure functions — no React, no deps — so they're unit
+ * testable and reusable.
+ */
+interface CardBrand {
+    /** Stable id, e.g. `'visa'`. */
+    id: string;
+    /** Human label, e.g. `'Visa'`. */
+    label: string;
+    /** Short badge text, e.g. `'VISA'`. */
+    short: string;
+    /** Accent colour for the brand badge (hex). */
+    color: string;
+    /** Matches the leading digits of the card number. */
+    pattern: RegExp;
+    /** Valid total digit lengths for this brand. */
+    lengths: number[];
+    /** Expected CVV length (3 for most, 4 for Amex). */
+    cvv: number;
+    /** Zero-based digit indices to insert a space before (grouping). */
+    gaps: number[];
+}
+/** Recognised brands, in match-priority order. */
+declare const CARD_BRANDS: CardBrand[];
+/** Strip everything but digits. */
+declare const onlyDigits: (s: string) => string;
+/** Detect the card brand from a (possibly partial) number. `null` if unknown. */
+declare function detectBrand(value: string): CardBrand | null;
+/** Luhn (mod-10) checksum — the standard card-number integrity check. */
+declare function luhnValid(value: string): boolean;
+/** Format a card number with brand-aware grouping (e.g. `4242 4242 4242 4242`). */
+declare function formatCardNumber(value: string): string;
+/** Validate a card number: known brand, complete length, passing Luhn. */
+declare function cardNumberError(value: string): string | undefined;
+/** Format expiry keystrokes into `MM/YY`, auto-padding the month and slashing. */
+declare function formatExpiry(value: string): string;
+/** Validate `MM/YY`: well-formed, real month, not in the past. */
+declare function expiryError(value: string, now?: Date): string | undefined;
+/** Validate the CVV against the detected brand's expected length. */
+declare function cvvError(value: string, cardNumber: string): string | undefined;
+
+export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, Button, type ButtonProps, CARD_BRANDS, type CardBrand, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ErrorMap, type ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };