@geomak/ui 5.3.0 → 5.5.0

package/dist/index.d.ts

@@ -2545,4 +2545,378 @@ 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;
 
-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, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, type Spacing, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, DatePicker as Temporal, type TemporalPickerProps, 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 TextAreaProps {
+    value?: string;
+    onChange?: React$1.ChangeEventHandler<HTMLTextAreaElement>;
+    onBlur?: React$1.FocusEventHandler<HTMLTextAreaElement>;
+    disabled?: boolean;
+    label?: React$1.ReactNode;
+    htmlFor?: string;
+    placeholder?: string;
+    name?: string;
+    /** Label/control orientation. Default `'vertical'`. */
+    layout?: 'horizontal' | 'vertical';
+    /** Size preset — controls text size + padding. Default `'md'`. */
+    size?: FieldSize;
+    /** Visible rows when not auto-growing. Default `4`. */
+    rows?: number;
+    /**
+     * Grow the textarea to fit its content instead of scrolling. When set, the
+     * field expands between `rows` (min) and `maxRows` (cap, then scrolls).
+     */
+    autoGrow?: boolean;
+    /** Max rows when `autoGrow` is on. Default `12`. */
+    maxRows?: number;
+    /** Native maxlength. When set with `showCount`, a live counter renders. */
+    maxLength?: number;
+    /** Show a character counter (uses `maxLength` as the denominator if present). */
+    showCount?: boolean;
+    /** CSS `resize` behaviour. Default `'vertical'` (or `'none'` when autoGrow). */
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    errorMessage?: React$1.ReactNode;
+    required?: boolean;
+    style?: React$1.CSSProperties;
+    inputStyle?: React$1.CSSProperties;
+}
+/**
+ * Multi-line text input on the shared field foundation. Optional auto-grow
+ * (expands with content between `rows` and `maxRows`), character counter, and
+ * resize control. Same refined Halo Focus and error handling as the other
+ * inputs.
+ *
+ * @example
+ * ```tsx
+ * <TextArea label="Notes" value={notes} onChange={(e) => setNotes(e.target.value)} autoGrow />
+ * ```
+ *
+ * @example With counter
+ * ```tsx
+ * <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;
+
+interface SegmentedOption {
+    value: string;
+    label: React$1.ReactNode;
+    icon?: React$1.ReactNode;
+    disabled?: boolean;
+}
+interface SegmentedControlProps {
+    options: SegmentedOption[];
+    /** Controlled selected value. */
+    value?: string;
+    /** Uncontrolled initial value. */
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** Size preset. Default `'md'`. */
+    size?: FieldSize;
+    /** Stretch to fill the container, segments share the width equally. */
+    fullWidth?: boolean;
+    disabled?: boolean;
+    'aria-label'?: string;
+}
+/**
+ * Text-first segmented control for 2 to 4 mutually exclusive options
+ * (view switchers, billing period, density). Built on
+ * `@radix-ui/react-toggle-group` (single, non-deselectable) so arrow-key
+ * roving focus comes for free.
+ *
+ * The selected segment lifts onto a surface-white "pill" inside a tinted
+ * track, the macOS / iOS segmented-control pattern, rendered with the
+ * system's tight radii and accent-colored active text.
+ *
+ * @example
+ * ```tsx
+ * <SegmentedControl
+ *   value={view}
+ *   onChange={setView}
+ *   options={[
+ *     { value: 'list', label: 'List' },
+ *     { value: 'board', label: 'Board' },
+ *     { value: 'calendar', label: 'Calendar' },
+ *   ]}
+ * />
+ * ```
+ */
+declare function SegmentedControl({ options, value, defaultValue, onChange, size, fullWidth, disabled, 'aria-label': ariaLabel, }: SegmentedControlProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Slider value. A single number for a one-thumb slider, or a `[min, max]`
+ * tuple for a two-thumb range slider. The shape you pass determines the mode.
+ */
+type SliderValue = number | [number, number];
+interface SliderMark {
+    value: number;
+    label?: React$1.ReactNode;
+}
+interface SliderProps {
+    value?: SliderValue;
+    defaultValue?: SliderValue;
+    onChange?: (value: SliderValue) => void;
+    /** Fired once at the end of a drag/keyboard interaction. */
+    onChangeEnd?: (value: SliderValue) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: React$1.ReactNode;
+    /** Show the current value(s) next to the label. */
+    showValue?: boolean;
+    /** Format the displayed value (tooltip + value readout). */
+    formatValue?: (n: number) => string;
+    /** Tick marks under the track. */
+    marks?: SliderMark[];
+    /** Show a value tooltip above the thumb while dragging. */
+    tooltip?: boolean;
+    size?: FieldSize;
+    disabled?: boolean;
+    errorMessage?: React$1.ReactNode;
+    name?: string;
+    htmlFor?: string;
+}
+/**
+ * Range slider on `@radix-ui/react-slider`. Pass a single number for a
+ * one-thumb slider or a `[min, max]` tuple for a two-thumb range. Optional
+ * tick marks, a drag tooltip, and a value readout beside the label.
+ *
+ * @example Single
+ * ```tsx
+ * <Slider label="Volume" value={vol} onChange={(v) => setVol(v as number)} showValue />
+ * ```
+ *
+ * @example Range with marks
+ * ```tsx
+ * <Slider
+ *   label="Price"
+ *   value={[20, 80]}
+ *   onChange={(v) => setRange(v as [number, number])}
+ *   marks={[{ value: 0, label: '$0' }, { value: 50, label: '$50' }, { value: 100, label: '$100' }]}
+ *   tooltip
+ * />
+ * ```
+ */
+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;
+
+interface TagsInputProps {
+    /** Controlled list of tags. */
+    value?: string[];
+    /** Uncontrolled initial tags. */
+    defaultValue?: string[];
+    onChange?: (tags: string[]) => void;
+    label?: React$1.ReactNode;
+    htmlFor?: string;
+    name?: string;
+    placeholder?: string;
+    layout?: 'horizontal' | 'vertical';
+    size?: FieldSize;
+    disabled?: boolean;
+    errorMessage?: React$1.ReactNode;
+    required?: boolean;
+    /** Maximum number of tags. Further input is ignored once reached. */
+    maxTags?: number;
+    /** Reject duplicate tags (case-insensitive). Default `true`. */
+    dedupe?: boolean;
+    /**
+     * Validate a candidate tag before adding. Return `false` (or a string error
+     * to surface) to reject. Receives the trimmed candidate + current tags.
+     */
+    validate?: (tag: string, tags: string[]) => boolean | string;
+    /** Characters that commit the current input as a tag. Default Enter + comma. */
+    separators?: string[];
+}
+/**
+ * Free-text entry that produces removable tag chips, distinct from Dropdown
+ * (which picks from a fixed list). Type and press Enter or comma to add;
+ * Backspace on an empty field removes the last tag; pasting a delimited string
+ * splits into multiple tags. Optional dedupe, max-count, and per-tag validation.
+ *
+ * @example
+ * ```tsx
+ * <TagsInput label="Recipients" value={emails} onChange={setEmails}
+ *   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;
+
+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 };