@geomak/ui 5.5.2 → 5.6.0

package/dist/index.d.ts

@@ -1865,6 +1865,8 @@ interface FieldProps {
     layout?: 'horizontal' | 'vertical';
     /** Show a required asterisk after the label. */
     required?: boolean;
+    /** Contextual help revealed via an info icon + tooltip beside the label. */
+    helperText?: React$1.ReactNode;
     labelStyle?: React$1.CSSProperties;
     /** Width of the label column in horizontal layout (CSS length). */
     labelWidth?: string | number;
@@ -1887,7 +1889,7 @@ interface FieldProps {
  * medium weight so it reads as the anchor, while the input's placeholder is
  * muted — establishing hierarchy without making the label tiny.
  */
-declare function Field({ label, htmlFor, errorId, errorMessage, layout, required, labelStyle, labelWidth, className, children, }: FieldProps): react_jsx_runtime.JSX.Element;
+declare function Field({ label, htmlFor, errorId, errorMessage, layout, required, helperText, labelStyle, labelWidth, className, children, }: FieldProps): react_jsx_runtime.JSX.Element;
 
 interface TextInputProps {
     value?: string;
@@ -1907,6 +1909,8 @@ interface TextInputProps {
     size?: FieldSize;
     onBlur?: React$1.FocusEventHandler<HTMLInputElement>;
     errorMessage?: React$1.ReactNode;
+    /** Contextual help revealed via an info icon + tooltip beside the label. */
+    helperText?: React$1.ReactNode;
     /** Mark the field required (renders an asterisk after the label). */
     required?: boolean;
     /** Optional leading adornment (icon / prefix). */
@@ -1936,7 +1940,7 @@ interface TextInputProps {
  * />
  * ```
  */
-declare function TextInput({ value, onChange, disabled, label, htmlFor, placeholder, name, type, inputStyle, style, layout, size, onBlur, errorMessage, 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, 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`. */
@@ -1960,6 +1964,8 @@ interface NumberInputProps {
     /** Size preset. Default `'md'`. */
     size?: FieldSize;
     errorMessage?: React$1.ReactNode;
+    /** Contextual help revealed via an info icon + tooltip beside the label. */
+    helperText?: React$1.ReactNode;
     required?: boolean;
     inputStyle?: React$1.CSSProperties;
     labelStyle?: React$1.CSSProperties;
@@ -2003,7 +2009,7 @@ interface NumberInputProps {
  * <NumberInput label="Tonnage" step={0.25} precision={2} />
  * ```
  */
-declare function NumberInput({ step, value, onChange, label, htmlFor, name, disabled, layout, size, errorMessage, 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, required, inputStyle, labelStyle, placeholder, style, min, max, readOnly, precision, }: NumberInputProps): react_jsx_runtime.JSX.Element;
 
 interface PasswordProps {
     value?: string;
@@ -2021,6 +2027,8 @@ interface PasswordProps {
     size?: FieldSize;
     onBlur?: React$1.FocusEventHandler<HTMLInputElement>;
     errorMessage?: React$1.ReactNode;
+    /** Contextual help revealed via an info icon + tooltip beside the label. */
+    helperText?: React$1.ReactNode;
     required?: boolean;
     /** Override the "reveal" (password hidden) icon. */
     showIcon?: React$1.ReactNode;
@@ -2036,7 +2044,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, 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, required, showIcon, hideIcon, }: PasswordProps): react_jsx_runtime.JSX.Element;
 
 interface SearchInputProps {
     value?: string;
@@ -2054,6 +2062,8 @@ interface SearchInputProps {
     size?: FieldSize;
     /** Override the leading search icon. */
     icon?: React$1.ReactNode;
+    /** Contextual help revealed via an info icon + tooltip beside the label. */
+    helperText?: React$1.ReactNode;
 }
 /**
  * Search field with a leading magnifier icon. Uses `type="search"` for the
@@ -2095,6 +2105,10 @@ interface CheckboxProps {
      * - In vertical: `'right'` (default) → box then label below; `'left'` → label above then box.
      */
     labelPosition?: 'left' | 'right';
+    /** Contextual help revealed via an info icon + tooltip beside the label. */
+    helperText?: React$1.ReactNode;
+    /** Show a required asterisk after the label. */
+    required?: boolean;
     /** @deprecated Use `checked` */
     value?: boolean;
 }
@@ -2113,7 +2127,7 @@ interface CheckboxProps {
  * />
  */
 declare function Checkbox({ checked, value, // legacy alias
-onChange, label, name, htmlFor, errorMessage, disabled, layout, labelPosition, }: CheckboxProps): react_jsx_runtime.JSX.Element;
+onChange, label, name, htmlFor, errorMessage, disabled, layout, labelPosition, helperText, required, }: CheckboxProps): react_jsx_runtime.JSX.Element;
 
 interface RadioOption {
     /** Stable value submitted / reported on change. */
@@ -2134,12 +2148,23 @@ interface RadioGroupProps {
     onChange?: (value: string) => void;
     name?: string;
     label?: React$1.ReactNode;
-    /** Group orientation. Default `'vertical'`. */
-    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Option arrangement. `'vertical'` (default) stacks options in a column;
+     * `'horizontal'` lays them in a row. Named `layout` for consistency with
+     * the other inputs.
+     */
+    layout?: 'vertical' | 'horizontal';
+    /**
+     * Where each option's label sits relative to its radio dot.
+     * `'right'` (default) → dot then label; `'left'` → label then dot.
+     */
+    labelPosition?: 'left' | 'right';
     /** Size preset — controls the dot + text size. Default `'md'`. */
     size?: FieldSize;
     disabled?: boolean;
     required?: boolean;
+    /** Contextual help revealed via an info icon + tooltip beside the label. */
+    helperText?: React$1.ReactNode;
     errorMessage?: React$1.ReactNode;
 }
 /**
@@ -2165,33 +2190,59 @@ interface RadioGroupProps {
  * />
  * ```
  */
-declare function RadioGroup({ options, value, defaultValue, onChange, name, label, orientation, size, disabled, required, errorMessage, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+declare function RadioGroup({ options, value, defaultValue, onChange, name, label, layout, labelPosition, size, disabled, required, helperText, errorMessage, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
 
 interface SwitchInputProps {
+    /** Controlled on/off state. */
     checked?: boolean;
+    /** Uncontrolled initial state. */
+    defaultChecked?: boolean;
     onChange?: (e: {
         target: {
             checked: boolean;
+            name?: string;
         };
     }) => void;
+    /** Thumb icon shown when on. */
     checkedIcon?: React$1.ReactNode;
+    /** Thumb icon shown when off. */
     uncheckedIcon?: React$1.ReactNode;
+    /**
+     * Central field label, positioned per `layout` (above in vertical, beside
+     * in horizontal) — the same affordance every other input uses.
+     */
+    label?: React$1.ReactNode;
+    /** Label/control orientation. Default `'horizontal'`. */
+    layout?: 'horizontal' | 'vertical';
+    /** Contextual help revealed via an info icon + tooltip beside the label. */
+    helperText?: React$1.ReactNode;
+    /** Label rendered to the left of the track, emphasised while off. */
+    offLabel?: React$1.ReactNode;
+    /** Label rendered to the right of the track, emphasised while on. */
+    onLabel?: React$1.ReactNode;
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    errorMessage?: React$1.ReactNode;
 }
 /**
  * Form switch (on/off toggle) powered by Radix Switch.
  *
- * Radix handles keyboard activation, focus ring, and `role="switch"` ARIA.
- * Accepts optional icon slots for the thumb in checked/unchecked states.
+ * Two labelling modes, usable together or apart:
+ * - **central `label`** positioned by `layout` (the standard field label), and
+ * - **per-state `offLabel` / `onLabel`** flanking the track, each emphasised
+ *   when its state is active (the "Off ▮ On" pattern).
+ *
+ * Form-ready: pass `name` for native serialisation (Radix emits a hidden
+ * input), `errorMessage` for validation, `required` for the asterisk.
  *
- * Emits `{ target: { checked } }` for compatibility with existing handlers.
+ * Works controlled (`checked` + `onChange`) or uncontrolled (`defaultChecked`).
  *
  * @example
- * <Switch
- *   checked={form.enabled}
- *   onChange={({ target }) => setField('enabled', target.checked)}
- * />
+ * <Switch label="Email notifications" checked={on} onChange={({ target }) => setOn(target.checked)} />
+ * <Switch offLabel="Monthly" onLabel="Yearly" checked={yearly} onChange={...} />
  */
-declare function Switch({ checked, onChange, checkedIcon, uncheckedIcon, }: SwitchInputProps): react_jsx_runtime.JSX.Element;
+declare function Switch({ checked, defaultChecked, onChange, checkedIcon, uncheckedIcon, label, layout, helperText, offLabel, onLabel, name, required, disabled, errorMessage, }: SwitchInputProps): react_jsx_runtime.JSX.Element;
 
 interface DropdownItem {
     key: string | number;
@@ -2225,6 +2276,9 @@ interface DropdownProps {
     disabled?: boolean;
     /** Label/input orientation. Defaults to `'vertical'`. */
     layout?: 'horizontal' | 'vertical';
+    /** Contextual help revealed via an info icon + tooltip beside the label. */
+    helperText?: React$1.ReactNode;
+    required?: boolean;
     errorMessage?: React$1.ReactNode;
     style?: React$1.CSSProperties;
     htmlFor?: string;
@@ -2249,7 +2303,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, 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, }: DropdownProps): react_jsx_runtime.JSX.Element;
 
 interface AutoCompleteItem {
     key: string;
@@ -2295,6 +2349,8 @@ interface AutoCompleteProps {
     icon?: React$1.ReactNode;
     /** Validation message — turns the field red and links via aria-describedby. */
     errorMessage?: React$1.ReactNode;
+    /** Contextual help revealed via an info icon + tooltip beside the label. */
+    helperText?: React$1.ReactNode;
     /** Mark required (asterisk after the label). */
     required?: boolean;
     htmlFor?: string;
@@ -2335,7 +2391,7 @@ interface AutoCompleteProps {
  * />
  * ```
  */
-declare function AutoComplete({ disabled, label, placeholder, name, inputStyle, style, layout, items, onSearch, debounce, onItemClick, emptyText, loadingText, size, icon, errorMessage, 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, required, htmlFor, }: AutoCompleteProps): react_jsx_runtime.JSX.Element;
 
 interface TreeSelectNode {
     key: string | number;
@@ -2366,6 +2422,10 @@ interface TreeSelectProps {
     name?: string;
     /** Label/trigger orientation. Defaults to `'horizontal'`. */
     layout?: 'horizontal' | 'vertical';
+    /** Contextual help revealed via an info icon + tooltip beside the label. */
+    helperText?: React$1.ReactNode;
+    /** Show a required asterisk after the label. */
+    required?: boolean;
     disabled?: boolean;
     errorMessage?: React$1.ReactNode;
     style?: React$1.CSSProperties;
@@ -2416,7 +2476,7 @@ interface TreeSelectProps {
  * />
  * ```
  */
-declare function TreeSelect({ label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, placeholder, parentsSelectable, defaultExpandedKeys, size, }: TreeSelectProps): react_jsx_runtime.JSX.Element;
+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;
 
 interface FileInputProps {
     allowMultiple?: boolean;
@@ -2440,6 +2500,8 @@ interface FileInputProps {
     /** Maximum file size in bytes. Files above this are rejected with an error. */
     maxSize?: number;
     errorMessage?: React$1.ReactNode;
+    /** Contextual help revealed via an info icon + tooltip beside the label. */
+    helperText?: React$1.ReactNode;
     disabled?: boolean;
     required?: boolean;
     /** Override the upload glyph in the empty state. */
@@ -2465,7 +2527,7 @@ interface FileInputProps {
  * />
  * ```
  */
-declare function FileInput({ allowMultiple, onChange, name, htmlFor, label, accept, prompt, hint, maxSize, errorMessage, disabled, required, icon, }: FileInputProps): react_jsx_runtime.JSX.Element;
+declare function FileInput({ allowMultiple, onChange, name, htmlFor, label, accept, prompt, hint, maxSize, errorMessage, helperText, disabled, required, icon, }: FileInputProps): react_jsx_runtime.JSX.Element;
 
 interface DatePickerProps {
     /** Current date. `null` / `undefined` means "no date selected". */
@@ -2479,6 +2541,10 @@ interface DatePickerProps {
     name?: string;
     /** Label/trigger orientation. Defaults to `'horizontal'`. */
     layout?: 'horizontal' | 'vertical';
+    /** Contextual help revealed via an info icon + tooltip beside the label. */
+    helperText?: React$1.ReactNode;
+    /** Show a required asterisk after the label. */
+    required?: boolean;
     disabled?: boolean;
     errorMessage?: React$1.ReactNode;
     /** Earliest selectable date. Dates before this render disabled. */
@@ -2534,7 +2600,7 @@ type TemporalPickerProps = DatePickerProps;
  * />
  * ```
  */
-declare function DatePicker({ value, onChange, label, placeholder, htmlFor, name: _name, layout, 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, }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
 interface TextAreaProps {
     value?: string;
@@ -2565,6 +2631,8 @@ interface TextAreaProps {
     /** CSS `resize` behaviour. Default `'vertical'` (or `'none'` when autoGrow). */
     resize?: 'none' | 'vertical' | 'horizontal' | 'both';
     errorMessage?: React$1.ReactNode;
+    /** Contextual help revealed via an info icon + tooltip beside the label. */
+    helperText?: React$1.ReactNode;
     required?: boolean;
     style?: React$1.CSSProperties;
     inputStyle?: React$1.CSSProperties;
@@ -2585,7 +2653,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, 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, required, style, inputStyle, }: TextAreaProps): react_jsx_runtime.JSX.Element;
 
 interface SegmentedOption {
     value: string;
@@ -2605,6 +2673,16 @@ interface SegmentedControlProps {
     /** Stretch to fill the container, segments share the width equally. */
     fullWidth?: boolean;
     disabled?: boolean;
+    /** Optional label, positioned per `layout`. */
+    label?: React$1.ReactNode;
+    /** Label/control orientation. Default `'vertical'`. */
+    layout?: 'horizontal' | 'vertical';
+    /** Contextual help revealed via an info icon + tooltip beside the label. */
+    helperText?: React$1.ReactNode;
+    /** Native form field name (emits a hidden input carrying the value). */
+    name?: string;
+    required?: boolean;
+    errorMessage?: React$1.ReactNode;
     'aria-label'?: string;
 }
 /**
@@ -2617,9 +2695,13 @@ interface SegmentedControlProps {
  * track, the macOS / iOS segmented-control pattern, rendered with the
  * system's tight radii and accent-colored active text.
  *
+ * Form-ready: optional `label` (positioned via `layout`), `helperText`,
+ * `errorMessage`, and a hidden input emitted when `name` is set.
+ *
  * @example
  * ```tsx
  * <SegmentedControl
+ *   label="View"
  *   value={view}
  *   onChange={setView}
  *   options={[
@@ -2630,7 +2712,7 @@ interface SegmentedControlProps {
  * />
  * ```
  */
-declare function SegmentedControl({ options, value, defaultValue, onChange, size, fullWidth, disabled, 'aria-label': ariaLabel, }: SegmentedControlProps): react_jsx_runtime.JSX.Element;
+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;
 
 /**
  * Slider value. A single number for a one-thumb slider, or a `[min, max]`
@@ -2662,6 +2744,10 @@ interface SliderProps {
     size?: FieldSize;
     disabled?: boolean;
     errorMessage?: React$1.ReactNode;
+    /** Contextual help revealed via an info icon + tooltip beside the label. */
+    helperText?: React$1.ReactNode;
+    /** Show a required asterisk after the label. */
+    required?: boolean;
     name?: string;
     htmlFor?: string;
 }
@@ -2686,7 +2772,7 @@ interface SliderProps {
  * />
  * ```
  */
-declare function Slider({ value, defaultValue, onChange, onChangeEnd, min, max, step, label, showValue, formatValue, marks, tooltip, size, disabled, errorMessage, 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, required, name, htmlFor, }: SliderProps): react_jsx_runtime.JSX.Element;
 
 interface TagsInputProps {
     /** Controlled list of tags. */
@@ -2702,6 +2788,8 @@ interface TagsInputProps {
     size?: FieldSize;
     disabled?: boolean;
     errorMessage?: React$1.ReactNode;
+    /** Contextual help revealed via an info icon + tooltip beside the label. */
+    helperText?: React$1.ReactNode;
     required?: boolean;
     /** Maximum number of tags. Further input is ignored once reached. */
     maxTags?: number;
@@ -2727,7 +2815,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, 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, required, maxTags, dedupe, validate, separators, }: TagsInputProps): react_jsx_runtime.JSX.Element;
 
 interface OtpInputProps {
     /** Number of code boxes. Default `6`. */
@@ -2747,6 +2835,10 @@ interface OtpInputProps {
     disabled?: boolean;
     errorMessage?: React$1.ReactNode;
     required?: boolean;
+    /** Label/control orientation. Default `'vertical'`. */
+    layout?: 'horizontal' | 'vertical';
+    /** Contextual help revealed via an info icon + tooltip beside the label. */
+    helperText?: React$1.ReactNode;
     /** Render a visual gap after this many boxes (e.g. `3` → `123 456`). */
     groupAfter?: number;
 }
@@ -2760,7 +2852,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, 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, groupAfter, }: OtpInputProps): react_jsx_runtime.JSX.Element;
 
 interface RatingProps {
     value?: number;
@@ -2781,6 +2873,12 @@ interface RatingProps {
     icon?: (filled: boolean) => React$1.ReactNode;
     errorMessage?: React$1.ReactNode;
     name?: string;
+    /** Label/control orientation. Default `'vertical'`. */
+    layout?: 'horizontal' | 'vertical';
+    /** Contextual help revealed via an info icon + tooltip beside the label. */
+    helperText?: React$1.ReactNode;
+    /** Show a required asterisk after the label. */
+    required?: boolean;
 }
 /**
  * Star (or custom glyph) rating with optional half-steps, hover preview, and
@@ -2797,7 +2895,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, }: RatingProps): react_jsx_runtime.JSX.Element;
+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;
 
 interface TimePickerProps {
     /** Value as `"HH:mm"` (24h) or `"HH:mm:ss"`. `null`/`undefined` = unset. */
@@ -2817,6 +2915,8 @@ interface TimePickerProps {
     minuteStep?: number;
     disabled?: boolean;
     errorMessage?: React$1.ReactNode;
+    /** Contextual help revealed via an info icon + tooltip beside the label. */
+    helperText?: React$1.ReactNode;
     required?: boolean;
     style?: React$1.CSSProperties;
 }
@@ -2830,7 +2930,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, 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, required, style, }: TimePickerProps): react_jsx_runtime.JSX.Element;
 
 interface DateRange {
     start: Date | null;
@@ -2858,6 +2958,8 @@ interface DateRangePickerProps {
     format?: (d: Date) => string;
     disabled?: boolean;
     errorMessage?: React$1.ReactNode;
+    /** Contextual help revealed via an info icon + tooltip beside the label. */
+    helperText?: React$1.ReactNode;
     required?: boolean;
     style?: React$1.CSSProperties;
 }
@@ -2878,7 +2980,7 @@ interface DateRangePickerProps {
  * />
  * ```
  */
-declare function DateRangePicker({ value, onChange, label, htmlFor, placeholder, layout, size, min, max, weekStartsOn, presets, format, disabled, errorMessage, 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, required, style, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
 
 interface ColorPickerProps {
     /** Hex string, e.g. `"#0466c8"`. */
@@ -2895,6 +2997,8 @@ interface ColorPickerProps {
     allowCustom?: boolean;
     disabled?: boolean;
     errorMessage?: React$1.ReactNode;
+    /** Contextual help revealed via an info icon + tooltip beside the label. */
+    helperText?: React$1.ReactNode;
     required?: boolean;
     placeholder?: string;
 }
@@ -2908,6 +3012,6 @@ interface ColorPickerProps {
  * <ColorPicker label="Brand colour" value={color} onChange={setColor} />
  * ```
  */
-declare function ColorPicker({ value, onChange, label, htmlFor, name, layout, size, swatches, allowCustom, disabled, errorMessage, required, placeholder, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
+declare function ColorPicker({ value, onChange, label, htmlFor, name, layout, size, swatches, allowCustom, disabled, errorMessage, helperText, required, placeholder, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
 
 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 ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldProps, type FieldShellOptions, type FieldSize, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, 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, 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, Wizard, type WizardProps, type WizardStep, fieldShell, useNotification };