{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion-chevron",
  "title": "Accordion Chevron",
  "description": "Minimal accordion with a subtly animated chevron for compact FAQs and supporting details.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "components/content/AccordionChevron.tsx",
      "content": "'use client';\n\nimport { ChevronDown } from 'lucide-react';\nimport { useId, useState } from 'react';\n\ntype AccordionChevronItem = {\n  title: string;\n  content: string;\n};\n\ntype AccordionChevronProps = {\n  items?: AccordionChevronItem[];\n  defaultOpenIndex?: number | null;\n  className?: string;\n};\n\nconst DEFAULT_ITEMS: AccordionChevronItem[] = [\n  {\n    title: 'How does it work?',\n    content: 'Use the accordion to keep related details close without making the page feel crowded.',\n  },\n  {\n    title: 'Can I change the content?',\n    content: 'Pass your own titles and descriptions through the items prop.',\n  },\n  {\n    title: 'Does it work on mobile?',\n    content: 'Yes. Each trigger has a comfortable touch target and supports keyboard navigation.',\n  },\n];\n\nexport default function AccordionChevron({\n  items = DEFAULT_ITEMS,\n  defaultOpenIndex = 0,\n  className = '',\n}: AccordionChevronProps) {\n  const id = useId();\n  const [openIndex, setOpenIndex] = useState(defaultOpenIndex);\n\n  return (\n    <div className={['w-full max-w-xl divide-y divide-[color:var(--color-border,#e5e7eb)] border-y border-[color:var(--color-border,#e5e7eb)]', className].filter(Boolean).join(' ')}>\n      {items.map((item, index) => {\n        const open = openIndex === index;\n        const triggerId = `${id}-trigger-${index}`;\n        const panelId = `${id}-panel-${index}`;\n\n        return (\n          <div key={item.title}>\n            <button\n              id={triggerId}\n              type='button'\n              aria-expanded={open}\n              aria-controls={panelId}\n              onClick={() => setOpenIndex(open ? null : index)}\n              className='group flex w-full items-center justify-between gap-6 py-4 text-left text-sm font-medium text-[color:var(--color-foreground,#111827)]'\n            >\n              {item.title}\n              <ChevronDown\n                aria-hidden='true'\n                className={['h-4 w-4 shrink-0 text-[color:var(--color-muted-foreground,#9ca3af)] transition-transform duration-400 ease-out', open ? 'rotate-180' : 'group-hover:translate-y-0.5'].join(' ')}\n              />\n            </button>\n            <div\n              id={panelId}\n              role='region'\n              aria-labelledby={triggerId}\n              className={['grid transition-[grid-template-rows,opacity] duration-200 ease-out', open ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'].join(' ')}\n            >\n              <div className='overflow-hidden'>\n                <p className='pb-4 text-sm leading-6 text-[color:var(--color-muted-foreground,#6b7280)]'>{item.content}</p>\n              </div>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/content/AccordionChevron.tsx"
    }
  ],
  "categories": [
    "content"
  ],
  "type": "registry:component"
}