{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "components-headless-accordion",
  "title": "Accordion",
  "description": "A vertically stacked set of interactive headings that each reveal an associated section of content.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@animate-ui/v1/primitives-headless-disclosure"
  ],
  "files": [
    {
      "path": "registry/components/headless/accordion/index.tsx",
      "content": "import * as React from 'react';\nimport { motion } from 'motion/react';\nimport { ChevronDownIcon } from 'lucide-react';\n\nimport {\n  Disclosure as DisclosurePrimitive,\n  DisclosureButton as DisclosureButtonPrimitive,\n  DisclosurePanel as DisclosurePanelPrimitive,\n  type DisclosureProps as DisclosurePrimitiveProps,\n  type DisclosureButtonProps as DisclosureButtonPrimitiveProps,\n  type DisclosurePanelProps as DisclosurePanelPrimitiveProps,\n} from '@/components/animate-ui/primitives/headless/disclosure';\nimport { cn } from '@/lib/utils';\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  DisclosurePrimitiveProps<TTag>;\n\nfunction AccordionItem<TTag extends React.ElementType = 'div'>({\n  className,\n  children,\n  ...props\n}: AccordionItemProps<TTag>) {\n  return (\n    <DisclosurePrimitive {...props}>\n      {(bag) => (\n        <div className={cn('border-b last:border-b-0', className)}>\n          {typeof children === 'function' ? children(bag) : children}\n        </div>\n      )}\n    </DisclosurePrimitive>\n  );\n}\n\ntype AccordionButtonProps = DisclosureButtonPrimitiveProps & {\n  showArrow?: boolean;\n};\n\nfunction AccordionButton({\n  className,\n  children,\n  showArrow = true,\n  ...props\n}: AccordionButtonProps) {\n  return (\n    <DisclosureButtonPrimitive\n      className={cn(\n        'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 w-full rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-open]>svg]:rotate-180',\n        className,\n      )}\n      {...props}\n    >\n      {(bag) => (\n        <>\n          {typeof children === 'function' ? children(bag) : children}\n          {showArrow && (\n            <ChevronDownIcon className=\"text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200\" />\n          )}\n        </>\n      )}\n    </DisclosureButtonPrimitive>\n  );\n}\n\ntype AccordionPanelProps<TTag extends React.ElementType = typeof motion.div> =\n  DisclosurePanelPrimitiveProps<TTag>;\n\nfunction AccordionPanel<TTag extends React.ElementType = typeof motion.div>({\n  className,\n  children,\n  ...props\n}: AccordionPanelProps<TTag>) {\n  return (\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    <DisclosurePanelPrimitive<any> {...props}>\n      {(bag) => (\n        <div className={cn('text-sm pt-0 pb-4', className)}>\n          {typeof children === 'function' ? children(bag) : children}\n        </div>\n      )}\n    </DisclosurePanelPrimitive>\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/components/headless/accordion.tsx"
    }
  ],
  "type": "registry:ui"
}