@versaur/react 1.0.17 → 1.0.19

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 (3) hide show
  1. package/dist/forms.d.ts +67 -10
  2. package/dist/forms.js +544 -584
  3. package/package.json +2 -2
package/dist/forms.js CHANGED
@@ -1,224 +1,224 @@
1
- import { jsx as o, jsxs as I } from "react/jsx-runtime";
2
- import { labelStyles as Ee, helperTextStyles as je, errorTextStyles as Te, textInputStyles as T, textAreaStyles as ee, selectStyles as te, radioStyles as U, checkboxStyles as H, radioGroupStyles as ne, checkboxGroupStyles as oe, chipInputStyles as Y, comboboxInputStyles as C, selectableInputStyles as F, currencyInputStyles as L } from "@versaur/core/forms";
3
- import { forwardRef as f, useId as D, createContext as P, useContext as Q, useState as j, useEffect as M, useCallback as K, useRef as Le, useMemo as ae } from "react";
4
- import { u as g, I as Z, c as Fe, F as Pe } from "./helpers-D23F5WBX.js";
5
- import { c as x } from "./cx-B9vmfsc1.js";
6
- import { SearchIcon as Qe, MailIcon as Me, LockIcon as Ve, ChevronDownIcon as ze, CheckIcon as Ue } from "@versaur/icons";
7
- import { D as se } from "./drawer-BjNHPqBr.js";
8
- const k = f(
9
- ({ required: e = !1, disabled: i = !1, children: n, className: c, ...a }, s) => {
10
- const t = g({
11
- disabled: i,
1
+ import { jsx as o, jsxs as x, Fragment as je } from "react/jsx-runtime";
2
+ import { labelStyles as Ee, helperTextStyles as Te, errorTextStyles as Fe, textInputStyles as E, textAreaStyles as te, selectStyles as ne, radioStyles as z, checkboxStyles as U, radioGroupStyles as oe, checkboxGroupStyles as ae, chipInputStyles as Z, comboboxInputStyles as C, selectableInputStyles as F, currencyInputStyles as T } from "@versaur/core/forms";
3
+ import { forwardRef as f, useId as D, createContext as M, useContext as V, useState as P, useEffect as K, useCallback as H, useRef as Pe, useMemo as q } from "react";
4
+ import { u as N, I as ee, c as Me, F as Ve } from "./helpers-D23F5WBX.js";
5
+ import { c as y } from "./cx-B9vmfsc1.js";
6
+ import { SearchIcon as Le, MailIcon as ze, LockIcon as Ue, ChevronDownIcon as He, CheckIcon as Ke } from "@versaur/icons";
7
+ import { D as ie } from "./drawer-BjNHPqBr.js";
8
+ const R = f(
9
+ ({ required: e = !1, disabled: a = !1, children: n, className: s, ...c }, i) => {
10
+ const t = N({
11
+ disabled: a,
12
12
  required: e
13
13
  });
14
- return /* @__PURE__ */ o("label", { ref: s, className: x(Ee.label, c), ...t, ...a, children: n });
14
+ return /* @__PURE__ */ o("label", { ref: i, className: y(Ee.label, s), ...t, ...c, children: n });
15
15
  }
16
16
  );
17
- k.displayName = "Label";
18
- const R = f(({ children: e, className: i, ...n }, c) => /* @__PURE__ */ o("p", { ref: c, className: x(je.helper, i), ...n, children: e }));
19
- R.displayName = "HelperText";
20
- const A = f(({ children: e, className: i, ...n }, c) => /* @__PURE__ */ o("p", { ref: c, className: x(Te.error, i), role: "alert", "aria-live": "polite", ...n, children: e }));
21
- A.displayName = "ErrorText";
17
+ R.displayName = "Label";
18
+ const A = f(({ children: e, className: a, ...n }, s) => /* @__PURE__ */ o("p", { ref: s, className: y(Te.helper, a), ...n, children: e }));
19
+ A.displayName = "HelperText";
20
+ const G = f(({ children: e, className: a, ...n }, s) => /* @__PURE__ */ o("p", { ref: s, className: y(Fe.error, a), role: "alert", "aria-live": "polite", ...n, children: e }));
21
+ G.displayName = "ErrorText";
22
22
  const _ = f(
23
23
  ({
24
24
  label: e,
25
- helper: i,
25
+ helper: a,
26
26
  error: n,
27
- required: c = !1,
28
- disabled: a = !1,
29
- readOnly: s = !1,
27
+ required: s = !1,
28
+ disabled: c = !1,
29
+ readOnly: i = !1,
30
30
  leftIcon: t,
31
- rightIcon: r,
32
- id: l,
31
+ rightIcon: l,
32
+ id: r,
33
33
  className: d,
34
- ...u
35
- }, p) => {
36
- const b = D(), m = l || b, h = i ? `${m}-helper` : void 0, v = n ? `${m}-error` : void 0, y = [h, v].filter(Boolean).join(" "), N = g({
37
- disabled: a,
34
+ ...p
35
+ }, h) => {
36
+ const m = D(), u = r || m, b = a ? `${u}-helper` : void 0, v = n ? `${u}-error` : void 0, I = [b, v].filter(Boolean).join(" "), g = N({
37
+ disabled: c,
38
38
  hasLeftIcon: !!t,
39
- hasRightIcon: !!r,
39
+ hasRightIcon: !!l,
40
40
  invalid: !!n,
41
- readOnly: s
41
+ readOnly: i
42
42
  });
43
- return /* @__PURE__ */ I("div", { className: x(T.field, d), children: [
44
- e && /* @__PURE__ */ o(k, { htmlFor: m, required: c, disabled: a, children: e }),
45
- /* @__PURE__ */ I("div", { className: T.wrapper, ...N, children: [
46
- t && /* @__PURE__ */ o("span", { className: T["left-icon"], children: t }),
43
+ return /* @__PURE__ */ x("div", { className: y(E.field, d), children: [
44
+ e && /* @__PURE__ */ o(R, { htmlFor: u, required: s, disabled: c, children: e }),
45
+ /* @__PURE__ */ x("div", { className: E.wrapper, ...g, children: [
46
+ t && /* @__PURE__ */ o("span", { className: E["left-icon"], children: t }),
47
47
  /* @__PURE__ */ o(
48
48
  "input",
49
49
  {
50
- ref: p,
51
- id: m,
50
+ ref: h,
51
+ id: u,
52
52
  type: "text",
53
- className: T.input,
54
- disabled: a,
55
- readOnly: s,
56
- required: c,
53
+ className: E.input,
54
+ disabled: c,
55
+ readOnly: i,
56
+ required: s,
57
57
  "aria-invalid": n ? "true" : void 0,
58
- "aria-disabled": a ? "true" : void 0,
59
- "aria-describedby": y || void 0,
60
- ...u
58
+ "aria-disabled": c ? "true" : void 0,
59
+ "aria-describedby": I || void 0,
60
+ ...p
61
61
  }
62
62
  ),
63
- r && /* @__PURE__ */ o("span", { className: T["right-icon"], children: r })
63
+ l && /* @__PURE__ */ o("span", { className: E["right-icon"], children: l })
64
64
  ] }),
65
- n && /* @__PURE__ */ o(A, { id: v, children: n }),
66
- !n && i && /* @__PURE__ */ o(R, { id: h, children: i })
65
+ n && /* @__PURE__ */ o(G, { id: v, children: n }),
66
+ !n && a && /* @__PURE__ */ o(A, { id: b, children: a })
67
67
  ] });
68
68
  }
69
69
  );
70
70
  _.displayName = "TextInput";
71
- const He = f(({ leftIcon: e, ...i }, n) => /* @__PURE__ */ o(_, { ref: n, inputMode: "search", leftIcon: e ?? /* @__PURE__ */ o(Z, { as: Qe }), ...i }));
72
- He.displayName = "SearchInput";
73
- const Ke = f(({ leftIcon: e, ...i }, n) => /* @__PURE__ */ o(_, { ref: n, type: "email", inputMode: "email", leftIcon: e ?? /* @__PURE__ */ o(Z, { as: Me }), ...i }));
74
- Ke.displayName = "EmailInput";
75
- const _e = f(({ leftIcon: e, ...i }, n) => /* @__PURE__ */ o(_, { ref: n, type: "password", leftIcon: e ?? /* @__PURE__ */ o(Z, { as: Ve }), ...i }));
76
- _e.displayName = "PasswordInput";
77
- const Je = f(
71
+ const _e = f(({ leftIcon: e, ...a }, n) => /* @__PURE__ */ o(_, { ref: n, inputMode: "search", leftIcon: e ?? /* @__PURE__ */ o(ee, { as: Le }), ...a }));
72
+ _e.displayName = "SearchInput";
73
+ const Je = f(({ leftIcon: e, ...a }, n) => /* @__PURE__ */ o(_, { ref: n, type: "email", inputMode: "email", leftIcon: e ?? /* @__PURE__ */ o(ee, { as: ze }), ...a }));
74
+ Je.displayName = "EmailInput";
75
+ const Qe = f(({ leftIcon: e, ...a }, n) => /* @__PURE__ */ o(_, { ref: n, type: "password", leftIcon: e ?? /* @__PURE__ */ o(ee, { as: Ue }), ...a }));
76
+ Qe.displayName = "PasswordInput";
77
+ const We = f(
78
78
  ({
79
79
  label: e,
80
- helper: i,
80
+ helper: a,
81
81
  error: n,
82
- required: c = !1,
83
- disabled: a = !1,
84
- readOnly: s = !1,
82
+ required: s = !1,
83
+ disabled: c = !1,
84
+ readOnly: i = !1,
85
85
  resizable: t = !0,
86
- minRows: r = 3,
87
- maxRows: l,
86
+ minRows: l = 3,
87
+ maxRows: r,
88
88
  id: d,
89
- className: u,
90
- ...p
91
- }, b) => {
92
- const m = D(), h = d || m, v = i ? `${h}-helper` : void 0, y = n ? `${h}-error` : void 0, N = [v, y].filter(Boolean).join(" "), w = g({
93
- disabled: a,
89
+ className: p,
90
+ ...h
91
+ }, m) => {
92
+ const u = D(), b = d || u, v = a ? `${b}-helper` : void 0, I = n ? `${b}-error` : void 0, g = [v, I].filter(Boolean).join(" "), S = N({
93
+ disabled: c,
94
94
  invalid: !!n,
95
- readOnly: s,
95
+ readOnly: i,
96
96
  resizable: t ? "true" : "false",
97
97
  minRows: "true",
98
- ...l && { maxRows: "true" }
98
+ ...r && { maxRows: "true" }
99
99
  }), B = {
100
- "--_min-rows-count": r,
101
- ...l && { "--_max-rows-count": l }
100
+ "--_min-rows-count": l,
101
+ ...r && { "--_max-rows-count": r }
102
102
  };
103
- return /* @__PURE__ */ I("div", { className: x(ee.field, u), children: [
104
- e && /* @__PURE__ */ o(k, { htmlFor: h, required: c, disabled: a, children: e }),
103
+ return /* @__PURE__ */ x("div", { className: y(te.field, p), children: [
104
+ e && /* @__PURE__ */ o(R, { htmlFor: b, required: s, disabled: c, children: e }),
105
105
  /* @__PURE__ */ o(
106
106
  "textarea",
107
107
  {
108
- ref: b,
109
- id: h,
110
- className: ee.textarea,
111
- disabled: a,
112
- readOnly: s,
113
- required: c,
108
+ ref: m,
109
+ id: b,
110
+ className: te.textarea,
111
+ disabled: c,
112
+ readOnly: i,
113
+ required: s,
114
114
  style: B,
115
115
  "aria-invalid": n ? "true" : void 0,
116
- "aria-disabled": a ? "true" : void 0,
117
- "aria-describedby": N || void 0,
118
- ...w,
119
- ...p
116
+ "aria-disabled": c ? "true" : void 0,
117
+ "aria-describedby": g || void 0,
118
+ ...S,
119
+ ...h
120
120
  }
121
121
  ),
122
- n && /* @__PURE__ */ o(A, { id: y, children: n }),
123
- !n && i && /* @__PURE__ */ o(R, { id: v, children: i })
122
+ n && /* @__PURE__ */ o(G, { id: I, children: n }),
123
+ !n && a && /* @__PURE__ */ o(A, { id: v, children: a })
124
124
  ] });
125
125
  }
126
126
  );
127
- Je.displayName = "TextArea";
128
- const ie = f(({ children: e, ...i }, n) => /* @__PURE__ */ o("option", { ref: n, ...i, children: e }));
129
- ie.displayName = "Select.Option";
127
+ We.displayName = "TextArea";
128
+ const se = f(({ children: e, ...a }, n) => /* @__PURE__ */ o("option", { ref: n, ...a, children: e }));
129
+ se.displayName = "Select.Option";
130
130
  const ce = f(
131
- ({ label: e, children: i, ...n }, c) => /* @__PURE__ */ o("optgroup", { ref: c, label: e, ...n, children: i })
131
+ ({ label: e, children: a, ...n }, s) => /* @__PURE__ */ o("optgroup", { ref: s, label: e, ...n, children: a })
132
132
  );
133
133
  ce.displayName = "Select.OptionGroup";
134
- const re = f(
134
+ const le = f(
135
135
  ({
136
136
  label: e,
137
- helper: i,
137
+ helper: a,
138
138
  error: n,
139
- required: c = !1,
140
- disabled: a = !1,
141
- placeholder: s,
139
+ required: s = !1,
140
+ disabled: c = !1,
141
+ placeholder: i,
142
142
  children: t,
143
- id: r,
144
- className: l,
143
+ id: l,
144
+ className: r,
145
145
  ...d
146
- }, u) => {
147
- const p = D(), b = r || p, m = i ? `${b}-helper` : void 0, h = n ? `${b}-error` : void 0, v = [m, h].filter(Boolean).join(" "), y = g({
148
- disabled: a,
146
+ }, p) => {
147
+ const h = D(), m = l || h, u = a ? `${m}-helper` : void 0, b = n ? `${m}-error` : void 0, v = [u, b].filter(Boolean).join(" "), I = N({
148
+ disabled: c,
149
149
  invalid: !!n
150
150
  });
151
- return /* @__PURE__ */ I("div", { className: x(te.field, l), children: [
152
- e && /* @__PURE__ */ o(k, { htmlFor: b, required: c, disabled: a, children: e }),
153
- /* @__PURE__ */ I(
151
+ return /* @__PURE__ */ x("div", { className: y(ne.field, r), children: [
152
+ e && /* @__PURE__ */ o(R, { htmlFor: m, required: s, disabled: c, children: e }),
153
+ /* @__PURE__ */ x(
154
154
  "select",
155
155
  {
156
- ref: u,
157
- id: b,
158
- className: te.select,
159
- disabled: a,
160
- required: c,
156
+ ref: p,
157
+ id: m,
158
+ className: ne.select,
159
+ disabled: c,
160
+ required: s,
161
161
  "aria-invalid": n ? "true" : void 0,
162
- "aria-disabled": a ? "true" : void 0,
162
+ "aria-disabled": c ? "true" : void 0,
163
163
  "aria-describedby": v || void 0,
164
- ...y,
164
+ ...I,
165
165
  ...d,
166
166
  children: [
167
- s && /* @__PURE__ */ o("option", { value: "", disabled: !0, children: s }),
167
+ i && /* @__PURE__ */ o("option", { value: "", disabled: !0, children: i }),
168
168
  t
169
169
  ]
170
170
  }
171
171
  ),
172
- n && /* @__PURE__ */ o(A, { id: h, children: n }),
173
- !n && i && /* @__PURE__ */ o(R, { id: m, children: i })
172
+ n && /* @__PURE__ */ o(G, { id: b, children: n }),
173
+ !n && a && /* @__PURE__ */ o(A, { id: u, children: a })
174
174
  ] });
175
175
  }
176
176
  );
177
- re.displayName = "Select";
178
- const le = re;
179
- le.Option = ie;
180
- le.OptionGroup = ce;
177
+ le.displayName = "Select";
178
+ const re = le;
179
+ re.Option = se;
180
+ re.OptionGroup = ce;
181
181
  const de = f(
182
- ({ disabled: e = !1, children: i, className: n, ...c }, a) => {
183
- const s = g({
182
+ ({ disabled: e = !1, children: a, className: n, ...s }, c) => {
183
+ const i = N({
184
184
  disabled: e
185
185
  });
186
- return /* @__PURE__ */ I("label", { className: x(U.radio, n), ...s, children: [
187
- /* @__PURE__ */ o("input", { ref: a, type: "radio", className: U.input, disabled: e, ...c }),
188
- /* @__PURE__ */ o("span", { className: U.indicator }),
189
- i && /* @__PURE__ */ o("span", { className: U.label, children: i })
186
+ return /* @__PURE__ */ x("label", { className: y(z.radio, n), ...i, children: [
187
+ /* @__PURE__ */ o("input", { ref: c, type: "radio", className: z.input, disabled: e, ...s }),
188
+ /* @__PURE__ */ o("span", { className: z.indicator }),
189
+ a && /* @__PURE__ */ o("span", { className: z.label, children: a })
190
190
  ] });
191
191
  }
192
192
  );
193
193
  de.displayName = "Radio";
194
194
  const pe = f(
195
- ({ disabled: e = !1, required: i = !1, children: n, className: c, ...a }, s) => {
196
- const t = g({
195
+ ({ disabled: e = !1, required: a = !1, children: n, className: s, ...c }, i) => {
196
+ const t = N({
197
197
  disabled: e,
198
- required: i
198
+ required: a
199
199
  });
200
- return /* @__PURE__ */ I("label", { className: x(H.checkbox, c), ...t, children: [
200
+ return /* @__PURE__ */ x("label", { className: y(U.checkbox, s), ...t, children: [
201
201
  /* @__PURE__ */ o(
202
202
  "input",
203
203
  {
204
- ref: s,
204
+ ref: i,
205
205
  type: "checkbox",
206
- className: H.input,
206
+ className: U.input,
207
207
  disabled: e,
208
- required: i,
209
- "aria-required": i || void 0,
210
- ...a
208
+ required: a,
209
+ "aria-required": a || void 0,
210
+ ...c
211
211
  }
212
212
  ),
213
- /* @__PURE__ */ o("span", { className: H.indicator }),
214
- n && /* @__PURE__ */ o("span", { className: H.label, "data-required": i || void 0, children: n })
213
+ /* @__PURE__ */ o("span", { className: U.indicator }),
214
+ n && /* @__PURE__ */ o("span", { className: U.label, "data-required": a || void 0, children: n })
215
215
  ] });
216
216
  }
217
217
  );
218
218
  pe.displayName = "Checkbox";
219
- const ue = P(void 0);
220
- function We() {
221
- const e = Q(ue);
219
+ const ue = M(void 0);
220
+ function Xe() {
221
+ const e = V(ue);
222
222
  if (!e)
223
223
  throw new Error("RadioGroup.Option must be used within RadioGroup");
224
224
  return e;
@@ -226,68 +226,68 @@ function We() {
226
226
  const he = f(
227
227
  ({
228
228
  value: e,
229
- onChange: i,
229
+ onChange: a,
230
230
  name: n,
231
- label: c,
232
- helper: a,
233
- error: s,
231
+ label: s,
232
+ helper: c,
233
+ error: i,
234
234
  required: t = !1,
235
- disabled: r = !1,
236
- direction: l = "column",
235
+ disabled: l = !1,
236
+ direction: r = "column",
237
237
  children: d,
238
- className: u,
239
- ...p
240
- }, b) => {
241
- const m = D(), h = p.id || m, v = a ? `${h}-helper` : void 0, y = s ? `${h}-error` : void 0, N = [v, y].filter(Boolean).join(" "), w = (S) => {
242
- !r && i && i(S);
243
- }, B = g({
244
- disabled: r
238
+ className: p,
239
+ ...h
240
+ }, m) => {
241
+ const u = D(), b = h.id || u, v = c ? `${b}-helper` : void 0, I = i ? `${b}-error` : void 0, g = [v, I].filter(Boolean).join(" "), S = (w) => {
242
+ !l && a && a(w);
243
+ }, B = N({
244
+ disabled: l
245
245
  });
246
- return /* @__PURE__ */ I("div", { ref: b, className: x(ne.field, u), ...B, ...p, children: [
247
- c && /* @__PURE__ */ o(k, { required: t, disabled: r, children: c }),
248
- /* @__PURE__ */ o(ue.Provider, { value: { disabled: r, name: n, onChange: w, value: e }, children: /* @__PURE__ */ o(
246
+ return /* @__PURE__ */ x("div", { ref: m, className: y(oe.field, p), ...B, ...h, children: [
247
+ s && /* @__PURE__ */ o(R, { required: t, disabled: l, children: s }),
248
+ /* @__PURE__ */ o(ue.Provider, { value: { disabled: l, name: n, onChange: S, value: e }, children: /* @__PURE__ */ o(
249
249
  "div",
250
250
  {
251
- className: ne.options,
252
- "data-direction": l,
251
+ className: oe.options,
252
+ "data-direction": r,
253
253
  role: "radiogroup",
254
- "aria-describedby": N || void 0,
255
- "aria-invalid": s ? "true" : void 0,
254
+ "aria-describedby": g || void 0,
255
+ "aria-invalid": i ? "true" : void 0,
256
256
  children: d
257
257
  }
258
258
  ) }),
259
- s && /* @__PURE__ */ o(A, { id: y, children: s }),
260
- !s && a && /* @__PURE__ */ o(R, { id: v, children: a })
259
+ i && /* @__PURE__ */ o(G, { id: I, children: i }),
260
+ !i && c && /* @__PURE__ */ o(A, { id: v, children: c })
261
261
  ] });
262
262
  }
263
263
  );
264
264
  he.displayName = "RadioGroup";
265
265
  const me = f(
266
- ({ value: e, children: i, disabled: n, ...c }, a) => {
267
- const s = We(), t = s.value === e, r = s.disabled || n, l = () => {
268
- r || s.onChange(e);
266
+ ({ value: e, children: a, disabled: n, ...s }, c) => {
267
+ const i = Xe(), t = i.value === e, l = i.disabled || n, r = () => {
268
+ l || i.onChange(e);
269
269
  };
270
270
  return /* @__PURE__ */ o(
271
271
  de,
272
272
  {
273
- ref: a,
274
- name: s.name,
273
+ ref: c,
274
+ name: i.name,
275
275
  value: e,
276
276
  checked: t,
277
- disabled: r,
278
- onChange: l,
279
- ...c,
280
- children: i
277
+ disabled: l,
278
+ onChange: r,
279
+ ...s,
280
+ children: a
281
281
  }
282
282
  );
283
283
  }
284
284
  );
285
285
  me.displayName = "RadioGroup.Option";
286
- const dt = Object.assign(he, {
286
+ const pt = Object.assign(he, {
287
287
  Option: me
288
- }), be = P(void 0);
289
- function Xe() {
290
- const e = Q(be);
288
+ }), be = M(void 0);
289
+ function Ye() {
290
+ const e = V(be);
291
291
  if (!e)
292
292
  throw new Error("CheckboxGroup.Option must be used within CheckboxGroup");
293
293
  return e;
@@ -295,71 +295,71 @@ function Xe() {
295
295
  const fe = f(
296
296
  ({
297
297
  value: e,
298
- onChange: i,
298
+ onChange: a,
299
299
  name: n,
300
- label: c,
301
- helper: a,
302
- error: s,
300
+ label: s,
301
+ helper: c,
302
+ error: i,
303
303
  required: t = !1,
304
- disabled: r = !1,
305
- direction: l = "column",
304
+ disabled: l = !1,
305
+ direction: r = "column",
306
306
  children: d,
307
- className: u,
308
- ...p
309
- }, b) => {
310
- const m = D(), h = p.id || m, v = a ? `${h}-helper` : void 0, y = s ? `${h}-error` : void 0, N = [v, y].filter(Boolean).join(" "), w = (S) => {
311
- !r && i && i(S);
312
- }, B = g({
313
- disabled: r
307
+ className: p,
308
+ ...h
309
+ }, m) => {
310
+ const u = D(), b = h.id || u, v = c ? `${b}-helper` : void 0, I = i ? `${b}-error` : void 0, g = [v, I].filter(Boolean).join(" "), S = (w) => {
311
+ !l && a && a(w);
312
+ }, B = N({
313
+ disabled: l
314
314
  });
315
- return /* @__PURE__ */ I("div", { ref: b, className: x(oe.field, u), ...B, ...p, children: [
316
- c && /* @__PURE__ */ o(k, { required: t, disabled: r, children: c }),
317
- /* @__PURE__ */ o(be.Provider, { value: { disabled: r, name: n, onChange: w, value: e }, children: /* @__PURE__ */ o(
315
+ return /* @__PURE__ */ x("div", { ref: m, className: y(ae.field, p), ...B, ...h, children: [
316
+ s && /* @__PURE__ */ o(R, { required: t, disabled: l, children: s }),
317
+ /* @__PURE__ */ o(be.Provider, { value: { disabled: l, name: n, onChange: S, value: e }, children: /* @__PURE__ */ o(
318
318
  "div",
319
319
  {
320
- className: oe.options,
321
- "data-direction": l,
320
+ className: ae.options,
321
+ "data-direction": r,
322
322
  role: "group",
323
- "aria-describedby": N || void 0,
324
- "aria-invalid": s ? "true" : void 0,
323
+ "aria-describedby": g || void 0,
324
+ "aria-invalid": i ? "true" : void 0,
325
325
  children: d
326
326
  }
327
327
  ) }),
328
- s && /* @__PURE__ */ o(A, { id: y, children: s }),
329
- !s && a && /* @__PURE__ */ o(R, { id: v, children: a })
328
+ i && /* @__PURE__ */ o(G, { id: I, children: i }),
329
+ !i && c && /* @__PURE__ */ o(A, { id: v, children: c })
330
330
  ] });
331
331
  }
332
332
  );
333
333
  fe.displayName = "CheckboxGroup";
334
334
  const ve = f(
335
- ({ value: e, children: i, disabled: n, ...c }, a) => {
336
- const s = Xe(), t = s.value.includes(e), r = s.disabled || n, l = () => {
337
- if (!r) {
338
- const d = t ? s.value.filter((u) => u !== e) : [...s.value, e];
339
- s.onChange(d);
335
+ ({ value: e, children: a, disabled: n, ...s }, c) => {
336
+ const i = Ye(), t = i.value.includes(e), l = i.disabled || n, r = () => {
337
+ if (!l) {
338
+ const d = t ? i.value.filter((p) => p !== e) : [...i.value, e];
339
+ i.onChange(d);
340
340
  }
341
341
  };
342
342
  return /* @__PURE__ */ o(
343
343
  pe,
344
344
  {
345
- ref: a,
346
- name: s.name,
345
+ ref: c,
346
+ name: i.name,
347
347
  value: e,
348
348
  checked: t,
349
- disabled: r,
350
- onChange: l,
351
- ...c,
352
- children: i
349
+ disabled: l,
350
+ onChange: r,
351
+ ...s,
352
+ children: a
353
353
  }
354
354
  );
355
355
  }
356
356
  );
357
357
  ve.displayName = "CheckboxGroup.Option";
358
- const pt = Object.assign(fe, {
358
+ const ut = Object.assign(fe, {
359
359
  Option: ve
360
- }), ye = P(void 0);
361
- function Ye() {
362
- const e = Q(ye);
360
+ }), Ie = M(void 0);
361
+ function Ze() {
362
+ const e = V(Ie);
363
363
  if (!e)
364
364
  throw new Error("ChipInput.Option must be used within ChipInput");
365
365
  return e;
@@ -367,400 +367,360 @@ function Ye() {
367
367
  const xe = f(
368
368
  ({
369
369
  value: e,
370
- onChange: i,
370
+ onChange: a,
371
371
  multiple: n = !1,
372
- name: c,
373
- label: a,
374
- helper: s,
372
+ name: s,
373
+ label: c,
374
+ helper: i,
375
375
  error: t,
376
- required: r = !1,
377
- disabled: l = !1,
376
+ required: l = !1,
377
+ disabled: r = !1,
378
378
  gap: d = "2",
379
- wrap: u = !0,
380
- children: p,
381
- className: b,
382
- ...m
383
- }, h) => {
384
- const v = D(), y = m.id || v, N = s ? `${y}-helper` : void 0, w = t ? `${y}-error` : void 0, B = [N, w].filter(Boolean).join(" "), S = (E) => {
385
- l || i(E);
386
- }, $ = g({
379
+ wrap: p = !0,
380
+ children: h,
381
+ className: m,
382
+ ...u
383
+ }, b) => {
384
+ const v = D(), I = u.id || v, g = i ? `${I}-helper` : void 0, S = t ? `${I}-error` : void 0, B = [g, S].filter(Boolean).join(" "), w = ($) => {
385
+ r || a($);
386
+ }, j = N({
387
387
  invalid: !!t
388
- }), G = n ? "group" : "radiogroup";
389
- return /* @__PURE__ */ I("div", { ref: h, className: x(Y.field, b), ...$, ...m, children: [
390
- a && /* @__PURE__ */ o(k, { required: r, disabled: l, children: a }),
388
+ }), k = n ? "group" : "radiogroup";
389
+ return /* @__PURE__ */ x("div", { ref: b, className: y(Z.field, m), ...j, ...u, children: [
390
+ c && /* @__PURE__ */ o(R, { required: l, disabled: r, children: c }),
391
391
  /* @__PURE__ */ o(
392
- ye.Provider,
392
+ Ie.Provider,
393
393
  {
394
394
  value: {
395
- disabled: l,
395
+ disabled: r,
396
396
  multiple: n,
397
- name: c,
398
- onChange: S,
397
+ name: s,
398
+ onChange: w,
399
399
  value: e
400
400
  },
401
401
  children: /* @__PURE__ */ o(
402
402
  "div",
403
403
  {
404
- className: Y.options,
404
+ className: Z.options,
405
405
  "data-gap": d,
406
- "data-wrap": u,
407
- role: G,
406
+ "data-wrap": p,
407
+ role: k,
408
408
  "aria-describedby": B || void 0,
409
409
  "aria-invalid": t ? "true" : void 0,
410
- children: p
410
+ children: h
411
411
  }
412
412
  )
413
413
  }
414
414
  ),
415
- t && /* @__PURE__ */ o(A, { id: w, children: t }),
416
- !t && s && /* @__PURE__ */ o(R, { id: N, children: s })
415
+ t && /* @__PURE__ */ o(G, { id: S, children: t }),
416
+ !t && i && /* @__PURE__ */ o(A, { id: g, children: i })
417
417
  ] });
418
418
  }
419
419
  );
420
420
  xe.displayName = "ChipInput";
421
- const Ie = f(
422
- ({ value: e, children: i, disabled: n, iconLeft: c, iconRight: a, ...s }, t) => {
423
- const r = Ye(), l = r.disabled || n, d = !!(c || a);
424
- let u = !1;
425
- r.multiple ? u = Array.isArray(r.value) && r.value.includes(e) : u = r.value === e;
426
- const p = () => {
427
- if (!l)
428
- if (r.multiple) {
429
- const m = Array.isArray(r.value) ? r.value : [], h = u ? m.filter((v) => v !== e) : [...m, e];
430
- r.onChange(h);
421
+ const ye = f(
422
+ ({ value: e, children: a, disabled: n, iconLeft: s, iconRight: c, ...i }, t) => {
423
+ const l = Ze(), r = l.disabled || n, d = !!(s || c);
424
+ let p = !1;
425
+ l.multiple ? p = Array.isArray(l.value) && l.value.includes(e) : p = l.value === e;
426
+ const h = () => {
427
+ if (!r)
428
+ if (l.multiple) {
429
+ const u = Array.isArray(l.value) ? l.value : [], b = p ? u.filter((v) => v !== e) : [...u, e];
430
+ l.onChange(b);
431
431
  } else
432
- r.onChange(e);
433
- }, b = g({
434
- disabled: l,
435
- selected: u,
432
+ l.onChange(e);
433
+ }, m = N({
434
+ disabled: r,
435
+ selected: p,
436
436
  ...d && { "has-icon": !0 }
437
437
  });
438
- return /* @__PURE__ */ I(
438
+ return /* @__PURE__ */ x(
439
439
  "button",
440
440
  {
441
441
  ref: t,
442
442
  type: "button",
443
- className: Y.option,
444
- onClick: p,
445
- disabled: l,
446
- "aria-pressed": u,
447
- ...b,
448
- ...s,
443
+ className: Z.option,
444
+ onClick: h,
445
+ disabled: r,
446
+ "aria-pressed": p,
447
+ ...m,
448
+ ...i,
449
449
  children: [
450
- c,
451
- i,
452
- a
450
+ s,
451
+ a,
452
+ c
453
453
  ]
454
454
  }
455
455
  );
456
456
  }
457
457
  );
458
- Ie.displayName = "ChipInput.Option";
459
- const ut = Object.assign(xe, {
460
- Option: Ie
461
- }), Ce = P(void 0);
462
- function V() {
463
- const e = Q(Ce);
458
+ ye.displayName = "ChipInput.Option";
459
+ const ht = Object.assign(xe, {
460
+ Option: ye
461
+ }), Ce = M(void 0);
462
+ function J() {
463
+ const e = V(Ce);
464
464
  if (!e)
465
465
  throw new Error("ComboboxInput subcomponents must be used within ComboboxInput");
466
466
  return e;
467
467
  }
468
- const ge = f(
469
- ({ children: e, className: i, ...n }, c) => {
470
- const a = V();
471
- return /* @__PURE__ */ o(se, { open: a.isOpen, onOpenChange: (s) => !s && a.closeListbox(), placement: "right", children: /* @__PURE__ */ o(se.Body, { children: /* @__PURE__ */ I("div", { className: C["drawer-container"], children: [
472
- /* @__PURE__ */ o("div", { className: C["drawer-input-wrapper"], children: /* @__PURE__ */ o(
473
- "input",
474
- {
475
- type: "text",
476
- className: C["drawer-input"],
477
- placeholder: "Search options...",
478
- value: a.searchQuery || "",
479
- onChange: (s) => {
480
- var t;
481
- return (t = a.setSearchQuery) == null ? void 0 : t.call(a, s.currentTarget.value);
482
- },
483
- "aria-label": "Search options"
484
- }
485
- ) }),
486
- /* @__PURE__ */ o(
487
- "ul",
488
- {
489
- ref: c,
490
- role: "listbox",
491
- "aria-multiselectable": "true",
492
- className: x(C["drawer-listbox"], i),
493
- ...n,
494
- children: e
495
- }
496
- )
497
- ] }) }) });
498
- }
499
- );
500
- ge.displayName = "ComboboxInput.Drawer";
501
- function Ze(e) {
502
- const [i, n] = j(e), [c, a] = j(!1), [s, t] = j(() => /* @__PURE__ */ new Map());
503
- M(() => {
468
+ function qe(e) {
469
+ const [a, n] = P(e), [s, c] = P(!1), [i, t] = P(() => /* @__PURE__ */ new Map());
470
+ K(() => {
504
471
  n(e);
505
472
  }, [e]);
506
- const r = K(() => {
507
- a((p) => !p);
508
- }, []), l = K(() => {
509
- a(!1);
510
- }, []), d = K((p, b) => {
511
- t((m) => {
512
- const h = new Map(m);
513
- return h.set(p, b), h;
473
+ const l = H(() => {
474
+ c((h) => !h);
475
+ }, []), r = H(() => {
476
+ c(!1);
477
+ }, []), d = H((h, m) => {
478
+ t((u) => {
479
+ const b = new Map(u);
480
+ return b.set(h, m), b;
514
481
  });
515
- }, []), u = K((p) => {
516
- t((b) => {
517
- const m = new Map(b);
518
- return m.delete(p), m;
482
+ }, []), p = H((h) => {
483
+ t((m) => {
484
+ const u = new Map(m);
485
+ return u.delete(h), u;
519
486
  });
520
487
  }, []);
521
488
  return {
522
- internalValue: i,
489
+ internalValue: a,
523
490
  setInternalValue: n,
524
- isOpen: c,
525
- toggleOpen: r,
526
- closeListbox: l,
527
- optionRegistry: s,
491
+ isOpen: s,
492
+ toggleOpen: l,
493
+ closeListbox: r,
494
+ optionRegistry: i,
528
495
  registerOption: d,
529
- unregisterOption: u
496
+ unregisterOption: p
530
497
  };
531
498
  }
532
- function qe(e, i) {
533
- const [n, c] = j("bottom"), a = Le(null);
534
- return M(() => {
535
- if (i !== "popup" || !e) return;
536
- const s = a.current;
537
- if (!s) return;
538
- s.matches(":popover-open") || s.showPopover(), requestAnimationFrame(() => {
539
- const r = s.previousElementSibling;
540
- if (!r) return;
541
- const l = r.getBoundingClientRect(), d = s.getBoundingClientRect(), u = {
499
+ function et(e, a) {
500
+ const [n, s] = P("bottom"), c = Pe(null);
501
+ return K(() => {
502
+ if (a !== "popup" || !e) return;
503
+ const i = c.current;
504
+ if (!i) return;
505
+ i.matches(":popover-open") || i.showPopover(), requestAnimationFrame(() => {
506
+ const l = i.previousElementSibling;
507
+ if (!l) return;
508
+ const r = l.getBoundingClientRect(), d = i.getBoundingClientRect(), p = {
542
509
  width: d.width,
543
510
  height: d.height
544
- }, p = Fe(
545
- l,
546
- u,
511
+ }, h = Me(
512
+ r,
513
+ p,
547
514
  100,
548
515
  ["top", "bottom"]
549
516
  );
550
- c(p);
517
+ s(h);
551
518
  });
552
- }, [e, i]), { internalRef: a, placement: n };
519
+ }, [e, a]), { internalRef: c, placement: n };
553
520
  }
554
- const Ne = f(
555
- ({ children: e, className: i, ...n }, c) => {
556
- const a = V(), { internalRef: s, placement: t } = qe(a.isOpen, a.variant);
557
- M(() => {
558
- const l = s.current;
559
- if (!l) return;
560
- const d = () => {
561
- l.matches(":popover-open") || a.closeListbox();
562
- };
563
- return l.addEventListener("toggle", d), () => l.removeEventListener("toggle", d);
564
- }, [a, s]);
565
- const r = g({ placement: t });
566
- return /* @__PURE__ */ o(
567
- "ul",
568
- {
569
- ref: (l) => {
570
- s.current = l, typeof c == "function" ? c(l) : c && (c.current = l);
571
- },
572
- role: "listbox",
573
- "aria-multiselectable": "true",
574
- className: x(C.listbox, i),
575
- popover: "auto",
576
- ...r,
577
- style: {
578
- positionAnchor: a.anchorName
579
- },
580
- ...n,
581
- children: /* @__PURE__ */ I("div", { className: C["listbox-inner"], children: [
582
- /* @__PURE__ */ o("div", { className: C["drawer-input-wrapper"], children: /* @__PURE__ */ o(
583
- "input",
584
- {
585
- type: "text",
586
- className: C["drawer-input"],
587
- placeholder: "Search options...",
588
- value: a.searchQuery || "",
589
- onChange: (l) => {
590
- var d;
591
- return (d = a.setSearchQuery) == null ? void 0 : d.call(a, l.currentTarget.value);
592
- },
593
- "aria-label": "Search options"
594
- }
595
- ) }),
596
- e
597
- ] })
598
- }
599
- );
600
- }
601
- );
602
- Ne.displayName = "ComboboxInput.Listbox";
603
- const Se = f(
521
+ const ge = f(
604
522
  ({
605
523
  value: e,
606
- onChange: i,
524
+ onChange: a,
607
525
  variant: n = "popup",
608
- disabled: c = !1,
609
- invalid: a = !1,
610
- label: s,
526
+ disabled: s = !1,
527
+ invalid: c = !1,
528
+ label: i,
611
529
  helper: t,
612
- error: r,
613
- required: l = !1,
614
- children: d,
615
- className: u,
616
- ...p
617
- }, b) => {
618
- const m = D(), h = p.id || m, v = `${h}-button`, y = t ? `${h}-helper` : void 0, N = r ? `${h}-error` : void 0, w = [y, N].filter(Boolean).join(" "), B = `--combobox-anchor-${h.replace(/[^a-z0-9-]/gi, "")}`, {
619
- internalValue: S,
530
+ error: l,
531
+ required: r = !1,
532
+ multiple: d = !1,
533
+ children: p,
534
+ className: h,
535
+ ...m
536
+ }, u) => {
537
+ const b = D(), v = m.id || b, I = `${v}-button`, g = t ? `${v}-helper` : void 0, S = l ? `${v}-error` : void 0, B = [g, S].filter(Boolean).join(" "), w = `--combobox-anchor-${v.replace(/[^a-z0-9-]/gi, "")}`, j = q(() => d ? Array.isArray(e) ? e : [] : e === null ? [] : [e], [e, d]), {
538
+ internalValue: k,
620
539
  setInternalValue: $,
621
- isOpen: G,
622
- toggleOpen: E,
623
- closeListbox: z,
624
- optionRegistry: J,
625
- registerOption: W,
626
- unregisterOption: X
627
- } = Ze(e), [O, Ge] = j("");
628
- M(() => {
629
- $(e);
630
- }, [e, $]);
631
- const De = (q) => {
632
- c || ($(q), i(q));
633
- }, $e = g({
634
- invalid: !!(r || a),
635
- disabled: c
540
+ isOpen: L,
541
+ toggleOpen: Q,
542
+ closeListbox: W,
543
+ optionRegistry: X,
544
+ registerOption: O,
545
+ unregisterOption: Ge
546
+ } = qe(j);
547
+ K(() => {
548
+ $(j);
549
+ }, [j, $]);
550
+ const $e = (Y) => {
551
+ s || ($(Y), a(d ? Y : Y[0] ?? null));
552
+ }, De = N({
553
+ invalid: !!(l || c),
554
+ disabled: s
636
555
  });
637
- return /* @__PURE__ */ I("div", { ref: b, className: x(C.field, u), ...$e, ...p, children: [
638
- s && /* @__PURE__ */ o(k, { required: l, disabled: c, htmlFor: v, children: s }),
556
+ return /* @__PURE__ */ x("div", { ref: u, className: y(C.field, h), ...De, ...m, children: [
557
+ i && /* @__PURE__ */ o(R, { required: r, disabled: s, htmlFor: I, children: i }),
639
558
  /* @__PURE__ */ o(
640
559
  Ce.Provider,
641
560
  {
642
561
  value: {
643
- value: S,
644
- onChange: De,
645
- isOpen: G,
646
- toggleOpen: E,
647
- closeListbox: z,
562
+ value: k,
563
+ onChange: $e,
564
+ isOpen: L,
565
+ toggleOpen: Q,
566
+ closeListbox: W,
648
567
  variant: n,
649
- anchorName: B,
650
- buttonId: v,
651
- optionRegistry: J,
652
- registerOption: W,
653
- unregisterOption: X,
654
- disabled: c,
655
- searchQuery: O,
656
- setSearchQuery: Ge
568
+ anchorName: w,
569
+ buttonId: I,
570
+ optionRegistry: X,
571
+ registerOption: O,
572
+ unregisterOption: Ge,
573
+ disabled: s,
574
+ multiple: d
657
575
  },
658
- children: /* @__PURE__ */ o("div", { className: C.root, "aria-describedby": w || void 0, children: d })
576
+ children: /* @__PURE__ */ o("div", { className: C.root, "aria-describedby": B || void 0, children: p })
659
577
  }
660
578
  ),
661
- r && /* @__PURE__ */ o(A, { id: N, children: r }),
662
- !r && t && S.length === 0 && /* @__PURE__ */ o(R, { id: y, children: t })
579
+ l && /* @__PURE__ */ o(G, { id: S, children: l }),
580
+ !l && t && k.length === 0 && /* @__PURE__ */ o(A, { id: g, children: t })
663
581
  ] });
664
582
  }
665
583
  );
666
- Se.displayName = "ComboboxInput";
667
- const we = f(
668
- ({ children: e, className: i, iconLeft: n, iconRight: c, ...a }, s) => {
669
- const t = V(), r = t.value.length === 0, l = g({
584
+ ge.displayName = "ComboboxInput";
585
+ const Ne = f(
586
+ ({ children: e, className: a, iconLeft: n, iconRight: s, ...c }, i) => {
587
+ const t = J(), l = t.value.length === 0, r = N({
670
588
  open: t.isOpen,
671
589
  disabled: t.disabled,
672
590
  "has-left-icon": !!n,
673
591
  "has-right-icon": !0
674
592
  }), d = {
675
593
  anchorName: t.anchorName
676
- }, u = e || (r ? "Select" : `${t.value.length} selected`);
677
- return /* @__PURE__ */ I(
594
+ }, p = e || // oxlint-disable-next-line no-nested-ternary
595
+ (l ? "Select" : t.multiple ? `${t.value.length} selected` : t.optionRegistry.get(t.value[0]) ?? t.value[0]);
596
+ return /* @__PURE__ */ x(
678
597
  "button",
679
598
  {
680
- ref: s,
599
+ ref: i,
681
600
  id: t.buttonId,
682
601
  type: "button",
683
- className: x(C.button, i),
602
+ className: y(C.button, a),
684
603
  onClick: () => !t.disabled && t.toggleOpen(),
685
604
  disabled: t.disabled,
686
605
  "aria-expanded": t.isOpen,
687
606
  "aria-haspopup": "listbox",
688
607
  style: d,
689
- ...l,
690
- ...a,
608
+ ...r,
609
+ ...c,
691
610
  children: [
692
611
  n && /* @__PURE__ */ o("span", { className: C["left-icon"], children: n }),
693
- /* @__PURE__ */ o("span", { className: C["button-content"], ...r && { "data-placeholder": "" }, children: u }),
694
- c ? /* @__PURE__ */ o("span", { className: C["right-icon"], children: c }) : /* @__PURE__ */ o("span", { className: C["right-icon"], "data-chevron": !0, children: /* @__PURE__ */ o(ze, {}) })
612
+ /* @__PURE__ */ o("span", { className: C["button-content"], ...l && { "data-placeholder": "" }, children: p }),
613
+ s ? /* @__PURE__ */ o("span", { className: C["right-icon"], children: s }) : /* @__PURE__ */ o("span", { className: C["right-icon"], "data-chevron": !0, children: /* @__PURE__ */ o(He, {}) })
695
614
  ]
696
615
  }
697
616
  );
698
617
  }
699
618
  );
700
- we.displayName = "ComboboxInput.Button";
701
- const Oe = f(
702
- ({ value: e, children: i, disabled: n = !1, className: c, ...a }, s) => {
703
- const t = V(), r = t.disabled || n, l = t.value.includes(e), d = typeof i == "string" ? i : String(e), u = !t.searchQuery || d.toLowerCase().includes(t.searchQuery.toLowerCase()) || e.toLowerCase().includes(t.searchQuery.toLowerCase());
704
- M(() => (t.registerOption(e, d), () => t.unregisterOption(e)), [e, d, t.registerOption, t.unregisterOption]);
619
+ Ne.displayName = "ComboboxInput.Button";
620
+ const Se = f(
621
+ ({ value: e, children: a, disabled: n = !1, className: s, ...c }, i) => {
622
+ const t = J(), l = t.disabled || n, r = t.value.includes(e), d = typeof a == "string" ? a : String(e);
623
+ K(() => (t.registerOption(e, d), () => t.unregisterOption(e)), [e, d, t.registerOption, t.unregisterOption]);
705
624
  const p = () => {
706
- if (r) return;
707
- const h = l ? t.value.filter((v) => v !== e) : [...t.value, e];
708
- t.onChange(h);
709
- }, b = (h) => {
710
- (h.key === "Enter" || h.key === " ") && (h.preventDefault(), p());
711
- }, m = g({ active: l, disabled: r });
712
- return u ? /* @__PURE__ */ I(
625
+ if (!l)
626
+ if (t.multiple) {
627
+ const u = r ? t.value.filter((b) => b !== e) : [...t.value, e];
628
+ t.onChange(u);
629
+ } else
630
+ t.onChange(r ? [] : [e]), t.closeListbox();
631
+ }, h = (u) => {
632
+ u.key === " " && (u.preventDefault(), p());
633
+ }, m = N({ active: r, disabled: l });
634
+ return /* @__PURE__ */ x(
713
635
  "li",
714
636
  {
715
- ref: s,
637
+ ref: i,
716
638
  role: "option",
717
- className: x(C.option, c),
639
+ className: y(C.option, s),
718
640
  onClick: p,
719
- onKeyDown: b,
720
- "aria-selected": l,
721
- tabIndex: r ? -1 : 0,
641
+ onKeyDown: h,
642
+ "aria-selected": r,
643
+ tabIndex: l ? -1 : 0,
722
644
  ...m,
723
- ...a,
645
+ ...c,
724
646
  children: [
725
- /* @__PURE__ */ o("span", { className: C["option-check"], children: /* @__PURE__ */ o(Ue, { width: "1em", height: "1em" }) }),
726
- /* @__PURE__ */ o("span", { children: i })
647
+ /* @__PURE__ */ o("span", { className: C["option-check"], children: /* @__PURE__ */ o(Ke, { width: "1em", height: "1em" }) }),
648
+ /* @__PURE__ */ o("span", { children: a })
727
649
  ]
728
650
  }
729
- ) : null;
651
+ );
730
652
  }
731
653
  );
732
- Oe.displayName = "ComboboxInput.Option";
733
- const Be = f(
734
- ({ className: e, ...i }, n) => {
735
- const c = V();
736
- if (c.value.length === 0) return null;
737
- const a = (s) => {
738
- c.onChange(c.value.filter((t) => t !== s));
654
+ Se.displayName = "ComboboxInput.Option";
655
+ const we = f(
656
+ ({ className: e, ...a }, n) => {
657
+ const s = J();
658
+ if (s.value.length === 0) return null;
659
+ const c = (i) => {
660
+ s.onChange(s.value.filter((t) => t !== i));
739
661
  };
740
- return /* @__PURE__ */ o("div", { ref: n, className: x(C.chips, e), role: "group", ...i, children: c.value.map((s) => {
741
- const t = c.optionRegistry.get(s) ?? s;
742
- return /* @__PURE__ */ o(
743
- Pe,
744
- {
745
- disabled: c.disabled,
746
- onClick: () => a(s),
747
- children: t
748
- },
749
- s
750
- );
662
+ return /* @__PURE__ */ o("div", { ref: n, className: y(C.chips, e), role: "group", ...a, children: s.value.map((i) => {
663
+ const t = s.optionRegistry.get(i) ?? i;
664
+ return /* @__PURE__ */ o(Ve, { disabled: s.disabled, onClick: () => c(i), children: t }, i);
751
665
  }) });
752
666
  }
753
667
  );
754
- Be.displayName = "ComboboxInput.SelectionChips";
755
- const ht = Object.assign(Se, {
756
- Button: we,
757
- Listbox: Ne,
758
- Drawer: ge,
759
- Option: Oe,
760
- SelectionChips: Be
761
- }), ke = P(void 0);
762
- function et() {
763
- const e = Q(ke);
668
+ we.displayName = "ComboboxInput.SelectionChips";
669
+ const Oe = f(
670
+ ({ name: e, value: a, onChange: n, placeholder: s = "Search options...", ...c }, i) => /* @__PURE__ */ o(
671
+ "input",
672
+ {
673
+ ref: i,
674
+ type: "text",
675
+ name: e,
676
+ className: C["drawer-input"],
677
+ placeholder: s,
678
+ value: a,
679
+ onChange: n,
680
+ "aria-label": "Search options",
681
+ ...c
682
+ }
683
+ )
684
+ );
685
+ Oe.displayName = "ComboboxInput.Search";
686
+ const Be = ({ search: e, children: a, variant: n = "list" }) => {
687
+ const s = J(), { internalRef: c, placement: i } = et(s.isOpen, s.variant), t = (r) => {
688
+ const d = r.target;
689
+ d && !d.matches(":popover-open") && s.closeListbox();
690
+ };
691
+ if (s.variant === "drawer" || n === "drawer")
692
+ return /* @__PURE__ */ o(ie, { open: s.isOpen, onOpenChange: (r) => !r && s.closeListbox(), placement: "right", children: /* @__PURE__ */ o(ie.Body, { children: /* @__PURE__ */ x("div", { className: C["drawer-container"], children: [
693
+ e && /* @__PURE__ */ o("div", { className: C["drawer-input-wrapper"], children: e }),
694
+ a
695
+ ] }) }) });
696
+ if (n === "none")
697
+ return /* @__PURE__ */ x(je, { children: [
698
+ e && /* @__PURE__ */ o("div", { className: C["drawer-input-wrapper"], children: e }),
699
+ a
700
+ ] });
701
+ const l = {
702
+ ref: c,
703
+ className: C.listbox,
704
+ popover: "auto",
705
+ "data-placement": i,
706
+ style: { positionAnchor: s.anchorName },
707
+ onToggle: t
708
+ };
709
+ return /* @__PURE__ */ x("div", { ...l, children: [
710
+ e && /* @__PURE__ */ o("div", { className: C["listbox-search"], children: /* @__PURE__ */ o("div", { className: C["drawer-input-wrapper"], children: e }) }),
711
+ a
712
+ ] });
713
+ };
714
+ Be.displayName = "ComboboxInput.Container";
715
+ const mt = Object.assign(ge, {
716
+ Button: Ne,
717
+ Option: Se,
718
+ SelectionChips: we,
719
+ Search: Oe,
720
+ Container: Be
721
+ }), ke = M(void 0);
722
+ function tt() {
723
+ const e = V(ke);
764
724
  if (!e)
765
725
  throw new Error("SelectableInput.Option must be used within SelectableInput");
766
726
  return e;
@@ -768,61 +728,61 @@ function et() {
768
728
  const Re = f(
769
729
  ({
770
730
  value: e,
771
- onChange: i,
731
+ onChange: a,
772
732
  multiple: n = !1,
773
- name: c,
774
- disabled: a = !1,
775
- placement: s = "top",
733
+ name: s,
734
+ disabled: c = !1,
735
+ placement: i = "top",
776
736
  children: t,
777
- className: r,
778
- ...l
737
+ className: l,
738
+ ...r
779
739
  }, d) => {
780
- const u = (m) => {
781
- a || i(m);
782
- }, p = g({
783
- disabled: a
784
- }), b = n ? "group" : "radiogroup";
785
- return /* @__PURE__ */ o("div", { ref: d, className: x(F.field, r), ...p, ...l, children: /* @__PURE__ */ o(
740
+ const p = (u) => {
741
+ c || a(u);
742
+ }, h = N({
743
+ disabled: c
744
+ }), m = n ? "group" : "radiogroup";
745
+ return /* @__PURE__ */ o("div", { ref: d, className: y(F.field, l), ...h, ...r, children: /* @__PURE__ */ o(
786
746
  ke.Provider,
787
747
  {
788
748
  value: {
789
- disabled: a,
749
+ disabled: c,
790
750
  multiple: n,
791
- name: c,
792
- onChange: u,
751
+ name: s,
752
+ onChange: p,
793
753
  value: e,
794
- placement: s
754
+ placement: i
795
755
  },
796
- children: /* @__PURE__ */ o("div", { role: b, children: t })
756
+ children: /* @__PURE__ */ o("div", { role: m, children: t })
797
757
  }
798
758
  ) });
799
759
  }
800
760
  );
801
761
  Re.displayName = "SelectableInput";
802
762
  const Ae = f(
803
- ({ value: e, children: i, disabled: n, className: c, ...a }, s) => {
804
- const t = et(), r = t.disabled || n;
805
- let l = !1;
806
- t.multiple ? l = Array.isArray(t.value) && t.value.includes(e) : l = t.value === e;
763
+ ({ value: e, children: a, disabled: n, className: s, ...c }, i) => {
764
+ const t = tt(), l = t.disabled || n;
765
+ let r = !1;
766
+ t.multiple ? r = Array.isArray(t.value) && t.value.includes(e) : r = t.value === e;
807
767
  const d = () => {
808
- if (!r)
768
+ if (!l)
809
769
  if (t.multiple) {
810
- const p = Array.isArray(t.value) ? t.value : [], b = l ? p.filter((m) => m !== e) : [...p, e];
811
- t.onChange(b);
770
+ const h = Array.isArray(t.value) ? t.value : [], m = r ? h.filter((u) => u !== e) : [...h, e];
771
+ t.onChange(m);
812
772
  } else
813
773
  t.onChange(e);
814
- }, u = g({
815
- disabled: r,
816
- selected: l,
774
+ }, p = N({
775
+ disabled: l,
776
+ selected: r,
817
777
  placement: t.placement
818
778
  });
819
- return /* @__PURE__ */ I(
779
+ return /* @__PURE__ */ x(
820
780
  "label",
821
781
  {
822
- ref: s,
823
- className: x(F.option, c),
824
- ...u,
825
- ...a,
782
+ ref: i,
783
+ className: y(F.option, s),
784
+ ...p,
785
+ ...c,
826
786
  children: [
827
787
  /* @__PURE__ */ o(
828
788
  "input",
@@ -831,124 +791,124 @@ const Ae = f(
831
791
  className: F.input,
832
792
  name: t.name,
833
793
  value: e,
834
- checked: l,
794
+ checked: r,
835
795
  onChange: d,
836
- disabled: r,
837
- "aria-disabled": r
796
+ disabled: l,
797
+ "aria-disabled": l
838
798
  }
839
799
  ),
840
800
  /* @__PURE__ */ o("span", { className: F.indicator }),
841
- /* @__PURE__ */ o("div", { className: F.content, children: i })
801
+ /* @__PURE__ */ o("div", { className: F.content, children: a })
842
802
  ]
843
803
  }
844
804
  );
845
805
  }
846
806
  );
847
807
  Ae.displayName = "SelectableInput.Option";
848
- const mt = Object.assign(Re, {
808
+ const bt = Object.assign(Re, {
849
809
  Option: Ae
850
810
  });
851
- function tt() {
811
+ function nt() {
852
812
  try {
853
- return Intl.supportedValuesOf("currency").map((i) => ({
854
- code: i,
855
- label: i
813
+ return Intl.supportedValuesOf("currency").map((a) => ({
814
+ code: a,
815
+ label: a
856
816
  }));
857
817
  } catch {
858
818
  return [{ code: "USD", label: "USD" }];
859
819
  }
860
820
  }
861
- const nt = f(
821
+ const ot = f(
862
822
  ({
863
823
  label: e,
864
- helper: i,
824
+ helper: a,
865
825
  error: n,
866
- required: c = !1,
867
- disabled: a = !1,
868
- readOnly: s = !1,
826
+ required: s = !1,
827
+ disabled: c = !1,
828
+ readOnly: i = !1,
869
829
  name: t,
870
- amountValue: r = "",
871
- onAmountChange: l,
830
+ amountValue: l = "",
831
+ onAmountChange: r,
872
832
  currencyValue: d = "USD",
873
- onCurrencyChange: u,
874
- currencies: p,
875
- currencyName: b,
876
- id: m,
877
- className: h,
833
+ onCurrencyChange: p,
834
+ currencies: h,
835
+ currencyName: m,
836
+ id: u,
837
+ className: b,
878
838
  ...v
879
- }, y) => {
880
- const N = ae(() => tt(), []), w = ae(() => p ? p.map((O) => ({
839
+ }, I) => {
840
+ const g = q(() => nt(), []), S = q(() => h ? h.map((O) => ({
881
841
  code: O,
882
842
  label: O
883
- })) : N, [p, N]), [B, S] = j(!1), $ = D(), G = m || $, E = i ? `${G}-helper` : void 0, z = n ? `${G}-error` : void 0, J = [E, z].filter(Boolean).join(" "), W = b || (t ? `${t}-currency` : void 0), X = g({
884
- disabled: a,
843
+ })) : g, [h, g]), [B, w] = P(!1), j = D(), k = u || j, $ = a ? `${k}-helper` : void 0, L = n ? `${k}-error` : void 0, Q = [$, L].filter(Boolean).join(" "), W = m || (t ? `${t}-currency` : void 0), X = N({
844
+ disabled: c,
885
845
  invalid: !!n,
886
- readOnly: s,
846
+ readOnly: i,
887
847
  focused: B
888
848
  });
889
- return /* @__PURE__ */ I("div", { className: x(L.field, h), children: [
890
- e && /* @__PURE__ */ o(k, { htmlFor: G, required: c, disabled: a, children: e }),
891
- /* @__PURE__ */ I("div", { className: L.wrapper, ...X, children: [
849
+ return /* @__PURE__ */ x("div", { className: y(T.field, b), children: [
850
+ e && /* @__PURE__ */ o(R, { htmlFor: k, required: s, disabled: c, children: e }),
851
+ /* @__PURE__ */ x("div", { className: T.wrapper, ...X, children: [
892
852
  /* @__PURE__ */ o(
893
853
  "select",
894
854
  {
895
- className: L["currency-select"],
855
+ className: T["currency-select"],
896
856
  name: W,
897
857
  value: d,
898
- onChange: (O) => u == null ? void 0 : u(O.target.value),
899
- onFocus: () => S(!0),
900
- onBlur: () => S(!1),
901
- disabled: a,
902
- "aria-disabled": a ? "true" : void 0,
903
- children: w.map((O) => /* @__PURE__ */ o("option", { value: O.code, children: O.label }, O.code))
858
+ onChange: (O) => p == null ? void 0 : p(O.target.value),
859
+ onFocus: () => w(!0),
860
+ onBlur: () => w(!1),
861
+ disabled: c,
862
+ "aria-disabled": c ? "true" : void 0,
863
+ children: S.map((O) => /* @__PURE__ */ o("option", { value: O.code, children: O.label }, O.code))
904
864
  }
905
865
  ),
906
- /* @__PURE__ */ o("span", { className: L.divider, "aria-hidden": !0 }),
866
+ /* @__PURE__ */ o("span", { className: T.divider, "aria-hidden": !0 }),
907
867
  /* @__PURE__ */ o(
908
868
  "input",
909
869
  {
910
- ref: y,
911
- id: G,
870
+ ref: I,
871
+ id: k,
912
872
  type: "text",
913
873
  inputMode: "decimal",
914
- className: L["amount-input"],
874
+ className: T["amount-input"],
915
875
  name: t,
916
- value: r,
917
- onChange: (O) => l == null ? void 0 : l(O.target.value),
918
- onFocus: () => S(!0),
919
- onBlur: () => S(!1),
920
- disabled: a,
921
- readOnly: s,
922
- required: c,
876
+ value: l,
877
+ onChange: (O) => r == null ? void 0 : r(O.target.value),
878
+ onFocus: () => w(!0),
879
+ onBlur: () => w(!1),
880
+ disabled: c,
881
+ readOnly: i,
882
+ required: s,
923
883
  "aria-invalid": n ? "true" : void 0,
924
- "aria-disabled": a ? "true" : void 0,
925
- "aria-describedby": J || void 0,
884
+ "aria-disabled": c ? "true" : void 0,
885
+ "aria-describedby": Q || void 0,
926
886
  ...v
927
887
  }
928
888
  )
929
889
  ] }),
930
- n && /* @__PURE__ */ o(A, { id: z, children: n }),
931
- !n && i && /* @__PURE__ */ o(R, { id: E, children: i })
890
+ n && /* @__PURE__ */ o(G, { id: L, children: n }),
891
+ !n && a && /* @__PURE__ */ o(A, { id: $, children: a })
932
892
  ] });
933
893
  }
934
894
  );
935
- nt.displayName = "CurrencyInput";
895
+ ot.displayName = "CurrencyInput";
936
896
  export {
937
897
  pe as Checkbox,
938
- pt as CheckboxGroup,
939
- ut as ChipInput,
940
- ht as ComboboxInput,
941
- nt as CurrencyInput,
942
- Ke as EmailInput,
943
- A as ErrorText,
944
- R as HelperText,
945
- k as Label,
946
- _e as PasswordInput,
898
+ ut as CheckboxGroup,
899
+ ht as ChipInput,
900
+ mt as ComboboxInput,
901
+ ot as CurrencyInput,
902
+ Je as EmailInput,
903
+ G as ErrorText,
904
+ A as HelperText,
905
+ R as Label,
906
+ Qe as PasswordInput,
947
907
  de as Radio,
948
- dt as RadioGroup,
949
- He as SearchInput,
950
- le as Select,
951
- mt as SelectableInput,
952
- Je as TextArea,
908
+ pt as RadioGroup,
909
+ _e as SearchInput,
910
+ re as Select,
911
+ bt as SelectableInput,
912
+ We as TextArea,
953
913
  _ as TextInput
954
914
  };