@nukleas/react-cyberdesign 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js ADDED
@@ -0,0 +1,3217 @@
1
+ import { createContext, useContext, useMemo, useState, Children, isValidElement, useEffect, useRef, useCallback } from 'react';
2
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
3
+
4
+ // src/lib/cn.ts
5
+ function cn(...parts) {
6
+ return parts.filter(Boolean).join(" ");
7
+ }
8
+ var ThemeContext = createContext("orange");
9
+ function useTheme() {
10
+ return useContext(ThemeContext);
11
+ }
12
+ function ThemeProvider({
13
+ theme = "orange",
14
+ a11y = false,
15
+ className,
16
+ children,
17
+ ...rest
18
+ }) {
19
+ const value = useMemo(() => theme, [theme]);
20
+ return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children: /* @__PURE__ */ jsx(
21
+ "div",
22
+ {
23
+ className: cn(`theme-${theme}`, a11y && "cd-a11y", className),
24
+ "data-cd-theme": theme,
25
+ ...rest,
26
+ children
27
+ }
28
+ ) });
29
+ }
30
+ function AccordionItem({ title, icon, children, className = "", ...rest }) {
31
+ return /* @__PURE__ */ jsxs("details", { className: cn("cd-accordion__item", className), ...rest, children: [
32
+ /* @__PURE__ */ jsxs("summary", { className: "cd-accordion__trigger", children: [
33
+ icon != null && /* @__PURE__ */ jsx("span", { className: "cd-accordion__icon", children: icon }),
34
+ title
35
+ ] }),
36
+ /* @__PURE__ */ jsx("div", { className: "cd-accordion__body", children: /* @__PURE__ */ jsx("div", { className: "cd-accordion__content", children: /* @__PURE__ */ jsx("div", { className: "cd-accordion__content-inner", children }) }) })
37
+ ] });
38
+ }
39
+ function AccordionRoot({
40
+ items,
41
+ variant = "default",
42
+ className = "",
43
+ children,
44
+ ...rest
45
+ }) {
46
+ return /* @__PURE__ */ jsx(
47
+ "div",
48
+ {
49
+ className: cn(
50
+ "cd-accordion",
51
+ variant !== "default" && `cd-accordion--${variant}`,
52
+ className
53
+ ),
54
+ ...rest,
55
+ children: items ? items.map((item, i) => /* @__PURE__ */ jsx(
56
+ AccordionItem,
57
+ {
58
+ title: item.title,
59
+ icon: item.icon,
60
+ open: item.defaultOpen,
61
+ children: item.content
62
+ },
63
+ i
64
+ )) : children
65
+ }
66
+ );
67
+ }
68
+ var Accordion = Object.assign(AccordionRoot, { Item: AccordionItem });
69
+ function Alert({
70
+ variant = "info",
71
+ size,
72
+ inline = false,
73
+ title,
74
+ icon,
75
+ onDismiss,
76
+ className = "",
77
+ children,
78
+ ...rest
79
+ }) {
80
+ return /* @__PURE__ */ jsxs(
81
+ "div",
82
+ {
83
+ className: cn(
84
+ "cd-alert",
85
+ `cd-alert--${variant}`,
86
+ size === "sm" && "cd-alert--sm",
87
+ inline && "cd-alert--inline",
88
+ className
89
+ ),
90
+ ...rest,
91
+ children: [
92
+ icon != null && /* @__PURE__ */ jsx("span", { className: "cd-alert__icon", children: icon }),
93
+ /* @__PURE__ */ jsxs("div", { className: "cd-alert__content", children: [
94
+ title != null && /* @__PURE__ */ jsx("div", { className: "cd-alert__title", children: title }),
95
+ children != null && /* @__PURE__ */ jsx("div", { className: "cd-alert__body", children })
96
+ ] }),
97
+ onDismiss && /* @__PURE__ */ jsx("button", { className: "cd-alert__dismiss", onClick: onDismiss, "aria-label": "Dismiss", children: "\u2715" })
98
+ ]
99
+ }
100
+ );
101
+ }
102
+ function Modal({
103
+ open,
104
+ onClose,
105
+ title,
106
+ footer,
107
+ size = "default",
108
+ hideClose = false,
109
+ className = "",
110
+ children,
111
+ ...rest
112
+ }) {
113
+ return /* @__PURE__ */ jsx(
114
+ "div",
115
+ {
116
+ className: cn("cd-modal-overlay", open && "is-open"),
117
+ onClick: (e) => {
118
+ if (e.target === e.currentTarget) onClose?.();
119
+ },
120
+ children: /* @__PURE__ */ jsxs(
121
+ "div",
122
+ {
123
+ className: cn("cd-modal", size !== "default" && `cd-modal--${size}`, className),
124
+ role: "dialog",
125
+ "aria-modal": "true",
126
+ ...rest,
127
+ children: [
128
+ (title != null || !hideClose) && /* @__PURE__ */ jsxs("div", { className: "cd-modal__header", children: [
129
+ title != null && /* @__PURE__ */ jsx("span", { className: "cd-modal__title", children: title }),
130
+ !hideClose && /* @__PURE__ */ jsx("button", { className: "cd-modal__close", onClick: onClose, "aria-label": "Close", children: "\u2715" })
131
+ ] }),
132
+ /* @__PURE__ */ jsx("div", { className: "cd-modal__body", children }),
133
+ footer != null && /* @__PURE__ */ jsx("div", { className: "cd-modal__footer", children: footer })
134
+ ]
135
+ }
136
+ )
137
+ }
138
+ );
139
+ }
140
+ function Button({
141
+ variant = "default",
142
+ size = "md",
143
+ icon = false,
144
+ className = "",
145
+ children,
146
+ ...rest
147
+ }) {
148
+ return /* @__PURE__ */ jsx(
149
+ "button",
150
+ {
151
+ className: cn(
152
+ "cd-btn",
153
+ variant !== "default" && `cd-btn--${variant}`,
154
+ size === "sm" && "cd-btn--sm",
155
+ icon && "cd-btn--icon",
156
+ className
157
+ ),
158
+ ...rest,
159
+ children
160
+ }
161
+ );
162
+ }
163
+ function AlertDialog({
164
+ open,
165
+ onClose,
166
+ title = "Confirm",
167
+ children,
168
+ confirmLabel = "Confirm",
169
+ cancelLabel = "Cancel",
170
+ onConfirm,
171
+ destructive = false
172
+ }) {
173
+ return /* @__PURE__ */ jsx(
174
+ Modal,
175
+ {
176
+ open,
177
+ onClose,
178
+ title,
179
+ size: "sm",
180
+ footer: /* @__PURE__ */ jsxs(Fragment, { children: [
181
+ /* @__PURE__ */ jsx(Button, { type: "button", onClick: onClose, children: cancelLabel }),
182
+ /* @__PURE__ */ jsx(
183
+ Button,
184
+ {
185
+ type: "button",
186
+ variant: destructive ? "danger" : "primary",
187
+ onClick: () => {
188
+ onConfirm?.();
189
+ onClose?.();
190
+ },
191
+ children: confirmLabel
192
+ }
193
+ )
194
+ ] }),
195
+ children
196
+ }
197
+ );
198
+ }
199
+ function AspectRatio({
200
+ ratio = 16 / 9,
201
+ className = "",
202
+ style,
203
+ children,
204
+ ...rest
205
+ }) {
206
+ const merged = {
207
+ ...style,
208
+ paddingBottom: `${1 / ratio * 100}%`
209
+ };
210
+ return /* @__PURE__ */ jsx("div", { className: cn("cd-aspect-ratio", className), style: merged, ...rest, children });
211
+ }
212
+ function AugButton({
213
+ variant = "default",
214
+ size = "md",
215
+ reverse = false,
216
+ className = "",
217
+ children,
218
+ ...rest
219
+ }) {
220
+ return /* @__PURE__ */ jsx(
221
+ "button",
222
+ {
223
+ className: cn(
224
+ "cd-aug-btn",
225
+ variant === "primary" && "cd-aug-btn--primary",
226
+ size === "sm" && "cd-aug-btn--sm",
227
+ size === "lg" && "cd-aug-btn--lg",
228
+ reverse && "cd-aug-btn--rev",
229
+ className
230
+ ),
231
+ ...rest,
232
+ children
233
+ }
234
+ );
235
+ }
236
+ function AugPanel({
237
+ size = "md",
238
+ corners4 = false,
239
+ className = "",
240
+ children,
241
+ ...rest
242
+ }) {
243
+ return /* @__PURE__ */ jsx(
244
+ "div",
245
+ {
246
+ className: cn(
247
+ "cd-aug-panel",
248
+ size === "sm" && "cd-aug-panel--sm",
249
+ size === "lg" && "cd-aug-panel--lg",
250
+ corners4 && "cd-aug-panel--4",
251
+ className
252
+ ),
253
+ ...rest,
254
+ children
255
+ }
256
+ );
257
+ }
258
+ function Avatar({
259
+ src,
260
+ alt = "",
261
+ fallback,
262
+ size = "md",
263
+ glow = false,
264
+ status,
265
+ className = "",
266
+ ...rest
267
+ }) {
268
+ return /* @__PURE__ */ jsx(
269
+ "div",
270
+ {
271
+ className: cn(
272
+ "cd-avatar",
273
+ size !== "md" && `cd-avatar--${size}`,
274
+ glow && "cd-avatar--glow",
275
+ className
276
+ ),
277
+ "data-status": status,
278
+ ...rest,
279
+ children: src != null ? /* @__PURE__ */ jsx("img", { className: "cd-avatar__image", src, alt }) : /* @__PURE__ */ jsx("span", { className: "cd-avatar__fallback", children: fallback })
280
+ }
281
+ );
282
+ }
283
+ function AvatarGroup({ more, className = "", children, ...rest }) {
284
+ return /* @__PURE__ */ jsxs("div", { className: cn("cd-avatar-group", className), ...rest, children: [
285
+ children,
286
+ more != null && more > 0 && /* @__PURE__ */ jsxs("span", { className: "cd-avatar-group__more", children: [
287
+ "+",
288
+ more
289
+ ] })
290
+ ] });
291
+ }
292
+ Avatar.Group = AvatarGroup;
293
+ function Badge({
294
+ color = "orange",
295
+ className = "",
296
+ children,
297
+ ...rest
298
+ }) {
299
+ return /* @__PURE__ */ jsx("span", { className: cn("cd-badge", `cd-badge--${color}`, className), ...rest, children });
300
+ }
301
+ function BottomNav({
302
+ items,
303
+ value,
304
+ onValueChange,
305
+ className = "",
306
+ ...rest
307
+ }) {
308
+ return /* @__PURE__ */ jsx("nav", { className: cn("cd-bottom-nav", className), ...rest, children: items.map((item) => {
309
+ const active = value === item.id;
310
+ return /* @__PURE__ */ jsxs(
311
+ "button",
312
+ {
313
+ type: "button",
314
+ disabled: item.disabled,
315
+ className: cn("cd-bottom-nav__item", active && "is-active"),
316
+ "data-active": active || void 0,
317
+ onClick: () => onValueChange?.(item.id),
318
+ children: [
319
+ item.icon != null && /* @__PURE__ */ jsx("span", { className: "cd-bottom-nav__icon", children: item.icon }),
320
+ /* @__PURE__ */ jsx("span", { className: "cd-bottom-nav__label", children: item.label }),
321
+ item.badge != null && /* @__PURE__ */ jsx("span", { className: "cd-bottom-nav__badge", children: item.badge })
322
+ ]
323
+ },
324
+ item.id
325
+ );
326
+ }) });
327
+ }
328
+ function Breadcrumb({
329
+ items,
330
+ variant = "default",
331
+ className = "",
332
+ "aria-label": ariaLabel = "breadcrumb",
333
+ ...rest
334
+ }) {
335
+ const lastIndex = items.length - 1;
336
+ return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, ...rest, children: /* @__PURE__ */ jsx(
337
+ "ol",
338
+ {
339
+ className: cn(
340
+ "cd-breadcrumb",
341
+ variant === "arrow" && "cd-breadcrumb--arrow",
342
+ variant === "dot" && "cd-breadcrumb--dot",
343
+ className
344
+ ),
345
+ children: items.map((item, i) => {
346
+ const isActive = item.active ?? i === lastIndex;
347
+ return /* @__PURE__ */ jsx(
348
+ "li",
349
+ {
350
+ className: cn("cd-breadcrumb__item", isActive && "cd-breadcrumb__item--active"),
351
+ children: isActive || item.href == null ? /* @__PURE__ */ jsx("span", { children: item.label }) : /* @__PURE__ */ jsx("a", { className: "cd-breadcrumb__link", href: item.href, children: item.label })
352
+ },
353
+ i
354
+ );
355
+ })
356
+ }
357
+ ) });
358
+ }
359
+ function ButtonGroup({
360
+ vertical = false,
361
+ className = "",
362
+ children,
363
+ ...rest
364
+ }) {
365
+ return /* @__PURE__ */ jsx(
366
+ "div",
367
+ {
368
+ className: cn("cd-btn-group", vertical && "cd-btn-group--vertical", className),
369
+ role: "group",
370
+ ...rest,
371
+ children
372
+ }
373
+ );
374
+ }
375
+ var WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
376
+ function startOfMonth(d) {
377
+ return new Date(d.getFullYear(), d.getMonth(), 1);
378
+ }
379
+ function daysInMonth(d) {
380
+ return new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate();
381
+ }
382
+ function sameDay(a, b) {
383
+ return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
384
+ }
385
+ function formatMonth(d) {
386
+ return d.toLocaleString(void 0, { month: "long", year: "numeric" });
387
+ }
388
+ function Calendar({
389
+ selected,
390
+ defaultSelected,
391
+ month,
392
+ defaultMonth,
393
+ onSelect,
394
+ onMonthChange,
395
+ className = "",
396
+ ...rest
397
+ }) {
398
+ const [internalMonth, setInternalMonth] = useState(
399
+ () => startOfMonth(defaultMonth ?? defaultSelected ?? /* @__PURE__ */ new Date())
400
+ );
401
+ const [internalSelected, setInternalSelected] = useState(defaultSelected);
402
+ const view = startOfMonth(month ?? internalMonth);
403
+ const value = selected ?? internalSelected;
404
+ const today = useMemo(() => /* @__PURE__ */ new Date(), []);
405
+ const setView = (d) => {
406
+ const next = startOfMonth(d);
407
+ if (month == null) setInternalMonth(next);
408
+ onMonthChange?.(next);
409
+ };
410
+ const cells = useMemo(() => {
411
+ const firstDow = view.getDay();
412
+ const total = daysInMonth(view);
413
+ const prevTotal = daysInMonth(new Date(view.getFullYear(), view.getMonth() - 1, 1));
414
+ const out = [];
415
+ for (let i = firstDow - 1; i >= 0; i--) {
416
+ out.push({
417
+ date: new Date(view.getFullYear(), view.getMonth() - 1, prevTotal - i),
418
+ outside: true
419
+ });
420
+ }
421
+ for (let d = 1; d <= total; d++) {
422
+ out.push({ date: new Date(view.getFullYear(), view.getMonth(), d), outside: false });
423
+ }
424
+ while (out.length % 7 !== 0) {
425
+ const last = out[out.length - 1].date;
426
+ out.push({
427
+ date: new Date(last.getFullYear(), last.getMonth(), last.getDate() + 1),
428
+ outside: true
429
+ });
430
+ }
431
+ return out;
432
+ }, [view]);
433
+ return /* @__PURE__ */ jsxs("div", { className: cn("cd-calendar", className), ...rest, children: [
434
+ /* @__PURE__ */ jsxs("div", { className: "cd-calendar__header", children: [
435
+ /* @__PURE__ */ jsx("span", { className: "cd-calendar__title", children: formatMonth(view) }),
436
+ /* @__PURE__ */ jsxs("div", { className: "cd-calendar__nav", children: [
437
+ /* @__PURE__ */ jsx(
438
+ "button",
439
+ {
440
+ type: "button",
441
+ className: "cd-calendar__nav-btn",
442
+ "aria-label": "Previous month",
443
+ onClick: () => setView(new Date(view.getFullYear(), view.getMonth() - 1, 1)),
444
+ children: "\u2039"
445
+ }
446
+ ),
447
+ /* @__PURE__ */ jsx(
448
+ "button",
449
+ {
450
+ type: "button",
451
+ className: "cd-calendar__nav-btn",
452
+ "aria-label": "Next month",
453
+ onClick: () => setView(new Date(view.getFullYear(), view.getMonth() + 1, 1)),
454
+ children: "\u203A"
455
+ }
456
+ )
457
+ ] })
458
+ ] }),
459
+ /* @__PURE__ */ jsxs("div", { className: "cd-calendar__grid", children: [
460
+ WEEKDAYS.map((w) => /* @__PURE__ */ jsx("div", { className: "cd-calendar__weekday", children: w }, w)),
461
+ cells.map(({ date, outside }) => {
462
+ const isSelected = value ? sameDay(date, value) : false;
463
+ const isToday = sameDay(date, today);
464
+ return /* @__PURE__ */ jsx(
465
+ "button",
466
+ {
467
+ type: "button",
468
+ className: cn(
469
+ "cd-calendar__day",
470
+ outside && "is-outside",
471
+ isToday && "is-today",
472
+ isSelected && "is-selected"
473
+ ),
474
+ onClick: () => {
475
+ if (selected == null) setInternalSelected(date);
476
+ onSelect?.(date);
477
+ },
478
+ children: date.getDate()
479
+ },
480
+ date.toISOString()
481
+ );
482
+ })
483
+ ] })
484
+ ] });
485
+ }
486
+ function Card({ glow = false, className = "", children, ...rest }) {
487
+ return /* @__PURE__ */ jsx("div", { className: cn("cd-card", glow && "cd-card--glow", className), ...rest, children });
488
+ }
489
+ function CardHeader({ row = false, className = "", children, ...rest }) {
490
+ return /* @__PURE__ */ jsx("div", { className: cn("cd-card__header", row && "cd-card__header--row", className), ...rest, children });
491
+ }
492
+ function CardTitle({ className = "", children, ...rest }) {
493
+ return /* @__PURE__ */ jsx("h3", { className: cn("cd-card__title", className), ...rest, children });
494
+ }
495
+ function CardDescription({ className = "", children, ...rest }) {
496
+ return /* @__PURE__ */ jsx("p", { className: cn("cd-card__description", className), ...rest, children });
497
+ }
498
+ function CardContent({ className = "", children, ...rest }) {
499
+ return /* @__PURE__ */ jsx("div", { className: cn("cd-card__content", className), ...rest, children });
500
+ }
501
+ function CardFooter({ end = false, className = "", children, ...rest }) {
502
+ return /* @__PURE__ */ jsx("div", { className: cn("cd-card__footer", end && "cd-card__footer--end", className), ...rest, children });
503
+ }
504
+ Object.assign(Card, {
505
+ Header: CardHeader,
506
+ Title: CardTitle,
507
+ Description: CardDescription,
508
+ Content: CardContent,
509
+ Footer: CardFooter
510
+ });
511
+ function Carousel({
512
+ children,
513
+ defaultIndex = 0,
514
+ showDots = true,
515
+ showControls = true,
516
+ className = "",
517
+ ...rest
518
+ }) {
519
+ const slides = Children.toArray(children).filter(isValidElement);
520
+ const [index, setIndex] = useState(defaultIndex);
521
+ const count = slides.length;
522
+ const go = (i) => setIndex((i % count + count) % count);
523
+ return /* @__PURE__ */ jsxs("div", { className: cn("cd-carousel", className), ...rest, children: [
524
+ /* @__PURE__ */ jsx("div", { className: "cd-carousel__viewport", children: /* @__PURE__ */ jsx(
525
+ "div",
526
+ {
527
+ className: "cd-carousel__track",
528
+ style: { transform: `translateX(-${index * 100}%)` },
529
+ children: slides.map((slide, i) => /* @__PURE__ */ jsx("div", { className: "cd-carousel__slide", children: /* @__PURE__ */ jsx("div", { className: "cd-carousel__slide-inner", children: slide }) }, i))
530
+ }
531
+ ) }),
532
+ (showControls || showDots) && /* @__PURE__ */ jsxs("div", { className: "cd-carousel__controls", children: [
533
+ showControls && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", onClick: () => go(index - 1), "aria-label": "Previous", children: "\u2039" }),
534
+ showDots && /* @__PURE__ */ jsx("div", { className: "cd-carousel__dots", children: slides.map((_, i) => /* @__PURE__ */ jsx(
535
+ "button",
536
+ {
537
+ type: "button",
538
+ className: cn("cd-carousel__dot", i === index && "is-active"),
539
+ "aria-label": `Go to slide ${i + 1}`,
540
+ onClick: () => setIndex(i)
541
+ },
542
+ i
543
+ )) }),
544
+ showControls && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", onClick: () => go(index + 1), "aria-label": "Next", children: "\u203A" })
545
+ ] })
546
+ ] });
547
+ }
548
+ function Chip({
549
+ active = false,
550
+ size = "md",
551
+ className = "",
552
+ children,
553
+ type = "button",
554
+ ...rest
555
+ }) {
556
+ return /* @__PURE__ */ jsx(
557
+ "button",
558
+ {
559
+ type,
560
+ className: cn("cd-chip", size === "sm" && "cd-chip--sm", active && "is-active", className),
561
+ "data-active": active || void 0,
562
+ "aria-pressed": active,
563
+ ...rest,
564
+ children
565
+ }
566
+ );
567
+ }
568
+ function ChipRow({ className = "", children, ...rest }) {
569
+ return /* @__PURE__ */ jsx("div", { className: cn("cd-chip-row", className), ...rest, children });
570
+ }
571
+ function Input({
572
+ size = "md",
573
+ accent = false,
574
+ error = false,
575
+ className = "",
576
+ type = "text",
577
+ ...rest
578
+ }) {
579
+ return /* @__PURE__ */ jsx(
580
+ "input",
581
+ {
582
+ type,
583
+ className: cn(
584
+ "cd-input",
585
+ size === "sm" && "cd-input--sm",
586
+ size === "lg" && "cd-input--lg",
587
+ accent && "cd-input--accent",
588
+ error && "cd-input--error",
589
+ className
590
+ ),
591
+ ...rest
592
+ }
593
+ );
594
+ }
595
+ function PanelHeader({
596
+ actions,
597
+ className = "",
598
+ children,
599
+ ...rest
600
+ }) {
601
+ return /* @__PURE__ */ jsxs("div", { className: cn("cd-panel-header", className), ...rest, children: [
602
+ children,
603
+ actions != null && /* @__PURE__ */ jsx("div", { className: "cd-panel-header__actions", children: actions })
604
+ ] });
605
+ }
606
+ function Spinner({
607
+ size = "md",
608
+ variant = "ring",
609
+ label = "Loading",
610
+ className = "",
611
+ ...rest
612
+ }) {
613
+ return /* @__PURE__ */ jsx(
614
+ "div",
615
+ {
616
+ role: "status",
617
+ "aria-label": label,
618
+ className: cn(
619
+ "cd-spinner",
620
+ size !== "md" && `cd-spinner--${size}`,
621
+ variant === "dual" && "cd-spinner--dual",
622
+ variant === "dots" && "cd-spinner--dots",
623
+ className
624
+ ),
625
+ ...rest,
626
+ children: variant === "dots" && /* @__PURE__ */ jsx("span", {})
627
+ }
628
+ );
629
+ }
630
+ function ChatAction({
631
+ icon,
632
+ label,
633
+ active = false,
634
+ danger = false,
635
+ showLabel = false,
636
+ className = "",
637
+ type = "button",
638
+ title,
639
+ children,
640
+ ...rest
641
+ }) {
642
+ const tip = title ?? (typeof label === "string" ? label : void 0);
643
+ return /* @__PURE__ */ jsxs(
644
+ "button",
645
+ {
646
+ type,
647
+ title: tip,
648
+ "aria-label": typeof tip === "string" ? tip : void 0,
649
+ className: cn(
650
+ "cd-chat-action",
651
+ active && "is-active",
652
+ danger && "cd-chat-action--danger",
653
+ className
654
+ ),
655
+ ...rest,
656
+ children: [
657
+ icon != null && /* @__PURE__ */ jsx("span", { className: "cd-chat-action__icon", children: icon }),
658
+ (showLabel || !icon && label != null) && /* @__PURE__ */ jsx("span", { className: "cd-chat-action__label", children: label }),
659
+ children
660
+ ]
661
+ }
662
+ );
663
+ }
664
+ function ChatActions({
665
+ placement = "overlay",
666
+ visible = false,
667
+ className = "",
668
+ children,
669
+ ...rest
670
+ }) {
671
+ return /* @__PURE__ */ jsx(
672
+ "div",
673
+ {
674
+ className: cn(
675
+ "cd-chat-actions",
676
+ placement === "overlay" ? "cd-chat-actions--overlay" : "cd-chat-actions--below",
677
+ visible && "is-visible",
678
+ className
679
+ ),
680
+ ...rest,
681
+ children
682
+ }
683
+ );
684
+ }
685
+ function ChatCodeBlock({
686
+ code,
687
+ language = "code",
688
+ onCopy,
689
+ onInsert,
690
+ onRun,
691
+ className = "",
692
+ ...rest
693
+ }) {
694
+ const [copied, setCopied] = useState(false);
695
+ const copy = async () => {
696
+ try {
697
+ await navigator.clipboard?.writeText(code);
698
+ } catch {
699
+ }
700
+ setCopied(true);
701
+ onCopy?.(code);
702
+ window.setTimeout(() => setCopied(false), 1400);
703
+ };
704
+ return /* @__PURE__ */ jsxs("div", { className: cn("cd-chat-code", className), ...rest, children: [
705
+ /* @__PURE__ */ jsxs("div", { className: "cd-chat-code__header", children: [
706
+ /* @__PURE__ */ jsx("span", { children: language }),
707
+ /* @__PURE__ */ jsxs("div", { className: "cd-chat-code__header-actions", children: [
708
+ onRun && /* @__PURE__ */ jsx(ChatAction, { icon: "\u25B6", label: "Run", title: "Run / play", onClick: () => onRun(code) }),
709
+ onInsert && /* @__PURE__ */ jsx(ChatAction, { icon: "\u21A7", label: "Insert", title: "Insert into editor", onClick: () => onInsert(code) }),
710
+ /* @__PURE__ */ jsx(
711
+ ChatAction,
712
+ {
713
+ icon: copied ? "\u2713" : "\u29C9",
714
+ label: copied ? "Copied" : "Copy",
715
+ title: "Copy code",
716
+ active: copied,
717
+ onClick: copy
718
+ }
719
+ )
720
+ ] })
721
+ ] }),
722
+ /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: code }) })
723
+ ] });
724
+ }
725
+ var ROLE_AUTHOR = {
726
+ user: "You",
727
+ assistant: "AI",
728
+ system: "System",
729
+ error: "Error"
730
+ };
731
+ function ChatMessage({
732
+ role,
733
+ children,
734
+ code,
735
+ codeLang = "strudel",
736
+ time,
737
+ author,
738
+ actions,
739
+ actionsVisible = false,
740
+ onCopyCode,
741
+ onInsertCode,
742
+ onRunCode,
743
+ className = "",
744
+ ...rest
745
+ }) {
746
+ const showMeta = author != null || time != null || role !== "system";
747
+ return /* @__PURE__ */ jsxs("div", { className: cn("cd-chat-row", `cd-chat-row--${role}`, className), ...rest, children: [
748
+ showMeta && role !== "system" && /* @__PURE__ */ jsxs("div", { className: "cd-chat-row__meta", children: [
749
+ /* @__PURE__ */ jsx("span", { children: author ?? ROLE_AUTHOR[role] }),
750
+ time != null && /* @__PURE__ */ jsx("span", { className: "cd-chat-row__meta-right", children: time })
751
+ ] }),
752
+ /* @__PURE__ */ jsxs("div", { className: cn("cd-chat-msg", `cd-chat-msg--${role}`), style: { position: "relative", maxWidth: "100%" }, children: [
753
+ children,
754
+ actions != null && /* @__PURE__ */ jsx(ChatActions, { placement: "overlay", visible: actionsVisible, children: actions })
755
+ ] }),
756
+ code != null && /* @__PURE__ */ jsx(
757
+ ChatCodeBlock,
758
+ {
759
+ code,
760
+ language: codeLang,
761
+ onCopy: onCopyCode,
762
+ onInsert: onInsertCode,
763
+ onRun: onRunCode,
764
+ style: { width: "100%", maxWidth: 420 }
765
+ }
766
+ )
767
+ ] });
768
+ }
769
+ function ChatTyping({ label = "Thinking", className = "", ...rest }) {
770
+ return /* @__PURE__ */ jsxs("div", { className: cn("cd-chat-typing", className), ...rest, children: [
771
+ /* @__PURE__ */ jsxs("span", { className: "cd-chat-typing__dots", "aria-hidden": true, children: [
772
+ /* @__PURE__ */ jsx("span", {}),
773
+ /* @__PURE__ */ jsx("span", {}),
774
+ /* @__PURE__ */ jsx("span", {})
775
+ ] }),
776
+ label
777
+ ] });
778
+ }
779
+ function Chat({
780
+ title = "AI",
781
+ actions,
782
+ messages = [],
783
+ prompts,
784
+ onPrompt,
785
+ value,
786
+ onValueChange,
787
+ placeholder = "Ask for a pattern\u2026",
788
+ onSubmit,
789
+ submitLabel = "Send",
790
+ composerTools,
791
+ typing = false,
792
+ typingLabel,
793
+ disabled = false,
794
+ renderMessage,
795
+ className = "",
796
+ children,
797
+ ...rest
798
+ }) {
799
+ const handleSubmit = (e) => {
800
+ e.preventDefault();
801
+ if (disabled) return;
802
+ if (value?.trim()) onSubmit?.(value.trim());
803
+ };
804
+ return /* @__PURE__ */ jsxs("div", { className: cn("cd-chat", className), ...rest, children: [
805
+ /* @__PURE__ */ jsx(PanelHeader, { actions, children: title }),
806
+ /* @__PURE__ */ jsxs("div", { className: "cd-chat__messages", children: [
807
+ messages.map(
808
+ (m, i) => renderMessage ? /* @__PURE__ */ jsx("div", { children: renderMessage(m, i) }, m.id ?? i) : /* @__PURE__ */ jsx(
809
+ ChatMessage,
810
+ {
811
+ role: m.role,
812
+ code: m.code,
813
+ codeLang: m.codeLang,
814
+ time: m.time,
815
+ author: m.author,
816
+ children: m.content
817
+ },
818
+ m.id ?? i
819
+ )
820
+ ),
821
+ typing && /* @__PURE__ */ jsx(ChatTyping, { label: typingLabel }),
822
+ children
823
+ ] }),
824
+ prompts != null && prompts.length > 0 && /* @__PURE__ */ jsx("div", { className: "cd-chat__prompts", children: prompts.map((p) => /* @__PURE__ */ jsx(Chip, { size: "sm", onClick: () => onPrompt?.(p.value), children: p.label }, String(p.value))) }),
825
+ /* @__PURE__ */ jsxs("div", { className: "cd-chat__composer-wrap", children: [
826
+ composerTools != null && /* @__PURE__ */ jsx("div", { className: "cd-chat__composer-tools", children: composerTools }),
827
+ /* @__PURE__ */ jsxs("form", { className: "cd-chat__composer", onSubmit: handleSubmit, children: [
828
+ /* @__PURE__ */ jsx(
829
+ Input,
830
+ {
831
+ value,
832
+ onChange: (e) => onValueChange?.(e.target.value),
833
+ placeholder,
834
+ disabled
835
+ }
836
+ ),
837
+ /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "sm", disabled: disabled || !value?.trim(), children: disabled ? /* @__PURE__ */ jsx(Spinner, { size: "xs" }) : submitLabel })
838
+ ] })
839
+ ] })
840
+ ] });
841
+ }
842
+ function Checkbox({ label, description, className = "", ...rest }) {
843
+ const input = /* @__PURE__ */ jsx("input", { type: "checkbox", className: cn("cd-checkbox", !label && className), ...rest });
844
+ if (label == null && description == null) return input;
845
+ return /* @__PURE__ */ jsxs("label", { className: cn("cd-control", className), children: [
846
+ /* @__PURE__ */ jsx("input", { type: "checkbox", className: "cd-checkbox", ...rest }),
847
+ /* @__PURE__ */ jsxs("span", { className: "cd-control__label", children: [
848
+ label,
849
+ description != null && /* @__PURE__ */ jsx("span", { className: "cd-control__desc", children: description })
850
+ ] })
851
+ ] });
852
+ }
853
+ function Clock({
854
+ timeZone,
855
+ showDate = true,
856
+ hour12 = false,
857
+ className = "",
858
+ ...rest
859
+ }) {
860
+ const [now, setNow] = useState(() => /* @__PURE__ */ new Date());
861
+ useEffect(() => {
862
+ const id = window.setInterval(() => setNow(/* @__PURE__ */ new Date()), 1e3);
863
+ return () => window.clearInterval(id);
864
+ }, []);
865
+ const time = now.toLocaleTimeString(void 0, {
866
+ hour12,
867
+ hour: "2-digit",
868
+ minute: "2-digit",
869
+ second: "2-digit",
870
+ timeZone
871
+ });
872
+ const date = now.toLocaleDateString(void 0, {
873
+ year: "numeric",
874
+ month: "2-digit",
875
+ day: "2-digit",
876
+ timeZone
877
+ });
878
+ return /* @__PURE__ */ jsxs("span", { className: cn("cd-clock", className), ...rest, children: [
879
+ showDate && /* @__PURE__ */ jsx("span", { className: "cd-clock__date", children: date }),
880
+ /* @__PURE__ */ jsx("span", { className: "cd-clock__time", children: time })
881
+ ] });
882
+ }
883
+ function Collapsible({
884
+ trigger,
885
+ defaultOpen = false,
886
+ open,
887
+ onOpenChange,
888
+ className = "",
889
+ children,
890
+ ...rest
891
+ }) {
892
+ const [internal, setInternal] = useState(defaultOpen);
893
+ const isOpen = open ?? internal;
894
+ const toggle = () => {
895
+ const next = !isOpen;
896
+ if (open == null) setInternal(next);
897
+ onOpenChange?.(next);
898
+ };
899
+ return /* @__PURE__ */ jsxs("div", { className: cn("cd-collapsible", isOpen && "is-open", className), ...rest, children: [
900
+ /* @__PURE__ */ jsxs("button", { type: "button", className: "cd-collapsible__trigger", onClick: toggle, "aria-expanded": isOpen, children: [
901
+ /* @__PURE__ */ jsx("span", { children: trigger }),
902
+ /* @__PURE__ */ jsx("span", { className: "cd-collapsible__chevron", "aria-hidden": true, children: "\u25BE" })
903
+ ] }),
904
+ /* @__PURE__ */ jsx("div", { className: "cd-collapsible__content", children })
905
+ ] });
906
+ }
907
+ function Combobox({
908
+ options,
909
+ value,
910
+ defaultValue = "",
911
+ onChange,
912
+ placeholder = "Select\u2026",
913
+ emptyText = "No matches",
914
+ disabled = false,
915
+ className = "",
916
+ ...rest
917
+ }) {
918
+ const [open, setOpen] = useState(false);
919
+ const [internal, setInternal] = useState(defaultValue);
920
+ const [query, setQuery] = useState("");
921
+ const selected = value ?? internal;
922
+ const selectedLabel = options.find((o) => o.value === selected)?.label ?? "";
923
+ const filtered = useMemo(() => {
924
+ const q = query.trim().toLowerCase();
925
+ if (!q) return options;
926
+ return options.filter(
927
+ (o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q)
928
+ );
929
+ }, [options, query]);
930
+ return /* @__PURE__ */ jsxs("div", { className: cn("cd-combobox", open && "is-open", className), ...rest, children: [
931
+ /* @__PURE__ */ jsx(
932
+ Input,
933
+ {
934
+ disabled,
935
+ placeholder,
936
+ value: open ? query : selectedLabel,
937
+ onFocus: () => {
938
+ setOpen(true);
939
+ setQuery("");
940
+ },
941
+ onChange: (e) => {
942
+ setQuery(e.target.value);
943
+ setOpen(true);
944
+ },
945
+ onBlur: () => {
946
+ window.setTimeout(() => setOpen(false), 120);
947
+ }
948
+ }
949
+ ),
950
+ /* @__PURE__ */ jsxs("div", { className: "cd-combobox__menu", role: "listbox", children: [
951
+ filtered.length === 0 && /* @__PURE__ */ jsx("div", { className: "cd-command__empty", style: { padding: 12 }, children: emptyText }),
952
+ filtered.map((opt) => /* @__PURE__ */ jsx(
953
+ "button",
954
+ {
955
+ type: "button",
956
+ role: "option",
957
+ disabled: opt.disabled,
958
+ "aria-selected": opt.value === selected,
959
+ className: "cd-combobox__option",
960
+ onMouseDown: (e) => e.preventDefault(),
961
+ onClick: () => {
962
+ if (value == null) setInternal(opt.value);
963
+ onChange?.(opt.value);
964
+ setOpen(false);
965
+ },
966
+ children: opt.label
967
+ },
968
+ opt.value
969
+ ))
970
+ ] })
971
+ ] });
972
+ }
973
+ function Command({
974
+ items,
975
+ placeholder = "Type a command\u2026",
976
+ emptyText = "No results",
977
+ onSelect,
978
+ className = "",
979
+ ...rest
980
+ }) {
981
+ const [query, setQuery] = useState("");
982
+ const [active, setActive] = useState(0);
983
+ const filtered = useMemo(() => {
984
+ const q = query.trim().toLowerCase();
985
+ if (!q) return items;
986
+ return items.filter((item) => {
987
+ const hay = `${item.value} ${item.keywords ?? ""} ${typeof item.label === "string" ? item.label : ""}`.toLowerCase();
988
+ return hay.includes(q);
989
+ });
990
+ }, [items, query]);
991
+ const groups = useMemo(() => {
992
+ const map = /* @__PURE__ */ new Map();
993
+ for (const item of filtered) {
994
+ const g = item.group ?? "";
995
+ if (!map.has(g)) map.set(g, []);
996
+ map.get(g).push(item);
997
+ }
998
+ return map;
999
+ }, [filtered]);
1000
+ return /* @__PURE__ */ jsxs("div", { className: cn("cd-command", className), ...rest, children: [
1001
+ /* @__PURE__ */ jsx("div", { className: "cd-command__input-wrap", children: /* @__PURE__ */ jsx(
1002
+ "input",
1003
+ {
1004
+ className: "cd-command__input",
1005
+ value: query,
1006
+ placeholder,
1007
+ onChange: (e) => {
1008
+ setQuery(e.target.value);
1009
+ setActive(0);
1010
+ },
1011
+ onKeyDown: (e) => {
1012
+ if (e.key === "ArrowDown") {
1013
+ e.preventDefault();
1014
+ setActive((i) => Math.min(i + 1, filtered.length - 1));
1015
+ } else if (e.key === "ArrowUp") {
1016
+ e.preventDefault();
1017
+ setActive((i) => Math.max(i - 1, 0));
1018
+ } else if (e.key === "Enter" && filtered[active] && !filtered[active].disabled) {
1019
+ filtered[active].onSelect?.();
1020
+ onSelect?.(filtered[active]);
1021
+ }
1022
+ }
1023
+ }
1024
+ ) }),
1025
+ /* @__PURE__ */ jsxs("div", { className: "cd-command__list", role: "listbox", children: [
1026
+ filtered.length === 0 && /* @__PURE__ */ jsx("div", { className: "cd-command__empty", children: emptyText }),
1027
+ Array.from(groups.entries()).map(([group, groupItems]) => /* @__PURE__ */ jsxs("div", { children: [
1028
+ group && /* @__PURE__ */ jsx("div", { className: "cd-command__group-label", children: group }),
1029
+ groupItems.map((item) => {
1030
+ const idx = filtered.indexOf(item);
1031
+ return /* @__PURE__ */ jsxs(
1032
+ "button",
1033
+ {
1034
+ type: "button",
1035
+ role: "option",
1036
+ disabled: item.disabled,
1037
+ className: cn("cd-command__item", idx === active && "is-selected"),
1038
+ "data-selected": idx === active,
1039
+ onMouseEnter: () => setActive(idx),
1040
+ onClick: () => {
1041
+ item.onSelect?.();
1042
+ onSelect?.(item);
1043
+ },
1044
+ children: [
1045
+ item.label,
1046
+ item.kbd != null && /* @__PURE__ */ jsx("span", { className: "cd-command__item-kbd", children: item.kbd })
1047
+ ]
1048
+ },
1049
+ item.value
1050
+ );
1051
+ })
1052
+ ] }, group || "__default"))
1053
+ ] })
1054
+ ] });
1055
+ }
1056
+ function ContextMenu({ items, children, className = "", ...rest }) {
1057
+ const [open, setOpen] = useState(false);
1058
+ const [pos, setPos] = useState({ x: 0, y: 0 });
1059
+ useEffect(() => {
1060
+ if (!open) return;
1061
+ const close = () => setOpen(false);
1062
+ window.addEventListener("click", close);
1063
+ window.addEventListener("scroll", close, true);
1064
+ return () => {
1065
+ window.removeEventListener("click", close);
1066
+ window.removeEventListener("scroll", close, true);
1067
+ };
1068
+ }, [open]);
1069
+ const onContextMenu = (e) => {
1070
+ e.preventDefault();
1071
+ setPos({ x: e.clientX, y: e.clientY });
1072
+ setOpen(true);
1073
+ };
1074
+ return /* @__PURE__ */ jsxs("div", { className: cn(className), onContextMenu, ...rest, children: [
1075
+ children,
1076
+ /* @__PURE__ */ jsx(
1077
+ "div",
1078
+ {
1079
+ className: cn("cd-context-menu", open && "is-open"),
1080
+ style: { left: pos.x, top: pos.y },
1081
+ role: "menu",
1082
+ children: items.map(
1083
+ (item, i) => item.sep ? /* @__PURE__ */ jsx("div", { className: "cd-context-menu__sep" }, i) : /* @__PURE__ */ jsxs(
1084
+ "button",
1085
+ {
1086
+ type: "button",
1087
+ role: "menuitem",
1088
+ disabled: item.disabled,
1089
+ className: cn("cd-context-menu__item", item.danger && "cd-context-menu__item--danger"),
1090
+ onClick: (e) => {
1091
+ e.stopPropagation();
1092
+ item.onSelect?.();
1093
+ setOpen(false);
1094
+ },
1095
+ children: [
1096
+ item.label,
1097
+ item.kbd != null && /* @__PURE__ */ jsx("span", { className: "cd-context-menu__kbd", children: item.kbd })
1098
+ ]
1099
+ },
1100
+ i
1101
+ )
1102
+ )
1103
+ }
1104
+ )
1105
+ ] });
1106
+ }
1107
+ function Table({
1108
+ compact = false,
1109
+ bordered = false,
1110
+ scroll = false,
1111
+ wrapProps,
1112
+ className = "",
1113
+ children,
1114
+ ...rest
1115
+ }) {
1116
+ const table = /* @__PURE__ */ jsx(
1117
+ "table",
1118
+ {
1119
+ className: cn(
1120
+ "cd-table",
1121
+ compact && "cd-table--compact",
1122
+ bordered && "cd-table--bordered",
1123
+ className
1124
+ ),
1125
+ ...rest,
1126
+ children
1127
+ }
1128
+ );
1129
+ if (!scroll) return table;
1130
+ const { className: wrapClassName = "", ...wrapRest } = wrapProps ?? {};
1131
+ return /* @__PURE__ */ jsx("div", { className: cn("cd-table-wrap", wrapClassName), ...wrapRest, children: table });
1132
+ }
1133
+ function TableHead({ children, ...rest }) {
1134
+ return /* @__PURE__ */ jsx("thead", { ...rest, children });
1135
+ }
1136
+ function TableBody({ children, ...rest }) {
1137
+ return /* @__PURE__ */ jsx("tbody", { ...rest, children });
1138
+ }
1139
+ function TableRow({ children, ...rest }) {
1140
+ return /* @__PURE__ */ jsx("tr", { ...rest, children });
1141
+ }
1142
+ function TableHeaderCell({
1143
+ numeric = false,
1144
+ sort,
1145
+ className = "",
1146
+ children,
1147
+ ...rest
1148
+ }) {
1149
+ const dataSort = sort === true ? "" : sort || void 0;
1150
+ return /* @__PURE__ */ jsx(
1151
+ "th",
1152
+ {
1153
+ className: cn(numeric && "cd-table__num", className),
1154
+ "data-sort": dataSort,
1155
+ ...rest,
1156
+ children
1157
+ }
1158
+ );
1159
+ }
1160
+ function TableCell({
1161
+ numeric = false,
1162
+ status,
1163
+ className = "",
1164
+ children,
1165
+ ...rest
1166
+ }) {
1167
+ return /* @__PURE__ */ jsx(
1168
+ "td",
1169
+ {
1170
+ className: cn(numeric && "cd-table__num", className),
1171
+ "data-status": status,
1172
+ ...rest,
1173
+ children
1174
+ }
1175
+ );
1176
+ }
1177
+ Table.Head = TableHead;
1178
+ Table.Body = TableBody;
1179
+ Table.Row = TableRow;
1180
+ Table.HeaderCell = TableHeaderCell;
1181
+ Table.Cell = TableCell;
1182
+ function Empty({
1183
+ icon = "\u2B21",
1184
+ title = "No data",
1185
+ description,
1186
+ actions,
1187
+ className = "",
1188
+ children,
1189
+ ...rest
1190
+ }) {
1191
+ return /* @__PURE__ */ jsxs("div", { className: cn("cd-empty", className), ...rest, children: [
1192
+ icon != null && /* @__PURE__ */ jsx("div", { className: "cd-empty__icon", children: icon }),
1193
+ title != null && /* @__PURE__ */ jsx("h3", { className: "cd-empty__title", children: title }),
1194
+ description != null && /* @__PURE__ */ jsx("p", { className: "cd-empty__description", children: description }),
1195
+ children,
1196
+ actions != null && /* @__PURE__ */ jsx("div", { className: "cd-empty__actions", children: actions })
1197
+ ] });
1198
+ }
1199
+ function DataTable({
1200
+ columns,
1201
+ data,
1202
+ getRowId,
1203
+ compact,
1204
+ bordered,
1205
+ emptyTitle = "No rows",
1206
+ emptyDescription = "There is nothing to display yet.",
1207
+ className
1208
+ }) {
1209
+ if (data.length === 0) {
1210
+ return /* @__PURE__ */ jsx(Empty, { title: emptyTitle, description: emptyDescription });
1211
+ }
1212
+ return /* @__PURE__ */ jsxs(Table, { compact, bordered, scroll: true, className, children: [
1213
+ /* @__PURE__ */ jsx(Table.Head, { children: /* @__PURE__ */ jsx(Table.Row, { children: columns.map((col) => /* @__PURE__ */ jsx(Table.HeaderCell, { children: col.header }, col.key)) }) }),
1214
+ /* @__PURE__ */ jsx(Table.Body, { children: data.map((row, i) => /* @__PURE__ */ jsx(Table.Row, { children: columns.map((col) => /* @__PURE__ */ jsx(Table.Cell, { numeric: col.numeric, children: col.cell(row, i) }, col.key)) }, getRowId?.(row, i) ?? i)) })
1215
+ ] });
1216
+ }
1217
+ function formatDate(d) {
1218
+ return d.toLocaleDateString(void 0, {
1219
+ year: "numeric",
1220
+ month: "short",
1221
+ day: "numeric"
1222
+ });
1223
+ }
1224
+ function DatePicker({
1225
+ value,
1226
+ defaultValue,
1227
+ onChange,
1228
+ placeholder = "Pick a date",
1229
+ disabled = false,
1230
+ className = "",
1231
+ ...rest
1232
+ }) {
1233
+ const [open, setOpen] = useState(false);
1234
+ const [internal, setInternal] = useState(defaultValue);
1235
+ const selected = value ?? internal;
1236
+ return /* @__PURE__ */ jsxs("div", { className: cn("cd-date-picker", open && "is-open", className), ...rest, children: [
1237
+ /* @__PURE__ */ jsx(
1238
+ Input,
1239
+ {
1240
+ readOnly: true,
1241
+ disabled,
1242
+ value: selected ? formatDate(selected) : "",
1243
+ placeholder,
1244
+ onClick: () => !disabled && setOpen((o) => !o),
1245
+ "aria-expanded": open
1246
+ }
1247
+ ),
1248
+ /* @__PURE__ */ jsx("div", { className: "cd-date-picker__panel", children: /* @__PURE__ */ jsx(
1249
+ Calendar,
1250
+ {
1251
+ selected,
1252
+ onSelect: (d) => {
1253
+ if (value == null) setInternal(d);
1254
+ onChange?.(d);
1255
+ setOpen(false);
1256
+ }
1257
+ }
1258
+ ) })
1259
+ ] });
1260
+ }
1261
+ function Dialog(props) {
1262
+ return /* @__PURE__ */ jsx(Modal, { ...props });
1263
+ }
1264
+ function Sheet({
1265
+ open,
1266
+ onClose,
1267
+ side = "right",
1268
+ size = "default",
1269
+ title,
1270
+ description,
1271
+ footer,
1272
+ hideClose = false,
1273
+ className = "",
1274
+ children,
1275
+ ...rest
1276
+ }) {
1277
+ return /* @__PURE__ */ jsx(
1278
+ "div",
1279
+ {
1280
+ className: cn("cd-sheet-overlay", open && "is-open"),
1281
+ onClick: (e) => {
1282
+ if (e.target === e.currentTarget) onClose?.();
1283
+ },
1284
+ children: /* @__PURE__ */ jsxs(
1285
+ "div",
1286
+ {
1287
+ className: cn(
1288
+ "cd-sheet",
1289
+ `cd-sheet--${side}`,
1290
+ size !== "default" && `cd-sheet--${size}`,
1291
+ className
1292
+ ),
1293
+ role: "dialog",
1294
+ "aria-modal": "true",
1295
+ ...rest,
1296
+ children: [
1297
+ (title != null || description != null || !hideClose) && /* @__PURE__ */ jsxs("div", { className: "cd-sheet__header", children: [
1298
+ /* @__PURE__ */ jsxs("div", { children: [
1299
+ title != null && /* @__PURE__ */ jsx("div", { className: "cd-sheet__title", children: title }),
1300
+ description != null && /* @__PURE__ */ jsx("p", { className: "cd-sheet__description", children: description })
1301
+ ] }),
1302
+ !hideClose && /* @__PURE__ */ jsx("button", { type: "button", className: "cd-sheet__close", onClick: onClose, "aria-label": "Close", children: "\u2715" })
1303
+ ] }),
1304
+ /* @__PURE__ */ jsx("div", { className: "cd-sheet__body", children }),
1305
+ footer != null && /* @__PURE__ */ jsx("div", { className: "cd-sheet__footer", children: footer })
1306
+ ]
1307
+ }
1308
+ )
1309
+ }
1310
+ );
1311
+ }
1312
+ function Drawer({ side = "bottom", ...rest }) {
1313
+ return /* @__PURE__ */ jsx(Sheet, { side, ...rest });
1314
+ }
1315
+ function Dropdown({
1316
+ trigger,
1317
+ items,
1318
+ align = "left",
1319
+ triggerClassName = "cd-btn",
1320
+ defaultOpen = false,
1321
+ className = "",
1322
+ ...rest
1323
+ }) {
1324
+ const [open, setOpen] = useState(defaultOpen);
1325
+ return /* @__PURE__ */ jsxs("div", { className: cn("cd-dropdown", open && "is-open", className), ...rest, children: [
1326
+ /* @__PURE__ */ jsx(
1327
+ "button",
1328
+ {
1329
+ type: "button",
1330
+ className: cn(triggerClassName, "cd-dropdown__trigger"),
1331
+ "aria-expanded": open,
1332
+ onClick: () => setOpen((o) => !o),
1333
+ children: trigger
1334
+ }
1335
+ ),
1336
+ /* @__PURE__ */ jsx(
1337
+ "div",
1338
+ {
1339
+ className: cn("cd-dropdown__menu", align === "right" && "cd-dropdown__menu--right"),
1340
+ role: "menu",
1341
+ children: items.map((entry, i) => {
1342
+ if ("sep" in entry && entry.sep) {
1343
+ return /* @__PURE__ */ jsx("div", { className: "cd-dropdown__sep" }, i);
1344
+ }
1345
+ if ("heading" in entry && entry.heading) {
1346
+ return /* @__PURE__ */ jsx("div", { className: "cd-dropdown__label", children: entry.label }, i);
1347
+ }
1348
+ const item = entry;
1349
+ return /* @__PURE__ */ jsxs(
1350
+ "button",
1351
+ {
1352
+ type: "button",
1353
+ role: "menuitem",
1354
+ className: cn("cd-dropdown__item", item.danger && "cd-dropdown__item--danger"),
1355
+ disabled: item.disabled,
1356
+ "aria-disabled": item.disabled || void 0,
1357
+ onClick: () => {
1358
+ item.onSelect?.();
1359
+ setOpen(false);
1360
+ },
1361
+ children: [
1362
+ item.icon != null && /* @__PURE__ */ jsx("span", { className: "cd-dropdown__item-icon", children: item.icon }),
1363
+ item.label,
1364
+ item.kbd != null && /* @__PURE__ */ jsx("span", { className: "cd-dropdown__item-kbd", children: item.kbd })
1365
+ ]
1366
+ },
1367
+ i
1368
+ );
1369
+ })
1370
+ }
1371
+ )
1372
+ ] });
1373
+ }
1374
+ function DropdownMenu(props) {
1375
+ return /* @__PURE__ */ jsx(Dropdown, { ...props });
1376
+ }
1377
+ function FeedItem({
1378
+ badge,
1379
+ title,
1380
+ subtitle,
1381
+ time,
1382
+ selected = false,
1383
+ className = "",
1384
+ children,
1385
+ type = "button",
1386
+ ...rest
1387
+ }) {
1388
+ return /* @__PURE__ */ jsxs(
1389
+ "button",
1390
+ {
1391
+ type,
1392
+ className: cn("cd-feed-item", selected && "is-selected", className),
1393
+ "data-active": selected || void 0,
1394
+ ...rest,
1395
+ children: [
1396
+ /* @__PURE__ */ jsxs("div", { className: "cd-feed-item__meta", children: [
1397
+ badge,
1398
+ time != null && /* @__PURE__ */ jsx("span", { className: "cd-feed-item__time", children: time })
1399
+ ] }),
1400
+ /* @__PURE__ */ jsx("div", { className: "cd-feed-item__title", children: title }),
1401
+ subtitle != null && /* @__PURE__ */ jsx("div", { className: "cd-feed-item__subtitle", children: subtitle }),
1402
+ children
1403
+ ]
1404
+ }
1405
+ );
1406
+ }
1407
+ function Feed({ className = "", children, ...rest }) {
1408
+ return /* @__PURE__ */ jsx("div", { className: cn("cd-feed", className), ...rest, children });
1409
+ }
1410
+ function Field({
1411
+ inline = false,
1412
+ description,
1413
+ error,
1414
+ className = "",
1415
+ children,
1416
+ ...rest
1417
+ }) {
1418
+ return /* @__PURE__ */ jsxs(
1419
+ "div",
1420
+ {
1421
+ className: cn("cd-field", inline && "cd-field--inline", className),
1422
+ ...rest,
1423
+ children: [
1424
+ children,
1425
+ description != null && /* @__PURE__ */ jsx("p", { className: "cd-field-desc", children: description }),
1426
+ error != null && /* @__PURE__ */ jsx("p", { className: "cd-field-error", children: error })
1427
+ ]
1428
+ }
1429
+ );
1430
+ }
1431
+ function Gauge({
1432
+ value,
1433
+ display,
1434
+ label,
1435
+ size,
1436
+ variant,
1437
+ radar = false,
1438
+ className = "",
1439
+ style,
1440
+ children,
1441
+ ...rest
1442
+ }) {
1443
+ return /* @__PURE__ */ jsxs(
1444
+ "div",
1445
+ {
1446
+ className: cn(
1447
+ "cd-gauge",
1448
+ size === "small" && "cd-gauge--small",
1449
+ variant && `cd-gauge--${variant}`,
1450
+ radar && "cd-gauge--radar",
1451
+ className
1452
+ ),
1453
+ style: { ["--value"]: value, ...style },
1454
+ ...rest,
1455
+ children: [
1456
+ /* @__PURE__ */ jsx("div", { className: "cd-gauge__track" }),
1457
+ /* @__PURE__ */ jsx("div", { className: "cd-gauge__fill" }),
1458
+ /* @__PURE__ */ jsxs("div", { className: "cd-gauge__center", children: [
1459
+ /* @__PURE__ */ jsx("div", { className: "cd-gauge__value", children: display ?? value }),
1460
+ label != null && /* @__PURE__ */ jsx("div", { className: "cd-gauge__label", children: label }),
1461
+ children
1462
+ ] })
1463
+ ]
1464
+ }
1465
+ );
1466
+ }
1467
+ function GlowCard({
1468
+ color = "orange",
1469
+ active,
1470
+ className,
1471
+ onClick,
1472
+ style,
1473
+ children,
1474
+ ...rest
1475
+ }) {
1476
+ return /* @__PURE__ */ jsx(
1477
+ "div",
1478
+ {
1479
+ className: cn("cd-glow-card", `cd-glow-card--${color}`, className),
1480
+ "data-active": active ? "true" : void 0,
1481
+ onClick,
1482
+ style,
1483
+ ...rest,
1484
+ children
1485
+ }
1486
+ );
1487
+ }
1488
+ function HBar({
1489
+ label,
1490
+ value,
1491
+ display,
1492
+ color,
1493
+ className = "",
1494
+ ...rest
1495
+ }) {
1496
+ const pct = Math.max(0, Math.min(100, value));
1497
+ const fillStyle = {
1498
+ width: `${pct}%`,
1499
+ ...color ? { background: color } : null
1500
+ };
1501
+ return /* @__PURE__ */ jsxs("div", { className: cn("cd-hbar-row", className), ...rest, children: [
1502
+ /* @__PURE__ */ jsx("span", { className: "cd-hbar-row__label", children: label }),
1503
+ /* @__PURE__ */ jsx("div", { className: "cd-hbar-row__track", children: /* @__PURE__ */ jsx("div", { className: "cd-hbar-row__fill", style: fillStyle }) }),
1504
+ /* @__PURE__ */ jsx("span", { className: "cd-hbar-row__value", children: display ?? Math.round(pct) })
1505
+ ] });
1506
+ }
1507
+ function HoverCard({
1508
+ trigger,
1509
+ title,
1510
+ description,
1511
+ className = "",
1512
+ children,
1513
+ ...rest
1514
+ }) {
1515
+ return /* @__PURE__ */ jsxs("div", { className: cn("cd-hover-card", className), ...rest, children: [
1516
+ /* @__PURE__ */ jsx("span", { tabIndex: 0, children: trigger }),
1517
+ /* @__PURE__ */ jsxs("div", { className: "cd-hover-card__content", role: "tooltip", children: [
1518
+ title != null && /* @__PURE__ */ jsx("div", { className: "cd-popover__title", children: title }),
1519
+ description != null && /* @__PURE__ */ jsx("p", { className: "cd-popover__description", children: description }),
1520
+ children
1521
+ ] })
1522
+ ] });
1523
+ }
1524
+ function HudSegment({
1525
+ label,
1526
+ value,
1527
+ status,
1528
+ className = "",
1529
+ children,
1530
+ ...rest
1531
+ }) {
1532
+ return /* @__PURE__ */ jsxs("div", { className: cn("cd-hud-segment", className), ...rest, children: [
1533
+ label != null && /* @__PURE__ */ jsx("span", { className: "cd-hud-segment__label", children: label }),
1534
+ value != null && /* @__PURE__ */ jsx("span", { className: cn("cd-hud-segment__value", status && `cd-hud-segment__value--${status}`), children: value }),
1535
+ children
1536
+ ] });
1537
+ }
1538
+ function HudBar({
1539
+ segments,
1540
+ position,
1541
+ compact = false,
1542
+ className = "",
1543
+ children,
1544
+ ...rest
1545
+ }) {
1546
+ return /* @__PURE__ */ jsxs(
1547
+ "div",
1548
+ {
1549
+ className: cn(
1550
+ "cd-hud-bar",
1551
+ position && `cd-hud-bar--${position}`,
1552
+ compact && "cd-hud-bar--compact",
1553
+ className
1554
+ ),
1555
+ ...rest,
1556
+ children: [
1557
+ segments?.map((seg, i) => /* @__PURE__ */ jsx(HudSegment, { label: seg.label, value: seg.value, status: seg.status }, i)),
1558
+ children
1559
+ ]
1560
+ }
1561
+ );
1562
+ }
1563
+ function HudFrame({
1564
+ label,
1565
+ value,
1566
+ status,
1567
+ compact = false,
1568
+ floating = false,
1569
+ className = "",
1570
+ children,
1571
+ ...rest
1572
+ }) {
1573
+ return /* @__PURE__ */ jsxs(
1574
+ "div",
1575
+ {
1576
+ className: cn(
1577
+ "cd-hud-frame",
1578
+ compact && "cd-hud--compact",
1579
+ floating && "cd-hud--floating",
1580
+ className
1581
+ ),
1582
+ ...rest,
1583
+ children: [
1584
+ label != null && /* @__PURE__ */ jsx("div", { className: "cd-hud__label", children: label }),
1585
+ value != null && /* @__PURE__ */ jsx("div", { className: cn("cd-hud__value", status && `cd-hud__value--${status}`), children: value }),
1586
+ children
1587
+ ]
1588
+ }
1589
+ );
1590
+ }
1591
+ function InputGroup({ className = "", children, ...rest }) {
1592
+ return /* @__PURE__ */ jsx("div", { className: cn("cd-input-group", className), ...rest, children });
1593
+ }
1594
+ function InputGroupAddon({ className = "", children, ...rest }) {
1595
+ return /* @__PURE__ */ jsx("span", { className: cn("cd-input-addon", className), ...rest, children });
1596
+ }
1597
+ Object.assign(InputGroup, { Addon: InputGroupAddon });
1598
+ function InputOTP({
1599
+ length = 6,
1600
+ value = "",
1601
+ onChange,
1602
+ disabled = false,
1603
+ size = "md",
1604
+ separatorAfter,
1605
+ className = "",
1606
+ ...rest
1607
+ }) {
1608
+ const refs = useRef([]);
1609
+ const digits = value.padEnd(length, " ").slice(0, length).split("");
1610
+ const setAt = (index, char) => {
1611
+ const next = digits.map((d, i) => i === index ? char : d === " " ? "" : d);
1612
+ const joined = next.join("").replace(/\s/g, "").slice(0, length);
1613
+ onChange?.(joined);
1614
+ };
1615
+ return /* @__PURE__ */ jsx("div", { className: cn("cd-input-otp", size === "sm" && "cd-input-otp--sm", className), ...rest, children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsxs("span", { style: { display: "contents" }, children: [
1616
+ separatorAfter != null && i === separatorAfter && /* @__PURE__ */ jsx("span", { className: "cd-input-otp__sep", "aria-hidden": true, children: "-" }),
1617
+ /* @__PURE__ */ jsx(
1618
+ "input",
1619
+ {
1620
+ ref: (el) => {
1621
+ refs.current[i] = el;
1622
+ },
1623
+ className: cn("cd-input-otp__slot", digits[i] && digits[i] !== " " && "is-filled"),
1624
+ inputMode: "numeric",
1625
+ autoComplete: "one-time-code",
1626
+ maxLength: 1,
1627
+ disabled,
1628
+ value: digits[i] === " " ? "" : digits[i],
1629
+ "aria-label": `Digit ${i + 1}`,
1630
+ onChange: (e) => {
1631
+ const v = e.target.value.replace(/\D/g, "").slice(-1);
1632
+ setAt(i, v);
1633
+ if (v && i < length - 1) refs.current[i + 1]?.focus();
1634
+ },
1635
+ onKeyDown: (e) => {
1636
+ if (e.key === "Backspace" && !digits[i]?.trim() && i > 0) {
1637
+ refs.current[i - 1]?.focus();
1638
+ }
1639
+ },
1640
+ onPaste: (e) => {
1641
+ e.preventDefault();
1642
+ const paste = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
1643
+ if (paste) onChange?.(paste);
1644
+ }
1645
+ }
1646
+ )
1647
+ ] }, i)) });
1648
+ }
1649
+ function Interference({
1650
+ intensity,
1651
+ intense = false,
1652
+ glitch = false,
1653
+ corruptText,
1654
+ className = "",
1655
+ children,
1656
+ ...rest
1657
+ }) {
1658
+ return /* @__PURE__ */ jsxs(
1659
+ "div",
1660
+ {
1661
+ className: cn(
1662
+ "cd-interference",
1663
+ intensity && `cd-interference--${intensity}`,
1664
+ intense && "cd-interference--intense",
1665
+ glitch && "cd-interference--glitch",
1666
+ className
1667
+ ),
1668
+ ...rest,
1669
+ children: [
1670
+ /* @__PURE__ */ jsx("div", { className: "cd-interference__noise" }),
1671
+ glitch ? /* @__PURE__ */ jsx("div", { className: "cd-interference__content", "data-text": corruptText, children }) : children
1672
+ ]
1673
+ }
1674
+ );
1675
+ }
1676
+ function Item({
1677
+ media,
1678
+ title,
1679
+ description,
1680
+ actions,
1681
+ bordered = false,
1682
+ interactive = false,
1683
+ className = "",
1684
+ children,
1685
+ ...rest
1686
+ }) {
1687
+ return /* @__PURE__ */ jsxs(
1688
+ "div",
1689
+ {
1690
+ className: cn(
1691
+ "cd-item",
1692
+ bordered && "cd-item--bordered",
1693
+ interactive && "cd-item--interactive",
1694
+ className
1695
+ ),
1696
+ ...rest,
1697
+ children: [
1698
+ media != null && /* @__PURE__ */ jsx("div", { className: "cd-item__media", children: media }),
1699
+ /* @__PURE__ */ jsxs("div", { className: "cd-item__content", children: [
1700
+ title != null && /* @__PURE__ */ jsx("div", { className: "cd-item__title", children: title }),
1701
+ description != null && /* @__PURE__ */ jsx("div", { className: "cd-item__description", children: description }),
1702
+ children
1703
+ ] }),
1704
+ actions != null && /* @__PURE__ */ jsx("div", { className: "cd-item__actions", children: actions })
1705
+ ]
1706
+ }
1707
+ );
1708
+ }
1709
+ function ItemGroup({ className = "", children, ...rest }) {
1710
+ return /* @__PURE__ */ jsx("div", { className: cn("cd-item-group", className), ...rest, children });
1711
+ }
1712
+ function Kbd({
1713
+ size = "md",
1714
+ accent = false,
1715
+ className = "",
1716
+ children,
1717
+ ...rest
1718
+ }) {
1719
+ return /* @__PURE__ */ jsx(
1720
+ "kbd",
1721
+ {
1722
+ className: cn(
1723
+ "cd-kbd",
1724
+ size === "lg" && "cd-kbd--lg",
1725
+ accent && "cd-kbd--accent",
1726
+ className
1727
+ ),
1728
+ ...rest,
1729
+ children
1730
+ }
1731
+ );
1732
+ }
1733
+ function KbdGroup({
1734
+ separator = "+",
1735
+ className = "",
1736
+ children,
1737
+ ...rest
1738
+ }) {
1739
+ const keys = Array.isArray(children) ? children : [children];
1740
+ return /* @__PURE__ */ jsx("span", { className: cn("cd-kbd-group", className), ...rest, children: keys.map((key, i) => /* @__PURE__ */ jsxs("span", { style: { display: "contents" }, children: [
1741
+ i > 0 && /* @__PURE__ */ jsx("span", { className: "cd-kbd-group__sep", children: separator }),
1742
+ key
1743
+ ] }, i)) });
1744
+ }
1745
+ function Label({
1746
+ required = false,
1747
+ className = "",
1748
+ children,
1749
+ ...rest
1750
+ }) {
1751
+ return /* @__PURE__ */ jsx(
1752
+ "label",
1753
+ {
1754
+ className: cn(
1755
+ "cd-form-label",
1756
+ required && "cd-form-label--required",
1757
+ className
1758
+ ),
1759
+ ...rest,
1760
+ children
1761
+ }
1762
+ );
1763
+ }
1764
+ function Menubar({ menus, className = "", ...rest }) {
1765
+ const [open, setOpen] = useState(null);
1766
+ return /* @__PURE__ */ jsx("div", { className: cn("cd-menubar", className), role: "menubar", ...rest, children: menus.map((menu, i) => /* @__PURE__ */ jsxs(
1767
+ "div",
1768
+ {
1769
+ className: cn("cd-menubar__item", open === i && "is-open"),
1770
+ onMouseLeave: () => setOpen(null),
1771
+ children: [
1772
+ /* @__PURE__ */ jsx(
1773
+ "button",
1774
+ {
1775
+ type: "button",
1776
+ className: "cd-menubar__trigger",
1777
+ onClick: () => setOpen(open === i ? null : i),
1778
+ onMouseEnter: () => open != null && setOpen(i),
1779
+ children: menu.label
1780
+ }
1781
+ ),
1782
+ /* @__PURE__ */ jsx("div", { className: "cd-menubar__menu", role: "menu", children: menu.items.map((item, j) => /* @__PURE__ */ jsx(
1783
+ "button",
1784
+ {
1785
+ type: "button",
1786
+ role: "menuitem",
1787
+ disabled: item.disabled,
1788
+ className: "cd-menubar__action",
1789
+ onClick: () => {
1790
+ item.onSelect?.();
1791
+ setOpen(null);
1792
+ },
1793
+ children: item.label
1794
+ },
1795
+ j
1796
+ )) })
1797
+ ]
1798
+ },
1799
+ i
1800
+ )) });
1801
+ }
1802
+ function Select({
1803
+ size = "md",
1804
+ label = false,
1805
+ error = false,
1806
+ className = "",
1807
+ children,
1808
+ ...rest
1809
+ }) {
1810
+ return /* @__PURE__ */ jsx("div", { className: "cd-select-wrap", children: /* @__PURE__ */ jsx(
1811
+ "select",
1812
+ {
1813
+ className: cn(
1814
+ "cd-select",
1815
+ size === "sm" && "cd-select--sm",
1816
+ label && "cd-select--label",
1817
+ error && "cd-select--error",
1818
+ className
1819
+ ),
1820
+ ...rest,
1821
+ children
1822
+ }
1823
+ ) });
1824
+ }
1825
+ function NativeSelect(props) {
1826
+ return /* @__PURE__ */ jsx(Select, { ...props });
1827
+ }
1828
+ function NavigationMenu({ items, className = "", ...rest }) {
1829
+ return /* @__PURE__ */ jsx("nav", { className: cn("cd-nav-menu", className), ...rest, children: items.map((item, i) => {
1830
+ const cls = cn("cd-nav-menu__link", item.active && "is-active");
1831
+ if (item.href) {
1832
+ return /* @__PURE__ */ jsx("a", { href: item.href, className: cls, onClick: item.onClick, children: item.label }, i);
1833
+ }
1834
+ return /* @__PURE__ */ jsx("button", { type: "button", className: cls, onClick: item.onClick, children: item.label }, i);
1835
+ }) });
1836
+ }
1837
+ function buildPages(page, pageCount, siblingCount) {
1838
+ const total = pageCount;
1839
+ const left = Math.max(2, page - siblingCount);
1840
+ const right = Math.min(total - 1, page + siblingCount);
1841
+ const pages = [1];
1842
+ if (left > 2) pages.push("\u2026");
1843
+ for (let p = left; p <= right; p++) pages.push(p);
1844
+ if (right < total - 1) pages.push("\u2026");
1845
+ if (total > 1) pages.push(total);
1846
+ return pages;
1847
+ }
1848
+ function Pagination({
1849
+ page,
1850
+ pageCount,
1851
+ onPageChange,
1852
+ siblingCount = 1,
1853
+ size = "default",
1854
+ compact = false,
1855
+ showInfo = false,
1856
+ prevLabel = "\u2039 Prev",
1857
+ nextLabel = "Next \u203A",
1858
+ className = "",
1859
+ ...rest
1860
+ }) {
1861
+ const go = (p) => {
1862
+ if (p < 1 || p > pageCount || p === page) return;
1863
+ onPageChange?.(p);
1864
+ };
1865
+ return /* @__PURE__ */ jsxs(
1866
+ "nav",
1867
+ {
1868
+ className: cn(
1869
+ "cd-pagination",
1870
+ size !== "default" && `cd-pagination--${size}`,
1871
+ compact && "cd-pagination--compact",
1872
+ className
1873
+ ),
1874
+ "aria-label": "Pagination",
1875
+ ...rest,
1876
+ children: [
1877
+ /* @__PURE__ */ jsx(
1878
+ "button",
1879
+ {
1880
+ type: "button",
1881
+ className: "cd-pagination__prev cd-pagination__item",
1882
+ disabled: page <= 1,
1883
+ "aria-disabled": page <= 1 || void 0,
1884
+ onClick: () => go(page - 1),
1885
+ children: prevLabel
1886
+ }
1887
+ ),
1888
+ buildPages(page, pageCount, siblingCount).map(
1889
+ (p, i) => p === "\u2026" ? /* @__PURE__ */ jsx("span", { className: "cd-pagination__ellipsis", children: "\xB7\xB7\xB7" }, `e${i}`) : /* @__PURE__ */ jsx(
1890
+ "button",
1891
+ {
1892
+ type: "button",
1893
+ className: cn("cd-pagination__item", p === page && "is-active"),
1894
+ "aria-current": p === page ? "page" : void 0,
1895
+ onClick: () => go(p),
1896
+ children: p
1897
+ },
1898
+ p
1899
+ )
1900
+ ),
1901
+ /* @__PURE__ */ jsx(
1902
+ "button",
1903
+ {
1904
+ type: "button",
1905
+ className: "cd-pagination__next cd-pagination__item",
1906
+ disabled: page >= pageCount,
1907
+ "aria-disabled": page >= pageCount || void 0,
1908
+ onClick: () => go(page + 1),
1909
+ children: nextLabel
1910
+ }
1911
+ ),
1912
+ showInfo && /* @__PURE__ */ jsxs("span", { className: "cd-pagination__info", children: [
1913
+ "Page ",
1914
+ page,
1915
+ " of ",
1916
+ pageCount
1917
+ ] })
1918
+ ]
1919
+ }
1920
+ );
1921
+ }
1922
+ function Popover({
1923
+ trigger,
1924
+ defaultOpen = false,
1925
+ open,
1926
+ onOpenChange,
1927
+ side = "bottom",
1928
+ title,
1929
+ description,
1930
+ className = "",
1931
+ children,
1932
+ ...rest
1933
+ }) {
1934
+ const [internal, setInternal] = useState(defaultOpen);
1935
+ const isOpen = open ?? internal;
1936
+ const setOpen = (next) => {
1937
+ if (open == null) setInternal(next);
1938
+ onOpenChange?.(next);
1939
+ };
1940
+ const sideClass = side === "top" ? "cd-popover__content--top" : side === "right" ? "cd-popover__content--right" : side === "bottom-end" ? "cd-popover__content--bottom-end" : "cd-popover__content--bottom";
1941
+ return /* @__PURE__ */ jsxs("div", { className: cn("cd-popover", isOpen && "is-open", className), ...rest, children: [
1942
+ /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setOpen(!isOpen), "aria-expanded": isOpen, children: trigger }),
1943
+ /* @__PURE__ */ jsxs("div", { className: cn("cd-popover__content", sideClass), role: "dialog", children: [
1944
+ title != null && /* @__PURE__ */ jsx("div", { className: "cd-popover__title", children: title }),
1945
+ description != null && /* @__PURE__ */ jsx("p", { className: "cd-popover__description", children: description }),
1946
+ children
1947
+ ] })
1948
+ ] });
1949
+ }
1950
+ function Progress({
1951
+ value = 0,
1952
+ variant = "default",
1953
+ thick = false,
1954
+ indeterminate = false,
1955
+ className = "",
1956
+ ...rest
1957
+ }) {
1958
+ return /* @__PURE__ */ jsx(
1959
+ "div",
1960
+ {
1961
+ className: cn(
1962
+ "cd-progress",
1963
+ variant !== "default" && `cd-progress--${variant}`,
1964
+ thick && "cd-progress--thick",
1965
+ indeterminate && "cd-progress--indeterminate",
1966
+ className
1967
+ ),
1968
+ role: "progressbar",
1969
+ "aria-valuenow": indeterminate ? void 0 : value,
1970
+ "aria-valuemin": 0,
1971
+ "aria-valuemax": 100,
1972
+ ...rest,
1973
+ children: /* @__PURE__ */ jsx(
1974
+ "div",
1975
+ {
1976
+ className: "cd-progress__bar",
1977
+ style: indeterminate ? void 0 : { width: `${value}%` }
1978
+ }
1979
+ )
1980
+ }
1981
+ );
1982
+ }
1983
+ function Radio({ label, description, className = "", ...rest }) {
1984
+ const input = /* @__PURE__ */ jsx("input", { type: "radio", className: cn("cd-radio", !label && className), ...rest });
1985
+ if (label == null && description == null) return input;
1986
+ return /* @__PURE__ */ jsxs("label", { className: cn("cd-control", className), children: [
1987
+ /* @__PURE__ */ jsx("input", { type: "radio", className: "cd-radio", ...rest }),
1988
+ /* @__PURE__ */ jsxs("span", { className: "cd-control__label", children: [
1989
+ label,
1990
+ description != null && /* @__PURE__ */ jsx("span", { className: "cd-control__desc", children: description })
1991
+ ] })
1992
+ ] });
1993
+ }
1994
+ function RadioGroup({
1995
+ name,
1996
+ items,
1997
+ value,
1998
+ defaultValue,
1999
+ onValueChange,
2000
+ orientation = "vertical",
2001
+ className = "",
2002
+ ...rest
2003
+ }) {
2004
+ return /* @__PURE__ */ jsx(
2005
+ "div",
2006
+ {
2007
+ className: cn(className),
2008
+ role: "radiogroup",
2009
+ style: {
2010
+ display: "flex",
2011
+ flexDirection: orientation === "horizontal" ? "row" : "column",
2012
+ gap: orientation === "horizontal" ? 16 : 8
2013
+ },
2014
+ ...rest,
2015
+ children: items.map((item) => /* @__PURE__ */ jsx(
2016
+ Radio,
2017
+ {
2018
+ name,
2019
+ value: item.value,
2020
+ label: item.label,
2021
+ description: item.description,
2022
+ disabled: item.disabled,
2023
+ defaultChecked: defaultValue === item.value,
2024
+ checked: value != null ? value === item.value : void 0,
2025
+ onChange: () => onValueChange?.(item.value)
2026
+ },
2027
+ item.value
2028
+ ))
2029
+ }
2030
+ );
2031
+ }
2032
+ function Resizable({
2033
+ first,
2034
+ second,
2035
+ orientation = "horizontal",
2036
+ defaultSize = 50,
2037
+ minSize = 15,
2038
+ maxSize = 85,
2039
+ className = "",
2040
+ ...rest
2041
+ }) {
2042
+ const [size, setSize] = useState(defaultSize);
2043
+ const rootRef = useRef(null);
2044
+ const dragging = useRef(false);
2045
+ const onMove = useCallback(
2046
+ (clientX, clientY) => {
2047
+ const el = rootRef.current;
2048
+ if (!el || !dragging.current) return;
2049
+ const rect = el.getBoundingClientRect();
2050
+ const pct = orientation === "horizontal" ? (clientX - rect.left) / rect.width * 100 : (clientY - rect.top) / rect.height * 100;
2051
+ setSize(Math.min(maxSize, Math.max(minSize, pct)));
2052
+ },
2053
+ [orientation, minSize, maxSize]
2054
+ );
2055
+ const onMouseDown = (e) => {
2056
+ e.preventDefault();
2057
+ dragging.current = true;
2058
+ const move = (ev) => onMove(ev.clientX, ev.clientY);
2059
+ const up = () => {
2060
+ dragging.current = false;
2061
+ window.removeEventListener("mousemove", move);
2062
+ window.removeEventListener("mouseup", up);
2063
+ };
2064
+ window.addEventListener("mousemove", move);
2065
+ window.addEventListener("mouseup", up);
2066
+ };
2067
+ const firstStyle = orientation === "horizontal" ? { width: `${size}%`, flex: "none" } : { height: `${size}%`, flex: "none" };
2068
+ return /* @__PURE__ */ jsxs(
2069
+ "div",
2070
+ {
2071
+ ref: rootRef,
2072
+ className: cn(
2073
+ "cd-resizable",
2074
+ orientation === "vertical" && "cd-resizable--vertical",
2075
+ className
2076
+ ),
2077
+ ...rest,
2078
+ children: [
2079
+ /* @__PURE__ */ jsx("div", { className: "cd-resizable__panel", style: firstStyle, children: first }),
2080
+ /* @__PURE__ */ jsx(
2081
+ "div",
2082
+ {
2083
+ className: "cd-resizable__handle",
2084
+ role: "separator",
2085
+ "aria-orientation": orientation,
2086
+ onMouseDown
2087
+ }
2088
+ ),
2089
+ /* @__PURE__ */ jsx("div", { className: "cd-resizable__panel", style: { flex: 1 }, children: second })
2090
+ ]
2091
+ }
2092
+ );
2093
+ }
2094
+ function Scanner({
2095
+ vertical = false,
2096
+ ping = false,
2097
+ className = "",
2098
+ children,
2099
+ ...rest
2100
+ }) {
2101
+ return /* @__PURE__ */ jsxs(
2102
+ "div",
2103
+ {
2104
+ className: cn(
2105
+ "cd-scanner",
2106
+ vertical && "cd-scanner--vertical",
2107
+ ping && "cd-scanner--ping",
2108
+ className
2109
+ ),
2110
+ ...rest,
2111
+ children: [
2112
+ /* @__PURE__ */ jsx("div", { className: "cd-scanner__line" }),
2113
+ children
2114
+ ]
2115
+ }
2116
+ );
2117
+ }
2118
+ function ScrollArea({
2119
+ thin = true,
2120
+ className = "",
2121
+ children,
2122
+ ...rest
2123
+ }) {
2124
+ return /* @__PURE__ */ jsx("div", { className: cn("cd-scroll-area", thin && "cd-scroll-area--thin", className), ...rest, children });
2125
+ }
2126
+ function SectionHeader({
2127
+ title,
2128
+ caret = "\u25B8",
2129
+ actions,
2130
+ className = "",
2131
+ children,
2132
+ ...rest
2133
+ }) {
2134
+ return /* @__PURE__ */ jsxs("div", { className: cn("cd-section-header", className), ...rest, children: [
2135
+ caret != null && /* @__PURE__ */ jsx("span", { className: "cd-section-header__caret", children: caret }),
2136
+ /* @__PURE__ */ jsx("h2", { className: "cd-section-header__title", children: title }),
2137
+ children,
2138
+ actions != null && /* @__PURE__ */ jsx("div", { className: "cd-section-header__actions", children: actions })
2139
+ ] });
2140
+ }
2141
+ function Separator({
2142
+ orientation = "horizontal",
2143
+ neon = false,
2144
+ className = "",
2145
+ children,
2146
+ ...rest
2147
+ }) {
2148
+ const hasLabel = children != null;
2149
+ return /* @__PURE__ */ jsx(
2150
+ "div",
2151
+ {
2152
+ className: cn(
2153
+ "cd-separator",
2154
+ orientation === "vertical" && "cd-separator--vertical",
2155
+ neon && "cd-separator--neon",
2156
+ hasLabel && "cd-separator--label",
2157
+ !hasLabel && orientation === "horizontal" && "cd-separator--plain",
2158
+ className
2159
+ ),
2160
+ role: "separator",
2161
+ ...rest,
2162
+ children
2163
+ }
2164
+ );
2165
+ }
2166
+ function Sidebar({
2167
+ title = "Nav",
2168
+ links,
2169
+ children,
2170
+ defaultCollapsed = false,
2171
+ collapsed,
2172
+ onCollapsedChange,
2173
+ className = "",
2174
+ ...rest
2175
+ }) {
2176
+ const [internal, setInternal] = useState(defaultCollapsed);
2177
+ const isCollapsed = collapsed ?? internal;
2178
+ const toggle = () => {
2179
+ const next = !isCollapsed;
2180
+ if (collapsed == null) setInternal(next);
2181
+ onCollapsedChange?.(next);
2182
+ };
2183
+ return /* @__PURE__ */ jsxs("div", { className: cn("cd-sidebar-layout", className), ...rest, children: [
2184
+ /* @__PURE__ */ jsxs("aside", { className: cn("cd-sidebar", isCollapsed && "cd-sidebar--collapsed"), children: [
2185
+ /* @__PURE__ */ jsxs("div", { className: "cd-sidebar__header", children: [
2186
+ /* @__PURE__ */ jsx("span", { className: "cd-sidebar__title", children: title }),
2187
+ /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", icon: true, onClick: toggle, "aria-label": "Toggle sidebar", children: isCollapsed ? "\u203A" : "\u2039" })
2188
+ ] }),
2189
+ /* @__PURE__ */ jsx("nav", { className: "cd-sidebar__nav", children: links.map((link, i) => {
2190
+ const cls = cn("cd-sidebar__link", link.active && "is-active");
2191
+ const body = /* @__PURE__ */ jsxs(Fragment, { children: [
2192
+ link.icon != null && /* @__PURE__ */ jsx("span", { className: "cd-sidebar__link-icon", children: link.icon }),
2193
+ /* @__PURE__ */ jsx("span", { className: "cd-sidebar__link-label", children: link.label })
2194
+ ] });
2195
+ if (link.href) {
2196
+ return /* @__PURE__ */ jsx("a", { href: link.href, className: cls, onClick: link.onClick, children: body }, i);
2197
+ }
2198
+ return /* @__PURE__ */ jsx("button", { type: "button", className: cls, onClick: link.onClick, children: body }, i);
2199
+ }) })
2200
+ ] }),
2201
+ /* @__PURE__ */ jsx("main", { className: "cd-sidebar__main", children })
2202
+ ] });
2203
+ }
2204
+ function Skeleton({
2205
+ shape = "plain",
2206
+ width,
2207
+ className = "",
2208
+ children,
2209
+ ...rest
2210
+ }) {
2211
+ if (shape === "card" || shape === "block") {
2212
+ return /* @__PURE__ */ jsx("div", { className: cn(`cd-skeleton-${shape}`, className), ...rest, children });
2213
+ }
2214
+ return /* @__PURE__ */ jsx(
2215
+ "div",
2216
+ {
2217
+ className: cn(
2218
+ "cd-skeleton",
2219
+ shape !== "plain" && `cd-skeleton--${shape}`,
2220
+ width && `cd-skeleton--w-${width}`,
2221
+ className
2222
+ ),
2223
+ ...rest,
2224
+ children
2225
+ }
2226
+ );
2227
+ }
2228
+ function SkeletonRow({ className = "", children, ...rest }) {
2229
+ return /* @__PURE__ */ jsx("div", { className: cn("cd-skeleton-block__row", className), ...rest, children });
2230
+ }
2231
+ function Slider({ valueLabel, className = "", ...rest }) {
2232
+ const input = /* @__PURE__ */ jsx("input", { type: "range", className: cn("cd-slider", !valueLabel && className), ...rest });
2233
+ if (valueLabel == null) return input;
2234
+ return /* @__PURE__ */ jsxs("div", { className: cn("cd-slider-wrap", className), children: [
2235
+ /* @__PURE__ */ jsx("input", { type: "range", className: "cd-slider", ...rest }),
2236
+ /* @__PURE__ */ jsx("span", { className: "cd-slider-value", children: valueLabel })
2237
+ ] });
2238
+ }
2239
+ function colToLetter(index) {
2240
+ let n = index;
2241
+ let s = "";
2242
+ do {
2243
+ s = String.fromCharCode(65 + n % 26) + s;
2244
+ n = Math.floor(n / 26) - 1;
2245
+ } while (n >= 0);
2246
+ return s;
2247
+ }
2248
+ function parseCellRef(ref) {
2249
+ const m = ref.trim().toUpperCase().match(/^([A-Z]+)(\d+)$/);
2250
+ if (!m) return null;
2251
+ const letters = m[1];
2252
+ const row = parseInt(m[2], 10) - 1;
2253
+ let col = 0;
2254
+ for (let i = 0; i < letters.length; i++) {
2255
+ col = col * 26 + (letters.charCodeAt(i) - 64);
2256
+ }
2257
+ col -= 1;
2258
+ if (row < 0 || col < 0) return null;
2259
+ return { row, col };
2260
+ }
2261
+ function cellAddress(row, col) {
2262
+ return `${colToLetter(col)}${row + 1}`;
2263
+ }
2264
+ function createMatrix(rows, cols, fill = "") {
2265
+ return Array.from({ length: rows }, () => Array.from({ length: cols }, () => fill));
2266
+ }
2267
+ function cloneMatrix(data) {
2268
+ return data.map((row) => [...row]);
2269
+ }
2270
+ function ensureSize(data, rows, cols) {
2271
+ const next = data.map((row) => {
2272
+ const r = [...row];
2273
+ while (r.length < cols) r.push("");
2274
+ return r.slice(0, cols);
2275
+ });
2276
+ while (next.length < rows) next.push(Array.from({ length: cols }, () => ""));
2277
+ return next.slice(0, rows);
2278
+ }
2279
+ function isNumericDisplay(value) {
2280
+ if (value === "" || value.startsWith("=")) return false;
2281
+ return !Number.isNaN(Number(value)) && value.trim() !== "";
2282
+ }
2283
+ function evaluateFormula(raw, data, stack = /* @__PURE__ */ new Set()) {
2284
+ const expr = raw.slice(1).trim();
2285
+ if (!expr) return "";
2286
+ const getCell = (row, col) => {
2287
+ if (row < 0 || col < 0 || row >= data.length || col >= (data[0]?.length ?? 0)) return 0;
2288
+ const v = data[row][col] ?? "";
2289
+ if (v.startsWith("=")) {
2290
+ const addr = cellAddress(row, col);
2291
+ if (stack.has(addr)) return "#CYCLE!";
2292
+ const next = new Set(stack);
2293
+ next.add(addr);
2294
+ const out = evaluateFormula(v, data, next);
2295
+ if (out.startsWith("#")) return out;
2296
+ const n2 = Number(out);
2297
+ return Number.isNaN(n2) ? out : n2;
2298
+ }
2299
+ if (v === "") return 0;
2300
+ const n = Number(v);
2301
+ return Number.isNaN(n) ? v : n;
2302
+ };
2303
+ const rangeValues = (a, b) => {
2304
+ const start = parseCellRef(a);
2305
+ const end = parseCellRef(b);
2306
+ if (!start || !end) return [];
2307
+ const r0 = Math.min(start.row, end.row);
2308
+ const r1 = Math.max(start.row, end.row);
2309
+ const c0 = Math.min(start.col, end.col);
2310
+ const c1 = Math.max(start.col, end.col);
2311
+ const vals = [];
2312
+ for (let r = r0; r <= r1; r++) {
2313
+ for (let c = c0; c <= c1; c++) {
2314
+ const v = getCell(r, c);
2315
+ if (typeof v === "number") vals.push(v);
2316
+ else if (typeof v === "string" && !v.startsWith("#")) {
2317
+ const n = Number(v);
2318
+ if (!Number.isNaN(n)) vals.push(n);
2319
+ }
2320
+ }
2321
+ }
2322
+ return vals;
2323
+ };
2324
+ const fnMatch = expr.match(/^(SUM|AVG|AVERAGE|MIN|MAX|COUNT)\(([^)]+)\)$/i);
2325
+ if (fnMatch) {
2326
+ const fn = fnMatch[1].toUpperCase();
2327
+ const arg = fnMatch[2].trim();
2328
+ let vals = [];
2329
+ if (arg.includes(":")) {
2330
+ const [a, b] = arg.split(":");
2331
+ vals = rangeValues(a, b);
2332
+ } else {
2333
+ const parts = arg.split(",").map((p) => p.trim());
2334
+ for (const p of parts) {
2335
+ const ref = parseCellRef(p);
2336
+ if (ref) {
2337
+ const v = getCell(ref.row, ref.col);
2338
+ if (typeof v === "number") vals.push(v);
2339
+ } else {
2340
+ const n = Number(p);
2341
+ if (!Number.isNaN(n)) vals.push(n);
2342
+ }
2343
+ }
2344
+ }
2345
+ if (fn === "COUNT") return String(vals.length);
2346
+ if (vals.length === 0) return "0";
2347
+ if (fn === "SUM") return String(vals.reduce((a, b) => a + b, 0));
2348
+ if (fn === "AVG" || fn === "AVERAGE")
2349
+ return String(vals.reduce((a, b) => a + b, 0) / vals.length);
2350
+ if (fn === "MIN") return String(Math.min(...vals));
2351
+ if (fn === "MAX") return String(Math.max(...vals));
2352
+ }
2353
+ try {
2354
+ let replaced = expr.replace(/[A-Z]+\d+/gi, (ref) => {
2355
+ const coord = parseCellRef(ref);
2356
+ if (!coord) return "0";
2357
+ const v = getCell(coord.row, coord.col);
2358
+ if (typeof v === "string" && v.startsWith("#")) throw new Error(v);
2359
+ if (typeof v === "number") return String(v);
2360
+ const n = Number(v);
2361
+ if (Number.isNaN(n)) throw new Error("#VALUE!");
2362
+ return String(n);
2363
+ });
2364
+ if (!/^[\d+\-*/().\s]+$/.test(replaced)) return "#NAME?";
2365
+ const result = Function(`"use strict"; return (${replaced});`)();
2366
+ if (typeof result !== "number" || !Number.isFinite(result)) return "#NUM!";
2367
+ return String(Math.round(result * 1e10) / 1e10);
2368
+ } catch (e) {
2369
+ if (e instanceof Error && e.message.startsWith("#")) return e.message;
2370
+ return "#ERROR!";
2371
+ }
2372
+ }
2373
+ function displayValue(raw, data, formulas) {
2374
+ if (!formulas || !raw.startsWith("=")) return raw;
2375
+ return evaluateFormula(raw, data);
2376
+ }
2377
+ function inRange(cell, a, b) {
2378
+ const r0 = Math.min(a.row, b.row);
2379
+ const r1 = Math.max(a.row, b.row);
2380
+ const c0 = Math.min(a.col, b.col);
2381
+ const c1 = Math.max(a.col, b.col);
2382
+ return cell.row >= r0 && cell.row <= r1 && cell.col >= c0 && cell.col <= c1;
2383
+ }
2384
+ function Spreadsheet({
2385
+ data: controlledData,
2386
+ defaultData,
2387
+ onChange,
2388
+ onCellChange,
2389
+ rows: rowsProp,
2390
+ cols: colsProp,
2391
+ columnWidth = 96,
2392
+ maxHeight = 420,
2393
+ compact = false,
2394
+ readOnly = false,
2395
+ formulas = true,
2396
+ showFormulaBar = true,
2397
+ showStatus = true,
2398
+ columnLabels,
2399
+ rowLabels,
2400
+ className = "",
2401
+ style,
2402
+ ...rest
2403
+ }) {
2404
+ const rows = rowsProp ?? controlledData?.length ?? defaultData?.length ?? 12;
2405
+ const cols = colsProp ?? controlledData?.[0]?.length ?? defaultData?.[0]?.length ?? 8;
2406
+ const [internal, setInternal] = useState(
2407
+ () => ensureSize(defaultData ?? createMatrix(rows, cols), rows, cols)
2408
+ );
2409
+ const matrix = useMemo(() => {
2410
+ const source = controlledData ?? internal;
2411
+ return ensureSize(source, rows, cols);
2412
+ }, [controlledData, internal, rows, cols]);
2413
+ const [active, setActive] = useState({ row: 0, col: 0 });
2414
+ const [anchor, setAnchor] = useState({ row: 0, col: 0 });
2415
+ const [editing, setEditing] = useState(false);
2416
+ const [draft, setDraft] = useState("");
2417
+ const [editOrigin, setEditOrigin] = useState("edit");
2418
+ const rootRef = useRef(null);
2419
+ const cellInputRef = useRef(null);
2420
+ const fxInputRef = useRef(null);
2421
+ const setMatrix = useCallback(
2422
+ (next, cell) => {
2423
+ if (controlledData == null) setInternal(next);
2424
+ onChange?.(next);
2425
+ if (cell) onCellChange?.(cell.row, cell.col, cell.value, next);
2426
+ },
2427
+ [controlledData, onChange, onCellChange]
2428
+ );
2429
+ const commit = useCallback(
2430
+ (row, col, value) => {
2431
+ const next = cloneMatrix(matrix);
2432
+ next[row][col] = value;
2433
+ setMatrix(next, { row, col, value });
2434
+ },
2435
+ [matrix, setMatrix]
2436
+ );
2437
+ const beginEdit = useCallback(
2438
+ (mode, seed) => {
2439
+ if (readOnly) return;
2440
+ const raw = matrix[active.row]?.[active.col] ?? "";
2441
+ setDraft(seed !== void 0 ? seed : raw);
2442
+ setEditOrigin(mode);
2443
+ setEditing(true);
2444
+ },
2445
+ [readOnly, matrix, active]
2446
+ );
2447
+ const endEdit = useCallback(
2448
+ (save, move) => {
2449
+ if (editing && save) {
2450
+ commit(active.row, active.col, draft);
2451
+ }
2452
+ setEditing(false);
2453
+ setDraft("");
2454
+ if (move) {
2455
+ setActive(move);
2456
+ setAnchor(move);
2457
+ }
2458
+ requestAnimationFrame(() => rootRef.current?.focus());
2459
+ },
2460
+ [editing, draft, active, commit]
2461
+ );
2462
+ useEffect(() => {
2463
+ if (editing) {
2464
+ const el = cellInputRef.current;
2465
+ if (el) {
2466
+ el.focus();
2467
+ if (editOrigin === "edit") el.select();
2468
+ else {
2469
+ const len = el.value.length;
2470
+ el.setSelectionRange(len, len);
2471
+ }
2472
+ }
2473
+ }
2474
+ }, [editing, editOrigin]);
2475
+ const activeRaw = matrix[active.row]?.[active.col] ?? "";
2476
+ const activeDisplay = displayValue(activeRaw, matrix, formulas);
2477
+ const selectionCount = useMemo(() => {
2478
+ const r0 = Math.min(active.row, anchor.row);
2479
+ const r1 = Math.max(active.row, anchor.row);
2480
+ const c0 = Math.min(active.col, anchor.col);
2481
+ const c1 = Math.max(active.col, anchor.col);
2482
+ return (r1 - r0 + 1) * (c1 - c0 + 1);
2483
+ }, [active, anchor]);
2484
+ const moveActive = (row, col, extend) => {
2485
+ const next = {
2486
+ row: Math.max(0, Math.min(rows - 1, row)),
2487
+ col: Math.max(0, Math.min(cols - 1, col))
2488
+ };
2489
+ setActive(next);
2490
+ if (!extend) setAnchor(next);
2491
+ };
2492
+ const onGridKeyDown = (e) => {
2493
+ if (editing) return;
2494
+ const { key, shiftKey, metaKey, ctrlKey } = e;
2495
+ const mod = metaKey || ctrlKey;
2496
+ if (key === "F2" || key === "Enter") {
2497
+ e.preventDefault();
2498
+ if (key === "Enter" && !shiftKey) {
2499
+ beginEdit("edit");
2500
+ } else if (key === "F2") {
2501
+ beginEdit("edit");
2502
+ } else if (key === "Enter" && shiftKey) {
2503
+ moveActive(active.row - 1, active.col, false);
2504
+ }
2505
+ return;
2506
+ }
2507
+ if (key === "Delete" || key === "Backspace") {
2508
+ if (readOnly) return;
2509
+ e.preventDefault();
2510
+ if (key === "Backspace") {
2511
+ beginEdit("type", "");
2512
+ } else {
2513
+ const next = cloneMatrix(matrix);
2514
+ for (let r = 0; r < rows; r++) {
2515
+ for (let c = 0; c < cols; c++) {
2516
+ if (inRange({ row: r, col: c }, active, anchor)) next[r][c] = "";
2517
+ }
2518
+ }
2519
+ setMatrix(next);
2520
+ }
2521
+ return;
2522
+ }
2523
+ if (mod && key.toLowerCase() === "c") {
2524
+ e.preventDefault();
2525
+ const text = activeRaw;
2526
+ void navigator.clipboard?.writeText(text);
2527
+ return;
2528
+ }
2529
+ if (mod && key.toLowerCase() === "v" && !readOnly) {
2530
+ e.preventDefault();
2531
+ void navigator.clipboard?.readText().then((text) => {
2532
+ const lines = text.replace(/\r/g, "").split("\n").filter((l, i, arr) => !(i === arr.length - 1 && l === ""));
2533
+ const next = cloneMatrix(matrix);
2534
+ lines.forEach((line, ri) => {
2535
+ const cells = line.split(" ");
2536
+ cells.forEach((val, ci) => {
2537
+ const r = active.row + ri;
2538
+ const c = active.col + ci;
2539
+ if (r < rows && c < cols) next[r][c] = val;
2540
+ });
2541
+ });
2542
+ setMatrix(next);
2543
+ });
2544
+ return;
2545
+ }
2546
+ const nav = {
2547
+ ArrowUp: [-1, 0],
2548
+ ArrowDown: [1, 0],
2549
+ ArrowLeft: [0, -1],
2550
+ ArrowRight: [0, 1],
2551
+ Tab: [0, shiftKey ? -1 : 1],
2552
+ Home: [0, -active.col],
2553
+ End: [0, cols - 1 - active.col]
2554
+ };
2555
+ if (key in nav) {
2556
+ e.preventDefault();
2557
+ const [dr, dc] = nav[key];
2558
+ if (key === "Tab") {
2559
+ moveActive(active.row + dr, active.col + dc, false);
2560
+ } else {
2561
+ moveActive(active.row + dr, active.col + dc, shiftKey);
2562
+ }
2563
+ return;
2564
+ }
2565
+ if (!readOnly && key.length === 1 && !mod && !e.altKey) {
2566
+ e.preventDefault();
2567
+ beginEdit("type", key);
2568
+ }
2569
+ };
2570
+ const onEditorKeyDown = (e) => {
2571
+ if (e.key === "Escape") {
2572
+ e.preventDefault();
2573
+ endEdit(false);
2574
+ return;
2575
+ }
2576
+ if (e.key === "Enter") {
2577
+ e.preventDefault();
2578
+ endEdit(true, {
2579
+ row: Math.min(rows - 1, active.row + (e.shiftKey ? -1 : 1)),
2580
+ col: active.col
2581
+ });
2582
+ return;
2583
+ }
2584
+ if (e.key === "Tab") {
2585
+ e.preventDefault();
2586
+ endEdit(true, {
2587
+ row: active.row,
2588
+ col: Math.max(0, Math.min(cols - 1, active.col + (e.shiftKey ? -1 : 1)))
2589
+ });
2590
+ return;
2591
+ }
2592
+ };
2593
+ const styleVars = {
2594
+ ...style,
2595
+ ["--cd-sheetgrid-col-width"]: `${columnWidth}px`,
2596
+ ["--cd-sheetgrid-max-height"]: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
2597
+ };
2598
+ return /* @__PURE__ */ jsxs(
2599
+ "div",
2600
+ {
2601
+ ref: rootRef,
2602
+ className: cn(
2603
+ "cd-sheetgrid",
2604
+ compact && "cd-sheetgrid--compact",
2605
+ readOnly && "cd-sheetgrid--readonly",
2606
+ className
2607
+ ),
2608
+ style: styleVars,
2609
+ tabIndex: 0,
2610
+ role: "grid",
2611
+ "aria-rowcount": rows,
2612
+ "aria-colcount": cols,
2613
+ "aria-label": "Spreadsheet",
2614
+ onKeyDown: onGridKeyDown,
2615
+ ...rest,
2616
+ children: [
2617
+ showFormulaBar && /* @__PURE__ */ jsxs("div", { className: "cd-sheetgrid__bar", children: [
2618
+ /* @__PURE__ */ jsx("div", { className: "cd-sheetgrid__addr", children: cellAddress(active.row, active.col) }),
2619
+ /* @__PURE__ */ jsx("div", { className: "cd-sheetgrid__fx-label", children: "\u0192x" }),
2620
+ /* @__PURE__ */ jsx(
2621
+ "input",
2622
+ {
2623
+ ref: fxInputRef,
2624
+ className: "cd-sheetgrid__fx-input",
2625
+ value: editing ? draft : activeRaw,
2626
+ disabled: readOnly,
2627
+ spellCheck: false,
2628
+ "aria-label": "Formula bar",
2629
+ onFocus: () => {
2630
+ if (!readOnly && !editing) beginEdit("edit");
2631
+ },
2632
+ onChange: (e) => {
2633
+ if (!editing) beginEdit("type", e.target.value);
2634
+ else setDraft(e.target.value);
2635
+ },
2636
+ onKeyDown: onEditorKeyDown,
2637
+ onBlur: () => {
2638
+ if (editing) endEdit(true);
2639
+ }
2640
+ }
2641
+ )
2642
+ ] }),
2643
+ /* @__PURE__ */ jsx("div", { className: "cd-sheetgrid__viewport", children: /* @__PURE__ */ jsxs("table", { className: "cd-sheetgrid__table", children: [
2644
+ /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
2645
+ /* @__PURE__ */ jsx("th", { className: "cd-sheetgrid__corner", scope: "col" }),
2646
+ Array.from({ length: cols }, (_, c) => /* @__PURE__ */ jsx(
2647
+ "th",
2648
+ {
2649
+ className: cn(
2650
+ "cd-sheetgrid__col-head",
2651
+ (active.col === c || inRange({ row: active.row, col: c }, active, anchor)) && "is-active"
2652
+ ),
2653
+ scope: "col",
2654
+ children: columnLabels?.[c] ?? colToLetter(c)
2655
+ },
2656
+ c
2657
+ ))
2658
+ ] }) }),
2659
+ /* @__PURE__ */ jsx("tbody", { children: Array.from({ length: rows }, (_, r) => /* @__PURE__ */ jsxs("tr", { children: [
2660
+ /* @__PURE__ */ jsx(
2661
+ "th",
2662
+ {
2663
+ className: cn(
2664
+ "cd-sheetgrid__row-head",
2665
+ (active.row === r || inRange({ row: r, col: active.col }, active, anchor)) && "is-active"
2666
+ ),
2667
+ scope: "row",
2668
+ children: rowLabels?.[r] ?? r + 1
2669
+ }
2670
+ ),
2671
+ Array.from({ length: cols }, (_2, c) => {
2672
+ const raw = matrix[r]?.[c] ?? "";
2673
+ const shown = displayValue(raw, matrix, formulas);
2674
+ const isActive = active.row === r && active.col === c;
2675
+ const isSelected = inRange({ row: r, col: c }, active, anchor);
2676
+ const isEditing = isActive && editing;
2677
+ const isErr = formulas && raw.startsWith("=") && shown.startsWith("#");
2678
+ const isNum = !raw.startsWith("=") && isNumericDisplay(raw) || raw.startsWith("=") && isNumericDisplay(shown);
2679
+ return /* @__PURE__ */ jsx(
2680
+ "td",
2681
+ {
2682
+ role: "gridcell",
2683
+ "aria-selected": isSelected,
2684
+ "aria-colindex": c + 1,
2685
+ className: cn(
2686
+ "cd-sheetgrid__cell",
2687
+ isActive && "is-active",
2688
+ isSelected && "is-selected",
2689
+ isEditing && "is-editing",
2690
+ isNum && "cd-sheetgrid__cell--number",
2691
+ raw.startsWith("=") && "cd-sheetgrid__cell--formula",
2692
+ isErr && "cd-sheetgrid__cell--error"
2693
+ ),
2694
+ onMouseDown: (e) => {
2695
+ if (editing && isActive) return;
2696
+ if (editing) endEdit(true);
2697
+ e.preventDefault();
2698
+ rootRef.current?.focus();
2699
+ const next = { row: r, col: c };
2700
+ setActive(next);
2701
+ if (e.shiftKey) ; else {
2702
+ setAnchor(next);
2703
+ }
2704
+ },
2705
+ onDoubleClick: () => {
2706
+ if (!readOnly) beginEdit("edit");
2707
+ },
2708
+ children: isEditing ? /* @__PURE__ */ jsx(
2709
+ "input",
2710
+ {
2711
+ ref: cellInputRef,
2712
+ className: cn(
2713
+ "cd-sheetgrid__cell-input",
2714
+ isNum && "cd-sheetgrid__cell-input--number"
2715
+ ),
2716
+ value: draft,
2717
+ spellCheck: false,
2718
+ "aria-label": `Edit ${cellAddress(r, c)}`,
2719
+ onChange: (e) => setDraft(e.target.value),
2720
+ onKeyDown: onEditorKeyDown,
2721
+ onBlur: () => {
2722
+ requestAnimationFrame(() => {
2723
+ if (document.activeElement === fxInputRef.current) return;
2724
+ if (document.activeElement === cellInputRef.current) return;
2725
+ if (editing) endEdit(true);
2726
+ });
2727
+ }
2728
+ }
2729
+ ) : /* @__PURE__ */ jsx("span", { className: "cd-sheetgrid__cell-display", children: shown })
2730
+ },
2731
+ c
2732
+ );
2733
+ })
2734
+ ] }, r)) })
2735
+ ] }) }),
2736
+ showStatus && /* @__PURE__ */ jsxs("div", { className: "cd-sheetgrid__status", children: [
2737
+ /* @__PURE__ */ jsxs("span", { children: [
2738
+ "cell ",
2739
+ /* @__PURE__ */ jsx("strong", { children: cellAddress(active.row, active.col) })
2740
+ ] }),
2741
+ selectionCount > 1 && /* @__PURE__ */ jsxs("span", { children: [
2742
+ "sel ",
2743
+ /* @__PURE__ */ jsx("strong", { children: selectionCount })
2744
+ ] }),
2745
+ /* @__PURE__ */ jsx("span", { children: readOnly ? "read-only" : editing ? "editing" : "ready" }),
2746
+ formulas && activeRaw.startsWith("=") && /* @__PURE__ */ jsxs("span", { children: [
2747
+ "\u2192 ",
2748
+ /* @__PURE__ */ jsx("strong", { children: activeDisplay })
2749
+ ] }),
2750
+ /* @__PURE__ */ jsxs("span", { style: { marginLeft: "auto" }, children: [
2751
+ rows,
2752
+ "\xD7",
2753
+ cols
2754
+ ] })
2755
+ ] })
2756
+ ]
2757
+ }
2758
+ );
2759
+ }
2760
+ function createSpreadsheetData(rows, cols, fill = "") {
2761
+ return createMatrix(rows, cols, fill);
2762
+ }
2763
+ function Stat({
2764
+ label,
2765
+ value,
2766
+ delta,
2767
+ trend,
2768
+ variant = "default",
2769
+ className = "",
2770
+ ...rest
2771
+ }) {
2772
+ return /* @__PURE__ */ jsxs(
2773
+ "div",
2774
+ {
2775
+ className: cn("cd-stat", variant !== "default" && `cd-stat--${variant}`, className),
2776
+ ...rest,
2777
+ children: [
2778
+ /* @__PURE__ */ jsx("span", { className: "cd-stat__label", children: label }),
2779
+ /* @__PURE__ */ jsx("span", { className: "cd-stat__value", children: value }),
2780
+ delta != null && /* @__PURE__ */ jsx("span", { className: cn("cd-stat__delta", trend && `cd-stat__delta--${trend}`), children: delta })
2781
+ ]
2782
+ }
2783
+ );
2784
+ }
2785
+ function StatGrid({ className = "", children, ...rest }) {
2786
+ return /* @__PURE__ */ jsx("div", { className: cn("cd-stats", className), ...rest, children });
2787
+ }
2788
+ Stat.Grid = StatGrid;
2789
+ function StatusBar({
2790
+ message,
2791
+ cursor = true,
2792
+ leading,
2793
+ meta,
2794
+ className = "",
2795
+ children,
2796
+ ...rest
2797
+ }) {
2798
+ return /* @__PURE__ */ jsxs("div", { className: cn("cd-status-bar", className), ...rest, children: [
2799
+ leading,
2800
+ message != null && /* @__PURE__ */ jsx("span", { className: cn("cd-status-bar__message", cursor && "cd-status-bar__message--cursor"), children: message }),
2801
+ children,
2802
+ meta != null && /* @__PURE__ */ jsx("div", { className: "cd-status-bar__meta", children: meta })
2803
+ ] });
2804
+ }
2805
+ function StatusDot({
2806
+ status = "live",
2807
+ children,
2808
+ orbOnly = false,
2809
+ className = "",
2810
+ ...rest
2811
+ }) {
2812
+ const statusClass = status === "idle" ? void 0 : status === "success" ? "cd-status-dot--success" : `cd-status-dot--${status}`;
2813
+ return /* @__PURE__ */ jsxs("span", { className: cn("cd-status-dot", statusClass, className), ...rest, children: [
2814
+ /* @__PURE__ */ jsx("span", { className: "cd-status-dot__orb", "aria-hidden": true }),
2815
+ !orbOnly && children != null && /* @__PURE__ */ jsx("span", { children })
2816
+ ] });
2817
+ }
2818
+ function StatusPill({
2819
+ variant = "default",
2820
+ className = "",
2821
+ children,
2822
+ ...rest
2823
+ }) {
2824
+ return /* @__PURE__ */ jsx(
2825
+ "span",
2826
+ {
2827
+ className: cn(
2828
+ "cd-status-pill",
2829
+ variant !== "default" && `cd-status-pill--${variant}`,
2830
+ className
2831
+ ),
2832
+ ...rest,
2833
+ children
2834
+ }
2835
+ );
2836
+ }
2837
+ function Switch({ size = "md", label, className = "", ...rest }) {
2838
+ return /* @__PURE__ */ jsxs("label", { className: cn("cd-switch", size === "sm" && "cd-switch--sm", className), children: [
2839
+ /* @__PURE__ */ jsx("input", { type: "checkbox", className: "cd-switch__input", ...rest }),
2840
+ /* @__PURE__ */ jsx("span", { className: "cd-switch__track", children: /* @__PURE__ */ jsx("span", { className: "cd-switch__thumb" }) }),
2841
+ label != null && /* @__PURE__ */ jsx("span", { className: "cd-switch__label", children: label })
2842
+ ] });
2843
+ }
2844
+ function Tabs({
2845
+ items,
2846
+ variant = "underline",
2847
+ defaultActive = 0,
2848
+ active,
2849
+ onTabChange,
2850
+ hidePanels = false,
2851
+ className = ""
2852
+ }) {
2853
+ const [internal, setInternal] = useState(defaultActive);
2854
+ const current = active ?? internal;
2855
+ const select = (i) => {
2856
+ if (items[i]?.disabled) return;
2857
+ if (active == null) setInternal(i);
2858
+ onTabChange?.(i);
2859
+ };
2860
+ return /* @__PURE__ */ jsxs(
2861
+ "div",
2862
+ {
2863
+ className: cn(
2864
+ "cd-tabs",
2865
+ variant === "pills" && "cd-tabs--pills",
2866
+ variant === "vertical" && "cd-tabs--vertical",
2867
+ className
2868
+ ),
2869
+ children: [
2870
+ /* @__PURE__ */ jsx("div", { className: "cd-tabs__list", role: "tablist", children: items.map((item, i) => /* @__PURE__ */ jsxs(
2871
+ "button",
2872
+ {
2873
+ type: "button",
2874
+ role: "tab",
2875
+ "aria-selected": i === current,
2876
+ disabled: item.disabled,
2877
+ className: cn("cd-tabs__trigger", i === current && "is-active"),
2878
+ onClick: () => select(i),
2879
+ children: [
2880
+ item.label,
2881
+ item.badge != null && /* @__PURE__ */ jsx("span", { className: "cd-badge cd-badge--orange", style: { marginLeft: 4 }, children: item.badge })
2882
+ ]
2883
+ },
2884
+ i
2885
+ )) }),
2886
+ !hidePanels && /* @__PURE__ */ jsx("div", { className: "cd-tabs__panels", children: items.map((item, i) => /* @__PURE__ */ jsx(
2887
+ "div",
2888
+ {
2889
+ role: "tabpanel",
2890
+ className: cn("cd-tabs__panel", i === current && "is-active"),
2891
+ children: item.content
2892
+ },
2893
+ i
2894
+ )) })
2895
+ ]
2896
+ }
2897
+ );
2898
+ }
2899
+ function Terminal({
2900
+ title,
2901
+ controls = false,
2902
+ lines = [],
2903
+ compact = false,
2904
+ crt = false,
2905
+ input = false,
2906
+ inputPrompt = "root@net> ",
2907
+ inputProps,
2908
+ className = "",
2909
+ children,
2910
+ ...rest
2911
+ }) {
2912
+ return /* @__PURE__ */ jsxs(
2913
+ "div",
2914
+ {
2915
+ className: cn(
2916
+ "cd-terminal",
2917
+ compact && "cd-terminal--compact",
2918
+ crt && "cd-terminal--crt",
2919
+ className
2920
+ ),
2921
+ ...rest,
2922
+ children: [
2923
+ (title != null || controls) && /* @__PURE__ */ jsxs("div", { className: "cd-terminal__header", children: [
2924
+ title != null && /* @__PURE__ */ jsx("span", { className: "cd-terminal__title", children: title }),
2925
+ controls && /* @__PURE__ */ jsxs("div", { className: "cd-terminal__controls", children: [
2926
+ /* @__PURE__ */ jsx("span", { className: "cd-terminal__dot cd-terminal__dot--min", title: "Minimize" }),
2927
+ /* @__PURE__ */ jsx("span", { className: "cd-terminal__dot cd-terminal__dot--max", title: "Maximize" }),
2928
+ /* @__PURE__ */ jsx("span", { className: "cd-terminal__dot cd-terminal__dot--close", title: "Close" })
2929
+ ] })
2930
+ ] }),
2931
+ /* @__PURE__ */ jsxs("div", { className: "cd-terminal__body cd-scrollbar", children: [
2932
+ lines.map((line, i) => /* @__PURE__ */ jsxs(
2933
+ "div",
2934
+ {
2935
+ className: cn("cd-terminal__line", line.type && `cd-terminal__line--${line.type}`),
2936
+ children: [
2937
+ line.prompt != null && /* @__PURE__ */ jsx("span", { className: "cd-terminal__prompt", children: line.prompt }),
2938
+ line.text
2939
+ ]
2940
+ },
2941
+ i
2942
+ )),
2943
+ children
2944
+ ] }),
2945
+ input && /* @__PURE__ */ jsxs("div", { className: "cd-terminal__input", children: [
2946
+ inputPrompt != null && /* @__PURE__ */ jsx("span", { className: "cd-terminal__prompt", children: inputPrompt }),
2947
+ /* @__PURE__ */ jsx("input", { className: "cd-terminal__field", placeholder: "type command...", ...inputProps })
2948
+ ] })
2949
+ ]
2950
+ }
2951
+ );
2952
+ }
2953
+ function Textarea({ error = false, className = "", ...rest }) {
2954
+ return /* @__PURE__ */ jsx(
2955
+ "textarea",
2956
+ {
2957
+ className: cn("cd-textarea", error && "cd-textarea--error", className),
2958
+ ...rest
2959
+ }
2960
+ );
2961
+ }
2962
+ function Ticker({
2963
+ items,
2964
+ speed,
2965
+ fast = false,
2966
+ vertical = false,
2967
+ className = "",
2968
+ ...rest
2969
+ }) {
2970
+ const resolvedSpeed = fast ? "fast" : speed;
2971
+ return /* @__PURE__ */ jsx(
2972
+ "div",
2973
+ {
2974
+ className: cn(
2975
+ "cd-ticker",
2976
+ resolvedSpeed && `cd-ticker--${resolvedSpeed}`,
2977
+ vertical && "cd-ticker--vertical",
2978
+ className
2979
+ ),
2980
+ ...rest,
2981
+ children: /* @__PURE__ */ jsx("div", { className: "cd-ticker__inner", children: items.map((item, i) => /* @__PURE__ */ jsx("span", { className: "cd-ticker__item", children: item }, i)) })
2982
+ }
2983
+ );
2984
+ }
2985
+ function Toast({
2986
+ variant = "info",
2987
+ icon,
2988
+ title,
2989
+ onDismiss,
2990
+ className = "",
2991
+ children,
2992
+ ...rest
2993
+ }) {
2994
+ return /* @__PURE__ */ jsxs("div", { className: cn("cd-toast", `cd-toast--${variant}`, className), ...rest, children: [
2995
+ icon != null && /* @__PURE__ */ jsx("span", { className: "cd-toast__icon", children: icon }),
2996
+ /* @__PURE__ */ jsxs("div", { className: "cd-toast__content", children: [
2997
+ title != null && /* @__PURE__ */ jsx("div", { className: "cd-toast__title", children: title }),
2998
+ children != null && /* @__PURE__ */ jsx("div", { className: "cd-toast__body", children })
2999
+ ] }),
3000
+ onDismiss && /* @__PURE__ */ jsx("button", { className: "cd-toast__dismiss", onClick: onDismiss, "aria-label": "Dismiss", children: "\u2715" })
3001
+ ] });
3002
+ }
3003
+ var ToasterContext = createContext(null);
3004
+ function useToast() {
3005
+ const ctx = useContext(ToasterContext);
3006
+ if (!ctx) throw new Error("useToast must be used within <ToasterProvider>");
3007
+ return ctx;
3008
+ }
3009
+ function ToasterProvider({
3010
+ children,
3011
+ position = "bottom-right",
3012
+ duration = 4e3
3013
+ }) {
3014
+ const [items, setItems] = useState([]);
3015
+ const dismiss = useCallback((id) => {
3016
+ setItems((list) => list.filter((t) => t.id !== id));
3017
+ }, []);
3018
+ const toast = useCallback(
3019
+ (input) => {
3020
+ const id = input.id ?? `t-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
3021
+ const rec = { ...input, id };
3022
+ setItems((list) => [...list, rec]);
3023
+ const ms = input.duration ?? duration;
3024
+ if (ms > 0) window.setTimeout(() => dismiss(id), ms);
3025
+ return id;
3026
+ },
3027
+ [duration, dismiss]
3028
+ );
3029
+ const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
3030
+ return /* @__PURE__ */ jsxs(ToasterContext.Provider, { value, children: [
3031
+ children,
3032
+ /* @__PURE__ */ jsx("div", { className: cn("cd-toaster", `cd-toaster--${position}`), "aria-live": "polite", children: items.map(({ id, duration: _d, ...props }) => /* @__PURE__ */ jsx(Toast, { ...props, onDismiss: () => dismiss(id) }, id)) })
3033
+ ] });
3034
+ }
3035
+ function Toaster(props) {
3036
+ return /* @__PURE__ */ jsx(ToasterProvider, { ...props });
3037
+ }
3038
+ function Toggle({
3039
+ pressed,
3040
+ defaultPressed = false,
3041
+ onPressedChange,
3042
+ size = "md",
3043
+ variant = "default",
3044
+ className = "",
3045
+ children,
3046
+ ...rest
3047
+ }) {
3048
+ const [internal, setInternal] = useState(defaultPressed);
3049
+ const isOn = pressed ?? internal;
3050
+ const { onClick, ...buttonRest } = rest;
3051
+ return /* @__PURE__ */ jsx(
3052
+ "button",
3053
+ {
3054
+ type: "button",
3055
+ className: cn(
3056
+ "cd-toggle",
3057
+ size === "sm" && "cd-toggle--sm",
3058
+ variant === "outline" && "cd-toggle--outline",
3059
+ isOn && "is-on",
3060
+ className
3061
+ ),
3062
+ "data-state": isOn ? "on" : "off",
3063
+ "aria-pressed": isOn,
3064
+ onClick: (e) => {
3065
+ onClick?.(e);
3066
+ const next = !isOn;
3067
+ if (pressed == null) setInternal(next);
3068
+ onPressedChange?.(next);
3069
+ },
3070
+ ...buttonRest,
3071
+ children
3072
+ }
3073
+ );
3074
+ }
3075
+ function ToggleGroup({
3076
+ items,
3077
+ value,
3078
+ defaultValue,
3079
+ multiple = false,
3080
+ onValueChange,
3081
+ size = "md",
3082
+ className = "",
3083
+ ...rest
3084
+ }) {
3085
+ const [internal, setInternal] = useState(
3086
+ defaultValue ?? (multiple ? [] : "")
3087
+ );
3088
+ const current = value ?? internal;
3089
+ const isOn = (v) => multiple ? current.includes(v) : current === v;
3090
+ const select = (v) => {
3091
+ let next;
3092
+ if (multiple) {
3093
+ const arr = [...current];
3094
+ const i = arr.indexOf(v);
3095
+ if (i >= 0) arr.splice(i, 1);
3096
+ else arr.push(v);
3097
+ next = arr;
3098
+ } else {
3099
+ next = current === v ? "" : v;
3100
+ }
3101
+ if (value == null) setInternal(next);
3102
+ onValueChange?.(next);
3103
+ };
3104
+ return /* @__PURE__ */ jsx("div", { className: cn("cd-toggle-group", className), role: "group", ...rest, children: items.map((item) => /* @__PURE__ */ jsx(
3105
+ "button",
3106
+ {
3107
+ type: "button",
3108
+ disabled: item.disabled,
3109
+ className: cn("cd-toggle", size === "sm" && "cd-toggle--sm", isOn(item.value) && "is-on"),
3110
+ "data-state": isOn(item.value) ? "on" : "off",
3111
+ "aria-pressed": isOn(item.value),
3112
+ onClick: () => select(item.value),
3113
+ children: item.label
3114
+ },
3115
+ item.value
3116
+ )) });
3117
+ }
3118
+ function Tooltip({
3119
+ tip,
3120
+ below = false,
3121
+ className = "",
3122
+ children,
3123
+ ...rest
3124
+ }) {
3125
+ return /* @__PURE__ */ jsx(
3126
+ "span",
3127
+ {
3128
+ className: cn("cd-tooltip", below && "cd-tooltip--below", className),
3129
+ "data-tip": tip,
3130
+ ...rest,
3131
+ children
3132
+ }
3133
+ );
3134
+ }
3135
+ function Transport({
3136
+ playing = false,
3137
+ onPlay,
3138
+ onStop,
3139
+ playLabel = "\u25B6 Play",
3140
+ stopLabel = "\u25A0 Stop",
3141
+ disabled = false,
3142
+ className = "",
3143
+ children,
3144
+ ...rest
3145
+ }) {
3146
+ return /* @__PURE__ */ jsxs("div", { className: cn("cd-transport", className), ...rest, children: [
3147
+ /* @__PURE__ */ jsxs("div", { className: "cd-transport__group", children: [
3148
+ /* @__PURE__ */ jsx(
3149
+ Button,
3150
+ {
3151
+ type: "button",
3152
+ variant: "primary",
3153
+ disabled: disabled || playing,
3154
+ onClick: onPlay,
3155
+ children: playLabel
3156
+ }
3157
+ ),
3158
+ /* @__PURE__ */ jsx(
3159
+ Button,
3160
+ {
3161
+ type: "button",
3162
+ variant: "danger",
3163
+ disabled: disabled || !playing,
3164
+ onClick: onStop,
3165
+ children: stopLabel
3166
+ }
3167
+ )
3168
+ ] }),
3169
+ children
3170
+ ] });
3171
+ }
3172
+ function H1({ className = "", ...rest }) {
3173
+ return /* @__PURE__ */ jsx("h1", { className: cn("cd-h1", className), ...rest });
3174
+ }
3175
+ function H2({ className = "", ...rest }) {
3176
+ return /* @__PURE__ */ jsx("h2", { className: cn("cd-h2", className), ...rest });
3177
+ }
3178
+ function H3({ className = "", ...rest }) {
3179
+ return /* @__PURE__ */ jsx("h3", { className: cn("cd-h3", className), ...rest });
3180
+ }
3181
+ function H4({ className = "", ...rest }) {
3182
+ return /* @__PURE__ */ jsx("h4", { className: cn("cd-h4", className), ...rest });
3183
+ }
3184
+ function P({ className = "", ...rest }) {
3185
+ return /* @__PURE__ */ jsx("p", { className: cn("cd-p", className), ...rest });
3186
+ }
3187
+ function Lead({ className = "", ...rest }) {
3188
+ return /* @__PURE__ */ jsx("p", { className: cn("cd-lead", className), ...rest });
3189
+ }
3190
+ function Muted({ className = "", ...rest }) {
3191
+ return /* @__PURE__ */ jsx("p", { className: cn("cd-muted", className), ...rest });
3192
+ }
3193
+ function Small({ className = "", ...rest }) {
3194
+ return /* @__PURE__ */ jsx("small", { className: cn("cd-small", className), ...rest });
3195
+ }
3196
+ function InlineCode({ className = "", ...rest }) {
3197
+ return /* @__PURE__ */ jsx("code", { className: cn("cd-code", className), ...rest });
3198
+ }
3199
+ function Pre({ className = "", ...rest }) {
3200
+ return /* @__PURE__ */ jsx("pre", { className: cn("cd-pre", className), ...rest });
3201
+ }
3202
+ function Blockquote({ className = "", ...rest }) {
3203
+ return /* @__PURE__ */ jsx("blockquote", { className: cn("cd-blockquote", className), ...rest });
3204
+ }
3205
+ function List({ className = "", ...rest }) {
3206
+ return /* @__PURE__ */ jsx("ul", { className: cn("cd-list", className), ...rest });
3207
+ }
3208
+ function InlineLink({ className = "", ...rest }) {
3209
+ return /* @__PURE__ */ jsx("a", { className: cn("cd-inline-link", className), ...rest });
3210
+ }
3211
+ function Typography({ className = "", children, ...rest }) {
3212
+ return /* @__PURE__ */ jsx("div", { className: cn("cd-typography", className), ...rest, children });
3213
+ }
3214
+
3215
+ export { Accordion, Alert, AlertDialog, AspectRatio, AugButton, AugPanel, Avatar, AvatarGroup, Badge, Blockquote, BottomNav, Breadcrumb, Button, ButtonGroup, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, Chat, ChatAction, ChatActions, ChatCodeBlock, ChatMessage, ChatTyping, Checkbox, Chip, ChipRow, Clock, Collapsible, Combobox, Command, ContextMenu, DataTable, DatePicker, Dialog, Drawer, Dropdown, DropdownMenu, Empty, Feed, FeedItem, Field, Gauge, GlowCard, H1, H2, H3, H4, HBar, HoverCard, HudBar, HudFrame, HudSegment, InlineCode, InlineLink, Input, InputGroup, InputGroupAddon, InputOTP, Interference, Item, ItemGroup, Kbd, KbdGroup, Label, Lead, List, Menubar, Modal, Muted, NativeSelect, NavigationMenu, P, Pagination, PanelHeader, Popover, Pre, Progress, Radio, RadioGroup, Resizable, Scanner, ScrollArea, SectionHeader, Select, Separator, Sheet, Sidebar, Skeleton, SkeletonRow, Slider, Small, Spinner, Spreadsheet, Stat, StatGrid, StatusBar, StatusDot, StatusPill, Switch, Table, Tabs, Terminal, Textarea, ThemeProvider, Ticker, Toast, Toaster, ToasterProvider, Toggle, ToggleGroup, Tooltip, Transport, Typography, cn, createSpreadsheetData, useTheme, useToast };
3216
+ //# sourceMappingURL=index.js.map
3217
+ //# sourceMappingURL=index.js.map