41 lines · 1.2 KB · TypeScript
RawDownload
"use client"; import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible"; import { cn } from "~/lib/utils"; function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;} function CollapsibleTrigger({ className, ...props }: CollapsiblePrimitive.Trigger.Props) {  return (    <CollapsiblePrimitive.Trigger      className={cn("cursor-pointer", className)}      data-slot="collapsible-trigger"      {...props}    />  );} function CollapsiblePanel({ className, ...props }: CollapsiblePrimitive.Panel.Props) {  // Reuses the local shadcn/Base UI panel; skip height travel for reduced motion.  // https://ui.shadcn.com/docs/components/base/collapsible  return (    <CollapsiblePrimitive.Panel      className={cn(        "h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-200 motion-reduce:transition-none data-ending-style:h-0 data-starting-style:h-0 data-open:data-ending-style:[height:var(--collapsible-panel-height)]",        className,      )}      data-slot="collapsible-panel"      {...props}    />  );} export {  Collapsible,  CollapsibleTrigger,  CollapsiblePanel,  CollapsiblePanel as CollapsibleContent,};