Collapsible

1"use client";
2
3import { useMemo } from "react";
4import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
5
6import { cn } from "@/lib/classes";
7
8const cssAnimationPresets = {
9  none: "transition-none",
10  scale: [
11    `[transition-property:scale,opacity,height] [will-change:scale,opacity,height] origin-top`,
12    `data-starting-style:scale-80 data-starting-style:opacity-0 data-starting-style:h-0 data-ending-style:opacity-0 data-ending-style:h-0 data-ending-style:scale-80`,
13  ],
14  fade: [
15    `[transition-property:opacity,height] [will-change:opacity,height]`,
16    `data-starting-style:opacity-0 data-starting-style:h-0 data-ending-style:opacity-0 data-ending-style:h-0`,
17  ],
18  slideOutside: [
19    `[transition-property:translate,opacity,height] [will-change:translate,opacity,height]`,
20    `data-starting-style:opacity-0 data-starting-style:translate-y-[18px] data-ending-style:translate-y-[18px] data-ending-style:opacity-0 data-ending-style:h-0 data-starting-style:h-0 `,
21  ],
22  slideInside: [
23    `[transition-property:translate,opacity,height] [will-change:translate,opacity,height]`,
24    `data-starting-style:opacity-0 data-starting-style:translate-y-[-18px] data-ending-style:translate-y-[-18px] data-ending-style:opacity-0 data-ending-style:h-0 data-starting-style:h-0 `,
25  ],
26  motion: [
27    `[transition-property:translate,scale,opacity,rotateX,rotateY,transform,height] [will-change:translate,scale,opacity,rotateX,rotateY,transform,height] `,
28    `[transform:perspective(1000px)] origin-top`,
29    `data-starting-style:translate-y-[7px] data-starting-style:opacity-0 data-starting-style:scale-[0.26] data-starting-style:rotate-x-[70deg] data-ending-style:translate-y-[7px] data-ending-style:opacity-0 data-ending-style:scale-[0.26] data-ending-style:rotate-x-[70deg] data-starting-style:h-0 data-ending-style:h-0`,
30  ],
31  motionBlur: [
32    `[transition-property:translate,scale,opacity,rotateX,rotateY,transform,filter,height] [will-change:translate,scale,opacity,rotateX,rotateY,transform,filter,height] origin-top`,
33    `[transform:perspective(1000px)]`,
34    `data-starting-style:blur-[9px] data-ending-style:blur-[9px]`,
35// … truncated