Accordion

1"use client";
2
3import React, {
4  createContext,
5  useContext,
6  useEffect,
7  useMemo,
8  useState,
9} from "react";
10import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
11
12import { cn } from "@/lib/classes";
13
14const cssAnimationPresets = {
15  none: "transition-none",
16  fade: [
17    `[transition-property:opacity,height] [will-change:opacity,height]`,
18    `data-starting-style:opacity-0 data-ending-style:opacity-0 data-starting-style:h-0 data-ending-style:h-0`,
19  ],
20  scale: [
21    `[transition-property:scale,opacity,height] [will-change:scale,opacity,height] origin-left`,
22    `data-starting-style:scale-85 data-starting-style:opacity-0 data-starting-style:h-0 data-ending-style:opacity-0 data-ending-style:h-0 data-ending-style:scale-85`,
23  ],
24  slide: [
25    `[transition-property:translate,opacity,height] [will-change:translate,opacity,height]`,
26    `data-starting-style:opacity-0 data-starting-style:translate-y-[10px] data-ending-style:translate-y-[10px] data-ending-style:opacity-0 data-ending-style:h-0 data-starting-style:h-0`,
27  ],
28  perspective: [
29    `[transition-property:opacity,rotateX,rotateY,transform,height] [will-change:opacity,rotateX,rotateY,transform,height]`,
30    `[transform:perspective(1000px)] origin-top`,
31    `data-starting-style:h-0 data-ending-style:h-0`,
32    `data-starting-style:opacity-0 data-ending-style:opacity-0`,
33    `data-starting-style:-rotate-x-[90deg] data-ending-style:-rotate-x-[90deg]`,
34  ],
35  perspectiveBlur: [
36    `[transition-property:opacity,rotateX,rotateY,transform,height,filter] [will-change:opacity,rotateX,rotateY,transform,height,filter]`,
37    `[transform:perspective(1000px)] origin-top`,
38    `data-starting-style:h-0 data-ending-style:h-0`,
39    `data-starting-style:opacity-0 data-ending-style:opacity-0`,
40    `data-starting-style:-rotate-x-[90deg] data-ending-style:-rotate-x-[90deg]`,
41    `data-starting-style:blur-[9px] data-ending-style:blur-[9px]`,
42  ],
43};
44
45const cssTransitionPresets = {
46  inExpo: `duration-[0.35s] ease-[cubic-bezier(0.95,0.05,0.795,0.035)]`,
47  outExpo: `duration-[0.35s] ease-[cubic-bezier(0.19,1,0.22,1)]`,
48  inOutExpo: `duration-[0.35s] ease-[cubic-bezier(1,0,0,1)]`,
49  anticipate: `duration-[0.35s] ease-[cubic-bezier(1,-0.4,0.35,0.95)]`,
50  quickOut: `duration-[0.35s] ease-out`,
51  overshootOut: `duration-[0.35s] ease-[cubic-bezier(0.175,0.885,0.32,1.275)]`,
52  swiftOut: `duration-[0.35s] ease-[cubic-bezier(0.175,0.885,0.32,1.1)]`,
53// … truncated