@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.
- package/AGENTS.md +30 -8
- package/README.md +11 -14
- package/agent/install-skill.mjs +65 -5
- package/agent/nextop-ui-system/SKILL.md +119 -8
- package/agent/nextop-ui-system/references/extract-base-component.md +50 -6
- package/agent/nextop-ui-system/references/maintain-inventory.md +5 -0
- package/agent/nextop-ui-system/references/promote-business-component.md +94 -208
- package/dist/chunk-GE5YVRTV.js +859 -0
- package/dist/chunk-GE5YVRTV.js.map +1 -0
- package/dist/chunk-KJQ366TA.js +70 -0
- package/dist/chunk-KJQ366TA.js.map +1 -0
- package/dist/chunk-LVHEV755.js +2553 -0
- package/dist/chunk-LVHEV755.js.map +1 -0
- package/dist/components/index.d.ts +162 -11
- package/dist/components/index.js +62 -2
- package/dist/date-format.d.ts +6 -0
- package/dist/date-format.js +11 -0
- package/dist/date-format.js.map +1 -0
- package/dist/dev-vite.js +12 -5
- package/dist/dev-vite.js.map +1 -1
- package/dist/icons/index.d.ts +90 -47
- package/dist/icons/index.js +91 -11
- package/dist/index.d.ts +3 -2
- package/dist/index.js +159 -11
- package/dist/metadata/components.json +1320 -265
- package/dist/metadata/components.schema.json +4 -0
- package/dist/metadata/index.d.ts +3 -1
- package/dist/metadata/index.js +1320 -265
- package/dist/metadata/index.js.map +1 -1
- package/dist/styles/base.css +85 -0
- package/dist/styles/index.css +1 -0
- package/dist/styles/semantic.css +7 -0
- package/dist/styles/theme.css +82 -1
- package/package.json +10 -3
- package/ui-system.md +640 -0
- package/UI_SYSTEM_GUIDELINES.md +0 -148
- package/dist/chunk-FT633NLJ.js +0 -1159
- package/dist/chunk-FT633NLJ.js.map +0 -1
- package/dist/chunk-NFSMZKML.js +0 -208
- 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
|