@lukeashford/aurelius 2.1.0 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -3
- package/dist/index.d.mts +577 -2
- package/dist/index.d.ts +577 -2
- package/dist/index.js +2683 -164
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2624 -162
- package/dist/index.mjs.map +1 -1
- package/dist/styles/base.css +4 -0
- package/dist/styles/prose.css +61 -0
- package/dist/styles/theme.css +230 -42
- package/llms.md +39 -3
- package/package.json +19 -5
- package/scripts/eslint.mjs +127 -117
package/dist/index.js
CHANGED
|
@@ -30,32 +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,
|
|
41
|
+
BrandIcon: () => BrandIcon,
|
|
42
|
+
Breadcrumb: () => Breadcrumb,
|
|
43
|
+
BreadcrumbItem: () => BreadcrumbItem,
|
|
44
|
+
BreadcrumbLink: () => BreadcrumbLink,
|
|
36
45
|
Button: () => Button,
|
|
37
46
|
Card: () => Card,
|
|
47
|
+
ChatHistory: () => ChatHistory,
|
|
38
48
|
Checkbox: () => Checkbox,
|
|
49
|
+
Col: () => Col,
|
|
50
|
+
ColorSwatch: () => ColorSwatch,
|
|
51
|
+
ConfirmDialog: () => ConfirmDialog,
|
|
52
|
+
Container: () => Container,
|
|
53
|
+
Divider: () => Divider,
|
|
54
|
+
Drawer: () => Drawer,
|
|
39
55
|
HelperText: () => HelperText,
|
|
56
|
+
ImageCard: () => ImageCard,
|
|
40
57
|
Input: () => Input,
|
|
58
|
+
InputGroup: () => InputGroup,
|
|
59
|
+
InputLeftAddon: () => InputLeftAddon,
|
|
60
|
+
InputLeftElement: () => InputLeftElement,
|
|
61
|
+
InputRightAddon: () => InputRightAddon,
|
|
62
|
+
InputRightElement: () => InputRightElement,
|
|
63
|
+
InputWrapper: () => InputWrapper,
|
|
41
64
|
Label: () => Label,
|
|
65
|
+
List: () => List,
|
|
66
|
+
ListItem: () => ListItem,
|
|
67
|
+
ListItemText: () => ListItemText,
|
|
68
|
+
ListSubheader: () => ListSubheader,
|
|
69
|
+
MarkdownContent: () => MarkdownContent,
|
|
70
|
+
Menu: () => Menu,
|
|
71
|
+
MenuContent: () => MenuContent,
|
|
72
|
+
MenuItem: () => MenuItem,
|
|
73
|
+
MenuLabel: () => MenuLabel,
|
|
74
|
+
MenuSeparator: () => MenuSeparator,
|
|
75
|
+
MenuTrigger: () => MenuTrigger,
|
|
76
|
+
Message: () => Message,
|
|
42
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,
|
|
43
88
|
Radio: () => Radio,
|
|
89
|
+
Row: () => Row,
|
|
90
|
+
SectionHeading: () => SectionHeading,
|
|
44
91
|
Select: () => Select,
|
|
45
92
|
Skeleton: () => Skeleton,
|
|
93
|
+
Slider: () => Slider,
|
|
46
94
|
Spinner: () => Spinner,
|
|
95
|
+
Stack: () => Stack,
|
|
96
|
+
Stepper: () => Stepper,
|
|
97
|
+
StreamingCursor: () => StreamingCursor,
|
|
47
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,
|
|
48
111
|
Textarea: () => Textarea,
|
|
112
|
+
ToastProvider: () => ToastProvider,
|
|
49
113
|
Tooltip: () => Tooltip,
|
|
114
|
+
useToast: () => useToast,
|
|
50
115
|
version: () => version
|
|
51
116
|
});
|
|
52
117
|
module.exports = __toCommonJS(index_exports);
|
|
53
118
|
|
|
54
119
|
// src/components/Button.tsx
|
|
55
120
|
var import_react = __toESM(require("react"));
|
|
121
|
+
|
|
122
|
+
// src/utils/cx.ts
|
|
56
123
|
function cx(...classes) {
|
|
57
124
|
return classes.filter(Boolean).join(" ");
|
|
58
125
|
}
|
|
126
|
+
|
|
127
|
+
// src/components/Button.tsx
|
|
59
128
|
var Button = import_react.default.forwardRef(
|
|
60
129
|
({ variant = "primary", size = "md", loading = false, className, disabled, children, ...rest }, ref) => {
|
|
61
130
|
const isDisabled = disabled || loading;
|
|
@@ -65,7 +134,7 @@ var Button = import_react.default.forwardRef(
|
|
|
65
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",
|
|
66
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",
|
|
67
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",
|
|
68
|
-
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",
|
|
69
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",
|
|
70
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"
|
|
71
140
|
};
|
|
@@ -100,21 +169,19 @@ Button.displayName = "Button";
|
|
|
100
169
|
|
|
101
170
|
// src/components/Input.tsx
|
|
102
171
|
var import_react2 = __toESM(require("react"));
|
|
103
|
-
function cx2(...classes) {
|
|
104
|
-
return classes.filter(Boolean).join(" ");
|
|
105
|
-
}
|
|
106
172
|
var Input = import_react2.default.forwardRef(
|
|
107
173
|
({ error = false, className, leadingIcon, trailingIcon, disabled, ...rest }, ref) => {
|
|
108
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";
|
|
109
175
|
const errorCls = error ? "border-error focus:border-error focus:ring-error" : "";
|
|
110
|
-
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(
|
|
111
177
|
"input",
|
|
112
178
|
{
|
|
113
179
|
ref,
|
|
114
|
-
className:
|
|
180
|
+
className: cx(
|
|
115
181
|
base,
|
|
116
182
|
errorCls,
|
|
117
|
-
leadingIcon
|
|
183
|
+
leadingIcon ? "pl-9" : false,
|
|
184
|
+
trailingIcon ? "pr-9" : false,
|
|
118
185
|
className
|
|
119
186
|
),
|
|
120
187
|
disabled,
|
|
@@ -127,38 +194,397 @@ Input.displayName = "Input";
|
|
|
127
194
|
|
|
128
195
|
// src/components/Card.tsx
|
|
129
196
|
var import_react3 = __toESM(require("react"));
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
197
|
+
var import_lucide_react = require("lucide-react");
|
|
198
|
+
var VARIANT_STYLES = {
|
|
199
|
+
default: "bg-charcoal shadow-sm border border-gold/30",
|
|
200
|
+
elevated: "bg-charcoal shadow-lg border-0",
|
|
201
|
+
outlined: "bg-charcoal shadow-none border border-ash",
|
|
202
|
+
ghost: "bg-transparent shadow-none border-0",
|
|
203
|
+
featured: "bg-charcoal border border-gold glow-sm"
|
|
204
|
+
};
|
|
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) => {
|
|
145
215
|
return /* @__PURE__ */ import_react3.default.createElement(
|
|
146
216
|
"div",
|
|
147
217
|
{
|
|
148
218
|
ref,
|
|
149
|
-
className:
|
|
150
|
-
|
|
151
|
-
|
|
219
|
+
className: cx(
|
|
220
|
+
"rounded-none relative",
|
|
221
|
+
!noPadding && "p-6",
|
|
222
|
+
VARIANT_STYLES[variant],
|
|
223
|
+
interactive && "transition-all duration-200 hover:border-gold hover:shadow-glow cursor-pointer",
|
|
224
|
+
selected && "border-gold shadow-glow-md",
|
|
225
|
+
className
|
|
226
|
+
),
|
|
227
|
+
...props
|
|
228
|
+
},
|
|
229
|
+
children,
|
|
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
|
|
152
300
|
);
|
|
153
301
|
}
|
|
154
302
|
);
|
|
155
|
-
|
|
303
|
+
CardMedia.displayName = "CardMedia";
|
|
304
|
+
var Card = Object.assign(CardBase, {
|
|
305
|
+
Header: CardHeader,
|
|
306
|
+
Body: CardBody,
|
|
307
|
+
Footer: CardFooter,
|
|
308
|
+
Media: CardMedia
|
|
309
|
+
});
|
|
156
310
|
|
|
157
|
-
// src/components/
|
|
311
|
+
// src/components/Container.tsx
|
|
158
312
|
var import_react4 = __toESM(require("react"));
|
|
159
|
-
|
|
160
|
-
|
|
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;
|
|
161
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(
|
|
536
|
+
"div",
|
|
537
|
+
{
|
|
538
|
+
className: cx("flex items-center gap-4", className),
|
|
539
|
+
role: "separator",
|
|
540
|
+
"aria-orientation": orientation
|
|
541
|
+
},
|
|
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
|
+
}
|
|
581
|
+
);
|
|
582
|
+
}
|
|
583
|
+
);
|
|
584
|
+
Divider.displayName = "Divider";
|
|
585
|
+
|
|
586
|
+
// src/components/Avatar.tsx
|
|
587
|
+
var import_react9 = __toESM(require("react"));
|
|
162
588
|
var sizeMap = {
|
|
163
589
|
xs: "h-6 w-6 text-[10px]",
|
|
164
590
|
sm: "h-8 w-8 text-[11px]",
|
|
@@ -172,25 +598,25 @@ function initials(name) {
|
|
|
172
598
|
const parts = name.trim().split(/\s+/);
|
|
173
599
|
return parts.slice(0, 2).map((p) => p[0].toUpperCase()).join("");
|
|
174
600
|
}
|
|
175
|
-
var Avatar =
|
|
601
|
+
var Avatar = import_react9.default.forwardRef(
|
|
176
602
|
({ src, alt = "", name, size = "md", status, className, ...rest }, ref) => {
|
|
177
603
|
const statusColor = status === "online" ? "bg-success" : status === "busy" ? "bg-warning" : "bg-zinc";
|
|
178
|
-
return /* @__PURE__ */
|
|
604
|
+
return /* @__PURE__ */ import_react9.default.createElement(
|
|
179
605
|
"div",
|
|
180
606
|
{
|
|
181
607
|
ref,
|
|
182
|
-
className:
|
|
608
|
+
className: cx(
|
|
183
609
|
"relative inline-flex items-center justify-center rounded-full border-2 border-ash bg-slate text-silver font-semibold select-none overflow-hidden",
|
|
184
610
|
sizeMap[size],
|
|
185
611
|
className
|
|
186
612
|
),
|
|
187
613
|
...rest
|
|
188
614
|
},
|
|
189
|
-
src ? /* @__PURE__ */
|
|
190
|
-
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(
|
|
191
617
|
"span",
|
|
192
618
|
{
|
|
193
|
-
className:
|
|
619
|
+
className: cx(
|
|
194
620
|
"absolute bottom-0 right-0 rounded-full ring-2 ring-charcoal",
|
|
195
621
|
// 25% of avatar size
|
|
196
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",
|
|
@@ -204,11 +630,8 @@ var Avatar = import_react4.default.forwardRef(
|
|
|
204
630
|
Avatar.displayName = "Avatar";
|
|
205
631
|
|
|
206
632
|
// src/components/Badge.tsx
|
|
207
|
-
var
|
|
208
|
-
|
|
209
|
-
return classes.filter(Boolean).join(" ");
|
|
210
|
-
}
|
|
211
|
-
var Badge = import_react5.default.forwardRef(
|
|
633
|
+
var import_react10 = __toESM(require("react"));
|
|
634
|
+
var Badge = import_react10.default.forwardRef(
|
|
212
635
|
({ variant = "default", className, ...rest }, ref) => {
|
|
213
636
|
const base = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border";
|
|
214
637
|
const variantClasses = {
|
|
@@ -220,22 +643,19 @@ var Badge = import_react5.default.forwardRef(
|
|
|
220
643
|
info: "bg-info/20 text-info border-info/30"
|
|
221
644
|
};
|
|
222
645
|
const variantClass = variantClasses[variant];
|
|
223
|
-
return /* @__PURE__ */
|
|
646
|
+
return /* @__PURE__ */ import_react10.default.createElement("span", { ref, className: cx(base, variantClass, className), ...rest });
|
|
224
647
|
}
|
|
225
648
|
);
|
|
226
649
|
Badge.displayName = "Badge";
|
|
227
650
|
|
|
228
651
|
// src/components/Tooltip.tsx
|
|
229
|
-
var
|
|
230
|
-
function cx6(...classes) {
|
|
231
|
-
return classes.filter(Boolean).join(" ");
|
|
232
|
-
}
|
|
652
|
+
var import_react11 = __toESM(require("react"));
|
|
233
653
|
var Tooltip = ({ content, children, open = false, side = "top" }) => {
|
|
234
|
-
return /* @__PURE__ */
|
|
654
|
+
return /* @__PURE__ */ import_react11.default.createElement("span", { className: "relative inline-block" }, children, /* @__PURE__ */ import_react11.default.createElement(
|
|
235
655
|
"span",
|
|
236
656
|
{
|
|
237
657
|
role: "tooltip",
|
|
238
|
-
className:
|
|
658
|
+
className: cx(
|
|
239
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",
|
|
240
660
|
open ? "opacity-100" : "opacity-0",
|
|
241
661
|
side === "top" && "left-1/2 -translate-x-1/2 -top-2 -translate-y-full",
|
|
@@ -248,39 +668,231 @@ var Tooltip = ({ content, children, open = false, side = "top" }) => {
|
|
|
248
668
|
));
|
|
249
669
|
};
|
|
250
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
|
+
|
|
251
869
|
// src/components/Label.tsx
|
|
252
|
-
var
|
|
253
|
-
|
|
254
|
-
return classes.filter(Boolean).join(" ");
|
|
255
|
-
}
|
|
256
|
-
var Label = import_react7.default.forwardRef(
|
|
870
|
+
var import_react14 = __toESM(require("react"));
|
|
871
|
+
var Label = import_react14.default.forwardRef(
|
|
257
872
|
({ className, required, children, ...rest }, ref) => {
|
|
258
|
-
return /* @__PURE__ */
|
|
873
|
+
return /* @__PURE__ */ import_react14.default.createElement(
|
|
259
874
|
"label",
|
|
260
875
|
{
|
|
261
876
|
ref,
|
|
262
|
-
className:
|
|
877
|
+
className: cx("block text-sm font-medium text-silver mb-1.5", className),
|
|
263
878
|
...rest
|
|
264
879
|
},
|
|
265
880
|
children,
|
|
266
|
-
required && /* @__PURE__ */
|
|
881
|
+
required && /* @__PURE__ */ import_react14.default.createElement("span", { className: "text-error ml-1" }, "*")
|
|
267
882
|
);
|
|
268
883
|
}
|
|
269
884
|
);
|
|
270
885
|
Label.displayName = "Label";
|
|
271
886
|
|
|
272
887
|
// src/components/HelperText.tsx
|
|
273
|
-
var
|
|
274
|
-
|
|
275
|
-
return classes.filter(Boolean).join(" ");
|
|
276
|
-
}
|
|
277
|
-
var HelperText = import_react8.default.forwardRef(
|
|
888
|
+
var import_react15 = __toESM(require("react"));
|
|
889
|
+
var HelperText = import_react15.default.forwardRef(
|
|
278
890
|
({ className, error, children, ...rest }, ref) => {
|
|
279
|
-
return /* @__PURE__ */
|
|
891
|
+
return /* @__PURE__ */ import_react15.default.createElement(
|
|
280
892
|
"p",
|
|
281
893
|
{
|
|
282
894
|
ref,
|
|
283
|
-
className:
|
|
895
|
+
className: cx("mt-1.5 text-xs", error ? "text-error" : "text-silver", className),
|
|
284
896
|
...rest
|
|
285
897
|
},
|
|
286
898
|
children
|
|
@@ -290,19 +902,16 @@ var HelperText = import_react8.default.forwardRef(
|
|
|
290
902
|
HelperText.displayName = "HelperText";
|
|
291
903
|
|
|
292
904
|
// src/components/Textarea.tsx
|
|
293
|
-
var
|
|
294
|
-
|
|
295
|
-
return classes.filter(Boolean).join(" ");
|
|
296
|
-
}
|
|
297
|
-
var Textarea = import_react9.default.forwardRef(
|
|
905
|
+
var import_react16 = __toESM(require("react"));
|
|
906
|
+
var Textarea = import_react16.default.forwardRef(
|
|
298
907
|
({ error = false, className, disabled, ...rest }, ref) => {
|
|
299
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";
|
|
300
909
|
const errorCls = error ? "border-error focus:border-error focus:ring-error" : "";
|
|
301
|
-
return /* @__PURE__ */
|
|
910
|
+
return /* @__PURE__ */ import_react16.default.createElement(
|
|
302
911
|
"textarea",
|
|
303
912
|
{
|
|
304
913
|
ref,
|
|
305
|
-
className:
|
|
914
|
+
className: cx(base, errorCls, disabled && "opacity-90", className),
|
|
306
915
|
disabled,
|
|
307
916
|
...rest
|
|
308
917
|
}
|
|
@@ -312,18 +921,15 @@ var Textarea = import_react9.default.forwardRef(
|
|
|
312
921
|
Textarea.displayName = "Textarea";
|
|
313
922
|
|
|
314
923
|
// src/components/Select.tsx
|
|
315
|
-
var
|
|
316
|
-
function cx10(...classes) {
|
|
317
|
-
return classes.filter(Boolean).join(" ");
|
|
318
|
-
}
|
|
924
|
+
var import_react17 = __toESM(require("react"));
|
|
319
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")`;
|
|
320
|
-
var Select =
|
|
926
|
+
var Select = import_react17.default.forwardRef(
|
|
321
927
|
({ error = false, className, disabled, options, children, ...rest }, ref) => {
|
|
322
|
-
return /* @__PURE__ */
|
|
928
|
+
return /* @__PURE__ */ import_react17.default.createElement(
|
|
323
929
|
"select",
|
|
324
930
|
{
|
|
325
931
|
ref,
|
|
326
|
-
className:
|
|
932
|
+
className: cx(
|
|
327
933
|
"appearance-none bg-graphite border border-ash rounded-none text-white px-3 py-2 pr-8",
|
|
328
934
|
"focus:border-gold focus:ring-1 focus:ring-gold focus:outline-none",
|
|
329
935
|
"disabled:opacity-50 disabled:cursor-not-allowed",
|
|
@@ -339,22 +945,19 @@ var Select = import_react10.default.forwardRef(
|
|
|
339
945
|
disabled,
|
|
340
946
|
...rest
|
|
341
947
|
},
|
|
342
|
-
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
|
|
343
949
|
);
|
|
344
950
|
}
|
|
345
951
|
);
|
|
346
952
|
Select.displayName = "Select";
|
|
347
953
|
|
|
348
954
|
// src/components/Checkbox.tsx
|
|
349
|
-
var
|
|
350
|
-
function cx11(...classes) {
|
|
351
|
-
return classes.filter(Boolean).join(" ");
|
|
352
|
-
}
|
|
955
|
+
var import_react18 = __toESM(require("react"));
|
|
353
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")`;
|
|
354
|
-
var Checkbox =
|
|
957
|
+
var Checkbox = import_react18.default.forwardRef(
|
|
355
958
|
({ className, label, id, ...rest }, ref) => {
|
|
356
959
|
const inputId = id || rest.name || Math.random().toString(36).substr(2, 9);
|
|
357
|
-
const setRef = (0,
|
|
960
|
+
const setRef = (0, import_react18.useCallback)((node) => {
|
|
358
961
|
if (node) {
|
|
359
962
|
if (node.checked) {
|
|
360
963
|
node.style.backgroundImage = checkmarkSvg;
|
|
@@ -366,13 +969,13 @@ var Checkbox = import_react11.default.forwardRef(
|
|
|
366
969
|
ref.current = node;
|
|
367
970
|
}
|
|
368
971
|
}, [ref]);
|
|
369
|
-
return /* @__PURE__ */
|
|
972
|
+
return /* @__PURE__ */ import_react18.default.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ import_react18.default.createElement(
|
|
370
973
|
"input",
|
|
371
974
|
{
|
|
372
975
|
type: "checkbox",
|
|
373
976
|
id: inputId,
|
|
374
977
|
ref: setRef,
|
|
375
|
-
className:
|
|
978
|
+
className: cx(
|
|
376
979
|
"appearance-none h-4 w-4 border border-ash rounded-sm bg-graphite",
|
|
377
980
|
"checked:bg-gold checked:border-gold",
|
|
378
981
|
"focus:ring-1 focus:ring-gold focus:ring-offset-1 focus:ring-offset-obsidian",
|
|
@@ -396,21 +999,18 @@ var Checkbox = import_react11.default.forwardRef(
|
|
|
396
999
|
},
|
|
397
1000
|
...rest
|
|
398
1001
|
}
|
|
399
|
-
), label && /* @__PURE__ */
|
|
1002
|
+
), label && /* @__PURE__ */ import_react18.default.createElement("label", { htmlFor: inputId, className: "ml-2 text-sm text-silver cursor-pointer select-none" }, label));
|
|
400
1003
|
}
|
|
401
1004
|
);
|
|
402
1005
|
Checkbox.displayName = "Checkbox";
|
|
403
1006
|
|
|
404
1007
|
// src/components/Radio.tsx
|
|
405
|
-
var
|
|
406
|
-
function cx12(...classes) {
|
|
407
|
-
return classes.filter(Boolean).join(" ");
|
|
408
|
-
}
|
|
1008
|
+
var import_react19 = __toESM(require("react"));
|
|
409
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")`;
|
|
410
|
-
var Radio =
|
|
1010
|
+
var Radio = import_react19.default.forwardRef(
|
|
411
1011
|
({ className, label, id, ...rest }, ref) => {
|
|
412
1012
|
const inputId = id || rest.name || Math.random().toString(36).substr(2, 9);
|
|
413
|
-
const setRef = (0,
|
|
1013
|
+
const setRef = (0, import_react19.useCallback)((node) => {
|
|
414
1014
|
if (node) {
|
|
415
1015
|
if (node.checked) {
|
|
416
1016
|
node.style.backgroundImage = radioDotSvg;
|
|
@@ -422,13 +1022,13 @@ var Radio = import_react12.default.forwardRef(
|
|
|
422
1022
|
ref.current = node;
|
|
423
1023
|
}
|
|
424
1024
|
}, [ref]);
|
|
425
|
-
return /* @__PURE__ */
|
|
1025
|
+
return /* @__PURE__ */ import_react19.default.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ import_react19.default.createElement(
|
|
426
1026
|
"input",
|
|
427
1027
|
{
|
|
428
1028
|
type: "radio",
|
|
429
1029
|
id: inputId,
|
|
430
1030
|
ref: setRef,
|
|
431
|
-
className:
|
|
1031
|
+
className: cx(
|
|
432
1032
|
"appearance-none h-4 w-4 border border-ash rounded-full bg-graphite",
|
|
433
1033
|
"checked:bg-gold checked:border-gold",
|
|
434
1034
|
"focus:ring-1 focus:ring-gold focus:ring-offset-1 focus:ring-offset-obsidian",
|
|
@@ -460,23 +1060,20 @@ var Radio = import_react12.default.forwardRef(
|
|
|
460
1060
|
},
|
|
461
1061
|
...rest
|
|
462
1062
|
}
|
|
463
|
-
), label && /* @__PURE__ */
|
|
1063
|
+
), label && /* @__PURE__ */ import_react19.default.createElement("label", { htmlFor: inputId, className: "ml-2 text-sm text-silver cursor-pointer select-none" }, label));
|
|
464
1064
|
}
|
|
465
1065
|
);
|
|
466
1066
|
Radio.displayName = "Radio";
|
|
467
1067
|
|
|
468
1068
|
// src/components/Switch.tsx
|
|
469
|
-
var
|
|
470
|
-
|
|
471
|
-
return classes.filter(Boolean).join(" ");
|
|
472
|
-
}
|
|
473
|
-
var Switch = import_react13.default.forwardRef(
|
|
1069
|
+
var import_react20 = __toESM(require("react"));
|
|
1070
|
+
var Switch = import_react20.default.forwardRef(
|
|
474
1071
|
({ checked: controlledChecked, defaultChecked = false, onCheckedChange, disabled, className, label, ...rest }, ref) => {
|
|
475
|
-
const [internalChecked, setInternalChecked] = (0,
|
|
1072
|
+
const [internalChecked, setInternalChecked] = (0, import_react20.useState)(defaultChecked);
|
|
476
1073
|
const isControlled = controlledChecked !== void 0;
|
|
477
1074
|
const checked = isControlled ? controlledChecked : internalChecked;
|
|
478
|
-
const buttonRef = (0,
|
|
479
|
-
const setRefs = (0,
|
|
1075
|
+
const buttonRef = (0, import_react20.useRef)(null);
|
|
1076
|
+
const setRefs = (0, import_react20.useCallback)(
|
|
480
1077
|
(node) => {
|
|
481
1078
|
buttonRef.current = node;
|
|
482
1079
|
if (typeof ref === "function") {
|
|
@@ -496,7 +1093,7 @@ var Switch = import_react13.default.forwardRef(
|
|
|
496
1093
|
onCheckedChange?.(newChecked);
|
|
497
1094
|
rest.onClick?.(e);
|
|
498
1095
|
};
|
|
499
|
-
return /* @__PURE__ */
|
|
1096
|
+
return /* @__PURE__ */ import_react20.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react20.default.createElement(
|
|
500
1097
|
"button",
|
|
501
1098
|
{
|
|
502
1099
|
type: "button",
|
|
@@ -506,7 +1103,7 @@ var Switch = import_react13.default.forwardRef(
|
|
|
506
1103
|
disabled,
|
|
507
1104
|
ref: setRefs,
|
|
508
1105
|
onClick: handleClick,
|
|
509
|
-
className:
|
|
1106
|
+
className: cx(
|
|
510
1107
|
"relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent",
|
|
511
1108
|
"transition-colors duration-200 ease-in-out",
|
|
512
1109
|
"focus:outline-none focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2 focus-visible:ring-offset-obsidian",
|
|
@@ -516,17 +1113,17 @@ var Switch = import_react13.default.forwardRef(
|
|
|
516
1113
|
),
|
|
517
1114
|
...rest
|
|
518
1115
|
},
|
|
519
|
-
/* @__PURE__ */
|
|
1116
|
+
/* @__PURE__ */ import_react20.default.createElement(
|
|
520
1117
|
"span",
|
|
521
1118
|
{
|
|
522
|
-
className:
|
|
1119
|
+
className: cx(
|
|
523
1120
|
"pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0",
|
|
524
1121
|
"transition duration-200 ease-in-out",
|
|
525
1122
|
checked ? "translate-x-5" : "translate-x-0"
|
|
526
1123
|
)
|
|
527
1124
|
}
|
|
528
1125
|
)
|
|
529
|
-
), label && /* @__PURE__ */
|
|
1126
|
+
), label && /* @__PURE__ */ import_react20.default.createElement(
|
|
530
1127
|
"span",
|
|
531
1128
|
{
|
|
532
1129
|
className: "text-sm text-silver cursor-pointer",
|
|
@@ -541,54 +1138,303 @@ var Switch = import_react13.default.forwardRef(
|
|
|
541
1138
|
);
|
|
542
1139
|
Switch.displayName = "Switch";
|
|
543
1140
|
|
|
544
|
-
// src/components/
|
|
545
|
-
var
|
|
546
|
-
var
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
var icons = {
|
|
551
|
-
info: import_lucide_react.Info,
|
|
552
|
-
success: import_lucide_react.CheckCircle,
|
|
553
|
-
warning: import_lucide_react.AlertTriangle,
|
|
554
|
-
error: import_lucide_react.XCircle
|
|
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"
|
|
555
1147
|
};
|
|
556
|
-
var
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
error: "bg-error/10 border-error text-error"
|
|
1148
|
+
var SIZE_THUMB = {
|
|
1149
|
+
sm: "h-3 w-3",
|
|
1150
|
+
md: "h-4 w-4",
|
|
1151
|
+
lg: "h-5 w-5"
|
|
561
1152
|
};
|
|
562
|
-
var
|
|
563
|
-
({
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
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",
|
|
572
1421
|
variantStyles[variant],
|
|
573
1422
|
className
|
|
574
1423
|
),
|
|
575
1424
|
...rest
|
|
576
1425
|
},
|
|
577
|
-
/* @__PURE__ */
|
|
578
|
-
/* @__PURE__ */
|
|
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))
|
|
579
1428
|
);
|
|
580
1429
|
}
|
|
581
1430
|
);
|
|
582
1431
|
Alert.displayName = "Alert";
|
|
583
1432
|
|
|
584
1433
|
// src/components/Spinner.tsx
|
|
585
|
-
var
|
|
586
|
-
function cx15(...classes) {
|
|
587
|
-
return classes.filter(Boolean).join(" ");
|
|
588
|
-
}
|
|
1434
|
+
var import_react24 = __toESM(require("react"));
|
|
589
1435
|
var Spinner = ({ className, size = "md", ...rest }) => {
|
|
590
1436
|
const sizeClass = size === "sm" ? "h-4 w-4" : size === "lg" ? "h-8 w-8" : "h-6 w-6";
|
|
591
|
-
return /* @__PURE__ */
|
|
1437
|
+
return /* @__PURE__ */ import_react24.default.createElement(
|
|
592
1438
|
"svg",
|
|
593
1439
|
{
|
|
594
1440
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -598,26 +1444,23 @@ var Spinner = ({ className, size = "md", ...rest }) => {
|
|
|
598
1444
|
strokeWidth: "2",
|
|
599
1445
|
strokeLinecap: "round",
|
|
600
1446
|
strokeLinejoin: "round",
|
|
601
|
-
className:
|
|
1447
|
+
className: cx("animate-spin text-gold", sizeClass, className),
|
|
602
1448
|
...rest
|
|
603
1449
|
},
|
|
604
|
-
/* @__PURE__ */
|
|
1450
|
+
/* @__PURE__ */ import_react24.default.createElement("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
|
|
605
1451
|
);
|
|
606
1452
|
};
|
|
607
1453
|
Spinner.displayName = "Spinner";
|
|
608
1454
|
|
|
609
1455
|
// src/components/Skeleton.tsx
|
|
610
|
-
var
|
|
611
|
-
|
|
612
|
-
return classes.filter(Boolean).join(" ");
|
|
613
|
-
}
|
|
614
|
-
var Skeleton = import_react16.default.forwardRef(
|
|
1456
|
+
var import_react25 = __toESM(require("react"));
|
|
1457
|
+
var Skeleton = import_react25.default.forwardRef(
|
|
615
1458
|
({ className, ...rest }, ref) => {
|
|
616
|
-
return /* @__PURE__ */
|
|
1459
|
+
return /* @__PURE__ */ import_react25.default.createElement(
|
|
617
1460
|
"div",
|
|
618
1461
|
{
|
|
619
1462
|
ref,
|
|
620
|
-
className:
|
|
1463
|
+
className: cx("animate-pulse bg-ash rounded-sm", className),
|
|
621
1464
|
...rest
|
|
622
1465
|
}
|
|
623
1466
|
);
|
|
@@ -625,19 +1468,203 @@ var Skeleton = import_react16.default.forwardRef(
|
|
|
625
1468
|
);
|
|
626
1469
|
Skeleton.displayName = "Skeleton";
|
|
627
1470
|
|
|
628
|
-
// src/components/
|
|
629
|
-
var
|
|
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"));
|
|
630
1530
|
var import_react_dom = require("react-dom");
|
|
631
|
-
var
|
|
632
|
-
|
|
633
|
-
|
|
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
|
+
};
|
|
634
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");
|
|
635
1662
|
var Modal = ({ isOpen, onClose, title, children, className }) => {
|
|
636
|
-
const [mounted, setMounted] = (0,
|
|
637
|
-
(0,
|
|
1663
|
+
const [mounted, setMounted] = (0, import_react28.useState)(false);
|
|
1664
|
+
(0, import_react28.useEffect)(() => {
|
|
638
1665
|
setMounted(true);
|
|
639
1666
|
}, []);
|
|
640
|
-
(0,
|
|
1667
|
+
(0, import_react28.useEffect)(() => {
|
|
641
1668
|
if (isOpen) {
|
|
642
1669
|
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
|
|
643
1670
|
document.body.style.overflow = "hidden";
|
|
@@ -651,7 +1678,7 @@ var Modal = ({ isOpen, onClose, title, children, className }) => {
|
|
|
651
1678
|
document.body.style.paddingRight = "0px";
|
|
652
1679
|
};
|
|
653
1680
|
}, [isOpen]);
|
|
654
|
-
(0,
|
|
1681
|
+
(0, import_react28.useEffect)(() => {
|
|
655
1682
|
const handleEsc = (e) => {
|
|
656
1683
|
if (e.key === "Escape") onClose();
|
|
657
1684
|
};
|
|
@@ -660,46 +1687,1538 @@ var Modal = ({ isOpen, onClose, title, children, className }) => {
|
|
|
660
1687
|
}, [onClose]);
|
|
661
1688
|
if (!mounted) return null;
|
|
662
1689
|
if (!isOpen) return null;
|
|
663
|
-
const content = /* @__PURE__ */
|
|
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(
|
|
664
1691
|
"div",
|
|
665
1692
|
{
|
|
666
1693
|
role: "dialog",
|
|
667
1694
|
"aria-modal": "true",
|
|
668
|
-
className:
|
|
1695
|
+
className: cx(
|
|
669
1696
|
"bg-charcoal border border-gold/30 shadow-2xl z-50 w-full max-w-lg p-6 rounded-none relative",
|
|
670
1697
|
className
|
|
671
1698
|
),
|
|
672
1699
|
"data-state": "open",
|
|
673
1700
|
onClick: (e) => e.stopPropagation()
|
|
674
1701
|
},
|
|
675
|
-
/* @__PURE__ */
|
|
676
|
-
/* @__PURE__ */
|
|
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)
|
|
677
1704
|
));
|
|
678
|
-
return (0,
|
|
1705
|
+
return (0, import_react_dom2.createPortal)(content, document.body);
|
|
679
1706
|
};
|
|
680
1707
|
Modal.displayName = "Modal";
|
|
681
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
|
+
);
|
|
2509
|
+
}
|
|
2510
|
+
);
|
|
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
|
|
2529
|
+
},
|
|
2530
|
+
children
|
|
2531
|
+
);
|
|
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",
|
|
2539
|
+
{
|
|
2540
|
+
ref,
|
|
2541
|
+
className: cx(
|
|
2542
|
+
"flex items-center",
|
|
2543
|
+
className
|
|
2544
|
+
),
|
|
2545
|
+
...props
|
|
2546
|
+
},
|
|
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",
|
|
2556
|
+
{
|
|
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
|
|
2564
|
+
},
|
|
2565
|
+
children
|
|
2566
|
+
);
|
|
2567
|
+
}
|
|
2568
|
+
);
|
|
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";
|
|
2579
|
+
|
|
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",
|
|
2595
|
+
{
|
|
2596
|
+
ref,
|
|
2597
|
+
"aria-current": current ? "page" : void 0,
|
|
2598
|
+
className: cx(
|
|
2599
|
+
"text-sm",
|
|
2600
|
+
current ? "text-white font-medium" : "text-silver",
|
|
2601
|
+
className
|
|
2602
|
+
),
|
|
2603
|
+
...props
|
|
2604
|
+
},
|
|
2605
|
+
children
|
|
2606
|
+
);
|
|
2607
|
+
}
|
|
2608
|
+
);
|
|
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",
|
|
2614
|
+
{
|
|
2615
|
+
ref,
|
|
2616
|
+
className: cx(
|
|
2617
|
+
"text-sm text-silver hover:text-gold transition-colors duration-fast",
|
|
2618
|
+
className
|
|
2619
|
+
),
|
|
2620
|
+
...props
|
|
2621
|
+
},
|
|
2622
|
+
children
|
|
2623
|
+
);
|
|
2624
|
+
}
|
|
2625
|
+
);
|
|
2626
|
+
BreadcrumbLink.displayName = "BreadcrumbLink";
|
|
2627
|
+
|
|
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];
|
|
2658
|
+
}
|
|
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" })
|
|
2694
|
+
),
|
|
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";
|
|
2738
|
+
|
|
2739
|
+
// src/components/Stepper.tsx
|
|
2740
|
+
var import_react38 = __toESM(require("react"));
|
|
2741
|
+
var import_lucide_react9 = require("lucide-react");
|
|
2742
|
+
var Stepper = import_react38.default.forwardRef(
|
|
2743
|
+
({ steps, currentStep, status, className, ...rest }, ref) => {
|
|
2744
|
+
const currentIndex = steps.findIndex((step) => step.id === currentStep);
|
|
2745
|
+
const getStepState = (index) => {
|
|
2746
|
+
if (index < currentIndex) {
|
|
2747
|
+
return "complete";
|
|
2748
|
+
}
|
|
2749
|
+
if (index === currentIndex) {
|
|
2750
|
+
return status || "current";
|
|
2751
|
+
}
|
|
2752
|
+
return "future";
|
|
2753
|
+
};
|
|
2754
|
+
return /* @__PURE__ */ import_react38.default.createElement(
|
|
2755
|
+
"div",
|
|
2756
|
+
{
|
|
2757
|
+
ref,
|
|
2758
|
+
className: cx("flex items-center w-full", className),
|
|
2759
|
+
...rest
|
|
2760
|
+
},
|
|
2761
|
+
steps.map((step, index) => {
|
|
2762
|
+
const state = getStepState(index);
|
|
2763
|
+
const isLast = index === steps.length - 1;
|
|
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(
|
|
2765
|
+
"div",
|
|
2766
|
+
{
|
|
2767
|
+
className: cx(
|
|
2768
|
+
"flex items-center justify-center w-10 h-10 rounded-full border-2 font-semibold text-sm transition-all duration-200",
|
|
2769
|
+
state === "complete" && "bg-gold border-gold text-obsidian",
|
|
2770
|
+
state === "current" && "bg-charcoal border-gold text-gold",
|
|
2771
|
+
state === "error" && "bg-error border-error text-white",
|
|
2772
|
+
state === "future" && "bg-charcoal border-ash text-silver"
|
|
2773
|
+
)
|
|
2774
|
+
},
|
|
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(
|
|
2777
|
+
"span",
|
|
2778
|
+
{
|
|
2779
|
+
className: cx(
|
|
2780
|
+
"mt-2 text-xs font-medium",
|
|
2781
|
+
state === "complete" && "text-gold",
|
|
2782
|
+
state === "current" && "text-white",
|
|
2783
|
+
state === "error" && "text-error",
|
|
2784
|
+
state === "future" && "text-silver"
|
|
2785
|
+
)
|
|
2786
|
+
},
|
|
2787
|
+
step.label
|
|
2788
|
+
)), !isLast && /* @__PURE__ */ import_react38.default.createElement(
|
|
2789
|
+
"div",
|
|
2790
|
+
{
|
|
2791
|
+
className: cx(
|
|
2792
|
+
"flex-1 h-0.5 mx-4 transition-all duration-200",
|
|
2793
|
+
index < currentIndex ? "bg-gold" : "bg-ash"
|
|
2794
|
+
)
|
|
2795
|
+
}
|
|
2796
|
+
));
|
|
2797
|
+
})
|
|
2798
|
+
);
|
|
2799
|
+
}
|
|
2800
|
+
);
|
|
2801
|
+
Stepper.displayName = "Stepper";
|
|
2802
|
+
|
|
2803
|
+
// src/components/Message.tsx
|
|
2804
|
+
var import_react41 = __toESM(require("react"));
|
|
2805
|
+
|
|
2806
|
+
// src/components/MarkdownContent.tsx
|
|
2807
|
+
var import_react39 = __toESM(require("react"));
|
|
2808
|
+
var import_dompurify = __toESM(require("dompurify"));
|
|
2809
|
+
var DEFAULT_SANITIZE_CONFIG = {
|
|
2810
|
+
ALLOWED_TAGS: [
|
|
2811
|
+
"h1",
|
|
2812
|
+
"h2",
|
|
2813
|
+
"h3",
|
|
2814
|
+
"h4",
|
|
2815
|
+
"h5",
|
|
2816
|
+
"h6",
|
|
2817
|
+
"p",
|
|
2818
|
+
"br",
|
|
2819
|
+
"hr",
|
|
2820
|
+
"strong",
|
|
2821
|
+
"b",
|
|
2822
|
+
"em",
|
|
2823
|
+
"i",
|
|
2824
|
+
"u",
|
|
2825
|
+
"s",
|
|
2826
|
+
"strike",
|
|
2827
|
+
"del",
|
|
2828
|
+
"ins",
|
|
2829
|
+
"sup",
|
|
2830
|
+
"sub",
|
|
2831
|
+
"mark",
|
|
2832
|
+
"small",
|
|
2833
|
+
"ul",
|
|
2834
|
+
"ol",
|
|
2835
|
+
"li",
|
|
2836
|
+
"a",
|
|
2837
|
+
"code",
|
|
2838
|
+
"pre",
|
|
2839
|
+
"kbd",
|
|
2840
|
+
"samp",
|
|
2841
|
+
"var",
|
|
2842
|
+
"blockquote",
|
|
2843
|
+
"q",
|
|
2844
|
+
"cite",
|
|
2845
|
+
"abbr",
|
|
2846
|
+
"table",
|
|
2847
|
+
"thead",
|
|
2848
|
+
"tbody",
|
|
2849
|
+
"tfoot",
|
|
2850
|
+
"tr",
|
|
2851
|
+
"th",
|
|
2852
|
+
"td",
|
|
2853
|
+
"caption",
|
|
2854
|
+
"colgroup",
|
|
2855
|
+
"col",
|
|
2856
|
+
"div",
|
|
2857
|
+
"span",
|
|
2858
|
+
"details",
|
|
2859
|
+
"summary"
|
|
2860
|
+
],
|
|
2861
|
+
ALLOWED_ATTR: [
|
|
2862
|
+
"href",
|
|
2863
|
+
"title",
|
|
2864
|
+
"target",
|
|
2865
|
+
"rel",
|
|
2866
|
+
"class",
|
|
2867
|
+
"id",
|
|
2868
|
+
"colspan",
|
|
2869
|
+
"rowspan",
|
|
2870
|
+
"scope",
|
|
2871
|
+
"open"
|
|
2872
|
+
],
|
|
2873
|
+
ADD_ATTR: ["target", "rel"],
|
|
2874
|
+
ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto|tel):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i
|
|
2875
|
+
};
|
|
2876
|
+
function useDOMPurifySetup() {
|
|
2877
|
+
(0, import_react39.useMemo)(() => {
|
|
2878
|
+
import_dompurify.default.addHook("afterSanitizeAttributes", (node) => {
|
|
2879
|
+
if (node.tagName === "A") {
|
|
2880
|
+
node.setAttribute("target", "_blank");
|
|
2881
|
+
node.setAttribute("rel", "noopener noreferrer");
|
|
2882
|
+
}
|
|
2883
|
+
});
|
|
2884
|
+
}, []);
|
|
2885
|
+
}
|
|
2886
|
+
var MarkdownContent = import_react39.default.forwardRef(
|
|
2887
|
+
({ className, content, sanitizeConfig, ...rest }, ref) => {
|
|
2888
|
+
useDOMPurifySetup();
|
|
2889
|
+
const sanitizedHtml = (0, import_react39.useMemo)(() => {
|
|
2890
|
+
if (!content) {
|
|
2891
|
+
return "";
|
|
2892
|
+
}
|
|
2893
|
+
const config = sanitizeConfig ?? DEFAULT_SANITIZE_CONFIG;
|
|
2894
|
+
return import_dompurify.default.sanitize(content, config);
|
|
2895
|
+
}, [content, sanitizeConfig]);
|
|
2896
|
+
return /* @__PURE__ */ import_react39.default.createElement(
|
|
2897
|
+
"div",
|
|
2898
|
+
{
|
|
2899
|
+
ref,
|
|
2900
|
+
className: cx("prose", className),
|
|
2901
|
+
dangerouslySetInnerHTML: { __html: sanitizedHtml },
|
|
2902
|
+
...rest
|
|
2903
|
+
}
|
|
2904
|
+
);
|
|
2905
|
+
}
|
|
2906
|
+
);
|
|
2907
|
+
MarkdownContent.displayName = "MarkdownContent";
|
|
2908
|
+
|
|
2909
|
+
// src/components/StreamingCursor.tsx
|
|
2910
|
+
var import_react40 = __toESM(require("react"));
|
|
2911
|
+
var StreamingCursor = import_react40.default.forwardRef(
|
|
2912
|
+
({ className, variant = "line", ...rest }, ref) => {
|
|
2913
|
+
const variantStyles3 = {
|
|
2914
|
+
block: "w-2.5 h-cursor translate-y-cursor-offset",
|
|
2915
|
+
line: "w-0.5 h-cursor translate-y-cursor-offset",
|
|
2916
|
+
underscore: "w-2.5 h-0.5 self-end mb-0.5"
|
|
2917
|
+
};
|
|
2918
|
+
return /* @__PURE__ */ import_react40.default.createElement(
|
|
2919
|
+
"span",
|
|
2920
|
+
{
|
|
2921
|
+
ref,
|
|
2922
|
+
className: cx(
|
|
2923
|
+
"inline-block bg-current animate-cursor-blink",
|
|
2924
|
+
variantStyles3[variant],
|
|
2925
|
+
className
|
|
2926
|
+
),
|
|
2927
|
+
"aria-hidden": "true",
|
|
2928
|
+
...rest
|
|
2929
|
+
}
|
|
2930
|
+
);
|
|
2931
|
+
}
|
|
2932
|
+
);
|
|
2933
|
+
StreamingCursor.displayName = "StreamingCursor";
|
|
2934
|
+
|
|
2935
|
+
// src/components/Message.tsx
|
|
2936
|
+
var variantStyles2 = {
|
|
2937
|
+
user: "bg-gold text-obsidian ml-auto",
|
|
2938
|
+
assistant: "bg-charcoal border border-ash text-white mr-auto"
|
|
2939
|
+
};
|
|
2940
|
+
var Message = import_react41.default.forwardRef(
|
|
2941
|
+
({ variant = "assistant", className, content, isStreaming, ...rest }, ref) => {
|
|
2942
|
+
const isUser = variant === "user";
|
|
2943
|
+
return /* @__PURE__ */ import_react41.default.createElement(
|
|
2944
|
+
"div",
|
|
2945
|
+
{
|
|
2946
|
+
ref,
|
|
2947
|
+
className: cx(
|
|
2948
|
+
"px-3 py-2 w-fit",
|
|
2949
|
+
variantStyles2[variant],
|
|
2950
|
+
className
|
|
2951
|
+
),
|
|
2952
|
+
...rest
|
|
2953
|
+
},
|
|
2954
|
+
/* @__PURE__ */ import_react41.default.createElement(
|
|
2955
|
+
MarkdownContent,
|
|
2956
|
+
{
|
|
2957
|
+
content,
|
|
2958
|
+
className: cx("prose-sm", isUser ? "prose-inherit" : "prose-invert")
|
|
2959
|
+
}
|
|
2960
|
+
),
|
|
2961
|
+
isStreaming && /* @__PURE__ */ import_react41.default.createElement(StreamingCursor, { className: "ml-0.5" })
|
|
2962
|
+
);
|
|
2963
|
+
}
|
|
2964
|
+
);
|
|
2965
|
+
Message.displayName = "Message";
|
|
2966
|
+
|
|
2967
|
+
// src/components/ChatHistory.tsx
|
|
2968
|
+
var import_react42 = __toESM(require("react"));
|
|
2969
|
+
var ChatHistory = import_react42.default.forwardRef(
|
|
2970
|
+
({ messages, className, ...rest }, ref) => {
|
|
2971
|
+
return /* @__PURE__ */ import_react42.default.createElement(
|
|
2972
|
+
"div",
|
|
2973
|
+
{
|
|
2974
|
+
ref,
|
|
2975
|
+
className: cx("flex flex-col gap-3 w-full", className),
|
|
2976
|
+
...rest
|
|
2977
|
+
},
|
|
2978
|
+
messages.map(({ id, variant, className: messageClassName, ...messageProps }, index) => /* @__PURE__ */ import_react42.default.createElement(
|
|
2979
|
+
Message,
|
|
2980
|
+
{
|
|
2981
|
+
key: id ?? index,
|
|
2982
|
+
variant,
|
|
2983
|
+
className: messageClassName,
|
|
2984
|
+
...messageProps
|
|
2985
|
+
}
|
|
2986
|
+
))
|
|
2987
|
+
);
|
|
2988
|
+
}
|
|
2989
|
+
);
|
|
2990
|
+
ChatHistory.displayName = "ChatHistory";
|
|
2991
|
+
|
|
2992
|
+
// src/components/BrandIcon.tsx
|
|
2993
|
+
var import_react43 = __toESM(require("react"));
|
|
2994
|
+
var sizeMap2 = {
|
|
2995
|
+
sm: "h-8 w-8 text-sm",
|
|
2996
|
+
md: "h-12 w-12 text-base",
|
|
2997
|
+
lg: "h-16 w-16 text-lg"
|
|
2998
|
+
};
|
|
2999
|
+
var BrandIcon = import_react43.default.forwardRef(
|
|
3000
|
+
({ size = "md", variant = "solid", children, className, ...rest }, ref) => {
|
|
3001
|
+
const variantClasses = variant === "solid" ? "bg-gold text-obsidian border-2 border-gold" : "bg-transparent text-gold border-2 border-gold";
|
|
3002
|
+
return /* @__PURE__ */ import_react43.default.createElement(
|
|
3003
|
+
"div",
|
|
3004
|
+
{
|
|
3005
|
+
ref,
|
|
3006
|
+
className: cx(
|
|
3007
|
+
"inline-flex items-center justify-center rounded-none font-bold select-none overflow-hidden",
|
|
3008
|
+
sizeMap2[size],
|
|
3009
|
+
variantClasses,
|
|
3010
|
+
className
|
|
3011
|
+
),
|
|
3012
|
+
...rest
|
|
3013
|
+
},
|
|
3014
|
+
children
|
|
3015
|
+
);
|
|
3016
|
+
}
|
|
3017
|
+
);
|
|
3018
|
+
BrandIcon.displayName = "BrandIcon";
|
|
3019
|
+
|
|
3020
|
+
// src/components/ColorSwatch.tsx
|
|
3021
|
+
var import_react44 = __toESM(require("react"));
|
|
3022
|
+
var ColorSwatch = import_react44.default.forwardRef(
|
|
3023
|
+
({ color, label, className, ...rest }, ref) => {
|
|
3024
|
+
return /* @__PURE__ */ import_react44.default.createElement(
|
|
3025
|
+
"div",
|
|
3026
|
+
{
|
|
3027
|
+
ref,
|
|
3028
|
+
className: cx("flex flex-col items-center gap-2", className),
|
|
3029
|
+
...rest
|
|
3030
|
+
},
|
|
3031
|
+
/* @__PURE__ */ import_react44.default.createElement(
|
|
3032
|
+
"div",
|
|
3033
|
+
{
|
|
3034
|
+
className: "h-16 w-16 border-2 border-ash rounded-none shadow-sm",
|
|
3035
|
+
style: { backgroundColor: color },
|
|
3036
|
+
"aria-label": label || color
|
|
3037
|
+
}
|
|
3038
|
+
),
|
|
3039
|
+
label && /* @__PURE__ */ import_react44.default.createElement("span", { className: "text-xs text-silver font-medium" }, label)
|
|
3040
|
+
);
|
|
3041
|
+
}
|
|
3042
|
+
);
|
|
3043
|
+
ColorSwatch.displayName = "ColorSwatch";
|
|
3044
|
+
|
|
3045
|
+
// src/components/ImageCard.tsx
|
|
3046
|
+
var import_react45 = __toESM(require("react"));
|
|
3047
|
+
var ASPECT_RATIO_PRESETS = {
|
|
3048
|
+
landscape: "3 / 2",
|
|
3049
|
+
portrait: "2 / 3",
|
|
3050
|
+
square: "1 / 1"
|
|
3051
|
+
};
|
|
3052
|
+
function resolveAspectRatio(ratio) {
|
|
3053
|
+
if (ratio in ASPECT_RATIO_PRESETS) {
|
|
3054
|
+
return ASPECT_RATIO_PRESETS[ratio];
|
|
3055
|
+
}
|
|
3056
|
+
return ratio.replace("/", " / ");
|
|
3057
|
+
}
|
|
3058
|
+
var ImageCard = import_react45.default.forwardRef(
|
|
3059
|
+
({
|
|
3060
|
+
src,
|
|
3061
|
+
alt,
|
|
3062
|
+
title,
|
|
3063
|
+
subtitle,
|
|
3064
|
+
aspectRatio,
|
|
3065
|
+
objectFit = "cover",
|
|
3066
|
+
overlay,
|
|
3067
|
+
mediaClassName,
|
|
3068
|
+
contentClassName,
|
|
3069
|
+
className,
|
|
3070
|
+
children,
|
|
3071
|
+
...props
|
|
3072
|
+
}, ref) => {
|
|
3073
|
+
const hasAspectRatio = aspectRatio !== void 0;
|
|
3074
|
+
const isContain = objectFit === "contain";
|
|
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(
|
|
3076
|
+
"div",
|
|
3077
|
+
{
|
|
3078
|
+
className: cx(
|
|
3079
|
+
"relative",
|
|
3080
|
+
hasAspectRatio && "overflow-hidden",
|
|
3081
|
+
mediaClassName
|
|
3082
|
+
),
|
|
3083
|
+
style: hasAspectRatio ? { aspectRatio: resolveAspectRatio(aspectRatio) } : void 0
|
|
3084
|
+
},
|
|
3085
|
+
/* @__PURE__ */ import_react45.default.createElement(
|
|
3086
|
+
"img",
|
|
3087
|
+
{
|
|
3088
|
+
src,
|
|
3089
|
+
alt,
|
|
3090
|
+
className: cx(
|
|
3091
|
+
"block max-w-full",
|
|
3092
|
+
hasAspectRatio && "w-full h-full",
|
|
3093
|
+
hasAspectRatio && (isContain ? "object-contain" : "object-cover"),
|
|
3094
|
+
!hasAspectRatio && "h-auto"
|
|
3095
|
+
)
|
|
3096
|
+
}
|
|
3097
|
+
),
|
|
3098
|
+
overlay && /* @__PURE__ */ import_react45.default.createElement(
|
|
3099
|
+
"div",
|
|
3100
|
+
{
|
|
3101
|
+
className: "absolute inset-0 bg-obsidian/80 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center"
|
|
3102
|
+
},
|
|
3103
|
+
overlay
|
|
3104
|
+
)
|
|
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));
|
|
3106
|
+
}
|
|
3107
|
+
);
|
|
3108
|
+
ImageCard.displayName = "ImageCard";
|
|
3109
|
+
|
|
3110
|
+
// src/components/SectionHeading.tsx
|
|
3111
|
+
var import_react46 = __toESM(require("react"));
|
|
3112
|
+
var levelStyles = {
|
|
3113
|
+
h2: "text-2xl mb-4",
|
|
3114
|
+
h3: "text-xl mb-3"
|
|
3115
|
+
};
|
|
3116
|
+
var SectionHeading = import_react46.default.forwardRef(
|
|
3117
|
+
({ level = "h2", children, className, ...rest }, ref) => {
|
|
3118
|
+
const Component = level;
|
|
3119
|
+
return /* @__PURE__ */ import_react46.default.createElement(
|
|
3120
|
+
Component,
|
|
3121
|
+
{
|
|
3122
|
+
ref,
|
|
3123
|
+
className: cx(
|
|
3124
|
+
"text-gold font-semibold tracking-tight",
|
|
3125
|
+
levelStyles[level],
|
|
3126
|
+
className
|
|
3127
|
+
),
|
|
3128
|
+
...rest
|
|
3129
|
+
},
|
|
3130
|
+
children
|
|
3131
|
+
);
|
|
3132
|
+
}
|
|
3133
|
+
);
|
|
3134
|
+
SectionHeading.displayName = "SectionHeading";
|
|
3135
|
+
|
|
682
3136
|
// src/index.ts
|
|
683
3137
|
var version = "2.0.0";
|
|
684
3138
|
// Annotate the CommonJS export names for ESM import in node:
|
|
685
3139
|
0 && (module.exports = {
|
|
3140
|
+
Accordion,
|
|
3141
|
+
AccordionContent,
|
|
3142
|
+
AccordionItem,
|
|
3143
|
+
AccordionTrigger,
|
|
686
3144
|
Alert,
|
|
3145
|
+
AlertDialog,
|
|
687
3146
|
Avatar,
|
|
688
3147
|
Badge,
|
|
3148
|
+
BrandIcon,
|
|
3149
|
+
Breadcrumb,
|
|
3150
|
+
BreadcrumbItem,
|
|
3151
|
+
BreadcrumbLink,
|
|
689
3152
|
Button,
|
|
690
3153
|
Card,
|
|
3154
|
+
ChatHistory,
|
|
691
3155
|
Checkbox,
|
|
3156
|
+
Col,
|
|
3157
|
+
ColorSwatch,
|
|
3158
|
+
ConfirmDialog,
|
|
3159
|
+
Container,
|
|
3160
|
+
Divider,
|
|
3161
|
+
Drawer,
|
|
692
3162
|
HelperText,
|
|
3163
|
+
ImageCard,
|
|
693
3164
|
Input,
|
|
3165
|
+
InputGroup,
|
|
3166
|
+
InputLeftAddon,
|
|
3167
|
+
InputLeftElement,
|
|
3168
|
+
InputRightAddon,
|
|
3169
|
+
InputRightElement,
|
|
3170
|
+
InputWrapper,
|
|
694
3171
|
Label,
|
|
3172
|
+
List,
|
|
3173
|
+
ListItem,
|
|
3174
|
+
ListItemText,
|
|
3175
|
+
ListSubheader,
|
|
3176
|
+
MarkdownContent,
|
|
3177
|
+
Menu,
|
|
3178
|
+
MenuContent,
|
|
3179
|
+
MenuItem,
|
|
3180
|
+
MenuLabel,
|
|
3181
|
+
MenuSeparator,
|
|
3182
|
+
MenuTrigger,
|
|
3183
|
+
Message,
|
|
695
3184
|
Modal,
|
|
3185
|
+
Navbar,
|
|
3186
|
+
NavbarBrand,
|
|
3187
|
+
NavbarContent,
|
|
3188
|
+
NavbarDivider,
|
|
3189
|
+
NavbarItem,
|
|
3190
|
+
NavbarLink,
|
|
3191
|
+
Pagination,
|
|
3192
|
+
Popover,
|
|
3193
|
+
Progress,
|
|
3194
|
+
PromptDialog,
|
|
696
3195
|
Radio,
|
|
3196
|
+
Row,
|
|
3197
|
+
SectionHeading,
|
|
697
3198
|
Select,
|
|
698
3199
|
Skeleton,
|
|
3200
|
+
Slider,
|
|
699
3201
|
Spinner,
|
|
3202
|
+
Stack,
|
|
3203
|
+
Stepper,
|
|
3204
|
+
StreamingCursor,
|
|
700
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,
|
|
701
3218
|
Textarea,
|
|
3219
|
+
ToastProvider,
|
|
702
3220
|
Tooltip,
|
|
3221
|
+
useToast,
|
|
703
3222
|
version
|
|
704
3223
|
});
|
|
705
3224
|
//# sourceMappingURL=index.js.map
|