Accordion

1"use client";
2 
3import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
4import * as React from "react";
5 
6export type AccordionItem = {
7  value: string;
8  title: React.ReactNode;
9  content: React.ReactNode;
10  disabled?: boolean;
11};
12 
13/**
14 * Motion feel for the open/close animation.
15 * - `smooth`  critically damped — no overshoot (default)
16 * - `spring`  gentle overshoot with a soft settle
17 * - `bounce`  playful — content springs into place
18 *
19 * The container height is always kept near-critically damped: overshooting an
20 * `auto` height flashes an empty gap below the content, so the springiness
21 * lives on the content lift (`y`) instead, where it reads well and clips
22 * nothing.
23 */
24export type AccordionAnimation = "smooth" | "spring" | "bounce";
25 
26const MOTION_PRESETS: Record<
27  AccordionAnimation,
28  {
29    height: { bounce: number; duration: number };
30    content: { bounce: number; duration: number };
31    lift: number;
32  }
33> = {
34  smooth: {
35    height: { bounce: 0, duration: 0.4 },
36    content: { bounce: 0, duration: 0.4 },
37    lift: 6,
38  },
39  spring: {
40    height: { bounce: 0.05, duration: 0.45 },
41    content: { bounce: 0.3, duration: 0.5 },
42    lift: 10,
43  },
44  bounce: {
45    height: { bounce: 0.12, duration: 0.5 },
46    content: { bounce: 0.55, duration: 0.6 },
47    lift: 14,
48  },
49};
50 
51export type AccordionProps = Omit<
52  React.HTMLAttributes<HTMLDivElement>,
53  "onChange" | "defaultValue"
54> & {
55  items: AccordionItem[];
56  /** `single` keeps one panel open; `multiple` allows many. */
57  type?: "single" | "multiple";
58  /** Open value(s) on mount. */
59  defaultValue?: string | string[];
60  /** Allow closing the open panel in `single` mode. */
61  collapsible?: boolean;
62  /** Motion feel for the height animation. */
63  animation?: AccordionAnimation;
64};
65 
66const ChevronIcon = (
67  <svg
68    viewBox="0 0 24 24"
69    fill="none"
70    stroke="currentColor"
71    strokeWidth={2}
72    strokeLinecap="round"
73    strokeLinejoin="round"
74    className="size-4 shrink-0 text-muted-foreground [transition:transform_250ms_ease] group-data-[open=true]:rotate-180"
75    aria-hidden="true"
76  >
77    <path d="m6 9 6 6 6-6" />
78  </svg>
79);
80 
81const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
82  (
83    {
84      items,
85      type = "single",
86      defaultValue,
87      collapsible = true,
88      animation = "smooth",
89      className,
90      ...props
91    },
92    ref,
93  ) => {
94    const reduceMotion = useReducedMotion();
95    const preset = MOTION_PRESETS[animation];
96// … truncated