@lukeashford/aurelius 2.1.0 → 2.3.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/README.md +1 -3
- package/dist/index.d.mts +577 -2
- package/dist/index.d.ts +577 -2
- package/dist/index.js +2683 -164
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2624 -162
- package/dist/index.mjs.map +1 -1
- package/dist/styles/base.css +4 -0
- package/dist/styles/prose.css +61 -0
- package/dist/styles/theme.css +230 -42
- package/llms.md +39 -3
- package/package.json +19 -5
- package/scripts/eslint.mjs +127 -117
package/dist/index.mjs
CHANGED
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
// src/components/Button.tsx
|
|
2
2
|
import React from "react";
|
|
3
|
+
|
|
4
|
+
// src/utils/cx.ts
|
|
3
5
|
function cx(...classes) {
|
|
4
6
|
return classes.filter(Boolean).join(" ");
|
|
5
7
|
}
|
|
8
|
+
|
|
9
|
+
// src/components/Button.tsx
|
|
6
10
|
var Button = React.forwardRef(
|
|
7
11
|
({ variant = "primary", size = "md", loading = false, className, disabled, children, ...rest }, ref) => {
|
|
8
12
|
const isDisabled = disabled || loading;
|
|
@@ -12,7 +16,7 @@ var Button = React.forwardRef(
|
|
|
12
16
|
important: "bg-gold text-obsidian border border-gold hover:bg-gold-light hover:text-obsidian active:bg-gold-bright focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2 focus-visible:ring-offset-obsidian",
|
|
13
17
|
elevated: "bg-charcoal text-white border-0 shadow-lg hover:shadow-xl hover:text-gold-light active:bg-white/5 focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2 focus-visible:ring-offset-obsidian",
|
|
14
18
|
outlined: "bg-transparent text-white border border-ash hover:border-white hover:text-white active:bg-white/5 focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2 focus-visible:ring-offset-obsidian",
|
|
15
|
-
featured: "bg-charcoal text-white border border-gold
|
|
19
|
+
featured: "bg-charcoal text-white border border-gold glow-sm hover:glow-md hover:text-gold-light active:bg-white/5 focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2 focus-visible:ring-offset-obsidian",
|
|
16
20
|
ghost: "bg-transparent text-gold border-0 hover:text-gold-light active:text-gold-bright focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2 focus-visible:ring-offset-obsidian",
|
|
17
21
|
danger: "bg-error text-white border-0 hover:bg-error/90 active:bg-error/80 focus-visible:ring-2 focus-visible:ring-error focus-visible:ring-offset-2 focus-visible:ring-offset-obsidian"
|
|
18
22
|
};
|
|
@@ -47,21 +51,19 @@ Button.displayName = "Button";
|
|
|
47
51
|
|
|
48
52
|
// src/components/Input.tsx
|
|
49
53
|
import React2 from "react";
|
|
50
|
-
function cx2(...classes) {
|
|
51
|
-
return classes.filter(Boolean).join(" ");
|
|
52
|
-
}
|
|
53
54
|
var Input = React2.forwardRef(
|
|
54
55
|
({ error = false, className, leadingIcon, trailingIcon, disabled, ...rest }, ref) => {
|
|
55
56
|
const base = "w-full h-10 px-3 bg-graphite border border-ash rounded-none text-white placeholder:text-zinc transition-all duration-fast focus:border-gold focus:ring-1 focus:ring-gold focus:outline-none disabled:bg-slate disabled:text-dim disabled:cursor-not-allowed";
|
|
56
57
|
const errorCls = error ? "border-error focus:border-error focus:ring-error" : "";
|
|
57
|
-
return /* @__PURE__ */ React2.createElement("div", { className:
|
|
58
|
+
return /* @__PURE__ */ React2.createElement("div", { className: cx("relative", disabled && "opacity-90") }, leadingIcon && /* @__PURE__ */ React2.createElement("span", { className: "pointer-events-none absolute inset-y-0 left-3 flex items-center text-silver" }, leadingIcon), /* @__PURE__ */ React2.createElement(
|
|
58
59
|
"input",
|
|
59
60
|
{
|
|
60
61
|
ref,
|
|
61
|
-
className:
|
|
62
|
+
className: cx(
|
|
62
63
|
base,
|
|
63
64
|
errorCls,
|
|
64
|
-
leadingIcon
|
|
65
|
+
leadingIcon ? "pl-9" : false,
|
|
66
|
+
trailingIcon ? "pr-9" : false,
|
|
65
67
|
className
|
|
66
68
|
),
|
|
67
69
|
disabled,
|
|
@@ -74,38 +76,397 @@ Input.displayName = "Input";
|
|
|
74
76
|
|
|
75
77
|
// src/components/Card.tsx
|
|
76
78
|
import React3 from "react";
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
79
|
+
import { Check } from "lucide-react";
|
|
80
|
+
var VARIANT_STYLES = {
|
|
81
|
+
default: "bg-charcoal shadow-sm border border-gold/30",
|
|
82
|
+
elevated: "bg-charcoal shadow-lg border-0",
|
|
83
|
+
outlined: "bg-charcoal shadow-none border border-ash",
|
|
84
|
+
ghost: "bg-transparent shadow-none border-0",
|
|
85
|
+
featured: "bg-charcoal border border-gold glow-sm"
|
|
86
|
+
};
|
|
87
|
+
var CardBase = React3.forwardRef(
|
|
88
|
+
({
|
|
89
|
+
variant = "default",
|
|
90
|
+
interactive = false,
|
|
91
|
+
selected = false,
|
|
92
|
+
noPadding = false,
|
|
93
|
+
className,
|
|
94
|
+
children,
|
|
95
|
+
...props
|
|
96
|
+
}, ref) => {
|
|
92
97
|
return /* @__PURE__ */ React3.createElement(
|
|
93
98
|
"div",
|
|
94
99
|
{
|
|
95
100
|
ref,
|
|
96
|
-
className:
|
|
97
|
-
|
|
98
|
-
|
|
101
|
+
className: cx(
|
|
102
|
+
"rounded-none relative",
|
|
103
|
+
!noPadding && "p-6",
|
|
104
|
+
VARIANT_STYLES[variant],
|
|
105
|
+
interactive && "transition-all duration-200 hover:border-gold hover:shadow-glow cursor-pointer",
|
|
106
|
+
selected && "border-gold shadow-glow-md",
|
|
107
|
+
className
|
|
108
|
+
),
|
|
109
|
+
...props
|
|
110
|
+
},
|
|
111
|
+
children,
|
|
112
|
+
selected && /* @__PURE__ */ React3.createElement("div", { className: "absolute top-3 right-3 flex items-center justify-center h-6 w-6 rounded-full bg-gold text-obsidian" }, /* @__PURE__ */ React3.createElement(Check, { className: "h-4 w-4" }))
|
|
113
|
+
);
|
|
114
|
+
}
|
|
115
|
+
);
|
|
116
|
+
CardBase.displayName = "Card";
|
|
117
|
+
var CardHeader = React3.forwardRef(
|
|
118
|
+
({ title, subtitle, action, className, children, ...props }, ref) => {
|
|
119
|
+
return /* @__PURE__ */ React3.createElement(
|
|
120
|
+
"div",
|
|
121
|
+
{
|
|
122
|
+
ref,
|
|
123
|
+
className: cx("px-6 py-4 border-b border-ash", className),
|
|
124
|
+
...props
|
|
125
|
+
},
|
|
126
|
+
title || subtitle || action ? /* @__PURE__ */ React3.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React3.createElement("div", { className: "flex-1 min-w-0" }, title && /* @__PURE__ */ React3.createElement("h3", { className: "text-lg font-semibold text-white m-0" }, title), subtitle && /* @__PURE__ */ React3.createElement("p", { className: "text-sm text-silver mt-1 m-0" }, subtitle)), action && /* @__PURE__ */ React3.createElement("div", { className: "shrink-0" }, action)) : children
|
|
127
|
+
);
|
|
128
|
+
}
|
|
129
|
+
);
|
|
130
|
+
CardHeader.displayName = "CardHeader";
|
|
131
|
+
var CardBody = React3.forwardRef(
|
|
132
|
+
({ className, children, ...props }, ref) => {
|
|
133
|
+
return /* @__PURE__ */ React3.createElement("div", { ref, className: cx("px-6 py-4", className), ...props }, children);
|
|
134
|
+
}
|
|
135
|
+
);
|
|
136
|
+
CardBody.displayName = "CardBody";
|
|
137
|
+
var CardFooter = React3.forwardRef(
|
|
138
|
+
({ align = "end", className, children, ...props }, ref) => {
|
|
139
|
+
const alignClass = {
|
|
140
|
+
start: "justify-start",
|
|
141
|
+
center: "justify-center",
|
|
142
|
+
end: "justify-end",
|
|
143
|
+
between: "justify-between"
|
|
144
|
+
}[align];
|
|
145
|
+
return /* @__PURE__ */ React3.createElement(
|
|
146
|
+
"div",
|
|
147
|
+
{
|
|
148
|
+
ref,
|
|
149
|
+
className: cx(
|
|
150
|
+
"px-6 py-4 border-t border-ash flex items-center gap-3",
|
|
151
|
+
alignClass,
|
|
152
|
+
className
|
|
153
|
+
),
|
|
154
|
+
...props
|
|
155
|
+
},
|
|
156
|
+
children
|
|
157
|
+
);
|
|
158
|
+
}
|
|
159
|
+
);
|
|
160
|
+
CardFooter.displayName = "CardFooter";
|
|
161
|
+
var CardMedia = React3.forwardRef(
|
|
162
|
+
({ src, alt = "", aspect = "video", position = "top", className, children, ...props }, ref) => {
|
|
163
|
+
const aspectClass = {
|
|
164
|
+
video: "aspect-video",
|
|
165
|
+
square: "aspect-square",
|
|
166
|
+
wide: "aspect-wide"
|
|
167
|
+
}[aspect];
|
|
168
|
+
return /* @__PURE__ */ React3.createElement(
|
|
169
|
+
"div",
|
|
170
|
+
{
|
|
171
|
+
ref,
|
|
172
|
+
className: cx(
|
|
173
|
+
"overflow-hidden",
|
|
174
|
+
aspectClass,
|
|
175
|
+
position === "top" && "border-b border-ash",
|
|
176
|
+
position === "bottom" && "border-t border-ash",
|
|
177
|
+
className
|
|
178
|
+
),
|
|
179
|
+
...props
|
|
180
|
+
},
|
|
181
|
+
src ? /* @__PURE__ */ React3.createElement("img", { src, alt, className: "w-full h-full object-cover" }) : children
|
|
99
182
|
);
|
|
100
183
|
}
|
|
101
184
|
);
|
|
102
|
-
|
|
185
|
+
CardMedia.displayName = "CardMedia";
|
|
186
|
+
var Card = Object.assign(CardBase, {
|
|
187
|
+
Header: CardHeader,
|
|
188
|
+
Body: CardBody,
|
|
189
|
+
Footer: CardFooter,
|
|
190
|
+
Media: CardMedia
|
|
191
|
+
});
|
|
103
192
|
|
|
104
|
-
// src/components/
|
|
193
|
+
// src/components/Container.tsx
|
|
105
194
|
import React4 from "react";
|
|
106
|
-
|
|
107
|
-
|
|
195
|
+
var SIZE_CLASSES = {
|
|
196
|
+
sm: "container-sm",
|
|
197
|
+
md: "container-md",
|
|
198
|
+
lg: "container-lg",
|
|
199
|
+
xl: "container-xl",
|
|
200
|
+
fluid: "container-fluid",
|
|
201
|
+
responsive: "container"
|
|
202
|
+
};
|
|
203
|
+
var Container = React4.forwardRef(
|
|
204
|
+
({ size = "responsive", className, children, ...props }, ref) => {
|
|
205
|
+
return /* @__PURE__ */ React4.createElement("div", { ref, className: cx(SIZE_CLASSES[size], className), ...props }, children);
|
|
206
|
+
}
|
|
207
|
+
);
|
|
208
|
+
Container.displayName = "Container";
|
|
209
|
+
|
|
210
|
+
// src/components/Row.tsx
|
|
211
|
+
import React5 from "react";
|
|
212
|
+
var JUSTIFY_MAP = {
|
|
213
|
+
start: "justify-start",
|
|
214
|
+
center: "justify-center",
|
|
215
|
+
end: "justify-end",
|
|
216
|
+
between: "justify-between",
|
|
217
|
+
around: "justify-around",
|
|
218
|
+
evenly: "justify-evenly"
|
|
219
|
+
};
|
|
220
|
+
var ALIGN_MAP = {
|
|
221
|
+
start: "items-start",
|
|
222
|
+
center: "items-center",
|
|
223
|
+
end: "items-end",
|
|
224
|
+
stretch: "items-stretch",
|
|
225
|
+
baseline: "items-baseline"
|
|
226
|
+
};
|
|
227
|
+
function getGapClass(value) {
|
|
228
|
+
return `gap-${value}`;
|
|
229
|
+
}
|
|
230
|
+
function getGapXClass(value) {
|
|
231
|
+
return `gap-x-${value}`;
|
|
232
|
+
}
|
|
233
|
+
function getGapYClass(value) {
|
|
234
|
+
return `gap-y-${value}`;
|
|
235
|
+
}
|
|
236
|
+
var Row = React5.forwardRef(
|
|
237
|
+
({ gutter = 4, gutterX, gutterY, justify, align, className, children, ...props }, ref) => {
|
|
238
|
+
const gapClass = gutterX === void 0 && gutterY === void 0 ? getGapClass(gutter) : "";
|
|
239
|
+
const gapXClass = gutterX !== void 0 ? getGapXClass(gutterX) : "";
|
|
240
|
+
const gapYClass = gutterY !== void 0 ? getGapYClass(gutterY) : "";
|
|
241
|
+
return /* @__PURE__ */ React5.createElement(
|
|
242
|
+
"div",
|
|
243
|
+
{
|
|
244
|
+
ref,
|
|
245
|
+
className: cx(
|
|
246
|
+
"row",
|
|
247
|
+
gapClass,
|
|
248
|
+
gapXClass,
|
|
249
|
+
gapYClass,
|
|
250
|
+
justify && JUSTIFY_MAP[justify],
|
|
251
|
+
align && ALIGN_MAP[align],
|
|
252
|
+
className
|
|
253
|
+
),
|
|
254
|
+
...props
|
|
255
|
+
},
|
|
256
|
+
children
|
|
257
|
+
);
|
|
258
|
+
}
|
|
259
|
+
);
|
|
260
|
+
Row.displayName = "Row";
|
|
261
|
+
|
|
262
|
+
// src/components/Col.tsx
|
|
263
|
+
import React6 from "react";
|
|
264
|
+
var BREAKPOINT_PREFIXES = {
|
|
265
|
+
base: "",
|
|
266
|
+
sm: "sm:",
|
|
267
|
+
md: "md:",
|
|
268
|
+
lg: "lg:",
|
|
269
|
+
xl: "xl:",
|
|
270
|
+
"2xl": "2xl:"
|
|
271
|
+
};
|
|
272
|
+
function getSpanClass(value, prefix) {
|
|
273
|
+
if (value === "auto") return `${prefix}col-auto`;
|
|
274
|
+
if (value === "full") return `${prefix}col-span-full`;
|
|
275
|
+
return `${prefix}col-span-${value}`;
|
|
276
|
+
}
|
|
277
|
+
function getOffsetClass(value, prefix) {
|
|
278
|
+
if (value === 0) return "";
|
|
279
|
+
return `${prefix}col-start-${value + 1}`;
|
|
280
|
+
}
|
|
281
|
+
function getOrderClass(value, prefix) {
|
|
282
|
+
if (value === "first") return `${prefix}order-first`;
|
|
283
|
+
if (value === "last") return `${prefix}order-last`;
|
|
284
|
+
if (value === "none") return `${prefix}order-none`;
|
|
285
|
+
return `${prefix}order-${value}`;
|
|
286
|
+
}
|
|
287
|
+
function isResponsiveValue(value) {
|
|
288
|
+
return typeof value === "object" && value !== null && !Array.isArray(value);
|
|
289
|
+
}
|
|
290
|
+
function buildResponsiveClasses(value, getClass) {
|
|
291
|
+
if (value === void 0) return [];
|
|
292
|
+
if (!isResponsiveValue(value)) {
|
|
293
|
+
const cls = getClass(value, "");
|
|
294
|
+
return cls ? [cls] : [];
|
|
295
|
+
}
|
|
296
|
+
const classes = [];
|
|
297
|
+
for (const [breakpoint, val] of Object.entries(value)) {
|
|
298
|
+
if (val !== void 0) {
|
|
299
|
+
const prefix = BREAKPOINT_PREFIXES[breakpoint] ?? "";
|
|
300
|
+
const cls = getClass(val, prefix);
|
|
301
|
+
if (cls) classes.push(cls);
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
return classes;
|
|
108
305
|
}
|
|
306
|
+
var Col = React6.forwardRef(
|
|
307
|
+
({ span, offset, order, className, children, ...props }, ref) => {
|
|
308
|
+
const spanClasses = buildResponsiveClasses(span, getSpanClass);
|
|
309
|
+
const offsetClasses = buildResponsiveClasses(offset, getOffsetClass);
|
|
310
|
+
const orderClasses = buildResponsiveClasses(order, getOrderClass);
|
|
311
|
+
const hasSpan = span !== void 0;
|
|
312
|
+
const defaultSpan = hasSpan ? "" : "col-span-12";
|
|
313
|
+
return /* @__PURE__ */ React6.createElement(
|
|
314
|
+
"div",
|
|
315
|
+
{
|
|
316
|
+
ref,
|
|
317
|
+
className: cx(
|
|
318
|
+
defaultSpan,
|
|
319
|
+
...spanClasses,
|
|
320
|
+
...offsetClasses,
|
|
321
|
+
...orderClasses,
|
|
322
|
+
className
|
|
323
|
+
),
|
|
324
|
+
...props
|
|
325
|
+
},
|
|
326
|
+
children
|
|
327
|
+
);
|
|
328
|
+
}
|
|
329
|
+
);
|
|
330
|
+
Col.displayName = "Col";
|
|
331
|
+
|
|
332
|
+
// src/components/Stack.tsx
|
|
333
|
+
import React7 from "react";
|
|
334
|
+
var ALIGN_MAP2 = {
|
|
335
|
+
start: "items-start",
|
|
336
|
+
center: "items-center",
|
|
337
|
+
end: "items-end",
|
|
338
|
+
stretch: "items-stretch",
|
|
339
|
+
baseline: "items-baseline"
|
|
340
|
+
};
|
|
341
|
+
var JUSTIFY_MAP2 = {
|
|
342
|
+
start: "justify-start",
|
|
343
|
+
center: "justify-center",
|
|
344
|
+
end: "justify-end",
|
|
345
|
+
between: "justify-between",
|
|
346
|
+
around: "justify-around",
|
|
347
|
+
evenly: "justify-evenly"
|
|
348
|
+
};
|
|
349
|
+
var GAP_MAP = {
|
|
350
|
+
0: "gap-0",
|
|
351
|
+
1: "gap-1",
|
|
352
|
+
2: "gap-2",
|
|
353
|
+
3: "gap-3",
|
|
354
|
+
4: "gap-4",
|
|
355
|
+
5: "gap-5",
|
|
356
|
+
6: "gap-6",
|
|
357
|
+
8: "gap-8",
|
|
358
|
+
10: "gap-10",
|
|
359
|
+
12: "gap-12"
|
|
360
|
+
};
|
|
361
|
+
var Stack = React7.forwardRef(
|
|
362
|
+
({
|
|
363
|
+
direction = "vertical",
|
|
364
|
+
align,
|
|
365
|
+
justify,
|
|
366
|
+
gap = 4,
|
|
367
|
+
wrap = false,
|
|
368
|
+
as: Component = "div",
|
|
369
|
+
className,
|
|
370
|
+
children,
|
|
371
|
+
...props
|
|
372
|
+
}, ref) => {
|
|
373
|
+
return /* @__PURE__ */ React7.createElement(
|
|
374
|
+
Component,
|
|
375
|
+
{
|
|
376
|
+
ref,
|
|
377
|
+
className: cx(
|
|
378
|
+
"flex",
|
|
379
|
+
direction === "horizontal" ? "flex-row" : "flex-col",
|
|
380
|
+
align && ALIGN_MAP2[align],
|
|
381
|
+
justify && JUSTIFY_MAP2[justify],
|
|
382
|
+
GAP_MAP[gap],
|
|
383
|
+
wrap && "flex-wrap",
|
|
384
|
+
className
|
|
385
|
+
),
|
|
386
|
+
...props
|
|
387
|
+
},
|
|
388
|
+
children
|
|
389
|
+
);
|
|
390
|
+
}
|
|
391
|
+
);
|
|
392
|
+
Stack.displayName = "Stack";
|
|
393
|
+
|
|
394
|
+
// src/components/Divider.tsx
|
|
395
|
+
import React8 from "react";
|
|
396
|
+
var COLOR_MAP = {
|
|
397
|
+
default: "border-ash",
|
|
398
|
+
gold: "border-gold/50",
|
|
399
|
+
muted: "border-slate"
|
|
400
|
+
};
|
|
401
|
+
var VARIANT_MAP = {
|
|
402
|
+
solid: "border-solid",
|
|
403
|
+
dashed: "border-dashed",
|
|
404
|
+
dotted: "border-dotted"
|
|
405
|
+
};
|
|
406
|
+
var Divider = React8.forwardRef(
|
|
407
|
+
({
|
|
408
|
+
orientation = "horizontal",
|
|
409
|
+
variant = "solid",
|
|
410
|
+
label,
|
|
411
|
+
color = "default",
|
|
412
|
+
className,
|
|
413
|
+
...props
|
|
414
|
+
}, ref) => {
|
|
415
|
+
const isHorizontal = orientation === "horizontal";
|
|
416
|
+
if (label && isHorizontal) {
|
|
417
|
+
return /* @__PURE__ */ React8.createElement(
|
|
418
|
+
"div",
|
|
419
|
+
{
|
|
420
|
+
className: cx("flex items-center gap-4", className),
|
|
421
|
+
role: "separator",
|
|
422
|
+
"aria-orientation": orientation
|
|
423
|
+
},
|
|
424
|
+
/* @__PURE__ */ React8.createElement(
|
|
425
|
+
"div",
|
|
426
|
+
{
|
|
427
|
+
className: cx(
|
|
428
|
+
"flex-1 border-t",
|
|
429
|
+
VARIANT_MAP[variant],
|
|
430
|
+
COLOR_MAP[color]
|
|
431
|
+
)
|
|
432
|
+
}
|
|
433
|
+
),
|
|
434
|
+
/* @__PURE__ */ React8.createElement("span", { className: "text-sm text-silver shrink-0" }, label),
|
|
435
|
+
/* @__PURE__ */ React8.createElement(
|
|
436
|
+
"div",
|
|
437
|
+
{
|
|
438
|
+
className: cx(
|
|
439
|
+
"flex-1 border-t",
|
|
440
|
+
VARIANT_MAP[variant],
|
|
441
|
+
COLOR_MAP[color]
|
|
442
|
+
)
|
|
443
|
+
}
|
|
444
|
+
)
|
|
445
|
+
);
|
|
446
|
+
}
|
|
447
|
+
return /* @__PURE__ */ React8.createElement(
|
|
448
|
+
"hr",
|
|
449
|
+
{
|
|
450
|
+
ref,
|
|
451
|
+
role: "separator",
|
|
452
|
+
"aria-orientation": orientation,
|
|
453
|
+
className: cx(
|
|
454
|
+
isHorizontal ? "border-t w-full" : "border-l h-full",
|
|
455
|
+
VARIANT_MAP[variant],
|
|
456
|
+
COLOR_MAP[color],
|
|
457
|
+
"border-0",
|
|
458
|
+
isHorizontal ? "border-t" : "border-l",
|
|
459
|
+
className
|
|
460
|
+
),
|
|
461
|
+
...props
|
|
462
|
+
}
|
|
463
|
+
);
|
|
464
|
+
}
|
|
465
|
+
);
|
|
466
|
+
Divider.displayName = "Divider";
|
|
467
|
+
|
|
468
|
+
// src/components/Avatar.tsx
|
|
469
|
+
import React9 from "react";
|
|
109
470
|
var sizeMap = {
|
|
110
471
|
xs: "h-6 w-6 text-[10px]",
|
|
111
472
|
sm: "h-8 w-8 text-[11px]",
|
|
@@ -119,25 +480,25 @@ function initials(name) {
|
|
|
119
480
|
const parts = name.trim().split(/\s+/);
|
|
120
481
|
return parts.slice(0, 2).map((p) => p[0].toUpperCase()).join("");
|
|
121
482
|
}
|
|
122
|
-
var Avatar =
|
|
483
|
+
var Avatar = React9.forwardRef(
|
|
123
484
|
({ src, alt = "", name, size = "md", status, className, ...rest }, ref) => {
|
|
124
485
|
const statusColor = status === "online" ? "bg-success" : status === "busy" ? "bg-warning" : "bg-zinc";
|
|
125
|
-
return /* @__PURE__ */
|
|
486
|
+
return /* @__PURE__ */ React9.createElement(
|
|
126
487
|
"div",
|
|
127
488
|
{
|
|
128
489
|
ref,
|
|
129
|
-
className:
|
|
490
|
+
className: cx(
|
|
130
491
|
"relative inline-flex items-center justify-center rounded-full border-2 border-ash bg-slate text-silver font-semibold select-none overflow-hidden",
|
|
131
492
|
sizeMap[size],
|
|
132
493
|
className
|
|
133
494
|
),
|
|
134
495
|
...rest
|
|
135
496
|
},
|
|
136
|
-
src ? /* @__PURE__ */
|
|
137
|
-
status && /* @__PURE__ */
|
|
497
|
+
src ? /* @__PURE__ */ React9.createElement("img", { src, alt: alt || name || "Avatar", className: "h-full w-full object-cover" }) : /* @__PURE__ */ React9.createElement("span", { "aria-hidden": true }, initials(name) || "\xB7"),
|
|
498
|
+
status && /* @__PURE__ */ React9.createElement(
|
|
138
499
|
"span",
|
|
139
500
|
{
|
|
140
|
-
className:
|
|
501
|
+
className: cx(
|
|
141
502
|
"absolute bottom-0 right-0 rounded-full ring-2 ring-charcoal",
|
|
142
503
|
// 25% of avatar size
|
|
143
504
|
size === "xs" ? "h-1.5 w-1.5" : size === "sm" ? "h-2 w-2" : size === "md" ? "h-2.5 w-2.5" : size === "lg" ? "h-3 w-3" : size === "xl" ? "h-4 w-4" : "h-5 w-5",
|
|
@@ -151,11 +512,8 @@ var Avatar = React4.forwardRef(
|
|
|
151
512
|
Avatar.displayName = "Avatar";
|
|
152
513
|
|
|
153
514
|
// src/components/Badge.tsx
|
|
154
|
-
import
|
|
155
|
-
|
|
156
|
-
return classes.filter(Boolean).join(" ");
|
|
157
|
-
}
|
|
158
|
-
var Badge = React5.forwardRef(
|
|
515
|
+
import React10 from "react";
|
|
516
|
+
var Badge = React10.forwardRef(
|
|
159
517
|
({ variant = "default", className, ...rest }, ref) => {
|
|
160
518
|
const base = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border";
|
|
161
519
|
const variantClasses = {
|
|
@@ -167,22 +525,19 @@ var Badge = React5.forwardRef(
|
|
|
167
525
|
info: "bg-info/20 text-info border-info/30"
|
|
168
526
|
};
|
|
169
527
|
const variantClass = variantClasses[variant];
|
|
170
|
-
return /* @__PURE__ */
|
|
528
|
+
return /* @__PURE__ */ React10.createElement("span", { ref, className: cx(base, variantClass, className), ...rest });
|
|
171
529
|
}
|
|
172
530
|
);
|
|
173
531
|
Badge.displayName = "Badge";
|
|
174
532
|
|
|
175
533
|
// src/components/Tooltip.tsx
|
|
176
|
-
import
|
|
177
|
-
function cx6(...classes) {
|
|
178
|
-
return classes.filter(Boolean).join(" ");
|
|
179
|
-
}
|
|
534
|
+
import React11 from "react";
|
|
180
535
|
var Tooltip = ({ content, children, open = false, side = "top" }) => {
|
|
181
|
-
return /* @__PURE__ */
|
|
536
|
+
return /* @__PURE__ */ React11.createElement("span", { className: "relative inline-block" }, children, /* @__PURE__ */ React11.createElement(
|
|
182
537
|
"span",
|
|
183
538
|
{
|
|
184
539
|
role: "tooltip",
|
|
185
|
-
className:
|
|
540
|
+
className: cx(
|
|
186
541
|
"pointer-events-none absolute z-50 whitespace-nowrap rounded-md border border-ash bg-graphite px-3 py-1.5 text-sm text-white shadow-lg transition-opacity duration-200 ease-out",
|
|
187
542
|
open ? "opacity-100" : "opacity-0",
|
|
188
543
|
side === "top" && "left-1/2 -translate-x-1/2 -top-2 -translate-y-full",
|
|
@@ -195,39 +550,231 @@ var Tooltip = ({ content, children, open = false, side = "top" }) => {
|
|
|
195
550
|
));
|
|
196
551
|
};
|
|
197
552
|
|
|
553
|
+
// src/components/Table.tsx
|
|
554
|
+
import React12 from "react";
|
|
555
|
+
var Table = React12.forwardRef(
|
|
556
|
+
({ responsive = true, className, children, ...props }, ref) => {
|
|
557
|
+
const table = /* @__PURE__ */ React12.createElement(
|
|
558
|
+
"table",
|
|
559
|
+
{
|
|
560
|
+
ref,
|
|
561
|
+
className: cx("w-full text-sm", className),
|
|
562
|
+
...props
|
|
563
|
+
},
|
|
564
|
+
children
|
|
565
|
+
);
|
|
566
|
+
if (responsive) {
|
|
567
|
+
return /* @__PURE__ */ React12.createElement("div", { className: "w-full overflow-x-auto" }, table);
|
|
568
|
+
}
|
|
569
|
+
return table;
|
|
570
|
+
}
|
|
571
|
+
);
|
|
572
|
+
Table.displayName = "Table";
|
|
573
|
+
var TableHeader = React12.forwardRef(
|
|
574
|
+
({ className, children, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
575
|
+
"thead",
|
|
576
|
+
{
|
|
577
|
+
ref,
|
|
578
|
+
className: cx("bg-graphite", className),
|
|
579
|
+
...props
|
|
580
|
+
},
|
|
581
|
+
children
|
|
582
|
+
)
|
|
583
|
+
);
|
|
584
|
+
TableHeader.displayName = "TableHeader";
|
|
585
|
+
var TableBody = React12.forwardRef(
|
|
586
|
+
({ className, children, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
587
|
+
"tbody",
|
|
588
|
+
{
|
|
589
|
+
ref,
|
|
590
|
+
className: cx("divide-y divide-ash", className),
|
|
591
|
+
...props
|
|
592
|
+
},
|
|
593
|
+
children
|
|
594
|
+
)
|
|
595
|
+
);
|
|
596
|
+
TableBody.displayName = "TableBody";
|
|
597
|
+
var TableFooter = React12.forwardRef(
|
|
598
|
+
({ className, children, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
599
|
+
"tfoot",
|
|
600
|
+
{
|
|
601
|
+
ref,
|
|
602
|
+
className: cx("bg-graphite font-medium", className),
|
|
603
|
+
...props
|
|
604
|
+
},
|
|
605
|
+
children
|
|
606
|
+
)
|
|
607
|
+
);
|
|
608
|
+
TableFooter.displayName = "TableFooter";
|
|
609
|
+
var TableRow = React12.forwardRef(
|
|
610
|
+
({ hoverable = true, selected = false, className, children, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
611
|
+
"tr",
|
|
612
|
+
{
|
|
613
|
+
ref,
|
|
614
|
+
className: cx(
|
|
615
|
+
"transition-colors duration-fast",
|
|
616
|
+
hoverable && "hover:bg-graphite/50",
|
|
617
|
+
selected && "bg-gold/10",
|
|
618
|
+
className
|
|
619
|
+
),
|
|
620
|
+
...props
|
|
621
|
+
},
|
|
622
|
+
children
|
|
623
|
+
)
|
|
624
|
+
);
|
|
625
|
+
TableRow.displayName = "TableRow";
|
|
626
|
+
var TableHead = React12.forwardRef(
|
|
627
|
+
({ sortable, sortDirection, className, children, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
628
|
+
"th",
|
|
629
|
+
{
|
|
630
|
+
ref,
|
|
631
|
+
className: cx(
|
|
632
|
+
"px-4 py-3 text-left font-semibold text-silver",
|
|
633
|
+
sortable && "cursor-pointer hover:text-white select-none",
|
|
634
|
+
className
|
|
635
|
+
),
|
|
636
|
+
...props
|
|
637
|
+
},
|
|
638
|
+
/* @__PURE__ */ React12.createElement("div", { className: "flex items-center gap-2" }, children, sortable && sortDirection && /* @__PURE__ */ React12.createElement("span", { className: "text-gold" }, sortDirection === "asc" ? "\u2191" : "\u2193"))
|
|
639
|
+
)
|
|
640
|
+
);
|
|
641
|
+
TableHead.displayName = "TableHead";
|
|
642
|
+
var TableCell = React12.forwardRef(
|
|
643
|
+
({ className, children, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
644
|
+
"td",
|
|
645
|
+
{
|
|
646
|
+
ref,
|
|
647
|
+
className: cx("px-4 py-3 text-white", className),
|
|
648
|
+
...props
|
|
649
|
+
},
|
|
650
|
+
children
|
|
651
|
+
)
|
|
652
|
+
);
|
|
653
|
+
TableCell.displayName = "TableCell";
|
|
654
|
+
var TableCaption = React12.forwardRef(
|
|
655
|
+
({ className, children, ...props }, ref) => /* @__PURE__ */ React12.createElement(
|
|
656
|
+
"caption",
|
|
657
|
+
{
|
|
658
|
+
ref,
|
|
659
|
+
className: cx("mt-4 text-sm text-silver", className),
|
|
660
|
+
...props
|
|
661
|
+
},
|
|
662
|
+
children
|
|
663
|
+
)
|
|
664
|
+
);
|
|
665
|
+
TableCaption.displayName = "TableCaption";
|
|
666
|
+
|
|
667
|
+
// src/components/List.tsx
|
|
668
|
+
import React13 from "react";
|
|
669
|
+
var List = React13.forwardRef(
|
|
670
|
+
({ variant = "default", ordered = false, className, children, ...props }, ref) => {
|
|
671
|
+
const Component = ordered ? "ol" : "ul";
|
|
672
|
+
return /* @__PURE__ */ React13.createElement(
|
|
673
|
+
Component,
|
|
674
|
+
{
|
|
675
|
+
ref,
|
|
676
|
+
className: cx(
|
|
677
|
+
"list-none m-0 p-0",
|
|
678
|
+
variant === "bordered" && "border border-ash",
|
|
679
|
+
variant === "divided" && "divide-y divide-ash",
|
|
680
|
+
className
|
|
681
|
+
),
|
|
682
|
+
...props
|
|
683
|
+
},
|
|
684
|
+
children
|
|
685
|
+
);
|
|
686
|
+
}
|
|
687
|
+
);
|
|
688
|
+
List.displayName = "List";
|
|
689
|
+
var ListItem = React13.forwardRef(
|
|
690
|
+
({
|
|
691
|
+
leading,
|
|
692
|
+
trailing,
|
|
693
|
+
interactive = false,
|
|
694
|
+
selected = false,
|
|
695
|
+
disabled = false,
|
|
696
|
+
className,
|
|
697
|
+
children,
|
|
698
|
+
onClick,
|
|
699
|
+
...props
|
|
700
|
+
}, ref) => {
|
|
701
|
+
const handleClick = (e) => {
|
|
702
|
+
if (disabled) return;
|
|
703
|
+
onClick?.(e);
|
|
704
|
+
};
|
|
705
|
+
return /* @__PURE__ */ React13.createElement(
|
|
706
|
+
"li",
|
|
707
|
+
{
|
|
708
|
+
ref,
|
|
709
|
+
onClick: handleClick,
|
|
710
|
+
className: cx(
|
|
711
|
+
"flex items-center gap-3 px-4 py-3",
|
|
712
|
+
interactive && "cursor-pointer transition-colors duration-fast",
|
|
713
|
+
interactive && !disabled && "hover:bg-graphite",
|
|
714
|
+
selected && "bg-gold/10",
|
|
715
|
+
disabled && "opacity-50 cursor-not-allowed",
|
|
716
|
+
className
|
|
717
|
+
),
|
|
718
|
+
...props
|
|
719
|
+
},
|
|
720
|
+
leading && /* @__PURE__ */ React13.createElement("div", { className: "shrink-0" }, leading),
|
|
721
|
+
/* @__PURE__ */ React13.createElement("div", { className: "flex-1 min-w-0" }, children),
|
|
722
|
+
trailing && /* @__PURE__ */ React13.createElement("div", { className: "shrink-0" }, trailing)
|
|
723
|
+
);
|
|
724
|
+
}
|
|
725
|
+
);
|
|
726
|
+
ListItem.displayName = "ListItem";
|
|
727
|
+
var ListItemText = React13.forwardRef(
|
|
728
|
+
({ primary, secondary, className, ...props }, ref) => {
|
|
729
|
+
return /* @__PURE__ */ React13.createElement("div", { ref, className: cx("flex flex-col", className), ...props }, /* @__PURE__ */ React13.createElement("span", { className: "text-sm font-medium text-white" }, primary), secondary && /* @__PURE__ */ React13.createElement("span", { className: "text-xs text-silver mt-0.5" }, secondary));
|
|
730
|
+
}
|
|
731
|
+
);
|
|
732
|
+
ListItemText.displayName = "ListItemText";
|
|
733
|
+
var ListSubheader = React13.forwardRef(
|
|
734
|
+
({ className, children, ...props }, ref) => {
|
|
735
|
+
return /* @__PURE__ */ React13.createElement(
|
|
736
|
+
"li",
|
|
737
|
+
{
|
|
738
|
+
ref,
|
|
739
|
+
className: cx(
|
|
740
|
+
"px-4 py-2 text-xs font-semibold text-gold uppercase tracking-wider bg-graphite",
|
|
741
|
+
className
|
|
742
|
+
),
|
|
743
|
+
...props
|
|
744
|
+
},
|
|
745
|
+
children
|
|
746
|
+
);
|
|
747
|
+
}
|
|
748
|
+
);
|
|
749
|
+
ListSubheader.displayName = "ListSubheader";
|
|
750
|
+
|
|
198
751
|
// src/components/Label.tsx
|
|
199
|
-
import
|
|
200
|
-
|
|
201
|
-
return classes.filter(Boolean).join(" ");
|
|
202
|
-
}
|
|
203
|
-
var Label = React7.forwardRef(
|
|
752
|
+
import React14 from "react";
|
|
753
|
+
var Label = React14.forwardRef(
|
|
204
754
|
({ className, required, children, ...rest }, ref) => {
|
|
205
|
-
return /* @__PURE__ */
|
|
755
|
+
return /* @__PURE__ */ React14.createElement(
|
|
206
756
|
"label",
|
|
207
757
|
{
|
|
208
758
|
ref,
|
|
209
|
-
className:
|
|
759
|
+
className: cx("block text-sm font-medium text-silver mb-1.5", className),
|
|
210
760
|
...rest
|
|
211
761
|
},
|
|
212
762
|
children,
|
|
213
|
-
required && /* @__PURE__ */
|
|
763
|
+
required && /* @__PURE__ */ React14.createElement("span", { className: "text-error ml-1" }, "*")
|
|
214
764
|
);
|
|
215
765
|
}
|
|
216
766
|
);
|
|
217
767
|
Label.displayName = "Label";
|
|
218
768
|
|
|
219
769
|
// src/components/HelperText.tsx
|
|
220
|
-
import
|
|
221
|
-
|
|
222
|
-
return classes.filter(Boolean).join(" ");
|
|
223
|
-
}
|
|
224
|
-
var HelperText = React8.forwardRef(
|
|
770
|
+
import React15 from "react";
|
|
771
|
+
var HelperText = React15.forwardRef(
|
|
225
772
|
({ className, error, children, ...rest }, ref) => {
|
|
226
|
-
return /* @__PURE__ */
|
|
773
|
+
return /* @__PURE__ */ React15.createElement(
|
|
227
774
|
"p",
|
|
228
775
|
{
|
|
229
776
|
ref,
|
|
230
|
-
className:
|
|
777
|
+
className: cx("mt-1.5 text-xs", error ? "text-error" : "text-silver", className),
|
|
231
778
|
...rest
|
|
232
779
|
},
|
|
233
780
|
children
|
|
@@ -237,19 +784,16 @@ var HelperText = React8.forwardRef(
|
|
|
237
784
|
HelperText.displayName = "HelperText";
|
|
238
785
|
|
|
239
786
|
// src/components/Textarea.tsx
|
|
240
|
-
import
|
|
241
|
-
|
|
242
|
-
return classes.filter(Boolean).join(" ");
|
|
243
|
-
}
|
|
244
|
-
var Textarea = React9.forwardRef(
|
|
787
|
+
import React16 from "react";
|
|
788
|
+
var Textarea = React16.forwardRef(
|
|
245
789
|
({ error = false, className, disabled, ...rest }, ref) => {
|
|
246
790
|
const base = "w-full px-3 py-2 bg-graphite border border-ash rounded-none text-white placeholder:text-zinc min-h-[80px] transition-all duration-fast focus:border-gold focus:ring-1 focus:ring-gold focus:outline-none disabled:bg-slate disabled:text-dim disabled:cursor-not-allowed";
|
|
247
791
|
const errorCls = error ? "border-error focus:border-error focus:ring-error" : "";
|
|
248
|
-
return /* @__PURE__ */
|
|
792
|
+
return /* @__PURE__ */ React16.createElement(
|
|
249
793
|
"textarea",
|
|
250
794
|
{
|
|
251
795
|
ref,
|
|
252
|
-
className:
|
|
796
|
+
className: cx(base, errorCls, disabled && "opacity-90", className),
|
|
253
797
|
disabled,
|
|
254
798
|
...rest
|
|
255
799
|
}
|
|
@@ -259,18 +803,15 @@ var Textarea = React9.forwardRef(
|
|
|
259
803
|
Textarea.displayName = "Textarea";
|
|
260
804
|
|
|
261
805
|
// src/components/Select.tsx
|
|
262
|
-
import
|
|
263
|
-
function cx10(...classes) {
|
|
264
|
-
return classes.filter(Boolean).join(" ");
|
|
265
|
-
}
|
|
806
|
+
import React17 from "react";
|
|
266
807
|
var selectBgImage = `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23C9A227' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`;
|
|
267
|
-
var Select =
|
|
808
|
+
var Select = React17.forwardRef(
|
|
268
809
|
({ error = false, className, disabled, options, children, ...rest }, ref) => {
|
|
269
|
-
return /* @__PURE__ */
|
|
810
|
+
return /* @__PURE__ */ React17.createElement(
|
|
270
811
|
"select",
|
|
271
812
|
{
|
|
272
813
|
ref,
|
|
273
|
-
className:
|
|
814
|
+
className: cx(
|
|
274
815
|
"appearance-none bg-graphite border border-ash rounded-none text-white px-3 py-2 pr-8",
|
|
275
816
|
"focus:border-gold focus:ring-1 focus:ring-gold focus:outline-none",
|
|
276
817
|
"disabled:opacity-50 disabled:cursor-not-allowed",
|
|
@@ -286,19 +827,16 @@ var Select = React10.forwardRef(
|
|
|
286
827
|
disabled,
|
|
287
828
|
...rest
|
|
288
829
|
},
|
|
289
|
-
options ? options.map((opt) => /* @__PURE__ */
|
|
830
|
+
options ? options.map((opt) => /* @__PURE__ */ React17.createElement("option", { key: opt.value, value: opt.value }, opt.label)) : children
|
|
290
831
|
);
|
|
291
832
|
}
|
|
292
833
|
);
|
|
293
834
|
Select.displayName = "Select";
|
|
294
835
|
|
|
295
836
|
// src/components/Checkbox.tsx
|
|
296
|
-
import
|
|
297
|
-
function cx11(...classes) {
|
|
298
|
-
return classes.filter(Boolean).join(" ");
|
|
299
|
-
}
|
|
837
|
+
import React18, { useCallback } from "react";
|
|
300
838
|
var checkmarkSvg = `url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%231A1A1A' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")`;
|
|
301
|
-
var Checkbox =
|
|
839
|
+
var Checkbox = React18.forwardRef(
|
|
302
840
|
({ className, label, id, ...rest }, ref) => {
|
|
303
841
|
const inputId = id || rest.name || Math.random().toString(36).substr(2, 9);
|
|
304
842
|
const setRef = useCallback((node) => {
|
|
@@ -313,13 +851,13 @@ var Checkbox = React11.forwardRef(
|
|
|
313
851
|
ref.current = node;
|
|
314
852
|
}
|
|
315
853
|
}, [ref]);
|
|
316
|
-
return /* @__PURE__ */
|
|
854
|
+
return /* @__PURE__ */ React18.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React18.createElement(
|
|
317
855
|
"input",
|
|
318
856
|
{
|
|
319
857
|
type: "checkbox",
|
|
320
858
|
id: inputId,
|
|
321
859
|
ref: setRef,
|
|
322
|
-
className:
|
|
860
|
+
className: cx(
|
|
323
861
|
"appearance-none h-4 w-4 border border-ash rounded-sm bg-graphite",
|
|
324
862
|
"checked:bg-gold checked:border-gold",
|
|
325
863
|
"focus:ring-1 focus:ring-gold focus:ring-offset-1 focus:ring-offset-obsidian",
|
|
@@ -343,18 +881,15 @@ var Checkbox = React11.forwardRef(
|
|
|
343
881
|
},
|
|
344
882
|
...rest
|
|
345
883
|
}
|
|
346
|
-
), label && /* @__PURE__ */
|
|
884
|
+
), label && /* @__PURE__ */ React18.createElement("label", { htmlFor: inputId, className: "ml-2 text-sm text-silver cursor-pointer select-none" }, label));
|
|
347
885
|
}
|
|
348
886
|
);
|
|
349
887
|
Checkbox.displayName = "Checkbox";
|
|
350
888
|
|
|
351
889
|
// src/components/Radio.tsx
|
|
352
|
-
import
|
|
353
|
-
function cx12(...classes) {
|
|
354
|
-
return classes.filter(Boolean).join(" ");
|
|
355
|
-
}
|
|
890
|
+
import React19, { useCallback as useCallback2 } from "react";
|
|
356
891
|
var radioDotSvg = `url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%231A1A1A' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")`;
|
|
357
|
-
var Radio =
|
|
892
|
+
var Radio = React19.forwardRef(
|
|
358
893
|
({ className, label, id, ...rest }, ref) => {
|
|
359
894
|
const inputId = id || rest.name || Math.random().toString(36).substr(2, 9);
|
|
360
895
|
const setRef = useCallback2((node) => {
|
|
@@ -369,13 +904,13 @@ var Radio = React12.forwardRef(
|
|
|
369
904
|
ref.current = node;
|
|
370
905
|
}
|
|
371
906
|
}, [ref]);
|
|
372
|
-
return /* @__PURE__ */
|
|
907
|
+
return /* @__PURE__ */ React19.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React19.createElement(
|
|
373
908
|
"input",
|
|
374
909
|
{
|
|
375
910
|
type: "radio",
|
|
376
911
|
id: inputId,
|
|
377
912
|
ref: setRef,
|
|
378
|
-
className:
|
|
913
|
+
className: cx(
|
|
379
914
|
"appearance-none h-4 w-4 border border-ash rounded-full bg-graphite",
|
|
380
915
|
"checked:bg-gold checked:border-gold",
|
|
381
916
|
"focus:ring-1 focus:ring-gold focus:ring-offset-1 focus:ring-offset-obsidian",
|
|
@@ -407,17 +942,14 @@ var Radio = React12.forwardRef(
|
|
|
407
942
|
},
|
|
408
943
|
...rest
|
|
409
944
|
}
|
|
410
|
-
), label && /* @__PURE__ */
|
|
945
|
+
), label && /* @__PURE__ */ React19.createElement("label", { htmlFor: inputId, className: "ml-2 text-sm text-silver cursor-pointer select-none" }, label));
|
|
411
946
|
}
|
|
412
947
|
);
|
|
413
948
|
Radio.displayName = "Radio";
|
|
414
949
|
|
|
415
950
|
// src/components/Switch.tsx
|
|
416
|
-
import
|
|
417
|
-
|
|
418
|
-
return classes.filter(Boolean).join(" ");
|
|
419
|
-
}
|
|
420
|
-
var Switch = React13.forwardRef(
|
|
951
|
+
import React20, { useCallback as useCallback3, useRef, useState } from "react";
|
|
952
|
+
var Switch = React20.forwardRef(
|
|
421
953
|
({ checked: controlledChecked, defaultChecked = false, onCheckedChange, disabled, className, label, ...rest }, ref) => {
|
|
422
954
|
const [internalChecked, setInternalChecked] = useState(defaultChecked);
|
|
423
955
|
const isControlled = controlledChecked !== void 0;
|
|
@@ -443,7 +975,7 @@ var Switch = React13.forwardRef(
|
|
|
443
975
|
onCheckedChange?.(newChecked);
|
|
444
976
|
rest.onClick?.(e);
|
|
445
977
|
};
|
|
446
|
-
return /* @__PURE__ */
|
|
978
|
+
return /* @__PURE__ */ React20.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React20.createElement(
|
|
447
979
|
"button",
|
|
448
980
|
{
|
|
449
981
|
type: "button",
|
|
@@ -453,7 +985,7 @@ var Switch = React13.forwardRef(
|
|
|
453
985
|
disabled,
|
|
454
986
|
ref: setRefs,
|
|
455
987
|
onClick: handleClick,
|
|
456
|
-
className:
|
|
988
|
+
className: cx(
|
|
457
989
|
"relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent",
|
|
458
990
|
"transition-colors duration-200 ease-in-out",
|
|
459
991
|
"focus:outline-none focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2 focus-visible:ring-offset-obsidian",
|
|
@@ -463,17 +995,17 @@ var Switch = React13.forwardRef(
|
|
|
463
995
|
),
|
|
464
996
|
...rest
|
|
465
997
|
},
|
|
466
|
-
/* @__PURE__ */
|
|
998
|
+
/* @__PURE__ */ React20.createElement(
|
|
467
999
|
"span",
|
|
468
1000
|
{
|
|
469
|
-
className:
|
|
1001
|
+
className: cx(
|
|
470
1002
|
"pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0",
|
|
471
1003
|
"transition duration-200 ease-in-out",
|
|
472
1004
|
checked ? "translate-x-5" : "translate-x-0"
|
|
473
1005
|
)
|
|
474
1006
|
}
|
|
475
1007
|
)
|
|
476
|
-
), label && /* @__PURE__ */
|
|
1008
|
+
), label && /* @__PURE__ */ React20.createElement(
|
|
477
1009
|
"span",
|
|
478
1010
|
{
|
|
479
1011
|
className: "text-sm text-silver cursor-pointer",
|
|
@@ -488,54 +1020,303 @@ var Switch = React13.forwardRef(
|
|
|
488
1020
|
);
|
|
489
1021
|
Switch.displayName = "Switch";
|
|
490
1022
|
|
|
491
|
-
// src/components/
|
|
492
|
-
import
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
var icons = {
|
|
498
|
-
info: Info,
|
|
499
|
-
success: CheckCircle,
|
|
500
|
-
warning: AlertTriangle,
|
|
501
|
-
error: XCircle
|
|
1023
|
+
// src/components/Slider.tsx
|
|
1024
|
+
import React21, { useState as useState2, useRef as useRef2, useCallback as useCallback4 } from "react";
|
|
1025
|
+
var SIZE_TRACK = {
|
|
1026
|
+
sm: "h-1",
|
|
1027
|
+
md: "h-2",
|
|
1028
|
+
lg: "h-3"
|
|
502
1029
|
};
|
|
503
|
-
var
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
error: "bg-error/10 border-error text-error"
|
|
1030
|
+
var SIZE_THUMB = {
|
|
1031
|
+
sm: "h-3 w-3",
|
|
1032
|
+
md: "h-4 w-4",
|
|
1033
|
+
lg: "h-5 w-5"
|
|
508
1034
|
};
|
|
509
|
-
var
|
|
510
|
-
({
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
1035
|
+
var Slider = React21.forwardRef(
|
|
1036
|
+
({
|
|
1037
|
+
value: controlledValue,
|
|
1038
|
+
defaultValue = 0,
|
|
1039
|
+
min = 0,
|
|
1040
|
+
max = 100,
|
|
1041
|
+
step = 1,
|
|
1042
|
+
onChange,
|
|
1043
|
+
onChangeEnd,
|
|
1044
|
+
disabled = false,
|
|
1045
|
+
showTooltip = false,
|
|
1046
|
+
formatValue = (v) => String(v),
|
|
1047
|
+
size = "md",
|
|
1048
|
+
className,
|
|
1049
|
+
...props
|
|
1050
|
+
}, ref) => {
|
|
1051
|
+
const [internalValue, setInternalValue] = useState2(defaultValue);
|
|
1052
|
+
const [isDragging, setIsDragging] = useState2(false);
|
|
1053
|
+
const trackRef = useRef2(null);
|
|
1054
|
+
const isControlled = controlledValue !== void 0;
|
|
1055
|
+
const value = isControlled ? controlledValue : internalValue;
|
|
1056
|
+
const percentage = (value - min) / (max - min) * 100;
|
|
1057
|
+
const updateValue = useCallback4(
|
|
1058
|
+
(clientX) => {
|
|
1059
|
+
if (!trackRef.current || disabled) return;
|
|
1060
|
+
const rect = trackRef.current.getBoundingClientRect();
|
|
1061
|
+
const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
|
|
1062
|
+
const rawValue = min + percent * (max - min);
|
|
1063
|
+
const steppedValue = Math.round(rawValue / step) * step;
|
|
1064
|
+
const clampedValue = Math.max(min, Math.min(max, steppedValue));
|
|
1065
|
+
if (!isControlled) {
|
|
1066
|
+
setInternalValue(clampedValue);
|
|
1067
|
+
}
|
|
1068
|
+
onChange?.(clampedValue);
|
|
523
1069
|
},
|
|
524
|
-
|
|
525
|
-
|
|
1070
|
+
[min, max, step, disabled, isControlled, onChange]
|
|
1071
|
+
);
|
|
1072
|
+
const handleMouseDown = (e) => {
|
|
1073
|
+
if (disabled) return;
|
|
1074
|
+
setIsDragging(true);
|
|
1075
|
+
updateValue(e.clientX);
|
|
1076
|
+
const handleMouseMove = (e2) => {
|
|
1077
|
+
updateValue(e2.clientX);
|
|
1078
|
+
};
|
|
1079
|
+
const handleMouseUp = (e2) => {
|
|
1080
|
+
setIsDragging(false);
|
|
1081
|
+
document.removeEventListener("mousemove", handleMouseMove);
|
|
1082
|
+
document.removeEventListener("mouseup", handleMouseUp);
|
|
1083
|
+
if (trackRef.current) {
|
|
1084
|
+
const rect = trackRef.current.getBoundingClientRect();
|
|
1085
|
+
const percent = Math.max(0, Math.min(1, (e2.clientX - rect.left) / rect.width));
|
|
1086
|
+
const rawValue = min + percent * (max - min);
|
|
1087
|
+
const steppedValue = Math.round(rawValue / step) * step;
|
|
1088
|
+
const clampedValue = Math.max(min, Math.min(max, steppedValue));
|
|
1089
|
+
onChangeEnd?.(clampedValue);
|
|
1090
|
+
}
|
|
1091
|
+
};
|
|
1092
|
+
document.addEventListener("mousemove", handleMouseMove);
|
|
1093
|
+
document.addEventListener("mouseup", handleMouseUp);
|
|
1094
|
+
};
|
|
1095
|
+
const handleKeyDown = (e) => {
|
|
1096
|
+
if (disabled) return;
|
|
1097
|
+
let newValue = value;
|
|
1098
|
+
switch (e.key) {
|
|
1099
|
+
case "ArrowRight":
|
|
1100
|
+
case "ArrowUp":
|
|
1101
|
+
newValue = Math.min(max, value + step);
|
|
1102
|
+
break;
|
|
1103
|
+
case "ArrowLeft":
|
|
1104
|
+
case "ArrowDown":
|
|
1105
|
+
newValue = Math.max(min, value - step);
|
|
1106
|
+
break;
|
|
1107
|
+
case "Home":
|
|
1108
|
+
newValue = min;
|
|
1109
|
+
break;
|
|
1110
|
+
case "End":
|
|
1111
|
+
newValue = max;
|
|
1112
|
+
break;
|
|
1113
|
+
default:
|
|
1114
|
+
return;
|
|
1115
|
+
}
|
|
1116
|
+
e.preventDefault();
|
|
1117
|
+
if (!isControlled) {
|
|
1118
|
+
setInternalValue(newValue);
|
|
1119
|
+
}
|
|
1120
|
+
onChange?.(newValue);
|
|
1121
|
+
onChangeEnd?.(newValue);
|
|
1122
|
+
};
|
|
1123
|
+
return /* @__PURE__ */ React21.createElement(
|
|
1124
|
+
"div",
|
|
1125
|
+
{
|
|
1126
|
+
ref,
|
|
1127
|
+
className: cx("relative w-full py-2", disabled && "opacity-50", className),
|
|
1128
|
+
...props
|
|
1129
|
+
},
|
|
1130
|
+
/* @__PURE__ */ React21.createElement(
|
|
1131
|
+
"div",
|
|
1132
|
+
{
|
|
1133
|
+
ref: trackRef,
|
|
1134
|
+
className: cx(
|
|
1135
|
+
"relative w-full bg-charcoal border border-ash cursor-pointer",
|
|
1136
|
+
SIZE_TRACK[size]
|
|
1137
|
+
),
|
|
1138
|
+
onMouseDown: handleMouseDown
|
|
1139
|
+
},
|
|
1140
|
+
/* @__PURE__ */ React21.createElement(
|
|
1141
|
+
"div",
|
|
1142
|
+
{
|
|
1143
|
+
className: cx("absolute inset-y-0 left-0 bg-gold", SIZE_TRACK[size]),
|
|
1144
|
+
style: { width: `${percentage}%` }
|
|
1145
|
+
}
|
|
1146
|
+
),
|
|
1147
|
+
/* @__PURE__ */ React21.createElement(
|
|
1148
|
+
"div",
|
|
1149
|
+
{
|
|
1150
|
+
role: "slider",
|
|
1151
|
+
tabIndex: disabled ? -1 : 0,
|
|
1152
|
+
"aria-valuemin": min,
|
|
1153
|
+
"aria-valuemax": max,
|
|
1154
|
+
"aria-valuenow": value,
|
|
1155
|
+
"aria-disabled": disabled,
|
|
1156
|
+
onKeyDown: handleKeyDown,
|
|
1157
|
+
className: cx(
|
|
1158
|
+
"absolute top-1/2 -translate-y-1/2 -translate-x-1/2",
|
|
1159
|
+
"bg-gold border-2 border-gold-light rounded-full",
|
|
1160
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2 focus-visible:ring-offset-obsidian",
|
|
1161
|
+
"transition-transform duration-fast",
|
|
1162
|
+
isDragging && "scale-110",
|
|
1163
|
+
!disabled && "cursor-grab active:cursor-grabbing",
|
|
1164
|
+
SIZE_THUMB[size]
|
|
1165
|
+
),
|
|
1166
|
+
style: { left: `${percentage}%` }
|
|
1167
|
+
},
|
|
1168
|
+
showTooltip && isDragging && /* @__PURE__ */ React21.createElement("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-graphite border border-ash text-xs text-white whitespace-nowrap" }, formatValue(value))
|
|
1169
|
+
)
|
|
1170
|
+
)
|
|
1171
|
+
);
|
|
1172
|
+
}
|
|
1173
|
+
);
|
|
1174
|
+
Slider.displayName = "Slider";
|
|
1175
|
+
|
|
1176
|
+
// src/components/InputGroup.tsx
|
|
1177
|
+
import React22 from "react";
|
|
1178
|
+
var InputGroup = React22.forwardRef(
|
|
1179
|
+
({ className, children, ...props }, ref) => {
|
|
1180
|
+
return /* @__PURE__ */ React22.createElement(
|
|
1181
|
+
"div",
|
|
1182
|
+
{
|
|
1183
|
+
ref,
|
|
1184
|
+
className: cx("flex", className),
|
|
1185
|
+
...props
|
|
1186
|
+
},
|
|
1187
|
+
children
|
|
1188
|
+
);
|
|
1189
|
+
}
|
|
1190
|
+
);
|
|
1191
|
+
InputGroup.displayName = "InputGroup";
|
|
1192
|
+
var InputLeftAddon = React22.forwardRef(
|
|
1193
|
+
({ className, children, ...props }, ref) => {
|
|
1194
|
+
return /* @__PURE__ */ React22.createElement(
|
|
1195
|
+
"div",
|
|
1196
|
+
{
|
|
1197
|
+
ref,
|
|
1198
|
+
className: cx(
|
|
1199
|
+
"flex items-center px-3 bg-slate border border-r-0 border-ash",
|
|
1200
|
+
"text-sm text-silver whitespace-nowrap",
|
|
1201
|
+
className
|
|
1202
|
+
),
|
|
1203
|
+
...props
|
|
1204
|
+
},
|
|
1205
|
+
children
|
|
1206
|
+
);
|
|
1207
|
+
}
|
|
1208
|
+
);
|
|
1209
|
+
InputLeftAddon.displayName = "InputLeftAddon";
|
|
1210
|
+
var InputRightAddon = React22.forwardRef(
|
|
1211
|
+
({ className, children, ...props }, ref) => {
|
|
1212
|
+
return /* @__PURE__ */ React22.createElement(
|
|
1213
|
+
"div",
|
|
1214
|
+
{
|
|
1215
|
+
ref,
|
|
1216
|
+
className: cx(
|
|
1217
|
+
"flex items-center px-3 bg-slate border border-l-0 border-ash",
|
|
1218
|
+
"text-sm text-silver whitespace-nowrap",
|
|
1219
|
+
className
|
|
1220
|
+
),
|
|
1221
|
+
...props
|
|
1222
|
+
},
|
|
1223
|
+
children
|
|
1224
|
+
);
|
|
1225
|
+
}
|
|
1226
|
+
);
|
|
1227
|
+
InputRightAddon.displayName = "InputRightAddon";
|
|
1228
|
+
var InputLeftElement = React22.forwardRef(
|
|
1229
|
+
({ className, children, ...props }, ref) => {
|
|
1230
|
+
return /* @__PURE__ */ React22.createElement(
|
|
1231
|
+
"div",
|
|
1232
|
+
{
|
|
1233
|
+
ref,
|
|
1234
|
+
className: cx(
|
|
1235
|
+
"absolute left-0 inset-y-0 flex items-center pl-3",
|
|
1236
|
+
"pointer-events-none text-silver",
|
|
1237
|
+
className
|
|
1238
|
+
),
|
|
1239
|
+
...props
|
|
1240
|
+
},
|
|
1241
|
+
children
|
|
1242
|
+
);
|
|
1243
|
+
}
|
|
1244
|
+
);
|
|
1245
|
+
InputLeftElement.displayName = "InputLeftElement";
|
|
1246
|
+
var InputRightElement = React22.forwardRef(
|
|
1247
|
+
({ className, children, ...props }, ref) => {
|
|
1248
|
+
return /* @__PURE__ */ React22.createElement(
|
|
1249
|
+
"div",
|
|
1250
|
+
{
|
|
1251
|
+
ref,
|
|
1252
|
+
className: cx(
|
|
1253
|
+
"absolute right-0 inset-y-0 flex items-center pr-3",
|
|
1254
|
+
className
|
|
1255
|
+
),
|
|
1256
|
+
...props
|
|
1257
|
+
},
|
|
1258
|
+
children
|
|
1259
|
+
);
|
|
1260
|
+
}
|
|
1261
|
+
);
|
|
1262
|
+
InputRightElement.displayName = "InputRightElement";
|
|
1263
|
+
var InputWrapper = React22.forwardRef(
|
|
1264
|
+
({ className, children, ...props }, ref) => {
|
|
1265
|
+
return /* @__PURE__ */ React22.createElement(
|
|
1266
|
+
"div",
|
|
1267
|
+
{
|
|
1268
|
+
ref,
|
|
1269
|
+
className: cx("relative flex-1", className),
|
|
1270
|
+
...props
|
|
1271
|
+
},
|
|
1272
|
+
children
|
|
1273
|
+
);
|
|
1274
|
+
}
|
|
1275
|
+
);
|
|
1276
|
+
InputWrapper.displayName = "InputWrapper";
|
|
1277
|
+
|
|
1278
|
+
// src/components/Alert.tsx
|
|
1279
|
+
import React23 from "react";
|
|
1280
|
+
import { Info, CheckCircle, AlertTriangle, XCircle } from "lucide-react";
|
|
1281
|
+
var icons = {
|
|
1282
|
+
info: Info,
|
|
1283
|
+
success: CheckCircle,
|
|
1284
|
+
warning: AlertTriangle,
|
|
1285
|
+
error: XCircle
|
|
1286
|
+
};
|
|
1287
|
+
var variantStyles = {
|
|
1288
|
+
info: "bg-info/10 border-info text-info",
|
|
1289
|
+
success: "bg-success/10 border-success text-success",
|
|
1290
|
+
warning: "bg-warning/10 border-warning text-warning",
|
|
1291
|
+
error: "bg-error/10 border-error text-error"
|
|
1292
|
+
};
|
|
1293
|
+
var Alert = React23.forwardRef(
|
|
1294
|
+
({ variant = "info", title, children, className, ...rest }, ref) => {
|
|
1295
|
+
const Icon = icons[variant];
|
|
1296
|
+
return /* @__PURE__ */ React23.createElement(
|
|
1297
|
+
"div",
|
|
1298
|
+
{
|
|
1299
|
+
ref,
|
|
1300
|
+
role: "alert",
|
|
1301
|
+
className: cx(
|
|
1302
|
+
"relative w-full p-4 rounded-none border border-l-4 flex gap-3",
|
|
1303
|
+
variantStyles[variant],
|
|
1304
|
+
className
|
|
1305
|
+
),
|
|
1306
|
+
...rest
|
|
1307
|
+
},
|
|
1308
|
+
/* @__PURE__ */ React23.createElement(Icon, { className: "h-5 w-5 shrink-0" }),
|
|
1309
|
+
/* @__PURE__ */ React23.createElement("div", { className: "flex-1" }, title && /* @__PURE__ */ React23.createElement("h5", { className: "mb-1 font-medium leading-none tracking-tight text-current" }, title), /* @__PURE__ */ React23.createElement("div", { className: "text-sm opacity-90" }, children))
|
|
526
1310
|
);
|
|
527
1311
|
}
|
|
528
1312
|
);
|
|
529
1313
|
Alert.displayName = "Alert";
|
|
530
1314
|
|
|
531
1315
|
// src/components/Spinner.tsx
|
|
532
|
-
import
|
|
533
|
-
function cx15(...classes) {
|
|
534
|
-
return classes.filter(Boolean).join(" ");
|
|
535
|
-
}
|
|
1316
|
+
import React24 from "react";
|
|
536
1317
|
var Spinner = ({ className, size = "md", ...rest }) => {
|
|
537
1318
|
const sizeClass = size === "sm" ? "h-4 w-4" : size === "lg" ? "h-8 w-8" : "h-6 w-6";
|
|
538
|
-
return /* @__PURE__ */
|
|
1319
|
+
return /* @__PURE__ */ React24.createElement(
|
|
539
1320
|
"svg",
|
|
540
1321
|
{
|
|
541
1322
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -545,26 +1326,23 @@ var Spinner = ({ className, size = "md", ...rest }) => {
|
|
|
545
1326
|
strokeWidth: "2",
|
|
546
1327
|
strokeLinecap: "round",
|
|
547
1328
|
strokeLinejoin: "round",
|
|
548
|
-
className:
|
|
1329
|
+
className: cx("animate-spin text-gold", sizeClass, className),
|
|
549
1330
|
...rest
|
|
550
1331
|
},
|
|
551
|
-
/* @__PURE__ */
|
|
1332
|
+
/* @__PURE__ */ React24.createElement("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
|
|
552
1333
|
);
|
|
553
1334
|
};
|
|
554
1335
|
Spinner.displayName = "Spinner";
|
|
555
1336
|
|
|
556
1337
|
// src/components/Skeleton.tsx
|
|
557
|
-
import
|
|
558
|
-
|
|
559
|
-
return classes.filter(Boolean).join(" ");
|
|
560
|
-
}
|
|
561
|
-
var Skeleton = React16.forwardRef(
|
|
1338
|
+
import React25 from "react";
|
|
1339
|
+
var Skeleton = React25.forwardRef(
|
|
562
1340
|
({ className, ...rest }, ref) => {
|
|
563
|
-
return /* @__PURE__ */
|
|
1341
|
+
return /* @__PURE__ */ React25.createElement(
|
|
564
1342
|
"div",
|
|
565
1343
|
{
|
|
566
1344
|
ref,
|
|
567
|
-
className:
|
|
1345
|
+
className: cx("animate-pulse bg-ash rounded-sm", className),
|
|
568
1346
|
...rest
|
|
569
1347
|
}
|
|
570
1348
|
);
|
|
@@ -572,19 +1350,203 @@ var Skeleton = React16.forwardRef(
|
|
|
572
1350
|
);
|
|
573
1351
|
Skeleton.displayName = "Skeleton";
|
|
574
1352
|
|
|
575
|
-
// src/components/
|
|
576
|
-
import
|
|
1353
|
+
// src/components/Progress.tsx
|
|
1354
|
+
import React26 from "react";
|
|
1355
|
+
var SIZE_MAP = {
|
|
1356
|
+
sm: "h-1",
|
|
1357
|
+
md: "h-2",
|
|
1358
|
+
lg: "h-3"
|
|
1359
|
+
};
|
|
1360
|
+
var VARIANT_MAP2 = {
|
|
1361
|
+
default: "bg-gold",
|
|
1362
|
+
success: "bg-success",
|
|
1363
|
+
warning: "bg-warning",
|
|
1364
|
+
error: "bg-error"
|
|
1365
|
+
};
|
|
1366
|
+
var Progress = React26.forwardRef(
|
|
1367
|
+
({
|
|
1368
|
+
value = 0,
|
|
1369
|
+
max = 100,
|
|
1370
|
+
size = "md",
|
|
1371
|
+
variant = "default",
|
|
1372
|
+
showValue = false,
|
|
1373
|
+
formatValue,
|
|
1374
|
+
indeterminate = false,
|
|
1375
|
+
className,
|
|
1376
|
+
...props
|
|
1377
|
+
}, ref) => {
|
|
1378
|
+
const percentage = Math.min(100, Math.max(0, value / max * 100));
|
|
1379
|
+
const displayValue = formatValue ? formatValue(value, max) : `${Math.round(percentage)}%`;
|
|
1380
|
+
return /* @__PURE__ */ React26.createElement("div", { ref, className: cx("w-full", className), ...props }, showValue && /* @__PURE__ */ React26.createElement("div", { className: "flex justify-between mb-1" }, /* @__PURE__ */ React26.createElement("span", { className: "text-sm text-silver" }, "Progress"), /* @__PURE__ */ React26.createElement("span", { className: "text-sm text-white font-medium" }, displayValue)), /* @__PURE__ */ React26.createElement(
|
|
1381
|
+
"div",
|
|
1382
|
+
{
|
|
1383
|
+
className: cx(
|
|
1384
|
+
"w-full bg-charcoal border border-ash overflow-hidden rounded-none",
|
|
1385
|
+
SIZE_MAP[size]
|
|
1386
|
+
),
|
|
1387
|
+
role: "progressbar",
|
|
1388
|
+
"aria-valuenow": indeterminate ? void 0 : value,
|
|
1389
|
+
"aria-valuemin": 0,
|
|
1390
|
+
"aria-valuemax": max
|
|
1391
|
+
},
|
|
1392
|
+
/* @__PURE__ */ React26.createElement(
|
|
1393
|
+
"div",
|
|
1394
|
+
{
|
|
1395
|
+
className: cx(
|
|
1396
|
+
"h-full transition-all duration-300 ease-out",
|
|
1397
|
+
VARIANT_MAP2[variant],
|
|
1398
|
+
indeterminate && "animate-pulse"
|
|
1399
|
+
),
|
|
1400
|
+
style: {
|
|
1401
|
+
width: indeterminate ? "100%" : `${percentage}%`
|
|
1402
|
+
}
|
|
1403
|
+
}
|
|
1404
|
+
)
|
|
1405
|
+
));
|
|
1406
|
+
}
|
|
1407
|
+
);
|
|
1408
|
+
Progress.displayName = "Progress";
|
|
1409
|
+
|
|
1410
|
+
// src/components/Toast.tsx
|
|
1411
|
+
import React27, { createContext, useContext, useState as useState3, useCallback as useCallback5, useEffect } from "react";
|
|
577
1412
|
import { createPortal } from "react-dom";
|
|
578
|
-
import { X } from "lucide-react";
|
|
579
|
-
|
|
580
|
-
|
|
1413
|
+
import { X, CheckCircle as CheckCircle2, AlertCircle, AlertTriangle as AlertTriangle2, Info as Info2 } from "lucide-react";
|
|
1414
|
+
var ToastContext = createContext(null);
|
|
1415
|
+
function useToast() {
|
|
1416
|
+
const context = useContext(ToastContext);
|
|
1417
|
+
if (!context) {
|
|
1418
|
+
throw new Error("useToast must be used within a ToastProvider");
|
|
1419
|
+
}
|
|
1420
|
+
const toast = useCallback5(
|
|
1421
|
+
(options) => {
|
|
1422
|
+
return context.addToast(options);
|
|
1423
|
+
},
|
|
1424
|
+
[context]
|
|
1425
|
+
);
|
|
1426
|
+
return {
|
|
1427
|
+
toast,
|
|
1428
|
+
dismiss: context.removeToast
|
|
1429
|
+
};
|
|
581
1430
|
}
|
|
582
|
-
var
|
|
583
|
-
|
|
1431
|
+
var ToastProvider = ({
|
|
1432
|
+
children,
|
|
1433
|
+
position = "bottom-right",
|
|
1434
|
+
defaultDuration = 5e3
|
|
1435
|
+
}) => {
|
|
1436
|
+
const [toasts, setToasts] = useState3([]);
|
|
1437
|
+
const [mounted, setMounted] = useState3(false);
|
|
584
1438
|
useEffect(() => {
|
|
585
1439
|
setMounted(true);
|
|
586
1440
|
}, []);
|
|
1441
|
+
const addToast = useCallback5(
|
|
1442
|
+
(toast) => {
|
|
1443
|
+
const id = Math.random().toString(36).substr(2, 9);
|
|
1444
|
+
const newToast = {
|
|
1445
|
+
...toast,
|
|
1446
|
+
id,
|
|
1447
|
+
duration: toast.duration ?? defaultDuration
|
|
1448
|
+
};
|
|
1449
|
+
setToasts((prev) => [...prev, newToast]);
|
|
1450
|
+
return id;
|
|
1451
|
+
},
|
|
1452
|
+
[defaultDuration]
|
|
1453
|
+
);
|
|
1454
|
+
const removeToast = useCallback5((id) => {
|
|
1455
|
+
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
1456
|
+
}, []);
|
|
1457
|
+
return /* @__PURE__ */ React27.createElement(ToastContext.Provider, { value: { toasts, addToast, removeToast, position } }, children, mounted && /* @__PURE__ */ React27.createElement(ToastViewport, null));
|
|
1458
|
+
};
|
|
1459
|
+
ToastProvider.displayName = "ToastProvider";
|
|
1460
|
+
var ToastViewport = () => {
|
|
1461
|
+
const context = useContext(ToastContext);
|
|
1462
|
+
if (!context) return null;
|
|
1463
|
+
const { toasts, position } = context;
|
|
1464
|
+
const positionClasses = {
|
|
1465
|
+
"top-right": "top-4 right-4",
|
|
1466
|
+
"top-left": "top-4 left-4",
|
|
1467
|
+
"bottom-right": "bottom-4 right-4",
|
|
1468
|
+
"bottom-left": "bottom-4 left-4",
|
|
1469
|
+
"top-center": "top-4 left-1/2 -translate-x-1/2",
|
|
1470
|
+
"bottom-center": "bottom-4 left-1/2 -translate-x-1/2"
|
|
1471
|
+
};
|
|
1472
|
+
return createPortal(
|
|
1473
|
+
/* @__PURE__ */ React27.createElement(
|
|
1474
|
+
"div",
|
|
1475
|
+
{
|
|
1476
|
+
className: cx(
|
|
1477
|
+
"fixed z-50 flex flex-col gap-2 pointer-events-none",
|
|
1478
|
+
positionClasses[position]
|
|
1479
|
+
)
|
|
1480
|
+
},
|
|
1481
|
+
toasts.map((toast) => /* @__PURE__ */ React27.createElement(Toast, { key: toast.id, ...toast }))
|
|
1482
|
+
),
|
|
1483
|
+
document.body
|
|
1484
|
+
);
|
|
1485
|
+
};
|
|
1486
|
+
var VARIANT_STYLES2 = {
|
|
1487
|
+
default: "bg-charcoal border-ash",
|
|
1488
|
+
success: "bg-charcoal border-success/50",
|
|
1489
|
+
error: "bg-charcoal border-error/50",
|
|
1490
|
+
warning: "bg-charcoal border-warning/50",
|
|
1491
|
+
info: "bg-charcoal border-info/50"
|
|
1492
|
+
};
|
|
1493
|
+
var VARIANT_ICONS = {
|
|
1494
|
+
default: null,
|
|
1495
|
+
success: /* @__PURE__ */ React27.createElement(CheckCircle2, { className: "h-5 w-5 text-success" }),
|
|
1496
|
+
error: /* @__PURE__ */ React27.createElement(AlertCircle, { className: "h-5 w-5 text-error" }),
|
|
1497
|
+
warning: /* @__PURE__ */ React27.createElement(AlertTriangle2, { className: "h-5 w-5 text-warning" }),
|
|
1498
|
+
info: /* @__PURE__ */ React27.createElement(Info2, { className: "h-5 w-5 text-info" })
|
|
1499
|
+
};
|
|
1500
|
+
var Toast = ({
|
|
1501
|
+
id,
|
|
1502
|
+
title,
|
|
1503
|
+
description,
|
|
1504
|
+
variant = "default",
|
|
1505
|
+
duration,
|
|
1506
|
+
action
|
|
1507
|
+
}) => {
|
|
1508
|
+
const context = useContext(ToastContext);
|
|
587
1509
|
useEffect(() => {
|
|
1510
|
+
if (duration && duration > 0) {
|
|
1511
|
+
const timer = setTimeout(() => {
|
|
1512
|
+
context?.removeToast(id);
|
|
1513
|
+
}, duration);
|
|
1514
|
+
return () => clearTimeout(timer);
|
|
1515
|
+
}
|
|
1516
|
+
}, [id, duration, context]);
|
|
1517
|
+
const icon = VARIANT_ICONS[variant];
|
|
1518
|
+
return /* @__PURE__ */ React27.createElement(
|
|
1519
|
+
"div",
|
|
1520
|
+
{
|
|
1521
|
+
role: "alert",
|
|
1522
|
+
className: cx(
|
|
1523
|
+
"pointer-events-auto w-80 p-4 border shadow-lg animate-slide-in-right",
|
|
1524
|
+
VARIANT_STYLES2[variant]
|
|
1525
|
+
)
|
|
1526
|
+
},
|
|
1527
|
+
/* @__PURE__ */ React27.createElement("div", { className: "flex gap-3" }, icon && /* @__PURE__ */ React27.createElement("div", { className: "shrink-0 mt-0.5" }, icon), /* @__PURE__ */ React27.createElement("div", { className: "flex-1 min-w-0" }, title && /* @__PURE__ */ React27.createElement("p", { className: "text-sm font-medium text-white" }, title), description && /* @__PURE__ */ React27.createElement("p", { className: "text-sm text-silver mt-1" }, description), action && /* @__PURE__ */ React27.createElement("div", { className: "mt-3" }, action)), /* @__PURE__ */ React27.createElement(
|
|
1528
|
+
"button",
|
|
1529
|
+
{
|
|
1530
|
+
onClick: () => context?.removeToast(id),
|
|
1531
|
+
className: "shrink-0 text-silver hover:text-white transition-colors"
|
|
1532
|
+
},
|
|
1533
|
+
/* @__PURE__ */ React27.createElement(X, { className: "h-4 w-4" }),
|
|
1534
|
+
/* @__PURE__ */ React27.createElement("span", { className: "sr-only" }, "Dismiss")
|
|
1535
|
+
))
|
|
1536
|
+
);
|
|
1537
|
+
};
|
|
1538
|
+
Toast.displayName = "Toast";
|
|
1539
|
+
|
|
1540
|
+
// src/components/Modal.tsx
|
|
1541
|
+
import React28, { useEffect as useEffect2, useState as useState4 } from "react";
|
|
1542
|
+
import { createPortal as createPortal2 } from "react-dom";
|
|
1543
|
+
import { X as X2 } from "lucide-react";
|
|
1544
|
+
var Modal = ({ isOpen, onClose, title, children, className }) => {
|
|
1545
|
+
const [mounted, setMounted] = useState4(false);
|
|
1546
|
+
useEffect2(() => {
|
|
1547
|
+
setMounted(true);
|
|
1548
|
+
}, []);
|
|
1549
|
+
useEffect2(() => {
|
|
588
1550
|
if (isOpen) {
|
|
589
1551
|
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
|
|
590
1552
|
document.body.style.overflow = "hidden";
|
|
@@ -598,7 +1560,7 @@ var Modal = ({ isOpen, onClose, title, children, className }) => {
|
|
|
598
1560
|
document.body.style.paddingRight = "0px";
|
|
599
1561
|
};
|
|
600
1562
|
}, [isOpen]);
|
|
601
|
-
|
|
1563
|
+
useEffect2(() => {
|
|
602
1564
|
const handleEsc = (e) => {
|
|
603
1565
|
if (e.key === "Escape") onClose();
|
|
604
1566
|
};
|
|
@@ -607,45 +1569,1545 @@ var Modal = ({ isOpen, onClose, title, children, className }) => {
|
|
|
607
1569
|
}, [onClose]);
|
|
608
1570
|
if (!mounted) return null;
|
|
609
1571
|
if (!isOpen) return null;
|
|
610
|
-
const content = /* @__PURE__ */
|
|
1572
|
+
const content = /* @__PURE__ */ React28.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6", onClick: onClose }, /* @__PURE__ */ React28.createElement("div", { className: "fixed inset-0 z-40 bg-obsidian/80 backdrop-blur-sm", "aria-hidden": "true" }), /* @__PURE__ */ React28.createElement(
|
|
611
1573
|
"div",
|
|
612
1574
|
{
|
|
613
1575
|
role: "dialog",
|
|
614
1576
|
"aria-modal": "true",
|
|
615
|
-
className:
|
|
1577
|
+
className: cx(
|
|
616
1578
|
"bg-charcoal border border-gold/30 shadow-2xl z-50 w-full max-w-lg p-6 rounded-none relative",
|
|
617
1579
|
className
|
|
618
1580
|
),
|
|
619
1581
|
"data-state": "open",
|
|
620
1582
|
onClick: (e) => e.stopPropagation()
|
|
621
1583
|
},
|
|
622
|
-
/* @__PURE__ */
|
|
623
|
-
/* @__PURE__ */
|
|
1584
|
+
/* @__PURE__ */ React28.createElement("div", { className: "flex items-center justify-between mb-2" }, title ? /* @__PURE__ */ React28.createElement("h3", { className: "text-xl font-semibold text-white m-0" }, title) : /* @__PURE__ */ React28.createElement("div", null), /* @__PURE__ */ React28.createElement("button", { onClick: onClose, className: "text-silver hover:text-white transition-colors ml-auto" }, /* @__PURE__ */ React28.createElement(X2, { className: "h-5 w-5" }), /* @__PURE__ */ React28.createElement("span", { className: "sr-only" }, "Close"))),
|
|
1585
|
+
/* @__PURE__ */ React28.createElement("div", null, children)
|
|
624
1586
|
));
|
|
625
|
-
return
|
|
1587
|
+
return createPortal2(content, document.body);
|
|
626
1588
|
};
|
|
627
1589
|
Modal.displayName = "Modal";
|
|
628
1590
|
|
|
1591
|
+
// src/components/Drawer.tsx
|
|
1592
|
+
import React29, { useEffect as useEffect3, useState as useState5 } from "react";
|
|
1593
|
+
import { createPortal as createPortal3 } from "react-dom";
|
|
1594
|
+
import { X as X3 } from "lucide-react";
|
|
1595
|
+
var SIZE_MAP2 = {
|
|
1596
|
+
sm: {
|
|
1597
|
+
left: "w-64",
|
|
1598
|
+
right: "w-64",
|
|
1599
|
+
top: "h-48",
|
|
1600
|
+
bottom: "h-48"
|
|
1601
|
+
},
|
|
1602
|
+
md: {
|
|
1603
|
+
left: "w-80",
|
|
1604
|
+
right: "w-80",
|
|
1605
|
+
top: "h-64",
|
|
1606
|
+
bottom: "h-64"
|
|
1607
|
+
},
|
|
1608
|
+
lg: {
|
|
1609
|
+
left: "w-96",
|
|
1610
|
+
right: "w-96",
|
|
1611
|
+
top: "h-80",
|
|
1612
|
+
bottom: "h-80"
|
|
1613
|
+
},
|
|
1614
|
+
xl: {
|
|
1615
|
+
left: "w-[32rem]",
|
|
1616
|
+
right: "w-[32rem]",
|
|
1617
|
+
top: "h-96",
|
|
1618
|
+
bottom: "h-96"
|
|
1619
|
+
},
|
|
1620
|
+
full: {
|
|
1621
|
+
left: "w-full",
|
|
1622
|
+
right: "w-full",
|
|
1623
|
+
top: "h-full",
|
|
1624
|
+
bottom: "h-full"
|
|
1625
|
+
}
|
|
1626
|
+
};
|
|
1627
|
+
var POSITION_CLASSES = {
|
|
1628
|
+
left: "left-0 top-0 h-full",
|
|
1629
|
+
right: "right-0 top-0 h-full",
|
|
1630
|
+
top: "top-0 left-0 w-full",
|
|
1631
|
+
bottom: "bottom-0 left-0 w-full"
|
|
1632
|
+
};
|
|
1633
|
+
var TRANSFORM_CLASSES = {
|
|
1634
|
+
left: { open: "translate-x-0", closed: "-translate-x-full" },
|
|
1635
|
+
right: { open: "translate-x-0", closed: "translate-x-full" },
|
|
1636
|
+
top: { open: "translate-y-0", closed: "-translate-y-full" },
|
|
1637
|
+
bottom: { open: "translate-y-0", closed: "translate-y-full" }
|
|
1638
|
+
};
|
|
1639
|
+
var Drawer = ({
|
|
1640
|
+
isOpen,
|
|
1641
|
+
onClose,
|
|
1642
|
+
position = "right",
|
|
1643
|
+
title,
|
|
1644
|
+
size = "md",
|
|
1645
|
+
children,
|
|
1646
|
+
className
|
|
1647
|
+
}) => {
|
|
1648
|
+
const [mounted, setMounted] = useState5(false);
|
|
1649
|
+
useEffect3(() => {
|
|
1650
|
+
setMounted(true);
|
|
1651
|
+
}, []);
|
|
1652
|
+
useEffect3(() => {
|
|
1653
|
+
if (isOpen) {
|
|
1654
|
+
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
|
|
1655
|
+
document.body.style.overflow = "hidden";
|
|
1656
|
+
document.body.style.paddingRight = `${scrollbarWidth}px`;
|
|
1657
|
+
} else {
|
|
1658
|
+
document.body.style.overflow = "unset";
|
|
1659
|
+
document.body.style.paddingRight = "0px";
|
|
1660
|
+
}
|
|
1661
|
+
return () => {
|
|
1662
|
+
document.body.style.overflow = "unset";
|
|
1663
|
+
document.body.style.paddingRight = "0px";
|
|
1664
|
+
};
|
|
1665
|
+
}, [isOpen]);
|
|
1666
|
+
useEffect3(() => {
|
|
1667
|
+
const handleEsc = (e) => {
|
|
1668
|
+
if (e.key === "Escape") onClose();
|
|
1669
|
+
};
|
|
1670
|
+
window.addEventListener("keydown", handleEsc);
|
|
1671
|
+
return () => window.removeEventListener("keydown", handleEsc);
|
|
1672
|
+
}, [onClose]);
|
|
1673
|
+
if (!mounted) return null;
|
|
1674
|
+
const content = /* @__PURE__ */ React29.createElement(
|
|
1675
|
+
"div",
|
|
1676
|
+
{
|
|
1677
|
+
className: cx(
|
|
1678
|
+
"fixed inset-0 z-50",
|
|
1679
|
+
isOpen ? "pointer-events-auto" : "pointer-events-none"
|
|
1680
|
+
)
|
|
1681
|
+
},
|
|
1682
|
+
/* @__PURE__ */ React29.createElement(
|
|
1683
|
+
"div",
|
|
1684
|
+
{
|
|
1685
|
+
className: cx(
|
|
1686
|
+
"fixed inset-0 bg-obsidian/80 backdrop-blur-sm transition-opacity duration-300",
|
|
1687
|
+
isOpen ? "opacity-100" : "opacity-0"
|
|
1688
|
+
),
|
|
1689
|
+
onClick: onClose,
|
|
1690
|
+
"aria-hidden": "true"
|
|
1691
|
+
}
|
|
1692
|
+
),
|
|
1693
|
+
/* @__PURE__ */ React29.createElement(
|
|
1694
|
+
"div",
|
|
1695
|
+
{
|
|
1696
|
+
role: "dialog",
|
|
1697
|
+
"aria-modal": "true",
|
|
1698
|
+
className: cx(
|
|
1699
|
+
"fixed bg-charcoal border-ash shadow-2xl flex flex-col",
|
|
1700
|
+
"transition-transform duration-300 ease-out",
|
|
1701
|
+
POSITION_CLASSES[position],
|
|
1702
|
+
SIZE_MAP2[size][position],
|
|
1703
|
+
position === "left" && "border-r",
|
|
1704
|
+
position === "right" && "border-l",
|
|
1705
|
+
position === "top" && "border-b",
|
|
1706
|
+
position === "bottom" && "border-t",
|
|
1707
|
+
isOpen ? TRANSFORM_CLASSES[position].open : TRANSFORM_CLASSES[position].closed,
|
|
1708
|
+
className
|
|
1709
|
+
)
|
|
1710
|
+
},
|
|
1711
|
+
/* @__PURE__ */ React29.createElement("div", { className: "flex items-center justify-between px-4 py-3 border-b border-ash" }, title ? /* @__PURE__ */ React29.createElement("h2", { className: "text-lg font-semibold text-white m-0" }, title) : /* @__PURE__ */ React29.createElement("div", null), /* @__PURE__ */ React29.createElement(
|
|
1712
|
+
"button",
|
|
1713
|
+
{
|
|
1714
|
+
onClick: onClose,
|
|
1715
|
+
className: "text-silver hover:text-white transition-colors"
|
|
1716
|
+
},
|
|
1717
|
+
/* @__PURE__ */ React29.createElement(X3, { className: "h-5 w-5" }),
|
|
1718
|
+
/* @__PURE__ */ React29.createElement("span", { className: "sr-only" }, "Close")
|
|
1719
|
+
)),
|
|
1720
|
+
/* @__PURE__ */ React29.createElement("div", { className: "flex-1 overflow-auto p-4" }, children)
|
|
1721
|
+
)
|
|
1722
|
+
);
|
|
1723
|
+
return createPortal3(content, document.body);
|
|
1724
|
+
};
|
|
1725
|
+
Drawer.displayName = "Drawer";
|
|
1726
|
+
|
|
1727
|
+
// src/components/Popover.tsx
|
|
1728
|
+
import React30, { useState as useState6, useRef as useRef3, useEffect as useEffect4, useCallback as useCallback6, useId } from "react";
|
|
1729
|
+
var POSITION_CLASSES2 = {
|
|
1730
|
+
top: {
|
|
1731
|
+
start: "bottom-full left-0 mb-2",
|
|
1732
|
+
center: "bottom-full left-1/2 -translate-x-1/2 mb-2",
|
|
1733
|
+
end: "bottom-full right-0 mb-2"
|
|
1734
|
+
},
|
|
1735
|
+
bottom: {
|
|
1736
|
+
start: "top-full left-0 mt-2",
|
|
1737
|
+
center: "top-full left-1/2 -translate-x-1/2 mt-2",
|
|
1738
|
+
end: "top-full right-0 mt-2"
|
|
1739
|
+
},
|
|
1740
|
+
left: {
|
|
1741
|
+
start: "right-full top-0 mr-2",
|
|
1742
|
+
center: "right-full top-1/2 -translate-y-1/2 mr-2",
|
|
1743
|
+
end: "right-full bottom-0 mr-2"
|
|
1744
|
+
},
|
|
1745
|
+
right: {
|
|
1746
|
+
start: "left-full top-0 ml-2",
|
|
1747
|
+
center: "left-full top-1/2 -translate-y-1/2 ml-2",
|
|
1748
|
+
end: "left-full bottom-0 ml-2"
|
|
1749
|
+
}
|
|
1750
|
+
};
|
|
1751
|
+
var Popover = ({
|
|
1752
|
+
children,
|
|
1753
|
+
trigger,
|
|
1754
|
+
position = "bottom",
|
|
1755
|
+
align = "center",
|
|
1756
|
+
open: controlledOpen,
|
|
1757
|
+
onOpenChange,
|
|
1758
|
+
closeOnClickOutside = true
|
|
1759
|
+
}) => {
|
|
1760
|
+
const [internalOpen, setInternalOpen] = useState6(false);
|
|
1761
|
+
const isControlled = controlledOpen !== void 0;
|
|
1762
|
+
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
1763
|
+
const containerRef = useRef3(null);
|
|
1764
|
+
const baseId = useId();
|
|
1765
|
+
const setIsOpen = useCallback6(
|
|
1766
|
+
(newOpen) => {
|
|
1767
|
+
if (!isControlled) {
|
|
1768
|
+
setInternalOpen(newOpen);
|
|
1769
|
+
}
|
|
1770
|
+
onOpenChange?.(newOpen);
|
|
1771
|
+
},
|
|
1772
|
+
[isControlled, onOpenChange]
|
|
1773
|
+
);
|
|
1774
|
+
useEffect4(() => {
|
|
1775
|
+
if (!isOpen || !closeOnClickOutside) return;
|
|
1776
|
+
const handleClickOutside = (e) => {
|
|
1777
|
+
if (containerRef.current && !containerRef.current.contains(e.target)) {
|
|
1778
|
+
setIsOpen(false);
|
|
1779
|
+
}
|
|
1780
|
+
};
|
|
1781
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
1782
|
+
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
1783
|
+
}, [isOpen, closeOnClickOutside, setIsOpen]);
|
|
1784
|
+
useEffect4(() => {
|
|
1785
|
+
if (!isOpen) return;
|
|
1786
|
+
const handleEscape = (e) => {
|
|
1787
|
+
if (e.key === "Escape") {
|
|
1788
|
+
setIsOpen(false);
|
|
1789
|
+
}
|
|
1790
|
+
};
|
|
1791
|
+
document.addEventListener("keydown", handleEscape);
|
|
1792
|
+
return () => document.removeEventListener("keydown", handleEscape);
|
|
1793
|
+
}, [isOpen, setIsOpen]);
|
|
1794
|
+
const handleTriggerClick = () => {
|
|
1795
|
+
setIsOpen(!isOpen);
|
|
1796
|
+
};
|
|
1797
|
+
const triggerElement = React30.cloneElement(trigger, {
|
|
1798
|
+
onClick: handleTriggerClick,
|
|
1799
|
+
"aria-haspopup": "dialog",
|
|
1800
|
+
"aria-expanded": isOpen,
|
|
1801
|
+
"aria-controls": `${baseId}-popover`,
|
|
1802
|
+
id: `${baseId}-trigger`
|
|
1803
|
+
});
|
|
1804
|
+
return /* @__PURE__ */ React30.createElement("div", { ref: containerRef, className: "relative inline-block" }, triggerElement, isOpen && /* @__PURE__ */ React30.createElement(
|
|
1805
|
+
"div",
|
|
1806
|
+
{
|
|
1807
|
+
id: `${baseId}-popover`,
|
|
1808
|
+
role: "dialog",
|
|
1809
|
+
"aria-labelledby": `${baseId}-trigger`,
|
|
1810
|
+
className: cx(
|
|
1811
|
+
"absolute z-50 min-w-48 p-4",
|
|
1812
|
+
"bg-charcoal border border-ash shadow-lg",
|
|
1813
|
+
"animate-fade-in",
|
|
1814
|
+
POSITION_CLASSES2[position][align]
|
|
1815
|
+
)
|
|
1816
|
+
},
|
|
1817
|
+
children
|
|
1818
|
+
));
|
|
1819
|
+
};
|
|
1820
|
+
Popover.displayName = "Popover";
|
|
1821
|
+
|
|
1822
|
+
// src/components/Dialog.tsx
|
|
1823
|
+
import React31, { useCallback as useCallback7 } from "react";
|
|
1824
|
+
var ConfirmDialog = ({
|
|
1825
|
+
title = "Confirm",
|
|
1826
|
+
description,
|
|
1827
|
+
confirmText = "Confirm",
|
|
1828
|
+
cancelText = "Cancel",
|
|
1829
|
+
onConfirm,
|
|
1830
|
+
onCancel,
|
|
1831
|
+
onClose,
|
|
1832
|
+
confirmVariant = "important",
|
|
1833
|
+
isLoading = false,
|
|
1834
|
+
...props
|
|
1835
|
+
}) => {
|
|
1836
|
+
const handleCancel = useCallback7(() => {
|
|
1837
|
+
onCancel?.();
|
|
1838
|
+
onClose();
|
|
1839
|
+
}, [onCancel, onClose]);
|
|
1840
|
+
const handleConfirm = useCallback7(async () => {
|
|
1841
|
+
await onConfirm();
|
|
1842
|
+
onClose();
|
|
1843
|
+
}, [onConfirm, onClose]);
|
|
1844
|
+
return /* @__PURE__ */ React31.createElement(Modal, { title, onClose, ...props }, description && /* @__PURE__ */ React31.createElement("p", { className: "text-sm text-silver mb-6" }, description), /* @__PURE__ */ React31.createElement("div", { className: "flex justify-end gap-3" }, /* @__PURE__ */ React31.createElement(Button, { variant: "outlined", onClick: handleCancel, disabled: isLoading }, cancelText), /* @__PURE__ */ React31.createElement(
|
|
1845
|
+
Button,
|
|
1846
|
+
{
|
|
1847
|
+
variant: confirmVariant,
|
|
1848
|
+
onClick: handleConfirm,
|
|
1849
|
+
loading: isLoading
|
|
1850
|
+
},
|
|
1851
|
+
confirmText
|
|
1852
|
+
)));
|
|
1853
|
+
};
|
|
1854
|
+
ConfirmDialog.displayName = "ConfirmDialog";
|
|
1855
|
+
var AlertDialog = ({
|
|
1856
|
+
title = "Alert",
|
|
1857
|
+
description,
|
|
1858
|
+
acknowledgeText = "OK",
|
|
1859
|
+
variant = "default",
|
|
1860
|
+
onClose,
|
|
1861
|
+
...props
|
|
1862
|
+
}) => {
|
|
1863
|
+
const titleClass = cx(
|
|
1864
|
+
variant === "warning" && "text-warning",
|
|
1865
|
+
variant === "error" && "text-error"
|
|
1866
|
+
);
|
|
1867
|
+
return /* @__PURE__ */ React31.createElement(Modal, { onClose, ...props }, /* @__PURE__ */ React31.createElement("h3", { className: cx("text-xl font-semibold mb-2", titleClass) }, title), description && /* @__PURE__ */ React31.createElement("p", { className: "text-sm text-silver mb-6" }, description), /* @__PURE__ */ React31.createElement("div", { className: "flex justify-end" }, /* @__PURE__ */ React31.createElement(Button, { variant: "primary", onClick: onClose }, acknowledgeText)));
|
|
1868
|
+
};
|
|
1869
|
+
AlertDialog.displayName = "AlertDialog";
|
|
1870
|
+
var PromptDialog = ({
|
|
1871
|
+
title = "Enter Value",
|
|
1872
|
+
description,
|
|
1873
|
+
placeholder,
|
|
1874
|
+
defaultValue = "",
|
|
1875
|
+
submitText = "Submit",
|
|
1876
|
+
cancelText = "Cancel",
|
|
1877
|
+
onSubmit,
|
|
1878
|
+
onCancel,
|
|
1879
|
+
onClose,
|
|
1880
|
+
isLoading = false,
|
|
1881
|
+
...props
|
|
1882
|
+
}) => {
|
|
1883
|
+
const [value, setValue] = React31.useState(defaultValue);
|
|
1884
|
+
const handleCancel = useCallback7(() => {
|
|
1885
|
+
onCancel?.();
|
|
1886
|
+
onClose();
|
|
1887
|
+
}, [onCancel, onClose]);
|
|
1888
|
+
const handleSubmit = useCallback7(
|
|
1889
|
+
async (e) => {
|
|
1890
|
+
e.preventDefault();
|
|
1891
|
+
await onSubmit(value);
|
|
1892
|
+
onClose();
|
|
1893
|
+
},
|
|
1894
|
+
[onSubmit, value, onClose]
|
|
1895
|
+
);
|
|
1896
|
+
return /* @__PURE__ */ React31.createElement(Modal, { title, onClose, ...props }, /* @__PURE__ */ React31.createElement("form", { onSubmit: handleSubmit }, description && /* @__PURE__ */ React31.createElement("p", { className: "text-sm text-silver mb-4" }, description), /* @__PURE__ */ React31.createElement(
|
|
1897
|
+
"input",
|
|
1898
|
+
{
|
|
1899
|
+
type: "text",
|
|
1900
|
+
value,
|
|
1901
|
+
onChange: (e) => setValue(e.target.value),
|
|
1902
|
+
placeholder,
|
|
1903
|
+
className: cx(
|
|
1904
|
+
"w-full px-3 py-2 bg-graphite border border-ash",
|
|
1905
|
+
"text-white placeholder:text-zinc",
|
|
1906
|
+
"focus:border-gold focus:ring-1 focus:ring-gold focus:outline-none",
|
|
1907
|
+
"mb-6"
|
|
1908
|
+
),
|
|
1909
|
+
autoFocus: true
|
|
1910
|
+
}
|
|
1911
|
+
), /* @__PURE__ */ React31.createElement("div", { className: "flex justify-end gap-3" }, /* @__PURE__ */ React31.createElement(
|
|
1912
|
+
Button,
|
|
1913
|
+
{
|
|
1914
|
+
type: "button",
|
|
1915
|
+
variant: "outlined",
|
|
1916
|
+
onClick: handleCancel,
|
|
1917
|
+
disabled: isLoading
|
|
1918
|
+
},
|
|
1919
|
+
cancelText
|
|
1920
|
+
), /* @__PURE__ */ React31.createElement(Button, { type: "submit", variant: "important", loading: isLoading }, submitText))));
|
|
1921
|
+
};
|
|
1922
|
+
PromptDialog.displayName = "PromptDialog";
|
|
1923
|
+
|
|
1924
|
+
// src/components/Tabs.tsx
|
|
1925
|
+
import React32, { createContext as createContext2, useContext as useContext2, useState as useState7, useCallback as useCallback8, useId as useId2 } from "react";
|
|
1926
|
+
var TabsContext = createContext2(null);
|
|
1927
|
+
function useTabsContext() {
|
|
1928
|
+
const context = useContext2(TabsContext);
|
|
1929
|
+
if (!context) {
|
|
1930
|
+
throw new Error("Tabs components must be used within a Tabs provider");
|
|
1931
|
+
}
|
|
1932
|
+
return context;
|
|
1933
|
+
}
|
|
1934
|
+
var Tabs = React32.forwardRef(
|
|
1935
|
+
({ defaultValue, value, onValueChange, children, className, ...props }, ref) => {
|
|
1936
|
+
const [internalValue, setInternalValue] = useState7(defaultValue ?? "");
|
|
1937
|
+
const isControlled = value !== void 0;
|
|
1938
|
+
const activeTab = isControlled ? value : internalValue;
|
|
1939
|
+
const baseId = useId2();
|
|
1940
|
+
const setActiveTab = useCallback8(
|
|
1941
|
+
(id) => {
|
|
1942
|
+
if (!isControlled) {
|
|
1943
|
+
setInternalValue(id);
|
|
1944
|
+
}
|
|
1945
|
+
onValueChange?.(id);
|
|
1946
|
+
},
|
|
1947
|
+
[isControlled, onValueChange]
|
|
1948
|
+
);
|
|
1949
|
+
return /* @__PURE__ */ React32.createElement(TabsContext.Provider, { value: { activeTab, setActiveTab, baseId } }, /* @__PURE__ */ React32.createElement("div", { ref, className: cx("w-full", className), ...props }, children));
|
|
1950
|
+
}
|
|
1951
|
+
);
|
|
1952
|
+
Tabs.displayName = "Tabs";
|
|
1953
|
+
var TabList = React32.forwardRef(
|
|
1954
|
+
({ children, className, ...props }, ref) => {
|
|
1955
|
+
return /* @__PURE__ */ React32.createElement(
|
|
1956
|
+
"div",
|
|
1957
|
+
{
|
|
1958
|
+
ref,
|
|
1959
|
+
role: "tablist",
|
|
1960
|
+
className: cx(
|
|
1961
|
+
"flex border-b border-ash",
|
|
1962
|
+
className
|
|
1963
|
+
),
|
|
1964
|
+
...props
|
|
1965
|
+
},
|
|
1966
|
+
children
|
|
1967
|
+
);
|
|
1968
|
+
}
|
|
1969
|
+
);
|
|
1970
|
+
TabList.displayName = "TabList";
|
|
1971
|
+
var Tab = React32.forwardRef(
|
|
1972
|
+
({ value, children, className, disabled, ...props }, ref) => {
|
|
1973
|
+
const { activeTab, setActiveTab, baseId } = useTabsContext();
|
|
1974
|
+
const isActive = activeTab === value;
|
|
1975
|
+
const panelId = `${baseId}-panel-${value}`;
|
|
1976
|
+
const tabId = `${baseId}-tab-${value}`;
|
|
1977
|
+
return /* @__PURE__ */ React32.createElement(
|
|
1978
|
+
"button",
|
|
1979
|
+
{
|
|
1980
|
+
ref,
|
|
1981
|
+
id: tabId,
|
|
1982
|
+
type: "button",
|
|
1983
|
+
role: "tab",
|
|
1984
|
+
"aria-selected": isActive,
|
|
1985
|
+
"aria-controls": panelId,
|
|
1986
|
+
tabIndex: isActive ? 0 : -1,
|
|
1987
|
+
disabled,
|
|
1988
|
+
onClick: () => setActiveTab(value),
|
|
1989
|
+
className: cx(
|
|
1990
|
+
"px-4 py-2 text-sm font-medium transition-all duration-fast",
|
|
1991
|
+
"border-b-2 -mb-px",
|
|
1992
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-inset",
|
|
1993
|
+
isActive ? "border-gold text-gold" : "border-transparent text-silver hover:text-white hover:border-ash",
|
|
1994
|
+
disabled && "opacity-50 cursor-not-allowed",
|
|
1995
|
+
className
|
|
1996
|
+
),
|
|
1997
|
+
...props
|
|
1998
|
+
},
|
|
1999
|
+
children
|
|
2000
|
+
);
|
|
2001
|
+
}
|
|
2002
|
+
);
|
|
2003
|
+
Tab.displayName = "Tab";
|
|
2004
|
+
var TabPanel = React32.forwardRef(
|
|
2005
|
+
({ value, forceMount = false, children, className, ...props }, ref) => {
|
|
2006
|
+
const { activeTab, baseId } = useTabsContext();
|
|
2007
|
+
const isActive = activeTab === value;
|
|
2008
|
+
const panelId = `${baseId}-panel-${value}`;
|
|
2009
|
+
const tabId = `${baseId}-tab-${value}`;
|
|
2010
|
+
if (!isActive && !forceMount) {
|
|
2011
|
+
return null;
|
|
2012
|
+
}
|
|
2013
|
+
return /* @__PURE__ */ React32.createElement(
|
|
2014
|
+
"div",
|
|
2015
|
+
{
|
|
2016
|
+
ref,
|
|
2017
|
+
id: panelId,
|
|
2018
|
+
role: "tabpanel",
|
|
2019
|
+
"aria-labelledby": tabId,
|
|
2020
|
+
tabIndex: 0,
|
|
2021
|
+
hidden: !isActive,
|
|
2022
|
+
className: cx(
|
|
2023
|
+
"pt-4 focus-visible:outline-none",
|
|
2024
|
+
!isActive && "hidden",
|
|
2025
|
+
className
|
|
2026
|
+
),
|
|
2027
|
+
...props
|
|
2028
|
+
},
|
|
2029
|
+
children
|
|
2030
|
+
);
|
|
2031
|
+
}
|
|
2032
|
+
);
|
|
2033
|
+
TabPanel.displayName = "TabPanel";
|
|
2034
|
+
|
|
2035
|
+
// src/components/Accordion.tsx
|
|
2036
|
+
import React33, { createContext as createContext3, useContext as useContext3, useState as useState8, useCallback as useCallback9, useId as useId3 } from "react";
|
|
2037
|
+
import { ChevronDown } from "lucide-react";
|
|
2038
|
+
var AccordionContext = createContext3(null);
|
|
2039
|
+
function useAccordionContext() {
|
|
2040
|
+
const context = useContext3(AccordionContext);
|
|
2041
|
+
if (!context) {
|
|
2042
|
+
throw new Error("Accordion components must be used within an Accordion provider");
|
|
2043
|
+
}
|
|
2044
|
+
return context;
|
|
2045
|
+
}
|
|
2046
|
+
var Accordion = React33.forwardRef(
|
|
2047
|
+
({ type = "single", defaultValue, value, onValueChange, children, className, ...props }, ref) => {
|
|
2048
|
+
const [internalValue, setInternalValue] = useState8(() => {
|
|
2049
|
+
if (defaultValue) {
|
|
2050
|
+
return new Set(Array.isArray(defaultValue) ? defaultValue : [defaultValue]);
|
|
2051
|
+
}
|
|
2052
|
+
return /* @__PURE__ */ new Set();
|
|
2053
|
+
});
|
|
2054
|
+
const isControlled = value !== void 0;
|
|
2055
|
+
const expandedItems = isControlled ? new Set(Array.isArray(value) ? value : [value]) : internalValue;
|
|
2056
|
+
const toggleItem = useCallback9(
|
|
2057
|
+
(id) => {
|
|
2058
|
+
const newSet = new Set(expandedItems);
|
|
2059
|
+
if (newSet.has(id)) {
|
|
2060
|
+
newSet.delete(id);
|
|
2061
|
+
} else {
|
|
2062
|
+
if (type === "single") {
|
|
2063
|
+
newSet.clear();
|
|
2064
|
+
}
|
|
2065
|
+
newSet.add(id);
|
|
2066
|
+
}
|
|
2067
|
+
if (!isControlled) {
|
|
2068
|
+
setInternalValue(newSet);
|
|
2069
|
+
}
|
|
2070
|
+
const newValue = Array.from(newSet);
|
|
2071
|
+
onValueChange?.(type === "single" ? newValue[0] ?? "" : newValue);
|
|
2072
|
+
},
|
|
2073
|
+
[expandedItems, type, isControlled, onValueChange]
|
|
2074
|
+
);
|
|
2075
|
+
return /* @__PURE__ */ React33.createElement(AccordionContext.Provider, { value: { expandedItems, toggleItem, type } }, /* @__PURE__ */ React33.createElement(
|
|
2076
|
+
"div",
|
|
2077
|
+
{
|
|
2078
|
+
ref,
|
|
2079
|
+
className: cx("divide-y divide-ash border border-ash", className),
|
|
2080
|
+
...props
|
|
2081
|
+
},
|
|
2082
|
+
children
|
|
2083
|
+
));
|
|
2084
|
+
}
|
|
2085
|
+
);
|
|
2086
|
+
Accordion.displayName = "Accordion";
|
|
2087
|
+
var AccordionItemContext = createContext3(null);
|
|
2088
|
+
var AccordionItem = React33.forwardRef(
|
|
2089
|
+
({ value, disabled = false, children, className, ...props }, ref) => {
|
|
2090
|
+
return /* @__PURE__ */ React33.createElement(AccordionItemContext.Provider, { value: { value, disabled } }, /* @__PURE__ */ React33.createElement(
|
|
2091
|
+
"div",
|
|
2092
|
+
{
|
|
2093
|
+
ref,
|
|
2094
|
+
"data-state": useAccordionContext().expandedItems.has(value) ? "open" : "closed",
|
|
2095
|
+
className: cx("bg-charcoal", className),
|
|
2096
|
+
...props
|
|
2097
|
+
},
|
|
2098
|
+
children
|
|
2099
|
+
));
|
|
2100
|
+
}
|
|
2101
|
+
);
|
|
2102
|
+
AccordionItem.displayName = "AccordionItem";
|
|
2103
|
+
var AccordionTrigger = React33.forwardRef(
|
|
2104
|
+
({ children, className, ...props }, ref) => {
|
|
2105
|
+
const { expandedItems, toggleItem } = useAccordionContext();
|
|
2106
|
+
const itemContext = useContext3(AccordionItemContext);
|
|
2107
|
+
const baseId = useId3();
|
|
2108
|
+
if (!itemContext) {
|
|
2109
|
+
throw new Error("AccordionTrigger must be used within an AccordionItem");
|
|
2110
|
+
}
|
|
2111
|
+
const { value, disabled } = itemContext;
|
|
2112
|
+
const isExpanded = expandedItems.has(value);
|
|
2113
|
+
return /* @__PURE__ */ React33.createElement("h3", { className: "m-0" }, /* @__PURE__ */ React33.createElement(
|
|
2114
|
+
"button",
|
|
2115
|
+
{
|
|
2116
|
+
ref,
|
|
2117
|
+
type: "button",
|
|
2118
|
+
id: `${baseId}-trigger-${value}`,
|
|
2119
|
+
"aria-expanded": isExpanded,
|
|
2120
|
+
"aria-controls": `${baseId}-content-${value}`,
|
|
2121
|
+
disabled,
|
|
2122
|
+
onClick: () => toggleItem(value),
|
|
2123
|
+
className: cx(
|
|
2124
|
+
"flex w-full items-center justify-between px-4 py-3",
|
|
2125
|
+
"text-left text-sm font-medium text-white",
|
|
2126
|
+
"transition-colors duration-fast",
|
|
2127
|
+
"hover:bg-graphite",
|
|
2128
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-inset",
|
|
2129
|
+
disabled && "opacity-50 cursor-not-allowed",
|
|
2130
|
+
className
|
|
2131
|
+
),
|
|
2132
|
+
...props
|
|
2133
|
+
},
|
|
2134
|
+
/* @__PURE__ */ React33.createElement("span", null, children),
|
|
2135
|
+
/* @__PURE__ */ React33.createElement(
|
|
2136
|
+
ChevronDown,
|
|
2137
|
+
{
|
|
2138
|
+
className: cx(
|
|
2139
|
+
"h-4 w-4 text-silver transition-transform duration-200",
|
|
2140
|
+
isExpanded && "rotate-180"
|
|
2141
|
+
)
|
|
2142
|
+
}
|
|
2143
|
+
)
|
|
2144
|
+
));
|
|
2145
|
+
}
|
|
2146
|
+
);
|
|
2147
|
+
AccordionTrigger.displayName = "AccordionTrigger";
|
|
2148
|
+
var AccordionContent = React33.forwardRef(
|
|
2149
|
+
({ children, className, ...props }, ref) => {
|
|
2150
|
+
const { expandedItems } = useAccordionContext();
|
|
2151
|
+
const itemContext = useContext3(AccordionItemContext);
|
|
2152
|
+
const baseId = useId3();
|
|
2153
|
+
if (!itemContext) {
|
|
2154
|
+
throw new Error("AccordionContent must be used within an AccordionItem");
|
|
2155
|
+
}
|
|
2156
|
+
const { value } = itemContext;
|
|
2157
|
+
const isExpanded = expandedItems.has(value);
|
|
2158
|
+
return /* @__PURE__ */ React33.createElement(
|
|
2159
|
+
"div",
|
|
2160
|
+
{
|
|
2161
|
+
ref,
|
|
2162
|
+
id: `${baseId}-content-${value}`,
|
|
2163
|
+
role: "region",
|
|
2164
|
+
"aria-labelledby": `${baseId}-trigger-${value}`,
|
|
2165
|
+
hidden: !isExpanded,
|
|
2166
|
+
className: cx(
|
|
2167
|
+
"overflow-hidden transition-all duration-200",
|
|
2168
|
+
isExpanded ? "animate-fade-in" : "hidden",
|
|
2169
|
+
className
|
|
2170
|
+
),
|
|
2171
|
+
...props
|
|
2172
|
+
},
|
|
2173
|
+
/* @__PURE__ */ React33.createElement("div", { className: "px-4 pb-4 text-sm text-silver" }, children)
|
|
2174
|
+
);
|
|
2175
|
+
}
|
|
2176
|
+
);
|
|
2177
|
+
AccordionContent.displayName = "AccordionContent";
|
|
2178
|
+
|
|
2179
|
+
// src/components/Menu.tsx
|
|
2180
|
+
import React34, {
|
|
2181
|
+
createContext as createContext4,
|
|
2182
|
+
useContext as useContext4,
|
|
2183
|
+
useState as useState9,
|
|
2184
|
+
useCallback as useCallback10,
|
|
2185
|
+
useRef as useRef4,
|
|
2186
|
+
useEffect as useEffect5,
|
|
2187
|
+
useId as useId4
|
|
2188
|
+
} from "react";
|
|
2189
|
+
var MenuContext = createContext4(null);
|
|
2190
|
+
function useMenuContext() {
|
|
2191
|
+
const context = useContext4(MenuContext);
|
|
2192
|
+
if (!context) {
|
|
2193
|
+
throw new Error("Menu components must be used within a Menu provider");
|
|
2194
|
+
}
|
|
2195
|
+
return context;
|
|
2196
|
+
}
|
|
2197
|
+
var Menu = ({ children, open, onOpenChange }) => {
|
|
2198
|
+
const [internalOpen, setInternalOpen] = useState9(false);
|
|
2199
|
+
const isControlled = open !== void 0;
|
|
2200
|
+
const isOpen = isControlled ? open : internalOpen;
|
|
2201
|
+
const baseId = useId4();
|
|
2202
|
+
const setIsOpen = useCallback10(
|
|
2203
|
+
(newOpen) => {
|
|
2204
|
+
if (!isControlled) {
|
|
2205
|
+
setInternalOpen(newOpen);
|
|
2206
|
+
}
|
|
2207
|
+
onOpenChange?.(newOpen);
|
|
2208
|
+
},
|
|
2209
|
+
[isControlled, onOpenChange]
|
|
2210
|
+
);
|
|
2211
|
+
return /* @__PURE__ */ React34.createElement(
|
|
2212
|
+
MenuContext.Provider,
|
|
2213
|
+
{
|
|
2214
|
+
value: {
|
|
2215
|
+
isOpen,
|
|
2216
|
+
setIsOpen,
|
|
2217
|
+
triggerId: `${baseId}-trigger`,
|
|
2218
|
+
menuId: `${baseId}-menu`
|
|
2219
|
+
}
|
|
2220
|
+
},
|
|
2221
|
+
/* @__PURE__ */ React34.createElement("div", { className: "relative inline-block" }, children)
|
|
2222
|
+
);
|
|
2223
|
+
};
|
|
2224
|
+
Menu.displayName = "Menu";
|
|
2225
|
+
var MenuTrigger = React34.forwardRef(
|
|
2226
|
+
({ children, className, asChild, ...props }, ref) => {
|
|
2227
|
+
const { isOpen, setIsOpen, triggerId, menuId } = useMenuContext();
|
|
2228
|
+
const handleClick = (e) => {
|
|
2229
|
+
e.preventDefault();
|
|
2230
|
+
setIsOpen(!isOpen);
|
|
2231
|
+
props.onClick?.(e);
|
|
2232
|
+
};
|
|
2233
|
+
return /* @__PURE__ */ React34.createElement(
|
|
2234
|
+
"button",
|
|
2235
|
+
{
|
|
2236
|
+
ref,
|
|
2237
|
+
id: triggerId,
|
|
2238
|
+
type: "button",
|
|
2239
|
+
"aria-haspopup": "menu",
|
|
2240
|
+
"aria-expanded": isOpen,
|
|
2241
|
+
"aria-controls": menuId,
|
|
2242
|
+
onClick: handleClick,
|
|
2243
|
+
className: cx(
|
|
2244
|
+
"inline-flex items-center justify-center",
|
|
2245
|
+
className
|
|
2246
|
+
),
|
|
2247
|
+
...props
|
|
2248
|
+
},
|
|
2249
|
+
children
|
|
2250
|
+
);
|
|
2251
|
+
}
|
|
2252
|
+
);
|
|
2253
|
+
MenuTrigger.displayName = "MenuTrigger";
|
|
2254
|
+
var MenuContent = React34.forwardRef(
|
|
2255
|
+
({ children, className, align = "start", side = "bottom", ...props }, ref) => {
|
|
2256
|
+
const { isOpen, setIsOpen, triggerId, menuId } = useMenuContext();
|
|
2257
|
+
const menuRef = useRef4(null);
|
|
2258
|
+
useEffect5(() => {
|
|
2259
|
+
if (!isOpen) return;
|
|
2260
|
+
const handleClickOutside = (e) => {
|
|
2261
|
+
const trigger = document.getElementById(triggerId);
|
|
2262
|
+
if (menuRef.current && !menuRef.current.contains(e.target) && trigger && !trigger.contains(e.target)) {
|
|
2263
|
+
setIsOpen(false);
|
|
2264
|
+
}
|
|
2265
|
+
};
|
|
2266
|
+
const handleEscape = (e) => {
|
|
2267
|
+
if (e.key === "Escape") {
|
|
2268
|
+
setIsOpen(false);
|
|
2269
|
+
}
|
|
2270
|
+
};
|
|
2271
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
2272
|
+
document.addEventListener("keydown", handleEscape);
|
|
2273
|
+
return () => {
|
|
2274
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
2275
|
+
document.removeEventListener("keydown", handleEscape);
|
|
2276
|
+
};
|
|
2277
|
+
}, [isOpen, setIsOpen, triggerId]);
|
|
2278
|
+
if (!isOpen) return null;
|
|
2279
|
+
const alignmentClasses = {
|
|
2280
|
+
start: "left-0",
|
|
2281
|
+
center: "left-1/2 -translate-x-1/2",
|
|
2282
|
+
end: "right-0"
|
|
2283
|
+
};
|
|
2284
|
+
const sideClasses = {
|
|
2285
|
+
top: "bottom-full mb-1",
|
|
2286
|
+
bottom: "top-full mt-1"
|
|
2287
|
+
};
|
|
2288
|
+
return /* @__PURE__ */ React34.createElement(
|
|
2289
|
+
"div",
|
|
2290
|
+
{
|
|
2291
|
+
ref: (node) => {
|
|
2292
|
+
menuRef.current = node;
|
|
2293
|
+
if (typeof ref === "function") ref(node);
|
|
2294
|
+
else if (ref) ref.current = node;
|
|
2295
|
+
},
|
|
2296
|
+
id: menuId,
|
|
2297
|
+
role: "menu",
|
|
2298
|
+
"aria-labelledby": triggerId,
|
|
2299
|
+
className: cx(
|
|
2300
|
+
"absolute z-50 min-w-40 py-1",
|
|
2301
|
+
"bg-charcoal border border-ash shadow-lg",
|
|
2302
|
+
"animate-fade-in",
|
|
2303
|
+
alignmentClasses[align],
|
|
2304
|
+
sideClasses[side],
|
|
2305
|
+
className
|
|
2306
|
+
),
|
|
2307
|
+
...props
|
|
2308
|
+
},
|
|
2309
|
+
children
|
|
2310
|
+
);
|
|
2311
|
+
}
|
|
2312
|
+
);
|
|
2313
|
+
MenuContent.displayName = "MenuContent";
|
|
2314
|
+
var MenuItem = React34.forwardRef(
|
|
2315
|
+
({ children, className, icon, destructive, disabled, onClick, ...props }, ref) => {
|
|
2316
|
+
const { setIsOpen } = useMenuContext();
|
|
2317
|
+
const handleClick = (e) => {
|
|
2318
|
+
if (disabled) return;
|
|
2319
|
+
onClick?.(e);
|
|
2320
|
+
setIsOpen(false);
|
|
2321
|
+
};
|
|
2322
|
+
return /* @__PURE__ */ React34.createElement(
|
|
2323
|
+
"button",
|
|
2324
|
+
{
|
|
2325
|
+
ref,
|
|
2326
|
+
type: "button",
|
|
2327
|
+
role: "menuitem",
|
|
2328
|
+
disabled,
|
|
2329
|
+
onClick: handleClick,
|
|
2330
|
+
className: cx(
|
|
2331
|
+
"flex w-full items-center gap-2 px-3 py-2 text-sm text-left",
|
|
2332
|
+
"transition-colors duration-fast",
|
|
2333
|
+
destructive ? "text-error hover:bg-error/10" : "text-white hover:bg-graphite",
|
|
2334
|
+
"focus-visible:outline-none focus-visible:bg-graphite",
|
|
2335
|
+
disabled && "opacity-50 cursor-not-allowed",
|
|
2336
|
+
className
|
|
2337
|
+
),
|
|
2338
|
+
...props
|
|
2339
|
+
},
|
|
2340
|
+
icon && /* @__PURE__ */ React34.createElement("span", { className: "w-4 h-4 shrink-0" }, icon),
|
|
2341
|
+
children
|
|
2342
|
+
);
|
|
2343
|
+
}
|
|
2344
|
+
);
|
|
2345
|
+
MenuItem.displayName = "MenuItem";
|
|
2346
|
+
var MenuSeparator = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React34.createElement(
|
|
2347
|
+
"div",
|
|
2348
|
+
{
|
|
2349
|
+
ref,
|
|
2350
|
+
role: "separator",
|
|
2351
|
+
className: cx("my-1 h-px bg-ash", className),
|
|
2352
|
+
...props
|
|
2353
|
+
}
|
|
2354
|
+
));
|
|
2355
|
+
MenuSeparator.displayName = "MenuSeparator";
|
|
2356
|
+
var MenuLabel = React34.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React34.createElement(
|
|
2357
|
+
"div",
|
|
2358
|
+
{
|
|
2359
|
+
ref,
|
|
2360
|
+
className: cx("px-3 py-1.5 text-xs font-medium text-silver", className),
|
|
2361
|
+
...props
|
|
2362
|
+
},
|
|
2363
|
+
children
|
|
2364
|
+
));
|
|
2365
|
+
MenuLabel.displayName = "MenuLabel";
|
|
2366
|
+
|
|
2367
|
+
// src/components/Navbar.tsx
|
|
2368
|
+
import React35 from "react";
|
|
2369
|
+
var Navbar = React35.forwardRef(
|
|
2370
|
+
({ fixed = false, bordered = true, className, children, ...props }, ref) => {
|
|
2371
|
+
return /* @__PURE__ */ React35.createElement(
|
|
2372
|
+
"nav",
|
|
2373
|
+
{
|
|
2374
|
+
ref,
|
|
2375
|
+
className: cx(
|
|
2376
|
+
"w-full bg-charcoal px-4 py-3",
|
|
2377
|
+
bordered && "border-b border-ash",
|
|
2378
|
+
fixed && "fixed top-0 left-0 right-0 z-40",
|
|
2379
|
+
className
|
|
2380
|
+
),
|
|
2381
|
+
...props
|
|
2382
|
+
},
|
|
2383
|
+
/* @__PURE__ */ React35.createElement("div", { className: "flex items-center justify-between" }, children)
|
|
2384
|
+
);
|
|
2385
|
+
}
|
|
2386
|
+
);
|
|
2387
|
+
Navbar.displayName = "Navbar";
|
|
2388
|
+
var NavbarBrand = React35.forwardRef(
|
|
2389
|
+
({ className, children, ...props }, ref) => {
|
|
2390
|
+
return /* @__PURE__ */ React35.createElement(
|
|
2391
|
+
"div",
|
|
2392
|
+
{
|
|
2393
|
+
ref,
|
|
2394
|
+
className: cx("flex items-center gap-2", className),
|
|
2395
|
+
...props
|
|
2396
|
+
},
|
|
2397
|
+
children
|
|
2398
|
+
);
|
|
2399
|
+
}
|
|
2400
|
+
);
|
|
2401
|
+
NavbarBrand.displayName = "NavbarBrand";
|
|
2402
|
+
var NavbarContent = React35.forwardRef(
|
|
2403
|
+
({ position = "center", className, children, ...props }, ref) => {
|
|
2404
|
+
const positionClasses = {
|
|
2405
|
+
start: "mr-auto",
|
|
2406
|
+
center: "mx-auto",
|
|
2407
|
+
end: "ml-auto"
|
|
2408
|
+
};
|
|
2409
|
+
return /* @__PURE__ */ React35.createElement(
|
|
2410
|
+
"div",
|
|
2411
|
+
{
|
|
2412
|
+
ref,
|
|
2413
|
+
className: cx(
|
|
2414
|
+
"flex items-center gap-4",
|
|
2415
|
+
positionClasses[position],
|
|
2416
|
+
className
|
|
2417
|
+
),
|
|
2418
|
+
...props
|
|
2419
|
+
},
|
|
2420
|
+
children
|
|
2421
|
+
);
|
|
2422
|
+
}
|
|
2423
|
+
);
|
|
2424
|
+
NavbarContent.displayName = "NavbarContent";
|
|
2425
|
+
var NavbarItem = React35.forwardRef(
|
|
2426
|
+
({ active = false, className, children, ...props }, ref) => {
|
|
2427
|
+
return /* @__PURE__ */ React35.createElement(
|
|
2428
|
+
"div",
|
|
2429
|
+
{
|
|
2430
|
+
ref,
|
|
2431
|
+
className: cx(
|
|
2432
|
+
"flex items-center",
|
|
2433
|
+
className
|
|
2434
|
+
),
|
|
2435
|
+
...props
|
|
2436
|
+
},
|
|
2437
|
+
children
|
|
2438
|
+
);
|
|
2439
|
+
}
|
|
2440
|
+
);
|
|
2441
|
+
NavbarItem.displayName = "NavbarItem";
|
|
2442
|
+
var NavbarLink = React35.forwardRef(
|
|
2443
|
+
({ active = false, className, children, ...props }, ref) => {
|
|
2444
|
+
return /* @__PURE__ */ React35.createElement(
|
|
2445
|
+
"a",
|
|
2446
|
+
{
|
|
2447
|
+
ref,
|
|
2448
|
+
className: cx(
|
|
2449
|
+
"text-sm font-medium transition-colors duration-fast",
|
|
2450
|
+
active ? "text-gold" : "text-silver hover:text-white",
|
|
2451
|
+
className
|
|
2452
|
+
),
|
|
2453
|
+
...props
|
|
2454
|
+
},
|
|
2455
|
+
children
|
|
2456
|
+
);
|
|
2457
|
+
}
|
|
2458
|
+
);
|
|
2459
|
+
NavbarLink.displayName = "NavbarLink";
|
|
2460
|
+
var NavbarDivider = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React35.createElement(
|
|
2461
|
+
"div",
|
|
2462
|
+
{
|
|
2463
|
+
ref,
|
|
2464
|
+
className: cx("h-6 w-px bg-ash mx-2", className),
|
|
2465
|
+
...props
|
|
2466
|
+
}
|
|
2467
|
+
));
|
|
2468
|
+
NavbarDivider.displayName = "NavbarDivider";
|
|
2469
|
+
|
|
2470
|
+
// src/components/Breadcrumb.tsx
|
|
2471
|
+
import React36 from "react";
|
|
2472
|
+
import { ChevronRight } from "lucide-react";
|
|
2473
|
+
var Breadcrumb = React36.forwardRef(
|
|
2474
|
+
({ separator, className, children, ...props }, ref) => {
|
|
2475
|
+
const items = React36.Children.toArray(children);
|
|
2476
|
+
const defaultSeparator = /* @__PURE__ */ React36.createElement(ChevronRight, { className: "h-4 w-4 text-ash" });
|
|
2477
|
+
return /* @__PURE__ */ React36.createElement("nav", { ref, "aria-label": "Breadcrumb", className, ...props }, /* @__PURE__ */ React36.createElement("ol", { className: "flex items-center gap-2" }, items.map((child, index) => /* @__PURE__ */ React36.createElement("li", { key: index, className: "flex items-center gap-2" }, child, index < items.length - 1 && /* @__PURE__ */ React36.createElement("span", { "aria-hidden": "true" }, separator ?? defaultSeparator)))));
|
|
2478
|
+
}
|
|
2479
|
+
);
|
|
2480
|
+
Breadcrumb.displayName = "Breadcrumb";
|
|
2481
|
+
var BreadcrumbItem = React36.forwardRef(
|
|
2482
|
+
({ current = false, className, children, ...props }, ref) => {
|
|
2483
|
+
return /* @__PURE__ */ React36.createElement(
|
|
2484
|
+
"span",
|
|
2485
|
+
{
|
|
2486
|
+
ref,
|
|
2487
|
+
"aria-current": current ? "page" : void 0,
|
|
2488
|
+
className: cx(
|
|
2489
|
+
"text-sm",
|
|
2490
|
+
current ? "text-white font-medium" : "text-silver",
|
|
2491
|
+
className
|
|
2492
|
+
),
|
|
2493
|
+
...props
|
|
2494
|
+
},
|
|
2495
|
+
children
|
|
2496
|
+
);
|
|
2497
|
+
}
|
|
2498
|
+
);
|
|
2499
|
+
BreadcrumbItem.displayName = "BreadcrumbItem";
|
|
2500
|
+
var BreadcrumbLink = React36.forwardRef(
|
|
2501
|
+
({ className, children, ...props }, ref) => {
|
|
2502
|
+
return /* @__PURE__ */ React36.createElement(
|
|
2503
|
+
"a",
|
|
2504
|
+
{
|
|
2505
|
+
ref,
|
|
2506
|
+
className: cx(
|
|
2507
|
+
"text-sm text-silver hover:text-gold transition-colors duration-fast",
|
|
2508
|
+
className
|
|
2509
|
+
),
|
|
2510
|
+
...props
|
|
2511
|
+
},
|
|
2512
|
+
children
|
|
2513
|
+
);
|
|
2514
|
+
}
|
|
2515
|
+
);
|
|
2516
|
+
BreadcrumbLink.displayName = "BreadcrumbLink";
|
|
2517
|
+
|
|
2518
|
+
// src/components/Pagination.tsx
|
|
2519
|
+
import React37 from "react";
|
|
2520
|
+
import { ChevronLeft, ChevronRight as ChevronRight2, MoreHorizontal } from "lucide-react";
|
|
2521
|
+
function generatePagination(currentPage, totalPages, siblingCount) {
|
|
2522
|
+
const totalSlots = siblingCount * 2 + 5;
|
|
2523
|
+
if (totalPages <= totalSlots) {
|
|
2524
|
+
return Array.from({ length: totalPages }, (_, i) => i + 1);
|
|
2525
|
+
}
|
|
2526
|
+
const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
|
|
2527
|
+
const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
|
|
2528
|
+
const showLeftEllipsis = leftSiblingIndex > 2;
|
|
2529
|
+
const showRightEllipsis = rightSiblingIndex < totalPages - 1;
|
|
2530
|
+
if (!showLeftEllipsis && showRightEllipsis) {
|
|
2531
|
+
const leftItemCount = 3 + 2 * siblingCount;
|
|
2532
|
+
const leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1);
|
|
2533
|
+
return [...leftRange, "ellipsis", totalPages];
|
|
2534
|
+
}
|
|
2535
|
+
if (showLeftEllipsis && !showRightEllipsis) {
|
|
2536
|
+
const rightItemCount = 3 + 2 * siblingCount;
|
|
2537
|
+
const rightRange = Array.from(
|
|
2538
|
+
{ length: rightItemCount },
|
|
2539
|
+
(_, i) => totalPages - rightItemCount + i + 1
|
|
2540
|
+
);
|
|
2541
|
+
return [1, "ellipsis", ...rightRange];
|
|
2542
|
+
}
|
|
2543
|
+
const middleRange = Array.from(
|
|
2544
|
+
{ length: rightSiblingIndex - leftSiblingIndex + 1 },
|
|
2545
|
+
(_, i) => leftSiblingIndex + i
|
|
2546
|
+
);
|
|
2547
|
+
return [1, "ellipsis", ...middleRange, "ellipsis", totalPages];
|
|
2548
|
+
}
|
|
2549
|
+
var Pagination = React37.forwardRef(
|
|
2550
|
+
({
|
|
2551
|
+
page,
|
|
2552
|
+
totalPages,
|
|
2553
|
+
onPageChange,
|
|
2554
|
+
siblingCount = 1,
|
|
2555
|
+
showEdges = true,
|
|
2556
|
+
className,
|
|
2557
|
+
...props
|
|
2558
|
+
}, ref) => {
|
|
2559
|
+
const pages = generatePagination(page, totalPages, siblingCount);
|
|
2560
|
+
const buttonBaseClass = "flex items-center justify-center h-8 min-w-8 px-2 text-sm border border-ash transition-colors duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gold";
|
|
2561
|
+
return /* @__PURE__ */ React37.createElement(
|
|
2562
|
+
"nav",
|
|
2563
|
+
{
|
|
2564
|
+
ref,
|
|
2565
|
+
role: "navigation",
|
|
2566
|
+
"aria-label": "Pagination",
|
|
2567
|
+
className: cx("flex items-center gap-1", className),
|
|
2568
|
+
...props
|
|
2569
|
+
},
|
|
2570
|
+
/* @__PURE__ */ React37.createElement(
|
|
2571
|
+
"button",
|
|
2572
|
+
{
|
|
2573
|
+
type: "button",
|
|
2574
|
+
onClick: () => onPageChange(page - 1),
|
|
2575
|
+
disabled: page <= 1,
|
|
2576
|
+
"aria-label": "Go to previous page",
|
|
2577
|
+
className: cx(
|
|
2578
|
+
buttonBaseClass,
|
|
2579
|
+
"text-silver hover:text-white hover:border-gold",
|
|
2580
|
+
page <= 1 && "opacity-50 cursor-not-allowed hover:border-ash"
|
|
2581
|
+
)
|
|
2582
|
+
},
|
|
2583
|
+
/* @__PURE__ */ React37.createElement(ChevronLeft, { className: "h-4 w-4" })
|
|
2584
|
+
),
|
|
2585
|
+
pages.map(
|
|
2586
|
+
(pageNum, index) => pageNum === "ellipsis" ? /* @__PURE__ */ React37.createElement(
|
|
2587
|
+
"span",
|
|
2588
|
+
{
|
|
2589
|
+
key: `ellipsis-${index}`,
|
|
2590
|
+
className: "flex items-center justify-center h-8 w-8 text-silver"
|
|
2591
|
+
},
|
|
2592
|
+
/* @__PURE__ */ React37.createElement(MoreHorizontal, { className: "h-4 w-4" })
|
|
2593
|
+
) : /* @__PURE__ */ React37.createElement(
|
|
2594
|
+
"button",
|
|
2595
|
+
{
|
|
2596
|
+
key: pageNum,
|
|
2597
|
+
type: "button",
|
|
2598
|
+
onClick: () => onPageChange(pageNum),
|
|
2599
|
+
"aria-label": `Go to page ${pageNum}`,
|
|
2600
|
+
"aria-current": page === pageNum ? "page" : void 0,
|
|
2601
|
+
className: cx(
|
|
2602
|
+
buttonBaseClass,
|
|
2603
|
+
page === pageNum ? "bg-gold text-obsidian border-gold font-medium" : "text-silver hover:text-white hover:border-gold"
|
|
2604
|
+
)
|
|
2605
|
+
},
|
|
2606
|
+
pageNum
|
|
2607
|
+
)
|
|
2608
|
+
),
|
|
2609
|
+
/* @__PURE__ */ React37.createElement(
|
|
2610
|
+
"button",
|
|
2611
|
+
{
|
|
2612
|
+
type: "button",
|
|
2613
|
+
onClick: () => onPageChange(page + 1),
|
|
2614
|
+
disabled: page >= totalPages,
|
|
2615
|
+
"aria-label": "Go to next page",
|
|
2616
|
+
className: cx(
|
|
2617
|
+
buttonBaseClass,
|
|
2618
|
+
"text-silver hover:text-white hover:border-gold",
|
|
2619
|
+
page >= totalPages && "opacity-50 cursor-not-allowed hover:border-ash"
|
|
2620
|
+
)
|
|
2621
|
+
},
|
|
2622
|
+
/* @__PURE__ */ React37.createElement(ChevronRight2, { className: "h-4 w-4" })
|
|
2623
|
+
)
|
|
2624
|
+
);
|
|
2625
|
+
}
|
|
2626
|
+
);
|
|
2627
|
+
Pagination.displayName = "Pagination";
|
|
2628
|
+
|
|
2629
|
+
// src/components/Stepper.tsx
|
|
2630
|
+
import React38 from "react";
|
|
2631
|
+
import { Check as Check2 } from "lucide-react";
|
|
2632
|
+
var Stepper = React38.forwardRef(
|
|
2633
|
+
({ steps, currentStep, status, className, ...rest }, ref) => {
|
|
2634
|
+
const currentIndex = steps.findIndex((step) => step.id === currentStep);
|
|
2635
|
+
const getStepState = (index) => {
|
|
2636
|
+
if (index < currentIndex) {
|
|
2637
|
+
return "complete";
|
|
2638
|
+
}
|
|
2639
|
+
if (index === currentIndex) {
|
|
2640
|
+
return status || "current";
|
|
2641
|
+
}
|
|
2642
|
+
return "future";
|
|
2643
|
+
};
|
|
2644
|
+
return /* @__PURE__ */ React38.createElement(
|
|
2645
|
+
"div",
|
|
2646
|
+
{
|
|
2647
|
+
ref,
|
|
2648
|
+
className: cx("flex items-center w-full", className),
|
|
2649
|
+
...rest
|
|
2650
|
+
},
|
|
2651
|
+
steps.map((step, index) => {
|
|
2652
|
+
const state = getStepState(index);
|
|
2653
|
+
const isLast = index === steps.length - 1;
|
|
2654
|
+
return /* @__PURE__ */ React38.createElement(React38.Fragment, { key: step.id }, /* @__PURE__ */ React38.createElement("div", { className: "flex flex-col items-center" }, /* @__PURE__ */ React38.createElement(
|
|
2655
|
+
"div",
|
|
2656
|
+
{
|
|
2657
|
+
className: cx(
|
|
2658
|
+
"flex items-center justify-center w-10 h-10 rounded-full border-2 font-semibold text-sm transition-all duration-200",
|
|
2659
|
+
state === "complete" && "bg-gold border-gold text-obsidian",
|
|
2660
|
+
state === "current" && "bg-charcoal border-gold text-gold",
|
|
2661
|
+
state === "error" && "bg-error border-error text-white",
|
|
2662
|
+
state === "future" && "bg-charcoal border-ash text-silver"
|
|
2663
|
+
)
|
|
2664
|
+
},
|
|
2665
|
+
state === "complete" ? /* @__PURE__ */ React38.createElement(Check2, { className: "h-5 w-5" }) : /* @__PURE__ */ React38.createElement("span", null, index + 1)
|
|
2666
|
+
), /* @__PURE__ */ React38.createElement(
|
|
2667
|
+
"span",
|
|
2668
|
+
{
|
|
2669
|
+
className: cx(
|
|
2670
|
+
"mt-2 text-xs font-medium",
|
|
2671
|
+
state === "complete" && "text-gold",
|
|
2672
|
+
state === "current" && "text-white",
|
|
2673
|
+
state === "error" && "text-error",
|
|
2674
|
+
state === "future" && "text-silver"
|
|
2675
|
+
)
|
|
2676
|
+
},
|
|
2677
|
+
step.label
|
|
2678
|
+
)), !isLast && /* @__PURE__ */ React38.createElement(
|
|
2679
|
+
"div",
|
|
2680
|
+
{
|
|
2681
|
+
className: cx(
|
|
2682
|
+
"flex-1 h-0.5 mx-4 transition-all duration-200",
|
|
2683
|
+
index < currentIndex ? "bg-gold" : "bg-ash"
|
|
2684
|
+
)
|
|
2685
|
+
}
|
|
2686
|
+
));
|
|
2687
|
+
})
|
|
2688
|
+
);
|
|
2689
|
+
}
|
|
2690
|
+
);
|
|
2691
|
+
Stepper.displayName = "Stepper";
|
|
2692
|
+
|
|
2693
|
+
// src/components/Message.tsx
|
|
2694
|
+
import React41 from "react";
|
|
2695
|
+
|
|
2696
|
+
// src/components/MarkdownContent.tsx
|
|
2697
|
+
import React39, { useMemo } from "react";
|
|
2698
|
+
import DOMPurify from "dompurify";
|
|
2699
|
+
var DEFAULT_SANITIZE_CONFIG = {
|
|
2700
|
+
ALLOWED_TAGS: [
|
|
2701
|
+
"h1",
|
|
2702
|
+
"h2",
|
|
2703
|
+
"h3",
|
|
2704
|
+
"h4",
|
|
2705
|
+
"h5",
|
|
2706
|
+
"h6",
|
|
2707
|
+
"p",
|
|
2708
|
+
"br",
|
|
2709
|
+
"hr",
|
|
2710
|
+
"strong",
|
|
2711
|
+
"b",
|
|
2712
|
+
"em",
|
|
2713
|
+
"i",
|
|
2714
|
+
"u",
|
|
2715
|
+
"s",
|
|
2716
|
+
"strike",
|
|
2717
|
+
"del",
|
|
2718
|
+
"ins",
|
|
2719
|
+
"sup",
|
|
2720
|
+
"sub",
|
|
2721
|
+
"mark",
|
|
2722
|
+
"small",
|
|
2723
|
+
"ul",
|
|
2724
|
+
"ol",
|
|
2725
|
+
"li",
|
|
2726
|
+
"a",
|
|
2727
|
+
"code",
|
|
2728
|
+
"pre",
|
|
2729
|
+
"kbd",
|
|
2730
|
+
"samp",
|
|
2731
|
+
"var",
|
|
2732
|
+
"blockquote",
|
|
2733
|
+
"q",
|
|
2734
|
+
"cite",
|
|
2735
|
+
"abbr",
|
|
2736
|
+
"table",
|
|
2737
|
+
"thead",
|
|
2738
|
+
"tbody",
|
|
2739
|
+
"tfoot",
|
|
2740
|
+
"tr",
|
|
2741
|
+
"th",
|
|
2742
|
+
"td",
|
|
2743
|
+
"caption",
|
|
2744
|
+
"colgroup",
|
|
2745
|
+
"col",
|
|
2746
|
+
"div",
|
|
2747
|
+
"span",
|
|
2748
|
+
"details",
|
|
2749
|
+
"summary"
|
|
2750
|
+
],
|
|
2751
|
+
ALLOWED_ATTR: [
|
|
2752
|
+
"href",
|
|
2753
|
+
"title",
|
|
2754
|
+
"target",
|
|
2755
|
+
"rel",
|
|
2756
|
+
"class",
|
|
2757
|
+
"id",
|
|
2758
|
+
"colspan",
|
|
2759
|
+
"rowspan",
|
|
2760
|
+
"scope",
|
|
2761
|
+
"open"
|
|
2762
|
+
],
|
|
2763
|
+
ADD_ATTR: ["target", "rel"],
|
|
2764
|
+
ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto|tel):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i
|
|
2765
|
+
};
|
|
2766
|
+
function useDOMPurifySetup() {
|
|
2767
|
+
useMemo(() => {
|
|
2768
|
+
DOMPurify.addHook("afterSanitizeAttributes", (node) => {
|
|
2769
|
+
if (node.tagName === "A") {
|
|
2770
|
+
node.setAttribute("target", "_blank");
|
|
2771
|
+
node.setAttribute("rel", "noopener noreferrer");
|
|
2772
|
+
}
|
|
2773
|
+
});
|
|
2774
|
+
}, []);
|
|
2775
|
+
}
|
|
2776
|
+
var MarkdownContent = React39.forwardRef(
|
|
2777
|
+
({ className, content, sanitizeConfig, ...rest }, ref) => {
|
|
2778
|
+
useDOMPurifySetup();
|
|
2779
|
+
const sanitizedHtml = useMemo(() => {
|
|
2780
|
+
if (!content) {
|
|
2781
|
+
return "";
|
|
2782
|
+
}
|
|
2783
|
+
const config = sanitizeConfig ?? DEFAULT_SANITIZE_CONFIG;
|
|
2784
|
+
return DOMPurify.sanitize(content, config);
|
|
2785
|
+
}, [content, sanitizeConfig]);
|
|
2786
|
+
return /* @__PURE__ */ React39.createElement(
|
|
2787
|
+
"div",
|
|
2788
|
+
{
|
|
2789
|
+
ref,
|
|
2790
|
+
className: cx("prose", className),
|
|
2791
|
+
dangerouslySetInnerHTML: { __html: sanitizedHtml },
|
|
2792
|
+
...rest
|
|
2793
|
+
}
|
|
2794
|
+
);
|
|
2795
|
+
}
|
|
2796
|
+
);
|
|
2797
|
+
MarkdownContent.displayName = "MarkdownContent";
|
|
2798
|
+
|
|
2799
|
+
// src/components/StreamingCursor.tsx
|
|
2800
|
+
import React40 from "react";
|
|
2801
|
+
var StreamingCursor = React40.forwardRef(
|
|
2802
|
+
({ className, variant = "line", ...rest }, ref) => {
|
|
2803
|
+
const variantStyles3 = {
|
|
2804
|
+
block: "w-2.5 h-cursor translate-y-cursor-offset",
|
|
2805
|
+
line: "w-0.5 h-cursor translate-y-cursor-offset",
|
|
2806
|
+
underscore: "w-2.5 h-0.5 self-end mb-0.5"
|
|
2807
|
+
};
|
|
2808
|
+
return /* @__PURE__ */ React40.createElement(
|
|
2809
|
+
"span",
|
|
2810
|
+
{
|
|
2811
|
+
ref,
|
|
2812
|
+
className: cx(
|
|
2813
|
+
"inline-block bg-current animate-cursor-blink",
|
|
2814
|
+
variantStyles3[variant],
|
|
2815
|
+
className
|
|
2816
|
+
),
|
|
2817
|
+
"aria-hidden": "true",
|
|
2818
|
+
...rest
|
|
2819
|
+
}
|
|
2820
|
+
);
|
|
2821
|
+
}
|
|
2822
|
+
);
|
|
2823
|
+
StreamingCursor.displayName = "StreamingCursor";
|
|
2824
|
+
|
|
2825
|
+
// src/components/Message.tsx
|
|
2826
|
+
var variantStyles2 = {
|
|
2827
|
+
user: "bg-gold text-obsidian ml-auto",
|
|
2828
|
+
assistant: "bg-charcoal border border-ash text-white mr-auto"
|
|
2829
|
+
};
|
|
2830
|
+
var Message = React41.forwardRef(
|
|
2831
|
+
({ variant = "assistant", className, content, isStreaming, ...rest }, ref) => {
|
|
2832
|
+
const isUser = variant === "user";
|
|
2833
|
+
return /* @__PURE__ */ React41.createElement(
|
|
2834
|
+
"div",
|
|
2835
|
+
{
|
|
2836
|
+
ref,
|
|
2837
|
+
className: cx(
|
|
2838
|
+
"px-3 py-2 w-fit",
|
|
2839
|
+
variantStyles2[variant],
|
|
2840
|
+
className
|
|
2841
|
+
),
|
|
2842
|
+
...rest
|
|
2843
|
+
},
|
|
2844
|
+
/* @__PURE__ */ React41.createElement(
|
|
2845
|
+
MarkdownContent,
|
|
2846
|
+
{
|
|
2847
|
+
content,
|
|
2848
|
+
className: cx("prose-sm", isUser ? "prose-inherit" : "prose-invert")
|
|
2849
|
+
}
|
|
2850
|
+
),
|
|
2851
|
+
isStreaming && /* @__PURE__ */ React41.createElement(StreamingCursor, { className: "ml-0.5" })
|
|
2852
|
+
);
|
|
2853
|
+
}
|
|
2854
|
+
);
|
|
2855
|
+
Message.displayName = "Message";
|
|
2856
|
+
|
|
2857
|
+
// src/components/ChatHistory.tsx
|
|
2858
|
+
import React42 from "react";
|
|
2859
|
+
var ChatHistory = React42.forwardRef(
|
|
2860
|
+
({ messages, className, ...rest }, ref) => {
|
|
2861
|
+
return /* @__PURE__ */ React42.createElement(
|
|
2862
|
+
"div",
|
|
2863
|
+
{
|
|
2864
|
+
ref,
|
|
2865
|
+
className: cx("flex flex-col gap-3 w-full", className),
|
|
2866
|
+
...rest
|
|
2867
|
+
},
|
|
2868
|
+
messages.map(({ id, variant, className: messageClassName, ...messageProps }, index) => /* @__PURE__ */ React42.createElement(
|
|
2869
|
+
Message,
|
|
2870
|
+
{
|
|
2871
|
+
key: id ?? index,
|
|
2872
|
+
variant,
|
|
2873
|
+
className: messageClassName,
|
|
2874
|
+
...messageProps
|
|
2875
|
+
}
|
|
2876
|
+
))
|
|
2877
|
+
);
|
|
2878
|
+
}
|
|
2879
|
+
);
|
|
2880
|
+
ChatHistory.displayName = "ChatHistory";
|
|
2881
|
+
|
|
2882
|
+
// src/components/BrandIcon.tsx
|
|
2883
|
+
import React43 from "react";
|
|
2884
|
+
var sizeMap2 = {
|
|
2885
|
+
sm: "h-8 w-8 text-sm",
|
|
2886
|
+
md: "h-12 w-12 text-base",
|
|
2887
|
+
lg: "h-16 w-16 text-lg"
|
|
2888
|
+
};
|
|
2889
|
+
var BrandIcon = React43.forwardRef(
|
|
2890
|
+
({ size = "md", variant = "solid", children, className, ...rest }, ref) => {
|
|
2891
|
+
const variantClasses = variant === "solid" ? "bg-gold text-obsidian border-2 border-gold" : "bg-transparent text-gold border-2 border-gold";
|
|
2892
|
+
return /* @__PURE__ */ React43.createElement(
|
|
2893
|
+
"div",
|
|
2894
|
+
{
|
|
2895
|
+
ref,
|
|
2896
|
+
className: cx(
|
|
2897
|
+
"inline-flex items-center justify-center rounded-none font-bold select-none overflow-hidden",
|
|
2898
|
+
sizeMap2[size],
|
|
2899
|
+
variantClasses,
|
|
2900
|
+
className
|
|
2901
|
+
),
|
|
2902
|
+
...rest
|
|
2903
|
+
},
|
|
2904
|
+
children
|
|
2905
|
+
);
|
|
2906
|
+
}
|
|
2907
|
+
);
|
|
2908
|
+
BrandIcon.displayName = "BrandIcon";
|
|
2909
|
+
|
|
2910
|
+
// src/components/ColorSwatch.tsx
|
|
2911
|
+
import React44 from "react";
|
|
2912
|
+
var ColorSwatch = React44.forwardRef(
|
|
2913
|
+
({ color, label, className, ...rest }, ref) => {
|
|
2914
|
+
return /* @__PURE__ */ React44.createElement(
|
|
2915
|
+
"div",
|
|
2916
|
+
{
|
|
2917
|
+
ref,
|
|
2918
|
+
className: cx("flex flex-col items-center gap-2", className),
|
|
2919
|
+
...rest
|
|
2920
|
+
},
|
|
2921
|
+
/* @__PURE__ */ React44.createElement(
|
|
2922
|
+
"div",
|
|
2923
|
+
{
|
|
2924
|
+
className: "h-16 w-16 border-2 border-ash rounded-none shadow-sm",
|
|
2925
|
+
style: { backgroundColor: color },
|
|
2926
|
+
"aria-label": label || color
|
|
2927
|
+
}
|
|
2928
|
+
),
|
|
2929
|
+
label && /* @__PURE__ */ React44.createElement("span", { className: "text-xs text-silver font-medium" }, label)
|
|
2930
|
+
);
|
|
2931
|
+
}
|
|
2932
|
+
);
|
|
2933
|
+
ColorSwatch.displayName = "ColorSwatch";
|
|
2934
|
+
|
|
2935
|
+
// src/components/ImageCard.tsx
|
|
2936
|
+
import React45 from "react";
|
|
2937
|
+
var ASPECT_RATIO_PRESETS = {
|
|
2938
|
+
landscape: "3 / 2",
|
|
2939
|
+
portrait: "2 / 3",
|
|
2940
|
+
square: "1 / 1"
|
|
2941
|
+
};
|
|
2942
|
+
function resolveAspectRatio(ratio) {
|
|
2943
|
+
if (ratio in ASPECT_RATIO_PRESETS) {
|
|
2944
|
+
return ASPECT_RATIO_PRESETS[ratio];
|
|
2945
|
+
}
|
|
2946
|
+
return ratio.replace("/", " / ");
|
|
2947
|
+
}
|
|
2948
|
+
var ImageCard = React45.forwardRef(
|
|
2949
|
+
({
|
|
2950
|
+
src,
|
|
2951
|
+
alt,
|
|
2952
|
+
title,
|
|
2953
|
+
subtitle,
|
|
2954
|
+
aspectRatio,
|
|
2955
|
+
objectFit = "cover",
|
|
2956
|
+
overlay,
|
|
2957
|
+
mediaClassName,
|
|
2958
|
+
contentClassName,
|
|
2959
|
+
className,
|
|
2960
|
+
children,
|
|
2961
|
+
...props
|
|
2962
|
+
}, ref) => {
|
|
2963
|
+
const hasAspectRatio = aspectRatio !== void 0;
|
|
2964
|
+
const isContain = objectFit === "contain";
|
|
2965
|
+
return /* @__PURE__ */ React45.createElement(Card, { ref, className: cx("p-0 overflow-hidden group w-fit", className), ...props }, /* @__PURE__ */ React45.createElement(
|
|
2966
|
+
"div",
|
|
2967
|
+
{
|
|
2968
|
+
className: cx(
|
|
2969
|
+
"relative",
|
|
2970
|
+
hasAspectRatio && "overflow-hidden",
|
|
2971
|
+
mediaClassName
|
|
2972
|
+
),
|
|
2973
|
+
style: hasAspectRatio ? { aspectRatio: resolveAspectRatio(aspectRatio) } : void 0
|
|
2974
|
+
},
|
|
2975
|
+
/* @__PURE__ */ React45.createElement(
|
|
2976
|
+
"img",
|
|
2977
|
+
{
|
|
2978
|
+
src,
|
|
2979
|
+
alt,
|
|
2980
|
+
className: cx(
|
|
2981
|
+
"block max-w-full",
|
|
2982
|
+
hasAspectRatio && "w-full h-full",
|
|
2983
|
+
hasAspectRatio && (isContain ? "object-contain" : "object-cover"),
|
|
2984
|
+
!hasAspectRatio && "h-auto"
|
|
2985
|
+
)
|
|
2986
|
+
}
|
|
2987
|
+
),
|
|
2988
|
+
overlay && /* @__PURE__ */ React45.createElement(
|
|
2989
|
+
"div",
|
|
2990
|
+
{
|
|
2991
|
+
className: "absolute inset-0 bg-obsidian/80 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center"
|
|
2992
|
+
},
|
|
2993
|
+
overlay
|
|
2994
|
+
)
|
|
2995
|
+
), (title || subtitle || children) && /* @__PURE__ */ React45.createElement("div", { className: cx("px-4 pt-4", contentClassName) }, title && /* @__PURE__ */ React45.createElement("h4", { className: "text-lg font-semibold leading-tight" }, title), subtitle && /* @__PURE__ */ React45.createElement("p", { className: "text-sm text-silver leading-normal" }, subtitle), children));
|
|
2996
|
+
}
|
|
2997
|
+
);
|
|
2998
|
+
ImageCard.displayName = "ImageCard";
|
|
2999
|
+
|
|
3000
|
+
// src/components/SectionHeading.tsx
|
|
3001
|
+
import React46 from "react";
|
|
3002
|
+
var levelStyles = {
|
|
3003
|
+
h2: "text-2xl mb-4",
|
|
3004
|
+
h3: "text-xl mb-3"
|
|
3005
|
+
};
|
|
3006
|
+
var SectionHeading = React46.forwardRef(
|
|
3007
|
+
({ level = "h2", children, className, ...rest }, ref) => {
|
|
3008
|
+
const Component = level;
|
|
3009
|
+
return /* @__PURE__ */ React46.createElement(
|
|
3010
|
+
Component,
|
|
3011
|
+
{
|
|
3012
|
+
ref,
|
|
3013
|
+
className: cx(
|
|
3014
|
+
"text-gold font-semibold tracking-tight",
|
|
3015
|
+
levelStyles[level],
|
|
3016
|
+
className
|
|
3017
|
+
),
|
|
3018
|
+
...rest
|
|
3019
|
+
},
|
|
3020
|
+
children
|
|
3021
|
+
);
|
|
3022
|
+
}
|
|
3023
|
+
);
|
|
3024
|
+
SectionHeading.displayName = "SectionHeading";
|
|
3025
|
+
|
|
629
3026
|
// src/index.ts
|
|
630
3027
|
var version = "2.0.0";
|
|
631
3028
|
export {
|
|
3029
|
+
Accordion,
|
|
3030
|
+
AccordionContent,
|
|
3031
|
+
AccordionItem,
|
|
3032
|
+
AccordionTrigger,
|
|
632
3033
|
Alert,
|
|
3034
|
+
AlertDialog,
|
|
633
3035
|
Avatar,
|
|
634
3036
|
Badge,
|
|
3037
|
+
BrandIcon,
|
|
3038
|
+
Breadcrumb,
|
|
3039
|
+
BreadcrumbItem,
|
|
3040
|
+
BreadcrumbLink,
|
|
635
3041
|
Button,
|
|
636
3042
|
Card,
|
|
3043
|
+
ChatHistory,
|
|
637
3044
|
Checkbox,
|
|
3045
|
+
Col,
|
|
3046
|
+
ColorSwatch,
|
|
3047
|
+
ConfirmDialog,
|
|
3048
|
+
Container,
|
|
3049
|
+
Divider,
|
|
3050
|
+
Drawer,
|
|
638
3051
|
HelperText,
|
|
3052
|
+
ImageCard,
|
|
639
3053
|
Input,
|
|
3054
|
+
InputGroup,
|
|
3055
|
+
InputLeftAddon,
|
|
3056
|
+
InputLeftElement,
|
|
3057
|
+
InputRightAddon,
|
|
3058
|
+
InputRightElement,
|
|
3059
|
+
InputWrapper,
|
|
640
3060
|
Label,
|
|
3061
|
+
List,
|
|
3062
|
+
ListItem,
|
|
3063
|
+
ListItemText,
|
|
3064
|
+
ListSubheader,
|
|
3065
|
+
MarkdownContent,
|
|
3066
|
+
Menu,
|
|
3067
|
+
MenuContent,
|
|
3068
|
+
MenuItem,
|
|
3069
|
+
MenuLabel,
|
|
3070
|
+
MenuSeparator,
|
|
3071
|
+
MenuTrigger,
|
|
3072
|
+
Message,
|
|
641
3073
|
Modal,
|
|
3074
|
+
Navbar,
|
|
3075
|
+
NavbarBrand,
|
|
3076
|
+
NavbarContent,
|
|
3077
|
+
NavbarDivider,
|
|
3078
|
+
NavbarItem,
|
|
3079
|
+
NavbarLink,
|
|
3080
|
+
Pagination,
|
|
3081
|
+
Popover,
|
|
3082
|
+
Progress,
|
|
3083
|
+
PromptDialog,
|
|
642
3084
|
Radio,
|
|
3085
|
+
Row,
|
|
3086
|
+
SectionHeading,
|
|
643
3087
|
Select,
|
|
644
3088
|
Skeleton,
|
|
3089
|
+
Slider,
|
|
645
3090
|
Spinner,
|
|
3091
|
+
Stack,
|
|
3092
|
+
Stepper,
|
|
3093
|
+
StreamingCursor,
|
|
646
3094
|
Switch,
|
|
3095
|
+
Tab,
|
|
3096
|
+
TabList,
|
|
3097
|
+
TabPanel,
|
|
3098
|
+
Table,
|
|
3099
|
+
TableBody,
|
|
3100
|
+
TableCaption,
|
|
3101
|
+
TableCell,
|
|
3102
|
+
TableFooter,
|
|
3103
|
+
TableHead,
|
|
3104
|
+
TableHeader,
|
|
3105
|
+
TableRow,
|
|
3106
|
+
Tabs,
|
|
647
3107
|
Textarea,
|
|
3108
|
+
ToastProvider,
|
|
648
3109
|
Tooltip,
|
|
3110
|
+
useToast,
|
|
649
3111
|
version
|
|
650
3112
|
};
|
|
651
3113
|
//# sourceMappingURL=index.mjs.map
|