lucent-ui 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +95 -19
  2. package/dist/index.cjs +15 -15
  3. package/dist/index.d.ts +8 -2
  4. package/dist/index.js +474 -470
  5. package/package.json +9 -4
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { jsxs as g, jsx as n, Fragment as A } from "react/jsx-runtime";
1
+ import { jsxs as h, jsx as n, Fragment as A } from "react/jsx-runtime";
2
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
3
  const J = {
4
4
  primary: {
@@ -26,26 +26,26 @@ const J = {
26
26
  md: { height: "38px", padding: "0 var(--lucent-space-4)", fontSize: "var(--lucent-font-size-md)" },
27
27
  lg: { height: "46px", padding: "0 var(--lucent-space-5)", fontSize: "var(--lucent-font-size-lg)" }
28
28
  }, 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(
29
+ ({ variant: t = "primary", size: e = "md", loading: a = !1, fullWidth: r = !1, spread: o = !1, leftIcon: i, rightIcon: l, chevron: s = !1, disableHoverStyles: u = !1, children: f, disabled: p, style: m, ...c }, d) => {
30
+ const g = p ?? a;
31
+ return /* @__PURE__ */ h(
32
32
  "button",
33
33
  {
34
- ref: h,
35
- disabled: p,
34
+ ref: d,
35
+ disabled: g,
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: g ? "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",
@@ -54,42 +54,42 @@ const J = {
54
54
  ...Q[e],
55
55
  ...J[t],
56
56
  ...m,
57
- ...p && {
57
+ ...g && {
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: (b) => {
64
+ var y;
65
+ !g && !u && ee(b.currentTarget, t), (y = c.onMouseEnter) == null || y.call(c, b);
66
66
  },
67
- onMouseLeave: (i) => {
68
- var f;
69
- p || te(i.currentTarget, t), (f = d.onMouseLeave) == null || f.call(d, i);
67
+ onMouseLeave: (b) => {
68
+ var y;
69
+ !g && !u && te(b.currentTarget, t), (y = c.onMouseLeave) == null || y.call(c, b);
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: (b) => {
72
+ var y;
73
+ g || (b.currentTarget.style.transform = "scale(0.95)"), (y = c.onMouseDown) == null || y.call(c, b);
74
74
  },
75
- onMouseUp: (i) => {
76
- var f;
77
- i.currentTarget.style.transform = "", (f = d.onMouseUp) == null || f.call(d, i);
75
+ onMouseUp: (b) => {
76
+ var y;
77
+ b.currentTarget.style.transform = "", (y = c.onMouseUp) == null || y.call(c, b);
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: (b) => {
80
+ var y;
81
+ b.currentTarget.style.boxShadow = "0 0 0 3px var(--lucent-accent-subtle)", (y = c.onFocus) == null || y.call(c, b);
82
82
  },
83
- onBlur: (i) => {
84
- var f;
85
- i.currentTarget.style.boxShadow = "", (f = d.onBlur) == null || f.call(d, i);
83
+ onBlur: (b) => {
84
+ var y;
85
+ b.currentTarget.style.boxShadow = "", (y = c.onBlur) == null || y.call(c, b);
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(re, {}) : f,
91
+ !a && l,
92
+ !a && s && /* @__PURE__ */ n(ae, { size: e })
93
93
  ]
94
94
  }
95
95
  );
@@ -108,7 +108,7 @@ function ae({ size: 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
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: [
111
+ return /* @__PURE__ */ h("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
  ] });
@@ -225,13 +225,13 @@ const ot = {
225
225
  keyboardInteractions: ["Enter — activates the button", "Space — activates the button"]
226
226
  }
227
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: [
228
+ ({ label: t, helperText: e, errorText: a, leftElement: r, rightElement: o, id: i, style: l, ...s }, u) => {
229
+ const f = i ?? `lucent-input-${Math.random().toString(36).slice(2, 7)}`, p = !!a, m = !!s.disabled;
230
+ return /* @__PURE__ */ h("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: f,
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__ */ h("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
- color: h ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
248
+ color: m ? "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
256
  ref: u,
257
- id: m,
258
- "aria-invalid": d,
259
- "aria-describedby": d ? `${m}-error` : e ? `${m}-helper` : void 0,
257
+ id: f,
258
+ "aria-invalid": p,
259
+ "aria-describedby": p ? `${f}-error` : e ? `${f}-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
- color: h ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
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)"}`,
269
- cursor: h ? "not-allowed" : void 0,
266
+ color: m ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
267
+ background: m ? "var(--lucent-bg-muted)" : "var(--lucent-surface-default)",
268
+ border: `1px solid ${m ? "transparent" : p ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"}`,
269
+ cursor: m ? "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 d;
278
+ !s.disabled && c.currentTarget !== document.activeElement && (c.currentTarget.style.borderColor = p ? "var(--lucent-danger-default)" : "var(--lucent-border-strong)"), (d = s.onMouseEnter) == null || d.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 d;
282
+ !s.disabled && c.currentTarget !== document.activeElement && (c.currentTarget.style.borderColor = p ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"), (d = s.onMouseLeave) == null || d.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 d;
286
+ c.currentTarget.style.borderColor = p ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", c.currentTarget.style.boxShadow = `0 0 0 3px ${p ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (d = s.onFocus) == null || d.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 d;
290
+ c.currentTarget.style.borderColor = p ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", c.currentTarget.style.boxShadow = "none", (d = s.onBlur) == null || d.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
- color: h ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
298
+ color: m ? "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
+ p && /* @__PURE__ */ n(
304
304
  "span",
305
305
  {
306
- id: `${m}-error`,
306
+ id: `${f}-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
+ !p && e && /* @__PURE__ */ n(
317
317
  "span",
318
318
  {
319
- id: `${m}-helper`,
319
+ id: `${f}-helper`,
320
320
  style: {
321
321
  fontSize: "var(--lucent-font-size-sm)",
322
322
  color: "var(--lucent-text-secondary)",
@@ -362,14 +362,14 @@ const it = {
362
362
  keyboardInteractions: ["Tab — focuses the input"]
363
363
  }
364
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;
365
+ ({ label: t, helperText: e, errorText: a, autoResize: r = !1, maxLength: o, showCount: i = !1, id: l, value: s, onChange: u, style: f, ...p }, m) => {
366
+ const c = M(null), d = m ?? c, g = l ?? `lucent-textarea-${Math.random().toString(36).slice(2, 7)}`, b = !!a, y = 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 v = d.current;
370
+ v && (v.style.height = "auto", v.style.height = `${v.scrollHeight}px`);
371
+ }, [s, r, d]), /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%" }, children: [
372
+ t && /* @__PURE__ */ n("label", { htmlFor: g, 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,
381
+ ref: d,
382
+ id: g,
383
+ maxLength: o,
384
+ value: s,
385
385
  onChange: u,
386
- "aria-invalid": v,
387
- "aria-describedby": v ? `${f}-error` : e ? `${f}-helper` : void 0,
386
+ "aria-invalid": b,
387
+ "aria-describedby": b ? `${g}-error` : e ? `${g}-helper` : void 0,
388
388
  style: {
389
389
  width: "100%",
390
390
  minHeight: "100px",
@@ -393,40 +393,40 @@ 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 ${b ? "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
+ ...f
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: (v) => {
406
+ var k;
407
+ v.currentTarget.style.borderColor = b ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", v.currentTarget.style.boxShadow = `0 0 0 3px ${b ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (k = p.onFocus) == null || k.call(p, v);
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: (v) => {
410
+ var k;
411
+ v.currentTarget.style.borderColor = b ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", v.currentTarget.style.boxShadow = "none", (k = p.onBlur) == null || k.call(p, v);
412
412
  },
413
- ...d
413
+ ...p
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__ */ h("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
417
+ /* @__PURE__ */ h("div", { children: [
418
+ b && /* @__PURE__ */ n("span", { id: `${g}-error`, role: "alert", style: { fontSize: "var(--lucent-font-size-sm)", color: "var(--lucent-danger-text)", fontFamily: "var(--lucent-font-family-base)" }, children: a }),
419
+ !b && e && /* @__PURE__ */ n("span", { id: `${g}-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__ */ h("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 && y >= 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
+ y,
429
+ o ? `/${o}` : ""
430
430
  ] })
431
431
  ] })
432
432
  ] });
@@ -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 lt({ variant: t = "neutral", size: e = "md", dot: a = !1, children: r, style: o }) {
480
+ const i = ie[t], l = se[e];
481
+ return /* @__PURE__ */ h("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,7 +503,7 @@ 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
509
  const ct = {
@@ -544,15 +545,15 @@ const ct = {
544
545
  xl: "var(--lucent-font-size-xl)"
545
546
  };
546
547
  function de(t, e) {
547
- var o, r, s;
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 dt({ src: t, alt: e, size: a = "md", initials: r, style: o, ...i }) {
554
+ const l = le[a], s = de(e, r), u = {
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,
572
+ width: l,
573
+ height: l,
573
574
  style: { ...u, objectFit: "cover" },
574
- ...s
575
+ ...i
575
576
  }
576
577
  ) : /* @__PURE__ */ n(
577
578
  "span",
@@ -586,7 +587,7 @@ function dt({ src: t, alt: e, size: a = "md", initials: o, style: r, ...s }) {
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
  }
@@ -628,26 +629,26 @@ const ut = {
628
629
  lg: 2
629
630
  };
630
631
  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(
632
+ const r = ue[t], o = pe[t];
633
+ return /* @__PURE__ */ h("span", { role: "status", "aria-label": e, style: { display: "inline-flex", alignItems: "center", justifyContent: "center" }, children: [
634
+ /* @__PURE__ */ h(
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
  )
@@ -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 ft({ 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__ */ h(
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,7 +732,8 @@ 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
  );
@@ -774,56 +778,56 @@ const mt = {
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,
781
+ checked: r,
782
+ defaultChecked: o,
783
+ disabled: i,
784
+ id: l,
785
+ onChange: s,
782
786
  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);
787
+ ...f
788
+ }, p) => {
789
+ const m = M(null), c = l ?? `lucent-checkbox-${Math.random().toString(36).slice(2, 7)}`, d = me[e], g = r !== void 0, [b, y] = C(o ?? !1), v = g ? !!r : b, k = M(v), [T, S] = C(0);
786
790
  F(() => {
787
- !s && w.current !== b && (w.current = b, S((I) => I + 1));
788
- }, [b, s]);
791
+ !i && k.current !== v && (k.current = v, S((I) => I + 1));
792
+ }, [v, i]);
789
793
  const q = K(
790
794
  (I) => {
791
- h.current = I, typeof d == "function" ? d(I) : d && (d.current = I);
795
+ m.current = I, typeof p == "function" ? p(I) : p && (p.current = I);
792
796
  },
793
- [d]
797
+ [p]
794
798
  );
795
799
  F(() => {
796
- h.current && (h.current.indeterminate = a);
800
+ m.current && (m.current.indeterminate = a);
797
801
  }, [a]);
798
802
  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,
803
+ g || y(I.target.checked), s == null || s(I);
804
+ }, R = i ? "var(--lucent-text-disabled)" : "var(--lucent-text-on-accent)", _ = {
805
+ width: d,
806
+ height: d,
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" : v || a ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)"}`,
809
+ background: i ? "var(--lucent-bg-muted)" : v || a ? "var(--lucent-accent-default)" : "var(--lucent-surface-default)",
806
810
  display: "inline-flex",
807
811
  alignItems: "center",
808
812
  justifyContent: "center",
809
813
  flexShrink: 0,
810
814
  transition: "background var(--lucent-duration-fast) var(--lucent-easing-default), border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
811
815
  // Re-key forces the animation to restart on every toggle.
812
- animation: k > 0 ? "lucent-cb-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0
816
+ animation: T > 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: [
818
+ return /* @__PURE__ */ h(A, { children: [
815
819
  /* @__PURE__ */ n("style", { children: he }),
816
- /* @__PURE__ */ g(
820
+ /* @__PURE__ */ h(
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
832
  ...u
829
833
  },
@@ -833,20 +837,20 @@ const mt = {
833
837
  {
834
838
  ref: q,
835
839
  type: "checkbox",
836
- id: p,
837
- checked: f ? o : v,
838
- disabled: s,
840
+ id: c,
841
+ checked: g ? r : b,
842
+ disabled: i,
839
843
  onChange: E,
840
844
  style: { position: "absolute", opacity: 0, width: 0, height: 0, margin: 0, pointerEvents: "none" },
841
- ...m
845
+ ...f
842
846
  }
843
847
  ),
844
- /* @__PURE__ */ g("span", { "aria-hidden": !0, style: _, children: [
845
- b && !a && /* @__PURE__ */ n(
848
+ /* @__PURE__ */ h("span", { "aria-hidden": !0, style: _, children: [
849
+ v && !a && /* @__PURE__ */ n(
846
850
  "svg",
847
851
  {
848
- width: i - 4,
849
- height: i - 4,
852
+ width: d - 4,
853
+ height: d - 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,15 +860,15 @@ const mt = {
856
860
  a && /* @__PURE__ */ n(
857
861
  "svg",
858
862
  {
859
- width: i - 4,
860
- height: i - 4,
863
+ width: d - 4,
864
+ height: d - 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" },
864
868
  children: /* @__PURE__ */ n("path", { d: "M2 5H8", stroke: R, strokeWidth: 1.5, strokeLinecap: "round" })
865
869
  }
866
870
  )
867
- ] }, k),
871
+ ] }, T),
868
872
  t
869
873
  ]
870
874
  }
@@ -959,67 +963,67 @@ 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(W.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
986
  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);
987
+ function gt({ value: t, label: e, size: a = "md", disabled: r, id: o, onChange: i, checked: l, ...s }) {
988
+ const u = D(W), f = o ?? `lucent-radio-${Math.random().toString(36).slice(2, 7)}`, p = ve[a], m = r ?? (u == null ? void 0 : u.disabled) ?? !1, c = u ? u.value === t : !!l, d = M(c), [g, b] = C(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
+ !m && d.current !== c && (d.current = c, b((T) => T + 1));
991
+ }, [c, m]);
992
+ const y = (T) => {
993
+ u == null || u.onChange(t), i == null || i(T);
994
+ }, v = {
995
+ width: p / 2,
996
+ height: p / 2,
993
997
  borderRadius: "50%",
994
- 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,
998
+ background: m ? "var(--lucent-text-disabled)" : "var(--lucent-text-on-accent)",
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
+ }, k = {
1002
+ width: p,
1003
+ height: p,
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 ${m ? "transparent" : c ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)"}`,
1006
+ background: m ? "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: g > 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: [
1014
+ return /* @__PURE__ */ h(A, { children: [
1011
1015
  /* @__PURE__ */ n("style", { children: be }),
1012
- /* @__PURE__ */ g(
1016
+ /* @__PURE__ */ h(
1013
1017
  "label",
1014
1018
  {
1015
1019
  style: {
1016
1020
  display: "inline-flex",
1017
1021
  alignItems: "center",
1018
1022
  gap: "var(--lucent-space-2)",
1019
- cursor: h ? "not-allowed" : "pointer",
1023
+ cursor: m ? "not-allowed" : "pointer",
1020
1024
  fontFamily: "var(--lucent-font-family-base)",
1021
1025
  fontSize: a === "sm" ? "var(--lucent-font-size-sm)" : "var(--lucent-font-size-md)",
1022
- color: h ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
1026
+ color: m ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
1023
1027
  userSelect: "none"
1024
1028
  },
1025
1029
  children: [
@@ -1027,17 +1031,17 @@ 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: f,
1031
1035
  value: t,
1032
- name: (u == null ? void 0 : u.name) ?? l.name,
1033
- checked: p,
1034
- disabled: h,
1035
- onChange: T,
1036
+ name: (u == null ? void 0 : u.name) ?? s.name,
1037
+ checked: c,
1038
+ disabled: m,
1039
+ onChange: y,
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: k, children: /* @__PURE__ */ n("span", { style: v }) }, g),
1041
1045
  e
1042
1046
  ]
1043
1047
  }
@@ -1049,14 +1053,14 @@ function bt({
1049
1053
  onChange: e,
1050
1054
  ...a
1051
1055
  }) {
1052
- const [o, r] = C(t);
1056
+ const [r, o] = C(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
  );
@@ -1154,35 +1158,35 @@ function vt({
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,
1161
+ defaultChecked: r,
1162
+ disabled: o,
1163
+ id: i,
1164
+ onChange: l,
1165
+ style: s,
1162
1166
  ...u
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 f = i ?? `lucent-toggle-${Math.random().toString(36).slice(2, 7)}`, p = a !== void 0, [m, c] = C(r ?? !1), d = p ? !!a : m, g = M(d), [b, y] = C(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 && g.current !== d && (g.current = d, y((E) => E + 1));
1171
+ }, [d, o]);
1172
+ const { track: [v, k], thumb: T } = xe[e], S = d ? v - T - 2 : 2, q = (E) => {
1173
+ p || c(E.target.checked), l == null || l(E);
1170
1174
  };
1171
- return /* @__PURE__ */ g(A, { children: [
1175
+ return /* @__PURE__ */ h(A, { children: [
1172
1176
  /* @__PURE__ */ n("style", { children: we }),
1173
- /* @__PURE__ */ g(
1177
+ /* @__PURE__ */ h(
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,11 +1194,11 @@ function vt({
1190
1194
  {
1191
1195
  type: "checkbox",
1192
1196
  role: "switch",
1193
- id: m,
1194
- checked: d ? a : h,
1195
- disabled: r,
1197
+ id: f,
1198
+ checked: p ? a : m,
1199
+ disabled: o,
1196
1200
  onChange: q,
1197
- "aria-checked": i,
1201
+ "aria-checked": d,
1198
1202
  style: { position: "absolute", opacity: 0, width: 0, height: 0, margin: 0, pointerEvents: "none" },
1199
1203
  ...u
1200
1204
  }
@@ -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: v,
1213
+ height: k,
1214
+ borderRadius: k / 2,
1215
+ background: o ? "var(--lucent-bg-muted)" : d ? "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: b > 0 ? `lucent-toggle-pop 240ms ${B} forwards` : void 0
1215
1219
  },
1216
1220
  children: /* @__PURE__ */ n(
1217
1221
  "span",
@@ -1220,8 +1224,8 @@ function vt({
1220
1224
  position: "absolute",
1221
1225
  top: 2,
1222
1226
  left: S,
1223
- width: k,
1224
- height: k,
1227
+ width: T,
1228
+ height: T,
1225
1229
  borderRadius: "50%",
1226
1230
  background: "#ffffff",
1227
1231
  boxShadow: "0 1px 3px rgb(0 0 0 / 0.2)",
@@ -1230,7 +1234,7 @@ function vt({
1230
1234
  }
1231
1235
  )
1232
1236
  },
1233
- v
1237
+ b
1234
1238
  ),
1235
1239
  t
1236
1240
  ]
@@ -1302,22 +1306,22 @@ const xt = {
1302
1306
  ariaAttributes: ["aria-checked", "aria-disabled"],
1303
1307
  keyboardInteractions: ["Space — toggles the switch state"]
1304
1308
  }
1305
- }, Se = {
1309
+ }, ke = {
1306
1310
  sm: "32px",
1307
1311
  md: "40px",
1308
1312
  lg: "46px"
1309
- }, ke = {
1313
+ }, Se = {
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
1317
  }, 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: [
1318
+ ({ options: t, size: e = "md", label: a, helperText: r, errorText: o, placeholder: i, disabled: l, id: s, style: u, ...f }, p) => {
1319
+ const m = s ?? `lucent-select-${Math.random().toString(36).slice(2, 7)}`, c = !!o;
1320
+ return /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%" }, children: [
1317
1321
  a && /* @__PURE__ */ n(
1318
1322
  "label",
1319
1323
  {
1320
- htmlFor: h,
1324
+ htmlFor: m,
1321
1325
  style: {
1322
1326
  fontSize: "var(--lucent-font-size-sm)",
1323
1327
  fontWeight: "var(--lucent-font-weight-medium)",
@@ -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__ */ h("div", { style: { position: "relative", display: "flex", alignItems: "center" }, children: [
1335
+ /* @__PURE__ */ h(
1332
1336
  "select",
1333
1337
  {
1334
- ref: d,
1335
- id: h,
1336
- disabled: c,
1337
- "aria-invalid": p,
1338
- "aria-describedby": p ? `${h}-error` : o ? `${h}-helper` : void 0,
1338
+ ref: p,
1339
+ id: m,
1340
+ disabled: l,
1341
+ "aria-invalid": c,
1342
+ "aria-describedby": c ? `${m}-error` : r ? `${m}-helper` : void 0,
1339
1343
  style: {
1340
1344
  width: "100%",
1341
- height: Se[e],
1345
+ height: ke[e],
1342
1346
  padding: "0 var(--lucent-space-8) 0 var(--lucent-space-3)",
1343
- fontSize: ke[e],
1347
+ fontSize: Se[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
1358
  ...u
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: (d) => {
1361
+ var g;
1362
+ !l && d.currentTarget !== document.activeElement && (d.currentTarget.style.borderColor = c ? "var(--lucent-danger-default)" : "var(--lucent-border-strong)"), (g = f.onMouseEnter) == null || g.call(f, d);
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: (d) => {
1365
+ var g;
1366
+ !l && d.currentTarget !== document.activeElement && (d.currentTarget.style.borderColor = c ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"), (g = f.onMouseLeave) == null || g.call(f, d);
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: (d) => {
1369
+ var g;
1370
+ d.currentTarget.style.borderColor = c ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", d.currentTarget.style.boxShadow = `0 0 0 3px ${c ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (g = f.onFocus) == null || g.call(f, d);
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: (d) => {
1373
+ var g;
1374
+ d.currentTarget.style.borderColor = c ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", d.currentTarget.style.boxShadow = "none", (g = f.onBlur) == null || g.call(f, d);
1371
1375
  },
1372
- ...m,
1376
+ ...f,
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((d) => /* @__PURE__ */ n("option", { value: d.value, disabled: d.disabled, children: d.label }, d.value))
1376
1380
  ]
1377
1381
  }
1378
1382
  ),
@@ -1392,29 +1396,29 @@ const xt = {
1392
1396
  }
1393
1397
  )
1394
1398
  ] }),
1395
- p && /* @__PURE__ */ n(
1399
+ c && /* @__PURE__ */ n(
1396
1400
  "span",
1397
1401
  {
1398
- id: `${h}-error`,
1402
+ id: `${m}-error`,
1399
1403
  role: "alert",
1400
1404
  style: {
1401
1405
  fontSize: "var(--lucent-font-size-sm)",
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
- id: `${h}-helper`,
1415
+ id: `${m}-helper`,
1412
1416
  style: {
1413
1417
  fontSize: "var(--lucent-font-size-sm)",
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
  ] });
@@ -1530,67 +1534,67 @@ const wt = {
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 kt({ children: t, variant: e = "neutral", size: a = "md", onDismiss: r, disabled: o }) {
1538
+ const i = Ce[e], l = Ie[a];
1539
+ return /* @__PURE__ */ h(
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 St = {
1594
1598
  id: "tag",
1595
1599
  name: "Tag",
1596
1600
  tier: "atom",
@@ -1647,58 +1651,58 @@ 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 }
1654
+ }, x = 5, ze = {
1655
+ top: { bottom: "100%", left: "50%", transform: "translateX(-50%)", marginBottom: x + 3 },
1656
+ bottom: { top: "100%", left: "50%", transform: "translateX(-50%)", marginTop: x + 3 },
1657
+ left: { right: "100%", top: "50%", transform: "translateY(-50%)", marginRight: x + 3 },
1658
+ right: { left: "100%", top: "50%", transform: "translateY(-50%)", marginLeft: x + 3 }
1655
1659
  }, Me = {
1656
1660
  top: {
1657
- bottom: -y,
1661
+ bottom: -x,
1658
1662
  left: "50%",
1659
1663
  transform: "translateX(-50%)",
1660
- borderWidth: `${y}px ${y}px 0 ${y}px`,
1664
+ borderWidth: `${x}px ${x}px 0 ${x}px`,
1661
1665
  borderColor: "var(--lucent-text-primary) transparent transparent transparent"
1662
1666
  },
1663
1667
  bottom: {
1664
- top: -y,
1668
+ top: -x,
1665
1669
  left: "50%",
1666
1670
  transform: "translateX(-50%)",
1667
- borderWidth: `0 ${y}px ${y}px ${y}px`,
1671
+ borderWidth: `0 ${x}px ${x}px ${x}px`,
1668
1672
  borderColor: "transparent transparent var(--lucent-text-primary) transparent"
1669
1673
  },
1670
1674
  left: {
1671
- right: -y,
1675
+ right: -x,
1672
1676
  top: "50%",
1673
1677
  transform: "translateY(-50%)",
1674
- borderWidth: `${y}px 0 ${y}px ${y}px`,
1678
+ borderWidth: `${x}px 0 ${x}px ${x}px`,
1675
1679
  borderColor: "transparent transparent transparent var(--lucent-text-primary)"
1676
1680
  },
1677
1681
  right: {
1678
- left: -y,
1682
+ left: -x,
1679
1683
  top: "50%",
1680
1684
  transform: "translateY(-50%)",
1681
- borderWidth: `${y}px ${y}px ${y}px 0`,
1685
+ borderWidth: `${x}px ${x}px ${x}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);
1689
+ function Tt({ content: t, children: e, placement: a = "top", delay: r = 300 }) {
1690
+ const [o, i] = C(!1), l = M(null), s = () => {
1691
+ l.current = setTimeout(() => i(!0), r);
1688
1692
  }, u = () => {
1689
- c.current && clearTimeout(c.current), s(!1);
1693
+ l.current && clearTimeout(l.current), i(!1);
1690
1694
  };
1691
- return t ? /* @__PURE__ */ g(
1695
+ return t ? /* @__PURE__ */ h(
1692
1696
  "span",
1693
1697
  {
1694
1698
  style: { position: "relative", display: "inline-flex" },
1695
- onMouseEnter: l,
1699
+ onMouseEnter: s,
1696
1700
  onMouseLeave: u,
1697
- onFocus: l,
1701
+ onFocus: s,
1698
1702
  onBlur: u,
1699
1703
  children: [
1700
1704
  e,
1701
- r && /* @__PURE__ */ g(
1705
+ o && /* @__PURE__ */ h(
1702
1706
  "span",
1703
1707
  {
1704
1708
  role: "tooltip",
@@ -1796,8 +1800,8 @@ const Ct = {
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 It({ children: t, size: e = "md", label: a, color: r, style: o }) {
1804
+ const i = qe[e];
1801
1805
  return /* @__PURE__ */ n(
1802
1806
  "span",
1803
1807
  {
@@ -1808,11 +1812,11 @@ 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
  }
@@ -1902,31 +1906,31 @@ function z({
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,
1909
+ color: r = "primary",
1910
+ align: o = "left",
1911
+ lineHeight: i = "base",
1912
+ family: l = "base",
1913
+ truncate: s = !1,
1910
1914
  children: u,
1911
- style: m,
1912
- ...d
1915
+ style: f,
1916
+ ...p
1913
1917
  }) {
1914
- const h = {
1918
+ const m = {
1915
1919
  fontSize: Ae[e],
1916
1920
  fontWeight: Fe[a],
1917
- color: Ee[o],
1918
- textAlign: r,
1919
- lineHeight: Ne[s],
1920
- fontFamily: Re[c],
1921
+ color: Ee[r],
1922
+ textAlign: o,
1923
+ lineHeight: Ne[i],
1924
+ fontFamily: Re[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
+ ...f
1928
1932
  };
1929
- return /* @__PURE__ */ n(t, { style: h, ...d, children: u });
1933
+ return /* @__PURE__ */ n(t, { style: m, ...p, children: u });
1930
1934
  }
1931
1935
  const Mt = {
1932
1936
  id: "text",
@@ -2030,19 +2034,19 @@ function qt({
2030
2034
  label: t,
2031
2035
  htmlFor: e,
2032
2036
  required: a = !1,
2033
- helperText: o,
2034
- errorMessage: r,
2035
- children: s,
2036
- style: c
2037
+ helperText: r,
2038
+ errorMessage: o,
2039
+ children: i,
2040
+ style: l
2037
2041
  }) {
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: [
2042
+ const s = o ?? r, u = o ? "danger" : "secondary";
2043
+ return /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)", ...l }, children: [
2044
+ t && /* @__PURE__ */ h("div", { style: { display: "flex", alignItems: "baseline", gap: "var(--lucent-space-1)" }, children: [
2041
2045
  /* @__PURE__ */ n(z, { as: "label", size: "sm", weight: "medium", lineHeight: "tight", ...e !== void 0 && { htmlFor: e }, children: t }),
2042
2046
  a && /* @__PURE__ */ n(z, { as: "span", size: "sm", color: "danger", lineHeight: "tight", "aria-hidden": "true", children: "*" })
2043
2047
  ] }),
2044
- s,
2045
- l && /* @__PURE__ */ n(z, { size: "xs", color: u, lineHeight: "tight", children: l })
2048
+ i,
2049
+ s && /* @__PURE__ */ n(z, { size: "xs", color: u, lineHeight: "tight", children: s })
2046
2050
  ] });
2047
2051
  }
2048
2052
  const Et = {
@@ -2131,7 +2135,7 @@ const Et = {
2131
2135
  ariaAttributes: ["aria-required", "aria-describedby"],
2132
2136
  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
2137
  }
2134
- }, Be = () => /* @__PURE__ */ g("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
2138
+ }, Be = () => /* @__PURE__ */ h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
2135
2139
  /* @__PURE__ */ n("circle", { cx: "6.5", cy: "6.5", r: "4", stroke: "currentColor", strokeWidth: "1.5" }),
2136
2140
  /* @__PURE__ */ n("path", { d: "M9.5 9.5L13 13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
2137
2141
  ] }), $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" }) });
@@ -2139,27 +2143,27 @@ function At({
2139
2143
  value: t,
2140
2144
  onChange: e,
2141
2145
  placeholder: a = "Search…",
2142
- results: o = [],
2143
- onResultSelect: r,
2144
- isLoading: s = !1,
2145
- disabled: c = !1,
2146
- id: l,
2146
+ results: r = [],
2147
+ onResultSelect: o,
2148
+ isLoading: i = !1,
2149
+ disabled: l = !1,
2150
+ id: s,
2147
2151
  style: u
2148
2152
  }) {
2149
- const [m, d] = C(!1), [h, p] = C(null), i = M(null), f = m && o.length > 0, v = () => {
2153
+ const [f, p] = C(!1), [m, c] = C(null), d = M(null), g = f && r.length > 0, b = () => {
2150
2154
  e("");
2151
- }, T = (S) => {
2152
- r == null || r(S), d(!1);
2153
- }, b = () => {
2154
- i.current = setTimeout(() => d(!1), 150);
2155
- }, w = () => {
2156
- i.current && clearTimeout(i.current), d(!0);
2157
- }, k = s ? /* @__PURE__ */ n(fe, { size: "sm" }) : t ? /* @__PURE__ */ n(
2155
+ }, y = (S) => {
2156
+ o == null || o(S), p(!1);
2157
+ }, v = () => {
2158
+ d.current = setTimeout(() => p(!1), 150);
2159
+ }, k = () => {
2160
+ d.current && clearTimeout(d.current), p(!0);
2161
+ }, T = i ? /* @__PURE__ */ n(fe, { size: "sm" }) : t ? /* @__PURE__ */ n(
2158
2162
  "button",
2159
2163
  {
2160
2164
  type: "button",
2161
2165
  "aria-label": "Clear search",
2162
- onClick: v,
2166
+ onClick: b,
2163
2167
  style: {
2164
2168
  display: "flex",
2165
2169
  alignItems: "center",
@@ -2179,23 +2183,23 @@ function At({
2179
2183
  children: /* @__PURE__ */ n($e, {})
2180
2184
  }
2181
2185
  ) : null;
2182
- return /* @__PURE__ */ g("div", { style: { position: "relative", ...u }, children: [
2186
+ return /* @__PURE__ */ h("div", { style: { position: "relative", ...u }, children: [
2183
2187
  /* @__PURE__ */ n(
2184
2188
  V,
2185
2189
  {
2186
- id: l,
2190
+ id: s,
2187
2191
  type: "search",
2188
2192
  value: t,
2189
2193
  onChange: (S) => e(S.target.value),
2190
2194
  placeholder: a,
2191
- disabled: c,
2195
+ disabled: l,
2192
2196
  leftElement: /* @__PURE__ */ n(Be, {}),
2193
- rightElement: k ?? void 0,
2194
- onFocus: w,
2195
- onBlur: b
2197
+ rightElement: T ?? void 0,
2198
+ onFocus: k,
2199
+ onBlur: v
2196
2200
  }
2197
2201
  ),
2198
- f && /* @__PURE__ */ n(
2202
+ g && /* @__PURE__ */ n(
2199
2203
  "div",
2200
2204
  {
2201
2205
  role: "listbox",
@@ -2211,18 +2215,18 @@ function At({
2211
2215
  boxShadow: "var(--lucent-shadow-md)",
2212
2216
  overflow: "hidden"
2213
2217
  },
2214
- children: o.map((S, q) => /* @__PURE__ */ n(
2218
+ children: r.map((S, q) => /* @__PURE__ */ n(
2215
2219
  "div",
2216
2220
  {
2217
2221
  role: "option",
2218
2222
  "aria-selected": !1,
2219
- onMouseDown: () => T(S),
2220
- onMouseEnter: () => p(q),
2221
- onMouseLeave: () => p(null),
2223
+ onMouseDown: () => y(S),
2224
+ onMouseEnter: () => c(q),
2225
+ onMouseLeave: () => c(null),
2222
2226
  style: {
2223
2227
  padding: "var(--lucent-space-2) var(--lucent-space-3)",
2224
2228
  cursor: "pointer",
2225
- background: h === q ? "var(--lucent-bg-subtle)" : "transparent",
2229
+ background: m === q ? "var(--lucent-bg-subtle)" : "transparent",
2226
2230
  transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)"
2227
2231
  },
2228
2232
  children: /* @__PURE__ */ n(z, { as: "span", size: "md", children: S.label })
@@ -2349,13 +2353,13 @@ function Nt({
2349
2353
  header: t,
2350
2354
  footer: e,
2351
2355
  children: a,
2352
- padding: o = "md",
2353
- shadow: r = "sm",
2354
- radius: s = "md",
2355
- style: c
2356
+ padding: r = "md",
2357
+ shadow: o = "sm",
2358
+ radius: i = "md",
2359
+ style: l
2356
2360
  }) {
2357
- const l = De[o], u = Ve[s];
2358
- return /* @__PURE__ */ g(
2361
+ const s = De[r], u = Ve[i];
2362
+ return /* @__PURE__ */ h(
2359
2363
  "div",
2360
2364
  {
2361
2365
  style: {
@@ -2364,28 +2368,28 @@ function Nt({
2364
2368
  background: "var(--lucent-surface-default)",
2365
2369
  border: "1px solid var(--lucent-border-default)",
2366
2370
  borderRadius: u,
2367
- boxShadow: Le[r],
2371
+ boxShadow: Le[o],
2368
2372
  overflow: "hidden",
2369
2373
  boxSizing: "border-box",
2370
- ...c
2374
+ ...l
2371
2375
  },
2372
2376
  children: [
2373
2377
  t != null && /* @__PURE__ */ n(
2374
2378
  "div",
2375
2379
  {
2376
2380
  style: {
2377
- padding: l,
2381
+ padding: s,
2378
2382
  borderBottom: "1px solid var(--lucent-border-default)"
2379
2383
  },
2380
2384
  children: t
2381
2385
  }
2382
2386
  ),
2383
- /* @__PURE__ */ n("div", { style: { padding: l, flex: 1 }, children: a }),
2387
+ /* @__PURE__ */ n("div", { style: { padding: s, flex: 1 }, children: a }),
2384
2388
  e != null && /* @__PURE__ */ n(
2385
2389
  "div",
2386
2390
  {
2387
2391
  style: {
2388
- padding: l,
2392
+ padding: s,
2389
2393
  borderTop: "1px solid var(--lucent-border-default)"
2390
2394
  },
2391
2395
  children: e
@@ -2485,16 +2489,16 @@ const Rt = {
2485
2489
  success: { bg: "var(--lucent-success-subtle)", border: "var(--lucent-success-default)", iconColor: "var(--lucent-success-text)", textColor: "success" },
2486
2490
  warning: { bg: "var(--lucent-warning-subtle)", border: "var(--lucent-warning-default)", iconColor: "var(--lucent-warning-text)", textColor: "warning" },
2487
2491
  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: [
2492
+ }, Pe = () => /* @__PURE__ */ h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
2489
2493
  /* @__PURE__ */ n("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
2490
2494
  /* @__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: [
2495
+ ] }), Oe = () => /* @__PURE__ */ h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
2492
2496
  /* @__PURE__ */ n("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
2493
2497
  /* @__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: [
2498
+ ] }), He = () => /* @__PURE__ */ h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
2495
2499
  /* @__PURE__ */ n("path", { d: "M8 2L14.5 13H1.5L8 2Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
2496
2500
  /* @__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: [
2501
+ ] }), Ge = () => /* @__PURE__ */ h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
2498
2502
  /* @__PURE__ */ n("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
2499
2503
  /* @__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
2504
  ] }), Ue = {
@@ -2507,12 +2511,12 @@ function Bt({
2507
2511
  variant: t = "info",
2508
2512
  title: e,
2509
2513
  children: a,
2510
- onDismiss: o,
2511
- icon: r,
2512
- style: s
2514
+ onDismiss: r,
2515
+ icon: o,
2516
+ style: i
2513
2517
  }) {
2514
- const c = We[t], l = r ?? Ue[t];
2515
- return /* @__PURE__ */ g(
2518
+ const l = We[t], s = o ?? Ue[t];
2519
+ return /* @__PURE__ */ h(
2516
2520
  "div",
2517
2521
  {
2518
2522
  role: "alert",
@@ -2521,11 +2525,11 @@ function Bt({
2521
2525
  alignItems: "flex-start",
2522
2526
  gap: "var(--lucent-space-3)",
2523
2527
  padding: "var(--lucent-space-3) var(--lucent-space-4)",
2524
- background: c.bg,
2525
- border: `1px solid ${c.border}`,
2528
+ background: l.bg,
2529
+ border: `1px solid ${l.border}`,
2526
2530
  borderRadius: "var(--lucent-radius-md)",
2527
2531
  boxSizing: "border-box",
2528
- ...s
2532
+ ...i
2529
2533
  },
2530
2534
  children: [
2531
2535
  /* @__PURE__ */ n(
@@ -2533,24 +2537,24 @@ function Bt({
2533
2537
  {
2534
2538
  style: {
2535
2539
  flexShrink: 0,
2536
- color: c.iconColor,
2540
+ color: l.iconColor,
2537
2541
  display: "flex",
2538
2542
  alignItems: "center",
2539
2543
  paddingTop: 2
2540
2544
  },
2541
- children: l
2545
+ children: s
2542
2546
  }
2543
2547
  ),
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 })
2548
+ /* @__PURE__ */ h("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)" }, children: [
2549
+ e && /* @__PURE__ */ n(z, { as: "span", size: "sm", weight: "semibold", color: l.textColor, lineHeight: "tight", children: e }),
2550
+ a && /* @__PURE__ */ n(z, { as: "span", size: "sm", color: l.textColor, lineHeight: "base", children: a })
2547
2551
  ] }),
2548
- o && /* @__PURE__ */ n(
2552
+ r && /* @__PURE__ */ n(
2549
2553
  "button",
2550
2554
  {
2551
2555
  type: "button",
2552
2556
  "aria-label": "Dismiss",
2553
- onClick: o,
2557
+ onClick: r,
2554
2558
  style: {
2555
2559
  flexShrink: 0,
2556
2560
  display: "flex",
@@ -2560,7 +2564,7 @@ function Bt({
2560
2564
  cursor: "pointer",
2561
2565
  padding: 2,
2562
2566
  borderRadius: "var(--lucent-radius-sm)",
2563
- color: c.iconColor,
2567
+ color: l.iconColor,
2564
2568
  opacity: 0.7
2565
2569
  },
2566
2570
  onMouseEnter: (u) => {
@@ -2655,10 +2659,10 @@ function Dt({
2655
2659
  illustration: t,
2656
2660
  title: e,
2657
2661
  description: a,
2658
- action: o,
2659
- style: r
2662
+ action: r,
2663
+ style: o
2660
2664
  }) {
2661
- return /* @__PURE__ */ g(
2665
+ return /* @__PURE__ */ h(
2662
2666
  "div",
2663
2667
  {
2664
2668
  style: {
@@ -2668,7 +2672,7 @@ function Dt({
2668
2672
  gap: "var(--lucent-space-4)",
2669
2673
  padding: "var(--lucent-space-8)",
2670
2674
  textAlign: "center",
2671
- ...r
2675
+ ...o
2672
2676
  },
2673
2677
  children: [
2674
2678
  t != null && /* @__PURE__ */ n(
@@ -2685,11 +2689,11 @@ function Dt({
2685
2689
  children: t
2686
2690
  }
2687
2691
  ),
2688
- /* @__PURE__ */ g("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)" }, children: [
2692
+ /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)" }, children: [
2689
2693
  /* @__PURE__ */ n(z, { as: "h3", size: "lg", weight: "semibold", align: "center", lineHeight: "tight", children: e }),
2690
2694
  a && /* @__PURE__ */ n(z, { size: "sm", color: "secondary", align: "center", lineHeight: "relaxed", children: a })
2691
2695
  ] }),
2692
- o != null && /* @__PURE__ */ n("div", { children: o })
2696
+ r != null && /* @__PURE__ */ n("div", { children: r })
2693
2697
  ]
2694
2698
  }
2695
2699
  );
@@ -2778,8 +2782,8 @@ function $({
2778
2782
  width: t,
2779
2783
  height: e,
2780
2784
  radius: a,
2781
- animate: o,
2782
- style: r
2785
+ animate: r,
2786
+ style: o
2783
2787
  }) {
2784
2788
  return /* @__PURE__ */ n(
2785
2789
  "span",
@@ -2789,11 +2793,11 @@ function $({
2789
2793
  width: typeof t == "number" ? `${t}px` : t,
2790
2794
  height: typeof e == "number" ? `${e}px` : e,
2791
2795
  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,
2796
+ background: r ? "linear-gradient(90deg, var(--lucent-bg-muted) 25%, var(--lucent-bg-subtle) 50%, var(--lucent-bg-muted) 75%)" : "var(--lucent-bg-muted)",
2797
+ backgroundSize: r ? "200% 100%" : void 0,
2798
+ animation: r ? "lucent-skeleton-shimmer 1.6s ease-in-out infinite" : void 0,
2795
2799
  flexShrink: 0,
2796
- ...r
2800
+ ...o
2797
2801
  }
2798
2802
  }
2799
2803
  );
@@ -2802,39 +2806,39 @@ function Vt({
2802
2806
  variant: t = "rectangle",
2803
2807
  width: e = "100%",
2804
2808
  height: a,
2805
- lines: o = 1,
2806
- animate: r = !0,
2807
- radius: s,
2808
- style: c
2809
+ lines: r = 1,
2810
+ animate: o = !0,
2811
+ radius: i,
2812
+ style: l
2809
2813
  }) {
2810
- const l = a ?? _e[t], u = s ?? Ke[t], m = r ? /* @__PURE__ */ n("style", { children: `
2814
+ const s = a ?? _e[t], u = i ?? Ke[t], f = o ? /* @__PURE__ */ n("style", { children: `
2811
2815
  @keyframes lucent-skeleton-shimmer {
2812
2816
  0% { background-position: 200% 0; }
2813
2817
  100% { background-position: -200% 0; }
2814
2818
  }
2815
2819
  ` }) : 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(
2820
+ return t === "text" && r > 1 ? /* @__PURE__ */ h(A, { children: [
2821
+ f,
2822
+ /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)", ...l }, children: Array.from({ length: r }).map((p, m) => /* @__PURE__ */ n(
2819
2823
  $,
2820
2824
  {
2821
- width: h === o - 1 ? "70%" : e,
2822
- height: l,
2825
+ width: m === r - 1 ? "70%" : e,
2826
+ height: s,
2823
2827
  radius: u,
2824
- animate: r
2828
+ animate: o
2825
2829
  },
2826
- h
2830
+ m
2827
2831
  )) })
2828
- ] }) : /* @__PURE__ */ g(A, { children: [
2829
- m,
2832
+ ] }) : /* @__PURE__ */ h(A, { children: [
2833
+ f,
2830
2834
  /* @__PURE__ */ n(
2831
2835
  $,
2832
2836
  {
2833
2837
  width: t === "circle" ? a ?? 40 : e,
2834
- height: l,
2838
+ height: s,
2835
2839
  radius: u,
2836
- animate: r,
2837
- ...c !== void 0 && { style: c }
2840
+ animate: o,
2841
+ ...l !== void 0 && { style: l }
2838
2842
  }
2839
2843
  )
2840
2844
  ] });
@@ -3084,18 +3088,18 @@ const Wt = {
3084
3088
  focusRing: "#f9fafb"
3085
3089
  };
3086
3090
  function Qe(t) {
3087
- return "--lucent-" + t.replace(/([A-Z])/g, (e) => `-${e.toLowerCase()}`).replace(/([a-z])(\d)/g, (e, a, o) => `${a}-${o}`);
3091
+ return "--lucent-" + t.replace(/([A-Z])/g, (e) => `-${e.toLowerCase()}`).replace(/([a-z])(\d)/g, (e, a, r) => `${a}-${r}`);
3088
3092
  }
3089
3093
  function Ze(t, e = ":root") {
3090
- const a = Object.entries(t).map(([o, r]) => ` ${Qe(o)}: ${r};`).join(`
3094
+ const a = Object.entries(t).map(([r, o]) => ` ${Qe(r)}: ${o};`).join(`
3091
3095
  `);
3092
3096
  return `${e} {
3093
3097
  ${a}
3094
3098
  }`;
3095
3099
  }
3096
3100
  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);
3101
+ 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);
3102
+ return 0.2126 * o(e) + 0.7152 * o(a) + 0.0722 * o(r);
3099
3103
  }
3100
3104
  function tt(t) {
3101
3105
  return et(t) < 0.179 ? "#ffffff" : "#000000";
@@ -3109,18 +3113,18 @@ function Pt({
3109
3113
  tokens: e,
3110
3114
  children: a
3111
3115
  }) {
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");
3116
+ const r = X().replace(/:/g, ""), o = t === "dark" ? Je : U, i = e ? { ...o, ...e } : o, l = {
3117
+ ...i,
3118
+ textOnAccent: (e == null ? void 0 : e.textOnAccent) ?? tt(i.accentDefault)
3119
+ }, s = `html { font-size: 13px; }
3120
+ ` + Ze(l, ":root");
3117
3121
  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();
3122
+ let u = document.getElementById(`lucent-tokens-${r}`);
3123
+ return u || (u = document.createElement("style"), u.id = `lucent-tokens-${r}`, document.head.appendChild(u)), u.textContent = s, () => {
3124
+ var f;
3125
+ (f = document.getElementById(`lucent-tokens-${r}`)) == null || f.remove();
3122
3126
  };
3123
- }, [o, l]), /* @__PURE__ */ n(j.Provider, { value: { theme: t, tokens: c }, children: a });
3127
+ }, [r, s]), /* @__PURE__ */ n(j.Provider, { value: { theme: t, tokens: l }, children: a });
3124
3128
  }
3125
3129
  function Ot() {
3126
3130
  return D(j);
@@ -3132,30 +3136,30 @@ const Ht = {
3132
3136
  accentSubtle: "#fef9ec",
3133
3137
  focusRing: "#e9c96b"
3134
3138
  };
3135
- function x(t, e) {
3139
+ function w(t, e) {
3136
3140
  return { field: t, message: e };
3137
3141
  }
3138
3142
  function nt(t) {
3139
3143
  const e = [];
3140
3144
  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 };
3145
+ return { valid: !1, errors: [w("manifest", "Must be a non-null object")] };
3146
+ const a = t, r = ["id", "name", "description", "designIntent", "specVersion"];
3147
+ for (const i of r)
3148
+ (typeof a[i] != "string" || a[i].trim() === "") && e.push(w(i, "Must be a non-empty string"));
3149
+ typeof a.id == "string" && !/^[a-z][a-z0-9-]*$/.test(a.id) && e.push(w("id", 'Must be kebab-case (e.g. "button", "form-field")'));
3150
+ const o = ["atom", "molecule", "block", "flow", "overlay"];
3151
+ return o.includes(a.tier) || e.push(w("tier", `Must be one of: ${o.join(", ")}`)), (typeof a.domain != "string" || a.domain.trim() === "") && e.push(w("domain", "Must be a non-empty string")), Array.isArray(a.props) ? a.props.forEach((i, l) => {
3152
+ const s = i, u = `props[${l}]`;
3153
+ (typeof s.name != "string" || s.name === "") && e.push(w(`${u}.name`, "Must be a non-empty string")), (typeof s.type != "string" || s.type === "") && e.push(w(`${u}.type`, "Must be a non-empty string")), typeof s.required != "boolean" && e.push(w(`${u}.required`, "Must be a boolean")), (typeof s.description != "string" || s.description === "") && e.push(w(`${u}.description`, "Must be a non-empty string"));
3154
+ }) : e.push(w("props", "Must be an array")), Array.isArray(a.usageExamples) ? a.usageExamples.length === 0 ? e.push(w("usageExamples", "Must have at least one example")) : a.usageExamples.forEach((i, l) => {
3155
+ const s = i, u = `usageExamples[${l}]`;
3156
+ (typeof s.title != "string" || s.title === "") && e.push(w(`${u}.title`, "Must be a non-empty string")), (typeof s.code != "string" || s.code === "") && e.push(w(`${u}.code`, "Must be a non-empty string"));
3157
+ }) : e.push(w("usageExamples", "Must be an array")), Array.isArray(a.compositionGraph) || e.push(w("compositionGraph", "Must be an array (empty array is fine for atoms)")), typeof a.specVersion == "string" && !/^\d+\.\d+$/.test(a.specVersion) && e.push(w("specVersion", 'Must be "MAJOR.MINOR" format, e.g. "0.1"')), { valid: e.length === 0, errors: e };
3154
3158
  }
3155
3159
  function Gt(t) {
3156
3160
  const e = nt(t);
3157
3161
  if (!e.valid) {
3158
- const a = e.errors.map((o) => ` ${o.field}: ${o.message}`).join(`
3162
+ const a = e.errors.map((r) => ` ${r.field}: ${r.message}`).join(`
3159
3163
  `);
3160
3164
  throw new Error(`Invalid ComponentManifest:
3161
3165
  ${a}`);
@@ -3205,8 +3209,8 @@ export {
3205
3209
  Wt as SkeletonManifest,
3206
3210
  fe as Spinner,
3207
3211
  pt as SpinnerManifest,
3208
- St as Tag,
3209
- kt as TagManifest,
3212
+ kt as Tag,
3213
+ St as TagManifest,
3210
3214
  z as Text,
3211
3215
  Mt as TextManifest,
3212
3216
  oe as Textarea,