Collapsible

1"use client";
2 
3import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
4import * as React from "react";
5 
6const Collapsible = ({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) => (
7  <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
8);
9 
10const CollapsibleTrigger = ({
11  asChild = false,
12  children,
13  ...props
14}: React.ComponentProps<typeof CollapsiblePrimitive.Trigger> & {
15  asChild?: boolean;
16}) => {
17  const render =
18    asChild && React.isValidElement(children) ? (children as React.ReactElement) : undefined;
19 
20  return (
21    <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" render={render} {...props}>
22      {asChild ? null : children}
23    </CollapsiblePrimitive.Trigger>
24  );
25};
26 
27const CollapsibleContent = ({
28  forceMount,
29  keepMounted,
30  ...props
31}: React.ComponentProps<typeof CollapsiblePrimitive.Panel> & {
32  forceMount?: boolean;
33}) => (
34  <CollapsiblePrimitive.Panel
35    data-slot="collapsible-content"
36    keepMounted={forceMount ?? keepMounted}
37    {...props}
38  />
39);
40 
41export { Collapsible, CollapsibleTrigger, CollapsibleContent };