{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "circle-accordion",
  "type": "registry:block",
  "title": "Circle accordion",
  "description": "Circle accordion",
  "files": [
    {
      "path": "components/usages/circleaccordionusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport CircleExpenable from \"@/registry/open-source/circle-accordion\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"relative w-full flex items-center justify-center\">\n\t\t\t<CircleExpenable />\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/circleaccordionusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport CircleExpenable from \"@/registry/open-source/circle-accordion\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"relative w-full flex items-center justify-center\">\n\t\t\t<CircleExpenable />\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/circle-accordion.tsx",
      "content": "import React, { useState } from \"react\";\n\nimport { AnimatePresence, motion } from \"motion/react\";\n\n// Credit:\n// https://zenui.net/animations/animated-accordion\n\n// data\nconst accordionData = [\n\t{\n\t\tid: 1,\n\t\ttitle: \"Mountain Retreat\",\n\t\tdescription:\n\t\t\t\"Escape to the serene mountain landscapes with breathtaking views and adventure trails.\",\n\t\tlongDescription:\n\t\t\t\"Discover hidden valleys, pristine lakes, and breathtaking peaks. \",\n\t\timageUrl:\n\t\t\t\"https://img.freepik.com/free-photo/small-house-built-peaceful-green-hill-high-up-mountains_181624-8241.jpg?ga=GA1.1.1644450426.1718212441&semt=ais_hybrid&w=740\",\n\t\tcolor: \"bg-blue-500\",\n\t\taccentColor: \"#3B82F6\",\n\t},\n\t{\n\t\tid: 2,\n\t\ttitle: \"Beach Paradise\",\n\t\tdescription:\n\t\t\t\"Relax on pristine beaches with crystal clear waters and golden sands.\",\n\t\tlongDescription:\n\t\t\t\"White sand beaches stretch as far as the eye can see, with turquoise waters and spectacular sunsets.\",\n\t\timageUrl:\n\t\t\t\"https://img.freepik.com/free-photo/sea-beach_1203-3728.jpg?ga=GA1.1.1644450426.1718212441&semt=ais_hybrid&w=740\",\n\t\tcolor: \"bg-yellow-500\",\n\t\taccentColor: \"#EAB308\",\n\t},\n\t{\n\t\tid: 3,\n\t\ttitle: \"Forest Adventure\",\n\t\tdescription:\n\t\t\t\"Explore dense forests with diverse wildlife and lush greenery.\",\n\t\tlongDescription:\n\t\t\t\"Ancient trees form a canopy overhead as you walk through dappled sunlight. \",\n\t\timageUrl:\n\t\t\t\"https://img.freepik.com/free-photo/wide-shot-person-walking-around-narrow-pathway-middle-trees-plants-forest_181624-5497.jpg?ga=GA1.1.1644450426.1718212441&semt=ais_hybrid&w=740\",\n\t\tcolor: \"bg-green-500\",\n\t\taccentColor: \"#22C55E\",\n\t},\n\t{\n\t\tid: 4,\n\t\ttitle: \"Desert Expedition\",\n\t\tdescription:\n\t\t\t\"Experience the vast expanse of sand dunes and stunning sunsets.\",\n\t\tlongDescription:\n\t\t\t\"Marvel at the ever-changing landscape of golden dunes sculpted by the wind.\",\n\t\timageUrl:\n\t\t\t\"https://img.freepik.com/free-photo/woman-wearing-hijab-desert_23-2149197951.jpg?ga=GA1.1.1644450426.1718212441&semt=ais_hybrid&w=740\",\n\t\tcolor: \"bg-orange-500\",\n\t\taccentColor: \"#F97316\",\n\t},\n];\n\nconst CircleExpenable = () => {\n\tconst [expandedIndex, setExpandedIndex] = useState(0);\n\n\treturn (\n\t\t<div className=\"relative flex flex-wrap gap-4 py-4\">\n\t\t\t{accordionData.map((item, index) => {\n\t\t\t\tconst isExpanded = index === expandedIndex;\n\n\t\t\t\treturn (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tkey={item.title.toLowerCase().replaceAll(\" \", \"\")}\n\t\t\t\t\t\tclassName=\"relative cursor-pointer overflow-hidden rounded-full border-4\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tborderColor: isExpanded\n\t\t\t\t\t\t\t\t? \"#fff\"\n\t\t\t\t\t\t\t\t: \"rgba(209, 213, 219, 0.5)\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\twidth: isExpanded ? \"300px\" : \"80px\",\n\t\t\t\t\t\t\theight: isExpanded ? \"300px\" : \"80px\",\n\t\t\t\t\t\t\tzIndex: isExpanded ? 10 : 0,\n\t\t\t\t\t\t\tboxShadow: isExpanded\n\t\t\t\t\t\t\t\t? \"0 10px 25px rgba(0,0,0,0.2)\"\n\t\t\t\t\t\t\t\t: \"0 4px 6px rgba(0,0,0,0.1)\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\ttype: \"spring\",\n\t\t\t\t\t\t\tstiffness: 60,\n\t\t\t\t\t\t\tdamping: 15,\n\t\t\t\t\t\t\tmass: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonClick={() => setExpandedIndex(index)}\n\t\t\t\t\t\twhileHover={{\n\t\t\t\t\t\t\tscale: isExpanded ? 1 : 1.05,\n\t\t\t\t\t\t\tborderColor: \"#fff\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tinitial={{\n\t\t\t\t\t\t\twidth: index === 0 ? \"300px\" : \"80px\",\n\t\t\t\t\t\t\theight: index === 0 ? \"300px\" : \"80px\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<motion.img\n\t\t\t\t\t\t\tsrc={item.imageUrl}\n\t\t\t\t\t\t\talt={item.title}\n\t\t\t\t\t\t\tclassName=\"absolute inset-0 w-full h-full object-cover\"\n\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\tscale: isExpanded ? 1 : 1.2,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\t\tduration: 0.8,\n\t\t\t\t\t\t\t\tease: \"easeOut\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tclassName=\"absolute inset-0\"\n\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\tbackground: isExpanded\n\t\t\t\t\t\t\t\t\t? `radial-gradient(circle, transparent 30%, rgba(0,0,0,0.6) 100%)`\n\t\t\t\t\t\t\t\t\t: `radial-gradient(circle, transparent 10%, ${item.accentColor}99 100%)`,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\ttransition={{ duration: 0.6 }}\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t<AnimatePresence mode=\"wait\">\n\t\t\t\t\t\t\t{isExpanded ? (\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\t\t\tanimate={{ opacity: 1 }}\n\t\t\t\t\t\t\t\t\texit={{ opacity: 0 }}\n\t\t\t\t\t\t\t\t\ttransition={{ duration: 0.3, delay: 0.2 }}\n\t\t\t\t\t\t\t\t\tclassName=\"absolute inset-0 flex flex-col justify-center items-center p-6 text-foreground text-center\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\t\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\t\t\t\t\t\tvariants={{\n\t\t\t\t\t\t\t\t\t\t\thidden: { opacity: 0 },\n\t\t\t\t\t\t\t\t\t\t\tvisible: {\n\t\t\t\t\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\t\t\t\t\t\tstaggerChildren: 0.12,\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<motion.h3\n\t\t\t\t\t\t\t\t\t\t\tvariants={{\n\t\t\t\t\t\t\t\t\t\t\t\thidden: { y: 20, opacity: 0 },\n\t\t\t\t\t\t\t\t\t\t\t\tvisible: { y: 0, opacity: 1 },\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"text-2xl font-bold mb-3\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{item.title}\n\t\t\t\t\t\t\t\t\t\t</motion.h3>\n\n\t\t\t\t\t\t\t\t\t\t<motion.p\n\t\t\t\t\t\t\t\t\t\t\tvariants={{\n\t\t\t\t\t\t\t\t\t\t\t\thidden: { y: 20, opacity: 0 },\n\t\t\t\t\t\t\t\t\t\t\t\tvisible: { y: 0, opacity: 1 },\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"text-sm mb-4\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{item.longDescription}\n\t\t\t\t\t\t\t\t\t\t</motion.p>\n\n\t\t\t\t\t\t\t\t\t\t<motion.button\n\t\t\t\t\t\t\t\t\t\t\tvariants={{\n\t\t\t\t\t\t\t\t\t\t\t\thidden: { y: 20, opacity: 0 },\n\t\t\t\t\t\t\t\t\t\t\t\tvisible: { y: 0, opacity: 1 },\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\twhileHover={{\n\t\t\t\t\t\t\t\t\t\t\t\tscale: 1.05,\n\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: \"rgba(255,255,255,0.95)\",\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\twhileTap={{ scale: 0.95 }}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"px-4 py-2 bg-background text-foreground rounded-full font-medium mt-2\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tView Details\n\t\t\t\t\t\t\t\t\t\t</motion.button>\n\t\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\t\t\tanimate={{ opacity: 1 }}\n\t\t\t\t\t\t\t\t\texit={{ opacity: 0 }}\n\t\t\t\t\t\t\t\t\tclassName=\"absolute inset-0 flex items-center justify-center\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<motion.span\n\t\t\t\t\t\t\t\t\t\tclassName=\"text-foreground font-bold\"\n\t\t\t\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\t\t\t\tscale: [0.9, 1, 0.9],\n\t\t\t\t\t\t\t\t\t\t\topacity: [0.7, 1, 0.7],\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\ttransition={{ repeat: Infinity, duration: 2 }}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{index + 1}\n\t\t\t\t\t\t\t\t\t</motion.span>\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t</motion.div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n};\n\nexport default CircleExpenable;\n",
      "type": "registry:ui"
    }
  ]
}