{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo <educlopez93@gmail.com>","css":{},"dependencies":["lucide-react","motion"],"description":"FAQ grid block with categorized tabs and icons","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport {\n  Activity,\n  Clock,\n  DollarSign,\n  Download,\n  Globe,\n  HelpCircle,\n  Lock,\n  MessageCircle,\n  Scale,\n  Settings,\n  ShoppingBag,\n  Undo2,\n  Users,\n  WalletCards,\n  Zap,\n} from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useState } from \"react\";\n\nconst ANIMATION_DURATION = 0.3;\nconst SPRING_STIFFNESS = 500;\nconst SPRING_DAMPING = 30;\nconst HOVER_SCALE = 1.02;\nconst TAP_SCALE = 0.98;\nconst FAQ_STAGGER_DELAY = 0.1;\nconst INITIAL_Y_OFFSET = 20;\nconst EXIT_Y_OFFSET = -20;\n\nconst iconMap = {\n  Activity,\n  Clock,\n  DollarSign,\n  Download,\n  Globe,\n  HelpCircle,\n  Lock,\n  MessageCircle,\n  Scale,\n  Settings,\n  ShoppingBag,\n  Undo2,\n  Users,\n  WalletCards,\n  Zap,\n};\n\ninterface FaqsGridProps {\n  categories?: Array<{\n    name: string;\n    id: string;\n    faqs: Array<{\n      question: string;\n      answer: string;\n      icon: string;\n    }>;\n  }>;\n  description?: string;\n  title?: string;\n}\n\nexport function FaqsGrid({\n  title = \"FAQs\",\n  description = \"Discover quick and comprehensive answers to common questions about our platform, services, and features.\",\n  categories = [\n    {\n      faqs: [\n        {\n          answer:\n            \"You can install Smoothui using npm or yarn. Run `npm install smoothui` or `yarn add smoothui` in your project directory. It's completely free and open source.\",\n          icon: \"Download\",\n          question: \"How do I install Smoothui?\",\n        },\n        {\n          answer:\n            \"Smoothui works with React 16.8+ and supports all modern browsers. No additional dependencies are required beyond React and Tailwind CSS.\",\n          icon: \"Settings\",\n          question: \"What are the system requirements?\",\n        },\n        {\n          answer:\n            \"Yes! Smoothui is completely free and open source. You can start using it immediately without any trial limitations or hidden costs.\",\n          icon: \"Zap\",\n          question: \"Is Smoothui free to use?\",\n        },\n      ],\n      id: \"general\",\n      name: \"General\",\n    },\n    {\n      faqs: [\n        {\n          answer:\n            \"Smoothui includes over 50+ pre-built components including buttons, forms, navigation, modals, animations, and more. New components are added regularly.\",\n          icon: \"HelpCircle\",\n          question: \"How many components are included?\",\n        },\n        {\n          answer:\n            \"Absolutely! All components are fully customizable using CSS variables, Tailwind classes, or custom CSS. You have complete control over the appearance.\",\n          icon: \"Settings\",\n          question: \"Can I customize the styling?\",\n        },\n        {\n          answer:\n            \"Yes, all components follow WCAG guidelines and include proper ARIA attributes for screen readers and keyboard navigation. Accessibility is a top priority.\",\n          icon: \"Users\",\n          question: \"Are the components accessible?\",\n        },\n      ],\n      id: \"components\",\n      name: \"Components\",\n    },\n    {\n      faqs: [\n        {\n          answer:\n            \"You can reach out to our community on Discord, GitHub discussions, or email our support team directly. We're here to help you succeed.\",\n          icon: \"MessageCircle\",\n          question: \"How can I get help?\",\n        },\n        {\n          answer:\n            \"Yes, we offer custom component development and consulting services for enterprise clients. Contact us to discuss your specific needs.\",\n          icon: \"Users\",\n          question: \"Do you offer custom development?\",\n        },\n        {\n          answer:\n            \"We typically respond to support requests within 24 hours during business days. For urgent issues, please mark them as high priority.\",\n          icon: \"Clock\",\n          question: \"What's your response time?\",\n        },\n      ],\n      id: \"support\",\n      name: \"Support\",\n    },\n  ],\n}: FaqsGridProps) {\n  const shouldReduceMotion = useReducedMotion();\n  const [activeTab, setActiveTab] = useState(0);\n\n  return (\n    <section className=\"bg-muted py-16 md:py-24\">\n      <div className=\"mx-auto max-w-5xl px-6\">\n        <div className=\"max-w-lg\">\n          <h2 className=\"font-semibold text-4xl text-foreground\">{title}</h2>\n          <p className=\"mt-4 text-balance text-lg text-muted-foreground\">\n            {description}\n          </p>\n        </div>\n\n        {/* Tabs Navigation */}\n        <div className=\"mt-8 md:mt-12\">\n          <div className=\"flex flex-wrap gap-2 border-border border-b\">\n            {categories.map((category, index) => (\n              <motion.button\n                className={`relative cursor-pointer rounded-t-lg px-4 py-2 font-medium text-sm transition-all duration-200 ${\n                  activeTab === index\n                    ? \"bg-background text-brand\"\n                    : \"border-transparent text-muted-foreground hover:border-border/50 hover:text-foreground\"\n                }`}\n                key={category.id}\n                onClick={() => setActiveTab(index)}\n                type=\"button\"\n                whileHover={shouldReduceMotion ? {} : { scale: HOVER_SCALE }}\n                whileTap={shouldReduceMotion ? {} : { scale: TAP_SCALE }}\n              >\n                {category.name}\n                {activeTab === index && (\n                  <motion.div\n                    className=\"absolute right-0 bottom-0 left-0 h-0.5 rounded-t-full bg-brand\"\n                    initial={false}\n                    layoutId={shouldReduceMotion ? undefined : \"activeTab\"}\n                    transition={\n                      shouldReduceMotion\n                        ? { duration: 0 }\n                        : {\n                            damping: SPRING_DAMPING,\n                            stiffness: SPRING_STIFFNESS,\n                            type: \"spring\" as const,\n                          }\n                    }\n                  />\n                )}\n              </motion.button>\n            ))}\n          </div>\n        </div>\n\n        {/* Tab Content */}\n        <div className=\"mt-8 md:mt-8\">\n          <AnimatePresence mode=\"wait\">\n            <motion.div\n              animate={\n                shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }\n              }\n              exit={\n                shouldReduceMotion\n                  ? { opacity: 0, transition: { duration: 0 } }\n                  : { opacity: 0, y: EXIT_Y_OFFSET }\n              }\n              initial={\n                shouldReduceMotion\n                  ? { opacity: 1 }\n                  : { opacity: 0, y: INITIAL_Y_OFFSET }\n              }\n              key={activeTab}\n              transition={\n                shouldReduceMotion\n                  ? { duration: 0 }\n                  : { duration: ANIMATION_DURATION, ease: \"easeInOut\" }\n              }\n            >\n              <div className=\"space-y-6\">\n                <dl className=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n                  {categories[activeTab].faqs.map((faq, faqIndex) => {\n                    const IconComponent =\n                      iconMap[faq.icon as keyof typeof iconMap] || HelpCircle;\n\n                    return (\n                      <motion.div\n                        animate={\n                          shouldReduceMotion\n                            ? { opacity: 1 }\n                            : { opacity: 1, y: 0 }\n                        }\n                        className=\"space-y-3\"\n                        initial={\n                          shouldReduceMotion\n                            ? { opacity: 1 }\n                            : { opacity: 0, y: INITIAL_Y_OFFSET }\n                        }\n                        key={`${categories[activeTab].id}-${faqIndex}`}\n                        transition={\n                          shouldReduceMotion\n                            ? { duration: 0 }\n                            : {\n                                delay: faqIndex * FAQ_STAGGER_DELAY,\n                                duration: 0.4,\n                              }\n                        }\n                      >\n                        <dt className=\"space-y-3 font-semibold text-foreground\">\n                          <div className=\"flex size-8 items-center justify-center rounded-md border bg-card *:m-auto *:size-4\">\n                            <IconComponent className=\"h-4 w-4\" />\n                          </div>\n                          {faq.question}\n                        </dt>\n                        <dd className=\"text-muted-foreground\">{faq.answer}</dd>\n                      </motion.div>\n                    );\n                  })}\n                </dl>\n              </div>\n            </motion.div>\n          </AnimatePresence>\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport default FaqsGrid;\n","path":"index.tsx","target":"components/smoothui/faq-1/index.tsx","type":"registry:block"}],"name":"faq-1","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Faq 1","type":"registry:block"}