lucent-ui 0.4.2 → 0.5.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.
- package/dist/index.cjs +158 -26
- package/dist/index.d.ts +80 -1
- package/dist/index.js +1799 -956
- package/dist-server/src/components/atoms/CodeBlock/CodeBlock.manifest.js +80 -0
- package/dist-server/src/components/atoms/Slider/Slider.manifest.js +98 -0
- package/dist-server/src/components/atoms/Table/Table.manifest.js +98 -0
- package/dist-server/src/manifest/examples/button.manifest.js +11 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { jsxs as h, jsx as e, Fragment as
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
const
|
|
1
|
+
import { jsxs as h, jsx as e, Fragment as W } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as U, useRef as F, useEffect as L, useState as M, useCallback as Z, useContext as ie, createContext as le, useLayoutEffect as se, useId as ce } from "react";
|
|
3
|
+
const ye = {
|
|
4
4
|
primary: {
|
|
5
5
|
background: "var(--lucent-accent-default)",
|
|
6
6
|
color: "var(--lucent-text-on-accent)",
|
|
7
|
-
border: "1px solid var(--lucent-accent-
|
|
7
|
+
border: "1px solid var(--lucent-accent-border)"
|
|
8
8
|
},
|
|
9
9
|
secondary: {
|
|
10
10
|
background: "var(--lucent-surface-default)",
|
|
@@ -21,18 +21,18 @@ const ge = {
|
|
|
21
21
|
color: "#ffffff",
|
|
22
22
|
border: "1px solid var(--lucent-danger-default)"
|
|
23
23
|
}
|
|
24
|
-
},
|
|
24
|
+
}, xe = {
|
|
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
|
-
},
|
|
29
|
-
({ variant: t = "primary", size: n = "md", loading: a = !1, fullWidth: o = !1, spread: r = !1, leftIcon: i, rightIcon: l, chevron:
|
|
30
|
-
const
|
|
28
|
+
}, we = U(
|
|
29
|
+
({ variant: t = "primary", size: n = "md", loading: a = !1, fullWidth: o = !1, spread: r = !1, leftIcon: i, rightIcon: l, chevron: s = !1, disableHoverStyles: u = !1, bordered: m = !0, children: b, disabled: d, style: p, ...c }, v) => {
|
|
30
|
+
const y = d ?? a;
|
|
31
31
|
return /* @__PURE__ */ h(
|
|
32
32
|
"button",
|
|
33
33
|
{
|
|
34
|
-
ref:
|
|
35
|
-
disabled:
|
|
34
|
+
ref: v,
|
|
35
|
+
disabled: y,
|
|
36
36
|
"aria-busy": a,
|
|
37
37
|
style: {
|
|
38
38
|
display: "inline-flex",
|
|
@@ -44,76 +44,78 @@ const ge = {
|
|
|
44
44
|
lineHeight: 1,
|
|
45
45
|
letterSpacing: "0.01em",
|
|
46
46
|
borderRadius: "var(--lucent-radius-lg)",
|
|
47
|
-
cursor:
|
|
47
|
+
cursor: y ? "not-allowed" : "pointer",
|
|
48
48
|
width: o ? "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
|
-
...
|
|
55
|
-
...
|
|
56
|
-
...
|
|
57
|
-
...
|
|
54
|
+
...xe[n],
|
|
55
|
+
...ye[t],
|
|
56
|
+
...p,
|
|
57
|
+
...y && {
|
|
58
58
|
background: "var(--lucent-bg-muted)",
|
|
59
59
|
color: "var(--lucent-text-disabled)",
|
|
60
60
|
borderColor: "transparent"
|
|
61
|
-
}
|
|
61
|
+
},
|
|
62
|
+
// hide border entirely when bordered prop is false
|
|
63
|
+
...m === !1 && { border: "none" }
|
|
62
64
|
},
|
|
63
|
-
onMouseEnter: (
|
|
64
|
-
var
|
|
65
|
-
!
|
|
65
|
+
onMouseEnter: (w) => {
|
|
66
|
+
var g;
|
|
67
|
+
!y && !u && ke(w.currentTarget, t, m), (g = c.onMouseEnter) == null || g.call(c, w);
|
|
66
68
|
},
|
|
67
|
-
onMouseLeave: (
|
|
68
|
-
var
|
|
69
|
-
!
|
|
69
|
+
onMouseLeave: (w) => {
|
|
70
|
+
var g;
|
|
71
|
+
!y && !u && Se(w.currentTarget, t, m), (g = c.onMouseLeave) == null || g.call(c, w);
|
|
70
72
|
},
|
|
71
|
-
onMouseDown: (
|
|
72
|
-
var
|
|
73
|
-
|
|
73
|
+
onMouseDown: (w) => {
|
|
74
|
+
var g;
|
|
75
|
+
y || (w.currentTarget.style.transform = "scale(0.95)"), (g = c.onMouseDown) == null || g.call(c, w);
|
|
74
76
|
},
|
|
75
|
-
onMouseUp: (
|
|
76
|
-
var
|
|
77
|
-
|
|
77
|
+
onMouseUp: (w) => {
|
|
78
|
+
var g;
|
|
79
|
+
w.currentTarget.style.transform = "", (g = c.onMouseUp) == null || g.call(c, w);
|
|
78
80
|
},
|
|
79
|
-
onFocus: (
|
|
80
|
-
var
|
|
81
|
-
|
|
81
|
+
onFocus: (w) => {
|
|
82
|
+
var g;
|
|
83
|
+
w.currentTarget.style.boxShadow = "0 0 0 3px var(--lucent-accent-subtle)", (g = c.onFocus) == null || g.call(c, w);
|
|
82
84
|
},
|
|
83
|
-
onBlur: (
|
|
84
|
-
var
|
|
85
|
-
|
|
85
|
+
onBlur: (w) => {
|
|
86
|
+
var g;
|
|
87
|
+
w.currentTarget.style.boxShadow = "", (g = c.onBlur) == null || g.call(c, w);
|
|
86
88
|
},
|
|
87
|
-
...
|
|
89
|
+
...c,
|
|
88
90
|
children: [
|
|
89
91
|
i,
|
|
90
|
-
a ? /* @__PURE__ */ e(
|
|
92
|
+
a ? /* @__PURE__ */ e(Ie, {}) : b,
|
|
91
93
|
!a && l,
|
|
92
|
-
!a &&
|
|
94
|
+
!a && s && /* @__PURE__ */ e(Ce, { size: n })
|
|
93
95
|
]
|
|
94
96
|
}
|
|
95
97
|
);
|
|
96
98
|
}
|
|
97
99
|
);
|
|
98
|
-
|
|
99
|
-
function
|
|
100
|
-
n === "primary" ? (t.style.background = "var(--lucent-accent-hover)", t.style.borderColor = "var(--lucent-accent-
|
|
100
|
+
we.displayName = "Button";
|
|
101
|
+
function ke(t, n, a) {
|
|
102
|
+
n === "primary" ? (t.style.background = "var(--lucent-accent-hover)", a !== !1 && (t.style.borderColor = "var(--lucent-accent-border)")) : n === "secondary" ? t.style.background = "var(--lucent-bg-subtle)" : n === "ghost" ? t.style.background = "var(--lucent-bg-muted)" : n === "danger" && (t.style.background = "var(--lucent-danger-hover)", a !== !1 && (t.style.borderColor = "var(--lucent-danger-hover)"));
|
|
101
103
|
}
|
|
102
|
-
function
|
|
103
|
-
n === "primary" ? (t.style.background = "var(--lucent-accent-default)", t.style.borderColor = "var(--lucent-accent-
|
|
104
|
+
function Se(t, n, a) {
|
|
105
|
+
n === "primary" ? (t.style.background = "var(--lucent-accent-default)", a !== !1 && (t.style.borderColor = "var(--lucent-accent-border)")) : n === "secondary" ? t.style.background = "var(--lucent-surface-default)" : n === "ghost" ? t.style.background = "transparent" : n === "danger" && (t.style.background = "var(--lucent-danger-default)", a !== !1 && (t.style.borderColor = "var(--lucent-danger-default)"));
|
|
104
106
|
}
|
|
105
|
-
const
|
|
106
|
-
function
|
|
107
|
-
const n =
|
|
107
|
+
const Te = { sm: 12, md: 14, lg: 16 };
|
|
108
|
+
function Ce({ size: t }) {
|
|
109
|
+
const n = Te[t];
|
|
108
110
|
return /* @__PURE__ */ e("svg", { width: n, height: n, 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__ */ e("polyline", { points: "6 9 12 15 18 9" }) });
|
|
109
111
|
}
|
|
110
|
-
function
|
|
112
|
+
function Ie() {
|
|
111
113
|
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
114
|
/* @__PURE__ */ e("style", { children: "@keyframes lucent-spin { to { transform: rotate(360deg); } }" }),
|
|
113
115
|
/* @__PURE__ */ e("path", { d: "M12 2a10 10 0 0 1 10 10" })
|
|
114
116
|
] });
|
|
115
117
|
}
|
|
116
|
-
const
|
|
118
|
+
const rn = {
|
|
117
119
|
id: "button",
|
|
118
120
|
name: "Button",
|
|
119
121
|
tier: "atom",
|
|
@@ -165,6 +167,13 @@ const Wt = {
|
|
|
165
167
|
default: "false",
|
|
166
168
|
description: "Stretches the button to fill its container width."
|
|
167
169
|
},
|
|
170
|
+
{
|
|
171
|
+
name: "bordered",
|
|
172
|
+
type: "boolean",
|
|
173
|
+
required: !1,
|
|
174
|
+
default: "true",
|
|
175
|
+
description: "When false removes the button border entirely, producing a flat look."
|
|
176
|
+
},
|
|
168
177
|
{
|
|
169
178
|
name: "leftIcon",
|
|
170
179
|
type: "ReactNode",
|
|
@@ -216,6 +225,10 @@ const Wt = {
|
|
|
216
225
|
{
|
|
217
226
|
title: "Full-width submit",
|
|
218
227
|
code: '<Button variant="primary" type="submit" fullWidth>Sign in</Button>'
|
|
228
|
+
},
|
|
229
|
+
{
|
|
230
|
+
title: "Borderless primary",
|
|
231
|
+
code: '<Button variant="primary" bordered={false}>Flat primary</Button>'
|
|
219
232
|
}
|
|
220
233
|
],
|
|
221
234
|
compositionGraph: [],
|
|
@@ -224,14 +237,14 @@ const Wt = {
|
|
|
224
237
|
ariaAttributes: ["aria-disabled", "aria-busy"],
|
|
225
238
|
keyboardInteractions: ["Enter — activates the button", "Space — activates the button"]
|
|
226
239
|
}
|
|
227
|
-
},
|
|
228
|
-
({ label: t, helperText: n, errorText: a, leftElement: o, rightElement: r, id: i, style: l, ...
|
|
229
|
-
const
|
|
240
|
+
}, de = U(
|
|
241
|
+
({ label: t, helperText: n, errorText: a, leftElement: o, rightElement: r, id: i, style: l, ...s }, u) => {
|
|
242
|
+
const m = i ?? `lucent-input-${Math.random().toString(36).slice(2, 7)}`, b = !!a, d = !!s.disabled;
|
|
230
243
|
return /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%" }, children: [
|
|
231
244
|
t && /* @__PURE__ */ e(
|
|
232
245
|
"label",
|
|
233
246
|
{
|
|
234
|
-
htmlFor:
|
|
247
|
+
htmlFor: m,
|
|
235
248
|
style: {
|
|
236
249
|
fontSize: "var(--lucent-font-size-sm)",
|
|
237
250
|
fontWeight: "var(--lucent-font-weight-medium)",
|
|
@@ -253,10 +266,10 @@ const Wt = {
|
|
|
253
266
|
/* @__PURE__ */ e(
|
|
254
267
|
"input",
|
|
255
268
|
{
|
|
256
|
-
ref:
|
|
257
|
-
id:
|
|
258
|
-
"aria-invalid":
|
|
259
|
-
"aria-describedby":
|
|
269
|
+
ref: u,
|
|
270
|
+
id: m,
|
|
271
|
+
"aria-invalid": b,
|
|
272
|
+
"aria-describedby": b ? `${m}-error` : n ? `${m}-helper` : void 0,
|
|
260
273
|
style: {
|
|
261
274
|
width: "100%",
|
|
262
275
|
height: "40px",
|
|
@@ -265,7 +278,7 @@ const Wt = {
|
|
|
265
278
|
fontFamily: "var(--lucent-font-family-base)",
|
|
266
279
|
color: d ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
|
|
267
280
|
background: d ? "var(--lucent-bg-muted)" : "var(--lucent-surface-default)",
|
|
268
|
-
border: `1px solid ${d ? "transparent" :
|
|
281
|
+
border: `1px solid ${d ? "transparent" : b ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"}`,
|
|
269
282
|
cursor: d ? "not-allowed" : void 0,
|
|
270
283
|
borderRadius: "var(--lucent-radius-lg)",
|
|
271
284
|
outline: "none",
|
|
@@ -273,23 +286,23 @@ const Wt = {
|
|
|
273
286
|
transition: "border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
|
|
274
287
|
...l
|
|
275
288
|
},
|
|
276
|
-
onMouseEnter: (
|
|
277
|
-
var
|
|
278
|
-
!
|
|
289
|
+
onMouseEnter: (p) => {
|
|
290
|
+
var c;
|
|
291
|
+
!s.disabled && p.currentTarget !== document.activeElement && (p.currentTarget.style.borderColor = b ? "var(--lucent-danger-default)" : "var(--lucent-border-strong)"), (c = s.onMouseEnter) == null || c.call(s, p);
|
|
279
292
|
},
|
|
280
|
-
onMouseLeave: (
|
|
281
|
-
var
|
|
282
|
-
!
|
|
293
|
+
onMouseLeave: (p) => {
|
|
294
|
+
var c;
|
|
295
|
+
!s.disabled && p.currentTarget !== document.activeElement && (p.currentTarget.style.borderColor = b ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"), (c = s.onMouseLeave) == null || c.call(s, p);
|
|
283
296
|
},
|
|
284
|
-
onFocus: (
|
|
285
|
-
var
|
|
286
|
-
|
|
297
|
+
onFocus: (p) => {
|
|
298
|
+
var c;
|
|
299
|
+
p.currentTarget.style.borderColor = b ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", p.currentTarget.style.boxShadow = `0 0 0 3px ${b ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (c = s.onFocus) == null || c.call(s, p);
|
|
287
300
|
},
|
|
288
|
-
onBlur: (
|
|
289
|
-
var
|
|
290
|
-
|
|
301
|
+
onBlur: (p) => {
|
|
302
|
+
var c;
|
|
303
|
+
p.currentTarget.style.borderColor = b ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", p.currentTarget.style.boxShadow = "none", (c = s.onBlur) == null || c.call(s, p);
|
|
291
304
|
},
|
|
292
|
-
...
|
|
305
|
+
...s
|
|
293
306
|
}
|
|
294
307
|
),
|
|
295
308
|
r && /* @__PURE__ */ e("span", { style: {
|
|
@@ -300,10 +313,10 @@ const Wt = {
|
|
|
300
313
|
alignItems: "center"
|
|
301
314
|
}, children: r })
|
|
302
315
|
] }),
|
|
303
|
-
|
|
316
|
+
b && /* @__PURE__ */ e(
|
|
304
317
|
"span",
|
|
305
318
|
{
|
|
306
|
-
id: `${
|
|
319
|
+
id: `${m}-error`,
|
|
307
320
|
role: "alert",
|
|
308
321
|
style: {
|
|
309
322
|
fontSize: "var(--lucent-font-size-sm)",
|
|
@@ -313,10 +326,10 @@ const Wt = {
|
|
|
313
326
|
children: a
|
|
314
327
|
}
|
|
315
328
|
),
|
|
316
|
-
!
|
|
329
|
+
!b && n && /* @__PURE__ */ e(
|
|
317
330
|
"span",
|
|
318
331
|
{
|
|
319
|
-
id: `${
|
|
332
|
+
id: `${m}-helper`,
|
|
320
333
|
style: {
|
|
321
334
|
fontSize: "var(--lucent-font-size-sm)",
|
|
322
335
|
color: "var(--lucent-text-secondary)",
|
|
@@ -328,8 +341,8 @@ const Wt = {
|
|
|
328
341
|
] });
|
|
329
342
|
}
|
|
330
343
|
);
|
|
331
|
-
|
|
332
|
-
const
|
|
344
|
+
de.displayName = "Input";
|
|
345
|
+
const on = {
|
|
333
346
|
id: "input",
|
|
334
347
|
name: "Input",
|
|
335
348
|
tier: "atom",
|
|
@@ -361,14 +374,14 @@ const Vt = {
|
|
|
361
374
|
ariaAttributes: ["aria-invalid", "aria-describedby", "aria-label"],
|
|
362
375
|
keyboardInteractions: ["Tab — focuses the input"]
|
|
363
376
|
}
|
|
364
|
-
},
|
|
365
|
-
({ label: t, helperText: n, errorText: a, autoResize: o = !1, maxLength: r, showCount: i = !1, id: l, value:
|
|
366
|
-
const
|
|
367
|
-
return
|
|
377
|
+
}, Me = U(
|
|
378
|
+
({ label: t, helperText: n, errorText: a, autoResize: o = !1, maxLength: r, showCount: i = !1, id: l, value: s, onChange: u, style: m, ...b }, d) => {
|
|
379
|
+
const p = F(null), c = d ?? p, v = l ?? `lucent-textarea-${Math.random().toString(36).slice(2, 7)}`, y = !!a, w = typeof s == "string" ? s.length : 0;
|
|
380
|
+
return L(() => {
|
|
368
381
|
if (!o) return;
|
|
369
|
-
const
|
|
370
|
-
|
|
371
|
-
}, [
|
|
382
|
+
const g = c.current;
|
|
383
|
+
g && (g.style.height = "auto", g.style.height = `${g.scrollHeight}px`);
|
|
384
|
+
}, [s, o, c]), /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%" }, children: [
|
|
372
385
|
t && /* @__PURE__ */ e("label", { htmlFor: v, style: {
|
|
373
386
|
fontSize: "var(--lucent-font-size-sm)",
|
|
374
387
|
fontWeight: "var(--lucent-font-weight-medium)",
|
|
@@ -378,13 +391,13 @@ const Vt = {
|
|
|
378
391
|
/* @__PURE__ */ e(
|
|
379
392
|
"textarea",
|
|
380
393
|
{
|
|
381
|
-
ref:
|
|
394
|
+
ref: c,
|
|
382
395
|
id: v,
|
|
383
396
|
maxLength: r,
|
|
384
|
-
value:
|
|
385
|
-
onChange:
|
|
386
|
-
"aria-invalid":
|
|
387
|
-
"aria-describedby":
|
|
397
|
+
value: s,
|
|
398
|
+
onChange: u,
|
|
399
|
+
"aria-invalid": y,
|
|
400
|
+
"aria-describedby": y ? `${v}-error` : n ? `${v}-helper` : void 0,
|
|
388
401
|
style: {
|
|
389
402
|
width: "100%",
|
|
390
403
|
minHeight: "100px",
|
|
@@ -393,47 +406,47 @@ const Vt = {
|
|
|
393
406
|
fontFamily: "var(--lucent-font-family-base)",
|
|
394
407
|
color: "var(--lucent-text-primary)",
|
|
395
408
|
background: "var(--lucent-surface-default)",
|
|
396
|
-
border: `1px solid ${
|
|
409
|
+
border: `1px solid ${y ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"}`,
|
|
397
410
|
borderRadius: "var(--lucent-radius-md)",
|
|
398
411
|
outline: "none",
|
|
399
412
|
resize: o ? "none" : "vertical",
|
|
400
413
|
boxSizing: "border-box",
|
|
401
414
|
lineHeight: "var(--lucent-line-height-base)",
|
|
402
415
|
transition: "border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
|
|
403
|
-
...
|
|
416
|
+
...m
|
|
404
417
|
},
|
|
405
|
-
onFocus: (
|
|
418
|
+
onFocus: (g) => {
|
|
406
419
|
var x;
|
|
407
|
-
|
|
420
|
+
g.currentTarget.style.borderColor = y ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", g.currentTarget.style.boxShadow = `0 0 0 3px ${y ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (x = b.onFocus) == null || x.call(b, g);
|
|
408
421
|
},
|
|
409
|
-
onBlur: (
|
|
422
|
+
onBlur: (g) => {
|
|
410
423
|
var x;
|
|
411
|
-
|
|
424
|
+
g.currentTarget.style.borderColor = y ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", g.currentTarget.style.boxShadow = "none", (x = b.onBlur) == null || x.call(b, g);
|
|
412
425
|
},
|
|
413
|
-
...
|
|
426
|
+
...b
|
|
414
427
|
}
|
|
415
428
|
),
|
|
416
429
|
/* @__PURE__ */ h("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
|
|
417
430
|
/* @__PURE__ */ h("div", { children: [
|
|
418
|
-
|
|
419
|
-
!
|
|
431
|
+
y && /* @__PURE__ */ e("span", { id: `${v}-error`, role: "alert", style: { fontSize: "var(--lucent-font-size-sm)", color: "var(--lucent-danger-text)", fontFamily: "var(--lucent-font-family-base)" }, children: a }),
|
|
432
|
+
!y && n && /* @__PURE__ */ e("span", { id: `${v}-helper`, style: { fontSize: "var(--lucent-font-size-sm)", color: "var(--lucent-text-secondary)", fontFamily: "var(--lucent-font-family-base)" }, children: n })
|
|
420
433
|
] }),
|
|
421
434
|
(i || r) && /* @__PURE__ */ h("span", { style: {
|
|
422
435
|
fontSize: "var(--lucent-font-size-xs)",
|
|
423
|
-
color: r &&
|
|
436
|
+
color: r && w >= r ? "var(--lucent-danger-text)" : "var(--lucent-text-secondary)",
|
|
424
437
|
fontFamily: "var(--lucent-font-family-mono)",
|
|
425
438
|
flexShrink: 0,
|
|
426
439
|
marginLeft: "var(--lucent-space-2)"
|
|
427
440
|
}, children: [
|
|
428
|
-
|
|
441
|
+
w,
|
|
429
442
|
r ? `/${r}` : ""
|
|
430
443
|
] })
|
|
431
444
|
] })
|
|
432
445
|
] });
|
|
433
446
|
}
|
|
434
447
|
);
|
|
435
|
-
|
|
436
|
-
const
|
|
448
|
+
Me.displayName = "Textarea";
|
|
449
|
+
const ln = {
|
|
437
450
|
id: "textarea",
|
|
438
451
|
name: "Textarea",
|
|
439
452
|
tier: "atom",
|
|
@@ -465,19 +478,19 @@ const Ot = {
|
|
|
465
478
|
ariaAttributes: ["aria-multiline", "aria-invalid", "aria-describedby"],
|
|
466
479
|
keyboardInteractions: ["Tab — focuses the textarea"]
|
|
467
480
|
}
|
|
468
|
-
},
|
|
481
|
+
}, ze = {
|
|
469
482
|
neutral: { bg: "var(--lucent-bg-muted)", color: "var(--lucent-text-secondary)", border: "var(--lucent-border-default)" },
|
|
470
483
|
accent: { bg: "var(--lucent-accent-default)", color: "var(--lucent-text-on-accent)", border: "var(--lucent-accent-default)" },
|
|
471
484
|
success: { bg: "var(--lucent-success-subtle)", color: "var(--lucent-success-text)", border: "var(--lucent-success-subtle)" },
|
|
472
485
|
warning: { bg: "var(--lucent-warning-subtle)", color: "var(--lucent-warning-text)", border: "var(--lucent-warning-subtle)" },
|
|
473
486
|
danger: { bg: "var(--lucent-danger-subtle)", color: "var(--lucent-danger-text)", border: "var(--lucent-danger-subtle)" },
|
|
474
487
|
info: { bg: "var(--lucent-info-subtle)", color: "var(--lucent-info-text)", border: "var(--lucent-info-subtle)" }
|
|
475
|
-
},
|
|
488
|
+
}, qe = {
|
|
476
489
|
sm: { fontSize: "var(--lucent-font-size-xs)", padding: "0 var(--lucent-space-2)", height: "18px" },
|
|
477
490
|
md: { fontSize: "var(--lucent-font-size-sm)", padding: "0 var(--lucent-space-2)", height: "22px" }
|
|
478
491
|
};
|
|
479
|
-
function
|
|
480
|
-
const i =
|
|
492
|
+
function sn({ variant: t = "neutral", size: n = "md", dot: a = !1, children: o, style: r }) {
|
|
493
|
+
const i = ze[t], l = qe[n];
|
|
481
494
|
return /* @__PURE__ */ h("span", { style: {
|
|
482
495
|
display: "inline-flex",
|
|
483
496
|
alignItems: "center",
|
|
@@ -506,7 +519,7 @@ function jt({ variant: t = "neutral", size: n = "md", dot: a = !1, children: o,
|
|
|
506
519
|
o
|
|
507
520
|
] });
|
|
508
521
|
}
|
|
509
|
-
const
|
|
522
|
+
const cn = {
|
|
510
523
|
id: "badge",
|
|
511
524
|
name: "Badge",
|
|
512
525
|
tier: "atom",
|
|
@@ -531,27 +544,27 @@ const Ht = {
|
|
|
531
544
|
role: "status",
|
|
532
545
|
notes: "Use aria-label on the parent element when badge meaning depends on context."
|
|
533
546
|
}
|
|
534
|
-
},
|
|
547
|
+
}, Ee = {
|
|
535
548
|
xs: 24,
|
|
536
549
|
sm: 32,
|
|
537
550
|
md: 40,
|
|
538
551
|
lg: 56,
|
|
539
552
|
xl: 80
|
|
540
|
-
},
|
|
553
|
+
}, De = {
|
|
541
554
|
xs: "var(--lucent-font-size-xs)",
|
|
542
555
|
sm: "var(--lucent-font-size-xs)",
|
|
543
556
|
md: "var(--lucent-font-size-sm)",
|
|
544
557
|
lg: "var(--lucent-font-size-lg)",
|
|
545
558
|
xl: "var(--lucent-font-size-xl)"
|
|
546
559
|
};
|
|
547
|
-
function
|
|
560
|
+
function Ae(t, n) {
|
|
548
561
|
var o, r, i;
|
|
549
562
|
if (n) return n.slice(0, 2).toUpperCase();
|
|
550
563
|
const a = t.trim().split(/\s+/);
|
|
551
564
|
return a.length === 1 ? (((o = a[0]) == null ? void 0 : o[0]) ?? "").toUpperCase() : ((((r = a[0]) == null ? void 0 : r[0]) ?? "") + (((i = a[a.length - 1]) == null ? void 0 : i[0]) ?? "")).toUpperCase();
|
|
552
565
|
}
|
|
553
|
-
function
|
|
554
|
-
const l =
|
|
566
|
+
function dn({ src: t, alt: n, size: a = "md", initials: o, style: r, ...i }) {
|
|
567
|
+
const l = Ee[a], s = Ae(n, o), u = {
|
|
555
568
|
width: l,
|
|
556
569
|
height: l,
|
|
557
570
|
borderRadius: "var(--lucent-radius-full)",
|
|
@@ -571,7 +584,7 @@ function Ut({ src: t, alt: n, size: a = "md", initials: o, style: r, ...i }) {
|
|
|
571
584
|
alt: n,
|
|
572
585
|
width: l,
|
|
573
586
|
height: l,
|
|
574
|
-
style: { ...
|
|
587
|
+
style: { ...u, objectFit: "cover" },
|
|
575
588
|
...i
|
|
576
589
|
}
|
|
577
590
|
) : /* @__PURE__ */ e(
|
|
@@ -580,18 +593,18 @@ function Ut({ src: t, alt: n, size: a = "md", initials: o, style: r, ...i }) {
|
|
|
580
593
|
role: "img",
|
|
581
594
|
"aria-label": n,
|
|
582
595
|
style: {
|
|
583
|
-
...
|
|
596
|
+
...u,
|
|
584
597
|
background: "var(--lucent-accent-default)",
|
|
585
598
|
color: "var(--lucent-text-on-accent)",
|
|
586
|
-
fontSize:
|
|
599
|
+
fontSize: De[a],
|
|
587
600
|
fontWeight: "var(--lucent-font-weight-semibold)",
|
|
588
601
|
fontFamily: "var(--lucent-font-family-base)"
|
|
589
602
|
},
|
|
590
|
-
children:
|
|
603
|
+
children: s
|
|
591
604
|
}
|
|
592
605
|
);
|
|
593
606
|
}
|
|
594
|
-
const
|
|
607
|
+
const un = {
|
|
595
608
|
id: "avatar",
|
|
596
609
|
name: "Avatar",
|
|
597
610
|
tier: "atom",
|
|
@@ -617,19 +630,19 @@ const Gt = {
|
|
|
617
630
|
ariaAttributes: ["aria-label"],
|
|
618
631
|
notes: 'When src is present, renders as <img> with alt. When showing initials, renders as <span role="img" aria-label>.'
|
|
619
632
|
}
|
|
620
|
-
},
|
|
633
|
+
}, Fe = {
|
|
621
634
|
xs: 12,
|
|
622
635
|
sm: 16,
|
|
623
636
|
md: 24,
|
|
624
637
|
lg: 36
|
|
625
|
-
},
|
|
638
|
+
}, Be = {
|
|
626
639
|
xs: 2.5,
|
|
627
640
|
sm: 2.5,
|
|
628
641
|
md: 2,
|
|
629
642
|
lg: 2
|
|
630
643
|
};
|
|
631
|
-
function
|
|
632
|
-
const o =
|
|
644
|
+
function Re({ size: t = "md", label: n = "Loading…", color: a }) {
|
|
645
|
+
const o = Fe[t], r = Be[t];
|
|
633
646
|
return /* @__PURE__ */ h("span", { role: "status", "aria-label": n, style: { display: "inline-flex", alignItems: "center", justifyContent: "center" }, children: [
|
|
634
647
|
/* @__PURE__ */ h(
|
|
635
648
|
"svg",
|
|
@@ -658,7 +671,7 @@ function Ae({ size: t = "md", label: n = "Loading…", color: a }) {
|
|
|
658
671
|
/* @__PURE__ */ e("span", { style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0,0,0,0)", whiteSpace: "nowrap" }, children: n })
|
|
659
672
|
] });
|
|
660
673
|
}
|
|
661
|
-
const
|
|
674
|
+
const pn = {
|
|
662
675
|
id: "spinner",
|
|
663
676
|
name: "Spinner",
|
|
664
677
|
tier: "atom",
|
|
@@ -683,7 +696,7 @@ const _t = {
|
|
|
683
696
|
notes: 'The visible SVG is aria-hidden. The label is conveyed via a visually-hidden span inside role="status".'
|
|
684
697
|
}
|
|
685
698
|
};
|
|
686
|
-
function
|
|
699
|
+
function fn({ orientation: t = "horizontal", label: n, spacing: a = "var(--lucent-space-4)", style: o }) {
|
|
687
700
|
return t === "vertical" ? /* @__PURE__ */ e(
|
|
688
701
|
"span",
|
|
689
702
|
{
|
|
@@ -738,7 +751,7 @@ function Yt({ orientation: t = "horizontal", label: n, spacing: a = "var(--lucen
|
|
|
738
751
|
}
|
|
739
752
|
);
|
|
740
753
|
}
|
|
741
|
-
const
|
|
754
|
+
const hn = {
|
|
742
755
|
id: "divider",
|
|
743
756
|
name: "Divider",
|
|
744
757
|
tier: "atom",
|
|
@@ -761,7 +774,7 @@ const Kt = {
|
|
|
761
774
|
role: "separator",
|
|
762
775
|
ariaAttributes: ["aria-orientation", "aria-label"]
|
|
763
776
|
}
|
|
764
|
-
},
|
|
777
|
+
}, Ne = { sm: 14, md: 16 }, Le = `
|
|
765
778
|
@keyframes lucent-cb-pop {
|
|
766
779
|
0% { transform: scale(1); }
|
|
767
780
|
35% { transform: scale(0.82); }
|
|
@@ -773,7 +786,7 @@ const Kt = {
|
|
|
773
786
|
60% { transform: scale(1.15) rotate(2deg); }
|
|
774
787
|
100% { opacity: 1; transform: scale(1) rotate(0deg); }
|
|
775
788
|
}
|
|
776
|
-
`,
|
|
789
|
+
`, ue = U(
|
|
777
790
|
({
|
|
778
791
|
label: t,
|
|
779
792
|
size: n = "md",
|
|
@@ -782,41 +795,45 @@ const Kt = {
|
|
|
782
795
|
defaultChecked: r,
|
|
783
796
|
disabled: i,
|
|
784
797
|
id: l,
|
|
785
|
-
onChange:
|
|
786
|
-
style:
|
|
787
|
-
...
|
|
788
|
-
},
|
|
789
|
-
const d = F(null),
|
|
790
|
-
|
|
791
|
-
!i && x.current !==
|
|
792
|
-
}, [
|
|
793
|
-
const
|
|
794
|
-
(
|
|
795
|
-
d.current =
|
|
798
|
+
onChange: s,
|
|
799
|
+
style: u,
|
|
800
|
+
...m
|
|
801
|
+
}, b) => {
|
|
802
|
+
const d = F(null), p = l ?? `lucent-checkbox-${Math.random().toString(36).slice(2, 7)}`, c = Ne[n], v = o !== void 0, [y, w] = M(r ?? !1), g = v ? !!o : y, x = F(g), [I, k] = M(0);
|
|
803
|
+
L(() => {
|
|
804
|
+
!i && x.current !== g && (x.current = g, k((C) => C + 1));
|
|
805
|
+
}, [g, i]);
|
|
806
|
+
const f = Z(
|
|
807
|
+
(C) => {
|
|
808
|
+
d.current = C, typeof b == "function" ? b(C) : b && (b.current = C);
|
|
796
809
|
},
|
|
797
|
-
[
|
|
810
|
+
[b]
|
|
798
811
|
);
|
|
799
|
-
|
|
812
|
+
L(() => {
|
|
800
813
|
d.current && (d.current.indeterminate = a);
|
|
801
814
|
}, [a]);
|
|
802
|
-
const
|
|
803
|
-
v ||
|
|
804
|
-
}, D = i ? "var(--lucent-text-disabled)" : "var(--lucent-text-on-accent)",
|
|
805
|
-
width:
|
|
806
|
-
height:
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
815
|
+
const S = (C) => {
|
|
816
|
+
v || w(C.target.checked), s == null || s(C);
|
|
817
|
+
}, D = i ? "var(--lucent-text-disabled)" : "var(--lucent-text-on-accent)", T = {
|
|
818
|
+
width: c,
|
|
819
|
+
height: c,
|
|
820
|
+
// fixed corner so global radius overrides (e.g. via customizer) don't
|
|
821
|
+
// turn checkboxes into circles. the design spec keeps them slightly
|
|
822
|
+
// rounded regardless of theming.
|
|
823
|
+
// bumping up a bit to keep the box from feeling too sharp.
|
|
824
|
+
borderRadius: "4px",
|
|
825
|
+
border: `1.5px solid ${i ? "transparent" : g || a ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)"}`,
|
|
826
|
+
background: i ? "var(--lucent-bg-muted)" : g || a ? "var(--lucent-accent-default)" : "var(--lucent-surface-default)",
|
|
810
827
|
display: "inline-flex",
|
|
811
828
|
alignItems: "center",
|
|
812
829
|
justifyContent: "center",
|
|
813
830
|
flexShrink: 0,
|
|
814
831
|
transition: "background var(--lucent-duration-fast) var(--lucent-easing-default), border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
|
|
815
832
|
// Re-key forces the animation to restart on every toggle.
|
|
816
|
-
animation:
|
|
833
|
+
animation: I > 0 ? "lucent-cb-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0
|
|
817
834
|
};
|
|
818
|
-
return /* @__PURE__ */ h(
|
|
819
|
-
/* @__PURE__ */ e("style", { children:
|
|
835
|
+
return /* @__PURE__ */ h(W, { children: [
|
|
836
|
+
/* @__PURE__ */ e("style", { children: Le }),
|
|
820
837
|
/* @__PURE__ */ h(
|
|
821
838
|
"label",
|
|
822
839
|
{
|
|
@@ -829,28 +846,28 @@ const Kt = {
|
|
|
829
846
|
fontSize: n === "sm" ? "var(--lucent-font-size-sm)" : "var(--lucent-font-size-md)",
|
|
830
847
|
color: i ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
|
|
831
848
|
userSelect: "none",
|
|
832
|
-
...
|
|
849
|
+
...u
|
|
833
850
|
},
|
|
834
851
|
children: [
|
|
835
852
|
/* @__PURE__ */ e(
|
|
836
853
|
"input",
|
|
837
854
|
{
|
|
838
|
-
ref:
|
|
855
|
+
ref: f,
|
|
839
856
|
type: "checkbox",
|
|
840
|
-
id:
|
|
841
|
-
checked: v ? o :
|
|
857
|
+
id: p,
|
|
858
|
+
checked: v ? o : y,
|
|
842
859
|
disabled: i,
|
|
843
|
-
onChange:
|
|
860
|
+
onChange: S,
|
|
844
861
|
style: { position: "absolute", opacity: 0, width: 0, height: 0, margin: 0, pointerEvents: "none" },
|
|
845
|
-
...
|
|
862
|
+
...m
|
|
846
863
|
}
|
|
847
864
|
),
|
|
848
|
-
/* @__PURE__ */ h("span", { "aria-hidden": !0, style:
|
|
849
|
-
|
|
865
|
+
/* @__PURE__ */ h("span", { "aria-hidden": !0, style: T, children: [
|
|
866
|
+
g && !a && /* @__PURE__ */ e(
|
|
850
867
|
"svg",
|
|
851
868
|
{
|
|
852
|
-
width:
|
|
853
|
-
height:
|
|
869
|
+
width: c - 4,
|
|
870
|
+
height: c - 4,
|
|
854
871
|
viewBox: "0 0 10 10",
|
|
855
872
|
fill: "none",
|
|
856
873
|
style: { animation: "lucent-cb-mark 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" },
|
|
@@ -860,15 +877,15 @@ const Kt = {
|
|
|
860
877
|
a && /* @__PURE__ */ e(
|
|
861
878
|
"svg",
|
|
862
879
|
{
|
|
863
|
-
width:
|
|
864
|
-
height:
|
|
880
|
+
width: c - 4,
|
|
881
|
+
height: c - 4,
|
|
865
882
|
viewBox: "0 0 10 10",
|
|
866
883
|
fill: "none",
|
|
867
884
|
style: { animation: "lucent-cb-mark 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" },
|
|
868
885
|
children: /* @__PURE__ */ e("path", { d: "M2 5H8", stroke: D, strokeWidth: 1.5, strokeLinecap: "round" })
|
|
869
886
|
}
|
|
870
887
|
)
|
|
871
|
-
] },
|
|
888
|
+
] }, I),
|
|
872
889
|
t
|
|
873
890
|
]
|
|
874
891
|
}
|
|
@@ -876,8 +893,8 @@ const Kt = {
|
|
|
876
893
|
] });
|
|
877
894
|
}
|
|
878
895
|
);
|
|
879
|
-
|
|
880
|
-
const
|
|
896
|
+
ue.displayName = "Checkbox";
|
|
897
|
+
const mn = {
|
|
881
898
|
id: "checkbox",
|
|
882
899
|
name: "Checkbox",
|
|
883
900
|
tier: "atom",
|
|
@@ -946,7 +963,7 @@ const Xt = {
|
|
|
946
963
|
ariaAttributes: ["aria-checked", "aria-disabled"],
|
|
947
964
|
keyboardInteractions: ["Space — toggles checked state"]
|
|
948
965
|
}
|
|
949
|
-
},
|
|
966
|
+
}, $e = `
|
|
950
967
|
@keyframes lucent-radio-pop {
|
|
951
968
|
0% { transform: scale(1); }
|
|
952
969
|
35% { transform: scale(0.82); }
|
|
@@ -958,8 +975,8 @@ const Xt = {
|
|
|
958
975
|
60% { transform: scale(1.2); }
|
|
959
976
|
100% { opacity: 1; transform: scale(1); }
|
|
960
977
|
}
|
|
961
|
-
`,
|
|
962
|
-
function
|
|
978
|
+
`, pe = le(null);
|
|
979
|
+
function Pe({
|
|
963
980
|
name: t,
|
|
964
981
|
value: n,
|
|
965
982
|
onChange: a,
|
|
@@ -968,7 +985,7 @@ function Be({
|
|
|
968
985
|
label: i,
|
|
969
986
|
children: l
|
|
970
987
|
}) {
|
|
971
|
-
return /* @__PURE__ */ e(
|
|
988
|
+
return /* @__PURE__ */ e(pe.Provider, { value: { name: t, value: n, onChange: a, disabled: o ?? !1 }, children: /* @__PURE__ */ e(
|
|
972
989
|
"div",
|
|
973
990
|
{
|
|
974
991
|
role: "radiogroup",
|
|
@@ -983,27 +1000,27 @@ function Be({
|
|
|
983
1000
|
}
|
|
984
1001
|
) });
|
|
985
1002
|
}
|
|
986
|
-
const
|
|
987
|
-
function
|
|
988
|
-
const
|
|
989
|
-
|
|
990
|
-
!d &&
|
|
991
|
-
}, [
|
|
992
|
-
const
|
|
993
|
-
|
|
994
|
-
},
|
|
995
|
-
width:
|
|
996
|
-
height:
|
|
1003
|
+
const We = { sm: 14, md: 16 };
|
|
1004
|
+
function gn({ value: t, label: n, size: a = "md", disabled: o, id: r, onChange: i, checked: l, ...s }) {
|
|
1005
|
+
const u = ie(pe), m = r ?? `lucent-radio-${Math.random().toString(36).slice(2, 7)}`, b = We[a], d = o ?? (u == null ? void 0 : u.disabled) ?? !1, p = u ? u.value === t : !!l, c = F(p), [v, y] = M(0);
|
|
1006
|
+
L(() => {
|
|
1007
|
+
!d && c.current !== p && (c.current = p, y((I) => I + 1));
|
|
1008
|
+
}, [p, d]);
|
|
1009
|
+
const w = (I) => {
|
|
1010
|
+
u == null || u.onChange(t), i == null || i(I);
|
|
1011
|
+
}, g = {
|
|
1012
|
+
width: b / 2,
|
|
1013
|
+
height: b / 2,
|
|
997
1014
|
borderRadius: "50%",
|
|
998
1015
|
background: d ? "var(--lucent-text-disabled)" : "var(--lucent-text-on-accent)",
|
|
999
|
-
animation:
|
|
1000
|
-
opacity:
|
|
1016
|
+
animation: p ? "lucent-radio-dot 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0,
|
|
1017
|
+
opacity: p ? 1 : 0
|
|
1001
1018
|
}, x = {
|
|
1002
|
-
width:
|
|
1003
|
-
height:
|
|
1019
|
+
width: b,
|
|
1020
|
+
height: b,
|
|
1004
1021
|
borderRadius: "50%",
|
|
1005
|
-
border: `1.5px solid ${d ? "transparent" :
|
|
1006
|
-
background: d ? "var(--lucent-bg-muted)" :
|
|
1022
|
+
border: `1.5px solid ${d ? "transparent" : p ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)"}`,
|
|
1023
|
+
background: d ? "var(--lucent-bg-muted)" : p ? "var(--lucent-accent-default)" : "var(--lucent-surface-default)",
|
|
1007
1024
|
display: "inline-flex",
|
|
1008
1025
|
alignItems: "center",
|
|
1009
1026
|
justifyContent: "center",
|
|
@@ -1011,8 +1028,8 @@ function Jt({ value: t, label: n, size: a = "md", disabled: o, id: r, onChange:
|
|
|
1011
1028
|
transition: "background var(--lucent-duration-fast) var(--lucent-easing-default), border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
|
|
1012
1029
|
animation: v > 0 ? "lucent-radio-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0
|
|
1013
1030
|
};
|
|
1014
|
-
return /* @__PURE__ */ h(
|
|
1015
|
-
/* @__PURE__ */ e("style", { children:
|
|
1031
|
+
return /* @__PURE__ */ h(W, { children: [
|
|
1032
|
+
/* @__PURE__ */ e("style", { children: $e }),
|
|
1016
1033
|
/* @__PURE__ */ h(
|
|
1017
1034
|
"label",
|
|
1018
1035
|
{
|
|
@@ -1031,31 +1048,31 @@ function Jt({ value: t, label: n, size: a = "md", disabled: o, id: r, onChange:
|
|
|
1031
1048
|
"input",
|
|
1032
1049
|
{
|
|
1033
1050
|
type: "radio",
|
|
1034
|
-
id:
|
|
1051
|
+
id: m,
|
|
1035
1052
|
value: t,
|
|
1036
|
-
name: (
|
|
1037
|
-
checked:
|
|
1053
|
+
name: (u == null ? void 0 : u.name) ?? s.name,
|
|
1054
|
+
checked: p,
|
|
1038
1055
|
disabled: d,
|
|
1039
|
-
onChange:
|
|
1056
|
+
onChange: w,
|
|
1040
1057
|
style: { position: "absolute", opacity: 0, width: 0, height: 0, margin: 0, pointerEvents: "none" },
|
|
1041
|
-
...
|
|
1058
|
+
...s
|
|
1042
1059
|
}
|
|
1043
1060
|
),
|
|
1044
|
-
/* @__PURE__ */ e("span", { "aria-hidden": !0, style: x, children: /* @__PURE__ */ e("span", { style:
|
|
1061
|
+
/* @__PURE__ */ e("span", { "aria-hidden": !0, style: x, children: /* @__PURE__ */ e("span", { style: g }) }, v),
|
|
1045
1062
|
n
|
|
1046
1063
|
]
|
|
1047
1064
|
}
|
|
1048
1065
|
)
|
|
1049
1066
|
] });
|
|
1050
1067
|
}
|
|
1051
|
-
function
|
|
1068
|
+
function bn({
|
|
1052
1069
|
defaultValue: t = "",
|
|
1053
1070
|
onChange: n,
|
|
1054
1071
|
...a
|
|
1055
1072
|
}) {
|
|
1056
|
-
const [o, r] =
|
|
1073
|
+
const [o, r] = M(t);
|
|
1057
1074
|
return /* @__PURE__ */ e(
|
|
1058
|
-
|
|
1075
|
+
Pe,
|
|
1059
1076
|
{
|
|
1060
1077
|
...a,
|
|
1061
1078
|
value: o,
|
|
@@ -1065,7 +1082,7 @@ function Qt({
|
|
|
1065
1082
|
}
|
|
1066
1083
|
);
|
|
1067
1084
|
}
|
|
1068
|
-
const
|
|
1085
|
+
const vn = {
|
|
1069
1086
|
id: "radio",
|
|
1070
1087
|
name: "Radio",
|
|
1071
1088
|
tier: "atom",
|
|
@@ -1142,11 +1159,11 @@ const Zt = {
|
|
|
1142
1159
|
"Space — selects the focused radio"
|
|
1143
1160
|
]
|
|
1144
1161
|
}
|
|
1145
|
-
},
|
|
1162
|
+
}, Ve = {
|
|
1146
1163
|
sm: { track: [28, 16], thumb: 12 },
|
|
1147
1164
|
md: { track: [36, 20], thumb: 16 },
|
|
1148
1165
|
lg: { track: [44, 24], thumb: 20 }
|
|
1149
|
-
},
|
|
1166
|
+
}, ee = "cubic-bezier(0.34, 1.56, 0.64, 1)", Oe = `
|
|
1150
1167
|
@keyframes lucent-toggle-pop {
|
|
1151
1168
|
0% { transform: scale(1); }
|
|
1152
1169
|
35% { transform: scale(0.94); }
|
|
@@ -1154,7 +1171,7 @@ const Zt = {
|
|
|
1154
1171
|
100% { transform: scale(1); }
|
|
1155
1172
|
}
|
|
1156
1173
|
`;
|
|
1157
|
-
function
|
|
1174
|
+
function yn({
|
|
1158
1175
|
label: t,
|
|
1159
1176
|
size: n = "md",
|
|
1160
1177
|
checked: a,
|
|
@@ -1162,18 +1179,18 @@ function en({
|
|
|
1162
1179
|
disabled: r,
|
|
1163
1180
|
id: i,
|
|
1164
1181
|
onChange: l,
|
|
1165
|
-
style:
|
|
1166
|
-
...
|
|
1182
|
+
style: s,
|
|
1183
|
+
...u
|
|
1167
1184
|
}) {
|
|
1168
|
-
const
|
|
1169
|
-
|
|
1170
|
-
!r && v.current !==
|
|
1171
|
-
}, [
|
|
1172
|
-
const { track: [
|
|
1173
|
-
|
|
1185
|
+
const m = i ?? `lucent-toggle-${Math.random().toString(36).slice(2, 7)}`, b = a !== void 0, [d, p] = M(o ?? !1), c = b ? !!a : d, v = F(c), [y, w] = M(0);
|
|
1186
|
+
L(() => {
|
|
1187
|
+
!r && v.current !== c && (v.current = c, w((S) => S + 1));
|
|
1188
|
+
}, [c, r]);
|
|
1189
|
+
const { track: [g, x], thumb: I } = Ve[n], k = c ? g - I - 2 : 2, f = (S) => {
|
|
1190
|
+
b || p(S.target.checked), l == null || l(S);
|
|
1174
1191
|
};
|
|
1175
|
-
return /* @__PURE__ */ h(
|
|
1176
|
-
/* @__PURE__ */ e("style", { children:
|
|
1192
|
+
return /* @__PURE__ */ h(W, { children: [
|
|
1193
|
+
/* @__PURE__ */ e("style", { children: Oe }),
|
|
1177
1194
|
/* @__PURE__ */ h(
|
|
1178
1195
|
"label",
|
|
1179
1196
|
{
|
|
@@ -1186,7 +1203,7 @@ function en({
|
|
|
1186
1203
|
fontSize: "var(--lucent-font-size-md)",
|
|
1187
1204
|
color: r ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
|
|
1188
1205
|
userSelect: "none",
|
|
1189
|
-
...
|
|
1206
|
+
...s
|
|
1190
1207
|
},
|
|
1191
1208
|
children: [
|
|
1192
1209
|
/* @__PURE__ */ e(
|
|
@@ -1194,13 +1211,13 @@ function en({
|
|
|
1194
1211
|
{
|
|
1195
1212
|
type: "checkbox",
|
|
1196
1213
|
role: "switch",
|
|
1197
|
-
id:
|
|
1198
|
-
checked:
|
|
1214
|
+
id: m,
|
|
1215
|
+
checked: b ? a : d,
|
|
1199
1216
|
disabled: r,
|
|
1200
|
-
onChange:
|
|
1201
|
-
"aria-checked":
|
|
1217
|
+
onChange: f,
|
|
1218
|
+
"aria-checked": c,
|
|
1202
1219
|
style: { position: "absolute", opacity: 0, width: 0, height: 0, margin: 0, pointerEvents: "none" },
|
|
1203
|
-
...
|
|
1220
|
+
...u
|
|
1204
1221
|
}
|
|
1205
1222
|
),
|
|
1206
1223
|
/* @__PURE__ */ e(
|
|
@@ -1209,13 +1226,13 @@ function en({
|
|
|
1209
1226
|
"aria-hidden": !0,
|
|
1210
1227
|
style: {
|
|
1211
1228
|
position: "relative",
|
|
1212
|
-
width:
|
|
1229
|
+
width: g,
|
|
1213
1230
|
height: x,
|
|
1214
1231
|
borderRadius: x / 2,
|
|
1215
|
-
background: r ? "var(--lucent-bg-muted)" :
|
|
1232
|
+
background: r ? "var(--lucent-bg-muted)" : c ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)",
|
|
1216
1233
|
flexShrink: 0,
|
|
1217
1234
|
transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)",
|
|
1218
|
-
animation:
|
|
1235
|
+
animation: y > 0 ? `lucent-toggle-pop 240ms ${ee} forwards` : void 0
|
|
1219
1236
|
},
|
|
1220
1237
|
children: /* @__PURE__ */ e(
|
|
1221
1238
|
"span",
|
|
@@ -1223,18 +1240,18 @@ function en({
|
|
|
1223
1240
|
style: {
|
|
1224
1241
|
position: "absolute",
|
|
1225
1242
|
top: 2,
|
|
1226
|
-
left:
|
|
1227
|
-
width:
|
|
1228
|
-
height:
|
|
1243
|
+
left: k,
|
|
1244
|
+
width: I,
|
|
1245
|
+
height: I,
|
|
1229
1246
|
borderRadius: "50%",
|
|
1230
1247
|
background: "#ffffff",
|
|
1231
1248
|
boxShadow: "0 1px 3px rgb(0 0 0 / 0.2)",
|
|
1232
|
-
transition: `left 260ms ${
|
|
1249
|
+
transition: `left 260ms ${ee}`
|
|
1233
1250
|
}
|
|
1234
1251
|
}
|
|
1235
1252
|
)
|
|
1236
1253
|
},
|
|
1237
|
-
|
|
1254
|
+
y
|
|
1238
1255
|
),
|
|
1239
1256
|
t
|
|
1240
1257
|
]
|
|
@@ -1242,7 +1259,7 @@ function en({
|
|
|
1242
1259
|
)
|
|
1243
1260
|
] });
|
|
1244
1261
|
}
|
|
1245
|
-
const
|
|
1262
|
+
const xn = {
|
|
1246
1263
|
id: "toggle",
|
|
1247
1264
|
name: "Toggle",
|
|
1248
1265
|
tier: "atom",
|
|
@@ -1306,17 +1323,17 @@ const tn = {
|
|
|
1306
1323
|
ariaAttributes: ["aria-checked", "aria-disabled"],
|
|
1307
1324
|
keyboardInteractions: ["Space — toggles the switch state"]
|
|
1308
1325
|
}
|
|
1309
|
-
},
|
|
1326
|
+
}, He = {
|
|
1310
1327
|
sm: "32px",
|
|
1311
1328
|
md: "40px",
|
|
1312
1329
|
lg: "46px"
|
|
1313
|
-
},
|
|
1330
|
+
}, je = {
|
|
1314
1331
|
sm: "var(--lucent-font-size-sm)",
|
|
1315
1332
|
md: "var(--lucent-font-size-md)",
|
|
1316
1333
|
lg: "var(--lucent-font-size-lg)"
|
|
1317
|
-
},
|
|
1318
|
-
({ options: t, size: n = "md", label: a, helperText: o, errorText: r, placeholder: i, disabled: l, id:
|
|
1319
|
-
const d =
|
|
1334
|
+
}, Ue = U(
|
|
1335
|
+
({ options: t, size: n = "md", label: a, helperText: o, errorText: r, placeholder: i, disabled: l, id: s, style: u, ...m }, b) => {
|
|
1336
|
+
const d = s ?? `lucent-select-${Math.random().toString(36).slice(2, 7)}`, p = !!r;
|
|
1320
1337
|
return /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%" }, children: [
|
|
1321
1338
|
a && /* @__PURE__ */ e(
|
|
1322
1339
|
"label",
|
|
@@ -1335,48 +1352,48 @@ const tn = {
|
|
|
1335
1352
|
/* @__PURE__ */ h(
|
|
1336
1353
|
"select",
|
|
1337
1354
|
{
|
|
1338
|
-
ref:
|
|
1355
|
+
ref: b,
|
|
1339
1356
|
id: d,
|
|
1340
1357
|
disabled: l,
|
|
1341
|
-
"aria-invalid":
|
|
1342
|
-
"aria-describedby":
|
|
1358
|
+
"aria-invalid": p,
|
|
1359
|
+
"aria-describedby": p ? `${d}-error` : o ? `${d}-helper` : void 0,
|
|
1343
1360
|
style: {
|
|
1344
1361
|
width: "100%",
|
|
1345
|
-
height:
|
|
1362
|
+
height: He[n],
|
|
1346
1363
|
padding: "0 var(--lucent-space-8) 0 var(--lucent-space-3)",
|
|
1347
|
-
fontSize:
|
|
1364
|
+
fontSize: je[n],
|
|
1348
1365
|
fontFamily: "var(--lucent-font-family-base)",
|
|
1349
1366
|
color: "var(--lucent-text-primary)",
|
|
1350
1367
|
background: "var(--lucent-surface-default)",
|
|
1351
|
-
border: `1px solid ${
|
|
1368
|
+
border: `1px solid ${p ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"}`,
|
|
1352
1369
|
borderRadius: "var(--lucent-radius-lg)",
|
|
1353
1370
|
outline: "none",
|
|
1354
1371
|
boxSizing: "border-box",
|
|
1355
1372
|
appearance: "none",
|
|
1356
1373
|
cursor: l ? "not-allowed" : "pointer",
|
|
1357
1374
|
transition: "border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
|
|
1358
|
-
...
|
|
1375
|
+
...u
|
|
1359
1376
|
},
|
|
1360
|
-
onMouseEnter: (
|
|
1377
|
+
onMouseEnter: (c) => {
|
|
1361
1378
|
var v;
|
|
1362
|
-
!l &&
|
|
1379
|
+
!l && c.currentTarget !== document.activeElement && (c.currentTarget.style.borderColor = p ? "var(--lucent-danger-default)" : "var(--lucent-border-strong)"), (v = m.onMouseEnter) == null || v.call(m, c);
|
|
1363
1380
|
},
|
|
1364
|
-
onMouseLeave: (
|
|
1381
|
+
onMouseLeave: (c) => {
|
|
1365
1382
|
var v;
|
|
1366
|
-
!l &&
|
|
1383
|
+
!l && c.currentTarget !== document.activeElement && (c.currentTarget.style.borderColor = p ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"), (v = m.onMouseLeave) == null || v.call(m, c);
|
|
1367
1384
|
},
|
|
1368
|
-
onFocus: (
|
|
1385
|
+
onFocus: (c) => {
|
|
1369
1386
|
var v;
|
|
1370
|
-
|
|
1387
|
+
c.currentTarget.style.borderColor = p ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", c.currentTarget.style.boxShadow = `0 0 0 3px ${p ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (v = m.onFocus) == null || v.call(m, c);
|
|
1371
1388
|
},
|
|
1372
|
-
onBlur: (
|
|
1389
|
+
onBlur: (c) => {
|
|
1373
1390
|
var v;
|
|
1374
|
-
|
|
1391
|
+
c.currentTarget.style.borderColor = p ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", c.currentTarget.style.boxShadow = "none", (v = m.onBlur) == null || v.call(m, c);
|
|
1375
1392
|
},
|
|
1376
|
-
...
|
|
1393
|
+
...m,
|
|
1377
1394
|
children: [
|
|
1378
1395
|
i && /* @__PURE__ */ e("option", { value: "", disabled: !0, children: i }),
|
|
1379
|
-
t.map((
|
|
1396
|
+
t.map((c) => /* @__PURE__ */ e("option", { value: c.value, disabled: c.disabled, children: c.label }, c.value))
|
|
1380
1397
|
]
|
|
1381
1398
|
}
|
|
1382
1399
|
),
|
|
@@ -1396,7 +1413,7 @@ const tn = {
|
|
|
1396
1413
|
}
|
|
1397
1414
|
)
|
|
1398
1415
|
] }),
|
|
1399
|
-
|
|
1416
|
+
p && /* @__PURE__ */ e(
|
|
1400
1417
|
"span",
|
|
1401
1418
|
{
|
|
1402
1419
|
id: `${d}-error`,
|
|
@@ -1409,7 +1426,7 @@ const tn = {
|
|
|
1409
1426
|
children: r
|
|
1410
1427
|
}
|
|
1411
1428
|
),
|
|
1412
|
-
!
|
|
1429
|
+
!p && o && /* @__PURE__ */ e(
|
|
1413
1430
|
"span",
|
|
1414
1431
|
{
|
|
1415
1432
|
id: `${d}-helper`,
|
|
@@ -1424,8 +1441,8 @@ const tn = {
|
|
|
1424
1441
|
] });
|
|
1425
1442
|
}
|
|
1426
1443
|
);
|
|
1427
|
-
|
|
1428
|
-
const
|
|
1444
|
+
Ue.displayName = "Select";
|
|
1445
|
+
const wn = {
|
|
1429
1446
|
id: "select",
|
|
1430
1447
|
name: "Select",
|
|
1431
1448
|
tier: "atom",
|
|
@@ -1523,19 +1540,19 @@ const nn = {
|
|
|
1523
1540
|
"Escape — closes the list"
|
|
1524
1541
|
]
|
|
1525
1542
|
}
|
|
1526
|
-
},
|
|
1543
|
+
}, Ge = {
|
|
1527
1544
|
neutral: { bg: "var(--lucent-bg-muted)", color: "var(--lucent-text-secondary)", border: "var(--lucent-border-default)", dismissHover: "var(--lucent-border-strong)" },
|
|
1528
1545
|
accent: { bg: "var(--lucent-accent-subtle)", color: "var(--lucent-accent-active)", border: "var(--lucent-accent-subtle)", dismissHover: "var(--lucent-accent-default)" },
|
|
1529
1546
|
success: { bg: "var(--lucent-success-subtle)", color: "var(--lucent-success-text)", border: "var(--lucent-success-subtle)", dismissHover: "var(--lucent-success-default)" },
|
|
1530
1547
|
warning: { bg: "var(--lucent-warning-subtle)", color: "var(--lucent-warning-text)", border: "var(--lucent-warning-subtle)", dismissHover: "var(--lucent-warning-default)" },
|
|
1531
1548
|
danger: { bg: "var(--lucent-danger-subtle)", color: "var(--lucent-danger-text)", border: "var(--lucent-danger-subtle)", dismissHover: "var(--lucent-danger-default)" },
|
|
1532
1549
|
info: { bg: "var(--lucent-info-subtle)", color: "var(--lucent-info-text)", border: "var(--lucent-info-subtle)", dismissHover: "var(--lucent-info-default)" }
|
|
1533
|
-
},
|
|
1550
|
+
}, _e = {
|
|
1534
1551
|
sm: { fontSize: "var(--lucent-font-size-xs)", height: "20px", padding: "0 var(--lucent-space-2)", iconSize: 10, gap: "var(--lucent-space-1)" },
|
|
1535
1552
|
md: { fontSize: "var(--lucent-font-size-sm)", height: "24px", padding: "0 var(--lucent-space-2)", iconSize: 12, gap: "var(--lucent-space-1)" }
|
|
1536
1553
|
};
|
|
1537
|
-
function
|
|
1538
|
-
const i =
|
|
1554
|
+
function kn({ children: t, variant: n = "neutral", size: a = "md", onDismiss: o, disabled: r }) {
|
|
1555
|
+
const i = Ge[n], l = _e[a];
|
|
1539
1556
|
return /* @__PURE__ */ h(
|
|
1540
1557
|
"span",
|
|
1541
1558
|
{
|
|
@@ -1581,11 +1598,11 @@ function an({ children: t, variant: n = "neutral", size: a = "md", onDismiss: o,
|
|
|
1581
1598
|
flexShrink: 0,
|
|
1582
1599
|
lineHeight: 1
|
|
1583
1600
|
},
|
|
1584
|
-
onMouseEnter: (
|
|
1585
|
-
r || (
|
|
1601
|
+
onMouseEnter: (s) => {
|
|
1602
|
+
r || (s.currentTarget.style.background = i.dismissHover + "33");
|
|
1586
1603
|
},
|
|
1587
|
-
onMouseLeave: (
|
|
1588
|
-
|
|
1604
|
+
onMouseLeave: (s) => {
|
|
1605
|
+
s.currentTarget.style.background = "transparent";
|
|
1589
1606
|
},
|
|
1590
1607
|
children: /* @__PURE__ */ e("svg", { width: l.iconSize, height: l.iconSize, viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", children: /* @__PURE__ */ e("path", { d: "M2 2L8 8M8 2L2 8" }) })
|
|
1591
1608
|
}
|
|
@@ -1594,7 +1611,7 @@ function an({ children: t, variant: n = "neutral", size: a = "md", onDismiss: o,
|
|
|
1594
1611
|
}
|
|
1595
1612
|
);
|
|
1596
1613
|
}
|
|
1597
|
-
const
|
|
1614
|
+
const Sn = {
|
|
1598
1615
|
id: "tag",
|
|
1599
1616
|
name: "Tag",
|
|
1600
1617
|
tier: "atom",
|
|
@@ -1651,12 +1668,12 @@ const rn = {
|
|
|
1651
1668
|
notes: 'The dismiss button has aria-label="Dismiss" and is keyboard-focusable.',
|
|
1652
1669
|
keyboardInteractions: ["Enter / Space — activates the dismiss button when focused"]
|
|
1653
1670
|
}
|
|
1654
|
-
}, A = 5,
|
|
1671
|
+
}, A = 5, Ye = {
|
|
1655
1672
|
top: { bottom: "100%", left: "50%", transform: "translateX(-50%)", marginBottom: A + 3 },
|
|
1656
1673
|
bottom: { top: "100%", left: "50%", transform: "translateX(-50%)", marginTop: A + 3 },
|
|
1657
1674
|
left: { right: "100%", top: "50%", transform: "translateY(-50%)", marginRight: A + 3 },
|
|
1658
1675
|
right: { left: "100%", top: "50%", transform: "translateY(-50%)", marginLeft: A + 3 }
|
|
1659
|
-
},
|
|
1676
|
+
}, Ke = {
|
|
1660
1677
|
top: {
|
|
1661
1678
|
bottom: -A,
|
|
1662
1679
|
left: "50%",
|
|
@@ -1686,20 +1703,20 @@ const rn = {
|
|
|
1686
1703
|
borderColor: "transparent var(--lucent-text-primary) transparent transparent"
|
|
1687
1704
|
}
|
|
1688
1705
|
};
|
|
1689
|
-
function
|
|
1690
|
-
const [r, i] =
|
|
1706
|
+
function Tn({ content: t, children: n, placement: a = "top", delay: o = 300 }) {
|
|
1707
|
+
const [r, i] = M(!1), l = F(null), s = () => {
|
|
1691
1708
|
l.current = setTimeout(() => i(!0), o);
|
|
1692
|
-
},
|
|
1709
|
+
}, u = () => {
|
|
1693
1710
|
l.current && clearTimeout(l.current), i(!1);
|
|
1694
1711
|
};
|
|
1695
1712
|
return t ? /* @__PURE__ */ h(
|
|
1696
1713
|
"span",
|
|
1697
1714
|
{
|
|
1698
1715
|
style: { position: "relative", display: "inline-flex" },
|
|
1699
|
-
onMouseEnter:
|
|
1700
|
-
onMouseLeave:
|
|
1701
|
-
onFocus:
|
|
1702
|
-
onBlur:
|
|
1716
|
+
onMouseEnter: s,
|
|
1717
|
+
onMouseLeave: u,
|
|
1718
|
+
onFocus: s,
|
|
1719
|
+
onBlur: u,
|
|
1703
1720
|
children: [
|
|
1704
1721
|
n,
|
|
1705
1722
|
r && /* @__PURE__ */ h(
|
|
@@ -1708,7 +1725,7 @@ function on({ content: t, children: n, placement: a = "top", delay: o = 300 }) {
|
|
|
1708
1725
|
role: "tooltip",
|
|
1709
1726
|
style: {
|
|
1710
1727
|
position: "absolute",
|
|
1711
|
-
...
|
|
1728
|
+
...Ye[a],
|
|
1712
1729
|
background: "var(--lucent-text-primary)",
|
|
1713
1730
|
color: "var(--lucent-bg-base)",
|
|
1714
1731
|
padding: "5px 10px",
|
|
@@ -1733,7 +1750,7 @@ function on({ content: t, children: n, placement: a = "top", delay: o = 300 }) {
|
|
|
1733
1750
|
width: 0,
|
|
1734
1751
|
height: 0,
|
|
1735
1752
|
borderStyle: "solid",
|
|
1736
|
-
...
|
|
1753
|
+
...Ke[a]
|
|
1737
1754
|
}
|
|
1738
1755
|
}
|
|
1739
1756
|
)
|
|
@@ -1742,9 +1759,9 @@ function on({ content: t, children: n, placement: a = "top", delay: o = 300 }) {
|
|
|
1742
1759
|
)
|
|
1743
1760
|
]
|
|
1744
1761
|
}
|
|
1745
|
-
) : /* @__PURE__ */ e(
|
|
1762
|
+
) : /* @__PURE__ */ e(W, { children: n });
|
|
1746
1763
|
}
|
|
1747
|
-
const
|
|
1764
|
+
const Cn = {
|
|
1748
1765
|
id: "tooltip",
|
|
1749
1766
|
name: "Tooltip",
|
|
1750
1767
|
tier: "atom",
|
|
@@ -1793,15 +1810,15 @@ const ln = {
|
|
|
1793
1810
|
ariaAttributes: ['role="tooltip"'],
|
|
1794
1811
|
notes: 'The tooltip is shown on both hover and focus, making it accessible to keyboard users. Content is exposed via role="tooltip".'
|
|
1795
1812
|
}
|
|
1796
|
-
},
|
|
1813
|
+
}, Xe = {
|
|
1797
1814
|
xs: 12,
|
|
1798
1815
|
sm: 14,
|
|
1799
1816
|
md: 16,
|
|
1800
1817
|
lg: 20,
|
|
1801
1818
|
xl: 24
|
|
1802
1819
|
};
|
|
1803
|
-
function
|
|
1804
|
-
const i =
|
|
1820
|
+
function In({ children: t, size: n = "md", label: a, color: o, style: r }) {
|
|
1821
|
+
const i = Xe[n];
|
|
1805
1822
|
return /* @__PURE__ */ e(
|
|
1806
1823
|
"span",
|
|
1807
1824
|
{
|
|
@@ -1822,7 +1839,7 @@ function sn({ children: t, size: n = "md", label: a, color: o, style: r }) {
|
|
|
1822
1839
|
}
|
|
1823
1840
|
);
|
|
1824
1841
|
}
|
|
1825
|
-
const
|
|
1842
|
+
const Mn = {
|
|
1826
1843
|
id: "icon",
|
|
1827
1844
|
name: "Icon",
|
|
1828
1845
|
tier: "atom",
|
|
@@ -1870,7 +1887,7 @@ const cn = {
|
|
|
1870
1887
|
ariaAttributes: ["aria-label", "aria-hidden"],
|
|
1871
1888
|
notes: 'aria-hidden="true" is applied automatically when no label is given, hiding the icon from screen readers.'
|
|
1872
1889
|
}
|
|
1873
|
-
},
|
|
1890
|
+
}, Je = {
|
|
1874
1891
|
primary: "var(--lucent-text-primary)",
|
|
1875
1892
|
secondary: "var(--lucent-text-secondary)",
|
|
1876
1893
|
disabled: "var(--lucent-text-disabled)",
|
|
@@ -1880,7 +1897,7 @@ const cn = {
|
|
|
1880
1897
|
warning: "var(--lucent-warning-text)",
|
|
1881
1898
|
danger: "var(--lucent-danger-text)",
|
|
1882
1899
|
info: "var(--lucent-info-text)"
|
|
1883
|
-
},
|
|
1900
|
+
}, Qe = {
|
|
1884
1901
|
xs: "var(--lucent-font-size-xs)",
|
|
1885
1902
|
sm: "var(--lucent-font-size-sm)",
|
|
1886
1903
|
md: "var(--lucent-font-size-md)",
|
|
@@ -1888,21 +1905,21 @@ const cn = {
|
|
|
1888
1905
|
xl: "var(--lucent-font-size-xl)",
|
|
1889
1906
|
"2xl": "var(--lucent-font-size-2xl)",
|
|
1890
1907
|
"3xl": "var(--lucent-font-size-3xl)"
|
|
1891
|
-
},
|
|
1908
|
+
}, Ze = {
|
|
1892
1909
|
regular: "var(--lucent-font-weight-regular)",
|
|
1893
1910
|
medium: "var(--lucent-font-weight-medium)",
|
|
1894
1911
|
semibold: "var(--lucent-font-weight-semibold)",
|
|
1895
1912
|
bold: "var(--lucent-font-weight-bold)"
|
|
1896
|
-
},
|
|
1913
|
+
}, et = {
|
|
1897
1914
|
tight: "var(--lucent-line-height-tight)",
|
|
1898
1915
|
base: "var(--lucent-line-height-base)",
|
|
1899
1916
|
relaxed: "var(--lucent-line-height-relaxed)"
|
|
1900
|
-
},
|
|
1917
|
+
}, tt = {
|
|
1901
1918
|
base: "var(--lucent-font-family-base)",
|
|
1902
1919
|
mono: "var(--lucent-font-family-mono)",
|
|
1903
1920
|
display: "var(--lucent-font-family-display)"
|
|
1904
1921
|
};
|
|
1905
|
-
function
|
|
1922
|
+
function E({
|
|
1906
1923
|
as: t = "p",
|
|
1907
1924
|
size: n = "md",
|
|
1908
1925
|
weight: a = "regular",
|
|
@@ -1910,29 +1927,29 @@ function q({
|
|
|
1910
1927
|
align: r = "left",
|
|
1911
1928
|
lineHeight: i = "base",
|
|
1912
1929
|
family: l = "base",
|
|
1913
|
-
truncate:
|
|
1914
|
-
children:
|
|
1915
|
-
style:
|
|
1916
|
-
...
|
|
1930
|
+
truncate: s = !1,
|
|
1931
|
+
children: u,
|
|
1932
|
+
style: m,
|
|
1933
|
+
...b
|
|
1917
1934
|
}) {
|
|
1918
1935
|
const d = {
|
|
1919
|
-
fontSize:
|
|
1920
|
-
fontWeight:
|
|
1921
|
-
color:
|
|
1936
|
+
fontSize: Qe[n],
|
|
1937
|
+
fontWeight: Ze[a],
|
|
1938
|
+
color: Je[o],
|
|
1922
1939
|
textAlign: r,
|
|
1923
|
-
lineHeight:
|
|
1924
|
-
fontFamily:
|
|
1940
|
+
lineHeight: et[i],
|
|
1941
|
+
fontFamily: tt[l],
|
|
1925
1942
|
margin: 0,
|
|
1926
|
-
...
|
|
1943
|
+
...s && {
|
|
1927
1944
|
overflow: "hidden",
|
|
1928
1945
|
textOverflow: "ellipsis",
|
|
1929
1946
|
whiteSpace: "nowrap"
|
|
1930
1947
|
},
|
|
1931
|
-
...
|
|
1948
|
+
...m
|
|
1932
1949
|
};
|
|
1933
|
-
return /* @__PURE__ */ e(t, { style: d, ...
|
|
1950
|
+
return /* @__PURE__ */ e(t, { style: d, ...b, children: u });
|
|
1934
1951
|
}
|
|
1935
|
-
const
|
|
1952
|
+
const zn = {
|
|
1936
1953
|
id: "text",
|
|
1937
1954
|
name: "Text",
|
|
1938
1955
|
tier: "atom",
|
|
@@ -2030,7 +2047,7 @@ const dn = {
|
|
|
2030
2047
|
notes: 'The rendered element determines the implicit ARIA role. Use heading elements (h1–h6) for document headings so screen readers can navigate the page structure. Use `as="label"` with `htmlFor` to associate labels with form controls. Decorative text needs no additional ARIA.'
|
|
2031
2048
|
}
|
|
2032
2049
|
};
|
|
2033
|
-
function
|
|
2050
|
+
function qn({
|
|
2034
2051
|
children: t,
|
|
2035
2052
|
href: n,
|
|
2036
2053
|
isActive: a = !1,
|
|
@@ -2038,7 +2055,7 @@ function un({
|
|
|
2038
2055
|
disabled: r = !1,
|
|
2039
2056
|
onClick: i,
|
|
2040
2057
|
as: l,
|
|
2041
|
-
style:
|
|
2058
|
+
style: s
|
|
2042
2059
|
}) {
|
|
2043
2060
|
return /* @__PURE__ */ h(
|
|
2044
2061
|
l ?? "a",
|
|
@@ -2063,13 +2080,13 @@ function un({
|
|
|
2063
2080
|
transition: "background var(--lucent-duration-fast) var(--lucent-easing-default), color var(--lucent-duration-fast) var(--lucent-easing-default)",
|
|
2064
2081
|
userSelect: "none",
|
|
2065
2082
|
boxSizing: "border-box",
|
|
2066
|
-
...
|
|
2083
|
+
...s
|
|
2067
2084
|
},
|
|
2068
|
-
onMouseEnter: (
|
|
2069
|
-
!r && !a && (
|
|
2085
|
+
onMouseEnter: (m) => {
|
|
2086
|
+
!r && !a && (m.currentTarget.style.background = "var(--lucent-bg-muted)");
|
|
2070
2087
|
},
|
|
2071
|
-
onMouseLeave: (
|
|
2072
|
-
!r && !a && (
|
|
2088
|
+
onMouseLeave: (m) => {
|
|
2089
|
+
!r && !a && (m.currentTarget.style.background = "transparent");
|
|
2073
2090
|
},
|
|
2074
2091
|
children: [
|
|
2075
2092
|
o != null && /* @__PURE__ */ e("span", { style: { display: "flex", flexShrink: 0, color: "inherit" }, children: o }),
|
|
@@ -2078,7 +2095,784 @@ function un({
|
|
|
2078
2095
|
}
|
|
2079
2096
|
);
|
|
2080
2097
|
}
|
|
2081
|
-
|
|
2098
|
+
const nt = { sm: "3px", md: "4px", lg: "5px" }, at = { sm: "14px", md: "18px", lg: "22px" }, rt = `
|
|
2099
|
+
.lucent-slider {
|
|
2100
|
+
-webkit-appearance: none;
|
|
2101
|
+
appearance: none;
|
|
2102
|
+
width: 100%;
|
|
2103
|
+
background: transparent;
|
|
2104
|
+
cursor: pointer;
|
|
2105
|
+
outline: none;
|
|
2106
|
+
margin: 0;
|
|
2107
|
+
padding: 6px 0;
|
|
2108
|
+
box-sizing: border-box;
|
|
2109
|
+
}
|
|
2110
|
+
.lucent-slider:disabled { cursor: not-allowed; }
|
|
2111
|
+
|
|
2112
|
+
/* WebKit track */
|
|
2113
|
+
.lucent-slider::-webkit-slider-runnable-track {
|
|
2114
|
+
height: var(--ls-track-h);
|
|
2115
|
+
border-radius: 999px;
|
|
2116
|
+
background: linear-gradient(
|
|
2117
|
+
to right,
|
|
2118
|
+
var(--lucent-accent-default) 0%,
|
|
2119
|
+
var(--lucent-accent-default) var(--ls-fill),
|
|
2120
|
+
var(--lucent-border-default) var(--ls-fill),
|
|
2121
|
+
var(--lucent-border-default) 100%
|
|
2122
|
+
);
|
|
2123
|
+
}
|
|
2124
|
+
.lucent-slider:disabled::-webkit-slider-runnable-track {
|
|
2125
|
+
background: var(--lucent-border-default);
|
|
2126
|
+
}
|
|
2127
|
+
|
|
2128
|
+
/* WebKit thumb */
|
|
2129
|
+
.lucent-slider::-webkit-slider-thumb {
|
|
2130
|
+
-webkit-appearance: none;
|
|
2131
|
+
appearance: none;
|
|
2132
|
+
width: var(--ls-thumb);
|
|
2133
|
+
height: var(--ls-thumb);
|
|
2134
|
+
border-radius: 50%;
|
|
2135
|
+
background: var(--lucent-accent-default);
|
|
2136
|
+
border: 2px solid var(--lucent-surface-default);
|
|
2137
|
+
box-shadow: 0 1px 3px rgb(0 0 0 / 0.15);
|
|
2138
|
+
margin-top: calc((var(--ls-thumb) - var(--ls-track-h)) / -2);
|
|
2139
|
+
transition: transform 120ms ease, box-shadow 120ms ease;
|
|
2140
|
+
cursor: pointer;
|
|
2141
|
+
}
|
|
2142
|
+
.lucent-slider:not(:disabled):hover::-webkit-slider-thumb {
|
|
2143
|
+
transform: scale(1.15);
|
|
2144
|
+
}
|
|
2145
|
+
.lucent-slider:focus-visible::-webkit-slider-thumb {
|
|
2146
|
+
box-shadow: 0 0 0 3px var(--lucent-accent-subtle);
|
|
2147
|
+
}
|
|
2148
|
+
.lucent-slider:disabled::-webkit-slider-thumb {
|
|
2149
|
+
background: var(--lucent-bg-muted);
|
|
2150
|
+
border-color: var(--lucent-border-default);
|
|
2151
|
+
cursor: not-allowed;
|
|
2152
|
+
}
|
|
2153
|
+
|
|
2154
|
+
/* Firefox track */
|
|
2155
|
+
.lucent-slider::-moz-range-track {
|
|
2156
|
+
height: var(--ls-track-h);
|
|
2157
|
+
border-radius: 999px;
|
|
2158
|
+
background: var(--lucent-border-default);
|
|
2159
|
+
}
|
|
2160
|
+
.lucent-slider::-moz-range-progress {
|
|
2161
|
+
height: var(--ls-track-h);
|
|
2162
|
+
border-radius: 999px;
|
|
2163
|
+
background: var(--lucent-accent-default);
|
|
2164
|
+
}
|
|
2165
|
+
.lucent-slider:disabled::-moz-range-progress {
|
|
2166
|
+
background: transparent;
|
|
2167
|
+
}
|
|
2168
|
+
|
|
2169
|
+
/* Firefox thumb */
|
|
2170
|
+
.lucent-slider::-moz-range-thumb {
|
|
2171
|
+
width: var(--ls-thumb);
|
|
2172
|
+
height: var(--ls-thumb);
|
|
2173
|
+
border-radius: 50%;
|
|
2174
|
+
background: var(--lucent-accent-default);
|
|
2175
|
+
border: 2px solid var(--lucent-surface-default);
|
|
2176
|
+
box-shadow: 0 1px 3px rgb(0 0 0 / 0.15);
|
|
2177
|
+
cursor: pointer;
|
|
2178
|
+
transition: transform 120ms ease, box-shadow 120ms ease;
|
|
2179
|
+
}
|
|
2180
|
+
.lucent-slider:not(:disabled):hover::-moz-range-thumb {
|
|
2181
|
+
transform: scale(1.15);
|
|
2182
|
+
}
|
|
2183
|
+
.lucent-slider:focus-visible::-moz-range-thumb {
|
|
2184
|
+
box-shadow: 0 0 0 3px var(--lucent-accent-subtle);
|
|
2185
|
+
}
|
|
2186
|
+
.lucent-slider:disabled::-moz-range-thumb {
|
|
2187
|
+
background: var(--lucent-bg-muted);
|
|
2188
|
+
border-color: var(--lucent-border-default);
|
|
2189
|
+
cursor: not-allowed;
|
|
2190
|
+
}
|
|
2191
|
+
`;
|
|
2192
|
+
function En({
|
|
2193
|
+
label: t,
|
|
2194
|
+
showValue: n = !1,
|
|
2195
|
+
size: a = "md",
|
|
2196
|
+
min: o = 0,
|
|
2197
|
+
max: r = 100,
|
|
2198
|
+
step: i = 1,
|
|
2199
|
+
value: l,
|
|
2200
|
+
defaultValue: s,
|
|
2201
|
+
disabled: u,
|
|
2202
|
+
id: m,
|
|
2203
|
+
onChange: b,
|
|
2204
|
+
style: d,
|
|
2205
|
+
...p
|
|
2206
|
+
}) {
|
|
2207
|
+
const c = m ?? `lucent-slider-${Math.random().toString(36).slice(2, 7)}`, v = l !== void 0, [y, w] = M(
|
|
2208
|
+
s ?? Math.round((o + r) / 2)
|
|
2209
|
+
), g = v ? l : y, x = `${(g - o) / (r - o) * 100}%`, I = (k) => {
|
|
2210
|
+
v || w(Number(k.target.value)), b == null || b(k);
|
|
2211
|
+
};
|
|
2212
|
+
return /* @__PURE__ */ h(W, { children: [
|
|
2213
|
+
/* @__PURE__ */ e("style", { children: rt }),
|
|
2214
|
+
/* @__PURE__ */ h(
|
|
2215
|
+
"div",
|
|
2216
|
+
{
|
|
2217
|
+
style: {
|
|
2218
|
+
display: "flex",
|
|
2219
|
+
flexDirection: "column",
|
|
2220
|
+
gap: "var(--lucent-space-1)",
|
|
2221
|
+
width: "100%",
|
|
2222
|
+
fontFamily: "var(--lucent-font-family-base)",
|
|
2223
|
+
...d
|
|
2224
|
+
},
|
|
2225
|
+
children: [
|
|
2226
|
+
(t || n) && /* @__PURE__ */ h(
|
|
2227
|
+
"div",
|
|
2228
|
+
{
|
|
2229
|
+
style: {
|
|
2230
|
+
display: "flex",
|
|
2231
|
+
justifyContent: "space-between",
|
|
2232
|
+
alignItems: "baseline"
|
|
2233
|
+
},
|
|
2234
|
+
children: [
|
|
2235
|
+
t && /* @__PURE__ */ e(
|
|
2236
|
+
"label",
|
|
2237
|
+
{
|
|
2238
|
+
htmlFor: c,
|
|
2239
|
+
style: {
|
|
2240
|
+
fontSize: "var(--lucent-font-size-sm)",
|
|
2241
|
+
fontWeight: "var(--lucent-font-weight-medium)",
|
|
2242
|
+
color: u ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
|
|
2243
|
+
cursor: u ? "not-allowed" : "default"
|
|
2244
|
+
},
|
|
2245
|
+
children: t
|
|
2246
|
+
}
|
|
2247
|
+
),
|
|
2248
|
+
n && /* @__PURE__ */ e(
|
|
2249
|
+
"span",
|
|
2250
|
+
{
|
|
2251
|
+
style: {
|
|
2252
|
+
fontSize: "var(--lucent-font-size-sm)",
|
|
2253
|
+
color: u ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
|
|
2254
|
+
fontVariantNumeric: "tabular-nums"
|
|
2255
|
+
},
|
|
2256
|
+
children: g
|
|
2257
|
+
}
|
|
2258
|
+
)
|
|
2259
|
+
]
|
|
2260
|
+
}
|
|
2261
|
+
),
|
|
2262
|
+
/* @__PURE__ */ e(
|
|
2263
|
+
"input",
|
|
2264
|
+
{
|
|
2265
|
+
type: "range",
|
|
2266
|
+
id: c,
|
|
2267
|
+
className: "lucent-slider",
|
|
2268
|
+
min: o,
|
|
2269
|
+
max: r,
|
|
2270
|
+
step: i,
|
|
2271
|
+
disabled: u,
|
|
2272
|
+
value: v ? l : y,
|
|
2273
|
+
onChange: I,
|
|
2274
|
+
style: {
|
|
2275
|
+
"--ls-track-h": nt[a],
|
|
2276
|
+
"--ls-thumb": at[a],
|
|
2277
|
+
"--ls-fill": x
|
|
2278
|
+
},
|
|
2279
|
+
...p
|
|
2280
|
+
}
|
|
2281
|
+
)
|
|
2282
|
+
]
|
|
2283
|
+
}
|
|
2284
|
+
)
|
|
2285
|
+
] });
|
|
2286
|
+
}
|
|
2287
|
+
const Dn = {
|
|
2288
|
+
id: "slider",
|
|
2289
|
+
name: "Slider",
|
|
2290
|
+
tier: "atom",
|
|
2291
|
+
domain: "neutral",
|
|
2292
|
+
specVersion: "0.1",
|
|
2293
|
+
description: "A range input styled with Lucent tokens for selecting a numeric value within a bounded range.",
|
|
2294
|
+
designIntent: 'Use Slider for continuous or stepped numeric inputs where the relative position matters — volume, brightness, border radius, spacing scale. Pair with showValue when the exact number is meaningful to the user. For precise numeric entry, use Input with type="number" instead. Disabled state uses muted colours without opacity hacks.',
|
|
2295
|
+
props: [
|
|
2296
|
+
{
|
|
2297
|
+
name: "min",
|
|
2298
|
+
type: "number",
|
|
2299
|
+
required: !1,
|
|
2300
|
+
default: "0",
|
|
2301
|
+
description: "Minimum value."
|
|
2302
|
+
},
|
|
2303
|
+
{
|
|
2304
|
+
name: "max",
|
|
2305
|
+
type: "number",
|
|
2306
|
+
required: !1,
|
|
2307
|
+
default: "100",
|
|
2308
|
+
description: "Maximum value."
|
|
2309
|
+
},
|
|
2310
|
+
{
|
|
2311
|
+
name: "step",
|
|
2312
|
+
type: "number",
|
|
2313
|
+
required: !1,
|
|
2314
|
+
default: "1",
|
|
2315
|
+
description: "Increment step between values."
|
|
2316
|
+
},
|
|
2317
|
+
{
|
|
2318
|
+
name: "value",
|
|
2319
|
+
type: "number",
|
|
2320
|
+
required: !1,
|
|
2321
|
+
description: "Controlled current value. Pair with onChange."
|
|
2322
|
+
},
|
|
2323
|
+
{
|
|
2324
|
+
name: "defaultValue",
|
|
2325
|
+
type: "number",
|
|
2326
|
+
required: !1,
|
|
2327
|
+
description: "Initial value for uncontrolled usage. Defaults to the midpoint of min/max."
|
|
2328
|
+
},
|
|
2329
|
+
{
|
|
2330
|
+
name: "onChange",
|
|
2331
|
+
type: "function",
|
|
2332
|
+
required: !1,
|
|
2333
|
+
description: "Called on every value change."
|
|
2334
|
+
},
|
|
2335
|
+
{
|
|
2336
|
+
name: "label",
|
|
2337
|
+
type: "string",
|
|
2338
|
+
required: !1,
|
|
2339
|
+
description: "Visible label rendered above the track."
|
|
2340
|
+
},
|
|
2341
|
+
{
|
|
2342
|
+
name: "showValue",
|
|
2343
|
+
type: "boolean",
|
|
2344
|
+
required: !1,
|
|
2345
|
+
default: "false",
|
|
2346
|
+
description: "Displays the current numeric value to the right of the label."
|
|
2347
|
+
},
|
|
2348
|
+
{
|
|
2349
|
+
name: "size",
|
|
2350
|
+
type: "enum",
|
|
2351
|
+
required: !1,
|
|
2352
|
+
default: "md",
|
|
2353
|
+
description: "Controls track thickness and thumb diameter.",
|
|
2354
|
+
enumValues: ["sm", "md", "lg"]
|
|
2355
|
+
},
|
|
2356
|
+
{
|
|
2357
|
+
name: "disabled",
|
|
2358
|
+
type: "boolean",
|
|
2359
|
+
required: !1,
|
|
2360
|
+
default: "false",
|
|
2361
|
+
description: "Prevents interaction and dims the control."
|
|
2362
|
+
}
|
|
2363
|
+
],
|
|
2364
|
+
usageExamples: [
|
|
2365
|
+
{ title: "Basic", code: '<Slider label="Volume" showValue />' },
|
|
2366
|
+
{ title: "Controlled", code: '<Slider label="Opacity" min={0} max={1} step={0.01} value={opacity} onChange={e => setOpacity(Number(e.target.value))} showValue />' },
|
|
2367
|
+
{ title: "Sizes", code: `<Slider size="sm" label="Small" />
|
|
2368
|
+
<Slider size="md" label="Medium" />
|
|
2369
|
+
<Slider size="lg" label="Large" />` },
|
|
2370
|
+
{ title: "Disabled", code: '<Slider label="Locked" disabled defaultValue={40} />' }
|
|
2371
|
+
],
|
|
2372
|
+
compositionGraph: [],
|
|
2373
|
+
accessibility: {
|
|
2374
|
+
role: "slider",
|
|
2375
|
+
ariaAttributes: ["aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-disabled"],
|
|
2376
|
+
keyboardInteractions: [
|
|
2377
|
+
"ArrowRight / ArrowUp — increase value by step",
|
|
2378
|
+
"ArrowLeft / ArrowDown — decrease value by step",
|
|
2379
|
+
"Home — jump to min",
|
|
2380
|
+
"End — jump to max"
|
|
2381
|
+
]
|
|
2382
|
+
}
|
|
2383
|
+
}, ot = 2e3;
|
|
2384
|
+
function it() {
|
|
2385
|
+
return /* @__PURE__ */ h("svg", { width: 13, height: 13, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, children: [
|
|
2386
|
+
/* @__PURE__ */ e("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
|
|
2387
|
+
/* @__PURE__ */ e("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })
|
|
2388
|
+
] });
|
|
2389
|
+
}
|
|
2390
|
+
function lt() {
|
|
2391
|
+
return /* @__PURE__ */ e("svg", { width: 13, height: 13, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, children: /* @__PURE__ */ e("path", { d: "M20 6L9 17l-5-5" }) });
|
|
2392
|
+
}
|
|
2393
|
+
function An({
|
|
2394
|
+
code: t,
|
|
2395
|
+
language: n,
|
|
2396
|
+
tabs: a,
|
|
2397
|
+
variant: o = "code",
|
|
2398
|
+
helperText: r,
|
|
2399
|
+
showCopyButton: i = !0,
|
|
2400
|
+
style: l
|
|
2401
|
+
}) {
|
|
2402
|
+
var g, x;
|
|
2403
|
+
const s = !!(a != null && a.length), [u, m] = M(0), [b, d] = M(!1), p = s ? ((g = a[u]) == null ? void 0 : g.code) ?? "" : t ?? "", c = s ? (x = a[u]) == null ? void 0 : x.language : n, v = async () => {
|
|
2404
|
+
try {
|
|
2405
|
+
await navigator.clipboard.writeText(p), d(!0), setTimeout(() => d(!1), ot);
|
|
2406
|
+
} catch {
|
|
2407
|
+
}
|
|
2408
|
+
}, y = {
|
|
2409
|
+
display: "inline-flex",
|
|
2410
|
+
alignItems: "center",
|
|
2411
|
+
gap: "var(--lucent-space-1)",
|
|
2412
|
+
padding: "3px var(--lucent-space-2)",
|
|
2413
|
+
border: "1px solid transparent",
|
|
2414
|
+
borderRadius: "var(--lucent-radius-md)",
|
|
2415
|
+
background: "transparent",
|
|
2416
|
+
color: b ? "var(--lucent-success-default)" : "var(--lucent-text-secondary)",
|
|
2417
|
+
fontFamily: "var(--lucent-font-family-base)",
|
|
2418
|
+
fontSize: "var(--lucent-font-size-xs)",
|
|
2419
|
+
cursor: "pointer",
|
|
2420
|
+
flexShrink: 0,
|
|
2421
|
+
transition: "color var(--lucent-duration-fast) var(--lucent-easing-default), background var(--lucent-duration-fast) var(--lucent-easing-default)"
|
|
2422
|
+
}, w = () => /* @__PURE__ */ h(
|
|
2423
|
+
"button",
|
|
2424
|
+
{
|
|
2425
|
+
onClick: v,
|
|
2426
|
+
"aria-label": b ? "Copied!" : "Copy code",
|
|
2427
|
+
style: y,
|
|
2428
|
+
onMouseEnter: (I) => {
|
|
2429
|
+
b || (I.currentTarget.style.background = "var(--lucent-bg-hover)", I.currentTarget.style.color = "var(--lucent-text-primary)");
|
|
2430
|
+
},
|
|
2431
|
+
onMouseLeave: (I) => {
|
|
2432
|
+
b || (I.currentTarget.style.background = "transparent", I.currentTarget.style.color = "var(--lucent-text-secondary)");
|
|
2433
|
+
},
|
|
2434
|
+
children: [
|
|
2435
|
+
b ? /* @__PURE__ */ e(lt, {}) : /* @__PURE__ */ e(it, {}),
|
|
2436
|
+
b ? "Copied!" : "Copy"
|
|
2437
|
+
]
|
|
2438
|
+
}
|
|
2439
|
+
);
|
|
2440
|
+
return /* @__PURE__ */ h(
|
|
2441
|
+
"div",
|
|
2442
|
+
{
|
|
2443
|
+
style: {
|
|
2444
|
+
borderRadius: "var(--lucent-radius-lg)",
|
|
2445
|
+
border: "1px solid var(--lucent-border-default)",
|
|
2446
|
+
overflow: "hidden",
|
|
2447
|
+
...l
|
|
2448
|
+
},
|
|
2449
|
+
children: [
|
|
2450
|
+
s && /* @__PURE__ */ e(
|
|
2451
|
+
"div",
|
|
2452
|
+
{
|
|
2453
|
+
style: {
|
|
2454
|
+
display: "flex",
|
|
2455
|
+
alignItems: "flex-end",
|
|
2456
|
+
background: "var(--lucent-surface-default)",
|
|
2457
|
+
borderBottom: "1px solid var(--lucent-border-default)",
|
|
2458
|
+
padding: "0 var(--lucent-space-2)"
|
|
2459
|
+
},
|
|
2460
|
+
children: a.map((I, k) => {
|
|
2461
|
+
const f = k === u;
|
|
2462
|
+
return /* @__PURE__ */ h(
|
|
2463
|
+
"button",
|
|
2464
|
+
{
|
|
2465
|
+
onClick: () => {
|
|
2466
|
+
m(k), d(!1);
|
|
2467
|
+
},
|
|
2468
|
+
style: {
|
|
2469
|
+
display: "inline-flex",
|
|
2470
|
+
alignItems: "center",
|
|
2471
|
+
gap: "var(--lucent-space-1)",
|
|
2472
|
+
padding: "var(--lucent-space-2) var(--lucent-space-3)",
|
|
2473
|
+
border: "none",
|
|
2474
|
+
borderBottom: f ? "2px solid var(--lucent-accent-default)" : "2px solid transparent",
|
|
2475
|
+
marginBottom: -1,
|
|
2476
|
+
background: "transparent",
|
|
2477
|
+
color: f ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
|
|
2478
|
+
fontFamily: "var(--lucent-font-family-base)",
|
|
2479
|
+
fontSize: "var(--lucent-font-size-sm)",
|
|
2480
|
+
fontWeight: f ? "var(--lucent-font-weight-semibold)" : "var(--lucent-font-weight-regular)",
|
|
2481
|
+
cursor: "pointer",
|
|
2482
|
+
transition: "color var(--lucent-duration-fast) var(--lucent-easing-default)",
|
|
2483
|
+
whiteSpace: "nowrap"
|
|
2484
|
+
},
|
|
2485
|
+
onMouseEnter: (S) => {
|
|
2486
|
+
f || (S.currentTarget.style.color = "var(--lucent-text-primary)");
|
|
2487
|
+
},
|
|
2488
|
+
onMouseLeave: (S) => {
|
|
2489
|
+
f || (S.currentTarget.style.color = "var(--lucent-text-secondary)");
|
|
2490
|
+
},
|
|
2491
|
+
children: [
|
|
2492
|
+
I.icon !== void 0 && /* @__PURE__ */ e("span", { style: { display: "inline-flex", alignItems: "center" }, children: I.icon }),
|
|
2493
|
+
I.label
|
|
2494
|
+
]
|
|
2495
|
+
},
|
|
2496
|
+
I.label
|
|
2497
|
+
);
|
|
2498
|
+
})
|
|
2499
|
+
}
|
|
2500
|
+
),
|
|
2501
|
+
!s && (!!c || i) && /* @__PURE__ */ h(
|
|
2502
|
+
"div",
|
|
2503
|
+
{
|
|
2504
|
+
style: {
|
|
2505
|
+
display: "flex",
|
|
2506
|
+
alignItems: "center",
|
|
2507
|
+
justifyContent: c ? "space-between" : "flex-end",
|
|
2508
|
+
padding: "0 var(--lucent-space-3)",
|
|
2509
|
+
height: 36,
|
|
2510
|
+
background: "var(--lucent-bg-muted)",
|
|
2511
|
+
borderBottom: "1px solid var(--lucent-border-default)"
|
|
2512
|
+
},
|
|
2513
|
+
children: [
|
|
2514
|
+
c && /* @__PURE__ */ e(
|
|
2515
|
+
"span",
|
|
2516
|
+
{
|
|
2517
|
+
style: {
|
|
2518
|
+
fontSize: "var(--lucent-font-size-xs)",
|
|
2519
|
+
fontFamily: "var(--lucent-font-family-mono)",
|
|
2520
|
+
color: "var(--lucent-text-secondary)",
|
|
2521
|
+
letterSpacing: "var(--lucent-letter-spacing-wide)"
|
|
2522
|
+
},
|
|
2523
|
+
children: c
|
|
2524
|
+
}
|
|
2525
|
+
),
|
|
2526
|
+
i && /* @__PURE__ */ e(w, {})
|
|
2527
|
+
]
|
|
2528
|
+
}
|
|
2529
|
+
),
|
|
2530
|
+
r && /* @__PURE__ */ e(
|
|
2531
|
+
"div",
|
|
2532
|
+
{
|
|
2533
|
+
style: {
|
|
2534
|
+
padding: "var(--lucent-space-2) var(--lucent-space-4)",
|
|
2535
|
+
fontSize: "var(--lucent-font-size-xs)",
|
|
2536
|
+
color: "var(--lucent-text-secondary)",
|
|
2537
|
+
fontFamily: "var(--lucent-font-family-base)",
|
|
2538
|
+
background: "var(--lucent-bg-muted)",
|
|
2539
|
+
borderBottom: "1px solid var(--lucent-border-default)"
|
|
2540
|
+
},
|
|
2541
|
+
children: r
|
|
2542
|
+
}
|
|
2543
|
+
),
|
|
2544
|
+
o === "code" ? /* @__PURE__ */ h("div", { style: { position: "relative" }, children: [
|
|
2545
|
+
/* @__PURE__ */ e(
|
|
2546
|
+
"pre",
|
|
2547
|
+
{
|
|
2548
|
+
style: {
|
|
2549
|
+
margin: 0,
|
|
2550
|
+
padding: "var(--lucent-space-4)",
|
|
2551
|
+
paddingRight: s && i ? "var(--lucent-space-16)" : "var(--lucent-space-4)",
|
|
2552
|
+
background: "var(--lucent-bg-muted)",
|
|
2553
|
+
overflowX: "auto",
|
|
2554
|
+
lineHeight: 1.65
|
|
2555
|
+
},
|
|
2556
|
+
children: /* @__PURE__ */ e(
|
|
2557
|
+
"code",
|
|
2558
|
+
{
|
|
2559
|
+
style: {
|
|
2560
|
+
fontFamily: "var(--lucent-font-family-mono)",
|
|
2561
|
+
fontSize: "var(--lucent-font-size-sm)",
|
|
2562
|
+
color: "var(--lucent-text-primary)"
|
|
2563
|
+
},
|
|
2564
|
+
children: p
|
|
2565
|
+
}
|
|
2566
|
+
)
|
|
2567
|
+
}
|
|
2568
|
+
),
|
|
2569
|
+
s && i && /* @__PURE__ */ e("div", { style: { position: "absolute", top: "var(--lucent-space-2)", right: "var(--lucent-space-3)" }, children: /* @__PURE__ */ e(w, {}) })
|
|
2570
|
+
] }) : (
|
|
2571
|
+
/* ── Prompt area ── */
|
|
2572
|
+
/* @__PURE__ */ h(
|
|
2573
|
+
"div",
|
|
2574
|
+
{
|
|
2575
|
+
style: {
|
|
2576
|
+
display: "flex",
|
|
2577
|
+
alignItems: "center",
|
|
2578
|
+
gap: "var(--lucent-space-3)",
|
|
2579
|
+
padding: "var(--lucent-space-3) var(--lucent-space-4)",
|
|
2580
|
+
background: "var(--lucent-bg-muted)"
|
|
2581
|
+
},
|
|
2582
|
+
children: [
|
|
2583
|
+
/* @__PURE__ */ e(
|
|
2584
|
+
"span",
|
|
2585
|
+
{
|
|
2586
|
+
style: {
|
|
2587
|
+
flex: 1,
|
|
2588
|
+
overflow: "hidden",
|
|
2589
|
+
whiteSpace: "nowrap",
|
|
2590
|
+
textOverflow: "ellipsis",
|
|
2591
|
+
fontFamily: "var(--lucent-font-family-mono)",
|
|
2592
|
+
fontSize: "var(--lucent-font-size-sm)",
|
|
2593
|
+
color: "var(--lucent-text-primary)"
|
|
2594
|
+
},
|
|
2595
|
+
children: p
|
|
2596
|
+
}
|
|
2597
|
+
),
|
|
2598
|
+
i && /* @__PURE__ */ e(w, {})
|
|
2599
|
+
]
|
|
2600
|
+
}
|
|
2601
|
+
)
|
|
2602
|
+
)
|
|
2603
|
+
]
|
|
2604
|
+
}
|
|
2605
|
+
);
|
|
2606
|
+
}
|
|
2607
|
+
const Fn = {
|
|
2608
|
+
id: "code-block",
|
|
2609
|
+
name: "CodeBlock",
|
|
2610
|
+
tier: "atom",
|
|
2611
|
+
domain: "neutral",
|
|
2612
|
+
specVersion: "0.1",
|
|
2613
|
+
description: "A styled code display with optional tabs, a language label, copy-to-clipboard, and an AI prompt variant.",
|
|
2614
|
+
designIntent: "Use CodeBlock for static code snippets, install commands, API examples, and AI prompt sharing. The tabs prop switches between related snippets (e.g. pnpm / npm / yarn). The prompt variant renders a single-line truncated display suited to AI tool prompts — the full text is always copied even when visually clipped. Zero-dependency — no syntax highlighting library is bundled.",
|
|
2615
|
+
props: [
|
|
2616
|
+
{
|
|
2617
|
+
name: "code",
|
|
2618
|
+
type: "string",
|
|
2619
|
+
required: !1,
|
|
2620
|
+
description: "Code string — used in single (non-tabbed) mode."
|
|
2621
|
+
},
|
|
2622
|
+
{
|
|
2623
|
+
name: "language",
|
|
2624
|
+
type: "string",
|
|
2625
|
+
required: !1,
|
|
2626
|
+
description: "Language label shown in the header (non-tabbed mode only). Purely cosmetic."
|
|
2627
|
+
},
|
|
2628
|
+
{
|
|
2629
|
+
name: "tabs",
|
|
2630
|
+
type: "array",
|
|
2631
|
+
required: !1,
|
|
2632
|
+
description: "Tabbed mode. Each entry has { label, code, language?, icon? }. Switching tabs resets the copied state."
|
|
2633
|
+
},
|
|
2634
|
+
{
|
|
2635
|
+
name: "variant",
|
|
2636
|
+
type: "enum",
|
|
2637
|
+
required: !1,
|
|
2638
|
+
default: "code",
|
|
2639
|
+
enumValues: ["code", "prompt"],
|
|
2640
|
+
description: '"code" renders a <pre><code> block with horizontal scroll. "prompt" renders a single-line truncated span suited to AI prompts.'
|
|
2641
|
+
},
|
|
2642
|
+
{
|
|
2643
|
+
name: "helperText",
|
|
2644
|
+
type: "string",
|
|
2645
|
+
required: !1,
|
|
2646
|
+
description: "Descriptive text rendered between the tab bar and the code area."
|
|
2647
|
+
},
|
|
2648
|
+
{
|
|
2649
|
+
name: "showCopyButton",
|
|
2650
|
+
type: "boolean",
|
|
2651
|
+
required: !1,
|
|
2652
|
+
default: "true",
|
|
2653
|
+
description: 'Renders a copy-to-clipboard button. Shows a "Copied!" confirmation for 2 s on success.'
|
|
2654
|
+
}
|
|
2655
|
+
],
|
|
2656
|
+
usageExamples: [
|
|
2657
|
+
{
|
|
2658
|
+
title: "Single snippet",
|
|
2659
|
+
code: '<CodeBlock language="tsx" code={`<Button variant="primary">Save</Button>`} />'
|
|
2660
|
+
},
|
|
2661
|
+
{
|
|
2662
|
+
title: "Tabbed install commands",
|
|
2663
|
+
code: `<CodeBlock tabs={[
|
|
2664
|
+
{ label: 'pnpm', code: 'pnpm add lucent-ui', language: 'bash' },
|
|
2665
|
+
{ label: 'npm', code: 'npm install lucent-ui', language: 'bash' },
|
|
2666
|
+
]} />`
|
|
2667
|
+
},
|
|
2668
|
+
{
|
|
2669
|
+
title: "AI prompt",
|
|
2670
|
+
code: `<CodeBlock
|
|
2671
|
+
variant="prompt"
|
|
2672
|
+
helperText="Paste into Claude:"
|
|
2673
|
+
tabs={[
|
|
2674
|
+
{ label: 'Claude', icon: '♦', code: '"Add a Button with variant=\\"primary\\"."' },
|
|
2675
|
+
{ label: 'Cursor', icon: '↖', code: '@lucent-ui Add a primary Button.' },
|
|
2676
|
+
]}
|
|
2677
|
+
/>`
|
|
2678
|
+
}
|
|
2679
|
+
],
|
|
2680
|
+
compositionGraph: [],
|
|
2681
|
+
accessibility: {
|
|
2682
|
+
role: "region",
|
|
2683
|
+
ariaAttributes: ["aria-label (copy button)"],
|
|
2684
|
+
keyboardInteractions: [
|
|
2685
|
+
"Tab — focuses the copy button",
|
|
2686
|
+
"Enter / Space — copies the code"
|
|
2687
|
+
]
|
|
2688
|
+
}
|
|
2689
|
+
}, st = `
|
|
2690
|
+
.lucent-table-row:hover > td,
|
|
2691
|
+
.lucent-table-row:hover > th {
|
|
2692
|
+
background: var(--lucent-bg-hover) !important;
|
|
2693
|
+
}
|
|
2694
|
+
.lucent-table-striped tbody .lucent-table-row:nth-child(even) > td,
|
|
2695
|
+
.lucent-table-striped tbody .lucent-table-row:nth-child(even) > th {
|
|
2696
|
+
background: var(--lucent-bg-muted);
|
|
2697
|
+
}
|
|
2698
|
+
`;
|
|
2699
|
+
function ct({ children: t, style: n, ...a }) {
|
|
2700
|
+
return /* @__PURE__ */ e(
|
|
2701
|
+
"thead",
|
|
2702
|
+
{
|
|
2703
|
+
style: {
|
|
2704
|
+
background: "var(--lucent-bg-muted)",
|
|
2705
|
+
...n
|
|
2706
|
+
},
|
|
2707
|
+
...a,
|
|
2708
|
+
children: t
|
|
2709
|
+
}
|
|
2710
|
+
);
|
|
2711
|
+
}
|
|
2712
|
+
function dt({ children: t, ...n }) {
|
|
2713
|
+
return /* @__PURE__ */ e("tbody", { ...n, children: t });
|
|
2714
|
+
}
|
|
2715
|
+
function ut({ children: t, style: n, ...a }) {
|
|
2716
|
+
return /* @__PURE__ */ e(
|
|
2717
|
+
"tfoot",
|
|
2718
|
+
{
|
|
2719
|
+
style: {
|
|
2720
|
+
background: "var(--lucent-bg-muted)",
|
|
2721
|
+
...n
|
|
2722
|
+
},
|
|
2723
|
+
...a,
|
|
2724
|
+
children: t
|
|
2725
|
+
}
|
|
2726
|
+
);
|
|
2727
|
+
}
|
|
2728
|
+
function pt({ children: t, className: n, ...a }) {
|
|
2729
|
+
return /* @__PURE__ */ e(
|
|
2730
|
+
"tr",
|
|
2731
|
+
{
|
|
2732
|
+
className: ["lucent-table-row", n].filter(Boolean).join(" "),
|
|
2733
|
+
...a,
|
|
2734
|
+
children: t
|
|
2735
|
+
}
|
|
2736
|
+
);
|
|
2737
|
+
}
|
|
2738
|
+
function ft({ as: t, children: n, style: a, ...o }) {
|
|
2739
|
+
const r = t === "th", i = {
|
|
2740
|
+
padding: "var(--lucent-space-3) var(--lucent-space-4)",
|
|
2741
|
+
fontFamily: "var(--lucent-font-family-base)",
|
|
2742
|
+
fontSize: "var(--lucent-font-size-sm)",
|
|
2743
|
+
borderBottom: "1px solid var(--lucent-border-default)",
|
|
2744
|
+
textAlign: "left",
|
|
2745
|
+
verticalAlign: "middle",
|
|
2746
|
+
color: r ? "var(--lucent-text-secondary)" : "var(--lucent-text-primary)",
|
|
2747
|
+
fontWeight: r ? "var(--lucent-font-weight-semibold)" : "var(--lucent-font-weight-regular)",
|
|
2748
|
+
whiteSpace: r ? "nowrap" : void 0,
|
|
2749
|
+
...a
|
|
2750
|
+
};
|
|
2751
|
+
return r ? /* @__PURE__ */ e("th", { scope: "col", style: i, ...o, children: n }) : /* @__PURE__ */ e("td", { style: i, ...o, children: n });
|
|
2752
|
+
}
|
|
2753
|
+
function G({ striped: t = !1, children: n, className: a, style: o, ...r }) {
|
|
2754
|
+
const i = [
|
|
2755
|
+
"lucent-table",
|
|
2756
|
+
t && "lucent-table-striped",
|
|
2757
|
+
a
|
|
2758
|
+
].filter(Boolean).join(" ");
|
|
2759
|
+
return /* @__PURE__ */ h(W, { children: [
|
|
2760
|
+
/* @__PURE__ */ e("style", { children: st }),
|
|
2761
|
+
/* @__PURE__ */ e("div", { style: { overflowX: "auto", width: "100%" }, children: /* @__PURE__ */ e(
|
|
2762
|
+
"table",
|
|
2763
|
+
{
|
|
2764
|
+
className: i,
|
|
2765
|
+
style: {
|
|
2766
|
+
width: "100%",
|
|
2767
|
+
borderCollapse: "collapse",
|
|
2768
|
+
fontFamily: "var(--lucent-font-family-base)",
|
|
2769
|
+
fontSize: "var(--lucent-font-size-sm)",
|
|
2770
|
+
...o
|
|
2771
|
+
},
|
|
2772
|
+
...r,
|
|
2773
|
+
children: n
|
|
2774
|
+
}
|
|
2775
|
+
) })
|
|
2776
|
+
] });
|
|
2777
|
+
}
|
|
2778
|
+
G.Head = ct;
|
|
2779
|
+
G.Body = dt;
|
|
2780
|
+
G.Foot = ut;
|
|
2781
|
+
G.Row = pt;
|
|
2782
|
+
G.Cell = ft;
|
|
2783
|
+
const Bn = {
|
|
2784
|
+
id: "table",
|
|
2785
|
+
name: "Table",
|
|
2786
|
+
tier: "atom",
|
|
2787
|
+
domain: "neutral",
|
|
2788
|
+
specVersion: "0.1",
|
|
2789
|
+
description: "A lightweight, token-styled HTML table primitive with compound sub-components. Distinct from DataTable — no sorting, filtering, or pagination.",
|
|
2790
|
+
designIntent: "Use Table for static or lightly dynamic tabular data where full DataTable features are not needed — props tables, changelog entries, comparison grids, reference docs. The compound API (Table.Head, Table.Body, Table.Row, Table.Cell) maps directly to semantic HTML so screen readers get the full table structure. Horizontal overflow is handled automatically by a scroll wrapper.",
|
|
2791
|
+
props: [
|
|
2792
|
+
{
|
|
2793
|
+
name: "striped",
|
|
2794
|
+
type: "boolean",
|
|
2795
|
+
required: !1,
|
|
2796
|
+
default: "false",
|
|
2797
|
+
description: "Applies alternating bgMuted backgrounds to even tbody rows."
|
|
2798
|
+
},
|
|
2799
|
+
{
|
|
2800
|
+
name: "Table.Head",
|
|
2801
|
+
type: "component",
|
|
2802
|
+
required: !1,
|
|
2803
|
+
description: "Renders <thead> with bgMuted background. Accepts Table.Row children."
|
|
2804
|
+
},
|
|
2805
|
+
{
|
|
2806
|
+
name: "Table.Body",
|
|
2807
|
+
type: "component",
|
|
2808
|
+
required: !1,
|
|
2809
|
+
description: "Renders <tbody>. Accepts Table.Row children."
|
|
2810
|
+
},
|
|
2811
|
+
{
|
|
2812
|
+
name: "Table.Foot",
|
|
2813
|
+
type: "component",
|
|
2814
|
+
required: !1,
|
|
2815
|
+
description: "Renders <tfoot> with bgMuted background."
|
|
2816
|
+
},
|
|
2817
|
+
{
|
|
2818
|
+
name: "Table.Row",
|
|
2819
|
+
type: "component",
|
|
2820
|
+
required: !1,
|
|
2821
|
+
description: "Renders <tr> with a hover highlight. Accepts Table.Cell children."
|
|
2822
|
+
},
|
|
2823
|
+
{
|
|
2824
|
+
name: "Table.Cell",
|
|
2825
|
+
type: "component",
|
|
2826
|
+
required: !1,
|
|
2827
|
+
description: 'Renders <td> by default or <th scope="col"> when as="th". Header cells are semibold + secondary colour; data cells are regular + primary.'
|
|
2828
|
+
}
|
|
2829
|
+
],
|
|
2830
|
+
usageExamples: [
|
|
2831
|
+
{
|
|
2832
|
+
title: "Basic",
|
|
2833
|
+
code: `<Table>
|
|
2834
|
+
<Table.Head>
|
|
2835
|
+
<Table.Row>
|
|
2836
|
+
<Table.Cell as="th">Name</Table.Cell>
|
|
2837
|
+
<Table.Cell as="th">Role</Table.Cell>
|
|
2838
|
+
</Table.Row>
|
|
2839
|
+
</Table.Head>
|
|
2840
|
+
<Table.Body>
|
|
2841
|
+
<Table.Row>
|
|
2842
|
+
<Table.Cell>Alice</Table.Cell>
|
|
2843
|
+
<Table.Cell>Engineer</Table.Cell>
|
|
2844
|
+
</Table.Row>
|
|
2845
|
+
</Table.Body>
|
|
2846
|
+
</Table>`
|
|
2847
|
+
},
|
|
2848
|
+
{
|
|
2849
|
+
title: "Striped",
|
|
2850
|
+
code: `<Table striped>
|
|
2851
|
+
<Table.Head>…</Table.Head>
|
|
2852
|
+
<Table.Body>…</Table.Body>
|
|
2853
|
+
</Table>`
|
|
2854
|
+
},
|
|
2855
|
+
{
|
|
2856
|
+
title: "Custom cell content",
|
|
2857
|
+
code: `<Table.Cell>
|
|
2858
|
+
<Badge variant="success">Active</Badge>
|
|
2859
|
+
</Table.Cell>`
|
|
2860
|
+
}
|
|
2861
|
+
],
|
|
2862
|
+
compositionGraph: [
|
|
2863
|
+
{ componentId: "table-head", componentName: "Table.Head", role: "head", required: !1 },
|
|
2864
|
+
{ componentId: "table-body", componentName: "Table.Body", role: "body", required: !1 },
|
|
2865
|
+
{ componentId: "table-foot", componentName: "Table.Foot", role: "foot", required: !1 },
|
|
2866
|
+
{ componentId: "table-row", componentName: "Table.Row", role: "row", required: !1 },
|
|
2867
|
+
{ componentId: "table-cell", componentName: "Table.Cell", role: "cell", required: !1 }
|
|
2868
|
+
],
|
|
2869
|
+
accessibility: {
|
|
2870
|
+
role: "table",
|
|
2871
|
+
ariaAttributes: ['scope="col" on th cells'],
|
|
2872
|
+
keyboardInteractions: ["Standard browser table navigation"]
|
|
2873
|
+
}
|
|
2874
|
+
};
|
|
2875
|
+
function Rn({
|
|
2082
2876
|
label: t,
|
|
2083
2877
|
htmlFor: n,
|
|
2084
2878
|
required: a = !1,
|
|
@@ -2087,17 +2881,17 @@ function pn({
|
|
|
2087
2881
|
children: i,
|
|
2088
2882
|
style: l
|
|
2089
2883
|
}) {
|
|
2090
|
-
const
|
|
2884
|
+
const s = r ?? o, u = r ? "danger" : "secondary";
|
|
2091
2885
|
return /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)", ...l }, children: [
|
|
2092
2886
|
t && /* @__PURE__ */ h("div", { style: { display: "flex", alignItems: "baseline", gap: "var(--lucent-space-1)" }, children: [
|
|
2093
|
-
/* @__PURE__ */ e(
|
|
2094
|
-
a && /* @__PURE__ */ e(
|
|
2887
|
+
/* @__PURE__ */ e(E, { as: "label", size: "sm", weight: "medium", lineHeight: "tight", ...n !== void 0 && { htmlFor: n }, children: t }),
|
|
2888
|
+
a && /* @__PURE__ */ e(E, { as: "span", size: "sm", color: "danger", lineHeight: "tight", "aria-hidden": "true", children: "*" })
|
|
2095
2889
|
] }),
|
|
2096
2890
|
i,
|
|
2097
|
-
|
|
2891
|
+
s && /* @__PURE__ */ e(E, { size: "xs", color: u, lineHeight: "tight", children: s })
|
|
2098
2892
|
] });
|
|
2099
2893
|
}
|
|
2100
|
-
const
|
|
2894
|
+
const Nn = {
|
|
2101
2895
|
id: "form-field",
|
|
2102
2896
|
name: "FormField",
|
|
2103
2897
|
tier: "molecule",
|
|
@@ -2183,11 +2977,11 @@ const fn = {
|
|
|
2183
2977
|
ariaAttributes: ["aria-required", "aria-describedby"],
|
|
2184
2978
|
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.'
|
|
2185
2979
|
}
|
|
2186
|
-
},
|
|
2980
|
+
}, ht = () => /* @__PURE__ */ h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
|
|
2187
2981
|
/* @__PURE__ */ e("circle", { cx: "6.5", cy: "6.5", r: "4", stroke: "currentColor", strokeWidth: "1.5" }),
|
|
2188
2982
|
/* @__PURE__ */ e("path", { d: "M9.5 9.5L13 13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
|
|
2189
|
-
] }),
|
|
2190
|
-
function
|
|
2983
|
+
] }), mt = () => /* @__PURE__ */ e("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ e("path", { d: "M3 3L11 11M11 3L3 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
|
|
2984
|
+
function Ln({
|
|
2191
2985
|
value: t,
|
|
2192
2986
|
onChange: n,
|
|
2193
2987
|
placeholder: a = "Search…",
|
|
@@ -2195,23 +2989,23 @@ function hn({
|
|
|
2195
2989
|
onResultSelect: r,
|
|
2196
2990
|
isLoading: i = !1,
|
|
2197
2991
|
disabled: l = !1,
|
|
2198
|
-
id:
|
|
2199
|
-
style:
|
|
2992
|
+
id: s,
|
|
2993
|
+
style: u
|
|
2200
2994
|
}) {
|
|
2201
|
-
const [
|
|
2995
|
+
const [m, b] = M(!1), [d, p] = M(null), c = F(null), v = m && o.length > 0, y = () => {
|
|
2202
2996
|
n("");
|
|
2203
|
-
},
|
|
2204
|
-
r == null || r(
|
|
2205
|
-
},
|
|
2206
|
-
|
|
2997
|
+
}, w = (k) => {
|
|
2998
|
+
r == null || r(k), b(!1);
|
|
2999
|
+
}, g = () => {
|
|
3000
|
+
c.current = setTimeout(() => b(!1), 150);
|
|
2207
3001
|
}, x = () => {
|
|
2208
|
-
|
|
2209
|
-
},
|
|
3002
|
+
c.current && clearTimeout(c.current), b(!0);
|
|
3003
|
+
}, I = i ? /* @__PURE__ */ e(Re, { size: "sm" }) : t ? /* @__PURE__ */ e(
|
|
2210
3004
|
"button",
|
|
2211
3005
|
{
|
|
2212
3006
|
type: "button",
|
|
2213
3007
|
"aria-label": "Clear search",
|
|
2214
|
-
onClick:
|
|
3008
|
+
onClick: y,
|
|
2215
3009
|
style: {
|
|
2216
3010
|
display: "flex",
|
|
2217
3011
|
alignItems: "center",
|
|
@@ -2222,29 +3016,29 @@ function hn({
|
|
|
2222
3016
|
borderRadius: "var(--lucent-radius-sm)",
|
|
2223
3017
|
color: "var(--lucent-text-secondary)"
|
|
2224
3018
|
},
|
|
2225
|
-
onMouseEnter: (
|
|
2226
|
-
|
|
3019
|
+
onMouseEnter: (k) => {
|
|
3020
|
+
k.currentTarget.style.color = "var(--lucent-text-primary)";
|
|
2227
3021
|
},
|
|
2228
|
-
onMouseLeave: (
|
|
2229
|
-
|
|
3022
|
+
onMouseLeave: (k) => {
|
|
3023
|
+
k.currentTarget.style.color = "var(--lucent-text-secondary)";
|
|
2230
3024
|
},
|
|
2231
|
-
children: /* @__PURE__ */ e(
|
|
3025
|
+
children: /* @__PURE__ */ e(mt, {})
|
|
2232
3026
|
}
|
|
2233
3027
|
) : null;
|
|
2234
|
-
return /* @__PURE__ */ h("div", { style: { position: "relative", ...
|
|
3028
|
+
return /* @__PURE__ */ h("div", { style: { position: "relative", ...u }, children: [
|
|
2235
3029
|
/* @__PURE__ */ e(
|
|
2236
|
-
|
|
3030
|
+
de,
|
|
2237
3031
|
{
|
|
2238
|
-
id:
|
|
3032
|
+
id: s,
|
|
2239
3033
|
type: "search",
|
|
2240
3034
|
value: t,
|
|
2241
|
-
onChange: (
|
|
3035
|
+
onChange: (k) => n(k.target.value),
|
|
2242
3036
|
placeholder: a,
|
|
2243
3037
|
disabled: l,
|
|
2244
|
-
leftElement: /* @__PURE__ */ e(
|
|
2245
|
-
rightElement:
|
|
3038
|
+
leftElement: /* @__PURE__ */ e(ht, {}),
|
|
3039
|
+
rightElement: I ?? void 0,
|
|
2246
3040
|
onFocus: x,
|
|
2247
|
-
onBlur:
|
|
3041
|
+
onBlur: g
|
|
2248
3042
|
}
|
|
2249
3043
|
),
|
|
2250
3044
|
v && /* @__PURE__ */ e(
|
|
@@ -2263,29 +3057,29 @@ function hn({
|
|
|
2263
3057
|
boxShadow: "var(--lucent-shadow-md)",
|
|
2264
3058
|
overflow: "hidden"
|
|
2265
3059
|
},
|
|
2266
|
-
children: o.map((
|
|
3060
|
+
children: o.map((k, f) => /* @__PURE__ */ e(
|
|
2267
3061
|
"div",
|
|
2268
3062
|
{
|
|
2269
3063
|
role: "option",
|
|
2270
3064
|
"aria-selected": !1,
|
|
2271
|
-
onMouseDown: () => k
|
|
2272
|
-
onMouseEnter: () =>
|
|
2273
|
-
onMouseLeave: () =>
|
|
3065
|
+
onMouseDown: () => w(k),
|
|
3066
|
+
onMouseEnter: () => p(f),
|
|
3067
|
+
onMouseLeave: () => p(null),
|
|
2274
3068
|
style: {
|
|
2275
3069
|
padding: "var(--lucent-space-2) var(--lucent-space-3)",
|
|
2276
3070
|
cursor: "pointer",
|
|
2277
|
-
background: d ===
|
|
3071
|
+
background: d === f ? "var(--lucent-bg-subtle)" : "transparent",
|
|
2278
3072
|
transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)"
|
|
2279
3073
|
},
|
|
2280
|
-
children: /* @__PURE__ */ e(
|
|
3074
|
+
children: /* @__PURE__ */ e(E, { as: "span", size: "md", children: k.label })
|
|
2281
3075
|
},
|
|
2282
|
-
|
|
3076
|
+
k.id
|
|
2283
3077
|
))
|
|
2284
3078
|
}
|
|
2285
3079
|
)
|
|
2286
3080
|
] });
|
|
2287
3081
|
}
|
|
2288
|
-
const
|
|
3082
|
+
const $n = {
|
|
2289
3083
|
id: "search-input",
|
|
2290
3084
|
name: "SearchInput",
|
|
2291
3085
|
tier: "molecule",
|
|
@@ -2381,23 +3175,23 @@ const [results, setResults] = useState([]);
|
|
|
2381
3175
|
keyboardInteractions: ["Enter to select focused result", "Escape to close dropdown"],
|
|
2382
3176
|
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.'
|
|
2383
3177
|
}
|
|
2384
|
-
},
|
|
3178
|
+
}, gt = {
|
|
2385
3179
|
none: "0",
|
|
2386
3180
|
sm: "var(--lucent-space-3)",
|
|
2387
3181
|
md: "var(--lucent-space-4)",
|
|
2388
3182
|
lg: "var(--lucent-space-6)"
|
|
2389
|
-
},
|
|
3183
|
+
}, bt = {
|
|
2390
3184
|
none: "var(--lucent-shadow-none)",
|
|
2391
3185
|
sm: "var(--lucent-shadow-sm)",
|
|
2392
3186
|
md: "var(--lucent-shadow-md)",
|
|
2393
3187
|
lg: "var(--lucent-shadow-lg)"
|
|
2394
|
-
},
|
|
3188
|
+
}, vt = {
|
|
2395
3189
|
none: "var(--lucent-radius-none)",
|
|
2396
3190
|
sm: "var(--lucent-radius-sm)",
|
|
2397
3191
|
md: "var(--lucent-radius-md)",
|
|
2398
3192
|
lg: "var(--lucent-radius-lg)"
|
|
2399
3193
|
};
|
|
2400
|
-
function
|
|
3194
|
+
function Pn({
|
|
2401
3195
|
header: t,
|
|
2402
3196
|
footer: n,
|
|
2403
3197
|
children: a,
|
|
@@ -2406,7 +3200,7 @@ function gn({
|
|
|
2406
3200
|
radius: i = "md",
|
|
2407
3201
|
style: l
|
|
2408
3202
|
}) {
|
|
2409
|
-
const
|
|
3203
|
+
const s = gt[o], u = vt[i];
|
|
2410
3204
|
return /* @__PURE__ */ h(
|
|
2411
3205
|
"div",
|
|
2412
3206
|
{
|
|
@@ -2415,8 +3209,8 @@ function gn({
|
|
|
2415
3209
|
flexDirection: "column",
|
|
2416
3210
|
background: "var(--lucent-surface-default)",
|
|
2417
3211
|
border: "1px solid var(--lucent-border-default)",
|
|
2418
|
-
borderRadius:
|
|
2419
|
-
boxShadow:
|
|
3212
|
+
borderRadius: u,
|
|
3213
|
+
boxShadow: bt[r],
|
|
2420
3214
|
overflow: "hidden",
|
|
2421
3215
|
boxSizing: "border-box",
|
|
2422
3216
|
...l
|
|
@@ -2426,18 +3220,18 @@ function gn({
|
|
|
2426
3220
|
"div",
|
|
2427
3221
|
{
|
|
2428
3222
|
style: {
|
|
2429
|
-
padding:
|
|
3223
|
+
padding: s,
|
|
2430
3224
|
borderBottom: "1px solid var(--lucent-border-default)"
|
|
2431
3225
|
},
|
|
2432
3226
|
children: t
|
|
2433
3227
|
}
|
|
2434
3228
|
),
|
|
2435
|
-
/* @__PURE__ */ e("div", { style: { padding:
|
|
3229
|
+
/* @__PURE__ */ e("div", { style: { padding: s, flex: 1 }, children: a }),
|
|
2436
3230
|
n != null && /* @__PURE__ */ e(
|
|
2437
3231
|
"div",
|
|
2438
3232
|
{
|
|
2439
3233
|
style: {
|
|
2440
|
-
padding:
|
|
3234
|
+
padding: s,
|
|
2441
3235
|
borderTop: "1px solid var(--lucent-border-default)"
|
|
2442
3236
|
},
|
|
2443
3237
|
children: n
|
|
@@ -2447,7 +3241,7 @@ function gn({
|
|
|
2447
3241
|
}
|
|
2448
3242
|
);
|
|
2449
3243
|
}
|
|
2450
|
-
const
|
|
3244
|
+
const Wn = {
|
|
2451
3245
|
id: "card",
|
|
2452
3246
|
name: "Card",
|
|
2453
3247
|
tier: "molecule",
|
|
@@ -2532,30 +3326,30 @@ const vn = {
|
|
|
2532
3326
|
accessibility: {
|
|
2533
3327
|
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."
|
|
2534
3328
|
}
|
|
2535
|
-
},
|
|
3329
|
+
}, yt = {
|
|
2536
3330
|
info: { bg: "var(--lucent-info-subtle)", border: "var(--lucent-info-default)", iconColor: "var(--lucent-info-text)", textColor: "info" },
|
|
2537
3331
|
success: { bg: "var(--lucent-success-subtle)", border: "var(--lucent-success-default)", iconColor: "var(--lucent-success-text)", textColor: "success" },
|
|
2538
3332
|
warning: { bg: "var(--lucent-warning-subtle)", border: "var(--lucent-warning-default)", iconColor: "var(--lucent-warning-text)", textColor: "warning" },
|
|
2539
3333
|
danger: { bg: "var(--lucent-danger-subtle)", border: "var(--lucent-danger-default)", iconColor: "var(--lucent-danger-text)", textColor: "danger" }
|
|
2540
|
-
},
|
|
3334
|
+
}, xt = () => /* @__PURE__ */ h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
|
|
2541
3335
|
/* @__PURE__ */ e("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
|
|
2542
3336
|
/* @__PURE__ */ e("path", { d: "M8 5.5V8.5M8 10.5V11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
|
|
2543
|
-
] }),
|
|
3337
|
+
] }), wt = () => /* @__PURE__ */ h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
|
|
2544
3338
|
/* @__PURE__ */ e("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
|
|
2545
3339
|
/* @__PURE__ */ e("path", { d: "M5 8L7 10L11 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
2546
|
-
] }),
|
|
3340
|
+
] }), kt = () => /* @__PURE__ */ h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
|
|
2547
3341
|
/* @__PURE__ */ e("path", { d: "M8 2L14.5 13H1.5L8 2Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
|
|
2548
3342
|
/* @__PURE__ */ e("path", { d: "M8 6V9M8 11V11.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
|
|
2549
|
-
] }),
|
|
3343
|
+
] }), St = () => /* @__PURE__ */ h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
|
|
2550
3344
|
/* @__PURE__ */ e("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
|
|
2551
3345
|
/* @__PURE__ */ e("path", { d: "M5.5 5.5L10.5 10.5M10.5 5.5L5.5 10.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
|
|
2552
|
-
] }),
|
|
2553
|
-
info: /* @__PURE__ */ e(
|
|
2554
|
-
success: /* @__PURE__ */ e(
|
|
2555
|
-
warning: /* @__PURE__ */ e(
|
|
2556
|
-
danger: /* @__PURE__ */ e(
|
|
2557
|
-
},
|
|
2558
|
-
function
|
|
3346
|
+
] }), Tt = {
|
|
3347
|
+
info: /* @__PURE__ */ e(xt, {}),
|
|
3348
|
+
success: /* @__PURE__ */ e(wt, {}),
|
|
3349
|
+
warning: /* @__PURE__ */ e(kt, {}),
|
|
3350
|
+
danger: /* @__PURE__ */ e(St, {})
|
|
3351
|
+
}, Ct = () => /* @__PURE__ */ e("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ e("path", { d: "M3 3L11 11M11 3L3 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
|
|
3352
|
+
function Vn({
|
|
2559
3353
|
variant: t = "info",
|
|
2560
3354
|
title: n,
|
|
2561
3355
|
children: a,
|
|
@@ -2563,7 +3357,7 @@ function bn({
|
|
|
2563
3357
|
icon: r,
|
|
2564
3358
|
style: i
|
|
2565
3359
|
}) {
|
|
2566
|
-
const l =
|
|
3360
|
+
const l = yt[t], s = r ?? Tt[t];
|
|
2567
3361
|
return /* @__PURE__ */ h(
|
|
2568
3362
|
"div",
|
|
2569
3363
|
{
|
|
@@ -2590,12 +3384,12 @@ function bn({
|
|
|
2590
3384
|
alignItems: "center",
|
|
2591
3385
|
paddingTop: 2
|
|
2592
3386
|
},
|
|
2593
|
-
children:
|
|
3387
|
+
children: s
|
|
2594
3388
|
}
|
|
2595
3389
|
),
|
|
2596
3390
|
/* @__PURE__ */ h("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)" }, children: [
|
|
2597
|
-
n && /* @__PURE__ */ e(
|
|
2598
|
-
a && /* @__PURE__ */ e(
|
|
3391
|
+
n && /* @__PURE__ */ e(E, { as: "span", size: "sm", weight: "semibold", color: l.textColor, lineHeight: "tight", children: n }),
|
|
3392
|
+
a && /* @__PURE__ */ e(E, { as: "span", size: "sm", color: l.textColor, lineHeight: "base", children: a })
|
|
2599
3393
|
] }),
|
|
2600
3394
|
o && /* @__PURE__ */ e(
|
|
2601
3395
|
"button",
|
|
@@ -2615,20 +3409,20 @@ function bn({
|
|
|
2615
3409
|
color: l.iconColor,
|
|
2616
3410
|
opacity: 0.7
|
|
2617
3411
|
},
|
|
2618
|
-
onMouseEnter: (
|
|
2619
|
-
|
|
3412
|
+
onMouseEnter: (u) => {
|
|
3413
|
+
u.currentTarget.style.opacity = "1";
|
|
2620
3414
|
},
|
|
2621
|
-
onMouseLeave: (
|
|
2622
|
-
|
|
3415
|
+
onMouseLeave: (u) => {
|
|
3416
|
+
u.currentTarget.style.opacity = "0.7";
|
|
2623
3417
|
},
|
|
2624
|
-
children: /* @__PURE__ */ e(
|
|
3418
|
+
children: /* @__PURE__ */ e(Ct, {})
|
|
2625
3419
|
}
|
|
2626
3420
|
)
|
|
2627
3421
|
]
|
|
2628
3422
|
}
|
|
2629
3423
|
);
|
|
2630
3424
|
}
|
|
2631
|
-
const
|
|
3425
|
+
const On = {
|
|
2632
3426
|
id: "alert",
|
|
2633
3427
|
name: "Alert",
|
|
2634
3428
|
tier: "molecule",
|
|
@@ -2703,7 +3497,7 @@ const yn = {
|
|
|
2703
3497
|
notes: 'role="alert" causes screen readers to announce the content immediately when rendered. For non-urgent status messages, consider using role="status" instead by overriding via style/wrapper.'
|
|
2704
3498
|
}
|
|
2705
3499
|
};
|
|
2706
|
-
function
|
|
3500
|
+
function Hn({
|
|
2707
3501
|
illustration: t,
|
|
2708
3502
|
title: n,
|
|
2709
3503
|
description: a,
|
|
@@ -2738,15 +3532,15 @@ function xn({
|
|
|
2738
3532
|
}
|
|
2739
3533
|
),
|
|
2740
3534
|
/* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)" }, children: [
|
|
2741
|
-
/* @__PURE__ */ e(
|
|
2742
|
-
a && /* @__PURE__ */ e(
|
|
3535
|
+
/* @__PURE__ */ e(E, { as: "h3", size: "lg", weight: "semibold", align: "center", lineHeight: "tight", children: n }),
|
|
3536
|
+
a && /* @__PURE__ */ e(E, { size: "sm", color: "secondary", align: "center", lineHeight: "relaxed", children: a })
|
|
2743
3537
|
] }),
|
|
2744
3538
|
o != null && /* @__PURE__ */ e("div", { children: o })
|
|
2745
3539
|
]
|
|
2746
3540
|
}
|
|
2747
3541
|
);
|
|
2748
3542
|
}
|
|
2749
|
-
const
|
|
3543
|
+
const jn = {
|
|
2750
3544
|
id: "empty-state",
|
|
2751
3545
|
name: "EmptyState",
|
|
2752
3546
|
tier: "molecule",
|
|
@@ -2817,16 +3611,16 @@ const wn = {
|
|
|
2817
3611
|
accessibility: {
|
|
2818
3612
|
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."
|
|
2819
3613
|
}
|
|
2820
|
-
},
|
|
3614
|
+
}, It = {
|
|
2821
3615
|
text: "1em",
|
|
2822
3616
|
circle: 40,
|
|
2823
3617
|
rectangle: 40
|
|
2824
|
-
},
|
|
3618
|
+
}, Mt = {
|
|
2825
3619
|
text: "var(--lucent-radius-sm)",
|
|
2826
3620
|
circle: "var(--lucent-radius-full)",
|
|
2827
3621
|
rectangle: "var(--lucent-radius-md)"
|
|
2828
3622
|
};
|
|
2829
|
-
function
|
|
3623
|
+
function te({
|
|
2830
3624
|
width: t,
|
|
2831
3625
|
height: n,
|
|
2832
3626
|
radius: a,
|
|
@@ -2850,7 +3644,7 @@ function ee({
|
|
|
2850
3644
|
}
|
|
2851
3645
|
);
|
|
2852
3646
|
}
|
|
2853
|
-
function
|
|
3647
|
+
function Un({
|
|
2854
3648
|
variant: t = "rectangle",
|
|
2855
3649
|
width: n = "100%",
|
|
2856
3650
|
height: a,
|
|
@@ -2859,39 +3653,39 @@ function kn({
|
|
|
2859
3653
|
radius: i,
|
|
2860
3654
|
style: l
|
|
2861
3655
|
}) {
|
|
2862
|
-
const
|
|
3656
|
+
const s = a ?? It[t], u = i ?? Mt[t], m = r ? /* @__PURE__ */ e("style", { children: `
|
|
2863
3657
|
@keyframes lucent-skeleton-shimmer {
|
|
2864
3658
|
0% { background-position: 200% 0; }
|
|
2865
3659
|
100% { background-position: -200% 0; }
|
|
2866
3660
|
}
|
|
2867
3661
|
` }) : null;
|
|
2868
|
-
return t === "text" && o > 1 ? /* @__PURE__ */ h(
|
|
2869
|
-
|
|
2870
|
-
/* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)", ...l }, children: Array.from({ length: o }).map((
|
|
2871
|
-
|
|
3662
|
+
return t === "text" && o > 1 ? /* @__PURE__ */ h(W, { children: [
|
|
3663
|
+
m,
|
|
3664
|
+
/* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)", ...l }, children: Array.from({ length: o }).map((b, d) => /* @__PURE__ */ e(
|
|
3665
|
+
te,
|
|
2872
3666
|
{
|
|
2873
3667
|
width: d === o - 1 ? "70%" : n,
|
|
2874
|
-
height:
|
|
2875
|
-
radius:
|
|
3668
|
+
height: s,
|
|
3669
|
+
radius: u,
|
|
2876
3670
|
animate: r
|
|
2877
3671
|
},
|
|
2878
3672
|
d
|
|
2879
3673
|
)) })
|
|
2880
|
-
] }) : /* @__PURE__ */ h(
|
|
2881
|
-
|
|
3674
|
+
] }) : /* @__PURE__ */ h(W, { children: [
|
|
3675
|
+
m,
|
|
2882
3676
|
/* @__PURE__ */ e(
|
|
2883
|
-
|
|
3677
|
+
te,
|
|
2884
3678
|
{
|
|
2885
3679
|
width: t === "circle" ? a ?? 40 : n,
|
|
2886
|
-
height:
|
|
2887
|
-
radius:
|
|
3680
|
+
height: s,
|
|
3681
|
+
radius: u,
|
|
2888
3682
|
animate: r,
|
|
2889
3683
|
...l !== void 0 && { style: l }
|
|
2890
3684
|
}
|
|
2891
3685
|
)
|
|
2892
3686
|
] });
|
|
2893
3687
|
}
|
|
2894
|
-
const
|
|
3688
|
+
const Gn = {
|
|
2895
3689
|
id: "skeleton",
|
|
2896
3690
|
name: "Skeleton",
|
|
2897
3691
|
tier: "molecule",
|
|
@@ -2978,7 +3772,7 @@ const Sn = {
|
|
|
2978
3772
|
notes: 'Wrap loading regions with aria-busy="true" on the container so screen readers know content is loading. Individual Skeleton elements are presentational and do not need ARIA attributes themselves.'
|
|
2979
3773
|
}
|
|
2980
3774
|
};
|
|
2981
|
-
function
|
|
3775
|
+
function _n({ items: t, separator: n = "/", style: a }) {
|
|
2982
3776
|
return /* @__PURE__ */ e("nav", { "aria-label": "Breadcrumb", style: a, children: /* @__PURE__ */ e(
|
|
2983
3777
|
"ol",
|
|
2984
3778
|
{
|
|
@@ -2995,7 +3789,7 @@ function Tn({ items: t, separator: n = "/", style: a }) {
|
|
|
2995
3789
|
children: t.map((o, r) => {
|
|
2996
3790
|
const i = r === t.length - 1;
|
|
2997
3791
|
return /* @__PURE__ */ h("li", { style: { display: "flex", alignItems: "center", gap: "var(--lucent-space-1)" }, children: [
|
|
2998
|
-
i ? /* @__PURE__ */ e(
|
|
3792
|
+
i ? /* @__PURE__ */ e(E, { size: "sm", color: "primary", as: "span", "aria-current": "page", children: o.label }) : o.href != null ? /* @__PURE__ */ e(
|
|
2999
3793
|
"a",
|
|
3000
3794
|
{
|
|
3001
3795
|
href: o.href,
|
|
@@ -3044,20 +3838,20 @@ function Tn({ items: t, separator: n = "/", style: a }) {
|
|
|
3044
3838
|
}
|
|
3045
3839
|
) });
|
|
3046
3840
|
}
|
|
3047
|
-
function
|
|
3048
|
-
var
|
|
3049
|
-
const i = a !== void 0, [l,
|
|
3050
|
-
|
|
3051
|
-
const x = t.findIndex((
|
|
3052
|
-
|
|
3053
|
-
}, [
|
|
3054
|
-
const
|
|
3055
|
-
i ||
|
|
3056
|
-
},
|
|
3841
|
+
function Yn({ tabs: t, defaultValue: n, value: a, onChange: o, style: r }) {
|
|
3842
|
+
var g;
|
|
3843
|
+
const i = a !== void 0, [l, s] = M(n ?? ((g = t[0]) == null ? void 0 : g.value) ?? ""), u = i ? a : l, [m, b] = M(null), d = F([]), [p, c] = M(null), v = F(!1);
|
|
3844
|
+
se(() => {
|
|
3845
|
+
const x = t.findIndex((k) => k.value === u), I = d.current[x];
|
|
3846
|
+
I && (c({ left: I.offsetLeft, width: I.offsetWidth, animate: v.current }), v.current = !0);
|
|
3847
|
+
}, [u, t]);
|
|
3848
|
+
const y = (x) => {
|
|
3849
|
+
i || s(x), o == null || o(x);
|
|
3850
|
+
}, w = (x, I) => {
|
|
3057
3851
|
var D;
|
|
3058
|
-
const
|
|
3059
|
-
let
|
|
3060
|
-
x.key === "ArrowRight" && (
|
|
3852
|
+
const k = t.map((T, C) => T.disabled ? -1 : C).filter((T) => T !== -1), f = k.indexOf(I);
|
|
3853
|
+
let S = -1;
|
|
3854
|
+
x.key === "ArrowRight" && (S = k[(f + 1) % k.length] ?? -1), x.key === "ArrowLeft" && (S = k[(f - 1 + k.length) % k.length] ?? -1), x.key === "Home" && (S = k[0] ?? -1), x.key === "End" && (S = k[k.length - 1] ?? -1), S !== -1 && (x.preventDefault(), (D = d.current[S]) == null || D.focus(), y(t[S].value));
|
|
3061
3855
|
};
|
|
3062
3856
|
return /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", ...r }, children: [
|
|
3063
3857
|
/* @__PURE__ */ h(
|
|
@@ -3070,37 +3864,37 @@ function Cn({ tabs: t, defaultValue: n, value: a, onChange: o, style: r }) {
|
|
|
3070
3864
|
borderBottom: "1px solid var(--lucent-border-default)"
|
|
3071
3865
|
},
|
|
3072
3866
|
children: [
|
|
3073
|
-
t.map((x,
|
|
3074
|
-
const
|
|
3867
|
+
t.map((x, I) => {
|
|
3868
|
+
const k = x.value === u, f = x.disabled ?? !1;
|
|
3075
3869
|
return /* @__PURE__ */ e(
|
|
3076
3870
|
"button",
|
|
3077
3871
|
{
|
|
3078
|
-
ref: (
|
|
3079
|
-
d.current[
|
|
3872
|
+
ref: (S) => {
|
|
3873
|
+
d.current[I] = S;
|
|
3080
3874
|
},
|
|
3081
3875
|
role: "tab",
|
|
3082
|
-
"aria-selected":
|
|
3876
|
+
"aria-selected": k,
|
|
3083
3877
|
"aria-controls": `lucent-tabpanel-${x.value}`,
|
|
3084
3878
|
id: `lucent-tab-${x.value}`,
|
|
3085
|
-
disabled:
|
|
3086
|
-
tabIndex:
|
|
3879
|
+
disabled: f,
|
|
3880
|
+
tabIndex: k ? 0 : -1,
|
|
3087
3881
|
onClick: () => {
|
|
3088
|
-
|
|
3882
|
+
f || y(x.value);
|
|
3089
3883
|
},
|
|
3090
|
-
onKeyDown: (
|
|
3884
|
+
onKeyDown: (S) => w(S, I),
|
|
3091
3885
|
onMouseEnter: () => {
|
|
3092
|
-
|
|
3886
|
+
f || b(I);
|
|
3093
3887
|
},
|
|
3094
|
-
onMouseLeave: () =>
|
|
3888
|
+
onMouseLeave: () => b(null),
|
|
3095
3889
|
style: {
|
|
3096
3890
|
padding: "var(--lucent-space-1) var(--lucent-space-2) var(--lucent-space-3)",
|
|
3097
3891
|
background: "none",
|
|
3098
3892
|
border: "none",
|
|
3099
|
-
cursor:
|
|
3893
|
+
cursor: f ? "not-allowed" : "pointer",
|
|
3100
3894
|
fontFamily: "var(--lucent-font-family-base)",
|
|
3101
3895
|
fontSize: "var(--lucent-font-size-md)",
|
|
3102
|
-
fontWeight:
|
|
3103
|
-
color:
|
|
3896
|
+
fontWeight: k ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
|
|
3897
|
+
color: f ? "var(--lucent-text-disabled)" : k ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
|
|
3104
3898
|
transition: "color var(--lucent-duration-fast) var(--lucent-easing-default)",
|
|
3105
3899
|
whiteSpace: "nowrap",
|
|
3106
3900
|
outline: "none"
|
|
@@ -3109,26 +3903,26 @@ function Cn({ tabs: t, defaultValue: n, value: a, onChange: o, style: r }) {
|
|
|
3109
3903
|
display: "block",
|
|
3110
3904
|
padding: "var(--lucent-space-1) var(--lucent-space-3)",
|
|
3111
3905
|
borderRadius: "var(--lucent-radius-md)",
|
|
3112
|
-
background:
|
|
3906
|
+
background: m === I && !k ? "var(--lucent-bg-subtle)" : "transparent",
|
|
3113
3907
|
transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)"
|
|
3114
3908
|
}, children: x.label })
|
|
3115
3909
|
},
|
|
3116
3910
|
x.value
|
|
3117
3911
|
);
|
|
3118
3912
|
}),
|
|
3119
|
-
|
|
3913
|
+
p != null && /* @__PURE__ */ e(
|
|
3120
3914
|
"span",
|
|
3121
3915
|
{
|
|
3122
3916
|
"aria-hidden": !0,
|
|
3123
3917
|
style: {
|
|
3124
3918
|
position: "absolute",
|
|
3125
3919
|
bottom: 0,
|
|
3126
|
-
left:
|
|
3127
|
-
width:
|
|
3920
|
+
left: p.left,
|
|
3921
|
+
width: p.width,
|
|
3128
3922
|
height: 2,
|
|
3129
3923
|
background: "var(--lucent-accent-default)",
|
|
3130
3924
|
borderRadius: "var(--lucent-radius-sm)",
|
|
3131
|
-
transition:
|
|
3925
|
+
transition: p.animate ? "left 220ms var(--lucent-easing-default), width 220ms var(--lucent-easing-default)" : "none"
|
|
3132
3926
|
}
|
|
3133
3927
|
}
|
|
3134
3928
|
)
|
|
@@ -3141,7 +3935,7 @@ function Cn({ tabs: t, defaultValue: n, value: a, onChange: o, style: r }) {
|
|
|
3141
3935
|
role: "tabpanel",
|
|
3142
3936
|
id: `lucent-tabpanel-${x.value}`,
|
|
3143
3937
|
"aria-labelledby": `lucent-tab-${x.value}`,
|
|
3144
|
-
hidden: x.value !==
|
|
3938
|
+
hidden: x.value !== u,
|
|
3145
3939
|
style: { padding: "var(--lucent-space-4) 0", outline: "none" },
|
|
3146
3940
|
tabIndex: 0,
|
|
3147
3941
|
children: x.content
|
|
@@ -3150,39 +3944,39 @@ function Cn({ tabs: t, defaultValue: n, value: a, onChange: o, style: r }) {
|
|
|
3150
3944
|
))
|
|
3151
3945
|
] });
|
|
3152
3946
|
}
|
|
3153
|
-
const
|
|
3947
|
+
const zt = `
|
|
3154
3948
|
@keyframes lucent-collapsible-open {
|
|
3155
3949
|
from { opacity: 0; transform: translateY(-4px); }
|
|
3156
3950
|
to { opacity: 1; transform: translateY(0); }
|
|
3157
3951
|
}
|
|
3158
3952
|
`;
|
|
3159
|
-
function
|
|
3160
|
-
const l = o !== void 0, [
|
|
3161
|
-
|
|
3162
|
-
const
|
|
3163
|
-
if (
|
|
3164
|
-
if (
|
|
3165
|
-
const
|
|
3166
|
-
|
|
3167
|
-
const
|
|
3168
|
-
|
|
3953
|
+
function Kn({ trigger: t, children: n, defaultOpen: a = !1, open: o, onOpenChange: r, style: i }) {
|
|
3954
|
+
const l = o !== void 0, [s, u] = M(a), m = l ? o : s, b = F(null), [d, p] = M(m ? void 0 : 0), c = F(!1);
|
|
3955
|
+
L(() => {
|
|
3956
|
+
const y = b.current;
|
|
3957
|
+
if (y)
|
|
3958
|
+
if (m) {
|
|
3959
|
+
const w = y.scrollHeight;
|
|
3960
|
+
p(w), c.current = !0;
|
|
3961
|
+
const g = setTimeout(() => {
|
|
3962
|
+
p(void 0), c.current = !1;
|
|
3169
3963
|
}, 220);
|
|
3170
|
-
return () => clearTimeout(
|
|
3964
|
+
return () => clearTimeout(g);
|
|
3171
3965
|
} else
|
|
3172
|
-
|
|
3173
|
-
}, [
|
|
3966
|
+
p(y.scrollHeight), y.getBoundingClientRect(), p(0);
|
|
3967
|
+
}, [m]);
|
|
3174
3968
|
const v = () => {
|
|
3175
|
-
const
|
|
3176
|
-
l ||
|
|
3969
|
+
const y = !m;
|
|
3970
|
+
l || u(y), r == null || r(y);
|
|
3177
3971
|
};
|
|
3178
|
-
return /* @__PURE__ */ h(
|
|
3179
|
-
/* @__PURE__ */ e("style", { children:
|
|
3972
|
+
return /* @__PURE__ */ h(W, { children: [
|
|
3973
|
+
/* @__PURE__ */ e("style", { children: zt }),
|
|
3180
3974
|
/* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", fontFamily: "var(--lucent-font-family-base)", fontSize: "var(--lucent-font-size-md)", ...i }, children: [
|
|
3181
3975
|
/* @__PURE__ */ h(
|
|
3182
3976
|
"button",
|
|
3183
3977
|
{
|
|
3184
3978
|
onClick: v,
|
|
3185
|
-
"aria-expanded":
|
|
3979
|
+
"aria-expanded": m,
|
|
3186
3980
|
style: {
|
|
3187
3981
|
display: "flex",
|
|
3188
3982
|
alignItems: "center",
|
|
@@ -3199,15 +3993,15 @@ function In({ trigger: t, children: n, defaultOpen: a = !1, open: o, onOpenChang
|
|
|
3199
3993
|
},
|
|
3200
3994
|
children: [
|
|
3201
3995
|
/* @__PURE__ */ e("span", { style: { flex: 1 }, children: t }),
|
|
3202
|
-
/* @__PURE__ */ e(
|
|
3996
|
+
/* @__PURE__ */ e(qt, { open: m })
|
|
3203
3997
|
]
|
|
3204
3998
|
}
|
|
3205
3999
|
),
|
|
3206
4000
|
/* @__PURE__ */ e(
|
|
3207
4001
|
"div",
|
|
3208
4002
|
{
|
|
3209
|
-
ref:
|
|
3210
|
-
"aria-hidden": !
|
|
4003
|
+
ref: b,
|
|
4004
|
+
"aria-hidden": !m,
|
|
3211
4005
|
style: {
|
|
3212
4006
|
overflow: "hidden",
|
|
3213
4007
|
height: d !== void 0 ? d : "auto",
|
|
@@ -3218,7 +4012,7 @@ function In({ trigger: t, children: n, defaultOpen: a = !1, open: o, onOpenChang
|
|
|
3218
4012
|
{
|
|
3219
4013
|
style: {
|
|
3220
4014
|
padding: "var(--lucent-space-2) var(--lucent-space-4) var(--lucent-space-3)",
|
|
3221
|
-
animation:
|
|
4015
|
+
animation: m ? "lucent-collapsible-open 200ms var(--lucent-easing-default) forwards" : void 0
|
|
3222
4016
|
},
|
|
3223
4017
|
children: n
|
|
3224
4018
|
}
|
|
@@ -3228,7 +4022,7 @@ function In({ trigger: t, children: n, defaultOpen: a = !1, open: o, onOpenChang
|
|
|
3228
4022
|
] })
|
|
3229
4023
|
] });
|
|
3230
4024
|
}
|
|
3231
|
-
function
|
|
4025
|
+
function qt({ open: t }) {
|
|
3232
4026
|
return /* @__PURE__ */ e(
|
|
3233
4027
|
"svg",
|
|
3234
4028
|
{
|
|
@@ -3251,10 +4045,10 @@ function mt({ open: t }) {
|
|
|
3251
4045
|
}
|
|
3252
4046
|
);
|
|
3253
4047
|
}
|
|
3254
|
-
function
|
|
4048
|
+
function _(t) {
|
|
3255
4049
|
return typeof t == "number" ? `${t}px` : t;
|
|
3256
4050
|
}
|
|
3257
|
-
function
|
|
4051
|
+
function Xn({
|
|
3258
4052
|
children: t,
|
|
3259
4053
|
header: n,
|
|
3260
4054
|
sidebar: a,
|
|
@@ -3262,14 +4056,14 @@ function Mn({
|
|
|
3262
4056
|
headerHeight: r = 48,
|
|
3263
4057
|
sidebarCollapsed: i = !1,
|
|
3264
4058
|
rightSidebar: l,
|
|
3265
|
-
rightSidebarWidth:
|
|
3266
|
-
rightSidebarCollapsed:
|
|
3267
|
-
footer:
|
|
3268
|
-
footerHeight:
|
|
4059
|
+
rightSidebarWidth: s = 240,
|
|
4060
|
+
rightSidebarCollapsed: u = !1,
|
|
4061
|
+
footer: m,
|
|
4062
|
+
footerHeight: b = 28,
|
|
3269
4063
|
mainStyle: d,
|
|
3270
|
-
style:
|
|
4064
|
+
style: p
|
|
3271
4065
|
}) {
|
|
3272
|
-
const
|
|
4066
|
+
const c = _(r), v = _(o), y = _(s), w = _(b);
|
|
3273
4067
|
return /* @__PURE__ */ h(
|
|
3274
4068
|
"div",
|
|
3275
4069
|
{
|
|
@@ -3279,7 +4073,7 @@ function Mn({
|
|
|
3279
4073
|
height: "100vh",
|
|
3280
4074
|
overflow: "hidden",
|
|
3281
4075
|
fontFamily: "var(--lucent-font-family-base)",
|
|
3282
|
-
...
|
|
4076
|
+
...p
|
|
3283
4077
|
},
|
|
3284
4078
|
children: [
|
|
3285
4079
|
n != null && /* @__PURE__ */ e(
|
|
@@ -3287,7 +4081,7 @@ function Mn({
|
|
|
3287
4081
|
{
|
|
3288
4082
|
style: {
|
|
3289
4083
|
flexShrink: 0,
|
|
3290
|
-
height:
|
|
4084
|
+
height: c,
|
|
3291
4085
|
zIndex: 10,
|
|
3292
4086
|
background: "var(--lucent-surface-default)"
|
|
3293
4087
|
},
|
|
@@ -3330,10 +4124,10 @@ function Mn({
|
|
|
3330
4124
|
"aside",
|
|
3331
4125
|
{
|
|
3332
4126
|
style: {
|
|
3333
|
-
width:
|
|
4127
|
+
width: u ? 0 : y,
|
|
3334
4128
|
flexShrink: 0,
|
|
3335
4129
|
overflow: "hidden",
|
|
3336
|
-
overflowY:
|
|
4130
|
+
overflowY: u ? "hidden" : "auto",
|
|
3337
4131
|
background: "var(--lucent-surface-default)",
|
|
3338
4132
|
transition: "width 200ms var(--lucent-easing-default)"
|
|
3339
4133
|
},
|
|
@@ -3341,23 +4135,23 @@ function Mn({
|
|
|
3341
4135
|
}
|
|
3342
4136
|
)
|
|
3343
4137
|
] }),
|
|
3344
|
-
|
|
4138
|
+
m != null && /* @__PURE__ */ e(
|
|
3345
4139
|
"div",
|
|
3346
4140
|
{
|
|
3347
4141
|
style: {
|
|
3348
4142
|
flexShrink: 0,
|
|
3349
|
-
height:
|
|
4143
|
+
height: w,
|
|
3350
4144
|
zIndex: 10,
|
|
3351
4145
|
background: "var(--lucent-surface-default)"
|
|
3352
4146
|
},
|
|
3353
|
-
children:
|
|
4147
|
+
children: m
|
|
3354
4148
|
}
|
|
3355
4149
|
)
|
|
3356
4150
|
]
|
|
3357
4151
|
}
|
|
3358
4152
|
);
|
|
3359
4153
|
}
|
|
3360
|
-
function
|
|
4154
|
+
function Et({ state: t }) {
|
|
3361
4155
|
return /* @__PURE__ */ h(
|
|
3362
4156
|
"svg",
|
|
3363
4157
|
{
|
|
@@ -3388,7 +4182,7 @@ function gt({ state: t }) {
|
|
|
3388
4182
|
}
|
|
3389
4183
|
);
|
|
3390
4184
|
}
|
|
3391
|
-
function
|
|
4185
|
+
function ne({ dir: t }) {
|
|
3392
4186
|
return /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": !0, children: /* @__PURE__ */ e(
|
|
3393
4187
|
"path",
|
|
3394
4188
|
{
|
|
@@ -3400,7 +4194,7 @@ function te({ dir: t }) {
|
|
|
3400
4194
|
}
|
|
3401
4195
|
) });
|
|
3402
4196
|
}
|
|
3403
|
-
function
|
|
4197
|
+
function Jn({
|
|
3404
4198
|
columns: t,
|
|
3405
4199
|
rows: n,
|
|
3406
4200
|
pageSize: a = 10,
|
|
@@ -3409,21 +4203,21 @@ function zn({
|
|
|
3409
4203
|
emptyState: i,
|
|
3410
4204
|
style: l
|
|
3411
4205
|
}) {
|
|
3412
|
-
const [
|
|
3413
|
-
const D =
|
|
3414
|
-
return
|
|
3415
|
-
}) : n,
|
|
3416
|
-
|
|
3417
|
-
},
|
|
3418
|
-
|
|
3419
|
-
},
|
|
3420
|
-
if (
|
|
3421
|
-
for (let
|
|
4206
|
+
const [s, u] = M(null), [m, b] = M(0), [d, p] = M(null), c = o !== void 0, v = c ? o : m, y = s ? [...n].sort((f, S) => {
|
|
4207
|
+
const D = f[s.key], T = S[s.key], C = String(D ?? "").localeCompare(String(T ?? ""), void 0, { numeric: !0 });
|
|
4208
|
+
return s.dir === "asc" ? C : -C;
|
|
4209
|
+
}) : n, w = a > 0 ? y.slice(v * a, (v + 1) * a) : y, g = a > 0 ? Math.max(1, Math.ceil(y.length / a)) : 1, x = (f) => {
|
|
4210
|
+
c || b(f), r == null || r(f);
|
|
4211
|
+
}, I = (f) => {
|
|
4212
|
+
u((S) => !S || S.key !== f ? { key: f, dir: "asc" } : S.dir === "asc" ? { key: f, dir: "desc" } : null), c || b(0), r == null || r(0);
|
|
4213
|
+
}, k = [];
|
|
4214
|
+
if (g <= 7)
|
|
4215
|
+
for (let f = 0; f < g; f++) k.push(f);
|
|
3422
4216
|
else {
|
|
3423
|
-
|
|
3424
|
-
for (let
|
|
3425
|
-
|
|
3426
|
-
v <
|
|
4217
|
+
k.push(0), v > 2 && k.push("…");
|
|
4218
|
+
for (let f = Math.max(1, v - 1); f <= Math.min(g - 2, v + 1); f++)
|
|
4219
|
+
k.push(f);
|
|
4220
|
+
v < g - 3 && k.push("…"), k.push(g - 1);
|
|
3427
4221
|
}
|
|
3428
4222
|
return /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-3)", ...l }, children: [
|
|
3429
4223
|
/* @__PURE__ */ e("div", { style: {
|
|
@@ -3436,46 +4230,46 @@ function zn({
|
|
|
3436
4230
|
fontFamily: "var(--lucent-font-family-base)",
|
|
3437
4231
|
fontSize: "var(--lucent-font-size-sm)"
|
|
3438
4232
|
}, children: [
|
|
3439
|
-
/* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { style: { borderBottom: "1px solid var(--lucent-border-default)" }, children: t.map((
|
|
3440
|
-
const
|
|
4233
|
+
/* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { style: { borderBottom: "1px solid var(--lucent-border-default)" }, children: t.map((f) => {
|
|
4234
|
+
const S = (s == null ? void 0 : s.key) === f.key ? s.dir : "none";
|
|
3441
4235
|
return /* @__PURE__ */ e(
|
|
3442
4236
|
"th",
|
|
3443
4237
|
{
|
|
3444
|
-
onClick:
|
|
4238
|
+
onClick: f.sortable ? () => I(f.key) : void 0,
|
|
3445
4239
|
style: {
|
|
3446
4240
|
padding: "var(--lucent-space-3) var(--lucent-space-4)",
|
|
3447
|
-
textAlign:
|
|
4241
|
+
textAlign: f.align ?? "left",
|
|
3448
4242
|
fontWeight: "var(--lucent-font-weight-medium)",
|
|
3449
4243
|
color: "var(--lucent-text-secondary)",
|
|
3450
4244
|
background: "var(--lucent-bg-subtle)",
|
|
3451
|
-
cursor:
|
|
4245
|
+
cursor: f.sortable ? "pointer" : "default",
|
|
3452
4246
|
userSelect: "none",
|
|
3453
4247
|
whiteSpace: "nowrap",
|
|
3454
|
-
...
|
|
4248
|
+
...f.width ? { width: f.width } : {}
|
|
3455
4249
|
},
|
|
3456
4250
|
children: /* @__PURE__ */ h("span", { style: { display: "inline-flex", alignItems: "center", gap: "var(--lucent-space-1)" }, children: [
|
|
3457
|
-
|
|
3458
|
-
|
|
4251
|
+
f.header,
|
|
4252
|
+
f.sortable && /* @__PURE__ */ e(Et, { state: S })
|
|
3459
4253
|
] })
|
|
3460
4254
|
},
|
|
3461
|
-
|
|
4255
|
+
f.key
|
|
3462
4256
|
);
|
|
3463
4257
|
}) }) }),
|
|
3464
|
-
/* @__PURE__ */ e("tbody", { children:
|
|
4258
|
+
/* @__PURE__ */ e("tbody", { children: w.length === 0 ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
|
|
3465
4259
|
"td",
|
|
3466
4260
|
{
|
|
3467
4261
|
colSpan: t.length,
|
|
3468
4262
|
style: { padding: "var(--lucent-space-12)", textAlign: "center" },
|
|
3469
|
-
children: i ?? /* @__PURE__ */ e(
|
|
4263
|
+
children: i ?? /* @__PURE__ */ e(E, { color: "secondary", children: "No data" })
|
|
3470
4264
|
}
|
|
3471
|
-
) }) :
|
|
4265
|
+
) }) : w.map((f, S) => /* @__PURE__ */ e(
|
|
3472
4266
|
"tr",
|
|
3473
4267
|
{
|
|
3474
|
-
onMouseEnter: () =>
|
|
3475
|
-
onMouseLeave: () =>
|
|
4268
|
+
onMouseEnter: () => p(S),
|
|
4269
|
+
onMouseLeave: () => p(null),
|
|
3476
4270
|
style: {
|
|
3477
|
-
borderBottom:
|
|
3478
|
-
background: d ===
|
|
4271
|
+
borderBottom: S < w.length - 1 ? "1px solid var(--lucent-border-subtle)" : "none",
|
|
4272
|
+
background: d === S ? "var(--lucent-bg-subtle)" : "var(--lucent-surface-default)",
|
|
3479
4273
|
transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)"
|
|
3480
4274
|
},
|
|
3481
4275
|
children: t.map((D) => /* @__PURE__ */ e(
|
|
@@ -3487,70 +4281,70 @@ function zn({
|
|
|
3487
4281
|
textAlign: D.align ?? "left",
|
|
3488
4282
|
verticalAlign: "middle"
|
|
3489
4283
|
},
|
|
3490
|
-
children: D.render ? D.render(
|
|
4284
|
+
children: D.render ? D.render(f, S) : String(f[D.key] ?? "")
|
|
3491
4285
|
},
|
|
3492
4286
|
D.key
|
|
3493
4287
|
))
|
|
3494
4288
|
},
|
|
3495
|
-
|
|
4289
|
+
S
|
|
3496
4290
|
)) })
|
|
3497
4291
|
] }) }),
|
|
3498
|
-
a > 0 &&
|
|
4292
|
+
a > 0 && y.length > 0 && /* @__PURE__ */ h("div", { style: {
|
|
3499
4293
|
display: "flex",
|
|
3500
4294
|
alignItems: "center",
|
|
3501
4295
|
justifyContent: "space-between",
|
|
3502
4296
|
gap: "var(--lucent-space-3)",
|
|
3503
4297
|
flexWrap: "wrap"
|
|
3504
4298
|
}, children: [
|
|
3505
|
-
/* @__PURE__ */ e(
|
|
4299
|
+
/* @__PURE__ */ e(E, { color: "secondary", size: "sm", children: y.length === 1 ? "1 row" : `${v * a + 1}–${Math.min((v + 1) * a, y.length)} of ${y.length} rows` }),
|
|
3506
4300
|
/* @__PURE__ */ h("div", { style: { display: "flex", alignItems: "center", gap: "var(--lucent-space-1)" }, children: [
|
|
3507
4301
|
/* @__PURE__ */ e(
|
|
3508
|
-
|
|
4302
|
+
K,
|
|
3509
4303
|
{
|
|
3510
4304
|
onClick: () => x(v - 1),
|
|
3511
4305
|
disabled: v === 0,
|
|
3512
4306
|
"aria-label": "Previous page",
|
|
3513
|
-
children: /* @__PURE__ */ e(
|
|
4307
|
+
children: /* @__PURE__ */ e(ne, { dir: "left" })
|
|
3514
4308
|
}
|
|
3515
4309
|
),
|
|
3516
|
-
|
|
3517
|
-
(
|
|
4310
|
+
k.map(
|
|
4311
|
+
(f, S) => f === "…" ? /* @__PURE__ */ e("span", { style: {
|
|
3518
4312
|
padding: "0 var(--lucent-space-1)",
|
|
3519
4313
|
color: "var(--lucent-text-disabled)",
|
|
3520
4314
|
fontSize: "var(--lucent-font-size-sm)"
|
|
3521
|
-
}, children: "…" }, `ellipsis-${
|
|
3522
|
-
|
|
4315
|
+
}, children: "…" }, `ellipsis-${S}`) : /* @__PURE__ */ e(
|
|
4316
|
+
K,
|
|
3523
4317
|
{
|
|
3524
|
-
onClick: () => x(
|
|
3525
|
-
active:
|
|
3526
|
-
"aria-label": `Page ${
|
|
3527
|
-
"aria-current":
|
|
3528
|
-
children:
|
|
4318
|
+
onClick: () => x(f),
|
|
4319
|
+
active: f === v,
|
|
4320
|
+
"aria-label": `Page ${f + 1}`,
|
|
4321
|
+
"aria-current": f === v ? "page" : void 0,
|
|
4322
|
+
children: f + 1
|
|
3529
4323
|
},
|
|
3530
|
-
|
|
4324
|
+
f
|
|
3531
4325
|
)
|
|
3532
4326
|
),
|
|
3533
4327
|
/* @__PURE__ */ e(
|
|
3534
|
-
|
|
4328
|
+
K,
|
|
3535
4329
|
{
|
|
3536
4330
|
onClick: () => x(v + 1),
|
|
3537
|
-
disabled: v >=
|
|
4331
|
+
disabled: v >= g - 1,
|
|
3538
4332
|
"aria-label": "Next page",
|
|
3539
|
-
children: /* @__PURE__ */ e(
|
|
4333
|
+
children: /* @__PURE__ */ e(ne, { dir: "right" })
|
|
3540
4334
|
}
|
|
3541
4335
|
)
|
|
3542
4336
|
] })
|
|
3543
4337
|
] })
|
|
3544
4338
|
] });
|
|
3545
4339
|
}
|
|
3546
|
-
function
|
|
4340
|
+
function K({
|
|
3547
4341
|
children: t,
|
|
3548
4342
|
onClick: n,
|
|
3549
4343
|
disabled: a,
|
|
3550
4344
|
active: o,
|
|
3551
4345
|
...r
|
|
3552
4346
|
}) {
|
|
3553
|
-
const [i, l] =
|
|
4347
|
+
const [i, l] = M(!1);
|
|
3554
4348
|
return /* @__PURE__ */ e(
|
|
3555
4349
|
"button",
|
|
3556
4350
|
{
|
|
@@ -3580,7 +4374,7 @@ function Y({
|
|
|
3580
4374
|
}
|
|
3581
4375
|
);
|
|
3582
4376
|
}
|
|
3583
|
-
const
|
|
4377
|
+
const Qn = {
|
|
3584
4378
|
id: "data-table",
|
|
3585
4379
|
name: "DataTable",
|
|
3586
4380
|
tier: "molecule",
|
|
@@ -3671,18 +4465,18 @@ const En = {
|
|
|
3671
4465
|
keyboardInteractions: ["Tab to pagination controls", "Enter/Space to activate buttons"],
|
|
3672
4466
|
notes: 'Column headers with sortable:true are interactive buttons with aria-sort reflecting the current sort direction. Pagination buttons include aria-label and aria-current="page" for the active page.'
|
|
3673
4467
|
}
|
|
3674
|
-
},
|
|
4468
|
+
}, Dt = `
|
|
3675
4469
|
@keyframes lucent-palette-in {
|
|
3676
4470
|
from { opacity: 0; transform: scale(0.96) translateY(-8px); }
|
|
3677
4471
|
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
3678
4472
|
}
|
|
3679
4473
|
`;
|
|
3680
|
-
function
|
|
4474
|
+
function At(t, n) {
|
|
3681
4475
|
var o;
|
|
3682
4476
|
const a = n.toLowerCase();
|
|
3683
4477
|
return t.label.toLowerCase().includes(a) || (((o = t.description) == null ? void 0 : o.toLowerCase().includes(a)) ?? !1);
|
|
3684
4478
|
}
|
|
3685
|
-
function
|
|
4479
|
+
function Zn({
|
|
3686
4480
|
commands: t,
|
|
3687
4481
|
placeholder: n = "Search commands…",
|
|
3688
4482
|
shortcutKey: a = "k",
|
|
@@ -3690,49 +4484,49 @@ function qn({
|
|
|
3690
4484
|
onOpenChange: r,
|
|
3691
4485
|
style: i
|
|
3692
4486
|
}) {
|
|
3693
|
-
const l = o !== void 0, [
|
|
3694
|
-
if (!
|
|
3695
|
-
const
|
|
3696
|
-
|
|
4487
|
+
const l = o !== void 0, [s, u] = M(!1), m = l ? o : s, [b, d] = M(""), [p, c] = M(0), v = F(null), y = F(null), w = F(!1);
|
|
4488
|
+
if (!w.current) {
|
|
4489
|
+
const T = document.createElement("style");
|
|
4490
|
+
T.textContent = Dt, document.head.appendChild(T), w.current = !0;
|
|
3697
4491
|
}
|
|
3698
|
-
const
|
|
3699
|
-
l ||
|
|
4492
|
+
const g = Z((T) => {
|
|
4493
|
+
l || u(T), r == null || r(T);
|
|
3700
4494
|
}, [l, r]);
|
|
3701
|
-
|
|
3702
|
-
const
|
|
3703
|
-
(
|
|
4495
|
+
L(() => {
|
|
4496
|
+
const T = (C) => {
|
|
4497
|
+
(C.metaKey || C.ctrlKey) && C.key === a && (C.preventDefault(), g(!m));
|
|
3704
4498
|
};
|
|
3705
|
-
return window.addEventListener("keydown",
|
|
3706
|
-
}, [
|
|
3707
|
-
|
|
3708
|
-
var
|
|
3709
|
-
return (
|
|
4499
|
+
return window.addEventListener("keydown", T), () => window.removeEventListener("keydown", T);
|
|
4500
|
+
}, [m, a, g]), L(() => {
|
|
4501
|
+
m && (d(""), c(0), setTimeout(() => {
|
|
4502
|
+
var T;
|
|
4503
|
+
return (T = v.current) == null ? void 0 : T.focus();
|
|
3710
4504
|
}, 10));
|
|
3711
|
-
}, [
|
|
3712
|
-
const x =
|
|
3713
|
-
|
|
3714
|
-
const
|
|
3715
|
-
if (!
|
|
3716
|
-
const
|
|
3717
|
-
|
|
3718
|
-
}, [
|
|
3719
|
-
const
|
|
3720
|
-
|
|
3721
|
-
},
|
|
3722
|
-
if (
|
|
3723
|
-
|
|
4505
|
+
}, [m]);
|
|
4506
|
+
const x = b ? t.filter((T) => At(T, b)) : t, I = x.filter((T) => !T.disabled);
|
|
4507
|
+
L(() => {
|
|
4508
|
+
const T = y.current;
|
|
4509
|
+
if (!T) return;
|
|
4510
|
+
const C = T.querySelector('[data-active="true"]');
|
|
4511
|
+
C == null || C.scrollIntoView({ block: "nearest" });
|
|
4512
|
+
}, [p]);
|
|
4513
|
+
const k = (T) => {
|
|
4514
|
+
T.disabled || (T.onSelect(), g(!1));
|
|
4515
|
+
}, f = (T) => {
|
|
4516
|
+
if (T.key === "Escape") {
|
|
4517
|
+
g(!1);
|
|
3724
4518
|
return;
|
|
3725
4519
|
}
|
|
3726
|
-
if (
|
|
3727
|
-
const
|
|
3728
|
-
|
|
4520
|
+
if (T.key === "ArrowDown" && (T.preventDefault(), c((C) => Math.min(C + 1, I.length - 1))), T.key === "ArrowUp" && (T.preventDefault(), c((C) => Math.max(C - 1, 0))), T.key === "Enter") {
|
|
4521
|
+
const C = I[p];
|
|
4522
|
+
C && k(C);
|
|
3729
4523
|
}
|
|
3730
|
-
},
|
|
3731
|
-
for (const
|
|
3732
|
-
const
|
|
3733
|
-
|
|
4524
|
+
}, S = [];
|
|
4525
|
+
for (const T of x) {
|
|
4526
|
+
const C = S[S.length - 1];
|
|
4527
|
+
C && C.group === T.group ? C.items.push(T) : S.push({ group: T.group, items: [T] });
|
|
3734
4528
|
}
|
|
3735
|
-
if (!
|
|
4529
|
+
if (!m) return null;
|
|
3736
4530
|
let D = 0;
|
|
3737
4531
|
return /* @__PURE__ */ e(
|
|
3738
4532
|
"div",
|
|
@@ -3740,7 +4534,7 @@ function qn({
|
|
|
3740
4534
|
role: "dialog",
|
|
3741
4535
|
"aria-label": "Command palette",
|
|
3742
4536
|
"aria-modal": "true",
|
|
3743
|
-
onClick: () =>
|
|
4537
|
+
onClick: () => g(!1),
|
|
3744
4538
|
style: {
|
|
3745
4539
|
position: "fixed",
|
|
3746
4540
|
inset: 0,
|
|
@@ -3758,7 +4552,7 @@ function qn({
|
|
|
3758
4552
|
role: "combobox",
|
|
3759
4553
|
"aria-haspopup": "listbox",
|
|
3760
4554
|
"aria-expanded": "true",
|
|
3761
|
-
onClick: (
|
|
4555
|
+
onClick: (T) => T.stopPropagation(),
|
|
3762
4556
|
style: {
|
|
3763
4557
|
width: "100%",
|
|
3764
4558
|
maxWidth: 560,
|
|
@@ -3789,11 +4583,11 @@ function qn({
|
|
|
3789
4583
|
role: "searchbox",
|
|
3790
4584
|
"aria-autocomplete": "list",
|
|
3791
4585
|
"aria-controls": "lucent-command-list",
|
|
3792
|
-
value:
|
|
3793
|
-
onChange: (
|
|
3794
|
-
d(
|
|
4586
|
+
value: b,
|
|
4587
|
+
onChange: (T) => {
|
|
4588
|
+
d(T.target.value), c(0);
|
|
3795
4589
|
},
|
|
3796
|
-
onKeyDown:
|
|
4590
|
+
onKeyDown: f,
|
|
3797
4591
|
placeholder: n,
|
|
3798
4592
|
style: {
|
|
3799
4593
|
flex: 1,
|
|
@@ -3824,32 +4618,32 @@ function qn({
|
|
|
3824
4618
|
{
|
|
3825
4619
|
id: "lucent-command-list",
|
|
3826
4620
|
role: "listbox",
|
|
3827
|
-
ref:
|
|
4621
|
+
ref: y,
|
|
3828
4622
|
style: { maxHeight: 360, overflowY: "auto", padding: "var(--lucent-space-1) 0" },
|
|
3829
|
-
children: x.length === 0 ? /* @__PURE__ */ e("div", { style: { padding: "var(--lucent-space-8)", textAlign: "center" }, children: /* @__PURE__ */ h(
|
|
4623
|
+
children: x.length === 0 ? /* @__PURE__ */ e("div", { style: { padding: "var(--lucent-space-8)", textAlign: "center" }, children: /* @__PURE__ */ h(E, { color: "secondary", children: [
|
|
3830
4624
|
'No results for "',
|
|
3831
|
-
|
|
4625
|
+
b,
|
|
3832
4626
|
'"'
|
|
3833
|
-
] }) }) :
|
|
3834
|
-
|
|
4627
|
+
] }) }) : S.map(({ group: T, items: C }, P) => /* @__PURE__ */ h("div", { children: [
|
|
4628
|
+
T && /* @__PURE__ */ e("div", { style: {
|
|
3835
4629
|
padding: "var(--lucent-space-2) var(--lucent-space-4) var(--lucent-space-1)",
|
|
3836
4630
|
...P > 0 ? { borderTop: "1px solid var(--lucent-border-subtle)", marginTop: "var(--lucent-space-1)" } : {}
|
|
3837
|
-
}, children: /* @__PURE__ */ e(
|
|
3838
|
-
|
|
3839
|
-
const $ =
|
|
3840
|
-
let
|
|
3841
|
-
return $ || (
|
|
4631
|
+
}, children: /* @__PURE__ */ e(E, { size: "xs", color: "secondary", weight: "medium", children: T }) }),
|
|
4632
|
+
C.map((B) => {
|
|
4633
|
+
const $ = B.disabled ?? !1;
|
|
4634
|
+
let z = !1;
|
|
4635
|
+
return $ || (z = D === p, D++), /* @__PURE__ */ h(
|
|
3842
4636
|
"div",
|
|
3843
4637
|
{
|
|
3844
4638
|
role: "option",
|
|
3845
|
-
"aria-selected":
|
|
4639
|
+
"aria-selected": z,
|
|
3846
4640
|
"aria-disabled": $,
|
|
3847
|
-
"data-active":
|
|
3848
|
-
onClick: () =>
|
|
4641
|
+
"data-active": z,
|
|
4642
|
+
onClick: () => k(B),
|
|
3849
4643
|
onMouseEnter: () => {
|
|
3850
4644
|
if (!$) {
|
|
3851
|
-
const
|
|
3852
|
-
|
|
4645
|
+
const q = I.indexOf(B);
|
|
4646
|
+
q !== -1 && c(q);
|
|
3853
4647
|
}
|
|
3854
4648
|
},
|
|
3855
4649
|
style: {
|
|
@@ -3858,19 +4652,19 @@ function qn({
|
|
|
3858
4652
|
gap: "var(--lucent-space-3)",
|
|
3859
4653
|
padding: "var(--lucent-space-2) var(--lucent-space-4)",
|
|
3860
4654
|
cursor: $ ? "not-allowed" : "pointer",
|
|
3861
|
-
background:
|
|
4655
|
+
background: z ? "var(--lucent-bg-muted)" : "transparent",
|
|
3862
4656
|
transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)",
|
|
3863
4657
|
opacity: $ ? 0.5 : 1
|
|
3864
4658
|
},
|
|
3865
4659
|
children: [
|
|
3866
|
-
|
|
4660
|
+
B.icon && /* @__PURE__ */ e("span", { style: { flexShrink: 0, color: "var(--lucent-text-secondary)", display: "flex" }, children: B.icon }),
|
|
3867
4661
|
/* @__PURE__ */ h("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
3868
|
-
/* @__PURE__ */ e(
|
|
3869
|
-
|
|
4662
|
+
/* @__PURE__ */ e(E, { size: "sm", weight: "medium", truncate: !0, children: B.label }),
|
|
4663
|
+
B.description && /* @__PURE__ */ e(E, { size: "xs", color: "secondary", truncate: !0, children: B.description })
|
|
3870
4664
|
] })
|
|
3871
4665
|
]
|
|
3872
4666
|
},
|
|
3873
|
-
|
|
4667
|
+
B.id
|
|
3874
4668
|
);
|
|
3875
4669
|
})
|
|
3876
4670
|
] }, P))
|
|
@@ -3886,7 +4680,7 @@ function qn({
|
|
|
3886
4680
|
["↑↓", "Navigate"],
|
|
3887
4681
|
["↵", "Select"],
|
|
3888
4682
|
["Esc", "Close"]
|
|
3889
|
-
].map(([
|
|
4683
|
+
].map(([T, C]) => /* @__PURE__ */ h("span", { style: { display: "flex", alignItems: "center", gap: "var(--lucent-space-1)" }, children: [
|
|
3890
4684
|
/* @__PURE__ */ e("kbd", { style: {
|
|
3891
4685
|
padding: "1px 5px",
|
|
3892
4686
|
borderRadius: "var(--lucent-radius-sm)",
|
|
@@ -3895,16 +4689,16 @@ function qn({
|
|
|
3895
4689
|
fontFamily: "var(--lucent-font-family-mono)",
|
|
3896
4690
|
fontSize: "var(--lucent-font-size-xs)",
|
|
3897
4691
|
color: "var(--lucent-text-secondary)"
|
|
3898
|
-
}, children:
|
|
3899
|
-
/* @__PURE__ */ e(
|
|
3900
|
-
] },
|
|
4692
|
+
}, children: T }),
|
|
4693
|
+
/* @__PURE__ */ e(E, { size: "xs", color: "secondary", children: C })
|
|
4694
|
+
] }, T)) })
|
|
3901
4695
|
]
|
|
3902
4696
|
}
|
|
3903
4697
|
)
|
|
3904
4698
|
}
|
|
3905
4699
|
);
|
|
3906
4700
|
}
|
|
3907
|
-
const
|
|
4701
|
+
const ea = {
|
|
3908
4702
|
id: "command-palette",
|
|
3909
4703
|
name: "CommandPalette",
|
|
3910
4704
|
tier: "overlay",
|
|
@@ -3987,7 +4781,7 @@ const Dn = {
|
|
|
3987
4781
|
notes: 'The backdrop and panel use role="dialog" with aria-modal="true". The input is role="searchbox". The result list is role="listbox" with role="option" items. Focus is moved to the search input on open.'
|
|
3988
4782
|
}
|
|
3989
4783
|
};
|
|
3990
|
-
function
|
|
4784
|
+
function Ft({ label: t, onRemove: n, disabled: a }) {
|
|
3991
4785
|
return /* @__PURE__ */ h("span", { style: {
|
|
3992
4786
|
display: "inline-flex",
|
|
3993
4787
|
alignItems: "center",
|
|
@@ -4029,7 +4823,7 @@ function yt({ label: t, onRemove: n, disabled: a }) {
|
|
|
4029
4823
|
)
|
|
4030
4824
|
] });
|
|
4031
4825
|
}
|
|
4032
|
-
function
|
|
4826
|
+
function ta({
|
|
4033
4827
|
options: t,
|
|
4034
4828
|
value: n,
|
|
4035
4829
|
defaultValue: a = [],
|
|
@@ -4037,44 +4831,44 @@ function An({
|
|
|
4037
4831
|
placeholder: r = "Select…",
|
|
4038
4832
|
disabled: i = !1,
|
|
4039
4833
|
max: l,
|
|
4040
|
-
style:
|
|
4834
|
+
style: s
|
|
4041
4835
|
}) {
|
|
4042
|
-
const
|
|
4043
|
-
|
|
4044
|
-
if (!
|
|
4045
|
-
const
|
|
4836
|
+
const u = n !== void 0, [m, b] = M(a), d = u ? n : m, [p, c] = M(!1), [v, y] = M(""), [w, g] = M(0), [x, I] = M(!1), k = F(null), f = F(null), S = ce();
|
|
4837
|
+
L(() => {
|
|
4838
|
+
if (!p) return;
|
|
4839
|
+
const z = (q) => {
|
|
4046
4840
|
var R;
|
|
4047
|
-
(R =
|
|
4841
|
+
(R = k.current) != null && R.contains(q.target) || (c(!1), y(""));
|
|
4048
4842
|
};
|
|
4049
|
-
return document.addEventListener("mousedown",
|
|
4050
|
-
}, [
|
|
4051
|
-
const D = (
|
|
4052
|
-
const
|
|
4053
|
-
|
|
4054
|
-
},
|
|
4055
|
-
const
|
|
4056
|
-
|
|
4057
|
-
},
|
|
4058
|
-
(
|
|
4059
|
-
), P = (
|
|
4060
|
-
if (
|
|
4061
|
-
|
|
4843
|
+
return document.addEventListener("mousedown", z), () => document.removeEventListener("mousedown", z);
|
|
4844
|
+
}, [p]);
|
|
4845
|
+
const D = (z) => {
|
|
4846
|
+
const q = d.includes(z) ? d.filter((R) => R !== z) : l !== void 0 && d.length >= l ? d : [...d, z];
|
|
4847
|
+
u || b(q), o == null || o(q);
|
|
4848
|
+
}, T = (z) => {
|
|
4849
|
+
const q = d.filter((R) => R !== z);
|
|
4850
|
+
u || b(q), o == null || o(q);
|
|
4851
|
+
}, C = t.filter(
|
|
4852
|
+
(z) => z.label.toLowerCase().includes(v.toLowerCase())
|
|
4853
|
+
), P = (z) => {
|
|
4854
|
+
if (z.key === "Escape") {
|
|
4855
|
+
c(!1), y("");
|
|
4062
4856
|
return;
|
|
4063
4857
|
}
|
|
4064
|
-
if (
|
|
4065
|
-
|
|
4066
|
-
const
|
|
4067
|
-
|
|
4858
|
+
if (z.key === "ArrowDown" && (z.preventDefault(), c(!0), g((q) => Math.min(q + 1, C.length - 1))), z.key === "ArrowUp" && (z.preventDefault(), g((q) => Math.max(q - 1, 0))), z.key === "Enter") {
|
|
4859
|
+
z.preventDefault();
|
|
4860
|
+
const q = C[w];
|
|
4861
|
+
q && !q.disabled && D(q.value);
|
|
4068
4862
|
}
|
|
4069
|
-
|
|
4070
|
-
},
|
|
4071
|
-
return /* @__PURE__ */ h("div", { ref:
|
|
4863
|
+
z.key === "Backspace" && v === "" && d.length > 0 && T(d[d.length - 1]);
|
|
4864
|
+
}, B = l !== void 0 && d.length >= l, $ = i ? "var(--lucent-border-default)" : x ? "var(--lucent-accent-default)" : "var(--lucent-border-default)";
|
|
4865
|
+
return /* @__PURE__ */ h("div", { ref: k, style: { position: "relative", ...s }, children: [
|
|
4072
4866
|
/* @__PURE__ */ h(
|
|
4073
4867
|
"div",
|
|
4074
4868
|
{
|
|
4075
4869
|
onClick: () => {
|
|
4076
|
-
var
|
|
4077
|
-
i || (
|
|
4870
|
+
var z;
|
|
4871
|
+
i || (c(!0), (z = f.current) == null || z.focus());
|
|
4078
4872
|
},
|
|
4079
4873
|
style: {
|
|
4080
4874
|
display: "flex",
|
|
@@ -4092,26 +4886,26 @@ function An({
|
|
|
4092
4886
|
outlineOffset: 2
|
|
4093
4887
|
},
|
|
4094
4888
|
children: [
|
|
4095
|
-
d.map((
|
|
4096
|
-
const
|
|
4097
|
-
return
|
|
4889
|
+
d.map((z) => {
|
|
4890
|
+
const q = t.find((R) => R.value === z);
|
|
4891
|
+
return q ? /* @__PURE__ */ e(Ft, { label: q.label, onRemove: () => T(z), disabled: i }, z) : null;
|
|
4098
4892
|
}),
|
|
4099
4893
|
/* @__PURE__ */ e(
|
|
4100
4894
|
"input",
|
|
4101
4895
|
{
|
|
4102
|
-
ref:
|
|
4896
|
+
ref: f,
|
|
4103
4897
|
value: v,
|
|
4104
|
-
onChange: (
|
|
4105
|
-
|
|
4898
|
+
onChange: (z) => {
|
|
4899
|
+
y(z.target.value), c(!0), g(0);
|
|
4106
4900
|
},
|
|
4107
4901
|
onKeyDown: P,
|
|
4108
|
-
onFocus: () =>
|
|
4109
|
-
onBlur: () =>
|
|
4902
|
+
onFocus: () => I(!0),
|
|
4903
|
+
onBlur: () => I(!1),
|
|
4110
4904
|
disabled: i,
|
|
4111
4905
|
placeholder: d.length === 0 ? r : "",
|
|
4112
4906
|
"aria-autocomplete": "list",
|
|
4113
|
-
"aria-controls":
|
|
4114
|
-
"aria-expanded":
|
|
4907
|
+
"aria-controls": S,
|
|
4908
|
+
"aria-expanded": p,
|
|
4115
4909
|
role: "combobox",
|
|
4116
4910
|
style: {
|
|
4117
4911
|
flex: "1 1 80px",
|
|
@@ -4130,10 +4924,10 @@ function An({
|
|
|
4130
4924
|
]
|
|
4131
4925
|
}
|
|
4132
4926
|
),
|
|
4133
|
-
|
|
4927
|
+
p && !i && /* @__PURE__ */ h(
|
|
4134
4928
|
"div",
|
|
4135
4929
|
{
|
|
4136
|
-
id:
|
|
4930
|
+
id: S,
|
|
4137
4931
|
role: "listbox",
|
|
4138
4932
|
"aria-multiselectable": "true",
|
|
4139
4933
|
style: {
|
|
@@ -4151,50 +4945,49 @@ function An({
|
|
|
4151
4945
|
padding: "var(--lucent-space-1) 0"
|
|
4152
4946
|
},
|
|
4153
4947
|
children: [
|
|
4154
|
-
|
|
4155
|
-
const R = d.includes(
|
|
4948
|
+
C.length === 0 ? /* @__PURE__ */ e("div", { style: { padding: "var(--lucent-space-3) var(--lucent-space-4)" }, children: /* @__PURE__ */ e(E, { color: "secondary", size: "sm", children: "No options" }) }) : C.map((z, q) => {
|
|
4949
|
+
const R = d.includes(z.value), O = q === w, V = z.disabled ?? !1, H = B && !R;
|
|
4156
4950
|
return /* @__PURE__ */ h(
|
|
4157
4951
|
"div",
|
|
4158
4952
|
{
|
|
4159
4953
|
role: "option",
|
|
4160
4954
|
"aria-selected": R,
|
|
4161
|
-
"aria-disabled":
|
|
4955
|
+
"aria-disabled": V || H,
|
|
4162
4956
|
onClick: () => {
|
|
4163
|
-
!
|
|
4957
|
+
!V && !H && D(z.value);
|
|
4164
4958
|
},
|
|
4165
|
-
onMouseEnter: () =>
|
|
4959
|
+
onMouseEnter: () => g(q),
|
|
4166
4960
|
style: {
|
|
4167
4961
|
display: "flex",
|
|
4168
4962
|
alignItems: "center",
|
|
4169
4963
|
gap: "var(--lucent-space-2)",
|
|
4170
4964
|
padding: "var(--lucent-space-2) var(--lucent-space-3)",
|
|
4171
|
-
cursor:
|
|
4965
|
+
cursor: V || H ? "not-allowed" : "pointer",
|
|
4172
4966
|
background: O ? "var(--lucent-bg-subtle)" : "transparent",
|
|
4173
|
-
opacity:
|
|
4967
|
+
opacity: V || H ? 0.5 : 1
|
|
4174
4968
|
},
|
|
4175
4969
|
children: [
|
|
4176
|
-
/* @__PURE__ */ e(
|
|
4177
|
-
|
|
4178
|
-
|
|
4179
|
-
|
|
4180
|
-
|
|
4181
|
-
|
|
4182
|
-
|
|
4183
|
-
|
|
4184
|
-
|
|
4185
|
-
|
|
4186
|
-
|
|
4187
|
-
|
|
4188
|
-
/* @__PURE__ */ e(q, { size: "sm", children: I.label })
|
|
4970
|
+
/* @__PURE__ */ e(
|
|
4971
|
+
ue,
|
|
4972
|
+
{
|
|
4973
|
+
checked: R,
|
|
4974
|
+
disabled: V || H,
|
|
4975
|
+
size: "md",
|
|
4976
|
+
style: { margin: 0, pointerEvents: "none" },
|
|
4977
|
+
"aria-hidden": !0,
|
|
4978
|
+
readOnly: !0
|
|
4979
|
+
}
|
|
4980
|
+
),
|
|
4981
|
+
/* @__PURE__ */ e(E, { size: "sm", children: z.label })
|
|
4189
4982
|
]
|
|
4190
4983
|
},
|
|
4191
|
-
|
|
4984
|
+
z.value
|
|
4192
4985
|
);
|
|
4193
4986
|
}),
|
|
4194
|
-
|
|
4987
|
+
B && /* @__PURE__ */ e("div", { style: {
|
|
4195
4988
|
padding: "var(--lucent-space-2) var(--lucent-space-3)",
|
|
4196
4989
|
borderTop: "1px solid var(--lucent-border-subtle)"
|
|
4197
|
-
}, children: /* @__PURE__ */ h(
|
|
4990
|
+
}, children: /* @__PURE__ */ h(E, { size: "xs", color: "secondary", children: [
|
|
4198
4991
|
"Max ",
|
|
4199
4992
|
l,
|
|
4200
4993
|
" selected"
|
|
@@ -4204,7 +4997,7 @@ function An({
|
|
|
4204
4997
|
)
|
|
4205
4998
|
] });
|
|
4206
4999
|
}
|
|
4207
|
-
const
|
|
5000
|
+
const na = {
|
|
4208
5001
|
id: "multi-select",
|
|
4209
5002
|
name: "MultiSelect",
|
|
4210
5003
|
tier: "molecule",
|
|
@@ -4299,22 +5092,22 @@ const Fn = {
|
|
|
4299
5092
|
notes: 'The input carries role="combobox" with aria-expanded and aria-controls pointing to the listbox. Each option has role="option" with aria-selected. Remove buttons on tags have descriptive aria-label.'
|
|
4300
5093
|
}
|
|
4301
5094
|
};
|
|
4302
|
-
function
|
|
5095
|
+
function Bt(t, n) {
|
|
4303
5096
|
return new Date(t, n + 1, 0).getDate();
|
|
4304
5097
|
}
|
|
4305
|
-
function
|
|
5098
|
+
function Rt(t, n) {
|
|
4306
5099
|
return new Date(t, n, 1).getDay();
|
|
4307
5100
|
}
|
|
4308
|
-
function
|
|
5101
|
+
function Y(t, n) {
|
|
4309
5102
|
return t.getFullYear() === n.getFullYear() && t.getMonth() === n.getMonth() && t.getDate() === n.getDate();
|
|
4310
5103
|
}
|
|
4311
|
-
function
|
|
5104
|
+
function X(t, n) {
|
|
4312
5105
|
return new Date(t.getFullYear(), t.getMonth(), t.getDate()) < new Date(n.getFullYear(), n.getMonth(), n.getDate());
|
|
4313
5106
|
}
|
|
4314
|
-
function
|
|
5107
|
+
function ae(t, n) {
|
|
4315
5108
|
return new Date(t.getFullYear(), t.getMonth(), t.getDate()) > new Date(n.getFullYear(), n.getMonth(), n.getDate());
|
|
4316
5109
|
}
|
|
4317
|
-
const
|
|
5110
|
+
const Nt = [
|
|
4318
5111
|
"January",
|
|
4319
5112
|
"February",
|
|
4320
5113
|
"March",
|
|
@@ -4327,12 +5120,12 @@ const kt = [
|
|
|
4327
5120
|
"October",
|
|
4328
5121
|
"November",
|
|
4329
5122
|
"December"
|
|
4330
|
-
],
|
|
5123
|
+
], Lt = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
|
|
4331
5124
|
function j(t) {
|
|
4332
5125
|
return `${t.getFullYear()}-${String(t.getMonth() + 1).padStart(2, "0")}-${String(t.getDate()).padStart(2, "0")}`;
|
|
4333
5126
|
}
|
|
4334
|
-
function
|
|
4335
|
-
const [o, r] =
|
|
5127
|
+
function re({ dir: t, onClick: n, disabled: a }) {
|
|
5128
|
+
const [o, r] = M(!1);
|
|
4336
5129
|
return /* @__PURE__ */ e(
|
|
4337
5130
|
"button",
|
|
4338
5131
|
{
|
|
@@ -4368,7 +5161,7 @@ function ae({ dir: t, onClick: n, disabled: a }) {
|
|
|
4368
5161
|
}
|
|
4369
5162
|
);
|
|
4370
5163
|
}
|
|
4371
|
-
function
|
|
5164
|
+
function J({
|
|
4372
5165
|
year: t,
|
|
4373
5166
|
month: n,
|
|
4374
5167
|
selected: a,
|
|
@@ -4376,39 +5169,39 @@ function X({
|
|
|
4376
5169
|
min: r,
|
|
4377
5170
|
max: i,
|
|
4378
5171
|
onSelect: l,
|
|
4379
|
-
onPrevMonth:
|
|
4380
|
-
onNextMonth:
|
|
4381
|
-
highlightRange:
|
|
5172
|
+
onPrevMonth: s,
|
|
5173
|
+
onNextMonth: u,
|
|
5174
|
+
highlightRange: m
|
|
4382
5175
|
}) {
|
|
4383
|
-
const
|
|
5176
|
+
const b = Bt(t, n), d = Rt(t, n), [p, c] = M(null), v = [
|
|
4384
5177
|
...Array(d).fill(null),
|
|
4385
|
-
...Array.from({ length:
|
|
5178
|
+
...Array.from({ length: b }, (y, w) => w + 1)
|
|
4386
5179
|
];
|
|
4387
5180
|
for (; v.length % 7 !== 0; ) v.push(null);
|
|
4388
5181
|
return /* @__PURE__ */ h("div", { children: [
|
|
4389
5182
|
/* @__PURE__ */ h("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "var(--lucent-space-3)" }, children: [
|
|
4390
|
-
/* @__PURE__ */ e(
|
|
4391
|
-
/* @__PURE__ */ h(
|
|
4392
|
-
|
|
5183
|
+
/* @__PURE__ */ e(re, { dir: "prev", onClick: s }),
|
|
5184
|
+
/* @__PURE__ */ h(E, { weight: "medium", size: "sm", children: [
|
|
5185
|
+
Nt[n],
|
|
4393
5186
|
" ",
|
|
4394
5187
|
t
|
|
4395
5188
|
] }),
|
|
4396
|
-
/* @__PURE__ */ e(
|
|
5189
|
+
/* @__PURE__ */ e(re, { dir: "next", onClick: u })
|
|
4397
5190
|
] }),
|
|
4398
|
-
/* @__PURE__ */ e("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2, marginBottom: "var(--lucent-space-1)" }, children:
|
|
4399
|
-
/* @__PURE__ */ e("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2 }, children: v.map((
|
|
4400
|
-
if (!
|
|
4401
|
-
const
|
|
4402
|
-
let
|
|
4403
|
-
return
|
|
5191
|
+
/* @__PURE__ */ e("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2, marginBottom: "var(--lucent-space-1)" }, children: Lt.map((y) => /* @__PURE__ */ e("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ e(E, { size: "xs", color: "secondary", children: y }) }, y)) }),
|
|
5192
|
+
/* @__PURE__ */ e("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2 }, children: v.map((y, w) => {
|
|
5193
|
+
if (!y) return /* @__PURE__ */ e("div", {}, w);
|
|
5194
|
+
const g = new Date(t, n, y), x = a ? Y(g, a) : !1, I = Y(g, o), k = (r ? X(g, r) : !1) || (i ? ae(g, i) : !1);
|
|
5195
|
+
let f = !1;
|
|
5196
|
+
return m != null && m.start && (m != null && m.end) && (f = !X(g, m.start) && !ae(g, m.end)), /* @__PURE__ */ e(
|
|
4404
5197
|
"button",
|
|
4405
5198
|
{
|
|
4406
5199
|
type: "button",
|
|
4407
|
-
disabled:
|
|
4408
|
-
onClick: () => !
|
|
4409
|
-
onMouseEnter: () =>
|
|
4410
|
-
onMouseLeave: () =>
|
|
4411
|
-
"aria-label": j(
|
|
5200
|
+
disabled: k,
|
|
5201
|
+
onClick: () => !k && l(g),
|
|
5202
|
+
onMouseEnter: () => c(y),
|
|
5203
|
+
onMouseLeave: () => c(null),
|
|
5204
|
+
"aria-label": j(g),
|
|
4412
5205
|
"aria-pressed": x,
|
|
4413
5206
|
style: {
|
|
4414
5207
|
display: "flex",
|
|
@@ -4416,24 +5209,24 @@ function X({
|
|
|
4416
5209
|
justifyContent: "center",
|
|
4417
5210
|
height: 32,
|
|
4418
5211
|
width: "100%",
|
|
4419
|
-
border:
|
|
5212
|
+
border: I && !x ? "1px solid var(--lucent-border-strong)" : "1px solid transparent",
|
|
4420
5213
|
borderRadius: "var(--lucent-radius-md)",
|
|
4421
|
-
background: x ? "var(--lucent-accent-default)" :
|
|
4422
|
-
color: x ? "var(--lucent-text-on-accent)" :
|
|
5214
|
+
background: x ? "var(--lucent-accent-default)" : f ? "var(--lucent-accent-subtle)" : p === y && !k ? "var(--lucent-bg-muted)" : "transparent",
|
|
5215
|
+
color: x ? "var(--lucent-text-on-accent)" : k ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
|
|
4423
5216
|
fontSize: "var(--lucent-font-size-sm)",
|
|
4424
5217
|
fontFamily: "var(--lucent-font-family-base)",
|
|
4425
|
-
fontWeight:
|
|
4426
|
-
cursor:
|
|
5218
|
+
fontWeight: I ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
|
|
5219
|
+
cursor: k ? "not-allowed" : "pointer",
|
|
4427
5220
|
transition: "background var(--lucent-duration-fast)"
|
|
4428
5221
|
},
|
|
4429
|
-
children:
|
|
5222
|
+
children: y
|
|
4430
5223
|
},
|
|
4431
|
-
|
|
5224
|
+
w
|
|
4432
5225
|
);
|
|
4433
5226
|
}) })
|
|
4434
5227
|
] });
|
|
4435
5228
|
}
|
|
4436
|
-
function
|
|
5229
|
+
function aa({
|
|
4437
5230
|
value: t,
|
|
4438
5231
|
defaultValue: n,
|
|
4439
5232
|
onChange: a,
|
|
@@ -4441,48 +5234,48 @@ function Nn({
|
|
|
4441
5234
|
disabled: r = !1,
|
|
4442
5235
|
min: i,
|
|
4443
5236
|
max: l,
|
|
4444
|
-
style:
|
|
5237
|
+
style: s
|
|
4445
5238
|
}) {
|
|
4446
|
-
const
|
|
4447
|
-
|
|
4448
|
-
if (!
|
|
4449
|
-
const
|
|
4450
|
-
var
|
|
4451
|
-
(
|
|
5239
|
+
const u = t !== void 0, [m, b] = M(n), d = u ? t : m, p = /* @__PURE__ */ new Date(), [c, v] = M((d ?? p).getFullYear()), [y, w] = M((d ?? p).getMonth()), [g, x] = M(!1), [I, k] = M(!1), f = F(null);
|
|
5240
|
+
L(() => {
|
|
5241
|
+
if (!g) return;
|
|
5242
|
+
const C = (P) => {
|
|
5243
|
+
var B;
|
|
5244
|
+
(B = f.current) != null && B.contains(P.target) || x(!1);
|
|
4452
5245
|
};
|
|
4453
|
-
return document.addEventListener("mousedown",
|
|
4454
|
-
}, [
|
|
4455
|
-
const
|
|
4456
|
-
|
|
5246
|
+
return document.addEventListener("mousedown", C), () => document.removeEventListener("mousedown", C);
|
|
5247
|
+
}, [g]);
|
|
5248
|
+
const S = (C) => {
|
|
5249
|
+
u || b(C), a == null || a(C), x(!1);
|
|
4457
5250
|
}, D = () => {
|
|
4458
|
-
|
|
4459
|
-
},
|
|
4460
|
-
|
|
5251
|
+
y === 0 ? (w(11), v((C) => C - 1)) : w((C) => C - 1);
|
|
5252
|
+
}, T = () => {
|
|
5253
|
+
y === 11 ? (w(0), v((C) => C + 1)) : w((C) => C + 1);
|
|
4461
5254
|
};
|
|
4462
|
-
return /* @__PURE__ */ h("div", { ref:
|
|
5255
|
+
return /* @__PURE__ */ h("div", { ref: f, style: { position: "relative", display: "inline-block", ...s }, children: [
|
|
4463
5256
|
/* @__PURE__ */ h(
|
|
4464
5257
|
"button",
|
|
4465
5258
|
{
|
|
4466
5259
|
type: "button",
|
|
4467
5260
|
disabled: r,
|
|
4468
|
-
onClick: () => !r && x((
|
|
4469
|
-
onFocus: () =>
|
|
4470
|
-
onBlur: () =>
|
|
5261
|
+
onClick: () => !r && x((C) => !C),
|
|
5262
|
+
onFocus: () => k(!0),
|
|
5263
|
+
onBlur: () => k(!1),
|
|
4471
5264
|
"aria-haspopup": "dialog",
|
|
4472
|
-
"aria-expanded":
|
|
5265
|
+
"aria-expanded": g,
|
|
4473
5266
|
style: {
|
|
4474
5267
|
display: "inline-flex",
|
|
4475
5268
|
alignItems: "center",
|
|
4476
5269
|
gap: "var(--lucent-space-2)",
|
|
4477
5270
|
padding: "var(--lucent-space-2) var(--lucent-space-3)",
|
|
4478
5271
|
borderRadius: "var(--lucent-radius-md)",
|
|
4479
|
-
border: `1px solid ${
|
|
5272
|
+
border: `1px solid ${I ? "var(--lucent-accent-default)" : "var(--lucent-border-default)"}`,
|
|
4480
5273
|
background: r ? "var(--lucent-bg-muted)" : "var(--lucent-surface-default)",
|
|
4481
5274
|
color: d ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
|
|
4482
5275
|
fontFamily: "var(--lucent-font-family-base)",
|
|
4483
5276
|
fontSize: "var(--lucent-font-size-sm)",
|
|
4484
5277
|
cursor: r ? "not-allowed" : "pointer",
|
|
4485
|
-
outline:
|
|
5278
|
+
outline: I ? "2px solid var(--lucent-focus-ring)" : "none",
|
|
4486
5279
|
outlineOffset: 2,
|
|
4487
5280
|
minWidth: 160,
|
|
4488
5281
|
transition: "border-color var(--lucent-duration-fast)"
|
|
@@ -4497,7 +5290,7 @@ function Nn({
|
|
|
4497
5290
|
]
|
|
4498
5291
|
}
|
|
4499
5292
|
),
|
|
4500
|
-
|
|
5293
|
+
g && /* @__PURE__ */ e(
|
|
4501
5294
|
"div",
|
|
4502
5295
|
{
|
|
4503
5296
|
role: "dialog",
|
|
@@ -4515,24 +5308,24 @@ function Nn({
|
|
|
4515
5308
|
minWidth: 260
|
|
4516
5309
|
},
|
|
4517
5310
|
children: /* @__PURE__ */ e(
|
|
4518
|
-
|
|
5311
|
+
J,
|
|
4519
5312
|
{
|
|
4520
|
-
year:
|
|
4521
|
-
month:
|
|
5313
|
+
year: c,
|
|
5314
|
+
month: y,
|
|
4522
5315
|
...d !== void 0 && { selected: d },
|
|
4523
|
-
today:
|
|
5316
|
+
today: p,
|
|
4524
5317
|
...i !== void 0 && { min: i },
|
|
4525
5318
|
...l !== void 0 && { max: l },
|
|
4526
|
-
onSelect:
|
|
5319
|
+
onSelect: S,
|
|
4527
5320
|
onPrevMonth: D,
|
|
4528
|
-
onNextMonth:
|
|
5321
|
+
onNextMonth: T
|
|
4529
5322
|
}
|
|
4530
5323
|
)
|
|
4531
5324
|
}
|
|
4532
5325
|
)
|
|
4533
5326
|
] });
|
|
4534
5327
|
}
|
|
4535
|
-
const
|
|
5328
|
+
const ra = {
|
|
4536
5329
|
id: "date-picker",
|
|
4537
5330
|
name: "DatePicker",
|
|
4538
5331
|
tier: "molecule",
|
|
@@ -4618,10 +5411,10 @@ const Rn = {
|
|
|
4618
5411
|
notes: 'The calendar popover is role="dialog". Each day button has aria-label with the full date and aria-pressed for selected state. Full arrow-key navigation within the calendar grid is a planned enhancement.'
|
|
4619
5412
|
}
|
|
4620
5413
|
};
|
|
4621
|
-
function
|
|
4622
|
-
return t ?
|
|
5414
|
+
function $t(t, n) {
|
|
5415
|
+
return t ? Y(t.start, t.end) ? j(t.start) : `${j(t.start)} → ${j(t.end)}` : n;
|
|
4623
5416
|
}
|
|
4624
|
-
function
|
|
5417
|
+
function oa({
|
|
4625
5418
|
value: t,
|
|
4626
5419
|
defaultValue: n,
|
|
4627
5420
|
onChange: a,
|
|
@@ -4629,40 +5422,40 @@ function Ln({
|
|
|
4629
5422
|
disabled: r = !1,
|
|
4630
5423
|
min: i,
|
|
4631
5424
|
max: l,
|
|
4632
|
-
style:
|
|
5425
|
+
style: s
|
|
4633
5426
|
}) {
|
|
4634
|
-
const
|
|
4635
|
-
|
|
4636
|
-
if (!
|
|
4637
|
-
const
|
|
5427
|
+
const u = t !== void 0, [m, b] = M(n), d = u ? t : m, [p, c] = M(null), v = /* @__PURE__ */ new Date(), [y, w] = M(((d == null ? void 0 : d.start) ?? v).getFullYear()), [g, x] = M(((d == null ? void 0 : d.start) ?? v).getMonth()), I = g === 11 ? 0 : g + 1, k = g === 11 ? y + 1 : y, [f, S] = M(!1), [D, T] = M(!1), C = F(null);
|
|
5428
|
+
L(() => {
|
|
5429
|
+
if (!f) return;
|
|
5430
|
+
const q = (R) => {
|
|
4638
5431
|
var O;
|
|
4639
|
-
(O =
|
|
5432
|
+
(O = C.current) != null && O.contains(R.target) || (S(!1), c(null));
|
|
4640
5433
|
};
|
|
4641
|
-
return document.addEventListener("mousedown",
|
|
4642
|
-
}, [
|
|
4643
|
-
const P = (
|
|
4644
|
-
if (!
|
|
4645
|
-
|
|
5434
|
+
return document.addEventListener("mousedown", q), () => document.removeEventListener("mousedown", q);
|
|
5435
|
+
}, [f]);
|
|
5436
|
+
const P = (q) => {
|
|
5437
|
+
if (!p)
|
|
5438
|
+
c(q);
|
|
4646
5439
|
else {
|
|
4647
|
-
const [R, O] =
|
|
4648
|
-
|
|
5440
|
+
const [R, O] = X(q, p) || Y(q, p) ? [q, p] : [p, q], V = { start: R, end: O };
|
|
5441
|
+
u || b(V), a == null || a(V), c(null), S(!1);
|
|
4649
5442
|
}
|
|
4650
|
-
},
|
|
4651
|
-
|
|
5443
|
+
}, B = () => {
|
|
5444
|
+
g === 0 ? (x(11), w((q) => q - 1)) : x((q) => q - 1);
|
|
4652
5445
|
}, $ = () => {
|
|
4653
|
-
|
|
4654
|
-
},
|
|
4655
|
-
return /* @__PURE__ */ h("div", { ref:
|
|
5446
|
+
g === 11 ? (x(0), w((q) => q + 1)) : x((q) => q + 1);
|
|
5447
|
+
}, z = p ? { start: p, end: p } : d ? { start: d.start, end: d.end } : void 0;
|
|
5448
|
+
return /* @__PURE__ */ h("div", { ref: C, style: { position: "relative", display: "inline-block", ...s }, children: [
|
|
4656
5449
|
/* @__PURE__ */ h(
|
|
4657
5450
|
"button",
|
|
4658
5451
|
{
|
|
4659
5452
|
type: "button",
|
|
4660
5453
|
disabled: r,
|
|
4661
|
-
onClick: () => !r &&
|
|
4662
|
-
onFocus: () =>
|
|
4663
|
-
onBlur: () =>
|
|
5454
|
+
onClick: () => !r && S((q) => !q),
|
|
5455
|
+
onFocus: () => T(!0),
|
|
5456
|
+
onBlur: () => T(!1),
|
|
4664
5457
|
"aria-haspopup": "dialog",
|
|
4665
|
-
"aria-expanded":
|
|
5458
|
+
"aria-expanded": f,
|
|
4666
5459
|
style: {
|
|
4667
5460
|
display: "inline-flex",
|
|
4668
5461
|
alignItems: "center",
|
|
@@ -4686,11 +5479,11 @@ function Ln({
|
|
|
4686
5479
|
/* @__PURE__ */ e("path", { d: "M1 6h12", stroke: "currentColor", strokeWidth: "1.3" }),
|
|
4687
5480
|
/* @__PURE__ */ e("path", { d: "M4 1v2M10 1v2", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round" })
|
|
4688
5481
|
] }),
|
|
4689
|
-
/* @__PURE__ */ e("span", { style: { flex: 1, textAlign: "left" }, children:
|
|
5482
|
+
/* @__PURE__ */ e("span", { style: { flex: 1, textAlign: "left" }, children: $t(d, o) })
|
|
4690
5483
|
]
|
|
4691
5484
|
}
|
|
4692
5485
|
),
|
|
4693
|
-
|
|
5486
|
+
f && /* @__PURE__ */ h(
|
|
4694
5487
|
"div",
|
|
4695
5488
|
{
|
|
4696
5489
|
role: "dialog",
|
|
@@ -4710,48 +5503,48 @@ function Ln({
|
|
|
4710
5503
|
},
|
|
4711
5504
|
children: [
|
|
4712
5505
|
/* @__PURE__ */ e("div", { style: { minWidth: 220 }, children: /* @__PURE__ */ e(
|
|
4713
|
-
|
|
5506
|
+
J,
|
|
4714
5507
|
{
|
|
4715
|
-
year:
|
|
4716
|
-
month:
|
|
5508
|
+
year: y,
|
|
5509
|
+
month: g,
|
|
4717
5510
|
...(d == null ? void 0 : d.start) !== void 0 && { selected: d.start },
|
|
4718
5511
|
today: v,
|
|
4719
5512
|
...i !== void 0 && { min: i },
|
|
4720
5513
|
...l !== void 0 && { max: l },
|
|
4721
5514
|
onSelect: P,
|
|
4722
|
-
onPrevMonth:
|
|
5515
|
+
onPrevMonth: B,
|
|
4723
5516
|
onNextMonth: $,
|
|
4724
|
-
...
|
|
5517
|
+
...z !== void 0 && { highlightRange: z }
|
|
4725
5518
|
}
|
|
4726
5519
|
) }),
|
|
4727
5520
|
/* @__PURE__ */ e("div", { style: { width: 1, background: "var(--lucent-border-subtle)", flexShrink: 0 } }),
|
|
4728
5521
|
/* @__PURE__ */ e("div", { style: { minWidth: 220 }, children: /* @__PURE__ */ e(
|
|
4729
|
-
|
|
5522
|
+
J,
|
|
4730
5523
|
{
|
|
4731
|
-
year:
|
|
4732
|
-
month:
|
|
5524
|
+
year: k,
|
|
5525
|
+
month: I,
|
|
4733
5526
|
...(d == null ? void 0 : d.end) !== void 0 && { selected: d.end },
|
|
4734
5527
|
today: v,
|
|
4735
5528
|
...i !== void 0 && { min: i },
|
|
4736
5529
|
...l !== void 0 && { max: l },
|
|
4737
5530
|
onSelect: P,
|
|
4738
|
-
onPrevMonth:
|
|
5531
|
+
onPrevMonth: B,
|
|
4739
5532
|
onNextMonth: $,
|
|
4740
|
-
...
|
|
5533
|
+
...z !== void 0 && { highlightRange: z }
|
|
4741
5534
|
}
|
|
4742
5535
|
) })
|
|
4743
5536
|
]
|
|
4744
5537
|
}
|
|
4745
5538
|
),
|
|
4746
|
-
|
|
4747
|
-
|
|
5539
|
+
p && f && /* @__PURE__ */ e("div", { style: { position: "absolute", top: "calc(100% + 4px)", left: 0, zIndex: 1001, pointerEvents: "none" } }),
|
|
5540
|
+
p && f && /* @__PURE__ */ e("div", { style: {
|
|
4748
5541
|
position: "absolute",
|
|
4749
5542
|
bottom: -24,
|
|
4750
5543
|
left: 0
|
|
4751
|
-
}, children: /* @__PURE__ */ e(
|
|
5544
|
+
}, children: /* @__PURE__ */ e(E, { size: "xs", color: "secondary", children: "Now pick the end date" }) })
|
|
4752
5545
|
] });
|
|
4753
5546
|
}
|
|
4754
|
-
const
|
|
5547
|
+
const ia = {
|
|
4755
5548
|
id: "date-range-picker",
|
|
4756
5549
|
name: "DateRangePicker",
|
|
4757
5550
|
tier: "molecule",
|
|
@@ -4833,17 +5626,17 @@ const Bn = {
|
|
|
4833
5626
|
notes: 'Inherits Calendar accessibility from DatePicker. The two-step selection flow is reinforced with a visible "Now pick the end date" hint.'
|
|
4834
5627
|
}
|
|
4835
5628
|
};
|
|
4836
|
-
function
|
|
5629
|
+
function Q(t) {
|
|
4837
5630
|
return t < 1024 ? `${t} B` : t < 1024 * 1024 ? `${(t / 1024).toFixed(1)} KB` : `${(t / (1024 * 1024)).toFixed(1)} MB`;
|
|
4838
5631
|
}
|
|
4839
|
-
function
|
|
5632
|
+
function Pt() {
|
|
4840
5633
|
return Math.random().toString(36).slice(2);
|
|
4841
5634
|
}
|
|
4842
|
-
function
|
|
5635
|
+
function Wt({
|
|
4843
5636
|
item: t,
|
|
4844
5637
|
onRemove: n
|
|
4845
5638
|
}) {
|
|
4846
|
-
const [a, o] =
|
|
5639
|
+
const [a, o] = M(!1), r = t.progress, i = !!t.error;
|
|
4847
5640
|
return /* @__PURE__ */ h("div", { style: {
|
|
4848
5641
|
display: "flex",
|
|
4849
5642
|
alignItems: "center",
|
|
@@ -4858,8 +5651,8 @@ function It({
|
|
|
4858
5651
|
/* @__PURE__ */ e("path", { d: "M12 2v4h4", stroke: "currentColor", strokeWidth: "1.3" })
|
|
4859
5652
|
] }),
|
|
4860
5653
|
/* @__PURE__ */ h("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
4861
|
-
/* @__PURE__ */ e(
|
|
4862
|
-
i ? /* @__PURE__ */ e(
|
|
5654
|
+
/* @__PURE__ */ e(E, { size: "sm", truncate: !0, children: t.file.name }),
|
|
5655
|
+
i ? /* @__PURE__ */ e(E, { size: "xs", color: "danger", children: t.error }) : /* @__PURE__ */ e(E, { size: "xs", color: "secondary", children: Q(t.file.size) }),
|
|
4863
5656
|
r !== void 0 && !i && /* @__PURE__ */ e("div", { style: {
|
|
4864
5657
|
marginTop: 4,
|
|
4865
5658
|
height: 3,
|
|
@@ -4901,7 +5694,7 @@ function It({
|
|
|
4901
5694
|
)
|
|
4902
5695
|
] });
|
|
4903
5696
|
}
|
|
4904
|
-
function
|
|
5697
|
+
function la({
|
|
4905
5698
|
accept: t,
|
|
4906
5699
|
multiple: n = !1,
|
|
4907
5700
|
maxSize: a,
|
|
@@ -4909,31 +5702,31 @@ function $n({
|
|
|
4909
5702
|
onChange: r,
|
|
4910
5703
|
onError: i,
|
|
4911
5704
|
disabled: l = !1,
|
|
4912
|
-
style:
|
|
5705
|
+
style: s
|
|
4913
5706
|
}) {
|
|
4914
|
-
const
|
|
4915
|
-
if (!
|
|
4916
|
-
const
|
|
4917
|
-
for (const
|
|
4918
|
-
if (a &&
|
|
4919
|
-
i == null || i(`"${
|
|
5707
|
+
const u = o !== void 0, [m, b] = M([]), d = u ? o : m, [p, c] = M(!1), [v, y] = M(!1), w = F(null), g = Z((f) => {
|
|
5708
|
+
if (!f || l) return;
|
|
5709
|
+
const S = [];
|
|
5710
|
+
for (const T of Array.from(f)) {
|
|
5711
|
+
if (a && T.size > a) {
|
|
5712
|
+
i == null || i(`"${T.name}" exceeds the ${Q(a)} limit.`);
|
|
4920
5713
|
continue;
|
|
4921
5714
|
}
|
|
4922
|
-
if (!n && d.length +
|
|
4923
|
-
|
|
5715
|
+
if (!n && d.length + S.length >= 1) break;
|
|
5716
|
+
S.push({ id: Pt(), file: T });
|
|
4924
5717
|
}
|
|
4925
|
-
if (
|
|
4926
|
-
const D = n ? [...d, ...
|
|
4927
|
-
|
|
4928
|
-
}, [l, d,
|
|
4929
|
-
const
|
|
4930
|
-
|
|
4931
|
-
},
|
|
4932
|
-
|
|
4933
|
-
},
|
|
4934
|
-
|
|
5718
|
+
if (S.length === 0) return;
|
|
5719
|
+
const D = n ? [...d, ...S] : S;
|
|
5720
|
+
u || b(D), r == null || r(D);
|
|
5721
|
+
}, [l, d, u, a, n, r, i]), x = (f) => {
|
|
5722
|
+
const S = d.filter((D) => D.id !== f);
|
|
5723
|
+
u || b(S), r == null || r(S);
|
|
5724
|
+
}, I = (f) => {
|
|
5725
|
+
f.preventDefault(), c(!1), g(f.dataTransfer.files);
|
|
5726
|
+
}, k = (f) => {
|
|
5727
|
+
g(f.target.files), f.target.value = "";
|
|
4935
5728
|
};
|
|
4936
|
-
return /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-3)", ...
|
|
5729
|
+
return /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-3)", ...s }, children: [
|
|
4937
5730
|
/* @__PURE__ */ h(
|
|
4938
5731
|
"div",
|
|
4939
5732
|
{
|
|
@@ -4942,20 +5735,20 @@ function $n({
|
|
|
4942
5735
|
"aria-label": "Upload files",
|
|
4943
5736
|
"aria-disabled": l,
|
|
4944
5737
|
onClick: () => {
|
|
4945
|
-
var
|
|
4946
|
-
return !l && ((
|
|
5738
|
+
var f;
|
|
5739
|
+
return !l && ((f = w.current) == null ? void 0 : f.click());
|
|
4947
5740
|
},
|
|
4948
|
-
onKeyDown: (
|
|
4949
|
-
var
|
|
4950
|
-
(
|
|
5741
|
+
onKeyDown: (f) => {
|
|
5742
|
+
var S;
|
|
5743
|
+
(f.key === "Enter" || f.key === " ") && (f.preventDefault(), (S = w.current) == null || S.click());
|
|
4951
5744
|
},
|
|
4952
|
-
onFocus: () =>
|
|
4953
|
-
onBlur: () =>
|
|
4954
|
-
onDragOver: (
|
|
4955
|
-
|
|
5745
|
+
onFocus: () => y(!0),
|
|
5746
|
+
onBlur: () => y(!1),
|
|
5747
|
+
onDragOver: (f) => {
|
|
5748
|
+
f.preventDefault(), l || c(!0);
|
|
4956
5749
|
},
|
|
4957
|
-
onDragLeave: () =>
|
|
4958
|
-
onDrop:
|
|
5750
|
+
onDragLeave: () => c(!1),
|
|
5751
|
+
onDrop: I,
|
|
4959
5752
|
style: {
|
|
4960
5753
|
display: "flex",
|
|
4961
5754
|
flexDirection: "column",
|
|
@@ -4964,8 +5757,8 @@ function $n({
|
|
|
4964
5757
|
gap: "var(--lucent-space-2)",
|
|
4965
5758
|
padding: "var(--lucent-space-8) var(--lucent-space-6)",
|
|
4966
5759
|
borderRadius: "var(--lucent-radius-lg)",
|
|
4967
|
-
border: `2px dashed ${l ? "var(--lucent-border-default)" :
|
|
4968
|
-
background:
|
|
5760
|
+
border: `2px dashed ${l ? "var(--lucent-border-default)" : p || v ? "var(--lucent-accent-default)" : "var(--lucent-border-default)"}`,
|
|
5761
|
+
background: p ? "var(--lucent-accent-subtle)" : "var(--lucent-bg-subtle)",
|
|
4969
5762
|
cursor: l ? "not-allowed" : "pointer",
|
|
4970
5763
|
transition: "border-color var(--lucent-duration-fast), background var(--lucent-duration-fast)",
|
|
4971
5764
|
outline: "none"
|
|
@@ -4979,7 +5772,7 @@ function $n({
|
|
|
4979
5772
|
viewBox: "0 0 32 32",
|
|
4980
5773
|
fill: "none",
|
|
4981
5774
|
"aria-hidden": !0,
|
|
4982
|
-
style: { color: l ? "var(--lucent-text-disabled)" :
|
|
5775
|
+
style: { color: l ? "var(--lucent-text-disabled)" : p ? "var(--lucent-accent-default)" : "var(--lucent-text-secondary)" },
|
|
4983
5776
|
children: [
|
|
4984
5777
|
/* @__PURE__ */ e("path", { d: "M16 20V10M16 10l-4 4M16 10l4 4", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
4985
5778
|
/* @__PURE__ */ e("path", { d: "M8 24h16", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })
|
|
@@ -4987,21 +5780,21 @@ function $n({
|
|
|
4987
5780
|
}
|
|
4988
5781
|
),
|
|
4989
5782
|
/* @__PURE__ */ h("div", { style: { textAlign: "center" }, children: [
|
|
4990
|
-
/* @__PURE__ */ e(
|
|
4991
|
-
(t || a) && /* @__PURE__ */ e(
|
|
5783
|
+
/* @__PURE__ */ e(E, { color: l ? "disabled" : "primary", weight: "medium", children: p ? "Drop to upload" : "Drop files here or click to browse" }),
|
|
5784
|
+
(t || a) && /* @__PURE__ */ e(E, { size: "xs", color: "secondary", children: [
|
|
4992
5785
|
t && `Accepted: ${t}`,
|
|
4993
|
-
a && `Max size: ${
|
|
5786
|
+
a && `Max size: ${Q(a)}`
|
|
4994
5787
|
].filter(Boolean).join(" · ") })
|
|
4995
5788
|
] }),
|
|
4996
5789
|
/* @__PURE__ */ e(
|
|
4997
5790
|
"input",
|
|
4998
5791
|
{
|
|
4999
|
-
ref:
|
|
5792
|
+
ref: w,
|
|
5000
5793
|
type: "file",
|
|
5001
5794
|
accept: t,
|
|
5002
5795
|
multiple: n,
|
|
5003
5796
|
disabled: l,
|
|
5004
|
-
onChange:
|
|
5797
|
+
onChange: k,
|
|
5005
5798
|
style: { display: "none" },
|
|
5006
5799
|
tabIndex: -1
|
|
5007
5800
|
}
|
|
@@ -5009,10 +5802,10 @@ function $n({
|
|
|
5009
5802
|
]
|
|
5010
5803
|
}
|
|
5011
5804
|
),
|
|
5012
|
-
d.length > 0 && /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)" }, children: d.map((
|
|
5805
|
+
d.length > 0 && /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)" }, children: d.map((f) => /* @__PURE__ */ e(Wt, { item: f, onRemove: x }, f.id)) })
|
|
5013
5806
|
] });
|
|
5014
5807
|
}
|
|
5015
|
-
const
|
|
5808
|
+
const sa = {
|
|
5016
5809
|
id: "file-upload",
|
|
5017
5810
|
name: "FileUpload",
|
|
5018
5811
|
tier: "molecule",
|
|
@@ -5110,23 +5903,23 @@ const handleChange = async (updated: UploadFile[]) => {
|
|
|
5110
5903
|
keyboardInteractions: ["Enter/Space to open file picker", "Tab to focus drop zone"],
|
|
5111
5904
|
notes: 'The drop zone has role="button" with tabIndex=0 and responds to Enter/Space. Remove buttons on file rows have aria-label including the filename.'
|
|
5112
5905
|
}
|
|
5113
|
-
},
|
|
5906
|
+
}, Vt = {
|
|
5114
5907
|
default: "var(--lucent-border-strong)",
|
|
5115
5908
|
success: "var(--lucent-success-default)",
|
|
5116
5909
|
warning: "var(--lucent-warning-default)",
|
|
5117
5910
|
danger: "var(--lucent-danger-default)",
|
|
5118
5911
|
info: "var(--lucent-info-default)"
|
|
5119
|
-
},
|
|
5912
|
+
}, Ot = {
|
|
5120
5913
|
default: "var(--lucent-bg-muted)",
|
|
5121
5914
|
success: "var(--lucent-success-subtle)",
|
|
5122
5915
|
warning: "var(--lucent-warning-subtle)",
|
|
5123
5916
|
danger: "var(--lucent-danger-subtle)",
|
|
5124
5917
|
info: "var(--lucent-info-subtle)"
|
|
5125
5918
|
};
|
|
5126
|
-
function
|
|
5919
|
+
function Ht({ status: t }) {
|
|
5127
5920
|
return t === "success" ? /* @__PURE__ */ e("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": !0, children: /* @__PURE__ */ e("path", { d: "M2 5l2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) : t === "danger" ? /* @__PURE__ */ e("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": !0, children: /* @__PURE__ */ e("path", { d: "M2 2l6 6M8 2L2 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) : t === "warning" ? /* @__PURE__ */ e("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": !0, children: /* @__PURE__ */ e("path", { d: "M5 2v4M5 7.5v.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) : null;
|
|
5128
5921
|
}
|
|
5129
|
-
function
|
|
5922
|
+
function ca({ items: t, style: n }) {
|
|
5130
5923
|
return /* @__PURE__ */ e(
|
|
5131
5924
|
"ol",
|
|
5132
5925
|
{
|
|
@@ -5139,7 +5932,7 @@ function Wn({ items: t, style: n }) {
|
|
|
5139
5932
|
...n
|
|
5140
5933
|
},
|
|
5141
5934
|
children: t.map((a, o) => {
|
|
5142
|
-
const r = a.status ?? "default", i =
|
|
5935
|
+
const r = a.status ?? "default", i = Vt[r], l = Ot[r], s = o === t.length - 1;
|
|
5143
5936
|
return /* @__PURE__ */ h(
|
|
5144
5937
|
"li",
|
|
5145
5938
|
{
|
|
@@ -5168,8 +5961,8 @@ function Wn({ items: t, style: n }) {
|
|
|
5168
5961
|
color: i,
|
|
5169
5962
|
flexShrink: 0,
|
|
5170
5963
|
zIndex: 1
|
|
5171
|
-
}, children: a.icon ?? /* @__PURE__ */ e(
|
|
5172
|
-
!
|
|
5964
|
+
}, children: a.icon ?? /* @__PURE__ */ e(Ht, { status: r }) }),
|
|
5965
|
+
!s && /* @__PURE__ */ e("div", { style: {
|
|
5173
5966
|
flex: 1,
|
|
5174
5967
|
width: 2,
|
|
5175
5968
|
background: "var(--lucent-border-subtle)",
|
|
@@ -5179,14 +5972,14 @@ function Wn({ items: t, style: n }) {
|
|
|
5179
5972
|
] }),
|
|
5180
5973
|
/* @__PURE__ */ h("div", { style: {
|
|
5181
5974
|
flex: 1,
|
|
5182
|
-
paddingBottom:
|
|
5975
|
+
paddingBottom: s ? 0 : "var(--lucent-space-6)",
|
|
5183
5976
|
paddingTop: 4
|
|
5184
5977
|
}, children: [
|
|
5185
5978
|
/* @__PURE__ */ h("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: "var(--lucent-space-3)", flexWrap: "wrap" }, children: [
|
|
5186
|
-
/* @__PURE__ */ e(
|
|
5187
|
-
a.date && /* @__PURE__ */ e(
|
|
5979
|
+
/* @__PURE__ */ e(E, { weight: "medium", size: "sm", children: a.title }),
|
|
5980
|
+
a.date && /* @__PURE__ */ e(E, { size: "xs", color: "secondary", children: a.date })
|
|
5188
5981
|
] }),
|
|
5189
|
-
a.description && /* @__PURE__ */ e("div", { style: { marginTop: "var(--lucent-space-1)" }, children: /* @__PURE__ */ e(
|
|
5982
|
+
a.description && /* @__PURE__ */ e("div", { style: { marginTop: "var(--lucent-space-1)" }, children: /* @__PURE__ */ e(E, { size: "sm", color: "secondary", children: a.description }) })
|
|
5190
5983
|
] })
|
|
5191
5984
|
]
|
|
5192
5985
|
},
|
|
@@ -5196,7 +5989,7 @@ function Wn({ items: t, style: n }) {
|
|
|
5196
5989
|
}
|
|
5197
5990
|
);
|
|
5198
5991
|
}
|
|
5199
|
-
const
|
|
5992
|
+
const da = {
|
|
5200
5993
|
id: "timeline",
|
|
5201
5994
|
name: "Timeline",
|
|
5202
5995
|
tier: "molecule",
|
|
@@ -5250,7 +6043,7 @@ const Vn = {
|
|
|
5250
6043
|
keyboardInteractions: ["Standard document flow — no interactive elements unless custom icons include them"],
|
|
5251
6044
|
notes: "Timeline is a semantic <ol> with <li> items. It is non-interactive by default. If items contain interactive elements (links, buttons), those elements carry their own keyboard behaviour."
|
|
5252
6045
|
}
|
|
5253
|
-
},
|
|
6046
|
+
}, fe = {
|
|
5254
6047
|
fontFamilyBase: '"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
5255
6048
|
fontFamilyMono: '"DM Mono", "Fira Code", "Cascadia Code", monospace',
|
|
5256
6049
|
fontFamilyDisplay: '"Georama", "DM Sans", sans-serif',
|
|
@@ -5271,7 +6064,7 @@ const Vn = {
|
|
|
5271
6064
|
letterSpacingTight: "-0.02em",
|
|
5272
6065
|
letterSpacingBase: "0em",
|
|
5273
6066
|
letterSpacingWide: "0.04em"
|
|
5274
|
-
},
|
|
6067
|
+
}, he = {
|
|
5275
6068
|
space0: "0px",
|
|
5276
6069
|
space1: "0.25rem",
|
|
5277
6070
|
space2: "0.5rem",
|
|
@@ -5285,38 +6078,38 @@ const Vn = {
|
|
|
5285
6078
|
space16: "4rem",
|
|
5286
6079
|
space20: "5rem",
|
|
5287
6080
|
space24: "6rem"
|
|
5288
|
-
},
|
|
6081
|
+
}, me = {
|
|
5289
6082
|
radiusNone: "0px",
|
|
5290
6083
|
radiusSm: "0.25rem",
|
|
5291
6084
|
radiusMd: "0.375rem",
|
|
5292
6085
|
radiusLg: "0.5rem",
|
|
5293
6086
|
radiusXl: "0.75rem",
|
|
5294
6087
|
radiusFull: "9999px"
|
|
5295
|
-
},
|
|
6088
|
+
}, ge = {
|
|
5296
6089
|
durationFast: "100ms",
|
|
5297
6090
|
durationBase: "200ms",
|
|
5298
6091
|
durationSlow: "350ms",
|
|
5299
6092
|
easingDefault: "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
5300
6093
|
easingEmphasized: "cubic-bezier(0.2, 0, 0, 1)",
|
|
5301
6094
|
easingDecelerate: "cubic-bezier(0, 0, 0.2, 1)"
|
|
5302
|
-
},
|
|
6095
|
+
}, jt = {
|
|
5303
6096
|
shadowNone: "none",
|
|
5304
6097
|
shadowSm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
|
5305
6098
|
shadowMd: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
|
5306
6099
|
shadowLg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
|
|
5307
6100
|
shadowXl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
|
|
5308
|
-
},
|
|
6101
|
+
}, Ut = {
|
|
5309
6102
|
shadowNone: "none",
|
|
5310
6103
|
shadowSm: "0 1px 2px 0 rgb(0 0 0 / 0.3)",
|
|
5311
6104
|
shadowMd: "0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4)",
|
|
5312
6105
|
shadowLg: "0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4)",
|
|
5313
6106
|
shadowXl: "0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5)"
|
|
5314
|
-
},
|
|
5315
|
-
...de,
|
|
5316
|
-
...ue,
|
|
5317
|
-
...pe,
|
|
6107
|
+
}, be = {
|
|
5318
6108
|
...fe,
|
|
5319
|
-
...
|
|
6109
|
+
...he,
|
|
6110
|
+
...me,
|
|
6111
|
+
...ge,
|
|
6112
|
+
...jt,
|
|
5320
6113
|
// Backgrounds
|
|
5321
6114
|
bgBase: "#ffffff",
|
|
5322
6115
|
bgSubtle: "#f9fafb",
|
|
@@ -5343,6 +6136,8 @@ const Vn = {
|
|
|
5343
6136
|
accentHover: "#1f2937",
|
|
5344
6137
|
accentActive: "#374151",
|
|
5345
6138
|
accentSubtle: "#f3f4f6",
|
|
6139
|
+
// placeholder — actual value is recomputed in LucentProvider
|
|
6140
|
+
accentBorder: "#111827",
|
|
5346
6141
|
// Status
|
|
5347
6142
|
successDefault: "#16a34a",
|
|
5348
6143
|
successSubtle: "#f0fdf4",
|
|
@@ -5359,12 +6154,12 @@ const Vn = {
|
|
|
5359
6154
|
infoText: "#1d4ed8",
|
|
5360
6155
|
// Focus
|
|
5361
6156
|
focusRing: "#111827"
|
|
5362
|
-
},
|
|
5363
|
-
...de,
|
|
5364
|
-
...ue,
|
|
5365
|
-
...pe,
|
|
6157
|
+
}, Gt = {
|
|
5366
6158
|
...fe,
|
|
5367
|
-
...
|
|
6159
|
+
...he,
|
|
6160
|
+
...me,
|
|
6161
|
+
...ge,
|
|
6162
|
+
...Ut,
|
|
5368
6163
|
// Backgrounds
|
|
5369
6164
|
bgBase: "#0b0d12",
|
|
5370
6165
|
bgSubtle: "#111318",
|
|
@@ -5391,6 +6186,8 @@ const Vn = {
|
|
|
5391
6186
|
accentHover: "#e5e7eb",
|
|
5392
6187
|
accentActive: "#d1d5db",
|
|
5393
6188
|
accentSubtle: "rgb(249 250 251 / 0.1)",
|
|
6189
|
+
// placeholder — actual value is recomputed in LucentProvider
|
|
6190
|
+
accentBorder: "#f9fafb",
|
|
5394
6191
|
// Status
|
|
5395
6192
|
successDefault: "#22c55e",
|
|
5396
6193
|
successSubtle: "rgb(34 197 94 / 0.1)",
|
|
@@ -5408,77 +6205,117 @@ const Vn = {
|
|
|
5408
6205
|
// Focus
|
|
5409
6206
|
focusRing: "#f9fafb"
|
|
5410
6207
|
};
|
|
5411
|
-
function
|
|
6208
|
+
function _t(t) {
|
|
5412
6209
|
return "--lucent-" + t.replace(/([A-Z])/g, (n) => `-${n.toLowerCase()}`).replace(/([a-z])(\d)/g, (n, a, o) => `${a}-${o}`);
|
|
5413
6210
|
}
|
|
5414
|
-
function
|
|
5415
|
-
const a = Object.entries(t).map(([o, r]) => ` ${
|
|
6211
|
+
function Yt(t, n = ":root") {
|
|
6212
|
+
const a = Object.entries(t).map(([o, r]) => ` ${_t(o)}: ${r};`).join(`
|
|
5416
6213
|
`);
|
|
5417
6214
|
return `${n} {
|
|
5418
6215
|
${a}
|
|
5419
6216
|
}`;
|
|
5420
6217
|
}
|
|
5421
|
-
function
|
|
6218
|
+
function Kt(t) {
|
|
5422
6219
|
const n = parseInt(t.slice(1, 3), 16) / 255, a = parseInt(t.slice(3, 5), 16) / 255, o = parseInt(t.slice(5, 7), 16) / 255, r = (i) => i <= 0.03928 ? i / 12.92 : Math.pow((i + 0.055) / 1.055, 2.4);
|
|
5423
6220
|
return 0.2126 * r(n) + 0.7152 * r(a) + 0.0722 * r(o);
|
|
5424
6221
|
}
|
|
5425
|
-
function
|
|
5426
|
-
return
|
|
6222
|
+
function Xt(t) {
|
|
6223
|
+
return Kt(t) < 0.179 ? "#ffffff" : "#000000";
|
|
6224
|
+
}
|
|
6225
|
+
function Jt(t) {
|
|
6226
|
+
const n = parseInt(t.slice(1, 3), 16), a = parseInt(t.slice(3, 5), 16), o = parseInt(t.slice(5, 7), 16);
|
|
6227
|
+
return { r: n, g: a, b: o };
|
|
6228
|
+
}
|
|
6229
|
+
function Qt({ r: t, g: n, b: a }) {
|
|
6230
|
+
const o = (r) => r.toString(16).padStart(2, "0");
|
|
6231
|
+
return `#${o(t)}${o(n)}${o(a)}`;
|
|
6232
|
+
}
|
|
6233
|
+
function Zt(t) {
|
|
6234
|
+
const { r: n, g: a, b: o } = Jt(t), r = n / 255, i = a / 255, l = o / 255, s = Math.max(r, i, l), u = Math.min(r, i, l);
|
|
6235
|
+
let m = 0, b = 0;
|
|
6236
|
+
const d = (s + u) / 2;
|
|
6237
|
+
if (s !== u) {
|
|
6238
|
+
const p = s - u;
|
|
6239
|
+
switch (b = d > 0.5 ? p / (2 - s - u) : p / (s + u), s) {
|
|
6240
|
+
case r:
|
|
6241
|
+
m = (i - l) / p + (i < l ? 6 : 0);
|
|
6242
|
+
break;
|
|
6243
|
+
case i:
|
|
6244
|
+
m = (l - r) / p + 2;
|
|
6245
|
+
break;
|
|
6246
|
+
case l:
|
|
6247
|
+
m = (r - i) / p + 4;
|
|
6248
|
+
break;
|
|
6249
|
+
}
|
|
6250
|
+
m /= 6;
|
|
6251
|
+
}
|
|
6252
|
+
return [m * 360, b, d];
|
|
6253
|
+
}
|
|
6254
|
+
function en(t, n, a) {
|
|
6255
|
+
t = (t % 360 + 360) % 360, n = Math.min(1, Math.max(0, n)), a = Math.min(1, Math.max(0, a));
|
|
6256
|
+
const o = (1 - Math.abs(2 * a - 1)) * n, r = o * (1 - Math.abs(t / 60 % 2 - 1)), i = a - o / 2;
|
|
6257
|
+
let l = 0, s = 0, u = 0;
|
|
6258
|
+
return t < 60 ? (l = o, s = r) : t < 120 ? (l = r, s = o) : t < 180 ? (s = o, u = r) : t < 240 ? (s = r, u = o) : t < 300 ? (l = r, u = o) : (l = o, u = r), Qt({ r: Math.round((l + i) * 255), g: Math.round((s + i) * 255), b: Math.round((u + i) * 255) });
|
|
6259
|
+
}
|
|
6260
|
+
function oe(t, n) {
|
|
6261
|
+
const [a, o, r] = Zt(t);
|
|
6262
|
+
return en(a, o, Math.min(1, Math.max(0, r + n)));
|
|
5427
6263
|
}
|
|
5428
|
-
const
|
|
6264
|
+
const ve = le({
|
|
5429
6265
|
theme: "light",
|
|
5430
|
-
tokens:
|
|
6266
|
+
tokens: be
|
|
5431
6267
|
});
|
|
5432
|
-
function
|
|
6268
|
+
function ua({
|
|
5433
6269
|
theme: t = "light",
|
|
5434
6270
|
tokens: n,
|
|
5435
6271
|
children: a
|
|
5436
6272
|
}) {
|
|
5437
|
-
const o =
|
|
6273
|
+
const o = ce().replace(/:/g, ""), r = t === "dark" ? Gt : be, i = n ? { ...r, ...n } : r, l = n != null && n.accentBorder ? n.accentBorder : t === "light" ? oe(i.accentDefault, -0.15) : oe(i.accentDefault, 0.15), s = {
|
|
5438
6274
|
...i,
|
|
5439
|
-
textOnAccent: (n == null ? void 0 : n.textOnAccent) ??
|
|
5440
|
-
|
|
5441
|
-
`
|
|
5442
|
-
|
|
5443
|
-
|
|
5444
|
-
|
|
5445
|
-
|
|
5446
|
-
|
|
6275
|
+
textOnAccent: (n == null ? void 0 : n.textOnAccent) ?? Xt(i.accentDefault),
|
|
6276
|
+
accentBorder: l
|
|
6277
|
+
}, u = `html { font-size: 13px; }
|
|
6278
|
+
` + Yt(s, ":root");
|
|
6279
|
+
return se(() => {
|
|
6280
|
+
let m = document.getElementById(`lucent-tokens-${o}`);
|
|
6281
|
+
return m || (m = document.createElement("style"), m.id = `lucent-tokens-${o}`, document.head.appendChild(m)), m.textContent = u, () => {
|
|
6282
|
+
var b;
|
|
6283
|
+
(b = document.getElementById(`lucent-tokens-${o}`)) == null || b.remove();
|
|
5447
6284
|
};
|
|
5448
|
-
}, [o,
|
|
6285
|
+
}, [o, u]), /* @__PURE__ */ e(ve.Provider, { value: { theme: t, tokens: s }, children: a });
|
|
5449
6286
|
}
|
|
5450
|
-
function
|
|
5451
|
-
return
|
|
6287
|
+
function pa() {
|
|
6288
|
+
return ie(ve);
|
|
5452
6289
|
}
|
|
5453
|
-
const
|
|
6290
|
+
const fa = {
|
|
5454
6291
|
accentDefault: "#e9c96b",
|
|
5455
6292
|
accentHover: "#ddb84e",
|
|
5456
6293
|
accentActive: "#c9a33b",
|
|
5457
6294
|
accentSubtle: "#fef9ec",
|
|
5458
6295
|
focusRing: "#e9c96b"
|
|
5459
6296
|
};
|
|
5460
|
-
function
|
|
6297
|
+
function N(t, n) {
|
|
5461
6298
|
return { field: t, message: n };
|
|
5462
6299
|
}
|
|
5463
|
-
function
|
|
6300
|
+
function tn(t) {
|
|
5464
6301
|
const n = [];
|
|
5465
6302
|
if (typeof t != "object" || t === null)
|
|
5466
|
-
return { valid: !1, errors: [
|
|
6303
|
+
return { valid: !1, errors: [N("manifest", "Must be a non-null object")] };
|
|
5467
6304
|
const a = t, o = ["id", "name", "description", "designIntent", "specVersion"];
|
|
5468
6305
|
for (const i of o)
|
|
5469
|
-
(typeof a[i] != "string" || a[i].trim() === "") && n.push(
|
|
5470
|
-
typeof a.id == "string" && !/^[a-z][a-z0-9-]*$/.test(a.id) && n.push(
|
|
6306
|
+
(typeof a[i] != "string" || a[i].trim() === "") && n.push(N(i, "Must be a non-empty string"));
|
|
6307
|
+
typeof a.id == "string" && !/^[a-z][a-z0-9-]*$/.test(a.id) && n.push(N("id", 'Must be kebab-case (e.g. "button", "form-field")'));
|
|
5471
6308
|
const r = ["atom", "molecule", "block", "flow", "overlay"];
|
|
5472
|
-
return r.includes(a.tier) || n.push(
|
|
5473
|
-
const
|
|
5474
|
-
(typeof
|
|
5475
|
-
}) : n.push(
|
|
5476
|
-
const
|
|
5477
|
-
(typeof
|
|
5478
|
-
}) : n.push(
|
|
6309
|
+
return r.includes(a.tier) || n.push(N("tier", `Must be one of: ${r.join(", ")}`)), (typeof a.domain != "string" || a.domain.trim() === "") && n.push(N("domain", "Must be a non-empty string")), Array.isArray(a.props) ? a.props.forEach((i, l) => {
|
|
6310
|
+
const s = i, u = `props[${l}]`;
|
|
6311
|
+
(typeof s.name != "string" || s.name === "") && n.push(N(`${u}.name`, "Must be a non-empty string")), (typeof s.type != "string" || s.type === "") && n.push(N(`${u}.type`, "Must be a non-empty string")), typeof s.required != "boolean" && n.push(N(`${u}.required`, "Must be a boolean")), (typeof s.description != "string" || s.description === "") && n.push(N(`${u}.description`, "Must be a non-empty string"));
|
|
6312
|
+
}) : n.push(N("props", "Must be an array")), Array.isArray(a.usageExamples) ? a.usageExamples.length === 0 ? n.push(N("usageExamples", "Must have at least one example")) : a.usageExamples.forEach((i, l) => {
|
|
6313
|
+
const s = i, u = `usageExamples[${l}]`;
|
|
6314
|
+
(typeof s.title != "string" || s.title === "") && n.push(N(`${u}.title`, "Must be a non-empty string")), (typeof s.code != "string" || s.code === "") && n.push(N(`${u}.code`, "Must be a non-empty string"));
|
|
6315
|
+
}) : n.push(N("usageExamples", "Must be an array")), Array.isArray(a.compositionGraph) || n.push(N("compositionGraph", "Must be an array (empty array is fine for atoms)")), typeof a.specVersion == "string" && !/^\d+\.\d+$/.test(a.specVersion) && n.push(N("specVersion", 'Must be "MAJOR.MINOR" format, e.g. "0.1"')), { valid: n.length === 0, errors: n };
|
|
5479
6316
|
}
|
|
5480
|
-
function
|
|
5481
|
-
const n =
|
|
6317
|
+
function ha(t) {
|
|
6318
|
+
const n = tn(t);
|
|
5482
6319
|
if (!n.valid) {
|
|
5483
6320
|
const a = n.errors.map((o) => ` ${o.field}: ${o.message}`).join(`
|
|
5484
6321
|
`);
|
|
@@ -5486,86 +6323,92 @@ function Un(t) {
|
|
|
5486
6323
|
${a}`);
|
|
5487
6324
|
}
|
|
5488
6325
|
}
|
|
5489
|
-
function
|
|
6326
|
+
function ma(t) {
|
|
5490
6327
|
if (typeof t != "object" || t === null) return !1;
|
|
5491
6328
|
const n = t;
|
|
5492
6329
|
return typeof n.name == "string" && typeof n.type == "string" && typeof n.required == "boolean" && typeof n.description == "string";
|
|
5493
6330
|
}
|
|
5494
|
-
const
|
|
6331
|
+
const ga = "1.0", ba = "0.1.0";
|
|
5495
6332
|
export {
|
|
5496
|
-
|
|
5497
|
-
|
|
5498
|
-
|
|
5499
|
-
|
|
5500
|
-
|
|
5501
|
-
|
|
5502
|
-
|
|
5503
|
-
|
|
5504
|
-
|
|
5505
|
-
|
|
5506
|
-
|
|
5507
|
-
|
|
5508
|
-
|
|
5509
|
-
|
|
5510
|
-
|
|
5511
|
-
|
|
5512
|
-
|
|
5513
|
-
|
|
5514
|
-
|
|
5515
|
-
|
|
5516
|
-
|
|
5517
|
-
|
|
5518
|
-
|
|
5519
|
-
|
|
5520
|
-
|
|
5521
|
-
|
|
5522
|
-
|
|
5523
|
-
|
|
5524
|
-
|
|
5525
|
-
|
|
5526
|
-
|
|
5527
|
-
|
|
5528
|
-
|
|
5529
|
-
|
|
5530
|
-
|
|
5531
|
-
|
|
5532
|
-
|
|
5533
|
-
|
|
5534
|
-
|
|
5535
|
-
|
|
5536
|
-
|
|
5537
|
-
|
|
5538
|
-
|
|
5539
|
-
|
|
5540
|
-
|
|
5541
|
-
|
|
5542
|
-
|
|
5543
|
-
|
|
5544
|
-
|
|
5545
|
-
|
|
5546
|
-
|
|
5547
|
-
|
|
5548
|
-
|
|
5549
|
-
|
|
5550
|
-
|
|
5551
|
-
|
|
5552
|
-
|
|
5553
|
-
|
|
5554
|
-
|
|
5555
|
-
|
|
5556
|
-
|
|
5557
|
-
|
|
5558
|
-
|
|
5559
|
-
|
|
5560
|
-
|
|
5561
|
-
|
|
5562
|
-
|
|
5563
|
-
|
|
5564
|
-
|
|
5565
|
-
|
|
5566
|
-
|
|
5567
|
-
|
|
5568
|
-
|
|
5569
|
-
|
|
5570
|
-
|
|
6333
|
+
Vn as Alert,
|
|
6334
|
+
On as AlertManifest,
|
|
6335
|
+
dn as Avatar,
|
|
6336
|
+
un as AvatarManifest,
|
|
6337
|
+
sn as Badge,
|
|
6338
|
+
cn as BadgeManifest,
|
|
6339
|
+
_n as Breadcrumb,
|
|
6340
|
+
we as Button,
|
|
6341
|
+
rn as ButtonManifest,
|
|
6342
|
+
ea as COMMAND_PALETTE_MANIFEST,
|
|
6343
|
+
Pn as Card,
|
|
6344
|
+
Wn as CardManifest,
|
|
6345
|
+
ue as Checkbox,
|
|
6346
|
+
mn as CheckboxManifest,
|
|
6347
|
+
An as CodeBlock,
|
|
6348
|
+
Fn as CodeBlockManifest,
|
|
6349
|
+
Kn as Collapsible,
|
|
6350
|
+
Zn as CommandPalette,
|
|
6351
|
+
Qn as DATA_TABLE_MANIFEST,
|
|
6352
|
+
ra as DATE_PICKER_MANIFEST,
|
|
6353
|
+
ia as DATE_RANGE_PICKER_MANIFEST,
|
|
6354
|
+
Jn as DataTable,
|
|
6355
|
+
aa as DatePicker,
|
|
6356
|
+
oa as DateRangePicker,
|
|
6357
|
+
fn as Divider,
|
|
6358
|
+
hn as DividerManifest,
|
|
6359
|
+
Hn as EmptyState,
|
|
6360
|
+
jn as EmptyStateManifest,
|
|
6361
|
+
sa as FILE_UPLOAD_MANIFEST,
|
|
6362
|
+
la as FileUpload,
|
|
6363
|
+
Rn as FormField,
|
|
6364
|
+
Nn as FormFieldManifest,
|
|
6365
|
+
In as Icon,
|
|
6366
|
+
Mn as IconManifest,
|
|
6367
|
+
de as Input,
|
|
6368
|
+
on as InputManifest,
|
|
6369
|
+
ba as LUCENT_UI_VERSION,
|
|
6370
|
+
ua as LucentProvider,
|
|
6371
|
+
ga as MANIFEST_SPEC_VERSION,
|
|
6372
|
+
na as MULTI_SELECT_MANIFEST,
|
|
6373
|
+
ta as MultiSelect,
|
|
6374
|
+
qn as NavLink,
|
|
6375
|
+
Xn as PageLayout,
|
|
6376
|
+
gn as Radio,
|
|
6377
|
+
Pe as RadioGroup,
|
|
6378
|
+
bn as RadioGroupUncontrolled,
|
|
6379
|
+
vn as RadioManifest,
|
|
6380
|
+
Ln as SearchInput,
|
|
6381
|
+
$n as SearchInputManifest,
|
|
6382
|
+
Ue as Select,
|
|
6383
|
+
wn as SelectManifest,
|
|
6384
|
+
Un as Skeleton,
|
|
6385
|
+
Gn as SkeletonManifest,
|
|
6386
|
+
En as Slider,
|
|
6387
|
+
Dn as SliderManifest,
|
|
6388
|
+
Re as Spinner,
|
|
6389
|
+
pn as SpinnerManifest,
|
|
6390
|
+
da as TIMELINE_MANIFEST,
|
|
6391
|
+
G as Table,
|
|
6392
|
+
Bn as TableManifest,
|
|
6393
|
+
Yn as Tabs,
|
|
6394
|
+
kn as Tag,
|
|
6395
|
+
Sn as TagManifest,
|
|
6396
|
+
E as Text,
|
|
6397
|
+
zn as TextManifest,
|
|
6398
|
+
Me as Textarea,
|
|
6399
|
+
ln as TextareaManifest,
|
|
6400
|
+
ca as Timeline,
|
|
6401
|
+
yn as Toggle,
|
|
6402
|
+
xn as ToggleManifest,
|
|
6403
|
+
Tn as Tooltip,
|
|
6404
|
+
Cn as TooltipManifest,
|
|
6405
|
+
ha as assertManifest,
|
|
6406
|
+
fa as brandTokens,
|
|
6407
|
+
Gt as darkTokens,
|
|
6408
|
+
Xt as getContrastText,
|
|
6409
|
+
ma as isValidPropDescriptor,
|
|
6410
|
+
be as lightTokens,
|
|
6411
|
+
Yt as makeLibraryCSS,
|
|
6412
|
+
pa as useLucent,
|
|
6413
|
+
tn as validateManifest
|
|
5571
6414
|
};
|