Accordion

1"use client";
2 
3import {
4  useRef,
5  useState,
6  useEffect,
7  useLayoutEffect,
8  useCallback,
9  useMemo,
10  createContext,
11  useContext,
12  forwardRef,
13  type ReactNode,
14  type HTMLAttributes,
15} from "react";
16import { motion, AnimatePresence } from "framer-motion";
17import * as AccordionPrimitive from "@radix-ui/react-accordion";
18 
19// SSR-safe layout effect (client components still server-render in Next).
20const useIsoLayoutEffect =
21  typeof window !== "undefined" ? useLayoutEffect : useEffect;
22import { cn } from "@/lib/utils";
23import { useIcon } from "@/lib/icon-context";
24import { spring } from "@/lib/springs";
25import { fontWeights } from "@/lib/font-weight";
26import { useProximityHover } from "@/hooks/use-proximity-hover";
27import { useShape } from "@/lib/shape-context";
28 
29// ─── Contexts ────────────────────────────────────────────────────────────────
30 
31interface ItemRect {
32  top: number;
33  left: number;
34  width: number;
35  height: number;
36}
37 
38interface AccordionGroupContextValue {
39  registerItem: (index: number, element: HTMLElement | null) => void;
40  registerFullItem: (index: number, element: HTMLElement | null) => void;
41  activeIndex: number | null;
42  grouped: true;
43  remeasure: () => void;
44  openValues: Set<string>;
45  openItemRects: Map<number, ItemRect>;
46}
47 
48const AccordionGroupContext =
49  createContext<AccordionGroupContextValue | null>(null);
50 
51function useAccordionGroup() {
52  return useContext(AccordionGroupContext);
53}
54 
55interface AccordionItemContextValue {
56  index?: number;
57  value: string;
58  isOpen: boolean;
59  triggerRef: React.MutableRefObject<HTMLDivElement | null>;
60}
61 
62const AccordionItemContext =
63  createContext<AccordionItemContextValue | null>(null);
64 
65function useAccordionItemContext() {
66  const ctx = useContext(AccordionItemContext);
67  if (!ctx)
68    throw new Error(
69      "AccordionTrigger/AccordionContent must be used within an AccordionItem"
70    );
71  return ctx;
72}
73 
74// ─── AccordionGroup ──────────────────────────────────────────────────────────
75 
76type AccordionGroupSingleProps = {
77  type?: "single";
78  value?: string;
79  defaultValue?: string;
80  onValueChange?: (value: string) => void;
81  collapsible?: boolean;
82};
83 
84type AccordionGroupMultipleProps = {
85  type: "multiple";
86  value?: string[];
87// … truncated