Collapsible

1"use client";
2 
3import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
4import { cn } from "@/registry/optics/lib/utils";
5 
6function Collapsible({
7	open = false,
8	defaultOpen = false,
9	onOpenChange = undefined,
10	disabled = false,
11	className = "",
12	...props
13}) {
14	return (
15		<CollapsiblePrimitive.Root
16			data-slot="collapsible"
17			open={open}
18			defaultOpen={defaultOpen}
19			onOpenChange={onOpenChange}
20			disabled={disabled}
21			className={className}
22			{...props}
23		/>
24	);
25}
26 
27function CollapsibleTrigger({ disabled = false, className = "", ...props }) {
28	return (
29		<CollapsiblePrimitive.Trigger
30			data-slot="collapsible-trigger"
31			disabled={disabled}
32			className={className}
33			{...props}
34		/>
35	);
36}
37 
38function CollapsibleContent({
39	className = "",
40	forceMount = false,
41	children = null,
42	...props
43}) {
44	return (
45		<CollapsiblePrimitive.Panel
46			data-slot="collapsible-content"
47			keepMounted={forceMount}
48			className={cn(
49				"grid transition-[grid-template-rows,opacity] duration-300 ease-out",
50				"data-[closed]:grid-rows-[0fr] data-[closed]:opacity-0",
51				"data-[starting-style]:grid-rows-[0fr] data-[ending-style]:grid-rows-[0fr]",
52				"data-[open]:grid-rows-[1fr] data-[open]:opacity-100",
53				className,
54			)}
55			{...props}
56		>
57			<div className={cn("min-h-0 overflow-hidden", className)}>{children}</div>
58		</CollapsiblePrimitive.Panel>
59	);
60}
61 
62Collapsible.displayName = "Collapsible";
63CollapsibleTrigger.displayName = "CollapsibleTrigger";
64CollapsibleContent.displayName = "CollapsibleContent";
65 
66export { Collapsible, CollapsibleTrigger, CollapsibleContent };