{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion",
  "type": "registry:ui",
  "title": "Accordion",
  "description": "Accessible React accordion on Base UI, with bordered items, a rotating chevron and animated panels. Keyboard navigable, with one or many items open at once.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/accordion.tsx",
      "type": "registry:ui",
      "target": "components/ui/accordion.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"rounded-xl border border-border bg-surface\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"flex flex-1 items-center justify-between gap-3 px-4 py-3 text-left text-sm font-medium text-fg\",\n          \"outline-none transition-[background-color] duration-[70ms] hover:bg-sunken/60\",\n          \"focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg\",\n          \"[&[data-panel-open]>svg]:rotate-180\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon className=\"size-4 shrink-0 text-fg-muted transition-transform duration-[140ms]\" />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionPanel({ className, children, ...props }: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-panel\"\n      className={cn(\n        \"overflow-hidden text-sm text-fg-muted data-[ending-style]:animate-out data-[starting-style]:animate-in\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"border-t border-border px-4 py-3\">{children}</div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionPanel }\n"
    }
  ]
}