@hyddenlabs/hydn-ui 0.0.1-alpha.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js ADDED
@@ -0,0 +1,3042 @@
1
+ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
+ import { createContext, isValidElement, cloneElement, useState, useRef, useEffect, useMemo, createElement, useCallback, useContext } from 'react';
3
+ import { IconX, IconMenu2, IconTrash, IconCheck, IconChevronRight, IconChevronLeft, IconSelector, IconChevronUp, IconChevronDown } from '@tabler/icons-react';
4
+ import { Link, NavLink, useLocation } from 'react-router-dom';
5
+ import { createPortal } from 'react-dom';
6
+
7
+ // src/components/forms/button/button.tsx
8
+ function Button({
9
+ children,
10
+ onClick,
11
+ ariaLabel,
12
+ disabled = false,
13
+ type = "button",
14
+ className = "",
15
+ icon,
16
+ iconPosition = "left",
17
+ variant = "neutral",
18
+ style = "solid",
19
+ size = "md",
20
+ rounded = "default",
21
+ loading = false,
22
+ fullWidth = false,
23
+ wide = false,
24
+ active = false
25
+ }) {
26
+ const isIconOnly = icon && !children;
27
+ if (isIconOnly && !ariaLabel) {
28
+ console.warn("Button: Icon-only buttons require an ariaLabel for accessibility");
29
+ }
30
+ const solidVariantClasses = {
31
+ neutral: "bg-neutral text-neutral-foreground hover:bg-neutral/90 active:bg-neutral/80",
32
+ primary: "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80",
33
+ secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90 active:bg-secondary/80",
34
+ accent: "bg-accent text-accent-foreground hover:bg-accent/90 active:bg-accent/80",
35
+ info: "bg-info text-info-foreground hover:bg-info/90 active:bg-info/80",
36
+ success: "bg-success text-success-foreground hover:bg-success/90 active:bg-success/80",
37
+ warning: "bg-warning text-warning-foreground hover:bg-warning/90 active:bg-warning/80",
38
+ error: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80"
39
+ };
40
+ const outlineVariantClasses = {
41
+ neutral: "border-2 border-neutral text-neutral bg-transparent hover:bg-neutral hover:text-neutral-foreground",
42
+ primary: "border-2 border-primary text-primary bg-transparent hover:bg-primary hover:text-primary-foreground",
43
+ secondary: "border-2 border-secondary text-secondary bg-transparent hover:bg-secondary hover:text-secondary-foreground",
44
+ accent: "border-2 border-accent text-accent bg-transparent hover:bg-accent hover:text-accent-foreground",
45
+ info: "border-2 border-info text-info bg-transparent hover:bg-info hover:text-info-foreground",
46
+ success: "border-2 border-success text-success bg-transparent hover:bg-success hover:text-success-foreground",
47
+ warning: "border-2 border-warning text-warning bg-transparent hover:bg-warning hover:text-warning-foreground",
48
+ error: "border-2 border-destructive text-destructive bg-transparent hover:bg-destructive hover:text-destructive-foreground"
49
+ };
50
+ const ghostVariantClasses = {
51
+ neutral: "bg-transparent text-foreground hover:bg-neutral/10 active:bg-neutral/20",
52
+ primary: "bg-transparent text-primary hover:bg-primary/10 active:bg-primary/20",
53
+ secondary: "bg-transparent text-secondary hover:bg-secondary/10 active:bg-secondary/20",
54
+ accent: "bg-transparent text-accent hover:bg-accent/10 active:bg-accent/20",
55
+ info: "bg-transparent text-info hover:bg-info/10 active:bg-info/20",
56
+ success: "bg-transparent text-success hover:bg-success/10 active:bg-success/20",
57
+ warning: "bg-transparent text-warning hover:bg-warning/10 active:bg-warning/20",
58
+ error: "bg-transparent text-destructive hover:bg-destructive/10 active:bg-destructive/20"
59
+ };
60
+ const softVariantClasses = {
61
+ neutral: "bg-neutral/20 text-foreground hover:bg-neutral/30 active:bg-neutral/40",
62
+ primary: "bg-primary/20 text-primary hover:bg-primary/30 active:bg-primary/40",
63
+ secondary: "bg-secondary/20 text-secondary hover:bg-secondary/30 active:bg-secondary/40",
64
+ accent: "bg-accent/20 text-accent hover:bg-accent/30 active:bg-accent/40",
65
+ info: "bg-info/20 text-info hover:bg-info/30 active:bg-info/40",
66
+ success: "bg-success/20 text-success hover:bg-success/30 active:bg-success/40",
67
+ warning: "bg-warning/20 text-warning hover:bg-warning/30 active:bg-warning/40",
68
+ error: "bg-destructive/20 text-destructive hover:bg-destructive/30 active:bg-destructive/40"
69
+ };
70
+ const linkVariantClasses = {
71
+ neutral: "bg-transparent text-foreground underline-offset-4 hover:underline",
72
+ primary: "bg-transparent text-primary underline-offset-4 hover:underline",
73
+ secondary: "bg-transparent text-secondary underline-offset-4 hover:underline",
74
+ accent: "bg-transparent text-accent underline-offset-4 hover:underline",
75
+ info: "bg-transparent text-info underline-offset-4 hover:underline",
76
+ success: "bg-transparent text-success underline-offset-4 hover:underline",
77
+ warning: "bg-transparent text-warning underline-offset-4 hover:underline",
78
+ error: "bg-transparent text-destructive underline-offset-4 hover:underline"
79
+ };
80
+ const getStyleClasses = () => {
81
+ const variantKey = variant;
82
+ switch (style) {
83
+ case "outline":
84
+ return `${outlineVariantClasses[variantKey]} active:scale-95`;
85
+ case "ghost":
86
+ return ghostVariantClasses[variantKey];
87
+ case "link":
88
+ return linkVariantClasses[variantKey];
89
+ case "soft":
90
+ return softVariantClasses[variantKey];
91
+ case "solid":
92
+ default:
93
+ return `${solidVariantClasses[variantKey]} shadow-sm hover:shadow-md`;
94
+ }
95
+ };
96
+ const sizeClasses = {
97
+ xs: "h-6 px-2 text-xs min-h-6",
98
+ sm: "h-8 px-3 text-sm min-h-8",
99
+ md: "h-10 px-4 text-base min-h-10",
100
+ lg: "h-12 px-6 text-lg min-h-12",
101
+ xl: "h-14 px-8 text-xl min-h-14"
102
+ };
103
+ const roundedClasses = {
104
+ default: "rounded-md",
105
+ pill: "rounded-full",
106
+ square: "rounded-none aspect-square",
107
+ circle: "rounded-full aspect-square"
108
+ };
109
+ const displayIcon = loading ? /* @__PURE__ */ jsxs("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
110
+ /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
111
+ /* @__PURE__ */ jsx(
112
+ "path",
113
+ {
114
+ className: "opacity-75",
115
+ fill: "currentColor",
116
+ d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
117
+ }
118
+ )
119
+ ] }) : icon;
120
+ const styleClasses = getStyleClasses();
121
+ const widthClasses = fullWidth ? "w-full" : wide ? "px-8" : "";
122
+ const activeClasses = active ? "active:scale-95" : "";
123
+ return /* @__PURE__ */ jsxs(
124
+ "button",
125
+ {
126
+ type,
127
+ onClick,
128
+ "aria-label": ariaLabel,
129
+ disabled: disabled || loading,
130
+ className: `inline-flex items-center justify-center ${roundedClasses[rounded]} font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 ${styleClasses} ${sizeClasses[size]} ${isIconOnly ? "p-0" : ""} ${widthClasses} ${activeClasses} ${className}`,
131
+ children: [
132
+ displayIcon && iconPosition === "left" && /* @__PURE__ */ jsx("span", { className: `inline-flex ${children ? "mr-2" : ""}`, children: displayIcon }),
133
+ children,
134
+ displayIcon && iconPosition === "right" && /* @__PURE__ */ jsx("span", { className: `inline-flex ${children ? "ml-2" : ""}`, children: displayIcon })
135
+ ]
136
+ }
137
+ );
138
+ }
139
+ Button.displayName = "Button";
140
+ var button_default = Button;
141
+ function Input({
142
+ value,
143
+ onChange,
144
+ placeholder,
145
+ disabled = false,
146
+ type = "text",
147
+ className = "",
148
+ ariaLabel,
149
+ id,
150
+ name,
151
+ required = false,
152
+ size = "md",
153
+ validationState = "default"
154
+ }) {
155
+ const sizeClasses = {
156
+ sm: "h-8 px-3 py-1.5 text-sm",
157
+ md: "h-10 px-3 py-2 text-sm",
158
+ lg: "h-12 px-4 py-3 text-base"
159
+ };
160
+ const validationClasses = {
161
+ default: "border-input focus:border-ring",
162
+ error: "border-destructive focus:border-destructive",
163
+ success: "border-success focus:border-success",
164
+ warning: "border-warning focus:border-warning"
165
+ };
166
+ return /* @__PURE__ */ jsx(
167
+ "input",
168
+ {
169
+ type,
170
+ value,
171
+ onChange,
172
+ placeholder,
173
+ disabled,
174
+ "aria-label": ariaLabel,
175
+ id,
176
+ name,
177
+ required,
178
+ "aria-invalid": validationState === "error",
179
+ className: `flex w-full rounded-lg border bg-background shadow-sm transition-all duration-200 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring/20 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50 ${sizeClasses[size]} ${validationClasses[validationState]} ${className}`
180
+ }
181
+ );
182
+ }
183
+ Input.displayName = "Input";
184
+ var input_default = Input;
185
+ function Checkbox({
186
+ checked,
187
+ onChange,
188
+ disabled = false,
189
+ className = "",
190
+ ariaLabel,
191
+ id,
192
+ name
193
+ }) {
194
+ return /* @__PURE__ */ jsx(
195
+ "input",
196
+ {
197
+ type: "checkbox",
198
+ checked,
199
+ onChange,
200
+ disabled,
201
+ "aria-label": ariaLabel,
202
+ id,
203
+ name,
204
+ className: `h-4 w-4 rounded border-2 border-input bg-background text-primary transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50 checked:bg-primary checked:border-primary hover:border-ring cursor-pointer ${className}`
205
+ }
206
+ );
207
+ }
208
+ Checkbox.displayName = "Checkbox";
209
+ var checkbox_default = Checkbox;
210
+ function Radio({
211
+ checked,
212
+ onChange,
213
+ disabled = false,
214
+ className = "",
215
+ ariaLabel,
216
+ id,
217
+ name,
218
+ value
219
+ }) {
220
+ return /* @__PURE__ */ jsx(
221
+ "input",
222
+ {
223
+ type: "radio",
224
+ checked,
225
+ onChange,
226
+ disabled,
227
+ "aria-label": ariaLabel,
228
+ id,
229
+ name,
230
+ value,
231
+ className: `w-4 h-4 text-primary border-2 border-input bg-background transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-muted/50 checked:bg-primary checked:border-primary hover:border-ring cursor-pointer ${className}`
232
+ }
233
+ );
234
+ }
235
+ Radio.displayName = "Radio";
236
+ var radio_default = Radio;
237
+ function Select({
238
+ value,
239
+ onChange,
240
+ disabled = false,
241
+ className = "",
242
+ ariaLabel,
243
+ id,
244
+ name,
245
+ children,
246
+ required = false,
247
+ size = "md",
248
+ validationState = "default"
249
+ }) {
250
+ const sizeClasses = {
251
+ sm: "h-8 px-3 py-1.5 text-sm",
252
+ md: "h-10 px-3 py-2 text-sm pr-10",
253
+ lg: "h-12 px-4 py-3 text-base pr-10"
254
+ };
255
+ const validationClasses = {
256
+ default: "border-input focus:border-ring",
257
+ error: "border-destructive focus:border-destructive",
258
+ success: "border-success focus:border-success",
259
+ warning: "border-warning focus:border-warning"
260
+ };
261
+ return /* @__PURE__ */ jsx(
262
+ "select",
263
+ {
264
+ value,
265
+ onChange,
266
+ disabled,
267
+ "aria-label": ariaLabel,
268
+ id,
269
+ name,
270
+ required,
271
+ "aria-invalid": validationState === "error",
272
+ className: `flex w-full rounded-lg border bg-background shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring/20 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50 appearance-none bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20stroke%3D%22%236b7280%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M6%208l4%204%204-4%22%2F%3E%3C%2Fsvg%3E')] bg-[length:1.5em] bg-[right_0.5rem_center] bg-no-repeat ${sizeClasses[size]} ${validationClasses[validationState]} ${className}`,
273
+ children
274
+ }
275
+ );
276
+ }
277
+ Select.displayName = "Select";
278
+ var select_default = Select;
279
+ function SelectItem({ value, disabled = false, children }) {
280
+ return /* @__PURE__ */ jsx("option", { value, disabled, children });
281
+ }
282
+ SelectItem.displayName = "SelectItem";
283
+ var select_item_default = SelectItem;
284
+ function Textarea({
285
+ value,
286
+ onChange,
287
+ placeholder,
288
+ disabled = false,
289
+ className = "",
290
+ ariaLabel,
291
+ id,
292
+ name,
293
+ rows = 3,
294
+ required = false,
295
+ validationState = "default"
296
+ }) {
297
+ const validationClasses = {
298
+ default: "border-input focus:border-ring",
299
+ error: "border-destructive focus:border-destructive",
300
+ success: "border-success focus:border-success",
301
+ warning: "border-warning focus:border-warning"
302
+ };
303
+ return /* @__PURE__ */ jsx(
304
+ "textarea",
305
+ {
306
+ value,
307
+ onChange,
308
+ placeholder,
309
+ disabled,
310
+ "aria-label": ariaLabel,
311
+ id,
312
+ name,
313
+ rows,
314
+ required,
315
+ "aria-invalid": validationState === "error",
316
+ className: `flex min-h-[80px] w-full rounded-lg border bg-background px-3 py-2 text-sm shadow-sm transition-all duration-200 placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring/20 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50 resize-y ${validationClasses[validationState]} ${className}`
317
+ }
318
+ );
319
+ }
320
+ Textarea.displayName = "Textarea";
321
+ var textarea_default = Textarea;
322
+ function Switch({
323
+ checked = false,
324
+ onChange,
325
+ disabled = false,
326
+ className = "",
327
+ ariaLabel,
328
+ id,
329
+ name,
330
+ size = "md",
331
+ variant
332
+ }) {
333
+ const handleChange = (e) => {
334
+ onChange?.(e.target.checked);
335
+ };
336
+ const sizeStyles = {
337
+ xs: {
338
+ container: "h-4 w-8",
339
+ handle: "h-3 w-3",
340
+ padding: "p-0.5",
341
+ translate: checked ? "translate-x-4" : "translate-x-0"
342
+ },
343
+ sm: {
344
+ container: "h-5 w-10",
345
+ handle: "h-4 w-4",
346
+ padding: "p-0.5",
347
+ translate: checked ? "translate-x-5" : "translate-x-0"
348
+ },
349
+ md: {
350
+ container: "h-6 w-12",
351
+ handle: "h-5 w-5",
352
+ padding: "p-0.5",
353
+ translate: checked ? "translate-x-6" : "translate-x-0"
354
+ },
355
+ lg: {
356
+ container: "h-7 w-14",
357
+ handle: "h-6 w-6",
358
+ padding: "p-0.5",
359
+ translate: checked ? "translate-x-7" : "translate-x-0"
360
+ },
361
+ xl: {
362
+ container: "h-8 w-16",
363
+ handle: "h-7 w-7",
364
+ padding: "p-0.5",
365
+ translate: checked ? "translate-x-8" : "translate-x-0"
366
+ }
367
+ };
368
+ const getVariantColors = () => {
369
+ if (!checked) {
370
+ return "bg-input border-input";
371
+ }
372
+ switch (variant) {
373
+ case "secondary":
374
+ return "bg-secondary border-secondary";
375
+ case "accent":
376
+ return "bg-accent border-accent";
377
+ case "success":
378
+ return "bg-success border-success";
379
+ case "warning":
380
+ return "bg-warning border-warning";
381
+ case "info":
382
+ return "bg-info border-info";
383
+ case "error":
384
+ return "bg-destructive border-destructive";
385
+ case "neutral":
386
+ return "bg-neutral border-neutral";
387
+ case "primary":
388
+ default:
389
+ return "bg-primary border-primary";
390
+ }
391
+ };
392
+ const styles = sizeStyles[size];
393
+ return /* @__PURE__ */ jsxs(
394
+ "label",
395
+ {
396
+ className: `relative inline-flex ${styles.container} ${styles.padding} items-center rounded-full border transition-all duration-200 cursor-pointer ${disabled ? "opacity-30 cursor-not-allowed" : ""} ${getVariantColors()} ${className}`,
397
+ children: [
398
+ /* @__PURE__ */ jsx(
399
+ "input",
400
+ {
401
+ type: "checkbox",
402
+ role: "switch",
403
+ checked,
404
+ onChange: handleChange,
405
+ disabled,
406
+ "aria-label": ariaLabel,
407
+ id,
408
+ name,
409
+ className: "sr-only"
410
+ }
411
+ ),
412
+ /* @__PURE__ */ jsx(
413
+ "span",
414
+ {
415
+ className: `inline-block ${styles.handle} rounded-full bg-background shadow-sm transition-transform duration-200 ${styles.translate}`
416
+ }
417
+ )
418
+ ]
419
+ }
420
+ );
421
+ }
422
+ Switch.displayName = "Switch";
423
+ var switch_default = Switch;
424
+ function Slider({
425
+ value = 50,
426
+ onChange,
427
+ min = 0,
428
+ max = 100,
429
+ step = 1,
430
+ disabled = false,
431
+ className = "",
432
+ ariaLabel,
433
+ id,
434
+ name
435
+ }) {
436
+ const handleChange = (e) => {
437
+ onChange?.(Number(e.target.value));
438
+ };
439
+ return /* @__PURE__ */ jsx(
440
+ "input",
441
+ {
442
+ type: "range",
443
+ value,
444
+ onChange: handleChange,
445
+ min,
446
+ max,
447
+ step,
448
+ disabled,
449
+ "aria-label": ariaLabel,
450
+ id,
451
+ name,
452
+ className: `w-full h-2 bg-muted/30 rounded-lg appearance-none cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-muted/40 ${className}`,
453
+ style: {
454
+ background: `linear-gradient(to right, hsl(var(--primary)) 0%, hsl(var(--primary)) ${(value - min) / (max - min) * 100}%, hsl(var(--muted) / 0.3) ${(value - min) / (max - min) * 100}%, hsl(var(--muted) / 0.3) 100%)`
455
+ }
456
+ }
457
+ );
458
+ }
459
+ Slider.displayName = "Slider";
460
+ var slider_default = Slider;
461
+ function ButtonGroup({
462
+ children,
463
+ className = "",
464
+ variant = "default",
465
+ orientation = "horizontal"
466
+ }) {
467
+ const baseClasses = "inline-flex";
468
+ const orientationClasses = orientation === "horizontal" ? "flex-row" : "flex-col";
469
+ let variantClasses = "";
470
+ if (variant === "separated") {
471
+ variantClasses = "gap-2";
472
+ } else if (orientation === "horizontal") {
473
+ variantClasses = "[&>button]:rounded-none [&>button:first-child]:rounded-l-md [&>button:last-child]:rounded-r-md [&>button:not(:last-child)]:border-r-0";
474
+ } else {
475
+ variantClasses = "[&>button]:rounded-none [&>button:first-child]:rounded-t-md [&>button:last-child]:rounded-b-md [&>button:not(:last-child)]:border-b-0";
476
+ }
477
+ return /* @__PURE__ */ jsx("div", { className: `${baseClasses} ${orientationClasses} ${variantClasses} ${className}`, children });
478
+ }
479
+ ButtonGroup.displayName = "ButtonGroup";
480
+ var button_group_default = ButtonGroup;
481
+ function RadioGroup({
482
+ children,
483
+ name: _name,
484
+ label,
485
+ orientation = "vertical",
486
+ className = ""
487
+ }) {
488
+ const orientationClasses = orientation === "horizontal" ? "flex flex-row gap-4" : "flex flex-col gap-2";
489
+ return /* @__PURE__ */ jsxs("fieldset", { className, children: [
490
+ label && /* @__PURE__ */ jsx("legend", { className: "text-sm font-medium text-foreground mb-2", children: label }),
491
+ /* @__PURE__ */ jsx("div", { className: orientationClasses, role: "radiogroup", children })
492
+ ] });
493
+ }
494
+ RadioGroup.displayName = "RadioGroup";
495
+ var radio_group_default = RadioGroup;
496
+ function Text({
497
+ children,
498
+ variant = "body",
499
+ size,
500
+ weight = "semibold",
501
+ // elevated default weight
502
+ className = "",
503
+ noMargin = false
504
+ }) {
505
+ const variantClasses = {
506
+ body: "text-foreground",
507
+ muted: "text-muted-foreground",
508
+ small: "text-muted-foreground"
509
+ };
510
+ const sizeClasses = {
511
+ xs: "text-xs",
512
+ sm: "text-sm",
513
+ base: "text-base",
514
+ lg: "text-lg",
515
+ xl: "text-xl"
516
+ };
517
+ const weightClasses = {
518
+ normal: "font-normal",
519
+ medium: "font-medium",
520
+ semibold: "font-semibold",
521
+ bold: "font-bold"
522
+ };
523
+ const defaultSizes = {
524
+ body: "lg",
525
+ // bigger default body text
526
+ muted: "base",
527
+ // muted still readable
528
+ small: "sm"
529
+ // small bumped up slightly
530
+ };
531
+ const finalSize = size || defaultSizes[variant];
532
+ const margin = noMargin ? "" : "mb-4";
533
+ return /* @__PURE__ */ jsx(
534
+ "p",
535
+ {
536
+ className: `${variantClasses[variant]} ${sizeClasses[finalSize]} ${weightClasses[weight]} ${margin} ${className}`,
537
+ children
538
+ }
539
+ );
540
+ }
541
+ Text.displayName = "Text";
542
+ var text_default = Text;
543
+ function Stack({
544
+ children,
545
+ className = "",
546
+ direction = "vertical",
547
+ spacing = "md",
548
+ align = "stretch",
549
+ justify
550
+ }) {
551
+ const spacingClasses = {
552
+ none: "gap-0",
553
+ sm: "gap-2",
554
+ md: "gap-4",
555
+ lg: "gap-6",
556
+ xl: "gap-8"
557
+ };
558
+ const alignClasses = {
559
+ start: "items-start",
560
+ center: "items-center",
561
+ end: "items-end",
562
+ stretch: "items-stretch"
563
+ };
564
+ const justifyClasses = {
565
+ start: "justify-start",
566
+ center: "justify-center",
567
+ end: "justify-end",
568
+ between: "justify-between",
569
+ around: "justify-around"
570
+ };
571
+ const directionClass = direction === "horizontal" ? "flex-row" : "flex-col";
572
+ const justifyClass = justify ? justifyClasses[justify] : "";
573
+ return /* @__PURE__ */ jsx(
574
+ "div",
575
+ {
576
+ "data-component": "Stack",
577
+ className: `flex ${directionClass} ${spacingClasses[spacing]} ${alignClasses[align]} ${justifyClass} ${className}`,
578
+ children
579
+ }
580
+ );
581
+ }
582
+ Stack.displayName = "Stack";
583
+ var stack_default = Stack;
584
+ function FormField({
585
+ children,
586
+ label,
587
+ htmlFor,
588
+ error,
589
+ helperText,
590
+ required = false,
591
+ className = "",
592
+ validationState = "default"
593
+ }) {
594
+ const effectiveValidationState = error ? "error" : validationState;
595
+ const childWithValidation = isValidElement(children) ? cloneElement(children, {
596
+ validationState: effectiveValidationState
597
+ }) : children;
598
+ return /* @__PURE__ */ jsxs(stack_default, { direction: "vertical", spacing: "sm", className, children: [
599
+ label && /* @__PURE__ */ jsx("label", { htmlFor, children: /* @__PURE__ */ jsxs(text_default, { variant: "body", size: "sm", noMargin: true, className: "font-medium", children: [
600
+ label,
601
+ required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
602
+ ] }) }),
603
+ childWithValidation,
604
+ error && /* @__PURE__ */ jsx(text_default, { variant: "body", size: "sm", noMargin: true, className: "text-destructive", children: error }),
605
+ !error && helperText && /* @__PURE__ */ jsx(text_default, { variant: "muted", size: "sm", noMargin: true, children: helperText })
606
+ ] });
607
+ }
608
+ FormField.displayName = "FormField";
609
+ var form_field_default = FormField;
610
+ function InputGroup({ children, prefix, suffix, className = "" }) {
611
+ return /* @__PURE__ */ jsxs("div", { className: `flex items-stretch ${className}`, children: [
612
+ prefix && /* @__PURE__ */ jsx("div", { className: "flex items-center px-3 bg-muted border border-r-0 border-input rounded-l-md", children: prefix }),
613
+ children,
614
+ suffix && /* @__PURE__ */ jsx("div", { className: "flex items-center px-3 bg-muted border border-l-0 border-input rounded-r-md", children: suffix })
615
+ ] });
616
+ }
617
+ InputGroup.displayName = "InputGroup";
618
+ var input_group_default = InputGroup;
619
+ function Nav({ children, className = "", ariaLabel = "Main navigation" }) {
620
+ return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className: `flex items-center ${className}`, children });
621
+ }
622
+ Nav.displayName = "Nav";
623
+ var nav_default = Nav;
624
+ function Container({
625
+ children,
626
+ className = "",
627
+ size = "lg",
628
+ padding = "lg",
629
+ align = "center"
630
+ }) {
631
+ const sizeClasses = {
632
+ sm: "max-w-screen-sm",
633
+ md: "max-w-screen-md",
634
+ lg: "max-w-screen-lg",
635
+ xl: "max-w-screen-xl",
636
+ full: "max-w-full"
637
+ };
638
+ const paddingClasses = {
639
+ none: "",
640
+ sm: "py-6",
641
+ md: "py-8",
642
+ lg: "py-12",
643
+ xl: "py-16"
644
+ };
645
+ const alignClasses = {
646
+ start: "mr-auto",
647
+ center: "mx-auto",
648
+ end: "ml-auto"
649
+ };
650
+ return /* @__PURE__ */ jsx("div", { className: `px-4 ${sizeClasses[size]} ${paddingClasses[padding]} ${alignClasses[align]} ${className}`, children });
651
+ }
652
+ Container.displayName = "Container";
653
+ var container_default = Container;
654
+ function Navbar({
655
+ brand,
656
+ children,
657
+ sticky = true,
658
+ className = "",
659
+ actions,
660
+ size = "xl",
661
+ appearance = "solid",
662
+ border = "none",
663
+ disableMobileMenu = false
664
+ }) {
665
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
666
+ const appearanceClasses = {
667
+ solid: "bg-background",
668
+ blur: "bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80",
669
+ transparent: "bg-transparent"
670
+ };
671
+ const borderClasses = {
672
+ none: "",
673
+ bottom: "border-b border-border",
674
+ top: "border-t border-border",
675
+ both: "border-y border-border"
676
+ };
677
+ return /* @__PURE__ */ jsx(
678
+ "nav",
679
+ {
680
+ className: `${sticky ? "sticky top-0 z-50" : ""} ${appearanceClasses[appearance]} ${borderClasses[border]} ${className}`,
681
+ children: /* @__PURE__ */ jsxs(container_default, { padding: "none", size, children: [
682
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between h-16", children: [
683
+ brand && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: brand }),
684
+ /* @__PURE__ */ jsx("div", { className: "hidden md:flex md:items-center md:space-x-6 md:flex-1 md:ml-10", children }),
685
+ actions && /* @__PURE__ */ jsx("div", { className: `${disableMobileMenu ? "flex" : "hidden md:flex"} items-center space-x-4`, children: actions }),
686
+ !disableMobileMenu && /* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsx(
687
+ button_default,
688
+ {
689
+ variant: "neutral",
690
+ style: "ghost",
691
+ size: "sm",
692
+ icon: mobileMenuOpen ? /* @__PURE__ */ jsx(IconX, { size: 24 }) : /* @__PURE__ */ jsx(IconMenu2, { size: 24 }),
693
+ ariaLabel: "Toggle menu",
694
+ onClick: () => setMobileMenuOpen(!mobileMenuOpen)
695
+ }
696
+ ) })
697
+ ] }),
698
+ !disableMobileMenu && mobileMenuOpen && /* @__PURE__ */ jsxs("div", { className: "md:hidden py-4 space-y-3 border-t border-border", children: [
699
+ children,
700
+ actions && /* @__PURE__ */ jsx("div", { className: "pt-4 border-t border-border space-y-2", children: actions })
701
+ ] })
702
+ ] })
703
+ }
704
+ );
705
+ }
706
+ Navbar.displayName = "Navbar";
707
+ var navbar_default = Navbar;
708
+ function NavbarBrand({ children, href, external = false, onClick, className = "" }) {
709
+ const content = /* @__PURE__ */ jsx("span", { className: `text-lg md:text-xl font-bold ${className}`, children });
710
+ const linkClassName = "no-underline text-foreground hover:text-primary transition-colors";
711
+ if (href) {
712
+ if (external) {
713
+ return /* @__PURE__ */ jsx("a", { href, className: linkClassName, target: "_blank", rel: "noopener noreferrer", children: content });
714
+ }
715
+ return /* @__PURE__ */ jsx(Link, { to: href, className: linkClassName, children: content });
716
+ }
717
+ if (onClick) {
718
+ return /* @__PURE__ */ jsx("button", { onClick, className: linkClassName, children: content });
719
+ }
720
+ return content;
721
+ }
722
+ NavbarBrand.displayName = "NavbarBrand";
723
+ var navbar_brand_default = NavbarBrand;
724
+ function NavbarLink({ href, children, external = false, className = "", end = false }) {
725
+ const baseClassName = `block md:inline-block py-2 md:py-0 font-medium transition-colors no-underline ${className}`;
726
+ if (external) {
727
+ return /* @__PURE__ */ jsx(
728
+ "a",
729
+ {
730
+ href,
731
+ target: "_blank",
732
+ rel: "noopener noreferrer",
733
+ className: `${baseClassName} text-foreground hover:text-primary`,
734
+ children
735
+ }
736
+ );
737
+ }
738
+ if (href.startsWith("#")) {
739
+ return /* @__PURE__ */ jsx("a", { href, className: `${baseClassName} text-foreground hover:text-primary`, children });
740
+ }
741
+ return /* @__PURE__ */ jsx(
742
+ NavLink,
743
+ {
744
+ to: href,
745
+ end,
746
+ className: ({ isActive }) => `${baseClassName} ${isActive ? "text-primary font-semibold border-b-2 border-primary" : "text-foreground hover:text-primary"}`,
747
+ children
748
+ }
749
+ );
750
+ }
751
+ NavbarLink.displayName = "NavbarLink";
752
+ var navbar_link_default = NavbarLink;
753
+ function Tabs({ tabs, defaultTab, className = "", ariaLabel = "Tabs" }) {
754
+ const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id);
755
+ return /* @__PURE__ */ jsxs("div", { className, children: [
756
+ /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": ariaLabel, className: "flex border-b-2 border-border/50", children: tabs.map((tab) => /* @__PURE__ */ jsx(
757
+ "button",
758
+ {
759
+ role: "tab",
760
+ "aria-selected": activeTab === tab.id,
761
+ "aria-controls": `panel-${tab.id}`,
762
+ id: `tab-${tab.id}`,
763
+ onClick: () => setActiveTab(tab.id),
764
+ className: `px-4 py-3 font-medium cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 relative ${activeTab === tab.id ? "text-primary after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary after:rounded-t" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"}`,
765
+ children: tab.label
766
+ },
767
+ tab.id
768
+ )) }),
769
+ tabs.map((tab) => /* @__PURE__ */ jsx(
770
+ "div",
771
+ {
772
+ role: "tabpanel",
773
+ id: `panel-${tab.id}`,
774
+ "aria-labelledby": `tab-${tab.id}`,
775
+ hidden: activeTab !== tab.id,
776
+ className: "pt-6",
777
+ children: tab.content
778
+ },
779
+ tab.id
780
+ ))
781
+ ] });
782
+ }
783
+ Tabs.displayName = "Tabs";
784
+ var tabs_default = Tabs;
785
+ function Dropdown({ trigger, children, className = "" }) {
786
+ const [isOpen, setIsOpen] = useState(false);
787
+ const dropdownRef = useRef(null);
788
+ useEffect(() => {
789
+ const handleClickOutside = (event) => {
790
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
791
+ setIsOpen(false);
792
+ }
793
+ };
794
+ const handleEscape = (event) => {
795
+ if (event.key === "Escape") {
796
+ setIsOpen(false);
797
+ }
798
+ };
799
+ if (isOpen) {
800
+ document.addEventListener("mousedown", handleClickOutside);
801
+ document.addEventListener("keydown", handleEscape);
802
+ return () => {
803
+ document.removeEventListener("mousedown", handleClickOutside);
804
+ document.removeEventListener("keydown", handleEscape);
805
+ };
806
+ }
807
+ return void 0;
808
+ }, [isOpen]);
809
+ return /* @__PURE__ */ jsxs("div", { ref: dropdownRef, className: `relative ${className}`, children: [
810
+ /* @__PURE__ */ jsx(
811
+ "button",
812
+ {
813
+ onClick: () => setIsOpen(!isOpen),
814
+ className: "bg-transparent border-0 p-0 cursor-pointer outline-none",
815
+ type: "button",
816
+ "aria-expanded": isOpen,
817
+ "aria-haspopup": "true",
818
+ children: trigger
819
+ }
820
+ ),
821
+ isOpen && /* @__PURE__ */ jsx(
822
+ "div",
823
+ {
824
+ className: "absolute left-0 mt-2 bg-popover text-popover-foreground border border-border rounded-lg shadow-xl z-50 min-w-[180px] animate-scaleIn",
825
+ onClick: () => setIsOpen(false),
826
+ onKeyDown: (e) => e.key === "Enter" && setIsOpen(false),
827
+ role: "menu",
828
+ tabIndex: -1,
829
+ children
830
+ }
831
+ )
832
+ ] });
833
+ }
834
+ Dropdown.displayName = "Dropdown";
835
+ var dropdown_default = Dropdown;
836
+ function Breadcrumbs({ items, separator = "/", className = "" }) {
837
+ return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsx("ol", { className: "flex items-center space-x-2 text-sm", children: items.map((item, index) => {
838
+ const isLast = index === items.length - 1;
839
+ const key = item.href || item.label;
840
+ return /* @__PURE__ */ jsxs("li", { className: "flex items-center", children: [
841
+ item.href && !isLast ? /* @__PURE__ */ jsx(
842
+ "a",
843
+ {
844
+ href: item.href,
845
+ className: "text-primary hover:text-primary/80 hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ring rounded px-1 -mx-1",
846
+ children: item.label
847
+ }
848
+ ) : /* @__PURE__ */ jsx("span", { className: isLast ? "text-foreground font-medium" : "text-muted-foreground", children: item.label }),
849
+ !isLast && /* @__PURE__ */ jsx("span", { className: "mx-2 text-muted-foreground select-none", "aria-hidden": "true", children: separator })
850
+ ] }, key);
851
+ }) }) });
852
+ }
853
+ Breadcrumbs.displayName = "Breadcrumbs";
854
+ var breadcrumbs_default = Breadcrumbs;
855
+ function Pagination({
856
+ currentPage,
857
+ totalPages,
858
+ onPageChange,
859
+ siblingCount = 1,
860
+ className = ""
861
+ }) {
862
+ const getPageNumbers = () => {
863
+ const pages = [];
864
+ const leftSibling = Math.max(currentPage - siblingCount, 1);
865
+ const rightSibling = Math.min(currentPage + siblingCount, totalPages);
866
+ if (leftSibling > 2) {
867
+ pages.push(1, "...");
868
+ } else {
869
+ for (let i = 1; i < leftSibling; i++) {
870
+ pages.push(i);
871
+ }
872
+ }
873
+ for (let i = leftSibling; i <= rightSibling; i++) {
874
+ pages.push(i);
875
+ }
876
+ if (rightSibling < totalPages - 1) {
877
+ pages.push("...", totalPages);
878
+ } else {
879
+ for (let i = rightSibling + 1; i <= totalPages; i++) {
880
+ pages.push(i);
881
+ }
882
+ }
883
+ return pages;
884
+ };
885
+ return /* @__PURE__ */ jsx("nav", { "aria-label": "Pagination", className, children: /* @__PURE__ */ jsxs("ul", { className: "flex items-center space-x-1", children: [
886
+ /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
887
+ "button",
888
+ {
889
+ onClick: () => onPageChange(currentPage - 1),
890
+ disabled: currentPage === 1,
891
+ className: "px-3 py-2 rounded-lg border border-border hover:bg-accent hover:text-accent-foreground transition-colors duration-200 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-ring",
892
+ "aria-label": "Previous page",
893
+ children: "\u2190"
894
+ }
895
+ ) }),
896
+ getPageNumbers().map((page, index) => {
897
+ const key = typeof page === "number" ? `page-${page}` : `ellipsis-${index}`;
898
+ return /* @__PURE__ */ jsx("li", { children: typeof page === "number" ? /* @__PURE__ */ jsx(
899
+ "button",
900
+ {
901
+ onClick: () => onPageChange(page),
902
+ className: `px-3 py-2 rounded-lg border cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring ${page === currentPage ? "bg-primary text-primary-foreground border-primary shadow-sm" : "border-border hover:bg-accent hover:text-accent-foreground hover:border-accent"}`,
903
+ "aria-label": `Page ${page}`,
904
+ "aria-current": page === currentPage ? "page" : void 0,
905
+ children: page
906
+ }
907
+ ) : /* @__PURE__ */ jsx("span", { className: "px-3 py-2 text-muted-foreground", children: "..." }) }, key);
908
+ }),
909
+ /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
910
+ "button",
911
+ {
912
+ onClick: () => onPageChange(currentPage + 1),
913
+ disabled: currentPage === totalPages,
914
+ className: "px-3 py-2 rounded-lg border border-border hover:bg-accent hover:text-accent-foreground transition-colors duration-200 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-ring",
915
+ "aria-label": "Next page",
916
+ children: "\u2192"
917
+ }
918
+ ) })
919
+ ] }) });
920
+ }
921
+ Pagination.displayName = "Pagination";
922
+ var pagination_default = Pagination;
923
+ function Sidebar({ children, className = "", width = "16rem" }) {
924
+ const widthClass = width === "16rem" ? "w-64" : width === "4rem" ? "w-16" : "";
925
+ return /* @__PURE__ */ jsx(
926
+ "nav",
927
+ {
928
+ className: `bg-muted border-r border-border ${widthClass || ""} ${className}`,
929
+ style: !widthClass ? { width } : void 0,
930
+ "aria-label": "Sidebar navigation",
931
+ children
932
+ }
933
+ );
934
+ }
935
+ Sidebar.displayName = "Sidebar";
936
+ var sidebar_default = Sidebar;
937
+ function Stepper({
938
+ steps,
939
+ currentStep,
940
+ className = "",
941
+ orientation = "horizontal",
942
+ onStepClick,
943
+ clickable = false
944
+ }) {
945
+ const getStepStatus = (index) => {
946
+ const step = steps[index];
947
+ if (step.status) return step.status;
948
+ if (index < currentStep) return "completed";
949
+ if (index === currentStep) return "current";
950
+ return "pending";
951
+ };
952
+ const renderStep = (step, index) => {
953
+ const status = getStepStatus(index) || "pending";
954
+ const isClickable = clickable && status !== "pending";
955
+ const statusStyles = {
956
+ pending: {
957
+ circle: "bg-muted text-muted-foreground border-2 border-muted",
958
+ title: "text-muted-foreground",
959
+ description: "text-muted-foreground"
960
+ },
961
+ current: {
962
+ circle: "bg-primary text-primary-foreground border-2 border-primary",
963
+ title: "text-foreground font-semibold",
964
+ description: "text-muted-foreground"
965
+ },
966
+ completed: {
967
+ circle: "bg-success text-success-foreground border-2 border-success",
968
+ title: "text-foreground",
969
+ description: "text-muted-foreground"
970
+ },
971
+ error: {
972
+ circle: "bg-destructive text-destructive-foreground border-2 border-destructive",
973
+ title: "text-destructive",
974
+ description: "text-destructive"
975
+ }
976
+ };
977
+ const styles = statusStyles[status];
978
+ const handleClick = () => {
979
+ if (isClickable && onStepClick) {
980
+ onStepClick(index);
981
+ }
982
+ };
983
+ const handleKeyDown = (e) => {
984
+ if (isClickable && onStepClick && (e.key === "Enter" || e.key === " ")) {
985
+ e.preventDefault();
986
+ onStepClick(index);
987
+ }
988
+ };
989
+ if (orientation === "horizontal") {
990
+ return /* @__PURE__ */ jsxs(
991
+ "div",
992
+ {
993
+ className: `flex-1 flex flex-col items-center ${isClickable ? "cursor-pointer" : ""}`,
994
+ onClick: handleClick,
995
+ onKeyDown: handleKeyDown,
996
+ role: isClickable ? "button" : void 0,
997
+ tabIndex: isClickable ? 0 : void 0,
998
+ "aria-label": isClickable ? `Go to step ${index + 1}: ${step.title}` : void 0,
999
+ children: [
1000
+ /* @__PURE__ */ jsxs("div", { className: "relative flex items-center w-full", children: [
1001
+ index > 0 && /* @__PURE__ */ jsx(
1002
+ "div",
1003
+ {
1004
+ className: `h-0.5 flex-1 ${status === "completed" || status === "current" ? "bg-success" : "bg-muted"}`
1005
+ }
1006
+ ),
1007
+ /* @__PURE__ */ jsx(
1008
+ "div",
1009
+ {
1010
+ className: `
1011
+ relative z-10 flex items-center justify-center
1012
+ w-10 h-10 rounded-full transition-colors
1013
+ ${styles.circle}
1014
+ `,
1015
+ children: status === "completed" ? /* @__PURE__ */ jsx(IconCheck, { className: "w-5 h-5" }) : step.icon ? step.icon : /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: index + 1 })
1016
+ }
1017
+ ),
1018
+ index < steps.length - 1 && /* @__PURE__ */ jsx("div", { className: `h-0.5 flex-1 ${status === "completed" ? "bg-success" : "bg-muted"}` })
1019
+ ] }),
1020
+ /* @__PURE__ */ jsxs("div", { className: "mt-3 text-center", children: [
1021
+ /* @__PURE__ */ jsxs("div", { className: `text-sm ${styles.title}`, children: [
1022
+ step.title,
1023
+ step.optional && /* @__PURE__ */ jsx("span", { className: "ml-1 text-xs text-muted-foreground", children: "(Optional)" })
1024
+ ] }),
1025
+ step.description && /* @__PURE__ */ jsx("div", { className: `text-xs mt-1 ${styles.description}`, children: step.description })
1026
+ ] })
1027
+ ]
1028
+ },
1029
+ index
1030
+ );
1031
+ }
1032
+ return /* @__PURE__ */ jsxs(
1033
+ "div",
1034
+ {
1035
+ className: `flex gap-4 ${index < steps.length - 1 ? "pb-8" : ""} ${isClickable ? "cursor-pointer" : ""}`,
1036
+ onClick: handleClick,
1037
+ onKeyDown: handleKeyDown,
1038
+ role: isClickable ? "button" : void 0,
1039
+ tabIndex: isClickable ? 0 : void 0,
1040
+ "aria-label": isClickable ? `Go to step ${index + 1}: ${step.title}` : void 0,
1041
+ children: [
1042
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
1043
+ /* @__PURE__ */ jsx(
1044
+ "div",
1045
+ {
1046
+ className: `
1047
+ flex items-center justify-center
1048
+ w-10 h-10 rounded-full transition-colors flex-shrink-0
1049
+ ${styles.circle}
1050
+ `,
1051
+ children: status === "completed" ? /* @__PURE__ */ jsx(IconCheck, { className: "w-5 h-5" }) : step.icon ? step.icon : /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: index + 1 })
1052
+ }
1053
+ ),
1054
+ index < steps.length - 1 && /* @__PURE__ */ jsx("div", { className: `w-0.5 flex-1 mt-2 ${status === "completed" ? "bg-success" : "bg-muted"}` })
1055
+ ] }),
1056
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 pt-2", children: [
1057
+ /* @__PURE__ */ jsxs("div", { className: `text-base ${styles.title}`, children: [
1058
+ step.title,
1059
+ step.optional && /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: "(Optional)" })
1060
+ ] }),
1061
+ step.description && /* @__PURE__ */ jsx("div", { className: `text-sm mt-1 ${styles.description}`, children: step.description })
1062
+ ] })
1063
+ ]
1064
+ },
1065
+ index
1066
+ );
1067
+ };
1068
+ return /* @__PURE__ */ jsx(
1069
+ "div",
1070
+ {
1071
+ className: `
1072
+ ${orientation === "horizontal" ? "flex items-start" : "flex flex-col"}
1073
+ ${className}
1074
+ `,
1075
+ children: steps.map((step, index) => renderStep(step, index))
1076
+ }
1077
+ );
1078
+ }
1079
+ Stepper.displayName = "Stepper";
1080
+ var stepper_default = Stepper;
1081
+ function Toast({ message, children, type = "info", onClose, className = "" }) {
1082
+ const typeClasses = {
1083
+ info: "bg-info text-info-foreground",
1084
+ success: "bg-success text-success-foreground",
1085
+ warning: "bg-warning text-warning-foreground",
1086
+ error: "bg-destructive text-destructive-foreground"
1087
+ };
1088
+ return /* @__PURE__ */ jsxs(
1089
+ "div",
1090
+ {
1091
+ role: "alert",
1092
+ "aria-live": "polite",
1093
+ className: `fixed bottom-4 right-4 px-4 py-3 rounded-md shadow-lg ${typeClasses[type]} ${className}`,
1094
+ children: [
1095
+ /* @__PURE__ */ jsx("span", { children: children || message }),
1096
+ onClose && /* @__PURE__ */ jsx("button", { onClick: onClose, className: "ml-4 font-bold", "aria-label": "Close", children: "\xD7" })
1097
+ ]
1098
+ }
1099
+ );
1100
+ }
1101
+ Toast.displayName = "Toast";
1102
+ var toast_default = Toast;
1103
+ function Tooltip({
1104
+ children,
1105
+ content,
1106
+ position = "top",
1107
+ variant = "default",
1108
+ open = false,
1109
+ usePortal = false,
1110
+ className = ""
1111
+ }) {
1112
+ const [showTooltip, setShowTooltip] = useState(false);
1113
+ const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
1114
+ const triggerRef = useRef(null);
1115
+ const isVisible = open || showTooltip;
1116
+ useEffect(() => {
1117
+ if (usePortal && isVisible && triggerRef.current) {
1118
+ const rect = triggerRef.current.getBoundingClientRect();
1119
+ const positions = {
1120
+ top: {
1121
+ top: rect.top - 8,
1122
+ left: rect.left + rect.width / 2
1123
+ },
1124
+ bottom: {
1125
+ top: rect.bottom + 8,
1126
+ left: rect.left + rect.width / 2
1127
+ },
1128
+ left: {
1129
+ top: rect.top + rect.height / 2,
1130
+ left: rect.left - 8
1131
+ },
1132
+ right: {
1133
+ top: rect.top + rect.height / 2,
1134
+ left: rect.right + 8
1135
+ }
1136
+ };
1137
+ setTooltipPosition(positions[position]);
1138
+ }
1139
+ }, [usePortal, isVisible, position]);
1140
+ const variantClasses = {
1141
+ default: "bg-popover text-popover-foreground",
1142
+ primary: "bg-primary text-primary-foreground",
1143
+ secondary: "bg-secondary text-secondary-foreground",
1144
+ accent: "bg-accent text-accent-foreground",
1145
+ info: "bg-blue-500 text-white",
1146
+ success: "bg-green-500 text-white",
1147
+ warning: "bg-yellow-500 text-gray-900",
1148
+ error: "bg-red-500 text-white",
1149
+ neutral: "bg-gray-700 text-white dark:bg-gray-300 dark:text-gray-900"
1150
+ };
1151
+ const arrowColorClasses = {
1152
+ default: "before:border-popover",
1153
+ primary: "before:border-primary",
1154
+ secondary: "before:border-secondary",
1155
+ accent: "before:border-accent",
1156
+ info: "before:border-blue-500",
1157
+ success: "before:border-green-500",
1158
+ warning: "before:border-yellow-500",
1159
+ error: "before:border-red-500",
1160
+ neutral: "before:border-gray-700 dark:before:border-gray-300"
1161
+ };
1162
+ const portalPositionClasses = {
1163
+ top: "-translate-x-1/2 -translate-y-full before:left-1/2 before:-translate-x-1/2 before:top-full before:border-l-transparent before:border-r-transparent before:border-b-transparent",
1164
+ bottom: "-translate-x-1/2 before:left-1/2 before:-translate-x-1/2 before:bottom-full before:border-l-transparent before:border-r-transparent before:border-t-transparent",
1165
+ left: "-translate-x-full -translate-y-1/2 before:left-full before:top-1/2 before:-translate-y-1/2 before:border-t-transparent before:border-b-transparent before:border-r-transparent",
1166
+ right: "-translate-y-1/2 before:right-full before:top-1/2 before:-translate-y-1/2 before:border-t-transparent before:border-b-transparent before:border-l-transparent"
1167
+ };
1168
+ const absolutePositionClasses = {
1169
+ top: "bottom-full left-1/2 -translate-x-1/2 mb-2 before:left-1/2 before:-translate-x-1/2 before:top-full before:border-l-transparent before:border-r-transparent before:border-b-transparent",
1170
+ bottom: "top-full left-1/2 -translate-x-1/2 mt-2 before:left-1/2 before:-translate-x-1/2 before:bottom-full before:border-l-transparent before:border-r-transparent before:border-t-transparent",
1171
+ left: "right-full top-1/2 -translate-y-1/2 mr-2 before:top-1/2 before:-translate-y-1/2 before:left-full before:border-t-transparent before:border-b-transparent before:border-r-transparent",
1172
+ right: "left-full top-1/2 -translate-y-1/2 ml-2 before:top-1/2 before:-translate-y-1/2 before:right-full before:border-t-transparent before:border-b-transparent before:border-l-transparent"
1173
+ };
1174
+ const positionClasses = usePortal ? portalPositionClasses : absolutePositionClasses;
1175
+ const tooltipContent = /* @__PURE__ */ jsx(
1176
+ "span",
1177
+ {
1178
+ className: `
1179
+ ${usePortal ? "fixed" : "absolute"}
1180
+ z-[9999]
1181
+ px-3 py-2
1182
+ text-sm font-medium
1183
+ rounded-lg
1184
+ shadow-lg
1185
+ whitespace-nowrap
1186
+ pointer-events-none
1187
+ transition-opacity duration-200
1188
+ ${variantClasses[variant]}
1189
+ ${positionClasses[position]}
1190
+ ${arrowColorClasses[variant]}
1191
+ ${isVisible ? "opacity-100 visible" : "opacity-0 invisible"}
1192
+ before:content-['']
1193
+ before:absolute
1194
+ before:border-4
1195
+ before:border-solid
1196
+ `,
1197
+ style: usePortal ? {
1198
+ top: `${tooltipPosition.top}px`,
1199
+ left: `${tooltipPosition.left}px`
1200
+ } : void 0,
1201
+ role: "tooltip",
1202
+ "aria-hidden": !isVisible,
1203
+ children: content
1204
+ }
1205
+ );
1206
+ return /* @__PURE__ */ jsxs(
1207
+ "span",
1208
+ {
1209
+ ref: triggerRef,
1210
+ className: `group relative inline-flex ${usePortal ? "" : "w-full"} ${className}`,
1211
+ "data-position": position,
1212
+ onMouseEnter: () => !open && setShowTooltip(true),
1213
+ onMouseLeave: () => !open && setShowTooltip(false),
1214
+ onFocus: () => !open && setShowTooltip(true),
1215
+ onBlur: () => !open && setShowTooltip(false),
1216
+ children: [
1217
+ children,
1218
+ usePortal && isVisible ? createPortal(tooltipContent, document.body) : !usePortal && tooltipContent
1219
+ ]
1220
+ }
1221
+ );
1222
+ }
1223
+ Tooltip.displayName = "Tooltip";
1224
+ var tooltip_default = Tooltip;
1225
+ function Modal({ isOpen, onClose, children, className = "", ariaLabel }) {
1226
+ useEffect(() => {
1227
+ const handleEscape = (e) => {
1228
+ if (e.key === "Escape") {
1229
+ e.preventDefault();
1230
+ onClose();
1231
+ }
1232
+ };
1233
+ if (isOpen) {
1234
+ document.body.style.overflow = "hidden";
1235
+ document.addEventListener("keydown", handleEscape);
1236
+ return () => {
1237
+ document.body.style.overflow = "";
1238
+ document.removeEventListener("keydown", handleEscape);
1239
+ };
1240
+ }
1241
+ return void 0;
1242
+ }, [isOpen, onClose]);
1243
+ if (!isOpen) return null;
1244
+ return (
1245
+ // Backdrop: fixed overlay, centered grid, semi-transparent black background
1246
+ /* @__PURE__ */ jsx(
1247
+ "div",
1248
+ {
1249
+ className: "fixed inset-0 z-[999] grid place-items-center bg-black/40 backdrop-blur-sm p-4 overflow-y-auto overscroll-contain",
1250
+ onClick: onClose,
1251
+ onKeyDown: (e) => e.key === "Escape" && onClose(),
1252
+ role: "button",
1253
+ "aria-label": ariaLabel || "Close modal",
1254
+ tabIndex: 0,
1255
+ children: /* @__PURE__ */ jsx(
1256
+ "div",
1257
+ {
1258
+ className: `relative w-11/12 max-w-2xl max-h-[calc(100vh-5em)] bg-card text-card-foreground rounded-2xl border border-border shadow-2xl p-6 ${className}`,
1259
+ role: "dialog",
1260
+ "aria-modal": "true",
1261
+ children
1262
+ }
1263
+ )
1264
+ }
1265
+ )
1266
+ );
1267
+ }
1268
+ Modal.displayName = "Modal";
1269
+ var modal_default = Modal;
1270
+ function Dialog({ isOpen, onClose, title, children, actions, className = "" }) {
1271
+ return /* @__PURE__ */ jsx(modal_default, { isOpen, onClose, ariaLabel: title, className, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-6 gap-4", children: [
1272
+ /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-foreground", children: title }),
1273
+ /* @__PURE__ */ jsx("div", { className: "text-foreground", children }),
1274
+ actions && /* @__PURE__ */ jsx("div", { className: "flex justify-end gap-3 pt-2", children: actions })
1275
+ ] }) });
1276
+ }
1277
+ Dialog.displayName = "Dialog";
1278
+ var dialog_default = Dialog;
1279
+ function DeleteDialog({
1280
+ isOpen,
1281
+ onClose,
1282
+ onConfirm,
1283
+ title = "Confirm Deletion",
1284
+ description,
1285
+ itemName,
1286
+ isLoading = false,
1287
+ confirmText = "Delete",
1288
+ cancelText = "Cancel",
1289
+ className = ""
1290
+ }) {
1291
+ const defaultDescription = itemName ? `Are you sure you want to delete "${itemName}"? This action cannot be undone.` : "Are you sure you want to delete this item? This action cannot be undone.";
1292
+ const finalDescription = description || defaultDescription;
1293
+ return /* @__PURE__ */ jsx(
1294
+ dialog_default,
1295
+ {
1296
+ isOpen,
1297
+ onClose,
1298
+ title,
1299
+ className,
1300
+ actions: /* @__PURE__ */ jsxs(Fragment, { children: [
1301
+ /* @__PURE__ */ jsx(
1302
+ button_default,
1303
+ {
1304
+ onClick: onClose,
1305
+ disabled: isLoading,
1306
+ className: "bg-muted hover:bg-muted/80 text-muted-foreground",
1307
+ icon: /* @__PURE__ */ jsx(IconX, { size: 16 }),
1308
+ children: cancelText
1309
+ }
1310
+ ),
1311
+ /* @__PURE__ */ jsx(
1312
+ button_default,
1313
+ {
1314
+ onClick: onConfirm,
1315
+ disabled: isLoading,
1316
+ className: "bg-destructive hover:bg-destructive/90 text-destructive-foreground",
1317
+ icon: /* @__PURE__ */ jsx(IconTrash, { size: 16 }),
1318
+ children: isLoading ? "Deleting..." : confirmText
1319
+ }
1320
+ )
1321
+ ] }),
1322
+ children: /* @__PURE__ */ jsx("p", { className: "text-foreground", children: finalDescription })
1323
+ }
1324
+ );
1325
+ }
1326
+ DeleteDialog.displayName = "DeleteDialog";
1327
+ var delete_dialog_default = DeleteDialog;
1328
+ function Popover({ trigger, children, content, position = "bottom", className = "" }) {
1329
+ const [isOpen, setIsOpen] = useState(false);
1330
+ const popoverRef = useRef(null);
1331
+ const triggerContent = children || trigger;
1332
+ useEffect(() => {
1333
+ const handleClickOutside = (event) => {
1334
+ if (popoverRef.current && !popoverRef.current.contains(event.target)) {
1335
+ setIsOpen(false);
1336
+ }
1337
+ };
1338
+ const handleEscape = (event) => {
1339
+ if (event.key === "Escape") {
1340
+ setIsOpen(false);
1341
+ }
1342
+ };
1343
+ if (isOpen) {
1344
+ document.addEventListener("mousedown", handleClickOutside);
1345
+ document.addEventListener("keydown", handleEscape);
1346
+ return () => {
1347
+ document.removeEventListener("mousedown", handleClickOutside);
1348
+ document.removeEventListener("keydown", handleEscape);
1349
+ };
1350
+ }
1351
+ return void 0;
1352
+ }, [isOpen]);
1353
+ const positionClasses = {
1354
+ top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
1355
+ bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
1356
+ left: "right-full top-1/2 -translate-y-1/2 mr-2",
1357
+ right: "left-full top-1/2 -translate-y-1/2 ml-2"
1358
+ };
1359
+ return /* @__PURE__ */ jsxs("div", { className: `relative inline-block ${className}`, ref: popoverRef, children: [
1360
+ /* @__PURE__ */ jsx(
1361
+ "button",
1362
+ {
1363
+ onClick: () => setIsOpen(!isOpen),
1364
+ className: "bg-transparent border-0 p-0 cursor-pointer",
1365
+ type: "button",
1366
+ "aria-expanded": isOpen,
1367
+ "aria-haspopup": "true",
1368
+ children: triggerContent
1369
+ }
1370
+ ),
1371
+ isOpen && /* @__PURE__ */ jsx(
1372
+ "div",
1373
+ {
1374
+ className: `absolute min-w-[200px] bg-popover text-popover-foreground border border-border rounded-lg shadow-xl p-4 z-50 animate-scaleIn ${positionClasses[position]}`,
1375
+ role: "tooltip",
1376
+ children: content
1377
+ }
1378
+ )
1379
+ ] });
1380
+ }
1381
+ Popover.displayName = "Popover";
1382
+ var popover_default = Popover;
1383
+ function Alert({ children, type = "info", dismissible = false, onClose, className = "" }) {
1384
+ const typeClasses = {
1385
+ info: "bg-info/10 text-info-foreground border-info/30",
1386
+ success: "bg-success/10 text-success-foreground border-success/30",
1387
+ warning: "bg-warning/10 text-warning-foreground border-warning/30",
1388
+ error: "bg-destructive/10 text-destructive-foreground border-destructive/30"
1389
+ };
1390
+ const iconClasses = {
1391
+ info: "text-info",
1392
+ success: "text-success",
1393
+ warning: "text-warning",
1394
+ error: "text-destructive"
1395
+ };
1396
+ const icons = {
1397
+ info: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 flex-shrink-0", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(
1398
+ "path",
1399
+ {
1400
+ fillRule: "evenodd",
1401
+ d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z",
1402
+ clipRule: "evenodd"
1403
+ }
1404
+ ) }),
1405
+ success: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 flex-shrink-0", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(
1406
+ "path",
1407
+ {
1408
+ fillRule: "evenodd",
1409
+ d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
1410
+ clipRule: "evenodd"
1411
+ }
1412
+ ) }),
1413
+ warning: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 flex-shrink-0", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(
1414
+ "path",
1415
+ {
1416
+ fillRule: "evenodd",
1417
+ d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
1418
+ clipRule: "evenodd"
1419
+ }
1420
+ ) }),
1421
+ error: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 flex-shrink-0", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(
1422
+ "path",
1423
+ {
1424
+ fillRule: "evenodd",
1425
+ d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
1426
+ clipRule: "evenodd"
1427
+ }
1428
+ ) })
1429
+ };
1430
+ return /* @__PURE__ */ jsxs("div", { role: "alert", className: `p-4 border rounded-lg flex items-start gap-3 ${typeClasses[type]} ${className}`, children: [
1431
+ /* @__PURE__ */ jsx("div", { className: iconClasses[type], children: icons[type] }),
1432
+ /* @__PURE__ */ jsx("div", { className: "flex-1 text-sm", children }),
1433
+ dismissible && onClose && /* @__PURE__ */ jsx(
1434
+ "button",
1435
+ {
1436
+ onClick: onClose,
1437
+ className: "flex-shrink-0 text-current opacity-70 hover:opacity-100 transition-opacity focus:outline-none focus:ring-2 focus:ring-ring rounded p-0.5",
1438
+ "aria-label": "Close alert",
1439
+ children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
1440
+ }
1441
+ )
1442
+ ] });
1443
+ }
1444
+ Alert.displayName = "Alert";
1445
+ var alert_default = Alert;
1446
+ function Spinner({ size = "md", variant = "primary", className = "", speed, ...props }) {
1447
+ const sizeClasses = {
1448
+ sm: "w-4 h-4 border-2",
1449
+ md: "w-8 h-8 border-2",
1450
+ lg: "w-12 h-12 border-4"
1451
+ };
1452
+ const variantTopBorder = {
1453
+ primary: "border-t-primary",
1454
+ accent: "border-t-accent",
1455
+ secondary: "border-t-secondary",
1456
+ neutral: "border-t-neutral"
1457
+ }[variant];
1458
+ const duration = speed ? `[animation-duration:${speed}]` : "";
1459
+ return /* @__PURE__ */ jsx(
1460
+ "div",
1461
+ {
1462
+ role: "status",
1463
+ "aria-label": "Loading",
1464
+ "data-variant": variant,
1465
+ className: `inline-block border-muted ${variantTopBorder} rounded-full animate-spin ${duration} ${sizeClasses[size]} ${className}`,
1466
+ ...props,
1467
+ children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading..." })
1468
+ }
1469
+ );
1470
+ }
1471
+ Spinner.displayName = "Spinner";
1472
+ var spinner_default = Spinner;
1473
+ function ProgressBar({
1474
+ value,
1475
+ max = 100,
1476
+ showLabel = false,
1477
+ variant = "default",
1478
+ className = ""
1479
+ }) {
1480
+ const percentage = Math.min(value / max * 100, 100);
1481
+ const variantClasses = {
1482
+ default: "bg-primary",
1483
+ success: "bg-success",
1484
+ warning: "bg-warning",
1485
+ error: "bg-destructive"
1486
+ };
1487
+ return /* @__PURE__ */ jsxs("div", { className, children: [
1488
+ /* @__PURE__ */ jsx("div", { className: "w-full bg-muted/30 rounded-full h-2.5 overflow-hidden shadow-inner", children: /* @__PURE__ */ jsx(
1489
+ "div",
1490
+ {
1491
+ role: "progressbar",
1492
+ "aria-valuenow": value,
1493
+ "aria-valuemin": 0,
1494
+ "aria-valuemax": max,
1495
+ className: `h-full transition-all duration-500 ease-out rounded-full ${variantClasses[variant]}`,
1496
+ style: { width: `${percentage}%` }
1497
+ }
1498
+ ) }),
1499
+ showLabel && /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground mt-2 text-right font-medium", children: [
1500
+ Math.round(percentage),
1501
+ "%"
1502
+ ] })
1503
+ ] });
1504
+ }
1505
+ ProgressBar.displayName = "ProgressBar";
1506
+ var progress_bar_default = ProgressBar;
1507
+ function Skeleton({ variant = "text", width, height, className = "", ...props }) {
1508
+ const variantClasses = {
1509
+ text: "rounded h-4",
1510
+ circular: "rounded-full",
1511
+ rectangular: "rounded-md"
1512
+ };
1513
+ const style = {
1514
+ width: width || (variant === "circular" ? "40px" : "100%"),
1515
+ height: height || (variant === "circular" ? "40px" : void 0)
1516
+ };
1517
+ return /* @__PURE__ */ jsx(
1518
+ "div",
1519
+ {
1520
+ className: `bg-muted animate-pulse ${variantClasses[variant]} ${className}`,
1521
+ style,
1522
+ "aria-busy": "true",
1523
+ "aria-live": "polite",
1524
+ ...props,
1525
+ children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading..." })
1526
+ }
1527
+ );
1528
+ }
1529
+ Skeleton.displayName = "Skeleton";
1530
+ var skeleton_default = Skeleton;
1531
+ function Badge({ children, variant = "default", size = "md", className = "", ...props }) {
1532
+ const variantClasses = {
1533
+ default: "bg-muted text-muted-foreground border border-border",
1534
+ primary: "bg-primary/10 text-primary border border-primary/20",
1535
+ success: "bg-success/10 text-success border border-success/20",
1536
+ warning: "bg-warning/10 text-warning border border-warning/20",
1537
+ error: "bg-destructive/10 text-destructive border border-destructive/20"
1538
+ };
1539
+ const sizeClasses = {
1540
+ sm: "px-2 py-0.5 text-xs",
1541
+ md: "px-2.5 py-0.5 text-xs font-semibold",
1542
+ lg: "px-3 py-1 text-sm font-semibold"
1543
+ };
1544
+ return /* @__PURE__ */ jsx(
1545
+ "span",
1546
+ {
1547
+ className: `inline-flex items-center font-medium rounded-full transition-colors ${variantClasses[variant]} ${sizeClasses[size]} ${className}`,
1548
+ ...props,
1549
+ children
1550
+ }
1551
+ );
1552
+ }
1553
+ Badge.displayName = "Badge";
1554
+ var badge_default = Badge;
1555
+ function StatusLabel({
1556
+ children,
1557
+ status = "info",
1558
+ size = "md",
1559
+ variant = "filled",
1560
+ className = ""
1561
+ }) {
1562
+ const statusConfig = {
1563
+ active: {
1564
+ filled: "bg-success/10 text-success border-success/20",
1565
+ outlined: "bg-transparent text-success border-success",
1566
+ dot: "bg-success"
1567
+ },
1568
+ inactive: {
1569
+ filled: "bg-muted text-muted-foreground border-border",
1570
+ outlined: "bg-transparent text-muted-foreground border-muted-foreground",
1571
+ dot: "bg-muted-foreground"
1572
+ },
1573
+ pending: {
1574
+ filled: "bg-warning/10 text-warning border-warning/20",
1575
+ outlined: "bg-transparent text-warning border-warning",
1576
+ dot: "bg-warning"
1577
+ },
1578
+ success: {
1579
+ filled: "bg-success/10 text-success border-success/20",
1580
+ outlined: "bg-transparent text-success border-success",
1581
+ dot: "bg-success"
1582
+ },
1583
+ error: {
1584
+ filled: "bg-destructive/10 text-destructive border-destructive/20",
1585
+ outlined: "bg-transparent text-destructive border-destructive",
1586
+ dot: "bg-destructive"
1587
+ },
1588
+ warning: {
1589
+ filled: "bg-warning/10 text-warning border-warning/20",
1590
+ outlined: "bg-transparent text-warning border-warning",
1591
+ dot: "bg-warning"
1592
+ },
1593
+ info: {
1594
+ filled: "bg-primary/10 text-primary border-primary/20",
1595
+ outlined: "bg-transparent text-primary border-primary",
1596
+ dot: "bg-primary"
1597
+ }
1598
+ };
1599
+ const sizeClasses = {
1600
+ sm: {
1601
+ container: "px-2 py-0.5 text-xs gap-1.5",
1602
+ dot: "w-1.5 h-1.5"
1603
+ },
1604
+ md: {
1605
+ container: "px-2.5 py-0.5 text-sm gap-2",
1606
+ dot: "w-2 h-2"
1607
+ },
1608
+ lg: {
1609
+ container: "px-3 py-1 text-base gap-2",
1610
+ dot: "w-2.5 h-2.5"
1611
+ }
1612
+ };
1613
+ return /* @__PURE__ */ jsxs(
1614
+ "span",
1615
+ {
1616
+ className: `inline-flex items-center font-medium rounded-full border ${statusConfig[status][variant]} ${sizeClasses[size].container} ${className}`,
1617
+ children: [
1618
+ /* @__PURE__ */ jsx("span", { className: `rounded-full ${statusConfig[status].dot} ${sizeClasses[size].dot}` }),
1619
+ children
1620
+ ]
1621
+ }
1622
+ );
1623
+ }
1624
+ StatusLabel.displayName = "StatusLabel";
1625
+ var status_label_default = StatusLabel;
1626
+ function Avatar({ src, alt = "", fallback, size = "md", className = "" }) {
1627
+ const sizeClasses = {
1628
+ sm: "w-8 h-8 text-xs",
1629
+ md: "w-10 h-10 text-sm",
1630
+ lg: "w-12 h-12 text-base",
1631
+ xl: "w-16 h-16 text-lg"
1632
+ };
1633
+ let content;
1634
+ if (src) {
1635
+ content = /* @__PURE__ */ jsx("img", { src, alt, className: "w-full h-full object-cover" });
1636
+ } else if (fallback) {
1637
+ content = fallback;
1638
+ } else {
1639
+ content = /* @__PURE__ */ jsx("span", { children: alt.charAt(0).toUpperCase() });
1640
+ }
1641
+ return /* @__PURE__ */ jsx(
1642
+ "div",
1643
+ {
1644
+ className: `inline-flex items-center justify-center rounded-full bg-muted text-muted-foreground font-medium overflow-hidden ${sizeClasses[size]} ${className}`,
1645
+ children: content
1646
+ }
1647
+ );
1648
+ }
1649
+ Avatar.displayName = "Avatar";
1650
+ var avatar_default = Avatar;
1651
+ function EmptyState({ title, description, icon, action, className = "" }) {
1652
+ return /* @__PURE__ */ jsxs("div", { className: `flex flex-col items-center justify-center text-center py-12 ${className}`, children: [
1653
+ icon && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground mb-4", children: icon }),
1654
+ /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-foreground mb-2", children: title }),
1655
+ description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-6 max-w-sm", children: description }),
1656
+ action
1657
+ ] });
1658
+ }
1659
+ EmptyState.displayName = "EmptyState";
1660
+ var empty_state_default = EmptyState;
1661
+ function List({ children, className = "", ordered = false }) {
1662
+ const Component = ordered ? "ol" : "ul";
1663
+ return /* @__PURE__ */ jsx(Component, { className: `divide-y divide-gray-200 ${className}`, children });
1664
+ }
1665
+ function ListItem({ children, className = "" }) {
1666
+ return /* @__PURE__ */ jsx("li", { className: `py-3 ${className}`, children });
1667
+ }
1668
+ function Table({
1669
+ children,
1670
+ className = "",
1671
+ striped = false,
1672
+ bordered = false,
1673
+ hoverable = false,
1674
+ compact = false,
1675
+ caption,
1676
+ ...props
1677
+ }) {
1678
+ const baseClasses = "w-full text-sm text-left";
1679
+ const stripedClasses = striped ? "striped" : "";
1680
+ const borderedClasses = bordered ? "border border-border" : "";
1681
+ const compactClasses = compact ? "table-compact" : "";
1682
+ return /* @__PURE__ */ jsxs("div", { className: "overflow-x-auto rounded-lg", children: [
1683
+ /* @__PURE__ */ jsxs(
1684
+ "table",
1685
+ {
1686
+ className: `${baseClasses} ${stripedClasses} ${borderedClasses} ${compactClasses} ${className}`,
1687
+ ...props,
1688
+ children: [
1689
+ caption && /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }),
1690
+ children
1691
+ ]
1692
+ }
1693
+ ),
1694
+ /* @__PURE__ */ jsx("style", { children: `
1695
+ .striped tbody tr:nth-child(even) {
1696
+ background-color: hsl(var(--muted) / 0.3);
1697
+ }
1698
+ ${hoverable ? `
1699
+ table tbody tr:hover {
1700
+ background-color: hsl(var(--muted) / 0.5);
1701
+ }
1702
+ ` : ""}
1703
+ .table-compact td,
1704
+ .table-compact th {
1705
+ padding: 0.5rem;
1706
+ }
1707
+ ` })
1708
+ ] });
1709
+ }
1710
+ function TableHeader({ children, className = "", ...props }) {
1711
+ return /* @__PURE__ */ jsx("thead", { className: `text-xs text-muted-foreground uppercase bg-muted/50 ${className}`, ...props, children });
1712
+ }
1713
+ function TableBody({ children, className = "", ...props }) {
1714
+ return /* @__PURE__ */ jsx("tbody", { className: `divide-y divide-border ${className}`, ...props, children });
1715
+ }
1716
+ function TableFooter({ children, className = "", ...props }) {
1717
+ return /* @__PURE__ */ jsx("tfoot", { className: `text-xs font-semibold text-foreground bg-muted/30 ${className}`, ...props, children });
1718
+ }
1719
+ function TableRow({ children, className = "", selected = false, ...props }) {
1720
+ const selectedClasses = selected ? "bg-primary/10" : "";
1721
+ return /* @__PURE__ */ jsx("tr", { className: `${selectedClasses} ${className}`, ...props, children });
1722
+ }
1723
+ function TableHeadCell({
1724
+ children,
1725
+ className = "",
1726
+ align = "left",
1727
+ scope = "col",
1728
+ ...props
1729
+ }) {
1730
+ const alignClasses = {
1731
+ left: "text-left",
1732
+ center: "text-center",
1733
+ right: "text-right"
1734
+ };
1735
+ return /* @__PURE__ */ jsx("th", { scope, className: `px-6 py-3 font-medium ${alignClasses[align]} ${className}`, ...props, children });
1736
+ }
1737
+ function TableCell({ children, className = "", align = "left", ...props }) {
1738
+ const alignClasses = {
1739
+ left: "text-left",
1740
+ center: "text-center",
1741
+ right: "text-right"
1742
+ };
1743
+ return /* @__PURE__ */ jsx("td", { className: `px-6 py-4 whitespace-nowrap ${alignClasses[align]} ${className}`, ...props, children });
1744
+ }
1745
+ function useTable({ data, initialSort, pageSize = 10 }) {
1746
+ const [sortConfig, setSortConfig] = useState(
1747
+ initialSort ? { key: initialSort.key, direction: initialSort.direction } : null
1748
+ );
1749
+ const [currentPage, setCurrentPage] = useState(1);
1750
+ const [selectedRows, setSelectedRows] = useState(/* @__PURE__ */ new Set());
1751
+ const sortedData = useMemo(() => {
1752
+ if (!sortConfig) return data;
1753
+ const sorted = [...data].sort((a, b) => {
1754
+ const aValue = a[sortConfig.key];
1755
+ const bValue = b[sortConfig.key];
1756
+ if (aValue === bValue) return 0;
1757
+ if (aValue == null) return 1;
1758
+ if (bValue == null) return -1;
1759
+ if (aValue < bValue) {
1760
+ return sortConfig.direction === "asc" ? -1 : 1;
1761
+ }
1762
+ return sortConfig.direction === "asc" ? 1 : -1;
1763
+ });
1764
+ return sorted;
1765
+ }, [data, sortConfig]);
1766
+ const totalPages = Math.ceil(sortedData.length / pageSize);
1767
+ const startIndex = (currentPage - 1) * pageSize;
1768
+ const endIndex = startIndex + pageSize;
1769
+ const currentData = sortedData.slice(startIndex, endIndex);
1770
+ const handleSort = (key) => {
1771
+ let direction = "asc";
1772
+ if (sortConfig?.key === key) {
1773
+ if (sortConfig.direction === "asc") {
1774
+ direction = "desc";
1775
+ } else if (sortConfig.direction === "desc") {
1776
+ direction = null;
1777
+ }
1778
+ }
1779
+ setSortConfig(direction ? { key, direction } : null);
1780
+ setCurrentPage(1);
1781
+ };
1782
+ const nextPage = () => {
1783
+ setCurrentPage((prev) => Math.min(prev + 1, totalPages));
1784
+ };
1785
+ const prevPage = () => {
1786
+ setCurrentPage((prev) => Math.max(prev - 1, 1));
1787
+ };
1788
+ const canNextPage = currentPage < totalPages;
1789
+ const canPrevPage = currentPage > 1;
1790
+ const toggleRow = (index) => {
1791
+ setSelectedRows((prev) => {
1792
+ const newSet = new Set(prev);
1793
+ if (newSet.has(index)) {
1794
+ newSet.delete(index);
1795
+ } else {
1796
+ newSet.add(index);
1797
+ }
1798
+ return newSet;
1799
+ });
1800
+ };
1801
+ const toggleAll = () => {
1802
+ if (selectedRows.size === currentData.length) {
1803
+ setSelectedRows(/* @__PURE__ */ new Set());
1804
+ } else {
1805
+ const allIndices = currentData.map((_, idx) => startIndex + idx);
1806
+ setSelectedRows(new Set(allIndices));
1807
+ }
1808
+ };
1809
+ const isRowSelected = (index) => selectedRows.has(index);
1810
+ const isAllSelected = currentData.length > 0 && currentData.every((_, idx) => selectedRows.has(startIndex + idx));
1811
+ const clearSelection = () => setSelectedRows(/* @__PURE__ */ new Set());
1812
+ return {
1813
+ currentData,
1814
+ sortedData,
1815
+ sortConfig,
1816
+ handleSort,
1817
+ currentPage,
1818
+ totalPages,
1819
+ setCurrentPage,
1820
+ nextPage,
1821
+ prevPage,
1822
+ canNextPage,
1823
+ canPrevPage,
1824
+ selectedRows,
1825
+ toggleRow,
1826
+ toggleAll,
1827
+ isRowSelected,
1828
+ isAllSelected,
1829
+ clearSelection
1830
+ };
1831
+ }
1832
+ function DataTable({
1833
+ data,
1834
+ columns,
1835
+ className = "",
1836
+ striped = true,
1837
+ bordered = false,
1838
+ hoverable = true,
1839
+ compact = false,
1840
+ stickyHeader = false,
1841
+ sortable = true,
1842
+ paginated = false,
1843
+ pageSize = 10,
1844
+ selectable = false,
1845
+ onRowClick,
1846
+ onSelectionChange,
1847
+ emptyMessage = "No data available",
1848
+ emptyIcon,
1849
+ initialSort
1850
+ }) {
1851
+ const tableOptions = {
1852
+ data,
1853
+ initialSort,
1854
+ pageSize
1855
+ };
1856
+ const {
1857
+ currentData,
1858
+ sortedData,
1859
+ sortConfig,
1860
+ handleSort,
1861
+ currentPage,
1862
+ totalPages,
1863
+ nextPage,
1864
+ prevPage,
1865
+ canNextPage,
1866
+ canPrevPage,
1867
+ selectedRows,
1868
+ toggleRow,
1869
+ toggleAll,
1870
+ isRowSelected,
1871
+ isAllSelected
1872
+ } = useTable(tableOptions);
1873
+ const displayData = paginated ? currentData : sortedData;
1874
+ const handleToggleRow = (index) => {
1875
+ toggleRow(index);
1876
+ if (onSelectionChange) {
1877
+ const newSelection = new Set(selectedRows);
1878
+ if (newSelection.has(index)) {
1879
+ newSelection.delete(index);
1880
+ } else {
1881
+ newSelection.add(index);
1882
+ }
1883
+ onSelectionChange(Array.from(newSelection));
1884
+ }
1885
+ };
1886
+ const handleToggleAll = () => {
1887
+ toggleAll();
1888
+ if (onSelectionChange) {
1889
+ if (isAllSelected) {
1890
+ onSelectionChange([]);
1891
+ } else {
1892
+ const startIndex = (currentPage - 1) * pageSize;
1893
+ const allIndices = displayData.map((_, idx) => startIndex + idx);
1894
+ onSelectionChange(allIndices);
1895
+ }
1896
+ }
1897
+ };
1898
+ const renderSortIcon = (columnKey) => {
1899
+ if (!sortable) return null;
1900
+ const isSorted = sortConfig?.key === columnKey;
1901
+ if (!isSorted) {
1902
+ return /* @__PURE__ */ jsx(IconSelector, { className: "w-4 h-4 ml-1 text-muted-foreground" });
1903
+ }
1904
+ if (sortConfig?.direction === "asc") {
1905
+ return /* @__PURE__ */ jsx(IconChevronUp, { className: "w-4 h-4 ml-1 text-primary" });
1906
+ }
1907
+ return /* @__PURE__ */ jsx(IconChevronDown, { className: "w-4 h-4 ml-1 text-primary" });
1908
+ };
1909
+ if (data.length === 0) {
1910
+ return /* @__PURE__ */ jsx("div", { className: "border border-border rounded-lg", children: /* @__PURE__ */ jsx(empty_state_default, { title: emptyMessage, icon: emptyIcon, className: "py-12" }) });
1911
+ }
1912
+ return /* @__PURE__ */ jsxs("div", { className, children: [
1913
+ /* @__PURE__ */ jsx("div", { className: stickyHeader ? "overflow-auto max-h-[600px]" : "", children: /* @__PURE__ */ jsxs(Table, { striped, bordered, hoverable, compact, children: [
1914
+ /* @__PURE__ */ jsx(TableHeader, { className: stickyHeader ? "sticky top-0 z-10 bg-background shadow-sm" : "", children: /* @__PURE__ */ jsxs(TableRow, { children: [
1915
+ selectable && /* @__PURE__ */ jsx(TableHeadCell, { className: "w-12", children: /* @__PURE__ */ jsx(checkbox_default, { checked: isAllSelected, onChange: handleToggleAll, ariaLabel: "Select all rows" }) }),
1916
+ columns.map((column) => /* @__PURE__ */ jsx(
1917
+ TableHeadCell,
1918
+ {
1919
+ align: column.align,
1920
+ className: column.width ? `w-[${column.width}]` : "",
1921
+ children: column.sortable !== false && sortable ? /* @__PURE__ */ jsxs(
1922
+ "button",
1923
+ {
1924
+ onClick: () => handleSort(column.key),
1925
+ className: "flex items-center gap-1 hover:text-foreground transition-colors font-medium",
1926
+ type: "button",
1927
+ children: [
1928
+ column.label,
1929
+ renderSortIcon(column.key)
1930
+ ]
1931
+ }
1932
+ ) : column.label
1933
+ },
1934
+ String(column.key)
1935
+ ))
1936
+ ] }) }),
1937
+ /* @__PURE__ */ jsx(TableBody, { children: displayData.map((row, rowIndex) => {
1938
+ const actualIndex = paginated ? (currentPage - 1) * pageSize + rowIndex : rowIndex;
1939
+ const isSelected = isRowSelected(actualIndex);
1940
+ return /* @__PURE__ */ jsxs(
1941
+ TableRow,
1942
+ {
1943
+ selected: isSelected,
1944
+ onClick: onRowClick ? () => onRowClick(row, actualIndex) : void 0,
1945
+ className: onRowClick ? "cursor-pointer" : "",
1946
+ children: [
1947
+ selectable && /* @__PURE__ */ jsx(TableCell, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
1948
+ checkbox_default,
1949
+ {
1950
+ checked: isSelected,
1951
+ onChange: () => handleToggleRow(actualIndex),
1952
+ ariaLabel: `Select row ${actualIndex + 1}`
1953
+ }
1954
+ ) }),
1955
+ columns.map((column) => {
1956
+ const value = row[column.key];
1957
+ const content = column.render ? column.render(value, row, actualIndex) : String(value ?? "");
1958
+ return /* @__PURE__ */ jsx(TableCell, { align: column.align, children: content }, String(column.key));
1959
+ })
1960
+ ]
1961
+ },
1962
+ actualIndex
1963
+ );
1964
+ }) })
1965
+ ] }) }),
1966
+ paginated && totalPages > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-border", children: [
1967
+ /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
1968
+ "Page ",
1969
+ currentPage,
1970
+ " of ",
1971
+ totalPages,
1972
+ " (",
1973
+ data.length,
1974
+ " total rows)"
1975
+ ] }),
1976
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
1977
+ /* @__PURE__ */ jsx(button_default, { size: "sm", style: "outline", onClick: prevPage, disabled: !canPrevPage, children: "Previous" }),
1978
+ /* @__PURE__ */ jsx(button_default, { size: "sm", style: "outline", onClick: nextPage, disabled: !canNextPage, children: "Next" })
1979
+ ] })
1980
+ ] })
1981
+ ] });
1982
+ }
1983
+ DataTable.displayName = "DataTable";
1984
+ var data_table_default = DataTable;
1985
+ function Chip({
1986
+ children,
1987
+ className = "",
1988
+ variant = "default",
1989
+ size = "md",
1990
+ onRemove,
1991
+ icon,
1992
+ disabled = false,
1993
+ clickable = false,
1994
+ onClick
1995
+ }) {
1996
+ const sizeClasses = {
1997
+ sm: "text-xs px-2 py-1 gap-1",
1998
+ md: "text-sm px-3 py-1.5 gap-1.5",
1999
+ lg: "text-base px-4 py-2 gap-2"
2000
+ };
2001
+ const variantClasses = {
2002
+ default: "bg-muted text-muted-foreground",
2003
+ primary: "bg-primary/10 text-primary",
2004
+ success: "bg-success/10 text-success",
2005
+ warning: "bg-warning/10 text-warning",
2006
+ error: "bg-destructive/10 text-destructive"
2007
+ };
2008
+ const interactiveClasses = clickable && !disabled ? "cursor-pointer hover:opacity-80 active:opacity-60 transition-opacity" : "";
2009
+ const disabledClasses = disabled ? "opacity-50 cursor-not-allowed" : "";
2010
+ const handleClick = (e) => {
2011
+ if (!disabled && clickable && onClick) {
2012
+ onClick(e);
2013
+ }
2014
+ };
2015
+ const handleRemove = (e) => {
2016
+ e.stopPropagation();
2017
+ if (!disabled && onRemove) {
2018
+ onRemove(e);
2019
+ }
2020
+ };
2021
+ return /* @__PURE__ */ jsxs(
2022
+ "div",
2023
+ {
2024
+ className: `
2025
+ inline-flex items-center justify-center
2026
+ rounded-full font-medium
2027
+ ${sizeClasses[size]}
2028
+ ${variantClasses[variant]}
2029
+ ${interactiveClasses}
2030
+ ${disabledClasses}
2031
+ ${className}
2032
+ `,
2033
+ onClick: handleClick,
2034
+ role: clickable ? "button" : void 0,
2035
+ tabIndex: clickable && !disabled ? 0 : void 0,
2036
+ onKeyDown: clickable && !disabled ? (e) => {
2037
+ if (e.key === "Enter" || e.key === " ") {
2038
+ e.preventDefault();
2039
+ onClick?.(e);
2040
+ }
2041
+ } : void 0,
2042
+ children: [
2043
+ icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 flex items-center", children: icon }),
2044
+ /* @__PURE__ */ jsx("span", { className: "truncate", children }),
2045
+ onRemove && /* @__PURE__ */ jsx(
2046
+ "button",
2047
+ {
2048
+ type: "button",
2049
+ onClick: handleRemove,
2050
+ disabled,
2051
+ className: `
2052
+ flex-shrink-0 flex items-center justify-center
2053
+ rounded-full hover:bg-black/10 dark:hover:bg-white/10
2054
+ transition-colors
2055
+ ${size === "sm" ? "w-3 h-3" : size === "md" ? "w-4 h-4" : "w-5 h-5"}
2056
+ ${disabled ? "cursor-not-allowed" : "cursor-pointer"}
2057
+ `,
2058
+ "aria-label": "Remove",
2059
+ children: /* @__PURE__ */ jsx(IconX, { className: size === "sm" ? "w-2.5 h-2.5" : size === "md" ? "w-3 h-3" : "w-3.5 h-3.5" })
2060
+ }
2061
+ )
2062
+ ]
2063
+ }
2064
+ );
2065
+ }
2066
+ Chip.displayName = "Chip";
2067
+ var chip_default = Chip;
2068
+ function TimelineItem({
2069
+ children,
2070
+ className = "",
2071
+ icon,
2072
+ iconColor = "default",
2073
+ title,
2074
+ subtitle,
2075
+ timestamp,
2076
+ isLast = false
2077
+ }) {
2078
+ const iconColorClasses = {
2079
+ default: "bg-muted text-muted-foreground",
2080
+ primary: "bg-primary text-primary-foreground",
2081
+ success: "bg-success text-success-foreground",
2082
+ warning: "bg-warning text-warning-foreground",
2083
+ error: "bg-destructive text-destructive-foreground"
2084
+ };
2085
+ return /* @__PURE__ */ jsxs("div", { className: `flex gap-4 ${className}`, children: [
2086
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
2087
+ /* @__PURE__ */ jsx(
2088
+ "div",
2089
+ {
2090
+ className: `
2091
+ flex items-center justify-center
2092
+ w-8 h-8 rounded-full
2093
+ flex-shrink-0
2094
+ ${iconColorClasses[iconColor]}
2095
+ `,
2096
+ children: icon || /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-current" })
2097
+ }
2098
+ ),
2099
+ !isLast && /* @__PURE__ */ jsx("div", { className: "w-0.5 flex-1 bg-border mt-2" })
2100
+ ] }),
2101
+ /* @__PURE__ */ jsxs("div", { className: `flex-1 ${!isLast ? "pb-8" : ""}`, children: [
2102
+ (title || timestamp) && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 mb-1", children: [
2103
+ title && /* @__PURE__ */ jsx("h4", { className: "font-semibold text-foreground", children: title }),
2104
+ timestamp && /* @__PURE__ */ jsx("time", { className: "text-sm text-muted-foreground whitespace-nowrap", children: timestamp })
2105
+ ] }),
2106
+ subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-2", children: subtitle }),
2107
+ children && /* @__PURE__ */ jsx("div", { className: "text-sm text-foreground", children })
2108
+ ] })
2109
+ ] });
2110
+ }
2111
+ function Timeline({ children, className = "", position = "left" }) {
2112
+ const positionClasses = {
2113
+ left: "",
2114
+ center: "mx-auto max-w-2xl",
2115
+ right: "ml-auto max-w-2xl"
2116
+ };
2117
+ return /* @__PURE__ */ jsx("div", { className: `${positionClasses[position]} ${className}`, children });
2118
+ }
2119
+ Timeline.displayName = "Timeline";
2120
+ var timeline_default = Timeline;
2121
+ function Grid({
2122
+ children,
2123
+ className = "",
2124
+ itemSize = "md",
2125
+ maxCols,
2126
+ gap = "md",
2127
+ responsive,
2128
+ alignItems = "stretch",
2129
+ justifyItems = "stretch"
2130
+ }) {
2131
+ const itemSizeValues = {
2132
+ xs: "150px",
2133
+ sm: "200px",
2134
+ md: "250px",
2135
+ lg: "300px",
2136
+ xl: "350px",
2137
+ "2xl": "400px"
2138
+ };
2139
+ const gapClasses = {
2140
+ none: "gap-0",
2141
+ xs: "gap-1",
2142
+ sm: "gap-2",
2143
+ md: "gap-4",
2144
+ lg: "gap-6",
2145
+ xl: "gap-8",
2146
+ "2xl": "gap-12"
2147
+ };
2148
+ const alignItemsClasses = {
2149
+ start: "items-start",
2150
+ center: "items-center",
2151
+ end: "items-end",
2152
+ stretch: "items-stretch"
2153
+ };
2154
+ const justifyItemsClasses = {
2155
+ start: "justify-items-start",
2156
+ center: "justify-items-center",
2157
+ end: "justify-items-end",
2158
+ stretch: "justify-items-stretch"
2159
+ };
2160
+ const responsiveClasses = responsive ? Object.entries(responsive).map(([breakpoint, cols]) => {
2161
+ const breakpointPrefix = breakpoint === "sm" ? "sm:" : breakpoint === "md" ? "md:" : breakpoint === "lg" ? "lg:" : "xl:";
2162
+ return `${breakpointPrefix}grid-cols-${cols}`;
2163
+ }).join(" ") : "";
2164
+ const minWidth = itemSizeValues[itemSize];
2165
+ const gridStyle = !responsive ? {
2166
+ gridTemplateColumns: maxCols ? `repeat(auto-fit, minmax(min(${minWidth}, 100%), 1fr))` : `repeat(auto-fill, minmax(min(${minWidth}, 100%), 1fr))`
2167
+ } : void 0;
2168
+ return /* @__PURE__ */ jsx(
2169
+ "div",
2170
+ {
2171
+ className: `
2172
+ grid
2173
+ ${!responsive ? "" : responsiveClasses}
2174
+ ${gapClasses[gap]}
2175
+ ${alignItemsClasses[alignItems]}
2176
+ ${justifyItemsClasses[justifyItems]}
2177
+ ${className}
2178
+ `.trim(),
2179
+ style: gridStyle,
2180
+ children
2181
+ }
2182
+ );
2183
+ }
2184
+ Grid.displayName = "Grid";
2185
+ var grid_default = Grid;
2186
+ function Heading({ children, level = 1, className = "", noMargin = false }) {
2187
+ const levelClasses = {
2188
+ 1: "text-4xl font-bold",
2189
+ 2: "text-3xl font-bold",
2190
+ 3: "text-2xl font-semibold",
2191
+ 4: "text-xl font-semibold",
2192
+ 5: "text-lg font-medium",
2193
+ 6: "text-base font-medium"
2194
+ };
2195
+ const marginClasses = {
2196
+ 1: "mb-4",
2197
+ 2: "mb-3",
2198
+ 3: "mb-3",
2199
+ 4: "mb-2",
2200
+ 5: "mb-2",
2201
+ 6: "mb-2"
2202
+ };
2203
+ const margin = noMargin ? "" : marginClasses[level];
2204
+ return createElement(
2205
+ `h${level}`,
2206
+ {
2207
+ className: `text-foreground ${levelClasses[level]} ${margin} ${className}`
2208
+ },
2209
+ children
2210
+ );
2211
+ }
2212
+ Heading.displayName = "Heading";
2213
+ var heading_default = Heading;
2214
+ function PricingTable({ title, description, children, columns = 3, className = "" }) {
2215
+ return /* @__PURE__ */ jsx("section", { className: `py-16 md:py-20 ${className}`, children: /* @__PURE__ */ jsxs(container_default, { size: "xl", children: [
2216
+ (title || description) && /* @__PURE__ */ jsxs("div", { className: "text-center mb-12 md:mb-16 max-w-3xl mx-auto", children: [
2217
+ title && /* @__PURE__ */ jsx(heading_default, { level: 2, className: "text-3xl md:text-4xl font-bold mb-4", children: title }),
2218
+ description && /* @__PURE__ */ jsx(text_default, { className: "text-lg md:text-xl text-muted", children: description })
2219
+ ] }),
2220
+ /* @__PURE__ */ jsx(grid_default, { itemSize: "lg", maxCols: columns, gap: "lg", className: "items-stretch", children })
2221
+ ] }) });
2222
+ }
2223
+ PricingTable.displayName = "PricingTable";
2224
+ var pricing_table_default = PricingTable;
2225
+ function Card({
2226
+ children,
2227
+ className = "",
2228
+ variant = "default",
2229
+ size = "md",
2230
+ hoverable = false,
2231
+ imagePosition = "top",
2232
+ centered = false,
2233
+ compact = false,
2234
+ ...props
2235
+ }) {
2236
+ const variantClasses = {
2237
+ default: "bg-card text-card-foreground border border-border shadow-md",
2238
+ bordered: "bg-card text-card-foreground border-2 border-border",
2239
+ ghost: "bg-transparent",
2240
+ filled: "bg-muted text-foreground"
2241
+ };
2242
+ const sizeClasses = {
2243
+ xs: "w-36",
2244
+ sm: "w-64",
2245
+ md: "w-96",
2246
+ lg: "w-[28rem]",
2247
+ xl: "w-[32rem]"
2248
+ };
2249
+ const hoverClasses = hoverable ? "transition-all duration-300 hover:shadow-xl hover:-translate-y-1 cursor-pointer" : "transition-shadow duration-200";
2250
+ const imagePositionClasses = {
2251
+ top: "flex-col",
2252
+ bottom: "flex-col-reverse",
2253
+ side: "flex-row",
2254
+ overlay: "relative"
2255
+ };
2256
+ const centerClasses = centered ? "text-center items-center" : "";
2257
+ return /* @__PURE__ */ jsx(
2258
+ "div",
2259
+ {
2260
+ className: `
2261
+ rounded-2xl
2262
+ overflow-hidden
2263
+ ${variantClasses[variant]}
2264
+ ${size !== "md" ? sizeClasses[size] : "max-w-full"}
2265
+ ${hoverClasses}
2266
+ ${imagePositionClasses[imagePosition]}
2267
+ ${centerClasses}
2268
+ ${compact ? "p-4" : ""}
2269
+ ${imagePosition === "side" ? "flex" : "flex"}
2270
+ ${className}
2271
+ `.trim().replace(/\s+/g, " "),
2272
+ ...props,
2273
+ children
2274
+ }
2275
+ );
2276
+ }
2277
+ Card.displayName = "Card";
2278
+ var card_default = Card;
2279
+ function CardHeader({ children, className = "", bordered = true, padding = "md" }) {
2280
+ const paddingClasses = {
2281
+ none: "p-0",
2282
+ sm: "p-4",
2283
+ md: "p-6",
2284
+ lg: "p-8"
2285
+ };
2286
+ return /* @__PURE__ */ jsx(
2287
+ "div",
2288
+ {
2289
+ className: `
2290
+ card-header
2291
+ flex items-center justify-between gap-3
2292
+ ${paddingClasses[padding]}
2293
+ ${bordered ? "border-b border-border" : ""}
2294
+ ${className}
2295
+ `.trim().replace(/\s+/g, " "),
2296
+ children
2297
+ }
2298
+ );
2299
+ }
2300
+ CardHeader.displayName = "CardHeader";
2301
+ var card_header_default = CardHeader;
2302
+ function CardFooter({
2303
+ children,
2304
+ className = "",
2305
+ bordered = true,
2306
+ padding = "md",
2307
+ align = "start"
2308
+ }) {
2309
+ const paddingClasses = {
2310
+ none: "p-0",
2311
+ sm: "p-4",
2312
+ md: "p-6",
2313
+ lg: "p-8"
2314
+ };
2315
+ const alignClasses = {
2316
+ start: "justify-start",
2317
+ center: "justify-center",
2318
+ end: "justify-end"
2319
+ };
2320
+ return /* @__PURE__ */ jsx(
2321
+ "div",
2322
+ {
2323
+ className: `
2324
+ card-footer
2325
+ flex items-center gap-1
2326
+ ${paddingClasses[padding]}
2327
+ ${bordered ? "border-t border-border" : ""}
2328
+ ${alignClasses[align]}
2329
+ ${className}
2330
+ `.trim().replace(/\s+/g, " "),
2331
+ children
2332
+ }
2333
+ );
2334
+ }
2335
+ CardFooter.displayName = "CardFooter";
2336
+ var card_footer_default = CardFooter;
2337
+ function PricingTier({
2338
+ name,
2339
+ price,
2340
+ period = "/month",
2341
+ description,
2342
+ features,
2343
+ ctaLabel,
2344
+ ctaOnClick,
2345
+ featured = false,
2346
+ badge,
2347
+ className = ""
2348
+ }) {
2349
+ return /* @__PURE__ */ jsxs(
2350
+ card_default,
2351
+ {
2352
+ className: `relative flex flex-col h-full p-6 ${featured ? "border-2 border-primary shadow-lg scale-105" : "border border-border"} ${className}`,
2353
+ children: [
2354
+ badge && /* @__PURE__ */ jsx("div", { className: "absolute -top-3 left-1/2 transform -translate-x-1/2", children: /* @__PURE__ */ jsx(badge_default, { variant: "primary", children: badge }) }),
2355
+ /* @__PURE__ */ jsxs(card_header_default, { className: "text-center border-none bg-transparent px-0 pt-0", children: [
2356
+ /* @__PURE__ */ jsx(heading_default, { level: 3, className: "text-2xl font-bold mb-2", children: name }),
2357
+ description && /* @__PURE__ */ jsx(text_default, { variant: "muted", className: "text-sm", children: description })
2358
+ ] }),
2359
+ /* @__PURE__ */ jsx("div", { className: "py-6 text-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-center", children: [
2360
+ /* @__PURE__ */ jsx("span", { className: "text-5xl font-bold", children: price }),
2361
+ period && /* @__PURE__ */ jsx("span", { className: "text-muted ml-2", children: period })
2362
+ ] }) }),
2363
+ /* @__PURE__ */ jsx("div", { className: "flex-1 space-y-3 py-6", children: features.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
2364
+ /* @__PURE__ */ jsx(
2365
+ IconCheck,
2366
+ {
2367
+ size: 20,
2368
+ className: `flex-shrink-0 mt-0.5 ${feature.included ? "text-success" : "text-muted opacity-30"}`
2369
+ }
2370
+ ),
2371
+ /* @__PURE__ */ jsx(text_default, { className: `text-sm ${feature.included ? "text-foreground" : "text-muted line-through"}`, children: feature.label })
2372
+ ] }, index)) }),
2373
+ /* @__PURE__ */ jsx(card_footer_default, { className: "border-none bg-transparent px-0 pb-0", children: /* @__PURE__ */ jsx(
2374
+ button_default,
2375
+ {
2376
+ variant: featured ? "primary" : "neutral",
2377
+ style: featured ? void 0 : "outline",
2378
+ className: "w-full",
2379
+ size: "lg",
2380
+ onClick: ctaOnClick,
2381
+ children: ctaLabel
2382
+ }
2383
+ ) })
2384
+ ]
2385
+ }
2386
+ );
2387
+ }
2388
+ PricingTier.displayName = "PricingTier";
2389
+ var pricing_tier_default = PricingTier;
2390
+ function CodeBlock({ code, className = "", showCopy = true }) {
2391
+ const [copied, setCopied] = useState(false);
2392
+ const handleCopy = async () => {
2393
+ try {
2394
+ await navigator.clipboard.writeText(code);
2395
+ setCopied(true);
2396
+ setTimeout(() => setCopied(false), 2e3);
2397
+ } catch (err) {
2398
+ console.error("Failed to copy code:", err);
2399
+ }
2400
+ };
2401
+ return /* @__PURE__ */ jsxs("div", { className: `relative group ${className}`, children: [
2402
+ showCopy && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsx(
2403
+ button_default,
2404
+ {
2405
+ variant: "neutral",
2406
+ style: "ghost",
2407
+ size: "sm",
2408
+ onClick: handleCopy,
2409
+ className: "text-xs bg-background/80 hover:bg-background",
2410
+ children: copied ? "\u2713 Copied" : "Copy"
2411
+ }
2412
+ ) }),
2413
+ /* @__PURE__ */ jsx("pre", { className: `bg-muted/50 border rounded-lg p-4 overflow-x-auto text-sm ${showCopy ? "pr-24" : ""}`, children: /* @__PURE__ */ jsx("code", { className: "font-mono text-foreground", children: code }) })
2414
+ ] });
2415
+ }
2416
+ CodeBlock.displayName = "CodeBlock";
2417
+ var code_block_default = CodeBlock;
2418
+ function Divider({ orientation = "horizontal", className = "", ...props }) {
2419
+ const orientationClasses = orientation === "horizontal" ? "w-full h-px" : "h-full w-px";
2420
+ return /* @__PURE__ */ jsx("hr", { className: `border-0 bg-border ${orientationClasses} ${className}`, "aria-orientation": orientation, ...props });
2421
+ }
2422
+ Divider.displayName = "Divider";
2423
+ var divider_default = Divider;
2424
+ function Drawer({ isOpen, onClose, children, position = "right", className = "" }) {
2425
+ useEffect(() => {
2426
+ const handleEscape = (e) => {
2427
+ if (e.key === "Escape") onClose();
2428
+ };
2429
+ if (isOpen) {
2430
+ document.body.style.overflow = "hidden";
2431
+ document.addEventListener("keydown", handleEscape);
2432
+ return () => {
2433
+ document.body.style.overflow = "";
2434
+ document.removeEventListener("keydown", handleEscape);
2435
+ };
2436
+ }
2437
+ return void 0;
2438
+ }, [isOpen, onClose]);
2439
+ if (!isOpen) return null;
2440
+ const positionClasses = {
2441
+ left: "left-0 top-0 h-full w-80 animate-slideInLeft",
2442
+ right: "right-0 top-0 h-full w-80 animate-slideInRight",
2443
+ top: "top-0 left-0 w-full h-80 animate-slideInTop",
2444
+ bottom: "bottom-0 left-0 w-full h-80 animate-slideInBottom"
2445
+ };
2446
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
2447
+ /* @__PURE__ */ jsx(
2448
+ "button",
2449
+ {
2450
+ className: "fixed inset-0 bg-black/50 backdrop-blur-sm z-40 animate-fadeIn border-none p-0 m-0 cursor-default",
2451
+ onClick: onClose,
2452
+ "aria-label": "Close drawer",
2453
+ type: "button"
2454
+ }
2455
+ ),
2456
+ /* @__PURE__ */ jsx(
2457
+ "aside",
2458
+ {
2459
+ className: `fixed bg-card text-card-foreground border border-border shadow-2xl z-50 ${positionClasses[position]} ${className}`,
2460
+ role: "dialog",
2461
+ "aria-modal": "true",
2462
+ tabIndex: -1,
2463
+ children
2464
+ }
2465
+ )
2466
+ ] });
2467
+ }
2468
+ Drawer.displayName = "Drawer";
2469
+ var drawer_default = Drawer;
2470
+ function Page({ children, className = "" }) {
2471
+ return /* @__PURE__ */ jsx("main", { className: `min-h-screen bg-background ${className}`, children });
2472
+ }
2473
+ Page.displayName = "Page";
2474
+ var page_default = Page;
2475
+ function AccordionItem({ title, children, defaultOpen = false }) {
2476
+ const [isOpen, setIsOpen] = useState(defaultOpen);
2477
+ return /* @__PURE__ */ jsxs("div", { className: "border-b border-border", children: [
2478
+ /* @__PURE__ */ jsxs(
2479
+ "button",
2480
+ {
2481
+ onClick: () => setIsOpen(!isOpen),
2482
+ className: "w-full flex items-center justify-between py-4 px-2 text-left hover:bg-accent hover:text-accent-foreground transition-colors",
2483
+ "aria-expanded": isOpen,
2484
+ children: [
2485
+ /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: title }),
2486
+ /* @__PURE__ */ jsx(
2487
+ "svg",
2488
+ {
2489
+ className: `w-5 h-5 transition-transform ${isOpen ? "rotate-180" : ""}`,
2490
+ fill: "none",
2491
+ stroke: "currentColor",
2492
+ viewBox: "0 0 24 24",
2493
+ children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
2494
+ }
2495
+ )
2496
+ ]
2497
+ }
2498
+ ),
2499
+ isOpen && /* @__PURE__ */ jsx("div", { className: "px-2 pb-4 text-muted-foreground", children })
2500
+ ] });
2501
+ }
2502
+ function Accordion({ children, className = "" }) {
2503
+ return /* @__PURE__ */ jsx("div", { className: `divide-y divide-gray-200 ${className}`, children });
2504
+ }
2505
+ Accordion.displayName = "Accordion";
2506
+ var accordion_default = Accordion;
2507
+ function Hero({
2508
+ title,
2509
+ description,
2510
+ primaryAction,
2511
+ secondaryAction,
2512
+ children,
2513
+ className = "",
2514
+ backgroundGradient = true,
2515
+ centered = true,
2516
+ size = "lg"
2517
+ }) {
2518
+ const sizeClasses = {
2519
+ sm: "py-12",
2520
+ md: "py-16",
2521
+ lg: "py-20 md:py-24"
2522
+ };
2523
+ const titleSizes = {
2524
+ sm: "text-3xl md:text-4xl",
2525
+ md: "text-4xl md:text-5xl",
2526
+ lg: "text-4xl md:text-5xl lg:text-6xl"
2527
+ };
2528
+ const descriptionSizes = {
2529
+ sm: "text-base md:text-lg",
2530
+ md: "text-lg md:text-xl",
2531
+ lg: "text-xl md:text-2xl"
2532
+ };
2533
+ return /* @__PURE__ */ jsx(
2534
+ "section",
2535
+ {
2536
+ className: `${sizeClasses[size]} ${backgroundGradient ? "bg-gradient-to-b from-primary/10 via-primary/5 to-background" : "bg-background"} ${className}`,
2537
+ children: /* @__PURE__ */ jsx(container_default, { size: "lg", children: /* @__PURE__ */ jsxs("div", { className: centered ? "text-center" : "", children: [
2538
+ /* @__PURE__ */ jsx(heading_default, { level: 1, className: `${titleSizes[size]} font-bold mb-4 md:mb-6`, children: title }),
2539
+ description && /* @__PURE__ */ jsx(text_default, { className: `${descriptionSizes[size]} mb-6 md:mb-8 ${centered ? "max-w-3xl mx-auto" : "max-w-3xl"}`, children: description }),
2540
+ (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs(stack_default, { direction: "horizontal", spacing: "md", className: `flex-wrap ${centered ? "justify-center" : ""}`, children: [
2541
+ primaryAction && /* @__PURE__ */ jsx(
2542
+ button_default,
2543
+ {
2544
+ size: "lg",
2545
+ variant: primaryAction.variant || "primary",
2546
+ style: primaryAction.style,
2547
+ onClick: primaryAction.onClick,
2548
+ loading: primaryAction.loading,
2549
+ children: primaryAction.label
2550
+ }
2551
+ ),
2552
+ secondaryAction && /* @__PURE__ */ jsx(
2553
+ button_default,
2554
+ {
2555
+ size: "lg",
2556
+ variant: secondaryAction.variant || "neutral",
2557
+ style: secondaryAction.style || "outline",
2558
+ onClick: secondaryAction.onClick,
2559
+ loading: secondaryAction.loading,
2560
+ children: secondaryAction.label
2561
+ }
2562
+ )
2563
+ ] }),
2564
+ children && /* @__PURE__ */ jsx("div", { className: "mt-8", children })
2565
+ ] }) })
2566
+ }
2567
+ );
2568
+ }
2569
+ Hero.displayName = "Hero";
2570
+ var hero_default = Hero;
2571
+ function FeatureSection({
2572
+ title,
2573
+ description,
2574
+ features,
2575
+ columns = 3,
2576
+ centered = true,
2577
+ className = ""
2578
+ }) {
2579
+ return /* @__PURE__ */ jsx("section", { className: `py-16 md:py-20 ${className}`, children: /* @__PURE__ */ jsxs(container_default, { size: "xl", children: [
2580
+ (title || description) && /* @__PURE__ */ jsxs(
2581
+ "div",
2582
+ {
2583
+ className: `mb-12 md:mb-16 ${centered ? "text-center" : ""} ${centered ? "max-w-3xl mx-auto" : "max-w-3xl"}`,
2584
+ children: [
2585
+ title && /* @__PURE__ */ jsx(heading_default, { level: 2, className: "text-3xl md:text-4xl font-bold mb-4", children: title }),
2586
+ description && /* @__PURE__ */ jsx(text_default, { className: "text-lg md:text-xl", children: description })
2587
+ ]
2588
+ }
2589
+ ),
2590
+ /* @__PURE__ */ jsx(grid_default, { itemSize: "md", maxCols: columns, gap: "lg", children: features.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: centered ? "text-center" : "", children: [
2591
+ /* @__PURE__ */ jsx(
2592
+ "div",
2593
+ {
2594
+ className: `inline-flex items-center justify-center w-12 h-12 md:w-16 md:h-16 rounded-lg md:rounded-xl bg-primary/10 text-primary mb-4 md:mb-6 ${centered ? "" : "mr-auto"}`,
2595
+ children: feature.icon
2596
+ }
2597
+ ),
2598
+ /* @__PURE__ */ jsx(heading_default, { level: 3, className: "text-xl font-semibold mb-2 md:mb-3", children: feature.title }),
2599
+ /* @__PURE__ */ jsx(text_default, { variant: "muted", className: "text-sm md:text-base", children: feature.description })
2600
+ ] }, index)) })
2601
+ ] }) });
2602
+ }
2603
+ FeatureSection.displayName = "FeatureSection";
2604
+ var feature_section_default = FeatureSection;
2605
+ function Link2({
2606
+ children,
2607
+ href,
2608
+ external = false,
2609
+ variant = "default",
2610
+ underline = "hover",
2611
+ size = "md",
2612
+ display = "inline",
2613
+ className = ""
2614
+ }) {
2615
+ const variantClasses = {
2616
+ default: "text-primary hover:text-primary/80",
2617
+ muted: "text-muted-foreground hover:text-foreground",
2618
+ secondary: "text-secondary hover:text-secondary/80",
2619
+ inherit: "text-inherit hover:opacity-80"
2620
+ };
2621
+ const underlineClasses = {
2622
+ hover: "hover:underline",
2623
+ always: "underline",
2624
+ none: "no-underline"
2625
+ };
2626
+ const sizeClasses = {
2627
+ sm: "text-sm",
2628
+ md: "text-base",
2629
+ lg: "text-lg"
2630
+ };
2631
+ const displayClasses = {
2632
+ inline: "inline",
2633
+ block: "block"
2634
+ };
2635
+ const linkClassName = [
2636
+ variantClasses[variant],
2637
+ underlineClasses[underline],
2638
+ sizeClasses[size],
2639
+ displayClasses[display],
2640
+ "cursor-pointer transition-colors",
2641
+ className
2642
+ ].filter(Boolean).join(" ");
2643
+ if (external) {
2644
+ return /* @__PURE__ */ jsxs("a", { href, className: linkClassName, target: "_blank", rel: "noopener noreferrer", children: [
2645
+ children,
2646
+ /* @__PURE__ */ jsx(
2647
+ "svg",
2648
+ {
2649
+ className: "inline-block w-4 h-4 ml-1",
2650
+ fill: "none",
2651
+ stroke: "currentColor",
2652
+ viewBox: "0 0 24 24",
2653
+ "aria-hidden": "true",
2654
+ children: /* @__PURE__ */ jsx(
2655
+ "path",
2656
+ {
2657
+ strokeLinecap: "round",
2658
+ strokeLinejoin: "round",
2659
+ strokeWidth: 2,
2660
+ d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
2661
+ }
2662
+ )
2663
+ }
2664
+ )
2665
+ ] });
2666
+ }
2667
+ return /* @__PURE__ */ jsx(Link, { to: href, className: linkClassName, children });
2668
+ }
2669
+ Link2.displayName = "Link";
2670
+ var link_default = Link2;
2671
+ function Footer({ sections, copyright, social, className = "" }) {
2672
+ return /* @__PURE__ */ jsx("footer", { className: `border-t border-border bg-muted/20 ${className}`, children: /* @__PURE__ */ jsxs(container_default, { children: [
2673
+ sections && sections.length > 0 && /* @__PURE__ */ jsx("div", { className: "py-12 md:py-16", children: /* @__PURE__ */ jsx(grid_default, { itemSize: "xs", maxCols: 4, gap: "lg", children: sections.map((section, index) => /* @__PURE__ */ jsxs("div", { children: [
2674
+ /* @__PURE__ */ jsx("h3", { className: "font-semibold text-foreground mb-4", children: section.title }),
2675
+ /* @__PURE__ */ jsx("ul", { className: "space-y-3", children: section.links.map((link, linkIndex) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
2676
+ link_default,
2677
+ {
2678
+ href: link.href,
2679
+ external: link.external,
2680
+ className: "text-sm text-muted hover:text-foreground transition-colors",
2681
+ children: link.label
2682
+ }
2683
+ ) }, linkIndex)) })
2684
+ ] }, index)) }) }),
2685
+ /* @__PURE__ */ jsxs(
2686
+ "div",
2687
+ {
2688
+ className: `${sections && sections.length > 0 ? "border-t border-border" : ""} py-6 flex flex-col md:flex-row items-center justify-between gap-4`,
2689
+ children: [
2690
+ copyright && /* @__PURE__ */ jsx(text_default, { variant: "muted", className: "text-sm text-center md:text-left", children: copyright }),
2691
+ social && /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-4", children: social })
2692
+ ]
2693
+ }
2694
+ )
2695
+ ] }) });
2696
+ }
2697
+ Footer.displayName = "Footer";
2698
+ var footer_default = Footer;
2699
+ function LeftNavLayout({
2700
+ nav,
2701
+ children,
2702
+ collapsed: controlledCollapsed,
2703
+ onCollapsedChange,
2704
+ showToggle = true,
2705
+ className = "",
2706
+ navClassName = "",
2707
+ contentClassName = "",
2708
+ navWidth = "16rem",
2709
+ navWidthCollapsed = "4.5rem",
2710
+ mobileCollapsible = true,
2711
+ mobileMenuOpen: controlledMobileMenuOpen,
2712
+ onMobileMenuOpenChange,
2713
+ embedded = false
2714
+ }) {
2715
+ const [internalCollapsed, setInternalCollapsed] = useState(false);
2716
+ const [internalMobileMenuOpen, setInternalMobileMenuOpen] = useState(false);
2717
+ const navRef = useRef(null);
2718
+ const scrollPosRef = useRef(0);
2719
+ const contentRef = useRef(null);
2720
+ const location = useLocation();
2721
+ const collapsed = controlledCollapsed ?? internalCollapsed;
2722
+ const setCollapsed = (value) => {
2723
+ if (onCollapsedChange) {
2724
+ onCollapsedChange(value);
2725
+ } else {
2726
+ setInternalCollapsed(value);
2727
+ }
2728
+ };
2729
+ const mobileMenuOpen = controlledMobileMenuOpen ?? internalMobileMenuOpen;
2730
+ const setMobileMenuOpen = (value) => {
2731
+ if (onMobileMenuOpenChange) {
2732
+ onMobileMenuOpenChange(value);
2733
+ } else {
2734
+ setInternalMobileMenuOpen(value);
2735
+ }
2736
+ };
2737
+ const toggleCollapsed = () => setCollapsed(!collapsed);
2738
+ const toggleMobileMenu = () => setMobileMenuOpen(!mobileMenuOpen);
2739
+ useEffect(() => {
2740
+ if (navRef.current) {
2741
+ navRef.current.scrollTop = scrollPosRef.current;
2742
+ }
2743
+ }, [children]);
2744
+ useEffect(() => {
2745
+ if (contentRef.current) {
2746
+ contentRef.current.scrollTop = 0;
2747
+ requestAnimationFrame(() => {
2748
+ if (contentRef.current) {
2749
+ contentRef.current.scrollTop = 0;
2750
+ }
2751
+ });
2752
+ }
2753
+ window.scrollTo({ top: 0 });
2754
+ }, [location.pathname]);
2755
+ const containerClasses = embedded ? "flex bg-background border border-border rounded-lg overflow-hidden" : "flex min-h-screen bg-background";
2756
+ return /* @__PURE__ */ jsxs("div", { className: `${containerClasses} ${className}`, children: [
2757
+ mobileCollapsible && mobileMenuOpen && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-40 lg:hidden bg-background/80", onClick: toggleMobileMenu, "aria-hidden": "true" }),
2758
+ /* @__PURE__ */ jsxs(
2759
+ "aside",
2760
+ {
2761
+ className: `
2762
+ ${embedded ? "relative flex flex-col h-full" : "fixed lg:fixed top-0 lg:top-16 left-0 z-40 lg:z-10 h-screen lg:h-[calc(100vh-4rem)]"}
2763
+ flex flex-col
2764
+ bg-background
2765
+ transition-all duration-300 ease-in-out
2766
+ ${!embedded && mobileCollapsible && !mobileMenuOpen ? "-translate-x-full lg:translate-x-0" : "translate-x-0"}
2767
+ ${collapsed ? navWidthCollapsed === "4.5rem" ? "w-[4.5rem]" : "" : navWidth === "16rem" ? "w-64" : ""}
2768
+ overflow-visible
2769
+ ${navClassName}
2770
+ `,
2771
+ style: !collapsed && navWidth !== "16rem" || collapsed && navWidthCollapsed !== "4.5rem" ? {
2772
+ width: collapsed ? navWidthCollapsed : navWidth
2773
+ } : void 0,
2774
+ "aria-label": "Main navigation",
2775
+ children: [
2776
+ showToggle && /* @__PURE__ */ jsxs(
2777
+ "div",
2778
+ {
2779
+ className: `
2780
+ flex items-center justify-between
2781
+ px-4 py-3 border-b border-border
2782
+ ${collapsed ? "justify-center" : ""}
2783
+ `,
2784
+ children: [
2785
+ !collapsed && /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: "Navigation" }),
2786
+ /* @__PURE__ */ jsx(
2787
+ "button",
2788
+ {
2789
+ onClick: toggleCollapsed,
2790
+ className: "\n hidden lg:flex items-center justify-center\n w-8 h-8 rounded\n text-foreground/70 hover:text-foreground\n hover:bg-muted\n transition-colors\n focus:outline-none focus:ring-2 focus:ring-ring\n ",
2791
+ "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
2792
+ type: "button",
2793
+ children: collapsed ? /* @__PURE__ */ jsx(IconChevronRight, { size: 20 }) : /* @__PURE__ */ jsx(IconChevronLeft, { size: 20 })
2794
+ }
2795
+ )
2796
+ ]
2797
+ }
2798
+ ),
2799
+ /* @__PURE__ */ jsx(
2800
+ "nav",
2801
+ {
2802
+ ref: navRef,
2803
+ className: "flex-1 overflow-y-auto overflow-x-visible scrollbar-thin",
2804
+ "data-collapsed": collapsed,
2805
+ onScroll: (e) => {
2806
+ scrollPosRef.current = e.currentTarget.scrollTop;
2807
+ },
2808
+ children: nav
2809
+ }
2810
+ )
2811
+ ]
2812
+ }
2813
+ ),
2814
+ /* @__PURE__ */ jsx(
2815
+ "div",
2816
+ {
2817
+ className: `flex-1 flex flex-col min-w-0 ${!embedded ? "transition-[margin-left] duration-300 ease-in-out" : ""} ${!embedded && collapsed ? navWidthCollapsed === "4.5rem" ? "lg:ml-[4.5rem]" : "" : !embedded && navWidth === "16rem" ? "lg:ml-64" : ""}`,
2818
+ style: !embedded && (collapsed && navWidthCollapsed !== "4.5rem" || !collapsed && navWidth !== "16rem") ? {
2819
+ marginLeft: window.innerWidth >= 1024 ? collapsed ? navWidthCollapsed : navWidth : "0"
2820
+ } : void 0,
2821
+ children: /* @__PURE__ */ jsx("main", { ref: contentRef, className: `flex-1 overflow-auto ${embedded ? "h-60" : ""} ${contentClassName}`, children })
2822
+ }
2823
+ )
2824
+ ] });
2825
+ }
2826
+ LeftNavLayout.displayName = "LeftNavLayout";
2827
+ var left_nav_layout_default = LeftNavLayout;
2828
+ function LeftNavItem({
2829
+ icon,
2830
+ children,
2831
+ active = false,
2832
+ className = "",
2833
+ badge,
2834
+ href = "#",
2835
+ title,
2836
+ preventNavigation = false
2837
+ }) {
2838
+ const navRef = useRef(null);
2839
+ const [isCollapsed, setIsCollapsed] = useState(() => {
2840
+ if (typeof window !== "undefined") {
2841
+ const navElement = document.querySelector("nav[data-collapsed]");
2842
+ return navElement?.getAttribute("data-collapsed") === "true";
2843
+ }
2844
+ return false;
2845
+ });
2846
+ useEffect(() => {
2847
+ const checkCollapsed = () => {
2848
+ const navElement2 = navRef.current?.closest("nav");
2849
+ if (navElement2) {
2850
+ setIsCollapsed(navElement2.getAttribute("data-collapsed") === "true");
2851
+ }
2852
+ };
2853
+ checkCollapsed();
2854
+ const navElement = navRef.current?.closest("nav");
2855
+ if (navElement) {
2856
+ const observer = new MutationObserver(checkCollapsed);
2857
+ observer.observe(navElement, {
2858
+ attributes: true,
2859
+ attributeFilter: ["data-collapsed"]
2860
+ });
2861
+ return () => observer.disconnect();
2862
+ }
2863
+ return void 0;
2864
+ }, []);
2865
+ const itemTitle = title || (typeof children === "string" ? children : void 0);
2866
+ const navLink = /* @__PURE__ */ jsxs(
2867
+ NavLink,
2868
+ {
2869
+ ref: navRef,
2870
+ to: href,
2871
+ onClick: (e) => {
2872
+ if (preventNavigation) {
2873
+ e.preventDefault();
2874
+ }
2875
+ },
2876
+ className: ({ isActive }) => `
2877
+ group relative flex items-center gap-3
2878
+ px-3 py-2.5 rounded-lg
2879
+ mx-2
2880
+ [nav[data-collapsed='true']_&]:mx-2
2881
+ [nav[data-collapsed='true']_&]:px-0
2882
+ [nav[data-collapsed='true']_&]:w-12
2883
+ [nav[data-collapsed='true']_&]:justify-center
2884
+ text-sm font-medium
2885
+ transition-colors duration-200
2886
+ focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-card
2887
+ ${isActive || active ? "bg-primary text-primary-foreground shadow-sm" : "text-foreground hover:bg-muted hover:text-foreground"}
2888
+ ${className}
2889
+ `,
2890
+ "aria-current": active ? "page" : void 0,
2891
+ "aria-label": itemTitle,
2892
+ end: true,
2893
+ children: [
2894
+ icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", "aria-hidden": "true", children: icon }),
2895
+ /* @__PURE__ */ jsx(
2896
+ "span",
2897
+ {
2898
+ className: "\n flex-1 truncate\n [nav[data-collapsed='true']_&]:hidden\n ",
2899
+ children
2900
+ }
2901
+ ),
2902
+ badge && /* @__PURE__ */ jsx(
2903
+ "span",
2904
+ {
2905
+ className: "\n flex-shrink-0\n [nav[data-collapsed='true']_&]:hidden\n ",
2906
+ children: badge
2907
+ }
2908
+ )
2909
+ ]
2910
+ }
2911
+ );
2912
+ if (!isCollapsed) {
2913
+ return navLink;
2914
+ }
2915
+ const tooltipContent = typeof children === "string" ? children : itemTitle || "Menu Item";
2916
+ return /* @__PURE__ */ jsx(tooltip_default, { content: tooltipContent, position: "right", variant: "default", usePortal: true, className: "w-full block", children: navLink });
2917
+ }
2918
+ LeftNavItem.displayName = "LeftNavItem";
2919
+ var left_nav_item_default = LeftNavItem;
2920
+ function LeftNavSection({ children, label, className = "" }) {
2921
+ return /* @__PURE__ */ jsxs("div", { className: `py-2 ${className}`, children: [
2922
+ label && /* @__PURE__ */ jsx(
2923
+ "h3",
2924
+ {
2925
+ className: "\n px-5 mb-2 mt-2\n text-xs font-semibold uppercase tracking-wider\n text-muted-foreground\n [nav[data-collapsed='true']_&]:hidden\n ",
2926
+ children: label
2927
+ }
2928
+ ),
2929
+ /* @__PURE__ */ jsx("div", { className: "space-y-1", children }),
2930
+ /* @__PURE__ */ jsx("div", { className: "h-px bg-border mx-3 mt-2", "aria-hidden": "true" })
2931
+ ] });
2932
+ }
2933
+ LeftNavSection.displayName = "LeftNavSection";
2934
+ var left_nav_section_default = LeftNavSection;
2935
+ function Code({ children, block = false, variant = "default", className = "" }) {
2936
+ const variantClasses = {
2937
+ default: "bg-muted text-foreground",
2938
+ primary: "text-primary",
2939
+ muted: "text-muted-foreground"
2940
+ };
2941
+ const baseClasses = `font-mono ${variantClasses[variant]}`;
2942
+ if (block) {
2943
+ return /* @__PURE__ */ jsx("pre", { className: `${baseClasses} p-4 rounded-lg overflow-x-auto border border-border ${className}`, children: /* @__PURE__ */ jsx("code", { children }) });
2944
+ }
2945
+ return /* @__PURE__ */ jsx("code", { className: `${baseClasses} px-1.5 py-0.5 rounded text-sm ${className}`, children });
2946
+ }
2947
+ Code.displayName = "Code";
2948
+ var code_default = Code;
2949
+ var ThemeContext = createContext(void 0);
2950
+ function ThemeProvider({
2951
+ children,
2952
+ defaultTheme = "light",
2953
+ storageKey = "hydn-theme",
2954
+ themes = ["light", "dark"]
2955
+ }) {
2956
+ const [theme, setThemeState] = useState(() => {
2957
+ if (typeof window !== "undefined") {
2958
+ const stored = localStorage.getItem(storageKey);
2959
+ return stored && themes.includes(stored) ? stored : defaultTheme;
2960
+ }
2961
+ return defaultTheme;
2962
+ });
2963
+ useEffect(() => {
2964
+ const root = window.document.documentElement;
2965
+ root.classList.remove(...themes);
2966
+ root.classList.add(theme);
2967
+ }, [theme, themes]);
2968
+ const setTheme = useCallback(
2969
+ (newTheme) => {
2970
+ if (themes.includes(newTheme)) {
2971
+ localStorage.setItem(storageKey, newTheme);
2972
+ setThemeState(newTheme);
2973
+ } else {
2974
+ console.warn(`Theme "${newTheme}" is not in availableThemes. Add it to the themes prop.`);
2975
+ }
2976
+ },
2977
+ [themes, storageKey]
2978
+ );
2979
+ const value = useMemo(
2980
+ () => ({
2981
+ theme,
2982
+ setTheme,
2983
+ availableThemes: themes
2984
+ }),
2985
+ [theme, themes, setTheme]
2986
+ );
2987
+ return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
2988
+ }
2989
+ function useTheme() {
2990
+ const context = useContext(ThemeContext);
2991
+ if (!context) {
2992
+ throw new Error("useTheme must be used within a ThemeProvider");
2993
+ }
2994
+ return context;
2995
+ }
2996
+ function ColorModeToggle({ className = "" }) {
2997
+ const { theme, setTheme } = useTheme();
2998
+ const toggleTheme = () => {
2999
+ setTheme(theme === "light" ? "dark" : "light");
3000
+ };
3001
+ const getIcon = () => {
3002
+ if (theme === "dark") {
3003
+ return /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
3004
+ "path",
3005
+ {
3006
+ strokeLinecap: "round",
3007
+ strokeLinejoin: "round",
3008
+ strokeWidth: 2,
3009
+ d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
3010
+ }
3011
+ ) });
3012
+ }
3013
+ return /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
3014
+ "path",
3015
+ {
3016
+ strokeLinecap: "round",
3017
+ strokeLinejoin: "round",
3018
+ strokeWidth: 2,
3019
+ d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
3020
+ }
3021
+ ) });
3022
+ };
3023
+ const getLabel = () => {
3024
+ return `Switch to ${theme === "light" ? "dark" : "light"} theme`;
3025
+ };
3026
+ return /* @__PURE__ */ jsx(
3027
+ "button",
3028
+ {
3029
+ onClick: toggleTheme,
3030
+ className: `p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer ${className}`,
3031
+ "aria-label": getLabel(),
3032
+ title: getLabel(),
3033
+ children: getIcon()
3034
+ }
3035
+ );
3036
+ }
3037
+ ColorModeToggle.displayName = "ColorModeToggle";
3038
+ var color_mode_toggle_default = ColorModeToggle;
3039
+
3040
+ export { accordion_default as Accordion, AccordionItem, alert_default as Alert, avatar_default as Avatar, badge_default as Badge, breadcrumbs_default as Breadcrumbs, button_default as Button, button_group_default as ButtonGroup, card_default as Card, card_footer_default as CardFooter, card_header_default as CardHeader, checkbox_default as Checkbox, chip_default as Chip, code_default as Code, code_block_default as CodeBlock, color_mode_toggle_default as ColorModeToggle, container_default as Container, data_table_default as DataTable, delete_dialog_default as DeleteDialog, dialog_default as Dialog, divider_default as Divider, drawer_default as Drawer, dropdown_default as Dropdown, empty_state_default as EmptyState, feature_section_default as FeatureSection, footer_default as Footer, form_field_default as FormField, grid_default as Grid, heading_default as Heading, hero_default as Hero, input_default as Input, input_group_default as InputGroup, left_nav_item_default as LeftNavItem, left_nav_layout_default as LeftNavLayout, left_nav_section_default as LeftNavSection, link_default as Link, List, ListItem, modal_default as Modal, nav_default as Nav, navbar_default as Navbar, navbar_brand_default as NavbarBrand, navbar_link_default as NavbarLink, page_default as Page, pagination_default as Pagination, popover_default as Popover, pricing_table_default as PricingTable, pricing_tier_default as PricingTier, progress_bar_default as ProgressBar, radio_default as Radio, radio_group_default as RadioGroup, select_default as Select, select_item_default as SelectItem, sidebar_default as Sidebar, skeleton_default as Skeleton, slider_default as Slider, spinner_default as Spinner, stack_default as Stack, status_label_default as StatusLabel, stepper_default as Stepper, switch_default as Switch, Table, TableBody, TableCell, TableFooter, TableHeadCell, TableHeader, TableRow, tabs_default as Tabs, text_default as Text, textarea_default as Textarea, ThemeProvider, timeline_default as Timeline, TimelineItem, toast_default as Toast, tooltip_default as Tooltip, useTable, useTheme };
3041
+ //# sourceMappingURL=index.js.map
3042
+ //# sourceMappingURL=index.js.map