"use client" import * as React from "react" import { Collapsible as CollapsiblePrimitive } from "radix-ui" import { ChevronDownIcon } from "lucide-react" import { cn } from "./lib/utils" type CollapsibleProps = Omit, "title"> & { /** The trigger's text: a full-width button with a chevron that turns as it opens. */ title?: React.ReactNode /** Your own trigger in place of the title's, e.g. a Button; it must take a ref and focus. */ trigger?: React.ReactElement /** At the end of the title's row, before the chevron, e.g. a count or a badge. */ meta?: React.ReactNode /** What opens and closes. */ children?: React.ReactNode classNames?: { trigger?: string; content?: string } } /** * One section that opens and closes, in one tag: `…`. For a list * of sections where opening one closes the others, use Accordion. */ function Collapsible({ title, trigger, meta, children, className, classNames, ...props }: CollapsibleProps) { return ( {trigger ? ( {trigger} ) : ( title !== undefined && ( {title} {meta !== undefined && {meta}} ) )} div]:animate-in [&[data-state=open]>div]:fade-in-0 [&[data-state=open]>div]:slide-in-from-top-1 [&[data-state=open]>div]:duration-(--duration-considered) [&[data-state=open]>div]:ease-standard", "[&[data-state=closed]>div]:animate-out [&[data-state=closed]>div]:fade-out-0 [&[data-state=closed]>div]:duration-(--duration-fast) [&[data-state=closed]>div]:ease-standard [&[data-state=closed]>div]:fill-mode-forwards", "motion-reduce:[&>div]:animate-none" )} >

{children}

) } export { Collapsible, type CollapsibleProps }