@mlw-packages/react-components 1.7.23 → 1.7.25

package/dist/index.css

@@ -1911,6 +1911,9 @@ body {
   border-top-left-radius: 0.75rem;
   border-top-right-radius: 0.75rem;
 }
+.rounded-bl-md {
+  border-bottom-left-radius: calc(var(--radius) - 2px);
+}
 .rounded-tl-sm {
   border-top-left-radius: calc(var(--radius) - 4px);
 }
@@ -5582,9 +5585,6 @@ body {
 .dark\:hover\:bg-emerald-400\/20:hover:is(.dark *) {
   background-color: rgb(52 211 153 / 0.2);
 }
-.dark\:hover\:bg-input\/50:hover:is(.dark *) {
-  background-color: hsl(var(--input) / 0.5);
-}
 .dark\:hover\:bg-orange-400\/20:hover:is(.dark *) {
   background-color: rgb(251 146 60 / 0.2);
 }

package/dist/index.d.mts

@@ -792,7 +792,8 @@ type BannerProps = {
 interface DateTimePickerProps extends ErrorMessageProps {
     label?: string;
     date: Date | undefined;
-    onChange: (date: Date | undefined) => void;
+    onChange?: (date: Date | undefined) => void;
+    onConfirm?: (date: Date | undefined) => void;
     displayFormat?: boolean;
     hideTime?: boolean;
     hideSeconds?: boolean;
@@ -802,7 +803,7 @@ interface DateTimePickerProps extends ErrorMessageProps {
     className?: string;
     error?: string;
 }
-declare function DateTimePicker({ label, date, onChange, displayFormat, hideTime, hideSeconds, fromDate, toDate, disabled, className, error, }: DateTimePickerProps): react_jsx_runtime.JSX.Element;
+declare function DateTimePicker({ label, date, onChange, onConfirm, displayFormat, hideTime, hideSeconds, fromDate, toDate, disabled, className, error, }: DateTimePickerProps): react_jsx_runtime.JSX.Element;
 
 interface RangePickerProps extends ErrorMessageProps {
     value?: DateRange;

package/dist/index.d.ts

@@ -792,7 +792,8 @@ type BannerProps = {
 interface DateTimePickerProps extends ErrorMessageProps {
     label?: string;
     date: Date | undefined;
-    onChange: (date: Date | undefined) => void;
+    onChange?: (date: Date | undefined) => void;
+    onConfirm?: (date: Date | undefined) => void;
     displayFormat?: boolean;
     hideTime?: boolean;
     hideSeconds?: boolean;
@@ -802,7 +803,7 @@ interface DateTimePickerProps extends ErrorMessageProps {
     className?: string;
     error?: string;
 }
-declare function DateTimePicker({ label, date, onChange, displayFormat, hideTime, hideSeconds, fromDate, toDate, disabled, className, error, }: DateTimePickerProps): react_jsx_runtime.JSX.Element;
+declare function DateTimePicker({ label, date, onChange, onConfirm, displayFormat, hideTime, hideSeconds, fromDate, toDate, disabled, className, error, }: DateTimePickerProps): react_jsx_runtime.JSX.Element;
 
 interface RangePickerProps extends ErrorMessageProps {
     value?: DateRange;

package/dist/index.js

@@ -7864,6 +7864,7 @@ function DateTimePicker({
   label,
   date,
   onChange,
+  onConfirm,
   displayFormat,
   hideTime,
   hideSeconds,
@@ -7880,18 +7881,18 @@ function DateTimePicker({
     if (!newDay) return;
     if (!internalDate) {
       setInternalDate(newDay);
-      onChange(newDay);
+      onChange?.(newDay);
       return;
     }
     const diff = newDay.getTime() - internalDate.getTime();
     const diffInDays = diff / (1e3 * 60 * 60 * 24);
     const newDateFull = (0, import_date_fns.add)(internalDate, { days: Math.ceil(diffInDays) });
     setInternalDate(newDateFull);
-    onChange(newDateFull);
+    onChange?.(newDateFull);
   };
   const handleTimeChange = (newDate) => {
     setInternalDate(newDate);
-    onChange(newDate);
+    onChange?.(newDate);
   };
   const getTimeFormat = () => {
     if (hideTime) return "";
@@ -7918,10 +7919,11 @@ function DateTimePicker({
           disabled,
           asChild: true,
           className: cn(error && "border-red-500"),
-          children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
             ButtonBase,
             {
               variant: "outline",
+              disabled,
               className: cn(
                 "w-full justify-start text-left min-w-0 overflow-hidden",
                 !date && "text-muted-foreground"
@@ -7943,7 +7945,7 @@ function DateTimePicker({
                     className: "-mr-3",
                     onClick: () => {
                       setInternalDate(void 0);
-                      onChange(void 0);
+                      onChange?.(void 0);
                       setOpen(false);
                     }
                   }
@@ -7951,7 +7953,7 @@ function DateTimePicker({
                 /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react43.CalendarBlankIcon, { className: "flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6" })
               ]
             }
-          ) })
+          )
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ErrorMessage_default, { error }),
@@ -8044,7 +8046,7 @@ function DateTimePicker({
               /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                 ButtonBase,
                 {
-                  className: "no-active-animation rounded-none bg-muted text-gray-800 border-b-2 border-l-2",
+                  className: "no-active-animation rounded-none rounded-bl-md bg-background text-gray-800 border-b-2 border-l-2 hover:bg-muted/50 overflow-y-hidden",
                   onClick: () => setOpen(false),
                   children: "Cancelar"
                 }
@@ -8055,7 +8057,7 @@ function DateTimePicker({
                   className: "no-active-animation rounded-none bg-emerald-600 hover:bg-emerald-700",
                   onClick: () => {
                     setOpen(false);
-                    onChange(internalDate);
+                    onConfirm?.(internalDate);
                   },
                   children: "Confirmar"
                 }
@@ -8088,7 +8090,6 @@ function RangePicker({
 }) {
   const [open, setOpen] = React40.useState(false);
   const [range, setRange] = React40.useState(value);
-  const controls = (0, import_framer_motion13.useAnimation)();
   React40.useEffect(() => {
     setRange(value);
   }, [value]);
@@ -8101,46 +8102,37 @@ function RangePicker({
     onChange?.(void 0);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(PopoverBase, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(PopoverTriggerBase, { asChild: true, className: cn(error && "border-red-500"), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-      import_framer_motion13.motion.div,
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(PopoverTriggerBase, { asChild: true, className: cn(error && "border-red-500"), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+      ButtonBase,
       {
-        whileTap: { scale: 0.97 },
-        whileHover: { scale: open ? 1.03 : 1.01 },
-        transition: { type: "spring", stiffness: 300, damping: 20 },
-        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
-          ButtonBase,
-          {
-            variant: "outline",
-            className: cn(
-              "w-full justify-start text-left min-w-0 overflow-hidden",
-              !range && "text-muted-foreground"
-            ),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-                import_framer_motion13.motion.span,
-                {
-                  className: cn(
-                    "truncate flex-1",
-                    !range && "text-muted-foreground"
-                  ),
-                  transition: { duration: 0.2 },
-                  animate: controls,
-                  children: range?.from && range?.to ? `${(0, import_date_fns2.format)(range.from, "P", {
-                    locale: dateFnsLocale
-                  })} - ${(0, import_date_fns2.format)(range.to, "P", { locale: dateFnsLocale })}` : label
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-                import_framer_motion13.motion.span,
-                {
-                  animate: open ? { rotate: 8, scale: 1.15 } : { rotate: 0, scale: 1 },
-                  transition: { type: "spring", stiffness: 300, damping: 18 },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react44.CalendarBlankIcon, { className: "flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6" })
-                }
-              )
-            ]
-          }
-        )
+        variant: "outline",
+        className: cn(
+          "w-full justify-start text-left min-w-0 overflow-hidden",
+          !range && "text-muted-foreground"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+            "span",
+            {
+              className: cn("truncate flex-1", !range && "text-muted-foreground"),
+              children: range?.from && range?.to ? `${(0, import_date_fns2.format)(range.from, "P", {
+                locale: dateFnsLocale
+              })} - ${(0, import_date_fns2.format)(range.to, "P", { locale: dateFnsLocale })}` : label
+            }
+          ),
+          range && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+            ClearButton,
+            {
+              className: "-mr-3",
+              onClick: () => {
+                setRange(void 0);
+                onChange?.(void 0);
+                setOpen(false);
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react44.CalendarBlankIcon, { className: "flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6" })
+        ]
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ErrorMessage_default, { error }),
@@ -8340,7 +8332,7 @@ function Agenda({
             (0, import_date_fns3.isToday)(day) ? "border-blue-200" : ""
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
               "span",
               {
                 className: (0, import_tailwind_merge2.twMerge)(
@@ -8348,10 +8340,13 @@ function Agenda({
                   (0, import_date_fns3.isToday)(day) ? "text-blue-500" : ""
                 ),
                 "data-today": (0, import_date_fns3.isToday)(day) || void 0,
-                children: (() => {
-                  const s = (0, import_date_fns3.format)(day, "d MMM, EEEE", { locale: import_locale2.ptBR });
-                  return s.split(" ").map((w) => w ? w[0].toUpperCase() + w.slice(1) : w).join(" ");
-                })()
+                children: [
+                  (() => {
+                    const s = (0, import_date_fns3.format)(day, "d MMM, EEEE", { locale: import_locale2.ptBR });
+                    return s.split(" ").map((w) => w ? w[0].toUpperCase() + w.slice(1) : w).join(" ");
+                  })(),
+                  (0, import_date_fns3.isToday)(day) ? " - Hoje" : ""
+                ]
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "mt-6 space-y-2", children: dayEvents.map((event) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
@@ -13501,7 +13496,7 @@ function MultiSelectTriggerBase({
         "aria-disabled": disabled || void 0,
         disabled,
         className: cn(
-          "flex h-auto max-h-9 min-h-9 w-full items-center justify-between gap-2 overflow-hidden rounded-md border border-input bg-background px-3 py-1.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+          "flex h-auto max-h-9 min-h-9 w-full items-center justify-between gap-2 overflow-hidden rounded-md border border-input bg-background px-3 py-1.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground  dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
           error ? "border-destructive focus:ring-1 focus:ring-destructive" : "border-input focus:ring-1 focus:ring-ring",
           className
         ),
@@ -13689,8 +13684,6 @@ function MultiSelectItemBase({
       children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
         import_framer_motion16.motion.div,
         {
-          whileHover: { scale: 1.02 },
-          whileTap: { scale: 0.98 },
           transition: { duration: 0.1 },
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(

package/dist/index.mjs

@@ -7548,6 +7548,7 @@ function DateTimePicker({
   label,
   date,
   onChange,
+  onConfirm,
   displayFormat,
   hideTime,
   hideSeconds,
@@ -7564,18 +7565,18 @@ function DateTimePicker({
     if (!newDay) return;
     if (!internalDate) {
       setInternalDate(newDay);
-      onChange(newDay);
+      onChange?.(newDay);
       return;
     }
     const diff = newDay.getTime() - internalDate.getTime();
     const diffInDays = diff / (1e3 * 60 * 60 * 24);
     const newDateFull = add(internalDate, { days: Math.ceil(diffInDays) });
     setInternalDate(newDateFull);
-    onChange(newDateFull);
+    onChange?.(newDateFull);
   };
   const handleTimeChange = (newDate) => {
     setInternalDate(newDate);
-    onChange(newDate);
+    onChange?.(newDate);
   };
   const getTimeFormat = () => {
     if (hideTime) return "";
@@ -7602,10 +7603,11 @@ function DateTimePicker({
           disabled,
           asChild: true,
           className: cn(error && "border-red-500"),
-          children: /* @__PURE__ */ jsx59("div", { children: /* @__PURE__ */ jsxs40(
+          children: /* @__PURE__ */ jsxs40(
             ButtonBase,
             {
               variant: "outline",
+              disabled,
               className: cn(
                 "w-full justify-start text-left min-w-0 overflow-hidden",
                 !date && "text-muted-foreground"
@@ -7627,7 +7629,7 @@ function DateTimePicker({
                     className: "-mr-3",
                     onClick: () => {
                       setInternalDate(void 0);
-                      onChange(void 0);
+                      onChange?.(void 0);
                       setOpen(false);
                     }
                   }
@@ -7635,7 +7637,7 @@ function DateTimePicker({
                 /* @__PURE__ */ jsx59(CalendarBlankIcon, { className: "flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6" })
               ]
             }
-          ) })
+          )
         }
       ),
       /* @__PURE__ */ jsx59(ErrorMessage_default, { error }),
@@ -7728,7 +7730,7 @@ function DateTimePicker({
               /* @__PURE__ */ jsx59(
                 ButtonBase,
                 {
-                  className: "no-active-animation rounded-none bg-muted text-gray-800 border-b-2 border-l-2",
+                  className: "no-active-animation rounded-none rounded-bl-md bg-background text-gray-800 border-b-2 border-l-2 hover:bg-muted/50 overflow-y-hidden",
                   onClick: () => setOpen(false),
                   children: "Cancelar"
                 }
@@ -7739,7 +7741,7 @@ function DateTimePicker({
                   className: "no-active-animation rounded-none bg-emerald-600 hover:bg-emerald-700",
                   onClick: () => {
                     setOpen(false);
-                    onChange(internalDate);
+                    onConfirm?.(internalDate);
                   },
                   children: "Confirmar"
                 }
@@ -7764,7 +7766,7 @@ import {
   CaretRightIcon as CaretRightIcon6,
   CalendarBlankIcon as CalendarBlankIcon2
 } from "@phosphor-icons/react";
-import { motion as motion12, AnimatePresence as AnimatePresence9, useAnimation } from "framer-motion";
+import { motion as motion12, AnimatePresence as AnimatePresence9 } from "framer-motion";
 import { CalendarDotIcon } from "@phosphor-icons/react/dist/ssr";
 import { jsx as jsx60, jsxs as jsxs41 } from "react/jsx-runtime";
 var dateFnsLocale = ptBR2?.default ?? ptBR2;
@@ -7778,7 +7780,6 @@ function RangePicker({
 }) {
   const [open, setOpen] = React40.useState(false);
   const [range, setRange] = React40.useState(value);
-  const controls = useAnimation();
   React40.useEffect(() => {
     setRange(value);
   }, [value]);
@@ -7791,46 +7792,37 @@ function RangePicker({
     onChange?.(void 0);
   };
   return /* @__PURE__ */ jsxs41(PopoverBase, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx60(PopoverTriggerBase, { asChild: true, className: cn(error && "border-red-500"), children: /* @__PURE__ */ jsx60(
-      motion12.div,
+    /* @__PURE__ */ jsx60(PopoverTriggerBase, { asChild: true, className: cn(error && "border-red-500"), children: /* @__PURE__ */ jsxs41(
+      ButtonBase,
       {
-        whileTap: { scale: 0.97 },
-        whileHover: { scale: open ? 1.03 : 1.01 },
-        transition: { type: "spring", stiffness: 300, damping: 20 },
-        children: /* @__PURE__ */ jsxs41(
-          ButtonBase,
-          {
-            variant: "outline",
-            className: cn(
-              "w-full justify-start text-left min-w-0 overflow-hidden",
-              !range && "text-muted-foreground"
-            ),
-            children: [
-              /* @__PURE__ */ jsx60(
-                motion12.span,
-                {
-                  className: cn(
-                    "truncate flex-1",
-                    !range && "text-muted-foreground"
-                  ),
-                  transition: { duration: 0.2 },
-                  animate: controls,
-                  children: range?.from && range?.to ? `${format2(range.from, "P", {
-                    locale: dateFnsLocale
-                  })} - ${format2(range.to, "P", { locale: dateFnsLocale })}` : label
-                }
-              ),
-              /* @__PURE__ */ jsx60(
-                motion12.span,
-                {
-                  animate: open ? { rotate: 8, scale: 1.15 } : { rotate: 0, scale: 1 },
-                  transition: { type: "spring", stiffness: 300, damping: 18 },
-                  children: /* @__PURE__ */ jsx60(CalendarBlankIcon2, { className: "flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6" })
-                }
-              )
-            ]
-          }
-        )
+        variant: "outline",
+        className: cn(
+          "w-full justify-start text-left min-w-0 overflow-hidden",
+          !range && "text-muted-foreground"
+        ),
+        children: [
+          /* @__PURE__ */ jsx60(
+            "span",
+            {
+              className: cn("truncate flex-1", !range && "text-muted-foreground"),
+              children: range?.from && range?.to ? `${format2(range.from, "P", {
+                locale: dateFnsLocale
+              })} - ${format2(range.to, "P", { locale: dateFnsLocale })}` : label
+            }
+          ),
+          range && /* @__PURE__ */ jsx60(
+            ClearButton,
+            {
+              className: "-mr-3",
+              onClick: () => {
+                setRange(void 0);
+                onChange?.(void 0);
+                setOpen(false);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx60(CalendarBlankIcon2, { className: "flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6" })
+        ]
       }
     ) }),
     /* @__PURE__ */ jsx60(ErrorMessage_default, { error }),
@@ -8036,7 +8028,7 @@ function Agenda({
             isToday(day) ? "border-blue-200" : ""
           ),
           children: [
-            /* @__PURE__ */ jsx61(
+            /* @__PURE__ */ jsxs42(
               "span",
               {
                 className: twMerge2(
@@ -8044,10 +8036,13 @@ function Agenda({
                   isToday(day) ? "text-blue-500" : ""
                 ),
                 "data-today": isToday(day) || void 0,
-                children: (() => {
-                  const s = format3(day, "d MMM, EEEE", { locale: ptBR3 });
-                  return s.split(" ").map((w) => w ? w[0].toUpperCase() + w.slice(1) : w).join(" ");
-                })()
+                children: [
+                  (() => {
+                    const s = format3(day, "d MMM, EEEE", { locale: ptBR3 });
+                    return s.split(" ").map((w) => w ? w[0].toUpperCase() + w.slice(1) : w).join(" ");
+                  })(),
+                  isToday(day) ? " - Hoje" : ""
+                ]
               }
             ),
             /* @__PURE__ */ jsx61("div", { className: "mt-6 space-y-2", children: dayEvents.map((event) => /* @__PURE__ */ jsx61(
@@ -13320,7 +13315,7 @@ function MultiSelectTriggerBase({
         "aria-disabled": disabled || void 0,
         disabled,
         className: cn(
-          "flex h-auto max-h-9 min-h-9 w-full items-center justify-between gap-2 overflow-hidden rounded-md border border-input bg-background px-3 py-1.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+          "flex h-auto max-h-9 min-h-9 w-full items-center justify-between gap-2 overflow-hidden rounded-md border border-input bg-background px-3 py-1.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground  dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
           error ? "border-destructive focus:ring-1 focus:ring-destructive" : "border-input focus:ring-1 focus:ring-ring",
           className
         ),
@@ -13508,8 +13503,6 @@ function MultiSelectItemBase({
       children: /* @__PURE__ */ jsxs61(
         motion15.div,
         {
-          whileHover: { scale: 1.02 },
-          whileTap: { scale: 0.98 },
           transition: { duration: 0.1 },
           children: [
             /* @__PURE__ */ jsx84("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx84(

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.7.23",
+  "version": "1.7.25",
   "homepage": "https://main--68e80310a069c2f10b546ef3.chromatic.com/",
   "repository": {
     "type": "git",