collapsible

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({ ...props }: CollapsiblePrimitive.Trigger.Props) {
12  return (
13    <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
14  )
15}
16 
17function CollapsibleContent({
18  className,
19  ...props
20}: CollapsiblePrimitive.Panel.Props) {
21  return (
22    <CollapsiblePrimitive.Panel
23      data-slot="collapsible-content"
24      // Base UI publishes the measured panel height as
25      // `--collapsible-panel-height` and flags entering/leaving frames with
26      // `data-starting-style` / `data-ending-style` — transitioning height
27      // between that var and 0 gives the same slide as the Radix keyframes.
28      className={cn(
29        "h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] data-[ending-style]:h-0 data-[starting-style]:h-0",
30        className
31      )}
32      {...props}
33    />
34  )
35}
36 
37export { Collapsible, CollapsibleTrigger, CollapsibleContent }