@pixpilot/shadcn 0.1.3 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index-ygHlSc0_.d.ts +795 -0
- package/dist/index.js +2276 -30
- package/package.json +46 -53
- package/dist/OrContinueWithSeparator-BDH-vep4.d.ts +0 -11
- package/dist/OrContinueWithSeparator-CkITP0NT.js +0 -27
- package/dist/alert-CKr0C0yG.d.ts +0 -24
- package/dist/alert-DgTy4F7t.js +0 -38
- package/dist/alert-dialog-BIYOf1qe.d.ts +0 -48
- package/dist/avatar-DomHDuSM.d.ts +0 -19
- package/dist/avatar-ggnaPAdx.js +0 -30
- package/dist/badge-DaNELwZ4.d.ts +0 -19
- package/dist/badge-OxgStuN-.js +0 -26
- package/dist/button-Ct22vvF2.js +0 -45
- package/dist/button-Qk5_S2q2.d.ts +0 -21
- package/dist/calendar-CtMOHJjw.d.ts +0 -26
- package/dist/calendar-SVLTPCYN.js +0 -106
- package/dist/card-7m__j7pN.d.ts +0 -34
- package/dist/card-mGJMSXR3.js +0 -57
- package/dist/checkbox-C2ohGs66.d.ts +0 -11
- package/dist/checkbox-Car6S-YU.js +0 -22
- package/dist/command-Bh0lIHth.js +0 -87
- package/dist/command-J-Z7237Z.d.ts +0 -52
- package/dist/components/index-CjxDeDgS.d.ts +0 -30
- package/dist/components/index.js +0 -32
- package/dist/components/ui/OrContinueWithSeparator-CHwqvVjX.d.ts +0 -2
- package/dist/components/ui/OrContinueWithSeparator.js +0 -6
- package/dist/components/ui/alert-1G0clvys.d.ts +0 -2
- package/dist/components/ui/alert-dialog-B4l6hBX8.d.ts +0 -2
- package/dist/components/ui/alert-dialog.js +0 -34
- package/dist/components/ui/alert.js +0 -5
- package/dist/components/ui/avatar-utP6R-Uq.d.ts +0 -2
- package/dist/components/ui/avatar.js +0 -5
- package/dist/components/ui/badge-DwySSPk7.d.ts +0 -2
- package/dist/components/ui/badge.js +0 -5
- package/dist/components/ui/button-fWXid_Jg.d.ts +0 -2
- package/dist/components/ui/button.js +0 -5
- package/dist/components/ui/calendar-DxgOZaJG.d.ts +0 -2
- package/dist/components/ui/calendar.js +0 -6
- package/dist/components/ui/card-CEc4KDWR.d.ts +0 -2
- package/dist/components/ui/card.js +0 -5
- package/dist/components/ui/checkbox-Db1hdfQh.d.ts +0 -2
- package/dist/components/ui/checkbox.js +0 -7
- package/dist/components/ui/command-D5yDsetf.d.ts +0 -2
- package/dist/components/ui/command.js +0 -8
- package/dist/components/ui/dialog-C9hWg6Jo.d.ts +0 -2
- package/dist/components/ui/dialog.js +0 -5
- package/dist/components/ui/dropdown-menu-CZQe3gdP.d.ts +0 -2
- package/dist/components/ui/dropdown-menu.js +0 -5
- package/dist/components/ui/file-upload-DE4ndg6D.d.ts +0 -2
- package/dist/components/ui/file-upload.js +0 -7
- package/dist/components/ui/form-_IonQq2g.d.ts +0 -2
- package/dist/components/ui/form.js +0 -6
- package/dist/components/ui/index-ByU7Ea3g.d.ts +0 -30
- package/dist/components/ui/index.js +0 -32
- package/dist/components/ui/input-nIiKz0t3.d.ts +0 -2
- package/dist/components/ui/input.js +0 -5
- package/dist/components/ui/label-DcYFARJv.d.ts +0 -2
- package/dist/components/ui/label.js +0 -5
- package/dist/components/ui/pagination-BzA2nvm7.d.ts +0 -2
- package/dist/components/ui/pagination.js +0 -32
- package/dist/components/ui/popover-CWkbXPIs.d.ts +0 -2
- package/dist/components/ui/popover.js +0 -5
- package/dist/components/ui/radio-group-B8uVaLcH.d.ts +0 -2
- package/dist/components/ui/radio-group.js +0 -5
- package/dist/components/ui/select-Thz3wmNR.d.ts +0 -2
- package/dist/components/ui/select.js +0 -7
- package/dist/components/ui/separator-nDjbz769.d.ts +0 -2
- package/dist/components/ui/separator.js +0 -5
- package/dist/components/ui/shadcn-io/tags/index-ByG1DLSH.d.ts +0 -2
- package/dist/components/ui/shadcn-io/tags/index.js +0 -12
- package/dist/components/ui/shadcn-io/tags-input-inline/index-Z-lSeFdH.d.ts +0 -2
- package/dist/components/ui/shadcn-io/tags-input-inline/index.js +0 -4
- package/dist/components/ui/sheet-DG1hOjV0.d.ts +0 -2
- package/dist/components/ui/sheet.js +0 -5
- package/dist/components/ui/slider-BQpp3iiy.d.ts +0 -2
- package/dist/components/ui/slider.js +0 -5
- package/dist/components/ui/switch-nWOTZVXx.d.ts +0 -2
- package/dist/components/ui/switch.js +0 -7
- package/dist/components/ui/tabs-k3ha4bbs.d.ts +0 -2
- package/dist/components/ui/tabs.js +0 -5
- package/dist/components/ui/textarea-BV_2NNxa.d.ts +0 -2
- package/dist/components/ui/textarea.js +0 -5
- package/dist/components/ui/tooltip--Q9yXR4z.d.ts +0 -2
- package/dist/components/ui/tooltip.js +0 -5
- package/dist/dialog-GHzqCUyY.d.ts +0 -47
- package/dist/dialog-O7j71U82.js +0 -87
- package/dist/dropdown-menu-B7IpNRT1.d.ts +0 -77
- package/dist/dropdown-menu-ChXZkLy7.js +0 -124
- package/dist/file-upload-DPXO1W1r.js +0 -906
- package/dist/file-upload-DtI7t48f.d.ts +0 -94
- package/dist/form-B1wa9dSK.d.ts +0 -45
- package/dist/form-DITfwajn.js +0 -88
- package/dist/index-BBg42y-x.d.ts +0 -31
- package/dist/index-CCggO_hw.d.ts +0 -1
- package/dist/index-CbEoBXve.d.ts +0 -39
- package/dist/index-DAxEKRyQ.d.ts +0 -31
- package/dist/index-nhYidbaI.d.ts +0 -70
- package/dist/input-BOo0lKrd.d.ts +0 -11
- package/dist/input-Yyz-T5fE.js +0 -16
- package/dist/label-CAjd9Y0A.js +0 -16
- package/dist/label-VBeDhZRS.d.ts +0 -11
- package/dist/lib/index-BBZGfoI7.d.ts +0 -2
- package/dist/lib/index.js +0 -4
- package/dist/lib/utils-COdFh0eZ.d.ts +0 -2
- package/dist/lib/utils.js +0 -3
- package/dist/lib-IiLuXmGR.js +0 -0
- package/dist/popover-B6K6dK1G.js +0 -36
- package/dist/popover-BSOEEHRm.d.ts +0 -22
- package/dist/radio-group-2z7Wk4bX.d.ts +0 -15
- package/dist/radio-group-CN-7YDqF.js +0 -29
- package/dist/select-BLcUSgPc.d.ts +0 -52
- package/dist/select-D1s3F0et.js +0 -98
- package/dist/separator-BVBCxKBW.js +0 -18
- package/dist/separator-CQdurlbm.d.ts +0 -13
- package/dist/sheet-BBjl1baR.d.ts +0 -40
- package/dist/sheet-DrR3eH28.js +0 -83
- package/dist/slider-BlL5lT8d.js +0 -37
- package/dist/slider-CYGuuC8k.d.ts +0 -15
- package/dist/src-8ePG_tPo.js +0 -156
- package/dist/switch-BXSa0MEU.js +0 -20
- package/dist/switch-Y5FN07nj.d.ts +0 -11
- package/dist/tabs-C-Tv9y7L.d.ts +0 -23
- package/dist/tabs-DbvqqMZV.js +0 -37
- package/dist/tags-BACevgr_.js +0 -130
- package/dist/tags-input-inline-Bz5h19zx.js +0 -57
- package/dist/textarea-C3eFh4Vd.d.ts +0 -10
- package/dist/textarea-DTGK7cx-.js +0 -15
- package/dist/tooltip-CGDnGnPt.d.ts +0 -23
- package/dist/tooltip-CX3NbXUu.js +0 -37
- package/dist/utils-Bgl9doaU.d.ts +0 -6
- package/dist/utils-CeuVg6RA.js +0 -10
package/dist/index.js
CHANGED
|
@@ -1,32 +1,2278 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import "
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import
|
|
14
|
-
import {
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import
|
|
20
|
-
import
|
|
21
|
-
import
|
|
22
|
-
import
|
|
23
|
-
import
|
|
24
|
-
import
|
|
25
|
-
import
|
|
26
|
-
import
|
|
27
|
-
import
|
|
28
|
-
import
|
|
29
|
-
import { t as Textarea } from "./textarea-DTGK7cx-.js";
|
|
30
|
-
import { i as TooltipTrigger, n as TooltipContent, r as TooltipProvider, t as Tooltip } from "./tooltip-CX3NbXUu.js";
|
|
1
|
+
import { cva } from "class-variance-authority";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { createContext, use, useEffect, useRef, useState } from "react";
|
|
4
|
+
import { clsx } from "clsx";
|
|
5
|
+
import { twMerge } from "tailwind-merge";
|
|
6
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import { buttonVariants as buttonVariants$1 } from "@pixpilot/shadcn";
|
|
8
|
+
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
|
|
9
|
+
import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
|
10
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
11
|
+
import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, FileArchiveIcon, FileAudioIcon, FileCodeIcon, FileCogIcon, FileIcon, FileTextIcon, FileVideoIcon, MoreHorizontalIcon, SearchIcon, X, XIcon } from "lucide-react";
|
|
12
|
+
import { DayPicker, getDefaultClassNames } from "react-day-picker";
|
|
13
|
+
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
|
14
|
+
import { Command as Command$1 } from "cmdk";
|
|
15
|
+
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
16
|
+
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
|
17
|
+
import { useDirection } from "@radix-ui/react-direction";
|
|
18
|
+
import { Controller, FormProvider, useFormContext, useFormState } from "react-hook-form";
|
|
19
|
+
import * as LabelPrimitive from "@radix-ui/react-label";
|
|
20
|
+
import * as SeparatorPrimitive from "@radix-ui/react-separator";
|
|
21
|
+
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
22
|
+
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
|
|
23
|
+
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
24
|
+
import * as TagsInputPrimitive from "@diceui/tags-input";
|
|
25
|
+
import * as SliderPrimitive from "@radix-ui/react-slider";
|
|
26
|
+
import * as SwitchPrimitive from "@radix-ui/react-switch";
|
|
27
|
+
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
28
|
+
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
31
29
|
|
|
30
|
+
//#region src/lib/utils.ts
|
|
31
|
+
function cn(...inputs) {
|
|
32
|
+
return twMerge(clsx(inputs));
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
//#endregion
|
|
36
|
+
//#region src/components/ui/alert.tsx
|
|
37
|
+
const alertVariants = cva("relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
|
|
38
|
+
variants: { variant: {
|
|
39
|
+
default: "bg-card text-card-foreground",
|
|
40
|
+
destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90"
|
|
41
|
+
} },
|
|
42
|
+
defaultVariants: { variant: "default" }
|
|
43
|
+
});
|
|
44
|
+
function Alert({ className, variant, ...props }) {
|
|
45
|
+
return /* @__PURE__ */ jsx("div", {
|
|
46
|
+
"data-slot": "alert",
|
|
47
|
+
role: "alert",
|
|
48
|
+
className: cn(alertVariants({ variant }), className),
|
|
49
|
+
...props
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
function AlertTitle({ className, ...props }) {
|
|
53
|
+
return /* @__PURE__ */ jsx("div", {
|
|
54
|
+
"data-slot": "alert-title",
|
|
55
|
+
className: cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className),
|
|
56
|
+
...props
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
function AlertDescription({ className, ...props }) {
|
|
60
|
+
return /* @__PURE__ */ jsx("div", {
|
|
61
|
+
"data-slot": "alert-description",
|
|
62
|
+
className: cn("text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed", className),
|
|
63
|
+
...props
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
//#endregion
|
|
68
|
+
//#region src/components/ui/alert-dialog.tsx
|
|
69
|
+
function AlertDialog({ ...props }) {
|
|
70
|
+
return /* @__PURE__ */ jsx(AlertDialogPrimitive.Root, {
|
|
71
|
+
"data-slot": "alert-dialog",
|
|
72
|
+
...props
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
function AlertDialogTrigger({ ...props }) {
|
|
76
|
+
return /* @__PURE__ */ jsx(AlertDialogPrimitive.Trigger, {
|
|
77
|
+
"data-slot": "alert-dialog-trigger",
|
|
78
|
+
...props
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
function AlertDialogPortal({ ...props }) {
|
|
82
|
+
return /* @__PURE__ */ jsx(AlertDialogPrimitive.Portal, {
|
|
83
|
+
"data-slot": "alert-dialog-portal",
|
|
84
|
+
...props
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
function AlertDialogOverlay({ className, ...props }) {
|
|
88
|
+
return /* @__PURE__ */ jsx(AlertDialogPrimitive.Overlay, {
|
|
89
|
+
"data-slot": "alert-dialog-overlay",
|
|
90
|
+
className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className),
|
|
91
|
+
...props
|
|
92
|
+
});
|
|
93
|
+
}
|
|
94
|
+
function AlertDialogContent({ className, ...props }) {
|
|
95
|
+
return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialogPrimitive.Content, {
|
|
96
|
+
"data-slot": "alert-dialog-content",
|
|
97
|
+
className: cn("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", className),
|
|
98
|
+
...props
|
|
99
|
+
})] });
|
|
100
|
+
}
|
|
101
|
+
function AlertDialogHeader({ className, ...props }) {
|
|
102
|
+
return /* @__PURE__ */ jsx("div", {
|
|
103
|
+
"data-slot": "alert-dialog-header",
|
|
104
|
+
className: cn("flex flex-col gap-2 text-center sm:text-left", className),
|
|
105
|
+
...props
|
|
106
|
+
});
|
|
107
|
+
}
|
|
108
|
+
function AlertDialogFooter({ className, ...props }) {
|
|
109
|
+
return /* @__PURE__ */ jsx("div", {
|
|
110
|
+
"data-slot": "alert-dialog-footer",
|
|
111
|
+
className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
|
|
112
|
+
...props
|
|
113
|
+
});
|
|
114
|
+
}
|
|
115
|
+
function AlertDialogTitle({ className, ...props }) {
|
|
116
|
+
return /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, {
|
|
117
|
+
"data-slot": "alert-dialog-title",
|
|
118
|
+
className: cn("text-lg font-semibold", className),
|
|
119
|
+
...props
|
|
120
|
+
});
|
|
121
|
+
}
|
|
122
|
+
function AlertDialogDescription({ className, ...props }) {
|
|
123
|
+
return /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, {
|
|
124
|
+
"data-slot": "alert-dialog-description",
|
|
125
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
126
|
+
...props
|
|
127
|
+
});
|
|
128
|
+
}
|
|
129
|
+
function AlertDialogAction({ className, ...props }) {
|
|
130
|
+
return /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, {
|
|
131
|
+
className: cn(buttonVariants$1(), className),
|
|
132
|
+
...props
|
|
133
|
+
});
|
|
134
|
+
}
|
|
135
|
+
function AlertDialogCancel({ className, ...props }) {
|
|
136
|
+
return /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, {
|
|
137
|
+
className: cn(buttonVariants$1({ variant: "outline" }), className),
|
|
138
|
+
...props
|
|
139
|
+
});
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
//#endregion
|
|
143
|
+
//#region src/components/ui/avatar.tsx
|
|
144
|
+
function Avatar({ className, ...props }) {
|
|
145
|
+
return /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
|
|
146
|
+
"data-slot": "avatar",
|
|
147
|
+
className: cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className),
|
|
148
|
+
...props
|
|
149
|
+
});
|
|
150
|
+
}
|
|
151
|
+
function AvatarImage({ className, ...props }) {
|
|
152
|
+
return /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
|
|
153
|
+
"data-slot": "avatar-image",
|
|
154
|
+
className: cn("aspect-square size-full", className),
|
|
155
|
+
...props
|
|
156
|
+
});
|
|
157
|
+
}
|
|
158
|
+
function AvatarFallback({ className, ...props }) {
|
|
159
|
+
return /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
|
|
160
|
+
"data-slot": "avatar-fallback",
|
|
161
|
+
className: cn("bg-muted flex size-full items-center justify-center rounded-full", className),
|
|
162
|
+
...props
|
|
163
|
+
});
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
//#endregion
|
|
167
|
+
//#region src/components/ui/badge.tsx
|
|
168
|
+
const badgeVariants = cva("inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", {
|
|
169
|
+
variants: { variant: {
|
|
170
|
+
default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
|
171
|
+
secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
|
172
|
+
destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
173
|
+
outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
|
|
174
|
+
} },
|
|
175
|
+
defaultVariants: { variant: "default" }
|
|
176
|
+
});
|
|
177
|
+
function Badge({ className, variant, asChild = false, ...props }) {
|
|
178
|
+
return /* @__PURE__ */ jsx(asChild ? Slot : "span", {
|
|
179
|
+
"data-slot": "badge",
|
|
180
|
+
className: cn(badgeVariants({ variant }), className),
|
|
181
|
+
...props
|
|
182
|
+
});
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
//#endregion
|
|
186
|
+
//#region src/components/ui/button.tsx
|
|
187
|
+
const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
|
|
188
|
+
variants: {
|
|
189
|
+
variant: {
|
|
190
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
191
|
+
destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
192
|
+
outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
|
193
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
194
|
+
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
|
195
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
196
|
+
},
|
|
197
|
+
size: {
|
|
198
|
+
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
199
|
+
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
|
200
|
+
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
|
201
|
+
icon: "size-9",
|
|
202
|
+
"icon-sm": "size-8",
|
|
203
|
+
"icon-lg": "size-10"
|
|
204
|
+
}
|
|
205
|
+
},
|
|
206
|
+
defaultVariants: {
|
|
207
|
+
variant: "default",
|
|
208
|
+
size: "default"
|
|
209
|
+
}
|
|
210
|
+
});
|
|
211
|
+
function Button({ className, variant, size, asChild = false, ...props }) {
|
|
212
|
+
return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
|
|
213
|
+
"data-slot": "button",
|
|
214
|
+
className: cn(buttonVariants({
|
|
215
|
+
variant,
|
|
216
|
+
size,
|
|
217
|
+
className
|
|
218
|
+
})),
|
|
219
|
+
...props
|
|
220
|
+
});
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
//#endregion
|
|
224
|
+
//#region src/components/ui/calendar.tsx
|
|
225
|
+
function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", formatters, components, ...props }) {
|
|
226
|
+
const defaultClassNames = getDefaultClassNames();
|
|
227
|
+
return /* @__PURE__ */ jsx(DayPicker, {
|
|
228
|
+
showOutsideDays,
|
|
229
|
+
className: cn("bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent", String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className),
|
|
230
|
+
captionLayout,
|
|
231
|
+
formatters: {
|
|
232
|
+
formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
|
|
233
|
+
...formatters
|
|
234
|
+
},
|
|
235
|
+
classNames: {
|
|
236
|
+
root: cn("w-fit", defaultClassNames.root),
|
|
237
|
+
months: cn("flex gap-4 flex-col md:flex-row relative", defaultClassNames.months),
|
|
238
|
+
month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
|
|
239
|
+
nav: cn("flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between", defaultClassNames.nav),
|
|
240
|
+
button_previous: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", defaultClassNames.button_previous),
|
|
241
|
+
button_next: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", defaultClassNames.button_next),
|
|
242
|
+
month_caption: cn("flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)", defaultClassNames.month_caption),
|
|
243
|
+
dropdowns: cn("w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5", defaultClassNames.dropdowns),
|
|
244
|
+
dropdown_root: cn("relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md", defaultClassNames.dropdown_root),
|
|
245
|
+
dropdown: cn("absolute bg-popover inset-0 opacity-0", defaultClassNames.dropdown),
|
|
246
|
+
caption_label: cn("select-none font-medium", captionLayout === "label" ? "text-sm" : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5", defaultClassNames.caption_label),
|
|
247
|
+
table: "w-full border-collapse",
|
|
248
|
+
weekdays: cn("flex", defaultClassNames.weekdays),
|
|
249
|
+
weekday: cn("text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none", defaultClassNames.weekday),
|
|
250
|
+
week: cn("flex w-full mt-2", defaultClassNames.week),
|
|
251
|
+
week_number_header: cn("select-none w-(--cell-size)", defaultClassNames.week_number_header),
|
|
252
|
+
week_number: cn("text-[0.8rem] select-none text-muted-foreground", defaultClassNames.week_number),
|
|
253
|
+
day: cn("relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none", props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md" : "[&:first-child[data-selected=true]_button]:rounded-l-md", defaultClassNames.day),
|
|
254
|
+
range_start: cn("rounded-l-md bg-accent", defaultClassNames.range_start),
|
|
255
|
+
range_middle: cn("rounded-none", defaultClassNames.range_middle),
|
|
256
|
+
range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
|
|
257
|
+
today: cn("bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none", defaultClassNames.today),
|
|
258
|
+
outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
|
|
259
|
+
disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
|
|
260
|
+
hidden: cn("invisible", defaultClassNames.hidden),
|
|
261
|
+
...classNames
|
|
262
|
+
},
|
|
263
|
+
components: {
|
|
264
|
+
Root: ({ className: className$1, rootRef, ...props$1 }) => {
|
|
265
|
+
return /* @__PURE__ */ jsx("div", {
|
|
266
|
+
"data-slot": "calendar",
|
|
267
|
+
ref: rootRef,
|
|
268
|
+
className: cn(className$1),
|
|
269
|
+
...props$1
|
|
270
|
+
});
|
|
271
|
+
},
|
|
272
|
+
Chevron: ({ className: className$1, orientation, ...props$1 }) => {
|
|
273
|
+
if (orientation === "left") return /* @__PURE__ */ jsx(ChevronLeftIcon, {
|
|
274
|
+
className: cn("size-4", className$1),
|
|
275
|
+
...props$1
|
|
276
|
+
});
|
|
277
|
+
if (orientation === "right") return /* @__PURE__ */ jsx(ChevronRightIcon, {
|
|
278
|
+
className: cn("size-4", className$1),
|
|
279
|
+
...props$1
|
|
280
|
+
});
|
|
281
|
+
return /* @__PURE__ */ jsx(ChevronDownIcon, {
|
|
282
|
+
className: cn("size-4", className$1),
|
|
283
|
+
...props$1
|
|
284
|
+
});
|
|
285
|
+
},
|
|
286
|
+
DayButton: CalendarDayButton,
|
|
287
|
+
WeekNumber: ({ children, ...props$1 }) => {
|
|
288
|
+
return /* @__PURE__ */ jsx("td", {
|
|
289
|
+
...props$1,
|
|
290
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
291
|
+
className: "flex size-(--cell-size) items-center justify-center text-center",
|
|
292
|
+
children
|
|
293
|
+
})
|
|
294
|
+
});
|
|
295
|
+
},
|
|
296
|
+
...components
|
|
297
|
+
},
|
|
298
|
+
...props
|
|
299
|
+
});
|
|
300
|
+
}
|
|
301
|
+
function CalendarDayButton({ className, day, modifiers, ...props }) {
|
|
302
|
+
const defaultClassNames = getDefaultClassNames();
|
|
303
|
+
const ref = React.useRef(null);
|
|
304
|
+
React.useEffect(() => {
|
|
305
|
+
if (modifiers.focused) ref.current?.focus();
|
|
306
|
+
}, [modifiers.focused]);
|
|
307
|
+
return /* @__PURE__ */ jsx(Button, {
|
|
308
|
+
ref,
|
|
309
|
+
variant: "ghost",
|
|
310
|
+
size: "icon",
|
|
311
|
+
"data-day": day.date.toLocaleDateString(),
|
|
312
|
+
"data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
|
|
313
|
+
"data-range-start": modifiers.range_start,
|
|
314
|
+
"data-range-end": modifiers.range_end,
|
|
315
|
+
"data-range-middle": modifiers.range_middle,
|
|
316
|
+
className: cn("data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
|
|
317
|
+
...props
|
|
318
|
+
});
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
//#endregion
|
|
322
|
+
//#region src/components/ui/card.tsx
|
|
323
|
+
function Card({ className, ...props }) {
|
|
324
|
+
return /* @__PURE__ */ jsx("div", {
|
|
325
|
+
"data-slot": "card",
|
|
326
|
+
className: cn("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", className),
|
|
327
|
+
...props
|
|
328
|
+
});
|
|
329
|
+
}
|
|
330
|
+
function CardHeader({ className, ...props }) {
|
|
331
|
+
return /* @__PURE__ */ jsx("div", {
|
|
332
|
+
"data-slot": "card-header",
|
|
333
|
+
className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", className),
|
|
334
|
+
...props
|
|
335
|
+
});
|
|
336
|
+
}
|
|
337
|
+
function CardTitle({ className, ...props }) {
|
|
338
|
+
return /* @__PURE__ */ jsx("div", {
|
|
339
|
+
"data-slot": "card-title",
|
|
340
|
+
className: cn("leading-none font-semibold", className),
|
|
341
|
+
...props
|
|
342
|
+
});
|
|
343
|
+
}
|
|
344
|
+
function CardDescription({ className, ...props }) {
|
|
345
|
+
return /* @__PURE__ */ jsx("div", {
|
|
346
|
+
"data-slot": "card-description",
|
|
347
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
348
|
+
...props
|
|
349
|
+
});
|
|
350
|
+
}
|
|
351
|
+
function CardAction({ className, ...props }) {
|
|
352
|
+
return /* @__PURE__ */ jsx("div", {
|
|
353
|
+
"data-slot": "card-action",
|
|
354
|
+
className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
|
|
355
|
+
...props
|
|
356
|
+
});
|
|
357
|
+
}
|
|
358
|
+
function CardContent({ className, ...props }) {
|
|
359
|
+
return /* @__PURE__ */ jsx("div", {
|
|
360
|
+
"data-slot": "card-content",
|
|
361
|
+
className: cn("px-6", className),
|
|
362
|
+
...props
|
|
363
|
+
});
|
|
364
|
+
}
|
|
365
|
+
function CardFooter({ className, ...props }) {
|
|
366
|
+
return /* @__PURE__ */ jsx("div", {
|
|
367
|
+
"data-slot": "card-footer",
|
|
368
|
+
className: cn("flex items-center px-6 [.border-t]:pt-6", className),
|
|
369
|
+
...props
|
|
370
|
+
});
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
//#endregion
|
|
374
|
+
//#region src/components/ui/checkbox.tsx
|
|
375
|
+
function Checkbox({ className, ...props }) {
|
|
376
|
+
return /* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
|
|
377
|
+
"data-slot": "checkbox",
|
|
378
|
+
className: cn("peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className),
|
|
379
|
+
...props,
|
|
380
|
+
children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
|
|
381
|
+
"data-slot": "checkbox-indicator",
|
|
382
|
+
className: "grid place-content-center text-current transition-none",
|
|
383
|
+
children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" })
|
|
384
|
+
})
|
|
385
|
+
});
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
//#endregion
|
|
389
|
+
//#region src/components/ui/dialog.tsx
|
|
390
|
+
function Dialog({ ...props }) {
|
|
391
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Root, {
|
|
392
|
+
"data-slot": "dialog",
|
|
393
|
+
...props
|
|
394
|
+
});
|
|
395
|
+
}
|
|
396
|
+
function DialogTrigger({ ...props }) {
|
|
397
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, {
|
|
398
|
+
"data-slot": "dialog-trigger",
|
|
399
|
+
...props
|
|
400
|
+
});
|
|
401
|
+
}
|
|
402
|
+
function DialogPortal({ ...props }) {
|
|
403
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Portal, {
|
|
404
|
+
"data-slot": "dialog-portal",
|
|
405
|
+
...props
|
|
406
|
+
});
|
|
407
|
+
}
|
|
408
|
+
function DialogClose({ ...props }) {
|
|
409
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Close, {
|
|
410
|
+
"data-slot": "dialog-close",
|
|
411
|
+
...props
|
|
412
|
+
});
|
|
413
|
+
}
|
|
414
|
+
function DialogOverlay({ className, ...props }) {
|
|
415
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
|
|
416
|
+
"data-slot": "dialog-overlay",
|
|
417
|
+
className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className),
|
|
418
|
+
...props
|
|
419
|
+
});
|
|
420
|
+
}
|
|
421
|
+
function DialogContent({ className, children, showCloseButton = true, ...props }) {
|
|
422
|
+
return /* @__PURE__ */ jsxs(DialogPortal, {
|
|
423
|
+
"data-slot": "dialog-portal",
|
|
424
|
+
children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
|
|
425
|
+
"data-slot": "dialog-content",
|
|
426
|
+
className: cn("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", className),
|
|
427
|
+
...props,
|
|
428
|
+
children: [children, showCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
|
|
429
|
+
"data-slot": "dialog-close",
|
|
430
|
+
className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
431
|
+
children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
|
|
432
|
+
className: "sr-only",
|
|
433
|
+
children: "Close"
|
|
434
|
+
})]
|
|
435
|
+
})]
|
|
436
|
+
})]
|
|
437
|
+
});
|
|
438
|
+
}
|
|
439
|
+
function DialogHeader({ className, ...props }) {
|
|
440
|
+
return /* @__PURE__ */ jsx("div", {
|
|
441
|
+
"data-slot": "dialog-header",
|
|
442
|
+
className: cn("flex flex-col gap-2 text-center sm:text-left", className),
|
|
443
|
+
...props
|
|
444
|
+
});
|
|
445
|
+
}
|
|
446
|
+
function DialogFooter({ className, ...props }) {
|
|
447
|
+
return /* @__PURE__ */ jsx("div", {
|
|
448
|
+
"data-slot": "dialog-footer",
|
|
449
|
+
className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
|
|
450
|
+
...props
|
|
451
|
+
});
|
|
452
|
+
}
|
|
453
|
+
function DialogTitle({ className, ...props }) {
|
|
454
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Title, {
|
|
455
|
+
"data-slot": "dialog-title",
|
|
456
|
+
className: cn("text-lg leading-none font-semibold", className),
|
|
457
|
+
...props
|
|
458
|
+
});
|
|
459
|
+
}
|
|
460
|
+
function DialogDescription({ className, ...props }) {
|
|
461
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Description, {
|
|
462
|
+
"data-slot": "dialog-description",
|
|
463
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
464
|
+
...props
|
|
465
|
+
});
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
//#endregion
|
|
469
|
+
//#region src/components/ui/command.tsx
|
|
470
|
+
function Command({ className, ...props }) {
|
|
471
|
+
return /* @__PURE__ */ jsx(Command$1, {
|
|
472
|
+
"data-slot": "command",
|
|
473
|
+
className: cn("bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md", className),
|
|
474
|
+
...props
|
|
475
|
+
});
|
|
476
|
+
}
|
|
477
|
+
function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, className, showCloseButton = true, ...props }) {
|
|
478
|
+
return /* @__PURE__ */ jsxs(Dialog, {
|
|
479
|
+
...props,
|
|
480
|
+
children: [/* @__PURE__ */ jsxs(DialogHeader, {
|
|
481
|
+
className: "sr-only",
|
|
482
|
+
children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), /* @__PURE__ */ jsx(DialogDescription, { children: description })]
|
|
483
|
+
}), /* @__PURE__ */ jsx(DialogContent, {
|
|
484
|
+
className: cn("overflow-hidden p-0", className),
|
|
485
|
+
showCloseButton,
|
|
486
|
+
children: /* @__PURE__ */ jsx(Command, {
|
|
487
|
+
className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",
|
|
488
|
+
children
|
|
489
|
+
})
|
|
490
|
+
})]
|
|
491
|
+
});
|
|
492
|
+
}
|
|
493
|
+
function CommandInput({ className, ...props }) {
|
|
494
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
495
|
+
"data-slot": "command-input-wrapper",
|
|
496
|
+
className: "flex h-9 items-center gap-2 border-b px-3",
|
|
497
|
+
children: [/* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }), /* @__PURE__ */ jsx(Command$1.Input, {
|
|
498
|
+
"data-slot": "command-input",
|
|
499
|
+
className: cn("placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
|
|
500
|
+
...props
|
|
501
|
+
})]
|
|
502
|
+
});
|
|
503
|
+
}
|
|
504
|
+
function CommandList({ className, ...props }) {
|
|
505
|
+
return /* @__PURE__ */ jsx(Command$1.List, {
|
|
506
|
+
"data-slot": "command-list",
|
|
507
|
+
className: cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className),
|
|
508
|
+
...props
|
|
509
|
+
});
|
|
510
|
+
}
|
|
511
|
+
function CommandEmpty({ ...props }) {
|
|
512
|
+
return /* @__PURE__ */ jsx(Command$1.Empty, {
|
|
513
|
+
"data-slot": "command-empty",
|
|
514
|
+
className: "py-6 text-center text-sm",
|
|
515
|
+
...props
|
|
516
|
+
});
|
|
517
|
+
}
|
|
518
|
+
function CommandGroup({ className, ...props }) {
|
|
519
|
+
return /* @__PURE__ */ jsx(Command$1.Group, {
|
|
520
|
+
"data-slot": "command-group",
|
|
521
|
+
className: cn("text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium", className),
|
|
522
|
+
...props
|
|
523
|
+
});
|
|
524
|
+
}
|
|
525
|
+
function CommandSeparator({ className, ...props }) {
|
|
526
|
+
return /* @__PURE__ */ jsx(Command$1.Separator, {
|
|
527
|
+
"data-slot": "command-separator",
|
|
528
|
+
className: cn("bg-border -mx-1 h-px", className),
|
|
529
|
+
...props
|
|
530
|
+
});
|
|
531
|
+
}
|
|
532
|
+
function CommandItem({ className, ...props }) {
|
|
533
|
+
return /* @__PURE__ */ jsx(Command$1.Item, {
|
|
534
|
+
"data-slot": "command-item",
|
|
535
|
+
className: cn("data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
536
|
+
...props
|
|
537
|
+
});
|
|
538
|
+
}
|
|
539
|
+
function CommandShortcut({ className, ...props }) {
|
|
540
|
+
return /* @__PURE__ */ jsx("span", {
|
|
541
|
+
"data-slot": "command-shortcut",
|
|
542
|
+
className: cn("text-muted-foreground ml-auto text-xs tracking-widest", className),
|
|
543
|
+
...props
|
|
544
|
+
});
|
|
545
|
+
}
|
|
546
|
+
|
|
547
|
+
//#endregion
|
|
548
|
+
//#region src/components/ui/dropdown-menu.tsx
|
|
549
|
+
function DropdownMenu({ ...props }) {
|
|
550
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, {
|
|
551
|
+
"data-slot": "dropdown-menu",
|
|
552
|
+
...props
|
|
553
|
+
});
|
|
554
|
+
}
|
|
555
|
+
function DropdownMenuPortal({ ...props }) {
|
|
556
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, {
|
|
557
|
+
"data-slot": "dropdown-menu-portal",
|
|
558
|
+
...props
|
|
559
|
+
});
|
|
560
|
+
}
|
|
561
|
+
function DropdownMenuTrigger({ ...props }) {
|
|
562
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, {
|
|
563
|
+
"data-slot": "dropdown-menu-trigger",
|
|
564
|
+
...props
|
|
565
|
+
});
|
|
566
|
+
}
|
|
567
|
+
function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
|
|
568
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
|
|
569
|
+
"data-slot": "dropdown-menu-content",
|
|
570
|
+
sideOffset,
|
|
571
|
+
className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md", className),
|
|
572
|
+
...props
|
|
573
|
+
}) });
|
|
574
|
+
}
|
|
575
|
+
function DropdownMenuGroup({ ...props }) {
|
|
576
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Group, {
|
|
577
|
+
"data-slot": "dropdown-menu-group",
|
|
578
|
+
...props
|
|
579
|
+
});
|
|
580
|
+
}
|
|
581
|
+
function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
|
|
582
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, {
|
|
583
|
+
"data-slot": "dropdown-menu-item",
|
|
584
|
+
"data-inset": inset,
|
|
585
|
+
"data-variant": variant,
|
|
586
|
+
className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
587
|
+
...props
|
|
588
|
+
});
|
|
589
|
+
}
|
|
590
|
+
function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
|
|
591
|
+
return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.CheckboxItem, {
|
|
592
|
+
"data-slot": "dropdown-menu-checkbox-item",
|
|
593
|
+
className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
594
|
+
checked,
|
|
595
|
+
...props,
|
|
596
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
597
|
+
className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
|
|
598
|
+
children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
|
|
599
|
+
}), children]
|
|
600
|
+
});
|
|
601
|
+
}
|
|
602
|
+
function DropdownMenuRadioGroup({ ...props }) {
|
|
603
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.RadioGroup, {
|
|
604
|
+
"data-slot": "dropdown-menu-radio-group",
|
|
605
|
+
...props
|
|
606
|
+
});
|
|
607
|
+
}
|
|
608
|
+
function DropdownMenuRadioItem({ className, children, ...props }) {
|
|
609
|
+
return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.RadioItem, {
|
|
610
|
+
"data-slot": "dropdown-menu-radio-item",
|
|
611
|
+
className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
612
|
+
...props,
|
|
613
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
614
|
+
className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
|
|
615
|
+
children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) })
|
|
616
|
+
}), children]
|
|
617
|
+
});
|
|
618
|
+
}
|
|
619
|
+
function DropdownMenuLabel({ className, inset, ...props }) {
|
|
620
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Label, {
|
|
621
|
+
"data-slot": "dropdown-menu-label",
|
|
622
|
+
"data-inset": inset,
|
|
623
|
+
className: cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className),
|
|
624
|
+
...props
|
|
625
|
+
});
|
|
626
|
+
}
|
|
627
|
+
function DropdownMenuSeparator({ className, ...props }) {
|
|
628
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, {
|
|
629
|
+
"data-slot": "dropdown-menu-separator",
|
|
630
|
+
className: cn("bg-border -mx-1 my-1 h-px", className),
|
|
631
|
+
...props
|
|
632
|
+
});
|
|
633
|
+
}
|
|
634
|
+
function DropdownMenuShortcut({ className, ...props }) {
|
|
635
|
+
return /* @__PURE__ */ jsx("span", {
|
|
636
|
+
"data-slot": "dropdown-menu-shortcut",
|
|
637
|
+
className: cn("text-muted-foreground ml-auto text-xs tracking-widest", className),
|
|
638
|
+
...props
|
|
639
|
+
});
|
|
640
|
+
}
|
|
641
|
+
function DropdownMenuSub({ ...props }) {
|
|
642
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Sub, {
|
|
643
|
+
"data-slot": "dropdown-menu-sub",
|
|
644
|
+
...props
|
|
645
|
+
});
|
|
646
|
+
}
|
|
647
|
+
function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
|
|
648
|
+
return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.SubTrigger, {
|
|
649
|
+
"data-slot": "dropdown-menu-sub-trigger",
|
|
650
|
+
"data-inset": inset,
|
|
651
|
+
className: cn("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
652
|
+
...props,
|
|
653
|
+
children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4" })]
|
|
654
|
+
});
|
|
655
|
+
}
|
|
656
|
+
function DropdownMenuSubContent({ className, ...props }) {
|
|
657
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.SubContent, {
|
|
658
|
+
"data-slot": "dropdown-menu-sub-content",
|
|
659
|
+
className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg", className),
|
|
660
|
+
...props
|
|
661
|
+
});
|
|
662
|
+
}
|
|
663
|
+
|
|
664
|
+
//#endregion
|
|
665
|
+
//#region src/components/ui/file-upload.tsx
|
|
666
|
+
const ROOT_NAME = "FileUpload";
|
|
667
|
+
const DROPZONE_NAME = "FileUploadDropzone";
|
|
668
|
+
const TRIGGER_NAME = "FileUploadTrigger";
|
|
669
|
+
const LIST_NAME = "FileUploadList";
|
|
670
|
+
const ITEM_NAME = "FileUploadItem";
|
|
671
|
+
const ITEM_PREVIEW_NAME = "FileUploadItemPreview";
|
|
672
|
+
const ITEM_METADATA_NAME = "FileUploadItemMetadata";
|
|
673
|
+
const ITEM_PROGRESS_NAME = "FileUploadItemProgress";
|
|
674
|
+
const ITEM_DELETE_NAME = "FileUploadItemDelete";
|
|
675
|
+
const CLEAR_NAME = "FileUploadClear";
|
|
676
|
+
function useLazyRef(fn) {
|
|
677
|
+
const ref = React.useRef(null);
|
|
678
|
+
if (ref.current === null) ref.current = fn();
|
|
679
|
+
return ref;
|
|
680
|
+
}
|
|
681
|
+
function createStore(listeners, files, urlCache, invalid, onValueChange) {
|
|
682
|
+
let state = {
|
|
683
|
+
files,
|
|
684
|
+
dragOver: false,
|
|
685
|
+
invalid
|
|
686
|
+
};
|
|
687
|
+
function reducer(state$1, action) {
|
|
688
|
+
switch (action.type) {
|
|
689
|
+
case "ADD_FILES":
|
|
690
|
+
for (const file of action.files) files.set(file, {
|
|
691
|
+
file,
|
|
692
|
+
progress: 0,
|
|
693
|
+
status: "idle"
|
|
694
|
+
});
|
|
695
|
+
if (onValueChange) onValueChange(Array.from(files.values()).map((fileState) => fileState.file));
|
|
696
|
+
return {
|
|
697
|
+
...state$1,
|
|
698
|
+
files
|
|
699
|
+
};
|
|
700
|
+
case "SET_FILES": {
|
|
701
|
+
const newFileSet = new Set(action.files);
|
|
702
|
+
for (const existingFile of files.keys()) if (!newFileSet.has(existingFile)) files.delete(existingFile);
|
|
703
|
+
for (const file of action.files) if (!files.get(file)) files.set(file, {
|
|
704
|
+
file,
|
|
705
|
+
progress: 0,
|
|
706
|
+
status: "idle"
|
|
707
|
+
});
|
|
708
|
+
return {
|
|
709
|
+
...state$1,
|
|
710
|
+
files
|
|
711
|
+
};
|
|
712
|
+
}
|
|
713
|
+
case "SET_PROGRESS": {
|
|
714
|
+
const fileState = files.get(action.file);
|
|
715
|
+
if (fileState) files.set(action.file, {
|
|
716
|
+
...fileState,
|
|
717
|
+
progress: action.progress,
|
|
718
|
+
status: "uploading"
|
|
719
|
+
});
|
|
720
|
+
return {
|
|
721
|
+
...state$1,
|
|
722
|
+
files
|
|
723
|
+
};
|
|
724
|
+
}
|
|
725
|
+
case "SET_SUCCESS": {
|
|
726
|
+
const fileState = files.get(action.file);
|
|
727
|
+
if (fileState) files.set(action.file, {
|
|
728
|
+
...fileState,
|
|
729
|
+
progress: 100,
|
|
730
|
+
status: "success"
|
|
731
|
+
});
|
|
732
|
+
return {
|
|
733
|
+
...state$1,
|
|
734
|
+
files
|
|
735
|
+
};
|
|
736
|
+
}
|
|
737
|
+
case "SET_ERROR": {
|
|
738
|
+
const fileState = files.get(action.file);
|
|
739
|
+
if (fileState) files.set(action.file, {
|
|
740
|
+
...fileState,
|
|
741
|
+
error: action.error,
|
|
742
|
+
status: "error"
|
|
743
|
+
});
|
|
744
|
+
return {
|
|
745
|
+
...state$1,
|
|
746
|
+
files
|
|
747
|
+
};
|
|
748
|
+
}
|
|
749
|
+
case "REMOVE_FILE":
|
|
750
|
+
if (urlCache) {
|
|
751
|
+
const cachedUrl = urlCache.get(action.file);
|
|
752
|
+
if (cachedUrl) {
|
|
753
|
+
URL.revokeObjectURL(cachedUrl);
|
|
754
|
+
urlCache.delete(action.file);
|
|
755
|
+
}
|
|
756
|
+
}
|
|
757
|
+
files.delete(action.file);
|
|
758
|
+
if (onValueChange) onValueChange(Array.from(files.values()).map((fileState) => fileState.file));
|
|
759
|
+
return {
|
|
760
|
+
...state$1,
|
|
761
|
+
files
|
|
762
|
+
};
|
|
763
|
+
case "SET_DRAG_OVER": return {
|
|
764
|
+
...state$1,
|
|
765
|
+
dragOver: action.dragOver
|
|
766
|
+
};
|
|
767
|
+
case "SET_INVALID": return {
|
|
768
|
+
...state$1,
|
|
769
|
+
invalid: action.invalid
|
|
770
|
+
};
|
|
771
|
+
case "CLEAR":
|
|
772
|
+
if (urlCache) for (const file of files.keys()) {
|
|
773
|
+
const cachedUrl = urlCache.get(file);
|
|
774
|
+
if (cachedUrl) {
|
|
775
|
+
URL.revokeObjectURL(cachedUrl);
|
|
776
|
+
urlCache.delete(file);
|
|
777
|
+
}
|
|
778
|
+
}
|
|
779
|
+
files.clear();
|
|
780
|
+
if (onValueChange) onValueChange([]);
|
|
781
|
+
return {
|
|
782
|
+
...state$1,
|
|
783
|
+
files,
|
|
784
|
+
invalid: false
|
|
785
|
+
};
|
|
786
|
+
default: return state$1;
|
|
787
|
+
}
|
|
788
|
+
}
|
|
789
|
+
function getState() {
|
|
790
|
+
return state;
|
|
791
|
+
}
|
|
792
|
+
function dispatch(action) {
|
|
793
|
+
state = reducer(state, action);
|
|
794
|
+
for (const listener of listeners) listener();
|
|
795
|
+
}
|
|
796
|
+
function subscribe(listener) {
|
|
797
|
+
listeners.add(listener);
|
|
798
|
+
return () => listeners.delete(listener);
|
|
799
|
+
}
|
|
800
|
+
return {
|
|
801
|
+
getState,
|
|
802
|
+
dispatch,
|
|
803
|
+
subscribe
|
|
804
|
+
};
|
|
805
|
+
}
|
|
806
|
+
const StoreContext = React.createContext(null);
|
|
807
|
+
function useStoreContext(consumerName) {
|
|
808
|
+
const context = React.use(StoreContext);
|
|
809
|
+
if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
|
|
810
|
+
return context;
|
|
811
|
+
}
|
|
812
|
+
function useStore(selector) {
|
|
813
|
+
const store = useStoreContext("useStore");
|
|
814
|
+
const lastValueRef = useLazyRef(() => null);
|
|
815
|
+
const getSnapshot = React.useCallback(() => {
|
|
816
|
+
const state = store.getState();
|
|
817
|
+
const prevValue = lastValueRef.current;
|
|
818
|
+
if (prevValue && prevValue.state === state) return prevValue.value;
|
|
819
|
+
const nextValue = selector(state);
|
|
820
|
+
lastValueRef.current = {
|
|
821
|
+
value: nextValue,
|
|
822
|
+
state
|
|
823
|
+
};
|
|
824
|
+
return nextValue;
|
|
825
|
+
}, [
|
|
826
|
+
store,
|
|
827
|
+
selector,
|
|
828
|
+
lastValueRef
|
|
829
|
+
]);
|
|
830
|
+
return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
|
|
831
|
+
}
|
|
832
|
+
const FileUploadContext = React.createContext(null);
|
|
833
|
+
function useFileUploadContext(consumerName) {
|
|
834
|
+
const context = React.use(FileUploadContext);
|
|
835
|
+
if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
|
|
836
|
+
return context;
|
|
837
|
+
}
|
|
838
|
+
function FileUploadRoot(props) {
|
|
839
|
+
const { value, defaultValue, onValueChange, onAccept, onFileAccept, onFileReject, onFilesReject, onFileValidate, onUpload, accept, maxFiles, maxSize, dir: dirProp, label, name, asChild, disabled = false, invalid = false, multiple = false, required = false, children, className, ...rootProps } = props;
|
|
840
|
+
const inputId = React.useId();
|
|
841
|
+
const dropzoneId = React.useId();
|
|
842
|
+
const listId = React.useId();
|
|
843
|
+
const labelId = React.useId();
|
|
844
|
+
const dir = useDirection(dirProp);
|
|
845
|
+
const listeners = useLazyRef(() => /* @__PURE__ */ new Set()).current;
|
|
846
|
+
const files = useLazyRef(() => /* @__PURE__ */ new Map()).current;
|
|
847
|
+
const urlCache = useLazyRef(() => /* @__PURE__ */ new WeakMap()).current;
|
|
848
|
+
const inputRef = React.useRef(null);
|
|
849
|
+
const isControlled = value !== void 0;
|
|
850
|
+
const store = React.useMemo(() => createStore(listeners, files, urlCache, invalid, onValueChange), [
|
|
851
|
+
listeners,
|
|
852
|
+
files,
|
|
853
|
+
invalid,
|
|
854
|
+
onValueChange,
|
|
855
|
+
urlCache
|
|
856
|
+
]);
|
|
857
|
+
const acceptTypes = React.useMemo(() => accept?.split(",").map((t) => t.trim()) ?? null, [accept]);
|
|
858
|
+
const onProgress = useLazyRef(() => {
|
|
859
|
+
let frame = 0;
|
|
860
|
+
return (file, progress) => {
|
|
861
|
+
if (frame) return;
|
|
862
|
+
frame = requestAnimationFrame(() => {
|
|
863
|
+
frame = 0;
|
|
864
|
+
store.dispatch({
|
|
865
|
+
type: "SET_PROGRESS",
|
|
866
|
+
file,
|
|
867
|
+
progress: Math.min(Math.max(0, progress), 100)
|
|
868
|
+
});
|
|
869
|
+
});
|
|
870
|
+
};
|
|
871
|
+
}).current;
|
|
872
|
+
React.useEffect(() => {
|
|
873
|
+
if (isControlled) store.dispatch({
|
|
874
|
+
type: "SET_FILES",
|
|
875
|
+
files: value
|
|
876
|
+
});
|
|
877
|
+
else if (defaultValue && defaultValue.length > 0 && !store.getState().files.size) store.dispatch({
|
|
878
|
+
type: "SET_FILES",
|
|
879
|
+
files: defaultValue
|
|
880
|
+
});
|
|
881
|
+
}, [
|
|
882
|
+
value,
|
|
883
|
+
defaultValue,
|
|
884
|
+
isControlled,
|
|
885
|
+
store
|
|
886
|
+
]);
|
|
887
|
+
React.useEffect(() => {
|
|
888
|
+
return () => {
|
|
889
|
+
for (const file of files.keys()) {
|
|
890
|
+
const cachedUrl = urlCache.get(file);
|
|
891
|
+
if (cachedUrl) URL.revokeObjectURL(cachedUrl);
|
|
892
|
+
}
|
|
893
|
+
};
|
|
894
|
+
}, [files, urlCache]);
|
|
895
|
+
const onFilesUpload = React.useCallback(async (files$1) => {
|
|
896
|
+
try {
|
|
897
|
+
for (const file of files$1) store.dispatch({
|
|
898
|
+
type: "SET_PROGRESS",
|
|
899
|
+
file,
|
|
900
|
+
progress: 0
|
|
901
|
+
});
|
|
902
|
+
if (onUpload) await onUpload(files$1, {
|
|
903
|
+
onProgress,
|
|
904
|
+
onSuccess: (file) => {
|
|
905
|
+
store.dispatch({
|
|
906
|
+
type: "SET_SUCCESS",
|
|
907
|
+
file
|
|
908
|
+
});
|
|
909
|
+
},
|
|
910
|
+
onError: (file, error) => {
|
|
911
|
+
store.dispatch({
|
|
912
|
+
type: "SET_ERROR",
|
|
913
|
+
file,
|
|
914
|
+
error: error.message ?? "Upload failed"
|
|
915
|
+
});
|
|
916
|
+
}
|
|
917
|
+
});
|
|
918
|
+
else for (const file of files$1) store.dispatch({
|
|
919
|
+
type: "SET_SUCCESS",
|
|
920
|
+
file
|
|
921
|
+
});
|
|
922
|
+
} catch (error) {
|
|
923
|
+
const errorMessage = error instanceof Error ? error.message : "Upload failed";
|
|
924
|
+
for (const file of files$1) store.dispatch({
|
|
925
|
+
type: "SET_ERROR",
|
|
926
|
+
file,
|
|
927
|
+
error: errorMessage
|
|
928
|
+
});
|
|
929
|
+
}
|
|
930
|
+
}, [
|
|
931
|
+
store,
|
|
932
|
+
onUpload,
|
|
933
|
+
onProgress
|
|
934
|
+
]);
|
|
935
|
+
const onFilesChange = React.useCallback((originalFiles) => {
|
|
936
|
+
if (disabled) return;
|
|
937
|
+
let filesToProcess = [...originalFiles];
|
|
938
|
+
let invalid$1 = false;
|
|
939
|
+
const allRejectedFiles = [];
|
|
940
|
+
if (maxFiles) {
|
|
941
|
+
const currentCount = store.getState().files.size;
|
|
942
|
+
const remainingSlotCount = Math.max(0, maxFiles - currentCount);
|
|
943
|
+
if (remainingSlotCount < filesToProcess.length) {
|
|
944
|
+
const rejectedFromMaxFiles = filesToProcess.slice(remainingSlotCount);
|
|
945
|
+
invalid$1 = true;
|
|
946
|
+
filesToProcess = filesToProcess.slice(0, remainingSlotCount);
|
|
947
|
+
for (const file of rejectedFromMaxFiles) {
|
|
948
|
+
let rejectionMessage = `Maximum ${maxFiles} files allowed`;
|
|
949
|
+
if (onFileValidate) {
|
|
950
|
+
const validationMessage = onFileValidate(file);
|
|
951
|
+
if (validationMessage) rejectionMessage = validationMessage;
|
|
952
|
+
}
|
|
953
|
+
onFileReject?.(file, rejectionMessage);
|
|
954
|
+
allRejectedFiles.push({
|
|
955
|
+
file,
|
|
956
|
+
message: rejectionMessage
|
|
957
|
+
});
|
|
958
|
+
}
|
|
959
|
+
}
|
|
960
|
+
}
|
|
961
|
+
const acceptedFiles = [];
|
|
962
|
+
const rejectedFiles = [];
|
|
963
|
+
for (const file of filesToProcess) {
|
|
964
|
+
let rejected = false;
|
|
965
|
+
let rejectionMessage = "";
|
|
966
|
+
if (onFileValidate) {
|
|
967
|
+
const validationMessage = onFileValidate(file);
|
|
968
|
+
if (validationMessage) {
|
|
969
|
+
rejectionMessage = validationMessage;
|
|
970
|
+
onFileReject?.(file, rejectionMessage);
|
|
971
|
+
rejected = true;
|
|
972
|
+
invalid$1 = true;
|
|
973
|
+
continue;
|
|
974
|
+
}
|
|
975
|
+
}
|
|
976
|
+
if (acceptTypes) {
|
|
977
|
+
const fileType = file.type;
|
|
978
|
+
const fileExtension = `.${file.name.split(".").pop()}`;
|
|
979
|
+
if (!acceptTypes.some((type) => type === fileType || type === fileExtension || type.includes("/*") && fileType.startsWith(type.replace("/*", "/")))) {
|
|
980
|
+
rejectionMessage = "File type not accepted";
|
|
981
|
+
onFileReject?.(file, rejectionMessage);
|
|
982
|
+
rejected = true;
|
|
983
|
+
invalid$1 = true;
|
|
984
|
+
}
|
|
985
|
+
}
|
|
986
|
+
if (maxSize && file.size > maxSize) {
|
|
987
|
+
rejectionMessage = "File too large";
|
|
988
|
+
onFileReject?.(file, rejectionMessage);
|
|
989
|
+
rejected = true;
|
|
990
|
+
invalid$1 = true;
|
|
991
|
+
}
|
|
992
|
+
if (!rejected) acceptedFiles.push(file);
|
|
993
|
+
else rejectedFiles.push({
|
|
994
|
+
file,
|
|
995
|
+
message: rejectionMessage
|
|
996
|
+
});
|
|
997
|
+
}
|
|
998
|
+
allRejectedFiles.push(...rejectedFiles);
|
|
999
|
+
if (invalid$1) {
|
|
1000
|
+
store.dispatch({
|
|
1001
|
+
type: "SET_INVALID",
|
|
1002
|
+
invalid: invalid$1
|
|
1003
|
+
});
|
|
1004
|
+
setTimeout(() => {
|
|
1005
|
+
store.dispatch({
|
|
1006
|
+
type: "SET_INVALID",
|
|
1007
|
+
invalid: false
|
|
1008
|
+
});
|
|
1009
|
+
}, 2e3);
|
|
1010
|
+
}
|
|
1011
|
+
if (allRejectedFiles.length > 0) onFilesReject?.(allRejectedFiles);
|
|
1012
|
+
if (acceptedFiles.length > 0) {
|
|
1013
|
+
store.dispatch({
|
|
1014
|
+
type: "ADD_FILES",
|
|
1015
|
+
files: acceptedFiles
|
|
1016
|
+
});
|
|
1017
|
+
if (isControlled && onValueChange) onValueChange([...Array.from(store.getState().files.values()).map((f) => f.file)]);
|
|
1018
|
+
if (onAccept) onAccept(acceptedFiles);
|
|
1019
|
+
for (const file of acceptedFiles) onFileAccept?.(file);
|
|
1020
|
+
if (onUpload) requestAnimationFrame(() => {
|
|
1021
|
+
onFilesUpload(acceptedFiles);
|
|
1022
|
+
});
|
|
1023
|
+
}
|
|
1024
|
+
}, [
|
|
1025
|
+
store,
|
|
1026
|
+
isControlled,
|
|
1027
|
+
onValueChange,
|
|
1028
|
+
onAccept,
|
|
1029
|
+
onFileAccept,
|
|
1030
|
+
onUpload,
|
|
1031
|
+
onFilesUpload,
|
|
1032
|
+
maxFiles,
|
|
1033
|
+
onFileValidate,
|
|
1034
|
+
onFileReject,
|
|
1035
|
+
onFilesReject,
|
|
1036
|
+
acceptTypes,
|
|
1037
|
+
maxSize,
|
|
1038
|
+
disabled
|
|
1039
|
+
]);
|
|
1040
|
+
const onInputChange = React.useCallback((event) => {
|
|
1041
|
+
onFilesChange(Array.from(event.target.files ?? []));
|
|
1042
|
+
event.target.value = "";
|
|
1043
|
+
}, [onFilesChange]);
|
|
1044
|
+
const contextValue = React.useMemo(() => ({
|
|
1045
|
+
dropzoneId,
|
|
1046
|
+
inputId,
|
|
1047
|
+
listId,
|
|
1048
|
+
labelId,
|
|
1049
|
+
dir,
|
|
1050
|
+
disabled,
|
|
1051
|
+
inputRef,
|
|
1052
|
+
urlCache
|
|
1053
|
+
}), [
|
|
1054
|
+
dropzoneId,
|
|
1055
|
+
inputId,
|
|
1056
|
+
listId,
|
|
1057
|
+
labelId,
|
|
1058
|
+
dir,
|
|
1059
|
+
disabled,
|
|
1060
|
+
urlCache
|
|
1061
|
+
]);
|
|
1062
|
+
const RootPrimitive = asChild ? Slot : "div";
|
|
1063
|
+
return /* @__PURE__ */ jsx(StoreContext.Provider, {
|
|
1064
|
+
value: store,
|
|
1065
|
+
children: /* @__PURE__ */ jsx(FileUploadContext.Provider, {
|
|
1066
|
+
value: contextValue,
|
|
1067
|
+
children: /* @__PURE__ */ jsxs(RootPrimitive, {
|
|
1068
|
+
"data-disabled": disabled ? "" : void 0,
|
|
1069
|
+
"data-slot": "file-upload",
|
|
1070
|
+
dir,
|
|
1071
|
+
...rootProps,
|
|
1072
|
+
className: cn("relative flex flex-col gap-2", className),
|
|
1073
|
+
children: [
|
|
1074
|
+
children,
|
|
1075
|
+
/* @__PURE__ */ jsx("input", {
|
|
1076
|
+
type: "file",
|
|
1077
|
+
id: inputId,
|
|
1078
|
+
"aria-labelledby": labelId,
|
|
1079
|
+
"aria-describedby": dropzoneId,
|
|
1080
|
+
ref: inputRef,
|
|
1081
|
+
tabIndex: -1,
|
|
1082
|
+
accept,
|
|
1083
|
+
name,
|
|
1084
|
+
className: "sr-only",
|
|
1085
|
+
disabled,
|
|
1086
|
+
multiple,
|
|
1087
|
+
required,
|
|
1088
|
+
onChange: onInputChange
|
|
1089
|
+
}),
|
|
1090
|
+
/* @__PURE__ */ jsx("span", {
|
|
1091
|
+
id: labelId,
|
|
1092
|
+
className: "sr-only",
|
|
1093
|
+
children: label ?? "File upload"
|
|
1094
|
+
})
|
|
1095
|
+
]
|
|
1096
|
+
})
|
|
1097
|
+
})
|
|
1098
|
+
});
|
|
1099
|
+
}
|
|
1100
|
+
function FileUploadDropzone(props) {
|
|
1101
|
+
const { asChild, className, onClick: onClickProp, onDragOver: onDragOverProp, onDragEnter: onDragEnterProp, onDragLeave: onDragLeaveProp, onDrop: onDropProp, onPaste: onPasteProp, onKeyDown: onKeyDownProp, ...dropzoneProps } = props;
|
|
1102
|
+
const context = useFileUploadContext(DROPZONE_NAME);
|
|
1103
|
+
const store = useStoreContext(DROPZONE_NAME);
|
|
1104
|
+
const dragOver = useStore((state) => state.dragOver);
|
|
1105
|
+
const invalid = useStore((state) => state.invalid);
|
|
1106
|
+
const onClick = React.useCallback((event) => {
|
|
1107
|
+
onClickProp?.(event);
|
|
1108
|
+
if (event.defaultPrevented) return;
|
|
1109
|
+
const { target } = event;
|
|
1110
|
+
if (!(target instanceof HTMLElement && target.closest("[data-slot=\"file-upload-trigger\"]"))) context.inputRef.current?.click();
|
|
1111
|
+
}, [context.inputRef, onClickProp]);
|
|
1112
|
+
const onDragOver = React.useCallback((event) => {
|
|
1113
|
+
onDragOverProp?.(event);
|
|
1114
|
+
if (event.defaultPrevented) return;
|
|
1115
|
+
event.preventDefault();
|
|
1116
|
+
store.dispatch({
|
|
1117
|
+
type: "SET_DRAG_OVER",
|
|
1118
|
+
dragOver: true
|
|
1119
|
+
});
|
|
1120
|
+
}, [store, onDragOverProp]);
|
|
1121
|
+
const onDragEnter = React.useCallback((event) => {
|
|
1122
|
+
onDragEnterProp?.(event);
|
|
1123
|
+
if (event.defaultPrevented) return;
|
|
1124
|
+
event.preventDefault();
|
|
1125
|
+
store.dispatch({
|
|
1126
|
+
type: "SET_DRAG_OVER",
|
|
1127
|
+
dragOver: true
|
|
1128
|
+
});
|
|
1129
|
+
}, [store, onDragEnterProp]);
|
|
1130
|
+
const onDragLeave = React.useCallback((event) => {
|
|
1131
|
+
onDragLeaveProp?.(event);
|
|
1132
|
+
if (event.defaultPrevented) return;
|
|
1133
|
+
const { relatedTarget } = event;
|
|
1134
|
+
if (relatedTarget && relatedTarget instanceof Node && event.currentTarget.contains(relatedTarget)) return;
|
|
1135
|
+
event.preventDefault();
|
|
1136
|
+
store.dispatch({
|
|
1137
|
+
type: "SET_DRAG_OVER",
|
|
1138
|
+
dragOver: false
|
|
1139
|
+
});
|
|
1140
|
+
}, [store, onDragLeaveProp]);
|
|
1141
|
+
const onDrop = React.useCallback((event) => {
|
|
1142
|
+
onDropProp?.(event);
|
|
1143
|
+
if (event.defaultPrevented) return;
|
|
1144
|
+
event.preventDefault();
|
|
1145
|
+
store.dispatch({
|
|
1146
|
+
type: "SET_DRAG_OVER",
|
|
1147
|
+
dragOver: false
|
|
1148
|
+
});
|
|
1149
|
+
const files = Array.from(event.dataTransfer.files);
|
|
1150
|
+
const inputElement = context.inputRef.current;
|
|
1151
|
+
if (!inputElement) return;
|
|
1152
|
+
const dataTransfer = new DataTransfer();
|
|
1153
|
+
for (const file of files) dataTransfer.items.add(file);
|
|
1154
|
+
inputElement.files = dataTransfer.files;
|
|
1155
|
+
inputElement.dispatchEvent(new Event("change", { bubbles: true }));
|
|
1156
|
+
}, [
|
|
1157
|
+
store,
|
|
1158
|
+
context.inputRef,
|
|
1159
|
+
onDropProp
|
|
1160
|
+
]);
|
|
1161
|
+
const onPaste = React.useCallback((event) => {
|
|
1162
|
+
onPasteProp?.(event);
|
|
1163
|
+
if (event.defaultPrevented) return;
|
|
1164
|
+
event.preventDefault();
|
|
1165
|
+
store.dispatch({
|
|
1166
|
+
type: "SET_DRAG_OVER",
|
|
1167
|
+
dragOver: false
|
|
1168
|
+
});
|
|
1169
|
+
const items = event.clipboardData?.items;
|
|
1170
|
+
if (!items) return;
|
|
1171
|
+
const files = [];
|
|
1172
|
+
for (let i = 0; i < items.length; i++) {
|
|
1173
|
+
const item = items[i];
|
|
1174
|
+
if (item?.kind === "file") {
|
|
1175
|
+
const file = item.getAsFile();
|
|
1176
|
+
if (file) files.push(file);
|
|
1177
|
+
}
|
|
1178
|
+
}
|
|
1179
|
+
if (files.length === 0) return;
|
|
1180
|
+
const inputElement = context.inputRef.current;
|
|
1181
|
+
if (!inputElement) return;
|
|
1182
|
+
const dataTransfer = new DataTransfer();
|
|
1183
|
+
for (const file of files) dataTransfer.items.add(file);
|
|
1184
|
+
inputElement.files = dataTransfer.files;
|
|
1185
|
+
inputElement.dispatchEvent(new Event("change", { bubbles: true }));
|
|
1186
|
+
}, [
|
|
1187
|
+
store,
|
|
1188
|
+
context.inputRef,
|
|
1189
|
+
onPasteProp
|
|
1190
|
+
]);
|
|
1191
|
+
const onKeyDown = React.useCallback((event) => {
|
|
1192
|
+
onKeyDownProp?.(event);
|
|
1193
|
+
if (!event.defaultPrevented && (event.key === "Enter" || event.key === " ")) {
|
|
1194
|
+
event.preventDefault();
|
|
1195
|
+
context.inputRef.current?.click();
|
|
1196
|
+
}
|
|
1197
|
+
}, [context.inputRef, onKeyDownProp]);
|
|
1198
|
+
return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
|
|
1199
|
+
role: "region",
|
|
1200
|
+
id: context.dropzoneId,
|
|
1201
|
+
"aria-controls": `${context.inputId} ${context.listId}`,
|
|
1202
|
+
"aria-disabled": context.disabled,
|
|
1203
|
+
"aria-invalid": invalid,
|
|
1204
|
+
"data-disabled": context.disabled ? "" : void 0,
|
|
1205
|
+
"data-dragging": dragOver ? "" : void 0,
|
|
1206
|
+
"data-invalid": invalid ? "" : void 0,
|
|
1207
|
+
"data-slot": "file-upload-dropzone",
|
|
1208
|
+
dir: context.dir,
|
|
1209
|
+
tabIndex: context.disabled ? void 0 : 0,
|
|
1210
|
+
...dropzoneProps,
|
|
1211
|
+
className: cn("relative flex select-none flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-6 outline-none transition-colors hover:bg-accent/30 focus-visible:border-ring/50 data-disabled:pointer-events-none data-dragging:border-primary/30 data-invalid:border-destructive data-dragging:bg-accent/30 data-invalid:ring-destructive/20", className),
|
|
1212
|
+
onClick,
|
|
1213
|
+
onDragEnter,
|
|
1214
|
+
onDragLeave,
|
|
1215
|
+
onDragOver,
|
|
1216
|
+
onDrop,
|
|
1217
|
+
onKeyDown,
|
|
1218
|
+
onPaste
|
|
1219
|
+
});
|
|
1220
|
+
}
|
|
1221
|
+
function FileUploadTrigger(props) {
|
|
1222
|
+
const { asChild, onClick: onClickProp, ...triggerProps } = props;
|
|
1223
|
+
const context = useFileUploadContext(TRIGGER_NAME);
|
|
1224
|
+
const onClick = React.useCallback((event) => {
|
|
1225
|
+
onClickProp?.(event);
|
|
1226
|
+
if (event.defaultPrevented) return;
|
|
1227
|
+
context.inputRef.current?.click();
|
|
1228
|
+
}, [context.inputRef, onClickProp]);
|
|
1229
|
+
return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
|
|
1230
|
+
type: "button",
|
|
1231
|
+
"aria-controls": context.inputId,
|
|
1232
|
+
"data-disabled": context.disabled ? "" : void 0,
|
|
1233
|
+
"data-slot": "file-upload-trigger",
|
|
1234
|
+
...triggerProps,
|
|
1235
|
+
disabled: context.disabled,
|
|
1236
|
+
onClick
|
|
1237
|
+
});
|
|
1238
|
+
}
|
|
1239
|
+
function FileUploadList(props) {
|
|
1240
|
+
const { className, orientation = "vertical", asChild, forceMount, ...listProps } = props;
|
|
1241
|
+
const context = useFileUploadContext(LIST_NAME);
|
|
1242
|
+
const fileCount = useStore((state) => state.files.size);
|
|
1243
|
+
const shouldRender = forceMount || fileCount > 0;
|
|
1244
|
+
if (!shouldRender) return null;
|
|
1245
|
+
return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
|
|
1246
|
+
role: "list",
|
|
1247
|
+
id: context.listId,
|
|
1248
|
+
"aria-orientation": orientation,
|
|
1249
|
+
"data-orientation": orientation,
|
|
1250
|
+
"data-slot": "file-upload-list",
|
|
1251
|
+
"data-state": shouldRender ? "active" : "inactive",
|
|
1252
|
+
dir: context.dir,
|
|
1253
|
+
...listProps,
|
|
1254
|
+
className: cn("data-[state=inactive]:fade-out-0 data-[state=active]:fade-in-0 data-[state=inactive]:slide-out-to-top-2 data-[state=active]:slide-in-from-top-2 flex flex-col gap-2 data-[state=active]:animate-in data-[state=inactive]:animate-out", orientation === "horizontal" && "flex-row overflow-x-auto p-1.5", className)
|
|
1255
|
+
});
|
|
1256
|
+
}
|
|
1257
|
+
const FileUploadItemContext = React.createContext(null);
|
|
1258
|
+
function useFileUploadItemContext(consumerName) {
|
|
1259
|
+
const context = React.use(FileUploadItemContext);
|
|
1260
|
+
if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME}\``);
|
|
1261
|
+
return context;
|
|
1262
|
+
}
|
|
1263
|
+
function FileUploadItem(props) {
|
|
1264
|
+
const { value, asChild, className, ...itemProps } = props;
|
|
1265
|
+
const id = React.useId();
|
|
1266
|
+
const statusId = `${id}-status`;
|
|
1267
|
+
const nameId = `${id}-name`;
|
|
1268
|
+
const sizeId = `${id}-size`;
|
|
1269
|
+
const messageId = `${id}-message`;
|
|
1270
|
+
const context = useFileUploadContext(ITEM_NAME);
|
|
1271
|
+
const fileState = useStore((state) => state.files.get(value));
|
|
1272
|
+
const fileCount = useStore((state) => state.files.size);
|
|
1273
|
+
const fileIndex = useStore((state) => {
|
|
1274
|
+
return Array.from(state.files.keys()).indexOf(value) + 1;
|
|
1275
|
+
});
|
|
1276
|
+
const itemContext = React.useMemo(() => ({
|
|
1277
|
+
id,
|
|
1278
|
+
fileState,
|
|
1279
|
+
nameId,
|
|
1280
|
+
sizeId,
|
|
1281
|
+
statusId,
|
|
1282
|
+
messageId
|
|
1283
|
+
}), [
|
|
1284
|
+
id,
|
|
1285
|
+
fileState,
|
|
1286
|
+
statusId,
|
|
1287
|
+
nameId,
|
|
1288
|
+
sizeId,
|
|
1289
|
+
messageId
|
|
1290
|
+
]);
|
|
1291
|
+
if (!fileState) return null;
|
|
1292
|
+
const statusText = fileState.error ? `Error: ${fileState.error}` : fileState.status === "uploading" ? `Uploading: ${fileState.progress}% complete` : fileState.status === "success" ? "Upload complete" : "Ready to upload";
|
|
1293
|
+
const ItemPrimitive = asChild ? Slot : "div";
|
|
1294
|
+
return /* @__PURE__ */ jsx(FileUploadItemContext.Provider, {
|
|
1295
|
+
value: itemContext,
|
|
1296
|
+
children: /* @__PURE__ */ jsxs(ItemPrimitive, {
|
|
1297
|
+
role: "listitem",
|
|
1298
|
+
id,
|
|
1299
|
+
"aria-setsize": fileCount,
|
|
1300
|
+
"aria-posinset": fileIndex,
|
|
1301
|
+
"aria-describedby": `${nameId} ${sizeId} ${statusId} ${fileState.error ? messageId : ""}`,
|
|
1302
|
+
"aria-labelledby": nameId,
|
|
1303
|
+
"data-slot": "file-upload-item",
|
|
1304
|
+
dir: context.dir,
|
|
1305
|
+
...itemProps,
|
|
1306
|
+
className: cn("relative flex items-center rounded-md border p-3", className),
|
|
1307
|
+
children: [props.children, /* @__PURE__ */ jsx("span", {
|
|
1308
|
+
id: statusId,
|
|
1309
|
+
className: "sr-only",
|
|
1310
|
+
children: statusText
|
|
1311
|
+
})]
|
|
1312
|
+
})
|
|
1313
|
+
});
|
|
1314
|
+
}
|
|
1315
|
+
function formatBytes(bytes) {
|
|
1316
|
+
if (bytes === 0) return "0 B";
|
|
1317
|
+
const sizes = [
|
|
1318
|
+
"B",
|
|
1319
|
+
"KB",
|
|
1320
|
+
"MB",
|
|
1321
|
+
"GB",
|
|
1322
|
+
"TB"
|
|
1323
|
+
];
|
|
1324
|
+
const i = Math.floor(Math.log(bytes) / Math.log(1024));
|
|
1325
|
+
return `${(bytes / 1024 ** i).toFixed(i ? 1 : 0)} ${sizes[i]}`;
|
|
1326
|
+
}
|
|
1327
|
+
function getFileIcon(file) {
|
|
1328
|
+
const { type } = file;
|
|
1329
|
+
const extension = file.name.split(".").pop()?.toLowerCase() ?? "";
|
|
1330
|
+
if (type.startsWith("video/")) return /* @__PURE__ */ jsx(FileVideoIcon, {});
|
|
1331
|
+
if (type.startsWith("audio/")) return /* @__PURE__ */ jsx(FileAudioIcon, {});
|
|
1332
|
+
if (type.startsWith("text/") || [
|
|
1333
|
+
"txt",
|
|
1334
|
+
"md",
|
|
1335
|
+
"rtf",
|
|
1336
|
+
"pdf"
|
|
1337
|
+
].includes(extension)) return /* @__PURE__ */ jsx(FileTextIcon, {});
|
|
1338
|
+
if ([
|
|
1339
|
+
"html",
|
|
1340
|
+
"css",
|
|
1341
|
+
"js",
|
|
1342
|
+
"jsx",
|
|
1343
|
+
"ts",
|
|
1344
|
+
"tsx",
|
|
1345
|
+
"json",
|
|
1346
|
+
"xml",
|
|
1347
|
+
"php",
|
|
1348
|
+
"py",
|
|
1349
|
+
"rb",
|
|
1350
|
+
"java",
|
|
1351
|
+
"c",
|
|
1352
|
+
"cpp",
|
|
1353
|
+
"cs"
|
|
1354
|
+
].includes(extension)) return /* @__PURE__ */ jsx(FileCodeIcon, {});
|
|
1355
|
+
if ([
|
|
1356
|
+
"zip",
|
|
1357
|
+
"rar",
|
|
1358
|
+
"7z",
|
|
1359
|
+
"tar",
|
|
1360
|
+
"gz",
|
|
1361
|
+
"bz2"
|
|
1362
|
+
].includes(extension)) return /* @__PURE__ */ jsx(FileArchiveIcon, {});
|
|
1363
|
+
if ([
|
|
1364
|
+
"exe",
|
|
1365
|
+
"msi",
|
|
1366
|
+
"app",
|
|
1367
|
+
"apk",
|
|
1368
|
+
"deb",
|
|
1369
|
+
"rpm"
|
|
1370
|
+
].includes(extension) || type.startsWith("application/")) return /* @__PURE__ */ jsx(FileCogIcon, {});
|
|
1371
|
+
return /* @__PURE__ */ jsx(FileIcon, {});
|
|
1372
|
+
}
|
|
1373
|
+
function FileUploadItemPreview(props) {
|
|
1374
|
+
const { render, asChild, children, className, ...previewProps } = props;
|
|
1375
|
+
const itemContext = useFileUploadItemContext(ITEM_PREVIEW_NAME);
|
|
1376
|
+
const context = useFileUploadContext(ITEM_PREVIEW_NAME);
|
|
1377
|
+
const getDefaultRender = React.useCallback((file) => {
|
|
1378
|
+
if (itemContext.fileState?.file.type.startsWith("image/")) {
|
|
1379
|
+
let url = context.urlCache.get(file);
|
|
1380
|
+
if (!url) {
|
|
1381
|
+
url = URL.createObjectURL(file);
|
|
1382
|
+
context.urlCache.set(file, url);
|
|
1383
|
+
}
|
|
1384
|
+
return /* @__PURE__ */ jsx("img", {
|
|
1385
|
+
src: url,
|
|
1386
|
+
alt: file.name,
|
|
1387
|
+
className: "size-full object-cover"
|
|
1388
|
+
});
|
|
1389
|
+
}
|
|
1390
|
+
return getFileIcon(file);
|
|
1391
|
+
}, [itemContext.fileState?.file.type, context.urlCache]);
|
|
1392
|
+
const onPreviewRender = React.useCallback(async (file) => {
|
|
1393
|
+
if (render) return render(file, () => getDefaultRender(file));
|
|
1394
|
+
return getDefaultRender(file);
|
|
1395
|
+
}, [render, getDefaultRender]);
|
|
1396
|
+
if (!itemContext.fileState) return null;
|
|
1397
|
+
return /* @__PURE__ */ jsxs(asChild ? Slot : "div", {
|
|
1398
|
+
"aria-labelledby": itemContext.nameId,
|
|
1399
|
+
"data-slot": "file-upload-preview",
|
|
1400
|
+
...previewProps,
|
|
1401
|
+
className: cn("relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded border bg-accent/50 [&>svg]:size-10", className),
|
|
1402
|
+
children: [onPreviewRender(itemContext.fileState.file), children]
|
|
1403
|
+
});
|
|
1404
|
+
}
|
|
1405
|
+
function FileUploadItemMetadata(props) {
|
|
1406
|
+
const { asChild, size = "default", children, className, ...metadataProps } = props;
|
|
1407
|
+
const context = useFileUploadContext(ITEM_METADATA_NAME);
|
|
1408
|
+
const itemContext = useFileUploadItemContext(ITEM_METADATA_NAME);
|
|
1409
|
+
if (!itemContext.fileState) return null;
|
|
1410
|
+
return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
|
|
1411
|
+
"data-slot": "file-upload-metadata",
|
|
1412
|
+
dir: context.dir,
|
|
1413
|
+
...metadataProps,
|
|
1414
|
+
className: cn("flex min-w-0 flex-1 flex-col", className),
|
|
1415
|
+
children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1416
|
+
/* @__PURE__ */ jsx("span", {
|
|
1417
|
+
id: itemContext.nameId,
|
|
1418
|
+
className: cn("truncate font-medium text-sm", size === "sm" && "font-normal text-[13px] leading-snug"),
|
|
1419
|
+
children: itemContext.fileState.file.name
|
|
1420
|
+
}),
|
|
1421
|
+
/* @__PURE__ */ jsx("span", {
|
|
1422
|
+
id: itemContext.sizeId,
|
|
1423
|
+
className: cn("truncate text-muted-foreground text-xs", size === "sm" && "text-[11px] leading-snug"),
|
|
1424
|
+
children: formatBytes(itemContext.fileState.file.size)
|
|
1425
|
+
}),
|
|
1426
|
+
itemContext.fileState.error && /* @__PURE__ */ jsx("span", {
|
|
1427
|
+
id: itemContext.messageId,
|
|
1428
|
+
className: "text-destructive text-xs",
|
|
1429
|
+
children: itemContext.fileState.error
|
|
1430
|
+
})
|
|
1431
|
+
] })
|
|
1432
|
+
});
|
|
1433
|
+
}
|
|
1434
|
+
function FileUploadItemProgress(props) {
|
|
1435
|
+
const { variant = "linear", size = 40, asChild, forceMount, className, ...progressProps } = props;
|
|
1436
|
+
const itemContext = useFileUploadItemContext(ITEM_PROGRESS_NAME);
|
|
1437
|
+
if (!itemContext.fileState) return null;
|
|
1438
|
+
if (!(forceMount || itemContext.fileState.progress !== 100)) return null;
|
|
1439
|
+
const ItemProgressPrimitive = asChild ? Slot : "div";
|
|
1440
|
+
switch (variant) {
|
|
1441
|
+
case "circular": {
|
|
1442
|
+
const circumference = 2 * Math.PI * ((size - 4) / 2);
|
|
1443
|
+
const strokeDashoffset = circumference - itemContext.fileState.progress / 100 * circumference;
|
|
1444
|
+
return /* @__PURE__ */ jsx(ItemProgressPrimitive, {
|
|
1445
|
+
role: "progressbar",
|
|
1446
|
+
"aria-valuemin": 0,
|
|
1447
|
+
"aria-valuemax": 100,
|
|
1448
|
+
"aria-valuenow": itemContext.fileState.progress,
|
|
1449
|
+
"aria-valuetext": `${itemContext.fileState.progress}%`,
|
|
1450
|
+
"aria-labelledby": itemContext.nameId,
|
|
1451
|
+
"data-slot": "file-upload-progress",
|
|
1452
|
+
...progressProps,
|
|
1453
|
+
className: cn("-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2", className),
|
|
1454
|
+
children: /* @__PURE__ */ jsxs("svg", {
|
|
1455
|
+
className: "-rotate-90 transform",
|
|
1456
|
+
width: size,
|
|
1457
|
+
height: size,
|
|
1458
|
+
viewBox: `0 0 ${size} ${size}`,
|
|
1459
|
+
fill: "none",
|
|
1460
|
+
stroke: "currentColor",
|
|
1461
|
+
children: [/* @__PURE__ */ jsx("circle", {
|
|
1462
|
+
className: "text-primary/20",
|
|
1463
|
+
strokeWidth: "2",
|
|
1464
|
+
cx: size / 2,
|
|
1465
|
+
cy: size / 2,
|
|
1466
|
+
r: (size - 4) / 2
|
|
1467
|
+
}), /* @__PURE__ */ jsx("circle", {
|
|
1468
|
+
className: "text-primary transition-[stroke-dashoffset] duration-300 ease-linear",
|
|
1469
|
+
strokeWidth: "2",
|
|
1470
|
+
strokeLinecap: "round",
|
|
1471
|
+
strokeDasharray: circumference,
|
|
1472
|
+
strokeDashoffset,
|
|
1473
|
+
cx: size / 2,
|
|
1474
|
+
cy: size / 2,
|
|
1475
|
+
r: (size - 4) / 2
|
|
1476
|
+
})]
|
|
1477
|
+
})
|
|
1478
|
+
});
|
|
1479
|
+
}
|
|
1480
|
+
case "fill": {
|
|
1481
|
+
const progressPercentage = itemContext.fileState.progress;
|
|
1482
|
+
const topInset = 100 - progressPercentage;
|
|
1483
|
+
return /* @__PURE__ */ jsx(ItemProgressPrimitive, {
|
|
1484
|
+
role: "progressbar",
|
|
1485
|
+
"aria-valuemin": 0,
|
|
1486
|
+
"aria-valuemax": 100,
|
|
1487
|
+
"aria-valuenow": progressPercentage,
|
|
1488
|
+
"aria-valuetext": `${progressPercentage}%`,
|
|
1489
|
+
"aria-labelledby": itemContext.nameId,
|
|
1490
|
+
"data-slot": "file-upload-progress",
|
|
1491
|
+
...progressProps,
|
|
1492
|
+
className: cn("absolute inset-0 bg-primary/50 transition-[clip-path] duration-300 ease-linear", className),
|
|
1493
|
+
style: { clipPath: `inset(${topInset}% 0% 0% 0%)` }
|
|
1494
|
+
});
|
|
1495
|
+
}
|
|
1496
|
+
default: return /* @__PURE__ */ jsx(ItemProgressPrimitive, {
|
|
1497
|
+
role: "progressbar",
|
|
1498
|
+
"aria-valuemin": 0,
|
|
1499
|
+
"aria-valuemax": 100,
|
|
1500
|
+
"aria-valuenow": itemContext.fileState.progress,
|
|
1501
|
+
"aria-valuetext": `${itemContext.fileState.progress}%`,
|
|
1502
|
+
"aria-labelledby": itemContext.nameId,
|
|
1503
|
+
"data-slot": "file-upload-progress",
|
|
1504
|
+
...progressProps,
|
|
1505
|
+
className: cn("relative h-1.5 w-full overflow-hidden rounded-full bg-primary/20", className),
|
|
1506
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
1507
|
+
className: "h-full w-full flex-1 bg-primary transition-transform duration-300 ease-linear",
|
|
1508
|
+
style: { transform: `translateX(-${100 - itemContext.fileState.progress}%)` }
|
|
1509
|
+
})
|
|
1510
|
+
});
|
|
1511
|
+
}
|
|
1512
|
+
}
|
|
1513
|
+
function FileUploadItemDelete(props) {
|
|
1514
|
+
const { asChild, onClick: onClickProp, ...deleteProps } = props;
|
|
1515
|
+
const store = useStoreContext(ITEM_DELETE_NAME);
|
|
1516
|
+
const itemContext = useFileUploadItemContext(ITEM_DELETE_NAME);
|
|
1517
|
+
const onClick = React.useCallback((event) => {
|
|
1518
|
+
onClickProp?.(event);
|
|
1519
|
+
if (!itemContext.fileState || event.defaultPrevented) return;
|
|
1520
|
+
store.dispatch({
|
|
1521
|
+
type: "REMOVE_FILE",
|
|
1522
|
+
file: itemContext.fileState.file
|
|
1523
|
+
});
|
|
1524
|
+
}, [
|
|
1525
|
+
store,
|
|
1526
|
+
itemContext.fileState,
|
|
1527
|
+
onClickProp
|
|
1528
|
+
]);
|
|
1529
|
+
if (!itemContext.fileState) return null;
|
|
1530
|
+
return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
|
|
1531
|
+
type: "button",
|
|
1532
|
+
"aria-controls": itemContext.id,
|
|
1533
|
+
"aria-describedby": itemContext.nameId,
|
|
1534
|
+
"data-slot": "file-upload-item-delete",
|
|
1535
|
+
...deleteProps,
|
|
1536
|
+
onClick
|
|
1537
|
+
});
|
|
1538
|
+
}
|
|
1539
|
+
function FileUploadClear(props) {
|
|
1540
|
+
const { asChild, forceMount, disabled, onClick: onClickProp, ...clearProps } = props;
|
|
1541
|
+
const context = useFileUploadContext(CLEAR_NAME);
|
|
1542
|
+
const store = useStoreContext(CLEAR_NAME);
|
|
1543
|
+
const fileCount = useStore((state) => state.files.size);
|
|
1544
|
+
const isDisabled = disabled || context.disabled;
|
|
1545
|
+
const onClick = React.useCallback((event) => {
|
|
1546
|
+
onClickProp?.(event);
|
|
1547
|
+
if (event.defaultPrevented) return;
|
|
1548
|
+
store.dispatch({ type: "CLEAR" });
|
|
1549
|
+
}, [store, onClickProp]);
|
|
1550
|
+
if (!(forceMount || fileCount > 0)) return null;
|
|
1551
|
+
return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
|
|
1552
|
+
type: "button",
|
|
1553
|
+
"aria-controls": context.listId,
|
|
1554
|
+
"data-slot": "file-upload-clear",
|
|
1555
|
+
"data-disabled": isDisabled ? "" : void 0,
|
|
1556
|
+
...clearProps,
|
|
1557
|
+
disabled: isDisabled,
|
|
1558
|
+
onClick
|
|
1559
|
+
});
|
|
1560
|
+
}
|
|
1561
|
+
|
|
1562
|
+
//#endregion
|
|
1563
|
+
//#region src/components/ui/label.tsx
|
|
1564
|
+
function Label({ className, ...props }) {
|
|
1565
|
+
return /* @__PURE__ */ jsx(LabelPrimitive.Root, {
|
|
1566
|
+
"data-slot": "label",
|
|
1567
|
+
className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
|
|
1568
|
+
...props
|
|
1569
|
+
});
|
|
1570
|
+
}
|
|
1571
|
+
|
|
1572
|
+
//#endregion
|
|
1573
|
+
//#region src/components/ui/form.tsx
|
|
1574
|
+
const Form = FormProvider;
|
|
1575
|
+
const FormFieldContext = React.createContext({});
|
|
1576
|
+
function FormField({ ...props }) {
|
|
1577
|
+
return /* @__PURE__ */ jsx(FormFieldContext, {
|
|
1578
|
+
value: { name: props.name },
|
|
1579
|
+
children: /* @__PURE__ */ jsx(Controller, { ...props })
|
|
1580
|
+
});
|
|
1581
|
+
}
|
|
1582
|
+
function useFormField() {
|
|
1583
|
+
const fieldContext = React.use(FormFieldContext);
|
|
1584
|
+
const itemContext = React.use(FormItemContext);
|
|
1585
|
+
const { getFieldState } = useFormContext();
|
|
1586
|
+
const formState = useFormState({ name: fieldContext.name });
|
|
1587
|
+
const fieldState = getFieldState(fieldContext.name, formState);
|
|
1588
|
+
if (!fieldContext) throw new Error("useFormField should be used within <FormField>");
|
|
1589
|
+
const { id } = itemContext;
|
|
1590
|
+
return {
|
|
1591
|
+
id,
|
|
1592
|
+
name: fieldContext.name,
|
|
1593
|
+
formItemId: `${id}-form-item`,
|
|
1594
|
+
formDescriptionId: `${id}-form-item-description`,
|
|
1595
|
+
formMessageId: `${id}-form-item-message`,
|
|
1596
|
+
...fieldState
|
|
1597
|
+
};
|
|
1598
|
+
}
|
|
1599
|
+
const FormItemContext = React.createContext({});
|
|
1600
|
+
function FormItem({ className, ...props }) {
|
|
1601
|
+
return /* @__PURE__ */ jsx(FormItemContext, {
|
|
1602
|
+
value: { id: React.useId() },
|
|
1603
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
1604
|
+
"data-slot": "form-item",
|
|
1605
|
+
className: cn("grid gap-2", className),
|
|
1606
|
+
...props
|
|
1607
|
+
})
|
|
1608
|
+
});
|
|
1609
|
+
}
|
|
1610
|
+
function FormLabel({ className, ...props }) {
|
|
1611
|
+
const { error, formItemId } = useFormField();
|
|
1612
|
+
return /* @__PURE__ */ jsx(Label, {
|
|
1613
|
+
"data-slot": "form-label",
|
|
1614
|
+
"data-error": Boolean(error),
|
|
1615
|
+
className: cn("data-[error=true]:text-destructive", className),
|
|
1616
|
+
htmlFor: formItemId,
|
|
1617
|
+
...props
|
|
1618
|
+
});
|
|
1619
|
+
}
|
|
1620
|
+
function FormControl({ ...props }) {
|
|
1621
|
+
const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
|
|
1622
|
+
return /* @__PURE__ */ jsx(Slot, {
|
|
1623
|
+
"data-slot": "form-control",
|
|
1624
|
+
id: formItemId,
|
|
1625
|
+
"aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
|
|
1626
|
+
"aria-invalid": Boolean(error),
|
|
1627
|
+
...props
|
|
1628
|
+
});
|
|
1629
|
+
}
|
|
1630
|
+
function FormDescription({ className, ...props }) {
|
|
1631
|
+
const { formDescriptionId } = useFormField();
|
|
1632
|
+
return /* @__PURE__ */ jsx("p", {
|
|
1633
|
+
"data-slot": "form-description",
|
|
1634
|
+
id: formDescriptionId,
|
|
1635
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
1636
|
+
...props
|
|
1637
|
+
});
|
|
1638
|
+
}
|
|
1639
|
+
function FormMessage({ className, ...props }) {
|
|
1640
|
+
const { error, formMessageId } = useFormField();
|
|
1641
|
+
const body = error ? String(error?.message ?? "") : props.children;
|
|
1642
|
+
if (!body) return null;
|
|
1643
|
+
return /* @__PURE__ */ jsx("p", {
|
|
1644
|
+
"data-slot": "form-message",
|
|
1645
|
+
id: formMessageId,
|
|
1646
|
+
className: cn("text-destructive text-sm", className),
|
|
1647
|
+
...props,
|
|
1648
|
+
children: body
|
|
1649
|
+
});
|
|
1650
|
+
}
|
|
1651
|
+
|
|
1652
|
+
//#endregion
|
|
1653
|
+
//#region src/components/ui/input.tsx
|
|
1654
|
+
function Input({ className, type, ...props }) {
|
|
1655
|
+
return /* @__PURE__ */ jsx("input", {
|
|
1656
|
+
type,
|
|
1657
|
+
"data-slot": "input",
|
|
1658
|
+
className: cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className),
|
|
1659
|
+
...props
|
|
1660
|
+
});
|
|
1661
|
+
}
|
|
1662
|
+
|
|
1663
|
+
//#endregion
|
|
1664
|
+
//#region src/components/ui/separator.tsx
|
|
1665
|
+
function Separator({ className, orientation = "horizontal", decorative = true, ...props }) {
|
|
1666
|
+
return /* @__PURE__ */ jsx(SeparatorPrimitive.Root, {
|
|
1667
|
+
"data-slot": "separator",
|
|
1668
|
+
decorative,
|
|
1669
|
+
orientation,
|
|
1670
|
+
className: cn("bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", className),
|
|
1671
|
+
...props
|
|
1672
|
+
});
|
|
1673
|
+
}
|
|
1674
|
+
|
|
1675
|
+
//#endregion
|
|
1676
|
+
//#region src/components/ui/OrContinueWithSeparator.tsx
|
|
1677
|
+
/**
|
|
1678
|
+
* A separator with a label for alternative sign-in methods.
|
|
1679
|
+
* Used in authentication forms to visually separate sections.
|
|
1680
|
+
*/
|
|
1681
|
+
function OrContinueWithSeparator() {
|
|
1682
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
1683
|
+
className: "relative my-4",
|
|
1684
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
1685
|
+
className: "absolute inset-0 flex items-center",
|
|
1686
|
+
children: /* @__PURE__ */ jsx(Separator, {})
|
|
1687
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
1688
|
+
className: "relative flex justify-center text-xs uppercase",
|
|
1689
|
+
children: /* @__PURE__ */ jsx("span", {
|
|
1690
|
+
className: "bg-background text-muted-foreground px-2",
|
|
1691
|
+
children: "Or continue with"
|
|
1692
|
+
})
|
|
1693
|
+
})]
|
|
1694
|
+
});
|
|
1695
|
+
}
|
|
1696
|
+
|
|
1697
|
+
//#endregion
|
|
1698
|
+
//#region src/components/ui/pagination.tsx
|
|
1699
|
+
function Pagination({ className, ...props }) {
|
|
1700
|
+
return /* @__PURE__ */ jsx("nav", {
|
|
1701
|
+
role: "navigation",
|
|
1702
|
+
"aria-label": "pagination",
|
|
1703
|
+
"data-slot": "pagination",
|
|
1704
|
+
className: cn("mx-auto flex w-full justify-center", className),
|
|
1705
|
+
...props
|
|
1706
|
+
});
|
|
1707
|
+
}
|
|
1708
|
+
function PaginationContent({ className, ...props }) {
|
|
1709
|
+
return /* @__PURE__ */ jsx("ul", {
|
|
1710
|
+
"data-slot": "pagination-content",
|
|
1711
|
+
className: cn("flex flex-row items-center gap-1", className),
|
|
1712
|
+
...props
|
|
1713
|
+
});
|
|
1714
|
+
}
|
|
1715
|
+
function PaginationItem({ ...props }) {
|
|
1716
|
+
return /* @__PURE__ */ jsx("li", {
|
|
1717
|
+
"data-slot": "pagination-item",
|
|
1718
|
+
...props
|
|
1719
|
+
});
|
|
1720
|
+
}
|
|
1721
|
+
function PaginationLink({ className, isActive, size = "icon", ...props }) {
|
|
1722
|
+
return /* @__PURE__ */ jsx("a", {
|
|
1723
|
+
"aria-current": isActive ? "page" : void 0,
|
|
1724
|
+
"data-slot": "pagination-link",
|
|
1725
|
+
"data-active": isActive,
|
|
1726
|
+
className: cn(buttonVariants$1({
|
|
1727
|
+
variant: isActive ? "outline" : "ghost",
|
|
1728
|
+
size
|
|
1729
|
+
}), className),
|
|
1730
|
+
...props
|
|
1731
|
+
});
|
|
1732
|
+
}
|
|
1733
|
+
function PaginationPrevious({ className, ...props }) {
|
|
1734
|
+
return /* @__PURE__ */ jsxs(PaginationLink, {
|
|
1735
|
+
"aria-label": "Go to previous page",
|
|
1736
|
+
size: "default",
|
|
1737
|
+
className: cn("gap-1 px-2.5 sm:pl-2.5", className),
|
|
1738
|
+
...props,
|
|
1739
|
+
children: [/* @__PURE__ */ jsx(ChevronLeftIcon, {}), /* @__PURE__ */ jsx("span", {
|
|
1740
|
+
className: "hidden sm:block",
|
|
1741
|
+
children: "Previous"
|
|
1742
|
+
})]
|
|
1743
|
+
});
|
|
1744
|
+
}
|
|
1745
|
+
function PaginationNext({ className, ...props }) {
|
|
1746
|
+
return /* @__PURE__ */ jsxs(PaginationLink, {
|
|
1747
|
+
"aria-label": "Go to next page",
|
|
1748
|
+
size: "default",
|
|
1749
|
+
className: cn("gap-1 px-2.5 sm:pr-2.5", className),
|
|
1750
|
+
...props,
|
|
1751
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
1752
|
+
className: "hidden sm:block",
|
|
1753
|
+
children: "Next"
|
|
1754
|
+
}), /* @__PURE__ */ jsx(ChevronRightIcon, {})]
|
|
1755
|
+
});
|
|
1756
|
+
}
|
|
1757
|
+
function PaginationEllipsis({ className, ...props }) {
|
|
1758
|
+
return /* @__PURE__ */ jsxs("span", {
|
|
1759
|
+
"aria-hidden": true,
|
|
1760
|
+
"data-slot": "pagination-ellipsis",
|
|
1761
|
+
className: cn("flex size-9 items-center justify-center", className),
|
|
1762
|
+
...props,
|
|
1763
|
+
children: [/* @__PURE__ */ jsx(MoreHorizontalIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
|
|
1764
|
+
className: "sr-only",
|
|
1765
|
+
children: "More pages"
|
|
1766
|
+
})]
|
|
1767
|
+
});
|
|
1768
|
+
}
|
|
1769
|
+
|
|
1770
|
+
//#endregion
|
|
1771
|
+
//#region src/components/ui/popover.tsx
|
|
1772
|
+
function Popover({ ...props }) {
|
|
1773
|
+
return /* @__PURE__ */ jsx(PopoverPrimitive.Root, {
|
|
1774
|
+
"data-slot": "popover",
|
|
1775
|
+
...props
|
|
1776
|
+
});
|
|
1777
|
+
}
|
|
1778
|
+
function PopoverTrigger({ ...props }) {
|
|
1779
|
+
return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
|
|
1780
|
+
"data-slot": "popover-trigger",
|
|
1781
|
+
...props
|
|
1782
|
+
});
|
|
1783
|
+
}
|
|
1784
|
+
function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
|
|
1785
|
+
return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
|
|
1786
|
+
"data-slot": "popover-content",
|
|
1787
|
+
align,
|
|
1788
|
+
sideOffset,
|
|
1789
|
+
className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden", className),
|
|
1790
|
+
...props
|
|
1791
|
+
}) });
|
|
1792
|
+
}
|
|
1793
|
+
function PopoverAnchor({ ...props }) {
|
|
1794
|
+
return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, {
|
|
1795
|
+
"data-slot": "popover-anchor",
|
|
1796
|
+
...props
|
|
1797
|
+
});
|
|
1798
|
+
}
|
|
1799
|
+
|
|
1800
|
+
//#endregion
|
|
1801
|
+
//#region src/components/ui/radio-group.tsx
|
|
1802
|
+
function RadioGroup({ className, ...props }) {
|
|
1803
|
+
return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, {
|
|
1804
|
+
"data-slot": "radio-group",
|
|
1805
|
+
className: cn("grid gap-3", className),
|
|
1806
|
+
...props
|
|
1807
|
+
});
|
|
1808
|
+
}
|
|
1809
|
+
function RadioGroupItem({ className, ...props }) {
|
|
1810
|
+
return /* @__PURE__ */ jsx(RadioGroupPrimitive.Item, {
|
|
1811
|
+
"data-slot": "radio-group-item",
|
|
1812
|
+
className: cn("border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className),
|
|
1813
|
+
...props,
|
|
1814
|
+
children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, {
|
|
1815
|
+
"data-slot": "radio-group-indicator",
|
|
1816
|
+
className: "relative flex items-center justify-center",
|
|
1817
|
+
children: /* @__PURE__ */ jsx(CircleIcon, { className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" })
|
|
1818
|
+
})
|
|
1819
|
+
});
|
|
1820
|
+
}
|
|
1821
|
+
|
|
1822
|
+
//#endregion
|
|
1823
|
+
//#region src/components/ui/select.tsx
|
|
1824
|
+
function Select({ ...props }) {
|
|
1825
|
+
return /* @__PURE__ */ jsx(SelectPrimitive.Root, {
|
|
1826
|
+
"data-slot": "select",
|
|
1827
|
+
...props
|
|
1828
|
+
});
|
|
1829
|
+
}
|
|
1830
|
+
function SelectGroup({ ...props }) {
|
|
1831
|
+
return /* @__PURE__ */ jsx(SelectPrimitive.Group, {
|
|
1832
|
+
"data-slot": "select-group",
|
|
1833
|
+
...props
|
|
1834
|
+
});
|
|
1835
|
+
}
|
|
1836
|
+
function SelectValue({ ...props }) {
|
|
1837
|
+
return /* @__PURE__ */ jsx(SelectPrimitive.Value, {
|
|
1838
|
+
"data-slot": "select-value",
|
|
1839
|
+
...props
|
|
1840
|
+
});
|
|
1841
|
+
}
|
|
1842
|
+
function SelectTrigger({ className, size = "default", children, ...props }) {
|
|
1843
|
+
return /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
|
|
1844
|
+
"data-slot": "select-trigger",
|
|
1845
|
+
"data-size": size,
|
|
1846
|
+
className: cn("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
1847
|
+
...props,
|
|
1848
|
+
children: [children, /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
|
|
1849
|
+
asChild: true,
|
|
1850
|
+
children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" })
|
|
1851
|
+
})]
|
|
1852
|
+
});
|
|
1853
|
+
}
|
|
1854
|
+
function SelectContent({ className, children, position = "popper", align = "center", ...props }) {
|
|
1855
|
+
return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(SelectPrimitive.Content, {
|
|
1856
|
+
"data-slot": "select-content",
|
|
1857
|
+
className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md", 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", className),
|
|
1858
|
+
position,
|
|
1859
|
+
align,
|
|
1860
|
+
...props,
|
|
1861
|
+
children: [
|
|
1862
|
+
/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
|
|
1863
|
+
/* @__PURE__ */ jsx(SelectPrimitive.Viewport, {
|
|
1864
|
+
className: cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"),
|
|
1865
|
+
children
|
|
1866
|
+
}),
|
|
1867
|
+
/* @__PURE__ */ jsx(SelectScrollDownButton, {})
|
|
1868
|
+
]
|
|
1869
|
+
}) });
|
|
1870
|
+
}
|
|
1871
|
+
function SelectLabel({ className, ...props }) {
|
|
1872
|
+
return /* @__PURE__ */ jsx(SelectPrimitive.Label, {
|
|
1873
|
+
"data-slot": "select-label",
|
|
1874
|
+
className: cn("text-muted-foreground px-2 py-1.5 text-xs", className),
|
|
1875
|
+
...props
|
|
1876
|
+
});
|
|
1877
|
+
}
|
|
1878
|
+
function SelectItem({ className, children, ...props }) {
|
|
1879
|
+
return /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
|
|
1880
|
+
"data-slot": "select-item",
|
|
1881
|
+
className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
|
|
1882
|
+
...props,
|
|
1883
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
1884
|
+
className: "absolute right-2 flex size-3.5 items-center justify-center",
|
|
1885
|
+
children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
|
|
1886
|
+
}), /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })]
|
|
1887
|
+
});
|
|
1888
|
+
}
|
|
1889
|
+
function SelectSeparator({ className, ...props }) {
|
|
1890
|
+
return /* @__PURE__ */ jsx(SelectPrimitive.Separator, {
|
|
1891
|
+
"data-slot": "select-separator",
|
|
1892
|
+
className: cn("bg-border pointer-events-none -mx-1 my-1 h-px", className),
|
|
1893
|
+
...props
|
|
1894
|
+
});
|
|
1895
|
+
}
|
|
1896
|
+
function SelectScrollUpButton({ className, ...props }) {
|
|
1897
|
+
return /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, {
|
|
1898
|
+
"data-slot": "select-scroll-up-button",
|
|
1899
|
+
className: cn("flex cursor-default items-center justify-center py-1", className),
|
|
1900
|
+
...props,
|
|
1901
|
+
children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" })
|
|
1902
|
+
});
|
|
1903
|
+
}
|
|
1904
|
+
function SelectScrollDownButton({ className, ...props }) {
|
|
1905
|
+
return /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, {
|
|
1906
|
+
"data-slot": "select-scroll-down-button",
|
|
1907
|
+
className: cn("flex cursor-default items-center justify-center py-1", className),
|
|
1908
|
+
...props,
|
|
1909
|
+
children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
|
|
1910
|
+
});
|
|
1911
|
+
}
|
|
1912
|
+
|
|
1913
|
+
//#endregion
|
|
1914
|
+
//#region src/components/ui/shadcn-io/tags/index.tsx
|
|
1915
|
+
const TagsContext = createContext({
|
|
1916
|
+
value: void 0,
|
|
1917
|
+
setValue: void 0,
|
|
1918
|
+
open: false,
|
|
1919
|
+
onOpenChange: () => {},
|
|
1920
|
+
width: void 0,
|
|
1921
|
+
setWidth: void 0
|
|
1922
|
+
});
|
|
1923
|
+
function useTagsContext() {
|
|
1924
|
+
const context = use(TagsContext);
|
|
1925
|
+
if (!context) throw new Error("useTagsContext must be used within a TagsProvider");
|
|
1926
|
+
return context;
|
|
1927
|
+
}
|
|
1928
|
+
function Tags({ value, setValue, open: controlledOpen, onOpenChange: controlledOnOpenChange, children, className }) {
|
|
1929
|
+
const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
|
|
1930
|
+
const [width, setWidth] = useState();
|
|
1931
|
+
const ref = useRef(null);
|
|
1932
|
+
const open = controlledOpen ?? uncontrolledOpen;
|
|
1933
|
+
const onOpenChange = controlledOnOpenChange ?? setUncontrolledOpen;
|
|
1934
|
+
useEffect(() => {
|
|
1935
|
+
if (!ref.current) return;
|
|
1936
|
+
const resizeObserver = new ResizeObserver((entries) => {
|
|
1937
|
+
if (entries[0]) setWidth(entries[0].contentRect.width);
|
|
1938
|
+
});
|
|
1939
|
+
resizeObserver.observe(ref.current);
|
|
1940
|
+
return () => {
|
|
1941
|
+
resizeObserver.disconnect();
|
|
1942
|
+
};
|
|
1943
|
+
}, []);
|
|
1944
|
+
return /* @__PURE__ */ jsx(TagsContext.Provider, {
|
|
1945
|
+
value: {
|
|
1946
|
+
value,
|
|
1947
|
+
setValue,
|
|
1948
|
+
open,
|
|
1949
|
+
onOpenChange,
|
|
1950
|
+
width,
|
|
1951
|
+
setWidth
|
|
1952
|
+
},
|
|
1953
|
+
children: /* @__PURE__ */ jsx(Popover, {
|
|
1954
|
+
onOpenChange,
|
|
1955
|
+
open,
|
|
1956
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
1957
|
+
className: cn("relative w-full", className),
|
|
1958
|
+
ref,
|
|
1959
|
+
children
|
|
1960
|
+
})
|
|
1961
|
+
})
|
|
1962
|
+
});
|
|
1963
|
+
}
|
|
1964
|
+
function TagsTrigger({ className, children, ...props }) {
|
|
1965
|
+
return /* @__PURE__ */ jsx(PopoverTrigger, {
|
|
1966
|
+
asChild: true,
|
|
1967
|
+
children: /* @__PURE__ */ jsx(Button, {
|
|
1968
|
+
className: cn("h-auto w-full justify-between p-2", className),
|
|
1969
|
+
role: "combobox",
|
|
1970
|
+
variant: "outline",
|
|
1971
|
+
...props,
|
|
1972
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
1973
|
+
className: "flex flex-wrap items-center gap-1",
|
|
1974
|
+
children: [children, /* @__PURE__ */ jsx("span", {
|
|
1975
|
+
className: "px-2 py-px text-muted-foreground",
|
|
1976
|
+
children: "Select a tag..."
|
|
1977
|
+
})]
|
|
1978
|
+
})
|
|
1979
|
+
})
|
|
1980
|
+
});
|
|
1981
|
+
}
|
|
1982
|
+
function TagsValue({ className, children, onRemove, ...props }) {
|
|
1983
|
+
const handleRemove = (event) => {
|
|
1984
|
+
event.preventDefault();
|
|
1985
|
+
event.stopPropagation();
|
|
1986
|
+
onRemove?.();
|
|
1987
|
+
};
|
|
1988
|
+
return /* @__PURE__ */ jsxs(Badge, {
|
|
1989
|
+
className: cn("flex items-center gap-2", className),
|
|
1990
|
+
...props,
|
|
1991
|
+
children: [children, onRemove && /* @__PURE__ */ jsx("div", {
|
|
1992
|
+
className: "size-auto cursor-pointer hover:text-muted-foreground",
|
|
1993
|
+
onClick: handleRemove,
|
|
1994
|
+
children: /* @__PURE__ */ jsx(XIcon, { size: 12 })
|
|
1995
|
+
})]
|
|
1996
|
+
});
|
|
1997
|
+
}
|
|
1998
|
+
function TagsContent({ className, children, ...props }) {
|
|
1999
|
+
const { width } = useTagsContext();
|
|
2000
|
+
return /* @__PURE__ */ jsx(PopoverContent, {
|
|
2001
|
+
className: cn("p-0", className),
|
|
2002
|
+
style: { width },
|
|
2003
|
+
...props,
|
|
2004
|
+
children: /* @__PURE__ */ jsx(Command, { children })
|
|
2005
|
+
});
|
|
2006
|
+
}
|
|
2007
|
+
function TagsInput({ className, ...props }) {
|
|
2008
|
+
return /* @__PURE__ */ jsx(CommandInput, {
|
|
2009
|
+
className: cn("h-9", className),
|
|
2010
|
+
...props
|
|
2011
|
+
});
|
|
2012
|
+
}
|
|
2013
|
+
function TagsList({ className, ...props }) {
|
|
2014
|
+
return /* @__PURE__ */ jsx(CommandList, {
|
|
2015
|
+
className: cn("max-h-[200px]", className),
|
|
2016
|
+
...props
|
|
2017
|
+
});
|
|
2018
|
+
}
|
|
2019
|
+
function TagsEmpty({ children, className, ...props }) {
|
|
2020
|
+
return /* @__PURE__ */ jsx(CommandEmpty, {
|
|
2021
|
+
...props,
|
|
2022
|
+
children: children ?? "No tags found."
|
|
2023
|
+
});
|
|
2024
|
+
}
|
|
2025
|
+
const TagsGroup = CommandGroup;
|
|
2026
|
+
function TagsItem({ className, ...props }) {
|
|
2027
|
+
return /* @__PURE__ */ jsx(CommandItem, {
|
|
2028
|
+
className: cn("cursor-pointer items-center justify-between", className),
|
|
2029
|
+
...props
|
|
2030
|
+
});
|
|
2031
|
+
}
|
|
2032
|
+
|
|
2033
|
+
//#endregion
|
|
2034
|
+
//#region src/components/ui/shadcn-io/tags-input-inline/index.tsx
|
|
2035
|
+
function TagsInputInLineRoot({ className, ...props }) {
|
|
2036
|
+
return /* @__PURE__ */ jsx(TagsInputPrimitive.Root, {
|
|
2037
|
+
"data-slot": "tags-input",
|
|
2038
|
+
className: cn("flex w-full flex-col", className),
|
|
2039
|
+
...props
|
|
2040
|
+
});
|
|
2041
|
+
}
|
|
2042
|
+
function TagsInputInLineLabel({ className, ...props }) {
|
|
2043
|
+
return /* @__PURE__ */ jsx(TagsInputPrimitive.Label, {
|
|
2044
|
+
"data-slot": "tags-input-label",
|
|
2045
|
+
className: cn("font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", className),
|
|
2046
|
+
...props
|
|
2047
|
+
});
|
|
2048
|
+
}
|
|
2049
|
+
function TagsInputInLineList({ className, ...props }) {
|
|
2050
|
+
return /* @__PURE__ */ jsx("div", {
|
|
2051
|
+
"data-slot": "tags-input-list",
|
|
2052
|
+
className: cn("flex min-h-10 w-full flex-wrap items-center gap-1.5 rounded-md border border-input bg-background px-3 py-2 text-sm focus-within:ring-1 focus-within:ring-ring disabled:cursor-not-allowed disabled:opacity-50", className),
|
|
2053
|
+
...props
|
|
2054
|
+
});
|
|
2055
|
+
}
|
|
2056
|
+
function TagsInputInLineInput({ className, ...props }) {
|
|
2057
|
+
return /* @__PURE__ */ jsx(TagsInputPrimitive.Input, {
|
|
2058
|
+
"data-slot": "tags-input-input",
|
|
2059
|
+
className: cn("flex-1 bg-transparent outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", className),
|
|
2060
|
+
...props
|
|
2061
|
+
});
|
|
2062
|
+
}
|
|
2063
|
+
function TagsInputInLineItem({ className, children, ...props }) {
|
|
2064
|
+
return /* @__PURE__ */ jsxs(TagsInputPrimitive.Item, {
|
|
2065
|
+
"data-slot": "tags-input-item",
|
|
2066
|
+
className: cn("inline-flex max-w-[calc(100%-8px)] items-center gap-1.5 rounded border bg-transparent px-2.5 py-1 text-sm focus:outline-hidden data-disabled:cursor-not-allowed data-editable:select-none data-editing:bg-transparent data-disabled:opacity-50 data-editing:ring-1 data-editing:ring-ring [&:not([data-editing])]:pr-1.5 [&[data-highlighted]:not([data-editing])]:bg-accent [&[data-highlighted]:not([data-editing])]:text-accent-foreground", className),
|
|
2067
|
+
...props,
|
|
2068
|
+
children: [/* @__PURE__ */ jsx(TagsInputPrimitive.ItemText, {
|
|
2069
|
+
className: "truncate",
|
|
2070
|
+
children
|
|
2071
|
+
}), /* @__PURE__ */ jsx(TagsInputPrimitive.ItemDelete, {
|
|
2072
|
+
className: "size-4 shrink-0 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100",
|
|
2073
|
+
children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
|
|
2074
|
+
})]
|
|
2075
|
+
});
|
|
2076
|
+
}
|
|
2077
|
+
function TagsInputInLineClear({ ...props }) {
|
|
2078
|
+
return /* @__PURE__ */ jsx(TagsInputPrimitive.Clear, {
|
|
2079
|
+
"data-slot": "tags-input-clear",
|
|
2080
|
+
...props
|
|
2081
|
+
});
|
|
2082
|
+
}
|
|
2083
|
+
|
|
2084
|
+
//#endregion
|
|
2085
|
+
//#region src/components/ui/sheet.tsx
|
|
2086
|
+
function Sheet({ ...props }) {
|
|
2087
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Root, {
|
|
2088
|
+
"data-slot": "sheet",
|
|
2089
|
+
...props
|
|
2090
|
+
});
|
|
2091
|
+
}
|
|
2092
|
+
function SheetTrigger({ ...props }) {
|
|
2093
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, {
|
|
2094
|
+
"data-slot": "sheet-trigger",
|
|
2095
|
+
...props
|
|
2096
|
+
});
|
|
2097
|
+
}
|
|
2098
|
+
function SheetClose({ ...props }) {
|
|
2099
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Close, {
|
|
2100
|
+
"data-slot": "sheet-close",
|
|
2101
|
+
...props
|
|
2102
|
+
});
|
|
2103
|
+
}
|
|
2104
|
+
function SheetPortal({ ...props }) {
|
|
2105
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Portal, {
|
|
2106
|
+
"data-slot": "sheet-portal",
|
|
2107
|
+
...props
|
|
2108
|
+
});
|
|
2109
|
+
}
|
|
2110
|
+
function SheetOverlay({ className, ...props }) {
|
|
2111
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
|
|
2112
|
+
"data-slot": "sheet-overlay",
|
|
2113
|
+
className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className),
|
|
2114
|
+
...props
|
|
2115
|
+
});
|
|
2116
|
+
}
|
|
2117
|
+
function SheetContent({ className, children, side = "right", ...props }) {
|
|
2118
|
+
return /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
|
|
2119
|
+
"data-slot": "sheet-content",
|
|
2120
|
+
className: cn("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm", side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm", side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b", side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t", className),
|
|
2121
|
+
...props,
|
|
2122
|
+
children: [children, /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
|
|
2123
|
+
className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",
|
|
2124
|
+
children: [/* @__PURE__ */ jsx(XIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
|
|
2125
|
+
className: "sr-only",
|
|
2126
|
+
children: "Close"
|
|
2127
|
+
})]
|
|
2128
|
+
})]
|
|
2129
|
+
})] });
|
|
2130
|
+
}
|
|
2131
|
+
function SheetHeader({ className, ...props }) {
|
|
2132
|
+
return /* @__PURE__ */ jsx("div", {
|
|
2133
|
+
"data-slot": "sheet-header",
|
|
2134
|
+
className: cn("flex flex-col gap-1.5 p-4", className),
|
|
2135
|
+
...props
|
|
2136
|
+
});
|
|
2137
|
+
}
|
|
2138
|
+
function SheetFooter({ className, ...props }) {
|
|
2139
|
+
return /* @__PURE__ */ jsx("div", {
|
|
2140
|
+
"data-slot": "sheet-footer",
|
|
2141
|
+
className: cn("mt-auto flex flex-col gap-2 p-4", className),
|
|
2142
|
+
...props
|
|
2143
|
+
});
|
|
2144
|
+
}
|
|
2145
|
+
function SheetTitle({ className, ...props }) {
|
|
2146
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Title, {
|
|
2147
|
+
"data-slot": "sheet-title",
|
|
2148
|
+
className: cn("text-foreground font-semibold", className),
|
|
2149
|
+
...props
|
|
2150
|
+
});
|
|
2151
|
+
}
|
|
2152
|
+
function SheetDescription({ className, ...props }) {
|
|
2153
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Description, {
|
|
2154
|
+
"data-slot": "sheet-description",
|
|
2155
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
2156
|
+
...props
|
|
2157
|
+
});
|
|
2158
|
+
}
|
|
2159
|
+
|
|
2160
|
+
//#endregion
|
|
2161
|
+
//#region src/components/ui/slider.tsx
|
|
2162
|
+
function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }) {
|
|
2163
|
+
const _values = React.useMemo(() => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max], [
|
|
2164
|
+
value,
|
|
2165
|
+
defaultValue,
|
|
2166
|
+
min,
|
|
2167
|
+
max
|
|
2168
|
+
]);
|
|
2169
|
+
return /* @__PURE__ */ jsxs(SliderPrimitive.Root, {
|
|
2170
|
+
"data-slot": "slider",
|
|
2171
|
+
defaultValue,
|
|
2172
|
+
value,
|
|
2173
|
+
min,
|
|
2174
|
+
max,
|
|
2175
|
+
className: cn("relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className),
|
|
2176
|
+
...props,
|
|
2177
|
+
children: [/* @__PURE__ */ jsx(SliderPrimitive.Track, {
|
|
2178
|
+
"data-slot": "slider-track",
|
|
2179
|
+
className: cn("bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"),
|
|
2180
|
+
children: /* @__PURE__ */ jsx(SliderPrimitive.Range, {
|
|
2181
|
+
"data-slot": "slider-range",
|
|
2182
|
+
className: cn("bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full")
|
|
2183
|
+
})
|
|
2184
|
+
}), Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx(SliderPrimitive.Thumb, {
|
|
2185
|
+
"data-slot": "slider-thumb",
|
|
2186
|
+
className: "border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
|
|
2187
|
+
}, index))]
|
|
2188
|
+
});
|
|
2189
|
+
}
|
|
2190
|
+
|
|
2191
|
+
//#endregion
|
|
2192
|
+
//#region src/components/ui/switch.tsx
|
|
2193
|
+
function Switch({ className, ...props }) {
|
|
2194
|
+
return /* @__PURE__ */ jsx(SwitchPrimitive.Root, {
|
|
2195
|
+
"data-slot": "switch",
|
|
2196
|
+
className: cn("peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className),
|
|
2197
|
+
...props,
|
|
2198
|
+
children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, {
|
|
2199
|
+
"data-slot": "switch-thumb",
|
|
2200
|
+
className: cn("bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0")
|
|
2201
|
+
})
|
|
2202
|
+
});
|
|
2203
|
+
}
|
|
2204
|
+
|
|
2205
|
+
//#endregion
|
|
2206
|
+
//#region src/components/ui/tabs.tsx
|
|
2207
|
+
function Tabs({ className, ...props }) {
|
|
2208
|
+
return /* @__PURE__ */ jsx(TabsPrimitive.Root, {
|
|
2209
|
+
"data-slot": "tabs",
|
|
2210
|
+
className: cn("flex flex-col gap-2", className),
|
|
2211
|
+
...props
|
|
2212
|
+
});
|
|
2213
|
+
}
|
|
2214
|
+
function TabsList({ className, ...props }) {
|
|
2215
|
+
return /* @__PURE__ */ jsx(TabsPrimitive.List, {
|
|
2216
|
+
"data-slot": "tabs-list",
|
|
2217
|
+
className: cn("bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]", className),
|
|
2218
|
+
...props
|
|
2219
|
+
});
|
|
2220
|
+
}
|
|
2221
|
+
function TabsTrigger({ className, ...props }) {
|
|
2222
|
+
return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, {
|
|
2223
|
+
"data-slot": "tabs-trigger",
|
|
2224
|
+
className: cn("data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
2225
|
+
...props
|
|
2226
|
+
});
|
|
2227
|
+
}
|
|
2228
|
+
function TabsContent({ className, ...props }) {
|
|
2229
|
+
return /* @__PURE__ */ jsx(TabsPrimitive.Content, {
|
|
2230
|
+
"data-slot": "tabs-content",
|
|
2231
|
+
className: cn("flex-1 outline-none", className),
|
|
2232
|
+
...props
|
|
2233
|
+
});
|
|
2234
|
+
}
|
|
2235
|
+
|
|
2236
|
+
//#endregion
|
|
2237
|
+
//#region src/components/ui/textarea.tsx
|
|
2238
|
+
function Textarea({ className, ...props }) {
|
|
2239
|
+
return /* @__PURE__ */ jsx("textarea", {
|
|
2240
|
+
"data-slot": "textarea",
|
|
2241
|
+
className: cn("border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", className),
|
|
2242
|
+
...props
|
|
2243
|
+
});
|
|
2244
|
+
}
|
|
2245
|
+
|
|
2246
|
+
//#endregion
|
|
2247
|
+
//#region src/components/ui/tooltip.tsx
|
|
2248
|
+
function TooltipProvider({ delayDuration = 0, ...props }) {
|
|
2249
|
+
return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, {
|
|
2250
|
+
"data-slot": "tooltip-provider",
|
|
2251
|
+
delayDuration,
|
|
2252
|
+
...props
|
|
2253
|
+
});
|
|
2254
|
+
}
|
|
2255
|
+
function Tooltip({ ...props }) {
|
|
2256
|
+
return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, {
|
|
2257
|
+
"data-slot": "tooltip",
|
|
2258
|
+
...props
|
|
2259
|
+
}) });
|
|
2260
|
+
}
|
|
2261
|
+
function TooltipTrigger({ ...props }) {
|
|
2262
|
+
return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, {
|
|
2263
|
+
"data-slot": "tooltip-trigger",
|
|
2264
|
+
...props
|
|
2265
|
+
});
|
|
2266
|
+
}
|
|
2267
|
+
function TooltipContent({ className, sideOffset = 0, children, ...props }) {
|
|
2268
|
+
return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(TooltipPrimitive.Content, {
|
|
2269
|
+
"data-slot": "tooltip-content",
|
|
2270
|
+
sideOffset,
|
|
2271
|
+
className: cn("bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance", className),
|
|
2272
|
+
...props,
|
|
2273
|
+
children: [children, /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })]
|
|
2274
|
+
}) });
|
|
2275
|
+
}
|
|
2276
|
+
|
|
2277
|
+
//#endregion
|
|
32
2278
|
export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, FileUploadClear as Clear, FileUploadClear, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileUploadDropzone as Dropzone, FileUploadDropzone, FileUploadRoot as FileUpload, FileUploadRoot as Root, FileUploadItem, FileUploadItem as Item, FileUploadItemDelete, FileUploadItemDelete as ItemDelete, FileUploadItemMetadata, FileUploadItemMetadata as ItemMetadata, FileUploadItemPreview, FileUploadItemPreview as ItemPreview, FileUploadItemProgress, FileUploadItemProgress as ItemProgress, FileUploadList, FileUploadList as List, FileUploadTrigger, FileUploadTrigger as Trigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Input, Label, OrContinueWithSeparator, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Slider, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Tags, TagsContent, TagsEmpty, TagsGroup, TagsInput, TagsInputInLineClear, TagsInputInLineInput, TagsInputInLineItem, TagsInputInLineLabel, TagsInputInLineList, TagsInputInLineRoot, TagsItem, TagsList, TagsTrigger, TagsValue, Textarea, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, useStore as useFileUpload, useFormField };
|