Split Accordion

"use client";

// Sections that sit together as one block. Opening a section splits it away
// from its neighbours: its margin-block eases out to a gap and the corners on
// either side of the split round off, while the answer fades up below its
// question. Closing it merges the block back together. The list is plain block flow, so
// the margins of two open neighbours collapse into a single gap instead of
// doubling. 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];
// Padding between a section and the header row inside it.
const INSET = 6;

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

export type SplitAccordionProps = {
  items: readonly SplitAccordionItem[];
  /** One section open at a time, or any number. */
  type?: "single" | "multiple";