@geomak/ui 5.2.0 → 5.3.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,6 @@ 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;
 
-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, 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 };