"use client" import * as React from "react" import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible" import { ChevronDown } from "lucide-react" import { motion, useReducedMotion } from "motion/react" import { revealTween } from "@/lib/motion" import { cn } from "@/lib/utils" function withoutDomAnimationHandlers>( props: T ) { const { onAnimationStart: _onAnimationStart, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...rest } = props return rest } function withoutDomAnimationHandlersAndChildren< T extends Record, >(props: T) { const { children: _children, ...rest } = withoutDomAnimationHandlers(props) return rest } function Collapsible({ className, ...props }: CollapsiblePrimitive.Root.Props) { return ( ) } function CollapsibleTrigger({ className, children, ...props }: CollapsiblePrimitive.Trigger.Props) { const reduce = useReducedMotion() return ( ( )} type="button" > {children} ) } > {reduce ? ( <> {children} ) : ( children )} ) } /** * Panel height:auto via Motion (Family Values fluidity). * keepMounted so exit settle can finish; reduced motion uses Base UI CSS height. */ function CollapsiblePanel({ className, children, ...props }: CollapsiblePrimitive.Panel.Props) { const reduce = useReducedMotion() return ( { const open = state.open && state.transitionStatus !== "ending" return ( )} initial={false} animate={ open ? { height: "auto", opacity: 1 } : { height: 0, opacity: 0 } } transition={revealTween} /> ) } } >

{children}

) } export { Collapsible, CollapsiblePanel, CollapsibleTrigger }