@techzyapp/ui-library 1.0.27 → 1.0.28

package/dist/components/ErrorState/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/FileCard/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../FileCard-C4BkGMtK.cjs");exports.FileCard=e.FileCard;exports.default=e.FileCard;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../FileCard-DKjDQRzZ.cjs");exports.FileCard=e.FileCard;exports.default=e.FileCard;
 //# sourceMappingURL=index.cjs.map

package/dist/components/FileCard/index.js

@@ -1,4 +1,4 @@
-import { F as r, F } from "../../FileCard-BmPEEcue.js";
+import { F as r, F } from "../../FileCard-C3a2yDhK.js";
 export {
   r as FileCard,
   F as default

package/dist/components/FileUploader/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../FileUploader-D_F64mob.cjs");exports.FileUploader=e.FileUploader;exports.default=e.FileUploader;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../FileUploader-VIOg03pl.cjs");exports.FileUploader=e.FileUploader;exports.default=e.FileUploader;
 //# sourceMappingURL=index.cjs.map

package/dist/components/FileUploader/index.js

@@ -1,4 +1,4 @@
-import { F as l, F as o } from "../../FileUploader-Dv_3bjZA.js";
+import { F as l, F as o } from "../../FileUploader-CuOHWkiG.js";
 export {
   l as FileUploader,
   o as default

package/dist/components/Flag/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Flag-BM_2VJ1v.cjs");exports.Flag=e.Flag;exports.default=e.Flag;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Flag-aOQncoEZ.cjs");exports.Flag=e.Flag;exports.default=e.Flag;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Flag/index.js

@@ -1,4 +1,4 @@
-import { F as e, F as f } from "../../Flag-CzCEpB8E.js";
+import { F as e, F as f } from "../../Flag-kpUfmrwC.js";
 export {
   e as Flag,
   f as default

package/dist/components/FloatingPanel/FloatingPanel.d.cts

@@ -14,6 +14,10 @@ export interface FloatingPanelProps {
     role?: string;
     /** Accessible label, paired with `role`. */
     ariaLabel?: string;
+    /** `id` of the element that labels the panel (instead of `ariaLabel`). */
+    ariaLabelledBy?: string;
+    /** `id` of the element that describes the panel. */
+    ariaDescribedBy?: string;
     /** Trap Tab focus inside the panel + mark it `aria-modal` (for modal dialogs like the date pickers). */
     trapFocus?: boolean;
     /** Constrain the panel to the trigger's width (select-like). */

package/dist/components/FloatingPanel/FloatingPanel.d.ts

@@ -14,6 +14,10 @@ export interface FloatingPanelProps {
     role?: string;
     /** Accessible label, paired with `role`. */
     ariaLabel?: string;
+    /** `id` of the element that labels the panel (instead of `ariaLabel`). */
+    ariaLabelledBy?: string;
+    /** `id` of the element that describes the panel. */
+    ariaDescribedBy?: string;
     /** Trap Tab focus inside the panel + mark it `aria-modal` (for modal dialogs like the date pickers). */
     trapFocus?: boolean;
     /** Constrain the panel to the trigger's width (select-like). */

package/dist/components/FullscreenToggle/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../FullscreenToggle-BL0nBrsL.cjs");exports.FullscreenToggle=e.FullscreenToggle;exports.default=e.FullscreenToggle;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../FullscreenToggle-BSwxQEaG.cjs");exports.FullscreenToggle=e.FullscreenToggle;exports.default=e.FullscreenToggle;
 //# sourceMappingURL=index.cjs.map

package/dist/components/FullscreenToggle/index.js

@@ -1,4 +1,4 @@
-import { F as a, F as o } from "../../FullscreenToggle-HZQOIa21.js";
+import { F as a, F as o } from "../../FullscreenToggle-CMifmPD3.js";
 export {
   a as FullscreenToggle,
   o as default

package/dist/components/IconButton/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../IconButton-B87ipBK3.cjs");exports.IconButton=t.IconButton;exports.default=t.IconButton;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../IconButton-A2B0bqC-.cjs");exports.IconButton=t.IconButton;exports.default=t.IconButton;
 //# sourceMappingURL=index.cjs.map

package/dist/components/IconButton/index.js

@@ -1,4 +1,4 @@
-import { I as a, I } from "../../IconButton-CBp8QuTO.js";
+import { I as a, I } from "../../IconButton-Dq17Fekm.js";
 export {
   a as IconButton,
   I as default

package/dist/components/List/List.d.cts

@@ -1,6 +1,6 @@
 import { type ElementType, type HTMLAttributes, type ReactNode } from 'react';
 import { type Spacing } from '../Flex/Flex';
-import type { ListItemSize } from './ListItem';
+import { type ListItemSize } from './ListItem';
 export interface ListProps extends HTMLAttributes<HTMLElement> {
     /** Render a different element — e.g. `'ul'`, `'nav'`, `'menu'`. Defaults to `div`. */
     as?: ElementType;
@@ -10,11 +10,21 @@ export interface ListProps extends HTMLAttributes<HTMLElement> {
     padding?: Spacing;
     /** Default size for the contained `ListItem`s — each item can still override its own `size`. */
     size?: ListItemSize;
+    /**
+     * Default `flush` for the contained `ListItem`s — drops their left / right padding so rows sit flush with
+     * the list's edges (e.g. inside a padded `Card`). Each item can still override its own `flush`.
+     */
+    flush?: boolean;
+    /**
+     * Render skeleton rows instead of `children` — `true` shows 3, a number sets the count. Each row is a
+     * `ListItem` with an icon disc, a label line and a description line. Defaults to `false`.
+     */
+    loading?: boolean | number;
     children?: ReactNode;
 }
 /**
  * A thin semantic container for `ListItem`s — a vertical stack with a configurable `gap`/`padding`
- * and `role="list"` (override `role` to `"menu"` for a dropdown, etc.). `size` sets a default for all
- * contained `ListItem`s. Layout is set via inline style, matching the `Flex`/`Grid` primitives.
+ * and `role="list"` (override `role` to `"menu"` for a dropdown, etc.). `size` and `flush` set defaults
+ * for all contained `ListItem`s (an explicit item prop wins). `loading` swaps the items for skeleton rows. Layout is set via inline style, matching the `Flex`/`Grid` primitives.
  */
 export declare const List: import("react").ForwardRefExoticComponent<ListProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/List/List.d.ts

@@ -1,6 +1,6 @@
 import { type ElementType, type HTMLAttributes, type ReactNode } from 'react';
 import { type Spacing } from '../Flex/Flex';
-import type { ListItemSize } from './ListItem';
+import { type ListItemSize } from './ListItem';
 export interface ListProps extends HTMLAttributes<HTMLElement> {
     /** Render a different element — e.g. `'ul'`, `'nav'`, `'menu'`. Defaults to `div`. */
     as?: ElementType;
@@ -10,11 +10,21 @@ export interface ListProps extends HTMLAttributes<HTMLElement> {
     padding?: Spacing;
     /** Default size for the contained `ListItem`s — each item can still override its own `size`. */
     size?: ListItemSize;
+    /**
+     * Default `flush` for the contained `ListItem`s — drops their left / right padding so rows sit flush with
+     * the list's edges (e.g. inside a padded `Card`). Each item can still override its own `flush`.
+     */
+    flush?: boolean;
+    /**
+     * Render skeleton rows instead of `children` — `true` shows 3, a number sets the count. Each row is a
+     * `ListItem` with an icon disc, a label line and a description line. Defaults to `false`.
+     */
+    loading?: boolean | number;
     children?: ReactNode;
 }
 /**
  * A thin semantic container for `ListItem`s — a vertical stack with a configurable `gap`/`padding`
- * and `role="list"` (override `role` to `"menu"` for a dropdown, etc.). `size` sets a default for all
- * contained `ListItem`s. Layout is set via inline style, matching the `Flex`/`Grid` primitives.
+ * and `role="list"` (override `role` to `"menu"` for a dropdown, etc.). `size` and `flush` set defaults
+ * for all contained `ListItem`s (an explicit item prop wins). `loading` swaps the items for skeleton rows. Layout is set via inline style, matching the `Flex`/`Grid` primitives.
  */
 export declare const List: import("react").ForwardRefExoticComponent<ListProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/List/ListItem.d.cts

@@ -17,6 +17,11 @@ export interface ListItemProps extends Omit<HTMLAttributes<HTMLElement>, 'color'
     disabled?: boolean;
     /** Row size — height / padding / font. Defaults to `md`. */
     size?: ListItemSize;
+    /**
+     * Drops the row's left / right padding so it sits flush with its container's edges (vertical padding
+     * and min-height stay). Defaults to `false`; a surrounding `List flush` sets the default for all its rows.
+     */
+    flush?: boolean;
     /** Theme color for the selected tint and clickable hover. Defaults to `primary`. */
     color?: ThemeColor;
     /** Render a different element/component — e.g. `'a'`, `'button'`, or a router `Link`. Defaults to `div`. */

package/dist/components/List/ListItem.d.ts

@@ -17,6 +17,11 @@ export interface ListItemProps extends Omit<HTMLAttributes<HTMLElement>, 'color'
     disabled?: boolean;
     /** Row size — height / padding / font. Defaults to `md`. */
     size?: ListItemSize;
+    /**
+     * Drops the row's left / right padding so it sits flush with its container's edges (vertical padding
+     * and min-height stay). Defaults to `false`; a surrounding `List flush` sets the default for all its rows.
+     */
+    flush?: boolean;
     /** Theme color for the selected tint and clickable hover. Defaults to `primary`. */
     color?: ThemeColor;
     /** Render a different element/component — e.g. `'a'`, `'button'`, or a router `Link`. Defaults to `div`. */

package/dist/components/List/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../List-ChXO0Hz-.cjs"),t=require("../../ListItem-yXXjtepZ.cjs");exports.List=e.List;exports.default=e.List;exports.ListItem=t.ListItem;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../List-9lUjapQ5.cjs");exports.List=e.List;exports.ListItem=e.ListItem;exports.default=e.List;
 //# sourceMappingURL=index.cjs.map

package/dist/components/List/index.js

@@ -1,8 +1,7 @@
-import { L, L as a } from "../../List-LqbfF6gU.js";
-import { L as o } from "../../ListItem-Cn15lJBr.js";
+import { L as t, a as L, L as e } from "../../List-CZwNGxuP.js";
 export {
-  L as List,
-  o as ListItem,
-  a as default
+  t as List,
+  L as ListItem,
+  e as default
 };
 //# sourceMappingURL=index.js.map

package/dist/components/List/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/List/listContext.d.cts

@@ -1,5 +1,11 @@
 import type { ListItemSize } from './ListItem';
-/** Lets a `List` set a default size that its `ListItem`s inherit (an explicit item `size` still wins). */
-export declare const ListSizeContext: import("react").Context<ListItemSize | undefined>;
-/** Read the size provided by a surrounding `List`, if any. */
+/** Defaults a `List` hands to its `ListItem`s — an explicit item prop still wins. */
+export interface ListContextValue {
+    size?: ListItemSize;
+    flush?: boolean;
+}
+export declare const ListContext: import("react").Context<ListContextValue>;
+/** Read the defaults provided by a surrounding `List`, if any. */
+export declare const useListContext: () => ListContextValue;
+/** @deprecated internal — use `useListContext().size`. Kept so older call sites keep compiling. */
 export declare const useListSize: () => ListItemSize | undefined;

package/dist/components/List/listContext.d.ts

@@ -1,5 +1,11 @@
 import type { ListItemSize } from './ListItem';
-/** Lets a `List` set a default size that its `ListItem`s inherit (an explicit item `size` still wins). */
-export declare const ListSizeContext: import("react").Context<ListItemSize | undefined>;
-/** Read the size provided by a surrounding `List`, if any. */
+/** Defaults a `List` hands to its `ListItem`s — an explicit item prop still wins. */
+export interface ListContextValue {
+    size?: ListItemSize;
+    flush?: boolean;
+}
+export declare const ListContext: import("react").Context<ListContextValue>;
+/** Read the defaults provided by a surrounding `List`, if any. */
+export declare const useListContext: () => ListContextValue;
+/** @deprecated internal — use `useListContext().size`. Kept so older call sites keep compiling. */
 export declare const useListSize: () => ListItemSize | undefined;

package/dist/components/Loader/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Loader-0Imnbael.cjs");exports.Loader=e.Loader;exports.default=e.Loader;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Loader-D9nteBXt.cjs");exports.Loader=e.Loader;exports.default=e.Loader;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Loader/index.js

@@ -1,4 +1,4 @@
-import { L as o, L as r } from "../../Loader-fffFnQqS.js";
+import { L as o, L as r } from "../../Loader-CwyoKoWY.js";
 export {
   o as Loader,
   r as default

package/dist/components/Modal/Modal.d.cts

@@ -34,6 +34,8 @@ export interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
     color?: ThemeColor;
     /** Footer slot — right-aligned actions over a top divider (e.g. Cancel / Confirm buttons). */
     footer?: ReactNode;
+    /** Extra class on the scrollable body element — to tune its padding / layout (e.g. a compact confirm). */
+    bodyClassName?: string;
     /** Show the header × close button. Defaults to `true`. */
     showCloseButton?: boolean;
     /** Close when the backdrop (outside the dialog) is clicked. Defaults to `true`. */

package/dist/components/Modal/Modal.d.ts

@@ -34,6 +34,8 @@ export interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
     color?: ThemeColor;
     /** Footer slot — right-aligned actions over a top divider (e.g. Cancel / Confirm buttons). */
     footer?: ReactNode;
+    /** Extra class on the scrollable body element — to tune its padding / layout (e.g. a compact confirm). */
+    bodyClassName?: string;
     /** Show the header × close button. Defaults to `true`. */
     showCloseButton?: boolean;
     /** Close when the backdrop (outside the dialog) is clicked. Defaults to `true`. */

package/dist/components/Modal/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Modal--e2qGisF.cjs");exports.Modal=e.Modal;exports.default=e.Modal;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Modal-CQDcYS-Y.cjs");exports.Modal=e.Modal;exports.default=e.Modal;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Modal/index.js

@@ -1,4 +1,4 @@
-import { M, M as d } from "../../Modal-DJljaPqV.js";
+import { M, M as d } from "../../Modal-cz6JIsZn.js";
 export {
   M as Modal,
   d as default

package/dist/components/MultiSelect/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../MultiSelect-CvecZeMU.cjs");exports.MultiSelect=e.MultiSelect;exports.default=e.MultiSelect;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../MultiSelect-BIwE6wb7.cjs");exports.MultiSelect=e.MultiSelect;exports.default=e.MultiSelect;
 //# sourceMappingURL=index.cjs.map

package/dist/components/MultiSelect/index.js

@@ -1,4 +1,4 @@
-import { M as a, M as l } from "../../MultiSelect-DLoS04lZ.js";
+import { M as a, M as l } from "../../MultiSelect-C6l0LpIs.js";
 export {
   a as MultiSelect,
   l as default

package/dist/components/MultilineTextField/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../MultilineTextField-Dz6Fg8RJ.cjs");exports.MultilineTextField=e.MultilineTextField;exports.default=e.MultilineTextField;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../MultilineTextField-B6EYAdik.cjs");exports.MultilineTextField=e.MultilineTextField;exports.default=e.MultilineTextField;
 //# sourceMappingURL=index.cjs.map

package/dist/components/MultilineTextField/index.js

@@ -1,4 +1,4 @@
-import { M as t, M as a } from "../../MultilineTextField-CwNCJ9lZ.js";
+import { M as t, M as a } from "../../MultilineTextField-BgfBFeeF.js";
 export {
   t as MultilineTextField,
   a as default

package/dist/components/NumberField/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../NumberField-C_HZXBuw.cjs");exports.NumberField=e.NumberField;exports.default=e.NumberField;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../NumberField-IyhO4OpJ.cjs");exports.NumberField=e.NumberField;exports.default=e.NumberField;
 //# sourceMappingURL=index.cjs.map

package/dist/components/NumberField/index.js

@@ -1,4 +1,4 @@
-import { N as r, N } from "../../NumberField-DYGVQdL5.js";
+import { N as r, N } from "../../NumberField-BpUTV_Qn.js";
 export {
   r as NumberField,
   N as default

package/dist/components/OptionMenu/OptionMenu.d.cts

@@ -0,0 +1,40 @@
+import type { KeyboardEvent, ReactNode, RefObject } from 'react';
+import { type ListItemSize } from '../List';
+import type { OptionMenuState } from './useOptionMenu';
+export interface OptionMenuProps {
+    /** The state from `useOptionMenu`. */
+    menu: OptionMenuState;
+    /** What the panel anchors under (and matches the width of) — also excluded from outside-click. */
+    anchorRef: RefObject<HTMLElement | null>;
+    /** Row size. */
+    size: ListItemSize;
+    /** Search box placeholder + accessible label. Defaults to the localized "Search…". */
+    searchPlaceholder?: string;
+    /** Show a loader row instead of the options (server-side search in flight). */
+    loading?: boolean;
+    /** Text next to the loader. Defaults to the localized "Loading…". */
+    loadingText?: ReactNode;
+    /** Empty-result content — a node or `(query) => node`. Defaults to the localized "No options". */
+    noOptionsText?: ReactNode | ((query: string) => ReactNode);
+    /** Tick the selected option(s). Defaults to `true`. */
+    showSelectedTick?: boolean;
+    /** `aria-multiselectable` on the listbox. */
+    multiselectable?: boolean;
+    /** Labels the listbox (the field label id). */
+    labelledBy?: string;
+    /** Accessible label for the listbox when there's no visible label. */
+    ariaLabel?: string;
+    /** Wraps the search box's key handling (e.g. MultiSelect's Backspace-removes-a-chip). */
+    onSearchKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    /** Extra class on the panel. */
+    className?: string;
+}
+/**
+ * The option popover shared by `Select`, `MultiSelect` and `PhoneField` (internal): a `FloatingPanel`
+ * anchored under the field, an optional sticky search box (`role="combobox"`, `aria-activedescendant`),
+ * and a scrolling `role="listbox"` of `ListItem` options — icon, label, the option's `trailing`, a tick
+ * when selected, the keyboard highlight, disabled rows inert, `group`ed options under a labelled heading —
+ * plus the loading and empty rows. All state
+ * and keys live in `useOptionMenu`; this only renders it.
+ */
+export declare function OptionMenu({ menu, anchorRef, size, searchPlaceholder, loading, loadingText, noOptionsText, showSelectedTick, multiselectable, labelledBy, ariaLabel, onSearchKeyDown, className, }: OptionMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/OptionMenu/OptionMenu.d.ts

@@ -0,0 +1,40 @@
+import type { KeyboardEvent, ReactNode, RefObject } from 'react';
+import { type ListItemSize } from '../List';
+import type { OptionMenuState } from './useOptionMenu';
+export interface OptionMenuProps {
+    /** The state from `useOptionMenu`. */
+    menu: OptionMenuState;
+    /** What the panel anchors under (and matches the width of) — also excluded from outside-click. */
+    anchorRef: RefObject<HTMLElement | null>;
+    /** Row size. */
+    size: ListItemSize;
+    /** Search box placeholder + accessible label. Defaults to the localized "Search…". */
+    searchPlaceholder?: string;
+    /** Show a loader row instead of the options (server-side search in flight). */
+    loading?: boolean;
+    /** Text next to the loader. Defaults to the localized "Loading…". */
+    loadingText?: ReactNode;
+    /** Empty-result content — a node or `(query) => node`. Defaults to the localized "No options". */
+    noOptionsText?: ReactNode | ((query: string) => ReactNode);
+    /** Tick the selected option(s). Defaults to `true`. */
+    showSelectedTick?: boolean;
+    /** `aria-multiselectable` on the listbox. */
+    multiselectable?: boolean;
+    /** Labels the listbox (the field label id). */
+    labelledBy?: string;
+    /** Accessible label for the listbox when there's no visible label. */
+    ariaLabel?: string;
+    /** Wraps the search box's key handling (e.g. MultiSelect's Backspace-removes-a-chip). */
+    onSearchKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    /** Extra class on the panel. */
+    className?: string;
+}
+/**
+ * The option popover shared by `Select`, `MultiSelect` and `PhoneField` (internal): a `FloatingPanel`
+ * anchored under the field, an optional sticky search box (`role="combobox"`, `aria-activedescendant`),
+ * and a scrolling `role="listbox"` of `ListItem` options — icon, label, the option's `trailing`, a tick
+ * when selected, the keyboard highlight, disabled rows inert, `group`ed options under a labelled heading —
+ * plus the loading and empty rows. All state
+ * and keys live in `useOptionMenu`; this only renders it.
+ */
+export declare function OptionMenu({ menu, anchorRef, size, searchPlaceholder, loading, loadingText, noOptionsText, showSelectedTick, multiselectable, labelledBy, ariaLabel, onSearchKeyDown, className, }: OptionMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/OptionMenu/useOptionMenu.d.cts

@@ -0,0 +1,81 @@
+import { type KeyboardEvent, type RefObject } from 'react';
+import type { ReactNode } from 'react';
+import type { IconName } from '../../icons/names';
+/** A single selectable option — shared by `Select`, `MultiSelect` and `PhoneField`. */
+export interface SelectOption {
+    /** The value committed when this option is chosen. */
+    value: string;
+    /** Display + search text. */
+    label: string;
+    /** Greys out and blocks selecting this option. */
+    disabled?: boolean;
+    /** Leading icon — a known `IconName` (rendered as `<Icon>`) or any node. */
+    icon?: IconName | ReactNode;
+    /**
+     * Extra search terms matched alongside the label (case-insensitive, substring) — e.g. a currency's
+     * code (`'USD'`) or a country's calling code (`'995'`). Never shown.
+     */
+    keywords?: readonly string[];
+    /** Content on the right of the row, before the selected tick (e.g. a code or a count). */
+    trailing?: ReactNode;
+    /**
+     * Group heading. Options sharing a `group` are listed together under it (groups in order of first
+     * appearance, options keeping their order within a group); options without one stay ungrouped.
+     */
+    group?: string;
+}
+/**
+ * Stable-group the options: each group gathered at its first appearance, order kept within a group. A
+ * list with no `group` at all is returned untouched (the common case costs nothing).
+ */
+export declare function groupOptions<T extends SelectOption>(options: readonly T[]): readonly T[];
+export interface UseOptionMenuOptions {
+    /** Base for the listbox / option ids (`${idBase}-listbox`, `${idBase}-opt-${i}`). */
+    idBase: string;
+    options: readonly SelectOption[];
+    /** Whether an option is selected (drives the initial highlight when `highlightSelected`). */
+    isSelected: (option: SelectOption) => boolean;
+    /** Called when an option is picked (Enter / Space / click). */
+    onPick: (option: SelectOption) => void;
+    /** Close the menu after a pick (single-select) or keep it open (multi-select). Defaults to `true`. */
+    closeOnPick?: boolean;
+    /** On open, highlight the selected option (single-select) instead of the first. Defaults to `true`. */
+    highlightSelected?: boolean;
+    /** Show a search box that filters by label + keywords. */
+    searchable?: boolean;
+    /** The consumer filters `options` itself (server-side search) — skip the local filter. */
+    onSearchChange?: (query: string) => void;
+    disabled?: boolean;
+    /** The element focus returns to when the menu closes with `refocus` (the trigger / the input). */
+    focusRef: RefObject<HTMLElement | null>;
+    /** Runs on every close (e.g. mark a form field touched). */
+    onClose?: () => void;
+}
+/**
+ * The state + keyboard model behind every option popover (internal): open / close, the search query
+ * and its label + keywords filter, the highlighted row (skipping disabled ones), type-ahead when not
+ * searchable, and one `handleKeyDown` for the trigger and the search box — Arrow / Home / End move,
+ * Enter / Space pick, Escape closes (refocusing), Tab closes and moves on. Render it with `OptionMenu`.
+ */
+export declare function useOptionMenu({ idBase, options, isSelected, onPick, closeOnPick, highlightSelected, searchable, onSearchChange, disabled, focusRef, onClose, }: UseOptionMenuOptions): {
+    open: boolean;
+    openMenu: () => void;
+    closeMenu: (refocus: boolean) => void;
+    toggleMenu: () => void;
+    searchable: boolean;
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
+    filteredOptions: readonly SelectOption[];
+    highlightedIndex: number;
+    setHighlightedIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    isSelected: (option: SelectOption) => boolean;
+    pick: (option: SelectOption | undefined) => void;
+    handleKeyDown: (event: KeyboardEvent) => void;
+    listboxId: string;
+    optionId: (index: number) => string;
+    activeId: string | undefined;
+    searchInputRef: RefObject<HTMLInputElement | null>;
+    popoverRef: RefObject<HTMLDivElement | null>;
+};
+/** Everything `useOptionMenu` returns — pass it to `<OptionMenu menu={…} />`. */
+export type OptionMenuState = ReturnType<typeof useOptionMenu>;

package/dist/components/OptionMenu/useOptionMenu.d.ts

@@ -0,0 +1,81 @@
+import { type KeyboardEvent, type RefObject } from 'react';
+import type { ReactNode } from 'react';
+import type { IconName } from '../../icons/names';
+/** A single selectable option — shared by `Select`, `MultiSelect` and `PhoneField`. */
+export interface SelectOption {
+    /** The value committed when this option is chosen. */
+    value: string;
+    /** Display + search text. */
+    label: string;
+    /** Greys out and blocks selecting this option. */
+    disabled?: boolean;
+    /** Leading icon — a known `IconName` (rendered as `<Icon>`) or any node. */
+    icon?: IconName | ReactNode;
+    /**
+     * Extra search terms matched alongside the label (case-insensitive, substring) — e.g. a currency's
+     * code (`'USD'`) or a country's calling code (`'995'`). Never shown.
+     */
+    keywords?: readonly string[];
+    /** Content on the right of the row, before the selected tick (e.g. a code or a count). */
+    trailing?: ReactNode;
+    /**
+     * Group heading. Options sharing a `group` are listed together under it (groups in order of first
+     * appearance, options keeping their order within a group); options without one stay ungrouped.
+     */
+    group?: string;
+}
+/**
+ * Stable-group the options: each group gathered at its first appearance, order kept within a group. A
+ * list with no `group` at all is returned untouched (the common case costs nothing).
+ */
+export declare function groupOptions<T extends SelectOption>(options: readonly T[]): readonly T[];
+export interface UseOptionMenuOptions {
+    /** Base for the listbox / option ids (`${idBase}-listbox`, `${idBase}-opt-${i}`). */
+    idBase: string;
+    options: readonly SelectOption[];
+    /** Whether an option is selected (drives the initial highlight when `highlightSelected`). */
+    isSelected: (option: SelectOption) => boolean;
+    /** Called when an option is picked (Enter / Space / click). */
+    onPick: (option: SelectOption) => void;
+    /** Close the menu after a pick (single-select) or keep it open (multi-select). Defaults to `true`. */
+    closeOnPick?: boolean;
+    /** On open, highlight the selected option (single-select) instead of the first. Defaults to `true`. */
+    highlightSelected?: boolean;
+    /** Show a search box that filters by label + keywords. */
+    searchable?: boolean;
+    /** The consumer filters `options` itself (server-side search) — skip the local filter. */
+    onSearchChange?: (query: string) => void;
+    disabled?: boolean;
+    /** The element focus returns to when the menu closes with `refocus` (the trigger / the input). */
+    focusRef: RefObject<HTMLElement | null>;
+    /** Runs on every close (e.g. mark a form field touched). */
+    onClose?: () => void;
+}
+/**
+ * The state + keyboard model behind every option popover (internal): open / close, the search query
+ * and its label + keywords filter, the highlighted row (skipping disabled ones), type-ahead when not
+ * searchable, and one `handleKeyDown` for the trigger and the search box — Arrow / Home / End move,
+ * Enter / Space pick, Escape closes (refocusing), Tab closes and moves on. Render it with `OptionMenu`.
+ */
+export declare function useOptionMenu({ idBase, options, isSelected, onPick, closeOnPick, highlightSelected, searchable, onSearchChange, disabled, focusRef, onClose, }: UseOptionMenuOptions): {
+    open: boolean;
+    openMenu: () => void;
+    closeMenu: (refocus: boolean) => void;
+    toggleMenu: () => void;
+    searchable: boolean;
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
+    filteredOptions: readonly SelectOption[];
+    highlightedIndex: number;
+    setHighlightedIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    isSelected: (option: SelectOption) => boolean;
+    pick: (option: SelectOption | undefined) => void;
+    handleKeyDown: (event: KeyboardEvent) => void;
+    listboxId: string;
+    optionId: (index: number) => string;
+    activeId: string | undefined;
+    searchInputRef: RefObject<HTMLInputElement | null>;
+    popoverRef: RefObject<HTMLDivElement | null>;
+};
+/** Everything `useOptionMenu` returns — pass it to `<OptionMenu menu={…} />`. */
+export type OptionMenuState = ReturnType<typeof useOptionMenu>;

package/dist/components/OtpField/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../OtpField-DKbUP0F6.cjs");exports.OtpField=e.OtpField;exports.default=e.OtpField;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../OtpField-HMrxkdiy.cjs");exports.OtpField=e.OtpField;exports.default=e.OtpField;
 //# sourceMappingURL=index.cjs.map

package/dist/components/OtpField/index.js

@@ -1,4 +1,4 @@
-import { O as t, O } from "../../OtpField-CpQr_ZqL.js";
+import { O as t, O } from "../../OtpField-BoLxbGtY.js";
 export {
   t as OtpField,
   O as default

package/dist/components/PageLayout/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../PageLayout-CuWXukUv.cjs");exports.PageLayout=e.PageLayout;exports.default=e.PageLayout;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../PageLayout-DtWG-6dn.cjs");exports.PageLayout=e.PageLayout;exports.default=e.PageLayout;
 //# sourceMappingURL=index.cjs.map

package/dist/components/PageLayout/index.js

@@ -1,4 +1,4 @@
-import { P as o, P as t } from "../../PageLayout-CCcPCfJF.js";
+import { P as o, P as t } from "../../PageLayout-G8F1WgC-.js";
 export {
   o as PageLayout,
   t as default

package/dist/components/PageNotFound/PageNotFound.d.cts

@@ -1,7 +1,7 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
 import { type EmptyStateSize } from '../EmptyState';
 import type { IconName } from '../../icons/names';
-export interface PageNotFoundProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+export interface PageNotFoundProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'color'> {
     /** Hero glyph — an `IconName`, any node, or `false` to hide it. Defaults to `SearchStatus`. */
     icon?: IconName | ReactNode | false;
     /** Heading. Defaults to the localized `notFound.title`. */

package/dist/components/PageNotFound/PageNotFound.d.ts

@@ -1,7 +1,7 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
 import { type EmptyStateSize } from '../EmptyState';
 import type { IconName } from '../../icons/names';
-export interface PageNotFoundProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+export interface PageNotFoundProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'color'> {
     /** Hero glyph — an `IconName`, any node, or `false` to hide it. Defaults to `SearchStatus`. */
     icon?: IconName | ReactNode | false;
     /** Heading. Defaults to the localized `notFound.title`. */