@dimasbaguspm/versaur 0.0.48 → 0.0.49

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 (76) hide show
  1. package/dist/assets/styles.css +14 -6
  2. package/dist/js/forms/index.js +12 -14
  3. package/dist/js/image-rectangle-K9jmTTED.js +2607 -0
  4. package/dist/js/index.js +66 -68
  5. package/dist/js/layouts/index.js +8 -9
  6. package/dist/js/navigation/index.js +1 -1
  7. package/dist/js/overlays/index.js +2 -2
  8. package/dist/js/primitive/index.js +21 -20
  9. package/dist/js/tabs-I4n6MLAv.js +210 -0
  10. package/dist/js/time-picker-input-jJBtyikv.js +1562 -0
  11. package/dist/js/{tooltip-D6fUigp2.js → tooltip-nZW9TUz3.js} +293 -297
  12. package/dist/js/{top-bar-Dx0JVXms.js → top-bar-BMw3gFYA.js} +292 -247
  13. package/dist/types/forms/checkbox-input/checkbox-input.d.ts +1 -1
  14. package/dist/types/forms/checkbox-input/types.d.ts +11 -14
  15. package/dist/types/forms/chip-multiple-input/chip-multiple-input.atoms.d.ts +2 -2
  16. package/dist/types/forms/chip-multiple-input/chip-multiple-input.d.ts +1 -1
  17. package/dist/types/forms/chip-multiple-input/types.d.ts +15 -14
  18. package/dist/types/forms/chip-single-input/chip-single-input.atoms.d.ts +1 -1
  19. package/dist/types/forms/chip-single-input/chip-single-input.d.ts +1 -1
  20. package/dist/types/forms/chip-single-input/types.d.ts +15 -14
  21. package/dist/types/forms/date-single-picker-input/types.d.ts +10 -0
  22. package/dist/types/forms/index.d.ts +0 -2
  23. package/dist/types/forms/pin-field/pin-field.d.ts +2 -2
  24. package/dist/types/forms/pin-field/types.d.ts +16 -28
  25. package/dist/types/forms/select-input/index.d.ts +1 -1
  26. package/dist/types/forms/select-input/select-input.atoms.d.ts +16 -0
  27. package/dist/types/forms/select-input/select-input.d.ts +4 -7
  28. package/dist/types/forms/select-input/types.d.ts +32 -9
  29. package/dist/types/forms/selectable-multiple-input/selectable-multiple-input.d.ts +1 -1
  30. package/dist/types/forms/selectable-multiple-input/types.d.ts +20 -3
  31. package/dist/types/forms/selectable-single-input/selectable-single-input.d.ts +1 -1
  32. package/dist/types/forms/selectable-single-input/types.d.ts +20 -3
  33. package/dist/types/forms/switch-input/switch-input.atoms.d.ts +7 -8
  34. package/dist/types/forms/switch-input/switch-input.d.ts +5 -1
  35. package/dist/types/forms/switch-input/types.d.ts +10 -33
  36. package/dist/types/forms/text-input/text-input.d.ts +2 -2
  37. package/dist/types/forms/text-input/types.d.ts +0 -7
  38. package/dist/types/forms/textarea-input/textarea-input.d.ts +3 -3
  39. package/dist/types/forms/textarea-input/types.d.ts +33 -18
  40. package/dist/types/layouts/index.d.ts +1 -2
  41. package/dist/types/layouts/page-content/index.d.ts +1 -1
  42. package/dist/types/layouts/page-content/page-content.d.ts +5 -11
  43. package/dist/types/layouts/page-content/types.d.ts +29 -9
  44. package/dist/types/layouts/page-header/types.d.ts +13 -0
  45. package/dist/types/navigation/tabs/tabs.atoms.d.ts +3 -2
  46. package/dist/types/navigation/tabs/types.d.ts +5 -13
  47. package/dist/types/navigation/tabs/use-tab-indicator.d.ts +8 -8
  48. package/dist/types/overlays/drawer/drawer.atoms.d.ts +18 -8
  49. package/dist/types/overlays/drawer/drawer.d.ts +5 -5
  50. package/dist/types/overlays/drawer/types.d.ts +11 -15
  51. package/dist/types/primitive/button/button.d.ts +5 -0
  52. package/dist/types/primitive/button/types.d.ts +24 -11
  53. package/dist/types/primitive/button-anchor/button-anchor.d.ts +9 -0
  54. package/dist/types/primitive/button-anchor/index.d.ts +2 -0
  55. package/dist/types/primitive/button-anchor/types.d.ts +35 -0
  56. package/dist/types/primitive/button-icon/button-icon.d.ts +6 -0
  57. package/dist/types/primitive/button-icon/types.d.ts +21 -10
  58. package/dist/types/primitive/filter-chip/types.d.ts +0 -10
  59. package/dist/types/primitive/index.d.ts +1 -0
  60. package/dist/types/templates/pin-verifier-drawer/types.d.ts +0 -5
  61. package/dist/utils/enforce-subpath-import.js +1 -3
  62. package/package.json +1 -1
  63. package/dist/js/image-rectangle-B4nXH4Q5.js +0 -2581
  64. package/dist/js/tabs-BAzThVka.js +0 -291
  65. package/dist/js/time-picker-input-JBEgDV2V.js +0 -2049
  66. package/dist/types/forms/segment-multiple-input/index.d.ts +0 -2
  67. package/dist/types/forms/segment-multiple-input/segment-multiple-input.atoms.d.ts +0 -12
  68. package/dist/types/forms/segment-multiple-input/segment-multiple-input.d.ts +0 -7
  69. package/dist/types/forms/segment-multiple-input/types.d.ts +0 -55
  70. package/dist/types/forms/segment-single-input/index.d.ts +0 -2
  71. package/dist/types/forms/segment-single-input/segment-single-input.atoms.d.ts +0 -11
  72. package/dist/types/forms/segment-single-input/segment-single-input.d.ts +0 -7
  73. package/dist/types/forms/segment-single-input/types.d.ts +0 -55
  74. package/dist/types/layouts/page-layout/index.d.ts +0 -2
  75. package/dist/types/layouts/page-layout/page-layout.d.ts +0 -8
  76. package/dist/types/layouts/page-layout/types.d.ts +0 -20
@@ -1,2049 +0,0 @@
1
- import { c as v, j as e, a as p } from "./index-DOdDlCoL.js";
2
- import m, { createContext as R, useContext as O, useId as E, forwardRef as z, useRef as A, useEffect as ae, useState as L } from "react";
3
- import { I as S } from "./image-rectangle-B4nXH4Q5.js";
4
- import { Calendar as ie, MailIcon as ce, Banknote as de, SearchIcon as le, Check as W, Clock as ue } from "lucide-react";
5
- import "./snackbar-DH8jCh2V.js";
6
- const ge = v("space-y-2", {
7
- variants: {
8
- direction: {
9
- vertical: "space-y-2 space-x-0",
10
- horizontal: "flex flex-wrap gap-4 space-y-0"
11
- }
12
- },
13
- defaultVariants: {
14
- direction: "vertical"
15
- }
16
- }), fe = v(
17
- "relative h-4 w-4 rounded border cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed appearance-none bg-white",
18
- {
19
- variants: {
20
- variant: {
21
- // Core variants using Versaur color system
22
- primary: "border-primary/40 checked:bg-primary checked:border-primary focus:ring-primary/20",
23
- secondary: "border-secondary/40 checked:bg-secondary checked:border-secondary focus:ring-secondary/20",
24
- tertiary: "border-tertiary/40 checked:bg-tertiary checked:border-tertiary focus:ring-tertiary/20",
25
- ghost: "border-ghost/40 checked:bg-ghost checked:border-ghost focus:ring-ghost/20",
26
- neutral: "border-gray-300 checked:bg-gray-500 checked:border-gray-500 focus:ring-gray-400/20",
27
- // Outline variants
28
- "primary-outline": "border-primary checked:bg-white checked:border-primary focus:ring-primary/20",
29
- "secondary-outline": "border-secondary checked:bg-white checked:border-secondary focus:ring-secondary/20",
30
- "tertiary-outline": "border-tertiary checked:bg-white checked:border-tertiary focus:ring-tertiary/20",
31
- "ghost-outline": "border-ghost checked:bg-white checked:border-ghost focus:ring-ghost/20",
32
- "neutral-outline": "border-gray-400 checked:bg-white checked:border-gray-400 focus:ring-gray-500/20",
33
- // Semantic variants
34
- success: "border-success/40 checked:bg-success checked:border-success focus:ring-success/20",
35
- "success-outline": "border-success checked:bg-white checked:border-success focus:ring-success/20",
36
- info: "border-info/40 checked:bg-info checked:border-info focus:ring-info/20",
37
- "info-outline": "border-info checked:bg-white checked:border-info focus:ring-info/20",
38
- warning: "border-warning/40 checked:bg-warning checked:border-warning focus:ring-warning/20",
39
- "warning-outline": "border-warning checked:bg-white checked:border-warning focus:ring-warning/20",
40
- danger: "border-danger/40 checked:bg-danger checked:border-danger focus:ring-danger/20",
41
- "danger-outline": "border-danger checked:bg-white checked:border-danger focus:ring-danger/20"
42
- },
43
- size: {
44
- sm: "h-3 w-3",
45
- md: "h-4 w-4",
46
- lg: "h-5 w-5"
47
- }
48
- },
49
- defaultVariants: {
50
- variant: "primary",
51
- size: "md"
52
- }
53
- }
54
- ), he = v(
55
- "text-foreground cursor-pointer select-none",
56
- {
57
- variants: {
58
- size: {
59
- sm: "text-xs",
60
- md: "text-sm",
61
- lg: "text-base"
62
- },
63
- disabled: {
64
- true: "opacity-50 cursor-not-allowed",
65
- false: ""
66
- }
67
- },
68
- defaultVariants: {
69
- size: "md",
70
- disabled: !1
71
- }
72
- }
73
- ), G = R(null), be = () => {
74
- const r = O(G);
75
- if (!r)
76
- throw new Error("CheckboxOption must be used within CheckboxInput");
77
- return r;
78
- }, _ = m.forwardRef(({ children: r, description: t, className: o, disabled: s, id: n, ...i }, l) => {
79
- const c = be(), a = m.useId(), g = n || a, u = s || c.disabled, f = c.error ? "danger" : c.variant || "primary";
80
- return /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
81
- /* @__PURE__ */ e.jsx("div", { className: "relative flex items-center", children: /* @__PURE__ */ e.jsx(
82
- "input",
83
- {
84
- ref: l,
85
- type: "checkbox",
86
- id: g,
87
- disabled: u,
88
- className: p(
89
- fe({
90
- variant: f,
91
- size: c.size
92
- }),
93
- // Custom checkmark styling using ::after - centered positioning with size variants
94
- 'after:content-[""] after:absolute after:left-1/2 after:top-[45%] after:-translate-x-1/2 after:-translate-y-1/2 after:border-b-2 after:border-r-2 after:border-white after:rotate-45 after:opacity-0 after:transition-opacity after:duration-200',
95
- // Size-specific checkmark dimensions
96
- c.size === "sm" && "after:w-[3px] after:h-[6px]",
97
- c.size === "md" && "after:w-[4px] after:h-[8px]",
98
- c.size === "lg" && "after:w-[6px] after:h-[10px]",
99
- "checked:after:opacity-100",
100
- // Outline variants use colored checkmark
101
- f?.includes("outline") && "checked:after:border-current",
102
- o
103
- ),
104
- ...i
105
- }
106
- ) }),
107
- /* @__PURE__ */ e.jsxs("div", { className: "flex-1", children: [
108
- /* @__PURE__ */ e.jsx(
109
- "label",
110
- {
111
- htmlFor: g,
112
- className: he({
113
- size: c.size,
114
- disabled: u
115
- }),
116
- children: r
117
- }
118
- ),
119
- t && /* @__PURE__ */ e.jsx(
120
- "div",
121
- {
122
- className: p(
123
- "text-gray-600 mt-1",
124
- c.size === "sm" && "text-xs",
125
- c.size === "md" && "text-xs",
126
- c.size === "lg" && "text-sm",
127
- u && "opacity-50"
128
- ),
129
- children: t
130
- }
131
- )
132
- ] })
133
- ] });
134
- });
135
- _.displayName = "CheckboxOption";
136
- const K = m.forwardRef(
137
- ({
138
- variant: r = "primary",
139
- size: t = "md",
140
- label: o,
141
- helperText: s,
142
- error: n,
143
- direction: i = "vertical",
144
- className: l,
145
- disabled: c,
146
- children: a,
147
- ...g
148
- }, u) => {
149
- const f = !!n, d = {
150
- variant: r,
151
- size: t,
152
- disabled: c,
153
- error: f
154
- };
155
- return /* @__PURE__ */ e.jsx(G.Provider, { value: d, children: /* @__PURE__ */ e.jsxs("div", { ref: u, className: p("w-full", l), ...g, children: [
156
- o && /* @__PURE__ */ e.jsx("div", { className: "block text-sm font-medium text-foreground mb-3", children: o }),
157
- /* @__PURE__ */ e.jsx("div", { className: ge({ direction: i }), children: a }),
158
- f && /* @__PURE__ */ e.jsx("div", { className: "mt-2 text-sm text-danger", role: "alert", children: n }),
159
- !f && s && /* @__PURE__ */ e.jsx("div", { className: "mt-2 text-sm text-gray-600", children: s })
160
- ] }) });
161
- }
162
- );
163
- K.displayName = "CheckboxInput";
164
- const fr = Object.assign(K, {
165
- Option: _
166
- }), H = R(null), me = () => {
167
- const r = O(H);
168
- if (!r)
169
- throw new Error(
170
- "useChipSingleInputContext must be used within ChipSingleInputContext"
171
- );
172
- return r;
173
- }, xe = v(
174
- "inline-flex items-center bg-white transition-colors duration-200 cursor-pointer border border-border",
175
- {
176
- variants: {
177
- variant: {
178
- primary: [
179
- "hover:bg-primary-soft",
180
- "hover:border-primary-bold",
181
- "focus:border-primary-light",
182
- "data-[selected=true]:bg-primary",
183
- "data-[selected=true]:border-primary",
184
- "data-[selected=true]:text-white"
185
- ].join(" "),
186
- secondary: [
187
- "hover:bg-secondary-soft",
188
- "hover:border-secondary-bold",
189
- "focus:border-secondary-light",
190
- "data-[selected=true]:bg-secondary",
191
- "data-[selected=true]:border-secondary",
192
- "data-[selected=true]:text-white"
193
- ].join(" "),
194
- tertiary: [
195
- "hover:bg-tertiary-soft",
196
- "hover:border-tertiary-bold",
197
- "focus:border-tertiary-light",
198
- "data-[selected=true]:bg-tertiary",
199
- "data-[selected=true]:border-tertiary",
200
- "data-[selected=true]:text-white"
201
- ].join(" "),
202
- ghost: [
203
- "hover:bg-ghost-soft",
204
- "hover:border-ghost-bold",
205
- "focus:border-ghost-light",
206
- "data-[selected=true]:bg-ghost",
207
- "data-[selected=true]:border-ghost",
208
- "data-[selected=true]:text-white"
209
- ].join(" "),
210
- neutral: ["hover:bg-gray-soft", "hover:border-gray-light"].join(" ")
211
- },
212
- shape: {
213
- circle: "rounded-full",
214
- rounded: "rounded-lg"
215
- },
216
- size: {
217
- sm: "h-7 px-3 text-sm min-w-[2.25rem]",
218
- md: "h-9 px-4 text-sm min-w-[2.5rem]",
219
- lg: "h-10 px-8 text-lg min-w-[2.75rem]"
220
- }
221
- },
222
- defaultVariants: {
223
- variant: "primary",
224
- shape: "circle",
225
- size: "sm"
226
- }
227
- }
228
- ), pe = m.forwardRef(({ children: r, className: t, disabled: o, id: s, value: n, ...i }, l) => {
229
- const {
230
- variant: c = "primary",
231
- shape: a = "circle",
232
- size: g = "sm",
233
- ...u
234
- } = me(), f = E(), d = s || f, h = o || u.disabled, b = u.value === n, y = (w) => {
235
- h || u.onChange?.(n), i.onChange?.(w);
236
- };
237
- return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
238
- /* @__PURE__ */ e.jsx(
239
- "input",
240
- {
241
- ref: l,
242
- type: "radio",
243
- id: d,
244
- name: u.name,
245
- value: n,
246
- checked: b,
247
- disabled: h,
248
- onChange: y,
249
- className: "sr-only",
250
- ...i
251
- }
252
- ),
253
- /* @__PURE__ */ e.jsx(
254
- "label",
255
- {
256
- htmlFor: d,
257
- "data-selected": b,
258
- className: p(
259
- xe({
260
- variant: c,
261
- shape: a,
262
- size: g
263
- }),
264
- h && "opacity-50 cursor-not-allowed pointer-events-none",
265
- t
266
- ),
267
- children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center gap-2", children: r })
268
- }
269
- )
270
- ] });
271
- }), ye = z(
272
- ({
273
- variant: r = "primary",
274
- shape: t = "circle",
275
- size: o = "sm",
276
- label: s,
277
- helperText: n,
278
- error: i,
279
- className: l,
280
- disabled: c,
281
- name: a,
282
- value: g,
283
- onChange: u,
284
- children: f,
285
- ...d
286
- }, h) => {
287
- const b = !!i, y = {
288
- variant: r,
289
- shape: t,
290
- size: o,
291
- disabled: c,
292
- error: b,
293
- name: a,
294
- value: g,
295
- onChange: u
296
- };
297
- return /* @__PURE__ */ e.jsx(H.Provider, { value: y, children: /* @__PURE__ */ e.jsxs("div", { ref: h, className: p("w-full", l), ...d, children: [
298
- s && /* @__PURE__ */ e.jsx("div", { className: "block text-sm font-medium text-foreground mb-3", children: s }),
299
- /* @__PURE__ */ e.jsx("div", { className: "flex flex-wrap gap-2", children: f }),
300
- b && /* @__PURE__ */ e.jsx("div", { className: "mt-2 text-sm text-danger", role: "alert", children: i }),
301
- !b && n && /* @__PURE__ */ e.jsx("div", { className: "mt-2 text-sm text-gray-600", children: n })
302
- ] }) });
303
- }
304
- ), hr = Object.assign(ye, {
305
- Option: pe
306
- }), T = R(null), we = () => {
307
- const r = O(T);
308
- if (!r)
309
- throw new Error(
310
- "useChipMultipleInputContext must be used within ChipMultipleInputContext"
311
- );
312
- return r;
313
- }, ve = v(
314
- "inline-flex items-center bg-white transition-colors duration-200 cursor-pointer border border-border",
315
- {
316
- variants: {
317
- variant: {
318
- primary: [
319
- "hover:bg-primary-soft",
320
- "hover:border-primary-bold",
321
- "focus:border-primary-light",
322
- "data-[selected=true]:bg-primary",
323
- "data-[selected=true]:border-primary",
324
- "data-[selected=true]:text-white"
325
- ].join(" "),
326
- secondary: [
327
- "hover:bg-secondary-soft",
328
- "hover:border-secondary-bold",
329
- "focus:border-secondary-light",
330
- "data-[selected=true]:bg-secondary",
331
- "data-[selected=true]:border-secondary",
332
- "data-[selected=true]:text-white"
333
- ].join(" "),
334
- tertiary: [
335
- "hover:bg-tertiary-soft",
336
- "hover:border-tertiary-bold",
337
- "focus:border-tertiary-light",
338
- "data-[selected=true]:bg-tertiary",
339
- "data-[selected=true]:border-tertiary",
340
- "data-[selected=true]:text-white"
341
- ].join(" "),
342
- ghost: [
343
- "hover:bg-ghost-soft",
344
- "hover:border-ghost-bold",
345
- "focus:border-ghost-light",
346
- "data-[selected=true]:bg-ghost",
347
- "data-[selected=true]:border-ghost",
348
- "data-[selected=true]:text-white"
349
- ].join(" "),
350
- neutral: ["hover:bg-gray-soft", "hover:border-gray-light"].join(" ")
351
- },
352
- selected: {
353
- true: "",
354
- false: ""
355
- },
356
- shape: {
357
- circle: "rounded-full",
358
- rounded: "rounded-lg"
359
- },
360
- size: {
361
- sm: "h-7 px-3 text-sm min-w-[2.25rem]",
362
- md: "h-9 px-4 text-sm min-w-[2.5rem]",
363
- lg: "h-10 px-8 text-lg min-w-[2.75rem]"
364
- }
365
- }
366
- }
367
- ), q = z(({ children: r, className: t, disabled: o, id: s, value: n, ...i }, l) => {
368
- const {
369
- variant: c = "primary",
370
- shape: a = "circle",
371
- size: g = "sm",
372
- ...u
373
- } = we(), f = m.useId(), d = s || f, h = o || u.disabled, b = u.value?.includes(n) ?? !1, y = (w) => {
374
- if (!h) {
375
- const j = u.value || [];
376
- let x;
377
- b ? x = j.filter((V) => V !== n) : x = [...j, n], u.onChange?.(x);
378
- }
379
- i.onChange?.(w);
380
- };
381
- return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
382
- /* @__PURE__ */ e.jsx(
383
- "input",
384
- {
385
- ref: l,
386
- type: "checkbox",
387
- id: d,
388
- name: `${u.name}[]`,
389
- value: n,
390
- checked: b,
391
- disabled: h,
392
- onChange: y,
393
- className: "sr-only",
394
- ...i
395
- }
396
- ),
397
- /* @__PURE__ */ e.jsx(
398
- "label",
399
- {
400
- htmlFor: d,
401
- "data-selected": b,
402
- className: p(
403
- ve({
404
- variant: c,
405
- shape: a,
406
- size: g
407
- }),
408
- h && "opacity-50 cursor-not-allowed pointer-events-none",
409
- t
410
- ),
411
- children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center gap-2", children: r })
412
- }
413
- )
414
- ] });
415
- });
416
- q.displayName = "ChipMultipleOption";
417
- const ke = z(
418
- ({
419
- variant: r = "primary",
420
- shape: t = "circle",
421
- size: o = "sm",
422
- label: s,
423
- helperText: n,
424
- error: i,
425
- className: l,
426
- disabled: c,
427
- name: a,
428
- value: g = [],
429
- onChange: u,
430
- children: f,
431
- ...d
432
- }, h) => {
433
- const b = !!i, y = {
434
- variant: r,
435
- shape: t,
436
- size: o,
437
- disabled: c,
438
- error: b,
439
- name: a,
440
- value: g,
441
- onChange: u
442
- };
443
- return /* @__PURE__ */ e.jsx(T.Provider, { value: y, children: /* @__PURE__ */ e.jsxs("div", { ref: h, className: p("w-full", l), ...d, children: [
444
- s && /* @__PURE__ */ e.jsx("div", { className: "block text-sm font-medium text-foreground mb-3", children: s }),
445
- /* @__PURE__ */ e.jsx("div", { className: "flex flex-wrap gap-2", children: f }),
446
- b && /* @__PURE__ */ e.jsx("div", { className: "mt-2 text-sm text-danger", role: "alert", children: i }),
447
- !b && n && /* @__PURE__ */ e.jsx("div", { className: "mt-2 text-sm text-gray-600", children: n })
448
- ] }) });
449
- }
450
- ), br = Object.assign(ke, {
451
- Option: q
452
- }), je = v(
453
- "block w-full rounded-md border bg-white transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none disabled:bg-gray-50",
454
- {
455
- variants: {
456
- variant: {
457
- // Core variants using Versaur color system
458
- primary: "border-primary/30 text-foreground focus:border-primary focus:ring-primary/20",
459
- secondary: "border-secondary/30 text-foreground focus:border-secondary focus:ring-secondary/20",
460
- tertiary: "border-tertiary/30 text-foreground focus:border-tertiary focus:ring-tertiary/20",
461
- ghost: "border-ghost/30 text-foreground focus:border-ghost focus:ring-ghost/20",
462
- neutral: "border-gray-300 text-foreground focus:border-gray-400 focus:ring-gray-400/20",
463
- // Outline variants
464
- "primary-outline": "border-primary text-foreground focus:border-primary focus:ring-primary/20",
465
- "secondary-outline": "border-secondary text-foreground focus:border-secondary focus:ring-secondary/20",
466
- "tertiary-outline": "border-tertiary text-foreground focus:border-tertiary focus:ring-tertiary/20",
467
- "ghost-outline": "border-ghost text-foreground focus:border-ghost focus:ring-ghost/20",
468
- "neutral-outline": "border-gray-400 text-foreground focus:border-gray-500 focus:ring-gray-500/20",
469
- // Semantic variants
470
- success: "border-success/30 text-foreground focus:border-success focus:ring-success/20",
471
- "success-outline": "border-success text-foreground focus:border-success focus:ring-success/20",
472
- info: "border-info/30 text-foreground focus:border-info focus:ring-info/20",
473
- "info-outline": "border-info text-foreground focus:border-info focus:ring-info/20",
474
- warning: "border-warning/30 text-foreground focus:border-warning focus:ring-warning/20",
475
- "warning-outline": "border-warning text-foreground focus:border-warning focus:ring-warning/20",
476
- danger: "border-danger bg-danger/5 text-foreground focus:border-danger focus:ring-danger/20",
477
- "danger-outline": "border-danger bg-danger/5 text-foreground focus:border-danger focus:ring-danger/20"
478
- }
479
- },
480
- defaultVariants: {
481
- variant: "primary"
482
- }
483
- }
484
- ), $ = m.forwardRef(
485
- ({
486
- variant: r = "primary",
487
- label: t,
488
- leftContent: o,
489
- rightContent: s,
490
- helperText: n,
491
- error: i,
492
- className: l,
493
- disabled: c,
494
- id: a,
495
- ...g
496
- }, u) => {
497
- const f = m.useId(), d = a || f, h = !!i;
498
- return /* @__PURE__ */ e.jsxs("div", { children: [
499
- t && /* @__PURE__ */ e.jsx(
500
- "label",
501
- {
502
- htmlFor: d,
503
- className: "block text-sm font-medium text-foreground mb-2",
504
- children: t
505
- }
506
- ),
507
- /* @__PURE__ */ e.jsxs("div", { className: p("relative w-full", l), children: [
508
- o && /* @__PURE__ */ e.jsx(
509
- "span",
510
- {
511
- className: "absolute left-2.5 top-0 bottom-0 pointer-events-none text-gray-500 flex items-center justify-center w-5",
512
- "data-testid": "left-content",
513
- children: o
514
- }
515
- ),
516
- /* @__PURE__ */ e.jsx(
517
- "input",
518
- {
519
- ref: u,
520
- id: d,
521
- "aria-invalid": h,
522
- "aria-disabled": c,
523
- disabled: c,
524
- className: p(
525
- je({
526
- variant: h ? "danger" : r
527
- }),
528
- o ? "pl-9" : "pl-3",
529
- s ? "pr-9" : "pr-3",
530
- "h-9"
531
- ),
532
- ...g
533
- }
534
- ),
535
- s && /* @__PURE__ */ e.jsx(
536
- "span",
537
- {
538
- className: "absolute right-2.5 top-0 bottom-0 pointer-events-none text-gray-500 flex items-center justify-center w-5",
539
- "data-testid": "right-content",
540
- children: s
541
- }
542
- )
543
- ] }),
544
- h && /* @__PURE__ */ e.jsx("div", { className: "mt-1 text-sm text-danger", role: "alert", children: i }),
545
- !h && n && /* @__PURE__ */ e.jsx("div", { className: "mt-1 text-sm text-gray-600", children: n })
546
- ] });
547
- }
548
- );
549
- $.displayName = "TextInput";
550
- function Ie(r) {
551
- if (!r) return "";
552
- const t = new Date(r);
553
- return isNaN(t.getTime()) ? r : t.toLocaleDateString(void 0, {
554
- year: "numeric",
555
- month: "short",
556
- day: "numeric"
557
- });
558
- }
559
- const mr = m.forwardRef(function({ value: t = "", onChange: o, label: s, formatter: n, ...i }, l) {
560
- const c = A(null), a = (d) => {
561
- c.current = d, typeof l == "function" ? l(d) : l && typeof l == "object" && (l.current = d);
562
- }, g = () => {
563
- c.current && (typeof c.current.showPicker == "function" ? c.current.showPicker() : c.current.focus());
564
- }, u = (d) => {
565
- o(d.target.value);
566
- }, f = (n ?? Ie)(t);
567
- return /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
568
- /* @__PURE__ */ e.jsx(
569
- $,
570
- {
571
- type: "text",
572
- value: f,
573
- label: s,
574
- readOnly: !0,
575
- tabIndex: 0,
576
- "aria-hidden": "true",
577
- onClick: g,
578
- leftContent: /* @__PURE__ */ e.jsx(S, { as: ie, color: "inherit", size: "sm" }),
579
- "data-testid": "date-single-picker-visible-input",
580
- ...i
581
- }
582
- ),
583
- /* @__PURE__ */ e.jsx(
584
- "input",
585
- {
586
- ref: a,
587
- type: "date",
588
- value: t,
589
- onChange: u,
590
- className: "sr-only absolute opacity-0 h-0 w-0 pointer-events-none",
591
- tabIndex: -1,
592
- "aria-label": typeof s == "string" ? s : void 0
593
- }
594
- )
595
- ] });
596
- }), xr = z(
597
- (r, t) => /* @__PURE__ */ e.jsx(
598
- $,
599
- {
600
- ...r,
601
- ref: t,
602
- type: "email",
603
- autoComplete: "email",
604
- inputMode: "email",
605
- leftContent: /* @__PURE__ */ e.jsx(S, { as: ce, color: "inherit", size: "sm" })
606
- }
607
- )
608
- ), Ce = v(
609
- // align sizing with TextInput which uses h-9; keep width slightly narrower for single-digit input
610
- "w-9 h-9 text-center border rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none disabled:bg-gray-50 text-sm font-semibold",
611
- {
612
- variants: {
613
- variant: {
614
- // Core variants using Versaur color system
615
- primary: "border-primary/30 text-foreground focus:border-primary focus:ring-primary/20",
616
- secondary: "border-secondary/30 text-foreground focus:border-secondary focus:ring-secondary/20",
617
- tertiary: "border-tertiary/30 text-foreground focus:border-tertiary focus:ring-tertiary/20",
618
- ghost: "border-ghost/30 text-foreground focus:border-ghost focus:ring-ghost/20",
619
- neutral: "border-gray-300 text-foreground focus:border-gray-400 focus:ring-gray-400/20",
620
- // Outline variants
621
- "primary-outline": "border-primary text-foreground focus:border-primary focus:ring-primary/20",
622
- "secondary-outline": "border-secondary text-foreground focus:border-secondary focus:ring-secondary/20",
623
- "tertiary-outline": "border-tertiary text-foreground focus:border-tertiary focus:ring-tertiary/20",
624
- "ghost-outline": "border-ghost text-foreground focus:border-ghost focus:ring-ghost/20",
625
- "neutral-outline": "border-gray-400 text-foreground focus:border-gray-500 focus:ring-gray-500/20",
626
- // Semantic variants
627
- success: "border-success/30 text-foreground focus:border-success focus:ring-success/20",
628
- "success-outline": "border-success text-foreground focus:border-success focus:ring-success/20",
629
- info: "border-info/30 text-foreground focus:border-info focus:ring-info/20",
630
- "info-outline": "border-info text-foreground focus:border-info focus:ring-info/20",
631
- warning: "border-warning/30 text-foreground focus:border-warning focus:ring-warning/20",
632
- "warning-outline": "border-warning text-foreground focus:border-warning focus:ring-warning/20",
633
- danger: "border-danger bg-danger/5 text-foreground focus:border-danger focus:ring-danger/20",
634
- "danger-outline": "border-danger bg-danger/5 text-foreground focus:border-danger focus:ring-danger/20"
635
- }
636
- },
637
- defaultVariants: {
638
- variant: "primary"
639
- }
640
- }
641
- ), Ne = (r) => /^\d$/.test(r), M = (r) => r.replace(/\D/g, "").slice(0, 6), J = m.forwardRef(
642
- ({
643
- value: r,
644
- onChange: t,
645
- onKeyDown: o,
646
- onFocus: s,
647
- onPaste: n,
648
- disabled: i,
649
- error: l,
650
- variant: c,
651
- secure: a,
652
- inputRef: g,
653
- index: u,
654
- id: f
655
- }, d) => /* @__PURE__ */ e.jsx(
656
- "input",
657
- {
658
- ref: g,
659
- id: f,
660
- type: a ? "password" : "text",
661
- inputMode: "numeric",
662
- maxLength: 1,
663
- value: a ? r ? "•" : "" : r,
664
- onChange: (h) => {
665
- const b = h.target.value;
666
- (b === "" || Ne(b)) && t(b);
667
- },
668
- onKeyDown: o,
669
- onFocus: s,
670
- onPaste: n,
671
- disabled: i,
672
- "aria-invalid": l,
673
- "aria-disabled": i,
674
- className: p(
675
- Ce({
676
- variant: l ? "danger" : c
677
- })
678
- ),
679
- autoComplete: "one-time-code",
680
- "data-testid": `pin-input-${u}`
681
- }
682
- )
683
- );
684
- J.displayName = "PinInput";
685
- const Ve = m.forwardRef(
686
- ({
687
- variant: r = "primary",
688
- label: t,
689
- helperText: o,
690
- error: s,
691
- disabled: n,
692
- value: i,
693
- defaultValue: l,
694
- onChange: c,
695
- onComplete: a,
696
- autoSubmit: g = !1,
697
- className: u,
698
- id: f,
699
- name: d,
700
- required: h,
701
- secure: b = !1,
702
- ...y
703
- }, w) => {
704
- const j = m.useId(), x = f || j, V = !!s, N = m.useRef([]), [re, te] = m.useState(
705
- () => M(l || "")
706
- ), F = i !== void 0 ? M(i) : re, P = F.split("").concat(Array(6 - F.length).fill("")), D = m.useCallback(
707
- (I) => {
708
- const k = M(I);
709
- if (i === void 0 && te(k), c?.(k), k.length === 6 && (a?.(k), g)) {
710
- const C = N.current[0]?.closest("form");
711
- C && C.requestSubmit();
712
- }
713
- },
714
- [i, c, a, g]
715
- ), oe = m.useCallback(
716
- (I, k) => {
717
- const C = [...P];
718
- C[I] = k;
719
- const B = C.join("").replace(/\s+$/, "");
720
- D(B), k && I < 5 && N.current[I + 1]?.focus();
721
- },
722
- [P, D]
723
- ), ne = m.useCallback(
724
- (I, k) => {
725
- k.key === "Backspace" && !P[I] && I > 0 || k.key === "ArrowLeft" && I > 0 ? N.current[I - 1]?.focus() : k.key === "ArrowRight" && I < 5 && N.current[I + 1]?.focus();
726
- },
727
- [P]
728
- ), se = m.useCallback(
729
- (I) => {
730
- I.preventDefault();
731
- const k = I.clipboardData.getData("text"), C = M(k);
732
- if (C.length > 0) {
733
- D(C);
734
- const B = Math.min(C.length, 5);
735
- N.current[B]?.focus();
736
- }
737
- },
738
- [D]
739
- );
740
- return /* @__PURE__ */ e.jsxs("div", { ref: w, className: p("w-full", u), ...y, children: [
741
- t && /* @__PURE__ */ e.jsxs(
742
- "label",
743
- {
744
- htmlFor: `${x}-0`,
745
- className: "block text-sm font-medium text-foreground mb-2",
746
- children: [
747
- t,
748
- h && /* @__PURE__ */ e.jsx("span", { className: "text-danger ml-1", children: "*" })
749
- ]
750
- }
751
- ),
752
- /* @__PURE__ */ e.jsx(
753
- "div",
754
- {
755
- className: "flex gap-2 justify-center",
756
- role: "group",
757
- "aria-labelledby": t ? `${x}-label` : void 0,
758
- "aria-describedby": V ? `${x}-error` : o ? `${x}-helper` : void 0,
759
- children: P.map((I, k) => /* @__PURE__ */ e.jsx(
760
- J,
761
- {
762
- value: I,
763
- onChange: (C) => oe(k, C),
764
- onKeyDown: (C) => ne(k, C),
765
- onFocus: () => {
766
- const C = N.current[k];
767
- C && C.select();
768
- },
769
- onPaste: se,
770
- disabled: n,
771
- error: V,
772
- variant: r,
773
- secure: b,
774
- inputRef: (C) => {
775
- N.current[k] = C;
776
- },
777
- index: k,
778
- id: `${x}-${k}`
779
- },
780
- k
781
- ))
782
- }
783
- ),
784
- d && /* @__PURE__ */ e.jsx(
785
- "input",
786
- {
787
- type: "hidden",
788
- name: d,
789
- value: F,
790
- required: h
791
- }
792
- ),
793
- V && /* @__PURE__ */ e.jsx(
794
- "div",
795
- {
796
- id: `${x}-error`,
797
- className: "mt-2 text-sm text-danger",
798
- role: "alert",
799
- children: s
800
- }
801
- ),
802
- !V && o && /* @__PURE__ */ e.jsx("div", { id: `${x}-helper`, className: "mt-2 text-sm text-gray-600", children: o })
803
- ] });
804
- }
805
- );
806
- Ve.displayName = "PinField";
807
- function ze(r, t) {
808
- ae(() => {
809
- typeof r == "number" && !isNaN(r) ? t(`${r}`) : r === "" || r === null || r === void 0 ? t("") : typeof r == "string" && t(r);
810
- }, [r, t]);
811
- }
812
- function Se(r, t = !1) {
813
- if (r === "" || r === "-" && t) return !0;
814
- const o = t && r.startsWith("-") ? r.slice(1) : r;
815
- if (t && r.startsWith("-") && o === "") return !0;
816
- if (o.startsWith(".") || o.startsWith(",") || !/^[\d.,]+$/.test(o)) return !1;
817
- const s = o.split(",");
818
- if (s.length > 2) return !1;
819
- const n = s[0], i = s[1];
820
- return !(n === "" || !Re(n) || i !== void 0 && i !== "" && !Oe(i));
821
- }
822
- function Re(r) {
823
- if (r === "") return !1;
824
- if (!r.includes("."))
825
- return /^\d+$/.test(r);
826
- const t = r.split(".");
827
- if (t[0] === "" || !/^\d{1,3}$/.test(t[0])) return !1;
828
- for (let o = 1; o < t.length; o++) {
829
- const s = t[o];
830
- if (o === t.length - 1) {
831
- if (s !== "" && !/^\d{1,3}$/.test(s)) return !1;
832
- } else if (!/^\d{3}$/.test(s)) return !1;
833
- }
834
- return !0;
835
- }
836
- function Oe(r) {
837
- return /^\d{1,2}$/.test(r);
838
- }
839
- function Q(r, t = !1) {
840
- if (r === "") return "";
841
- const o = r.startsWith("-");
842
- if (o && !t)
843
- return Q(r.slice(1), !1);
844
- if (o && r.length === 1) return "-";
845
- let n = (o ? r.slice(1) : r).replace(/[^\d.,]/g, "");
846
- const i = n.lastIndexOf(",");
847
- if (i !== -1) {
848
- const l = n.slice(0, i).replace(/,/g, ""), c = n.slice(i + 1).replace(/,/g, "");
849
- n = l + "," + c;
850
- }
851
- return n = n.replace(/\.{2,}/g, "."), (o ? "-" : "") + n;
852
- }
853
- const pr = ({
854
- value: r,
855
- onChange: t,
856
- allowNegative: o = !1,
857
- inputProps: s,
858
- label: n,
859
- helperText: i,
860
- error: l,
861
- variant: c,
862
- ...a
863
- }) => {
864
- const g = A(null), [u, f] = L(
865
- r === "" ? "" : String(r)
866
- );
867
- ze(r, f);
868
- const d = (h) => {
869
- const b = h.target.value, y = Q(b, o);
870
- Se(y, o) ? (f(y), t(y)) : h.preventDefault();
871
- };
872
- return /* @__PURE__ */ e.jsx(
873
- $,
874
- {
875
- ref: g,
876
- type: "text",
877
- label: n,
878
- value: u,
879
- onChange: d,
880
- error: l,
881
- helperText: i,
882
- placeholder: a.placeholder,
883
- leftContent: /* @__PURE__ */ e.jsx(S, { as: de, color: "inherit", size: "sm" }),
884
- variant: c,
885
- inputMode: "numeric",
886
- autoComplete: "off",
887
- pattern: "[0-9.,-]*",
888
- ...s,
889
- ...a
890
- }
891
- );
892
- }, $e = v("space-y-2", {
893
- variants: {
894
- direction: {
895
- vertical: "space-y-2 space-x-0",
896
- horizontal: "flex flex-wrap gap-4 space-y-0"
897
- }
898
- },
899
- defaultVariants: {
900
- direction: "vertical"
901
- }
902
- }), Pe = v(
903
- "relative h-4 w-4 rounded-full border cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed appearance-none bg-white",
904
- {
905
- variants: {
906
- variant: {
907
- // Core variants using Versaur color system
908
- primary: "border-primary/40 checked:bg-primary checked:border-primary focus:ring-primary/20",
909
- secondary: "border-secondary/40 checked:bg-secondary checked:border-secondary focus:ring-secondary/20",
910
- tertiary: "border-tertiary/40 checked:bg-tertiary checked:border-tertiary focus:ring-tertiary/20",
911
- ghost: "border-ghost/40 checked:bg-ghost checked:border-ghost focus:ring-ghost/20",
912
- neutral: "border-gray-300 checked:bg-gray-500 checked:border-gray-500 focus:ring-gray-400/20",
913
- // Outline variants
914
- "primary-outline": "border-primary checked:bg-white checked:border-primary focus:ring-primary/20",
915
- "secondary-outline": "border-secondary checked:bg-white checked:border-secondary focus:ring-secondary/20",
916
- "tertiary-outline": "border-tertiary checked:bg-white checked:border-tertiary focus:ring-tertiary/20",
917
- "ghost-outline": "border-ghost checked:bg-white checked:border-ghost focus:ring-ghost/20",
918
- "neutral-outline": "border-gray-400 checked:bg-white checked:border-gray-400 focus:ring-gray-500/20",
919
- // Semantic variants
920
- success: "border-success/40 checked:bg-success checked:border-success focus:ring-success/20",
921
- "success-outline": "border-success checked:bg-white checked:border-success focus:ring-success/20",
922
- info: "border-info/40 checked:bg-info checked:border-info focus:ring-info/20",
923
- "info-outline": "border-info checked:bg-white checked:border-info focus:ring-info/20",
924
- warning: "border-warning/40 checked:bg-warning checked:border-warning focus:ring-warning/20",
925
- "warning-outline": "border-warning checked:bg-white checked:border-warning focus:ring-warning/20",
926
- danger: "border-danger/40 checked:bg-danger checked:border-danger focus:ring-danger/20",
927
- "danger-outline": "border-danger checked:bg-white checked:border-danger focus:ring-danger/20"
928
- },
929
- size: {
930
- sm: "h-3 w-3",
931
- md: "h-4 w-4",
932
- lg: "h-5 w-5"
933
- }
934
- },
935
- defaultVariants: {
936
- variant: "primary",
937
- size: "md"
938
- }
939
- }
940
- ), De = v(
941
- "text-foreground cursor-pointer select-none",
942
- {
943
- variants: {
944
- size: {
945
- sm: "text-xs",
946
- md: "text-sm",
947
- lg: "text-base"
948
- },
949
- disabled: {
950
- true: "opacity-50 cursor-not-allowed",
951
- false: ""
952
- }
953
- },
954
- defaultVariants: {
955
- size: "md",
956
- disabled: !1
957
- }
958
- }
959
- ), U = R(
960
- null
961
- ), Me = () => {
962
- const r = O(U);
963
- if (!r)
964
- throw new Error(
965
- "useRadioInputContext must be used within RadioInputContext"
966
- );
967
- return r;
968
- }, Ee = m.forwardRef(
969
- ({ children: r, description: t, className: o, disabled: s, id: n, value: i, ...l }, c) => {
970
- const a = Me(), g = m.useId(), u = n || g, f = s || a.disabled, d = a.error ? "danger" : a.variant || "primary";
971
- return /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
972
- /* @__PURE__ */ e.jsx("div", { className: "relative flex items-center", children: /* @__PURE__ */ e.jsx(
973
- "input",
974
- {
975
- ref: c,
976
- type: "radio",
977
- id: u,
978
- name: a.name,
979
- value: i,
980
- disabled: f,
981
- className: p(
982
- Pe({
983
- variant: d,
984
- size: a.size
985
- }),
986
- // Custom radio dot styling using ::before - centered positioning with size variants
987
- 'before:content-[""] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-white before:opacity-0 before:transition-opacity before:duration-200',
988
- // Size-specific radio dot dimensions
989
- a.size === "sm" && "before:w-[6px] before:h-[6px]",
990
- a.size === "md" && "before:w-[8px] before:h-[8px]",
991
- a.size === "lg" && "before:w-[10px] before:h-[10px]",
992
- "checked:before:opacity-100",
993
- // Outline variants use colored radio dot
994
- d?.includes("outline") && "checked:before:bg-current",
995
- o
996
- ),
997
- ...l
998
- }
999
- ) }),
1000
- /* @__PURE__ */ e.jsxs("div", { className: "flex-1", children: [
1001
- /* @__PURE__ */ e.jsx(
1002
- "label",
1003
- {
1004
- htmlFor: u,
1005
- className: De({
1006
- size: a.size,
1007
- disabled: f
1008
- }),
1009
- children: r
1010
- }
1011
- ),
1012
- t && /* @__PURE__ */ e.jsx(
1013
- "div",
1014
- {
1015
- className: p(
1016
- "text-gray-600 mt-1",
1017
- a.size === "sm" && "text-xs",
1018
- a.size === "md" && "text-xs",
1019
- a.size === "lg" && "text-sm",
1020
- f && "opacity-50"
1021
- ),
1022
- children: t
1023
- }
1024
- )
1025
- ] })
1026
- ] });
1027
- }
1028
- ), Fe = m.forwardRef(
1029
- ({
1030
- variant: r = "primary",
1031
- size: t = "md",
1032
- label: o,
1033
- helperText: s,
1034
- error: n,
1035
- direction: i = "vertical",
1036
- className: l,
1037
- disabled: c,
1038
- name: a,
1039
- children: g,
1040
- ...u
1041
- }, f) => {
1042
- const d = !!n, h = {
1043
- variant: r,
1044
- size: t,
1045
- disabled: c,
1046
- error: d,
1047
- name: a
1048
- };
1049
- return /* @__PURE__ */ e.jsx(U.Provider, { value: h, children: /* @__PURE__ */ e.jsxs("div", { ref: f, className: p("w-full", l), ...u, children: [
1050
- o && /* @__PURE__ */ e.jsx("div", { className: "block text-sm font-medium text-foreground mb-3", children: o }),
1051
- /* @__PURE__ */ e.jsx("div", { className: $e({ direction: i }), children: g }),
1052
- d && /* @__PURE__ */ e.jsx("div", { className: "mt-2 text-sm text-danger", role: "alert", children: n }),
1053
- !d && s && /* @__PURE__ */ e.jsx("div", { className: "mt-2 text-sm text-gray-600", children: s })
1054
- ] }) });
1055
- }
1056
- ), yr = Object.assign(Fe, {
1057
- Option: Ee
1058
- }), wr = z(
1059
- ({
1060
- autoComplete: r = "off",
1061
- spellCheck: t = !1,
1062
- inputMode: o = "search",
1063
- placeholder: s = "Search...",
1064
- maxLength: n = 256,
1065
- enterKeyHint: i = "search",
1066
- "aria-label": l = "Search",
1067
- // internal default, not in props
1068
- ...c
1069
- }, a) => /* @__PURE__ */ e.jsx(
1070
- $,
1071
- {
1072
- ref: a,
1073
- type: "search",
1074
- inputMode: o,
1075
- autoComplete: r,
1076
- spellCheck: t,
1077
- placeholder: s,
1078
- maxLength: n,
1079
- enterKeyHint: i,
1080
- "aria-label": l,
1081
- leftContent: /* @__PURE__ */ e.jsx(S, { as: le, color: "inherit", size: "sm" }),
1082
- ...c
1083
- }
1084
- )
1085
- ), Be = v(
1086
- "flex flex-row rounded-full border overflow-hidden p-1 gap-0.25",
1087
- {
1088
- variants: {
1089
- variant: {
1090
- // Core variants using Versaur color system
1091
- primary: "border-primary-light",
1092
- secondary: "border-secondary-light",
1093
- tertiary: "border-tertiary-light",
1094
- ghost: "border-ghost-light",
1095
- neutral: "border-gray-200",
1096
- // Semantic variants
1097
- success: "border-success-light",
1098
- info: "border-info-light",
1099
- warning: "border-warning-light",
1100
- danger: "border-danger-light"
1101
- },
1102
- size: {
1103
- sm: "text-xs",
1104
- md: "text-sm",
1105
- lg: "text-base"
1106
- },
1107
- error: {
1108
- true: "border-danger",
1109
- false: ""
1110
- }
1111
- },
1112
- defaultVariants: {
1113
- variant: "primary",
1114
- size: "md",
1115
- error: !1
1116
- }
1117
- }
1118
- ), Ae = v(
1119
- "inline relative flex flex-row items-center px-3 py-2 text-center font-medium transition-all duration-200 cursor-pointer border-0 bg-transparent outline-none focus:ring-2 focus:ring-offset-1 flex-1",
1120
- {
1121
- variants: {
1122
- variant: {
1123
- // Core variants using Versaur color system
1124
- primary: "text-ghost hover:text-primary focus:ring-primary/30",
1125
- secondary: "text-ghost hover:text-secondary focus:ring-secondary/30",
1126
- tertiary: "text-ghost hover:text-tertiary focus:ring-tertiary/30",
1127
- ghost: "text-ghost hover:text-ghost focus:ring-ghost/30",
1128
- neutral: "text-ghost hover:text-gray-700 focus:ring-gray-400/30",
1129
- // Semantic variants
1130
- success: "text-ghost hover:text-success focus:ring-success/30",
1131
- info: "text-ghost hover:text-info focus:ring-info/30",
1132
- warning: "text-ghost hover:text-warning focus:ring-warning/30",
1133
- danger: "text-ghost hover:text-danger focus:ring-danger/30"
1134
- },
1135
- size: {
1136
- sm: "px-2 py-1.5 text-xs",
1137
- md: "px-3 py-2 text-sm",
1138
- lg: "px-4 py-2.5 text-base"
1139
- },
1140
- rounded: {
1141
- first: "rounded-l-full",
1142
- middle: "",
1143
- last: "rounded-r-full",
1144
- single: "rounded-full"
1145
- }
1146
- },
1147
- defaultVariants: {
1148
- variant: "primary",
1149
- size: "md",
1150
- rounded: "middle"
1151
- }
1152
- }
1153
- ), Le = (r) => {
1154
- const t = {
1155
- // Core variants - override hover text color changes
1156
- primary: "bg-primary text-white hover:text-white",
1157
- secondary: "bg-secondary text-white hover:text-white",
1158
- tertiary: "bg-tertiary text-white hover:text-white",
1159
- ghost: "bg-ghost text-white hover:text-white",
1160
- neutral: "bg-gray-500 text-white hover:text-white",
1161
- // Semantic variants - override hover text color changes
1162
- success: "bg-success text-white hover:text-white",
1163
- info: "bg-info text-white hover:text-white",
1164
- warning: "bg-warning text-white hover:text-white",
1165
- danger: "bg-danger text-white hover:text-white"
1166
- };
1167
- return t[r || "primary"] || t.primary;
1168
- }, X = R(null), We = () => {
1169
- const r = O(X);
1170
- if (!r)
1171
- throw new Error(
1172
- "useSegmentSingleInputContext must be used within SegmentSingleInputContext"
1173
- );
1174
- return r;
1175
- }, Y = m.forwardRef(
1176
- ({ children: r, className: t, disabled: o, id: s, value: n, position: i = "middle", ...l }, c) => {
1177
- const a = We(), g = m.useId(), u = s || g, f = o || a.disabled, d = a.error ? "danger" : a.variant || "primary", h = a.value === n, b = (y) => {
1178
- if (!f) {
1179
- const w = a.value === n ? null : n;
1180
- a.onChange?.(w);
1181
- }
1182
- l.onChange?.(y);
1183
- };
1184
- return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
1185
- /* @__PURE__ */ e.jsx(
1186
- "input",
1187
- {
1188
- ref: c,
1189
- type: "radio",
1190
- id: u,
1191
- name: a.name,
1192
- value: n,
1193
- checked: h,
1194
- disabled: f,
1195
- onChange: b,
1196
- className: "sr-only",
1197
- ...l
1198
- }
1199
- ),
1200
- /* @__PURE__ */ e.jsx(
1201
- "label",
1202
- {
1203
- htmlFor: u,
1204
- className: p(
1205
- "flex flex-row items-center justify-center",
1206
- Ae({
1207
- variant: d,
1208
- size: a.size,
1209
- rounded: i
1210
- }),
1211
- h && Le(d),
1212
- f && "opacity-50 cursor-not-allowed pointer-events-none",
1213
- t
1214
- ),
1215
- children: r
1216
- }
1217
- )
1218
- ] });
1219
- }
1220
- );
1221
- Y.displayName = "SegmentOption";
1222
- const Ge = m.forwardRef(
1223
- ({
1224
- variant: r = "primary",
1225
- size: t = "md",
1226
- label: o,
1227
- helperText: s,
1228
- error: n,
1229
- disabled: i,
1230
- name: l,
1231
- value: c,
1232
- onChange: a,
1233
- children: g,
1234
- ...u
1235
- }, f) => {
1236
- const d = !!n, h = {
1237
- variant: r,
1238
- size: t,
1239
- disabled: i,
1240
- error: d,
1241
- name: l,
1242
- value: c,
1243
- onChange: a
1244
- }, b = m.Children.toArray(g), y = b.map((w, j) => {
1245
- if (m.isValidElement(w)) {
1246
- let x;
1247
- return b.length === 1 ? x = "single" : j === 0 ? x = "first" : j === b.length - 1 ? x = "last" : x = "middle", m.cloneElement(
1248
- w,
1249
- { position: x }
1250
- );
1251
- }
1252
- return w;
1253
- });
1254
- return /* @__PURE__ */ e.jsx(X.Provider, { value: h, children: /* @__PURE__ */ e.jsxs("div", { ref: f, ...u, children: [
1255
- o && /* @__PURE__ */ e.jsx("div", { className: "block text-sm font-medium text-foreground mb-3", children: o }),
1256
- /* @__PURE__ */ e.jsx(
1257
- "div",
1258
- {
1259
- className: p(
1260
- Be({
1261
- variant: d ? "danger" : r,
1262
- size: t,
1263
- error: d
1264
- })
1265
- ),
1266
- children: y
1267
- }
1268
- ),
1269
- d && /* @__PURE__ */ e.jsx("div", { className: "mt-2 text-sm text-danger", role: "alert", children: n }),
1270
- !d && s && /* @__PURE__ */ e.jsx("div", { className: "mt-2 text-sm text-gray-600", children: s })
1271
- ] }) });
1272
- }
1273
- ), vr = Object.assign(Ge, {
1274
- Option: Y
1275
- }), _e = v(
1276
- "flex flex-row rounded-full border overflow-hidden p-1 gap-0.25",
1277
- {
1278
- variants: {
1279
- variant: {
1280
- // Core variants using Versaur color system
1281
- primary: "border-primary-light",
1282
- secondary: "border-secondary-light",
1283
- tertiary: "border-tertiary-light",
1284
- ghost: "border-ghost-light",
1285
- neutral: "border-gray-200",
1286
- // Semantic variants
1287
- success: "border-success-light",
1288
- info: "border-info-light",
1289
- warning: "border-warning-light",
1290
- danger: "border-danger-light"
1291
- },
1292
- size: {
1293
- sm: "text-xs",
1294
- md: "text-sm",
1295
- lg: "text-base"
1296
- },
1297
- error: {
1298
- true: "border-danger",
1299
- false: ""
1300
- }
1301
- },
1302
- defaultVariants: {
1303
- variant: "primary",
1304
- size: "md",
1305
- error: !1
1306
- }
1307
- }
1308
- ), Ke = v(
1309
- "inline relative flex flex-row items-center px-3 py-2 text-center font-medium transition-all duration-200 cursor-pointer border-0 bg-transparent outline-none focus:ring-2 focus:ring-offset-1 flex-1",
1310
- {
1311
- variants: {
1312
- variant: {
1313
- // Core variants using Versaur color system
1314
- primary: "text-ghost hover:text-primary focus:ring-primary/30",
1315
- secondary: "text-ghost hover:text-secondary focus:ring-secondary/30",
1316
- tertiary: "text-ghost hover:text-tertiary focus:ring-tertiary/30",
1317
- ghost: "text-ghost hover:text-ghost focus:ring-ghost/30",
1318
- neutral: "text-ghost hover:text-gray-700 focus:ring-gray-400/30",
1319
- // Semantic variants
1320
- success: "text-ghost hover:text-success focus:ring-success/30",
1321
- info: "text-ghost hover:text-info focus:ring-info/30",
1322
- warning: "text-ghost hover:text-warning focus:ring-warning/30",
1323
- danger: "text-ghost hover:text-danger focus:ring-danger/30"
1324
- },
1325
- size: {
1326
- sm: "px-2 py-1.5 text-xs",
1327
- md: "px-3 py-2 text-sm",
1328
- lg: "px-4 py-2.5 text-base"
1329
- },
1330
- rounded: {
1331
- first: "rounded-l-full",
1332
- middle: "",
1333
- last: "rounded-r-full",
1334
- single: "rounded-full"
1335
- }
1336
- },
1337
- defaultVariants: {
1338
- variant: "primary",
1339
- size: "md",
1340
- rounded: "middle"
1341
- }
1342
- }
1343
- ), He = (r) => {
1344
- const t = {
1345
- // Core variants - override hover text color changes
1346
- primary: "bg-primary text-white hover:text-white",
1347
- secondary: "bg-secondary text-white hover:text-white",
1348
- tertiary: "bg-tertiary text-white hover:text-white",
1349
- ghost: "bg-ghost text-white hover:text-white",
1350
- neutral: "bg-gray-500 text-white hover:text-white",
1351
- // Semantic variants - override hover text color changes
1352
- success: "bg-success text-white hover:text-white",
1353
- info: "bg-info text-white hover:text-white",
1354
- warning: "bg-warning text-white hover:text-white",
1355
- danger: "bg-danger text-white hover:text-white"
1356
- };
1357
- return t[r || "primary"] || t.primary;
1358
- }, Z = R(null), Te = () => {
1359
- const r = O(Z);
1360
- if (!r)
1361
- throw new Error(
1362
- "useSegmentMultipleInputContext must be used within SegmentMultipleInputContext"
1363
- );
1364
- return r;
1365
- }, ee = m.forwardRef(
1366
- ({ children: r, className: t, disabled: o, id: s, value: n, position: i = "middle", ...l }, c) => {
1367
- const a = Te(), g = m.useId(), u = s || g, f = o || a.disabled, d = a.error ? "danger" : a.variant || "primary", h = a.value?.includes(n) ?? !1, b = (y) => {
1368
- if (!f) {
1369
- const w = a.value || [];
1370
- let j;
1371
- h ? j = w.filter((x) => x !== n) : j = [...w, n], a.onChange?.(j);
1372
- }
1373
- l.onChange?.(y);
1374
- };
1375
- return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
1376
- /* @__PURE__ */ e.jsx(
1377
- "input",
1378
- {
1379
- ref: c,
1380
- type: "checkbox",
1381
- id: u,
1382
- name: `${a.name}[]`,
1383
- value: n,
1384
- checked: h,
1385
- disabled: f,
1386
- onChange: b,
1387
- className: "sr-only",
1388
- ...l
1389
- }
1390
- ),
1391
- /* @__PURE__ */ e.jsx(
1392
- "label",
1393
- {
1394
- htmlFor: u,
1395
- className: p(
1396
- "flex flex-row items-center justify-center",
1397
- Ke({
1398
- variant: d,
1399
- size: a.size,
1400
- rounded: i
1401
- }),
1402
- h && He(d),
1403
- f && "opacity-50 cursor-not-allowed pointer-events-none",
1404
- t
1405
- ),
1406
- children: r
1407
- }
1408
- )
1409
- ] });
1410
- }
1411
- );
1412
- ee.displayName = "SegmentOption";
1413
- const qe = m.forwardRef(
1414
- ({
1415
- variant: r = "primary",
1416
- size: t = "md",
1417
- label: o,
1418
- helperText: s,
1419
- error: n,
1420
- disabled: i,
1421
- name: l,
1422
- value: c = [],
1423
- onChange: a,
1424
- children: g,
1425
- ...u
1426
- }, f) => {
1427
- const d = !!n, h = {
1428
- variant: r,
1429
- size: t,
1430
- disabled: i,
1431
- error: d,
1432
- name: l,
1433
- value: c,
1434
- onChange: a
1435
- }, b = m.Children.toArray(g), y = b.map((w, j) => {
1436
- if (m.isValidElement(w)) {
1437
- let x;
1438
- return b.length === 1 ? x = "single" : j === 0 ? x = "first" : j === b.length - 1 ? x = "last" : x = "middle", m.cloneElement(
1439
- w,
1440
- { position: x }
1441
- );
1442
- }
1443
- return w;
1444
- });
1445
- return /* @__PURE__ */ e.jsx(Z.Provider, { value: h, children: /* @__PURE__ */ e.jsxs("div", { ref: f, ...u, children: [
1446
- o && /* @__PURE__ */ e.jsx("div", { className: "block text-sm font-medium text-foreground mb-3", children: o }),
1447
- /* @__PURE__ */ e.jsx(
1448
- "div",
1449
- {
1450
- className: p(
1451
- _e({
1452
- variant: d ? "danger" : r,
1453
- size: t,
1454
- error: d
1455
- })
1456
- ),
1457
- children: y
1458
- }
1459
- ),
1460
- d && /* @__PURE__ */ e.jsx("div", { className: "mt-2 text-sm text-danger", role: "alert", children: n }),
1461
- !d && s && /* @__PURE__ */ e.jsx("div", { className: "mt-2 text-sm text-gray-600", children: s })
1462
- ] }) });
1463
- }
1464
- ), kr = Object.assign(qe, {
1465
- Option: ee
1466
- }), Je = v(
1467
- "block w-full rounded-md border bg-white transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none disabled:bg-gray-50 appearance-none bg-no-repeat bg-right pr-10",
1468
- {
1469
- variants: {
1470
- variant: {
1471
- // Core variants using Versaur color system
1472
- primary: "border-primary/30 text-foreground focus:border-primary focus:ring-primary/20",
1473
- secondary: "border-secondary/30 text-foreground focus:border-secondary focus:ring-secondary/20",
1474
- tertiary: "border-tertiary/30 text-foreground focus:border-tertiary focus:ring-tertiary/20",
1475
- ghost: "border-ghost/30 text-foreground focus:border-ghost focus:ring-ghost/20",
1476
- neutral: "border-gray-300 text-foreground focus:border-gray-400 focus:ring-gray-400/20",
1477
- // Outline variants
1478
- "primary-outline": "border-primary text-foreground focus:border-primary focus:ring-primary/20",
1479
- "secondary-outline": "border-secondary text-foreground focus:border-secondary focus:ring-secondary/20",
1480
- "tertiary-outline": "border-tertiary text-foreground focus:border-tertiary focus:ring-tertiary/20",
1481
- "ghost-outline": "border-ghost text-foreground focus:border-ghost focus:ring-ghost/20",
1482
- "neutral-outline": "border-gray-400 text-foreground focus:border-gray-500 focus:ring-gray-500/20",
1483
- // Semantic variants
1484
- success: "border-success/30 text-foreground focus:border-success focus:ring-success/20",
1485
- "success-outline": "border-success text-foreground focus:border-success focus:ring-success/20",
1486
- info: "border-info/30 text-foreground focus:border-info focus:ring-info/20",
1487
- "info-outline": "border-info text-foreground focus:border-info focus:ring-info/20",
1488
- warning: "border-warning/30 text-foreground focus:border-warning focus:ring-warning/20",
1489
- "warning-outline": "border-warning text-foreground focus:border-warning focus:ring-warning/20",
1490
- danger: "border-danger bg-danger/5 text-foreground focus:border-danger focus:ring-danger/20",
1491
- "danger-outline": "border-danger bg-danger/5 text-foreground focus:border-danger focus:ring-danger/20"
1492
- }
1493
- },
1494
- defaultVariants: {
1495
- variant: "primary"
1496
- }
1497
- }
1498
- ), Qe = m.forwardRef(
1499
- ({
1500
- variant: r = "primary",
1501
- label: t,
1502
- helperText: o,
1503
- error: s,
1504
- className: n,
1505
- disabled: i,
1506
- id: l,
1507
- placeholder: c,
1508
- children: a,
1509
- ...g
1510
- }, u) => {
1511
- const f = m.useId(), d = l || f, h = !!s;
1512
- return /* @__PURE__ */ e.jsxs("div", { children: [
1513
- /* @__PURE__ */ e.jsx(
1514
- "label",
1515
- {
1516
- htmlFor: d,
1517
- className: "block text-sm font-medium text-foreground mb-2",
1518
- children: t
1519
- }
1520
- ),
1521
- /* @__PURE__ */ e.jsxs("div", { className: p("relative w-full", n), children: [
1522
- /* @__PURE__ */ e.jsxs(
1523
- "select",
1524
- {
1525
- ref: u,
1526
- id: d,
1527
- "aria-invalid": h,
1528
- "aria-disabled": i,
1529
- disabled: i,
1530
- className: p(
1531
- Je({
1532
- variant: h ? "danger" : r
1533
- }),
1534
- "h-9 pl-3"
1535
- ),
1536
- ...g,
1537
- children: [
1538
- c && /* @__PURE__ */ e.jsx("option", { value: "", disabled: !0, hidden: !0, children: c }),
1539
- a
1540
- ]
1541
- }
1542
- ),
1543
- /* @__PURE__ */ e.jsx("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none", children: /* @__PURE__ */ e.jsx(
1544
- "svg",
1545
- {
1546
- className: "w-5 h-5 text-gray-400",
1547
- xmlns: "http://www.w3.org/2000/svg",
1548
- viewBox: "0 0 20 20",
1549
- fill: "currentColor",
1550
- "aria-hidden": "true",
1551
- children: /* @__PURE__ */ e.jsx(
1552
- "path",
1553
- {
1554
- fillRule: "evenodd",
1555
- d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z",
1556
- clipRule: "evenodd"
1557
- }
1558
- )
1559
- }
1560
- ) })
1561
- ] }),
1562
- h && /* @__PURE__ */ e.jsx("div", { className: "mt-1 text-sm text-danger", role: "alert", children: s }),
1563
- !h && o && /* @__PURE__ */ e.jsx("div", { className: "mt-1 text-sm text-gray-600", children: o })
1564
- ] });
1565
- }
1566
- );
1567
- Qe.displayName = "SelectInput";
1568
- const Ue = v(
1569
- "flex items-center gap-3 cursor-pointer border-b border-border select-none p-4 transition-colors hover:bg-neutral-light",
1570
- {
1571
- variants: {
1572
- checked: {
1573
- true: "",
1574
- false: ""
1575
- },
1576
- disabled: {
1577
- true: "opacity-50 cursor-not-allowed",
1578
- false: ""
1579
- }
1580
- },
1581
- defaultVariants: {
1582
- checked: !1,
1583
- disabled: !1
1584
- }
1585
- }
1586
- ), Xe = v(
1587
- "flex h-6 w-6 items-center justify-center rounded-sm overflow-hidden border border-border transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
1588
- {
1589
- variants: {
1590
- checked: {
1591
- true: "bg-primary",
1592
- false: "border-border bg-white"
1593
- },
1594
- disabled: {
1595
- true: "opacity-50",
1596
- false: "active:scale-95"
1597
- }
1598
- },
1599
- defaultVariants: {
1600
- checked: !1,
1601
- disabled: !1
1602
- }
1603
- }
1604
- ), jr = z(({ value: r, label: t, checked: o, id: s, className: n, disabled: i, ...l }, c) => {
1605
- const a = E(), g = s || a;
1606
- return /* @__PURE__ */ e.jsxs(
1607
- "label",
1608
- {
1609
- htmlFor: g,
1610
- className: p(
1611
- Ue({
1612
- checked: !!o,
1613
- disabled: !!i
1614
- }),
1615
- n
1616
- ),
1617
- "aria-checked": o,
1618
- role: "radio",
1619
- "aria-label": `Select ${r}`,
1620
- tabIndex: i ? -1 : 0,
1621
- children: [
1622
- /* @__PURE__ */ e.jsx(
1623
- "input",
1624
- {
1625
- ref: c,
1626
- id: g,
1627
- type: "radio",
1628
- value: r,
1629
- checked: o,
1630
- disabled: i,
1631
- className: "sr-only",
1632
- "aria-hidden": !0,
1633
- "aria-checked": o,
1634
- ...l
1635
- }
1636
- ),
1637
- /* @__PURE__ */ e.jsx(
1638
- "span",
1639
- {
1640
- className: Xe({
1641
- checked: !!o,
1642
- disabled: !!i
1643
- }),
1644
- "aria-hidden": "true",
1645
- children: o ? /* @__PURE__ */ e.jsx(S, { as: W, color: "neutral", size: "md" }) : null
1646
- }
1647
- ),
1648
- /* @__PURE__ */ e.jsx("span", { className: "flex-1 min-w-0 text-base text-foreground", children: t })
1649
- ]
1650
- }
1651
- );
1652
- }), Ye = v(
1653
- "flex items-center gap-3 cursor-pointer border-b border-border select-none p-4 transition-colors hover:bg-neutral-light",
1654
- {
1655
- variants: {
1656
- checked: {
1657
- true: "",
1658
- false: ""
1659
- },
1660
- disabled: {
1661
- true: "opacity-50 cursor-not-allowed",
1662
- false: ""
1663
- }
1664
- },
1665
- defaultVariants: {
1666
- checked: !1,
1667
- disabled: !1
1668
- }
1669
- }
1670
- ), Ze = v(
1671
- "flex h-6 w-6 items-center justify-center rounded-sm overflow-hidden border border-border transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
1672
- {
1673
- variants: {
1674
- checked: {
1675
- true: "bg-primary",
1676
- false: "border-border bg-white"
1677
- },
1678
- disabled: {
1679
- true: "opacity-50",
1680
- false: "active:scale-95"
1681
- }
1682
- },
1683
- defaultVariants: {
1684
- checked: !1,
1685
- disabled: !1
1686
- }
1687
- }
1688
- ), Ir = z(({ value: r, label: t, checked: o, id: s, className: n, disabled: i, ...l }, c) => {
1689
- const a = E(), g = s || a;
1690
- return /* @__PURE__ */ e.jsxs(
1691
- "label",
1692
- {
1693
- htmlFor: g,
1694
- className: p(
1695
- Ye({
1696
- checked: !!o,
1697
- disabled: !!i
1698
- }),
1699
- n
1700
- ),
1701
- "aria-checked": o,
1702
- role: "checkbox",
1703
- "aria-label": `Select ${r}`,
1704
- tabIndex: i ? -1 : 0,
1705
- children: [
1706
- /* @__PURE__ */ e.jsx(
1707
- "input",
1708
- {
1709
- ref: c,
1710
- id: g,
1711
- type: "checkbox",
1712
- value: r,
1713
- checked: o,
1714
- disabled: i,
1715
- className: "sr-only",
1716
- "aria-hidden": !0,
1717
- "aria-checked": o,
1718
- ...l
1719
- }
1720
- ),
1721
- /* @__PURE__ */ e.jsx(
1722
- "span",
1723
- {
1724
- className: Ze({
1725
- checked: !!o,
1726
- disabled: !!i
1727
- }),
1728
- "aria-hidden": "true",
1729
- children: o ? /* @__PURE__ */ e.jsx(S, { as: W, color: "neutral", size: "md" }) : null
1730
- }
1731
- ),
1732
- /* @__PURE__ */ e.jsx("span", { className: "flex-1 min-w-0 text-base text-foreground", children: t })
1733
- ]
1734
- }
1735
- );
1736
- }), er = v(
1737
- "relative inline-flex items-center transition-colors duration-200 border border-transparent",
1738
- {
1739
- variants: {
1740
- color: {
1741
- primary: "",
1742
- secondary: "",
1743
- tertiary: "",
1744
- ghost: "",
1745
- neutral: "",
1746
- success: "",
1747
- info: "",
1748
- warning: "",
1749
- danger: ""
1750
- },
1751
- size: {
1752
- sm: "h-4 w-8",
1753
- md: "h-5 w-10",
1754
- lg: "h-6 w-12"
1755
- },
1756
- disabled: {
1757
- true: "opacity-50 cursor-not-allowed",
1758
- false: ""
1759
- },
1760
- checked: {
1761
- true: "",
1762
- false: ""
1763
- }
1764
- },
1765
- defaultVariants: {
1766
- color: "primary",
1767
- size: "md",
1768
- disabled: !1,
1769
- checked: !1
1770
- },
1771
- compoundVariants: [
1772
- {
1773
- checked: !0,
1774
- color: "primary",
1775
- class: "bg-primary"
1776
- },
1777
- {
1778
- checked: !0,
1779
- color: "secondary",
1780
- class: "bg-secondary"
1781
- },
1782
- { checked: !0, color: "tertiary", class: "bg-tertiary" },
1783
- { checked: !0, color: "ghost", class: "bg-ghost" },
1784
- { checked: !0, color: "neutral", class: "bg-neutral" },
1785
- { checked: !0, color: "success", class: "bg-success" },
1786
- { checked: !0, color: "info", class: "bg-info" },
1787
- { checked: !0, color: "warning", class: "bg-warning" },
1788
- { checked: !0, color: "danger", class: "bg-danger" },
1789
- { checked: !1, class: "bg-white border-border" }
1790
- ]
1791
- }
1792
- ), rr = v(
1793
- "absolute rounded-full transition-transform duration-200",
1794
- {
1795
- variants: {
1796
- size: {
1797
- sm: "h-3 w-3",
1798
- md: "h-4 w-4",
1799
- lg: "h-5 w-5"
1800
- },
1801
- checked: {
1802
- true: "translate-x-full bg-white left-1.5",
1803
- false: "bg-neutral left-0.5"
1804
- }
1805
- },
1806
- defaultVariants: {
1807
- size: "md",
1808
- checked: !1
1809
- }
1810
- }
1811
- ), tr = ({
1812
- color: r = "primary",
1813
- size: t = "md",
1814
- disabled: o = !1,
1815
- className: s,
1816
- checked: n
1817
- }) => /* @__PURE__ */ e.jsx(
1818
- "span",
1819
- {
1820
- className: p(
1821
- er({ color: r, size: t, disabled: o, checked: n }),
1822
- "rounded-full pointer-events-none",
1823
- s
1824
- ),
1825
- "aria-hidden": "true"
1826
- }
1827
- ), or = ({ size: r = "md", checked: t = !1 }) => /* @__PURE__ */ e.jsx("span", { className: p(rr({ size: r, checked: t })), "aria-hidden": "true" }), nr = ({ label: r, htmlFor: t, placement: o = "top", disabled: s = !1 }) => r ? /* @__PURE__ */ e.jsx(
1828
- "label",
1829
- {
1830
- htmlFor: t,
1831
- className: p(
1832
- "text-sm select-none font-medium text-foreground",
1833
- o === "inline" ? "ml-2 mb-0" : "mb-1",
1834
- s && "opacity-50 cursor-not-allowed"
1835
- ),
1836
- children: r
1837
- }
1838
- ) : null, sr = m.forwardRef(
1839
- ({
1840
- checked: r,
1841
- defaultChecked: t,
1842
- onCheckedChange: o,
1843
- color: s = "primary",
1844
- size: n = "md",
1845
- label: i,
1846
- labelPlacement: l = "top",
1847
- disabled: c = !1,
1848
- className: a,
1849
- id: g,
1850
- ariaLabel: u,
1851
- ...f
1852
- }, d) => {
1853
- const [h, b] = L(
1854
- t ?? !1
1855
- ), y = E(), w = g || y, j = typeof r == "boolean", x = j ? r : h, V = (N) => {
1856
- j || b(N.target.checked), o?.(N.target.checked);
1857
- };
1858
- return /* @__PURE__ */ e.jsxs(
1859
- "div",
1860
- {
1861
- className: p(
1862
- "flex flex-col",
1863
- l === "inline" && "flex-row items-center",
1864
- a
1865
- ),
1866
- children: [
1867
- /* @__PURE__ */ e.jsx(
1868
- nr,
1869
- {
1870
- label: i,
1871
- htmlFor: w,
1872
- placement: l,
1873
- disabled: c
1874
- }
1875
- ),
1876
- /* @__PURE__ */ e.jsxs(
1877
- "span",
1878
- {
1879
- className: p(
1880
- "relative flex items-center",
1881
- l === "inline" && "ml-2"
1882
- ),
1883
- children: [
1884
- /* @__PURE__ */ e.jsx(
1885
- "input",
1886
- {
1887
- ref: d,
1888
- type: "checkbox",
1889
- id: w,
1890
- "aria-label": u || i,
1891
- checked: x,
1892
- disabled: c,
1893
- onChange: V,
1894
- className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10",
1895
- ...f
1896
- }
1897
- ),
1898
- /* @__PURE__ */ e.jsx(
1899
- tr,
1900
- {
1901
- color: s,
1902
- size: n,
1903
- disabled: c,
1904
- checked: x
1905
- }
1906
- ),
1907
- /* @__PURE__ */ e.jsx(or, { size: n, checked: x })
1908
- ]
1909
- }
1910
- )
1911
- ]
1912
- }
1913
- );
1914
- }
1915
- );
1916
- sr.displayName = "SwitchInput";
1917
- const ar = v(
1918
- "block w-full rounded-md border bg-white transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none disabled:bg-gray-50",
1919
- {
1920
- variants: {
1921
- variant: {
1922
- // Core variants using Versaur color system
1923
- primary: "border-primary/30 text-foreground focus:border-primary focus:ring-primary/20",
1924
- secondary: "border-secondary/30 text-foreground focus:border-secondary focus:ring-secondary/20",
1925
- tertiary: "border-tertiary/30 text-foreground focus:border-tertiary focus:ring-tertiary/20",
1926
- ghost: "border-ghost/30 text-foreground focus:border-ghost focus:ring-ghost/20",
1927
- neutral: "border-gray-300 text-foreground focus:border-gray-400 focus:ring-gray-400/20",
1928
- // Outline variants
1929
- "primary-outline": "border-primary text-foreground focus:border-primary focus:ring-primary/20",
1930
- "secondary-outline": "border-secondary text-foreground focus:border-secondary focus:ring-secondary/20",
1931
- "tertiary-outline": "border-tertiary text-foreground focus:border-tertiary focus:ring-tertiary/20",
1932
- "ghost-outline": "border-ghost text-foreground focus:border-ghost focus:ring-ghost/20",
1933
- "neutral-outline": "border-gray-400 text-foreground focus:border-gray-500 focus:ring-gray-500/20",
1934
- // Semantic variants
1935
- success: "border-success/30 text-foreground focus:border-success focus:ring-success/20",
1936
- "success-outline": "border-success text-foreground focus:border-success focus:ring-success/20",
1937
- info: "border-info/30 text-foreground focus:border-info focus:ring-info/20",
1938
- "info-outline": "border-info text-foreground focus:border-info focus:ring-info/20",
1939
- warning: "border-warning/30 text-foreground focus:border-warning focus:ring-warning/20",
1940
- "warning-outline": "border-warning text-foreground focus:border-warning focus:ring-warning/20",
1941
- danger: "border-danger bg-danger/5 text-foreground focus:border-danger focus:ring-danger/20",
1942
- "danger-outline": "border-danger bg-danger/5 text-foreground focus:border-danger focus:ring-danger/20"
1943
- },
1944
- fieldSizing: {
1945
- content: "field-sizing-content resize-none",
1946
- fixed: "resize-y"
1947
- }
1948
- },
1949
- defaultVariants: {
1950
- variant: "primary",
1951
- fieldSizing: "fixed"
1952
- }
1953
- }
1954
- ), ir = m.forwardRef(
1955
- ({
1956
- variant: r = "primary",
1957
- label: t,
1958
- helperText: o,
1959
- error: s,
1960
- className: n,
1961
- disabled: i,
1962
- id: l,
1963
- minRows: c = 3,
1964
- maxRows: a,
1965
- fieldSizing: g = "fixed",
1966
- style: u,
1967
- rows: f,
1968
- ...d
1969
- }, h) => {
1970
- const b = m.useId(), y = l || b, w = !!s, j = f || c, x = g === "content" ? void 0 : a, V = {
1971
- ...g === "content" && { fieldSizing: "content" },
1972
- ...x && {
1973
- maxHeight: `${x * 1.5}rem`
1974
- // Approximate line height
1975
- },
1976
- ...u
1977
- };
1978
- return /* @__PURE__ */ e.jsxs("div", { children: [
1979
- t && /* @__PURE__ */ e.jsx(
1980
- "label",
1981
- {
1982
- htmlFor: y,
1983
- className: "block text-sm font-medium text-foreground mb-2",
1984
- children: t
1985
- }
1986
- ),
1987
- /* @__PURE__ */ e.jsx("div", { className: p("relative w-full", n), children: /* @__PURE__ */ e.jsx(
1988
- "textarea",
1989
- {
1990
- ref: h,
1991
- id: y,
1992
- rows: j,
1993
- "aria-invalid": w,
1994
- "aria-disabled": i,
1995
- disabled: i,
1996
- style: V,
1997
- className: p(
1998
- ar({
1999
- variant: w ? "danger" : r,
2000
- fieldSizing: g
2001
- }),
2002
- "px-3 py-2"
2003
- ),
2004
- ...d
2005
- }
2006
- ) }),
2007
- w && /* @__PURE__ */ e.jsx("div", { className: "mt-1 text-sm text-danger", role: "alert", children: s }),
2008
- !w && o && /* @__PURE__ */ e.jsx("div", { className: "mt-1 text-sm text-gray-600", children: o })
2009
- ] });
2010
- }
2011
- );
2012
- ir.displayName = "TextAreaInput";
2013
- const Cr = z(function(t, o) {
2014
- const s = (n) => {
2015
- t?.onChange?.(n.target.value);
2016
- };
2017
- return /* @__PURE__ */ e.jsx(
2018
- $,
2019
- {
2020
- type: "time",
2021
- tabIndex: 0,
2022
- "aria-hidden": "true",
2023
- leftContent: /* @__PURE__ */ e.jsx(S, { as: ue, color: "inherit", size: "sm" }),
2024
- ref: o,
2025
- ...t,
2026
- onChange: s
2027
- }
2028
- );
2029
- });
2030
- export {
2031
- fr as C,
2032
- mr as D,
2033
- xr as E,
2034
- Ve as P,
2035
- yr as R,
2036
- wr as S,
2037
- $ as T,
2038
- hr as a,
2039
- br as b,
2040
- pr as c,
2041
- vr as d,
2042
- kr as e,
2043
- Qe as f,
2044
- jr as g,
2045
- Ir as h,
2046
- sr as i,
2047
- ir as j,
2048
- Cr as k
2049
- };