@mlw-packages/react-components 1.9.0 → 1.9.1

package/dist/index.css

@@ -1043,6 +1043,9 @@ 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;
 }
@@ -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;
 }
@@ -2701,6 +2716,9 @@ body {
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
+.bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
 .from-background {
   --tw-gradient-from: hsl(var(--background)) var(--tw-gradient-from-position);
   --tw-gradient-to: hsl(var(--background) / 0) var(--tw-gradient-to-position);
@@ -2736,6 +2754,13 @@ body {
   --tw-gradient-to: hsl(var(--ring) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.via-background\/80 {
+  --tw-gradient-to: hsl(var(--background) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops:
+    var(--tw-gradient-from),
+    hsl(var(--background) / 0.8) var(--tw-gradient-via-position),
+    var(--tw-gradient-to);
+}
 .via-ring\/10 {
   --tw-gradient-to: hsl(var(--ring) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops:
@@ -2761,6 +2786,9 @@ body {
 .to-ring\/20 {
   --tw-gradient-to: hsl(var(--ring) / 0.2) var(--tw-gradient-to-position);
 }
+.to-transparent {
+  --tw-gradient-to: transparent var(--tw-gradient-to-position);
+}
 .bg-clip-text {
   -webkit-background-clip: text;
   background-clip: text;
@@ -3318,6 +3346,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 +6224,6 @@ body {
   .sm\:w-12 {
     width: 3rem;
   }
-  .sm\:w-16 {
-    width: 4rem;
-  }
   .sm\:w-20 {
     width: 5rem;
   }

package/dist/index.js

@@ -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,
@@ -7679,175 +7679,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 +7753,68 @@ 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-24 sm:w-20"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 h-16 bg-gradient-to-b from-background via-background/80 to-transparent pointer-events-none z-20" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-background via-background/80 to-transparent pointer-events-none z-20" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "absolute left-0 right-0 pointer-events-none bg-muted/50 backdrop-blur-sm 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 +7823,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 +7830,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 +7838,7 @@ function TimeScrollPicker({
         onChange: (v) => handleTimeChange("hours", v),
         max: 24,
         label: "Hora",
-        hideSeconds
+        step: 1
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -7956,8 +7848,7 @@ function TimeScrollPicker({
         onChange: (v) => handleTimeChange("minutes", v),
         max: 60,
         step: 5,
-        label: "Min",
-        hideSeconds
+        label: "Min"
       }
     ),
     !hideSeconds && /* @__PURE__ */ jsxRuntime.jsx(
@@ -7967,7 +7858,7 @@ function TimeScrollPicker({
         onChange: (v) => handleTimeChange("seconds", v),
         max: 60,
         label: "Seg",
-        hideSeconds
+        step: 1
       }
     )
   ] }) });
@@ -8263,7 +8154,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-[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.jsxs(PopoverBase, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         PopoverTriggerBase,

package/dist/index.mjs

@@ -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,
@@ -7636,175 +7636,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 +7710,68 @@ 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-24 sm:w-20"), children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 h-16 bg-gradient-to-b from-background via-background/80 to-transparent pointer-events-none z-20" }),
+      /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-background via-background/80 to-transparent pointer-events-none z-20" }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute left-0 right-0 pointer-events-none bg-muted/50 backdrop-blur-sm 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 +7780,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 +7787,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 +7795,7 @@ function TimeScrollPicker({
         onChange: (v) => handleTimeChange("hours", v),
         max: 24,
         label: "Hora",
-        hideSeconds
+        step: 1
       }
     ),
     /* @__PURE__ */ jsx(
@@ -7913,8 +7805,7 @@ function TimeScrollPicker({
         onChange: (v) => handleTimeChange("minutes", v),
         max: 60,
         step: 5,
-        label: "Min",
-        hideSeconds
+        label: "Min"
       }
     ),
     !hideSeconds && /* @__PURE__ */ jsx(
@@ -7924,7 +7815,7 @@ function TimeScrollPicker({
         onChange: (v) => handleTimeChange("seconds", v),
         max: 60,
         label: "Seg",
-        hideSeconds
+        step: 1
       }
     )
   ] }) });
@@ -8220,7 +8111,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-[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__ */ 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.1",
   "homepage": "https://main--68e80310a069c2f10b546ef3.chromatic.com/",
   "repository": {
     "type": "git",