react-country-kit-ui 1.2.0 โ†’ 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -1,1137 +1,899 @@
1
- import { jsx as e, jsxs as n, Fragment as R } from "react/jsx-runtime";
2
- import v, { useState as C, useEffect as H } from "react";
3
- import * as z from "@radix-ui/react-popover";
4
- import { clsx as K } from "clsx";
1
+ import C, { useEffect as G, useState as k } from "react";
2
+ import * as M from "@radix-ui/react-popover";
3
+ import { clsx as Z } from "clsx";
5
4
  import { twMerge as ee } from "tailwind-merge";
6
- 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";
5
+ import { Fragment as R, jsx as e, jsxs as t } from "react/jsx-runtime";
6
+ 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, usePhoneInput as ae } from "react-country-kit-core";
7
7
  export * from "react-country-kit-core";
8
- function y(...t) {
9
- return ee(K(t));
8
+ function y(...n) {
9
+ return ee(Z(n));
10
10
  }
11
- const Y = z.Root, Z = z.Trigger, T = ({ className: t }) => /* @__PURE__ */ e(
12
- "svg",
13
- {
14
- className: y("h-4 w-4 text-primary", t),
15
- viewBox: "0 0 20 20",
16
- fill: "none",
17
- stroke: "currentColor",
18
- strokeWidth: "2.5",
19
- strokeLinecap: "round",
20
- strokeLinejoin: "round",
21
- children: /* @__PURE__ */ e("polyline", { points: "4 10 8 14 16 6" })
22
- }
23
- );
24
- T.displayName = "CheckIcon";
25
- const U = ({
26
- children: t,
27
- className: r
28
- }) => /* @__PURE__ */ e(
29
- "label",
30
- {
31
- className: y(
32
- "text-[0.65rem] font-bold uppercase tracking-[0.12em] text-muted-foreground/80 ml-1 mb-1.5 block",
33
- r
34
- ),
35
- children: t
36
- }
37
- );
38
- U.displayName = "FieldLabel";
39
- const L = ({ children: t, className: r }) => /* @__PURE__ */ e(
40
- "span",
41
- {
42
- className: y(
43
- "inline-flex items-center rounded-full bg-primary/20 px-2.5 py-0.5 text-[0.7rem] font-bold text-primary tracking-tight",
44
- r
45
- ),
46
- children: t
47
- }
48
- );
49
- L.displayName = "Badge";
50
- const E = ({
51
- iso2: t,
52
- flag: r,
53
- flagUrl: p,
54
- className: a
55
- }) => /* @__PURE__ */ e("span", { className: y("inline-flex items-center justify-center shrink-0 overflow-hidden", a), children: /* @__PURE__ */ e(
56
- "img",
57
- {
11
+ var J = M.Root, Y = M.Trigger, D = ({ className: n }) => /* @__PURE__ */ e("svg", {
12
+ className: y("h-4 w-4 text-primary", n),
13
+ viewBox: "0 0 20 20",
14
+ fill: "none",
15
+ stroke: "currentColor",
16
+ strokeWidth: "2.5",
17
+ strokeLinecap: "round",
18
+ strokeLinejoin: "round",
19
+ children: /* @__PURE__ */ e("polyline", { points: "4 10 8 14 16 6" })
20
+ });
21
+ D.displayName = "CheckIcon";
22
+ var Q = ({ children: n, className: r }) => /* @__PURE__ */ e("label", {
23
+ className: y("text-[0.65rem] font-bold uppercase tracking-[0.12em] text-muted-foreground/80 ml-1 mb-1.5 block", r),
24
+ children: n
25
+ });
26
+ Q.displayName = "FieldLabel";
27
+ var S = ({ children: n, className: r }) => /* @__PURE__ */ e("span", {
28
+ 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),
29
+ children: n
30
+ });
31
+ S.displayName = "Badge";
32
+ var V = ({ iso2: n, flag: r, flagUrl: p, className: m }) => /* @__PURE__ */ e("span", {
33
+ className: y("inline-flex items-center justify-center shrink-0 overflow-hidden", m),
34
+ children: /* @__PURE__ */ e("img", {
58
35
  src: p,
59
- alt: t,
36
+ alt: n,
60
37
  className: "h-[1em] w-[1.5em] object-cover rounded-[1px] shadow-[0_0_0_1px_rgba(0,0,0,0.05)]",
61
- onError: (s) => {
62
- if (s.target.style.display = "none", s.target.parentElement) {
63
- const c = document.createElement("span");
64
- c.textContent = r, s.target.parentElement.appendChild(c);
38
+ onError: (l) => {
39
+ if (l.target.style.display = "none", l.target.parentElement) {
40
+ const s = document.createElement("span");
41
+ s.textContent = r, l.target.parentElement.appendChild(s);
65
42
  }
66
43
  }
67
- }
68
- ) });
69
- E.displayName = "Flag";
70
- const M = v.forwardRef(({ className: t, align: r = "start", sideOffset: p = 6, onCloseAutoFocus: a, ...s }, c) => /* @__PURE__ */ e(z.Portal, { children: /* @__PURE__ */ e(
71
- z.Content,
72
- {
73
- ref: c,
74
- align: r,
75
- sideOffset: p,
76
- onCloseAutoFocus: (g) => {
77
- g.preventDefault(), a == null || a(g);
78
- },
79
- className: y(
80
- "z-50 w-[var(--radix-popover-trigger-width)] rounded-xl border border-border bg-popover p-0 shadow-lg",
81
- "data-[state=open]:animate-in data-[state=closed]:animate-out",
82
- "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
83
- "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
84
- "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
85
- t
86
- ),
87
- ...s
88
- }
89
- ) }));
90
- M.displayName = "PopoverContent";
91
- const S = v.forwardRef(({ className: t, ...r }, p) => /* @__PURE__ */ e(
92
- "div",
93
- {
94
- ref: p,
95
- className: y(
96
- "flex h-full w-full flex-col overflow-hidden rounded-xl bg-popover text-popover-foreground",
97
- t
98
- ),
99
- ...r
100
- }
101
- ));
102
- S.displayName = "CommandRoot";
103
- const P = v.forwardRef(
104
- ({ 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(
105
- "flex items-center gap-2 px-3 py-1.5 rounded-lg border border-border bg-muted/40 transition-colors",
106
- "focus-within:border-primary/50 focus-within:ring-2 focus-within:ring-primary/10"
107
- ), children: [
108
- /* @__PURE__ */ n(
109
- "svg",
110
- {
111
- className: "h-3.5 w-3.5 shrink-0 text-muted-foreground",
112
- viewBox: "0 0 20 20",
113
- fill: "none",
114
- stroke: "currentColor",
115
- strokeWidth: "2",
116
- children: [
117
- /* @__PURE__ */ e("circle", { cx: "8.5", cy: "8.5", r: "5.5" }),
118
- /* @__PURE__ */ e("path", { d: "M17 17l-4-4", strokeLinecap: "round" })
119
- ]
120
- }
121
- ),
122
- /* @__PURE__ */ e(
123
- "input",
124
- {
125
- ref: a,
126
- type: "text",
127
- autoComplete: "off",
128
- autoCorrect: "off",
129
- spellCheck: !1,
130
- className: y(
131
- "flex h-8 w-full bg-transparent text-sm outline-none",
132
- "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
133
- t
134
- ),
135
- onChange: (s) => r == null ? void 0 : r(s.target.value),
136
- ...p
137
- }
138
- )
139
- ] }) })
140
- );
44
+ })
45
+ });
46
+ V.displayName = "Flag";
47
+ 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, {
48
+ ref: s,
49
+ align: r,
50
+ sideOffset: p,
51
+ onCloseAutoFocus: (u) => {
52
+ u.preventDefault(), m?.(u);
53
+ },
54
+ 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),
55
+ ...l
56
+ }) }));
57
+ W.displayName = "PopoverContent";
58
+ var L = C.forwardRef(({ className: n, ...r }, p) => /* @__PURE__ */ e("div", {
59
+ ref: p,
60
+ className: y("flex h-full w-full flex-col overflow-hidden rounded-xl bg-popover text-popover-foreground", n),
61
+ ...r
62
+ }));
63
+ L.displayName = "CommandRoot";
64
+ var P = C.forwardRef(({ className: n, onValueChange: r, ...p }, m) => /* @__PURE__ */ e("div", {
65
+ className: "px-3 pt-3 pb-2 border-b border-border",
66
+ children: /* @__PURE__ */ t("div", {
67
+ 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"),
68
+ children: [/* @__PURE__ */ t("svg", {
69
+ className: "h-3.5 w-3.5 shrink-0 text-muted-foreground",
70
+ viewBox: "0 0 20 20",
71
+ fill: "none",
72
+ stroke: "currentColor",
73
+ strokeWidth: "2",
74
+ children: [/* @__PURE__ */ e("circle", {
75
+ cx: "8.5",
76
+ cy: "8.5",
77
+ r: "5.5"
78
+ }), /* @__PURE__ */ e("path", {
79
+ d: "M17 17l-4-4",
80
+ strokeLinecap: "round"
81
+ })]
82
+ }), /* @__PURE__ */ e("input", {
83
+ ref: m,
84
+ type: "text",
85
+ autoComplete: "off",
86
+ autoCorrect: "off",
87
+ spellCheck: !1,
88
+ 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),
89
+ onChange: (l) => r?.(l.target.value),
90
+ ...p
91
+ })]
92
+ })
93
+ }));
141
94
  P.displayName = "CommandInput";
142
- const _ = v.forwardRef(({ className: t, ...r }, p) => /* @__PURE__ */ e(
143
- "div",
144
- {
145
- ref: p,
146
- role: "listbox",
147
- className: y("max-h-72 overflow-y-auto overflow-x-hidden p-1", t),
148
- ...r
149
- }
150
- ));
95
+ var _ = C.forwardRef(({ className: n, ...r }, p) => /* @__PURE__ */ e("div", {
96
+ ref: p,
97
+ role: "listbox",
98
+ className: y("max-h-72 overflow-y-auto overflow-x-hidden p-1", n),
99
+ ...r
100
+ }));
151
101
  _.displayName = "CommandList";
152
- const O = v.forwardRef((t, r) => /* @__PURE__ */ e(
153
- "div",
154
- {
155
- ref: r,
156
- className: "flex flex-col items-center justify-center gap-1 py-8 text-sm text-muted-foreground",
157
- ...t
158
- }
159
- ));
102
+ var O = C.forwardRef((n, r) => /* @__PURE__ */ e("div", {
103
+ ref: r,
104
+ className: "flex flex-col items-center justify-center gap-1 py-8 text-sm text-muted-foreground",
105
+ ...n
106
+ }));
160
107
  O.displayName = "CommandEmpty";
161
- const B = v.forwardRef(
162
- ({ className: t, onSelect: r, onMouseDown: p, onKeyDown: a, disabled: s, selected: c, value: g, ...k }, x) => /* @__PURE__ */ e(
163
- "div",
164
- {
165
- ref: x,
166
- role: "option",
167
- "aria-disabled": s || void 0,
168
- "aria-selected": c,
169
- "data-disabled": s || void 0,
170
- "data-selected": c || void 0,
171
- tabIndex: s ? void 0 : 0,
172
- className: y(
173
- "relative flex cursor-pointer select-none items-center gap-2 rounded-lg px-2 py-2 text-sm outline-none",
174
- "focus:bg-accent focus:text-accent-foreground",
175
- "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
176
- "hover:bg-accent/50 transition-colors",
177
- c && "bg-accent text-accent-foreground font-semibold",
178
- t
179
- ),
180
- onMouseDown: (i) => {
181
- i.preventDefault(), p == null || p(i);
182
- },
183
- onClick: s ? void 0 : () => r == null ? void 0 : r(),
184
- onKeyDown: (i) => {
185
- !s && i.key === "Enter" && (i.preventDefault(), r == null || r()), a == null || a(i);
186
- },
187
- ...k
188
- }
189
- )
190
- );
108
+ var B = C.forwardRef(({ className: n, onSelect: r, onMouseDown: p, onKeyDown: m, disabled: l, selected: s, value: u, ...v }, g) => /* @__PURE__ */ e("div", {
109
+ ref: g,
110
+ role: "option",
111
+ "aria-disabled": l || void 0,
112
+ "aria-selected": s,
113
+ "data-disabled": l || void 0,
114
+ "data-selected": s || void 0,
115
+ tabIndex: l ? void 0 : 0,
116
+ 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),
117
+ onMouseDown: (a) => {
118
+ a.preventDefault(), p?.(a);
119
+ },
120
+ onClick: l ? void 0 : () => r?.(),
121
+ onKeyDown: (a) => {
122
+ !l && a.key === "Enter" && (a.preventDefault(), r?.()), m?.(a);
123
+ },
124
+ ...v
125
+ }));
191
126
  B.displayName = "CommandItem";
192
- const V = v.forwardRef(
193
- ({ className: t, isOpen: r, children: p, placeholder: a, hasValue: s, ...c }, g) => /* @__PURE__ */ n(
194
- "button",
195
- {
196
- ref: g,
197
- type: "button",
198
- role: "combobox",
199
- "aria-expanded": r,
200
- "aria-haspopup": "listbox",
201
- className: y(
202
- "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",
203
- "placeholder:text-muted-foreground",
204
- "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
205
- "disabled:cursor-not-allowed disabled:opacity-50",
206
- "hover:bg-accent/10 transition-all",
207
- !s && "text-muted-foreground",
208
- t
209
- ),
210
- ...c,
211
- children: [
212
- /* @__PURE__ */ e("span", { className: "flex min-w-0 flex-1 items-center gap-2 truncate", children: p || /* @__PURE__ */ e("span", { children: a }) }),
213
- /* @__PURE__ */ e(
214
- "svg",
215
- {
216
- className: y(
217
- "h-4 w-4 shrink-0 text-muted-foreground/60 transition-transform duration-200",
218
- r && "rotate-180"
219
- ),
127
+ var E = C.forwardRef(({ className: n, isOpen: r, children: p, placeholder: m, hasValue: l, ...s }, u) => /* @__PURE__ */ t("button", {
128
+ ref: u,
129
+ type: "button",
130
+ role: "combobox",
131
+ "aria-expanded": r,
132
+ "aria-haspopup": "listbox",
133
+ 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),
134
+ ...s,
135
+ children: [/* @__PURE__ */ e("span", {
136
+ className: "flex min-w-0 flex-1 items-center gap-2 truncate",
137
+ children: p || /* @__PURE__ */ e("span", { children: m })
138
+ }), /* @__PURE__ */ e("svg", {
139
+ className: y("h-4 w-4 shrink-0 text-muted-foreground/60 transition-transform duration-200", r && "rotate-180"),
140
+ viewBox: "0 0 20 20",
141
+ fill: "none",
142
+ stroke: "currentColor",
143
+ strokeWidth: "2.5",
144
+ strokeLinecap: "round",
145
+ strokeLinejoin: "round",
146
+ children: /* @__PURE__ */ e("polyline", { points: "6 8 10 12 14 8" })
147
+ })]
148
+ }));
149
+ E.displayName = "PickerTrigger";
150
+ var j = C.forwardRef(({ label: n, trigger: r, children: p, open: m, onOpenChange: l, className: s }, u) => /* @__PURE__ */ t("div", {
151
+ ref: u,
152
+ className: y("flex flex-col gap-0", s),
153
+ children: [n && /* @__PURE__ */ e(Q, { children: n }), /* @__PURE__ */ t(J, {
154
+ open: m,
155
+ onOpenChange: l,
156
+ children: [/* @__PURE__ */ e(Y, {
157
+ asChild: !0,
158
+ children: r
159
+ }), /* @__PURE__ */ e(W, {
160
+ className: "p-0",
161
+ children: p
162
+ })]
163
+ })]
164
+ }));
165
+ j.displayName = "BasePicker";
166
+ var q = C.forwardRef(({ value: n, onRemove: r, onClear: p, isOpen: m, placeholder: l, renderChip: s, maxVisible: u = 3, className: v, disabled: g, ...a }, c) => {
167
+ const b = n.slice(0, u), N = n.length - u;
168
+ return /* @__PURE__ */ t("button", {
169
+ ref: c,
170
+ type: "button",
171
+ "aria-haspopup": "listbox",
172
+ "aria-expanded": m,
173
+ disabled: g,
174
+ 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),
175
+ ...a,
176
+ children: [/* @__PURE__ */ e("div", {
177
+ className: "flex flex-1 flex-wrap gap-1.5 min-w-0 items-center",
178
+ children: n.length === 0 ? /* @__PURE__ */ e("span", {
179
+ className: "text-muted-foreground",
180
+ children: l
181
+ }) : /* @__PURE__ */ t(R, { children: [b.map((f, x) => /* @__PURE__ */ t("span", {
182
+ className: "inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-[0.75rem] font-semibold text-primary",
183
+ children: [s(f), /* @__PURE__ */ e("span", {
184
+ role: "button",
185
+ tabIndex: g ? -1 : 0,
186
+ onClick: (d) => {
187
+ d.stopPropagation(), g || r(f, d);
188
+ },
189
+ onKeyDown: (d) => {
190
+ (d.key === "Enter" || d.key === " ") && (d.preventDefault(), d.stopPropagation(), g || r(f, d));
191
+ },
192
+ className: "ml-0.5 rounded-full text-primary/60 hover:text-primary transition-colors cursor-pointer",
193
+ "aria-label": "Remove",
194
+ children: /* @__PURE__ */ t("svg", {
195
+ width: "9",
196
+ height: "9",
220
197
  viewBox: "0 0 20 20",
221
198
  fill: "none",
222
199
  stroke: "currentColor",
223
200
  strokeWidth: "2.5",
224
201
  strokeLinecap: "round",
225
- strokeLinejoin: "round",
226
- children: /* @__PURE__ */ e("polyline", { points: "6 8 10 12 14 8" })
227
- }
228
- )
229
- ]
230
- }
231
- )
232
- );
233
- V.displayName = "PickerTrigger";
234
- const j = v.forwardRef(
235
- ({ 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: [
236
- t && /* @__PURE__ */ e(U, { children: t }),
237
- /* @__PURE__ */ n(Y, { open: a, onOpenChange: s, children: [
238
- /* @__PURE__ */ e(Z, { asChild: !0, children: r }),
239
- /* @__PURE__ */ e(M, { className: "p-0", children: p })
240
- ] })
241
- ] })
242
- );
243
- j.displayName = "BasePicker";
244
- const $ = v.forwardRef(
245
- ({
246
- value: t,
247
- onRemove: r,
248
- onClear: p,
249
- isOpen: a,
250
- placeholder: s,
251
- renderChip: c,
252
- maxVisible: g = 3,
253
- className: k,
254
- disabled: x,
255
- ...i
256
- }, d) => {
257
- const u = t.slice(0, g), b = t.length - g;
258
- return /* @__PURE__ */ n(
259
- "button",
260
- {
261
- ref: d,
262
- type: "button",
263
- "aria-haspopup": "listbox",
264
- "aria-expanded": a,
265
- disabled: x,
266
- className: y(
267
- "flex min-h-[3rem] w-full items-center gap-3 rounded-xl border border-input bg-background px-4 py-2",
268
- "text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
269
- "disabled:cursor-not-allowed disabled:opacity-50 hover:bg-accent/10 transition-all text-start",
270
- a && "ring-2 ring-ring ring-offset-2",
271
- k
272
- ),
273
- ...i,
274
- children: [
275
- /* @__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: [
276
- u.map((f, N) => /* @__PURE__ */ n(
277
- "span",
278
- {
279
- className: "inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-[0.75rem] font-semibold text-primary",
280
- children: [
281
- c(f),
282
- /* @__PURE__ */ e(
283
- "span",
284
- {
285
- role: "button",
286
- tabIndex: x ? -1 : 0,
287
- onClick: (m) => {
288
- m.stopPropagation(), x || r(f, m);
289
- },
290
- onKeyDown: (m) => {
291
- (m.key === "Enter" || m.key === " ") && (m.preventDefault(), m.stopPropagation(), x || r(f, m));
292
- },
293
- className: "ml-0.5 rounded-full text-primary/60 hover:text-primary transition-colors cursor-pointer",
294
- "aria-label": "Remove",
295
- children: /* @__PURE__ */ n("svg", { width: "9", height: "9", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: [
296
- /* @__PURE__ */ e("line", { x1: "5", y1: "5", x2: "15", y2: "15" }),
297
- /* @__PURE__ */ e("line", { x1: "15", y1: "5", x2: "5", y2: "15" })
298
- ] })
299
- }
300
- )
301
- ]
302
- },
303
- N
304
- )),
305
- b > 0 && /* @__PURE__ */ n(L, { className: "bg-muted text-muted-foreground/80 px-2", children: [
306
- "+",
307
- b
308
- ] })
309
- ] }) }),
310
- /* @__PURE__ */ n("div", { className: "flex shrink-0 items-center gap-1 ml-auto", children: [
311
- t.length > 0 && /* @__PURE__ */ e(
312
- "span",
313
- {
314
- role: "button",
315
- tabIndex: x ? -1 : 0,
316
- onClick: (f) => {
317
- f.stopPropagation(), x || p(f);
318
- },
319
- onKeyDown: (f) => {
320
- (f.key === "Enter" || f.key === " ") && (f.preventDefault(), f.stopPropagation(), x || p(f));
321
- },
322
- className: "rounded p-0.5 text-muted-foreground hover:text-foreground hover:bg-accent/30 transition-colors cursor-pointer",
323
- "aria-label": "Clear all",
324
- children: /* @__PURE__ */ n("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
325
- /* @__PURE__ */ e("line", { x1: "5", y1: "5", x2: "15", y2: "15" }),
326
- /* @__PURE__ */ e("line", { x1: "15", y1: "5", x2: "5", y2: "15" })
327
- ] })
328
- }
329
- ),
330
- /* @__PURE__ */ e(
331
- "svg",
332
- {
333
- className: y("h-4 w-4 text-muted-foreground/60 transition-transform duration-200", a && "rotate-180"),
334
- viewBox: "0 0 20 20",
335
- fill: "none",
336
- stroke: "currentColor",
337
- strokeWidth: "2.5",
338
- strokeLinecap: "round",
339
- strokeLinejoin: "round",
340
- children: /* @__PURE__ */ e("polyline", { points: "6 8 10 12 14 8" })
341
- }
342
- )
343
- ] })
344
- ]
345
- }
346
- );
347
- }
348
- );
349
- $.displayName = "MultiSelectTrigger";
350
- const F = 3;
351
- function pe({
352
- value: t,
353
- onChange: r,
354
- placeholder: p = "Select countries...",
355
- maxItems: a,
356
- showFlags: s = !0,
357
- searchable: c = !0,
358
- disabled: g = !1,
359
- className: k,
360
- label: x
361
- }) {
362
- const [i, d] = C(!1), [u, b] = C(""), f = u ? I(u) : W(), N = (o) => t.some((w) => w.iso2 === o.iso2), m = (o) => {
363
- if (N(o))
364
- r(t.filter((w) => w.iso2 !== o.iso2));
202
+ children: [/* @__PURE__ */ e("line", {
203
+ x1: "5",
204
+ y1: "5",
205
+ x2: "15",
206
+ y2: "15"
207
+ }), /* @__PURE__ */ e("line", {
208
+ x1: "15",
209
+ y1: "5",
210
+ x2: "5",
211
+ y2: "15"
212
+ })]
213
+ })
214
+ })]
215
+ }, x)), N > 0 && /* @__PURE__ */ t(S, {
216
+ className: "bg-muted text-muted-foreground/80 px-2",
217
+ children: ["+", N]
218
+ })] })
219
+ }), /* @__PURE__ */ t("div", {
220
+ className: "flex shrink-0 items-center gap-1 ml-auto",
221
+ children: [n.length > 0 && /* @__PURE__ */ e("span", {
222
+ role: "button",
223
+ tabIndex: g ? -1 : 0,
224
+ onClick: (f) => {
225
+ f.stopPropagation(), g || p(f);
226
+ },
227
+ onKeyDown: (f) => {
228
+ (f.key === "Enter" || f.key === " ") && (f.preventDefault(), f.stopPropagation(), g || p(f));
229
+ },
230
+ className: "rounded p-0.5 text-muted-foreground hover:text-foreground hover:bg-accent/30 transition-colors cursor-pointer",
231
+ "aria-label": "Clear all",
232
+ children: /* @__PURE__ */ t("svg", {
233
+ width: "14",
234
+ height: "14",
235
+ viewBox: "0 0 20 20",
236
+ fill: "none",
237
+ stroke: "currentColor",
238
+ strokeWidth: "2",
239
+ strokeLinecap: "round",
240
+ children: [/* @__PURE__ */ e("line", {
241
+ x1: "5",
242
+ y1: "5",
243
+ x2: "15",
244
+ y2: "15"
245
+ }), /* @__PURE__ */ e("line", {
246
+ x1: "15",
247
+ y1: "5",
248
+ x2: "5",
249
+ y2: "15"
250
+ })]
251
+ })
252
+ }), /* @__PURE__ */ e("svg", {
253
+ className: y("h-4 w-4 text-muted-foreground/60 transition-transform duration-200", m && "rotate-180"),
254
+ viewBox: "0 0 20 20",
255
+ fill: "none",
256
+ stroke: "currentColor",
257
+ strokeWidth: "2.5",
258
+ strokeLinecap: "round",
259
+ strokeLinejoin: "round",
260
+ children: /* @__PURE__ */ e("polyline", { points: "6 8 10 12 14 8" })
261
+ })]
262
+ })]
263
+ });
264
+ });
265
+ q.displayName = "MultiSelectTrigger";
266
+ var K = 3;
267
+ function pe({ value: n, onChange: r, placeholder: p = "Select countries...", maxItems: m, showFlags: l = !0, searchable: s = !0, disabled: u = !1, className: v, label: g }) {
268
+ const [a, c] = k(!1), [b, N] = k(""), f = b ? H(b) : z(), x = (o) => n.some((w) => w.iso2 === o.iso2), d = (o) => {
269
+ if (x(o)) r(n.filter((w) => w.iso2 !== o.iso2));
365
270
  else {
366
- if (a !== void 0 && t.length >= a) return;
367
- r([...t, o]);
271
+ if (m !== void 0 && n.length >= m) return;
272
+ r([...n, o]);
368
273
  }
369
- }, l = (o, w) => {
370
- w.stopPropagation(), r(t.filter((Q) => Q.iso2 !== o.iso2));
274
+ }, i = (o, w) => {
275
+ w.stopPropagation(), r(n.filter((T) => T.iso2 !== o.iso2));
371
276
  }, h = (o) => {
372
277
  o.stopPropagation(), r([]);
373
278
  };
374
- return t.slice(0, F), t.length - F, /* @__PURE__ */ n(
375
- j,
376
- {
377
- label: x,
378
- className: k,
379
- open: i,
380
- onOpenChange: d,
381
- trigger: /* @__PURE__ */ e(
382
- $,
383
- {
384
- value: t,
385
- onRemove: l,
386
- onClear: h,
387
- isOpen: i,
388
- placeholder: p,
389
- disabled: g,
390
- renderChip: (o) => /* @__PURE__ */ n(R, { children: [
391
- s && /* @__PURE__ */ e(E, { iso2: o.iso2, flag: o.flag, flagUrl: o.flag_url }),
392
- /* @__PURE__ */ e("span", { className: "max-w-[80px] truncate", children: o.name })
393
- ] })
394
- }
395
- ),
396
- children: [
397
- /* @__PURE__ */ n(S, { children: [
398
- c && /* @__PURE__ */ e(P, { placeholder: "Search countries...", value: u, onValueChange: b }),
399
- /* @__PURE__ */ n(_, { children: [
400
- f.length === 0 && /* @__PURE__ */ n(O, { children: [
401
- /* @__PURE__ */ e("span", { className: "text-2xl opacity-40", children: "๐ŸŒ" }),
402
- /* @__PURE__ */ e("span", { children: "No countries found" })
403
- ] }),
404
- f.map((o) => {
405
- const w = N(o);
406
- return /* @__PURE__ */ n(
407
- B,
408
- {
409
- onSelect: () => m(o),
410
- selected: w,
411
- children: [
412
- /* @__PURE__ */ e("div", { className: y(
413
- "h-4 w-4 shrink-0 rounded-full border border-border flex items-center justify-center",
414
- w && "bg-primary border-primary"
415
- ), 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" }) }) }),
416
- s && /* @__PURE__ */ e(E, { iso2: o.iso2, flag: o.flag, flagUrl: o.flag_url }),
417
- /* @__PURE__ */ n("div", { className: "flex flex-1 flex-col min-w-0", children: [
418
- /* @__PURE__ */ e("span", { className: "truncate font-medium", children: o.name }),
419
- /* @__PURE__ */ n("span", { className: "text-[0.7rem] text-muted-foreground", children: [
420
- o.iso3,
421
- " ยท +",
422
- o.phone_code
423
- ] })
424
- ] })
425
- ]
426
- },
427
- o.iso2
428
- );
279
+ return n.slice(0, K), n.length - K, /* @__PURE__ */ t(j, {
280
+ label: g,
281
+ className: v,
282
+ open: a,
283
+ onOpenChange: c,
284
+ trigger: /* @__PURE__ */ e(q, {
285
+ value: n,
286
+ onRemove: i,
287
+ onClear: h,
288
+ isOpen: a,
289
+ placeholder: p,
290
+ disabled: u,
291
+ renderChip: (o) => /* @__PURE__ */ t(R, { children: [l && /* @__PURE__ */ e(V, {
292
+ iso2: o.iso2,
293
+ flag: o.flag,
294
+ flagUrl: o.flag_url
295
+ }), /* @__PURE__ */ e("span", {
296
+ className: "max-w-[80px] truncate",
297
+ children: o.name
298
+ })] })
299
+ }),
300
+ children: [/* @__PURE__ */ t(L, { children: [s && /* @__PURE__ */ e(P, {
301
+ placeholder: "Search countries...",
302
+ value: b,
303
+ onValueChange: N
304
+ }), /* @__PURE__ */ t(_, { children: [f.length === 0 && /* @__PURE__ */ t(O, { children: [/* @__PURE__ */ e("span", {
305
+ className: "text-2xl opacity-40",
306
+ children: "๐ŸŒ"
307
+ }), /* @__PURE__ */ e("span", { children: "No countries found" })] }), f.map((o) => {
308
+ const w = x(o);
309
+ return /* @__PURE__ */ t(B, {
310
+ onSelect: () => d(o),
311
+ selected: w,
312
+ children: [
313
+ /* @__PURE__ */ e("div", {
314
+ className: y("h-4 w-4 shrink-0 rounded-full border border-border flex items-center justify-center", w && "bg-primary border-primary"),
315
+ children: w && /* @__PURE__ */ e("svg", {
316
+ className: "h-2.5 w-2.5 stroke-white",
317
+ viewBox: "0 0 20 20",
318
+ fill: "none",
319
+ strokeWidth: "3",
320
+ strokeLinecap: "round",
321
+ strokeLinejoin: "round",
322
+ children: /* @__PURE__ */ e("polyline", { points: "4 10 8 14 16 6" })
429
323
  })
430
- ] })
431
- ] }),
432
- 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: [
433
- /* @__PURE__ */ n("span", { children: [
434
- t.length,
435
- " selected",
436
- a ? ` / ${a}` : ""
437
- ] }),
438
- /* @__PURE__ */ e(
439
- "button",
440
- {
441
- type: "button",
442
- onClick: () => {
443
- r([]), d(!1);
444
- },
445
- className: "text-destructive hover:underline font-medium",
446
- children: "Clear all"
447
- }
448
- )
449
- ] })
450
- ]
451
- }
452
- );
324
+ }),
325
+ l && /* @__PURE__ */ e(V, {
326
+ iso2: o.iso2,
327
+ flag: o.flag,
328
+ flagUrl: o.flag_url
329
+ }),
330
+ /* @__PURE__ */ t("div", {
331
+ className: "flex flex-1 flex-col min-w-0",
332
+ children: [/* @__PURE__ */ e("span", {
333
+ className: "truncate font-medium",
334
+ children: o.name
335
+ }), /* @__PURE__ */ t("span", {
336
+ className: "text-[0.7rem] text-muted-foreground",
337
+ children: [
338
+ o.iso3,
339
+ " ยท +",
340
+ o.phone_code
341
+ ]
342
+ })]
343
+ })
344
+ ]
345
+ }, o.iso2);
346
+ })] })] }), n.length > 0 && /* @__PURE__ */ t("div", {
347
+ className: "flex items-center justify-between border-t border-border px-3 py-2 text-xs text-muted-foreground",
348
+ children: [/* @__PURE__ */ t("span", { children: [
349
+ n.length,
350
+ " selected",
351
+ m ? ` / ${m}` : ""
352
+ ] }), /* @__PURE__ */ e("button", {
353
+ type: "button",
354
+ onClick: () => {
355
+ r([]), c(!1);
356
+ },
357
+ className: "text-destructive hover:underline font-medium",
358
+ children: "Clear all"
359
+ })]
360
+ })]
361
+ });
453
362
  }
454
- function fe({
455
- value: t,
456
- onChange: r,
457
- placeholder: p = "Select a country...",
458
- searchable: a = !0,
459
- showFlag: s = !0,
460
- showPhoneCode: c = !1,
461
- disabled: g = !1,
462
- className: k,
463
- label: x
464
- }) {
465
- const [i, d] = C(!1), [u, b] = C(""), f = u ? I(u) : W(), N = (m) => {
466
- const l = W().find(
467
- (h) => h.iso2.toLowerCase() === m.toLowerCase()
468
- );
469
- l && (r(l), d(!1), b(""));
363
+ function fe({ value: n, onChange: r, placeholder: p = "Select a country...", searchable: m = !0, showFlag: l = !0, showPhoneCode: s = !1, disabled: u = !1, className: v, label: g }) {
364
+ const [a, c] = k(!1), [b, N] = k(""), f = b ? H(b) : z(), x = (d) => {
365
+ const i = z().find((h) => h.iso2.toLowerCase() === d.toLowerCase());
366
+ i && (r(i), c(!1), N(""));
470
367
  };
471
- return /* @__PURE__ */ e(
472
- j,
473
- {
474
- label: x,
475
- className: k,
476
- open: i,
477
- onOpenChange: d,
478
- trigger: /* @__PURE__ */ e(
479
- V,
480
- {
481
- isOpen: i,
482
- hasValue: !!t,
483
- placeholder: p,
484
- disabled: g,
485
- children: t && /* @__PURE__ */ n(R, { children: [
486
- s && /* @__PURE__ */ e(E, { iso2: t.iso2, flag: t.flag, flagUrl: t.flag_url }),
487
- /* @__PURE__ */ e("span", { className: "flex-1 text-start truncate", children: t.name }),
488
- c && /* @__PURE__ */ n(L, { children: [
489
- "+",
490
- t.phone_code
491
- ] })
492
- ] })
493
- }
494
- ),
495
- children: /* @__PURE__ */ n(S, { children: [
496
- a && /* @__PURE__ */ e(
497
- P,
498
- {
499
- placeholder: "Search country...",
500
- value: u,
501
- onValueChange: b
502
- }
503
- ),
504
- /* @__PURE__ */ n(_, { children: [
505
- f.length === 0 && /* @__PURE__ */ n(O, { children: [
506
- /* @__PURE__ */ e("span", { className: "text-2xl opacity-40", children: "๐ŸŒ" }),
507
- /* @__PURE__ */ e("span", { children: "No countries found" })
508
- ] }),
509
- f.map((m) => {
510
- const l = (t == null ? void 0 : t.iso2) === m.iso2;
511
- return /* @__PURE__ */ n(
512
- B,
513
- {
514
- onSelect: () => N(m.iso2),
515
- selected: l,
516
- children: [
517
- s && /* @__PURE__ */ e(E, { iso2: m.iso2, flag: m.flag, flagUrl: m.flag_url }),
518
- /* @__PURE__ */ n("div", { className: "flex flex-1 flex-col gap-0 min-w-0", children: [
519
- /* @__PURE__ */ e("span", { className: "truncate font-medium", children: m.name }),
520
- /* @__PURE__ */ n("span", { className: "text-[0.7rem] text-muted-foreground", children: [
521
- m.iso3,
522
- " ยท ",
523
- m.division_type
524
- ] })
525
- ] }),
526
- /* @__PURE__ */ n("div", { className: "flex items-center gap-1.5 ml-auto shrink-0", children: [
527
- c && /* @__PURE__ */ n("span", { className: "text-[0.7rem] text-muted-foreground tabular-nums bg-muted px-1.5 py-0.5 rounded", children: [
528
- "+",
529
- m.phone_code
530
- ] }),
531
- l && /* @__PURE__ */ e(T, {})
532
- ] })
533
- ]
534
- },
535
- m.iso2
536
- );
537
- })
538
- ] })
368
+ return /* @__PURE__ */ e(j, {
369
+ label: g,
370
+ className: v,
371
+ open: a,
372
+ onOpenChange: c,
373
+ trigger: /* @__PURE__ */ e(E, {
374
+ isOpen: a,
375
+ hasValue: !!n,
376
+ placeholder: p,
377
+ disabled: u,
378
+ children: n && /* @__PURE__ */ t(R, { children: [
379
+ l && /* @__PURE__ */ e(V, {
380
+ iso2: n.iso2,
381
+ flag: n.flag,
382
+ flagUrl: n.flag_url
383
+ }),
384
+ /* @__PURE__ */ e("span", {
385
+ className: "flex-1 text-start truncate",
386
+ children: n.name
387
+ }),
388
+ s && /* @__PURE__ */ t(S, { children: ["+", n.phone_code] })
539
389
  ] })
540
- }
541
- );
390
+ }),
391
+ children: /* @__PURE__ */ t(L, { children: [m && /* @__PURE__ */ e(P, {
392
+ placeholder: "Search country...",
393
+ value: b,
394
+ onValueChange: N
395
+ }), /* @__PURE__ */ t(_, { children: [f.length === 0 && /* @__PURE__ */ t(O, { children: [/* @__PURE__ */ e("span", {
396
+ className: "text-2xl opacity-40",
397
+ children: "๐ŸŒ"
398
+ }), /* @__PURE__ */ e("span", { children: "No countries found" })] }), f.map((d) => {
399
+ const i = n?.iso2 === d.iso2;
400
+ return /* @__PURE__ */ t(B, {
401
+ onSelect: () => x(d.iso2),
402
+ selected: i,
403
+ children: [
404
+ l && /* @__PURE__ */ e(V, {
405
+ iso2: d.iso2,
406
+ flag: d.flag,
407
+ flagUrl: d.flag_url
408
+ }),
409
+ /* @__PURE__ */ t("div", {
410
+ className: "flex flex-1 flex-col gap-0 min-w-0",
411
+ children: [/* @__PURE__ */ e("span", {
412
+ className: "truncate font-medium",
413
+ children: d.name
414
+ }), /* @__PURE__ */ t("span", {
415
+ className: "text-[0.7rem] text-muted-foreground",
416
+ children: [
417
+ d.iso3,
418
+ " ยท ",
419
+ d.division_type
420
+ ]
421
+ })]
422
+ }),
423
+ /* @__PURE__ */ t("div", {
424
+ className: "flex items-center gap-1.5 ml-auto shrink-0",
425
+ children: [s && /* @__PURE__ */ t("span", {
426
+ className: "text-[0.7rem] text-muted-foreground tabular-nums bg-muted px-1.5 py-0.5 rounded",
427
+ children: ["+", d.phone_code]
428
+ }), i && /* @__PURE__ */ e(D, {})]
429
+ })
430
+ ]
431
+ }, d.iso2);
432
+ })] })] })
433
+ });
542
434
  }
543
- const G = 3;
544
- function he({
545
- value: t,
546
- onChange: r,
547
- placeholder: p = "Select currencies...",
548
- maxItems: a,
549
- showSymbol: s = !0,
550
- searchable: c = !0,
551
- disabled: g = !1,
552
- className: k,
553
- label: x
554
- }) {
555
- const [i, d] = C(!1), [u, b] = C(""), f = u ? J(u) : q(), N = (o) => t.some((w) => w.code === o.code), m = (o) => {
556
- if (N(o))
557
- r(t.filter((w) => w.code !== o.code));
435
+ var X = 3;
436
+ function he({ value: n, onChange: r, placeholder: p = "Select currencies...", maxItems: m, showSymbol: l = !0, searchable: s = !0, disabled: u = !1, className: v, label: g }) {
437
+ const [a, c] = k(!1), [b, N] = k(""), f = b ? I(b) : A(), x = (o) => n.some((w) => w.code === o.code), d = (o) => {
438
+ if (x(o)) r(n.filter((w) => w.code !== o.code));
558
439
  else {
559
- if (a !== void 0 && t.length >= a) return;
560
- r([...t, o]);
440
+ if (m !== void 0 && n.length >= m) return;
441
+ r([...n, o]);
561
442
  }
562
- }, l = (o, w) => {
563
- w.stopPropagation(), r(t.filter((Q) => Q.code !== o.code));
443
+ }, i = (o, w) => {
444
+ w.stopPropagation(), r(n.filter((T) => T.code !== o.code));
564
445
  }, h = (o) => {
565
446
  o.stopPropagation(), r([]);
566
447
  };
567
- return t.slice(0, G), t.length - G, /* @__PURE__ */ n(
568
- j,
569
- {
570
- label: x,
571
- className: k,
572
- open: i,
573
- onOpenChange: d,
574
- trigger: /* @__PURE__ */ e(
575
- $,
576
- {
577
- value: t,
578
- onRemove: l,
579
- onClear: h,
580
- isOpen: i,
581
- placeholder: p,
582
- disabled: g,
583
- renderChip: (o) => /* @__PURE__ */ n(R, { children: [
584
- s && /* @__PURE__ */ e("span", { className: "font-bold", children: o.symbol }),
585
- /* @__PURE__ */ e("span", { children: o.code })
586
- ] })
587
- }
588
- ),
589
- children: [
590
- /* @__PURE__ */ n(S, { children: [
591
- c && /* @__PURE__ */ e(P, { placeholder: "Search currencies...", value: u, onValueChange: b }),
592
- /* @__PURE__ */ n(_, { children: [
593
- f.length === 0 && /* @__PURE__ */ n(O, { children: [
594
- /* @__PURE__ */ e("span", { className: "text-2xl opacity-40", children: "๐Ÿ’ฐ" }),
595
- /* @__PURE__ */ e("span", { children: "No currencies found" })
596
- ] }),
597
- f.map((o) => {
598
- const w = N(o);
599
- return /* @__PURE__ */ n(
600
- B,
601
- {
602
- onSelect: () => m(o),
603
- selected: w,
604
- children: [
605
- /* @__PURE__ */ e("div", { className: y(
606
- "h-4 w-4 shrink-0 rounded-full border border-border flex items-center justify-center",
607
- w && "bg-primary border-primary"
608
- ), 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" }) }) }),
609
- s && /* @__PURE__ */ e("span", { className: "min-w-[1.5rem] text-center font-bold text-primary", children: o.symbol }),
610
- /* @__PURE__ */ n("div", { className: "flex flex-1 flex-col min-w-0", children: [
611
- /* @__PURE__ */ e("span", { className: "truncate font-medium", children: o.name }),
612
- /* @__PURE__ */ e("span", { className: "text-[0.7rem] text-muted-foreground", children: o.code })
613
- ] })
614
- ]
615
- },
616
- o.code
617
- );
448
+ return n.slice(0, X), n.length - X, /* @__PURE__ */ t(j, {
449
+ label: g,
450
+ className: v,
451
+ open: a,
452
+ onOpenChange: c,
453
+ trigger: /* @__PURE__ */ e(q, {
454
+ value: n,
455
+ onRemove: i,
456
+ onClear: h,
457
+ isOpen: a,
458
+ placeholder: p,
459
+ disabled: u,
460
+ renderChip: (o) => /* @__PURE__ */ t(R, { children: [l && /* @__PURE__ */ e("span", {
461
+ className: "font-bold",
462
+ children: o.symbol
463
+ }), /* @__PURE__ */ e("span", { children: o.code })] })
464
+ }),
465
+ children: [/* @__PURE__ */ t(L, { children: [s && /* @__PURE__ */ e(P, {
466
+ placeholder: "Search currencies...",
467
+ value: b,
468
+ onValueChange: N
469
+ }), /* @__PURE__ */ t(_, { children: [f.length === 0 && /* @__PURE__ */ t(O, { children: [/* @__PURE__ */ e("span", {
470
+ className: "text-2xl opacity-40",
471
+ children: "๐Ÿ’ฐ"
472
+ }), /* @__PURE__ */ e("span", { children: "No currencies found" })] }), f.map((o) => {
473
+ const w = x(o);
474
+ return /* @__PURE__ */ t(B, {
475
+ onSelect: () => d(o),
476
+ selected: w,
477
+ children: [
478
+ /* @__PURE__ */ e("div", {
479
+ className: y("h-4 w-4 shrink-0 rounded-full border border-border flex items-center justify-center", w && "bg-primary border-primary"),
480
+ children: w && /* @__PURE__ */ e("svg", {
481
+ className: "h-2.5 w-2.5 stroke-white",
482
+ viewBox: "0 0 20 20",
483
+ fill: "none",
484
+ strokeWidth: "3",
485
+ strokeLinecap: "round",
486
+ strokeLinejoin: "round",
487
+ children: /* @__PURE__ */ e("polyline", { points: "4 10 8 14 16 6" })
618
488
  })
619
- ] })
620
- ] }),
621
- 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: [
622
- /* @__PURE__ */ n("span", { children: [
623
- t.length,
624
- " selected",
625
- a ? ` / ${a}` : ""
626
- ] }),
627
- /* @__PURE__ */ e(
628
- "button",
629
- {
630
- type: "button",
631
- onClick: () => {
632
- r([]), d(!1);
633
- },
634
- className: "text-destructive hover:underline font-medium",
635
- children: "Clear all"
636
- }
637
- )
638
- ] })
639
- ]
640
- }
641
- );
489
+ }),
490
+ l && /* @__PURE__ */ e("span", {
491
+ className: "min-w-[1.5rem] text-center font-bold text-primary",
492
+ children: o.symbol
493
+ }),
494
+ /* @__PURE__ */ t("div", {
495
+ className: "flex flex-1 flex-col min-w-0",
496
+ children: [/* @__PURE__ */ e("span", {
497
+ className: "truncate font-medium",
498
+ children: o.name
499
+ }), /* @__PURE__ */ e("span", {
500
+ className: "text-[0.7rem] text-muted-foreground",
501
+ children: o.code
502
+ })]
503
+ })
504
+ ]
505
+ }, o.code);
506
+ })] })] }), n.length > 0 && /* @__PURE__ */ t("div", {
507
+ className: "flex items-center justify-between border-t border-border px-3 py-2 text-xs text-muted-foreground",
508
+ children: [/* @__PURE__ */ t("span", { children: [
509
+ n.length,
510
+ " selected",
511
+ m ? ` / ${m}` : ""
512
+ ] }), /* @__PURE__ */ e("button", {
513
+ type: "button",
514
+ onClick: () => {
515
+ r([]), c(!1);
516
+ },
517
+ className: "text-destructive hover:underline font-medium",
518
+ children: "Clear all"
519
+ })]
520
+ })]
521
+ });
642
522
  }
643
- function ue({
644
- value: t,
645
- onChange: r,
646
- placeholder: p = "Select a currency...",
647
- searchable: a = !0,
648
- showSymbol: s = !0,
649
- countryIso2: c,
650
- autoSelect: g = !0,
651
- disabled: k = !1,
652
- className: x,
653
- label: i
654
- }) {
655
- const [d, u] = C(!1), [b, f] = C("");
656
- H(() => {
657
- if (c && g && !t) {
658
- const h = A(c);
523
+ function ue({ value: n, onChange: r, placeholder: p = "Select a currency...", searchable: m = !0, showSymbol: l = !0, countryIso2: s, autoSelect: u = !0, disabled: v = !1, className: g, label: a }) {
524
+ const [c, b] = k(!1), [N, f] = k("");
525
+ G(() => {
526
+ if (s && u && !n) {
527
+ const h = $(s);
659
528
  h && r(h);
660
529
  }
661
- }, [c, g, t, r]);
662
- const m = b ? J(b, c) : (() => {
663
- if (c) {
664
- const h = A(c);
530
+ }, [
531
+ s,
532
+ u,
533
+ n,
534
+ r
535
+ ]);
536
+ const d = N ? I(N, s) : (() => {
537
+ if (s) {
538
+ const h = $(s);
665
539
  return h ? [h] : [];
666
540
  }
667
- return q();
668
- })(), l = (h) => {
669
- const o = q().find(
670
- (w) => w.code.toLowerCase() === h.toLowerCase()
671
- );
672
- o && (r(o), u(!1), f(""));
541
+ return A();
542
+ })(), i = (h) => {
543
+ const o = A().find((w) => w.code.toLowerCase() === h.toLowerCase());
544
+ o && (r(o), b(!1), f(""));
673
545
  };
674
- return /* @__PURE__ */ e(
675
- j,
676
- {
677
- label: i,
678
- className: x,
679
- open: d,
680
- onOpenChange: u,
681
- trigger: /* @__PURE__ */ e(
682
- V,
683
- {
684
- isOpen: d,
685
- hasValue: !!t,
686
- placeholder: p,
687
- disabled: k,
688
- children: t && /* @__PURE__ */ n(R, { children: [
689
- s && /* @__PURE__ */ e("span", { className: "min-w-[1.5rem] text-center font-bold text-primary text-base", children: t.symbol }),
690
- /* @__PURE__ */ n("span", { className: "flex-1 text-start truncate", children: [
691
- t.code,
692
- " โ€” ",
693
- t.name
694
- ] })
695
- ] })
696
- }
697
- ),
698
- children: /* @__PURE__ */ n(S, { children: [
699
- a && /* @__PURE__ */ e(
700
- P,
701
- {
702
- placeholder: "Search currency...",
703
- value: b,
704
- onValueChange: f
705
- }
706
- ),
707
- /* @__PURE__ */ n(_, { children: [
708
- m.length === 0 && /* @__PURE__ */ n(O, { children: [
709
- /* @__PURE__ */ e("span", { className: "text-2xl opacity-40", children: "๐Ÿ’ฐ" }),
710
- /* @__PURE__ */ e("span", { children: "No currencies found" })
711
- ] }),
712
- m.map((h) => {
713
- const o = (t == null ? void 0 : t.code) === h.code;
714
- return /* @__PURE__ */ n(
715
- B,
716
- {
717
- onSelect: () => l(h.code),
718
- selected: o,
719
- children: [
720
- s && /* @__PURE__ */ e("span", { className: "min-w-[1.5rem] text-center font-bold text-primary", children: h.symbol }),
721
- /* @__PURE__ */ n("div", { className: "flex flex-1 flex-col gap-0 min-w-0", children: [
722
- /* @__PURE__ */ e("span", { className: "truncate font-medium", children: h.name }),
723
- /* @__PURE__ */ e("span", { className: "text-[0.7rem] text-muted-foreground", children: h.code })
724
- ] }),
725
- o && /* @__PURE__ */ e(T, { className: "ml-auto shrink-0" })
726
- ]
727
- },
728
- h.code
729
- );
730
- })
731
- ] })
732
- ] })
733
- }
734
- );
546
+ return /* @__PURE__ */ e(j, {
547
+ label: a,
548
+ className: g,
549
+ open: c,
550
+ onOpenChange: b,
551
+ trigger: /* @__PURE__ */ e(E, {
552
+ isOpen: c,
553
+ hasValue: !!n,
554
+ placeholder: p,
555
+ disabled: v,
556
+ children: n && /* @__PURE__ */ t(R, { children: [l && /* @__PURE__ */ e("span", {
557
+ className: "min-w-[1.5rem] text-center font-bold text-primary text-base",
558
+ children: n.symbol
559
+ }), /* @__PURE__ */ t("span", {
560
+ className: "flex-1 text-start truncate",
561
+ children: [
562
+ n.code,
563
+ " โ€” ",
564
+ n.name
565
+ ]
566
+ })] })
567
+ }),
568
+ children: /* @__PURE__ */ t(L, { children: [m && /* @__PURE__ */ e(P, {
569
+ placeholder: "Search currency...",
570
+ value: N,
571
+ onValueChange: f
572
+ }), /* @__PURE__ */ t(_, { children: [d.length === 0 && /* @__PURE__ */ t(O, { children: [/* @__PURE__ */ e("span", {
573
+ className: "text-2xl opacity-40",
574
+ children: "๐Ÿ’ฐ"
575
+ }), /* @__PURE__ */ e("span", { children: "No currencies found" })] }), d.map((h) => {
576
+ const o = n?.code === h.code;
577
+ return /* @__PURE__ */ t(B, {
578
+ onSelect: () => i(h.code),
579
+ selected: o,
580
+ children: [
581
+ l && /* @__PURE__ */ e("span", {
582
+ className: "min-w-[1.5rem] text-center font-bold text-primary",
583
+ children: h.symbol
584
+ }),
585
+ /* @__PURE__ */ t("div", {
586
+ className: "flex flex-1 flex-col gap-0 min-w-0",
587
+ children: [/* @__PURE__ */ e("span", {
588
+ className: "truncate font-medium",
589
+ children: h.name
590
+ }), /* @__PURE__ */ e("span", {
591
+ className: "text-[0.7rem] text-muted-foreground",
592
+ children: h.code
593
+ })]
594
+ }),
595
+ o && /* @__PURE__ */ e(D, { className: "ml-auto shrink-0" })
596
+ ]
597
+ }, h.code);
598
+ })] })] })
599
+ });
735
600
  }
736
- function ge({
737
- countryIso2: t,
738
- value: r,
739
- onChange: p,
740
- placeholder: a = "Select a division...",
741
- searchable: s = !0,
742
- disabled: c = !1,
743
- className: g,
744
- label: k
745
- }) {
746
- const [x, i] = C(!1), [d, u] = C(""), b = te(t), f = d ? b.filter(
747
- (l) => l.name.toLowerCase().includes(d.toLowerCase()) || l.iso2.toLowerCase().includes(d.toLowerCase()) || l.timezone.toLowerCase().includes(d.toLowerCase())
748
- ) : b, N = c || !t || b.length === 0, m = (l) => {
749
- const h = b.find((o) => o.name === l);
750
- h && (p(h), i(!1), u(""));
601
+ function ge({ countryIso2: n, value: r, onChange: p, placeholder: m = "Select a division...", searchable: l = !0, disabled: s = !1, className: u, label: v }) {
602
+ const [g, a] = k(!1), [c, b] = k(""), N = te(n), f = c ? N.filter((i) => i.name.toLowerCase().includes(c.toLowerCase()) || i.iso2.toLowerCase().includes(c.toLowerCase()) || i.timezone.toLowerCase().includes(c.toLowerCase())) : N, x = s || !n || N.length === 0, d = (i) => {
603
+ const h = N.find((o) => o.name === i);
604
+ h && (p(h), a(!1), b(""));
751
605
  };
752
- return /* @__PURE__ */ e(
753
- j,
754
- {
755
- label: k,
756
- className: g,
757
- open: x,
758
- onOpenChange: (l) => !N && i(l),
759
- trigger: /* @__PURE__ */ e(
760
- V,
761
- {
762
- isOpen: x,
763
- hasValue: !!r,
764
- placeholder: t ? a : "Select a country first",
765
- disabled: N,
766
- children: r && /* @__PURE__ */ n(R, { children: [
767
- /* @__PURE__ */ e("span", { className: "flex-1 text-start truncate", children: r.name }),
768
- /* @__PURE__ */ e(L, { children: r.iso2 })
769
- ] })
770
- }
771
- ),
772
- children: /* @__PURE__ */ n(S, { children: [
773
- s && /* @__PURE__ */ e(
774
- P,
775
- {
776
- placeholder: "Search division...",
777
- value: d,
778
- onValueChange: u
779
- }
780
- ),
781
- /* @__PURE__ */ n(_, { children: [
782
- f.length === 0 && /* @__PURE__ */ n(O, { children: [
783
- /* @__PURE__ */ e("span", { className: "text-2xl opacity-40", children: "๐Ÿ—บ๏ธ" }),
784
- /* @__PURE__ */ e("span", { children: "No divisions found" })
785
- ] }),
786
- f.map((l) => {
787
- const h = (r == null ? void 0 : r.iso2) === l.iso2 && (r == null ? void 0 : r.name) === l.name;
788
- return /* @__PURE__ */ n(
789
- B,
790
- {
791
- onSelect: () => m(l.name),
792
- selected: h,
793
- children: [
794
- /* @__PURE__ */ n("div", { className: "flex flex-1 flex-col gap-0 min-w-0", children: [
795
- /* @__PURE__ */ e("span", { className: "truncate font-medium", children: l.name }),
796
- /* @__PURE__ */ e("span", { className: "text-[0.7rem] text-muted-foreground truncate", children: l.timezone })
797
- ] }),
798
- /* @__PURE__ */ n("div", { className: "flex items-center gap-1.5 ml-auto shrink-0", children: [
799
- /* @__PURE__ */ e(L, { children: l.iso2 }),
800
- h && /* @__PURE__ */ e(T, {})
801
- ] })
802
- ]
803
- },
804
- `${l.iso2}-${l.name}`
805
- );
806
- })
807
- ] })
808
- ] })
809
- }
810
- );
606
+ return /* @__PURE__ */ e(j, {
607
+ label: v,
608
+ className: u,
609
+ open: g,
610
+ onOpenChange: (i) => !x && a(i),
611
+ trigger: /* @__PURE__ */ e(E, {
612
+ isOpen: g,
613
+ hasValue: !!r,
614
+ placeholder: n ? m : "Select a country first",
615
+ disabled: x,
616
+ children: r && /* @__PURE__ */ t(R, { children: [/* @__PURE__ */ e("span", {
617
+ className: "flex-1 text-start truncate",
618
+ children: r.name
619
+ }), /* @__PURE__ */ e(S, { children: r.iso2 })] })
620
+ }),
621
+ children: /* @__PURE__ */ t(L, { children: [l && /* @__PURE__ */ e(P, {
622
+ placeholder: "Search division...",
623
+ value: c,
624
+ onValueChange: b
625
+ }), /* @__PURE__ */ t(_, { children: [f.length === 0 && /* @__PURE__ */ t(O, { children: [/* @__PURE__ */ e("span", {
626
+ className: "text-2xl opacity-40",
627
+ children: "๐Ÿ—บ๏ธ"
628
+ }), /* @__PURE__ */ e("span", { children: "No divisions found" })] }), f.map((i) => {
629
+ const h = r?.iso2 === i.iso2 && r?.name === i.name;
630
+ return /* @__PURE__ */ t(B, {
631
+ onSelect: () => d(i.name),
632
+ selected: h,
633
+ children: [/* @__PURE__ */ t("div", {
634
+ className: "flex flex-1 flex-col gap-0 min-w-0",
635
+ children: [/* @__PURE__ */ e("span", {
636
+ className: "truncate font-medium",
637
+ children: i.name
638
+ }), /* @__PURE__ */ e("span", {
639
+ className: "text-[0.7rem] text-muted-foreground truncate",
640
+ children: i.timezone
641
+ })]
642
+ }), /* @__PURE__ */ t("div", {
643
+ className: "flex items-center gap-1.5 ml-auto shrink-0",
644
+ children: [/* @__PURE__ */ e(S, { children: i.iso2 }), h && /* @__PURE__ */ e(D, {})]
645
+ })]
646
+ }, `${i.iso2}-${i.name}`);
647
+ })] })] })
648
+ });
811
649
  }
812
- function xe({
813
- value: t,
814
- onChange: r,
815
- placeholder: p = "Select a language...",
816
- searchable: a = !0,
817
- showNativeName: s = !0,
818
- disabled: c = !1,
819
- className: g,
820
- label: k
821
- }) {
822
- const [x, i] = C(!1), [d, u] = C(""), b = d ? ne(d) : D(), f = (N) => {
823
- const m = D().find(
824
- (l) => l.code.toLowerCase() === N.toLowerCase()
825
- );
826
- m && (r(m), i(!1), u(""));
650
+ function xe({ value: n, onChange: r, placeholder: p = "Select a language...", searchable: m = !0, showNativeName: l = !0, disabled: s = !1, className: u, label: v }) {
651
+ const [g, a] = k(!1), [c, b] = k(""), N = c ? re(c) : U(), f = (x) => {
652
+ const d = U().find((i) => i.code.toLowerCase() === x.toLowerCase());
653
+ d && (r(d), a(!1), b(""));
827
654
  };
828
- return /* @__PURE__ */ e(
829
- j,
830
- {
831
- label: k,
832
- className: g,
833
- open: x,
834
- onOpenChange: i,
835
- trigger: /* @__PURE__ */ e(
836
- V,
837
- {
838
- isOpen: x,
839
- hasValue: !!t,
840
- placeholder: p,
841
- disabled: c,
842
- children: t && /* @__PURE__ */ n(R, { children: [
843
- /* @__PURE__ */ e("span", { className: "flex-1 text-start truncate", children: t.english_name }),
844
- s && t.native_name !== t.english_name && /* @__PURE__ */ e("span", { className: "text-xs italic text-muted-foreground shrink-0", children: t.native_name })
845
- ] })
846
- }
847
- ),
848
- children: /* @__PURE__ */ n(S, { children: [
849
- a && /* @__PURE__ */ e(
850
- P,
851
- {
852
- placeholder: "Search language...",
853
- value: d,
854
- onValueChange: u
855
- }
856
- ),
857
- /* @__PURE__ */ n(_, { children: [
858
- b.length === 0 && /* @__PURE__ */ n(O, { children: [
859
- /* @__PURE__ */ e("span", { className: "text-2xl opacity-40", children: "๐ŸŒ" }),
860
- /* @__PURE__ */ e("span", { children: "No languages found" })
861
- ] }),
862
- b.map((N) => {
863
- const m = (t == null ? void 0 : t.code) === N.code;
864
- return /* @__PURE__ */ n(
865
- B,
866
- {
867
- onSelect: () => f(N.code),
868
- selected: m,
869
- children: [
870
- /* @__PURE__ */ n("div", { className: "flex flex-1 flex-col gap-0 min-w-0", children: [
871
- /* @__PURE__ */ e("span", { className: "truncate font-medium", children: N.english_name }),
872
- s && N.native_name !== N.english_name && /* @__PURE__ */ e("span", { className: "text-[0.7rem] text-muted-foreground italic", children: N.native_name })
873
- ] }),
874
- /* @__PURE__ */ n("div", { className: "flex items-center gap-1.5 ml-auto shrink-0", children: [
875
- /* @__PURE__ */ e(L, { className: "text-[0.6rem]", children: N.code }),
876
- m && /* @__PURE__ */ e(T, {})
877
- ] })
878
- ]
879
- },
880
- N.code
881
- );
882
- })
883
- ] })
884
- ] })
885
- }
886
- );
655
+ return /* @__PURE__ */ e(j, {
656
+ label: v,
657
+ className: u,
658
+ open: g,
659
+ onOpenChange: a,
660
+ trigger: /* @__PURE__ */ e(E, {
661
+ isOpen: g,
662
+ hasValue: !!n,
663
+ placeholder: p,
664
+ disabled: s,
665
+ children: n && /* @__PURE__ */ t(R, { children: [/* @__PURE__ */ e("span", {
666
+ className: "flex-1 text-start truncate",
667
+ children: n.english_name
668
+ }), l && n.native_name !== n.english_name && /* @__PURE__ */ e("span", {
669
+ className: "text-xs italic text-muted-foreground shrink-0",
670
+ children: n.native_name
671
+ })] })
672
+ }),
673
+ children: /* @__PURE__ */ t(L, { children: [m && /* @__PURE__ */ e(P, {
674
+ placeholder: "Search language...",
675
+ value: c,
676
+ onValueChange: b
677
+ }), /* @__PURE__ */ t(_, { children: [N.length === 0 && /* @__PURE__ */ t(O, { children: [/* @__PURE__ */ e("span", {
678
+ className: "text-2xl opacity-40",
679
+ children: "๐ŸŒ"
680
+ }), /* @__PURE__ */ e("span", { children: "No languages found" })] }), N.map((x) => {
681
+ const d = n?.code === x.code;
682
+ return /* @__PURE__ */ t(B, {
683
+ onSelect: () => f(x.code),
684
+ selected: d,
685
+ children: [/* @__PURE__ */ t("div", {
686
+ className: "flex flex-1 flex-col gap-0 min-w-0",
687
+ children: [/* @__PURE__ */ e("span", {
688
+ className: "truncate font-medium",
689
+ children: x.english_name
690
+ }), l && x.native_name !== x.english_name && /* @__PURE__ */ e("span", {
691
+ className: "text-[0.7rem] text-muted-foreground italic",
692
+ children: x.native_name
693
+ })]
694
+ }), /* @__PURE__ */ t("div", {
695
+ className: "flex items-center gap-1.5 ml-auto shrink-0",
696
+ children: [/* @__PURE__ */ e(S, {
697
+ className: "text-[0.6rem]",
698
+ children: x.code
699
+ }), d && /* @__PURE__ */ e(D, {})]
700
+ })]
701
+ }, x.code);
702
+ })] })] })
703
+ });
887
704
  }
888
- const se = v.forwardRef(
889
- ({
890
- value: t,
891
- onChange: r,
892
- defaultCountryIso2: p = "US",
893
- placeholder: a = "Phone number",
894
- showFlag: s = !0,
895
- disabled: c = !1,
896
- className: g,
897
- label: k
898
- }, x) => {
899
- const i = re(t, r, p);
900
- return /* @__PURE__ */ n("div", { ref: x, className: y("flex flex-col gap-0", g), children: [
901
- k && /* @__PURE__ */ e(U, { children: k }),
902
- /* @__PURE__ */ n(
903
- "div",
904
- {
905
- className: y(
906
- "flex h-12 items-stretch overflow-hidden rounded-xl border border-input bg-background ring-offset-background",
907
- "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
908
- "transition-shadow",
909
- c && "opacity-50 pointer-events-none"
910
- ),
911
- children: [
912
- /* @__PURE__ */ n(
913
- Y,
914
- {
915
- open: i.isOpen,
916
- onOpenChange: (d) => d ? i.toggle() : i.close(),
917
- children: [
918
- /* @__PURE__ */ e(Z, { asChild: !0, children: /* @__PURE__ */ n(
919
- "button",
920
- {
921
- type: "button",
922
- disabled: c,
923
- className: y(
924
- "flex h-full shrink-0 items-center gap-1.5 border-r border-input bg-muted px-3",
925
- "text-sm font-semibold text-foreground transition-colors outline-none",
926
- "hover:bg-accent/30 focus-visible:bg-accent/30"
927
- ),
928
- children: [
929
- s && i.country && /* @__PURE__ */ e(E, { iso2: i.country.iso2, flag: i.country.flag, flagUrl: i.country.flag_url }),
930
- /* @__PURE__ */ e("span", { className: "tabular-nums text-primary", children: i.country ? `+${i.country.phone_code}` : "+?" }),
931
- /* @__PURE__ */ e(
932
- "svg",
933
- {
934
- className: y(
935
- "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform duration-200",
936
- i.isOpen && "rotate-180"
937
- ),
938
- viewBox: "0 0 20 20",
939
- fill: "none",
940
- stroke: "currentColor",
941
- strokeWidth: "2",
942
- strokeLinecap: "round",
943
- children: /* @__PURE__ */ e("polyline", { points: "5 8 10 13 15 8" })
944
- }
945
- )
946
- ]
947
- }
948
- ) }),
949
- /* @__PURE__ */ e(
950
- M,
951
- {
952
- align: "start",
953
- side: "bottom",
954
- sideOffset: 4,
955
- className: "w-72",
956
- children: /* @__PURE__ */ n(S, { children: [
957
- /* @__PURE__ */ e(
958
- P,
959
- {
960
- placeholder: "Search country or code...",
961
- value: i.searchQuery,
962
- onValueChange: i.setSearchQuery
963
- }
964
- ),
965
- /* @__PURE__ */ n(_, { children: [
966
- i.filteredCountries.length === 0 && /* @__PURE__ */ n(O, { children: [
967
- /* @__PURE__ */ e("span", { className: "text-2xl opacity-40", children: "๐ŸŒ" }),
968
- /* @__PURE__ */ e("span", { children: "No countries found" })
969
- ] }),
970
- i.filteredCountries.map((d) => {
971
- var b;
972
- const u = ((b = i.country) == null ? void 0 : b.iso2) === d.iso2;
973
- return /* @__PURE__ */ n(
974
- B,
975
- {
976
- onSelect: () => i.selectCountry(d),
977
- selected: u,
978
- children: [
979
- /* @__PURE__ */ e(E, { iso2: d.iso2, flag: d.flag, flagUrl: d.flag_url }),
980
- /* @__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 }) }),
981
- /* @__PURE__ */ n(L, { className: "ml-auto tabular-nums text-[0.7rem]", children: [
982
- "+",
983
- d.phone_code
984
- ] })
985
- ]
986
- },
987
- d.iso2
988
- );
989
- })
990
- ] })
991
- ] })
992
- }
993
- )
994
- ]
995
- }
996
- ),
997
- /* @__PURE__ */ e(
998
- "input",
999
- {
1000
- type: "tel",
1001
- value: i.number,
1002
- onChange: (d) => i.setNumber(d.target.value),
1003
- placeholder: a,
1004
- disabled: c,
1005
- minLength: i.minLength,
1006
- maxLength: i.maxLength,
1007
- inputMode: "numeric",
1008
- autoComplete: "tel-national",
1009
- className: y(
1010
- "flex-1 min-w-0 bg-transparent px-3 text-sm text-foreground",
1011
- "placeholder:text-muted-foreground",
1012
- "focus:outline-none"
1013
- )
1014
- }
1015
- )
1016
- ]
1017
- }
1018
- ),
1019
- i.value && /* @__PURE__ */ n("p", { className: "text-[0.7rem] text-muted-foreground tabular-nums pl-0.5", children: [
1020
- "Full:",
1021
- " ",
1022
- /* @__PURE__ */ e("span", { className: "font-mono text-primary", children: i.value.full })
1023
- ] })
1024
- ] });
1025
- }
1026
- );
1027
- se.displayName = "PhoneInput";
1028
- function be({
1029
- value: t,
1030
- onChange: r,
1031
- placeholder: p = "Select a timezone...",
1032
- searchable: a = !0,
1033
- countryIso2: s,
1034
- autoSelect: c = !0,
1035
- disabled: g = !1,
1036
- className: k,
1037
- label: x
1038
- }) {
1039
- const [i, d] = C(!1), [u, b] = C("");
1040
- H(() => {
1041
- if (s && c && !t) {
1042
- const l = X(s);
1043
- l && l.length > 0 && r(l[0]);
1044
- }
1045
- }, [s, c, t, r]);
1046
- const f = s ? X(s) : oe(), N = u ? ie(u, s) : f, m = (l) => {
1047
- const h = f.find((o) => o.name === l);
1048
- h && (r(h), d(!1), b(""));
1049
- };
1050
- return /* @__PURE__ */ e(
1051
- j,
1052
- {
1053
- label: x,
1054
- className: k,
1055
- open: i,
1056
- onOpenChange: d,
1057
- trigger: /* @__PURE__ */ e(
1058
- V,
1059
- {
1060
- isOpen: i,
1061
- hasValue: !!t,
1062
- placeholder: p,
1063
- disabled: g,
1064
- children: t && /* @__PURE__ */ n(R, { children: [
1065
- /* @__PURE__ */ e("span", { className: "flex-1 text-start truncate", children: t.name }),
1066
- /* @__PURE__ */ e(L, { children: t.offset_name })
1067
- ] })
1068
- }
1069
- ),
1070
- children: /* @__PURE__ */ n(S, { children: [
1071
- a && /* @__PURE__ */ e(
1072
- P,
1073
- {
1074
- placeholder: "Search timezone...",
1075
- value: u,
1076
- onValueChange: b
1077
- }
1078
- ),
1079
- /* @__PURE__ */ n(_, { children: [
1080
- N.length === 0 && /* @__PURE__ */ n(O, { children: [
1081
- /* @__PURE__ */ e("span", { className: "text-2xl opacity-40", children: "๐Ÿ•" }),
1082
- /* @__PURE__ */ e("span", { children: "No timezones found" })
1083
- ] }),
1084
- N.map((l) => {
1085
- const h = (t == null ? void 0 : t.name) === l.name;
1086
- return /* @__PURE__ */ n(
1087
- B,
1088
- {
1089
- onSelect: () => m(l.name),
1090
- selected: h,
1091
- children: [
1092
- /* @__PURE__ */ n("div", { className: "flex flex-1 flex-col gap-0 min-w-0", children: [
1093
- /* @__PURE__ */ e("span", { className: "truncate font-medium", children: l.name }),
1094
- /* @__PURE__ */ n("span", { className: "text-[0.7rem] text-muted-foreground", children: [
1095
- l.tzName,
1096
- " ยท ",
1097
- l.abbreviation
1098
- ] })
1099
- ] }),
1100
- /* @__PURE__ */ n("div", { className: "flex items-center gap-1.5 ml-auto shrink-0", children: [
1101
- /* @__PURE__ */ e(L, { className: "tabular-nums text-[0.65rem]", children: l.offset_name }),
1102
- h && /* @__PURE__ */ e(T, {})
1103
- ] })
1104
- ]
1105
- },
1106
- l.name
1107
- );
705
+ var le = C.forwardRef(({ value: n, onChange: r, defaultCountryIso2: p = "US", placeholder: m = "Phone number", showFlag: l = !0, disabled: s = !1, className: u, label: v }, g) => {
706
+ const a = ae(n, r, p);
707
+ return /* @__PURE__ */ t("div", {
708
+ ref: g,
709
+ className: y("flex flex-col gap-0", u),
710
+ children: [
711
+ v && /* @__PURE__ */ e(Q, { children: v }),
712
+ /* @__PURE__ */ t("div", {
713
+ 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"),
714
+ children: [/* @__PURE__ */ t(J, {
715
+ open: a.isOpen,
716
+ onOpenChange: (c) => c ? a.toggle() : a.close(),
717
+ children: [/* @__PURE__ */ e(Y, {
718
+ asChild: !0,
719
+ children: /* @__PURE__ */ t("button", {
720
+ type: "button",
721
+ disabled: s,
722
+ 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"),
723
+ children: [
724
+ l && a.country && /* @__PURE__ */ e(V, {
725
+ iso2: a.country.iso2,
726
+ flag: a.country.flag,
727
+ flagUrl: a.country.flag_url
728
+ }),
729
+ /* @__PURE__ */ e("span", {
730
+ className: "tabular-nums text-primary",
731
+ children: a.country ? `+${a.country.phone_code}` : "+?"
732
+ }),
733
+ /* @__PURE__ */ e("svg", {
734
+ className: y("h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform duration-200", a.isOpen && "rotate-180"),
735
+ viewBox: "0 0 20 20",
736
+ fill: "none",
737
+ stroke: "currentColor",
738
+ strokeWidth: "2",
739
+ strokeLinecap: "round",
740
+ children: /* @__PURE__ */ e("polyline", { points: "5 8 10 13 15 8" })
741
+ })
742
+ ]
743
+ })
744
+ }), /* @__PURE__ */ e(W, {
745
+ align: "start",
746
+ side: "bottom",
747
+ sideOffset: 4,
748
+ className: "w-72",
749
+ children: /* @__PURE__ */ t(L, { children: [/* @__PURE__ */ e(P, {
750
+ placeholder: "Search country or code...",
751
+ value: a.searchQuery,
752
+ onValueChange: a.setSearchQuery
753
+ }), /* @__PURE__ */ t(_, { children: [a.filteredCountries.length === 0 && /* @__PURE__ */ t(O, { children: [/* @__PURE__ */ e("span", {
754
+ className: "text-2xl opacity-40",
755
+ children: "๐ŸŒ"
756
+ }), /* @__PURE__ */ e("span", { children: "No countries found" })] }), a.filteredCountries.map((c) => /* @__PURE__ */ t(B, {
757
+ onSelect: () => a.selectCountry(c),
758
+ selected: a.country?.iso2 === c.iso2,
759
+ children: [
760
+ /* @__PURE__ */ e(V, {
761
+ iso2: c.iso2,
762
+ flag: c.flag,
763
+ flagUrl: c.flag_url
764
+ }),
765
+ /* @__PURE__ */ e("div", {
766
+ className: "flex flex-1 flex-col min-w-0",
767
+ children: /* @__PURE__ */ e("span", {
768
+ className: "truncate font-medium text-sm",
769
+ children: c.name
770
+ })
771
+ }),
772
+ /* @__PURE__ */ t(S, {
773
+ className: "ml-auto tabular-nums text-[0.7rem]",
774
+ children: ["+", c.phone_code]
775
+ })
776
+ ]
777
+ }, c.iso2))] })] })
778
+ })]
779
+ }), /* @__PURE__ */ e("input", {
780
+ type: "tel",
781
+ value: a.number,
782
+ onChange: (c) => a.setNumber(c.target.value),
783
+ placeholder: m,
784
+ disabled: s,
785
+ minLength: a.minLength,
786
+ maxLength: a.maxLength,
787
+ inputMode: "numeric",
788
+ autoComplete: "tel-national",
789
+ className: y("flex-1 min-w-0 bg-transparent px-3 text-sm text-foreground", "placeholder:text-muted-foreground", "focus:outline-none")
790
+ })]
791
+ }),
792
+ a.value && /* @__PURE__ */ t("p", {
793
+ className: "text-[0.7rem] text-muted-foreground tabular-nums pl-0.5",
794
+ children: [
795
+ "Full:",
796
+ " ",
797
+ /* @__PURE__ */ e("span", {
798
+ className: "font-mono text-primary",
799
+ children: a.value.full
1108
800
  })
1109
- ] })
1110
- ] })
801
+ ]
802
+ })
803
+ ]
804
+ });
805
+ });
806
+ le.displayName = "PhoneInput";
807
+ function be({ value: n, onChange: r, placeholder: p = "Select a timezone...", searchable: m = !0, countryIso2: l, autoSelect: s = !0, disabled: u = !1, className: v, label: g }) {
808
+ const [a, c] = k(!1), [b, N] = k("");
809
+ G(() => {
810
+ if (l && s && !n) {
811
+ const i = F(l);
812
+ i && i.length > 0 && r(i[0]);
1111
813
  }
1112
- );
814
+ }, [
815
+ l,
816
+ s,
817
+ n,
818
+ r
819
+ ]);
820
+ const f = l ? F(l) : ne(), x = b ? oe(b, l) : f, d = (i) => {
821
+ const h = f.find((o) => o.name === i);
822
+ h && (r(h), c(!1), N(""));
823
+ };
824
+ return /* @__PURE__ */ e(j, {
825
+ label: g,
826
+ className: v,
827
+ open: a,
828
+ onOpenChange: c,
829
+ trigger: /* @__PURE__ */ e(E, {
830
+ isOpen: a,
831
+ hasValue: !!n,
832
+ placeholder: p,
833
+ disabled: u,
834
+ children: n && /* @__PURE__ */ t(R, { children: [/* @__PURE__ */ e("span", {
835
+ className: "flex-1 text-start truncate",
836
+ children: n.name
837
+ }), /* @__PURE__ */ e(S, { children: n.offset_name })] })
838
+ }),
839
+ children: /* @__PURE__ */ t(L, { children: [m && /* @__PURE__ */ e(P, {
840
+ placeholder: "Search timezone...",
841
+ value: b,
842
+ onValueChange: N
843
+ }), /* @__PURE__ */ t(_, { children: [x.length === 0 && /* @__PURE__ */ t(O, { children: [/* @__PURE__ */ e("span", {
844
+ className: "text-2xl opacity-40",
845
+ children: "๐Ÿ•"
846
+ }), /* @__PURE__ */ e("span", { children: "No timezones found" })] }), x.map((i) => {
847
+ const h = n?.name === i.name;
848
+ return /* @__PURE__ */ t(B, {
849
+ onSelect: () => d(i.name),
850
+ selected: h,
851
+ children: [/* @__PURE__ */ t("div", {
852
+ className: "flex flex-1 flex-col gap-0 min-w-0",
853
+ children: [/* @__PURE__ */ e("span", {
854
+ className: "truncate font-medium",
855
+ children: i.name
856
+ }), /* @__PURE__ */ t("span", {
857
+ className: "text-[0.7rem] text-muted-foreground",
858
+ children: [
859
+ i.tzName,
860
+ " ยท ",
861
+ i.abbreviation
862
+ ]
863
+ })]
864
+ }), /* @__PURE__ */ t("div", {
865
+ className: "flex items-center gap-1.5 ml-auto shrink-0",
866
+ children: [/* @__PURE__ */ e(S, {
867
+ className: "tabular-nums text-[0.65rem]",
868
+ children: i.offset_name
869
+ }), h && /* @__PURE__ */ e(D, {})]
870
+ })]
871
+ }, i.name);
872
+ })] })] })
873
+ });
1113
874
  }
1114
875
  export {
1115
- L as Badge,
1116
- T as CheckIcon,
876
+ S as Badge,
877
+ D as CheckIcon,
1117
878
  O as CommandEmpty,
1118
879
  P as CommandInput,
1119
880
  B as CommandItem,
1120
881
  _ as CommandList,
1121
- S as CommandRoot,
882
+ L as CommandRoot,
1122
883
  pe as CountryMultiSelect,
1123
884
  fe as CountryPicker,
1124
885
  he as CurrencyMultiSelect,
1125
886
  ue as CurrencyPicker,
1126
887
  ge as DivisionPicker,
1127
- E as Flag,
888
+ V as Flag,
1128
889
  xe as LanguagePicker,
1129
- se as PhoneInput,
1130
- V as PickerTrigger,
1131
- Y as Popover,
1132
- M as PopoverContent,
1133
- Z as PopoverTrigger,
890
+ le as PhoneInput,
891
+ E as PickerTrigger,
892
+ J as Popover,
893
+ W as PopoverContent,
894
+ Y as PopoverTrigger,
1134
895
  be as TimezonePicker,
1135
896
  y as cn
1136
897
  };
1137
- //# sourceMappingURL=index.mjs.map
898
+
899
+ //# sourceMappingURL=index.mjs.map