@vkzstudio/muza-ui 1.4.1 → 1.5.0

package/dist/components/DropdownSearchMenu/DropdownSearchMenu.d.ts

@@ -0,0 +1,73 @@
+import { PopoverContentProps, PopoverTriggerProps } from '../Popover';
+import * as React from 'react';
+/**
+ * Props for the DropdownSearchMenu root component.
+ */
+export interface DropdownSearchMenuProps {
+    /** The trigger and content of the menu. */
+    children: React.ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state for uncontrolled usage. @default false */
+    defaultOpen?: boolean;
+    /** Fires when the open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Controlled search-field value. Pair with `onSearchChange`. */
+    search?: string;
+    /** Initial search value for uncontrolled usage. @default '' */
+    defaultSearch?: string;
+    /** Fires when the search value changes. */
+    onSearchChange?: (value: string) => void;
+    /** Whether selecting an item closes the menu. @default true */
+    closeOnSelect?: boolean;
+}
+declare const DropdownSearchMenu: {
+    ({ children, open: openProp, defaultOpen, onOpenChange, search: searchProp, defaultSearch, onSearchChange, closeOnSelect, }: DropdownSearchMenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/** Props for DropdownSearchMenuTrigger. Use `asChild` to compose with a custom trigger. */
+export type DropdownSearchMenuTriggerProps = PopoverTriggerProps;
+declare const DropdownSearchMenuTrigger: {
+    (props: DropdownSearchMenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Props for DropdownSearchMenuContent — the floating panel containing the
+ * search field, divider, and scrollable list of items.
+ */
+export interface DropdownSearchMenuContentProps extends PopoverContentProps {
+    /** Placeholder for the search field. */
+    searchPlaceholder?: string;
+    /** Accessible label for the search field (defaults to `searchPlaceholder`). */
+    searchAriaLabel?: string;
+    /** Content shown when no item children are present (no-matches state). */
+    emptyMessage?: React.ReactNode;
+}
+declare const DropdownSearchMenuContent: {
+    ({ className, searchPlaceholder, searchAriaLabel, emptyMessage, align, sideOffset, children, ...props }: DropdownSearchMenuContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Props for DropdownSearchMenuItem — a selectable row mirroring
+ * `DropdownMenuItem` content: leading icon, label, and optional trailing text.
+ */
+export interface DropdownSearchMenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /** Unique value identifying the item. Passed to `onSelect`. */
+    value: string;
+    /** Fires with `value` when the item is chosen (click or Enter). */
+    onSelect?: (value: string) => void;
+    /** Icon or flag element rendered before the label. */
+    icon?: React.ReactNode;
+    /** Right-aligned trailing content (e.g. a dial code). */
+    trailing?: React.ReactNode;
+    /** Highlights the item as the currently selected value (brand color + fill). @default false */
+    isActive?: boolean;
+    /** Prevents selection and greys out the item. @default false */
+    disabled?: boolean;
+}
+declare const DropdownSearchMenuItem: {
+    ({ className, value, onSelect, icon, trailing, isActive, disabled, children, onMouseEnter, ...props }: DropdownSearchMenuItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { DropdownSearchMenu, DropdownSearchMenuTrigger, DropdownSearchMenuContent, DropdownSearchMenuItem, };
+//# sourceMappingURL=DropdownSearchMenu.d.ts.map

package/dist/components/DropdownSearchMenu/DropdownSearchMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownSearchMenu.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSearchMenu/DropdownSearchMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAGL,KAAK,mBAAmB,EAExB,KAAK,mBAAmB,EACzB,MAAM,YAAY,CAAA;AAkDnB;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,2CAA2C;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,yCAAyC;IACzC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,+DAA+D;IAC/D,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,2CAA2C;IAC3C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,+DAA+D;IAC/D,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,QAAA,MAAM,kBAAkB;iIASrB,uBAAuB;;CAqDzB,CAAA;AAED,2FAA2F;AAC3F,MAAM,MAAM,8BAA8B,GAAG,mBAAmB,CAAA;AAEhE,QAAA,MAAM,yBAAyB;YAAW,8BAA8B;;CAEvE,CAAA;AAED;;;GAGG;AACH,MAAM,WAAW,8BAA+B,SAAQ,mBAAmB;IACzE,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,+EAA+E;IAC/E,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC/B;AAED,QAAA,MAAM,yBAAyB;6GAS5B,8BAA8B;;CAqJhC,CAAA;AAED;;;GAGG;AACH,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9D,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAA;IACb,mEAAmE;IACnE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,sDAAsD;IACtD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,sBAAsB;2GAWzB,2BAA2B;;CAsE7B,CAAA;AAOD,OAAO,EACL,kBAAkB,EAClB,yBAAyB,EACzB,yBAAyB,EACzB,sBAAsB,GACvB,CAAA"}

package/dist/components/DropdownSearchMenu/DropdownSearchMenu.js

@@ -0,0 +1,257 @@
+import { jsx as t, jsxs as z } from "react/jsx-runtime";
+import * as r from "react";
+import { Popover as T, PopoverTrigger as Y, PopoverContent as j } from "../Popover/Popover.js";
+import { MagnifyingGlass as K } from "../Icons/CustomIcons.js";
+import { cn as N } from "../../utils/cn.js";
+import { typographyVariants as U, Typography as A } from "../Typography/Typography.js";
+const R = r.createContext(null), E = () => {
+  const s = r.useContext(R);
+  if (!s)
+    throw new Error(
+      "DropdownSearchMenu components must be used within a <DropdownSearchMenu>"
+    );
+  return s;
+}, V = ({
+  children: s,
+  open: c,
+  defaultOpen: p = !1,
+  onOpenChange: d,
+  search: m,
+  defaultSearch: w = "",
+  onSearchChange: n,
+  closeOnSelect: x = !0
+}) => {
+  const u = r.useId(), [b, k] = r.useState(null), l = c !== void 0, [f, v] = r.useState(p), i = l ? c : f, a = m !== void 0, [I, M] = r.useState(w), y = a ? m : I, h = r.useCallback(
+    (e) => {
+      a || M(e), n == null || n(e);
+    },
+    [a, n]
+  ), D = r.useCallback(
+    (e) => {
+      l || v(e), d == null || d(e), e || h("");
+    },
+    [l, d, h]
+  ), o = r.useMemo(
+    () => ({
+      search: y,
+      setSearch: h,
+      open: i,
+      setOpen: D,
+      activeId: b,
+      setActiveId: k,
+      listboxId: u,
+      closeOnSelect: x
+    }),
+    [y, h, i, D, b, u, x]
+  );
+  return /* @__PURE__ */ t(R.Provider, { value: o, children: /* @__PURE__ */ t(T, { open: i, onOpenChange: D, children: s }) });
+}, $ = (s) => /* @__PURE__ */ t(Y, { "data-slot": "dropdown-search-menu-trigger", ...s }), q = ({
+  className: s,
+  searchPlaceholder: c,
+  searchAriaLabel: p,
+  emptyMessage: d,
+  align: m = "start",
+  sideOffset: w = 8,
+  children: n,
+  ...x
+}) => {
+  const { search: u, setSearch: b, setOpen: k, activeId: l, setActiveId: f, listboxId: v } = E(), i = r.useRef(null), a = r.useRef(null), M = r.Children.toArray(n).filter(Boolean).length === 0, y = r.useCallback(
+    () => {
+      var o;
+      return Array.from(
+        ((o = i.current) == null ? void 0 : o.querySelectorAll(
+          '[role="option"]:not([aria-disabled="true"])'
+        )) ?? []
+      );
+    },
+    []
+  );
+  r.useEffect(() => {
+    f(null);
+  }, [u, f]);
+  const h = (o) => {
+    const e = y();
+    if (e.length === 0) return;
+    const g = e.findIndex((O) => O.id === l), S = g < 0 ? o === 1 ? 0 : e.length - 1 : Math.min(Math.max(g + o, 0), e.length - 1), C = e[S];
+    f(C.id), C.scrollIntoView({ block: "nearest" });
+  }, D = (o) => {
+    switch (o.key) {
+      case "ArrowDown":
+        o.preventDefault(), h(1);
+        break;
+      case "ArrowUp":
+        o.preventDefault(), h(-1);
+        break;
+      case "Enter": {
+        o.preventDefault();
+        const e = y(), g = e.find((S) => S.id === l) ?? e[0];
+        g == null || g.click();
+        break;
+      }
+      case "Escape":
+        k(!1);
+        break;
+    }
+  };
+  return /* @__PURE__ */ z(
+    j,
+    {
+      align: m,
+      sideOffset: w,
+      onOpenAutoFocus: (o) => {
+        var e;
+        o.preventDefault(), (e = a.current) == null || e.focus();
+      },
+      className: N(
+        "flex w-[280px] flex-col overflow-hidden rounded-comp-dropdown-menu-radius bg-comp-select-fill-def p-0 dropdown-shadow-default",
+        s
+      ),
+      ...x,
+      children: [
+        /* @__PURE__ */ t("div", { className: "p-sm", children: /* @__PURE__ */ z("div", { className: "flex items-center gap-sm rounded-comp-dropdown-menu-radius-item px-lg py-sm", children: [
+          /* @__PURE__ */ t(
+            K,
+            {
+              "aria-hidden": "true",
+              className: "size-icon-small shrink-0 text-icon-dark-secondary-def"
+            }
+          ),
+          /* @__PURE__ */ t(
+            "input",
+            {
+              ref: a,
+              type: "text",
+              role: "combobox",
+              "aria-expanded": !0,
+              "aria-controls": v,
+              "aria-autocomplete": "list",
+              "aria-activedescendant": l ?? void 0,
+              "aria-label": p ?? c,
+              value: u,
+              placeholder: c,
+              onChange: (o) => b(o.target.value),
+              onKeyDown: D,
+              className: N(
+                U({
+                  size: "sm",
+                  weight: "regular",
+                  fixY: !0
+                }),
+                "w-full bg-transparent text-comp-dropdown-menu-text-base-def outline-none",
+                // The field is auto-focused on open, so the placeholder is redundant
+                // once focused — hide it to keep the focused field clean.
+                "placeholder:text-text-dark-tertiary focus:placeholder:text-transparent"
+              )
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ t(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "h-0 w-full border-b border-stroke-base-primary"
+          }
+        ),
+        /* @__PURE__ */ t("div", { className: "py-sm pr-1 pl-sm", children: /* @__PURE__ */ t(
+          "div",
+          {
+            ref: i,
+            id: v,
+            role: "listbox",
+            "aria-label": p ?? c,
+            className: N(
+              "flex max-h-[280px] flex-col gap-comp-dropdown-menu-gap-phone-code overflow-y-auto pr-1",
+              "[&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-stroke-base-secondary hover:[&::-webkit-scrollbar-thumb]:bg-stroke-base-primary [&::-webkit-scrollbar-track]:bg-transparent"
+            ),
+            children: M ? /* @__PURE__ */ t("div", { className: "px-lg py-md", role: "presentation", children: /* @__PURE__ */ t(
+              A,
+              {
+                component: "span",
+                size: "sm",
+                weight: "regular",
+                className: "text-comp-dropdown-menu-text-base-def",
+                children: d
+              }
+            ) }) : n
+          }
+        ) })
+      ]
+    }
+  );
+}, B = ({
+  className: s,
+  value: c,
+  onSelect: p,
+  icon: d,
+  trailing: m,
+  isActive: w = !1,
+  disabled: n = !1,
+  children: x,
+  onMouseEnter: u,
+  ...b
+}) => {
+  const { activeId: k, setOpen: l, listboxId: f, closeOnSelect: v } = E(), i = `${f}-${encodeURIComponent(c)}`, a = k === i, I = () => {
+    n || (p == null || p(c), v && l(!1));
+  };
+  return /* @__PURE__ */ z(
+    "div",
+    {
+      id: i,
+      role: "option",
+      "aria-selected": w,
+      "aria-disabled": n || void 0,
+      "data-active": a || void 0,
+      className: N(
+        "flex cursor-pointer items-center gap-sm rounded-comp-dropdown-menu-radius-item px-lg py-md outline-0 transition-colors",
+        n ? "pointer-events-none text-comp-dropdown-menu-text-phone-code-disabled" : [
+          "text-comp-dropdown-menu-text-phone-code-def",
+          // Mouse hover — lighter fill.
+          "hover:bg-comp-dropdown-menu-fill-phone-code-hover hover:text-comp-dropdown-menu-text-phone-code-hover",
+          // Selected value — brand fill/text (unless the keyboard highlight is on it).
+          w && !a && "bg-comp-dropdown-menu-fill-phone-code-active text-comp-dropdown-menu-text-phone-code-active",
+          // Keyboard-navigated row — distinct darker "focused/pressed" fill.
+          a && "bg-comp-dropdown-menu-fill-phone-code-focused text-comp-dropdown-menu-text-phone-code-focused hover:bg-comp-dropdown-menu-fill-phone-code-focused hover:text-comp-dropdown-menu-text-phone-code-focused"
+        ],
+        s
+      ),
+      onClick: I,
+      onMouseEnter: u,
+      ...b,
+      children: [
+        d && /* @__PURE__ */ t("span", { className: "block size-icon-small shrink-0 [&>svg]:block [&>svg]:size-icon-small", children: d }),
+        /* @__PURE__ */ t(
+          A,
+          {
+            component: "span",
+            size: "sm",
+            weight: "medium",
+            fixY: !0,
+            className: "min-w-0 flex-1 truncate",
+            children: x
+          }
+        ),
+        m != null && /* @__PURE__ */ t(
+          A,
+          {
+            component: "span",
+            size: "sm",
+            weight: "medium",
+            fixY: !0,
+            className: "shrink-0 text-right",
+            children: m
+          }
+        )
+      ]
+    }
+  );
+};
+V.displayName = "DropdownSearchMenu";
+$.displayName = "DropdownSearchMenuTrigger";
+q.displayName = "DropdownSearchMenuContent";
+B.displayName = "DropdownSearchMenuItem";
+export {
+  V as DropdownSearchMenu,
+  q as DropdownSearchMenuContent,
+  B as DropdownSearchMenuItem,
+  $ as DropdownSearchMenuTrigger
+};

package/dist/components/DropdownSearchMenu/DropdownSearchMenu.stories.d.ts

@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { DropdownSearchMenu } from './DropdownSearchMenu';
+declare const meta: Meta<typeof DropdownSearchMenu>;
+export default meta;
+type Story = StoryObj<typeof DropdownSearchMenu>;
+/**
+ * Interactive example with plain, label-only items. Selecting an option closes
+ * the menu; the search field filters the list. The full controlled wiring is
+ * inline so the code preview teaches the real integration pattern.
+ */
+export declare const Default: Story;
+/**
+ * Menu rendered open so the visual-regression suite captures the portaled panel
+ * — search field, divider, and the scrollable list with an active (selected)
+ * item. The closed `Default` story cannot show it.
+ */
+export declare const OpenState: Story;
+/**
+ * No-matches state: when the filtered list is empty, `emptyMessage` renders in
+ * place of the items.
+ */
+export declare const NoResults: Story;
+/**
+ * Rich items: a leading `icon` (flag) and right-aligned `trailing` content
+ * (dial code). This is the shape `PhoneInput`'s country selector uses.
+ */
+export declare const WithIconAndTrailing: Story;
+//# sourceMappingURL=DropdownSearchMenu.stories.d.ts.map

package/dist/components/DropdownSearchMenu/DropdownSearchMenu.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownSearchMenu.stories.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSearchMenu/DropdownSearchMenu.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAI3D,OAAO,EACL,kBAAkB,EAInB,MAAM,sBAAsB,CAAA;AAE7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,kBAAkB,CAuCzC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAchD;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,KAqDrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,KA6BvB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAqBvB,CAAA;AAYD;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAgCjC,CAAA"}

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

@@ -0,0 +1,2 @@
+export * from './DropdownSearchMenu';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DropdownSearchMenu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSearchMenu/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA"}

package/dist/components/PhoneInput/CountrySelector.d.ts

@@ -0,0 +1,34 @@
+import { CountryData } from 'react-international-phone';
+/**
+ * Props for the internal CountrySelector segment. Not exported from the
+ * library — consumers configure it through `PhoneInput`.
+ */
+export interface CountrySelectorProps {
+    /** iso2 code of the currently selected country (e.g. `"cz"`). */
+    selectedCountry: string;
+    /** Fires with the iso2 of the newly selected country. */
+    onCountryChange: (iso2: string) => void;
+    /** Raw country dataset used to build the list. */
+    countries: CountryData[];
+    /** Accessible label for the trigger button. */
+    ariaLabel: string;
+    /** Placeholder for the search field. */
+    searchPlaceholder: string;
+    /** Message rendered when the search yields no matches. */
+    noResultsText: string;
+    /** Disables the trigger and greys out its content. @default false */
+    disabled?: boolean;
+    /** Applies error border colors to the divider. @default false */
+    error?: boolean;
+}
+/**
+ * Left segment of `PhoneInput`: a flag + dial-code button that opens a
+ * searchable country list in a `DropdownSearchMenu`. The right border acts as
+ * the divider between the country selector and the phone number field,
+ * matching the wrapper's border color across `group` hover/focus/error states.
+ */
+export declare const CountrySelector: {
+    ({ selectedCountry, onCountryChange, countries, ariaLabel, searchPlaceholder, noResultsText, disabled, error, }: CountrySelectorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=CountrySelector.d.ts.map

package/dist/components/PhoneInput/CountrySelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountrySelector.d.ts","sourceRoot":"","sources":["../../../src/components/PhoneInput/CountrySelector.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,WAAW,EAGjB,MAAM,2BAA2B,CAAA;AAWlC;;;GAGG;AACH,MAAM,WAAW,oBAAoB;IACnC,iEAAiE;IACjE,eAAe,EAAE,MAAM,CAAA;IACvB,yDAAyD;IACzD,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,kDAAkD;IAClD,SAAS,EAAE,WAAW,EAAE,CAAA;IACxB,+CAA+C;IAC/C,SAAS,EAAE,MAAM,CAAA;IACjB,wCAAwC;IACxC,iBAAiB,EAAE,MAAM,CAAA;IACzB,0DAA0D;IAC1D,aAAa,EAAE,MAAM,CAAA;IACrB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iEAAiE;IACjE,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED;;;;;GAKG;AACH,eAAO,MAAM,eAAe;qHASzB,oBAAoB;;CAiGtB,CAAA"}

package/dist/components/PhoneInput/CountrySelector.js

@@ -0,0 +1,109 @@
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { useState as u, useMemo as a } from "react";
+import { parseCountry as v, FlagImage as l } from "react-international-phone";
+import { DropdownSearchMenu as M, DropdownSearchMenuTrigger as y, DropdownSearchMenuContent as z, DropdownSearchMenuItem as D } from "../DropdownSearchMenu/DropdownSearchMenu.js";
+import { cn as f } from "../../utils/cn.js";
+import { Typography as N } from "../Typography/Typography.js";
+import { AltArrowUpOutline as A } from "@solar-icons/react-perf";
+const O = ({
+  selectedCountry: c,
+  onCountryChange: h,
+  countries: d,
+  ariaLabel: g,
+  searchPlaceholder: x,
+  noResultsText: C,
+  disabled: t = !1,
+  error: b = !1
+}) => {
+  const [m, w] = u(!1), [i, k] = u(""), o = a(
+    () => d.map((e) => v(e)),
+    [d]
+  ), n = a(
+    () => o.find((e) => e.iso2 === c) ?? o[0],
+    [o, c]
+  ), S = a(() => {
+    const e = i.trim().toLowerCase();
+    return e ? o.filter(
+      (s) => s.name.toLowerCase().includes(e) || s.iso2.includes(e) || s.dialCode.includes(e.replace(/^\+/, ""))
+    ) : o;
+  }, [o, i]);
+  return /* @__PURE__ */ p(
+    M,
+    {
+      open: m,
+      onOpenChange: w,
+      search: i,
+      onSearchChange: k,
+      children: [
+        /* @__PURE__ */ r(y, { asChild: !0, children: /* @__PURE__ */ p(
+          "button",
+          {
+            type: "button",
+            disabled: t,
+            "aria-label": g,
+            className: f(
+              "flex h-full shrink-0 items-center gap-sm border-r px-comp-input-p-hor transition-colors outline-none",
+              "focus-visible-default",
+              "border-comp-input-stroke-def",
+              "group-hover:border-comp-input-stroke-hover",
+              "group-focus-within:border-comp-input-icon-brand-focused",
+              b && "border-comp-input-stroke-error-def group-focus-within:border-comp-input-stroke-error-def group-hover:border-comp-input-stroke-error-def",
+              t ? "cursor-not-allowed border-comp-input-stroke-disabled" : "cursor-pointer"
+            ),
+            children: [
+              /* @__PURE__ */ r(l, { iso2: n.iso2, size: "20px" }),
+              /* @__PURE__ */ p(
+                N,
+                {
+                  size: "input",
+                  weight: "medium",
+                  fixY: !0,
+                  component: "span",
+                  className: t ? "text-comp-input-text-disabled" : "text-comp-input-text-primary",
+                  children: [
+                    "+",
+                    n.dialCode
+                  ]
+                }
+              ),
+              /* @__PURE__ */ r(
+                A,
+                {
+                  "aria-hidden": "true",
+                  className: f(
+                    "size-icon-small shrink-0 transition-transform duration-200",
+                    m ? "rotate-0" : "rotate-180",
+                    t ? "text-comp-input-text-disabled" : "text-icon-dark-secondary-def"
+                  )
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ r(
+          z,
+          {
+            searchPlaceholder: x,
+            emptyMessage: C,
+            children: S.map((e) => /* @__PURE__ */ r(
+              D,
+              {
+                value: e.iso2,
+                onSelect: h,
+                isActive: e.iso2 === n.iso2,
+                icon: /* @__PURE__ */ r(l, { iso2: e.iso2, size: "20px" }),
+                trailing: `+${e.dialCode}`,
+                children: e.name
+              },
+              e.iso2
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+O.displayName = "CountrySelector";
+export {
+  O as CountrySelector
+};

package/dist/components/PhoneInput/PhoneInput.d.ts

@@ -0,0 +1,86 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { CountryData, ParsedCountry } from 'react-international-phone';
+/**
+ * Metadata passed alongside the E.164 value to `PhoneInput`'s `onChange`.
+ */
+export interface PhoneInputChangeMeta {
+    /** The formatted, human-readable value shown in the input (e.g. `"777 123 456"`). */
+    inputValue: string;
+    /** The resolved country the number currently belongs to. */
+    country: ParsedCountry;
+}
+declare const phoneWrapperVariants: (props?: ({
+    size?: "xs" | "sm" | "lg" | "base" | null | undefined;
+    error?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Props for the PhoneInput component.
+ *
+ * A segmented phone-number field: a searchable country selector (flag + dial
+ * code) on the left and a formatted national-number input on the right. The
+ * value is composed and emitted as a single E.164 string. Formatting, country
+ * detection, and dial-code handling are powered by
+ * [react-international-phone](https://react-international-phone.vercel.app/).
+ *
+ * Extends native input attributes except `size`/`type`/`prefix` (managed
+ * internally) and `value`/`defaultValue`/`onChange` (narrowed to the phone
+ * string contract below).
+ */
+export interface PhoneInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type' | 'prefix' | 'value' | 'defaultValue' | 'onChange'>, VariantProps<typeof phoneWrapperVariants> {
+    /** Label text rendered above the input. */
+    label?: string;
+    /** Helper or error text rendered below the input. */
+    hint?: string;
+    /** Controls height and typography. @default 'base' */
+    size?: 'xs' | 'sm' | 'base' | 'lg';
+    /** Applies error border and hint styling. @default false */
+    error?: boolean;
+    /**
+     * Controlled phone value in E.164 format (e.g. `"+420777123456"`). Pair with
+     * `onChange` for controlled usage.
+     */
+    value?: string;
+    /** Initial phone value in E.164 format for uncontrolled usage. */
+    defaultValue?: string;
+    /**
+     * Fires on every change with the composed E.164 phone string and formatting
+     * metadata. The phone string is empty (`""`) when no number is entered.
+     */
+    onChange?: (phone: string, meta: PhoneInputChangeMeta) => void;
+    /** ISO2 code of the initial country selection (e.g. `"cz"`). @default 'cz' */
+    defaultCountry?: string;
+    /**
+     * Country dataset used for the selector and number guessing. Rarely needed —
+     * override to restrict or reorder the available countries.
+     * @default defaultCountries
+     */
+    countries?: CountryData[];
+    /**
+     * Hides the required asterisk in the label even when `required` is `true`.
+     * @default false
+     */
+    disableRequiredAsterisk?: boolean;
+    /** Custom content rendered inline next to the label. Takes precedence over `infoTooltip`. */
+    labelExtra?: ReactNode;
+    /** Tooltip content shown in an info icon next to the label. Ignored when `labelExtra` is provided. */
+    infoTooltip?: string;
+    /**
+     * Accessible label for the country selector trigger.
+     * @default translations.phoneInput.countrySelectorAriaLabel
+     */
+    countrySelectorAriaLabel?: string;
+    /**
+     * Placeholder for the country search field.
+     * @default translations.phoneInput.searchPlaceholder
+     */
+    searchPlaceholder?: string;
+    /**
+     * Message shown when the country search yields no matches.
+     * @default translations.phoneInput.noResults
+     */
+    noResultsText?: string;
+}
+export declare const PhoneInput: import('react').ForwardRefExoticComponent<PhoneInputProps & import('react').RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=PhoneInput.d.ts.map

package/dist/components/PhoneInput/PhoneInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/components/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AACjE,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,aAAa,EAGnB,MAAM,2BAA2B,CAAA;AAOlC;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,qFAAqF;IACrF,UAAU,EAAE,MAAM,CAAA;IAClB,4DAA4D;IAC5D,OAAO,EAAE,aAAa,CAAA;CACvB;AAKD,QAAA,MAAM,oBAAoB;;;8EAyBzB,CAAA;AAcD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eACf,SAAQ,IAAI,CACR,wBAAwB,CAAC,OAAO,CAAC,EACjC,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CACnE,EACD,YAAY,CAAC,OAAO,oBAAoB,CAAC;IAC3C,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAClC,4DAA4D;IAC5D,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAA;IAC9D,8EAA8E;IAC9E,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,WAAW,EAAE,CAAA;IACzB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,6FAA6F;IAC7F,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,sGAAsG;IACtG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAA;IACjC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,UAAU,8GA6HtB,CAAA"}