{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion",
  "title": "Accordion",
  "description": "A shadcn-style accordion component built with Ark UI primitives.",
  "dependencies": ["@ark-ui/react", "lucide-react", "tw-animate-css"],
  "files": [
    {
      "path": "src/components/ui/accordion.tsx",
      "content": "\"use client\";\n\nimport {\n  Accordion as AccordionPrimitive,\n  useAccordion,\n} from \"@ark-ui/react/accordion\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport const Accordion = ({\n  className,\n  ...props\n}: AccordionPrimitive.RootProps) => {\n  return (\n    <AccordionPrimitive.Root\n      className={cn(\n        \"flex w-full data-[orientation=vertical]:flex-col data-[orientation=horizontal]:max-h-[calc(100vh-8rem)] data-[orientation=horizontal]:h-80 data-[orientation=horizontal]:flex-row\",\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const AccordionItem = ({\n  className,\n  ...props\n}: AccordionPrimitive.ItemProps) => {\n  return (\n    <AccordionPrimitive.Item\n      className={cn(\n        \"[overflow-anchor:none] border-b border-border last:border-b-0 data-[orientation=horizontal]:flex data-[orientation=horizontal]:border-b-0 data-[orientation=horizontal]:border-e data-[orientation=horizontal]:last:border-e-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const AccordionTrigger = ({\n  className,\n  children,\n  indicator,\n  ...props\n}: AccordionPrimitive.ItemTriggerProps & {\n  indicator?: ReactNode;\n}) => {\n  return (\n    <AccordionPrimitive.ItemTrigger\n      className={cn(\n        \"flex w-full flex-1 cursor-pointer items-center justify-between gap-3 rounded-md border-none bg-transparent px-2 py-4 text-start font-medium text-sm leading-normal outline-none transition-all focus-visible:ring-[3px] focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-64 data-[orientation=vertical]:min-h-10 data-[orientation=horizontal]:h-full data-[orientation=horizontal]:min-w-10 data-[orientation=horizontal]:[writing-mode:sideways-lr]\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <AccordionPrimitive.ItemIndicator\n        data-slot=\"accordion-indicator\"\n        className=\"inline-flex origin-center items-center justify-center text-foreground transition-transform duration-200 ease-out data-[state=open]:rotate-180 [&_svg]:size-[1.2em] data-[orientation=horizontal]:-rotate-90 data-[orientation=horizontal]:data-[state=open]:rotate-90\"\n      >\n        {indicator || (\n          <ChevronDownIcon className=\"pointer-events-none size-4 shrink-0 translate-y-0.5 opacity-80\" />\n        )}\n      </AccordionPrimitive.ItemIndicator>\n    </AccordionPrimitive.ItemTrigger>\n  );\n};\n\nexport const AccordionPanel = ({\n  className,\n  children,\n  containerClassName,\n  ...props\n}: AccordionPrimitive.ItemContentProps & { containerClassName?: string }) => {\n  return (\n    <AccordionPrimitive.ItemContent\n      className={cn(\n        \"overflow-hidden rounded-lg text-muted-foreground text-sm [--radix-accordion-content-height:var(--height)] data-[orientation=vertical]:data-[state=open]:animate-accordion-down data-[orientation=vertical]:data-[state=closed]:animate-accordion-up data-[orientation=horizontal]:will-change-[width] data-[orientation=horizontal]:data-[state=open]:animate-[accordion-open-x_200ms_ease-out] data-[orientation=horizontal]:data-[state=closed]:animate-[accordion-close-x_200ms_ease-out] data-[orientation=horizontal]:*:whitespace-nowrap data-[orientation=horizontal]:[&>div]:pb-2.5\",\n        className,\n      )}\n      {...props}\n    >\n      <div className={cn(\"px-2 pt-0 pb-4 leading-normal\", containerClassName)}>\n        {children}\n      </div>\n    </AccordionPrimitive.ItemContent>\n  );\n};\n\nexport const AccordionContext = AccordionPrimitive.Context;\n\nexport const AccordionProvider = ({\n  children,\n  className,\n  ...props\n}: AccordionPrimitive.RootProviderProps) => {\n  return (\n    <AccordionPrimitive.RootProvider\n      className={cn(\"w-full\", className)}\n      {...props}\n    >\n      {children}\n    </AccordionPrimitive.RootProvider>\n  );\n};\n\nexport { useAccordion };\n",
      "type": "registry:ui",
      "target": "src/components/ui/accordion.tsx"
    }
  ],
  "css": {
    "@keyframes accordion-open-x": {
      "from": {
        "width": "0",
        "opacity": "0"
      },
      "to": {
        "width": "var(--width)",
        "opacity": "1"
      }
    },
    "@keyframes accordion-close-x": {
      "from": {
        "width": "var(--width)",
        "opacity": "1"
      },
      "to": {
        "width": "0",
        "opacity": "0"
      }
    }
  },
  "type": "registry:ui"
}