Toggle Group (Base UI)

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