@geomak/ui 5.4.0 → 5.5.1

package/dist/index.d.cts

@@ -2102,6 +2102,18 @@ interface CheckboxProps {
     htmlFor?: string;
     errorMessage?: React$1.ReactNode;
     disabled?: boolean;
+    /**
+     * Box + label arrangement.
+     * - `'horizontal'` (default): box and label on one row.
+     * - `'vertical'`: box and label stacked.
+     */
+    layout?: 'horizontal' | 'vertical';
+    /**
+     * Where the label sits relative to the box.
+     * - In horizontal: `'right'` (default) → box then label; `'left'` → label then box.
+     * - In vertical: `'right'` (default) → box then label below; `'left'` → label above then box.
+     */
+    labelPosition?: 'left' | 'right';
     /** @deprecated Use `checked` */
     value?: boolean;
 }
@@ -2120,7 +2132,7 @@ interface CheckboxProps {
  * />
  */
 declare function Checkbox({ checked, value, // legacy alias
-onChange, label, name, htmlFor, errorMessage, disabled, }: CheckboxProps): react_jsx_runtime.JSX.Element;
+onChange, label, name, htmlFor, errorMessage, disabled, layout, labelPosition, }: CheckboxProps): react_jsx_runtime.JSX.Element;
 
 interface RadioOption {
     /** Stable value submitted / reported on change. */
@@ -2232,13 +2244,6 @@ interface DropdownProps {
     disabled?: boolean;
     /** Label/input orientation. Defaults to `'vertical'`. */
     layout?: 'horizontal' | 'vertical';
-    /**
-     * Show a "+N more" pill alongside the first selected item in multiselect
-     * mode. Defaults to `false` — a single pill is shown with the first
-     * selection and consumers typically open the dropdown to see the rest.
-     * Set `true` if you want the count visible on the trigger.
-     */
-    showSelectedCount?: boolean;
     errorMessage?: React$1.ReactNode;
     style?: React$1.CSSProperties;
     htmlFor?: string;
@@ -2263,7 +2268,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, showSelectedCount, size, }: DropdownProps): react_jsx_runtime.JSX.Element;
+declare function Dropdown({ isMultiselect, hasSearch, label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, labelStyle, placeholder, size, }: DropdownProps): react_jsx_runtime.JSX.Element;
 
 interface AutoCompleteItem {
     key: string;
@@ -2307,6 +2312,11 @@ interface AutoCompleteProps {
     size?: FieldSize;
     /** Override the leading search icon (hidden while loading). */
     icon?: React$1.ReactNode;
+    /** Validation message — turns the field red and links via aria-describedby. */
+    errorMessage?: React$1.ReactNode;
+    /** Mark required (asterisk after the label). */
+    required?: boolean;
+    htmlFor?: string;
 }
 /**
  * Search-as-you-type autocomplete powered by Radix Popover. Supports two
@@ -2344,7 +2354,7 @@ interface AutoCompleteProps {
  * />
  * ```
  */
-declare function AutoComplete({ disabled, label, placeholder, name, inputStyle, style, layout, items, onSearch, debounce, onItemClick, emptyText, loadingText, size, icon, }: 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, required, htmlFor, }: AutoCompleteProps): react_jsx_runtime.JSX.Element;
 
 interface TreeSelectNode {
     key: string | number;
@@ -2738,4 +2748,185 @@ interface TagsInputProps {
  */
 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;
 
-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, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, 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, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, 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, ToggleButton, type ToggleButtonProps, type ToggleItem, 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 };
+interface OtpInputProps {
+    /** Number of code boxes. Default `6`. */
+    length?: number;
+    value?: string;
+    onChange?: (code: string) => void;
+    /** Fired when every box is filled. */
+    onComplete?: (code: string) => void;
+    label?: React$1.ReactNode;
+    htmlFor?: string;
+    name?: string;
+    /** `'numeric'` (default) restricts to digits; `'alphanumeric'` allows letters too. */
+    mode?: 'numeric' | 'alphanumeric';
+    /** Render boxes as masked dots (for PIN entry). */
+    masked?: boolean;
+    size?: FieldSize;
+    disabled?: boolean;
+    errorMessage?: React$1.ReactNode;
+    required?: boolean;
+    /** Render a visual gap after this many boxes (e.g. `3` → `123 456`). */
+    groupAfter?: number;
+}
+/**
+ * Segmented one-time-code / PIN input. Auto-advances as the user types,
+ * Backspace retreats, and pasting a code spreads it across the boxes. Set
+ * `masked` for PIN entry, `mode="alphanumeric"` for letter codes.
+ *
+ * @example
+ * ```tsx
+ * <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;
+
+interface RatingProps {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    /** Number of icons. Default `5`. */
+    count?: number;
+    /** Allow half-icon precision. Default `false`. */
+    allowHalf?: boolean;
+    /** Read-only display (no hover / click). */
+    readOnly?: boolean;
+    /** Clicking the current value again clears to 0. Default `true`. */
+    clearable?: boolean;
+    label?: React$1.ReactNode;
+    size?: FieldSize;
+    disabled?: boolean;
+    /** Override the icon. Receives a `filled` flag. Default is a star. */
+    icon?: (filled: boolean) => React$1.ReactNode;
+    errorMessage?: React$1.ReactNode;
+    name?: string;
+}
+/**
+ * Star (or custom glyph) rating with optional half-steps, hover preview, and
+ * read-only mode. Keyboard accessible: arrow keys adjust, Home/End jump to
+ * min/max.
+ *
+ * @example
+ * ```tsx
+ * <Rating label="Quality" value={rating} onChange={setRating} allowHalf />
+ * ```
+ *
+ * @example Read-only display
+ * ```tsx
+ * <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;
+
+interface TimePickerProps {
+    /** Value as `"HH:mm"` (24h) or `"HH:mm:ss"`. `null`/`undefined` = unset. */
+    value?: string | null;
+    onChange?: (value: string | null) => void;
+    label?: React$1.ReactNode;
+    htmlFor?: string;
+    name?: string;
+    placeholder?: string;
+    layout?: 'horizontal' | 'vertical';
+    size?: FieldSize;
+    /** Display in 12-hour format with AM/PM (value stays 24h `"HH:mm"`). */
+    use12Hours?: boolean;
+    /** Include a seconds column. Default `false`. */
+    withSeconds?: boolean;
+    /** Minute step. Default `1`. Use `5` / `15` for coarse pickers. */
+    minuteStep?: number;
+    disabled?: boolean;
+    errorMessage?: React$1.ReactNode;
+    required?: boolean;
+    style?: React$1.CSSProperties;
+}
+/**
+ * Time picker with scrollable hour / minute (/ second) columns in a popover.
+ * Value is a 24-hour `"HH:mm"` (or `"HH:mm:ss"`) string regardless of whether
+ * the display is 12- or 24-hour, so it's stable to store and submit.
+ *
+ * @example
+ * ```tsx
+ * <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;
+
+interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+interface DateRangePreset {
+    label: string;
+    /** Returns the range when clicked. */
+    range: () => DateRange;
+}
+interface DateRangePickerProps {
+    value?: DateRange;
+    onChange?: (range: DateRange) => void;
+    label?: React$1.ReactNode;
+    htmlFor?: string;
+    placeholder?: string;
+    layout?: 'horizontal' | 'vertical';
+    size?: FieldSize;
+    min?: Date;
+    max?: Date;
+    /** 0 = Sunday, 1 = Monday. Default `0`. */
+    weekStartsOn?: 0 | 1;
+    /** Quick-select presets shown in a rail beside the calendars. */
+    presets?: DateRangePreset[];
+    format?: (d: Date) => string;
+    disabled?: boolean;
+    errorMessage?: React$1.ReactNode;
+    required?: boolean;
+    style?: React$1.CSSProperties;
+}
+/**
+ * Two-month range date picker. Click a start date, then an end date; the span
+ * between highlights as you hover. Optional quick-select presets (Today,
+ * Last 7 days, This month, etc.) in a side rail.
+ *
+ * @example
+ * ```tsx
+ * <DateRangePicker
+ *   label="Reporting period"
+ *   value={range}
+ *   onChange={setRange}
+ *   presets={[
+ *     { label: 'Last 7 days', range: () => ({ start: addDays(new Date(), -6), end: new Date() }) },
+ *   ]}
+ * />
+ * ```
+ */
+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;
+
+interface ColorPickerProps {
+    /** Hex string, e.g. `"#0466c8"`. */
+    value?: string;
+    onChange?: (hex: string) => void;
+    label?: React$1.ReactNode;
+    htmlFor?: string;
+    name?: string;
+    layout?: 'horizontal' | 'vertical';
+    size?: FieldSize;
+    /** Preset swatches shown in the popover. Defaults to a balanced 12-color set. */
+    swatches?: string[];
+    /** Show the native eyedropper / full picker fallback via `<input type="color">`. Default `true`. */
+    allowCustom?: boolean;
+    disabled?: boolean;
+    errorMessage?: React$1.ReactNode;
+    required?: boolean;
+    placeholder?: string;
+}
+/**
+ * Color picker: a swatch trigger that opens a popover with preset swatches, a
+ * hex input, and (optionally) the native full picker for custom colors. Value
+ * is a hex string, easy to store and submit.
+ *
+ * @example
+ * ```tsx
+ * <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;
+
+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, ToggleButton, type ToggleButtonProps, type ToggleItem, 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 };

package/dist/index.d.ts

@@ -2102,6 +2102,18 @@ interface CheckboxProps {
     htmlFor?: string;
     errorMessage?: React$1.ReactNode;
     disabled?: boolean;
+    /**
+     * Box + label arrangement.
+     * - `'horizontal'` (default): box and label on one row.
+     * - `'vertical'`: box and label stacked.
+     */
+    layout?: 'horizontal' | 'vertical';
+    /**
+     * Where the label sits relative to the box.
+     * - In horizontal: `'right'` (default) → box then label; `'left'` → label then box.
+     * - In vertical: `'right'` (default) → box then label below; `'left'` → label above then box.
+     */
+    labelPosition?: 'left' | 'right';
     /** @deprecated Use `checked` */
     value?: boolean;
 }
@@ -2120,7 +2132,7 @@ interface CheckboxProps {
  * />
  */
 declare function Checkbox({ checked, value, // legacy alias
-onChange, label, name, htmlFor, errorMessage, disabled, }: CheckboxProps): react_jsx_runtime.JSX.Element;
+onChange, label, name, htmlFor, errorMessage, disabled, layout, labelPosition, }: CheckboxProps): react_jsx_runtime.JSX.Element;
 
 interface RadioOption {
     /** Stable value submitted / reported on change. */
@@ -2232,13 +2244,6 @@ interface DropdownProps {
     disabled?: boolean;
     /** Label/input orientation. Defaults to `'vertical'`. */
     layout?: 'horizontal' | 'vertical';
-    /**
-     * Show a "+N more" pill alongside the first selected item in multiselect
-     * mode. Defaults to `false` — a single pill is shown with the first
-     * selection and consumers typically open the dropdown to see the rest.
-     * Set `true` if you want the count visible on the trigger.
-     */
-    showSelectedCount?: boolean;
     errorMessage?: React$1.ReactNode;
     style?: React$1.CSSProperties;
     htmlFor?: string;
@@ -2263,7 +2268,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, showSelectedCount, size, }: DropdownProps): react_jsx_runtime.JSX.Element;
+declare function Dropdown({ isMultiselect, hasSearch, label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, labelStyle, placeholder, size, }: DropdownProps): react_jsx_runtime.JSX.Element;
 
 interface AutoCompleteItem {
     key: string;
@@ -2307,6 +2312,11 @@ interface AutoCompleteProps {
     size?: FieldSize;
     /** Override the leading search icon (hidden while loading). */
     icon?: React$1.ReactNode;
+    /** Validation message — turns the field red and links via aria-describedby. */
+    errorMessage?: React$1.ReactNode;
+    /** Mark required (asterisk after the label). */
+    required?: boolean;
+    htmlFor?: string;
 }
 /**
  * Search-as-you-type autocomplete powered by Radix Popover. Supports two
@@ -2344,7 +2354,7 @@ interface AutoCompleteProps {
  * />
  * ```
  */
-declare function AutoComplete({ disabled, label, placeholder, name, inputStyle, style, layout, items, onSearch, debounce, onItemClick, emptyText, loadingText, size, icon, }: 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, required, htmlFor, }: AutoCompleteProps): react_jsx_runtime.JSX.Element;
 
 interface TreeSelectNode {
     key: string | number;
@@ -2738,4 +2748,185 @@ interface TagsInputProps {
  */
 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;
 
-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, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, 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, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, 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, ToggleButton, type ToggleButtonProps, type ToggleItem, 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 };
+interface OtpInputProps {
+    /** Number of code boxes. Default `6`. */
+    length?: number;
+    value?: string;
+    onChange?: (code: string) => void;
+    /** Fired when every box is filled. */
+    onComplete?: (code: string) => void;
+    label?: React$1.ReactNode;
+    htmlFor?: string;
+    name?: string;
+    /** `'numeric'` (default) restricts to digits; `'alphanumeric'` allows letters too. */
+    mode?: 'numeric' | 'alphanumeric';
+    /** Render boxes as masked dots (for PIN entry). */
+    masked?: boolean;
+    size?: FieldSize;
+    disabled?: boolean;
+    errorMessage?: React$1.ReactNode;
+    required?: boolean;
+    /** Render a visual gap after this many boxes (e.g. `3` → `123 456`). */
+    groupAfter?: number;
+}
+/**
+ * Segmented one-time-code / PIN input. Auto-advances as the user types,
+ * Backspace retreats, and pasting a code spreads it across the boxes. Set
+ * `masked` for PIN entry, `mode="alphanumeric"` for letter codes.
+ *
+ * @example
+ * ```tsx
+ * <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;
+
+interface RatingProps {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    /** Number of icons. Default `5`. */
+    count?: number;
+    /** Allow half-icon precision. Default `false`. */
+    allowHalf?: boolean;
+    /** Read-only display (no hover / click). */
+    readOnly?: boolean;
+    /** Clicking the current value again clears to 0. Default `true`. */
+    clearable?: boolean;
+    label?: React$1.ReactNode;
+    size?: FieldSize;
+    disabled?: boolean;
+    /** Override the icon. Receives a `filled` flag. Default is a star. */
+    icon?: (filled: boolean) => React$1.ReactNode;
+    errorMessage?: React$1.ReactNode;
+    name?: string;
+}
+/**
+ * Star (or custom glyph) rating with optional half-steps, hover preview, and
+ * read-only mode. Keyboard accessible: arrow keys adjust, Home/End jump to
+ * min/max.
+ *
+ * @example
+ * ```tsx
+ * <Rating label="Quality" value={rating} onChange={setRating} allowHalf />
+ * ```
+ *
+ * @example Read-only display
+ * ```tsx
+ * <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;
+
+interface TimePickerProps {
+    /** Value as `"HH:mm"` (24h) or `"HH:mm:ss"`. `null`/`undefined` = unset. */
+    value?: string | null;
+    onChange?: (value: string | null) => void;
+    label?: React$1.ReactNode;
+    htmlFor?: string;
+    name?: string;
+    placeholder?: string;
+    layout?: 'horizontal' | 'vertical';
+    size?: FieldSize;
+    /** Display in 12-hour format with AM/PM (value stays 24h `"HH:mm"`). */
+    use12Hours?: boolean;
+    /** Include a seconds column. Default `false`. */
+    withSeconds?: boolean;
+    /** Minute step. Default `1`. Use `5` / `15` for coarse pickers. */
+    minuteStep?: number;
+    disabled?: boolean;
+    errorMessage?: React$1.ReactNode;
+    required?: boolean;
+    style?: React$1.CSSProperties;
+}
+/**
+ * Time picker with scrollable hour / minute (/ second) columns in a popover.
+ * Value is a 24-hour `"HH:mm"` (or `"HH:mm:ss"`) string regardless of whether
+ * the display is 12- or 24-hour, so it's stable to store and submit.
+ *
+ * @example
+ * ```tsx
+ * <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;
+
+interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+interface DateRangePreset {
+    label: string;
+    /** Returns the range when clicked. */
+    range: () => DateRange;
+}
+interface DateRangePickerProps {
+    value?: DateRange;
+    onChange?: (range: DateRange) => void;
+    label?: React$1.ReactNode;
+    htmlFor?: string;
+    placeholder?: string;
+    layout?: 'horizontal' | 'vertical';
+    size?: FieldSize;
+    min?: Date;
+    max?: Date;
+    /** 0 = Sunday, 1 = Monday. Default `0`. */
+    weekStartsOn?: 0 | 1;
+    /** Quick-select presets shown in a rail beside the calendars. */
+    presets?: DateRangePreset[];
+    format?: (d: Date) => string;
+    disabled?: boolean;
+    errorMessage?: React$1.ReactNode;
+    required?: boolean;
+    style?: React$1.CSSProperties;
+}
+/**
+ * Two-month range date picker. Click a start date, then an end date; the span
+ * between highlights as you hover. Optional quick-select presets (Today,
+ * Last 7 days, This month, etc.) in a side rail.
+ *
+ * @example
+ * ```tsx
+ * <DateRangePicker
+ *   label="Reporting period"
+ *   value={range}
+ *   onChange={setRange}
+ *   presets={[
+ *     { label: 'Last 7 days', range: () => ({ start: addDays(new Date(), -6), end: new Date() }) },
+ *   ]}
+ * />
+ * ```
+ */
+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;
+
+interface ColorPickerProps {
+    /** Hex string, e.g. `"#0466c8"`. */
+    value?: string;
+    onChange?: (hex: string) => void;
+    label?: React$1.ReactNode;
+    htmlFor?: string;
+    name?: string;
+    layout?: 'horizontal' | 'vertical';
+    size?: FieldSize;
+    /** Preset swatches shown in the popover. Defaults to a balanced 12-color set. */
+    swatches?: string[];
+    /** Show the native eyedropper / full picker fallback via `<input type="color">`. Default `true`. */
+    allowCustom?: boolean;
+    disabled?: boolean;
+    errorMessage?: React$1.ReactNode;
+    required?: boolean;
+    placeholder?: string;
+}
+/**
+ * Color picker: a swatch trigger that opens a popover with preset swatches, a
+ * hex input, and (optionally) the native full picker for custom colors. Value
+ * is a hex string, easy to store and submit.
+ *
+ * @example
+ * ```tsx
+ * <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;
+
+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, ToggleButton, type ToggleButtonProps, type ToggleItem, 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 };