@geomak/ui 5.8.0 → 5.10.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;
@@ -699,6 +707,8 @@ interface TooltipProps {
     delayDuration?: number;
     /** Offset from trigger in px (default 8) */
     sideOffset?: number;
+    /** Extra classes merged onto the tooltip content bubble. */
+    className?: string;
 }
 /**
  * Tooltip powered by Radix Tooltip.
@@ -715,7 +725,7 @@ interface TooltipProps {
  *   </Tooltip>
  * </TooltipProvider>
  */
-declare function Tooltip({ children, title, placement, delayDuration, sideOffset, }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ children, title, placement, delayDuration, sideOffset, className, }: TooltipProps): react_jsx_runtime.JSX.Element;
 
 declare const TooltipProvider: React__default.FC<TooltipPrimitive.TooltipProviderProps>;
 
@@ -771,6 +781,10 @@ interface TreeProps {
     onNodeClick: (payload: TreeItemClickPayload) => void;
     defaultExpandAll?: boolean;
     defaultExpandedKeys?: string[];
+    /** Extra classes merged onto the tree root. */
+    className?: string;
+    /** Inline style on the tree root. */
+    style?: React__default.CSSProperties;
 }
 /** ─────────────────── public component ─────────────────── */
 /**
@@ -787,7 +801,7 @@ interface TreeProps {
  *   defaultExpandAll
  * />
  */
-declare function Tree({ nodes, onNodeClick, defaultExpandAll, defaultExpandedKeys, }: TreeProps): react_jsx_runtime.JSX.Element;
+declare function Tree({ nodes, onNodeClick, defaultExpandAll, defaultExpandedKeys, className, style, }: TreeProps): react_jsx_runtime.JSX.Element;
 
 /** ─────────────────── types ─────────────────── */
 type NotificationType = 'info' | 'success' | 'warning' | 'danger';
@@ -865,6 +879,8 @@ interface LoadingSpinnerProps {
      * previous state. Ignored when `inline` is true.
      */
     backdropOpacity?: number;
+    /** Extra classes merged onto the spinner root. */
+    className?: string;
 }
 /**
  * Enterprise-grade loading indicator.
@@ -909,7 +925,7 @@ interface LoadingSpinnerProps {
  * />
  * ```
  */
-declare function LoadingSpinner({ prompt, size, inline, spinnerColor, textColor, backdropOpacity, }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
+declare function LoadingSpinner({ prompt, size, inline, spinnerColor, textColor, backdropOpacity, className, }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
 
 interface FadingBaseProps {
     className?: string;
@@ -959,6 +975,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 +1018,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%'`. */
@@ -1027,6 +1047,8 @@ interface ScalableContainerProps {
      * Default `'top-right'` — matches the OS-window convention.
      */
     togglePosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Extra classes merged onto the container root. */
+    className?: string;
 }
 /**
  * Container that smoothly expands to fill its parent on click and
@@ -1053,7 +1075,7 @@ interface ScalableContainerProps {
  * </ScalableContainer>
  * ```
  */
-declare function ScalableContainer({ width, height, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
+declare function ScalableContainer({ width, height, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, className, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
 
 interface GridCardItem {
     key: string | number;
@@ -1071,6 +1093,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,13 +1109,15 @@ 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;
     isRight?: boolean;
     buttonText?: string;
     onOpen?: (item: GridCardItem) => void;
+    /** Extra classes merged onto the card root. */
+    className?: string;
 }
 /**
  * Opaque carousel variant of GridCard (left or right edge of the carousel).
@@ -1100,29 +1128,33 @@ interface OpaqueGridCardProps {
  * @example
  * <OpaqueGridCard item={sideItem} isRight onOpen={({ to }) => navigate(to!)} />
  */
-declare function OpaqueGridCard({ item, isRight, buttonText, onOpen, }: OpaqueGridCardProps): react_jsx_runtime.JSX.Element;
+declare function OpaqueGridCard({ item, isRight, buttonText, onOpen, className, }: OpaqueGridCardProps): react_jsx_runtime.JSX.Element;
 
 interface CatalogGridProps {
     items: GridCardItem[];
     buttonText?: string;
     onOpen?: (item: GridCardItem) => void;
+    /** Extra classes merged onto the grid root. */
+    className?: string;
 }
 /**
  * Wrapping flex grid of `GridCard` tiles.
  */
-declare function CatalogGrid({ items, buttonText, onOpen }: CatalogGridProps): react_jsx_runtime.JSX.Element;
+declare function CatalogGrid({ items, buttonText, onOpen, className }: CatalogGridProps): react_jsx_runtime.JSX.Element;
 
 interface CatalogCarouselProps {
     items: GridCardItem[];
     buttonText?: string;
     onOpen?: (item: GridCardItem) => void;
+    /** Extra classes merged onto the carousel root. */
+    className?: string;
 }
 /**
  * Three-card carousel (previous → active (scaled) → next).
  *
  * Decoupled from ThemeContext — uses CSS `dark:` classes.
  */
-declare function CatalogCarousel({ items, buttonText, onOpen }: CatalogCarouselProps): react_jsx_runtime.JSX.Element;
+declare function CatalogCarousel({ items, buttonText, onOpen, className }: CatalogCarouselProps): react_jsx_runtime.JSX.Element;
 
 interface CatalogProps {
     /** 'grid' | 'carousel' */
@@ -1130,6 +1162,8 @@ interface CatalogProps {
     items?: GridCardItem[];
     buttonText?: string;
     onOpen?: (item: GridCardItem) => void;
+    /** Extra classes merged onto the catalog root. */
+    className?: string;
 }
 /**
  * Switches between grid and carousel layouts for a list of application tiles.
@@ -1137,7 +1171,7 @@ interface CatalogProps {
  * @example
  * <Catalog display="carousel" items={apps} onOpen={({ to }) => navigate(to!)} />
  */
-declare function Catalog({ display, items, buttonText, onOpen }: CatalogProps): react_jsx_runtime.JSX.Element;
+declare function Catalog({ display, items, buttonText, onOpen, className }: CatalogProps): react_jsx_runtime.JSX.Element;
 
 /**
  * A single action in the context menu.
@@ -1168,6 +1202,8 @@ interface ContextMenuProps {
      * component / div / image — anything you can right-click on.
      */
     children: React__default.ReactNode;
+    /** Extra classes merged onto the menu content panel. */
+    className?: string;
 }
 /**
  * Right-click context menu, built on `@radix-ui/react-context-menu`.
@@ -1206,7 +1242,7 @@ interface ContextMenuProps {
  * </ContextMenu>
  * ```
  */
-declare function ContextMenu({ items, children }: ContextMenuProps): react_jsx_runtime.JSX.Element;
+declare function ContextMenu({ items, children, className }: ContextMenuProps): react_jsx_runtime.JSX.Element;
 /** @deprecated The Radix rewrite positions the menu automatically — no coordinates needed. */
 interface ContextMenuPosition {
     x: number;
@@ -1376,6 +1412,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 +1458,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;
@@ -1429,6 +1469,8 @@ interface ThemeSwitchProps {
     }) => void;
     /** Optional accessible label (defaults to "Toggle dark mode") */
     label?: string;
+    /** Extra classes merged onto the root label. */
+    className?: string;
 }
 /**
  * Theme (dark-mode) toggle switch powered by Radix Switch.
@@ -1440,7 +1482,7 @@ interface ThemeSwitchProps {
  * @example
  * <ThemeSwitch checked={isDark} onChange={({ target }) => setDark(target.checked)} />
  */
-declare function ThemeSwitch({ checked, onChange, label }: ThemeSwitchProps): react_jsx_runtime.JSX.Element;
+declare function ThemeSwitch({ checked, onChange, label, className }: ThemeSwitchProps): react_jsx_runtime.JSX.Element;
 
 interface TopBarProps {
     /** Brand area — logo, wordmark, or app name. Rendered on the leading edge. */
@@ -1515,6 +1557,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 +1576,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 {
     /**
@@ -1801,6 +1845,8 @@ interface ButtonProps {
     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. */
@@ -1822,7 +1868,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.
@@ -1971,6 +2017,8 @@ interface TextInputProps {
     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). */
@@ -2001,7 +2049,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`. */
@@ -2032,6 +2080,8 @@ interface NumberInputProps {
     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. */
@@ -2083,7 +2133,7 @@ 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. */
@@ -2114,6 +2164,8 @@ interface PasswordProps {
     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. */
@@ -2130,7 +2182,7 @@ 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. */
@@ -2159,6 +2211,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
@@ -2213,6 +2267,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.
@@ -2235,7 +2291,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. */
@@ -2279,6 +2335,8 @@ interface RadioGroupProps {
     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;
 }
@@ -2305,7 +2363,7 @@ 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. */
@@ -2332,6 +2390,8 @@ 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. */
@@ -2362,7 +2422,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;
@@ -2422,6 +2482,8 @@ interface DropdownProps {
     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.
@@ -2438,7 +2500,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;
@@ -2493,6 +2555,8 @@ 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. */
@@ -2534,7 +2598,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;
@@ -2570,6 +2634,8 @@ interface TreeSelectProps {
     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. */
@@ -2625,7 +2691,7 @@ 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. */
@@ -2657,6 +2723,8 @@ interface FileInputProps {
     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. */
@@ -2684,7 +2752,7 @@ 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". */
@@ -2726,6 +2794,8 @@ interface DatePickerProps {
     clearable?: boolean;
     /** Size preset. Default `'md'`. */
     size?: FieldSize;
+    /** Extra classes merged onto the component root. */
+    className?: string;
 }
 type TemporalPickerProps = DatePickerProps;
 /**
@@ -2763,7 +2833,7 @@ 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;
+declare function DatePicker({ value, onChange, label, placeholder, htmlFor, name: _name, layout, helperText, required, disabled, errorMessage, min, max, style, format, weekStartsOn, clearable, size, className, }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
 interface TextAreaProps {
     /** Controlled value. */
@@ -2805,6 +2875,8 @@ interface TextAreaProps {
     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. */
@@ -2828,7 +2900,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;
@@ -2857,6 +2929,8 @@ 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. */
@@ -2893,7 +2967,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]`
@@ -2937,6 +3011,8 @@ interface SliderProps {
     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). */
@@ -2965,7 +3041,7 @@ 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. */
@@ -2992,6 +3068,8 @@ interface TagsInputProps {
     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. */
@@ -3018,7 +3096,7 @@ 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`. */
@@ -3051,6 +3129,8 @@ interface OtpInputProps {
     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;
 }
@@ -3064,7 +3144,7 @@ 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. */
@@ -3097,6 +3177,8 @@ interface RatingProps {
     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;
 }
@@ -3115,7 +3197,7 @@ 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. */
@@ -3146,6 +3228,8 @@ interface TimePickerProps {
     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. */
@@ -3161,7 +3245,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;
@@ -3203,6 +3287,8 @@ interface DateRangePickerProps {
     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. */
@@ -3225,7 +3311,7 @@ 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"`. */
@@ -3252,6 +3338,8 @@ interface ColorPickerProps {
     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. */
@@ -3267,7 +3355,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