@geomak/ui 5.1.0 → 5.2.0

package/dist/index.d.cts

@@ -1384,6 +1384,16 @@ interface TableProps<T extends Record<string, any> = Record<string, any>> {
     hasSearch?: boolean;
     footer?: React$1.ReactNode;
     header?: React$1.ReactNode;
+    /**
+     * When `true`, the body renders skeleton rows (one per column with the
+     * shared shimmer animation) instead of data. Use during initial data
+     * fetch, server-side pagination transitions, or any time the dataset is
+     * not yet ready. Combine with `pagination.serverSide` for the canonical
+     * "loading next page" pattern.
+     */
+    loading?: boolean;
+    /** Number of skeleton rows to render when `loading` is true. Default `8`. */
+    loadingRowCount?: number;
 }
 /** ─────────────────── main component ─────────────────── */
 /**
@@ -1426,7 +1436,7 @@ interface TableProps<T extends Record<string, any> = Record<string, any>> {
  * />
  * ```
  */
-declare function Table<T extends Record<string, any> = Record<string, any>>({ columns, rows, getRowKey, pagination, expandRow, hasSearch, footer, header, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+declare function Table<T extends Record<string, any> = Record<string, any>>({ columns, rows, getRowKey, pagination, expandRow, hasSearch, footer, header, loading, loadingRowCount, }: TableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface ThemeSwitchProps {
     checked: boolean;
@@ -2094,25 +2104,67 @@ interface AutoCompleteProps {
     style?: React$1.CSSProperties;
     /** Label/input orientation. Defaults to `'vertical'`. */
     layout?: 'horizontal' | 'vertical';
+    /**
+     * Static list — when provided, the component does its own substring
+     * filtering on `label` and `key`. Mutually exclusive with `onSearch`.
+     */
     items?: AutoCompleteItem[];
+    /**
+     * Async resolver — when provided, `items` is ignored and `onSearch(term)`
+     * is called (debounced) every time the user pauses typing. Its returned
+     * promise drives the option list. The component manages an internal
+     * `loading` state and shows an `xs` LoadingSpinner where the search icon
+     * normally lives while a query is in flight.
+     */
+    onSearch?: (term: string) => Promise<AutoCompleteItem[]>;
+    /**
+     * Debounce delay (ms) before `onSearch` fires after the user stops
+     * typing. Default `250`. Ignored when `items` is used.
+     */
+    debounce?: number;
     onItemClick?: (value: string) => void;
     /** Custom "empty" message */
     emptyText?: string;
+    /** Custom "loading" message — shown in async mode while a query is in flight. */
+    loadingText?: string;
 }
 /**
- * Search-as-you-type autocomplete powered by Radix Popover.
+ * Search-as-you-type autocomplete powered by Radix Popover. Supports two
+ * modes:
+ *
+ * - **Static**: pass `items` — the component substring-filters locally.
+ *   Best for small fixed lists (≤ 200 entries).
+ * - **Async**: pass `onSearch(term) => Promise<Item[]>` — the component
+ *   debounces input and drives the option list from the resolver. Shows
+ *   an `xs` LoadingSpinner while the query is in flight.
  *
  * The popover opens when the input is focused and closes when an item is
- * selected or the user clicks away. Radix handles portal-based z-stacking.
+ * selected or the user clicks away.
  *
- * @example
+ * @example Static (small fixed list)
+ * ```tsx
  * <AutoComplete
  *   label="Vessel"
- *   items={vessels.map(v => ({ key: v.imo, value: v.imo, label: v.name }))}
+ *   items={vessels.map((v) => ({ key: v.imo, value: v.imo, label: v.name }))}
  *   onItemClick={(imo) => setVessel(imo)}
  * />
+ * ```
+ *
+ * @example Async (server-backed)
+ * ```tsx
+ * <AutoComplete
+ *   label="Port"
+ *   debounce={300}
+ *   onSearch={async (term) => {
+ *     const res = await fetch(`/api/ports?q=${encodeURIComponent(term)}`)
+ *     const data = await res.json()
+ *     return data.map((p) => ({ key: p.unlocode, value: p.unlocode, label: p.name }))
+ *   }}
+ *   onItemClick={(unlocode) => setPort(unlocode)}
+ * />
+ * ```
  */
-declare function AutoComplete({ disabled, label, placeholder, name, inputStyle, style, layout, items, onItemClick, emptyText, }: AutoCompleteProps): react_jsx_runtime.JSX.Element;
+declare function AutoComplete({ disabled, label, placeholder, name, inputStyle, style, layout, items, onSearch, debounce, onItemClick, emptyText, loadingText, }: AutoCompleteProps): react_jsx_runtime.JSX.Element;
 
 interface TreeSelectNode {
     key: string | number;

package/dist/index.d.ts

@@ -1384,6 +1384,16 @@ interface TableProps<T extends Record<string, any> = Record<string, any>> {
     hasSearch?: boolean;
     footer?: React$1.ReactNode;
     header?: React$1.ReactNode;
+    /**
+     * When `true`, the body renders skeleton rows (one per column with the
+     * shared shimmer animation) instead of data. Use during initial data
+     * fetch, server-side pagination transitions, or any time the dataset is
+     * not yet ready. Combine with `pagination.serverSide` for the canonical
+     * "loading next page" pattern.
+     */
+    loading?: boolean;
+    /** Number of skeleton rows to render when `loading` is true. Default `8`. */
+    loadingRowCount?: number;
 }
 /** ─────────────────── main component ─────────────────── */
 /**
@@ -1426,7 +1436,7 @@ interface TableProps<T extends Record<string, any> = Record<string, any>> {
  * />
  * ```
  */
-declare function Table<T extends Record<string, any> = Record<string, any>>({ columns, rows, getRowKey, pagination, expandRow, hasSearch, footer, header, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+declare function Table<T extends Record<string, any> = Record<string, any>>({ columns, rows, getRowKey, pagination, expandRow, hasSearch, footer, header, loading, loadingRowCount, }: TableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface ThemeSwitchProps {
     checked: boolean;
@@ -2094,25 +2104,67 @@ interface AutoCompleteProps {
     style?: React$1.CSSProperties;
     /** Label/input orientation. Defaults to `'vertical'`. */
     layout?: 'horizontal' | 'vertical';
+    /**
+     * Static list — when provided, the component does its own substring
+     * filtering on `label` and `key`. Mutually exclusive with `onSearch`.
+     */
     items?: AutoCompleteItem[];
+    /**
+     * Async resolver — when provided, `items` is ignored and `onSearch(term)`
+     * is called (debounced) every time the user pauses typing. Its returned
+     * promise drives the option list. The component manages an internal
+     * `loading` state and shows an `xs` LoadingSpinner where the search icon
+     * normally lives while a query is in flight.
+     */
+    onSearch?: (term: string) => Promise<AutoCompleteItem[]>;
+    /**
+     * Debounce delay (ms) before `onSearch` fires after the user stops
+     * typing. Default `250`. Ignored when `items` is used.
+     */
+    debounce?: number;
     onItemClick?: (value: string) => void;
     /** Custom "empty" message */
     emptyText?: string;
+    /** Custom "loading" message — shown in async mode while a query is in flight. */
+    loadingText?: string;
 }
 /**
- * Search-as-you-type autocomplete powered by Radix Popover.
+ * Search-as-you-type autocomplete powered by Radix Popover. Supports two
+ * modes:
+ *
+ * - **Static**: pass `items` — the component substring-filters locally.
+ *   Best for small fixed lists (≤ 200 entries).
+ * - **Async**: pass `onSearch(term) => Promise<Item[]>` — the component
+ *   debounces input and drives the option list from the resolver. Shows
+ *   an `xs` LoadingSpinner while the query is in flight.
  *
  * The popover opens when the input is focused and closes when an item is
- * selected or the user clicks away. Radix handles portal-based z-stacking.
+ * selected or the user clicks away.
  *
- * @example
+ * @example Static (small fixed list)
+ * ```tsx
  * <AutoComplete
  *   label="Vessel"
- *   items={vessels.map(v => ({ key: v.imo, value: v.imo, label: v.name }))}
+ *   items={vessels.map((v) => ({ key: v.imo, value: v.imo, label: v.name }))}
  *   onItemClick={(imo) => setVessel(imo)}
  * />
+ * ```
+ *
+ * @example Async (server-backed)
+ * ```tsx
+ * <AutoComplete
+ *   label="Port"
+ *   debounce={300}
+ *   onSearch={async (term) => {
+ *     const res = await fetch(`/api/ports?q=${encodeURIComponent(term)}`)
+ *     const data = await res.json()
+ *     return data.map((p) => ({ key: p.unlocode, value: p.unlocode, label: p.name }))
+ *   }}
+ *   onItemClick={(unlocode) => setPort(unlocode)}
+ * />
+ * ```
  */
-declare function AutoComplete({ disabled, label, placeholder, name, inputStyle, style, layout, items, onItemClick, emptyText, }: AutoCompleteProps): react_jsx_runtime.JSX.Element;
+declare function AutoComplete({ disabled, label, placeholder, name, inputStyle, style, layout, items, onSearch, debounce, onItemClick, emptyText, loadingText, }: AutoCompleteProps): react_jsx_runtime.JSX.Element;
 
 interface TreeSelectNode {
     key: string | number;