Toggle

1"use client";
2 
3import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
4import { cva, type VariantProps } from "class-variance-authority";
5import type * as React from "react";
6import { cn } from "@/lib/utils";
7import { coarseTarget, colorTransition, selectionFocus } from "@/lib/recipes";
8 
9export const toggleVariants = cva(
10  [
11    "relative inline-flex shrink-0 items-center justify-center whitespace-nowrap",
12    "rounded-[var(--radius-8)]",
13    "disabled:pointer-events-none disabled:opacity-50",
14    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
15    selectionFocus,
16    colorTransition,
17    coarseTarget,
18  ].join(" "),
19  {
20    defaultVariants: { size: "md", variant: "tertiary" },
21    variants: {
22      size: {
23        sm: "h-6 min-w-6 gap-1.5 px-2.5 text-mini font-medium [&_svg:not([class*='size-'])]:size-3.5",
24        md: "h-8 min-w-8 gap-2 px-3.5 text-small font-medium [&_svg:not([class*='size-'])]:size-4",
25        lg: "h-10 min-w-10 gap-2 px-4 text-regular font-medium [&_svg:not([class*='size-'])]:size-5",
26      },
27      variant: {
28        tertiary:
29          "bg-transparent text-ink-muted hover:bg-layer-hover hover:text-ink data-[pressed]:bg-layer-hover data-[pressed]:text-ink",
30        secondary:
31          "bg-fill-1 text-ink hover:bg-fill-2 data-[pressed]:bg-fill-2 data-[pressed]:text-ink",
32      },
33    },
34  },
35);
36 
37export interface ToggleProps
38  extends Omit<
39      React.ComponentProps<typeof TogglePrimitive>,
40      "value" | "defaultValue" | "className"
41    >,
42    VariantProps<typeof toggleVariants> {
43  className?: string;
44  value?: string;
45}
46 
47/** Press-to-toggle button with persistent on/off state. */
48export function Toggle({
49  variant,
50  size,
51  className,
52  ...props
53}: ToggleProps): React.ReactElement {
54  return (
55    <TogglePrimitive
56      data-slot="toggle"
57      className={cn(toggleVariants({ variant, size }), className)}
58      {...props}
59    />
60  );
61}
62 
63export { TogglePrimitive };