react-country-kit-ui 1.1.2

package/dist/index.mjs

@@ -0,0 +1,1137 @@
+import { jsx as e, jsxs as n, Fragment as R } from "react/jsx-runtime";
+import v, { useState as C, useEffect as H } from "react";
+import * as z from "@radix-ui/react-popover";
+import { clsx as K } from "clsx";
+import { twMerge as ee } from "tailwind-merge";
+import { searchCountries as I, getAllCountries as W, searchCurrencies as J, getAllCurrencies as q, getCurrencyByCountry as A, getDivisionsByCountry as te, searchLanguages as ne, getAllLanguages as D, usePhoneInput as re, getTimezonesByCountry as X, getAllTimezones as oe, searchTimezones as ie } from "react-country-kit-core";
+export * from "react-country-kit-core";
+function y(...t) {
+  return ee(K(t));
+}
+const Y = z.Root, Z = z.Trigger, T = ({ className: t }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    className: y("h-4 w-4 text-primary", t),
+    viewBox: "0 0 20 20",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ e("polyline", { points: "4 10 8 14 16 6" })
+  }
+);
+T.displayName = "CheckIcon";
+const U = ({
+  children: t,
+  className: r
+}) => /* @__PURE__ */ e(
+  "label",
+  {
+    className: y(
+      "text-[0.65rem] font-bold uppercase tracking-[0.12em] text-muted-foreground/80 ml-1 mb-1.5 block",
+      r
+    ),
+    children: t
+  }
+);
+U.displayName = "FieldLabel";
+const L = ({ children: t, className: r }) => /* @__PURE__ */ e(
+  "span",
+  {
+    className: y(
+      "inline-flex items-center rounded-full bg-primary/20 px-2.5 py-0.5 text-[0.7rem] font-bold text-primary tracking-tight",
+      r
+    ),
+    children: t
+  }
+);
+L.displayName = "Badge";
+const E = ({
+  iso2: t,
+  flag: r,
+  flagUrl: p,
+  className: a
+}) => /* @__PURE__ */ e("span", { className: y("inline-flex items-center justify-center shrink-0 overflow-hidden", a), children: /* @__PURE__ */ e(
+  "img",
+  {
+    src: p,
+    alt: t,
+    className: "h-[1em] w-[1.5em] object-cover rounded-[1px] shadow-[0_0_0_1px_rgba(0,0,0,0.05)]",
+    onError: (s) => {
+      if (s.target.style.display = "none", s.target.parentElement) {
+        const c = document.createElement("span");
+        c.textContent = r, s.target.parentElement.appendChild(c);
+      }
+    }
+  }
+) });
+E.displayName = "Flag";
+const M = v.forwardRef(({ className: t, align: r = "start", sideOffset: p = 6, onCloseAutoFocus: a, ...s }, c) => /* @__PURE__ */ e(z.Portal, { children: /* @__PURE__ */ e(
+  z.Content,
+  {
+    ref: c,
+    align: r,
+    sideOffset: p,
+    onCloseAutoFocus: (g) => {
+      g.preventDefault(), a == null || a(g);
+    },
+    className: y(
+      "z-50 w-[var(--radix-popover-trigger-width)] rounded-xl border border-border bg-popover p-0 shadow-lg",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+      t
+    ),
+    ...s
+  }
+) }));
+M.displayName = "PopoverContent";
+const S = v.forwardRef(({ className: t, ...r }, p) => /* @__PURE__ */ e(
+  "div",
+  {
+    ref: p,
+    className: y(
+      "flex h-full w-full flex-col overflow-hidden rounded-xl bg-popover text-popover-foreground",
+      t
+    ),
+    ...r
+  }
+));
+S.displayName = "CommandRoot";
+const P = v.forwardRef(
+  ({ className: t, onValueChange: r, ...p }, a) => /* @__PURE__ */ e("div", { className: "px-3 pt-3 pb-2 border-b border-border", children: /* @__PURE__ */ n("div", { className: y(
+    "flex items-center gap-2 px-3 py-1.5 rounded-lg border border-border bg-muted/40 transition-colors",
+    "focus-within:border-primary/50 focus-within:ring-2 focus-within:ring-primary/10"
+  ), children: [
+    /* @__PURE__ */ n(
+      "svg",
+      {
+        className: "h-3.5 w-3.5 shrink-0 text-muted-foreground",
+        viewBox: "0 0 20 20",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        children: [
+          /* @__PURE__ */ e("circle", { cx: "8.5", cy: "8.5", r: "5.5" }),
+          /* @__PURE__ */ e("path", { d: "M17 17l-4-4", strokeLinecap: "round" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      "input",
+      {
+        ref: a,
+        type: "text",
+        autoComplete: "off",
+        autoCorrect: "off",
+        spellCheck: !1,
+        className: y(
+          "flex h-8 w-full bg-transparent text-sm outline-none",
+          "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          t
+        ),
+        onChange: (s) => r == null ? void 0 : r(s.target.value),
+        ...p
+      }
+    )
+  ] }) })
+);
+P.displayName = "CommandInput";
+const _ = v.forwardRef(({ className: t, ...r }, p) => /* @__PURE__ */ e(
+  "div",
+  {
+    ref: p,
+    role: "listbox",
+    className: y("max-h-72 overflow-y-auto overflow-x-hidden p-1", t),
+    ...r
+  }
+));
+_.displayName = "CommandList";
+const O = v.forwardRef((t, r) => /* @__PURE__ */ e(
+  "div",
+  {
+    ref: r,
+    className: "flex flex-col items-center justify-center gap-1 py-8 text-sm text-muted-foreground",
+    ...t
+  }
+));
+O.displayName = "CommandEmpty";
+const B = v.forwardRef(
+  ({ className: t, onSelect: r, onMouseDown: p, onKeyDown: a, disabled: s, selected: c, value: g, ...k }, x) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: x,
+      role: "option",
+      "aria-disabled": s || void 0,
+      "aria-selected": c,
+      "data-disabled": s || void 0,
+      "data-selected": c || void 0,
+      tabIndex: s ? void 0 : 0,
+      className: y(
+        "relative flex cursor-pointer select-none items-center gap-2 rounded-lg px-2 py-2 text-sm outline-none",
+        "focus:bg-accent focus:text-accent-foreground",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "hover:bg-accent/50 transition-colors",
+        c && "bg-accent text-accent-foreground font-semibold",
+        t
+      ),
+      onMouseDown: (i) => {
+        i.preventDefault(), p == null || p(i);
+      },
+      onClick: s ? void 0 : () => r == null ? void 0 : r(),
+      onKeyDown: (i) => {
+        !s && i.key === "Enter" && (i.preventDefault(), r == null || r()), a == null || a(i);
+      },
+      ...k
+    }
+  )
+);
+B.displayName = "CommandItem";
+const V = v.forwardRef(
+  ({ className: t, isOpen: r, children: p, placeholder: a, hasValue: s, ...c }, g) => /* @__PURE__ */ n(
+    "button",
+    {
+      ref: g,
+      type: "button",
+      role: "combobox",
+      "aria-expanded": r,
+      "aria-haspopup": "listbox",
+      className: y(
+        "flex h-12 w-full items-center justify-between gap-3 rounded-xl border border-input bg-background px-4 py-2 text-sm ring-offset-background",
+        "placeholder:text-muted-foreground",
+        "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "hover:bg-accent/10 transition-all",
+        !s && "text-muted-foreground",
+        t
+      ),
+      ...c,
+      children: [
+        /* @__PURE__ */ e("span", { className: "flex min-w-0 flex-1 items-center gap-2 truncate", children: p || /* @__PURE__ */ e("span", { children: a }) }),
+        /* @__PURE__ */ e(
+          "svg",
+          {
+            className: y(
+              "h-4 w-4 shrink-0 text-muted-foreground/60 transition-transform duration-200",
+              r && "rotate-180"
+            ),
+            viewBox: "0 0 20 20",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ e("polyline", { points: "6 8 10 12 14 8" })
+          }
+        )
+      ]
+    }
+  )
+);
+V.displayName = "PickerTrigger";
+const j = v.forwardRef(
+  ({ label: t, trigger: r, children: p, open: a, onOpenChange: s, className: c }, g) => /* @__PURE__ */ n("div", { ref: g, className: y("flex flex-col gap-0", c), children: [
+    t && /* @__PURE__ */ e(U, { children: t }),
+    /* @__PURE__ */ n(Y, { open: a, onOpenChange: s, children: [
+      /* @__PURE__ */ e(Z, { asChild: !0, children: r }),
+      /* @__PURE__ */ e(M, { className: "p-0", children: p })
+    ] })
+  ] })
+);
+j.displayName = "BasePicker";
+const $ = v.forwardRef(
+  ({
+    value: t,
+    onRemove: r,
+    onClear: p,
+    isOpen: a,
+    placeholder: s,
+    renderChip: c,
+    maxVisible: g = 3,
+    className: k,
+    disabled: x,
+    ...i
+  }, d) => {
+    const u = t.slice(0, g), b = t.length - g;
+    return /* @__PURE__ */ n(
+      "button",
+      {
+        ref: d,
+        type: "button",
+        "aria-haspopup": "listbox",
+        "aria-expanded": a,
+        disabled: x,
+        className: y(
+          "flex min-h-[3rem] w-full items-center gap-3 rounded-xl border border-input bg-background px-4 py-2",
+          "text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+          "disabled:cursor-not-allowed disabled:opacity-50 hover:bg-accent/10 transition-all text-start",
+          a && "ring-2 ring-ring ring-offset-2",
+          k
+        ),
+        ...i,
+        children: [
+          /* @__PURE__ */ e("div", { className: "flex flex-1 flex-wrap gap-1.5 min-w-0 items-center", children: t.length === 0 ? /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: s }) : /* @__PURE__ */ n(R, { children: [
+            u.map((f, N) => /* @__PURE__ */ n(
+              "span",
+              {
+                className: "inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-[0.75rem] font-semibold text-primary",
+                children: [
+                  c(f),
+                  /* @__PURE__ */ e(
+                    "span",
+                    {
+                      role: "button",
+                      tabIndex: x ? -1 : 0,
+                      onClick: (m) => {
+                        m.stopPropagation(), x || r(f, m);
+                      },
+                      onKeyDown: (m) => {
+                        (m.key === "Enter" || m.key === " ") && (m.preventDefault(), m.stopPropagation(), x || r(f, m));
+                      },
+                      className: "ml-0.5 rounded-full text-primary/60 hover:text-primary transition-colors cursor-pointer",
+                      "aria-label": "Remove",
+                      children: /* @__PURE__ */ n("svg", { width: "9", height: "9", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: [
+                        /* @__PURE__ */ e("line", { x1: "5", y1: "5", x2: "15", y2: "15" }),
+                        /* @__PURE__ */ e("line", { x1: "15", y1: "5", x2: "5", y2: "15" })
+                      ] })
+                    }
+                  )
+                ]
+              },
+              N
+            )),
+            b > 0 && /* @__PURE__ */ n(L, { className: "bg-muted text-muted-foreground/80 px-2", children: [
+              "+",
+              b
+            ] })
+          ] }) }),
+          /* @__PURE__ */ n("div", { className: "flex shrink-0 items-center gap-1 ml-auto", children: [
+            t.length > 0 && /* @__PURE__ */ e(
+              "span",
+              {
+                role: "button",
+                tabIndex: x ? -1 : 0,
+                onClick: (f) => {
+                  f.stopPropagation(), x || p(f);
+                },
+                onKeyDown: (f) => {
+                  (f.key === "Enter" || f.key === " ") && (f.preventDefault(), f.stopPropagation(), x || p(f));
+                },
+                className: "rounded p-0.5 text-muted-foreground hover:text-foreground hover:bg-accent/30 transition-colors cursor-pointer",
+                "aria-label": "Clear all",
+                children: /* @__PURE__ */ n("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+                  /* @__PURE__ */ e("line", { x1: "5", y1: "5", x2: "15", y2: "15" }),
+                  /* @__PURE__ */ e("line", { x1: "15", y1: "5", x2: "5", y2: "15" })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ e(
+              "svg",
+              {
+                className: y("h-4 w-4 text-muted-foreground/60 transition-transform duration-200", a && "rotate-180"),
+                viewBox: "0 0 20 20",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ e("polyline", { points: "6 8 10 12 14 8" })
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+$.displayName = "MultiSelectTrigger";
+const F = 3;
+function pe({
+  value: t,
+  onChange: r,
+  placeholder: p = "Select countries...",
+  maxItems: a,
+  showFlags: s = !0,
+  searchable: c = !0,
+  disabled: g = !1,
+  className: k,
+  label: x
+}) {
+  const [i, d] = C(!1), [u, b] = C(""), f = u ? I(u) : W(), N = (o) => t.some((w) => w.iso2 === o.iso2), m = (o) => {
+    if (N(o))
+      r(t.filter((w) => w.iso2 !== o.iso2));
+    else {
+      if (a !== void 0 && t.length >= a) return;
+      r([...t, o]);
+    }
+  }, l = (o, w) => {
+    w.stopPropagation(), r(t.filter((Q) => Q.iso2 !== o.iso2));
+  }, h = (o) => {
+    o.stopPropagation(), r([]);
+  };
+  return t.slice(0, F), t.length - F, /* @__PURE__ */ n(
+    j,
+    {
+      label: x,
+      className: k,
+      open: i,
+      onOpenChange: d,
+      trigger: /* @__PURE__ */ e(
+        $,
+        {
+          value: t,
+          onRemove: l,
+          onClear: h,
+          isOpen: i,
+          placeholder: p,
+          disabled: g,
+          renderChip: (o) => /* @__PURE__ */ n(R, { children: [
+            s && /* @__PURE__ */ e(E, { iso2: o.iso2, flag: o.flag, flagUrl: o.flag_url }),
+            /* @__PURE__ */ e("span", { className: "max-w-[80px] truncate", children: o.name })
+          ] })
+        }
+      ),
+      children: [
+        /* @__PURE__ */ n(S, { children: [
+          c && /* @__PURE__ */ e(P, { placeholder: "Search countries...", value: u, onValueChange: b }),
+          /* @__PURE__ */ n(_, { children: [
+            f.length === 0 && /* @__PURE__ */ n(O, { children: [
+              /* @__PURE__ */ e("span", { className: "text-2xl opacity-40", children: "🌍" }),
+              /* @__PURE__ */ e("span", { children: "No countries found" })
+            ] }),
+            f.map((o) => {
+              const w = N(o);
+              return /* @__PURE__ */ n(
+                B,
+                {
+                  onSelect: () => m(o),
+                  selected: w,
+                  children: [
+                    /* @__PURE__ */ e("div", { className: y(
+                      "h-4 w-4 shrink-0 rounded-full border border-border flex items-center justify-center",
+                      w && "bg-primary border-primary"
+                    ), children: w && /* @__PURE__ */ e("svg", { className: "h-2.5 w-2.5 stroke-white", viewBox: "0 0 20 20", fill: "none", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ e("polyline", { points: "4 10 8 14 16 6" }) }) }),
+                    s && /* @__PURE__ */ e(E, { iso2: o.iso2, flag: o.flag, flagUrl: o.flag_url }),
+                    /* @__PURE__ */ n("div", { className: "flex flex-1 flex-col min-w-0", children: [
+                      /* @__PURE__ */ e("span", { className: "truncate font-medium", children: o.name }),
+                      /* @__PURE__ */ n("span", { className: "text-[0.7rem] text-muted-foreground", children: [
+                        o.iso3,
+                        " · +",
+                        o.phone_code
+                      ] })
+                    ] })
+                  ]
+                },
+                o.iso2
+              );
+            })
+          ] })
+        ] }),
+        t.length > 0 && /* @__PURE__ */ n("div", { className: "flex items-center justify-between border-t border-border px-3 py-2 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ n("span", { children: [
+            t.length,
+            " selected",
+            a ? ` / ${a}` : ""
+          ] }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                r([]), d(!1);
+              },
+              className: "text-destructive hover:underline font-medium",
+              children: "Clear all"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function fe({
+  value: t,
+  onChange: r,
+  placeholder: p = "Select a country...",
+  searchable: a = !0,
+  showFlag: s = !0,
+  showPhoneCode: c = !1,
+  disabled: g = !1,
+  className: k,
+  label: x
+}) {
+  const [i, d] = C(!1), [u, b] = C(""), f = u ? I(u) : W(), N = (m) => {
+    const l = W().find(
+      (h) => h.iso2.toLowerCase() === m.toLowerCase()
+    );
+    l && (r(l), d(!1), b(""));
+  };
+  return /* @__PURE__ */ e(
+    j,
+    {
+      label: x,
+      className: k,
+      open: i,
+      onOpenChange: d,
+      trigger: /* @__PURE__ */ e(
+        V,
+        {
+          isOpen: i,
+          hasValue: !!t,
+          placeholder: p,
+          disabled: g,
+          children: t && /* @__PURE__ */ n(R, { children: [
+            s && /* @__PURE__ */ e(E, { iso2: t.iso2, flag: t.flag, flagUrl: t.flag_url }),
+            /* @__PURE__ */ e("span", { className: "flex-1 text-start truncate", children: t.name }),
+            c && /* @__PURE__ */ n(L, { children: [
+              "+",
+              t.phone_code
+            ] })
+          ] })
+        }
+      ),
+      children: /* @__PURE__ */ n(S, { children: [
+        a && /* @__PURE__ */ e(
+          P,
+          {
+            placeholder: "Search country...",
+            value: u,
+            onValueChange: b
+          }
+        ),
+        /* @__PURE__ */ n(_, { children: [
+          f.length === 0 && /* @__PURE__ */ n(O, { children: [
+            /* @__PURE__ */ e("span", { className: "text-2xl opacity-40", children: "🌍" }),
+            /* @__PURE__ */ e("span", { children: "No countries found" })
+          ] }),
+          f.map((m) => {
+            const l = (t == null ? void 0 : t.iso2) === m.iso2;
+            return /* @__PURE__ */ n(
+              B,
+              {
+                onSelect: () => N(m.iso2),
+                selected: l,
+                children: [
+                  s && /* @__PURE__ */ e(E, { iso2: m.iso2, flag: m.flag, flagUrl: m.flag_url }),
+                  /* @__PURE__ */ n("div", { className: "flex flex-1 flex-col gap-0 min-w-0", children: [
+                    /* @__PURE__ */ e("span", { className: "truncate font-medium", children: m.name }),
+                    /* @__PURE__ */ n("span", { className: "text-[0.7rem] text-muted-foreground", children: [
+                      m.iso3,
+                      " · ",
+                      m.division_type
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ n("div", { className: "flex items-center gap-1.5 ml-auto shrink-0", children: [
+                    c && /* @__PURE__ */ n("span", { className: "text-[0.7rem] text-muted-foreground tabular-nums bg-muted px-1.5 py-0.5 rounded", children: [
+                      "+",
+                      m.phone_code
+                    ] }),
+                    l && /* @__PURE__ */ e(T, {})
+                  ] })
+                ]
+              },
+              m.iso2
+            );
+          })
+        ] })
+      ] })
+    }
+  );
+}
+const G = 3;
+function he({
+  value: t,
+  onChange: r,
+  placeholder: p = "Select currencies...",
+  maxItems: a,
+  showSymbol: s = !0,
+  searchable: c = !0,
+  disabled: g = !1,
+  className: k,
+  label: x
+}) {
+  const [i, d] = C(!1), [u, b] = C(""), f = u ? J(u) : q(), N = (o) => t.some((w) => w.code === o.code), m = (o) => {
+    if (N(o))
+      r(t.filter((w) => w.code !== o.code));
+    else {
+      if (a !== void 0 && t.length >= a) return;
+      r([...t, o]);
+    }
+  }, l = (o, w) => {
+    w.stopPropagation(), r(t.filter((Q) => Q.code !== o.code));
+  }, h = (o) => {
+    o.stopPropagation(), r([]);
+  };
+  return t.slice(0, G), t.length - G, /* @__PURE__ */ n(
+    j,
+    {
+      label: x,
+      className: k,
+      open: i,
+      onOpenChange: d,
+      trigger: /* @__PURE__ */ e(
+        $,
+        {
+          value: t,
+          onRemove: l,
+          onClear: h,
+          isOpen: i,
+          placeholder: p,
+          disabled: g,
+          renderChip: (o) => /* @__PURE__ */ n(R, { children: [
+            s && /* @__PURE__ */ e("span", { className: "font-bold", children: o.symbol }),
+            /* @__PURE__ */ e("span", { children: o.code })
+          ] })
+        }
+      ),
+      children: [
+        /* @__PURE__ */ n(S, { children: [
+          c && /* @__PURE__ */ e(P, { placeholder: "Search currencies...", value: u, onValueChange: b }),
+          /* @__PURE__ */ n(_, { children: [
+            f.length === 0 && /* @__PURE__ */ n(O, { children: [
+              /* @__PURE__ */ e("span", { className: "text-2xl opacity-40", children: "💰" }),
+              /* @__PURE__ */ e("span", { children: "No currencies found" })
+            ] }),
+            f.map((o) => {
+              const w = N(o);
+              return /* @__PURE__ */ n(
+                B,
+                {
+                  onSelect: () => m(o),
+                  selected: w,
+                  children: [
+                    /* @__PURE__ */ e("div", { className: y(
+                      "h-4 w-4 shrink-0 rounded-full border border-border flex items-center justify-center",
+                      w && "bg-primary border-primary"
+                    ), children: w && /* @__PURE__ */ e("svg", { className: "h-2.5 w-2.5 stroke-white", viewBox: "0 0 20 20", fill: "none", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ e("polyline", { points: "4 10 8 14 16 6" }) }) }),
+                    s && /* @__PURE__ */ e("span", { className: "min-w-[1.5rem] text-center font-bold text-primary", children: o.symbol }),
+                    /* @__PURE__ */ n("div", { className: "flex flex-1 flex-col min-w-0", children: [
+                      /* @__PURE__ */ e("span", { className: "truncate font-medium", children: o.name }),
+                      /* @__PURE__ */ e("span", { className: "text-[0.7rem] text-muted-foreground", children: o.code })
+                    ] })
+                  ]
+                },
+                o.code
+              );
+            })
+          ] })
+        ] }),
+        t.length > 0 && /* @__PURE__ */ n("div", { className: "flex items-center justify-between border-t border-border px-3 py-2 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ n("span", { children: [
+            t.length,
+            " selected",
+            a ? ` / ${a}` : ""
+          ] }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                r([]), d(!1);
+              },
+              className: "text-destructive hover:underline font-medium",
+              children: "Clear all"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ue({
+  value: t,
+  onChange: r,
+  placeholder: p = "Select a currency...",
+  searchable: a = !0,
+  showSymbol: s = !0,
+  countryIso2: c,
+  autoSelect: g = !0,
+  disabled: k = !1,
+  className: x,
+  label: i
+}) {
+  const [d, u] = C(!1), [b, f] = C("");
+  H(() => {
+    if (c && g && !t) {
+      const h = A(c);
+      h && r(h);
+    }
+  }, [c, g, t, r]);
+  const m = b ? J(b, c) : (() => {
+    if (c) {
+      const h = A(c);
+      return h ? [h] : [];
+    }
+    return q();
+  })(), l = (h) => {
+    const o = q().find(
+      (w) => w.code.toLowerCase() === h.toLowerCase()
+    );
+    o && (r(o), u(!1), f(""));
+  };
+  return /* @__PURE__ */ e(
+    j,
+    {
+      label: i,
+      className: x,
+      open: d,
+      onOpenChange: u,
+      trigger: /* @__PURE__ */ e(
+        V,
+        {
+          isOpen: d,
+          hasValue: !!t,
+          placeholder: p,
+          disabled: k,
+          children: t && /* @__PURE__ */ n(R, { children: [
+            s && /* @__PURE__ */ e("span", { className: "min-w-[1.5rem] text-center font-bold text-primary text-base", children: t.symbol }),
+            /* @__PURE__ */ n("span", { className: "flex-1 text-start truncate", children: [
+              t.code,
+              " — ",
+              t.name
+            ] })
+          ] })
+        }
+      ),
+      children: /* @__PURE__ */ n(S, { children: [
+        a && /* @__PURE__ */ e(
+          P,
+          {
+            placeholder: "Search currency...",
+            value: b,
+            onValueChange: f
+          }
+        ),
+        /* @__PURE__ */ n(_, { children: [
+          m.length === 0 && /* @__PURE__ */ n(O, { children: [
+            /* @__PURE__ */ e("span", { className: "text-2xl opacity-40", children: "💰" }),
+            /* @__PURE__ */ e("span", { children: "No currencies found" })
+          ] }),
+          m.map((h) => {
+            const o = (t == null ? void 0 : t.code) === h.code;
+            return /* @__PURE__ */ n(
+              B,
+              {
+                onSelect: () => l(h.code),
+                selected: o,
+                children: [
+                  s && /* @__PURE__ */ e("span", { className: "min-w-[1.5rem] text-center font-bold text-primary", children: h.symbol }),
+                  /* @__PURE__ */ n("div", { className: "flex flex-1 flex-col gap-0 min-w-0", children: [
+                    /* @__PURE__ */ e("span", { className: "truncate font-medium", children: h.name }),
+                    /* @__PURE__ */ e("span", { className: "text-[0.7rem] text-muted-foreground", children: h.code })
+                  ] }),
+                  o && /* @__PURE__ */ e(T, { className: "ml-auto shrink-0" })
+                ]
+              },
+              h.code
+            );
+          })
+        ] })
+      ] })
+    }
+  );
+}
+function ge({
+  countryIso2: t,
+  value: r,
+  onChange: p,
+  placeholder: a = "Select a division...",
+  searchable: s = !0,
+  disabled: c = !1,
+  className: g,
+  label: k
+}) {
+  const [x, i] = C(!1), [d, u] = C(""), b = te(t), f = d ? b.filter(
+    (l) => l.name.toLowerCase().includes(d.toLowerCase()) || l.iso2.toLowerCase().includes(d.toLowerCase()) || l.timezone.toLowerCase().includes(d.toLowerCase())
+  ) : b, N = c || !t || b.length === 0, m = (l) => {
+    const h = b.find((o) => o.name === l);
+    h && (p(h), i(!1), u(""));
+  };
+  return /* @__PURE__ */ e(
+    j,
+    {
+      label: k,
+      className: g,
+      open: x,
+      onOpenChange: (l) => !N && i(l),
+      trigger: /* @__PURE__ */ e(
+        V,
+        {
+          isOpen: x,
+          hasValue: !!r,
+          placeholder: t ? a : "Select a country first",
+          disabled: N,
+          children: r && /* @__PURE__ */ n(R, { children: [
+            /* @__PURE__ */ e("span", { className: "flex-1 text-start truncate", children: r.name }),
+            /* @__PURE__ */ e(L, { children: r.iso2 })
+          ] })
+        }
+      ),
+      children: /* @__PURE__ */ n(S, { children: [
+        s && /* @__PURE__ */ e(
+          P,
+          {
+            placeholder: "Search division...",
+            value: d,
+            onValueChange: u
+          }
+        ),
+        /* @__PURE__ */ n(_, { children: [
+          f.length === 0 && /* @__PURE__ */ n(O, { children: [
+            /* @__PURE__ */ e("span", { className: "text-2xl opacity-40", children: "🗺️" }),
+            /* @__PURE__ */ e("span", { children: "No divisions found" })
+          ] }),
+          f.map((l) => {
+            const h = (r == null ? void 0 : r.iso2) === l.iso2 && (r == null ? void 0 : r.name) === l.name;
+            return /* @__PURE__ */ n(
+              B,
+              {
+                onSelect: () => m(l.name),
+                selected: h,
+                children: [
+                  /* @__PURE__ */ n("div", { className: "flex flex-1 flex-col gap-0 min-w-0", children: [
+                    /* @__PURE__ */ e("span", { className: "truncate font-medium", children: l.name }),
+                    /* @__PURE__ */ e("span", { className: "text-[0.7rem] text-muted-foreground truncate", children: l.timezone })
+                  ] }),
+                  /* @__PURE__ */ n("div", { className: "flex items-center gap-1.5 ml-auto shrink-0", children: [
+                    /* @__PURE__ */ e(L, { children: l.iso2 }),
+                    h && /* @__PURE__ */ e(T, {})
+                  ] })
+                ]
+              },
+              `${l.iso2}-${l.name}`
+            );
+          })
+        ] })
+      ] })
+    }
+  );
+}
+function xe({
+  value: t,
+  onChange: r,
+  placeholder: p = "Select a language...",
+  searchable: a = !0,
+  showNativeName: s = !0,
+  disabled: c = !1,
+  className: g,
+  label: k
+}) {
+  const [x, i] = C(!1), [d, u] = C(""), b = d ? ne(d) : D(), f = (N) => {
+    const m = D().find(
+      (l) => l.code.toLowerCase() === N.toLowerCase()
+    );
+    m && (r(m), i(!1), u(""));
+  };
+  return /* @__PURE__ */ e(
+    j,
+    {
+      label: k,
+      className: g,
+      open: x,
+      onOpenChange: i,
+      trigger: /* @__PURE__ */ e(
+        V,
+        {
+          isOpen: x,
+          hasValue: !!t,
+          placeholder: p,
+          disabled: c,
+          children: t && /* @__PURE__ */ n(R, { children: [
+            /* @__PURE__ */ e("span", { className: "flex-1 text-start truncate", children: t.english_name }),
+            s && t.native_name !== t.english_name && /* @__PURE__ */ e("span", { className: "text-xs italic text-muted-foreground shrink-0", children: t.native_name })
+          ] })
+        }
+      ),
+      children: /* @__PURE__ */ n(S, { children: [
+        a && /* @__PURE__ */ e(
+          P,
+          {
+            placeholder: "Search language...",
+            value: d,
+            onValueChange: u
+          }
+        ),
+        /* @__PURE__ */ n(_, { children: [
+          b.length === 0 && /* @__PURE__ */ n(O, { children: [
+            /* @__PURE__ */ e("span", { className: "text-2xl opacity-40", children: "🌐" }),
+            /* @__PURE__ */ e("span", { children: "No languages found" })
+          ] }),
+          b.map((N) => {
+            const m = (t == null ? void 0 : t.code) === N.code;
+            return /* @__PURE__ */ n(
+              B,
+              {
+                onSelect: () => f(N.code),
+                selected: m,
+                children: [
+                  /* @__PURE__ */ n("div", { className: "flex flex-1 flex-col gap-0 min-w-0", children: [
+                    /* @__PURE__ */ e("span", { className: "truncate font-medium", children: N.english_name }),
+                    s && N.native_name !== N.english_name && /* @__PURE__ */ e("span", { className: "text-[0.7rem] text-muted-foreground italic", children: N.native_name })
+                  ] }),
+                  /* @__PURE__ */ n("div", { className: "flex items-center gap-1.5 ml-auto shrink-0", children: [
+                    /* @__PURE__ */ e(L, { className: "text-[0.6rem]", children: N.code }),
+                    m && /* @__PURE__ */ e(T, {})
+                  ] })
+                ]
+              },
+              N.code
+            );
+          })
+        ] })
+      ] })
+    }
+  );
+}
+const se = v.forwardRef(
+  ({
+    value: t,
+    onChange: r,
+    defaultCountryIso2: p = "US",
+    placeholder: a = "Phone number",
+    showFlag: s = !0,
+    disabled: c = !1,
+    className: g,
+    label: k
+  }, x) => {
+    const i = re(t, r, p);
+    return /* @__PURE__ */ n("div", { ref: x, className: y("flex flex-col gap-0", g), children: [
+      k && /* @__PURE__ */ e(U, { children: k }),
+      /* @__PURE__ */ n(
+        "div",
+        {
+          className: y(
+            "flex h-12 items-stretch overflow-hidden rounded-xl border border-input bg-background ring-offset-background",
+            "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+            "transition-shadow",
+            c && "opacity-50 pointer-events-none"
+          ),
+          children: [
+            /* @__PURE__ */ n(
+              Y,
+              {
+                open: i.isOpen,
+                onOpenChange: (d) => d ? i.toggle() : i.close(),
+                children: [
+                  /* @__PURE__ */ e(Z, { asChild: !0, children: /* @__PURE__ */ n(
+                    "button",
+                    {
+                      type: "button",
+                      disabled: c,
+                      className: y(
+                        "flex h-full shrink-0 items-center gap-1.5 border-r border-input bg-muted px-3",
+                        "text-sm font-semibold text-foreground transition-colors outline-none",
+                        "hover:bg-accent/30 focus-visible:bg-accent/30"
+                      ),
+                      children: [
+                        s && i.country && /* @__PURE__ */ e(E, { iso2: i.country.iso2, flag: i.country.flag, flagUrl: i.country.flag_url }),
+                        /* @__PURE__ */ e("span", { className: "tabular-nums text-primary", children: i.country ? `+${i.country.phone_code}` : "+?" }),
+                        /* @__PURE__ */ e(
+                          "svg",
+                          {
+                            className: y(
+                              "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform duration-200",
+                              i.isOpen && "rotate-180"
+                            ),
+                            viewBox: "0 0 20 20",
+                            fill: "none",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            strokeLinecap: "round",
+                            children: /* @__PURE__ */ e("polyline", { points: "5 8 10 13 15 8" })
+                          }
+                        )
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ e(
+                    M,
+                    {
+                      align: "start",
+                      side: "bottom",
+                      sideOffset: 4,
+                      className: "w-72",
+                      children: /* @__PURE__ */ n(S, { children: [
+                        /* @__PURE__ */ e(
+                          P,
+                          {
+                            placeholder: "Search country or code...",
+                            value: i.searchQuery,
+                            onValueChange: i.setSearchQuery
+                          }
+                        ),
+                        /* @__PURE__ */ n(_, { children: [
+                          i.filteredCountries.length === 0 && /* @__PURE__ */ n(O, { children: [
+                            /* @__PURE__ */ e("span", { className: "text-2xl opacity-40", children: "🌍" }),
+                            /* @__PURE__ */ e("span", { children: "No countries found" })
+                          ] }),
+                          i.filteredCountries.map((d) => {
+                            var b;
+                            const u = ((b = i.country) == null ? void 0 : b.iso2) === d.iso2;
+                            return /* @__PURE__ */ n(
+                              B,
+                              {
+                                onSelect: () => i.selectCountry(d),
+                                selected: u,
+                                children: [
+                                  /* @__PURE__ */ e(E, { iso2: d.iso2, flag: d.flag, flagUrl: d.flag_url }),
+                                  /* @__PURE__ */ e("div", { className: "flex flex-1 flex-col min-w-0", children: /* @__PURE__ */ e("span", { className: "truncate font-medium text-sm", children: d.name }) }),
+                                  /* @__PURE__ */ n(L, { className: "ml-auto tabular-nums text-[0.7rem]", children: [
+                                    "+",
+                                    d.phone_code
+                                  ] })
+                                ]
+                              },
+                              d.iso2
+                            );
+                          })
+                        ] })
+                      ] })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "tel",
+                value: i.number,
+                onChange: (d) => i.setNumber(d.target.value),
+                placeholder: a,
+                disabled: c,
+                minLength: i.minLength,
+                maxLength: i.maxLength,
+                inputMode: "numeric",
+                autoComplete: "tel-national",
+                className: y(
+                  "flex-1 min-w-0 bg-transparent px-3 text-sm text-foreground",
+                  "placeholder:text-muted-foreground",
+                  "focus:outline-none"
+                )
+              }
+            )
+          ]
+        }
+      ),
+      i.value && /* @__PURE__ */ n("p", { className: "text-[0.7rem] text-muted-foreground tabular-nums pl-0.5", children: [
+        "Full:",
+        " ",
+        /* @__PURE__ */ e("span", { className: "font-mono text-primary", children: i.value.full })
+      ] })
+    ] });
+  }
+);
+se.displayName = "PhoneInput";
+function be({
+  value: t,
+  onChange: r,
+  placeholder: p = "Select a timezone...",
+  searchable: a = !0,
+  countryIso2: s,
+  autoSelect: c = !0,
+  disabled: g = !1,
+  className: k,
+  label: x
+}) {
+  const [i, d] = C(!1), [u, b] = C("");
+  H(() => {
+    if (s && c && !t) {
+      const l = X(s);
+      l && l.length > 0 && r(l[0]);
+    }
+  }, [s, c, t, r]);
+  const f = s ? X(s) : oe(), N = u ? ie(u, s) : f, m = (l) => {
+    const h = f.find((o) => o.name === l);
+    h && (r(h), d(!1), b(""));
+  };
+  return /* @__PURE__ */ e(
+    j,
+    {
+      label: x,
+      className: k,
+      open: i,
+      onOpenChange: d,
+      trigger: /* @__PURE__ */ e(
+        V,
+        {
+          isOpen: i,
+          hasValue: !!t,
+          placeholder: p,
+          disabled: g,
+          children: t && /* @__PURE__ */ n(R, { children: [
+            /* @__PURE__ */ e("span", { className: "flex-1 text-start truncate", children: t.name }),
+            /* @__PURE__ */ e(L, { children: t.offset_name })
+          ] })
+        }
+      ),
+      children: /* @__PURE__ */ n(S, { children: [
+        a && /* @__PURE__ */ e(
+          P,
+          {
+            placeholder: "Search timezone...",
+            value: u,
+            onValueChange: b
+          }
+        ),
+        /* @__PURE__ */ n(_, { children: [
+          N.length === 0 && /* @__PURE__ */ n(O, { children: [
+            /* @__PURE__ */ e("span", { className: "text-2xl opacity-40", children: "🕐" }),
+            /* @__PURE__ */ e("span", { children: "No timezones found" })
+          ] }),
+          N.map((l) => {
+            const h = (t == null ? void 0 : t.name) === l.name;
+            return /* @__PURE__ */ n(
+              B,
+              {
+                onSelect: () => m(l.name),
+                selected: h,
+                children: [
+                  /* @__PURE__ */ n("div", { className: "flex flex-1 flex-col gap-0 min-w-0", children: [
+                    /* @__PURE__ */ e("span", { className: "truncate font-medium", children: l.name }),
+                    /* @__PURE__ */ n("span", { className: "text-[0.7rem] text-muted-foreground", children: [
+                      l.tzName,
+                      " · ",
+                      l.abbreviation
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ n("div", { className: "flex items-center gap-1.5 ml-auto shrink-0", children: [
+                    /* @__PURE__ */ e(L, { className: "tabular-nums text-[0.65rem]", children: l.offset_name }),
+                    h && /* @__PURE__ */ e(T, {})
+                  ] })
+                ]
+              },
+              l.name
+            );
+          })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  L as Badge,
+  T as CheckIcon,
+  O as CommandEmpty,
+  P as CommandInput,
+  B as CommandItem,
+  _ as CommandList,
+  S as CommandRoot,
+  pe as CountryMultiSelect,
+  fe as CountryPicker,
+  he as CurrencyMultiSelect,
+  ue as CurrencyPicker,
+  ge as DivisionPicker,
+  E as Flag,
+  xe as LanguagePicker,
+  se as PhoneInput,
+  V as PickerTrigger,
+  Y as Popover,
+  M as PopoverContent,
+  Z as PopoverTrigger,
+  be as TimezonePicker,
+  y as cn
+};
+//# sourceMappingURL=index.mjs.map