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:T3676,"use client"; // karaui.kamisama-v0.my.id/components/blocks/faq-section import { Plus, Search, X } from "lucide-react"; import { AnimatePresence, motion, type Transition, useReducedMotion, } from "motion/react"; import { type ReactNode, useCallback, useEffect, useId, useMemo, useRef, useState, } from "react"; import { EASE_OUT, SPRING_LAYOUT, SPRING_SWAP } from "@/lib/ease"; import { cn } from "@/lib/utils"; export interface FaqItem { /** Stable id. Also the element id / URL hash when `deepLink` is on. */ id: string; question: string; answer: ReactNode; /** * Plain-text version of `answer` used for search when `answer` is not a * string. String answers are searched (and highlighted) directly. */ searchText?: string; } export interface FaqSectionProps { items: FaqItem[]; eyebrow?: ReactNode; heading?: ReactNode; description?: ReactNode; /** "single" keeps one answer open at a time; "multiple" lets several stay open. */ type?: "single" | "multiple"; /** Controlled open item ids. */ value?: string[]; /** Uncontrolled initial open item ids. */ defaultValue?: string[]; onValueChange?: (value: string[]) => void; /** Show a search field that narrows and highlights questions. */ searchable?: boolean; searchPlaceholder?: string; /** Rendered when the search matches nothing. Receives the query. */ emptyState?: (query: string) => ReactNode; /** "Still have questions?" slot under the header column. */ cta?: ReactNode; /** * Give each item `id={item.id}`, open the item named by `location.hash` * (on mount and on hashchange) and write the hash when an item opens. */ deepLink?: boolean; className?: string; } const PANEL_TRANSITION: Transition = { duration: 0.32, ease: EASE_OUT }; const PANEL_EXIT_TRANSITION: Transition = { duration: 0.22, ease: EASE_OUT }; function escapeRegExp(value: string) { return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); } /** Wrap every case-insensitive occurrence of `query` in a . */ function highlight(text: string, query: string): ReactNode { const q = query.trim(); if (!q) return text; const parts = text.split(new RegExp(`(${escapeRegExp(q)})`, "gi")); const lower = q.toLowerCase(); let offset = 0; return parts.map((part) => { const key = `${offset}-${part}`; offset += part.length; return part.toLowerCase() === lower ? ( {part} ) : ( part ); }); } function matches(item: FaqItem, query: string) { const q = query.trim().toLowerCase(); if (!q) return true; const answerText = typeof item.answer === "string" ? item.answer : (item.searchText ?? ""); return ( item.question.toLowerCase().includes(q) || answerText.toLowerCase().includes(q) ); } /** * FAQ page section: a header column (eyebrow, heading, description, optional * search and a CTA slot) beside an accordion of questions. Searching narrows * the list with layout animation and highlights matches; items can be * deep-linked by hash. Columns sit side by side once the section's own * container is wide enough and stack below that. */ export function FaqSection({ items, eyebrow = "FAQ", heading = "Frequently asked questions", description, type = "single", value, defaultValue = [], onValueChange, searchable = false, searchPlaceholder = "Search questions", emptyState, cta, deepLink = false, className, }: FaqSectionProps) { const reduce = useReducedMotion(); const baseId = useId(); const [internal, setInternal] = useState(defaultValue); const open = value ?? internal; const [query, setQuery] = useState(""); const setOpen = useCallback( (next: string[]) => { if (value === undefined) setInternal(next); onValueChange?.(next); }, [value, onValueChange], ); const toggle = useCallback( (id: string) => { const isOpen = open.includes(id); const next = isOpen ? open.filter((x) => x !== id) : type === "single" ? [id] : [...open, id]; setOpen(next); if (deepLink && !isOpen && typeof window !== "undefined") { window.history.replaceState(null, "", `#${id}`); } }, [open, type, setOpen, deepLink], ); // Latest state for the hash listener, read through a ref so the listener // subscribes once and never re-scrolls to the hash item on every toggle. const latest = useRef({ open, type, setOpen, reduce }); latest.current = { open, type, setOpen, reduce }; // Deep links: read the hash after mount (never during render) and follow // later hash changes. useEffect(() => { if (!deepLink) return; const openFromHash = () => { const id = decodeURIComponent(window.location.hash.slice(1)); if (!id || !items.some((item) => item.id === id)) return; const { open: current, type: mode, setOpen: set, reduce: still } = latest.current; if (!current.includes(id)) { set(mode === "single" ? [id] : [...current, id]); } document.getElementById(id)?.scrollIntoView({ block: "nearest", behavior: still ? "auto" : "smooth", }); }; openFromHash(); window.addEventListener("hashchange", openFromHash); return () => window.removeEventListener("hashchange", openFromHash); }, [deepLink, items]); const filtered = useMemo( () => items.filter((item) => matches(item, query)), [items, query], ); const layoutTransition = reduce ? { duration: 0 } : SPRING_LAYOUT; return (

{eyebrow ? (

{eyebrow}

) : null} {heading ? (

{heading}

) : null} {description ? (

{description}

) : null}

{searchable ? (

{searchPlaceholder} setQuery(event.target.value)} placeholder={searchPlaceholder} autoComplete="off" className="h-10 w-full rounded-full border border-border bg-card pr-10 pl-10 text-sm text-foreground outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-border-strong focus-visible:ring-2 focus-visible:ring-ring/40 [&::-webkit-search-cancel-button]:appearance-none" /> {query ? ( setQuery("")} initial={{ opacity: 0, scale: reduce ? 1 : 0.6 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: reduce ? 1 : 0.6 }} transition={SPRING_SWAP} className="absolute top-1/2 right-2 grid size-7 -translate-y-1/2 place-items-center rounded-full text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/40" > ) : null}

{query ? `${filtered.length} of ${items.length} questions shown` : ""}

) : null} {cta ?

{cta}

: null}

{/* layoutRoot keeps the rows' layout animation measured relative to this list, so page scroll never replays as movement. */} {filtered.map((item) => ( toggle(item.id)} /> ))} {filtered.length === 0 ? ( {emptyState ? ( emptyState(query) ) : ( <> No questions match “{query.trim()}”.{" "} )} ) : null} {cta ?

{cta}

: null}

); } function FaqRow({ item, baseId, open, query, deepLink, reduce, layoutTransition, onToggle, }: { item: FaqItem; baseId: string; open: boolean; query: string; deepLink: boolean; reduce: boolean | null; layoutTransition: Transition; onToggle: () => void; }) { const triggerId = `${baseId}-${item.id}-trigger`; const panelId = `${baseId}-${item.id}-panel`; return ( // Layout animation is the point here: rows glide into the gaps left by // filtered-out questions and by answers opening/closing.

{/* Height is animated on purpose: the accordion's job is to disclose content in flow, which has to push the following rows down. */}

{typeof item.answer === "string" ? highlight(item.answer, query) : item.answer}

); } 51:T686,// Shared motion tokens. Easing curves mirror the CSS custom properties in // globals.css; springs are the canonical physics used across components. // Strong custom variants — defaults like `ease-in`/`ease-out` feel weak. export const EASE_OUT = [0.16, 1, 0.3, 1] as const; export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const; /** CSS string form of EASE_OUT for inline style transitions. */ export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)"; /** Press feedback on buttons and other tappable surfaces. */ export const SPRING_PRESS = { type: "spring", stiffness: 500, damping: 30, mass: 0.6, } as const; /** Content swaps — label/icon slots trading places inside a control. */ export const SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55, } as const; /** Overlay panel entrances — modals and sheets summoned by pointer. */ export const SPRING_PANEL = { type: "spring", stiffness: 420, damping: 40, mass: 0.5, } as const; /** Shared-layout glides — pills, indicators and panels morphing between positions. */ export const SPRING_LAYOUT = { type: "spring", stiffness: 360, damping: 32, mass: 0.6, } as const; /** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */ export const SPRING_MOUSE = { stiffness: 200, damping: 15, mass: 0.3, } as const; /** Dragged handles and fills (sliders) — critically damped `useSpring` config, * so the value follows the pointer butterily and never rebounds off an end. */ export const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5, } as const; 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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","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"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L4e",null,{"namespace":"@karaui","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/motion/faq-section.tsx","content":"$50","type":"registry:component","target":"@components/motion/faq-section.tsx"},{"path":"lib/ease.ts","content":"$51","type":"registry:lib","target":"@lib/ease.ts"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]

{heading}

{highlight(item.question, query)}