blunt-ui 0.2.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,13 +1,13 @@
1
- import { jsx as d, jsxs as S } from "react/jsx-runtime";
2
- import l, { css as s, keyframes as L, ThemeProvider as so } from "styled-components";
3
- import D, { useId as E, useState as C, useRef as M, useEffect as j, useContext as U, createContext as Z, forwardRef as X, createElement as R, useCallback as W, useMemo as to } from "react";
4
- import { createPortal as G } from "react-dom";
5
- const F = (o, r, n) => s`
1
+ import { jsx as l, jsxs as h } from "react/jsx-runtime";
2
+ import i, { css as s, keyframes as O, ThemeProvider as eo } from "styled-components";
3
+ import H, { useId as F, useState as z, useRef as R, useEffect as j, useContext as Z, createContext as X, forwardRef as G, createElement as P, useCallback as B, useMemo as ao } from "react";
4
+ import { createPortal as J } from "react-dom";
5
+ const L = (o, r, n) => s`
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
- `, eo = l.span`
10
+ `, lo = i.span`
11
11
  display: inline-flex;
12
12
  align-items: center;
13
13
  font-weight: 700;
@@ -27,32 +27,32 @@ const F = (o, r, n) => s`
27
27
  })[o]}
28
28
 
29
29
  ${({ $variant: o, theme: r }) => r.brutalism ? {
30
- primary: F(
30
+ primary: L(
31
31
  r,
32
32
  r.colors.primary[500],
33
33
  r.colors.primary.contrast
34
34
  ),
35
- neutral: F(
35
+ neutral: L(
36
36
  r,
37
37
  r.colors.neutral[200],
38
38
  r.colors.neutral[900]
39
39
  ),
40
- success: F(
40
+ success: L(
41
41
  r,
42
42
  r.colors.success[50],
43
43
  r.colors.success[500]
44
44
  ),
45
- error: F(
45
+ error: L(
46
46
  r,
47
47
  r.colors.error[50],
48
48
  r.colors.error[500]
49
49
  ),
50
- warning: F(
50
+ warning: L(
51
51
  r,
52
52
  r.colors.warning[50],
53
53
  r.colors.warning[500]
54
54
  ),
55
- info: F(r, r.colors.info[50], r.colors.info[500])
55
+ info: L(r, r.colors.info[50], r.colors.info[500])
56
56
  }[o] : {
57
57
  primary: s`
58
58
  background: ${r.colors.primary[50]};
@@ -80,16 +80,16 @@ const F = (o, r, n) => s`
80
80
  `
81
81
  }[o]}
82
82
  `;
83
- function io({
83
+ function co({
84
84
  variant: o = "primary",
85
85
  size: r = "md",
86
86
  children: n,
87
87
  ...t
88
88
  }) {
89
- return /* @__PURE__ */ d(eo, { $variant: o, $size: r, ...t, children: n });
89
+ return /* @__PURE__ */ l(lo, { $variant: o, $size: r, ...t, children: n });
90
90
  }
91
- io.displayName = "Badge";
92
- const N = (o, r, n) => s`
91
+ co.displayName = "Badge";
92
+ const A = (o, r, n) => s`
93
93
  background-color: ${r};
94
94
  color: ${n};
95
95
  border: ${o.brutalism.borderWidth} solid ${o.colors.neutral[900]};
@@ -102,7 +102,7 @@ const N = (o, r, n) => s`
102
102
  transform: translate(2px, 2px);
103
103
  box-shadow: 2px 2px 0 ${o.colors.neutral[900]};
104
104
  }
105
- `, ao = l.button`
105
+ `, uo = i.button`
106
106
  display: inline-flex;
107
107
  align-items: center;
108
108
  justify-content: center;
@@ -122,17 +122,17 @@ const N = (o, r, n) => s`
122
122
  }
123
123
 
124
124
  ${({ $variant: o, theme: r }) => r.brutalism ? {
125
- primary: N(
125
+ primary: A(
126
126
  r,
127
127
  r.colors.primary[500],
128
128
  r.colors.primary.contrast
129
129
  ),
130
- secondary: N(
130
+ secondary: A(
131
131
  r,
132
132
  r.colors.neutral[100],
133
133
  r.colors.neutral[900]
134
134
  ),
135
- outline: N(
135
+ outline: A(
136
136
  r,
137
137
  r.colors.neutral[0],
138
138
  r.colors.neutral[900]
@@ -179,44 +179,44 @@ const N = (o, r, n) => s`
179
179
  `
180
180
  })[o]}
181
181
  `;
182
- function lo({
182
+ function fo({
183
183
  ref: o,
184
184
  as: r,
185
185
  href: n,
186
186
  variant: t = "primary",
187
- size: a = "md",
188
- isLoading: i,
187
+ size: c = "md",
188
+ isLoading: a,
189
189
  disabled: e,
190
- children: c,
191
- ...g
190
+ children: d,
191
+ ...p
192
192
  }) {
193
- return /* @__PURE__ */ d(
194
- ao,
193
+ return /* @__PURE__ */ l(
194
+ uo,
195
195
  {
196
196
  ref: o,
197
197
  as: r ?? (n ? "a" : "button"),
198
198
  href: n,
199
199
  $variant: t,
200
- $size: a,
201
- disabled: i || e,
202
- ...g,
203
- children: i ? "Loading..." : c
200
+ $size: c,
201
+ disabled: a || e,
202
+ ...p,
203
+ children: a ? "Loading..." : d
204
204
  }
205
205
  );
206
206
  }
207
- lo.displayName = "Button";
208
- const co = l.div`
207
+ fo.displayName = "Button";
208
+ const po = i.div`
209
209
  display: flex;
210
210
  flex-direction: column;
211
211
  gap: ${({ theme: o }) => o.spacing[1]};
212
212
  width: ${({ $fullWidth: o }) => o ? "100%" : "auto"};
213
- `, uo = l.label`
213
+ `, go = i.label`
214
214
  font-size: ${({ theme: o }) => o.fontSizes.sm};
215
215
  font-weight: ${({ theme: o }) => o.brutalism ? "700" : "500"};
216
- `, fo = l.span`
216
+ `, $o = i.span`
217
217
  font-size: ${({ theme: o }) => o.fontSizes.xs};
218
218
  color: ${({ $error: o, theme: r }) => o ? r.colors.error[500] : r.colors.neutral[500]};
219
- `, po = l.div`
219
+ `, bo = i.div`
220
220
  display: flex;
221
221
  align-items: center;
222
222
  border-radius: ${({ theme: o }) => o.radius.md};
@@ -269,7 +269,7 @@ const co = l.div`
269
269
  &:focus-within {
270
270
  box-shadow: ${({ theme: o }) => o.shadows.focusRing};
271
271
  }
272
- `, go = l.input`
272
+ `, xo = i.input`
273
273
  flex: 1;
274
274
  border: none;
275
275
  outline: none;
@@ -280,11 +280,11 @@ const co = l.div`
280
280
  cursor: not-allowed;
281
281
  opacity: 0.6;
282
282
  }
283
- `, _ = l.div`
283
+ `, _ = i.div`
284
284
  display: inline-flex;
285
285
  align-items: center;
286
286
  margin: 0 ${({ theme: o }) => o.spacing[1]};
287
- `, $o = l.button`
287
+ `, yo = i.button`
288
288
  display: inline-flex;
289
289
  align-items: center;
290
290
  margin: 0 ${({ theme: o }) => o.spacing[1]};
@@ -298,75 +298,75 @@ const co = l.div`
298
298
  opacity: 0.8;
299
299
  }
300
300
  `;
301
- function bo({
301
+ function vo({
302
302
  ref: o,
303
303
  type: r = "text",
304
304
  size: n = "md",
305
305
  variant: t = "default",
306
- label: a,
307
- helperText: i,
306
+ label: c,
307
+ helperText: a,
308
308
  error: e,
309
- leftElement: c,
310
- rightElement: g,
311
- clearable: f,
312
- onClear: x,
313
- fullWidth: k,
314
- id: v,
315
- value: b,
316
- defaultValue: h,
317
- onChange: z,
318
- ...w
309
+ leftElement: d,
310
+ rightElement: p,
311
+ clearable: u,
312
+ onClear: b,
313
+ fullWidth: m,
314
+ id: $,
315
+ value: x,
316
+ defaultValue: v,
317
+ onChange: S,
318
+ ...C
319
319
  }) {
320
- const m = E(), I = v ?? m, T = `${I}-hint`, [B, u] = C(h ?? ""), p = b !== void 0, $ = p ? b : B, y = typeof e == "string" ? e : void 0, O = !!(i || e), V = (Y) => {
321
- p || u(Y.target.value), z?.(Y);
322
- }, no = () => {
323
- p || u(""), x?.();
320
+ const k = F(), I = $ ?? k, T = `${I}-hint`, [W, f] = z(v ?? ""), g = x !== void 0, y = g ? x : W, w = typeof e == "string" ? e : void 0, E = !!(a || e), V = (D) => {
321
+ g || f(D.target.value), S?.(D);
322
+ }, io = () => {
323
+ g || f(""), b?.();
324
324
  };
325
- return /* @__PURE__ */ S(co, { $fullWidth: k, children: [
326
- a && /* @__PURE__ */ d(uo, { htmlFor: I, children: a }),
327
- /* @__PURE__ */ S(po, { $size: n, $variant: t, $error: !!e, children: [
328
- c && /* @__PURE__ */ d(_, { children: c }),
329
- /* @__PURE__ */ d(
330
- go,
325
+ return /* @__PURE__ */ h(po, { $fullWidth: m, children: [
326
+ c && /* @__PURE__ */ l(go, { htmlFor: I, children: c }),
327
+ /* @__PURE__ */ h(bo, { $size: n, $variant: t, $error: !!e, children: [
328
+ d && /* @__PURE__ */ l(_, { children: d }),
329
+ /* @__PURE__ */ l(
330
+ xo,
331
331
  {
332
332
  id: I,
333
333
  ref: o,
334
334
  type: r,
335
- value: $,
335
+ value: y,
336
336
  onChange: V,
337
- ...w,
337
+ ...C,
338
338
  "aria-invalid": !!e,
339
- "aria-describedby": O ? T : void 0
339
+ "aria-describedby": E ? T : void 0
340
340
  }
341
341
  ),
342
- f && $ && /* @__PURE__ */ d(
343
- $o,
342
+ u && y && /* @__PURE__ */ l(
343
+ yo,
344
344
  {
345
345
  type: "button",
346
- onClick: no,
346
+ onClick: io,
347
347
  "aria-label": "Clear input",
348
348
  children: "✕"
349
349
  }
350
350
  ),
351
- g && /* @__PURE__ */ d(_, { children: g })
351
+ p && /* @__PURE__ */ l(_, { children: p })
352
352
  ] }),
353
- O && /* @__PURE__ */ d(fo, { id: T, $error: !!e, children: y ?? i })
353
+ E && /* @__PURE__ */ l($o, { id: T, $error: !!e, children: w ?? a })
354
354
  ] });
355
355
  }
356
- bo.displayName = "Input";
357
- const xo = L`
356
+ vo.displayName = "Input";
357
+ const wo = O`
358
358
  from { opacity: 0; }
359
359
  to { opacity: 1; }
360
- `, yo = L`
360
+ `, mo = O`
361
361
  from { opacity: 1; }
362
362
  to { opacity: 0; }
363
- `, mo = L`
363
+ `, ko = O`
364
364
  from { opacity: 0; transform: scale(0.95) translateY(-8px); }
365
365
  to { opacity: 1; transform: scale(1) translateY(0); }
366
- `, vo = L`
366
+ `, ho = O`
367
367
  from { opacity: 1; transform: scale(1) translateY(0); }
368
368
  to { opacity: 0; transform: scale(0.95) translateY(-8px); }
369
- `, wo = l.div`
369
+ `, Co = i.div`
370
370
  position: fixed;
371
371
  inset: 0;
372
372
  background-color: rgba(0, 0, 0, 0.5);
@@ -374,9 +374,9 @@ const xo = L`
374
374
  align-items: center;
375
375
  justify-content: center;
376
376
  z-index: ${({ theme: o }) => o.zIndex.modal};
377
- animation: ${({ $closing: o }) => o ? yo : xo} 0.15s ease
377
+ animation: ${({ $closing: o }) => o ? mo : wo} 0.15s ease
378
378
  forwards;
379
- `, ko = l.div`
379
+ `, zo = i.div`
380
380
  position: relative;
381
381
  background: ${({ theme: o }) => o.colors.neutral[0]};
382
382
  border-radius: ${({ theme: o }) => o.radius.md};
@@ -385,7 +385,7 @@ const xo = L`
385
385
  display: flex;
386
386
  flex-direction: column;
387
387
  max-height: 90vh;
388
- animation: ${({ $closing: o }) => o ? vo : mo} 0.15s ease
388
+ animation: ${({ $closing: o }) => o ? ho : ko} 0.15s ease
389
389
  forwards;
390
390
 
391
391
  ${({ $size: o }) => o === "sm" && s`
@@ -403,19 +403,19 @@ const xo = L`
403
403
  max-height: 100vh;
404
404
  border-radius: 0;
405
405
  `}
406
- `, ho = l.div`
406
+ `, So = i.div`
407
407
  display: flex;
408
408
  align-items: center;
409
409
  gap: ${({ theme: o }) => o.spacing[2]};
410
410
  padding: ${({ theme: o }) => o.spacing[4]};
411
411
  border-bottom: 1px solid ${({ theme: o }) => o.colors.neutral[200]};
412
412
  flex-shrink: 0;
413
- `, zo = l.h2`
413
+ `, Io = i.h2`
414
414
  flex: 1;
415
415
  font-size: ${({ theme: o }) => o.fontSizes.lg};
416
416
  font-weight: 600;
417
417
  margin: 0;
418
- `, Co = l.button`
418
+ `, To = i.button`
419
419
  display: inline-flex;
420
420
  align-items: center;
421
421
  justify-content: center;
@@ -440,11 +440,11 @@ const xo = L`
440
440
  outline: 2px solid ${({ theme: o }) => o.colors.primary[500]};
441
441
  outline-offset: 2px;
442
442
  }
443
- `, So = l.div`
443
+ `, Wo = i.div`
444
444
  padding: ${({ theme: o }) => o.spacing[4]};
445
445
  overflow-y: auto;
446
446
  flex: 1;
447
- `, Io = l.div`
447
+ `, Bo = i.div`
448
448
  display: flex;
449
449
  align-items: center;
450
450
  justify-content: flex-end;
@@ -452,7 +452,7 @@ const xo = L`
452
452
  padding: ${({ theme: o }) => o.spacing[4]};
453
453
  border-top: 1px solid ${({ theme: o }) => o.colors.neutral[200]};
454
454
  flex-shrink: 0;
455
- `, To = [
455
+ `, Oo = [
456
456
  "button:not([disabled])",
457
457
  "input:not([disabled])",
458
458
  "select:not([disabled])",
@@ -460,89 +460,89 @@ const xo = L`
460
460
  "a[href]",
461
461
  '[tabindex]:not([tabindex="-1"])'
462
462
  ].join(", ");
463
- function H(o) {
463
+ function q(o) {
464
464
  return Array.from(
465
- o.querySelectorAll(To)
465
+ o.querySelectorAll(Oo)
466
466
  );
467
467
  }
468
- function Bo({
468
+ function Lo({
469
469
  open: o,
470
470
  onClose: r,
471
471
  title: n,
472
472
  children: t,
473
- footer: a,
474
- size: i = "md",
473
+ footer: c,
474
+ size: a = "md",
475
475
  closeOnBackdrop: e = !0,
476
- closeOnEscape: c = !0,
477
- ariaLabelledBy: g,
478
- ariaDescribedBy: f
476
+ closeOnEscape: d = !0,
477
+ ariaLabelledBy: p,
478
+ ariaDescribedBy: u
479
479
  }) {
480
- const x = M(null), k = E(), v = g ?? (n ? k : void 0), [b, h] = C(o), [z, w] = C(!1);
480
+ const b = R(null), m = F(), $ = p ?? (n ? m : void 0), [x, v] = z(o), [S, C] = z(!1);
481
481
  return j(() => {
482
482
  if (o)
483
- h(!0), w(!1);
484
- else if (b) {
485
- w(!0);
486
- const m = setTimeout(() => {
487
- h(!1), w(!1);
483
+ v(!0), C(!1);
484
+ else if (x) {
485
+ C(!0);
486
+ const k = setTimeout(() => {
487
+ v(!1), C(!1);
488
488
  }, 150);
489
- return () => clearTimeout(m);
489
+ return () => clearTimeout(k);
490
490
  }
491
- }, [o, b]), j(() => {
491
+ }, [o, x]), j(() => {
492
492
  if (!o)
493
493
  return;
494
- const m = document.body.style.overflow;
494
+ const k = document.body.style.overflow;
495
495
  return document.body.style.overflow = "hidden", () => {
496
- document.body.style.overflow = m;
496
+ document.body.style.overflow = k;
497
497
  };
498
498
  }, [o]), j(() => {
499
- if (!o || !x.current)
499
+ if (!o || !b.current)
500
500
  return;
501
- const m = x.current, I = document.activeElement;
502
- (H(m)[0] ?? m).focus();
503
- const B = (u) => {
504
- if (u.key === "Escape" && c) {
501
+ const k = b.current, I = document.activeElement;
502
+ (q(k)[0] ?? k).focus();
503
+ const W = (f) => {
504
+ if (f.key === "Escape" && d) {
505
505
  r();
506
506
  return;
507
507
  }
508
- if (u.key !== "Tab")
508
+ if (f.key !== "Tab")
509
509
  return;
510
- const p = H(m);
511
- if (p.length === 0) {
512
- u.preventDefault();
510
+ const g = q(k);
511
+ if (g.length === 0) {
512
+ f.preventDefault();
513
513
  return;
514
514
  }
515
- const $ = p[0], y = p[p.length - 1];
516
- u.shiftKey ? document.activeElement === $ && (u.preventDefault(), y.focus()) : document.activeElement === y && (u.preventDefault(), $.focus());
515
+ const y = g[0], w = g[g.length - 1];
516
+ f.shiftKey ? document.activeElement === y && (f.preventDefault(), w.focus()) : document.activeElement === w && (f.preventDefault(), y.focus());
517
517
  };
518
- return document.addEventListener("keydown", B), () => {
519
- document.removeEventListener("keydown", B), I?.focus();
518
+ return document.addEventListener("keydown", W), () => {
519
+ document.removeEventListener("keydown", W), I?.focus();
520
520
  };
521
- }, [o, c, r, b]), b ? G(
522
- /* @__PURE__ */ d(
523
- wo,
521
+ }, [o, d, r, x]), x ? J(
522
+ /* @__PURE__ */ l(
523
+ Co,
524
524
  {
525
- $closing: z,
525
+ $closing: S,
526
526
  onClick: e ? r : void 0,
527
- children: /* @__PURE__ */ S(
528
- ko,
527
+ children: /* @__PURE__ */ h(
528
+ zo,
529
529
  {
530
- ref: x,
530
+ ref: b,
531
531
  role: "dialog",
532
532
  "aria-modal": "true",
533
- "aria-labelledby": v,
534
- "aria-describedby": f,
535
- $size: i,
536
- $closing: z,
533
+ "aria-labelledby": $,
534
+ "aria-describedby": u,
535
+ $size: a,
536
+ $closing: S,
537
537
  tabIndex: -1,
538
- onClick: (m) => m.stopPropagation(),
538
+ onClick: (k) => k.stopPropagation(),
539
539
  children: [
540
- /* @__PURE__ */ S(ho, { children: [
541
- n && /* @__PURE__ */ d(zo, { id: k, children: n }),
542
- /* @__PURE__ */ d(Co, { onClick: r, "aria-label": "Close modal", children: "×" })
540
+ /* @__PURE__ */ h(So, { children: [
541
+ n && /* @__PURE__ */ l(Io, { id: m, children: n }),
542
+ /* @__PURE__ */ l(To, { onClick: r, "aria-label": "Close modal", children: "×" })
543
543
  ] }),
544
- /* @__PURE__ */ d(So, { children: t }),
545
- a && /* @__PURE__ */ d(Io, { children: a })
544
+ /* @__PURE__ */ l(Wo, { children: t }),
545
+ c && /* @__PURE__ */ l(Bo, { children: c })
546
546
  ]
547
547
  }
548
548
  )
@@ -551,17 +551,91 @@ function Bo({
551
551
  document.body
552
552
  ) : null;
553
553
  }
554
- Bo.displayName = "Modal";
555
- const Wo = L`
554
+ Lo.displayName = "Modal";
555
+ const Q = (...o) => o.filter((r, n, t) => !!r && r.trim() !== "" && t.indexOf(r) === n).join(" ").trim();
556
+ const jo = (o) => o.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
557
+ const Fo = (o) => o.replace(
558
+ /^([A-Z])|[\s-_]+(\w)/g,
559
+ (r, n, t) => t ? t.toUpperCase() : n.toLowerCase()
560
+ );
561
+ const K = (o) => {
562
+ const r = Fo(o);
563
+ return r.charAt(0).toUpperCase() + r.slice(1);
564
+ };
565
+ var M = {
566
+ xmlns: "http://www.w3.org/2000/svg",
567
+ width: 24,
568
+ height: 24,
569
+ viewBox: "0 0 24 24",
570
+ fill: "none",
571
+ stroke: "currentColor",
572
+ strokeWidth: 2,
573
+ strokeLinecap: "round",
574
+ strokeLinejoin: "round"
575
+ };
576
+ const Eo = (o) => {
577
+ for (const r in o)
578
+ if (r.startsWith("aria-") || r === "role" || r === "title")
579
+ return !0;
580
+ return !1;
581
+ }, No = X({}), Vo = () => Z(No), Ao = G(
582
+ ({ color: o, size: r, strokeWidth: n, absoluteStrokeWidth: t, className: c = "", children: a, iconNode: e, ...d }, p) => {
583
+ const {
584
+ size: u = 24,
585
+ strokeWidth: b = 2,
586
+ absoluteStrokeWidth: m = !1,
587
+ color: $ = "currentColor",
588
+ className: x = ""
589
+ } = Vo() ?? {}, v = t ?? m ? Number(n ?? b) * 24 / Number(r ?? u) : n ?? b;
590
+ return P(
591
+ "svg",
592
+ {
593
+ ref: p,
594
+ ...M,
595
+ width: r ?? u ?? M.width,
596
+ height: r ?? u ?? M.height,
597
+ stroke: o ?? $,
598
+ strokeWidth: v,
599
+ className: Q("lucide", x, c),
600
+ ...!a && !Eo(d) && { "aria-hidden": "true" },
601
+ ...d
602
+ },
603
+ [
604
+ ...e.map(([S, C]) => P(S, C)),
605
+ ...Array.isArray(a) ? a : [a]
606
+ ]
607
+ );
608
+ }
609
+ );
610
+ const oo = (o, r) => {
611
+ const n = G(
612
+ ({ className: t, ...c }, a) => P(Ao, {
613
+ ref: a,
614
+ iconNode: r,
615
+ className: Q(
616
+ `lucide-${jo(K(o))}`,
617
+ `lucide-${o}`,
618
+ t
619
+ ),
620
+ ...c
621
+ })
622
+ );
623
+ return n.displayName = K(o), n;
624
+ };
625
+ const Mo = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], ro = oo("chevron-down", Mo);
626
+ const Ro = [
627
+ ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
628
+ ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
629
+ ], no = oo("x", Ro), Po = O`
556
630
  from { opacity: 0; transform: translateY(12px); }
557
631
  to { opacity: 1; transform: translateY(0); }
558
- `, Lo = L`
632
+ `, Yo = O`
559
633
  from { opacity: 0; transform: translateY(-12px); }
560
634
  to { opacity: 1; transform: translateY(0); }
561
- `, Fo = L`
635
+ `, Do = O`
562
636
  from { opacity: 1; }
563
637
  to { opacity: 0; }
564
- `, jo = l.div`
638
+ `, Ho = i.div`
565
639
  position: fixed;
566
640
  z-index: ${({ theme: o }) => o.zIndex.toast};
567
641
  display: flex;
@@ -571,14 +645,12 @@ const Wo = L`
571
645
  max-width: 400px;
572
646
  padding: ${({ theme: o }) => `${o.spacing[3]} ${o.spacing[4]}`};
573
647
  border-radius: ${({ theme: o }) => o.radius.md};
574
- border-left: 4px solid transparent;
575
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
576
648
  animation: ${({ $closing: o, $position: r }) => o ? s`
577
- ${Fo} 0.2s ease forwards
649
+ ${Do} 0.2s ease forwards
578
650
  ` : r.startsWith("top") ? s`
579
- ${Lo} 0.2s ease forwards
651
+ ${Yo} 0.2s ease forwards
580
652
  ` : s`
581
- ${Wo} 0.2s ease forwards
653
+ ${Po} 0.2s ease forwards
582
654
  `};
583
655
 
584
656
  ${({ $position: o, theme: r }) => ({
@@ -599,32 +671,59 @@ const Wo = L`
599
671
  left: ${r.spacing[6]};
600
672
  `
601
673
  })[o]}
602
- `, Oo = l(jo)`
603
- ${({ $variant: o, theme: r }) => ({
674
+ `, N = (o, r, n) => s`
675
+ background: ${r};
676
+ border: ${o.brutalism.borderWidth} solid ${n};
677
+ box-shadow: ${o.brutalism.shadowOffset} ${o.brutalism.shadowOffset}
678
+ 0 ${n};
679
+ `, _o = i(Ho)`
680
+ ${({ $variant: o, theme: r }) => r.brutalism ? {
681
+ success: N(
682
+ r,
683
+ r.colors.success[50],
684
+ r.colors.success[500]
685
+ ),
686
+ error: N(
687
+ r,
688
+ r.colors.error[50],
689
+ r.colors.error[500]
690
+ ),
691
+ warning: N(
692
+ r,
693
+ r.colors.warning[50],
694
+ r.colors.warning[500]
695
+ ),
696
+ info: N(r, r.colors.info[50], r.colors.info[500])
697
+ }[o] : {
604
698
  success: s`
605
699
  background: ${r.colors.success[50]};
606
- border-left-color: ${r.colors.success[500]};
700
+ border-left: 4px solid ${r.colors.success[500]};
701
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
607
702
  `,
608
703
  error: s`
609
704
  background: ${r.colors.error[50]};
610
- border-left-color: ${r.colors.error[500]};
705
+ border-left: 4px solid ${r.colors.error[500]};
706
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
611
707
  `,
612
708
  warning: s`
613
709
  background: ${r.colors.warning[50]};
614
- border-left-color: ${r.colors.warning[500]};
710
+ border-left: 4px solid ${r.colors.warning[500]};
711
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
615
712
  `,
616
713
  info: s`
617
714
  background: ${r.colors.info[50]};
618
- border-left-color: ${r.colors.info[500]};
715
+ border-left: 4px solid ${r.colors.info[500]};
716
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
619
717
  `
620
- })[o]}
621
- `, Eo = l.p`
718
+ }[o]}
719
+ `, qo = i.p`
622
720
  flex: 1;
623
721
  margin: 0;
624
722
  font-size: ${({ theme: o }) => o.fontSizes.sm};
723
+ font-weight: ${({ theme: o }) => o.brutalism ? 600 : 400};
625
724
  line-height: 1.5;
626
725
  color: ${({ theme: o }) => o.colors.neutral[900]};
627
- `, Vo = l.button`
726
+ `, Ko = i.button`
628
727
  flex-shrink: 0;
629
728
  display: inline-flex;
630
729
  align-items: center;
@@ -635,8 +734,6 @@ const Wo = L`
635
734
  background: none;
636
735
  cursor: pointer;
637
736
  border-radius: ${({ theme: o }) => o.radius.md};
638
- font-size: 18px;
639
- line-height: 1;
640
737
  color: ${({ theme: o }) => o.colors.neutral[500]};
641
738
 
642
739
  &:hover {
@@ -649,72 +746,72 @@ const Wo = L`
649
746
  outline-offset: 2px;
650
747
  }
651
748
  `;
652
- function J({
749
+ function so({
653
750
  open: o,
654
751
  onClose: r,
655
752
  message: n,
656
753
  variant: t = "info",
657
- duration: a = 4e3,
658
- position: i = "bottom-right"
754
+ duration: c = 4e3,
755
+ position: a = "bottom-right"
659
756
  }) {
660
- const [e, c] = C(o), [g, f] = C(!1);
757
+ const [e, d] = z(o), [p, u] = z(!1);
661
758
  return j(() => {
662
759
  if (o)
663
- c(!0), f(!1);
760
+ d(!0), u(!1);
664
761
  else if (e) {
665
- f(!0);
666
- const x = setTimeout(() => {
667
- c(!1), f(!1);
762
+ u(!0);
763
+ const b = setTimeout(() => {
764
+ d(!1), u(!1);
668
765
  }, 200);
669
- return () => clearTimeout(x);
766
+ return () => clearTimeout(b);
670
767
  }
671
768
  }, [o, e]), j(() => {
672
- if (!o || a === 0)
769
+ if (!o || c === 0)
673
770
  return;
674
- const x = setTimeout(r, a);
675
- return () => clearTimeout(x);
676
- }, [o, a, r]), e ? G(
677
- /* @__PURE__ */ S(
678
- Oo,
771
+ const b = setTimeout(r, c);
772
+ return () => clearTimeout(b);
773
+ }, [o, c, r]), e ? J(
774
+ /* @__PURE__ */ h(
775
+ _o,
679
776
  {
680
- $position: i,
777
+ $position: a,
681
778
  $variant: t,
682
- $closing: g,
779
+ $closing: p,
683
780
  role: "alert",
684
781
  "aria-live": "polite",
685
782
  children: [
686
- /* @__PURE__ */ d(Eo, { children: n }),
687
- /* @__PURE__ */ d(Vo, { onClick: r, "aria-label": "Close notification", children: "×" })
783
+ /* @__PURE__ */ l(qo, { children: n }),
784
+ /* @__PURE__ */ l(Ko, { onClick: r, "aria-label": "Close notification", children: /* @__PURE__ */ l(no, { size: 14, strokeWidth: 2.5 }) })
688
785
  ]
689
786
  }
690
787
  ),
691
788
  document.body
692
789
  ) : null;
693
790
  }
694
- J.displayName = "Toast";
695
- const No = l.form`
791
+ so.displayName = "Toast";
792
+ const Uo = i.form`
696
793
  display: flex;
697
794
  flex-direction: column;
698
795
  gap: ${({ theme: o }) => o.spacing[4]};
699
- `, Ao = l.div`
796
+ `, Zo = i.div`
700
797
  display: flex;
701
798
  flex-direction: column;
702
799
  gap: ${({ theme: o }) => o.spacing[1]};
703
- `, Mo = l.label`
800
+ `, Xo = i.label`
704
801
  font-size: ${({ theme: o }) => o.fontSizes.sm};
705
802
  font-weight: 500;
706
803
  color: ${({ theme: o }) => o.colors.neutral[900]};
707
- `, Ro = l.span`
804
+ `, Go = i.span`
708
805
  color: ${({ theme: o }) => o.colors.error[500]};
709
806
  margin-left: 2px;
710
807
  aria-hidden: true;
711
- `, Po = l.span`
808
+ `, Jo = i.span`
712
809
  font-size: ${({ theme: o }) => o.fontSizes.xs};
713
810
  color: ${({ $error: o, theme: r }) => o ? r.colors.error[500] : r.colors.neutral[500]};
714
811
  `;
715
- function Yo({ onSubmit: o, children: r, ...n }) {
716
- return /* @__PURE__ */ d(
717
- No,
812
+ function Qo({ onSubmit: o, children: r, ...n }) {
813
+ return /* @__PURE__ */ l(
814
+ Uo,
718
815
  {
719
816
  onSubmit: (t) => {
720
817
  t.preventDefault(), o?.(t);
@@ -725,119 +822,45 @@ function Yo({ onSubmit: o, children: r, ...n }) {
725
822
  }
726
823
  );
727
824
  }
728
- Yo.displayName = "Form";
729
- function Do({
825
+ Qo.displayName = "Form";
826
+ function or({
730
827
  label: o,
731
828
  error: r,
732
829
  helperText: n,
733
830
  required: t,
734
- children: a
831
+ children: c
735
832
  }) {
736
- const i = E(), e = `${i}-hint`, c = !!(r || n), g = typeof r == "string" ? r : void 0, f = D.isValidElement(a) ? D.cloneElement(
737
- a,
833
+ const a = F(), e = `${a}-hint`, d = !!(r || n), p = typeof r == "string" ? r : void 0, u = H.isValidElement(c) ? H.cloneElement(
834
+ c,
738
835
  {
739
- id: i,
740
- ...c && { "aria-describedby": e },
836
+ id: a,
837
+ ...d && { "aria-describedby": e },
741
838
  ...r && { "aria-invalid": !0 }
742
839
  }
743
- ) : a;
744
- return /* @__PURE__ */ S(Ao, { children: [
745
- o && /* @__PURE__ */ S(Mo, { htmlFor: i, children: [
840
+ ) : c;
841
+ return /* @__PURE__ */ h(Zo, { children: [
842
+ o && /* @__PURE__ */ h(Xo, { htmlFor: a, children: [
746
843
  o,
747
- t && /* @__PURE__ */ d(Ro, { "aria-hidden": "true", children: " *" })
844
+ t && /* @__PURE__ */ l(Go, { "aria-hidden": "true", children: " *" })
748
845
  ] }),
749
- f,
750
- c && /* @__PURE__ */ d(Po, { id: e, $error: !!r, children: g ?? n })
846
+ u,
847
+ d && /* @__PURE__ */ l(Jo, { id: e, $error: !!r, children: p ?? n })
751
848
  ] });
752
849
  }
753
- Do.displayName = "FormField";
754
- const Q = (...o) => o.filter((r, n, t) => !!r && r.trim() !== "" && t.indexOf(r) === n).join(" ").trim();
755
- const _o = (o) => o.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
756
- const Ho = (o) => o.replace(
757
- /^([A-Z])|[\s-_]+(\w)/g,
758
- (r, n, t) => t ? t.toUpperCase() : n.toLowerCase()
759
- );
760
- const q = (o) => {
761
- const r = Ho(o);
762
- return r.charAt(0).toUpperCase() + r.slice(1);
763
- };
764
- var A = {
765
- xmlns: "http://www.w3.org/2000/svg",
766
- width: 24,
767
- height: 24,
768
- viewBox: "0 0 24 24",
769
- fill: "none",
770
- stroke: "currentColor",
771
- strokeWidth: 2,
772
- strokeLinecap: "round",
773
- strokeLinejoin: "round"
774
- };
775
- const qo = (o) => {
776
- for (const r in o)
777
- if (r.startsWith("aria-") || r === "role" || r === "title")
778
- return !0;
779
- return !1;
780
- }, Ko = Z({}), Uo = () => U(Ko), Zo = X(
781
- ({ color: o, size: r, strokeWidth: n, absoluteStrokeWidth: t, className: a = "", children: i, iconNode: e, ...c }, g) => {
782
- const {
783
- size: f = 24,
784
- strokeWidth: x = 2,
785
- absoluteStrokeWidth: k = !1,
786
- color: v = "currentColor",
787
- className: b = ""
788
- } = Uo() ?? {}, h = t ?? k ? Number(n ?? x) * 24 / Number(r ?? f) : n ?? x;
789
- return R(
790
- "svg",
791
- {
792
- ref: g,
793
- ...A,
794
- width: r ?? f ?? A.width,
795
- height: r ?? f ?? A.height,
796
- stroke: o ?? v,
797
- strokeWidth: h,
798
- className: Q("lucide", b, a),
799
- ...!i && !qo(c) && { "aria-hidden": "true" },
800
- ...c
801
- },
802
- [
803
- ...e.map(([z, w]) => R(z, w)),
804
- ...Array.isArray(i) ? i : [i]
805
- ]
806
- );
807
- }
808
- );
809
- const oo = (o, r) => {
810
- const n = X(
811
- ({ className: t, ...a }, i) => R(Zo, {
812
- ref: i,
813
- iconNode: r,
814
- className: Q(
815
- `lucide-${_o(q(o))}`,
816
- `lucide-${o}`,
817
- t
818
- ),
819
- ...a
820
- })
821
- );
822
- return n.displayName = q(o), n;
823
- };
824
- const Xo = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], Go = oo("chevron-down", Xo);
825
- const Jo = [
826
- ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
827
- ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
828
- ], Qo = oo("x", Jo), or = l.div`
850
+ or.displayName = "FormField";
851
+ const rr = i.div`
829
852
  display: inline-flex;
830
853
  flex-direction: column;
831
854
  gap: ${({ theme: o }) => o.spacing[1]};
832
855
  width: ${({ $fullWidth: o }) => o ? "100%" : "auto"};
833
- `, rr = l.div`
856
+ `, nr = i.div`
834
857
  position: relative;
835
858
  display: flex;
836
859
  width: 100%;
837
- `, nr = l.span`
860
+ `, sr = i.span`
838
861
  font-size: ${({ theme: o }) => o.fontSizes.xs};
839
862
  color: ${({ $error: o, theme: r }) => o ? r.colors.error[500] : r.colors.neutral[500]};
840
- `, sr = l.select`
863
+ `, tr = i.select`
841
864
  appearance: none;
842
865
  width: 100%;
843
866
  border-radius: ${({ theme: o }) => o.radius.md};
@@ -898,7 +921,7 @@ const Jo = [
898
921
  cursor: not-allowed;
899
922
  opacity: 0.6;
900
923
  }
901
- `, tr = l.button`
924
+ `, ir = i.button`
902
925
  position: absolute;
903
926
  right: ${({ theme: o }) => o.spacing[3]};
904
927
  top: 50%;
@@ -920,7 +943,7 @@ const Jo = [
920
943
  outline-offset: 2px;
921
944
  border-radius: 2px;
922
945
  }
923
- `, er = l.span`
946
+ `, er = i.span`
924
947
  position: absolute;
925
948
  right: ${({ theme: o }) => o.spacing[3]};
926
949
  top: 50%;
@@ -930,63 +953,63 @@ const Jo = [
930
953
  align-items: center;
931
954
  color: ${({ theme: o }) => o.colors.neutral[500]};
932
955
  `;
933
- function ir({
956
+ function ar({
934
957
  options: o,
935
958
  placeholder: r,
936
959
  size: n = "md",
937
960
  variant: t = "default",
938
- error: a,
939
- fullWidth: i,
961
+ error: c,
962
+ fullWidth: a,
940
963
  clearable: e,
941
- onClear: c,
942
- id: g,
943
- value: f,
944
- defaultValue: x,
945
- onChange: k,
946
- ...v
964
+ onClear: d,
965
+ id: p,
966
+ value: u,
967
+ defaultValue: b,
968
+ onChange: m,
969
+ ...$
947
970
  }) {
948
- const b = E(), h = g ?? b, z = `${h}-hint`, w = typeof a == "string" ? a : void 0, [m, I] = C(
949
- x ?? ""
950
- ), T = f !== void 0, B = T ? f : m, u = (y) => {
951
- T || I(y.target.value), k?.(y);
952
- }, p = () => {
953
- T || I(""), c?.();
954
- }, $ = e && !!B;
955
- return /* @__PURE__ */ S(or, { $fullWidth: i, children: [
956
- /* @__PURE__ */ S(rr, { children: [
957
- /* @__PURE__ */ S(
958
- sr,
971
+ const x = F(), v = p ?? x, S = `${v}-hint`, C = typeof c == "string" ? c : void 0, [k, I] = z(
972
+ b ?? ""
973
+ ), T = u !== void 0, W = T ? u : k, f = (w) => {
974
+ T || I(w.target.value), m?.(w);
975
+ }, g = () => {
976
+ T || I(""), d?.();
977
+ }, y = e && !!W;
978
+ return /* @__PURE__ */ h(rr, { $fullWidth: a, children: [
979
+ /* @__PURE__ */ h(nr, { children: [
980
+ /* @__PURE__ */ h(
981
+ tr,
959
982
  {
960
- id: h,
983
+ id: v,
961
984
  $size: n,
962
985
  $variant: t,
963
- $error: !!a,
964
- "aria-invalid": !!a,
965
- "aria-describedby": w ? z : void 0,
966
- value: B,
967
- onChange: u,
968
- ...v,
986
+ $error: !!c,
987
+ "aria-invalid": !!c,
988
+ "aria-describedby": C ? S : void 0,
989
+ value: W,
990
+ onChange: f,
991
+ ...$,
969
992
  children: [
970
- r && /* @__PURE__ */ d("option", { value: "", disabled: !0, children: r }),
971
- o.map((y) => /* @__PURE__ */ d("option", { value: y.value, disabled: y.disabled, children: y.label }, y.value))
993
+ r && /* @__PURE__ */ l("option", { value: "", disabled: !0, children: r }),
994
+ o.map((w) => /* @__PURE__ */ l("option", { value: w.value, disabled: w.disabled, children: w.label }, w.value))
972
995
  ]
973
996
  }
974
997
  ),
975
- $ ? /* @__PURE__ */ d(
976
- tr,
998
+ y ? /* @__PURE__ */ l(
999
+ ir,
977
1000
  {
978
1001
  type: "button",
979
- onClick: p,
1002
+ onClick: g,
980
1003
  "aria-label": "Clear selection",
981
- children: /* @__PURE__ */ d(Qo, { size: 14 })
1004
+ children: /* @__PURE__ */ l(no, { size: 14 })
982
1005
  }
983
- ) : /* @__PURE__ */ d(er, { "aria-hidden": "true", children: /* @__PURE__ */ d(Go, { size: 14 }) })
1006
+ ) : /* @__PURE__ */ l(er, { "aria-hidden": "true", children: /* @__PURE__ */ l(ro, { size: 14 }) })
984
1007
  ] }),
985
- w && /* @__PURE__ */ d(nr, { id: z, $error: !0, children: w })
1008
+ C && /* @__PURE__ */ l(sr, { id: S, $error: !0, children: C })
986
1009
  ] });
987
1010
  }
988
- ir.displayName = "Select";
989
- const ar = l.a`
1011
+ ar.displayName = "Select";
1012
+ const lr = i.a`
990
1013
  text-decoration: underline;
991
1014
  text-underline-offset: 2px;
992
1015
  transition: color 0.15s;
@@ -1012,14 +1035,14 @@ const ar = l.a`
1012
1035
  `
1013
1036
  })[o]}
1014
1037
  `;
1015
- function lr({
1038
+ function cr({
1016
1039
  variant: o = "default",
1017
1040
  external: r,
1018
1041
  children: n,
1019
1042
  ...t
1020
1043
  }) {
1021
- return /* @__PURE__ */ d(
1022
- ar,
1044
+ return /* @__PURE__ */ l(
1045
+ lr,
1023
1046
  {
1024
1047
  $variant: o,
1025
1048
  ...r && { target: "_blank", rel: "noreferrer" },
@@ -1028,19 +1051,135 @@ function lr({
1028
1051
  }
1029
1052
  );
1030
1053
  }
1031
- lr.displayName = "Link";
1032
- const ro = Z(null);
1033
- function yr({ children: o }) {
1034
- const [r, n] = C(null), t = W((i) => {
1035
- n({ ...i, id: Date.now() });
1036
- }, []), a = to(() => {
1037
- const i = (e) => t(e);
1038
- return i.success = (e, c) => t({ ...c, message: e, variant: "success" }), i.error = (e, c) => t({ ...c, message: e, variant: "error" }), i.warning = (e, c) => t({ ...c, message: e, variant: "warning" }), i.info = (e, c) => t({ ...c, message: e, variant: "info" }), i;
1054
+ cr.displayName = "Link";
1055
+ const dr = i.div`
1056
+ border-radius: ${({ theme: o }) => o.radius.md};
1057
+ background: ${({ theme: o }) => o.colors.neutral[0]};
1058
+ overflow: hidden;
1059
+
1060
+ ${({ theme: o, $accentColor: r }) => o.brutalism ? s`
1061
+ border: ${o.brutalism.borderWidth} solid
1062
+ ${r ?? o.colors.neutral[900]};
1063
+ box-shadow: ${o.brutalism.shadowOffset}
1064
+ ${o.brutalism.shadowOffset} 0
1065
+ ${r ?? o.colors.neutral[900]};
1066
+ ` : s`
1067
+ border: 1px solid ${r ?? o.colors.neutral[200]};
1068
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
1069
+ `}
1070
+ `, ur = i.button`
1071
+ width: 100%;
1072
+ display: flex;
1073
+ align-items: center;
1074
+ gap: ${({ theme: o }) => o.spacing[3]};
1075
+ padding: ${({ theme: o }) => o.spacing[4]};
1076
+ background: ${({ theme: o }) => o.brutalism ? o.colors.neutral[100] : o.colors.neutral[0]};
1077
+ border: none;
1078
+ cursor: pointer;
1079
+ text-align: left;
1080
+
1081
+ &:hover {
1082
+ background: ${({ theme: o }) => o.colors.neutral[100]};
1083
+ }
1084
+
1085
+ &:focus-visible {
1086
+ outline: 2px solid
1087
+ ${({ theme: o, $accentColor: r }) => r ?? o.colors.primary[500]};
1088
+ outline-offset: -2px;
1089
+ }
1090
+ `, fr = i.div`
1091
+ flex: 1;
1092
+ min-width: 0;
1093
+ `, pr = i.span`
1094
+ display: block;
1095
+ font-size: ${({ theme: o }) => o.fontSizes.md};
1096
+ font-weight: 600;
1097
+ color: ${({ theme: o }) => o.colors.neutral[900]};
1098
+ `, gr = i.span`
1099
+ display: block;
1100
+ font-size: ${({ theme: o }) => o.fontSizes.sm};
1101
+ color: ${({ theme: o }) => o.colors.neutral[500]};
1102
+ margin-top: ${({ theme: o }) => o.spacing[1]};
1103
+ `, $r = i.div`
1104
+ display: flex;
1105
+ align-items: center;
1106
+ gap: ${({ theme: o }) => o.spacing[2]};
1107
+ `, br = i.span`
1108
+ display: inline-flex;
1109
+ align-items: center;
1110
+ justify-content: center;
1111
+ flex-shrink: 0;
1112
+ transition: transform 0.2s ease;
1113
+ transform: ${({ $open: o }) => o ? "rotate(180deg)" : "rotate(0deg)"};
1114
+ color: ${({ theme: o, $accentColor: r }) => r ?? o.colors.neutral[500]};
1115
+ `, xr = i.div`
1116
+ display: grid;
1117
+ grid-template-rows: ${({ $open: o }) => o ? "1fr" : "0fr"};
1118
+ transition: grid-template-rows 0.2s ease;
1119
+ `, yr = i.div`
1120
+ overflow: hidden;
1121
+ `, vr = i.div`
1122
+ padding: ${({ theme: o }) => o.spacing[4]};
1123
+ border-top: 1px solid ${({ theme: o }) => o.colors.neutral[200]};
1124
+ `;
1125
+ function wr({
1126
+ title: o,
1127
+ children: r,
1128
+ defaultOpen: n = !1,
1129
+ open: t,
1130
+ onToggle: c,
1131
+ subtitle: a,
1132
+ headerActions: e,
1133
+ accentColor: d
1134
+ }) {
1135
+ const [p, u] = z(n), b = F(), m = t !== void 0, $ = m ? t : p;
1136
+ return /* @__PURE__ */ h(dr, { $accentColor: d, children: [
1137
+ /* @__PURE__ */ h(
1138
+ ur,
1139
+ {
1140
+ type: "button",
1141
+ $open: $,
1142
+ $accentColor: d,
1143
+ "aria-expanded": $,
1144
+ "aria-controls": b,
1145
+ onClick: () => {
1146
+ const v = !$;
1147
+ m || u(v), c?.(v);
1148
+ },
1149
+ children: [
1150
+ /* @__PURE__ */ h(fr, { children: [
1151
+ /* @__PURE__ */ l(pr, { children: o }),
1152
+ a && /* @__PURE__ */ l(gr, { children: a })
1153
+ ] }),
1154
+ e && /* @__PURE__ */ l($r, { onClick: (v) => v.stopPropagation(), children: e }),
1155
+ /* @__PURE__ */ l(
1156
+ br,
1157
+ {
1158
+ $open: $,
1159
+ $accentColor: d,
1160
+ "aria-hidden": "true",
1161
+ children: /* @__PURE__ */ l(ro, { size: 18, strokeWidth: 2.5 })
1162
+ }
1163
+ )
1164
+ ]
1165
+ }
1166
+ ),
1167
+ /* @__PURE__ */ l(xr, { $open: $, children: /* @__PURE__ */ l(yr, { id: b, role: "region", "aria-label": o, children: /* @__PURE__ */ l(vr, { children: r }) }) })
1168
+ ] });
1169
+ }
1170
+ wr.displayName = "CollapsibleCard";
1171
+ const to = X(null);
1172
+ function Br({ children: o }) {
1173
+ const [r, n] = z(null), t = B((a) => {
1174
+ n({ ...a, id: Date.now() });
1175
+ }, []), c = ao(() => {
1176
+ const a = (e) => t(e);
1177
+ return a.success = (e, d) => t({ ...d, message: e, variant: "success" }), a.error = (e, d) => t({ ...d, message: e, variant: "error" }), a.warning = (e, d) => t({ ...d, message: e, variant: "warning" }), a.info = (e, d) => t({ ...d, message: e, variant: "info" }), a;
1039
1178
  }, [t]);
1040
- return /* @__PURE__ */ S(ro.Provider, { value: { toast: a }, children: [
1179
+ return /* @__PURE__ */ h(to.Provider, { value: { toast: c }, children: [
1041
1180
  o,
1042
- r && /* @__PURE__ */ d(
1043
- J,
1181
+ r && /* @__PURE__ */ l(
1182
+ so,
1044
1183
  {
1045
1184
  open: !0,
1046
1185
  onClose: () => n(null),
@@ -1053,89 +1192,89 @@ function yr({ children: o }) {
1053
1192
  )
1054
1193
  ] });
1055
1194
  }
1056
- function mr() {
1057
- const o = U(ro);
1195
+ function Or() {
1196
+ const o = Z(to);
1058
1197
  if (!o)
1059
1198
  throw new Error("useToast must be used within a ToastProvider");
1060
1199
  return o;
1061
1200
  }
1062
- function vr({
1201
+ function Lr({
1063
1202
  initialValues: o,
1064
1203
  validate: r,
1065
1204
  onSubmit: n,
1066
1205
  onError: t
1067
1206
  }) {
1068
- const [a, i] = C(o), [e, c] = C(
1207
+ const [c, a] = z(o), [e, d] = z(
1069
1208
  {}
1070
- ), [g, f] = C({}), [x, k] = C(!1), v = M(a);
1071
- v.current = a;
1072
- const b = W(
1073
- (u) => {
1209
+ ), [p, u] = z({}), [b, m] = z(!1), $ = R(c);
1210
+ $.current = c;
1211
+ const x = B(
1212
+ (f) => {
1074
1213
  if (!r)
1075
1214
  return {};
1076
- const p = r(u);
1215
+ const g = r(f);
1077
1216
  return Object.fromEntries(
1078
- Object.entries(p).filter(([, $]) => $ !== void 0)
1217
+ Object.entries(g).filter(([, y]) => y !== void 0)
1079
1218
  );
1080
1219
  },
1081
1220
  [r]
1082
- ), h = M(g);
1083
- h.current = g;
1084
- const z = W(
1085
- (u) => {
1086
- const { name: p, value: $ } = u.target, y = { ...v.current, [p]: $ };
1087
- i(y), h.current[p] && c(b(y));
1221
+ ), v = R(p);
1222
+ v.current = p;
1223
+ const S = B(
1224
+ (f) => {
1225
+ const { name: g, value: y } = f.target, w = { ...$.current, [g]: y };
1226
+ a(w), v.current[g] && d(x(w));
1088
1227
  },
1089
- [b]
1090
- ), w = W(
1091
- (u) => {
1092
- const { name: p } = u.target;
1093
- f(($) => ({ ...$, [p]: !0 })), c(b(v.current));
1228
+ [x]
1229
+ ), C = B(
1230
+ (f) => {
1231
+ const { name: g } = f.target;
1232
+ u((y) => ({ ...y, [g]: !0 })), d(x($.current));
1094
1233
  },
1095
- [b]
1096
- ), m = W(
1097
- (u) => {
1098
- u?.preventDefault();
1099
- const p = Object.keys(v.current).reduce(
1100
- (O, V) => ({ ...O, [V]: !0 }),
1234
+ [x]
1235
+ ), k = B(
1236
+ (f) => {
1237
+ f?.preventDefault();
1238
+ const g = Object.keys($.current).reduce(
1239
+ (E, V) => ({ ...E, [V]: !0 }),
1101
1240
  {}
1102
1241
  );
1103
- f(p);
1104
- const $ = b(v.current);
1105
- if (c($), Object.keys($).length > 0) {
1106
- t?.($);
1242
+ u(g);
1243
+ const y = x($.current);
1244
+ if (d(y), Object.keys(y).length > 0) {
1245
+ t?.(y);
1107
1246
  return;
1108
1247
  }
1109
1248
  (async () => {
1110
- k(!0);
1249
+ m(!0);
1111
1250
  try {
1112
- await n?.(v.current);
1251
+ await n?.($.current);
1113
1252
  } finally {
1114
- k(!1);
1253
+ m(!1);
1115
1254
  }
1116
1255
  })();
1117
1256
  },
1118
- [b, n, t]
1119
- ), I = W((u, p) => {
1120
- i(($) => ({ ...$, [u]: p }));
1121
- }, []), T = W(() => {
1122
- i(o), c({}), f({}), k(!1);
1123
- }, [o]), B = Object.fromEntries(
1124
- Object.entries(e).filter(([u]) => g[u])
1257
+ [x, n, t]
1258
+ ), I = B((f, g) => {
1259
+ a((y) => ({ ...y, [f]: g }));
1260
+ }, []), T = B(() => {
1261
+ a(o), d({}), u({}), m(!1);
1262
+ }, [o]), W = Object.fromEntries(
1263
+ Object.entries(e).filter(([f]) => p[f])
1125
1264
  );
1126
1265
  return {
1127
- values: a,
1128
- errors: B,
1129
- touched: g,
1130
- handleChange: z,
1131
- handleBlur: w,
1132
- handleSubmit: m,
1266
+ values: c,
1267
+ errors: W,
1268
+ touched: p,
1269
+ handleChange: S,
1270
+ handleBlur: C,
1271
+ handleSubmit: k,
1133
1272
  setFieldValue: I,
1134
1273
  reset: T,
1135
- isSubmitting: x
1274
+ isSubmitting: b
1136
1275
  };
1137
1276
  }
1138
- const K = {
1277
+ const U = {
1139
1278
  primary: {
1140
1279
  50: "#f0f8ff",
1141
1280
  500: "#0070f3",
@@ -1167,38 +1306,38 @@ const K = {
1167
1306
  50: "#eff6ff",
1168
1307
  500: "#2563eb"
1169
1308
  }
1170
- }, cr = {
1309
+ }, mr = {
1171
1310
  1: "4px",
1172
1311
  2: "8px",
1173
1312
  3: "12px",
1174
1313
  4: "16px",
1175
1314
  5: "20px",
1176
1315
  6: "24px"
1177
- }, dr = {
1316
+ }, kr = {
1178
1317
  md: "6px"
1179
- }, ur = {
1318
+ }, hr = {
1180
1319
  modal: 1e3,
1181
1320
  toast: 1100
1182
- }, fr = {
1321
+ }, Cr = {
1183
1322
  xs: "12px",
1184
1323
  sm: "14px",
1185
1324
  md: "16px",
1186
1325
  lg: "18px"
1187
- }, wr = {
1188
- colors: { ...K, primary: { ...K.primary, contrast: "#ffffff" } },
1189
- spacing: cr,
1190
- fontSizes: fr,
1191
- radius: dr,
1192
- zIndex: ur,
1326
+ }, jr = {
1327
+ colors: { ...U, primary: { ...U.primary, contrast: "#ffffff" } },
1328
+ spacing: mr,
1329
+ fontSizes: Cr,
1330
+ radius: kr,
1331
+ zIndex: hr,
1193
1332
  shadows: {
1194
1333
  focusRing: "0 0 0 2px rgba(0, 112, 243, 0.25)"
1195
1334
  }
1196
1335
  };
1197
- function pr(o) {
1198
- const r = parseInt(o.slice(1, 3), 16) / 255, n = parseInt(o.slice(3, 5), 16) / 255, t = parseInt(o.slice(5, 7), 16) / 255, a = (e) => e <= 0.03928 ? e / 12.92 : ((e + 0.055) / 1.055) ** 2.4;
1199
- return 0.2126 * a(r) + 0.7152 * a(n) + 0.0722 * a(t) > 0.179 ? "#111111" : "#ffffff";
1336
+ function zr(o) {
1337
+ const r = parseInt(o.slice(1, 3), 16) / 255, n = parseInt(o.slice(3, 5), 16) / 255, t = parseInt(o.slice(5, 7), 16) / 255, c = (e) => e <= 0.03928 ? e / 12.92 : ((e + 0.055) / 1.055) ** 2.4;
1338
+ return 0.2126 * c(r) + 0.7152 * c(n) + 0.0722 * c(t) > 0.179 ? "#111111" : "#ffffff";
1200
1339
  }
1201
- const P = {
1340
+ const Y = {
1202
1341
  colors: {
1203
1342
  primary: {
1204
1343
  50: "#fffde6",
@@ -1228,41 +1367,42 @@ const P = {
1228
1367
  shadows: { focusRing: "3px 3px 0 #111111" },
1229
1368
  brutalism: { borderWidth: "2px", shadowOffset: "4px" }
1230
1369
  };
1231
- function kr(o) {
1370
+ function Fr(o) {
1232
1371
  return {
1233
- ...P,
1372
+ ...Y,
1234
1373
  colors: {
1235
- ...P.colors,
1374
+ ...Y.colors,
1236
1375
  primary: {
1237
1376
  50: "#fffff0",
1238
1377
  500: o,
1239
1378
  700: o,
1240
- contrast: pr(o)
1379
+ contrast: zr(o)
1241
1380
  }
1242
1381
  }
1243
1382
  };
1244
1383
  }
1245
- function hr({
1246
- theme: o = P,
1384
+ function Er({
1385
+ theme: o = Y,
1247
1386
  children: r
1248
1387
  }) {
1249
- return /* @__PURE__ */ d(so, { theme: o, children: r });
1388
+ return /* @__PURE__ */ l(eo, { theme: o, children: r });
1250
1389
  }
1251
1390
  export {
1252
- io as Badge,
1253
- lo as Button,
1254
- Yo as Form,
1255
- Do as FormField,
1256
- bo as Input,
1257
- lr as Link,
1258
- Bo as Modal,
1259
- ir as Select,
1260
- hr as ThemeProvider,
1261
- J as Toast,
1262
- yr as ToastProvider,
1263
- kr as createNeoBrutalTheme,
1264
- wr as defaultTheme,
1265
- P as neoBrutalTheme,
1266
- vr as useForm,
1267
- mr as useToast
1391
+ co as Badge,
1392
+ fo as Button,
1393
+ wr as CollapsibleCard,
1394
+ Qo as Form,
1395
+ or as FormField,
1396
+ vo as Input,
1397
+ cr as Link,
1398
+ Lo as Modal,
1399
+ ar as Select,
1400
+ Er as ThemeProvider,
1401
+ so as Toast,
1402
+ Br as ToastProvider,
1403
+ Fr as createNeoBrutalTheme,
1404
+ jr as defaultTheme,
1405
+ Y as neoBrutalTheme,
1406
+ Lr as useForm,
1407
+ Or as useToast
1268
1408
  };