Switch

1"use client";
2 
3import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
4import type * as React from "react";
5import { cn } from "@/lib/utils";
6import {
7  coarseTarget,
8  colorTransition,
9  selectionFocus,
10  stateStepping,
11} from "@/lib/recipes";
12 
13export type SwitchSize = "sm" | "md" | "lg";
14 
15export interface SwitchProps extends SwitchPrimitive.Root.Props {
16  /** Size preset. */
17  size?: SwitchSize;
18  /** Icons rendered inside the thumb, per state. */
19  icon?: {
20    checked?: React.ReactNode;
21    unchecked?: React.ReactNode;
22  };
23}
24 
25const trackBySize: Record<SwitchSize, string> = {
26  sm: "h-4 w-7",
27  md: "h-5 w-9",
28  lg: "h-6 w-11",
29};
30 
31const thumbBySize: Record<SwitchSize, string> = {
32  sm: "size-3 data-checked:translate-x-3",
33  md: "size-[18px] data-checked:translate-x-4",
34  lg: "size-5 data-checked:translate-x-5",
35};
36 
37const iconSizeBySize: Record<SwitchSize, string> = {
38  sm: "[&_svg]:size-2",
39  md: "[&_svg]:size-3",
40  lg: "[&_svg]:size-3.5",
41};
42 
43export function Switch({
44  className,
45  size = "md",
46  icon,
47  ...props
48}: SwitchProps): React.ReactElement {
49  return (
50    <SwitchPrimitive.Root
51      className={cn(
52        "group inline-flex shrink-0 items-center rounded-full p-px",
53        stateStepping.uncheckedNeutralFill,
54        "data-checked:bg-ink data-checked:hover:bg-ink data-checked:focus-visible:bg-ink data-checked:active:bg-ink",
55        "data-disabled:cursor-not-allowed data-disabled:opacity-50",
56        trackBySize[size],
57        colorTransition,
58        selectionFocus,
59        coarseTarget,
60        className,
61      )}
62      data-slot="switch"
63      {...props}
64    >
65      <SwitchPrimitive.Thumb
66        className={cn(
67          "relative pointer-events-none rounded-full shadow-[var(--shadow-card)]",
68          "transition-[translate,background-color,color] duration-[var(--duration-state)] ease-[var(--ease-standard)]",
69          "bg-base dark:data-unchecked:bg-ink-tertiary",
70          "[&_svg]:text-ink dark:data-unchecked:[&_svg]:text-base",
71          "data-unchecked:translate-x-0",
72          iconSizeBySize[size],
73          thumbBySize[size],
74        )}
75        data-slot="switch-thumb"
76      >
77        {icon?.unchecked && (
78          <span className="absolute inset-0 flex items-center justify-center group-data-checked:hidden">
79            {icon.unchecked}
80          </span>
81        )}
82        {icon?.checked && (
83          <span className="absolute inset-0 hidden items-center justify-center group-data-checked:flex">
84// … truncated