@mlw-packages/react-components 1.8.9 → 1.8.10

package/dist/index.css

@@ -641,6 +641,10 @@ body {
   margin-left: auto;
   margin-right: auto;
 }
+.my-0\.5 {
+  margin-top: 0.125rem;
+  margin-bottom: 0.125rem;
+}
 .my-1 {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;

package/dist/index.js

@@ -1070,7 +1070,7 @@ var ProgressBase = React33__namespace.forwardRef(
                 ]
               }
             ),
-            showValue && valuePosition === "right" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-12 text-sm font-extrabold text-left", children: [
+            showValue && valuePosition === "right" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: " text-sm font-bold text-left", children: [
               Math.round(value || 0),
               "%"
             ] }),
@@ -3285,7 +3285,7 @@ function ModeToggleBase({
       DropDownMenuContentBase,
       {
         align: "end",
-        className: "border-border bg-popover text-popover-foreground min-w-[140px]",
+        className: "border-border bg-popover text-popover-foreground min-w-[140px] ",
         children: themes.map((theme) => {
           const isActive = currentTheme === theme;
           return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3293,8 +3293,8 @@ function ModeToggleBase({
             {
               onClick: () => toggleTheme(theme),
               className: cn(
-                "gap-3 transition-all duration-200",
-                isActive ? "bg-accent/80 text-accent-foreground border-l-2 border-primary font-medium pl-1.5" : "hover:bg-accent hover:text-accent-foreground"
+                "gap-2 transition-all duration-200",
+                isActive ? "bg-accent/80 text-accent-foreground border-l-2 border-primary font-medium pl-1.5 my-0.5" : "hover:bg-accent hover:text-accent-foreground"
               ),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(ThemeIcon, { theme }),
@@ -7526,18 +7526,17 @@ function ScrollColumn({ value, onChange, max, label }) {
       }
     }, 100);
   };
-  const handleMouseDown = (e) => {
+  const handleStart = (pageY) => {
     if (!containerRef.current) return;
     setIsDragging(true);
-    setStartY(e.pageY);
+    setStartY(pageY);
     setScrollTop(containerRef.current.scrollTop);
   };
-  const handleMouseMove = (e) => {
+  const handleMove = (pageY) => {
     if (!isDragging || !containerRef.current) return;
-    e.preventDefault();
-    containerRef.current.scrollTop = scrollTop + (startY - e.pageY) * 2;
+    containerRef.current.scrollTop = scrollTop + (startY - pageY) * 2;
   };
-  const handleMouseUp = () => {
+  const handleEnd = () => {
     if (!containerRef.current) return;
     setIsDragging(false);
     requestAnimationFrame(() => {
@@ -7549,8 +7548,32 @@ function ScrollColumn({ value, onChange, max, label }) {
       }
     });
   };
+  const handleMouseDown = (e) => {
+    handleStart(e.pageY);
+  };
+  const handleMouseMove = (e) => {
+    if (isDragging) {
+      e.preventDefault();
+      handleMove(e.pageY);
+    }
+  };
+  const handleMouseUp = () => {
+    handleEnd();
+  };
   const handleMouseLeave = () => {
-    if (isDragging) handleMouseUp();
+    if (isDragging) handleEnd();
+  };
+  const handleTouchStart = (e) => {
+    handleStart(e.touches[0].pageY);
+  };
+  const handleTouchMove = (e) => {
+    if (isDragging) {
+      if (e.cancelable) e.preventDefault();
+      handleMove(e.touches[0].pageY);
+    }
+  };
+  const handleTouchEnd = () => {
+    handleEnd();
   };
   const handleWheel = (e) => {
     e.stopPropagation();
@@ -7568,6 +7591,9 @@ function ScrollColumn({ value, onChange, max, label }) {
         onMouseMove: handleMouseMove,
         onMouseUp: handleMouseUp,
         onMouseLeave: handleMouseLeave,
+        onTouchStart: handleTouchStart,
+        onTouchMove: handleTouchMove,
+        onTouchEnd: handleTouchEnd,
         style: {
           height: `${containerHeight}px`,
           paddingTop: `${centerIndex * itemHeight}px`,

package/dist/index.mjs

@@ -1027,7 +1027,7 @@ var ProgressBase = React33.forwardRef(
                 ]
               }
             ),
-            showValue && valuePosition === "right" && /* @__PURE__ */ jsxs("div", { className: "w-12 text-sm font-extrabold text-left", children: [
+            showValue && valuePosition === "right" && /* @__PURE__ */ jsxs("div", { className: " text-sm font-bold text-left", children: [
               Math.round(value || 0),
               "%"
             ] }),
@@ -3242,7 +3242,7 @@ function ModeToggleBase({
       DropDownMenuContentBase,
       {
         align: "end",
-        className: "border-border bg-popover text-popover-foreground min-w-[140px]",
+        className: "border-border bg-popover text-popover-foreground min-w-[140px] ",
         children: themes.map((theme) => {
           const isActive = currentTheme === theme;
           return /* @__PURE__ */ jsxs(
@@ -3250,8 +3250,8 @@ function ModeToggleBase({
             {
               onClick: () => toggleTheme(theme),
               className: cn(
-                "gap-3 transition-all duration-200",
-                isActive ? "bg-accent/80 text-accent-foreground border-l-2 border-primary font-medium pl-1.5" : "hover:bg-accent hover:text-accent-foreground"
+                "gap-2 transition-all duration-200",
+                isActive ? "bg-accent/80 text-accent-foreground border-l-2 border-primary font-medium pl-1.5 my-0.5" : "hover:bg-accent hover:text-accent-foreground"
               ),
               children: [
                 /* @__PURE__ */ jsx(ThemeIcon, { theme }),
@@ -7483,18 +7483,17 @@ function ScrollColumn({ value, onChange, max, label }) {
       }
     }, 100);
   };
-  const handleMouseDown = (e) => {
+  const handleStart = (pageY) => {
     if (!containerRef.current) return;
     setIsDragging(true);
-    setStartY(e.pageY);
+    setStartY(pageY);
     setScrollTop(containerRef.current.scrollTop);
   };
-  const handleMouseMove = (e) => {
+  const handleMove = (pageY) => {
     if (!isDragging || !containerRef.current) return;
-    e.preventDefault();
-    containerRef.current.scrollTop = scrollTop + (startY - e.pageY) * 2;
+    containerRef.current.scrollTop = scrollTop + (startY - pageY) * 2;
   };
-  const handleMouseUp = () => {
+  const handleEnd = () => {
     if (!containerRef.current) return;
     setIsDragging(false);
     requestAnimationFrame(() => {
@@ -7506,8 +7505,32 @@ function ScrollColumn({ value, onChange, max, label }) {
       }
     });
   };
+  const handleMouseDown = (e) => {
+    handleStart(e.pageY);
+  };
+  const handleMouseMove = (e) => {
+    if (isDragging) {
+      e.preventDefault();
+      handleMove(e.pageY);
+    }
+  };
+  const handleMouseUp = () => {
+    handleEnd();
+  };
   const handleMouseLeave = () => {
-    if (isDragging) handleMouseUp();
+    if (isDragging) handleEnd();
+  };
+  const handleTouchStart = (e) => {
+    handleStart(e.touches[0].pageY);
+  };
+  const handleTouchMove = (e) => {
+    if (isDragging) {
+      if (e.cancelable) e.preventDefault();
+      handleMove(e.touches[0].pageY);
+    }
+  };
+  const handleTouchEnd = () => {
+    handleEnd();
   };
   const handleWheel = (e) => {
     e.stopPropagation();
@@ -7525,6 +7548,9 @@ function ScrollColumn({ value, onChange, max, label }) {
         onMouseMove: handleMouseMove,
         onMouseUp: handleMouseUp,
         onMouseLeave: handleMouseLeave,
+        onTouchStart: handleTouchStart,
+        onTouchMove: handleTouchMove,
+        onTouchEnd: handleTouchEnd,
         style: {
           height: `${containerHeight}px`,
           paddingTop: `${centerIndex * itemHeight}px`,

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@mlw-packages/react-components",
-  "developer": "Eduardo Ronchi de Araujo - Desenvolvidor de Sistemas Junio",
+  "developer": "Eduardo Junio",
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.8.9",
+  "version": "1.8.10",
   "homepage": "https://main--68e80310a069c2f10b546ef3.chromatic.com/",
   "repository": {
     "type": "git",
@@ -15,7 +15,7 @@
   "types": "dist/index.d.ts",
   "style": "dist/global.css",
   "files": [
-    "dist"
+    "dist"  
   ],
   "scripts": {
     "dev": "vite",