lucent-ui 0.5.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +37 -29
  2. package/dist/index.d.ts +8 -1
  3. package/dist/index.js +1355 -1074
  4. package/dist-server/src/components/molecules/DataTable/DataTable.manifest.js +26 -4
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
- import { jsxs as h, jsx as e, Fragment as W } from "react/jsx-runtime";
2
- import { forwardRef as U, useRef as F, useEffect as L, useState as M, useCallback as Z, useContext as ie, createContext as le, useLayoutEffect as se, useId as ce } from "react";
1
+ import { jsxs as h, jsx as e, Fragment as P } from "react/jsx-runtime";
2
+ import { forwardRef as U, useRef as B, useEffect as $, useState as q, useCallback as Z, useContext as ie, createContext as le, useLayoutEffect as se, useId as ce } from "react";
3
3
  const ye = {
4
4
  primary: {
5
5
  background: "var(--lucent-accent-default)",
@@ -26,18 +26,18 @@ const ye = {
26
26
  md: { height: "38px", padding: "0 var(--lucent-space-4)", fontSize: "var(--lucent-font-size-md)" },
27
27
  lg: { height: "46px", padding: "0 var(--lucent-space-5)", fontSize: "var(--lucent-font-size-lg)" }
28
28
  }, we = U(
29
- ({ variant: t = "primary", size: n = "md", loading: a = !1, fullWidth: o = !1, spread: r = !1, leftIcon: i, rightIcon: l, chevron: s = !1, disableHoverStyles: u = !1, bordered: m = !0, children: b, disabled: d, style: p, ...c }, v) => {
30
- const y = d ?? a;
29
+ ({ variant: t = "primary", size: n = "md", loading: r = !1, fullWidth: o = !1, spread: a = !1, leftIcon: i, rightIcon: l, chevron: s = !1, disableHoverStyles: d = !1, bordered: m = !0, children: g, disabled: u, style: f, ...c }, x) => {
30
+ const y = u ?? r;
31
31
  return /* @__PURE__ */ h(
32
32
  "button",
33
33
  {
34
- ref: v,
34
+ ref: x,
35
35
  disabled: y,
36
- "aria-busy": a,
36
+ "aria-busy": r,
37
37
  style: {
38
38
  display: "inline-flex",
39
39
  alignItems: "center",
40
- justifyContent: r ? "space-between" : "center",
40
+ justifyContent: a ? "space-between" : "center",
41
41
  gap: "var(--lucent-space-2)",
42
42
  fontFamily: "var(--lucent-font-family-base)",
43
43
  fontWeight: "var(--lucent-font-weight-medium)",
@@ -53,7 +53,7 @@ const ye = {
53
53
  margin: 0,
54
54
  ...xe[n],
55
55
  ...ye[t],
56
- ...p,
56
+ ...f,
57
57
  ...y && {
58
58
  background: "var(--lucent-bg-muted)",
59
59
  color: "var(--lucent-text-disabled)",
@@ -62,47 +62,47 @@ const ye = {
62
62
  // hide border entirely when bordered prop is false
63
63
  ...m === !1 && { border: "none" }
64
64
  },
65
- onMouseEnter: (w) => {
66
- var g;
67
- !y && !u && ke(w.currentTarget, t, m), (g = c.onMouseEnter) == null || g.call(c, w);
65
+ onMouseEnter: (b) => {
66
+ var p;
67
+ !y && !d && ke(b.currentTarget, t, m), (p = c.onMouseEnter) == null || p.call(c, b);
68
68
  },
69
- onMouseLeave: (w) => {
70
- var g;
71
- !y && !u && Se(w.currentTarget, t, m), (g = c.onMouseLeave) == null || g.call(c, w);
69
+ onMouseLeave: (b) => {
70
+ var p;
71
+ !y && !d && Se(b.currentTarget, t, m), (p = c.onMouseLeave) == null || p.call(c, b);
72
72
  },
73
- onMouseDown: (w) => {
74
- var g;
75
- y || (w.currentTarget.style.transform = "scale(0.95)"), (g = c.onMouseDown) == null || g.call(c, w);
73
+ onMouseDown: (b) => {
74
+ var p;
75
+ y || (b.currentTarget.style.transform = "scale(0.95)"), (p = c.onMouseDown) == null || p.call(c, b);
76
76
  },
77
- onMouseUp: (w) => {
78
- var g;
79
- w.currentTarget.style.transform = "", (g = c.onMouseUp) == null || g.call(c, w);
77
+ onMouseUp: (b) => {
78
+ var p;
79
+ b.currentTarget.style.transform = "", (p = c.onMouseUp) == null || p.call(c, b);
80
80
  },
81
- onFocus: (w) => {
82
- var g;
83
- w.currentTarget.style.boxShadow = "0 0 0 3px var(--lucent-accent-subtle)", (g = c.onFocus) == null || g.call(c, w);
81
+ onFocus: (b) => {
82
+ var p;
83
+ b.currentTarget.style.boxShadow = "0 0 0 3px var(--lucent-accent-subtle)", (p = c.onFocus) == null || p.call(c, b);
84
84
  },
85
- onBlur: (w) => {
86
- var g;
87
- w.currentTarget.style.boxShadow = "", (g = c.onBlur) == null || g.call(c, w);
85
+ onBlur: (b) => {
86
+ var p;
87
+ b.currentTarget.style.boxShadow = "", (p = c.onBlur) == null || p.call(c, b);
88
88
  },
89
89
  ...c,
90
90
  children: [
91
91
  i,
92
- a ? /* @__PURE__ */ e(Ie, {}) : b,
93
- !a && l,
94
- !a && s && /* @__PURE__ */ e(Ce, { size: n })
92
+ r ? /* @__PURE__ */ e(Ie, {}) : g,
93
+ !r && l,
94
+ !r && s && /* @__PURE__ */ e(Ce, { size: n })
95
95
  ]
96
96
  }
97
97
  );
98
98
  }
99
99
  );
100
100
  we.displayName = "Button";
101
- function ke(t, n, a) {
102
- n === "primary" ? (t.style.background = "var(--lucent-accent-hover)", a !== !1 && (t.style.borderColor = "var(--lucent-accent-border)")) : n === "secondary" ? t.style.background = "var(--lucent-bg-subtle)" : n === "ghost" ? t.style.background = "var(--lucent-bg-muted)" : n === "danger" && (t.style.background = "var(--lucent-danger-hover)", a !== !1 && (t.style.borderColor = "var(--lucent-danger-hover)"));
101
+ function ke(t, n, r) {
102
+ n === "primary" ? (t.style.background = "var(--lucent-accent-hover)", r !== !1 && (t.style.borderColor = "var(--lucent-accent-border)")) : n === "secondary" ? t.style.background = "var(--lucent-bg-subtle)" : n === "ghost" ? t.style.background = "var(--lucent-bg-muted)" : n === "danger" && (t.style.background = "var(--lucent-danger-hover)", r !== !1 && (t.style.borderColor = "var(--lucent-danger-hover)"));
103
103
  }
104
- function Se(t, n, a) {
105
- n === "primary" ? (t.style.background = "var(--lucent-accent-default)", a !== !1 && (t.style.borderColor = "var(--lucent-accent-border)")) : n === "secondary" ? t.style.background = "var(--lucent-surface-default)" : n === "ghost" ? t.style.background = "transparent" : n === "danger" && (t.style.background = "var(--lucent-danger-default)", a !== !1 && (t.style.borderColor = "var(--lucent-danger-default)"));
104
+ function Se(t, n, r) {
105
+ n === "primary" ? (t.style.background = "var(--lucent-accent-default)", r !== !1 && (t.style.borderColor = "var(--lucent-accent-border)")) : n === "secondary" ? t.style.background = "var(--lucent-surface-default)" : n === "ghost" ? t.style.background = "transparent" : n === "danger" && (t.style.background = "var(--lucent-danger-default)", r !== !1 && (t.style.borderColor = "var(--lucent-danger-default)"));
106
106
  }
107
107
  const Te = { sm: 12, md: 14, lg: 16 };
108
108
  function Ce({ size: t }) {
@@ -115,7 +115,7 @@ function Ie() {
115
115
  /* @__PURE__ */ e("path", { d: "M12 2a10 10 0 0 1 10 10" })
116
116
  ] });
117
117
  }
118
- const rn = {
118
+ const sn = {
119
119
  id: "button",
120
120
  name: "Button",
121
121
  tier: "atom",
@@ -238,8 +238,8 @@ const rn = {
238
238
  keyboardInteractions: ["Enter — activates the button", "Space — activates the button"]
239
239
  }
240
240
  }, de = U(
241
- ({ label: t, helperText: n, errorText: a, leftElement: o, rightElement: r, id: i, style: l, ...s }, u) => {
242
- const m = i ?? `lucent-input-${Math.random().toString(36).slice(2, 7)}`, b = !!a, d = !!s.disabled;
241
+ ({ label: t, helperText: n, errorText: r, leftElement: o, rightElement: a, id: i, style: l, ...s }, d) => {
242
+ const m = i ?? `lucent-input-${Math.random().toString(36).slice(2, 7)}`, g = !!r, u = !!s.disabled;
243
243
  return /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%" }, children: [
244
244
  t && /* @__PURE__ */ e(
245
245
  "label",
@@ -258,7 +258,7 @@ const rn = {
258
258
  o && /* @__PURE__ */ e("span", { style: {
259
259
  position: "absolute",
260
260
  left: "var(--lucent-space-3)",
261
- color: d ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
261
+ color: u ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
262
262
  display: "flex",
263
263
  alignItems: "center",
264
264
  pointerEvents: "none"
@@ -266,54 +266,54 @@ const rn = {
266
266
  /* @__PURE__ */ e(
267
267
  "input",
268
268
  {
269
- ref: u,
269
+ ref: d,
270
270
  id: m,
271
- "aria-invalid": b,
272
- "aria-describedby": b ? `${m}-error` : n ? `${m}-helper` : void 0,
271
+ "aria-invalid": g,
272
+ "aria-describedby": g ? `${m}-error` : n ? `${m}-helper` : void 0,
273
273
  style: {
274
274
  width: "100%",
275
275
  height: "40px",
276
- padding: `0 ${r ? "var(--lucent-space-10)" : "var(--lucent-space-3)"} 0 ${o ? "var(--lucent-space-10)" : "var(--lucent-space-3)"}`,
276
+ padding: `0 ${a ? "var(--lucent-space-10)" : "var(--lucent-space-3)"} 0 ${o ? "var(--lucent-space-10)" : "var(--lucent-space-3)"}`,
277
277
  fontSize: "var(--lucent-font-size-md)",
278
278
  fontFamily: "var(--lucent-font-family-base)",
279
- color: d ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
280
- background: d ? "var(--lucent-bg-muted)" : "var(--lucent-surface-default)",
281
- border: `1px solid ${d ? "transparent" : b ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"}`,
282
- cursor: d ? "not-allowed" : void 0,
279
+ color: u ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
280
+ background: u ? "var(--lucent-bg-muted)" : "var(--lucent-surface-default)",
281
+ border: `1px solid ${u ? "transparent" : g ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"}`,
282
+ cursor: u ? "not-allowed" : void 0,
283
283
  borderRadius: "var(--lucent-radius-lg)",
284
284
  outline: "none",
285
285
  boxSizing: "border-box",
286
286
  transition: "border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
287
287
  ...l
288
288
  },
289
- onMouseEnter: (p) => {
289
+ onMouseEnter: (f) => {
290
290
  var c;
291
- !s.disabled && p.currentTarget !== document.activeElement && (p.currentTarget.style.borderColor = b ? "var(--lucent-danger-default)" : "var(--lucent-border-strong)"), (c = s.onMouseEnter) == null || c.call(s, p);
291
+ !s.disabled && f.currentTarget !== document.activeElement && (f.currentTarget.style.borderColor = g ? "var(--lucent-danger-default)" : "var(--lucent-border-strong)"), (c = s.onMouseEnter) == null || c.call(s, f);
292
292
  },
293
- onMouseLeave: (p) => {
293
+ onMouseLeave: (f) => {
294
294
  var c;
295
- !s.disabled && p.currentTarget !== document.activeElement && (p.currentTarget.style.borderColor = b ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"), (c = s.onMouseLeave) == null || c.call(s, p);
295
+ !s.disabled && f.currentTarget !== document.activeElement && (f.currentTarget.style.borderColor = g ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"), (c = s.onMouseLeave) == null || c.call(s, f);
296
296
  },
297
- onFocus: (p) => {
297
+ onFocus: (f) => {
298
298
  var c;
299
- p.currentTarget.style.borderColor = b ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", p.currentTarget.style.boxShadow = `0 0 0 3px ${b ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (c = s.onFocus) == null || c.call(s, p);
299
+ f.currentTarget.style.borderColor = g ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", f.currentTarget.style.boxShadow = `0 0 0 3px ${g ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (c = s.onFocus) == null || c.call(s, f);
300
300
  },
301
- onBlur: (p) => {
301
+ onBlur: (f) => {
302
302
  var c;
303
- p.currentTarget.style.borderColor = b ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", p.currentTarget.style.boxShadow = "none", (c = s.onBlur) == null || c.call(s, p);
303
+ f.currentTarget.style.borderColor = g ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", f.currentTarget.style.boxShadow = "none", (c = s.onBlur) == null || c.call(s, f);
304
304
  },
305
305
  ...s
306
306
  }
307
307
  ),
308
- r && /* @__PURE__ */ e("span", { style: {
308
+ a && /* @__PURE__ */ e("span", { style: {
309
309
  position: "absolute",
310
310
  right: "var(--lucent-space-3)",
311
- color: d ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
311
+ color: u ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
312
312
  display: "flex",
313
313
  alignItems: "center"
314
- }, children: r })
314
+ }, children: a })
315
315
  ] }),
316
- b && /* @__PURE__ */ e(
316
+ g && /* @__PURE__ */ e(
317
317
  "span",
318
318
  {
319
319
  id: `${m}-error`,
@@ -323,10 +323,10 @@ const rn = {
323
323
  color: "var(--lucent-danger-text)",
324
324
  fontFamily: "var(--lucent-font-family-base)"
325
325
  },
326
- children: a
326
+ children: r
327
327
  }
328
328
  ),
329
- !b && n && /* @__PURE__ */ e(
329
+ !g && n && /* @__PURE__ */ e(
330
330
  "span",
331
331
  {
332
332
  id: `${m}-helper`,
@@ -342,7 +342,7 @@ const rn = {
342
342
  }
343
343
  );
344
344
  de.displayName = "Input";
345
- const on = {
345
+ const cn = {
346
346
  id: "input",
347
347
  name: "Input",
348
348
  tier: "atom",
@@ -375,14 +375,14 @@ const on = {
375
375
  keyboardInteractions: ["Tab — focuses the input"]
376
376
  }
377
377
  }, Me = U(
378
- ({ label: t, helperText: n, errorText: a, autoResize: o = !1, maxLength: r, showCount: i = !1, id: l, value: s, onChange: u, style: m, ...b }, d) => {
379
- const p = F(null), c = d ?? p, v = l ?? `lucent-textarea-${Math.random().toString(36).slice(2, 7)}`, y = !!a, w = typeof s == "string" ? s.length : 0;
380
- return L(() => {
378
+ ({ label: t, helperText: n, errorText: r, autoResize: o = !1, maxLength: a, showCount: i = !1, id: l, value: s, onChange: d, style: m, ...g }, u) => {
379
+ const f = B(null), c = u ?? f, x = l ?? `lucent-textarea-${Math.random().toString(36).slice(2, 7)}`, y = !!r, b = typeof s == "string" ? s.length : 0;
380
+ return $(() => {
381
381
  if (!o) return;
382
- const g = c.current;
383
- g && (g.style.height = "auto", g.style.height = `${g.scrollHeight}px`);
382
+ const p = c.current;
383
+ p && (p.style.height = "auto", p.style.height = `${p.scrollHeight}px`);
384
384
  }, [s, o, c]), /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%" }, children: [
385
- t && /* @__PURE__ */ e("label", { htmlFor: v, style: {
385
+ t && /* @__PURE__ */ e("label", { htmlFor: x, style: {
386
386
  fontSize: "var(--lucent-font-size-sm)",
387
387
  fontWeight: "var(--lucent-font-weight-medium)",
388
388
  color: "var(--lucent-text-primary)",
@@ -392,12 +392,12 @@ const on = {
392
392
  "textarea",
393
393
  {
394
394
  ref: c,
395
- id: v,
396
- maxLength: r,
395
+ id: x,
396
+ maxLength: a,
397
397
  value: s,
398
- onChange: u,
398
+ onChange: d,
399
399
  "aria-invalid": y,
400
- "aria-describedby": y ? `${v}-error` : n ? `${v}-helper` : void 0,
400
+ "aria-describedby": y ? `${x}-error` : n ? `${x}-helper` : void 0,
401
401
  style: {
402
402
  width: "100%",
403
403
  minHeight: "100px",
@@ -415,38 +415,38 @@ const on = {
415
415
  transition: "border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
416
416
  ...m
417
417
  },
418
- onFocus: (g) => {
419
- var x;
420
- g.currentTarget.style.borderColor = y ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", g.currentTarget.style.boxShadow = `0 0 0 3px ${y ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (x = b.onFocus) == null || x.call(b, g);
418
+ onFocus: (p) => {
419
+ var v;
420
+ p.currentTarget.style.borderColor = y ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", p.currentTarget.style.boxShadow = `0 0 0 3px ${y ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (v = g.onFocus) == null || v.call(g, p);
421
421
  },
422
- onBlur: (g) => {
423
- var x;
424
- g.currentTarget.style.borderColor = y ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", g.currentTarget.style.boxShadow = "none", (x = b.onBlur) == null || x.call(b, g);
422
+ onBlur: (p) => {
423
+ var v;
424
+ p.currentTarget.style.borderColor = y ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", p.currentTarget.style.boxShadow = "none", (v = g.onBlur) == null || v.call(g, p);
425
425
  },
426
- ...b
426
+ ...g
427
427
  }
428
428
  ),
429
429
  /* @__PURE__ */ h("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
430
430
  /* @__PURE__ */ h("div", { children: [
431
- y && /* @__PURE__ */ e("span", { id: `${v}-error`, role: "alert", style: { fontSize: "var(--lucent-font-size-sm)", color: "var(--lucent-danger-text)", fontFamily: "var(--lucent-font-family-base)" }, children: a }),
432
- !y && n && /* @__PURE__ */ e("span", { id: `${v}-helper`, style: { fontSize: "var(--lucent-font-size-sm)", color: "var(--lucent-text-secondary)", fontFamily: "var(--lucent-font-family-base)" }, children: n })
431
+ y && /* @__PURE__ */ e("span", { id: `${x}-error`, role: "alert", style: { fontSize: "var(--lucent-font-size-sm)", color: "var(--lucent-danger-text)", fontFamily: "var(--lucent-font-family-base)" }, children: r }),
432
+ !y && n && /* @__PURE__ */ e("span", { id: `${x}-helper`, style: { fontSize: "var(--lucent-font-size-sm)", color: "var(--lucent-text-secondary)", fontFamily: "var(--lucent-font-family-base)" }, children: n })
433
433
  ] }),
434
- (i || r) && /* @__PURE__ */ h("span", { style: {
434
+ (i || a) && /* @__PURE__ */ h("span", { style: {
435
435
  fontSize: "var(--lucent-font-size-xs)",
436
- color: r && w >= r ? "var(--lucent-danger-text)" : "var(--lucent-text-secondary)",
436
+ color: a && b >= a ? "var(--lucent-danger-text)" : "var(--lucent-text-secondary)",
437
437
  fontFamily: "var(--lucent-font-family-mono)",
438
438
  flexShrink: 0,
439
439
  marginLeft: "var(--lucent-space-2)"
440
440
  }, children: [
441
- w,
442
- r ? `/${r}` : ""
441
+ b,
442
+ a ? `/${a}` : ""
443
443
  ] })
444
444
  ] })
445
445
  ] });
446
446
  }
447
447
  );
448
448
  Me.displayName = "Textarea";
449
- const ln = {
449
+ const dn = {
450
450
  id: "textarea",
451
451
  name: "Textarea",
452
452
  tier: "atom",
@@ -485,12 +485,12 @@ const ln = {
485
485
  warning: { bg: "var(--lucent-warning-subtle)", color: "var(--lucent-warning-text)", border: "var(--lucent-warning-subtle)" },
486
486
  danger: { bg: "var(--lucent-danger-subtle)", color: "var(--lucent-danger-text)", border: "var(--lucent-danger-subtle)" },
487
487
  info: { bg: "var(--lucent-info-subtle)", color: "var(--lucent-info-text)", border: "var(--lucent-info-subtle)" }
488
- }, qe = {
488
+ }, Ee = {
489
489
  sm: { fontSize: "var(--lucent-font-size-xs)", padding: "0 var(--lucent-space-2)", height: "18px" },
490
490
  md: { fontSize: "var(--lucent-font-size-sm)", padding: "0 var(--lucent-space-2)", height: "22px" }
491
491
  };
492
- function sn({ variant: t = "neutral", size: n = "md", dot: a = !1, children: o, style: r }) {
493
- const i = ze[t], l = qe[n];
492
+ function un({ variant: t = "neutral", size: n = "md", dot: r = !1, children: o, style: a }) {
493
+ const i = ze[t], l = Ee[n];
494
494
  return /* @__PURE__ */ h("span", { style: {
495
495
  display: "inline-flex",
496
496
  alignItems: "center",
@@ -507,9 +507,9 @@ function sn({ variant: t = "neutral", size: n = "md", dot: a = !1, children: o,
507
507
  border: `1px solid ${i.border}`,
508
508
  whiteSpace: "nowrap",
509
509
  boxSizing: "border-box",
510
- ...r
510
+ ...a
511
511
  }, children: [
512
- a && /* @__PURE__ */ e("span", { style: {
512
+ r && /* @__PURE__ */ e("span", { style: {
513
513
  width: 6,
514
514
  height: 6,
515
515
  borderRadius: "var(--lucent-radius-full)",
@@ -519,7 +519,7 @@ function sn({ variant: t = "neutral", size: n = "md", dot: a = !1, children: o,
519
519
  o
520
520
  ] });
521
521
  }
522
- const cn = {
522
+ const pn = {
523
523
  id: "badge",
524
524
  name: "Badge",
525
525
  tier: "atom",
@@ -544,27 +544,27 @@ const cn = {
544
544
  role: "status",
545
545
  notes: "Use aria-label on the parent element when badge meaning depends on context."
546
546
  }
547
- }, Ee = {
547
+ }, qe = {
548
548
  xs: 24,
549
549
  sm: 32,
550
550
  md: 40,
551
551
  lg: 56,
552
552
  xl: 80
553
- }, De = {
553
+ }, Ae = {
554
554
  xs: "var(--lucent-font-size-xs)",
555
555
  sm: "var(--lucent-font-size-xs)",
556
556
  md: "var(--lucent-font-size-sm)",
557
557
  lg: "var(--lucent-font-size-lg)",
558
558
  xl: "var(--lucent-font-size-xl)"
559
559
  };
560
- function Ae(t, n) {
561
- var o, r, i;
560
+ function De(t, n) {
561
+ var o, a, i;
562
562
  if (n) return n.slice(0, 2).toUpperCase();
563
- const a = t.trim().split(/\s+/);
564
- return a.length === 1 ? (((o = a[0]) == null ? void 0 : o[0]) ?? "").toUpperCase() : ((((r = a[0]) == null ? void 0 : r[0]) ?? "") + (((i = a[a.length - 1]) == null ? void 0 : i[0]) ?? "")).toUpperCase();
563
+ const r = t.trim().split(/\s+/);
564
+ return r.length === 1 ? (((o = r[0]) == null ? void 0 : o[0]) ?? "").toUpperCase() : ((((a = r[0]) == null ? void 0 : a[0]) ?? "") + (((i = r[r.length - 1]) == null ? void 0 : i[0]) ?? "")).toUpperCase();
565
565
  }
566
- function dn({ src: t, alt: n, size: a = "md", initials: o, style: r, ...i }) {
567
- const l = Ee[a], s = Ae(n, o), u = {
566
+ function fn({ src: t, alt: n, size: r = "md", initials: o, style: a, ...i }) {
567
+ const l = qe[r], s = De(n, o), d = {
568
568
  width: l,
569
569
  height: l,
570
570
  borderRadius: "var(--lucent-radius-full)",
@@ -575,7 +575,7 @@ function dn({ src: t, alt: n, size: a = "md", initials: o, style: r, ...i }) {
575
575
  overflow: "hidden",
576
576
  boxSizing: "border-box",
577
577
  userSelect: "none",
578
- ...r
578
+ ...a
579
579
  };
580
580
  return t ? /* @__PURE__ */ e(
581
581
  "img",
@@ -584,7 +584,7 @@ function dn({ src: t, alt: n, size: a = "md", initials: o, style: r, ...i }) {
584
584
  alt: n,
585
585
  width: l,
586
586
  height: l,
587
- style: { ...u, objectFit: "cover" },
587
+ style: { ...d, objectFit: "cover" },
588
588
  ...i
589
589
  }
590
590
  ) : /* @__PURE__ */ e(
@@ -593,10 +593,10 @@ function dn({ src: t, alt: n, size: a = "md", initials: o, style: r, ...i }) {
593
593
  role: "img",
594
594
  "aria-label": n,
595
595
  style: {
596
- ...u,
596
+ ...d,
597
597
  background: "var(--lucent-accent-default)",
598
598
  color: "var(--lucent-text-on-accent)",
599
- fontSize: De[a],
599
+ fontSize: Ae[r],
600
600
  fontWeight: "var(--lucent-font-weight-semibold)",
601
601
  fontFamily: "var(--lucent-font-family-base)"
602
602
  },
@@ -604,7 +604,7 @@ function dn({ src: t, alt: n, size: a = "md", initials: o, style: r, ...i }) {
604
604
  }
605
605
  );
606
606
  }
607
- const un = {
607
+ const hn = {
608
608
  id: "avatar",
609
609
  name: "Avatar",
610
610
  tier: "atom",
@@ -641,8 +641,8 @@ const un = {
641
641
  md: 2,
642
642
  lg: 2
643
643
  };
644
- function Re({ size: t = "md", label: n = "Loading…", color: a }) {
645
- const o = Fe[t], r = Be[t];
644
+ function Re({ size: t = "md", label: n = "Loading…", color: r }) {
645
+ const o = Fe[t], a = Be[t];
646
646
  return /* @__PURE__ */ h("span", { role: "status", "aria-label": n, style: { display: "inline-flex", alignItems: "center", justifyContent: "center" }, children: [
647
647
  /* @__PURE__ */ h(
648
648
  "svg",
@@ -652,16 +652,16 @@ function Re({ size: t = "md", label: n = "Loading…", color: a }) {
652
652
  viewBox: "0 0 24 24",
653
653
  fill: "none",
654
654
  "aria-hidden": !0,
655
- style: { animation: "lucent-spin 0.7s linear infinite", color: a ?? "currentColor" },
655
+ style: { animation: "lucent-spin 0.7s linear infinite", color: r ?? "currentColor" },
656
656
  children: [
657
657
  /* @__PURE__ */ e("style", { children: "@keyframes lucent-spin { to { transform: rotate(360deg); } }" }),
658
- /* @__PURE__ */ e("circle", { cx: 12, cy: 12, r: 10, stroke: "currentColor", strokeWidth: r, strokeOpacity: 0.2 }),
658
+ /* @__PURE__ */ e("circle", { cx: 12, cy: 12, r: 10, stroke: "currentColor", strokeWidth: a, strokeOpacity: 0.2 }),
659
659
  /* @__PURE__ */ e(
660
660
  "path",
661
661
  {
662
662
  d: "M12 2a10 10 0 0 1 10 10",
663
663
  stroke: "currentColor",
664
- strokeWidth: r,
664
+ strokeWidth: a,
665
665
  strokeLinecap: "round"
666
666
  }
667
667
  )
@@ -671,7 +671,7 @@ function Re({ size: t = "md", label: n = "Loading…", color: a }) {
671
671
  /* @__PURE__ */ e("span", { style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0,0,0,0)", whiteSpace: "nowrap" }, children: n })
672
672
  ] });
673
673
  }
674
- const pn = {
674
+ const mn = {
675
675
  id: "spinner",
676
676
  name: "Spinner",
677
677
  tier: "atom",
@@ -696,7 +696,7 @@ const pn = {
696
696
  notes: 'The visible SVG is aria-hidden. The label is conveyed via a visually-hidden span inside role="status".'
697
697
  }
698
698
  };
699
- function fn({ orientation: t = "horizontal", label: n, spacing: a = "var(--lucent-space-4)", style: o }) {
699
+ function gn({ orientation: t = "horizontal", label: n, spacing: r = "var(--lucent-space-4)", style: o }) {
700
700
  return t === "vertical" ? /* @__PURE__ */ e(
701
701
  "span",
702
702
  {
@@ -707,7 +707,7 @@ function fn({ orientation: t = "horizontal", label: n, spacing: a = "var(--lucen
707
707
  width: "1px",
708
708
  alignSelf: "stretch",
709
709
  background: "var(--lucent-border-default)",
710
- margin: `0 ${a}`,
710
+ margin: `0 ${r}`,
711
711
  flexShrink: 0,
712
712
  ...o
713
713
  }
@@ -721,7 +721,7 @@ function fn({ orientation: t = "horizontal", label: n, spacing: a = "var(--lucen
721
721
  display: "flex",
722
722
  alignItems: "center",
723
723
  gap: "var(--lucent-space-3)",
724
- margin: `${a} 0`,
724
+ margin: `${r} 0`,
725
725
  ...o
726
726
  },
727
727
  children: [
@@ -744,14 +744,14 @@ function fn({ orientation: t = "horizontal", label: n, spacing: a = "var(--lucen
744
744
  style: {
745
745
  border: "none",
746
746
  borderTop: "1px solid var(--lucent-border-default)",
747
- margin: `${a} 0`,
747
+ margin: `${r} 0`,
748
748
  width: "100%",
749
749
  ...o
750
750
  }
751
751
  }
752
752
  );
753
753
  }
754
- const hn = {
754
+ const bn = {
755
755
  id: "divider",
756
756
  name: "Divider",
757
757
  tier: "atom",
@@ -790,31 +790,31 @@ const hn = {
790
790
  ({
791
791
  label: t,
792
792
  size: n = "md",
793
- indeterminate: a = !1,
793
+ indeterminate: r = !1,
794
794
  checked: o,
795
- defaultChecked: r,
795
+ defaultChecked: a,
796
796
  disabled: i,
797
797
  id: l,
798
798
  onChange: s,
799
- style: u,
799
+ style: d,
800
800
  ...m
801
- }, b) => {
802
- const d = F(null), p = l ?? `lucent-checkbox-${Math.random().toString(36).slice(2, 7)}`, c = Ne[n], v = o !== void 0, [y, w] = M(r ?? !1), g = v ? !!o : y, x = F(g), [I, k] = M(0);
803
- L(() => {
804
- !i && x.current !== g && (x.current = g, k((C) => C + 1));
805
- }, [g, i]);
806
- const f = Z(
801
+ }, g) => {
802
+ const u = B(null), f = l ?? `lucent-checkbox-${Math.random().toString(36).slice(2, 7)}`, c = Ne[n], x = o !== void 0, [y, b] = q(a ?? !1), p = x ? !!o : y, v = B(p), [M, w] = q(0);
803
+ $(() => {
804
+ !i && v.current !== p && (v.current = p, w((C) => C + 1));
805
+ }, [p, i]);
806
+ const S = Z(
807
807
  (C) => {
808
- d.current = C, typeof b == "function" ? b(C) : b && (b.current = C);
808
+ u.current = C, typeof g == "function" ? g(C) : g && (g.current = C);
809
809
  },
810
- [b]
810
+ [g]
811
811
  );
812
- L(() => {
813
- d.current && (d.current.indeterminate = a);
814
- }, [a]);
815
- const S = (C) => {
816
- v || w(C.target.checked), s == null || s(C);
817
- }, D = i ? "var(--lucent-text-disabled)" : "var(--lucent-text-on-accent)", T = {
812
+ $(() => {
813
+ u.current && (u.current.indeterminate = r);
814
+ }, [r]);
815
+ const E = (C) => {
816
+ x || b(C.target.checked), s == null || s(C);
817
+ }, F = i ? "var(--lucent-text-disabled)" : "var(--lucent-text-on-accent)", T = {
818
818
  width: c,
819
819
  height: c,
820
820
  // fixed corner so global radius overrides (e.g. via customizer) don't
@@ -822,17 +822,17 @@ const hn = {
822
822
  // rounded regardless of theming.
823
823
  // bumping up a bit to keep the box from feeling too sharp.
824
824
  borderRadius: "4px",
825
- border: `1.5px solid ${i ? "transparent" : g || a ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)"}`,
826
- background: i ? "var(--lucent-bg-muted)" : g || a ? "var(--lucent-accent-default)" : "var(--lucent-surface-default)",
825
+ border: `1.5px solid ${i ? "transparent" : p || r ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)"}`,
826
+ background: i ? "var(--lucent-bg-muted)" : p || r ? "var(--lucent-accent-default)" : "var(--lucent-surface-default)",
827
827
  display: "inline-flex",
828
828
  alignItems: "center",
829
829
  justifyContent: "center",
830
830
  flexShrink: 0,
831
831
  transition: "background var(--lucent-duration-fast) var(--lucent-easing-default), border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
832
832
  // Re-key forces the animation to restart on every toggle.
833
- animation: I > 0 ? "lucent-cb-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0
833
+ animation: M > 0 ? "lucent-cb-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0
834
834
  };
835
- return /* @__PURE__ */ h(W, { children: [
835
+ return /* @__PURE__ */ h(P, { children: [
836
836
  /* @__PURE__ */ e("style", { children: Le }),
837
837
  /* @__PURE__ */ h(
838
838
  "label",
@@ -846,24 +846,24 @@ const hn = {
846
846
  fontSize: n === "sm" ? "var(--lucent-font-size-sm)" : "var(--lucent-font-size-md)",
847
847
  color: i ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
848
848
  userSelect: "none",
849
- ...u
849
+ ...d
850
850
  },
851
851
  children: [
852
852
  /* @__PURE__ */ e(
853
853
  "input",
854
854
  {
855
- ref: f,
855
+ ref: S,
856
856
  type: "checkbox",
857
- id: p,
858
- checked: v ? o : y,
857
+ id: f,
858
+ checked: x ? o : y,
859
859
  disabled: i,
860
- onChange: S,
860
+ onChange: E,
861
861
  style: { position: "absolute", opacity: 0, width: 0, height: 0, margin: 0, pointerEvents: "none" },
862
862
  ...m
863
863
  }
864
864
  ),
865
865
  /* @__PURE__ */ h("span", { "aria-hidden": !0, style: T, children: [
866
- g && !a && /* @__PURE__ */ e(
866
+ p && !r && /* @__PURE__ */ e(
867
867
  "svg",
868
868
  {
869
869
  width: c - 4,
@@ -871,10 +871,10 @@ const hn = {
871
871
  viewBox: "0 0 10 10",
872
872
  fill: "none",
873
873
  style: { animation: "lucent-cb-mark 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" },
874
- children: /* @__PURE__ */ e("path", { d: "M1.5 5L4 7.5L8.5 2.5", stroke: D, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })
874
+ children: /* @__PURE__ */ e("path", { d: "M1.5 5L4 7.5L8.5 2.5", stroke: F, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })
875
875
  }
876
876
  ),
877
- a && /* @__PURE__ */ e(
877
+ r && /* @__PURE__ */ e(
878
878
  "svg",
879
879
  {
880
880
  width: c - 4,
@@ -882,10 +882,10 @@ const hn = {
882
882
  viewBox: "0 0 10 10",
883
883
  fill: "none",
884
884
  style: { animation: "lucent-cb-mark 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" },
885
- children: /* @__PURE__ */ e("path", { d: "M2 5H8", stroke: D, strokeWidth: 1.5, strokeLinecap: "round" })
885
+ children: /* @__PURE__ */ e("path", { d: "M2 5H8", stroke: F, strokeWidth: 1.5, strokeLinecap: "round" })
886
886
  }
887
887
  )
888
- ] }, I),
888
+ ] }, M),
889
889
  t
890
890
  ]
891
891
  }
@@ -894,7 +894,7 @@ const hn = {
894
894
  }
895
895
  );
896
896
  ue.displayName = "Checkbox";
897
- const mn = {
897
+ const vn = {
898
898
  id: "checkbox",
899
899
  name: "Checkbox",
900
900
  tier: "atom",
@@ -976,59 +976,59 @@ const mn = {
976
976
  100% { opacity: 1; transform: scale(1); }
977
977
  }
978
978
  `, pe = le(null);
979
- function Pe({
979
+ function We({
980
980
  name: t,
981
981
  value: n,
982
- onChange: a,
982
+ onChange: r,
983
983
  disabled: o,
984
- orientation: r = "vertical",
984
+ orientation: a = "vertical",
985
985
  label: i,
986
986
  children: l
987
987
  }) {
988
- return /* @__PURE__ */ e(pe.Provider, { value: { name: t, value: n, onChange: a, disabled: o ?? !1 }, children: /* @__PURE__ */ e(
988
+ return /* @__PURE__ */ e(pe.Provider, { value: { name: t, value: n, onChange: r, disabled: o ?? !1 }, children: /* @__PURE__ */ e(
989
989
  "div",
990
990
  {
991
991
  role: "radiogroup",
992
992
  "aria-label": i,
993
993
  style: {
994
994
  display: "flex",
995
- flexDirection: r === "vertical" ? "column" : "row",
996
- gap: r === "vertical" ? "var(--lucent-space-3)" : "var(--lucent-space-4)",
995
+ flexDirection: a === "vertical" ? "column" : "row",
996
+ gap: a === "vertical" ? "var(--lucent-space-3)" : "var(--lucent-space-4)",
997
997
  flexWrap: "wrap"
998
998
  },
999
999
  children: l
1000
1000
  }
1001
1001
  ) });
1002
1002
  }
1003
- const We = { sm: 14, md: 16 };
1004
- function gn({ value: t, label: n, size: a = "md", disabled: o, id: r, onChange: i, checked: l, ...s }) {
1005
- const u = ie(pe), m = r ?? `lucent-radio-${Math.random().toString(36).slice(2, 7)}`, b = We[a], d = o ?? (u == null ? void 0 : u.disabled) ?? !1, p = u ? u.value === t : !!l, c = F(p), [v, y] = M(0);
1006
- L(() => {
1007
- !d && c.current !== p && (c.current = p, y((I) => I + 1));
1008
- }, [p, d]);
1009
- const w = (I) => {
1010
- u == null || u.onChange(t), i == null || i(I);
1011
- }, g = {
1012
- width: b / 2,
1013
- height: b / 2,
1003
+ const Ve = { sm: 14, md: 16 };
1004
+ function yn({ value: t, label: n, size: r = "md", disabled: o, id: a, onChange: i, checked: l, ...s }) {
1005
+ const d = ie(pe), m = a ?? `lucent-radio-${Math.random().toString(36).slice(2, 7)}`, g = Ve[r], u = o ?? (d == null ? void 0 : d.disabled) ?? !1, f = d ? d.value === t : !!l, c = B(f), [x, y] = q(0);
1006
+ $(() => {
1007
+ !u && c.current !== f && (c.current = f, y((M) => M + 1));
1008
+ }, [f, u]);
1009
+ const b = (M) => {
1010
+ d == null || d.onChange(t), i == null || i(M);
1011
+ }, p = {
1012
+ width: g / 2,
1013
+ height: g / 2,
1014
1014
  borderRadius: "50%",
1015
- background: d ? "var(--lucent-text-disabled)" : "var(--lucent-text-on-accent)",
1016
- animation: p ? "lucent-radio-dot 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0,
1017
- opacity: p ? 1 : 0
1018
- }, x = {
1019
- width: b,
1020
- height: b,
1015
+ background: u ? "var(--lucent-text-disabled)" : "var(--lucent-text-on-accent)",
1016
+ animation: f ? "lucent-radio-dot 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0,
1017
+ opacity: f ? 1 : 0
1018
+ }, v = {
1019
+ width: g,
1020
+ height: g,
1021
1021
  borderRadius: "50%",
1022
- border: `1.5px solid ${d ? "transparent" : p ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)"}`,
1023
- background: d ? "var(--lucent-bg-muted)" : p ? "var(--lucent-accent-default)" : "var(--lucent-surface-default)",
1022
+ border: `1.5px solid ${u ? "transparent" : f ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)"}`,
1023
+ background: u ? "var(--lucent-bg-muted)" : f ? "var(--lucent-accent-default)" : "var(--lucent-surface-default)",
1024
1024
  display: "inline-flex",
1025
1025
  alignItems: "center",
1026
1026
  justifyContent: "center",
1027
1027
  flexShrink: 0,
1028
1028
  transition: "background var(--lucent-duration-fast) var(--lucent-easing-default), border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
1029
- animation: v > 0 ? "lucent-radio-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0
1029
+ animation: x > 0 ? "lucent-radio-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0
1030
1030
  };
1031
- return /* @__PURE__ */ h(W, { children: [
1031
+ return /* @__PURE__ */ h(P, { children: [
1032
1032
  /* @__PURE__ */ e("style", { children: $e }),
1033
1033
  /* @__PURE__ */ h(
1034
1034
  "label",
@@ -1037,10 +1037,10 @@ function gn({ value: t, label: n, size: a = "md", disabled: o, id: r, onChange:
1037
1037
  display: "inline-flex",
1038
1038
  alignItems: "center",
1039
1039
  gap: "var(--lucent-space-2)",
1040
- cursor: d ? "not-allowed" : "pointer",
1040
+ cursor: u ? "not-allowed" : "pointer",
1041
1041
  fontFamily: "var(--lucent-font-family-base)",
1042
- fontSize: a === "sm" ? "var(--lucent-font-size-sm)" : "var(--lucent-font-size-md)",
1043
- color: d ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
1042
+ fontSize: r === "sm" ? "var(--lucent-font-size-sm)" : "var(--lucent-font-size-md)",
1043
+ color: u ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
1044
1044
  userSelect: "none"
1045
1045
  },
1046
1046
  children: [
@@ -1050,39 +1050,39 @@ function gn({ value: t, label: n, size: a = "md", disabled: o, id: r, onChange:
1050
1050
  type: "radio",
1051
1051
  id: m,
1052
1052
  value: t,
1053
- name: (u == null ? void 0 : u.name) ?? s.name,
1054
- checked: p,
1055
- disabled: d,
1056
- onChange: w,
1053
+ name: (d == null ? void 0 : d.name) ?? s.name,
1054
+ checked: f,
1055
+ disabled: u,
1056
+ onChange: b,
1057
1057
  style: { position: "absolute", opacity: 0, width: 0, height: 0, margin: 0, pointerEvents: "none" },
1058
1058
  ...s
1059
1059
  }
1060
1060
  ),
1061
- /* @__PURE__ */ e("span", { "aria-hidden": !0, style: x, children: /* @__PURE__ */ e("span", { style: g }) }, v),
1061
+ /* @__PURE__ */ e("span", { "aria-hidden": !0, style: v, children: /* @__PURE__ */ e("span", { style: p }) }, x),
1062
1062
  n
1063
1063
  ]
1064
1064
  }
1065
1065
  )
1066
1066
  ] });
1067
1067
  }
1068
- function bn({
1068
+ function xn({
1069
1069
  defaultValue: t = "",
1070
1070
  onChange: n,
1071
- ...a
1071
+ ...r
1072
1072
  }) {
1073
- const [o, r] = M(t);
1073
+ const [o, a] = q(t);
1074
1074
  return /* @__PURE__ */ e(
1075
- Pe,
1075
+ We,
1076
1076
  {
1077
- ...a,
1077
+ ...r,
1078
1078
  value: o,
1079
1079
  onChange: (i) => {
1080
- r(i), n == null || n(i);
1080
+ a(i), n == null || n(i);
1081
1081
  }
1082
1082
  }
1083
1083
  );
1084
1084
  }
1085
- const vn = {
1085
+ const wn = {
1086
1086
  id: "radio",
1087
1087
  name: "Radio",
1088
1088
  tier: "atom",
@@ -1159,7 +1159,7 @@ const vn = {
1159
1159
  "Space — selects the focused radio"
1160
1160
  ]
1161
1161
  }
1162
- }, Ve = {
1162
+ }, Pe = {
1163
1163
  sm: { track: [28, 16], thumb: 12 },
1164
1164
  md: { track: [36, 20], thumb: 16 },
1165
1165
  lg: { track: [44, 24], thumb: 20 }
@@ -1171,25 +1171,25 @@ const vn = {
1171
1171
  100% { transform: scale(1); }
1172
1172
  }
1173
1173
  `;
1174
- function yn({
1174
+ function kn({
1175
1175
  label: t,
1176
1176
  size: n = "md",
1177
- checked: a,
1177
+ checked: r,
1178
1178
  defaultChecked: o,
1179
- disabled: r,
1179
+ disabled: a,
1180
1180
  id: i,
1181
1181
  onChange: l,
1182
1182
  style: s,
1183
- ...u
1183
+ ...d
1184
1184
  }) {
1185
- const m = i ?? `lucent-toggle-${Math.random().toString(36).slice(2, 7)}`, b = a !== void 0, [d, p] = M(o ?? !1), c = b ? !!a : d, v = F(c), [y, w] = M(0);
1186
- L(() => {
1187
- !r && v.current !== c && (v.current = c, w((S) => S + 1));
1188
- }, [c, r]);
1189
- const { track: [g, x], thumb: I } = Ve[n], k = c ? g - I - 2 : 2, f = (S) => {
1190
- b || p(S.target.checked), l == null || l(S);
1185
+ const m = i ?? `lucent-toggle-${Math.random().toString(36).slice(2, 7)}`, g = r !== void 0, [u, f] = q(o ?? !1), c = g ? !!r : u, x = B(c), [y, b] = q(0);
1186
+ $(() => {
1187
+ !a && x.current !== c && (x.current = c, b((E) => E + 1));
1188
+ }, [c, a]);
1189
+ const { track: [p, v], thumb: M } = Pe[n], w = c ? p - M - 2 : 2, S = (E) => {
1190
+ g || f(E.target.checked), l == null || l(E);
1191
1191
  };
1192
- return /* @__PURE__ */ h(W, { children: [
1192
+ return /* @__PURE__ */ h(P, { children: [
1193
1193
  /* @__PURE__ */ e("style", { children: Oe }),
1194
1194
  /* @__PURE__ */ h(
1195
1195
  "label",
@@ -1198,10 +1198,10 @@ function yn({
1198
1198
  display: "inline-flex",
1199
1199
  alignItems: "center",
1200
1200
  gap: "var(--lucent-space-2)",
1201
- cursor: r ? "not-allowed" : "pointer",
1201
+ cursor: a ? "not-allowed" : "pointer",
1202
1202
  fontFamily: "var(--lucent-font-family-base)",
1203
1203
  fontSize: "var(--lucent-font-size-md)",
1204
- color: r ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
1204
+ color: a ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
1205
1205
  userSelect: "none",
1206
1206
  ...s
1207
1207
  },
@@ -1212,12 +1212,12 @@ function yn({
1212
1212
  type: "checkbox",
1213
1213
  role: "switch",
1214
1214
  id: m,
1215
- checked: b ? a : d,
1216
- disabled: r,
1217
- onChange: f,
1215
+ checked: g ? r : u,
1216
+ disabled: a,
1217
+ onChange: S,
1218
1218
  "aria-checked": c,
1219
1219
  style: { position: "absolute", opacity: 0, width: 0, height: 0, margin: 0, pointerEvents: "none" },
1220
- ...u
1220
+ ...d
1221
1221
  }
1222
1222
  ),
1223
1223
  /* @__PURE__ */ e(
@@ -1226,10 +1226,10 @@ function yn({
1226
1226
  "aria-hidden": !0,
1227
1227
  style: {
1228
1228
  position: "relative",
1229
- width: g,
1230
- height: x,
1231
- borderRadius: x / 2,
1232
- background: r ? "var(--lucent-bg-muted)" : c ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)",
1229
+ width: p,
1230
+ height: v,
1231
+ borderRadius: v / 2,
1232
+ background: a ? "var(--lucent-bg-muted)" : c ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)",
1233
1233
  flexShrink: 0,
1234
1234
  transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)",
1235
1235
  animation: y > 0 ? `lucent-toggle-pop 240ms ${ee} forwards` : void 0
@@ -1240,9 +1240,9 @@ function yn({
1240
1240
  style: {
1241
1241
  position: "absolute",
1242
1242
  top: 2,
1243
- left: k,
1244
- width: I,
1245
- height: I,
1243
+ left: w,
1244
+ width: M,
1245
+ height: M,
1246
1246
  borderRadius: "50%",
1247
1247
  background: "#ffffff",
1248
1248
  boxShadow: "0 1px 3px rgb(0 0 0 / 0.2)",
@@ -1259,7 +1259,7 @@ function yn({
1259
1259
  )
1260
1260
  ] });
1261
1261
  }
1262
- const xn = {
1262
+ const Sn = {
1263
1263
  id: "toggle",
1264
1264
  name: "Toggle",
1265
1265
  tier: "atom",
@@ -1332,31 +1332,31 @@ const xn = {
1332
1332
  md: "var(--lucent-font-size-md)",
1333
1333
  lg: "var(--lucent-font-size-lg)"
1334
1334
  }, Ue = U(
1335
- ({ options: t, size: n = "md", label: a, helperText: o, errorText: r, placeholder: i, disabled: l, id: s, style: u, ...m }, b) => {
1336
- const d = s ?? `lucent-select-${Math.random().toString(36).slice(2, 7)}`, p = !!r;
1335
+ ({ options: t, size: n = "md", label: r, helperText: o, errorText: a, placeholder: i, disabled: l, id: s, style: d, ...m }, g) => {
1336
+ const u = s ?? `lucent-select-${Math.random().toString(36).slice(2, 7)}`, f = !!a;
1337
1337
  return /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%" }, children: [
1338
- a && /* @__PURE__ */ e(
1338
+ r && /* @__PURE__ */ e(
1339
1339
  "label",
1340
1340
  {
1341
- htmlFor: d,
1341
+ htmlFor: u,
1342
1342
  style: {
1343
1343
  fontSize: "var(--lucent-font-size-sm)",
1344
1344
  fontWeight: "var(--lucent-font-weight-medium)",
1345
1345
  color: "var(--lucent-text-primary)",
1346
1346
  fontFamily: "var(--lucent-font-family-base)"
1347
1347
  },
1348
- children: a
1348
+ children: r
1349
1349
  }
1350
1350
  ),
1351
1351
  /* @__PURE__ */ h("div", { style: { position: "relative", display: "flex", alignItems: "center" }, children: [
1352
1352
  /* @__PURE__ */ h(
1353
1353
  "select",
1354
1354
  {
1355
- ref: b,
1356
- id: d,
1355
+ ref: g,
1356
+ id: u,
1357
1357
  disabled: l,
1358
- "aria-invalid": p,
1359
- "aria-describedby": p ? `${d}-error` : o ? `${d}-helper` : void 0,
1358
+ "aria-invalid": f,
1359
+ "aria-describedby": f ? `${u}-error` : o ? `${u}-helper` : void 0,
1360
1360
  style: {
1361
1361
  width: "100%",
1362
1362
  height: He[n],
@@ -1365,30 +1365,30 @@ const xn = {
1365
1365
  fontFamily: "var(--lucent-font-family-base)",
1366
1366
  color: "var(--lucent-text-primary)",
1367
1367
  background: "var(--lucent-surface-default)",
1368
- border: `1px solid ${p ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"}`,
1368
+ border: `1px solid ${f ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"}`,
1369
1369
  borderRadius: "var(--lucent-radius-lg)",
1370
1370
  outline: "none",
1371
1371
  boxSizing: "border-box",
1372
1372
  appearance: "none",
1373
1373
  cursor: l ? "not-allowed" : "pointer",
1374
1374
  transition: "border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
1375
- ...u
1375
+ ...d
1376
1376
  },
1377
1377
  onMouseEnter: (c) => {
1378
- var v;
1379
- !l && c.currentTarget !== document.activeElement && (c.currentTarget.style.borderColor = p ? "var(--lucent-danger-default)" : "var(--lucent-border-strong)"), (v = m.onMouseEnter) == null || v.call(m, c);
1378
+ var x;
1379
+ !l && c.currentTarget !== document.activeElement && (c.currentTarget.style.borderColor = f ? "var(--lucent-danger-default)" : "var(--lucent-border-strong)"), (x = m.onMouseEnter) == null || x.call(m, c);
1380
1380
  },
1381
1381
  onMouseLeave: (c) => {
1382
- var v;
1383
- !l && c.currentTarget !== document.activeElement && (c.currentTarget.style.borderColor = p ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"), (v = m.onMouseLeave) == null || v.call(m, c);
1382
+ var x;
1383
+ !l && c.currentTarget !== document.activeElement && (c.currentTarget.style.borderColor = f ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"), (x = m.onMouseLeave) == null || x.call(m, c);
1384
1384
  },
1385
1385
  onFocus: (c) => {
1386
- var v;
1387
- c.currentTarget.style.borderColor = p ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", c.currentTarget.style.boxShadow = `0 0 0 3px ${p ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (v = m.onFocus) == null || v.call(m, c);
1386
+ var x;
1387
+ c.currentTarget.style.borderColor = f ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", c.currentTarget.style.boxShadow = `0 0 0 3px ${f ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (x = m.onFocus) == null || x.call(m, c);
1388
1388
  },
1389
1389
  onBlur: (c) => {
1390
- var v;
1391
- c.currentTarget.style.borderColor = p ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", c.currentTarget.style.boxShadow = "none", (v = m.onBlur) == null || v.call(m, c);
1390
+ var x;
1391
+ c.currentTarget.style.borderColor = f ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", c.currentTarget.style.boxShadow = "none", (x = m.onBlur) == null || x.call(m, c);
1392
1392
  },
1393
1393
  ...m,
1394
1394
  children: [
@@ -1413,23 +1413,23 @@ const xn = {
1413
1413
  }
1414
1414
  )
1415
1415
  ] }),
1416
- p && /* @__PURE__ */ e(
1416
+ f && /* @__PURE__ */ e(
1417
1417
  "span",
1418
1418
  {
1419
- id: `${d}-error`,
1419
+ id: `${u}-error`,
1420
1420
  role: "alert",
1421
1421
  style: {
1422
1422
  fontSize: "var(--lucent-font-size-sm)",
1423
1423
  color: "var(--lucent-danger-text)",
1424
1424
  fontFamily: "var(--lucent-font-family-base)"
1425
1425
  },
1426
- children: r
1426
+ children: a
1427
1427
  }
1428
1428
  ),
1429
- !p && o && /* @__PURE__ */ e(
1429
+ !f && o && /* @__PURE__ */ e(
1430
1430
  "span",
1431
1431
  {
1432
- id: `${d}-helper`,
1432
+ id: `${u}-helper`,
1433
1433
  style: {
1434
1434
  fontSize: "var(--lucent-font-size-sm)",
1435
1435
  color: "var(--lucent-text-secondary)",
@@ -1442,7 +1442,7 @@ const xn = {
1442
1442
  }
1443
1443
  );
1444
1444
  Ue.displayName = "Select";
1445
- const wn = {
1445
+ const Tn = {
1446
1446
  id: "select",
1447
1447
  name: "Select",
1448
1448
  tier: "atom",
@@ -1551,8 +1551,8 @@ const wn = {
1551
1551
  sm: { fontSize: "var(--lucent-font-size-xs)", height: "20px", padding: "0 var(--lucent-space-2)", iconSize: 10, gap: "var(--lucent-space-1)" },
1552
1552
  md: { fontSize: "var(--lucent-font-size-sm)", height: "24px", padding: "0 var(--lucent-space-2)", iconSize: 12, gap: "var(--lucent-space-1)" }
1553
1553
  };
1554
- function kn({ children: t, variant: n = "neutral", size: a = "md", onDismiss: o, disabled: r }) {
1555
- const i = Ge[n], l = _e[a];
1554
+ function Cn({ children: t, variant: n = "neutral", size: r = "md", onDismiss: o, disabled: a }) {
1555
+ const i = Ge[n], l = _e[r];
1556
1556
  return /* @__PURE__ */ h(
1557
1557
  "span",
1558
1558
  {
@@ -1572,7 +1572,7 @@ function kn({ children: t, variant: n = "neutral", size: a = "md", onDismiss: o,
1572
1572
  border: `1px solid ${i.border}`,
1573
1573
  whiteSpace: "nowrap",
1574
1574
  boxSizing: "border-box",
1575
- opacity: r ? 0.5 : 1
1575
+ opacity: a ? 0.5 : 1
1576
1576
  },
1577
1577
  children: [
1578
1578
  t,
@@ -1580,8 +1580,8 @@ function kn({ children: t, variant: n = "neutral", size: a = "md", onDismiss: o,
1580
1580
  "button",
1581
1581
  {
1582
1582
  type: "button",
1583
- onClick: r ? void 0 : o,
1584
- disabled: r,
1583
+ onClick: a ? void 0 : o,
1584
+ disabled: a,
1585
1585
  "aria-label": "Dismiss",
1586
1586
  style: {
1587
1587
  display: "inline-flex",
@@ -1594,12 +1594,12 @@ function kn({ children: t, variant: n = "neutral", size: a = "md", onDismiss: o,
1594
1594
  borderRadius: "var(--lucent-radius-full)",
1595
1595
  background: "transparent",
1596
1596
  color: "inherit",
1597
- cursor: r ? "not-allowed" : "pointer",
1597
+ cursor: a ? "not-allowed" : "pointer",
1598
1598
  flexShrink: 0,
1599
1599
  lineHeight: 1
1600
1600
  },
1601
1601
  onMouseEnter: (s) => {
1602
- r || (s.currentTarget.style.background = i.dismissHover + "33");
1602
+ a || (s.currentTarget.style.background = i.dismissHover + "33");
1603
1603
  },
1604
1604
  onMouseLeave: (s) => {
1605
1605
  s.currentTarget.style.background = "transparent";
@@ -1611,7 +1611,7 @@ function kn({ children: t, variant: n = "neutral", size: a = "md", onDismiss: o,
1611
1611
  }
1612
1612
  );
1613
1613
  }
1614
- const Sn = {
1614
+ const In = {
1615
1615
  id: "tag",
1616
1616
  name: "Tag",
1617
1617
  tier: "atom",
@@ -1668,45 +1668,45 @@ const Sn = {
1668
1668
  notes: 'The dismiss button has aria-label="Dismiss" and is keyboard-focusable.',
1669
1669
  keyboardInteractions: ["Enter / Space — activates the dismiss button when focused"]
1670
1670
  }
1671
- }, A = 5, Ye = {
1672
- top: { bottom: "100%", left: "50%", transform: "translateX(-50%)", marginBottom: A + 3 },
1673
- bottom: { top: "100%", left: "50%", transform: "translateX(-50%)", marginTop: A + 3 },
1674
- left: { right: "100%", top: "50%", transform: "translateY(-50%)", marginRight: A + 3 },
1675
- right: { left: "100%", top: "50%", transform: "translateY(-50%)", marginLeft: A + 3 }
1671
+ }, N = 5, Ye = {
1672
+ top: { bottom: "100%", left: "50%", transform: "translateX(-50%)", marginBottom: N + 3 },
1673
+ bottom: { top: "100%", left: "50%", transform: "translateX(-50%)", marginTop: N + 3 },
1674
+ left: { right: "100%", top: "50%", transform: "translateY(-50%)", marginRight: N + 3 },
1675
+ right: { left: "100%", top: "50%", transform: "translateY(-50%)", marginLeft: N + 3 }
1676
1676
  }, Ke = {
1677
1677
  top: {
1678
- bottom: -A,
1678
+ bottom: -N,
1679
1679
  left: "50%",
1680
1680
  transform: "translateX(-50%)",
1681
- borderWidth: `${A}px ${A}px 0 ${A}px`,
1681
+ borderWidth: `${N}px ${N}px 0 ${N}px`,
1682
1682
  borderColor: "var(--lucent-text-primary) transparent transparent transparent"
1683
1683
  },
1684
1684
  bottom: {
1685
- top: -A,
1685
+ top: -N,
1686
1686
  left: "50%",
1687
1687
  transform: "translateX(-50%)",
1688
- borderWidth: `0 ${A}px ${A}px ${A}px`,
1688
+ borderWidth: `0 ${N}px ${N}px ${N}px`,
1689
1689
  borderColor: "transparent transparent var(--lucent-text-primary) transparent"
1690
1690
  },
1691
1691
  left: {
1692
- right: -A,
1692
+ right: -N,
1693
1693
  top: "50%",
1694
1694
  transform: "translateY(-50%)",
1695
- borderWidth: `${A}px 0 ${A}px ${A}px`,
1695
+ borderWidth: `${N}px 0 ${N}px ${N}px`,
1696
1696
  borderColor: "transparent transparent transparent var(--lucent-text-primary)"
1697
1697
  },
1698
1698
  right: {
1699
- left: -A,
1699
+ left: -N,
1700
1700
  top: "50%",
1701
1701
  transform: "translateY(-50%)",
1702
- borderWidth: `${A}px ${A}px ${A}px 0`,
1702
+ borderWidth: `${N}px ${N}px ${N}px 0`,
1703
1703
  borderColor: "transparent var(--lucent-text-primary) transparent transparent"
1704
1704
  }
1705
1705
  };
1706
- function Tn({ content: t, children: n, placement: a = "top", delay: o = 300 }) {
1707
- const [r, i] = M(!1), l = F(null), s = () => {
1706
+ function Mn({ content: t, children: n, placement: r = "top", delay: o = 300 }) {
1707
+ const [a, i] = q(!1), l = B(null), s = () => {
1708
1708
  l.current = setTimeout(() => i(!0), o);
1709
- }, u = () => {
1709
+ }, d = () => {
1710
1710
  l.current && clearTimeout(l.current), i(!1);
1711
1711
  };
1712
1712
  return t ? /* @__PURE__ */ h(
@@ -1714,18 +1714,18 @@ function Tn({ content: t, children: n, placement: a = "top", delay: o = 300 }) {
1714
1714
  {
1715
1715
  style: { position: "relative", display: "inline-flex" },
1716
1716
  onMouseEnter: s,
1717
- onMouseLeave: u,
1717
+ onMouseLeave: d,
1718
1718
  onFocus: s,
1719
- onBlur: u,
1719
+ onBlur: d,
1720
1720
  children: [
1721
1721
  n,
1722
- r && /* @__PURE__ */ h(
1722
+ a && /* @__PURE__ */ h(
1723
1723
  "span",
1724
1724
  {
1725
1725
  role: "tooltip",
1726
1726
  style: {
1727
1727
  position: "absolute",
1728
- ...Ye[a],
1728
+ ...Ye[r],
1729
1729
  background: "var(--lucent-text-primary)",
1730
1730
  color: "var(--lucent-bg-base)",
1731
1731
  padding: "5px 10px",
@@ -1750,7 +1750,7 @@ function Tn({ content: t, children: n, placement: a = "top", delay: o = 300 }) {
1750
1750
  width: 0,
1751
1751
  height: 0,
1752
1752
  borderStyle: "solid",
1753
- ...Ke[a]
1753
+ ...Ke[r]
1754
1754
  }
1755
1755
  }
1756
1756
  )
@@ -1759,9 +1759,9 @@ function Tn({ content: t, children: n, placement: a = "top", delay: o = 300 }) {
1759
1759
  )
1760
1760
  ]
1761
1761
  }
1762
- ) : /* @__PURE__ */ e(W, { children: n });
1762
+ ) : /* @__PURE__ */ e(P, { children: n });
1763
1763
  }
1764
- const Cn = {
1764
+ const zn = {
1765
1765
  id: "tooltip",
1766
1766
  name: "Tooltip",
1767
1767
  tier: "atom",
@@ -1817,14 +1817,14 @@ const Cn = {
1817
1817
  lg: 20,
1818
1818
  xl: 24
1819
1819
  };
1820
- function In({ children: t, size: n = "md", label: a, color: o, style: r }) {
1820
+ function En({ children: t, size: n = "md", label: r, color: o, style: a }) {
1821
1821
  const i = Xe[n];
1822
1822
  return /* @__PURE__ */ e(
1823
1823
  "span",
1824
1824
  {
1825
- role: a ? "img" : void 0,
1826
- "aria-label": a,
1827
- "aria-hidden": a ? void 0 : !0,
1825
+ role: r ? "img" : void 0,
1826
+ "aria-label": r,
1827
+ "aria-hidden": r ? void 0 : !0,
1828
1828
  style: {
1829
1829
  display: "inline-flex",
1830
1830
  alignItems: "center",
@@ -1833,13 +1833,13 @@ function In({ children: t, size: n = "md", label: a, color: o, style: r }) {
1833
1833
  height: i,
1834
1834
  flexShrink: 0,
1835
1835
  color: o ?? "currentColor",
1836
- ...r
1836
+ ...a
1837
1837
  },
1838
1838
  children: t
1839
1839
  }
1840
1840
  );
1841
1841
  }
1842
- const Mn = {
1842
+ const qn = {
1843
1843
  id: "icon",
1844
1844
  name: "Icon",
1845
1845
  tier: "atom",
@@ -1919,24 +1919,24 @@ const Mn = {
1919
1919
  mono: "var(--lucent-font-family-mono)",
1920
1920
  display: "var(--lucent-font-family-display)"
1921
1921
  };
1922
- function E({
1922
+ function A({
1923
1923
  as: t = "p",
1924
1924
  size: n = "md",
1925
- weight: a = "regular",
1925
+ weight: r = "regular",
1926
1926
  color: o = "primary",
1927
- align: r = "left",
1927
+ align: a = "left",
1928
1928
  lineHeight: i = "base",
1929
1929
  family: l = "base",
1930
1930
  truncate: s = !1,
1931
- children: u,
1931
+ children: d,
1932
1932
  style: m,
1933
- ...b
1933
+ ...g
1934
1934
  }) {
1935
- const d = {
1935
+ const u = {
1936
1936
  fontSize: Qe[n],
1937
- fontWeight: Ze[a],
1937
+ fontWeight: Ze[r],
1938
1938
  color: Je[o],
1939
- textAlign: r,
1939
+ textAlign: a,
1940
1940
  lineHeight: et[i],
1941
1941
  fontFamily: tt[l],
1942
1942
  margin: 0,
@@ -1947,9 +1947,9 @@ function E({
1947
1947
  },
1948
1948
  ...m
1949
1949
  };
1950
- return /* @__PURE__ */ e(t, { style: d, ...b, children: u });
1950
+ return /* @__PURE__ */ e(t, { style: u, ...g, children: d });
1951
1951
  }
1952
- const zn = {
1952
+ const An = {
1953
1953
  id: "text",
1954
1954
  name: "Text",
1955
1955
  tier: "atom",
@@ -2047,12 +2047,12 @@ const zn = {
2047
2047
  notes: 'The rendered element determines the implicit ARIA role. Use heading elements (h1–h6) for document headings so screen readers can navigate the page structure. Use `as="label"` with `htmlFor` to associate labels with form controls. Decorative text needs no additional ARIA.'
2048
2048
  }
2049
2049
  };
2050
- function qn({
2050
+ function Dn({
2051
2051
  children: t,
2052
2052
  href: n,
2053
- isActive: a = !1,
2053
+ isActive: r = !1,
2054
2054
  icon: o,
2055
- disabled: r = !1,
2055
+ disabled: a = !1,
2056
2056
  onClick: i,
2057
2057
  as: l,
2058
2058
  style: s
@@ -2060,33 +2060,33 @@ function qn({
2060
2060
  return /* @__PURE__ */ h(
2061
2061
  l ?? "a",
2062
2062
  {
2063
- href: r ? void 0 : n,
2064
- onClick: r ? void 0 : i,
2065
- "aria-current": a ? "page" : void 0,
2066
- "aria-disabled": r || void 0,
2063
+ href: a ? void 0 : n,
2064
+ onClick: a ? void 0 : i,
2065
+ "aria-current": r ? "page" : void 0,
2066
+ "aria-disabled": a || void 0,
2067
2067
  style: {
2068
2068
  display: "flex",
2069
2069
  alignItems: "center",
2070
2070
  gap: "var(--lucent-space-2)",
2071
2071
  padding: "var(--lucent-space-2) var(--lucent-space-3) var(--lucent-space-2) var(--lucent-space-4)",
2072
2072
  borderRadius: "var(--lucent-radius-md)",
2073
- background: r ? "transparent" : a ? "var(--lucent-accent-default)" : "transparent",
2074
- color: r ? "var(--lucent-text-disabled)" : a ? "var(--lucent-text-on-accent)" : "var(--lucent-text-secondary)",
2073
+ background: a ? "transparent" : r ? "var(--lucent-accent-default)" : "transparent",
2074
+ color: a ? "var(--lucent-text-disabled)" : r ? "var(--lucent-text-on-accent)" : "var(--lucent-text-secondary)",
2075
2075
  fontFamily: "var(--lucent-font-family-base)",
2076
2076
  fontSize: "var(--lucent-font-size-md)",
2077
- fontWeight: a ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
2077
+ fontWeight: r ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
2078
2078
  textDecoration: "none",
2079
- cursor: r ? "not-allowed" : "pointer",
2079
+ cursor: a ? "not-allowed" : "pointer",
2080
2080
  transition: "background var(--lucent-duration-fast) var(--lucent-easing-default), color var(--lucent-duration-fast) var(--lucent-easing-default)",
2081
2081
  userSelect: "none",
2082
2082
  boxSizing: "border-box",
2083
2083
  ...s
2084
2084
  },
2085
2085
  onMouseEnter: (m) => {
2086
- !r && !a && (m.currentTarget.style.background = "var(--lucent-bg-muted)");
2086
+ !a && !r && (m.currentTarget.style.background = "var(--lucent-bg-muted)");
2087
2087
  },
2088
2088
  onMouseLeave: (m) => {
2089
- !r && !a && (m.currentTarget.style.background = "transparent");
2089
+ !a && !r && (m.currentTarget.style.background = "transparent");
2090
2090
  },
2091
2091
  children: [
2092
2092
  o != null && /* @__PURE__ */ e("span", { style: { display: "flex", flexShrink: 0, color: "inherit" }, children: o }),
@@ -2095,7 +2095,7 @@ function qn({
2095
2095
  }
2096
2096
  );
2097
2097
  }
2098
- const nt = { sm: "3px", md: "4px", lg: "5px" }, at = { sm: "14px", md: "18px", lg: "22px" }, rt = `
2098
+ const nt = { sm: "3px", md: "4px", lg: "5px" }, rt = { sm: "14px", md: "18px", lg: "22px" }, at = `
2099
2099
  .lucent-slider {
2100
2100
  -webkit-appearance: none;
2101
2101
  appearance: none;
@@ -2189,28 +2189,28 @@ const nt = { sm: "3px", md: "4px", lg: "5px" }, at = { sm: "14px", md: "18px", l
2189
2189
  cursor: not-allowed;
2190
2190
  }
2191
2191
  `;
2192
- function En({
2192
+ function Fn({
2193
2193
  label: t,
2194
2194
  showValue: n = !1,
2195
- size: a = "md",
2195
+ size: r = "md",
2196
2196
  min: o = 0,
2197
- max: r = 100,
2197
+ max: a = 100,
2198
2198
  step: i = 1,
2199
2199
  value: l,
2200
2200
  defaultValue: s,
2201
- disabled: u,
2201
+ disabled: d,
2202
2202
  id: m,
2203
- onChange: b,
2204
- style: d,
2205
- ...p
2203
+ onChange: g,
2204
+ style: u,
2205
+ ...f
2206
2206
  }) {
2207
- const c = m ?? `lucent-slider-${Math.random().toString(36).slice(2, 7)}`, v = l !== void 0, [y, w] = M(
2208
- s ?? Math.round((o + r) / 2)
2209
- ), g = v ? l : y, x = `${(g - o) / (r - o) * 100}%`, I = (k) => {
2210
- v || w(Number(k.target.value)), b == null || b(k);
2207
+ const c = m ?? `lucent-slider-${Math.random().toString(36).slice(2, 7)}`, x = l !== void 0, [y, b] = q(
2208
+ s ?? Math.round((o + a) / 2)
2209
+ ), p = x ? l : y, v = `${(p - o) / (a - o) * 100}%`, M = (w) => {
2210
+ x || b(Number(w.target.value)), g == null || g(w);
2211
2211
  };
2212
- return /* @__PURE__ */ h(W, { children: [
2213
- /* @__PURE__ */ e("style", { children: rt }),
2212
+ return /* @__PURE__ */ h(P, { children: [
2213
+ /* @__PURE__ */ e("style", { children: at }),
2214
2214
  /* @__PURE__ */ h(
2215
2215
  "div",
2216
2216
  {
@@ -2220,7 +2220,7 @@ function En({
2220
2220
  gap: "var(--lucent-space-1)",
2221
2221
  width: "100%",
2222
2222
  fontFamily: "var(--lucent-font-family-base)",
2223
- ...d
2223
+ ...u
2224
2224
  },
2225
2225
  children: [
2226
2226
  (t || n) && /* @__PURE__ */ h(
@@ -2239,8 +2239,8 @@ function En({
2239
2239
  style: {
2240
2240
  fontSize: "var(--lucent-font-size-sm)",
2241
2241
  fontWeight: "var(--lucent-font-weight-medium)",
2242
- color: u ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
2243
- cursor: u ? "not-allowed" : "default"
2242
+ color: d ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
2243
+ cursor: d ? "not-allowed" : "default"
2244
2244
  },
2245
2245
  children: t
2246
2246
  }
@@ -2250,10 +2250,10 @@ function En({
2250
2250
  {
2251
2251
  style: {
2252
2252
  fontSize: "var(--lucent-font-size-sm)",
2253
- color: u ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
2253
+ color: d ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
2254
2254
  fontVariantNumeric: "tabular-nums"
2255
2255
  },
2256
- children: g
2256
+ children: p
2257
2257
  }
2258
2258
  )
2259
2259
  ]
@@ -2266,17 +2266,17 @@ function En({
2266
2266
  id: c,
2267
2267
  className: "lucent-slider",
2268
2268
  min: o,
2269
- max: r,
2269
+ max: a,
2270
2270
  step: i,
2271
- disabled: u,
2272
- value: v ? l : y,
2273
- onChange: I,
2271
+ disabled: d,
2272
+ value: x ? l : y,
2273
+ onChange: M,
2274
2274
  style: {
2275
- "--ls-track-h": nt[a],
2276
- "--ls-thumb": at[a],
2277
- "--ls-fill": x
2275
+ "--ls-track-h": nt[r],
2276
+ "--ls-thumb": rt[r],
2277
+ "--ls-fill": v
2278
2278
  },
2279
- ...p
2279
+ ...f
2280
2280
  }
2281
2281
  )
2282
2282
  ]
@@ -2284,7 +2284,7 @@ function En({
2284
2284
  )
2285
2285
  ] });
2286
2286
  }
2287
- const Dn = {
2287
+ const Bn = {
2288
2288
  id: "slider",
2289
2289
  name: "Slider",
2290
2290
  tier: "atom",
@@ -2390,19 +2390,19 @@ function it() {
2390
2390
  function lt() {
2391
2391
  return /* @__PURE__ */ e("svg", { width: 13, height: 13, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, children: /* @__PURE__ */ e("path", { d: "M20 6L9 17l-5-5" }) });
2392
2392
  }
2393
- function An({
2393
+ function Rn({
2394
2394
  code: t,
2395
2395
  language: n,
2396
- tabs: a,
2396
+ tabs: r,
2397
2397
  variant: o = "code",
2398
- helperText: r,
2398
+ helperText: a,
2399
2399
  showCopyButton: i = !0,
2400
2400
  style: l
2401
2401
  }) {
2402
- var g, x;
2403
- const s = !!(a != null && a.length), [u, m] = M(0), [b, d] = M(!1), p = s ? ((g = a[u]) == null ? void 0 : g.code) ?? "" : t ?? "", c = s ? (x = a[u]) == null ? void 0 : x.language : n, v = async () => {
2402
+ var p, v;
2403
+ const s = !!(r != null && r.length), [d, m] = q(0), [g, u] = q(!1), f = s ? ((p = r[d]) == null ? void 0 : p.code) ?? "" : t ?? "", c = s ? (v = r[d]) == null ? void 0 : v.language : n, x = async () => {
2404
2404
  try {
2405
- await navigator.clipboard.writeText(p), d(!0), setTimeout(() => d(!1), ot);
2405
+ await navigator.clipboard.writeText(f), u(!0), setTimeout(() => u(!1), ot);
2406
2406
  } catch {
2407
2407
  }
2408
2408
  }, y = {
@@ -2413,27 +2413,27 @@ function An({
2413
2413
  border: "1px solid transparent",
2414
2414
  borderRadius: "var(--lucent-radius-md)",
2415
2415
  background: "transparent",
2416
- color: b ? "var(--lucent-success-default)" : "var(--lucent-text-secondary)",
2416
+ color: g ? "var(--lucent-success-default)" : "var(--lucent-text-secondary)",
2417
2417
  fontFamily: "var(--lucent-font-family-base)",
2418
2418
  fontSize: "var(--lucent-font-size-xs)",
2419
2419
  cursor: "pointer",
2420
2420
  flexShrink: 0,
2421
2421
  transition: "color var(--lucent-duration-fast) var(--lucent-easing-default), background var(--lucent-duration-fast) var(--lucent-easing-default)"
2422
- }, w = () => /* @__PURE__ */ h(
2422
+ }, b = () => /* @__PURE__ */ h(
2423
2423
  "button",
2424
2424
  {
2425
- onClick: v,
2426
- "aria-label": b ? "Copied!" : "Copy code",
2425
+ onClick: x,
2426
+ "aria-label": g ? "Copied!" : "Copy code",
2427
2427
  style: y,
2428
- onMouseEnter: (I) => {
2429
- b || (I.currentTarget.style.background = "var(--lucent-bg-hover)", I.currentTarget.style.color = "var(--lucent-text-primary)");
2428
+ onMouseEnter: (M) => {
2429
+ g || (M.currentTarget.style.background = "var(--lucent-bg-hover)", M.currentTarget.style.color = "var(--lucent-text-primary)");
2430
2430
  },
2431
- onMouseLeave: (I) => {
2432
- b || (I.currentTarget.style.background = "transparent", I.currentTarget.style.color = "var(--lucent-text-secondary)");
2431
+ onMouseLeave: (M) => {
2432
+ g || (M.currentTarget.style.background = "transparent", M.currentTarget.style.color = "var(--lucent-text-secondary)");
2433
2433
  },
2434
2434
  children: [
2435
- b ? /* @__PURE__ */ e(lt, {}) : /* @__PURE__ */ e(it, {}),
2436
- b ? "Copied!" : "Copy"
2435
+ g ? /* @__PURE__ */ e(lt, {}) : /* @__PURE__ */ e(it, {}),
2436
+ g ? "Copied!" : "Copy"
2437
2437
  ]
2438
2438
  }
2439
2439
  );
@@ -2457,13 +2457,13 @@ function An({
2457
2457
  borderBottom: "1px solid var(--lucent-border-default)",
2458
2458
  padding: "0 var(--lucent-space-2)"
2459
2459
  },
2460
- children: a.map((I, k) => {
2461
- const f = k === u;
2460
+ children: r.map((M, w) => {
2461
+ const S = w === d;
2462
2462
  return /* @__PURE__ */ h(
2463
2463
  "button",
2464
2464
  {
2465
2465
  onClick: () => {
2466
- m(k), d(!1);
2466
+ m(w), u(!1);
2467
2467
  },
2468
2468
  style: {
2469
2469
  display: "inline-flex",
@@ -2471,29 +2471,29 @@ function An({
2471
2471
  gap: "var(--lucent-space-1)",
2472
2472
  padding: "var(--lucent-space-2) var(--lucent-space-3)",
2473
2473
  border: "none",
2474
- borderBottom: f ? "2px solid var(--lucent-accent-default)" : "2px solid transparent",
2474
+ borderBottom: S ? "2px solid var(--lucent-accent-default)" : "2px solid transparent",
2475
2475
  marginBottom: -1,
2476
2476
  background: "transparent",
2477
- color: f ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
2477
+ color: S ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
2478
2478
  fontFamily: "var(--lucent-font-family-base)",
2479
2479
  fontSize: "var(--lucent-font-size-sm)",
2480
- fontWeight: f ? "var(--lucent-font-weight-semibold)" : "var(--lucent-font-weight-regular)",
2480
+ fontWeight: S ? "var(--lucent-font-weight-semibold)" : "var(--lucent-font-weight-regular)",
2481
2481
  cursor: "pointer",
2482
2482
  transition: "color var(--lucent-duration-fast) var(--lucent-easing-default)",
2483
2483
  whiteSpace: "nowrap"
2484
2484
  },
2485
- onMouseEnter: (S) => {
2486
- f || (S.currentTarget.style.color = "var(--lucent-text-primary)");
2485
+ onMouseEnter: (E) => {
2486
+ S || (E.currentTarget.style.color = "var(--lucent-text-primary)");
2487
2487
  },
2488
- onMouseLeave: (S) => {
2489
- f || (S.currentTarget.style.color = "var(--lucent-text-secondary)");
2488
+ onMouseLeave: (E) => {
2489
+ S || (E.currentTarget.style.color = "var(--lucent-text-secondary)");
2490
2490
  },
2491
2491
  children: [
2492
- I.icon !== void 0 && /* @__PURE__ */ e("span", { style: { display: "inline-flex", alignItems: "center" }, children: I.icon }),
2493
- I.label
2492
+ M.icon !== void 0 && /* @__PURE__ */ e("span", { style: { display: "inline-flex", alignItems: "center" }, children: M.icon }),
2493
+ M.label
2494
2494
  ]
2495
2495
  },
2496
- I.label
2496
+ M.label
2497
2497
  );
2498
2498
  })
2499
2499
  }
@@ -2523,11 +2523,11 @@ function An({
2523
2523
  children: c
2524
2524
  }
2525
2525
  ),
2526
- i && /* @__PURE__ */ e(w, {})
2526
+ i && /* @__PURE__ */ e(b, {})
2527
2527
  ]
2528
2528
  }
2529
2529
  ),
2530
- r && /* @__PURE__ */ e(
2530
+ a && /* @__PURE__ */ e(
2531
2531
  "div",
2532
2532
  {
2533
2533
  style: {
@@ -2538,7 +2538,7 @@ function An({
2538
2538
  background: "var(--lucent-bg-muted)",
2539
2539
  borderBottom: "1px solid var(--lucent-border-default)"
2540
2540
  },
2541
- children: r
2541
+ children: a
2542
2542
  }
2543
2543
  ),
2544
2544
  o === "code" ? /* @__PURE__ */ h("div", { style: { position: "relative" }, children: [
@@ -2561,12 +2561,12 @@ function An({
2561
2561
  fontSize: "var(--lucent-font-size-sm)",
2562
2562
  color: "var(--lucent-text-primary)"
2563
2563
  },
2564
- children: p
2564
+ children: f
2565
2565
  }
2566
2566
  )
2567
2567
  }
2568
2568
  ),
2569
- s && i && /* @__PURE__ */ e("div", { style: { position: "absolute", top: "var(--lucent-space-2)", right: "var(--lucent-space-3)" }, children: /* @__PURE__ */ e(w, {}) })
2569
+ s && i && /* @__PURE__ */ e("div", { style: { position: "absolute", top: "var(--lucent-space-2)", right: "var(--lucent-space-3)" }, children: /* @__PURE__ */ e(b, {}) })
2570
2570
  ] }) : (
2571
2571
  /* ── Prompt area ── */
2572
2572
  /* @__PURE__ */ h(
@@ -2592,10 +2592,10 @@ function An({
2592
2592
  fontSize: "var(--lucent-font-size-sm)",
2593
2593
  color: "var(--lucent-text-primary)"
2594
2594
  },
2595
- children: p
2595
+ children: f
2596
2596
  }
2597
2597
  ),
2598
- i && /* @__PURE__ */ e(w, {})
2598
+ i && /* @__PURE__ */ e(b, {})
2599
2599
  ]
2600
2600
  }
2601
2601
  )
@@ -2604,7 +2604,7 @@ function An({
2604
2604
  }
2605
2605
  );
2606
2606
  }
2607
- const Fn = {
2607
+ const Nn = {
2608
2608
  id: "code-block",
2609
2609
  name: "CodeBlock",
2610
2610
  tier: "atom",
@@ -2696,7 +2696,7 @@ const Fn = {
2696
2696
  background: var(--lucent-bg-muted);
2697
2697
  }
2698
2698
  `;
2699
- function ct({ children: t, style: n, ...a }) {
2699
+ function ct({ children: t, style: n, ...r }) {
2700
2700
  return /* @__PURE__ */ e(
2701
2701
  "thead",
2702
2702
  {
@@ -2704,7 +2704,7 @@ function ct({ children: t, style: n, ...a }) {
2704
2704
  background: "var(--lucent-bg-muted)",
2705
2705
  ...n
2706
2706
  },
2707
- ...a,
2707
+ ...r,
2708
2708
  children: t
2709
2709
  }
2710
2710
  );
@@ -2712,7 +2712,7 @@ function ct({ children: t, style: n, ...a }) {
2712
2712
  function dt({ children: t, ...n }) {
2713
2713
  return /* @__PURE__ */ e("tbody", { ...n, children: t });
2714
2714
  }
2715
- function ut({ children: t, style: n, ...a }) {
2715
+ function ut({ children: t, style: n, ...r }) {
2716
2716
  return /* @__PURE__ */ e(
2717
2717
  "tfoot",
2718
2718
  {
@@ -2720,43 +2720,43 @@ function ut({ children: t, style: n, ...a }) {
2720
2720
  background: "var(--lucent-bg-muted)",
2721
2721
  ...n
2722
2722
  },
2723
- ...a,
2723
+ ...r,
2724
2724
  children: t
2725
2725
  }
2726
2726
  );
2727
2727
  }
2728
- function pt({ children: t, className: n, ...a }) {
2728
+ function pt({ children: t, className: n, ...r }) {
2729
2729
  return /* @__PURE__ */ e(
2730
2730
  "tr",
2731
2731
  {
2732
2732
  className: ["lucent-table-row", n].filter(Boolean).join(" "),
2733
- ...a,
2733
+ ...r,
2734
2734
  children: t
2735
2735
  }
2736
2736
  );
2737
2737
  }
2738
- function ft({ as: t, children: n, style: a, ...o }) {
2739
- const r = t === "th", i = {
2738
+ function ft({ as: t, children: n, style: r, ...o }) {
2739
+ const a = t === "th", i = {
2740
2740
  padding: "var(--lucent-space-3) var(--lucent-space-4)",
2741
2741
  fontFamily: "var(--lucent-font-family-base)",
2742
2742
  fontSize: "var(--lucent-font-size-sm)",
2743
2743
  borderBottom: "1px solid var(--lucent-border-default)",
2744
2744
  textAlign: "left",
2745
2745
  verticalAlign: "middle",
2746
- color: r ? "var(--lucent-text-secondary)" : "var(--lucent-text-primary)",
2747
- fontWeight: r ? "var(--lucent-font-weight-semibold)" : "var(--lucent-font-weight-regular)",
2748
- whiteSpace: r ? "nowrap" : void 0,
2749
- ...a
2746
+ color: a ? "var(--lucent-text-secondary)" : "var(--lucent-text-primary)",
2747
+ fontWeight: a ? "var(--lucent-font-weight-semibold)" : "var(--lucent-font-weight-regular)",
2748
+ whiteSpace: a ? "nowrap" : void 0,
2749
+ ...r
2750
2750
  };
2751
- return r ? /* @__PURE__ */ e("th", { scope: "col", style: i, ...o, children: n }) : /* @__PURE__ */ e("td", { style: i, ...o, children: n });
2751
+ return a ? /* @__PURE__ */ e("th", { scope: "col", style: i, ...o, children: n }) : /* @__PURE__ */ e("td", { style: i, ...o, children: n });
2752
2752
  }
2753
- function G({ striped: t = !1, children: n, className: a, style: o, ...r }) {
2753
+ function G({ striped: t = !1, children: n, className: r, style: o, ...a }) {
2754
2754
  const i = [
2755
2755
  "lucent-table",
2756
2756
  t && "lucent-table-striped",
2757
- a
2757
+ r
2758
2758
  ].filter(Boolean).join(" ");
2759
- return /* @__PURE__ */ h(W, { children: [
2759
+ return /* @__PURE__ */ h(P, { children: [
2760
2760
  /* @__PURE__ */ e("style", { children: st }),
2761
2761
  /* @__PURE__ */ e("div", { style: { overflowX: "auto", width: "100%" }, children: /* @__PURE__ */ e(
2762
2762
  "table",
@@ -2769,7 +2769,7 @@ function G({ striped: t = !1, children: n, className: a, style: o, ...r }) {
2769
2769
  fontSize: "var(--lucent-font-size-sm)",
2770
2770
  ...o
2771
2771
  },
2772
- ...r,
2772
+ ...a,
2773
2773
  children: n
2774
2774
  }
2775
2775
  ) })
@@ -2780,7 +2780,7 @@ G.Body = dt;
2780
2780
  G.Foot = ut;
2781
2781
  G.Row = pt;
2782
2782
  G.Cell = ft;
2783
- const Bn = {
2783
+ const Ln = {
2784
2784
  id: "table",
2785
2785
  name: "Table",
2786
2786
  tier: "atom",
@@ -2872,26 +2872,26 @@ const Bn = {
2872
2872
  keyboardInteractions: ["Standard browser table navigation"]
2873
2873
  }
2874
2874
  };
2875
- function Rn({
2875
+ function $n({
2876
2876
  label: t,
2877
2877
  htmlFor: n,
2878
- required: a = !1,
2878
+ required: r = !1,
2879
2879
  helperText: o,
2880
- errorMessage: r,
2880
+ errorMessage: a,
2881
2881
  children: i,
2882
2882
  style: l
2883
2883
  }) {
2884
- const s = r ?? o, u = r ? "danger" : "secondary";
2884
+ const s = a ?? o, d = a ? "danger" : "secondary";
2885
2885
  return /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)", ...l }, children: [
2886
2886
  t && /* @__PURE__ */ h("div", { style: { display: "flex", alignItems: "baseline", gap: "var(--lucent-space-1)" }, children: [
2887
- /* @__PURE__ */ e(E, { as: "label", size: "sm", weight: "medium", lineHeight: "tight", ...n !== void 0 && { htmlFor: n }, children: t }),
2888
- a && /* @__PURE__ */ e(E, { as: "span", size: "sm", color: "danger", lineHeight: "tight", "aria-hidden": "true", children: "*" })
2887
+ /* @__PURE__ */ e(A, { as: "label", size: "sm", weight: "medium", lineHeight: "tight", ...n !== void 0 && { htmlFor: n }, children: t }),
2888
+ r && /* @__PURE__ */ e(A, { as: "span", size: "sm", color: "danger", lineHeight: "tight", "aria-hidden": "true", children: "*" })
2889
2889
  ] }),
2890
2890
  i,
2891
- s && /* @__PURE__ */ e(E, { size: "xs", color: u, lineHeight: "tight", children: s })
2891
+ s && /* @__PURE__ */ e(A, { size: "xs", color: d, lineHeight: "tight", children: s })
2892
2892
  ] });
2893
2893
  }
2894
- const Nn = {
2894
+ const Wn = {
2895
2895
  id: "form-field",
2896
2896
  name: "FormField",
2897
2897
  tier: "molecule",
@@ -2981,26 +2981,26 @@ const Nn = {
2981
2981
  /* @__PURE__ */ e("circle", { cx: "6.5", cy: "6.5", r: "4", stroke: "currentColor", strokeWidth: "1.5" }),
2982
2982
  /* @__PURE__ */ e("path", { d: "M9.5 9.5L13 13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
2983
2983
  ] }), mt = () => /* @__PURE__ */ e("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ e("path", { d: "M3 3L11 11M11 3L3 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
2984
- function Ln({
2984
+ function Vn({
2985
2985
  value: t,
2986
2986
  onChange: n,
2987
- placeholder: a = "Search…",
2987
+ placeholder: r = "Search…",
2988
2988
  results: o = [],
2989
- onResultSelect: r,
2989
+ onResultSelect: a,
2990
2990
  isLoading: i = !1,
2991
2991
  disabled: l = !1,
2992
2992
  id: s,
2993
- style: u
2993
+ style: d
2994
2994
  }) {
2995
- const [m, b] = M(!1), [d, p] = M(null), c = F(null), v = m && o.length > 0, y = () => {
2995
+ const [m, g] = q(!1), [u, f] = q(null), c = B(null), x = m && o.length > 0, y = () => {
2996
2996
  n("");
2997
- }, w = (k) => {
2998
- r == null || r(k), b(!1);
2999
- }, g = () => {
3000
- c.current = setTimeout(() => b(!1), 150);
3001
- }, x = () => {
3002
- c.current && clearTimeout(c.current), b(!0);
3003
- }, I = i ? /* @__PURE__ */ e(Re, { size: "sm" }) : t ? /* @__PURE__ */ e(
2997
+ }, b = (w) => {
2998
+ a == null || a(w), g(!1);
2999
+ }, p = () => {
3000
+ c.current = setTimeout(() => g(!1), 150);
3001
+ }, v = () => {
3002
+ c.current && clearTimeout(c.current), g(!0);
3003
+ }, M = i ? /* @__PURE__ */ e(Re, { size: "sm" }) : t ? /* @__PURE__ */ e(
3004
3004
  "button",
3005
3005
  {
3006
3006
  type: "button",
@@ -3016,32 +3016,32 @@ function Ln({
3016
3016
  borderRadius: "var(--lucent-radius-sm)",
3017
3017
  color: "var(--lucent-text-secondary)"
3018
3018
  },
3019
- onMouseEnter: (k) => {
3020
- k.currentTarget.style.color = "var(--lucent-text-primary)";
3019
+ onMouseEnter: (w) => {
3020
+ w.currentTarget.style.color = "var(--lucent-text-primary)";
3021
3021
  },
3022
- onMouseLeave: (k) => {
3023
- k.currentTarget.style.color = "var(--lucent-text-secondary)";
3022
+ onMouseLeave: (w) => {
3023
+ w.currentTarget.style.color = "var(--lucent-text-secondary)";
3024
3024
  },
3025
3025
  children: /* @__PURE__ */ e(mt, {})
3026
3026
  }
3027
3027
  ) : null;
3028
- return /* @__PURE__ */ h("div", { style: { position: "relative", ...u }, children: [
3028
+ return /* @__PURE__ */ h("div", { style: { position: "relative", ...d }, children: [
3029
3029
  /* @__PURE__ */ e(
3030
3030
  de,
3031
3031
  {
3032
3032
  id: s,
3033
3033
  type: "search",
3034
3034
  value: t,
3035
- onChange: (k) => n(k.target.value),
3036
- placeholder: a,
3035
+ onChange: (w) => n(w.target.value),
3036
+ placeholder: r,
3037
3037
  disabled: l,
3038
3038
  leftElement: /* @__PURE__ */ e(ht, {}),
3039
- rightElement: I ?? void 0,
3040
- onFocus: x,
3041
- onBlur: g
3039
+ rightElement: M ?? void 0,
3040
+ onFocus: v,
3041
+ onBlur: p
3042
3042
  }
3043
3043
  ),
3044
- v && /* @__PURE__ */ e(
3044
+ x && /* @__PURE__ */ e(
3045
3045
  "div",
3046
3046
  {
3047
3047
  role: "listbox",
@@ -3057,29 +3057,29 @@ function Ln({
3057
3057
  boxShadow: "var(--lucent-shadow-md)",
3058
3058
  overflow: "hidden"
3059
3059
  },
3060
- children: o.map((k, f) => /* @__PURE__ */ e(
3060
+ children: o.map((w, S) => /* @__PURE__ */ e(
3061
3061
  "div",
3062
3062
  {
3063
3063
  role: "option",
3064
3064
  "aria-selected": !1,
3065
- onMouseDown: () => w(k),
3066
- onMouseEnter: () => p(f),
3067
- onMouseLeave: () => p(null),
3065
+ onMouseDown: () => b(w),
3066
+ onMouseEnter: () => f(S),
3067
+ onMouseLeave: () => f(null),
3068
3068
  style: {
3069
3069
  padding: "var(--lucent-space-2) var(--lucent-space-3)",
3070
3070
  cursor: "pointer",
3071
- background: d === f ? "var(--lucent-bg-subtle)" : "transparent",
3071
+ background: u === S ? "var(--lucent-bg-subtle)" : "transparent",
3072
3072
  transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)"
3073
3073
  },
3074
- children: /* @__PURE__ */ e(E, { as: "span", size: "md", children: k.label })
3074
+ children: /* @__PURE__ */ e(A, { as: "span", size: "md", children: w.label })
3075
3075
  },
3076
- k.id
3076
+ w.id
3077
3077
  ))
3078
3078
  }
3079
3079
  )
3080
3080
  ] });
3081
3081
  }
3082
- const $n = {
3082
+ const Pn = {
3083
3083
  id: "search-input",
3084
3084
  name: "SearchInput",
3085
3085
  tier: "molecule",
@@ -3191,16 +3191,16 @@ const [results, setResults] = useState([]);
3191
3191
  md: "var(--lucent-radius-md)",
3192
3192
  lg: "var(--lucent-radius-lg)"
3193
3193
  };
3194
- function Pn({
3194
+ function On({
3195
3195
  header: t,
3196
3196
  footer: n,
3197
- children: a,
3197
+ children: r,
3198
3198
  padding: o = "md",
3199
- shadow: r = "sm",
3199
+ shadow: a = "sm",
3200
3200
  radius: i = "md",
3201
3201
  style: l
3202
3202
  }) {
3203
- const s = gt[o], u = vt[i];
3203
+ const s = gt[o], d = vt[i];
3204
3204
  return /* @__PURE__ */ h(
3205
3205
  "div",
3206
3206
  {
@@ -3209,8 +3209,8 @@ function Pn({
3209
3209
  flexDirection: "column",
3210
3210
  background: "var(--lucent-surface-default)",
3211
3211
  border: "1px solid var(--lucent-border-default)",
3212
- borderRadius: u,
3213
- boxShadow: bt[r],
3212
+ borderRadius: d,
3213
+ boxShadow: bt[a],
3214
3214
  overflow: "hidden",
3215
3215
  boxSizing: "border-box",
3216
3216
  ...l
@@ -3226,7 +3226,7 @@ function Pn({
3226
3226
  children: t
3227
3227
  }
3228
3228
  ),
3229
- /* @__PURE__ */ e("div", { style: { padding: s, flex: 1 }, children: a }),
3229
+ /* @__PURE__ */ e("div", { style: { padding: s, flex: 1 }, children: r }),
3230
3230
  n != null && /* @__PURE__ */ e(
3231
3231
  "div",
3232
3232
  {
@@ -3241,7 +3241,7 @@ function Pn({
3241
3241
  }
3242
3242
  );
3243
3243
  }
3244
- const Wn = {
3244
+ const Hn = {
3245
3245
  id: "card",
3246
3246
  name: "Card",
3247
3247
  tier: "molecule",
@@ -3349,15 +3349,15 @@ const Wn = {
3349
3349
  warning: /* @__PURE__ */ e(kt, {}),
3350
3350
  danger: /* @__PURE__ */ e(St, {})
3351
3351
  }, Ct = () => /* @__PURE__ */ e("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ e("path", { d: "M3 3L11 11M11 3L3 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
3352
- function Vn({
3352
+ function jn({
3353
3353
  variant: t = "info",
3354
3354
  title: n,
3355
- children: a,
3355
+ children: r,
3356
3356
  onDismiss: o,
3357
- icon: r,
3357
+ icon: a,
3358
3358
  style: i
3359
3359
  }) {
3360
- const l = yt[t], s = r ?? Tt[t];
3360
+ const l = yt[t], s = a ?? Tt[t];
3361
3361
  return /* @__PURE__ */ h(
3362
3362
  "div",
3363
3363
  {
@@ -3388,8 +3388,8 @@ function Vn({
3388
3388
  }
3389
3389
  ),
3390
3390
  /* @__PURE__ */ h("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)" }, children: [
3391
- n && /* @__PURE__ */ e(E, { as: "span", size: "sm", weight: "semibold", color: l.textColor, lineHeight: "tight", children: n }),
3392
- a && /* @__PURE__ */ e(E, { as: "span", size: "sm", color: l.textColor, lineHeight: "base", children: a })
3391
+ n && /* @__PURE__ */ e(A, { as: "span", size: "sm", weight: "semibold", color: l.textColor, lineHeight: "tight", children: n }),
3392
+ r && /* @__PURE__ */ e(A, { as: "span", size: "sm", color: l.textColor, lineHeight: "base", children: r })
3393
3393
  ] }),
3394
3394
  o && /* @__PURE__ */ e(
3395
3395
  "button",
@@ -3409,11 +3409,11 @@ function Vn({
3409
3409
  color: l.iconColor,
3410
3410
  opacity: 0.7
3411
3411
  },
3412
- onMouseEnter: (u) => {
3413
- u.currentTarget.style.opacity = "1";
3412
+ onMouseEnter: (d) => {
3413
+ d.currentTarget.style.opacity = "1";
3414
3414
  },
3415
- onMouseLeave: (u) => {
3416
- u.currentTarget.style.opacity = "0.7";
3415
+ onMouseLeave: (d) => {
3416
+ d.currentTarget.style.opacity = "0.7";
3417
3417
  },
3418
3418
  children: /* @__PURE__ */ e(Ct, {})
3419
3419
  }
@@ -3422,7 +3422,7 @@ function Vn({
3422
3422
  }
3423
3423
  );
3424
3424
  }
3425
- const On = {
3425
+ const Un = {
3426
3426
  id: "alert",
3427
3427
  name: "Alert",
3428
3428
  tier: "molecule",
@@ -3497,12 +3497,12 @@ const On = {
3497
3497
  notes: 'role="alert" causes screen readers to announce the content immediately when rendered. For non-urgent status messages, consider using role="status" instead by overriding via style/wrapper.'
3498
3498
  }
3499
3499
  };
3500
- function Hn({
3500
+ function Gn({
3501
3501
  illustration: t,
3502
3502
  title: n,
3503
- description: a,
3503
+ description: r,
3504
3504
  action: o,
3505
- style: r
3505
+ style: a
3506
3506
  }) {
3507
3507
  return /* @__PURE__ */ h(
3508
3508
  "div",
@@ -3514,7 +3514,7 @@ function Hn({
3514
3514
  gap: "var(--lucent-space-4)",
3515
3515
  padding: "var(--lucent-space-8)",
3516
3516
  textAlign: "center",
3517
- ...r
3517
+ ...a
3518
3518
  },
3519
3519
  children: [
3520
3520
  t != null && /* @__PURE__ */ e(
@@ -3532,15 +3532,15 @@ function Hn({
3532
3532
  }
3533
3533
  ),
3534
3534
  /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)" }, children: [
3535
- /* @__PURE__ */ e(E, { as: "h3", size: "lg", weight: "semibold", align: "center", lineHeight: "tight", children: n }),
3536
- a && /* @__PURE__ */ e(E, { size: "sm", color: "secondary", align: "center", lineHeight: "relaxed", children: a })
3535
+ /* @__PURE__ */ e(A, { as: "h3", size: "lg", weight: "semibold", align: "center", lineHeight: "tight", children: n }),
3536
+ r && /* @__PURE__ */ e(A, { size: "sm", color: "secondary", align: "center", lineHeight: "relaxed", children: r })
3537
3537
  ] }),
3538
3538
  o != null && /* @__PURE__ */ e("div", { children: o })
3539
3539
  ]
3540
3540
  }
3541
3541
  );
3542
3542
  }
3543
- const jn = {
3543
+ const _n = {
3544
3544
  id: "empty-state",
3545
3545
  name: "EmptyState",
3546
3546
  tier: "molecule",
@@ -3623,9 +3623,9 @@ const jn = {
3623
3623
  function te({
3624
3624
  width: t,
3625
3625
  height: n,
3626
- radius: a,
3626
+ radius: r,
3627
3627
  animate: o,
3628
- style: r
3628
+ style: a
3629
3629
  }) {
3630
3630
  return /* @__PURE__ */ e(
3631
3631
  "span",
@@ -3634,58 +3634,58 @@ function te({
3634
3634
  display: "block",
3635
3635
  width: typeof t == "number" ? `${t}px` : t,
3636
3636
  height: typeof n == "number" ? `${n}px` : n,
3637
- borderRadius: a,
3637
+ borderRadius: r,
3638
3638
  background: o ? "linear-gradient(90deg, var(--lucent-bg-muted) 25%, var(--lucent-bg-subtle) 50%, var(--lucent-bg-muted) 75%)" : "var(--lucent-bg-muted)",
3639
3639
  backgroundSize: o ? "200% 100%" : void 0,
3640
3640
  animation: o ? "lucent-skeleton-shimmer 1.6s ease-in-out infinite" : void 0,
3641
3641
  flexShrink: 0,
3642
- ...r
3642
+ ...a
3643
3643
  }
3644
3644
  }
3645
3645
  );
3646
3646
  }
3647
- function Un({
3647
+ function Yn({
3648
3648
  variant: t = "rectangle",
3649
3649
  width: n = "100%",
3650
- height: a,
3650
+ height: r,
3651
3651
  lines: o = 1,
3652
- animate: r = !0,
3652
+ animate: a = !0,
3653
3653
  radius: i,
3654
3654
  style: l
3655
3655
  }) {
3656
- const s = a ?? It[t], u = i ?? Mt[t], m = r ? /* @__PURE__ */ e("style", { children: `
3656
+ const s = r ?? It[t], d = i ?? Mt[t], m = a ? /* @__PURE__ */ e("style", { children: `
3657
3657
  @keyframes lucent-skeleton-shimmer {
3658
3658
  0% { background-position: 200% 0; }
3659
3659
  100% { background-position: -200% 0; }
3660
3660
  }
3661
3661
  ` }) : null;
3662
- return t === "text" && o > 1 ? /* @__PURE__ */ h(W, { children: [
3662
+ return t === "text" && o > 1 ? /* @__PURE__ */ h(P, { children: [
3663
3663
  m,
3664
- /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)", ...l }, children: Array.from({ length: o }).map((b, d) => /* @__PURE__ */ e(
3664
+ /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)", ...l }, children: Array.from({ length: o }).map((g, u) => /* @__PURE__ */ e(
3665
3665
  te,
3666
3666
  {
3667
- width: d === o - 1 ? "70%" : n,
3667
+ width: u === o - 1 ? "70%" : n,
3668
3668
  height: s,
3669
- radius: u,
3670
- animate: r
3669
+ radius: d,
3670
+ animate: a
3671
3671
  },
3672
- d
3672
+ u
3673
3673
  )) })
3674
- ] }) : /* @__PURE__ */ h(W, { children: [
3674
+ ] }) : /* @__PURE__ */ h(P, { children: [
3675
3675
  m,
3676
3676
  /* @__PURE__ */ e(
3677
3677
  te,
3678
3678
  {
3679
- width: t === "circle" ? a ?? 40 : n,
3679
+ width: t === "circle" ? r ?? 40 : n,
3680
3680
  height: s,
3681
- radius: u,
3682
- animate: r,
3681
+ radius: d,
3682
+ animate: a,
3683
3683
  ...l !== void 0 && { style: l }
3684
3684
  }
3685
3685
  )
3686
3686
  ] });
3687
3687
  }
3688
- const Gn = {
3688
+ const Kn = {
3689
3689
  id: "skeleton",
3690
3690
  name: "Skeleton",
3691
3691
  tier: "molecule",
@@ -3772,8 +3772,8 @@ const Gn = {
3772
3772
  notes: 'Wrap loading regions with aria-busy="true" on the container so screen readers know content is loading. Individual Skeleton elements are presentational and do not need ARIA attributes themselves.'
3773
3773
  }
3774
3774
  };
3775
- function _n({ items: t, separator: n = "/", style: a }) {
3776
- return /* @__PURE__ */ e("nav", { "aria-label": "Breadcrumb", style: a, children: /* @__PURE__ */ e(
3775
+ function Xn({ items: t, separator: n = "/", style: r }) {
3776
+ return /* @__PURE__ */ e("nav", { "aria-label": "Breadcrumb", style: r, children: /* @__PURE__ */ e(
3777
3777
  "ol",
3778
3778
  {
3779
3779
  style: {
@@ -3786,10 +3786,10 @@ function _n({ items: t, separator: n = "/", style: a }) {
3786
3786
  padding: 0,
3787
3787
  fontFamily: "var(--lucent-font-family-base)"
3788
3788
  },
3789
- children: t.map((o, r) => {
3790
- const i = r === t.length - 1;
3789
+ children: t.map((o, a) => {
3790
+ const i = a === t.length - 1;
3791
3791
  return /* @__PURE__ */ h("li", { style: { display: "flex", alignItems: "center", gap: "var(--lucent-space-1)" }, children: [
3792
- i ? /* @__PURE__ */ e(E, { size: "sm", color: "primary", as: "span", "aria-current": "page", children: o.label }) : o.href != null ? /* @__PURE__ */ e(
3792
+ i ? /* @__PURE__ */ e(A, { size: "sm", color: "primary", as: "span", "aria-current": "page", children: o.label }) : o.href != null ? /* @__PURE__ */ e(
3793
3793
  "a",
3794
3794
  {
3795
3795
  href: o.href,
@@ -3833,27 +3833,27 @@ function _n({ items: t, separator: n = "/", style: a }) {
3833
3833
  }
3834
3834
  ),
3835
3835
  !i && /* @__PURE__ */ e("span", { "aria-hidden": !0, style: { color: "var(--lucent-text-disabled)", fontSize: "var(--lucent-font-size-sm)", userSelect: "none" }, children: n })
3836
- ] }, r);
3836
+ ] }, a);
3837
3837
  })
3838
3838
  }
3839
3839
  ) });
3840
3840
  }
3841
- function Yn({ tabs: t, defaultValue: n, value: a, onChange: o, style: r }) {
3842
- var g;
3843
- const i = a !== void 0, [l, s] = M(n ?? ((g = t[0]) == null ? void 0 : g.value) ?? ""), u = i ? a : l, [m, b] = M(null), d = F([]), [p, c] = M(null), v = F(!1);
3841
+ function Jn({ tabs: t, defaultValue: n, value: r, onChange: o, style: a }) {
3842
+ var p;
3843
+ const i = r !== void 0, [l, s] = q(n ?? ((p = t[0]) == null ? void 0 : p.value) ?? ""), d = i ? r : l, [m, g] = q(null), u = B([]), [f, c] = q(null), x = B(!1);
3844
3844
  se(() => {
3845
- const x = t.findIndex((k) => k.value === u), I = d.current[x];
3846
- I && (c({ left: I.offsetLeft, width: I.offsetWidth, animate: v.current }), v.current = !0);
3847
- }, [u, t]);
3848
- const y = (x) => {
3849
- i || s(x), o == null || o(x);
3850
- }, w = (x, I) => {
3851
- var D;
3852
- const k = t.map((T, C) => T.disabled ? -1 : C).filter((T) => T !== -1), f = k.indexOf(I);
3853
- let S = -1;
3854
- x.key === "ArrowRight" && (S = k[(f + 1) % k.length] ?? -1), x.key === "ArrowLeft" && (S = k[(f - 1 + k.length) % k.length] ?? -1), x.key === "Home" && (S = k[0] ?? -1), x.key === "End" && (S = k[k.length - 1] ?? -1), S !== -1 && (x.preventDefault(), (D = d.current[S]) == null || D.focus(), y(t[S].value));
3845
+ const v = t.findIndex((w) => w.value === d), M = u.current[v];
3846
+ M && (c({ left: M.offsetLeft, width: M.offsetWidth, animate: x.current }), x.current = !0);
3847
+ }, [d, t]);
3848
+ const y = (v) => {
3849
+ i || s(v), o == null || o(v);
3850
+ }, b = (v, M) => {
3851
+ var F;
3852
+ const w = t.map((T, C) => T.disabled ? -1 : C).filter((T) => T !== -1), S = w.indexOf(M);
3853
+ let E = -1;
3854
+ v.key === "ArrowRight" && (E = w[(S + 1) % w.length] ?? -1), v.key === "ArrowLeft" && (E = w[(S - 1 + w.length) % w.length] ?? -1), v.key === "Home" && (E = w[0] ?? -1), v.key === "End" && (E = w[w.length - 1] ?? -1), E !== -1 && (v.preventDefault(), (F = u.current[E]) == null || F.focus(), y(t[E].value));
3855
3855
  };
3856
- return /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", ...r }, children: [
3856
+ return /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", ...a }, children: [
3857
3857
  /* @__PURE__ */ h(
3858
3858
  "div",
3859
3859
  {
@@ -3864,37 +3864,37 @@ function Yn({ tabs: t, defaultValue: n, value: a, onChange: o, style: r }) {
3864
3864
  borderBottom: "1px solid var(--lucent-border-default)"
3865
3865
  },
3866
3866
  children: [
3867
- t.map((x, I) => {
3868
- const k = x.value === u, f = x.disabled ?? !1;
3867
+ t.map((v, M) => {
3868
+ const w = v.value === d, S = v.disabled ?? !1;
3869
3869
  return /* @__PURE__ */ e(
3870
3870
  "button",
3871
3871
  {
3872
- ref: (S) => {
3873
- d.current[I] = S;
3872
+ ref: (E) => {
3873
+ u.current[M] = E;
3874
3874
  },
3875
3875
  role: "tab",
3876
- "aria-selected": k,
3877
- "aria-controls": `lucent-tabpanel-${x.value}`,
3878
- id: `lucent-tab-${x.value}`,
3879
- disabled: f,
3880
- tabIndex: k ? 0 : -1,
3876
+ "aria-selected": w,
3877
+ "aria-controls": `lucent-tabpanel-${v.value}`,
3878
+ id: `lucent-tab-${v.value}`,
3879
+ disabled: S,
3880
+ tabIndex: w ? 0 : -1,
3881
3881
  onClick: () => {
3882
- f || y(x.value);
3882
+ S || y(v.value);
3883
3883
  },
3884
- onKeyDown: (S) => w(S, I),
3884
+ onKeyDown: (E) => b(E, M),
3885
3885
  onMouseEnter: () => {
3886
- f || b(I);
3886
+ S || g(M);
3887
3887
  },
3888
- onMouseLeave: () => b(null),
3888
+ onMouseLeave: () => g(null),
3889
3889
  style: {
3890
3890
  padding: "var(--lucent-space-1) var(--lucent-space-2) var(--lucent-space-3)",
3891
3891
  background: "none",
3892
3892
  border: "none",
3893
- cursor: f ? "not-allowed" : "pointer",
3893
+ cursor: S ? "not-allowed" : "pointer",
3894
3894
  fontFamily: "var(--lucent-font-family-base)",
3895
3895
  fontSize: "var(--lucent-font-size-md)",
3896
- fontWeight: k ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
3897
- color: f ? "var(--lucent-text-disabled)" : k ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
3896
+ fontWeight: w ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
3897
+ color: S ? "var(--lucent-text-disabled)" : w ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
3898
3898
  transition: "color var(--lucent-duration-fast) var(--lucent-easing-default)",
3899
3899
  whiteSpace: "nowrap",
3900
3900
  outline: "none"
@@ -3903,44 +3903,44 @@ function Yn({ tabs: t, defaultValue: n, value: a, onChange: o, style: r }) {
3903
3903
  display: "block",
3904
3904
  padding: "var(--lucent-space-1) var(--lucent-space-3)",
3905
3905
  borderRadius: "var(--lucent-radius-md)",
3906
- background: m === I && !k ? "var(--lucent-bg-subtle)" : "transparent",
3906
+ background: m === M && !w ? "var(--lucent-bg-subtle)" : "transparent",
3907
3907
  transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)"
3908
- }, children: x.label })
3908
+ }, children: v.label })
3909
3909
  },
3910
- x.value
3910
+ v.value
3911
3911
  );
3912
3912
  }),
3913
- p != null && /* @__PURE__ */ e(
3913
+ f != null && /* @__PURE__ */ e(
3914
3914
  "span",
3915
3915
  {
3916
3916
  "aria-hidden": !0,
3917
3917
  style: {
3918
3918
  position: "absolute",
3919
3919
  bottom: 0,
3920
- left: p.left,
3921
- width: p.width,
3920
+ left: f.left,
3921
+ width: f.width,
3922
3922
  height: 2,
3923
3923
  background: "var(--lucent-accent-default)",
3924
3924
  borderRadius: "var(--lucent-radius-sm)",
3925
- transition: p.animate ? "left 220ms var(--lucent-easing-default), width 220ms var(--lucent-easing-default)" : "none"
3925
+ transition: f.animate ? "left 220ms var(--lucent-easing-default), width 220ms var(--lucent-easing-default)" : "none"
3926
3926
  }
3927
3927
  }
3928
3928
  )
3929
3929
  ]
3930
3930
  }
3931
3931
  ),
3932
- t.map((x) => /* @__PURE__ */ e(
3932
+ t.map((v) => /* @__PURE__ */ e(
3933
3933
  "div",
3934
3934
  {
3935
3935
  role: "tabpanel",
3936
- id: `lucent-tabpanel-${x.value}`,
3937
- "aria-labelledby": `lucent-tab-${x.value}`,
3938
- hidden: x.value !== u,
3936
+ id: `lucent-tabpanel-${v.value}`,
3937
+ "aria-labelledby": `lucent-tab-${v.value}`,
3938
+ hidden: v.value !== d,
3939
3939
  style: { padding: "var(--lucent-space-4) 0", outline: "none" },
3940
3940
  tabIndex: 0,
3941
- children: x.content
3941
+ children: v.content
3942
3942
  },
3943
- x.value
3943
+ v.value
3944
3944
  ))
3945
3945
  ] });
3946
3946
  }
@@ -3950,32 +3950,32 @@ const zt = `
3950
3950
  to { opacity: 1; transform: translateY(0); }
3951
3951
  }
3952
3952
  `;
3953
- function Kn({ trigger: t, children: n, defaultOpen: a = !1, open: o, onOpenChange: r, style: i }) {
3954
- const l = o !== void 0, [s, u] = M(a), m = l ? o : s, b = F(null), [d, p] = M(m ? void 0 : 0), c = F(!1);
3955
- L(() => {
3956
- const y = b.current;
3953
+ function Qn({ trigger: t, children: n, defaultOpen: r = !1, open: o, onOpenChange: a, style: i }) {
3954
+ const l = o !== void 0, [s, d] = q(r), m = l ? o : s, g = B(null), [u, f] = q(m ? void 0 : 0), c = B(!1);
3955
+ $(() => {
3956
+ const y = g.current;
3957
3957
  if (y)
3958
3958
  if (m) {
3959
- const w = y.scrollHeight;
3960
- p(w), c.current = !0;
3961
- const g = setTimeout(() => {
3962
- p(void 0), c.current = !1;
3959
+ const b = y.scrollHeight;
3960
+ f(b), c.current = !0;
3961
+ const p = setTimeout(() => {
3962
+ f(void 0), c.current = !1;
3963
3963
  }, 220);
3964
- return () => clearTimeout(g);
3964
+ return () => clearTimeout(p);
3965
3965
  } else
3966
- p(y.scrollHeight), y.getBoundingClientRect(), p(0);
3966
+ f(y.scrollHeight), y.getBoundingClientRect(), f(0);
3967
3967
  }, [m]);
3968
- const v = () => {
3968
+ const x = () => {
3969
3969
  const y = !m;
3970
- l || u(y), r == null || r(y);
3970
+ l || d(y), a == null || a(y);
3971
3971
  };
3972
- return /* @__PURE__ */ h(W, { children: [
3972
+ return /* @__PURE__ */ h(P, { children: [
3973
3973
  /* @__PURE__ */ e("style", { children: zt }),
3974
3974
  /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", fontFamily: "var(--lucent-font-family-base)", fontSize: "var(--lucent-font-size-md)", ...i }, children: [
3975
3975
  /* @__PURE__ */ h(
3976
3976
  "button",
3977
3977
  {
3978
- onClick: v,
3978
+ onClick: x,
3979
3979
  "aria-expanded": m,
3980
3980
  style: {
3981
3981
  display: "flex",
@@ -3993,18 +3993,18 @@ function Kn({ trigger: t, children: n, defaultOpen: a = !1, open: o, onOpenChang
3993
3993
  },
3994
3994
  children: [
3995
3995
  /* @__PURE__ */ e("span", { style: { flex: 1 }, children: t }),
3996
- /* @__PURE__ */ e(qt, { open: m })
3996
+ /* @__PURE__ */ e(Et, { open: m })
3997
3997
  ]
3998
3998
  }
3999
3999
  ),
4000
4000
  /* @__PURE__ */ e(
4001
4001
  "div",
4002
4002
  {
4003
- ref: b,
4003
+ ref: g,
4004
4004
  "aria-hidden": !m,
4005
4005
  style: {
4006
4006
  overflow: "hidden",
4007
- height: d !== void 0 ? d : "auto",
4007
+ height: u !== void 0 ? u : "auto",
4008
4008
  transition: "height 200ms var(--lucent-easing-default)"
4009
4009
  },
4010
4010
  children: /* @__PURE__ */ e(
@@ -4022,7 +4022,7 @@ function Kn({ trigger: t, children: n, defaultOpen: a = !1, open: o, onOpenChang
4022
4022
  ] })
4023
4023
  ] });
4024
4024
  }
4025
- function qt({ open: t }) {
4025
+ function Et({ open: t }) {
4026
4026
  return /* @__PURE__ */ e(
4027
4027
  "svg",
4028
4028
  {
@@ -4048,22 +4048,22 @@ function qt({ open: t }) {
4048
4048
  function _(t) {
4049
4049
  return typeof t == "number" ? `${t}px` : t;
4050
4050
  }
4051
- function Xn({
4051
+ function Zn({
4052
4052
  children: t,
4053
4053
  header: n,
4054
- sidebar: a,
4054
+ sidebar: r,
4055
4055
  sidebarWidth: o = 240,
4056
- headerHeight: r = 48,
4056
+ headerHeight: a = 48,
4057
4057
  sidebarCollapsed: i = !1,
4058
4058
  rightSidebar: l,
4059
4059
  rightSidebarWidth: s = 240,
4060
- rightSidebarCollapsed: u = !1,
4060
+ rightSidebarCollapsed: d = !1,
4061
4061
  footer: m,
4062
- footerHeight: b = 28,
4063
- mainStyle: d,
4064
- style: p
4062
+ footerHeight: g = 28,
4063
+ mainStyle: u,
4064
+ style: f
4065
4065
  }) {
4066
- const c = _(r), v = _(o), y = _(s), w = _(b);
4066
+ const c = _(a), x = _(o), y = _(s), b = _(g);
4067
4067
  return /* @__PURE__ */ h(
4068
4068
  "div",
4069
4069
  {
@@ -4073,7 +4073,7 @@ function Xn({
4073
4073
  height: "100vh",
4074
4074
  overflow: "hidden",
4075
4075
  fontFamily: "var(--lucent-font-family-base)",
4076
- ...p
4076
+ ...f
4077
4077
  },
4078
4078
  children: [
4079
4079
  n != null && /* @__PURE__ */ e(
@@ -4089,18 +4089,18 @@ function Xn({
4089
4089
  }
4090
4090
  ),
4091
4091
  /* @__PURE__ */ h("div", { style: { display: "flex", flex: 1, overflow: "hidden" }, children: [
4092
- a != null && /* @__PURE__ */ e(
4092
+ r != null && /* @__PURE__ */ e(
4093
4093
  "div",
4094
4094
  {
4095
4095
  style: {
4096
- width: i ? 0 : v,
4096
+ width: i ? 0 : x,
4097
4097
  flexShrink: 0,
4098
4098
  overflow: "hidden",
4099
4099
  overflowY: i ? "hidden" : "auto",
4100
4100
  background: "var(--lucent-surface-default)",
4101
4101
  transition: "width 200ms var(--lucent-easing-default)"
4102
4102
  },
4103
- children: a
4103
+ children: r
4104
4104
  }
4105
4105
  ),
4106
4106
  /* @__PURE__ */ e(
@@ -4115,7 +4115,7 @@ function Xn({
4115
4115
  borderRadius: "var(--lucent-radius-lg)",
4116
4116
  boxShadow: "var(--lucent-shadow-sm)",
4117
4117
  background: "var(--lucent-surface-default)",
4118
- ...d
4118
+ ...u
4119
4119
  },
4120
4120
  children: t
4121
4121
  }
@@ -4124,10 +4124,10 @@ function Xn({
4124
4124
  "aside",
4125
4125
  {
4126
4126
  style: {
4127
- width: u ? 0 : y,
4127
+ width: d ? 0 : y,
4128
4128
  flexShrink: 0,
4129
4129
  overflow: "hidden",
4130
- overflowY: u ? "hidden" : "auto",
4130
+ overflowY: d ? "hidden" : "auto",
4131
4131
  background: "var(--lucent-surface-default)",
4132
4132
  transition: "width 200ms var(--lucent-easing-default)"
4133
4133
  },
@@ -4140,7 +4140,7 @@ function Xn({
4140
4140
  {
4141
4141
  style: {
4142
4142
  flexShrink: 0,
4143
- height: w,
4143
+ height: b,
4144
4144
  zIndex: 10,
4145
4145
  background: "var(--lucent-surface-default)"
4146
4146
  },
@@ -4151,7 +4151,7 @@ function Xn({
4151
4151
  }
4152
4152
  );
4153
4153
  }
4154
- function Et({ state: t }) {
4154
+ function qt({ state: t }) {
4155
4155
  return /* @__PURE__ */ h(
4156
4156
  "svg",
4157
4157
  {
@@ -4194,32 +4194,54 @@ function ne({ dir: t }) {
4194
4194
  }
4195
4195
  ) });
4196
4196
  }
4197
- function Jn({
4197
+ function er({
4198
4198
  columns: t,
4199
4199
  rows: n,
4200
- pageSize: a = 10,
4200
+ pageSize: r = 10,
4201
4201
  page: o,
4202
- onPageChange: r,
4203
- emptyState: i,
4204
- style: l
4202
+ onPageChange: a,
4203
+ onFilterChange: i,
4204
+ emptyState: l,
4205
+ style: s
4205
4206
  }) {
4206
- const [s, u] = M(null), [m, b] = M(0), [d, p] = M(null), c = o !== void 0, v = c ? o : m, y = s ? [...n].sort((f, S) => {
4207
- const D = f[s.key], T = S[s.key], C = String(D ?? "").localeCompare(String(T ?? ""), void 0, { numeric: !0 });
4208
- return s.dir === "asc" ? C : -C;
4209
- }) : n, w = a > 0 ? y.slice(v * a, (v + 1) * a) : y, g = a > 0 ? Math.max(1, Math.ceil(y.length / a)) : 1, x = (f) => {
4210
- c || b(f), r == null || r(f);
4211
- }, I = (f) => {
4212
- u((S) => !S || S.key !== f ? { key: f, dir: "asc" } : S.dir === "asc" ? { key: f, dir: "desc" } : null), c || b(0), r == null || r(0);
4213
- }, k = [];
4214
- if (g <= 7)
4215
- for (let f = 0; f < g; f++) k.push(f);
4207
+ const [d, m] = q(null), [g, u] = q(0), [f, c] = q(null), [x, y] = q({}), b = o !== void 0, p = b ? o : g, v = t.some((z) => z.filterable), M = v ? n.filter((z) => t.every((k) => {
4208
+ if (!k.filterable) return !0;
4209
+ const I = x[k.key];
4210
+ if (!I || I.length === 0) return !0;
4211
+ const R = String(z[k.key] ?? "");
4212
+ return I.includes(R);
4213
+ })) : n, w = d ? [...M].sort((z, k) => {
4214
+ const I = z[d.key], R = k[d.key], V = String(I ?? "").localeCompare(String(R ?? ""), void 0, { numeric: !0 });
4215
+ return d.dir === "asc" ? V : -V;
4216
+ }) : M, S = r > 0 ? w.slice(p * r, (p + 1) * r) : w, E = r > 0 ? Math.max(1, Math.ceil(w.length / r)) : 1, F = (z) => {
4217
+ b || u(z), a == null || a(z);
4218
+ }, T = (z) => {
4219
+ m((k) => !k || k.key !== z ? { key: z, dir: "asc" } : k.dir === "asc" ? { key: z, dir: "desc" } : null), b || u(0), a == null || a(0);
4220
+ }, C = (z, k) => {
4221
+ const I = { ...x, [z]: k };
4222
+ k.length === 0 && delete I[z], y(I), b || u(0), a == null || a(0), i == null || i(I);
4223
+ }, W = () => {
4224
+ y({}), b || u(0), a == null || a(0), i == null || i({});
4225
+ }, D = [];
4226
+ if (E <= 7)
4227
+ for (let z = 0; z < E; z++) D.push(z);
4216
4228
  else {
4217
- k.push(0), v > 2 && k.push("…");
4218
- for (let f = Math.max(1, v - 1); f <= Math.min(g - 2, v + 1); f++)
4219
- k.push(f);
4220
- v < g - 3 && k.push("…"), k.push(g - 1);
4229
+ D.push(0), p > 2 && D.push("…");
4230
+ for (let z = Math.max(1, p - 1); z <= Math.min(E - 2, p + 1); z++)
4231
+ D.push(z);
4232
+ p < E - 3 && D.push("…"), D.push(E - 1);
4221
4233
  }
4222
- return /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-3)", ...l }, children: [
4234
+ return /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-3)", ...s }, children: [
4235
+ v && /* @__PURE__ */ e("div", { style: { position: "relative", zIndex: 1 }, children: /* @__PURE__ */ e(
4236
+ At,
4237
+ {
4238
+ columns: t,
4239
+ rows: n,
4240
+ filters: x,
4241
+ onFilter: C,
4242
+ onClearAll: W
4243
+ }
4244
+ ) }),
4223
4245
  /* @__PURE__ */ e("div", { style: {
4224
4246
  overflowX: "auto",
4225
4247
  borderRadius: "var(--lucent-radius-lg)",
@@ -4230,105 +4252,106 @@ function Jn({
4230
4252
  fontFamily: "var(--lucent-font-family-base)",
4231
4253
  fontSize: "var(--lucent-font-size-sm)"
4232
4254
  }, children: [
4233
- /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { style: { borderBottom: "1px solid var(--lucent-border-default)" }, children: t.map((f) => {
4234
- const S = (s == null ? void 0 : s.key) === f.key ? s.dir : "none";
4255
+ /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { style: { borderBottom: "1px solid var(--lucent-border-default)" }, children: t.map((z) => {
4256
+ const k = (d == null ? void 0 : d.key) === z.key ? d.dir : "none";
4235
4257
  return /* @__PURE__ */ e(
4236
4258
  "th",
4237
4259
  {
4238
- onClick: f.sortable ? () => I(f.key) : void 0,
4260
+ onClick: z.sortable ? () => T(z.key) : void 0,
4239
4261
  style: {
4240
4262
  padding: "var(--lucent-space-3) var(--lucent-space-4)",
4241
- textAlign: f.align ?? "left",
4263
+ textAlign: z.align ?? "left",
4242
4264
  fontWeight: "var(--lucent-font-weight-medium)",
4243
4265
  color: "var(--lucent-text-secondary)",
4244
4266
  background: "var(--lucent-bg-subtle)",
4245
- cursor: f.sortable ? "pointer" : "default",
4267
+ borderBottom: "1px solid var(--lucent-border-default)",
4268
+ cursor: z.sortable ? "pointer" : "default",
4246
4269
  userSelect: "none",
4247
4270
  whiteSpace: "nowrap",
4248
- ...f.width ? { width: f.width } : {}
4271
+ ...z.width ? { width: z.width } : {}
4249
4272
  },
4250
4273
  children: /* @__PURE__ */ h("span", { style: { display: "inline-flex", alignItems: "center", gap: "var(--lucent-space-1)" }, children: [
4251
- f.header,
4252
- f.sortable && /* @__PURE__ */ e(Et, { state: S })
4274
+ z.header,
4275
+ z.sortable && /* @__PURE__ */ e(qt, { state: k })
4253
4276
  ] })
4254
4277
  },
4255
- f.key
4278
+ z.key
4256
4279
  );
4257
4280
  }) }) }),
4258
- /* @__PURE__ */ e("tbody", { children: w.length === 0 ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
4281
+ /* @__PURE__ */ e("tbody", { children: S.length === 0 ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
4259
4282
  "td",
4260
4283
  {
4261
4284
  colSpan: t.length,
4262
4285
  style: { padding: "var(--lucent-space-12)", textAlign: "center" },
4263
- children: i ?? /* @__PURE__ */ e(E, { color: "secondary", children: "No data" })
4286
+ children: l ?? /* @__PURE__ */ e(A, { color: "secondary", children: "No data" })
4264
4287
  }
4265
- ) }) : w.map((f, S) => /* @__PURE__ */ e(
4288
+ ) }) : S.map((z, k) => /* @__PURE__ */ e(
4266
4289
  "tr",
4267
4290
  {
4268
- onMouseEnter: () => p(S),
4269
- onMouseLeave: () => p(null),
4291
+ onMouseEnter: () => c(k),
4292
+ onMouseLeave: () => c(null),
4270
4293
  style: {
4271
- borderBottom: S < w.length - 1 ? "1px solid var(--lucent-border-subtle)" : "none",
4272
- background: d === S ? "var(--lucent-bg-subtle)" : "var(--lucent-surface-default)",
4294
+ borderBottom: k < S.length - 1 ? "1px solid var(--lucent-border-subtle)" : "none",
4295
+ background: f === k ? "var(--lucent-bg-subtle)" : "var(--lucent-surface-default)",
4273
4296
  transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)"
4274
4297
  },
4275
- children: t.map((D) => /* @__PURE__ */ e(
4298
+ children: t.map((I) => /* @__PURE__ */ e(
4276
4299
  "td",
4277
4300
  {
4278
4301
  style: {
4279
4302
  padding: "var(--lucent-space-3) var(--lucent-space-4)",
4280
4303
  color: "var(--lucent-text-primary)",
4281
- textAlign: D.align ?? "left",
4304
+ textAlign: I.align ?? "left",
4282
4305
  verticalAlign: "middle"
4283
4306
  },
4284
- children: D.render ? D.render(f, S) : String(f[D.key] ?? "")
4307
+ children: I.render ? I.render(z, k) : String(z[I.key] ?? "")
4285
4308
  },
4286
- D.key
4309
+ I.key
4287
4310
  ))
4288
4311
  },
4289
- S
4312
+ k
4290
4313
  )) })
4291
4314
  ] }) }),
4292
- a > 0 && y.length > 0 && /* @__PURE__ */ h("div", { style: {
4315
+ r > 0 && w.length > 0 && /* @__PURE__ */ h("div", { style: {
4293
4316
  display: "flex",
4294
4317
  alignItems: "center",
4295
4318
  justifyContent: "space-between",
4296
4319
  gap: "var(--lucent-space-3)",
4297
4320
  flexWrap: "wrap"
4298
4321
  }, children: [
4299
- /* @__PURE__ */ e(E, { color: "secondary", size: "sm", children: y.length === 1 ? "1 row" : `${v * a + 1}–${Math.min((v + 1) * a, y.length)} of ${y.length} rows` }),
4322
+ /* @__PURE__ */ e(A, { color: "secondary", size: "sm", children: w.length === 0 ? `0 rows${n.length > 0 ? ` (filtered from ${n.length})` : ""}` : w.length === 1 ? `1 row${w.length < n.length ? ` (filtered from ${n.length})` : ""}` : `${p * r + 1}–${Math.min((p + 1) * r, w.length)} of ${w.length} rows${w.length < n.length ? ` (filtered from ${n.length})` : ""}` }),
4300
4323
  /* @__PURE__ */ h("div", { style: { display: "flex", alignItems: "center", gap: "var(--lucent-space-1)" }, children: [
4301
4324
  /* @__PURE__ */ e(
4302
4325
  K,
4303
4326
  {
4304
- onClick: () => x(v - 1),
4305
- disabled: v === 0,
4327
+ onClick: () => F(p - 1),
4328
+ disabled: p === 0,
4306
4329
  "aria-label": "Previous page",
4307
4330
  children: /* @__PURE__ */ e(ne, { dir: "left" })
4308
4331
  }
4309
4332
  ),
4310
- k.map(
4311
- (f, S) => f === "…" ? /* @__PURE__ */ e("span", { style: {
4333
+ D.map(
4334
+ (z, k) => z === "…" ? /* @__PURE__ */ e("span", { style: {
4312
4335
  padding: "0 var(--lucent-space-1)",
4313
4336
  color: "var(--lucent-text-disabled)",
4314
4337
  fontSize: "var(--lucent-font-size-sm)"
4315
- }, children: "…" }, `ellipsis-${S}`) : /* @__PURE__ */ e(
4338
+ }, children: "…" }, `ellipsis-${k}`) : /* @__PURE__ */ e(
4316
4339
  K,
4317
4340
  {
4318
- onClick: () => x(f),
4319
- active: f === v,
4320
- "aria-label": `Page ${f + 1}`,
4321
- "aria-current": f === v ? "page" : void 0,
4322
- children: f + 1
4341
+ onClick: () => F(z),
4342
+ active: z === p,
4343
+ "aria-label": `Page ${z + 1}`,
4344
+ "aria-current": z === p ? "page" : void 0,
4345
+ children: z + 1
4323
4346
  },
4324
- f
4347
+ z
4325
4348
  )
4326
4349
  ),
4327
4350
  /* @__PURE__ */ e(
4328
4351
  K,
4329
4352
  {
4330
- onClick: () => x(v + 1),
4331
- disabled: v >= g - 1,
4353
+ onClick: () => F(p + 1),
4354
+ disabled: p >= E - 1,
4332
4355
  "aria-label": "Next page",
4333
4356
  children: /* @__PURE__ */ e(ne, { dir: "right" })
4334
4357
  }
@@ -4337,20 +4360,260 @@ function Jn({
4337
4360
  ] })
4338
4361
  ] });
4339
4362
  }
4363
+ function At({
4364
+ columns: t,
4365
+ rows: n,
4366
+ filters: r,
4367
+ onFilter: o,
4368
+ onClearAll: a
4369
+ }) {
4370
+ const i = t.filter((s) => s.filterable), l = Object.keys(r).length;
4371
+ return /* @__PURE__ */ h("div", { style: { display: "flex", alignItems: "center", gap: "var(--lucent-space-2)", flexWrap: "wrap" }, children: [
4372
+ i.map((s) => {
4373
+ const d = Array.from(
4374
+ new Set(n.map((m) => String(m[s.key] ?? "")))
4375
+ ).sort();
4376
+ return /* @__PURE__ */ e(
4377
+ Dt,
4378
+ {
4379
+ label: s.header,
4380
+ values: d,
4381
+ value: r[s.key] ?? [],
4382
+ onChange: (m) => o(s.key, m)
4383
+ },
4384
+ s.key
4385
+ );
4386
+ }),
4387
+ l > 0 && /* @__PURE__ */ e(
4388
+ "button",
4389
+ {
4390
+ onClick: a,
4391
+ style: {
4392
+ display: "inline-flex",
4393
+ alignItems: "center",
4394
+ height: 30,
4395
+ padding: "0 var(--lucent-space-2)",
4396
+ border: "none",
4397
+ borderRadius: "var(--lucent-radius-md)",
4398
+ background: "transparent",
4399
+ color: "var(--lucent-text-secondary)",
4400
+ fontFamily: "var(--lucent-font-family-base)",
4401
+ fontSize: "var(--lucent-font-size-xs)",
4402
+ cursor: "pointer"
4403
+ },
4404
+ children: "Clear all"
4405
+ }
4406
+ )
4407
+ ] });
4408
+ }
4409
+ function Dt({
4410
+ label: t,
4411
+ values: n,
4412
+ value: r,
4413
+ onChange: o
4414
+ }) {
4415
+ const [a, i] = q(!1), [l, s] = q(!1), [d, m] = q(""), g = B(null), u = B(null), f = r.length > 0;
4416
+ $(() => {
4417
+ if (!a) {
4418
+ m("");
4419
+ return;
4420
+ }
4421
+ setTimeout(() => {
4422
+ var v;
4423
+ return (v = u.current) == null ? void 0 : v.focus();
4424
+ }, 0);
4425
+ const b = (v) => {
4426
+ g.current && !g.current.contains(v.target) && i(!1);
4427
+ }, p = (v) => {
4428
+ v.key === "Escape" && i(!1);
4429
+ };
4430
+ return document.addEventListener("mousedown", b), document.addEventListener("keydown", p), () => {
4431
+ document.removeEventListener("mousedown", b), document.removeEventListener("keydown", p);
4432
+ };
4433
+ }, [a]);
4434
+ const c = d ? n.filter((b) => b.toLowerCase().includes(d.toLowerCase())) : n, x = (b) => o(r.includes(b) ? r.filter((p) => p !== b) : [...r, b]), y = r.length === 0 ? null : r.length === 1 ? /* @__PURE__ */ h("span", { style: { color: "var(--lucent-text-secondary)", fontWeight: "var(--lucent-font-weight-regular)" }, children: [
4435
+ ": ",
4436
+ r[0]
4437
+ ] }) : /* @__PURE__ */ h("span", { style: { color: "var(--lucent-accent-default)" }, children: [
4438
+ "(",
4439
+ r.length,
4440
+ ")"
4441
+ ] });
4442
+ return /* @__PURE__ */ h("div", { ref: g, style: { position: "relative" }, children: [
4443
+ /* @__PURE__ */ h(
4444
+ "button",
4445
+ {
4446
+ onClick: () => i((b) => !b),
4447
+ onMouseEnter: () => s(!0),
4448
+ onMouseLeave: () => s(!1),
4449
+ style: {
4450
+ display: "inline-flex",
4451
+ alignItems: "center",
4452
+ gap: "var(--lucent-space-1)",
4453
+ height: 30,
4454
+ padding: "0 var(--lucent-space-3)",
4455
+ borderRadius: "var(--lucent-radius-md)",
4456
+ border: `1px solid ${f ? "var(--lucent-accent-default)" : l ? "var(--lucent-border-strong)" : "var(--lucent-border-default)"}`,
4457
+ background: f ? "var(--lucent-accent-subtle)" : "var(--lucent-surface-default)",
4458
+ color: f ? "var(--lucent-accent-default)" : "var(--lucent-text-primary)",
4459
+ fontFamily: "var(--lucent-font-family-base)",
4460
+ fontSize: "var(--lucent-font-size-xs)",
4461
+ fontWeight: f ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
4462
+ cursor: "pointer",
4463
+ outline: "none",
4464
+ whiteSpace: "nowrap",
4465
+ transition: "border-color var(--lucent-duration-fast) var(--lucent-easing-default), background var(--lucent-duration-fast) var(--lucent-easing-default)"
4466
+ },
4467
+ children: [
4468
+ t,
4469
+ y,
4470
+ /* @__PURE__ */ e(
4471
+ "svg",
4472
+ {
4473
+ width: "10",
4474
+ height: "10",
4475
+ viewBox: "0 0 10 10",
4476
+ fill: "none",
4477
+ "aria-hidden": !0,
4478
+ style: { transform: a ? "rotate(180deg)" : "none", transition: "transform var(--lucent-duration-fast) var(--lucent-easing-default)" },
4479
+ children: /* @__PURE__ */ e("path", { d: "M2 3.5L5 6.5L8 3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
4480
+ }
4481
+ )
4482
+ ]
4483
+ }
4484
+ ),
4485
+ a && /* @__PURE__ */ h("div", { style: {
4486
+ position: "absolute",
4487
+ top: "calc(100% + 4px)",
4488
+ left: 0,
4489
+ minWidth: 180,
4490
+ maxHeight: 280,
4491
+ display: "flex",
4492
+ flexDirection: "column",
4493
+ background: "var(--lucent-surface-default)",
4494
+ border: "1px solid var(--lucent-border-default)",
4495
+ borderRadius: "var(--lucent-radius-lg)",
4496
+ boxShadow: "0 4px 16px color-mix(in srgb, var(--lucent-text-primary) 8%, transparent)",
4497
+ zIndex: 50
4498
+ }, children: [
4499
+ /* @__PURE__ */ e("div", { style: { padding: "var(--lucent-space-2)", paddingBottom: 0 }, children: /* @__PURE__ */ e(
4500
+ "input",
4501
+ {
4502
+ ref: u,
4503
+ type: "text",
4504
+ value: d,
4505
+ onChange: (b) => m(b.target.value),
4506
+ placeholder: "Search…",
4507
+ style: {
4508
+ width: "100%",
4509
+ boxSizing: "border-box",
4510
+ height: 26,
4511
+ padding: "0 var(--lucent-space-2)",
4512
+ borderRadius: "var(--lucent-radius-md)",
4513
+ border: "1px solid var(--lucent-border-default)",
4514
+ background: "var(--lucent-bg-subtle)",
4515
+ color: "var(--lucent-text-primary)",
4516
+ fontFamily: "var(--lucent-font-family-base)",
4517
+ fontSize: "var(--lucent-font-size-xs)",
4518
+ outline: "none"
4519
+ }
4520
+ }
4521
+ ) }),
4522
+ r.length > 0 && /* @__PURE__ */ e("div", { style: { padding: "var(--lucent-space-1) var(--lucent-space-2) 0" }, children: /* @__PURE__ */ e(
4523
+ "button",
4524
+ {
4525
+ onClick: () => o([]),
4526
+ style: {
4527
+ display: "inline-flex",
4528
+ padding: "2px var(--lucent-space-2)",
4529
+ border: "none",
4530
+ borderRadius: "var(--lucent-radius-sm)",
4531
+ background: "transparent",
4532
+ color: "var(--lucent-text-secondary)",
4533
+ fontFamily: "var(--lucent-font-family-base)",
4534
+ fontSize: "var(--lucent-font-size-xs)",
4535
+ cursor: "pointer",
4536
+ textDecoration: "underline"
4537
+ },
4538
+ children: "Clear selection"
4539
+ }
4540
+ ) }),
4541
+ /* @__PURE__ */ e("div", { style: { overflowY: "auto", padding: "var(--lucent-space-1)", borderTop: "1px solid var(--lucent-border-subtle)", marginTop: "var(--lucent-space-2)" }, children: c.length === 0 ? /* @__PURE__ */ e("div", { style: {
4542
+ padding: "var(--lucent-space-3)",
4543
+ color: "var(--lucent-text-disabled)",
4544
+ fontFamily: "var(--lucent-font-family-base)",
4545
+ fontSize: "var(--lucent-font-size-xs)",
4546
+ textAlign: "center"
4547
+ }, children: "No results" }) : c.map((b) => /* @__PURE__ */ e(
4548
+ Ft,
4549
+ {
4550
+ label: b,
4551
+ isSelected: r.includes(b),
4552
+ onClick: () => x(b)
4553
+ },
4554
+ b
4555
+ )) })
4556
+ ] })
4557
+ ] });
4558
+ }
4559
+ function Ft({ label: t, isSelected: n, onClick: r }) {
4560
+ const [o, a] = q(!1);
4561
+ return /* @__PURE__ */ h(
4562
+ "button",
4563
+ {
4564
+ onClick: r,
4565
+ onMouseEnter: () => a(!0),
4566
+ onMouseLeave: () => a(!1),
4567
+ style: {
4568
+ display: "flex",
4569
+ alignItems: "center",
4570
+ gap: "var(--lucent-space-2)",
4571
+ width: "100%",
4572
+ textAlign: "left",
4573
+ padding: "var(--lucent-space-2) var(--lucent-space-3)",
4574
+ borderRadius: "var(--lucent-radius-md)",
4575
+ border: "none",
4576
+ background: o ? "var(--lucent-bg-subtle)" : "transparent",
4577
+ color: "var(--lucent-text-primary)",
4578
+ fontFamily: "var(--lucent-font-family-base)",
4579
+ fontSize: "var(--lucent-font-size-xs)",
4580
+ fontWeight: n ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
4581
+ cursor: "pointer",
4582
+ outline: "none",
4583
+ whiteSpace: "nowrap"
4584
+ },
4585
+ children: [
4586
+ /* @__PURE__ */ e("span", { style: {
4587
+ flexShrink: 0,
4588
+ width: 14,
4589
+ height: 14,
4590
+ borderRadius: "var(--lucent-radius-sm)",
4591
+ border: `1.5px solid ${n ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)"}`,
4592
+ background: n ? "var(--lucent-accent-default)" : "transparent",
4593
+ display: "flex",
4594
+ alignItems: "center",
4595
+ justifyContent: "center",
4596
+ transition: "border-color var(--lucent-duration-fast), background var(--lucent-duration-fast)"
4597
+ }, children: n && /* @__PURE__ */ e("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", "aria-hidden": !0, children: /* @__PURE__ */ e("path", { d: "M1 4L3 6L7 2", stroke: "var(--lucent-text-on-accent)", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
4598
+ t
4599
+ ]
4600
+ }
4601
+ );
4602
+ }
4340
4603
  function K({
4341
4604
  children: t,
4342
4605
  onClick: n,
4343
- disabled: a,
4606
+ disabled: r,
4344
4607
  active: o,
4345
- ...r
4608
+ ...a
4346
4609
  }) {
4347
- const [i, l] = M(!1);
4610
+ const [i, l] = q(!1);
4348
4611
  return /* @__PURE__ */ e(
4349
4612
  "button",
4350
4613
  {
4351
- ...r,
4614
+ ...a,
4352
4615
  onClick: n,
4353
- disabled: a,
4616
+ disabled: r,
4354
4617
  onMouseEnter: () => l(!0),
4355
4618
  onMouseLeave: () => l(!1),
4356
4619
  style: {
@@ -4362,32 +4625,32 @@ function K({
4362
4625
  padding: "0 var(--lucent-space-2)",
4363
4626
  borderRadius: "var(--lucent-radius-md)",
4364
4627
  border: o ? "1px solid var(--lucent-accent-default)" : "1px solid transparent",
4365
- background: o ? "var(--lucent-accent-default)" : i && !a ? "var(--lucent-bg-muted)" : "transparent",
4366
- color: o ? "var(--lucent-text-on-accent)" : a ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
4628
+ background: o ? "var(--lucent-accent-default)" : i && !r ? "var(--lucent-bg-muted)" : "transparent",
4629
+ color: o ? "var(--lucent-text-on-accent)" : r ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
4367
4630
  fontSize: "var(--lucent-font-size-sm)",
4368
4631
  fontFamily: "var(--lucent-font-family-base)",
4369
4632
  fontWeight: "var(--lucent-font-weight-regular)",
4370
- cursor: a ? "not-allowed" : "pointer",
4633
+ cursor: r ? "not-allowed" : "pointer",
4371
4634
  transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)"
4372
4635
  },
4373
4636
  children: t
4374
4637
  }
4375
4638
  );
4376
4639
  }
4377
- const Qn = {
4640
+ const tr = {
4378
4641
  id: "data-table",
4379
4642
  name: "DataTable",
4380
4643
  tier: "molecule",
4381
4644
  domain: "neutral",
4382
4645
  specVersion: "1.0",
4383
- description: "A sortable, paginated data table with configurable columns, custom cell renderers, and keyboard-accessible pagination controls.",
4384
- designIntent: "DataTable is generic over row type T so TypeScript consumers get full type safety on column keys and renderers. Sorting is client-side and composable — each column opts in via sortable:true; clicking a sorted column cycles asc → desc → unsorted. Pagination is either controlled (page prop + onPageChange) or uncontrolled (internal state). A pageSize of 0 disables pagination entirely, useful when the parent manages windowing. Column filtering is intentionally excluded here (see DataTable Filter issue #52) to keep the API focused. Row hover uses bg-subtle, not a border change, so the visual weight stays low for dense data views.",
4646
+ description: "A sortable, filterable, paginated data table with configurable columns, custom cell renderers, and keyboard-accessible pagination controls.",
4647
+ designIntent: 'DataTable is generic over row type T so TypeScript consumers get full type safety on column keys and renderers. Sorting is client-side and composable — each column opts in via sortable:true; clicking a sorted column cycles asc → desc → unsorted. Filtering is per-column — each column opts in via filterable:true, which adds a dropdown button above the table. Each dropdown is searchable and multi-select: a search input filters the option list, and each option is a checkbox that toggles membership in the active set. Filtering uses set-membership: a row passes if its column value is included in the selected values array. A "Clear selection" link inside each dropdown clears that column; a "Clear all" button in the bar appears when any filter is active. Filter → sort → paginate is the fixed pipeline order; any filter change resets the page to 0. Pagination is either controlled (page prop + onPageChange) or uncontrolled (internal state). A pageSize of 0 disables pagination entirely, useful when the parent manages windowing. Row hover uses bg-subtle, not a border change, so the visual weight stays low for dense data views.',
4385
4648
  props: [
4386
4649
  {
4387
4650
  name: "columns",
4388
4651
  type: "array",
4389
4652
  required: !0,
4390
- description: "Column definitions. Each column has a key, header, optional render function, optional sortable flag, optional width, and optional text align."
4653
+ description: "Column definitions. Each column has a key, header, optional render function, optional sortable flag, optional filterable flag (renders a text filter input below the header), optional width, and optional text align."
4391
4654
  },
4392
4655
  {
4393
4656
  name: "rows",
@@ -4412,7 +4675,13 @@ const Qn = {
4412
4675
  name: "onPageChange",
4413
4676
  type: "function",
4414
4677
  required: !1,
4415
- description: "Called with the new page index whenever the page changes (from pagination controls or after a sort reset)."
4678
+ description: "Called with the new page index whenever the page changes (from pagination controls or after a sort/filter reset)."
4679
+ },
4680
+ {
4681
+ name: "onFilterChange",
4682
+ type: "function",
4683
+ required: !1,
4684
+ description: "Called with the current filter map (Record<string, string[]>) whenever any column filter changes. Keys are column keys; columns with no selection are omitted from the map."
4416
4685
  },
4417
4686
  {
4418
4687
  name: "emptyState",
@@ -4437,6 +4706,18 @@ const Qn = {
4437
4706
  { key: 'status', header: 'Status', render: (row) => <Badge>{row.status}</Badge> },
4438
4707
  ]}
4439
4708
  rows={users}
4709
+ />`
4710
+ },
4711
+ {
4712
+ title: "Sortable + filterable table",
4713
+ code: `<DataTable
4714
+ columns={[
4715
+ { key: 'name', header: 'Name', sortable: true, filterable: true },
4716
+ { key: 'role', header: 'Role', filterable: true },
4717
+ { key: 'status', header: 'Status', render: (row) => <Badge>{row.status}</Badge> },
4718
+ ]}
4719
+ rows={users}
4720
+ onFilterChange={(filters) => console.log(filters)}
4440
4721
  />`
4441
4722
  },
4442
4723
  {
@@ -4465,76 +4746,76 @@ const Qn = {
4465
4746
  keyboardInteractions: ["Tab to pagination controls", "Enter/Space to activate buttons"],
4466
4747
  notes: 'Column headers with sortable:true are interactive buttons with aria-sort reflecting the current sort direction. Pagination buttons include aria-label and aria-current="page" for the active page.'
4467
4748
  }
4468
- }, Dt = `
4749
+ }, Bt = `
4469
4750
  @keyframes lucent-palette-in {
4470
4751
  from { opacity: 0; transform: scale(0.96) translateY(-8px); }
4471
4752
  to { opacity: 1; transform: scale(1) translateY(0); }
4472
4753
  }
4473
4754
  `;
4474
- function At(t, n) {
4755
+ function Rt(t, n) {
4475
4756
  var o;
4476
- const a = n.toLowerCase();
4477
- return t.label.toLowerCase().includes(a) || (((o = t.description) == null ? void 0 : o.toLowerCase().includes(a)) ?? !1);
4757
+ const r = n.toLowerCase();
4758
+ return t.label.toLowerCase().includes(r) || (((o = t.description) == null ? void 0 : o.toLowerCase().includes(r)) ?? !1);
4478
4759
  }
4479
- function Zn({
4760
+ function nr({
4480
4761
  commands: t,
4481
4762
  placeholder: n = "Search commands…",
4482
- shortcutKey: a = "k",
4763
+ shortcutKey: r = "k",
4483
4764
  open: o,
4484
- onOpenChange: r,
4765
+ onOpenChange: a,
4485
4766
  style: i
4486
4767
  }) {
4487
- const l = o !== void 0, [s, u] = M(!1), m = l ? o : s, [b, d] = M(""), [p, c] = M(0), v = F(null), y = F(null), w = F(!1);
4488
- if (!w.current) {
4768
+ const l = o !== void 0, [s, d] = q(!1), m = l ? o : s, [g, u] = q(""), [f, c] = q(0), x = B(null), y = B(null), b = B(!1);
4769
+ if (!b.current) {
4489
4770
  const T = document.createElement("style");
4490
- T.textContent = Dt, document.head.appendChild(T), w.current = !0;
4771
+ T.textContent = Bt, document.head.appendChild(T), b.current = !0;
4491
4772
  }
4492
- const g = Z((T) => {
4493
- l || u(T), r == null || r(T);
4494
- }, [l, r]);
4495
- L(() => {
4773
+ const p = Z((T) => {
4774
+ l || d(T), a == null || a(T);
4775
+ }, [l, a]);
4776
+ $(() => {
4496
4777
  const T = (C) => {
4497
- (C.metaKey || C.ctrlKey) && C.key === a && (C.preventDefault(), g(!m));
4778
+ (C.metaKey || C.ctrlKey) && C.key === r && (C.preventDefault(), p(!m));
4498
4779
  };
4499
4780
  return window.addEventListener("keydown", T), () => window.removeEventListener("keydown", T);
4500
- }, [m, a, g]), L(() => {
4501
- m && (d(""), c(0), setTimeout(() => {
4781
+ }, [m, r, p]), $(() => {
4782
+ m && (u(""), c(0), setTimeout(() => {
4502
4783
  var T;
4503
- return (T = v.current) == null ? void 0 : T.focus();
4784
+ return (T = x.current) == null ? void 0 : T.focus();
4504
4785
  }, 10));
4505
4786
  }, [m]);
4506
- const x = b ? t.filter((T) => At(T, b)) : t, I = x.filter((T) => !T.disabled);
4507
- L(() => {
4787
+ const v = g ? t.filter((T) => Rt(T, g)) : t, M = v.filter((T) => !T.disabled);
4788
+ $(() => {
4508
4789
  const T = y.current;
4509
4790
  if (!T) return;
4510
4791
  const C = T.querySelector('[data-active="true"]');
4511
4792
  C == null || C.scrollIntoView({ block: "nearest" });
4512
- }, [p]);
4513
- const k = (T) => {
4514
- T.disabled || (T.onSelect(), g(!1));
4515
- }, f = (T) => {
4793
+ }, [f]);
4794
+ const w = (T) => {
4795
+ T.disabled || (T.onSelect(), p(!1));
4796
+ }, S = (T) => {
4516
4797
  if (T.key === "Escape") {
4517
- g(!1);
4798
+ p(!1);
4518
4799
  return;
4519
4800
  }
4520
- if (T.key === "ArrowDown" && (T.preventDefault(), c((C) => Math.min(C + 1, I.length - 1))), T.key === "ArrowUp" && (T.preventDefault(), c((C) => Math.max(C - 1, 0))), T.key === "Enter") {
4521
- const C = I[p];
4522
- C && k(C);
4801
+ if (T.key === "ArrowDown" && (T.preventDefault(), c((C) => Math.min(C + 1, M.length - 1))), T.key === "ArrowUp" && (T.preventDefault(), c((C) => Math.max(C - 1, 0))), T.key === "Enter") {
4802
+ const C = M[f];
4803
+ C && w(C);
4523
4804
  }
4524
- }, S = [];
4525
- for (const T of x) {
4526
- const C = S[S.length - 1];
4527
- C && C.group === T.group ? C.items.push(T) : S.push({ group: T.group, items: [T] });
4805
+ }, E = [];
4806
+ for (const T of v) {
4807
+ const C = E[E.length - 1];
4808
+ C && C.group === T.group ? C.items.push(T) : E.push({ group: T.group, items: [T] });
4528
4809
  }
4529
4810
  if (!m) return null;
4530
- let D = 0;
4811
+ let F = 0;
4531
4812
  return /* @__PURE__ */ e(
4532
4813
  "div",
4533
4814
  {
4534
4815
  role: "dialog",
4535
4816
  "aria-label": "Command palette",
4536
4817
  "aria-modal": "true",
4537
- onClick: () => g(!1),
4818
+ onClick: () => p(!1),
4538
4819
  style: {
4539
4820
  position: "fixed",
4540
4821
  inset: 0,
@@ -4570,7 +4851,7 @@ function Zn({
4570
4851
  alignItems: "center",
4571
4852
  gap: "var(--lucent-space-3)",
4572
4853
  padding: "var(--lucent-space-3) var(--lucent-space-4)",
4573
- borderBottom: x.length > 0 ? "1px solid var(--lucent-border-subtle)" : "none"
4854
+ borderBottom: v.length > 0 ? "1px solid var(--lucent-border-subtle)" : "none"
4574
4855
  }, children: [
4575
4856
  /* @__PURE__ */ h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": !0, style: { flexShrink: 0, color: "var(--lucent-text-secondary)" }, children: [
4576
4857
  /* @__PURE__ */ e("circle", { cx: "7", cy: "7", r: "4.5", stroke: "currentColor", strokeWidth: "1.5" }),
@@ -4579,15 +4860,15 @@ function Zn({
4579
4860
  /* @__PURE__ */ e(
4580
4861
  "input",
4581
4862
  {
4582
- ref: v,
4863
+ ref: x,
4583
4864
  role: "searchbox",
4584
4865
  "aria-autocomplete": "list",
4585
4866
  "aria-controls": "lucent-command-list",
4586
- value: b,
4867
+ value: g,
4587
4868
  onChange: (T) => {
4588
- d(T.target.value), c(0);
4869
+ u(T.target.value), c(0);
4589
4870
  },
4590
- onKeyDown: f,
4871
+ onKeyDown: S,
4591
4872
  placeholder: n,
4592
4873
  style: {
4593
4874
  flex: 1,
@@ -4620,30 +4901,30 @@ function Zn({
4620
4901
  role: "listbox",
4621
4902
  ref: y,
4622
4903
  style: { maxHeight: 360, overflowY: "auto", padding: "var(--lucent-space-1) 0" },
4623
- children: x.length === 0 ? /* @__PURE__ */ e("div", { style: { padding: "var(--lucent-space-8)", textAlign: "center" }, children: /* @__PURE__ */ h(E, { color: "secondary", children: [
4904
+ children: v.length === 0 ? /* @__PURE__ */ e("div", { style: { padding: "var(--lucent-space-8)", textAlign: "center" }, children: /* @__PURE__ */ h(A, { color: "secondary", children: [
4624
4905
  'No results for "',
4625
- b,
4906
+ g,
4626
4907
  '"'
4627
- ] }) }) : S.map(({ group: T, items: C }, P) => /* @__PURE__ */ h("div", { children: [
4908
+ ] }) }) : E.map(({ group: T, items: C }, W) => /* @__PURE__ */ h("div", { children: [
4628
4909
  T && /* @__PURE__ */ e("div", { style: {
4629
4910
  padding: "var(--lucent-space-2) var(--lucent-space-4) var(--lucent-space-1)",
4630
- ...P > 0 ? { borderTop: "1px solid var(--lucent-border-subtle)", marginTop: "var(--lucent-space-1)" } : {}
4631
- }, children: /* @__PURE__ */ e(E, { size: "xs", color: "secondary", weight: "medium", children: T }) }),
4632
- C.map((B) => {
4633
- const $ = B.disabled ?? !1;
4634
- let z = !1;
4635
- return $ || (z = D === p, D++), /* @__PURE__ */ h(
4911
+ ...W > 0 ? { borderTop: "1px solid var(--lucent-border-subtle)", marginTop: "var(--lucent-space-1)" } : {}
4912
+ }, children: /* @__PURE__ */ e(A, { size: "xs", color: "secondary", weight: "medium", children: T }) }),
4913
+ C.map((D) => {
4914
+ const z = D.disabled ?? !1;
4915
+ let k = !1;
4916
+ return z || (k = F === f, F++), /* @__PURE__ */ h(
4636
4917
  "div",
4637
4918
  {
4638
4919
  role: "option",
4639
- "aria-selected": z,
4640
- "aria-disabled": $,
4641
- "data-active": z,
4642
- onClick: () => k(B),
4920
+ "aria-selected": k,
4921
+ "aria-disabled": z,
4922
+ "data-active": k,
4923
+ onClick: () => w(D),
4643
4924
  onMouseEnter: () => {
4644
- if (!$) {
4645
- const q = I.indexOf(B);
4646
- q !== -1 && c(q);
4925
+ if (!z) {
4926
+ const I = M.indexOf(D);
4927
+ I !== -1 && c(I);
4647
4928
  }
4648
4929
  },
4649
4930
  style: {
@@ -4651,23 +4932,23 @@ function Zn({
4651
4932
  alignItems: "center",
4652
4933
  gap: "var(--lucent-space-3)",
4653
4934
  padding: "var(--lucent-space-2) var(--lucent-space-4)",
4654
- cursor: $ ? "not-allowed" : "pointer",
4655
- background: z ? "var(--lucent-bg-muted)" : "transparent",
4935
+ cursor: z ? "not-allowed" : "pointer",
4936
+ background: k ? "var(--lucent-bg-muted)" : "transparent",
4656
4937
  transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)",
4657
- opacity: $ ? 0.5 : 1
4938
+ opacity: z ? 0.5 : 1
4658
4939
  },
4659
4940
  children: [
4660
- B.icon && /* @__PURE__ */ e("span", { style: { flexShrink: 0, color: "var(--lucent-text-secondary)", display: "flex" }, children: B.icon }),
4941
+ D.icon && /* @__PURE__ */ e("span", { style: { flexShrink: 0, color: "var(--lucent-text-secondary)", display: "flex" }, children: D.icon }),
4661
4942
  /* @__PURE__ */ h("div", { style: { flex: 1, minWidth: 0 }, children: [
4662
- /* @__PURE__ */ e(E, { size: "sm", weight: "medium", truncate: !0, children: B.label }),
4663
- B.description && /* @__PURE__ */ e(E, { size: "xs", color: "secondary", truncate: !0, children: B.description })
4943
+ /* @__PURE__ */ e(A, { size: "sm", weight: "medium", truncate: !0, children: D.label }),
4944
+ D.description && /* @__PURE__ */ e(A, { size: "xs", color: "secondary", truncate: !0, children: D.description })
4664
4945
  ] })
4665
4946
  ]
4666
4947
  },
4667
- B.id
4948
+ D.id
4668
4949
  );
4669
4950
  })
4670
- ] }, P))
4951
+ ] }, W))
4671
4952
  }
4672
4953
  ),
4673
4954
  /* @__PURE__ */ e("div", { style: {
@@ -4690,7 +4971,7 @@ function Zn({
4690
4971
  fontSize: "var(--lucent-font-size-xs)",
4691
4972
  color: "var(--lucent-text-secondary)"
4692
4973
  }, children: T }),
4693
- /* @__PURE__ */ e(E, { size: "xs", color: "secondary", children: C })
4974
+ /* @__PURE__ */ e(A, { size: "xs", color: "secondary", children: C })
4694
4975
  ] }, T)) })
4695
4976
  ]
4696
4977
  }
@@ -4698,7 +4979,7 @@ function Zn({
4698
4979
  }
4699
4980
  );
4700
4981
  }
4701
- const ea = {
4982
+ const rr = {
4702
4983
  id: "command-palette",
4703
4984
  name: "CommandPalette",
4704
4985
  tier: "overlay",
@@ -4781,7 +5062,7 @@ const ea = {
4781
5062
  notes: 'The backdrop and panel use role="dialog" with aria-modal="true". The input is role="searchbox". The result list is role="listbox" with role="option" items. Focus is moved to the search input on open.'
4782
5063
  }
4783
5064
  };
4784
- function Ft({ label: t, onRemove: n, disabled: a }) {
5065
+ function Nt({ label: t, onRemove: n, disabled: r }) {
4785
5066
  return /* @__PURE__ */ h("span", { style: {
4786
5067
  display: "inline-flex",
4787
5068
  alignItems: "center",
@@ -4797,7 +5078,7 @@ function Ft({ label: t, onRemove: n, disabled: a }) {
4797
5078
  flexShrink: 0
4798
5079
  }, children: [
4799
5080
  t,
4800
- !a && /* @__PURE__ */ e(
5081
+ !r && /* @__PURE__ */ e(
4801
5082
  "button",
4802
5083
  {
4803
5084
  type: "button",
@@ -4823,52 +5104,52 @@ function Ft({ label: t, onRemove: n, disabled: a }) {
4823
5104
  )
4824
5105
  ] });
4825
5106
  }
4826
- function ta({
5107
+ function ar({
4827
5108
  options: t,
4828
5109
  value: n,
4829
- defaultValue: a = [],
5110
+ defaultValue: r = [],
4830
5111
  onChange: o,
4831
- placeholder: r = "Select…",
5112
+ placeholder: a = "Select…",
4832
5113
  disabled: i = !1,
4833
5114
  max: l,
4834
5115
  style: s
4835
5116
  }) {
4836
- const u = n !== void 0, [m, b] = M(a), d = u ? n : m, [p, c] = M(!1), [v, y] = M(""), [w, g] = M(0), [x, I] = M(!1), k = F(null), f = F(null), S = ce();
4837
- L(() => {
4838
- if (!p) return;
4839
- const z = (q) => {
5117
+ const d = n !== void 0, [m, g] = q(r), u = d ? n : m, [f, c] = q(!1), [x, y] = q(""), [b, p] = q(0), [v, M] = q(!1), w = B(null), S = B(null), E = ce();
5118
+ $(() => {
5119
+ if (!f) return;
5120
+ const k = (I) => {
4840
5121
  var R;
4841
- (R = k.current) != null && R.contains(q.target) || (c(!1), y(""));
5122
+ (R = w.current) != null && R.contains(I.target) || (c(!1), y(""));
4842
5123
  };
4843
- return document.addEventListener("mousedown", z), () => document.removeEventListener("mousedown", z);
4844
- }, [p]);
4845
- const D = (z) => {
4846
- const q = d.includes(z) ? d.filter((R) => R !== z) : l !== void 0 && d.length >= l ? d : [...d, z];
4847
- u || b(q), o == null || o(q);
4848
- }, T = (z) => {
4849
- const q = d.filter((R) => R !== z);
4850
- u || b(q), o == null || o(q);
5124
+ return document.addEventListener("mousedown", k), () => document.removeEventListener("mousedown", k);
5125
+ }, [f]);
5126
+ const F = (k) => {
5127
+ const I = u.includes(k) ? u.filter((R) => R !== k) : l !== void 0 && u.length >= l ? u : [...u, k];
5128
+ d || g(I), o == null || o(I);
5129
+ }, T = (k) => {
5130
+ const I = u.filter((R) => R !== k);
5131
+ d || g(I), o == null || o(I);
4851
5132
  }, C = t.filter(
4852
- (z) => z.label.toLowerCase().includes(v.toLowerCase())
4853
- ), P = (z) => {
4854
- if (z.key === "Escape") {
5133
+ (k) => k.label.toLowerCase().includes(x.toLowerCase())
5134
+ ), W = (k) => {
5135
+ if (k.key === "Escape") {
4855
5136
  c(!1), y("");
4856
5137
  return;
4857
5138
  }
4858
- if (z.key === "ArrowDown" && (z.preventDefault(), c(!0), g((q) => Math.min(q + 1, C.length - 1))), z.key === "ArrowUp" && (z.preventDefault(), g((q) => Math.max(q - 1, 0))), z.key === "Enter") {
4859
- z.preventDefault();
4860
- const q = C[w];
4861
- q && !q.disabled && D(q.value);
5139
+ if (k.key === "ArrowDown" && (k.preventDefault(), c(!0), p((I) => Math.min(I + 1, C.length - 1))), k.key === "ArrowUp" && (k.preventDefault(), p((I) => Math.max(I - 1, 0))), k.key === "Enter") {
5140
+ k.preventDefault();
5141
+ const I = C[b];
5142
+ I && !I.disabled && F(I.value);
4862
5143
  }
4863
- z.key === "Backspace" && v === "" && d.length > 0 && T(d[d.length - 1]);
4864
- }, B = l !== void 0 && d.length >= l, $ = i ? "var(--lucent-border-default)" : x ? "var(--lucent-accent-default)" : "var(--lucent-border-default)";
4865
- return /* @__PURE__ */ h("div", { ref: k, style: { position: "relative", ...s }, children: [
5144
+ k.key === "Backspace" && x === "" && u.length > 0 && T(u[u.length - 1]);
5145
+ }, D = l !== void 0 && u.length >= l, z = i ? "var(--lucent-border-default)" : v ? "var(--lucent-accent-default)" : "var(--lucent-border-default)";
5146
+ return /* @__PURE__ */ h("div", { ref: w, style: { position: "relative", ...s }, children: [
4866
5147
  /* @__PURE__ */ h(
4867
5148
  "div",
4868
5149
  {
4869
5150
  onClick: () => {
4870
- var z;
4871
- i || (c(!0), (z = f.current) == null || z.focus());
5151
+ var k;
5152
+ i || (c(!0), (k = S.current) == null || k.focus());
4872
5153
  },
4873
5154
  style: {
4874
5155
  display: "flex",
@@ -4878,34 +5159,34 @@ function ta({
4878
5159
  minHeight: 38,
4879
5160
  padding: "var(--lucent-space-1) var(--lucent-space-3)",
4880
5161
  borderRadius: "var(--lucent-radius-md)",
4881
- border: `1px solid ${$}`,
5162
+ border: `1px solid ${z}`,
4882
5163
  background: i ? "var(--lucent-bg-muted)" : "var(--lucent-surface-default)",
4883
5164
  cursor: i ? "not-allowed" : "text",
4884
5165
  transition: "border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
4885
- outline: x ? "2px solid var(--lucent-focus-ring)" : "none",
5166
+ outline: v ? "2px solid var(--lucent-focus-ring)" : "none",
4886
5167
  outlineOffset: 2
4887
5168
  },
4888
5169
  children: [
4889
- d.map((z) => {
4890
- const q = t.find((R) => R.value === z);
4891
- return q ? /* @__PURE__ */ e(Ft, { label: q.label, onRemove: () => T(z), disabled: i }, z) : null;
5170
+ u.map((k) => {
5171
+ const I = t.find((R) => R.value === k);
5172
+ return I ? /* @__PURE__ */ e(Nt, { label: I.label, onRemove: () => T(k), disabled: i }, k) : null;
4892
5173
  }),
4893
5174
  /* @__PURE__ */ e(
4894
5175
  "input",
4895
5176
  {
4896
- ref: f,
4897
- value: v,
4898
- onChange: (z) => {
4899
- y(z.target.value), c(!0), g(0);
5177
+ ref: S,
5178
+ value: x,
5179
+ onChange: (k) => {
5180
+ y(k.target.value), c(!0), p(0);
4900
5181
  },
4901
- onKeyDown: P,
4902
- onFocus: () => I(!0),
4903
- onBlur: () => I(!1),
5182
+ onKeyDown: W,
5183
+ onFocus: () => M(!0),
5184
+ onBlur: () => M(!1),
4904
5185
  disabled: i,
4905
- placeholder: d.length === 0 ? r : "",
5186
+ placeholder: u.length === 0 ? a : "",
4906
5187
  "aria-autocomplete": "list",
4907
- "aria-controls": S,
4908
- "aria-expanded": p,
5188
+ "aria-controls": E,
5189
+ "aria-expanded": f,
4909
5190
  role: "combobox",
4910
5191
  style: {
4911
5192
  flex: "1 1 80px",
@@ -4924,10 +5205,10 @@ function ta({
4924
5205
  ]
4925
5206
  }
4926
5207
  ),
4927
- p && !i && /* @__PURE__ */ h(
5208
+ f && !i && /* @__PURE__ */ h(
4928
5209
  "div",
4929
5210
  {
4930
- id: S,
5211
+ id: E,
4931
5212
  role: "listbox",
4932
5213
  "aria-multiselectable": "true",
4933
5214
  style: {
@@ -4945,49 +5226,49 @@ function ta({
4945
5226
  padding: "var(--lucent-space-1) 0"
4946
5227
  },
4947
5228
  children: [
4948
- C.length === 0 ? /* @__PURE__ */ e("div", { style: { padding: "var(--lucent-space-3) var(--lucent-space-4)" }, children: /* @__PURE__ */ e(E, { color: "secondary", size: "sm", children: "No options" }) }) : C.map((z, q) => {
4949
- const R = d.includes(z.value), O = q === w, V = z.disabled ?? !1, H = B && !R;
5229
+ C.length === 0 ? /* @__PURE__ */ e("div", { style: { padding: "var(--lucent-space-3) var(--lucent-space-4)" }, children: /* @__PURE__ */ e(A, { color: "secondary", size: "sm", children: "No options" }) }) : C.map((k, I) => {
5230
+ const R = u.includes(k.value), V = I === b, O = k.disabled ?? !1, H = D && !R;
4950
5231
  return /* @__PURE__ */ h(
4951
5232
  "div",
4952
5233
  {
4953
5234
  role: "option",
4954
5235
  "aria-selected": R,
4955
- "aria-disabled": V || H,
5236
+ "aria-disabled": O || H,
4956
5237
  onClick: () => {
4957
- !V && !H && D(z.value);
5238
+ !O && !H && F(k.value);
4958
5239
  },
4959
- onMouseEnter: () => g(q),
5240
+ onMouseEnter: () => p(I),
4960
5241
  style: {
4961
5242
  display: "flex",
4962
5243
  alignItems: "center",
4963
5244
  gap: "var(--lucent-space-2)",
4964
5245
  padding: "var(--lucent-space-2) var(--lucent-space-3)",
4965
- cursor: V || H ? "not-allowed" : "pointer",
4966
- background: O ? "var(--lucent-bg-subtle)" : "transparent",
4967
- opacity: V || H ? 0.5 : 1
5246
+ cursor: O || H ? "not-allowed" : "pointer",
5247
+ background: V ? "var(--lucent-bg-subtle)" : "transparent",
5248
+ opacity: O || H ? 0.5 : 1
4968
5249
  },
4969
5250
  children: [
4970
5251
  /* @__PURE__ */ e(
4971
5252
  ue,
4972
5253
  {
4973
5254
  checked: R,
4974
- disabled: V || H,
5255
+ disabled: O || H,
4975
5256
  size: "md",
4976
5257
  style: { margin: 0, pointerEvents: "none" },
4977
5258
  "aria-hidden": !0,
4978
5259
  readOnly: !0
4979
5260
  }
4980
5261
  ),
4981
- /* @__PURE__ */ e(E, { size: "sm", children: z.label })
5262
+ /* @__PURE__ */ e(A, { size: "sm", children: k.label })
4982
5263
  ]
4983
5264
  },
4984
- z.value
5265
+ k.value
4985
5266
  );
4986
5267
  }),
4987
- B && /* @__PURE__ */ e("div", { style: {
5268
+ D && /* @__PURE__ */ e("div", { style: {
4988
5269
  padding: "var(--lucent-space-2) var(--lucent-space-3)",
4989
5270
  borderTop: "1px solid var(--lucent-border-subtle)"
4990
- }, children: /* @__PURE__ */ h(E, { size: "xs", color: "secondary", children: [
5271
+ }, children: /* @__PURE__ */ h(A, { size: "xs", color: "secondary", children: [
4991
5272
  "Max ",
4992
5273
  l,
4993
5274
  " selected"
@@ -4997,7 +5278,7 @@ function ta({
4997
5278
  )
4998
5279
  ] });
4999
5280
  }
5000
- const na = {
5281
+ const or = {
5001
5282
  id: "multi-select",
5002
5283
  name: "MultiSelect",
5003
5284
  tier: "molecule",
@@ -5092,10 +5373,10 @@ const na = {
5092
5373
  notes: 'The input carries role="combobox" with aria-expanded and aria-controls pointing to the listbox. Each option has role="option" with aria-selected. Remove buttons on tags have descriptive aria-label.'
5093
5374
  }
5094
5375
  };
5095
- function Bt(t, n) {
5376
+ function Lt(t, n) {
5096
5377
  return new Date(t, n + 1, 0).getDate();
5097
5378
  }
5098
- function Rt(t, n) {
5379
+ function $t(t, n) {
5099
5380
  return new Date(t, n, 1).getDay();
5100
5381
  }
5101
5382
  function Y(t, n) {
@@ -5104,10 +5385,10 @@ function Y(t, n) {
5104
5385
  function X(t, n) {
5105
5386
  return new Date(t.getFullYear(), t.getMonth(), t.getDate()) < new Date(n.getFullYear(), n.getMonth(), n.getDate());
5106
5387
  }
5107
- function ae(t, n) {
5388
+ function re(t, n) {
5108
5389
  return new Date(t.getFullYear(), t.getMonth(), t.getDate()) > new Date(n.getFullYear(), n.getMonth(), n.getDate());
5109
5390
  }
5110
- const Nt = [
5391
+ const Wt = [
5111
5392
  "January",
5112
5393
  "February",
5113
5394
  "March",
@@ -5120,20 +5401,20 @@ const Nt = [
5120
5401
  "October",
5121
5402
  "November",
5122
5403
  "December"
5123
- ], Lt = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
5404
+ ], Vt = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
5124
5405
  function j(t) {
5125
5406
  return `${t.getFullYear()}-${String(t.getMonth() + 1).padStart(2, "0")}-${String(t.getDate()).padStart(2, "0")}`;
5126
5407
  }
5127
- function re({ dir: t, onClick: n, disabled: a }) {
5128
- const [o, r] = M(!1);
5408
+ function ae({ dir: t, onClick: n, disabled: r }) {
5409
+ const [o, a] = q(!1);
5129
5410
  return /* @__PURE__ */ e(
5130
5411
  "button",
5131
5412
  {
5132
5413
  type: "button",
5133
5414
  onClick: n,
5134
- disabled: a,
5135
- onMouseEnter: () => r(!0),
5136
- onMouseLeave: () => r(!1),
5415
+ disabled: r,
5416
+ onMouseEnter: () => a(!0),
5417
+ onMouseLeave: () => a(!1),
5137
5418
  "aria-label": t === "prev" ? "Previous month" : "Next month",
5138
5419
  style: {
5139
5420
  display: "inline-flex",
@@ -5143,9 +5424,9 @@ function re({ dir: t, onClick: n, disabled: a }) {
5143
5424
  height: 28,
5144
5425
  border: "none",
5145
5426
  borderRadius: "var(--lucent-radius-md)",
5146
- background: o && !a ? "var(--lucent-bg-muted)" : "transparent",
5147
- color: a ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
5148
- cursor: a ? "not-allowed" : "pointer",
5427
+ background: o && !r ? "var(--lucent-bg-muted)" : "transparent",
5428
+ color: r ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
5429
+ cursor: r ? "not-allowed" : "pointer",
5149
5430
  transition: "background var(--lucent-duration-fast)"
5150
5431
  },
5151
5432
  children: /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": !0, children: /* @__PURE__ */ e(
@@ -5164,118 +5445,118 @@ function re({ dir: t, onClick: n, disabled: a }) {
5164
5445
  function J({
5165
5446
  year: t,
5166
5447
  month: n,
5167
- selected: a,
5448
+ selected: r,
5168
5449
  today: o,
5169
- min: r,
5450
+ min: a,
5170
5451
  max: i,
5171
5452
  onSelect: l,
5172
5453
  onPrevMonth: s,
5173
- onNextMonth: u,
5454
+ onNextMonth: d,
5174
5455
  highlightRange: m
5175
5456
  }) {
5176
- const b = Bt(t, n), d = Rt(t, n), [p, c] = M(null), v = [
5177
- ...Array(d).fill(null),
5178
- ...Array.from({ length: b }, (y, w) => w + 1)
5457
+ const g = Lt(t, n), u = $t(t, n), [f, c] = q(null), x = [
5458
+ ...Array(u).fill(null),
5459
+ ...Array.from({ length: g }, (y, b) => b + 1)
5179
5460
  ];
5180
- for (; v.length % 7 !== 0; ) v.push(null);
5461
+ for (; x.length % 7 !== 0; ) x.push(null);
5181
5462
  return /* @__PURE__ */ h("div", { children: [
5182
5463
  /* @__PURE__ */ h("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "var(--lucent-space-3)" }, children: [
5183
- /* @__PURE__ */ e(re, { dir: "prev", onClick: s }),
5184
- /* @__PURE__ */ h(E, { weight: "medium", size: "sm", children: [
5185
- Nt[n],
5464
+ /* @__PURE__ */ e(ae, { dir: "prev", onClick: s }),
5465
+ /* @__PURE__ */ h(A, { weight: "medium", size: "sm", children: [
5466
+ Wt[n],
5186
5467
  " ",
5187
5468
  t
5188
5469
  ] }),
5189
- /* @__PURE__ */ e(re, { dir: "next", onClick: u })
5470
+ /* @__PURE__ */ e(ae, { dir: "next", onClick: d })
5190
5471
  ] }),
5191
- /* @__PURE__ */ e("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2, marginBottom: "var(--lucent-space-1)" }, children: Lt.map((y) => /* @__PURE__ */ e("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ e(E, { size: "xs", color: "secondary", children: y }) }, y)) }),
5192
- /* @__PURE__ */ e("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2 }, children: v.map((y, w) => {
5193
- if (!y) return /* @__PURE__ */ e("div", {}, w);
5194
- const g = new Date(t, n, y), x = a ? Y(g, a) : !1, I = Y(g, o), k = (r ? X(g, r) : !1) || (i ? ae(g, i) : !1);
5195
- let f = !1;
5196
- return m != null && m.start && (m != null && m.end) && (f = !X(g, m.start) && !ae(g, m.end)), /* @__PURE__ */ e(
5472
+ /* @__PURE__ */ e("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2, marginBottom: "var(--lucent-space-1)" }, children: Vt.map((y) => /* @__PURE__ */ e("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ e(A, { size: "xs", color: "secondary", children: y }) }, y)) }),
5473
+ /* @__PURE__ */ e("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2 }, children: x.map((y, b) => {
5474
+ if (!y) return /* @__PURE__ */ e("div", {}, b);
5475
+ const p = new Date(t, n, y), v = r ? Y(p, r) : !1, M = Y(p, o), w = (a ? X(p, a) : !1) || (i ? re(p, i) : !1);
5476
+ let S = !1;
5477
+ return m != null && m.start && (m != null && m.end) && (S = !X(p, m.start) && !re(p, m.end)), /* @__PURE__ */ e(
5197
5478
  "button",
5198
5479
  {
5199
5480
  type: "button",
5200
- disabled: k,
5201
- onClick: () => !k && l(g),
5481
+ disabled: w,
5482
+ onClick: () => !w && l(p),
5202
5483
  onMouseEnter: () => c(y),
5203
5484
  onMouseLeave: () => c(null),
5204
- "aria-label": j(g),
5205
- "aria-pressed": x,
5485
+ "aria-label": j(p),
5486
+ "aria-pressed": v,
5206
5487
  style: {
5207
5488
  display: "flex",
5208
5489
  alignItems: "center",
5209
5490
  justifyContent: "center",
5210
5491
  height: 32,
5211
5492
  width: "100%",
5212
- border: I && !x ? "1px solid var(--lucent-border-strong)" : "1px solid transparent",
5493
+ border: M && !v ? "1px solid var(--lucent-border-strong)" : "1px solid transparent",
5213
5494
  borderRadius: "var(--lucent-radius-md)",
5214
- background: x ? "var(--lucent-accent-default)" : f ? "var(--lucent-accent-subtle)" : p === y && !k ? "var(--lucent-bg-muted)" : "transparent",
5215
- color: x ? "var(--lucent-text-on-accent)" : k ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
5495
+ background: v ? "var(--lucent-accent-default)" : S ? "var(--lucent-accent-subtle)" : f === y && !w ? "var(--lucent-bg-muted)" : "transparent",
5496
+ color: v ? "var(--lucent-text-on-accent)" : w ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
5216
5497
  fontSize: "var(--lucent-font-size-sm)",
5217
5498
  fontFamily: "var(--lucent-font-family-base)",
5218
- fontWeight: I ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
5219
- cursor: k ? "not-allowed" : "pointer",
5499
+ fontWeight: M ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
5500
+ cursor: w ? "not-allowed" : "pointer",
5220
5501
  transition: "background var(--lucent-duration-fast)"
5221
5502
  },
5222
5503
  children: y
5223
5504
  },
5224
- w
5505
+ b
5225
5506
  );
5226
5507
  }) })
5227
5508
  ] });
5228
5509
  }
5229
- function aa({
5510
+ function ir({
5230
5511
  value: t,
5231
5512
  defaultValue: n,
5232
- onChange: a,
5513
+ onChange: r,
5233
5514
  placeholder: o = "Pick a date",
5234
- disabled: r = !1,
5515
+ disabled: a = !1,
5235
5516
  min: i,
5236
5517
  max: l,
5237
5518
  style: s
5238
5519
  }) {
5239
- const u = t !== void 0, [m, b] = M(n), d = u ? t : m, p = /* @__PURE__ */ new Date(), [c, v] = M((d ?? p).getFullYear()), [y, w] = M((d ?? p).getMonth()), [g, x] = M(!1), [I, k] = M(!1), f = F(null);
5240
- L(() => {
5241
- if (!g) return;
5242
- const C = (P) => {
5243
- var B;
5244
- (B = f.current) != null && B.contains(P.target) || x(!1);
5520
+ const d = t !== void 0, [m, g] = q(n), u = d ? t : m, f = /* @__PURE__ */ new Date(), [c, x] = q((u ?? f).getFullYear()), [y, b] = q((u ?? f).getMonth()), [p, v] = q(!1), [M, w] = q(!1), S = B(null);
5521
+ $(() => {
5522
+ if (!p) return;
5523
+ const C = (W) => {
5524
+ var D;
5525
+ (D = S.current) != null && D.contains(W.target) || v(!1);
5245
5526
  };
5246
5527
  return document.addEventListener("mousedown", C), () => document.removeEventListener("mousedown", C);
5247
- }, [g]);
5248
- const S = (C) => {
5249
- u || b(C), a == null || a(C), x(!1);
5250
- }, D = () => {
5251
- y === 0 ? (w(11), v((C) => C - 1)) : w((C) => C - 1);
5528
+ }, [p]);
5529
+ const E = (C) => {
5530
+ d || g(C), r == null || r(C), v(!1);
5531
+ }, F = () => {
5532
+ y === 0 ? (b(11), x((C) => C - 1)) : b((C) => C - 1);
5252
5533
  }, T = () => {
5253
- y === 11 ? (w(0), v((C) => C + 1)) : w((C) => C + 1);
5534
+ y === 11 ? (b(0), x((C) => C + 1)) : b((C) => C + 1);
5254
5535
  };
5255
- return /* @__PURE__ */ h("div", { ref: f, style: { position: "relative", display: "inline-block", ...s }, children: [
5536
+ return /* @__PURE__ */ h("div", { ref: S, style: { position: "relative", display: "inline-block", ...s }, children: [
5256
5537
  /* @__PURE__ */ h(
5257
5538
  "button",
5258
5539
  {
5259
5540
  type: "button",
5260
- disabled: r,
5261
- onClick: () => !r && x((C) => !C),
5262
- onFocus: () => k(!0),
5263
- onBlur: () => k(!1),
5541
+ disabled: a,
5542
+ onClick: () => !a && v((C) => !C),
5543
+ onFocus: () => w(!0),
5544
+ onBlur: () => w(!1),
5264
5545
  "aria-haspopup": "dialog",
5265
- "aria-expanded": g,
5546
+ "aria-expanded": p,
5266
5547
  style: {
5267
5548
  display: "inline-flex",
5268
5549
  alignItems: "center",
5269
5550
  gap: "var(--lucent-space-2)",
5270
5551
  padding: "var(--lucent-space-2) var(--lucent-space-3)",
5271
5552
  borderRadius: "var(--lucent-radius-md)",
5272
- border: `1px solid ${I ? "var(--lucent-accent-default)" : "var(--lucent-border-default)"}`,
5273
- background: r ? "var(--lucent-bg-muted)" : "var(--lucent-surface-default)",
5274
- color: d ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
5553
+ border: `1px solid ${M ? "var(--lucent-accent-default)" : "var(--lucent-border-default)"}`,
5554
+ background: a ? "var(--lucent-bg-muted)" : "var(--lucent-surface-default)",
5555
+ color: u ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
5275
5556
  fontFamily: "var(--lucent-font-family-base)",
5276
5557
  fontSize: "var(--lucent-font-size-sm)",
5277
- cursor: r ? "not-allowed" : "pointer",
5278
- outline: I ? "2px solid var(--lucent-focus-ring)" : "none",
5558
+ cursor: a ? "not-allowed" : "pointer",
5559
+ outline: M ? "2px solid var(--lucent-focus-ring)" : "none",
5279
5560
  outlineOffset: 2,
5280
5561
  minWidth: 160,
5281
5562
  transition: "border-color var(--lucent-duration-fast)"
@@ -5286,11 +5567,11 @@ function aa({
5286
5567
  /* @__PURE__ */ e("path", { d: "M1 6h12", stroke: "currentColor", strokeWidth: "1.3" }),
5287
5568
  /* @__PURE__ */ e("path", { d: "M4 1v2M10 1v2", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round" })
5288
5569
  ] }),
5289
- /* @__PURE__ */ e("span", { style: { flex: 1, textAlign: "left" }, children: d ? j(d) : o })
5570
+ /* @__PURE__ */ e("span", { style: { flex: 1, textAlign: "left" }, children: u ? j(u) : o })
5290
5571
  ]
5291
5572
  }
5292
5573
  ),
5293
- g && /* @__PURE__ */ e(
5574
+ p && /* @__PURE__ */ e(
5294
5575
  "div",
5295
5576
  {
5296
5577
  role: "dialog",
@@ -5312,12 +5593,12 @@ function aa({
5312
5593
  {
5313
5594
  year: c,
5314
5595
  month: y,
5315
- ...d !== void 0 && { selected: d },
5316
- today: p,
5596
+ ...u !== void 0 && { selected: u },
5597
+ today: f,
5317
5598
  ...i !== void 0 && { min: i },
5318
5599
  ...l !== void 0 && { max: l },
5319
- onSelect: S,
5320
- onPrevMonth: D,
5600
+ onSelect: E,
5601
+ onPrevMonth: F,
5321
5602
  onNextMonth: T
5322
5603
  }
5323
5604
  )
@@ -5325,7 +5606,7 @@ function aa({
5325
5606
  )
5326
5607
  ] });
5327
5608
  }
5328
- const ra = {
5609
+ const lr = {
5329
5610
  id: "date-picker",
5330
5611
  name: "DatePicker",
5331
5612
  tier: "molecule",
@@ -5411,64 +5692,64 @@ const ra = {
5411
5692
  notes: 'The calendar popover is role="dialog". Each day button has aria-label with the full date and aria-pressed for selected state. Full arrow-key navigation within the calendar grid is a planned enhancement.'
5412
5693
  }
5413
5694
  };
5414
- function $t(t, n) {
5695
+ function Pt(t, n) {
5415
5696
  return t ? Y(t.start, t.end) ? j(t.start) : `${j(t.start)} → ${j(t.end)}` : n;
5416
5697
  }
5417
- function oa({
5698
+ function sr({
5418
5699
  value: t,
5419
5700
  defaultValue: n,
5420
- onChange: a,
5701
+ onChange: r,
5421
5702
  placeholder: o = "Pick a date range",
5422
- disabled: r = !1,
5703
+ disabled: a = !1,
5423
5704
  min: i,
5424
5705
  max: l,
5425
5706
  style: s
5426
5707
  }) {
5427
- const u = t !== void 0, [m, b] = M(n), d = u ? t : m, [p, c] = M(null), v = /* @__PURE__ */ new Date(), [y, w] = M(((d == null ? void 0 : d.start) ?? v).getFullYear()), [g, x] = M(((d == null ? void 0 : d.start) ?? v).getMonth()), I = g === 11 ? 0 : g + 1, k = g === 11 ? y + 1 : y, [f, S] = M(!1), [D, T] = M(!1), C = F(null);
5428
- L(() => {
5429
- if (!f) return;
5430
- const q = (R) => {
5431
- var O;
5432
- (O = C.current) != null && O.contains(R.target) || (S(!1), c(null));
5708
+ const d = t !== void 0, [m, g] = q(n), u = d ? t : m, [f, c] = q(null), x = /* @__PURE__ */ new Date(), [y, b] = q(((u == null ? void 0 : u.start) ?? x).getFullYear()), [p, v] = q(((u == null ? void 0 : u.start) ?? x).getMonth()), M = p === 11 ? 0 : p + 1, w = p === 11 ? y + 1 : y, [S, E] = q(!1), [F, T] = q(!1), C = B(null);
5709
+ $(() => {
5710
+ if (!S) return;
5711
+ const I = (R) => {
5712
+ var V;
5713
+ (V = C.current) != null && V.contains(R.target) || (E(!1), c(null));
5433
5714
  };
5434
- return document.addEventListener("mousedown", q), () => document.removeEventListener("mousedown", q);
5435
- }, [f]);
5436
- const P = (q) => {
5437
- if (!p)
5438
- c(q);
5715
+ return document.addEventListener("mousedown", I), () => document.removeEventListener("mousedown", I);
5716
+ }, [S]);
5717
+ const W = (I) => {
5718
+ if (!f)
5719
+ c(I);
5439
5720
  else {
5440
- const [R, O] = X(q, p) || Y(q, p) ? [q, p] : [p, q], V = { start: R, end: O };
5441
- u || b(V), a == null || a(V), c(null), S(!1);
5721
+ const [R, V] = X(I, f) || Y(I, f) ? [I, f] : [f, I], O = { start: R, end: V };
5722
+ d || g(O), r == null || r(O), c(null), E(!1);
5442
5723
  }
5443
- }, B = () => {
5444
- g === 0 ? (x(11), w((q) => q - 1)) : x((q) => q - 1);
5445
- }, $ = () => {
5446
- g === 11 ? (x(0), w((q) => q + 1)) : x((q) => q + 1);
5447
- }, z = p ? { start: p, end: p } : d ? { start: d.start, end: d.end } : void 0;
5724
+ }, D = () => {
5725
+ p === 0 ? (v(11), b((I) => I - 1)) : v((I) => I - 1);
5726
+ }, z = () => {
5727
+ p === 11 ? (v(0), b((I) => I + 1)) : v((I) => I + 1);
5728
+ }, k = f ? { start: f, end: f } : u ? { start: u.start, end: u.end } : void 0;
5448
5729
  return /* @__PURE__ */ h("div", { ref: C, style: { position: "relative", display: "inline-block", ...s }, children: [
5449
5730
  /* @__PURE__ */ h(
5450
5731
  "button",
5451
5732
  {
5452
5733
  type: "button",
5453
- disabled: r,
5454
- onClick: () => !r && S((q) => !q),
5734
+ disabled: a,
5735
+ onClick: () => !a && E((I) => !I),
5455
5736
  onFocus: () => T(!0),
5456
5737
  onBlur: () => T(!1),
5457
5738
  "aria-haspopup": "dialog",
5458
- "aria-expanded": f,
5739
+ "aria-expanded": S,
5459
5740
  style: {
5460
5741
  display: "inline-flex",
5461
5742
  alignItems: "center",
5462
5743
  gap: "var(--lucent-space-2)",
5463
5744
  padding: "var(--lucent-space-2) var(--lucent-space-3)",
5464
5745
  borderRadius: "var(--lucent-radius-md)",
5465
- border: `1px solid ${D ? "var(--lucent-accent-default)" : "var(--lucent-border-default)"}`,
5466
- background: r ? "var(--lucent-bg-muted)" : "var(--lucent-surface-default)",
5467
- color: d ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
5746
+ border: `1px solid ${F ? "var(--lucent-accent-default)" : "var(--lucent-border-default)"}`,
5747
+ background: a ? "var(--lucent-bg-muted)" : "var(--lucent-surface-default)",
5748
+ color: u ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
5468
5749
  fontFamily: "var(--lucent-font-family-base)",
5469
5750
  fontSize: "var(--lucent-font-size-sm)",
5470
- cursor: r ? "not-allowed" : "pointer",
5471
- outline: D ? "2px solid var(--lucent-focus-ring)" : "none",
5751
+ cursor: a ? "not-allowed" : "pointer",
5752
+ outline: F ? "2px solid var(--lucent-focus-ring)" : "none",
5472
5753
  outlineOffset: 2,
5473
5754
  minWidth: 220,
5474
5755
  transition: "border-color var(--lucent-duration-fast)"
@@ -5479,11 +5760,11 @@ function oa({
5479
5760
  /* @__PURE__ */ e("path", { d: "M1 6h12", stroke: "currentColor", strokeWidth: "1.3" }),
5480
5761
  /* @__PURE__ */ e("path", { d: "M4 1v2M10 1v2", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round" })
5481
5762
  ] }),
5482
- /* @__PURE__ */ e("span", { style: { flex: 1, textAlign: "left" }, children: $t(d, o) })
5763
+ /* @__PURE__ */ e("span", { style: { flex: 1, textAlign: "left" }, children: Pt(u, o) })
5483
5764
  ]
5484
5765
  }
5485
5766
  ),
5486
- f && /* @__PURE__ */ h(
5767
+ S && /* @__PURE__ */ h(
5487
5768
  "div",
5488
5769
  {
5489
5770
  role: "dialog",
@@ -5506,45 +5787,45 @@ function oa({
5506
5787
  J,
5507
5788
  {
5508
5789
  year: y,
5509
- month: g,
5510
- ...(d == null ? void 0 : d.start) !== void 0 && { selected: d.start },
5511
- today: v,
5790
+ month: p,
5791
+ ...(u == null ? void 0 : u.start) !== void 0 && { selected: u.start },
5792
+ today: x,
5512
5793
  ...i !== void 0 && { min: i },
5513
5794
  ...l !== void 0 && { max: l },
5514
- onSelect: P,
5515
- onPrevMonth: B,
5516
- onNextMonth: $,
5517
- ...z !== void 0 && { highlightRange: z }
5795
+ onSelect: W,
5796
+ onPrevMonth: D,
5797
+ onNextMonth: z,
5798
+ ...k !== void 0 && { highlightRange: k }
5518
5799
  }
5519
5800
  ) }),
5520
5801
  /* @__PURE__ */ e("div", { style: { width: 1, background: "var(--lucent-border-subtle)", flexShrink: 0 } }),
5521
5802
  /* @__PURE__ */ e("div", { style: { minWidth: 220 }, children: /* @__PURE__ */ e(
5522
5803
  J,
5523
5804
  {
5524
- year: k,
5525
- month: I,
5526
- ...(d == null ? void 0 : d.end) !== void 0 && { selected: d.end },
5527
- today: v,
5805
+ year: w,
5806
+ month: M,
5807
+ ...(u == null ? void 0 : u.end) !== void 0 && { selected: u.end },
5808
+ today: x,
5528
5809
  ...i !== void 0 && { min: i },
5529
5810
  ...l !== void 0 && { max: l },
5530
- onSelect: P,
5531
- onPrevMonth: B,
5532
- onNextMonth: $,
5533
- ...z !== void 0 && { highlightRange: z }
5811
+ onSelect: W,
5812
+ onPrevMonth: D,
5813
+ onNextMonth: z,
5814
+ ...k !== void 0 && { highlightRange: k }
5534
5815
  }
5535
5816
  ) })
5536
5817
  ]
5537
5818
  }
5538
5819
  ),
5539
- p && f && /* @__PURE__ */ e("div", { style: { position: "absolute", top: "calc(100% + 4px)", left: 0, zIndex: 1001, pointerEvents: "none" } }),
5540
- p && f && /* @__PURE__ */ e("div", { style: {
5820
+ f && S && /* @__PURE__ */ e("div", { style: { position: "absolute", top: "calc(100% + 4px)", left: 0, zIndex: 1001, pointerEvents: "none" } }),
5821
+ f && S && /* @__PURE__ */ e("div", { style: {
5541
5822
  position: "absolute",
5542
5823
  bottom: -24,
5543
5824
  left: 0
5544
- }, children: /* @__PURE__ */ e(E, { size: "xs", color: "secondary", children: "Now pick the end date" }) })
5825
+ }, children: /* @__PURE__ */ e(A, { size: "xs", color: "secondary", children: "Now pick the end date" }) })
5545
5826
  ] });
5546
5827
  }
5547
- const ia = {
5828
+ const cr = {
5548
5829
  id: "date-range-picker",
5549
5830
  name: "DateRangePicker",
5550
5831
  tier: "molecule",
@@ -5629,14 +5910,14 @@ const ia = {
5629
5910
  function Q(t) {
5630
5911
  return t < 1024 ? `${t} B` : t < 1024 * 1024 ? `${(t / 1024).toFixed(1)} KB` : `${(t / (1024 * 1024)).toFixed(1)} MB`;
5631
5912
  }
5632
- function Pt() {
5913
+ function Ot() {
5633
5914
  return Math.random().toString(36).slice(2);
5634
5915
  }
5635
- function Wt({
5916
+ function Ht({
5636
5917
  item: t,
5637
5918
  onRemove: n
5638
5919
  }) {
5639
- const [a, o] = M(!1), r = t.progress, i = !!t.error;
5920
+ const [r, o] = q(!1), a = t.progress, i = !!t.error;
5640
5921
  return /* @__PURE__ */ h("div", { style: {
5641
5922
  display: "flex",
5642
5923
  alignItems: "center",
@@ -5651,9 +5932,9 @@ function Wt({
5651
5932
  /* @__PURE__ */ e("path", { d: "M12 2v4h4", stroke: "currentColor", strokeWidth: "1.3" })
5652
5933
  ] }),
5653
5934
  /* @__PURE__ */ h("div", { style: { flex: 1, minWidth: 0 }, children: [
5654
- /* @__PURE__ */ e(E, { size: "sm", truncate: !0, children: t.file.name }),
5655
- i ? /* @__PURE__ */ e(E, { size: "xs", color: "danger", children: t.error }) : /* @__PURE__ */ e(E, { size: "xs", color: "secondary", children: Q(t.file.size) }),
5656
- r !== void 0 && !i && /* @__PURE__ */ e("div", { style: {
5935
+ /* @__PURE__ */ e(A, { size: "sm", truncate: !0, children: t.file.name }),
5936
+ i ? /* @__PURE__ */ e(A, { size: "xs", color: "danger", children: t.error }) : /* @__PURE__ */ e(A, { size: "xs", color: "secondary", children: Q(t.file.size) }),
5937
+ a !== void 0 && !i && /* @__PURE__ */ e("div", { style: {
5657
5938
  marginTop: 4,
5658
5939
  height: 3,
5659
5940
  borderRadius: "var(--lucent-radius-full)",
@@ -5661,9 +5942,9 @@ function Wt({
5661
5942
  overflow: "hidden"
5662
5943
  }, children: /* @__PURE__ */ e("div", { style: {
5663
5944
  height: "100%",
5664
- width: `${r}%`,
5945
+ width: `${a}%`,
5665
5946
  borderRadius: "var(--lucent-radius-full)",
5666
- background: r === 100 ? "var(--lucent-success-default)" : "var(--lucent-accent-default)",
5947
+ background: a === 100 ? "var(--lucent-success-default)" : "var(--lucent-accent-default)",
5667
5948
  transition: "width 200ms var(--lucent-easing-default)"
5668
5949
  } }) })
5669
5950
  ] }),
@@ -5684,7 +5965,7 @@ function Wt({
5684
5965
  height: 24,
5685
5966
  border: "none",
5686
5967
  borderRadius: "var(--lucent-radius-md)",
5687
- background: a ? "var(--lucent-bg-muted)" : "transparent",
5968
+ background: r ? "var(--lucent-bg-muted)" : "transparent",
5688
5969
  color: "var(--lucent-text-secondary)",
5689
5970
  cursor: "pointer",
5690
5971
  transition: "background var(--lucent-duration-fast)"
@@ -5694,37 +5975,37 @@ function Wt({
5694
5975
  )
5695
5976
  ] });
5696
5977
  }
5697
- function la({
5978
+ function dr({
5698
5979
  accept: t,
5699
5980
  multiple: n = !1,
5700
- maxSize: a,
5981
+ maxSize: r,
5701
5982
  value: o,
5702
- onChange: r,
5983
+ onChange: a,
5703
5984
  onError: i,
5704
5985
  disabled: l = !1,
5705
5986
  style: s
5706
5987
  }) {
5707
- const u = o !== void 0, [m, b] = M([]), d = u ? o : m, [p, c] = M(!1), [v, y] = M(!1), w = F(null), g = Z((f) => {
5708
- if (!f || l) return;
5709
- const S = [];
5710
- for (const T of Array.from(f)) {
5711
- if (a && T.size > a) {
5712
- i == null || i(`"${T.name}" exceeds the ${Q(a)} limit.`);
5988
+ const d = o !== void 0, [m, g] = q([]), u = d ? o : m, [f, c] = q(!1), [x, y] = q(!1), b = B(null), p = Z((S) => {
5989
+ if (!S || l) return;
5990
+ const E = [];
5991
+ for (const T of Array.from(S)) {
5992
+ if (r && T.size > r) {
5993
+ i == null || i(`"${T.name}" exceeds the ${Q(r)} limit.`);
5713
5994
  continue;
5714
5995
  }
5715
- if (!n && d.length + S.length >= 1) break;
5716
- S.push({ id: Pt(), file: T });
5996
+ if (!n && u.length + E.length >= 1) break;
5997
+ E.push({ id: Ot(), file: T });
5717
5998
  }
5718
- if (S.length === 0) return;
5719
- const D = n ? [...d, ...S] : S;
5720
- u || b(D), r == null || r(D);
5721
- }, [l, d, u, a, n, r, i]), x = (f) => {
5722
- const S = d.filter((D) => D.id !== f);
5723
- u || b(S), r == null || r(S);
5724
- }, I = (f) => {
5725
- f.preventDefault(), c(!1), g(f.dataTransfer.files);
5726
- }, k = (f) => {
5727
- g(f.target.files), f.target.value = "";
5999
+ if (E.length === 0) return;
6000
+ const F = n ? [...u, ...E] : E;
6001
+ d || g(F), a == null || a(F);
6002
+ }, [l, u, d, r, n, a, i]), v = (S) => {
6003
+ const E = u.filter((F) => F.id !== S);
6004
+ d || g(E), a == null || a(E);
6005
+ }, M = (S) => {
6006
+ S.preventDefault(), c(!1), p(S.dataTransfer.files);
6007
+ }, w = (S) => {
6008
+ p(S.target.files), S.target.value = "";
5728
6009
  };
5729
6010
  return /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-3)", ...s }, children: [
5730
6011
  /* @__PURE__ */ h(
@@ -5735,20 +6016,20 @@ function la({
5735
6016
  "aria-label": "Upload files",
5736
6017
  "aria-disabled": l,
5737
6018
  onClick: () => {
5738
- var f;
5739
- return !l && ((f = w.current) == null ? void 0 : f.click());
5740
- },
5741
- onKeyDown: (f) => {
5742
6019
  var S;
5743
- (f.key === "Enter" || f.key === " ") && (f.preventDefault(), (S = w.current) == null || S.click());
6020
+ return !l && ((S = b.current) == null ? void 0 : S.click());
6021
+ },
6022
+ onKeyDown: (S) => {
6023
+ var E;
6024
+ (S.key === "Enter" || S.key === " ") && (S.preventDefault(), (E = b.current) == null || E.click());
5744
6025
  },
5745
6026
  onFocus: () => y(!0),
5746
6027
  onBlur: () => y(!1),
5747
- onDragOver: (f) => {
5748
- f.preventDefault(), l || c(!0);
6028
+ onDragOver: (S) => {
6029
+ S.preventDefault(), l || c(!0);
5749
6030
  },
5750
6031
  onDragLeave: () => c(!1),
5751
- onDrop: I,
6032
+ onDrop: M,
5752
6033
  style: {
5753
6034
  display: "flex",
5754
6035
  flexDirection: "column",
@@ -5757,8 +6038,8 @@ function la({
5757
6038
  gap: "var(--lucent-space-2)",
5758
6039
  padding: "var(--lucent-space-8) var(--lucent-space-6)",
5759
6040
  borderRadius: "var(--lucent-radius-lg)",
5760
- border: `2px dashed ${l ? "var(--lucent-border-default)" : p || v ? "var(--lucent-accent-default)" : "var(--lucent-border-default)"}`,
5761
- background: p ? "var(--lucent-accent-subtle)" : "var(--lucent-bg-subtle)",
6041
+ border: `2px dashed ${l ? "var(--lucent-border-default)" : f || x ? "var(--lucent-accent-default)" : "var(--lucent-border-default)"}`,
6042
+ background: f ? "var(--lucent-accent-subtle)" : "var(--lucent-bg-subtle)",
5762
6043
  cursor: l ? "not-allowed" : "pointer",
5763
6044
  transition: "border-color var(--lucent-duration-fast), background var(--lucent-duration-fast)",
5764
6045
  outline: "none"
@@ -5772,7 +6053,7 @@ function la({
5772
6053
  viewBox: "0 0 32 32",
5773
6054
  fill: "none",
5774
6055
  "aria-hidden": !0,
5775
- style: { color: l ? "var(--lucent-text-disabled)" : p ? "var(--lucent-accent-default)" : "var(--lucent-text-secondary)" },
6056
+ style: { color: l ? "var(--lucent-text-disabled)" : f ? "var(--lucent-accent-default)" : "var(--lucent-text-secondary)" },
5776
6057
  children: [
5777
6058
  /* @__PURE__ */ e("path", { d: "M16 20V10M16 10l-4 4M16 10l4 4", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }),
5778
6059
  /* @__PURE__ */ e("path", { d: "M8 24h16", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })
@@ -5780,21 +6061,21 @@ function la({
5780
6061
  }
5781
6062
  ),
5782
6063
  /* @__PURE__ */ h("div", { style: { textAlign: "center" }, children: [
5783
- /* @__PURE__ */ e(E, { color: l ? "disabled" : "primary", weight: "medium", children: p ? "Drop to upload" : "Drop files here or click to browse" }),
5784
- (t || a) && /* @__PURE__ */ e(E, { size: "xs", color: "secondary", children: [
6064
+ /* @__PURE__ */ e(A, { color: l ? "disabled" : "primary", weight: "medium", children: f ? "Drop to upload" : "Drop files here or click to browse" }),
6065
+ (t || r) && /* @__PURE__ */ e(A, { size: "xs", color: "secondary", children: [
5785
6066
  t && `Accepted: ${t}`,
5786
- a && `Max size: ${Q(a)}`
6067
+ r && `Max size: ${Q(r)}`
5787
6068
  ].filter(Boolean).join(" · ") })
5788
6069
  ] }),
5789
6070
  /* @__PURE__ */ e(
5790
6071
  "input",
5791
6072
  {
5792
- ref: w,
6073
+ ref: b,
5793
6074
  type: "file",
5794
6075
  accept: t,
5795
6076
  multiple: n,
5796
6077
  disabled: l,
5797
- onChange: k,
6078
+ onChange: w,
5798
6079
  style: { display: "none" },
5799
6080
  tabIndex: -1
5800
6081
  }
@@ -5802,10 +6083,10 @@ function la({
5802
6083
  ]
5803
6084
  }
5804
6085
  ),
5805
- d.length > 0 && /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)" }, children: d.map((f) => /* @__PURE__ */ e(Wt, { item: f, onRemove: x }, f.id)) })
6086
+ u.length > 0 && /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)" }, children: u.map((S) => /* @__PURE__ */ e(Ht, { item: S, onRemove: v }, S.id)) })
5806
6087
  ] });
5807
6088
  }
5808
- const sa = {
6089
+ const ur = {
5809
6090
  id: "file-upload",
5810
6091
  name: "FileUpload",
5811
6092
  tier: "molecule",
@@ -5903,23 +6184,23 @@ const handleChange = async (updated: UploadFile[]) => {
5903
6184
  keyboardInteractions: ["Enter/Space to open file picker", "Tab to focus drop zone"],
5904
6185
  notes: 'The drop zone has role="button" with tabIndex=0 and responds to Enter/Space. Remove buttons on file rows have aria-label including the filename.'
5905
6186
  }
5906
- }, Vt = {
6187
+ }, jt = {
5907
6188
  default: "var(--lucent-border-strong)",
5908
6189
  success: "var(--lucent-success-default)",
5909
6190
  warning: "var(--lucent-warning-default)",
5910
6191
  danger: "var(--lucent-danger-default)",
5911
6192
  info: "var(--lucent-info-default)"
5912
- }, Ot = {
6193
+ }, Ut = {
5913
6194
  default: "var(--lucent-bg-muted)",
5914
6195
  success: "var(--lucent-success-subtle)",
5915
6196
  warning: "var(--lucent-warning-subtle)",
5916
6197
  danger: "var(--lucent-danger-subtle)",
5917
6198
  info: "var(--lucent-info-subtle)"
5918
6199
  };
5919
- function Ht({ status: t }) {
6200
+ function Gt({ status: t }) {
5920
6201
  return t === "success" ? /* @__PURE__ */ e("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": !0, children: /* @__PURE__ */ e("path", { d: "M2 5l2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) : t === "danger" ? /* @__PURE__ */ e("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": !0, children: /* @__PURE__ */ e("path", { d: "M2 2l6 6M8 2L2 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) : t === "warning" ? /* @__PURE__ */ e("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": !0, children: /* @__PURE__ */ e("path", { d: "M5 2v4M5 7.5v.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) : null;
5921
6202
  }
5922
- function ca({ items: t, style: n }) {
6203
+ function pr({ items: t, style: n }) {
5923
6204
  return /* @__PURE__ */ e(
5924
6205
  "ol",
5925
6206
  {
@@ -5931,8 +6212,8 @@ function ca({ items: t, style: n }) {
5931
6212
  flexDirection: "column",
5932
6213
  ...n
5933
6214
  },
5934
- children: t.map((a, o) => {
5935
- const r = a.status ?? "default", i = Vt[r], l = Ot[r], s = o === t.length - 1;
6215
+ children: t.map((r, o) => {
6216
+ const a = r.status ?? "default", i = jt[a], l = Ut[a], s = o === t.length - 1;
5936
6217
  return /* @__PURE__ */ h(
5937
6218
  "li",
5938
6219
  {
@@ -5961,7 +6242,7 @@ function ca({ items: t, style: n }) {
5961
6242
  color: i,
5962
6243
  flexShrink: 0,
5963
6244
  zIndex: 1
5964
- }, children: a.icon ?? /* @__PURE__ */ e(Ht, { status: r }) }),
6245
+ }, children: r.icon ?? /* @__PURE__ */ e(Gt, { status: a }) }),
5965
6246
  !s && /* @__PURE__ */ e("div", { style: {
5966
6247
  flex: 1,
5967
6248
  width: 2,
@@ -5976,20 +6257,20 @@ function ca({ items: t, style: n }) {
5976
6257
  paddingTop: 4
5977
6258
  }, children: [
5978
6259
  /* @__PURE__ */ h("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: "var(--lucent-space-3)", flexWrap: "wrap" }, children: [
5979
- /* @__PURE__ */ e(E, { weight: "medium", size: "sm", children: a.title }),
5980
- a.date && /* @__PURE__ */ e(E, { size: "xs", color: "secondary", children: a.date })
6260
+ /* @__PURE__ */ e(A, { weight: "medium", size: "sm", children: r.title }),
6261
+ r.date && /* @__PURE__ */ e(A, { size: "xs", color: "secondary", children: r.date })
5981
6262
  ] }),
5982
- a.description && /* @__PURE__ */ e("div", { style: { marginTop: "var(--lucent-space-1)" }, children: /* @__PURE__ */ e(E, { size: "sm", color: "secondary", children: a.description }) })
6263
+ r.description && /* @__PURE__ */ e("div", { style: { marginTop: "var(--lucent-space-1)" }, children: /* @__PURE__ */ e(A, { size: "sm", color: "secondary", children: r.description }) })
5983
6264
  ] })
5984
6265
  ]
5985
6266
  },
5986
- a.id
6267
+ r.id
5987
6268
  );
5988
6269
  })
5989
6270
  }
5990
6271
  );
5991
6272
  }
5992
- const da = {
6273
+ const fr = {
5993
6274
  id: "timeline",
5994
6275
  name: "Timeline",
5995
6276
  tier: "molecule",
@@ -6092,13 +6373,13 @@ const da = {
6092
6373
  easingDefault: "cubic-bezier(0.4, 0, 0.2, 1)",
6093
6374
  easingEmphasized: "cubic-bezier(0.2, 0, 0, 1)",
6094
6375
  easingDecelerate: "cubic-bezier(0, 0, 0.2, 1)"
6095
- }, jt = {
6376
+ }, _t = {
6096
6377
  shadowNone: "none",
6097
6378
  shadowSm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
6098
6379
  shadowMd: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
6099
6380
  shadowLg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
6100
6381
  shadowXl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
6101
- }, Ut = {
6382
+ }, Yt = {
6102
6383
  shadowNone: "none",
6103
6384
  shadowSm: "0 1px 2px 0 rgb(0 0 0 / 0.3)",
6104
6385
  shadowMd: "0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4)",
@@ -6109,7 +6390,7 @@ const da = {
6109
6390
  ...he,
6110
6391
  ...me,
6111
6392
  ...ge,
6112
- ...jt,
6393
+ ..._t,
6113
6394
  // Backgrounds
6114
6395
  bgBase: "#ffffff",
6115
6396
  bgSubtle: "#f9fafb",
@@ -6154,12 +6435,12 @@ const da = {
6154
6435
  infoText: "#1d4ed8",
6155
6436
  // Focus
6156
6437
  focusRing: "#111827"
6157
- }, Gt = {
6438
+ }, Kt = {
6158
6439
  ...fe,
6159
6440
  ...he,
6160
6441
  ...me,
6161
6442
  ...ge,
6162
- ...Ut,
6443
+ ...Yt,
6163
6444
  // Backgrounds
6164
6445
  bgBase: "#0b0d12",
6165
6446
  bgSubtle: "#111318",
@@ -6205,210 +6486,210 @@ const da = {
6205
6486
  // Focus
6206
6487
  focusRing: "#f9fafb"
6207
6488
  };
6208
- function _t(t) {
6209
- return "--lucent-" + t.replace(/([A-Z])/g, (n) => `-${n.toLowerCase()}`).replace(/([a-z])(\d)/g, (n, a, o) => `${a}-${o}`);
6489
+ function Xt(t) {
6490
+ return "--lucent-" + t.replace(/([A-Z])/g, (n) => `-${n.toLowerCase()}`).replace(/([a-z])(\d)/g, (n, r, o) => `${r}-${o}`);
6210
6491
  }
6211
- function Yt(t, n = ":root") {
6212
- const a = Object.entries(t).map(([o, r]) => ` ${_t(o)}: ${r};`).join(`
6492
+ function Jt(t, n = ":root") {
6493
+ const r = Object.entries(t).map(([o, a]) => ` ${Xt(o)}: ${a};`).join(`
6213
6494
  `);
6214
6495
  return `${n} {
6215
- ${a}
6496
+ ${r}
6216
6497
  }`;
6217
6498
  }
6218
- function Kt(t) {
6219
- const n = parseInt(t.slice(1, 3), 16) / 255, a = parseInt(t.slice(3, 5), 16) / 255, o = parseInt(t.slice(5, 7), 16) / 255, r = (i) => i <= 0.03928 ? i / 12.92 : Math.pow((i + 0.055) / 1.055, 2.4);
6220
- return 0.2126 * r(n) + 0.7152 * r(a) + 0.0722 * r(o);
6499
+ function Qt(t) {
6500
+ const n = parseInt(t.slice(1, 3), 16) / 255, r = parseInt(t.slice(3, 5), 16) / 255, o = parseInt(t.slice(5, 7), 16) / 255, a = (i) => i <= 0.03928 ? i / 12.92 : Math.pow((i + 0.055) / 1.055, 2.4);
6501
+ return 0.2126 * a(n) + 0.7152 * a(r) + 0.0722 * a(o);
6221
6502
  }
6222
- function Xt(t) {
6223
- return Kt(t) < 0.179 ? "#ffffff" : "#000000";
6503
+ function Zt(t) {
6504
+ return Qt(t) < 0.179 ? "#ffffff" : "#000000";
6224
6505
  }
6225
- function Jt(t) {
6226
- const n = parseInt(t.slice(1, 3), 16), a = parseInt(t.slice(3, 5), 16), o = parseInt(t.slice(5, 7), 16);
6227
- return { r: n, g: a, b: o };
6506
+ function en(t) {
6507
+ const n = parseInt(t.slice(1, 3), 16), r = parseInt(t.slice(3, 5), 16), o = parseInt(t.slice(5, 7), 16);
6508
+ return { r: n, g: r, b: o };
6228
6509
  }
6229
- function Qt({ r: t, g: n, b: a }) {
6230
- const o = (r) => r.toString(16).padStart(2, "0");
6231
- return `#${o(t)}${o(n)}${o(a)}`;
6510
+ function tn({ r: t, g: n, b: r }) {
6511
+ const o = (a) => a.toString(16).padStart(2, "0");
6512
+ return `#${o(t)}${o(n)}${o(r)}`;
6232
6513
  }
6233
- function Zt(t) {
6234
- const { r: n, g: a, b: o } = Jt(t), r = n / 255, i = a / 255, l = o / 255, s = Math.max(r, i, l), u = Math.min(r, i, l);
6235
- let m = 0, b = 0;
6236
- const d = (s + u) / 2;
6237
- if (s !== u) {
6238
- const p = s - u;
6239
- switch (b = d > 0.5 ? p / (2 - s - u) : p / (s + u), s) {
6240
- case r:
6241
- m = (i - l) / p + (i < l ? 6 : 0);
6514
+ function nn(t) {
6515
+ const { r: n, g: r, b: o } = en(t), a = n / 255, i = r / 255, l = o / 255, s = Math.max(a, i, l), d = Math.min(a, i, l);
6516
+ let m = 0, g = 0;
6517
+ const u = (s + d) / 2;
6518
+ if (s !== d) {
6519
+ const f = s - d;
6520
+ switch (g = u > 0.5 ? f / (2 - s - d) : f / (s + d), s) {
6521
+ case a:
6522
+ m = (i - l) / f + (i < l ? 6 : 0);
6242
6523
  break;
6243
6524
  case i:
6244
- m = (l - r) / p + 2;
6525
+ m = (l - a) / f + 2;
6245
6526
  break;
6246
6527
  case l:
6247
- m = (r - i) / p + 4;
6528
+ m = (a - i) / f + 4;
6248
6529
  break;
6249
6530
  }
6250
6531
  m /= 6;
6251
6532
  }
6252
- return [m * 360, b, d];
6533
+ return [m * 360, g, u];
6253
6534
  }
6254
- function en(t, n, a) {
6255
- t = (t % 360 + 360) % 360, n = Math.min(1, Math.max(0, n)), a = Math.min(1, Math.max(0, a));
6256
- const o = (1 - Math.abs(2 * a - 1)) * n, r = o * (1 - Math.abs(t / 60 % 2 - 1)), i = a - o / 2;
6257
- let l = 0, s = 0, u = 0;
6258
- return t < 60 ? (l = o, s = r) : t < 120 ? (l = r, s = o) : t < 180 ? (s = o, u = r) : t < 240 ? (s = r, u = o) : t < 300 ? (l = r, u = o) : (l = o, u = r), Qt({ r: Math.round((l + i) * 255), g: Math.round((s + i) * 255), b: Math.round((u + i) * 255) });
6535
+ function rn(t, n, r) {
6536
+ t = (t % 360 + 360) % 360, n = Math.min(1, Math.max(0, n)), r = Math.min(1, Math.max(0, r));
6537
+ const o = (1 - Math.abs(2 * r - 1)) * n, a = o * (1 - Math.abs(t / 60 % 2 - 1)), i = r - o / 2;
6538
+ let l = 0, s = 0, d = 0;
6539
+ return t < 60 ? (l = o, s = a) : t < 120 ? (l = a, s = o) : t < 180 ? (s = o, d = a) : t < 240 ? (s = a, d = o) : t < 300 ? (l = a, d = o) : (l = o, d = a), tn({ r: Math.round((l + i) * 255), g: Math.round((s + i) * 255), b: Math.round((d + i) * 255) });
6259
6540
  }
6260
6541
  function oe(t, n) {
6261
- const [a, o, r] = Zt(t);
6262
- return en(a, o, Math.min(1, Math.max(0, r + n)));
6542
+ const [r, o, a] = nn(t);
6543
+ return rn(r, o, Math.min(1, Math.max(0, a + n)));
6263
6544
  }
6264
6545
  const ve = le({
6265
6546
  theme: "light",
6266
6547
  tokens: be
6267
6548
  });
6268
- function ua({
6549
+ function hr({
6269
6550
  theme: t = "light",
6270
6551
  tokens: n,
6271
- children: a
6552
+ children: r
6272
6553
  }) {
6273
- const o = ce().replace(/:/g, ""), r = t === "dark" ? Gt : be, i = n ? { ...r, ...n } : r, l = n != null && n.accentBorder ? n.accentBorder : t === "light" ? oe(i.accentDefault, -0.15) : oe(i.accentDefault, 0.15), s = {
6554
+ const o = ce().replace(/:/g, ""), a = t === "dark" ? Kt : be, i = n ? { ...a, ...n } : a, l = n != null && n.accentBorder ? n.accentBorder : t === "light" ? oe(i.accentDefault, -0.15) : oe(i.accentDefault, 0.15), s = {
6274
6555
  ...i,
6275
- textOnAccent: (n == null ? void 0 : n.textOnAccent) ?? Xt(i.accentDefault),
6556
+ textOnAccent: (n == null ? void 0 : n.textOnAccent) ?? Zt(i.accentDefault),
6276
6557
  accentBorder: l
6277
- }, u = `html { font-size: 13px; }
6278
- ` + Yt(s, ":root");
6558
+ }, d = `html { font-size: 13px; }
6559
+ ` + Jt(s, ":root");
6279
6560
  return se(() => {
6280
6561
  let m = document.getElementById(`lucent-tokens-${o}`);
6281
- return m || (m = document.createElement("style"), m.id = `lucent-tokens-${o}`, document.head.appendChild(m)), m.textContent = u, () => {
6282
- var b;
6283
- (b = document.getElementById(`lucent-tokens-${o}`)) == null || b.remove();
6562
+ return m || (m = document.createElement("style"), m.id = `lucent-tokens-${o}`, document.head.appendChild(m)), m.textContent = d, () => {
6563
+ var g;
6564
+ (g = document.getElementById(`lucent-tokens-${o}`)) == null || g.remove();
6284
6565
  };
6285
- }, [o, u]), /* @__PURE__ */ e(ve.Provider, { value: { theme: t, tokens: s }, children: a });
6566
+ }, [o, d]), /* @__PURE__ */ e(ve.Provider, { value: { theme: t, tokens: s }, children: r });
6286
6567
  }
6287
- function pa() {
6568
+ function mr() {
6288
6569
  return ie(ve);
6289
6570
  }
6290
- const fa = {
6571
+ const gr = {
6291
6572
  accentDefault: "#e9c96b",
6292
6573
  accentHover: "#ddb84e",
6293
6574
  accentActive: "#c9a33b",
6294
6575
  accentSubtle: "#fef9ec",
6295
6576
  focusRing: "#e9c96b"
6296
6577
  };
6297
- function N(t, n) {
6578
+ function L(t, n) {
6298
6579
  return { field: t, message: n };
6299
6580
  }
6300
- function tn(t) {
6581
+ function an(t) {
6301
6582
  const n = [];
6302
6583
  if (typeof t != "object" || t === null)
6303
- return { valid: !1, errors: [N("manifest", "Must be a non-null object")] };
6304
- const a = t, o = ["id", "name", "description", "designIntent", "specVersion"];
6584
+ return { valid: !1, errors: [L("manifest", "Must be a non-null object")] };
6585
+ const r = t, o = ["id", "name", "description", "designIntent", "specVersion"];
6305
6586
  for (const i of o)
6306
- (typeof a[i] != "string" || a[i].trim() === "") && n.push(N(i, "Must be a non-empty string"));
6307
- typeof a.id == "string" && !/^[a-z][a-z0-9-]*$/.test(a.id) && n.push(N("id", 'Must be kebab-case (e.g. "button", "form-field")'));
6308
- const r = ["atom", "molecule", "block", "flow", "overlay"];
6309
- return r.includes(a.tier) || n.push(N("tier", `Must be one of: ${r.join(", ")}`)), (typeof a.domain != "string" || a.domain.trim() === "") && n.push(N("domain", "Must be a non-empty string")), Array.isArray(a.props) ? a.props.forEach((i, l) => {
6310
- const s = i, u = `props[${l}]`;
6311
- (typeof s.name != "string" || s.name === "") && n.push(N(`${u}.name`, "Must be a non-empty string")), (typeof s.type != "string" || s.type === "") && n.push(N(`${u}.type`, "Must be a non-empty string")), typeof s.required != "boolean" && n.push(N(`${u}.required`, "Must be a boolean")), (typeof s.description != "string" || s.description === "") && n.push(N(`${u}.description`, "Must be a non-empty string"));
6312
- }) : n.push(N("props", "Must be an array")), Array.isArray(a.usageExamples) ? a.usageExamples.length === 0 ? n.push(N("usageExamples", "Must have at least one example")) : a.usageExamples.forEach((i, l) => {
6313
- const s = i, u = `usageExamples[${l}]`;
6314
- (typeof s.title != "string" || s.title === "") && n.push(N(`${u}.title`, "Must be a non-empty string")), (typeof s.code != "string" || s.code === "") && n.push(N(`${u}.code`, "Must be a non-empty string"));
6315
- }) : n.push(N("usageExamples", "Must be an array")), Array.isArray(a.compositionGraph) || n.push(N("compositionGraph", "Must be an array (empty array is fine for atoms)")), typeof a.specVersion == "string" && !/^\d+\.\d+$/.test(a.specVersion) && n.push(N("specVersion", 'Must be "MAJOR.MINOR" format, e.g. "0.1"')), { valid: n.length === 0, errors: n };
6587
+ (typeof r[i] != "string" || r[i].trim() === "") && n.push(L(i, "Must be a non-empty string"));
6588
+ typeof r.id == "string" && !/^[a-z][a-z0-9-]*$/.test(r.id) && n.push(L("id", 'Must be kebab-case (e.g. "button", "form-field")'));
6589
+ const a = ["atom", "molecule", "block", "flow", "overlay"];
6590
+ return a.includes(r.tier) || n.push(L("tier", `Must be one of: ${a.join(", ")}`)), (typeof r.domain != "string" || r.domain.trim() === "") && n.push(L("domain", "Must be a non-empty string")), Array.isArray(r.props) ? r.props.forEach((i, l) => {
6591
+ const s = i, d = `props[${l}]`;
6592
+ (typeof s.name != "string" || s.name === "") && n.push(L(`${d}.name`, "Must be a non-empty string")), (typeof s.type != "string" || s.type === "") && n.push(L(`${d}.type`, "Must be a non-empty string")), typeof s.required != "boolean" && n.push(L(`${d}.required`, "Must be a boolean")), (typeof s.description != "string" || s.description === "") && n.push(L(`${d}.description`, "Must be a non-empty string"));
6593
+ }) : n.push(L("props", "Must be an array")), Array.isArray(r.usageExamples) ? r.usageExamples.length === 0 ? n.push(L("usageExamples", "Must have at least one example")) : r.usageExamples.forEach((i, l) => {
6594
+ const s = i, d = `usageExamples[${l}]`;
6595
+ (typeof s.title != "string" || s.title === "") && n.push(L(`${d}.title`, "Must be a non-empty string")), (typeof s.code != "string" || s.code === "") && n.push(L(`${d}.code`, "Must be a non-empty string"));
6596
+ }) : n.push(L("usageExamples", "Must be an array")), Array.isArray(r.compositionGraph) || n.push(L("compositionGraph", "Must be an array (empty array is fine for atoms)")), typeof r.specVersion == "string" && !/^\d+\.\d+$/.test(r.specVersion) && n.push(L("specVersion", 'Must be "MAJOR.MINOR" format, e.g. "0.1"')), { valid: n.length === 0, errors: n };
6316
6597
  }
6317
- function ha(t) {
6318
- const n = tn(t);
6598
+ function br(t) {
6599
+ const n = an(t);
6319
6600
  if (!n.valid) {
6320
- const a = n.errors.map((o) => ` ${o.field}: ${o.message}`).join(`
6601
+ const r = n.errors.map((o) => ` ${o.field}: ${o.message}`).join(`
6321
6602
  `);
6322
6603
  throw new Error(`Invalid ComponentManifest:
6323
- ${a}`);
6604
+ ${r}`);
6324
6605
  }
6325
6606
  }
6326
- function ma(t) {
6607
+ function vr(t) {
6327
6608
  if (typeof t != "object" || t === null) return !1;
6328
6609
  const n = t;
6329
6610
  return typeof n.name == "string" && typeof n.type == "string" && typeof n.required == "boolean" && typeof n.description == "string";
6330
6611
  }
6331
- const ga = "1.0", ba = "0.1.0";
6612
+ const yr = "1.0", xr = "0.1.0";
6332
6613
  export {
6333
- Vn as Alert,
6334
- On as AlertManifest,
6335
- dn as Avatar,
6336
- un as AvatarManifest,
6337
- sn as Badge,
6338
- cn as BadgeManifest,
6339
- _n as Breadcrumb,
6614
+ jn as Alert,
6615
+ Un as AlertManifest,
6616
+ fn as Avatar,
6617
+ hn as AvatarManifest,
6618
+ un as Badge,
6619
+ pn as BadgeManifest,
6620
+ Xn as Breadcrumb,
6340
6621
  we as Button,
6341
- rn as ButtonManifest,
6342
- ea as COMMAND_PALETTE_MANIFEST,
6343
- Pn as Card,
6344
- Wn as CardManifest,
6622
+ sn as ButtonManifest,
6623
+ rr as COMMAND_PALETTE_MANIFEST,
6624
+ On as Card,
6625
+ Hn as CardManifest,
6345
6626
  ue as Checkbox,
6346
- mn as CheckboxManifest,
6347
- An as CodeBlock,
6348
- Fn as CodeBlockManifest,
6349
- Kn as Collapsible,
6350
- Zn as CommandPalette,
6351
- Qn as DATA_TABLE_MANIFEST,
6352
- ra as DATE_PICKER_MANIFEST,
6353
- ia as DATE_RANGE_PICKER_MANIFEST,
6354
- Jn as DataTable,
6355
- aa as DatePicker,
6356
- oa as DateRangePicker,
6357
- fn as Divider,
6358
- hn as DividerManifest,
6359
- Hn as EmptyState,
6360
- jn as EmptyStateManifest,
6361
- sa as FILE_UPLOAD_MANIFEST,
6362
- la as FileUpload,
6363
- Rn as FormField,
6364
- Nn as FormFieldManifest,
6365
- In as Icon,
6366
- Mn as IconManifest,
6627
+ vn as CheckboxManifest,
6628
+ Rn as CodeBlock,
6629
+ Nn as CodeBlockManifest,
6630
+ Qn as Collapsible,
6631
+ nr as CommandPalette,
6632
+ tr as DATA_TABLE_MANIFEST,
6633
+ lr as DATE_PICKER_MANIFEST,
6634
+ cr as DATE_RANGE_PICKER_MANIFEST,
6635
+ er as DataTable,
6636
+ ir as DatePicker,
6637
+ sr as DateRangePicker,
6638
+ gn as Divider,
6639
+ bn as DividerManifest,
6640
+ Gn as EmptyState,
6641
+ _n as EmptyStateManifest,
6642
+ ur as FILE_UPLOAD_MANIFEST,
6643
+ dr as FileUpload,
6644
+ $n as FormField,
6645
+ Wn as FormFieldManifest,
6646
+ En as Icon,
6647
+ qn as IconManifest,
6367
6648
  de as Input,
6368
- on as InputManifest,
6369
- ba as LUCENT_UI_VERSION,
6370
- ua as LucentProvider,
6371
- ga as MANIFEST_SPEC_VERSION,
6372
- na as MULTI_SELECT_MANIFEST,
6373
- ta as MultiSelect,
6374
- qn as NavLink,
6375
- Xn as PageLayout,
6376
- gn as Radio,
6377
- Pe as RadioGroup,
6378
- bn as RadioGroupUncontrolled,
6379
- vn as RadioManifest,
6380
- Ln as SearchInput,
6381
- $n as SearchInputManifest,
6649
+ cn as InputManifest,
6650
+ xr as LUCENT_UI_VERSION,
6651
+ hr as LucentProvider,
6652
+ yr as MANIFEST_SPEC_VERSION,
6653
+ or as MULTI_SELECT_MANIFEST,
6654
+ ar as MultiSelect,
6655
+ Dn as NavLink,
6656
+ Zn as PageLayout,
6657
+ yn as Radio,
6658
+ We as RadioGroup,
6659
+ xn as RadioGroupUncontrolled,
6660
+ wn as RadioManifest,
6661
+ Vn as SearchInput,
6662
+ Pn as SearchInputManifest,
6382
6663
  Ue as Select,
6383
- wn as SelectManifest,
6384
- Un as Skeleton,
6385
- Gn as SkeletonManifest,
6386
- En as Slider,
6387
- Dn as SliderManifest,
6664
+ Tn as SelectManifest,
6665
+ Yn as Skeleton,
6666
+ Kn as SkeletonManifest,
6667
+ Fn as Slider,
6668
+ Bn as SliderManifest,
6388
6669
  Re as Spinner,
6389
- pn as SpinnerManifest,
6390
- da as TIMELINE_MANIFEST,
6670
+ mn as SpinnerManifest,
6671
+ fr as TIMELINE_MANIFEST,
6391
6672
  G as Table,
6392
- Bn as TableManifest,
6393
- Yn as Tabs,
6394
- kn as Tag,
6395
- Sn as TagManifest,
6396
- E as Text,
6397
- zn as TextManifest,
6673
+ Ln as TableManifest,
6674
+ Jn as Tabs,
6675
+ Cn as Tag,
6676
+ In as TagManifest,
6677
+ A as Text,
6678
+ An as TextManifest,
6398
6679
  Me as Textarea,
6399
- ln as TextareaManifest,
6400
- ca as Timeline,
6401
- yn as Toggle,
6402
- xn as ToggleManifest,
6403
- Tn as Tooltip,
6404
- Cn as TooltipManifest,
6405
- ha as assertManifest,
6406
- fa as brandTokens,
6407
- Gt as darkTokens,
6408
- Xt as getContrastText,
6409
- ma as isValidPropDescriptor,
6680
+ dn as TextareaManifest,
6681
+ pr as Timeline,
6682
+ kn as Toggle,
6683
+ Sn as ToggleManifest,
6684
+ Mn as Tooltip,
6685
+ zn as TooltipManifest,
6686
+ br as assertManifest,
6687
+ gr as brandTokens,
6688
+ Kt as darkTokens,
6689
+ Zt as getContrastText,
6690
+ vr as isValidPropDescriptor,
6410
6691
  be as lightTokens,
6411
- Yt as makeLibraryCSS,
6412
- pa as useLucent,
6413
- tn as validateManifest
6692
+ Jt as makeLibraryCSS,
6693
+ mr as useLucent,
6694
+ an as validateManifest
6414
6695
  };