@fluid-app/ui-primitives 0.1.4 → 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.cjs +1541 -2367
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +767 -293
- package/dist/index.d.cts.map +1 -0
- package/dist/index.d.mts +817 -0
- package/dist/index.d.mts.map +1 -0
- package/dist/index.mjs +1573 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +4 -4
- package/dist/index.d.ts +0 -343
- package/dist/index.js +0 -2401
- package/dist/index.js.map +0 -1
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,1573 @@
|
|
|
1
|
+
import { clsx } from "clsx";
|
|
2
|
+
import { twMerge } from "tailwind-merge";
|
|
3
|
+
import { zodResolver } from "@hookform/resolvers/zod";
|
|
4
|
+
import { Controller, FormProvider, useForm, useFormContext, useFormState } from "react-hook-form";
|
|
5
|
+
import * as React from "react";
|
|
6
|
+
import { createContext, useContext } from "react";
|
|
7
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
+
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
9
|
+
import { CalendarIcon, Check, CheckIcon, ChevronDown, ChevronDownIcon, ChevronLeft, ChevronLeftIcon, ChevronRight, ChevronRightIcon, ChevronUpIcon, Circle, CircleCheckIcon, CircleIcon, InfoIcon, Loader2Icon, LoaderIcon, MoreHorizontalIcon, OctagonXIcon, TriangleAlertIcon, X } from "lucide-react";
|
|
10
|
+
import { cva } from "class-variance-authority";
|
|
11
|
+
import { AlertDialog as AlertDialog$1, Avatar as Avatar$1, RadioGroup as RadioGroup$1, Slot } from "radix-ui";
|
|
12
|
+
import { Slot as Slot$1 } from "@radix-ui/react-slot";
|
|
13
|
+
import { DayPicker } from "react-day-picker";
|
|
14
|
+
import * as RechartsPrimitive from "recharts";
|
|
15
|
+
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
|
|
16
|
+
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
17
|
+
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
18
|
+
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
|
19
|
+
import * as LabelPrimitive from "@radix-ui/react-label";
|
|
20
|
+
import * as TogglePrimitive from "@radix-ui/react-toggle";
|
|
21
|
+
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
22
|
+
import * as SeparatorPrimitive from "@radix-ui/react-separator";
|
|
23
|
+
import * as SliderPrimitive from "@radix-ui/react-slider";
|
|
24
|
+
import { Toaster as Toaster$1 } from "sonner";
|
|
25
|
+
import * as SwitchPrimitive from "@radix-ui/react-switch";
|
|
26
|
+
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
27
|
+
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
|
|
28
|
+
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
29
|
+
//#region src/lib/utils.ts
|
|
30
|
+
function cn(...inputs) {
|
|
31
|
+
return twMerge(clsx(inputs));
|
|
32
|
+
}
|
|
33
|
+
//#endregion
|
|
34
|
+
//#region src/hooks/use-zod-form.ts
|
|
35
|
+
/**
|
|
36
|
+
* A typed wrapper around useForm that uses zodResolver.
|
|
37
|
+
* Breaks the TypeScript inference chain that causes TS2589
|
|
38
|
+
* "Type instantiation is excessively deep" errors with complex Zod schemas.
|
|
39
|
+
*/
|
|
40
|
+
function useZodForm(schema, options) {
|
|
41
|
+
"use no memo";
|
|
42
|
+
const resolver = zodResolver(schema);
|
|
43
|
+
return useForm({
|
|
44
|
+
...options,
|
|
45
|
+
resolver
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
//#endregion
|
|
49
|
+
//#region src/contexts/PortalContainerContext.tsx
|
|
50
|
+
const PortalContainerContext = createContext(void 0);
|
|
51
|
+
/**
|
|
52
|
+
* Provides a custom container element for Radix UI portals.
|
|
53
|
+
* When set, portal-using components (Popover, Select, DropdownMenu, etc.)
|
|
54
|
+
* will render into this container instead of document.body,
|
|
55
|
+
* preserving CSS theme variable inheritance.
|
|
56
|
+
*/
|
|
57
|
+
function PortalContainerProvider({ children, container }) {
|
|
58
|
+
return /* @__PURE__ */ jsx(PortalContainerContext.Provider, {
|
|
59
|
+
value: container ?? void 0,
|
|
60
|
+
children
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
function usePortalContainer() {
|
|
64
|
+
return useContext(PortalContainerContext);
|
|
65
|
+
}
|
|
66
|
+
//#endregion
|
|
67
|
+
//#region src/components/Accordion.tsx
|
|
68
|
+
function Accordion({ className, ...props }) {
|
|
69
|
+
return /* @__PURE__ */ jsx(AccordionPrimitive.Root, {
|
|
70
|
+
"data-slot": "accordion",
|
|
71
|
+
className: cn("cn-accordion flex w-full flex-col", className),
|
|
72
|
+
...props
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
function AccordionItem({ className, ...props }) {
|
|
76
|
+
return /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
|
|
77
|
+
"data-slot": "accordion-item",
|
|
78
|
+
className: cn("cn-accordion-item", className),
|
|
79
|
+
...props
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
function AccordionTrigger({ className, children, ...props }) {
|
|
83
|
+
return /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
|
|
84
|
+
className: "flex",
|
|
85
|
+
children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, {
|
|
86
|
+
"data-slot": "accordion-trigger",
|
|
87
|
+
className: cn("cn-accordion-trigger group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50", className),
|
|
88
|
+
...props,
|
|
89
|
+
children: [children, /* @__PURE__ */ jsx(ChevronDown, { className: "cn-accordion-trigger-icon pointer-events-none shrink-0 transition-transform duration-200 group-aria-expanded/accordion-trigger:rotate-180" })]
|
|
90
|
+
})
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
function AccordionContent({ className, children, ...props }) {
|
|
94
|
+
return /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
|
|
95
|
+
"data-slot": "accordion-content",
|
|
96
|
+
className: "cn-accordion-content overflow-hidden",
|
|
97
|
+
...props,
|
|
98
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
99
|
+
className: cn("cn-accordion-content-inner [&_a]:hover:text-foreground h-(--radix-accordion-content-height) [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4", className),
|
|
100
|
+
children
|
|
101
|
+
})
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
//#endregion
|
|
105
|
+
//#region src/components/Alert.tsx
|
|
106
|
+
const alertVariants = cva("relative grid h-full w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
|
|
107
|
+
variants: { variant: {
|
|
108
|
+
default: "bg-card text-card-foreground",
|
|
109
|
+
destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current"
|
|
110
|
+
} },
|
|
111
|
+
defaultVariants: { variant: "default" }
|
|
112
|
+
});
|
|
113
|
+
function Alert({ className, variant, ...props }) {
|
|
114
|
+
return /* @__PURE__ */ jsx("div", {
|
|
115
|
+
"data-slot": "alert",
|
|
116
|
+
role: "alert",
|
|
117
|
+
className: cn(alertVariants({ variant }), className),
|
|
118
|
+
...props
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
function AlertTitle({ className, ...props }) {
|
|
122
|
+
return /* @__PURE__ */ jsx("div", {
|
|
123
|
+
"data-slot": "alert-title",
|
|
124
|
+
className: cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className),
|
|
125
|
+
...props
|
|
126
|
+
});
|
|
127
|
+
}
|
|
128
|
+
function AlertDescription({ className, ...props }) {
|
|
129
|
+
return /* @__PURE__ */ jsx("div", {
|
|
130
|
+
"data-slot": "alert-description",
|
|
131
|
+
className: cn("text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed", className),
|
|
132
|
+
...props
|
|
133
|
+
});
|
|
134
|
+
}
|
|
135
|
+
//#endregion
|
|
136
|
+
//#region src/components/Button.tsx
|
|
137
|
+
const buttonVariants = cva("focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
|
|
138
|
+
variants: {
|
|
139
|
+
variant: {
|
|
140
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
141
|
+
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
|
|
142
|
+
outline: "bg-background hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 border shadow-xs",
|
|
143
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
144
|
+
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
|
145
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
146
|
+
},
|
|
147
|
+
size: {
|
|
148
|
+
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
149
|
+
sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
|
|
150
|
+
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
|
151
|
+
xl: "h-11 rounded-md px-8 has-[>svg]:px-5",
|
|
152
|
+
icon: "size-9",
|
|
153
|
+
"icon-xs": "size-6",
|
|
154
|
+
"icon-sm": "size-8",
|
|
155
|
+
"icon-lg": "size-10"
|
|
156
|
+
}
|
|
157
|
+
},
|
|
158
|
+
defaultVariants: {
|
|
159
|
+
variant: "default",
|
|
160
|
+
size: "default"
|
|
161
|
+
}
|
|
162
|
+
});
|
|
163
|
+
function Button({ className, variant, size, asChild = false, ...props }) {
|
|
164
|
+
return /* @__PURE__ */ jsx(asChild ? Slot$1 : "button", {
|
|
165
|
+
"data-slot": "button",
|
|
166
|
+
className: cn(buttonVariants({
|
|
167
|
+
variant,
|
|
168
|
+
size,
|
|
169
|
+
className
|
|
170
|
+
})),
|
|
171
|
+
...props
|
|
172
|
+
});
|
|
173
|
+
}
|
|
174
|
+
//#endregion
|
|
175
|
+
//#region src/components/AlertDialog.tsx
|
|
176
|
+
function AlertDialog({ ...props }) {
|
|
177
|
+
return /* @__PURE__ */ jsx(AlertDialog$1.Root, {
|
|
178
|
+
"data-slot": "alert-dialog",
|
|
179
|
+
...props
|
|
180
|
+
});
|
|
181
|
+
}
|
|
182
|
+
function AlertDialogTrigger({ ...props }) {
|
|
183
|
+
return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, {
|
|
184
|
+
"data-slot": "alert-dialog-trigger",
|
|
185
|
+
...props
|
|
186
|
+
});
|
|
187
|
+
}
|
|
188
|
+
function AlertDialogPortal({ ...props }) {
|
|
189
|
+
const portalContainer = usePortalContainer();
|
|
190
|
+
return /* @__PURE__ */ jsx(AlertDialog$1.Portal, {
|
|
191
|
+
"data-slot": "alert-dialog-portal",
|
|
192
|
+
container: portalContainer,
|
|
193
|
+
...props
|
|
194
|
+
});
|
|
195
|
+
}
|
|
196
|
+
function AlertDialogOverlay({ className, ...props }) {
|
|
197
|
+
return /* @__PURE__ */ jsx(AlertDialog$1.Overlay, {
|
|
198
|
+
"data-slot": "alert-dialog-overlay",
|
|
199
|
+
className: cn("data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className),
|
|
200
|
+
...props
|
|
201
|
+
});
|
|
202
|
+
}
|
|
203
|
+
function AlertDialogContent({ className, size = "default", ...props }) {
|
|
204
|
+
return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialog$1.Content, {
|
|
205
|
+
"data-slot": "alert-dialog-content",
|
|
206
|
+
"data-size": size,
|
|
207
|
+
className: cn("group/alert-dialog-content bg-background data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 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 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg", className),
|
|
208
|
+
...props
|
|
209
|
+
})] });
|
|
210
|
+
}
|
|
211
|
+
function AlertDialogHeader({ className, ...props }) {
|
|
212
|
+
return /* @__PURE__ */ jsx("div", {
|
|
213
|
+
"data-slot": "alert-dialog-header",
|
|
214
|
+
className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className),
|
|
215
|
+
...props
|
|
216
|
+
});
|
|
217
|
+
}
|
|
218
|
+
function AlertDialogFooter({ className, ...props }) {
|
|
219
|
+
return /* @__PURE__ */ jsx("div", {
|
|
220
|
+
"data-slot": "alert-dialog-footer",
|
|
221
|
+
className: cn("flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className),
|
|
222
|
+
...props
|
|
223
|
+
});
|
|
224
|
+
}
|
|
225
|
+
function AlertDialogTitle({ className, ...props }) {
|
|
226
|
+
return /* @__PURE__ */ jsx(AlertDialog$1.Title, {
|
|
227
|
+
"data-slot": "alert-dialog-title",
|
|
228
|
+
className: cn("text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className),
|
|
229
|
+
...props
|
|
230
|
+
});
|
|
231
|
+
}
|
|
232
|
+
function AlertDialogDescription({ className, ...props }) {
|
|
233
|
+
return /* @__PURE__ */ jsx(AlertDialog$1.Description, {
|
|
234
|
+
"data-slot": "alert-dialog-description",
|
|
235
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
236
|
+
...props
|
|
237
|
+
});
|
|
238
|
+
}
|
|
239
|
+
function AlertDialogMedia({ className, ...props }) {
|
|
240
|
+
return /* @__PURE__ */ jsx("div", {
|
|
241
|
+
"data-slot": "alert-dialog-media",
|
|
242
|
+
className: cn("bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8", className),
|
|
243
|
+
...props
|
|
244
|
+
});
|
|
245
|
+
}
|
|
246
|
+
function AlertDialogAction({ className, variant = "default", size = "default", ...props }) {
|
|
247
|
+
return /* @__PURE__ */ jsx(Button, {
|
|
248
|
+
variant,
|
|
249
|
+
size,
|
|
250
|
+
asChild: true,
|
|
251
|
+
children: /* @__PURE__ */ jsx(AlertDialog$1.Action, {
|
|
252
|
+
"data-slot": "alert-dialog-action",
|
|
253
|
+
className: cn(className),
|
|
254
|
+
...props
|
|
255
|
+
})
|
|
256
|
+
});
|
|
257
|
+
}
|
|
258
|
+
function AlertDialogCancel({ className, variant = "outline", size = "default", ...props }) {
|
|
259
|
+
return /* @__PURE__ */ jsx(Button, {
|
|
260
|
+
variant,
|
|
261
|
+
size,
|
|
262
|
+
asChild: true,
|
|
263
|
+
children: /* @__PURE__ */ jsx(AlertDialog$1.Cancel, {
|
|
264
|
+
"data-slot": "alert-dialog-cancel",
|
|
265
|
+
className: cn(className),
|
|
266
|
+
...props
|
|
267
|
+
})
|
|
268
|
+
});
|
|
269
|
+
}
|
|
270
|
+
//#endregion
|
|
271
|
+
//#region src/components/Avatar.tsx
|
|
272
|
+
function Avatar({ className, size = "default", ...props }) {
|
|
273
|
+
return /* @__PURE__ */ jsx(Avatar$1.Root, {
|
|
274
|
+
"data-slot": "avatar",
|
|
275
|
+
"data-size": size,
|
|
276
|
+
className: cn("group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6", className),
|
|
277
|
+
...props
|
|
278
|
+
});
|
|
279
|
+
}
|
|
280
|
+
function AvatarImage({ className, ...props }) {
|
|
281
|
+
return /* @__PURE__ */ jsx(Avatar$1.Image, {
|
|
282
|
+
"data-slot": "avatar-image",
|
|
283
|
+
className: cn("aspect-square size-full", className),
|
|
284
|
+
...props
|
|
285
|
+
});
|
|
286
|
+
}
|
|
287
|
+
function AvatarFallback({ className, ...props }) {
|
|
288
|
+
return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
|
|
289
|
+
"data-slot": "avatar-fallback",
|
|
290
|
+
className: cn("bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs", className),
|
|
291
|
+
...props
|
|
292
|
+
});
|
|
293
|
+
}
|
|
294
|
+
function AvatarBadge({ className, ...props }) {
|
|
295
|
+
return /* @__PURE__ */ jsx("span", {
|
|
296
|
+
"data-slot": "avatar-badge",
|
|
297
|
+
className: cn("bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className),
|
|
298
|
+
...props
|
|
299
|
+
});
|
|
300
|
+
}
|
|
301
|
+
function AvatarGroup({ className, ...props }) {
|
|
302
|
+
return /* @__PURE__ */ jsx("div", {
|
|
303
|
+
"data-slot": "avatar-group",
|
|
304
|
+
className: cn("group/avatar-group *:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2", className),
|
|
305
|
+
...props
|
|
306
|
+
});
|
|
307
|
+
}
|
|
308
|
+
function AvatarGroupCount({ className, ...props }) {
|
|
309
|
+
return /* @__PURE__ */ jsx("div", {
|
|
310
|
+
"data-slot": "avatar-group-count",
|
|
311
|
+
className: cn("bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className),
|
|
312
|
+
...props
|
|
313
|
+
});
|
|
314
|
+
}
|
|
315
|
+
//#endregion
|
|
316
|
+
//#region src/components/Badge.tsx
|
|
317
|
+
const badgeVariants = cva("focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3", {
|
|
318
|
+
variants: { variant: {
|
|
319
|
+
default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
|
320
|
+
secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
|
321
|
+
destructive: "bg-destructive focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90 text-white",
|
|
322
|
+
outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
|
323
|
+
ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
|
324
|
+
link: "text-primary underline-offset-4 [a&]:hover:underline"
|
|
325
|
+
} },
|
|
326
|
+
defaultVariants: { variant: "default" }
|
|
327
|
+
});
|
|
328
|
+
function Badge({ className, variant = "default", asChild = false, ...props }) {
|
|
329
|
+
return /* @__PURE__ */ jsx(asChild ? Slot.Root : "span", {
|
|
330
|
+
"data-slot": "badge",
|
|
331
|
+
"data-variant": variant,
|
|
332
|
+
className: cn(badgeVariants({ variant }), className),
|
|
333
|
+
...props
|
|
334
|
+
});
|
|
335
|
+
}
|
|
336
|
+
//#endregion
|
|
337
|
+
//#region src/components/Calendar.tsx
|
|
338
|
+
function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
|
|
339
|
+
return /* @__PURE__ */ jsx(DayPicker, {
|
|
340
|
+
showOutsideDays,
|
|
341
|
+
className: cn("p-3", className),
|
|
342
|
+
classNames: {
|
|
343
|
+
months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
|
|
344
|
+
month: "space-y-4",
|
|
345
|
+
caption: "flex justify-center pt-1 relative items-center",
|
|
346
|
+
caption_label: "text-sm font-medium",
|
|
347
|
+
nav: "space-x-1 flex items-center",
|
|
348
|
+
nav_button: cn(buttonVariants({ variant: "ghost" }), "h-7 w-7 justify-center bg-transparent p-0 opacity-50 hover:opacity-100"),
|
|
349
|
+
nav_button_previous: "absolute left-1",
|
|
350
|
+
nav_button_next: "absolute right-1",
|
|
351
|
+
table: "w-full border-collapse space-y-1",
|
|
352
|
+
head_row: "flex",
|
|
353
|
+
head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
|
|
354
|
+
row: "flex w-full mt-2",
|
|
355
|
+
cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
|
|
356
|
+
day: cn(buttonVariants({ variant: "ghost" }), "h-9 w-9 justify-center p-0 font-normal aria-selected:opacity-100"),
|
|
357
|
+
day_range_end: "day-range-end",
|
|
358
|
+
day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
|
|
359
|
+
day_today: "bg-accent text-accent-foreground",
|
|
360
|
+
day_outside: "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
|
|
361
|
+
day_disabled: "text-muted-foreground opacity-50",
|
|
362
|
+
day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
|
|
363
|
+
day_hidden: "invisible",
|
|
364
|
+
...classNames
|
|
365
|
+
},
|
|
366
|
+
components: {
|
|
367
|
+
IconLeft: ({ className: iconClassName, ...iconProps }) => /* @__PURE__ */ jsx(ChevronLeft, {
|
|
368
|
+
className: cn("h-4 w-4", iconClassName),
|
|
369
|
+
...iconProps
|
|
370
|
+
}),
|
|
371
|
+
IconRight: ({ className: iconClassName, ...iconProps }) => /* @__PURE__ */ jsx(ChevronRight, {
|
|
372
|
+
className: cn("h-4 w-4", iconClassName),
|
|
373
|
+
...iconProps
|
|
374
|
+
})
|
|
375
|
+
},
|
|
376
|
+
...props
|
|
377
|
+
});
|
|
378
|
+
}
|
|
379
|
+
Calendar.displayName = "Calendar";
|
|
380
|
+
//#endregion
|
|
381
|
+
//#region src/components/Card.tsx
|
|
382
|
+
function Card({ className, ...props }) {
|
|
383
|
+
return /* @__PURE__ */ jsx("div", {
|
|
384
|
+
"data-slot": "card",
|
|
385
|
+
className: cn("bg-card text-card-foreground flex h-full flex-col gap-6 rounded-xl border py-6 shadow-sm", className),
|
|
386
|
+
...props
|
|
387
|
+
});
|
|
388
|
+
}
|
|
389
|
+
function CardHeader({ className, ...props }) {
|
|
390
|
+
return /* @__PURE__ */ jsx("div", {
|
|
391
|
+
"data-slot": "card-header",
|
|
392
|
+
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),
|
|
393
|
+
...props
|
|
394
|
+
});
|
|
395
|
+
}
|
|
396
|
+
function CardTitle({ className, ...props }) {
|
|
397
|
+
return /* @__PURE__ */ jsx("div", {
|
|
398
|
+
"data-slot": "card-title",
|
|
399
|
+
className: cn("leading-none font-semibold", className),
|
|
400
|
+
...props
|
|
401
|
+
});
|
|
402
|
+
}
|
|
403
|
+
function CardDescription({ className, ...props }) {
|
|
404
|
+
return /* @__PURE__ */ jsx("div", {
|
|
405
|
+
"data-slot": "card-description",
|
|
406
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
407
|
+
...props
|
|
408
|
+
});
|
|
409
|
+
}
|
|
410
|
+
function CardAction({ className, ...props }) {
|
|
411
|
+
return /* @__PURE__ */ jsx("div", {
|
|
412
|
+
"data-slot": "card-action",
|
|
413
|
+
className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
|
|
414
|
+
...props
|
|
415
|
+
});
|
|
416
|
+
}
|
|
417
|
+
function CardContent({ className, ...props }) {
|
|
418
|
+
return /* @__PURE__ */ jsx("div", {
|
|
419
|
+
"data-slot": "card-content",
|
|
420
|
+
className: cn("px-6", className),
|
|
421
|
+
...props
|
|
422
|
+
});
|
|
423
|
+
}
|
|
424
|
+
function CardFooter({ className, ...props }) {
|
|
425
|
+
return /* @__PURE__ */ jsx("div", {
|
|
426
|
+
"data-slot": "card-footer",
|
|
427
|
+
className: cn("flex items-center px-6 [.border-t]:pt-6", className),
|
|
428
|
+
...props
|
|
429
|
+
});
|
|
430
|
+
}
|
|
431
|
+
//#endregion
|
|
432
|
+
//#region src/components/Chart.tsx
|
|
433
|
+
const THEMES = {
|
|
434
|
+
light: "",
|
|
435
|
+
dark: ".dark"
|
|
436
|
+
};
|
|
437
|
+
const ChartContext = React.createContext(null);
|
|
438
|
+
function useChart() {
|
|
439
|
+
const context = React.useContext(ChartContext);
|
|
440
|
+
if (!context) throw new Error("useChart must be used within a <ChartContainer />");
|
|
441
|
+
return context;
|
|
442
|
+
}
|
|
443
|
+
function ChartContainer({ id, className, children, config, ...props }) {
|
|
444
|
+
const uniqueId = React.useId();
|
|
445
|
+
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
|
|
446
|
+
return /* @__PURE__ */ jsx(ChartContext.Provider, {
|
|
447
|
+
value: { config },
|
|
448
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
449
|
+
"data-slot": "chart",
|
|
450
|
+
"data-chart": chartId,
|
|
451
|
+
className: cn("[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
|
|
452
|
+
...props,
|
|
453
|
+
children: [/* @__PURE__ */ jsx(ChartStyle, {
|
|
454
|
+
id: chartId,
|
|
455
|
+
config
|
|
456
|
+
}), /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, { children })]
|
|
457
|
+
})
|
|
458
|
+
});
|
|
459
|
+
}
|
|
460
|
+
const ChartStyle = ({ id, config }) => {
|
|
461
|
+
const colorConfig = Object.entries(config).filter(([, cfg]) => cfg.theme || cfg.color);
|
|
462
|
+
if (!colorConfig.length) return null;
|
|
463
|
+
return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: Object.entries(THEMES).map(([theme, prefix]) => `
|
|
464
|
+
${prefix} [data-chart=${id}] {
|
|
465
|
+
${colorConfig.map(([key, itemConfig]) => {
|
|
466
|
+
const color = itemConfig.theme?.[theme] || itemConfig.color;
|
|
467
|
+
return color ? ` --color-${key}: ${color};` : null;
|
|
468
|
+
}).join("\n")}
|
|
469
|
+
}
|
|
470
|
+
`).join("\n") } });
|
|
471
|
+
};
|
|
472
|
+
const ChartTooltip = RechartsPrimitive.Tooltip;
|
|
473
|
+
function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey }) {
|
|
474
|
+
const { config } = useChart();
|
|
475
|
+
const tooltipLabel = React.useMemo(() => {
|
|
476
|
+
if (hideLabel || !payload?.length) return null;
|
|
477
|
+
const [item] = payload;
|
|
478
|
+
const itemConfig = getPayloadConfigFromPayload(config, item, `${labelKey || item?.dataKey || item?.name || "value"}`);
|
|
479
|
+
const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
|
|
480
|
+
if (labelFormatter) return /* @__PURE__ */ jsx("div", {
|
|
481
|
+
className: cn("font-medium", labelClassName),
|
|
482
|
+
children: labelFormatter(value, payload)
|
|
483
|
+
});
|
|
484
|
+
if (!value) return null;
|
|
485
|
+
return /* @__PURE__ */ jsx("div", {
|
|
486
|
+
className: cn("font-medium", labelClassName),
|
|
487
|
+
children: value
|
|
488
|
+
});
|
|
489
|
+
}, [
|
|
490
|
+
label,
|
|
491
|
+
labelFormatter,
|
|
492
|
+
payload,
|
|
493
|
+
hideLabel,
|
|
494
|
+
labelClassName,
|
|
495
|
+
config,
|
|
496
|
+
labelKey
|
|
497
|
+
]);
|
|
498
|
+
if (!active || !payload?.length) return null;
|
|
499
|
+
const nestLabel = payload.length === 1 && indicator !== "dot";
|
|
500
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
501
|
+
className: cn("border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl", className),
|
|
502
|
+
children: [!nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("div", {
|
|
503
|
+
className: "grid gap-1.5",
|
|
504
|
+
children: payload.filter((item) => item.type !== "none").map((item, index) => {
|
|
505
|
+
const itemConfig = getPayloadConfigFromPayload(config, item, `${nameKey || item.name || item.dataKey || "value"}`);
|
|
506
|
+
const indicatorColor = color || item.payload.fill || item.color;
|
|
507
|
+
return /* @__PURE__ */ jsx("div", {
|
|
508
|
+
className: cn("[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5", indicator === "dot" && "items-center"),
|
|
509
|
+
children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx("div", {
|
|
510
|
+
className: cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
|
|
511
|
+
"h-2.5 w-2.5": indicator === "dot",
|
|
512
|
+
"w-1": indicator === "line",
|
|
513
|
+
"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
|
|
514
|
+
"my-0.5": nestLabel && indicator === "dashed"
|
|
515
|
+
}),
|
|
516
|
+
style: {
|
|
517
|
+
"--color-bg": indicatorColor,
|
|
518
|
+
"--color-border": indicatorColor
|
|
519
|
+
}
|
|
520
|
+
}), /* @__PURE__ */ jsxs("div", {
|
|
521
|
+
className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"),
|
|
522
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
523
|
+
className: "grid gap-1.5",
|
|
524
|
+
children: [nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("span", {
|
|
525
|
+
className: "text-muted-foreground",
|
|
526
|
+
children: itemConfig?.label || item.name
|
|
527
|
+
})]
|
|
528
|
+
}), item.value && /* @__PURE__ */ jsx("span", {
|
|
529
|
+
className: "text-foreground font-mono font-medium tabular-nums",
|
|
530
|
+
children: item.value.toLocaleString()
|
|
531
|
+
})]
|
|
532
|
+
})] })
|
|
533
|
+
}, item.dataKey);
|
|
534
|
+
})
|
|
535
|
+
})]
|
|
536
|
+
});
|
|
537
|
+
}
|
|
538
|
+
const ChartLegend = RechartsPrimitive.Legend;
|
|
539
|
+
function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }) {
|
|
540
|
+
const { config } = useChart();
|
|
541
|
+
if (!payload?.length) return null;
|
|
542
|
+
return /* @__PURE__ */ jsx("div", {
|
|
543
|
+
className: cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className),
|
|
544
|
+
children: payload.filter((item) => item.type !== "none").map((item) => {
|
|
545
|
+
const itemConfig = getPayloadConfigFromPayload(config, item, `${nameKey || item.dataKey || "value"}`);
|
|
546
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
547
|
+
className: cn("[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"),
|
|
548
|
+
children: [itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx("div", {
|
|
549
|
+
className: "h-2 w-2 shrink-0 rounded-[2px]",
|
|
550
|
+
style: { backgroundColor: item.color }
|
|
551
|
+
}), itemConfig?.label]
|
|
552
|
+
}, item.value);
|
|
553
|
+
})
|
|
554
|
+
});
|
|
555
|
+
}
|
|
556
|
+
function getPayloadConfigFromPayload(config, payload, key) {
|
|
557
|
+
if (typeof payload !== "object" || payload === null) return;
|
|
558
|
+
const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
|
|
559
|
+
let configLabelKey = key;
|
|
560
|
+
if (key in payload && typeof payload[key] === "string") configLabelKey = payload[key];
|
|
561
|
+
else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") configLabelKey = payloadPayload[key];
|
|
562
|
+
return configLabelKey in config ? config[configLabelKey] : config[key];
|
|
563
|
+
}
|
|
564
|
+
//#endregion
|
|
565
|
+
//#region src/components/Collapsible.tsx
|
|
566
|
+
function Collapsible({ ...props }) {
|
|
567
|
+
return /* @__PURE__ */ jsx(CollapsiblePrimitive.Root, {
|
|
568
|
+
"data-slot": "collapsible",
|
|
569
|
+
...props
|
|
570
|
+
});
|
|
571
|
+
}
|
|
572
|
+
function CollapsibleTrigger({ ...props }) {
|
|
573
|
+
return /* @__PURE__ */ jsx(CollapsiblePrimitive.CollapsibleTrigger, {
|
|
574
|
+
"data-slot": "collapsible-trigger",
|
|
575
|
+
...props
|
|
576
|
+
});
|
|
577
|
+
}
|
|
578
|
+
function CollapsibleContent({ ...props }) {
|
|
579
|
+
return /* @__PURE__ */ jsx(CollapsiblePrimitive.CollapsibleContent, {
|
|
580
|
+
"data-slot": "collapsible-content",
|
|
581
|
+
...props
|
|
582
|
+
});
|
|
583
|
+
}
|
|
584
|
+
//#endregion
|
|
585
|
+
//#region src/components/Popover.tsx
|
|
586
|
+
function Popover({ ...props }) {
|
|
587
|
+
return /* @__PURE__ */ jsx(PopoverPrimitive.Root, {
|
|
588
|
+
"data-slot": "popover",
|
|
589
|
+
...props
|
|
590
|
+
});
|
|
591
|
+
}
|
|
592
|
+
function PopoverTrigger({ ...props }) {
|
|
593
|
+
return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
|
|
594
|
+
"data-slot": "popover-trigger",
|
|
595
|
+
...props
|
|
596
|
+
});
|
|
597
|
+
}
|
|
598
|
+
function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
|
|
599
|
+
const portalContainer = usePortalContainer();
|
|
600
|
+
return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, {
|
|
601
|
+
container: portalContainer,
|
|
602
|
+
children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
|
|
603
|
+
"data-slot": "popover-content",
|
|
604
|
+
align,
|
|
605
|
+
sideOffset,
|
|
606
|
+
className: cn("cn-popover-content z-50 w-72 origin-(--radix-popover-content-transform-origin) outline-hidden", className),
|
|
607
|
+
...props
|
|
608
|
+
})
|
|
609
|
+
});
|
|
610
|
+
}
|
|
611
|
+
function PopoverAnchor({ ...props }) {
|
|
612
|
+
return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, {
|
|
613
|
+
"data-slot": "popover-anchor",
|
|
614
|
+
...props
|
|
615
|
+
});
|
|
616
|
+
}
|
|
617
|
+
function PopoverHeader({ className, ...props }) {
|
|
618
|
+
return /* @__PURE__ */ jsx("div", {
|
|
619
|
+
"data-slot": "popover-header",
|
|
620
|
+
className: cn("cn-popover-header", className),
|
|
621
|
+
...props
|
|
622
|
+
});
|
|
623
|
+
}
|
|
624
|
+
function PopoverTitle({ className, ...props }) {
|
|
625
|
+
return /* @__PURE__ */ jsx("div", {
|
|
626
|
+
"data-slot": "popover-title",
|
|
627
|
+
className: cn("cn-popover-title", className),
|
|
628
|
+
...props
|
|
629
|
+
});
|
|
630
|
+
}
|
|
631
|
+
function PopoverDescription({ className, ...props }) {
|
|
632
|
+
return /* @__PURE__ */ jsx("p", {
|
|
633
|
+
"data-slot": "popover-description",
|
|
634
|
+
className: cn("cn-popover-description", className),
|
|
635
|
+
...props
|
|
636
|
+
});
|
|
637
|
+
}
|
|
638
|
+
//#endregion
|
|
639
|
+
//#region src/components/DatePicker.tsx
|
|
640
|
+
const defaultFormatDate = (date) => new Intl.DateTimeFormat(void 0, {
|
|
641
|
+
month: "long",
|
|
642
|
+
day: "numeric",
|
|
643
|
+
year: "numeric"
|
|
644
|
+
}).format(date);
|
|
645
|
+
function DatePicker({ value, onChange, placeholder = "Pick a date", formatDate = defaultFormatDate, disabled, className, calendarProps }) {
|
|
646
|
+
const [open, setOpen] = React.useState(false);
|
|
647
|
+
return /* @__PURE__ */ jsxs(Popover, {
|
|
648
|
+
open,
|
|
649
|
+
onOpenChange: setOpen,
|
|
650
|
+
children: [/* @__PURE__ */ jsx(PopoverTrigger, {
|
|
651
|
+
asChild: true,
|
|
652
|
+
children: /* @__PURE__ */ jsxs(Button, {
|
|
653
|
+
"data-slot": "date-picker",
|
|
654
|
+
variant: "outline",
|
|
655
|
+
disabled,
|
|
656
|
+
className: cn("w-full justify-start text-left font-normal", !value && "text-muted-foreground", className),
|
|
657
|
+
children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 size-4" }), value ? formatDate(value) : /* @__PURE__ */ jsx("span", { children: placeholder })]
|
|
658
|
+
})
|
|
659
|
+
}), /* @__PURE__ */ jsx(PopoverContent, {
|
|
660
|
+
className: "w-auto p-0",
|
|
661
|
+
align: "start",
|
|
662
|
+
children: /* @__PURE__ */ jsx(Calendar, {
|
|
663
|
+
mode: "single",
|
|
664
|
+
selected: value,
|
|
665
|
+
onSelect: (date) => {
|
|
666
|
+
onChange?.(date);
|
|
667
|
+
setOpen(false);
|
|
668
|
+
},
|
|
669
|
+
initialFocus: true,
|
|
670
|
+
...calendarProps
|
|
671
|
+
})
|
|
672
|
+
})]
|
|
673
|
+
});
|
|
674
|
+
}
|
|
675
|
+
//#endregion
|
|
676
|
+
//#region src/components/Dialog.tsx
|
|
677
|
+
function Dialog({ ...props }) {
|
|
678
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Root, {
|
|
679
|
+
"data-slot": "dialog",
|
|
680
|
+
...props
|
|
681
|
+
});
|
|
682
|
+
}
|
|
683
|
+
function DialogTrigger({ ...props }) {
|
|
684
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, {
|
|
685
|
+
"data-slot": "dialog-trigger",
|
|
686
|
+
...props
|
|
687
|
+
});
|
|
688
|
+
}
|
|
689
|
+
function DialogPortal({ ...props }) {
|
|
690
|
+
const portalContainer = usePortalContainer();
|
|
691
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Portal, {
|
|
692
|
+
"data-slot": "dialog-portal",
|
|
693
|
+
container: portalContainer,
|
|
694
|
+
...props
|
|
695
|
+
});
|
|
696
|
+
}
|
|
697
|
+
function DialogClose({ ...props }) {
|
|
698
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Close, {
|
|
699
|
+
"data-slot": "dialog-close",
|
|
700
|
+
...props
|
|
701
|
+
});
|
|
702
|
+
}
|
|
703
|
+
function DialogOverlay({ className, ...props }) {
|
|
704
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
|
|
705
|
+
"data-slot": "dialog-overlay",
|
|
706
|
+
className: cn("data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-gray-900/70 backdrop-blur-sm", className),
|
|
707
|
+
...props
|
|
708
|
+
});
|
|
709
|
+
}
|
|
710
|
+
function DialogContent({ className, children, showCloseButton = true, overlayClassName, ...props }) {
|
|
711
|
+
return /* @__PURE__ */ jsxs(DialogPortal, {
|
|
712
|
+
"data-slot": "dialog-portal",
|
|
713
|
+
children: [/* @__PURE__ */ jsx(DialogOverlay, { className: overlayClassName }), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
|
|
714
|
+
"data-slot": "dialog-content",
|
|
715
|
+
className: cn("bg-background data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 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-6 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", className),
|
|
716
|
+
...props,
|
|
717
|
+
children: [children, showCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
|
|
718
|
+
"data-slot": "dialog-close",
|
|
719
|
+
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",
|
|
720
|
+
children: [/* @__PURE__ */ jsx(X, {}), /* @__PURE__ */ jsx("span", {
|
|
721
|
+
className: "sr-only",
|
|
722
|
+
children: "Close"
|
|
723
|
+
})]
|
|
724
|
+
})]
|
|
725
|
+
})]
|
|
726
|
+
});
|
|
727
|
+
}
|
|
728
|
+
function DialogHeader({ className, ...props }) {
|
|
729
|
+
return /* @__PURE__ */ jsx("div", {
|
|
730
|
+
"data-slot": "dialog-header",
|
|
731
|
+
className: cn("flex flex-col gap-2 text-center sm:text-left", className),
|
|
732
|
+
...props
|
|
733
|
+
});
|
|
734
|
+
}
|
|
735
|
+
function DialogFooter({ className, ...props }) {
|
|
736
|
+
return /* @__PURE__ */ jsx("div", {
|
|
737
|
+
"data-slot": "dialog-footer",
|
|
738
|
+
className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
|
|
739
|
+
...props
|
|
740
|
+
});
|
|
741
|
+
}
|
|
742
|
+
function DialogTitle({ className, ...props }) {
|
|
743
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Title, {
|
|
744
|
+
"data-slot": "dialog-title",
|
|
745
|
+
className: cn("text-lg leading-none font-semibold", className),
|
|
746
|
+
...props
|
|
747
|
+
});
|
|
748
|
+
}
|
|
749
|
+
function DialogDescription({ className, ...props }) {
|
|
750
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Description, {
|
|
751
|
+
"data-slot": "dialog-description",
|
|
752
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
753
|
+
...props
|
|
754
|
+
});
|
|
755
|
+
}
|
|
756
|
+
//#endregion
|
|
757
|
+
//#region src/components/DropdownMenu.tsx
|
|
758
|
+
function DropdownMenu({ ...props }) {
|
|
759
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, {
|
|
760
|
+
"data-slot": "dropdown-menu",
|
|
761
|
+
...props
|
|
762
|
+
});
|
|
763
|
+
}
|
|
764
|
+
function DropdownMenuPortal({ ...props }) {
|
|
765
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, {
|
|
766
|
+
"data-slot": "dropdown-menu-portal",
|
|
767
|
+
...props
|
|
768
|
+
});
|
|
769
|
+
}
|
|
770
|
+
function DropdownMenuTrigger({ ...props }) {
|
|
771
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, {
|
|
772
|
+
"data-slot": "dropdown-menu-trigger",
|
|
773
|
+
...props
|
|
774
|
+
});
|
|
775
|
+
}
|
|
776
|
+
function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
|
|
777
|
+
const portalContainer = usePortalContainer();
|
|
778
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, {
|
|
779
|
+
container: portalContainer,
|
|
780
|
+
children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
|
|
781
|
+
"data-slot": "dropdown-menu-content",
|
|
782
|
+
sideOffset,
|
|
783
|
+
className: cn("bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 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),
|
|
784
|
+
...props
|
|
785
|
+
})
|
|
786
|
+
});
|
|
787
|
+
}
|
|
788
|
+
function DropdownMenuGroup({ ...props }) {
|
|
789
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Group, {
|
|
790
|
+
"data-slot": "dropdown-menu-group",
|
|
791
|
+
...props
|
|
792
|
+
});
|
|
793
|
+
}
|
|
794
|
+
function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
|
|
795
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, {
|
|
796
|
+
"data-slot": "dropdown-menu-item",
|
|
797
|
+
"data-inset": inset,
|
|
798
|
+
"data-variant": variant,
|
|
799
|
+
className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:!text-destructive 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),
|
|
800
|
+
...props
|
|
801
|
+
});
|
|
802
|
+
}
|
|
803
|
+
function DropdownMenuCheckboxItem({ className, children, ...props }) {
|
|
804
|
+
return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.CheckboxItem, {
|
|
805
|
+
"data-slot": "dropdown-menu-checkbox-item",
|
|
806
|
+
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),
|
|
807
|
+
...props,
|
|
808
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
809
|
+
className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
|
|
810
|
+
children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "size-4" }) })
|
|
811
|
+
}), children]
|
|
812
|
+
});
|
|
813
|
+
}
|
|
814
|
+
function DropdownMenuRadioGroup({ ...props }) {
|
|
815
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.RadioGroup, {
|
|
816
|
+
"data-slot": "dropdown-menu-radio-group",
|
|
817
|
+
...props
|
|
818
|
+
});
|
|
819
|
+
}
|
|
820
|
+
function DropdownMenuRadioItem({ className, children, ...props }) {
|
|
821
|
+
return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.RadioItem, {
|
|
822
|
+
"data-slot": "dropdown-menu-radio-item",
|
|
823
|
+
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),
|
|
824
|
+
...props,
|
|
825
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
826
|
+
className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
|
|
827
|
+
children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "size-2 fill-current" }) })
|
|
828
|
+
}), children]
|
|
829
|
+
});
|
|
830
|
+
}
|
|
831
|
+
function DropdownMenuLabel({ className, inset, ...props }) {
|
|
832
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Label, {
|
|
833
|
+
"data-slot": "dropdown-menu-label",
|
|
834
|
+
"data-inset": inset,
|
|
835
|
+
className: cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className),
|
|
836
|
+
...props
|
|
837
|
+
});
|
|
838
|
+
}
|
|
839
|
+
function DropdownMenuSeparator({ className, ...props }) {
|
|
840
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, {
|
|
841
|
+
"data-slot": "dropdown-menu-separator",
|
|
842
|
+
className: cn("bg-border -mx-1 my-1 h-px", className),
|
|
843
|
+
...props
|
|
844
|
+
});
|
|
845
|
+
}
|
|
846
|
+
function DropdownMenuShortcut({ className, ...props }) {
|
|
847
|
+
return /* @__PURE__ */ jsx("span", {
|
|
848
|
+
"data-slot": "dropdown-menu-shortcut",
|
|
849
|
+
className: cn("text-muted-foreground ml-auto text-xs tracking-widest", className),
|
|
850
|
+
...props
|
|
851
|
+
});
|
|
852
|
+
}
|
|
853
|
+
function DropdownMenuSub({ ...props }) {
|
|
854
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Sub, {
|
|
855
|
+
"data-slot": "dropdown-menu-sub",
|
|
856
|
+
...props
|
|
857
|
+
});
|
|
858
|
+
}
|
|
859
|
+
function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
|
|
860
|
+
return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.SubTrigger, {
|
|
861
|
+
"data-slot": "dropdown-menu-sub-trigger",
|
|
862
|
+
"data-inset": inset,
|
|
863
|
+
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),
|
|
864
|
+
...props,
|
|
865
|
+
children: [children, /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto size-4" })]
|
|
866
|
+
});
|
|
867
|
+
}
|
|
868
|
+
function DropdownMenuSubContent({ className, ...props }) {
|
|
869
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.SubContent, {
|
|
870
|
+
"data-slot": "dropdown-menu-sub-content",
|
|
871
|
+
className: cn("bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg", className),
|
|
872
|
+
...props
|
|
873
|
+
});
|
|
874
|
+
}
|
|
875
|
+
//#endregion
|
|
876
|
+
//#region src/components/Label.tsx
|
|
877
|
+
function Label({ className, ...props }) {
|
|
878
|
+
return /* @__PURE__ */ jsx(LabelPrimitive.Root, {
|
|
879
|
+
"data-slot": "label",
|
|
880
|
+
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),
|
|
881
|
+
...props
|
|
882
|
+
});
|
|
883
|
+
}
|
|
884
|
+
//#endregion
|
|
885
|
+
//#region src/components/Form.tsx
|
|
886
|
+
const Form = FormProvider;
|
|
887
|
+
const FormFieldContext = React.createContext({});
|
|
888
|
+
const FormField = ({ ...props }) => {
|
|
889
|
+
return /* @__PURE__ */ jsx(FormFieldContext.Provider, {
|
|
890
|
+
value: { name: props.name },
|
|
891
|
+
children: /* @__PURE__ */ jsx(Controller, { ...props })
|
|
892
|
+
});
|
|
893
|
+
};
|
|
894
|
+
const useFormField = () => {
|
|
895
|
+
const fieldContext = React.useContext(FormFieldContext);
|
|
896
|
+
const itemContext = React.useContext(FormItemContext);
|
|
897
|
+
const { getFieldState } = useFormContext();
|
|
898
|
+
const formState = useFormState({ name: fieldContext.name });
|
|
899
|
+
const fieldState = getFieldState(fieldContext.name, formState);
|
|
900
|
+
if (!fieldContext.name) throw new Error("useFormField should be used within <FormField>");
|
|
901
|
+
const { id } = itemContext;
|
|
902
|
+
if (!id) throw new Error("useFormField should be used within <FormItem>");
|
|
903
|
+
return {
|
|
904
|
+
id,
|
|
905
|
+
name: fieldContext.name,
|
|
906
|
+
formItemId: `${id}-form-item`,
|
|
907
|
+
formDescriptionId: `${id}-form-item-description`,
|
|
908
|
+
formMessageId: `${id}-form-item-message`,
|
|
909
|
+
...fieldState
|
|
910
|
+
};
|
|
911
|
+
};
|
|
912
|
+
const FormItemContext = React.createContext({});
|
|
913
|
+
function FormItem({ className, ...props }) {
|
|
914
|
+
const id = React.useId();
|
|
915
|
+
return /* @__PURE__ */ jsx(FormItemContext.Provider, {
|
|
916
|
+
value: { id },
|
|
917
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
918
|
+
"data-slot": "form-item",
|
|
919
|
+
className: cn("grid gap-2", className),
|
|
920
|
+
...props
|
|
921
|
+
})
|
|
922
|
+
});
|
|
923
|
+
}
|
|
924
|
+
function FormLabel({ className, ...props }) {
|
|
925
|
+
const { error, formItemId } = useFormField();
|
|
926
|
+
return /* @__PURE__ */ jsx(Label, {
|
|
927
|
+
"data-slot": "form-label",
|
|
928
|
+
"data-error": !!error,
|
|
929
|
+
className: cn("data-[error=true]:text-destructive", className),
|
|
930
|
+
htmlFor: formItemId,
|
|
931
|
+
...props
|
|
932
|
+
});
|
|
933
|
+
}
|
|
934
|
+
function FormControl({ ...props }) {
|
|
935
|
+
const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
|
|
936
|
+
return /* @__PURE__ */ jsx(Slot.Root, {
|
|
937
|
+
"data-slot": "form-control",
|
|
938
|
+
id: formItemId,
|
|
939
|
+
"aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
|
|
940
|
+
"aria-invalid": !!error,
|
|
941
|
+
...props
|
|
942
|
+
});
|
|
943
|
+
}
|
|
944
|
+
function FormDescription({ className, ...props }) {
|
|
945
|
+
const { formDescriptionId } = useFormField();
|
|
946
|
+
return /* @__PURE__ */ jsx("p", {
|
|
947
|
+
"data-slot": "form-description",
|
|
948
|
+
id: formDescriptionId,
|
|
949
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
950
|
+
...props
|
|
951
|
+
});
|
|
952
|
+
}
|
|
953
|
+
function FormMessage({ className, ...props }) {
|
|
954
|
+
const { error, formMessageId } = useFormField();
|
|
955
|
+
const body = error ? String(error?.message ?? "") : props.children;
|
|
956
|
+
if (!body) return null;
|
|
957
|
+
return /* @__PURE__ */ jsx("p", {
|
|
958
|
+
"data-slot": "form-message",
|
|
959
|
+
id: formMessageId,
|
|
960
|
+
className: cn("text-destructive text-sm", className),
|
|
961
|
+
...props,
|
|
962
|
+
children: body
|
|
963
|
+
});
|
|
964
|
+
}
|
|
965
|
+
//#endregion
|
|
966
|
+
//#region src/components/IconButton.tsx
|
|
967
|
+
function IconButton({ icon: Icon, className, variant = "ghost", size = "icon", isActive, ...props }) {
|
|
968
|
+
return /* @__PURE__ */ jsx(Button, {
|
|
969
|
+
variant,
|
|
970
|
+
size,
|
|
971
|
+
"data-active": isActive,
|
|
972
|
+
className: cn(isActive && "bg-accent text-accent-foreground", className),
|
|
973
|
+
...props,
|
|
974
|
+
children: /* @__PURE__ */ jsx(Icon, {})
|
|
975
|
+
});
|
|
976
|
+
}
|
|
977
|
+
//#endregion
|
|
978
|
+
//#region src/components/Toggle.tsx
|
|
979
|
+
const toggleVariants = cva("focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
|
|
980
|
+
variants: {
|
|
981
|
+
variant: {
|
|
982
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
983
|
+
destructive: "bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 text-white",
|
|
984
|
+
outline: "bg-background hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 border shadow-xs",
|
|
985
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
986
|
+
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
|
987
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
988
|
+
},
|
|
989
|
+
size: {
|
|
990
|
+
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
991
|
+
sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
|
|
992
|
+
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
|
993
|
+
icon: "size-9",
|
|
994
|
+
"icon-xs": "size-6",
|
|
995
|
+
"icon-sm": "size-8",
|
|
996
|
+
"icon-lg": "size-10"
|
|
997
|
+
}
|
|
998
|
+
},
|
|
999
|
+
defaultVariants: {
|
|
1000
|
+
variant: "default",
|
|
1001
|
+
size: "default"
|
|
1002
|
+
}
|
|
1003
|
+
});
|
|
1004
|
+
function Toggle({ className, variant = "default", size = "default", ...props }) {
|
|
1005
|
+
return /* @__PURE__ */ jsx(TogglePrimitive.Root, {
|
|
1006
|
+
"data-slot": "toggle",
|
|
1007
|
+
className: cn(toggleVariants({
|
|
1008
|
+
variant,
|
|
1009
|
+
size,
|
|
1010
|
+
className
|
|
1011
|
+
})),
|
|
1012
|
+
...props
|
|
1013
|
+
});
|
|
1014
|
+
}
|
|
1015
|
+
//#endregion
|
|
1016
|
+
//#region src/components/IconToggle.tsx
|
|
1017
|
+
function IconToggle({ icon: Icon, variant = "ghost", size = "icon", ...props }) {
|
|
1018
|
+
return /* @__PURE__ */ jsx(Toggle, {
|
|
1019
|
+
variant,
|
|
1020
|
+
size,
|
|
1021
|
+
...props,
|
|
1022
|
+
children: /* @__PURE__ */ jsx(Icon, {})
|
|
1023
|
+
});
|
|
1024
|
+
}
|
|
1025
|
+
//#endregion
|
|
1026
|
+
//#region src/components/Input.tsx
|
|
1027
|
+
function Input({ className, type, ...props }) {
|
|
1028
|
+
return /* @__PURE__ */ jsx("input", {
|
|
1029
|
+
type,
|
|
1030
|
+
"data-slot": "input",
|
|
1031
|
+
className: cn("border-input selection:bg-primary selection:text-primary-foreground file:text-foreground placeholder:text-muted-foreground dark:bg-input/30 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:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", className),
|
|
1032
|
+
...props
|
|
1033
|
+
});
|
|
1034
|
+
}
|
|
1035
|
+
//#endregion
|
|
1036
|
+
//#region src/components/Pagination.tsx
|
|
1037
|
+
function Pagination({ className, ...props }) {
|
|
1038
|
+
return /* @__PURE__ */ jsx("nav", {
|
|
1039
|
+
"aria-label": "pagination",
|
|
1040
|
+
"data-slot": "pagination",
|
|
1041
|
+
className: cn("mx-auto flex w-full justify-center", className),
|
|
1042
|
+
...props
|
|
1043
|
+
});
|
|
1044
|
+
}
|
|
1045
|
+
function PaginationContent({ className, ...props }) {
|
|
1046
|
+
return /* @__PURE__ */ jsx("ul", {
|
|
1047
|
+
"data-slot": "pagination-content",
|
|
1048
|
+
className: cn("flex flex-row items-center gap-1", className),
|
|
1049
|
+
...props
|
|
1050
|
+
});
|
|
1051
|
+
}
|
|
1052
|
+
function PaginationItem({ ...props }) {
|
|
1053
|
+
return /* @__PURE__ */ jsx("li", {
|
|
1054
|
+
"data-slot": "pagination-item",
|
|
1055
|
+
...props
|
|
1056
|
+
});
|
|
1057
|
+
}
|
|
1058
|
+
function PaginationLink({ className, isActive, size = "icon", ...props }) {
|
|
1059
|
+
return /* @__PURE__ */ jsx("a", {
|
|
1060
|
+
"aria-current": isActive ? "page" : void 0,
|
|
1061
|
+
"data-slot": "pagination-link",
|
|
1062
|
+
"data-active": isActive,
|
|
1063
|
+
className: cn(buttonVariants({
|
|
1064
|
+
variant: isActive ? "outline" : "ghost",
|
|
1065
|
+
size
|
|
1066
|
+
}), className),
|
|
1067
|
+
...props
|
|
1068
|
+
});
|
|
1069
|
+
}
|
|
1070
|
+
function PaginationPrevious({ className, ...props }) {
|
|
1071
|
+
return /* @__PURE__ */ jsxs(PaginationLink, {
|
|
1072
|
+
"aria-label": "Go to previous page",
|
|
1073
|
+
size: "default",
|
|
1074
|
+
className: cn("gap-1 px-2.5 sm:pl-2.5", className),
|
|
1075
|
+
...props,
|
|
1076
|
+
children: [/* @__PURE__ */ jsx(ChevronLeftIcon, {}), /* @__PURE__ */ jsx("span", {
|
|
1077
|
+
className: "hidden sm:block",
|
|
1078
|
+
children: "Previous"
|
|
1079
|
+
})]
|
|
1080
|
+
});
|
|
1081
|
+
}
|
|
1082
|
+
function PaginationNext({ className, ...props }) {
|
|
1083
|
+
return /* @__PURE__ */ jsxs(PaginationLink, {
|
|
1084
|
+
"aria-label": "Go to next page",
|
|
1085
|
+
size: "default",
|
|
1086
|
+
className: cn("gap-1 px-2.5 sm:pr-2.5", className),
|
|
1087
|
+
...props,
|
|
1088
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
1089
|
+
className: "hidden sm:block",
|
|
1090
|
+
children: "Next"
|
|
1091
|
+
}), /* @__PURE__ */ jsx(ChevronRightIcon, {})]
|
|
1092
|
+
});
|
|
1093
|
+
}
|
|
1094
|
+
function PaginationEllipsis({ className, ...props }) {
|
|
1095
|
+
return /* @__PURE__ */ jsxs("span", {
|
|
1096
|
+
"aria-hidden": true,
|
|
1097
|
+
"data-slot": "pagination-ellipsis",
|
|
1098
|
+
className: cn("flex size-9 items-center justify-center", className),
|
|
1099
|
+
...props,
|
|
1100
|
+
children: [/* @__PURE__ */ jsx(MoreHorizontalIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
|
|
1101
|
+
className: "sr-only",
|
|
1102
|
+
children: "More pages"
|
|
1103
|
+
})]
|
|
1104
|
+
});
|
|
1105
|
+
}
|
|
1106
|
+
//#endregion
|
|
1107
|
+
//#region src/components/RadioGroup.tsx
|
|
1108
|
+
function RadioGroup({ className, ...props }) {
|
|
1109
|
+
return /* @__PURE__ */ jsx(RadioGroup$1.Root, {
|
|
1110
|
+
"data-slot": "radio-group",
|
|
1111
|
+
className: cn("grid gap-3", className),
|
|
1112
|
+
...props
|
|
1113
|
+
});
|
|
1114
|
+
}
|
|
1115
|
+
function RadioGroupItem({ className, ...props }) {
|
|
1116
|
+
return /* @__PURE__ */ jsx(RadioGroup$1.Item, {
|
|
1117
|
+
"data-slot": "radio-group-item",
|
|
1118
|
+
className: cn("border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 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),
|
|
1119
|
+
...props,
|
|
1120
|
+
children: /* @__PURE__ */ jsx(RadioGroup$1.Indicator, {
|
|
1121
|
+
"data-slot": "radio-group-indicator",
|
|
1122
|
+
className: "relative flex items-center justify-center",
|
|
1123
|
+
children: /* @__PURE__ */ jsx(CircleIcon, { className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" })
|
|
1124
|
+
})
|
|
1125
|
+
});
|
|
1126
|
+
}
|
|
1127
|
+
//#endregion
|
|
1128
|
+
//#region src/components/Select.tsx
|
|
1129
|
+
function Select({ ...props }) {
|
|
1130
|
+
return /* @__PURE__ */ jsx(SelectPrimitive.Root, {
|
|
1131
|
+
"data-slot": "select",
|
|
1132
|
+
...props
|
|
1133
|
+
});
|
|
1134
|
+
}
|
|
1135
|
+
function SelectGroup({ ...props }) {
|
|
1136
|
+
return /* @__PURE__ */ jsx(SelectPrimitive.Group, {
|
|
1137
|
+
"data-slot": "select-group",
|
|
1138
|
+
...props
|
|
1139
|
+
});
|
|
1140
|
+
}
|
|
1141
|
+
function SelectValue({ ...props }) {
|
|
1142
|
+
return /* @__PURE__ */ jsx(SelectPrimitive.Value, {
|
|
1143
|
+
"data-slot": "select-value",
|
|
1144
|
+
...props
|
|
1145
|
+
});
|
|
1146
|
+
}
|
|
1147
|
+
function SelectTrigger({ className, size = "default", children, ...props }) {
|
|
1148
|
+
return /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
|
|
1149
|
+
"data-slot": "select-trigger",
|
|
1150
|
+
"data-size": size,
|
|
1151
|
+
className: cn("border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='text-'])]:text-muted-foreground 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),
|
|
1152
|
+
...props,
|
|
1153
|
+
children: [children, /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
|
|
1154
|
+
asChild: true,
|
|
1155
|
+
children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" })
|
|
1156
|
+
})]
|
|
1157
|
+
});
|
|
1158
|
+
}
|
|
1159
|
+
function SelectContent({ className, children, position = "item-aligned", align = "center", ...props }) {
|
|
1160
|
+
const portalContainer = usePortalContainer();
|
|
1161
|
+
return /* @__PURE__ */ jsx(SelectPrimitive.Portal, {
|
|
1162
|
+
container: portalContainer,
|
|
1163
|
+
children: /* @__PURE__ */ jsxs(SelectPrimitive.Content, {
|
|
1164
|
+
"data-slot": "select-content",
|
|
1165
|
+
className: cn("bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 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),
|
|
1166
|
+
position,
|
|
1167
|
+
align,
|
|
1168
|
+
...props,
|
|
1169
|
+
children: [
|
|
1170
|
+
/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
|
|
1171
|
+
/* @__PURE__ */ jsx(SelectPrimitive.Viewport, {
|
|
1172
|
+
className: cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"),
|
|
1173
|
+
children
|
|
1174
|
+
}),
|
|
1175
|
+
/* @__PURE__ */ jsx(SelectScrollDownButton, {})
|
|
1176
|
+
]
|
|
1177
|
+
})
|
|
1178
|
+
});
|
|
1179
|
+
}
|
|
1180
|
+
function SelectLabel({ className, ...props }) {
|
|
1181
|
+
return /* @__PURE__ */ jsx(SelectPrimitive.Label, {
|
|
1182
|
+
"data-slot": "select-label",
|
|
1183
|
+
className: cn("text-muted-foreground px-2 py-1.5 text-xs", className),
|
|
1184
|
+
...props
|
|
1185
|
+
});
|
|
1186
|
+
}
|
|
1187
|
+
function SelectItem({ className, children, ...props }) {
|
|
1188
|
+
return /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
|
|
1189
|
+
"data-slot": "select-item",
|
|
1190
|
+
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),
|
|
1191
|
+
...props,
|
|
1192
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
1193
|
+
"data-slot": "select-item-indicator",
|
|
1194
|
+
className: "absolute right-2 flex size-3.5 items-center justify-center",
|
|
1195
|
+
children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
|
|
1196
|
+
}), /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })]
|
|
1197
|
+
});
|
|
1198
|
+
}
|
|
1199
|
+
function SelectSeparator({ className, ...props }) {
|
|
1200
|
+
return /* @__PURE__ */ jsx(SelectPrimitive.Separator, {
|
|
1201
|
+
"data-slot": "select-separator",
|
|
1202
|
+
className: cn("bg-border pointer-events-none -mx-1 my-1 h-px", className),
|
|
1203
|
+
...props
|
|
1204
|
+
});
|
|
1205
|
+
}
|
|
1206
|
+
function SelectScrollUpButton({ className, ...props }) {
|
|
1207
|
+
return /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, {
|
|
1208
|
+
"data-slot": "select-scroll-up-button",
|
|
1209
|
+
className: cn("flex cursor-default items-center justify-center py-1", className),
|
|
1210
|
+
...props,
|
|
1211
|
+
children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" })
|
|
1212
|
+
});
|
|
1213
|
+
}
|
|
1214
|
+
function SelectScrollDownButton({ className, ...props }) {
|
|
1215
|
+
return /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, {
|
|
1216
|
+
"data-slot": "select-scroll-down-button",
|
|
1217
|
+
className: cn("flex cursor-default items-center justify-center py-1", className),
|
|
1218
|
+
...props,
|
|
1219
|
+
children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
|
|
1220
|
+
});
|
|
1221
|
+
}
|
|
1222
|
+
//#endregion
|
|
1223
|
+
//#region src/components/Separator.tsx
|
|
1224
|
+
const Separator = React.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(SeparatorPrimitive.Root, {
|
|
1225
|
+
ref,
|
|
1226
|
+
decorative,
|
|
1227
|
+
orientation,
|
|
1228
|
+
className: cn("shrink-0 bg-gray-200", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className),
|
|
1229
|
+
...props
|
|
1230
|
+
}));
|
|
1231
|
+
Separator.displayName = SeparatorPrimitive.Root.displayName;
|
|
1232
|
+
//#endregion
|
|
1233
|
+
//#region src/components/Sheet.tsx
|
|
1234
|
+
const Sheet = DialogPrimitive.Root;
|
|
1235
|
+
const SheetTrigger = DialogPrimitive.Trigger;
|
|
1236
|
+
const SheetClose = DialogPrimitive.Close;
|
|
1237
|
+
function SheetPortal(props) {
|
|
1238
|
+
const portalContainer = usePortalContainer();
|
|
1239
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Portal, {
|
|
1240
|
+
container: portalContainer,
|
|
1241
|
+
...props
|
|
1242
|
+
});
|
|
1243
|
+
}
|
|
1244
|
+
const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
|
|
1245
|
+
className: cn("data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed inset-0 z-[1040] bg-black/80", className),
|
|
1246
|
+
...props,
|
|
1247
|
+
ref
|
|
1248
|
+
}));
|
|
1249
|
+
SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
|
1250
|
+
const sheetVariants = cva("bg-background data-[state=closed]:animate-out data-[state=open]:animate-in fixed z-[1050] gap-4 p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", {
|
|
1251
|
+
variants: { side: {
|
|
1252
|
+
top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b",
|
|
1253
|
+
bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t",
|
|
1254
|
+
left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-full border-r sm:max-w-sm",
|
|
1255
|
+
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"
|
|
1256
|
+
} },
|
|
1257
|
+
defaultVariants: { side: "right" }
|
|
1258
|
+
});
|
|
1259
|
+
const SheetContent = React.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
|
|
1260
|
+
ref,
|
|
1261
|
+
className: cn(sheetVariants({ side }), className),
|
|
1262
|
+
...props,
|
|
1263
|
+
children: [/* @__PURE__ */ jsxs(DialogPrimitive.Close, {
|
|
1264
|
+
className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-sm 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",
|
|
1265
|
+
children: [/* @__PURE__ */ jsx(X, {}), /* @__PURE__ */ jsx("span", {
|
|
1266
|
+
className: "sr-only",
|
|
1267
|
+
children: "Close"
|
|
1268
|
+
})]
|
|
1269
|
+
}), children]
|
|
1270
|
+
})] }));
|
|
1271
|
+
SheetContent.displayName = DialogPrimitive.Content.displayName;
|
|
1272
|
+
function SheetHeader({ className, ...props }) {
|
|
1273
|
+
return /* @__PURE__ */ jsx("div", {
|
|
1274
|
+
className: cn("flex flex-col space-y-2 text-center sm:text-left", className),
|
|
1275
|
+
...props
|
|
1276
|
+
});
|
|
1277
|
+
}
|
|
1278
|
+
function SheetFooter({ className, ...props }) {
|
|
1279
|
+
return /* @__PURE__ */ jsx("div", {
|
|
1280
|
+
className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
|
|
1281
|
+
...props
|
|
1282
|
+
});
|
|
1283
|
+
}
|
|
1284
|
+
const SheetTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Title, {
|
|
1285
|
+
ref,
|
|
1286
|
+
className: cn("text-foreground text-lg font-semibold", className),
|
|
1287
|
+
...props
|
|
1288
|
+
}));
|
|
1289
|
+
SheetTitle.displayName = DialogPrimitive.Title.displayName;
|
|
1290
|
+
const SheetDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, {
|
|
1291
|
+
ref,
|
|
1292
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
1293
|
+
...props
|
|
1294
|
+
}));
|
|
1295
|
+
SheetDescription.displayName = DialogPrimitive.Description.displayName;
|
|
1296
|
+
//#endregion
|
|
1297
|
+
//#region src/components/Skeleton.tsx
|
|
1298
|
+
function Skeleton({ className, ...props }) {
|
|
1299
|
+
return /* @__PURE__ */ jsx("div", {
|
|
1300
|
+
className: cn("bg-muted animate-pulse rounded-md", className),
|
|
1301
|
+
...props
|
|
1302
|
+
});
|
|
1303
|
+
}
|
|
1304
|
+
//#endregion
|
|
1305
|
+
//#region src/components/Slider.tsx
|
|
1306
|
+
const Slider = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(SliderPrimitive.Root, {
|
|
1307
|
+
ref,
|
|
1308
|
+
className: cn("relative flex w-full touch-none items-center select-none", className),
|
|
1309
|
+
...props,
|
|
1310
|
+
children: [/* @__PURE__ */ jsx(SliderPrimitive.Track, {
|
|
1311
|
+
className: "relative h-2 w-full grow overflow-hidden rounded-full bg-gray-200",
|
|
1312
|
+
children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "bg-primary absolute h-full" })
|
|
1313
|
+
}), /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "border-primary bg-background ring-offset-background focus-visible:ring-ring block h-5 w-5 rounded-full border-2 transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50" })]
|
|
1314
|
+
}));
|
|
1315
|
+
Slider.displayName = SliderPrimitive.Root.displayName;
|
|
1316
|
+
//#endregion
|
|
1317
|
+
//#region src/components/Sonner.tsx
|
|
1318
|
+
function Toaster({ theme = "system", ...props }) {
|
|
1319
|
+
return /* @__PURE__ */ jsx(Toaster$1, {
|
|
1320
|
+
theme,
|
|
1321
|
+
className: "toaster group",
|
|
1322
|
+
icons: {
|
|
1323
|
+
success: /* @__PURE__ */ jsx(CircleCheckIcon, { className: "size-4" }),
|
|
1324
|
+
info: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }),
|
|
1325
|
+
warning: /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4" }),
|
|
1326
|
+
error: /* @__PURE__ */ jsx(OctagonXIcon, { className: "size-4" }),
|
|
1327
|
+
loading: /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" })
|
|
1328
|
+
},
|
|
1329
|
+
style: {
|
|
1330
|
+
"--normal-bg": "var(--popover)",
|
|
1331
|
+
"--normal-text": "var(--popover-foreground)",
|
|
1332
|
+
"--normal-border": "var(--border)",
|
|
1333
|
+
"--success-bg": "var(--popover)",
|
|
1334
|
+
"--success-text": "var(--popover-foreground)",
|
|
1335
|
+
"--success-border": "var(--border)",
|
|
1336
|
+
"--error-bg": "var(--popover)",
|
|
1337
|
+
"--error-text": "var(--popover-foreground)",
|
|
1338
|
+
"--error-border": "var(--border)",
|
|
1339
|
+
"--warning-bg": "var(--popover)",
|
|
1340
|
+
"--warning-text": "var(--popover-foreground)",
|
|
1341
|
+
"--warning-border": "var(--border)",
|
|
1342
|
+
"--info-bg": "var(--popover)",
|
|
1343
|
+
"--info-text": "var(--popover-foreground)",
|
|
1344
|
+
"--info-border": "var(--border)",
|
|
1345
|
+
"--border-radius": "var(--radius)"
|
|
1346
|
+
},
|
|
1347
|
+
...props
|
|
1348
|
+
});
|
|
1349
|
+
}
|
|
1350
|
+
//#endregion
|
|
1351
|
+
//#region src/components/Spinner.tsx
|
|
1352
|
+
function Spinner({ className, ...props }) {
|
|
1353
|
+
return /* @__PURE__ */ jsx(LoaderIcon, {
|
|
1354
|
+
"data-slot": "spinner",
|
|
1355
|
+
role: "status",
|
|
1356
|
+
"aria-label": "Loading",
|
|
1357
|
+
className: cn("size-4 animate-spin", className),
|
|
1358
|
+
...props
|
|
1359
|
+
});
|
|
1360
|
+
}
|
|
1361
|
+
//#endregion
|
|
1362
|
+
//#region src/components/SpinnerWithText.tsx
|
|
1363
|
+
function SpinnerWithText({ text = "Loading...", variant = "inline", className }) {
|
|
1364
|
+
return /* @__PURE__ */ jsx("div", {
|
|
1365
|
+
className: cn("flex items-center justify-center self-stretch py-10", variant === "page" && "h-[60vh]", className),
|
|
1366
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
1367
|
+
className: "flex flex-col items-center justify-start gap-4",
|
|
1368
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
1369
|
+
className: "relative h-8 w-8",
|
|
1370
|
+
children: /* @__PURE__ */ jsxs("svg", {
|
|
1371
|
+
width: "32",
|
|
1372
|
+
height: "33",
|
|
1373
|
+
viewBox: "0 0 32 33",
|
|
1374
|
+
fill: "none",
|
|
1375
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1376
|
+
className: "animate-spin",
|
|
1377
|
+
children: [/* @__PURE__ */ jsx("path", {
|
|
1378
|
+
d: "M30 16.5C30 18.3385 29.6379 20.159 28.9343 21.8576C28.2308 23.5561 27.1995 25.0995 25.8995 26.3995C24.5995 27.6995 23.0561 28.7307 21.3576 29.4343C19.659 30.1379 17.8385 30.5 16 30.5C14.1615 30.5 12.341 30.1379 10.6424 29.4343C8.94387 28.7307 7.40052 27.6995 6.1005 26.3995C4.80048 25.0995 3.76925 23.5561 3.06569 21.8576C2.36212 20.159 2 18.3385 2 16.5C2 14.6615 2.36212 12.841 3.06569 11.1424C3.76926 9.44387 4.80049 7.90052 6.10051 6.6005C7.40053 5.30048 8.94388 4.26925 10.6424 3.56568C12.341 2.86212 14.1615 2.5 16 2.5C17.8385 2.5 19.659 2.86212 21.3576 3.56569C23.0561 4.26925 24.5995 5.30049 25.8995 6.60051C27.1995 7.90053 28.2308 9.44388 28.9343 11.1424C29.6379 12.841 30 14.6615 30 16.5L30 16.5Z",
|
|
1379
|
+
stroke: "#F5F6F9",
|
|
1380
|
+
strokeWidth: "4",
|
|
1381
|
+
strokeLinecap: "round",
|
|
1382
|
+
strokeLinejoin: "round"
|
|
1383
|
+
}), /* @__PURE__ */ jsx("path", {
|
|
1384
|
+
d: "M16 2.5C17.8385 2.5 19.659 2.86212 21.3576 3.56569C23.0561 4.26925 24.5995 5.30049 25.8995 6.60051C27.1995 7.90053 28.2308 9.44388 28.9343 11.1424C29.6379 12.841 30 14.6615 30 16.5",
|
|
1385
|
+
stroke: "#155DFC",
|
|
1386
|
+
strokeWidth: "4",
|
|
1387
|
+
strokeLinecap: "round",
|
|
1388
|
+
strokeLinejoin: "round"
|
|
1389
|
+
})]
|
|
1390
|
+
})
|
|
1391
|
+
}), text && /* @__PURE__ */ jsx("div", {
|
|
1392
|
+
className: "text-center text-sm leading-tight font-medium text-slate-700",
|
|
1393
|
+
children: text
|
|
1394
|
+
})]
|
|
1395
|
+
})
|
|
1396
|
+
});
|
|
1397
|
+
}
|
|
1398
|
+
//#endregion
|
|
1399
|
+
//#region src/components/Switch.tsx
|
|
1400
|
+
const Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SwitchPrimitive.Root, {
|
|
1401
|
+
className: cn("peer focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:bg-gray-200", className),
|
|
1402
|
+
...props,
|
|
1403
|
+
ref,
|
|
1404
|
+
children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { className: cn("pointer-events-none absolute left-0 block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform duration-200 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0") })
|
|
1405
|
+
}));
|
|
1406
|
+
Switch.displayName = SwitchPrimitive.Root.displayName;
|
|
1407
|
+
//#endregion
|
|
1408
|
+
//#region src/components/Table.tsx
|
|
1409
|
+
function Table({ className, ...props }) {
|
|
1410
|
+
return /* @__PURE__ */ jsx("div", {
|
|
1411
|
+
"data-slot": "table-container",
|
|
1412
|
+
className: "relative w-full overflow-x-auto",
|
|
1413
|
+
children: /* @__PURE__ */ jsx("table", {
|
|
1414
|
+
"data-slot": "table",
|
|
1415
|
+
className: cn("w-full caption-bottom text-sm", className),
|
|
1416
|
+
...props
|
|
1417
|
+
})
|
|
1418
|
+
});
|
|
1419
|
+
}
|
|
1420
|
+
function TableHeader({ className, ...props }) {
|
|
1421
|
+
return /* @__PURE__ */ jsx("thead", {
|
|
1422
|
+
"data-slot": "table-header",
|
|
1423
|
+
className: cn("[&_tr]:border-b", className),
|
|
1424
|
+
...props
|
|
1425
|
+
});
|
|
1426
|
+
}
|
|
1427
|
+
function TableBody({ className, ...props }) {
|
|
1428
|
+
return /* @__PURE__ */ jsx("tbody", {
|
|
1429
|
+
"data-slot": "table-body",
|
|
1430
|
+
className: cn("[&_tr:last-child]:border-0", className),
|
|
1431
|
+
...props
|
|
1432
|
+
});
|
|
1433
|
+
}
|
|
1434
|
+
function TableFooter({ className, ...props }) {
|
|
1435
|
+
return /* @__PURE__ */ jsx("tfoot", {
|
|
1436
|
+
"data-slot": "table-footer",
|
|
1437
|
+
className: cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className),
|
|
1438
|
+
...props
|
|
1439
|
+
});
|
|
1440
|
+
}
|
|
1441
|
+
function TableRow({ className, ...props }) {
|
|
1442
|
+
return /* @__PURE__ */ jsx("tr", {
|
|
1443
|
+
"data-slot": "table-row",
|
|
1444
|
+
className: cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className),
|
|
1445
|
+
...props
|
|
1446
|
+
});
|
|
1447
|
+
}
|
|
1448
|
+
function TableHead({ className, ...props }) {
|
|
1449
|
+
return /* @__PURE__ */ jsx("th", {
|
|
1450
|
+
"data-slot": "table-head",
|
|
1451
|
+
className: cn("text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
|
|
1452
|
+
...props
|
|
1453
|
+
});
|
|
1454
|
+
}
|
|
1455
|
+
function TableCell({ className, ...props }) {
|
|
1456
|
+
return /* @__PURE__ */ jsx("td", {
|
|
1457
|
+
"data-slot": "table-cell",
|
|
1458
|
+
className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
|
|
1459
|
+
...props
|
|
1460
|
+
});
|
|
1461
|
+
}
|
|
1462
|
+
function TableCaption({ className, ...props }) {
|
|
1463
|
+
return /* @__PURE__ */ jsx("caption", {
|
|
1464
|
+
"data-slot": "table-caption",
|
|
1465
|
+
className: cn("text-muted-foreground mt-4 text-sm", className),
|
|
1466
|
+
...props
|
|
1467
|
+
});
|
|
1468
|
+
}
|
|
1469
|
+
//#endregion
|
|
1470
|
+
//#region src/components/Tabs.tsx
|
|
1471
|
+
function Tabs({ className, ...props }) {
|
|
1472
|
+
return /* @__PURE__ */ jsx(TabsPrimitive.Root, {
|
|
1473
|
+
"data-slot": "tabs",
|
|
1474
|
+
className: cn("flex flex-col gap-2", className),
|
|
1475
|
+
...props
|
|
1476
|
+
});
|
|
1477
|
+
}
|
|
1478
|
+
function TabsList({ className, ...props }) {
|
|
1479
|
+
return /* @__PURE__ */ jsx(TabsPrimitive.List, {
|
|
1480
|
+
"data-slot": "tabs-list",
|
|
1481
|
+
className: cn("bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]", className),
|
|
1482
|
+
...props
|
|
1483
|
+
});
|
|
1484
|
+
}
|
|
1485
|
+
function TabsTrigger({ className, ...props }) {
|
|
1486
|
+
return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, {
|
|
1487
|
+
"data-slot": "tabs-trigger",
|
|
1488
|
+
className: cn("text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring data-[state=active]:bg-background dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-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),
|
|
1489
|
+
...props
|
|
1490
|
+
});
|
|
1491
|
+
}
|
|
1492
|
+
function TabsContent({ className, ...props }) {
|
|
1493
|
+
return /* @__PURE__ */ jsx(TabsPrimitive.Content, {
|
|
1494
|
+
"data-slot": "tabs-content",
|
|
1495
|
+
className: cn("flex-1 outline-none", className),
|
|
1496
|
+
...props
|
|
1497
|
+
});
|
|
1498
|
+
}
|
|
1499
|
+
//#endregion
|
|
1500
|
+
//#region src/components/Textarea.tsx
|
|
1501
|
+
function Textarea({ className, ...props }) {
|
|
1502
|
+
return /* @__PURE__ */ jsx("textarea", {
|
|
1503
|
+
"data-slot": "textarea",
|
|
1504
|
+
className: cn("border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 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),
|
|
1505
|
+
...props
|
|
1506
|
+
});
|
|
1507
|
+
}
|
|
1508
|
+
//#endregion
|
|
1509
|
+
//#region src/components/ToggleGroup.tsx
|
|
1510
|
+
const ToggleGroupContext = React.createContext({
|
|
1511
|
+
size: "default",
|
|
1512
|
+
variant: "default",
|
|
1513
|
+
spacing: 0,
|
|
1514
|
+
orientation: "horizontal"
|
|
1515
|
+
});
|
|
1516
|
+
function ToggleGroup({ className, variant, size, spacing = 0, orientation = "horizontal", children, ...props }) {
|
|
1517
|
+
return /* @__PURE__ */ jsx(ToggleGroupPrimitive.Root, {
|
|
1518
|
+
"data-slot": "toggle-group",
|
|
1519
|
+
"data-variant": variant,
|
|
1520
|
+
"data-size": size,
|
|
1521
|
+
"data-spacing": spacing,
|
|
1522
|
+
"data-orientation": orientation,
|
|
1523
|
+
style: { "--gap": spacing },
|
|
1524
|
+
className: cn("cn-toggle-group group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch", className),
|
|
1525
|
+
...props,
|
|
1526
|
+
children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
|
|
1527
|
+
value: {
|
|
1528
|
+
variant,
|
|
1529
|
+
size,
|
|
1530
|
+
spacing,
|
|
1531
|
+
orientation
|
|
1532
|
+
},
|
|
1533
|
+
children
|
|
1534
|
+
})
|
|
1535
|
+
});
|
|
1536
|
+
}
|
|
1537
|
+
function ToggleGroupItem({ className, children, variant = "default", size = "default", ...props }) {
|
|
1538
|
+
const context = React.useContext(ToggleGroupContext);
|
|
1539
|
+
return /* @__PURE__ */ jsx(ToggleGroupPrimitive.Item, {
|
|
1540
|
+
"data-slot": "toggle-group-item",
|
|
1541
|
+
"data-variant": context.variant || variant,
|
|
1542
|
+
"data-size": context.size || size,
|
|
1543
|
+
"data-spacing": context.spacing,
|
|
1544
|
+
className: cn("cn-toggle-group-item shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t", toggleVariants({
|
|
1545
|
+
variant: context.variant || variant,
|
|
1546
|
+
size: context.size || size
|
|
1547
|
+
}), className),
|
|
1548
|
+
...props,
|
|
1549
|
+
children
|
|
1550
|
+
});
|
|
1551
|
+
}
|
|
1552
|
+
//#endregion
|
|
1553
|
+
//#region src/components/Tooltip.tsx
|
|
1554
|
+
const TooltipProvider = TooltipPrimitive.Provider;
|
|
1555
|
+
function Tooltip(props) {
|
|
1556
|
+
return /* @__PURE__ */ jsx(TooltipPrimitive.Root, { ...props });
|
|
1557
|
+
}
|
|
1558
|
+
const TooltipTrigger = TooltipPrimitive.Trigger;
|
|
1559
|
+
function TooltipContent({ className, sideOffset = 4, ...props }) {
|
|
1560
|
+
const portalContainer = usePortalContainer();
|
|
1561
|
+
return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, {
|
|
1562
|
+
container: portalContainer,
|
|
1563
|
+
children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
|
|
1564
|
+
sideOffset,
|
|
1565
|
+
className: cn("animate-in bg-popover text-popover-foreground fade-in-0 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md", className),
|
|
1566
|
+
...props
|
|
1567
|
+
})
|
|
1568
|
+
});
|
|
1569
|
+
}
|
|
1570
|
+
//#endregion
|
|
1571
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Button, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Collapsible, CollapsibleContent, CollapsibleTrigger, DatePicker, 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, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, IconButton, IconToggle, Input, Label, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PortalContainerProvider, RadioGroup, RadioGroupItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Slider, Spinner, SpinnerWithText, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, toggleVariants, useFormField, useZodForm };
|
|
1572
|
+
|
|
1573
|
+
//# sourceMappingURL=index.mjs.map
|