Toggle (Base UI)

1"use client";
2 
3import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
4import { cva, type VariantProps } from "class-variance-authority";
5import { animate, motion, useMotionValue, useTransform } from "motion/react";
6import * as React from "react";
7 
8import { cn } from "@/lib/utils";
9 
10const toggleCornerClassName =
11  "rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[11px]";
12 
13const toggleCornerSmClassName =
14  "rounded-[min(var(--radius-md),12px)] supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[14px]";
15 
16const togglePressedTextBase =
17  "text-muted-foreground aria-pressed:text-foreground data-pressed:text-foreground";
18 
19const toggleFillClassName =
20  "pointer-events-none absolute inset-0 z-0 rounded-[inherit] bg-muted supports-[corner-shape:squircle]:[corner-shape:inherit]";
21 
22const ICON_REST = 0.93;
23 
24const FLUID_FILL = {
25  type: "spring" as const,
26  stiffness: 210,
27  damping: 28,
28  mass: 1.08,
29};
30const FLUID_ICON = {
31  type: "spring" as const,
32  stiffness: 340,
33  damping: 32,
34  mass: 0.92,
35};
36const FLUID_TAP = {
37  type: "spring" as const,
38  stiffness: 520,
39  damping: 34,
40  mass: 0.72,
41};
42const FLUID_SNAP = {
43  type: "spring" as const,
44  duration: 0.45,
45  bounce: 0.32,
46};
47const FLUID_SHEEN = {
48  duration: 0.58,
49  ease: [0.22, 1, 0.36, 1] as const,
50};
51 
52function runSheenSweep(
53  sheenX: ReturnType<typeof useMotionValue<number>>,
54  sheenOpacity: ReturnType<typeof useMotionValue<number>>
55) {
56  sheenX.set(-0.4);
57  sheenOpacity.set(0.85);
58 
59  animate(sheenX, 1.4, FLUID_SHEEN);
60  animate(sheenOpacity, 0, {
61    duration: 0.58,
62    ease: [0.4, 0, 0.2, 1],
63  });
64}
65 
66function resolveIsPressed({
67  isPressed,
68  "data-state": dataState,
69  "data-pressed": dataPressed,
70  "aria-pressed": ariaPressed,
71}: {
72  isPressed?: boolean;
73  "data-state"?: string;
74  "data-pressed"?: string | boolean;
75  "aria-pressed"?: boolean | "true" | "false" | "mixed";
76}) {
77  if (isPressed !== undefined) {
78    return isPressed;
79  }
80 
81  if (dataState === "on") {
82    return true;
83  }
84 
85  if (dataState === "off") {
86    return false;
87  }
88 
89  if (dataPressed === true || dataPressed === "true" || dataPressed === "") {
90    return true;
91  }
92 
93  if (dataPressed === false || dataPressed === "false") {
94    return false;
95  }
96 
97  if (ariaPressed === true || ariaPressed === "true") {
98    return true;
99  }
100 
101  if (ariaPressed === false || ariaPressed === "false") {
102    return false;
103  }
104 
105  return false;
106}
107 
108// … truncated