@facter/ds-core 1.1.1 → 1.1.3
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.d.mts +1193 -14
- package/dist/index.d.ts +1193 -14
- package/dist/index.js +3948 -28
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +3866 -29
- package/dist/index.mjs.map +1 -1
- package/dist/themes/index.d.mts +46 -0
- package/dist/themes/index.d.ts +46 -0
- package/dist/themes/index.js +33 -0
- package/dist/themes/index.js.map +1 -0
- package/dist/themes/index.mjs +30 -0
- package/dist/themes/index.mjs.map +1 -0
- package/dist/themes/tailwind-preset.d.mts +19 -0
- package/dist/themes/tailwind-preset.d.ts +19 -0
- package/dist/themes/tailwind-preset.js +79 -0
- package/dist/themes/tailwind-preset.js.map +1 -0
- package/dist/themes/tailwind-preset.mjs +74 -0
- package/dist/themes/tailwind-preset.mjs.map +1 -0
- package/package.json +33 -3
- package/src/themes/base.css +31 -0
- package/src/themes/techcare.css +59 -0
- package/src/themes/truck.css +59 -0
- package/src/themes/vagas.css +59 -0
package/dist/index.mjs
CHANGED
|
@@ -1,22 +1,34 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as React36 from 'react';
|
|
2
2
|
import { cva } from 'class-variance-authority';
|
|
3
3
|
import { clsx } from 'clsx';
|
|
4
4
|
import { twMerge } from 'tailwind-merge';
|
|
5
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
5
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
6
|
+
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
7
|
+
import { ChevronDown, Check, Inbox, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, X, ArrowDown, ArrowUp, ChevronsUpDown, FileText, FileSpreadsheet, Download, Rows4, Rows3, LayoutList, SlidersHorizontal, Info, AlertTriangle, XCircle, CheckCircle2, Circle, Building2, Star, ArrowRight, Search, User, LogOut, Menu, PinOff, Pin } from 'lucide-react';
|
|
8
|
+
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
6
9
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
10
|
+
import { flexRender, useReactTable, getSortedRowModel, getPaginationRowModel, getFilteredRowModel, getCoreRowModel } from '@tanstack/react-table';
|
|
11
|
+
export { flexRender } from '@tanstack/react-table';
|
|
12
|
+
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
13
|
+
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
14
|
+
import { toast as toast$1, Toaster as Toaster$1 } from 'sonner';
|
|
15
|
+
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
|
16
|
+
import { Controller } from 'react-hook-form';
|
|
17
|
+
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
|
|
7
18
|
|
|
8
19
|
// src/components/Button/Button.tsx
|
|
9
20
|
function cn(...inputs) {
|
|
10
21
|
return twMerge(clsx(inputs));
|
|
11
22
|
}
|
|
12
23
|
var buttonVariants = cva(
|
|
13
|
-
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
|
24
|
+
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
|
|
14
25
|
{
|
|
15
26
|
variants: {
|
|
16
27
|
variant: {
|
|
17
|
-
default: "bg-primary text-
|
|
18
|
-
destructive: "bg-
|
|
19
|
-
outline: "border border-input hover:bg-accent hover:text-accent-foreground",
|
|
28
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
29
|
+
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
|
30
|
+
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
|
31
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
20
32
|
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
21
33
|
link: "text-primary underline-offset-4 hover:underline"
|
|
22
34
|
},
|
|
@@ -24,7 +36,8 @@ var buttonVariants = cva(
|
|
|
24
36
|
default: "h-10 px-4 py-2",
|
|
25
37
|
sm: "h-9 px-3",
|
|
26
38
|
lg: "h-11 px-8",
|
|
27
|
-
icon: "h-10 w-10"
|
|
39
|
+
icon: "h-10 w-10",
|
|
40
|
+
"icon-sm": "h-8 w-8"
|
|
28
41
|
}
|
|
29
42
|
},
|
|
30
43
|
defaultVariants: {
|
|
@@ -33,7 +46,7 @@ var buttonVariants = cva(
|
|
|
33
46
|
}
|
|
34
47
|
}
|
|
35
48
|
);
|
|
36
|
-
var Button =
|
|
49
|
+
var Button = React36.forwardRef(
|
|
37
50
|
({ className, variant, size, ...props }, ref) => {
|
|
38
51
|
return /* @__PURE__ */ jsx(
|
|
39
52
|
"button",
|
|
@@ -66,7 +79,7 @@ var inputVariants = cva(
|
|
|
66
79
|
}
|
|
67
80
|
}
|
|
68
81
|
);
|
|
69
|
-
var Input =
|
|
82
|
+
var Input = React36.forwardRef(
|
|
70
83
|
({
|
|
71
84
|
className,
|
|
72
85
|
variant,
|
|
@@ -74,25 +87,25 @@ var Input = React4.forwardRef(
|
|
|
74
87
|
error,
|
|
75
88
|
type = "text",
|
|
76
89
|
label,
|
|
77
|
-
icon:
|
|
90
|
+
icon: Icon2,
|
|
78
91
|
required,
|
|
79
92
|
containerClassName,
|
|
80
93
|
labelClassName,
|
|
81
94
|
...props
|
|
82
95
|
}, ref) => {
|
|
83
|
-
const inputRef =
|
|
84
|
-
const [showPassword, setShowPassword] =
|
|
85
|
-
|
|
86
|
-
const focusInput =
|
|
96
|
+
const inputRef = React36.useRef(null);
|
|
97
|
+
const [showPassword, setShowPassword] = React36.useState(false);
|
|
98
|
+
React36.useImperativeHandle(ref, () => inputRef.current, []);
|
|
99
|
+
const focusInput = React36.useCallback(() => {
|
|
87
100
|
inputRef.current?.focus();
|
|
88
101
|
}, []);
|
|
89
|
-
const togglePasswordVisibility =
|
|
102
|
+
const togglePasswordVisibility = React36.useCallback(() => {
|
|
90
103
|
setShowPassword((prev) => !prev);
|
|
91
104
|
}, []);
|
|
92
105
|
const inputType = type === "password" ? showPassword ? "text" : "password" : type;
|
|
93
106
|
return /* @__PURE__ */ jsxs("div", { className: cn("relative", containerClassName), children: [
|
|
94
|
-
|
|
95
|
-
|
|
107
|
+
Icon2 && /* @__PURE__ */ jsx(
|
|
108
|
+
Icon2,
|
|
96
109
|
{
|
|
97
110
|
className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground h-4 w-4 cursor-pointer z-10",
|
|
98
111
|
onClick: focusInput
|
|
@@ -107,7 +120,7 @@ var Input = React4.forwardRef(
|
|
|
107
120
|
variant: error ? "error" : variant,
|
|
108
121
|
inputSize
|
|
109
122
|
}),
|
|
110
|
-
|
|
123
|
+
Icon2 && "pl-10",
|
|
111
124
|
type === "password" && "pr-11",
|
|
112
125
|
className
|
|
113
126
|
),
|
|
@@ -121,7 +134,7 @@ var Input = React4.forwardRef(
|
|
|
121
134
|
className: cn(
|
|
122
135
|
"absolute left-3 top-[-6px] text-xs font-medium bg-background px-1 cursor-pointer",
|
|
123
136
|
error ? "text-red-500" : "text-foreground",
|
|
124
|
-
|
|
137
|
+
Icon2 && "left-10",
|
|
125
138
|
labelClassName
|
|
126
139
|
),
|
|
127
140
|
onClick: focusInput,
|
|
@@ -219,6 +232,169 @@ function Badge({ className, variant, size, ...props }) {
|
|
|
219
232
|
return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant, size }), className), ...props });
|
|
220
233
|
}
|
|
221
234
|
Badge.displayName = "Badge";
|
|
235
|
+
var selectVariants = cva(
|
|
236
|
+
"w-full h-12 px-3 pt-4 pb-2 text-sm bg-background rounded-md border-2 transition-colors focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50",
|
|
237
|
+
{
|
|
238
|
+
variants: {
|
|
239
|
+
variant: {
|
|
240
|
+
default: "border-border focus:border-primary",
|
|
241
|
+
error: "border-red-500 focus:border-red-600"
|
|
242
|
+
},
|
|
243
|
+
selectSize: {
|
|
244
|
+
default: "h-12",
|
|
245
|
+
sm: "h-10 pt-3 pb-1",
|
|
246
|
+
lg: "h-14 pt-5 pb-2"
|
|
247
|
+
}
|
|
248
|
+
},
|
|
249
|
+
defaultVariants: {
|
|
250
|
+
variant: "default",
|
|
251
|
+
selectSize: "default"
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
);
|
|
255
|
+
var Select = React36.forwardRef(
|
|
256
|
+
({
|
|
257
|
+
className,
|
|
258
|
+
variant,
|
|
259
|
+
selectSize,
|
|
260
|
+
error,
|
|
261
|
+
label,
|
|
262
|
+
icon: Icon2,
|
|
263
|
+
required,
|
|
264
|
+
containerClassName,
|
|
265
|
+
labelClassName,
|
|
266
|
+
placeholder,
|
|
267
|
+
children,
|
|
268
|
+
...props
|
|
269
|
+
}, ref) => {
|
|
270
|
+
return /* @__PURE__ */ jsxs(SelectPrimitive.Root, { ...props, children: [
|
|
271
|
+
/* @__PURE__ */ jsxs("div", { className: cn("relative", containerClassName), children: [
|
|
272
|
+
Icon2 && /* @__PURE__ */ jsx(Icon2, { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground h-4 w-4 z-10 pointer-events-none" }),
|
|
273
|
+
/* @__PURE__ */ jsxs(
|
|
274
|
+
SelectPrimitive.Trigger,
|
|
275
|
+
{
|
|
276
|
+
ref,
|
|
277
|
+
className: cn(
|
|
278
|
+
selectVariants({
|
|
279
|
+
variant: error ? "error" : variant,
|
|
280
|
+
selectSize
|
|
281
|
+
}),
|
|
282
|
+
Icon2 && "pl-10",
|
|
283
|
+
"flex items-center justify-between",
|
|
284
|
+
className
|
|
285
|
+
),
|
|
286
|
+
children: [
|
|
287
|
+
/* @__PURE__ */ jsx(SelectPrimitive.Value, { placeholder }),
|
|
288
|
+
/* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
|
|
289
|
+
]
|
|
290
|
+
}
|
|
291
|
+
),
|
|
292
|
+
label && /* @__PURE__ */ jsxs(
|
|
293
|
+
"label",
|
|
294
|
+
{
|
|
295
|
+
className: cn(
|
|
296
|
+
"absolute left-3 top-[-6px] text-xs font-medium bg-background px-1 pointer-events-none",
|
|
297
|
+
error ? "text-red-500" : "text-foreground",
|
|
298
|
+
Icon2 && "left-10",
|
|
299
|
+
labelClassName
|
|
300
|
+
),
|
|
301
|
+
children: [
|
|
302
|
+
label,
|
|
303
|
+
required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-0.5", children: "*" })
|
|
304
|
+
]
|
|
305
|
+
}
|
|
306
|
+
)
|
|
307
|
+
] }),
|
|
308
|
+
/* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
|
|
309
|
+
SelectPrimitive.Content,
|
|
310
|
+
{
|
|
311
|
+
className: cn(
|
|
312
|
+
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
|
|
313
|
+
"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"
|
|
314
|
+
),
|
|
315
|
+
position: "popper",
|
|
316
|
+
sideOffset: 4,
|
|
317
|
+
children: /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { className: "p-1", children })
|
|
318
|
+
}
|
|
319
|
+
) })
|
|
320
|
+
] });
|
|
321
|
+
}
|
|
322
|
+
);
|
|
323
|
+
Select.displayName = "Select";
|
|
324
|
+
var SelectItem = React36.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
325
|
+
SelectPrimitive.Item,
|
|
326
|
+
{
|
|
327
|
+
ref,
|
|
328
|
+
className: cn(
|
|
329
|
+
"relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
|
|
330
|
+
"focus:bg-accent focus:text-accent-foreground",
|
|
331
|
+
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
332
|
+
className
|
|
333
|
+
),
|
|
334
|
+
...props,
|
|
335
|
+
children: [
|
|
336
|
+
/* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
|
|
337
|
+
/* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
|
|
338
|
+
]
|
|
339
|
+
}
|
|
340
|
+
));
|
|
341
|
+
SelectItem.displayName = "SelectItem";
|
|
342
|
+
var SelectGroup = SelectPrimitive.Group;
|
|
343
|
+
var SelectLabel = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
344
|
+
SelectPrimitive.Label,
|
|
345
|
+
{
|
|
346
|
+
ref,
|
|
347
|
+
className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
|
|
348
|
+
...props
|
|
349
|
+
}
|
|
350
|
+
));
|
|
351
|
+
SelectLabel.displayName = "SelectLabel";
|
|
352
|
+
var SelectSeparator = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
353
|
+
SelectPrimitive.Separator,
|
|
354
|
+
{
|
|
355
|
+
ref,
|
|
356
|
+
className: cn("-mx-1 my-1 h-px bg-muted", className),
|
|
357
|
+
...props
|
|
358
|
+
}
|
|
359
|
+
));
|
|
360
|
+
SelectSeparator.displayName = "SelectSeparator";
|
|
361
|
+
var Tabs = TabsPrimitive.Root;
|
|
362
|
+
var TabsList = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
363
|
+
TabsPrimitive.List,
|
|
364
|
+
{
|
|
365
|
+
ref,
|
|
366
|
+
className: cn(
|
|
367
|
+
"inline-flex h-12 items-center gap-6 border-b border-border",
|
|
368
|
+
className
|
|
369
|
+
),
|
|
370
|
+
...props
|
|
371
|
+
}
|
|
372
|
+
));
|
|
373
|
+
TabsList.displayName = TabsPrimitive.List.displayName;
|
|
374
|
+
var TabsTrigger = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
375
|
+
TabsPrimitive.Trigger,
|
|
376
|
+
{
|
|
377
|
+
ref,
|
|
378
|
+
className: cn(
|
|
379
|
+
"inline-flex items-center justify-center whitespace-nowrap px-1 py-3 text-sm font-medium text-muted-foreground ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:text-primary data-[state=active]:-mb-px",
|
|
380
|
+
className
|
|
381
|
+
),
|
|
382
|
+
...props
|
|
383
|
+
}
|
|
384
|
+
));
|
|
385
|
+
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
|
|
386
|
+
var TabsContent = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
387
|
+
TabsPrimitive.Content,
|
|
388
|
+
{
|
|
389
|
+
ref,
|
|
390
|
+
className: cn(
|
|
391
|
+
"mt-4 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
392
|
+
className
|
|
393
|
+
),
|
|
394
|
+
...props
|
|
395
|
+
}
|
|
396
|
+
));
|
|
397
|
+
TabsContent.displayName = TabsPrimitive.Content.displayName;
|
|
222
398
|
var loaderVariants = cva("flex items-center justify-center backdrop-blur-sm", {
|
|
223
399
|
variants: {
|
|
224
400
|
variant: {
|
|
@@ -316,7 +492,7 @@ function BarsLoader() {
|
|
|
316
492
|
i
|
|
317
493
|
)) });
|
|
318
494
|
}
|
|
319
|
-
var Loader =
|
|
495
|
+
var Loader = React36.forwardRef(
|
|
320
496
|
({
|
|
321
497
|
variant = "default",
|
|
322
498
|
message,
|
|
@@ -366,21 +542,21 @@ var Loader = React4.forwardRef(
|
|
|
366
542
|
}
|
|
367
543
|
);
|
|
368
544
|
Loader.displayName = "Loader";
|
|
369
|
-
var LoaderContext =
|
|
545
|
+
var LoaderContext = React36.createContext(
|
|
370
546
|
void 0
|
|
371
547
|
);
|
|
372
548
|
function LoaderProvider({ children }) {
|
|
373
|
-
const [isLoading, setIsLoading] =
|
|
374
|
-
const [loaderOptions, setLoaderOptions] =
|
|
375
|
-
const show =
|
|
549
|
+
const [isLoading, setIsLoading] = React36.useState(false);
|
|
550
|
+
const [loaderOptions, setLoaderOptions] = React36.useState({});
|
|
551
|
+
const show = React36.useCallback((options = {}) => {
|
|
376
552
|
setLoaderOptions(options);
|
|
377
553
|
setIsLoading(true);
|
|
378
554
|
}, []);
|
|
379
|
-
const hide =
|
|
555
|
+
const hide = React36.useCallback(() => {
|
|
380
556
|
setIsLoading(false);
|
|
381
557
|
setTimeout(() => setLoaderOptions({}), 300);
|
|
382
558
|
}, []);
|
|
383
|
-
const value =
|
|
559
|
+
const value = React36.useMemo(
|
|
384
560
|
() => ({ show, hide, isLoading }),
|
|
385
561
|
[show, hide, isLoading]
|
|
386
562
|
);
|
|
@@ -399,7 +575,7 @@ function LoaderProvider({ children }) {
|
|
|
399
575
|
] });
|
|
400
576
|
}
|
|
401
577
|
function useLoader() {
|
|
402
|
-
const context =
|
|
578
|
+
const context = React36.useContext(LoaderContext);
|
|
403
579
|
if (context === void 0) {
|
|
404
580
|
throw new Error("useLoader must be used within a LoaderProvider");
|
|
405
581
|
}
|
|
@@ -431,7 +607,7 @@ var loader = {
|
|
|
431
607
|
};
|
|
432
608
|
function GlobalLoaderController() {
|
|
433
609
|
const loaderController = useLoader();
|
|
434
|
-
|
|
610
|
+
React36.useEffect(() => {
|
|
435
611
|
setGlobalLoader(loaderController);
|
|
436
612
|
return () => {
|
|
437
613
|
setGlobalLoader(null);
|
|
@@ -439,7 +615,3668 @@ function GlobalLoaderController() {
|
|
|
439
615
|
}, [loaderController]);
|
|
440
616
|
return null;
|
|
441
617
|
}
|
|
618
|
+
var emptyStateVariants = cva(
|
|
619
|
+
"flex items-center justify-center p-8 text-center w-full",
|
|
620
|
+
{
|
|
621
|
+
variants: {
|
|
622
|
+
layout: {
|
|
623
|
+
vertical: "flex-col",
|
|
624
|
+
horizontal: "flex-row gap-4 px-4 py-3"
|
|
625
|
+
}
|
|
626
|
+
},
|
|
627
|
+
defaultVariants: {
|
|
628
|
+
layout: "vertical"
|
|
629
|
+
}
|
|
630
|
+
}
|
|
631
|
+
);
|
|
632
|
+
var iconWrapperVariants = cva("rounded-full bg-primary/5", {
|
|
633
|
+
variants: {
|
|
634
|
+
size: {
|
|
635
|
+
default: "mb-3 p-6",
|
|
636
|
+
sm: "mb-4 p-3"
|
|
637
|
+
},
|
|
638
|
+
layout: {
|
|
639
|
+
vertical: "",
|
|
640
|
+
horizontal: "mb-0"
|
|
641
|
+
}
|
|
642
|
+
},
|
|
643
|
+
defaultVariants: {
|
|
644
|
+
size: "default",
|
|
645
|
+
layout: "vertical"
|
|
646
|
+
}
|
|
647
|
+
});
|
|
648
|
+
var iconVariants = cva("text-primary", {
|
|
649
|
+
variants: {
|
|
650
|
+
size: {
|
|
651
|
+
default: "h-10 w-10",
|
|
652
|
+
sm: "h-8 w-8"
|
|
653
|
+
}
|
|
654
|
+
},
|
|
655
|
+
defaultVariants: {
|
|
656
|
+
size: "default"
|
|
657
|
+
}
|
|
658
|
+
});
|
|
659
|
+
var titleVariants = cva("font-semibold text-foreground", {
|
|
660
|
+
variants: {
|
|
661
|
+
size: {
|
|
662
|
+
default: "text-lg",
|
|
663
|
+
sm: "text-base"
|
|
664
|
+
}
|
|
665
|
+
},
|
|
666
|
+
defaultVariants: {
|
|
667
|
+
size: "default"
|
|
668
|
+
}
|
|
669
|
+
});
|
|
670
|
+
var descriptionVariants = cva("text-muted-foreground", {
|
|
671
|
+
variants: {
|
|
672
|
+
size: {
|
|
673
|
+
default: "mb-6 text-sm",
|
|
674
|
+
sm: "mb-4 text-xs"
|
|
675
|
+
},
|
|
676
|
+
layout: {
|
|
677
|
+
vertical: "",
|
|
678
|
+
horizontal: "mb-0"
|
|
679
|
+
}
|
|
680
|
+
},
|
|
681
|
+
defaultVariants: {
|
|
682
|
+
size: "default",
|
|
683
|
+
layout: "vertical"
|
|
684
|
+
}
|
|
685
|
+
});
|
|
686
|
+
var defaultDescriptionMessage = "N\xE3o se preocupe, isso \xE9 normal quando n\xE3o h\xE1 itens para exibir.";
|
|
687
|
+
var containerAnimation = {
|
|
688
|
+
initial: { opacity: 0, y: 20 },
|
|
689
|
+
animate: { opacity: 1, y: 0 },
|
|
690
|
+
transition: { duration: 0.5 }
|
|
691
|
+
};
|
|
692
|
+
var iconAnimation = {
|
|
693
|
+
whileHover: { scale: 1.1 },
|
|
694
|
+
whileTap: { scale: 0.9 }
|
|
695
|
+
};
|
|
696
|
+
var EmptyStateContent = React36.memo(
|
|
697
|
+
({
|
|
698
|
+
message = "Nenhum item encontrado",
|
|
699
|
+
description,
|
|
700
|
+
icon: IconComponent = Inbox,
|
|
701
|
+
actionLabel,
|
|
702
|
+
onAction,
|
|
703
|
+
hideDescription = false,
|
|
704
|
+
size = "default",
|
|
705
|
+
layout = "vertical",
|
|
706
|
+
className
|
|
707
|
+
}) => {
|
|
708
|
+
const handleAction = React36.useCallback(() => {
|
|
709
|
+
if (onAction) {
|
|
710
|
+
onAction();
|
|
711
|
+
}
|
|
712
|
+
}, [onAction]);
|
|
713
|
+
return /* @__PURE__ */ jsxs("div", { className: cn(emptyStateVariants({ layout }), className), children: [
|
|
714
|
+
/* @__PURE__ */ jsx("div", { className: iconWrapperVariants({ size, layout }), children: /* @__PURE__ */ jsx(
|
|
715
|
+
IconComponent,
|
|
716
|
+
{
|
|
717
|
+
className: iconVariants({ size }),
|
|
718
|
+
"aria-hidden": "true"
|
|
719
|
+
}
|
|
720
|
+
) }),
|
|
721
|
+
/* @__PURE__ */ jsxs(
|
|
722
|
+
"div",
|
|
723
|
+
{
|
|
724
|
+
className: cn(
|
|
725
|
+
layout === "horizontal" && "flex flex-col items-start text-left"
|
|
726
|
+
),
|
|
727
|
+
children: [
|
|
728
|
+
/* @__PURE__ */ jsx("h3", { className: titleVariants({ size }), children: message }),
|
|
729
|
+
!hideDescription && /* @__PURE__ */ jsx("p", { className: descriptionVariants({ size, layout }), children: description || defaultDescriptionMessage })
|
|
730
|
+
]
|
|
731
|
+
}
|
|
732
|
+
),
|
|
733
|
+
actionLabel && onAction && /* @__PURE__ */ jsx(Button, { onClick: handleAction, className: "mt-2", children: actionLabel })
|
|
734
|
+
] });
|
|
735
|
+
}
|
|
736
|
+
);
|
|
737
|
+
EmptyStateContent.displayName = "EmptyStateContent";
|
|
738
|
+
var AnimatedEmptyState = React36.memo((props) => {
|
|
739
|
+
const {
|
|
740
|
+
message = "Nenhum item encontrado",
|
|
741
|
+
description,
|
|
742
|
+
icon: IconComponent = Inbox,
|
|
743
|
+
actionLabel,
|
|
744
|
+
onAction,
|
|
745
|
+
hideDescription = false,
|
|
746
|
+
size = "default",
|
|
747
|
+
layout = "vertical",
|
|
748
|
+
className
|
|
749
|
+
} = props;
|
|
750
|
+
const handleAction = React36.useCallback(() => {
|
|
751
|
+
if (onAction) {
|
|
752
|
+
onAction();
|
|
753
|
+
}
|
|
754
|
+
}, [onAction]);
|
|
755
|
+
return /* @__PURE__ */ jsxs(
|
|
756
|
+
motion.div,
|
|
757
|
+
{
|
|
758
|
+
...containerAnimation,
|
|
759
|
+
className: cn(emptyStateVariants({ layout }), className),
|
|
760
|
+
children: [
|
|
761
|
+
/* @__PURE__ */ jsx(
|
|
762
|
+
motion.div,
|
|
763
|
+
{
|
|
764
|
+
...iconAnimation,
|
|
765
|
+
className: iconWrapperVariants({ size, layout }),
|
|
766
|
+
children: /* @__PURE__ */ jsx(
|
|
767
|
+
IconComponent,
|
|
768
|
+
{
|
|
769
|
+
className: iconVariants({ size }),
|
|
770
|
+
"aria-hidden": "true"
|
|
771
|
+
}
|
|
772
|
+
)
|
|
773
|
+
}
|
|
774
|
+
),
|
|
775
|
+
/* @__PURE__ */ jsxs(
|
|
776
|
+
"div",
|
|
777
|
+
{
|
|
778
|
+
className: cn(
|
|
779
|
+
layout === "horizontal" && "flex flex-col items-start text-left"
|
|
780
|
+
),
|
|
781
|
+
children: [
|
|
782
|
+
/* @__PURE__ */ jsx("h3", { className: titleVariants({ size }), children: message }),
|
|
783
|
+
!hideDescription && /* @__PURE__ */ jsx("p", { className: descriptionVariants({ size, layout }), children: description || defaultDescriptionMessage })
|
|
784
|
+
]
|
|
785
|
+
}
|
|
786
|
+
),
|
|
787
|
+
actionLabel && onAction && /* @__PURE__ */ jsx(Button, { onClick: handleAction, className: "mt-2", children: actionLabel })
|
|
788
|
+
]
|
|
789
|
+
}
|
|
790
|
+
);
|
|
791
|
+
});
|
|
792
|
+
AnimatedEmptyState.displayName = "AnimatedEmptyState";
|
|
793
|
+
var EmptyState = React36.memo(
|
|
794
|
+
({ animated = true, ...props }) => {
|
|
795
|
+
if (!animated) {
|
|
796
|
+
return /* @__PURE__ */ jsx(EmptyStateContent, { ...props });
|
|
797
|
+
}
|
|
798
|
+
return /* @__PURE__ */ jsx(AnimatedEmptyState, { ...props });
|
|
799
|
+
}
|
|
800
|
+
);
|
|
801
|
+
EmptyState.displayName = "EmptyState";
|
|
802
|
+
function useDataTableInternal({
|
|
803
|
+
data,
|
|
804
|
+
columns,
|
|
805
|
+
getRowId
|
|
806
|
+
}) {
|
|
807
|
+
const [rowSelection, setRowSelection] = React36.useState({});
|
|
808
|
+
const [columnVisibility, setColumnVisibility] = React36.useState({});
|
|
809
|
+
const [columnFilters, setColumnFilters] = React36.useState([]);
|
|
810
|
+
const [sorting, setSorting] = React36.useState([]);
|
|
811
|
+
const [globalFilter, setGlobalFilter] = React36.useState("");
|
|
812
|
+
const [density, setDensity] = React36.useState("default");
|
|
813
|
+
const [pagination, setPagination] = React36.useState({
|
|
814
|
+
pageIndex: 0,
|
|
815
|
+
pageSize: 10
|
|
816
|
+
});
|
|
817
|
+
const table = useReactTable({
|
|
818
|
+
data,
|
|
819
|
+
columns,
|
|
820
|
+
getRowId,
|
|
821
|
+
state: {
|
|
822
|
+
sorting,
|
|
823
|
+
columnVisibility,
|
|
824
|
+
rowSelection,
|
|
825
|
+
columnFilters,
|
|
826
|
+
pagination,
|
|
827
|
+
globalFilter
|
|
828
|
+
},
|
|
829
|
+
// Features
|
|
830
|
+
enableRowSelection: true,
|
|
831
|
+
enableSorting: true,
|
|
832
|
+
enableFilters: true,
|
|
833
|
+
enableGlobalFilter: true,
|
|
834
|
+
// Handlers
|
|
835
|
+
onRowSelectionChange: setRowSelection,
|
|
836
|
+
onSortingChange: setSorting,
|
|
837
|
+
onColumnFiltersChange: setColumnFilters,
|
|
838
|
+
onColumnVisibilityChange: setColumnVisibility,
|
|
839
|
+
onPaginationChange: setPagination,
|
|
840
|
+
onGlobalFilterChange: setGlobalFilter,
|
|
841
|
+
// Row Models
|
|
842
|
+
getCoreRowModel: getCoreRowModel(),
|
|
843
|
+
getFilteredRowModel: getFilteredRowModel(),
|
|
844
|
+
getPaginationRowModel: getPaginationRowModel(),
|
|
845
|
+
getSortedRowModel: getSortedRowModel()
|
|
846
|
+
});
|
|
847
|
+
const meta = React36.useMemo(
|
|
848
|
+
() => ({
|
|
849
|
+
isLoading: false,
|
|
850
|
+
// Loading é controlado externamente via DataTable.Loading
|
|
851
|
+
isEmpty: data.length === 0,
|
|
852
|
+
selectedRowCount: Object.keys(rowSelection).length,
|
|
853
|
+
totalRows: data.length,
|
|
854
|
+
density
|
|
855
|
+
}),
|
|
856
|
+
[data.length, rowSelection, density]
|
|
857
|
+
);
|
|
858
|
+
return {
|
|
859
|
+
table,
|
|
860
|
+
meta,
|
|
861
|
+
density,
|
|
862
|
+
setDensity
|
|
863
|
+
};
|
|
864
|
+
}
|
|
865
|
+
var DataTableInstanceContext = React36.createContext(null);
|
|
866
|
+
DataTableInstanceContext.displayName = "DataTableInstanceContext";
|
|
867
|
+
var DataTableMetaContext = React36.createContext(null);
|
|
868
|
+
DataTableMetaContext.displayName = "DataTableMetaContext";
|
|
869
|
+
var DataTableDensityContext = React36.createContext(null);
|
|
870
|
+
DataTableDensityContext.displayName = "DataTableDensityContext";
|
|
871
|
+
function DataTableProvider({
|
|
872
|
+
children,
|
|
873
|
+
table,
|
|
874
|
+
meta,
|
|
875
|
+
density,
|
|
876
|
+
setDensity
|
|
877
|
+
}) {
|
|
878
|
+
const metaValue = React36.useMemo(
|
|
879
|
+
() => meta,
|
|
880
|
+
[meta.isLoading, meta.isEmpty, meta.selectedRowCount, meta.totalRows, meta.density]
|
|
881
|
+
);
|
|
882
|
+
const densityValue = React36.useMemo(
|
|
883
|
+
() => ({ density, setDensity }),
|
|
884
|
+
[density, setDensity]
|
|
885
|
+
);
|
|
886
|
+
const tableValue = table;
|
|
887
|
+
return /* @__PURE__ */ jsx(DataTableInstanceContext.Provider, { value: tableValue, children: /* @__PURE__ */ jsx(DataTableMetaContext.Provider, { value: metaValue, children: /* @__PURE__ */ jsx(DataTableDensityContext.Provider, { value: densityValue, children }) }) });
|
|
888
|
+
}
|
|
889
|
+
function useDataTable() {
|
|
890
|
+
const context = React36.useContext(DataTableInstanceContext);
|
|
891
|
+
if (!context) {
|
|
892
|
+
throw new Error(
|
|
893
|
+
"useDataTable must be used within <DataTable>. Make sure your component is wrapped with DataTable."
|
|
894
|
+
);
|
|
895
|
+
}
|
|
896
|
+
return context;
|
|
897
|
+
}
|
|
898
|
+
function useDataTableMeta() {
|
|
899
|
+
const context = React36.useContext(DataTableMetaContext);
|
|
900
|
+
if (!context) {
|
|
901
|
+
throw new Error(
|
|
902
|
+
"useDataTableMeta must be used within <DataTable>. Make sure your component is wrapped with DataTable."
|
|
903
|
+
);
|
|
904
|
+
}
|
|
905
|
+
return context;
|
|
906
|
+
}
|
|
907
|
+
function useDataTableLoading() {
|
|
908
|
+
const meta = useDataTableMeta();
|
|
909
|
+
return meta.isLoading;
|
|
910
|
+
}
|
|
911
|
+
function useDataTableEmpty() {
|
|
912
|
+
const meta = useDataTableMeta();
|
|
913
|
+
return meta.isEmpty;
|
|
914
|
+
}
|
|
915
|
+
function useDataTableSelection() {
|
|
916
|
+
const table = useDataTable();
|
|
917
|
+
return React36.useMemo(() => {
|
|
918
|
+
return table.getSelectedRowModel().rows.map((row) => row.original);
|
|
919
|
+
}, [table.getSelectedRowModel().rows]);
|
|
920
|
+
}
|
|
921
|
+
function useDataTableDensity() {
|
|
922
|
+
const context = React36.useContext(DataTableDensityContext);
|
|
923
|
+
if (!context) {
|
|
924
|
+
throw new Error(
|
|
925
|
+
"useDataTableDensity must be used within <DataTable>. Make sure your component is wrapped with DataTable."
|
|
926
|
+
);
|
|
927
|
+
}
|
|
928
|
+
return context;
|
|
929
|
+
}
|
|
930
|
+
function useDataTablePagination() {
|
|
931
|
+
const table = useDataTable();
|
|
932
|
+
const { pageIndex, pageSize } = table.getState().pagination;
|
|
933
|
+
return React36.useMemo(() => {
|
|
934
|
+
const pageCount = table.getPageCount();
|
|
935
|
+
return {
|
|
936
|
+
pageIndex,
|
|
937
|
+
pageSize,
|
|
938
|
+
pageCount,
|
|
939
|
+
canPreviousPage: pageIndex > 0,
|
|
940
|
+
canNextPage: pageIndex < pageCount - 1,
|
|
941
|
+
setPageIndex: (index) => table.setPageIndex(index),
|
|
942
|
+
setPageSize: (size) => table.setPageSize(size),
|
|
943
|
+
previousPage: () => table.previousPage(),
|
|
944
|
+
nextPage: () => table.nextPage(),
|
|
945
|
+
firstPage: () => table.setPageIndex(0),
|
|
946
|
+
lastPage: () => table.setPageIndex(pageCount - 1)
|
|
947
|
+
};
|
|
948
|
+
}, [table, pageIndex, pageSize]);
|
|
949
|
+
}
|
|
950
|
+
function useDataTableSorting() {
|
|
951
|
+
const table = useDataTable();
|
|
952
|
+
const sorting = table.getState().sorting;
|
|
953
|
+
return React36.useMemo(() => ({
|
|
954
|
+
sorting,
|
|
955
|
+
setSorting: table.setSorting,
|
|
956
|
+
clearSorting: () => table.resetSorting(),
|
|
957
|
+
toggleSort: (columnId) => {
|
|
958
|
+
const column = table.getColumn(columnId);
|
|
959
|
+
column?.toggleSorting();
|
|
960
|
+
}
|
|
961
|
+
}), [table, sorting]);
|
|
962
|
+
}
|
|
963
|
+
function useDataTableColumnVisibility() {
|
|
964
|
+
const table = useDataTable();
|
|
965
|
+
const columnVisibility = table.getState().columnVisibility;
|
|
966
|
+
return React36.useMemo(() => ({
|
|
967
|
+
columnVisibility,
|
|
968
|
+
setColumnVisibility: table.setColumnVisibility,
|
|
969
|
+
toggleColumn: (columnId) => {
|
|
970
|
+
const column = table.getColumn(columnId);
|
|
971
|
+
column?.toggleVisibility();
|
|
972
|
+
},
|
|
973
|
+
getAllColumns: () => table.getAllColumns().filter((col) => col.getCanHide())
|
|
974
|
+
}), [table, columnVisibility]);
|
|
975
|
+
}
|
|
976
|
+
var useDataTableInstance = useDataTable;
|
|
977
|
+
var useDataTableState = useDataTableMeta;
|
|
978
|
+
function DataTableRoot({
|
|
979
|
+
children,
|
|
980
|
+
data,
|
|
981
|
+
columns,
|
|
982
|
+
getRowId,
|
|
983
|
+
className
|
|
984
|
+
}) {
|
|
985
|
+
const { table, meta, density, setDensity } = useDataTableInternal({
|
|
986
|
+
data,
|
|
987
|
+
columns,
|
|
988
|
+
getRowId
|
|
989
|
+
});
|
|
990
|
+
return /* @__PURE__ */ jsx(
|
|
991
|
+
DataTableProvider,
|
|
992
|
+
{
|
|
993
|
+
table,
|
|
994
|
+
meta,
|
|
995
|
+
density,
|
|
996
|
+
setDensity,
|
|
997
|
+
children: /* @__PURE__ */ jsx(
|
|
998
|
+
"div",
|
|
999
|
+
{
|
|
1000
|
+
className: cn("w-full space-y-4", className),
|
|
1001
|
+
"data-density": density,
|
|
1002
|
+
children
|
|
1003
|
+
}
|
|
1004
|
+
)
|
|
1005
|
+
}
|
|
1006
|
+
);
|
|
1007
|
+
}
|
|
1008
|
+
DataTableRoot.displayName = "DataTable";
|
|
1009
|
+
|
|
1010
|
+
// src/components/Table/types.ts
|
|
1011
|
+
var DENSITY_CONFIG = {
|
|
1012
|
+
compact: {
|
|
1013
|
+
rowHeight: 32,
|
|
1014
|
+
fontSize: "text-xs",
|
|
1015
|
+
padding: "py-1 px-2"
|
|
1016
|
+
},
|
|
1017
|
+
default: {
|
|
1018
|
+
rowHeight: 40,
|
|
1019
|
+
fontSize: "text-sm",
|
|
1020
|
+
padding: "py-2 px-4"
|
|
1021
|
+
},
|
|
1022
|
+
comfortable: {
|
|
1023
|
+
rowHeight: 52,
|
|
1024
|
+
fontSize: "text-sm",
|
|
1025
|
+
padding: "py-3 px-4"
|
|
1026
|
+
}
|
|
1027
|
+
};
|
|
1028
|
+
var Table = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
|
|
1029
|
+
"table",
|
|
1030
|
+
{
|
|
1031
|
+
ref,
|
|
1032
|
+
className: cn("w-full caption-bottom text-sm", className),
|
|
1033
|
+
...props
|
|
1034
|
+
}
|
|
1035
|
+
) }));
|
|
1036
|
+
Table.displayName = "Table";
|
|
1037
|
+
var TableHeader = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
|
|
1038
|
+
TableHeader.displayName = "TableHeader";
|
|
1039
|
+
var TableBody = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
1040
|
+
"tbody",
|
|
1041
|
+
{
|
|
1042
|
+
ref,
|
|
1043
|
+
className: cn("[&_tr:last-child]:border-0", className),
|
|
1044
|
+
...props
|
|
1045
|
+
}
|
|
1046
|
+
));
|
|
1047
|
+
TableBody.displayName = "TableBody";
|
|
1048
|
+
var TableFooter = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
1049
|
+
"tfoot",
|
|
1050
|
+
{
|
|
1051
|
+
ref,
|
|
1052
|
+
className: cn(
|
|
1053
|
+
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
|
|
1054
|
+
className
|
|
1055
|
+
),
|
|
1056
|
+
...props
|
|
1057
|
+
}
|
|
1058
|
+
));
|
|
1059
|
+
TableFooter.displayName = "TableFooter";
|
|
1060
|
+
var TableRow = React36.memo(
|
|
1061
|
+
React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
1062
|
+
"tr",
|
|
1063
|
+
{
|
|
1064
|
+
ref,
|
|
1065
|
+
className: cn(
|
|
1066
|
+
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
|
1067
|
+
className
|
|
1068
|
+
),
|
|
1069
|
+
...props
|
|
1070
|
+
}
|
|
1071
|
+
))
|
|
1072
|
+
);
|
|
1073
|
+
TableRow.displayName = "TableRow";
|
|
1074
|
+
var TableHead = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
1075
|
+
"th",
|
|
1076
|
+
{
|
|
1077
|
+
ref,
|
|
1078
|
+
className: cn(
|
|
1079
|
+
"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
|
|
1080
|
+
className
|
|
1081
|
+
),
|
|
1082
|
+
...props
|
|
1083
|
+
}
|
|
1084
|
+
));
|
|
1085
|
+
TableHead.displayName = "TableHead";
|
|
1086
|
+
var TableCell = React36.memo(
|
|
1087
|
+
React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
1088
|
+
"td",
|
|
1089
|
+
{
|
|
1090
|
+
ref,
|
|
1091
|
+
className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
|
|
1092
|
+
...props
|
|
1093
|
+
}
|
|
1094
|
+
))
|
|
1095
|
+
);
|
|
1096
|
+
TableCell.displayName = "TableCell";
|
|
1097
|
+
var TableCaption = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
1098
|
+
"caption",
|
|
1099
|
+
{
|
|
1100
|
+
ref,
|
|
1101
|
+
className: cn("mt-4 text-sm text-muted-foreground", className),
|
|
1102
|
+
...props
|
|
1103
|
+
}
|
|
1104
|
+
));
|
|
1105
|
+
TableCaption.displayName = "TableCaption";
|
|
1106
|
+
var DataTableContent = React36.memo(function DataTableContent2({
|
|
1107
|
+
stickyHeader = false,
|
|
1108
|
+
stripedRows = false,
|
|
1109
|
+
highlightOnHover = true,
|
|
1110
|
+
className
|
|
1111
|
+
}) {
|
|
1112
|
+
const table = useDataTable();
|
|
1113
|
+
const { isEmpty } = useDataTableMeta();
|
|
1114
|
+
const { density } = useDataTableDensity();
|
|
1115
|
+
const densityStyles = DENSITY_CONFIG[density];
|
|
1116
|
+
const cellClasses = cn(densityStyles.padding, densityStyles.fontSize);
|
|
1117
|
+
return /* @__PURE__ */ jsx("div", { className: cn("rounded-md border overflow-auto", className), children: /* @__PURE__ */ jsxs(Table, { children: [
|
|
1118
|
+
/* @__PURE__ */ jsx(TableHeader, { className: cn(stickyHeader && "sticky top-0 z-10 bg-background"), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
|
|
1119
|
+
TableHead,
|
|
1120
|
+
{
|
|
1121
|
+
className: cn(cellClasses, "font-medium"),
|
|
1122
|
+
style: { width: header.getSize() !== 150 ? header.getSize() : void 0 },
|
|
1123
|
+
children: header.isPlaceholder ? null : flexRender(
|
|
1124
|
+
header.column.columnDef.header,
|
|
1125
|
+
header.getContext()
|
|
1126
|
+
)
|
|
1127
|
+
},
|
|
1128
|
+
header.id
|
|
1129
|
+
)) }, headerGroup.id)) }),
|
|
1130
|
+
/* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row, index) => /* @__PURE__ */ jsx(
|
|
1131
|
+
TableRow,
|
|
1132
|
+
{
|
|
1133
|
+
"data-state": row.getIsSelected() && "selected",
|
|
1134
|
+
className: cn(
|
|
1135
|
+
highlightOnHover && "hover:bg-muted/50",
|
|
1136
|
+
stripedRows && index % 2 === 1 && "bg-muted/30"
|
|
1137
|
+
),
|
|
1138
|
+
children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { className: cellClasses, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
|
|
1139
|
+
},
|
|
1140
|
+
row.id
|
|
1141
|
+
)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
|
|
1142
|
+
TableCell,
|
|
1143
|
+
{
|
|
1144
|
+
colSpan: table.getAllColumns().length,
|
|
1145
|
+
className: "h-24 text-center text-muted-foreground",
|
|
1146
|
+
children: isEmpty ? "Nenhum resultado encontrado." : "Carregando..."
|
|
1147
|
+
}
|
|
1148
|
+
) }) })
|
|
1149
|
+
] }) });
|
|
1150
|
+
});
|
|
1151
|
+
DataTableContent.displayName = "DataTable.Content";
|
|
1152
|
+
var DataTableToolbar = React36.memo(function DataTableToolbar2({
|
|
1153
|
+
className,
|
|
1154
|
+
children
|
|
1155
|
+
}) {
|
|
1156
|
+
return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-between gap-2", className), children });
|
|
1157
|
+
});
|
|
1158
|
+
function useDebounce(value, delay = 300) {
|
|
1159
|
+
const [debouncedValue, setDebouncedValue] = React36.useState(value);
|
|
1160
|
+
React36.useEffect(() => {
|
|
1161
|
+
const handler = setTimeout(() => {
|
|
1162
|
+
setDebouncedValue(value);
|
|
1163
|
+
}, delay);
|
|
1164
|
+
return () => {
|
|
1165
|
+
clearTimeout(handler);
|
|
1166
|
+
};
|
|
1167
|
+
}, [value, delay]);
|
|
1168
|
+
return debouncedValue;
|
|
1169
|
+
}
|
|
1170
|
+
function useDebouncedCallback(callback, delay = 300) {
|
|
1171
|
+
const callbackRef = React36.useRef(callback);
|
|
1172
|
+
const timeoutRef = React36.useRef();
|
|
1173
|
+
React36.useEffect(() => {
|
|
1174
|
+
callbackRef.current = callback;
|
|
1175
|
+
}, [callback]);
|
|
1176
|
+
return React36.useCallback(
|
|
1177
|
+
(...args) => {
|
|
1178
|
+
if (timeoutRef.current) {
|
|
1179
|
+
clearTimeout(timeoutRef.current);
|
|
1180
|
+
}
|
|
1181
|
+
timeoutRef.current = setTimeout(() => {
|
|
1182
|
+
callbackRef.current(...args);
|
|
1183
|
+
}, delay);
|
|
1184
|
+
},
|
|
1185
|
+
[delay]
|
|
1186
|
+
);
|
|
1187
|
+
}
|
|
1188
|
+
var DataTableSearch = React36.memo(function DataTableSearch2({
|
|
1189
|
+
column,
|
|
1190
|
+
placeholder = "Buscar...",
|
|
1191
|
+
debounce = 300,
|
|
1192
|
+
onSearch,
|
|
1193
|
+
className
|
|
1194
|
+
}) {
|
|
1195
|
+
const table = useDataTableInstance();
|
|
1196
|
+
const columnInstance = table.getColumn(column);
|
|
1197
|
+
const [value, setValue] = React36.useState(
|
|
1198
|
+
columnInstance?.getFilterValue() ?? ""
|
|
1199
|
+
);
|
|
1200
|
+
const debouncedValue = useDebounce(value, debounce);
|
|
1201
|
+
React36.useEffect(() => {
|
|
1202
|
+
columnInstance?.setFilterValue(debouncedValue);
|
|
1203
|
+
if (onSearch) {
|
|
1204
|
+
onSearch(debouncedValue);
|
|
1205
|
+
}
|
|
1206
|
+
}, [debouncedValue, columnInstance, onSearch]);
|
|
1207
|
+
React36.useEffect(() => {
|
|
1208
|
+
const filterValue = columnInstance?.getFilterValue() ?? "";
|
|
1209
|
+
if (filterValue !== value) {
|
|
1210
|
+
setValue(filterValue);
|
|
1211
|
+
}
|
|
1212
|
+
}, [columnInstance?.getFilterValue()]);
|
|
1213
|
+
return /* @__PURE__ */ jsx(
|
|
1214
|
+
Input,
|
|
1215
|
+
{
|
|
1216
|
+
placeholder,
|
|
1217
|
+
value,
|
|
1218
|
+
onChange: (e) => setValue(e.target.value),
|
|
1219
|
+
className: cn("h-9 w-[150px] lg:w-[250px]", className)
|
|
1220
|
+
}
|
|
1221
|
+
);
|
|
1222
|
+
});
|
|
1223
|
+
var DataTableFilters = React36.memo(function DataTableFilters2({
|
|
1224
|
+
onChange,
|
|
1225
|
+
className,
|
|
1226
|
+
children
|
|
1227
|
+
}) {
|
|
1228
|
+
const table = useDataTableInstance();
|
|
1229
|
+
const filters = table.getState().columnFilters;
|
|
1230
|
+
const filtersRef = React36.useRef(filters);
|
|
1231
|
+
React36.useEffect(() => {
|
|
1232
|
+
if (onChange && JSON.stringify(filters) !== JSON.stringify(filtersRef.current)) {
|
|
1233
|
+
filtersRef.current = filters;
|
|
1234
|
+
onChange(filters);
|
|
1235
|
+
}
|
|
1236
|
+
}, [filters, onChange]);
|
|
1237
|
+
return /* @__PURE__ */ jsx("div", { className: cn("flex gap-2", className), children });
|
|
1238
|
+
});
|
|
1239
|
+
var DataTableFilter = React36.memo(function DataTableFilter2({
|
|
1240
|
+
column: columnId,
|
|
1241
|
+
title,
|
|
1242
|
+
options,
|
|
1243
|
+
className
|
|
1244
|
+
}) {
|
|
1245
|
+
const table = useDataTableInstance();
|
|
1246
|
+
const column = table.getColumn(columnId);
|
|
1247
|
+
const filterValue = column?.getFilterValue() ?? [];
|
|
1248
|
+
const currentValue = filterValue.length > 0 ? filterValue[0] : "all";
|
|
1249
|
+
const handleValueChange = React36.useCallback(
|
|
1250
|
+
(value) => {
|
|
1251
|
+
if (value === "all") {
|
|
1252
|
+
column?.setFilterValue(void 0);
|
|
1253
|
+
} else {
|
|
1254
|
+
column?.setFilterValue([value]);
|
|
1255
|
+
}
|
|
1256
|
+
},
|
|
1257
|
+
[column]
|
|
1258
|
+
);
|
|
1259
|
+
return /* @__PURE__ */ jsxs(
|
|
1260
|
+
Select,
|
|
1261
|
+
{
|
|
1262
|
+
value: currentValue,
|
|
1263
|
+
onValueChange: handleValueChange,
|
|
1264
|
+
selectSize: "sm",
|
|
1265
|
+
placeholder: title,
|
|
1266
|
+
className,
|
|
1267
|
+
children: [
|
|
1268
|
+
/* @__PURE__ */ jsx(SelectItem, { value: "all", children: "Todos" }),
|
|
1269
|
+
options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value))
|
|
1270
|
+
]
|
|
1271
|
+
}
|
|
1272
|
+
);
|
|
1273
|
+
});
|
|
1274
|
+
var DataTablePagination = React36.memo(function DataTablePagination2({
|
|
1275
|
+
mode = "client",
|
|
1276
|
+
pageCount: externalPageCount,
|
|
1277
|
+
pageSizes = [10, 20, 30, 50],
|
|
1278
|
+
showPageSize = true,
|
|
1279
|
+
showPageInfo = true,
|
|
1280
|
+
showFirstLast = true,
|
|
1281
|
+
className
|
|
1282
|
+
}) {
|
|
1283
|
+
useDataTable();
|
|
1284
|
+
const { selectedRowCount, totalRows } = useDataTableMeta();
|
|
1285
|
+
const {
|
|
1286
|
+
pageIndex,
|
|
1287
|
+
pageSize,
|
|
1288
|
+
pageCount: internalPageCount,
|
|
1289
|
+
canPreviousPage,
|
|
1290
|
+
canNextPage,
|
|
1291
|
+
setPageIndex,
|
|
1292
|
+
setPageSize,
|
|
1293
|
+
previousPage,
|
|
1294
|
+
nextPage,
|
|
1295
|
+
firstPage,
|
|
1296
|
+
lastPage
|
|
1297
|
+
} = useDataTablePagination();
|
|
1298
|
+
const pageCount = mode === "server" && externalPageCount !== void 0 ? externalPageCount : internalPageCount;
|
|
1299
|
+
const canGoPrevious = pageIndex > 0;
|
|
1300
|
+
const canGoNext = pageIndex < pageCount - 1;
|
|
1301
|
+
const handlePageSizeChange = React36.useCallback(
|
|
1302
|
+
(value) => {
|
|
1303
|
+
setPageSize(Number(value));
|
|
1304
|
+
},
|
|
1305
|
+
[setPageSize]
|
|
1306
|
+
);
|
|
1307
|
+
return /* @__PURE__ */ jsxs(
|
|
1308
|
+
"div",
|
|
1309
|
+
{
|
|
1310
|
+
className: cn(
|
|
1311
|
+
"flex flex-col-reverse items-center justify-between gap-4 sm:flex-row",
|
|
1312
|
+
className
|
|
1313
|
+
),
|
|
1314
|
+
children: [
|
|
1315
|
+
showPageInfo && /* @__PURE__ */ jsx("div", { className: "flex-1 text-sm text-muted-foreground", children: selectedRowCount > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1316
|
+
selectedRowCount,
|
|
1317
|
+
" de ",
|
|
1318
|
+
totalRows,
|
|
1319
|
+
" linha(s) selecionada(s)"
|
|
1320
|
+
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1321
|
+
"P\xE1gina ",
|
|
1322
|
+
pageIndex + 1,
|
|
1323
|
+
" de ",
|
|
1324
|
+
pageCount
|
|
1325
|
+
] }) }),
|
|
1326
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
|
|
1327
|
+
showPageSize && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
1328
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm font-medium whitespace-nowrap", children: "Linhas por p\xE1gina" }),
|
|
1329
|
+
/* @__PURE__ */ jsx(
|
|
1330
|
+
Select,
|
|
1331
|
+
{
|
|
1332
|
+
value: `${pageSize}`,
|
|
1333
|
+
onValueChange: handlePageSizeChange,
|
|
1334
|
+
selectSize: "sm",
|
|
1335
|
+
children: pageSizes.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: `${size}`, children: size }, size))
|
|
1336
|
+
}
|
|
1337
|
+
)
|
|
1338
|
+
] }),
|
|
1339
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
|
|
1340
|
+
showFirstLast && /* @__PURE__ */ jsx(
|
|
1341
|
+
Button,
|
|
1342
|
+
{
|
|
1343
|
+
variant: "outline",
|
|
1344
|
+
size: "icon-sm",
|
|
1345
|
+
className: "hidden h-8 w-8 p-0 lg:flex",
|
|
1346
|
+
onClick: firstPage,
|
|
1347
|
+
disabled: !canGoPrevious,
|
|
1348
|
+
"aria-label": "Primeira p\xE1gina",
|
|
1349
|
+
children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" })
|
|
1350
|
+
}
|
|
1351
|
+
),
|
|
1352
|
+
/* @__PURE__ */ jsx(
|
|
1353
|
+
Button,
|
|
1354
|
+
{
|
|
1355
|
+
variant: "outline",
|
|
1356
|
+
size: "icon-sm",
|
|
1357
|
+
className: "h-8 w-8 p-0",
|
|
1358
|
+
onClick: previousPage,
|
|
1359
|
+
disabled: !canGoPrevious,
|
|
1360
|
+
"aria-label": "P\xE1gina anterior",
|
|
1361
|
+
children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
|
|
1362
|
+
}
|
|
1363
|
+
),
|
|
1364
|
+
/* @__PURE__ */ jsxs("span", { className: "flex h-8 min-w-[4rem] items-center justify-center text-sm font-medium", children: [
|
|
1365
|
+
pageIndex + 1,
|
|
1366
|
+
" / ",
|
|
1367
|
+
pageCount
|
|
1368
|
+
] }),
|
|
1369
|
+
/* @__PURE__ */ jsx(
|
|
1370
|
+
Button,
|
|
1371
|
+
{
|
|
1372
|
+
variant: "outline",
|
|
1373
|
+
size: "icon-sm",
|
|
1374
|
+
className: "h-8 w-8 p-0",
|
|
1375
|
+
onClick: nextPage,
|
|
1376
|
+
disabled: !canGoNext,
|
|
1377
|
+
"aria-label": "Pr\xF3xima p\xE1gina",
|
|
1378
|
+
children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
|
|
1379
|
+
}
|
|
1380
|
+
),
|
|
1381
|
+
showFirstLast && /* @__PURE__ */ jsx(
|
|
1382
|
+
Button,
|
|
1383
|
+
{
|
|
1384
|
+
variant: "outline",
|
|
1385
|
+
size: "icon-sm",
|
|
1386
|
+
className: "hidden h-8 w-8 p-0 lg:flex",
|
|
1387
|
+
onClick: lastPage,
|
|
1388
|
+
disabled: !canGoNext,
|
|
1389
|
+
"aria-label": "\xDAltima p\xE1gina",
|
|
1390
|
+
children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" })
|
|
1391
|
+
}
|
|
1392
|
+
)
|
|
1393
|
+
] })
|
|
1394
|
+
] })
|
|
1395
|
+
]
|
|
1396
|
+
}
|
|
1397
|
+
);
|
|
1398
|
+
});
|
|
1399
|
+
DataTablePagination.displayName = "DataTable.Pagination";
|
|
1400
|
+
var DataTableEmptyState = React36.memo(function DataTableEmptyState2({
|
|
1401
|
+
message = "Nenhum resultado encontrado.",
|
|
1402
|
+
description,
|
|
1403
|
+
icon,
|
|
1404
|
+
action,
|
|
1405
|
+
className
|
|
1406
|
+
}) {
|
|
1407
|
+
const defaultIcon = /* @__PURE__ */ jsx(
|
|
1408
|
+
"svg",
|
|
1409
|
+
{
|
|
1410
|
+
className: "h-10 w-10 text-muted-foreground",
|
|
1411
|
+
fill: "none",
|
|
1412
|
+
viewBox: "0 0 24 24",
|
|
1413
|
+
stroke: "currentColor",
|
|
1414
|
+
children: /* @__PURE__ */ jsx(
|
|
1415
|
+
"path",
|
|
1416
|
+
{
|
|
1417
|
+
strokeLinecap: "round",
|
|
1418
|
+
strokeLinejoin: "round",
|
|
1419
|
+
strokeWidth: 1.5,
|
|
1420
|
+
d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
|
1421
|
+
}
|
|
1422
|
+
)
|
|
1423
|
+
}
|
|
1424
|
+
);
|
|
1425
|
+
return /* @__PURE__ */ jsx(
|
|
1426
|
+
"div",
|
|
1427
|
+
{
|
|
1428
|
+
className: cn(
|
|
1429
|
+
"flex min-h-[400px] flex-col items-center justify-center rounded-md border border-dashed p-8 text-center",
|
|
1430
|
+
className
|
|
1431
|
+
),
|
|
1432
|
+
children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-[420px] flex-col items-center justify-center text-center", children: [
|
|
1433
|
+
icon ?? defaultIcon,
|
|
1434
|
+
/* @__PURE__ */ jsx("h3", { className: "mt-4 text-lg font-semibold", children: message }),
|
|
1435
|
+
description && /* @__PURE__ */ jsx("p", { className: "mb-4 mt-2 text-sm text-muted-foreground", children: description }),
|
|
1436
|
+
action && /* @__PURE__ */ jsx("div", { className: "mt-4", children: action })
|
|
1437
|
+
] })
|
|
1438
|
+
}
|
|
1439
|
+
);
|
|
1440
|
+
});
|
|
1441
|
+
function SkeletonRow({ columns }) {
|
|
1442
|
+
return /* @__PURE__ */ jsx(TableRow, { className: "animate-pulse", children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsx(TableCell, { className: "py-4", children: /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded w-3/4" }) }, index)) });
|
|
1443
|
+
}
|
|
1444
|
+
function DataTableLoading({
|
|
1445
|
+
visible,
|
|
1446
|
+
skeleton,
|
|
1447
|
+
skeletonRows = 5,
|
|
1448
|
+
className
|
|
1449
|
+
}) {
|
|
1450
|
+
const table = useDataTable();
|
|
1451
|
+
const columnCount = table.getVisibleLeafColumns().length;
|
|
1452
|
+
if (!visible) {
|
|
1453
|
+
return null;
|
|
1454
|
+
}
|
|
1455
|
+
if (skeleton) {
|
|
1456
|
+
return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children: skeleton });
|
|
1457
|
+
}
|
|
1458
|
+
return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsx("table", { className: "w-full", children: /* @__PURE__ */ jsx("tbody", { children: Array.from({ length: skeletonRows }).map((_, index) => /* @__PURE__ */ jsx(SkeletonRow, { columns: columnCount || 4 }, index)) }) }) }) });
|
|
1459
|
+
}
|
|
1460
|
+
DataTableLoading.displayName = "DataTable.Loading";
|
|
1461
|
+
function DataTableColumnHeader({
|
|
1462
|
+
column,
|
|
1463
|
+
title,
|
|
1464
|
+
className
|
|
1465
|
+
}) {
|
|
1466
|
+
if (!column.getCanSort()) {
|
|
1467
|
+
return /* @__PURE__ */ jsx("div", { className: cn(className), children: title });
|
|
1468
|
+
}
|
|
1469
|
+
const handleSort = () => {
|
|
1470
|
+
const currentSort = column.getIsSorted();
|
|
1471
|
+
if (currentSort === "asc") {
|
|
1472
|
+
column.toggleSorting(true);
|
|
1473
|
+
} else if (currentSort === "desc") {
|
|
1474
|
+
column.clearSorting();
|
|
1475
|
+
} else {
|
|
1476
|
+
column.toggleSorting(false);
|
|
1477
|
+
}
|
|
1478
|
+
};
|
|
1479
|
+
return /* @__PURE__ */ jsx("div", { className: cn("flex items-center space-x-2", className), children: /* @__PURE__ */ jsxs(
|
|
1480
|
+
Button,
|
|
1481
|
+
{
|
|
1482
|
+
variant: "ghost",
|
|
1483
|
+
size: "sm",
|
|
1484
|
+
className: "-ml-3 h-8 data-[state=open]:bg-accent",
|
|
1485
|
+
onClick: handleSort,
|
|
1486
|
+
children: [
|
|
1487
|
+
/* @__PURE__ */ jsx("span", { children: title }),
|
|
1488
|
+
column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "ml-2 h-4 w-4" }) : column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "ml-2 h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4" })
|
|
1489
|
+
]
|
|
1490
|
+
}
|
|
1491
|
+
) });
|
|
1492
|
+
}
|
|
1493
|
+
var checkboxVariants = cva(
|
|
1494
|
+
[
|
|
1495
|
+
"peer shrink-0 rounded-sm border-2 ring-offset-background",
|
|
1496
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
1497
|
+
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
1498
|
+
"transition-all duration-200"
|
|
1499
|
+
],
|
|
1500
|
+
{
|
|
1501
|
+
variants: {
|
|
1502
|
+
variant: {
|
|
1503
|
+
default: "border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
|
|
1504
|
+
secondary: "border-secondary data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-foreground",
|
|
1505
|
+
outline: "border-border data-[state=checked]:bg-background data-[state=checked]:text-primary data-[state=checked]:border-primary"
|
|
1506
|
+
},
|
|
1507
|
+
size: {
|
|
1508
|
+
sm: "h-4 w-4",
|
|
1509
|
+
md: "h-5 w-5",
|
|
1510
|
+
lg: "h-6 w-6"
|
|
1511
|
+
}
|
|
1512
|
+
},
|
|
1513
|
+
defaultVariants: {
|
|
1514
|
+
variant: "default",
|
|
1515
|
+
size: "md"
|
|
1516
|
+
}
|
|
1517
|
+
}
|
|
1518
|
+
);
|
|
1519
|
+
var iconSizeMap = {
|
|
1520
|
+
sm: "h-3 w-3",
|
|
1521
|
+
md: "h-4 w-4",
|
|
1522
|
+
lg: "h-5 w-5"
|
|
1523
|
+
};
|
|
1524
|
+
var Checkbox = React36.memo(
|
|
1525
|
+
React36.forwardRef(({ className, variant, size = "md", ...props }, ref) => {
|
|
1526
|
+
const iconSize = iconSizeMap[size || "md"];
|
|
1527
|
+
return /* @__PURE__ */ jsx(
|
|
1528
|
+
CheckboxPrimitive.Root,
|
|
1529
|
+
{
|
|
1530
|
+
ref,
|
|
1531
|
+
className: cn(checkboxVariants({ variant, size, className })),
|
|
1532
|
+
...props,
|
|
1533
|
+
children: /* @__PURE__ */ jsx(
|
|
1534
|
+
CheckboxPrimitive.Indicator,
|
|
1535
|
+
{
|
|
1536
|
+
className: cn("flex items-center justify-center text-current"),
|
|
1537
|
+
children: /* @__PURE__ */ jsx(Check, { className: iconSize })
|
|
1538
|
+
}
|
|
1539
|
+
)
|
|
1540
|
+
}
|
|
1541
|
+
);
|
|
1542
|
+
})
|
|
1543
|
+
);
|
|
1544
|
+
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
|
|
1545
|
+
function DataTableColumnVisibility({
|
|
1546
|
+
className
|
|
1547
|
+
}) {
|
|
1548
|
+
const table = useDataTable();
|
|
1549
|
+
const [open, setOpen] = React36.useState(false);
|
|
1550
|
+
const dropdownRef = React36.useRef(null);
|
|
1551
|
+
React36.useEffect(() => {
|
|
1552
|
+
function handleClickOutside(event) {
|
|
1553
|
+
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
|
1554
|
+
setOpen(false);
|
|
1555
|
+
}
|
|
1556
|
+
}
|
|
1557
|
+
if (open) {
|
|
1558
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
1559
|
+
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
1560
|
+
}
|
|
1561
|
+
}, [open]);
|
|
1562
|
+
const columns = table.getAllColumns().filter((column) => column.getCanHide());
|
|
1563
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), ref: dropdownRef, children: [
|
|
1564
|
+
/* @__PURE__ */ jsxs(
|
|
1565
|
+
Button,
|
|
1566
|
+
{
|
|
1567
|
+
variant: "outline",
|
|
1568
|
+
size: "sm",
|
|
1569
|
+
className: "h-8",
|
|
1570
|
+
onClick: () => setOpen(!open),
|
|
1571
|
+
"aria-expanded": open,
|
|
1572
|
+
"aria-haspopup": "true",
|
|
1573
|
+
children: [
|
|
1574
|
+
/* @__PURE__ */ jsx(SlidersHorizontal, { className: "mr-2 h-4 w-4" }),
|
|
1575
|
+
"Colunas"
|
|
1576
|
+
]
|
|
1577
|
+
}
|
|
1578
|
+
),
|
|
1579
|
+
open && /* @__PURE__ */ jsxs(
|
|
1580
|
+
"div",
|
|
1581
|
+
{
|
|
1582
|
+
className: cn(
|
|
1583
|
+
"absolute right-0 top-full z-50 mt-1 w-48",
|
|
1584
|
+
"rounded-md border bg-popover p-2 shadow-md",
|
|
1585
|
+
"animate-in fade-in-0 zoom-in-95"
|
|
1586
|
+
),
|
|
1587
|
+
children: [
|
|
1588
|
+
/* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-sm font-semibold", children: "Alternar colunas" }),
|
|
1589
|
+
/* @__PURE__ */ jsx("div", { className: "h-px bg-border my-1" }),
|
|
1590
|
+
/* @__PURE__ */ jsx("div", { className: "max-h-60 overflow-auto", children: columns.map((column) => {
|
|
1591
|
+
const header = column.columnDef.header;
|
|
1592
|
+
const title = typeof header === "string" ? header : column.id;
|
|
1593
|
+
return /* @__PURE__ */ jsxs(
|
|
1594
|
+
"label",
|
|
1595
|
+
{
|
|
1596
|
+
className: cn(
|
|
1597
|
+
"flex items-center gap-2 px-2 py-1.5 rounded-sm cursor-pointer",
|
|
1598
|
+
"hover:bg-accent hover:text-accent-foreground",
|
|
1599
|
+
"text-sm"
|
|
1600
|
+
),
|
|
1601
|
+
children: [
|
|
1602
|
+
/* @__PURE__ */ jsx(
|
|
1603
|
+
Checkbox,
|
|
1604
|
+
{
|
|
1605
|
+
checked: column.getIsVisible(),
|
|
1606
|
+
onCheckedChange: (value) => column.toggleVisibility(!!value)
|
|
1607
|
+
}
|
|
1608
|
+
),
|
|
1609
|
+
/* @__PURE__ */ jsx("span", { className: "capitalize", children: title })
|
|
1610
|
+
]
|
|
1611
|
+
},
|
|
1612
|
+
column.id
|
|
1613
|
+
);
|
|
1614
|
+
}) })
|
|
1615
|
+
]
|
|
1616
|
+
}
|
|
1617
|
+
)
|
|
1618
|
+
] });
|
|
1619
|
+
}
|
|
1620
|
+
DataTableColumnVisibility.displayName = "DataTable.ColumnVisibility";
|
|
1621
|
+
var densityOptions = [
|
|
1622
|
+
{ value: "compact", label: "Compacto", icon: Rows4 },
|
|
1623
|
+
{ value: "default", label: "Padr\xE3o", icon: Rows3 },
|
|
1624
|
+
{ value: "comfortable", label: "Confort\xE1vel", icon: LayoutList }
|
|
1625
|
+
];
|
|
1626
|
+
function DataTableDensityToggle({
|
|
1627
|
+
className
|
|
1628
|
+
}) {
|
|
1629
|
+
const { density, setDensity } = useDataTableDensity();
|
|
1630
|
+
const [open, setOpen] = React36.useState(false);
|
|
1631
|
+
const dropdownRef = React36.useRef(null);
|
|
1632
|
+
React36.useEffect(() => {
|
|
1633
|
+
function handleClickOutside(event) {
|
|
1634
|
+
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
|
1635
|
+
setOpen(false);
|
|
1636
|
+
}
|
|
1637
|
+
}
|
|
1638
|
+
if (open) {
|
|
1639
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
1640
|
+
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
1641
|
+
}
|
|
1642
|
+
}, [open]);
|
|
1643
|
+
const currentOption = densityOptions.find((opt) => opt.value === density) ?? densityOptions[1];
|
|
1644
|
+
const Icon2 = currentOption.icon;
|
|
1645
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), ref: dropdownRef, children: [
|
|
1646
|
+
/* @__PURE__ */ jsxs(
|
|
1647
|
+
Button,
|
|
1648
|
+
{
|
|
1649
|
+
variant: "outline",
|
|
1650
|
+
size: "sm",
|
|
1651
|
+
className: "h-8",
|
|
1652
|
+
onClick: () => setOpen(!open),
|
|
1653
|
+
"aria-expanded": open,
|
|
1654
|
+
"aria-haspopup": "true",
|
|
1655
|
+
children: [
|
|
1656
|
+
/* @__PURE__ */ jsx(Icon2, { className: "mr-2 h-4 w-4" }),
|
|
1657
|
+
"Densidade"
|
|
1658
|
+
]
|
|
1659
|
+
}
|
|
1660
|
+
),
|
|
1661
|
+
open && /* @__PURE__ */ jsx(
|
|
1662
|
+
"div",
|
|
1663
|
+
{
|
|
1664
|
+
className: cn(
|
|
1665
|
+
"absolute right-0 top-full z-50 mt-1 w-40",
|
|
1666
|
+
"rounded-md border bg-popover p-1 shadow-md",
|
|
1667
|
+
"animate-in fade-in-0 zoom-in-95"
|
|
1668
|
+
),
|
|
1669
|
+
children: densityOptions.map((option) => {
|
|
1670
|
+
const OptionIcon = option.icon;
|
|
1671
|
+
const isSelected = density === option.value;
|
|
1672
|
+
return /* @__PURE__ */ jsxs(
|
|
1673
|
+
"button",
|
|
1674
|
+
{
|
|
1675
|
+
className: cn(
|
|
1676
|
+
"flex w-full items-center gap-2 px-2 py-1.5 rounded-sm cursor-pointer",
|
|
1677
|
+
"hover:bg-accent hover:text-accent-foreground",
|
|
1678
|
+
"text-sm text-left",
|
|
1679
|
+
isSelected && "bg-accent"
|
|
1680
|
+
),
|
|
1681
|
+
onClick: () => {
|
|
1682
|
+
setDensity(option.value);
|
|
1683
|
+
setOpen(false);
|
|
1684
|
+
},
|
|
1685
|
+
children: [
|
|
1686
|
+
/* @__PURE__ */ jsx(OptionIcon, { className: "h-4 w-4" }),
|
|
1687
|
+
/* @__PURE__ */ jsx("span", { children: option.label }),
|
|
1688
|
+
isSelected && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: "\u2713" })
|
|
1689
|
+
]
|
|
1690
|
+
},
|
|
1691
|
+
option.value
|
|
1692
|
+
);
|
|
1693
|
+
})
|
|
1694
|
+
}
|
|
1695
|
+
)
|
|
1696
|
+
] });
|
|
1697
|
+
}
|
|
1698
|
+
DataTableDensityToggle.displayName = "DataTable.DensityToggle";
|
|
1699
|
+
function DataTableBulkActions({
|
|
1700
|
+
children,
|
|
1701
|
+
className
|
|
1702
|
+
}) {
|
|
1703
|
+
const table = useDataTable();
|
|
1704
|
+
const { selectedRowCount } = useDataTableMeta();
|
|
1705
|
+
const selectedRows = useDataTableSelection();
|
|
1706
|
+
if (selectedRowCount === 0) {
|
|
1707
|
+
return null;
|
|
1708
|
+
}
|
|
1709
|
+
const handleClearSelection = () => {
|
|
1710
|
+
table.toggleAllRowsSelected(false);
|
|
1711
|
+
};
|
|
1712
|
+
return /* @__PURE__ */ jsxs(
|
|
1713
|
+
"div",
|
|
1714
|
+
{
|
|
1715
|
+
className: cn(
|
|
1716
|
+
"flex items-center gap-3 rounded-lg border bg-muted/50 p-3",
|
|
1717
|
+
"animate-in fade-in-0 slide-in-from-top-2",
|
|
1718
|
+
className
|
|
1719
|
+
),
|
|
1720
|
+
children: [
|
|
1721
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
1722
|
+
/* @__PURE__ */ jsxs("span", { className: "text-sm font-medium", children: [
|
|
1723
|
+
selectedRowCount,
|
|
1724
|
+
" ",
|
|
1725
|
+
selectedRowCount === 1 ? "item selecionado" : "itens selecionados"
|
|
1726
|
+
] }),
|
|
1727
|
+
/* @__PURE__ */ jsxs(
|
|
1728
|
+
Button,
|
|
1729
|
+
{
|
|
1730
|
+
variant: "ghost",
|
|
1731
|
+
size: "sm",
|
|
1732
|
+
className: "h-7 px-2",
|
|
1733
|
+
onClick: handleClearSelection,
|
|
1734
|
+
children: [
|
|
1735
|
+
/* @__PURE__ */ jsx(X, { className: "h-4 w-4 mr-1" }),
|
|
1736
|
+
"Limpar"
|
|
1737
|
+
]
|
|
1738
|
+
}
|
|
1739
|
+
)
|
|
1740
|
+
] }),
|
|
1741
|
+
/* @__PURE__ */ jsx("div", { className: "h-5 w-px bg-border" }),
|
|
1742
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: children(selectedRows) })
|
|
1743
|
+
]
|
|
1744
|
+
}
|
|
1745
|
+
);
|
|
1746
|
+
}
|
|
1747
|
+
DataTableBulkActions.displayName = "DataTable.BulkActions";
|
|
1748
|
+
var formatConfig = {
|
|
1749
|
+
csv: {
|
|
1750
|
+
label: "CSV",
|
|
1751
|
+
icon: FileText,
|
|
1752
|
+
mimeType: "text/csv",
|
|
1753
|
+
extension: "csv"
|
|
1754
|
+
},
|
|
1755
|
+
xlsx: {
|
|
1756
|
+
label: "Excel",
|
|
1757
|
+
icon: FileSpreadsheet,
|
|
1758
|
+
mimeType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
|
1759
|
+
extension: "xlsx"
|
|
1760
|
+
},
|
|
1761
|
+
pdf: {
|
|
1762
|
+
label: "PDF",
|
|
1763
|
+
icon: FileText,
|
|
1764
|
+
mimeType: "application/pdf",
|
|
1765
|
+
extension: "pdf"
|
|
1766
|
+
}
|
|
1767
|
+
};
|
|
1768
|
+
function escapeCSV(value) {
|
|
1769
|
+
if (value === null || value === void 0) return "";
|
|
1770
|
+
const str = String(value);
|
|
1771
|
+
if (str.includes(",") || str.includes('"') || str.includes("\n")) {
|
|
1772
|
+
return `"${str.replace(/"/g, '""')}"`;
|
|
1773
|
+
}
|
|
1774
|
+
return str;
|
|
1775
|
+
}
|
|
1776
|
+
function getNestedValue(obj, path) {
|
|
1777
|
+
return path.split(".").reduce((current, key) => {
|
|
1778
|
+
if (current && typeof current === "object" && key in current) {
|
|
1779
|
+
return current[key];
|
|
1780
|
+
}
|
|
1781
|
+
return void 0;
|
|
1782
|
+
}, obj);
|
|
1783
|
+
}
|
|
1784
|
+
function generateCSV(headers, rows, accessors) {
|
|
1785
|
+
const headerLine = headers.map(escapeCSV).join(",");
|
|
1786
|
+
const dataLines = rows.map(
|
|
1787
|
+
(row) => accessors.map((accessor) => {
|
|
1788
|
+
const value = getNestedValue(row, accessor);
|
|
1789
|
+
return escapeCSV(value);
|
|
1790
|
+
}).join(",")
|
|
1791
|
+
);
|
|
1792
|
+
return [headerLine, ...dataLines].join("\n");
|
|
1793
|
+
}
|
|
1794
|
+
function downloadFile(content, filename, mimeType) {
|
|
1795
|
+
const blob = new Blob(["\uFEFF" + content], { type: `${mimeType};charset=utf-8` });
|
|
1796
|
+
const url = URL.createObjectURL(blob);
|
|
1797
|
+
const link = document.createElement("a");
|
|
1798
|
+
link.href = url;
|
|
1799
|
+
link.download = filename;
|
|
1800
|
+
document.body.appendChild(link);
|
|
1801
|
+
link.click();
|
|
1802
|
+
document.body.removeChild(link);
|
|
1803
|
+
URL.revokeObjectURL(url);
|
|
1804
|
+
}
|
|
1805
|
+
function DataTableExport({
|
|
1806
|
+
formats = ["csv"],
|
|
1807
|
+
filename = "export",
|
|
1808
|
+
className
|
|
1809
|
+
}) {
|
|
1810
|
+
const table = useDataTable();
|
|
1811
|
+
const [open, setOpen] = React36.useState(false);
|
|
1812
|
+
const dropdownRef = React36.useRef(null);
|
|
1813
|
+
React36.useEffect(() => {
|
|
1814
|
+
function handleClickOutside(event) {
|
|
1815
|
+
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
|
1816
|
+
setOpen(false);
|
|
1817
|
+
}
|
|
1818
|
+
}
|
|
1819
|
+
if (open) {
|
|
1820
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
1821
|
+
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
1822
|
+
}
|
|
1823
|
+
}, [open]);
|
|
1824
|
+
const handleExport = React36.useCallback((format) => {
|
|
1825
|
+
const visibleColumns = table.getVisibleLeafColumns();
|
|
1826
|
+
const rows = table.getFilteredRowModel().rows;
|
|
1827
|
+
const headers = [];
|
|
1828
|
+
const accessors = [];
|
|
1829
|
+
visibleColumns.forEach((column) => {
|
|
1830
|
+
const header = column.columnDef.header;
|
|
1831
|
+
const headerText = typeof header === "string" ? header : column.id;
|
|
1832
|
+
const columnDef = column.columnDef;
|
|
1833
|
+
if (column.accessorFn || columnDef.accessorKey) {
|
|
1834
|
+
headers.push(headerText);
|
|
1835
|
+
accessors.push(columnDef.accessorKey || column.id);
|
|
1836
|
+
}
|
|
1837
|
+
});
|
|
1838
|
+
const data = rows.map((row) => row.original);
|
|
1839
|
+
if (format === "csv") {
|
|
1840
|
+
const csv = generateCSV(headers, data, accessors);
|
|
1841
|
+
const config = formatConfig[format];
|
|
1842
|
+
downloadFile(csv, `${filename}.${config.extension}`, config.mimeType);
|
|
1843
|
+
} else if (format === "xlsx") {
|
|
1844
|
+
console.warn("XLSX export requires xlsx library. Falling back to CSV.");
|
|
1845
|
+
const csv = generateCSV(headers, data, accessors);
|
|
1846
|
+
downloadFile(csv, `${filename}.csv`, "text/csv");
|
|
1847
|
+
} else if (format === "pdf") {
|
|
1848
|
+
console.warn("PDF export not implemented yet.");
|
|
1849
|
+
}
|
|
1850
|
+
setOpen(false);
|
|
1851
|
+
}, [table, filename]);
|
|
1852
|
+
if (formats.length === 1) {
|
|
1853
|
+
const format = formats[0];
|
|
1854
|
+
const config = formatConfig[format];
|
|
1855
|
+
const Icon2 = config.icon;
|
|
1856
|
+
return /* @__PURE__ */ jsxs(
|
|
1857
|
+
Button,
|
|
1858
|
+
{
|
|
1859
|
+
variant: "outline",
|
|
1860
|
+
size: "sm",
|
|
1861
|
+
className: cn("h-8", className),
|
|
1862
|
+
onClick: () => handleExport(format),
|
|
1863
|
+
children: [
|
|
1864
|
+
/* @__PURE__ */ jsx(Icon2, { className: "mr-2 h-4 w-4" }),
|
|
1865
|
+
"Exportar ",
|
|
1866
|
+
config.label
|
|
1867
|
+
]
|
|
1868
|
+
}
|
|
1869
|
+
);
|
|
1870
|
+
}
|
|
1871
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), ref: dropdownRef, children: [
|
|
1872
|
+
/* @__PURE__ */ jsxs(
|
|
1873
|
+
Button,
|
|
1874
|
+
{
|
|
1875
|
+
variant: "outline",
|
|
1876
|
+
size: "sm",
|
|
1877
|
+
className: "h-8",
|
|
1878
|
+
onClick: () => setOpen(!open),
|
|
1879
|
+
"aria-expanded": open,
|
|
1880
|
+
"aria-haspopup": "true",
|
|
1881
|
+
children: [
|
|
1882
|
+
/* @__PURE__ */ jsx(Download, { className: "mr-2 h-4 w-4" }),
|
|
1883
|
+
"Exportar"
|
|
1884
|
+
]
|
|
1885
|
+
}
|
|
1886
|
+
),
|
|
1887
|
+
open && /* @__PURE__ */ jsx(
|
|
1888
|
+
"div",
|
|
1889
|
+
{
|
|
1890
|
+
className: cn(
|
|
1891
|
+
"absolute right-0 top-full z-50 mt-1 w-36",
|
|
1892
|
+
"rounded-md border bg-popover p-1 shadow-md",
|
|
1893
|
+
"animate-in fade-in-0 zoom-in-95"
|
|
1894
|
+
),
|
|
1895
|
+
children: formats.map((format) => {
|
|
1896
|
+
const config = formatConfig[format];
|
|
1897
|
+
const Icon2 = config.icon;
|
|
1898
|
+
return /* @__PURE__ */ jsxs(
|
|
1899
|
+
"button",
|
|
1900
|
+
{
|
|
1901
|
+
className: cn(
|
|
1902
|
+
"flex w-full items-center gap-2 px-2 py-1.5 rounded-sm cursor-pointer",
|
|
1903
|
+
"hover:bg-accent hover:text-accent-foreground",
|
|
1904
|
+
"text-sm text-left"
|
|
1905
|
+
),
|
|
1906
|
+
onClick: () => handleExport(format),
|
|
1907
|
+
children: [
|
|
1908
|
+
/* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4" }),
|
|
1909
|
+
/* @__PURE__ */ jsx("span", { children: config.label })
|
|
1910
|
+
]
|
|
1911
|
+
},
|
|
1912
|
+
format
|
|
1913
|
+
);
|
|
1914
|
+
})
|
|
1915
|
+
}
|
|
1916
|
+
)
|
|
1917
|
+
] });
|
|
1918
|
+
}
|
|
1919
|
+
DataTableExport.displayName = "DataTable.Export";
|
|
1920
|
+
function DataTableTabs({
|
|
1921
|
+
tabs,
|
|
1922
|
+
value,
|
|
1923
|
+
defaultValue,
|
|
1924
|
+
onValueChange,
|
|
1925
|
+
className
|
|
1926
|
+
}) {
|
|
1927
|
+
const [internalValue, setInternalValue] = React36.useState(defaultValue ?? tabs[0]?.value);
|
|
1928
|
+
const activeValue = value ?? internalValue;
|
|
1929
|
+
const handleTabClick = (tabValue) => {
|
|
1930
|
+
if (value === void 0) {
|
|
1931
|
+
setInternalValue(tabValue);
|
|
1932
|
+
}
|
|
1933
|
+
onValueChange?.(tabValue);
|
|
1934
|
+
};
|
|
1935
|
+
return /* @__PURE__ */ jsx(
|
|
1936
|
+
"div",
|
|
1937
|
+
{
|
|
1938
|
+
className: cn("flex items-center gap-1 border-b", className),
|
|
1939
|
+
role: "tablist",
|
|
1940
|
+
"aria-label": "Filtros",
|
|
1941
|
+
children: tabs.map((tab) => {
|
|
1942
|
+
const isActive = activeValue === tab.value;
|
|
1943
|
+
return /* @__PURE__ */ jsxs(
|
|
1944
|
+
"button",
|
|
1945
|
+
{
|
|
1946
|
+
role: "tab",
|
|
1947
|
+
"aria-selected": isActive,
|
|
1948
|
+
"aria-controls": `tabpanel-${tab.value}`,
|
|
1949
|
+
className: cn(
|
|
1950
|
+
"relative px-4 py-2.5 text-sm font-medium transition-colors",
|
|
1951
|
+
"hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
1952
|
+
isActive ? "text-primary" : "text-muted-foreground hover:text-foreground/80"
|
|
1953
|
+
),
|
|
1954
|
+
onClick: () => handleTabClick(tab.value),
|
|
1955
|
+
children: [
|
|
1956
|
+
/* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
|
|
1957
|
+
tab.label,
|
|
1958
|
+
tab.count !== void 0 && /* @__PURE__ */ jsx(
|
|
1959
|
+
"span",
|
|
1960
|
+
{
|
|
1961
|
+
className: cn(
|
|
1962
|
+
"inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1.5 rounded text-xs font-medium",
|
|
1963
|
+
isActive ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
|
|
1964
|
+
),
|
|
1965
|
+
children: tab.count
|
|
1966
|
+
}
|
|
1967
|
+
)
|
|
1968
|
+
] }),
|
|
1969
|
+
isActive && /* @__PURE__ */ jsx(
|
|
1970
|
+
"span",
|
|
1971
|
+
{
|
|
1972
|
+
className: "absolute bottom-0 left-0 right-0 h-0.5 bg-primary",
|
|
1973
|
+
"aria-hidden": "true"
|
|
1974
|
+
}
|
|
1975
|
+
)
|
|
1976
|
+
]
|
|
1977
|
+
},
|
|
1978
|
+
tab.value
|
|
1979
|
+
);
|
|
1980
|
+
})
|
|
1981
|
+
}
|
|
1982
|
+
);
|
|
1983
|
+
}
|
|
1984
|
+
DataTableTabs.displayName = "DataTable.Tabs";
|
|
1985
|
+
|
|
1986
|
+
// src/components/Table/index.ts
|
|
1987
|
+
var DataTable = Object.assign(DataTableRoot, {
|
|
1988
|
+
// Estado
|
|
1989
|
+
Loading: DataTableLoading,
|
|
1990
|
+
EmptyState: DataTableEmptyState,
|
|
1991
|
+
// Layout
|
|
1992
|
+
Tabs: DataTableTabs,
|
|
1993
|
+
Toolbar: DataTableToolbar,
|
|
1994
|
+
Content: DataTableContent,
|
|
1995
|
+
// Search & Filter
|
|
1996
|
+
Search: DataTableSearch,
|
|
1997
|
+
Filters: DataTableFilters,
|
|
1998
|
+
Filter: DataTableFilter,
|
|
1999
|
+
// Pagination
|
|
2000
|
+
Pagination: DataTablePagination,
|
|
2001
|
+
// Actions
|
|
2002
|
+
BulkActions: DataTableBulkActions,
|
|
2003
|
+
// Preferences
|
|
2004
|
+
ColumnVisibility: DataTableColumnVisibility,
|
|
2005
|
+
DensityToggle: DataTableDensityToggle,
|
|
2006
|
+
Export: DataTableExport,
|
|
2007
|
+
// Column utilities (para uso em column definitions)
|
|
2008
|
+
ColumnHeader: DataTableColumnHeader
|
|
2009
|
+
});
|
|
2010
|
+
var Dialog = DialogPrimitive.Root;
|
|
2011
|
+
var DialogTrigger = DialogPrimitive.Trigger;
|
|
2012
|
+
var DialogPortal = DialogPrimitive.Portal;
|
|
2013
|
+
var DialogClose = DialogPrimitive.Close;
|
|
2014
|
+
var DialogOverlay = React36.memo(
|
|
2015
|
+
React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2016
|
+
DialogPrimitive.Overlay,
|
|
2017
|
+
{
|
|
2018
|
+
ref,
|
|
2019
|
+
className: cn(
|
|
2020
|
+
"fixed inset-0 z-50 bg-black/80",
|
|
2021
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
2022
|
+
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
2023
|
+
className
|
|
2024
|
+
),
|
|
2025
|
+
...props
|
|
2026
|
+
}
|
|
2027
|
+
))
|
|
2028
|
+
);
|
|
2029
|
+
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
|
2030
|
+
var dialogContentVariants = cva(
|
|
2031
|
+
[
|
|
2032
|
+
"fixed left-[50%] top-[50%] z-50",
|
|
2033
|
+
"translate-x-[-50%] translate-y-[-50%]",
|
|
2034
|
+
"grid w-full gap-4",
|
|
2035
|
+
"border bg-background p-6 shadow-lg",
|
|
2036
|
+
"duration-200",
|
|
2037
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
2038
|
+
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
2039
|
+
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
2040
|
+
"data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
|
|
2041
|
+
"data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
|
|
2042
|
+
"sm:rounded-lg"
|
|
2043
|
+
],
|
|
2044
|
+
{
|
|
2045
|
+
variants: {
|
|
2046
|
+
size: {
|
|
2047
|
+
sm: "max-w-sm",
|
|
2048
|
+
md: "max-w-md",
|
|
2049
|
+
lg: "max-w-lg",
|
|
2050
|
+
xl: "max-w-xl",
|
|
2051
|
+
"2xl": "max-w-2xl",
|
|
2052
|
+
"3xl": "max-w-3xl",
|
|
2053
|
+
"4xl": "max-w-4xl",
|
|
2054
|
+
full: "max-w-[95vw] max-h-[95vh]"
|
|
2055
|
+
}
|
|
2056
|
+
},
|
|
2057
|
+
defaultVariants: {
|
|
2058
|
+
size: "lg"
|
|
2059
|
+
}
|
|
2060
|
+
}
|
|
2061
|
+
);
|
|
2062
|
+
var DialogContent = React36.memo(
|
|
2063
|
+
React36.forwardRef(({ className, children, showCloseButton = true, size, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
|
|
2064
|
+
/* @__PURE__ */ jsx(DialogOverlay, {}),
|
|
2065
|
+
/* @__PURE__ */ jsxs(
|
|
2066
|
+
DialogPrimitive.Content,
|
|
2067
|
+
{
|
|
2068
|
+
ref,
|
|
2069
|
+
className: cn(dialogContentVariants({ size, className })),
|
|
2070
|
+
...props,
|
|
2071
|
+
children: [
|
|
2072
|
+
children,
|
|
2073
|
+
showCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
|
|
2074
|
+
/* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
|
|
2075
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Fechar" })
|
|
2076
|
+
] })
|
|
2077
|
+
]
|
|
2078
|
+
}
|
|
2079
|
+
)
|
|
2080
|
+
] }))
|
|
2081
|
+
);
|
|
2082
|
+
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
|
2083
|
+
var DialogHeader = React36.memo(
|
|
2084
|
+
({ className, ...props }) => /* @__PURE__ */ jsx(
|
|
2085
|
+
"div",
|
|
2086
|
+
{
|
|
2087
|
+
className: cn(
|
|
2088
|
+
"flex flex-col space-y-1.5 text-center sm:text-left",
|
|
2089
|
+
className
|
|
2090
|
+
),
|
|
2091
|
+
...props
|
|
2092
|
+
}
|
|
2093
|
+
)
|
|
2094
|
+
);
|
|
2095
|
+
DialogHeader.displayName = "DialogHeader";
|
|
2096
|
+
var DialogFooter = React36.memo(
|
|
2097
|
+
({ className, ...props }) => /* @__PURE__ */ jsx(
|
|
2098
|
+
"div",
|
|
2099
|
+
{
|
|
2100
|
+
className: cn(
|
|
2101
|
+
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
|
2102
|
+
className
|
|
2103
|
+
),
|
|
2104
|
+
...props
|
|
2105
|
+
}
|
|
2106
|
+
)
|
|
2107
|
+
);
|
|
2108
|
+
DialogFooter.displayName = "DialogFooter";
|
|
2109
|
+
var DialogTitle = React36.memo(
|
|
2110
|
+
React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2111
|
+
DialogPrimitive.Title,
|
|
2112
|
+
{
|
|
2113
|
+
ref,
|
|
2114
|
+
className: cn(
|
|
2115
|
+
"text-2xl font-semibold leading-none tracking-tight",
|
|
2116
|
+
className
|
|
2117
|
+
),
|
|
2118
|
+
...props
|
|
2119
|
+
}
|
|
2120
|
+
))
|
|
2121
|
+
);
|
|
2122
|
+
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
|
2123
|
+
var DialogDescription = React36.memo(
|
|
2124
|
+
React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2125
|
+
DialogPrimitive.Description,
|
|
2126
|
+
{
|
|
2127
|
+
ref,
|
|
2128
|
+
className: cn("text-[0.920rem] text-muted-foreground", className),
|
|
2129
|
+
...props
|
|
2130
|
+
}
|
|
2131
|
+
))
|
|
2132
|
+
);
|
|
2133
|
+
DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
|
2134
|
+
var DialogBody = React36.memo(
|
|
2135
|
+
({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex-1 overflow-y-auto py-2", className), ...props })
|
|
2136
|
+
);
|
|
2137
|
+
DialogBody.displayName = "DialogBody";
|
|
2138
|
+
var SIZE_CONFIG = {
|
|
2139
|
+
sm: { base: 8, increment: 2 },
|
|
2140
|
+
md: { base: 12, increment: 4 },
|
|
2141
|
+
lg: { base: 16, increment: 6 },
|
|
2142
|
+
xl: { base: 28, increment: 14 },
|
|
2143
|
+
xxl: { base: 36, increment: 16 }
|
|
2144
|
+
};
|
|
2145
|
+
var INTENSITY_CONFIG = {
|
|
2146
|
+
light: [4, 6, 8, 10, 12],
|
|
2147
|
+
medium: [6, 8, 10, 12, 16],
|
|
2148
|
+
strong: [8, 12, 16, 20, 25]
|
|
2149
|
+
};
|
|
2150
|
+
var POSITION_CONFIG = {
|
|
2151
|
+
center: "items-center justify-center",
|
|
2152
|
+
"top-left": "items-start justify-start",
|
|
2153
|
+
"top-right": "items-start justify-end",
|
|
2154
|
+
"bottom-left": "items-end justify-start",
|
|
2155
|
+
"bottom-right": "items-end justify-end",
|
|
2156
|
+
"top-center": "items-start justify-center",
|
|
2157
|
+
"bottom-center": "items-end justify-center"
|
|
2158
|
+
};
|
|
2159
|
+
var COLOR_MAP = {
|
|
2160
|
+
primary: "border-primary",
|
|
2161
|
+
secondary: "border-secondary",
|
|
2162
|
+
accent: "border-accent",
|
|
2163
|
+
muted: "border-muted"
|
|
2164
|
+
};
|
|
2165
|
+
var RippleRing = React36.memo(({ size, color, opacity }) => {
|
|
2166
|
+
const borderColorClass = COLOR_MAP[color] || COLOR_MAP.primary;
|
|
2167
|
+
return /* @__PURE__ */ jsx(
|
|
2168
|
+
"div",
|
|
2169
|
+
{
|
|
2170
|
+
className: cn("absolute rounded-full", borderColorClass),
|
|
2171
|
+
style: {
|
|
2172
|
+
width: `${size * 4}px`,
|
|
2173
|
+
height: `${size * 4}px`,
|
|
2174
|
+
borderWidth: "1px",
|
|
2175
|
+
opacity: opacity / 100,
|
|
2176
|
+
top: "50%",
|
|
2177
|
+
left: "50%",
|
|
2178
|
+
transform: "translate(-50%, -50%)"
|
|
2179
|
+
}
|
|
2180
|
+
}
|
|
2181
|
+
);
|
|
2182
|
+
});
|
|
2183
|
+
RippleRing.displayName = "RippleRing";
|
|
2184
|
+
var RippleEffect = React36.memo(
|
|
2185
|
+
({
|
|
2186
|
+
size = "md",
|
|
2187
|
+
color = "primary",
|
|
2188
|
+
intensity = "medium",
|
|
2189
|
+
rings = 5,
|
|
2190
|
+
position = "center",
|
|
2191
|
+
className
|
|
2192
|
+
}) => {
|
|
2193
|
+
const { base, increment } = SIZE_CONFIG[size];
|
|
2194
|
+
const opacities = INTENSITY_CONFIG[intensity];
|
|
2195
|
+
const positionClasses = POSITION_CONFIG[position];
|
|
2196
|
+
const rippleRings = React36.useMemo(
|
|
2197
|
+
() => Array.from({ length: rings }).map((_, index) => {
|
|
2198
|
+
const ringSize = base + increment * (rings - index - 1);
|
|
2199
|
+
const opacity = opacities[index] || opacities[opacities.length - 1];
|
|
2200
|
+
return /* @__PURE__ */ jsx(
|
|
2201
|
+
RippleRing,
|
|
2202
|
+
{
|
|
2203
|
+
size: ringSize,
|
|
2204
|
+
color,
|
|
2205
|
+
opacity
|
|
2206
|
+
},
|
|
2207
|
+
index
|
|
2208
|
+
);
|
|
2209
|
+
}),
|
|
2210
|
+
[base, increment, rings, opacities, color]
|
|
2211
|
+
);
|
|
2212
|
+
return /* @__PURE__ */ jsx(
|
|
2213
|
+
"div",
|
|
2214
|
+
{
|
|
2215
|
+
className: cn(
|
|
2216
|
+
"absolute inset-0 flex pointer-events-none",
|
|
2217
|
+
positionClasses,
|
|
2218
|
+
className
|
|
2219
|
+
),
|
|
2220
|
+
children: /* @__PURE__ */ jsx("div", { className: "relative", children: rippleRings })
|
|
2221
|
+
}
|
|
2222
|
+
);
|
|
2223
|
+
}
|
|
2224
|
+
);
|
|
2225
|
+
RippleEffect.displayName = "RippleEffect";
|
|
2226
|
+
var RippleWrapper = React36.memo(
|
|
2227
|
+
({ children, rippleProps, className }) => {
|
|
2228
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
|
|
2229
|
+
rippleProps && /* @__PURE__ */ jsx(RippleEffect, { ...rippleProps }),
|
|
2230
|
+
/* @__PURE__ */ jsx("div", { className: "relative z-10", children })
|
|
2231
|
+
] });
|
|
2232
|
+
}
|
|
2233
|
+
);
|
|
2234
|
+
RippleWrapper.displayName = "RippleWrapper";
|
|
2235
|
+
var RippleBackground = React36.memo(
|
|
2236
|
+
({ containerClassName, ...rippleProps }) => {
|
|
2237
|
+
return /* @__PURE__ */ jsx(
|
|
2238
|
+
"div",
|
|
2239
|
+
{
|
|
2240
|
+
className: cn(
|
|
2241
|
+
"absolute inset-0 overflow-hidden pointer-events-none",
|
|
2242
|
+
containerClassName
|
|
2243
|
+
),
|
|
2244
|
+
children: /* @__PURE__ */ jsx(RippleEffect, { ...rippleProps })
|
|
2245
|
+
}
|
|
2246
|
+
);
|
|
2247
|
+
}
|
|
2248
|
+
);
|
|
2249
|
+
RippleBackground.displayName = "RippleBackground";
|
|
2250
|
+
var iconWrapperVariants2 = cva(
|
|
2251
|
+
"p-3 rounded-2xl shadow-lg transition-all duration-200",
|
|
2252
|
+
{
|
|
2253
|
+
variants: {
|
|
2254
|
+
variant: {
|
|
2255
|
+
default: "bg-primary shadow-primary/25",
|
|
2256
|
+
secondary: "bg-secondary shadow-secondary/25",
|
|
2257
|
+
accent: "bg-accent shadow-accent/25",
|
|
2258
|
+
destructive: "bg-red-600 shadow-red-600/25",
|
|
2259
|
+
success: "bg-green-600 shadow-green-600/25"
|
|
2260
|
+
},
|
|
2261
|
+
size: {
|
|
2262
|
+
sm: "p-2",
|
|
2263
|
+
md: "p-3",
|
|
2264
|
+
lg: "p-4"
|
|
2265
|
+
}
|
|
2266
|
+
},
|
|
2267
|
+
defaultVariants: {
|
|
2268
|
+
variant: "default",
|
|
2269
|
+
size: "md"
|
|
2270
|
+
}
|
|
2271
|
+
}
|
|
2272
|
+
);
|
|
2273
|
+
var iconVariants2 = cva("text-white", {
|
|
2274
|
+
variants: {
|
|
2275
|
+
size: {
|
|
2276
|
+
sm: "h-4 w-4",
|
|
2277
|
+
md: "h-5 w-5",
|
|
2278
|
+
lg: "h-6 w-6"
|
|
2279
|
+
}
|
|
2280
|
+
},
|
|
2281
|
+
defaultVariants: {
|
|
2282
|
+
size: "md"
|
|
2283
|
+
}
|
|
2284
|
+
});
|
|
2285
|
+
var statusIndicatorVariants = cva(
|
|
2286
|
+
"absolute -top-1 -right-0 w-4 h-4 rounded-full border-2 border-white/70 shadow-sm z-20",
|
|
2287
|
+
{
|
|
2288
|
+
variants: {
|
|
2289
|
+
status: {
|
|
2290
|
+
active: "bg-green-500",
|
|
2291
|
+
inactive: "bg-slate-500",
|
|
2292
|
+
warning: "bg-yellow-500",
|
|
2293
|
+
error: "bg-red-500"
|
|
2294
|
+
}
|
|
2295
|
+
},
|
|
2296
|
+
defaultVariants: {
|
|
2297
|
+
status: "active"
|
|
2298
|
+
}
|
|
2299
|
+
}
|
|
2300
|
+
);
|
|
2301
|
+
var DialogWrapper = React36.memo(
|
|
2302
|
+
({
|
|
2303
|
+
children,
|
|
2304
|
+
className,
|
|
2305
|
+
icon: Icon2,
|
|
2306
|
+
status,
|
|
2307
|
+
variant = "default",
|
|
2308
|
+
size = "md",
|
|
2309
|
+
iconSize = "md",
|
|
2310
|
+
showRipple = true,
|
|
2311
|
+
rippleProps,
|
|
2312
|
+
...props
|
|
2313
|
+
}) => {
|
|
2314
|
+
const defaultRippleProps = React36.useMemo(
|
|
2315
|
+
() => ({
|
|
2316
|
+
size: size === "sm" ? "md" : size === "lg" ? "xl" : "lg",
|
|
2317
|
+
color: variant === "secondary" ? "secondary" : variant === "accent" ? "accent" : "primary",
|
|
2318
|
+
intensity: "light",
|
|
2319
|
+
rings: 3,
|
|
2320
|
+
...rippleProps
|
|
2321
|
+
}),
|
|
2322
|
+
[size, variant, rippleProps]
|
|
2323
|
+
);
|
|
2324
|
+
const backgroundRippleProps = React36.useMemo(
|
|
2325
|
+
() => ({
|
|
2326
|
+
position: "top-right",
|
|
2327
|
+
size: "xl",
|
|
2328
|
+
color: variant === "secondary" ? "secondary" : variant === "accent" ? "accent" : "primary",
|
|
2329
|
+
intensity: "light",
|
|
2330
|
+
rings: 5
|
|
2331
|
+
}),
|
|
2332
|
+
[variant]
|
|
2333
|
+
);
|
|
2334
|
+
if (!Icon2) {
|
|
2335
|
+
return /* @__PURE__ */ jsxs(
|
|
2336
|
+
DialogHeader,
|
|
2337
|
+
{
|
|
2338
|
+
className: cn("flex flex-col justify-between px-0", className),
|
|
2339
|
+
...props,
|
|
2340
|
+
children: [
|
|
2341
|
+
showRipple && /* @__PURE__ */ jsx(RippleBackground, { ...backgroundRippleProps }),
|
|
2342
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 w-full", children: /* @__PURE__ */ jsx("div", { className: "w-full", children }) })
|
|
2343
|
+
]
|
|
2344
|
+
}
|
|
2345
|
+
);
|
|
2346
|
+
}
|
|
2347
|
+
return /* @__PURE__ */ jsxs(
|
|
2348
|
+
DialogHeader,
|
|
2349
|
+
{
|
|
2350
|
+
className: cn("flex flex-col justify-between px-0 pb-3", className),
|
|
2351
|
+
...props,
|
|
2352
|
+
children: [
|
|
2353
|
+
showRipple && /* @__PURE__ */ jsx(RippleBackground, { ...backgroundRippleProps }),
|
|
2354
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full", children: [
|
|
2355
|
+
/* @__PURE__ */ jsxs(
|
|
2356
|
+
RippleWrapper,
|
|
2357
|
+
{
|
|
2358
|
+
rippleProps: showRipple ? defaultRippleProps : void 0,
|
|
2359
|
+
children: [
|
|
2360
|
+
/* @__PURE__ */ jsx("div", { className: cn(iconWrapperVariants2({ variant, size }), "mr-2"), children: /* @__PURE__ */ jsx(Icon2, { className: iconVariants2({ size: iconSize }) }) }),
|
|
2361
|
+
status && /* @__PURE__ */ jsx("div", { className: statusIndicatorVariants({ status }) })
|
|
2362
|
+
]
|
|
2363
|
+
}
|
|
2364
|
+
),
|
|
2365
|
+
/* @__PURE__ */ jsx("div", { className: "w-full", children })
|
|
2366
|
+
] })
|
|
2367
|
+
]
|
|
2368
|
+
}
|
|
2369
|
+
);
|
|
2370
|
+
}
|
|
2371
|
+
);
|
|
2372
|
+
DialogWrapper.displayName = "DialogWrapper";
|
|
2373
|
+
var toastVariants = {
|
|
2374
|
+
default: {
|
|
2375
|
+
bg: "bg-card",
|
|
2376
|
+
border: "border-border",
|
|
2377
|
+
barColor: "bg-muted-foreground",
|
|
2378
|
+
icon: /* @__PURE__ */ jsx(Info, { className: "h-5 w-5 text-muted-foreground" }),
|
|
2379
|
+
textColor: "text-foreground"
|
|
2380
|
+
},
|
|
2381
|
+
success: {
|
|
2382
|
+
bg: "bg-card",
|
|
2383
|
+
border: "border-green-300 dark:border-green-700",
|
|
2384
|
+
barColor: "bg-green-500",
|
|
2385
|
+
icon: /* @__PURE__ */ jsx(CheckCircle2, { className: "h-5 w-5 text-green-600 dark:text-green-500" }),
|
|
2386
|
+
textColor: "text-foreground"
|
|
2387
|
+
},
|
|
2388
|
+
error: {
|
|
2389
|
+
bg: "bg-card",
|
|
2390
|
+
border: "border-red-300 dark:border-red-700",
|
|
2391
|
+
barColor: "bg-red-500",
|
|
2392
|
+
icon: /* @__PURE__ */ jsx(XCircle, { className: "h-5 w-5 text-red-600 dark:text-red-500" }),
|
|
2393
|
+
textColor: "text-foreground"
|
|
2394
|
+
},
|
|
2395
|
+
warning: {
|
|
2396
|
+
bg: "bg-card",
|
|
2397
|
+
border: "border-yellow-400 dark:border-yellow-700",
|
|
2398
|
+
barColor: "bg-yellow-500",
|
|
2399
|
+
icon: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-5 w-5 text-yellow-600 dark:text-yellow-500" }),
|
|
2400
|
+
textColor: "text-foreground"
|
|
2401
|
+
},
|
|
2402
|
+
info: {
|
|
2403
|
+
bg: "bg-card",
|
|
2404
|
+
border: "border-blue-300 dark:border-blue-700",
|
|
2405
|
+
barColor: "bg-blue-500",
|
|
2406
|
+
icon: /* @__PURE__ */ jsx(Info, { className: "h-5 w-5 text-blue-600 dark:text-blue-500" }),
|
|
2407
|
+
textColor: "text-foreground"
|
|
2408
|
+
}
|
|
2409
|
+
};
|
|
2410
|
+
var Toaster = ({ ...props }) => {
|
|
2411
|
+
return /* @__PURE__ */ jsx(
|
|
2412
|
+
Toaster$1,
|
|
2413
|
+
{
|
|
2414
|
+
position: "top-right",
|
|
2415
|
+
expand: false,
|
|
2416
|
+
closeButton: false,
|
|
2417
|
+
toastOptions: {
|
|
2418
|
+
unstyled: true,
|
|
2419
|
+
classNames: {
|
|
2420
|
+
toast: "w-full"
|
|
2421
|
+
}
|
|
2422
|
+
},
|
|
2423
|
+
...props
|
|
2424
|
+
}
|
|
2425
|
+
);
|
|
2426
|
+
};
|
|
2427
|
+
var CustomToast = React36.memo(
|
|
2428
|
+
({ title, description, variant = "default", action, onClose }) => {
|
|
2429
|
+
const variantStyles = toastVariants[variant];
|
|
2430
|
+
return /* @__PURE__ */ jsxs(
|
|
2431
|
+
"div",
|
|
2432
|
+
{
|
|
2433
|
+
className: cn(
|
|
2434
|
+
"flex items-start gap-3 p-4 pr-3 rounded-lg shadow-lg border min-w-[350px] max-w-[450px] relative overflow-hidden",
|
|
2435
|
+
variantStyles.bg,
|
|
2436
|
+
variantStyles.border
|
|
2437
|
+
),
|
|
2438
|
+
children: [
|
|
2439
|
+
/* @__PURE__ */ jsx(
|
|
2440
|
+
"div",
|
|
2441
|
+
{
|
|
2442
|
+
className: cn(
|
|
2443
|
+
"absolute left-0 top-0 bottom-0 w-1.5",
|
|
2444
|
+
variantStyles.barColor
|
|
2445
|
+
)
|
|
2446
|
+
}
|
|
2447
|
+
),
|
|
2448
|
+
/* @__PURE__ */ jsx("div", { className: "flex-shrink-0 ml-2", children: variantStyles.icon }),
|
|
2449
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
|
|
2450
|
+
/* @__PURE__ */ jsx("p", { className: cn("text-sm font-medium", variantStyles.textColor), children: title }),
|
|
2451
|
+
description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-0.5", children: description })
|
|
2452
|
+
] }),
|
|
2453
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
|
|
2454
|
+
action && /* @__PURE__ */ jsx(
|
|
2455
|
+
"button",
|
|
2456
|
+
{
|
|
2457
|
+
onClick: (e) => {
|
|
2458
|
+
e.stopPropagation();
|
|
2459
|
+
action.onClick();
|
|
2460
|
+
},
|
|
2461
|
+
className: cn(
|
|
2462
|
+
"text-sm font-medium px-2 py-1 rounded hover:bg-accent transition-colors",
|
|
2463
|
+
variant === "error" || variant === "warning" ? "text-red-700 dark:text-red-400" : variant === "success" ? "text-green-700 dark:text-green-400" : variant === "info" ? "text-blue-700 dark:text-blue-400" : "text-foreground"
|
|
2464
|
+
),
|
|
2465
|
+
children: action.label
|
|
2466
|
+
}
|
|
2467
|
+
),
|
|
2468
|
+
/* @__PURE__ */ jsx(
|
|
2469
|
+
"button",
|
|
2470
|
+
{
|
|
2471
|
+
onClick: (e) => {
|
|
2472
|
+
e.stopPropagation();
|
|
2473
|
+
onClose?.();
|
|
2474
|
+
},
|
|
2475
|
+
className: "p-1 rounded hover:bg-accent transition-colors",
|
|
2476
|
+
children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4 text-muted-foreground" })
|
|
2477
|
+
}
|
|
2478
|
+
)
|
|
2479
|
+
] })
|
|
2480
|
+
]
|
|
2481
|
+
}
|
|
2482
|
+
);
|
|
2483
|
+
}
|
|
2484
|
+
);
|
|
2485
|
+
CustomToast.displayName = "CustomToast";
|
|
2486
|
+
var createToast = (message, variant = "default") => {
|
|
2487
|
+
const props = typeof message === "string" ? { title: message, variant } : message;
|
|
2488
|
+
return toast$1.custom(
|
|
2489
|
+
(t) => /* @__PURE__ */ jsx(CustomToast, { ...props, onClose: () => toast$1.dismiss(t) }),
|
|
2490
|
+
{
|
|
2491
|
+
duration: props.action ? 1e4 : 4e3
|
|
2492
|
+
}
|
|
2493
|
+
);
|
|
2494
|
+
};
|
|
2495
|
+
var toast = Object.assign(
|
|
2496
|
+
(message) => createToast(message, "default"),
|
|
2497
|
+
{
|
|
2498
|
+
success: (message) => createToast(
|
|
2499
|
+
typeof message === "string" ? { title: message } : message,
|
|
2500
|
+
"success"
|
|
2501
|
+
),
|
|
2502
|
+
error: (message) => createToast(
|
|
2503
|
+
typeof message === "string" ? { title: message } : message,
|
|
2504
|
+
"error"
|
|
2505
|
+
),
|
|
2506
|
+
warning: (message) => createToast(
|
|
2507
|
+
typeof message === "string" ? { title: message } : message,
|
|
2508
|
+
"warning"
|
|
2509
|
+
),
|
|
2510
|
+
info: (message) => createToast(
|
|
2511
|
+
typeof message === "string" ? { title: message } : message,
|
|
2512
|
+
"info"
|
|
2513
|
+
),
|
|
2514
|
+
custom: (component, options) => toast$1.custom(component, options),
|
|
2515
|
+
dismiss: (id) => toast$1.dismiss(id),
|
|
2516
|
+
promise: (promise, options) => toast$1.promise(promise, options)
|
|
2517
|
+
}
|
|
2518
|
+
);
|
|
2519
|
+
var switchVariants = cva(
|
|
2520
|
+
[
|
|
2521
|
+
"peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent",
|
|
2522
|
+
"transition-colors",
|
|
2523
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
|
|
2524
|
+
"disabled:cursor-not-allowed disabled:opacity-50"
|
|
2525
|
+
],
|
|
2526
|
+
{
|
|
2527
|
+
variants: {
|
|
2528
|
+
variant: {
|
|
2529
|
+
default: "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
|
|
2530
|
+
secondary: "data-[state=checked]:bg-secondary data-[state=unchecked]:bg-input",
|
|
2531
|
+
success: "data-[state=checked]:bg-green-600 data-[state=unchecked]:bg-input"
|
|
2532
|
+
},
|
|
2533
|
+
size: {
|
|
2534
|
+
sm: "h-5 w-9",
|
|
2535
|
+
md: "h-6 w-11",
|
|
2536
|
+
lg: "h-7 w-14"
|
|
2537
|
+
}
|
|
2538
|
+
},
|
|
2539
|
+
defaultVariants: {
|
|
2540
|
+
variant: "default",
|
|
2541
|
+
size: "md"
|
|
2542
|
+
}
|
|
2543
|
+
}
|
|
2544
|
+
);
|
|
2545
|
+
var thumbVariants = cva(
|
|
2546
|
+
[
|
|
2547
|
+
"pointer-events-none block rounded-full bg-background shadow-lg ring-0",
|
|
2548
|
+
"transition-transform"
|
|
2549
|
+
],
|
|
2550
|
+
{
|
|
2551
|
+
variants: {
|
|
2552
|
+
size: {
|
|
2553
|
+
sm: "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
|
|
2554
|
+
md: "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
|
|
2555
|
+
lg: "h-6 w-6 data-[state=checked]:translate-x-7 data-[state=unchecked]:translate-x-0"
|
|
2556
|
+
}
|
|
2557
|
+
},
|
|
2558
|
+
defaultVariants: {
|
|
2559
|
+
size: "md"
|
|
2560
|
+
}
|
|
2561
|
+
}
|
|
2562
|
+
);
|
|
2563
|
+
var Switch = React36.memo(
|
|
2564
|
+
React36.forwardRef(({ className, variant, size = "md", ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2565
|
+
SwitchPrimitives.Root,
|
|
2566
|
+
{
|
|
2567
|
+
className: cn(switchVariants({ variant, size, className })),
|
|
2568
|
+
...props,
|
|
2569
|
+
ref,
|
|
2570
|
+
children: /* @__PURE__ */ jsx(SwitchPrimitives.Thumb, { className: cn(thumbVariants({ size })) })
|
|
2571
|
+
}
|
|
2572
|
+
))
|
|
2573
|
+
);
|
|
2574
|
+
Switch.displayName = SwitchPrimitives.Root.displayName;
|
|
2575
|
+
var textareaVariants = cva(
|
|
2576
|
+
"w-full px-3 pt-4 pb-2 text-sm bg-background rounded-md border-2 transition-colors focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50 resize-none",
|
|
2577
|
+
{
|
|
2578
|
+
variants: {
|
|
2579
|
+
variant: {
|
|
2580
|
+
default: "border-border focus:border-primary",
|
|
2581
|
+
error: "border-red-500 focus:border-red-600"
|
|
2582
|
+
},
|
|
2583
|
+
textareaSize: {
|
|
2584
|
+
sm: "min-h-[80px] pt-3 pb-1",
|
|
2585
|
+
default: "min-h-[100px]",
|
|
2586
|
+
lg: "min-h-[120px] pt-5 pb-2"
|
|
2587
|
+
}
|
|
2588
|
+
},
|
|
2589
|
+
defaultVariants: {
|
|
2590
|
+
variant: "default",
|
|
2591
|
+
textareaSize: "default"
|
|
2592
|
+
}
|
|
2593
|
+
}
|
|
2594
|
+
);
|
|
2595
|
+
var Textarea = React36.memo(
|
|
2596
|
+
React36.forwardRef(
|
|
2597
|
+
({
|
|
2598
|
+
className,
|
|
2599
|
+
variant,
|
|
2600
|
+
textareaSize,
|
|
2601
|
+
error,
|
|
2602
|
+
label,
|
|
2603
|
+
icon: Icon2,
|
|
2604
|
+
required,
|
|
2605
|
+
containerClassName,
|
|
2606
|
+
labelClassName,
|
|
2607
|
+
autoResize = false,
|
|
2608
|
+
onChange,
|
|
2609
|
+
...props
|
|
2610
|
+
}, ref) => {
|
|
2611
|
+
const textareaRef = React36.useRef(null);
|
|
2612
|
+
React36.useImperativeHandle(ref, () => textareaRef.current, []);
|
|
2613
|
+
const focusTextarea = React36.useCallback(() => {
|
|
2614
|
+
textareaRef.current?.focus();
|
|
2615
|
+
}, []);
|
|
2616
|
+
const handleChange = React36.useCallback(
|
|
2617
|
+
(e) => {
|
|
2618
|
+
if (autoResize && textareaRef.current) {
|
|
2619
|
+
textareaRef.current.style.height = "auto";
|
|
2620
|
+
textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
|
|
2621
|
+
}
|
|
2622
|
+
onChange?.(e);
|
|
2623
|
+
},
|
|
2624
|
+
[autoResize, onChange]
|
|
2625
|
+
);
|
|
2626
|
+
React36.useEffect(() => {
|
|
2627
|
+
if (autoResize && textareaRef.current) {
|
|
2628
|
+
textareaRef.current.style.height = "auto";
|
|
2629
|
+
textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
|
|
2630
|
+
}
|
|
2631
|
+
}, [autoResize]);
|
|
2632
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("relative", containerClassName), children: [
|
|
2633
|
+
Icon2 && /* @__PURE__ */ jsx(
|
|
2634
|
+
Icon2,
|
|
2635
|
+
{
|
|
2636
|
+
className: "absolute left-3 top-4 text-muted-foreground h-4 w-4 cursor-pointer z-10",
|
|
2637
|
+
onClick: focusTextarea
|
|
2638
|
+
}
|
|
2639
|
+
),
|
|
2640
|
+
/* @__PURE__ */ jsx(
|
|
2641
|
+
"textarea",
|
|
2642
|
+
{
|
|
2643
|
+
className: cn(
|
|
2644
|
+
textareaVariants({
|
|
2645
|
+
variant: error ? "error" : variant,
|
|
2646
|
+
textareaSize
|
|
2647
|
+
}),
|
|
2648
|
+
Icon2 && "pl-10",
|
|
2649
|
+
className
|
|
2650
|
+
),
|
|
2651
|
+
ref: textareaRef,
|
|
2652
|
+
onChange: handleChange,
|
|
2653
|
+
...props
|
|
2654
|
+
}
|
|
2655
|
+
),
|
|
2656
|
+
label && /* @__PURE__ */ jsxs(
|
|
2657
|
+
"label",
|
|
2658
|
+
{
|
|
2659
|
+
className: cn(
|
|
2660
|
+
"absolute left-3 top-[-6px] text-xs font-medium bg-background px-1 cursor-pointer",
|
|
2661
|
+
error ? "text-red-500" : "text-foreground",
|
|
2662
|
+
Icon2 && "left-10",
|
|
2663
|
+
labelClassName
|
|
2664
|
+
),
|
|
2665
|
+
onClick: focusTextarea,
|
|
2666
|
+
children: [
|
|
2667
|
+
label,
|
|
2668
|
+
required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-0.5", children: "*" })
|
|
2669
|
+
]
|
|
2670
|
+
}
|
|
2671
|
+
)
|
|
2672
|
+
] });
|
|
2673
|
+
}
|
|
2674
|
+
)
|
|
2675
|
+
);
|
|
2676
|
+
Textarea.displayName = "Textarea";
|
|
2677
|
+
var FormContext = React36.createContext(null);
|
|
2678
|
+
function useFormContext() {
|
|
2679
|
+
const context = React36.useContext(FormContext);
|
|
2680
|
+
if (!context) {
|
|
2681
|
+
throw new Error("useFormContext must be used within a Form provider");
|
|
2682
|
+
}
|
|
2683
|
+
return context.form;
|
|
2684
|
+
}
|
|
2685
|
+
function FormProvider({
|
|
2686
|
+
form,
|
|
2687
|
+
children
|
|
2688
|
+
}) {
|
|
2689
|
+
const value = React36.useMemo(() => ({ form }), [form]);
|
|
2690
|
+
return /* @__PURE__ */ jsx(FormContext.Provider, { value, children });
|
|
2691
|
+
}
|
|
2692
|
+
var FormFieldContext = React36.createContext(null);
|
|
2693
|
+
function useFormFieldContext() {
|
|
2694
|
+
const context = React36.useContext(FormFieldContext);
|
|
2695
|
+
if (!context) {
|
|
2696
|
+
throw new Error("useFormFieldContext must be used within a Form.Field");
|
|
2697
|
+
}
|
|
2698
|
+
return context;
|
|
2699
|
+
}
|
|
2700
|
+
function useFormFieldContextOptional() {
|
|
2701
|
+
return React36.useContext(FormFieldContext);
|
|
2702
|
+
}
|
|
2703
|
+
function FormFieldProvider({ name, children }) {
|
|
2704
|
+
const form = useFormContext();
|
|
2705
|
+
const id = React36.useId();
|
|
2706
|
+
const fieldState = form.getFieldState(name, form.formState);
|
|
2707
|
+
const error = fieldState.error?.message;
|
|
2708
|
+
const isRequired = false;
|
|
2709
|
+
const value = React36.useMemo(
|
|
2710
|
+
() => ({
|
|
2711
|
+
name,
|
|
2712
|
+
id,
|
|
2713
|
+
error,
|
|
2714
|
+
isRequired
|
|
2715
|
+
}),
|
|
2716
|
+
[name, id, error, isRequired]
|
|
2717
|
+
);
|
|
2718
|
+
return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value, children });
|
|
2719
|
+
}
|
|
2720
|
+
function applyMask(value, mask) {
|
|
2721
|
+
const digits = value.replace(/\D/g, "");
|
|
2722
|
+
switch (mask) {
|
|
2723
|
+
case "phone":
|
|
2724
|
+
if (digits.length <= 10) {
|
|
2725
|
+
return digits.replace(/(\d{2})(\d{4})(\d{0,4})/, "($1) $2-$3").trim();
|
|
2726
|
+
}
|
|
2727
|
+
return digits.replace(/(\d{2})(\d{5})(\d{0,4})/, "($1) $2-$3").trim();
|
|
2728
|
+
case "cpf":
|
|
2729
|
+
return digits.replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d{1,2})$/, "$1-$2");
|
|
2730
|
+
case "cnpj":
|
|
2731
|
+
return digits.replace(/(\d{2})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1/$2").replace(/(\d{4})(\d{1,2})$/, "$1-$2");
|
|
2732
|
+
case "cep":
|
|
2733
|
+
return digits.replace(/(\d{5})(\d{0,3})/, "$1-$2");
|
|
2734
|
+
case "money":
|
|
2735
|
+
if (!digits) return "";
|
|
2736
|
+
const cents = parseInt(digits, 10) / 100;
|
|
2737
|
+
return new Intl.NumberFormat("pt-BR", {
|
|
2738
|
+
style: "currency",
|
|
2739
|
+
currency: "BRL"
|
|
2740
|
+
}).format(cents);
|
|
2741
|
+
case "percent":
|
|
2742
|
+
if (!digits) return "";
|
|
2743
|
+
const percent = parseInt(digits, 10) / 100;
|
|
2744
|
+
return `${percent.toFixed(2)}%`;
|
|
2745
|
+
case "plate":
|
|
2746
|
+
const upper = value.toUpperCase().replace(/[^A-Z0-9]/g, "");
|
|
2747
|
+
if (upper.length <= 3) return upper;
|
|
2748
|
+
if (upper.length <= 7) {
|
|
2749
|
+
return upper.replace(/([A-Z]{3})(\d{0,1})([A-Z0-9]{0,1})(\d{0,2})/, "$1-$2$3$4");
|
|
2750
|
+
}
|
|
2751
|
+
return upper.slice(0, 7).replace(/([A-Z]{3})(\d{0,1})([A-Z0-9]{0,1})(\d{0,2})/, "$1-$2$3$4");
|
|
2752
|
+
case "date":
|
|
2753
|
+
return digits.replace(/(\d{2})(\d)/, "$1/$2").replace(/(\d{2})(\d)/, "$1/$2").slice(0, 10);
|
|
2754
|
+
case "time":
|
|
2755
|
+
return digits.replace(/(\d{2})(\d{0,2})/, "$1:$2").slice(0, 5);
|
|
2756
|
+
case "datetime":
|
|
2757
|
+
const dateTime = digits.replace(/(\d{2})(\d)/, "$1/$2").replace(/(\d{2})(\d)/, "$1/$2").replace(/(\d{4})(\d)/, "$1 $2").replace(/(\d{2})(\d{0,2})$/, "$1:$2");
|
|
2758
|
+
return dateTime.slice(0, 16);
|
|
2759
|
+
default:
|
|
2760
|
+
return value;
|
|
2761
|
+
}
|
|
2762
|
+
}
|
|
2763
|
+
function getMaxLength(mask) {
|
|
2764
|
+
switch (mask) {
|
|
2765
|
+
case "phone":
|
|
2766
|
+
return 15;
|
|
2767
|
+
case "cpf":
|
|
2768
|
+
return 14;
|
|
2769
|
+
case "cnpj":
|
|
2770
|
+
return 18;
|
|
2771
|
+
case "cep":
|
|
2772
|
+
return 9;
|
|
2773
|
+
case "plate":
|
|
2774
|
+
return 8;
|
|
2775
|
+
case "date":
|
|
2776
|
+
return 10;
|
|
2777
|
+
case "time":
|
|
2778
|
+
return 5;
|
|
2779
|
+
case "datetime":
|
|
2780
|
+
return 16;
|
|
2781
|
+
default:
|
|
2782
|
+
return void 0;
|
|
2783
|
+
}
|
|
2784
|
+
}
|
|
2785
|
+
function parseValue(displayValue, mask) {
|
|
2786
|
+
if (!displayValue) return void 0;
|
|
2787
|
+
switch (mask) {
|
|
2788
|
+
case "money":
|
|
2789
|
+
const moneyDigits = displayValue.replace(/\D/g, "");
|
|
2790
|
+
return moneyDigits ? parseInt(moneyDigits, 10) / 100 : void 0;
|
|
2791
|
+
case "percent":
|
|
2792
|
+
const percentDigits = displayValue.replace(/\D/g, "");
|
|
2793
|
+
return percentDigits ? parseInt(percentDigits, 10) / 100 : void 0;
|
|
2794
|
+
default:
|
|
2795
|
+
return displayValue || void 0;
|
|
2796
|
+
}
|
|
2797
|
+
}
|
|
2798
|
+
function FormInput({
|
|
2799
|
+
name,
|
|
2800
|
+
label,
|
|
2801
|
+
description,
|
|
2802
|
+
required,
|
|
2803
|
+
disabled,
|
|
2804
|
+
className,
|
|
2805
|
+
mask,
|
|
2806
|
+
icon,
|
|
2807
|
+
showPasswordToggle = true,
|
|
2808
|
+
inputSize = "default",
|
|
2809
|
+
hideError = false,
|
|
2810
|
+
type = "text",
|
|
2811
|
+
maxLength,
|
|
2812
|
+
...inputProps
|
|
2813
|
+
}) {
|
|
2814
|
+
const form = useFormContext();
|
|
2815
|
+
const fieldState = form.getFieldState(name, form.formState);
|
|
2816
|
+
const error = fieldState.error?.message;
|
|
2817
|
+
const getInputType = React36.useCallback(() => {
|
|
2818
|
+
if (["money", "percent", "phone", "cpf", "cnpj", "cep"].includes(mask || "")) {
|
|
2819
|
+
return "tel";
|
|
2820
|
+
}
|
|
2821
|
+
return type;
|
|
2822
|
+
}, [mask, type]);
|
|
2823
|
+
return /* @__PURE__ */ jsx(FormFieldProvider, { name, children: /* @__PURE__ */ jsx(
|
|
2824
|
+
Controller,
|
|
2825
|
+
{
|
|
2826
|
+
control: form.control,
|
|
2827
|
+
name,
|
|
2828
|
+
render: ({ field }) => {
|
|
2829
|
+
const getDisplayValue = () => {
|
|
2830
|
+
if (field.value === void 0 || field.value === null) return "";
|
|
2831
|
+
if (mask) {
|
|
2832
|
+
return applyMask(String(field.value), mask);
|
|
2833
|
+
}
|
|
2834
|
+
return String(field.value);
|
|
2835
|
+
};
|
|
2836
|
+
const handleChange = (e) => {
|
|
2837
|
+
let newValue = e.target.value;
|
|
2838
|
+
if (mask) {
|
|
2839
|
+
newValue = applyMask(newValue, mask);
|
|
2840
|
+
const parsed = parseValue(newValue, mask);
|
|
2841
|
+
field.onChange(parsed);
|
|
2842
|
+
} else {
|
|
2843
|
+
field.onChange(newValue || void 0);
|
|
2844
|
+
}
|
|
2845
|
+
};
|
|
2846
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", className), children: [
|
|
2847
|
+
/* @__PURE__ */ jsx(
|
|
2848
|
+
Input,
|
|
2849
|
+
{
|
|
2850
|
+
...inputProps,
|
|
2851
|
+
ref: field.ref,
|
|
2852
|
+
name: field.name,
|
|
2853
|
+
value: getDisplayValue(),
|
|
2854
|
+
onChange: handleChange,
|
|
2855
|
+
onBlur: field.onBlur,
|
|
2856
|
+
disabled,
|
|
2857
|
+
type: getInputType(),
|
|
2858
|
+
label,
|
|
2859
|
+
required,
|
|
2860
|
+
error: !!error,
|
|
2861
|
+
icon,
|
|
2862
|
+
inputSize,
|
|
2863
|
+
maxLength: maxLength ?? getMaxLength(mask)
|
|
2864
|
+
}
|
|
2865
|
+
),
|
|
2866
|
+
description && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground px-1", children: description }),
|
|
2867
|
+
!hideError && error && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500 px-1", children: error })
|
|
2868
|
+
] });
|
|
2869
|
+
}
|
|
2870
|
+
}
|
|
2871
|
+
) });
|
|
2872
|
+
}
|
|
2873
|
+
FormInput.displayName = "Form.Input";
|
|
2874
|
+
function FormSelect({
|
|
2875
|
+
name,
|
|
2876
|
+
label,
|
|
2877
|
+
description,
|
|
2878
|
+
required,
|
|
2879
|
+
disabled,
|
|
2880
|
+
className,
|
|
2881
|
+
options,
|
|
2882
|
+
placeholder = "Selecione...",
|
|
2883
|
+
icon,
|
|
2884
|
+
hideError = false,
|
|
2885
|
+
selectSize = "default",
|
|
2886
|
+
emptyText = "Nenhuma op\xE7\xE3o dispon\xEDvel",
|
|
2887
|
+
loading = false
|
|
2888
|
+
}) {
|
|
2889
|
+
const form = useFormContext();
|
|
2890
|
+
const fieldState = form.getFieldState(name, form.formState);
|
|
2891
|
+
const error = fieldState.error?.message;
|
|
2892
|
+
return /* @__PURE__ */ jsx(FormFieldProvider, { name, children: /* @__PURE__ */ jsx(
|
|
2893
|
+
Controller,
|
|
2894
|
+
{
|
|
2895
|
+
control: form.control,
|
|
2896
|
+
name,
|
|
2897
|
+
render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", className), children: [
|
|
2898
|
+
/* @__PURE__ */ jsx(
|
|
2899
|
+
Select,
|
|
2900
|
+
{
|
|
2901
|
+
value: field.value ?? "",
|
|
2902
|
+
onValueChange: (value) => {
|
|
2903
|
+
field.onChange(value || void 0);
|
|
2904
|
+
},
|
|
2905
|
+
disabled: disabled || loading,
|
|
2906
|
+
label,
|
|
2907
|
+
required,
|
|
2908
|
+
error: !!error,
|
|
2909
|
+
icon,
|
|
2910
|
+
selectSize,
|
|
2911
|
+
placeholder,
|
|
2912
|
+
children: loading ? /* @__PURE__ */ jsx(SelectItem, { value: "__loading__", disabled: true, children: "Carregando..." }) : options.length === 0 ? /* @__PURE__ */ jsx(SelectItem, { value: "__empty__", disabled: true, children: emptyText }) : options.map((option) => /* @__PURE__ */ jsx(
|
|
2913
|
+
SelectItem,
|
|
2914
|
+
{
|
|
2915
|
+
value: option.value,
|
|
2916
|
+
disabled: option.disabled,
|
|
2917
|
+
children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
2918
|
+
option.icon && /* @__PURE__ */ jsx(option.icon, { className: "h-4 w-4 text-muted-foreground" }),
|
|
2919
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
2920
|
+
/* @__PURE__ */ jsx("span", { children: option.label }),
|
|
2921
|
+
option.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground ml-2", children: option.description })
|
|
2922
|
+
] })
|
|
2923
|
+
] })
|
|
2924
|
+
},
|
|
2925
|
+
option.value
|
|
2926
|
+
))
|
|
2927
|
+
}
|
|
2928
|
+
),
|
|
2929
|
+
description && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground px-1", children: description }),
|
|
2930
|
+
!hideError && error && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500 px-1", children: error })
|
|
2931
|
+
] })
|
|
2932
|
+
}
|
|
2933
|
+
) });
|
|
2934
|
+
}
|
|
2935
|
+
FormSelect.displayName = "Form.Select";
|
|
2936
|
+
function FormTextarea({
|
|
2937
|
+
name,
|
|
2938
|
+
label,
|
|
2939
|
+
description,
|
|
2940
|
+
required,
|
|
2941
|
+
disabled,
|
|
2942
|
+
className,
|
|
2943
|
+
hideError = false,
|
|
2944
|
+
showCount = false,
|
|
2945
|
+
maxLength,
|
|
2946
|
+
...textareaProps
|
|
2947
|
+
}) {
|
|
2948
|
+
const form = useFormContext();
|
|
2949
|
+
const fieldState = form.getFieldState(name, form.formState);
|
|
2950
|
+
const error = fieldState.error?.message;
|
|
2951
|
+
return /* @__PURE__ */ jsx(FormFieldProvider, { name, children: /* @__PURE__ */ jsx(
|
|
2952
|
+
Controller,
|
|
2953
|
+
{
|
|
2954
|
+
control: form.control,
|
|
2955
|
+
name,
|
|
2956
|
+
render: ({ field }) => {
|
|
2957
|
+
const charCount = field.value?.length ?? 0;
|
|
2958
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", className), children: [
|
|
2959
|
+
/* @__PURE__ */ jsx(
|
|
2960
|
+
Textarea,
|
|
2961
|
+
{
|
|
2962
|
+
...textareaProps,
|
|
2963
|
+
ref: field.ref,
|
|
2964
|
+
name: field.name,
|
|
2965
|
+
value: field.value ?? "",
|
|
2966
|
+
onChange: (e) => field.onChange(e.target.value || void 0),
|
|
2967
|
+
onBlur: field.onBlur,
|
|
2968
|
+
disabled,
|
|
2969
|
+
label,
|
|
2970
|
+
required,
|
|
2971
|
+
error: !!error,
|
|
2972
|
+
maxLength
|
|
2973
|
+
}
|
|
2974
|
+
),
|
|
2975
|
+
/* @__PURE__ */ jsxs("div", { className: "flex justify-between px-1", children: [
|
|
2976
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
2977
|
+
description && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: description }),
|
|
2978
|
+
!hideError && error && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
|
|
2979
|
+
] }),
|
|
2980
|
+
showCount && maxLength && /* @__PURE__ */ jsxs(
|
|
2981
|
+
"p",
|
|
2982
|
+
{
|
|
2983
|
+
className: cn(
|
|
2984
|
+
"text-xs",
|
|
2985
|
+
charCount > maxLength ? "text-red-500" : "text-muted-foreground"
|
|
2986
|
+
),
|
|
2987
|
+
children: [
|
|
2988
|
+
charCount,
|
|
2989
|
+
"/",
|
|
2990
|
+
maxLength
|
|
2991
|
+
]
|
|
2992
|
+
}
|
|
2993
|
+
)
|
|
2994
|
+
] })
|
|
2995
|
+
] });
|
|
2996
|
+
}
|
|
2997
|
+
}
|
|
2998
|
+
) });
|
|
2999
|
+
}
|
|
3000
|
+
FormTextarea.displayName = "Form.Textarea";
|
|
3001
|
+
function FormCheckbox({
|
|
3002
|
+
name,
|
|
3003
|
+
label,
|
|
3004
|
+
description,
|
|
3005
|
+
required,
|
|
3006
|
+
disabled,
|
|
3007
|
+
className,
|
|
3008
|
+
hideError = false
|
|
3009
|
+
}) {
|
|
3010
|
+
const form = useFormContext();
|
|
3011
|
+
const fieldState = form.getFieldState(name, form.formState);
|
|
3012
|
+
const error = fieldState.error?.message;
|
|
3013
|
+
const id = React36.useId();
|
|
3014
|
+
return /* @__PURE__ */ jsx(FormFieldProvider, { name, children: /* @__PURE__ */ jsx(
|
|
3015
|
+
Controller,
|
|
3016
|
+
{
|
|
3017
|
+
control: form.control,
|
|
3018
|
+
name,
|
|
3019
|
+
render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", className), children: [
|
|
3020
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
|
|
3021
|
+
/* @__PURE__ */ jsx(
|
|
3022
|
+
Checkbox,
|
|
3023
|
+
{
|
|
3024
|
+
id,
|
|
3025
|
+
ref: field.ref,
|
|
3026
|
+
checked: field.value ?? false,
|
|
3027
|
+
onCheckedChange: (checked) => field.onChange(checked),
|
|
3028
|
+
onBlur: field.onBlur,
|
|
3029
|
+
disabled
|
|
3030
|
+
}
|
|
3031
|
+
),
|
|
3032
|
+
(label || description) && /* @__PURE__ */ jsxs("div", { className: "grid gap-0.5 leading-none", children: [
|
|
3033
|
+
label && /* @__PURE__ */ jsxs(
|
|
3034
|
+
"label",
|
|
3035
|
+
{
|
|
3036
|
+
htmlFor: id,
|
|
3037
|
+
className: cn(
|
|
3038
|
+
"text-sm font-medium leading-none cursor-pointer",
|
|
3039
|
+
disabled && "cursor-not-allowed opacity-50"
|
|
3040
|
+
),
|
|
3041
|
+
children: [
|
|
3042
|
+
label,
|
|
3043
|
+
required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-0.5", children: "*" })
|
|
3044
|
+
]
|
|
3045
|
+
}
|
|
3046
|
+
),
|
|
3047
|
+
description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: description })
|
|
3048
|
+
] })
|
|
3049
|
+
] }),
|
|
3050
|
+
!hideError && error && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500 pl-8", children: error })
|
|
3051
|
+
] })
|
|
3052
|
+
}
|
|
3053
|
+
) });
|
|
3054
|
+
}
|
|
3055
|
+
FormCheckbox.displayName = "Form.Checkbox";
|
|
3056
|
+
function FormSwitch({
|
|
3057
|
+
name,
|
|
3058
|
+
label,
|
|
3059
|
+
description,
|
|
3060
|
+
required,
|
|
3061
|
+
disabled,
|
|
3062
|
+
className,
|
|
3063
|
+
hideError = false
|
|
3064
|
+
}) {
|
|
3065
|
+
const form = useFormContext();
|
|
3066
|
+
const fieldState = form.getFieldState(name, form.formState);
|
|
3067
|
+
const error = fieldState.error?.message;
|
|
3068
|
+
const id = React36.useId();
|
|
3069
|
+
return /* @__PURE__ */ jsx(FormFieldProvider, { name, children: /* @__PURE__ */ jsx(
|
|
3070
|
+
Controller,
|
|
3071
|
+
{
|
|
3072
|
+
control: form.control,
|
|
3073
|
+
name,
|
|
3074
|
+
render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", className), children: [
|
|
3075
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
|
|
3076
|
+
(label || description) && /* @__PURE__ */ jsxs("div", { className: "grid gap-0.5 leading-none", children: [
|
|
3077
|
+
label && /* @__PURE__ */ jsxs(
|
|
3078
|
+
"label",
|
|
3079
|
+
{
|
|
3080
|
+
htmlFor: id,
|
|
3081
|
+
className: cn(
|
|
3082
|
+
"text-sm font-medium leading-none cursor-pointer",
|
|
3083
|
+
disabled && "cursor-not-allowed opacity-50"
|
|
3084
|
+
),
|
|
3085
|
+
children: [
|
|
3086
|
+
label,
|
|
3087
|
+
required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-0.5", children: "*" })
|
|
3088
|
+
]
|
|
3089
|
+
}
|
|
3090
|
+
),
|
|
3091
|
+
description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: description })
|
|
3092
|
+
] }),
|
|
3093
|
+
/* @__PURE__ */ jsx(
|
|
3094
|
+
Switch,
|
|
3095
|
+
{
|
|
3096
|
+
id,
|
|
3097
|
+
ref: field.ref,
|
|
3098
|
+
checked: field.value ?? false,
|
|
3099
|
+
onCheckedChange: (checked) => field.onChange(checked),
|
|
3100
|
+
onBlur: field.onBlur,
|
|
3101
|
+
disabled
|
|
3102
|
+
}
|
|
3103
|
+
)
|
|
3104
|
+
] }),
|
|
3105
|
+
!hideError && error && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
|
|
3106
|
+
] })
|
|
3107
|
+
}
|
|
3108
|
+
) });
|
|
3109
|
+
}
|
|
3110
|
+
FormSwitch.displayName = "Form.Switch";
|
|
3111
|
+
function FormRadioGroup({
|
|
3112
|
+
name,
|
|
3113
|
+
label,
|
|
3114
|
+
description,
|
|
3115
|
+
required,
|
|
3116
|
+
disabled,
|
|
3117
|
+
className,
|
|
3118
|
+
options,
|
|
3119
|
+
orientation = "vertical",
|
|
3120
|
+
hideError = false
|
|
3121
|
+
}) {
|
|
3122
|
+
const form = useFormContext();
|
|
3123
|
+
const fieldState = form.getFieldState(name, form.formState);
|
|
3124
|
+
const error = fieldState.error?.message;
|
|
3125
|
+
return /* @__PURE__ */ jsx(FormFieldProvider, { name, children: /* @__PURE__ */ jsx(
|
|
3126
|
+
Controller,
|
|
3127
|
+
{
|
|
3128
|
+
control: form.control,
|
|
3129
|
+
name,
|
|
3130
|
+
render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
|
|
3131
|
+
label && /* @__PURE__ */ jsxs("label", { className: "text-sm font-medium", children: [
|
|
3132
|
+
label,
|
|
3133
|
+
required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-0.5", children: "*" })
|
|
3134
|
+
] }),
|
|
3135
|
+
description && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: description }),
|
|
3136
|
+
/* @__PURE__ */ jsx(
|
|
3137
|
+
RadioGroupPrimitive.Root,
|
|
3138
|
+
{
|
|
3139
|
+
ref: field.ref,
|
|
3140
|
+
value: field.value,
|
|
3141
|
+
onValueChange: (value) => field.onChange(value || void 0),
|
|
3142
|
+
disabled,
|
|
3143
|
+
className: cn(
|
|
3144
|
+
"grid gap-2",
|
|
3145
|
+
orientation === "horizontal" && "flex flex-wrap gap-4"
|
|
3146
|
+
),
|
|
3147
|
+
children: options.map((option) => {
|
|
3148
|
+
const optionId = `${name}-${option.value}`;
|
|
3149
|
+
const isSelected = field.value === option.value;
|
|
3150
|
+
return /* @__PURE__ */ jsxs(
|
|
3151
|
+
"div",
|
|
3152
|
+
{
|
|
3153
|
+
className: cn(
|
|
3154
|
+
"flex items-center gap-3 border-2 py-2 px-4 rounded-lg transition-colors cursor-pointer",
|
|
3155
|
+
isSelected ? "border-primary bg-primary/5" : "border-border hover:border-muted-foreground/50",
|
|
3156
|
+
option.disabled && "opacity-50 cursor-not-allowed"
|
|
3157
|
+
),
|
|
3158
|
+
onClick: () => {
|
|
3159
|
+
if (!option.disabled && !disabled) {
|
|
3160
|
+
field.onChange(option.value);
|
|
3161
|
+
}
|
|
3162
|
+
},
|
|
3163
|
+
children: [
|
|
3164
|
+
/* @__PURE__ */ jsx(
|
|
3165
|
+
RadioGroupPrimitive.Item,
|
|
3166
|
+
{
|
|
3167
|
+
id: optionId,
|
|
3168
|
+
value: option.value,
|
|
3169
|
+
disabled: option.disabled,
|
|
3170
|
+
className: cn(
|
|
3171
|
+
"aspect-square h-4 w-4 rounded-full border border-primary text-primary",
|
|
3172
|
+
"ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
3173
|
+
"disabled:cursor-not-allowed disabled:opacity-50"
|
|
3174
|
+
),
|
|
3175
|
+
children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
|
|
3176
|
+
}
|
|
3177
|
+
),
|
|
3178
|
+
/* @__PURE__ */ jsxs("div", { className: "grid gap-0.5 leading-none", children: [
|
|
3179
|
+
/* @__PURE__ */ jsx(
|
|
3180
|
+
"label",
|
|
3181
|
+
{
|
|
3182
|
+
htmlFor: optionId,
|
|
3183
|
+
className: cn(
|
|
3184
|
+
"text-sm font-medium leading-none cursor-pointer",
|
|
3185
|
+
isSelected && "text-primary",
|
|
3186
|
+
option.disabled && "cursor-not-allowed"
|
|
3187
|
+
),
|
|
3188
|
+
children: option.label
|
|
3189
|
+
}
|
|
3190
|
+
),
|
|
3191
|
+
option.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: option.description })
|
|
3192
|
+
] })
|
|
3193
|
+
]
|
|
3194
|
+
},
|
|
3195
|
+
option.value
|
|
3196
|
+
);
|
|
3197
|
+
})
|
|
3198
|
+
}
|
|
3199
|
+
),
|
|
3200
|
+
!hideError && error && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
|
|
3201
|
+
] })
|
|
3202
|
+
}
|
|
3203
|
+
) });
|
|
3204
|
+
}
|
|
3205
|
+
FormRadioGroup.displayName = "Form.RadioGroup";
|
|
3206
|
+
var FormLabel = React36.forwardRef(
|
|
3207
|
+
({ className, required, children, ...props }, ref) => {
|
|
3208
|
+
const fieldContext = useFormFieldContextOptional();
|
|
3209
|
+
return /* @__PURE__ */ jsxs(
|
|
3210
|
+
"label",
|
|
3211
|
+
{
|
|
3212
|
+
ref,
|
|
3213
|
+
htmlFor: fieldContext?.id,
|
|
3214
|
+
className: cn(
|
|
3215
|
+
"text-sm font-medium leading-none",
|
|
3216
|
+
fieldContext?.error && "text-red-500",
|
|
3217
|
+
className
|
|
3218
|
+
),
|
|
3219
|
+
...props,
|
|
3220
|
+
children: [
|
|
3221
|
+
children,
|
|
3222
|
+
(required || fieldContext?.isRequired) && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-0.5", children: "*" })
|
|
3223
|
+
]
|
|
3224
|
+
}
|
|
3225
|
+
);
|
|
3226
|
+
}
|
|
3227
|
+
);
|
|
3228
|
+
FormLabel.displayName = "Form.Label";
|
|
3229
|
+
var FormDescription = React36.forwardRef(({ className, ...props }, ref) => {
|
|
3230
|
+
const fieldContext = useFormFieldContextOptional();
|
|
3231
|
+
if (fieldContext?.error) {
|
|
3232
|
+
return null;
|
|
3233
|
+
}
|
|
3234
|
+
return /* @__PURE__ */ jsx(
|
|
3235
|
+
"p",
|
|
3236
|
+
{
|
|
3237
|
+
ref,
|
|
3238
|
+
className: cn("text-xs text-muted-foreground", className),
|
|
3239
|
+
...props
|
|
3240
|
+
}
|
|
3241
|
+
);
|
|
3242
|
+
});
|
|
3243
|
+
FormDescription.displayName = "Form.Description";
|
|
3244
|
+
var FormError = React36.forwardRef(
|
|
3245
|
+
({ className, message, children, ...props }, ref) => {
|
|
3246
|
+
const fieldContext = useFormFieldContextOptional();
|
|
3247
|
+
const errorMessage = message ?? fieldContext?.error;
|
|
3248
|
+
if (!errorMessage && !children) {
|
|
3249
|
+
return null;
|
|
3250
|
+
}
|
|
3251
|
+
return /* @__PURE__ */ jsx(
|
|
3252
|
+
"p",
|
|
3253
|
+
{
|
|
3254
|
+
ref,
|
|
3255
|
+
className: cn("text-xs text-red-500", className),
|
|
3256
|
+
...props,
|
|
3257
|
+
children: children || errorMessage
|
|
3258
|
+
}
|
|
3259
|
+
);
|
|
3260
|
+
}
|
|
3261
|
+
);
|
|
3262
|
+
FormError.displayName = "Form.Error";
|
|
3263
|
+
var FormFieldWrapper = React36.forwardRef(({ className, label, description, required, error, children, ...props }, ref) => {
|
|
3264
|
+
return /* @__PURE__ */ jsxs("div", { ref, className: cn("space-y-1", className), ...props, children: [
|
|
3265
|
+
label && /* @__PURE__ */ jsx(FormLabel, { required, children: label }),
|
|
3266
|
+
children,
|
|
3267
|
+
description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
|
|
3268
|
+
error && /* @__PURE__ */ jsx(FormError, { message: error })
|
|
3269
|
+
] });
|
|
3270
|
+
});
|
|
3271
|
+
FormFieldWrapper.displayName = "Form.FieldWrapper";
|
|
3272
|
+
function FormRoot({
|
|
3273
|
+
form,
|
|
3274
|
+
onSubmit,
|
|
3275
|
+
onError,
|
|
3276
|
+
children,
|
|
3277
|
+
className,
|
|
3278
|
+
...props
|
|
3279
|
+
}) {
|
|
3280
|
+
return /* @__PURE__ */ jsx(FormProvider, { form, children: /* @__PURE__ */ jsx(
|
|
3281
|
+
"form",
|
|
3282
|
+
{
|
|
3283
|
+
onSubmit: form.handleSubmit(onSubmit, onError),
|
|
3284
|
+
className: cn("space-y-4", className),
|
|
3285
|
+
...props,
|
|
3286
|
+
children
|
|
3287
|
+
}
|
|
3288
|
+
) });
|
|
3289
|
+
}
|
|
3290
|
+
FormRoot.displayName = "Form";
|
|
3291
|
+
var Form = Object.assign(FormRoot, {
|
|
3292
|
+
// Campos com auto-bind
|
|
3293
|
+
Input: FormInput,
|
|
3294
|
+
Select: FormSelect,
|
|
3295
|
+
Textarea: FormTextarea,
|
|
3296
|
+
Checkbox: FormCheckbox,
|
|
3297
|
+
Switch: FormSwitch,
|
|
3298
|
+
RadioGroup: FormRadioGroup,
|
|
3299
|
+
// Partes auxiliares
|
|
3300
|
+
Label: FormLabel,
|
|
3301
|
+
Description: FormDescription,
|
|
3302
|
+
Error: FormError,
|
|
3303
|
+
FieldWrapper: FormFieldWrapper,
|
|
3304
|
+
Field: FormFieldProvider
|
|
3305
|
+
});
|
|
3306
|
+
var AuthLayoutContext = React36.createContext({
|
|
3307
|
+
imagePosition: "left"
|
|
3308
|
+
});
|
|
3309
|
+
function AuthLayoutRoot({ children, className }) {
|
|
3310
|
+
const [imagePosition, setImagePosition] = React36.useState("left");
|
|
3311
|
+
React36.useEffect(() => {
|
|
3312
|
+
React36.Children.forEach(children, (child) => {
|
|
3313
|
+
if (React36.isValidElement(child) && child.type === AuthLayoutImage) {
|
|
3314
|
+
setImagePosition(child.props.position || "left");
|
|
3315
|
+
}
|
|
3316
|
+
});
|
|
3317
|
+
}, [children]);
|
|
3318
|
+
return /* @__PURE__ */ jsx(AuthLayoutContext.Provider, { value: { imagePosition }, children: /* @__PURE__ */ jsx(
|
|
3319
|
+
"div",
|
|
3320
|
+
{
|
|
3321
|
+
className: cn(
|
|
3322
|
+
"min-h-screen flex flex-col xl:flex-row max-xl:justify-center",
|
|
3323
|
+
imagePosition === "right" && "xl:flex-row-reverse",
|
|
3324
|
+
className
|
|
3325
|
+
),
|
|
3326
|
+
children
|
|
3327
|
+
}
|
|
3328
|
+
) });
|
|
3329
|
+
}
|
|
3330
|
+
function AuthLayoutImage({
|
|
3331
|
+
src,
|
|
3332
|
+
alt,
|
|
3333
|
+
position: _position = "left",
|
|
3334
|
+
className,
|
|
3335
|
+
priority = true
|
|
3336
|
+
}) {
|
|
3337
|
+
return /* @__PURE__ */ jsx(
|
|
3338
|
+
"div",
|
|
3339
|
+
{
|
|
3340
|
+
className: cn(
|
|
3341
|
+
"hidden xl:block relative w-full xl:w-3/6 h-64 xl:h-screen overflow-hidden",
|
|
3342
|
+
className
|
|
3343
|
+
),
|
|
3344
|
+
children: /* @__PURE__ */ jsx(
|
|
3345
|
+
"img",
|
|
3346
|
+
{
|
|
3347
|
+
src,
|
|
3348
|
+
alt,
|
|
3349
|
+
className: "absolute inset-0 w-full h-full object-cover object-top",
|
|
3350
|
+
loading: priority ? "eager" : "lazy"
|
|
3351
|
+
}
|
|
3352
|
+
)
|
|
3353
|
+
}
|
|
3354
|
+
);
|
|
3355
|
+
}
|
|
3356
|
+
function AuthLayoutContent({
|
|
3357
|
+
children,
|
|
3358
|
+
className,
|
|
3359
|
+
maxWidth = "md"
|
|
3360
|
+
}) {
|
|
3361
|
+
const maxWidthClasses = {
|
|
3362
|
+
sm: "max-w-sm",
|
|
3363
|
+
md: "max-w-md",
|
|
3364
|
+
lg: "max-w-lg"
|
|
3365
|
+
};
|
|
3366
|
+
return /* @__PURE__ */ jsx(
|
|
3367
|
+
"div",
|
|
3368
|
+
{
|
|
3369
|
+
className: cn(
|
|
3370
|
+
"w-full lg:w-3/6 flex items-center justify-center p-6 pt-20 sm:pt-0 lg:p-12 bg-background mx-auto",
|
|
3371
|
+
className
|
|
3372
|
+
),
|
|
3373
|
+
children: /* @__PURE__ */ jsx("div", { className: cn("w-full space-y-8", maxWidthClasses[maxWidth]), children })
|
|
3374
|
+
}
|
|
3375
|
+
);
|
|
3376
|
+
}
|
|
3377
|
+
function AuthLayoutHeader({
|
|
3378
|
+
children,
|
|
3379
|
+
className,
|
|
3380
|
+
logo,
|
|
3381
|
+
title,
|
|
3382
|
+
description,
|
|
3383
|
+
centered = true
|
|
3384
|
+
}) {
|
|
3385
|
+
if (children) {
|
|
3386
|
+
return /* @__PURE__ */ jsx("div", { className: cn("space-y-2", centered && "text-center", className), children });
|
|
3387
|
+
}
|
|
3388
|
+
return /* @__PURE__ */ jsxs(
|
|
3389
|
+
"div",
|
|
3390
|
+
{
|
|
3391
|
+
className: cn(
|
|
3392
|
+
"flex flex-col gap-2",
|
|
3393
|
+
centered && "items-center text-center",
|
|
3394
|
+
className
|
|
3395
|
+
),
|
|
3396
|
+
children: [
|
|
3397
|
+
logo && /* @__PURE__ */ jsx("div", { className: "mb-2", children: logo }),
|
|
3398
|
+
title && /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold", children: title }),
|
|
3399
|
+
description && /* @__PURE__ */ jsx("p", { className: "text-balance text-sm text-muted-foreground", children: description })
|
|
3400
|
+
]
|
|
3401
|
+
}
|
|
3402
|
+
);
|
|
3403
|
+
}
|
|
3404
|
+
function AuthLayoutBody({ children, className }) {
|
|
3405
|
+
return /* @__PURE__ */ jsx("div", { className: cn("space-y-6", className), children });
|
|
3406
|
+
}
|
|
3407
|
+
function AuthLayoutFooter({ children, className }) {
|
|
3408
|
+
return /* @__PURE__ */ jsx("div", { className: cn("text-center text-sm text-muted-foreground", className), children });
|
|
3409
|
+
}
|
|
3410
|
+
function AuthLayoutLink({ children, className, ...props }) {
|
|
3411
|
+
return /* @__PURE__ */ jsx(
|
|
3412
|
+
"a",
|
|
3413
|
+
{
|
|
3414
|
+
className: cn(
|
|
3415
|
+
"text-sm text-primary hover:underline cursor-pointer",
|
|
3416
|
+
className
|
|
3417
|
+
),
|
|
3418
|
+
...props,
|
|
3419
|
+
children
|
|
3420
|
+
}
|
|
3421
|
+
);
|
|
3422
|
+
}
|
|
3423
|
+
function AuthLayoutDivider({ text = "ou", className }) {
|
|
3424
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
|
|
3425
|
+
/* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx("span", { className: "w-full border-t" }) }),
|
|
3426
|
+
/* @__PURE__ */ jsx("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ jsx("span", { className: "bg-background px-2 text-muted-foreground", children: text }) })
|
|
3427
|
+
] });
|
|
3428
|
+
}
|
|
3429
|
+
AuthLayoutRoot.displayName = "AuthLayout";
|
|
3430
|
+
AuthLayoutImage.displayName = "AuthLayout.Image";
|
|
3431
|
+
AuthLayoutContent.displayName = "AuthLayout.Content";
|
|
3432
|
+
AuthLayoutHeader.displayName = "AuthLayout.Header";
|
|
3433
|
+
AuthLayoutBody.displayName = "AuthLayout.Body";
|
|
3434
|
+
AuthLayoutFooter.displayName = "AuthLayout.Footer";
|
|
3435
|
+
AuthLayoutLink.displayName = "AuthLayout.Link";
|
|
3436
|
+
AuthLayoutDivider.displayName = "AuthLayout.Divider";
|
|
3437
|
+
var AuthLayout = Object.assign(AuthLayoutRoot, {
|
|
3438
|
+
Image: AuthLayoutImage,
|
|
3439
|
+
Content: AuthLayoutContent,
|
|
3440
|
+
Header: AuthLayoutHeader,
|
|
3441
|
+
Body: AuthLayoutBody,
|
|
3442
|
+
Footer: AuthLayoutFooter,
|
|
3443
|
+
Link: AuthLayoutLink,
|
|
3444
|
+
Divider: AuthLayoutDivider
|
|
3445
|
+
});
|
|
3446
|
+
var TabsContext = React36.createContext(null);
|
|
3447
|
+
function SelectionLayoutRoot({ children, className }) {
|
|
3448
|
+
return /* @__PURE__ */ jsx("div", { className: cn("min-h-screen bg-muted/30 flex flex-col lg:flex-row", className), children });
|
|
3449
|
+
}
|
|
3450
|
+
function SelectionLayoutSidebar({ children, className }) {
|
|
3451
|
+
return /* @__PURE__ */ jsx(
|
|
3452
|
+
"div",
|
|
3453
|
+
{
|
|
3454
|
+
className: cn(
|
|
3455
|
+
"lg:w-2/5 bg-gradient-to-br from-primary/90 to-primary p-6 lg:p-12",
|
|
3456
|
+
"flex flex-col justify-between text-white relative overflow-hidden",
|
|
3457
|
+
"min-h-[50vh] lg:min-h-screen",
|
|
3458
|
+
className
|
|
3459
|
+
),
|
|
3460
|
+
children
|
|
3461
|
+
}
|
|
3462
|
+
);
|
|
3463
|
+
}
|
|
3464
|
+
function SelectionLayoutLogo({ children, className }) {
|
|
3465
|
+
return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-3 mb-8 lg:mb-16", className), children });
|
|
3466
|
+
}
|
|
3467
|
+
function SelectionLayoutHeadline({
|
|
3468
|
+
title,
|
|
3469
|
+
bullets,
|
|
3470
|
+
className
|
|
3471
|
+
}) {
|
|
3472
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4 lg:space-y-6 flex-1", className), children: [
|
|
3473
|
+
/* @__PURE__ */ jsx("h1", { className: "text-3xl lg:text-5xl font-bold leading-tight", children: title }),
|
|
3474
|
+
bullets && bullets.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-2 text-white/80", children: bullets.map((bullet, index) => /* @__PURE__ */ jsx("p", { className: "text-base lg:text-lg", children: bullet }, index)) })
|
|
3475
|
+
] });
|
|
3476
|
+
}
|
|
3477
|
+
function SelectionLayoutStats({ label, value, className }) {
|
|
3478
|
+
return /* @__PURE__ */ jsx("div", { className: cn("bg-white/10 rounded-lg p-4 backdrop-blur-sm", className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm lg:text-base", children: [
|
|
3479
|
+
/* @__PURE__ */ jsx("span", { children: label }),
|
|
3480
|
+
/* @__PURE__ */ jsx("span", { className: "font-bold", children: value })
|
|
3481
|
+
] }) });
|
|
3482
|
+
}
|
|
3483
|
+
function SelectionLayoutMain({ children, className }) {
|
|
3484
|
+
return /* @__PURE__ */ jsx(
|
|
3485
|
+
"div",
|
|
3486
|
+
{
|
|
3487
|
+
className: cn(
|
|
3488
|
+
"lg:w-3/5 bg-background flex flex-col min-h-[50vh] lg:min-h-screen",
|
|
3489
|
+
className
|
|
3490
|
+
),
|
|
3491
|
+
children
|
|
3492
|
+
}
|
|
3493
|
+
);
|
|
3494
|
+
}
|
|
3495
|
+
function SelectionLayoutHeader({
|
|
3496
|
+
title,
|
|
3497
|
+
subtitle,
|
|
3498
|
+
action,
|
|
3499
|
+
className
|
|
3500
|
+
}) {
|
|
3501
|
+
return /* @__PURE__ */ jsxs(
|
|
3502
|
+
"div",
|
|
3503
|
+
{
|
|
3504
|
+
className: cn(
|
|
3505
|
+
"flex justify-between items-center p-6 lg:p-8 border-b border-border",
|
|
3506
|
+
className
|
|
3507
|
+
),
|
|
3508
|
+
children: [
|
|
3509
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
3510
|
+
/* @__PURE__ */ jsx("h2", { className: "text-xl lg:text-2xl font-bold", children: title }),
|
|
3511
|
+
subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: subtitle })
|
|
3512
|
+
] }),
|
|
3513
|
+
action && /* @__PURE__ */ jsx("div", { children: action })
|
|
3514
|
+
]
|
|
3515
|
+
}
|
|
3516
|
+
);
|
|
3517
|
+
}
|
|
3518
|
+
function SelectionLayoutSearch({
|
|
3519
|
+
value,
|
|
3520
|
+
onChange,
|
|
3521
|
+
placeholder = "Buscar...",
|
|
3522
|
+
className
|
|
3523
|
+
}) {
|
|
3524
|
+
return /* @__PURE__ */ jsx("div", { className: cn("p-6 lg:p-8 pb-4 lg:pb-6", className), children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
3525
|
+
/* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" }),
|
|
3526
|
+
/* @__PURE__ */ jsx(
|
|
3527
|
+
"input",
|
|
3528
|
+
{
|
|
3529
|
+
type: "text",
|
|
3530
|
+
placeholder,
|
|
3531
|
+
value,
|
|
3532
|
+
onChange: (e) => onChange(e.target.value),
|
|
3533
|
+
className: cn(
|
|
3534
|
+
"w-full pl-10 h-11 rounded-md border border-input bg-muted/50",
|
|
3535
|
+
"focus:bg-background focus:outline-none focus:ring-2 focus:ring-ring",
|
|
3536
|
+
"text-sm placeholder:text-muted-foreground"
|
|
3537
|
+
)
|
|
3538
|
+
}
|
|
3539
|
+
)
|
|
3540
|
+
] }) });
|
|
3541
|
+
}
|
|
3542
|
+
function SelectionLayoutTabs({
|
|
3543
|
+
children,
|
|
3544
|
+
value,
|
|
3545
|
+
onValueChange,
|
|
3546
|
+
className
|
|
3547
|
+
}) {
|
|
3548
|
+
return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { value, onValueChange }, children: /* @__PURE__ */ jsx("div", { className: cn("px-6 lg:px-8", className), children: /* @__PURE__ */ jsx("div", { className: "flex space-x-1 bg-muted p-1 rounded-lg", children }) }) });
|
|
3549
|
+
}
|
|
3550
|
+
function SelectionLayoutTab({
|
|
3551
|
+
value,
|
|
3552
|
+
label,
|
|
3553
|
+
icon: Icon2,
|
|
3554
|
+
badge,
|
|
3555
|
+
className
|
|
3556
|
+
}) {
|
|
3557
|
+
const context = React36.useContext(TabsContext);
|
|
3558
|
+
if (!context) {
|
|
3559
|
+
throw new Error("SelectionLayout.Tab must be used within SelectionLayout.Tabs");
|
|
3560
|
+
}
|
|
3561
|
+
const isActive = context.value === value;
|
|
3562
|
+
return /* @__PURE__ */ jsxs(
|
|
3563
|
+
"button",
|
|
3564
|
+
{
|
|
3565
|
+
onClick: () => context.onValueChange(value),
|
|
3566
|
+
className: cn(
|
|
3567
|
+
"flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all",
|
|
3568
|
+
isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground",
|
|
3569
|
+
className
|
|
3570
|
+
),
|
|
3571
|
+
children: [
|
|
3572
|
+
Icon2 && /* @__PURE__ */ jsx(Icon2, { className: "w-4 h-4" }),
|
|
3573
|
+
/* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: label }),
|
|
3574
|
+
badge !== void 0 && /* @__PURE__ */ jsx(
|
|
3575
|
+
"span",
|
|
3576
|
+
{
|
|
3577
|
+
className: cn(
|
|
3578
|
+
"text-xs px-2 py-0.5 rounded-full",
|
|
3579
|
+
isActive ? "bg-primary/10 text-primary" : "bg-muted-foreground/20"
|
|
3580
|
+
),
|
|
3581
|
+
children: badge
|
|
3582
|
+
}
|
|
3583
|
+
)
|
|
3584
|
+
]
|
|
3585
|
+
}
|
|
3586
|
+
);
|
|
3587
|
+
}
|
|
3588
|
+
function SelectionLayoutList({ children, className }) {
|
|
3589
|
+
return /* @__PURE__ */ jsx("div", { className: cn("flex-1 p-6 lg:p-8 pt-6", className), children: /* @__PURE__ */ jsx(
|
|
3590
|
+
"div",
|
|
3591
|
+
{
|
|
3592
|
+
className: cn(
|
|
3593
|
+
"space-y-3 max-h-[50vh] lg:max-h-[55vh] overflow-y-auto pr-2",
|
|
3594
|
+
"scrollbar-thin scrollbar-thumb-muted-foreground/20 scrollbar-track-transparent"
|
|
3595
|
+
),
|
|
3596
|
+
children
|
|
3597
|
+
}
|
|
3598
|
+
) });
|
|
3599
|
+
}
|
|
3600
|
+
function SelectionLayoutCard({
|
|
3601
|
+
children,
|
|
3602
|
+
className,
|
|
3603
|
+
onClick,
|
|
3604
|
+
icon,
|
|
3605
|
+
title,
|
|
3606
|
+
description,
|
|
3607
|
+
badge,
|
|
3608
|
+
favorite,
|
|
3609
|
+
onFavoriteClick
|
|
3610
|
+
}) {
|
|
3611
|
+
const isIconComponent = typeof icon === "function" || icon && typeof icon === "object" && "$$typeof" in icon;
|
|
3612
|
+
const IconComponent = isIconComponent ? icon : null;
|
|
3613
|
+
return /* @__PURE__ */ jsx(
|
|
3614
|
+
"div",
|
|
3615
|
+
{
|
|
3616
|
+
onClick,
|
|
3617
|
+
className: cn(
|
|
3618
|
+
"cursor-pointer transition-all duration-200 rounded-lg border-2 bg-card",
|
|
3619
|
+
"hover:shadow-lg hover:border-primary/20 active:scale-[0.98] group",
|
|
3620
|
+
className
|
|
3621
|
+
),
|
|
3622
|
+
children: /* @__PURE__ */ jsx("div", { className: "p-4 lg:p-5", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
|
|
3623
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 lg:gap-4 flex-1 min-w-0", children: [
|
|
3624
|
+
icon && /* @__PURE__ */ jsx("div", { className: "w-10 h-10 lg:w-12 lg:h-12 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0", children: IconComponent ? /* @__PURE__ */ jsx(IconComponent, { className: "w-5 h-5 lg:w-6 lg:h-6 text-primary" }) : icon }),
|
|
3625
|
+
/* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
|
|
3626
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
3627
|
+
/* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm lg:text-base truncate", children: title }),
|
|
3628
|
+
favorite && /* @__PURE__ */ jsx(Star, { className: "w-4 h-4 text-yellow-500 fill-current flex-shrink-0" }),
|
|
3629
|
+
badge
|
|
3630
|
+
] }),
|
|
3631
|
+
description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs lg:text-sm truncate", children: description }),
|
|
3632
|
+
children
|
|
3633
|
+
] })
|
|
3634
|
+
] }),
|
|
3635
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-shrink-0 ml-2", children: [
|
|
3636
|
+
onFavoriteClick && /* @__PURE__ */ jsx(
|
|
3637
|
+
"button",
|
|
3638
|
+
{
|
|
3639
|
+
onClick: (e) => {
|
|
3640
|
+
e.stopPropagation();
|
|
3641
|
+
onFavoriteClick();
|
|
3642
|
+
},
|
|
3643
|
+
className: "p-2 hover:bg-muted rounded-md transition-colors",
|
|
3644
|
+
children: /* @__PURE__ */ jsx(
|
|
3645
|
+
Star,
|
|
3646
|
+
{
|
|
3647
|
+
className: cn(
|
|
3648
|
+
"w-4 h-4",
|
|
3649
|
+
favorite ? "text-yellow-500 fill-current" : "text-muted-foreground"
|
|
3650
|
+
)
|
|
3651
|
+
}
|
|
3652
|
+
)
|
|
3653
|
+
}
|
|
3654
|
+
),
|
|
3655
|
+
/* @__PURE__ */ jsx(ArrowRight, { className: "w-5 h-5 text-muted-foreground group-hover:text-foreground transition-colors" })
|
|
3656
|
+
] })
|
|
3657
|
+
] }) })
|
|
3658
|
+
}
|
|
3659
|
+
);
|
|
3660
|
+
}
|
|
3661
|
+
function SelectionLayoutEmpty({
|
|
3662
|
+
icon: Icon2 = Building2,
|
|
3663
|
+
title,
|
|
3664
|
+
description,
|
|
3665
|
+
action,
|
|
3666
|
+
className
|
|
3667
|
+
}) {
|
|
3668
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("text-center py-12", className), children: [
|
|
3669
|
+
/* @__PURE__ */ jsx(Icon2, { className: "w-12 h-12 text-muted-foreground/50 mx-auto mb-4" }),
|
|
3670
|
+
/* @__PURE__ */ jsx("h3", { className: "text-lg font-medium mb-2", children: title }),
|
|
3671
|
+
description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-4", children: description }),
|
|
3672
|
+
action
|
|
3673
|
+
] });
|
|
3674
|
+
}
|
|
3675
|
+
SelectionLayoutRoot.displayName = "SelectionLayout";
|
|
3676
|
+
SelectionLayoutSidebar.displayName = "SelectionLayout.Sidebar";
|
|
3677
|
+
SelectionLayoutLogo.displayName = "SelectionLayout.Logo";
|
|
3678
|
+
SelectionLayoutHeadline.displayName = "SelectionLayout.Headline";
|
|
3679
|
+
SelectionLayoutStats.displayName = "SelectionLayout.Stats";
|
|
3680
|
+
SelectionLayoutMain.displayName = "SelectionLayout.Main";
|
|
3681
|
+
SelectionLayoutHeader.displayName = "SelectionLayout.Header";
|
|
3682
|
+
SelectionLayoutSearch.displayName = "SelectionLayout.Search";
|
|
3683
|
+
SelectionLayoutTabs.displayName = "SelectionLayout.Tabs";
|
|
3684
|
+
SelectionLayoutTab.displayName = "SelectionLayout.Tab";
|
|
3685
|
+
SelectionLayoutList.displayName = "SelectionLayout.List";
|
|
3686
|
+
SelectionLayoutCard.displayName = "SelectionLayout.Card";
|
|
3687
|
+
SelectionLayoutEmpty.displayName = "SelectionLayout.Empty";
|
|
3688
|
+
var SelectionLayout = Object.assign(SelectionLayoutRoot, {
|
|
3689
|
+
Sidebar: SelectionLayoutSidebar,
|
|
3690
|
+
Logo: SelectionLayoutLogo,
|
|
3691
|
+
Headline: SelectionLayoutHeadline,
|
|
3692
|
+
Stats: SelectionLayoutStats,
|
|
3693
|
+
Main: SelectionLayoutMain,
|
|
3694
|
+
Header: SelectionLayoutHeader,
|
|
3695
|
+
Search: SelectionLayoutSearch,
|
|
3696
|
+
Tabs: SelectionLayoutTabs,
|
|
3697
|
+
Tab: SelectionLayoutTab,
|
|
3698
|
+
List: SelectionLayoutList,
|
|
3699
|
+
Card: SelectionLayoutCard,
|
|
3700
|
+
Empty: SelectionLayoutEmpty
|
|
3701
|
+
});
|
|
3702
|
+
var DashboardLayoutContext = React36.createContext(null);
|
|
3703
|
+
function useDashboardLayout() {
|
|
3704
|
+
const context = React36.useContext(DashboardLayoutContext);
|
|
3705
|
+
if (!context) {
|
|
3706
|
+
throw new Error("useDashboardLayout must be used within DashboardLayout");
|
|
3707
|
+
}
|
|
3708
|
+
return context;
|
|
3709
|
+
}
|
|
3710
|
+
function useMediaQuery(query) {
|
|
3711
|
+
const [matches, setMatches] = React36.useState(false);
|
|
3712
|
+
React36.useEffect(() => {
|
|
3713
|
+
const media = window.matchMedia(query);
|
|
3714
|
+
if (media.matches !== matches) {
|
|
3715
|
+
setMatches(media.matches);
|
|
3716
|
+
}
|
|
3717
|
+
const listener = () => setMatches(media.matches);
|
|
3718
|
+
media.addEventListener("change", listener);
|
|
3719
|
+
return () => media.removeEventListener("change", listener);
|
|
3720
|
+
}, [matches, query]);
|
|
3721
|
+
return matches;
|
|
3722
|
+
}
|
|
3723
|
+
function DashboardLayoutRoot({
|
|
3724
|
+
children,
|
|
3725
|
+
className,
|
|
3726
|
+
defaultExpanded = false,
|
|
3727
|
+
defaultPinned = false
|
|
3728
|
+
}) {
|
|
3729
|
+
const [sidebarExpanded, setSidebarExpanded] = React36.useState(defaultExpanded);
|
|
3730
|
+
const [sidebarPinned, setSidebarPinned] = React36.useState(defaultPinned);
|
|
3731
|
+
const [mobileMenuOpen, setMobileMenuOpen] = React36.useState(false);
|
|
3732
|
+
const isMobile = useMediaQuery("(max-width: 1024px)");
|
|
3733
|
+
React36.useEffect(() => {
|
|
3734
|
+
if (!isMobile) {
|
|
3735
|
+
setMobileMenuOpen(false);
|
|
3736
|
+
}
|
|
3737
|
+
}, [isMobile]);
|
|
3738
|
+
const value = {
|
|
3739
|
+
sidebarExpanded,
|
|
3740
|
+
setSidebarExpanded,
|
|
3741
|
+
sidebarPinned,
|
|
3742
|
+
setSidebarPinned,
|
|
3743
|
+
isMobile,
|
|
3744
|
+
mobileMenuOpen,
|
|
3745
|
+
setMobileMenuOpen
|
|
3746
|
+
};
|
|
3747
|
+
return /* @__PURE__ */ jsx(DashboardLayoutContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { className: cn("min-h-screen bg-muted/30 flex", className), children }) });
|
|
3748
|
+
}
|
|
3749
|
+
function DashboardLayoutSidebar({
|
|
3750
|
+
children,
|
|
3751
|
+
className,
|
|
3752
|
+
collapsedWidth = 64,
|
|
3753
|
+
expandedWidth = 256
|
|
3754
|
+
}) {
|
|
3755
|
+
const {
|
|
3756
|
+
sidebarExpanded,
|
|
3757
|
+
setSidebarExpanded,
|
|
3758
|
+
sidebarPinned,
|
|
3759
|
+
isMobile,
|
|
3760
|
+
mobileMenuOpen,
|
|
3761
|
+
setMobileMenuOpen
|
|
3762
|
+
} = useDashboardLayout();
|
|
3763
|
+
const handleMouseEnter = () => {
|
|
3764
|
+
if (!sidebarPinned && !isMobile) {
|
|
3765
|
+
setSidebarExpanded(true);
|
|
3766
|
+
}
|
|
3767
|
+
};
|
|
3768
|
+
const handleMouseLeave = () => {
|
|
3769
|
+
if (!sidebarPinned && !isMobile) {
|
|
3770
|
+
setSidebarExpanded(false);
|
|
3771
|
+
}
|
|
3772
|
+
};
|
|
3773
|
+
if (isMobile) {
|
|
3774
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
3775
|
+
mobileMenuOpen && /* @__PURE__ */ jsx(
|
|
3776
|
+
"div",
|
|
3777
|
+
{
|
|
3778
|
+
className: "fixed inset-0 bg-black/50 z-40 lg:hidden",
|
|
3779
|
+
onClick: () => setMobileMenuOpen(false)
|
|
3780
|
+
}
|
|
3781
|
+
),
|
|
3782
|
+
/* @__PURE__ */ jsx(
|
|
3783
|
+
"aside",
|
|
3784
|
+
{
|
|
3785
|
+
className: cn(
|
|
3786
|
+
"fixed top-0 left-0 h-full bg-card z-50 shadow-xl",
|
|
3787
|
+
"transform transition-transform duration-300 ease-in-out",
|
|
3788
|
+
mobileMenuOpen ? "translate-x-0" : "-translate-x-full",
|
|
3789
|
+
"w-[280px]",
|
|
3790
|
+
className
|
|
3791
|
+
),
|
|
3792
|
+
children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
|
|
3793
|
+
/* @__PURE__ */ jsx(
|
|
3794
|
+
"button",
|
|
3795
|
+
{
|
|
3796
|
+
onClick: () => setMobileMenuOpen(false),
|
|
3797
|
+
className: "absolute top-4 right-4 p-2 hover:bg-muted rounded-md",
|
|
3798
|
+
children: /* @__PURE__ */ jsx(X, { className: "w-5 h-5" })
|
|
3799
|
+
}
|
|
3800
|
+
),
|
|
3801
|
+
children
|
|
3802
|
+
] })
|
|
3803
|
+
}
|
|
3804
|
+
)
|
|
3805
|
+
] });
|
|
3806
|
+
}
|
|
3807
|
+
return /* @__PURE__ */ jsx(
|
|
3808
|
+
"aside",
|
|
3809
|
+
{
|
|
3810
|
+
onMouseEnter: handleMouseEnter,
|
|
3811
|
+
onMouseLeave: handleMouseLeave,
|
|
3812
|
+
style: {
|
|
3813
|
+
width: sidebarExpanded ? expandedWidth : collapsedWidth
|
|
3814
|
+
},
|
|
3815
|
+
className: cn(
|
|
3816
|
+
"fixed top-0 left-0 h-screen bg-card z-40",
|
|
3817
|
+
"flex flex-col shadow-[0_0_20px_rgba(0,0,0,0.06)]",
|
|
3818
|
+
"transition-[width] duration-300 ease-in-out",
|
|
3819
|
+
className
|
|
3820
|
+
),
|
|
3821
|
+
children
|
|
3822
|
+
}
|
|
3823
|
+
);
|
|
3824
|
+
}
|
|
3825
|
+
function DashboardLayoutSidebarHeader({
|
|
3826
|
+
children,
|
|
3827
|
+
className,
|
|
3828
|
+
logo,
|
|
3829
|
+
collapsedLogo,
|
|
3830
|
+
title
|
|
3831
|
+
}) {
|
|
3832
|
+
const { sidebarExpanded, sidebarPinned, setSidebarPinned, isMobile } = useDashboardLayout();
|
|
3833
|
+
if (children) {
|
|
3834
|
+
return /* @__PURE__ */ jsx("div", { className: cn("p-4 border-b border-border", className), children });
|
|
3835
|
+
}
|
|
3836
|
+
return /* @__PURE__ */ jsx("div", { className: cn("p-4 border-b border-border", className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
|
|
3837
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
|
|
3838
|
+
/* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: sidebarExpanded ? logo : collapsedLogo || logo }),
|
|
3839
|
+
sidebarExpanded && title && /* @__PURE__ */ jsx("span", { className: "font-semibold text-lg truncate", children: title })
|
|
3840
|
+
] }),
|
|
3841
|
+
sidebarExpanded && !isMobile && /* @__PURE__ */ jsx(
|
|
3842
|
+
"button",
|
|
3843
|
+
{
|
|
3844
|
+
onClick: () => setSidebarPinned(!sidebarPinned),
|
|
3845
|
+
className: "p-1.5 hover:bg-muted rounded-md transition-colors",
|
|
3846
|
+
title: sidebarPinned ? "Unpin sidebar" : "Pin sidebar",
|
|
3847
|
+
children: sidebarPinned ? /* @__PURE__ */ jsx(PinOff, { className: "w-4 h-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(Pin, { className: "w-4 h-4 text-muted-foreground" })
|
|
3848
|
+
}
|
|
3849
|
+
)
|
|
3850
|
+
] }) });
|
|
3851
|
+
}
|
|
3852
|
+
function DashboardLayoutSidebarNav({ children, className }) {
|
|
3853
|
+
return /* @__PURE__ */ jsx("nav", { className: cn("flex-1 overflow-y-auto overflow-x-hidden py-2", className), children });
|
|
3854
|
+
}
|
|
3855
|
+
function DashboardLayoutSidebarNavItem({
|
|
3856
|
+
icon,
|
|
3857
|
+
label,
|
|
3858
|
+
href,
|
|
3859
|
+
onClick,
|
|
3860
|
+
isActive,
|
|
3861
|
+
badge,
|
|
3862
|
+
badgeVariant = "default",
|
|
3863
|
+
className,
|
|
3864
|
+
disabled
|
|
3865
|
+
}) {
|
|
3866
|
+
const { sidebarExpanded } = useDashboardLayout();
|
|
3867
|
+
const badgeColors = {
|
|
3868
|
+
default: "bg-muted text-muted-foreground",
|
|
3869
|
+
primary: "bg-primary/10 text-primary",
|
|
3870
|
+
destructive: "bg-destructive/10 text-destructive"
|
|
3871
|
+
};
|
|
3872
|
+
const renderIcon = () => {
|
|
3873
|
+
if (!icon) return null;
|
|
3874
|
+
if (React36.isValidElement(icon)) {
|
|
3875
|
+
return icon;
|
|
3876
|
+
}
|
|
3877
|
+
if (typeof icon === "function" || typeof icon === "object" && "$$typeof" in icon) {
|
|
3878
|
+
const IconComponent = icon;
|
|
3879
|
+
return /* @__PURE__ */ jsx(IconComponent, { className: "w-5 h-5 flex-shrink-0" });
|
|
3880
|
+
}
|
|
3881
|
+
return null;
|
|
3882
|
+
};
|
|
3883
|
+
const content = /* @__PURE__ */ jsxs(
|
|
3884
|
+
"div",
|
|
3885
|
+
{
|
|
3886
|
+
className: cn(
|
|
3887
|
+
"flex items-center gap-3 px-3 py-2.5 mx-2 rounded-md transition-colors",
|
|
3888
|
+
"hover:bg-muted cursor-pointer",
|
|
3889
|
+
isActive && "bg-primary/10 text-primary hover:bg-primary/15",
|
|
3890
|
+
disabled && "opacity-50 cursor-not-allowed pointer-events-none",
|
|
3891
|
+
className
|
|
3892
|
+
),
|
|
3893
|
+
onClick: disabled ? void 0 : onClick,
|
|
3894
|
+
children: [
|
|
3895
|
+
renderIcon(),
|
|
3896
|
+
sidebarExpanded && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
3897
|
+
/* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-sm", children: label }),
|
|
3898
|
+
badge !== void 0 && /* @__PURE__ */ jsx(
|
|
3899
|
+
"span",
|
|
3900
|
+
{
|
|
3901
|
+
className: cn(
|
|
3902
|
+
"text-xs px-2 py-0.5 rounded-full",
|
|
3903
|
+
badgeColors[badgeVariant]
|
|
3904
|
+
),
|
|
3905
|
+
children: badge
|
|
3906
|
+
}
|
|
3907
|
+
)
|
|
3908
|
+
] }),
|
|
3909
|
+
!sidebarExpanded && badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "absolute top-1 right-1 w-2 h-2 bg-primary rounded-full" })
|
|
3910
|
+
]
|
|
3911
|
+
}
|
|
3912
|
+
);
|
|
3913
|
+
if (href && !disabled) {
|
|
3914
|
+
return /* @__PURE__ */ jsx("a", { href, className: "block relative", children: content });
|
|
3915
|
+
}
|
|
3916
|
+
return /* @__PURE__ */ jsx("div", { className: "relative", children: content });
|
|
3917
|
+
}
|
|
3918
|
+
function DashboardLayoutSidebarNavGroup({
|
|
3919
|
+
icon,
|
|
3920
|
+
label,
|
|
3921
|
+
children,
|
|
3922
|
+
defaultOpen = false,
|
|
3923
|
+
isActive,
|
|
3924
|
+
badge,
|
|
3925
|
+
badgeVariant = "default",
|
|
3926
|
+
className
|
|
3927
|
+
}) {
|
|
3928
|
+
const { sidebarExpanded } = useDashboardLayout();
|
|
3929
|
+
const [isOpen, setIsOpen] = React36.useState(defaultOpen);
|
|
3930
|
+
const badgeColors = {
|
|
3931
|
+
default: "bg-muted text-muted-foreground",
|
|
3932
|
+
primary: "bg-primary/10 text-primary",
|
|
3933
|
+
destructive: "bg-destructive/10 text-destructive"
|
|
3934
|
+
};
|
|
3935
|
+
const renderIcon = () => {
|
|
3936
|
+
if (!icon) return null;
|
|
3937
|
+
if (React36.isValidElement(icon)) {
|
|
3938
|
+
return icon;
|
|
3939
|
+
}
|
|
3940
|
+
if (typeof icon === "function" || typeof icon === "object" && "$$typeof" in icon) {
|
|
3941
|
+
const IconComponent = icon;
|
|
3942
|
+
return /* @__PURE__ */ jsx(IconComponent, { className: "w-5 h-5 flex-shrink-0" });
|
|
3943
|
+
}
|
|
3944
|
+
return null;
|
|
3945
|
+
};
|
|
3946
|
+
React36.useEffect(() => {
|
|
3947
|
+
if (isActive && sidebarExpanded) {
|
|
3948
|
+
setIsOpen(true);
|
|
3949
|
+
}
|
|
3950
|
+
}, [isActive, sidebarExpanded]);
|
|
3951
|
+
return /* @__PURE__ */ jsxs("div", { className, children: [
|
|
3952
|
+
/* @__PURE__ */ jsxs(
|
|
3953
|
+
"div",
|
|
3954
|
+
{
|
|
3955
|
+
onClick: () => sidebarExpanded && setIsOpen(!isOpen),
|
|
3956
|
+
className: cn(
|
|
3957
|
+
"flex items-center gap-3 px-3 py-2.5 mx-2 rounded-md transition-colors",
|
|
3958
|
+
"hover:bg-muted cursor-pointer",
|
|
3959
|
+
isActive && "text-primary"
|
|
3960
|
+
),
|
|
3961
|
+
children: [
|
|
3962
|
+
renderIcon(),
|
|
3963
|
+
sidebarExpanded && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
3964
|
+
/* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-sm", children: label }),
|
|
3965
|
+
badge !== void 0 && /* @__PURE__ */ jsx(
|
|
3966
|
+
"span",
|
|
3967
|
+
{
|
|
3968
|
+
className: cn(
|
|
3969
|
+
"text-xs px-2 py-0.5 rounded-full",
|
|
3970
|
+
badgeColors[badgeVariant]
|
|
3971
|
+
),
|
|
3972
|
+
children: badge
|
|
3973
|
+
}
|
|
3974
|
+
),
|
|
3975
|
+
isOpen ? /* @__PURE__ */ jsx(ChevronDown, { className: "w-4 h-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4 text-muted-foreground" })
|
|
3976
|
+
] })
|
|
3977
|
+
]
|
|
3978
|
+
}
|
|
3979
|
+
),
|
|
3980
|
+
sidebarExpanded && isOpen && /* @__PURE__ */ jsx("div", { className: "ml-4 mt-1 space-y-0.5", children })
|
|
3981
|
+
] });
|
|
3982
|
+
}
|
|
3983
|
+
function DashboardLayoutSidebarSection({
|
|
3984
|
+
title,
|
|
3985
|
+
children,
|
|
3986
|
+
className
|
|
3987
|
+
}) {
|
|
3988
|
+
const { sidebarExpanded } = useDashboardLayout();
|
|
3989
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("mb-2", className), children: [
|
|
3990
|
+
title && sidebarExpanded && /* @__PURE__ */ jsx("div", { className: "px-5 py-2", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: title }) }),
|
|
3991
|
+
children
|
|
3992
|
+
] });
|
|
3993
|
+
}
|
|
3994
|
+
function DashboardLayoutSidebarFooter({ children, className }) {
|
|
3995
|
+
return /* @__PURE__ */ jsx("div", { className: cn("p-4 border-t border-border mt-auto", className), children });
|
|
3996
|
+
}
|
|
3997
|
+
function DashboardLayoutHeader({ children, className }) {
|
|
3998
|
+
const { isMobile, setMobileMenuOpen, sidebarPinned } = useDashboardLayout();
|
|
3999
|
+
const marginLeft = isMobile ? 0 : sidebarPinned ? 256 : 64;
|
|
4000
|
+
return /* @__PURE__ */ jsxs(
|
|
4001
|
+
"header",
|
|
4002
|
+
{
|
|
4003
|
+
style: { marginLeft },
|
|
4004
|
+
className: cn(
|
|
4005
|
+
"h-16 bg-background border-b border-border",
|
|
4006
|
+
"flex items-center px-4 lg:px-6",
|
|
4007
|
+
"sticky top-0 z-30",
|
|
4008
|
+
!isMobile && "transition-[margin-left] duration-300",
|
|
4009
|
+
className
|
|
4010
|
+
),
|
|
4011
|
+
children: [
|
|
4012
|
+
isMobile && /* @__PURE__ */ jsx(
|
|
4013
|
+
"button",
|
|
4014
|
+
{
|
|
4015
|
+
onClick: () => setMobileMenuOpen(true),
|
|
4016
|
+
className: "p-2 hover:bg-muted rounded-md mr-2",
|
|
4017
|
+
children: /* @__PURE__ */ jsx(Menu, { className: "w-5 h-5" })
|
|
4018
|
+
}
|
|
4019
|
+
),
|
|
4020
|
+
children
|
|
4021
|
+
]
|
|
4022
|
+
}
|
|
4023
|
+
);
|
|
4024
|
+
}
|
|
4025
|
+
function DashboardLayoutHeaderTitle({
|
|
4026
|
+
children,
|
|
4027
|
+
className,
|
|
4028
|
+
title,
|
|
4029
|
+
subtitle
|
|
4030
|
+
}) {
|
|
4031
|
+
if (children) {
|
|
4032
|
+
return /* @__PURE__ */ jsx("div", { className: cn("flex-1", className), children });
|
|
4033
|
+
}
|
|
4034
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("flex-1 min-w-0", className), children: [
|
|
4035
|
+
title && /* @__PURE__ */ jsx("h1", { className: "font-semibold text-lg truncate", children: title }),
|
|
4036
|
+
subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground truncate", children: subtitle })
|
|
4037
|
+
] });
|
|
4038
|
+
}
|
|
4039
|
+
function DashboardLayoutHeaderActions({ children, className }) {
|
|
4040
|
+
return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-2", className), children });
|
|
4041
|
+
}
|
|
4042
|
+
function DashboardLayoutHeaderUser({
|
|
4043
|
+
name,
|
|
4044
|
+
email,
|
|
4045
|
+
avatar,
|
|
4046
|
+
className,
|
|
4047
|
+
children,
|
|
4048
|
+
onLogout
|
|
4049
|
+
}) {
|
|
4050
|
+
const [isOpen, setIsOpen] = React36.useState(false);
|
|
4051
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
|
|
4052
|
+
/* @__PURE__ */ jsxs(
|
|
4053
|
+
"button",
|
|
4054
|
+
{
|
|
4055
|
+
onClick: () => setIsOpen(!isOpen),
|
|
4056
|
+
className: "flex items-center gap-2 p-1.5 hover:bg-muted rounded-md transition-colors",
|
|
4057
|
+
children: [
|
|
4058
|
+
avatar ? /* @__PURE__ */ jsx(
|
|
4059
|
+
"img",
|
|
4060
|
+
{
|
|
4061
|
+
src: avatar,
|
|
4062
|
+
alt: name,
|
|
4063
|
+
className: "w-8 h-8 rounded-full object-cover"
|
|
4064
|
+
}
|
|
4065
|
+
) : /* @__PURE__ */ jsx("div", { className: "w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center", children: /* @__PURE__ */ jsx(User, { className: "w-4 h-4 text-primary" }) }),
|
|
4066
|
+
/* @__PURE__ */ jsxs("div", { className: "hidden sm:block text-left", children: [
|
|
4067
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate max-w-[120px]", children: name }),
|
|
4068
|
+
email && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate max-w-[120px]", children: email })
|
|
4069
|
+
] }),
|
|
4070
|
+
/* @__PURE__ */ jsx(ChevronDown, { className: "w-4 h-4 text-muted-foreground hidden sm:block" })
|
|
4071
|
+
]
|
|
4072
|
+
}
|
|
4073
|
+
),
|
|
4074
|
+
isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
4075
|
+
/* @__PURE__ */ jsx(
|
|
4076
|
+
"div",
|
|
4077
|
+
{
|
|
4078
|
+
className: "fixed inset-0 z-40",
|
|
4079
|
+
onClick: () => setIsOpen(false)
|
|
4080
|
+
}
|
|
4081
|
+
),
|
|
4082
|
+
/* @__PURE__ */ jsxs("div", { className: "absolute right-0 top-full mt-1 w-56 bg-card border border-border rounded-md shadow-lg z-50", children: [
|
|
4083
|
+
/* @__PURE__ */ jsxs("div", { className: "p-3 border-b border-border", children: [
|
|
4084
|
+
/* @__PURE__ */ jsx("p", { className: "font-medium truncate", children: name }),
|
|
4085
|
+
email && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground truncate", children: email })
|
|
4086
|
+
] }),
|
|
4087
|
+
children && /* @__PURE__ */ jsx("div", { className: "p-1", children }),
|
|
4088
|
+
onLogout && /* @__PURE__ */ jsx("div", { className: "p-1 border-t border-border", children: /* @__PURE__ */ jsxs(
|
|
4089
|
+
"button",
|
|
4090
|
+
{
|
|
4091
|
+
onClick: () => {
|
|
4092
|
+
setIsOpen(false);
|
|
4093
|
+
onLogout();
|
|
4094
|
+
},
|
|
4095
|
+
className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted rounded-md transition-colors text-destructive",
|
|
4096
|
+
children: [
|
|
4097
|
+
/* @__PURE__ */ jsx(LogOut, { className: "w-4 h-4" }),
|
|
4098
|
+
"Sair"
|
|
4099
|
+
]
|
|
4100
|
+
}
|
|
4101
|
+
) })
|
|
4102
|
+
] })
|
|
4103
|
+
] })
|
|
4104
|
+
] });
|
|
4105
|
+
}
|
|
4106
|
+
function DashboardLayoutContent({ children, className }) {
|
|
4107
|
+
const { isMobile, sidebarPinned } = useDashboardLayout();
|
|
4108
|
+
const marginLeft = isMobile ? 0 : sidebarPinned ? 256 : 64;
|
|
4109
|
+
return /* @__PURE__ */ jsx(
|
|
4110
|
+
"main",
|
|
4111
|
+
{
|
|
4112
|
+
style: { marginLeft },
|
|
4113
|
+
className: cn(
|
|
4114
|
+
"flex-1 flex flex-col min-h-screen",
|
|
4115
|
+
"transition-[margin-left] duration-300",
|
|
4116
|
+
className
|
|
4117
|
+
),
|
|
4118
|
+
children
|
|
4119
|
+
}
|
|
4120
|
+
);
|
|
4121
|
+
}
|
|
4122
|
+
function DashboardLayoutBreadcrumbs({
|
|
4123
|
+
items,
|
|
4124
|
+
className,
|
|
4125
|
+
separator
|
|
4126
|
+
}) {
|
|
4127
|
+
const defaultSeparator = /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4 text-muted-foreground" });
|
|
4128
|
+
return /* @__PURE__ */ jsx("nav", { className: cn("flex items-center gap-1 text-sm", className), children: items.map((item, index) => {
|
|
4129
|
+
const Icon2 = item.icon;
|
|
4130
|
+
const isLast = index === items.length - 1;
|
|
4131
|
+
return /* @__PURE__ */ jsxs(React36.Fragment, { children: [
|
|
4132
|
+
item.href && !isLast ? /* @__PURE__ */ jsxs(
|
|
4133
|
+
"a",
|
|
4134
|
+
{
|
|
4135
|
+
href: item.href,
|
|
4136
|
+
className: "flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors",
|
|
4137
|
+
children: [
|
|
4138
|
+
Icon2 && /* @__PURE__ */ jsx(Icon2, { className: "w-4 h-4" }),
|
|
4139
|
+
/* @__PURE__ */ jsx("span", { children: item.label })
|
|
4140
|
+
]
|
|
4141
|
+
}
|
|
4142
|
+
) : /* @__PURE__ */ jsxs(
|
|
4143
|
+
"span",
|
|
4144
|
+
{
|
|
4145
|
+
className: cn(
|
|
4146
|
+
"flex items-center gap-1",
|
|
4147
|
+
isLast ? "text-foreground font-medium" : "text-muted-foreground"
|
|
4148
|
+
),
|
|
4149
|
+
children: [
|
|
4150
|
+
Icon2 && /* @__PURE__ */ jsx(Icon2, { className: "w-4 h-4" }),
|
|
4151
|
+
/* @__PURE__ */ jsx("span", { children: item.label })
|
|
4152
|
+
]
|
|
4153
|
+
}
|
|
4154
|
+
),
|
|
4155
|
+
!isLast && /* @__PURE__ */ jsx("span", { className: "mx-1", children: separator || defaultSeparator })
|
|
4156
|
+
] }, index);
|
|
4157
|
+
}) });
|
|
4158
|
+
}
|
|
4159
|
+
function DashboardLayoutMobileNav({ children, className }) {
|
|
4160
|
+
return /* @__PURE__ */ jsx(
|
|
4161
|
+
"nav",
|
|
4162
|
+
{
|
|
4163
|
+
className: cn(
|
|
4164
|
+
"fixed bottom-0 left-0 right-0 h-16 bg-card border-t border-border",
|
|
4165
|
+
"flex items-center justify-around px-2 z-50 lg:hidden",
|
|
4166
|
+
className
|
|
4167
|
+
),
|
|
4168
|
+
children
|
|
4169
|
+
}
|
|
4170
|
+
);
|
|
4171
|
+
}
|
|
4172
|
+
function DashboardLayoutMobileNavItem({
|
|
4173
|
+
icon: Icon2,
|
|
4174
|
+
label,
|
|
4175
|
+
href,
|
|
4176
|
+
onClick,
|
|
4177
|
+
isActive,
|
|
4178
|
+
badge
|
|
4179
|
+
}) {
|
|
4180
|
+
const content = /* @__PURE__ */ jsxs(
|
|
4181
|
+
"div",
|
|
4182
|
+
{
|
|
4183
|
+
className: cn(
|
|
4184
|
+
"flex flex-col items-center gap-1 p-2 rounded-md transition-colors relative",
|
|
4185
|
+
"hover:bg-muted",
|
|
4186
|
+
isActive && "text-primary"
|
|
4187
|
+
),
|
|
4188
|
+
onClick,
|
|
4189
|
+
children: [
|
|
4190
|
+
/* @__PURE__ */ jsx(Icon2, { className: "w-5 h-5" }),
|
|
4191
|
+
/* @__PURE__ */ jsx("span", { className: "text-[10px]", children: label }),
|
|
4192
|
+
badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 min-w-[18px] h-[18px] flex items-center justify-center text-[10px] font-medium bg-destructive text-destructive-foreground rounded-full px-1", children: badge })
|
|
4193
|
+
]
|
|
4194
|
+
}
|
|
4195
|
+
);
|
|
4196
|
+
if (href) {
|
|
4197
|
+
return /* @__PURE__ */ jsx("a", { href, children: content });
|
|
4198
|
+
}
|
|
4199
|
+
return content;
|
|
4200
|
+
}
|
|
4201
|
+
DashboardLayoutRoot.displayName = "DashboardLayout";
|
|
4202
|
+
DashboardLayoutSidebar.displayName = "DashboardLayout.Sidebar";
|
|
4203
|
+
DashboardLayoutSidebarHeader.displayName = "DashboardLayout.SidebarHeader";
|
|
4204
|
+
DashboardLayoutSidebarNav.displayName = "DashboardLayout.SidebarNav";
|
|
4205
|
+
DashboardLayoutSidebarNavItem.displayName = "DashboardLayout.SidebarNavItem";
|
|
4206
|
+
DashboardLayoutSidebarNavGroup.displayName = "DashboardLayout.SidebarNavGroup";
|
|
4207
|
+
DashboardLayoutSidebarSection.displayName = "DashboardLayout.SidebarSection";
|
|
4208
|
+
DashboardLayoutSidebarFooter.displayName = "DashboardLayout.SidebarFooter";
|
|
4209
|
+
DashboardLayoutHeader.displayName = "DashboardLayout.Header";
|
|
4210
|
+
DashboardLayoutHeaderTitle.displayName = "DashboardLayout.HeaderTitle";
|
|
4211
|
+
DashboardLayoutHeaderActions.displayName = "DashboardLayout.HeaderActions";
|
|
4212
|
+
DashboardLayoutHeaderUser.displayName = "DashboardLayout.HeaderUser";
|
|
4213
|
+
DashboardLayoutContent.displayName = "DashboardLayout.Content";
|
|
4214
|
+
DashboardLayoutBreadcrumbs.displayName = "DashboardLayout.Breadcrumbs";
|
|
4215
|
+
DashboardLayoutMobileNav.displayName = "DashboardLayout.MobileNav";
|
|
4216
|
+
DashboardLayoutMobileNavItem.displayName = "DashboardLayout.MobileNavItem";
|
|
4217
|
+
var DashboardLayout = Object.assign(DashboardLayoutRoot, {
|
|
4218
|
+
Sidebar: DashboardLayoutSidebar,
|
|
4219
|
+
SidebarHeader: DashboardLayoutSidebarHeader,
|
|
4220
|
+
SidebarNav: DashboardLayoutSidebarNav,
|
|
4221
|
+
SidebarNavItem: DashboardLayoutSidebarNavItem,
|
|
4222
|
+
SidebarNavGroup: DashboardLayoutSidebarNavGroup,
|
|
4223
|
+
SidebarSection: DashboardLayoutSidebarSection,
|
|
4224
|
+
SidebarFooter: DashboardLayoutSidebarFooter,
|
|
4225
|
+
Header: DashboardLayoutHeader,
|
|
4226
|
+
HeaderTitle: DashboardLayoutHeaderTitle,
|
|
4227
|
+
HeaderActions: DashboardLayoutHeaderActions,
|
|
4228
|
+
HeaderUser: DashboardLayoutHeaderUser,
|
|
4229
|
+
Content: DashboardLayoutContent,
|
|
4230
|
+
Breadcrumbs: DashboardLayoutBreadcrumbs,
|
|
4231
|
+
MobileNav: DashboardLayoutMobileNav,
|
|
4232
|
+
MobileNavItem: DashboardLayoutMobileNavItem
|
|
4233
|
+
});
|
|
4234
|
+
var initialState = {
|
|
4235
|
+
theme: "system",
|
|
4236
|
+
setTheme: () => null
|
|
4237
|
+
};
|
|
4238
|
+
var ThemeProviderContext = React36.createContext(initialState);
|
|
4239
|
+
function ThemeProvider({
|
|
4240
|
+
children,
|
|
4241
|
+
defaultTheme = "system",
|
|
4242
|
+
storageKey = "facter-ds-theme",
|
|
4243
|
+
...props
|
|
4244
|
+
}) {
|
|
4245
|
+
const [theme, setTheme] = React36.useState(
|
|
4246
|
+
() => localStorage.getItem(storageKey) || defaultTheme
|
|
4247
|
+
);
|
|
4248
|
+
const [resolvedTheme, setResolvedTheme] = React36.useState("light");
|
|
4249
|
+
React36.useEffect(() => {
|
|
4250
|
+
const root = window.document.documentElement;
|
|
4251
|
+
root.classList.remove("light", "dark");
|
|
4252
|
+
if (theme === "system") {
|
|
4253
|
+
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
4254
|
+
root.classList.add(systemTheme);
|
|
4255
|
+
setResolvedTheme(systemTheme);
|
|
4256
|
+
return;
|
|
4257
|
+
}
|
|
4258
|
+
root.classList.add(theme);
|
|
4259
|
+
setResolvedTheme(theme);
|
|
4260
|
+
}, [theme]);
|
|
4261
|
+
const value = React36.useMemo(
|
|
4262
|
+
() => ({
|
|
4263
|
+
theme,
|
|
4264
|
+
setTheme: (theme2) => {
|
|
4265
|
+
localStorage.setItem(storageKey, theme2);
|
|
4266
|
+
setTheme(theme2);
|
|
4267
|
+
}
|
|
4268
|
+
}),
|
|
4269
|
+
[theme, storageKey]
|
|
4270
|
+
);
|
|
4271
|
+
return /* @__PURE__ */ jsx(ThemeProviderContext.Provider, { ...props, value, children: /* @__PURE__ */ jsx("div", { className: resolvedTheme, style: { minHeight: "100vh" }, children }) });
|
|
4272
|
+
}
|
|
4273
|
+
var useTheme = () => {
|
|
4274
|
+
const context = React36.useContext(ThemeProviderContext);
|
|
4275
|
+
if (context === void 0)
|
|
4276
|
+
throw new Error("useTheme must be used within a ThemeProvider");
|
|
4277
|
+
return context;
|
|
4278
|
+
};
|
|
442
4279
|
|
|
443
|
-
export { Badge, Button, GlobalLoaderController, Input, Loader, LoaderProvider, cn, loader, useLoader };
|
|
4280
|
+
export { AuthLayout, Badge, Button, Checkbox, DENSITY_CONFIG, DashboardLayout, DataTable, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogWrapper, EmptyState, Form, FormCheckbox, FormDescription, FormError, FormFieldProvider, FormFieldWrapper, FormInput, FormLabel, FormProvider, FormRadioGroup, FormSelect, FormSwitch, FormTextarea, GlobalLoaderController, Input, Loader, LoaderProvider, RippleBackground, RippleEffect, RippleWrapper, Select, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectionLayout, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, Toaster, cn, loader, toast, useDashboardLayout, useDataTable, useDataTableColumnVisibility, useDataTableDensity, useDataTableEmpty, useDataTableInstance, useDataTableLoading, useDataTableMeta, useDataTablePagination, useDataTableSelection, useDataTableSorting, useDataTableState, useDebounce, useDebouncedCallback, useFormContext, useFormFieldContext, useLoader, useTheme };
|
|
444
4281
|
//# sourceMappingURL=index.mjs.map
|
|
445
4282
|
//# sourceMappingURL=index.mjs.map
|