{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion-nova",
  "title": "Accordion Nova",
  "dependencies": [
    "@radix-ui/react-accordion",
    "lucide-react",
    "framer-motion"
  ],
  "files": [
    {
      "path": "src/registry/accordion/nova/AccordionNova.jsx",
      "content": "\"use client\";\n\nimport * as 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 Information\",\n    description:\n      \"Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.\",\n  },\n  {\n    title: \"Product Information\",\n    description:\n      \"Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.\",\n  },\n  {\n    title: \"Product Information\",\n    description:\n      \"Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.\",\n  },\n  {\n    title: \"Product Information\",\n    description:\n      \"Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.\",\n  },\n];\n\nexport default function AccordionDemo({options=demoOptions}) {\n  const [openIndex, setOpenIndex] = React.useState(0);\n\n  return (\n    <Accordion\n      type=\"single\"\n      collapsible\n      value={`item-${openIndex}`}\n      onValueChange={(val) => {\n        setOpenIndex(val ? parseInt(val.split(\"-\")[1]) : null);\n      }}\n      className=\"w-full\"\n    >\n      {options.map((item, i) => {\n        const isAboveOpen = openIndex === i - 1;\n        const isBelowOpen = openIndex === i + 1;\n\n        return (\n          <AccordionItem\n            key={i}\n            value={`item-${i}`}\n            className={cn(\n              isAboveOpen && \"border-t rounded-t-2xl\",\n              isBelowOpen && \"border-b rounded-b-2xl\",\n              \"border-white/20 hover:bg-zinc-700/20 transition-all duration-300 px-3\"\n            )}\n          >\n            <AccordionTrigger className='text-lg font-medium'>{item.title}</AccordionTrigger>\n            <AccordionContent className=\"text-base\">{item.description}</AccordionContent>\n          </AccordionItem>\n        );\n      })}\n    </Accordion>\n  );\n}\n\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\",\n      \"border-b-0 data-[state=open]:my-2 border-s border-e first:border-t last:border-b data-[state=open]:border border-white last:rounded-b-2xl first:rounded-t-2xl data-[state=open]:rounded-2xl px-2\",\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          \"hover:cursor-pointer\",\n          \"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all text-left [&[data-state=open]>svg]:rotate-180\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDown className=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\" />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n);\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;\n\nconst AccordionContent = 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 initialState = element.getAttribute(\"data-state\");\n      setIsOpen(initialState === \"open\");\n\n      const observer = new MutationObserver((mutations) => {\n        mutations.forEach((mutation) => {\n          if (mutation.attributeName === \"data-state\") {\n            const state = element.getAttribute(\"data-state\");\n            setIsOpen(state === \"open\");\n          }\n        });\n      });\n\n      observer.observe(element, {\n        attributes: true,\n        attributeFilter: [\"data-state\"],\n      });\n\n      return () => observer.disconnect();\n    }, []);\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\"\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              // stiffness:50,\n              bounce:0.3\n              // ease: [0.4, 0, 0.2, 1],\n            },\n            opacity: {\n              duration: 0.2,\n              ease: isOpen ? \"easeIn\" : \"easeOut\",\n            },\n          }}\n        >\n          <div className={cn(\"pb-4 pt-0\", className)}>{children}</div>\n        </motion.div>\n      </AccordionPrimitive.Content>\n    );\n  }\n);\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}