Accordion

"use client";

// Sections that open and close in place. The panel eases to its height while
// its content fades up a few pixels behind it, and the icon turns as it goes.
// One open at a time, or several. Headers are real buttons inside headings;
// Up/Down, Home and End move between them.

import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { useId, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
import { cn } from "@/lib/utils";

const EASE_OUT: [number, number, number, number] = [0.23, 1, 0.32, 1];

export type AccordionItem = { title: ReactNode; content: ReactNode };

export type AccordionProps = {
  items: readonly AccordionItem[];
  /** One section open at a time, or any number. */
  type?: "single" | "multiple";
  /** Indexes open at first. */
  defaultOpen?: readonly number[];
  /** Open indexes, controlled. Pair with `onOpenChange`. */
  open?: readonly number[];
  onOpenChange?: (open: number[]) => void;