laif-ds/dist/components/ui/switch.js

Design System di Laif con componenti React basati su principi di Atomic Design

"use client";
import { jsx as t } from "react/jsx-runtime";
import { Root as a, Thumb as s } from "../../node_modules/@radix-ui/react-switch/dist/index.js";
import { designTokens as e } from "../design-tokens.js";
import { cn as r } from "../../lib/utils.js";
function l({
  className: n,
  ...o
}) {
  return /* @__PURE__ */ t(
    a,
    {
      "data-slot": "switch",
      className: r(
        "peer data-[state=checked]:bg-d-primary data-[state=unchecked]:bg-d-foreground/20 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",
        e.focusRing,
        e.interaction.disabled,
        n
      ),
      ...o,
      children: /* @__PURE__ */ t(
        s,
        {
          "data-slot": "switch-thumb",
          className: r(
            // 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"
          )
        }
      )
    }
  );
}
export {
  l as Switch
};