{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "faq-accordion-motion",
  "type": "registry:component",
  "title": "Faq accordion motion",
  "description": "An FAQ accordion where one answer opens at a time with an animated height transition. Triggers expose aria-expanded and motion is skipped when reduced.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/faq-accordion-motion.tsx",
      "type": "registry:ui",
      "target": "components/ui/faq-accordion-motion.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion, AnimatePresence } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nconst FAQS = [\n  { q: \"Is there a free plan?\", a: \"Yes. The free plan covers up to three projects and has no time limit.\" },\n  { q: \"Can I import my existing data?\", a: \"Yes. Import from CSV, Linear, Jira or GitHub in a couple of clicks.\" },\n  { q: \"How do I demo this to a client?\", a: \"Open / then /showcase. Walk the OS mock, compare tiers, scroll the chapters.\" },\n]\n\nfunction FaqAccordionMotion({ className }: { className?: string }) {\n  const reduce = useReducedMotion()\n  const [open, setOpen] = React.useState(0)\n  return (\n    <section data-slot=\"faq-accordion-motion\" data-tier=\"premium\" className={cn(\"space-y-2\", className)}>\n      {FAQS.map((f, i) => {\n        const isOpen = open === i\n        return (\n          <div key={f.q} className=\"rounded-xl border border-border bg-surface shadow-highlight\">\n            <button\n              type=\"button\"\n              aria-expanded={isOpen}\n              className=\"flex w-full items-center justify-between gap-3 px-4 py-3 text-left text-sm font-medium text-fg outline-none focus-visible:ring-2 focus-visible:ring-accent\"\n              onClick={() => setOpen(isOpen ? -1 : i)}\n            >\n              {f.q}\n              <span className=\"font-mono text-fg-muted\">{isOpen ? \"−\" : \"+\"}</span>\n            </button>\n            <AnimatePresence initial={false}>\n              {isOpen ? (\n                <motion.div\n                  initial={reduce ? false : { height: 0 }}\n                  animate={{ height: \"auto\" }}\n                  exit={reduce ? undefined : { height: 0 }}\n                  transition={{ duration: 0.2, ease: [0.2, 0, 0, 1] }}\n                  className=\"overflow-hidden\"\n                >\n                  <p className=\"border-t border-border px-4 py-3 text-sm leading-[1.55] text-fg-muted\">{f.a}</p>\n                </motion.div>\n              ) : null}\n            </AnimatePresence>\n          </div>\n        )\n      })}\n    </section>\n  )\n}\nexport { FaqAccordionMotion }\n"
    }
  ]
}