{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion-lyra",
  "title": "Accordion Lyra",
  "dependencies": [
    "@radix-ui/react-accordion",
    "lucide-react",
    "framer-motion"
  ],
  "files": [
    {
      "path": "src/registry/accordion/lyra/AccordionLyra.jsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport { ChevronDown } from \"lucide-react\";\nimport { motion } from \"framer-motion\";\nimport { cn } from \"@/lib/utils\";\n\nconst demoOptions = [\n  {\n    title: \"Product Overview\",\n    description:\n      \"Discover our latest innovation designed for efficiency and comfort. Engineered with precision to deliver top-tier performance in any environment.\",\n  },\n  {\n    title: \"Specifications\",\n    description:\n      \"Crafted with aerospace-grade aluminum, powered by a next-gen processor, and equipped with a long-lasting lithium battery for uninterrupted use.\",\n  },\n  {\n    title: \"Warranty & Support\",\n    description:\n      \"All purchases include a 2-year limited warranty and lifetime technical support. Extended protection plans are also available.\",\n  },\n];\n\nexport default function AccordionDemo() {\n  const [openIndex, setOpenIndex] = React.useState(0);\n\n  return (\n    <Accordion\n      type=\"single\"\n      collapsible\n      value={openIndex !== null ? `item-${openIndex}` : \"\"}\n      onValueChange={(val) => {\n        setOpenIndex(val ? parseInt(val.split(\"-\")[1]) : null);\n      }}\n      className=\"w-full\"\n    >\n      {demoOptions.map((item, i) => {\n        const isAboveOpen = openIndex === i - 1;\n        const isBelowOpen = openIndex === i + 1;\n        const isActive = openIndex === i;\n\n        return (\n          <AccordionItem\n            key={i}\n            value={`item-${i}`}\n            className={cn(\n              openIndex !== null && isAboveOpen && \"border-t\",\n              openIndex !== null && isBelowOpen && \"border-b\",\n              \"border-white/20 hover:bg-white/5 transition-all duration-300 px-0 bg-black/40 backdrop-blur-sm\"\n            )}\n          >\n            <AccordionTrigger className=\"px-4 text-white hover:text-white transition-all duration-300 font-mono text-sm uppercase tracking-wider group\">\n              {item.title}\n            </AccordionTrigger>\n            <AccordionPrimitive.Content forceMount asChild>\n              <motion.div\n                initial={false}\n                animate={{\n                  height: isActive ? \"auto\" : 0,\n                  opacity: isActive ? 1 : 0,\n                }}\n                transition={{\n                  height: {\n                    duration: 0.5,\n                    type: \"spring\",\n                    bounce: 0.3,\n                  },\n                  opacity: {\n                    duration: 0.2,\n                    ease: isActive ? \"easeIn\" : \"easeOut\",\n                  },\n                }}\n                className=\"overflow-hidden bg-black\"\n              >\n                <div className=\"px-4 py-4 text-neutral-400 border-t-[0.6px] border-white/20 font-sans text-sm leading-relaxed\">\n                  {item.description}\n                </div>\n              </motion.div>\n            </AccordionPrimitive.Content>\n          </AccordionItem>\n        );\n      })}\n    </Accordion>\n  );\n}\n\n// Internal Lyra Components\nconst Accordion = AccordionPrimitive.Root;\n\nconst AccordionItem = React.forwardRef(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"hover:cursor-pointer transition-all duration-300\",\n      \"border-b-0 border-l border-r border-white/20 first:border-t last:border-b\",\n      \"data-[state=open]:my-4 data-[state=open]:border data-[state=open]:border-white/40 data-[state=open]:last:border-b\",\n      className\n    )}\n    {...props}\n  />\n));\nAccordionItem.displayName = \"AccordionItem\";\n\nconst AccordionTrigger = React.forwardRef(\n  ({ className, children, ...props }, ref) => (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        ref={ref}\n        className={cn(\n          \"flex flex-1 items-center justify-between py-4 transition-all [&[data-state=open]>svg.chevron]:rotate-180\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDown className=\"chevron h-4 w-4 shrink-0 transition-transform duration-200 text-white/60\" />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n);\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;\n\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}