@doscientos/ui 0.1.16 → 0.1.17

package/dist/index.d.cts

@@ -519,18 +519,27 @@ declare function SubmitButton({ pendingLabel, loading, children, isDisabled, siz
 declare const switchSizes: {
     readonly sm: {
         readonly control: "h-4 w-[1.875rem] p-0.5";
-        readonly thumb: "h-3 w-4";
-        readonly offset: "0.625rem";
+        readonly thumb: "h-3";
+        readonly idleWidth: "0.75rem";
+        readonly activeWidth: "1rem";
+        readonly selectedOffset: "0.875rem";
+        readonly activeSelectedOffset: "0.625rem";
     };
     readonly md: {
         readonly control: "h-5 w-9 p-0.5";
-        readonly thumb: "h-4 w-5";
-        readonly offset: "0.75rem";
+        readonly thumb: "h-4";
+        readonly idleWidth: "1rem";
+        readonly activeWidth: "1.25rem";
+        readonly selectedOffset: "1rem";
+        readonly activeSelectedOffset: "0.75rem";
     };
     readonly lg: {
         readonly control: "h-6 w-11 p-0.5";
-        readonly thumb: "h-5 w-6";
-        readonly offset: "1rem";
+        readonly thumb: "h-5";
+        readonly idleWidth: "1.25rem";
+        readonly activeWidth: "1.5rem";
+        readonly selectedOffset: "1.25rem";
+        readonly activeSelectedOffset: "1rem";
     };
 };
 type SwitchProps = Omit<SwitchProps$1, "className"> & {

package/dist/index.d.ts

@@ -519,18 +519,27 @@ declare function SubmitButton({ pendingLabel, loading, children, isDisabled, siz
 declare const switchSizes: {
     readonly sm: {
         readonly control: "h-4 w-[1.875rem] p-0.5";
-        readonly thumb: "h-3 w-4";
-        readonly offset: "0.625rem";
+        readonly thumb: "h-3";
+        readonly idleWidth: "0.75rem";
+        readonly activeWidth: "1rem";
+        readonly selectedOffset: "0.875rem";
+        readonly activeSelectedOffset: "0.625rem";
     };
     readonly md: {
         readonly control: "h-5 w-9 p-0.5";
-        readonly thumb: "h-4 w-5";
-        readonly offset: "0.75rem";
+        readonly thumb: "h-4";
+        readonly idleWidth: "1rem";
+        readonly activeWidth: "1.25rem";
+        readonly selectedOffset: "1rem";
+        readonly activeSelectedOffset: "0.75rem";
     };
     readonly lg: {
         readonly control: "h-6 w-11 p-0.5";
-        readonly thumb: "h-5 w-6";
-        readonly offset: "1rem";
+        readonly thumb: "h-5";
+        readonly idleWidth: "1.25rem";
+        readonly activeWidth: "1.5rem";
+        readonly selectedOffset: "1.25rem";
+        readonly activeSelectedOffset: "1rem";
     };
 };
 type SwitchProps = Omit<SwitchProps$1, "className"> & {

package/dist/index.js

@@ -2455,18 +2455,27 @@ import { Fragment as Fragment10, jsx as jsx42, jsxs as jsxs20 } from "react/jsx-
 var switchSizes = {
   sm: {
     control: "h-4 w-[1.875rem] p-0.5",
-    thumb: "h-3 w-4",
-    offset: "0.625rem"
+    thumb: "h-3",
+    idleWidth: "0.75rem",
+    activeWidth: "1rem",
+    selectedOffset: "0.875rem",
+    activeSelectedOffset: "0.625rem"
   },
   md: {
     control: "h-5 w-9 p-0.5",
-    thumb: "h-4 w-5",
-    offset: "0.75rem"
+    thumb: "h-4",
+    idleWidth: "1rem",
+    activeWidth: "1.25rem",
+    selectedOffset: "1rem",
+    activeSelectedOffset: "0.75rem"
   },
   lg: {
     control: "h-6 w-11 p-0.5",
-    thumb: "h-5 w-6",
-    offset: "1rem"
+    thumb: "h-5",
+    idleWidth: "1.25rem",
+    activeWidth: "1.5rem",
+    selectedOffset: "1.25rem",
+    activeSelectedOffset: "1rem"
   }
 };
 function Switch({
@@ -2512,43 +2521,50 @@ function Switch({
         className
       ),
       ...props,
-      children: (state) => /* @__PURE__ */ jsxs20(Fragment10, { children: [
-        /* @__PURE__ */ jsx42(
-          "span",
-          {
-            "aria-hidden": "true",
-            "data-slot": "switch-control",
-            className: cn(
-              "relative inline-flex shrink-0 items-center overflow-hidden rounded-full border border-border bg-input shadow-inner",
-              "transition-[background-color,border-color,box-shadow] duration-200 ease-out motion-reduce:transition-none",
-              "group-data-hovered/switch:bg-muted-foreground/25",
-              "group-data-selected/switch:border-primary group-data-selected/switch:bg-primary",
-              "group-data-selected/switch:group-data-hovered/switch:bg-primary/85",
-              "group-data-focus-visible/switch:ring-3 group-data-focus-visible/switch:ring-ring/50",
-              styles.control
-            ),
-            children: /* @__PURE__ */ jsx42(
-              "span",
-              {
-                "data-slot": "switch-thumb",
-                style: { transform: state.isSelected ? `translate3d(${styles.offset}, 0, 0)` : "translate3d(0, 0, 0)" },
-                className: cn(
-                  "grid shrink-0 place-items-center rounded-full border border-border/60 bg-background text-[0.625rem] text-muted-foreground shadow-sm",
-                  "will-change-transform transition-[transform,background-color,color,border-color] duration-[240ms] ease-[cubic-bezier(0.2,0.8,0.2,1)] motion-reduce:transition-none",
-                  "group-data-selected/switch:border-primary-foreground/20",
-                  "group-data-selected/switch:bg-primary-foreground group-data-selected/switch:text-primary",
-                  styles.thumb
-                ),
-                children: state.isSelected ? selectedIcon ?? icon : icon
-              }
-            )
-          }
-        ),
-        children || description ? /* @__PURE__ */ jsxs20("span", { className: "grid gap-0.5 leading-tight", children: [
-          children ? /* @__PURE__ */ jsx42("span", { "data-slot": "switch-label", className: "font-medium", children: typeof children === "function" ? children(state) : children }) : null,
-          description ? /* @__PURE__ */ jsx42("span", { "data-slot": "switch-description", className: "text-xs font-normal text-muted-foreground", children: description }) : null
-        ] }) : null
-      ] })
+      children: (state) => {
+        const isThumbActive = state.isHovered || state.isPressed;
+        const thumbOffset = state.isSelected ? isThumbActive ? styles.activeSelectedOffset : styles.selectedOffset : "0";
+        return /* @__PURE__ */ jsxs20(Fragment10, { children: [
+          /* @__PURE__ */ jsx42(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-slot": "switch-control",
+              className: cn(
+                "relative inline-flex shrink-0 items-center overflow-hidden rounded-full border border-border bg-input shadow-inner",
+                "transition-[background-color,border-color,box-shadow] duration-200 ease-out motion-reduce:transition-none",
+                "group-data-hovered/switch:bg-muted-foreground/25",
+                "group-data-selected/switch:border-primary group-data-selected/switch:bg-primary",
+                "group-data-selected/switch:group-data-hovered/switch:bg-primary/85",
+                "group-data-focus-visible/switch:ring-3 group-data-focus-visible/switch:ring-ring/50",
+                styles.control
+              ),
+              children: /* @__PURE__ */ jsx42(
+                "span",
+                {
+                  "data-slot": "switch-thumb",
+                  style: {
+                    transform: `translate3d(${thumbOffset}, 0, 0)`,
+                    width: isThumbActive ? styles.activeWidth : styles.idleWidth
+                  },
+                  className: cn(
+                    "grid shrink-0 place-items-center rounded-full border border-border/60 bg-background text-[0.625rem] text-muted-foreground shadow-sm",
+                    "will-change-[transform,width] transition-[transform,width,background-color,color,border-color] duration-[240ms] ease-[cubic-bezier(0.2,0.8,0.2,1)] motion-reduce:transition-none",
+                    "group-data-selected/switch:border-primary-foreground/20",
+                    "group-data-selected/switch:bg-primary-foreground group-data-selected/switch:text-primary",
+                    styles.thumb
+                  ),
+                  children: state.isSelected ? selectedIcon ?? icon : icon
+                }
+              )
+            }
+          ),
+          children || description ? /* @__PURE__ */ jsxs20("span", { className: "grid gap-0.5 leading-tight", children: [
+            children ? /* @__PURE__ */ jsx42("span", { "data-slot": "switch-label", className: "font-medium", children: typeof children === "function" ? children(state) : children }) : null,
+            description ? /* @__PURE__ */ jsx42("span", { "data-slot": "switch-description", className: "text-xs font-normal text-muted-foreground", children: description }) : null
+          ] }) : null
+        ] });
+      }
     }
   );
 }