@techzyapp/ui-library 1.0.25 → 1.0.28

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-CEt95jcC.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-2yM0mmyj.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-on-K0_fM.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-CkliY82J.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-DGHu7Vm3.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-DzPh_G6H.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`. */

package/dist/components/PageNotFound/index.cjs

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

package/dist/components/PageNotFound/index.js

@@ -1,4 +1,4 @@
-import { P as e, P as t } from "../../PageNotFound-CCFfPHgA.js";
+import { P as e, P as t } from "../../PageNotFound-CeKIMZ55.js";
 export {
   e as PageNotFound,
   t as default

package/dist/components/Pagination/index.cjs

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

package/dist/components/Pagination/index.js

@@ -1,4 +1,4 @@
-import { P as t, P } from "../../Pagination-CmskZjcz.js";
+import { P as t, P } from "../../Pagination-CE1uKrR4.js";
 export {
   t as Pagination,
   P as default

package/dist/components/PaletteField/PaletteField.d.cts

@@ -0,0 +1,30 @@
+import { type CSSProperties } from 'react';
+import type { GeneratePaletteOptions } from '../../helpers/palette';
+import { type ColorPickerProps } from '../ColorPicker';
+import { type ColorRampProps } from '../ColorRamp';
+export interface PaletteFieldProps extends Omit<ColorPickerProps, 'swatches'> {
+    /** Token prefix for the ramp (see `ColorRamp.name`). Defaults to `name`, then `'color'`. */
+    rampName?: string;
+    /** `generatePalette` overrides, forwarded to the ramp. */
+    paletteOptions?: GeneratePaletteOptions;
+    /** Ramp height (default `md`). */
+    rampSize?: ColorRampProps['size'];
+    /** Hide the ramp (default `false`). */
+    hideRamp?: boolean;
+    /** Brand colors are opaque: hide the alpha slider and emit `#rrggbb` only (default `true`). */
+    opaque?: boolean;
+    /** Forwarded to the ramp's `onCopy`. */
+    onCopyStep?: ColorRampProps['onCopy'];
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * The composition every configurator page repeats: a **`ColorPicker`** with the **`ColorRamp`** of its
+ * current value directly beneath, both bound to the same value. Works controlled (`value` +
+ * `onChange`), uncontrolled (`defaultValue`), and inside `<Form>` by `name` — the ramp always reflects
+ * the live field value (including `setValue` / `reset`), read through the same `useFormContext` binding
+ * `ColorPicker` uses, so there is exactly one source of truth. `label` / `helperText` / `error` /
+ * `required` go to the picker; the ramp shows no chrome of its own here (its bounds row stays).
+ * `opaque` (default `true`) passes `alpha={false}` to the picker: no alpha slider, `#rrggbb` only.
+ */
+export declare const PaletteField: import("react").ForwardRefExoticComponent<PaletteFieldProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/PaletteField/PaletteField.d.ts

@@ -0,0 +1,30 @@
+import { type CSSProperties } from 'react';
+import type { GeneratePaletteOptions } from '../../helpers/palette';
+import { type ColorPickerProps } from '../ColorPicker';
+import { type ColorRampProps } from '../ColorRamp';
+export interface PaletteFieldProps extends Omit<ColorPickerProps, 'swatches'> {
+    /** Token prefix for the ramp (see `ColorRamp.name`). Defaults to `name`, then `'color'`. */
+    rampName?: string;
+    /** `generatePalette` overrides, forwarded to the ramp. */
+    paletteOptions?: GeneratePaletteOptions;
+    /** Ramp height (default `md`). */
+    rampSize?: ColorRampProps['size'];
+    /** Hide the ramp (default `false`). */
+    hideRamp?: boolean;
+    /** Brand colors are opaque: hide the alpha slider and emit `#rrggbb` only (default `true`). */
+    opaque?: boolean;
+    /** Forwarded to the ramp's `onCopy`. */
+    onCopyStep?: ColorRampProps['onCopy'];
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * The composition every configurator page repeats: a **`ColorPicker`** with the **`ColorRamp`** of its
+ * current value directly beneath, both bound to the same value. Works controlled (`value` +
+ * `onChange`), uncontrolled (`defaultValue`), and inside `<Form>` by `name` — the ramp always reflects
+ * the live field value (including `setValue` / `reset`), read through the same `useFormContext` binding
+ * `ColorPicker` uses, so there is exactly one source of truth. `label` / `helperText` / `error` /
+ * `required` go to the picker; the ramp shows no chrome of its own here (its bounds row stays).
+ * `opaque` (default `true`) passes `alpha={false}` to the picker: no alpha slider, `#rrggbb` only.
+ */
+export declare const PaletteField: import("react").ForwardRefExoticComponent<PaletteFieldProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/PaletteField/index.cjs

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

package/dist/components/PaletteField/index.cjs.map

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

package/dist/components/PaletteField/index.d.cts

@@ -0,0 +1,2 @@
+export { PaletteField, PaletteField as default } from './PaletteField';
+export type { PaletteFieldProps } from './PaletteField';

package/dist/components/PaletteField/index.d.ts

@@ -0,0 +1,2 @@
+export { PaletteField, PaletteField as default } from './PaletteField';
+export type { PaletteFieldProps } from './PaletteField';

package/dist/components/PaletteField/index.js

@@ -0,0 +1,6 @@
+import { P as t, P as l } from "../../PaletteField-BBPbkDcp.js";
+export {
+  t as PaletteField,
+  l as default
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/PhoneField/PhoneField.d.cts

@@ -0,0 +1,54 @@
+import { type InputHTMLAttributes, type ReactNode } from 'react';
+import { type PhoneCountry, type PhoneFormat } from './phone';
+export type PhoneFieldSize = 'sm' | 'md' | 'lg';
+/** Extra details handed to `onChange` alongside the E.164 value. */
+export interface PhoneFieldChangeMeta {
+    /** The number's country (ISO alpha-2). */
+    country: PhoneCountry;
+    /** The national significant number — digits only, no trunk `0`. */
+    national: string;
+    /** A complete, valid number for that country. */
+    valid: boolean;
+}
+export interface PhoneFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'type' | 'size' | 'color'> {
+    /** The number in **E.164** (`'+995555123456'`) — the only form the field emits. `''` when empty. */
+    value?: string;
+    /** Initial E.164 value for uncontrolled use. */
+    defaultValue?: string;
+    /** Fires with the E.164 value (`''` when cleared) and `{ country, national, valid }`. */
+    onChange?: (value: string, meta: PhoneFieldChangeMeta) => void;
+    /** The country to start with. Defaults to one derived from the UI language / browser locale. */
+    defaultCountry?: PhoneCountry;
+    /** Restrict the selectable countries (e.g. only where you operate). Defaults to all. */
+    countries?: readonly PhoneCountry[];
+    /** Countries pinned to the top of the list, in this order. */
+    preferredCountries?: readonly PhoneCountry[];
+    /**
+     * How the number reads while typing — `national` (default: `555 12 34 56`, the calling code lives in
+     * the country button) or `international` (`+995 555 12 34 56`). The value is E.164 either way.
+     */
+    format?: PhoneFormat;
+    /** Field label. */
+    label?: ReactNode;
+    /** Helper / validation text under the field. */
+    helperText?: ReactNode;
+    /** Error state (red border + helper). */
+    error?: boolean;
+    /** Shows a required asterisk. */
+    required?: boolean;
+    /** `sm` / `md` / `lg` — control height + type. Defaults to `md`. */
+    size?: PhoneFieldSize;
+    /** Stretch to the container. Defaults to `true`. */
+    fullWidth?: boolean;
+}
+/**
+ * A phone-number field: a **country button** (flag + `+code`, opening a searchable, localized country
+ * list) inside the input frame, and the number **formatted as you type** for that country. The value is
+ * always **E.164** (`'+995555123456'`) — one canonical form for the backend. Typing or pasting `+44…`
+ * switches the country by its calling code. `onChange(value, { country, national, valid })`; binds to a
+ * `<Form>` by `name` (the form value is the E.164 string — validate with `isValidPhone`). Country names
+ * come from `Intl.DisplayNames` in the active UI language; flags are emoji. Needs the optional peer
+ * **`libphonenumber-js`** (formatting, parsing, validation metadata), loaded lazily on first mount — until
+ * it's ready (or if it isn't installed) a disabled look-alike field renders. Reuses the `TextField` look.
+ */
+export declare const PhoneField: import("react").ForwardRefExoticComponent<PhoneFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/PhoneField/PhoneField.d.ts

@@ -0,0 +1,54 @@
+import { type InputHTMLAttributes, type ReactNode } from 'react';
+import { type PhoneCountry, type PhoneFormat } from './phone';
+export type PhoneFieldSize = 'sm' | 'md' | 'lg';
+/** Extra details handed to `onChange` alongside the E.164 value. */
+export interface PhoneFieldChangeMeta {
+    /** The number's country (ISO alpha-2). */
+    country: PhoneCountry;
+    /** The national significant number — digits only, no trunk `0`. */
+    national: string;
+    /** A complete, valid number for that country. */
+    valid: boolean;
+}
+export interface PhoneFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'type' | 'size' | 'color'> {
+    /** The number in **E.164** (`'+995555123456'`) — the only form the field emits. `''` when empty. */
+    value?: string;
+    /** Initial E.164 value for uncontrolled use. */
+    defaultValue?: string;
+    /** Fires with the E.164 value (`''` when cleared) and `{ country, national, valid }`. */
+    onChange?: (value: string, meta: PhoneFieldChangeMeta) => void;
+    /** The country to start with. Defaults to one derived from the UI language / browser locale. */
+    defaultCountry?: PhoneCountry;
+    /** Restrict the selectable countries (e.g. only where you operate). Defaults to all. */
+    countries?: readonly PhoneCountry[];
+    /** Countries pinned to the top of the list, in this order. */
+    preferredCountries?: readonly PhoneCountry[];
+    /**
+     * How the number reads while typing — `national` (default: `555 12 34 56`, the calling code lives in
+     * the country button) or `international` (`+995 555 12 34 56`). The value is E.164 either way.
+     */
+    format?: PhoneFormat;
+    /** Field label. */
+    label?: ReactNode;
+    /** Helper / validation text under the field. */
+    helperText?: ReactNode;
+    /** Error state (red border + helper). */
+    error?: boolean;
+    /** Shows a required asterisk. */
+    required?: boolean;
+    /** `sm` / `md` / `lg` — control height + type. Defaults to `md`. */
+    size?: PhoneFieldSize;
+    /** Stretch to the container. Defaults to `true`. */
+    fullWidth?: boolean;
+}
+/**
+ * A phone-number field: a **country button** (flag + `+code`, opening a searchable, localized country
+ * list) inside the input frame, and the number **formatted as you type** for that country. The value is
+ * always **E.164** (`'+995555123456'`) — one canonical form for the backend. Typing or pasting `+44…`
+ * switches the country by its calling code. `onChange(value, { country, national, valid })`; binds to a
+ * `<Form>` by `name` (the form value is the E.164 string — validate with `isValidPhone`). Country names
+ * come from `Intl.DisplayNames` in the active UI language; flags are emoji. Needs the optional peer
+ * **`libphonenumber-js`** (formatting, parsing, validation metadata), loaded lazily on first mount — until
+ * it's ready (or if it isn't installed) a disabled look-alike field renders. Reuses the `TextField` look.
+ */
+export declare const PhoneField: import("react").ForwardRefExoticComponent<PhoneFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/PhoneField/index.cjs

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

package/dist/components/PhoneField/index.cjs.map

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

package/dist/components/PhoneField/index.d.cts

@@ -0,0 +1,4 @@
+export { PhoneField, PhoneField as default } from './PhoneField';
+export type { PhoneFieldProps, PhoneFieldSize, PhoneFieldChangeMeta } from './PhoneField';
+export { isValidPhone } from './phone';
+export type { PhoneCountry, PhoneFormat } from './phone';

package/dist/components/PhoneField/index.d.ts

@@ -0,0 +1,4 @@
+export { PhoneField, PhoneField as default } from './PhoneField';
+export type { PhoneFieldProps, PhoneFieldSize, PhoneFieldChangeMeta } from './PhoneField';
+export { isValidPhone } from './phone';
+export type { PhoneCountry, PhoneFormat } from './phone';

package/dist/components/PhoneField/index.js

@@ -0,0 +1,7 @@
+import { P as i, P as o, i as s } from "../../PhoneField-B-L0xAtD.js";
+export {
+  i as PhoneField,
+  o as default,
+  s as isValidPhone
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/PhoneField/phone.d.cts

@@ -0,0 +1,50 @@
+import type * as PhoneLibModule from 'libphonenumber-js';
+import type { CountryCode } from 'libphonenumber-js';
+/**
+ * `libphonenumber-js` is an optional peer, loaded **lazily** (see `optionalPeer`) — never imported
+ * statically, so apps that don't install it still build + run when they import the barrel. PhoneField
+ * waits for it on mount; the helpers below run only once it's loaded (`lib()`).
+ */
+export declare const phonePeer: import("../../hooks/useOptionalPeer").OptionalPeer<typeof PhoneLibModule>;
+/** An ISO-3166 alpha-2 country code, as `libphonenumber-js` knows it (`'GE'`, `'US'`, …). */
+export type PhoneCountry = CountryCode;
+/** How the number is shown in the input while typing (the value is always E.164). */
+export type PhoneFormat = 'national' | 'international';
+/** Every country `libphonenumber-js` has metadata for (once loaded). */
+export declare function getPhoneCountries(): readonly PhoneCountry[];
+/** The country's calling code without the `+` — `'GE'` → `'995'`. */
+export declare const callingCodeOf: (country: PhoneCountry) => string;
+/**
+ * `true` for a complete, valid number (E.164 or any parseable international form). Use it in a schema:
+ * `phone: z.string().refine(isValidPhone, 'Enter a valid phone number')`. Needs `libphonenumber-js`
+ * loaded — it is once any PhoneField has mounted; before that it starts the load and returns `false`.
+ */
+export declare function isValidPhone(value: unknown): boolean;
+/** A flag emoji from the two regional-indicator letters — no image assets (Windows shows the letters). */
+export declare function flagEmoji(country: string): string;
+/** The country's name in `locale` via `Intl.DisplayNames` (no catalog to ship); falls back to the code. */
+export declare function countryName(country: string, locale: string): string;
+/** The default country: the locale's region → its language's usual country → the browser's region → US. */
+export declare function detectCountry(locale: string, allowed: readonly PhoneCountry[]): PhoneCountry;
+/** The result of reading what's in the input. */
+export interface PhoneReading {
+    /** The canonical value — `'+995555123456'`, or `''` when empty. */
+    e164: string;
+    /** The country the number belongs to (may switch when a `+code` is typed). */
+    country: PhoneCountry;
+    /** The national significant number — digits only, no trunk `0`. */
+    national: string;
+    /** A complete, valid number. */
+    valid: boolean;
+    /** What the input should show (formatted as you type). */
+    display: string;
+}
+/** Read raw input text → the canonical value + the formatted display, as the user types. */
+export declare function readPhoneInput(raw: string, country: PhoneCountry, format: PhoneFormat, allowed: readonly PhoneCountry[]): PhoneReading;
+/** Derive the country + display from an E.164 value (initial / external value changes). */
+export declare function phoneFromValue(value: string, fallback: PhoneCountry, format: PhoneFormat, allowed: readonly PhoneCountry[]): {
+    country: PhoneCountry;
+    display: string;
+};
+/** Caret index in `display` right after its `n`-th digit — keeps the caret put while reformatting. */
+export declare function caretAfterDigits(display: string, n: number): number;