@mlw-packages/react-components 1.6.0 → 1.6.1

package/dist/index.mjs

@@ -1586,7 +1586,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,
@@ -2194,15 +2194,17 @@ var PopoverContentBase = React13.forwardRef(({ className, align = "center", side
 PopoverContentBase.displayName = PopoverPrimitive.Content.displayName;
 
 // src/components/selects/ComboboxBase.tsx
-import { CaretDownIcon, CheckIcon as CheckIcon4 } from "@phosphor-icons/react";
-import { useState as useState2 } from "react";
 import { motion as motion4 } from "framer-motion";
+import { useState as useState2 } from "react";
+import { CaretDownIcon, CheckIcon as CheckIcon4 } from "@phosphor-icons/react";
 import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 function ComboboxBase({
   items,
   renderSelected,
   handleSelection,
   checkIsSelected,
+  keepOpen = false,
+  closeAll,
   searchPlaceholder,
   errorMessage,
   testIds = {}
@@ -2233,12 +2235,14 @@ function ComboboxBase({
                 "data-testid": testIds.trigger ?? "combobox-trigger",
                 children: [
                   renderSelected,
+                  closeAll,
                   /* @__PURE__ */ jsx19(
                     motion4.div,
                     {
                       animate: { rotate: open ? 180 : 0 },
                       transition: { duration: 0.3 },
-                      children: /* @__PURE__ */ jsx19(CaretDownIcon, { size: 16, className: "mt-0.5 flex-shrink-0" })
+                      className: "flex",
+                      children: /* @__PURE__ */ jsx19(CaretDownIcon, { className: " flex-shrink-0" })
                     }
                   )
                 ]
@@ -2254,7 +2258,7 @@ function ComboboxBase({
             children: /* @__PURE__ */ jsxs11(
               CommandBase,
               {
-                className: "dark:text-white",
+                className: "dark:text-white hover:bg-rsecondary",
                 "data-testid": testIds.command ?? "combobox-command",
                 children: [
                   /* @__PURE__ */ jsx19(
@@ -2276,7 +2280,7 @@ function ComboboxBase({
                           value: item.value,
                           onSelect: (value) => {
                             handleSelection(value);
-                            setOpen(false);
+                            if (!keepOpen) setOpen(false);
                           },
                           "data-testid": testIds.option ?? "combobox-option",
                           children: [
@@ -2291,6 +2295,7 @@ function ComboboxBase({
                                   stiffness: 500,
                                   damping: 30
                                 },
+                                className: "ml-auto ",
                                 children: /* @__PURE__ */ jsx19(
                                   CheckIcon4,
                                   {
@@ -2383,7 +2388,8 @@ function MultiCombobox({
   searchPlaceholder,
   label,
   labelClassname,
-  testIds = {}
+  testIds = {},
+  keepOpen = true
 }) {
   const selectedItems = items.filter((item) => selected.includes(item.value));
   const checkIsSelected = useCallback3(
@@ -2401,6 +2407,20 @@ function MultiCombobox({
     },
     [selected, onChange]
   );
+  const closeAll = selectedItems.length > 0 ? /* @__PURE__ */ jsx21("div", { className: " flex items-center", children: /* @__PURE__ */ jsx21(
+    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__ */ jsx21(XIcon2, {})
+    }
+  ) }) : null;
   const renderSelected = useMemo2(() => {
     if (selectedItems.length === 0) {
       return /* @__PURE__ */ jsx21(
@@ -2476,6 +2496,8 @@ function MultiCombobox({
             renderSelected,
             handleSelection,
             checkIsSelected,
+            keepOpen,
+            closeAll,
             searchPlaceholder
           }
         )
@@ -2932,7 +2954,7 @@ import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 var ProgressBase = React17.forwardRef(
   ({
     className,
-    value,
+    value: rawValue,
     label,
     leftIcon,
     rightIcon,
@@ -2940,8 +2962,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__ */ jsx28(
@@ -2975,26 +3003,89 @@ var ProgressBase = React17.forwardRef(
         return /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-1 w-full min-w-[150px]", children: [
           label && /* @__PURE__ */ jsx28(LabelBase_default, { className: "py-2", children: label }),
           /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
+            showValue && valuePosition === "left" && /* @__PURE__ */ jsxs18("div", { className: "w-12 text-sm text-right font-extrabold", children: [
+              Math.round(value || 0),
+              "%"
+            ] }),
             leftIcon && /* @__PURE__ */ jsx28("div", { className: "flex items-center justify-center", children: leftIcon }),
-            /* @__PURE__ */ jsx28(
+            /* @__PURE__ */ jsxs18(
               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__ */ jsx28(
-                  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__ */ jsx28(
+                    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__ */ jsx28(
+                      "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__ */ jsx28(
+                    "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__ */ jsx28("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__ */ jsxs18(
+                    "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__ */ jsxs18("div", { className: "w-12 text-sm font-extrabold text-left", children: [
+              Math.round(value || 0),
+              "%"
+            ] }),
             rightIcon && /* @__PURE__ */ jsx28("div", { className: "flex items-center justify-center", children: rightIcon })
           ] })
         ] });
@@ -4774,7 +4865,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__ */ jsx44("div", { className: "relative flex-1 flex flex-col min-h-0", children: /* @__PURE__ */ jsx44(AnimatePresence5, { initial: false, mode: "wait", custom: direction, children: /* @__PURE__ */ jsx44(
@@ -4817,11 +4908,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",
@@ -5351,7 +5442,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/"
           ),
@@ -5381,7 +5472,7 @@ function DateTimePicker({
                 initialFocus: true,
                 fromDate,
                 toDate,
-                className: "w-full"
+                className: cn("w-full", hideHour && hideMinute && "border-0")
               }
             ),
             !(hideHour && hideMinute) && /* @__PURE__ */ jsx47("div", { className: "flex justify-center w-full px-2", children: /* @__PURE__ */ jsxs30(
@@ -5407,7 +5498,7 @@ function DateTimePicker({
                       ),
                       children: [
                         /* @__PURE__ */ jsx47(ClockIcon, { className: "text-primary flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5" }),
-                        /* @__PURE__ */ jsx47("span", { className: "text-foreground truncate", children: internalDate ? format(internalDate, getTimeFormat() || "HH:mm", {
+                        /* @__PURE__ */ jsx47("span", { className: "text-black truncate", children: internalDate ? format(internalDate, getTimeFormat() || "HH:mm", {
                           locale: ptBR
                         }) : "00:00" })
                       ]
@@ -9068,6 +9159,7 @@ var useChartHighlights = () => {
 };
 
 // src/components/ui/SmallButtons.tsx
+import * as React38 from "react";
 import {
   PencilSimpleIcon,
   FloppyDiskIcon,
@@ -9090,189 +9182,273 @@ import {
   EyeIcon,
   EyeSlashIcon,
   LockIcon,
-  LockOpenIcon
+  LockOpenIcon,
+  ArrowsLeftRightIcon
 } from "@phosphor-icons/react";
 import { jsx as jsx61 } from "react/jsx-runtime";
-var EditButton = ({
-  disabled,
-  onClick,
-  testid = "button-edit",
-  className,
-  iconSize = 18,
-  iconColor,
-  variant = "default",
-  size = "icon",
-  ...props
-}) => /* @__PURE__ */ jsx61(
-  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__ */ jsx61(
-      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__ */ jsx61(
-  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__ */ jsx61(
-      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__ */ jsx61(
+    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__ */ jsx61(
+        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__ */ jsx61(
-  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__ */ jsx61(
-      PlusIcon2,
-      {
-        size: iconSize,
-        color: iconColor,
-        className: "transition-transform duration-300"
-      }
-    )
-  }
+    onClick,
+    testid = "button-edit",
+    className,
+    iconSize = 18,
+    iconColor,
+    variant = "default",
+    size = "icon",
+    ...props
+  }, ref) => /* @__PURE__ */ jsx61(
+    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__ */ jsx61(
+        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__ */ jsx61(
-  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__ */ jsx61(
+    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__ */ jsx61(
+        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__ */ jsx61(
-      XIcon7,
-      {
-        size: iconSize,
-        color: iconColor,
-        className: "transition-transform duration-300"
-      }
-    )
-  }
+    onClick,
+    testid = "button-add",
+    className,
+    iconSize = 18,
+    iconColor,
+    variant = "default",
+    size = "icon",
+    ...props
+  }, ref) => /* @__PURE__ */ jsx61(
+    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__ */ jsx61(
+        PlusIcon2,
+        {
+          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__ */ jsx61(
-  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__ */ jsx61(
+    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__ */ jsx61(
+        XIcon7,
+        {
+          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__ */ jsx61(
-      TrashIcon3,
+    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__ */ jsx61(
+      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__ */ jsx61(
+          TrashIcon3,
+          {
+            size: iconSize,
+            color: iconColor,
+            className: "transition-transform duration-200 group-hover:scale-110"
+          }
+        )
       }
-    )
+    );
+    if (effectiveDestructiveTitle) {
+      return /* @__PURE__ */ jsx61(
+        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,
@@ -9778,7 +9954,7 @@ import { CircleNotchIcon } from "@phosphor-icons/react";
 import { jsx as jsx62 } from "react/jsx-runtime";
 
 // src/components/ui/FileUploader.tsx
-import * as React38 from "react";
+import * as React39 from "react";
 import { motion as motion15, AnimatePresence as AnimatePresence11 } from "framer-motion";
 import {
   CloudArrowUpIcon,
@@ -9860,7 +10036,7 @@ var createImagePreview = (file) => {
     reader.readAsDataURL(file);
   });
 };
-var FileUploader = React38.forwardRef(
+var FileUploader = React39.forwardRef(
   ({
     className,
     accept,
@@ -9876,15 +10052,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) {
@@ -10234,6 +10410,142 @@ var FileUploader = React38.forwardRef(
 );
 FileUploader.displayName = "FileUploader";
 
+// src/components/ui/ModalBase.tsx
+import * as React40 from "react";
+import * as DialogPrimitive2 from "@radix-ui/react-dialog";
+import { XIcon as XIcon9 } from "@phosphor-icons/react";
+import { jsx as jsx64, jsxs as jsxs45 } from "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__ */ jsx64(
+  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__ */ jsxs45(ModalPortalBase, { children: [
+      /* @__PURE__ */ jsx64(
+        ModalOverlayBase,
+        {
+          className: cn("bg-black/40", backdropBlur ? "backdrop-blur-sm" : "")
+        }
+      ),
+      /* @__PURE__ */ jsx64(
+        "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__ */ jsxs45(
+        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__ */ jsxs45(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__ */ jsx64(XIcon9, { className: "h-5 w-5 sm:h-4 sm:w-4 text-foreground" }),
+              /* @__PURE__ */ jsx64("span", { className: "sr-only", children: "Close" })
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
+);
+ModalContentBase.displayName = DialogPrimitive2.Content.displayName;
+var ModalHeaderBase = React40.forwardRef(({ className, testid: dataTestId = "modal-header", ...props }, ref) => /* @__PURE__ */ jsx64(
+  "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__ */ jsx64(
+  "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__ */ jsx64(
+  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__ */ jsx64(
+  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
 import { useState as useState18, useCallback as useCallback11, useRef as useRef7, useEffect as useEffect16 } from "react";
 var useDrag = (options = {}) => {
@@ -10350,6 +10662,7 @@ export {
   CarouselItemBase,
   CarouselNextBase,
   CarouselPrevious,
+  ChangeButton,
   Chart_default as Chart,
   CheckButton,
   CheckboxBase,
@@ -10443,6 +10756,16 @@ export {
   LineChart_default as LineChart,
   LoadingBase,
   LockButton,
+  ModalBase,
+  ModalCloseBase,
+  ModalContentBase,
+  ModalDescriptionBase,
+  ModalFooterBase,
+  ModalHeaderBase,
+  ModalOverlayBase,
+  ModalPortalBase,
+  ModalTitleBase,
+  ModalTriggerBase,
   ModeToggleBase,
   MoreButton,
   MultiCombobox,