Collapsible

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible";

export default function Example() {
  return <Collapsible />;
}

"use client";

import { forwardRef, useState } from "react";
import { cn } from "@/lib/utils";

const Collapsible = forwardRef(({ className, defaultOpen = false, children, ...props }, ref) => {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div ref={ref} className={cn(className)} data-state={open ? "open" : "closed"} {...props}>
      {typeof children === "function" ? children({ open, setOpen }) : children}
    </div>
  );
});
Collapsible.displayName = "Collapsible";

const CollapsibleTrigger = forwardRef(({ className, onClick, ...props }, ref) => (
  <button ref={ref} className={cn(className)} onClick={onClick} {...props} />
));
CollapsibleTrigger.displayName = "CollapsibleTrigger";

const CollapsibleContent = forwardRef(({ className, open, ...props }, ref) => {
  if (!open) return null;
  return <div ref={ref} className={cn("overflow-hidden", className)} {...props} />;
});
CollapsibleContent.displayName = "CollapsibleContent";

export { Collapsible, CollapsibleTrigger, CollapsibleContent };