Accordion

1"use client";
2 
3import {
4  Children,
5  isValidElement,
6  cloneElement,
7  useRef,
8  useState,
9  useEffect,
10  useLayoutEffect,
11  useCallback,
12  useMemo,
13  createContext,
14  useContext,
15  forwardRef,
16  type ReactElement,
17  type ReactNode,
18  type HTMLAttributes,
19} from "react";
20import { motion, AnimatePresence, useReducedMotion } from "motion/react";
21import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
22import { ChevronRight } from "lucide-react";
23 
24import { cn } from "@/lib/utils";
25import { spring } from "@/lib/springs";
26import { fontWeights } from "@/lib/font-weight";
27import { ProximityHoverPill } from "@/components/ui/proximity-hover-pill";
28import { useProximityHover, type ItemRect } from "@/hooks/use-proximity-hover";
29 
30// SSR-safe layout effect (client components still server-render in Next).
31const useIsoLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
32 
33// ─── Contexts ────────────────────────────────────────────────────────────────
34 
35interface AccordionContextValue {
36  registerItem: (index: number, element: HTMLElement | null) => void;
37  registerFullItem: (index: number, element: HTMLElement | null) => void;
38  activeIndex: number | null;
39  remeasure: () => void;
40  openValues: Set<string>;
41  openItemRects: Map<number, ItemRect>;
42}
43 
44const AccordionContext = createContext<AccordionContextValue | null>(null);
45 
46function useAccordionContext() {
47  const ctx = useContext(AccordionContext);
48  if (!ctx) throw new Error("AccordionItem must be used within an Accordion");
49  return ctx;
50}
51 
52interface AccordionItemContextValue {
53  index?: number;
54  value: string;
55  isOpen: boolean;
56  triggerRef: React.MutableRefObject<HTMLDivElement | null>;
57}
58 
59const AccordionItemContext = createContext<AccordionItemContextValue | null>(null);
60 
61function useAccordionItemContext() {
62  const ctx = useContext(AccordionItemContext);
63  if (!ctx)
64    throw new Error("AccordionTrigger/AccordionContent must be used within an AccordionItem");
65  return ctx;
66}
67 
68// ─── Accordion ───────────────────────────────────────────────────────────────
69// Every item shares one container: a background pill morphs between the item
70// nearest the cursor and the currently open item(s) — "proximity hover"
71// … truncated