@mlw-packages/react-components 1.6.0 → 1.6.1

package/dist/index.js

@@ -524,6 +524,7 @@ __export(index_exports, {
   CarouselItemBase: () => CarouselItemBase,
   CarouselNextBase: () => CarouselNextBase,
   CarouselPrevious: () => CarouselPrevious,
+  ChangeButton: () => ChangeButton,
   Chart: () => Chart_default,
   CheckButton: () => CheckButton,
   CheckboxBase: () => CheckboxBase,
@@ -617,6 +618,16 @@ __export(index_exports, {
   LineChart: () => LineChart_default,
   LoadingBase: () => LoadingBase,
   LockButton: () => LockButton,
+  ModalBase: () => ModalBase,
+  ModalCloseBase: () => ModalCloseBase,
+  ModalContentBase: () => ModalContentBase,
+  ModalDescriptionBase: () => ModalDescriptionBase,
+  ModalFooterBase: () => ModalFooterBase,
+  ModalHeaderBase: () => ModalHeaderBase,
+  ModalOverlayBase: () => ModalOverlayBase,
+  ModalPortalBase: () => ModalPortalBase,
+  ModalTitleBase: () => ModalTitleBase,
+  ModalTriggerBase: () => ModalTriggerBase,
   ModeToggleBase: () => ModeToggleBase,
   MoreButton: () => MoreButton,
   MultiCombobox: () => MultiCombobox,
@@ -1851,7 +1862,7 @@ var CommandItemBase = React9.forwardRef(({ className, testid: dataTestId = "comm
   {
     ref,
     className: cn(
-      "relative flex cursor-pointer gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-all data-[disabled=true]:pointer-events-none data-[selected=true]:bg-primary data-[selected=true]:text-background data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:scale-[1.02] active:scale-[0.98]",
+      "relative flex cursor-pointer gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-all data-[disabled=true]:pointer-events-none data-[selected=true]:bg-muted data-[selected=true]:text-primary data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:scale-[1.02] active:scale-[0.98]",
       className
     ),
     "data-testid": dataTestId,
@@ -2459,20 +2470,22 @@ var PopoverContentBase = React13.forwardRef(({ className, align = "center", side
 PopoverContentBase.displayName = PopoverPrimitive.Content.displayName;
 
 // src/components/selects/ComboboxBase.tsx
-var import_react10 = require("@phosphor-icons/react");
-var import_react11 = require("react");
 var import_framer_motion4 = require("framer-motion");
+var import_react10 = require("react");
+var import_react11 = require("@phosphor-icons/react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function ComboboxBase({
   items,
   renderSelected,
   handleSelection,
   checkIsSelected,
+  keepOpen = false,
+  closeAll,
   searchPlaceholder,
   errorMessage,
   testIds = {}
 }) {
-  const [open, setOpen] = (0, import_react11.useState)(false);
+  const [open, setOpen] = (0, import_react10.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
@@ -2498,12 +2511,14 @@ function ComboboxBase({
                 "data-testid": testIds.trigger ?? "combobox-trigger",
                 children: [
                   renderSelected,
+                  closeAll,
                   /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                     import_framer_motion4.motion.div,
                     {
                       animate: { rotate: open ? 180 : 0 },
                       transition: { duration: 0.3 },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react10.CaretDownIcon, { size: 16, className: "mt-0.5 flex-shrink-0" })
+                      className: "flex",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react11.CaretDownIcon, { className: " flex-shrink-0" })
                     }
                   )
                 ]
@@ -2519,7 +2534,7 @@ function ComboboxBase({
             children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
               CommandBase,
               {
-                className: "dark:text-white",
+                className: "dark:text-white hover:bg-rsecondary",
                 "data-testid": testIds.command ?? "combobox-command",
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -2541,7 +2556,7 @@ function ComboboxBase({
                           value: item.value,
                           onSelect: (value) => {
                             handleSelection(value);
-                            setOpen(false);
+                            if (!keepOpen) setOpen(false);
                           },
                           "data-testid": testIds.option ?? "combobox-option",
                           children: [
@@ -2556,8 +2571,9 @@ function ComboboxBase({
                                   stiffness: 500,
                                   damping: 30
                                 },
+                                className: "ml-auto ",
                                 children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                                  import_react10.CheckIcon,
+                                  import_react11.CheckIcon,
                                   {
                                     className: cn(
                                       "ml-auto",
@@ -2648,7 +2664,8 @@ function MultiCombobox({
   searchPlaceholder,
   label,
   labelClassname,
-  testIds = {}
+  testIds = {},
+  keepOpen = true
 }) {
   const selectedItems = items.filter((item) => selected.includes(item.value));
   const checkIsSelected = (0, import_react13.useCallback)(
@@ -2666,6 +2683,20 @@ function MultiCombobox({
     },
     [selected, onChange]
   );
+  const closeAll = selectedItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: " flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    ButtonBase,
+    {
+      variant: "ghost",
+      "data-testid": testIds.clearAll ?? "combobox-clear-all",
+      size: "icon",
+      onClick: (e) => {
+        e.stopPropagation();
+        onChange([]);
+      },
+      className: "text-xs  hover:bg-red-50 hover:text-red-500 transition-colors rounded-md mr-2",
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react14.XIcon, {})
+    }
+  ) }) : null;
   const renderSelected = (0, import_react13.useMemo)(() => {
     if (selectedItems.length === 0) {
       return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -2741,6 +2772,8 @@ function MultiCombobox({
             renderSelected,
             handleSelection,
             checkIsSelected,
+            keepOpen,
+            closeAll,
             searchPlaceholder
           }
         )
@@ -3197,7 +3230,7 @@ var import_jsx_runtime28 = require("react/jsx-runtime");
 var ProgressBase = React17.forwardRef(
   ({
     className,
-    value,
+    value: rawValue,
     label,
     leftIcon,
     rightIcon,
@@ -3205,8 +3238,14 @@ var ProgressBase = React17.forwardRef(
     segments = 5,
     steps = [],
     currentStep = 0,
+    showValue = false,
+    valuePosition = "right",
+    autocolor,
+    plusIndicator,
     ...props
   }, ref) => {
+    const value = Number(rawValue || 0);
+    const indicatorWidth = Math.min(value, 100);
     switch (variant) {
       case "segments":
         return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
@@ -3240,26 +3279,89 @@ var ProgressBase = React17.forwardRef(
         return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-1 w-full min-w-[150px]", children: [
           label && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LabelBase_default, { className: "py-2", children: label }),
           /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2", children: [
+            showValue && valuePosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "w-12 text-sm text-right font-extrabold", children: [
+              Math.round(value || 0),
+              "%"
+            ] }),
             leftIcon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-center", children: leftIcon }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
               ProgressPrimitive.Root,
               {
                 ref,
                 className: cn(
-                  "relative h-3 w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-800 shadow-inner transition-all",
+                  " relative h-3 w-full overflow-visible rounded-full bg-muted/80 shadow-inner transition-all ",
                   className
                 ),
                 value,
                 ...props,
-                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                  ProgressPrimitive.Indicator,
-                  {
-                    className: "h-full w-full flex-1 bg-primary transition-all duration-500 ease-in-out",
-                    style: { transform: `translateX(-${100 - (value || 0)}%)` }
-                  }
-                )
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                    ProgressPrimitive.Indicator,
+                    {
+                      className: cn(
+                        "h-full w-full flex-1 transition-all duration-500 ease-in-out rounded-lg  ",
+                        autocolor && autocolor.length >= 2 ? "bg-transparent" : "bg-primary"
+                      ),
+                      style: { transform: `translateX(-${100 - indicatorWidth}%)` }
+                    }
+                  ),
+                  autocolor && Array.isArray(autocolor) && autocolor.length >= 2 && (() => {
+                    const [t1Raw, t2Raw] = autocolor;
+                    const [t1, t2] = [Number(t1Raw), Number(t2Raw)].sort(
+                      (a, b) => a - b
+                    );
+                    const v = Number(value || 0);
+                    let colorClass = "bg-red-500";
+                    if (v <= t1) {
+                      colorClass = "bg-red-500";
+                    } else if (v <= t2) {
+                      colorClass = "bg-yellow-500";
+                    } else {
+                      colorClass = "bg-emerald-500";
+                    }
+                    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                      "div",
+                      {
+                        "aria-hidden": true,
+                        className: cn(
+                          "absolute top-0 left-0 h-full transition-all duration-500 ease-in-out rounded-lg",
+                          colorClass
+                        ),
+                        style: { width: `${indicatorWidth}%` }
+                      }
+                    );
+                  })(),
+                  plusIndicator && value > 100 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                    "div",
+                    {
+                      "aria-hidden": "true",
+                      className: "absolute top-0 bottom-0 w-0.5 bg-black/70 transition-all duration-500 ease-in-out pointer-events-none",
+                      style: {
+                        left: `${100 / value * 100}%`
+                      },
+                      children: value > 115 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute left-full ml-2 top-1/2 -translate-y-1/2 text-xs whitespace-nowrap font-extrabold", children: `+${Math.round(
+                        value - 100
+                      )}%` })
+                    }
+                  ),
+                  showValue && valuePosition === "inside" && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                    "span",
+                    {
+                      className: "absolute inset-0 flex items-center justify-center text-sm select-none pointer-events-none text-secondary font-extrabold",
+                      "aria-hidden": true,
+                      children: [
+                        Math.round(value || 0),
+                        "%"
+                      ]
+                    }
+                  )
+                ]
               }
             ),
+            showValue && valuePosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "w-12 text-sm font-extrabold text-left", children: [
+              Math.round(value || 0),
+              "%"
+            ] }),
             rightIcon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-center", children: rightIcon })
           ] })
         ] });
@@ -5028,7 +5130,7 @@ function CalendarBase2({
     "div",
     {
       className: cn(
-        "rounded-md border bg-background p-4 shadow-lg overflow-hidden w-full h-full flex flex-col",
+        "rounded-md border bg-background p-2 overflow-hidden flex flex-col",
         className
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "relative flex-1 flex flex-col min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_framer_motion9.AnimatePresence, { initial: false, mode: "wait", custom: direction, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
@@ -5071,11 +5173,11 @@ function CalendarBase2({
                 ),
                 day: cn(
                   buttonVariantsBase({ variant: "ghost" }),
-                  "w-full h-full p-0 rounded-lg",
-                  "aria-selected:opacity-100 hover:bg-muted text-[clamp(0.75rem,2vw,1rem)] flex items-center justify-center",
-                  "touch-manipulation transition-all duration-200 ease-out hover:scale-105 active:scale-95"
+                  "w-full h-full p-0",
+                  "aria-selected:opacity-100 hover:bg-muted flex items-center justify-center",
+                  " transition-all duration-200 ease-out hover:scale-105 active:scale-95"
                 ),
-                day_selected: "bg-primary text-primary-foreground hover:bg-primary/90 focus:bg-primary/90 font-semibold",
+                day_selected: "bg-primary text-primary-foreground hover:bg-primary/90 focus:bg-primary/90 font-semibold hover:text-white",
                 day_today: "bg-muted text-foreground font-bold ring-2 ring-primary/30 ring-inset",
                 day_outside: "day-outside text-muted-foreground/40 opacity-40 aria-selected:bg-muted/50 aria-selected:text-foreground",
                 day_disabled: "text-muted-foreground/30 opacity-40 cursor-not-allowed",
@@ -5605,7 +5707,7 @@ function DateTimePicker({
           variant: "outline",
           className: cn(
             "w-full justify-start text-left min-w-0 overflow-hidden",
-            "text-muted-foreground/90",
+            "text-foreground/70",
             "text-sm sm:text-base",
             !date && "text-muted-foreground/"
           ),
@@ -5635,7 +5737,7 @@ function DateTimePicker({
                 initialFocus: true,
                 fromDate,
                 toDate,
-                className: "w-full"
+                className: cn("w-full", hideHour && hideMinute && "border-0")
               }
             ),
             !(hideHour && hideMinute) && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex justify-center w-full px-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
@@ -5661,7 +5763,7 @@ function DateTimePicker({
                       ),
                       children: [
                         /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react31.ClockIcon, { className: "text-primary flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-foreground truncate", children: internalDate ? (0, import_date_fns.format)(internalDate, getTimeFormat() || "HH:mm", {
+                        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-black truncate", children: internalDate ? (0, import_date_fns.format)(internalDate, getTimeFormat() || "HH:mm", {
                           locale: import_locale.ptBR
                         }) : "00:00" })
                       ]
@@ -9269,188 +9371,272 @@ var useChartHighlights = () => {
 };
 
 // src/components/ui/SmallButtons.tsx
+var React38 = __toESM(require("react"));
 var import_react40 = require("@phosphor-icons/react");
 var import_jsx_runtime61 = require("react/jsx-runtime");
-var EditButton = ({
-  disabled,
-  onClick,
-  testid = "button-edit",
-  className,
-  iconSize = 18,
-  iconColor,
-  variant = "default",
-  size = "icon",
-  ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-  ButtonBase,
-  {
-    variant,
-    size,
-    onClick,
+var EditButton = React38.forwardRef(
+  ({
     disabled,
-    testid,
-    className: cn(
-      "transition-all duration-200 ease-in-out group",
-      "hover:scale-105 hover:bg-primary",
-      "active:scale-95",
-      "disabled:hover:scale-100",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-      import_react40.PencilSimpleIcon,
-      {
-        size: iconSize,
-        color: iconColor,
-        className: "transition-transform duration-200 group-hover:-rotate-12"
-      }
-    )
-  }
-);
-var SaveButton = ({
-  disabled,
-  onClick,
-  testid = "button-save",
-  className,
-  iconSize = 18,
-  iconColor,
-  variant = "default",
-  size = "icon",
-  ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-  ButtonBase,
-  {
-    variant,
-    size,
     onClick,
-    disabled,
-    testid,
-    className: cn(
-      "transition-all duration-200 ease-in-out group",
-      "hover:scale-105",
-      "active:scale-95",
-      "disabled:hover:scale-100",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-      import_react40.FloppyDiskIcon,
-      {
-        size: iconSize,
-        color: iconColor,
-        className: "transition-transform duration-200 group-hover:scale-110"
-      }
-    )
-  }
+    testid = "button-edit",
+    className,
+    iconSize = 18,
+    iconColor,
+    variant = "default",
+    size = "icon",
+    ...props
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    ButtonBase,
+    {
+      ref,
+      variant,
+      size,
+      onClick,
+      disabled,
+      testid,
+      className: cn(
+        "transition-all duration-200 ease-in-out group",
+        "hover:scale-105",
+        "active:scale-95",
+        "disabled:hover:scale-100",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        import_react40.PencilSimpleIcon,
+        {
+          size: iconSize,
+          color: iconColor,
+          className: "transition-transform duration-200 group-hover:-rotate-12"
+        }
+      )
+    }
+  )
 );
-var AddButton = ({
-  disabled,
-  onClick,
-  testid = "button-add",
-  className,
-  iconSize = 18,
-  iconColor,
-  variant = "default",
-  size = "icon",
-  ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-  ButtonBase,
-  {
-    variant,
-    size,
-    onClick,
+EditButton.displayName = "EditButton";
+var ChangeButton = React38.forwardRef(
+  ({
     disabled,
-    testid,
-    className: cn(
-      "transition-all duration-200 ease-in-out",
-      "hover:scale-105",
-      "active:scale-95",
-      "disabled:hover:scale-100",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-      import_react40.PlusIcon,
-      {
-        size: iconSize,
-        color: iconColor,
-        className: "transition-transform duration-300"
-      }
-    )
-  }
+    onClick,
+    testid = "button-edit",
+    className,
+    iconSize = 18,
+    iconColor,
+    variant = "default",
+    size = "icon",
+    ...props
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    ButtonBase,
+    {
+      ref,
+      variant,
+      size,
+      onClick,
+      disabled,
+      testid,
+      className: cn(
+        "transition-all duration-200 ease-in-out group",
+        "hover:scale-105",
+        "active:scale-95",
+        "disabled:hover:scale-100",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        import_react40.ArrowsLeftRightIcon,
+        {
+          size: iconSize,
+          color: iconColor,
+          className: "transition-transform duration-200 group-hover:-rotate-180"
+        }
+      )
+    }
+  )
 );
-var CloseButton = ({
-  disabled,
-  onClick,
-  testid = "button-close",
-  className,
-  iconSize = 18,
-  iconColor,
-  variant = "ghost",
-  size = "icon",
-  ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-  ButtonBase,
-  {
-    variant,
-    size,
+ChangeButton.displayName = "ChangeButton";
+var SaveButton = React38.forwardRef(
+  ({
+    disabled,
     onClick,
+    testid = "button-save",
+    className,
+    iconSize = 18,
+    iconColor,
+    variant = "default",
+    size = "icon",
+    ...props
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    ButtonBase,
+    {
+      ref,
+      variant,
+      size,
+      onClick,
+      disabled,
+      testid,
+      className: cn(
+        "transition-all duration-200 ease-in-out group",
+        "hover:scale-105",
+        "active:scale-95",
+        "disabled:hover:scale-100",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        import_react40.FloppyDiskIcon,
+        {
+          size: iconSize,
+          color: iconColor,
+          className: "transition-transform duration-200 group-hover:scale-110"
+        }
+      )
+    }
+  )
+);
+SaveButton.displayName = "SaveButton";
+var AddButton = React38.forwardRef(
+  ({
     disabled,
-    testid,
-    className: cn(
-      "transition-all duration-200 ease-in-out",
-      "hover:scale-110 hover:rotate-90 hover:bg-destructive/10",
-      "active:scale-95 active:rotate-0",
-      "disabled:hover:scale-100 disabled:hover:rotate-0",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-      import_react40.XIcon,
-      {
-        size: iconSize,
-        color: iconColor,
-        className: "transition-transform duration-300"
-      }
-    )
-  }
+    onClick,
+    testid = "button-add",
+    className,
+    iconSize = 18,
+    iconColor,
+    variant = "default",
+    size = "icon",
+    ...props
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    ButtonBase,
+    {
+      ref,
+      variant,
+      size,
+      onClick,
+      disabled,
+      testid,
+      className: cn(
+        "transition-all duration-200 ease-in-out",
+        "hover:scale-105",
+        "active:scale-95",
+        "disabled:hover:scale-100",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        import_react40.PlusIcon,
+        {
+          size: iconSize,
+          color: iconColor,
+          className: "transition-transform duration-300"
+        }
+      )
+    }
+  )
 );
-var DeleteButton = ({
-  disabled,
-  onClick,
-  testid = "button-delete",
-  className,
-  iconSize = 18,
-  iconColor,
-  variant = "destructive",
-  size = "icon",
-  ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-  ButtonBase,
-  {
-    variant,
-    size,
+AddButton.displayName = "AddButton";
+var CloseButton = React38.forwardRef(
+  ({
+    disabled,
     onClick,
+    testid = "button-close",
+    className,
+    iconSize = 18,
+    iconColor,
+    variant = "ghost",
+    size = "icon",
+    ...props
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    ButtonBase,
+    {
+      ref,
+      variant,
+      size,
+      onClick,
+      disabled,
+      testid,
+      className: cn(
+        "transition-all duration-200 ease-in-out",
+        "hover:scale-110 hover:rotate-90 hover:bg-destructive/10",
+        "active:scale-95 active:rotate-0",
+        "disabled:hover:scale-100 disabled:hover:rotate-0",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        import_react40.XIcon,
+        {
+          size: iconSize,
+          color: iconColor,
+          className: "transition-transform duration-300"
+        }
+      )
+    }
+  )
+);
+CloseButton.displayName = "CloseButton";
+var DeleteButton = React38.forwardRef(
+  ({
     disabled,
-    testid,
-    className: cn(
-      "transition-all duration-200 ease-in-out group",
-      "hover:scale-105",
-      "active:scale-95",
-      "disabled:hover:scale-100",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-      import_react40.TrashIcon,
+    onClick,
+    testid = "button-delete",
+    className,
+    iconSize = 18,
+    iconColor,
+    variant = "destructive",
+    size = "icon",
+    destructiveTitle,
+    destructiveDescription,
+    destructiveOnConfirm,
+    destructiveOnCancel,
+    destructiveTriggerContent,
+    ...props
+  }, ref) => {
+    const effectiveDestructiveTitle = destructiveTitle ?? props.title;
+    const trigger = /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      ButtonBase,
       {
-        size: iconSize,
-        color: iconColor,
-        className: "transition-transform duration-200 group-hover:scale-110"
+        ref,
+        variant,
+        size,
+        onClick,
+        disabled,
+        testid,
+        className: cn(
+          "transition-all duration-200 ease-in-out group",
+          "hover:scale-105",
+          "active:scale-95",
+          "disabled:hover:scale-100",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+          import_react40.TrashIcon,
+          {
+            size: iconSize,
+            color: iconColor,
+            className: "transition-transform duration-200 group-hover:scale-110"
+          }
+        )
       }
-    )
+    );
+    if (effectiveDestructiveTitle) {
+      return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        DestructiveDialog,
+        {
+          title: effectiveDestructiveTitle,
+          description: destructiveDescription ?? "Essa a\xE7\xE3o \xE9 irrevers\xEDvel.",
+          onConfirm: destructiveOnConfirm ?? (() => {
+          }),
+          onCancel: destructiveOnCancel,
+          triggerContent: destructiveTriggerContent,
+          children: trigger
+        }
+      );
+    }
+    return trigger;
   }
 );
+DeleteButton.displayName = "DeleteButton";
 var DownloadButton = ({
   disabled,
   onClick,
@@ -9956,7 +10142,7 @@ var import_react42 = require("@phosphor-icons/react");
 var import_jsx_runtime62 = require("react/jsx-runtime");
 
 // src/components/ui/FileUploader.tsx
-var React38 = __toESM(require("react"));
+var React39 = __toESM(require("react"));
 var import_framer_motion16 = require("framer-motion");
 var import_react43 = require("@phosphor-icons/react");
 var import_jsx_runtime63 = require("react/jsx-runtime");
@@ -10023,7 +10209,7 @@ var createImagePreview = (file) => {
     reader.readAsDataURL(file);
   });
 };
-var FileUploader = React38.forwardRef(
+var FileUploader = React39.forwardRef(
   ({
     className,
     accept,
@@ -10039,15 +10225,15 @@ var FileUploader = React38.forwardRef(
     animate = true,
     ...props
   }, ref) => {
-    const [isDragging, setIsDragging] = React38.useState(false);
-    const [files, setFiles] = React38.useState(value);
-    const inputRef = React38.useRef(null);
-    const dragCounterRef = React38.useRef(0);
+    const [isDragging, setIsDragging] = React39.useState(false);
+    const [files, setFiles] = React39.useState(value);
+    const inputRef = React39.useRef(null);
+    const dragCounterRef = React39.useRef(0);
     const multiple = maxFiles > 1;
-    React38.useEffect(() => {
+    React39.useEffect(() => {
       setFiles(value);
     }, [value]);
-    React38.useEffect(() => {
+    React39.useEffect(() => {
       return () => {
         files.forEach((file) => {
           if (file.preview) {
@@ -10397,14 +10583,150 @@ var FileUploader = React38.forwardRef(
 );
 FileUploader.displayName = "FileUploader";
 
+// src/components/ui/ModalBase.tsx
+var React40 = __toESM(require("react"));
+var DialogPrimitive2 = __toESM(require("@radix-ui/react-dialog"));
+var import_react44 = require("@phosphor-icons/react");
+var import_jsx_runtime64 = require("react/jsx-runtime");
+var ModalBase = DialogPrimitive2.Root;
+var ModalTriggerBase = DialogPrimitive2.Trigger;
+var ModalPortalBase = DialogPrimitive2.Portal;
+var ModalCloseBase = DialogPrimitive2.Close;
+var ModalOverlayBase = React40.forwardRef(({ className, testid: dataTestId = "modal-overlay", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  DialogPrimitive2.Overlay,
+  {
+    ref,
+    className: cn(
+      "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",
+      className
+    ),
+    "data-testid": dataTestId,
+    ...props
+  }
+));
+ModalOverlayBase.displayName = DialogPrimitive2.Overlay.displayName;
+var ModalContentBase = React40.forwardRef(
+  ({
+    className,
+    children,
+    testid: dataTestId = "modal-content",
+    size = "md",
+    centered = true,
+    backdropBlur = true,
+    ...props
+  }, ref) => {
+    const sizeClass = size === "sm" ? "max-w-md" : size === "lg" ? "max-w-4xl" : size === "full" ? "w-full max-w-[calc(100%-2rem)]" : "max-w-2xl";
+    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";
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(ModalPortalBase, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+        ModalOverlayBase,
+        {
+          className: cn("bg-black/40", backdropBlur ? "backdrop-blur-sm" : "")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+        "style",
+        {
+          dangerouslySetInnerHTML: {
+            __html: `
+            @keyframes modal-fade-in { from { opacity: 0 } to { opacity: 1 } }
+            @keyframes modal-fade-out { from { opacity: 1 } to { opacity: 0 } }
+            @keyframes modal-scale-in { from { opacity: 0; transform: translate(-50%, -48%) scale(.98) } to { opacity:1; transform: translate(-50%, -50%) scale(1) } }
+            @keyframes modal-scale-out { from { opacity:1; transform: translate(-50%, -50%) scale(1) } to { opacity: 0; transform: translate(-50%, -48%) scale(.98) } }
+            @keyframes overlay-fade-in { from { opacity: 0 } to { opacity: 1 } }
+            @keyframes overlay-fade-out { from { opacity: 1 } to { opacity: 0 } }
+            .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 }
+            .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 }
+            .data-[state=open]\\:animate-overlay-in { animation: overlay-fade-in 220ms cubic-bezier(.16,.84,.24,1) both }
+            .data-[state=closed]\\:animate-overlay-out { animation: overlay-fade-out 160ms cubic-bezier(.16,.84,.24,1) both }
+          `
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+        DialogPrimitive2.Content,
+        {
+          ref,
+          className: cn(
+            "fixed z-50 grid w-full gap-4 border bg-background p-6 shadow-lg sm:rounded-lg max-h-[90dvh] overflow-auto",
+            "data-[state=open]:animate-modal-in data-[state=closed]:animate-modal-out",
+            positionClass,
+            sizeClass,
+            className
+          ),
+          "data-testid": dataTestId,
+          ...props,
+          children: [
+            children,
+            /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(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: [
+              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react44.XIcon, { className: "h-5 w-5 sm:h-4 sm:w-4 text-foreground" }),
+              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "sr-only", children: "Close" })
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
+);
+ModalContentBase.displayName = DialogPrimitive2.Content.displayName;
+var ModalHeaderBase = React40.forwardRef(({ className, testid: dataTestId = "modal-header", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  "div",
+  {
+    ref,
+    className: cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    ),
+    "data-testid": dataTestId,
+    ...props
+  }
+));
+ModalHeaderBase.displayName = "ModalHeader";
+var ModalFooterBase = React40.forwardRef(({ className, testid: dataTestId = "modal-footer", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  "div",
+  {
+    ref,
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
+    "data-testid": dataTestId,
+    ...props
+  }
+));
+ModalFooterBase.displayName = "ModalFooter";
+var ModalTitleBase = React40.forwardRef(({ className, testid: dataTestId = "modal-title", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  DialogPrimitive2.Title,
+  {
+    ref,
+    className: cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    ),
+    "data-testid": dataTestId,
+    ...props
+  }
+));
+ModalTitleBase.displayName = DialogPrimitive2.Title.displayName;
+var ModalDescriptionBase = React40.forwardRef(({ className, testid: dataTestId = "modal-description", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  DialogPrimitive2.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    "data-testid": dataTestId,
+    ...props
+  }
+));
+ModalDescriptionBase.displayName = DialogPrimitive2.Description.displayName;
+
 // src/hooks/use-drag.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 var useDrag = (options = {}) => {
-  const [isDragging, setIsDragging] = (0, import_react44.useState)(null);
-  const [positions, setPositions] = (0, import_react44.useState)({});
-  const dragStartPos = (0, import_react44.useRef)(null);
-  const dragId = (0, import_react44.useRef)(null);
-  const handleMouseDown = (0, import_react44.useCallback)((id, e) => {
+  const [isDragging, setIsDragging] = (0, import_react45.useState)(null);
+  const [positions, setPositions] = (0, import_react45.useState)({});
+  const dragStartPos = (0, import_react45.useRef)(null);
+  const dragId = (0, import_react45.useRef)(null);
+  const handleMouseDown = (0, import_react45.useCallback)((id, e) => {
     e.preventDefault();
     const currentPosition = positions[id] || { top: 0, left: 0 };
     dragStartPos.current = {
@@ -10417,7 +10739,7 @@ var useDrag = (options = {}) => {
     setIsDragging(id);
     options.onDragStart?.(id);
   }, [positions, options]);
-  const handleMouseMove = (0, import_react44.useCallback)((e) => {
+  const handleMouseMove = (0, import_react45.useCallback)((e) => {
     if (!isDragging || !dragStartPos.current || !dragId.current) return;
     const deltaX = e.clientX - dragStartPos.current.x;
     const deltaY = e.clientY - dragStartPos.current.y;
@@ -10433,7 +10755,7 @@ var useDrag = (options = {}) => {
     }));
     options.onDrag?.(dragId.current, newPosition);
   }, [isDragging, options]);
-  const handleMouseUp = (0, import_react44.useCallback)(() => {
+  const handleMouseUp = (0, import_react45.useCallback)(() => {
     if (dragId.current) {
       options.onDragEnd?.(dragId.current);
     }
@@ -10441,7 +10763,7 @@ var useDrag = (options = {}) => {
     dragStartPos.current = null;
     dragId.current = null;
   }, [options]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (isDragging) {
       document.addEventListener("mousemove", handleMouseMove);
       document.addEventListener("mouseup", handleMouseUp);
@@ -10453,16 +10775,16 @@ var useDrag = (options = {}) => {
       };
     }
   }, [isDragging, handleMouseMove, handleMouseUp]);
-  const setPosition = (0, import_react44.useCallback)((id, position) => {
+  const setPosition = (0, import_react45.useCallback)((id, position) => {
     setPositions((prev) => ({
       ...prev,
       [id]: position
     }));
   }, []);
-  const getPosition = (0, import_react44.useCallback)((id) => {
+  const getPosition = (0, import_react45.useCallback)((id) => {
     return positions[id] || { top: 0, left: 0 };
   }, [positions]);
-  const isElementDragging = (0, import_react44.useCallback)((id) => {
+  const isElementDragging = (0, import_react45.useCallback)((id) => {
     return isDragging === id;
   }, [isDragging]);
   return {