@mlw-packages/react-components 1.7.0 → 1.7.1
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/README.md +9 -7
- package/dist/index.d.mts +655 -1
- package/dist/index.d.ts +655 -1
- package/dist/index.js +4726 -26
- package/dist/index.mjs +4771 -26
- package/package.json +4 -4
package/dist/index.mjs
CHANGED
|
@@ -580,7 +580,10 @@ import * as React2 from "react";
|
|
|
580
580
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
581
581
|
import { XIcon } from "@phosphor-icons/react";
|
|
582
582
|
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
583
|
+
var DialogBase = DialogPrimitive.Root;
|
|
584
|
+
var DialogTriggerBase = DialogPrimitive.Trigger;
|
|
583
585
|
var DialogPortalBase = DialogPrimitive.Portal;
|
|
586
|
+
var DialogCloseBase = DialogPrimitive.Close;
|
|
584
587
|
var DialogOverlayBase = React2.forwardRef(({ className, testid: dataTestId = "dialog-overlay", ...props }, ref) => /* @__PURE__ */ jsx2(
|
|
585
588
|
DialogPrimitive.Overlay,
|
|
586
589
|
{
|
|
@@ -779,6 +782,26 @@ var CommandBase = React5.forwardRef(({ className, testid: dataTestId = "command-
|
|
|
779
782
|
}
|
|
780
783
|
));
|
|
781
784
|
CommandBase.displayName = CommandPrimitive.displayName;
|
|
785
|
+
var dialogVariants = {
|
|
786
|
+
hidden: { opacity: 0, scale: 0.95, y: -20 },
|
|
787
|
+
visible: { opacity: 1, scale: 1, y: 0 },
|
|
788
|
+
exit: { opacity: 0, scale: 0.95, y: -20 }
|
|
789
|
+
};
|
|
790
|
+
var CommandDialogBase = ({ children, open, ...props }) => {
|
|
791
|
+
return /* @__PURE__ */ jsx6(DialogBase, { open, ...props, children: /* @__PURE__ */ jsx6(AnimatePresence, { children: open && /* @__PURE__ */ jsx6(DialogContentBase, { asChild: true, forceMount: true, children: /* @__PURE__ */ jsx6(
|
|
792
|
+
motion.div,
|
|
793
|
+
{
|
|
794
|
+
initial: "hidden",
|
|
795
|
+
animate: "visible",
|
|
796
|
+
exit: "exit",
|
|
797
|
+
variants: dialogVariants,
|
|
798
|
+
transition: { duration: 0.2, ease: "easeOut" },
|
|
799
|
+
className: "overflow-hidden p-0",
|
|
800
|
+
children: /* @__PURE__ */ jsx6(CommandBase, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children })
|
|
801
|
+
},
|
|
802
|
+
"command-dialog"
|
|
803
|
+
) }) }) });
|
|
804
|
+
};
|
|
782
805
|
var CommandInputBase = React5.forwardRef(({ className, testid: dataTestId = "command-input", ...props }, ref) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
|
|
783
806
|
/* @__PURE__ */ jsx6(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 text-primary" }),
|
|
784
807
|
/* @__PURE__ */ jsx6(
|
|
@@ -874,6 +897,7 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
|
874
897
|
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
875
898
|
var PopoverBase = PopoverPrimitive.Root;
|
|
876
899
|
var PopoverTriggerBase = PopoverPrimitive.Trigger;
|
|
900
|
+
var PopoverAnchorBase = PopoverPrimitive.Anchor;
|
|
877
901
|
var PopoverContentBase = React6.forwardRef(
|
|
878
902
|
({
|
|
879
903
|
className,
|
|
@@ -1223,6 +1247,9 @@ function MultiCombobox({
|
|
|
1223
1247
|
import * as React7 from "react";
|
|
1224
1248
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
1225
1249
|
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
1250
|
+
var TooltipProviderBase = TooltipPrimitive.Provider;
|
|
1251
|
+
var TooltipBase = TooltipPrimitive.Root;
|
|
1252
|
+
var TooltipTriggerBase = TooltipPrimitive.Trigger;
|
|
1226
1253
|
var TooltipContentBase = React7.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx11(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx11(
|
|
1227
1254
|
TooltipPrimitive.Content,
|
|
1228
1255
|
{
|
|
@@ -1414,6 +1441,10 @@ import { motion as motion5, AnimatePresence as AnimatePresence4 } from "framer-m
|
|
|
1414
1441
|
import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
1415
1442
|
var DropDownMenuBase = DropdownMenuPrimitive.Root;
|
|
1416
1443
|
var DropDownMenuTriggerBase = DropdownMenuPrimitive.Trigger;
|
|
1444
|
+
var DropDownMenuGroupBase = DropdownMenuPrimitive.Group;
|
|
1445
|
+
var DropDownMenuPortalBase = DropdownMenuPrimitive.Portal;
|
|
1446
|
+
var DropDownMenuSubBase = DropdownMenuPrimitive.Sub;
|
|
1447
|
+
var DropDownMenuRadioGroupBase = DropdownMenuPrimitive.RadioGroup;
|
|
1417
1448
|
var DropDownMenuSubTriggerBase = React9.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs9(
|
|
1418
1449
|
DropdownMenuPrimitive.SubTrigger,
|
|
1419
1450
|
{
|
|
@@ -5326,31 +5357,4536 @@ var useChartHighlights = () => {
|
|
|
5326
5357
|
};
|
|
5327
5358
|
};
|
|
5328
5359
|
|
|
5329
|
-
// src/
|
|
5360
|
+
// src/components/ui/data/AvatarBase.tsx
|
|
5330
5361
|
import * as React16 from "react";
|
|
5331
|
-
|
|
5332
|
-
|
|
5333
|
-
|
|
5334
|
-
|
|
5335
|
-
|
|
5336
|
-
|
|
5337
|
-
|
|
5338
|
-
|
|
5339
|
-
|
|
5340
|
-
|
|
5341
|
-
|
|
5342
|
-
}
|
|
5343
|
-
|
|
5362
|
+
import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
|
5363
|
+
import { jsx as jsx31 } from "react/jsx-runtime";
|
|
5364
|
+
var AvatarBase = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
|
|
5365
|
+
AvatarPrimitive.Root,
|
|
5366
|
+
{
|
|
5367
|
+
ref,
|
|
5368
|
+
className: cn(
|
|
5369
|
+
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
|
|
5370
|
+
className
|
|
5371
|
+
),
|
|
5372
|
+
...props
|
|
5373
|
+
}
|
|
5374
|
+
));
|
|
5375
|
+
AvatarBase.displayName = AvatarPrimitive.Root.displayName;
|
|
5376
|
+
var AvatarImageBase = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
|
|
5377
|
+
AvatarPrimitive.Image,
|
|
5378
|
+
{
|
|
5379
|
+
ref,
|
|
5380
|
+
className: cn("aspect-square h-full w-full", className),
|
|
5381
|
+
...props
|
|
5382
|
+
}
|
|
5383
|
+
));
|
|
5384
|
+
AvatarImageBase.displayName = AvatarPrimitive.Image.displayName;
|
|
5385
|
+
var AvatarFallbackBase = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
|
|
5386
|
+
AvatarPrimitive.Fallback,
|
|
5387
|
+
{
|
|
5388
|
+
ref,
|
|
5389
|
+
className: cn(
|
|
5390
|
+
"flex h-full w-full items-center justify-center rounded-full bg-muted",
|
|
5391
|
+
className
|
|
5392
|
+
),
|
|
5393
|
+
...props
|
|
5394
|
+
}
|
|
5395
|
+
));
|
|
5396
|
+
AvatarFallbackBase.displayName = AvatarPrimitive.Fallback.displayName;
|
|
5397
|
+
|
|
5398
|
+
// src/components/ui/data/BadgeBase.tsx
|
|
5399
|
+
import { Slot as Slot3 } from "@radix-ui/react-slot";
|
|
5400
|
+
import { cva as cva2 } from "class-variance-authority";
|
|
5401
|
+
import { jsx as jsx32 } from "react/jsx-runtime";
|
|
5402
|
+
var tailwindColors = {
|
|
5403
|
+
// Red
|
|
5404
|
+
"red-50": "#fef2f2",
|
|
5405
|
+
"red-100": "#fee2e2",
|
|
5406
|
+
"red-200": "#fecaca",
|
|
5407
|
+
"red-300": "#fca5a5",
|
|
5408
|
+
"red-400": "#f87171",
|
|
5409
|
+
"red-500": "#ef4444",
|
|
5410
|
+
"red-600": "#dc2626",
|
|
5411
|
+
"red-700": "#b91c1c",
|
|
5412
|
+
"red-800": "#991b1b",
|
|
5413
|
+
"red-900": "#7f1d1d",
|
|
5414
|
+
// Orange
|
|
5415
|
+
"orange-50": "#fff7ed",
|
|
5416
|
+
"orange-100": "#ffedd5",
|
|
5417
|
+
"orange-200": "#fed7aa",
|
|
5418
|
+
"orange-300": "#fdba74",
|
|
5419
|
+
"orange-400": "#fb923c",
|
|
5420
|
+
"orange-500": "#f97316",
|
|
5421
|
+
"orange-600": "#ea580c",
|
|
5422
|
+
"orange-700": "#c2410c",
|
|
5423
|
+
"orange-800": "#9a3412",
|
|
5424
|
+
"orange-900": "#7c2d12",
|
|
5425
|
+
// Yellow
|
|
5426
|
+
"yellow-50": "#fefce8",
|
|
5427
|
+
"yellow-100": "#fef3c7",
|
|
5428
|
+
"yellow-200": "#fde68a",
|
|
5429
|
+
"yellow-300": "#fcd34d",
|
|
5430
|
+
"yellow-400": "#fbbf24",
|
|
5431
|
+
"yellow-500": "#f59e0b",
|
|
5432
|
+
"yellow-600": "#d97706",
|
|
5433
|
+
"yellow-700": "#b45309",
|
|
5434
|
+
"yellow-800": "#92400e",
|
|
5435
|
+
"yellow-900": "#78350f",
|
|
5436
|
+
// Green
|
|
5437
|
+
"green-50": "#f0fdf4",
|
|
5438
|
+
"green-100": "#dcfce7",
|
|
5439
|
+
"green-200": "#bbf7d0",
|
|
5440
|
+
"green-300": "#86efac",
|
|
5441
|
+
"green-400": "#4ade80",
|
|
5442
|
+
"green-500": "#22c55e",
|
|
5443
|
+
"green-600": "#16a34a",
|
|
5444
|
+
"green-700": "#15803d",
|
|
5445
|
+
"green-800": "#166534",
|
|
5446
|
+
"green-900": "#14532d",
|
|
5447
|
+
// Blue
|
|
5448
|
+
"blue-50": "#eff6ff",
|
|
5449
|
+
"blue-100": "#dbeafe",
|
|
5450
|
+
"blue-200": "#bfdbfe",
|
|
5451
|
+
"blue-300": "#93c5fd",
|
|
5452
|
+
"blue-400": "#60a5fa",
|
|
5453
|
+
"blue-500": "#3b82f6",
|
|
5454
|
+
"blue-600": "#2563eb",
|
|
5455
|
+
"blue-700": "#1d4ed8",
|
|
5456
|
+
"blue-800": "#1e40af",
|
|
5457
|
+
"blue-900": "#1e3a8a",
|
|
5458
|
+
// Purple
|
|
5459
|
+
"purple-50": "#faf5ff",
|
|
5460
|
+
"purple-100": "#f3e8ff",
|
|
5461
|
+
"purple-200": "#e9d5ff",
|
|
5462
|
+
"purple-300": "#d8b4fe",
|
|
5463
|
+
"purple-400": "#c084fc",
|
|
5464
|
+
"purple-500": "#a855f7",
|
|
5465
|
+
"purple-600": "#9333ea",
|
|
5466
|
+
"purple-700": "#7c3aed",
|
|
5467
|
+
"purple-800": "#6b21a8",
|
|
5468
|
+
"purple-900": "#581c87",
|
|
5469
|
+
// Pink
|
|
5470
|
+
"pink-50": "#fdf2f8",
|
|
5471
|
+
"pink-100": "#fce7f3",
|
|
5472
|
+
"pink-200": "#fbcfe8",
|
|
5473
|
+
"pink-300": "#f9a8d4",
|
|
5474
|
+
"pink-400": "#f472b6",
|
|
5475
|
+
"pink-500": "#ec4899",
|
|
5476
|
+
"pink-600": "#db2777",
|
|
5477
|
+
"pink-700": "#be185d",
|
|
5478
|
+
"pink-800": "#9d174d",
|
|
5479
|
+
"pink-900": "#831843",
|
|
5480
|
+
// Gray
|
|
5481
|
+
"gray-50": "#f9fafb",
|
|
5482
|
+
"gray-100": "#f3f4f6",
|
|
5483
|
+
"gray-200": "#e5e7eb",
|
|
5484
|
+
"gray-300": "#d1d5db",
|
|
5485
|
+
"gray-400": "#9ca3af",
|
|
5486
|
+
"gray-500": "#6b7280",
|
|
5487
|
+
"gray-600": "#4b5563",
|
|
5488
|
+
"gray-700": "#374151",
|
|
5489
|
+
"gray-800": "#1f2937",
|
|
5490
|
+
"gray-900": "#111827",
|
|
5491
|
+
// Indigo
|
|
5492
|
+
"indigo-50": "#eef2ff",
|
|
5493
|
+
"indigo-100": "#e0e7ff",
|
|
5494
|
+
"indigo-200": "#c7d2fe",
|
|
5495
|
+
"indigo-300": "#a5b4fc",
|
|
5496
|
+
"indigo-400": "#818cf8",
|
|
5497
|
+
"indigo-500": "#6366f1",
|
|
5498
|
+
"indigo-600": "#4f46e5",
|
|
5499
|
+
"indigo-700": "#4338ca",
|
|
5500
|
+
"indigo-800": "#3730a3",
|
|
5501
|
+
"indigo-900": "#312e81",
|
|
5502
|
+
// Teal
|
|
5503
|
+
"teal-50": "#f0fdfa",
|
|
5504
|
+
"teal-100": "#ccfbf1",
|
|
5505
|
+
"teal-200": "#99f6e4",
|
|
5506
|
+
"teal-300": "#5eead4",
|
|
5507
|
+
"teal-400": "#2dd4bf",
|
|
5508
|
+
"teal-500": "#14b8a6",
|
|
5509
|
+
"teal-600": "#0d9488",
|
|
5510
|
+
"teal-700": "#0f766e",
|
|
5511
|
+
"teal-800": "#115e59",
|
|
5512
|
+
"teal-900": "#134e4a",
|
|
5513
|
+
// Emerald
|
|
5514
|
+
"emerald-50": "#ecfdf5",
|
|
5515
|
+
"emerald-100": "#d1fae5",
|
|
5516
|
+
"emerald-200": "#a7f3d0",
|
|
5517
|
+
"emerald-300": "#6ee7b7",
|
|
5518
|
+
"emerald-400": "#34d399",
|
|
5519
|
+
"emerald-500": "#10b981",
|
|
5520
|
+
"emerald-600": "#059669",
|
|
5521
|
+
"emerald-700": "#047857",
|
|
5522
|
+
"emerald-800": "#065f46",
|
|
5523
|
+
"emerald-900": "#064e3b",
|
|
5524
|
+
// Cyan
|
|
5525
|
+
"cyan-50": "#ecfeff",
|
|
5526
|
+
"cyan-100": "#cffafe",
|
|
5527
|
+
"cyan-200": "#a5f3fc",
|
|
5528
|
+
"cyan-300": "#67e8f9",
|
|
5529
|
+
"cyan-400": "#22d3ee",
|
|
5530
|
+
"cyan-500": "#06b6d4",
|
|
5531
|
+
"cyan-600": "#0891b2",
|
|
5532
|
+
"cyan-700": "#0e7490",
|
|
5533
|
+
"cyan-800": "#155e75",
|
|
5534
|
+
"cyan-900": "#164e63"
|
|
5535
|
+
};
|
|
5536
|
+
var getTailwindColor = (color) => {
|
|
5537
|
+
if (color.startsWith("#") || color.startsWith("rgb") || color.startsWith("hsl")) {
|
|
5538
|
+
return color;
|
|
5539
|
+
}
|
|
5540
|
+
if (tailwindColors[color]) {
|
|
5541
|
+
return tailwindColors[color];
|
|
5542
|
+
}
|
|
5543
|
+
if (!color.includes("-")) {
|
|
5544
|
+
const defaultColor = `${color}-500`;
|
|
5545
|
+
if (tailwindColors[defaultColor]) {
|
|
5546
|
+
return tailwindColors[defaultColor];
|
|
5547
|
+
}
|
|
5548
|
+
}
|
|
5549
|
+
return color;
|
|
5550
|
+
};
|
|
5551
|
+
var badgeVariants = cva2(
|
|
5552
|
+
"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
|
5553
|
+
{
|
|
5554
|
+
variants: {
|
|
5555
|
+
variant: {
|
|
5556
|
+
default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
|
5557
|
+
secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
|
5558
|
+
destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
5559
|
+
outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
|
|
5560
|
+
},
|
|
5561
|
+
status: {
|
|
5562
|
+
success: "bg-green-500 border-white dark:border-zinc-900",
|
|
5563
|
+
desactivated: "bg-gray-400 border-white dark:border-zinc-900",
|
|
5564
|
+
destructive: "bg-red-500 border-white dark:border-zinc-900",
|
|
5565
|
+
away: "bg-yellow-400 border-white dark:border-zinc-900",
|
|
5566
|
+
custom: "border-white dark:border-zinc-900"
|
|
5567
|
+
}
|
|
5568
|
+
},
|
|
5569
|
+
defaultVariants: {
|
|
5570
|
+
variant: "default"
|
|
5571
|
+
}
|
|
5572
|
+
}
|
|
5573
|
+
);
|
|
5574
|
+
function BadgeBase({
|
|
5575
|
+
className,
|
|
5576
|
+
variant,
|
|
5577
|
+
status,
|
|
5578
|
+
statusColor,
|
|
5579
|
+
asChild = false,
|
|
5580
|
+
children,
|
|
5581
|
+
style,
|
|
5582
|
+
...props
|
|
5583
|
+
}) {
|
|
5584
|
+
const Comp = asChild ? Slot3 : "span";
|
|
5585
|
+
const isStatus = Boolean(status);
|
|
5586
|
+
const resolvedStatusColor = statusColor ? getTailwindColor(statusColor) : void 0;
|
|
5587
|
+
const customStyle = status === "custom" && resolvedStatusColor ? { ...style, backgroundColor: resolvedStatusColor } : style;
|
|
5588
|
+
return /* @__PURE__ */ jsx32(
|
|
5589
|
+
Comp,
|
|
5590
|
+
{
|
|
5591
|
+
"data-slot": "badge",
|
|
5592
|
+
className: cn(
|
|
5593
|
+
badgeVariants({ variant, status: isStatus ? status : void 0 }),
|
|
5594
|
+
isStatus && "absolute bottom-0 right-0 rounded-full p-0 h-4 w-4 flex items-center justify-center border-2",
|
|
5595
|
+
className
|
|
5596
|
+
),
|
|
5597
|
+
style: customStyle,
|
|
5598
|
+
...props,
|
|
5599
|
+
children: isStatus ? null : children
|
|
5600
|
+
}
|
|
5601
|
+
);
|
|
5602
|
+
}
|
|
5603
|
+
|
|
5604
|
+
// src/components/ui/data/CalendarBase.tsx
|
|
5605
|
+
import { CaretLeftIcon, CaretRightIcon as CaretRightIcon2 } from "@phosphor-icons/react";
|
|
5606
|
+
import { DayPicker } from "react-day-picker";
|
|
5607
|
+
import { jsx as jsx33 } from "react/jsx-runtime";
|
|
5608
|
+
function CalendarBase({
|
|
5609
|
+
className,
|
|
5610
|
+
classNames,
|
|
5611
|
+
showOutsideDays = true,
|
|
5612
|
+
...props
|
|
5613
|
+
}) {
|
|
5614
|
+
return /* @__PURE__ */ jsx33(
|
|
5615
|
+
DayPicker,
|
|
5616
|
+
{
|
|
5617
|
+
showOutsideDays,
|
|
5618
|
+
className: cn("bg-background p-3", className),
|
|
5619
|
+
classNames: {
|
|
5620
|
+
months: "flex items-center flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
|
|
5621
|
+
month: "space-y-4",
|
|
5622
|
+
caption: "flex justify-center pt-1 relative items-center",
|
|
5623
|
+
caption_label: "text-sm font-medium",
|
|
5624
|
+
nav: "space-x-1 flex items-center",
|
|
5625
|
+
nav_button: cn(
|
|
5626
|
+
buttonVariantsBase({ variant: "outline" }),
|
|
5627
|
+
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
|
|
5628
|
+
),
|
|
5629
|
+
nav_button_previous: "absolute left-1",
|
|
5630
|
+
nav_button_next: "absolute right-1",
|
|
5631
|
+
table: "w-full border-collapse space-y-1",
|
|
5632
|
+
head_row: "flex",
|
|
5633
|
+
head_cell: "text-slate-500 rounded-md w-9 font-normal text-[0.8rem] dark:text-slate-400",
|
|
5634
|
+
row: "flex w-full mt-2",
|
|
5635
|
+
cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-slate-100/50 [&:has([aria-selected])]:bg-slate-100 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 dark:[&:has([aria-selected].day-outside)]:bg-slate-800/50 dark:[&:has([aria-selected])]:bg-slate-800",
|
|
5636
|
+
day: cn(
|
|
5637
|
+
buttonVariantsBase({ variant: "ghost" }),
|
|
5638
|
+
"h-9 w-9 p-0 font-normal aria-selected:opacity-100"
|
|
5639
|
+
),
|
|
5640
|
+
day_range_end: "day-range-end",
|
|
5641
|
+
day_selected: "bg-purple text-slate-50 hover:bg-primary hover:text-slate-50 focus:bg-purple-500 focus:text-slate-50 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50 dark:hover:text-slate-900 dark:focus:bg-slate-50 dark:focus:text-slate-900",
|
|
5642
|
+
day_today: "bg-slate-100 text-slate-900 dark:bg-primary dark:text-slate-50",
|
|
5643
|
+
day_outside: "day-outside text-slate-500 opacity-50 aria-selected:bg-slate-100/50 aria-selected:text-slate-500 aria-selected:opacity-30 dark:text-slate-400 dark:aria-selected:bg-slate-800/50 dark:aria-selected:text-slate-400",
|
|
5644
|
+
day_disabled: "text-slate-500 opacity-50 dark:text-slate-400",
|
|
5645
|
+
day_range_middle: "aria-selected:bg-slate-100 aria-selected:text-slate-900 dark:aria-selected:bg-primary dark:aria-selected:text-primary",
|
|
5646
|
+
day_hidden: "invisible",
|
|
5647
|
+
...classNames
|
|
5648
|
+
},
|
|
5649
|
+
components: {
|
|
5650
|
+
IconLeft: () => /* @__PURE__ */ jsx33(CaretLeftIcon, { className: "h-4 w-4" }),
|
|
5651
|
+
IconRight: () => /* @__PURE__ */ jsx33(CaretRightIcon2, { className: "h-4 w-4" })
|
|
5652
|
+
},
|
|
5653
|
+
...props
|
|
5654
|
+
}
|
|
5655
|
+
);
|
|
5344
5656
|
}
|
|
5657
|
+
CalendarBase.displayName = "Calendar";
|
|
5658
|
+
|
|
5659
|
+
// src/components/ui/data/CardBase.tsx
|
|
5660
|
+
import * as React17 from "react";
|
|
5661
|
+
import { jsx as jsx34 } from "react/jsx-runtime";
|
|
5662
|
+
var CardBase = React17.forwardRef(({ className, testid: dataTestId = "card-base", ...props }, ref) => /* @__PURE__ */ jsx34(
|
|
5663
|
+
"div",
|
|
5664
|
+
{
|
|
5665
|
+
ref,
|
|
5666
|
+
className: cn(
|
|
5667
|
+
"rounded-xl border bg-card text-card-foreground shadow",
|
|
5668
|
+
className
|
|
5669
|
+
),
|
|
5670
|
+
"data-testid": dataTestId,
|
|
5671
|
+
...props
|
|
5672
|
+
}
|
|
5673
|
+
));
|
|
5674
|
+
CardBase.displayName = "Card";
|
|
5675
|
+
var CardHeaderBase = React17.forwardRef(({ className, testid: dataTestId = "card-header", ...props }, ref) => /* @__PURE__ */ jsx34(
|
|
5676
|
+
"div",
|
|
5677
|
+
{
|
|
5678
|
+
ref,
|
|
5679
|
+
className: cn("flex flex-col space-y-1.5 p-6", className),
|
|
5680
|
+
"data-testid": dataTestId,
|
|
5681
|
+
...props
|
|
5682
|
+
}
|
|
5683
|
+
));
|
|
5684
|
+
CardHeaderBase.displayName = "CardHeader";
|
|
5685
|
+
var CardTitleBase = React17.forwardRef(({ className, testid: dataTestId = "card-title", ...props }, ref) => /* @__PURE__ */ jsx34(
|
|
5686
|
+
"div",
|
|
5687
|
+
{
|
|
5688
|
+
ref,
|
|
5689
|
+
className: cn("font-semibold leading-none tracking-tight", className),
|
|
5690
|
+
"data-testid": dataTestId,
|
|
5691
|
+
...props
|
|
5692
|
+
}
|
|
5693
|
+
));
|
|
5694
|
+
CardTitleBase.displayName = "CardTitle";
|
|
5695
|
+
var CardDescriptionBase = React17.forwardRef(({ className, testid: dataTestId = "card-description", ...props }, ref) => /* @__PURE__ */ jsx34(
|
|
5696
|
+
"div",
|
|
5697
|
+
{
|
|
5698
|
+
ref,
|
|
5699
|
+
className: cn("text-sm text-muted-foreground", className),
|
|
5700
|
+
"data-testid": dataTestId,
|
|
5701
|
+
...props
|
|
5702
|
+
}
|
|
5703
|
+
));
|
|
5704
|
+
CardDescriptionBase.displayName = "CardDescription";
|
|
5705
|
+
var CardContentBase = React17.forwardRef(({ className, testid: dataTestId = "card-content", ...props }, ref) => /* @__PURE__ */ jsx34(
|
|
5706
|
+
"div",
|
|
5707
|
+
{
|
|
5708
|
+
ref,
|
|
5709
|
+
className: cn("p-6 pt-0", className),
|
|
5710
|
+
"data-testid": dataTestId,
|
|
5711
|
+
...props
|
|
5712
|
+
}
|
|
5713
|
+
));
|
|
5714
|
+
CardContentBase.displayName = "CardContent";
|
|
5715
|
+
var CardFooterBase = React17.forwardRef(({ className, testid: dataTestId = "card-footer", ...props }, ref) => /* @__PURE__ */ jsx34(
|
|
5716
|
+
"div",
|
|
5717
|
+
{
|
|
5718
|
+
ref,
|
|
5719
|
+
className: cn("flex items-center p-6 pt-0", className),
|
|
5720
|
+
"data-testid": dataTestId,
|
|
5721
|
+
...props
|
|
5722
|
+
}
|
|
5723
|
+
));
|
|
5724
|
+
CardFooterBase.displayName = "CardFooter";
|
|
5725
|
+
|
|
5726
|
+
// src/components/ui/data/FileUploader.tsx
|
|
5727
|
+
import * as React21 from "react";
|
|
5728
|
+
import { motion as motion10, AnimatePresence as AnimatePresence8 } from "framer-motion";
|
|
5729
|
+
import {
|
|
5730
|
+
CloudArrowUpIcon,
|
|
5731
|
+
CheckIcon as CheckIcon7,
|
|
5732
|
+
XIcon as XIcon6,
|
|
5733
|
+
FileTextIcon,
|
|
5734
|
+
FilePdfIcon,
|
|
5735
|
+
FileImageIcon,
|
|
5736
|
+
FileVideoIcon,
|
|
5737
|
+
FileAudioIcon,
|
|
5738
|
+
FileZipIcon,
|
|
5739
|
+
FileIcon,
|
|
5740
|
+
FileCsvIcon,
|
|
5741
|
+
FileXlsIcon,
|
|
5742
|
+
FilePptIcon,
|
|
5743
|
+
FileDocIcon
|
|
5744
|
+
} from "@phosphor-icons/react";
|
|
5745
|
+
|
|
5746
|
+
// src/components/ui/form/SmallButtons.tsx
|
|
5747
|
+
import * as React20 from "react";
|
|
5748
|
+
|
|
5749
|
+
// src/components/ui/feedback/DestructiveDialog.tsx
|
|
5750
|
+
import * as React19 from "react";
|
|
5751
|
+
import { XCircleIcon } from "@phosphor-icons/react";
|
|
5752
|
+
|
|
5753
|
+
// src/components/ui/feedback/AlertDialogBase.tsx
|
|
5754
|
+
import * as React18 from "react";
|
|
5755
|
+
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
|
|
5756
|
+
import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
5757
|
+
var AlertDialogBase = AlertDialogPrimitive.Root;
|
|
5758
|
+
var AlertDialogTriggerBase = AlertDialogPrimitive.Trigger;
|
|
5759
|
+
var AlertDialogPortalBase = AlertDialogPrimitive.Portal;
|
|
5760
|
+
var AlertDialogOverlayBase = React18.forwardRef(({ className, testid = "alertdialog-overlay", ...props }, ref) => /* @__PURE__ */ jsx35(
|
|
5761
|
+
AlertDialogPrimitive.Overlay,
|
|
5762
|
+
{
|
|
5763
|
+
className: cn(
|
|
5764
|
+
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
5765
|
+
className
|
|
5766
|
+
),
|
|
5767
|
+
"data-testid": testid,
|
|
5768
|
+
...props,
|
|
5769
|
+
ref
|
|
5770
|
+
}
|
|
5771
|
+
));
|
|
5772
|
+
AlertDialogOverlayBase.displayName = AlertDialogPrimitive.Overlay.displayName;
|
|
5773
|
+
var AlertDialogContentBase = React18.forwardRef(({ className, testid = "alertdialog-content", ...props }, ref) => /* @__PURE__ */ jsxs25(AlertDialogPortalBase, { children: [
|
|
5774
|
+
/* @__PURE__ */ jsx35(AlertDialogOverlayBase, {}),
|
|
5775
|
+
/* @__PURE__ */ jsx35(
|
|
5776
|
+
AlertDialogPrimitive.Content,
|
|
5777
|
+
{
|
|
5778
|
+
ref,
|
|
5779
|
+
className: cn(
|
|
5780
|
+
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
|
5781
|
+
className
|
|
5782
|
+
),
|
|
5783
|
+
"data-testid": testid,
|
|
5784
|
+
...props
|
|
5785
|
+
}
|
|
5786
|
+
)
|
|
5787
|
+
] }));
|
|
5788
|
+
AlertDialogContentBase.displayName = AlertDialogPrimitive.Content.displayName;
|
|
5789
|
+
var AlertDialogHeaderBase = ({
|
|
5790
|
+
className,
|
|
5791
|
+
...props
|
|
5792
|
+
}) => /* @__PURE__ */ jsx35(
|
|
5793
|
+
"div",
|
|
5794
|
+
{
|
|
5795
|
+
className: cn(
|
|
5796
|
+
"flex flex-col space-y-2 text-center sm:text-left",
|
|
5797
|
+
className
|
|
5798
|
+
),
|
|
5799
|
+
...props
|
|
5800
|
+
}
|
|
5801
|
+
);
|
|
5802
|
+
AlertDialogHeaderBase.displayName = "AlertDialogHeaderBase";
|
|
5803
|
+
var AlertDialogFooterBase = ({
|
|
5804
|
+
className,
|
|
5805
|
+
...props
|
|
5806
|
+
}) => /* @__PURE__ */ jsx35(
|
|
5807
|
+
"div",
|
|
5808
|
+
{
|
|
5809
|
+
className: cn(
|
|
5810
|
+
"flex flex-col-reverse sm:flex-row sm:justify-end",
|
|
5811
|
+
className
|
|
5812
|
+
),
|
|
5813
|
+
...props
|
|
5814
|
+
}
|
|
5815
|
+
);
|
|
5816
|
+
AlertDialogFooterBase.displayName = "AlertDialogFooterBase";
|
|
5817
|
+
var AlertDialogTitleBase = React18.forwardRef(({ className, testid = "alertdialog-title", ...props }, ref) => /* @__PURE__ */ jsx35(
|
|
5818
|
+
AlertDialogPrimitive.Title,
|
|
5819
|
+
{
|
|
5820
|
+
ref,
|
|
5821
|
+
className: cn("text-lg font-semibold", className),
|
|
5822
|
+
"data-testid": testid,
|
|
5823
|
+
...props
|
|
5824
|
+
}
|
|
5825
|
+
));
|
|
5826
|
+
AlertDialogTitleBase.displayName = AlertDialogPrimitive.Title.displayName;
|
|
5827
|
+
var AlertDialogDescriptionBase = React18.forwardRef(({ className, testid = "alertdialog-description", ...props }, ref) => /* @__PURE__ */ jsx35(
|
|
5828
|
+
AlertDialogPrimitive.Description,
|
|
5829
|
+
{
|
|
5830
|
+
ref,
|
|
5831
|
+
className: cn("text-sm text-muted-foreground", className),
|
|
5832
|
+
"data-testid": testid,
|
|
5833
|
+
...props
|
|
5834
|
+
}
|
|
5835
|
+
));
|
|
5836
|
+
AlertDialogDescriptionBase.displayName = AlertDialogPrimitive.Description.displayName;
|
|
5837
|
+
var AlertDialogActionBase = React18.forwardRef(({ className, testid = "alertdialog-action", ...props }, ref) => /* @__PURE__ */ jsx35(
|
|
5838
|
+
AlertDialogPrimitive.Action,
|
|
5839
|
+
{
|
|
5840
|
+
ref,
|
|
5841
|
+
className: cn(buttonVariantsBase(), className),
|
|
5842
|
+
"data-testid": testid,
|
|
5843
|
+
...props
|
|
5844
|
+
}
|
|
5845
|
+
));
|
|
5846
|
+
AlertDialogActionBase.displayName = AlertDialogPrimitive.Action.displayName;
|
|
5847
|
+
var AlertDialogCancelBase = React18.forwardRef(({ className, testid = "alertdialog-cancel", ...props }, ref) => /* @__PURE__ */ jsx35(
|
|
5848
|
+
AlertDialogPrimitive.Cancel,
|
|
5849
|
+
{
|
|
5850
|
+
ref,
|
|
5851
|
+
className: cn(buttonVariantsBase({ variant: "outline" }), className),
|
|
5852
|
+
"data-testid": testid,
|
|
5853
|
+
...props
|
|
5854
|
+
}
|
|
5855
|
+
));
|
|
5856
|
+
AlertDialogCancelBase.displayName = AlertDialogPrimitive.Cancel.displayName;
|
|
5857
|
+
|
|
5858
|
+
// src/components/ui/feedback/DestructiveDialog.tsx
|
|
5859
|
+
import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
5860
|
+
var DestructiveDialog = ({
|
|
5861
|
+
title,
|
|
5862
|
+
description,
|
|
5863
|
+
onConfirm,
|
|
5864
|
+
onCancel,
|
|
5865
|
+
children,
|
|
5866
|
+
triggerContent
|
|
5867
|
+
}) => {
|
|
5868
|
+
const triggerEl = React19.isValidElement(children) ? /* @__PURE__ */ jsx36(AlertDialogTriggerBase, { asChild: true, children }) : /* @__PURE__ */ jsx36(AlertDialogTriggerBase, { children: /* @__PURE__ */ jsx36(ButtonBase, { variant: "destructive", children: triggerContent ?? "Excluir" }) });
|
|
5869
|
+
return /* @__PURE__ */ jsxs26(AlertDialogBase, { children: [
|
|
5870
|
+
triggerEl,
|
|
5871
|
+
/* @__PURE__ */ jsxs26(
|
|
5872
|
+
AlertDialogContentBase,
|
|
5873
|
+
{
|
|
5874
|
+
className: cn("border border-destructive bg-background"),
|
|
5875
|
+
children: [
|
|
5876
|
+
/* @__PURE__ */ jsxs26("div", { className: "flex items-start gap-4", children: [
|
|
5877
|
+
/* @__PURE__ */ jsx36("div", { className: "flex items-center justify-center w-10 h-10 rounded-full ring-1 ring-destructive/30", children: /* @__PURE__ */ jsx36(XCircleIcon, { className: "w-6 h-6 text-destructive" }) }),
|
|
5878
|
+
/* @__PURE__ */ jsxs26("div", { className: "flex-1", children: [
|
|
5879
|
+
/* @__PURE__ */ jsx36(AlertDialogTitleBase, { className: "text-lg sm:text-xl font-semibold text-destructive", children: title }),
|
|
5880
|
+
/* @__PURE__ */ jsx36(AlertDialogDescriptionBase, { className: "mt-2 text-sm text-muted-foreground", children: description })
|
|
5881
|
+
] })
|
|
5882
|
+
] }),
|
|
5883
|
+
/* @__PURE__ */ jsxs26(AlertDialogFooterBase, { className: "mt-2 flex justify-end gap-3", children: [
|
|
5884
|
+
/* @__PURE__ */ jsx36(
|
|
5885
|
+
AlertDialogCancelBase,
|
|
5886
|
+
{
|
|
5887
|
+
onClick: onCancel,
|
|
5888
|
+
className: cn(
|
|
5889
|
+
buttonVariantsBase({ variant: "outline", size: "default" }),
|
|
5890
|
+
"hover:bg-foreground/5 hover:text-primary hover:opacity-90 hover:shadow-none"
|
|
5891
|
+
),
|
|
5892
|
+
children: "Cancelar"
|
|
5893
|
+
}
|
|
5894
|
+
),
|
|
5895
|
+
/* @__PURE__ */ jsx36(
|
|
5896
|
+
AlertDialogActionBase,
|
|
5897
|
+
{
|
|
5898
|
+
onClick: onConfirm,
|
|
5899
|
+
className: cn(
|
|
5900
|
+
buttonVariantsBase({ variant: "destructive", size: "default" })
|
|
5901
|
+
),
|
|
5902
|
+
children: "Confirmar"
|
|
5903
|
+
}
|
|
5904
|
+
)
|
|
5905
|
+
] })
|
|
5906
|
+
]
|
|
5907
|
+
}
|
|
5908
|
+
)
|
|
5909
|
+
] });
|
|
5910
|
+
};
|
|
5911
|
+
|
|
5912
|
+
// src/components/ui/form/SmallButtons.tsx
|
|
5913
|
+
import {
|
|
5914
|
+
PencilSimpleIcon,
|
|
5915
|
+
FloppyDiskIcon,
|
|
5916
|
+
PlusIcon as PlusIcon2,
|
|
5917
|
+
XIcon as XIcon5,
|
|
5918
|
+
TrashIcon as TrashIcon2,
|
|
5919
|
+
DownloadSimpleIcon,
|
|
5920
|
+
UploadSimpleIcon,
|
|
5921
|
+
CopyIcon,
|
|
5922
|
+
ArrowClockwiseIcon,
|
|
5923
|
+
MagnifyingGlassIcon as MagnifyingGlassIcon2,
|
|
5924
|
+
ArrowLeftIcon,
|
|
5925
|
+
GearIcon,
|
|
5926
|
+
BellIcon,
|
|
5927
|
+
DotsThreeIcon as DotsThreeIcon2,
|
|
5928
|
+
CheckIcon as CheckIcon6,
|
|
5929
|
+
FunnelIcon,
|
|
5930
|
+
HeartIcon,
|
|
5931
|
+
StarIcon,
|
|
5932
|
+
EyeIcon,
|
|
5933
|
+
EyeSlashIcon,
|
|
5934
|
+
LockIcon,
|
|
5935
|
+
LockOpenIcon,
|
|
5936
|
+
ArrowsLeftRightIcon
|
|
5937
|
+
} from "@phosphor-icons/react";
|
|
5938
|
+
import { jsx as jsx37 } from "react/jsx-runtime";
|
|
5939
|
+
var EditButton = React20.forwardRef(
|
|
5940
|
+
({
|
|
5941
|
+
disabled,
|
|
5942
|
+
onClick,
|
|
5943
|
+
testid = "button-edit",
|
|
5944
|
+
className,
|
|
5945
|
+
iconSize = 18,
|
|
5946
|
+
iconColor,
|
|
5947
|
+
variant = "default",
|
|
5948
|
+
size = "icon",
|
|
5949
|
+
...props
|
|
5950
|
+
}, ref) => /* @__PURE__ */ jsx37(
|
|
5951
|
+
ButtonBase,
|
|
5952
|
+
{
|
|
5953
|
+
ref,
|
|
5954
|
+
variant,
|
|
5955
|
+
size,
|
|
5956
|
+
onClick,
|
|
5957
|
+
disabled,
|
|
5958
|
+
testid,
|
|
5959
|
+
className: cn(
|
|
5960
|
+
"transition-all duration-200 ease-in-out group",
|
|
5961
|
+
"hover:scale-105",
|
|
5962
|
+
"active:scale-95",
|
|
5963
|
+
"disabled:hover:scale-100",
|
|
5964
|
+
className
|
|
5965
|
+
),
|
|
5966
|
+
...props,
|
|
5967
|
+
children: /* @__PURE__ */ jsx37(
|
|
5968
|
+
PencilSimpleIcon,
|
|
5969
|
+
{
|
|
5970
|
+
size: iconSize,
|
|
5971
|
+
color: iconColor,
|
|
5972
|
+
className: "transition-transform duration-200 group-hover:-rotate-12"
|
|
5973
|
+
}
|
|
5974
|
+
)
|
|
5975
|
+
}
|
|
5976
|
+
)
|
|
5977
|
+
);
|
|
5978
|
+
EditButton.displayName = "EditButton";
|
|
5979
|
+
var ChangeButton = React20.forwardRef(
|
|
5980
|
+
({
|
|
5981
|
+
disabled,
|
|
5982
|
+
onClick,
|
|
5983
|
+
testid = "button-edit",
|
|
5984
|
+
className,
|
|
5985
|
+
iconSize = 18,
|
|
5986
|
+
iconColor,
|
|
5987
|
+
variant = "default",
|
|
5988
|
+
size = "icon",
|
|
5989
|
+
...props
|
|
5990
|
+
}, ref) => /* @__PURE__ */ jsx37(
|
|
5991
|
+
ButtonBase,
|
|
5992
|
+
{
|
|
5993
|
+
ref,
|
|
5994
|
+
variant,
|
|
5995
|
+
size,
|
|
5996
|
+
onClick,
|
|
5997
|
+
disabled,
|
|
5998
|
+
testid,
|
|
5999
|
+
className: cn(
|
|
6000
|
+
"transition-all duration-200 ease-in-out group",
|
|
6001
|
+
"hover:scale-105",
|
|
6002
|
+
"active:scale-95",
|
|
6003
|
+
"disabled:hover:scale-100",
|
|
6004
|
+
className
|
|
6005
|
+
),
|
|
6006
|
+
...props,
|
|
6007
|
+
children: /* @__PURE__ */ jsx37(
|
|
6008
|
+
ArrowsLeftRightIcon,
|
|
6009
|
+
{
|
|
6010
|
+
size: iconSize,
|
|
6011
|
+
color: iconColor,
|
|
6012
|
+
className: "transition-transform duration-200 group-hover:-rotate-180"
|
|
6013
|
+
}
|
|
6014
|
+
)
|
|
6015
|
+
}
|
|
6016
|
+
)
|
|
6017
|
+
);
|
|
6018
|
+
ChangeButton.displayName = "ChangeButton";
|
|
6019
|
+
var SaveButton = React20.forwardRef(
|
|
6020
|
+
({
|
|
6021
|
+
disabled,
|
|
6022
|
+
onClick,
|
|
6023
|
+
testid = "button-save",
|
|
6024
|
+
className,
|
|
6025
|
+
iconSize = 18,
|
|
6026
|
+
iconColor,
|
|
6027
|
+
variant = "default",
|
|
6028
|
+
size = "icon",
|
|
6029
|
+
...props
|
|
6030
|
+
}, ref) => /* @__PURE__ */ jsx37(
|
|
6031
|
+
ButtonBase,
|
|
6032
|
+
{
|
|
6033
|
+
ref,
|
|
6034
|
+
variant,
|
|
6035
|
+
size,
|
|
6036
|
+
onClick,
|
|
6037
|
+
disabled,
|
|
6038
|
+
testid,
|
|
6039
|
+
className: cn(
|
|
6040
|
+
"transition-all duration-200 ease-in-out group",
|
|
6041
|
+
"hover:scale-105",
|
|
6042
|
+
"active:scale-95",
|
|
6043
|
+
"disabled:hover:scale-100",
|
|
6044
|
+
className
|
|
6045
|
+
),
|
|
6046
|
+
...props,
|
|
6047
|
+
children: /* @__PURE__ */ jsx37(
|
|
6048
|
+
FloppyDiskIcon,
|
|
6049
|
+
{
|
|
6050
|
+
size: iconSize,
|
|
6051
|
+
color: iconColor,
|
|
6052
|
+
className: "transition-transform duration-200 group-hover:scale-110"
|
|
6053
|
+
}
|
|
6054
|
+
)
|
|
6055
|
+
}
|
|
6056
|
+
)
|
|
6057
|
+
);
|
|
6058
|
+
SaveButton.displayName = "SaveButton";
|
|
6059
|
+
var AddButton = React20.forwardRef(
|
|
6060
|
+
({
|
|
6061
|
+
disabled,
|
|
6062
|
+
onClick,
|
|
6063
|
+
testid = "button-add",
|
|
6064
|
+
className,
|
|
6065
|
+
iconSize = 18,
|
|
6066
|
+
iconColor,
|
|
6067
|
+
variant = "default",
|
|
6068
|
+
size = "icon",
|
|
6069
|
+
...props
|
|
6070
|
+
}, ref) => /* @__PURE__ */ jsx37(
|
|
6071
|
+
ButtonBase,
|
|
6072
|
+
{
|
|
6073
|
+
ref,
|
|
6074
|
+
variant,
|
|
6075
|
+
size,
|
|
6076
|
+
onClick,
|
|
6077
|
+
disabled,
|
|
6078
|
+
testid,
|
|
6079
|
+
className: cn(
|
|
6080
|
+
"transition-all duration-200 ease-in-out",
|
|
6081
|
+
"hover:scale-105",
|
|
6082
|
+
"active:scale-95",
|
|
6083
|
+
"disabled:hover:scale-100",
|
|
6084
|
+
className
|
|
6085
|
+
),
|
|
6086
|
+
...props,
|
|
6087
|
+
children: /* @__PURE__ */ jsx37(
|
|
6088
|
+
PlusIcon2,
|
|
6089
|
+
{
|
|
6090
|
+
size: iconSize,
|
|
6091
|
+
color: iconColor,
|
|
6092
|
+
className: "transition-transform duration-300"
|
|
6093
|
+
}
|
|
6094
|
+
)
|
|
6095
|
+
}
|
|
6096
|
+
)
|
|
6097
|
+
);
|
|
6098
|
+
AddButton.displayName = "AddButton";
|
|
6099
|
+
var CloseButton = React20.forwardRef(
|
|
6100
|
+
({
|
|
6101
|
+
disabled,
|
|
6102
|
+
onClick,
|
|
6103
|
+
testid = "button-close",
|
|
6104
|
+
className,
|
|
6105
|
+
iconSize = 18,
|
|
6106
|
+
iconColor,
|
|
6107
|
+
variant = "ghost",
|
|
6108
|
+
size = "icon",
|
|
6109
|
+
...props
|
|
6110
|
+
}, ref) => /* @__PURE__ */ jsx37(
|
|
6111
|
+
ButtonBase,
|
|
6112
|
+
{
|
|
6113
|
+
ref,
|
|
6114
|
+
variant,
|
|
6115
|
+
size,
|
|
6116
|
+
onClick,
|
|
6117
|
+
disabled,
|
|
6118
|
+
testid,
|
|
6119
|
+
className: cn(
|
|
6120
|
+
"transition-all duration-200 ease-in-out",
|
|
6121
|
+
"hover:scale-110 hover:rotate-90 hover:bg-destructive/10",
|
|
6122
|
+
"active:scale-95 active:rotate-0",
|
|
6123
|
+
"disabled:hover:scale-100 disabled:hover:rotate-0",
|
|
6124
|
+
className
|
|
6125
|
+
),
|
|
6126
|
+
...props,
|
|
6127
|
+
children: /* @__PURE__ */ jsx37(
|
|
6128
|
+
XIcon5,
|
|
6129
|
+
{
|
|
6130
|
+
size: iconSize,
|
|
6131
|
+
color: iconColor,
|
|
6132
|
+
className: "transition-transform duration-300"
|
|
6133
|
+
}
|
|
6134
|
+
)
|
|
6135
|
+
}
|
|
6136
|
+
)
|
|
6137
|
+
);
|
|
6138
|
+
CloseButton.displayName = "CloseButton";
|
|
6139
|
+
var DeleteButton = React20.forwardRef(
|
|
6140
|
+
({
|
|
6141
|
+
disabled,
|
|
6142
|
+
onClick,
|
|
6143
|
+
testid = "button-delete",
|
|
6144
|
+
className,
|
|
6145
|
+
iconSize = 18,
|
|
6146
|
+
iconColor,
|
|
6147
|
+
variant = "destructive",
|
|
6148
|
+
size = "icon",
|
|
6149
|
+
destructiveTitle,
|
|
6150
|
+
destructiveDescription,
|
|
6151
|
+
destructiveOnConfirm,
|
|
6152
|
+
destructiveOnCancel,
|
|
6153
|
+
destructiveTriggerContent,
|
|
6154
|
+
...props
|
|
6155
|
+
}, ref) => {
|
|
6156
|
+
const effectiveDestructiveTitle = destructiveTitle ?? props.title;
|
|
6157
|
+
const trigger = /* @__PURE__ */ jsx37(
|
|
6158
|
+
ButtonBase,
|
|
6159
|
+
{
|
|
6160
|
+
ref,
|
|
6161
|
+
variant,
|
|
6162
|
+
size,
|
|
6163
|
+
onClick,
|
|
6164
|
+
disabled,
|
|
6165
|
+
testid,
|
|
6166
|
+
className: cn(
|
|
6167
|
+
"transition-all duration-200 ease-in-out group",
|
|
6168
|
+
"hover:scale-105",
|
|
6169
|
+
"active:scale-95",
|
|
6170
|
+
"disabled:hover:scale-100",
|
|
6171
|
+
className
|
|
6172
|
+
),
|
|
6173
|
+
...props,
|
|
6174
|
+
children: /* @__PURE__ */ jsx37(
|
|
6175
|
+
TrashIcon2,
|
|
6176
|
+
{
|
|
6177
|
+
size: iconSize,
|
|
6178
|
+
color: iconColor,
|
|
6179
|
+
className: "transition-transform duration-200 group-hover:scale-110"
|
|
6180
|
+
}
|
|
6181
|
+
)
|
|
6182
|
+
}
|
|
6183
|
+
);
|
|
6184
|
+
if (effectiveDestructiveTitle) {
|
|
6185
|
+
return /* @__PURE__ */ jsx37(
|
|
6186
|
+
DestructiveDialog,
|
|
6187
|
+
{
|
|
6188
|
+
title: effectiveDestructiveTitle,
|
|
6189
|
+
description: destructiveDescription ?? "Essa a\xE7\xE3o \xE9 irrevers\xEDvel.",
|
|
6190
|
+
onConfirm: destructiveOnConfirm ?? (() => {
|
|
6191
|
+
}),
|
|
6192
|
+
onCancel: destructiveOnCancel,
|
|
6193
|
+
triggerContent: destructiveTriggerContent,
|
|
6194
|
+
children: trigger
|
|
6195
|
+
}
|
|
6196
|
+
);
|
|
6197
|
+
}
|
|
6198
|
+
return trigger;
|
|
6199
|
+
}
|
|
6200
|
+
);
|
|
6201
|
+
DeleteButton.displayName = "DeleteButton";
|
|
6202
|
+
var DownloadButton = ({
|
|
6203
|
+
disabled,
|
|
6204
|
+
onClick,
|
|
6205
|
+
testid = "button-download",
|
|
6206
|
+
...props
|
|
6207
|
+
}) => /* @__PURE__ */ jsx37(
|
|
6208
|
+
ButtonBase,
|
|
6209
|
+
{
|
|
6210
|
+
variant: "outline",
|
|
6211
|
+
size: "icon",
|
|
6212
|
+
onClick,
|
|
6213
|
+
disabled,
|
|
6214
|
+
testid,
|
|
6215
|
+
className: cn(
|
|
6216
|
+
"transition-all duration-200 ease-in-out group",
|
|
6217
|
+
"hover:scale-105",
|
|
6218
|
+
"active:scale-95",
|
|
6219
|
+
"disabled:hover:scale-100"
|
|
6220
|
+
),
|
|
6221
|
+
...props,
|
|
6222
|
+
children: /* @__PURE__ */ jsx37(
|
|
6223
|
+
DownloadSimpleIcon,
|
|
6224
|
+
{
|
|
6225
|
+
size: 18,
|
|
6226
|
+
className: "transition-transform duration-300 group-hover:translate-y-0.5"
|
|
6227
|
+
}
|
|
6228
|
+
)
|
|
6229
|
+
}
|
|
6230
|
+
);
|
|
6231
|
+
var UploadButton = ({
|
|
6232
|
+
disabled,
|
|
6233
|
+
onClick,
|
|
6234
|
+
testid = "button-upload",
|
|
6235
|
+
...props
|
|
6236
|
+
}) => /* @__PURE__ */ jsx37(
|
|
6237
|
+
ButtonBase,
|
|
6238
|
+
{
|
|
6239
|
+
variant: "outline",
|
|
6240
|
+
size: "icon",
|
|
6241
|
+
onClick,
|
|
6242
|
+
disabled,
|
|
6243
|
+
testid,
|
|
6244
|
+
className: cn(
|
|
6245
|
+
"transition-all duration-200 ease-in-out group",
|
|
6246
|
+
"hover:scale-105",
|
|
6247
|
+
"active:scale-95",
|
|
6248
|
+
"disabled:hover:scale-100"
|
|
6249
|
+
),
|
|
6250
|
+
...props,
|
|
6251
|
+
children: /* @__PURE__ */ jsx37(
|
|
6252
|
+
UploadSimpleIcon,
|
|
6253
|
+
{
|
|
6254
|
+
size: 18,
|
|
6255
|
+
className: "transition-transform duration-300 group-hover:-translate-y-0.5"
|
|
6256
|
+
}
|
|
6257
|
+
)
|
|
6258
|
+
}
|
|
6259
|
+
);
|
|
6260
|
+
var CopyButton = ({
|
|
6261
|
+
disabled,
|
|
6262
|
+
onClick,
|
|
6263
|
+
testid = "button-copy",
|
|
6264
|
+
...props
|
|
6265
|
+
}) => /* @__PURE__ */ jsx37(
|
|
6266
|
+
ButtonBase,
|
|
6267
|
+
{
|
|
6268
|
+
variant: "ghost",
|
|
6269
|
+
size: "icon",
|
|
6270
|
+
onClick,
|
|
6271
|
+
disabled,
|
|
6272
|
+
testid,
|
|
6273
|
+
className: cn(
|
|
6274
|
+
"transition-all duration-200 ease-in-out group",
|
|
6275
|
+
"hover:scale-105",
|
|
6276
|
+
"active:scale-90",
|
|
6277
|
+
"disabled:hover:scale-100"
|
|
6278
|
+
),
|
|
6279
|
+
...props,
|
|
6280
|
+
children: /* @__PURE__ */ jsx37(
|
|
6281
|
+
CopyIcon,
|
|
6282
|
+
{
|
|
6283
|
+
size: 18,
|
|
6284
|
+
className: "transition-transform duration-200 group-hover:scale-110"
|
|
6285
|
+
}
|
|
6286
|
+
)
|
|
6287
|
+
}
|
|
6288
|
+
);
|
|
6289
|
+
var RefreshButton = ({
|
|
6290
|
+
disabled,
|
|
6291
|
+
onClick,
|
|
6292
|
+
testid = "button-refresh",
|
|
6293
|
+
...props
|
|
6294
|
+
}) => /* @__PURE__ */ jsx37(
|
|
6295
|
+
ButtonBase,
|
|
6296
|
+
{
|
|
6297
|
+
variant: "ghost",
|
|
6298
|
+
size: "icon",
|
|
6299
|
+
onClick,
|
|
6300
|
+
disabled,
|
|
6301
|
+
testid,
|
|
6302
|
+
className: cn(
|
|
6303
|
+
"transition-all duration-200 ease-in-out group",
|
|
6304
|
+
"hover:scale-105",
|
|
6305
|
+
"active:scale-95",
|
|
6306
|
+
"disabled:hover:scale-100"
|
|
6307
|
+
),
|
|
6308
|
+
...props,
|
|
6309
|
+
children: /* @__PURE__ */ jsx37(
|
|
6310
|
+
ArrowClockwiseIcon,
|
|
6311
|
+
{
|
|
6312
|
+
size: 18,
|
|
6313
|
+
className: "transition-transform duration-500 group-hover:rotate-180"
|
|
6314
|
+
}
|
|
6315
|
+
)
|
|
6316
|
+
}
|
|
6317
|
+
);
|
|
6318
|
+
var SearchButton = ({
|
|
6319
|
+
disabled,
|
|
6320
|
+
onClick,
|
|
6321
|
+
testid = "button-search",
|
|
6322
|
+
...props
|
|
6323
|
+
}) => /* @__PURE__ */ jsx37(
|
|
6324
|
+
ButtonBase,
|
|
6325
|
+
{
|
|
6326
|
+
variant: "outline",
|
|
6327
|
+
size: "icon",
|
|
6328
|
+
onClick,
|
|
6329
|
+
disabled,
|
|
6330
|
+
testid,
|
|
6331
|
+
className: cn(
|
|
6332
|
+
"transition-all duration-200 ease-in-out group",
|
|
6333
|
+
"hover:scale-105",
|
|
6334
|
+
"active:scale-95",
|
|
6335
|
+
"disabled:hover:scale-100"
|
|
6336
|
+
),
|
|
6337
|
+
...props,
|
|
6338
|
+
children: /* @__PURE__ */ jsx37(
|
|
6339
|
+
MagnifyingGlassIcon2,
|
|
6340
|
+
{
|
|
6341
|
+
size: 18,
|
|
6342
|
+
className: "transition-transform duration-200 group-hover:scale-110 group-hover:-rotate-12"
|
|
6343
|
+
}
|
|
6344
|
+
)
|
|
6345
|
+
}
|
|
6346
|
+
);
|
|
6347
|
+
var BackButton = ({
|
|
6348
|
+
disabled,
|
|
6349
|
+
onClick,
|
|
6350
|
+
testid = "button-back",
|
|
6351
|
+
...props
|
|
6352
|
+
}) => /* @__PURE__ */ jsx37(
|
|
6353
|
+
ButtonBase,
|
|
6354
|
+
{
|
|
6355
|
+
variant: "ghost",
|
|
6356
|
+
size: "icon",
|
|
6357
|
+
onClick,
|
|
6358
|
+
disabled,
|
|
6359
|
+
testid,
|
|
6360
|
+
className: cn(
|
|
6361
|
+
"transition-all duration-200 ease-in-out group",
|
|
6362
|
+
"hover:scale-105",
|
|
6363
|
+
"active:scale-95",
|
|
6364
|
+
"disabled:hover:scale-100"
|
|
6365
|
+
),
|
|
6366
|
+
...props,
|
|
6367
|
+
children: /* @__PURE__ */ jsx37(
|
|
6368
|
+
ArrowLeftIcon,
|
|
6369
|
+
{
|
|
6370
|
+
size: 18,
|
|
6371
|
+
className: "transition-transform duration-300 group-hover:-translate-x-1"
|
|
6372
|
+
}
|
|
6373
|
+
)
|
|
6374
|
+
}
|
|
6375
|
+
);
|
|
6376
|
+
var SettingsButton = ({
|
|
6377
|
+
disabled,
|
|
6378
|
+
onClick,
|
|
6379
|
+
testid = "button-settings",
|
|
6380
|
+
...props
|
|
6381
|
+
}) => /* @__PURE__ */ jsx37(
|
|
6382
|
+
ButtonBase,
|
|
6383
|
+
{
|
|
6384
|
+
variant: "ghost",
|
|
6385
|
+
size: "icon",
|
|
6386
|
+
onClick,
|
|
6387
|
+
disabled,
|
|
6388
|
+
testid,
|
|
6389
|
+
className: cn(
|
|
6390
|
+
"transition-all duration-200 ease-in-out group",
|
|
6391
|
+
"hover:scale-105",
|
|
6392
|
+
"active:scale-95",
|
|
6393
|
+
"disabled:hover:scale-100"
|
|
6394
|
+
),
|
|
6395
|
+
...props,
|
|
6396
|
+
children: /* @__PURE__ */ jsx37(
|
|
6397
|
+
GearIcon,
|
|
6398
|
+
{
|
|
6399
|
+
size: 18,
|
|
6400
|
+
className: "transition-transform duration-500 group-hover:rotate-90"
|
|
6401
|
+
}
|
|
6402
|
+
)
|
|
6403
|
+
}
|
|
6404
|
+
);
|
|
6405
|
+
var NotificationButton = ({
|
|
6406
|
+
disabled,
|
|
6407
|
+
onClick,
|
|
6408
|
+
testid = "button-notification",
|
|
6409
|
+
...props
|
|
6410
|
+
}) => /* @__PURE__ */ jsx37(
|
|
6411
|
+
ButtonBase,
|
|
6412
|
+
{
|
|
6413
|
+
variant: "ghost",
|
|
6414
|
+
size: "icon",
|
|
6415
|
+
onClick,
|
|
6416
|
+
disabled,
|
|
6417
|
+
testid,
|
|
6418
|
+
className: cn(
|
|
6419
|
+
"transition-all duration-200 ease-in-out group",
|
|
6420
|
+
"hover:scale-105",
|
|
6421
|
+
"active:scale-95",
|
|
6422
|
+
"disabled:hover:scale-100"
|
|
6423
|
+
),
|
|
6424
|
+
...props,
|
|
6425
|
+
children: /* @__PURE__ */ jsx37(
|
|
6426
|
+
BellIcon,
|
|
6427
|
+
{
|
|
6428
|
+
size: 18,
|
|
6429
|
+
className: "transition-transform duration-300 group-hover:scale-110 group-hover:-rotate-12"
|
|
6430
|
+
}
|
|
6431
|
+
)
|
|
6432
|
+
}
|
|
6433
|
+
);
|
|
6434
|
+
var MoreButton = ({
|
|
6435
|
+
disabled,
|
|
6436
|
+
onClick,
|
|
6437
|
+
testid = "button-more",
|
|
6438
|
+
...props
|
|
6439
|
+
}) => /* @__PURE__ */ jsx37(
|
|
6440
|
+
ButtonBase,
|
|
6441
|
+
{
|
|
6442
|
+
variant: "ghost",
|
|
6443
|
+
size: "icon",
|
|
6444
|
+
onClick,
|
|
6445
|
+
disabled,
|
|
6446
|
+
testid,
|
|
6447
|
+
className: cn(
|
|
6448
|
+
"transition-all duration-200 ease-in-out group",
|
|
6449
|
+
"hover:scale-105",
|
|
6450
|
+
"active:scale-95",
|
|
6451
|
+
"disabled:hover:scale-100"
|
|
6452
|
+
),
|
|
6453
|
+
...props,
|
|
6454
|
+
children: /* @__PURE__ */ jsx37(
|
|
6455
|
+
DotsThreeIcon2,
|
|
6456
|
+
{
|
|
6457
|
+
size: 18,
|
|
6458
|
+
className: "transition-transform duration-200 group-hover:scale-110"
|
|
6459
|
+
}
|
|
6460
|
+
)
|
|
6461
|
+
}
|
|
6462
|
+
);
|
|
6463
|
+
var CheckButton = ({
|
|
6464
|
+
disabled,
|
|
6465
|
+
onClick,
|
|
6466
|
+
testid = "button-check",
|
|
6467
|
+
...props
|
|
6468
|
+
}) => /* @__PURE__ */ jsx37(
|
|
6469
|
+
ButtonBase,
|
|
6470
|
+
{
|
|
6471
|
+
variant: "default",
|
|
6472
|
+
size: "icon",
|
|
6473
|
+
onClick,
|
|
6474
|
+
disabled,
|
|
6475
|
+
testid,
|
|
6476
|
+
className: cn(
|
|
6477
|
+
"transition-all duration-200 ease-in-out group",
|
|
6478
|
+
"hover:scale-110",
|
|
6479
|
+
"active:scale-95",
|
|
6480
|
+
"disabled:hover:scale-100"
|
|
6481
|
+
),
|
|
6482
|
+
...props,
|
|
6483
|
+
children: /* @__PURE__ */ jsx37(
|
|
6484
|
+
CheckIcon6,
|
|
6485
|
+
{
|
|
6486
|
+
size: 18,
|
|
6487
|
+
className: "transition-transform duration-200 group-hover:scale-110"
|
|
6488
|
+
}
|
|
6489
|
+
)
|
|
6490
|
+
}
|
|
6491
|
+
);
|
|
6492
|
+
var FilterButton = ({
|
|
6493
|
+
disabled,
|
|
6494
|
+
onClick,
|
|
6495
|
+
testid = "button-filter",
|
|
6496
|
+
active = false,
|
|
6497
|
+
className,
|
|
6498
|
+
iconSize = 18,
|
|
6499
|
+
iconColor,
|
|
6500
|
+
variant,
|
|
6501
|
+
size = "icon",
|
|
6502
|
+
...props
|
|
6503
|
+
}) => /* @__PURE__ */ jsx37(
|
|
6504
|
+
ButtonBase,
|
|
6505
|
+
{
|
|
6506
|
+
variant: variant || (active ? "default" : "outline"),
|
|
6507
|
+
size,
|
|
6508
|
+
onClick,
|
|
6509
|
+
disabled,
|
|
6510
|
+
testid,
|
|
6511
|
+
className: cn(
|
|
6512
|
+
"transition-all duration-200 ease-in-out",
|
|
6513
|
+
"hover:scale-105",
|
|
6514
|
+
"active:scale-95",
|
|
6515
|
+
"disabled:hover:scale-100",
|
|
6516
|
+
className
|
|
6517
|
+
),
|
|
6518
|
+
...props,
|
|
6519
|
+
children: /* @__PURE__ */ jsx37(
|
|
6520
|
+
FunnelIcon,
|
|
6521
|
+
{
|
|
6522
|
+
size: iconSize,
|
|
6523
|
+
color: iconColor,
|
|
6524
|
+
weight: active ? "fill" : "regular",
|
|
6525
|
+
className: "transition-all duration-200"
|
|
6526
|
+
}
|
|
6527
|
+
)
|
|
6528
|
+
}
|
|
6529
|
+
);
|
|
6530
|
+
var LikeButton = ({
|
|
6531
|
+
disabled,
|
|
6532
|
+
onClick,
|
|
6533
|
+
testid = "button-like",
|
|
6534
|
+
isLiked = false,
|
|
6535
|
+
className,
|
|
6536
|
+
iconSize = 18,
|
|
6537
|
+
iconColor,
|
|
6538
|
+
variant = "ghost",
|
|
6539
|
+
size = "icon",
|
|
6540
|
+
...props
|
|
6541
|
+
}) => /* @__PURE__ */ jsx37(
|
|
6542
|
+
ButtonBase,
|
|
6543
|
+
{
|
|
6544
|
+
variant,
|
|
6545
|
+
size,
|
|
6546
|
+
onClick,
|
|
6547
|
+
disabled,
|
|
6548
|
+
testid,
|
|
6549
|
+
className: cn(
|
|
6550
|
+
"transition-all duration-200 ease-in-out group",
|
|
6551
|
+
"hover:scale-110",
|
|
6552
|
+
"active:scale-95",
|
|
6553
|
+
"disabled:hover:scale-100",
|
|
6554
|
+
!iconColor && (isLiked ? "text-red-500 dark:text-red-400 hover:text-red-600 dark:hover:text-red-300" : "hover:text-red-500 dark:hover:text-red-400"),
|
|
6555
|
+
className
|
|
6556
|
+
),
|
|
6557
|
+
...props,
|
|
6558
|
+
children: /* @__PURE__ */ jsx37(
|
|
6559
|
+
HeartIcon,
|
|
6560
|
+
{
|
|
6561
|
+
size: iconSize,
|
|
6562
|
+
color: iconColor,
|
|
6563
|
+
weight: isLiked ? "fill" : "regular",
|
|
6564
|
+
className: "transition-all duration-300 group-hover:scale-110"
|
|
6565
|
+
}
|
|
6566
|
+
)
|
|
6567
|
+
}
|
|
6568
|
+
);
|
|
6569
|
+
var FavoriteButton = ({
|
|
6570
|
+
disabled,
|
|
6571
|
+
onClick,
|
|
6572
|
+
testid = "button-favorite",
|
|
6573
|
+
isFavorite = false,
|
|
6574
|
+
className,
|
|
6575
|
+
iconSize = 18,
|
|
6576
|
+
iconColor,
|
|
6577
|
+
variant = "ghost",
|
|
6578
|
+
size = "icon",
|
|
6579
|
+
...props
|
|
6580
|
+
}) => /* @__PURE__ */ jsx37(
|
|
6581
|
+
ButtonBase,
|
|
6582
|
+
{
|
|
6583
|
+
variant,
|
|
6584
|
+
size,
|
|
6585
|
+
onClick,
|
|
6586
|
+
disabled,
|
|
6587
|
+
testid,
|
|
6588
|
+
className: cn(
|
|
6589
|
+
"transition-all duration-200 ease-in-out group",
|
|
6590
|
+
"hover:scale-110",
|
|
6591
|
+
"active:scale-95",
|
|
6592
|
+
"disabled:hover:scale-100",
|
|
6593
|
+
!iconColor && (isFavorite ? "text-yellow-500 dark:text-yellow-400 hover:text-yellow-600 dark:hover:text-yellow-300" : "hover:text-yellow-500 dark:hover:text-yellow-400"),
|
|
6594
|
+
className
|
|
6595
|
+
),
|
|
6596
|
+
...props,
|
|
6597
|
+
children: /* @__PURE__ */ jsx37(
|
|
6598
|
+
StarIcon,
|
|
6599
|
+
{
|
|
6600
|
+
size: iconSize,
|
|
6601
|
+
color: iconColor,
|
|
6602
|
+
weight: isFavorite ? "fill" : "regular",
|
|
6603
|
+
className: "transition-all duration-300 group-hover:rotate-12"
|
|
6604
|
+
}
|
|
6605
|
+
)
|
|
6606
|
+
}
|
|
6607
|
+
);
|
|
6608
|
+
var VisibilityButton = ({
|
|
6609
|
+
disabled,
|
|
6610
|
+
onClick,
|
|
6611
|
+
testid = "button-visibility",
|
|
6612
|
+
isVisible = true,
|
|
6613
|
+
className,
|
|
6614
|
+
iconSize = 18,
|
|
6615
|
+
iconColor,
|
|
6616
|
+
variant = "ghost",
|
|
6617
|
+
size = "icon",
|
|
6618
|
+
...props
|
|
6619
|
+
}) => /* @__PURE__ */ jsx37(
|
|
6620
|
+
ButtonBase,
|
|
6621
|
+
{
|
|
6622
|
+
variant,
|
|
6623
|
+
size,
|
|
6624
|
+
onClick,
|
|
6625
|
+
disabled,
|
|
6626
|
+
testid,
|
|
6627
|
+
className: cn(
|
|
6628
|
+
"transition-all duration-200 ease-in-out",
|
|
6629
|
+
"hover:scale-105",
|
|
6630
|
+
"active:scale-95",
|
|
6631
|
+
"disabled:hover:scale-100",
|
|
6632
|
+
className
|
|
6633
|
+
),
|
|
6634
|
+
...props,
|
|
6635
|
+
children: isVisible ? /* @__PURE__ */ jsx37(
|
|
6636
|
+
EyeIcon,
|
|
6637
|
+
{
|
|
6638
|
+
size: iconSize,
|
|
6639
|
+
color: iconColor,
|
|
6640
|
+
className: "transition-opacity duration-200"
|
|
6641
|
+
}
|
|
6642
|
+
) : /* @__PURE__ */ jsx37(
|
|
6643
|
+
EyeSlashIcon,
|
|
6644
|
+
{
|
|
6645
|
+
size: iconSize,
|
|
6646
|
+
color: iconColor,
|
|
6647
|
+
className: "transition-opacity duration-200"
|
|
6648
|
+
}
|
|
6649
|
+
)
|
|
6650
|
+
}
|
|
6651
|
+
);
|
|
6652
|
+
var ViewButton = (props) => /* @__PURE__ */ jsx37(VisibilityButton, { isVisible: true, testid: "button-view", ...props });
|
|
6653
|
+
var HideButton = (props) => /* @__PURE__ */ jsx37(VisibilityButton, { isVisible: false, testid: "button-hide", ...props });
|
|
6654
|
+
var LockButton = ({
|
|
6655
|
+
disabled,
|
|
6656
|
+
onClick,
|
|
6657
|
+
testid = "button-lock",
|
|
6658
|
+
isLocked = true,
|
|
6659
|
+
className,
|
|
6660
|
+
iconSize = 18,
|
|
6661
|
+
iconColor,
|
|
6662
|
+
variant = "ghost",
|
|
6663
|
+
size = "icon",
|
|
6664
|
+
...props
|
|
6665
|
+
}) => /* @__PURE__ */ jsx37(
|
|
6666
|
+
ButtonBase,
|
|
6667
|
+
{
|
|
6668
|
+
variant,
|
|
6669
|
+
size,
|
|
6670
|
+
onClick,
|
|
6671
|
+
disabled,
|
|
6672
|
+
testid,
|
|
6673
|
+
className: cn(
|
|
6674
|
+
"transition-all duration-200 ease-in-out group",
|
|
6675
|
+
"hover:scale-105",
|
|
6676
|
+
"active:scale-95",
|
|
6677
|
+
"disabled:hover:scale-100",
|
|
6678
|
+
!iconColor && (isLocked ? "text-red-500 dark:text-red-400 hover:text-red-600 dark:hover:text-red-300" : "text-emerald-500 dark:text-emerald-400 hover:text-emerald-600 dark:hover:text-emerald-300"),
|
|
6679
|
+
className
|
|
6680
|
+
),
|
|
6681
|
+
...props,
|
|
6682
|
+
children: isLocked ? /* @__PURE__ */ jsx37(
|
|
6683
|
+
LockIcon,
|
|
6684
|
+
{
|
|
6685
|
+
size: iconSize,
|
|
6686
|
+
color: iconColor,
|
|
6687
|
+
className: "transition-all duration-200 group-hover:scale-110"
|
|
6688
|
+
}
|
|
6689
|
+
) : /* @__PURE__ */ jsx37(
|
|
6690
|
+
LockOpenIcon,
|
|
6691
|
+
{
|
|
6692
|
+
size: iconSize,
|
|
6693
|
+
color: iconColor,
|
|
6694
|
+
className: "transition-all duration-200 group-hover:scale-110"
|
|
6695
|
+
}
|
|
6696
|
+
)
|
|
6697
|
+
}
|
|
6698
|
+
);
|
|
6699
|
+
var UnlockButton = (props) => /* @__PURE__ */ jsx37(LockButton, { isLocked: false, testid: "button-unlock", ...props });
|
|
6700
|
+
|
|
6701
|
+
// src/components/ui/data/FileUploader.tsx
|
|
6702
|
+
import { Fragment as Fragment6, jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
6703
|
+
var formatFileSize = (bytes) => {
|
|
6704
|
+
if (bytes === 0) return "0 Bytes";
|
|
6705
|
+
const k = 1024;
|
|
6706
|
+
const sizes = ["Bytes", "KB", "MB", "GB"];
|
|
6707
|
+
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
6708
|
+
return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
|
|
6709
|
+
};
|
|
6710
|
+
var getFileExtension = (filename) => {
|
|
6711
|
+
return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);
|
|
6712
|
+
};
|
|
6713
|
+
var getFileTypeIcon = (file) => {
|
|
6714
|
+
const extension = getFileExtension(file.name).toLowerCase();
|
|
6715
|
+
const mimeType = file.type.toLowerCase();
|
|
6716
|
+
if (extension === "pdf" || mimeType === "application/pdf") {
|
|
6717
|
+
return /* @__PURE__ */ jsx38(FilePdfIcon, { size: 20, className: "text-red-500" });
|
|
6718
|
+
}
|
|
6719
|
+
if (["doc", "docx"].includes(extension) || mimeType.includes("word")) {
|
|
6720
|
+
return /* @__PURE__ */ jsx38(FileDocIcon, { size: 20, className: "text-blue-500" });
|
|
6721
|
+
}
|
|
6722
|
+
if (["xls", "xlsx"].includes(extension) || mimeType.includes("sheet")) {
|
|
6723
|
+
return /* @__PURE__ */ jsx38(FileXlsIcon, { size: 20, className: "text-green-500" });
|
|
6724
|
+
}
|
|
6725
|
+
if (["ppt", "pptx"].includes(extension) || mimeType.includes("presentation")) {
|
|
6726
|
+
return /* @__PURE__ */ jsx38(FilePptIcon, { size: 20, className: "text-orange-500" });
|
|
6727
|
+
}
|
|
6728
|
+
if (extension === "csv" || mimeType === "text/csv") {
|
|
6729
|
+
return /* @__PURE__ */ jsx38(FileCsvIcon, { size: 20, className: "text-green-600" });
|
|
6730
|
+
}
|
|
6731
|
+
if (["txt", "md", "json", "xml", "js", "ts", "html", "css"].includes(
|
|
6732
|
+
extension
|
|
6733
|
+
) || mimeType.includes("text")) {
|
|
6734
|
+
return /* @__PURE__ */ jsx38(FileTextIcon, { size: 20, className: "text-gray-500" });
|
|
6735
|
+
}
|
|
6736
|
+
if (mimeType.startsWith("image/")) {
|
|
6737
|
+
return /* @__PURE__ */ jsx38(FileImageIcon, { size: 20, className: "text-purple-500" });
|
|
6738
|
+
}
|
|
6739
|
+
if (mimeType.startsWith("video/")) {
|
|
6740
|
+
return /* @__PURE__ */ jsx38(FileVideoIcon, { size: 20, className: "text-pink-500" });
|
|
6741
|
+
}
|
|
6742
|
+
if (mimeType.startsWith("audio/")) {
|
|
6743
|
+
return /* @__PURE__ */ jsx38(FileAudioIcon, { size: 20, className: "text-indigo-500" });
|
|
6744
|
+
}
|
|
6745
|
+
if (["zip", "rar", "7z", "tar", "gz"].includes(extension)) {
|
|
6746
|
+
return /* @__PURE__ */ jsx38(FileZipIcon, { size: 20, className: "text-yellow-600" });
|
|
6747
|
+
}
|
|
6748
|
+
return /* @__PURE__ */ jsx38(FileIcon, { size: 20, className: "text-muted-foreground" });
|
|
6749
|
+
};
|
|
6750
|
+
var createImagePreview = (file) => {
|
|
6751
|
+
return new Promise((resolve) => {
|
|
6752
|
+
if (!file.type.startsWith("image/")) {
|
|
6753
|
+
resolve(null);
|
|
6754
|
+
return;
|
|
6755
|
+
}
|
|
6756
|
+
const reader = new FileReader();
|
|
6757
|
+
reader.onload = (e) => {
|
|
6758
|
+
resolve(e.target?.result);
|
|
6759
|
+
};
|
|
6760
|
+
reader.onerror = () => {
|
|
6761
|
+
resolve(null);
|
|
6762
|
+
};
|
|
6763
|
+
reader.readAsDataURL(file);
|
|
6764
|
+
});
|
|
6765
|
+
};
|
|
6766
|
+
var FileUploader = React21.forwardRef(
|
|
6767
|
+
({
|
|
6768
|
+
className,
|
|
6769
|
+
accept,
|
|
6770
|
+
maxSize,
|
|
6771
|
+
maxFiles = 1,
|
|
6772
|
+
disabled = false,
|
|
6773
|
+
value = [],
|
|
6774
|
+
onValueChange,
|
|
6775
|
+
onUpload,
|
|
6776
|
+
showPreview = true,
|
|
6777
|
+
dropzoneText = "Arraste arquivos aqui ou clique para selecionar",
|
|
6778
|
+
dropzoneSubtext,
|
|
6779
|
+
animate = true,
|
|
6780
|
+
...props
|
|
6781
|
+
}, ref) => {
|
|
6782
|
+
const [isDragging, setIsDragging] = React21.useState(false);
|
|
6783
|
+
const [files, setFiles] = React21.useState(value);
|
|
6784
|
+
const inputRef = React21.useRef(null);
|
|
6785
|
+
const dragCounterRef = React21.useRef(0);
|
|
6786
|
+
const multiple = maxFiles > 1;
|
|
6787
|
+
React21.useEffect(() => {
|
|
6788
|
+
setFiles(value);
|
|
6789
|
+
}, [value]);
|
|
6790
|
+
React21.useEffect(() => {
|
|
6791
|
+
return () => {
|
|
6792
|
+
files.forEach((file) => {
|
|
6793
|
+
if (file.preview) {
|
|
6794
|
+
URL.revokeObjectURL(file.preview);
|
|
6795
|
+
}
|
|
6796
|
+
});
|
|
6797
|
+
};
|
|
6798
|
+
}, [files]);
|
|
6799
|
+
const validateFile = (file) => {
|
|
6800
|
+
if (file.size > maxSize) {
|
|
6801
|
+
return `Arquivo muito grande. M\xE1ximo: ${formatFileSize(maxSize)}`;
|
|
6802
|
+
}
|
|
6803
|
+
if (accept.length > 0) {
|
|
6804
|
+
const fileExtension = `.${getFileExtension(file.name)}`;
|
|
6805
|
+
const fileType = file.type;
|
|
6806
|
+
const isAccepted = accept.some((acceptItem) => {
|
|
6807
|
+
if (acceptItem.startsWith(".")) {
|
|
6808
|
+
return fileExtension.toLowerCase() === acceptItem.toLowerCase();
|
|
6809
|
+
}
|
|
6810
|
+
if (acceptItem.endsWith("/*")) {
|
|
6811
|
+
return fileType.startsWith(acceptItem.replace("/*", ""));
|
|
6812
|
+
}
|
|
6813
|
+
return fileType === acceptItem;
|
|
6814
|
+
});
|
|
6815
|
+
if (!isAccepted) {
|
|
6816
|
+
return `Tipo de arquivo n\xE3o permitido. Aceitos: ${accept.join(", ")}`;
|
|
6817
|
+
}
|
|
6818
|
+
}
|
|
6819
|
+
return null;
|
|
6820
|
+
};
|
|
6821
|
+
const createFileWithPreview = async (file) => {
|
|
6822
|
+
const fileWithPreview = file;
|
|
6823
|
+
fileWithPreview.id = `${file.name}-${Date.now()}-${Math.random()}`;
|
|
6824
|
+
const error = validateFile(file);
|
|
6825
|
+
if (error) {
|
|
6826
|
+
fileWithPreview.error = error;
|
|
6827
|
+
}
|
|
6828
|
+
if (file.type.startsWith("image/")) {
|
|
6829
|
+
try {
|
|
6830
|
+
const preview = await createImagePreview(file);
|
|
6831
|
+
if (preview) {
|
|
6832
|
+
fileWithPreview.preview = preview;
|
|
6833
|
+
}
|
|
6834
|
+
} catch (error2) {
|
|
6835
|
+
console.warn("Erro ao criar preview da imagem:", error2);
|
|
6836
|
+
}
|
|
6837
|
+
}
|
|
6838
|
+
return fileWithPreview;
|
|
6839
|
+
};
|
|
6840
|
+
const handleFiles = async (newFiles) => {
|
|
6841
|
+
if (disabled) return;
|
|
6842
|
+
const availableSlots = maxFiles - files.length;
|
|
6843
|
+
const filesToAdd = multiple ? newFiles.slice(0, availableSlots) : [newFiles[0]];
|
|
6844
|
+
const filesWithPreview = await Promise.all(
|
|
6845
|
+
filesToAdd.map((file) => createFileWithPreview(file))
|
|
6846
|
+
);
|
|
6847
|
+
const updatedFiles = multiple ? [...files, ...filesWithPreview] : filesWithPreview;
|
|
6848
|
+
setFiles(updatedFiles);
|
|
6849
|
+
onValueChange(updatedFiles);
|
|
6850
|
+
if (onUpload) {
|
|
6851
|
+
const validFiles = filesWithPreview.filter((f) => !f.error);
|
|
6852
|
+
if (validFiles.length > 0) {
|
|
6853
|
+
try {
|
|
6854
|
+
await onUpload(validFiles);
|
|
6855
|
+
} catch (error) {
|
|
6856
|
+
console.error("Erro no upload:", error);
|
|
6857
|
+
}
|
|
6858
|
+
}
|
|
6859
|
+
}
|
|
6860
|
+
};
|
|
6861
|
+
const handleDragEnter = (e) => {
|
|
6862
|
+
e.preventDefault();
|
|
6863
|
+
e.stopPropagation();
|
|
6864
|
+
dragCounterRef.current++;
|
|
6865
|
+
if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
|
|
6866
|
+
setIsDragging(true);
|
|
6867
|
+
}
|
|
6868
|
+
};
|
|
6869
|
+
const handleDragLeave = (e) => {
|
|
6870
|
+
e.preventDefault();
|
|
6871
|
+
e.stopPropagation();
|
|
6872
|
+
dragCounterRef.current--;
|
|
6873
|
+
if (dragCounterRef.current === 0) {
|
|
6874
|
+
setIsDragging(false);
|
|
6875
|
+
}
|
|
6876
|
+
};
|
|
6877
|
+
const handleDragOver = (e) => {
|
|
6878
|
+
e.preventDefault();
|
|
6879
|
+
e.stopPropagation();
|
|
6880
|
+
};
|
|
6881
|
+
const handleDrop = (e) => {
|
|
6882
|
+
e.preventDefault();
|
|
6883
|
+
e.stopPropagation();
|
|
6884
|
+
setIsDragging(false);
|
|
6885
|
+
dragCounterRef.current = 0;
|
|
6886
|
+
if (disabled) return;
|
|
6887
|
+
const droppedFiles = Array.from(e.dataTransfer.files);
|
|
6888
|
+
handleFiles(droppedFiles);
|
|
6889
|
+
};
|
|
6890
|
+
const handleInputChange = (e) => {
|
|
6891
|
+
if (e.target.files) {
|
|
6892
|
+
const selectedFiles = Array.from(e.target.files);
|
|
6893
|
+
handleFiles(selectedFiles);
|
|
6894
|
+
}
|
|
6895
|
+
};
|
|
6896
|
+
const handleRemoveFile = (fileId) => {
|
|
6897
|
+
const fileToRemove = files.find((f) => f.id === fileId);
|
|
6898
|
+
if (fileToRemove?.preview) {
|
|
6899
|
+
URL.revokeObjectURL(fileToRemove.preview);
|
|
6900
|
+
}
|
|
6901
|
+
const updatedFiles = files.filter((f) => f.id !== fileId);
|
|
6902
|
+
setFiles(updatedFiles);
|
|
6903
|
+
onValueChange(updatedFiles);
|
|
6904
|
+
};
|
|
6905
|
+
const handleClick = () => {
|
|
6906
|
+
if (!disabled) {
|
|
6907
|
+
inputRef.current?.click();
|
|
6908
|
+
}
|
|
6909
|
+
};
|
|
6910
|
+
const acceptString = accept.join(",");
|
|
6911
|
+
const defaultSubtext = dropzoneSubtext || `Formatos: ${accept.join(", ")}. M\xE1ximo: ${formatFileSize(maxSize)}`;
|
|
6912
|
+
return /* @__PURE__ */ jsx38("div", { ref, className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxs27(
|
|
6913
|
+
motion10.div,
|
|
6914
|
+
{
|
|
6915
|
+
className: cn(
|
|
6916
|
+
"relative flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed p-10 transition-all duration-300 dark:shadow-black/20",
|
|
6917
|
+
isDragging && "border-primary bg-primary/10 scale-[1.02]",
|
|
6918
|
+
!isDragging && "border-border hover:border-primary/60 hover:bg-muted/50",
|
|
6919
|
+
disabled && "cursor-not-allowed opacity-50 hover:scale-100"
|
|
6920
|
+
),
|
|
6921
|
+
onDragEnter: handleDragEnter,
|
|
6922
|
+
onDragOver: handleDragOver,
|
|
6923
|
+
onDragLeave: handleDragLeave,
|
|
6924
|
+
onDrop: handleDrop,
|
|
6925
|
+
onClick: handleClick,
|
|
6926
|
+
whileHover: !disabled ? { scale: 1.01 } : void 0,
|
|
6927
|
+
whileTap: !disabled ? { scale: 0.99 } : void 0,
|
|
6928
|
+
animate: isDragging ? {
|
|
6929
|
+
borderColor: `hsl(var(--primary))`,
|
|
6930
|
+
backgroundColor: `hsl(var(--primary) / 0.1)`,
|
|
6931
|
+
scale: 1.02
|
|
6932
|
+
} : {
|
|
6933
|
+
borderColor: `hsl(var(--border))`,
|
|
6934
|
+
backgroundColor: `hsl(var(--background))`,
|
|
6935
|
+
scale: 1
|
|
6936
|
+
},
|
|
6937
|
+
transition: {
|
|
6938
|
+
type: "spring",
|
|
6939
|
+
stiffness: 300,
|
|
6940
|
+
damping: 25,
|
|
6941
|
+
duration: 0.3
|
|
6942
|
+
},
|
|
6943
|
+
children: [
|
|
6944
|
+
/* @__PURE__ */ jsx38(
|
|
6945
|
+
"input",
|
|
6946
|
+
{
|
|
6947
|
+
ref: inputRef,
|
|
6948
|
+
type: "file",
|
|
6949
|
+
className: "hidden",
|
|
6950
|
+
accept: acceptString,
|
|
6951
|
+
multiple,
|
|
6952
|
+
disabled,
|
|
6953
|
+
onChange: handleInputChange
|
|
6954
|
+
}
|
|
6955
|
+
),
|
|
6956
|
+
/* @__PURE__ */ jsx38(
|
|
6957
|
+
motion10.div,
|
|
6958
|
+
{
|
|
6959
|
+
animate: isDragging ? { scale: 1.2, rotate: 10 } : { scale: 1, rotate: 0 },
|
|
6960
|
+
transition: {
|
|
6961
|
+
type: "spring",
|
|
6962
|
+
stiffness: 300,
|
|
6963
|
+
damping: 20,
|
|
6964
|
+
duration: 0.3
|
|
6965
|
+
},
|
|
6966
|
+
children: /* @__PURE__ */ jsx38(
|
|
6967
|
+
motion10.div,
|
|
6968
|
+
{
|
|
6969
|
+
className: cn(
|
|
6970
|
+
"mb-4 h-16 w-16 text-muted-foreground transition-colors duration-300 drop-shadow-lg flex items-center justify-center",
|
|
6971
|
+
isDragging && "text-primary"
|
|
6972
|
+
),
|
|
6973
|
+
initial: false,
|
|
6974
|
+
animate: {
|
|
6975
|
+
color: isDragging ? `hsl(var(--primary))` : `hsl(var(--muted-foreground))`
|
|
6976
|
+
},
|
|
6977
|
+
transition: { duration: 0.3 },
|
|
6978
|
+
children: /* @__PURE__ */ jsx38(CloudArrowUpIcon, { size: 64 })
|
|
6979
|
+
}
|
|
6980
|
+
)
|
|
6981
|
+
}
|
|
6982
|
+
),
|
|
6983
|
+
/* @__PURE__ */ jsx38(
|
|
6984
|
+
motion10.p,
|
|
6985
|
+
{
|
|
6986
|
+
className: "mb-2 text-base font-semibold text-foreground",
|
|
6987
|
+
initial: animate ? { opacity: 0, y: -10 } : false,
|
|
6988
|
+
animate: { opacity: 1, y: 0 },
|
|
6989
|
+
transition: { delay: 0.1 },
|
|
6990
|
+
children: dropzoneText
|
|
6991
|
+
}
|
|
6992
|
+
),
|
|
6993
|
+
/* @__PURE__ */ jsx38(
|
|
6994
|
+
motion10.p,
|
|
6995
|
+
{
|
|
6996
|
+
className: "text-sm text-muted-foreground",
|
|
6997
|
+
initial: animate ? { opacity: 0, y: -10 } : false,
|
|
6998
|
+
animate: { opacity: 1, y: 0 },
|
|
6999
|
+
transition: { delay: 0.2 },
|
|
7000
|
+
children: defaultSubtext
|
|
7001
|
+
}
|
|
7002
|
+
),
|
|
7003
|
+
/* @__PURE__ */ jsx38(AnimatePresence8, { children: files.length > 0 && /* @__PURE__ */ jsxs27(
|
|
7004
|
+
motion10.div,
|
|
7005
|
+
{
|
|
7006
|
+
initial: { opacity: 0, scale: 0.8, y: 10 },
|
|
7007
|
+
animate: {
|
|
7008
|
+
opacity: 1,
|
|
7009
|
+
scale: 1,
|
|
7010
|
+
y: 0,
|
|
7011
|
+
backgroundColor: `hsl(var(--primary) / 0.1)`,
|
|
7012
|
+
borderColor: `hsl(var(--primary) / 0.2)`
|
|
7013
|
+
},
|
|
7014
|
+
exit: { opacity: 0, scale: 0.8, y: 10 },
|
|
7015
|
+
className: cn(
|
|
7016
|
+
"mt-4 flex items-center gap-2 rounded-full border px-4 py-2 backdrop-blur-sm bg-primary/20 border-primary/30 shadow-lg"
|
|
7017
|
+
),
|
|
7018
|
+
transition: { duration: 0.3 },
|
|
7019
|
+
children: [
|
|
7020
|
+
/* @__PURE__ */ jsx38("div", { className: "h-4 w-4 text-primary flex items-center justify-center", children: /* @__PURE__ */ jsx38(CheckIcon7, { size: 16, className: "text-emerald-500" }) }),
|
|
7021
|
+
/* @__PURE__ */ jsxs27(
|
|
7022
|
+
motion10.span,
|
|
7023
|
+
{
|
|
7024
|
+
className: "text-sm font-semibold text-primary",
|
|
7025
|
+
animate: { color: `hsl(var(--primary))` },
|
|
7026
|
+
transition: { duration: 0.3 },
|
|
7027
|
+
children: [
|
|
7028
|
+
files.length,
|
|
7029
|
+
" ",
|
|
7030
|
+
files.length === 1 ? "arquivo selecionado" : "arquivos selecionados"
|
|
7031
|
+
]
|
|
7032
|
+
}
|
|
7033
|
+
)
|
|
7034
|
+
]
|
|
7035
|
+
}
|
|
7036
|
+
) }),
|
|
7037
|
+
showPreview && files.length > 0 && /* @__PURE__ */ jsx38(
|
|
7038
|
+
motion10.div,
|
|
7039
|
+
{
|
|
7040
|
+
className: "mt-6 w-full",
|
|
7041
|
+
initial: animate ? { opacity: 0, y: 10 } : false,
|
|
7042
|
+
animate: { opacity: 1, y: 0 },
|
|
7043
|
+
transition: { delay: 0.3 },
|
|
7044
|
+
children: /* @__PURE__ */ jsxs27("div", { children: [
|
|
7045
|
+
/* @__PURE__ */ jsxs27("h4", { className: "mb-3 text-sm font-medium text-muted-foreground", children: [
|
|
7046
|
+
"Arquivos selecionados (",
|
|
7047
|
+
files.length,
|
|
7048
|
+
"/",
|
|
7049
|
+
maxFiles,
|
|
7050
|
+
")"
|
|
7051
|
+
] }),
|
|
7052
|
+
/* @__PURE__ */ jsx38("div", { className: "space-y-2 overflow-y-auto max-h-44", children: /* @__PURE__ */ jsx38(AnimatePresence8, { mode: "popLayout", children: files.map((file, index) => /* @__PURE__ */ jsxs27(
|
|
7053
|
+
motion10.div,
|
|
7054
|
+
{
|
|
7055
|
+
layout: true,
|
|
7056
|
+
initial: animate ? { opacity: 0, x: -20 } : false,
|
|
7057
|
+
animate: { opacity: 1, x: 0 },
|
|
7058
|
+
exit: {
|
|
7059
|
+
opacity: 0,
|
|
7060
|
+
x: -20,
|
|
7061
|
+
transition: { duration: 0.2 }
|
|
7062
|
+
},
|
|
7063
|
+
transition: {
|
|
7064
|
+
delay: animate ? index * 0.05 : 0,
|
|
7065
|
+
layout: { duration: 0.2 }
|
|
7066
|
+
},
|
|
7067
|
+
className: cn(
|
|
7068
|
+
"flex items-center gap-3 rounded-md border p-3 transition-all duration-300",
|
|
7069
|
+
file.error ? "border-destructive/50 bg-destructive/5" : "border-border bg-background/80 hover:bg-muted/50 hover:shadow-md hover:shadow-primary/10 hover:border-primary/30"
|
|
7070
|
+
),
|
|
7071
|
+
children: [
|
|
7072
|
+
/* @__PURE__ */ jsx38("div", { className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-md bg-muted overflow-hidden", children: file.preview ? (
|
|
7073
|
+
// Preview de imagem
|
|
7074
|
+
/* @__PURE__ */ jsx38(
|
|
7075
|
+
"img",
|
|
7076
|
+
{
|
|
7077
|
+
src: file.preview,
|
|
7078
|
+
alt: file.name,
|
|
7079
|
+
className: "h-full w-full object-cover rounded-md"
|
|
7080
|
+
}
|
|
7081
|
+
)
|
|
7082
|
+
) : (
|
|
7083
|
+
// Ícone baseado no tipo de arquivo
|
|
7084
|
+
getFileTypeIcon(file)
|
|
7085
|
+
) }),
|
|
7086
|
+
/* @__PURE__ */ jsxs27("div", { className: "min-w-0 flex-1", children: [
|
|
7087
|
+
/* @__PURE__ */ jsx38(
|
|
7088
|
+
"p",
|
|
7089
|
+
{
|
|
7090
|
+
className: "truncate text-sm font-medium text-foreground",
|
|
7091
|
+
title: `${file.name} (${file.type || "Tipo desconhecido"})`,
|
|
7092
|
+
children: file.name
|
|
7093
|
+
}
|
|
7094
|
+
),
|
|
7095
|
+
/* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
|
|
7096
|
+
/* @__PURE__ */ jsx38("span", { children: formatFileSize(file.size) }),
|
|
7097
|
+
file.type && /* @__PURE__ */ jsxs27(Fragment6, { children: [
|
|
7098
|
+
/* @__PURE__ */ jsx38("span", { children: "\u2022" }),
|
|
7099
|
+
/* @__PURE__ */ jsx38("span", { className: "uppercase", children: getFileExtension(file.name) })
|
|
7100
|
+
] })
|
|
7101
|
+
] }),
|
|
7102
|
+
file.error && /* @__PURE__ */ jsx38(
|
|
7103
|
+
motion10.p,
|
|
7104
|
+
{
|
|
7105
|
+
className: "mt-1 text-xs text-destructive",
|
|
7106
|
+
initial: { opacity: 0, y: -5 },
|
|
7107
|
+
animate: { opacity: 1, y: 0 },
|
|
7108
|
+
children: file.error
|
|
7109
|
+
}
|
|
7110
|
+
)
|
|
7111
|
+
] }),
|
|
7112
|
+
/* @__PURE__ */ jsx38(
|
|
7113
|
+
DeleteButton,
|
|
7114
|
+
{
|
|
7115
|
+
type: "button",
|
|
7116
|
+
variant: "destructive",
|
|
7117
|
+
size: "icon",
|
|
7118
|
+
onClick: (e) => {
|
|
7119
|
+
e?.stopPropagation();
|
|
7120
|
+
handleRemoveFile(file.id);
|
|
7121
|
+
},
|
|
7122
|
+
className: "",
|
|
7123
|
+
children: /* @__PURE__ */ jsx38(XIcon6, { size: 12 })
|
|
7124
|
+
}
|
|
7125
|
+
)
|
|
7126
|
+
]
|
|
7127
|
+
},
|
|
7128
|
+
file.id
|
|
7129
|
+
)) }) })
|
|
7130
|
+
] })
|
|
7131
|
+
}
|
|
7132
|
+
)
|
|
7133
|
+
]
|
|
7134
|
+
}
|
|
7135
|
+
) });
|
|
7136
|
+
}
|
|
7137
|
+
);
|
|
7138
|
+
FileUploader.displayName = "FileUploader";
|
|
7139
|
+
|
|
7140
|
+
// src/components/ui/feedback/LoadingBase.tsx
|
|
7141
|
+
import * as React22 from "react";
|
|
7142
|
+
import { cva as cva3 } from "class-variance-authority";
|
|
7143
|
+
import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
7144
|
+
var loadingVariants = cva3(
|
|
7145
|
+
"rounded-full border-2 animate-spin border-muted border-t-primary",
|
|
7146
|
+
{
|
|
7147
|
+
variants: {
|
|
7148
|
+
size: {
|
|
7149
|
+
sm: "h-4 w-4",
|
|
7150
|
+
md: "h-6 w-6",
|
|
7151
|
+
lg: "h-8 w-8",
|
|
7152
|
+
xl: "h-12 w-12 border-[3px]"
|
|
7153
|
+
}
|
|
7154
|
+
},
|
|
7155
|
+
defaultVariants: {
|
|
7156
|
+
size: "md"
|
|
7157
|
+
}
|
|
7158
|
+
}
|
|
7159
|
+
);
|
|
7160
|
+
var dotsVariants = cva3(
|
|
7161
|
+
"flex items-center justify-center",
|
|
7162
|
+
{
|
|
7163
|
+
variants: {
|
|
7164
|
+
size: {
|
|
7165
|
+
sm: "gap-1",
|
|
7166
|
+
md: "gap-1.5",
|
|
7167
|
+
lg: "gap-2",
|
|
7168
|
+
xl: "gap-2.5"
|
|
7169
|
+
}
|
|
7170
|
+
},
|
|
7171
|
+
defaultVariants: {
|
|
7172
|
+
size: "md"
|
|
7173
|
+
}
|
|
7174
|
+
}
|
|
7175
|
+
);
|
|
7176
|
+
var dotVariants = cva3(
|
|
7177
|
+
"rounded-full bg-gradient-to-r from-primary to-primary/70 shadow-sm",
|
|
7178
|
+
{
|
|
7179
|
+
variants: {
|
|
7180
|
+
size: {
|
|
7181
|
+
sm: "h-1.5 w-2",
|
|
7182
|
+
md: "h-2.5 w-2.5",
|
|
7183
|
+
lg: "h-2.5 w-3",
|
|
7184
|
+
xl: "h-3.5 w-4"
|
|
7185
|
+
}
|
|
7186
|
+
},
|
|
7187
|
+
defaultVariants: {
|
|
7188
|
+
size: "md"
|
|
7189
|
+
}
|
|
7190
|
+
}
|
|
7191
|
+
);
|
|
7192
|
+
var LoadingBase = React22.forwardRef(
|
|
7193
|
+
({ className, size, message, overlay = false, variant = "spinner", ...props }, ref) => {
|
|
7194
|
+
React22.useEffect(() => {
|
|
7195
|
+
const style = document.createElement("style");
|
|
7196
|
+
style.textContent = `
|
|
7197
|
+
@keyframes dotBounce {
|
|
7198
|
+
0%, 80%, 100% {
|
|
7199
|
+
transform: translateY(0);
|
|
7200
|
+
opacity: 0.8;
|
|
7201
|
+
}
|
|
7202
|
+
40% {
|
|
7203
|
+
transform: translateY(-8px);
|
|
7204
|
+
opacity: 1;
|
|
7205
|
+
}
|
|
7206
|
+
}
|
|
7207
|
+
`;
|
|
7208
|
+
document.head.appendChild(style);
|
|
7209
|
+
return () => {
|
|
7210
|
+
if (document.head.contains(style)) {
|
|
7211
|
+
document.head.removeChild(style);
|
|
7212
|
+
}
|
|
7213
|
+
};
|
|
7214
|
+
}, []);
|
|
7215
|
+
const renderSpinner = () => {
|
|
7216
|
+
if (variant === "dots") {
|
|
7217
|
+
return /* @__PURE__ */ jsxs28("div", { className: cn(dotsVariants({ size })), "aria-hidden": "true", children: [
|
|
7218
|
+
/* @__PURE__ */ jsx39(
|
|
7219
|
+
"div",
|
|
7220
|
+
{
|
|
7221
|
+
className: cn(dotVariants({ size })),
|
|
7222
|
+
style: {
|
|
7223
|
+
animation: "dotBounce 1.4s ease-in-out infinite",
|
|
7224
|
+
animationDelay: "0ms",
|
|
7225
|
+
transform: "translateY(0px)"
|
|
7226
|
+
}
|
|
7227
|
+
}
|
|
7228
|
+
),
|
|
7229
|
+
/* @__PURE__ */ jsx39(
|
|
7230
|
+
"div",
|
|
7231
|
+
{
|
|
7232
|
+
className: cn(dotVariants({ size })),
|
|
7233
|
+
style: {
|
|
7234
|
+
animation: "dotBounce 1.4s ease-in-out infinite",
|
|
7235
|
+
animationDelay: "0.16s",
|
|
7236
|
+
transform: "translateY(0px)"
|
|
7237
|
+
}
|
|
7238
|
+
}
|
|
7239
|
+
),
|
|
7240
|
+
/* @__PURE__ */ jsx39(
|
|
7241
|
+
"div",
|
|
7242
|
+
{
|
|
7243
|
+
className: cn(dotVariants({ size })),
|
|
7244
|
+
style: {
|
|
7245
|
+
animation: "dotBounce 1.4s ease-in-out infinite",
|
|
7246
|
+
animationDelay: "0.32s",
|
|
7247
|
+
transform: "translateY(0px)"
|
|
7248
|
+
}
|
|
7249
|
+
}
|
|
7250
|
+
)
|
|
7251
|
+
] });
|
|
7252
|
+
}
|
|
7253
|
+
return /* @__PURE__ */ jsx39(
|
|
7254
|
+
"div",
|
|
7255
|
+
{
|
|
7256
|
+
className: cn(loadingVariants({ size })),
|
|
7257
|
+
style: {
|
|
7258
|
+
animation: "spin 1s linear infinite"
|
|
7259
|
+
},
|
|
7260
|
+
"aria-hidden": "true"
|
|
7261
|
+
}
|
|
7262
|
+
);
|
|
7263
|
+
};
|
|
7264
|
+
const loadingContent = /* @__PURE__ */ jsxs28("div", { className: "flex flex-col items-center gap-4", children: [
|
|
7265
|
+
renderSpinner(),
|
|
7266
|
+
message && /* @__PURE__ */ jsx39("p", { className: "text-sm font-medium text-muted-foreground animate-pulse", children: message })
|
|
7267
|
+
] });
|
|
7268
|
+
if (overlay) {
|
|
7269
|
+
return /* @__PURE__ */ jsx39(
|
|
7270
|
+
"div",
|
|
7271
|
+
{
|
|
7272
|
+
ref,
|
|
7273
|
+
className: cn(
|
|
7274
|
+
"fixed inset-0 z-50 flex items-center justify-center",
|
|
7275
|
+
"bg-background/80 dark:bg-background/60",
|
|
7276
|
+
"backdrop-blur-md backdrop-saturate-150",
|
|
7277
|
+
"transition-all duration-300 ease-in-out",
|
|
7278
|
+
"animate-in fade-in-0",
|
|
7279
|
+
className
|
|
7280
|
+
),
|
|
7281
|
+
role: "status",
|
|
7282
|
+
"aria-label": message || "Carregando",
|
|
7283
|
+
...props,
|
|
7284
|
+
children: /* @__PURE__ */ jsx39("div", { className: cn(
|
|
7285
|
+
"relative p-8 rounded-2xl",
|
|
7286
|
+
"bg-card/90 dark:bg-card/95",
|
|
7287
|
+
"border border-border/50",
|
|
7288
|
+
"shadow-2xl shadow-black/10 dark:shadow-black/30",
|
|
7289
|
+
"backdrop-blur-xl backdrop-saturate-150",
|
|
7290
|
+
"animate-in zoom-in-95 fade-in-0 duration-300",
|
|
7291
|
+
"text-center space-y-4"
|
|
7292
|
+
), children: loadingContent })
|
|
7293
|
+
}
|
|
7294
|
+
);
|
|
7295
|
+
}
|
|
7296
|
+
return /* @__PURE__ */ jsx39(
|
|
7297
|
+
"div",
|
|
7298
|
+
{
|
|
7299
|
+
ref,
|
|
7300
|
+
className: cn("flex items-center justify-center", className),
|
|
7301
|
+
role: "status",
|
|
7302
|
+
"aria-label": message || "Carregando",
|
|
7303
|
+
...props,
|
|
7304
|
+
children: loadingContent
|
|
7305
|
+
}
|
|
7306
|
+
);
|
|
7307
|
+
}
|
|
7308
|
+
);
|
|
7309
|
+
LoadingBase.displayName = "LoadingBase";
|
|
7310
|
+
|
|
7311
|
+
// src/components/ui/feedback/ModalBase.tsx
|
|
7312
|
+
import * as React23 from "react";
|
|
7313
|
+
import * as DialogPrimitive2 from "@radix-ui/react-dialog";
|
|
7314
|
+
import { XIcon as XIcon7 } from "@phosphor-icons/react";
|
|
7315
|
+
import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
7316
|
+
var ModalBase = DialogPrimitive2.Root;
|
|
7317
|
+
var ModalTriggerBase = DialogPrimitive2.Trigger;
|
|
7318
|
+
var ModalPortalBase = DialogPrimitive2.Portal;
|
|
7319
|
+
var ModalCloseBase = DialogPrimitive2.Close;
|
|
7320
|
+
var ModalOverlayBase = React23.forwardRef(({ className, testid: dataTestId = "modal-overlay", ...props }, ref) => /* @__PURE__ */ jsx40(
|
|
7321
|
+
DialogPrimitive2.Overlay,
|
|
7322
|
+
{
|
|
7323
|
+
ref,
|
|
7324
|
+
className: cn(
|
|
7325
|
+
"fixed inset-0 z-50 bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
7326
|
+
className
|
|
7327
|
+
),
|
|
7328
|
+
"data-testid": dataTestId,
|
|
7329
|
+
...props
|
|
7330
|
+
}
|
|
7331
|
+
));
|
|
7332
|
+
ModalOverlayBase.displayName = DialogPrimitive2.Overlay.displayName;
|
|
7333
|
+
var ModalContentBase = React23.forwardRef(
|
|
7334
|
+
({
|
|
7335
|
+
className,
|
|
7336
|
+
children,
|
|
7337
|
+
testid: dataTestId = "modal-content",
|
|
7338
|
+
size = "md",
|
|
7339
|
+
centered = true,
|
|
7340
|
+
backdropBlur = true,
|
|
7341
|
+
...props
|
|
7342
|
+
}, ref) => {
|
|
7343
|
+
const sizeClass = size === "sm" ? "max-w-md" : size === "lg" ? "max-w-4xl" : size === "full" ? "w-full max-w-[calc(100%-2rem)]" : "max-w-2xl";
|
|
7344
|
+
const positionClass = centered ? "left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]" : "left-[50%] top-20 translate-x-[-50%] translate-y-0 sm:translate-y-0";
|
|
7345
|
+
return /* @__PURE__ */ jsxs29(ModalPortalBase, { children: [
|
|
7346
|
+
/* @__PURE__ */ jsx40(
|
|
7347
|
+
ModalOverlayBase,
|
|
7348
|
+
{
|
|
7349
|
+
className: cn("bg-black/40", backdropBlur ? "backdrop-blur-sm" : "")
|
|
7350
|
+
}
|
|
7351
|
+
),
|
|
7352
|
+
/* @__PURE__ */ jsx40(
|
|
7353
|
+
"style",
|
|
7354
|
+
{
|
|
7355
|
+
dangerouslySetInnerHTML: {
|
|
7356
|
+
__html: `
|
|
7357
|
+
@keyframes modal-fade-in { from { opacity: 0 } to { opacity: 1 } }
|
|
7358
|
+
@keyframes modal-fade-out { from { opacity: 1 } to { opacity: 0 } }
|
|
7359
|
+
@keyframes modal-scale-in { from { opacity: 0; transform: translate(-50%, -48%) scale(.98) } to { opacity:1; transform: translate(-50%, -50%) scale(1) } }
|
|
7360
|
+
@keyframes modal-scale-out { from { opacity:1; transform: translate(-50%, -50%) scale(1) } to { opacity: 0; transform: translate(-50%, -48%) scale(.98) } }
|
|
7361
|
+
@keyframes overlay-fade-in { from { opacity: 0 } to { opacity: 1 } }
|
|
7362
|
+
@keyframes overlay-fade-out { from { opacity: 1 } to { opacity: 0 } }
|
|
7363
|
+
.data-[state=open]\\:animate-modal-in { animation: modal-fade-in 220ms cubic-bezier(.16,.84,.24,1) both, modal-scale-in 220ms cubic-bezier(.16,.84,.24,1) both }
|
|
7364
|
+
.data-[state=closed]\\:animate-modal-out { animation: modal-scale-out 160ms cubic-bezier(.16,.84,.24,1) both, modal-fade-out 160ms cubic-bezier(.16,.84,.24,1) both }
|
|
7365
|
+
.data-[state=open]\\:animate-overlay-in { animation: overlay-fade-in 220ms cubic-bezier(.16,.84,.24,1) both }
|
|
7366
|
+
.data-[state=closed]\\:animate-overlay-out { animation: overlay-fade-out 160ms cubic-bezier(.16,.84,.24,1) both }
|
|
7367
|
+
`
|
|
7368
|
+
}
|
|
7369
|
+
}
|
|
7370
|
+
),
|
|
7371
|
+
/* @__PURE__ */ jsxs29(
|
|
7372
|
+
DialogPrimitive2.Content,
|
|
7373
|
+
{
|
|
7374
|
+
ref,
|
|
7375
|
+
className: cn(
|
|
7376
|
+
"fixed z-50 grid w-full gap-4 border bg-background p-6 shadow-lg sm:rounded-lg max-h-[90dvh] overflow-auto",
|
|
7377
|
+
"data-[state=open]:animate-modal-in data-[state=closed]:animate-modal-out",
|
|
7378
|
+
positionClass,
|
|
7379
|
+
sizeClass,
|
|
7380
|
+
className
|
|
7381
|
+
),
|
|
7382
|
+
"data-testid": dataTestId,
|
|
7383
|
+
...props,
|
|
7384
|
+
children: [
|
|
7385
|
+
children,
|
|
7386
|
+
/* @__PURE__ */ jsxs29(DialogPrimitive2.Close, { className: "absolute right-3 top-3 sm:right-4 sm:top-4 rounded-md bg-muted/10 p-1.5 opacity-80 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none z-10 hover:bg-muted/20 transition-colors", children: [
|
|
7387
|
+
/* @__PURE__ */ jsx40(XIcon7, { className: "h-5 w-5 sm:h-4 sm:w-4 text-foreground" }),
|
|
7388
|
+
/* @__PURE__ */ jsx40("span", { className: "sr-only", children: "Close" })
|
|
7389
|
+
] })
|
|
7390
|
+
]
|
|
7391
|
+
}
|
|
7392
|
+
)
|
|
7393
|
+
] });
|
|
7394
|
+
}
|
|
7395
|
+
);
|
|
7396
|
+
ModalContentBase.displayName = DialogPrimitive2.Content.displayName;
|
|
7397
|
+
var ModalHeaderBase = React23.forwardRef(({ className, testid: dataTestId = "modal-header", ...props }, ref) => /* @__PURE__ */ jsx40(
|
|
7398
|
+
"div",
|
|
7399
|
+
{
|
|
7400
|
+
ref,
|
|
7401
|
+
className: cn(
|
|
7402
|
+
"flex flex-col space-y-1.5 text-center sm:text-left",
|
|
7403
|
+
className
|
|
7404
|
+
),
|
|
7405
|
+
"data-testid": dataTestId,
|
|
7406
|
+
...props
|
|
7407
|
+
}
|
|
7408
|
+
));
|
|
7409
|
+
ModalHeaderBase.displayName = "ModalHeader";
|
|
7410
|
+
var ModalFooterBase = React23.forwardRef(({ className, testid: dataTestId = "modal-footer", ...props }, ref) => /* @__PURE__ */ jsx40(
|
|
7411
|
+
"div",
|
|
7412
|
+
{
|
|
7413
|
+
ref,
|
|
7414
|
+
className: cn(
|
|
7415
|
+
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
|
7416
|
+
className
|
|
7417
|
+
),
|
|
7418
|
+
"data-testid": dataTestId,
|
|
7419
|
+
...props
|
|
7420
|
+
}
|
|
7421
|
+
));
|
|
7422
|
+
ModalFooterBase.displayName = "ModalFooter";
|
|
7423
|
+
var ModalTitleBase = React23.forwardRef(({ className, testid: dataTestId = "modal-title", ...props }, ref) => /* @__PURE__ */ jsx40(
|
|
7424
|
+
DialogPrimitive2.Title,
|
|
7425
|
+
{
|
|
7426
|
+
ref,
|
|
7427
|
+
className: cn(
|
|
7428
|
+
"text-lg font-semibold leading-none tracking-tight",
|
|
7429
|
+
className
|
|
7430
|
+
),
|
|
7431
|
+
"data-testid": dataTestId,
|
|
7432
|
+
...props
|
|
7433
|
+
}
|
|
7434
|
+
));
|
|
7435
|
+
ModalTitleBase.displayName = DialogPrimitive2.Title.displayName;
|
|
7436
|
+
var ModalDescriptionBase = React23.forwardRef(({ className, testid: dataTestId = "modal-description", ...props }, ref) => /* @__PURE__ */ jsx40(
|
|
7437
|
+
DialogPrimitive2.Description,
|
|
7438
|
+
{
|
|
7439
|
+
ref,
|
|
7440
|
+
className: cn("text-sm text-muted-foreground", className),
|
|
7441
|
+
"data-testid": dataTestId,
|
|
7442
|
+
...props
|
|
7443
|
+
}
|
|
7444
|
+
));
|
|
7445
|
+
ModalDescriptionBase.displayName = DialogPrimitive2.Description.displayName;
|
|
7446
|
+
|
|
7447
|
+
// src/components/ui/feedback/ProgressBase.tsx
|
|
7448
|
+
import * as React24 from "react";
|
|
7449
|
+
import * as ProgressPrimitive from "@radix-ui/react-progress";
|
|
7450
|
+
import { jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
7451
|
+
var ProgressBase = React24.forwardRef(
|
|
7452
|
+
({
|
|
7453
|
+
className,
|
|
7454
|
+
value: rawValue,
|
|
7455
|
+
label,
|
|
7456
|
+
leftIcon,
|
|
7457
|
+
rightIcon,
|
|
7458
|
+
variant = "bar",
|
|
7459
|
+
segments = 5,
|
|
7460
|
+
steps = [],
|
|
7461
|
+
currentStep = 0,
|
|
7462
|
+
showValue = false,
|
|
7463
|
+
valuePosition = "right",
|
|
7464
|
+
autocolor,
|
|
7465
|
+
plusIndicator,
|
|
7466
|
+
...props
|
|
7467
|
+
}, ref) => {
|
|
7468
|
+
const value = Number(rawValue || 0);
|
|
7469
|
+
const indicatorWidth = Math.min(value, 100);
|
|
7470
|
+
switch (variant) {
|
|
7471
|
+
case "segments":
|
|
7472
|
+
return /* @__PURE__ */ jsx41(
|
|
7473
|
+
ProgressSegmentsBase,
|
|
7474
|
+
{
|
|
7475
|
+
label,
|
|
7476
|
+
segments,
|
|
7477
|
+
value: value || 0
|
|
7478
|
+
}
|
|
7479
|
+
);
|
|
7480
|
+
case "panels":
|
|
7481
|
+
return /* @__PURE__ */ jsx41(
|
|
7482
|
+
ProgressPanelsBase,
|
|
7483
|
+
{
|
|
7484
|
+
label,
|
|
7485
|
+
steps,
|
|
7486
|
+
currentStep
|
|
7487
|
+
}
|
|
7488
|
+
);
|
|
7489
|
+
case "circles":
|
|
7490
|
+
return /* @__PURE__ */ jsx41(
|
|
7491
|
+
ProgressCirclesBase,
|
|
7492
|
+
{
|
|
7493
|
+
label,
|
|
7494
|
+
steps,
|
|
7495
|
+
currentStep
|
|
7496
|
+
}
|
|
7497
|
+
);
|
|
7498
|
+
case "bar":
|
|
7499
|
+
default:
|
|
7500
|
+
return /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-1 w-full min-w-[150px]", children: [
|
|
7501
|
+
label && /* @__PURE__ */ jsx41(LabelBase_default, { className: "py-2", children: label }),
|
|
7502
|
+
/* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
|
|
7503
|
+
showValue && valuePosition === "left" && /* @__PURE__ */ jsxs30("div", { className: "w-12 text-sm text-right font-extrabold", children: [
|
|
7504
|
+
Math.round(value || 0),
|
|
7505
|
+
"%"
|
|
7506
|
+
] }),
|
|
7507
|
+
leftIcon && /* @__PURE__ */ jsx41("div", { className: "flex items-center justify-center", children: leftIcon }),
|
|
7508
|
+
/* @__PURE__ */ jsxs30(
|
|
7509
|
+
ProgressPrimitive.Root,
|
|
7510
|
+
{
|
|
7511
|
+
ref,
|
|
7512
|
+
className: cn(
|
|
7513
|
+
" relative h-3 w-full overflow-visible rounded-full bg-muted/80 shadow-inner transition-all ",
|
|
7514
|
+
className
|
|
7515
|
+
),
|
|
7516
|
+
value,
|
|
7517
|
+
...props,
|
|
7518
|
+
children: [
|
|
7519
|
+
/* @__PURE__ */ jsx41(
|
|
7520
|
+
ProgressPrimitive.Indicator,
|
|
7521
|
+
{
|
|
7522
|
+
className: cn(
|
|
7523
|
+
"h-full transition-all duration-500 ease-in-out rounded-lg",
|
|
7524
|
+
// quando não usa autocolor, Indicator deve mostrar a cor primária
|
|
7525
|
+
autocolor && autocolor.length >= 2 ? "bg-transparent" : "bg-primary"
|
|
7526
|
+
),
|
|
7527
|
+
style: { width: `${indicatorWidth}%` }
|
|
7528
|
+
}
|
|
7529
|
+
),
|
|
7530
|
+
autocolor && Array.isArray(autocolor) && autocolor.length >= 2 && (() => {
|
|
7531
|
+
const [t1Raw, t2Raw] = autocolor;
|
|
7532
|
+
const [t1, t2] = [Number(t1Raw), Number(t2Raw)].sort(
|
|
7533
|
+
(a, b) => a - b
|
|
7534
|
+
);
|
|
7535
|
+
const v = Number(value || 0);
|
|
7536
|
+
let colorClass = "bg-red-500";
|
|
7537
|
+
if (v <= t1) {
|
|
7538
|
+
colorClass = "bg-red-500";
|
|
7539
|
+
} else if (v <= t2) {
|
|
7540
|
+
colorClass = "bg-yellow-500";
|
|
7541
|
+
} else {
|
|
7542
|
+
colorClass = "bg-emerald-500";
|
|
7543
|
+
}
|
|
7544
|
+
return /* @__PURE__ */ jsx41(
|
|
7545
|
+
"div",
|
|
7546
|
+
{
|
|
7547
|
+
"aria-hidden": true,
|
|
7548
|
+
className: cn(
|
|
7549
|
+
"absolute top-0 left-0 h-full transition-all duration-500 ease-in-out rounded-lg",
|
|
7550
|
+
colorClass
|
|
7551
|
+
),
|
|
7552
|
+
style: { width: `${indicatorWidth}%` }
|
|
7553
|
+
}
|
|
7554
|
+
);
|
|
7555
|
+
})(),
|
|
7556
|
+
plusIndicator && value > 100 && /* @__PURE__ */ jsx41(
|
|
7557
|
+
"div",
|
|
7558
|
+
{
|
|
7559
|
+
"aria-hidden": "true",
|
|
7560
|
+
className: "absolute top-0 bottom-0 w-0.5 bg-black/70 transition-all duration-500 ease-in-out pointer-events-none",
|
|
7561
|
+
style: { left: `100%` },
|
|
7562
|
+
children: value > 115 && /* @__PURE__ */ jsx41("div", { className: "absolute left-full ml-2 top-1/2 -translate-y-1/2 text-xs whitespace-nowrap font-extrabold", children: `+${Math.round(
|
|
7563
|
+
value - 100
|
|
7564
|
+
)}%` })
|
|
7565
|
+
}
|
|
7566
|
+
),
|
|
7567
|
+
showValue && valuePosition === "inside" && /* @__PURE__ */ jsxs30(
|
|
7568
|
+
"span",
|
|
7569
|
+
{
|
|
7570
|
+
className: "absolute inset-0 flex items-center justify-center text-sm select-none pointer-events-none text-secondary font-extrabold",
|
|
7571
|
+
"aria-hidden": true,
|
|
7572
|
+
children: [
|
|
7573
|
+
Math.round(value || 0),
|
|
7574
|
+
"%"
|
|
7575
|
+
]
|
|
7576
|
+
}
|
|
7577
|
+
)
|
|
7578
|
+
]
|
|
7579
|
+
}
|
|
7580
|
+
),
|
|
7581
|
+
showValue && valuePosition === "right" && /* @__PURE__ */ jsxs30("div", { className: "w-12 text-sm font-extrabold text-left", children: [
|
|
7582
|
+
Math.round(value || 0),
|
|
7583
|
+
"%"
|
|
7584
|
+
] }),
|
|
7585
|
+
rightIcon && /* @__PURE__ */ jsx41("div", { className: "flex items-center justify-center", children: rightIcon })
|
|
7586
|
+
] })
|
|
7587
|
+
] });
|
|
7588
|
+
}
|
|
7589
|
+
}
|
|
7590
|
+
);
|
|
7591
|
+
ProgressBase.displayName = "ProgressBase";
|
|
7592
|
+
var ProgressSegmentsBase = ({
|
|
7593
|
+
label,
|
|
7594
|
+
segments,
|
|
7595
|
+
value
|
|
7596
|
+
}) => {
|
|
7597
|
+
const filled = Math.round(value / 100 * segments);
|
|
7598
|
+
return /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-1 w-full min-w-[150px]", children: [
|
|
7599
|
+
label && /* @__PURE__ */ jsx41(LabelBase_default, { className: "py-2", children: label }),
|
|
7600
|
+
/* @__PURE__ */ jsx41("div", { className: "flex gap-1 w-full", children: Array.from({ length: segments }).map((_, idx) => /* @__PURE__ */ jsx41(
|
|
7601
|
+
"div",
|
|
7602
|
+
{
|
|
7603
|
+
className: cn(
|
|
7604
|
+
"h-2 flex-1 rounded-full transition-all duration-300",
|
|
7605
|
+
idx < filled ? "bg-primary" : "bg-zinc-300 hover:bg-zinc-400"
|
|
7606
|
+
)
|
|
7607
|
+
},
|
|
7608
|
+
idx
|
|
7609
|
+
)) })
|
|
7610
|
+
] });
|
|
7611
|
+
};
|
|
7612
|
+
var ArrowRightIcon = () => /* @__PURE__ */ jsx41(
|
|
7613
|
+
"svg",
|
|
7614
|
+
{
|
|
7615
|
+
className: "w-6 h-6 text-zinc-400 transition-transform duration-300 group-hover:translate-x-1",
|
|
7616
|
+
fill: "none",
|
|
7617
|
+
stroke: "currentColor",
|
|
7618
|
+
strokeWidth: 2,
|
|
7619
|
+
viewBox: "0 0 24 24",
|
|
7620
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
7621
|
+
children: /* @__PURE__ */ jsx41("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })
|
|
7622
|
+
}
|
|
7623
|
+
);
|
|
7624
|
+
var ProgressPanelsBase = ({
|
|
7625
|
+
label,
|
|
7626
|
+
steps,
|
|
7627
|
+
currentStep
|
|
7628
|
+
}) => {
|
|
7629
|
+
return /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-1 w-full", children: [
|
|
7630
|
+
label && /* @__PURE__ */ jsx41(LabelBase_default, { className: "py-2", children: label }),
|
|
7631
|
+
/* @__PURE__ */ jsx41("div", { className: "flex w-full gap-1 rounded-lg overflow-hidden", children: steps.map((step, idx) => {
|
|
7632
|
+
const isActive = idx === currentStep;
|
|
7633
|
+
const isLast = idx === steps.length - 1;
|
|
7634
|
+
return /* @__PURE__ */ jsxs30(React24.Fragment, { children: [
|
|
7635
|
+
/* @__PURE__ */ jsxs30(
|
|
7636
|
+
"div",
|
|
7637
|
+
{
|
|
7638
|
+
className: cn(
|
|
7639
|
+
"relative flex items-center justify-center cursor-pointer select-none rounded-lg border transition-shadow duration-300 ease-in-out",
|
|
7640
|
+
"hover:shadow-md hover:z-10",
|
|
7641
|
+
"aspect-[5/1] min-w-[90px] px-4",
|
|
7642
|
+
isActive ? "bg-primary/20 border-2 border-primary shadow-lg font-semibold" : "border-zinc-300"
|
|
7643
|
+
),
|
|
7644
|
+
style: { flex: "1 1 0" },
|
|
7645
|
+
children: [
|
|
7646
|
+
/* @__PURE__ */ jsx41("span", { className: "truncate", children: step }),
|
|
7647
|
+
isActive && /* @__PURE__ */ jsx41("div", { className: "absolute bottom-0 left-0 h-1 w-full animate-pulse rounded-b-lg" })
|
|
7648
|
+
]
|
|
7649
|
+
}
|
|
7650
|
+
),
|
|
7651
|
+
!isLast && /* @__PURE__ */ jsx41("div", { className: "flex items-center px-2 group", children: /* @__PURE__ */ jsx41(ArrowRightIcon, {}) })
|
|
7652
|
+
] }, idx);
|
|
7653
|
+
}) })
|
|
7654
|
+
] });
|
|
7655
|
+
};
|
|
7656
|
+
var ProgressCirclesBase = ({
|
|
7657
|
+
label,
|
|
7658
|
+
steps,
|
|
7659
|
+
currentStep
|
|
7660
|
+
}) => {
|
|
7661
|
+
return /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-2 w-full", children: [
|
|
7662
|
+
label && /* @__PURE__ */ jsx41("label", { className: "py-2 text-base font-semibold text-gray-700 dark:text-gray-300", children: label }),
|
|
7663
|
+
/* @__PURE__ */ jsxs30("div", { className: "relative flex items-center justify-between w-full", children: [
|
|
7664
|
+
/* @__PURE__ */ jsx41("div", { className: "absolute top-5 left-0 w-full h-1 bg-zinc-200 dark:bg-zinc-700" }),
|
|
7665
|
+
/* @__PURE__ */ jsx41(
|
|
7666
|
+
"div",
|
|
7667
|
+
{
|
|
7668
|
+
className: "absolute top-5 left-0 h-1 bg-primary transition-all duration-300",
|
|
7669
|
+
style: {
|
|
7670
|
+
width: `${currentStep / (steps.length - 1) * 100}%`
|
|
7671
|
+
}
|
|
7672
|
+
}
|
|
7673
|
+
),
|
|
7674
|
+
steps.map((step, idx) => {
|
|
7675
|
+
const isActive = idx <= currentStep;
|
|
7676
|
+
return /* @__PURE__ */ jsxs30(
|
|
7677
|
+
"div",
|
|
7678
|
+
{
|
|
7679
|
+
className: "relative flex flex-col items-center w-10",
|
|
7680
|
+
style: { zIndex: isActive ? 10 : 1 },
|
|
7681
|
+
children: [
|
|
7682
|
+
/* @__PURE__ */ jsx41(
|
|
7683
|
+
"div",
|
|
7684
|
+
{
|
|
7685
|
+
className: cn(
|
|
7686
|
+
"w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm transition-all duration-300 cursor-pointer select-none",
|
|
7687
|
+
isActive ? "bg-primary text-white dark:text-black shadow-md" : "bg-zinc-200 text-zinc-500 hover:bg-zinc-300 dark:bg-zinc-500 dark:text-black"
|
|
7688
|
+
),
|
|
7689
|
+
children: idx + 1
|
|
7690
|
+
}
|
|
7691
|
+
),
|
|
7692
|
+
/* @__PURE__ */ jsx41("span", { className: "text-xs text-center font-medium mt-1 max-w-[80px] break-words", children: step })
|
|
7693
|
+
]
|
|
7694
|
+
},
|
|
7695
|
+
idx
|
|
7696
|
+
);
|
|
7697
|
+
})
|
|
7698
|
+
] })
|
|
7699
|
+
] });
|
|
7700
|
+
};
|
|
7701
|
+
|
|
7702
|
+
// src/components/ui/feedback/SkeletonBase.tsx
|
|
7703
|
+
import { jsx as jsx42 } from "react/jsx-runtime";
|
|
7704
|
+
function SkeletonBase({
|
|
7705
|
+
className,
|
|
7706
|
+
...props
|
|
7707
|
+
}) {
|
|
7708
|
+
return /* @__PURE__ */ jsx42("div", { className: cn("animate-pulse bg-primary/10", className), ...props });
|
|
7709
|
+
}
|
|
7710
|
+
|
|
7711
|
+
// src/components/ui/feedback/SonnerBase.tsx
|
|
7712
|
+
import {
|
|
7713
|
+
CheckCircleIcon,
|
|
7714
|
+
XCircleIcon as XCircleIcon2,
|
|
7715
|
+
InfoIcon,
|
|
7716
|
+
WarningIcon,
|
|
7717
|
+
SpinnerIcon
|
|
7718
|
+
} from "@phosphor-icons/react";
|
|
7719
|
+
import { Toaster as Sonner, toast as sonnertoast } from "sonner";
|
|
7720
|
+
import { jsx as jsx43 } from "react/jsx-runtime";
|
|
7721
|
+
var iconBaseClass = "w-5 h-auto";
|
|
7722
|
+
var Toaster = ({ testId, ...props }) => {
|
|
7723
|
+
return /* @__PURE__ */ jsx43(
|
|
7724
|
+
Sonner,
|
|
7725
|
+
{
|
|
7726
|
+
className: "toaster group",
|
|
7727
|
+
position: "top-center",
|
|
7728
|
+
toastOptions: {
|
|
7729
|
+
classNames: {
|
|
7730
|
+
toast: `
|
|
7731
|
+
group toast
|
|
7732
|
+
bg-background
|
|
7733
|
+
text-foreground
|
|
7734
|
+
shadow-lg rounded-md
|
|
7735
|
+
border-l-4
|
|
7736
|
+
border-border
|
|
7737
|
+
flex items-center gap-3
|
|
7738
|
+
data-[type=success]:border-l-green-500 data-[type=success]:bg-green-50 data-[type=success]:text-green-800 data-[type=success]:border-green-500
|
|
7739
|
+
data-[type=error]:border-l-red-500 data-[type=error]:bg-red-50 data-[type=error]:text-red-800 data-[type=error]:border-red-500
|
|
7740
|
+
data-[type=WarningIcon]:border-l-yellow-500 data-[type=WarningIcon]:bg-yellow-50 data-[type=WarningIcon]:text-yellow-800 data-[type=WarningIcon]:border-yellow-500
|
|
7741
|
+
data-[type=InfoIcon]:border-l-blue-500 data-[type=InfoIcon]:bg-blue-50 data-[type=InfoIcon]:text-blue-800 data-[type=InfoIcon]:border-blue-500
|
|
7742
|
+
`,
|
|
7743
|
+
description: `
|
|
7744
|
+
text-sm
|
|
7745
|
+
group-[.toast]:text-neutral-600
|
|
7746
|
+
`,
|
|
7747
|
+
actionButton: `
|
|
7748
|
+
ml-auto
|
|
7749
|
+
rounded-md px-3 py-1 text-sm font-semibold
|
|
7750
|
+
bg-neutral-800 text-white
|
|
7751
|
+
hover:bg-neutral-700
|
|
7752
|
+
transition-colors duration-200
|
|
7753
|
+
`,
|
|
7754
|
+
cancelButton: `
|
|
7755
|
+
ml-2
|
|
7756
|
+
rounded-md px-3 py-1 text-sm font-semibold
|
|
7757
|
+
bg-neutral-100 text-neutral-700
|
|
7758
|
+
hover:bg-neutral-200
|
|
7759
|
+
transition-colors duration-200
|
|
7760
|
+
`
|
|
7761
|
+
}
|
|
7762
|
+
},
|
|
7763
|
+
"data-testid": testId,
|
|
7764
|
+
...props
|
|
7765
|
+
}
|
|
7766
|
+
);
|
|
7767
|
+
};
|
|
7768
|
+
var toast2 = {
|
|
7769
|
+
success: (message) => sonnertoast.success(message, {
|
|
7770
|
+
icon: /* @__PURE__ */ jsx43(CheckCircleIcon, { className: `${iconBaseClass} text-green-600`, weight: "fill" }),
|
|
7771
|
+
className: "sonner-success"
|
|
7772
|
+
}),
|
|
7773
|
+
error: (message) => sonnertoast.error(message, {
|
|
7774
|
+
icon: /* @__PURE__ */ jsx43(XCircleIcon2, { className: `${iconBaseClass} text-red-600`, weight: "fill" }),
|
|
7775
|
+
className: "sonner-error"
|
|
7776
|
+
}),
|
|
7777
|
+
warning: (message) => sonnertoast.warning(message, {
|
|
7778
|
+
icon: /* @__PURE__ */ jsx43(WarningIcon, { className: `${iconBaseClass} text-yellow-600`, weight: "fill" }),
|
|
7779
|
+
className: "sonner-WarningIcon"
|
|
7780
|
+
}),
|
|
7781
|
+
info: (message) => sonnertoast.info(message, {
|
|
7782
|
+
icon: /* @__PURE__ */ jsx43(InfoIcon, { className: `${iconBaseClass} text-blue-600`, weight: "fill" }),
|
|
7783
|
+
className: "sonner-InfoIcon"
|
|
7784
|
+
}),
|
|
7785
|
+
loading: (message) => sonnertoast(message, {
|
|
7786
|
+
icon: /* @__PURE__ */ jsx43(SpinnerIcon, { className: `${iconBaseClass} animate-spin text-neutral-500`, weight: "fill" }),
|
|
7787
|
+
className: "sonner-loading"
|
|
7788
|
+
})
|
|
7789
|
+
};
|
|
7790
|
+
|
|
7791
|
+
// src/components/ui/form/CheckBoxBase.tsx
|
|
7792
|
+
import * as React25 from "react";
|
|
7793
|
+
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
|
7794
|
+
import { CheckIcon as CheckIcon8 } from "@phosphor-icons/react";
|
|
7795
|
+
import { motion as motion11 } from "framer-motion";
|
|
7796
|
+
import { jsx as jsx44 } from "react/jsx-runtime";
|
|
7797
|
+
var CheckboxBase = React25.forwardRef(({ className, testid: dataTestId = "checkbox-base", ...props }, ref) => /* @__PURE__ */ jsx44(
|
|
7798
|
+
CheckboxPrimitive.Root,
|
|
7799
|
+
{
|
|
7800
|
+
ref,
|
|
7801
|
+
className: cn(
|
|
7802
|
+
"peer h-4 w-4 shrink-0 rounded-md border border-primary shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground transition-colors",
|
|
7803
|
+
className
|
|
7804
|
+
),
|
|
7805
|
+
"data-testid": dataTestId,
|
|
7806
|
+
...props,
|
|
7807
|
+
children: /* @__PURE__ */ jsx44(CheckboxPrimitive.Indicator, { asChild: true, children: /* @__PURE__ */ jsx44(
|
|
7808
|
+
motion11.div,
|
|
7809
|
+
{
|
|
7810
|
+
initial: { scale: 0, opacity: 0, rotate: -90 },
|
|
7811
|
+
animate: { scale: 1, opacity: 1, rotate: 0 },
|
|
7812
|
+
exit: { scale: 0, opacity: 0, rotate: 90 },
|
|
7813
|
+
transition: { type: "spring", stiffness: 500, damping: 30 },
|
|
7814
|
+
className: "flex items-center justify-center text-current",
|
|
7815
|
+
children: /* @__PURE__ */ jsx44(CheckIcon8, { className: "h-4 w-4", weight: "bold" })
|
|
7816
|
+
}
|
|
7817
|
+
) })
|
|
7818
|
+
}
|
|
7819
|
+
));
|
|
7820
|
+
CheckboxBase.displayName = CheckboxPrimitive.Root.displayName;
|
|
7821
|
+
|
|
7822
|
+
// src/components/ui/form/CollapsibleBase.tsx
|
|
7823
|
+
import * as React26 from "react";
|
|
7824
|
+
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
|
|
7825
|
+
import { CaretUpDownIcon } from "@phosphor-icons/react";
|
|
7826
|
+
import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
7827
|
+
var CollapsibleBase = React26.forwardRef(({ ...props }, ref) => {
|
|
7828
|
+
return /* @__PURE__ */ jsx45(CollapsiblePrimitive.Root, { ref, "data-slot": "collapsible", ...props });
|
|
7829
|
+
});
|
|
7830
|
+
CollapsibleBase.displayName = CollapsiblePrimitive.Root.displayName;
|
|
7831
|
+
var CollapsibleTriggerBase = React26.forwardRef(({ className, children, leftIcon, showCaret = true, ...props }, ref) => {
|
|
7832
|
+
return /* @__PURE__ */ jsxs31(
|
|
7833
|
+
CollapsiblePrimitive.CollapsibleTrigger,
|
|
7834
|
+
{
|
|
7835
|
+
ref,
|
|
7836
|
+
className: cn(
|
|
7837
|
+
"flex w-full items-center justify-between p-3 text-left font-medium transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)] hover:bg-accent hover:text-accent-foreground rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [&[data-state=open]_.caret-icon]:rotate-180",
|
|
7838
|
+
className
|
|
7839
|
+
),
|
|
7840
|
+
"data-slot": "collapsible-trigger",
|
|
7841
|
+
...props,
|
|
7842
|
+
children: [
|
|
7843
|
+
/* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2", children: [
|
|
7844
|
+
leftIcon && /* @__PURE__ */ jsx45("span", { className: "flex-shrink-0 [&>svg]:size-4", children: leftIcon }),
|
|
7845
|
+
/* @__PURE__ */ jsx45("span", { children })
|
|
7846
|
+
] }),
|
|
7847
|
+
showCaret && /* @__PURE__ */ jsx45("span", { className: "caret-icon flex-shrink-0 transition-transform duration-500 ease-[cubic-bezier(0.4,0,0.2,1)]", children: /* @__PURE__ */ jsx45(CaretUpDownIcon, { className: "h-4 w-4" }) })
|
|
7848
|
+
]
|
|
7849
|
+
}
|
|
7850
|
+
);
|
|
7851
|
+
});
|
|
7852
|
+
CollapsibleTriggerBase.displayName = CollapsiblePrimitive.CollapsibleTrigger.displayName;
|
|
7853
|
+
var CollapsibleContentBase = React26.forwardRef(({ className, children, ...props }, ref) => {
|
|
7854
|
+
return /* @__PURE__ */ jsx45(
|
|
7855
|
+
CollapsiblePrimitive.CollapsibleContent,
|
|
7856
|
+
{
|
|
7857
|
+
ref,
|
|
7858
|
+
className: cn(
|
|
7859
|
+
"overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
|
|
7860
|
+
className
|
|
7861
|
+
),
|
|
7862
|
+
"data-slot": "collapsible-content",
|
|
7863
|
+
...props,
|
|
7864
|
+
children: /* @__PURE__ */ jsx45("div", { className: "pb-3 pt-1", children })
|
|
7865
|
+
}
|
|
7866
|
+
);
|
|
7867
|
+
});
|
|
7868
|
+
CollapsibleContentBase.displayName = CollapsiblePrimitive.CollapsibleContent.displayName;
|
|
7869
|
+
|
|
7870
|
+
// src/components/ui/form/DebounceInput.tsx
|
|
7871
|
+
import { useEffect as useEffect10, useState as useState11 } from "react";
|
|
7872
|
+
import { CircleNotchIcon } from "@phosphor-icons/react";
|
|
7873
|
+
import { jsx as jsx46 } from "react/jsx-runtime";
|
|
7874
|
+
|
|
7875
|
+
// src/components/ui/form/HoverCardBase.tsx
|
|
7876
|
+
import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
|
|
7877
|
+
import { jsx as jsx47 } from "react/jsx-runtime";
|
|
7878
|
+
function HoverCardBase(props) {
|
|
7879
|
+
return /* @__PURE__ */ jsx47(HoverCardPrimitive.Root, { ...props });
|
|
7880
|
+
}
|
|
7881
|
+
function HoverCardTriggerBase(props) {
|
|
7882
|
+
return /* @__PURE__ */ jsx47(HoverCardPrimitive.Trigger, { ...props });
|
|
7883
|
+
}
|
|
7884
|
+
function HoverCardContentBase({
|
|
7885
|
+
className,
|
|
7886
|
+
align = "center",
|
|
7887
|
+
sideOffset = 4,
|
|
7888
|
+
...props
|
|
7889
|
+
}) {
|
|
7890
|
+
return /* @__PURE__ */ jsx47(HoverCardPrimitive.Portal, { children: /* @__PURE__ */ jsx47(
|
|
7891
|
+
HoverCardPrimitive.Content,
|
|
7892
|
+
{
|
|
7893
|
+
align,
|
|
7894
|
+
sideOffset,
|
|
7895
|
+
className: cn(
|
|
7896
|
+
"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
|
|
7897
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
7898
|
+
"data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
|
|
7899
|
+
"data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
|
|
7900
|
+
"data-[side=bottom]:slide-in-from-top-2",
|
|
7901
|
+
"data-[side=left]:slide-in-from-right-2",
|
|
7902
|
+
"data-[side=right]:slide-in-from-left-2",
|
|
7903
|
+
"data-[side=top]:slide-in-from-bottom-2",
|
|
7904
|
+
className
|
|
7905
|
+
),
|
|
7906
|
+
...props
|
|
7907
|
+
}
|
|
7908
|
+
) });
|
|
7909
|
+
}
|
|
7910
|
+
|
|
7911
|
+
// src/components/ui/form/Input-OTP-Base.tsx
|
|
7912
|
+
import * as React27 from "react";
|
|
7913
|
+
import { OTPInput, OTPInputContext } from "input-otp";
|
|
7914
|
+
import { MinusIcon } from "@phosphor-icons/react";
|
|
7915
|
+
import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
7916
|
+
function InputOTPBase({
|
|
7917
|
+
className,
|
|
7918
|
+
containerClassName,
|
|
7919
|
+
...props
|
|
7920
|
+
}) {
|
|
7921
|
+
return /* @__PURE__ */ jsx48(
|
|
7922
|
+
OTPInput,
|
|
7923
|
+
{
|
|
7924
|
+
"data-slot": "input-otp",
|
|
7925
|
+
containerClassName: cn(
|
|
7926
|
+
"flex items-center gap-2 has-disabled:opacity-50",
|
|
7927
|
+
containerClassName
|
|
7928
|
+
),
|
|
7929
|
+
className: cn("disabled:cursor-not-allowed", className),
|
|
7930
|
+
...props
|
|
7931
|
+
}
|
|
7932
|
+
);
|
|
7933
|
+
}
|
|
7934
|
+
function InputOTPGroupBase({ className, ...props }) {
|
|
7935
|
+
return /* @__PURE__ */ jsx48(
|
|
7936
|
+
"div",
|
|
7937
|
+
{
|
|
7938
|
+
"data-slot": "input-otp-group",
|
|
7939
|
+
className: cn("flex items-center", className),
|
|
7940
|
+
...props
|
|
7941
|
+
}
|
|
7942
|
+
);
|
|
7943
|
+
}
|
|
7944
|
+
function InputOTPSlotBase({
|
|
7945
|
+
index,
|
|
7946
|
+
className,
|
|
7947
|
+
...props
|
|
7948
|
+
}) {
|
|
7949
|
+
const inputOTPContext = React27.useContext(OTPInputContext);
|
|
7950
|
+
const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
|
|
7951
|
+
return /* @__PURE__ */ jsxs32(
|
|
7952
|
+
"div",
|
|
7953
|
+
{
|
|
7954
|
+
"data-slot": "input-otp-slot",
|
|
7955
|
+
"data-active": isActive,
|
|
7956
|
+
className: cn(
|
|
7957
|
+
"data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
|
|
7958
|
+
className
|
|
7959
|
+
),
|
|
7960
|
+
...props,
|
|
7961
|
+
children: [
|
|
7962
|
+
char,
|
|
7963
|
+
hasFakeCaret && /* @__PURE__ */ jsx48("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx48("div", { className: "animate-caret-blink bg-foreground h-4 w-px duration-1000" }) })
|
|
7964
|
+
]
|
|
7965
|
+
}
|
|
7966
|
+
);
|
|
7967
|
+
}
|
|
7968
|
+
function InputOTPSeparatorBase({ ...props }) {
|
|
7969
|
+
return /* @__PURE__ */ jsx48("div", { "data-slot": "input-otp-separator", role: "separator", ...props, children: /* @__PURE__ */ jsx48(MinusIcon, {}) });
|
|
7970
|
+
}
|
|
7971
|
+
|
|
7972
|
+
// src/components/ui/form/SliderBase.tsx
|
|
7973
|
+
import * as React28 from "react";
|
|
7974
|
+
import * as SliderPrimitive from "@radix-ui/react-slider";
|
|
7975
|
+
import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
7976
|
+
var SlideBase = React28.forwardRef(
|
|
7977
|
+
({
|
|
7978
|
+
className,
|
|
7979
|
+
orientation = "horizontal",
|
|
7980
|
+
label,
|
|
7981
|
+
leftIcon,
|
|
7982
|
+
rightIcon,
|
|
7983
|
+
...props
|
|
7984
|
+
}, ref) => {
|
|
7985
|
+
const isVertical = orientation === "vertical";
|
|
7986
|
+
return /* @__PURE__ */ jsxs33(
|
|
7987
|
+
"div",
|
|
7988
|
+
{
|
|
7989
|
+
className: cn("flex flex-col gap-1", isVertical ? "h-full " : "w-full"),
|
|
7990
|
+
children: [
|
|
7991
|
+
label && /* @__PURE__ */ jsx49(LabelBase_default, { className: "py-2", children: label }),
|
|
7992
|
+
/* @__PURE__ */ jsxs33(
|
|
7993
|
+
"div",
|
|
7994
|
+
{
|
|
7995
|
+
className: cn(
|
|
7996
|
+
"flex gap-2",
|
|
7997
|
+
isVertical ? "flex-col h-full" : "flex-row items-center w-full"
|
|
7998
|
+
),
|
|
7999
|
+
children: [
|
|
8000
|
+
leftIcon && /* @__PURE__ */ jsx49("div", { className: "flex items-center justify-center", children: leftIcon }),
|
|
8001
|
+
/* @__PURE__ */ jsxs33(
|
|
8002
|
+
SliderPrimitive.Root,
|
|
8003
|
+
{
|
|
8004
|
+
ref,
|
|
8005
|
+
orientation,
|
|
8006
|
+
className: cn(
|
|
8007
|
+
"relative flex touch-none select-none items-center",
|
|
8008
|
+
isVertical ? "flex-col h-full" : "flex-row w-full",
|
|
8009
|
+
className
|
|
8010
|
+
),
|
|
8011
|
+
...props,
|
|
8012
|
+
children: [
|
|
8013
|
+
/* @__PURE__ */ jsx49(
|
|
8014
|
+
SliderPrimitive.Track,
|
|
8015
|
+
{
|
|
8016
|
+
className: cn(
|
|
8017
|
+
"relative overflow-hidden bg-primary/20 rounded-full",
|
|
8018
|
+
isVertical ? "w-1.5 h-full" : "h-1.5 w-full"
|
|
8019
|
+
),
|
|
8020
|
+
children: /* @__PURE__ */ jsx49(
|
|
8021
|
+
SliderPrimitive.Range,
|
|
8022
|
+
{
|
|
8023
|
+
className: cn(
|
|
8024
|
+
"absolute bg-primary",
|
|
8025
|
+
isVertical ? "w-full" : "h-full"
|
|
8026
|
+
)
|
|
8027
|
+
}
|
|
8028
|
+
)
|
|
8029
|
+
}
|
|
8030
|
+
),
|
|
8031
|
+
/* @__PURE__ */ jsx49(
|
|
8032
|
+
SliderPrimitive.Thumb,
|
|
8033
|
+
{
|
|
8034
|
+
className: cn(
|
|
8035
|
+
"block h-4 w-4 rounded-full border border-primary/70 bg-background shadow-md transition-transform",
|
|
8036
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
|
|
8037
|
+
"hover:scale-125 active:scale-125"
|
|
8038
|
+
)
|
|
8039
|
+
}
|
|
8040
|
+
)
|
|
8041
|
+
]
|
|
8042
|
+
}
|
|
8043
|
+
),
|
|
8044
|
+
rightIcon && /* @__PURE__ */ jsx49("div", { className: "flex items-center justify-center", children: rightIcon })
|
|
8045
|
+
]
|
|
8046
|
+
}
|
|
8047
|
+
)
|
|
8048
|
+
]
|
|
8049
|
+
}
|
|
8050
|
+
);
|
|
8051
|
+
}
|
|
8052
|
+
);
|
|
8053
|
+
SlideBase.displayName = "SlideBase";
|
|
8054
|
+
|
|
8055
|
+
// src/components/ui/form/SwitchBase.tsx
|
|
8056
|
+
import * as React29 from "react";
|
|
8057
|
+
import * as SwitchPrimitives from "@radix-ui/react-switch";
|
|
8058
|
+
import { jsx as jsx50 } from "react/jsx-runtime";
|
|
8059
|
+
var SwitchBase = React29.forwardRef(({ className, testid: dataTestId = "switch-base", ...props }, ref) => {
|
|
8060
|
+
return /* @__PURE__ */ jsx50(
|
|
8061
|
+
SwitchPrimitives.Root,
|
|
8062
|
+
{
|
|
8063
|
+
...props,
|
|
8064
|
+
ref,
|
|
8065
|
+
className: cn(
|
|
8066
|
+
"peer relative inline-flex w-12 cursor-pointer items-center rounded-full border-2 border-transparent shadow-md transition-colors duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input data-[state=checked]:shadow-[0_0_15px_4px_var(--tw-shadow-color)] data-[state=checked]:shadow-primary/30",
|
|
8067
|
+
className
|
|
8068
|
+
),
|
|
8069
|
+
"data-testid": dataTestId,
|
|
8070
|
+
children: /* @__PURE__ */ jsx50(
|
|
8071
|
+
SwitchPrimitives.Thumb,
|
|
8072
|
+
{
|
|
8073
|
+
className: cn(
|
|
8074
|
+
"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-xl ring-0 transition-transform duration-350 ease-out peer-focus:shadow-lg peer-focus:ring-2 peer-focus:ring-primary/70 data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-7 data-[state=checked]:animate-bounce-thumb"
|
|
8075
|
+
),
|
|
8076
|
+
style: {
|
|
8077
|
+
transformOrigin: "center",
|
|
8078
|
+
transition: "transform 350ms cubic-bezier(0.68, -0.55, 0.265, 1.55)"
|
|
8079
|
+
}
|
|
8080
|
+
}
|
|
8081
|
+
)
|
|
8082
|
+
}
|
|
8083
|
+
);
|
|
8084
|
+
});
|
|
8085
|
+
SwitchBase.displayName = SwitchPrimitives.Root.displayName;
|
|
8086
|
+
|
|
8087
|
+
// src/components/ui/form/TextAreaBase.tsx
|
|
8088
|
+
import * as React30 from "react";
|
|
8089
|
+
import { motion as motion12 } from "framer-motion";
|
|
8090
|
+
import { TrashIcon as TrashIcon3 } from "@phosphor-icons/react";
|
|
8091
|
+
import { jsx as jsx51, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
8092
|
+
var TextAreaBase = React30.forwardRef(
|
|
8093
|
+
({ className, clearable = false, onClear, ...props }, ref) => {
|
|
8094
|
+
const [isFocused, setIsFocused] = React30.useState(false);
|
|
8095
|
+
const [hasContent, setHasContent] = React30.useState(
|
|
8096
|
+
!!props.value || !!props.defaultValue
|
|
8097
|
+
);
|
|
8098
|
+
const [showConfirmTooltip, setShowConfirmTooltip] = React30.useState(false);
|
|
8099
|
+
const textareaRef = React30.useRef(null);
|
|
8100
|
+
const handleFocus = (e) => {
|
|
8101
|
+
setIsFocused(true);
|
|
8102
|
+
props.onFocus?.(e);
|
|
8103
|
+
};
|
|
8104
|
+
const handleBlur = (e) => {
|
|
8105
|
+
setIsFocused(false);
|
|
8106
|
+
props.onBlur?.(e);
|
|
8107
|
+
};
|
|
8108
|
+
const handleChange = (e) => {
|
|
8109
|
+
setHasContent(e.target.value.length > 0);
|
|
8110
|
+
props.onChange?.(e);
|
|
8111
|
+
};
|
|
8112
|
+
const handleClearClick = () => {
|
|
8113
|
+
setShowConfirmTooltip(true);
|
|
8114
|
+
};
|
|
8115
|
+
const handleConfirmClear = () => {
|
|
8116
|
+
if (textareaRef.current) {
|
|
8117
|
+
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
|
|
8118
|
+
window.HTMLTextAreaElement.prototype,
|
|
8119
|
+
"value"
|
|
8120
|
+
)?.set;
|
|
8121
|
+
if (nativeInputValueSetter) {
|
|
8122
|
+
nativeInputValueSetter.call(textareaRef.current, "");
|
|
8123
|
+
const event = new Event("input", { bubbles: true });
|
|
8124
|
+
textareaRef.current.dispatchEvent(event);
|
|
8125
|
+
}
|
|
8126
|
+
setHasContent(false);
|
|
8127
|
+
setShowConfirmTooltip(false);
|
|
8128
|
+
textareaRef.current.focus();
|
|
8129
|
+
onClear?.();
|
|
8130
|
+
}
|
|
8131
|
+
};
|
|
8132
|
+
const handleCancelClear = () => {
|
|
8133
|
+
setShowConfirmTooltip(false);
|
|
8134
|
+
};
|
|
8135
|
+
React30.useImperativeHandle(ref, () => textareaRef.current);
|
|
8136
|
+
React30.useEffect(() => {
|
|
8137
|
+
setHasContent(!!props.value || !!props.defaultValue);
|
|
8138
|
+
}, [props.value, props.defaultValue]);
|
|
8139
|
+
return /* @__PURE__ */ jsxs34("div", { className: "relative", children: [
|
|
8140
|
+
/* @__PURE__ */ jsx51(
|
|
8141
|
+
"textarea",
|
|
8142
|
+
{
|
|
8143
|
+
className: cn(
|
|
8144
|
+
"peer flex min-h-[80px] min-w-[200px] w-full rounded-lg border border-input bg-background/50 backdrop-blur-sm",
|
|
8145
|
+
"px-4 py-3 text-base shadow-sm placeholder:text-muted-foreground/60",
|
|
8146
|
+
"transition-all duration-300 ease-out",
|
|
8147
|
+
"hover:border-input/80 hover:shadow-md",
|
|
8148
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:border-ring",
|
|
8149
|
+
"focus-visible:shadow-lg focus-visible:bg-background",
|
|
8150
|
+
"disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/30",
|
|
8151
|
+
"resize",
|
|
8152
|
+
"md:text-sm",
|
|
8153
|
+
clearable && hasContent && "pr-10",
|
|
8154
|
+
className
|
|
8155
|
+
),
|
|
8156
|
+
ref: textareaRef,
|
|
8157
|
+
onFocus: handleFocus,
|
|
8158
|
+
onBlur: handleBlur,
|
|
8159
|
+
onChange: handleChange,
|
|
8160
|
+
...props
|
|
8161
|
+
}
|
|
8162
|
+
),
|
|
8163
|
+
clearable && hasContent && /* @__PURE__ */ jsx51(TooltipProviderBase, { children: /* @__PURE__ */ jsxs34(
|
|
8164
|
+
TooltipBase,
|
|
8165
|
+
{
|
|
8166
|
+
open: showConfirmTooltip,
|
|
8167
|
+
onOpenChange: setShowConfirmTooltip,
|
|
8168
|
+
children: [
|
|
8169
|
+
/* @__PURE__ */ jsx51(TooltipTriggerBase, { asChild: true, children: /* @__PURE__ */ jsx51(
|
|
8170
|
+
motion12.button,
|
|
8171
|
+
{
|
|
8172
|
+
type: "button",
|
|
8173
|
+
initial: { opacity: 0, scale: 0.8 },
|
|
8174
|
+
animate: { opacity: 1, scale: 1 },
|
|
8175
|
+
exit: { opacity: 0, scale: 0.8 },
|
|
8176
|
+
transition: { duration: 0.2 },
|
|
8177
|
+
onClick: handleClearClick,
|
|
8178
|
+
className: cn(
|
|
8179
|
+
"absolute top-3 right-3 p-1.5 rounded-md",
|
|
8180
|
+
"text-muted-foreground/50 hover:text-destructive hover:bg-destructive/10",
|
|
8181
|
+
"transition-all duration-200",
|
|
8182
|
+
"focus:outline-none focus:ring-2 focus:ring-destructive/30",
|
|
8183
|
+
"disabled:opacity-50 disabled:cursor-not-allowed"
|
|
8184
|
+
),
|
|
8185
|
+
disabled: props.disabled,
|
|
8186
|
+
"aria-label": "Limpar texto",
|
|
8187
|
+
children: /* @__PURE__ */ jsx51(TrashIcon3, { size: 16, weight: "regular" })
|
|
8188
|
+
}
|
|
8189
|
+
) }),
|
|
8190
|
+
/* @__PURE__ */ jsxs34(
|
|
8191
|
+
TooltipContentBase,
|
|
8192
|
+
{
|
|
8193
|
+
side: "left",
|
|
8194
|
+
className: "bg-background border border-border shadow-lg p-3 flex flex-col gap-2",
|
|
8195
|
+
children: [
|
|
8196
|
+
/* @__PURE__ */ jsx51("p", { className: "text-sm text-foreground font-medium mb-1", children: "Limpar todo o texto?" }),
|
|
8197
|
+
/* @__PURE__ */ jsxs34("div", { className: "flex gap-2", children: [
|
|
8198
|
+
/* @__PURE__ */ jsx51(
|
|
8199
|
+
"button",
|
|
8200
|
+
{
|
|
8201
|
+
type: "button",
|
|
8202
|
+
onClick: handleConfirmClear,
|
|
8203
|
+
className: cn(
|
|
8204
|
+
"px-3 py-1.5 text-xs rounded-md font-medium",
|
|
8205
|
+
"bg-destructive text-destructive-foreground",
|
|
8206
|
+
"hover:bg-destructive/90",
|
|
8207
|
+
"transition-colors"
|
|
8208
|
+
),
|
|
8209
|
+
children: "Confirmar"
|
|
8210
|
+
}
|
|
8211
|
+
),
|
|
8212
|
+
/* @__PURE__ */ jsx51(
|
|
8213
|
+
"button",
|
|
8214
|
+
{
|
|
8215
|
+
type: "button",
|
|
8216
|
+
onClick: handleCancelClear,
|
|
8217
|
+
className: cn(
|
|
8218
|
+
"px-3 py-1.5 text-xs rounded-md font-medium",
|
|
8219
|
+
"bg-secondary text-secondary-foreground",
|
|
8220
|
+
"hover:bg-secondary/80",
|
|
8221
|
+
"transition-colors"
|
|
8222
|
+
),
|
|
8223
|
+
children: "Cancelar"
|
|
8224
|
+
}
|
|
8225
|
+
)
|
|
8226
|
+
] })
|
|
8227
|
+
]
|
|
8228
|
+
}
|
|
8229
|
+
)
|
|
8230
|
+
]
|
|
8231
|
+
}
|
|
8232
|
+
) }),
|
|
8233
|
+
/* @__PURE__ */ jsx51(
|
|
8234
|
+
motion12.div,
|
|
8235
|
+
{
|
|
8236
|
+
className: "pointer-events-none absolute inset-0 rounded-lg",
|
|
8237
|
+
initial: { opacity: 0 },
|
|
8238
|
+
animate: { opacity: isFocused ? 1 : 0 },
|
|
8239
|
+
transition: { duration: 0.3 },
|
|
8240
|
+
children: /* @__PURE__ */ jsx51("div", { className: "absolute inset-0 rounded-lg bg-gradient-to-r from-ring/20 via-ring/10 to-ring/20 blur-sm" })
|
|
8241
|
+
}
|
|
8242
|
+
),
|
|
8243
|
+
isFocused && hasContent && props.maxLength && /* @__PURE__ */ jsxs34(
|
|
8244
|
+
motion12.div,
|
|
8245
|
+
{
|
|
8246
|
+
initial: { opacity: 0, y: -10 },
|
|
8247
|
+
animate: { opacity: 1, y: 0 },
|
|
8248
|
+
exit: { opacity: 0, y: -10 },
|
|
8249
|
+
className: "absolute bottom-2 right-3 text-xs text-muted-foreground/70 font-medium",
|
|
8250
|
+
children: [
|
|
8251
|
+
props.value?.length || 0,
|
|
8252
|
+
" / ",
|
|
8253
|
+
props.maxLength
|
|
8254
|
+
]
|
|
8255
|
+
}
|
|
8256
|
+
)
|
|
8257
|
+
] });
|
|
8258
|
+
}
|
|
8259
|
+
);
|
|
8260
|
+
TextAreaBase.displayName = "TextAreaBase";
|
|
8261
|
+
|
|
8262
|
+
// src/components/ui/layout/CarouselBase.tsx
|
|
8263
|
+
import * as React31 from "react";
|
|
8264
|
+
import useEmblaCarousel from "embla-carousel-react";
|
|
8265
|
+
import { ArrowLeftIcon as ArrowLeftIcon2, ArrowRightIcon as ArrowRightIcon2 } from "@phosphor-icons/react";
|
|
8266
|
+
import { jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
8267
|
+
var CarouselContext = React31.createContext(null);
|
|
8268
|
+
function useCarousel() {
|
|
8269
|
+
const context = React31.useContext(CarouselContext);
|
|
8270
|
+
if (!context) {
|
|
8271
|
+
throw new Error("useCarousel must be used within a <CarouselBase />");
|
|
8272
|
+
}
|
|
8273
|
+
return context;
|
|
8274
|
+
}
|
|
8275
|
+
function CarouselBase({
|
|
8276
|
+
orientation = "horizontal",
|
|
8277
|
+
opts,
|
|
8278
|
+
setApi,
|
|
8279
|
+
plugins,
|
|
8280
|
+
className,
|
|
8281
|
+
children,
|
|
8282
|
+
...props
|
|
8283
|
+
}) {
|
|
8284
|
+
const [carouselRef, api] = useEmblaCarousel(
|
|
8285
|
+
{
|
|
8286
|
+
...opts,
|
|
8287
|
+
axis: orientation === "horizontal" ? "x" : "y"
|
|
8288
|
+
},
|
|
8289
|
+
plugins
|
|
8290
|
+
);
|
|
8291
|
+
const [canScrollPrev, setCanScrollPrev] = React31.useState(false);
|
|
8292
|
+
const [canScrollNext, setCanScrollNext] = React31.useState(false);
|
|
8293
|
+
const onSelect = React31.useCallback((api2) => {
|
|
8294
|
+
if (!api2) return;
|
|
8295
|
+
setCanScrollPrev(api2.canScrollPrev());
|
|
8296
|
+
setCanScrollNext(api2.canScrollNext());
|
|
8297
|
+
}, []);
|
|
8298
|
+
const scrollPrev = React31.useCallback(() => {
|
|
8299
|
+
api?.scrollPrev();
|
|
8300
|
+
}, [api]);
|
|
8301
|
+
const scrollNext = React31.useCallback(() => {
|
|
8302
|
+
api?.scrollNext();
|
|
8303
|
+
}, [api]);
|
|
8304
|
+
const handleKeyDown = React31.useCallback(
|
|
8305
|
+
(event) => {
|
|
8306
|
+
if (event.key === "ArrowLeft") {
|
|
8307
|
+
event.preventDefault();
|
|
8308
|
+
scrollPrev();
|
|
8309
|
+
} else if (event.key === "ArrowRight") {
|
|
8310
|
+
event.preventDefault();
|
|
8311
|
+
scrollNext();
|
|
8312
|
+
}
|
|
8313
|
+
},
|
|
8314
|
+
[scrollPrev, scrollNext]
|
|
8315
|
+
);
|
|
8316
|
+
React31.useEffect(() => {
|
|
8317
|
+
if (!api || !setApi) return;
|
|
8318
|
+
setApi(api);
|
|
8319
|
+
}, [api, setApi]);
|
|
8320
|
+
React31.useEffect(() => {
|
|
8321
|
+
if (!api) return;
|
|
8322
|
+
onSelect(api);
|
|
8323
|
+
api.on("reInit", onSelect);
|
|
8324
|
+
api.on("select", onSelect);
|
|
8325
|
+
return () => {
|
|
8326
|
+
api?.off("select", onSelect);
|
|
8327
|
+
};
|
|
8328
|
+
}, [api, onSelect]);
|
|
8329
|
+
return /* @__PURE__ */ jsx52(
|
|
8330
|
+
CarouselContext.Provider,
|
|
8331
|
+
{
|
|
8332
|
+
value: {
|
|
8333
|
+
carouselRef,
|
|
8334
|
+
api,
|
|
8335
|
+
opts,
|
|
8336
|
+
orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
|
|
8337
|
+
scrollPrev,
|
|
8338
|
+
scrollNext,
|
|
8339
|
+
canScrollPrev,
|
|
8340
|
+
canScrollNext
|
|
8341
|
+
},
|
|
8342
|
+
children: /* @__PURE__ */ jsx52(
|
|
8343
|
+
"div",
|
|
8344
|
+
{
|
|
8345
|
+
onKeyDownCapture: handleKeyDown,
|
|
8346
|
+
className: cn("relative", className),
|
|
8347
|
+
role: "region",
|
|
8348
|
+
"aria-roledescription": "carousel",
|
|
8349
|
+
"data-slot": "carousel",
|
|
8350
|
+
...props,
|
|
8351
|
+
children
|
|
8352
|
+
}
|
|
8353
|
+
)
|
|
8354
|
+
}
|
|
8355
|
+
);
|
|
8356
|
+
}
|
|
8357
|
+
function CarouselContentBase({
|
|
8358
|
+
className,
|
|
8359
|
+
...props
|
|
8360
|
+
}) {
|
|
8361
|
+
const { carouselRef, orientation } = useCarousel();
|
|
8362
|
+
return /* @__PURE__ */ jsx52(
|
|
8363
|
+
"div",
|
|
8364
|
+
{
|
|
8365
|
+
ref: carouselRef,
|
|
8366
|
+
className: "overflow-hidden",
|
|
8367
|
+
"data-slot": "carousel-content",
|
|
8368
|
+
children: /* @__PURE__ */ jsx52(
|
|
8369
|
+
"div",
|
|
8370
|
+
{
|
|
8371
|
+
className: cn(
|
|
8372
|
+
"flex",
|
|
8373
|
+
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
|
|
8374
|
+
className
|
|
8375
|
+
),
|
|
8376
|
+
...props
|
|
8377
|
+
}
|
|
8378
|
+
)
|
|
8379
|
+
}
|
|
8380
|
+
);
|
|
8381
|
+
}
|
|
8382
|
+
function CarouselItemBase({
|
|
8383
|
+
className,
|
|
8384
|
+
...props
|
|
8385
|
+
}) {
|
|
8386
|
+
const { orientation } = useCarousel();
|
|
8387
|
+
return /* @__PURE__ */ jsx52(
|
|
8388
|
+
"div",
|
|
8389
|
+
{
|
|
8390
|
+
role: "group",
|
|
8391
|
+
"aria-roledescription": "slide",
|
|
8392
|
+
"data-slot": "carousel-item",
|
|
8393
|
+
className: cn(
|
|
8394
|
+
"min-w-0 shrink-0 grow-0 basis-full",
|
|
8395
|
+
orientation === "horizontal" ? "pl-4" : "pt-4",
|
|
8396
|
+
className
|
|
8397
|
+
),
|
|
8398
|
+
...props
|
|
8399
|
+
}
|
|
8400
|
+
);
|
|
8401
|
+
}
|
|
8402
|
+
function CarouselPrevious({
|
|
8403
|
+
className,
|
|
8404
|
+
variant = "outline",
|
|
8405
|
+
size = "icon",
|
|
8406
|
+
...props
|
|
8407
|
+
}) {
|
|
8408
|
+
const { orientation, scrollPrev, canScrollPrev } = useCarousel();
|
|
8409
|
+
return /* @__PURE__ */ jsxs35(
|
|
8410
|
+
ButtonBase,
|
|
8411
|
+
{
|
|
8412
|
+
"data-slot": "carousel-previous",
|
|
8413
|
+
variant,
|
|
8414
|
+
size,
|
|
8415
|
+
className: cn(
|
|
8416
|
+
"absolute size-8 rounded-full",
|
|
8417
|
+
orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
|
|
8418
|
+
className
|
|
8419
|
+
),
|
|
8420
|
+
disabled: !canScrollPrev,
|
|
8421
|
+
onClick: scrollPrev,
|
|
8422
|
+
...props,
|
|
8423
|
+
children: [
|
|
8424
|
+
/* @__PURE__ */ jsx52(ArrowLeftIcon2, {}),
|
|
8425
|
+
/* @__PURE__ */ jsx52("span", { className: "sr-only", children: "Previous slide" })
|
|
8426
|
+
]
|
|
8427
|
+
}
|
|
8428
|
+
);
|
|
8429
|
+
}
|
|
8430
|
+
function CarouselNextBase({
|
|
8431
|
+
className,
|
|
8432
|
+
variant = "outline",
|
|
8433
|
+
size = "icon",
|
|
8434
|
+
...props
|
|
8435
|
+
}) {
|
|
8436
|
+
const { orientation, scrollNext, canScrollNext } = useCarousel();
|
|
8437
|
+
return /* @__PURE__ */ jsxs35(
|
|
8438
|
+
ButtonBase,
|
|
8439
|
+
{
|
|
8440
|
+
"data-slot": "carousel-next",
|
|
8441
|
+
variant,
|
|
8442
|
+
size,
|
|
8443
|
+
className: cn(
|
|
8444
|
+
"absolute size-8 rounded-full",
|
|
8445
|
+
orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
|
|
8446
|
+
className
|
|
8447
|
+
),
|
|
8448
|
+
disabled: !canScrollNext,
|
|
8449
|
+
onClick: scrollNext,
|
|
8450
|
+
...props,
|
|
8451
|
+
children: [
|
|
8452
|
+
/* @__PURE__ */ jsx52(ArrowRightIcon2, {}),
|
|
8453
|
+
/* @__PURE__ */ jsx52("span", { className: "sr-only", children: "Next slide" })
|
|
8454
|
+
]
|
|
8455
|
+
}
|
|
8456
|
+
);
|
|
8457
|
+
}
|
|
8458
|
+
|
|
8459
|
+
// src/components/ui/layout/SeparatorBase.tsx
|
|
8460
|
+
import * as React32 from "react";
|
|
8461
|
+
import * as SeparatorPrimitive from "@radix-ui/react-separator";
|
|
8462
|
+
import { motion as motion13 } from "framer-motion";
|
|
8463
|
+
import { jsx as jsx53 } from "react/jsx-runtime";
|
|
8464
|
+
var SeparatorBase = React32.forwardRef(
|
|
8465
|
+
({ className, orientation = "horizontal", decorative = true, ...props }, ref) => {
|
|
8466
|
+
const isHorizontal = orientation === "horizontal";
|
|
8467
|
+
return /* @__PURE__ */ jsx53(
|
|
8468
|
+
SeparatorPrimitive.Root,
|
|
8469
|
+
{
|
|
8470
|
+
ref,
|
|
8471
|
+
decorative,
|
|
8472
|
+
orientation,
|
|
8473
|
+
asChild: true,
|
|
8474
|
+
...props,
|
|
8475
|
+
children: /* @__PURE__ */ jsx53(
|
|
8476
|
+
motion13.div,
|
|
8477
|
+
{
|
|
8478
|
+
className: cn(
|
|
8479
|
+
"shrink-0 bg-border",
|
|
8480
|
+
isHorizontal ? "h-[1px] w-full" : "h-full w-[1px]",
|
|
8481
|
+
className
|
|
8482
|
+
),
|
|
8483
|
+
initial: {
|
|
8484
|
+
scaleX: isHorizontal ? 0 : 1,
|
|
8485
|
+
scaleY: isHorizontal ? 1 : 0
|
|
8486
|
+
},
|
|
8487
|
+
animate: { scaleX: 1, scaleY: 1 },
|
|
8488
|
+
transition: { duration: 0.2, ease: "easeInOut" }
|
|
8489
|
+
}
|
|
8490
|
+
)
|
|
8491
|
+
}
|
|
8492
|
+
);
|
|
8493
|
+
}
|
|
8494
|
+
);
|
|
8495
|
+
SeparatorBase.displayName = SeparatorPrimitive.Root.displayName;
|
|
8496
|
+
|
|
8497
|
+
// src/components/ui/layout/TableBase.tsx
|
|
8498
|
+
import * as React33 from "react";
|
|
8499
|
+
import { jsx as jsx54 } from "react/jsx-runtime";
|
|
8500
|
+
var TableBase = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx54("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx54(
|
|
8501
|
+
"table",
|
|
8502
|
+
{
|
|
8503
|
+
ref,
|
|
8504
|
+
className: cn("w-full caption-bottom text-sm", className),
|
|
8505
|
+
...props
|
|
8506
|
+
}
|
|
8507
|
+
) }));
|
|
8508
|
+
TableBase.displayName = "TableBase";
|
|
8509
|
+
var TableHeaderBase = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx54("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
|
|
8510
|
+
TableHeaderBase.displayName = "TableHeaderBase";
|
|
8511
|
+
var TableBodyBase = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx54(
|
|
8512
|
+
"tbody",
|
|
8513
|
+
{
|
|
8514
|
+
ref,
|
|
8515
|
+
className: cn("[&_tr:last-child]:border-0", className),
|
|
8516
|
+
...props
|
|
8517
|
+
}
|
|
8518
|
+
));
|
|
8519
|
+
TableBodyBase.displayName = "TableBodyBase";
|
|
8520
|
+
var TableFooterBase = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx54(
|
|
8521
|
+
"tfoot",
|
|
8522
|
+
{
|
|
8523
|
+
ref,
|
|
8524
|
+
className: cn(
|
|
8525
|
+
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
|
|
8526
|
+
className
|
|
8527
|
+
),
|
|
8528
|
+
...props
|
|
8529
|
+
}
|
|
8530
|
+
));
|
|
8531
|
+
TableFooterBase.displayName = "TableFooterBase";
|
|
8532
|
+
var TableRowBase = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx54(
|
|
8533
|
+
"tr",
|
|
8534
|
+
{
|
|
8535
|
+
ref,
|
|
8536
|
+
className: cn(
|
|
8537
|
+
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
|
8538
|
+
className
|
|
8539
|
+
),
|
|
8540
|
+
...props
|
|
8541
|
+
}
|
|
8542
|
+
));
|
|
8543
|
+
TableRowBase.displayName = "TableRowBase";
|
|
8544
|
+
var TableHeadBase = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx54(
|
|
8545
|
+
"th",
|
|
8546
|
+
{
|
|
8547
|
+
ref,
|
|
8548
|
+
className: cn(
|
|
8549
|
+
"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
|
8550
|
+
className
|
|
8551
|
+
),
|
|
8552
|
+
...props
|
|
8553
|
+
}
|
|
8554
|
+
));
|
|
8555
|
+
TableHeadBase.displayName = "TableHeadBase";
|
|
8556
|
+
var TableCellBase = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx54(
|
|
8557
|
+
"td",
|
|
8558
|
+
{
|
|
8559
|
+
ref,
|
|
8560
|
+
className: cn(
|
|
8561
|
+
"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
|
8562
|
+
className
|
|
8563
|
+
),
|
|
8564
|
+
...props
|
|
8565
|
+
}
|
|
8566
|
+
));
|
|
8567
|
+
TableCellBase.displayName = "TableCellBase";
|
|
8568
|
+
var TableCaptionBase = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx54(
|
|
8569
|
+
"caption",
|
|
8570
|
+
{
|
|
8571
|
+
ref,
|
|
8572
|
+
className: cn("mt-4 text-sm text-muted-foreground", className),
|
|
8573
|
+
...props
|
|
8574
|
+
}
|
|
8575
|
+
));
|
|
8576
|
+
TableCaptionBase.displayName = "TableCaptionBase";
|
|
8577
|
+
|
|
8578
|
+
// src/components/ui/layout/TabsBase.tsx
|
|
8579
|
+
import * as React34 from "react";
|
|
8580
|
+
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
8581
|
+
import { jsx as jsx55 } from "react/jsx-runtime";
|
|
8582
|
+
var TabsBase = TabsPrimitive.Root;
|
|
8583
|
+
var TabsListBase = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx55(
|
|
8584
|
+
TabsPrimitive.List,
|
|
8585
|
+
{
|
|
8586
|
+
ref,
|
|
8587
|
+
className: cn(
|
|
8588
|
+
"relative flex w-full items-center justify-start gap-2 border-b border-border",
|
|
8589
|
+
"bg-transparent",
|
|
8590
|
+
className
|
|
8591
|
+
),
|
|
8592
|
+
...props
|
|
8593
|
+
}
|
|
8594
|
+
));
|
|
8595
|
+
TabsListBase.displayName = TabsPrimitive.List.displayName;
|
|
8596
|
+
var TabsTriggerBase = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx55(
|
|
8597
|
+
TabsPrimitive.Trigger,
|
|
8598
|
+
{
|
|
8599
|
+
ref,
|
|
8600
|
+
className: cn(
|
|
8601
|
+
"relative inline-flex items-center justify-center whitespace-nowrap px-4 py-2 text-sm font-medium",
|
|
8602
|
+
"text-muted-foreground hover:text-foreground",
|
|
8603
|
+
"transition-colors duration-300 ease-in-out",
|
|
8604
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
8605
|
+
"disabled:pointer-events-none disabled:opacity-50",
|
|
8606
|
+
"data-[state=active]:text-primary",
|
|
8607
|
+
"after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full",
|
|
8608
|
+
"after:scale-x-0 after:bg-primary after:origin-left",
|
|
8609
|
+
"after:transition-transform after:duration-500 after:ease-[cubic-bezier(0.34,1.56,0.64,1)]",
|
|
8610
|
+
"data-[state=active]:after:scale-x-100",
|
|
8611
|
+
className
|
|
8612
|
+
),
|
|
8613
|
+
...props
|
|
8614
|
+
}
|
|
8615
|
+
));
|
|
8616
|
+
var TabsContentBase = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx55(
|
|
8617
|
+
TabsPrimitive.Content,
|
|
8618
|
+
{
|
|
8619
|
+
ref,
|
|
8620
|
+
className: cn(
|
|
8621
|
+
"mt-4 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
8622
|
+
"animate-in fade-in-0 duration-500 ease-in-out",
|
|
8623
|
+
className
|
|
8624
|
+
),
|
|
8625
|
+
...props
|
|
8626
|
+
}
|
|
8627
|
+
));
|
|
8628
|
+
TabsContentBase.displayName = TabsPrimitive.Content.displayName;
|
|
8629
|
+
|
|
8630
|
+
// src/components/ui/navigation/BreadcrumbBase.tsx
|
|
8631
|
+
import { Slot as Slot4 } from "@radix-ui/react-slot";
|
|
8632
|
+
import { CaretRightIcon as CaretRightIcon3, DotsThreeIcon as DotsThreeIcon3 } from "@phosphor-icons/react";
|
|
8633
|
+
import { jsx as jsx56, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
8634
|
+
function BreadcrumbBase({ ...props }) {
|
|
8635
|
+
return /* @__PURE__ */ jsx56("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
|
|
8636
|
+
}
|
|
8637
|
+
function BreadcrumbListBase({ className, ...props }) {
|
|
8638
|
+
return /* @__PURE__ */ jsx56(
|
|
8639
|
+
"ol",
|
|
8640
|
+
{
|
|
8641
|
+
"data-slot": "breadcrumb-list",
|
|
8642
|
+
className: cn(
|
|
8643
|
+
"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
|
|
8644
|
+
className
|
|
8645
|
+
),
|
|
8646
|
+
...props
|
|
8647
|
+
}
|
|
8648
|
+
);
|
|
8649
|
+
}
|
|
8650
|
+
function BreadcrumbItemBase({ className, ...props }) {
|
|
8651
|
+
return /* @__PURE__ */ jsx56(
|
|
8652
|
+
"li",
|
|
8653
|
+
{
|
|
8654
|
+
"data-slot": "breadcrumb-item",
|
|
8655
|
+
className: cn("inline-flex items-center gap-1.5", className),
|
|
8656
|
+
...props
|
|
8657
|
+
}
|
|
8658
|
+
);
|
|
8659
|
+
}
|
|
8660
|
+
function BreadcrumbLinkBase({
|
|
8661
|
+
asChild,
|
|
8662
|
+
className,
|
|
8663
|
+
...props
|
|
8664
|
+
}) {
|
|
8665
|
+
const Comp = asChild ? Slot4 : "a";
|
|
8666
|
+
return /* @__PURE__ */ jsx56(
|
|
8667
|
+
Comp,
|
|
8668
|
+
{
|
|
8669
|
+
"data-slot": "breadcrumb-link",
|
|
8670
|
+
className: cn("hover:text-foreground transition-colors", className),
|
|
8671
|
+
...props
|
|
8672
|
+
}
|
|
8673
|
+
);
|
|
8674
|
+
}
|
|
8675
|
+
function BreadcrumbPageBase({ className, ...props }) {
|
|
8676
|
+
return /* @__PURE__ */ jsx56(
|
|
8677
|
+
"span",
|
|
8678
|
+
{
|
|
8679
|
+
"data-slot": "breadcrumb-page",
|
|
8680
|
+
role: "link",
|
|
8681
|
+
"aria-disabled": "true",
|
|
8682
|
+
"aria-current": "page",
|
|
8683
|
+
className: cn("text-foreground font-normal", className),
|
|
8684
|
+
...props
|
|
8685
|
+
}
|
|
8686
|
+
);
|
|
8687
|
+
}
|
|
8688
|
+
function BreadcrumbSeparatorBase({
|
|
8689
|
+
children,
|
|
8690
|
+
className,
|
|
8691
|
+
...props
|
|
8692
|
+
}) {
|
|
8693
|
+
return /* @__PURE__ */ jsx56(
|
|
8694
|
+
"li",
|
|
8695
|
+
{
|
|
8696
|
+
"data-slot": "breadcrumb-separator",
|
|
8697
|
+
role: "presentation",
|
|
8698
|
+
"aria-hidden": "true",
|
|
8699
|
+
className: cn("[&>svg]:size-3.5", className),
|
|
8700
|
+
...props,
|
|
8701
|
+
children: children ?? /* @__PURE__ */ jsx56(CaretRightIcon3, {})
|
|
8702
|
+
}
|
|
8703
|
+
);
|
|
8704
|
+
}
|
|
8705
|
+
function BreadcrumbEllipsisBase({
|
|
8706
|
+
className,
|
|
8707
|
+
...props
|
|
8708
|
+
}) {
|
|
8709
|
+
return /* @__PURE__ */ jsxs36(
|
|
8710
|
+
"span",
|
|
8711
|
+
{
|
|
8712
|
+
"data-slot": "breadcrumb-ellipsis",
|
|
8713
|
+
role: "presentation",
|
|
8714
|
+
"aria-hidden": "true",
|
|
8715
|
+
className: cn("flex size-9 items-center justify-center", className),
|
|
8716
|
+
...props,
|
|
8717
|
+
children: [
|
|
8718
|
+
/* @__PURE__ */ jsx56(DotsThreeIcon3, { className: "size-4" }),
|
|
8719
|
+
/* @__PURE__ */ jsx56("span", { className: "sr-only", children: "More" })
|
|
8720
|
+
]
|
|
8721
|
+
}
|
|
8722
|
+
);
|
|
8723
|
+
}
|
|
8724
|
+
|
|
8725
|
+
// src/components/ui/navigation/NavigationMenuBase.tsx
|
|
8726
|
+
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
|
|
8727
|
+
import { CaretDownIcon as CaretDownIcon3 } from "@phosphor-icons/react";
|
|
8728
|
+
import { jsx as jsx57, jsxs as jsxs37 } from "react/jsx-runtime";
|
|
8729
|
+
function NavigationMenuBase({
|
|
8730
|
+
className,
|
|
8731
|
+
children,
|
|
8732
|
+
viewport = true,
|
|
8733
|
+
...props
|
|
8734
|
+
}) {
|
|
8735
|
+
return /* @__PURE__ */ jsxs37(
|
|
8736
|
+
NavigationMenuPrimitive.Root,
|
|
8737
|
+
{
|
|
8738
|
+
"data-slot": "navigation-menu",
|
|
8739
|
+
"data-viewport": viewport,
|
|
8740
|
+
className: cn(
|
|
8741
|
+
"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center z-[999]",
|
|
8742
|
+
className
|
|
8743
|
+
),
|
|
8744
|
+
...props,
|
|
8745
|
+
children: [
|
|
8746
|
+
children,
|
|
8747
|
+
viewport && /* @__PURE__ */ jsx57(NavigationMenuViewportBase, {})
|
|
8748
|
+
]
|
|
8749
|
+
}
|
|
8750
|
+
);
|
|
8751
|
+
}
|
|
8752
|
+
function NavigationMenuListBase({
|
|
8753
|
+
className,
|
|
8754
|
+
...props
|
|
8755
|
+
}) {
|
|
8756
|
+
return /* @__PURE__ */ jsx57(
|
|
8757
|
+
NavigationMenuPrimitive.List,
|
|
8758
|
+
{
|
|
8759
|
+
"data-slot": "navigation-menu-list",
|
|
8760
|
+
className: cn(
|
|
8761
|
+
"group flex flex-1 list-none items-center justify-center gap-1",
|
|
8762
|
+
className
|
|
8763
|
+
),
|
|
8764
|
+
...props
|
|
8765
|
+
}
|
|
8766
|
+
);
|
|
8767
|
+
}
|
|
8768
|
+
function NavigationMenuItemBase({
|
|
8769
|
+
className,
|
|
8770
|
+
...props
|
|
8771
|
+
}) {
|
|
8772
|
+
return /* @__PURE__ */ jsx57(
|
|
8773
|
+
NavigationMenuPrimitive.Item,
|
|
8774
|
+
{
|
|
8775
|
+
"data-slot": "navigation-menu-item",
|
|
8776
|
+
className: cn("relative", className),
|
|
8777
|
+
...props
|
|
8778
|
+
}
|
|
8779
|
+
);
|
|
8780
|
+
}
|
|
8781
|
+
function NavigationMenuTriggerBase({
|
|
8782
|
+
className,
|
|
8783
|
+
children,
|
|
8784
|
+
...props
|
|
8785
|
+
}) {
|
|
8786
|
+
return /* @__PURE__ */ jsxs37(
|
|
8787
|
+
NavigationMenuPrimitive.Trigger,
|
|
8788
|
+
{
|
|
8789
|
+
"data-slot": "navigation-menu-trigger",
|
|
8790
|
+
className: cn("group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1", "group", className),
|
|
8791
|
+
...props,
|
|
8792
|
+
children: [
|
|
8793
|
+
children,
|
|
8794
|
+
/* @__PURE__ */ jsx57(
|
|
8795
|
+
CaretDownIcon3,
|
|
8796
|
+
{
|
|
8797
|
+
className: "relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180",
|
|
8798
|
+
"aria-hidden": "true"
|
|
8799
|
+
}
|
|
8800
|
+
)
|
|
8801
|
+
]
|
|
8802
|
+
}
|
|
8803
|
+
);
|
|
8804
|
+
}
|
|
8805
|
+
function NavigationMenuContentBase({
|
|
8806
|
+
className,
|
|
8807
|
+
...props
|
|
8808
|
+
}) {
|
|
8809
|
+
return /* @__PURE__ */ jsx57(
|
|
8810
|
+
NavigationMenuPrimitive.Content,
|
|
8811
|
+
{
|
|
8812
|
+
"data-slot": "navigation-menu-content",
|
|
8813
|
+
className: cn(
|
|
8814
|
+
"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
|
|
8815
|
+
"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
|
|
8816
|
+
className
|
|
8817
|
+
),
|
|
8818
|
+
...props
|
|
8819
|
+
}
|
|
8820
|
+
);
|
|
8821
|
+
}
|
|
8822
|
+
function NavigationMenuViewportBase({
|
|
8823
|
+
className,
|
|
8824
|
+
...props
|
|
8825
|
+
}) {
|
|
8826
|
+
return /* @__PURE__ */ jsx57("div", { className: cn("absolute top-full left-0 isolate z-50 flex justify-center"), children: /* @__PURE__ */ jsx57(
|
|
8827
|
+
NavigationMenuPrimitive.Viewport,
|
|
8828
|
+
{
|
|
8829
|
+
"data-slot": "navigation-menu-viewport",
|
|
8830
|
+
className: cn(
|
|
8831
|
+
"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
|
|
8832
|
+
className
|
|
8833
|
+
),
|
|
8834
|
+
...props
|
|
8835
|
+
}
|
|
8836
|
+
) });
|
|
8837
|
+
}
|
|
8838
|
+
function NavigationMenuLinkBase({
|
|
8839
|
+
className,
|
|
8840
|
+
...props
|
|
8841
|
+
}) {
|
|
8842
|
+
return /* @__PURE__ */ jsx57(
|
|
8843
|
+
NavigationMenuPrimitive.Link,
|
|
8844
|
+
{
|
|
8845
|
+
"data-slot": "navigation-menu-link",
|
|
8846
|
+
className: cn(
|
|
8847
|
+
"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
|
|
8848
|
+
className
|
|
8849
|
+
),
|
|
8850
|
+
...props
|
|
8851
|
+
}
|
|
8852
|
+
);
|
|
8853
|
+
}
|
|
8854
|
+
function NavigationMenuIndicatorBase({
|
|
8855
|
+
className,
|
|
8856
|
+
...props
|
|
8857
|
+
}) {
|
|
8858
|
+
return /* @__PURE__ */ jsx57(
|
|
8859
|
+
NavigationMenuPrimitive.Indicator,
|
|
8860
|
+
{
|
|
8861
|
+
"data-slot": "navigation-menu-indicator",
|
|
8862
|
+
className: cn(
|
|
8863
|
+
"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
|
|
8864
|
+
className
|
|
8865
|
+
),
|
|
8866
|
+
...props,
|
|
8867
|
+
children: /* @__PURE__ */ jsx57("div", { className: "bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" })
|
|
8868
|
+
}
|
|
8869
|
+
);
|
|
8870
|
+
}
|
|
8871
|
+
|
|
8872
|
+
// src/components/ui/navigation/SidebarBase.tsx
|
|
8873
|
+
import * as React37 from "react";
|
|
8874
|
+
import { Slot as Slot5 } from "@radix-ui/react-slot";
|
|
8875
|
+
import { cva as cva5 } from "class-variance-authority";
|
|
8876
|
+
|
|
8877
|
+
// src/hooks/use-mobile.tsx
|
|
8878
|
+
import * as React35 from "react";
|
|
8879
|
+
var MOBILE_BREAKPOINT = 768;
|
|
8880
|
+
function useIsMobile() {
|
|
8881
|
+
const [isMobile, setIsMobile] = React35.useState(void 0);
|
|
8882
|
+
React35.useEffect(() => {
|
|
8883
|
+
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
|
|
8884
|
+
const onChange = () => {
|
|
8885
|
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
8886
|
+
};
|
|
8887
|
+
mql.addEventListener("change", onChange);
|
|
8888
|
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
8889
|
+
return () => mql.removeEventListener("change", onChange);
|
|
8890
|
+
}, []);
|
|
8891
|
+
return !!isMobile;
|
|
8892
|
+
}
|
|
8893
|
+
|
|
8894
|
+
// src/components/ui/overlays/SheetBase.tsx
|
|
8895
|
+
import * as React36 from "react";
|
|
8896
|
+
import * as SheetPrimitive from "@radix-ui/react-dialog";
|
|
8897
|
+
import { cva as cva4 } from "class-variance-authority";
|
|
8898
|
+
import { XIcon as XIcon8 } from "@phosphor-icons/react";
|
|
8899
|
+
import { jsx as jsx58, jsxs as jsxs38 } from "react/jsx-runtime";
|
|
8900
|
+
var SheetBase = SheetPrimitive.Root;
|
|
8901
|
+
var SheetTriggerBase = SheetPrimitive.Trigger;
|
|
8902
|
+
var SheetCloseBase = SheetPrimitive.Close;
|
|
8903
|
+
var SheetPortalBase = SheetPrimitive.Portal;
|
|
8904
|
+
var SheetOverlayBase = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx58(
|
|
8905
|
+
SheetPrimitive.Overlay,
|
|
8906
|
+
{
|
|
8907
|
+
className: cn(
|
|
8908
|
+
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
8909
|
+
className
|
|
8910
|
+
),
|
|
8911
|
+
...props,
|
|
8912
|
+
ref
|
|
8913
|
+
}
|
|
8914
|
+
));
|
|
8915
|
+
SheetOverlayBase.displayName = SheetPrimitive.Overlay.displayName;
|
|
8916
|
+
var sheetVariants = cva4(
|
|
8917
|
+
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
8918
|
+
{
|
|
8919
|
+
variants: {
|
|
8920
|
+
side: {
|
|
8921
|
+
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
|
8922
|
+
bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
|
8923
|
+
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
|
|
8924
|
+
right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
|
|
8925
|
+
}
|
|
8926
|
+
},
|
|
8927
|
+
defaultVariants: {
|
|
8928
|
+
side: "right"
|
|
8929
|
+
}
|
|
8930
|
+
}
|
|
8931
|
+
);
|
|
8932
|
+
var SheetContentBase = React36.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs38(SheetPortalBase, { children: [
|
|
8933
|
+
/* @__PURE__ */ jsx58(SheetOverlayBase, {}),
|
|
8934
|
+
/* @__PURE__ */ jsxs38(
|
|
8935
|
+
SheetPrimitive.Content,
|
|
8936
|
+
{
|
|
8937
|
+
ref,
|
|
8938
|
+
className: cn(sheetVariants({ side }), className),
|
|
8939
|
+
...props,
|
|
8940
|
+
children: [
|
|
8941
|
+
/* @__PURE__ */ jsxs38(SheetPrimitive.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-secondary", children: [
|
|
8942
|
+
/* @__PURE__ */ jsx58(XIcon8, { className: "h-4 w-4" }),
|
|
8943
|
+
/* @__PURE__ */ jsx58("span", { className: "sr-only", children: "Close" })
|
|
8944
|
+
] }),
|
|
8945
|
+
children
|
|
8946
|
+
]
|
|
8947
|
+
}
|
|
8948
|
+
)
|
|
8949
|
+
] }));
|
|
8950
|
+
SheetContentBase.displayName = SheetPrimitive.Content.displayName;
|
|
8951
|
+
var SheetHeaderBase = ({
|
|
8952
|
+
className,
|
|
8953
|
+
...props
|
|
8954
|
+
}) => /* @__PURE__ */ jsx58(
|
|
8955
|
+
"div",
|
|
8956
|
+
{
|
|
8957
|
+
className: cn(
|
|
8958
|
+
"flex flex-col space-y-2 text-center sm:text-left",
|
|
8959
|
+
className
|
|
8960
|
+
),
|
|
8961
|
+
...props
|
|
8962
|
+
}
|
|
8963
|
+
);
|
|
8964
|
+
SheetHeaderBase.displayName = "SheetHeaderBase";
|
|
8965
|
+
var SheetFooterBase = ({
|
|
8966
|
+
className,
|
|
8967
|
+
...props
|
|
8968
|
+
}) => /* @__PURE__ */ jsx58(
|
|
8969
|
+
"div",
|
|
8970
|
+
{
|
|
8971
|
+
className: cn(
|
|
8972
|
+
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
|
8973
|
+
className
|
|
8974
|
+
),
|
|
8975
|
+
...props
|
|
8976
|
+
}
|
|
8977
|
+
);
|
|
8978
|
+
SheetFooterBase.displayName = "SheetFooterBase";
|
|
8979
|
+
var SheetTitleBase = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx58(
|
|
8980
|
+
SheetPrimitive.Title,
|
|
8981
|
+
{
|
|
8982
|
+
ref,
|
|
8983
|
+
className: cn("text-lg font-semibold text-foreground", className),
|
|
8984
|
+
...props
|
|
8985
|
+
}
|
|
8986
|
+
));
|
|
8987
|
+
SheetTitleBase.displayName = SheetPrimitive.Title.displayName;
|
|
8988
|
+
var SheetDescriptionBase = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx58(
|
|
8989
|
+
SheetPrimitive.Description,
|
|
8990
|
+
{
|
|
8991
|
+
ref,
|
|
8992
|
+
className: cn("text-sm text-muted-foreground", className),
|
|
8993
|
+
...props
|
|
8994
|
+
}
|
|
8995
|
+
));
|
|
8996
|
+
SheetDescriptionBase.displayName = SheetPrimitive.Description.displayName;
|
|
8997
|
+
|
|
8998
|
+
// src/components/ui/navigation/SidebarBase.tsx
|
|
8999
|
+
import { SidebarSimpleIcon } from "@phosphor-icons/react";
|
|
9000
|
+
import { jsx as jsx59, jsxs as jsxs39 } from "react/jsx-runtime";
|
|
9001
|
+
var SIDEBAR_COOKIE_NAME = "sidebar:state";
|
|
9002
|
+
var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
|
9003
|
+
var SIDEBAR_WIDTH = "16rem";
|
|
9004
|
+
var SIDEBAR_WIDTH_MOBILE = "18rem";
|
|
9005
|
+
var SIDEBAR_WIDTH_ICON = "3rem";
|
|
9006
|
+
var SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
|
9007
|
+
var SidebarContext = React37.createContext(null);
|
|
9008
|
+
function UseSideBarBase() {
|
|
9009
|
+
const context = React37.useContext(SidebarContext);
|
|
9010
|
+
if (!context) {
|
|
9011
|
+
throw new Error(
|
|
9012
|
+
"UseSideBarBase must be used within a SidebarProviderBase."
|
|
9013
|
+
);
|
|
9014
|
+
}
|
|
9015
|
+
return context;
|
|
9016
|
+
}
|
|
9017
|
+
var SidebarProviderBase = React37.forwardRef(
|
|
9018
|
+
({
|
|
9019
|
+
defaultOpen = true,
|
|
9020
|
+
open: openProp,
|
|
9021
|
+
onOpenChange: setOpenProp,
|
|
9022
|
+
className,
|
|
9023
|
+
style,
|
|
9024
|
+
children,
|
|
9025
|
+
...props
|
|
9026
|
+
}, ref) => {
|
|
9027
|
+
const isMobile = useIsMobile();
|
|
9028
|
+
const [openMobile, setOpenMobile] = React37.useState(false);
|
|
9029
|
+
const [_open, _setOpen] = React37.useState(defaultOpen);
|
|
9030
|
+
const open = openProp ?? _open;
|
|
9031
|
+
const setOpen = React37.useCallback(
|
|
9032
|
+
(value) => {
|
|
9033
|
+
const openState = typeof value === "function" ? value(open) : value;
|
|
9034
|
+
if (setOpenProp) {
|
|
9035
|
+
setOpenProp(openState);
|
|
9036
|
+
} else {
|
|
9037
|
+
_setOpen(openState);
|
|
9038
|
+
}
|
|
9039
|
+
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
|
|
9040
|
+
},
|
|
9041
|
+
[setOpenProp, open]
|
|
9042
|
+
);
|
|
9043
|
+
const toggleSidebar = React37.useCallback(() => {
|
|
9044
|
+
return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
|
|
9045
|
+
}, [isMobile, setOpen, setOpenMobile]);
|
|
9046
|
+
React37.useEffect(() => {
|
|
9047
|
+
const handleKeyDown = (event) => {
|
|
9048
|
+
if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
|
|
9049
|
+
event.preventDefault();
|
|
9050
|
+
toggleSidebar();
|
|
9051
|
+
}
|
|
9052
|
+
};
|
|
9053
|
+
window.addEventListener("keydown", handleKeyDown);
|
|
9054
|
+
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
9055
|
+
}, [toggleSidebar]);
|
|
9056
|
+
const state = open ? "expanded" : "collapsed";
|
|
9057
|
+
const contextValue = React37.useMemo(
|
|
9058
|
+
() => ({
|
|
9059
|
+
state,
|
|
9060
|
+
open,
|
|
9061
|
+
setOpen,
|
|
9062
|
+
isMobile,
|
|
9063
|
+
openMobile,
|
|
9064
|
+
setOpenMobile,
|
|
9065
|
+
toggleSidebar
|
|
9066
|
+
}),
|
|
9067
|
+
[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
|
|
9068
|
+
);
|
|
9069
|
+
return /* @__PURE__ */ jsx59(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx59(TooltipProviderBase, { delayDuration: 0, children: /* @__PURE__ */ jsx59(
|
|
9070
|
+
"div",
|
|
9071
|
+
{
|
|
9072
|
+
style: {
|
|
9073
|
+
"--sidebar-width": SIDEBAR_WIDTH,
|
|
9074
|
+
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
|
9075
|
+
...style
|
|
9076
|
+
},
|
|
9077
|
+
className: cn(
|
|
9078
|
+
"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
|
|
9079
|
+
className
|
|
9080
|
+
),
|
|
9081
|
+
ref,
|
|
9082
|
+
...props,
|
|
9083
|
+
children
|
|
9084
|
+
}
|
|
9085
|
+
) }) });
|
|
9086
|
+
}
|
|
9087
|
+
);
|
|
9088
|
+
SidebarProviderBase.displayName = "SidebarProviderBase";
|
|
9089
|
+
var SidebarBase = React37.forwardRef(
|
|
9090
|
+
({
|
|
9091
|
+
side = "left",
|
|
9092
|
+
variant = "sidebar",
|
|
9093
|
+
collapsible = "offcanvas",
|
|
9094
|
+
className,
|
|
9095
|
+
children,
|
|
9096
|
+
...props
|
|
9097
|
+
}, ref) => {
|
|
9098
|
+
const { isMobile, state, openMobile, setOpenMobile } = UseSideBarBase();
|
|
9099
|
+
if (collapsible === "none") {
|
|
9100
|
+
return /* @__PURE__ */ jsx59(
|
|
9101
|
+
"div",
|
|
9102
|
+
{
|
|
9103
|
+
className: cn(
|
|
9104
|
+
"flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
|
|
9105
|
+
className
|
|
9106
|
+
),
|
|
9107
|
+
ref,
|
|
9108
|
+
...props,
|
|
9109
|
+
children
|
|
9110
|
+
}
|
|
9111
|
+
);
|
|
9112
|
+
}
|
|
9113
|
+
if (isMobile) {
|
|
9114
|
+
return /* @__PURE__ */ jsx59(SheetBase, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsx59(
|
|
9115
|
+
SheetContentBase,
|
|
9116
|
+
{
|
|
9117
|
+
"data-sidebar": "sidebar",
|
|
9118
|
+
"data-mobile": "true",
|
|
9119
|
+
className: "w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
|
|
9120
|
+
style: {
|
|
9121
|
+
"--sidebar-width": SIDEBAR_WIDTH_MOBILE
|
|
9122
|
+
},
|
|
9123
|
+
side,
|
|
9124
|
+
children: /* @__PURE__ */ jsx59("div", { className: "flex h-full w-full flex-col", children })
|
|
9125
|
+
}
|
|
9126
|
+
) });
|
|
9127
|
+
}
|
|
9128
|
+
return /* @__PURE__ */ jsxs39(
|
|
9129
|
+
"div",
|
|
9130
|
+
{
|
|
9131
|
+
ref,
|
|
9132
|
+
className: "group peer hidden text-sidebar-foreground md:block",
|
|
9133
|
+
"data-state": state,
|
|
9134
|
+
"data-collapsible": state === "collapsed" ? collapsible : "",
|
|
9135
|
+
"data-variant": variant,
|
|
9136
|
+
"data-side": side,
|
|
9137
|
+
children: [
|
|
9138
|
+
/* @__PURE__ */ jsx59(
|
|
9139
|
+
"div",
|
|
9140
|
+
{
|
|
9141
|
+
className: cn(
|
|
9142
|
+
"relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
|
|
9143
|
+
"group-data-[collapsible=offcanvas]:w-0",
|
|
9144
|
+
"group-data-[side=right]:rotate-180",
|
|
9145
|
+
variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
|
|
9146
|
+
)
|
|
9147
|
+
}
|
|
9148
|
+
),
|
|
9149
|
+
/* @__PURE__ */ jsx59(
|
|
9150
|
+
"div",
|
|
9151
|
+
{
|
|
9152
|
+
className: cn(
|
|
9153
|
+
"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
|
|
9154
|
+
side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
|
9155
|
+
// Adjust the padding for floating and inset variants.
|
|
9156
|
+
variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
|
|
9157
|
+
className
|
|
9158
|
+
),
|
|
9159
|
+
...props,
|
|
9160
|
+
children: /* @__PURE__ */ jsx59(
|
|
9161
|
+
"div",
|
|
9162
|
+
{
|
|
9163
|
+
"data-sidebar": "sidebar",
|
|
9164
|
+
className: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow",
|
|
9165
|
+
children
|
|
9166
|
+
}
|
|
9167
|
+
)
|
|
9168
|
+
}
|
|
9169
|
+
)
|
|
9170
|
+
]
|
|
9171
|
+
}
|
|
9172
|
+
);
|
|
9173
|
+
}
|
|
9174
|
+
);
|
|
9175
|
+
SidebarBase.displayName = "SidebarBase";
|
|
9176
|
+
var SidebarTriggerBase = React37.forwardRef(({ className, onClick, ...props }, ref) => {
|
|
9177
|
+
const { toggleSidebar } = UseSideBarBase();
|
|
9178
|
+
return /* @__PURE__ */ jsx59("div", { children: /* @__PURE__ */ jsxs39(
|
|
9179
|
+
ButtonBase,
|
|
9180
|
+
{
|
|
9181
|
+
ref,
|
|
9182
|
+
"data-sidebar": "trigger",
|
|
9183
|
+
variant: "ghost",
|
|
9184
|
+
size: "icon",
|
|
9185
|
+
className: cn("h-7 w-7", className),
|
|
9186
|
+
onClick: (event) => {
|
|
9187
|
+
onClick?.(event);
|
|
9188
|
+
toggleSidebar();
|
|
9189
|
+
},
|
|
9190
|
+
...props,
|
|
9191
|
+
children: [
|
|
9192
|
+
/* @__PURE__ */ jsx59("span", { className: "sr-only", children: "Toggle SidebarBase" }),
|
|
9193
|
+
/* @__PURE__ */ jsx59(SidebarSimpleIcon, {})
|
|
9194
|
+
]
|
|
9195
|
+
}
|
|
9196
|
+
) });
|
|
9197
|
+
});
|
|
9198
|
+
SidebarTriggerBase.displayName = "SidebarTriggerBase";
|
|
9199
|
+
var SidebarRailBase = React37.forwardRef(({ className, ...props }, ref) => {
|
|
9200
|
+
const { toggleSidebar } = UseSideBarBase();
|
|
9201
|
+
return /* @__PURE__ */ jsx59(
|
|
9202
|
+
"button",
|
|
9203
|
+
{
|
|
9204
|
+
ref,
|
|
9205
|
+
"data-sidebar": "rail",
|
|
9206
|
+
"aria-label": "Toggle SidebarBase",
|
|
9207
|
+
tabIndex: -1,
|
|
9208
|
+
onClick: toggleSidebar,
|
|
9209
|
+
title: "Toggle SidebarBase",
|
|
9210
|
+
className: cn(
|
|
9211
|
+
"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
|
|
9212
|
+
"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
|
|
9213
|
+
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
|
|
9214
|
+
"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
|
|
9215
|
+
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
|
|
9216
|
+
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
|
|
9217
|
+
className
|
|
9218
|
+
),
|
|
9219
|
+
...props
|
|
9220
|
+
}
|
|
9221
|
+
);
|
|
9222
|
+
});
|
|
9223
|
+
SidebarRailBase.displayName = "SidebarRailBase";
|
|
9224
|
+
var SidebarInsetBase = React37.forwardRef(({ className, ...props }, ref) => {
|
|
9225
|
+
return /* @__PURE__ */ jsx59(
|
|
9226
|
+
"main",
|
|
9227
|
+
{
|
|
9228
|
+
ref,
|
|
9229
|
+
className: cn(
|
|
9230
|
+
"relative flex min-h-svh flex-1 flex-col bg-background",
|
|
9231
|
+
"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
|
|
9232
|
+
className
|
|
9233
|
+
),
|
|
9234
|
+
...props
|
|
9235
|
+
}
|
|
9236
|
+
);
|
|
9237
|
+
});
|
|
9238
|
+
SidebarInsetBase.displayName = "SidebarInsetBase";
|
|
9239
|
+
var SidebarInputBase = React37.forwardRef(({ className, ...props }, ref) => {
|
|
9240
|
+
return /* @__PURE__ */ jsx59(
|
|
9241
|
+
InputBase,
|
|
9242
|
+
{
|
|
9243
|
+
ref,
|
|
9244
|
+
"data-sidebar": "input",
|
|
9245
|
+
className: cn(
|
|
9246
|
+
"h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
|
|
9247
|
+
className
|
|
9248
|
+
),
|
|
9249
|
+
...props
|
|
9250
|
+
}
|
|
9251
|
+
);
|
|
9252
|
+
});
|
|
9253
|
+
SidebarInputBase.displayName = "SidebarInputBase";
|
|
9254
|
+
var SidebarHeaderBase = React37.forwardRef(({ className, ...props }, ref) => {
|
|
9255
|
+
return /* @__PURE__ */ jsx59(
|
|
9256
|
+
"div",
|
|
9257
|
+
{
|
|
9258
|
+
ref,
|
|
9259
|
+
"data-sidebar": "header",
|
|
9260
|
+
className: cn("flex flex-col gap-2 p-2", className),
|
|
9261
|
+
...props
|
|
9262
|
+
}
|
|
9263
|
+
);
|
|
9264
|
+
});
|
|
9265
|
+
SidebarHeaderBase.displayName = "SidebarHeaderBase";
|
|
9266
|
+
var SidebarFooterBase = React37.forwardRef(({ className, ...props }, ref) => {
|
|
9267
|
+
return /* @__PURE__ */ jsx59(
|
|
9268
|
+
"div",
|
|
9269
|
+
{
|
|
9270
|
+
ref,
|
|
9271
|
+
"data-sidebar": "footer",
|
|
9272
|
+
className: cn("flex flex-col gap-2 p-2", className),
|
|
9273
|
+
...props
|
|
9274
|
+
}
|
|
9275
|
+
);
|
|
9276
|
+
});
|
|
9277
|
+
SidebarFooterBase.displayName = "SidebarFooterBase";
|
|
9278
|
+
var SidebarSeparatorBase = React37.forwardRef(({ className, ...props }, ref) => {
|
|
9279
|
+
return /* @__PURE__ */ jsx59(
|
|
9280
|
+
SeparatorBase,
|
|
9281
|
+
{
|
|
9282
|
+
ref,
|
|
9283
|
+
"data-sidebar": "separator",
|
|
9284
|
+
className: cn("mx-2 w-auto bg-sidebar-border", className),
|
|
9285
|
+
...props
|
|
9286
|
+
}
|
|
9287
|
+
);
|
|
9288
|
+
});
|
|
9289
|
+
SidebarSeparatorBase.displayName = "SidebarSeparatorBase";
|
|
9290
|
+
var SidebarContentBase = React37.forwardRef(({ className, ...props }, ref) => {
|
|
9291
|
+
return /* @__PURE__ */ jsx59(
|
|
9292
|
+
"div",
|
|
9293
|
+
{
|
|
9294
|
+
ref,
|
|
9295
|
+
"data-sidebar": "content",
|
|
9296
|
+
className: cn(
|
|
9297
|
+
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
|
|
9298
|
+
className
|
|
9299
|
+
),
|
|
9300
|
+
...props
|
|
9301
|
+
}
|
|
9302
|
+
);
|
|
9303
|
+
});
|
|
9304
|
+
SidebarContentBase.displayName = "SidebarContentBase";
|
|
9305
|
+
var SidebarGroupBase = React37.forwardRef(({ className, ...props }, ref) => {
|
|
9306
|
+
return /* @__PURE__ */ jsx59(
|
|
9307
|
+
"div",
|
|
9308
|
+
{
|
|
9309
|
+
ref,
|
|
9310
|
+
"data-sidebar": "group",
|
|
9311
|
+
className: cn("relative flex w-full min-w-0 flex-col p-2", className),
|
|
9312
|
+
...props
|
|
9313
|
+
}
|
|
9314
|
+
);
|
|
9315
|
+
});
|
|
9316
|
+
SidebarGroupBase.displayName = "SidebarGroupBase";
|
|
9317
|
+
var SidebarGroupLabelBase = React37.forwardRef(({ className, asChild = false, ...props }, ref) => {
|
|
9318
|
+
const Comp = asChild ? Slot5 : "div";
|
|
9319
|
+
return /* @__PURE__ */ jsx59(
|
|
9320
|
+
Comp,
|
|
9321
|
+
{
|
|
9322
|
+
ref,
|
|
9323
|
+
"data-sidebar": "group-label",
|
|
9324
|
+
className: cn(
|
|
9325
|
+
"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
|
9326
|
+
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
|
|
9327
|
+
className
|
|
9328
|
+
),
|
|
9329
|
+
...props
|
|
9330
|
+
}
|
|
9331
|
+
);
|
|
9332
|
+
});
|
|
9333
|
+
SidebarGroupLabelBase.displayName = "SidebarGroupLabelBase";
|
|
9334
|
+
var SidebarGroupActionBase = React37.forwardRef(({ className, asChild = false, ...props }, ref) => {
|
|
9335
|
+
const Comp = asChild ? Slot5 : "button";
|
|
9336
|
+
return /* @__PURE__ */ jsx59(
|
|
9337
|
+
Comp,
|
|
9338
|
+
{
|
|
9339
|
+
ref,
|
|
9340
|
+
"data-sidebar": "group-action",
|
|
9341
|
+
className: cn(
|
|
9342
|
+
"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
|
9343
|
+
// Increases the hit area of the button on mobile.
|
|
9344
|
+
"after:absolute after:-inset-2 after:md:hidden",
|
|
9345
|
+
"group-data-[collapsible=icon]:hidden",
|
|
9346
|
+
className
|
|
9347
|
+
),
|
|
9348
|
+
...props
|
|
9349
|
+
}
|
|
9350
|
+
);
|
|
9351
|
+
});
|
|
9352
|
+
SidebarGroupActionBase.displayName = "SidebarGroupActionBase";
|
|
9353
|
+
var SidebarGroupContentBase = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx59(
|
|
9354
|
+
"div",
|
|
9355
|
+
{
|
|
9356
|
+
ref,
|
|
9357
|
+
"data-sidebar": "group-content",
|
|
9358
|
+
className: cn("w-full text-sm", className),
|
|
9359
|
+
...props
|
|
9360
|
+
}
|
|
9361
|
+
));
|
|
9362
|
+
SidebarGroupContentBase.displayName = "SidebarGroupContentBase";
|
|
9363
|
+
var SidebarMenuBase = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx59(
|
|
9364
|
+
"ul",
|
|
9365
|
+
{
|
|
9366
|
+
ref,
|
|
9367
|
+
"data-sidebar": "menu",
|
|
9368
|
+
className: cn("flex w-full min-w-0 flex-col gap-1", className),
|
|
9369
|
+
...props
|
|
9370
|
+
}
|
|
9371
|
+
));
|
|
9372
|
+
SidebarMenuBase.displayName = "SidebarMenuBase";
|
|
9373
|
+
var SidebarMenuItemBase = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx59(
|
|
9374
|
+
"li",
|
|
9375
|
+
{
|
|
9376
|
+
ref,
|
|
9377
|
+
"data-sidebar": "menu-item",
|
|
9378
|
+
className: cn("group/menu-item relative", className),
|
|
9379
|
+
...props
|
|
9380
|
+
}
|
|
9381
|
+
));
|
|
9382
|
+
SidebarMenuItemBase.displayName = "SidebarMenuItemBase";
|
|
9383
|
+
var sidebarMenuButtonVariants = cva5(
|
|
9384
|
+
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
|
9385
|
+
{
|
|
9386
|
+
variants: {
|
|
9387
|
+
variant: {
|
|
9388
|
+
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
|
9389
|
+
outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
|
|
9390
|
+
},
|
|
9391
|
+
size: {
|
|
9392
|
+
default: "h-8 text-sm",
|
|
9393
|
+
sm: "h-7 text-xs",
|
|
9394
|
+
lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0"
|
|
9395
|
+
}
|
|
9396
|
+
},
|
|
9397
|
+
defaultVariants: {
|
|
9398
|
+
variant: "default",
|
|
9399
|
+
size: "default"
|
|
9400
|
+
}
|
|
9401
|
+
}
|
|
9402
|
+
);
|
|
9403
|
+
var SidebarMenuButtonBase = React37.forwardRef(
|
|
9404
|
+
({
|
|
9405
|
+
asChild = false,
|
|
9406
|
+
isActive = false,
|
|
9407
|
+
variant = "default",
|
|
9408
|
+
size = "default",
|
|
9409
|
+
tooltip,
|
|
9410
|
+
className,
|
|
9411
|
+
...props
|
|
9412
|
+
}, ref) => {
|
|
9413
|
+
const Comp = asChild ? Slot5 : "button";
|
|
9414
|
+
const { isMobile, state } = UseSideBarBase();
|
|
9415
|
+
const button = /* @__PURE__ */ jsx59(
|
|
9416
|
+
Comp,
|
|
9417
|
+
{
|
|
9418
|
+
ref,
|
|
9419
|
+
"data-sidebar": "menu-button",
|
|
9420
|
+
"data-size": size,
|
|
9421
|
+
"data-active": isActive,
|
|
9422
|
+
className: cn(sidebarMenuButtonVariants({ variant, size }), className),
|
|
9423
|
+
...props
|
|
9424
|
+
}
|
|
9425
|
+
);
|
|
9426
|
+
if (!tooltip) {
|
|
9427
|
+
return button;
|
|
9428
|
+
}
|
|
9429
|
+
if (typeof tooltip === "string") {
|
|
9430
|
+
tooltip = {
|
|
9431
|
+
children: tooltip
|
|
9432
|
+
};
|
|
9433
|
+
}
|
|
9434
|
+
return /* @__PURE__ */ jsxs39(TooltipBase, { children: [
|
|
9435
|
+
/* @__PURE__ */ jsx59(TooltipTriggerBase, { asChild: true, children: button }),
|
|
9436
|
+
/* @__PURE__ */ jsx59(
|
|
9437
|
+
TooltipContentBase,
|
|
9438
|
+
{
|
|
9439
|
+
side: "right",
|
|
9440
|
+
align: "center",
|
|
9441
|
+
hidden: state !== "collapsed" || isMobile,
|
|
9442
|
+
...tooltip
|
|
9443
|
+
}
|
|
9444
|
+
)
|
|
9445
|
+
] });
|
|
9446
|
+
}
|
|
9447
|
+
);
|
|
9448
|
+
SidebarMenuButtonBase.displayName = "SidebarMenuButtonBase";
|
|
9449
|
+
var SidebarMenuActionBase = React37.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
|
|
9450
|
+
const Comp = asChild ? Slot5 : "button";
|
|
9451
|
+
return /* @__PURE__ */ jsx59(
|
|
9452
|
+
Comp,
|
|
9453
|
+
{
|
|
9454
|
+
ref,
|
|
9455
|
+
"data-sidebar": "menu-action",
|
|
9456
|
+
className: cn(
|
|
9457
|
+
"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
|
|
9458
|
+
// Increases the hit area of the button on mobile.
|
|
9459
|
+
"after:absolute after:-inset-2 after:md:hidden",
|
|
9460
|
+
"peer-data-[size=sm]/menu-button:top-1",
|
|
9461
|
+
"peer-data-[size=default]/menu-button:top-1.5",
|
|
9462
|
+
"peer-data-[size=lg]/menu-button:top-2.5",
|
|
9463
|
+
"group-data-[collapsible=icon]:hidden",
|
|
9464
|
+
showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
|
|
9465
|
+
className
|
|
9466
|
+
),
|
|
9467
|
+
...props
|
|
9468
|
+
}
|
|
9469
|
+
);
|
|
9470
|
+
});
|
|
9471
|
+
SidebarMenuActionBase.displayName = "SidebarMenuActionBase";
|
|
9472
|
+
var SidebarMenuBadgeBase = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx59(
|
|
9473
|
+
"div",
|
|
9474
|
+
{
|
|
9475
|
+
ref,
|
|
9476
|
+
"data-sidebar": "menu-badge",
|
|
9477
|
+
className: cn(
|
|
9478
|
+
"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
|
|
9479
|
+
"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
|
|
9480
|
+
"peer-data-[size=sm]/menu-button:top-1",
|
|
9481
|
+
"peer-data-[size=default]/menu-button:top-1.5",
|
|
9482
|
+
"peer-data-[size=lg]/menu-button:top-2.5",
|
|
9483
|
+
"group-data-[collapsible=icon]:hidden",
|
|
9484
|
+
className
|
|
9485
|
+
),
|
|
9486
|
+
...props
|
|
9487
|
+
}
|
|
9488
|
+
));
|
|
9489
|
+
SidebarMenuBadgeBase.displayName = "SidebarMenuBadgeBase";
|
|
9490
|
+
var SidebarMenuSkeletonBase = React37.forwardRef(({ className, showIcon = false, ...props }, ref) => {
|
|
9491
|
+
const width = React37.useMemo(() => {
|
|
9492
|
+
return `${Math.floor(Math.random() * 40) + 50}%`;
|
|
9493
|
+
}, []);
|
|
9494
|
+
return /* @__PURE__ */ jsxs39(
|
|
9495
|
+
"div",
|
|
9496
|
+
{
|
|
9497
|
+
ref,
|
|
9498
|
+
"data-sidebar": "menu-skeleton",
|
|
9499
|
+
className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
|
|
9500
|
+
...props,
|
|
9501
|
+
children: [
|
|
9502
|
+
showIcon && /* @__PURE__ */ jsx59(
|
|
9503
|
+
SkeletonBase,
|
|
9504
|
+
{
|
|
9505
|
+
className: "size-4 rounded-md",
|
|
9506
|
+
"data-sidebar": "menu-skeleton-icon"
|
|
9507
|
+
}
|
|
9508
|
+
),
|
|
9509
|
+
/* @__PURE__ */ jsx59(
|
|
9510
|
+
SkeletonBase,
|
|
9511
|
+
{
|
|
9512
|
+
className: "h-4 max-w-[--skeleton-width] flex-1",
|
|
9513
|
+
"data-sidebar": "menu-skeleton-text",
|
|
9514
|
+
style: {
|
|
9515
|
+
"--skeleton-width": width
|
|
9516
|
+
}
|
|
9517
|
+
}
|
|
9518
|
+
)
|
|
9519
|
+
]
|
|
9520
|
+
}
|
|
9521
|
+
);
|
|
9522
|
+
});
|
|
9523
|
+
SidebarMenuSkeletonBase.displayName = "SidebarMenuSkeletonBase";
|
|
9524
|
+
var SidebarMenuSubBase = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx59(
|
|
9525
|
+
"ul",
|
|
9526
|
+
{
|
|
9527
|
+
ref,
|
|
9528
|
+
"data-sidebar": "menu-sub",
|
|
9529
|
+
className: cn(
|
|
9530
|
+
"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
|
|
9531
|
+
"group-data-[collapsible=icon]:hidden",
|
|
9532
|
+
className
|
|
9533
|
+
),
|
|
9534
|
+
...props
|
|
9535
|
+
}
|
|
9536
|
+
));
|
|
9537
|
+
SidebarMenuSubBase.displayName = "SidebarMenuSubBase";
|
|
9538
|
+
var SidebarMenuSubItemBase = React37.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx59("li", { ref, ...props }));
|
|
9539
|
+
SidebarMenuSubItemBase.displayName = "SidebarMenuSubItemBase";
|
|
9540
|
+
var SidebarMenuSubButtonBase = React37.forwardRef(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
|
|
9541
|
+
const Comp = asChild ? Slot5 : "a";
|
|
9542
|
+
return /* @__PURE__ */ jsx59(
|
|
9543
|
+
Comp,
|
|
9544
|
+
{
|
|
9545
|
+
ref,
|
|
9546
|
+
"data-sidebar": "menu-sub-button",
|
|
9547
|
+
"data-size": size,
|
|
9548
|
+
"data-active": isActive,
|
|
9549
|
+
className: cn(
|
|
9550
|
+
"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
|
|
9551
|
+
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
|
|
9552
|
+
size === "sm" && "text-xs",
|
|
9553
|
+
size === "md" && "text-sm",
|
|
9554
|
+
"group-data-[collapsible=icon]:hidden",
|
|
9555
|
+
className
|
|
9556
|
+
),
|
|
9557
|
+
...props
|
|
9558
|
+
}
|
|
9559
|
+
);
|
|
9560
|
+
});
|
|
9561
|
+
SidebarMenuSubButtonBase.displayName = "SidebarMenuSubButtonBase";
|
|
9562
|
+
|
|
9563
|
+
// src/components/ui/overlays/DrawerBase.tsx
|
|
9564
|
+
import { Drawer as DrawerPrimitive } from "vaul";
|
|
9565
|
+
import { jsx as jsx60, jsxs as jsxs40 } from "react/jsx-runtime";
|
|
9566
|
+
function DrawerBase({
|
|
9567
|
+
...props
|
|
9568
|
+
}) {
|
|
9569
|
+
return /* @__PURE__ */ jsx60(DrawerPrimitive.Root, { "data-slot": "drawer", ...props });
|
|
9570
|
+
}
|
|
9571
|
+
function DrawerTriggerBase({
|
|
9572
|
+
...props
|
|
9573
|
+
}) {
|
|
9574
|
+
return /* @__PURE__ */ jsx60(DrawerPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
|
|
9575
|
+
}
|
|
9576
|
+
function DrawerPortalBase({
|
|
9577
|
+
...props
|
|
9578
|
+
}) {
|
|
9579
|
+
return /* @__PURE__ */ jsx60(DrawerPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
|
|
9580
|
+
}
|
|
9581
|
+
function DrawerCloseBase({
|
|
9582
|
+
...props
|
|
9583
|
+
}) {
|
|
9584
|
+
return /* @__PURE__ */ jsx60(DrawerPrimitive.Close, { "data-slot": "drawer-close", ...props });
|
|
9585
|
+
}
|
|
9586
|
+
function DrawerOverlayBase({
|
|
9587
|
+
className,
|
|
9588
|
+
...props
|
|
9589
|
+
}) {
|
|
9590
|
+
return /* @__PURE__ */ jsx60(
|
|
9591
|
+
DrawerPrimitive.Overlay,
|
|
9592
|
+
{
|
|
9593
|
+
"data-slot": "drawer-overlay",
|
|
9594
|
+
className: cn(
|
|
9595
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
|
9596
|
+
className
|
|
9597
|
+
),
|
|
9598
|
+
...props
|
|
9599
|
+
}
|
|
9600
|
+
);
|
|
9601
|
+
}
|
|
9602
|
+
function DrawerContentBase({
|
|
9603
|
+
className,
|
|
9604
|
+
children,
|
|
9605
|
+
...props
|
|
9606
|
+
}) {
|
|
9607
|
+
return /* @__PURE__ */ jsxs40(DrawerPortalBase, { children: [
|
|
9608
|
+
/* @__PURE__ */ jsx60(DrawerOverlayBase, {}),
|
|
9609
|
+
/* @__PURE__ */ jsxs40(
|
|
9610
|
+
DrawerPrimitive.Content,
|
|
9611
|
+
{
|
|
9612
|
+
"data-slot": "drawer-content",
|
|
9613
|
+
className: cn(
|
|
9614
|
+
"group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
|
|
9615
|
+
"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
|
|
9616
|
+
"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
|
|
9617
|
+
"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
|
|
9618
|
+
"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
|
|
9619
|
+
className
|
|
9620
|
+
),
|
|
9621
|
+
...props,
|
|
9622
|
+
children: [
|
|
9623
|
+
/* @__PURE__ */ jsx60("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
|
|
9624
|
+
children
|
|
9625
|
+
]
|
|
9626
|
+
}
|
|
9627
|
+
)
|
|
9628
|
+
] });
|
|
9629
|
+
}
|
|
9630
|
+
function DrawerHeaderBase({
|
|
9631
|
+
className,
|
|
9632
|
+
...props
|
|
9633
|
+
}) {
|
|
9634
|
+
return /* @__PURE__ */ jsx60(
|
|
9635
|
+
"div",
|
|
9636
|
+
{
|
|
9637
|
+
"data-slot": "drawer-header",
|
|
9638
|
+
className: cn(
|
|
9639
|
+
"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
|
|
9640
|
+
className
|
|
9641
|
+
),
|
|
9642
|
+
...props
|
|
9643
|
+
}
|
|
9644
|
+
);
|
|
9645
|
+
}
|
|
9646
|
+
function DrawerFooterBase({
|
|
9647
|
+
className,
|
|
9648
|
+
...props
|
|
9649
|
+
}) {
|
|
9650
|
+
return /* @__PURE__ */ jsx60(
|
|
9651
|
+
"div",
|
|
9652
|
+
{
|
|
9653
|
+
"data-slot": "drawer-footer",
|
|
9654
|
+
className: cn("mt-auto flex flex-col gap-2 p-4", className),
|
|
9655
|
+
...props
|
|
9656
|
+
}
|
|
9657
|
+
);
|
|
9658
|
+
}
|
|
9659
|
+
function DrawerTitleBase({
|
|
9660
|
+
className,
|
|
9661
|
+
...props
|
|
9662
|
+
}) {
|
|
9663
|
+
return /* @__PURE__ */ jsx60(
|
|
9664
|
+
DrawerPrimitive.Title,
|
|
9665
|
+
{
|
|
9666
|
+
"data-slot": "drawer-title",
|
|
9667
|
+
className: cn("text-foreground font-semibold", className),
|
|
9668
|
+
...props
|
|
9669
|
+
}
|
|
9670
|
+
);
|
|
9671
|
+
}
|
|
9672
|
+
function DrawerDescriptionBase({
|
|
9673
|
+
className,
|
|
9674
|
+
...props
|
|
9675
|
+
}) {
|
|
9676
|
+
return /* @__PURE__ */ jsx60(
|
|
9677
|
+
DrawerPrimitive.Description,
|
|
9678
|
+
{
|
|
9679
|
+
"data-slot": "drawer-description",
|
|
9680
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
9681
|
+
...props
|
|
9682
|
+
}
|
|
9683
|
+
);
|
|
9684
|
+
}
|
|
9685
|
+
|
|
9686
|
+
// src/hooks/use-universal-tooltip.tsx
|
|
9687
|
+
import { createContext as createContext4, useContext as useContext5, useState as useState16, useCallback as useCallback11, useEffect as useEffect15, useRef as useRef6 } from "react";
|
|
9688
|
+
import { jsx as jsx61 } from "react/jsx-runtime";
|
|
9689
|
+
var UniversalTooltipContext = createContext4(null);
|
|
9690
|
+
var useUniversalTooltip = () => {
|
|
9691
|
+
const context = useContext5(UniversalTooltipContext);
|
|
9692
|
+
if (!context) {
|
|
9693
|
+
throw new Error("useUniversalTooltip deve ser usado dentro de UniversalTooltipProvider");
|
|
9694
|
+
}
|
|
9695
|
+
return context;
|
|
9696
|
+
};
|
|
9697
|
+
var useTooltip = () => {
|
|
9698
|
+
const { addTooltip, removeTooltip, startDrag } = useUniversalTooltip();
|
|
9699
|
+
const createTooltip = useCallback11((element, content, options) => {
|
|
9700
|
+
const rect = element.getBoundingClientRect();
|
|
9701
|
+
let position;
|
|
9702
|
+
switch (options?.position || "auto") {
|
|
9703
|
+
case "top":
|
|
9704
|
+
position = { top: rect.top - 10, left: rect.left + rect.width / 2 };
|
|
9705
|
+
break;
|
|
9706
|
+
case "bottom":
|
|
9707
|
+
position = { top: rect.bottom + 10, left: rect.left + rect.width / 2 };
|
|
9708
|
+
break;
|
|
9709
|
+
case "left":
|
|
9710
|
+
position = { top: rect.top + rect.height / 2, left: rect.left - 10 };
|
|
9711
|
+
break;
|
|
9712
|
+
case "right":
|
|
9713
|
+
position = { top: rect.top + rect.height / 2, left: rect.right + 10 };
|
|
9714
|
+
break;
|
|
9715
|
+
default:
|
|
9716
|
+
position = { top: rect.top - 10, left: rect.left + rect.width / 2 };
|
|
9717
|
+
}
|
|
9718
|
+
if (options?.offset) {
|
|
9719
|
+
position.top += options.offset.y;
|
|
9720
|
+
position.left += options.offset.x;
|
|
9721
|
+
}
|
|
9722
|
+
return addTooltip({
|
|
9723
|
+
position,
|
|
9724
|
+
content,
|
|
9725
|
+
sourceElement: element,
|
|
9726
|
+
metadata: options?.metadata
|
|
9727
|
+
});
|
|
9728
|
+
}, [addTooltip]);
|
|
9729
|
+
const handleElementMouseDown = useCallback11((tooltipId, event) => {
|
|
9730
|
+
const rect = event.target.getBoundingClientRect();
|
|
9731
|
+
const offset = {
|
|
9732
|
+
x: event.clientX - rect.left,
|
|
9733
|
+
y: event.clientY - rect.top
|
|
9734
|
+
};
|
|
9735
|
+
startDrag(tooltipId, offset);
|
|
9736
|
+
}, [startDrag]);
|
|
9737
|
+
return {
|
|
9738
|
+
createTooltip,
|
|
9739
|
+
removeTooltip,
|
|
9740
|
+
handleElementMouseDown
|
|
9741
|
+
};
|
|
9742
|
+
};
|
|
9743
|
+
|
|
9744
|
+
// src/components/ui/UniversalTooltipRenderer.tsx
|
|
9745
|
+
import { XIcon as XIcon9 } from "@phosphor-icons/react/dist/ssr";
|
|
9746
|
+
import { jsx as jsx62, jsxs as jsxs41 } from "react/jsx-runtime";
|
|
9747
|
+
var UniversalTooltipRenderer = ({
|
|
9748
|
+
className,
|
|
9749
|
+
showCloseButton = true,
|
|
9750
|
+
showCloseAllButton = true,
|
|
9751
|
+
tooltipClassName,
|
|
9752
|
+
guideClassName,
|
|
9753
|
+
closeButtonClassName,
|
|
9754
|
+
closeAllButtonClassName
|
|
9755
|
+
}) => {
|
|
9756
|
+
const {
|
|
9757
|
+
tooltips,
|
|
9758
|
+
alignmentGuides,
|
|
9759
|
+
isDragging,
|
|
9760
|
+
clearAllTooltips
|
|
9761
|
+
} = useUniversalTooltip();
|
|
9762
|
+
const { removeTooltip, handleElementMouseDown } = useTooltip();
|
|
9763
|
+
return /* @__PURE__ */ jsxs41("div", { className: cn("fixed inset-0 pointer-events-none z-50", className), children: [
|
|
9764
|
+
showCloseAllButton && tooltips.length > 1 && /* @__PURE__ */ jsx62("div", { className: "fixed top-6 left-1/2 transform -translate-x-1/2 z-50 pointer-events-auto animate-in fade-in slide-in-from-top-2 duration-300", children: /* @__PURE__ */ jsxs41(
|
|
9765
|
+
"button",
|
|
9766
|
+
{
|
|
9767
|
+
onClick: clearAllTooltips,
|
|
9768
|
+
className: cn(
|
|
9769
|
+
"bg-red-500 hover:bg-red-600 text-white font-semibold text-sm px-4 py-2.5 rounded-full shadow-xl border border-white/20 backdrop-blur-sm transition-all duration-200 ease-in-out hover:scale-105 active:scale-95 hover:shadow-2xl",
|
|
9770
|
+
closeAllButtonClassName
|
|
9771
|
+
),
|
|
9772
|
+
children: [
|
|
9773
|
+
"Fechar Todos (",
|
|
9774
|
+
tooltips.length,
|
|
9775
|
+
")"
|
|
9776
|
+
]
|
|
9777
|
+
}
|
|
9778
|
+
) }),
|
|
9779
|
+
alignmentGuides.map((guide, index) => {
|
|
9780
|
+
const isHorizontal = guide.type === "horizontal";
|
|
9781
|
+
const color = isHorizontal ? "#3b82f6" : "#ef4444";
|
|
9782
|
+
const startX = isHorizontal ? Math.min(guide.sourceTooltip.left + guide.sourceTooltip.width / 2, guide.targetTooltip.left + guide.targetTooltip.width / 2) : guide.sourceTooltip.left + guide.sourceTooltip.width / 2;
|
|
9783
|
+
const endX = isHorizontal ? Math.max(guide.sourceTooltip.left + guide.sourceTooltip.width / 2, guide.targetTooltip.left + guide.targetTooltip.width / 2) : guide.targetTooltip.left + guide.targetTooltip.width / 2;
|
|
9784
|
+
const startY = isHorizontal ? guide.sourceTooltip.top + guide.sourceTooltip.height / 2 : Math.min(guide.sourceTooltip.top + guide.sourceTooltip.height / 2, guide.targetTooltip.top + guide.targetTooltip.height / 2);
|
|
9785
|
+
const endY = isHorizontal ? guide.targetTooltip.top + guide.targetTooltip.height / 2 : Math.max(guide.sourceTooltip.top + guide.sourceTooltip.height / 2, guide.targetTooltip.top + guide.targetTooltip.height / 2);
|
|
9786
|
+
return /* @__PURE__ */ jsxs41("div", { className: "pointer-events-none", children: [
|
|
9787
|
+
/* @__PURE__ */ jsx62(
|
|
9788
|
+
"div",
|
|
9789
|
+
{
|
|
9790
|
+
className: cn("fixed z-30", guideClassName),
|
|
9791
|
+
style: {
|
|
9792
|
+
left: startX,
|
|
9793
|
+
top: startY,
|
|
9794
|
+
width: isHorizontal ? endX - startX : "2px",
|
|
9795
|
+
height: isHorizontal ? "2px" : endY - startY,
|
|
9796
|
+
backgroundColor: color,
|
|
9797
|
+
boxShadow: `0 0 8px ${color}60`,
|
|
9798
|
+
opacity: 0.9,
|
|
9799
|
+
borderStyle: "dashed",
|
|
9800
|
+
borderWidth: "1px",
|
|
9801
|
+
borderColor: color,
|
|
9802
|
+
transform: "translateZ(0)"
|
|
9803
|
+
}
|
|
9804
|
+
}
|
|
9805
|
+
),
|
|
9806
|
+
/* @__PURE__ */ jsx62(
|
|
9807
|
+
"div",
|
|
9808
|
+
{
|
|
9809
|
+
className: "fixed z-31",
|
|
9810
|
+
style: {
|
|
9811
|
+
left: guide.sourceTooltip.left + guide.sourceTooltip.width / 2 - 4,
|
|
9812
|
+
top: guide.sourceTooltip.top + guide.sourceTooltip.height / 2 - 4,
|
|
9813
|
+
width: "8px",
|
|
9814
|
+
height: "8px",
|
|
9815
|
+
backgroundColor: color,
|
|
9816
|
+
borderRadius: "50%",
|
|
9817
|
+
boxShadow: `0 0 4px ${color}80`,
|
|
9818
|
+
opacity: 0.8
|
|
9819
|
+
}
|
|
9820
|
+
}
|
|
9821
|
+
),
|
|
9822
|
+
/* @__PURE__ */ jsx62(
|
|
9823
|
+
"div",
|
|
9824
|
+
{
|
|
9825
|
+
className: "fixed z-31",
|
|
9826
|
+
style: {
|
|
9827
|
+
left: guide.targetTooltip.left + guide.targetTooltip.width / 2 - 4,
|
|
9828
|
+
top: guide.targetTooltip.top + guide.targetTooltip.height / 2 - 4,
|
|
9829
|
+
width: "8px",
|
|
9830
|
+
height: "8px",
|
|
9831
|
+
backgroundColor: color,
|
|
9832
|
+
borderRadius: "50%",
|
|
9833
|
+
boxShadow: `0 0 4px ${color}80`,
|
|
9834
|
+
opacity: 0.8
|
|
9835
|
+
}
|
|
9836
|
+
}
|
|
9837
|
+
)
|
|
9838
|
+
] }, index);
|
|
9839
|
+
}),
|
|
9840
|
+
tooltips.map((tooltip) => /* @__PURE__ */ jsxs41(
|
|
9841
|
+
"div",
|
|
9842
|
+
{
|
|
9843
|
+
className: cn(
|
|
9844
|
+
"fixed bg-card border border-border rounded-lg shadow-lg min-w-56 select-none pointer-events-auto",
|
|
9845
|
+
isDragging === tooltip.id ? "cursor-grabbing z-60" : "cursor-grab z-50",
|
|
9846
|
+
tooltipClassName
|
|
9847
|
+
),
|
|
9848
|
+
style: {
|
|
9849
|
+
top: tooltip.position.top,
|
|
9850
|
+
left: tooltip.position.left
|
|
9851
|
+
},
|
|
9852
|
+
onMouseDown: (e) => handleElementMouseDown(tooltip.id, e),
|
|
9853
|
+
children: [
|
|
9854
|
+
/* @__PURE__ */ jsxs41("div", { className: "flex items-center justify-between p-3 border-b bg-muted/20 rounded-t-lg", children: [
|
|
9855
|
+
/* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-2", children: [
|
|
9856
|
+
/* @__PURE__ */ jsx62("div", { className: "w-2 h-2 bg-primary rounded-full" }),
|
|
9857
|
+
/* @__PURE__ */ jsx62("span", { className: "text-sm font-medium text-muted-foreground", children: "Tooltip" })
|
|
9858
|
+
] }),
|
|
9859
|
+
showCloseButton && /* @__PURE__ */ jsx62(
|
|
9860
|
+
"button",
|
|
9861
|
+
{
|
|
9862
|
+
onClick: (e) => {
|
|
9863
|
+
e.stopPropagation();
|
|
9864
|
+
removeTooltip(tooltip.id);
|
|
9865
|
+
},
|
|
9866
|
+
className: cn(
|
|
9867
|
+
"text-muted-foreground hover:text-foreground transition-colors p-1 hover:bg-muted rounded",
|
|
9868
|
+
closeButtonClassName
|
|
9869
|
+
),
|
|
9870
|
+
children: /* @__PURE__ */ jsx62(XIcon9, { size: 16 })
|
|
9871
|
+
}
|
|
9872
|
+
)
|
|
9873
|
+
] }),
|
|
9874
|
+
/* @__PURE__ */ jsx62("div", { className: "p-4", children: tooltip.content })
|
|
9875
|
+
]
|
|
9876
|
+
},
|
|
9877
|
+
tooltip.id
|
|
9878
|
+
))
|
|
9879
|
+
] });
|
|
9880
|
+
};
|
|
5345
9881
|
|
|
5346
9882
|
// src/hooks/use-drag.tsx
|
|
5347
|
-
import { useState as
|
|
9883
|
+
import { useState as useState17, useCallback as useCallback12, useRef as useRef7, useEffect as useEffect16 } from "react";
|
|
5348
9884
|
var useDrag = (options = {}) => {
|
|
5349
|
-
const [isDragging, setIsDragging] =
|
|
5350
|
-
const [positions, setPositions] =
|
|
5351
|
-
const dragStartPos =
|
|
5352
|
-
const dragId =
|
|
5353
|
-
const handleMouseDown =
|
|
9885
|
+
const [isDragging, setIsDragging] = useState17(null);
|
|
9886
|
+
const [positions, setPositions] = useState17({});
|
|
9887
|
+
const dragStartPos = useRef7(null);
|
|
9888
|
+
const dragId = useRef7(null);
|
|
9889
|
+
const handleMouseDown = useCallback12((id, e) => {
|
|
5354
9890
|
e.preventDefault();
|
|
5355
9891
|
const currentPosition = positions[id] || { top: 0, left: 0 };
|
|
5356
9892
|
dragStartPos.current = {
|
|
@@ -5363,7 +9899,7 @@ var useDrag = (options = {}) => {
|
|
|
5363
9899
|
setIsDragging(id);
|
|
5364
9900
|
options.onDragStart?.(id);
|
|
5365
9901
|
}, [positions, options]);
|
|
5366
|
-
const handleMouseMove =
|
|
9902
|
+
const handleMouseMove = useCallback12((e) => {
|
|
5367
9903
|
if (!isDragging || !dragStartPos.current || !dragId.current) return;
|
|
5368
9904
|
const deltaX = e.clientX - dragStartPos.current.x;
|
|
5369
9905
|
const deltaY = e.clientY - dragStartPos.current.y;
|
|
@@ -5379,7 +9915,7 @@ var useDrag = (options = {}) => {
|
|
|
5379
9915
|
}));
|
|
5380
9916
|
options.onDrag?.(dragId.current, newPosition);
|
|
5381
9917
|
}, [isDragging, options]);
|
|
5382
|
-
const handleMouseUp =
|
|
9918
|
+
const handleMouseUp = useCallback12(() => {
|
|
5383
9919
|
if (dragId.current) {
|
|
5384
9920
|
options.onDragEnd?.(dragId.current);
|
|
5385
9921
|
}
|
|
@@ -5387,7 +9923,7 @@ var useDrag = (options = {}) => {
|
|
|
5387
9923
|
dragStartPos.current = null;
|
|
5388
9924
|
dragId.current = null;
|
|
5389
9925
|
}, [options]);
|
|
5390
|
-
|
|
9926
|
+
useEffect16(() => {
|
|
5391
9927
|
if (isDragging) {
|
|
5392
9928
|
document.addEventListener("mousemove", handleMouseMove);
|
|
5393
9929
|
document.addEventListener("mouseup", handleMouseUp);
|
|
@@ -5399,16 +9935,16 @@ var useDrag = (options = {}) => {
|
|
|
5399
9935
|
};
|
|
5400
9936
|
}
|
|
5401
9937
|
}, [isDragging, handleMouseMove, handleMouseUp]);
|
|
5402
|
-
const setPosition =
|
|
9938
|
+
const setPosition = useCallback12((id, position) => {
|
|
5403
9939
|
setPositions((prev) => ({
|
|
5404
9940
|
...prev,
|
|
5405
9941
|
[id]: position
|
|
5406
9942
|
}));
|
|
5407
9943
|
}, []);
|
|
5408
|
-
const getPosition =
|
|
9944
|
+
const getPosition = useCallback12((id) => {
|
|
5409
9945
|
return positions[id] || { top: 0, left: 0 };
|
|
5410
9946
|
}, [positions]);
|
|
5411
|
-
const isElementDragging =
|
|
9947
|
+
const isElementDragging = useCallback12((id) => {
|
|
5412
9948
|
return isDragging === id;
|
|
5413
9949
|
}, [isDragging]);
|
|
5414
9950
|
return {
|
|
@@ -5420,17 +9956,161 @@ var useDrag = (options = {}) => {
|
|
|
5420
9956
|
};
|
|
5421
9957
|
};
|
|
5422
9958
|
export {
|
|
9959
|
+
AddButton,
|
|
9960
|
+
AlertDialogActionBase,
|
|
9961
|
+
AlertDialogBase,
|
|
9962
|
+
AlertDialogCancelBase,
|
|
9963
|
+
AlertDialogContentBase,
|
|
9964
|
+
AlertDialogDescriptionBase,
|
|
9965
|
+
AlertDialogFooterBase,
|
|
9966
|
+
AlertDialogHeaderBase,
|
|
9967
|
+
AlertDialogOverlayBase,
|
|
9968
|
+
AlertDialogPortalBase,
|
|
9969
|
+
AlertDialogTitleBase,
|
|
9970
|
+
AlertDialogTriggerBase,
|
|
9971
|
+
AvatarBase,
|
|
9972
|
+
AvatarFallbackBase,
|
|
9973
|
+
AvatarImageBase,
|
|
9974
|
+
BackButton,
|
|
9975
|
+
BadgeBase,
|
|
5423
9976
|
BarChart_default as BarChart,
|
|
9977
|
+
BreadcrumbBase,
|
|
9978
|
+
BreadcrumbEllipsisBase,
|
|
9979
|
+
BreadcrumbItemBase,
|
|
9980
|
+
BreadcrumbLinkBase,
|
|
9981
|
+
BreadcrumbListBase,
|
|
9982
|
+
BreadcrumbPageBase,
|
|
9983
|
+
BreadcrumbSeparatorBase,
|
|
9984
|
+
ButtonBase,
|
|
9985
|
+
ButtonGroupBase,
|
|
9986
|
+
CalendarBase,
|
|
9987
|
+
CardBase,
|
|
9988
|
+
CardContentBase,
|
|
9989
|
+
CardDescriptionBase,
|
|
9990
|
+
CardFooterBase,
|
|
9991
|
+
CardHeaderBase,
|
|
9992
|
+
CardTitleBase,
|
|
9993
|
+
CarouselBase,
|
|
9994
|
+
CarouselContentBase,
|
|
9995
|
+
CarouselItemBase,
|
|
9996
|
+
CarouselNextBase,
|
|
9997
|
+
CarouselPrevious,
|
|
9998
|
+
ChangeButton,
|
|
5424
9999
|
Chart_default as Chart,
|
|
10000
|
+
CheckButton,
|
|
10001
|
+
CheckboxBase,
|
|
5425
10002
|
CloseAllButton_default as CloseAllButton,
|
|
10003
|
+
CloseButton,
|
|
10004
|
+
CollapsibleBase,
|
|
10005
|
+
CollapsibleContentBase,
|
|
10006
|
+
CollapsibleTriggerBase,
|
|
5426
10007
|
Combobox,
|
|
10008
|
+
CommandBase,
|
|
10009
|
+
CommandDialogBase,
|
|
10010
|
+
CommandEmptyBase,
|
|
10011
|
+
CommandGroupBase,
|
|
10012
|
+
CommandInputBase,
|
|
10013
|
+
CommandItemBase,
|
|
10014
|
+
CommandListBase,
|
|
10015
|
+
CommandSeparatorBase,
|
|
10016
|
+
CommandShortcutBase,
|
|
10017
|
+
CopyButton,
|
|
10018
|
+
DeleteButton,
|
|
10019
|
+
DestructiveDialog,
|
|
10020
|
+
DialogBase,
|
|
10021
|
+
DialogCloseBase,
|
|
10022
|
+
DialogContentBase,
|
|
10023
|
+
DialogDescriptionBase,
|
|
10024
|
+
DialogFooterBase,
|
|
10025
|
+
DialogHeaderBase,
|
|
10026
|
+
DialogOverlayBase,
|
|
10027
|
+
DialogPortalBase,
|
|
10028
|
+
DialogTitleBase,
|
|
10029
|
+
DialogTriggerBase,
|
|
10030
|
+
DownloadButton,
|
|
5427
10031
|
DraggableTooltip_default as DraggableTooltip,
|
|
10032
|
+
DrawerBase,
|
|
10033
|
+
DrawerCloseBase,
|
|
10034
|
+
DrawerContentBase,
|
|
10035
|
+
DrawerDescriptionBase,
|
|
10036
|
+
DrawerFooterBase,
|
|
10037
|
+
DrawerHeaderBase,
|
|
10038
|
+
DrawerOverlayBase,
|
|
10039
|
+
DrawerPortalBase,
|
|
10040
|
+
DrawerTitleBase,
|
|
10041
|
+
DrawerTriggerBase,
|
|
10042
|
+
DropDownMenuBase,
|
|
10043
|
+
DropDownMenuCheckboxItemBase,
|
|
10044
|
+
DropDownMenuContentBase,
|
|
10045
|
+
DropDownMenuGroupBase,
|
|
10046
|
+
DropDownMenuItemBase,
|
|
10047
|
+
DropDownMenuLabelBase,
|
|
10048
|
+
DropDownMenuPortalBase,
|
|
10049
|
+
DropDownMenuRadioGroupBase,
|
|
10050
|
+
DropDownMenuRadioItemBase,
|
|
10051
|
+
DropDownMenuSeparatorBase,
|
|
10052
|
+
DropDownMenuShortcutBase,
|
|
10053
|
+
DropDownMenuSubBase,
|
|
10054
|
+
DropDownMenuSubContentBase,
|
|
10055
|
+
DropDownMenuSubTriggerBase,
|
|
10056
|
+
DropDownMenuTriggerBase,
|
|
10057
|
+
EditButton,
|
|
10058
|
+
ErrorMessage_default as ErrorMessage,
|
|
10059
|
+
FavoriteButton,
|
|
10060
|
+
FileUploader,
|
|
10061
|
+
FilterButton,
|
|
10062
|
+
HideButton,
|
|
5428
10063
|
Highlights_default as Highlights,
|
|
10064
|
+
HoverCardBase,
|
|
10065
|
+
HoverCardContentBase,
|
|
10066
|
+
HoverCardTriggerBase,
|
|
10067
|
+
InputBase,
|
|
10068
|
+
InputOTPBase,
|
|
10069
|
+
InputOTPGroupBase,
|
|
10070
|
+
InputOTPSeparatorBase,
|
|
10071
|
+
InputOTPSlotBase,
|
|
10072
|
+
LabelBase_default as LabelBase,
|
|
10073
|
+
LikeButton,
|
|
5429
10074
|
LineChart_default as LineChart,
|
|
10075
|
+
LoadingBase,
|
|
10076
|
+
LockButton,
|
|
10077
|
+
ModalBase,
|
|
10078
|
+
ModalCloseBase,
|
|
10079
|
+
ModalContentBase,
|
|
10080
|
+
ModalDescriptionBase,
|
|
10081
|
+
ModalFooterBase,
|
|
10082
|
+
ModalHeaderBase,
|
|
10083
|
+
ModalOverlayBase,
|
|
10084
|
+
ModalPortalBase,
|
|
10085
|
+
ModalTitleBase,
|
|
10086
|
+
ModalTriggerBase,
|
|
5430
10087
|
ModeToggleBase,
|
|
10088
|
+
MoreButton,
|
|
5431
10089
|
MultiCombobox,
|
|
10090
|
+
NavigationMenuBase,
|
|
10091
|
+
NavigationMenuContentBase,
|
|
10092
|
+
NavigationMenuIndicatorBase,
|
|
10093
|
+
NavigationMenuItemBase,
|
|
10094
|
+
NavigationMenuLinkBase,
|
|
10095
|
+
NavigationMenuListBase,
|
|
10096
|
+
NavigationMenuTriggerBase,
|
|
10097
|
+
NavigationMenuViewportBase,
|
|
10098
|
+
NotificationButton,
|
|
5432
10099
|
PeriodsDropdown_default as PeriodsDropdown,
|
|
5433
10100
|
PieChart_default as PieChart,
|
|
10101
|
+
PopoverAnchorBase,
|
|
10102
|
+
PopoverBase,
|
|
10103
|
+
PopoverContentBase,
|
|
10104
|
+
PopoverTriggerBase,
|
|
10105
|
+
ProgressBase,
|
|
10106
|
+
ProgressCirclesBase,
|
|
10107
|
+
ProgressPanelsBase,
|
|
10108
|
+
ProgressSegmentsBase,
|
|
10109
|
+
RefreshButton,
|
|
10110
|
+
SaveButton,
|
|
10111
|
+
ScrollAreaBase,
|
|
10112
|
+
ScrollBarBase,
|
|
10113
|
+
SearchButton,
|
|
5434
10114
|
Select,
|
|
5435
10115
|
SelectBase,
|
|
5436
10116
|
SelectContentBase,
|
|
@@ -5442,10 +10122,74 @@ export {
|
|
|
5442
10122
|
SelectSeparatorBase,
|
|
5443
10123
|
SelectTriggerBase,
|
|
5444
10124
|
SelectValueBase,
|
|
10125
|
+
SeparatorBase,
|
|
10126
|
+
SettingsButton,
|
|
10127
|
+
SheetBase,
|
|
10128
|
+
SheetCloseBase,
|
|
10129
|
+
SheetContentBase,
|
|
10130
|
+
SheetDescriptionBase,
|
|
10131
|
+
SheetFooterBase,
|
|
10132
|
+
SheetHeaderBase,
|
|
10133
|
+
SheetOverlayBase,
|
|
10134
|
+
SheetPortalBase,
|
|
10135
|
+
SheetTitleBase,
|
|
10136
|
+
SheetTriggerBase,
|
|
5445
10137
|
ShowOnly_default as ShowOnly,
|
|
10138
|
+
SidebarBase,
|
|
10139
|
+
SidebarContentBase,
|
|
10140
|
+
SidebarFooterBase,
|
|
10141
|
+
SidebarGroupActionBase,
|
|
10142
|
+
SidebarGroupBase,
|
|
10143
|
+
SidebarGroupContentBase,
|
|
10144
|
+
SidebarGroupLabelBase,
|
|
10145
|
+
SidebarHeaderBase,
|
|
10146
|
+
SidebarInputBase,
|
|
10147
|
+
SidebarInsetBase,
|
|
10148
|
+
SidebarMenuActionBase,
|
|
10149
|
+
SidebarMenuBadgeBase,
|
|
10150
|
+
SidebarMenuBase,
|
|
10151
|
+
SidebarMenuButtonBase,
|
|
10152
|
+
SidebarMenuItemBase,
|
|
10153
|
+
SidebarMenuSkeletonBase,
|
|
10154
|
+
SidebarMenuSubBase,
|
|
10155
|
+
SidebarMenuSubButtonBase,
|
|
10156
|
+
SidebarMenuSubItemBase,
|
|
10157
|
+
SidebarProviderBase,
|
|
10158
|
+
SidebarRailBase,
|
|
10159
|
+
SidebarSeparatorBase,
|
|
10160
|
+
SidebarTriggerBase,
|
|
10161
|
+
SkeletonBase,
|
|
10162
|
+
SlideBase,
|
|
10163
|
+
SwitchBase,
|
|
10164
|
+
TableBase,
|
|
10165
|
+
TableBodyBase,
|
|
10166
|
+
TableCaptionBase,
|
|
10167
|
+
TableCellBase,
|
|
10168
|
+
TableFooterBase,
|
|
10169
|
+
TableHeadBase,
|
|
10170
|
+
TableHeaderBase,
|
|
10171
|
+
TableRowBase,
|
|
10172
|
+
TabsBase,
|
|
10173
|
+
TabsContentBase,
|
|
10174
|
+
TabsListBase,
|
|
10175
|
+
TabsTriggerBase,
|
|
10176
|
+
TextAreaBase,
|
|
5446
10177
|
ThemeProviderBase,
|
|
10178
|
+
Toaster,
|
|
10179
|
+
TooltipBase,
|
|
10180
|
+
TooltipContentBase,
|
|
10181
|
+
TooltipProviderBase,
|
|
5447
10182
|
TooltipSimple_default as TooltipSimple,
|
|
10183
|
+
TooltipTriggerBase,
|
|
5448
10184
|
TooltipWithTotal_default as TooltipWithTotal,
|
|
10185
|
+
UniversalTooltipRenderer,
|
|
10186
|
+
UnlockButton,
|
|
10187
|
+
UploadButton,
|
|
10188
|
+
UseSideBarBase,
|
|
10189
|
+
ViewButton,
|
|
10190
|
+
VisibilityButton,
|
|
10191
|
+
badgeVariants,
|
|
10192
|
+
buttonVariantsBase,
|
|
5449
10193
|
compactTick,
|
|
5450
10194
|
detectDataFields,
|
|
5451
10195
|
detectXAxis,
|
|
@@ -5455,6 +10199,7 @@ export {
|
|
|
5455
10199
|
pillLabelRenderer_default as renderPillLabel,
|
|
5456
10200
|
resolveChartMargins,
|
|
5457
10201
|
resolveContainerPaddingLeft,
|
|
10202
|
+
toast2 as toast,
|
|
5458
10203
|
useChartHighlights,
|
|
5459
10204
|
useDrag,
|
|
5460
10205
|
useIsMobile,
|