toggle

1import * as React from "react"
2import * as SwitchPrimitive from "@radix-ui/react-switch"
3import { cva, type VariantProps } from "class-variance-authority"
4 
5import { cn } from "@/lib/utils"
6import "./toggle.css"
7 
8const toggleVariants = cva(
9  "toggle-track inline-flex items-center shrink-0 rounded-[var(--layout-radius-full)] p-[var(--layout-padding-2xs)] transition-colors cursor-pointer",
10  {
11    variants: {
12      size: {
13        sm: "h-[var(--layout-size-sm)] w-9",
14        md: "h-[var(--layout-size-md)] w-11",
15      },
16    },
17    defaultVariants: {
18      size: "sm",
19    },
20  }
21)
22 
23const thumbVariants = cva(
24  "toggle-thumb block rounded-full",
25  {
26    variants: {
27      size: {
28        sm: "h-[var(--layout-size-xs)] w-[var(--layout-size-xs)] data-[state=checked]:translate-x-[14px]",
29        md: "h-[var(--layout-size-sm)] w-[var(--layout-size-sm)] data-[state=checked]:translate-x-[18px]",
30      },
31    },
32    defaultVariants: {
33      size: "sm",
34    },
35  }
36)
37 
38function Toggle({
39  className,
40  size = "sm",
41  label,
42  description,
43  disabled,
44  ...props
45}: React.ComponentProps<typeof SwitchPrimitive.Root> &
46  VariantProps<typeof toggleVariants> & {
47    label?: string
48    description?: string
49  }) {
50  const id = React.useId()
51 
52  return (
53    <div
54      data-slot="toggle"
55      data-disabled={disabled || undefined}
56      className={cn("flex items-center gap-[var(--layout-gap-md)]", className)}
57    >
58      <SwitchPrimitive.Root
59        id={id}
60        className={cn(toggleVariants({ size }))}
61        disabled={disabled}
62        {...props}
63      >
64        <SwitchPrimitive.Thumb className={cn(thumbVariants({ size }))} />
65      </SwitchPrimitive.Root>
66      {label && (
67        <label
68          htmlFor={id}
69          className={cn(
70            "flex flex-col",
71            disabled ? "cursor-default" : "cursor-pointer"
72          )}
73        >
74          <span
75            className={cn(
76              "font-accent toggle-label",
77              size === "sm" ? "text-content-note" : "text-content-body"
78            )}
79          >
80            {label}
81          </span>
82          {description && (
83            <span className="text-content-note toggle-description">
84              {description}
85            </span>
86          )}
87        </label>
88      )}
89    </div>
90  )
91}
92 
93export { Toggle, toggleVariants }