@photon-ai/pho-ui 1.4.0 → 1.5.0

package/dist/index.js

@@ -5,25 +5,25 @@ import { t as S } from "./chunks/resolve-variant-CcD8iG5l.js";
 import { n as I, r as T, t as i } from "./chunks/use-press-pulse-8iorQPsh.js";
 import "./utils.js";
 import { a as B, c as e, d as R, f as C, i as O, l as f, n as p, o as P, r as u, s as D, t as N, u as L } from "./chunks/close-button-B8gF5UNk.js";
-import { a as U, c, i as G, n as l, o as M, r as d, s as g, t as k } from "./chunks/sidebar-DGpEKxOn.js";
-import { a as F, i as Z, n as b, o as v, r as H, s as w, t as x } from "./chunks/basic-page-4_GZOvRr.js";
+import { a as U, i as c, n as G, o as l, r as M, s as d, t as g } from "./chunks/basic-page-awtvmT-6.js";
+import { a as W, c as F, i as Z, n as b, o as v, r as H, s as w, t as x } from "./chunks/sidebar-DLYTxo2j.js";
 import { t as h } from "./chunks/input-CxS7ndpb.js";
 import { t as q } from "./chunks/input-group-D6dlma8k.js";
 import { n as z, t as J } from "./chunks/card-9cGnv-VD.js";
-import { n as Q, t as X } from "./chunks/dialog-Ba0UUE5g.js";
+import { n as Q, t as X } from "./chunks/dialog--PQoodig.js";
 import { i as aa, n as sa, r as ta, t as oa } from "./chunks/status-view-CcbctPqR.js";
 export {
-  x as BASIC_PAGE_CALLOUT,
-  b as BASIC_PAGE_CARD,
-  H as BASIC_PAGE_ITEM,
-  Z as BASIC_PAGE_ITEM_PANEL,
-  F as BASIC_PAGE_ITEM_PANEL_DIVIDED,
-  v as BASIC_PAGE_ROW,
+  g as BASIC_PAGE_CALLOUT,
+  G as BASIC_PAGE_CARD,
+  M as BASIC_PAGE_ITEM,
+  c as BASIC_PAGE_ITEM_PANEL,
+  U as BASIC_PAGE_ITEM_PANEL_DIVIDED,
+  l as BASIC_PAGE_ROW,
   p as BUTTON_COLORS,
   u as BUTTON_SHAPES,
   O as BUTTON_SIZES,
   B as BUTTON_VARIANTS,
-  w as BasicPage,
+  d as BasicPage,
   P as Button,
   D as ButtonLink,
   J as CARD_SURFACE,
@@ -38,17 +38,17 @@ export {
   h as Input,
   q as InputGroup,
   _ as LinkProvider,
-  k as SIDEBAR_HEADER_INSET,
-  l as SIDEBAR_ITEM,
-  d as SIDEBAR_ITEM_ACTIVE,
-  G as SIDEBAR_ITEM_INACTIVE,
-  U as SIDEBAR_ROOT,
-  M as SIDEBAR_ROOT_BASE,
-  g as SIDEBAR_ROOT_INSET,
+  x as SIDEBAR_HEADER_INSET,
+  b as SIDEBAR_ITEM,
+  H as SIDEBAR_ITEM_ACTIVE,
+  Z as SIDEBAR_ITEM_INACTIVE,
+  W as SIDEBAR_ROOT,
+  v as SIDEBAR_ROOT_BASE,
+  w as SIDEBAR_ROOT_INSET,
   oa as STATUS_VIEW,
   sa as STATUS_VIEW_COPY,
   ta as STATUS_VIEW_SIZES,
-  c as Sidebar,
+  F as Sidebar,
   aa as StatusView,
   R as buttonVariants,
   s as cn,

package/dist/sections/basic-page.js

@@ -1,5 +1,5 @@
 "use client";
-import { a as _, i as E, n as I, o as a, r as s, s as P, t as C } from "../chunks/basic-page-4_GZOvRr.js";
+import { a as _, i as E, n as I, o as a, r as s, s as P, t as C } from "../chunks/basic-page-awtvmT-6.js";
 export {
   C as BASIC_PAGE_CALLOUT,
   I as BASIC_PAGE_CARD,

package/dist/sections/sidebar.js

@@ -1,5 +1,5 @@
 "use client";
-import { a as I, c as _, i as A, n as R, o as S, r as a, s, t as T } from "../chunks/sidebar-DGpEKxOn.js";
+import { a as I, c as _, i as A, n as R, o as S, r as a, s, t as T } from "../chunks/sidebar-DLYTxo2j.js";
 export {
   T as SIDEBAR_HEADER_INSET,
   R as SIDEBAR_ITEM,

package/dist/src/components/command/command.d.ts

@@ -0,0 +1,114 @@
+import { ComponentProps, ReactNode } from 'react';
+import { Command as CommandPrimitive, useCommandState } from 'cmdk';
+import { Dialog as PhoDialog } from '../dialog';
+declare function Root({ className, children, ...props }: ComponentProps<typeof CommandPrimitive>): import("react").JSX.Element;
+/**
+ * The input row — a bottom hairline separates it from the list. Position
+ * leading icons absolutely and pad the input (`pl-9`), mirroring
+ * `Autocomplete.InputGroup`.
+ */
+declare function InputGroup({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function Input({ className, value, ref: consumerRef, ...props }: ComponentProps<typeof CommandPrimitive.Input>): import("react").JSX.Element;
+declare function List({ className, children, ...props }: ComponentProps<typeof CommandPrimitive.List>): import("react").JSX.Element;
+declare function Empty({ className, ...props }: ComponentProps<typeof CommandPrimitive.Empty>): import("react").JSX.Element;
+declare function Group({ className, ...props }: ComponentProps<typeof CommandPrimitive.Group>): import("react").JSX.Element;
+/**
+ * Row layout mode:
+ * - `item` / `subitem` / `subsubitem` — idle hierarchy (icon column + indent)
+ * - `result` — flat search hit (breadcrumb + trailing scope)
+ */
+export type CommandItemLevel = "item" | "subitem" | "subsubitem" | "result";
+type ItemPrimitiveProps = ComponentProps<typeof CommandPrimitive.Item>;
+export interface CommandItemProps extends Omit<ItemPrimitiveProps, "children" | "title"> {
+    /**
+     * Row depth / mode in the palette:
+     * - `item` — page / top destination (icon + title)
+     * - `subitem` — section under an item (label aligns with the item title)
+     * - `subsubitem` — row under a section (one step deeper)
+     * - `result` — flat search hit (`title` + `path` crumbs + `scope`)
+     */
+    level?: CommandItemLevel;
+    /**
+     * Leading glyph. On idle `item` rows (and reserved for sub-levels). On
+     * `result` rows, pass the resolved icon (self → parent → grandparent).
+     */
+    icon?: ReactNode;
+    /**
+     * When `level="result"`, force the icon column so labels align across the
+     * list even if this row's `icon` is empty. Set true when any sibling result
+     * has an icon; omit when the whole result set is icon-less.
+     */
+    iconSlot?: boolean;
+    /** Primary label. Prefer this over free-form children for the shared layout. */
+    title?: ReactNode;
+    /**
+     * Ancestors after `title` for `level="result"` — parent → page
+     * (e.g. `["Agent profile", "Settings"]` → `Name < Agent profile < Settings`).
+     */
+    path?: ReactNode[];
+    /**
+     * Trailing scope for `level="result"` — `Project` vs `Personal`, not a nav group.
+     */
+    scope?: ReactNode;
+    /** Shows a trailing external-link glyph (opens outside the app). */
+    external?: boolean;
+    /**
+     * Free-form content. When `title` is set, rendered after the label stack.
+     * When `title` is omitted, becomes the row body (legacy / simple items).
+     */
+    children?: ReactNode;
+}
+/** Leading icon column — `size-4`, secondary ink. */
+declare function ItemIcon({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
+/** Primary label — medium + primary ink on `item` rows. */
+declare function ItemTitle({ className, level, ...props }: ComponentProps<"span"> & {
+    level?: CommandItemLevel;
+}): import("react").JSX.Element;
+declare function Item({ className, level, icon, iconSlot, title, path, scope, external, children, value, ...props }: CommandItemProps): import("react").JSX.Element;
+declare function Separator({ className, ...props }: ComponentProps<typeof CommandPrimitive.Separator>): import("react").JSX.Element;
+declare function Loading({ className, ...props }: ComponentProps<typeof CommandPrimitive.Loading>): import("react").JSX.Element;
+type DialogRootProps = ComponentProps<typeof PhoDialog.Root>;
+interface CommandDialogProps extends ComponentProps<typeof CommandPrimitive> {
+    /** Controlled dialog state — pass straight through to `Dialog.Root`. */
+    open?: DialogRootProps["open"];
+    onOpenChange?: DialogRootProps["onOpenChange"];
+    /** Accessible name for the palette (dialog and command menu). */
+    label?: string;
+    /** Extra classes for the dialog panel (not the command root). */
+    className?: string;
+}
+/**
+ * A command palette in a modal — Pho's `Dialog` overlay (Base UI) around a
+ * `Command.Root`, raised above center. We deliberately skip cmdk's own
+ * `Command.Dialog` (Radix) so overlays stay on one primitive stack.
+ *
+ * List height springs via `AnimatedHeight` (same feel as the Card shell on
+ * onboarding / invite) — the input row stays put while results resize.
+ */
+declare function Dialog({ open, onOpenChange, label, className, children, ...props }: CommandDialogProps): import("react").JSX.Element;
+/**
+ * Command menu built on `cmdk` — a filterable list of actions driven from a
+ * single input, keyboard-first. Compose inline (`Command.Root`) or as a
+ * ⌘K-style modal palette (`Command.Dialog`, which owns the overlay). By
+ * default cmdk filters and ranks items for you; pass `shouldFilter={false}`
+ * to render your own result set (e.g. hierarchy-preserving navigation).
+ *
+ * Rows share one layout via `Command.Item` `level` — idle
+ * `item` → `subitem` → `subsubitem`, or flat `result` while searching.
+ */
+export declare const Command: {
+    Root: typeof Root;
+    InputGroup: typeof InputGroup;
+    Input: typeof Input;
+    List: typeof List;
+    Empty: typeof Empty;
+    Group: typeof Group;
+    Item: typeof Item;
+    ItemIcon: typeof ItemIcon;
+    ItemTitle: typeof ItemTitle;
+    Separator: typeof Separator;
+    Loading: typeof Loading;
+    Dialog: typeof Dialog;
+};
+/** Re-export of cmdk's state selector hook (search, value, filtered counts). */
+export { useCommandState };

package/dist/src/components/command/index.d.ts

@@ -0,0 +1 @@
+export { Command, useCommandState, type CommandItemLevel, type CommandItemProps, } from './command';

package/dist/src/components/dialog/dialog.d.ts

@@ -40,6 +40,12 @@ declare function Popup({ className, ...props }: StyledProps<typeof BaseDialog.Po
 declare function Title({ className, ...props }: StyledProps<typeof BaseDialog.Title>): import("react").JSX.Element;
 declare function Description({ className, ...props }: StyledProps<typeof BaseDialog.Description>): import("react").JSX.Element;
 interface ContentProps extends Omit<StyledProps<typeof BaseDialog.Popup>, "title"> {
+    /**
+     * Decorative icon above the title — typically a Tabler outline icon.
+     * Rendered aria-hidden in secondary ink at 32px (`[&>svg]:size-8`). Pass a
+     * styled node to override the ink; the size is owned by the slot.
+     */
+    icon?: ReactNode;
     /** Heading rendered in the panel header. */
     title?: ReactNode;
     /** Supporting text under the title. */
@@ -77,7 +83,77 @@ interface ContentProps extends Omit<StyledProps<typeof BaseDialog.Popup>, "title
  * full control, compose the parts directly (`Dialog.Portal` /
  * `Dialog.Backdrop` / `Dialog.Popup`).
  */
-declare function Content({ title, description, consequences, warning, actions, showClose, children, className, ...props }: ContentProps): import("react").JSX.Element;
+declare function Content({ icon, title, description, consequences, warning, actions, showClose, children, className, ...props }: ContentProps): import("react").JSX.Element;
+/**
+ * Near-fullscreen popup — the viewport minus a breathing ring, floating over
+ * a backdrop (the page stays visible through the gap, so it dims like any
+ * floating layer). Still a card: border, elevation, rounded corners; the
+ * scale gesture stays but shrinks to 98% — at this size 95% reads like a jump.
+ */
+declare function InsetPopup({ className, ...props }: StyledProps<typeof BaseDialog.Popup>): import("react").JSX.Element;
+interface InsetContentProps extends Omit<StyledProps<typeof BaseDialog.Popup>, "title"> {
+    /** Decorative icon above the title — same treatment as `Content`. */
+    icon?: ReactNode;
+    /** Heading rendered in the panel header. */
+    title?: ReactNode;
+    /** Supporting text under the title. */
+    description?: ReactNode;
+    /**
+     * Bottom action row. Iron rule as `Content`: when `actions` is set, the
+     * header close button is never shown — dismiss via the actions.
+     */
+    actions?: ReactNode;
+    /**
+     * Header close control. Only applies when `actions` is absent.
+     * @default true
+     */
+    showClose?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Convenience near-fullscreen panel: header pinned on top, body filling and
+ * scrolling on its own, optional action row pinned at the bottom. Sits
+ * between `Content` (a focused card) and `FullscreenContent` (a page
+ * takeover): use it for roomy working surfaces — pickers, editors, previews —
+ * that still want the page peeking through an edge.
+ */
+declare function InsetContent({ icon, title, description, actions, showClose, children, className, ...props }: InsetContentProps): import("react").JSX.Element;
+/**
+ * Full-viewport popup — a page-surface takeover instead of a floating card.
+ * No backdrop: the popup itself is the layer. Fade only; scale is a floating-
+ * card gesture and reads wrong at viewport size.
+ */
+declare function FullscreenPopup({ className, ...props }: StyledProps<typeof BaseDialog.Popup>): import("react").JSX.Element;
+interface FullscreenContentProps extends Omit<StyledProps<typeof BaseDialog.Popup>, "title"> {
+    /**
+     * Decorative icon above the title — same chrome as `Content`, but 48px
+     * (`size-12`) for viewport-scale gates.
+     */
+    icon?: ReactNode;
+    /** Heading of the takeover. */
+    title?: ReactNode;
+    /** Supporting text under the title. */
+    description?: ReactNode;
+    /**
+     * Action row under the body. Iron rule as `Content`: when `actions` is set,
+     * the corner close button is never shown — dismiss via the actions.
+     */
+    actions?: ReactNode;
+    /**
+     * Corner close control. Only applies when `actions` is absent.
+     * @default true
+     */
+    showClose?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Convenience full-screen panel: the whole viewport becomes the dialog, with
+ * a centered column at the standalone-flow width (28rem — the same measure as
+ * onboarding / invite cards). Use for gates the visitor must deal with before
+ * the page behind makes sense (e.g. binding a phone number); prefer `Content`
+ * for everything conversational.
+ */
+declare function FullscreenContent({ icon, title, description, actions, showClose, children, className, ...props }: FullscreenContentProps): import("react").JSX.Element;
 /**
  * Modal dialog built on Base UI `Dialog`. Controlled or uncontrolled via
  * `Dialog.Root` (`open` / `onOpenChange` / `defaultOpen`). `Dialog.Action`
@@ -90,10 +166,14 @@ export declare const Dialog: {
     Portal: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').AlertDialogPortalProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     Backdrop: typeof Backdrop;
     Popup: typeof Popup;
+    InsetPopup: typeof InsetPopup;
+    FullscreenPopup: typeof FullscreenPopup;
     Title: typeof Title;
     Description: typeof Description;
     Close: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').AlertDialogCloseProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
     Action: typeof Action;
     Content: typeof Content;
+    InsetContent: typeof InsetContent;
+    FullscreenContent: typeof FullscreenContent;
 };
 export {};

package/dist/src/components/phone-input/country-alpha3.d.ts

@@ -0,0 +1,250 @@
+import { CountryCode } from 'libphonenumber-js/min';
+/** ISO 3166-1 alpha-3 for every country code `libphonenumber-js` exposes. */
+export declare const COUNTRY_ALPHA3: {
+    readonly AC: "ASC";
+    readonly AD: "AND";
+    readonly AE: "ARE";
+    readonly AF: "AFG";
+    readonly AG: "ATG";
+    readonly AI: "AIA";
+    readonly AL: "ALB";
+    readonly AM: "ARM";
+    readonly AO: "AGO";
+    readonly AR: "ARG";
+    readonly AS: "ASM";
+    readonly AT: "AUT";
+    readonly AU: "AUS";
+    readonly AW: "ABW";
+    readonly AX: "ALA";
+    readonly AZ: "AZE";
+    readonly BA: "BIH";
+    readonly BB: "BRB";
+    readonly BD: "BGD";
+    readonly BE: "BEL";
+    readonly BF: "BFA";
+    readonly BG: "BGR";
+    readonly BH: "BHR";
+    readonly BI: "BDI";
+    readonly BJ: "BEN";
+    readonly BL: "BLM";
+    readonly BM: "BMU";
+    readonly BN: "BRN";
+    readonly BO: "BOL";
+    readonly BQ: "BES";
+    readonly BR: "BRA";
+    readonly BS: "BHS";
+    readonly BT: "BTN";
+    readonly BW: "BWA";
+    readonly BY: "BLR";
+    readonly BZ: "BLZ";
+    readonly CA: "CAN";
+    readonly CC: "CCK";
+    readonly CD: "COD";
+    readonly CF: "CAF";
+    readonly CG: "COG";
+    readonly CH: "CHE";
+    readonly CI: "CIV";
+    readonly CK: "COK";
+    readonly CL: "CHL";
+    readonly CM: "CMR";
+    readonly CN: "CHN";
+    readonly CO: "COL";
+    readonly CR: "CRI";
+    readonly CU: "CUB";
+    readonly CV: "CPV";
+    readonly CW: "CUW";
+    readonly CX: "CXR";
+    readonly CY: "CYP";
+    readonly CZ: "CZE";
+    readonly DE: "DEU";
+    readonly DJ: "DJI";
+    readonly DK: "DNK";
+    readonly DM: "DMA";
+    readonly DO: "DOM";
+    readonly DZ: "DZA";
+    readonly EC: "ECU";
+    readonly EE: "EST";
+    readonly EG: "EGY";
+    readonly EH: "ESH";
+    readonly ER: "ERI";
+    readonly ES: "ESP";
+    readonly ET: "ETH";
+    readonly FI: "FIN";
+    readonly FJ: "FJI";
+    readonly FK: "FLK";
+    readonly FM: "FSM";
+    readonly FO: "FRO";
+    readonly FR: "FRA";
+    readonly GA: "GAB";
+    readonly GB: "GBR";
+    readonly GD: "GRD";
+    readonly GE: "GEO";
+    readonly GF: "GUF";
+    readonly GG: "GGY";
+    readonly GH: "GHA";
+    readonly GI: "GIB";
+    readonly GL: "GRL";
+    readonly GM: "GMB";
+    readonly GN: "GIN";
+    readonly GP: "GLP";
+    readonly GQ: "GNQ";
+    readonly GR: "GRC";
+    readonly GT: "GTM";
+    readonly GU: "GUM";
+    readonly GW: "GNB";
+    readonly GY: "GUY";
+    readonly HK: "HKG";
+    readonly HN: "HND";
+    readonly HR: "HRV";
+    readonly HT: "HTI";
+    readonly HU: "HUN";
+    readonly ID: "IDN";
+    readonly IE: "IRL";
+    readonly IL: "ISR";
+    readonly IM: "IMN";
+    readonly IN: "IND";
+    readonly IO: "IOT";
+    readonly IQ: "IRQ";
+    readonly IR: "IRN";
+    readonly IS: "ISL";
+    readonly IT: "ITA";
+    readonly JE: "JEY";
+    readonly JM: "JAM";
+    readonly JO: "JOR";
+    readonly JP: "JPN";
+    readonly KE: "KEN";
+    readonly KG: "KGZ";
+    readonly KH: "KHM";
+    readonly KI: "KIR";
+    readonly KM: "COM";
+    readonly KN: "KNA";
+    readonly KP: "PRK";
+    readonly KR: "KOR";
+    readonly KW: "KWT";
+    readonly KY: "CYM";
+    readonly KZ: "KAZ";
+    readonly LA: "LAO";
+    readonly LB: "LBN";
+    readonly LC: "LCA";
+    readonly LI: "LIE";
+    readonly LK: "LKA";
+    readonly LR: "LBR";
+    readonly LS: "LSO";
+    readonly LT: "LTU";
+    readonly LU: "LUX";
+    readonly LV: "LVA";
+    readonly LY: "LBY";
+    readonly MA: "MAR";
+    readonly MC: "MCO";
+    readonly MD: "MDA";
+    readonly ME: "MNE";
+    readonly MF: "MAF";
+    readonly MG: "MDG";
+    readonly MH: "MHL";
+    readonly MK: "MKD";
+    readonly ML: "MLI";
+    readonly MM: "MMR";
+    readonly MN: "MNG";
+    readonly MO: "MAC";
+    readonly MP: "MNP";
+    readonly MQ: "MTQ";
+    readonly MR: "MRT";
+    readonly MS: "MSR";
+    readonly MT: "MLT";
+    readonly MU: "MUS";
+    readonly MV: "MDV";
+    readonly MW: "MWI";
+    readonly MX: "MEX";
+    readonly MY: "MYS";
+    readonly MZ: "MOZ";
+    readonly NA: "NAM";
+    readonly NC: "NCL";
+    readonly NE: "NER";
+    readonly NF: "NFK";
+    readonly NG: "NGA";
+    readonly NI: "NIC";
+    readonly NL: "NLD";
+    readonly NO: "NOR";
+    readonly NP: "NPL";
+    readonly NR: "NRU";
+    readonly NU: "NIU";
+    readonly NZ: "NZL";
+    readonly OM: "OMN";
+    readonly PA: "PAN";
+    readonly PE: "PER";
+    readonly PF: "PYF";
+    readonly PG: "PNG";
+    readonly PH: "PHL";
+    readonly PK: "PAK";
+    readonly PL: "POL";
+    readonly PM: "SPM";
+    readonly PR: "PRI";
+    readonly PS: "PSE";
+    readonly PT: "PRT";
+    readonly PW: "PLW";
+    readonly PY: "PRY";
+    readonly QA: "QAT";
+    readonly RE: "REU";
+    readonly RO: "ROU";
+    readonly RS: "SRB";
+    readonly RU: "RUS";
+    readonly RW: "RWA";
+    readonly SA: "SAU";
+    readonly SB: "SLB";
+    readonly SC: "SYC";
+    readonly SD: "SDN";
+    readonly SE: "SWE";
+    readonly SG: "SGP";
+    readonly SH: "SHN";
+    readonly SI: "SVN";
+    readonly SJ: "SJM";
+    readonly SK: "SVK";
+    readonly SL: "SLE";
+    readonly SM: "SMR";
+    readonly SN: "SEN";
+    readonly SO: "SOM";
+    readonly SR: "SUR";
+    readonly SS: "SSD";
+    readonly ST: "STP";
+    readonly SV: "SLV";
+    readonly SX: "SXM";
+    readonly SY: "SYR";
+    readonly SZ: "SWZ";
+    readonly TA: "TAA";
+    readonly TC: "TCA";
+    readonly TD: "TCD";
+    readonly TG: "TGO";
+    readonly TH: "THA";
+    readonly TJ: "TJK";
+    readonly TK: "TKL";
+    readonly TL: "TLS";
+    readonly TM: "TKM";
+    readonly TN: "TUN";
+    readonly TO: "TON";
+    readonly TR: "TUR";
+    readonly TT: "TTO";
+    readonly TV: "TUV";
+    readonly TW: "TWN";
+    readonly TZ: "TZA";
+    readonly UA: "UKR";
+    readonly UG: "UGA";
+    readonly US: "USA";
+    readonly UY: "URY";
+    readonly UZ: "UZB";
+    readonly VA: "VAT";
+    readonly VC: "VCT";
+    readonly VE: "VEN";
+    readonly VG: "VGB";
+    readonly VI: "VIR";
+    readonly VN: "VNM";
+    readonly VU: "VUT";
+    readonly WF: "WLF";
+    readonly WS: "WSM";
+    readonly XK: "XKX";
+    readonly YE: "YEM";
+    readonly YT: "MYT";
+    readonly ZA: "ZAF";
+    readonly ZM: "ZMB";
+    readonly ZW: "ZWE";
+};
+export declare function getCountryAlpha3(country: CountryCode): string;

package/dist/src/components/phone-input/country-search.d.ts

@@ -0,0 +1,8 @@
+import { CountryCode } from 'libphonenumber-js/min';
+/**
+ * Fold a search string for accent-insensitive matching — `Åland` ↔ `aland`,
+ * `Côte` ↔ `cote`. NFD splits base letters from combining marks; we drop the
+ * marks and lowercase.
+ */
+export declare function foldSearch(value: string): string;
+export declare function countrySearchAliases(country: CountryCode): readonly string[];

package/dist/src/components/phone-input/index.d.ts

@@ -0,0 +1 @@
+export { PhoneInput, type CountryCode, type PhoneInputChangeMeta, type PhoneInputProps, } from './phone-input';

package/dist/src/components/phone-input/phone-input.d.ts

@@ -0,0 +1,41 @@
+import { InputHTMLAttributes, ReactNode, Ref } from 'react';
+import { CountryCode } from 'libphonenumber-js/min';
+import { InputGroupSize } from '../input-group';
+export type { CountryCode };
+export interface PhoneInputChangeMeta {
+    country: CountryCode;
+    isValid: boolean;
+}
+export interface PhoneInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "value" | "defaultValue" | "onChange"> {
+    /** Controlled E.164 value (`+14155550123`), or `""` when empty. */
+    value?: string;
+    /** Uncontrolled initial E.164 value. */
+    defaultValue?: string;
+    /** Fires with the E.164 value (or `""`) and validity metadata. */
+    onValueChange?: (value: string, meta: PhoneInputChangeMeta) => void;
+    /** Country used when the value has no country. @default `"US"` */
+    defaultCountry?: CountryCode;
+    /** Countries offered in the picker. Defaults to every libphonenumber country. */
+    countries?: CountryCode[];
+    /** Size variant, matching Input / Input Group. @default `"md"` */
+    size?: InputGroupSize;
+    /** Render the invalid state (error ring + error-colored hint). */
+    invalid?: boolean;
+    /** Field label (associated for accessibility). */
+    label?: ReactNode;
+    /** Helper text below the field; rendered in the error color when `invalid`. */
+    hint?: ReactNode;
+    /** Node rendered at the right edge of the label row. */
+    labelTrailing?: ReactNode;
+    /** Class applied to the Input Group surface. */
+    wrapperClassName?: string;
+    ref?: Ref<HTMLInputElement>;
+}
+/**
+ * Phone number field — country picker (searchable Combobox) + national number
+ * input on a shared Input Group surface. The committed value is always E.164.
+ */
+export declare function PhoneInput({ value, defaultValue, onValueChange, defaultCountry, countries: countriesProp, size, invalid, label, hint, labelTrailing, disabled, required, placeholder, className, wrapperClassName, id, ref, "aria-label": ariaLabel, onKeyDown, ...props }: PhoneInputProps): import("react").JSX.Element;
+export declare namespace PhoneInput {
+    var displayName: string;
+}

package/dist/src/sections/basic-page/basic-page.d.ts

@@ -156,9 +156,15 @@ declare function ItemPanel({ divided, className, ...props }: BasicPageItemPanelP
  * Standalone callout. Pair with `CalloutTitle` / `CalloutDescription` (and
  * optional actions) for a featured block — e.g. an invite form. Do not wrap
  * in `Card`; this is already the outer surface.
+ *
+ * Pass `icon` for a decorative glyph anchored to the header block (first
+ * child) — typically a Tabler outline icon. The icon is aria-hidden; keep
+ * meaning in the title/description.
  */
-declare function Callout({ className, ...props }: ComponentProps<"div"> & {
+declare function Callout({ className, icon, children, ...props }: ComponentProps<"div"> & {
     ref?: Ref<HTMLDivElement>;
+    /** Decorative icon, top-right of the header (first child). */
+    icon?: ReactNode;
 }): import("react").JSX.Element;
 /** Callout heading — same type as `SectionTitle`. Hashable via slug `id`. */
 declare function CalloutTitle({ id, className, children, ...props }: ComponentProps<"h2"> & {
@@ -279,7 +285,7 @@ declare function RowLink({ label, description, leading, href, className, childre
  *         </BasicPage.Row>
  *       </BasicPage.Card>
  *     </div>
- *     <BasicPage.Callout>
+ *     <BasicPage.Callout icon={<IconMail stroke={1.25} />}>
  *       <BasicPage.Header>
  *         <BasicPage.CalloutTitle>Invitations</BasicPage.CalloutTitle>
  *         <BasicPage.CalloutDescription>…</BasicPage.CalloutDescription>

package/dist/src/sections/sidebar/sidebar.d.ts

@@ -78,13 +78,18 @@ interface ItemBaseProps {
     children?: ReactNode;
     className?: string;
 }
-export interface SidebarItemLinkProps extends ItemBaseProps, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof ItemBaseProps> {
+/**
+ * DOM handlers whose React signatures clash with Motion's gesture props.
+ * Same omit list as `Button` — rows render through `motion.*`.
+ */
+type MotionHandlerConflicts = "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration" | "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDrop";
+export interface SidebarItemLinkProps extends ItemBaseProps, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof ItemBaseProps | MotionHandlerConflicts> {
     /** Destination — rendered through the host's `LinkProvider`. */
     href: string;
     /** Leaves the app: opens in a new tab and renders a ↗ cue. */
     external?: boolean;
 }
-export interface SidebarItemButtonProps extends ItemBaseProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ItemBaseProps> {
+export interface SidebarItemButtonProps extends ItemBaseProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ItemBaseProps | MotionHandlerConflicts> {
     href?: undefined;
     external?: undefined;
 }
@@ -95,7 +100,7 @@ export type SidebarItemProps = SidebarItemLinkProps | SidebarItemButtonProps;
  * primary surface; `external` opens a new tab and appends a ↗ cue.
  */
 declare function Item({ icon, active, className, children, href, external, ...rest }: SidebarItemProps): import("react").JSX.Element;
-export interface SidebarAccountRowProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+export interface SidebarAccountRowProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | MotionHandlerConflicts> {
     /** Display name — also the source for fallback initials. */
     name: string;
     /** Avatar image URL; falls back to initials while loading or on error. */