Accordion

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { cva, type VariantProps } from "class-variance-authority";
5import {
6  type AnimationSequence,
7  stagger,
8  useAnimate,
9  useReducedMotion,
10} from "motion/react";
11import {
12  type ComponentPropsWithoutRef,
13  createContext,
14  type ReactNode,
15  type RefObject,
16  useCallback,
17  useContext,
18  useEffect,
19  useId,
20  useRef,
21  useState,
22} from "react";
23 
24import { useAutoHeight } from "@/hooks/use-auto-height";
25 
26const EXPO_IN_OUT = [0.87, 0, 0.13, 1] as const;
27const EXPO_OUT = [0.16, 1, 0.3, 1] as const;
28const POWER2_IN_OUT = [0.45, 0, 0.55, 1] as const;
29 
30type IconMode = "rotate" | "fade" | "both";
31type DisabledBreakpoint = "mobile" | "tablet" | "desktop";
32type AccordionEase = readonly [number, number, number, number];
33 
34const DISABLE_MEDIA: Record<DisabledBreakpoint, string> = {
35  mobile: "(max-width: 479px)",
36  tablet: "(max-width: 991px)",
37  desktop: "(min-width: 992px)",
38};
39 
40interface AccordionContextValue {
41  allowMultiple: boolean;
42  animationsPaused: boolean;
43  defaultDuration: number;
44  defaultEase: AccordionEase;
45  defaultIconRotation: number;
46  disabledOn?: DisabledBreakpoint[];
47  iconMode: IconMode;
48  notifyItemOpen: (id: string) => void;
49  registerItem: (id: string, close: () => void) => void;
50  unregisterItem: (id: string) => void;
51}
52 
53interface AccordionItemContextValue {
54  contentId: string;
55  contentPanelRef: RefObject<HTMLElement | null>;
56  iconRef: RefObject<SVGSVGElement | null>;
57  isDisabled: boolean;
58  isOpen: boolean;
59  setPanelHeight: (height: number) => void;
60  toggle: () => void;
61  triggerId: string;
62  verticalBarRef: RefObject<SVGPathElement | null>;
63}
64 
65const AccordionContext = createContext<AccordionContextValue | null>(null);
66const AccordionItemContext = createContext<AccordionItemContextValue | null>(
67  null
68);
69 
70function useAccordionContext() {
71  const context = useContext(AccordionContext);
72  if (!context) {
73    throw new Error("Accordion components must be used within <Accordion>.");
74  }
75  return context;
76}
77 
78function useAccordionItemContext() {
79  const context = useContext(AccordionItemContext);
80  if (!context) {
81    throw new Error(
82      "Accordion subcomponents must be used within <AccordionItem>."
83    );
84  }
85  return context;
86}
87 
88function useDisabledOn(disabledOn?: DisabledBreakpoint[]) {
89  const [disabled, setDisabled] = useState(false);
90 
91  useEffect(() => {
92    if (!disabledOn?.length) {
93      setDisabled(false);
94      return;
95    }
96 
97// … truncated