1"use client";
2
3import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
4
5import { cn } from "~/lib/utils";
6
7function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
8 return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
9}
10
11function CollapsibleTrigger({ className, ...props }: CollapsiblePrimitive.Trigger.Props) {
12 return (
13 <CollapsiblePrimitive.Trigger
14 className={cn("cursor-pointer", className)}
15 data-slot="collapsible-trigger"
16 {...props}
17 />
18 );
19}
20
21function CollapsiblePanel({
22 className,
23 animate = true,
24 ...props
25}: CollapsiblePrimitive.Panel.Props & { animate?: boolean }) {
26 // Reuses the local shadcn/Base UI panel; skip height travel for reduced motion.
27 // https://ui.shadcn.com/docs/components/base/collapsible
28 return (
29 <CollapsiblePrimitive.Panel
30 className={cn(
31 "overflow-hidden",
32 animate &&
33 "h-(--collapsible-panel-height) transition-[height] duration-200 motion-reduce:transition-none data-ending-style:h-0 data-starting-style:h-0 data-open:data-ending-style:[height:var(--collapsible-panel-height)]",
34 className,
35 )}
36 data-slot="collapsible-panel"
37 {...props}
38 />
39 );
40}
41
42export {
43 Collapsible,
44 CollapsibleTrigger,
45 CollapsiblePanel,
46 CollapsiblePanel as CollapsibleContent,
47};