switch

1"use client";
2 
3import { motion } from "motion/react";
4import { Switch as SwitchPrimitive } from "radix-ui";
5import type * as React from "react";
6import { Pane } from "@/components/ui/pane";
7import { GLASS_SPRING } from "@/lib/glass/config";
8import { cn } from "@/lib/utils";
9 
10function Switch({
11  className,
12  ...props
13}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
14  return (
15    <Pane
16      variant="clear"
17      radius={999}
18      className={cn(
19        "inline-flex h-7 w-14 shrink-0 items-center",
20        // On: the track's glass fills with system green, rim included. Both
21        // fill tokens are needed — a Pane reads `--pane-tint-*` normally but
22        // `--pane-nested-*` inside another Pane, so setting only the first
23        // leaves the switch grey in a card or dialog.
24        "has-[[data-state=checked]]:[--pane-tint-clear:var(--pane-tint-accent)]",
25        "has-[[data-state=checked]]:[--pane-nested-clear:var(--pane-tint-accent)]",
26        "has-[[data-state=checked]]:[--pane-border-clear:var(--pane-border-accent)]",
27      )}
28    >
29      <SwitchPrimitive.Root
30        data-slot="switch"
31        className={cn(
32          "peer inline-flex h-7 w-14 shrink-0 items-center rounded-full bg-transparent outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[var(--pane-highlight)] disabled:cursor-not-allowed disabled:opacity-50",
33          className,
34        )}
35        {...props}
36      >
37        <SwitchPrimitive.Thumb asChild>
38          <motion.span
39            layout
40            transition={GLASS_SPRING.press}
41            className="pointer-events-none block h-6 w-8 translate-x-0.5 data-[state=checked]:translate-x-[22px]"
42          >
43            <Pane
44              variant="regular"
45              radius={999}
46              className="h-6 w-8 [--pane-nested-regular:var(--pane-knob)]"
47            />
48          </motion.span>
49        </SwitchPrimitive.Thumb>
50      </SwitchPrimitive.Root>
51    </Pane>
52  );
53}
54 
55export { Switch };