react-country-kit 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.
Files changed (18) hide show
  1. package/dist/components/CountryMultiSelect/CountryMultiSelect.d.ts +0 -1
  2. package/dist/components/CountryPicker/CountryPicker.d.ts +0 -1
  3. package/dist/components/CurrencyMultiSelect/CurrencyMultiSelect.d.ts +0 -1
  4. package/dist/components/CurrencyPicker/CurrencyPicker.d.ts +0 -1
  5. package/dist/components/DivisionPicker/DivisionPicker.d.ts +0 -1
  6. package/dist/components/LanguagePicker/LanguagePicker.d.ts +0 -1
  7. package/dist/components/PhoneInput/PhoneInput.d.ts +0 -1
  8. package/dist/components/TimezonePicker/TimezonePicker.d.ts +0 -1
  9. package/dist/components/shared/Flag.d.ts +0 -1
  10. package/dist/components/shared/PickerBase.d.ts +0 -1
  11. package/dist/react-country-kit.cjs.js +3 -2
  12. package/dist/react-country-kit.cjs.js.map +1 -1
  13. package/dist/react-country-kit.css +2 -0
  14. package/dist/react-country-kit.d.ts +1 -0
  15. package/dist/react-country-kit.es.js +993 -749
  16. package/dist/react-country-kit.es.js.map +1 -1
  17. package/package.json +10 -10
  18. package/dist/style.css +0 -1
package/dist/react-country-kit.es.js CHANGED
@@ -1,824 +1,1067 @@
1
- import { useMultiSelect as L, getAllCountries as S, searchCountries as $, useCountryPicker as E, getAllCurrencies as _, searchCurrencies as O, useCurrencyPicker as B, useDivisionPicker as P, useLanguagePicker as W, usePhoneInput as Q, useTimezonePicker as D } from "react-country-kit-core";
1
+ import { getAllCountries as S, getAllCurrencies as $, searchCountries as E, searchCurrencies as _, useCountryPicker as O, useCurrencyPicker as B, useDivisionPicker as P, useLanguagePicker as W, useMultiSelect as L, usePhoneInput as Q, useTimezonePicker as D } from "react-country-kit-core";
2
+ import { useEffect as f, useRef as C } from "react";
3
+ import { Fragment as y, jsx as e, jsxs as n } from "react/jsx-runtime";
2
4
  export * from "react-country-kit-core";
3
- import { jsx as e, jsxs as c, Fragment as b } from "react/jsx-runtime";
4
- import { useRef as x, useEffect as f } from "react";
5
- function N({ value: n, onChange: o, placeholder: k = "Search...", autoFocus: h = !0 }) {
6
- const a = x(null);
5
+ function N({ value: i, onChange: a, placeholder: p = "Search...", autoFocus: m = !0 }) {
6
+ const o = C(null);
7
7
  return f(() => {
8
- h && setTimeout(() => {
9
- var d;
10
- return (d = a.current) == null ? void 0 : d.focus();
11
- }, 50);
12
- }, [h]), /* @__PURE__ */ e("div", { className: "rck-search-wrapper", children: /* @__PURE__ */ c("div", { className: "rck-search", children: [
13
- /* @__PURE__ */ c("svg", { className: "rck-search-icon", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
14
- /* @__PURE__ */ e("circle", { cx: "8.5", cy: "8.5", r: "5.5" }),
15
- /* @__PURE__ */ e("path", { d: "M17 17l-4-4", strokeLinecap: "round" })
16
- ] }),
17
- /* @__PURE__ */ e(
18
- "input",
19
- {
20
- ref: a,
21
- type: "text",
22
- value: n,
23
- onChange: (d) => o(d.target.value),
24
- placeholder: k,
25
- "aria-label": "Search"
26
- }
27
- ),
28
- n && /* @__PURE__ */ e(
29
- "button",
30
- {
31
- style: { background: "none", border: "none", cursor: "pointer", color: "var(--rck-text-placeholder)", padding: 0, display: "flex" },
32
- onClick: () => o(""),
33
- "aria-label": "Clear search",
34
- type: "button",
35
- 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" }) })
36
- }
37
- )
38
- ] }) });
8
+ m && setTimeout(() => o.current?.focus(), 50);
9
+ }, [m]), /* @__PURE__ */ e("div", {
10
+ className: "rck-search-wrapper",
11
+ children: /* @__PURE__ */ n("div", {
12
+ className: "rck-search",
13
+ children: [
14
+ /* @__PURE__ */ n("svg", {
15
+ className: "rck-search-icon",
16
+ viewBox: "0 0 20 20",
17
+ fill: "none",
18
+ stroke: "currentColor",
19
+ strokeWidth: "2",
20
+ children: [/* @__PURE__ */ e("circle", {
21
+ cx: "8.5",
22
+ cy: "8.5",
23
+ r: "5.5"
24
+ }), /* @__PURE__ */ e("path", {
25
+ d: "M17 17l-4-4",
26
+ strokeLinecap: "round"
27
+ })]
28
+ }),
29
+ /* @__PURE__ */ e("input", {
30
+ ref: o,
31
+ type: "text",
32
+ value: i,
33
+ onChange: (h) => a(h.target.value),
34
+ placeholder: p,
35
+ "aria-label": "Search"
36
+ }),
37
+ i && /* @__PURE__ */ e("button", {
38
+ style: {
39
+ background: "none",
40
+ border: "none",
41
+ cursor: "pointer",
42
+ color: "var(--rck-text-placeholder)",
43
+ padding: 0,
44
+ display: "flex"
45
+ },
46
+ onClick: () => a(""),
47
+ "aria-label": "Clear search",
48
+ type: "button",
49
+ children: /* @__PURE__ */ e("svg", {
50
+ width: "14",
51
+ height: "14",
52
+ viewBox: "0 0 20 20",
53
+ fill: "currentColor",
54
+ children: /* @__PURE__ */ e("path", {
55
+ d: "M6 6l8 8M14 6l-8 8",
56
+ stroke: "currentColor",
57
+ strokeWidth: "2",
58
+ strokeLinecap: "round",
59
+ fill: "none"
60
+ })
61
+ })
62
+ })
63
+ ]
64
+ })
65
+ });
39
66
  }
40
- const C = ({
41
- iso2: n,
42
- flag: o,
43
- flagUrl: k,
44
- className: h = "",
45
- alt: a = "",
46
- mode: d = "auto"
47
- }) => {
48
- const u = k || `https://flagcdn.com/w320/${n.toLowerCase()}.png`;
49
- return d === "image" ? /* @__PURE__ */ e(
50
- "img",
51
- {
52
- src: u,
53
- alt: a || n,
54
- className: `rck-flag-img ${h}`,
55
- loading: "lazy"
56
- }
57
- ) : /* @__PURE__ */ e("span", { className: `rck-flag-wrapper ${h}`, title: a || n, children: o || n });
67
+ var b = ({ iso2: i, flag: a, flagUrl: p, className: m = "", alt: o = "", mode: h = "auto" }) => {
68
+ const u = p || `https://flagcdn.com/w320/${i.toLowerCase()}.png`;
69
+ return h === "image" ? /* @__PURE__ */ e("img", {
70
+ src: u,
71
+ alt: o || i,
72
+ className: `rck-flag-img ${m}`,
73
+ loading: "lazy"
74
+ }) : /* @__PURE__ */ e("span", {
75
+ className: `rck-flag-wrapper ${m}`,
76
+ title: o || i,
77
+ children: a || i
78
+ });
58
79
  }, w = 3;
59
80
  function j() {
60
- 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" }) });
81
+ return /* @__PURE__ */ e("svg", {
82
+ viewBox: "0 0 20 20",
83
+ fill: "none",
84
+ stroke: "currentColor",
85
+ strokeWidth: "2.5",
86
+ strokeLinecap: "round",
87
+ strokeLinejoin: "round",
88
+ children: /* @__PURE__ */ e("polyline", { points: "4 10 8 14 16 6" })
89
+ });
61
90
  }
62
- function G({
63
- value: n,
64
- onChange: o,
65
- placeholder: k = "Select countries...",
66
- maxItems: h,
67
- showFlags: a = !0,
68
- searchable: d = !0,
69
- disabled: u = !1,
70
- className: g,
71
- label: r
72
- }) {
73
- const i = L(
74
- S(),
75
- (t, m) => m ? $(m) : t,
76
- (t) => t.iso2,
77
- n,
78
- o,
79
- h
80
- ), s = x(null);
91
+ function G({ value: i, onChange: a, placeholder: p = "Select countries...", maxItems: m, showFlags: o = !0, searchable: h = !0, disabled: u = !1, className: g, label: r }) {
92
+ const c = L(S(), (s, d) => d ? E(d) : s, (s) => s.iso2, i, a, m), l = C(null);
81
93
  f(() => {
82
- if (!i.isOpen) return;
83
- const t = (m) => {
84
- s.current && !s.current.contains(m.target) && i.close();
94
+ if (!c.isOpen) return;
95
+ const s = (d) => {
96
+ l.current && !l.current.contains(d.target) && c.close();
85
97
  };
86
- return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
87
- }, [i.isOpen, i.close]), f(() => {
88
- if (!i.isOpen) return;
89
- const t = (m) => {
90
- m.key === "Escape" && i.close();
98
+ return document.addEventListener("mousedown", s), () => document.removeEventListener("mousedown", s);
99
+ }, [c.isOpen, c.close]), f(() => {
100
+ if (!c.isOpen) return;
101
+ const s = (d) => {
102
+ d.key === "Escape" && c.close();
91
103
  };
92
- return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
93
- }, [i.isOpen, i.close]);
94
- const l = n.slice(0, w), p = n.length - w;
95
- return /* @__PURE__ */ c("div", { ref: s, className: `rck-picker${g ? ` ${g}` : ""}`, children: [
96
- r && /* @__PURE__ */ e("span", { className: "rck-label", children: r }),
97
- /* @__PURE__ */ c(
98
- "button",
99
- {
104
+ return document.addEventListener("keydown", s), () => document.removeEventListener("keydown", s);
105
+ }, [c.isOpen, c.close]);
106
+ const t = i.slice(0, w), k = i.length - w;
107
+ return /* @__PURE__ */ n("div", {
108
+ ref: l,
109
+ className: `rck-picker${g ? ` ${g}` : ""}`,
110
+ children: [
111
+ r && /* @__PURE__ */ e("span", {
112
+ className: "rck-label",
113
+ children: r
114
+ }),
115
+ /* @__PURE__ */ n("button", {
100
116
  type: "button",
101
- className: `rck-multiselect-trigger${i.isOpen ? " rck-open" : ""}`,
117
+ className: `rck-multiselect-trigger${c.isOpen ? " rck-open" : ""}`,
102
118
  disabled: u,
103
- onClick: i.toggle,
119
+ onClick: c.toggle,
104
120
  "aria-haspopup": "listbox",
105
- "aria-expanded": i.isOpen,
121
+ "aria-expanded": c.isOpen,
106
122
  children: [
107
- /* @__PURE__ */ e("div", { className: "rck-chips-area", children: n.length === 0 ? /* @__PURE__ */ e("span", { style: { color: "var(--rck-text-placeholder)", fontSize: "0.9375rem" }, children: k }) : /* @__PURE__ */ c(b, { children: [
108
- l.map((t) => /* @__PURE__ */ c("span", { className: "rck-chip", children: [
109
- a && /* @__PURE__ */ e("span", { className: "rck-flag", children: /* @__PURE__ */ e(C, { iso2: t.iso2, flag: t.flag, flagUrl: t.flag_url }) }),
110
- /* @__PURE__ */ e("span", { className: "rck-chip-label", children: t.name }),
111
- /* @__PURE__ */ e(
112
- "button",
113
- {
123
+ /* @__PURE__ */ e("div", {
124
+ className: "rck-chips-area",
125
+ children: i.length === 0 ? /* @__PURE__ */ e("span", {
126
+ style: {
127
+ color: "var(--rck-text-placeholder)",
128
+ fontSize: "0.9375rem"
129
+ },
130
+ children: p
131
+ }) : /* @__PURE__ */ n(y, { children: [t.map((s) => /* @__PURE__ */ n("span", {
132
+ className: "rck-chip",
133
+ children: [
134
+ o && /* @__PURE__ */ e("span", {
135
+ className: "rck-flag",
136
+ children: /* @__PURE__ */ e(b, {
137
+ iso2: s.iso2,
138
+ flag: s.flag,
139
+ flagUrl: s.flag_url
140
+ })
141
+ }),
142
+ /* @__PURE__ */ e("span", {
143
+ className: "rck-chip-label",
144
+ children: s.name
145
+ }),
146
+ /* @__PURE__ */ e("button", {
114
147
  type: "button",
115
148
  className: "rck-chip-remove",
116
- onClick: (m) => {
117
- m.stopPropagation(), i.removeItem(t), o(n.filter((y) => y.iso2 !== t.iso2));
149
+ onClick: (d) => {
150
+ d.stopPropagation(), c.removeItem(s), a(i.filter((v) => v.iso2 !== s.iso2));
118
151
  },
119
- "aria-label": `Remove ${t.name}`,
120
- children: /* @__PURE__ */ c("svg", { width: "10", height: "10", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: [
121
- /* @__PURE__ */ e("line", { x1: "5", y1: "5", x2: "15", y2: "15" }),
122
- /* @__PURE__ */ e("line", { x1: "15", y1: "5", x2: "5", y2: "15" })
123
- ] })
124
- }
125
- )
126
- ] }, t.iso2)),
127
- p > 0 && /* @__PURE__ */ c("span", { className: "rck-chip-overflow", children: [
128
- "+",
129
- p,
130
- " more"
131
- ] })
132
- ] }) }),
133
- n.length > 0 && /* @__PURE__ */ e(
134
- "button",
135
- {
136
- type: "button",
137
- className: "rck-multiselect-clear",
138
- onClick: (t) => {
139
- t.stopPropagation(), i.clearAll(), o([]);
140
- },
141
- "aria-label": "Clear all",
142
- children: /* @__PURE__ */ c("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
143
- /* @__PURE__ */ e("line", { x1: "5", y1: "5", x2: "15", y2: "15" }),
144
- /* @__PURE__ */ e("line", { x1: "15", y1: "5", x2: "5", y2: "15" })
145
- ] })
146
- }
147
- ),
148
- /* @__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" }) })
152
+ "aria-label": `Remove ${s.name}`,
153
+ children: /* @__PURE__ */ n("svg", {
154
+ width: "10",
155
+ height: "10",
156
+ viewBox: "0 0 20 20",
157
+ fill: "none",
158
+ stroke: "currentColor",
159
+ strokeWidth: "2.5",
160
+ strokeLinecap: "round",
161
+ children: [/* @__PURE__ */ e("line", {
162
+ x1: "5",
163
+ y1: "5",
164
+ x2: "15",
165
+ y2: "15"
166
+ }), /* @__PURE__ */ e("line", {
167
+ x1: "15",
168
+ y1: "5",
169
+ x2: "5",
170
+ y2: "15"
171
+ })]
172
+ })
173
+ })
174
+ ]
175
+ }, s.iso2)), k > 0 && /* @__PURE__ */ n("span", {
176
+ className: "rck-chip-overflow",
177
+ children: [
178
+ "+",
179
+ k,
180
+ " more"
181
+ ]
182
+ })] })
183
+ }),
184
+ i.length > 0 && /* @__PURE__ */ e("button", {
185
+ type: "button",
186
+ className: "rck-multiselect-clear",
187
+ onClick: (s) => {
188
+ s.stopPropagation(), c.clearAll(), a([]);
189
+ },
190
+ "aria-label": "Clear all",
191
+ children: /* @__PURE__ */ n("svg", {
192
+ width: "14",
193
+ height: "14",
194
+ viewBox: "0 0 20 20",
195
+ fill: "none",
196
+ stroke: "currentColor",
197
+ strokeWidth: "2",
198
+ strokeLinecap: "round",
199
+ children: [/* @__PURE__ */ e("line", {
200
+ x1: "5",
201
+ y1: "5",
202
+ x2: "15",
203
+ y2: "15"
204
+ }), /* @__PURE__ */ e("line", {
205
+ x1: "15",
206
+ y1: "5",
207
+ x2: "5",
208
+ y2: "15"
209
+ })]
210
+ })
211
+ }),
212
+ /* @__PURE__ */ e("svg", {
213
+ className: "rck-chevron",
214
+ viewBox: "0 0 20 20",
215
+ fill: "none",
216
+ stroke: "currentColor",
217
+ strokeWidth: "2",
218
+ strokeLinecap: "round",
219
+ children: /* @__PURE__ */ e("polyline", { points: "5 8 10 13 15 8" })
220
+ })
149
221
  ]
150
- }
151
- ),
152
- i.isOpen && /* @__PURE__ */ c("div", { className: "rck-dropdown", role: "listbox", "aria-multiselectable": "true", children: [
153
- d && /* @__PURE__ */ e(N, { value: i.searchQuery, onChange: i.setSearchQuery, placeholder: "Search countries..." }),
154
- /* @__PURE__ */ e("ul", { className: "rck-list", children: i.filteredItems.length === 0 ? /* @__PURE__ */ c("li", { className: "rck-empty", children: [
155
- /* @__PURE__ */ e("span", { className: "rck-empty-icon", children: "๐ŸŒ" }),
156
- /* @__PURE__ */ e("span", { children: "No countries found" })
157
- ] }) : i.filteredItems.map((t) => {
158
- const m = i.isSelected(t);
159
- return /* @__PURE__ */ c(
160
- "li",
161
- {
162
- role: "option",
163
- "aria-selected": m,
164
- className: `rck-item${m ? " rck-item-selected" : ""}`,
165
- onClick: () => i.toggleItem(t),
166
- tabIndex: 0,
167
- onKeyDown: (y) => y.key === "Enter" && i.toggleItem(t),
168
- children: [
169
- /* @__PURE__ */ e("div", { className: m ? "rck-item-check-multi" : "rck-item-check-empty", children: m && /* @__PURE__ */ e(j, {}) }),
170
- a && /* @__PURE__ */ e("span", { className: "rck-item-flag", children: /* @__PURE__ */ e(C, { iso2: t.iso2, flag: t.flag, flagUrl: t.flag_url }) }),
171
- /* @__PURE__ */ c("div", { className: "rck-item-main", children: [
172
- /* @__PURE__ */ e("span", { className: "rck-item-name", children: t.name }),
173
- /* @__PURE__ */ c("span", { className: "rck-item-sub", children: [
174
- t.iso3,
175
- " ยท +",
176
- t.phone_code
177
- ] })
178
- ] })
179
- ]
180
- },
181
- t.iso2
182
- );
183
- }) })
184
- ] })
185
- ] });
222
+ }),
223
+ c.isOpen && /* @__PURE__ */ n("div", {
224
+ className: "rck-dropdown",
225
+ role: "listbox",
226
+ "aria-multiselectable": "true",
227
+ children: [h && /* @__PURE__ */ e(N, {
228
+ value: c.searchQuery,
229
+ onChange: c.setSearchQuery,
230
+ placeholder: "Search countries..."
231
+ }), /* @__PURE__ */ e("ul", {
232
+ className: "rck-list",
233
+ children: c.filteredItems.length === 0 ? /* @__PURE__ */ n("li", {
234
+ className: "rck-empty",
235
+ children: [/* @__PURE__ */ e("span", {
236
+ className: "rck-empty-icon",
237
+ children: "๐ŸŒ"
238
+ }), /* @__PURE__ */ e("span", { children: "No countries found" })]
239
+ }) : c.filteredItems.map((s) => {
240
+ const d = c.isSelected(s);
241
+ return /* @__PURE__ */ n("li", {
242
+ role: "option",
243
+ "aria-selected": d,
244
+ className: `rck-item${d ? " rck-item-selected" : ""}`,
245
+ onClick: () => c.toggleItem(s),
246
+ tabIndex: 0,
247
+ onKeyDown: (v) => v.key === "Enter" && c.toggleItem(s),
248
+ children: [
249
+ /* @__PURE__ */ e("div", {
250
+ className: d ? "rck-item-check-multi" : "rck-item-check-empty",
251
+ children: d && /* @__PURE__ */ e(j, {})
252
+ }),
253
+ o && /* @__PURE__ */ e("span", {
254
+ className: "rck-item-flag",
255
+ children: /* @__PURE__ */ e(b, {
256
+ iso2: s.iso2,
257
+ flag: s.flag,
258
+ flagUrl: s.flag_url
259
+ })
260
+ }),
261
+ /* @__PURE__ */ n("div", {
262
+ className: "rck-item-main",
263
+ children: [/* @__PURE__ */ e("span", {
264
+ className: "rck-item-name",
265
+ children: s.name
266
+ }), /* @__PURE__ */ n("span", {
267
+ className: "rck-item-sub",
268
+ children: [
269
+ s.iso3,
270
+ " ยท +",
271
+ s.phone_code
272
+ ]
273
+ })]
274
+ })
275
+ ]
276
+ }, s.iso2);
277
+ })
278
+ })]
279
+ })
280
+ ]
281
+ });
186
282
  }
187
- const M = () => /* @__PURE__ */ e(
188
- "svg",
189
- {
190
- className: "rck-chevron",
191
- viewBox: "0 0 20 20",
192
- fill: "none",
193
- stroke: "currentColor",
194
- strokeWidth: "2",
195
- strokeLinecap: "round",
196
- strokeLinejoin: "round",
197
- children: /* @__PURE__ */ e("polyline", { points: "5 8 10 13 15 8" })
198
- }
199
- );
200
- function v({
201
- isOpen: n,
202
- onClose: o,
203
- onToggle: k,
204
- label: h,
205
- disabled: a,
206
- className: d,
207
- triggerContent: u,
208
- children: g,
209
- id: r
210
- }) {
211
- const i = x(null);
283
+ var M = () => /* @__PURE__ */ e("svg", {
284
+ className: "rck-chevron",
285
+ viewBox: "0 0 20 20",
286
+ fill: "none",
287
+ stroke: "currentColor",
288
+ strokeWidth: "2",
289
+ strokeLinecap: "round",
290
+ strokeLinejoin: "round",
291
+ children: /* @__PURE__ */ e("polyline", { points: "5 8 10 13 15 8" })
292
+ });
293
+ function x({ isOpen: i, onClose: a, onToggle: p, label: m, disabled: o, className: h, triggerContent: u, children: g, id: r }) {
294
+ const c = C(null);
212
295
  return f(() => {
213
- if (!n) return;
214
- const s = (l) => {
215
- i.current && !i.current.contains(l.target) && o();
296
+ if (!i) return;
297
+ const l = (t) => {
298
+ c.current && !c.current.contains(t.target) && a();
216
299
  };
217
- return document.addEventListener("mousedown", s), () => document.removeEventListener("mousedown", s);
218
- }, [n, o]), f(() => {
219
- if (!n) return;
220
- const s = (l) => {
221
- l.key === "Escape" && o();
300
+ return document.addEventListener("mousedown", l), () => document.removeEventListener("mousedown", l);
301
+ }, [i, a]), f(() => {
302
+ if (!i) return;
303
+ const l = (t) => {
304
+ t.key === "Escape" && a();
222
305
  };
223
- return document.addEventListener("keydown", s), () => document.removeEventListener("keydown", s);
224
- }, [n, o]), /* @__PURE__ */ c("div", { ref: i, className: `rck-picker${d ? ` ${d}` : ""}`, children: [
225
- h && /* @__PURE__ */ e("span", { className: "rck-label", id: r ? `${r}-label` : void 0, children: h }),
226
- /* @__PURE__ */ c(
227
- "button",
228
- {
306
+ return document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l);
307
+ }, [i, a]), /* @__PURE__ */ n("div", {
308
+ ref: c,
309
+ className: `rck-picker${h ? ` ${h}` : ""}`,
310
+ children: [
311
+ m && /* @__PURE__ */ e("span", {
312
+ className: "rck-label",
313
+ id: r ? `${r}-label` : void 0,
314
+ children: m
315
+ }),
316
+ /* @__PURE__ */ n("button", {
229
317
  type: "button",
230
- className: `rck-trigger${n ? " rck-open" : ""}`,
231
- disabled: a,
318
+ className: `rck-trigger${i ? " rck-open" : ""}`,
319
+ disabled: o,
232
320
  "aria-haspopup": "listbox",
233
- "aria-expanded": n,
234
- "aria-labelledby": r && h ? `${r}-label` : void 0,
321
+ "aria-expanded": i,
322
+ "aria-labelledby": r && m ? `${r}-label` : void 0,
235
323
  id: r,
236
- onClick: k,
237
- children: [
238
- u,
239
- /* @__PURE__ */ e(M, {})
240
- ]
241
- }
242
- ),
243
- n && /* @__PURE__ */ e("div", { className: "rck-dropdown", role: "listbox", children: g })
244
- ] });
324
+ onClick: p,
325
+ children: [u, /* @__PURE__ */ e(M, {})]
326
+ }),
327
+ i && /* @__PURE__ */ e("div", {
328
+ className: "rck-dropdown",
329
+ role: "listbox",
330
+ children: g
331
+ })
332
+ ]
333
+ });
245
334
  }
246
- const T = () => /* @__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" }) });
247
- function J({
248
- value: n,
249
- onChange: o,
250
- placeholder: k = "Select a country",
251
- searchable: h = !0,
252
- showFlag: a = !0,
253
- showPhoneCode: d = !1,
254
- disabled: u = !1,
255
- className: g,
256
- label: r
257
- }) {
258
- const i = E(n, o), s = /* @__PURE__ */ e("div", { className: "rck-trigger-content", children: n ? /* @__PURE__ */ c(b, { children: [
259
- a && /* @__PURE__ */ e("span", { className: "rck-flag", children: /* @__PURE__ */ e(C, { iso2: n.iso2, flag: n.flag, flagUrl: n.flag_url }) }),
260
- /* @__PURE__ */ e("span", { className: "rck-trigger-text", children: n.name }),
261
- d && /* @__PURE__ */ c("span", { className: "rck-badge", children: [
262
- "+",
263
- n.phone_code
264
- ] })
265
- ] }) : /* @__PURE__ */ e("span", { className: "rck-trigger-text rck-placeholder", children: k }) });
266
- return /* @__PURE__ */ c(
267
- v,
268
- {
269
- isOpen: i.isOpen,
270
- onClose: i.close,
271
- onToggle: i.toggle,
272
- label: r,
273
- disabled: u,
274
- className: g,
275
- triggerContent: s,
276
- id: "rck-country-picker",
277
- children: [
278
- h && /* @__PURE__ */ e(
279
- N,
280
- {
281
- value: i.searchQuery,
282
- onChange: i.setSearchQuery,
283
- placeholder: "Search country..."
284
- }
285
- ),
286
- /* @__PURE__ */ e("ul", { className: "rck-list", role: "listbox", "aria-label": "Countries", children: i.filteredItems.length === 0 ? /* @__PURE__ */ c("li", { className: "rck-empty", children: [
287
- /* @__PURE__ */ e("span", { className: "rck-empty-icon", children: "๐ŸŒ" }),
288
- /* @__PURE__ */ e("span", { children: "No countries found" })
289
- ] }) : i.filteredItems.map((l) => {
290
- const p = (n == null ? void 0 : n.iso2) === l.iso2;
291
- return /* @__PURE__ */ c(
292
- "li",
293
- {
294
- role: "option",
295
- "aria-selected": p,
296
- className: `rck-item${p ? " rck-item-selected" : ""}`,
297
- onClick: () => i.selectItem(l),
298
- tabIndex: 0,
299
- onKeyDown: (t) => t.key === "Enter" && i.selectItem(l),
300
- children: [
301
- a && /* @__PURE__ */ e("span", { className: "rck-item-flag", children: /* @__PURE__ */ e(C, { iso2: l.iso2, flag: l.flag, flagUrl: l.flag_url }) }),
302
- /* @__PURE__ */ c("div", { className: "rck-item-main", children: [
303
- /* @__PURE__ */ e("span", { className: "rck-item-name", children: l.name }),
304
- /* @__PURE__ */ c("span", { className: "rck-item-sub", children: [
305
- l.iso3,
306
- " ยท ",
307
- l.division_type
308
- ] })
309
- ] }),
310
- /* @__PURE__ */ c("div", { className: "rck-item-right", children: [
311
- d && /* @__PURE__ */ c("span", { className: "rck-item-phone", children: [
312
- "+",
313
- l.phone_code
314
- ] }),
315
- p && /* @__PURE__ */ e(T, {})
316
- ] })
317
- ]
318
- },
319
- l.iso2
320
- );
321
- }) })
322
- ]
323
- }
324
- );
335
+ var T = () => /* @__PURE__ */ e("svg", {
336
+ className: "rck-item-check",
337
+ viewBox: "0 0 20 20",
338
+ fill: "none",
339
+ stroke: "currentColor",
340
+ strokeWidth: "2.5",
341
+ strokeLinecap: "round",
342
+ strokeLinejoin: "round",
343
+ children: /* @__PURE__ */ e("polyline", { points: "4 10 8 14 16 6" })
344
+ });
345
+ function J({ value: i, onChange: a, placeholder: p = "Select a country", searchable: m = !0, showFlag: o = !0, showPhoneCode: h = !1, disabled: u = !1, className: g, label: r }) {
346
+ const c = O(i, a), l = /* @__PURE__ */ e("div", {
347
+ className: "rck-trigger-content",
348
+ children: i ? /* @__PURE__ */ n(y, { children: [
349
+ o && /* @__PURE__ */ e("span", {
350
+ className: "rck-flag",
351
+ children: /* @__PURE__ */ e(b, {
352
+ iso2: i.iso2,
353
+ flag: i.flag,
354
+ flagUrl: i.flag_url
355
+ })
356
+ }),
357
+ /* @__PURE__ */ e("span", {
358
+ className: "rck-trigger-text",
359
+ children: i.name
360
+ }),
361
+ h && /* @__PURE__ */ n("span", {
362
+ className: "rck-badge",
363
+ children: ["+", i.phone_code]
364
+ })
365
+ ] }) : /* @__PURE__ */ e("span", {
366
+ className: "rck-trigger-text rck-placeholder",
367
+ children: p
368
+ })
369
+ });
370
+ return /* @__PURE__ */ n(x, {
371
+ isOpen: c.isOpen,
372
+ onClose: c.close,
373
+ onToggle: c.toggle,
374
+ label: r,
375
+ disabled: u,
376
+ className: g,
377
+ triggerContent: l,
378
+ id: "rck-country-picker",
379
+ children: [m && /* @__PURE__ */ e(N, {
380
+ value: c.searchQuery,
381
+ onChange: c.setSearchQuery,
382
+ placeholder: "Search country..."
383
+ }), /* @__PURE__ */ e("ul", {
384
+ className: "rck-list",
385
+ role: "listbox",
386
+ "aria-label": "Countries",
387
+ children: c.filteredItems.length === 0 ? /* @__PURE__ */ n("li", {
388
+ className: "rck-empty",
389
+ children: [/* @__PURE__ */ e("span", {
390
+ className: "rck-empty-icon",
391
+ children: "๐ŸŒ"
392
+ }), /* @__PURE__ */ e("span", { children: "No countries found" })]
393
+ }) : c.filteredItems.map((t) => {
394
+ const k = i?.iso2 === t.iso2;
395
+ return /* @__PURE__ */ n("li", {
396
+ role: "option",
397
+ "aria-selected": k,
398
+ className: `rck-item${k ? " rck-item-selected" : ""}`,
399
+ onClick: () => c.selectItem(t),
400
+ tabIndex: 0,
401
+ onKeyDown: (s) => s.key === "Enter" && c.selectItem(t),
402
+ children: [
403
+ o && /* @__PURE__ */ e("span", {
404
+ className: "rck-item-flag",
405
+ children: /* @__PURE__ */ e(b, {
406
+ iso2: t.iso2,
407
+ flag: t.flag,
408
+ flagUrl: t.flag_url
409
+ })
410
+ }),
411
+ /* @__PURE__ */ n("div", {
412
+ className: "rck-item-main",
413
+ children: [/* @__PURE__ */ e("span", {
414
+ className: "rck-item-name",
415
+ children: t.name
416
+ }), /* @__PURE__ */ n("span", {
417
+ className: "rck-item-sub",
418
+ children: [
419
+ t.iso3,
420
+ " ยท ",
421
+ t.division_type
422
+ ]
423
+ })]
424
+ }),
425
+ /* @__PURE__ */ n("div", {
426
+ className: "rck-item-right",
427
+ children: [h && /* @__PURE__ */ n("span", {
428
+ className: "rck-item-phone",
429
+ children: ["+", t.phone_code]
430
+ }), k && /* @__PURE__ */ e(T, {})]
431
+ })
432
+ ]
433
+ }, t.iso2);
434
+ })
435
+ })]
436
+ });
325
437
  }
326
- const I = 3;
438
+ var I = 3;
327
439
  function K() {
328
- 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" }) });
440
+ return /* @__PURE__ */ e("svg", {
441
+ viewBox: "0 0 20 20",
442
+ fill: "none",
443
+ stroke: "currentColor",
444
+ strokeWidth: "2.5",
445
+ strokeLinecap: "round",
446
+ strokeLinejoin: "round",
447
+ children: /* @__PURE__ */ e("polyline", { points: "4 10 8 14 16 6" })
448
+ });
329
449
  }
330
- function Y({
331
- value: n,
332
- onChange: o,
333
- placeholder: k = "Select currencies...",
334
- maxItems: h,
335
- showSymbol: a = !0,
336
- searchable: d = !0,
337
- disabled: u = !1,
338
- className: g,
339
- label: r
340
- }) {
341
- const i = L(
342
- _(),
343
- (t, m) => m ? O(m) : t,
344
- (t) => t.code,
345
- n,
346
- o,
347
- h
348
- ), s = x(null);
450
+ function Y({ value: i, onChange: a, placeholder: p = "Select currencies...", maxItems: m, showSymbol: o = !0, searchable: h = !0, disabled: u = !1, className: g, label: r }) {
451
+ const c = L($(), (s, d) => d ? _(d) : s, (s) => s.code, i, a, m), l = C(null);
349
452
  f(() => {
350
- if (!i.isOpen) return;
351
- const t = (m) => {
352
- s.current && !s.current.contains(m.target) && i.close();
453
+ if (!c.isOpen) return;
454
+ const s = (d) => {
455
+ l.current && !l.current.contains(d.target) && c.close();
353
456
  };
354
- return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
355
- }, [i.isOpen, i.close]), f(() => {
356
- if (!i.isOpen) return;
357
- const t = (m) => {
358
- m.key === "Escape" && i.close();
457
+ return document.addEventListener("mousedown", s), () => document.removeEventListener("mousedown", s);
458
+ }, [c.isOpen, c.close]), f(() => {
459
+ if (!c.isOpen) return;
460
+ const s = (d) => {
461
+ d.key === "Escape" && c.close();
359
462
  };
360
- return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
361
- }, [i.isOpen, i.close]);
362
- const l = n.slice(0, I), p = n.length - I;
363
- return /* @__PURE__ */ c("div", { ref: s, className: `rck-picker${g ? ` ${g}` : ""}`, children: [
364
- r && /* @__PURE__ */ e("span", { className: "rck-label", children: r }),
365
- /* @__PURE__ */ c(
366
- "button",
367
- {
463
+ return document.addEventListener("keydown", s), () => document.removeEventListener("keydown", s);
464
+ }, [c.isOpen, c.close]);
465
+ const t = i.slice(0, I), k = i.length - I;
466
+ return /* @__PURE__ */ n("div", {
467
+ ref: l,
468
+ className: `rck-picker${g ? ` ${g}` : ""}`,
469
+ children: [
470
+ r && /* @__PURE__ */ e("span", {
471
+ className: "rck-label",
472
+ children: r
473
+ }),
474
+ /* @__PURE__ */ n("button", {
368
475
  type: "button",
369
- className: `rck-multiselect-trigger${i.isOpen ? " rck-open" : ""}`,
476
+ className: `rck-multiselect-trigger${c.isOpen ? " rck-open" : ""}`,
370
477
  disabled: u,
371
- onClick: i.toggle,
478
+ onClick: c.toggle,
372
479
  "aria-haspopup": "listbox",
373
- "aria-expanded": i.isOpen,
480
+ "aria-expanded": c.isOpen,
374
481
  children: [
375
- /* @__PURE__ */ e("div", { className: "rck-chips-area", children: n.length === 0 ? /* @__PURE__ */ e("span", { style: { color: "var(--rck-text-placeholder)", fontSize: "0.9375rem" }, children: k }) : /* @__PURE__ */ c(b, { children: [
376
- l.map((t) => /* @__PURE__ */ c("span", { className: "rck-chip", children: [
377
- a && /* @__PURE__ */ e("span", { children: t.symbol }),
378
- /* @__PURE__ */ e("span", { className: "rck-chip-label", children: t.code }),
379
- /* @__PURE__ */ e(
380
- "button",
381
- {
482
+ /* @__PURE__ */ e("div", {
483
+ className: "rck-chips-area",
484
+ children: i.length === 0 ? /* @__PURE__ */ e("span", {
485
+ style: {
486
+ color: "var(--rck-text-placeholder)",
487
+ fontSize: "0.9375rem"
488
+ },
489
+ children: p
490
+ }) : /* @__PURE__ */ n(y, { children: [t.map((s) => /* @__PURE__ */ n("span", {
491
+ className: "rck-chip",
492
+ children: [
493
+ o && /* @__PURE__ */ e("span", { children: s.symbol }),
494
+ /* @__PURE__ */ e("span", {
495
+ className: "rck-chip-label",
496
+ children: s.code
497
+ }),
498
+ /* @__PURE__ */ e("button", {
382
499
  type: "button",
383
500
  className: "rck-chip-remove",
384
- onClick: (m) => {
385
- m.stopPropagation(), o(n.filter((y) => y.code !== t.code));
501
+ onClick: (d) => {
502
+ d.stopPropagation(), a(i.filter((v) => v.code !== s.code));
386
503
  },
387
- "aria-label": `Remove ${t.code}`,
388
- children: /* @__PURE__ */ c("svg", { width: "10", height: "10", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: [
389
- /* @__PURE__ */ e("line", { x1: "5", y1: "5", x2: "15", y2: "15" }),
390
- /* @__PURE__ */ e("line", { x1: "15", y1: "5", x2: "5", y2: "15" })
391
- ] })
392
- }
393
- )
394
- ] }, t.code)),
395
- p > 0 && /* @__PURE__ */ c("span", { className: "rck-chip-overflow", children: [
396
- "+",
397
- p,
398
- " more"
399
- ] })
400
- ] }) }),
401
- n.length > 0 && /* @__PURE__ */ e(
402
- "button",
403
- {
404
- type: "button",
405
- className: "rck-multiselect-clear",
406
- onClick: (t) => {
407
- t.stopPropagation(), i.clearAll(), o([]);
408
- },
409
- "aria-label": "Clear all",
410
- children: /* @__PURE__ */ c("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
411
- /* @__PURE__ */ e("line", { x1: "5", y1: "5", x2: "15", y2: "15" }),
412
- /* @__PURE__ */ e("line", { x1: "15", y1: "5", x2: "5", y2: "15" })
413
- ] })
414
- }
415
- ),
416
- /* @__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" }) })
417
- ]
418
- }
419
- ),
420
- i.isOpen && /* @__PURE__ */ c("div", { className: "rck-dropdown", role: "listbox", "aria-multiselectable": "true", children: [
421
- d && /* @__PURE__ */ e(N, { value: i.searchQuery, onChange: i.setSearchQuery, placeholder: "Search currencies..." }),
422
- /* @__PURE__ */ e("ul", { className: "rck-list", children: i.filteredItems.length === 0 ? /* @__PURE__ */ c("li", { className: "rck-empty", children: [
423
- /* @__PURE__ */ e("span", { className: "rck-empty-icon", children: "๐Ÿ’ฐ" }),
424
- /* @__PURE__ */ e("span", { children: "No currencies found" })
425
- ] }) : i.filteredItems.map((t) => {
426
- const m = i.isSelected(t);
427
- return /* @__PURE__ */ c(
428
- "li",
429
- {
430
- role: "option",
431
- "aria-selected": m,
432
- className: `rck-item${m ? " rck-item-selected" : ""}`,
433
- onClick: () => i.toggleItem(t),
434
- tabIndex: 0,
435
- onKeyDown: (y) => y.key === "Enter" && i.toggleItem(t),
436
- children: [
437
- /* @__PURE__ */ e("div", { className: m ? "rck-item-check-multi" : "rck-item-check-empty", children: m && /* @__PURE__ */ e(K, {}) }),
438
- a && /* @__PURE__ */ e("span", { className: "rck-item-symbol", children: t.symbol }),
439
- /* @__PURE__ */ c("div", { className: "rck-item-main", children: [
440
- /* @__PURE__ */ e("span", { className: "rck-item-name", children: t.name }),
441
- /* @__PURE__ */ e("span", { className: "rck-item-sub", children: t.code })
442
- ] })
443
- ]
444
- },
445
- t.code
446
- );
447
- }) })
448
- ] })
449
- ] });
450
- }
451
- 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" }) });
452
- function Z({
453
- value: n,
454
- onChange: o,
455
- placeholder: k = "Select a currency",
456
- searchable: h = !0,
457
- showSymbol: a = !0,
458
- disabled: d = !1,
459
- className: u,
460
- label: g
461
- }) {
462
- const r = B(n, o), i = /* @__PURE__ */ e("div", { className: "rck-trigger-content", children: n ? /* @__PURE__ */ c(b, { children: [
463
- a && /* @__PURE__ */ e("span", { className: "rck-item-symbol", children: n.symbol }),
464
- /* @__PURE__ */ c("span", { className: "rck-trigger-text", children: [
465
- n.code,
466
- " โ€” ",
467
- n.name
468
- ] })
469
- ] }) : /* @__PURE__ */ e("span", { className: "rck-trigger-text rck-placeholder", children: k }) });
470
- return /* @__PURE__ */ c(
471
- v,
472
- {
473
- isOpen: r.isOpen,
474
- onClose: r.close,
475
- onToggle: r.toggle,
476
- label: g,
477
- disabled: d,
478
- className: u,
479
- triggerContent: i,
480
- id: "rck-currency-picker",
481
- children: [
482
- h && /* @__PURE__ */ e(
483
- N,
484
- {
485
- value: r.searchQuery,
486
- onChange: r.setSearchQuery,
487
- placeholder: "Search currency..."
488
- }
489
- ),
490
- /* @__PURE__ */ e("ul", { className: "rck-list", role: "listbox", "aria-label": "Currencies", children: r.filteredItems.length === 0 ? /* @__PURE__ */ c("li", { className: "rck-empty", children: [
491
- /* @__PURE__ */ e("span", { className: "rck-empty-icon", children: "๐Ÿ’ฐ" }),
492
- /* @__PURE__ */ e("span", { children: "No currencies found" })
493
- ] }) : r.filteredItems.map((s) => {
494
- const l = (n == null ? void 0 : n.code) === s.code;
495
- return /* @__PURE__ */ c(
496
- "li",
497
- {
498
- role: "option",
499
- "aria-selected": l,
500
- className: `rck-item${l ? " rck-item-selected" : ""}`,
501
- onClick: () => r.selectItem(s),
502
- tabIndex: 0,
503
- onKeyDown: (p) => p.key === "Enter" && r.selectItem(s),
504
+ "aria-label": `Remove ${s.code}`,
505
+ children: /* @__PURE__ */ n("svg", {
506
+ width: "10",
507
+ height: "10",
508
+ viewBox: "0 0 20 20",
509
+ fill: "none",
510
+ stroke: "currentColor",
511
+ strokeWidth: "2.5",
512
+ strokeLinecap: "round",
513
+ children: [/* @__PURE__ */ e("line", {
514
+ x1: "5",
515
+ y1: "5",
516
+ x2: "15",
517
+ y2: "15"
518
+ }), /* @__PURE__ */ e("line", {
519
+ x1: "15",
520
+ y1: "5",
521
+ x2: "5",
522
+ y2: "15"
523
+ })]
524
+ })
525
+ })
526
+ ]
527
+ }, s.code)), k > 0 && /* @__PURE__ */ n("span", {
528
+ className: "rck-chip-overflow",
504
529
  children: [
505
- a && /* @__PURE__ */ e("span", { className: "rck-item-symbol", children: s.symbol }),
506
- /* @__PURE__ */ c("div", { className: "rck-item-main", children: [
507
- /* @__PURE__ */ e("span", { className: "rck-item-name", children: s.name }),
508
- /* @__PURE__ */ e("span", { className: "rck-item-sub", children: s.code })
509
- ] }),
510
- l && /* @__PURE__ */ e(R, {})
530
+ "+",
531
+ k,
532
+ " more"
511
533
  ]
534
+ })] })
535
+ }),
536
+ i.length > 0 && /* @__PURE__ */ e("button", {
537
+ type: "button",
538
+ className: "rck-multiselect-clear",
539
+ onClick: (s) => {
540
+ s.stopPropagation(), c.clearAll(), a([]);
512
541
  },
513
- s.code
514
- );
515
- }) })
516
- ]
517
- }
518
- );
519
- }
520
- const U = () => /* @__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" }) });
521
- function F({
522
- countryIso2: n,
523
- value: o,
524
- onChange: k,
525
- placeholder: h = "Select a division",
526
- searchable: a = !0,
527
- disabled: d = !1,
528
- className: u,
529
- label: g
530
- }) {
531
- const r = P(n, o, k), i = /* @__PURE__ */ e("div", { className: "rck-trigger-content", children: o ? /* @__PURE__ */ c(b, { children: [
532
- /* @__PURE__ */ e("span", { className: "rck-trigger-text", children: o.name }),
533
- /* @__PURE__ */ e("span", { className: "rck-badge", children: o.iso2 })
534
- ] }) : /* @__PURE__ */ e("span", { className: "rck-trigger-text rck-placeholder", children: h }) }), s = d || !n;
535
- return /* @__PURE__ */ c(
536
- v,
537
- {
538
- isOpen: r.isOpen,
539
- onClose: r.close,
540
- onToggle: r.toggle,
541
- label: g,
542
- disabled: s,
543
- className: u,
544
- triggerContent: i,
545
- id: "rck-division-picker",
546
- children: [
547
- a && /* @__PURE__ */ e(
548
- N,
549
- {
550
- value: r.searchQuery,
551
- onChange: r.setSearchQuery,
552
- placeholder: "Search division..."
553
- }
554
- ),
555
- /* @__PURE__ */ e("ul", { className: "rck-list", role: "listbox", "aria-label": "Divisions", children: r.filteredItems.length === 0 ? /* @__PURE__ */ c("li", { className: "rck-empty", children: [
556
- /* @__PURE__ */ e("span", { className: "rck-empty-icon", children: "๐Ÿ—บ๏ธ" }),
557
- /* @__PURE__ */ e("span", { children: "No divisions found" })
558
- ] }) : r.filteredItems.map((l) => {
559
- const p = (o == null ? void 0 : o.iso2) === l.iso2 && (o == null ? void 0 : o.name) === l.name;
560
- return /* @__PURE__ */ c(
561
- "li",
562
- {
542
+ "aria-label": "Clear all",
543
+ children: /* @__PURE__ */ n("svg", {
544
+ width: "14",
545
+ height: "14",
546
+ viewBox: "0 0 20 20",
547
+ fill: "none",
548
+ stroke: "currentColor",
549
+ strokeWidth: "2",
550
+ strokeLinecap: "round",
551
+ children: [/* @__PURE__ */ e("line", {
552
+ x1: "5",
553
+ y1: "5",
554
+ x2: "15",
555
+ y2: "15"
556
+ }), /* @__PURE__ */ e("line", {
557
+ x1: "15",
558
+ y1: "5",
559
+ x2: "5",
560
+ y2: "15"
561
+ })]
562
+ })
563
+ }),
564
+ /* @__PURE__ */ e("svg", {
565
+ className: "rck-chevron",
566
+ viewBox: "0 0 20 20",
567
+ fill: "none",
568
+ stroke: "currentColor",
569
+ strokeWidth: "2",
570
+ strokeLinecap: "round",
571
+ children: /* @__PURE__ */ e("polyline", { points: "5 8 10 13 15 8" })
572
+ })
573
+ ]
574
+ }),
575
+ c.isOpen && /* @__PURE__ */ n("div", {
576
+ className: "rck-dropdown",
577
+ role: "listbox",
578
+ "aria-multiselectable": "true",
579
+ children: [h && /* @__PURE__ */ e(N, {
580
+ value: c.searchQuery,
581
+ onChange: c.setSearchQuery,
582
+ placeholder: "Search currencies..."
583
+ }), /* @__PURE__ */ e("ul", {
584
+ className: "rck-list",
585
+ children: c.filteredItems.length === 0 ? /* @__PURE__ */ n("li", {
586
+ className: "rck-empty",
587
+ children: [/* @__PURE__ */ e("span", {
588
+ className: "rck-empty-icon",
589
+ children: "๐Ÿ’ฐ"
590
+ }), /* @__PURE__ */ e("span", { children: "No currencies found" })]
591
+ }) : c.filteredItems.map((s) => {
592
+ const d = c.isSelected(s);
593
+ return /* @__PURE__ */ n("li", {
563
594
  role: "option",
564
- "aria-selected": p,
565
- className: `rck-item${p ? " rck-item-selected" : ""}`,
566
- onClick: () => r.selectItem(l),
595
+ "aria-selected": d,
596
+ className: `rck-item${d ? " rck-item-selected" : ""}`,
597
+ onClick: () => c.toggleItem(s),
567
598
  tabIndex: 0,
568
- onKeyDown: (t) => t.key === "Enter" && r.selectItem(l),
599
+ onKeyDown: (v) => v.key === "Enter" && c.toggleItem(s),
569
600
  children: [
570
- /* @__PURE__ */ c("div", { className: "rck-item-main", children: [
571
- /* @__PURE__ */ e("span", { className: "rck-item-name", children: l.name }),
572
- /* @__PURE__ */ e("span", { className: "rck-item-sub", children: l.timezone })
573
- ] }),
574
- /* @__PURE__ */ c("div", { className: "rck-item-right", children: [
575
- /* @__PURE__ */ e("span", { className: "rck-badge", children: l.iso2 }),
576
- p && /* @__PURE__ */ e(U, {})
577
- ] })
601
+ /* @__PURE__ */ e("div", {
602
+ className: d ? "rck-item-check-multi" : "rck-item-check-empty",
603
+ children: d && /* @__PURE__ */ e(K, {})
604
+ }),
605
+ o && /* @__PURE__ */ e("span", {
606
+ className: "rck-item-symbol",
607
+ children: s.symbol
608
+ }),
609
+ /* @__PURE__ */ n("div", {
610
+ className: "rck-item-main",
611
+ children: [/* @__PURE__ */ e("span", {
612
+ className: "rck-item-name",
613
+ children: s.name
614
+ }), /* @__PURE__ */ e("span", {
615
+ className: "rck-item-sub",
616
+ children: s.code
617
+ })]
618
+ })
578
619
  ]
579
- },
580
- `${l.iso2}-${l.name}`
581
- );
582
- }) })
583
- ]
584
- }
585
- );
620
+ }, s.code);
621
+ })
622
+ })]
623
+ })
624
+ ]
625
+ });
586
626
  }
587
- const z = () => /* @__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" }) });
588
- function q({
589
- value: n,
590
- onChange: o,
591
- placeholder: k = "Select a language",
592
- searchable: h = !0,
593
- showNativeName: a = !0,
594
- disabled: d = !1,
595
- className: u,
596
- label: g
597
- }) {
598
- const r = W(n, o), i = /* @__PURE__ */ e("div", { className: "rck-trigger-content", children: n ? /* @__PURE__ */ c(b, { children: [
599
- /* @__PURE__ */ e("span", { className: "rck-trigger-text", children: n.english_name }),
600
- a && n.native_name !== n.english_name && /* @__PURE__ */ e("span", { className: "rck-native-name", children: n.native_name })
601
- ] }) : /* @__PURE__ */ e("span", { className: "rck-trigger-text rck-placeholder", children: k }) });
602
- return /* @__PURE__ */ c(
603
- v,
604
- {
605
- isOpen: r.isOpen,
606
- onClose: r.close,
607
- onToggle: r.toggle,
608
- label: g,
609
- disabled: d,
610
- className: u,
611
- triggerContent: i,
612
- id: "rck-language-picker",
627
+ var R = () => /* @__PURE__ */ e("svg", {
628
+ className: "rck-item-check",
629
+ viewBox: "0 0 20 20",
630
+ fill: "none",
631
+ stroke: "currentColor",
632
+ strokeWidth: "2.5",
633
+ strokeLinecap: "round",
634
+ strokeLinejoin: "round",
635
+ children: /* @__PURE__ */ e("polyline", { points: "4 10 8 14 16 6" })
636
+ });
637
+ function Z({ value: i, onChange: a, placeholder: p = "Select a currency", searchable: m = !0, showSymbol: o = !0, disabled: h = !1, className: u, label: g }) {
638
+ const r = B(i, a), c = /* @__PURE__ */ e("div", {
639
+ className: "rck-trigger-content",
640
+ children: i ? /* @__PURE__ */ n(y, { children: [o && /* @__PURE__ */ e("span", {
641
+ className: "rck-item-symbol",
642
+ children: i.symbol
643
+ }), /* @__PURE__ */ n("span", {
644
+ className: "rck-trigger-text",
613
645
  children: [
614
- h && /* @__PURE__ */ e(
615
- N,
616
- {
617
- value: r.searchQuery,
618
- onChange: r.setSearchQuery,
619
- placeholder: "Search language..."
620
- }
621
- ),
622
- /* @__PURE__ */ e("ul", { className: "rck-list", role: "listbox", "aria-label": "Languages", children: r.filteredItems.length === 0 ? /* @__PURE__ */ c("li", { className: "rck-empty", children: [
623
- /* @__PURE__ */ e("span", { className: "rck-empty-icon", children: "๐ŸŒ" }),
624
- /* @__PURE__ */ e("span", { children: "No languages found" })
625
- ] }) : r.filteredItems.map((s) => {
626
- const l = (n == null ? void 0 : n.code) === s.code;
627
- return /* @__PURE__ */ c(
628
- "li",
629
- {
630
- role: "option",
631
- "aria-selected": l,
632
- className: `rck-item${l ? " rck-item-selected" : ""}`,
633
- onClick: () => r.selectItem(s),
634
- tabIndex: 0,
635
- onKeyDown: (p) => p.key === "Enter" && r.selectItem(s),
636
- children: [
637
- /* @__PURE__ */ c("div", { className: "rck-item-main", children: [
638
- /* @__PURE__ */ e("span", { className: "rck-item-name", children: s.english_name }),
639
- a && s.native_name !== s.english_name && /* @__PURE__ */ e("span", { className: "rck-item-sub", children: s.native_name })
640
- ] }),
641
- /* @__PURE__ */ c("div", { className: "rck-item-right", children: [
642
- /* @__PURE__ */ e("span", { className: "rck-badge", style: { fontSize: "0.68rem" }, children: s.code }),
643
- l && /* @__PURE__ */ e(z, {})
644
- ] })
645
- ]
646
- },
647
- s.code
648
- );
649
- }) })
646
+ i.code,
647
+ " โ€” ",
648
+ i.name
650
649
  ]
651
- }
652
- );
650
+ })] }) : /* @__PURE__ */ e("span", {
651
+ className: "rck-trigger-text rck-placeholder",
652
+ children: p
653
+ })
654
+ });
655
+ return /* @__PURE__ */ n(x, {
656
+ isOpen: r.isOpen,
657
+ onClose: r.close,
658
+ onToggle: r.toggle,
659
+ label: g,
660
+ disabled: h,
661
+ className: u,
662
+ triggerContent: c,
663
+ id: "rck-currency-picker",
664
+ children: [m && /* @__PURE__ */ e(N, {
665
+ value: r.searchQuery,
666
+ onChange: r.setSearchQuery,
667
+ placeholder: "Search currency..."
668
+ }), /* @__PURE__ */ e("ul", {
669
+ className: "rck-list",
670
+ role: "listbox",
671
+ "aria-label": "Currencies",
672
+ children: r.filteredItems.length === 0 ? /* @__PURE__ */ n("li", {
673
+ className: "rck-empty",
674
+ children: [/* @__PURE__ */ e("span", {
675
+ className: "rck-empty-icon",
676
+ children: "๐Ÿ’ฐ"
677
+ }), /* @__PURE__ */ e("span", { children: "No currencies found" })]
678
+ }) : r.filteredItems.map((l) => {
679
+ const t = i?.code === l.code;
680
+ return /* @__PURE__ */ n("li", {
681
+ role: "option",
682
+ "aria-selected": t,
683
+ className: `rck-item${t ? " rck-item-selected" : ""}`,
684
+ onClick: () => r.selectItem(l),
685
+ tabIndex: 0,
686
+ onKeyDown: (k) => k.key === "Enter" && r.selectItem(l),
687
+ children: [
688
+ o && /* @__PURE__ */ e("span", {
689
+ className: "rck-item-symbol",
690
+ children: l.symbol
691
+ }),
692
+ /* @__PURE__ */ n("div", {
693
+ className: "rck-item-main",
694
+ children: [/* @__PURE__ */ e("span", {
695
+ className: "rck-item-name",
696
+ children: l.name
697
+ }), /* @__PURE__ */ e("span", {
698
+ className: "rck-item-sub",
699
+ children: l.code
700
+ })]
701
+ }),
702
+ t && /* @__PURE__ */ e(R, {})
703
+ ]
704
+ }, l.code);
705
+ })
706
+ })]
707
+ });
653
708
  }
654
- function ee({
655
- value: n,
656
- onChange: o,
657
- defaultCountryIso2: k = "US",
658
- placeholder: h = "Phone number",
659
- showFlag: a = !0,
660
- disabled: d = !1,
661
- className: u,
662
- label: g
663
- }) {
664
- const r = Q(n, o, k), i = x(null);
709
+ var U = () => /* @__PURE__ */ e("svg", {
710
+ className: "rck-item-check",
711
+ viewBox: "0 0 20 20",
712
+ fill: "none",
713
+ stroke: "currentColor",
714
+ strokeWidth: "2.5",
715
+ strokeLinecap: "round",
716
+ strokeLinejoin: "round",
717
+ children: /* @__PURE__ */ e("polyline", { points: "4 10 8 14 16 6" })
718
+ });
719
+ function F({ countryIso2: i, value: a, onChange: p, placeholder: m = "Select a division", searchable: o = !0, disabled: h = !1, className: u, label: g }) {
720
+ const r = P(i, a, p), c = /* @__PURE__ */ e("div", {
721
+ className: "rck-trigger-content",
722
+ children: a ? /* @__PURE__ */ n(y, { children: [/* @__PURE__ */ e("span", {
723
+ className: "rck-trigger-text",
724
+ children: a.name
725
+ }), /* @__PURE__ */ e("span", {
726
+ className: "rck-badge",
727
+ children: a.iso2
728
+ })] }) : /* @__PURE__ */ e("span", {
729
+ className: "rck-trigger-text rck-placeholder",
730
+ children: m
731
+ })
732
+ }), l = h || !i;
733
+ return /* @__PURE__ */ n(x, {
734
+ isOpen: r.isOpen,
735
+ onClose: r.close,
736
+ onToggle: r.toggle,
737
+ label: g,
738
+ disabled: l,
739
+ className: u,
740
+ triggerContent: c,
741
+ id: "rck-division-picker",
742
+ children: [o && /* @__PURE__ */ e(N, {
743
+ value: r.searchQuery,
744
+ onChange: r.setSearchQuery,
745
+ placeholder: "Search division..."
746
+ }), /* @__PURE__ */ e("ul", {
747
+ className: "rck-list",
748
+ role: "listbox",
749
+ "aria-label": "Divisions",
750
+ children: r.filteredItems.length === 0 ? /* @__PURE__ */ n("li", {
751
+ className: "rck-empty",
752
+ children: [/* @__PURE__ */ e("span", {
753
+ className: "rck-empty-icon",
754
+ children: "๐Ÿ—บ๏ธ"
755
+ }), /* @__PURE__ */ e("span", { children: "No divisions found" })]
756
+ }) : r.filteredItems.map((t) => {
757
+ const k = a?.iso2 === t.iso2 && a?.name === t.name;
758
+ return /* @__PURE__ */ n("li", {
759
+ role: "option",
760
+ "aria-selected": k,
761
+ className: `rck-item${k ? " rck-item-selected" : ""}`,
762
+ onClick: () => r.selectItem(t),
763
+ tabIndex: 0,
764
+ onKeyDown: (s) => s.key === "Enter" && r.selectItem(t),
765
+ children: [/* @__PURE__ */ n("div", {
766
+ className: "rck-item-main",
767
+ children: [/* @__PURE__ */ e("span", {
768
+ className: "rck-item-name",
769
+ children: t.name
770
+ }), /* @__PURE__ */ e("span", {
771
+ className: "rck-item-sub",
772
+ children: t.timezone
773
+ })]
774
+ }), /* @__PURE__ */ n("div", {
775
+ className: "rck-item-right",
776
+ children: [/* @__PURE__ */ e("span", {
777
+ className: "rck-badge",
778
+ children: t.iso2
779
+ }), k && /* @__PURE__ */ e(U, {})]
780
+ })]
781
+ }, `${t.iso2}-${t.name}`);
782
+ })
783
+ })]
784
+ });
785
+ }
786
+ var z = () => /* @__PURE__ */ e("svg", {
787
+ className: "rck-item-check",
788
+ viewBox: "0 0 20 20",
789
+ fill: "none",
790
+ stroke: "currentColor",
791
+ strokeWidth: "2.5",
792
+ strokeLinecap: "round",
793
+ strokeLinejoin: "round",
794
+ children: /* @__PURE__ */ e("polyline", { points: "4 10 8 14 16 6" })
795
+ });
796
+ function q({ value: i, onChange: a, placeholder: p = "Select a language", searchable: m = !0, showNativeName: o = !0, disabled: h = !1, className: u, label: g }) {
797
+ const r = W(i, a), c = /* @__PURE__ */ e("div", {
798
+ className: "rck-trigger-content",
799
+ children: i ? /* @__PURE__ */ n(y, { children: [/* @__PURE__ */ e("span", {
800
+ className: "rck-trigger-text",
801
+ children: i.english_name
802
+ }), o && i.native_name !== i.english_name && /* @__PURE__ */ e("span", {
803
+ className: "rck-native-name",
804
+ children: i.native_name
805
+ })] }) : /* @__PURE__ */ e("span", {
806
+ className: "rck-trigger-text rck-placeholder",
807
+ children: p
808
+ })
809
+ });
810
+ return /* @__PURE__ */ n(x, {
811
+ isOpen: r.isOpen,
812
+ onClose: r.close,
813
+ onToggle: r.toggle,
814
+ label: g,
815
+ disabled: h,
816
+ className: u,
817
+ triggerContent: c,
818
+ id: "rck-language-picker",
819
+ children: [m && /* @__PURE__ */ e(N, {
820
+ value: r.searchQuery,
821
+ onChange: r.setSearchQuery,
822
+ placeholder: "Search language..."
823
+ }), /* @__PURE__ */ e("ul", {
824
+ className: "rck-list",
825
+ role: "listbox",
826
+ "aria-label": "Languages",
827
+ children: r.filteredItems.length === 0 ? /* @__PURE__ */ n("li", {
828
+ className: "rck-empty",
829
+ children: [/* @__PURE__ */ e("span", {
830
+ className: "rck-empty-icon",
831
+ children: "๐ŸŒ"
832
+ }), /* @__PURE__ */ e("span", { children: "No languages found" })]
833
+ }) : r.filteredItems.map((l) => {
834
+ const t = i?.code === l.code;
835
+ return /* @__PURE__ */ n("li", {
836
+ role: "option",
837
+ "aria-selected": t,
838
+ className: `rck-item${t ? " rck-item-selected" : ""}`,
839
+ onClick: () => r.selectItem(l),
840
+ tabIndex: 0,
841
+ onKeyDown: (k) => k.key === "Enter" && r.selectItem(l),
842
+ children: [/* @__PURE__ */ n("div", {
843
+ className: "rck-item-main",
844
+ children: [/* @__PURE__ */ e("span", {
845
+ className: "rck-item-name",
846
+ children: l.english_name
847
+ }), o && l.native_name !== l.english_name && /* @__PURE__ */ e("span", {
848
+ className: "rck-item-sub",
849
+ children: l.native_name
850
+ })]
851
+ }), /* @__PURE__ */ n("div", {
852
+ className: "rck-item-right",
853
+ children: [/* @__PURE__ */ e("span", {
854
+ className: "rck-badge",
855
+ style: { fontSize: "0.68rem" },
856
+ children: l.code
857
+ }), t && /* @__PURE__ */ e(z, {})]
858
+ })]
859
+ }, l.code);
860
+ })
861
+ })]
862
+ });
863
+ }
864
+ function ee({ value: i, onChange: a, defaultCountryIso2: p = "US", placeholder: m = "Phone number", showFlag: o = !0, disabled: h = !1, className: u, label: g }) {
865
+ const r = Q(i, a, p), c = C(null);
665
866
  return f(() => {
666
867
  if (!r.isOpen) return;
667
- const s = (l) => {
668
- i.current && !i.current.contains(l.target) && r.close();
868
+ const l = (t) => {
869
+ c.current && !c.current.contains(t.target) && r.close();
669
870
  };
670
- return document.addEventListener("mousedown", s), () => document.removeEventListener("mousedown", s);
871
+ return document.addEventListener("mousedown", l), () => document.removeEventListener("mousedown", l);
671
872
  }, [r.isOpen, r.close]), f(() => {
672
873
  if (!r.isOpen) return;
673
- const s = (l) => {
674
- l.key === "Escape" && r.close();
874
+ const l = (t) => {
875
+ t.key === "Escape" && r.close();
675
876
  };
676
- return document.addEventListener("keydown", s), () => document.removeEventListener("keydown", s);
677
- }, [r.isOpen, r.close]), /* @__PURE__ */ c("div", { ref: i, className: `rck-phone-wrapper${u ? ` ${u}` : ""}`, children: [
678
- g && /* @__PURE__ */ e("span", { className: "rck-label", children: g }),
679
- /* @__PURE__ */ c("div", { className: `rck-phone-field${d ? " rck-phone-disabled" : ""}`, children: [
680
- /* @__PURE__ */ c(
681
- "button",
682
- {
877
+ return document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l);
878
+ }, [r.isOpen, r.close]), /* @__PURE__ */ n("div", {
879
+ ref: c,
880
+ className: `rck-phone-wrapper${u ? ` ${u}` : ""}`,
881
+ children: [g && /* @__PURE__ */ e("span", {
882
+ className: "rck-label",
883
+ children: g
884
+ }), /* @__PURE__ */ n("div", {
885
+ className: `rck-phone-field${h ? " rck-phone-disabled" : ""}`,
886
+ children: [
887
+ /* @__PURE__ */ n("button", {
683
888
  type: "button",
684
889
  className: "rck-phone-country-btn",
685
890
  onClick: r.toggle,
686
891
  "aria-expanded": r.isOpen,
687
892
  "aria-label": "Select country code",
688
- disabled: d,
893
+ disabled: h,
689
894
  children: [
690
- a && r.country && /* @__PURE__ */ e("span", { className: "rck-phone-flag", children: /* @__PURE__ */ e(C, { iso2: r.country.iso2, flag: r.country.flag, flagUrl: r.country.flag_url }) }),
691
- /* @__PURE__ */ e("span", { className: "rck-phone-dial", children: r.country ? `+${r.country.phone_code}` : "+?" }),
692
- /* @__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" }) })
895
+ o && r.country && /* @__PURE__ */ e("span", {
896
+ className: "rck-phone-flag",
897
+ children: /* @__PURE__ */ e(b, {
898
+ iso2: r.country.iso2,
899
+ flag: r.country.flag,
900
+ flagUrl: r.country.flag_url
901
+ })
902
+ }),
903
+ /* @__PURE__ */ e("span", {
904
+ className: "rck-phone-dial",
905
+ children: r.country ? `+${r.country.phone_code}` : "+?"
906
+ }),
907
+ /* @__PURE__ */ e("svg", {
908
+ className: "rck-phone-chevron",
909
+ viewBox: "0 0 20 20",
910
+ fill: "none",
911
+ stroke: "currentColor",
912
+ strokeWidth: "2",
913
+ strokeLinecap: "round",
914
+ children: /* @__PURE__ */ e("polyline", { points: "5 8 10 13 15 8" })
915
+ })
693
916
  ]
694
- }
695
- ),
696
- /* @__PURE__ */ e(
697
- "input",
698
- {
917
+ }),
918
+ /* @__PURE__ */ e("input", {
699
919
  type: "tel",
700
920
  className: "rck-phone-input",
701
921
  value: r.number,
702
- onChange: (s) => r.setNumber(s.target.value),
703
- placeholder: h,
704
- disabled: d,
922
+ onChange: (l) => r.setNumber(l.target.value),
923
+ placeholder: m,
924
+ disabled: h,
705
925
  inputMode: "numeric",
706
926
  autoComplete: "tel-national"
707
- }
708
- ),
709
- r.isOpen && /* @__PURE__ */ c("div", { className: "rck-phone-dropdown", children: [
710
- /* @__PURE__ */ e(
711
- N,
712
- {
927
+ }),
928
+ r.isOpen && /* @__PURE__ */ n("div", {
929
+ className: "rck-phone-dropdown",
930
+ children: [/* @__PURE__ */ e(N, {
713
931
  value: r.searchQuery,
714
932
  onChange: r.setSearchQuery,
715
933
  placeholder: "Search country or dial code..."
716
- }
717
- ),
718
- /* @__PURE__ */ e("ul", { className: "rck-list", role: "listbox", "aria-label": "Countries", children: r.filteredCountries.length === 0 ? /* @__PURE__ */ c("li", { className: "rck-empty", children: [
719
- /* @__PURE__ */ e("span", { className: "rck-empty-icon", children: "๐ŸŒ" }),
720
- /* @__PURE__ */ e("span", { children: "No countries found" })
721
- ] }) : r.filteredCountries.map((s) => {
722
- var p;
723
- const l = ((p = r.country) == null ? void 0 : p.iso2) === s.iso2;
724
- return /* @__PURE__ */ c(
725
- "li",
726
- {
727
- role: "option",
728
- "aria-selected": l,
729
- className: `rck-item${l ? " rck-item-selected" : ""}`,
730
- onClick: () => r.selectCountry(s),
731
- tabIndex: 0,
732
- onKeyDown: (t) => t.key === "Enter" && r.selectCountry(s),
733
- children: [
734
- /* @__PURE__ */ e("span", { className: "rck-item-flag", children: /* @__PURE__ */ e(C, { iso2: s.iso2, flag: s.flag, flagUrl: s.flag_url }) }),
735
- /* @__PURE__ */ c("div", { className: "rck-item-main", children: [
736
- /* @__PURE__ */ e("span", { className: "rck-item-name", children: s.name }),
737
- /* @__PURE__ */ e("span", { className: "rck-item-sub", children: s.iso2 })
738
- ] }),
739
- /* @__PURE__ */ c("span", { className: "rck-item-phone", children: [
740
- "+",
741
- s.phone_code
742
- ] })
743
- ]
744
- },
745
- s.iso2
746
- );
747
- }) })
748
- ] })
749
- ] })
750
- ] });
934
+ }), /* @__PURE__ */ e("ul", {
935
+ className: "rck-list",
936
+ role: "listbox",
937
+ "aria-label": "Countries",
938
+ children: r.filteredCountries.length === 0 ? /* @__PURE__ */ n("li", {
939
+ className: "rck-empty",
940
+ children: [/* @__PURE__ */ e("span", {
941
+ className: "rck-empty-icon",
942
+ children: "๐ŸŒ"
943
+ }), /* @__PURE__ */ e("span", { children: "No countries found" })]
944
+ }) : r.filteredCountries.map((l) => {
945
+ const t = r.country?.iso2 === l.iso2;
946
+ return /* @__PURE__ */ n("li", {
947
+ role: "option",
948
+ "aria-selected": t,
949
+ className: `rck-item${t ? " rck-item-selected" : ""}`,
950
+ onClick: () => r.selectCountry(l),
951
+ tabIndex: 0,
952
+ onKeyDown: (k) => k.key === "Enter" && r.selectCountry(l),
953
+ children: [
954
+ /* @__PURE__ */ e("span", {
955
+ className: "rck-item-flag",
956
+ children: /* @__PURE__ */ e(b, {
957
+ iso2: l.iso2,
958
+ flag: l.flag,
959
+ flagUrl: l.flag_url
960
+ })
961
+ }),
962
+ /* @__PURE__ */ n("div", {
963
+ className: "rck-item-main",
964
+ children: [/* @__PURE__ */ e("span", {
965
+ className: "rck-item-name",
966
+ children: l.name
967
+ }), /* @__PURE__ */ e("span", {
968
+ className: "rck-item-sub",
969
+ children: l.iso2
970
+ })]
971
+ }),
972
+ /* @__PURE__ */ n("span", {
973
+ className: "rck-item-phone",
974
+ children: ["+", l.phone_code]
975
+ })
976
+ ]
977
+ }, l.iso2);
978
+ })
979
+ })]
980
+ })
981
+ ]
982
+ })]
983
+ });
751
984
  }
752
- 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" }) });
753
- function re({
754
- value: n,
755
- onChange: o,
756
- placeholder: k = "Select a timezone",
757
- searchable: h = !0,
758
- countryIso2: a,
759
- disabled: d = !1,
760
- className: u,
761
- label: g
762
- }) {
763
- const r = D(n, o, a), i = /* @__PURE__ */ e("div", { className: "rck-trigger-content", children: n ? /* @__PURE__ */ c(b, { children: [
764
- /* @__PURE__ */ e("span", { className: "rck-trigger-text", children: n.name }),
765
- /* @__PURE__ */ e("span", { className: "rck-badge", children: n.offset_name })
766
- ] }) : /* @__PURE__ */ e("span", { className: "rck-trigger-text rck-placeholder", children: k }) });
767
- return /* @__PURE__ */ c(
768
- v,
769
- {
770
- isOpen: r.isOpen,
771
- onClose: r.close,
772
- onToggle: r.toggle,
773
- label: g,
774
- disabled: d,
775
- className: u,
776
- triggerContent: i,
777
- id: "rck-timezone-picker",
778
- children: [
779
- h && /* @__PURE__ */ e(
780
- N,
781
- {
782
- value: r.searchQuery,
783
- onChange: r.setSearchQuery,
784
- placeholder: "Search timezone..."
785
- }
786
- ),
787
- /* @__PURE__ */ e("ul", { className: "rck-list", role: "listbox", "aria-label": "Timezones", children: r.filteredItems.length === 0 ? /* @__PURE__ */ c("li", { className: "rck-empty", children: [
788
- /* @__PURE__ */ e("span", { className: "rck-empty-icon", children: "๐Ÿ•" }),
789
- /* @__PURE__ */ e("span", { children: "No timezones found" })
790
- ] }) : r.filteredItems.map((s) => {
791
- const l = (n == null ? void 0 : n.name) === s.name;
792
- return /* @__PURE__ */ c(
793
- "li",
794
- {
795
- role: "option",
796
- "aria-selected": l,
797
- className: `rck-item${l ? " rck-item-selected" : ""}`,
798
- onClick: () => r.selectItem(s),
799
- tabIndex: 0,
800
- onKeyDown: (p) => p.key === "Enter" && r.selectItem(s),
985
+ var A = () => /* @__PURE__ */ e("svg", {
986
+ className: "rck-item-check",
987
+ viewBox: "0 0 20 20",
988
+ fill: "none",
989
+ stroke: "currentColor",
990
+ strokeWidth: "2.5",
991
+ strokeLinecap: "round",
992
+ strokeLinejoin: "round",
993
+ children: /* @__PURE__ */ e("polyline", { points: "4 10 8 14 16 6" })
994
+ });
995
+ function re({ value: i, onChange: a, placeholder: p = "Select a timezone", searchable: m = !0, countryIso2: o, disabled: h = !1, className: u, label: g }) {
996
+ const r = D(i, a, o), c = /* @__PURE__ */ e("div", {
997
+ className: "rck-trigger-content",
998
+ children: i ? /* @__PURE__ */ n(y, { children: [/* @__PURE__ */ e("span", {
999
+ className: "rck-trigger-text",
1000
+ children: i.name
1001
+ }), /* @__PURE__ */ e("span", {
1002
+ className: "rck-badge",
1003
+ children: i.offset_name
1004
+ })] }) : /* @__PURE__ */ e("span", {
1005
+ className: "rck-trigger-text rck-placeholder",
1006
+ children: p
1007
+ })
1008
+ });
1009
+ return /* @__PURE__ */ n(x, {
1010
+ isOpen: r.isOpen,
1011
+ onClose: r.close,
1012
+ onToggle: r.toggle,
1013
+ label: g,
1014
+ disabled: h,
1015
+ className: u,
1016
+ triggerContent: c,
1017
+ id: "rck-timezone-picker",
1018
+ children: [m && /* @__PURE__ */ e(N, {
1019
+ value: r.searchQuery,
1020
+ onChange: r.setSearchQuery,
1021
+ placeholder: "Search timezone..."
1022
+ }), /* @__PURE__ */ e("ul", {
1023
+ className: "rck-list",
1024
+ role: "listbox",
1025
+ "aria-label": "Timezones",
1026
+ children: r.filteredItems.length === 0 ? /* @__PURE__ */ n("li", {
1027
+ className: "rck-empty",
1028
+ children: [/* @__PURE__ */ e("span", {
1029
+ className: "rck-empty-icon",
1030
+ children: "๐Ÿ•"
1031
+ }), /* @__PURE__ */ e("span", { children: "No timezones found" })]
1032
+ }) : r.filteredItems.map((l) => {
1033
+ const t = i?.name === l.name;
1034
+ return /* @__PURE__ */ n("li", {
1035
+ role: "option",
1036
+ "aria-selected": t,
1037
+ className: `rck-item${t ? " rck-item-selected" : ""}`,
1038
+ onClick: () => r.selectItem(l),
1039
+ tabIndex: 0,
1040
+ onKeyDown: (k) => k.key === "Enter" && r.selectItem(l),
1041
+ children: [/* @__PURE__ */ n("div", {
1042
+ className: "rck-item-main",
1043
+ children: [/* @__PURE__ */ e("span", {
1044
+ className: "rck-item-name",
1045
+ children: l.name
1046
+ }), /* @__PURE__ */ n("span", {
1047
+ className: "rck-item-sub",
801
1048
  children: [
802
- /* @__PURE__ */ c("div", { className: "rck-item-main", children: [
803
- /* @__PURE__ */ e("span", { className: "rck-item-name", children: s.name }),
804
- /* @__PURE__ */ c("span", { className: "rck-item-sub", children: [
805
- s.tzName,
806
- " ยท ",
807
- s.abbreviation
808
- ] })
809
- ] }),
810
- /* @__PURE__ */ c("div", { className: "rck-item-right", children: [
811
- /* @__PURE__ */ e("span", { className: "rck-offset-badge", children: s.offset_name }),
812
- l && /* @__PURE__ */ e(A, {})
813
- ] })
1049
+ l.tzName,
1050
+ " ยท ",
1051
+ l.abbreviation
814
1052
  ]
815
- },
816
- s.name
817
- );
818
- }) })
819
- ]
820
- }
821
- );
1053
+ })]
1054
+ }), /* @__PURE__ */ n("div", {
1055
+ className: "rck-item-right",
1056
+ children: [/* @__PURE__ */ e("span", {
1057
+ className: "rck-offset-badge",
1058
+ children: l.offset_name
1059
+ }), t && /* @__PURE__ */ e(A, {})]
1060
+ })]
1061
+ }, l.name);
1062
+ })
1063
+ })]
1064
+ });
822
1065
  }
823
1066
  export {
824
1067
  G as CountryMultiSelect,
@@ -830,4 +1073,5 @@ export {
830
1073
  ee as PhoneInput,
831
1074
  re as TimezonePicker
832
1075
  };
833
- //# sourceMappingURL=react-country-kit.es.js.map
1076
+
1077
+ //# sourceMappingURL=react-country-kit.es.js.map