@geomak/ui 1.7.4 → 1.8.0

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 export { C as COLORS, S as SemanticColorKey, a as SemanticSharedKey, V as VarColorKey, b as VarDensityKey, c as VarMotionKey, d as VarRadiusKey, e as VarShadowKey, f as VarTypoKey, g as VarZIndexKey, P as palette, s as semanticTokens, v as vars } from './index-CvyV3YPI.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1 from 'react';
+import React$1, { ReactNode } from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
 declare const Icon: {
@@ -587,45 +587,82 @@ declare function useNotification(): {
     danger: (props: Omit<NotificationPayload, "type">) => void;
 };
 
+type LoadingSpinnerSize = 'sm' | 'md' | 'lg';
 interface LoadingSpinnerProps {
-    /** Text revealed letter-by-letter beneath the spinner. */
-    prompt: string;
+    /**
+     * Text revealed letter-by-letter beneath the spinner. Optional — pass
+     * `undefined` for a pure spinner with no caption (e.g. inline mode).
+     */
+    prompt?: string;
+    /** Spinner size variant. Defaults to `'md'`. */
+    size?: LoadingSpinnerSize;
+    /**
+     * When `true`, renders inline at the call site (no portal, no fullscreen
+     * overlay, no backdrop). Useful inside cards, table rows, drawers, or
+     * empty-state slots. Defaults to `false` (fullscreen overlay).
+     */
+    inline?: boolean;
     /**
      * Optional override for the spinner ring colour. Accepts any CSS colour.
-     * Defaults to the accent token so it picks up theme overrides.
+     * Defaults to the `--color-accent` token so it picks up theme overrides.
      */
     spinnerColor?: string;
     /**
      * Optional override for the prompt text colour.
-     * Defaults to the foreground token (light/dark aware).
+     * Defaults to the `--color-foreground` token (light/dark aware).
      */
     textColor?: string;
     /**
-     * Backdrop opacity (0 – 1). Defaults to 0.92 — close enough to opaque to
-     * block UI underneath while still hinting at the previous state.
+     * Backdrop opacity (0 – 1) for the fullscreen overlay. Defaults to 0.8 —
+     * close enough to opaque to block UI underneath while still hinting at the
+     * previous state. Ignored when `inline` is true.
      */
     backdropOpacity?: number;
 }
 /**
- * Full-screen loading overlay with a spinning ring and a staggered text
- * reveal. Portaled into `document.body` so it always covers the actual
- * viewport regardless of where it's rendered in the React tree.
- *
- * Honours `prefers-reduced-motion`: the spinner still rotates (continuous
- * spin is informative, not decorative) but the letter stagger collapses to
- * an instant reveal.
- *
- * @example
+ * Enterprise-grade loading indicator.
+ *
+ * Two concentric arcs counter-rotating around a breathing centre dot, with
+ * an optional staggered letter reveal beneath. Portaled to `document.body`
+ * for the fullscreen overlay so it always covers the actual viewport
+ * regardless of where it sits in the React tree.
+ *
+ * **Two modes:**
+ * - **Fullscreen overlay** (default): semi-opaque backdrop with
+ *   `backdrop-blur-sm` for a modern depth effect. Use during page-level
+ *   loading, route transitions, or critical mutations.
+ * - **Inline** (`inline`): just the spinner + optional caption rendered at
+ *   the call site. Use inside cards, table rows, drawers, empty states,
+ *   or anywhere a smaller loading affordance is appropriate.
+ *
+ * **Accessibility**: `role="status"` + `aria-label`/`aria-live` make the
+ * indicator announce-able to screen readers. `prefers-reduced-motion`
+ * collapses the letter stagger to instant reveal — the spinner rings keep
+ * rotating since a continuous spinner is informative, not decorative.
+ *
+ * @example Fullscreen overlay (page load)
+ * ```tsx
  * {isLoading && <LoadingSpinner prompt="Loading vessels…" />}
+ * ```
  *
- * @example
+ * @example Inline (inside a card)
+ * ```tsx
+ * <Card>
+ *   {data ? <Chart data={data} /> : <LoadingSpinner inline size="sm" />}
+ * </Card>
+ * ```
+ *
+ * @example Themed overlay
+ * ```tsx
  * <LoadingSpinner
  *   prompt="Saving"
+ *   size="lg"
  *   spinnerColor="#10b981"
  *   backdropOpacity={0.7}
  * />
+ * ```
  */
-declare function LoadingSpinner({ prompt, spinnerColor, textColor, backdropOpacity, }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
+declare function LoadingSpinner({ prompt, size, inline, spinnerColor, textColor, backdropOpacity, }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
 
 interface FadingBaseProps {
     className?: string;
@@ -652,7 +689,6 @@ declare function FadingBase({ className, isMounted, children, }: FadingBaseProps
 interface ListItem {
     key: string | number;
     label: React$1.ReactNode;
-    [key: string]: any;
 }
 interface ListProps {
     items: ListItem[];
@@ -1399,7 +1435,7 @@ interface ButtonProps {
 declare function Button({ content, variant, size, buttonType, loading, disabled, style, icon, onClick, }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 interface TextInputProps {
-    value?: any;
+    value?: string;
     onChange?: React$1.ChangeEventHandler<HTMLInputElement>;
     disabled?: boolean;
     label?: React$1.ReactNode;
@@ -1408,13 +1444,12 @@ interface TextInputProps {
     name?: string;
     inputStyle?: React$1.CSSProperties;
     style?: React$1.CSSProperties;
-    /** 'horizontal' | 'vertical' */
-    layout?: string;
+    /** Label/input orientation. Defaults to `'horizontal'`. */
+    layout?: 'horizontal' | 'vertical';
     onBlur?: React$1.FocusEventHandler<HTMLInputElement>;
     errorMessage?: React$1.ReactNode;
     labelColor?: string;
     id?: string;
-    [key: string]: any;
 }
 /**
  * Standard text input with label and validation message.
@@ -1453,7 +1488,7 @@ interface NumberInputProps {
 declare function NumberInput({ step, value, onChange, label, htmlFor, name, disabled, layout, errorMessage, inputStyle, labelStyle, placeholder, style, min, max, readOnly, }: NumberInputProps): react_jsx_runtime.JSX.Element;
 
 interface PasswordProps {
-    value?: any;
+    value?: string;
     onChange?: React$1.ChangeEventHandler<HTMLInputElement>;
     disabled?: boolean;
     label?: React$1.ReactNode;
@@ -1462,12 +1497,12 @@ interface PasswordProps {
     name?: string;
     inputStyle?: React$1.CSSProperties;
     style?: React$1.CSSProperties;
-    layout?: string;
+    /** Label/input orientation. Defaults to `'horizontal'`. */
+    layout?: 'horizontal' | 'vertical';
     onBlur?: React$1.FocusEventHandler<HTMLInputElement>;
     errorMessage?: React$1.ReactNode;
     labelColor?: string;
     iconColor?: string;
-    [key: string]: any;
 }
 /**
  * Password input with show/hide toggle.
@@ -1475,7 +1510,7 @@ interface PasswordProps {
 declare function Password({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout, onBlur, errorMessage, labelColor, iconColor, }: PasswordProps): react_jsx_runtime.JSX.Element;
 
 interface SearchInputProps {
-    value?: any;
+    value?: string;
     onChange?: React$1.ChangeEventHandler<HTMLInputElement>;
     disabled?: boolean;
     label?: React$1.ReactNode;
@@ -1484,16 +1519,16 @@ interface SearchInputProps {
     name?: string;
     inputStyle?: React$1.CSSProperties;
     style?: React$1.CSSProperties;
-    layout?: string;
-    [key: string]: any;
+    /** Label/input orientation. Defaults to `'vertical'`. */
+    layout?: 'horizontal' | 'vertical';
 }
 /**
  * Search text field with a magnifier icon on the right.
  */
-declare const SearchInput: React$1.ForwardRefExoticComponent<Omit<SearchInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+declare const SearchInput: React$1.ForwardRefExoticComponent<SearchInputProps & React$1.RefAttributes<HTMLInputElement>>;
 
 interface DropdownPillProps {
-    value?: React.ReactNode;
+    value?: ReactNode;
     hasSiblings?: boolean;
 }
 /**
@@ -1546,7 +1581,6 @@ interface SwitchInputProps {
     }) => void;
     checkedIcon?: React$1.ReactNode;
     uncheckedIcon?: React$1.ReactNode;
-    [key: string]: any;
 }
 /**
  * Form switch (on/off toggle) powered by Radix Switch.
@@ -1569,30 +1603,39 @@ interface DropdownItem {
     label: React$1.ReactNode;
     icon?: React$1.ReactNode;
 }
+/**
+ * Item key type — DOM-friendly subset of `React.Key` (no bigint, since UI
+ * keys are always strings or numbers in practice).
+ */
+type DropdownKey = string | number;
+/**
+ * Selected value(s). In single-select mode this is a single key matching
+ * one of the items. In multi-select mode it is an array of keys.
+ */
+type DropdownValue = DropdownKey | DropdownKey[];
 interface DropdownProps {
     isMultiselect?: boolean;
     hasSearch?: boolean;
     label?: React$1.ReactNode;
     name?: string;
-    value?: any;
+    value?: DropdownValue;
     onChange?: (e: {
         target: {
-            value: any;
+            value: DropdownValue;
             id?: string;
             name?: string;
         };
     }) => void;
     onBlur?: React$1.FocusEventHandler;
     disabled?: boolean;
-    /** 'horizontal' | 'vertical' */
-    layout?: string;
+    /** Label/input orientation. Defaults to `'vertical'`. */
+    layout?: 'horizontal' | 'vertical';
     errorMessage?: React$1.ReactNode;
     style?: React$1.CSSProperties;
     htmlFor?: string;
     items?: DropdownItem[];
     labelStyle?: React$1.CSSProperties;
     placeholder?: string;
-    [key: string]: any;
 }
 /**
  * Select / multi-select dropdown powered by Radix Popover.
@@ -1624,13 +1667,12 @@ interface AutoCompleteProps {
     name?: string;
     inputStyle?: React$1.CSSProperties;
     style?: React$1.CSSProperties;
-    /** 'horizontal' | 'vertical' */
-    layout?: string;
+    /** Label/input orientation. Defaults to `'vertical'`. */
+    layout?: 'horizontal' | 'vertical';
     items?: AutoCompleteItem[];
     onItemClick?: (value: string) => void;
     /** Custom "empty" message */
     emptyText?: string;
-    [key: string]: any;
 }
 /**
  * Search-as-you-type autocomplete powered by Radix Popover.
@@ -1695,7 +1737,6 @@ interface FileInputProps {
     name?: string;
     /** Accepted MIME types / extensions */
     accept?: string;
-    [key: string]: any;
 }
 /**
  * Drag-and-drop / click file input.

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { C as COLORS, S as SemanticColorKey, a as SemanticSharedKey, V as VarColorKey, b as VarDensityKey, c as VarMotionKey, d as VarRadiusKey, e as VarShadowKey, f as VarTypoKey, g as VarZIndexKey, P as palette, s as semanticTokens, v as vars } from './index-CvyV3YPI.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1 from 'react';
+import React$1, { ReactNode } from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
 declare const Icon: {
@@ -587,45 +587,82 @@ declare function useNotification(): {
     danger: (props: Omit<NotificationPayload, "type">) => void;
 };
 
+type LoadingSpinnerSize = 'sm' | 'md' | 'lg';
 interface LoadingSpinnerProps {
-    /** Text revealed letter-by-letter beneath the spinner. */
-    prompt: string;
+    /**
+     * Text revealed letter-by-letter beneath the spinner. Optional — pass
+     * `undefined` for a pure spinner with no caption (e.g. inline mode).
+     */
+    prompt?: string;
+    /** Spinner size variant. Defaults to `'md'`. */
+    size?: LoadingSpinnerSize;
+    /**
+     * When `true`, renders inline at the call site (no portal, no fullscreen
+     * overlay, no backdrop). Useful inside cards, table rows, drawers, or
+     * empty-state slots. Defaults to `false` (fullscreen overlay).
+     */
+    inline?: boolean;
     /**
      * Optional override for the spinner ring colour. Accepts any CSS colour.
-     * Defaults to the accent token so it picks up theme overrides.
+     * Defaults to the `--color-accent` token so it picks up theme overrides.
      */
     spinnerColor?: string;
     /**
      * Optional override for the prompt text colour.
-     * Defaults to the foreground token (light/dark aware).
+     * Defaults to the `--color-foreground` token (light/dark aware).
      */
     textColor?: string;
     /**
-     * Backdrop opacity (0 – 1). Defaults to 0.92 — close enough to opaque to
-     * block UI underneath while still hinting at the previous state.
+     * Backdrop opacity (0 – 1) for the fullscreen overlay. Defaults to 0.8 —
+     * close enough to opaque to block UI underneath while still hinting at the
+     * previous state. Ignored when `inline` is true.
      */
     backdropOpacity?: number;
 }
 /**
- * Full-screen loading overlay with a spinning ring and a staggered text
- * reveal. Portaled into `document.body` so it always covers the actual
- * viewport regardless of where it's rendered in the React tree.
- *
- * Honours `prefers-reduced-motion`: the spinner still rotates (continuous
- * spin is informative, not decorative) but the letter stagger collapses to
- * an instant reveal.
- *
- * @example
+ * Enterprise-grade loading indicator.
+ *
+ * Two concentric arcs counter-rotating around a breathing centre dot, with
+ * an optional staggered letter reveal beneath. Portaled to `document.body`
+ * for the fullscreen overlay so it always covers the actual viewport
+ * regardless of where it sits in the React tree.
+ *
+ * **Two modes:**
+ * - **Fullscreen overlay** (default): semi-opaque backdrop with
+ *   `backdrop-blur-sm` for a modern depth effect. Use during page-level
+ *   loading, route transitions, or critical mutations.
+ * - **Inline** (`inline`): just the spinner + optional caption rendered at
+ *   the call site. Use inside cards, table rows, drawers, empty states,
+ *   or anywhere a smaller loading affordance is appropriate.
+ *
+ * **Accessibility**: `role="status"` + `aria-label`/`aria-live` make the
+ * indicator announce-able to screen readers. `prefers-reduced-motion`
+ * collapses the letter stagger to instant reveal — the spinner rings keep
+ * rotating since a continuous spinner is informative, not decorative.
+ *
+ * @example Fullscreen overlay (page load)
+ * ```tsx
  * {isLoading && <LoadingSpinner prompt="Loading vessels…" />}
+ * ```
  *
- * @example
+ * @example Inline (inside a card)
+ * ```tsx
+ * <Card>
+ *   {data ? <Chart data={data} /> : <LoadingSpinner inline size="sm" />}
+ * </Card>
+ * ```
+ *
+ * @example Themed overlay
+ * ```tsx
  * <LoadingSpinner
  *   prompt="Saving"
+ *   size="lg"
  *   spinnerColor="#10b981"
  *   backdropOpacity={0.7}
  * />
+ * ```
  */
-declare function LoadingSpinner({ prompt, spinnerColor, textColor, backdropOpacity, }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
+declare function LoadingSpinner({ prompt, size, inline, spinnerColor, textColor, backdropOpacity, }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
 
 interface FadingBaseProps {
     className?: string;
@@ -652,7 +689,6 @@ declare function FadingBase({ className, isMounted, children, }: FadingBaseProps
 interface ListItem {
     key: string | number;
     label: React$1.ReactNode;
-    [key: string]: any;
 }
 interface ListProps {
     items: ListItem[];
@@ -1399,7 +1435,7 @@ interface ButtonProps {
 declare function Button({ content, variant, size, buttonType, loading, disabled, style, icon, onClick, }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 interface TextInputProps {
-    value?: any;
+    value?: string;
     onChange?: React$1.ChangeEventHandler<HTMLInputElement>;
     disabled?: boolean;
     label?: React$1.ReactNode;
@@ -1408,13 +1444,12 @@ interface TextInputProps {
     name?: string;
     inputStyle?: React$1.CSSProperties;
     style?: React$1.CSSProperties;
-    /** 'horizontal' | 'vertical' */
-    layout?: string;
+    /** Label/input orientation. Defaults to `'horizontal'`. */
+    layout?: 'horizontal' | 'vertical';
     onBlur?: React$1.FocusEventHandler<HTMLInputElement>;
     errorMessage?: React$1.ReactNode;
     labelColor?: string;
     id?: string;
-    [key: string]: any;
 }
 /**
  * Standard text input with label and validation message.
@@ -1453,7 +1488,7 @@ interface NumberInputProps {
 declare function NumberInput({ step, value, onChange, label, htmlFor, name, disabled, layout, errorMessage, inputStyle, labelStyle, placeholder, style, min, max, readOnly, }: NumberInputProps): react_jsx_runtime.JSX.Element;
 
 interface PasswordProps {
-    value?: any;
+    value?: string;
     onChange?: React$1.ChangeEventHandler<HTMLInputElement>;
     disabled?: boolean;
     label?: React$1.ReactNode;
@@ -1462,12 +1497,12 @@ interface PasswordProps {
     name?: string;
     inputStyle?: React$1.CSSProperties;
     style?: React$1.CSSProperties;
-    layout?: string;
+    /** Label/input orientation. Defaults to `'horizontal'`. */
+    layout?: 'horizontal' | 'vertical';
     onBlur?: React$1.FocusEventHandler<HTMLInputElement>;
     errorMessage?: React$1.ReactNode;
     labelColor?: string;
     iconColor?: string;
-    [key: string]: any;
 }
 /**
  * Password input with show/hide toggle.
@@ -1475,7 +1510,7 @@ interface PasswordProps {
 declare function Password({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout, onBlur, errorMessage, labelColor, iconColor, }: PasswordProps): react_jsx_runtime.JSX.Element;
 
 interface SearchInputProps {
-    value?: any;
+    value?: string;
     onChange?: React$1.ChangeEventHandler<HTMLInputElement>;
     disabled?: boolean;
     label?: React$1.ReactNode;
@@ -1484,16 +1519,16 @@ interface SearchInputProps {
     name?: string;
     inputStyle?: React$1.CSSProperties;
     style?: React$1.CSSProperties;
-    layout?: string;
-    [key: string]: any;
+    /** Label/input orientation. Defaults to `'vertical'`. */
+    layout?: 'horizontal' | 'vertical';
 }
 /**
  * Search text field with a magnifier icon on the right.
  */
-declare const SearchInput: React$1.ForwardRefExoticComponent<Omit<SearchInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+declare const SearchInput: React$1.ForwardRefExoticComponent<SearchInputProps & React$1.RefAttributes<HTMLInputElement>>;
 
 interface DropdownPillProps {
-    value?: React.ReactNode;
+    value?: ReactNode;
     hasSiblings?: boolean;
 }
 /**
@@ -1546,7 +1581,6 @@ interface SwitchInputProps {
     }) => void;
     checkedIcon?: React$1.ReactNode;
     uncheckedIcon?: React$1.ReactNode;
-    [key: string]: any;
 }
 /**
  * Form switch (on/off toggle) powered by Radix Switch.
@@ -1569,30 +1603,39 @@ interface DropdownItem {
     label: React$1.ReactNode;
     icon?: React$1.ReactNode;
 }
+/**
+ * Item key type — DOM-friendly subset of `React.Key` (no bigint, since UI
+ * keys are always strings or numbers in practice).
+ */
+type DropdownKey = string | number;
+/**
+ * Selected value(s). In single-select mode this is a single key matching
+ * one of the items. In multi-select mode it is an array of keys.
+ */
+type DropdownValue = DropdownKey | DropdownKey[];
 interface DropdownProps {
     isMultiselect?: boolean;
     hasSearch?: boolean;
     label?: React$1.ReactNode;
     name?: string;
-    value?: any;
+    value?: DropdownValue;
     onChange?: (e: {
         target: {
-            value: any;
+            value: DropdownValue;
             id?: string;
             name?: string;
         };
     }) => void;
     onBlur?: React$1.FocusEventHandler;
     disabled?: boolean;
-    /** 'horizontal' | 'vertical' */
-    layout?: string;
+    /** Label/input orientation. Defaults to `'vertical'`. */
+    layout?: 'horizontal' | 'vertical';
     errorMessage?: React$1.ReactNode;
     style?: React$1.CSSProperties;
     htmlFor?: string;
     items?: DropdownItem[];
     labelStyle?: React$1.CSSProperties;
     placeholder?: string;
-    [key: string]: any;
 }
 /**
  * Select / multi-select dropdown powered by Radix Popover.
@@ -1624,13 +1667,12 @@ interface AutoCompleteProps {
     name?: string;
     inputStyle?: React$1.CSSProperties;
     style?: React$1.CSSProperties;
-    /** 'horizontal' | 'vertical' */
-    layout?: string;
+    /** Label/input orientation. Defaults to `'vertical'`. */
+    layout?: 'horizontal' | 'vertical';
     items?: AutoCompleteItem[];
     onItemClick?: (value: string) => void;
     /** Custom "empty" message */
     emptyText?: string;
-    [key: string]: any;
 }
 /**
  * Search-as-you-type autocomplete powered by Radix Popover.
@@ -1695,7 +1737,6 @@ interface FileInputProps {
     name?: string;
     /** Accepted MIME types / extensions */
     accept?: string;
-    [key: string]: any;
 }
 /**
  * Drag-and-drop / click file input.