"use client";
import * as React from "react";
import * as S from "@radix-ui/react-switch";
import { motion } from "motion/react";
import { springs } from "@/lib/motion";
import { cn } from "@/lib/utils";

const thumb = {
  off: { x: 0, scaleX: 1, scaleY: 1 },
  on: { x: 20, scaleX: 1, scaleY: 1 },
  press: { scaleX: 1.18, scaleY: 0.86 },
};

/** Sunken track with a raised clay thumb that slides and squashes while pressed. */
export function Switch({ className, checked, defaultChecked, onCheckedChange, ...p }: React.ComponentProps<typeof S.Root>) {
  const [inner, setInner] = React.useState(defaultChecked ?? false);
  const on = checked ?? inner;
  return (
    <S.Root
      checked={on}
      onCheckedChange={(v) => {
        setInner(v);
        onCheckedChange?.(v);
      }}
      className={cn(
        "peer inline-flex h-8 w-13 shrink-0 cursor-pointer items-center rounded-full bg-surface-sunken p-1 shadow-well transition-colors duration-200 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary",
        className
      )}
      asChild
      {...p}
    >
      <motion.button initial={false} animate={on ? "on" : "off"} whileTap="press">
        <S.Thumb asChild>
          <motion.span
            variants={thumb}
            transition={springs.snappy}
            className="pointer-events-none block size-6 rounded-full bg-surface shadow-clay-sm"
          />
        </S.Thumb>
      </motion.button>
    </S.Root>
  );
}
Installation
