{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion-retro",
  "title": "Accordion Retro",
  "dependencies": [
    "@radix-ui/react-accordion",
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "src/registry/accordion/retro/AccordionRetro.jsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport { Plus, Minus } from \"lucide-react\";\nimport { motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nconst demoOptions = [\n  {\n    title: \"SYSTEM_OVERVIEW\",\n    description: \"Core processing unit initialized.\",\n  },\n  {\n    title: \"TECHNICAL_SPECS\",\n    description: \"Architecture: 64-bit retro-grid.\",\n  },\n];\n\nconst AccordionRetro = AccordionPrimitive.Root;\n\nconst AccordionItemRetro = React.forwardRef(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"border-b-2 border-black last:border-b-2 first:border-t-2\",\n      className\n    )}\n    {...props}\n  />\n));\nAccordionItemRetro.displayName = \"AccordionItemRetro\";\n\nconst AccordionTriggerRetro = 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 text-base font-bold font-mono uppercase transition-all hover:bg-black hover:text-white px-4 group data-[state=open]:bg-black data-[state=open]:text-white\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <div className=\"relative w-4 h-4 flex items-center justify-center\">\n             <Plus className=\"h-4 w-4 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90 group-data-[state=open]:hidden\" />\n             <Minus className=\"h-4 w-4 shrink-0 transition-transform duration-200 hidden group-data-[state=open]:block\" />\n        </div>\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n);\nAccordionTriggerRetro.displayName = AccordionPrimitive.Trigger.displayName;\n\nconst AccordionContentRetro = React.forwardRef(\n    ({ className, children, ...props }, ref) => {\n        const internalRef = React.useRef(null);\n        const [isOpen, setIsOpen] = React.useState(false);\n\n        React.useEffect(() => {\n            const element = internalRef.current;\n            if (!element) return;\n\n            const updateState = () => {\n                 const state = element.getAttribute(\"data-state\");\n                 setIsOpen(state === \"open\");\n            };\n\n            updateState();\n\n            const observer = new MutationObserver((mutations) => {\n                mutations.forEach((mutation) => {\n                    if (mutation.attributeName === \"data-state\") {\n                        updateState();\n                    }\n                });\n            });\n\n            observer.observe(element, {\n                attributes: true,\n                attributeFilter: [\"data-state\"],\n            });\n\n            return () => observer.disconnect();\n        }, []);\n\n        React.useEffect(() => {\n            if (typeof ref === \"function\") {\n                ref(internalRef.current);\n            } else if (ref) {\n                ref.current = internalRef.current;\n            }\n        }, [ref]);\n\n        return (\n            <AccordionPrimitive.Content\n                ref={internalRef}\n                className=\"overflow-hidden text-sm\"\n                {...props}\n                forceMount\n            >\n                <motion.div\n                    initial={false}\n                    animate={{\n                        height: isOpen ? \"auto\" : 0,\n                        opacity: isOpen ? 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: isOpen ? \"easeIn\" : \"easeOut\",\n                        },\n                    }}\n                >\n                     <div className={cn(\"pb-4 pt-4 px-4 font-mono border-t-2 border-dashed border-black\", className)}>\n                        {children}\n                    </div>\n                </motion.div>\n            </AccordionPrimitive.Content>\n        );\n    }\n);\nAccordionContentRetro.displayName = AccordionPrimitive.Content.displayName;\n\nexport function AccordionRetroDemo({ options = demoOptions }) {\n  const [openItem, setOpenItem] = React.useState(\"item-0\");\n\n  return (\n    <div className=\"w-full max-w-2xl border-2 border-black shadow-[8px_8px_0px_0px_#000000] bg-white p-1 text-black\">\n      <div className=\"border-b-2 border-black p-2 mb-1 bg-black text-white font-mono font-bold uppercase flex justify-between\">\n          <span>TERMINAL_ACCORDION.exe</span>\n          <div className=\"flex gap-1\">\n              <div className=\"w-3 h-3 bg-white rounded-full\"></div>\n              <div className=\"w-3 h-3 bg-white rounded-full\"></div>\n          </div>\n      </div>\n      <AccordionRetro\n        type=\"single\"\n        collapsible\n        value={openItem}\n        onValueChange={setOpenItem}\n        className=\"w-full bg-white text-black\"\n      >\n        {options.map((item, i) => (\n          <AccordionItemRetro key={i} value={`item-${i}`}>\n            <AccordionTriggerRetro>\n               <span className=\"mr-4 text-black group-hover:text-white group-data-[state=open]:text-white transition-colors\">[{i < 10 ? `0${i+1}` : i+1}]</span> \n               <span className=\"text-black group-hover:text-white group-data-[state=open]:text-white transition-colors\">{item.title}</span>\n            </AccordionTriggerRetro>\n            <AccordionContentRetro>\n              {item.description}\n            </AccordionContentRetro>\n          </AccordionItemRetro>\n        ))}\n      </AccordionRetro>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}