blunt-ui 0.3.2 → 0.3.4

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 (55) hide show
  1. package/dist/components/ConfirmDialog/ConfirmDialog.d.ts +5 -0
  2. package/dist/components/ConfirmDialog/ConfirmDialog.stories.d.ts +8 -0
  3. package/dist/components/ConfirmDialog/ConfirmDialog.test.d.ts +0 -0
  4. package/dist/components/ConfirmDialog/ConfirmDialog.types.d.ts +13 -0
  5. package/dist/components/ConfirmDialog/index.d.ts +4 -0
  6. package/dist/components/ConfirmDialog/useConfirm.d.ts +6 -0
  7. package/dist/components/ConfirmDialog/useConfirm.test.d.ts +0 -0
  8. package/dist/components/ConfirmDialog/useConfirm.types.d.ts +14 -0
  9. package/dist/components/DatePicker/DatePicker.d.ts +5 -0
  10. package/dist/components/DatePicker/DatePicker.stories.d.ts +11 -0
  11. package/dist/components/DatePicker/DatePicker.test.d.ts +0 -0
  12. package/dist/components/DatePicker/DatePicker.types.d.ts +14 -0
  13. package/dist/components/DatePicker/index.d.ts +2 -0
  14. package/dist/components/Editable/Editable.d.ts +5 -0
  15. package/dist/components/Editable/Editable.stories.d.ts +10 -0
  16. package/dist/components/Editable/Editable.types.d.ts +9 -0
  17. package/dist/components/Editable/index.d.ts +2 -0
  18. package/dist/components/Field/Field.d.ts +5 -0
  19. package/dist/components/Field/Field.stories.d.ts +8 -0
  20. package/dist/components/Field/Field.types.d.ts +6 -0
  21. package/dist/components/Field/index.d.ts +2 -0
  22. package/dist/components/Form/index.d.ts +2 -0
  23. package/dist/components/Form/useForm.d.ts +2 -0
  24. package/dist/components/Form/useForm.test.d.ts +1 -0
  25. package/dist/components/Form/useForm.types.d.ts +20 -0
  26. package/dist/components/Input/Input.types.d.ts +1 -1
  27. package/dist/components/Select/Select.types.d.ts +2 -3
  28. package/dist/components/Spinner/Spinner.d.ts +5 -0
  29. package/dist/components/Spinner/Spinner.stories.d.ts +9 -0
  30. package/dist/components/Spinner/Spinner.types.d.ts +8 -0
  31. package/dist/components/Spinner/index.d.ts +2 -0
  32. package/dist/components/Table/Table.d.ts +1 -1
  33. package/dist/components/Table/Table.stories.d.ts +1 -0
  34. package/dist/components/Table/Table.types.d.ts +1 -0
  35. package/dist/components/Textarea/Textarea.d.ts +5 -0
  36. package/dist/components/Textarea/Textarea.stories.d.ts +8 -0
  37. package/dist/components/Textarea/Textarea.types.d.ts +11 -0
  38. package/dist/components/Textarea/index.d.ts +2 -0
  39. package/dist/components/Toast/index.d.ts +2 -0
  40. package/dist/components/Toast/useToast.d.ts +6 -0
  41. package/dist/components/Toast/useToast.test.d.ts +0 -0
  42. package/dist/components/Toast/useToast.types.d.ts +17 -0
  43. package/dist/index.cjs +581 -264
  44. package/dist/index.d.ts +19 -12
  45. package/dist/index.js +1782 -1277
  46. package/dist/{components/ThemeProvider/index.d.ts → themes/ThemeProvider.d.ts} +1 -1
  47. package/dist/themes/index.d.ts +2 -1
  48. package/package.json +1 -1
  49. package/dist/components/DataTable/DataTable.d.ts +0 -5
  50. package/dist/components/DataTable/DataTable.stories.d.ts +0 -14
  51. package/dist/components/DataTable/DataTable.types.d.ts +0 -30
  52. package/dist/components/DataTable/index.d.ts +0 -2
  53. package/dist/themes/default.d.ts +0 -2
  54. /package/dist/{styles → themes}/GlobalStyles.d.ts +0 -0
  55. /package/dist/{consts.d.ts → themes/consts.d.ts} +0 -0
package/dist/index.js CHANGED
@@ -1,13 +1,13 @@
1
- import { jsx as s, jsxs as T } from "react/jsx-runtime";
2
- import e, { css as t, keyframes as _, ThemeProvider as jo } from "styled-components";
3
- import $o, { useId as Z, useState as N, useRef as X, useEffect as F, useContext as mo, createContext as So, forwardRef as Co, createElement as co, useCallback as R, useMemo as po } from "react";
4
- import { createPortal as zo, flushSync as _o } from "react-dom";
5
- const K = (o, r, n) => t`
1
+ import { jsx as s, jsxs as k, Fragment as Lo } from "react/jsx-runtime";
2
+ import i, { css as t, keyframes as F, ThemeProvider as Fo, createGlobalStyle as Bo } from "styled-components";
3
+ import po, { useId as A, useState as D, useContext as io, createContext as ao, forwardRef as ko, createElement as to, useRef as U, useEffect as j, useCallback as V, useMemo as lo } from "react";
4
+ import { createPortal as Co } from "react-dom";
5
+ const H = (o, r, n) => t`
6
6
  background: ${r};
7
7
  color: ${n};
8
8
  border: ${o.brutalism.borderWidth} solid ${o.colors.neutral[900]};
9
9
  box-shadow: 2px 2px 0 ${o.colors.neutral[900]};
10
- `, Mo = e.span`
10
+ `, Vo = i.span`
11
11
  display: inline-flex;
12
12
  align-items: center;
13
13
  font-weight: 700;
@@ -31,32 +31,32 @@ const K = (o, r, n) => t`
31
31
  })[o]}
32
32
 
33
33
  ${({ $variant: o, theme: r }) => r.brutalism ? {
34
- primary: K(
34
+ primary: H(
35
35
  r,
36
36
  r.colors.primary[500],
37
37
  r.colors.primary.contrast
38
38
  ),
39
- neutral: K(
39
+ neutral: H(
40
40
  r,
41
41
  r.colors.neutral[200],
42
42
  r.colors.neutral[900]
43
43
  ),
44
- success: K(
44
+ success: H(
45
45
  r,
46
46
  r.colors.success[50],
47
47
  r.colors.success[500]
48
48
  ),
49
- error: K(
49
+ error: H(
50
50
  r,
51
51
  r.colors.error[50],
52
52
  r.colors.error[500]
53
53
  ),
54
- warning: K(
54
+ warning: H(
55
55
  r,
56
56
  r.colors.warning[50],
57
57
  r.colors.warning[500]
58
58
  ),
59
- info: K(r, r.colors.info[50], r.colors.info[500])
59
+ info: H(r, r.colors.info[50], r.colors.info[500])
60
60
  }[o] : {
61
61
  primary: t`
62
62
  background: ${r.colors.primary[50]};
@@ -84,16 +84,16 @@ const K = (o, r, n) => t`
84
84
  `
85
85
  }[o]}
86
86
  `;
87
- function Vo({
87
+ function _o({
88
88
  variant: o = "primary",
89
89
  size: r = "md",
90
90
  children: n,
91
- ...i
91
+ ...e
92
92
  }) {
93
- return /* @__PURE__ */ s(Mo, { $variant: o, $size: r, ...i, children: n });
93
+ return /* @__PURE__ */ s(Vo, { $variant: o, $size: r, ...e, children: n });
94
94
  }
95
- Vo.displayName = "Badge";
96
- const eo = (o, r, n) => t`
95
+ _o.displayName = "Badge";
96
+ const oo = (o, r, n) => t`
97
97
  background-color: ${r};
98
98
  color: ${n};
99
99
  border: ${o.brutalism.borderWidth} solid ${o.colors.neutral[900]};
@@ -106,7 +106,7 @@ const eo = (o, r, n) => t`
106
106
  transform: translate(2px, 2px);
107
107
  box-shadow: 2px 2px 0 ${o.colors.neutral[900]};
108
108
  }
109
- `, Ko = e.button`
109
+ `, jo = i.button`
110
110
  display: inline-flex;
111
111
  align-items: center;
112
112
  justify-content: center;
@@ -126,17 +126,17 @@ const eo = (o, r, n) => t`
126
126
  }
127
127
 
128
128
  ${({ $variant: o, theme: r }) => r.brutalism ? {
129
- primary: eo(
129
+ primary: oo(
130
130
  r,
131
131
  r.colors.primary[500],
132
132
  r.colors.primary.contrast
133
133
  ),
134
- secondary: eo(
134
+ secondary: oo(
135
135
  r,
136
136
  r.colors.neutral[100],
137
137
  r.colors.neutral[900]
138
138
  ),
139
- outline: eo(
139
+ outline: oo(
140
140
  r,
141
141
  r.colors.neutral[0],
142
142
  r.colors.neutral[900]
@@ -183,44 +183,44 @@ const eo = (o, r, n) => t`
183
183
  `
184
184
  })[o]}
185
185
  `;
186
- function Fo({
186
+ function so({
187
187
  ref: o,
188
188
  as: r,
189
189
  href: n,
190
- variant: i = "primary",
191
- size: d = "md",
190
+ variant: e = "primary",
191
+ size: l = "md",
192
192
  isLoading: a,
193
193
  disabled: c,
194
- children: u,
195
- ...g
194
+ children: d,
195
+ ...p
196
196
  }) {
197
197
  return /* @__PURE__ */ s(
198
- Ko,
198
+ jo,
199
199
  {
200
200
  ref: o,
201
201
  as: r ?? (n ? "a" : "button"),
202
202
  href: n,
203
- $variant: i,
204
- $size: d,
203
+ $variant: e,
204
+ $size: l,
205
205
  disabled: a || c,
206
- ...g,
207
- children: a ? "Loading..." : u
206
+ ...p,
207
+ children: a ? "Loading..." : d
208
208
  }
209
209
  );
210
210
  }
211
- Fo.displayName = "Button";
212
- const Ho = e.div`
211
+ so.displayName = "Button";
212
+ const Ao = i.div`
213
213
  display: flex;
214
214
  flex-direction: column;
215
215
  gap: ${({ theme: o }) => o.spacing[1]};
216
216
  width: ${({ $fullWidth: o }) => o ? "100%" : "auto"};
217
- `, Yo = e.label`
217
+ `, Ro = i.label`
218
218
  font-size: ${({ theme: o }) => o.fontSizes.sm};
219
219
  font-weight: ${({ theme: o }) => o.brutalism ? "700" : "500"};
220
- `, Uo = e.span`
220
+ `, Yo = i.span`
221
221
  font-size: ${({ theme: o }) => o.fontSizes.xs};
222
222
  color: ${({ $error: o, theme: r }) => o ? r.colors.error[500] : r.colors.neutral[500]};
223
- `, qo = e.div`
223
+ `, Ho = i.div`
224
224
  display: flex;
225
225
  align-items: center;
226
226
  border-radius: ${({ theme: o }) => o.radius.md};
@@ -256,10 +256,6 @@ const Ho = e.div`
256
256
  outlined: t`
257
257
  border: 2px solid ${r.colors.primary[500]};
258
258
  background-color: ${r.colors.neutral[0]};
259
- `,
260
- filled: t`
261
- border: 1px solid transparent;
262
- background-color: ${r.colors.neutral[100]};
263
259
  `
264
260
  }[o]}
265
261
 
@@ -273,7 +269,7 @@ const Ho = e.div`
273
269
  &:focus-within {
274
270
  box-shadow: ${({ theme: o }) => o.shadows.focusRing};
275
271
  }
276
- `, Go = e.input`
272
+ `, Uo = i.input`
277
273
  flex: 1;
278
274
  border: none;
279
275
  outline: none;
@@ -284,11 +280,11 @@ const Ho = e.div`
284
280
  cursor: not-allowed;
285
281
  opacity: 0.6;
286
282
  }
287
- `, xo = e.div`
283
+ `, fo = i.div`
288
284
  display: inline-flex;
289
285
  align-items: center;
290
286
  margin: 0 ${({ theme: o }) => o.spacing[1]};
291
- `, Xo = e.button`
287
+ `, Ko = i.button`
292
288
  display: inline-flex;
293
289
  align-items: center;
294
290
  margin: 0 ${({ theme: o }) => o.spacing[1]};
@@ -302,271 +298,181 @@ const Ho = e.div`
302
298
  opacity: 0.8;
303
299
  }
304
300
  `;
305
- function Zo({
301
+ function qo({
306
302
  ref: o,
307
303
  type: r = "text",
308
304
  size: n = "md",
309
- variant: i = "default",
310
- label: d,
305
+ variant: e = "default",
306
+ label: l,
311
307
  helperText: a,
312
308
  error: c,
313
- leftElement: u,
314
- rightElement: g,
315
- clearable: f,
316
- onClear: $,
317
- fullWidth: w,
309
+ leftElement: d,
310
+ rightElement: p,
311
+ clearable: g,
312
+ onClear: b,
313
+ fullWidth: h,
318
314
  id: y,
319
- value: b,
320
- defaultValue: m,
321
- onChange: W,
322
- ...I
315
+ value: $,
316
+ defaultValue: x,
317
+ onChange: v,
318
+ ...C
323
319
  }) {
324
- const x = Z(), P = y ?? x, O = `${P}-hint`, [D, h] = N(m ?? ""), v = b !== void 0, k = v ? b : D, B = typeof c == "string" ? c : void 0, A = !!(a || c), j = (L) => {
325
- v || h(L.target.value), W?.(L);
326
- }, M = () => {
327
- v || h(""), $?.();
320
+ const M = A(), f = y ?? M, T = `${f}-hint`, [S, z] = D(x ?? ""), w = $ !== void 0, I = w ? $ : S, W = typeof c == "string" ? c : void 0, O = !!(a || c), P = (N) => {
321
+ w || z(N.target.value), v?.(N);
322
+ }, K = () => {
323
+ w || z(""), b?.();
328
324
  };
329
- return /* @__PURE__ */ T(Ho, { $fullWidth: w, children: [
330
- d && /* @__PURE__ */ s(Yo, { htmlFor: P, children: d }),
331
- /* @__PURE__ */ T(qo, { $size: n, $variant: i, $error: !!c, children: [
332
- u && /* @__PURE__ */ s(xo, { children: u }),
325
+ return /* @__PURE__ */ k(Ao, { $fullWidth: h, children: [
326
+ l && /* @__PURE__ */ s(Ro, { htmlFor: f, children: l }),
327
+ /* @__PURE__ */ k(Ho, { $size: n, $variant: e, $error: !!c, children: [
328
+ d && /* @__PURE__ */ s(fo, { children: d }),
333
329
  /* @__PURE__ */ s(
334
- Go,
330
+ Uo,
335
331
  {
336
- id: P,
332
+ id: f,
337
333
  ref: o,
338
334
  type: r,
339
- value: k,
340
- onChange: j,
341
- ...I,
335
+ value: I,
336
+ onChange: P,
337
+ ...C,
342
338
  "aria-invalid": !!c,
343
- "aria-describedby": A ? O : void 0
339
+ "aria-describedby": O ? T : void 0
344
340
  }
345
341
  ),
346
- f && k && /* @__PURE__ */ s(
347
- Xo,
342
+ g && I && /* @__PURE__ */ s(
343
+ Ko,
348
344
  {
349
345
  type: "button",
350
- onClick: M,
346
+ onClick: K,
351
347
  "aria-label": "Clear input",
352
348
  children: "✕"
353
349
  }
354
350
  ),
355
- g && /* @__PURE__ */ s(xo, { children: g })
351
+ p && /* @__PURE__ */ s(fo, { children: p })
356
352
  ] }),
357
- A && /* @__PURE__ */ s(Uo, { id: O, $error: !!c, children: B ?? a })
353
+ O && /* @__PURE__ */ s(Yo, { id: T, $error: !!c, children: W ?? a })
358
354
  ] });
359
355
  }
360
- Zo.displayName = "Input";
361
- const Jo = _`
362
- from { opacity: 0; }
363
- to { opacity: 1; }
364
- `, Qo = _`
365
- from { opacity: 1; }
366
- to { opacity: 0; }
367
- `, or = _`
368
- from { opacity: 0; transform: scale(0.95) translateY(-8px); }
369
- to { opacity: 1; transform: scale(1) translateY(0); }
370
- `, rr = _`
371
- from { opacity: 1; transform: scale(1) translateY(0); }
372
- to { opacity: 0; transform: scale(0.95) translateY(-8px); }
373
- `, nr = e.div`
374
- position: fixed;
375
- inset: 0;
376
- background-color: rgba(0, 0, 0, 0.5);
377
- display: flex;
378
- align-items: center;
379
- justify-content: center;
380
- z-index: ${({ theme: o }) => o.zIndex.modal};
381
- animation: ${({ $closing: o }) => o ? Qo : Jo} 0.15s ease
382
- forwards;
383
- `, tr = e.div`
384
- position: relative;
385
- background: ${({ theme: o }) => o.colors.neutral[0]};
386
- border-radius: ${({ theme: o }) => o.radius.md};
387
- box-shadow: ${({ theme: o }) => o.brutalism ? `${o.brutalism.shadowOffset} ${o.brutalism.shadowOffset} 0 ${o.colors.neutral[900]}` : "0 20px 60px rgba(0,0,0,0.3)"};
388
- border: ${({ theme: o }) => o.brutalism ? `${o.brutalism.borderWidth} solid ${o.colors.neutral[900]}` : "none"};
356
+ qo.displayName = "Input";
357
+ const Go = i.div`
389
358
  display: flex;
390
359
  flex-direction: column;
391
- max-height: 90vh;
392
- animation: ${({ $closing: o }) => o ? rr : or} 0.15s ease
393
- forwards;
394
-
395
- ${({ $size: o }) => o === "sm" && t`
396
- width: min(400px, 90vw);
397
- `}
398
- ${({ $size: o }) => o === "md" && t`
399
- width: min(560px, 90vw);
400
- `}
401
- ${({ $size: o }) => o === "lg" && t`
402
- width: min(720px, 90vw);
403
- `}
404
- ${({ $size: o }) => o === "fullscreen" && t`
405
- width: 100vw;
406
- height: 100vh;
407
- max-height: 100vh;
408
- border-radius: 0;
409
- `}
410
- `, sr = e.div`
360
+ gap: ${({ theme: o }) => o.spacing[1]};
361
+ width: ${({ $fullWidth: o }) => o ? "100%" : "auto"};
362
+ `, Jo = i.label`
363
+ font-size: ${({ theme: o }) => o.fontSizes.sm};
364
+ font-weight: ${({ theme: o }) => o.brutalism ? "700" : "500"};
365
+ `, Xo = i.span`
366
+ font-size: ${({ theme: o }) => o.fontSizes.xs};
367
+ color: ${({ $error: o, theme: r }) => o ? r.colors.error[500] : r.colors.neutral[500]};
368
+ `, Zo = i.div`
411
369
  display: flex;
412
- align-items: center;
413
- gap: ${({ theme: o }) => o.spacing[2]};
414
- padding: ${({ theme: o }) => o.spacing[4]};
415
- border-bottom: 1px solid ${({ theme: o }) => o.colors.neutral[200]};
416
- flex-shrink: 0;
417
- `, er = e.h2`
418
- flex: 1;
419
- font-size: ${({ theme: o }) => o.fontSizes.lg};
420
- font-weight: 600;
421
- margin: 0;
422
- `, ir = e.button`
423
- display: inline-flex;
424
- align-items: center;
425
- justify-content: center;
426
- margin-left: auto;
427
- flex-shrink: 0;
428
- width: 32px;
429
- height: 32px;
430
- border: none;
431
- background: none;
432
- cursor: pointer;
433
370
  border-radius: ${({ theme: o }) => o.radius.md};
434
- font-size: 20px;
435
- line-height: 1;
436
- color: ${({ theme: o }) => o.colors.neutral[500]};
371
+ transition:
372
+ border-color 0.2s,
373
+ box-shadow 0.2s;
437
374
 
438
- &:hover {
439
- background-color: ${({ theme: o }) => o.colors.neutral[100]};
440
- color: ${({ theme: o }) => o.colors.neutral[900]};
441
- }
375
+ ${({ $size: o = "md", theme: r }) => ({
376
+ sm: t`
377
+ padding: ${r.spacing[1]} ${r.spacing[2]};
378
+ font-size: ${r.fontSizes.sm};
379
+ `,
380
+ md: t`
381
+ padding: ${r.spacing[2]} ${r.spacing[3]};
382
+ font-size: ${r.fontSizes.md};
383
+ `,
384
+ lg: t`
385
+ padding: ${r.spacing[3]} ${r.spacing[4]};
386
+ font-size: ${r.fontSizes.lg};
387
+ `
388
+ })[o]}
442
389
 
443
- &:focus-visible {
444
- outline: 2px solid ${({ theme: o }) => o.colors.primary[500]};
445
- outline-offset: 2px;
390
+ ${({ $variant: o = "default", theme: r }) => r.brutalism ? t`
391
+ border: ${r.brutalism.borderWidth} solid
392
+ ${r.colors.neutral[900]};
393
+ background-color: ${r.colors.neutral[0]};
394
+ box-shadow: 3px 3px 0 ${r.colors.neutral[900]};
395
+ ` : {
396
+ default: t`
397
+ border: 1px solid ${r.colors.neutral[400]};
398
+ background-color: ${r.colors.neutral[0]};
399
+ `,
400
+ outlined: t`
401
+ border: 2px solid ${r.colors.primary[500]};
402
+ background-color: ${r.colors.neutral[0]};
403
+ `
404
+ }[o]}
405
+
406
+ ${({ $error: o, theme: r }) => o && t`
407
+ border-color: ${r.colors.error[500]};
408
+ ${r.brutalism && t`
409
+ box-shadow: 3px 3px 0 ${r.colors.error[500]};
410
+ `}
411
+ `}
412
+
413
+ &:focus-within {
414
+ box-shadow: ${({ theme: o }) => o.shadows.focusRing};
446
415
  }
447
- `, ar = e.div`
448
- padding: ${({ theme: o }) => o.spacing[4]};
449
- overflow-y: auto;
416
+ `, Qo = i.textarea`
450
417
  flex: 1;
451
- `, lr = e.div`
452
- display: flex;
453
- align-items: center;
454
- justify-content: flex-end;
455
- gap: ${({ theme: o }) => o.spacing[2]};
456
- padding: ${({ theme: o }) => o.spacing[4]};
457
- border-top: 1px solid ${({ theme: o }) => o.colors.neutral[200]};
458
- flex-shrink: 0;
459
- `, cr = [
460
- "button:not([disabled])",
461
- "input:not([disabled])",
462
- "select:not([disabled])",
463
- "textarea:not([disabled])",
464
- "a[href]",
465
- '[tabindex]:not([tabindex="-1"])'
466
- ].join(", ");
467
- function yo(o) {
468
- return Array.from(
469
- o.querySelectorAll(cr)
470
- );
471
- }
472
- function dr({
473
- open: o,
474
- onClose: r,
475
- title: n,
476
- children: i,
477
- footer: d,
478
- size: a = "md",
479
- closeOnBackdrop: c = !0,
480
- closeOnEscape: u = !0,
481
- ariaLabelledBy: g,
482
- ariaDescribedBy: f
418
+ border: none;
419
+ outline: none;
420
+ background: transparent;
421
+ font: inherit;
422
+ resize: vertical;
423
+ min-height: 80px;
424
+
425
+ &:disabled {
426
+ cursor: not-allowed;
427
+ opacity: 0.6;
428
+ }
429
+ `;
430
+ function or({
431
+ ref: o,
432
+ size: r = "md",
433
+ variant: n = "default",
434
+ label: e,
435
+ helperText: l,
436
+ error: a,
437
+ fullWidth: c,
438
+ id: d,
439
+ value: p,
440
+ defaultValue: g,
441
+ onChange: b,
442
+ ...h
483
443
  }) {
484
- const $ = X(null), w = Z(), y = g ?? (n ? w : void 0), [b, m] = N(o), [W, I] = N(!1);
485
- return F(() => {
486
- if (o)
487
- m(!0), I(!1);
488
- else if (b) {
489
- I(!0);
490
- const x = setTimeout(() => {
491
- m(!1), I(!1);
492
- }, 150);
493
- return () => clearTimeout(x);
494
- }
495
- }, [o, b]), F(() => {
496
- if (!o)
497
- return;
498
- const x = document.body.style.overflow;
499
- return document.body.style.overflow = "hidden", () => {
500
- document.body.style.overflow = x;
501
- };
502
- }, [o]), F(() => {
503
- if (!o || !$.current)
504
- return;
505
- const x = $.current, P = document.activeElement;
506
- (yo(x)[0] ?? x).focus();
507
- const D = (h) => {
508
- if (h.key === "Escape" && u) {
509
- r();
510
- return;
511
- }
512
- if (h.key !== "Tab")
513
- return;
514
- const v = yo(x);
515
- if (v.length === 0) {
516
- h.preventDefault();
517
- return;
518
- }
519
- const k = v[0], B = v[v.length - 1];
520
- h.shiftKey ? document.activeElement === k && (h.preventDefault(), B.focus()) : document.activeElement === B && (h.preventDefault(), k.focus());
521
- };
522
- return document.addEventListener("keydown", D), () => {
523
- document.removeEventListener("keydown", D), P?.focus();
524
- };
525
- }, [o, u, r, b]), b ? zo(
526
- /* @__PURE__ */ s(
527
- nr,
444
+ const y = A(), $ = d ?? y, x = `${$}-hint`, [v, C] = D(g ?? ""), M = p !== void 0, f = M ? p : v, T = typeof a == "string" ? a : void 0, S = !!(l || a);
445
+ return /* @__PURE__ */ k(Go, { $fullWidth: c, children: [
446
+ e && /* @__PURE__ */ s(Jo, { htmlFor: $, children: e }),
447
+ /* @__PURE__ */ s(Zo, { $size: r, $variant: n, $error: !!a, children: /* @__PURE__ */ s(
448
+ Qo,
528
449
  {
529
- $closing: W,
530
- onClick: c ? r : void 0,
531
- children: /* @__PURE__ */ T(
532
- tr,
533
- {
534
- ref: $,
535
- role: "dialog",
536
- "aria-modal": "true",
537
- "aria-labelledby": y,
538
- "aria-describedby": f,
539
- $size: a,
540
- $closing: W,
541
- tabIndex: -1,
542
- onClick: (x) => x.stopPropagation(),
543
- children: [
544
- /* @__PURE__ */ T(sr, { children: [
545
- n && /* @__PURE__ */ s(er, { id: w, children: n }),
546
- /* @__PURE__ */ s(ir, { onClick: r, "aria-label": "Close modal", children: "×" })
547
- ] }),
548
- /* @__PURE__ */ s(ar, { children: i }),
549
- d && /* @__PURE__ */ s(lr, { children: d })
550
- ]
551
- }
552
- )
450
+ id: $,
451
+ ref: o,
452
+ value: f,
453
+ onChange: (w) => {
454
+ M || C(w.target.value), b?.(w);
455
+ },
456
+ ...h,
457
+ "aria-invalid": !!a,
458
+ "aria-describedby": S ? x : void 0
553
459
  }
554
- ),
555
- document.body
556
- ) : null;
460
+ ) }),
461
+ S && /* @__PURE__ */ s(Xo, { id: x, $error: !!a, children: T ?? l })
462
+ ] });
557
463
  }
558
- dr.displayName = "Modal";
559
- const To = (...o) => o.filter((r, n, i) => !!r && r.trim() !== "" && i.indexOf(r) === n).join(" ").trim();
560
- const ur = (o) => o.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
561
- const pr = (o) => o.replace(
464
+ or.displayName = "Textarea";
465
+ const So = (...o) => o.filter((r, n, e) => !!r && r.trim() !== "" && e.indexOf(r) === n).join(" ").trim();
466
+ const rr = (o) => o.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
467
+ const nr = (o) => o.replace(
562
468
  /^([A-Z])|[\s-_]+(\w)/g,
563
- (r, n, i) => i ? i.toUpperCase() : n.toLowerCase()
469
+ (r, n, e) => e ? e.toUpperCase() : n.toLowerCase()
564
470
  );
565
- const ho = (o) => {
566
- const r = pr(o);
471
+ const $o = (o) => {
472
+ const r = nr(o);
567
473
  return r.charAt(0).toUpperCase() + r.slice(1);
568
474
  };
569
- var io = {
475
+ var ro = {
570
476
  xmlns: "http://www.w3.org/2000/svg",
571
477
  width: 24,
572
478
  height: 24,
@@ -577,333 +483,116 @@ var io = {
577
483
  strokeLinecap: "round",
578
484
  strokeLinejoin: "round"
579
485
  };
580
- const fr = (o) => {
486
+ const tr = (o) => {
581
487
  for (const r in o)
582
488
  if (r.startsWith("aria-") || r === "role" || r === "title")
583
489
  return !0;
584
490
  return !1;
585
- }, gr = So({}), br = () => mo(gr), $r = Co(
586
- ({ color: o, size: r, strokeWidth: n, absoluteStrokeWidth: i, className: d = "", children: a, iconNode: c, ...u }, g) => {
491
+ }, sr = ao({}), er = () => io(sr), ir = ko(
492
+ ({ color: o, size: r, strokeWidth: n, absoluteStrokeWidth: e, className: l = "", children: a, iconNode: c, ...d }, p) => {
587
493
  const {
588
- size: f = 24,
589
- strokeWidth: $ = 2,
590
- absoluteStrokeWidth: w = !1,
494
+ size: g = 24,
495
+ strokeWidth: b = 2,
496
+ absoluteStrokeWidth: h = !1,
591
497
  color: y = "currentColor",
592
- className: b = ""
593
- } = br() ?? {}, m = i ?? w ? Number(n ?? $) * 24 / Number(r ?? f) : n ?? $;
594
- return co(
498
+ className: $ = ""
499
+ } = er() ?? {}, x = e ?? h ? Number(n ?? b) * 24 / Number(r ?? g) : n ?? b;
500
+ return to(
595
501
  "svg",
596
502
  {
597
- ref: g,
598
- ...io,
599
- width: r ?? f ?? io.width,
600
- height: r ?? f ?? io.height,
503
+ ref: p,
504
+ ...ro,
505
+ width: r ?? g ?? ro.width,
506
+ height: r ?? g ?? ro.height,
601
507
  stroke: o ?? y,
602
- strokeWidth: m,
603
- className: To("lucide", b, d),
604
- ...!a && !fr(u) && { "aria-hidden": "true" },
605
- ...u
508
+ strokeWidth: x,
509
+ className: So("lucide", $, l),
510
+ ...!a && !tr(d) && { "aria-hidden": "true" },
511
+ ...d
606
512
  },
607
513
  [
608
- ...c.map(([W, I]) => co(W, I)),
514
+ ...c.map(([v, C]) => to(v, C)),
609
515
  ...Array.isArray(a) ? a : [a]
610
516
  ]
611
517
  );
612
518
  }
613
519
  );
614
- const J = (o, r) => {
615
- const n = Co(
616
- ({ className: i, ...d }, a) => co($r, {
520
+ const _ = (o, r) => {
521
+ const n = ko(
522
+ ({ className: e, ...l }, a) => to(ir, {
617
523
  ref: a,
618
524
  iconNode: r,
619
- className: To(
620
- `lucide-${ur(ho(o))}`,
525
+ className: So(
526
+ `lucide-${rr($o(o))}`,
621
527
  `lucide-${o}`,
622
- i
528
+ e
623
529
  ),
624
- ...d
530
+ ...l
625
531
  })
626
532
  );
627
- return n.displayName = ho(o), n;
533
+ return n.displayName = $o(o), n;
628
534
  };
629
- const xr = [
535
+ const ar = [
630
536
  ["path", { d: "M12 5v14", key: "s699le" }],
631
537
  ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
632
- ], yr = J("arrow-down", xr);
633
- const hr = [
538
+ ], lr = _("arrow-down", ar);
539
+ const cr = [
634
540
  ["path", { d: "m21 16-4 4-4-4", key: "f6ql7i" }],
635
541
  ["path", { d: "M17 20V4", key: "1ejh1v" }],
636
542
  ["path", { d: "m3 8 4-4 4 4", key: "11wl7u" }],
637
543
  ["path", { d: "M7 4v16", key: "1glfcx" }]
638
- ], wr = J("arrow-up-down", hr);
639
- const vr = [
544
+ ], dr = _("arrow-up-down", cr);
545
+ const ur = [
640
546
  ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
641
547
  ["path", { d: "M12 19V5", key: "x0mq9r" }]
642
- ], kr = J("arrow-up", vr);
643
- const mr = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], Io = J("chevron-down", mr);
644
- const Sr = [
548
+ ], pr = _("arrow-up", ur);
549
+ const fr = [
550
+ ["path", { d: "M8 2v4", key: "1cmpym" }],
551
+ ["path", { d: "M16 2v4", key: "4m81vk" }],
552
+ ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
553
+ ["path", { d: "M3 10h18", key: "8toen8" }]
554
+ ], $r = _("calendar", fr);
555
+ const gr = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], zo = _("chevron-down", gr);
556
+ const br = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]], xr = _("chevron-left", br);
557
+ const yr = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]], hr = _("chevron-right", yr);
558
+ const wr = [
645
559
  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
646
560
  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
647
- ], Eo = J("x", Sr), Cr = _`
648
- from { opacity: 0; transform: translateY(12px); }
649
- to { opacity: 1; transform: translateY(0); }
650
- `, zr = _`
651
- from { opacity: 0; transform: translateY(-12px); }
652
- to { opacity: 1; transform: translateY(0); }
653
- `, Tr = _`
654
- from { opacity: 1; }
655
- to { opacity: 0; }
656
- `, Ir = e.div`
657
- position: fixed;
658
- z-index: ${({ theme: o }) => o.zIndex.toast};
561
+ ], co = _("x", wr), mr = i.div`
562
+ display: inline-flex;
563
+ flex-direction: column;
564
+ gap: ${({ theme: o }) => o.spacing[1]};
565
+ width: ${({ $fullWidth: o }) => o ? "100%" : "auto"};
566
+ `, vr = i.div`
567
+ position: relative;
659
568
  display: flex;
660
- align-items: center;
661
- gap: ${({ theme: o }) => o.spacing[3]};
662
- min-width: 280px;
663
- max-width: 400px;
664
- padding: ${({ theme: o }) => `${o.spacing[3]} ${o.spacing[4]}`};
569
+ width: 100%;
570
+ `, kr = i.span`
571
+ font-size: ${({ theme: o }) => o.fontSizes.xs};
572
+ color: ${({ $error: o, theme: r }) => o ? r.colors.error[500] : r.colors.neutral[500]};
573
+ `, Cr = i.select`
574
+ appearance: none;
575
+ width: 100%;
665
576
  border-radius: ${({ theme: o }) => o.radius.md};
666
- animation: ${({ $closing: o, $position: r }) => o ? t`
667
- ${Tr} 0.2s ease forwards
668
- ` : r.startsWith("top") ? t`
669
- ${zr} 0.2s ease forwards
670
- ` : t`
671
- ${Cr} 0.2s ease forwards
672
- `};
577
+ cursor: pointer;
578
+ font: inherit;
579
+ color: ${({ theme: o }) => o.colors.neutral[900]};
580
+ transition:
581
+ border-color 0.2s,
582
+ box-shadow 0.2s;
673
583
 
674
- ${({ $position: o, theme: r }) => ({
675
- "bottom-right": t`
676
- bottom: ${r.spacing[6]};
677
- right: ${r.spacing[6]};
678
- `,
679
- "bottom-left": t`
680
- bottom: ${r.spacing[6]};
681
- left: ${r.spacing[6]};
584
+ ${({ $size: o, theme: r }) => ({
585
+ sm: t`
586
+ padding: ${r.spacing[1]} ${r.spacing[2]};
587
+ font-size: ${r.fontSizes.sm};
682
588
  `,
683
- "top-right": t`
684
- top: ${r.spacing[6]};
685
- right: ${r.spacing[6]};
589
+ md: t`
590
+ padding: ${r.spacing[2]} ${r.spacing[3]};
591
+ font-size: ${r.fontSizes.md};
686
592
  `,
687
- "top-left": t`
688
- top: ${r.spacing[6]};
689
- left: ${r.spacing[6]};
690
- `
691
- })[o]}
692
- `, oo = (o, r, n) => t`
693
- background: ${r};
694
- border: ${o.brutalism.borderWidth} solid ${n};
695
- box-shadow: ${o.brutalism.shadowOffset} ${o.brutalism.shadowOffset}
696
- 0 ${n};
697
- `, Er = e(Ir)`
698
- ${({ $variant: o, theme: r }) => r.brutalism ? {
699
- success: oo(
700
- r,
701
- r.colors.success[50],
702
- r.colors.success[500]
703
- ),
704
- error: oo(
705
- r,
706
- r.colors.error[50],
707
- r.colors.error[500]
708
- ),
709
- warning: oo(
710
- r,
711
- r.colors.warning[50],
712
- r.colors.warning[500]
713
- ),
714
- info: oo(r, r.colors.info[50], r.colors.info[500])
715
- }[o] : {
716
- success: t`
717
- background: ${r.colors.success[50]};
718
- border-left: 4px solid ${r.colors.success[500]};
719
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
720
- `,
721
- error: t`
722
- background: ${r.colors.error[50]};
723
- border-left: 4px solid ${r.colors.error[500]};
724
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
725
- `,
726
- warning: t`
727
- background: ${r.colors.warning[50]};
728
- border-left: 4px solid ${r.colors.warning[500]};
729
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
730
- `,
731
- info: t`
732
- background: ${r.colors.info[50]};
733
- border-left: 4px solid ${r.colors.info[500]};
734
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
735
- `
736
- }[o]}
737
- `, Wr = e.p`
738
- flex: 1;
739
- margin: 0;
740
- font-size: ${({ theme: o }) => o.fontSizes.sm};
741
- font-weight: ${({ theme: o }) => o.brutalism ? 600 : 400};
742
- line-height: 1.5;
743
- color: ${({ theme: o }) => o.colors.neutral[900]};
744
- `, Pr = e.button`
745
- flex-shrink: 0;
746
- display: inline-flex;
747
- align-items: center;
748
- justify-content: center;
749
- width: 24px;
750
- height: 24px;
751
- border: none;
752
- background: none;
753
- cursor: pointer;
754
- border-radius: ${({ theme: o }) => o.radius.md};
755
- color: ${({ theme: o }) => o.colors.neutral[500]};
756
-
757
- &:hover {
758
- background-color: rgba(0, 0, 0, 0.06);
759
- color: ${({ theme: o }) => o.colors.neutral[900]};
760
- }
761
-
762
- &:focus-visible {
763
- outline: 2px solid ${({ theme: o }) => o.colors.primary[500]};
764
- outline-offset: 2px;
765
- }
766
- `;
767
- function Wo({
768
- open: o,
769
- onClose: r,
770
- message: n,
771
- variant: i = "info",
772
- duration: d = 4e3,
773
- position: a = "bottom-right"
774
- }) {
775
- const [c, u] = N(o), [g, f] = N(!1);
776
- return F(() => {
777
- if (o)
778
- u(!0), f(!1);
779
- else if (c) {
780
- f(!0);
781
- const $ = setTimeout(() => {
782
- u(!1), f(!1);
783
- }, 200);
784
- return () => {
785
- clearTimeout($);
786
- };
787
- }
788
- }, [o, c]), F(() => {
789
- if (!o || d === 0)
790
- return;
791
- const $ = setTimeout(r, d);
792
- return () => {
793
- clearTimeout($);
794
- };
795
- }, [o, d, r]), c ? zo(
796
- /* @__PURE__ */ T(
797
- Er,
798
- {
799
- $position: a,
800
- $variant: i,
801
- $closing: g,
802
- role: "alert",
803
- "aria-live": "polite",
804
- children: [
805
- /* @__PURE__ */ s(Wr, { children: n }),
806
- /* @__PURE__ */ s(Pr, { onClick: r, "aria-label": "Close notification", children: /* @__PURE__ */ s(Eo, { size: 14, strokeWidth: 2.5 }) })
807
- ]
808
- }
809
- ),
810
- document.body
811
- ) : null;
812
- }
813
- Wo.displayName = "Toast";
814
- const Br = e.form`
815
- display: flex;
816
- flex-direction: column;
817
- gap: ${({ theme: o }) => o.spacing[4]};
818
- `, Or = e.div`
819
- display: flex;
820
- flex-direction: column;
821
- gap: ${({ theme: o }) => o.spacing[1]};
822
- `, Dr = e.label`
823
- font-size: ${({ theme: o }) => o.fontSizes.sm};
824
- font-weight: 500;
825
- color: ${({ theme: o }) => o.colors.neutral[900]};
826
- `, Nr = e.span`
827
- color: ${({ theme: o }) => o.colors.error[500]};
828
- margin-left: 2px;
829
- `, Lr = e.span`
830
- font-size: ${({ theme: o }) => o.fontSizes.xs};
831
- color: ${({ $error: o, theme: r }) => o ? r.colors.error[500] : r.colors.neutral[500]};
832
- `;
833
- function Ar({ onSubmit: o, children: r, ...n }) {
834
- return /* @__PURE__ */ s(
835
- Br,
836
- {
837
- onSubmit: (i) => {
838
- i.preventDefault(), o?.(i);
839
- },
840
- noValidate: !0,
841
- ...n,
842
- children: r
843
- }
844
- );
845
- }
846
- Ar.displayName = "Form";
847
- function Rr({
848
- label: o,
849
- error: r,
850
- helperText: n,
851
- required: i,
852
- children: d
853
- }) {
854
- const a = Z(), c = `${a}-hint`, u = !!(r || n), g = typeof r == "string" ? r : void 0, f = $o.isValidElement(d) ? $o.cloneElement(
855
- d,
856
- {
857
- id: a,
858
- ...u && { "aria-describedby": c },
859
- ...r && { "aria-invalid": !0 }
860
- }
861
- ) : d;
862
- return /* @__PURE__ */ T(Or, { children: [
863
- o && /* @__PURE__ */ T(Dr, { htmlFor: a, children: [
864
- o,
865
- i && /* @__PURE__ */ s(Nr, { "aria-hidden": "true", children: " *" })
866
- ] }),
867
- f,
868
- u && /* @__PURE__ */ s(Lr, { id: c, $error: !!r, children: g ?? n })
869
- ] });
870
- }
871
- Rr.displayName = "FormField";
872
- const jr = e.div`
873
- display: inline-flex;
874
- flex-direction: column;
875
- gap: ${({ theme: o }) => o.spacing[1]};
876
- width: ${({ $fullWidth: o }) => o ? "100%" : "auto"};
877
- `, _r = e.div`
878
- position: relative;
879
- display: flex;
880
- width: 100%;
881
- `, Mr = e.span`
882
- font-size: ${({ theme: o }) => o.fontSizes.xs};
883
- color: ${({ $error: o, theme: r }) => o ? r.colors.error[500] : r.colors.neutral[500]};
884
- `, Vr = e.select`
885
- appearance: none;
886
- width: 100%;
887
- border-radius: ${({ theme: o }) => o.radius.md};
888
- cursor: pointer;
889
- font: inherit;
890
- color: ${({ theme: o }) => o.colors.neutral[900]};
891
- transition:
892
- border-color 0.2s,
893
- box-shadow 0.2s;
894
-
895
- ${({ $size: o, theme: r }) => ({
896
- sm: t`
897
- padding: ${r.spacing[1]} ${r.spacing[2]};
898
- font-size: ${r.fontSizes.sm};
899
- `,
900
- md: t`
901
- padding: ${r.spacing[2]} ${r.spacing[3]};
902
- font-size: ${r.fontSizes.md};
903
- `,
904
- lg: t`
905
- padding: ${r.spacing[3]} ${r.spacing[4]};
906
- font-size: ${r.fontSizes.lg};
593
+ lg: t`
594
+ padding: ${r.spacing[3]} ${r.spacing[4]};
595
+ font-size: ${r.fontSizes.lg};
907
596
  `
908
597
  })[o]}
909
598
 
@@ -922,10 +611,6 @@ const jr = e.div`
922
611
  outlined: t`
923
612
  border: 2px solid ${r.colors.primary[500]};
924
613
  background-color: ${r.colors.neutral[0]};
925
- `,
926
- filled: t`
927
- border: 1px solid transparent;
928
- background-color: ${r.colors.neutral[100]};
929
614
  `
930
615
  }[o]}
931
616
 
@@ -942,7 +627,7 @@ const jr = e.div`
942
627
  cursor: not-allowed;
943
628
  opacity: 0.6;
944
629
  }
945
- `, Kr = e.button`
630
+ `, Sr = i.button`
946
631
  position: absolute;
947
632
  right: ${({ theme: o }) => o.spacing[3]};
948
633
  top: 50%;
@@ -964,7 +649,7 @@ const jr = e.div`
964
649
  outline-offset: 2px;
965
650
  border-radius: 2px;
966
651
  }
967
- `, Fr = e.span`
652
+ `, zr = i.span`
968
653
  position: absolute;
969
654
  right: ${({ theme: o }) => o.spacing[3]};
970
655
  top: 50%;
@@ -974,63 +659,168 @@ const jr = e.div`
974
659
  align-items: center;
975
660
  color: ${({ theme: o }) => o.colors.neutral[500]};
976
661
  `;
977
- function Hr({
662
+ function Tr({
978
663
  options: o,
979
664
  placeholder: r,
980
665
  size: n = "md",
981
- variant: i = "default",
982
- error: d,
666
+ variant: e = "default",
667
+ error: l,
983
668
  fullWidth: a,
984
669
  clearable: c,
985
- onClear: u,
986
- id: g,
987
- value: f,
988
- defaultValue: $,
989
- onChange: w,
670
+ onClear: d,
671
+ id: p,
672
+ value: g,
673
+ defaultValue: b,
674
+ onChange: h,
990
675
  ...y
991
676
  }) {
992
- const b = Z(), m = g ?? b, W = `${m}-hint`, I = typeof d == "string" ? d : void 0, [x, P] = N(
993
- $ ?? ""
994
- ), O = f !== void 0, D = O ? f : x, h = (B) => {
995
- O || P(B.target.value), w?.(B);
996
- }, v = () => {
997
- O || P(""), u?.();
998
- }, k = c && !!D;
999
- return /* @__PURE__ */ T(jr, { $fullWidth: a, children: [
1000
- /* @__PURE__ */ T(_r, { children: [
1001
- /* @__PURE__ */ T(
1002
- Vr,
677
+ const $ = A(), x = p ?? $, v = `${x}-hint`, C = typeof l == "string" ? l : void 0, [M, f] = D(
678
+ b ?? ""
679
+ ), T = g !== void 0, S = T ? g : M, z = (W) => {
680
+ T || f(W.target.value), h?.(W);
681
+ }, w = () => {
682
+ T || f(""), d?.();
683
+ }, I = c && !!S;
684
+ return /* @__PURE__ */ k(mr, { $fullWidth: a, children: [
685
+ /* @__PURE__ */ k(vr, { children: [
686
+ /* @__PURE__ */ k(
687
+ Cr,
1003
688
  {
1004
- id: m,
689
+ id: x,
1005
690
  $size: n,
1006
- $variant: i,
1007
- $error: !!d,
1008
- "aria-invalid": !!d,
1009
- "aria-describedby": I ? W : void 0,
1010
- value: D,
1011
- onChange: h,
691
+ $variant: e,
692
+ $error: !!l,
693
+ "aria-invalid": !!l,
694
+ "aria-describedby": C ? v : void 0,
695
+ value: S,
696
+ onChange: z,
1012
697
  ...y,
1013
698
  children: [
1014
699
  r && /* @__PURE__ */ s("option", { value: "", disabled: !0, children: r }),
1015
- o.map((B) => /* @__PURE__ */ s("option", { value: B.value, disabled: B.disabled, children: B.label }, B.value))
700
+ o.map((W) => /* @__PURE__ */ s("option", { value: W.value, disabled: W.disabled, children: W.label }, W.value))
1016
701
  ]
1017
702
  }
1018
703
  ),
1019
- k ? /* @__PURE__ */ s(
1020
- Kr,
704
+ I ? /* @__PURE__ */ s(
705
+ Sr,
1021
706
  {
1022
707
  type: "button",
1023
- onClick: v,
708
+ onClick: w,
1024
709
  "aria-label": "Clear selection",
1025
- children: /* @__PURE__ */ s(Eo, { size: 14 })
710
+ children: /* @__PURE__ */ s(co, { size: 14 })
1026
711
  }
1027
- ) : /* @__PURE__ */ s(Fr, { "aria-hidden": "true", children: /* @__PURE__ */ s(Io, { size: 14 }) })
712
+ ) : /* @__PURE__ */ s(zr, { "aria-hidden": "true", children: /* @__PURE__ */ s(zo, { size: 14 }) })
1028
713
  ] }),
1029
- I && /* @__PURE__ */ s(Mr, { id: W, $error: !0, children: I })
714
+ C && /* @__PURE__ */ s(kr, { id: v, $error: !0, children: C })
1030
715
  ] });
1031
716
  }
1032
- Hr.displayName = "Select";
1033
- const Yr = e.a`
717
+ Tr.displayName = "Select";
718
+ const go = i.span`
719
+ display: inline-block;
720
+ `, Ir = i.span`
721
+ display: inline-block;
722
+ min-width: 60px;
723
+ padding: ${({ theme: o }) => `${o.spacing[1]} ${o.spacing[2]}`};
724
+ border-radius: ${({ theme: o }) => o.radius.md};
725
+ color: ${({ $empty: o, theme: r }) => o ? r.colors.neutral[400] : "inherit"};
726
+
727
+ ${({ theme: o }) => o.brutalism ? t`
728
+ border: ${o.brutalism.borderWidth} solid transparent;
729
+ ` : t`
730
+ border: 1px solid transparent;
731
+ `}
732
+
733
+ ${({ $disabled: o, theme: r }) => o ? t`
734
+ opacity: 0.5;
735
+ ` : t`
736
+ cursor: text;
737
+ transition:
738
+ border-color 0.15s ease,
739
+ box-shadow 0.15s ease;
740
+
741
+ &:hover {
742
+ ${r.brutalism ? t`
743
+ border-color: ${r.colors.neutral[900]};
744
+ box-shadow: ${r.brutalism.shadowOffset}
745
+ ${r.brutalism.shadowOffset} 0
746
+ ${r.colors.neutral[900]};
747
+ ` : t`
748
+ border-color: ${r.colors.primary[500]};
749
+ box-shadow: ${r.shadows.focusRing};
750
+ `}
751
+ }
752
+
753
+ &:focus {
754
+ outline: none;
755
+ box-shadow: ${r.shadows.focusRing};
756
+ }
757
+ `}
758
+ `, Dr = i.input`
759
+ display: inline-block;
760
+ min-width: 60px;
761
+ padding: ${({ theme: o }) => `${o.spacing[1]} ${o.spacing[2]}`};
762
+ border-radius: ${({ theme: o }) => o.radius.md};
763
+ font: inherit;
764
+ color: inherit;
765
+ background: ${({ theme: o }) => o.colors.neutral[0]};
766
+ outline: none;
767
+
768
+ ${({ theme: o }) => o.brutalism ? t`
769
+ border: ${o.brutalism.borderWidth} solid
770
+ ${o.colors.neutral[900]};
771
+ box-shadow: ${o.brutalism.shadowOffset}
772
+ ${o.brutalism.shadowOffset} 0 ${o.colors.neutral[900]};
773
+ ` : t`
774
+ border: 1px solid ${o.colors.primary[500]};
775
+ box-shadow: ${o.shadows.focusRing};
776
+ `}
777
+ `;
778
+ function Mr({
779
+ value: o,
780
+ defaultValue: r = "",
781
+ onChange: n,
782
+ onSubmit: e,
783
+ onCancel: l,
784
+ placeholder: a = "Click to edit",
785
+ disabled: c = !1
786
+ }) {
787
+ const d = o !== void 0, [p, g] = D(r), b = d ? o : p, [h, y] = D(!1), [$, x] = D(""), v = U(null), C = () => {
788
+ c || (x(b), y(!0), setTimeout(() => {
789
+ v.current?.focus(), v.current?.select();
790
+ }, 0));
791
+ }, M = () => {
792
+ d || g($), n?.($), e?.($), y(!1);
793
+ }, f = () => {
794
+ l?.(b), y(!1);
795
+ }, T = (S) => {
796
+ S.key === "Enter" ? M() : S.key === "Escape" && f();
797
+ };
798
+ return h ? /* @__PURE__ */ s(go, { children: /* @__PURE__ */ s(
799
+ Dr,
800
+ {
801
+ ref: v,
802
+ value: $,
803
+ size: Math.max($.length, a.length, 10),
804
+ onChange: (S) => x(S.target.value),
805
+ onBlur: M,
806
+ onKeyDown: T,
807
+ "aria-label": "Edit value"
808
+ }
809
+ ) }) : /* @__PURE__ */ s(go, { children: /* @__PURE__ */ s(
810
+ Ir,
811
+ {
812
+ role: c ? void 0 : "button",
813
+ tabIndex: c ? void 0 : 0,
814
+ $disabled: c,
815
+ $empty: !b,
816
+ onClick: C,
817
+ onKeyDown: (S) => S.key === "Enter" && C(),
818
+ children: b || a
819
+ }
820
+ ) });
821
+ }
822
+ Mr.displayName = "Editable";
823
+ const Wr = i.a`
1034
824
  text-decoration: underline;
1035
825
  text-underline-offset: 2px;
1036
826
  transition: color 0.15s;
@@ -1056,166 +846,426 @@ const Yr = e.a`
1056
846
  `
1057
847
  })[o]}
1058
848
  `;
1059
- function Ur({
849
+ function To({
1060
850
  variant: o = "default",
1061
851
  external: r,
1062
852
  children: n,
1063
- ...i
853
+ ...e
1064
854
  }) {
1065
855
  return /* @__PURE__ */ s(
1066
- Yr,
856
+ Wr,
1067
857
  {
1068
858
  $variant: o,
1069
859
  ...r && { target: "_blank", rel: "noreferrer" },
1070
- ...i,
860
+ ...e,
1071
861
  children: n
1072
862
  }
1073
863
  );
1074
864
  }
1075
- Ur.displayName = "Link";
1076
- const qr = e.div`
1077
- border-radius: ${({ theme: o }) => o.radius.md};
1078
- background: ${({ theme: o }) => o.colors.neutral[0]};
1079
- overflow: hidden;
1080
-
1081
- ${({ theme: o, $accentColor: r }) => o.brutalism ? t`
1082
- border: ${o.brutalism.borderWidth} solid
1083
- ${r ?? o.colors.neutral[900]};
1084
- box-shadow: ${o.brutalism.shadowOffset}
1085
- ${o.brutalism.shadowOffset} 0
1086
- ${r ?? o.colors.neutral[900]};
1087
- ` : t`
1088
- border: 1px solid ${r ?? o.colors.neutral[200]};
1089
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
1090
- `}
1091
- `, Gr = e.button`
1092
- width: 100%;
865
+ To.displayName = "Link";
866
+ const Or = i.div`
1093
867
  display: flex;
1094
- align-items: flex-start;
1095
- gap: ${({ theme: o }) => o.spacing[3]};
1096
- padding: ${({ theme: o }) => o.spacing[4]};
1097
- background: ${({ theme: o }) => o.brutalism ? o.colors.neutral[100] : o.colors.neutral[0]};
1098
- border: none;
1099
- cursor: pointer;
1100
- text-align: left;
1101
-
1102
- &:hover {
1103
- background: ${({ theme: o }) => o.colors.neutral[100]};
1104
- }
1105
-
1106
- &:focus-visible {
1107
- outline: 2px solid
1108
- ${({ theme: o, $accentColor: r }) => r ?? o.colors.primary[500]};
1109
- outline-offset: -2px;
1110
- }
1111
- `, Xr = e.div`
1112
- flex: 1;
1113
- min-width: 0;
1114
- `, Zr = e.span`
1115
- display: block;
868
+ flex-direction: column;
869
+ gap: ${({ theme: o }) => o.spacing[1]};
870
+ `, Pr = i.span`
871
+ font-size: ${({ theme: o }) => o.fontSizes.xs};
872
+ color: ${({ theme: o }) => o.colors.neutral[500]};
873
+ font-weight: ${({ theme: o }) => o.brutalism ? "700" : "500"};
874
+ `, Nr = i.span`
1116
875
  font-size: ${({ theme: o }) => o.fontSizes.md};
1117
- font-weight: 600;
1118
876
  color: ${({ theme: o }) => o.colors.neutral[900]};
1119
- `, Jr = e.span`
1120
- display: block;
1121
- font-size: ${({ theme: o }) => o.fontSizes.sm};
1122
- color: ${({ theme: o }) => o.colors.neutral[500]};
1123
- `, Qr = e.div`
1124
- display: flex;
1125
- flex-direction: row;
1126
- align-items: center;
1127
- justify-content: space-between;
1128
- margin-top: ${({ theme: o }) => o.spacing[1]};
1129
-
1130
- @media (max-width: 640px) {
1131
- flex-direction: column;
1132
- align-items: flex-start;
1133
- gap: ${({ theme: o }) => o.spacing[2]};
1134
- }
1135
- `, on = e.div`
877
+ `;
878
+ function Er({ label: o, value: r, href: n }) {
879
+ return /* @__PURE__ */ k(Or, { children: [
880
+ /* @__PURE__ */ s(Pr, { children: o }),
881
+ n ? /* @__PURE__ */ s(To, { href: n, external: !0, children: r }) : /* @__PURE__ */ s(Nr, { children: r ?? "—" })
882
+ ] });
883
+ }
884
+ Er.displayName = "Field";
885
+ const Lr = F`
886
+ from { opacity: 0; }
887
+ to { opacity: 1; }
888
+ `, Fr = F`
889
+ from { opacity: 1; }
890
+ to { opacity: 0; }
891
+ `, Br = F`
892
+ from { opacity: 0; transform: scale(0.95) translateY(-8px); }
893
+ to { opacity: 1; transform: scale(1) translateY(0); }
894
+ `, Vr = F`
895
+ from { opacity: 1; transform: scale(1) translateY(0); }
896
+ to { opacity: 0; transform: scale(0.95) translateY(-8px); }
897
+ `, _r = i.div`
898
+ position: fixed;
899
+ inset: 0;
900
+ background-color: rgba(0, 0, 0, 0.5);
1136
901
  display: flex;
1137
902
  align-items: center;
1138
- gap: ${({ theme: o }) => o.spacing[2]};
1139
- `, rn = e.span`
1140
- display: inline-flex;
1141
- align-items: center;
1142
903
  justify-content: center;
1143
- flex-shrink: 0;
1144
- transition: transform 0.2s ease;
1145
- transform: ${({ $open: o }) => o ? "rotate(180deg)" : "rotate(0deg)"};
1146
- color: ${({ theme: o, $accentColor: r }) => r ?? o.colors.neutral[500]};
1147
- `, nn = e.div`
1148
- display: grid;
1149
- grid-template-rows: ${({ $open: o }) => o ? "1fr" : "0fr"};
1150
- transition: grid-template-rows 0.2s ease;
1151
- `, tn = e.div`
1152
- overflow: hidden;
1153
- `, sn = e.div`
904
+ z-index: ${({ theme: o }) => o.zIndex.modal};
905
+ animation: ${({ $closing: o }) => o ? Fr : Lr} 0.15s ease
906
+ forwards;
907
+ `, jr = i.div`
908
+ position: relative;
909
+ background: ${({ theme: o }) => o.colors.neutral[0]};
910
+ border-radius: ${({ theme: o }) => o.radius.md};
911
+ box-shadow: ${({ theme: o }) => o.brutalism ? `${o.brutalism.shadowOffset} ${o.brutalism.shadowOffset} 0 ${o.colors.neutral[900]}` : "0 20px 60px rgba(0,0,0,0.3)"};
912
+ border: ${({ theme: o }) => o.brutalism ? `${o.brutalism.borderWidth} solid ${o.colors.neutral[900]}` : "none"};
913
+ display: flex;
914
+ flex-direction: column;
915
+ max-height: 90vh;
916
+ animation: ${({ $closing: o }) => o ? Vr : Br} 0.15s ease
917
+ forwards;
918
+
919
+ ${({ $size: o }) => o === "sm" && t`
920
+ width: min(400px, 90vw);
921
+ `}
922
+ ${({ $size: o }) => o === "md" && t`
923
+ width: min(560px, 90vw);
924
+ `}
925
+ ${({ $size: o }) => o === "lg" && t`
926
+ width: min(720px, 90vw);
927
+ `}
928
+ ${({ $size: o }) => o === "fullscreen" && t`
929
+ width: 100vw;
930
+ height: 100vh;
931
+ max-height: 100vh;
932
+ border-radius: 0;
933
+ `}
934
+ `, Ar = i.div`
935
+ display: flex;
936
+ align-items: center;
937
+ gap: ${({ theme: o }) => o.spacing[2]};
938
+ padding: ${({ theme: o }) => o.spacing[4]};
939
+ border-bottom: 1px solid ${({ theme: o }) => o.colors.neutral[200]};
940
+ flex-shrink: 0;
941
+ `, Rr = i.h2`
942
+ flex: 1;
943
+ font-size: ${({ theme: o }) => o.fontSizes.lg};
944
+ font-weight: 600;
945
+ margin: 0;
946
+ `, Yr = i.button`
947
+ display: inline-flex;
948
+ align-items: center;
949
+ justify-content: center;
950
+ margin-left: auto;
951
+ flex-shrink: 0;
952
+ width: 32px;
953
+ height: 32px;
954
+ border: none;
955
+ background: none;
956
+ cursor: pointer;
957
+ border-radius: ${({ theme: o }) => o.radius.md};
958
+ font-size: 20px;
959
+ line-height: 1;
960
+ color: ${({ theme: o }) => o.colors.neutral[500]};
961
+
962
+ &:hover {
963
+ background-color: ${({ theme: o }) => o.colors.neutral[100]};
964
+ color: ${({ theme: o }) => o.colors.neutral[900]};
965
+ }
966
+
967
+ &:focus-visible {
968
+ outline: 2px solid ${({ theme: o }) => o.colors.primary[500]};
969
+ outline-offset: 2px;
970
+ }
971
+ `, Hr = i.div`
972
+ padding: ${({ theme: o }) => o.spacing[4]};
973
+ overflow-y: auto;
974
+ flex: 1;
975
+ `, Ur = i.div`
976
+ display: flex;
977
+ align-items: center;
978
+ justify-content: flex-end;
979
+ gap: ${({ theme: o }) => o.spacing[2]};
1154
980
  padding: ${({ theme: o }) => o.spacing[4]};
1155
981
  border-top: 1px solid ${({ theme: o }) => o.colors.neutral[200]};
1156
- `;
1157
- function en({
1158
- title: o,
1159
- children: r,
1160
- defaultOpen: n = !1,
1161
- open: i,
1162
- onToggle: d,
1163
- subtitle: a,
1164
- headerActions: c,
1165
- accentColor: u
982
+ flex-shrink: 0;
983
+ `, Kr = [
984
+ "button:not([disabled])",
985
+ "input:not([disabled])",
986
+ "select:not([disabled])",
987
+ "textarea:not([disabled])",
988
+ "a[href]",
989
+ '[tabindex]:not([tabindex="-1"])'
990
+ ].join(", ");
991
+ function bo(o) {
992
+ return Array.from(
993
+ o.querySelectorAll(Kr)
994
+ );
995
+ }
996
+ function Io({
997
+ open: o,
998
+ onClose: r,
999
+ title: n,
1000
+ children: e,
1001
+ footer: l,
1002
+ size: a = "md",
1003
+ closeOnBackdrop: c = !0,
1004
+ closeOnEscape: d = !0,
1005
+ ariaLabelledBy: p,
1006
+ ariaDescribedBy: g
1166
1007
  }) {
1167
- const [g, f] = N(n), $ = Z(), w = i !== void 0, y = w ? i : g;
1168
- return /* @__PURE__ */ T(qr, { $accentColor: u, children: [
1169
- /* @__PURE__ */ T(
1170
- Gr,
1008
+ const b = U(null), h = U(null), y = A(), $ = p ?? (n ? y : void 0), [x, v] = D(o), [C, M] = D(!1);
1009
+ return j(() => {
1010
+ if (o)
1011
+ v(!0), M(!1);
1012
+ else if (x) {
1013
+ M(!0);
1014
+ const f = setTimeout(() => {
1015
+ v(!1), M(!1);
1016
+ }, 150);
1017
+ return () => clearTimeout(f);
1018
+ }
1019
+ }, [o, x]), j(() => {
1020
+ if (!o)
1021
+ return;
1022
+ const f = document.body.style.overflow;
1023
+ return document.body.style.overflow = "hidden", () => {
1024
+ document.body.style.overflow = f;
1025
+ };
1026
+ }, [o]), j(() => {
1027
+ if (!o || !b.current)
1028
+ return;
1029
+ const f = b.current, T = document.activeElement;
1030
+ (bo(f)[0] ?? f).focus();
1031
+ const z = (w) => {
1032
+ if (w.key === "Escape" && d) {
1033
+ r();
1034
+ return;
1035
+ }
1036
+ if (w.key !== "Tab")
1037
+ return;
1038
+ const I = bo(f);
1039
+ if (I.length === 0) {
1040
+ w.preventDefault();
1041
+ return;
1042
+ }
1043
+ const W = I[0], O = I[I.length - 1];
1044
+ w.shiftKey ? document.activeElement === W && (w.preventDefault(), O.focus()) : document.activeElement === O && (w.preventDefault(), W.focus());
1045
+ };
1046
+ return document.addEventListener("keydown", z), () => {
1047
+ document.removeEventListener("keydown", z), T?.focus();
1048
+ };
1049
+ }, [o, d, r, x]), x ? Co(
1050
+ /* @__PURE__ */ s(
1051
+ _r,
1171
1052
  {
1172
- type: "button",
1173
- $open: y,
1174
- $accentColor: u,
1175
- "aria-expanded": y,
1176
- "aria-controls": $,
1177
- onClick: () => {
1178
- const m = !y;
1179
- w || f(m), d?.(m);
1053
+ $closing: C,
1054
+ onMouseDown: (f) => {
1055
+ h.current = f.target;
1180
1056
  },
1057
+ onClick: (f) => {
1058
+ c && h.current === f.currentTarget && r();
1059
+ },
1060
+ children: /* @__PURE__ */ k(
1061
+ jr,
1062
+ {
1063
+ ref: b,
1064
+ role: "dialog",
1065
+ "aria-modal": "true",
1066
+ "aria-labelledby": $,
1067
+ "aria-describedby": g,
1068
+ $size: a,
1069
+ $closing: C,
1070
+ tabIndex: -1,
1071
+ onClick: (f) => f.stopPropagation(),
1072
+ children: [
1073
+ /* @__PURE__ */ k(Ar, { children: [
1074
+ n && /* @__PURE__ */ s(Rr, { id: y, children: n }),
1075
+ /* @__PURE__ */ s(Yr, { onClick: r, "aria-label": "Close modal", children: "×" })
1076
+ ] }),
1077
+ /* @__PURE__ */ s(Hr, { children: e }),
1078
+ l && /* @__PURE__ */ s(Ur, { children: l })
1079
+ ]
1080
+ }
1081
+ )
1082
+ }
1083
+ ),
1084
+ document.body
1085
+ ) : null;
1086
+ }
1087
+ Io.displayName = "Modal";
1088
+ const qr = F`
1089
+ from { opacity: 0; transform: translateY(12px); }
1090
+ to { opacity: 1; transform: translateY(0); }
1091
+ `, Gr = F`
1092
+ from { opacity: 0; transform: translateY(-12px); }
1093
+ to { opacity: 1; transform: translateY(0); }
1094
+ `, Jr = F`
1095
+ from { opacity: 1; }
1096
+ to { opacity: 0; }
1097
+ `, Xr = i.div`
1098
+ position: fixed;
1099
+ z-index: ${({ theme: o }) => o.zIndex.toast};
1100
+ display: flex;
1101
+ align-items: center;
1102
+ gap: ${({ theme: o }) => o.spacing[3]};
1103
+ min-width: 280px;
1104
+ max-width: 400px;
1105
+ padding: ${({ theme: o }) => `${o.spacing[3]} ${o.spacing[4]}`};
1106
+ border-radius: ${({ theme: o }) => o.radius.md};
1107
+ animation: ${({ $closing: o, $position: r }) => o ? t`
1108
+ ${Jr} 0.2s ease forwards
1109
+ ` : r.startsWith("top") ? t`
1110
+ ${Gr} 0.2s ease forwards
1111
+ ` : t`
1112
+ ${qr} 0.2s ease forwards
1113
+ `};
1114
+
1115
+ ${({ $position: o, theme: r }) => ({
1116
+ "bottom-right": t`
1117
+ bottom: ${r.spacing[6]};
1118
+ right: ${r.spacing[6]};
1119
+ `,
1120
+ "bottom-left": t`
1121
+ bottom: ${r.spacing[6]};
1122
+ left: ${r.spacing[6]};
1123
+ `,
1124
+ "top-right": t`
1125
+ top: ${r.spacing[6]};
1126
+ right: ${r.spacing[6]};
1127
+ `,
1128
+ "top-left": t`
1129
+ top: ${r.spacing[6]};
1130
+ left: ${r.spacing[6]};
1131
+ `
1132
+ })[o]}
1133
+ `, J = (o, r, n) => t`
1134
+ background: ${r};
1135
+ border: ${o.brutalism.borderWidth} solid ${n};
1136
+ box-shadow: ${o.brutalism.shadowOffset} ${o.brutalism.shadowOffset}
1137
+ 0 ${n};
1138
+ `, Zr = i(Xr)`
1139
+ ${({ $variant: o, theme: r }) => r.brutalism ? {
1140
+ success: J(
1141
+ r,
1142
+ r.colors.success[50],
1143
+ r.colors.success[500]
1144
+ ),
1145
+ error: J(
1146
+ r,
1147
+ r.colors.error[50],
1148
+ r.colors.error[500]
1149
+ ),
1150
+ warning: J(
1151
+ r,
1152
+ r.colors.warning[50],
1153
+ r.colors.warning[500]
1154
+ ),
1155
+ info: J(r, r.colors.info[50], r.colors.info[500])
1156
+ }[o] : {
1157
+ success: t`
1158
+ background: ${r.colors.success[50]};
1159
+ border-left: 4px solid ${r.colors.success[500]};
1160
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
1161
+ `,
1162
+ error: t`
1163
+ background: ${r.colors.error[50]};
1164
+ border-left: 4px solid ${r.colors.error[500]};
1165
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
1166
+ `,
1167
+ warning: t`
1168
+ background: ${r.colors.warning[50]};
1169
+ border-left: 4px solid ${r.colors.warning[500]};
1170
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
1171
+ `,
1172
+ info: t`
1173
+ background: ${r.colors.info[50]};
1174
+ border-left: 4px solid ${r.colors.info[500]};
1175
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
1176
+ `
1177
+ }[o]}
1178
+ `, Qr = i.p`
1179
+ flex: 1;
1180
+ margin: 0;
1181
+ font-size: ${({ theme: o }) => o.fontSizes.sm};
1182
+ font-weight: ${({ theme: o }) => o.brutalism ? 600 : 400};
1183
+ line-height: 1.5;
1184
+ color: ${({ theme: o }) => o.colors.neutral[900]};
1185
+ `, on = i.button`
1186
+ flex-shrink: 0;
1187
+ display: inline-flex;
1188
+ align-items: center;
1189
+ justify-content: center;
1190
+ width: 24px;
1191
+ height: 24px;
1192
+ border: none;
1193
+ background: none;
1194
+ cursor: pointer;
1195
+ border-radius: ${({ theme: o }) => o.radius.md};
1196
+ color: ${({ theme: o }) => o.colors.neutral[500]};
1197
+
1198
+ &:hover {
1199
+ background-color: rgba(0, 0, 0, 0.06);
1200
+ color: ${({ theme: o }) => o.colors.neutral[900]};
1201
+ }
1202
+
1203
+ &:focus-visible {
1204
+ outline: 2px solid ${({ theme: o }) => o.colors.primary[500]};
1205
+ outline-offset: 2px;
1206
+ }
1207
+ `;
1208
+ function Do({
1209
+ open: o,
1210
+ onClose: r,
1211
+ message: n,
1212
+ variant: e = "info",
1213
+ duration: l = 4e3,
1214
+ position: a = "bottom-right"
1215
+ }) {
1216
+ const [c, d] = D(o), [p, g] = D(!1);
1217
+ return j(() => {
1218
+ if (o)
1219
+ d(!0), g(!1);
1220
+ else if (c) {
1221
+ g(!0);
1222
+ const b = setTimeout(() => {
1223
+ d(!1), g(!1);
1224
+ }, 200);
1225
+ return () => {
1226
+ clearTimeout(b);
1227
+ };
1228
+ }
1229
+ }, [o, c]), j(() => {
1230
+ if (!o || l === 0)
1231
+ return;
1232
+ const b = setTimeout(r, l);
1233
+ return () => {
1234
+ clearTimeout(b);
1235
+ };
1236
+ }, [o, l, r]), c ? Co(
1237
+ /* @__PURE__ */ k(
1238
+ Zr,
1239
+ {
1240
+ $position: a,
1241
+ $variant: e,
1242
+ $closing: p,
1243
+ role: "alert",
1244
+ "aria-live": "polite",
1181
1245
  children: [
1182
- /* @__PURE__ */ T(Xr, { children: [
1183
- /* @__PURE__ */ s(Zr, { children: o }),
1184
- (a || c) && /* @__PURE__ */ T(Qr, { children: [
1185
- a && /* @__PURE__ */ s(Jr, { children: a }),
1186
- c && /* @__PURE__ */ s(on, { onClick: (m) => m.stopPropagation(), children: c })
1187
- ] })
1188
- ] }),
1189
- /* @__PURE__ */ s(
1190
- rn,
1191
- {
1192
- $open: y,
1193
- $accentColor: u,
1194
- "aria-hidden": "true",
1195
- children: /* @__PURE__ */ s(Io, { size: 18, strokeWidth: 2.5 })
1196
- }
1197
- )
1246
+ /* @__PURE__ */ s(Qr, { children: n }),
1247
+ /* @__PURE__ */ s(on, { onClick: r, "aria-label": "Close notification", children: /* @__PURE__ */ s(co, { size: 14, strokeWidth: 2.5 }) })
1198
1248
  ]
1199
1249
  }
1200
1250
  ),
1201
- /* @__PURE__ */ s(nn, { $open: y, children: /* @__PURE__ */ s(tn, { id: $, role: "region", "aria-label": o, children: /* @__PURE__ */ s(sn, { children: r }) }) })
1202
- ] });
1251
+ document.body
1252
+ ) : null;
1203
1253
  }
1204
- en.displayName = "CollapsibleCard";
1205
- const Po = So(null);
1206
- function Mn({ children: o }) {
1207
- const [r, n] = N(null), i = R((a) => {
1254
+ Do.displayName = "Toast";
1255
+ const Mo = ao(null);
1256
+ function yt({ children: o }) {
1257
+ const [r, n] = D(null), e = V((a) => {
1208
1258
  n({ ...a, id: Date.now() });
1209
- }, []), d = po(() => Object.assign((a) => i(a), {
1210
- success: (a, c) => i({ ...c, message: a, variant: "success" }),
1211
- error: (a, c) => i({ ...c, message: a, variant: "error" }),
1212
- warning: (a, c) => i({ ...c, message: a, variant: "warning" }),
1213
- info: (a, c) => i({ ...c, message: a, variant: "info" })
1214
- }), [i]);
1215
- return /* @__PURE__ */ T(Po.Provider, { value: { toast: d }, children: [
1259
+ }, []), l = lo(() => Object.assign((a) => e(a), {
1260
+ success: (a, c) => e({ ...c, message: a, variant: "success" }),
1261
+ error: (a, c) => e({ ...c, message: a, variant: "error" }),
1262
+ warning: (a, c) => e({ ...c, message: a, variant: "warning" }),
1263
+ info: (a, c) => e({ ...c, message: a, variant: "info" })
1264
+ }), [e]);
1265
+ return /* @__PURE__ */ k(Mo.Provider, { value: { toast: l }, children: [
1216
1266
  o,
1217
1267
  r && /* @__PURE__ */ s(
1218
- Wo,
1268
+ Do,
1219
1269
  {
1220
1270
  open: !0,
1221
1271
  onClose: () => n(null),
@@ -1228,137 +1278,376 @@ function Mn({ children: o }) {
1228
1278
  )
1229
1279
  ] });
1230
1280
  }
1231
- function Vn() {
1232
- const o = mo(Po);
1281
+ function ht() {
1282
+ const o = io(Mo);
1233
1283
  if (!o)
1234
1284
  throw new Error("useToast must be used within a ToastProvider");
1235
1285
  return o;
1236
1286
  }
1237
- function Kn({
1287
+ const rn = i.form`
1288
+ display: flex;
1289
+ flex-direction: column;
1290
+ gap: ${({ theme: o }) => o.spacing[4]};
1291
+ `, nn = i.div`
1292
+ display: flex;
1293
+ flex-direction: column;
1294
+ gap: ${({ theme: o }) => o.spacing[1]};
1295
+ `, tn = i.label`
1296
+ font-size: ${({ theme: o }) => o.fontSizes.sm};
1297
+ font-weight: 500;
1298
+ color: ${({ theme: o }) => o.colors.neutral[900]};
1299
+ `, sn = i.span`
1300
+ color: ${({ theme: o }) => o.colors.error[500]};
1301
+ margin-left: 2px;
1302
+ `, en = i.span`
1303
+ font-size: ${({ theme: o }) => o.fontSizes.xs};
1304
+ color: ${({ $error: o, theme: r }) => o ? r.colors.error[500] : r.colors.neutral[500]};
1305
+ `;
1306
+ function an({ onSubmit: o, children: r, ...n }) {
1307
+ return /* @__PURE__ */ s(
1308
+ rn,
1309
+ {
1310
+ onSubmit: (e) => {
1311
+ e.preventDefault(), o?.(e);
1312
+ },
1313
+ noValidate: !0,
1314
+ ...n,
1315
+ children: r
1316
+ }
1317
+ );
1318
+ }
1319
+ an.displayName = "Form";
1320
+ function ln({
1321
+ label: o,
1322
+ error: r,
1323
+ helperText: n,
1324
+ required: e,
1325
+ children: l
1326
+ }) {
1327
+ const a = A(), c = `${a}-hint`, d = !!(r || n), p = typeof r == "string" ? r : void 0, g = po.isValidElement(l) ? po.cloneElement(
1328
+ l,
1329
+ {
1330
+ id: a,
1331
+ ...d && { "aria-describedby": c },
1332
+ ...r && { "aria-invalid": !0 }
1333
+ }
1334
+ ) : l;
1335
+ return /* @__PURE__ */ k(nn, { children: [
1336
+ o && /* @__PURE__ */ k(tn, { htmlFor: a, children: [
1337
+ o,
1338
+ e && /* @__PURE__ */ s(sn, { "aria-hidden": "true", children: " *" })
1339
+ ] }),
1340
+ g,
1341
+ d && /* @__PURE__ */ s(en, { id: c, $error: !!r, children: p ?? n })
1342
+ ] });
1343
+ }
1344
+ ln.displayName = "FormField";
1345
+ function wt({
1238
1346
  initialValues: o,
1239
1347
  validate: r,
1240
1348
  onSubmit: n,
1241
- onError: i
1349
+ onError: e
1242
1350
  }) {
1243
- const [d, a] = N(o), [c, u] = N(
1351
+ const [l, a] = D(o), [c, d] = D(
1244
1352
  {}
1245
- ), [g, f] = N({}), [$, w] = N(!1), y = X(d);
1246
- y.current = d;
1247
- const b = R(
1248
- (h) => {
1353
+ ), [p, g] = D({}), [b, h] = D(!1), y = U(l);
1354
+ y.current = l;
1355
+ const $ = V(
1356
+ (z) => {
1249
1357
  if (!r)
1250
1358
  return {};
1251
- const v = r(h);
1359
+ const w = r(z);
1252
1360
  return Object.fromEntries(
1253
- Object.entries(v).filter(([, k]) => k !== void 0)
1361
+ Object.entries(w).filter(([, I]) => I !== void 0)
1254
1362
  );
1255
1363
  },
1256
1364
  [r]
1257
- ), m = X(g);
1258
- m.current = g;
1259
- const W = R(
1260
- (h) => {
1261
- const { name: v, value: k } = h.target, B = { ...y.current, [v]: k };
1262
- a(B), m.current[v] && u(b(B));
1365
+ ), x = U(p);
1366
+ x.current = p;
1367
+ const v = V(
1368
+ (z) => {
1369
+ const { name: w, value: I } = z.target;
1370
+ process.env.NODE_ENV !== "production" && !w && console.warn(
1371
+ "[useForm] handleChange: field is missing a `name` attribute — value will not be tracked."
1372
+ );
1373
+ const W = { ...y.current, [w]: I };
1374
+ a(W), x.current[w] && d($(W));
1263
1375
  },
1264
- [b]
1265
- ), I = R(
1266
- (h) => {
1267
- const { name: v } = h.target;
1268
- f((k) => ({ ...k, [v]: !0 })), u(b(y.current));
1376
+ [$]
1377
+ ), C = V(
1378
+ (z) => {
1379
+ const { name: w } = z.target;
1380
+ process.env.NODE_ENV !== "production" && !w && console.warn(
1381
+ "[useForm] handleBlur: field is missing a `name` attribute — touched state will not be tracked."
1382
+ ), g((I) => ({ ...I, [w]: !0 })), d($(y.current));
1269
1383
  },
1270
- [b]
1271
- ), x = R(
1272
- (h) => {
1273
- h?.preventDefault();
1274
- const v = Object.keys(y.current).reduce(
1275
- (A, j) => ({ ...A, [j]: !0 }),
1384
+ [$]
1385
+ ), M = V(
1386
+ (z) => {
1387
+ z?.preventDefault();
1388
+ const w = Object.keys(y.current).reduce(
1389
+ (O, P) => ({ ...O, [P]: !0 }),
1276
1390
  {}
1277
1391
  );
1278
- f(v);
1279
- const k = b(y.current);
1280
- if (u(k), Object.keys(k).length > 0) {
1281
- i?.(k);
1392
+ g(w);
1393
+ const I = $(y.current);
1394
+ if (d(I), Object.keys(I).length > 0) {
1395
+ e?.(I);
1282
1396
  return;
1283
1397
  }
1284
1398
  (async () => {
1285
- w(!0);
1399
+ h(!0);
1286
1400
  try {
1287
1401
  await n?.(y.current);
1288
1402
  } finally {
1289
- w(!1);
1403
+ h(!1);
1290
1404
  }
1291
1405
  })();
1292
1406
  },
1293
- [b, n, i]
1294
- ), P = R((h, v) => {
1295
- a((k) => ({ ...k, [h]: v }));
1296
- }, []), O = R(() => {
1297
- a(o), u({}), f({}), w(!1);
1298
- }, [o]), D = Object.fromEntries(
1299
- Object.entries(c).filter(([h]) => g[h])
1407
+ [$, n, e]
1408
+ ), f = V((z, w) => {
1409
+ a((I) => ({ ...I, [z]: w }));
1410
+ }, []), T = V(
1411
+ (z) => {
1412
+ a(z ?? o), d({}), g({}), h(!1);
1413
+ },
1414
+ [o]
1415
+ ), S = Object.fromEntries(
1416
+ Object.entries(c).filter(([z]) => p[z])
1300
1417
  );
1301
1418
  return {
1302
- values: d,
1303
- errors: D,
1304
- touched: g,
1305
- handleChange: W,
1306
- handleBlur: I,
1307
- handleSubmit: x,
1308
- setFieldValue: P,
1309
- reset: O,
1310
- isSubmitting: $
1419
+ values: l,
1420
+ errors: S,
1421
+ touched: p,
1422
+ handleChange: v,
1423
+ handleBlur: C,
1424
+ handleSubmit: M,
1425
+ setFieldValue: f,
1426
+ reset: T,
1427
+ isSubmitting: b
1311
1428
  };
1312
1429
  }
1313
- function an(o, r) {
1430
+ const cn = i.div`
1431
+ border-radius: ${({ theme: o }) => o.radius.md};
1432
+ background: ${({ theme: o }) => o.colors.neutral[0]};
1433
+ overflow: hidden;
1434
+
1435
+ ${({ theme: o, $accentColor: r }) => o.brutalism ? t`
1436
+ border: ${o.brutalism.borderWidth} solid
1437
+ ${r ?? o.colors.neutral[900]};
1438
+ box-shadow: ${o.brutalism.shadowOffset}
1439
+ ${o.brutalism.shadowOffset} 0
1440
+ ${r ?? o.colors.neutral[900]};
1441
+ ` : t`
1442
+ border: 1px solid ${r ?? o.colors.neutral[200]};
1443
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
1444
+ `}
1445
+ `, dn = i.button`
1446
+ width: 100%;
1447
+ display: flex;
1448
+ align-items: flex-start;
1449
+ gap: ${({ theme: o }) => o.spacing[3]};
1450
+ padding: ${({ theme: o }) => o.spacing[4]};
1451
+ background: ${({ theme: o }) => o.brutalism ? o.colors.neutral[100] : o.colors.neutral[0]};
1452
+ border: none;
1453
+ cursor: pointer;
1454
+ text-align: left;
1455
+
1456
+ &:hover {
1457
+ background: ${({ theme: o }) => o.colors.neutral[100]};
1458
+ }
1459
+
1460
+ &:focus-visible {
1461
+ outline: 2px solid
1462
+ ${({ theme: o, $accentColor: r }) => r ?? o.colors.primary[500]};
1463
+ outline-offset: -2px;
1464
+ }
1465
+ `, un = i.div`
1466
+ flex: 1;
1467
+ min-width: 0;
1468
+ `, pn = i.span`
1469
+ display: block;
1470
+ font-size: ${({ theme: o }) => o.fontSizes.md};
1471
+ font-weight: 600;
1472
+ color: ${({ theme: o }) => o.colors.neutral[900]};
1473
+ `, fn = i.span`
1474
+ display: block;
1475
+ font-size: ${({ theme: o }) => o.fontSizes.sm};
1476
+ color: ${({ theme: o }) => o.colors.neutral[500]};
1477
+ `, $n = i.div`
1478
+ display: flex;
1479
+ flex-direction: row;
1480
+ align-items: center;
1481
+ justify-content: space-between;
1482
+ margin-top: ${({ theme: o }) => o.spacing[1]};
1483
+
1484
+ @media (max-width: 640px) {
1485
+ flex-direction: column;
1486
+ align-items: flex-start;
1487
+ gap: ${({ theme: o }) => o.spacing[2]};
1488
+ }
1489
+ `, gn = i.div`
1490
+ display: flex;
1491
+ align-items: center;
1492
+ gap: ${({ theme: o }) => o.spacing[2]};
1493
+ `, bn = i.span`
1494
+ display: inline-flex;
1495
+ align-items: center;
1496
+ justify-content: center;
1497
+ flex-shrink: 0;
1498
+ transition: transform 0.2s ease;
1499
+ transform: ${({ $open: o }) => o ? "rotate(180deg)" : "rotate(0deg)"};
1500
+ color: ${({ theme: o, $accentColor: r }) => r ?? o.colors.neutral[500]};
1501
+ `, xn = i.div`
1502
+ display: grid;
1503
+ grid-template-rows: ${({ $open: o }) => o ? "1fr" : "0fr"};
1504
+ transition: grid-template-rows 0.2s ease;
1505
+ `, yn = i.div`
1506
+ overflow: hidden;
1507
+ `, hn = i.div`
1508
+ padding: ${({ theme: o }) => o.spacing[4]};
1509
+ border-top: 1px solid ${({ theme: o }) => o.colors.neutral[200]};
1510
+ `;
1511
+ function wn({
1512
+ title: o,
1513
+ children: r,
1514
+ defaultOpen: n = !1,
1515
+ open: e,
1516
+ onToggle: l,
1517
+ subtitle: a,
1518
+ headerActions: c,
1519
+ accentColor: d
1520
+ }) {
1521
+ const [p, g] = D(n), b = A(), h = e !== void 0, y = h ? e : p;
1522
+ return /* @__PURE__ */ k(cn, { $accentColor: d, children: [
1523
+ /* @__PURE__ */ k(
1524
+ dn,
1525
+ {
1526
+ type: "button",
1527
+ $open: y,
1528
+ $accentColor: d,
1529
+ "aria-expanded": y,
1530
+ "aria-controls": b,
1531
+ onClick: () => {
1532
+ const x = !y;
1533
+ h || g(x), l?.(x);
1534
+ },
1535
+ children: [
1536
+ /* @__PURE__ */ k(un, { children: [
1537
+ /* @__PURE__ */ s(pn, { children: o }),
1538
+ (a || c) && /* @__PURE__ */ k($n, { children: [
1539
+ a && /* @__PURE__ */ s(fn, { children: a }),
1540
+ c && /* @__PURE__ */ s(gn, { onClick: (x) => x.stopPropagation(), children: c })
1541
+ ] })
1542
+ ] }),
1543
+ /* @__PURE__ */ s(
1544
+ bn,
1545
+ {
1546
+ $open: y,
1547
+ $accentColor: d,
1548
+ "aria-hidden": "true",
1549
+ children: /* @__PURE__ */ s(zo, { size: 18, strokeWidth: 2.5 })
1550
+ }
1551
+ )
1552
+ ]
1553
+ }
1554
+ ),
1555
+ /* @__PURE__ */ s(xn, { $open: y, children: /* @__PURE__ */ s(yn, { id: b, role: "region", "aria-label": o, children: /* @__PURE__ */ s(hn, { children: r }) }) })
1556
+ ] });
1557
+ }
1558
+ wn.displayName = "CollapsibleCard";
1559
+ const mn = F`
1560
+ to { transform: rotate(360deg); }
1561
+ `, vn = {
1562
+ sm: "16px",
1563
+ md: "24px",
1564
+ lg: "40px"
1565
+ }, kn = {
1566
+ thin: "2px",
1567
+ normal: "3px",
1568
+ bold: "5px"
1569
+ }, Cn = i.span`
1570
+ display: inline-block;
1571
+ border-radius: 50%;
1572
+ animation: ${mn} 0.7s linear infinite;
1573
+
1574
+ ${({ $size: o = "md", $weight: r = "normal", $color: n, theme: e }) => {
1575
+ const l = vn[o], a = kn[r], c = e.colors.neutral[200], d = n ?? e.colors.primary[500];
1576
+ return t`
1577
+ width: ${l};
1578
+ height: ${l};
1579
+ border: ${a} solid ${c};
1580
+ border-top-color: ${d};
1581
+ `;
1582
+ }}
1583
+ `;
1584
+ function Sn({
1585
+ size: o = "md",
1586
+ weight: r = "normal",
1587
+ color: n,
1588
+ label: e = "Loading..."
1589
+ }) {
1590
+ return /* @__PURE__ */ s(
1591
+ Cn,
1592
+ {
1593
+ $size: o,
1594
+ $weight: r,
1595
+ $color: n,
1596
+ role: "status",
1597
+ "aria-label": e
1598
+ }
1599
+ );
1600
+ }
1601
+ Sn.displayName = "Spinner";
1602
+ function zn(o, r) {
1314
1603
  return o?.key !== r ? { key: r, direction: "asc" } : o.direction === "asc" ? { key: r, direction: "desc" } : null;
1315
1604
  }
1316
- function ln({
1605
+ function Tn({
1317
1606
  data: o,
1318
1607
  sort: r,
1319
1608
  defaultSort: n,
1320
- onSortChange: i
1609
+ onSortChange: e
1321
1610
  }) {
1322
- const d = r !== void 0, [a, c] = N(
1611
+ const l = r !== void 0, [a, c] = D(
1323
1612
  n ?? null
1324
- ), u = d ? r ?? null : a, g = ($) => {
1325
- const w = an(u, $);
1326
- return d || c(w), i?.(w), w;
1327
- }, f = po(() => d || !u ? o : [...o].sort(($, w) => {
1328
- const y = $[u.key], b = w[u.key], m = y < b ? -1 : y > b ? 1 : 0;
1329
- return u.direction === "asc" ? m : -m;
1330
- }), [o, u, d]);
1331
- return { activeSort: u, sortedData: f, handleSort: g };
1613
+ ), d = l ? r ?? null : a, p = (b) => {
1614
+ const h = zn(d, b);
1615
+ return l || c(h), e?.(h), h;
1616
+ }, g = lo(() => l || !d ? o : [...o].sort((b, h) => {
1617
+ const y = b[d.key], $ = h[d.key], x = y < $ ? -1 : y > $ ? 1 : 0;
1618
+ return d.direction === "asc" ? x : -x;
1619
+ }), [o, d, l]);
1620
+ return { activeSort: d, sortedData: g, handleSort: p };
1332
1621
  }
1333
- const cn = 7, wo = 3, vo = 1;
1334
- function dn(o, r) {
1335
- if (r <= cn)
1336
- return Array.from({ length: r }, (i, d) => d + 1);
1622
+ const In = 7, xo = 3, yo = 1;
1623
+ function Dn(o, r) {
1624
+ if (r <= In)
1625
+ return Array.from({ length: r }, (e, l) => l + 1);
1337
1626
  const n = [1];
1338
- o > wo && n.push("...");
1339
- for (let i = Math.max(2, o - vo); i <= Math.min(r - 1, o + vo); i++)
1340
- n.push(i);
1341
- return o < r - wo + 1 && n.push("..."), n.push(r), n;
1627
+ o > xo && n.push("...");
1628
+ for (let e = Math.max(2, o - yo); e <= Math.min(r - 1, o + yo); e++)
1629
+ n.push(e);
1630
+ return o < r - xo + 1 && n.push("..."), n.push(r), n;
1342
1631
  }
1343
- function un({
1632
+ function Mn({
1344
1633
  data: o,
1345
1634
  pageSize: r,
1346
1635
  page: n,
1347
- defaultPage: i,
1348
- totalRows: d,
1636
+ defaultPage: e,
1637
+ totalRows: l,
1349
1638
  onPageChange: a
1350
1639
  }) {
1351
- const c = n !== void 0, [u, g] = N(i ?? 1), f = c ? n : u, $ = (W) => {
1352
- c || g(W), a?.(W);
1353
- }, w = c || d !== void 0, y = d ?? o.length, b = r ? Math.max(1, Math.ceil(y / r)) : 1, m = po(() => {
1354
- if (!r || w)
1640
+ const c = n !== void 0, [d, p] = D(e ?? 1), g = c ? n : d, b = (v) => {
1641
+ c || p(v), a?.(v);
1642
+ }, h = c || l !== void 0, y = l ?? o.length, $ = r ? Math.max(1, Math.ceil(y / r)) : 1, x = lo(() => {
1643
+ if (!r || h)
1355
1644
  return o;
1356
- const W = (f - 1) * r;
1357
- return o.slice(W, W + r);
1358
- }, [o, r, f, w]);
1359
- return { activePage: f, totalPages: b, displayData: m, handlePageChange: $ };
1645
+ const v = (g - 1) * r;
1646
+ return o.slice(v, v + r);
1647
+ }, [o, r, g, h]);
1648
+ return { activePage: g, totalPages: $, displayData: x, handlePageChange: b };
1360
1649
  }
1361
- const Bo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg" ? `${r.spacing[3]} ${r.spacing[4]}` : `${r.spacing[2]} ${r.spacing[3]}`, Oo = e.div`
1650
+ const Wo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg" ? `${r.spacing[3]} ${r.spacing[4]}` : `${r.spacing[2]} ${r.spacing[3]}`, Wn = i.div`
1362
1651
  width: 100%;
1363
1652
 
1364
1653
  ${({ theme: o, $borderColor: r }) => o.brutalism ? t`
@@ -1377,7 +1666,7 @@ const Bo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
1377
1666
  ${({ $stickyHeader: o }) => o && t`
1378
1667
  overflow-y: auto;
1379
1668
  `}
1380
- `, Do = e.table`
1669
+ `, On = i.table`
1381
1670
  width: 100%;
1382
1671
  border-collapse: collapse;
1383
1672
  font-size: ${({ $size: o, theme: r }) => ({
@@ -1389,7 +1678,7 @@ const Bo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
1389
1678
  caption {
1390
1679
  padding: 8px 0;
1391
1680
  }
1392
- `, No = e.thead`
1681
+ `, Pn = i.thead`
1393
1682
  ${({ $stickyHeader: o }) => o && t`
1394
1683
  position: sticky;
1395
1684
  top: 0;
@@ -1409,7 +1698,7 @@ const Bo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
1409
1698
  --th-text: ${o.colors.neutral[600]};
1410
1699
  --th-sep: ${n ?? o.colors.neutral[300]};
1411
1700
  `}
1412
- `, Lo = e.tbody`
1701
+ `, Nn = i.tbody`
1413
1702
  ${({ $rowColor: o }) => o && t`
1414
1703
  tr {
1415
1704
  background-color: ${o};
@@ -1425,21 +1714,37 @@ const Bo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
1425
1714
  tr:last-child td {
1426
1715
  border-bottom: none;
1427
1716
  }
1428
- `, G = e.tr``, fo = e.th`
1717
+
1718
+ tr:hover td {
1719
+ background-color: rgba(0, 0, 0, 0.04);
1720
+ }
1721
+ `, X = i.tr``, En = i(X)`
1722
+ cursor: pointer;
1723
+
1724
+ td {
1725
+ transition:
1726
+ background-color 0.1s,
1727
+ box-shadow 0.1s;
1728
+ }
1729
+
1730
+ &:hover td {
1731
+ background-color: rgba(0, 0, 0, 0.04);
1732
+ }
1733
+
1734
+ &:hover td:first-child {
1735
+ box-shadow: inset 4px 0 0
1736
+ ${({ $accentColor: o, theme: r }) => o ?? r.colors.neutral[900]};
1737
+ }
1738
+ `, Ln = i.th`
1429
1739
  background-color: var(--th-bg);
1430
1740
  color: var(--th-text);
1431
1741
  text-align: left;
1432
1742
  font-weight: 700;
1433
1743
  white-space: nowrap;
1434
1744
 
1435
- padding: ${({ $size: o, theme: r }) => Bo(o, r)};
1745
+ padding: ${({ $size: o, theme: r }) => Wo(o, r)};
1436
1746
 
1437
- ${({ theme: o, $bordered: r }) => o.brutalism ? t`
1438
- border-right: 1px solid var(--th-sep);
1439
- &:last-child {
1440
- border-right: none;
1441
- }
1442
- ` : t`
1747
+ ${({ theme: o, $bordered: r }) => o.brutalism ? t`` : t`
1443
1748
  border-bottom: 2px solid var(--th-sep);
1444
1749
  ${r && t`
1445
1750
  border-right: 1px solid var(--th-sep);
@@ -1448,7 +1753,7 @@ const Bo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
1448
1753
  }
1449
1754
  `}
1450
1755
  `}
1451
- `, pn = e.button`
1756
+ `, Fn = i.button`
1452
1757
  display: inline-flex;
1453
1758
  align-items: center;
1454
1759
  gap: ${({ theme: o }) => o.spacing[1]};
@@ -1467,12 +1772,12 @@ const Bo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
1467
1772
  outline-offset: 2px;
1468
1773
  border-radius: 2px;
1469
1774
  }
1470
- `, fn = e.span`
1775
+ `, Bn = i.span`
1471
1776
  opacity: 0.5;
1472
1777
  display: inline-flex;
1473
1778
  align-items: center;
1474
- `, ro = e.td`
1475
- padding: ${({ $size: o, theme: r }) => Bo(o, r)};
1779
+ `, Oo = i.td`
1780
+ padding: ${({ $size: o, theme: r }) => Wo(o, r)};
1476
1781
 
1477
1782
  ${({ $bordered: o, $borderColor: r, theme: n }) => n.brutalism ? t`
1478
1783
  border-bottom: ${n.brutalism.borderWidth} solid
@@ -1490,16 +1795,16 @@ const Bo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
1490
1795
  border-bottom: 1px solid
1491
1796
  ${r ?? n.colors.neutral[200]};
1492
1797
  `}
1493
- `, gn = e.td`
1798
+ `, Vn = i.td`
1494
1799
  text-align: center;
1495
1800
  color: ${({ theme: o }) => o.colors.neutral[400]};
1496
1801
  padding: ${({ theme: o }) => `${o.spacing[4]} ${o.spacing[3]}`};
1497
1802
  font-size: ${({ theme: o }) => o.fontSizes.sm};
1498
1803
  border-bottom: none;
1499
- `, bn = _`
1804
+ `, _n = F`
1500
1805
  0% { background-position: -400px 0; }
1501
1806
  100% { background-position: 400px 0; }
1502
- `, $n = e(ro)``, xn = e.div`
1807
+ `, jn = i(Oo)``, An = i.div`
1503
1808
  height: 14px;
1504
1809
  border-radius: 4px;
1505
1810
  background: linear-gradient(
@@ -1509,8 +1814,8 @@ const Bo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
1509
1814
  ${({ theme: o }) => o.colors.neutral[200]} 75%
1510
1815
  );
1511
1816
  background-size: 800px 100%;
1512
- animation: ${bn} 1.6s ease-in-out infinite;
1513
- `, yn = e.div`
1817
+ animation: ${_n} 1.6s ease-in-out infinite;
1818
+ `, Rn = i.div`
1514
1819
  display: flex;
1515
1820
  align-items: center;
1516
1821
  justify-content: center;
@@ -1523,7 +1828,7 @@ const Bo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
1523
1828
  ` : t`
1524
1829
  border-top: 1px solid ${o.colors.neutral[200]};
1525
1830
  `}
1526
- `, ao = e.button`
1831
+ `, no = i.button`
1527
1832
  display: inline-flex;
1528
1833
  align-items: center;
1529
1834
  justify-content: center;
@@ -1566,171 +1871,180 @@ const Bo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
1566
1871
  outline: 2px solid ${({ theme: o }) => o.colors.primary[500]};
1567
1872
  outline-offset: 2px;
1568
1873
  }
1569
- `, hn = 4;
1570
- function wn(o, r) {
1571
- return o?.key !== r ? /* @__PURE__ */ s(wr, { size: 14 }) : o.direction === "asc" ? /* @__PURE__ */ s(kr, { size: 14 }) : /* @__PURE__ */ s(yr, { size: 14 });
1874
+ `, Yn = 4;
1875
+ function Hn(o, r) {
1876
+ return o?.key !== r ? /* @__PURE__ */ s(dr, { size: 14 }) : o.direction === "asc" ? /* @__PURE__ */ s(pr, { size: 14 }) : /* @__PURE__ */ s(lr, { size: 14 });
1572
1877
  }
1573
- function vn({
1878
+ function Un({
1574
1879
  columns: o,
1575
1880
  data: r,
1576
1881
  rowKey: n,
1577
- size: i = "md",
1578
- striped: d,
1882
+ size: e = "md",
1883
+ striped: l,
1579
1884
  bordered: a,
1580
1885
  stickyHeader: c,
1581
- caption: u,
1582
- emptyMessage: g = "No data",
1583
- loading: f,
1584
- sort: $,
1585
- defaultSort: w,
1886
+ caption: d,
1887
+ emptyMessage: p = "No data",
1888
+ loading: g,
1889
+ sort: b,
1890
+ defaultSort: h,
1586
1891
  onSortChange: y,
1587
- pageSize: b,
1588
- page: m,
1589
- defaultPage: W,
1590
- totalRows: I,
1591
- onPageChange: x,
1592
- onChange: P,
1593
- borderColor: O,
1594
- headerColor: D,
1595
- rowColor: h,
1596
- stripeColor: v,
1597
- className: k,
1598
- style: B
1892
+ pageSize: $,
1893
+ page: x,
1894
+ defaultPage: v,
1895
+ totalRows: C,
1896
+ onPageChange: M,
1897
+ onChange: f,
1898
+ onRowClick: T,
1899
+ borderColor: S,
1900
+ headerColor: z,
1901
+ rowColor: w,
1902
+ stripeColor: I,
1903
+ className: W,
1904
+ style: O
1599
1905
  }) {
1600
1906
  const {
1601
- activeSort: A,
1602
- sortedData: j,
1603
- handleSort: M
1604
- } = ln({
1907
+ activeSort: P,
1908
+ sortedData: K,
1909
+ handleSort: N
1910
+ } = Tn({
1605
1911
  data: r,
1606
- sort: $,
1607
- defaultSort: w,
1912
+ sort: b,
1913
+ defaultSort: h,
1608
1914
  onSortChange: y
1609
1915
  }), {
1610
- activePage: L,
1611
- totalPages: H,
1612
- displayData: Y,
1613
- handlePageChange: no
1614
- } = un({
1615
- data: j,
1616
- pageSize: b,
1617
- page: m,
1618
- defaultPage: W,
1619
- totalRows: I,
1620
- onPageChange: x
1621
- }), to = (l) => {
1622
- const S = M(l);
1623
- P?.({ sort: S, page: L });
1624
- }, U = (l) => {
1625
- no(l), P?.({ sort: A, page: l });
1626
- }, so = (l, S) => String(n ? l[n] : S), p = !f && Y.length === 0, C = b ?? hn;
1627
- return /* @__PURE__ */ T(
1628
- Oo,
1916
+ activePage: E,
1917
+ totalPages: q,
1918
+ displayData: u,
1919
+ handlePageChange: B
1920
+ } = Mn({
1921
+ data: K,
1922
+ pageSize: $,
1923
+ page: x,
1924
+ defaultPage: v,
1925
+ totalRows: C,
1926
+ onPageChange: M
1927
+ }), R = (m) => {
1928
+ const L = N(m);
1929
+ f?.({ sort: L, page: E });
1930
+ }, Y = (m) => {
1931
+ B(m), f?.({ sort: P, page: m });
1932
+ }, Z = (m, L) => String(n ? m[n] : L), Q = !g && u.length === 0, Eo = $ ?? Yn;
1933
+ return /* @__PURE__ */ k(
1934
+ Wn,
1629
1935
  {
1630
- $borderColor: O,
1936
+ $borderColor: S,
1631
1937
  $stickyHeader: c,
1632
- className: k,
1633
- style: B,
1938
+ className: W,
1939
+ style: O,
1634
1940
  children: [
1635
- /* @__PURE__ */ T(Do, { $size: i, children: [
1636
- u && /* @__PURE__ */ s("caption", { children: u }),
1941
+ /* @__PURE__ */ k(On, { $size: e, children: [
1942
+ d && /* @__PURE__ */ s("caption", { children: d }),
1637
1943
  /* @__PURE__ */ s(
1638
- No,
1944
+ Pn,
1639
1945
  {
1640
- $headerColor: D,
1641
- $borderColor: O,
1946
+ $headerColor: z,
1947
+ $borderColor: S,
1642
1948
  $stickyHeader: c,
1643
- children: /* @__PURE__ */ s(G, { children: o.map((l) => /* @__PURE__ */ s(
1644
- fo,
1949
+ children: /* @__PURE__ */ s(X, { children: o.map((m) => /* @__PURE__ */ s(
1950
+ Ln,
1645
1951
  {
1646
- $size: i,
1952
+ $size: e,
1647
1953
  $bordered: a,
1648
1954
  scope: "col",
1649
- style: l.width ? { width: l.width } : void 0,
1650
- children: l.sortable ? /* @__PURE__ */ T(
1651
- pn,
1955
+ style: m.width ? { width: m.width } : void 0,
1956
+ children: m.sortable ? /* @__PURE__ */ k(
1957
+ Fn,
1652
1958
  {
1653
1959
  type: "button",
1654
- onClick: () => to(l.key),
1655
- "aria-label": `Sort by ${l.header}${A?.key === l.key ? `, ${A.direction}ending` : ""}`,
1960
+ onClick: () => R(m.key),
1961
+ "aria-label": `Sort by ${m.header}${P?.key === m.key ? `, ${P.direction}ending` : ""}`,
1656
1962
  children: [
1657
- l.header,
1658
- /* @__PURE__ */ s(fn, { "aria-hidden": "true", children: wn(A, l.key) })
1963
+ m.header,
1964
+ /* @__PURE__ */ s(Bn, { "aria-hidden": "true", children: Hn(P, m.key) })
1659
1965
  ]
1660
1966
  }
1661
- ) : l.header
1967
+ ) : m.header
1662
1968
  },
1663
- l.key
1969
+ m.key
1664
1970
  )) })
1665
1971
  }
1666
1972
  ),
1667
1973
  /* @__PURE__ */ s(
1668
- Lo,
1974
+ Nn,
1669
1975
  {
1670
- $striped: d,
1671
- $rowColor: h,
1672
- $stripeColor: v,
1673
- children: f ? Array.from({ length: C }).map((l, S) => /* @__PURE__ */ s(G, { children: o.map((z) => /* @__PURE__ */ s(
1674
- $n,
1976
+ $striped: l,
1977
+ $rowColor: w,
1978
+ $stripeColor: I,
1979
+ children: g ? Array.from({ length: Eo }).map((m, L) => /* @__PURE__ */ s(X, { children: o.map((uo) => /* @__PURE__ */ s(
1980
+ jn,
1675
1981
  {
1676
- $size: i,
1982
+ $size: e,
1677
1983
  $bordered: a,
1678
- $borderColor: O,
1679
- children: /* @__PURE__ */ s(xn, {})
1984
+ $borderColor: S,
1985
+ children: /* @__PURE__ */ s(An, {})
1680
1986
  },
1681
- z.key
1682
- )) }, S)) : p ? /* @__PURE__ */ s("tr", { children: /* @__PURE__ */ s(gn, { colSpan: o.length, children: g }) }) : Y.map((l, S) => /* @__PURE__ */ s(G, { children: o.map((z) => /* @__PURE__ */ s(
1683
- ro,
1987
+ uo.key
1988
+ )) }, L)) : Q ? /* @__PURE__ */ s("tr", { children: /* @__PURE__ */ s(Vn, { colSpan: o.length, children: p }) }) : u.map((m, L) => /* @__PURE__ */ s(
1989
+ T ? En : X,
1684
1990
  {
1685
- $size: i,
1686
- $bordered: a,
1687
- $borderColor: O,
1688
- children: z.render ? z.render(l[z.key], l, S) : String(l[z.key] ?? "") || " "
1991
+ onClick: T ? () => T(m) : void 0,
1992
+ $accentColor: T ? S : void 0,
1993
+ children: o.map((G) => /* @__PURE__ */ s(
1994
+ Oo,
1995
+ {
1996
+ $size: e,
1997
+ $bordered: a,
1998
+ $borderColor: S,
1999
+ children: G.render ? G.render(m[G.key], m, L) : String(m[G.key] ?? "") || " "
2000
+ },
2001
+ G.key
2002
+ ))
1689
2003
  },
1690
- z.key
1691
- )) }, so(l, S)))
2004
+ Z(m, L)
2005
+ ))
1692
2006
  }
1693
2007
  )
1694
2008
  ] }),
1695
- b && H > 1 && /* @__PURE__ */ T(yn, { children: [
2009
+ $ && q > 1 && /* @__PURE__ */ k(Rn, { children: [
1696
2010
  /* @__PURE__ */ s(
1697
- ao,
2011
+ no,
1698
2012
  {
1699
2013
  type: "button",
1700
- onClick: () => U(L - 1),
1701
- disabled: L <= 1,
2014
+ onClick: () => Y(E - 1),
2015
+ disabled: E <= 1,
1702
2016
  "aria-label": "Previous page",
1703
2017
  children: "←"
1704
2018
  }
1705
2019
  ),
1706
- dn(L, H).map(
1707
- (l, S) => l === "..." ? /* @__PURE__ */ s(
2020
+ Dn(E, q).map(
2021
+ (m, L) => m === "..." ? /* @__PURE__ */ s(
1708
2022
  "span",
1709
2023
  {
1710
2024
  "aria-hidden": "true",
1711
2025
  style: { padding: "0 4px" },
1712
2026
  children: "…"
1713
2027
  },
1714
- `e${S}`
2028
+ `e${L}`
1715
2029
  ) : /* @__PURE__ */ s(
1716
- ao,
2030
+ no,
1717
2031
  {
1718
2032
  type: "button",
1719
- $active: l === L,
1720
- onClick: () => U(l),
1721
- "aria-label": `Page ${l}`,
1722
- "aria-current": l === L ? "page" : void 0,
1723
- children: l
2033
+ $active: m === E,
2034
+ onClick: () => Y(m),
2035
+ "aria-label": `Page ${m}`,
2036
+ "aria-current": m === E ? "page" : void 0,
2037
+ children: m
1724
2038
  },
1725
- l
2039
+ m
1726
2040
  )
1727
2041
  ),
1728
2042
  /* @__PURE__ */ s(
1729
- ao,
2043
+ no,
1730
2044
  {
1731
2045
  type: "button",
1732
- onClick: () => U(L + 1),
1733
- disabled: L >= H,
2046
+ onClick: () => Y(E + 1),
2047
+ disabled: E >= q,
1734
2048
  "aria-label": "Next page",
1735
2049
  children: "→"
1736
2050
  }
@@ -1740,361 +2054,527 @@ function vn({
1740
2054
  }
1741
2055
  );
1742
2056
  }
1743
- vn.displayName = "Table";
1744
- function Fn({
1745
- defaultSort: o,
1746
- defaultPage: r = 1
1747
- } = {}) {
1748
- const [n, i] = N(o ?? null), [d, a] = N(r);
1749
- return { sort: n, page: d, onSortChange: (g) => {
1750
- i(g), a(1);
1751
- }, onPageChange: (g) => {
1752
- a(g);
1753
- } };
2057
+ Un.displayName = "Table";
2058
+ function mt({
2059
+ defaultSort: o,
2060
+ defaultPage: r = 1
2061
+ } = {}) {
2062
+ const [n, e] = D(o ?? null), [l, a] = D(r);
2063
+ return { sort: n, page: l, onSortChange: (p) => {
2064
+ e(p), a(1);
2065
+ }, onPageChange: (p) => {
2066
+ a(p);
2067
+ } };
2068
+ }
2069
+ const Kn = i.p`
2070
+ margin: 0;
2071
+ font-size: ${({ theme: o }) => o.fontSizes.md};
2072
+ color: ${({ theme: o }) => o.colors.neutral[600]};
2073
+ line-height: 1.5;
2074
+ `, qn = i.button`
2075
+ display: inline-flex;
2076
+ align-items: center;
2077
+ justify-content: center;
2078
+ border-radius: ${({ theme: o }) => o.radius.md};
2079
+ font-weight: 600;
2080
+ cursor: pointer;
2081
+ padding: ${({ theme: o }) => o.spacing[2]} ${({ theme: o }) => o.spacing[4]};
2082
+ font-size: ${({ theme: o }) => o.fontSizes.md};
2083
+ background-color: ${({ theme: o }) => o.colors.error[500]};
2084
+ color: ${({ theme: o }) => o.colors.neutral[0]};
2085
+ border: none;
2086
+
2087
+ &:hover:not(:disabled) {
2088
+ opacity: 0.88;
2089
+ }
2090
+
2091
+ &:focus-visible {
2092
+ outline: 2px solid ${({ theme: o }) => o.colors.error[500]};
2093
+ outline-offset: 2px;
2094
+ }
2095
+
2096
+ &:disabled {
2097
+ opacity: 0.5;
2098
+ cursor: not-allowed;
2099
+ }
2100
+
2101
+ ${({ theme: o }) => o.brutalism && t`
2102
+ border: ${o.brutalism.borderWidth} solid ${o.colors.neutral[900]};
2103
+ box-shadow: ${o.brutalism.shadowOffset}
2104
+ ${o.brutalism.shadowOffset} 0 ${o.colors.neutral[900]};
2105
+ transition:
2106
+ transform 0.1s,
2107
+ box-shadow 0.1s;
2108
+ &:hover:not(:disabled) {
2109
+ opacity: 1;
2110
+ transform: translate(2px, 2px);
2111
+ box-shadow: 2px 2px 0 ${o.colors.neutral[900]};
2112
+ }
2113
+ `}
2114
+ `;
2115
+ function Po({
2116
+ open: o,
2117
+ title: r = "Are you sure?",
2118
+ message: n,
2119
+ confirmLabel: e = "Confirm",
2120
+ cancelLabel: l = "Cancel",
2121
+ variant: a = "default",
2122
+ size: c = "sm",
2123
+ onConfirm: d,
2124
+ onCancel: p
2125
+ }) {
2126
+ return /* @__PURE__ */ s(
2127
+ Io,
2128
+ {
2129
+ open: o,
2130
+ onClose: p,
2131
+ title: r,
2132
+ size: c,
2133
+ closeOnBackdrop: !1,
2134
+ footer: /* @__PURE__ */ k(Lo, { children: [
2135
+ /* @__PURE__ */ s(so, { variant: "outline", onClick: p, children: l }),
2136
+ a === "danger" ? /* @__PURE__ */ s(qn, { type: "button", onClick: d, children: e }) : /* @__PURE__ */ s(so, { variant: "primary", onClick: d, children: e })
2137
+ ] }),
2138
+ children: /* @__PURE__ */ s(Kn, { children: n })
2139
+ }
2140
+ );
2141
+ }
2142
+ Po.displayName = "ConfirmDialog";
2143
+ const No = ao(null);
2144
+ function vt({ children: o }) {
2145
+ const [r, n] = D(null), e = V((c) => new Promise((d) => {
2146
+ n({ ...c, resolve: d });
2147
+ }), []), l = () => {
2148
+ r?.resolve(!0), n(null);
2149
+ }, a = () => {
2150
+ r?.resolve(!1), n(null);
2151
+ };
2152
+ return /* @__PURE__ */ k(No.Provider, { value: { confirm: e }, children: [
2153
+ o,
2154
+ r && /* @__PURE__ */ s(
2155
+ Po,
2156
+ {
2157
+ open: !0,
2158
+ title: r.title,
2159
+ message: r.message,
2160
+ confirmLabel: r.confirmLabel,
2161
+ cancelLabel: r.cancelLabel,
2162
+ variant: r.variant,
2163
+ size: r.size,
2164
+ onConfirm: l,
2165
+ onCancel: a
2166
+ }
2167
+ )
2168
+ ] });
2169
+ }
2170
+ function kt() {
2171
+ const o = io(No);
2172
+ if (!o)
2173
+ throw new Error("useConfirm must be used within a ConfirmProvider");
2174
+ return o.confirm;
1754
2175
  }
1755
- const kn = e(Do)`
1756
- table-layout: fixed;
1757
- `, mn = e(ro)`
1758
- ${({ $editable: o, theme: r }) => o && t`
1759
- cursor: pointer;
1760
- position: relative;
2176
+ const Gn = i.div`
2177
+ position: relative;
2178
+ display: inline-flex;
2179
+ flex-direction: column;
2180
+ gap: ${({ theme: o }) => o.spacing[1]};
2181
+ `, Jn = i.div`
2182
+ display: flex;
2183
+ align-items: center;
2184
+ border-radius: ${({ theme: o }) => o.radius.md};
2185
+ cursor: pointer;
2186
+ user-select: none;
2187
+ min-width: 200px;
2188
+ transition:
2189
+ border-color 0.2s,
2190
+ box-shadow 0.2s;
1761
2191
 
1762
- &:hover {
1763
- background-color: ${r.brutalism ? r.colors.neutral[100] : r.colors.primary[50]};
1764
- }
1765
- `}
1766
- `, Ao = t`
1767
- display: block;
1768
- width: 100%;
1769
- min-width: 0;
1770
- box-sizing: border-box;
1771
- border: none;
1772
- outline: none;
1773
- background: transparent;
1774
- font: inherit;
1775
- color: inherit;
1776
- padding: 0;
1777
- margin: 0;
2192
+ ${({ $size: o, theme: r }) => ({
2193
+ sm: t`
2194
+ padding: ${r.spacing[1]} ${r.spacing[2]};
2195
+ font-size: ${r.fontSizes.sm};
2196
+ `,
2197
+ md: t`
2198
+ padding: ${r.spacing[2]} ${r.spacing[3]};
2199
+ font-size: ${r.fontSizes.md};
2200
+ `,
2201
+ lg: t`
2202
+ padding: ${r.spacing[3]} ${r.spacing[4]};
2203
+ font-size: ${r.fontSizes.lg};
2204
+ `
2205
+ })[o]}
1778
2206
 
1779
2207
  ${({ theme: o }) => o.brutalism ? t`
1780
- &:focus {
1781
- outline: 2px solid ${o.colors.neutral[900]};
1782
- outline-offset: 1px;
1783
- }
1784
- ` : t`
1785
- &:focus {
1786
- box-shadow: ${o.shadows.focusRing};
1787
- }
1788
- `}
1789
- `, Sn = e.input`
1790
- ${Ao}
1791
- `, Cn = e.select`
1792
- ${Ao}
1793
- cursor: pointer;
1794
- `, zn = e(fo)`
1795
- width: 40px;
1796
- `, Tn = e(ro)`
1797
- width: 40px;
1798
- text-align: center;
1799
- padding-left: 0;
1800
- padding-right: 0;
1801
- `, In = e.button`
2208
+ border: ${o.brutalism.borderWidth} solid
2209
+ ${o.colors.neutral[900]};
2210
+ background-color: ${o.colors.neutral[0]};
2211
+ box-shadow: 3px 3px 0 ${o.colors.neutral[900]};
2212
+ ` : t`
2213
+ border: 1px solid ${o.colors.neutral[400]};
2214
+ background-color: ${o.colors.neutral[0]};
2215
+ `}
2216
+
2217
+ ${({ $error: o, theme: r }) => o && t`
2218
+ border-color: ${r.colors.error[500]};
2219
+ `}
2220
+
2221
+ ${({ $disabled: o }) => o && t`
2222
+ cursor: not-allowed;
2223
+ opacity: 0.6;
2224
+ `}
2225
+
2226
+ &:focus {
2227
+ outline: none;
2228
+ box-shadow: ${({ theme: o }) => o.shadows.focusRing};
2229
+ }
2230
+ `, Xn = i.span`
2231
+ flex: 1;
2232
+ color: ${({ $hasValue: o, theme: r }) => o ? r.colors.neutral[900] : r.colors.neutral[400]};
2233
+ white-space: nowrap;
2234
+ overflow: hidden;
2235
+ text-overflow: ellipsis;
2236
+ `, Zn = i.span`
1802
2237
  display: inline-flex;
1803
2238
  align-items: center;
1804
- justify-content: center;
1805
- width: 24px;
1806
- height: 24px;
2239
+ margin-left: ${({ theme: o }) => o.spacing[2]};
2240
+ color: ${({ theme: o }) => o.colors.neutral[500]};
2241
+ flex-shrink: 0;
2242
+ `, Qn = i.button`
2243
+ display: inline-flex;
2244
+ align-items: center;
2245
+ margin-left: ${({ theme: o }) => o.spacing[2]};
1807
2246
  padding: 0;
1808
2247
  background: none;
1809
2248
  border: none;
1810
2249
  cursor: pointer;
1811
- font-size: ${({ theme: o }) => o.fontSizes.xs};
1812
2250
  color: ${({ theme: o }) => o.colors.neutral[500]};
1813
- border-radius: ${({ theme: o }) => o.radius.md};
1814
- transition: color 0.1s;
2251
+ flex-shrink: 0;
1815
2252
 
1816
2253
  &:hover {
1817
- color: ${({ theme: o }) => o.colors.error[500]};
2254
+ color: ${({ theme: o }) => o.colors.neutral[900]};
2255
+ }
1818
2256
 
1819
- ${({ theme: o }) => o.brutalism && t`
1820
- background-color: ${o.colors.error[50]};
1821
- `}
2257
+ &:focus-visible {
2258
+ outline: 2px solid ${({ theme: o }) => o.colors.primary[500]};
2259
+ outline-offset: 2px;
2260
+ border-radius: 2px;
1822
2261
  }
1823
- `, En = e.tr`
2262
+ `, ot = i.span`
2263
+ font-size: ${({ theme: o }) => o.fontSizes.xs};
2264
+ color: ${({ $error: o, theme: r }) => o ? r.colors.error[500] : r.colors.neutral[500]};
2265
+ `, rt = i.div`
2266
+ position: absolute;
2267
+ top: calc(100% + 4px);
2268
+ left: 0;
2269
+ z-index: ${({ theme: o }) => o.zIndex.modal};
2270
+ background: ${({ theme: o }) => o.colors.neutral[0]};
2271
+ border-radius: ${({ theme: o }) => o.radius.md};
2272
+ padding: ${({ theme: o }) => o.spacing[3]};
2273
+ min-width: 280px;
2274
+
1824
2275
  ${({ theme: o }) => o.brutalism ? t`
1825
- border-top: ${o.brutalism.borderWidth} solid
1826
- ${o.colors.neutral[900]};
1827
- ` : t`
1828
- border-top: 1px solid ${o.colors.neutral[200]};
1829
- `}
1830
- `, Wn = e.button`
2276
+ border: ${o.brutalism.borderWidth} solid
2277
+ ${o.colors.neutral[900]};
2278
+ box-shadow: ${o.brutalism.shadowOffset}
2279
+ ${o.brutalism.shadowOffset} 0 ${o.colors.neutral[900]};
2280
+ ` : t`
2281
+ border: 1px solid ${o.colors.neutral[200]};
2282
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
2283
+ `}
2284
+ `, nt = i.div`
2285
+ display: flex;
2286
+ align-items: center;
2287
+ justify-content: space-between;
2288
+ margin-bottom: ${({ theme: o }) => o.spacing[3]};
2289
+ `, ho = i.button`
1831
2290
  display: inline-flex;
1832
2291
  align-items: center;
1833
- gap: ${({ theme: o }) => o.spacing[1]};
1834
- background: none;
2292
+ justify-content: center;
2293
+ width: 28px;
2294
+ height: 28px;
1835
2295
  border: none;
2296
+ background: none;
2297
+ border-radius: ${({ theme: o }) => o.radius.md};
1836
2298
  cursor: pointer;
1837
- font: inherit;
1838
- font-weight: 600;
1839
2299
  color: ${({ theme: o }) => o.colors.neutral[600]};
1840
- padding: ${({ theme: o }) => `${o.spacing[2]} ${o.spacing[3]}`};
1841
- width: 100%;
1842
- text-align: left;
2300
+ padding: 0;
1843
2301
 
1844
2302
  &:hover {
1845
- color: ${({ theme: o }) => o.brutalism ? o.colors.neutral[900] : o.colors.primary[500]};
2303
+ background-color: ${({ theme: o }) => o.colors.neutral[100]};
2304
+ color: ${({ theme: o }) => o.colors.neutral[900]};
1846
2305
  }
1847
2306
 
1848
2307
  &:focus-visible {
1849
2308
  outline: 2px solid ${({ theme: o }) => o.colors.primary[500]};
1850
2309
  outline-offset: 2px;
1851
2310
  }
1852
- `;
1853
- function lo(o, r, n) {
1854
- return typeof o.editable == "function" ? o.editable(r, n) : !!o.editable;
2311
+
2312
+ ${({ theme: o }) => o.brutalism && t`
2313
+ border: ${o.brutalism.borderWidth} solid ${o.colors.neutral[900]};
2314
+ &:hover {
2315
+ background-color: ${o.colors.neutral[100]};
2316
+ transform: translate(1px, 1px);
2317
+ }
2318
+ `}
2319
+ `, tt = i.span`
2320
+ font-weight: 600;
2321
+ font-size: ${({ theme: o }) => o.fontSizes.md};
2322
+ color: ${({ theme: o }) => o.colors.neutral[900]};
2323
+ `, st = i.div`
2324
+ display: grid;
2325
+ grid-template-columns: repeat(7, 1fr);
2326
+ gap: 2px;
2327
+ `, et = i.span`
2328
+ display: flex;
2329
+ align-items: center;
2330
+ justify-content: center;
2331
+ font-size: ${({ theme: o }) => o.fontSizes.xs};
2332
+ font-weight: 600;
2333
+ color: ${({ theme: o }) => o.colors.neutral[500]};
2334
+ padding: ${({ theme: o }) => o.spacing[1]};
2335
+ margin-bottom: 2px;
2336
+ `, wo = i.button`
2337
+ display: flex;
2338
+ align-items: center;
2339
+ justify-content: center;
2340
+ aspect-ratio: 1;
2341
+ border: none;
2342
+ background: none;
2343
+ border-radius: ${({ theme: o }) => o.radius.md};
2344
+ cursor: pointer;
2345
+ font-size: ${({ theme: o }) => o.fontSizes.sm};
2346
+ padding: ${({ theme: o }) => o.spacing[1]};
2347
+ font-weight: ${({ $today: o, $selected: r }) => o || r ? "600" : "400"};
2348
+ pointer-events: ${({ $currentMonth: o }) => o ? "auto" : "none"};
2349
+
2350
+ color: ${({ $currentMonth: o, $selected: r, $today: n, theme: e }) => o ? r ? e.colors.primary.contrast : n ? e.colors.primary[500] : e.colors.neutral[900] : e.colors.neutral[300]};
2351
+
2352
+ background-color: ${({ $selected: o, theme: r }) => o ? r.colors.primary[500] : "transparent"};
2353
+
2354
+ &:hover:not(:disabled) {
2355
+ background-color: ${({ $selected: o, theme: r }) => o ? r.colors.primary[700] : r.colors.neutral[100]};
2356
+ }
2357
+
2358
+ &:disabled {
2359
+ opacity: 0.35;
2360
+ cursor: not-allowed;
2361
+ }
2362
+
2363
+ &:focus-visible {
2364
+ outline: 2px solid ${({ theme: o }) => o.colors.primary[500]};
2365
+ outline-offset: 1px;
2366
+ }
2367
+
2368
+ ${({ $selected: o, $today: r, theme: n }) => n.brutalism && (o || r) && t`
2369
+ border: ${n.brutalism.borderWidth} solid ${n.colors.neutral[900]};
2370
+ ${o && t`
2371
+ box-shadow: 2px 2px 0 ${n.colors.neutral[900]};
2372
+ `}
2373
+ `}
2374
+ `, it = [
2375
+ "January",
2376
+ "February",
2377
+ "March",
2378
+ "April",
2379
+ "May",
2380
+ "June",
2381
+ "July",
2382
+ "August",
2383
+ "September",
2384
+ "October",
2385
+ "November",
2386
+ "December"
2387
+ ], at = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
2388
+ function mo(o, r) {
2389
+ return new Date(o, r + 1, 0).getDate();
1855
2390
  }
1856
- function Pn({
1857
- columns: o,
1858
- defaultData: r,
1859
- data: n,
1860
- rowKey: i,
1861
- onChange: d,
1862
- size: a = "md",
1863
- borderColor: c,
1864
- headerColor: u,
1865
- addRowLabel: g = "Add row",
1866
- newRowFactory: f,
1867
- deletable: $ = !1,
1868
- className: w,
1869
- style: y
1870
- }) {
1871
- const b = n !== void 0, [m, W] = N(r ?? []), I = b ? n : m, [x, P] = N(null), [O, D] = N(""), h = X(null), v = X(null);
1872
- F(() => {
1873
- if (!x)
1874
- return;
1875
- o.find((C) => C.key === x.colKey)?.options ? v.current?.focus() : (h.current?.focus(), h.current?.select());
1876
- }, [x, o]);
1877
- const k = R(
1878
- (p) => {
1879
- b || W(p), d?.(p);
1880
- },
1881
- [b, d]
1882
- ), B = R(
1883
- () => f ? f() : Object.fromEntries(o.map((p) => [p.key, ""])),
1884
- [f, o]
1885
- ), A = R(
1886
- (p) => {
1887
- const C = [];
1888
- return p.forEach((l, S) => {
1889
- o.forEach((z) => {
1890
- lo(z, l, S) && C.push({ rowIndex: S, colKey: z.key });
1891
- });
1892
- }), C;
1893
- },
1894
- [o]
1895
- ), j = (p, C, l) => {
1896
- P({ rowIndex: p, colKey: C }), D(String(l ?? ""));
1897
- }, M = R(() => {
1898
- if (!x)
1899
- return;
1900
- const { rowIndex: p, colKey: C } = x, l = I.map(
1901
- (S, z) => z === p ? { ...S, [C]: O } : S
2391
+ function lt(o, r) {
2392
+ return new Date(o, r, 1).getDay();
2393
+ }
2394
+ function vo(o, r) {
2395
+ return o.getFullYear() === r.getFullYear() && o.getMonth() === r.getMonth() && o.getDate() === r.getDate();
2396
+ }
2397
+ function ct(o, r, n) {
2398
+ if (r) {
2399
+ const e = new Date(
2400
+ r.getFullYear(),
2401
+ r.getMonth(),
2402
+ r.getDate()
1902
2403
  );
1903
- k(l), P(null);
1904
- }, [x, I, O, k]), L = () => {
1905
- P(null), D("");
1906
- }, H = (p) => {
1907
- if (!x)
1908
- return;
1909
- p.preventDefault();
1910
- const { rowIndex: C, colKey: l } = x, S = I.map(
1911
- (E, Q) => Q === C ? { ...E, [l]: O } : E
2404
+ if (o < e) return !0;
2405
+ }
2406
+ if (n) {
2407
+ const e = new Date(
2408
+ n.getFullYear(),
2409
+ n.getMonth(),
2410
+ n.getDate()
1912
2411
  );
1913
- k(S);
1914
- const z = A(S), q = z.findIndex(
1915
- (E) => E.rowIndex === C && E.colKey === l
1916
- ), V = p.shiftKey ? q - 1 : q + 1;
1917
- if (V >= 0 && V < z.length) {
1918
- const E = z[V];
1919
- P(E), D(String(S[E.rowIndex][E.colKey] ?? ""));
1920
- return;
1921
- }
1922
- if (!p.shiftKey && V >= z.length) {
1923
- const E = B(), Q = [...S, E];
1924
- k(Q);
1925
- const go = Q.length - 1, bo = o.find(
1926
- (Ro) => lo(Ro, E, go)
1927
- );
1928
- P(
1929
- bo ? { rowIndex: go, colKey: bo.key } : null
1930
- ), D("");
1931
- return;
1932
- }
1933
- P(null), D("");
1934
- }, Y = (p) => {
1935
- if (p.key === "Enter") {
1936
- if (o.find((l) => l.key === x?.colKey)?.options) {
1937
- v.current?.showPicker();
1938
- return;
1939
- }
1940
- M();
1941
- return;
1942
- }
1943
- if (p.key === "Escape") {
1944
- L();
1945
- return;
1946
- }
1947
- p.key === "Tab" && H(p);
1948
- }, no = () => k([...I, B()]), to = (p) => {
1949
- x?.rowIndex === p && P(null), k(I.filter((C, l) => l !== p));
1950
- }, U = (p, C) => String(i ? p[i] : C), so = $ ? o.length + 1 : o.length;
1951
- return /* @__PURE__ */ s(
1952
- Oo,
1953
- {
1954
- $borderColor: c,
1955
- className: w,
1956
- style: y,
1957
- children: /* @__PURE__ */ T(kn, { $size: a, children: [
1958
- /* @__PURE__ */ s(No, { $headerColor: u, $borderColor: c, children: /* @__PURE__ */ T(G, { children: [
1959
- o.map((p) => /* @__PURE__ */ s(
1960
- fo,
2412
+ if (o > e) return !0;
2413
+ }
2414
+ return !1;
2415
+ }
2416
+ function dt(o) {
2417
+ return o.toLocaleDateString("en-US", {
2418
+ month: "short",
2419
+ day: "numeric",
2420
+ year: "numeric"
2421
+ });
2422
+ }
2423
+ function ut(o) {
2424
+ return o.toLocaleDateString("en-US", {
2425
+ weekday: "long",
2426
+ month: "long",
2427
+ day: "numeric",
2428
+ year: "numeric"
2429
+ });
2430
+ }
2431
+ function pt({
2432
+ value: o = null,
2433
+ onChange: r,
2434
+ placeholder: n = "Select date...",
2435
+ size: e = "md",
2436
+ disabled: l = !1,
2437
+ clearable: a = !1,
2438
+ minDate: c,
2439
+ maxDate: d,
2440
+ formatDate: p,
2441
+ id: g,
2442
+ error: b
2443
+ }) {
2444
+ const h = A(), y = g ?? h, $ = /* @__PURE__ */ new Date(), [x, v] = D(!1), [C, M] = D(
2445
+ () => (o ?? $).getFullYear()
2446
+ ), [f, T] = D(() => (o ?? $).getMonth()), S = U(null);
2447
+ j(() => {
2448
+ if (!x) return;
2449
+ const u = (B) => {
2450
+ S.current && !S.current.contains(B.target) && v(!1);
2451
+ };
2452
+ return document.addEventListener("mousedown", u), () => document.removeEventListener("mousedown", u);
2453
+ }, [x]), j(() => {
2454
+ o && (M(o.getFullYear()), T(o.getMonth()));
2455
+ }, [o]);
2456
+ const z = o ? p ? p(o) : dt(o) : "", w = (u) => {
2457
+ r?.(new Date(C, f, u)), v(!1);
2458
+ }, I = (u) => {
2459
+ u.stopPropagation(), r?.(null);
2460
+ }, W = () => {
2461
+ f === 0 ? (T(11), M((u) => u - 1)) : T((u) => u - 1);
2462
+ }, O = () => {
2463
+ f === 11 ? (T(0), M((u) => u + 1)) : T((u) => u + 1);
2464
+ }, P = mo(C, f), K = lt(C, f), N = [], E = mo(
2465
+ f === 0 ? C - 1 : C,
2466
+ f === 0 ? 11 : f - 1
2467
+ );
2468
+ for (let u = K - 1; u >= 0; u--)
2469
+ N.push({ day: E - u, currentMonth: !1 });
2470
+ for (let u = 1; u <= P; u++)
2471
+ N.push({ day: u, currentMonth: !0 });
2472
+ const q = 42 - N.length;
2473
+ for (let u = 1; u <= q; u++)
2474
+ N.push({ day: u, currentMonth: !1 });
2475
+ return /* @__PURE__ */ k(Gn, { ref: S, children: [
2476
+ /* @__PURE__ */ k(
2477
+ Jn,
2478
+ {
2479
+ id: y,
2480
+ $size: e,
2481
+ $error: !!b,
2482
+ $disabled: l,
2483
+ role: "combobox",
2484
+ "aria-haspopup": "true",
2485
+ "aria-expanded": x,
2486
+ tabIndex: l ? -1 : 0,
2487
+ onClick: () => {
2488
+ l || v((u) => !u);
2489
+ },
2490
+ onKeyDown: (u) => {
2491
+ (u.key === "Enter" || u.key === " ") && !l && (u.preventDefault(), v((B) => !B)), u.key === "Escape" && v(!1);
2492
+ },
2493
+ children: [
2494
+ /* @__PURE__ */ s(Xn, { $hasValue: !!o, children: z || n }),
2495
+ a && o ? /* @__PURE__ */ s(
2496
+ Qn,
1961
2497
  {
1962
- $size: a,
1963
- scope: "col",
1964
- style: p.width ? { width: p.width } : void 0,
1965
- children: p.header
1966
- },
1967
- p.key
1968
- )),
1969
- $ && /* @__PURE__ */ s(zn, { $size: a, "aria-label": "Actions" })
1970
- ] }) }),
1971
- /* @__PURE__ */ T(Lo, { children: [
1972
- I.map((p, C) => /* @__PURE__ */ T(G, { children: [
1973
- o.map((l) => {
1974
- const S = x?.rowIndex === C && x.colKey === l.key, z = p[l.key], q = lo(l, p, C), V = l.options ? (l.options.find((E) => E.value === String(z ?? ""))?.label ?? String(z ?? "")) || " " : l.render ? l.render(z, p, C) : String(z ?? "") || " ";
1975
- return /* @__PURE__ */ s(
1976
- mn,
1977
- {
1978
- $size: a,
1979
- $borderColor: c,
1980
- $editable: q && !S,
1981
- onClick: q && !S ? () => {
1982
- l.options ? (_o(
1983
- () => j(C, l.key, z)
1984
- ), v.current?.showPicker()) : j(C, l.key, z);
1985
- } : void 0,
1986
- children: S && l.options ? /* @__PURE__ */ s(
1987
- Cn,
1988
- {
1989
- ref: v,
1990
- $size: a,
1991
- value: O,
1992
- onChange: (E) => D(E.target.value),
1993
- onBlur: M,
1994
- onKeyDown: Y,
1995
- "aria-label": `Edit ${l.header}`,
1996
- children: l.options.map((E) => /* @__PURE__ */ s("option", { value: E.value, children: E.label }, E.value))
1997
- }
1998
- ) : S ? /* @__PURE__ */ s(
1999
- Sn,
2000
- {
2001
- ref: h,
2002
- $size: a,
2003
- value: O,
2004
- onChange: (E) => D(E.target.value),
2005
- onBlur: M,
2006
- onKeyDown: Y,
2007
- "aria-label": `Edit ${l.header}`
2008
- }
2009
- ) : V
2010
- },
2011
- l.key
2012
- );
2013
- }),
2014
- $ && /* @__PURE__ */ s(Tn, { $size: a, $borderColor: c, children: /* @__PURE__ */ s(
2015
- In,
2498
+ type: "button",
2499
+ onClick: I,
2500
+ "aria-label": "Clear date",
2501
+ children: /* @__PURE__ */ s(co, { size: 14 })
2502
+ }
2503
+ ) : /* @__PURE__ */ s(Zn, { "aria-hidden": "true", children: /* @__PURE__ */ s($r, { size: 14 }) })
2504
+ ]
2505
+ }
2506
+ ),
2507
+ typeof b == "string" && /* @__PURE__ */ s(ot, { $error: !0, children: b }),
2508
+ x && /* @__PURE__ */ k(rt, { role: "dialog", "aria-label": "Calendar", children: [
2509
+ /* @__PURE__ */ k(nt, { children: [
2510
+ /* @__PURE__ */ s(
2511
+ ho,
2512
+ {
2513
+ type: "button",
2514
+ onClick: W,
2515
+ "aria-label": "Previous month",
2516
+ children: /* @__PURE__ */ s(xr, { size: 16 })
2517
+ }
2518
+ ),
2519
+ /* @__PURE__ */ k(tt, { children: [
2520
+ it[f],
2521
+ " ",
2522
+ C
2523
+ ] }),
2524
+ /* @__PURE__ */ s(
2525
+ ho,
2526
+ {
2527
+ type: "button",
2528
+ onClick: O,
2529
+ "aria-label": "Next month",
2530
+ children: /* @__PURE__ */ s(hr, { size: 16 })
2531
+ }
2532
+ )
2533
+ ] }),
2534
+ /* @__PURE__ */ k(st, { children: [
2535
+ at.map((u) => /* @__PURE__ */ s(et, { children: u }, u)),
2536
+ N.map((u, B) => {
2537
+ if (!u.currentMonth)
2538
+ return /* @__PURE__ */ s(
2539
+ wo,
2016
2540
  {
2017
2541
  type: "button",
2018
- onClick: () => to(C),
2019
- "aria-label": "Delete row",
2020
- children: "✕"
2021
- }
2022
- ) })
2023
- ] }, U(p, C))),
2024
- /* @__PURE__ */ s(En, { children: /* @__PURE__ */ s("td", { colSpan: so, children: /* @__PURE__ */ T(Wn, { type: "button", onClick: no, children: [
2025
- "+ ",
2026
- g
2027
- ] }) }) })
2028
- ] })
2542
+ $currentMonth: !1,
2543
+ $selected: !1,
2544
+ $today: !1,
2545
+ disabled: !0,
2546
+ tabIndex: -1,
2547
+ children: u.day
2548
+ },
2549
+ B
2550
+ );
2551
+ const R = new Date(C, f, u.day), Y = o ? vo(R, o) : !1, Z = vo(R, $), Q = ct(R, c, d);
2552
+ return /* @__PURE__ */ s(
2553
+ wo,
2554
+ {
2555
+ type: "button",
2556
+ $currentMonth: !0,
2557
+ $selected: Y,
2558
+ $today: Z,
2559
+ disabled: Q,
2560
+ "aria-label": ut(R),
2561
+ "aria-pressed": Y,
2562
+ onClick: () => w(u.day),
2563
+ children: u.day
2564
+ },
2565
+ B
2566
+ );
2567
+ })
2029
2568
  ] })
2030
- }
2031
- );
2569
+ ] })
2570
+ ] });
2032
2571
  }
2033
- Pn.displayName = "DataTable";
2034
- const ko = {
2035
- primary: {
2036
- 50: "#f0f8ff",
2037
- 500: "#0070f3",
2038
- 700: "#005bb5"
2039
- },
2040
- neutral: {
2041
- 0: "#ffffff",
2042
- 100: "#f5f5f5",
2043
- 200: "#eaeaea",
2044
- 300: "#cacaca",
2045
- 400: "#cccccc",
2046
- 500: "#666666",
2047
- 600: "#333333",
2048
- 900: "#111111"
2049
- },
2050
- error: {
2051
- 50: "#fef2f2",
2052
- 500: "#d32f2f"
2053
- },
2054
- success: {
2055
- 50: "#f0fdf4",
2056
- 500: "#16a34a"
2057
- },
2058
- warning: {
2059
- 50: "#fffbeb",
2060
- 500: "#d97706"
2061
- },
2062
- info: {
2063
- 50: "#eff6ff",
2064
- 500: "#2563eb"
2065
- }
2066
- }, Bn = {
2067
- 1: "4px",
2068
- 2: "8px",
2069
- 3: "12px",
2070
- 4: "16px",
2071
- 5: "20px",
2072
- 6: "24px"
2073
- }, On = {
2074
- md: "6px"
2075
- }, Dn = {
2076
- modal: 1e3,
2077
- toast: 1100
2078
- }, Nn = {
2079
- xs: "12px",
2080
- sm: "14px",
2081
- md: "16px",
2082
- lg: "18px"
2083
- }, Hn = {
2084
- colors: { ...ko, primary: { ...ko.primary, contrast: "#ffffff" } },
2085
- spacing: Bn,
2086
- fontSizes: Nn,
2087
- radius: On,
2088
- zIndex: Dn,
2089
- shadows: {
2090
- focusRing: "0 0 0 2px rgba(0, 112, 243, 0.25)"
2091
- }
2092
- };
2093
- function Ln(o) {
2094
- const r = parseInt(o.slice(1, 3), 16) / 255, n = parseInt(o.slice(3, 5), 16) / 255, i = parseInt(o.slice(5, 7), 16) / 255, d = (c) => c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
2095
- return 0.2126 * d(r) + 0.7152 * d(n) + 0.0722 * d(i) > 0.179 ? "#111111" : "#ffffff";
2572
+ pt.displayName = "DatePicker";
2573
+ function ft(o) {
2574
+ const r = parseInt(o.slice(1, 3), 16) / 255, n = parseInt(o.slice(3, 5), 16) / 255, e = parseInt(o.slice(5, 7), 16) / 255, l = (c) => c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
2575
+ return 0.2126 * l(r) + 0.7152 * l(n) + 0.0722 * l(e) > 0.179 ? "#111111" : "#ffffff";
2096
2576
  }
2097
- const uo = {
2577
+ const eo = {
2098
2578
  colors: {
2099
2579
  primary: {
2100
2580
  50: "#fffde6",
@@ -2124,45 +2604,70 @@ const uo = {
2124
2604
  shadows: { focusRing: "3px 3px 0 #111111" },
2125
2605
  brutalism: { borderWidth: "2px", shadowOffset: "4px" }
2126
2606
  };
2127
- function Yn(o) {
2607
+ function Ct(o) {
2128
2608
  return {
2129
- ...uo,
2609
+ ...eo,
2130
2610
  colors: {
2131
- ...uo.colors,
2611
+ ...eo.colors,
2132
2612
  primary: {
2133
2613
  50: "#fffff0",
2134
2614
  500: o,
2135
2615
  700: o,
2136
- contrast: Ln(o)
2616
+ contrast: ft(o)
2137
2617
  }
2138
2618
  }
2139
2619
  };
2140
2620
  }
2141
- function Un({
2142
- theme: o = uo,
2621
+ function St({
2622
+ theme: o = eo,
2143
2623
  children: r
2144
2624
  }) {
2145
- return /* @__PURE__ */ s(jo, { theme: o, children: r });
2625
+ return /* @__PURE__ */ s(Fo, { theme: o, children: r });
2146
2626
  }
2627
+ const zt = Bo`
2628
+ *, *::before, *::after {
2629
+ box-sizing: border-box;
2630
+ margin: 0;
2631
+ padding: 0;
2632
+ }
2633
+
2634
+ html, body {
2635
+ font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
2636
+ font-size: ${({ theme: o }) => o.fontSizes.md};
2637
+ color: ${({ theme: o }) => o.colors.neutral[900]};
2638
+ background-color: ${({ theme: o }) => o.colors.neutral[0]};
2639
+ }
2640
+
2641
+ button, input, select, textarea {
2642
+ font-family: inherit;
2643
+ }
2644
+ `;
2147
2645
  export {
2148
- Vo as Badge,
2149
- Fo as Button,
2150
- en as CollapsibleCard,
2151
- Pn as DataTable,
2152
- Ar as Form,
2153
- Rr as FormField,
2154
- Zo as Input,
2155
- Ur as Link,
2156
- dr as Modal,
2157
- Hr as Select,
2158
- vn as Table,
2159
- Un as ThemeProvider,
2160
- Wo as Toast,
2161
- Mn as ToastProvider,
2162
- Yn as createNeoBrutalTheme,
2163
- Hn as defaultTheme,
2164
- uo as neoBrutalTheme,
2165
- Kn as useForm,
2166
- Fn as useTable,
2167
- Vn as useToast
2646
+ _o as Badge,
2647
+ so as Button,
2648
+ wn as CollapsibleCard,
2649
+ Po as ConfirmDialog,
2650
+ vt as ConfirmProvider,
2651
+ pt as DatePicker,
2652
+ Mr as Editable,
2653
+ Er as Field,
2654
+ an as Form,
2655
+ ln as FormField,
2656
+ zt as GlobalStyles,
2657
+ qo as Input,
2658
+ To as Link,
2659
+ Io as Modal,
2660
+ Tr as Select,
2661
+ Sn as Spinner,
2662
+ Un as Table,
2663
+ or as Textarea,
2664
+ St as ThemeProvider,
2665
+ Do as Toast,
2666
+ yt as ToastProvider,
2667
+ Ct as createNeoBrutalTheme,
2668
+ eo as neoBrutalTheme,
2669
+ kt as useConfirm,
2670
+ wt as useForm,
2671
+ mt as useTable,
2672
+ ht as useToast
2168
2673
  };