react-country-kit 1.0.0

package/dist/react-country-kit.es.js

@@ -0,0 +1,841 @@
+import { jsx as e, jsxs as n, Fragment as C } from "react/jsx-runtime";
+import { useRef as b, useEffect as N } from "react";
+import { u as I, s as L, g as S, a as $, b as E, c as B, d as O, e as P, f as _, h as W, i as Q } from "./useTimezonePicker-BMFPsn3E.mjs";
+import { j as ce, k as se, l as ie, m as te, n as le, o as oe, p as ae, q as de, r as me, t as he, v as pe, w as ke, x as ue, y as ge, z as Ne } from "./useTimezonePicker-BMFPsn3E.mjs";
+function f({ value: s, onChange: o, placeholder: u = "Search...", autoFocus: h = !0 }) {
+  const m = b(null);
+  return N(() => {
+    h && setTimeout(() => {
+      var d;
+      return (d = m.current) == null ? void 0 : d.focus();
+    }, 50);
+  }, [h]), /* @__PURE__ */ e("div", { className: "rck-search-wrapper", children: /* @__PURE__ */ n("div", { className: "rck-search", children: [
+    /* @__PURE__ */ n("svg", { className: "rck-search-icon", 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",
+        value: s,
+        onChange: (d) => o(d.target.value),
+        placeholder: u,
+        "aria-label": "Search"
+      }
+    ),
+    s && /* @__PURE__ */ e(
+      "button",
+      {
+        style: { background: "none", border: "none", cursor: "pointer", color: "var(--rck-text-placeholder)", padding: 0, display: "flex" },
+        onClick: () => o(""),
+        "aria-label": "Clear search",
+        type: "button",
+        children: /* @__PURE__ */ e("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M6 6l8 8M14 6l-8 8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", fill: "none" }) })
+      }
+    )
+  ] }) });
+}
+const v = 3;
+function T() {
+  return /* @__PURE__ */ e("svg", { 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" }) });
+}
+function U({
+  value: s,
+  onChange: o,
+  placeholder: u = "Select countries...",
+  maxItems: h,
+  showFlags: m = !0,
+  searchable: d = !0,
+  disabled: g = !1,
+  className: k,
+  label: r
+}) {
+  const c = I(
+    S(),
+    (t, a) => a ? L(a) : t,
+    (t) => t.iso2,
+    s,
+    o,
+    h
+  ), i = b(null);
+  N(() => {
+    if (!c.isOpen) return;
+    const t = (a) => {
+      i.current && !i.current.contains(a.target) && c.close();
+    };
+    return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
+  }, [c.isOpen, c.close]), N(() => {
+    if (!c.isOpen) return;
+    const t = (a) => {
+      a.key === "Escape" && c.close();
+    };
+    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+  }, [c.isOpen, c.close]);
+  const l = s.slice(0, v), p = s.length - v;
+  return /* @__PURE__ */ n("div", { ref: i, className: `rck-picker${k ? ` ${k}` : ""}`, children: [
+    r && /* @__PURE__ */ e("span", { className: "rck-label", children: r }),
+    /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        className: `rck-multiselect-trigger${c.isOpen ? " rck-open" : ""}`,
+        disabled: g,
+        onClick: c.toggle,
+        "aria-haspopup": "listbox",
+        "aria-expanded": c.isOpen,
+        children: [
+          /* @__PURE__ */ e("div", { className: "rck-chips-area", children: s.length === 0 ? /* @__PURE__ */ e("span", { style: { color: "var(--rck-text-placeholder)", fontSize: "0.9375rem" }, children: u }) : /* @__PURE__ */ n(C, { children: [
+            l.map((t) => /* @__PURE__ */ n("span", { className: "rck-chip", children: [
+              m && /* @__PURE__ */ e("span", { children: t.flag }),
+              /* @__PURE__ */ e("span", { className: "rck-chip-label", children: t.name }),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  className: "rck-chip-remove",
+                  onClick: (a) => {
+                    a.stopPropagation(), c.removeItem(t), o(s.filter((y) => y.iso2 !== t.iso2));
+                  },
+                  "aria-label": `Remove ${t.name}`,
+                  children: /* @__PURE__ */ n("svg", { width: "10", height: "10", 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" })
+                  ] })
+                }
+              )
+            ] }, t.iso2)),
+            p > 0 && /* @__PURE__ */ n("span", { className: "rck-chip-overflow", children: [
+              "+",
+              p,
+              " more"
+            ] })
+          ] }) }),
+          s.length > 0 && /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              className: "rck-multiselect-clear",
+              onClick: (t) => {
+                t.stopPropagation(), c.clearAll(), o([]);
+              },
+              "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: "rck-chevron", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ e("polyline", { points: "5 8 10 13 15 8" }) })
+        ]
+      }
+    ),
+    c.isOpen && /* @__PURE__ */ n("div", { className: "rck-dropdown", role: "listbox", "aria-multiselectable": "true", children: [
+      d && /* @__PURE__ */ e(f, { value: c.searchQuery, onChange: c.setSearchQuery, placeholder: "Search countries..." }),
+      /* @__PURE__ */ e("ul", { className: "rck-list", children: c.filteredItems.length === 0 ? /* @__PURE__ */ n("li", { className: "rck-empty", children: [
+        /* @__PURE__ */ e("span", { className: "rck-empty-icon", children: "🌍" }),
+        /* @__PURE__ */ e("span", { children: "No countries found" })
+      ] }) : c.filteredItems.map((t) => {
+        const a = c.isSelected(t);
+        return /* @__PURE__ */ n(
+          "li",
+          {
+            role: "option",
+            "aria-selected": a,
+            className: `rck-item${a ? " rck-item-selected" : ""}`,
+            onClick: () => c.toggleItem(t),
+            tabIndex: 0,
+            onKeyDown: (y) => y.key === "Enter" && c.toggleItem(t),
+            children: [
+              /* @__PURE__ */ e("div", { className: a ? "rck-item-check-multi" : "rck-item-check-empty", children: a && /* @__PURE__ */ e(T, {}) }),
+              m && /* @__PURE__ */ e("span", { className: "rck-item-flag", children: t.flag }),
+              /* @__PURE__ */ n("div", { className: "rck-item-main", children: [
+                /* @__PURE__ */ e("span", { className: "rck-item-name", children: t.name }),
+                /* @__PURE__ */ n("span", { className: "rck-item-sub", children: [
+                  t.iso3,
+                  " · +",
+                  t.phone_code
+                ] })
+              ] })
+            ]
+          },
+          t.iso2
+        );
+      }) })
+    ] })
+  ] });
+}
+const D = () => /* @__PURE__ */ e(
+  "svg",
+  {
+    className: "rck-chevron",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ e("polyline", { points: "5 8 10 13 15 8" })
+  }
+);
+function x({
+  isOpen: s,
+  onClose: o,
+  onToggle: u,
+  label: h,
+  disabled: m,
+  className: d,
+  triggerContent: g,
+  children: k,
+  id: r
+}) {
+  const c = b(null);
+  return N(() => {
+    if (!s) return;
+    const i = (l) => {
+      c.current && !c.current.contains(l.target) && o();
+    };
+    return document.addEventListener("mousedown", i), () => document.removeEventListener("mousedown", i);
+  }, [s, o]), N(() => {
+    if (!s) return;
+    const i = (l) => {
+      l.key === "Escape" && o();
+    };
+    return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
+  }, [s, o]), /* @__PURE__ */ n("div", { ref: c, className: `rck-picker${d ? ` ${d}` : ""}`, children: [
+    h && /* @__PURE__ */ e("span", { className: "rck-label", id: r ? `${r}-label` : void 0, children: h }),
+    /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        className: `rck-trigger${s ? " rck-open" : ""}`,
+        disabled: m,
+        "aria-haspopup": "listbox",
+        "aria-expanded": s,
+        "aria-labelledby": r && h ? `${r}-label` : void 0,
+        id: r,
+        onClick: u,
+        children: [
+          g,
+          /* @__PURE__ */ e(D, {})
+        ]
+      }
+    ),
+    s && /* @__PURE__ */ e("div", { className: "rck-dropdown", role: "listbox", children: k })
+  ] });
+}
+const j = () => /* @__PURE__ */ e("svg", { className: "rck-item-check", 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" }) });
+function G({
+  value: s,
+  onChange: o,
+  placeholder: u = "Select a country",
+  searchable: h = !0,
+  showFlag: m = !0,
+  showPhoneCode: d = !1,
+  disabled: g = !1,
+  className: k,
+  label: r
+}) {
+  const c = $(s, o), i = /* @__PURE__ */ e("div", { className: "rck-trigger-content", children: s ? /* @__PURE__ */ n(C, { children: [
+    m && /* @__PURE__ */ e("span", { className: "rck-flag", children: s.flag }),
+    /* @__PURE__ */ e("span", { className: "rck-trigger-text", children: s.name }),
+    d && /* @__PURE__ */ n("span", { className: "rck-badge", children: [
+      "+",
+      s.phone_code
+    ] })
+  ] }) : /* @__PURE__ */ e("span", { className: "rck-trigger-text rck-placeholder", children: u }) });
+  return /* @__PURE__ */ n(
+    x,
+    {
+      isOpen: c.isOpen,
+      onClose: c.close,
+      onToggle: c.toggle,
+      label: r,
+      disabled: g,
+      className: k,
+      triggerContent: i,
+      id: "rck-country-picker",
+      children: [
+        h && /* @__PURE__ */ e(
+          f,
+          {
+            value: c.searchQuery,
+            onChange: c.setSearchQuery,
+            placeholder: "Search country..."
+          }
+        ),
+        /* @__PURE__ */ e("ul", { className: "rck-list", role: "listbox", "aria-label": "Countries", children: c.filteredItems.length === 0 ? /* @__PURE__ */ n("li", { className: "rck-empty", children: [
+          /* @__PURE__ */ e("span", { className: "rck-empty-icon", children: "🌍" }),
+          /* @__PURE__ */ e("span", { children: "No countries found" })
+        ] }) : c.filteredItems.map((l) => {
+          const p = (s == null ? void 0 : s.iso2) === l.iso2;
+          return /* @__PURE__ */ n(
+            "li",
+            {
+              role: "option",
+              "aria-selected": p,
+              className: `rck-item${p ? " rck-item-selected" : ""}`,
+              onClick: () => c.selectItem(l),
+              tabIndex: 0,
+              onKeyDown: (t) => t.key === "Enter" && c.selectItem(l),
+              children: [
+                m && /* @__PURE__ */ e("span", { className: "rck-item-flag", children: l.flag }),
+                /* @__PURE__ */ n("div", { className: "rck-item-main", children: [
+                  /* @__PURE__ */ e("span", { className: "rck-item-name", children: l.name }),
+                  /* @__PURE__ */ n("span", { className: "rck-item-sub", children: [
+                    l.iso3,
+                    " · ",
+                    l.division_type
+                  ] })
+                ] }),
+                /* @__PURE__ */ n("div", { className: "rck-item-right", children: [
+                  d && /* @__PURE__ */ n("span", { className: "rck-item-phone", children: [
+                    "+",
+                    l.phone_code
+                  ] }),
+                  p && /* @__PURE__ */ e(j, {})
+                ] })
+              ]
+            },
+            l.iso2
+          );
+        }) })
+      ]
+    }
+  );
+}
+const w = 3;
+function z() {
+  return /* @__PURE__ */ e("svg", { 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" }) });
+}
+function J({
+  value: s,
+  onChange: o,
+  placeholder: u = "Select currencies...",
+  maxItems: h,
+  showSymbol: m = !0,
+  searchable: d = !0,
+  disabled: g = !1,
+  className: k,
+  label: r
+}) {
+  const c = I(
+    B(),
+    (t, a) => a ? E(a) : t,
+    (t) => t.code,
+    s,
+    o,
+    h
+  ), i = b(null);
+  N(() => {
+    if (!c.isOpen) return;
+    const t = (a) => {
+      i.current && !i.current.contains(a.target) && c.close();
+    };
+    return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
+  }, [c.isOpen, c.close]), N(() => {
+    if (!c.isOpen) return;
+    const t = (a) => {
+      a.key === "Escape" && c.close();
+    };
+    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+  }, [c.isOpen, c.close]);
+  const l = s.slice(0, w), p = s.length - w;
+  return /* @__PURE__ */ n("div", { ref: i, className: `rck-picker${k ? ` ${k}` : ""}`, children: [
+    r && /* @__PURE__ */ e("span", { className: "rck-label", children: r }),
+    /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        className: `rck-multiselect-trigger${c.isOpen ? " rck-open" : ""}`,
+        disabled: g,
+        onClick: c.toggle,
+        "aria-haspopup": "listbox",
+        "aria-expanded": c.isOpen,
+        children: [
+          /* @__PURE__ */ e("div", { className: "rck-chips-area", children: s.length === 0 ? /* @__PURE__ */ e("span", { style: { color: "var(--rck-text-placeholder)", fontSize: "0.9375rem" }, children: u }) : /* @__PURE__ */ n(C, { children: [
+            l.map((t) => /* @__PURE__ */ n("span", { className: "rck-chip", children: [
+              m && /* @__PURE__ */ e("span", { children: t.symbol }),
+              /* @__PURE__ */ e("span", { className: "rck-chip-label", children: t.code }),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  className: "rck-chip-remove",
+                  onClick: (a) => {
+                    a.stopPropagation(), o(s.filter((y) => y.code !== t.code));
+                  },
+                  "aria-label": `Remove ${t.code}`,
+                  children: /* @__PURE__ */ n("svg", { width: "10", height: "10", 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" })
+                  ] })
+                }
+              )
+            ] }, t.code)),
+            p > 0 && /* @__PURE__ */ n("span", { className: "rck-chip-overflow", children: [
+              "+",
+              p,
+              " more"
+            ] })
+          ] }) }),
+          s.length > 0 && /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              className: "rck-multiselect-clear",
+              onClick: (t) => {
+                t.stopPropagation(), c.clearAll(), o([]);
+              },
+              "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: "rck-chevron", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ e("polyline", { points: "5 8 10 13 15 8" }) })
+        ]
+      }
+    ),
+    c.isOpen && /* @__PURE__ */ n("div", { className: "rck-dropdown", role: "listbox", "aria-multiselectable": "true", children: [
+      d && /* @__PURE__ */ e(f, { value: c.searchQuery, onChange: c.setSearchQuery, placeholder: "Search currencies..." }),
+      /* @__PURE__ */ e("ul", { className: "rck-list", children: c.filteredItems.length === 0 ? /* @__PURE__ */ n("li", { className: "rck-empty", children: [
+        /* @__PURE__ */ e("span", { className: "rck-empty-icon", children: "💰" }),
+        /* @__PURE__ */ e("span", { children: "No currencies found" })
+      ] }) : c.filteredItems.map((t) => {
+        const a = c.isSelected(t);
+        return /* @__PURE__ */ n(
+          "li",
+          {
+            role: "option",
+            "aria-selected": a,
+            className: `rck-item${a ? " rck-item-selected" : ""}`,
+            onClick: () => c.toggleItem(t),
+            tabIndex: 0,
+            onKeyDown: (y) => y.key === "Enter" && c.toggleItem(t),
+            children: [
+              /* @__PURE__ */ e("div", { className: a ? "rck-item-check-multi" : "rck-item-check-empty", children: a && /* @__PURE__ */ e(z, {}) }),
+              m && /* @__PURE__ */ e("span", { className: "rck-item-symbol", children: t.symbol }),
+              /* @__PURE__ */ n("div", { className: "rck-item-main", children: [
+                /* @__PURE__ */ e("span", { className: "rck-item-name", children: t.name }),
+                /* @__PURE__ */ e("span", { className: "rck-item-sub", children: t.code })
+              ] })
+            ]
+          },
+          t.code
+        );
+      }) })
+    ] })
+  ] });
+}
+const M = () => /* @__PURE__ */ e("svg", { className: "rck-item-check", 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" }) });
+function Y({
+  value: s,
+  onChange: o,
+  placeholder: u = "Select a currency",
+  searchable: h = !0,
+  showSymbol: m = !0,
+  disabled: d = !1,
+  className: g,
+  label: k
+}) {
+  const r = O(s, o), c = /* @__PURE__ */ e("div", { className: "rck-trigger-content", children: s ? /* @__PURE__ */ n(C, { children: [
+    m && /* @__PURE__ */ e("span", { className: "rck-item-symbol", children: s.symbol }),
+    /* @__PURE__ */ n("span", { className: "rck-trigger-text", children: [
+      s.code,
+      " — ",
+      s.name
+    ] })
+  ] }) : /* @__PURE__ */ e("span", { className: "rck-trigger-text rck-placeholder", children: u }) });
+  return /* @__PURE__ */ n(
+    x,
+    {
+      isOpen: r.isOpen,
+      onClose: r.close,
+      onToggle: r.toggle,
+      label: k,
+      disabled: d,
+      className: g,
+      triggerContent: c,
+      id: "rck-currency-picker",
+      children: [
+        h && /* @__PURE__ */ e(
+          f,
+          {
+            value: r.searchQuery,
+            onChange: r.setSearchQuery,
+            placeholder: "Search currency..."
+          }
+        ),
+        /* @__PURE__ */ e("ul", { className: "rck-list", role: "listbox", "aria-label": "Currencies", children: r.filteredItems.length === 0 ? /* @__PURE__ */ n("li", { className: "rck-empty", children: [
+          /* @__PURE__ */ e("span", { className: "rck-empty-icon", children: "💰" }),
+          /* @__PURE__ */ e("span", { children: "No currencies found" })
+        ] }) : r.filteredItems.map((i) => {
+          const l = (s == null ? void 0 : s.code) === i.code;
+          return /* @__PURE__ */ n(
+            "li",
+            {
+              role: "option",
+              "aria-selected": l,
+              className: `rck-item${l ? " rck-item-selected" : ""}`,
+              onClick: () => r.selectItem(i),
+              tabIndex: 0,
+              onKeyDown: (p) => p.key === "Enter" && r.selectItem(i),
+              children: [
+                m && /* @__PURE__ */ e("span", { className: "rck-item-symbol", children: i.symbol }),
+                /* @__PURE__ */ n("div", { className: "rck-item-main", children: [
+                  /* @__PURE__ */ e("span", { className: "rck-item-name", children: i.name }),
+                  /* @__PURE__ */ e("span", { className: "rck-item-sub", children: i.code })
+                ] }),
+                l && /* @__PURE__ */ e(M, {})
+              ]
+            },
+            i.code
+          );
+        }) })
+      ]
+    }
+  );
+}
+const A = () => /* @__PURE__ */ e("svg", { className: "rck-item-check", 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" }) });
+function Z({
+  countryIso2: s,
+  value: o,
+  onChange: u,
+  placeholder: h = "Select a division",
+  searchable: m = !0,
+  disabled: d = !1,
+  className: g,
+  label: k
+}) {
+  const r = P(s, o, u), c = /* @__PURE__ */ e("div", { className: "rck-trigger-content", children: o ? /* @__PURE__ */ n(C, { children: [
+    /* @__PURE__ */ e("span", { className: "rck-trigger-text", children: o.name }),
+    /* @__PURE__ */ e("span", { className: "rck-badge", children: o.iso2 })
+  ] }) : /* @__PURE__ */ e("span", { className: "rck-trigger-text rck-placeholder", children: h }) }), i = d || !s;
+  return /* @__PURE__ */ n(
+    x,
+    {
+      isOpen: r.isOpen,
+      onClose: r.close,
+      onToggle: r.toggle,
+      label: k,
+      disabled: i,
+      className: g,
+      triggerContent: c,
+      id: "rck-division-picker",
+      children: [
+        m && /* @__PURE__ */ e(
+          f,
+          {
+            value: r.searchQuery,
+            onChange: r.setSearchQuery,
+            placeholder: "Search division..."
+          }
+        ),
+        /* @__PURE__ */ e("ul", { className: "rck-list", role: "listbox", "aria-label": "Divisions", children: r.filteredItems.length === 0 ? /* @__PURE__ */ n("li", { className: "rck-empty", children: [
+          /* @__PURE__ */ e("span", { className: "rck-empty-icon", children: "🗺️" }),
+          /* @__PURE__ */ e("span", { children: "No divisions found" })
+        ] }) : r.filteredItems.map((l) => {
+          const p = (o == null ? void 0 : o.iso2) === l.iso2 && (o == null ? void 0 : o.name) === l.name;
+          return /* @__PURE__ */ n(
+            "li",
+            {
+              role: "option",
+              "aria-selected": p,
+              className: `rck-item${p ? " rck-item-selected" : ""}`,
+              onClick: () => r.selectItem(l),
+              tabIndex: 0,
+              onKeyDown: (t) => t.key === "Enter" && r.selectItem(l),
+              children: [
+                /* @__PURE__ */ n("div", { className: "rck-item-main", children: [
+                  /* @__PURE__ */ e("span", { className: "rck-item-name", children: l.name }),
+                  /* @__PURE__ */ e("span", { className: "rck-item-sub", children: l.timezone })
+                ] }),
+                /* @__PURE__ */ n("div", { className: "rck-item-right", children: [
+                  /* @__PURE__ */ e("span", { className: "rck-badge", children: l.iso2 }),
+                  p && /* @__PURE__ */ e(A, {})
+                ] })
+              ]
+            },
+            `${l.iso2}-${l.name}`
+          );
+        }) })
+      ]
+    }
+  );
+}
+const K = () => /* @__PURE__ */ e("svg", { className: "rck-item-check", 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" }) });
+function q({
+  value: s,
+  onChange: o,
+  placeholder: u = "Select a language",
+  searchable: h = !0,
+  showNativeName: m = !0,
+  disabled: d = !1,
+  className: g,
+  label: k
+}) {
+  const r = _(s, o), c = /* @__PURE__ */ e("div", { className: "rck-trigger-content", children: s ? /* @__PURE__ */ n(C, { children: [
+    /* @__PURE__ */ e("span", { className: "rck-trigger-text", children: s.english_name }),
+    m && s.native_name !== s.english_name && /* @__PURE__ */ e("span", { className: "rck-native-name", children: s.native_name })
+  ] }) : /* @__PURE__ */ e("span", { className: "rck-trigger-text rck-placeholder", children: u }) });
+  return /* @__PURE__ */ n(
+    x,
+    {
+      isOpen: r.isOpen,
+      onClose: r.close,
+      onToggle: r.toggle,
+      label: k,
+      disabled: d,
+      className: g,
+      triggerContent: c,
+      id: "rck-language-picker",
+      children: [
+        h && /* @__PURE__ */ e(
+          f,
+          {
+            value: r.searchQuery,
+            onChange: r.setSearchQuery,
+            placeholder: "Search language..."
+          }
+        ),
+        /* @__PURE__ */ e("ul", { className: "rck-list", role: "listbox", "aria-label": "Languages", children: r.filteredItems.length === 0 ? /* @__PURE__ */ n("li", { className: "rck-empty", children: [
+          /* @__PURE__ */ e("span", { className: "rck-empty-icon", children: "🌐" }),
+          /* @__PURE__ */ e("span", { children: "No languages found" })
+        ] }) : r.filteredItems.map((i) => {
+          const l = (s == null ? void 0 : s.code) === i.code;
+          return /* @__PURE__ */ n(
+            "li",
+            {
+              role: "option",
+              "aria-selected": l,
+              className: `rck-item${l ? " rck-item-selected" : ""}`,
+              onClick: () => r.selectItem(i),
+              tabIndex: 0,
+              onKeyDown: (p) => p.key === "Enter" && r.selectItem(i),
+              children: [
+                /* @__PURE__ */ n("div", { className: "rck-item-main", children: [
+                  /* @__PURE__ */ e("span", { className: "rck-item-name", children: i.english_name }),
+                  m && i.native_name !== i.english_name && /* @__PURE__ */ e("span", { className: "rck-item-sub", children: i.native_name })
+                ] }),
+                /* @__PURE__ */ n("div", { className: "rck-item-right", children: [
+                  /* @__PURE__ */ e("span", { className: "rck-badge", style: { fontSize: "0.68rem" }, children: i.code }),
+                  l && /* @__PURE__ */ e(K, {})
+                ] })
+              ]
+            },
+            i.code
+          );
+        }) })
+      ]
+    }
+  );
+}
+function F({
+  value: s,
+  onChange: o,
+  defaultCountryIso2: u = "US",
+  placeholder: h = "Phone number",
+  showFlag: m = !0,
+  disabled: d = !1,
+  className: g,
+  label: k
+}) {
+  const r = W(s, o, u), c = b(null);
+  return N(() => {
+    if (!r.isOpen) return;
+    const i = (l) => {
+      c.current && !c.current.contains(l.target) && r.close();
+    };
+    return document.addEventListener("mousedown", i), () => document.removeEventListener("mousedown", i);
+  }, [r.isOpen, r.close]), N(() => {
+    if (!r.isOpen) return;
+    const i = (l) => {
+      l.key === "Escape" && r.close();
+    };
+    return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
+  }, [r.isOpen, r.close]), /* @__PURE__ */ n("div", { ref: c, className: `rck-phone-wrapper${g ? ` ${g}` : ""}`, children: [
+    k && /* @__PURE__ */ e("span", { className: "rck-label", children: k }),
+    /* @__PURE__ */ n("div", { className: `rck-phone-field${d ? " rck-phone-disabled" : ""}`, children: [
+      /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          className: "rck-phone-country-btn",
+          onClick: r.toggle,
+          "aria-expanded": r.isOpen,
+          "aria-label": "Select country code",
+          disabled: d,
+          children: [
+            m && r.country && /* @__PURE__ */ e("span", { className: "rck-phone-flag", children: r.country.flag }),
+            /* @__PURE__ */ e("span", { className: "rck-phone-dial", children: r.country ? `+${r.country.phone_code}` : "+?" }),
+            /* @__PURE__ */ e("svg", { className: "rck-phone-chevron", 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(
+        "input",
+        {
+          type: "tel",
+          className: "rck-phone-input",
+          value: r.number,
+          onChange: (i) => r.setNumber(i.target.value),
+          placeholder: h,
+          disabled: d,
+          inputMode: "numeric",
+          autoComplete: "tel-national"
+        }
+      ),
+      r.isOpen && /* @__PURE__ */ n("div", { className: "rck-phone-dropdown", children: [
+        /* @__PURE__ */ e(
+          f,
+          {
+            value: r.searchQuery,
+            onChange: r.setSearchQuery,
+            placeholder: "Search country or dial code..."
+          }
+        ),
+        /* @__PURE__ */ e("ul", { className: "rck-list", role: "listbox", "aria-label": "Countries", children: r.filteredCountries.length === 0 ? /* @__PURE__ */ n("li", { className: "rck-empty", children: [
+          /* @__PURE__ */ e("span", { className: "rck-empty-icon", children: "🌍" }),
+          /* @__PURE__ */ e("span", { children: "No countries found" })
+        ] }) : r.filteredCountries.map((i) => {
+          var p;
+          const l = ((p = r.country) == null ? void 0 : p.iso2) === i.iso2;
+          return /* @__PURE__ */ n(
+            "li",
+            {
+              role: "option",
+              "aria-selected": l,
+              className: `rck-item${l ? " rck-item-selected" : ""}`,
+              onClick: () => r.selectCountry(i),
+              tabIndex: 0,
+              onKeyDown: (t) => t.key === "Enter" && r.selectCountry(i),
+              children: [
+                /* @__PURE__ */ e("span", { className: "rck-item-flag", children: i.flag }),
+                /* @__PURE__ */ n("div", { className: "rck-item-main", children: [
+                  /* @__PURE__ */ e("span", { className: "rck-item-name", children: i.name }),
+                  /* @__PURE__ */ e("span", { className: "rck-item-sub", children: i.iso2 })
+                ] }),
+                /* @__PURE__ */ n("span", { className: "rck-item-phone", children: [
+                  "+",
+                  i.phone_code
+                ] })
+              ]
+            },
+            i.iso2
+          );
+        }) })
+      ] })
+    ] })
+  ] });
+}
+const R = () => /* @__PURE__ */ e("svg", { className: "rck-item-check", 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" }) });
+function ee({
+  value: s,
+  onChange: o,
+  placeholder: u = "Select a timezone",
+  searchable: h = !0,
+  countryIso2: m,
+  disabled: d = !1,
+  className: g,
+  label: k
+}) {
+  const r = Q(s, o, m), c = /* @__PURE__ */ e("div", { className: "rck-trigger-content", children: s ? /* @__PURE__ */ n(C, { children: [
+    /* @__PURE__ */ e("span", { className: "rck-trigger-text", children: s.name }),
+    /* @__PURE__ */ e("span", { className: "rck-badge", children: s.offset_name })
+  ] }) : /* @__PURE__ */ e("span", { className: "rck-trigger-text rck-placeholder", children: u }) });
+  return /* @__PURE__ */ n(
+    x,
+    {
+      isOpen: r.isOpen,
+      onClose: r.close,
+      onToggle: r.toggle,
+      label: k,
+      disabled: d,
+      className: g,
+      triggerContent: c,
+      id: "rck-timezone-picker",
+      children: [
+        h && /* @__PURE__ */ e(
+          f,
+          {
+            value: r.searchQuery,
+            onChange: r.setSearchQuery,
+            placeholder: "Search timezone..."
+          }
+        ),
+        /* @__PURE__ */ e("ul", { className: "rck-list", role: "listbox", "aria-label": "Timezones", children: r.filteredItems.length === 0 ? /* @__PURE__ */ n("li", { className: "rck-empty", children: [
+          /* @__PURE__ */ e("span", { className: "rck-empty-icon", children: "🕐" }),
+          /* @__PURE__ */ e("span", { children: "No timezones found" })
+        ] }) : r.filteredItems.map((i) => {
+          const l = (s == null ? void 0 : s.name) === i.name;
+          return /* @__PURE__ */ n(
+            "li",
+            {
+              role: "option",
+              "aria-selected": l,
+              className: `rck-item${l ? " rck-item-selected" : ""}`,
+              onClick: () => r.selectItem(i),
+              tabIndex: 0,
+              onKeyDown: (p) => p.key === "Enter" && r.selectItem(i),
+              children: [
+                /* @__PURE__ */ n("div", { className: "rck-item-main", children: [
+                  /* @__PURE__ */ e("span", { className: "rck-item-name", children: i.name }),
+                  /* @__PURE__ */ n("span", { className: "rck-item-sub", children: [
+                    i.tzName,
+                    " · ",
+                    i.abbreviation
+                  ] })
+                ] }),
+                /* @__PURE__ */ n("div", { className: "rck-item-right", children: [
+                  /* @__PURE__ */ e("span", { className: "rck-offset-badge", children: i.offset_name }),
+                  l && /* @__PURE__ */ e(R, {})
+                ] })
+              ]
+            },
+            i.name
+          );
+        }) })
+      ]
+    }
+  );
+}
+export {
+  U as CountryMultiSelect,
+  G as CountryPicker,
+  J as CurrencyMultiSelect,
+  Y as CurrencyPicker,
+  Z as DivisionPicker,
+  q as LanguagePicker,
+  F as PhoneInput,
+  ee as TimezonePicker,
+  S as getAllCountries,
+  B as getAllCurrencies,
+  ce as getAllLanguages,
+  se as getAllTimezones,
+  ie as getCountryByIso2,
+  te as getCountryByIso3,
+  le as getCountryByName,
+  oe as getCurrencyByCode,
+  ae as getCurrencyByCountry,
+  de as getDivisionsByCountry,
+  me as getLanguageByCode,
+  he as getTimezoneByName,
+  pe as getTimezonesByCountry,
+  ke as iso2ToFlag,
+  L as searchCountries,
+  E as searchCurrencies,
+  ue as searchLanguages,
+  ge as searchTimezones,
+  Ne as useBasePicker,
+  $ as useCountryPicker,
+  O as useCurrencyPicker,
+  P as useDivisionPicker,
+  _ as useLanguagePicker,
+  I as useMultiSelect,
+  W as usePhoneInput,
+  Q as useTimezonePicker
+};
+//# sourceMappingURL=react-country-kit.es.js.map