4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T17e7,"use client"; import { AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, } from "@/components/smoothui/accordion"; import Field, { FieldLabel } from "@/components/smoothui/field"; import Input from "@/components/smoothui/input"; import { Search } from "lucide-react"; import { motion, useReducedMotion } from "motion/react"; import { useMemo, useState } from "react"; export interface FaqSearchableProps { description?: string; faqs?: Array<{ question: string; answer: string; }>; noResultsText?: string; searchPlaceholder?: string; title?: string; } const defaultFaqs = [ { answer: "Getting started is easy! Simply install the package via npm or pnpm, import the components you need, and start building. We provide comprehensive documentation and examples to help you get up and running quickly.", question: "How do I get started with SmoothUI?", }, { answer: "Yes! SmoothUI is completely free and open source. You can use it in both personal and commercial projects without any restrictions. We believe in making beautiful UI components accessible to everyone.", question: "Is SmoothUI free to use?", }, { answer: "SmoothUI requires React 18 or later and works with Next.js 13+. You'll also need Node.js 18+ and a modern browser that supports CSS animations and transforms.", question: "What are the system requirements?", }, { answer: "Absolutely! All animations are fully customizable. You can modify timing, easing, and effects using Motion (Framer Motion) props. We also respect the prefers-reduced-motion setting for accessibility.", question: "Can I customize the animations?", }, { answer: "You can report bugs by opening an issue on our GitHub repository. Please include a detailed description, steps to reproduce, and your environment details. We actively monitor and respond to issues.", question: "How do I report bugs or issues?", }, { answer: "Yes, we offer enterprise support packages that include priority bug fixes, dedicated support channels, custom component development, and SLA guarantees. Contact us for more information.", question: "Is there enterprise support available?", }, ]; export function FaqSearchable({ title = "Frequently Asked Questions", description = "Search through our FAQ to find answers to your questions", searchPlaceholder = "Search questions...", noResultsText = "No matching questions found. Try a different search term.", faqs = defaultFaqs, }: FaqSearchableProps) { const [searchQuery, setSearchQuery] = useState(""); const shouldReduceMotion = useReducedMotion(); const filteredFaqs = useMemo(() => { if (!searchQuery.trim()) { return faqs; } const query = searchQuery.toLowerCase(); return faqs.filter( (faq) => faq.question.toLowerCase().includes(query) || faq.answer.toLowerCase().includes(query) ); }, [faqs, searchQuery]); const springTransition = shouldReduceMotion ? { duration: 0 } : { bounce: 0.05, duration: 0.25, type: "spring" as const }; return (

{title}

{description}

Search frequently asked questions { setSearchQuery(e.target.value); }} placeholder={searchPlaceholder} type="text" value={searchQuery} /> {filteredFaqs.length === 0 ? (

{noResultsText}

) : ( {filteredFaqs.map((faq) => ( {faq.question} {faq.answer} ))} )}

); } export default FaqSearchable; 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4e",null,{"namespace":"@smoothui","registryDependencies":["https://smoothui.dev/r/accordion.json","https://smoothui.dev/r/field.json","https://smoothui.dev/r/input.json","https://smoothui.dev/r/tokens.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"index.tsx","content":"$50","type":"registry:block","target":"components/smoothui/faq-3/index.tsx"}],"className":"h-[70svh] min-h-80"}]]}]