@geomak/ui 5.2.0 → 5.4.0

package/dist/index.d.cts

@@ -1838,6 +1838,76 @@ interface ButtonProps {
  */
 declare function Button({ content, variant, size, buttonType, loading, disabled, style, icon, onClick, }: ButtonProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Shared field foundation for all oxygen-ui inputs.
+ *
+ * Centralises the things every input must agree on:
+ * - the **size scale** (sm / md / lg) → control height + text size + padding
+ * - the **refined focus treatment** — a crisp 1px accent border plus a soft
+ *   3px low-opacity halo (NOT a heavy solid ring band)
+ * - the **resting / hover / error / disabled** border + background states
+ * - a **`<Field>` wrapper** handling label, error region, layout
+ *   (horizontal / vertical) and `aria` linkage consistently
+ *
+ * All values map to design-system tokens (control heights, semantic colours,
+ * radii) so a consumer's ThemeProvider override flows straight through.
+ */
+type FieldSize = 'sm' | 'md' | 'lg';
+interface FieldShellOptions {
+    size?: FieldSize;
+    hasError?: boolean;
+    disabled?: boolean;
+    /**
+     * `true` for wrapper elements that hold a real `<input>` inside
+     * (focus-within), `false` for elements that are themselves focusable
+     * like `<button>` triggers (focus-visible). Default `false`.
+     */
+    focusWithin?: boolean;
+    /** Append height/padding utilities (for single-line inputs). Default `true`. */
+    sized?: boolean;
+}
+/**
+ * Compose the className for an input's outer "shell" — the bordered, rounded
+ * box that carries the focus ring. Apply to the `<input>` directly, or to a
+ * wrapper `<div>` that contains an input plus adornments (pass
+ * `focusWithin: true` in that case).
+ */
+declare function fieldShell({ size, hasError, disabled, focusWithin, sized, }?: FieldShellOptions): string;
+interface FieldProps {
+    label?: React$1.ReactNode;
+    /** `id` of the control — links the `<label htmlFor>`. */
+    htmlFor?: string;
+    /** `id` for the error region — pair with `aria-describedby` on the control. */
+    errorId?: string;
+    errorMessage?: React$1.ReactNode;
+    /** Orientation of label vs control. Default `'vertical'`. */
+    layout?: 'horizontal' | 'vertical';
+    /** Show a required asterisk after the label. */
+    required?: boolean;
+    labelStyle?: React$1.CSSProperties;
+    /** Width of the label column in horizontal layout (CSS length). */
+    labelWidth?: string | number;
+    className?: string;
+    /** The control itself (input / trigger / dropzone). */
+    children: React$1.ReactNode;
+}
+/**
+ * Layout wrapper shared by every input. Renders:
+ *
+ * ```
+ * vertical:                  horizontal:
+ *   [label]                    [label] [ control        ]
+ *   [ control ]                        [ error message  ]
+ *   [ error   ]
+ * ```
+ *
+ * The error message always sits under the **control only** (never spanning
+ * the label in horizontal layout). Label uses full-contrast foreground +
+ * 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;
+
 interface TextInputProps {
     value?: string;
     onChange?: React$1.ChangeEventHandler<HTMLInputElement>;
@@ -1846,19 +1916,46 @@ interface TextInputProps {
     htmlFor?: string;
     placeholder?: string;
     name?: string;
+    /** Native input type. Defaults to `'text'`. */
+    type?: 'text' | 'email' | 'url' | 'tel';
     inputStyle?: React$1.CSSProperties;
     style?: React$1.CSSProperties;
-    /** Label/input orientation. Defaults to `'horizontal'`. */
+    /** Label/input orientation. Defaults to `'vertical'`. */
     layout?: 'horizontal' | 'vertical';
+    /** Size preset — controls height, padding, and font. Default `'md'`. */
+    size?: FieldSize;
     onBlur?: React$1.FocusEventHandler<HTMLInputElement>;
     errorMessage?: React$1.ReactNode;
-    labelColor?: string;
+    /** Mark the field required (renders an asterisk after the label). */
+    required?: boolean;
+    /** Optional leading adornment (icon / prefix). */
+    prefix?: React$1.ReactNode;
+    /** Optional trailing adornment (icon / suffix / unit). */
+    suffix?: React$1.ReactNode;
     id?: string;
 }
 /**
- * Standard text input with label and validation message.
+ * Single-line text input. Full-width by default (responsive) — constrain it
+ * with the parent layout or `style={{ maxWidth }}`. Supports an optional
+ * leading `prefix` and trailing `suffix` adornment (icon, unit, etc.).
+ *
+ * @example
+ * ```tsx
+ * <TextInput label="Vessel name" value={name} onChange={(e) => setName(e.target.value)} />
+ * ```
+ *
+ * @example With adornment + error
+ * ```tsx
+ * <TextInput
+ *   label="IMO"
+ *   prefix={<HashIcon />}
+ *   value={imo}
+ *   onChange={onChange}
+ *   errorMessage={touched && !valid ? 'Invalid IMO number' : undefined}
+ * />
+ * ```
  */
-declare function TextInput({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout, onBlur, errorMessage, labelColor, }: TextInputProps): react_jsx_runtime.JSX.Element;
+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;
 
 interface NumberInputProps {
     /** Step size for the up/down buttons and native arrow-key handling. Default `1`. */
@@ -1877,9 +1974,12 @@ interface NumberInputProps {
     htmlFor?: string;
     name?: string;
     disabled?: boolean;
-    /** Label/input orientation. Defaults to `'horizontal'`. */
+    /** Label/input orientation. Defaults to `'vertical'`. */
     layout?: 'horizontal' | 'vertical';
+    /** Size preset. Default `'md'`. */
+    size?: FieldSize;
     errorMessage?: React$1.ReactNode;
+    required?: boolean;
     inputStyle?: React$1.CSSProperties;
     labelStyle?: React$1.CSSProperties;
     placeholder?: string;
@@ -1922,7 +2022,7 @@ interface NumberInputProps {
  * <NumberInput label="Tonnage" step={0.25} precision={2} />
  * ```
  */
-declare function NumberInput({ step, value, onChange, label, htmlFor, name, disabled, layout, errorMessage, 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, required, inputStyle, labelStyle, placeholder, style, min, max, readOnly, precision, }: NumberInputProps): react_jsx_runtime.JSX.Element;
 
 interface PasswordProps {
     value?: string;
@@ -1934,17 +2034,28 @@ interface PasswordProps {
     name?: string;
     inputStyle?: React$1.CSSProperties;
     style?: React$1.CSSProperties;
-    /** Label/input orientation. Defaults to `'horizontal'`. */
+    /** Label/input orientation. Defaults to `'vertical'`. */
     layout?: 'horizontal' | 'vertical';
+    /** Size preset — controls height, padding, and font. Default `'md'`. */
+    size?: FieldSize;
     onBlur?: React$1.FocusEventHandler<HTMLInputElement>;
     errorMessage?: React$1.ReactNode;
-    labelColor?: string;
-    iconColor?: string;
+    required?: boolean;
+    /** Override the "reveal" (password hidden) icon. */
+    showIcon?: React$1.ReactNode;
+    /** Override the "hide" (password visible) icon. */
+    hideIcon?: React$1.ReactNode;
 }
 /**
- * Password input with show/hide toggle.
+ * Password input with a show/hide reveal toggle. Full-width by default.
+ * The reveal/hide icons can be overridden via `showIcon` / `hideIcon`.
+ *
+ * @example
+ * ```tsx
+ * <Password label="Password" value={pw} onChange={(e) => setPw(e.target.value)} />
+ * ```
  */
-declare function Password({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout, onBlur, errorMessage, labelColor, iconColor, }: PasswordProps): react_jsx_runtime.JSX.Element;
+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;
 
 interface SearchInputProps {
     value?: string;
@@ -1958,9 +2069,20 @@ interface SearchInputProps {
     style?: React$1.CSSProperties;
     /** Label/input orientation. Defaults to `'vertical'`. */
     layout?: 'horizontal' | 'vertical';
+    /** Size preset. Default `'md'`. */
+    size?: FieldSize;
+    /** Override the leading search icon. */
+    icon?: React$1.ReactNode;
 }
 /**
- * Search text field with a magnifier icon on the right.
+ * Search field with a leading magnifier icon. Uses `type="search"` for the
+ * native clear affordance and a search-friendly mobile keyboard. Full-width
+ * by default. Override the icon via `icon`.
+ *
+ * @example
+ * ```tsx
+ * <SearchInput value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search vessels…" />
+ * ```
  */
 declare const SearchInput: React$1.ForwardRefExoticComponent<SearchInputProps & React$1.RefAttributes<HTMLInputElement>>;
 
@@ -2000,6 +2122,58 @@ interface CheckboxProps {
 declare function Checkbox({ checked, value, // legacy alias
 onChange, label, name, htmlFor, errorMessage, disabled, }: CheckboxProps): react_jsx_runtime.JSX.Element;
 
+interface RadioOption {
+    /** Stable value submitted / reported on change. */
+    value: string;
+    /** Main label text. */
+    label: React$1.ReactNode;
+    /** Optional secondary description rendered under the label. */
+    description?: React$1.ReactNode;
+    /** Disable this option only. */
+    disabled?: boolean;
+}
+interface RadioGroupProps {
+    options: RadioOption[];
+    /** Controlled selected value. */
+    value?: string;
+    /** Uncontrolled initial value. */
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    name?: string;
+    label?: React$1.ReactNode;
+    /** Group orientation. Default `'vertical'`. */
+    orientation?: 'vertical' | 'horizontal';
+    /** Size preset — controls the dot + text size. Default `'md'`. */
+    size?: FieldSize;
+    disabled?: boolean;
+    required?: boolean;
+    errorMessage?: React$1.ReactNode;
+}
+/**
+ * Radio group built on `@radix-ui/react-radio-group`. Each option can carry
+ * a `description`, and options can be disabled individually. Radix handles
+ * arrow-key roving focus, `role="radiogroup"`, and selection semantics.
+ *
+ * Form-friendly: pass `name` for native form serialisation, `errorMessage`
+ * for validation, `required` for the asterisk + `aria-required`.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup
+ *   label="Notification frequency"
+ *   name="freq"
+ *   value={freq}
+ *   onChange={setFreq}
+ *   options={[
+ *     { value: 'realtime', label: 'Real-time', description: 'Notify me immediately' },
+ *     { value: 'daily',    label: 'Daily digest' },
+ *     { value: 'off',      label: 'Off', disabled: true },
+ *   ]}
+ * />
+ * ```
+ */
+declare function RadioGroup({ options, value, defaultValue, onChange, name, label, orientation, size, disabled, required, errorMessage, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+
 interface SwitchInputProps {
     checked?: boolean;
     onChange?: (e: {
@@ -2071,6 +2245,8 @@ interface DropdownProps {
     items?: DropdownItem[];
     labelStyle?: React$1.CSSProperties;
     placeholder?: string;
+    /** Size preset. Default `'md'`. */
+    size?: FieldSize;
 }
 /**
  * Select / multi-select dropdown powered by Radix Popover.
@@ -2087,7 +2263,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, }: DropdownProps): react_jsx_runtime.JSX.Element;
+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;
 
 interface AutoCompleteItem {
     key: string;
@@ -2127,6 +2303,10 @@ interface AutoCompleteProps {
     emptyText?: string;
     /** Custom "loading" message — shown in async mode while a query is in flight. */
     loadingText?: string;
+    /** Size preset. Default `'md'`. */
+    size?: FieldSize;
+    /** Override the leading search icon (hidden while loading). */
+    icon?: React$1.ReactNode;
 }
 /**
  * Search-as-you-type autocomplete powered by Radix Popover. Supports two
@@ -2164,7 +2344,7 @@ interface AutoCompleteProps {
  * />
  * ```
  */
-declare function AutoComplete({ disabled, label, placeholder, name, inputStyle, style, layout, items, onSearch, debounce, onItemClick, emptyText, loadingText, }: AutoCompleteProps): react_jsx_runtime.JSX.Element;
+declare function AutoComplete({ disabled, label, placeholder, name, inputStyle, style, layout, items, onSearch, debounce, onItemClick, emptyText, loadingText, size, icon, }: AutoCompleteProps): react_jsx_runtime.JSX.Element;
 
 interface TreeSelectNode {
     key: string | number;
@@ -2205,6 +2385,8 @@ interface TreeSelectProps {
     parentsSelectable?: boolean;
     /** Keys of nodes that should start expanded. */
     defaultExpandedKeys?: (string | number)[];
+    /** Size preset. Default `'md'`. */
+    size?: FieldSize;
 }
 /**
  * Hierarchical single-select with expandable branches.
@@ -2243,7 +2425,7 @@ interface TreeSelectProps {
  * />
  * ```
  */
-declare function TreeSelect({ label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, placeholder, parentsSelectable, defaultExpandedKeys, }: TreeSelectProps): react_jsx_runtime.JSX.Element;
+declare function TreeSelect({ label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, placeholder, parentsSelectable, defaultExpandedKeys, size, }: TreeSelectProps): react_jsx_runtime.JSX.Element;
 
 interface FileInputProps {
     allowMultiple?: boolean;
@@ -2256,22 +2438,43 @@ interface FileInputProps {
         };
     }) => void;
     name?: string;
-    /** Accepted MIME types / extensions */
+    htmlFor?: string;
+    label?: React$1.ReactNode;
+    /** Accepted MIME types / extensions, e.g. `'.xlsx,application/pdf'`. */
     accept?: string;
+    /** Primary call-to-action copy. Default `'Click to upload or drag and drop'`. */
+    prompt?: React$1.ReactNode;
+    /** Secondary hint under the prompt — typically the accepted types / max size. */
+    hint?: React$1.ReactNode;
+    /** Maximum file size in bytes. Files above this are rejected with an error. */
+    maxSize?: number;
+    errorMessage?: React$1.ReactNode;
+    disabled?: boolean;
+    required?: boolean;
+    /** Override the upload glyph in the empty state. */
+    icon?: React$1.ReactNode;
 }
 /**
- * Drag-and-drop / click file input.
+ * Drag-and-drop file input with an enterprise dropzone aesthetic: a calm
+ * dashed surface with a contained icon badge, primary + secondary copy, an
+ * accent-tinted drag-over state, and selected files shown as horizontal chips
+ * with name + size and a remove button.
  *
- * Decoupled from ThemeContext — uses CSS `dark:` classes.
+ * Keyboard-accessible (the dropzone is a `role="button"` activatable via
+ * Enter / Space) and form-friendly (`errorMessage`, `required`, `name`).
  *
  * @example
+ * ```tsx
  * <FileInput
- *   name="xlsxUpload"
- *   accept=".xlsx"
+ *   label="Crew manifest"
+ *   accept=".xlsx,.csv"
+ *   hint="XLSX or CSV, up to 5 MB"
+ *   maxSize={5 * 1024 * 1024}
  *   onChange={(e) => setFile(e.target.files[0])}
  * />
+ * ```
  */
-declare function FileInput({ allowMultiple, onChange, name, accept, }: FileInputProps): react_jsx_runtime.JSX.Element;
+declare function FileInput({ allowMultiple, onChange, name, htmlFor, label, accept, prompt, hint, maxSize, errorMessage, disabled, required, icon, }: FileInputProps): react_jsx_runtime.JSX.Element;
 
 interface DatePickerProps {
     /** Current date. `null` / `undefined` means "no date selected". */
@@ -2301,6 +2504,8 @@ interface DatePickerProps {
     weekStartsOn?: 0 | 1;
     /** Allow the user to clear the date with a button in the popover. Default `true`. */
     clearable?: boolean;
+    /** Size preset. Default `'md'`. */
+    size?: FieldSize;
 }
 type TemporalPickerProps = DatePickerProps;
 /**
@@ -2338,6 +2543,199 @@ type TemporalPickerProps = DatePickerProps;
  * />
  * ```
  */
-declare function DatePicker({ value, onChange, label, placeholder, htmlFor, name: _name, layout, disabled, errorMessage, min, max, style, format, weekStartsOn, clearable, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+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;
+
+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;
 
-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, 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, 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, useNotification };
+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 };