@mlw-packages/react-components 1.7.10 → 1.7.11

package/dist/index.css

@@ -4138,6 +4138,14 @@ body {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.focus\:ring-0:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow),
+    var(--tw-ring-shadow),
+    var(--tw-shadow, 0 0 #0000);
+}
 .focus\:ring-1:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -5929,6 +5937,11 @@ body {
 .\[\&\:last-child\>\*\]\:border-b-0:last-child > * {
   border-bottom-width: 0px;
 }
+.\[\&\:not\(\.no-active-animation\)\]\:active\:scale-95:active:not(.no-active-animation) {
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] > [role=checkbox] {
   --tw-translate-y: 2px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

package/dist/index.d.mts

@@ -133,18 +133,21 @@ interface SelectTestIds$1 {
     label?: string;
     item?: (value: string) => string;
 }
-interface DefaultSelectProps$1 extends ErrorMessageProps {
+interface DefaultSelectProps$1<T extends string> extends ErrorMessageProps {
+    selected: T | null;
+    onChange: (value: T) => void;
     placeholder?: string;
-    onChange: (value: string) => void;
     disabled?: boolean;
     className?: string;
+    label?: string;
+    labelClassname?: string;
 }
-interface SelectPropsWithItems$1<T extends string> extends DefaultSelectProps$1 {
+interface SelectPropsWithItems$1<T extends string> extends DefaultSelectProps$1<T> {
     items: SelectItem<T>[];
     groupItems?: never;
     testIds?: SelectTestIds$1;
 }
-interface SelectPropsWithGroupItems$1<T extends string> extends DefaultSelectProps$1 {
+interface SelectPropsWithGroupItems$1<T extends string> extends DefaultSelectProps$1<T> {
     items?: never;
     groupItems: {
         [key: string]: SelectItem<T>[];
@@ -152,11 +155,7 @@ interface SelectPropsWithGroupItems$1<T extends string> extends DefaultSelectPro
     testIds?: SelectTestIds$1;
 }
 type NewSelectProps<T extends string> = SelectPropsWithItems$1<T> | SelectPropsWithGroupItems$1<T>;
-declare function Select<T extends string>({ items, groupItems, placeholder, onChange, error, testIds, disabled, selected, label, labelClassname, className }: NewSelectProps<T> & {
-    selected?: T | null;
-    label?: string;
-    labelClassname?: string;
-}): react_jsx_runtime.JSX.Element;
+declare function Select<T extends string>({ items, groupItems, placeholder, onChange, error, testIds, disabled, selected, label, labelClassname, className, }: NewSelectProps<T>): react_jsx_runtime.JSX.Element;
 
 interface AvatarSelectItem<T extends string> {
     label: string;
@@ -288,11 +287,8 @@ interface ChartProps {
     showLabels?: boolean;
     labelMap?: Record<string, string>;
     valueFormatter?: valueFormatter;
-    /** Formata valores categóricos (ex.: "BANANA" -> "Banana") apenas para exibição */
     categoryFormatter?: (value: string | number) => string;
-    /** Label a ser exibido abaixo do eixo X */
     xAxisLabel?: string;
-    /** Label a ser exibido ao lado do eixo Y */
     yAxisLabel?: string;
     xAxis?: XAxisConfig$1 | string;
     enableHighlights?: boolean;
@@ -301,7 +297,6 @@ interface ChartProps {
     enableDraggableTooltips?: boolean;
     showTooltipTotal?: boolean;
     maxTooltips?: number;
-    /** Quando true, formata valores numéricos no formato pt-BR (ex: 00.000,00) */
     formatBR?: boolean;
 }
 declare const Chart: React__default.FC<ChartProps>;

package/dist/index.d.ts

@@ -133,18 +133,21 @@ interface SelectTestIds$1 {
     label?: string;
     item?: (value: string) => string;
 }
-interface DefaultSelectProps$1 extends ErrorMessageProps {
+interface DefaultSelectProps$1<T extends string> extends ErrorMessageProps {
+    selected: T | null;
+    onChange: (value: T) => void;
     placeholder?: string;
-    onChange: (value: string) => void;
     disabled?: boolean;
     className?: string;
+    label?: string;
+    labelClassname?: string;
 }
-interface SelectPropsWithItems$1<T extends string> extends DefaultSelectProps$1 {
+interface SelectPropsWithItems$1<T extends string> extends DefaultSelectProps$1<T> {
     items: SelectItem<T>[];
     groupItems?: never;
     testIds?: SelectTestIds$1;
 }
-interface SelectPropsWithGroupItems$1<T extends string> extends DefaultSelectProps$1 {
+interface SelectPropsWithGroupItems$1<T extends string> extends DefaultSelectProps$1<T> {
     items?: never;
     groupItems: {
         [key: string]: SelectItem<T>[];
@@ -152,11 +155,7 @@ interface SelectPropsWithGroupItems$1<T extends string> extends DefaultSelectPro
     testIds?: SelectTestIds$1;
 }
 type NewSelectProps<T extends string> = SelectPropsWithItems$1<T> | SelectPropsWithGroupItems$1<T>;
-declare function Select<T extends string>({ items, groupItems, placeholder, onChange, error, testIds, disabled, selected, label, labelClassname, className }: NewSelectProps<T> & {
-    selected?: T | null;
-    label?: string;
-    labelClassname?: string;
-}): react_jsx_runtime.JSX.Element;
+declare function Select<T extends string>({ items, groupItems, placeholder, onChange, error, testIds, disabled, selected, label, labelClassname, className, }: NewSelectProps<T>): react_jsx_runtime.JSX.Element;
 
 interface AvatarSelectItem<T extends string> {
     label: string;
@@ -288,11 +287,8 @@ interface ChartProps {
     showLabels?: boolean;
     labelMap?: Record<string, string>;
     valueFormatter?: valueFormatter;
-    /** Formata valores categóricos (ex.: "BANANA" -> "Banana") apenas para exibição */
     categoryFormatter?: (value: string | number) => string;
-    /** Label a ser exibido abaixo do eixo X */
     xAxisLabel?: string;
-    /** Label a ser exibido ao lado do eixo Y */
     yAxisLabel?: string;
     xAxis?: XAxisConfig$1 | string;
     enableHighlights?: boolean;
@@ -301,7 +297,6 @@ interface ChartProps {
     enableDraggableTooltips?: boolean;
     showTooltipTotal?: boolean;
     maxTooltips?: number;
-    /** Quando true, formata valores numéricos no formato pt-BR (ex: 00.000,00) */
     formatBR?: boolean;
 }
 declare const Chart: React__default.FC<ChartProps>;

package/dist/index.js

@@ -828,7 +828,7 @@ function cn(...inputs) {
 var import_react = require("@phosphor-icons/react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var buttonVariantsBase = (0, import_class_variance_authority.cva)(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive active:scale-95",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive [&:not(.no-active-animation)]:active:scale-95",
   {
     variants: {
       variant: {
@@ -1063,7 +1063,7 @@ var LabelBase_default = LabelBase;
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var ErrorMessage = ({ error }) => {
   if (!error) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-sm text-destructive mt-1", children: error });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-sm text-destructive", children: error });
 };
 var ErrorMessage_default = ErrorMessage;
 
@@ -1447,7 +1447,7 @@ function Combobox({
     },
     [selected, onChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cn("flex flex-col gap-1 w-full min-w-[150px]", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cn("flex flex-col w-full min-w-[150px]", className), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LabelBase_default, { className: labelClassname, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       ComboboxBase,
@@ -2129,7 +2129,7 @@ function Select({
   className
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { "data-testid": testIds.root ?? "select-root", children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: cn("mb-1 block text-sm font-medium", labelClassname), children: label }) : null,
+    label ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: cn("block text-sm font-medium", labelClassname), children: label }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       SelectBase,
       {
@@ -10380,60 +10380,64 @@ function CalendarBase2({
         "rounded-md border bg-background p-3 overflow-hidden flex flex-col",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "relative flex-1 flex flex-col min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_framer_motion14.AnimatePresence, { initial: false, mode: "wait", custom: direction, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "relative flex-1 flex flex-col min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_framer_motion14.AnimatePresence, { initial: false, mode: "wait", custom: direction, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
         "div",
         {
           className: "w-full h-full flex flex-col",
-          children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-            import_react_day_picker2.DayPicker,
-            {
-              showOutsideDays,
-              month,
-              onMonthChange: handleMonthChange,
-              className: "w-full h-full flex flex-col",
-              classNames: {
-                months: "flex flex-col sm:flex-row gap-3 sm:gap-4 w-full",
-                month: "flex-1 min-w-0",
-                caption: "flex items-center justify-between gap-2 pr-1 min-h-[2.25rem] mb-2",
-                caption_label: "text-[clamp(0.85rem,1.4vw,1.125rem)] sm:text-[clamp(0.9rem,1.6vw,1.125rem)] font-semibold capitalize text-left",
-                nav: "flex items-center gap-2",
-                nav_button: cn(
-                  buttonVariantsBase({ variant: "outline" }),
-                  "h-8 w-8 sm:h-9 sm:w-9 md:h-10 md:w-10 flex items-center justify-center p-0 rounded-md transition-transform duration-150 ease-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/40 active:scale-95"
-                ),
-                nav_button_previous: "",
-                nav_button_next: "",
-                table: "w-full min-w-0 flex-1 grid grid-rows-[auto_1fr] gap-2",
-                head_row: "grid grid-cols-7 gap-1 mb-1",
-                head_cell: "text-muted-foreground rounded-md font-semibold text-[clamp(0.575rem,1.2vw,0.75rem)] sm:text-[clamp(0.65rem,1.1vw,0.825rem)] text-center pb-1 uppercase tracking-wider",
-                row: "grid grid-cols-7 gap-1",
-                cell: cn(
-                  "min-w-0 h-9 sm:h-10 md:h-10 p-0 relative flex items-center justify-center",
-                  "[&:has([aria-selected].day-range-end)]:rounded-r-lg",
-                  "[&:has([aria-selected].day-range-start)]:rounded-l-lg",
-                  "[&:has([aria-selected].day-outside)]:bg-muted/50",
-                  "[&:has([aria-selected])]:bg-muted"
-                ),
-                day: cn(
-                  buttonVariantsBase({ variant: "ghost" }),
-                  "w-full h-full p-0 m-0 flex items-center justify-center text-[clamp(0.775rem,1.2vw,0.95rem)] sm:text-sm",
-                  "aria-selected:opacity-100 hover:bg-muted transition-all duration-150 ease-out active:scale-95"
-                ),
-                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: "text-muted-foreground/40 opacity-60 aria-selected:bg-muted/50 aria-selected:text-foreground",
-                day_disabled: "text-muted-foreground/30 opacity-40 cursor-not-allowed",
-                day_range_middle: "aria-selected:bg-muted aria-selected:text-foreground",
-                day_hidden: "invisible",
-                ...classNames
-              },
-              components: {
-                IconLeft: () => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react41.CaretLeftIcon, { className: "h-4 w-4" }),
-                IconRight: () => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react41.CaretRightIcon, { className: "h-4 w-4" })
-              },
-              ...props
-            }
-          )
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "flex items-center justify-end mb-2 -mt-1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+              import_react_day_picker2.DayPicker,
+              {
+                showOutsideDays,
+                month,
+                onMonthChange: handleMonthChange,
+                className: "w-full h-full flex flex-col",
+                classNames: {
+                  months: "flex flex-col sm:flex-row gap-3 sm:gap-4 w-full",
+                  month: "flex-1 min-w-0",
+                  caption: "flex items-center justify-between gap-2 pr-1 min-h-[2.25rem] mb-2",
+                  caption_label: "text-[clamp(0.85rem,1.4vw,1.125rem)] sm:text-[clamp(0.9rem,1.6vw,1.125rem)] font-semibold capitalize text-left",
+                  nav: "flex items-center gap-2",
+                  nav_button: cn(
+                    buttonVariantsBase({ variant: "outline" }),
+                    "h-8 w-8 sm:h-9 sm:w-9 md:h-10 md:w-10 flex items-center justify-center p-0 rounded-md transition-transform duration-150 ease-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/40 active:scale-95"
+                  ),
+                  nav_button_previous: "",
+                  nav_button_next: "",
+                  table: "w-full min-w-0 flex-1 grid grid-rows-[auto_1fr] gap-2",
+                  head_row: "grid grid-cols-7 gap-1 mb-1",
+                  head_cell: "text-muted-foreground rounded-md font-semibold text-[clamp(0.575rem,1.2vw,0.75rem)] sm:text-[clamp(0.65rem,1.1vw,0.825rem)] text-center pb-1 uppercase tracking-wider",
+                  row: "grid grid-cols-7 gap-1",
+                  cell: cn(
+                    "min-w-0 h-9 sm:h-10 md:h-10 p-0 relative flex items-center justify-center",
+                    "[&:has([aria-selected].day-range-end)]:rounded-r-lg",
+                    "[&:has([aria-selected].day-range-start)]:rounded-l-lg",
+                    "[&:has([aria-selected].day-outside)]:bg-muted/50",
+                    "[&:has([aria-selected])]:bg-muted"
+                  ),
+                  day: cn(
+                    buttonVariantsBase({ variant: "ghost" }),
+                    "w-full h-full p-0 m-0 flex items-center justify-center text-[clamp(0.775rem,1.2vw,0.95rem)] sm:text-sm",
+                    "aria-selected:opacity-100 hover:bg-muted transition-all duration-150 ease-out active:scale-95"
+                  ),
+                  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: "text-muted-foreground/40 opacity-60 aria-selected:bg-muted/50 aria-selected:text-foreground",
+                  day_disabled: "text-muted-foreground/30 opacity-40 cursor-not-allowed",
+                  day_range_middle: "aria-selected:bg-muted aria-selected:text-foreground",
+                  day_hidden: "invisible",
+                  button: "p-0 m-0  border-0 outline-none focus:ring-0",
+                  ...classNames
+                },
+                components: {
+                  IconLeft: () => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react41.CaretLeftIcon, { className: "h-4 w-4" }),
+                  IconRight: () => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react41.CaretRightIcon, { className: "h-4 w-4" })
+                },
+                ...props
+              }
+            )
+          ]
         },
         month.toISOString()
       ) }) })
@@ -10955,7 +10959,7 @@ function DateTimePicker({
             {
               variant: "outline",
               className: cn(
-                "w-full justify-start text-left min-w-0 overflow-hidden ",
+                "w-full justify-start text-left min-w-0 overflow-hidden no-active-animation",
                 !date && "text-muted-foreground"
               ),
               children: [
@@ -11000,7 +11004,7 @@ function DateTimePicker({
                 className: cn("w-full", hideTime && "border-0")
               }
             ),
-            !hideTime && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex justify-center w-full ", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+            !hideTime && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex justify-center w-full border-b border-r border-l", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
               PopoverBase,
               {
                 open: timePickerOpen,
@@ -11016,7 +11020,7 @@ function DateTimePicker({
                         "text-sm sm:text-base font-semibold w-full",
                         "bg-background hover:bg-accent",
                         "transition-all duration-200",
-                        "shadow-sm hover:shadow-md active:scale-[0.98]"
+                        "shadow-sm hover:shadow-md no-active-animation"
                       ),
                       children: [
                         /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react45.ClockIcon, { className: "text-primary flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5" }),
@@ -11051,7 +11055,7 @@ function DateTimePicker({
                             size: "sm",
                             variant: "destructive",
                             onClick: () => setTimePickerOpen(false),
-                            className: "w-full text-xs sm:text-sm min-h-[36px] sm:min-h-[40px]",
+                            className: "w-full text-xs sm:text-sm min-h-[36px] sm:min-h-[40px] no-active-animation",
                             children: "Fechar"
                           }
                         )
@@ -11060,7 +11064,16 @@ function DateTimePicker({
                   )
                 ]
               }
-            ) })
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+              ButtonBase,
+              {
+                variant: "destructive",
+                className: "rounded-t-none no-active-animation",
+                onClick: () => setOpen(false),
+                children: "Fechar"
+              }
+            )
           ] })
         }
       )

package/dist/index.mjs

@@ -495,7 +495,7 @@ function cn(...inputs) {
 import { CircleNotchIcon } from "@phosphor-icons/react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var buttonVariantsBase = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive active:scale-95",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive [&:not(.no-active-animation)]:active:scale-95",
   {
     variants: {
       variant: {
@@ -730,7 +730,7 @@ var LabelBase_default = LabelBase;
 import { jsx as jsx4 } from "react/jsx-runtime";
 var ErrorMessage = ({ error }) => {
   if (!error) return null;
-  return /* @__PURE__ */ jsx4("p", { className: "text-sm text-destructive mt-1", children: error });
+  return /* @__PURE__ */ jsx4("p", { className: "text-sm text-destructive", children: error });
 };
 var ErrorMessage_default = ErrorMessage;
 
@@ -1114,7 +1114,7 @@ function Combobox({
     },
     [selected, onChange]
   );
-  return /* @__PURE__ */ jsxs6("div", { className: cn("flex flex-col gap-1 w-full min-w-[150px]", className), children: [
+  return /* @__PURE__ */ jsxs6("div", { className: cn("flex flex-col w-full min-w-[150px]", className), children: [
     label && /* @__PURE__ */ jsx9(LabelBase_default, { className: labelClassname, children: label }),
     /* @__PURE__ */ jsx9(
       ComboboxBase,
@@ -1796,7 +1796,7 @@ function Select({
   className
 }) {
   return /* @__PURE__ */ jsxs13("div", { "data-testid": testIds.root ?? "select-root", children: [
-    label ? /* @__PURE__ */ jsx18("label", { className: cn("mb-1 block text-sm font-medium", labelClassname), children: label }) : null,
+    label ? /* @__PURE__ */ jsx18("label", { className: cn("block text-sm font-medium", labelClassname), children: label }) : null,
     /* @__PURE__ */ jsxs13(
       SelectBase,
       {
@@ -10149,60 +10149,64 @@ function CalendarBase2({
         "rounded-md border bg-background p-3 overflow-hidden flex flex-col",
         className
       ),
-      children: /* @__PURE__ */ jsx63("div", { className: "relative flex-1 flex flex-col min-h-0", children: /* @__PURE__ */ jsx63(AnimatePresence9, { initial: false, mode: "wait", custom: direction, children: /* @__PURE__ */ jsx63(
+      children: /* @__PURE__ */ jsx63("div", { className: "relative flex-1 flex flex-col min-h-0", children: /* @__PURE__ */ jsx63(AnimatePresence9, { initial: false, mode: "wait", custom: direction, children: /* @__PURE__ */ jsxs46(
         "div",
         {
           className: "w-full h-full flex flex-col",
-          children: /* @__PURE__ */ jsx63(
-            DayPicker2,
-            {
-              showOutsideDays,
-              month,
-              onMonthChange: handleMonthChange,
-              className: "w-full h-full flex flex-col",
-              classNames: {
-                months: "flex flex-col sm:flex-row gap-3 sm:gap-4 w-full",
-                month: "flex-1 min-w-0",
-                caption: "flex items-center justify-between gap-2 pr-1 min-h-[2.25rem] mb-2",
-                caption_label: "text-[clamp(0.85rem,1.4vw,1.125rem)] sm:text-[clamp(0.9rem,1.6vw,1.125rem)] font-semibold capitalize text-left",
-                nav: "flex items-center gap-2",
-                nav_button: cn(
-                  buttonVariantsBase({ variant: "outline" }),
-                  "h-8 w-8 sm:h-9 sm:w-9 md:h-10 md:w-10 flex items-center justify-center p-0 rounded-md transition-transform duration-150 ease-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/40 active:scale-95"
-                ),
-                nav_button_previous: "",
-                nav_button_next: "",
-                table: "w-full min-w-0 flex-1 grid grid-rows-[auto_1fr] gap-2",
-                head_row: "grid grid-cols-7 gap-1 mb-1",
-                head_cell: "text-muted-foreground rounded-md font-semibold text-[clamp(0.575rem,1.2vw,0.75rem)] sm:text-[clamp(0.65rem,1.1vw,0.825rem)] text-center pb-1 uppercase tracking-wider",
-                row: "grid grid-cols-7 gap-1",
-                cell: cn(
-                  "min-w-0 h-9 sm:h-10 md:h-10 p-0 relative flex items-center justify-center",
-                  "[&:has([aria-selected].day-range-end)]:rounded-r-lg",
-                  "[&:has([aria-selected].day-range-start)]:rounded-l-lg",
-                  "[&:has([aria-selected].day-outside)]:bg-muted/50",
-                  "[&:has([aria-selected])]:bg-muted"
-                ),
-                day: cn(
-                  buttonVariantsBase({ variant: "ghost" }),
-                  "w-full h-full p-0 m-0 flex items-center justify-center text-[clamp(0.775rem,1.2vw,0.95rem)] sm:text-sm",
-                  "aria-selected:opacity-100 hover:bg-muted transition-all duration-150 ease-out active:scale-95"
-                ),
-                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: "text-muted-foreground/40 opacity-60 aria-selected:bg-muted/50 aria-selected:text-foreground",
-                day_disabled: "text-muted-foreground/30 opacity-40 cursor-not-allowed",
-                day_range_middle: "aria-selected:bg-muted aria-selected:text-foreground",
-                day_hidden: "invisible",
-                ...classNames
-              },
-              components: {
-                IconLeft: () => /* @__PURE__ */ jsx63(CaretLeftIcon2, { className: "h-4 w-4" }),
-                IconRight: () => /* @__PURE__ */ jsx63(CaretRightIcon4, { className: "h-4 w-4" })
-              },
-              ...props
-            }
-          )
+          children: [
+            /* @__PURE__ */ jsx63("div", { className: "flex items-center justify-end mb-2 -mt-1" }),
+            /* @__PURE__ */ jsx63(
+              DayPicker2,
+              {
+                showOutsideDays,
+                month,
+                onMonthChange: handleMonthChange,
+                className: "w-full h-full flex flex-col",
+                classNames: {
+                  months: "flex flex-col sm:flex-row gap-3 sm:gap-4 w-full",
+                  month: "flex-1 min-w-0",
+                  caption: "flex items-center justify-between gap-2 pr-1 min-h-[2.25rem] mb-2",
+                  caption_label: "text-[clamp(0.85rem,1.4vw,1.125rem)] sm:text-[clamp(0.9rem,1.6vw,1.125rem)] font-semibold capitalize text-left",
+                  nav: "flex items-center gap-2",
+                  nav_button: cn(
+                    buttonVariantsBase({ variant: "outline" }),
+                    "h-8 w-8 sm:h-9 sm:w-9 md:h-10 md:w-10 flex items-center justify-center p-0 rounded-md transition-transform duration-150 ease-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/40 active:scale-95"
+                  ),
+                  nav_button_previous: "",
+                  nav_button_next: "",
+                  table: "w-full min-w-0 flex-1 grid grid-rows-[auto_1fr] gap-2",
+                  head_row: "grid grid-cols-7 gap-1 mb-1",
+                  head_cell: "text-muted-foreground rounded-md font-semibold text-[clamp(0.575rem,1.2vw,0.75rem)] sm:text-[clamp(0.65rem,1.1vw,0.825rem)] text-center pb-1 uppercase tracking-wider",
+                  row: "grid grid-cols-7 gap-1",
+                  cell: cn(
+                    "min-w-0 h-9 sm:h-10 md:h-10 p-0 relative flex items-center justify-center",
+                    "[&:has([aria-selected].day-range-end)]:rounded-r-lg",
+                    "[&:has([aria-selected].day-range-start)]:rounded-l-lg",
+                    "[&:has([aria-selected].day-outside)]:bg-muted/50",
+                    "[&:has([aria-selected])]:bg-muted"
+                  ),
+                  day: cn(
+                    buttonVariantsBase({ variant: "ghost" }),
+                    "w-full h-full p-0 m-0 flex items-center justify-center text-[clamp(0.775rem,1.2vw,0.95rem)] sm:text-sm",
+                    "aria-selected:opacity-100 hover:bg-muted transition-all duration-150 ease-out active:scale-95"
+                  ),
+                  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: "text-muted-foreground/40 opacity-60 aria-selected:bg-muted/50 aria-selected:text-foreground",
+                  day_disabled: "text-muted-foreground/30 opacity-40 cursor-not-allowed",
+                  day_range_middle: "aria-selected:bg-muted aria-selected:text-foreground",
+                  day_hidden: "invisible",
+                  button: "p-0 m-0  border-0 outline-none focus:ring-0",
+                  ...classNames
+                },
+                components: {
+                  IconLeft: () => /* @__PURE__ */ jsx63(CaretLeftIcon2, { className: "h-4 w-4" }),
+                  IconRight: () => /* @__PURE__ */ jsx63(CaretRightIcon4, { className: "h-4 w-4" })
+                },
+                ...props
+              }
+            )
+          ]
         },
         month.toISOString()
       ) }) })
@@ -10724,7 +10728,7 @@ function DateTimePicker({
             {
               variant: "outline",
               className: cn(
-                "w-full justify-start text-left min-w-0 overflow-hidden ",
+                "w-full justify-start text-left min-w-0 overflow-hidden no-active-animation",
                 !date && "text-muted-foreground"
               ),
               children: [
@@ -10769,7 +10773,7 @@ function DateTimePicker({
                 className: cn("w-full", hideTime && "border-0")
               }
             ),
-            !hideTime && /* @__PURE__ */ jsx66("div", { className: "flex justify-center w-full ", children: /* @__PURE__ */ jsxs49(
+            !hideTime && /* @__PURE__ */ jsx66("div", { className: "flex justify-center w-full border-b border-r border-l", children: /* @__PURE__ */ jsxs49(
               PopoverBase,
               {
                 open: timePickerOpen,
@@ -10785,7 +10789,7 @@ function DateTimePicker({
                         "text-sm sm:text-base font-semibold w-full",
                         "bg-background hover:bg-accent",
                         "transition-all duration-200",
-                        "shadow-sm hover:shadow-md active:scale-[0.98]"
+                        "shadow-sm hover:shadow-md no-active-animation"
                       ),
                       children: [
                         /* @__PURE__ */ jsx66(ClockIcon, { className: "text-primary flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5" }),
@@ -10820,7 +10824,7 @@ function DateTimePicker({
                             size: "sm",
                             variant: "destructive",
                             onClick: () => setTimePickerOpen(false),
-                            className: "w-full text-xs sm:text-sm min-h-[36px] sm:min-h-[40px]",
+                            className: "w-full text-xs sm:text-sm min-h-[36px] sm:min-h-[40px] no-active-animation",
                             children: "Fechar"
                           }
                         )
@@ -10829,7 +10833,16 @@ function DateTimePicker({
                   )
                 ]
               }
-            ) })
+            ) }),
+            /* @__PURE__ */ jsx66(
+              ButtonBase,
+              {
+                variant: "destructive",
+                className: "rounded-t-none no-active-animation",
+                onClick: () => setOpen(false),
+                children: "Fechar"
+              }
+            )
           ] })
         }
       )

package/package.json

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