@nextop-os/ui-system 0.0.17 → 0.0.18

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.
Files changed (40) hide show
  1. package/AGENTS.md +30 -8
  2. package/README.md +11 -14
  3. package/agent/install-skill.mjs +65 -5
  4. package/agent/nextop-ui-system/SKILL.md +119 -8
  5. package/agent/nextop-ui-system/references/extract-base-component.md +50 -6
  6. package/agent/nextop-ui-system/references/maintain-inventory.md +5 -0
  7. package/agent/nextop-ui-system/references/promote-business-component.md +94 -208
  8. package/dist/chunk-GE5YVRTV.js +859 -0
  9. package/dist/chunk-GE5YVRTV.js.map +1 -0
  10. package/dist/chunk-KJQ366TA.js +70 -0
  11. package/dist/chunk-KJQ366TA.js.map +1 -0
  12. package/dist/chunk-LVHEV755.js +2553 -0
  13. package/dist/chunk-LVHEV755.js.map +1 -0
  14. package/dist/components/index.d.ts +162 -11
  15. package/dist/components/index.js +62 -2
  16. package/dist/date-format.d.ts +6 -0
  17. package/dist/date-format.js +11 -0
  18. package/dist/date-format.js.map +1 -0
  19. package/dist/dev-vite.js +12 -5
  20. package/dist/dev-vite.js.map +1 -1
  21. package/dist/icons/index.d.ts +90 -47
  22. package/dist/icons/index.js +91 -11
  23. package/dist/index.d.ts +3 -2
  24. package/dist/index.js +159 -11
  25. package/dist/metadata/components.json +1320 -265
  26. package/dist/metadata/components.schema.json +4 -0
  27. package/dist/metadata/index.d.ts +3 -1
  28. package/dist/metadata/index.js +1320 -265
  29. package/dist/metadata/index.js.map +1 -1
  30. package/dist/styles/base.css +85 -0
  31. package/dist/styles/index.css +1 -0
  32. package/dist/styles/semantic.css +7 -0
  33. package/dist/styles/theme.css +82 -1
  34. package/package.json +10 -3
  35. package/ui-system.md +640 -0
  36. package/UI_SYSTEM_GUIDELINES.md +0 -148
  37. package/dist/chunk-FT633NLJ.js +0 -1159
  38. package/dist/chunk-FT633NLJ.js.map +0 -1
  39. package/dist/chunk-NFSMZKML.js +0 -208
  40. package/dist/chunk-NFSMZKML.js.map +0 -1
@@ -0,0 +1,2553 @@
1
+ import {
2
+ ArrowLeftIcon,
3
+ ArrowRightIcon,
4
+ CheckIcon,
5
+ ChevronDownIcon,
6
+ ChevronRightIcon,
7
+ ChevronUpIcon,
8
+ CloseIcon,
9
+ FailedFilledIcon,
10
+ LoadingIcon,
11
+ SuccessFilledIcon
12
+ } from "./chunk-GE5YVRTV.js";
13
+ import {
14
+ cn
15
+ } from "./chunk-DGPY4WP3.js";
16
+
17
+ // src/components/badge.tsx
18
+ import { cva } from "class-variance-authority";
19
+ import { Slot } from "radix-ui";
20
+ import { jsx } from "react/jsx-runtime";
21
+ var badgeVariants = cva(
22
+ "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border border-transparent px-2 py-0.5 text-[0.72rem] font-normal whitespace-nowrap transition-[background-color,border-color,color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/35 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
23
+ {
24
+ variants: {
25
+ variant: {
26
+ default: "bg-primary text-primary-foreground [a]:hover:bg-primary/92",
27
+ secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/88",
28
+ destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/18",
29
+ outline: "border-border bg-card/90 text-foreground [a]:hover:bg-muted [a]:hover:text-foreground",
30
+ ghost: "hover:bg-accent/80 hover:text-accent-foreground dark:hover:bg-muted/50",
31
+ link: "text-primary underline-offset-4 hover:underline"
32
+ }
33
+ },
34
+ defaultVariants: {
35
+ variant: "default"
36
+ }
37
+ }
38
+ );
39
+ function Badge({
40
+ className,
41
+ variant = "default",
42
+ asChild = false,
43
+ ...props
44
+ }) {
45
+ const Comp = asChild ? Slot.Root : "span";
46
+ return /* @__PURE__ */ jsx(
47
+ Comp,
48
+ {
49
+ "data-slot": "badge",
50
+ "data-variant": variant,
51
+ className: cn(badgeVariants({ variant }), className),
52
+ ...props
53
+ }
54
+ );
55
+ }
56
+
57
+ // src/components/button.tsx
58
+ import { cva as cva2 } from "class-variance-authority";
59
+ import { Slot as Slot2 } from "radix-ui";
60
+ import { jsx as jsx2 } from "react/jsx-runtime";
61
+ var buttonVariants = cva2(
62
+ "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-normal whitespace-nowrap transition-[background-color,border-color,color,box-shadow,transform] outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/35 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
63
+ {
64
+ variants: {
65
+ variant: {
66
+ default: "bg-[var(--text-primary)] text-[var(--text-inverted)] shadow-none hover:bg-[var(--text-primary-hover)]",
67
+ outline: "border-border bg-card text-foreground hover:bg-muted/80 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
68
+ secondary: "bg-transparency-block text-[var(--text-primary)] hover:bg-transparency-hover aria-expanded:bg-transparency-hover aria-expanded:text-[var(--text-primary)]",
69
+ ghost: "bg-transparent text-[var(--text-primary)] hover:bg-transparency-hover aria-expanded:bg-transparency-hover aria-expanded:text-[var(--text-primary)]",
70
+ chrome: "border border-transparent bg-transparent text-[var(--text-tertiary)] shadow-none hover:border-transparent hover:bg-[var(--transparency-hover)] hover:text-[var(--text-primary)] active:bg-[var(--transparency-active)] active:text-[var(--text-primary)] aria-expanded:border-transparent aria-expanded:bg-[var(--transparency-block)] aria-expanded:text-[var(--text-primary)] disabled:pointer-events-auto disabled:cursor-not-allowed disabled:opacity-45",
71
+ destructive: "bg-[var(--state-danger)] text-[var(--text-inverted)] hover:bg-[var(--state-danger-hover)] focus-visible:border-[var(--state-danger)] focus-visible:ring-[color-mix(in_srgb,var(--state-danger)_25%,transparent)]",
72
+ link: "text-primary underline-offset-4 hover:underline"
73
+ },
74
+ size: {
75
+ default: "h-8 gap-[6px] px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
76
+ dialog: "h-8 gap-[6px] rounded-md px-3 text-sm font-normal leading-5 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
77
+ xs: "h-6 gap-1 rounded-sm px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
78
+ sm: "h-7 gap-1 rounded-sm px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
79
+ lg: "h-9 gap-2 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
80
+ icon: "size-8",
81
+ "icon-xs": "size-6 rounded-sm in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
82
+ "icon-sm": "size-7 rounded-sm in-data-[slot=button-group]:rounded-md",
83
+ "icon-lg": "size-9"
84
+ }
85
+ },
86
+ defaultVariants: {
87
+ variant: "default",
88
+ size: "default"
89
+ },
90
+ compoundVariants: [
91
+ {
92
+ variant: "chrome",
93
+ size: "icon-sm",
94
+ class: "rounded-[4px]"
95
+ }
96
+ ]
97
+ }
98
+ );
99
+ function Button({
100
+ className,
101
+ variant = "default",
102
+ size = "default",
103
+ asChild = false,
104
+ ...props
105
+ }) {
106
+ const Comp = asChild ? Slot2.Root : "button";
107
+ return /* @__PURE__ */ jsx2(
108
+ Comp,
109
+ {
110
+ "data-slot": "button",
111
+ "data-variant": variant,
112
+ "data-size": size,
113
+ className: cn(buttonVariants({ variant, size, className })),
114
+ ...props
115
+ }
116
+ );
117
+ }
118
+
119
+ // src/components/card.tsx
120
+ import { jsx as jsx3 } from "react/jsx-runtime";
121
+ function Card({
122
+ className,
123
+ size = "default",
124
+ ...props
125
+ }) {
126
+ return /* @__PURE__ */ jsx3(
127
+ "div",
128
+ {
129
+ "data-slot": "card",
130
+ "data-size": size,
131
+ className: cn(
132
+ "group/card flex flex-col gap-4 overflow-hidden rounded-lg border border-border/70 bg-card py-4 text-sm text-card-foreground shadow-none has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg",
133
+ className
134
+ ),
135
+ ...props
136
+ }
137
+ );
138
+ }
139
+ function CardHeader({ className, ...props }) {
140
+ return /* @__PURE__ */ jsx3(
141
+ "div",
142
+ {
143
+ "data-slot": "card-header",
144
+ className: cn(
145
+ "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-lg px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:border-border/70 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
146
+ className
147
+ ),
148
+ ...props
149
+ }
150
+ );
151
+ }
152
+ function CardTitle({ className, ...props }) {
153
+ return /* @__PURE__ */ jsx3(
154
+ "div",
155
+ {
156
+ "data-slot": "card-title",
157
+ className: cn(
158
+ "text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
159
+ className
160
+ ),
161
+ ...props
162
+ }
163
+ );
164
+ }
165
+ function CardDescription({ className, ...props }) {
166
+ return /* @__PURE__ */ jsx3(
167
+ "div",
168
+ {
169
+ "data-slot": "card-description",
170
+ className: cn("text-sm leading-[1.3] text-muted-foreground", className),
171
+ ...props
172
+ }
173
+ );
174
+ }
175
+ function CardAction({ className, ...props }) {
176
+ return /* @__PURE__ */ jsx3(
177
+ "div",
178
+ {
179
+ "data-slot": "card-action",
180
+ className: cn(
181
+ "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
182
+ className
183
+ ),
184
+ ...props
185
+ }
186
+ );
187
+ }
188
+ function CardContent({ className, ...props }) {
189
+ return /* @__PURE__ */ jsx3(
190
+ "div",
191
+ {
192
+ "data-slot": "card-content",
193
+ className: cn("px-4 group-data-[size=sm]/card:px-3", className),
194
+ ...props
195
+ }
196
+ );
197
+ }
198
+ function CardFooter({ className, ...props }) {
199
+ return /* @__PURE__ */ jsx3(
200
+ "div",
201
+ {
202
+ "data-slot": "card-footer",
203
+ className: cn(
204
+ "flex items-center rounded-b-lg border-t border-border/70 bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
205
+ className
206
+ ),
207
+ ...props
208
+ }
209
+ );
210
+ }
211
+
212
+ // src/components/checkbox.tsx
213
+ import { Checkbox as CheckboxPrimitive } from "radix-ui";
214
+ import { jsx as jsx4 } from "react/jsx-runtime";
215
+ function Checkbox({
216
+ className,
217
+ ...props
218
+ }) {
219
+ return /* @__PURE__ */ jsx4(
220
+ CheckboxPrimitive.Root,
221
+ {
222
+ "data-slot": "checkbox",
223
+ className: cn(
224
+ "peer inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-border/70 bg-[var(--workbench-field-bg)] text-[var(--text-inverted)] transition-[background-color,border-color,color,box-shadow] outline-none focus-visible:border-border focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:border-[var(--border-1)] disabled:bg-muted disabled:text-[var(--text-inverted)] disabled:opacity-100 data-disabled:border-[var(--border-1)] aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-[state=checked]:border-[var(--text-primary)] data-[state=checked]:bg-[var(--text-primary)] data-[state=unchecked]:hover:border-[color-mix(in_srgb,var(--text-primary)_40%,transparent)] disabled:data-[state=checked]:border-[var(--border-1)] disabled:data-[state=checked]:bg-[var(--text-disabled)] data-disabled:data-[state=checked]:border-[var(--border-1)]",
225
+ className
226
+ ),
227
+ ...props,
228
+ children: /* @__PURE__ */ jsx4(
229
+ CheckboxPrimitive.Indicator,
230
+ {
231
+ "data-slot": "checkbox-indicator",
232
+ className: "grid place-content-center text-current transition-none [&>svg]:size-3",
233
+ children: /* @__PURE__ */ jsx4(CheckIcon, { size: 14 })
234
+ }
235
+ )
236
+ }
237
+ );
238
+ }
239
+
240
+ // src/components/dialog.tsx
241
+ import * as React from "react";
242
+ import { Dialog as DialogPrimitive } from "radix-ui";
243
+ import { Fragment, jsx as jsx5, jsxs } from "react/jsx-runtime";
244
+ var dialogCloseDurationMs = 150;
245
+ var DialogMotionContext = React.createContext({
246
+ open: false
247
+ });
248
+ function Dialog({
249
+ defaultOpen,
250
+ onOpenChange,
251
+ open,
252
+ ...props
253
+ }) {
254
+ const [uncontrolledOpen, setUncontrolledOpen] = React.useState(
255
+ defaultOpen ?? false
256
+ );
257
+ const currentOpen = open ?? uncontrolledOpen;
258
+ const handleOpenChange = React.useCallback(
259
+ (nextOpen) => {
260
+ if (open === void 0) {
261
+ setUncontrolledOpen(nextOpen);
262
+ }
263
+ onOpenChange?.(nextOpen);
264
+ },
265
+ [onOpenChange, open]
266
+ );
267
+ return /* @__PURE__ */ jsx5(DialogMotionContext.Provider, { value: { open: currentOpen }, children: /* @__PURE__ */ jsx5(
268
+ DialogPrimitive.Root,
269
+ {
270
+ "data-slot": "dialog",
271
+ open: currentOpen,
272
+ onOpenChange: handleOpenChange,
273
+ ...props
274
+ }
275
+ ) });
276
+ }
277
+ function DialogTrigger({
278
+ ...props
279
+ }) {
280
+ return /* @__PURE__ */ jsx5(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
281
+ }
282
+ function DialogPortal({
283
+ ...props
284
+ }) {
285
+ return /* @__PURE__ */ jsx5(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
286
+ }
287
+ function DialogClose({
288
+ ...props
289
+ }) {
290
+ return /* @__PURE__ */ jsx5(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
291
+ }
292
+ function DialogOverlay({
293
+ className,
294
+ style,
295
+ ...props
296
+ }) {
297
+ return /* @__PURE__ */ jsx5(
298
+ DialogPrimitive.Overlay,
299
+ {
300
+ "data-slot": "dialog-overlay",
301
+ className: cn(
302
+ "fixed inset-0 isolate bg-background/80 duration-150 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
303
+ className
304
+ ),
305
+ style: { zIndex: "var(--z-dialog-overlay)", ...style },
306
+ ...props
307
+ }
308
+ );
309
+ }
310
+ function DialogContent({
311
+ className,
312
+ children,
313
+ overlayClassName,
314
+ portaled = true,
315
+ showCloseButton = true,
316
+ style,
317
+ ...props
318
+ }) {
319
+ const { open } = React.useContext(DialogMotionContext);
320
+ const [mounted, setMounted] = React.useState(open);
321
+ React.useEffect(() => {
322
+ if (open) {
323
+ setMounted(true);
324
+ return void 0;
325
+ }
326
+ const timeout = window.setTimeout(() => {
327
+ setMounted(false);
328
+ }, dialogCloseDurationMs);
329
+ return () => {
330
+ window.clearTimeout(timeout);
331
+ };
332
+ }, [open]);
333
+ if (!mounted) {
334
+ return null;
335
+ }
336
+ const content = /* @__PURE__ */ jsxs(Fragment, { children: [
337
+ /* @__PURE__ */ jsx5(DialogOverlay, { className: overlayClassName, forceMount: true }),
338
+ /* @__PURE__ */ jsxs(
339
+ DialogPrimitive.Content,
340
+ {
341
+ "data-slot": "dialog-content",
342
+ forceMount: true,
343
+ className: cn(
344
+ portaled ? "fixed" : "absolute",
345
+ "pointer-events-none top-1/2 left-1/2 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 origin-center gap-3 rounded-[16px] border border-border-1 bg-background-fronted p-[18px] text-sm text-foreground shadow-panel outline-none ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[transform,opacity] sm:max-w-[360px] data-[state=closed]:!pointer-events-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[0.96] data-[state=closed]:duration-[150ms] data-[state=open]:pointer-events-auto data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-[0.96] data-[state=open]:duration-[250ms] motion-reduce:animate-none",
346
+ className
347
+ ),
348
+ style: { zIndex: "var(--z-dialog)", ...style },
349
+ ...props,
350
+ children: [
351
+ children,
352
+ showCloseButton && /* @__PURE__ */ jsx5(DialogPrimitive.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ jsxs(
353
+ Button,
354
+ {
355
+ variant: "ghost",
356
+ className: "absolute top-3 right-3",
357
+ size: "icon-sm",
358
+ children: [
359
+ /* @__PURE__ */ jsx5(CloseIcon, {}),
360
+ /* @__PURE__ */ jsx5("span", { className: "sr-only", children: "Close" })
361
+ ]
362
+ }
363
+ ) })
364
+ ]
365
+ }
366
+ )
367
+ ] });
368
+ if (!portaled) {
369
+ return content;
370
+ }
371
+ return /* @__PURE__ */ jsx5(DialogPortal, { forceMount: true, children: content });
372
+ }
373
+ function DialogHeader({ className, ...props }) {
374
+ return /* @__PURE__ */ jsx5(
375
+ "div",
376
+ {
377
+ "data-slot": "dialog-header",
378
+ className: cn("flex flex-col gap-2 pr-8", className),
379
+ ...props
380
+ }
381
+ );
382
+ }
383
+ function DialogFooter({
384
+ className,
385
+ showCloseButton = false,
386
+ children,
387
+ ...props
388
+ }) {
389
+ return /* @__PURE__ */ jsxs(
390
+ "div",
391
+ {
392
+ "data-slot": "dialog-footer",
393
+ className: cn(
394
+ "flex flex-col-reverse gap-2 pt-1 sm:flex-row sm:justify-end sm:gap-2.5",
395
+ className
396
+ ),
397
+ ...props,
398
+ children: [
399
+ children,
400
+ showCloseButton && /* @__PURE__ */ jsx5(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx5(Button, { variant: "ghost", size: "dialog", children: "Close" }) })
401
+ ]
402
+ }
403
+ );
404
+ }
405
+ function DialogTitle({
406
+ className,
407
+ ...props
408
+ }) {
409
+ return /* @__PURE__ */ jsx5(
410
+ DialogPrimitive.Title,
411
+ {
412
+ "data-slot": "dialog-title",
413
+ className: cn(
414
+ "text-base leading-[1.35] font-semibold tracking-normal text-foreground",
415
+ className
416
+ ),
417
+ ...props
418
+ }
419
+ );
420
+ }
421
+ function DialogDescription({
422
+ className,
423
+ ...props
424
+ }) {
425
+ return /* @__PURE__ */ jsx5(
426
+ DialogPrimitive.Description,
427
+ {
428
+ "data-slot": "dialog-description",
429
+ className: cn(
430
+ "text-sm leading-[1.3] text-text-secondary *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
431
+ className
432
+ ),
433
+ ...props
434
+ }
435
+ );
436
+ }
437
+
438
+ // src/components/confirmation-dialog.tsx
439
+ import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
440
+ function confirmToneClassName(tone) {
441
+ if (tone === "destructive") {
442
+ return "shadow-none";
443
+ }
444
+ return void 0;
445
+ }
446
+ function ConfirmationDialog({
447
+ cancelLabel,
448
+ children,
449
+ className,
450
+ confirmBusy = false,
451
+ confirmDisabled = false,
452
+ confirmLabel,
453
+ description,
454
+ disableCloseWhileBusy = true,
455
+ footer,
456
+ hideConfirmButton = false,
457
+ onCancel,
458
+ onConfirm,
459
+ onOpenChange,
460
+ open,
461
+ overlayClassName,
462
+ portaled = true,
463
+ tone = "default",
464
+ title
465
+ }) {
466
+ const isCloseDisabled = disableCloseWhileBusy && confirmBusy;
467
+ return /* @__PURE__ */ jsx6(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs2(
468
+ DialogContent,
469
+ {
470
+ className: cn(
471
+ "max-w-[calc(100%-2rem)] text-left sm:max-w-[360px]",
472
+ className
473
+ ),
474
+ overlayClassName: cn(overlayClassName),
475
+ portaled,
476
+ showCloseButton: false,
477
+ onEscapeKeyDown: (event) => {
478
+ if (isCloseDisabled) {
479
+ event.preventDefault();
480
+ }
481
+ },
482
+ onInteractOutside: (event) => {
483
+ if (isCloseDisabled) {
484
+ event.preventDefault();
485
+ }
486
+ },
487
+ children: [
488
+ /* @__PURE__ */ jsxs2(DialogHeader, { children: [
489
+ /* @__PURE__ */ jsx6(DialogTitle, { children: title }),
490
+ description ? /* @__PURE__ */ jsx6(DialogDescription, { children: description }) : null
491
+ ] }),
492
+ children ? /* @__PURE__ */ jsx6("div", { className: "text-sm leading-[1.3] text-text-secondary", children }) : null,
493
+ footer ?? /* @__PURE__ */ jsxs2(DialogFooter, { children: [
494
+ /* @__PURE__ */ jsx6(
495
+ Button,
496
+ {
497
+ disabled: confirmBusy,
498
+ size: "dialog",
499
+ type: "button",
500
+ variant: "ghost",
501
+ onClick: () => {
502
+ onCancel?.();
503
+ onOpenChange(false);
504
+ },
505
+ children: cancelLabel
506
+ }
507
+ ),
508
+ hideConfirmButton ? null : /* @__PURE__ */ jsx6(
509
+ Button,
510
+ {
511
+ disabled: confirmBusy || confirmDisabled,
512
+ size: "dialog",
513
+ type: "button",
514
+ variant: tone === "default" ? "default" : "destructive",
515
+ className: cn("shadow-none", confirmToneClassName(tone)),
516
+ onClick: () => {
517
+ onConfirm?.();
518
+ },
519
+ children: confirmLabel
520
+ }
521
+ )
522
+ ] })
523
+ ]
524
+ }
525
+ ) });
526
+ }
527
+
528
+ // src/components/date-picker.tsx
529
+ import * as React2 from "react";
530
+ import { createPortal } from "react-dom";
531
+ import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
532
+ var defaultLabels = {
533
+ placeholder: "Year / Month / Day",
534
+ previousMonth: "Previous month",
535
+ nextMonth: "Next month",
536
+ clear: "Clear",
537
+ today: "Today",
538
+ weekdayLabels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
539
+ };
540
+ var DATE_PICKER_POPOVER_WIDTH_PX = 264;
541
+ var DATE_PICKER_POPOVER_HEIGHT_PX = 336;
542
+ var DATE_PICKER_POPOVER_GAP_PX = 6;
543
+ var DATE_PICKER_VIEWPORT_MARGIN_PX = 8;
544
+ function parseDateValue(value) {
545
+ if (!value) {
546
+ return null;
547
+ }
548
+ const [year, month, day] = value.split("-").map(Number);
549
+ if (!year || !month || !day) {
550
+ return null;
551
+ }
552
+ return new Date(year, month - 1, day);
553
+ }
554
+ function formatDateValue(date) {
555
+ const year = date.getFullYear();
556
+ const month = `${date.getMonth() + 1}`.padStart(2, "0");
557
+ const day = `${date.getDate()}`.padStart(2, "0");
558
+ return `${year}-${month}-${day}`;
559
+ }
560
+ function defaultDisplayValueFormatter(date) {
561
+ return new Intl.DateTimeFormat(void 0, {
562
+ year: "numeric",
563
+ month: "2-digit",
564
+ day: "2-digit"
565
+ }).format(date);
566
+ }
567
+ function defaultMonthLabelFormatter(date) {
568
+ return new Intl.DateTimeFormat(void 0, {
569
+ year: "numeric",
570
+ month: "long"
571
+ }).format(date);
572
+ }
573
+ function isSameDate(left, right) {
574
+ return Boolean(
575
+ left && right && left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth() && left.getDate() === right.getDate()
576
+ );
577
+ }
578
+ function buildMonthGrid(monthDate) {
579
+ const firstOfMonth = new Date(
580
+ monthDate.getFullYear(),
581
+ monthDate.getMonth(),
582
+ 1
583
+ );
584
+ const gridStart = new Date(firstOfMonth);
585
+ gridStart.setDate(firstOfMonth.getDate() - firstOfMonth.getDay());
586
+ return Array.from({ length: 42 }, (_, index) => {
587
+ const date = new Date(gridStart);
588
+ date.setDate(gridStart.getDate() + index);
589
+ return date;
590
+ });
591
+ }
592
+ function resolvePopoverPosition(rect) {
593
+ const width = Math.max(rect.width, DATE_PICKER_POPOVER_WIDTH_PX);
594
+ const maxLeft = window.innerWidth - width - DATE_PICKER_VIEWPORT_MARGIN_PX;
595
+ const left = Math.max(
596
+ DATE_PICKER_VIEWPORT_MARGIN_PX,
597
+ Math.min(rect.left, Math.max(DATE_PICKER_VIEWPORT_MARGIN_PX, maxLeft))
598
+ );
599
+ const belowTop = rect.bottom + DATE_PICKER_POPOVER_GAP_PX;
600
+ const aboveTop = rect.top - DATE_PICKER_POPOVER_GAP_PX - DATE_PICKER_POPOVER_HEIGHT_PX;
601
+ const canOpenBelow = belowTop + DATE_PICKER_POPOVER_HEIGHT_PX <= window.innerHeight - DATE_PICKER_VIEWPORT_MARGIN_PX;
602
+ const top = canOpenBelow ? belowTop : Math.max(DATE_PICKER_VIEWPORT_MARGIN_PX, aboveTop);
603
+ return { top, left, width };
604
+ }
605
+ function subscribeScrollableAncestors(trigger, onScrollLike) {
606
+ const cleanups = [];
607
+ let element = trigger.parentElement;
608
+ while (element && element !== document.documentElement) {
609
+ const { overflowX, overflowY } = window.getComputedStyle(element);
610
+ if (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay" || overflowX === "auto" || overflowX === "scroll" || overflowX === "overlay") {
611
+ element.addEventListener("scroll", onScrollLike, { passive: true });
612
+ const current = element;
613
+ cleanups.push(() => current.removeEventListener("scroll", onScrollLike));
614
+ }
615
+ element = element.parentElement;
616
+ }
617
+ return () => cleanups.forEach((dispose) => dispose());
618
+ }
619
+ var DatePicker = React2.forwardRef(
620
+ ({
621
+ className,
622
+ value,
623
+ onValueChange,
624
+ onClick,
625
+ disabled,
626
+ labels,
627
+ formatDisplayValue = defaultDisplayValueFormatter,
628
+ formatMonthLabel = defaultMonthLabelFormatter,
629
+ ...props
630
+ }, ref) => {
631
+ const resolvedLabels = {
632
+ ...defaultLabels,
633
+ ...labels,
634
+ weekdayLabels: labels?.weekdayLabels ?? defaultLabels.weekdayLabels
635
+ };
636
+ const triggerRef = React2.useRef(null);
637
+ const popoverRef = React2.useRef(null);
638
+ const selectedDate = React2.useMemo(() => parseDateValue(value), [value]);
639
+ const [isOpen, setIsOpen] = React2.useState(false);
640
+ const [visibleMonth, setVisibleMonth] = React2.useState(
641
+ () => selectedDate ?? /* @__PURE__ */ new Date()
642
+ );
643
+ const [popoverPosition, setPopoverPosition] = React2.useState(null);
644
+ React2.useEffect(() => {
645
+ if (selectedDate) {
646
+ setVisibleMonth(selectedDate);
647
+ }
648
+ }, [selectedDate]);
649
+ const openPopover = React2.useCallback(() => {
650
+ const trigger = triggerRef.current;
651
+ if (!trigger) {
652
+ return;
653
+ }
654
+ setPopoverPosition(
655
+ resolvePopoverPosition(trigger.getBoundingClientRect())
656
+ );
657
+ setIsOpen(true);
658
+ }, []);
659
+ React2.useLayoutEffect(() => {
660
+ if (!isOpen) {
661
+ return;
662
+ }
663
+ const sync = () => {
664
+ const element = triggerRef.current;
665
+ if (!element) {
666
+ return;
667
+ }
668
+ setPopoverPosition(
669
+ resolvePopoverPosition(element.getBoundingClientRect())
670
+ );
671
+ };
672
+ sync();
673
+ const rafId = window.requestAnimationFrame(sync);
674
+ return () => window.cancelAnimationFrame(rafId);
675
+ }, [isOpen]);
676
+ React2.useEffect(() => {
677
+ if (!isOpen) {
678
+ return void 0;
679
+ }
680
+ const ac = new AbortController();
681
+ const { signal } = ac;
682
+ const handlePointerDown = (event) => {
683
+ const target = event.target;
684
+ if (target && (triggerRef.current?.contains(target) || popoverRef.current?.contains(target))) {
685
+ return;
686
+ }
687
+ setIsOpen(false);
688
+ };
689
+ const handleKeyDown = (event) => {
690
+ if (event.key === "Escape") {
691
+ setIsOpen(false);
692
+ triggerRef.current?.focus();
693
+ }
694
+ };
695
+ const updatePosition = () => {
696
+ const element = triggerRef.current;
697
+ if (!element) {
698
+ return;
699
+ }
700
+ setPopoverPosition(
701
+ resolvePopoverPosition(element.getBoundingClientRect())
702
+ );
703
+ };
704
+ document.addEventListener("pointerdown", handlePointerDown, { signal });
705
+ document.addEventListener("keydown", handleKeyDown, { signal });
706
+ window.addEventListener("resize", updatePosition, { signal });
707
+ document.addEventListener(
708
+ "wheel",
709
+ () => window.requestAnimationFrame(updatePosition),
710
+ {
711
+ capture: true,
712
+ passive: true,
713
+ signal
714
+ }
715
+ );
716
+ const unsubAncestors = triggerRef.current ? subscribeScrollableAncestors(triggerRef.current, updatePosition) : () => {
717
+ };
718
+ return () => {
719
+ ac.abort();
720
+ unsubAncestors();
721
+ };
722
+ }, [isOpen]);
723
+ const today = React2.useMemo(() => /* @__PURE__ */ new Date(), []);
724
+ const monthGrid = React2.useMemo(
725
+ () => buildMonthGrid(visibleMonth),
726
+ [visibleMonth]
727
+ );
728
+ const displayValue = selectedDate ? formatDisplayValue(selectedDate) : resolvedLabels.placeholder;
729
+ const selectDate = (date) => {
730
+ onValueChange?.(formatDateValue(date));
731
+ setIsOpen(false);
732
+ triggerRef.current?.focus();
733
+ };
734
+ return /* @__PURE__ */ jsxs3(Fragment2, { children: [
735
+ /* @__PURE__ */ jsx7(
736
+ "button",
737
+ {
738
+ ref: (node) => {
739
+ triggerRef.current = node;
740
+ if (typeof ref === "function") {
741
+ ref(node);
742
+ } else if (ref) {
743
+ ref.current = node;
744
+ }
745
+ },
746
+ "data-slot": "date-picker",
747
+ disabled,
748
+ type: "button",
749
+ className: cn(
750
+ "inline-flex h-8 min-h-8 w-full items-center justify-start rounded-md border border-transparent bg-[var(--workbench-field-bg)] px-3 text-left text-sm text-foreground transition-[background-color,border-color,box-shadow,color] outline-none hover:bg-muted/60 focus-visible:border-border focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground disabled:opacity-100",
751
+ !selectedDate && "text-muted-foreground",
752
+ className
753
+ ),
754
+ onClick: (event) => {
755
+ onClick?.(event);
756
+ if (disabled) {
757
+ return;
758
+ }
759
+ if (isOpen) {
760
+ setIsOpen(false);
761
+ } else {
762
+ openPopover();
763
+ }
764
+ },
765
+ ...props,
766
+ children: /* @__PURE__ */ jsx7("span", { className: "min-w-0 truncate", children: displayValue })
767
+ }
768
+ ),
769
+ isOpen && popoverPosition ? createPortal(
770
+ /* @__PURE__ */ jsxs3(
771
+ "div",
772
+ {
773
+ ref: popoverRef,
774
+ "data-slot": "date-picker-content",
775
+ className: "fixed z-50 flex min-w-[264px] max-w-[min(100vw-16px,320px)] flex-col overflow-hidden rounded-xl border border-border/70 bg-popover p-3 text-popover-foreground shadow-soft",
776
+ style: {
777
+ top: popoverPosition.top,
778
+ left: popoverPosition.left,
779
+ width: popoverPosition.width,
780
+ zIndex: "var(--z-popover)"
781
+ },
782
+ children: [
783
+ /* @__PURE__ */ jsxs3("div", { className: "mb-3 flex items-center justify-between gap-2", children: [
784
+ /* @__PURE__ */ jsx7("div", { className: "text-sm font-semibold text-foreground", children: formatMonthLabel(visibleMonth) }),
785
+ /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", children: [
786
+ /* @__PURE__ */ jsx7(
787
+ "button",
788
+ {
789
+ "aria-label": resolvedLabels.previousMonth,
790
+ className: "inline-flex h-7 w-7 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
791
+ type: "button",
792
+ onClick: () => setVisibleMonth(
793
+ (current) => new Date(
794
+ current.getFullYear(),
795
+ current.getMonth() - 1,
796
+ 1
797
+ )
798
+ ),
799
+ children: /* @__PURE__ */ jsx7(ArrowLeftIcon, { size: 16 })
800
+ }
801
+ ),
802
+ /* @__PURE__ */ jsx7(
803
+ "button",
804
+ {
805
+ "aria-label": resolvedLabels.nextMonth,
806
+ className: "inline-flex h-7 w-7 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
807
+ type: "button",
808
+ onClick: () => setVisibleMonth(
809
+ (current) => new Date(
810
+ current.getFullYear(),
811
+ current.getMonth() + 1,
812
+ 1
813
+ )
814
+ ),
815
+ children: /* @__PURE__ */ jsx7(ArrowRightIcon, { size: 16 })
816
+ }
817
+ )
818
+ ] })
819
+ ] }),
820
+ /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-7 gap-1 text-center text-xs font-semibold text-muted-foreground", children: resolvedLabels.weekdayLabels.map((day) => /* @__PURE__ */ jsx7("div", { className: "py-1", children: day }, day)) }),
821
+ /* @__PURE__ */ jsx7(
822
+ "div",
823
+ {
824
+ className: "mt-1 grid grid-cols-7 justify-items-center gap-1",
825
+ role: "grid",
826
+ children: monthGrid.map((date) => {
827
+ const isSelected = isSameDate(date, selectedDate);
828
+ const isToday = isSameDate(date, today);
829
+ const inCurrentMonth = date.getMonth() === visibleMonth.getMonth();
830
+ return /* @__PURE__ */ jsx7(
831
+ "button",
832
+ {
833
+ "aria-pressed": isSelected,
834
+ className: cn(
835
+ "inline-flex h-8 w-8 items-center justify-center rounded-sm text-sm transition-[background-color,color,box-shadow] hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30",
836
+ inCurrentMonth ? "text-foreground" : "text-muted-foreground",
837
+ isToday && "bg-primary/10 text-primary shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--color-primary)_20%,transparent)]",
838
+ isSelected && "bg-primary text-primary-foreground hover:bg-primary"
839
+ ),
840
+ role: "gridcell",
841
+ type: "button",
842
+ onClick: () => selectDate(date),
843
+ children: date.getDate()
844
+ },
845
+ formatDateValue(date)
846
+ );
847
+ })
848
+ }
849
+ ),
850
+ /* @__PURE__ */ jsxs3("div", { className: "mt-3 flex items-center justify-between gap-2 border-t border-border/70 pt-3", children: [
851
+ /* @__PURE__ */ jsx7(
852
+ "button",
853
+ {
854
+ className: "inline-flex min-h-8 items-center justify-center rounded-sm px-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
855
+ type: "button",
856
+ onClick: () => {
857
+ onValueChange?.("");
858
+ setIsOpen(false);
859
+ triggerRef.current?.focus();
860
+ },
861
+ children: resolvedLabels.clear
862
+ }
863
+ ),
864
+ /* @__PURE__ */ jsx7(
865
+ "button",
866
+ {
867
+ className: "inline-flex min-h-8 items-center justify-center rounded-sm bg-primary px-3 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90",
868
+ type: "button",
869
+ onClick: () => selectDate(today),
870
+ children: resolvedLabels.today
871
+ }
872
+ )
873
+ ] })
874
+ ]
875
+ }
876
+ ),
877
+ document.body
878
+ ) : null
879
+ ] });
880
+ }
881
+ );
882
+ DatePicker.displayName = "DatePicker";
883
+
884
+ // src/components/dropdown-menu.tsx
885
+ import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
886
+
887
+ // src/components/menu-surface.tsx
888
+ import * as React3 from "react";
889
+ import { Slot as Slot3 } from "radix-ui";
890
+ import { jsx as jsx8 } from "react/jsx-runtime";
891
+ var menuSurfaceClassName = "t-dropdown flex flex-col gap-0.5 rounded-[8px] border border-[var(--border-1)] bg-[var(--background-fronted)] p-1 text-sm text-[var(--text-primary)] shadow-panel outline-none";
892
+ var menuItemClassName = "relative flex cursor-default items-center gap-1.5 rounded-sm px-2 py-1 text-sm text-[var(--text-primary)] outline-hidden transition-colors duration-200 select-none hover:bg-[var(--transparency-block)] hover:text-[var(--text-primary)] focus:bg-[var(--transparency-block)] focus:text-[var(--text-primary)] data-[highlighted]:bg-[var(--transparency-block)] data-[highlighted]:text-[var(--text-primary)] data-disabled:pointer-events-none data-disabled:text-[var(--text-disabled)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2";
893
+ var menuItemWithIndicatorClassName = `${menuItemClassName} pr-8`;
894
+ var menuItemIndicatorClassName = "pointer-events-none absolute right-2 flex size-4 items-center justify-center";
895
+ var MenuSurface = React3.forwardRef(
896
+ ({
897
+ asChild = false,
898
+ className,
899
+ "data-state": dataState,
900
+ state = "open",
901
+ ...props
902
+ }, ref) => {
903
+ const Comp = asChild ? Slot3.Root : "div";
904
+ return /* @__PURE__ */ jsx8(
905
+ Comp,
906
+ {
907
+ ...props,
908
+ ref,
909
+ className: cn(menuSurfaceClassName, className),
910
+ "data-state": dataState ?? state
911
+ }
912
+ );
913
+ }
914
+ );
915
+ MenuSurface.displayName = "MenuSurface";
916
+
917
+ // src/components/dropdown-menu.tsx
918
+ import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
919
+ function DropdownMenu({
920
+ ...props
921
+ }) {
922
+ return /* @__PURE__ */ jsx9(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
923
+ }
924
+ function DropdownMenuPortal({
925
+ ...props
926
+ }) {
927
+ return /* @__PURE__ */ jsx9(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
928
+ }
929
+ function DropdownMenuTrigger({
930
+ ...props
931
+ }) {
932
+ return /* @__PURE__ */ jsx9(
933
+ DropdownMenuPrimitive.Trigger,
934
+ {
935
+ "data-slot": "dropdown-menu-trigger",
936
+ ...props
937
+ }
938
+ );
939
+ }
940
+ function DropdownMenuContent({
941
+ className,
942
+ align = "start",
943
+ sideOffset = 4,
944
+ style,
945
+ ...props
946
+ }) {
947
+ return /* @__PURE__ */ jsx9(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx9(
948
+ DropdownMenuPrimitive.Content,
949
+ {
950
+ asChild: true,
951
+ "data-slot": "dropdown-menu-content",
952
+ align,
953
+ sideOffset,
954
+ ...props,
955
+ children: /* @__PURE__ */ jsx9(
956
+ MenuSurface,
957
+ {
958
+ "data-slot": "dropdown-menu-content",
959
+ className: cn(
960
+ "z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto",
961
+ className
962
+ ),
963
+ style: { zIndex: "var(--z-popover)", ...style }
964
+ }
965
+ )
966
+ }
967
+ ) });
968
+ }
969
+ function DropdownMenuGroup({
970
+ className,
971
+ ...props
972
+ }) {
973
+ return /* @__PURE__ */ jsx9(
974
+ DropdownMenuPrimitive.Group,
975
+ {
976
+ "data-slot": "dropdown-menu-group",
977
+ className: cn("flex flex-col gap-0.5", className),
978
+ ...props
979
+ }
980
+ );
981
+ }
982
+ function DropdownMenuItem({
983
+ className,
984
+ inset,
985
+ variant = "default",
986
+ ...props
987
+ }) {
988
+ return /* @__PURE__ */ jsx9(
989
+ DropdownMenuPrimitive.Item,
990
+ {
991
+ "data-inset": inset,
992
+ "data-slot": "dropdown-menu-item",
993
+ "data-variant": variant,
994
+ className: cn(
995
+ "group/dropdown-menu-item",
996
+ menuItemClassName,
997
+ "data-inset:pl-7 data-[variant=destructive]:text-[var(--state-danger)] data-[variant=destructive]:focus:bg-[color-mix(in_srgb,var(--state-danger)_10%,transparent)] data-[variant=destructive]:focus:text-[var(--state-danger)] data-[variant=destructive]:hover:bg-[color-mix(in_srgb,var(--state-danger)_10%,transparent)] data-[variant=destructive]:hover:text-[var(--state-danger)] data-[variant=destructive]:*:[svg]:text-[var(--state-danger)]",
998
+ className
999
+ ),
1000
+ ...props
1001
+ }
1002
+ );
1003
+ }
1004
+ function DropdownMenuCheckboxItem({
1005
+ className,
1006
+ children,
1007
+ checked,
1008
+ inset,
1009
+ ...props
1010
+ }) {
1011
+ return /* @__PURE__ */ jsxs4(
1012
+ DropdownMenuPrimitive.CheckboxItem,
1013
+ {
1014
+ checked,
1015
+ "data-inset": inset,
1016
+ "data-slot": "dropdown-menu-checkbox-item",
1017
+ className: cn(
1018
+ menuItemWithIndicatorClassName,
1019
+ "data-inset:pl-7",
1020
+ className
1021
+ ),
1022
+ ...props,
1023
+ children: [
1024
+ /* @__PURE__ */ jsx9(
1025
+ "span",
1026
+ {
1027
+ className: menuItemIndicatorClassName,
1028
+ "data-slot": "dropdown-menu-checkbox-item-indicator",
1029
+ children: /* @__PURE__ */ jsx9(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx9(CheckIcon, {}) })
1030
+ }
1031
+ ),
1032
+ children
1033
+ ]
1034
+ }
1035
+ );
1036
+ }
1037
+ function DropdownMenuRadioGroup({
1038
+ className,
1039
+ ...props
1040
+ }) {
1041
+ return /* @__PURE__ */ jsx9(
1042
+ DropdownMenuPrimitive.RadioGroup,
1043
+ {
1044
+ "data-slot": "dropdown-menu-radio-group",
1045
+ className: cn("flex flex-col gap-0.5", className),
1046
+ ...props
1047
+ }
1048
+ );
1049
+ }
1050
+ function DropdownMenuRadioItem({
1051
+ className,
1052
+ children,
1053
+ inset,
1054
+ ...props
1055
+ }) {
1056
+ return /* @__PURE__ */ jsxs4(
1057
+ DropdownMenuPrimitive.RadioItem,
1058
+ {
1059
+ "data-inset": inset,
1060
+ "data-slot": "dropdown-menu-radio-item",
1061
+ className: cn(
1062
+ menuItemWithIndicatorClassName,
1063
+ "data-inset:pl-7",
1064
+ className
1065
+ ),
1066
+ ...props,
1067
+ children: [
1068
+ /* @__PURE__ */ jsx9(
1069
+ "span",
1070
+ {
1071
+ className: menuItemIndicatorClassName,
1072
+ "data-slot": "dropdown-menu-radio-item-indicator",
1073
+ children: /* @__PURE__ */ jsx9(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx9(CheckIcon, {}) })
1074
+ }
1075
+ ),
1076
+ children
1077
+ ]
1078
+ }
1079
+ );
1080
+ }
1081
+ function DropdownMenuLabel({
1082
+ className,
1083
+ inset,
1084
+ ...props
1085
+ }) {
1086
+ return /* @__PURE__ */ jsx9(
1087
+ DropdownMenuPrimitive.Label,
1088
+ {
1089
+ "data-inset": inset,
1090
+ "data-slot": "dropdown-menu-label",
1091
+ className: cn(
1092
+ "px-1.5 py-1 text-xs font-medium text-[var(--text-secondary)] data-inset:pl-7",
1093
+ className
1094
+ ),
1095
+ ...props
1096
+ }
1097
+ );
1098
+ }
1099
+ function DropdownMenuSeparator({
1100
+ className,
1101
+ ...props
1102
+ }) {
1103
+ return /* @__PURE__ */ jsx9(
1104
+ DropdownMenuPrimitive.Separator,
1105
+ {
1106
+ "data-slot": "dropdown-menu-separator",
1107
+ className: cn("mx-2 my-0.5 h-px bg-[var(--border-1)]", className),
1108
+ ...props
1109
+ }
1110
+ );
1111
+ }
1112
+ function DropdownMenuShortcut({
1113
+ className,
1114
+ ...props
1115
+ }) {
1116
+ return /* @__PURE__ */ jsx9(
1117
+ "span",
1118
+ {
1119
+ "data-slot": "dropdown-menu-shortcut",
1120
+ className: cn(
1121
+ "ml-auto text-xs tracking-widest text-[var(--text-secondary)] group-focus/dropdown-menu-item:text-[var(--text-primary)]",
1122
+ className
1123
+ ),
1124
+ ...props
1125
+ }
1126
+ );
1127
+ }
1128
+ function DropdownMenuSub({
1129
+ ...props
1130
+ }) {
1131
+ return /* @__PURE__ */ jsx9(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
1132
+ }
1133
+ function DropdownMenuSubTrigger({
1134
+ className,
1135
+ inset,
1136
+ children,
1137
+ ...props
1138
+ }) {
1139
+ return /* @__PURE__ */ jsxs4(
1140
+ DropdownMenuPrimitive.SubTrigger,
1141
+ {
1142
+ "data-inset": inset,
1143
+ "data-slot": "dropdown-menu-sub-trigger",
1144
+ className: cn(
1145
+ menuItemClassName,
1146
+ "data-inset:pl-7 data-open:bg-[var(--transparency-block)] data-open:text-[var(--text-primary)]",
1147
+ className
1148
+ ),
1149
+ ...props,
1150
+ children: [
1151
+ children,
1152
+ /* @__PURE__ */ jsx9(ChevronRightIcon, { className: "ml-auto" })
1153
+ ]
1154
+ }
1155
+ );
1156
+ }
1157
+ function DropdownMenuSubContent({
1158
+ className,
1159
+ style,
1160
+ ...props
1161
+ }) {
1162
+ return /* @__PURE__ */ jsx9(
1163
+ DropdownMenuPrimitive.SubContent,
1164
+ {
1165
+ asChild: true,
1166
+ "data-slot": "dropdown-menu-sub-content",
1167
+ ...props,
1168
+ children: /* @__PURE__ */ jsx9(
1169
+ MenuSurface,
1170
+ {
1171
+ "data-slot": "dropdown-menu-sub-content",
1172
+ className: cn(
1173
+ "z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden",
1174
+ className
1175
+ ),
1176
+ style: { zIndex: "var(--z-popover)", ...style }
1177
+ }
1178
+ )
1179
+ }
1180
+ );
1181
+ }
1182
+
1183
+ // src/components/input.tsx
1184
+ import { jsx as jsx10 } from "react/jsx-runtime";
1185
+ function Input({ className, size = "default", type, ...props }) {
1186
+ return /* @__PURE__ */ jsx10(
1187
+ "input",
1188
+ {
1189
+ type,
1190
+ "data-slot": "input",
1191
+ "data-size": size,
1192
+ className: cn(
1193
+ "w-full min-w-0 rounded-lg border border-input bg-transparency-block px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground hover:bg-transparency-hover focus:bg-transparency-hover focus-visible:border-ring focus-visible:bg-transparency-hover focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-transparency-block disabled:text-text-disabled disabled:opacity-100 aria-invalid:border-[var(--state-danger)] aria-invalid:bg-transparency-block aria-invalid:hover:bg-transparency-hover aria-invalid:focus:bg-transparency-hover aria-invalid:focus-visible:bg-transparency-hover aria-invalid:ring-0 aria-invalid:shadow-none md:text-sm",
1194
+ size === "sm" ? "h-7 rounded-[4px]" : "h-8",
1195
+ className
1196
+ ),
1197
+ ...props
1198
+ }
1199
+ );
1200
+ }
1201
+
1202
+ // src/components/popover.tsx
1203
+ import { Popover as PopoverPrimitive } from "radix-ui";
1204
+ import { jsx as jsx11 } from "react/jsx-runtime";
1205
+ function Popover({
1206
+ ...props
1207
+ }) {
1208
+ return /* @__PURE__ */ jsx11(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
1209
+ }
1210
+ function PopoverTrigger({
1211
+ ...props
1212
+ }) {
1213
+ return /* @__PURE__ */ jsx11(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
1214
+ }
1215
+ function PopoverPortal({
1216
+ ...props
1217
+ }) {
1218
+ return /* @__PURE__ */ jsx11(PopoverPrimitive.Portal, { "data-slot": "popover-portal", ...props });
1219
+ }
1220
+ function PopoverClose({
1221
+ ...props
1222
+ }) {
1223
+ return /* @__PURE__ */ jsx11(PopoverPrimitive.Close, { "data-slot": "popover-close", ...props });
1224
+ }
1225
+ function PopoverContent({
1226
+ className,
1227
+ align = "center",
1228
+ sideOffset = 4,
1229
+ ...props
1230
+ }) {
1231
+ return /* @__PURE__ */ jsx11(PopoverPortal, { children: /* @__PURE__ */ jsx11(
1232
+ PopoverPrimitive.Content,
1233
+ {
1234
+ "data-slot": "popover-content",
1235
+ align,
1236
+ sideOffset,
1237
+ className: cn(
1238
+ "t-dropdown z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg border border-[var(--border-1)] bg-[var(--background-fronted)] p-3 text-sm text-popover-foreground shadow-soft outline-hidden",
1239
+ className
1240
+ ),
1241
+ style: { zIndex: "var(--z-popover)" },
1242
+ ...props
1243
+ }
1244
+ ) });
1245
+ }
1246
+ function PopoverAnchor({
1247
+ ...props
1248
+ }) {
1249
+ return /* @__PURE__ */ jsx11(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
1250
+ }
1251
+
1252
+ // src/components/resizable.tsx
1253
+ import * as ResizablePrimitive from "react-resizable-panels";
1254
+ import { jsx as jsx12 } from "react/jsx-runtime";
1255
+ function ResizablePanelGroup({
1256
+ className,
1257
+ orientation = "horizontal",
1258
+ ...props
1259
+ }) {
1260
+ return /* @__PURE__ */ jsx12(
1261
+ ResizablePrimitive.Group,
1262
+ {
1263
+ "data-orientation": orientation,
1264
+ "data-slot": "resizable-panel-group",
1265
+ className: cn(
1266
+ "flex h-full w-full data-[orientation=vertical]:flex-col",
1267
+ className
1268
+ ),
1269
+ ...props,
1270
+ orientation
1271
+ }
1272
+ );
1273
+ }
1274
+ function ResizablePanel(props) {
1275
+ return /* @__PURE__ */ jsx12(ResizablePrimitive.Panel, { "data-slot": "resizable-panel", ...props });
1276
+ }
1277
+ function ResizableHandle({
1278
+ className,
1279
+ withHandle,
1280
+ ...props
1281
+ }) {
1282
+ return /* @__PURE__ */ jsx12(
1283
+ ResizablePrimitive.Separator,
1284
+ {
1285
+ "data-slot": "resizable-handle",
1286
+ className: cn(
1287
+ "group relative flex items-center justify-center bg-transparent outline-none after:absolute after:bg-border/70 after:transition-colors hover:after:bg-border focus-visible:after:bg-ring aria-[orientation=horizontal]:h-2 aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:cursor-row-resize aria-[orientation=horizontal]:after:inset-x-0 aria-[orientation=horizontal]:after:top-1/2 aria-[orientation=horizontal]:after:h-px aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=vertical]:h-full aria-[orientation=vertical]:w-2 aria-[orientation=vertical]:cursor-col-resize aria-[orientation=vertical]:after:inset-y-0 aria-[orientation=vertical]:after:left-1/2 aria-[orientation=vertical]:after:w-px aria-[orientation=vertical]:after:-translate-x-1/2",
1288
+ className
1289
+ ),
1290
+ ...props,
1291
+ children: withHandle ? /* @__PURE__ */ jsx12("div", { className: "z-10 flex items-center justify-center rounded-full bg-border/85 transition-colors group-hover:bg-border group-aria-[orientation=horizontal]:h-[3px] group-aria-[orientation=horizontal]:w-10 group-aria-[orientation=vertical]:h-10 group-aria-[orientation=vertical]:w-[3px]" }) : null
1292
+ }
1293
+ );
1294
+ }
1295
+
1296
+ // src/components/scroll-area.tsx
1297
+ import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
1298
+ import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
1299
+ function ScrollArea({
1300
+ className,
1301
+ children,
1302
+ ...props
1303
+ }) {
1304
+ return /* @__PURE__ */ jsxs5(
1305
+ ScrollAreaPrimitive.Root,
1306
+ {
1307
+ "data-slot": "scroll-area",
1308
+ className: cn("group/scroll-area relative", className),
1309
+ ...props,
1310
+ children: [
1311
+ /* @__PURE__ */ jsx13(
1312
+ ScrollAreaPrimitive.Viewport,
1313
+ {
1314
+ "data-slot": "scroll-area-viewport",
1315
+ className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
1316
+ children
1317
+ }
1318
+ ),
1319
+ /* @__PURE__ */ jsx13(ScrollBar, {}),
1320
+ /* @__PURE__ */ jsx13(ScrollAreaPrimitive.Corner, {})
1321
+ ]
1322
+ }
1323
+ );
1324
+ }
1325
+ function ScrollBar({
1326
+ className,
1327
+ orientation = "vertical",
1328
+ ...props
1329
+ }) {
1330
+ return /* @__PURE__ */ jsx13(
1331
+ ScrollAreaPrimitive.ScrollAreaScrollbar,
1332
+ {
1333
+ "data-slot": "scroll-area-scrollbar",
1334
+ "data-orientation": orientation,
1335
+ orientation,
1336
+ className: cn(
1337
+ "group/scrollbar absolute flex touch-none p-0 opacity-0 transition-opacity duration-150 select-none group-hover/scroll-area:opacity-100 group-focus-within/scroll-area:opacity-100 data-horizontal:right-2 data-horizontal:bottom-2 data-horizontal:left-2 data-horizontal:h-1 data-horizontal:flex-col data-vertical:top-2 data-vertical:right-2 data-vertical:bottom-2 data-vertical:w-1",
1338
+ className
1339
+ ),
1340
+ ...props,
1341
+ children: /* @__PURE__ */ jsx13(
1342
+ ScrollAreaPrimitive.ScrollAreaThumb,
1343
+ {
1344
+ "data-slot": "scroll-area-thumb",
1345
+ className: "relative flex-1 rounded-full bg-[var(--transparency-block)] transition-colors duration-150 group-hover/scrollbar:bg-[var(--transparency-hover)]"
1346
+ }
1347
+ )
1348
+ }
1349
+ );
1350
+ }
1351
+
1352
+ // src/components/select.tsx
1353
+ import { Select as SelectPrimitive } from "radix-ui";
1354
+ import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
1355
+ function Select({
1356
+ ...props
1357
+ }) {
1358
+ return /* @__PURE__ */ jsx14(SelectPrimitive.Root, { "data-slot": "select", ...props });
1359
+ }
1360
+ function SelectGroup({
1361
+ className,
1362
+ ...props
1363
+ }) {
1364
+ return /* @__PURE__ */ jsx14(
1365
+ SelectPrimitive.Group,
1366
+ {
1367
+ "data-slot": "select-group",
1368
+ className: cn("flex flex-col gap-0.5 scroll-my-1 p-1", className),
1369
+ ...props
1370
+ }
1371
+ );
1372
+ }
1373
+ function SelectValue({
1374
+ ...props
1375
+ }) {
1376
+ return /* @__PURE__ */ jsx14(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
1377
+ }
1378
+ function SelectTrigger({
1379
+ className,
1380
+ size = "default",
1381
+ children,
1382
+ ...props
1383
+ }) {
1384
+ return /* @__PURE__ */ jsxs6(
1385
+ SelectPrimitive.Trigger,
1386
+ {
1387
+ "data-slot": "select-trigger",
1388
+ "data-size": size,
1389
+ className: cn(
1390
+ "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-transparent bg-[var(--transparency-block)] py-2 pr-2 pl-2.5 text-sm text-[var(--text-primary)] whitespace-nowrap transition-colors outline-none select-none hover:bg-[var(--transparency-hover)] focus:bg-[var(--transparency-hover)] focus-visible:border-transparent focus-visible:bg-[var(--transparency-hover)] focus-visible:ring-0 disabled:cursor-not-allowed disabled:bg-[var(--transparency-block)] disabled:text-[var(--text-disabled)] disabled:opacity-100 aria-invalid:border-[var(--state-danger)] aria-invalid:bg-[var(--transparency-block)] aria-invalid:hover:bg-[var(--transparency-hover)] aria-invalid:focus:bg-[var(--transparency-hover)] aria-invalid:focus-visible:bg-[var(--transparency-hover)] aria-invalid:ring-0 aria-invalid:shadow-none data-placeholder:text-[var(--text-placeholder)] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&[data-state=open]>svg]:rotate-180 [&>svg]:transition-transform [&>svg]:duration-200 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
1391
+ className
1392
+ ),
1393
+ ...props,
1394
+ children: [
1395
+ children,
1396
+ /* @__PURE__ */ jsx14(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx14(ChevronDownIcon, { className: "pointer-events-none size-4 text-[var(--text-secondary)]" }) })
1397
+ ]
1398
+ }
1399
+ );
1400
+ }
1401
+ function SelectContent({
1402
+ className,
1403
+ children,
1404
+ position = "popper",
1405
+ align = "center",
1406
+ style,
1407
+ ...props
1408
+ }) {
1409
+ return /* @__PURE__ */ jsx14(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx14(
1410
+ SelectPrimitive.Content,
1411
+ {
1412
+ asChild: true,
1413
+ "data-slot": "select-content",
1414
+ "data-align-trigger": position === "item-aligned",
1415
+ position,
1416
+ align,
1417
+ ...props,
1418
+ children: /* @__PURE__ */ jsxs6(
1419
+ MenuSurface,
1420
+ {
1421
+ "data-slot": "select-content",
1422
+ className: cn(
1423
+ "relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto",
1424
+ position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
1425
+ className
1426
+ ),
1427
+ style: { zIndex: "var(--z-popover)", ...style },
1428
+ children: [
1429
+ /* @__PURE__ */ jsx14(SelectScrollUpButton, {}),
1430
+ /* @__PURE__ */ jsx14(
1431
+ SelectPrimitive.Viewport,
1432
+ {
1433
+ "data-position": position,
1434
+ className: cn(
1435
+ "flex flex-col gap-0.5 data-[position=popper]:w-full data-[position=popper]:[min-width:var(--nextop-select-content-min-width,var(--radix-select-trigger-width))]"
1436
+ ),
1437
+ children
1438
+ }
1439
+ ),
1440
+ /* @__PURE__ */ jsx14(SelectScrollDownButton, {})
1441
+ ]
1442
+ }
1443
+ )
1444
+ }
1445
+ ) });
1446
+ }
1447
+ function SelectLabel({
1448
+ className,
1449
+ ...props
1450
+ }) {
1451
+ return /* @__PURE__ */ jsx14(
1452
+ SelectPrimitive.Label,
1453
+ {
1454
+ "data-slot": "select-label",
1455
+ className: cn(
1456
+ "px-1.5 py-1 text-xs font-normal text-[var(--text-secondary)]",
1457
+ className
1458
+ ),
1459
+ ...props
1460
+ }
1461
+ );
1462
+ }
1463
+ function SelectSplitLayout({
1464
+ className,
1465
+ ...props
1466
+ }) {
1467
+ return /* @__PURE__ */ jsx14(
1468
+ "div",
1469
+ {
1470
+ "data-slot": "select-split-layout",
1471
+ className: cn(
1472
+ "grid h-full min-h-0 grid-cols-[minmax(0,1fr)_1px_minmax(104px,132px)] gap-1 overflow-hidden",
1473
+ className
1474
+ ),
1475
+ ...props
1476
+ }
1477
+ );
1478
+ }
1479
+ function SelectSplitColumn({
1480
+ className,
1481
+ ...props
1482
+ }) {
1483
+ return /* @__PURE__ */ jsx14(
1484
+ "div",
1485
+ {
1486
+ "data-slot": "select-split-column",
1487
+ className: cn("flex h-full min-h-0 min-w-0 flex-col", className),
1488
+ ...props
1489
+ }
1490
+ );
1491
+ }
1492
+ function SelectSplitColumnLabel({
1493
+ className,
1494
+ ...props
1495
+ }) {
1496
+ return /* @__PURE__ */ jsx14(
1497
+ "div",
1498
+ {
1499
+ "data-slot": "select-split-column-label",
1500
+ className: cn(
1501
+ "shrink-0 px-2 pt-1 pb-2 text-xs font-normal leading-[18px] text-[var(--text-secondary)]",
1502
+ className
1503
+ ),
1504
+ ...props
1505
+ }
1506
+ );
1507
+ }
1508
+ function SelectSplitColumnItems({
1509
+ className,
1510
+ ...props
1511
+ }) {
1512
+ return /* @__PURE__ */ jsx14(
1513
+ "div",
1514
+ {
1515
+ "data-slot": "select-split-column-items",
1516
+ className: cn(
1517
+ "flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto overscroll-contain",
1518
+ className
1519
+ ),
1520
+ ...props
1521
+ }
1522
+ );
1523
+ }
1524
+ function SelectSplitDivider({
1525
+ className,
1526
+ ...props
1527
+ }) {
1528
+ return /* @__PURE__ */ jsx14(
1529
+ "div",
1530
+ {
1531
+ "aria-hidden": "true",
1532
+ "data-slot": "select-split-divider",
1533
+ className: cn(
1534
+ "self-stretch bg-[var(--border-2,var(--border-1))]",
1535
+ className
1536
+ ),
1537
+ ...props
1538
+ }
1539
+ );
1540
+ }
1541
+ function SelectItem({
1542
+ className,
1543
+ children,
1544
+ ...props
1545
+ }) {
1546
+ return /* @__PURE__ */ jsxs6(
1547
+ SelectPrimitive.Item,
1548
+ {
1549
+ "data-slot": "select-item",
1550
+ className: cn("w-full", menuItemWithIndicatorClassName, className),
1551
+ ...props,
1552
+ children: [
1553
+ /* @__PURE__ */ jsx14("span", { className: menuItemIndicatorClassName, children: /* @__PURE__ */ jsx14(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx14(CheckIcon, { className: "pointer-events-none" }) }) }),
1554
+ /* @__PURE__ */ jsx14(SelectPrimitive.ItemText, { children })
1555
+ ]
1556
+ }
1557
+ );
1558
+ }
1559
+ function SelectSeparator({
1560
+ className,
1561
+ ...props
1562
+ }) {
1563
+ return /* @__PURE__ */ jsx14(
1564
+ SelectPrimitive.Separator,
1565
+ {
1566
+ "data-slot": "select-separator",
1567
+ className: cn(
1568
+ "pointer-events-none mx-2 my-0.5 h-px bg-[var(--border-1)]",
1569
+ className
1570
+ ),
1571
+ ...props
1572
+ }
1573
+ );
1574
+ }
1575
+ function SelectScrollUpButton({
1576
+ className,
1577
+ ...props
1578
+ }) {
1579
+ return /* @__PURE__ */ jsx14(
1580
+ SelectPrimitive.ScrollUpButton,
1581
+ {
1582
+ "data-slot": "select-scroll-up-button",
1583
+ className: cn(
1584
+ "z-10 flex cursor-default items-center justify-center bg-[var(--background-fronted)] py-1 [&_svg:not([class*='size-'])]:size-4",
1585
+ className
1586
+ ),
1587
+ ...props,
1588
+ children: /* @__PURE__ */ jsx14(ChevronUpIcon, {})
1589
+ }
1590
+ );
1591
+ }
1592
+ function SelectScrollDownButton({
1593
+ className,
1594
+ ...props
1595
+ }) {
1596
+ return /* @__PURE__ */ jsx14(
1597
+ SelectPrimitive.ScrollDownButton,
1598
+ {
1599
+ "data-slot": "select-scroll-down-button",
1600
+ className: cn(
1601
+ "z-10 flex cursor-default items-center justify-center bg-[var(--background-fronted)] py-1 [&_svg:not([class*='size-'])]:size-4",
1602
+ className
1603
+ ),
1604
+ ...props,
1605
+ children: /* @__PURE__ */ jsx14(ChevronDownIcon, {})
1606
+ }
1607
+ );
1608
+ }
1609
+
1610
+ // src/components/separator.tsx
1611
+ import { Separator as SeparatorPrimitive } from "radix-ui";
1612
+ import { jsx as jsx15 } from "react/jsx-runtime";
1613
+ function Separator2({
1614
+ className,
1615
+ orientation = "horizontal",
1616
+ decorative = true,
1617
+ ...props
1618
+ }) {
1619
+ return /* @__PURE__ */ jsx15(
1620
+ SeparatorPrimitive.Root,
1621
+ {
1622
+ "data-slot": "separator",
1623
+ decorative,
1624
+ orientation,
1625
+ className: cn(
1626
+ "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
1627
+ className
1628
+ ),
1629
+ ...props
1630
+ }
1631
+ );
1632
+ }
1633
+
1634
+ // src/components/spinner.tsx
1635
+ import { jsx as jsx16 } from "react/jsx-runtime";
1636
+ function Spinner({
1637
+ className,
1638
+ size = 16,
1639
+ strokeWidth = 3,
1640
+ style,
1641
+ testId,
1642
+ trackColor
1643
+ }) {
1644
+ return /* @__PURE__ */ jsx16(
1645
+ LoadingIcon,
1646
+ {
1647
+ "data-slot": "spinner",
1648
+ "data-testid": testId,
1649
+ "aria-hidden": "true",
1650
+ className: cn(
1651
+ "inline-block shrink-0 animate-spin text-primary",
1652
+ className
1653
+ ),
1654
+ size,
1655
+ style,
1656
+ strokeWidth,
1657
+ trackColor
1658
+ }
1659
+ );
1660
+ }
1661
+
1662
+ // src/components/status-dot.tsx
1663
+ import { cva as cva3 } from "class-variance-authority";
1664
+ import { jsx as jsx17 } from "react/jsx-runtime";
1665
+ var statusDotVariants = cva3("inline-flex shrink-0 rounded-full", {
1666
+ variants: {
1667
+ tone: {
1668
+ neutral: "bg-muted-foreground/70",
1669
+ green: "bg-emerald-500",
1670
+ blue: "bg-sky-500",
1671
+ amber: "bg-amber-500",
1672
+ red: "bg-destructive"
1673
+ },
1674
+ size: {
1675
+ xs: "size-1.5",
1676
+ sm: "size-2",
1677
+ md: "size-2.5"
1678
+ },
1679
+ pulse: {
1680
+ true: "animate-pulse",
1681
+ false: ""
1682
+ }
1683
+ },
1684
+ defaultVariants: {
1685
+ tone: "neutral",
1686
+ size: "sm",
1687
+ pulse: false
1688
+ }
1689
+ });
1690
+ function StatusDot({
1691
+ tone = "neutral",
1692
+ size = "sm",
1693
+ pulse = false,
1694
+ ariaLabel,
1695
+ title,
1696
+ className
1697
+ }) {
1698
+ return /* @__PURE__ */ jsx17(
1699
+ "span",
1700
+ {
1701
+ "aria-hidden": ariaLabel ? void 0 : true,
1702
+ "aria-label": ariaLabel,
1703
+ className: cn(statusDotVariants({ tone, size, pulse }), className),
1704
+ "data-pulse": pulse ? "true" : void 0,
1705
+ "data-size": size,
1706
+ "data-slot": "status-dot",
1707
+ "data-tone": tone,
1708
+ role: ariaLabel ? "img" : void 0,
1709
+ title
1710
+ }
1711
+ );
1712
+ }
1713
+
1714
+ // src/components/switch.tsx
1715
+ import { Switch as SwitchPrimitive } from "radix-ui";
1716
+ import { jsx as jsx18 } from "react/jsx-runtime";
1717
+ function Switch({
1718
+ className,
1719
+ size = "default",
1720
+ ...props
1721
+ }) {
1722
+ return /* @__PURE__ */ jsx18(
1723
+ SwitchPrimitive.Root,
1724
+ {
1725
+ "data-slot": "switch",
1726
+ "data-size": size,
1727
+ className: cn(
1728
+ "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-[background-color,border-color,box-shadow] outline-none focus-visible:border-border focus-visible:ring-2 focus-visible:ring-ring/30 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-[size=default]:h-[18px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-100",
1729
+ className
1730
+ ),
1731
+ ...props,
1732
+ children: /* @__PURE__ */ jsx18(
1733
+ SwitchPrimitive.Thumb,
1734
+ {
1735
+ "data-slot": "switch-thumb",
1736
+ className: "pointer-events-none block rounded-full bg-[var(--white-stationary)] ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-[state=checked]:translate-x-[14px] group-data-[size=sm]/switch:data-[state=checked]:translate-x-[10px] group-data-[size=default]/switch:data-[state=unchecked]:translate-x-[1px] group-data-[size=sm]/switch:data-[state=unchecked]:translate-x-[1px]"
1737
+ }
1738
+ )
1739
+ }
1740
+ );
1741
+ }
1742
+
1743
+ // src/components/textarea.tsx
1744
+ import { jsx as jsx19 } from "react/jsx-runtime";
1745
+ function Textarea({ className, ...props }) {
1746
+ return /* @__PURE__ */ jsx19(
1747
+ "textarea",
1748
+ {
1749
+ "data-slot": "textarea",
1750
+ className: cn(
1751
+ "flex field-sizing-content min-h-20 w-full rounded-[6px] border border-transparent bg-[var(--transparency-block)] px-3 py-3 text-sm font-normal leading-[1.3] text-[var(--text-primary)] transition-[background-color,border-color,color] outline-none shadow-none placeholder:text-[var(--text-placeholder)] hover:bg-[var(--transparency-hover)] focus:bg-[var(--transparency-hover)] focus-visible:border-transparent focus-visible:bg-[var(--transparency-hover)] focus-visible:ring-0 disabled:cursor-not-allowed disabled:bg-[var(--transparency-block)] disabled:text-[var(--text-disabled)] disabled:opacity-100 aria-invalid:border-[var(--state-danger)] aria-invalid:bg-[var(--transparency-block)] aria-invalid:hover:bg-[var(--transparency-hover)] aria-invalid:focus:bg-[var(--transparency-hover)] aria-invalid:focus-visible:bg-[var(--transparency-hover)] aria-invalid:ring-0 aria-invalid:shadow-none",
1752
+ className
1753
+ ),
1754
+ ...props
1755
+ }
1756
+ );
1757
+ }
1758
+
1759
+ // src/components/toast.tsx
1760
+ import * as React4 from "react";
1761
+ import { Toast as ToastPrimitive } from "radix-ui";
1762
+ import { cva as cva4 } from "class-variance-authority";
1763
+ import { jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
1764
+ var ToastProvider = ToastPrimitive.Provider;
1765
+ var ToastVisualContext = React4.createContext(null);
1766
+ var toastStatusIconByVariant = {
1767
+ destructive: FailedFilledIcon,
1768
+ success: SuccessFilledIcon
1769
+ };
1770
+ function hasToastStatusIcon(variant) {
1771
+ return variant === "destructive" || variant === "success";
1772
+ }
1773
+ function stripToastTrailingSentencePunctuation(value) {
1774
+ let nextValue = value.replace(/\s+$/u, "");
1775
+ while (nextValue.length > 0) {
1776
+ const last = nextValue.at(-1);
1777
+ if (last === "." || last === "\u3002" || last === "\uFF0E") {
1778
+ nextValue = nextValue.slice(0, -1).replace(/\s+$/u, "");
1779
+ } else {
1780
+ break;
1781
+ }
1782
+ }
1783
+ return nextValue;
1784
+ }
1785
+ function formatToastText(children) {
1786
+ if (typeof children === "string") {
1787
+ return stripToastTrailingSentencePunctuation(children);
1788
+ }
1789
+ const flatChildren = React4.Children.toArray(children);
1790
+ if (flatChildren.length === 1 && typeof flatChildren[0] === "string") {
1791
+ return stripToastTrailingSentencePunctuation(flatChildren[0]);
1792
+ }
1793
+ return children;
1794
+ }
1795
+ var toastVariants = cva4(
1796
+ "group pointer-events-auto relative flex min-h-8 min-w-0 max-w-[min(92vw,420px)] items-center justify-center rounded-[8px] px-3 py-1.5 text-center text-sm font-normal leading-normal shadow-none transition-all data-closed:fade-out-80 data-closed:slide-out-to-top-full data-open:slide-in-from-top-full data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none",
1797
+ {
1798
+ variants: {
1799
+ variant: {
1800
+ default: "border border-[var(--toast-neutral-border)] bg-[var(--toast-neutral-bg)] text-[var(--toast-neutral-fg)]",
1801
+ destructive: "border-0 bg-[var(--state-danger)] text-[var(--text-inverted)]",
1802
+ success: "border-0 bg-[var(--state-success)] text-[var(--text-inverted)]"
1803
+ }
1804
+ },
1805
+ defaultVariants: {
1806
+ variant: "default"
1807
+ }
1808
+ }
1809
+ );
1810
+ function ToastRoot({
1811
+ className,
1812
+ variant,
1813
+ busy = false,
1814
+ anchor = "viewport",
1815
+ nodeInsetTopPx = 16,
1816
+ children,
1817
+ style,
1818
+ ...props
1819
+ }) {
1820
+ const isDestructive = variant === "destructive";
1821
+ return /* @__PURE__ */ jsx20(
1822
+ ToastPrimitive.Root,
1823
+ {
1824
+ "aria-busy": busy,
1825
+ "aria-live": isDestructive ? "assertive" : "polite",
1826
+ "data-slot": "toast",
1827
+ className: cn(
1828
+ toastVariants({ variant }),
1829
+ anchor === "node" && "absolute left-1/2 -translate-x-1/2",
1830
+ className
1831
+ ),
1832
+ role: isDestructive ? "alert" : "status",
1833
+ style: {
1834
+ ...anchor === "node" ? { top: `${nodeInsetTopPx}px` } : {},
1835
+ ...style
1836
+ },
1837
+ ...props,
1838
+ children: /* @__PURE__ */ jsx20(ToastVisualContext.Provider, { value: { busy, variant }, children: /* @__PURE__ */ jsx20("span", { className: "flex min-w-0 max-w-full flex-col items-center justify-center whitespace-normal break-words text-center", children }) })
1839
+ }
1840
+ );
1841
+ }
1842
+ function ToastTitle({
1843
+ className,
1844
+ children,
1845
+ ...props
1846
+ }) {
1847
+ const toastVisual = React4.useContext(ToastVisualContext);
1848
+ const StatusIcon = toastVisual?.variant && hasToastStatusIcon(toastVisual.variant) ? toastStatusIconByVariant[toastVisual.variant] : null;
1849
+ return /* @__PURE__ */ jsxs7(
1850
+ ToastPrimitive.Title,
1851
+ {
1852
+ "data-slot": "toast-title",
1853
+ className: cn(
1854
+ "inline-flex max-w-full items-center justify-center gap-[6px] text-center text-sm font-normal leading-normal",
1855
+ className
1856
+ ),
1857
+ ...props,
1858
+ children: [
1859
+ toastVisual?.busy ? /* @__PURE__ */ jsx20(
1860
+ Spinner,
1861
+ {
1862
+ className: "shrink-0 text-current",
1863
+ size: 16,
1864
+ strokeWidth: 3,
1865
+ trackColor: "color-mix(in srgb, currentColor 28%, transparent)"
1866
+ }
1867
+ ) : StatusIcon ? /* @__PURE__ */ jsx20(StatusIcon, { className: "size-4 shrink-0 text-current" }) : null,
1868
+ /* @__PURE__ */ jsx20("span", { className: "min-w-0 break-words", children: formatToastText(children) })
1869
+ ]
1870
+ }
1871
+ );
1872
+ }
1873
+ function ToastDescription({
1874
+ className,
1875
+ ...props
1876
+ }) {
1877
+ return /* @__PURE__ */ jsx20(
1878
+ ToastPrimitive.Description,
1879
+ {
1880
+ "data-slot": "toast-description",
1881
+ className: cn(
1882
+ "text-xs font-normal leading-[1.3] text-current opacity-75",
1883
+ className
1884
+ ),
1885
+ ...props
1886
+ }
1887
+ );
1888
+ }
1889
+ function ToastClose({
1890
+ className,
1891
+ ...props
1892
+ }) {
1893
+ return /* @__PURE__ */ jsx20(
1894
+ ToastPrimitive.Close,
1895
+ {
1896
+ "data-slot": "toast-close",
1897
+ className: cn(
1898
+ "absolute right-1.5 top-1.5 inline-flex size-5 items-center justify-center rounded-[4px] text-current opacity-65 transition-[background-color,opacity] hover:bg-[color-mix(in_srgb,currentColor_10%,transparent)] hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,currentColor_28%,transparent)]",
1899
+ className
1900
+ ),
1901
+ ...props,
1902
+ children: /* @__PURE__ */ jsx20(CloseIcon, { className: "size-4" })
1903
+ }
1904
+ );
1905
+ }
1906
+ function ToastViewport({
1907
+ className,
1908
+ style,
1909
+ ...props
1910
+ }) {
1911
+ return /* @__PURE__ */ jsx20(
1912
+ ToastPrimitive.Viewport,
1913
+ {
1914
+ "data-slot": "toast-viewport",
1915
+ className: cn(
1916
+ "fixed left-1/2 top-3 flex max-h-screen w-auto -translate-x-1/2 flex-col items-center gap-2 p-0",
1917
+ className
1918
+ ),
1919
+ style: { zIndex: "var(--z-toast)", ...style },
1920
+ ...props
1921
+ }
1922
+ );
1923
+ }
1924
+
1925
+ // src/components/tooltip.tsx
1926
+ import { Tooltip as TooltipPrimitive } from "radix-ui";
1927
+ import { jsx as jsx21 } from "react/jsx-runtime";
1928
+ function TooltipProvider({
1929
+ delayDuration = 0,
1930
+ ...props
1931
+ }) {
1932
+ return /* @__PURE__ */ jsx21(
1933
+ TooltipPrimitive.Provider,
1934
+ {
1935
+ "data-slot": "tooltip-provider",
1936
+ delayDuration,
1937
+ ...props
1938
+ }
1939
+ );
1940
+ }
1941
+ function Tooltip({
1942
+ ...props
1943
+ }) {
1944
+ return /* @__PURE__ */ jsx21(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
1945
+ }
1946
+ function TooltipTrigger({
1947
+ ...props
1948
+ }) {
1949
+ return /* @__PURE__ */ jsx21(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
1950
+ }
1951
+ function TooltipPortal({
1952
+ ...props
1953
+ }) {
1954
+ return /* @__PURE__ */ jsx21(TooltipPrimitive.Portal, { "data-slot": "tooltip-portal", ...props });
1955
+ }
1956
+ function TooltipContent({
1957
+ className,
1958
+ sideOffset = 24,
1959
+ children,
1960
+ ...props
1961
+ }) {
1962
+ return /* @__PURE__ */ jsx21(TooltipPortal, { children: /* @__PURE__ */ jsx21(
1963
+ TooltipPrimitive.Content,
1964
+ {
1965
+ "data-slot": "tooltip-content",
1966
+ sideOffset,
1967
+ className: cn(
1968
+ "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-2 rounded-md border border-[var(--border-1)] bg-[var(--background-fronted)] px-2 py-1 text-sm leading-[1.3] text-popover-foreground shadow-soft outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
1969
+ className
1970
+ ),
1971
+ style: { zIndex: "var(--z-popover)" },
1972
+ ...props,
1973
+ children
1974
+ }
1975
+ ) });
1976
+ }
1977
+
1978
+ // src/components/underline-tabs.tsx
1979
+ import { useEffect as useEffect3, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState3 } from "react";
1980
+ import { jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
1981
+ function UnderlineTabs({
1982
+ tabs,
1983
+ value,
1984
+ onValueChange,
1985
+ ariaLabel,
1986
+ className,
1987
+ testId,
1988
+ viewportTestId,
1989
+ scrollLeftLabel = "Scroll left",
1990
+ scrollRightLabel = "Scroll right",
1991
+ scrollLeftTestId,
1992
+ scrollRightTestId,
1993
+ preventMouseDownDefault = false
1994
+ }) {
1995
+ const viewportRef = useRef2(null);
1996
+ const rowRef = useRef2(null);
1997
+ const buttonRefs = useRef2({});
1998
+ const [indicatorStyle, setIndicatorStyle] = useState3({ left: 0, width: 0 });
1999
+ const [overflow, setOverflow] = useState3({
2000
+ canScrollLeft: false,
2001
+ canScrollRight: false
2002
+ });
2003
+ useLayoutEffect2(() => {
2004
+ const row = rowRef.current;
2005
+ const button = buttonRefs.current[value];
2006
+ if (!row || !button) {
2007
+ setIndicatorStyle(
2008
+ (current) => current.left === 0 && current.width === 0 ? current : { left: 0, width: 0 }
2009
+ );
2010
+ return;
2011
+ }
2012
+ const nextStyle = {
2013
+ left: button.offsetLeft,
2014
+ width: button.offsetWidth
2015
+ };
2016
+ setIndicatorStyle(
2017
+ (current) => current.left === nextStyle.left && current.width === nextStyle.width ? current : nextStyle
2018
+ );
2019
+ }, [tabs, value]);
2020
+ useEffect3(() => {
2021
+ const viewport = viewportRef.current;
2022
+ if (!viewport) {
2023
+ return;
2024
+ }
2025
+ const syncOverflow = () => {
2026
+ const maxScrollLeft = viewport.scrollWidth - viewport.clientWidth;
2027
+ setOverflow((current) => {
2028
+ const next = {
2029
+ canScrollLeft: viewport.scrollLeft > 1,
2030
+ canScrollRight: viewport.scrollLeft < maxScrollLeft - 1
2031
+ };
2032
+ return current.canScrollLeft === next.canScrollLeft && current.canScrollRight === next.canScrollRight ? current : next;
2033
+ });
2034
+ };
2035
+ syncOverflow();
2036
+ viewport.addEventListener("scroll", syncOverflow, { passive: true });
2037
+ let resizeObserver = null;
2038
+ if (typeof ResizeObserver !== "undefined") {
2039
+ resizeObserver = new ResizeObserver(syncOverflow);
2040
+ resizeObserver.observe(viewport);
2041
+ if (rowRef.current) {
2042
+ resizeObserver.observe(rowRef.current);
2043
+ }
2044
+ }
2045
+ window.addEventListener("resize", syncOverflow);
2046
+ return () => {
2047
+ viewport.removeEventListener("scroll", syncOverflow);
2048
+ window.removeEventListener("resize", syncOverflow);
2049
+ resizeObserver?.disconnect();
2050
+ };
2051
+ }, [tabs]);
2052
+ const scrollTabs = (direction) => {
2053
+ const viewport = viewportRef.current;
2054
+ if (!viewport) {
2055
+ return;
2056
+ }
2057
+ const delta = Math.max(120, viewport.clientWidth * 0.72);
2058
+ viewport.scrollBy({
2059
+ left: direction === "left" ? -delta : delta,
2060
+ behavior: "smooth"
2061
+ });
2062
+ };
2063
+ return /* @__PURE__ */ jsxs8(
2064
+ "div",
2065
+ {
2066
+ "aria-label": ariaLabel,
2067
+ className: cn(
2068
+ "group relative box-border h-[33px] min-w-0 border-b border-[var(--border-1)] px-4",
2069
+ className
2070
+ ),
2071
+ "data-slot": "underline-tabs",
2072
+ "data-testid": testId,
2073
+ role: "tablist",
2074
+ children: [
2075
+ /* @__PURE__ */ jsx22(
2076
+ "div",
2077
+ {
2078
+ ref: viewportRef,
2079
+ className: cn(
2080
+ "h-8 overflow-x-auto overflow-y-hidden [scrollbar-gutter:stable] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
2081
+ overflow.canScrollLeft && !overflow.canScrollRight && "[mask-image:linear-gradient(90deg,transparent_0,black_28px,black_100%)] [-webkit-mask-image:linear-gradient(90deg,transparent_0,black_28px,black_100%)]",
2082
+ !overflow.canScrollLeft && overflow.canScrollRight && "[mask-image:linear-gradient(90deg,black_0,black_calc(100%_-_28px),transparent_100%)] [-webkit-mask-image:linear-gradient(90deg,black_0,black_calc(100%_-_28px),transparent_100%)]",
2083
+ overflow.canScrollLeft && overflow.canScrollRight && "[mask-image:linear-gradient(90deg,transparent_0,black_28px,black_calc(100%_-_28px),transparent_100%)] [-webkit-mask-image:linear-gradient(90deg,transparent_0,black_28px,black_calc(100%_-_28px),transparent_100%)]"
2084
+ ),
2085
+ "data-can-scroll-left": overflow.canScrollLeft ? "true" : "false",
2086
+ "data-can-scroll-right": overflow.canScrollRight ? "true" : "false",
2087
+ "data-slot": "underline-tabs-viewport",
2088
+ "data-testid": viewportTestId,
2089
+ children: /* @__PURE__ */ jsxs8(
2090
+ "div",
2091
+ {
2092
+ ref: rowRef,
2093
+ className: "relative flex h-8 w-max min-w-full items-center gap-[14px] pb-2",
2094
+ children: [
2095
+ tabs.map((tab) => {
2096
+ const isActive = value === tab.value;
2097
+ return /* @__PURE__ */ jsxs8(
2098
+ "button",
2099
+ {
2100
+ ref: (element) => {
2101
+ if (element) {
2102
+ buttonRefs.current[tab.value] = element;
2103
+ } else {
2104
+ delete buttonRefs.current[tab.value];
2105
+ }
2106
+ },
2107
+ "aria-selected": isActive,
2108
+ className: cn(
2109
+ "relative inline-flex h-6 shrink-0 items-center gap-1.5 whitespace-nowrap border-0 bg-transparent p-0 text-[13px] font-semibold leading-6 text-[var(--text-secondary)] transition-colors hover:text-[var(--text-primary)] focus-visible:outline-none",
2110
+ isActive && "text-primary"
2111
+ ),
2112
+ "data-active": isActive ? "true" : "false",
2113
+ "data-slot": "underline-tabs-tab",
2114
+ "data-testid": tab.testId,
2115
+ role: "tab",
2116
+ type: "button",
2117
+ onClick: () => onValueChange(tab.value),
2118
+ onMouseDown: preventMouseDownDefault ? (event) => event.preventDefault() : void 0,
2119
+ children: [
2120
+ /* @__PURE__ */ jsx22("span", { children: tab.label }),
2121
+ tab.count !== void 0 ? /* @__PURE__ */ jsx22("span", { className: "text-xs font-semibold leading-6 text-[inherit] opacity-[0.58]", children: tab.count }) : null
2122
+ ]
2123
+ },
2124
+ tab.value
2125
+ );
2126
+ }),
2127
+ /* @__PURE__ */ jsx22(
2128
+ "div",
2129
+ {
2130
+ "aria-hidden": true,
2131
+ className: "absolute bottom-0 left-0 z-[1] h-0.5 rounded-[1px] bg-primary transition-[transform,width] duration-[220ms] ease-[cubic-bezier(0.4,0,0.2,1)] motion-reduce:transition-none",
2132
+ "data-slot": "underline-tabs-indicator",
2133
+ style: {
2134
+ transform: `translateX(${indicatorStyle.left}px)`,
2135
+ width: indicatorStyle.width
2136
+ }
2137
+ }
2138
+ )
2139
+ ]
2140
+ }
2141
+ )
2142
+ }
2143
+ ),
2144
+ /* @__PURE__ */ jsx22(
2145
+ "button",
2146
+ {
2147
+ "aria-label": scrollLeftLabel,
2148
+ className: "pointer-events-none absolute left-4 top-3 z-[3] inline-flex size-6 translate-y-[-50%] scale-[0.94] items-center justify-center rounded-full border-0 bg-[var(--background-fronted)] p-0 text-[var(--text-secondary)] opacity-0 shadow-[0_4px_16px_rgba(15,23,42,0.12)] transition-[opacity,transform,background-color,color] duration-[160ms] ease-in-out hover:bg-[var(--background-fronted)] hover:text-[var(--text-primary)] focus-visible:bg-[var(--background-fronted)] focus-visible:text-[var(--text-primary)] group-hover:data-[visible=true]:pointer-events-auto group-hover:data-[visible=true]:scale-100 group-hover:data-[visible=true]:opacity-100 group-focus-within:data-[visible=true]:pointer-events-auto group-focus-within:data-[visible=true]:scale-100 group-focus-within:data-[visible=true]:opacity-100 disabled:pointer-events-none",
2149
+ "data-slot": "underline-tabs-scroll-left",
2150
+ "data-testid": scrollLeftTestId,
2151
+ "data-visible": overflow.canScrollLeft ? "true" : "false",
2152
+ disabled: !overflow.canScrollLeft,
2153
+ type: "button",
2154
+ onClick: () => scrollTabs("left"),
2155
+ children: /* @__PURE__ */ jsx22(ArrowLeftIcon, { size: 16 })
2156
+ }
2157
+ ),
2158
+ /* @__PURE__ */ jsx22(
2159
+ "button",
2160
+ {
2161
+ "aria-label": scrollRightLabel,
2162
+ className: "pointer-events-none absolute right-4 top-3 z-[3] inline-flex size-6 translate-y-[-50%] scale-[0.94] items-center justify-center rounded-full border-0 bg-[var(--background-fronted)] p-0 text-[var(--text-secondary)] opacity-0 shadow-[0_4px_16px_rgba(15,23,42,0.12)] transition-[opacity,transform,background-color,color] duration-[160ms] ease-in-out hover:bg-[var(--background-fronted)] hover:text-[var(--text-primary)] focus-visible:bg-[var(--background-fronted)] focus-visible:text-[var(--text-primary)] group-hover:data-[visible=true]:pointer-events-auto group-hover:data-[visible=true]:scale-100 group-hover:data-[visible=true]:opacity-100 group-focus-within:data-[visible=true]:pointer-events-auto group-focus-within:data-[visible=true]:scale-100 group-focus-within:data-[visible=true]:opacity-100 disabled:pointer-events-none",
2163
+ "data-slot": "underline-tabs-scroll-right",
2164
+ "data-testid": scrollRightTestId,
2165
+ "data-visible": overflow.canScrollRight ? "true" : "false",
2166
+ disabled: !overflow.canScrollRight,
2167
+ type: "button",
2168
+ onClick: () => scrollTabs("right"),
2169
+ children: /* @__PURE__ */ jsx22(ArrowRightIcon, { size: 16 })
2170
+ }
2171
+ )
2172
+ ]
2173
+ }
2174
+ );
2175
+ }
2176
+
2177
+ // src/components/viewport-menu-surface.tsx
2178
+ import * as React5 from "react";
2179
+ import { createPortal as createPortal2 } from "react-dom";
2180
+ import { jsx as jsx23 } from "react/jsx-runtime";
2181
+ var VIEWPORT_MENU_PADDING = 12;
2182
+ var MENU_BOUNDARY_PADDING = 8;
2183
+ function clampMenuCoordinate(origin, size, viewportExtent, padding) {
2184
+ return Math.max(
2185
+ padding,
2186
+ Math.min(origin, Math.max(padding, viewportExtent - padding - size))
2187
+ );
2188
+ }
2189
+ function resolveAlignedCoordinate(options) {
2190
+ const { origin, size, viewportExtent, padding, alignment } = options;
2191
+ const startCoordinate = origin;
2192
+ const endCoordinate = origin - size;
2193
+ if (alignment === "start") {
2194
+ return clampMenuCoordinate(startCoordinate, size, viewportExtent, padding);
2195
+ }
2196
+ if (alignment === "end") {
2197
+ return clampMenuCoordinate(endCoordinate, size, viewportExtent, padding);
2198
+ }
2199
+ const startFits = startCoordinate + size <= viewportExtent - padding;
2200
+ const endFits = endCoordinate >= padding;
2201
+ if (startFits || !endFits) {
2202
+ return clampMenuCoordinate(startCoordinate, size, viewportExtent, padding);
2203
+ }
2204
+ return clampMenuCoordinate(endCoordinate, size, viewportExtent, padding);
2205
+ }
2206
+ function placeViewportMenuAtPoint(options) {
2207
+ const padding = options.padding ?? VIEWPORT_MENU_PADDING;
2208
+ return {
2209
+ left: resolveAlignedCoordinate({
2210
+ origin: options.point.x,
2211
+ size: options.menuSize.width,
2212
+ viewportExtent: options.viewport.width,
2213
+ padding,
2214
+ alignment: options.alignX ?? "start"
2215
+ }),
2216
+ top: resolveAlignedCoordinate({
2217
+ origin: options.point.y,
2218
+ size: options.menuSize.height,
2219
+ viewportExtent: options.viewport.height,
2220
+ padding,
2221
+ alignment: options.alignY ?? "start"
2222
+ })
2223
+ };
2224
+ }
2225
+ function viewportBoundary() {
2226
+ return {
2227
+ left: 0,
2228
+ top: 0,
2229
+ width: typeof window === "undefined" ? 1280 : window.innerWidth,
2230
+ height: typeof window === "undefined" ? 720 : window.innerHeight
2231
+ };
2232
+ }
2233
+ function rectToBoundary(rect) {
2234
+ return {
2235
+ left: rect.left,
2236
+ top: rect.top,
2237
+ width: rect.width,
2238
+ height: rect.height
2239
+ };
2240
+ }
2241
+ function resolveMenuBoundaryFromPoint(point) {
2242
+ if (typeof document === "undefined" || !document.elementsFromPoint) {
2243
+ return viewportBoundary();
2244
+ }
2245
+ const selector = '[data-slot="viewport-menu-boundary"]';
2246
+ for (const element of document.elementsFromPoint(point.x, point.y)) {
2247
+ const boundaryElement = element.closest(selector);
2248
+ if (boundaryElement) {
2249
+ return rectToBoundary(boundaryElement.getBoundingClientRect());
2250
+ }
2251
+ }
2252
+ return viewportBoundary();
2253
+ }
2254
+ function clampMenuPositionToBoundary(options) {
2255
+ const padding = options.padding ?? MENU_BOUNDARY_PADDING;
2256
+ const minLeft = options.boundary.left + padding;
2257
+ const minTop = options.boundary.top + padding;
2258
+ const maxLeft = Math.max(
2259
+ minLeft,
2260
+ options.boundary.left + options.boundary.width - padding - options.width
2261
+ );
2262
+ const maxTop = Math.max(
2263
+ minTop,
2264
+ options.boundary.top + options.boundary.height - padding - options.height
2265
+ );
2266
+ return {
2267
+ left: Math.max(minLeft, Math.min(options.left, maxLeft)),
2268
+ top: Math.max(minTop, Math.min(options.top, maxTop))
2269
+ };
2270
+ }
2271
+ function assignRef(ref, value) {
2272
+ if (typeof ref === "function") {
2273
+ ref(value);
2274
+ return;
2275
+ }
2276
+ if (ref) {
2277
+ ref.current = value;
2278
+ }
2279
+ }
2280
+ function callHandler(handler, event) {
2281
+ handler?.(event);
2282
+ }
2283
+ var ViewportMenuSurface = React5.forwardRef(function ViewportMenuSurface2({
2284
+ open,
2285
+ placement,
2286
+ children,
2287
+ onDismiss,
2288
+ dismissOnPointerDownOutside = false,
2289
+ dismissOnEscape = false,
2290
+ dismissOnScroll = false,
2291
+ dismissIgnoreRefs = [],
2292
+ stopEventPropagation = true,
2293
+ style,
2294
+ onMouseDown,
2295
+ onClick,
2296
+ className,
2297
+ ...rest
2298
+ }, forwardedRef) {
2299
+ const surfaceRef = React5.useRef(null);
2300
+ const [measuredSize, setMeasuredSize] = React5.useState(null);
2301
+ const setRefs = React5.useCallback(
2302
+ (node) => {
2303
+ surfaceRef.current = node;
2304
+ assignRef(forwardedRef, node);
2305
+ },
2306
+ [forwardedRef]
2307
+ );
2308
+ React5.useLayoutEffect(() => {
2309
+ if (!open) {
2310
+ setMeasuredSize(null);
2311
+ return;
2312
+ }
2313
+ const element = surfaceRef.current;
2314
+ if (!element) {
2315
+ setMeasuredSize(null);
2316
+ return;
2317
+ }
2318
+ const updateMeasuredSize = () => {
2319
+ const rect = element.getBoundingClientRect();
2320
+ setMeasuredSize(
2321
+ (previous) => previous && Math.abs(previous.width - rect.width) < 0.5 && Math.abs(previous.height - rect.height) < 0.5 ? previous : { width: rect.width, height: rect.height }
2322
+ );
2323
+ };
2324
+ updateMeasuredSize();
2325
+ if (typeof ResizeObserver === "undefined") {
2326
+ return;
2327
+ }
2328
+ const observer = new ResizeObserver(updateMeasuredSize);
2329
+ observer.observe(element);
2330
+ return () => observer.disconnect();
2331
+ }, [open, placement]);
2332
+ React5.useEffect(() => {
2333
+ if (!open) {
2334
+ return;
2335
+ }
2336
+ if (!onDismiss || !dismissOnPointerDownOutside && !dismissOnEscape && !dismissOnScroll) {
2337
+ return;
2338
+ }
2339
+ const shouldIgnoreTarget = (target) => {
2340
+ if (!(target instanceof Node)) {
2341
+ return false;
2342
+ }
2343
+ if (surfaceRef.current?.contains(target)) {
2344
+ return true;
2345
+ }
2346
+ return dismissIgnoreRefs.some(
2347
+ (ref) => ref.current?.contains(target) ?? false
2348
+ );
2349
+ };
2350
+ const handlePointerDown = (event) => {
2351
+ if (!dismissOnPointerDownOutside) {
2352
+ return;
2353
+ }
2354
+ if (shouldIgnoreTarget(event.target)) {
2355
+ return;
2356
+ }
2357
+ onDismiss();
2358
+ };
2359
+ const handleKeyDown = (event) => {
2360
+ if (!dismissOnEscape || event.key !== "Escape") {
2361
+ return;
2362
+ }
2363
+ onDismiss();
2364
+ };
2365
+ const handleScroll = () => {
2366
+ if (dismissOnScroll) {
2367
+ onDismiss();
2368
+ }
2369
+ };
2370
+ document.addEventListener("pointerdown", handlePointerDown, true);
2371
+ window.addEventListener("keydown", handleKeyDown, true);
2372
+ window.addEventListener("scroll", handleScroll, {
2373
+ capture: true,
2374
+ passive: true
2375
+ });
2376
+ return () => {
2377
+ document.removeEventListener("pointerdown", handlePointerDown, true);
2378
+ window.removeEventListener("keydown", handleKeyDown, true);
2379
+ window.removeEventListener("scroll", handleScroll, true);
2380
+ };
2381
+ }, [
2382
+ dismissIgnoreRefs,
2383
+ dismissOnEscape,
2384
+ dismissOnPointerDownOutside,
2385
+ dismissOnScroll,
2386
+ onDismiss,
2387
+ open
2388
+ ]);
2389
+ const resolvedPosition = React5.useMemo(() => {
2390
+ if (placement.type === "absolute") {
2391
+ const boundary2 = resolveMenuBoundaryFromPoint({
2392
+ x: placement.left,
2393
+ y: placement.top
2394
+ });
2395
+ const menuSize2 = measuredSize ?? { width: 0, height: 0 };
2396
+ return clampMenuPositionToBoundary({
2397
+ left: placement.left,
2398
+ top: placement.top,
2399
+ width: menuSize2.width,
2400
+ height: menuSize2.height,
2401
+ boundary: boundary2
2402
+ });
2403
+ }
2404
+ const boundary = resolveMenuBoundaryFromPoint(placement.point);
2405
+ const menuSize = measuredSize ?? placement.estimatedSize ?? { width: 0, height: 0 };
2406
+ const relativePoint = {
2407
+ x: placement.point.x - boundary.left,
2408
+ y: placement.point.y - boundary.top
2409
+ };
2410
+ const relativePosition = placeViewportMenuAtPoint({
2411
+ point: relativePoint,
2412
+ menuSize,
2413
+ viewport: { width: boundary.width, height: boundary.height },
2414
+ padding: placement.padding,
2415
+ alignX: placement.alignX,
2416
+ alignY: placement.alignY
2417
+ });
2418
+ return {
2419
+ left: boundary.left + relativePosition.left,
2420
+ top: boundary.top + relativePosition.top
2421
+ };
2422
+ }, [measuredSize, placement]);
2423
+ if (!open || typeof document === "undefined" || !document.body) {
2424
+ return null;
2425
+ }
2426
+ return createPortal2(
2427
+ /* @__PURE__ */ jsx23(
2428
+ MenuSurface,
2429
+ {
2430
+ ...rest,
2431
+ ref: setRefs,
2432
+ className,
2433
+ "data-slot": "viewport-menu-surface",
2434
+ style: {
2435
+ ...style,
2436
+ position: "fixed",
2437
+ top: resolvedPosition.top,
2438
+ left: resolvedPosition.left,
2439
+ zIndex: "var(--z-popover)"
2440
+ },
2441
+ onClick: (event) => {
2442
+ if (stopEventPropagation) {
2443
+ event.stopPropagation();
2444
+ }
2445
+ callHandler(onClick, event);
2446
+ },
2447
+ onMouseDown: (event) => {
2448
+ if (stopEventPropagation) {
2449
+ event.stopPropagation();
2450
+ }
2451
+ callHandler(onMouseDown, event);
2452
+ },
2453
+ children
2454
+ }
2455
+ ),
2456
+ document.body
2457
+ );
2458
+ });
2459
+
2460
+ export {
2461
+ badgeVariants,
2462
+ Badge,
2463
+ buttonVariants,
2464
+ Button,
2465
+ Card,
2466
+ CardHeader,
2467
+ CardTitle,
2468
+ CardDescription,
2469
+ CardAction,
2470
+ CardContent,
2471
+ CardFooter,
2472
+ Checkbox,
2473
+ Dialog,
2474
+ DialogTrigger,
2475
+ DialogPortal,
2476
+ DialogClose,
2477
+ DialogOverlay,
2478
+ DialogContent,
2479
+ DialogHeader,
2480
+ DialogFooter,
2481
+ DialogTitle,
2482
+ DialogDescription,
2483
+ ConfirmationDialog,
2484
+ DatePicker,
2485
+ menuSurfaceClassName,
2486
+ menuItemClassName,
2487
+ menuItemWithIndicatorClassName,
2488
+ menuItemIndicatorClassName,
2489
+ MenuSurface,
2490
+ DropdownMenu,
2491
+ DropdownMenuPortal,
2492
+ DropdownMenuTrigger,
2493
+ DropdownMenuContent,
2494
+ DropdownMenuGroup,
2495
+ DropdownMenuItem,
2496
+ DropdownMenuCheckboxItem,
2497
+ DropdownMenuRadioGroup,
2498
+ DropdownMenuRadioItem,
2499
+ DropdownMenuLabel,
2500
+ DropdownMenuSeparator,
2501
+ DropdownMenuShortcut,
2502
+ DropdownMenuSub,
2503
+ DropdownMenuSubTrigger,
2504
+ DropdownMenuSubContent,
2505
+ Input,
2506
+ Popover,
2507
+ PopoverTrigger,
2508
+ PopoverPortal,
2509
+ PopoverClose,
2510
+ PopoverContent,
2511
+ PopoverAnchor,
2512
+ ResizablePanelGroup,
2513
+ ResizablePanel,
2514
+ ResizableHandle,
2515
+ ScrollArea,
2516
+ ScrollBar,
2517
+ Select,
2518
+ SelectGroup,
2519
+ SelectValue,
2520
+ SelectTrigger,
2521
+ SelectContent,
2522
+ SelectLabel,
2523
+ SelectSplitLayout,
2524
+ SelectSplitColumn,
2525
+ SelectSplitColumnLabel,
2526
+ SelectSplitColumnItems,
2527
+ SelectSplitDivider,
2528
+ SelectItem,
2529
+ SelectSeparator,
2530
+ SelectScrollUpButton,
2531
+ SelectScrollDownButton,
2532
+ Separator2 as Separator,
2533
+ Spinner,
2534
+ statusDotVariants,
2535
+ StatusDot,
2536
+ Switch,
2537
+ Textarea,
2538
+ ToastProvider,
2539
+ toastVariants,
2540
+ ToastRoot,
2541
+ ToastTitle,
2542
+ ToastDescription,
2543
+ ToastClose,
2544
+ ToastViewport,
2545
+ TooltipProvider,
2546
+ Tooltip,
2547
+ TooltipTrigger,
2548
+ TooltipPortal,
2549
+ TooltipContent,
2550
+ UnderlineTabs,
2551
+ ViewportMenuSurface
2552
+ };
2553
+ //# sourceMappingURL=chunk-LVHEV755.js.map