@mlw-packages/react-components 1.9.0 → 1.9.2

package/README.md

@@ -123,117 +123,6 @@ Use **Controls** para testar props dinamicamente e **Docs** para copiar snippets
 
 ---
 
-### Lista completa de componentes
-
-Abaixo está a lista completa de componentes :
-
-- AlertDialog
-
-- Avatar
-
-- Badge
-
-- BarChart
-
-- Breadcrumb
-
-- Button
-
-- Calendar
-
-- Card
-
-- Carousel
-
-- Chart
-
-- CheckBox
-
-- Collapsible
-
-- Combobox
-
-- ComboboxBase
-
-- Command
-
-- ContextMenu
-
-- DateTimePicker
-
-- DebouncedInput
-
-- DestructiveDialog
-
-- Dialog
-
-- DraggableTooltip
-
-- Drawer
-
-- DropDownMenu
-
-- FileUploader
-
-- Filter
-
-- Home
-
-- HoverCard
-
-- Input
-
-- Input-OTP
-
-- Label
-
-- LineChart
-
-- Loading
-
-- Modal
-
-- ModeToggle
-
-- MultiCombobox
-
-- NavigationMenu
-
-- PieChart
-
-- Popover
-
-- rogress
-
-- RangePicker
-
-- Scrollarea
-
-- Select
-
-- Separator
-
-- Sheet
-
-- Sidebar
-
-- Skeleton
-
-- Slider
-
-- Sonner
-
-- Switch
-
-- Table
-
-- Tabs
-
-- TextArea
-
-- Tooltip
-
----
 
 ## Desenvolvimento local
 

package/dist/index.css

@@ -1043,11 +1043,14 @@ body {
 .max-h-\[--radix-popover-content-available-height\] {
   max-height: var(--radix-popover-content-available-height);
 }
+.max-h-\[100dvh\] {
+  max-height: 100dvh;
+}
 .max-h-\[300px\] {
   max-height: 300px;
 }
-.max-h-\[65vh\] {
-  max-height: 65vh;
+.max-h-\[95vh\] {
+  max-height: 95vh;
 }
 .max-h-\[calc\(100dvh-2rem\)\] {
   max-height: calc(100dvh - 2rem);
@@ -1613,6 +1616,15 @@ body {
 .resize {
   resize: both;
 }
+.snap-y {
+  scroll-snap-type: y var(--tw-scroll-snap-strictness);
+}
+.snap-mandatory {
+  --tw-scroll-snap-strictness: mandatory;
+}
+.snap-center {
+  scroll-snap-align: center;
+}
 .list-inside {
   list-style-position: inside;
 }
@@ -1843,6 +1855,9 @@ body {
 .overflow-y-scroll {
   overflow-y: scroll;
 }
+.overscroll-contain {
+  overscroll-behavior: contain;
+}
 .scroll-smooth {
   scroll-behavior: smooth;
 }
@@ -3318,6 +3333,9 @@ body {
 .text-muted-foreground\/50 {
   color: hsl(var(--muted-foreground) / 0.5);
 }
+.text-muted-foreground\/60 {
+  color: hsl(var(--muted-foreground) / 0.6);
+}
 .text-muted-foreground\/70 {
   color: hsl(var(--muted-foreground) / 0.7);
 }
@@ -6193,9 +6211,6 @@ body {
   .sm\:w-12 {
     width: 3rem;
   }
-  .sm\:w-16 {
-    width: 4rem;
-  }
   .sm\:w-20 {
     width: 5rem;
   }

package/dist/index.js

@@ -670,7 +670,7 @@ var DialogOverlayBase = React33__namespace.forwardRef(({ className, testid: data
   {
     ref,
     className: cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  border-border",
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 ",
       className
     ),
     "data-testid": dataTestId,
@@ -688,7 +688,7 @@ var DialogContentBase = React33__namespace.forwardRef(
         {
           ref,
           className: cn(
-            "fixed left-[50%] top-[50%] z-50 w-[calc(100%-2rem)] max-w-lg grid translate-x-[-50%] translate-y-[-50%] gap-3 sm:gap-4 border bg-background p-4 sm:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-md sm:rounded-lg max-h-[calc(100dvh-2rem)] sm:max-h-[90dvh] overflow-auto border-border",
+            "fixed left-[50%] top-[50%] z-50 w-lg grid translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg max-h-[100dvh] overflow-auto rounded-md border-border",
             className
           ),
           "data-testid": dataTestId,
@@ -696,8 +696,8 @@ var DialogContentBase = React33__namespace.forwardRef(
           onWheel: userOnWheel,
           children: [
             children,
-            /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-2 top-2 sm:right-4 sm:top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground z-10 touch-manipulation p-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { className: "h-5 w-5 sm:h-4 sm:w-4 hover:text-red-500 font-extrabold" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-3 top-3 sm:right-4 sm:top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground z-10 touch-manipulation", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { className: "h-6 w-6 sm:h-4 sm:w-4 hover:text-red-500 font-extrabold" }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
             ] })
           ]
@@ -712,7 +712,7 @@ var DialogHeaderBase = React33__namespace.forwardRef(({ className, testid: dataT
   {
     ref,
     className: cn(
-      "flex flex-col space-y-1 sm:space-y-1.5 text-center sm:text-left pr-8 sm:pr-0",
+      "flex flex-col space-y-1.5 text-center sm:text-left",
       className
     ),
     "data-testid": dataTestId,
@@ -725,7 +725,7 @@ var DialogFooterBase = React33__namespace.forwardRef(({ className, testid: dataT
   {
     ref,
     className: cn(
-      "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:space-x-2 sm:gap-0",
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
       className
     ),
     "data-testid": dataTestId,
@@ -1315,15 +1315,27 @@ var toast = {
 };
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React33__namespace.useState(void 0);
+  const [isMobile, setIsMobile] = React33__namespace.useState(
+    void 0
+  );
   React33__namespace.useEffect(() => {
+    const checkIsMobile = () => {
+      const isTouch = window.matchMedia("(pointer: coarse)").matches || navigator.maxTouchPoints > 0;
+      const isSmallScreen = window.innerWidth < MOBILE_BREAKPOINT;
+      return isTouch || isSmallScreen;
+    };
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const touchMql = window.matchMedia("(pointer: coarse)");
     const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+      setIsMobile(checkIsMobile());
     };
     mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
+    touchMql.addEventListener("change", onChange);
+    setIsMobile(checkIsMobile());
+    return () => {
+      mql.removeEventListener("change", onChange);
+      touchMql.removeEventListener("change", onChange);
+    };
   }, []);
   return !!isMobile;
 }
@@ -7679,175 +7691,68 @@ function useScrollColumn({
 }) {
   const containerRef = React33.useRef(null);
   const items = getItems(max, step);
-  const [isDragging, setIsDragging] = React33.useState(false);
-  const [startY, setStartY] = React33.useState(0);
-  const [scrollTop, setScrollTop] = React33.useState(0);
   const scrollTimeoutRef = React33.useRef(null);
-  const isTouchRef = React33.useRef(false);
-  const velocityRef = React33.useRef(0);
-  const lastTouchY = React33.useRef(0);
-  const lastTouchTime = React33.useRef(0);
-  const momentumAnimationRef = React33.useRef(null);
+  const isScrollingRef = React33.useRef(false);
+  const [isDragging, setIsDragging] = React33.useState(false);
+  const startYRef = React33.useRef(0);
+  const startScrollRef = React33.useRef(0);
   const itemHeight = ITEM_HEIGHT;
   const centerIndex = CENTER_INDEX;
   const visibleItems = VISIBLE_ITEMS;
   const containerHeight = visibleItems * itemHeight;
   React33.useEffect(() => {
-    if (containerRef.current && !isDragging) {
-      requestAnimationFrame(() => {
-        if (containerRef.current) {
-          const index = Math.round(value / step);
-          const clampedIndex = Math.max(0, Math.min(items.length - 1, index));
-          const scrollPosition = clampedIndex * itemHeight;
-          containerRef.current.scrollTop = scrollPosition;
-        }
-      });
+    if (containerRef.current && !isScrollingRef.current) {
+      const index = Math.round(value / step);
+      const clampedIndex = Math.max(0, Math.min(items.length - 1, index));
+      const scrollPosition = clampedIndex * itemHeight;
+      containerRef.current.scrollTop = scrollPosition;
     }
-  }, [value, isDragging, itemHeight, step, items.length]);
+  }, [value, itemHeight, step, items.length]);
   React33.useEffect(() => {
-    const animationRef = momentumAnimationRef.current;
     return () => {
       if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
-      if (animationRef) {
-        cancelAnimationFrame(animationRef);
-      }
     };
   }, []);
-  const handleScroll = (e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    if (!containerRef.current || isDragging) return;
+  const handleScroll = () => {
+    if (!containerRef.current) return;
+    isScrollingRef.current = true;
     if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
     scrollTimeoutRef.current = setTimeout(() => {
       if (!containerRef.current) return;
       const newIndex = Math.round(containerRef.current.scrollTop / itemHeight);
       const newValue = items[newIndex];
-      if (newValue !== void 0) {
-        containerRef.current.scrollTop = newIndex * itemHeight;
-        if (newValue !== value) onChange(newValue);
+      if (newValue !== void 0 && newValue !== value) {
+        onChange(newValue);
       }
-    }, 100);
+      isScrollingRef.current = false;
+    }, 150);
   };
-  const handleStart = (pageY) => {
+  const handleMouseDown = (e) => {
     if (!containerRef.current) return;
-    if (momentumAnimationRef.current) {
-      cancelAnimationFrame(momentumAnimationRef.current);
-      momentumAnimationRef.current = null;
-    }
     setIsDragging(true);
-    setStartY(pageY);
-    setScrollTop(containerRef.current.scrollTop);
-    velocityRef.current = 0;
-    lastTouchY.current = pageY;
-    lastTouchTime.current = Date.now();
+    startYRef.current = e.clientY;
+    startScrollRef.current = containerRef.current.scrollTop;
+    e.preventDefault();
   };
-  const handleMove = (pageY) => {
+  const handleMouseMove = (e) => {
     if (!isDragging || !containerRef.current) return;
-    const now = Date.now();
-    const timeDelta = now - lastTouchTime.current;
-    if (timeDelta > 0) {
-      const delta = pageY - lastTouchY.current;
-      velocityRef.current = delta / timeDelta;
-    }
-    lastTouchY.current = pageY;
-    lastTouchTime.current = now;
-    const multiplier = isTouchRef.current ? 1 : 1;
-    containerRef.current.scrollTop = scrollTop + (startY - pageY) * multiplier;
+    const deltaY = startYRef.current - e.clientY;
+    containerRef.current.scrollTop = startScrollRef.current + deltaY;
   };
-  const handleEnd = () => {
-    if (!containerRef.current) return;
+  const handleMouseUp = () => {
     setIsDragging(false);
-    if (isTouchRef.current && Math.abs(velocityRef.current) > 0.1) {
-      let velocity = velocityRef.current * -30;
-      const friction = 0.92;
-      const minVelocity = 0.5;
-      const animate = () => {
-        if (!containerRef.current) return;
-        velocity *= friction;
-        if (Math.abs(velocity) < minVelocity) {
-          const newIndex = Math.round(
-            containerRef.current.scrollTop / itemHeight
-          );
-          const newValue = items[newIndex];
-          if (newValue !== void 0) {
-            const targetScroll = newIndex * itemHeight;
-            const currentScroll = containerRef.current.scrollTop;
-            const diff = targetScroll - currentScroll;
-            if (Math.abs(diff) > 0.5) {
-              containerRef.current.scrollTop += diff * 0.3;
-              momentumAnimationRef.current = requestAnimationFrame(animate);
-            } else {
-              containerRef.current.scrollTop = targetScroll;
-              onChange(newValue);
-              momentumAnimationRef.current = null;
-            }
-          }
-          return;
-        }
-        containerRef.current.scrollTop += velocity;
-        momentumAnimationRef.current = requestAnimationFrame(animate);
-      };
-      momentumAnimationRef.current = requestAnimationFrame(animate);
-    } else {
-      requestAnimationFrame(() => {
-        if (!containerRef.current) return;
-        const newIndex = Math.round(
-          containerRef.current.scrollTop / itemHeight
-        );
-        const newValue = items[newIndex];
-        if (newValue !== void 0) {
-          containerRef.current.scrollTop = newIndex * itemHeight;
-          onChange(newValue);
-        }
-      });
-    }
-  };
-  const handlers = {
-    onScroll: handleScroll,
-    onWheel: (e) => e.stopPropagation(),
-    onMouseDown: (e) => {
-      isTouchRef.current = false;
-      handleStart(e.pageY);
-    },
-    onMouseMove: (e) => {
-      if (isDragging) {
-        e.preventDefault();
-        handleMove(e.pageY);
-      }
-    },
-    onMouseUp: () => handleEnd(),
-    onMouseLeave: () => {
-      if (isDragging) handleEnd();
-    },
-    onTouchStart: (e) => {
-      isTouchRef.current = true;
-      handleStart(e.touches[0].pageY);
-    },
-    onTouchMove: (e) => {
-      if (isDragging) {
-        if (e.cancelable) e.preventDefault();
-        handleMove(e.touches[0].pageY);
-      }
-    },
-    onTouchEnd: () => {
-      isTouchRef.current = false;
-      handleEnd();
-    }
-  };
-  const scrollToIndex = (index) => {
-    if (!containerRef.current) return;
-    const clamped = Math.max(0, Math.min(items.length - 1, index));
-    containerRef.current.scrollTop = clamped * itemHeight;
   };
   return {
     items,
     containerRef,
-    isDragging,
     itemHeight,
     containerHeight,
     centerIndex,
-    handlers,
-    scrollToIndex
+    handleScroll,
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp,
+    isDragging
   };
 }
 function ScrollColumn({
@@ -7860,57 +7765,66 @@ function ScrollColumn({
   const {
     items,
     containerRef,
-    isDragging,
     itemHeight,
     containerHeight,
     centerIndex,
-    handlers
+    handleScroll,
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp,
+    isDragging
   } = useScrollColumn({ value, onChange, max, step });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground rounded-md font-semibold text-sm sm:text-sm text-center pb-2 uppercase tracking-wider", children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative w-20 sm:w-16"), children: /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref: containerRef,
-        className: "overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] touch-action-pan-y",
-        onScroll: handlers.onScroll,
-        onWheel: handlers.onWheel,
-        onMouseDown: handlers.onMouseDown,
-        onMouseMove: handlers.onMouseMove,
-        onMouseUp: handlers.onMouseUp,
-        onMouseLeave: handlers.onMouseLeave,
-        onTouchStart: handlers.onTouchStart,
-        onTouchMove: handlers.onTouchMove,
-        onTouchEnd: handlers.onTouchEnd,
-        style: {
-          height: `${containerHeight}px`,
-          paddingTop: `${centerIndex * itemHeight}px`,
-          paddingBottom: `${centerIndex * itemHeight}px`,
-          cursor: isDragging ? "grabbing" : ""
-        },
-        children: items.map((item, idx) => {
-          const isSelected = item === value;
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn(
-                "flex items-center justify-center select-none font-semibold tabular-nums transition-all duration-150",
-                isDragging ? "cursor-grabbing" : "",
-                isSelected ? "text-lg sm:text-xl text-foreground scale-110" : "text-sm sm:text-base text-muted-foreground opacity-60"
-              ),
-              style: { height: `${itemHeight}px` },
-              onClick: () => {
-                if (isDragging || !containerRef.current) return;
-                containerRef.current.scrollTop = idx * itemHeight;
-                onChange(item);
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground rounded-md font-semibold text-sm text-center pb-2 uppercase tracking-wider", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative w-20"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "absolute left-0 right-0 pointer-events-none bg-muted/50  rounded-md border border-border",
+          style: {
+            top: `${centerIndex * itemHeight}px`,
+            height: `${itemHeight}px`
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: containerRef,
+          onScroll: handleScroll,
+          onMouseDown: handleMouseDown,
+          onMouseMove: handleMouseMove,
+          onMouseUp: handleMouseUp,
+          onMouseLeave: handleMouseUp,
+          className: cn(
+            "overflow-y-scroll snap-y snap-mandatory [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] overscroll-contain",
+            isDragging && "cursor-grabbing"
+          ),
+          style: {
+            height: `${containerHeight}px`,
+            paddingTop: `${centerIndex * itemHeight}px`,
+            paddingBottom: `${centerIndex * itemHeight}px`,
+            cursor: isDragging ? "grabbing" : "grab"
+          },
+          children: items.map((item, idx) => {
+            const itemIndex = items.indexOf(value);
+            const isCentered = idx === itemIndex;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "snap-center flex items-center justify-center select-none font-bold tabular-nums transition-all duration-200",
+                  isCentered ? "text-2xl sm:text-xl text-foreground scale-110" : "text-base sm:text-sm text-muted-foreground/60"
+                ),
+                style: { height: `${itemHeight}px` },
+                children: item.toString().padStart(2, "0")
               },
-              children: item.toString().padStart(2, "0")
-            },
-            item
-          );
-        })
-      }
-    ) })
+              item
+            );
+          })
+        }
+      )
+    ] })
   ] });
 }
 function TimeScrollPicker({
@@ -7919,8 +7833,6 @@ function TimeScrollPicker({
   hideSeconds = false
 }) {
   const currentDate = date || /* @__PURE__ */ new Date();
-  const itemHeight = ITEM_HEIGHT;
-  const centerIndex = CENTER_INDEX;
   const handleTimeChange = (type, value) => {
     const newDate = new Date(currentDate);
     if (type === "hours") newDate.setHours(value);
@@ -7928,17 +7840,7 @@ function TimeScrollPicker({
     else newDate.setSeconds(value);
     setDate(newDate);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center gap-2 p-1.5 sm:p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative flex gap-2 sm:gap-3"), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "absolute left-0 right-0 pointer-events-none z-10 rounded-lg bg-primary/10 border border-primary/20",
-        style: {
-          top: `calc(1.85rem + ${centerIndex * itemHeight}px)`,
-          height: `${itemHeight}px`
-        }
-      }
-    ),
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center gap-2 p-1.5 sm:p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex gap-2 sm:gap-3", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       ScrollColumn,
       {
@@ -7946,7 +7848,7 @@ function TimeScrollPicker({
         onChange: (v) => handleTimeChange("hours", v),
         max: 24,
         label: "Hora",
-        hideSeconds
+        step: 1
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -7956,8 +7858,7 @@ function TimeScrollPicker({
         onChange: (v) => handleTimeChange("minutes", v),
         max: 60,
         step: 5,
-        label: "Min",
-        hideSeconds
+        label: "Min"
       }
     ),
     !hideSeconds && /* @__PURE__ */ jsxRuntime.jsx(
@@ -7967,7 +7868,7 @@ function TimeScrollPicker({
         onChange: (v) => handleTimeChange("seconds", v),
         max: 60,
         label: "Seg",
-        hideSeconds
+        step: 1
       }
     )
   ] }) });
@@ -8263,7 +8164,7 @@ function DateTimePicker({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage_default, { error }),
-      /* @__PURE__ */ jsxRuntime.jsx(DialogContentBase, { className: "p-0 max-h-[65vh] w-[calc(100vw-24px)] sm:w-[calc(100vw-32px)] overflow-hidden flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto flex-1 ", children: renderPickerContent() }) })
+      /* @__PURE__ */ jsxRuntime.jsx(DialogContentBase, { className: "p-0 max-h-[95vh] w-[calc(100vw-24px)] sm:w-[calc(100vw-32px)] overflow-hidden flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto flex-1", children: renderPickerContent() }) })
     ] }) : /* @__PURE__ */ jsxRuntime.jsxs(PopoverBase, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         PopoverTriggerBase,

package/dist/index.mjs

@@ -627,7 +627,7 @@ var DialogOverlayBase = React33.forwardRef(({ className, testid: dataTestId = "d
   {
     ref,
     className: cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  border-border",
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 ",
       className
     ),
     "data-testid": dataTestId,
@@ -645,7 +645,7 @@ var DialogContentBase = React33.forwardRef(
         {
           ref,
           className: cn(
-            "fixed left-[50%] top-[50%] z-50 w-[calc(100%-2rem)] max-w-lg grid translate-x-[-50%] translate-y-[-50%] gap-3 sm:gap-4 border bg-background p-4 sm:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-md sm:rounded-lg max-h-[calc(100dvh-2rem)] sm:max-h-[90dvh] overflow-auto border-border",
+            "fixed left-[50%] top-[50%] z-50 w-lg grid translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg max-h-[100dvh] overflow-auto rounded-md border-border",
             className
           ),
           "data-testid": dataTestId,
@@ -653,8 +653,8 @@ var DialogContentBase = React33.forwardRef(
           onWheel: userOnWheel,
           children: [
             children,
-            /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-2 top-2 sm:right-4 sm:top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground z-10 touch-manipulation p-1", children: [
-              /* @__PURE__ */ jsx(XIcon, { className: "h-5 w-5 sm:h-4 sm:w-4 hover:text-red-500 font-extrabold" }),
+            /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-3 top-3 sm:right-4 sm:top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground z-10 touch-manipulation", children: [
+              /* @__PURE__ */ jsx(XIcon, { className: "h-6 w-6 sm:h-4 sm:w-4 hover:text-red-500 font-extrabold" }),
               /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
             ] })
           ]
@@ -669,7 +669,7 @@ var DialogHeaderBase = React33.forwardRef(({ className, testid: dataTestId = "di
   {
     ref,
     className: cn(
-      "flex flex-col space-y-1 sm:space-y-1.5 text-center sm:text-left pr-8 sm:pr-0",
+      "flex flex-col space-y-1.5 text-center sm:text-left",
       className
     ),
     "data-testid": dataTestId,
@@ -682,7 +682,7 @@ var DialogFooterBase = React33.forwardRef(({ className, testid: dataTestId = "di
   {
     ref,
     className: cn(
-      "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:space-x-2 sm:gap-0",
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
       className
     ),
     "data-testid": dataTestId,
@@ -1272,15 +1272,27 @@ var toast = {
 };
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React33.useState(void 0);
+  const [isMobile, setIsMobile] = React33.useState(
+    void 0
+  );
   React33.useEffect(() => {
+    const checkIsMobile = () => {
+      const isTouch = window.matchMedia("(pointer: coarse)").matches || navigator.maxTouchPoints > 0;
+      const isSmallScreen = window.innerWidth < MOBILE_BREAKPOINT;
+      return isTouch || isSmallScreen;
+    };
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const touchMql = window.matchMedia("(pointer: coarse)");
     const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+      setIsMobile(checkIsMobile());
     };
     mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
+    touchMql.addEventListener("change", onChange);
+    setIsMobile(checkIsMobile());
+    return () => {
+      mql.removeEventListener("change", onChange);
+      touchMql.removeEventListener("change", onChange);
+    };
   }, []);
   return !!isMobile;
 }
@@ -7636,175 +7648,68 @@ function useScrollColumn({
 }) {
   const containerRef = useRef(null);
   const items = getItems(max, step);
-  const [isDragging, setIsDragging] = useState(false);
-  const [startY, setStartY] = useState(0);
-  const [scrollTop, setScrollTop] = useState(0);
   const scrollTimeoutRef = useRef(null);
-  const isTouchRef = useRef(false);
-  const velocityRef = useRef(0);
-  const lastTouchY = useRef(0);
-  const lastTouchTime = useRef(0);
-  const momentumAnimationRef = useRef(null);
+  const isScrollingRef = useRef(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const startYRef = useRef(0);
+  const startScrollRef = useRef(0);
   const itemHeight = ITEM_HEIGHT;
   const centerIndex = CENTER_INDEX;
   const visibleItems = VISIBLE_ITEMS;
   const containerHeight = visibleItems * itemHeight;
   useEffect(() => {
-    if (containerRef.current && !isDragging) {
-      requestAnimationFrame(() => {
-        if (containerRef.current) {
-          const index = Math.round(value / step);
-          const clampedIndex = Math.max(0, Math.min(items.length - 1, index));
-          const scrollPosition = clampedIndex * itemHeight;
-          containerRef.current.scrollTop = scrollPosition;
-        }
-      });
+    if (containerRef.current && !isScrollingRef.current) {
+      const index = Math.round(value / step);
+      const clampedIndex = Math.max(0, Math.min(items.length - 1, index));
+      const scrollPosition = clampedIndex * itemHeight;
+      containerRef.current.scrollTop = scrollPosition;
     }
-  }, [value, isDragging, itemHeight, step, items.length]);
+  }, [value, itemHeight, step, items.length]);
   useEffect(() => {
-    const animationRef = momentumAnimationRef.current;
     return () => {
       if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
-      if (animationRef) {
-        cancelAnimationFrame(animationRef);
-      }
     };
   }, []);
-  const handleScroll = (e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    if (!containerRef.current || isDragging) return;
+  const handleScroll = () => {
+    if (!containerRef.current) return;
+    isScrollingRef.current = true;
     if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
     scrollTimeoutRef.current = setTimeout(() => {
       if (!containerRef.current) return;
       const newIndex = Math.round(containerRef.current.scrollTop / itemHeight);
       const newValue = items[newIndex];
-      if (newValue !== void 0) {
-        containerRef.current.scrollTop = newIndex * itemHeight;
-        if (newValue !== value) onChange(newValue);
+      if (newValue !== void 0 && newValue !== value) {
+        onChange(newValue);
       }
-    }, 100);
+      isScrollingRef.current = false;
+    }, 150);
   };
-  const handleStart = (pageY) => {
+  const handleMouseDown = (e) => {
     if (!containerRef.current) return;
-    if (momentumAnimationRef.current) {
-      cancelAnimationFrame(momentumAnimationRef.current);
-      momentumAnimationRef.current = null;
-    }
     setIsDragging(true);
-    setStartY(pageY);
-    setScrollTop(containerRef.current.scrollTop);
-    velocityRef.current = 0;
-    lastTouchY.current = pageY;
-    lastTouchTime.current = Date.now();
+    startYRef.current = e.clientY;
+    startScrollRef.current = containerRef.current.scrollTop;
+    e.preventDefault();
   };
-  const handleMove = (pageY) => {
+  const handleMouseMove = (e) => {
     if (!isDragging || !containerRef.current) return;
-    const now = Date.now();
-    const timeDelta = now - lastTouchTime.current;
-    if (timeDelta > 0) {
-      const delta = pageY - lastTouchY.current;
-      velocityRef.current = delta / timeDelta;
-    }
-    lastTouchY.current = pageY;
-    lastTouchTime.current = now;
-    const multiplier = isTouchRef.current ? 1 : 1;
-    containerRef.current.scrollTop = scrollTop + (startY - pageY) * multiplier;
+    const deltaY = startYRef.current - e.clientY;
+    containerRef.current.scrollTop = startScrollRef.current + deltaY;
   };
-  const handleEnd = () => {
-    if (!containerRef.current) return;
+  const handleMouseUp = () => {
     setIsDragging(false);
-    if (isTouchRef.current && Math.abs(velocityRef.current) > 0.1) {
-      let velocity = velocityRef.current * -30;
-      const friction = 0.92;
-      const minVelocity = 0.5;
-      const animate = () => {
-        if (!containerRef.current) return;
-        velocity *= friction;
-        if (Math.abs(velocity) < minVelocity) {
-          const newIndex = Math.round(
-            containerRef.current.scrollTop / itemHeight
-          );
-          const newValue = items[newIndex];
-          if (newValue !== void 0) {
-            const targetScroll = newIndex * itemHeight;
-            const currentScroll = containerRef.current.scrollTop;
-            const diff = targetScroll - currentScroll;
-            if (Math.abs(diff) > 0.5) {
-              containerRef.current.scrollTop += diff * 0.3;
-              momentumAnimationRef.current = requestAnimationFrame(animate);
-            } else {
-              containerRef.current.scrollTop = targetScroll;
-              onChange(newValue);
-              momentumAnimationRef.current = null;
-            }
-          }
-          return;
-        }
-        containerRef.current.scrollTop += velocity;
-        momentumAnimationRef.current = requestAnimationFrame(animate);
-      };
-      momentumAnimationRef.current = requestAnimationFrame(animate);
-    } else {
-      requestAnimationFrame(() => {
-        if (!containerRef.current) return;
-        const newIndex = Math.round(
-          containerRef.current.scrollTop / itemHeight
-        );
-        const newValue = items[newIndex];
-        if (newValue !== void 0) {
-          containerRef.current.scrollTop = newIndex * itemHeight;
-          onChange(newValue);
-        }
-      });
-    }
-  };
-  const handlers = {
-    onScroll: handleScroll,
-    onWheel: (e) => e.stopPropagation(),
-    onMouseDown: (e) => {
-      isTouchRef.current = false;
-      handleStart(e.pageY);
-    },
-    onMouseMove: (e) => {
-      if (isDragging) {
-        e.preventDefault();
-        handleMove(e.pageY);
-      }
-    },
-    onMouseUp: () => handleEnd(),
-    onMouseLeave: () => {
-      if (isDragging) handleEnd();
-    },
-    onTouchStart: (e) => {
-      isTouchRef.current = true;
-      handleStart(e.touches[0].pageY);
-    },
-    onTouchMove: (e) => {
-      if (isDragging) {
-        if (e.cancelable) e.preventDefault();
-        handleMove(e.touches[0].pageY);
-      }
-    },
-    onTouchEnd: () => {
-      isTouchRef.current = false;
-      handleEnd();
-    }
-  };
-  const scrollToIndex = (index) => {
-    if (!containerRef.current) return;
-    const clamped = Math.max(0, Math.min(items.length - 1, index));
-    containerRef.current.scrollTop = clamped * itemHeight;
   };
   return {
     items,
     containerRef,
-    isDragging,
     itemHeight,
     containerHeight,
     centerIndex,
-    handlers,
-    scrollToIndex
+    handleScroll,
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp,
+    isDragging
   };
 }
 function ScrollColumn({
@@ -7817,57 +7722,66 @@ function ScrollColumn({
   const {
     items,
     containerRef,
-    isDragging,
     itemHeight,
     containerHeight,
     centerIndex,
-    handlers
+    handleScroll,
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp,
+    isDragging
   } = useScrollColumn({ value, onChange, max, step });
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
-    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground rounded-md font-semibold text-sm sm:text-sm text-center pb-2 uppercase tracking-wider", children: label }),
-    /* @__PURE__ */ jsx("div", { className: cn("relative w-20 sm:w-16"), children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: containerRef,
-        className: "overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] touch-action-pan-y",
-        onScroll: handlers.onScroll,
-        onWheel: handlers.onWheel,
-        onMouseDown: handlers.onMouseDown,
-        onMouseMove: handlers.onMouseMove,
-        onMouseUp: handlers.onMouseUp,
-        onMouseLeave: handlers.onMouseLeave,
-        onTouchStart: handlers.onTouchStart,
-        onTouchMove: handlers.onTouchMove,
-        onTouchEnd: handlers.onTouchEnd,
-        style: {
-          height: `${containerHeight}px`,
-          paddingTop: `${centerIndex * itemHeight}px`,
-          paddingBottom: `${centerIndex * itemHeight}px`,
-          cursor: isDragging ? "grabbing" : ""
-        },
-        children: items.map((item, idx) => {
-          const isSelected = item === value;
-          return /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "flex items-center justify-center select-none font-semibold tabular-nums transition-all duration-150",
-                isDragging ? "cursor-grabbing" : "",
-                isSelected ? "text-lg sm:text-xl text-foreground scale-110" : "text-sm sm:text-base text-muted-foreground opacity-60"
-              ),
-              style: { height: `${itemHeight}px` },
-              onClick: () => {
-                if (isDragging || !containerRef.current) return;
-                containerRef.current.scrollTop = idx * itemHeight;
-                onChange(item);
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground rounded-md font-semibold text-sm text-center pb-2 uppercase tracking-wider", children: label }),
+    /* @__PURE__ */ jsxs("div", { className: cn("relative w-20"), children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute left-0 right-0 pointer-events-none bg-muted/50  rounded-md border border-border",
+          style: {
+            top: `${centerIndex * itemHeight}px`,
+            height: `${itemHeight}px`
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: containerRef,
+          onScroll: handleScroll,
+          onMouseDown: handleMouseDown,
+          onMouseMove: handleMouseMove,
+          onMouseUp: handleMouseUp,
+          onMouseLeave: handleMouseUp,
+          className: cn(
+            "overflow-y-scroll snap-y snap-mandatory [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] overscroll-contain",
+            isDragging && "cursor-grabbing"
+          ),
+          style: {
+            height: `${containerHeight}px`,
+            paddingTop: `${centerIndex * itemHeight}px`,
+            paddingBottom: `${centerIndex * itemHeight}px`,
+            cursor: isDragging ? "grabbing" : "grab"
+          },
+          children: items.map((item, idx) => {
+            const itemIndex = items.indexOf(value);
+            const isCentered = idx === itemIndex;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "snap-center flex items-center justify-center select-none font-bold tabular-nums transition-all duration-200",
+                  isCentered ? "text-2xl sm:text-xl text-foreground scale-110" : "text-base sm:text-sm text-muted-foreground/60"
+                ),
+                style: { height: `${itemHeight}px` },
+                children: item.toString().padStart(2, "0")
               },
-              children: item.toString().padStart(2, "0")
-            },
-            item
-          );
-        })
-      }
-    ) })
+              item
+            );
+          })
+        }
+      )
+    ] })
   ] });
 }
 function TimeScrollPicker({
@@ -7876,8 +7790,6 @@ function TimeScrollPicker({
   hideSeconds = false
 }) {
   const currentDate = date || /* @__PURE__ */ new Date();
-  const itemHeight = ITEM_HEIGHT;
-  const centerIndex = CENTER_INDEX;
   const handleTimeChange = (type, value) => {
     const newDate = new Date(currentDate);
     if (type === "hours") newDate.setHours(value);
@@ -7885,17 +7797,7 @@ function TimeScrollPicker({
     else newDate.setSeconds(value);
     setDate(newDate);
   };
-  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-2 p-1.5 sm:p-4", children: /* @__PURE__ */ jsxs("div", { className: cn("relative flex gap-2 sm:gap-3"), children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "absolute left-0 right-0 pointer-events-none z-10 rounded-lg bg-primary/10 border border-primary/20",
-        style: {
-          top: `calc(1.85rem + ${centerIndex * itemHeight}px)`,
-          height: `${itemHeight}px`
-        }
-      }
-    ),
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-2 p-1.5 sm:p-4", children: /* @__PURE__ */ jsxs("div", { className: "relative flex gap-2 sm:gap-3", children: [
     /* @__PURE__ */ jsx(
       ScrollColumn,
       {
@@ -7903,7 +7805,7 @@ function TimeScrollPicker({
         onChange: (v) => handleTimeChange("hours", v),
         max: 24,
         label: "Hora",
-        hideSeconds
+        step: 1
       }
     ),
     /* @__PURE__ */ jsx(
@@ -7913,8 +7815,7 @@ function TimeScrollPicker({
         onChange: (v) => handleTimeChange("minutes", v),
         max: 60,
         step: 5,
-        label: "Min",
-        hideSeconds
+        label: "Min"
       }
     ),
     !hideSeconds && /* @__PURE__ */ jsx(
@@ -7924,7 +7825,7 @@ function TimeScrollPicker({
         onChange: (v) => handleTimeChange("seconds", v),
         max: 60,
         label: "Seg",
-        hideSeconds
+        step: 1
       }
     )
   ] }) });
@@ -8220,7 +8121,7 @@ function DateTimePicker({
         }
       ),
       /* @__PURE__ */ jsx(ErrorMessage_default, { error }),
-      /* @__PURE__ */ jsx(DialogContentBase, { className: "p-0 max-h-[65vh] w-[calc(100vw-24px)] sm:w-[calc(100vw-32px)] 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-[calc(100vw-24px)] sm:w-[calc(100vw-32px)] 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,

package/package.json

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