@mlw-packages/react-components 1.9.14 → 1.9.16

package/dist/index.js

@@ -1214,6 +1214,8 @@ var Toaster = ({ testId, ...props }) => {
       className: "toaster group",
       position: "top-center",
       duration: 4e3,
+      swipeDirections: ["top", "bottom", "left", "right"],
+      closeButton: true,
       toastOptions: {
         style: {
           backdropFilter: "blur(8px)",
@@ -1227,9 +1229,8 @@ var Toaster = ({ testId, ...props }) => {
             shadow-xl rounded-lg
             border-l-4
 
-            flex items-center gap-3
+            flex items-center gap-3 pr-10
             transition-all duration-300
-            hover:scale-[1.02] hover:shadow-2xl
             data-[type=success]:border-l-green-500 data-[type=success]:bg-green-50/95 data-[type=success]:text-green-800 data-[type=success]:border-green-500 data-
             data-[type=error]:border-l-red-500 data-[type=error]:bg-red-50/95 data-[type=error]:text-red-800 data-[type=error]:border-red-500
             data-[type=warning]:border-l-yellow-500 data-[type=warning]:bg-yellow-50/95 data-[type=warning]:text-yellow-800 data-[type=warning]:border-yellow-500
@@ -1255,6 +1256,13 @@ var Toaster = ({ testId, ...props }) => {
             hover:bg-neutral-200 hover:scale-105
             transition-all duration-200
             active:scale-95
+          `,
+          closeButton: `
+            !bg-transparent hover:!bg-black/5 dark:hover:!bg-white/10
+            !border-0 !text-neutral-400 hover:!text-neutral-900 dark:hover:!text-neutral-100
+            transition-all duration-200 !left-[auto] !right-3 !top-1/2 !-translate-y-1/2
+            !w-7 !h-7 !rounded-lg flex items-center justify-center
+            active:scale-95 
           `
         }
       },
@@ -2050,7 +2058,7 @@ var CommandDebouncedInputBase = React32__namespace.forwardRef(
   }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "flex items-center px-3 border-border border-b",
+      className: "flex items-center px-3 border-border border-b focus:ring-0",
       "cmdk-input-wrapper": "",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(react.MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 text-primary" }),
@@ -19336,6 +19344,12 @@ function useMediaQuery(query) {
   }, [query]);
   return value;
 }
+var CRUD_ITEMS = [
+  { id: "edit", label: "Editar", icon: react.PencilIcon },
+  { id: "copy", label: "Copiar", icon: react.CopyIcon },
+  { id: "download", label: "Baixar", icon: react.DownloadIcon },
+  { id: "delete", label: "Excluir", icon: react.TrashIcon, color: "danger" }
+];
 var FULL_CIRCLE = 360;
 var START_ANGLE = -90;
 function degToRad(deg) {
@@ -19361,7 +19375,7 @@ function slicePath(index, total, wedgeRadius, innerRadius) {
 }
 function RadialMenu({
   children,
-  menuItems,
+  menuItems = CRUD_ITEMS,
   size = 240,
   iconSize = 24,
   bandWidth = 60,
@@ -19372,44 +19386,13 @@ function RadialMenu({
 }) {
   const isMobile = useMediaQuery("(max-width: 768px)");
   const radius = size / 2;
-  const outerRingOuterRadius = radius;
-  const outerRingInnerRadius = outerRingOuterRadius - outerRingWidth;
+  const outerRingInnerRadius = radius - outerRingWidth;
   const wedgeOuterRadius = outerRingInnerRadius - outerGap;
   const wedgeInnerRadius = wedgeOuterRadius - bandWidth;
   const iconRingRadius = (wedgeOuterRadius + wedgeInnerRadius) / 2;
   const centerRadius = Math.max(wedgeInnerRadius - innerGap, 0);
   const slice = 360 / menuItems.length;
   const [activeIndex, setActiveIndex] = React32__namespace.useState(null);
-  const timerRef = React32__namespace.useRef(null);
-  const isLongPress = React32__namespace.useRef(false);
-  const handleTouchStart = (e) => {
-    isLongPress.current = false;
-    const touch = e.touches[0];
-    const { clientX, clientY } = touch;
-    timerRef.current = setTimeout(() => {
-      isLongPress.current = true;
-      const event = new MouseEvent("contextmenu", {
-        bubbles: true,
-        cancelable: true,
-        view: window,
-        clientX,
-        clientY,
-        button: 2,
-        buttons: 2
-      });
-      e.target.dispatchEvent(event);
-    }, 1e3);
-  };
-  const handleTouchEnd = () => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-    }
-  };
-  const handleTouchMove = () => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-    }
-  };
   const containerVariants = {
     hidden: { opacity: 0, scale: 0.8 },
     visible: {
@@ -19439,22 +19422,13 @@ function RadialMenu({
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(ContextMenuBase, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ContextMenuTriggerBase, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "select-none outline-none group touch-none",
-        onTouchStart: handleTouchStart,
-        onTouchEnd: handleTouchEnd,
-        onTouchMove: handleTouchMove,
-        children: children || /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-80 flex justify-center items-center border-2 border-dashed border-muted-foreground/20 rounded-xl bg-muted/5 text-muted-foreground hover:bg-muted/10 transition-colors", children: "Right-click or Long-press here (1s)" })
-      }
-    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ContextMenuTriggerBase, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "select-none outline-none group touch-none", children: children || /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-80 flex justify-center items-center border-2 border-dashed border-muted-foreground/20 rounded-xl bg-muted/5 cursor-context-menu", children: "Clique com bot\xE3o direito" }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       ContextMenuContentBase,
       {
         className: "p-0 border-none bg-transparent shadow-none overflow-visible -translate-x-1/2 -translate-y-1/2",
         style: { width: size, height: size },
-        children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
           framerMotion.motion.div,
           {
             className: "relative size-full drop-shadow-xl will-change-transform",
@@ -19462,97 +19436,260 @@ function RadialMenu({
             initial: "hidden",
             animate: "visible",
             exit: "exit",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full bg-background/5 blur-2xl -z-10" }),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "svg",
-                {
-                  className: "absolute inset-0 size-full overflow-visible",
-                  viewBox: `${-radius} ${-radius} ${radius * 2} ${radius * 2}`,
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      framerMotion.motion.circle,
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "svg",
+              {
+                className: "absolute inset-0 size-full overflow-visible",
+                viewBox: `${-radius} ${-radius} ${radius * 2} ${radius * 2}`,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.circle, { r: centerRadius, className: "fill-background stroke-border stroke-1" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: activeIndex !== null && /* @__PURE__ */ jsxRuntime.jsx(
+                    framerMotion.motion.text,
+                    {
+                      initial: { opacity: 0, y: 5 },
+                      animate: { opacity: 1, y: 0 },
+                      exit: { opacity: 0 },
+                      textAnchor: "middle",
+                      dominantBaseline: "middle",
+                      className: "fill-foreground text-[11px] font-bold uppercase tracking-tighter pointer-events-none",
+                      children: menuItems[activeIndex].label
+                    }
+                  ) }),
+                  menuItems.map((item, index) => {
+                    const Icon = item.icon;
+                    const midDeg = START_ANGLE + slice * index;
+                    const { x: iconX, y: iconY } = polarToCartesian(iconRingRadius, midDeg);
+                    const isActive = activeIndex === index;
+                    const ICON_BOX = iconSize * 2.5;
+                    return /* @__PURE__ */ jsxRuntime.jsxs(
+                      framerMotion.motion.g,
                       {
-                        r: centerRadius,
-                        initial: { scale: 0 },
-                        animate: { scale: 1 },
-                        transition: isMobile ? { duration: 0 } : {
-                          type: "spring",
-                          stiffness: 300,
-                          delay: 0.2
+                        variants: itemVariants2,
+                        className: "cursor-pointer outline-none",
+                        onMouseEnter: () => setActiveIndex(index),
+                        onMouseLeave: () => setActiveIndex(null),
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          onSelect?.(item);
                         },
-                        className: "fill-background stroke-border stroke-1 shadow-inner"
-                      }
-                    ),
-                    menuItems.map((item, index) => {
-                      const Icon = item.icon;
-                      const midDeg = START_ANGLE + slice * index;
-                      const { x: iconX, y: iconY } = polarToCartesian(
-                        iconRingRadius,
-                        midDeg
-                      );
-                      const isActive = activeIndex === index;
-                      const ICON_BOX = iconSize * 2.5;
-                      return /* @__PURE__ */ jsxRuntime.jsxs(
-                        framerMotion.motion.g,
-                        {
-                          variants: itemVariants2,
-                          className: "cursor-pointer outline-none",
-                          onMouseEnter: () => setActiveIndex(index),
-                          onMouseLeave: () => setActiveIndex(null),
-                          onClick: () => onSelect?.(item),
-                          style: { originX: "0px", originY: "0px" },
-                          children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              "path",
-                              {
-                                d: slicePath(
-                                  index,
-                                  menuItems.length,
-                                  wedgeOuterRadius,
-                                  wedgeInnerRadius
-                                ),
-                                className: cn(
-                                  "transition-colors duration-200 stroke-1",
-                                  isActive ? "fill-primary stroke-primary-foreground/20" : "fill-background/90 stroke-border/50 hover:fill-accent"
-                                )
+                        style: { originX: "0px", originY: "0px" },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "path",
+                            {
+                              d: slicePath(index, menuItems.length, wedgeOuterRadius, wedgeInnerRadius),
+                              className: cn(
+                                "transition-colors duration-200 stroke-1",
+                                isActive ? item.color === "danger" ? "fill-destructive stroke-destructive-foreground/20" : "fill-primary stroke-primary-foreground/20" : "fill-background/90 stroke-border/50 hover:fill-accent"
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx("foreignObject", { x: iconX - ICON_BOX / 2, y: iconY - ICON_BOX / 2, width: ICON_BOX, height: ICON_BOX, className: "pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                            Icon,
+                            {
+                              size: iconSize,
+                              weight: isActive ? "fill" : "regular",
+                              className: cn(
+                                "transition-all duration-200",
+                                isActive ? "text-primary-foreground" : item.color === "danger" ? "text-destructive" : "text-muted-foreground"
+                              )
+                            }
+                          ) }) })
+                        ]
+                      },
+                      item.id
+                    );
+                  })
+                ]
+              }
+            )
+          }
+        ) })
+      }
+    )
+  ] });
+}
+function ControlledCombobox({
+  items,
+  renderSelected,
+  handleSelection,
+  checkIsSelected,
+  disabled = false,
+  keepOpen = false,
+  searchPlaceholder,
+  empty = "Nenhum dado encontrado",
+  error,
+  label,
+  labelClassname,
+  testIds = {},
+  onClear,
+  hasSelected = false,
+  hideClear = false,
+  onSearchChange,
+  search,
+  onEndReached,
+  loading = false
+}) {
+  const [open, setOpen] = React32.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "w-full flex flex-col",
+      "data-testid": testIds.root ?? "combobox-base-root",
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx(LabelBase_default, { className: labelClassname, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          PopoverBase,
+          {
+            open,
+            onOpenChange: (v) => !disabled && setOpen(v),
+            modal: false,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                PopoverTriggerBase,
+                {
+                  asChild: true,
+                  className: "flex w-full justify-between dark:bg-[hsl(231,15%,19%)] p-3",
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    ButtonBase,
+                    {
+                      variant: "select",
+                      size: "select",
+                      role: "combobox",
+                      "aria-expanded": open,
+                      "aria-disabled": disabled || void 0,
+                      disabled,
+                      className: cn(
+                        `flex items-center gap-2 justify-between [&>div]:line-clamp-1 relative h-9 no-active-animation`,
+                        error && "border-red-500"
+                      ),
+                      "data-testid": testIds.trigger ?? "combobox-trigger",
+                      children: [
+                        renderSelected,
+                        /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.span, { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-0 items-center ", children: [
+                          hasSelected && onClear && !disabled && !hideClear && /* @__PURE__ */ jsxRuntime.jsx(
+                            ClearButton,
+                            {
+                              onClick: (e) => {
+                                if (e) e.stopPropagation();
+                                if (onClear && !disabled) {
+                                  onClear();
+                                  if (!keepOpen) setOpen(false);
+                                }
                               }
-                            ),
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              "foreignObject",
-                              {
-                                x: iconX - ICON_BOX / 2,
-                                y: iconY - ICON_BOX / 2,
-                                width: ICON_BOX,
-                                height: ICON_BOX,
-                                className: "pointer-events-none",
-                                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-                                  Icon,
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            framerMotion.motion.div,
+                            {
+                              animate: { rotate: open ? 180 : 0 },
+                              transition: { duration: 0.3 },
+                              children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretDownIcon, { className: "h-4 w-4" })
+                            }
+                          )
+                        ] }) })
+                      ]
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                PopoverContentBase,
+                {
+                  className: "max-h-[--radix-popover-content-available-height] w-[--radix-popover-trigger-width] p-0 border-none focus:ring-0 focus:outline-none",
+                  "data-testid": testIds.popover ?? "combobox-popover",
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    CommandBase,
+                    {
+                      className: "dark:text-white hover:bg-rsecondary focus:ring-0 focus:outline-none",
+                      "data-testid": testIds.command ?? "combobox-command",
+                      filter: onSearchChange ? () => 1 : (value, search2) => {
+                        const label2 = items.find((item) => item.value === value)?.label || value;
+                        if (label2.toLowerCase().includes(search2.toLowerCase()))
+                          return 1;
+                        return 0;
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          CommandDebouncedInputBase,
+                          {
+                            tabIndex: -1,
+                            disabled,
+                            placeholder: searchPlaceholder ?? "Busque uma op\xE7\xE3o...",
+                            "data-testid": testIds.search ?? "combobox-search",
+                            onSearch: onSearchChange,
+                            search,
+                            debounce: 500
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          CommandListBase,
+                          {
+                            "data-testid": testIds.list ?? "combobox-list",
+                            onEndReached,
+                            className: "focus:ring-0 focus:outline-none",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(CommandEmptyBase, { "data-testid": testIds.empty ?? "combobox-empty", children: loading ? "Carregando..." : empty }),
+                              /* @__PURE__ */ jsxRuntime.jsx(CommandGroupBase, { "data-testid": testIds.group ?? "combobox-group", children: items.map((item) => {
+                                const isSelected = checkIsSelected(item.value);
+                                return /* @__PURE__ */ jsxRuntime.jsxs(
+                                  CommandItemBase,
                                   {
-                                    size: iconSize,
-                                    weight: isActive ? "fill" : "regular",
-                                    className: cn(
-                                      "transition-all duration-200",
-                                      isActive ? "text-primary-foreground " : "text-muted-foreground"
-                                    )
-                                  }
-                                ) })
-                              }
-                            )
-                          ]
-                        },
-                        item.id
-                      );
-                    })
-                  ]
+                                    keywords: [item.label],
+                                    value: item.value,
+                                    onSelect: (value) => {
+                                      if (disabled) return;
+                                      handleSelection(value);
+                                      if (!keepOpen) setOpen(false);
+                                    },
+                                    disabled,
+                                    "data-testid": testIds.option ?? "combobox-option",
+                                    children: [
+                                      item.label,
+                                      /* @__PURE__ */ jsxRuntime.jsx(
+                                        framerMotion.motion.div,
+                                        {
+                                          initial: { scale: 0 },
+                                          animate: { scale: isSelected ? 1 : 0 },
+                                          transition: {
+                                            type: "spring",
+                                            stiffness: 500,
+                                            damping: 30
+                                          },
+                                          className: "ml-auto ",
+                                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                                            react.CheckIcon,
+                                            {
+                                              className: cn(
+                                                "ml-auto",
+                                                isSelected ? "opacity-100" : "opacity-0"
+                                              ),
+                                              "data-testid": isSelected ? testIds.check ?? "combobox-option-check" : void 0
+                                            }
+                                          )
+                                        }
+                                      )
+                                    ]
+                                  },
+                                  item.value
+                                );
+                              }) }),
+                              loading && items.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center p-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Carregando mais..." }) })
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  )
                 }
               )
             ]
           }
-        ) })
-      }
-    )
-  ] });
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage_default, { error })
+      ]
+    }
+  );
 }
 
 exports.AddButton = AddButton;
@@ -19638,6 +19775,7 @@ exports.ContextMenuSubBase = ContextMenuSubBase;
 exports.ContextMenuSubContentBase = ContextMenuSubContentBase;
 exports.ContextMenuSubTriggerBase = ContextMenuSubTriggerBase;
 exports.ContextMenuTriggerBase = ContextMenuTriggerBase;
+exports.ControlledCombobox = ControlledCombobox;
 exports.CopyButton = CopyButton;
 exports.DateTimePicker = DateTimePicker;
 exports.DayView = DayView;