@mlw-packages/react-components 1.10.17 → 1.10.18

package/dist/index.mjs

@@ -2530,6 +2530,7 @@ var badgeVariants = cva(
 function Badge({
   className,
   color,
+  rank,
   size = "md",
   asChild = false,
   children,
@@ -2546,6 +2547,12 @@ function Badge({
     blue: "bg-blue-50 text-blue-500 border-blue-200",
     purple: "bg-purple-50 text-purple-500 border-purple-200"
   };
+  const rankClasses = {
+    diamond: "bg-cyan-100 text-cyan-600 border-cyan-300",
+    gold: "bg-yellow-100 text-yellow-500 border-yellow-300",
+    silver: "bg-gray-100 text-gray-500 border-gray-300",
+    bronze: "bg-orange-100 text-orange-700 border-orange-300"
+  };
   return /* @__PURE__ */ jsx(
     Comp,
     {
@@ -2553,6 +2560,7 @@ function Badge({
       className: cn(
         badgeVariants({ size }),
         color ? colorClasses[color] : void 0,
+        rank ? rankClasses[rank] : void 0,
         className
       ),
       style: customStyle,
@@ -7816,7 +7824,8 @@ function DateTimePicker({
   disabled,
   className,
   error,
-  hideClear = true
+  hideClear = true,
+  triggerIcon
 }) {
   const [internalDate, setInternalDate] = useState(date);
   const [open, setOpen] = useState(false);
@@ -7866,193 +7875,222 @@ function DateTimePicker({
   const { ref: contentRef, center } = use_auto_center_default(open);
   const basePopoverClass = "w-auto max-w-[calc(100vw-16px)] p-0 border-none shadow-none";
   const centeredPopoverClass = "w-auto max-w-[calc(100vw-16px)] p-0 border-none shadow-none fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50";
-  const renderTriggerButton = () => /* @__PURE__ */ jsxs(
-    ButtonBase,
-    {
-      variant: "outline",
-      disabled,
-      className: cn(
-        "w-full justify-start text-left min-w-0 overflow-hidden",
-        !date && "text-muted-foreground"
-      ),
-      children: [
-        /* @__PURE__ */ jsx("span", { className: cn("truncate flex-1", !date && "text-muted-foreground"), children: date ? format(date, getDisplayFormat(), { locale: ptBR }) : "Selecione uma data" }),
-        /* @__PURE__ */ jsx(motion.span, { className: "flex items-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-0 items-center ", children: [
-          hideClear && (date || internalDate) && /* @__PURE__ */ jsx(
-            ClearButton,
-            {
-              onClick: (e) => {
-                e?.stopPropagation();
-                setInternalDate(null);
-                onChange?.(null);
-                onConfirm?.(null);
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            motion.div,
-            {
-              animate: { rotate: open ? 15 : 0 },
-              transition: { duration: 0.03 },
-              children: /* @__PURE__ */ jsx(CalendarBlankIcon, { className: "h-4 w-4" })
-            }
-          )
-        ] }) })
-      ]
+  const renderTriggerButton = () => {
+    if (triggerIcon) {
+      return /* @__PURE__ */ jsx(
+        ButtonBase,
+        {
+          variant: "outline",
+          size: "icon",
+          disabled,
+          className: cn("no-active-animation", error && "border-red-500"),
+          children: /* @__PURE__ */ jsx(CalendarBlankIcon, { className: "h-4 w-4" })
+        }
+      );
     }
-  );
-  const renderPickerContent = () => /* @__PURE__ */ jsxs("div", { className: "p-2 sm:p-3 border border-border rounded-md", children: [
-    isMobile && !hideTime ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-h-0", children: [
-      internalDate && /* @__PURE__ */ jsx("div", { className: "flex  items-center gap-3 px-4 py-3 rounded-lg ", children: /* @__PURE__ */ jsxs("span", { className: "text-md font-semibold", children: [
-        format(internalDate, "dd 'de' MMMM 'de' yyyy", {
-          locale: ptBR
-        }),
-        " ",
-        "- ",
-        format(internalDate, hideSeconds ? "HH:mm" : "HH:mm:ss")
-      ] }) }),
-      /* @__PURE__ */ jsxs(TabsBase, { value: activeTab, onValueChange: setActiveTab, children: [
-        /* @__PURE__ */ jsxs(TabsListBase, { className: "", children: [
-          /* @__PURE__ */ jsx(TabsTriggerBase, { value: "calendar", className: "flex-1", children: "Data" }),
-          /* @__PURE__ */ jsx(TabsTriggerBase, { value: "time", className: "flex-1", children: "Hor\xE1rio" })
-        ] }),
-        /* @__PURE__ */ jsx(TabsContentBase, { value: "calendar", className: "mt-0", children: /* @__PURE__ */ jsx(
-          CalendarBase2,
-          {
-            mode: "single",
-            locale: ptBR,
-            selected: internalDate ?? void 0,
-            onSelect: (d) => handleSelect(d ?? null),
-            autoFocus: true,
-            defaultMonth: fromDate ?? toDate ?? internalDate ?? void 0,
-            ...fromDate && { startMonth: fromDate },
-            ...toDate && { endMonth: toDate },
-            ...fromDate || toDate ? {
-              disabled: [
-                ...fromDate ? [{ before: fromDate }] : [],
-                ...toDate ? [{ after: toDate }] : []
-              ]
-            } : {},
-            className: cn("w-full rounded-none border-none")
-          }
-        ) }),
-        /* @__PURE__ */ jsx(TabsContentBase, { value: "time", className: "mt-0", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center gap-4 py-2", children: /* @__PURE__ */ jsx(
-          TimeScrollPicker,
-          {
-            setDate: (d) => handleTimeChange(d ?? null),
-            date: internalDate,
-            hideSeconds
-          }
-        ) }) })
-      ] })
-    ] }) : /* @__PURE__ */ jsxs(
-      "div",
+    return /* @__PURE__ */ jsxs(
+      ButtonBase,
       {
-        ref: contentRef,
-        className: "flex flex-col sm:flex-row max-h-auto overflow-y-auto border-none rounded-md",
+        variant: "outline",
+        disabled,
+        className: cn(
+          "w-full justify-start text-left min-w-0 overflow-hidden",
+          !date && "text-muted-foreground"
+        ),
         children: [
           /* @__PURE__ */ jsx(
-            CalendarBase2,
+            "span",
             {
-              mode: "single",
-              locale: ptBR,
-              selected: internalDate ?? void 0,
-              onSelect: (d) => handleSelect(d ?? null),
-              autoFocus: true,
-              defaultMonth: fromDate ?? toDate ?? internalDate ?? void 0,
-              ...fromDate && { startMonth: fromDate },
-              ...toDate && { endMonth: toDate },
-              ...fromDate || toDate ? {
-                disabled: [
-                  ...fromDate ? [{ before: fromDate }] : [],
-                  ...toDate ? [{ after: toDate }] : []
-                ]
-              } : {},
-              className: cn(
-                "w-max rounded-none border-none",
-                !hideTime && "sm:rounded-r-none"
-              )
+              className: cn("truncate flex-1", !date && "text-muted-foreground"),
+              children: date ? format(date, getDisplayFormat(), { locale: ptBR }) : "Selecione uma data"
             }
           ),
-          !hideTime && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "flex flex-col items-center justify-center",
-                "border-l"
-              ),
-              children: [
-                /* @__PURE__ */ jsx("div", { className: "text-[clamp(0.85rem,1.4vw,1.125rem)] sm:text-[clamp(0.9rem,1.6vw,1.125rem)] font-semibold capitalize text-left", children: "Hor\xE1rio" }),
-                /* @__PURE__ */ jsx(
-                  TimeScrollPicker,
-                  {
-                    setDate: (d) => handleTimeChange(d ?? null),
-                    date: internalDate,
-                    hideSeconds
-                  }
-                )
-              ]
-            }
-          )
+          /* @__PURE__ */ jsx(motion.span, { className: "flex items-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-0 items-center ", children: [
+            hideClear && (date || internalDate) && /* @__PURE__ */ jsx(
+              ClearButton,
+              {
+                onClick: (e) => {
+                  e?.stopPropagation();
+                  setInternalDate(null);
+                  onChange?.(null);
+                  onConfirm?.(null);
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                animate: { rotate: open ? 15 : 0 },
+                transition: { duration: 0.03 },
+                children: /* @__PURE__ */ jsx(CalendarBlankIcon, { className: "h-4 w-4" })
+              }
+            )
+          ] }) })
         ]
       }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "flex rounded-md p-1.5 gap-2", children: [
-      /* @__PURE__ */ jsx(
-        ButtonBase,
-        {
-          variant: "outline",
-          className: "no-active-animation",
-          tooltip: "Hoje",
-          size: "icon",
-          onClick: () => {
-            const now = /* @__PURE__ */ new Date();
-            const selected = hideTime ? new Date(
-              Date.UTC(
-                now.getUTCFullYear(),
-                now.getUTCMonth(),
-                now.getUTCDate(),
-                0,
-                0,
-                0,
-                0
-              )
-            ) : now;
-            setInternalDate(selected);
-            onChange?.(selected);
-            onConfirm?.(selected);
-          },
-          children: /* @__PURE__ */ jsx(CalendarDotIcon$1, { className: "h-4 w-4" })
-        }
+    );
+  };
+  const renderPickerContent = () => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "p-2 sm:p-3",
+        !isMobile && "border border-border rounded-md"
       ),
-      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 sm:flex-row w-full gap-2", children: [
-        /* @__PURE__ */ jsx(
-          ButtonBase,
+      children: [
+        isMobile && !hideTime ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-h-0", children: [
+          internalDate && /* @__PURE__ */ jsx("div", { className: "flex  items-center gap-3 px-4 py-3 rounded-lg ", children: /* @__PURE__ */ jsxs("span", { className: "text-md font-semibold", children: [
+            format(internalDate, "dd 'de' MMMM 'de' yyyy", {
+              locale: ptBR
+            }),
+            " ",
+            "- ",
+            format(internalDate, hideSeconds ? "HH:mm" : "HH:mm:ss")
+          ] }) }),
+          /* @__PURE__ */ jsxs(TabsBase, { value: activeTab, onValueChange: setActiveTab, children: [
+            /* @__PURE__ */ jsxs(TabsListBase, { className: "", children: [
+              /* @__PURE__ */ jsx(TabsTriggerBase, { value: "calendar", className: "flex-1", children: "Data" }),
+              /* @__PURE__ */ jsx(TabsTriggerBase, { value: "time", className: "flex-1", children: "Hor\xE1rio" })
+            ] }),
+            /* @__PURE__ */ jsx(TabsContentBase, { value: "calendar", className: "mt-0", children: /* @__PURE__ */ jsx(
+              CalendarBase2,
+              {
+                mode: "single",
+                locale: ptBR,
+                selected: internalDate ?? void 0,
+                onSelect: (d) => handleSelect(d ?? null),
+                autoFocus: true,
+                defaultMonth: fromDate ?? toDate ?? internalDate ?? void 0,
+                ...fromDate && { startMonth: fromDate },
+                ...toDate && { endMonth: toDate },
+                ...fromDate || toDate ? {
+                  disabled: [
+                    ...fromDate ? [{ before: fromDate }] : [],
+                    ...toDate ? [{ after: toDate }] : []
+                  ]
+                } : {},
+                className: cn("w-full rounded-none border-none")
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TabsContentBase, { value: "time", className: "mt-0", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center gap-4 py-2", children: /* @__PURE__ */ jsx(
+              TimeScrollPicker,
+              {
+                setDate: (d) => handleTimeChange(d ?? null),
+                date: internalDate,
+                hideSeconds
+              }
+            ) }) })
+          ] })
+        ] }) : /* @__PURE__ */ jsxs(
+          "div",
           {
-            className: "no-active-animation rounded-md bg-background text-primary border hover:bg-muted/50 overflow-hidden flex-1 min-w-0 border-border",
-            onClick: () => setOpen(false),
-            children: "Cancelar"
+            ref: contentRef,
+            className: "flex flex-col sm:flex-row max-h-auto overflow-y-auto border-none rounded-md",
+            children: [
+              /* @__PURE__ */ jsx(
+                CalendarBase2,
+                {
+                  mode: "single",
+                  locale: ptBR,
+                  selected: internalDate ?? void 0,
+                  onSelect: (d) => handleSelect(d ?? null),
+                  autoFocus: true,
+                  defaultMonth: fromDate ?? toDate ?? internalDate ?? void 0,
+                  ...fromDate && { startMonth: fromDate },
+                  ...toDate && { endMonth: toDate },
+                  ...fromDate || toDate ? {
+                    disabled: [
+                      ...fromDate ? [{ before: fromDate }] : [],
+                      ...toDate ? [{ after: toDate }] : []
+                    ]
+                  } : {},
+                  className: cn(
+                    "w-max rounded-none border-none",
+                    !hideTime && "sm:rounded-r-none"
+                  )
+                }
+              ),
+              !hideTime && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-col items-center justify-center",
+                    "border-l"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: "text-[clamp(0.85rem,1.4vw,1.125rem)] sm:text-[clamp(0.9rem,1.6vw,1.125rem)] font-semibold capitalize text-left", children: "Hor\xE1rio" }),
+                    /* @__PURE__ */ jsx(
+                      TimeScrollPicker,
+                      {
+                        setDate: (d) => handleTimeChange(d ?? null),
+                        date: internalDate,
+                        hideSeconds
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
           }
         ),
-        /* @__PURE__ */ jsx(
-          ButtonBase,
-          {
-            className: cn(
-              "no-active-animation rounded-md bg-emerald-600",
-              internalDate ? "hover:bg-emerald-700" : "opacity-50 cursor-not-allowed"
+        /* @__PURE__ */ jsxs("div", { className: "flex rounded-md p-1.5 gap-2", children: [
+          /* @__PURE__ */ jsx(
+            ButtonBase,
+            {
+              variant: "outline",
+              className: "no-active-animation",
+              tooltip: "Hoje",
+              size: "icon",
+              onClick: () => {
+                const now = /* @__PURE__ */ new Date();
+                const selected = hideTime ? new Date(
+                  Date.UTC(
+                    now.getUTCFullYear(),
+                    now.getUTCMonth(),
+                    now.getUTCDate(),
+                    0,
+                    0,
+                    0,
+                    0
+                  )
+                ) : now;
+                setInternalDate(selected);
+                onChange?.(selected);
+                onConfirm?.(selected);
+              },
+              children: /* @__PURE__ */ jsx(CalendarDotIcon$1, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 sm:flex-row w-full gap-2", children: [
+            /* @__PURE__ */ jsx(
+              ButtonBase,
+              {
+                className: "no-active-animation rounded-md bg-background text-primary border hover:bg-muted/50 overflow-hidden flex-1 min-w-0 border-border",
+                onClick: () => setOpen(false),
+                children: "Cancelar"
+              }
             ),
-            disabled: !internalDate,
-            onClick: () => {
-              if (!internalDate) return;
-              setOpen(false);
-              onConfirm?.(internalDate);
-            },
-            children: "Confirmar"
-          }
-        )
-      ] })
-    ] })
-  ] });
+            /* @__PURE__ */ jsx(
+              ButtonBase,
+              {
+                className: cn(
+                  "no-active-animation rounded-md bg-emerald-600",
+                  internalDate ? "hover:bg-emerald-700" : "opacity-50 cursor-not-allowed"
+                ),
+                disabled: !internalDate,
+                onClick: () => {
+                  if (!internalDate) return;
+                  setOpen(false);
+                  onConfirm?.(internalDate);
+                },
+                children: "Confirmar"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
   return /* @__PURE__ */ jsxs("div", { className: cn("w-full sm:w-auto", className), children: [
     label && /* @__PURE__ */ jsx(LabelBase_default, { children: label }),
     isMobile ? /* @__PURE__ */ jsxs(DialogBase, { open, onOpenChange: setOpen, children: [
@@ -8066,7 +8104,7 @@ function DateTimePicker({
         }
       ),
       /* @__PURE__ */ jsx(ErrorMessage_default, { error }),
-      /* @__PURE__ */ jsx(DialogContentBase, { className: "p-0 max-h-[95vh] w-3/6 overflow-hidden flex flex-col", children: /* @__PURE__ */ jsx("div", { className: "overflow-y-auto flex-1", children: renderPickerContent() }) })
+      /* @__PURE__ */ jsx(DialogContentBase, { className: "p-0 max-h-[95vh] w-[95%] sm:max-w-lg overflow-hidden flex flex-col", children: /* @__PURE__ */ jsx("div", { className: "overflow-y-auto flex-1", children: renderPickerContent() }) })
     ] }) : /* @__PURE__ */ jsxs(PopoverBase, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsx(
         PopoverTriggerBase,
@@ -21724,7 +21762,7 @@ function useCommandPalette({
   useEffect(() => {
     setActiveIndex(0);
   }, [page]);
-  const displayedGroups = React32.useMemo(() => {
+  const displayedGroups = useMemo(() => {
     const start = page * PAGE_SIZE;
     const end = start + PAGE_SIZE;
     let count = 0;
@@ -21743,12 +21781,12 @@ function useCommandPalette({
     }
     return result;
   }, [allMatchedGroups, page]);
-  const flatItems = React32.useMemo(
+  const flatItems = useMemo(
     () => displayedGroups.flatMap((g) => g.items),
     [displayedGroups]
   );
   const pageItemCount = flatItems.length;
-  React32.useEffect(() => {
+  useEffect(() => {
     setActiveIndex((i) => Math.min(i, Math.max(pageItemCount - 1, 0)));
   }, [pageItemCount]);
   function handleSelect(item) {

package/package.json

@@ -5,7 +5,7 @@
     "access": "public",
     "type": "module"
   },
-  "version": "1.10.17",
+  "version": "1.10.18",
   "homepage": "https://main--68e80310a069c2f10b546ef3.chromatic.com/",
   "repository": {
     "type": "git",