{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion",
  "title": "Accordion",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-react/components/accordion/accordion.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport * as AccordionPrimitive from '@radix-ui/react-accordion'\nimport { ChevronDown } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport {\n  accordionVariants,\n  accordionItemVariants,\n  accordionTriggerVariants,\n} from './accordion.variants'\n\ntype AccordionVariant = 'default' | 'separated' | 'ghost'\n\n// The Vue source threads the chosen variant from <Accordion> down to each\n// <AccordionItem>/<AccordionTrigger> via provide/inject. React's equivalent is\n// context — the Root sets it, Item/Trigger read it (default 'default').\nconst AccordionVariantContext = React.createContext<AccordionVariant>('default')\n\nconst Accordion = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & { variant?: AccordionVariant }\n>(({ className, variant = 'default', ...props }, ref) => (\n  <AccordionVariantContext.Provider value={variant}>\n    <AccordionPrimitive.Root\n      ref={ref}\n      data-uipkge=\"\"\n      data-slot=\"accordion\"\n      data-variant={variant}\n      className={cn(accordionVariants({ variant }), className)}\n      {...props}\n    />\n  </AccordionVariantContext.Provider>\n))\nAccordion.displayName = 'Accordion'\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => {\n  const variant = React.useContext(AccordionVariantContext)\n  return (\n    <AccordionPrimitive.Item\n      ref={ref}\n      data-uipkge=\"\"\n      data-slot=\"accordion-item\"\n      className={cn(accordionItemVariants({ variant }), className)}\n      {...props}\n    />\n  )\n})\nAccordionItem.displayName = 'AccordionItem'\n\nconst AccordionHeader = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Header>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Header>\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Header\n    ref={ref}\n    data-uipkge=\"\"\n    data-slot=\"accordion-header\"\n    className={cn('flex', className)}\n    {...props}\n  />\n))\nAccordionHeader.displayName = 'AccordionHeader'\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => {\n  const variant = React.useContext(AccordionVariantContext)\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        ref={ref}\n        data-uipkge=\"\"\n        data-slot=\"accordion-trigger\"\n        className={cn(accordionTriggerVariants({ variant }), className)}\n        {...props}\n      >\n        {children}\n        <ChevronDown\n          className=\"text-muted-foreground size-4 shrink-0 transition-transform duration-200 group-data-[state=open]/accordion-trigger:rotate-180\"\n          aria-hidden=\"true\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n})\nAccordionTrigger.displayName = 'AccordionTrigger'\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    data-uipkge=\"\"\n    data-slot=\"accordion-content\"\n    className={cn(\n      'text-muted-foreground overflow-hidden text-sm',\n      'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',\n      className,\n    )}\n    {...props}\n  >\n    <div className=\"pt-0 pb-4\">{children}</div>\n  </AccordionPrimitive.Content>\n))\nAccordionContent.displayName = 'AccordionContent'\n\nexport { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent }\n",
      "type": "registry:ui",
      "target": "~/components/ui/accordion/accordion.tsx"
    },
    {
      "path": "packages/registry-react/components/accordion/accordion.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\n/**\n * Variant definitions live in their own file (rather than the package\n * `index.ts`) so consuming Vue SFCs can import without creating a circular\n * dependency through the index. See card.variants.ts for the canonical\n * example + the SSR symptom that motivated the split.\n */\n\nexport const accordionVariants = cva('w-full', {\n  variants: {\n    variant: {\n      // Bottom-border between items (the classic shadcn look).\n      default: '',\n      // Each item is its own bordered card with a small gap between them.\n      separated: 'space-y-2',\n      // Borderless. Use when the parent container already provides framing.\n      ghost: '',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n})\n\nexport const accordionItemVariants = cva('', {\n  variants: {\n    variant: {\n      default: 'border-b border-border last:border-b-0',\n      separated: 'rounded-md border border-border bg-card overflow-hidden',\n      ghost: '',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n})\n\nexport const accordionTriggerVariants = cva(\n  'group/accordion-trigger flex w-full items-center justify-between gap-3 text-sm font-medium text-foreground outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/40 hover:text-primary disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default: 'py-4',\n        separated: 'px-4 py-3 hover:bg-muted/50',\n        ghost: 'py-3',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type AccordionVariants = VariantProps<typeof accordionVariants>\n\nexport type AccordionItemVariants = VariantProps<typeof accordionItemVariants>\n\nexport type AccordionTriggerVariants = VariantProps<typeof accordionTriggerVariants>\n",
      "type": "registry:ui",
      "target": "~/components/ui/accordion/accordion.variants.ts"
    },
    {
      "path": "packages/registry-react/components/accordion/index.ts",
      "content": "export {\n  Accordion,\n  AccordionItem,\n  AccordionHeader,\n  AccordionTrigger,\n  AccordionContent,\n} from './accordion'\n\n// Re-export variant API from the sibling file (kept separate to avoid an\n// import cycle and to give consumers a stable `accordionVariants` path).\nexport {\n  accordionVariants,\n  accordionItemVariants,\n  accordionTriggerVariants,\n  type AccordionVariants,\n  type AccordionItemVariants,\n  type AccordionTriggerVariants,\n} from './accordion.variants'\n",
      "type": "registry:ui",
      "target": "~/components/ui/accordion/index.ts"
    }
  ],
  "dependencies": [
    "@radix-ui/react-accordion",
    "class-variance-authority",
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Vertically stacked, collapsible panels — one or many open at a time. Use for FAQs, settings groups, and any place where space is tight but content needs to stay browsable. Built on Radix UI with smooth animation and full keyboard support.",
  "categories": [
    "disclosure"
  ]
}