lucent-ui 0.1.0 → 0.2.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/README.md +95 -19
  2. package/dist/index.cjs +22 -17
  3. package/dist/index.d.ts +83 -2
  4. package/dist/index.js +1078 -672
  5. package/package.json +9 -4
package/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
- import { jsxs as g, jsx as n, Fragment as A } from "react/jsx-runtime";
2
- import { forwardRef as N, useRef as M, useEffect as F, useState as C, useCallback as K, useContext as D, createContext as L, useId as X, useLayoutEffect as Y } from "react";
3
- const J = {
1
+ import { jsxs as m, jsx as n, Fragment as A } from "react/jsx-runtime";
2
+ import { forwardRef as N, useRef as M, useEffect as F, useState as z, useCallback as X, useContext as V, createContext as W, useLayoutEffect as P, useId as J } from "react";
3
+ const Q = {
4
4
  primary: {
5
5
  background: "var(--lucent-accent-default)",
6
6
  color: "var(--lucent-text-on-accent)",
@@ -21,99 +21,99 @@ const J = {
21
21
  color: "#ffffff",
22
22
  border: "1px solid var(--lucent-danger-default)"
23
23
  }
24
- }, Q = {
24
+ }, Z = {
25
25
  sm: { height: "32px", padding: "0 var(--lucent-space-3)", fontSize: "var(--lucent-font-size-sm)" },
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
- }, Z = N(
29
- ({ variant: t = "primary", size: e = "md", loading: a = !1, fullWidth: o = !1, leftIcon: r, rightIcon: s, chevron: c = !1, children: l, disabled: u, style: m, ...d }, h) => {
30
- const p = u ?? a;
31
- return /* @__PURE__ */ g(
28
+ }, ee = N(
29
+ ({ variant: t = "primary", size: e = "md", loading: a = !1, fullWidth: r = !1, spread: o = !1, leftIcon: i, rightIcon: l, chevron: s = !1, disableHoverStyles: d = !1, children: p, disabled: f, style: h, ...c }, u) => {
30
+ const b = f ?? a;
31
+ return /* @__PURE__ */ m(
32
32
  "button",
33
33
  {
34
- ref: h,
35
- disabled: p,
34
+ ref: u,
35
+ disabled: b,
36
36
  "aria-busy": a,
37
37
  style: {
38
38
  display: "inline-flex",
39
39
  alignItems: "center",
40
- justifyContent: "center",
40
+ justifyContent: o ? "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)",
44
44
  lineHeight: 1,
45
45
  letterSpacing: "0.01em",
46
46
  borderRadius: "var(--lucent-radius-lg)",
47
- cursor: p ? "not-allowed" : "pointer",
48
- width: o ? "100%" : void 0,
47
+ cursor: b ? "not-allowed" : "pointer",
48
+ width: r ? "100%" : void 0,
49
49
  transition: "background var(--lucent-duration-fast) var(--lucent-easing-default), border-color var(--lucent-duration-fast) var(--lucent-easing-default), box-shadow var(--lucent-duration-fast) var(--lucent-easing-default), transform 80ms var(--lucent-easing-default)",
50
50
  whiteSpace: "nowrap",
51
51
  boxSizing: "border-box",
52
52
  outline: "none",
53
53
  margin: 0,
54
- ...Q[e],
55
- ...J[t],
56
- ...m,
57
- ...p && {
54
+ ...Z[e],
55
+ ...Q[t],
56
+ ...h,
57
+ ...b && {
58
58
  background: "var(--lucent-bg-muted)",
59
59
  color: "var(--lucent-text-disabled)",
60
60
  borderColor: "transparent"
61
61
  }
62
62
  },
63
- onMouseEnter: (i) => {
64
- var f;
65
- p || ee(i.currentTarget, t), (f = d.onMouseEnter) == null || f.call(d, i);
63
+ onMouseEnter: (g) => {
64
+ var x;
65
+ !b && !d && te(g.currentTarget, t), (x = c.onMouseEnter) == null || x.call(c, g);
66
66
  },
67
- onMouseLeave: (i) => {
68
- var f;
69
- p || te(i.currentTarget, t), (f = d.onMouseLeave) == null || f.call(d, i);
67
+ onMouseLeave: (g) => {
68
+ var x;
69
+ !b && !d && ne(g.currentTarget, t), (x = c.onMouseLeave) == null || x.call(c, g);
70
70
  },
71
- onMouseDown: (i) => {
72
- var f;
73
- p || (i.currentTarget.style.transform = "scale(0.95)"), (f = d.onMouseDown) == null || f.call(d, i);
71
+ onMouseDown: (g) => {
72
+ var x;
73
+ b || (g.currentTarget.style.transform = "scale(0.95)"), (x = c.onMouseDown) == null || x.call(c, g);
74
74
  },
75
- onMouseUp: (i) => {
76
- var f;
77
- i.currentTarget.style.transform = "", (f = d.onMouseUp) == null || f.call(d, i);
75
+ onMouseUp: (g) => {
76
+ var x;
77
+ g.currentTarget.style.transform = "", (x = c.onMouseUp) == null || x.call(c, g);
78
78
  },
79
- onFocus: (i) => {
80
- var f;
81
- i.currentTarget.style.boxShadow = "0 0 0 3px var(--lucent-accent-subtle)", (f = d.onFocus) == null || f.call(d, i);
79
+ onFocus: (g) => {
80
+ var x;
81
+ g.currentTarget.style.boxShadow = "0 0 0 3px var(--lucent-accent-subtle)", (x = c.onFocus) == null || x.call(c, g);
82
82
  },
83
- onBlur: (i) => {
84
- var f;
85
- i.currentTarget.style.boxShadow = "", (f = d.onBlur) == null || f.call(d, i);
83
+ onBlur: (g) => {
84
+ var x;
85
+ g.currentTarget.style.boxShadow = "", (x = c.onBlur) == null || x.call(c, g);
86
86
  },
87
- ...d,
87
+ ...c,
88
88
  children: [
89
- r,
90
- a ? /* @__PURE__ */ n(re, {}) : l,
91
- !a && s,
92
- !a && c && /* @__PURE__ */ n(ae, { size: e })
89
+ i,
90
+ a ? /* @__PURE__ */ n(oe, {}) : p,
91
+ !a && l,
92
+ !a && s && /* @__PURE__ */ n(re, { size: e })
93
93
  ]
94
94
  }
95
95
  );
96
96
  }
97
97
  );
98
- Z.displayName = "Button";
99
- function ee(t, e) {
98
+ ee.displayName = "Button";
99
+ function te(t, e) {
100
100
  e === "primary" ? (t.style.background = "var(--lucent-accent-hover)", t.style.borderColor = "var(--lucent-accent-hover)") : e === "secondary" ? t.style.background = "var(--lucent-bg-subtle)" : e === "ghost" ? t.style.background = "var(--lucent-bg-muted)" : e === "danger" && (t.style.background = "var(--lucent-danger-hover)", t.style.borderColor = "var(--lucent-danger-hover)");
101
101
  }
102
- function te(t, e) {
102
+ function ne(t, e) {
103
103
  e === "primary" ? (t.style.background = "var(--lucent-accent-default)", t.style.borderColor = "var(--lucent-accent-default)") : e === "secondary" ? t.style.background = "var(--lucent-surface-default)" : e === "ghost" ? t.style.background = "transparent" : e === "danger" && (t.style.background = "var(--lucent-danger-default)", t.style.borderColor = "var(--lucent-danger-default)");
104
104
  }
105
- const ne = { sm: 12, md: 14, lg: 16 };
106
- function ae({ size: t }) {
107
- const e = ne[t];
105
+ const ae = { sm: 12, md: 14, lg: 16 };
106
+ function re({ size: t }) {
107
+ const e = ae[t];
108
108
  return /* @__PURE__ */ n("svg", { width: e, height: e, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, style: { flexShrink: 0, marginLeft: -2 }, children: /* @__PURE__ */ n("polyline", { points: "6 9 12 15 18 9" }) });
109
109
  }
110
- function re() {
111
- return /* @__PURE__ */ g("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", "aria-hidden": !0, style: { animation: "lucent-spin 0.7s linear infinite", flexShrink: 0 }, children: [
110
+ function oe() {
111
+ return /* @__PURE__ */ m("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", "aria-hidden": !0, style: { animation: "lucent-spin 0.7s linear infinite", flexShrink: 0 }, children: [
112
112
  /* @__PURE__ */ n("style", { children: "@keyframes lucent-spin { to { transform: rotate(360deg); } }" }),
113
113
  /* @__PURE__ */ n("path", { d: "M12 2a10 10 0 0 1 10 10" })
114
114
  ] });
115
115
  }
116
- const ot = {
116
+ const st = {
117
117
  id: "button",
118
118
  name: "Button",
119
119
  tier: "atom",
@@ -224,14 +224,14 @@ const ot = {
224
224
  ariaAttributes: ["aria-disabled", "aria-busy"],
225
225
  keyboardInteractions: ["Enter — activates the button", "Space — activates the button"]
226
226
  }
227
- }, V = N(
228
- ({ label: t, helperText: e, errorText: a, leftElement: o, rightElement: r, id: s, style: c, ...l }, u) => {
229
- const m = s ?? `lucent-input-${Math.random().toString(36).slice(2, 7)}`, d = !!a, h = !!l.disabled;
230
- return /* @__PURE__ */ g("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%" }, children: [
227
+ }, O = N(
228
+ ({ label: t, helperText: e, errorText: a, leftElement: r, rightElement: o, id: i, style: l, ...s }, d) => {
229
+ const p = i ?? `lucent-input-${Math.random().toString(36).slice(2, 7)}`, f = !!a, h = !!s.disabled;
230
+ return /* @__PURE__ */ m("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%" }, children: [
231
231
  t && /* @__PURE__ */ n(
232
232
  "label",
233
233
  {
234
- htmlFor: m,
234
+ htmlFor: p,
235
235
  style: {
236
236
  fontSize: "var(--lucent-font-size-sm)",
237
237
  fontWeight: "var(--lucent-font-weight-medium)",
@@ -241,69 +241,69 @@ const ot = {
241
241
  children: t
242
242
  }
243
243
  ),
244
- /* @__PURE__ */ g("div", { style: { position: "relative", display: "flex", alignItems: "center" }, children: [
245
- o && /* @__PURE__ */ n("span", { style: {
244
+ /* @__PURE__ */ m("div", { style: { position: "relative", display: "flex", alignItems: "center" }, children: [
245
+ r && /* @__PURE__ */ n("span", { style: {
246
246
  position: "absolute",
247
247
  left: "var(--lucent-space-3)",
248
248
  color: h ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
249
249
  display: "flex",
250
250
  alignItems: "center",
251
251
  pointerEvents: "none"
252
- }, children: o }),
252
+ }, children: r }),
253
253
  /* @__PURE__ */ n(
254
254
  "input",
255
255
  {
256
- ref: u,
257
- id: m,
258
- "aria-invalid": d,
259
- "aria-describedby": d ? `${m}-error` : e ? `${m}-helper` : void 0,
256
+ ref: d,
257
+ id: p,
258
+ "aria-invalid": f,
259
+ "aria-describedby": f ? `${p}-error` : e ? `${p}-helper` : void 0,
260
260
  style: {
261
261
  width: "100%",
262
262
  height: "40px",
263
- padding: `0 ${r ? "var(--lucent-space-10)" : "var(--lucent-space-3)"} 0 ${o ? "var(--lucent-space-10)" : "var(--lucent-space-3)"}`,
263
+ padding: `0 ${o ? "var(--lucent-space-10)" : "var(--lucent-space-3)"} 0 ${r ? "var(--lucent-space-10)" : "var(--lucent-space-3)"}`,
264
264
  fontSize: "var(--lucent-font-size-md)",
265
265
  fontFamily: "var(--lucent-font-family-base)",
266
266
  color: h ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
267
267
  background: h ? "var(--lucent-bg-muted)" : "var(--lucent-surface-default)",
268
- border: `1px solid ${h ? "transparent" : d ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"}`,
268
+ border: `1px solid ${h ? "transparent" : f ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"}`,
269
269
  cursor: h ? "not-allowed" : void 0,
270
270
  borderRadius: "var(--lucent-radius-lg)",
271
271
  outline: "none",
272
272
  boxSizing: "border-box",
273
273
  transition: "border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
274
- ...c
274
+ ...l
275
275
  },
276
- onMouseEnter: (p) => {
277
- var i;
278
- !l.disabled && p.currentTarget !== document.activeElement && (p.currentTarget.style.borderColor = d ? "var(--lucent-danger-default)" : "var(--lucent-border-strong)"), (i = l.onMouseEnter) == null || i.call(l, p);
276
+ onMouseEnter: (c) => {
277
+ var u;
278
+ !s.disabled && c.currentTarget !== document.activeElement && (c.currentTarget.style.borderColor = f ? "var(--lucent-danger-default)" : "var(--lucent-border-strong)"), (u = s.onMouseEnter) == null || u.call(s, c);
279
279
  },
280
- onMouseLeave: (p) => {
281
- var i;
282
- !l.disabled && p.currentTarget !== document.activeElement && (p.currentTarget.style.borderColor = d ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"), (i = l.onMouseLeave) == null || i.call(l, p);
280
+ onMouseLeave: (c) => {
281
+ var u;
282
+ !s.disabled && c.currentTarget !== document.activeElement && (c.currentTarget.style.borderColor = f ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"), (u = s.onMouseLeave) == null || u.call(s, c);
283
283
  },
284
- onFocus: (p) => {
285
- var i;
286
- p.currentTarget.style.borderColor = d ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", p.currentTarget.style.boxShadow = `0 0 0 3px ${d ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (i = l.onFocus) == null || i.call(l, p);
284
+ onFocus: (c) => {
285
+ var u;
286
+ 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)"}`, (u = s.onFocus) == null || u.call(s, c);
287
287
  },
288
- onBlur: (p) => {
289
- var i;
290
- p.currentTarget.style.borderColor = d ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", p.currentTarget.style.boxShadow = "none", (i = l.onBlur) == null || i.call(l, p);
288
+ onBlur: (c) => {
289
+ var u;
290
+ c.currentTarget.style.borderColor = f ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", c.currentTarget.style.boxShadow = "none", (u = s.onBlur) == null || u.call(s, c);
291
291
  },
292
- ...l
292
+ ...s
293
293
  }
294
294
  ),
295
- r && /* @__PURE__ */ n("span", { style: {
295
+ o && /* @__PURE__ */ n("span", { style: {
296
296
  position: "absolute",
297
297
  right: "var(--lucent-space-3)",
298
298
  color: h ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
299
299
  display: "flex",
300
300
  alignItems: "center"
301
- }, children: r })
301
+ }, children: o })
302
302
  ] }),
303
- d && /* @__PURE__ */ n(
303
+ f && /* @__PURE__ */ n(
304
304
  "span",
305
305
  {
306
- id: `${m}-error`,
306
+ id: `${p}-error`,
307
307
  role: "alert",
308
308
  style: {
309
309
  fontSize: "var(--lucent-font-size-sm)",
@@ -313,10 +313,10 @@ const ot = {
313
313
  children: a
314
314
  }
315
315
  ),
316
- !d && e && /* @__PURE__ */ n(
316
+ !f && e && /* @__PURE__ */ n(
317
317
  "span",
318
318
  {
319
- id: `${m}-helper`,
319
+ id: `${p}-helper`,
320
320
  style: {
321
321
  fontSize: "var(--lucent-font-size-sm)",
322
322
  color: "var(--lucent-text-secondary)",
@@ -328,8 +328,8 @@ const ot = {
328
328
  ] });
329
329
  }
330
330
  );
331
- V.displayName = "Input";
332
- const it = {
331
+ O.displayName = "Input";
332
+ const ct = {
333
333
  id: "input",
334
334
  name: "Input",
335
335
  tier: "atom",
@@ -361,15 +361,15 @@ const it = {
361
361
  ariaAttributes: ["aria-invalid", "aria-describedby", "aria-label"],
362
362
  keyboardInteractions: ["Tab — focuses the input"]
363
363
  }
364
- }, oe = N(
365
- ({ label: t, helperText: e, errorText: a, autoResize: o = !1, maxLength: r, showCount: s = !1, id: c, value: l, onChange: u, style: m, ...d }, h) => {
366
- const p = M(null), i = h ?? p, f = c ?? `lucent-textarea-${Math.random().toString(36).slice(2, 7)}`, v = !!a, T = typeof l == "string" ? l.length : 0;
364
+ }, ie = N(
365
+ ({ label: t, helperText: e, errorText: a, autoResize: r = !1, maxLength: o, showCount: i = !1, id: l, value: s, onChange: d, style: p, ...f }, h) => {
366
+ const c = M(null), u = h ?? c, b = l ?? `lucent-textarea-${Math.random().toString(36).slice(2, 7)}`, g = !!a, x = typeof s == "string" ? s.length : 0;
367
367
  return F(() => {
368
- if (!o) return;
369
- const b = i.current;
370
- b && (b.style.height = "auto", b.style.height = `${b.scrollHeight}px`);
371
- }, [l, o, i]), /* @__PURE__ */ g("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%" }, children: [
372
- t && /* @__PURE__ */ n("label", { htmlFor: f, style: {
368
+ if (!r) return;
369
+ const w = u.current;
370
+ w && (w.style.height = "auto", w.style.height = `${w.scrollHeight}px`);
371
+ }, [s, r, u]), /* @__PURE__ */ m("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%" }, children: [
372
+ t && /* @__PURE__ */ n("label", { htmlFor: b, style: {
373
373
  fontSize: "var(--lucent-font-size-sm)",
374
374
  fontWeight: "var(--lucent-font-weight-medium)",
375
375
  color: "var(--lucent-text-primary)",
@@ -378,13 +378,13 @@ const it = {
378
378
  /* @__PURE__ */ n(
379
379
  "textarea",
380
380
  {
381
- ref: i,
382
- id: f,
383
- maxLength: r,
384
- value: l,
385
- onChange: u,
386
- "aria-invalid": v,
387
- "aria-describedby": v ? `${f}-error` : e ? `${f}-helper` : void 0,
381
+ ref: u,
382
+ id: b,
383
+ maxLength: o,
384
+ value: s,
385
+ onChange: d,
386
+ "aria-invalid": g,
387
+ "aria-describedby": g ? `${b}-error` : e ? `${b}-helper` : void 0,
388
388
  style: {
389
389
  width: "100%",
390
390
  minHeight: "100px",
@@ -393,47 +393,47 @@ const it = {
393
393
  fontFamily: "var(--lucent-font-family-base)",
394
394
  color: "var(--lucent-text-primary)",
395
395
  background: "var(--lucent-surface-default)",
396
- border: `1px solid ${v ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"}`,
396
+ border: `1px solid ${g ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"}`,
397
397
  borderRadius: "var(--lucent-radius-md)",
398
398
  outline: "none",
399
- resize: o ? "none" : "vertical",
399
+ resize: r ? "none" : "vertical",
400
400
  boxSizing: "border-box",
401
401
  lineHeight: "var(--lucent-line-height-base)",
402
402
  transition: "border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
403
- ...m
403
+ ...p
404
404
  },
405
- onFocus: (b) => {
406
- var w;
407
- b.currentTarget.style.borderColor = v ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", b.currentTarget.style.boxShadow = `0 0 0 3px ${v ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (w = d.onFocus) == null || w.call(d, b);
405
+ onFocus: (w) => {
406
+ var v;
407
+ w.currentTarget.style.borderColor = g ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", w.currentTarget.style.boxShadow = `0 0 0 3px ${g ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (v = f.onFocus) == null || v.call(f, w);
408
408
  },
409
- onBlur: (b) => {
410
- var w;
411
- b.currentTarget.style.borderColor = v ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", b.currentTarget.style.boxShadow = "none", (w = d.onBlur) == null || w.call(d, b);
409
+ onBlur: (w) => {
410
+ var v;
411
+ w.currentTarget.style.borderColor = g ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", w.currentTarget.style.boxShadow = "none", (v = f.onBlur) == null || v.call(f, w);
412
412
  },
413
- ...d
413
+ ...f
414
414
  }
415
415
  ),
416
- /* @__PURE__ */ g("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
417
- /* @__PURE__ */ g("div", { children: [
418
- v && /* @__PURE__ */ n("span", { id: `${f}-error`, role: "alert", style: { fontSize: "var(--lucent-font-size-sm)", color: "var(--lucent-danger-text)", fontFamily: "var(--lucent-font-family-base)" }, children: a }),
419
- !v && e && /* @__PURE__ */ n("span", { id: `${f}-helper`, style: { fontSize: "var(--lucent-font-size-sm)", color: "var(--lucent-text-secondary)", fontFamily: "var(--lucent-font-family-base)" }, children: e })
416
+ /* @__PURE__ */ m("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
417
+ /* @__PURE__ */ m("div", { children: [
418
+ g && /* @__PURE__ */ n("span", { id: `${b}-error`, role: "alert", style: { fontSize: "var(--lucent-font-size-sm)", color: "var(--lucent-danger-text)", fontFamily: "var(--lucent-font-family-base)" }, children: a }),
419
+ !g && e && /* @__PURE__ */ n("span", { id: `${b}-helper`, style: { fontSize: "var(--lucent-font-size-sm)", color: "var(--lucent-text-secondary)", fontFamily: "var(--lucent-font-family-base)" }, children: e })
420
420
  ] }),
421
- (s || r) && /* @__PURE__ */ g("span", { style: {
421
+ (i || o) && /* @__PURE__ */ m("span", { style: {
422
422
  fontSize: "var(--lucent-font-size-xs)",
423
- color: r && T >= r ? "var(--lucent-danger-text)" : "var(--lucent-text-secondary)",
423
+ color: o && x >= o ? "var(--lucent-danger-text)" : "var(--lucent-text-secondary)",
424
424
  fontFamily: "var(--lucent-font-family-mono)",
425
425
  flexShrink: 0,
426
426
  marginLeft: "var(--lucent-space-2)"
427
427
  }, children: [
428
- T,
429
- r ? `/${r}` : ""
428
+ x,
429
+ o ? `/${o}` : ""
430
430
  ] })
431
431
  ] })
432
432
  ] });
433
433
  }
434
434
  );
435
- oe.displayName = "Textarea";
436
- const st = {
435
+ ie.displayName = "Textarea";
436
+ const dt = {
437
437
  id: "textarea",
438
438
  name: "Textarea",
439
439
  tier: "atom",
@@ -465,7 +465,7 @@ const st = {
465
465
  ariaAttributes: ["aria-multiline", "aria-invalid", "aria-describedby"],
466
466
  keyboardInteractions: ["Tab — focuses the textarea"]
467
467
  }
468
- }, ie = {
468
+ }, le = {
469
469
  neutral: { bg: "var(--lucent-bg-muted)", color: "var(--lucent-text-secondary)", border: "var(--lucent-border-default)" },
470
470
  accent: { bg: "var(--lucent-accent-default)", color: "var(--lucent-text-on-accent)", border: "var(--lucent-accent-default)" },
471
471
  success: { bg: "var(--lucent-success-subtle)", color: "var(--lucent-success-text)", border: "var(--lucent-success-subtle)" },
@@ -476,24 +476,25 @@ const st = {
476
476
  sm: { fontSize: "var(--lucent-font-size-xs)", padding: "0 var(--lucent-space-2)", height: "18px" },
477
477
  md: { fontSize: "var(--lucent-font-size-sm)", padding: "0 var(--lucent-space-2)", height: "22px" }
478
478
  };
479
- function lt({ variant: t = "neutral", size: e = "md", dot: a = !1, children: o }) {
480
- const r = ie[t], s = se[e];
481
- return /* @__PURE__ */ g("span", { style: {
479
+ function ut({ variant: t = "neutral", size: e = "md", dot: a = !1, children: r, style: o }) {
480
+ const i = le[t], l = se[e];
481
+ return /* @__PURE__ */ m("span", { style: {
482
482
  display: "inline-flex",
483
483
  alignItems: "center",
484
484
  gap: "var(--lucent-space-1)",
485
- height: s.height,
486
- padding: s.padding,
487
- fontSize: s.fontSize,
485
+ height: l.height,
486
+ padding: l.padding,
487
+ fontSize: l.fontSize,
488
488
  fontFamily: "var(--lucent-font-family-base)",
489
489
  fontWeight: "var(--lucent-font-weight-medium)",
490
490
  lineHeight: 1,
491
491
  borderRadius: "var(--lucent-radius-full)",
492
- background: r.bg,
493
- color: r.color,
494
- border: `1px solid ${r.border}`,
492
+ background: i.bg,
493
+ color: i.color,
494
+ border: `1px solid ${i.border}`,
495
495
  whiteSpace: "nowrap",
496
- boxSizing: "border-box"
496
+ boxSizing: "border-box",
497
+ ...o
497
498
  }, children: [
498
499
  a && /* @__PURE__ */ n("span", { style: {
499
500
  width: 6,
@@ -502,10 +503,10 @@ function lt({ variant: t = "neutral", size: e = "md", dot: a = !1, children: o }
502
503
  background: "currentColor",
503
504
  flexShrink: 0
504
505
  } }),
505
- o
506
+ r
506
507
  ] });
507
508
  }
508
- const ct = {
509
+ const pt = {
509
510
  id: "badge",
510
511
  name: "Badge",
511
512
  tier: "atom",
@@ -530,29 +531,29 @@ const ct = {
530
531
  role: "status",
531
532
  notes: "Use aria-label on the parent element when badge meaning depends on context."
532
533
  }
533
- }, le = {
534
+ }, ce = {
534
535
  xs: 24,
535
536
  sm: 32,
536
537
  md: 40,
537
538
  lg: 56,
538
539
  xl: 80
539
- }, ce = {
540
+ }, de = {
540
541
  xs: "var(--lucent-font-size-xs)",
541
542
  sm: "var(--lucent-font-size-xs)",
542
543
  md: "var(--lucent-font-size-sm)",
543
544
  lg: "var(--lucent-font-size-lg)",
544
545
  xl: "var(--lucent-font-size-xl)"
545
546
  };
546
- function de(t, e) {
547
- var o, r, s;
547
+ function ue(t, e) {
548
+ var r, o, i;
548
549
  if (e) return e.slice(0, 2).toUpperCase();
549
550
  const a = t.trim().split(/\s+/);
550
- return a.length === 1 ? (((o = a[0]) == null ? void 0 : o[0]) ?? "").toUpperCase() : ((((r = a[0]) == null ? void 0 : r[0]) ?? "") + (((s = a[a.length - 1]) == null ? void 0 : s[0]) ?? "")).toUpperCase();
551
+ return a.length === 1 ? (((r = a[0]) == null ? void 0 : r[0]) ?? "").toUpperCase() : ((((o = a[0]) == null ? void 0 : o[0]) ?? "") + (((i = a[a.length - 1]) == null ? void 0 : i[0]) ?? "")).toUpperCase();
551
552
  }
552
- function dt({ src: t, alt: e, size: a = "md", initials: o, style: r, ...s }) {
553
- const c = le[a], l = de(e, o), u = {
554
- width: c,
555
- height: c,
553
+ function ft({ src: t, alt: e, size: a = "md", initials: r, style: o, ...i }) {
554
+ const l = ce[a], s = ue(e, r), d = {
555
+ width: l,
556
+ height: l,
556
557
  borderRadius: "var(--lucent-radius-full)",
557
558
  flexShrink: 0,
558
559
  display: "inline-flex",
@@ -561,17 +562,17 @@ function dt({ src: t, alt: e, size: a = "md", initials: o, style: r, ...s }) {
561
562
  overflow: "hidden",
562
563
  boxSizing: "border-box",
563
564
  userSelect: "none",
564
- ...r
565
+ ...o
565
566
  };
566
567
  return t ? /* @__PURE__ */ n(
567
568
  "img",
568
569
  {
569
570
  src: t,
570
571
  alt: e,
571
- width: c,
572
- height: c,
573
- style: { ...u, objectFit: "cover" },
574
- ...s
572
+ width: l,
573
+ height: l,
574
+ style: { ...d, objectFit: "cover" },
575
+ ...i
575
576
  }
576
577
  ) : /* @__PURE__ */ n(
577
578
  "span",
@@ -579,18 +580,18 @@ function dt({ src: t, alt: e, size: a = "md", initials: o, style: r, ...s }) {
579
580
  role: "img",
580
581
  "aria-label": e,
581
582
  style: {
582
- ...u,
583
+ ...d,
583
584
  background: "var(--lucent-accent-default)",
584
585
  color: "var(--lucent-text-on-accent)",
585
- fontSize: ce[a],
586
+ fontSize: de[a],
586
587
  fontWeight: "var(--lucent-font-weight-semibold)",
587
588
  fontFamily: "var(--lucent-font-family-base)"
588
589
  },
589
- children: l
590
+ children: s
590
591
  }
591
592
  );
592
593
  }
593
- const ut = {
594
+ const mt = {
594
595
  id: "avatar",
595
596
  name: "Avatar",
596
597
  tier: "atom",
@@ -616,38 +617,38 @@ const ut = {
616
617
  ariaAttributes: ["aria-label"],
617
618
  notes: 'When src is present, renders as <img> with alt. When showing initials, renders as <span role="img" aria-label>.'
618
619
  }
619
- }, ue = {
620
+ }, pe = {
620
621
  xs: 12,
621
622
  sm: 16,
622
623
  md: 24,
623
624
  lg: 36
624
- }, pe = {
625
+ }, fe = {
625
626
  xs: 2.5,
626
627
  sm: 2.5,
627
628
  md: 2,
628
629
  lg: 2
629
630
  };
630
- function fe({ size: t = "md", label: e = "Loading…", color: a }) {
631
- const o = ue[t], r = pe[t];
632
- return /* @__PURE__ */ g("span", { role: "status", "aria-label": e, style: { display: "inline-flex", alignItems: "center", justifyContent: "center" }, children: [
633
- /* @__PURE__ */ g(
631
+ function me({ size: t = "md", label: e = "Loading…", color: a }) {
632
+ const r = pe[t], o = fe[t];
633
+ return /* @__PURE__ */ m("span", { role: "status", "aria-label": e, style: { display: "inline-flex", alignItems: "center", justifyContent: "center" }, children: [
634
+ /* @__PURE__ */ m(
634
635
  "svg",
635
636
  {
636
- width: o,
637
- height: o,
637
+ width: r,
638
+ height: r,
638
639
  viewBox: "0 0 24 24",
639
640
  fill: "none",
640
641
  "aria-hidden": !0,
641
642
  style: { animation: "lucent-spin 0.7s linear infinite", color: a ?? "currentColor" },
642
643
  children: [
643
644
  /* @__PURE__ */ n("style", { children: "@keyframes lucent-spin { to { transform: rotate(360deg); } }" }),
644
- /* @__PURE__ */ n("circle", { cx: 12, cy: 12, r: 10, stroke: "currentColor", strokeWidth: r, strokeOpacity: 0.2 }),
645
+ /* @__PURE__ */ n("circle", { cx: 12, cy: 12, r: 10, stroke: "currentColor", strokeWidth: o, strokeOpacity: 0.2 }),
645
646
  /* @__PURE__ */ n(
646
647
  "path",
647
648
  {
648
649
  d: "M12 2a10 10 0 0 1 10 10",
649
650
  stroke: "currentColor",
650
- strokeWidth: r,
651
+ strokeWidth: o,
651
652
  strokeLinecap: "round"
652
653
  }
653
654
  )
@@ -657,7 +658,7 @@ function fe({ size: t = "md", label: e = "Loading…", color: a }) {
657
658
  /* @__PURE__ */ n("span", { style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0,0,0,0)", whiteSpace: "nowrap" }, children: e })
658
659
  ] });
659
660
  }
660
- const pt = {
661
+ const ht = {
661
662
  id: "spinner",
662
663
  name: "Spinner",
663
664
  tier: "atom",
@@ -682,7 +683,7 @@ const pt = {
682
683
  notes: 'The visible SVG is aria-hidden. The label is conveyed via a visually-hidden span inside role="status".'
683
684
  }
684
685
  };
685
- function ft({ orientation: t = "horizontal", label: e, spacing: a = "var(--lucent-space-4)" }) {
686
+ function gt({ orientation: t = "horizontal", label: e, spacing: a = "var(--lucent-space-4)", style: r }) {
686
687
  return t === "vertical" ? /* @__PURE__ */ n(
687
688
  "span",
688
689
  {
@@ -694,10 +695,11 @@ function ft({ orientation: t = "horizontal", label: e, spacing: a = "var(--lucen
694
695
  alignSelf: "stretch",
695
696
  background: "var(--lucent-border-default)",
696
697
  margin: `0 ${a}`,
697
- flexShrink: 0
698
+ flexShrink: 0,
699
+ ...r
698
700
  }
699
701
  }
700
- ) : e ? /* @__PURE__ */ g(
702
+ ) : e ? /* @__PURE__ */ m(
701
703
  "div",
702
704
  {
703
705
  role: "separator",
@@ -706,7 +708,8 @@ function ft({ orientation: t = "horizontal", label: e, spacing: a = "var(--lucen
706
708
  display: "flex",
707
709
  alignItems: "center",
708
710
  gap: "var(--lucent-space-3)",
709
- margin: `${a} 0`
711
+ margin: `${a} 0`,
712
+ ...r
710
713
  },
711
714
  children: [
712
715
  /* @__PURE__ */ n("span", { style: { flex: 1, height: "1px", background: "var(--lucent-border-default)" } }),
@@ -729,12 +732,13 @@ function ft({ orientation: t = "horizontal", label: e, spacing: a = "var(--lucen
729
732
  border: "none",
730
733
  borderTop: "1px solid var(--lucent-border-default)",
731
734
  margin: `${a} 0`,
732
- width: "100%"
735
+ width: "100%",
736
+ ...r
733
737
  }
734
738
  }
735
739
  );
736
740
  }
737
- const mt = {
741
+ const bt = {
738
742
  id: "divider",
739
743
  name: "Divider",
740
744
  tier: "atom",
@@ -757,7 +761,7 @@ const mt = {
757
761
  role: "separator",
758
762
  ariaAttributes: ["aria-orientation", "aria-label"]
759
763
  }
760
- }, me = { sm: 14, md: 16 }, he = `
764
+ }, he = { sm: 14, md: 16 }, ge = `
761
765
  @keyframes lucent-cb-pop {
762
766
  0% { transform: scale(1); }
763
767
  35% { transform: scale(0.82); }
@@ -769,40 +773,40 @@ const mt = {
769
773
  60% { transform: scale(1.15) rotate(2deg); }
770
774
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
771
775
  }
772
- `, ge = N(
776
+ `, be = N(
773
777
  ({
774
778
  label: t,
775
779
  size: e = "md",
776
780
  indeterminate: a = !1,
777
- checked: o,
778
- defaultChecked: r,
779
- disabled: s,
780
- id: c,
781
- onChange: l,
782
- style: u,
783
- ...m
784
- }, d) => {
785
- const h = M(null), p = c ?? `lucent-checkbox-${Math.random().toString(36).slice(2, 7)}`, i = me[e], f = o !== void 0, [v, T] = C(r ?? !1), b = f ? !!o : v, w = M(b), [k, S] = C(0);
781
+ checked: r,
782
+ defaultChecked: o,
783
+ disabled: i,
784
+ id: l,
785
+ onChange: s,
786
+ style: d,
787
+ ...p
788
+ }, f) => {
789
+ const h = M(null), c = l ?? `lucent-checkbox-${Math.random().toString(36).slice(2, 7)}`, u = he[e], b = r !== void 0, [g, x] = z(o ?? !1), w = b ? !!r : g, v = M(w), [k, y] = z(0);
786
790
  F(() => {
787
- !s && w.current !== b && (w.current = b, S((I) => I + 1));
788
- }, [b, s]);
789
- const q = K(
790
- (I) => {
791
- h.current = I, typeof d == "function" ? d(I) : d && (d.current = I);
791
+ !i && v.current !== w && (v.current = w, y((q) => q + 1));
792
+ }, [w, i]);
793
+ const I = X(
794
+ (q) => {
795
+ h.current = q, typeof f == "function" ? f(q) : f && (f.current = q);
792
796
  },
793
- [d]
797
+ [f]
794
798
  );
795
799
  F(() => {
796
800
  h.current && (h.current.indeterminate = a);
797
801
  }, [a]);
798
- const E = (I) => {
799
- f || T(I.target.checked), l == null || l(I);
800
- }, R = s ? "var(--lucent-text-disabled)" : "var(--lucent-text-on-accent)", _ = {
801
- width: i,
802
- height: i,
802
+ const T = (q) => {
803
+ b || x(q.target.checked), s == null || s(q);
804
+ }, R = i ? "var(--lucent-text-disabled)" : "var(--lucent-text-on-accent)", B = {
805
+ width: u,
806
+ height: u,
803
807
  borderRadius: "var(--lucent-radius-sm)",
804
- border: `1.5px solid ${s ? "transparent" : b || a ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)"}`,
805
- background: s ? "var(--lucent-bg-muted)" : b || a ? "var(--lucent-accent-default)" : "var(--lucent-surface-default)",
808
+ border: `1.5px solid ${i ? "transparent" : w || a ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)"}`,
809
+ background: i ? "var(--lucent-bg-muted)" : w || a ? "var(--lucent-accent-default)" : "var(--lucent-surface-default)",
806
810
  display: "inline-flex",
807
811
  alignItems: "center",
808
812
  justifyContent: "center",
@@ -811,42 +815,42 @@ const mt = {
811
815
  // Re-key forces the animation to restart on every toggle.
812
816
  animation: k > 0 ? "lucent-cb-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0
813
817
  };
814
- return /* @__PURE__ */ g(A, { children: [
815
- /* @__PURE__ */ n("style", { children: he }),
816
- /* @__PURE__ */ g(
818
+ return /* @__PURE__ */ m(A, { children: [
819
+ /* @__PURE__ */ n("style", { children: ge }),
820
+ /* @__PURE__ */ m(
817
821
  "label",
818
822
  {
819
823
  style: {
820
824
  display: "inline-flex",
821
825
  alignItems: "center",
822
826
  gap: "var(--lucent-space-2)",
823
- cursor: s ? "not-allowed" : "pointer",
827
+ cursor: i ? "not-allowed" : "pointer",
824
828
  fontFamily: "var(--lucent-font-family-base)",
825
829
  fontSize: e === "sm" ? "var(--lucent-font-size-sm)" : "var(--lucent-font-size-md)",
826
- color: s ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
830
+ color: i ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
827
831
  userSelect: "none",
828
- ...u
832
+ ...d
829
833
  },
830
834
  children: [
831
835
  /* @__PURE__ */ n(
832
836
  "input",
833
837
  {
834
- ref: q,
838
+ ref: I,
835
839
  type: "checkbox",
836
- id: p,
837
- checked: f ? o : v,
838
- disabled: s,
839
- onChange: E,
840
+ id: c,
841
+ checked: b ? r : g,
842
+ disabled: i,
843
+ onChange: T,
840
844
  style: { position: "absolute", opacity: 0, width: 0, height: 0, margin: 0, pointerEvents: "none" },
841
- ...m
845
+ ...p
842
846
  }
843
847
  ),
844
- /* @__PURE__ */ g("span", { "aria-hidden": !0, style: _, children: [
845
- b && !a && /* @__PURE__ */ n(
848
+ /* @__PURE__ */ m("span", { "aria-hidden": !0, style: B, children: [
849
+ w && !a && /* @__PURE__ */ n(
846
850
  "svg",
847
851
  {
848
- width: i - 4,
849
- height: i - 4,
852
+ width: u - 4,
853
+ height: u - 4,
850
854
  viewBox: "0 0 10 10",
851
855
  fill: "none",
852
856
  style: { animation: "lucent-cb-mark 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" },
@@ -856,8 +860,8 @@ const mt = {
856
860
  a && /* @__PURE__ */ n(
857
861
  "svg",
858
862
  {
859
- width: i - 4,
860
- height: i - 4,
863
+ width: u - 4,
864
+ height: u - 4,
861
865
  viewBox: "0 0 10 10",
862
866
  fill: "none",
863
867
  style: { animation: "lucent-cb-mark 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" },
@@ -872,8 +876,8 @@ const mt = {
872
876
  ] });
873
877
  }
874
878
  );
875
- ge.displayName = "Checkbox";
876
- const ht = {
879
+ be.displayName = "Checkbox";
880
+ const vt = {
877
881
  id: "checkbox",
878
882
  name: "Checkbox",
879
883
  tier: "atom",
@@ -942,7 +946,7 @@ const ht = {
942
946
  ariaAttributes: ["aria-checked", "aria-disabled"],
943
947
  keyboardInteractions: ["Space — toggles checked state"]
944
948
  }
945
- }, be = `
949
+ }, ve = `
946
950
  @keyframes lucent-radio-pop {
947
951
  0% { transform: scale(1); }
948
952
  35% { transform: scale(0.82); }
@@ -954,62 +958,62 @@ const ht = {
954
958
  60% { transform: scale(1.2); }
955
959
  100% { opacity: 1; transform: scale(1); }
956
960
  }
957
- `, W = L(null);
961
+ `, H = W(null);
958
962
  function ye({
959
963
  name: t,
960
964
  value: e,
961
965
  onChange: a,
962
- disabled: o,
963
- orientation: r = "vertical",
964
- label: s,
965
- children: c
966
+ disabled: r,
967
+ orientation: o = "vertical",
968
+ label: i,
969
+ children: l
966
970
  }) {
967
- return /* @__PURE__ */ n(W.Provider, { value: { name: t, value: e, onChange: a, disabled: o ?? !1 }, children: /* @__PURE__ */ n(
971
+ return /* @__PURE__ */ n(H.Provider, { value: { name: t, value: e, onChange: a, disabled: r ?? !1 }, children: /* @__PURE__ */ n(
968
972
  "div",
969
973
  {
970
974
  role: "radiogroup",
971
- "aria-label": s,
975
+ "aria-label": i,
972
976
  style: {
973
977
  display: "flex",
974
- flexDirection: r === "vertical" ? "column" : "row",
975
- gap: r === "vertical" ? "var(--lucent-space-3)" : "var(--lucent-space-4)",
978
+ flexDirection: o === "vertical" ? "column" : "row",
979
+ gap: o === "vertical" ? "var(--lucent-space-3)" : "var(--lucent-space-4)",
976
980
  flexWrap: "wrap"
977
981
  },
978
- children: c
982
+ children: l
979
983
  }
980
984
  ) });
981
985
  }
982
- const ve = { sm: 14, md: 16 };
983
- function gt({ value: t, label: e, size: a = "md", disabled: o, id: r, onChange: s, checked: c, ...l }) {
984
- const u = D(W), m = r ?? `lucent-radio-${Math.random().toString(36).slice(2, 7)}`, d = ve[a], h = o ?? (u == null ? void 0 : u.disabled) ?? !1, p = u ? u.value === t : !!c, i = M(p), [f, v] = C(0);
986
+ const xe = { sm: 14, md: 16 };
987
+ function yt({ value: t, label: e, size: a = "md", disabled: r, id: o, onChange: i, checked: l, ...s }) {
988
+ const d = V(H), p = o ?? `lucent-radio-${Math.random().toString(36).slice(2, 7)}`, f = xe[a], h = r ?? (d == null ? void 0 : d.disabled) ?? !1, c = d ? d.value === t : !!l, u = M(c), [b, g] = z(0);
985
989
  F(() => {
986
- !h && i.current !== p && (i.current = p, v((k) => k + 1));
987
- }, [p, h]);
988
- const T = (k) => {
989
- u == null || u.onChange(t), s == null || s(k);
990
- }, b = {
991
- width: d / 2,
992
- height: d / 2,
990
+ !h && u.current !== c && (u.current = c, g((k) => k + 1));
991
+ }, [c, h]);
992
+ const x = (k) => {
993
+ d == null || d.onChange(t), i == null || i(k);
994
+ }, w = {
995
+ width: f / 2,
996
+ height: f / 2,
993
997
  borderRadius: "50%",
994
998
  background: h ? "var(--lucent-text-disabled)" : "var(--lucent-text-on-accent)",
995
- animation: p ? "lucent-radio-dot 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0,
996
- opacity: p ? 1 : 0
997
- }, w = {
998
- width: d,
999
- height: d,
999
+ animation: c ? "lucent-radio-dot 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0,
1000
+ opacity: c ? 1 : 0
1001
+ }, v = {
1002
+ width: f,
1003
+ height: f,
1000
1004
  borderRadius: "50%",
1001
- border: `1.5px solid ${h ? "transparent" : p ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)"}`,
1002
- background: h ? "var(--lucent-bg-muted)" : p ? "var(--lucent-accent-default)" : "var(--lucent-surface-default)",
1005
+ border: `1.5px solid ${h ? "transparent" : c ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)"}`,
1006
+ background: h ? "var(--lucent-bg-muted)" : c ? "var(--lucent-accent-default)" : "var(--lucent-surface-default)",
1003
1007
  display: "inline-flex",
1004
1008
  alignItems: "center",
1005
1009
  justifyContent: "center",
1006
1010
  flexShrink: 0,
1007
1011
  transition: "background var(--lucent-duration-fast) var(--lucent-easing-default), border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
1008
- animation: f > 0 ? "lucent-radio-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0
1012
+ animation: b > 0 ? "lucent-radio-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0
1009
1013
  };
1010
- return /* @__PURE__ */ g(A, { children: [
1011
- /* @__PURE__ */ n("style", { children: be }),
1012
- /* @__PURE__ */ g(
1014
+ return /* @__PURE__ */ m(A, { children: [
1015
+ /* @__PURE__ */ n("style", { children: ve }),
1016
+ /* @__PURE__ */ m(
1013
1017
  "label",
1014
1018
  {
1015
1019
  style: {
@@ -1027,41 +1031,41 @@ function gt({ value: t, label: e, size: a = "md", disabled: o, id: r, onChange:
1027
1031
  "input",
1028
1032
  {
1029
1033
  type: "radio",
1030
- id: m,
1034
+ id: p,
1031
1035
  value: t,
1032
- name: (u == null ? void 0 : u.name) ?? l.name,
1033
- checked: p,
1036
+ name: (d == null ? void 0 : d.name) ?? s.name,
1037
+ checked: c,
1034
1038
  disabled: h,
1035
- onChange: T,
1039
+ onChange: x,
1036
1040
  style: { position: "absolute", opacity: 0, width: 0, height: 0, margin: 0, pointerEvents: "none" },
1037
- ...l
1041
+ ...s
1038
1042
  }
1039
1043
  ),
1040
- /* @__PURE__ */ n("span", { "aria-hidden": !0, style: w, children: /* @__PURE__ */ n("span", { style: b }) }, f),
1044
+ /* @__PURE__ */ n("span", { "aria-hidden": !0, style: v, children: /* @__PURE__ */ n("span", { style: w }) }, b),
1041
1045
  e
1042
1046
  ]
1043
1047
  }
1044
1048
  )
1045
1049
  ] });
1046
1050
  }
1047
- function bt({
1051
+ function xt({
1048
1052
  defaultValue: t = "",
1049
1053
  onChange: e,
1050
1054
  ...a
1051
1055
  }) {
1052
- const [o, r] = C(t);
1056
+ const [r, o] = z(t);
1053
1057
  return /* @__PURE__ */ n(
1054
1058
  ye,
1055
1059
  {
1056
1060
  ...a,
1057
- value: o,
1058
- onChange: (s) => {
1059
- r(s), e == null || e(s);
1061
+ value: r,
1062
+ onChange: (i) => {
1063
+ o(i), e == null || e(i);
1060
1064
  }
1061
1065
  }
1062
1066
  );
1063
1067
  }
1064
- const yt = {
1068
+ const wt = {
1065
1069
  id: "radio",
1066
1070
  name: "Radio",
1067
1071
  tier: "atom",
@@ -1138,11 +1142,11 @@ const yt = {
1138
1142
  "Space — selects the focused radio"
1139
1143
  ]
1140
1144
  }
1141
- }, xe = {
1145
+ }, we = {
1142
1146
  sm: { track: [28, 16], thumb: 12 },
1143
1147
  md: { track: [36, 20], thumb: 16 },
1144
1148
  lg: { track: [44, 24], thumb: 20 }
1145
- }, B = "cubic-bezier(0.34, 1.56, 0.64, 1)", we = `
1149
+ }, $ = "cubic-bezier(0.34, 1.56, 0.64, 1)", ke = `
1146
1150
  @keyframes lucent-toggle-pop {
1147
1151
  0% { transform: scale(1); }
1148
1152
  35% { transform: scale(0.94); }
@@ -1150,39 +1154,39 @@ const yt = {
1150
1154
  100% { transform: scale(1); }
1151
1155
  }
1152
1156
  `;
1153
- function vt({
1157
+ function kt({
1154
1158
  label: t,
1155
1159
  size: e = "md",
1156
1160
  checked: a,
1157
- defaultChecked: o,
1158
- disabled: r,
1159
- id: s,
1160
- onChange: c,
1161
- style: l,
1162
- ...u
1161
+ defaultChecked: r,
1162
+ disabled: o,
1163
+ id: i,
1164
+ onChange: l,
1165
+ style: s,
1166
+ ...d
1163
1167
  }) {
1164
- const m = s ?? `lucent-toggle-${Math.random().toString(36).slice(2, 7)}`, d = a !== void 0, [h, p] = C(o ?? !1), i = d ? !!a : h, f = M(i), [v, T] = C(0);
1168
+ const p = i ?? `lucent-toggle-${Math.random().toString(36).slice(2, 7)}`, f = a !== void 0, [h, c] = z(r ?? !1), u = f ? !!a : h, b = M(u), [g, x] = z(0);
1165
1169
  F(() => {
1166
- !r && f.current !== i && (f.current = i, T((E) => E + 1));
1167
- }, [i, r]);
1168
- const { track: [b, w], thumb: k } = xe[e], S = i ? b - k - 2 : 2, q = (E) => {
1169
- d || p(E.target.checked), c == null || c(E);
1170
+ !o && b.current !== u && (b.current = u, x((T) => T + 1));
1171
+ }, [u, o]);
1172
+ const { track: [w, v], thumb: k } = we[e], y = u ? w - k - 2 : 2, I = (T) => {
1173
+ f || c(T.target.checked), l == null || l(T);
1170
1174
  };
1171
- return /* @__PURE__ */ g(A, { children: [
1172
- /* @__PURE__ */ n("style", { children: we }),
1173
- /* @__PURE__ */ g(
1175
+ return /* @__PURE__ */ m(A, { children: [
1176
+ /* @__PURE__ */ n("style", { children: ke }),
1177
+ /* @__PURE__ */ m(
1174
1178
  "label",
1175
1179
  {
1176
1180
  style: {
1177
1181
  display: "inline-flex",
1178
1182
  alignItems: "center",
1179
1183
  gap: "var(--lucent-space-2)",
1180
- cursor: r ? "not-allowed" : "pointer",
1184
+ cursor: o ? "not-allowed" : "pointer",
1181
1185
  fontFamily: "var(--lucent-font-family-base)",
1182
1186
  fontSize: "var(--lucent-font-size-md)",
1183
- color: r ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
1187
+ color: o ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
1184
1188
  userSelect: "none",
1185
- ...l
1189
+ ...s
1186
1190
  },
1187
1191
  children: [
1188
1192
  /* @__PURE__ */ n(
@@ -1190,13 +1194,13 @@ function vt({
1190
1194
  {
1191
1195
  type: "checkbox",
1192
1196
  role: "switch",
1193
- id: m,
1194
- checked: d ? a : h,
1195
- disabled: r,
1196
- onChange: q,
1197
- "aria-checked": i,
1197
+ id: p,
1198
+ checked: f ? a : h,
1199
+ disabled: o,
1200
+ onChange: I,
1201
+ "aria-checked": u,
1198
1202
  style: { position: "absolute", opacity: 0, width: 0, height: 0, margin: 0, pointerEvents: "none" },
1199
- ...u
1203
+ ...d
1200
1204
  }
1201
1205
  ),
1202
1206
  /* @__PURE__ */ n(
@@ -1205,13 +1209,13 @@ function vt({
1205
1209
  "aria-hidden": !0,
1206
1210
  style: {
1207
1211
  position: "relative",
1208
- width: b,
1209
- height: w,
1210
- borderRadius: w / 2,
1211
- background: r ? "var(--lucent-bg-muted)" : i ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)",
1212
+ width: w,
1213
+ height: v,
1214
+ borderRadius: v / 2,
1215
+ background: o ? "var(--lucent-bg-muted)" : u ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)",
1212
1216
  flexShrink: 0,
1213
1217
  transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)",
1214
- animation: v > 0 ? `lucent-toggle-pop 240ms ${B} forwards` : void 0
1218
+ animation: g > 0 ? `lucent-toggle-pop 240ms ${$} forwards` : void 0
1215
1219
  },
1216
1220
  children: /* @__PURE__ */ n(
1217
1221
  "span",
@@ -1219,18 +1223,18 @@ function vt({
1219
1223
  style: {
1220
1224
  position: "absolute",
1221
1225
  top: 2,
1222
- left: S,
1226
+ left: y,
1223
1227
  width: k,
1224
1228
  height: k,
1225
1229
  borderRadius: "50%",
1226
1230
  background: "#ffffff",
1227
1231
  boxShadow: "0 1px 3px rgb(0 0 0 / 0.2)",
1228
- transition: `left 260ms ${B}`
1232
+ transition: `left 260ms ${$}`
1229
1233
  }
1230
1234
  }
1231
1235
  )
1232
1236
  },
1233
- v
1237
+ g
1234
1238
  ),
1235
1239
  t
1236
1240
  ]
@@ -1238,7 +1242,7 @@ function vt({
1238
1242
  )
1239
1243
  ] });
1240
1244
  }
1241
- const xt = {
1245
+ const St = {
1242
1246
  id: "toggle",
1243
1247
  name: "Toggle",
1244
1248
  tier: "atom",
@@ -1306,14 +1310,14 @@ const xt = {
1306
1310
  sm: "32px",
1307
1311
  md: "40px",
1308
1312
  lg: "46px"
1309
- }, ke = {
1313
+ }, Te = {
1310
1314
  sm: "var(--lucent-font-size-sm)",
1311
1315
  md: "var(--lucent-font-size-md)",
1312
1316
  lg: "var(--lucent-font-size-lg)"
1313
- }, Te = N(
1314
- ({ options: t, size: e = "md", label: a, helperText: o, errorText: r, placeholder: s, disabled: c, id: l, style: u, ...m }, d) => {
1315
- const h = l ?? `lucent-select-${Math.random().toString(36).slice(2, 7)}`, p = !!r;
1316
- return /* @__PURE__ */ g("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%" }, children: [
1317
+ }, Ce = N(
1318
+ ({ options: t, size: e = "md", label: a, helperText: r, errorText: o, placeholder: i, disabled: l, id: s, style: d, ...p }, f) => {
1319
+ const h = s ?? `lucent-select-${Math.random().toString(36).slice(2, 7)}`, c = !!o;
1320
+ return /* @__PURE__ */ m("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%" }, children: [
1317
1321
  a && /* @__PURE__ */ n(
1318
1322
  "label",
1319
1323
  {
@@ -1327,52 +1331,52 @@ const xt = {
1327
1331
  children: a
1328
1332
  }
1329
1333
  ),
1330
- /* @__PURE__ */ g("div", { style: { position: "relative", display: "flex", alignItems: "center" }, children: [
1331
- /* @__PURE__ */ g(
1334
+ /* @__PURE__ */ m("div", { style: { position: "relative", display: "flex", alignItems: "center" }, children: [
1335
+ /* @__PURE__ */ m(
1332
1336
  "select",
1333
1337
  {
1334
- ref: d,
1338
+ ref: f,
1335
1339
  id: h,
1336
- disabled: c,
1337
- "aria-invalid": p,
1338
- "aria-describedby": p ? `${h}-error` : o ? `${h}-helper` : void 0,
1340
+ disabled: l,
1341
+ "aria-invalid": c,
1342
+ "aria-describedby": c ? `${h}-error` : r ? `${h}-helper` : void 0,
1339
1343
  style: {
1340
1344
  width: "100%",
1341
1345
  height: Se[e],
1342
1346
  padding: "0 var(--lucent-space-8) 0 var(--lucent-space-3)",
1343
- fontSize: ke[e],
1347
+ fontSize: Te[e],
1344
1348
  fontFamily: "var(--lucent-font-family-base)",
1345
1349
  color: "var(--lucent-text-primary)",
1346
1350
  background: "var(--lucent-surface-default)",
1347
- border: `1px solid ${p ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"}`,
1351
+ border: `1px solid ${c ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"}`,
1348
1352
  borderRadius: "var(--lucent-radius-lg)",
1349
1353
  outline: "none",
1350
1354
  boxSizing: "border-box",
1351
1355
  appearance: "none",
1352
- cursor: c ? "not-allowed" : "pointer",
1356
+ cursor: l ? "not-allowed" : "pointer",
1353
1357
  transition: "border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
1354
- ...u
1358
+ ...d
1355
1359
  },
1356
- onMouseEnter: (i) => {
1357
- var f;
1358
- !c && i.currentTarget !== document.activeElement && (i.currentTarget.style.borderColor = p ? "var(--lucent-danger-default)" : "var(--lucent-border-strong)"), (f = m.onMouseEnter) == null || f.call(m, i);
1360
+ onMouseEnter: (u) => {
1361
+ var b;
1362
+ !l && u.currentTarget !== document.activeElement && (u.currentTarget.style.borderColor = c ? "var(--lucent-danger-default)" : "var(--lucent-border-strong)"), (b = p.onMouseEnter) == null || b.call(p, u);
1359
1363
  },
1360
- onMouseLeave: (i) => {
1361
- var f;
1362
- !c && i.currentTarget !== document.activeElement && (i.currentTarget.style.borderColor = p ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"), (f = m.onMouseLeave) == null || f.call(m, i);
1364
+ onMouseLeave: (u) => {
1365
+ var b;
1366
+ !l && u.currentTarget !== document.activeElement && (u.currentTarget.style.borderColor = c ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"), (b = p.onMouseLeave) == null || b.call(p, u);
1363
1367
  },
1364
- onFocus: (i) => {
1365
- var f;
1366
- i.currentTarget.style.borderColor = p ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", i.currentTarget.style.boxShadow = `0 0 0 3px ${p ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (f = m.onFocus) == null || f.call(m, i);
1368
+ onFocus: (u) => {
1369
+ var b;
1370
+ u.currentTarget.style.borderColor = c ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", u.currentTarget.style.boxShadow = `0 0 0 3px ${c ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (b = p.onFocus) == null || b.call(p, u);
1367
1371
  },
1368
- onBlur: (i) => {
1369
- var f;
1370
- i.currentTarget.style.borderColor = p ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", i.currentTarget.style.boxShadow = "none", (f = m.onBlur) == null || f.call(m, i);
1372
+ onBlur: (u) => {
1373
+ var b;
1374
+ u.currentTarget.style.borderColor = c ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", u.currentTarget.style.boxShadow = "none", (b = p.onBlur) == null || b.call(p, u);
1371
1375
  },
1372
- ...m,
1376
+ ...p,
1373
1377
  children: [
1374
- s && /* @__PURE__ */ n("option", { value: "", disabled: !0, children: s }),
1375
- t.map((i) => /* @__PURE__ */ n("option", { value: i.value, disabled: i.disabled, children: i.label }, i.value))
1378
+ i && /* @__PURE__ */ n("option", { value: "", disabled: !0, children: i }),
1379
+ t.map((u) => /* @__PURE__ */ n("option", { value: u.value, disabled: u.disabled, children: u.label }, u.value))
1376
1380
  ]
1377
1381
  }
1378
1382
  ),
@@ -1392,7 +1396,7 @@ const xt = {
1392
1396
  }
1393
1397
  )
1394
1398
  ] }),
1395
- p && /* @__PURE__ */ n(
1399
+ c && /* @__PURE__ */ n(
1396
1400
  "span",
1397
1401
  {
1398
1402
  id: `${h}-error`,
@@ -1402,10 +1406,10 @@ const xt = {
1402
1406
  color: "var(--lucent-danger-text)",
1403
1407
  fontFamily: "var(--lucent-font-family-base)"
1404
1408
  },
1405
- children: r
1409
+ children: o
1406
1410
  }
1407
1411
  ),
1408
- !p && o && /* @__PURE__ */ n(
1412
+ !c && r && /* @__PURE__ */ n(
1409
1413
  "span",
1410
1414
  {
1411
1415
  id: `${h}-helper`,
@@ -1414,14 +1418,14 @@ const xt = {
1414
1418
  color: "var(--lucent-text-secondary)",
1415
1419
  fontFamily: "var(--lucent-font-family-base)"
1416
1420
  },
1417
- children: o
1421
+ children: r
1418
1422
  }
1419
1423
  )
1420
1424
  ] });
1421
1425
  }
1422
1426
  );
1423
- Te.displayName = "Select";
1424
- const wt = {
1427
+ Ce.displayName = "Select";
1428
+ const Tt = {
1425
1429
  id: "select",
1426
1430
  name: "Select",
1427
1431
  tier: "atom",
@@ -1519,78 +1523,78 @@ const wt = {
1519
1523
  "Escape — closes the list"
1520
1524
  ]
1521
1525
  }
1522
- }, Ce = {
1526
+ }, Ie = {
1523
1527
  neutral: { bg: "var(--lucent-bg-muted)", color: "var(--lucent-text-secondary)", border: "var(--lucent-border-default)", dismissHover: "var(--lucent-border-strong)" },
1524
1528
  accent: { bg: "var(--lucent-accent-subtle)", color: "var(--lucent-accent-active)", border: "var(--lucent-accent-subtle)", dismissHover: "var(--lucent-accent-default)" },
1525
1529
  success: { bg: "var(--lucent-success-subtle)", color: "var(--lucent-success-text)", border: "var(--lucent-success-subtle)", dismissHover: "var(--lucent-success-default)" },
1526
1530
  warning: { bg: "var(--lucent-warning-subtle)", color: "var(--lucent-warning-text)", border: "var(--lucent-warning-subtle)", dismissHover: "var(--lucent-warning-default)" },
1527
1531
  danger: { bg: "var(--lucent-danger-subtle)", color: "var(--lucent-danger-text)", border: "var(--lucent-danger-subtle)", dismissHover: "var(--lucent-danger-default)" },
1528
1532
  info: { bg: "var(--lucent-info-subtle)", color: "var(--lucent-info-text)", border: "var(--lucent-info-subtle)", dismissHover: "var(--lucent-info-default)" }
1529
- }, Ie = {
1533
+ }, ze = {
1530
1534
  sm: { fontSize: "var(--lucent-font-size-xs)", height: "20px", padding: "0 var(--lucent-space-2)", iconSize: 10, gap: "var(--lucent-space-1)" },
1531
1535
  md: { fontSize: "var(--lucent-font-size-sm)", height: "24px", padding: "0 var(--lucent-space-2)", iconSize: 12, gap: "var(--lucent-space-1)" }
1532
1536
  };
1533
- function St({ children: t, variant: e = "neutral", size: a = "md", onDismiss: o, disabled: r }) {
1534
- const s = Ce[e], c = Ie[a];
1535
- return /* @__PURE__ */ g(
1537
+ function Ct({ children: t, variant: e = "neutral", size: a = "md", onDismiss: r, disabled: o }) {
1538
+ const i = Ie[e], l = ze[a];
1539
+ return /* @__PURE__ */ m(
1536
1540
  "span",
1537
1541
  {
1538
1542
  style: {
1539
1543
  display: "inline-flex",
1540
1544
  alignItems: "center",
1541
- gap: c.gap,
1542
- height: c.height,
1543
- padding: o ? "0 var(--lucent-space-1) 0 var(--lucent-space-2)" : c.padding,
1544
- fontSize: c.fontSize,
1545
+ gap: l.gap,
1546
+ height: l.height,
1547
+ padding: r ? "0 var(--lucent-space-1) 0 var(--lucent-space-2)" : l.padding,
1548
+ fontSize: l.fontSize,
1545
1549
  fontFamily: "var(--lucent-font-family-base)",
1546
1550
  fontWeight: "var(--lucent-font-weight-medium)",
1547
1551
  lineHeight: 1,
1548
1552
  borderRadius: "var(--lucent-radius-full)",
1549
- background: s.bg,
1550
- color: s.color,
1551
- border: `1px solid ${s.border}`,
1553
+ background: i.bg,
1554
+ color: i.color,
1555
+ border: `1px solid ${i.border}`,
1552
1556
  whiteSpace: "nowrap",
1553
1557
  boxSizing: "border-box",
1554
- opacity: r ? 0.5 : 1
1558
+ opacity: o ? 0.5 : 1
1555
1559
  },
1556
1560
  children: [
1557
1561
  t,
1558
- o && /* @__PURE__ */ n(
1562
+ r && /* @__PURE__ */ n(
1559
1563
  "button",
1560
1564
  {
1561
1565
  type: "button",
1562
- onClick: r ? void 0 : o,
1563
- disabled: r,
1566
+ onClick: o ? void 0 : r,
1567
+ disabled: o,
1564
1568
  "aria-label": "Dismiss",
1565
1569
  style: {
1566
1570
  display: "inline-flex",
1567
1571
  alignItems: "center",
1568
1572
  justifyContent: "center",
1569
- width: c.iconSize + 4,
1570
- height: c.iconSize + 4,
1573
+ width: l.iconSize + 4,
1574
+ height: l.iconSize + 4,
1571
1575
  padding: 0,
1572
1576
  border: "none",
1573
1577
  borderRadius: "var(--lucent-radius-full)",
1574
1578
  background: "transparent",
1575
1579
  color: "inherit",
1576
- cursor: r ? "not-allowed" : "pointer",
1580
+ cursor: o ? "not-allowed" : "pointer",
1577
1581
  flexShrink: 0,
1578
1582
  lineHeight: 1
1579
1583
  },
1580
- onMouseEnter: (l) => {
1581
- r || (l.currentTarget.style.background = s.dismissHover + "33");
1584
+ onMouseEnter: (s) => {
1585
+ o || (s.currentTarget.style.background = i.dismissHover + "33");
1582
1586
  },
1583
- onMouseLeave: (l) => {
1584
- l.currentTarget.style.background = "transparent";
1587
+ onMouseLeave: (s) => {
1588
+ s.currentTarget.style.background = "transparent";
1585
1589
  },
1586
- children: /* @__PURE__ */ n("svg", { width: c.iconSize, height: c.iconSize, viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", children: /* @__PURE__ */ n("path", { d: "M2 2L8 8M8 2L2 8" }) })
1590
+ children: /* @__PURE__ */ n("svg", { width: l.iconSize, height: l.iconSize, viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", children: /* @__PURE__ */ n("path", { d: "M2 2L8 8M8 2L2 8" }) })
1587
1591
  }
1588
1592
  )
1589
1593
  ]
1590
1594
  }
1591
1595
  );
1592
1596
  }
1593
- const kt = {
1597
+ const It = {
1594
1598
  id: "tag",
1595
1599
  name: "Tag",
1596
1600
  tier: "atom",
@@ -1647,64 +1651,64 @@ const kt = {
1647
1651
  notes: 'The dismiss button has aria-label="Dismiss" and is keyboard-focusable.',
1648
1652
  keyboardInteractions: ["Enter / Space — activates the dismiss button when focused"]
1649
1653
  }
1650
- }, y = 5, ze = {
1651
- top: { bottom: "100%", left: "50%", transform: "translateX(-50%)", marginBottom: y + 3 },
1652
- bottom: { top: "100%", left: "50%", transform: "translateX(-50%)", marginTop: y + 3 },
1653
- left: { right: "100%", top: "50%", transform: "translateY(-50%)", marginRight: y + 3 },
1654
- right: { left: "100%", top: "50%", transform: "translateY(-50%)", marginLeft: y + 3 }
1655
- }, Me = {
1654
+ }, S = 5, Me = {
1655
+ top: { bottom: "100%", left: "50%", transform: "translateX(-50%)", marginBottom: S + 3 },
1656
+ bottom: { top: "100%", left: "50%", transform: "translateX(-50%)", marginTop: S + 3 },
1657
+ left: { right: "100%", top: "50%", transform: "translateY(-50%)", marginRight: S + 3 },
1658
+ right: { left: "100%", top: "50%", transform: "translateY(-50%)", marginLeft: S + 3 }
1659
+ }, qe = {
1656
1660
  top: {
1657
- bottom: -y,
1661
+ bottom: -S,
1658
1662
  left: "50%",
1659
1663
  transform: "translateX(-50%)",
1660
- borderWidth: `${y}px ${y}px 0 ${y}px`,
1664
+ borderWidth: `${S}px ${S}px 0 ${S}px`,
1661
1665
  borderColor: "var(--lucent-text-primary) transparent transparent transparent"
1662
1666
  },
1663
1667
  bottom: {
1664
- top: -y,
1668
+ top: -S,
1665
1669
  left: "50%",
1666
1670
  transform: "translateX(-50%)",
1667
- borderWidth: `0 ${y}px ${y}px ${y}px`,
1671
+ borderWidth: `0 ${S}px ${S}px ${S}px`,
1668
1672
  borderColor: "transparent transparent var(--lucent-text-primary) transparent"
1669
1673
  },
1670
1674
  left: {
1671
- right: -y,
1675
+ right: -S,
1672
1676
  top: "50%",
1673
1677
  transform: "translateY(-50%)",
1674
- borderWidth: `${y}px 0 ${y}px ${y}px`,
1678
+ borderWidth: `${S}px 0 ${S}px ${S}px`,
1675
1679
  borderColor: "transparent transparent transparent var(--lucent-text-primary)"
1676
1680
  },
1677
1681
  right: {
1678
- left: -y,
1682
+ left: -S,
1679
1683
  top: "50%",
1680
1684
  transform: "translateY(-50%)",
1681
- borderWidth: `${y}px ${y}px ${y}px 0`,
1685
+ borderWidth: `${S}px ${S}px ${S}px 0`,
1682
1686
  borderColor: "transparent var(--lucent-text-primary) transparent transparent"
1683
1687
  }
1684
1688
  };
1685
- function Tt({ content: t, children: e, placement: a = "top", delay: o = 300 }) {
1686
- const [r, s] = C(!1), c = M(null), l = () => {
1687
- c.current = setTimeout(() => s(!0), o);
1688
- }, u = () => {
1689
- c.current && clearTimeout(c.current), s(!1);
1689
+ function zt({ content: t, children: e, placement: a = "top", delay: r = 300 }) {
1690
+ const [o, i] = z(!1), l = M(null), s = () => {
1691
+ l.current = setTimeout(() => i(!0), r);
1692
+ }, d = () => {
1693
+ l.current && clearTimeout(l.current), i(!1);
1690
1694
  };
1691
- return t ? /* @__PURE__ */ g(
1695
+ return t ? /* @__PURE__ */ m(
1692
1696
  "span",
1693
1697
  {
1694
1698
  style: { position: "relative", display: "inline-flex" },
1695
- onMouseEnter: l,
1696
- onMouseLeave: u,
1697
- onFocus: l,
1698
- onBlur: u,
1699
+ onMouseEnter: s,
1700
+ onMouseLeave: d,
1701
+ onFocus: s,
1702
+ onBlur: d,
1699
1703
  children: [
1700
1704
  e,
1701
- r && /* @__PURE__ */ g(
1705
+ o && /* @__PURE__ */ m(
1702
1706
  "span",
1703
1707
  {
1704
1708
  role: "tooltip",
1705
1709
  style: {
1706
1710
  position: "absolute",
1707
- ...ze[a],
1711
+ ...Me[a],
1708
1712
  background: "var(--lucent-text-primary)",
1709
1713
  color: "var(--lucent-bg-base)",
1710
1714
  padding: "5px 10px",
@@ -1729,7 +1733,7 @@ function Tt({ content: t, children: e, placement: a = "top", delay: o = 300 }) {
1729
1733
  width: 0,
1730
1734
  height: 0,
1731
1735
  borderStyle: "solid",
1732
- ...Me[a]
1736
+ ...qe[a]
1733
1737
  }
1734
1738
  }
1735
1739
  )
@@ -1740,7 +1744,7 @@ function Tt({ content: t, children: e, placement: a = "top", delay: o = 300 }) {
1740
1744
  }
1741
1745
  ) : /* @__PURE__ */ n(A, { children: e });
1742
1746
  }
1743
- const Ct = {
1747
+ const Mt = {
1744
1748
  id: "tooltip",
1745
1749
  name: "Tooltip",
1746
1750
  tier: "atom",
@@ -1789,15 +1793,15 @@ const Ct = {
1789
1793
  ariaAttributes: ['role="tooltip"'],
1790
1794
  notes: 'The tooltip is shown on both hover and focus, making it accessible to keyboard users. Content is exposed via role="tooltip".'
1791
1795
  }
1792
- }, qe = {
1796
+ }, Ee = {
1793
1797
  xs: 12,
1794
1798
  sm: 14,
1795
1799
  md: 16,
1796
1800
  lg: 20,
1797
1801
  xl: 24
1798
1802
  };
1799
- function It({ children: t, size: e = "md", label: a, color: o, style: r }) {
1800
- const s = qe[e];
1803
+ function qt({ children: t, size: e = "md", label: a, color: r, style: o }) {
1804
+ const i = Ee[e];
1801
1805
  return /* @__PURE__ */ n(
1802
1806
  "span",
1803
1807
  {
@@ -1808,17 +1812,17 @@ function It({ children: t, size: e = "md", label: a, color: o, style: r }) {
1808
1812
  display: "inline-flex",
1809
1813
  alignItems: "center",
1810
1814
  justifyContent: "center",
1811
- width: s,
1812
- height: s,
1815
+ width: i,
1816
+ height: i,
1813
1817
  flexShrink: 0,
1814
- color: o ?? "currentColor",
1815
- ...r
1818
+ color: r ?? "currentColor",
1819
+ ...o
1816
1820
  },
1817
1821
  children: t
1818
1822
  }
1819
1823
  );
1820
1824
  }
1821
- const zt = {
1825
+ const Et = {
1822
1826
  id: "icon",
1823
1827
  name: "Icon",
1824
1828
  tier: "atom",
@@ -1866,7 +1870,7 @@ const zt = {
1866
1870
  ariaAttributes: ["aria-label", "aria-hidden"],
1867
1871
  notes: 'aria-hidden="true" is applied automatically when no label is given, hiding the icon from screen readers.'
1868
1872
  }
1869
- }, Ee = {
1873
+ }, Ae = {
1870
1874
  primary: "var(--lucent-text-primary)",
1871
1875
  secondary: "var(--lucent-text-secondary)",
1872
1876
  disabled: "var(--lucent-text-disabled)",
@@ -1876,7 +1880,7 @@ const zt = {
1876
1880
  warning: "var(--lucent-warning-text)",
1877
1881
  danger: "var(--lucent-danger-text)",
1878
1882
  info: "var(--lucent-info-text)"
1879
- }, Ae = {
1883
+ }, Fe = {
1880
1884
  xs: "var(--lucent-font-size-xs)",
1881
1885
  sm: "var(--lucent-font-size-sm)",
1882
1886
  md: "var(--lucent-font-size-md)",
@@ -1884,51 +1888,51 @@ const zt = {
1884
1888
  xl: "var(--lucent-font-size-xl)",
1885
1889
  "2xl": "var(--lucent-font-size-2xl)",
1886
1890
  "3xl": "var(--lucent-font-size-3xl)"
1887
- }, Fe = {
1891
+ }, Re = {
1888
1892
  regular: "var(--lucent-font-weight-regular)",
1889
1893
  medium: "var(--lucent-font-weight-medium)",
1890
1894
  semibold: "var(--lucent-font-weight-semibold)",
1891
1895
  bold: "var(--lucent-font-weight-bold)"
1892
- }, Ne = {
1896
+ }, Be = {
1893
1897
  tight: "var(--lucent-line-height-tight)",
1894
1898
  base: "var(--lucent-line-height-base)",
1895
1899
  relaxed: "var(--lucent-line-height-relaxed)"
1896
- }, Re = {
1900
+ }, Ne = {
1897
1901
  base: "var(--lucent-font-family-base)",
1898
1902
  mono: "var(--lucent-font-family-mono)",
1899
1903
  display: "var(--lucent-font-family-display)"
1900
1904
  };
1901
- function z({
1905
+ function E({
1902
1906
  as: t = "p",
1903
1907
  size: e = "md",
1904
1908
  weight: a = "regular",
1905
- color: o = "primary",
1906
- align: r = "left",
1907
- lineHeight: s = "base",
1908
- family: c = "base",
1909
- truncate: l = !1,
1910
- children: u,
1911
- style: m,
1912
- ...d
1909
+ color: r = "primary",
1910
+ align: o = "left",
1911
+ lineHeight: i = "base",
1912
+ family: l = "base",
1913
+ truncate: s = !1,
1914
+ children: d,
1915
+ style: p,
1916
+ ...f
1913
1917
  }) {
1914
1918
  const h = {
1915
- fontSize: Ae[e],
1916
- fontWeight: Fe[a],
1917
- color: Ee[o],
1918
- textAlign: r,
1919
- lineHeight: Ne[s],
1920
- fontFamily: Re[c],
1919
+ fontSize: Fe[e],
1920
+ fontWeight: Re[a],
1921
+ color: Ae[r],
1922
+ textAlign: o,
1923
+ lineHeight: Be[i],
1924
+ fontFamily: Ne[l],
1921
1925
  margin: 0,
1922
- ...l && {
1926
+ ...s && {
1923
1927
  overflow: "hidden",
1924
1928
  textOverflow: "ellipsis",
1925
1929
  whiteSpace: "nowrap"
1926
1930
  },
1927
- ...m
1931
+ ...p
1928
1932
  };
1929
- return /* @__PURE__ */ n(t, { style: h, ...d, children: u });
1933
+ return /* @__PURE__ */ n(t, { style: h, ...f, children: d });
1930
1934
  }
1931
- const Mt = {
1935
+ const At = {
1932
1936
  id: "text",
1933
1937
  name: "Text",
1934
1938
  tier: "atom",
@@ -2026,26 +2030,74 @@ const Mt = {
2026
2030
  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.'
2027
2031
  }
2028
2032
  };
2029
- function qt({
2033
+ function Ft({
2034
+ children: t,
2035
+ href: e,
2036
+ isActive: a = !1,
2037
+ icon: r,
2038
+ disabled: o = !1,
2039
+ onClick: i,
2040
+ as: l,
2041
+ style: s
2042
+ }) {
2043
+ return /* @__PURE__ */ m(
2044
+ l ?? "a",
2045
+ {
2046
+ href: o ? void 0 : e,
2047
+ onClick: o ? void 0 : i,
2048
+ "aria-current": a ? "page" : void 0,
2049
+ "aria-disabled": o || void 0,
2050
+ style: {
2051
+ display: "flex",
2052
+ alignItems: "center",
2053
+ gap: "var(--lucent-space-2)",
2054
+ padding: "var(--lucent-space-2) var(--lucent-space-3) var(--lucent-space-2) var(--lucent-space-4)",
2055
+ borderRadius: "var(--lucent-radius-md)",
2056
+ background: o ? "transparent" : a ? "var(--lucent-accent-default)" : "transparent",
2057
+ color: o ? "var(--lucent-text-disabled)" : a ? "var(--lucent-text-on-accent)" : "var(--lucent-text-secondary)",
2058
+ fontFamily: "var(--lucent-font-family-base)",
2059
+ fontSize: "var(--lucent-font-size-md)",
2060
+ fontWeight: a ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
2061
+ textDecoration: "none",
2062
+ cursor: o ? "not-allowed" : "pointer",
2063
+ transition: "background var(--lucent-duration-fast) var(--lucent-easing-default), color var(--lucent-duration-fast) var(--lucent-easing-default)",
2064
+ userSelect: "none",
2065
+ boxSizing: "border-box",
2066
+ ...s
2067
+ },
2068
+ onMouseEnter: (p) => {
2069
+ !o && !a && (p.currentTarget.style.background = "var(--lucent-bg-muted)");
2070
+ },
2071
+ onMouseLeave: (p) => {
2072
+ !o && !a && (p.currentTarget.style.background = "transparent");
2073
+ },
2074
+ children: [
2075
+ r != null && /* @__PURE__ */ n("span", { style: { display: "flex", flexShrink: 0, color: "inherit" }, children: r }),
2076
+ t
2077
+ ]
2078
+ }
2079
+ );
2080
+ }
2081
+ function Rt({
2030
2082
  label: t,
2031
2083
  htmlFor: e,
2032
2084
  required: a = !1,
2033
- helperText: o,
2034
- errorMessage: r,
2035
- children: s,
2036
- style: c
2085
+ helperText: r,
2086
+ errorMessage: o,
2087
+ children: i,
2088
+ style: l
2037
2089
  }) {
2038
- const l = r ?? o, u = r ? "danger" : "secondary";
2039
- return /* @__PURE__ */ g("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)", ...c }, children: [
2040
- t && /* @__PURE__ */ g("div", { style: { display: "flex", alignItems: "baseline", gap: "var(--lucent-space-1)" }, children: [
2041
- /* @__PURE__ */ n(z, { as: "label", size: "sm", weight: "medium", lineHeight: "tight", ...e !== void 0 && { htmlFor: e }, children: t }),
2042
- a && /* @__PURE__ */ n(z, { as: "span", size: "sm", color: "danger", lineHeight: "tight", "aria-hidden": "true", children: "*" })
2090
+ const s = o ?? r, d = o ? "danger" : "secondary";
2091
+ return /* @__PURE__ */ m("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)", ...l }, children: [
2092
+ t && /* @__PURE__ */ m("div", { style: { display: "flex", alignItems: "baseline", gap: "var(--lucent-space-1)" }, children: [
2093
+ /* @__PURE__ */ n(E, { as: "label", size: "sm", weight: "medium", lineHeight: "tight", ...e !== void 0 && { htmlFor: e }, children: t }),
2094
+ a && /* @__PURE__ */ n(E, { as: "span", size: "sm", color: "danger", lineHeight: "tight", "aria-hidden": "true", children: "*" })
2043
2095
  ] }),
2044
- s,
2045
- l && /* @__PURE__ */ n(z, { size: "xs", color: u, lineHeight: "tight", children: l })
2096
+ i,
2097
+ s && /* @__PURE__ */ n(E, { size: "xs", color: d, lineHeight: "tight", children: s })
2046
2098
  ] });
2047
2099
  }
2048
- const Et = {
2100
+ const Bt = {
2049
2101
  id: "form-field",
2050
2102
  name: "FormField",
2051
2103
  tier: "molecule",
@@ -2131,35 +2183,35 @@ const Et = {
2131
2183
  ariaAttributes: ["aria-required", "aria-describedby"],
2132
2184
  notes: 'Link the wrapped control to an error message using aria-describedby on the control and a matching id on the error element for full screen reader support. The required asterisk is aria-hidden; set aria-required="true" on the control itself.'
2133
2185
  }
2134
- }, Be = () => /* @__PURE__ */ g("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
2186
+ }, $e = () => /* @__PURE__ */ m("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
2135
2187
  /* @__PURE__ */ n("circle", { cx: "6.5", cy: "6.5", r: "4", stroke: "currentColor", strokeWidth: "1.5" }),
2136
2188
  /* @__PURE__ */ n("path", { d: "M9.5 9.5L13 13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
2137
- ] }), $e = () => /* @__PURE__ */ n("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ n("path", { d: "M3 3L11 11M11 3L3 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
2138
- function At({
2189
+ ] }), De = () => /* @__PURE__ */ n("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ n("path", { d: "M3 3L11 11M11 3L3 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
2190
+ function Nt({
2139
2191
  value: t,
2140
2192
  onChange: e,
2141
2193
  placeholder: a = "Search…",
2142
- results: o = [],
2143
- onResultSelect: r,
2144
- isLoading: s = !1,
2145
- disabled: c = !1,
2146
- id: l,
2147
- style: u
2194
+ results: r = [],
2195
+ onResultSelect: o,
2196
+ isLoading: i = !1,
2197
+ disabled: l = !1,
2198
+ id: s,
2199
+ style: d
2148
2200
  }) {
2149
- const [m, d] = C(!1), [h, p] = C(null), i = M(null), f = m && o.length > 0, v = () => {
2201
+ const [p, f] = z(!1), [h, c] = z(null), u = M(null), b = p && r.length > 0, g = () => {
2150
2202
  e("");
2151
- }, T = (S) => {
2152
- r == null || r(S), d(!1);
2153
- }, b = () => {
2154
- i.current = setTimeout(() => d(!1), 150);
2203
+ }, x = (y) => {
2204
+ o == null || o(y), f(!1);
2155
2205
  }, w = () => {
2156
- i.current && clearTimeout(i.current), d(!0);
2157
- }, k = s ? /* @__PURE__ */ n(fe, { size: "sm" }) : t ? /* @__PURE__ */ n(
2206
+ u.current = setTimeout(() => f(!1), 150);
2207
+ }, v = () => {
2208
+ u.current && clearTimeout(u.current), f(!0);
2209
+ }, k = i ? /* @__PURE__ */ n(me, { size: "sm" }) : t ? /* @__PURE__ */ n(
2158
2210
  "button",
2159
2211
  {
2160
2212
  type: "button",
2161
2213
  "aria-label": "Clear search",
2162
- onClick: v,
2214
+ onClick: g,
2163
2215
  style: {
2164
2216
  display: "flex",
2165
2217
  alignItems: "center",
@@ -2170,32 +2222,32 @@ function At({
2170
2222
  borderRadius: "var(--lucent-radius-sm)",
2171
2223
  color: "var(--lucent-text-secondary)"
2172
2224
  },
2173
- onMouseEnter: (S) => {
2174
- S.currentTarget.style.color = "var(--lucent-text-primary)";
2225
+ onMouseEnter: (y) => {
2226
+ y.currentTarget.style.color = "var(--lucent-text-primary)";
2175
2227
  },
2176
- onMouseLeave: (S) => {
2177
- S.currentTarget.style.color = "var(--lucent-text-secondary)";
2228
+ onMouseLeave: (y) => {
2229
+ y.currentTarget.style.color = "var(--lucent-text-secondary)";
2178
2230
  },
2179
- children: /* @__PURE__ */ n($e, {})
2231
+ children: /* @__PURE__ */ n(De, {})
2180
2232
  }
2181
2233
  ) : null;
2182
- return /* @__PURE__ */ g("div", { style: { position: "relative", ...u }, children: [
2234
+ return /* @__PURE__ */ m("div", { style: { position: "relative", ...d }, children: [
2183
2235
  /* @__PURE__ */ n(
2184
- V,
2236
+ O,
2185
2237
  {
2186
- id: l,
2238
+ id: s,
2187
2239
  type: "search",
2188
2240
  value: t,
2189
- onChange: (S) => e(S.target.value),
2241
+ onChange: (y) => e(y.target.value),
2190
2242
  placeholder: a,
2191
- disabled: c,
2192
- leftElement: /* @__PURE__ */ n(Be, {}),
2243
+ disabled: l,
2244
+ leftElement: /* @__PURE__ */ n($e, {}),
2193
2245
  rightElement: k ?? void 0,
2194
- onFocus: w,
2195
- onBlur: b
2246
+ onFocus: v,
2247
+ onBlur: w
2196
2248
  }
2197
2249
  ),
2198
- f && /* @__PURE__ */ n(
2250
+ b && /* @__PURE__ */ n(
2199
2251
  "div",
2200
2252
  {
2201
2253
  role: "listbox",
@@ -2211,29 +2263,29 @@ function At({
2211
2263
  boxShadow: "var(--lucent-shadow-md)",
2212
2264
  overflow: "hidden"
2213
2265
  },
2214
- children: o.map((S, q) => /* @__PURE__ */ n(
2266
+ children: r.map((y, I) => /* @__PURE__ */ n(
2215
2267
  "div",
2216
2268
  {
2217
2269
  role: "option",
2218
2270
  "aria-selected": !1,
2219
- onMouseDown: () => T(S),
2220
- onMouseEnter: () => p(q),
2221
- onMouseLeave: () => p(null),
2271
+ onMouseDown: () => x(y),
2272
+ onMouseEnter: () => c(I),
2273
+ onMouseLeave: () => c(null),
2222
2274
  style: {
2223
2275
  padding: "var(--lucent-space-2) var(--lucent-space-3)",
2224
2276
  cursor: "pointer",
2225
- background: h === q ? "var(--lucent-bg-subtle)" : "transparent",
2277
+ background: h === I ? "var(--lucent-bg-subtle)" : "transparent",
2226
2278
  transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)"
2227
2279
  },
2228
- children: /* @__PURE__ */ n(z, { as: "span", size: "md", children: S.label })
2280
+ children: /* @__PURE__ */ n(E, { as: "span", size: "md", children: y.label })
2229
2281
  },
2230
- S.id
2282
+ y.id
2231
2283
  ))
2232
2284
  }
2233
2285
  )
2234
2286
  ] });
2235
2287
  }
2236
- const Ft = {
2288
+ const $t = {
2237
2289
  id: "search-input",
2238
2290
  name: "SearchInput",
2239
2291
  tier: "molecule",
@@ -2329,33 +2381,33 @@ const [results, setResults] = useState([]);
2329
2381
  keyboardInteractions: ["Enter to select focused result", "Escape to close dropdown"],
2330
2382
  notes: 'The results list uses role="listbox" with role="option" items. For full keyboard navigation (arrow keys to move between results), wire up onKeyDown on the Input and manage an activeIndex state.'
2331
2383
  }
2332
- }, De = {
2384
+ }, Le = {
2333
2385
  none: "0",
2334
2386
  sm: "var(--lucent-space-3)",
2335
2387
  md: "var(--lucent-space-4)",
2336
2388
  lg: "var(--lucent-space-6)"
2337
- }, Le = {
2389
+ }, Ve = {
2338
2390
  none: "var(--lucent-shadow-none)",
2339
2391
  sm: "var(--lucent-shadow-sm)",
2340
2392
  md: "var(--lucent-shadow-md)",
2341
2393
  lg: "var(--lucent-shadow-lg)"
2342
- }, Ve = {
2394
+ }, We = {
2343
2395
  none: "var(--lucent-radius-none)",
2344
2396
  sm: "var(--lucent-radius-sm)",
2345
2397
  md: "var(--lucent-radius-md)",
2346
2398
  lg: "var(--lucent-radius-lg)"
2347
2399
  };
2348
- function Nt({
2400
+ function Dt({
2349
2401
  header: t,
2350
2402
  footer: e,
2351
2403
  children: a,
2352
- padding: o = "md",
2353
- shadow: r = "sm",
2354
- radius: s = "md",
2355
- style: c
2404
+ padding: r = "md",
2405
+ shadow: o = "sm",
2406
+ radius: i = "md",
2407
+ style: l
2356
2408
  }) {
2357
- const l = De[o], u = Ve[s];
2358
- return /* @__PURE__ */ g(
2409
+ const s = Le[r], d = We[i];
2410
+ return /* @__PURE__ */ m(
2359
2411
  "div",
2360
2412
  {
2361
2413
  style: {
@@ -2363,29 +2415,29 @@ function Nt({
2363
2415
  flexDirection: "column",
2364
2416
  background: "var(--lucent-surface-default)",
2365
2417
  border: "1px solid var(--lucent-border-default)",
2366
- borderRadius: u,
2367
- boxShadow: Le[r],
2418
+ borderRadius: d,
2419
+ boxShadow: Ve[o],
2368
2420
  overflow: "hidden",
2369
2421
  boxSizing: "border-box",
2370
- ...c
2422
+ ...l
2371
2423
  },
2372
2424
  children: [
2373
2425
  t != null && /* @__PURE__ */ n(
2374
2426
  "div",
2375
2427
  {
2376
2428
  style: {
2377
- padding: l,
2429
+ padding: s,
2378
2430
  borderBottom: "1px solid var(--lucent-border-default)"
2379
2431
  },
2380
2432
  children: t
2381
2433
  }
2382
2434
  ),
2383
- /* @__PURE__ */ n("div", { style: { padding: l, flex: 1 }, children: a }),
2435
+ /* @__PURE__ */ n("div", { style: { padding: s, flex: 1 }, children: a }),
2384
2436
  e != null && /* @__PURE__ */ n(
2385
2437
  "div",
2386
2438
  {
2387
2439
  style: {
2388
- padding: l,
2440
+ padding: s,
2389
2441
  borderTop: "1px solid var(--lucent-border-default)"
2390
2442
  },
2391
2443
  children: e
@@ -2395,7 +2447,7 @@ function Nt({
2395
2447
  }
2396
2448
  );
2397
2449
  }
2398
- const Rt = {
2450
+ const Lt = {
2399
2451
  id: "card",
2400
2452
  name: "Card",
2401
2453
  tier: "molecule",
@@ -2480,39 +2532,39 @@ const Rt = {
2480
2532
  accessibility: {
2481
2533
  notes: "Card has no implicit ARIA role. If the card represents a landmark, wrap it in a <section> or <article> and provide an aria-label. For interactive cards (clickable), make the wrapper a <button> or <a> and ensure focus styles are visible."
2482
2534
  }
2483
- }, We = {
2535
+ }, Pe = {
2484
2536
  info: { bg: "var(--lucent-info-subtle)", border: "var(--lucent-info-default)", iconColor: "var(--lucent-info-text)", textColor: "info" },
2485
2537
  success: { bg: "var(--lucent-success-subtle)", border: "var(--lucent-success-default)", iconColor: "var(--lucent-success-text)", textColor: "success" },
2486
2538
  warning: { bg: "var(--lucent-warning-subtle)", border: "var(--lucent-warning-default)", iconColor: "var(--lucent-warning-text)", textColor: "warning" },
2487
2539
  danger: { bg: "var(--lucent-danger-subtle)", border: "var(--lucent-danger-default)", iconColor: "var(--lucent-danger-text)", textColor: "danger" }
2488
- }, Pe = () => /* @__PURE__ */ g("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
2540
+ }, Oe = () => /* @__PURE__ */ m("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
2489
2541
  /* @__PURE__ */ n("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
2490
2542
  /* @__PURE__ */ n("path", { d: "M8 5.5V8.5M8 10.5V11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
2491
- ] }), Oe = () => /* @__PURE__ */ g("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
2543
+ ] }), He = () => /* @__PURE__ */ m("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
2492
2544
  /* @__PURE__ */ n("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
2493
2545
  /* @__PURE__ */ n("path", { d: "M5 8L7 10L11 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
2494
- ] }), He = () => /* @__PURE__ */ g("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
2546
+ ] }), Ge = () => /* @__PURE__ */ m("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
2495
2547
  /* @__PURE__ */ n("path", { d: "M8 2L14.5 13H1.5L8 2Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
2496
2548
  /* @__PURE__ */ n("path", { d: "M8 6V9M8 11V11.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
2497
- ] }), Ge = () => /* @__PURE__ */ g("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
2549
+ ] }), je = () => /* @__PURE__ */ m("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
2498
2550
  /* @__PURE__ */ n("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
2499
2551
  /* @__PURE__ */ n("path", { d: "M5.5 5.5L10.5 10.5M10.5 5.5L5.5 10.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
2500
2552
  ] }), Ue = {
2501
- info: /* @__PURE__ */ n(Pe, {}),
2502
- success: /* @__PURE__ */ n(Oe, {}),
2503
- warning: /* @__PURE__ */ n(He, {}),
2504
- danger: /* @__PURE__ */ n(Ge, {})
2505
- }, je = () => /* @__PURE__ */ n("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ n("path", { d: "M3 3L11 11M11 3L3 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
2506
- function Bt({
2553
+ info: /* @__PURE__ */ n(Oe, {}),
2554
+ success: /* @__PURE__ */ n(He, {}),
2555
+ warning: /* @__PURE__ */ n(Ge, {}),
2556
+ danger: /* @__PURE__ */ n(je, {})
2557
+ }, _e = () => /* @__PURE__ */ n("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ n("path", { d: "M3 3L11 11M11 3L3 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
2558
+ function Vt({
2507
2559
  variant: t = "info",
2508
2560
  title: e,
2509
2561
  children: a,
2510
- onDismiss: o,
2511
- icon: r,
2512
- style: s
2562
+ onDismiss: r,
2563
+ icon: o,
2564
+ style: i
2513
2565
  }) {
2514
- const c = We[t], l = r ?? Ue[t];
2515
- return /* @__PURE__ */ g(
2566
+ const l = Pe[t], s = o ?? Ue[t];
2567
+ return /* @__PURE__ */ m(
2516
2568
  "div",
2517
2569
  {
2518
2570
  role: "alert",
@@ -2521,11 +2573,11 @@ function Bt({
2521
2573
  alignItems: "flex-start",
2522
2574
  gap: "var(--lucent-space-3)",
2523
2575
  padding: "var(--lucent-space-3) var(--lucent-space-4)",
2524
- background: c.bg,
2525
- border: `1px solid ${c.border}`,
2576
+ background: l.bg,
2577
+ border: `1px solid ${l.border}`,
2526
2578
  borderRadius: "var(--lucent-radius-md)",
2527
2579
  boxSizing: "border-box",
2528
- ...s
2580
+ ...i
2529
2581
  },
2530
2582
  children: [
2531
2583
  /* @__PURE__ */ n(
@@ -2533,24 +2585,24 @@ function Bt({
2533
2585
  {
2534
2586
  style: {
2535
2587
  flexShrink: 0,
2536
- color: c.iconColor,
2588
+ color: l.iconColor,
2537
2589
  display: "flex",
2538
2590
  alignItems: "center",
2539
2591
  paddingTop: 2
2540
2592
  },
2541
- children: l
2593
+ children: s
2542
2594
  }
2543
2595
  ),
2544
- /* @__PURE__ */ g("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)" }, children: [
2545
- e && /* @__PURE__ */ n(z, { as: "span", size: "sm", weight: "semibold", color: c.textColor, lineHeight: "tight", children: e }),
2546
- a && /* @__PURE__ */ n(z, { as: "span", size: "sm", color: c.textColor, lineHeight: "base", children: a })
2596
+ /* @__PURE__ */ m("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)" }, children: [
2597
+ e && /* @__PURE__ */ n(E, { as: "span", size: "sm", weight: "semibold", color: l.textColor, lineHeight: "tight", children: e }),
2598
+ a && /* @__PURE__ */ n(E, { as: "span", size: "sm", color: l.textColor, lineHeight: "base", children: a })
2547
2599
  ] }),
2548
- o && /* @__PURE__ */ n(
2600
+ r && /* @__PURE__ */ n(
2549
2601
  "button",
2550
2602
  {
2551
2603
  type: "button",
2552
2604
  "aria-label": "Dismiss",
2553
- onClick: o,
2605
+ onClick: r,
2554
2606
  style: {
2555
2607
  flexShrink: 0,
2556
2608
  display: "flex",
@@ -2560,23 +2612,23 @@ function Bt({
2560
2612
  cursor: "pointer",
2561
2613
  padding: 2,
2562
2614
  borderRadius: "var(--lucent-radius-sm)",
2563
- color: c.iconColor,
2615
+ color: l.iconColor,
2564
2616
  opacity: 0.7
2565
2617
  },
2566
- onMouseEnter: (u) => {
2567
- u.currentTarget.style.opacity = "1";
2618
+ onMouseEnter: (d) => {
2619
+ d.currentTarget.style.opacity = "1";
2568
2620
  },
2569
- onMouseLeave: (u) => {
2570
- u.currentTarget.style.opacity = "0.7";
2621
+ onMouseLeave: (d) => {
2622
+ d.currentTarget.style.opacity = "0.7";
2571
2623
  },
2572
- children: /* @__PURE__ */ n(je, {})
2624
+ children: /* @__PURE__ */ n(_e, {})
2573
2625
  }
2574
2626
  )
2575
2627
  ]
2576
2628
  }
2577
2629
  );
2578
2630
  }
2579
- const $t = {
2631
+ const Wt = {
2580
2632
  id: "alert",
2581
2633
  name: "Alert",
2582
2634
  tier: "molecule",
@@ -2651,14 +2703,14 @@ const $t = {
2651
2703
  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.'
2652
2704
  }
2653
2705
  };
2654
- function Dt({
2706
+ function Pt({
2655
2707
  illustration: t,
2656
2708
  title: e,
2657
2709
  description: a,
2658
- action: o,
2659
- style: r
2710
+ action: r,
2711
+ style: o
2660
2712
  }) {
2661
- return /* @__PURE__ */ g(
2713
+ return /* @__PURE__ */ m(
2662
2714
  "div",
2663
2715
  {
2664
2716
  style: {
@@ -2668,7 +2720,7 @@ function Dt({
2668
2720
  gap: "var(--lucent-space-4)",
2669
2721
  padding: "var(--lucent-space-8)",
2670
2722
  textAlign: "center",
2671
- ...r
2723
+ ...o
2672
2724
  },
2673
2725
  children: [
2674
2726
  t != null && /* @__PURE__ */ n(
@@ -2685,16 +2737,16 @@ function Dt({
2685
2737
  children: t
2686
2738
  }
2687
2739
  ),
2688
- /* @__PURE__ */ g("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)" }, children: [
2689
- /* @__PURE__ */ n(z, { as: "h3", size: "lg", weight: "semibold", align: "center", lineHeight: "tight", children: e }),
2690
- a && /* @__PURE__ */ n(z, { size: "sm", color: "secondary", align: "center", lineHeight: "relaxed", children: a })
2740
+ /* @__PURE__ */ m("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)" }, children: [
2741
+ /* @__PURE__ */ n(E, { as: "h3", size: "lg", weight: "semibold", align: "center", lineHeight: "tight", children: e }),
2742
+ a && /* @__PURE__ */ n(E, { size: "sm", color: "secondary", align: "center", lineHeight: "relaxed", children: a })
2691
2743
  ] }),
2692
- o != null && /* @__PURE__ */ n("div", { children: o })
2744
+ r != null && /* @__PURE__ */ n("div", { children: r })
2693
2745
  ]
2694
2746
  }
2695
2747
  );
2696
2748
  }
2697
- const Lt = {
2749
+ const Ot = {
2698
2750
  id: "empty-state",
2699
2751
  name: "EmptyState",
2700
2752
  tier: "molecule",
@@ -2765,21 +2817,21 @@ const Lt = {
2765
2817
  accessibility: {
2766
2818
  notes: "The title renders as an h3 by default. If EmptyState appears inside a section with its own heading hierarchy, override by passing a Text component as part of a custom layout. Ensure the action element has a descriptive label for screen readers."
2767
2819
  }
2768
- }, _e = {
2820
+ }, Ke = {
2769
2821
  text: "1em",
2770
2822
  circle: 40,
2771
2823
  rectangle: 40
2772
- }, Ke = {
2824
+ }, Ye = {
2773
2825
  text: "var(--lucent-radius-sm)",
2774
2826
  circle: "var(--lucent-radius-full)",
2775
2827
  rectangle: "var(--lucent-radius-md)"
2776
2828
  };
2777
- function $({
2829
+ function D({
2778
2830
  width: t,
2779
2831
  height: e,
2780
2832
  radius: a,
2781
- animate: o,
2782
- style: r
2833
+ animate: r,
2834
+ style: o
2783
2835
  }) {
2784
2836
  return /* @__PURE__ */ n(
2785
2837
  "span",
@@ -2789,57 +2841,57 @@ function $({
2789
2841
  width: typeof t == "number" ? `${t}px` : t,
2790
2842
  height: typeof e == "number" ? `${e}px` : e,
2791
2843
  borderRadius: a,
2792
- background: o ? "linear-gradient(90deg, var(--lucent-bg-muted) 25%, var(--lucent-bg-subtle) 50%, var(--lucent-bg-muted) 75%)" : "var(--lucent-bg-muted)",
2793
- backgroundSize: o ? "200% 100%" : void 0,
2794
- animation: o ? "lucent-skeleton-shimmer 1.6s ease-in-out infinite" : void 0,
2844
+ background: r ? "linear-gradient(90deg, var(--lucent-bg-muted) 25%, var(--lucent-bg-subtle) 50%, var(--lucent-bg-muted) 75%)" : "var(--lucent-bg-muted)",
2845
+ backgroundSize: r ? "200% 100%" : void 0,
2846
+ animation: r ? "lucent-skeleton-shimmer 1.6s ease-in-out infinite" : void 0,
2795
2847
  flexShrink: 0,
2796
- ...r
2848
+ ...o
2797
2849
  }
2798
2850
  }
2799
2851
  );
2800
2852
  }
2801
- function Vt({
2853
+ function Ht({
2802
2854
  variant: t = "rectangle",
2803
2855
  width: e = "100%",
2804
2856
  height: a,
2805
- lines: o = 1,
2806
- animate: r = !0,
2807
- radius: s,
2808
- style: c
2857
+ lines: r = 1,
2858
+ animate: o = !0,
2859
+ radius: i,
2860
+ style: l
2809
2861
  }) {
2810
- const l = a ?? _e[t], u = s ?? Ke[t], m = r ? /* @__PURE__ */ n("style", { children: `
2862
+ const s = a ?? Ke[t], d = i ?? Ye[t], p = o ? /* @__PURE__ */ n("style", { children: `
2811
2863
  @keyframes lucent-skeleton-shimmer {
2812
2864
  0% { background-position: 200% 0; }
2813
2865
  100% { background-position: -200% 0; }
2814
2866
  }
2815
2867
  ` }) : null;
2816
- return t === "text" && o > 1 ? /* @__PURE__ */ g(A, { children: [
2817
- m,
2818
- /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)", ...c }, children: Array.from({ length: o }).map((d, h) => /* @__PURE__ */ n(
2819
- $,
2868
+ return t === "text" && r > 1 ? /* @__PURE__ */ m(A, { children: [
2869
+ p,
2870
+ /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)", ...l }, children: Array.from({ length: r }).map((f, h) => /* @__PURE__ */ n(
2871
+ D,
2820
2872
  {
2821
- width: h === o - 1 ? "70%" : e,
2822
- height: l,
2823
- radius: u,
2824
- animate: r
2873
+ width: h === r - 1 ? "70%" : e,
2874
+ height: s,
2875
+ radius: d,
2876
+ animate: o
2825
2877
  },
2826
2878
  h
2827
2879
  )) })
2828
- ] }) : /* @__PURE__ */ g(A, { children: [
2829
- m,
2880
+ ] }) : /* @__PURE__ */ m(A, { children: [
2881
+ p,
2830
2882
  /* @__PURE__ */ n(
2831
- $,
2883
+ D,
2832
2884
  {
2833
2885
  width: t === "circle" ? a ?? 40 : e,
2834
- height: l,
2835
- radius: u,
2836
- animate: r,
2837
- ...c !== void 0 && { style: c }
2886
+ height: s,
2887
+ radius: d,
2888
+ animate: o,
2889
+ ...l !== void 0 && { style: l }
2838
2890
  }
2839
2891
  )
2840
2892
  ] });
2841
2893
  }
2842
- const Wt = {
2894
+ const Gt = {
2843
2895
  id: "skeleton",
2844
2896
  name: "Skeleton",
2845
2897
  tier: "molecule",
@@ -2925,7 +2977,356 @@ const Wt = {
2925
2977
  ariaAttributes: ["aria-busy", "aria-label"],
2926
2978
  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.'
2927
2979
  }
2928
- }, P = {
2980
+ };
2981
+ function jt({ items: t, separator: e = "/", style: a }) {
2982
+ return /* @__PURE__ */ n("nav", { "aria-label": "Breadcrumb", style: a, children: /* @__PURE__ */ n(
2983
+ "ol",
2984
+ {
2985
+ style: {
2986
+ display: "flex",
2987
+ alignItems: "center",
2988
+ flexWrap: "wrap",
2989
+ gap: "var(--lucent-space-1)",
2990
+ listStyle: "none",
2991
+ margin: 0,
2992
+ padding: 0,
2993
+ fontFamily: "var(--lucent-font-family-base)"
2994
+ },
2995
+ children: t.map((r, o) => {
2996
+ const i = o === t.length - 1;
2997
+ return /* @__PURE__ */ m("li", { style: { display: "flex", alignItems: "center", gap: "var(--lucent-space-1)" }, children: [
2998
+ i ? /* @__PURE__ */ n(E, { size: "sm", color: "primary", as: "span", "aria-current": "page", children: r.label }) : r.href != null ? /* @__PURE__ */ n(
2999
+ "a",
3000
+ {
3001
+ href: r.href,
3002
+ onClick: r.onClick,
3003
+ style: {
3004
+ fontSize: "var(--lucent-font-size-sm)",
3005
+ color: "var(--lucent-text-secondary)",
3006
+ textDecoration: "none",
3007
+ fontFamily: "var(--lucent-font-family-base)",
3008
+ transition: "color var(--lucent-duration-fast) var(--lucent-easing-default)"
3009
+ },
3010
+ onMouseEnter: (l) => {
3011
+ l.currentTarget.style.color = "var(--lucent-text-primary)";
3012
+ },
3013
+ onMouseLeave: (l) => {
3014
+ l.currentTarget.style.color = "var(--lucent-text-secondary)";
3015
+ },
3016
+ children: r.label
3017
+ }
3018
+ ) : /* @__PURE__ */ n(
3019
+ "button",
3020
+ {
3021
+ onClick: r.onClick,
3022
+ style: {
3023
+ fontSize: "var(--lucent-font-size-sm)",
3024
+ color: "var(--lucent-text-secondary)",
3025
+ fontFamily: "var(--lucent-font-family-base)",
3026
+ background: "none",
3027
+ border: "none",
3028
+ padding: 0,
3029
+ cursor: "pointer",
3030
+ transition: "color var(--lucent-duration-fast) var(--lucent-easing-default)"
3031
+ },
3032
+ onMouseEnter: (l) => {
3033
+ l.currentTarget.style.color = "var(--lucent-text-primary)";
3034
+ },
3035
+ onMouseLeave: (l) => {
3036
+ l.currentTarget.style.color = "var(--lucent-text-secondary)";
3037
+ },
3038
+ children: r.label
3039
+ }
3040
+ ),
3041
+ !i && /* @__PURE__ */ n("span", { "aria-hidden": !0, style: { color: "var(--lucent-text-disabled)", fontSize: "var(--lucent-font-size-sm)", userSelect: "none" }, children: e })
3042
+ ] }, o);
3043
+ })
3044
+ }
3045
+ ) });
3046
+ }
3047
+ function Ut({ tabs: t, defaultValue: e, value: a, onChange: r, style: o }) {
3048
+ var w;
3049
+ const i = a !== void 0, [l, s] = z(e ?? ((w = t[0]) == null ? void 0 : w.value) ?? ""), d = i ? a : l, [p, f] = z(null), h = M([]), [c, u] = z(null), b = M(!1);
3050
+ P(() => {
3051
+ const v = t.findIndex((y) => y.value === d), k = h.current[v];
3052
+ k && (u({ left: k.offsetLeft, width: k.offsetWidth, animate: b.current }), b.current = !0);
3053
+ }, [d, t]);
3054
+ const g = (v) => {
3055
+ i || s(v), r == null || r(v);
3056
+ }, x = (v, k) => {
3057
+ var R;
3058
+ const y = t.map((B, q) => B.disabled ? -1 : q).filter((B) => B !== -1), I = y.indexOf(k);
3059
+ let T = -1;
3060
+ v.key === "ArrowRight" && (T = y[(I + 1) % y.length] ?? -1), v.key === "ArrowLeft" && (T = y[(I - 1 + y.length) % y.length] ?? -1), v.key === "Home" && (T = y[0] ?? -1), v.key === "End" && (T = y[y.length - 1] ?? -1), T !== -1 && (v.preventDefault(), (R = h.current[T]) == null || R.focus(), g(t[T].value));
3061
+ };
3062
+ return /* @__PURE__ */ m("div", { style: { display: "flex", flexDirection: "column", ...o }, children: [
3063
+ /* @__PURE__ */ m(
3064
+ "div",
3065
+ {
3066
+ role: "tablist",
3067
+ style: {
3068
+ position: "relative",
3069
+ display: "flex",
3070
+ borderBottom: "1px solid var(--lucent-border-default)"
3071
+ },
3072
+ children: [
3073
+ t.map((v, k) => {
3074
+ const y = v.value === d, I = v.disabled ?? !1;
3075
+ return /* @__PURE__ */ n(
3076
+ "button",
3077
+ {
3078
+ ref: (T) => {
3079
+ h.current[k] = T;
3080
+ },
3081
+ role: "tab",
3082
+ "aria-selected": y,
3083
+ "aria-controls": `lucent-tabpanel-${v.value}`,
3084
+ id: `lucent-tab-${v.value}`,
3085
+ disabled: I,
3086
+ tabIndex: y ? 0 : -1,
3087
+ onClick: () => {
3088
+ I || g(v.value);
3089
+ },
3090
+ onKeyDown: (T) => x(T, k),
3091
+ onMouseEnter: () => {
3092
+ I || f(k);
3093
+ },
3094
+ onMouseLeave: () => f(null),
3095
+ style: {
3096
+ padding: "var(--lucent-space-1) var(--lucent-space-2) var(--lucent-space-3)",
3097
+ background: "none",
3098
+ border: "none",
3099
+ cursor: I ? "not-allowed" : "pointer",
3100
+ fontFamily: "var(--lucent-font-family-base)",
3101
+ fontSize: "var(--lucent-font-size-md)",
3102
+ fontWeight: y ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
3103
+ color: I ? "var(--lucent-text-disabled)" : y ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
3104
+ transition: "color var(--lucent-duration-fast) var(--lucent-easing-default)",
3105
+ whiteSpace: "nowrap",
3106
+ outline: "none"
3107
+ },
3108
+ children: /* @__PURE__ */ n("span", { style: {
3109
+ display: "block",
3110
+ padding: "var(--lucent-space-1) var(--lucent-space-3)",
3111
+ borderRadius: "var(--lucent-radius-md)",
3112
+ background: p === k && !y ? "var(--lucent-bg-subtle)" : "transparent",
3113
+ transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)"
3114
+ }, children: v.label })
3115
+ },
3116
+ v.value
3117
+ );
3118
+ }),
3119
+ c != null && /* @__PURE__ */ n(
3120
+ "span",
3121
+ {
3122
+ "aria-hidden": !0,
3123
+ style: {
3124
+ position: "absolute",
3125
+ bottom: 0,
3126
+ left: c.left,
3127
+ width: c.width,
3128
+ height: 2,
3129
+ background: "var(--lucent-accent-default)",
3130
+ borderRadius: "var(--lucent-radius-sm)",
3131
+ transition: c.animate ? "left 220ms var(--lucent-easing-default), width 220ms var(--lucent-easing-default)" : "none"
3132
+ }
3133
+ }
3134
+ )
3135
+ ]
3136
+ }
3137
+ ),
3138
+ t.map((v) => /* @__PURE__ */ n(
3139
+ "div",
3140
+ {
3141
+ role: "tabpanel",
3142
+ id: `lucent-tabpanel-${v.value}`,
3143
+ "aria-labelledby": `lucent-tab-${v.value}`,
3144
+ hidden: v.value !== d,
3145
+ style: { padding: "var(--lucent-space-4) 0", outline: "none" },
3146
+ tabIndex: 0,
3147
+ children: v.content
3148
+ },
3149
+ v.value
3150
+ ))
3151
+ ] });
3152
+ }
3153
+ const Xe = `
3154
+ @keyframes lucent-collapsible-open {
3155
+ from { opacity: 0; transform: translateY(-4px); }
3156
+ to { opacity: 1; transform: translateY(0); }
3157
+ }
3158
+ `;
3159
+ function _t({ trigger: t, children: e, defaultOpen: a = !1, open: r, onOpenChange: o, style: i }) {
3160
+ const l = r !== void 0, [s, d] = z(a), p = l ? r : s, f = M(null), [h, c] = z(p ? void 0 : 0), u = M(!1);
3161
+ F(() => {
3162
+ const g = f.current;
3163
+ if (g)
3164
+ if (p) {
3165
+ const x = g.scrollHeight;
3166
+ c(x), u.current = !0;
3167
+ const w = setTimeout(() => {
3168
+ c(void 0), u.current = !1;
3169
+ }, 220);
3170
+ return () => clearTimeout(w);
3171
+ } else
3172
+ c(g.scrollHeight), g.getBoundingClientRect(), c(0);
3173
+ }, [p]);
3174
+ const b = () => {
3175
+ const g = !p;
3176
+ l || d(g), o == null || o(g);
3177
+ };
3178
+ return /* @__PURE__ */ m(A, { children: [
3179
+ /* @__PURE__ */ n("style", { children: Xe }),
3180
+ /* @__PURE__ */ m("div", { style: { display: "flex", flexDirection: "column", fontFamily: "var(--lucent-font-family-base)", fontSize: "var(--lucent-font-size-md)", ...i }, children: [
3181
+ /* @__PURE__ */ m(
3182
+ "button",
3183
+ {
3184
+ onClick: b,
3185
+ "aria-expanded": p,
3186
+ style: {
3187
+ display: "flex",
3188
+ alignItems: "center",
3189
+ justifyContent: "space-between",
3190
+ width: "100%",
3191
+ background: "none",
3192
+ border: "none",
3193
+ padding: "var(--lucent-space-3) var(--lucent-space-4)",
3194
+ cursor: "pointer",
3195
+ textAlign: "left",
3196
+ outline: "none",
3197
+ fontFamily: "inherit",
3198
+ fontSize: "inherit"
3199
+ },
3200
+ children: [
3201
+ /* @__PURE__ */ n("span", { style: { flex: 1 }, children: t }),
3202
+ /* @__PURE__ */ n(Je, { open: p })
3203
+ ]
3204
+ }
3205
+ ),
3206
+ /* @__PURE__ */ n(
3207
+ "div",
3208
+ {
3209
+ ref: f,
3210
+ "aria-hidden": !p,
3211
+ style: {
3212
+ overflow: "hidden",
3213
+ height: h !== void 0 ? h : "auto",
3214
+ transition: "height 200ms var(--lucent-easing-default)"
3215
+ },
3216
+ children: /* @__PURE__ */ n(
3217
+ "div",
3218
+ {
3219
+ style: {
3220
+ padding: "var(--lucent-space-2) var(--lucent-space-4) var(--lucent-space-3)",
3221
+ animation: p ? "lucent-collapsible-open 200ms var(--lucent-easing-default) forwards" : void 0
3222
+ },
3223
+ children: e
3224
+ }
3225
+ )
3226
+ }
3227
+ )
3228
+ ] })
3229
+ ] });
3230
+ }
3231
+ function Je({ open: t }) {
3232
+ return /* @__PURE__ */ n(
3233
+ "svg",
3234
+ {
3235
+ width: 16,
3236
+ height: 16,
3237
+ viewBox: "0 0 24 24",
3238
+ fill: "none",
3239
+ stroke: "currentColor",
3240
+ strokeWidth: 2,
3241
+ strokeLinecap: "round",
3242
+ strokeLinejoin: "round",
3243
+ "aria-hidden": !0,
3244
+ style: {
3245
+ flexShrink: 0,
3246
+ color: "var(--lucent-text-secondary)",
3247
+ transform: t ? "rotate(180deg)" : "rotate(0deg)",
3248
+ transition: "transform 200ms var(--lucent-easing-default)"
3249
+ },
3250
+ children: /* @__PURE__ */ n("polyline", { points: "6 9 12 15 18 9" })
3251
+ }
3252
+ );
3253
+ }
3254
+ function L(t) {
3255
+ return typeof t == "number" ? `${t}px` : t;
3256
+ }
3257
+ function Kt({
3258
+ children: t,
3259
+ header: e,
3260
+ sidebar: a,
3261
+ sidebarWidth: r = 240,
3262
+ headerHeight: o = 48,
3263
+ sidebarCollapsed: i = !1,
3264
+ mainStyle: l,
3265
+ style: s
3266
+ }) {
3267
+ const d = L(o), p = L(r);
3268
+ return /* @__PURE__ */ m(
3269
+ "div",
3270
+ {
3271
+ style: {
3272
+ display: "flex",
3273
+ flexDirection: "column",
3274
+ height: "100vh",
3275
+ overflow: "hidden",
3276
+ fontFamily: "var(--lucent-font-family-base)",
3277
+ ...s
3278
+ },
3279
+ children: [
3280
+ e != null && /* @__PURE__ */ n(
3281
+ "div",
3282
+ {
3283
+ style: {
3284
+ flexShrink: 0,
3285
+ height: d,
3286
+ zIndex: 10,
3287
+ background: "var(--lucent-surface-default)"
3288
+ },
3289
+ children: e
3290
+ }
3291
+ ),
3292
+ /* @__PURE__ */ m("div", { style: { display: "flex", flex: 1, overflow: "hidden" }, children: [
3293
+ a != null && /* @__PURE__ */ n(
3294
+ "div",
3295
+ {
3296
+ style: {
3297
+ width: i ? 0 : p,
3298
+ flexShrink: 0,
3299
+ overflow: "hidden",
3300
+ overflowY: i ? "hidden" : "auto",
3301
+ background: "var(--lucent-surface-default)",
3302
+ transition: "width 200ms var(--lucent-easing-default)"
3303
+ },
3304
+ children: a
3305
+ }
3306
+ ),
3307
+ /* @__PURE__ */ n(
3308
+ "main",
3309
+ {
3310
+ style: {
3311
+ flex: 1,
3312
+ overflowY: "auto",
3313
+ minWidth: 0,
3314
+ margin: "0 var(--lucent-space-3) var(--lucent-space-3) 0",
3315
+ border: "1px solid var(--lucent-border-default)",
3316
+ borderRadius: "var(--lucent-radius-lg)",
3317
+ boxShadow: "var(--lucent-shadow-sm)",
3318
+ background: "var(--lucent-surface-default)",
3319
+ ...l
3320
+ },
3321
+ children: t
3322
+ }
3323
+ )
3324
+ ] })
3325
+ ]
3326
+ }
3327
+ );
3328
+ }
3329
+ const G = {
2929
3330
  fontFamilyBase: '"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
2930
3331
  fontFamilyMono: '"DM Mono", "Fira Code", "Cascadia Code", monospace',
2931
3332
  fontFamilyDisplay: '"Georama", "DM Sans", sans-serif',
@@ -2946,7 +3347,7 @@ const Wt = {
2946
3347
  letterSpacingTight: "-0.02em",
2947
3348
  letterSpacingBase: "0em",
2948
3349
  letterSpacingWide: "0.04em"
2949
- }, O = {
3350
+ }, j = {
2950
3351
  space0: "0px",
2951
3352
  space1: "0.25rem",
2952
3353
  space2: "0.5rem",
@@ -2960,38 +3361,38 @@ const Wt = {
2960
3361
  space16: "4rem",
2961
3362
  space20: "5rem",
2962
3363
  space24: "6rem"
2963
- }, H = {
3364
+ }, U = {
2964
3365
  radiusNone: "0px",
2965
3366
  radiusSm: "0.25rem",
2966
3367
  radiusMd: "0.375rem",
2967
3368
  radiusLg: "0.5rem",
2968
3369
  radiusXl: "0.75rem",
2969
3370
  radiusFull: "9999px"
2970
- }, G = {
3371
+ }, _ = {
2971
3372
  durationFast: "100ms",
2972
3373
  durationBase: "200ms",
2973
3374
  durationSlow: "350ms",
2974
3375
  easingDefault: "cubic-bezier(0.4, 0, 0.2, 1)",
2975
3376
  easingEmphasized: "cubic-bezier(0.2, 0, 0, 1)",
2976
3377
  easingDecelerate: "cubic-bezier(0, 0, 0.2, 1)"
2977
- }, Xe = {
3378
+ }, Qe = {
2978
3379
  shadowNone: "none",
2979
3380
  shadowSm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
2980
3381
  shadowMd: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
2981
3382
  shadowLg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
2982
3383
  shadowXl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
2983
- }, Ye = {
3384
+ }, Ze = {
2984
3385
  shadowNone: "none",
2985
3386
  shadowSm: "0 1px 2px 0 rgb(0 0 0 / 0.3)",
2986
3387
  shadowMd: "0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4)",
2987
3388
  shadowLg: "0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4)",
2988
3389
  shadowXl: "0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5)"
2989
- }, U = {
2990
- ...P,
2991
- ...O,
2992
- ...H,
3390
+ }, K = {
2993
3391
  ...G,
2994
- ...Xe,
3392
+ ...j,
3393
+ ...U,
3394
+ ..._,
3395
+ ...Qe,
2995
3396
  // Backgrounds
2996
3397
  bgBase: "#ffffff",
2997
3398
  bgSubtle: "#f9fafb",
@@ -3034,12 +3435,12 @@ const Wt = {
3034
3435
  infoText: "#1d4ed8",
3035
3436
  // Focus
3036
3437
  focusRing: "#111827"
3037
- }, Je = {
3038
- ...P,
3039
- ...O,
3040
- ...H,
3438
+ }, et = {
3041
3439
  ...G,
3042
- ...Ye,
3440
+ ...j,
3441
+ ...U,
3442
+ ..._,
3443
+ ...Ze,
3043
3444
  // Backgrounds
3044
3445
  bgBase: "#0b0d12",
3045
3446
  bgSubtle: "#111318",
@@ -3083,145 +3484,150 @@ const Wt = {
3083
3484
  // Focus
3084
3485
  focusRing: "#f9fafb"
3085
3486
  };
3086
- function Qe(t) {
3087
- return "--lucent-" + t.replace(/([A-Z])/g, (e) => `-${e.toLowerCase()}`).replace(/([a-z])(\d)/g, (e, a, o) => `${a}-${o}`);
3487
+ function tt(t) {
3488
+ return "--lucent-" + t.replace(/([A-Z])/g, (e) => `-${e.toLowerCase()}`).replace(/([a-z])(\d)/g, (e, a, r) => `${a}-${r}`);
3088
3489
  }
3089
- function Ze(t, e = ":root") {
3090
- const a = Object.entries(t).map(([o, r]) => ` ${Qe(o)}: ${r};`).join(`
3490
+ function nt(t, e = ":root") {
3491
+ const a = Object.entries(t).map(([r, o]) => ` ${tt(r)}: ${o};`).join(`
3091
3492
  `);
3092
3493
  return `${e} {
3093
3494
  ${a}
3094
3495
  }`;
3095
3496
  }
3096
- function et(t) {
3097
- const e = parseInt(t.slice(1, 3), 16) / 255, a = parseInt(t.slice(3, 5), 16) / 255, o = parseInt(t.slice(5, 7), 16) / 255, r = (s) => s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
3098
- return 0.2126 * r(e) + 0.7152 * r(a) + 0.0722 * r(o);
3497
+ function at(t) {
3498
+ const e = parseInt(t.slice(1, 3), 16) / 255, a = parseInt(t.slice(3, 5), 16) / 255, r = parseInt(t.slice(5, 7), 16) / 255, o = (i) => i <= 0.03928 ? i / 12.92 : Math.pow((i + 0.055) / 1.055, 2.4);
3499
+ return 0.2126 * o(e) + 0.7152 * o(a) + 0.0722 * o(r);
3099
3500
  }
3100
- function tt(t) {
3101
- return et(t) < 0.179 ? "#ffffff" : "#000000";
3501
+ function rt(t) {
3502
+ return at(t) < 0.179 ? "#ffffff" : "#000000";
3102
3503
  }
3103
- const j = L({
3504
+ const Y = W({
3104
3505
  theme: "light",
3105
- tokens: U
3506
+ tokens: K
3106
3507
  });
3107
- function Pt({
3508
+ function Yt({
3108
3509
  theme: t = "light",
3109
3510
  tokens: e,
3110
3511
  children: a
3111
3512
  }) {
3112
- const o = X().replace(/:/g, ""), r = t === "dark" ? Je : U, s = e ? { ...r, ...e } : r, c = {
3113
- ...s,
3114
- textOnAccent: (e == null ? void 0 : e.textOnAccent) ?? tt(s.accentDefault)
3115
- }, l = `html { font-size: 13px; }
3116
- ` + Ze(c, ":root");
3117
- return Y(() => {
3118
- let u = document.getElementById(`lucent-tokens-${o}`);
3119
- return u || (u = document.createElement("style"), u.id = `lucent-tokens-${o}`, document.head.appendChild(u)), u.textContent = l, () => {
3120
- var m;
3121
- (m = document.getElementById(`lucent-tokens-${o}`)) == null || m.remove();
3513
+ const r = J().replace(/:/g, ""), o = t === "dark" ? et : K, i = e ? { ...o, ...e } : o, l = {
3514
+ ...i,
3515
+ textOnAccent: (e == null ? void 0 : e.textOnAccent) ?? rt(i.accentDefault)
3516
+ }, s = `html { font-size: 13px; }
3517
+ ` + nt(l, ":root");
3518
+ return P(() => {
3519
+ let d = document.getElementById(`lucent-tokens-${r}`);
3520
+ return d || (d = document.createElement("style"), d.id = `lucent-tokens-${r}`, document.head.appendChild(d)), d.textContent = s, () => {
3521
+ var p;
3522
+ (p = document.getElementById(`lucent-tokens-${r}`)) == null || p.remove();
3122
3523
  };
3123
- }, [o, l]), /* @__PURE__ */ n(j.Provider, { value: { theme: t, tokens: c }, children: a });
3524
+ }, [r, s]), /* @__PURE__ */ n(Y.Provider, { value: { theme: t, tokens: l }, children: a });
3124
3525
  }
3125
- function Ot() {
3126
- return D(j);
3526
+ function Xt() {
3527
+ return V(Y);
3127
3528
  }
3128
- const Ht = {
3529
+ const Jt = {
3129
3530
  accentDefault: "#e9c96b",
3130
3531
  accentHover: "#ddb84e",
3131
3532
  accentActive: "#c9a33b",
3132
3533
  accentSubtle: "#fef9ec",
3133
3534
  focusRing: "#e9c96b"
3134
3535
  };
3135
- function x(t, e) {
3536
+ function C(t, e) {
3136
3537
  return { field: t, message: e };
3137
3538
  }
3138
- function nt(t) {
3539
+ function ot(t) {
3139
3540
  const e = [];
3140
3541
  if (typeof t != "object" || t === null)
3141
- return { valid: !1, errors: [x("manifest", "Must be a non-null object")] };
3142
- const a = t, o = ["id", "name", "description", "designIntent", "specVersion"];
3143
- for (const s of o)
3144
- (typeof a[s] != "string" || a[s].trim() === "") && e.push(x(s, "Must be a non-empty string"));
3145
- typeof a.id == "string" && !/^[a-z][a-z0-9-]*$/.test(a.id) && e.push(x("id", 'Must be kebab-case (e.g. "button", "form-field")'));
3146
- const r = ["atom", "molecule", "block", "flow", "overlay"];
3147
- return r.includes(a.tier) || e.push(x("tier", `Must be one of: ${r.join(", ")}`)), (typeof a.domain != "string" || a.domain.trim() === "") && e.push(x("domain", "Must be a non-empty string")), Array.isArray(a.props) ? a.props.forEach((s, c) => {
3148
- const l = s, u = `props[${c}]`;
3149
- (typeof l.name != "string" || l.name === "") && e.push(x(`${u}.name`, "Must be a non-empty string")), (typeof l.type != "string" || l.type === "") && e.push(x(`${u}.type`, "Must be a non-empty string")), typeof l.required != "boolean" && e.push(x(`${u}.required`, "Must be a boolean")), (typeof l.description != "string" || l.description === "") && e.push(x(`${u}.description`, "Must be a non-empty string"));
3150
- }) : e.push(x("props", "Must be an array")), Array.isArray(a.usageExamples) ? a.usageExamples.length === 0 ? e.push(x("usageExamples", "Must have at least one example")) : a.usageExamples.forEach((s, c) => {
3151
- const l = s, u = `usageExamples[${c}]`;
3152
- (typeof l.title != "string" || l.title === "") && e.push(x(`${u}.title`, "Must be a non-empty string")), (typeof l.code != "string" || l.code === "") && e.push(x(`${u}.code`, "Must be a non-empty string"));
3153
- }) : e.push(x("usageExamples", "Must be an array")), Array.isArray(a.compositionGraph) || e.push(x("compositionGraph", "Must be an array (empty array is fine for atoms)")), typeof a.specVersion == "string" && !/^\d+\.\d+$/.test(a.specVersion) && e.push(x("specVersion", 'Must be "MAJOR.MINOR" format, e.g. "0.1"')), { valid: e.length === 0, errors: e };
3542
+ return { valid: !1, errors: [C("manifest", "Must be a non-null object")] };
3543
+ const a = t, r = ["id", "name", "description", "designIntent", "specVersion"];
3544
+ for (const i of r)
3545
+ (typeof a[i] != "string" || a[i].trim() === "") && e.push(C(i, "Must be a non-empty string"));
3546
+ typeof a.id == "string" && !/^[a-z][a-z0-9-]*$/.test(a.id) && e.push(C("id", 'Must be kebab-case (e.g. "button", "form-field")'));
3547
+ const o = ["atom", "molecule", "block", "flow", "overlay"];
3548
+ return o.includes(a.tier) || e.push(C("tier", `Must be one of: ${o.join(", ")}`)), (typeof a.domain != "string" || a.domain.trim() === "") && e.push(C("domain", "Must be a non-empty string")), Array.isArray(a.props) ? a.props.forEach((i, l) => {
3549
+ const s = i, d = `props[${l}]`;
3550
+ (typeof s.name != "string" || s.name === "") && e.push(C(`${d}.name`, "Must be a non-empty string")), (typeof s.type != "string" || s.type === "") && e.push(C(`${d}.type`, "Must be a non-empty string")), typeof s.required != "boolean" && e.push(C(`${d}.required`, "Must be a boolean")), (typeof s.description != "string" || s.description === "") && e.push(C(`${d}.description`, "Must be a non-empty string"));
3551
+ }) : e.push(C("props", "Must be an array")), Array.isArray(a.usageExamples) ? a.usageExamples.length === 0 ? e.push(C("usageExamples", "Must have at least one example")) : a.usageExamples.forEach((i, l) => {
3552
+ const s = i, d = `usageExamples[${l}]`;
3553
+ (typeof s.title != "string" || s.title === "") && e.push(C(`${d}.title`, "Must be a non-empty string")), (typeof s.code != "string" || s.code === "") && e.push(C(`${d}.code`, "Must be a non-empty string"));
3554
+ }) : e.push(C("usageExamples", "Must be an array")), Array.isArray(a.compositionGraph) || e.push(C("compositionGraph", "Must be an array (empty array is fine for atoms)")), typeof a.specVersion == "string" && !/^\d+\.\d+$/.test(a.specVersion) && e.push(C("specVersion", 'Must be "MAJOR.MINOR" format, e.g. "0.1"')), { valid: e.length === 0, errors: e };
3154
3555
  }
3155
- function Gt(t) {
3156
- const e = nt(t);
3556
+ function Qt(t) {
3557
+ const e = ot(t);
3157
3558
  if (!e.valid) {
3158
- const a = e.errors.map((o) => ` ${o.field}: ${o.message}`).join(`
3559
+ const a = e.errors.map((r) => ` ${r.field}: ${r.message}`).join(`
3159
3560
  `);
3160
3561
  throw new Error(`Invalid ComponentManifest:
3161
3562
  ${a}`);
3162
3563
  }
3163
3564
  }
3164
- function Ut(t) {
3565
+ function Zt(t) {
3165
3566
  if (typeof t != "object" || t === null) return !1;
3166
3567
  const e = t;
3167
3568
  return typeof e.name == "string" && typeof e.type == "string" && typeof e.required == "boolean" && typeof e.description == "string";
3168
3569
  }
3169
- const jt = "0.1", _t = "0.1.0";
3570
+ const en = "0.1", tn = "0.1.0";
3170
3571
  export {
3171
- Bt as Alert,
3172
- $t as AlertManifest,
3173
- dt as Avatar,
3174
- ut as AvatarManifest,
3175
- lt as Badge,
3176
- ct as BadgeManifest,
3177
- Z as Button,
3178
- ot as ButtonManifest,
3179
- Nt as Card,
3180
- Rt as CardManifest,
3181
- ge as Checkbox,
3182
- ht as CheckboxManifest,
3183
- ft as Divider,
3184
- mt as DividerManifest,
3185
- Dt as EmptyState,
3186
- Lt as EmptyStateManifest,
3187
- qt as FormField,
3188
- Et as FormFieldManifest,
3189
- It as Icon,
3190
- zt as IconManifest,
3191
- V as Input,
3192
- it as InputManifest,
3193
- _t as LUCENT_UI_VERSION,
3194
- Pt as LucentProvider,
3195
- jt as MANIFEST_SPEC_VERSION,
3196
- gt as Radio,
3572
+ Vt as Alert,
3573
+ Wt as AlertManifest,
3574
+ ft as Avatar,
3575
+ mt as AvatarManifest,
3576
+ ut as Badge,
3577
+ pt as BadgeManifest,
3578
+ jt as Breadcrumb,
3579
+ ee as Button,
3580
+ st as ButtonManifest,
3581
+ Dt as Card,
3582
+ Lt as CardManifest,
3583
+ be as Checkbox,
3584
+ vt as CheckboxManifest,
3585
+ _t as Collapsible,
3586
+ gt as Divider,
3587
+ bt as DividerManifest,
3588
+ Pt as EmptyState,
3589
+ Ot as EmptyStateManifest,
3590
+ Rt as FormField,
3591
+ Bt as FormFieldManifest,
3592
+ qt as Icon,
3593
+ Et as IconManifest,
3594
+ O as Input,
3595
+ ct as InputManifest,
3596
+ tn as LUCENT_UI_VERSION,
3597
+ Yt as LucentProvider,
3598
+ en as MANIFEST_SPEC_VERSION,
3599
+ Ft as NavLink,
3600
+ Kt as PageLayout,
3601
+ yt as Radio,
3197
3602
  ye as RadioGroup,
3198
- bt as RadioGroupUncontrolled,
3199
- yt as RadioManifest,
3200
- At as SearchInput,
3201
- Ft as SearchInputManifest,
3202
- Te as Select,
3203
- wt as SelectManifest,
3204
- Vt as Skeleton,
3205
- Wt as SkeletonManifest,
3206
- fe as Spinner,
3207
- pt as SpinnerManifest,
3208
- St as Tag,
3209
- kt as TagManifest,
3210
- z as Text,
3211
- Mt as TextManifest,
3212
- oe as Textarea,
3213
- st as TextareaManifest,
3214
- vt as Toggle,
3215
- xt as ToggleManifest,
3216
- Tt as Tooltip,
3217
- Ct as TooltipManifest,
3218
- Gt as assertManifest,
3219
- Ht as brandTokens,
3220
- Je as darkTokens,
3221
- tt as getContrastText,
3222
- Ut as isValidPropDescriptor,
3223
- U as lightTokens,
3224
- Ze as makeLibraryCSS,
3225
- Ot as useLucent,
3226
- nt as validateManifest
3603
+ xt as RadioGroupUncontrolled,
3604
+ wt as RadioManifest,
3605
+ Nt as SearchInput,
3606
+ $t as SearchInputManifest,
3607
+ Ce as Select,
3608
+ Tt as SelectManifest,
3609
+ Ht as Skeleton,
3610
+ Gt as SkeletonManifest,
3611
+ me as Spinner,
3612
+ ht as SpinnerManifest,
3613
+ Ut as Tabs,
3614
+ Ct as Tag,
3615
+ It as TagManifest,
3616
+ E as Text,
3617
+ At as TextManifest,
3618
+ ie as Textarea,
3619
+ dt as TextareaManifest,
3620
+ kt as Toggle,
3621
+ St as ToggleManifest,
3622
+ zt as Tooltip,
3623
+ Mt as TooltipManifest,
3624
+ Qt as assertManifest,
3625
+ Jt as brandTokens,
3626
+ et as darkTokens,
3627
+ rt as getContrastText,
3628
+ Zt as isValidPropDescriptor,
3629
+ K as lightTokens,
3630
+ nt as makeLibraryCSS,
3631
+ Xt as useLucent,
3632
+ ot as validateManifest
3227
3633
  };