Animated Toggle

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { AnimatePresence, motion, useReducedMotion } from "motion/react";
5import {
6  type KeyboardEvent,
7  type ReactNode,
8  useCallback,
9  useState,
10} from "react";
11 
12export interface AnimatedToggleProps {
13  /** Controlled checked state */
14  checked?: boolean;
15  /** Additional CSS classes */
16  className?: string;
17  /** Default checked state for uncontrolled mode */
18  defaultChecked?: boolean;
19  /** Whether the toggle is disabled */
20  disabled?: boolean;
21  /** Icons for on/off states (only used with icon variant) */
22  icons?: { on: ReactNode; off: ReactNode };
23  /** Accessible label for the toggle */
24  label?: string;
25  /** Callback when checked state changes */
26  onChange?: (checked: boolean) => void;
27  /** Size of the toggle */
28  size?: "sm" | "md" | "lg";
29  /** Visual variant of the toggle */
30  variant?: "default" | "morph" | "icon";
31}
32 
33const SPRING = {
34  bounce: 0.1,
35  duration: 0.25,
36  type: "spring" as const,
37};
38 
39const SIZES = {
40  lg: {
41    icon: "size-3.5",
42    thumb: "size-6",
43    thumbTranslate: 24,
44    track: "w-[52px] h-7",
45  },
46  md: {
47    icon: "size-3",
48    thumb: "size-5",
49    thumbTranslate: 20,
50    track: "w-11 h-6",
51  },
52  sm: {
53    icon: "size-2.5",
54    thumb: "size-4",
55    thumbTranslate: 16,
56    track: "w-9 h-5",
57  },
58};
59 
60const AnimatedToggle = ({
61  checked: controlledChecked,
62  defaultChecked = false,
63  onChange,
64  variant = "default",
65  icons,
66  size = "md",
67  disabled = false,
68  label,
69  className,
70}: AnimatedToggleProps) => {
71  const shouldReduceMotion = useReducedMotion();
72 
73  const [internalChecked, setInternalChecked] = useState(defaultChecked);
74 
75  const isControlled = controlledChecked !== undefined;
76  const checked = isControlled ? controlledChecked : internalChecked;
77 
78  const handleToggle = useCallback(() => {
79    if (disabled) {
80      return;
81    }
82 
83    const newValue = !checked;
84    if (!isControlled) {
85      setInternalChecked(newValue);
86    }
87    onChange?.(newValue);
88  }, [checked, disabled, isControlled, onChange]);
89 
90  const handleKeyDown = useCallback(
91    (event: KeyboardEvent<HTMLButtonElement>) => {
92      if (event.key === " " || event.key === "Enter") {
93        event.preventDefault();
94        handleToggle();
95      }
96    },
97    [handleToggle]
98  );
99 
100  const sizeConfig = SIZES[size];
101 
102  const getThumbBorderRadius = () => {
103    if (variant !== "morph" || shouldReduceMotion) {
104      return 9999;
105    }
106    return checked ? 9999 : 6;
107  };
108 
109  const getThumbTransform = () => {
110// … truncated