"use client"; import React, { useId, useState } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; export interface SpringAccordionItem { title: string; content: React.ReactNode; } export interface SpringAccordionProps { items: SpringAccordionItem[]; /** Allow multiple panels open at once. */ multiple?: boolean; /** Indices of panels open on mount. */ defaultOpen?: number[]; /** Show the 01 / 02 index column. */ numbered?: boolean; className?: string; style?: React.CSSProperties; } /** * An editorial accordion — spring-driven height, answers that rise out of a * blur, and an index numeral that ignites on open. */ export function SpringAccordion({ items, multiple = false, defaultOpen = [], numbered = true, className, style, }: SpringAccordionProps) { const [open, setOpen] = useState>(() => new Set(defaultOpen)); const reduced = useReducedMotion(); const baseId = useId(); const toggle = (i: number) => { setOpen((prev) => { const next = new Set(multiple ? prev : [...prev].filter((n) => n === i)); if (next.has(i)) next.delete(i); else next.add(i); return next; }); }; const spring = reduced ? ({ duration: 0 } as const) : ({ type: "spring", stiffness: 260, damping: 32 } as const); return (

{items.map((item, i) => { const isOpen = open.has(i); const panelId = `${baseId}-panel-${i}`; return (

{isOpen && ( {item.content} )}

); })}

); } export default SpringAccordion;