@geomak/ui 5.8.0 → 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 {
     /**
@@ -1801,6 +1823,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 +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.
@@ -1971,6 +1995,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 +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`. */
@@ -2032,6 +2058,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 +2111,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 +2142,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 +2160,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 +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
@@ -2213,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.
@@ -2235,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. */
@@ -2279,6 +2313,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 +2341,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 +2368,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 +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;
@@ -2422,6 +2460,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 +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;
@@ -2493,6 +2533,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 +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;
@@ -2570,6 +2612,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 +2669,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 +2701,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 +2730,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". */
@@ -2805,6 +2851,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 +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;
@@ -2857,6 +2905,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 +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]`
@@ -2937,6 +2987,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 +3017,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 +3044,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 +3072,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 +3105,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 +3120,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 +3153,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 +3173,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 +3204,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 +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;
@@ -3203,6 +3263,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 +3287,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 +3314,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 +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