{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spring-faq",
  "type": "registry:block",
  "title": "Spring faq",
  "description": "Spring faq",
  "files": [
    {
      "path": "components/usages/springfaqusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { FAQSpring } from \"@/registry/open-source/spring-faq\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<FAQSpring />\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/springfaqusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { FAQSpring } from \"@/registry/open-source/spring-faq\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<FAQSpring />\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/spring-faq.tsx",
      "content": "\"use client\";\n\nimport { useMemo, useState } from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport { ChevronDown, Code, Heart, Sparkles } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\n\n// Credit\n// https://starui.link/docs/components/faq-spring\n\nconst data = [\n\t{\n\t\tid: \"one\",\n\t\ticon: <Sparkles className=\"size-5 text-foreground\" />,\n\t\ttitle: \"What is Star UI?\",\n\t\tcontent:\n\t\t\t\"Star UI is a powerful React animation component library that allows you to create smooth, interactive animations with minimal code. It provides a simple API for creating complex animations and transitions.\",\n\t},\n\t{\n\t\tid: \"two\",\n\t\ticon: <Code className=\"size-5 text-foreground\" />,\n\t\ttitle: \"How do I get started?\",\n\t\tcontent: `Head to the “Quick start” guide in the docs. If you’ve used unstyled libraries before, you’ll feel at home.`,\n\t},\n\t{\n\t\tid: \"three\",\n\t\ticon: <Heart className=\"size-5 text-foreground\" />,\n\t\ttitle: \"Can I use it for my project?\",\n\t\tcontent: \"Of course! Star UI is free and open source.\",\n\t},\n];\n\nfunction FAQSpring() {\n\tconst [value, setValue] = useState(\"\");\n\tconst currentIndex = useMemo(() => {\n\t\treturn data.findIndex((item) => item.id === value);\n\t}, [value]);\n\n\tconst getRadius = (id: string, index: number) => {\n\t\tconst dataLength = data.length;\n\t\tconst radius = \"--radius-lg\";\n\t\tconst isStart = index === 0;\n\t\tconst isEnd = index === dataLength - 1;\n\t\tconst isExpended = id === value;\n\t\tconst isPrev = index === currentIndex - 1;\n\t\tconst isNext = index === currentIndex + 1;\n\n\t\tif (!value) {\n\t\t\tif (isStart) return `var(${radius}) var(${radius}) 0 0`;\n\t\t\tif (isEnd) return `0 0 var(${radius}) var(${radius})`;\n\t\t\treturn \"0 0 0 0\";\n\t\t} else {\n\t\t\tif (isExpended || (isPrev && isStart) || (isNext && isEnd)) {\n\t\t\t\treturn `var(${radius})`;\n\t\t\t}\n\t\t\tif (isNext) return `var(${radius}) var(${radius}) 0 0`;\n\t\t\tif (isPrev) return `0 0 var(${radius}) var(${radius}`;\n\t\t}\n\t};\n\n\tconst getMargin = (id: string, index: number) => {\n\t\tconst dataLength = data.length;\n\t\tconst isExpended = id === value;\n\t\tconst isStart = index === 0;\n\t\tconst isEnd = index === dataLength - 1;\n\t\tconst margin = \"calc(var(--spacing) * 5)\";\n\t\tif (isExpended && isEnd) {\n\t\t\treturn `${margin} 0`;\n\t\t}\n\t\tif (isExpended && isStart) {\n\t\t\treturn `0 ${margin}`;\n\t\t}\n\t\tif (isExpended && !isStart && !isEnd) {\n\t\t\treturn margin;\n\t\t}\n\t};\n\n\treturn (\n\t\t<div className=\"max-w-sm w-full\">\n\t\t\t{data.map((item, index) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tinitial={false}\n\t\t\t\t\tkey={item.id}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"bg-background border-x border-neutral-200 overflow-hidden transition\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"border-t\":\n\t\t\t\t\t\t\t\tindex === 0 ||\n\t\t\t\t\t\t\t\tvalue === item.id ||\n\t\t\t\t\t\t\t\tcurrentIndex + 1 === index,\n\t\t\t\t\t\t\t\"border-b\":\n\t\t\t\t\t\t\t\tindex === data.length - 1 ||\n\t\t\t\t\t\t\t\tvalue === item.id ||\n\t\t\t\t\t\t\t\tcurrentIndex - 1 === index,\n\t\t\t\t\t\t}\n\t\t\t\t\t)}\n\t\t\t\t\tanimate={{\n\t\t\t\t\t\tborderRadius: getRadius(item.id, index),\n\t\t\t\t\t\tmarginBlock: getMargin(item.id, index),\n\t\t\t\t\t}}\n\t\t\t\t\ttransition={{\n\t\t\t\t\t\ttype: \"spring\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<h3>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tsetValue(value === item.id ? \"\" : item.id);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tclassName=\"font-medium cursor-pointer px-3 py-2 w-full flex items-center justify-between gap-4\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t\t{item.icon}\n\t\t\t\t\t\t\t\t{item.title}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<ChevronDown\n\t\t\t\t\t\t\t\tclassName={cn(\"size-4 transition-transform\", {\n\t\t\t\t\t\t\t\t\t\"rotate-180\": value === item.id,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</h3>\n\n\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t{value === item.id && (\n\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\tinitial={{ opacity: 0, height: 0 }}\n\t\t\t\t\t\t\t\tanimate={{ opacity: 1, height: \"auto\" }}\n\t\t\t\t\t\t\t\texit={{ opacity: 0, height: 0 }}\n\t\t\t\t\t\t\t\tclassName=\"text-sm\"\n\t\t\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\t\t\ttype: \"spring\",\n\t\t\t\t\t\t\t\t\tstiffness: 100,\n\t\t\t\t\t\t\t\t\tdamping: 10,\n\t\t\t\t\t\t\t\t\tmass: 1,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<p className=\"pb-3 px-3\">{item.content}</p>\n\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</AnimatePresence>\n\t\t\t\t</motion.div>\n\t\t\t))}\n\t\t</div>\n\t);\n}\n\nexport { FAQSpring };\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}