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