{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "headless-accordion",
  "type": "registry:ui",
  "title": "Headless Accordion",
  "description": "A vertically stacked set of interactive headings that each reveal an associated section of content built with Headless UI.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "https://animate-ui.com/r/headless-disclosure"
  ],
  "files": [
    {
      "path": "registry/headless/accordion/index.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Transition } from 'motion/react';\nimport { ChevronDown } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\nimport {\n  Disclosure,\n  DisclosureButton,\n  DisclosurePanel,\n  type DisclosureProps,\n  type DisclosureButtonProps,\n  type DisclosurePanelProps,\n} from '@/components/animate-ui/headless/disclosure';\n\ntype AccordionProps<TTag extends React.ElementType = 'div'> =\n  React.ComponentProps<TTag> & {\n    children: React.ReactNode;\n    as?: TTag;\n  };\n\nfunction Accordion<TTag extends React.ElementType = 'div'>({\n  as: Component = 'div',\n  ...props\n}: AccordionProps<TTag>) {\n  return <Component data-slot=\"accordion\" {...props} />;\n}\n\ntype AccordionItemProps<TTag extends React.ElementType = 'div'> =\n  DisclosureProps<TTag> & {\n    className?: string;\n    as?: TTag;\n  };\n\nfunction AccordionItem<TTag extends React.ElementType = 'div'>(\n  props: AccordionItemProps<TTag>,\n) {\n  const { className, as = 'div', ...rest } = props;\n\n  return (\n    <Disclosure\n      data-slot=\"accordion-item\"\n      {...rest}\n      as={as as React.ElementType}\n      className={cn('border-b', className)}\n    />\n  );\n}\n\ntype AccordionButtonProps<TTag extends React.ElementType = 'button'> =\n  DisclosureButtonProps<TTag> & {\n    transition?: Transition;\n    chevron?: boolean;\n    className?: string;\n    as?: TTag;\n  };\n\nfunction AccordionButton<TTag extends React.ElementType = 'button'>(\n  props: AccordionButtonProps<TTag>,\n) {\n  const {\n    children,\n    className,\n    transition = { type: 'spring', stiffness: 150, damping: 17 },\n    chevron = true,\n    ...rest\n  } = props;\n\n  return (\n    <DisclosureButton\n      data-slot=\"accordion-button\"\n      {...rest}\n      className={cn(\n        'flex w-full text-start flex-1 items-center justify-between py-4 font-medium hover:underline',\n        className,\n      )}\n    >\n      {(bag) => (\n        <>\n          {typeof children === 'function' ? children(bag) : children}\n\n          {chevron && (\n            <motion.div\n              data-slot=\"accordion-button-chevron\"\n              animate={{ rotate: bag.open ? 180 : 0 }}\n              transition={transition}\n            >\n              <ChevronDown className=\"size-5 shrink-0\" />\n            </motion.div>\n          )}\n        </>\n      )}\n    </DisclosureButton>\n  );\n}\n\ntype AccordionPanelProps<TTag extends React.ElementType = 'div'> =\n  DisclosurePanelProps<TTag> & {\n    as?: TTag;\n  };\n\nfunction AccordionPanel<TTag extends React.ElementType = 'div'>(\n  props: AccordionPanelProps<TTag>,\n) {\n  const { children, className, as = 'div', ...rest } = props;\n\n  return (\n    <DisclosurePanel\n      data-slot=\"accordion-panel\"\n      {...rest}\n      as={as as React.ElementType}\n    >\n      {(bag) => (\n        <div className={cn('pb-4 pt-0 text-sm', className)}>\n          {typeof children === 'function' ? children(bag) : children}\n        </div>\n      )}\n    </DisclosurePanel>\n  );\n}\n\nexport {\n  Accordion,\n  AccordionItem,\n  AccordionButton,\n  AccordionPanel,\n  type AccordionProps,\n  type AccordionItemProps,\n  type AccordionButtonProps,\n  type AccordionPanelProps,\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/headless/accordion.tsx"
    }
  ]
}