@klu_dev/ui-klu-green 1.2.25 → 1.2.27

package/dist/index.css

@@ -1108,6 +1108,10 @@ button,
 .uiklu-items-center{
     align-items: center;
 
+}
+.uiklu-justify-start{
+    justify-content: flex-start;
+
 }
 .uiklu-justify-end{
     justify-content: flex-end;
@@ -1806,6 +1810,10 @@ button,
 .uiklu-p-\[16px\]{
     padding: 16px;
 
+}
+.uiklu-p-\[2px\]{
+    padding: 2px;
+
 }
 .uiklu-p-\[6px\]{
     padding: 6px;
@@ -2913,14 +2921,14 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
-.data-\[state\=checked\]\:uiklu-translate-x-3[data-state="checked"]{
-    --tw-translate-x: 0.75rem;
+.data-\[state\=checked\]\:uiklu-translate-x-4[data-state="checked"]{
+    --tw-translate-x: 1rem;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 
 }
 
-.data-\[state\=unchecked\]\:uiklu-translate-x-\[-4px\][data-state="unchecked"]{
-    --tw-translate-x: -4px;
+.data-\[state\=unchecked\]\:uiklu-translate-x-0[data-state="unchecked"]{
+    --tw-translate-x: 0px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 
 }

package/dist/index.js

@@ -3525,25 +3525,38 @@ var cn2 = (...classes) => classes.filter(Boolean).join(" ");
 var Switch = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
   SwitchPrimitives.Root,
   {
+    ref,
     className: cn2(
+      // Añadimos uiklu-justify-center para asegurar el centrado vertical y horizontal inicial
       "uiklu-peer uiklu-inline-flex uiklu-h-5 uiklu-w-9 uiklu-shrink-0",
-      "uiklu-cursor-pointer uiklu-items-center uiklu-rounded-full ",
+      "uiklu-cursor-pointer uiklu-items-center uiklu-justify-start uiklu-rounded-full",
       "uiklu-border-transparent uiklu-transition-colors",
+      "uiklu-p-[2px]",
+      // Un pequeño padding interno evita tener que usar translates negativos raros
       "focus-visible:uiklu-outline-none focus-visible:uiklu-ring-2",
       "focus-visible:uiklu-ring-gray400 focus-visible:uiklu-ring-offset-2",
       "disabled:uiklu-cursor-not-allowed disabled:uiklu-opacity-50",
-      "data-[state=checked]:uiklu-bg-primary900 data-[state=unchecked]:uiklu-bg-gray300",
+      "data-[state=checked]:uiklu-bg-primary900",
+      "data-[state=unchecked]:uiklu-bg-gray300",
       className
     ),
     ...props,
-    ref,
     children: /* @__PURE__ */ jsx29(
       SwitchPrimitives.Thumb,
       {
         className: cn2(
-          "uiklu-pointer-events-none uiklu-block uiklu-h-4 uiklu-w-4 uiklu-rounded-full",
-          "uiklu-bg-basewhite uiklu-shadow-lg uiklu-ring-0 uiklu-transition-transform",
-          "data-[state=checked]:uiklu-translate-x-3 data-[state=unchecked]:uiklu-translate-x-[-4px]"
+          "uiklu-pointer-events-none",
+          "uiklu-block",
+          "uiklu-h-4",
+          "uiklu-w-4",
+          "uiklu-rounded-full",
+          "uiklu-bg-basewhite",
+          "uiklu-shadow-lg",
+          "uiklu-ring-0",
+          "uiklu-transition-transform",
+          // Modificamos esto: arranca en 0 (gracias al padding) y se mueve lo justo al activarse
+          "data-[state=checked]:uiklu-translate-x-4",
+          "data-[state=unchecked]:uiklu-translate-x-0"
         )
       }
     )