Collapsible

1import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible"
2 
3import { cn } from "@/registry/lib/surface"
4 
5function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
6  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
7}
8 
9function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
10  return (
11    <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
12  )
13}
14 
15function CollapsibleContent({
16  className,
17  children,
18  ...props
19}: CollapsiblePrimitive.Panel.Props) {
20  return (
21    <CollapsiblePrimitive.Panel
22      data-slot="collapsible-content"
23      className="overflow-hidden text-sm duration-[var(--d-drift)] ease-[var(--ease-drift)] data-open:animate-collapsible-down data-closed:animate-collapsible-up"
24      {...props}
25    >
26      <div className={cn("h-(--collapsible-panel-height)", className)}>
27        {children}
28      </div>
29    </CollapsiblePrimitive.Panel>
30  )
31}
32 
33export { Collapsible, CollapsibleTrigger, CollapsibleContent }