collapsible

1import * as React from "react"
2import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible"
3 
4import { cn } from "@/lib/utils"
5 
6function Collapsible({ ...props }: BaseCollapsible.Root.Props) {
7	return <BaseCollapsible.Root data-slot="collapsible" {...props} />
8}
9 
10function CollapsibleTrigger({ ...props }: BaseCollapsible.Trigger.Props) {
11	return <BaseCollapsible.Trigger data-slot="collapsible-trigger" {...props} />
12}
13 
14function CollapsibleContent({
15	className,
16	...props
17}: BaseCollapsible.Panel.Props) {
18	return (
19		<BaseCollapsible.Panel
20			data-slot="collapsible-content"
21			className={cn(
22				"h-(--collapsible-panel-height) overflow-hidden text-sm transition-all duration-200 data-ending-style:h-0 data-starting-style:h-0 [&[hidden]:not([hidden='until-found'])]:hidden",
23				className
24			)}
25			{...props}
26		/>
27	)
28}
29 
30export { Collapsible, CollapsibleTrigger, CollapsibleContent }