"use client" import * as React from "react" import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion" import { ChevronDown } from "lucide-react" import { LayoutGroup, 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 } const AccordionFocusContext = React.createContext("atro-accordion-focus") function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) { const layoutId = React.useId() return ( ) } function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) { return ( ) } function AccordionHeader({ className, ...props }: AccordionPrimitive.Header.Props) { return ( ) } function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props) { const reduce = useReducedMotion() const focusId = React.useContext(AccordionFocusContext) return ( ( )} type="button" > {state.open ? ( ) : null} {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 AccordionPanel({ className, children, ...props }: AccordionPrimitive.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 { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger, }