Bouncy Accordion

1"use client";
2// beui.dev/components/motion/bouncy-accordion
3 
4import {
5  motion,
6  useReducedMotion,
7  type Transition,
8} from "motion/react";
9import { ChevronDown } from "lucide-react";
10import {
11  useCallback,
12  useId,
13  useLayoutEffect,
14  useRef,
15  useState,
16  type ReactNode,
17} from "react";
18import { EASE_OUT } from "@/lib/ease";
19import { cn } from "@/lib/utils";
20 
21export type BouncyAccordionItem = {
22  id: string;
23  title: ReactNode;
24  description?: ReactNode;
25  icon?: ReactNode;
26  disabled?: boolean;
27};
28 
29export type BouncyAccordionClassNames = {
30  root?: string;
31  item?: string;
32  trigger?: string;
33  icon?: string;
34  title?: string;
35  chevron?: string;
36  content?: string;
37  description?: string;
38};
39 
40export interface BouncyAccordionProps {
41  items: BouncyAccordionItem[];
42  value?: string | null;
43  defaultValue?: string | null;
44  onValueChange?: (value: string | null) => void;
45  collapsible?: boolean;
46  className?: string;
47  classNames?: BouncyAccordionClassNames;
48}
49 
50// Local springs keep the accordion's connected groups moving together while
51// avoiding scale projection on text-heavy row contents.
52// Gap spring: must not overshoot y — positive y overshoot drifts items below
53// their mt-3 resting point and briefly overlaps the next item.
54const ROW_TRANSITION: Transition = {
55  type: "spring",
56  duration: 0.55,
57  bounce: 0.38,
58};
59 
60const CONTENT_OPEN_TRANSITION: Transition = {
61  type: "spring",
62  duration: 0.58,
63  bounce: 0.32,
64};
65 
66const CONTENT_CLOSE_TRANSITION: Transition = {
67  type: "spring",
68  duration: 0.46,
69  bounce: 0.26,
70};
71 
72const DESCRIPTION_TRANSITION: Transition = {
73  duration: 0.18,
74  ease: EASE_OUT,
75};
76 
77const CHEVRON_TRANSITION: Transition = {
78  type: "spring",
79  duration: 0.42,
80  bounce: 0.28,
81};
82 
83 
84function useControllableAccordionValue({
85  value,
86  defaultValue,
87  onValueChange,
88}: {
89  value?: string | null;
90  defaultValue?: string | null;
91  onValueChange?: (value: string | null) => void;
92}) {
93  const [internalValue, setInternalValue] = useState(defaultValue ?? null);
94  const isControlled = value !== undefined;
95  const currentValue = value ?? internalValue;
96 
97  const setValue = useCallback(
98    (next: string | null) => {
99      if (!isControlled) {
100        setInternalValue(next);
101      }
102 
103      onValueChange?.(next);
104    },
105    [isControlled, onValueChange],
106  );
107 
108  return [currentValue, setValue] as const;
109}
110 
111function BouncyAccordionRow({
112  item,
113  open,
114  startsGroup,
115  endsGroup,
116  separatedFromPrevious,
117  contentId,
118  triggerId,
119  reduce,
120// … truncated