react-country-kit 1.3.0 → 2.0.0

package/dist/ui.es.js

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