laif-ds 0.2.23 → 0.2.25

package/dist/components/ui/input.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import * as c from "react";
-import { cva as N } from "../../node_modules/class-variance-authority/dist/index.js";
-import { cn as f } from "../../lib/utils.js";
-import { Label as I } from "./label.js";
+import { Label as N } from "./label.js";
+import { cn as c } from "../../lib/utils.js";
+import { cva as I } from "../../node_modules/class-variance-authority/dist/index.js";
+import * as f from "react";
 import { Icon as l } from "./icon.js";
-const M = N(
+const M = I(
   "file:text-d-foreground placeholder:text-d-muted-foreground shadow-none selection:bg-d-primary selection:text-d-primary-foreground flex w-full min-w-0 rounded-md bg-d-input border border-d-border/50 px-3 py-1 text-base transition-all duration-200 outline-none file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
   {
     variants: {
@@ -19,34 +19,34 @@ const M = N(
       size: "default"
     }
   }
-), P = c.forwardRef(
+), P = f.forwardRef(
   ({
     className: x,
     type: m,
     label: r,
-    labelClassName: g,
-    id: b,
-    iconLeft: a,
-    iconRight: o,
+    labelClassName: b,
+    id: g,
+    iconLeft: o,
+    iconRight: a,
     size: t,
     ...u
   }, h) => {
-    const p = b || (r ? `input-${Math.random().toString(36).substring(2, 9)}` : void 0), n = m === "password", [s, v] = c.useState(!1), w = n ? s ? "text" : "password" : m, y = !!o || n;
-    return /* @__PURE__ */ i("div", { className: f("space-y-1.5", x), children: [
-      r && /* @__PURE__ */ e(I, { htmlFor: p, className: g, children: r }),
+    const p = g || (r ? `input-${Math.random().toString(36).substring(2, 9)}` : void 0), n = m === "password", [s, v] = f.useState(!1), w = n ? s ? "text" : "password" : m, y = !!a || n;
+    return /* @__PURE__ */ i("div", { className: c("space-y-1.5", x), children: [
+      r && /* @__PURE__ */ e(N, { htmlFor: p, className: b, children: r }),
       /* @__PURE__ */ i("div", { className: "relative w-full", children: [
-        a && /* @__PURE__ */ e("div", { className: "text-d-muted-foreground pointer-events-none absolute top-1/2 left-3 -translate-y-1/2", children: /* @__PURE__ */ e(l, { name: a, size: t === "lg" ? "sm" : "xs" }) }),
+        o && /* @__PURE__ */ e("div", { className: "text-d-muted-foreground pointer-events-none absolute top-1/2 left-3 -translate-y-1/2", children: /* @__PURE__ */ e(l, { name: o, size: t === "lg" ? "sm" : "xs" }) }),
         /* @__PURE__ */ e(
           "input",
           {
             id: p,
             type: w,
             "data-slot": "input",
-            className: f(
+            className: c(
               M({ size: t }),
-              "focus-visible:ring-d-ring focus-visible:ring-1 focus-visible:outline-none",
-              "aria-invalid:ring-d-destructive/20 dark:aria-invalid:ring-d-destructive/40 aria-invalid:border-d-destructive",
-              a ? t !== "lg" ? "pl-9" : "pl-10" : "",
+              "focus-visible:border-d-ring focus-visible:border-1 focus-visible:ring-0 focus-visible:outline-none",
+              "aria-invalid:ring-d-destructive/20 aria-invalid:border-d-destructive",
+              o ? t !== "lg" ? "pl-9" : "pl-10" : "",
               y ? t !== "lg" ? "pr-9" : "pr-10" : ""
             ),
             ref: h,
@@ -73,7 +73,7 @@ const M = N(
               /* @__PURE__ */ e("span", { className: "sr-only", children: s ? "Nascondi password" : "Mostra password" })
             ]
           }
-        ) : o && /* @__PURE__ */ e("div", { className: "text-d-muted-foreground pointer-events-none absolute top-1/2 right-3 -translate-y-1/2", children: /* @__PURE__ */ e(l, { name: o, size: t === "lg" ? "sm" : "xs" }) })
+        ) : a && /* @__PURE__ */ e("div", { className: "text-d-muted-foreground pointer-events-none absolute top-1/2 right-3 -translate-y-1/2", children: /* @__PURE__ */ e(l, { name: a, size: t === "lg" ? "sm" : "xs" }) })
       ] })
     ] });
   }

package/dist/components/ui/menubar.js

@@ -92,7 +92,7 @@ function E({
       "data-inset": t,
       "data-variant": n,
       className: r(
-        "focus:bg-d-accent focus:text-d-accent-foreground data-[variant=destructive]:text-d-destructive data-[variant=destructive]:focus:bg-d-destructive/10 dark:data-[variant=destructive]:focus:bg-d-destructive/20 data-[variant=destructive]:focus:text-d-destructive data-[variant=destructive]:*:[svg]:!text-d-destructive [&_svg:not([class*='text-'])]:text-d-secondary-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-d-accent focus:text-d-accent-foreground data-[variant=destructive]:text-d-destructive data-[variant=destructive]:focus:bg-d-destructive/10 data-[variant=destructive]:focus:text-d-destructive data-[variant=destructive]:*:[svg]:!text-d-destructive [&_svg:not([class*='text-'])]:text-d-secondary-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         e
       ),
       ...o

package/dist/components/ui/pagination.js

@@ -1,164 +1,177 @@
 "use client";
-import { jsx as i, jsxs as o } from "react/jsx-runtime";
-import { cn as t } from "../../lib/utils.js";
+import { jsx as a, jsxs as r } from "react/jsx-runtime";
+import { cn as i } from "../../lib/utils.js";
 import { buttonVariants as c } from "./button.js";
-import p from "../../node_modules/lucide-react/dist/esm/icons/ellipsis.js";
-import m from "../../node_modules/lucide-react/dist/esm/icons/chevron-right.js";
-import u from "../../node_modules/lucide-react/dist/esm/icons/chevron-left.js";
-import d from "../../node_modules/lucide-react/dist/esm/icons/chevron-first.js";
+import m from "../../node_modules/lucide-react/dist/esm/icons/ellipsis.js";
+import p from "../../node_modules/lucide-react/dist/esm/icons/chevron-right.js";
+import d from "../../node_modules/lucide-react/dist/esm/icons/chevron-left.js";
+import u from "../../node_modules/lucide-react/dist/esm/icons/chevron-first.js";
 import g from "../../node_modules/lucide-react/dist/esm/icons/chevron-last.js";
-function C({ className: a, ...n }) {
-  return /* @__PURE__ */ i(
+function j({ className: n, ...e }) {
+  return /* @__PURE__ */ a(
     "nav",
     {
       role: "navigation",
       "aria-label": "pagination",
       "data-slot": "pagination",
-      className: t("mx-auto flex w-full justify-center", a),
-      ...n
+      className: i("mx-auto flex w-full justify-center", n),
+      ...e
     }
   );
 }
-function j({
-  className: a,
-  ...n
+function k({
+  className: n,
+  ...e
 }) {
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ a(
     "ul",
     {
       "data-slot": "pagination-content",
-      className: t("flex flex-row items-center gap-1", a),
-      ...n
+      className: i("flex flex-row items-center gap-1", n),
+      ...e
     }
   );
 }
-function y({ ...a }) {
-  return /* @__PURE__ */ i("li", { "data-slot": "pagination-item", ...a });
+function C({ ...n }) {
+  return /* @__PURE__ */ a("li", { "data-slot": "pagination-item", ...n });
 }
-function r({
-  className: a,
-  isActive: n,
-  isDisabled: e,
+function o({
+  className: n,
+  isActive: e,
+  isDisabled: t,
   size: s = "icon",
   ...l
 }) {
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ a(
     "a",
     {
-      "aria-current": n ? "page" : void 0,
+      "aria-current": e ? "page" : void 0,
       "data-slot": "pagination-link",
-      "data-active": n,
-      className: t(
+      "data-active": e,
+      className: i(
+        "border-d-border/30 select-none",
         c({
-          variant: n ? "outline" : "ghost",
-          // variant: isDisabled ? "disabled" : isActive ? "outline" : "ghost",
+          variant: e ? "outline" : "ghost",
           size: s
         }),
-        e && "pointer-events-none cursor-not-allowed opacity-40",
-        a
+        t && "pointer-events-none cursor-not-allowed opacity-40",
+        e && "bg-d-secondary border-d-border border",
+        n
       ),
       ...l
     }
   );
 }
 function G({
-  className: a,
-  label: n,
-  ...e
+  className: n,
+  label: e,
+  ...t
 }) {
-  return /* @__PURE__ */ o(
-    r,
+  return /* @__PURE__ */ r(
+    o,
     {
       "aria-label": "Go to previous page",
-      className: t("gap-1 px-2.5 sm:pl-2.5", a),
-      ...e,
+      className: i(
+        "flex items-center justify-center gap-1 px-2.5 align-middle select-none sm:pl-2.5",
+        n
+      ),
+      ...t,
       children: [
-        /* @__PURE__ */ i(d, {}),
-        /* @__PURE__ */ i("span", { className: "hidden sm:block", children: n ?? "Primo" })
+        /* @__PURE__ */ a(u, {}),
+        /* @__PURE__ */ a("span", { className: "hidden sm:block", children: e ?? "Primo" })
       ]
     }
   );
 }
 function L({
-  className: a,
-  label: n,
-  ...e
+  className: n,
+  label: e,
+  ...t
 }) {
-  return /* @__PURE__ */ o(
-    r,
+  return /* @__PURE__ */ r(
+    o,
     {
       "aria-label": "Go to previous page",
-      className: t("gap-1 px-2.5 sm:pl-2.5", a),
-      ...e,
+      className: i(
+        "flex items-center justify-center gap-1 px-2.5 align-middle select-none sm:pl-2.5",
+        n
+      ),
+      ...t,
       children: [
-        /* @__PURE__ */ i(u, {}),
-        /* @__PURE__ */ i("span", { className: "hidden sm:block", children: n ?? "Precedente" })
+        /* @__PURE__ */ a(d, {}),
+        /* @__PURE__ */ a("span", { className: "hidden sm:block", children: e ?? "Precedente" })
       ]
     }
   );
 }
 function w({
-  className: a,
-  label: n,
-  ...e
+  className: n,
+  label: e,
+  ...t
 }) {
-  return /* @__PURE__ */ o(
-    r,
+  return /* @__PURE__ */ r(
+    o,
     {
       "aria-label": "Go to next page",
-      className: t("gap-1 px-2.5 sm:pr-2.5", a),
-      ...e,
+      className: i(
+        "flex items-center justify-center gap-1 px-2.5 align-middle select-none sm:pl-2.5",
+        n
+      ),
+      ...t,
       children: [
-        /* @__PURE__ */ i("span", { className: "hidden sm:block", children: n ?? "Prossimo" }),
-        /* @__PURE__ */ i(m, {})
+        /* @__PURE__ */ a("span", { className: "hidden sm:block", children: e ?? "Prossimo" }),
+        /* @__PURE__ */ a(p, {})
       ]
     }
   );
 }
 function z({
-  className: a,
-  label: n,
-  ...e
+  className: n,
+  label: e,
+  ...t
 }) {
-  return /* @__PURE__ */ o(
-    r,
+  return /* @__PURE__ */ r(
+    o,
     {
       "aria-label": "Go to next page",
-      className: t("gap-1 px-2.5 sm:pr-2.5", a),
-      ...e,
+      className: i(
+        "flex items-center justify-center gap-1 px-2.5 align-middle select-none sm:pr-2.5",
+        n
+      ),
+      ...t,
       children: [
-        /* @__PURE__ */ i("span", { className: "hidden sm:block", children: n ?? "Ultimo" }),
-        /* @__PURE__ */ i(g, {})
+        /* @__PURE__ */ a("span", { className: "hidden sm:block", children: e ?? "Ultimo" }),
+        /* @__PURE__ */ a(g, {})
       ]
     }
   );
 }
 function E({
-  className: a,
-  ...n
+  className: n,
+  ...e
 }) {
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ r(
     "span",
     {
       "aria-hidden": !0,
       "data-slot": "pagination-ellipsis",
-      className: t("flex size-9 items-center justify-center", a),
-      ...n,
+      className: i("flex size-9 items-center justify-center", n),
+      ...e,
       children: [
-        /* @__PURE__ */ i(p, { className: "size-4" }),
-        /* @__PURE__ */ i("span", { className: "sr-only", children: "More pages" })
+        /* @__PURE__ */ a(m, { className: "size-4" }),
+        /* @__PURE__ */ a("span", { className: "sr-only", children: "More pages" })
       ]
     }
   );
 }
 export {
-  C as Pagination,
-  j as PaginationContent,
+  j as Pagination,
+  k as PaginationContent,
   E as PaginationEllipsis,
   G as PaginationFirst,
-  y as PaginationItem,
+  C as PaginationItem,
   z as PaginationLast,
-  r as PaginationLink,
+  o as PaginationLink,
   w as PaginationNext,
   L as PaginationPrevious
 };

package/dist/components/ui/radio-group.js

@@ -1,40 +1,40 @@
 "use client";
 import { jsx as r } from "react/jsx-runtime";
-import { Root as a, Item as t, Indicator as d } from "../../node_modules/@radix-ui/react-radio-group/dist/index.js";
-import { cn as o } from "../../lib/utils.js";
-import s from "../../node_modules/lucide-react/dist/esm/icons/circle.js";
+import { Root as t, Item as a, Indicator as s } from "../../node_modules/@radix-ui/react-radio-group/dist/index.js";
+import { cn as e } from "../../lib/utils.js";
+import d from "../../node_modules/lucide-react/dist/esm/icons/circle.js";
 function m({
   className: i,
-  ...e
+  ...o
 }) {
   return /* @__PURE__ */ r(
-    a,
+    t,
     {
       "data-slot": "radio-group",
-      className: o("grid gap-3", i),
-      ...e
+      className: e("grid gap-3", i),
+      ...o
     }
   );
 }
 function p({
   className: i,
-  ...e
+  ...o
 }) {
   return /* @__PURE__ */ r(
-    t,
+    a,
     {
       "data-slot": "radio-group-item",
-      className: o(
-        "border-d-border text-d-primary focus-visible:border-d-ring focus-visible:ring-d-ring/50 aria-invalid:ring-d-destructive/20 dark:aria-invalid:ring-d-destructive/40 aria-invalid:border-d-destructive dark:bg-d-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+      className: e(
+        "border-d-border text-d-primary focus-visible:border-d-ring focus-visible:ring-d-ring/50 aria-invalid:ring-d-destructive/20 aria-invalid:border-d-destructive aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
         i
       ),
-      ...e,
+      ...o,
       children: /* @__PURE__ */ r(
-        d,
+        s,
         {
           "data-slot": "radio-group-indicator",
           className: "relative flex items-center justify-center",
-          children: /* @__PURE__ */ r(s, { className: "fill-d-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" })
+          children: /* @__PURE__ */ r(d, { className: "fill-d-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" })
         }
       )
     }

package/dist/components/ui/select.js

@@ -1,22 +1,22 @@
 "use client";
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import * as c from "react";
 import { Root as p, Group as f, Value as g, Trigger as x, Icon as h, Portal as v, Content as b, Viewport as y, Label as S, Item as z, ItemIndicator as w, ItemText as N, Separator as C, ScrollUpButton as I, ScrollDownButton as _ } from "../../node_modules/@radix-ui/react-select/dist/index.js";
-import { cn as s } from "../../lib/utils.js";
+import * as c from "react";
 import { Label as j } from "./label.js";
+import { cn as o } from "../../lib/utils.js";
 import u from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
 import k from "../../node_modules/lucide-react/dist/esm/icons/check.js";
 import B from "../../node_modules/lucide-react/dist/esm/icons/chevron-up.js";
 function q({
   size: t = "default",
   label: a,
-  className: r,
-  labelClassName: o,
+  className: s,
+  labelClassName: r,
   ...d
 }) {
   const n = c.useId();
-  return /* @__PURE__ */ i("div", { className: s("space-y-1.5", r), children: [
-    a && /* @__PURE__ */ e(j, { htmlFor: n, className: o, children: a }),
+  return /* @__PURE__ */ i("div", { className: o("space-y-1.5", s), children: [
+    a && /* @__PURE__ */ e(j, { htmlFor: n, className: r, children: a }),
     /* @__PURE__ */ e(m.Provider, { value: { size: t, id: n }, children: /* @__PURE__ */ e(p, { "data-slot": "select", ...d }) })
   ] });
 }
@@ -34,8 +34,8 @@ function E({
 function H({
   className: t,
   size: a,
-  children: r,
-  ...o
+  children: s,
+  ...r
 }) {
   const { size: d, id: n } = L(), l = a || d;
   return /* @__PURE__ */ i(
@@ -44,13 +44,13 @@ function H({
       id: n,
       "data-slot": "select-trigger",
       "data-size": l,
-      className: s(
+      className: o(
         "border-d-border/50 ring-offset-background data-[placeholder]:text-d-muted-foreground bg-d-input flex items-center justify-between rounded-md border px-3 py-2 whitespace-nowrap focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
         "focus-visible:ring-d-ring focus-visible:ring-1",
         // Ring solo con tastiera
         "data-[state=open]:ring-d-ring data-[state=open]:ring-1",
         // Ring quando dropdown è aperto
-        "aria-invalid:ring-d-destructive/20 dark:aria-invalid:ring-d-destructive/40 aria-invalid:border-d-destructive",
+        "aria-invalid:ring-d-destructive/20 aria-invalid:border-d-destructive",
         "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
         "transition-all duration-300",
@@ -59,9 +59,9 @@ function H({
         l === "lg" && "h-10 text-lg",
         t
       ),
-      ...o,
+      ...r,
       children: [
-        r,
+        s,
         /* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e(u, { className: "size-4 opacity-50" }) })
       ]
     }
@@ -70,28 +70,28 @@ function H({
 function J({
   className: t,
   children: a,
-  position: r = "popper",
-  ...o
+  position: s = "popper",
+  ...r
 }) {
   return /* @__PURE__ */ e(v, { children: /* @__PURE__ */ i(
     b,
     {
       "data-slot": "select-content",
-      className: s(
+      className: o(
         "bg-d-popover text-d-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-d-border relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
-        r === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        s === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         t
       ),
-      position: r,
-      ...o,
+      position: s,
+      ...r,
       children: [
         /* @__PURE__ */ e(D, {}),
         /* @__PURE__ */ e(
           y,
           {
-            className: s(
+            className: o(
               "p-1",
-              r === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+              s === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
             ),
             children: a
           }
@@ -109,7 +109,7 @@ function K({
     S,
     {
       "data-slot": "select-label",
-      className: s(
+      className: o(
         "text-d-secondary-foreground px-2 py-1.5 text-xs",
         t
       ),
@@ -120,17 +120,17 @@ function K({
 function M({
   className: t,
   children: a,
-  ...r
+  ...s
 }) {
   return /* @__PURE__ */ i(
     z,
     {
       "data-slot": "select-item",
-      className: s(
+      className: o(
         "focus:bg-d-accent focus:text-d-accent-foreground [&_svg:not([class*='text-'])]:text-d-secondary-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         t
       ),
-      ...r,
+      ...s,
       children: [
         /* @__PURE__ */ e("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(k, { className: "size-4" }) }) }),
         /* @__PURE__ */ e(N, { children: a })
@@ -146,7 +146,7 @@ function O({
     C,
     {
       "data-slot": "select-separator",
-      className: s(
+      className: o(
         "bg-d-border pointer-events-none -mx-1 my-1 h-px",
         t
       ),
@@ -162,7 +162,7 @@ function D({
     I,
     {
       "data-slot": "select-scroll-up-button",
-      className: s(
+      className: o(
         "flex cursor-default items-center justify-center py-1",
         t
       ),
@@ -179,7 +179,7 @@ function R({
     _,
     {
       "data-slot": "select-scroll-down-button",
-      className: s(
+      className: o(
         "flex cursor-default items-center justify-center py-1",
         t
       ),

package/dist/components/ui/switch.js

@@ -1,26 +1,28 @@
 "use client";
 import { jsx as e } from "react/jsx-runtime";
-import { Root as d, Thumb as n } from "../../node_modules/@radix-ui/react-switch/dist/index.js";
+import { Root as a, Thumb as n } from "../../node_modules/@radix-ui/react-switch/dist/index.js";
 import { cn as t } from "../../lib/utils.js";
 function c({
   className: r,
-  ...a
+  ...o
 }) {
   return /* @__PURE__ */ e(
-    d,
+    a,
     {
       "data-slot": "switch",
       className: t(
-        "peer data-[state=checked]:bg-d-primary data-[state=unchecked]:bg-d-input focus-visible:border-d-ring focus-visible:ring-d-ring/50 dark:data-[state=unchecked]:bg-d-foreground/20 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent transition-all duration-300 outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "peer data-[state=checked]:bg-d-primary data-[state=unchecked]:bg-d-foreground/20 focus-visible:border-d-ring focus-visible:ring-d-ring/50 inline-flex h-[1.25rem] w-8 shrink-0 cursor-pointer items-center justify-start rounded-full border-0 px-0.5 py-0.5 transition-colors duration-300 outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
         r
       ),
-      ...a,
+      ...o,
       children: /* @__PURE__ */ e(
         n,
         {
           "data-slot": "switch-thumb",
           className: t(
-            "bg-d-background dark:data-[state=unchecked]:bg-d-foreground dark:data-[state=checked]:bg-d-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+            // Smooth slide: track w-8 (32px) with px-0.5 (2px) each side => inner 28px.
+            // Thumb size is 16px, so travel distance = 28 - 16 = 12px.
+            "bg-d-foreground data-[state=unchecked]:bg-d-foreground data-[state=checked]:bg-d-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform duration-200 ease-out will-change-transform data-[state=checked]:translate-x-[12px] data-[state=unchecked]:translate-x-0"
           )
         }
       )