4f: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"] 50: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"] 51:T45d4,"use client"; // karaui.kamisama-v0.my.id/components/blocks/morphing-search import { type LucideIcon, Search } from "lucide-react"; import { AnimatePresence, LayoutGroup, motion, type Transition, useReducedMotion, } from "motion/react"; import { type KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect, useId, useMemo, useRef, useState, } from "react"; import { createPortal } from "react-dom"; import { EASE_OUT, SPRING_LAYOUT } from "@/lib/ease"; import { cn } from "@/lib/utils"; // Keeps the Wallet Card feel with a little more time to read the morph. const SEARCH_MORPH: Transition = { type: "spring", duration: 0.58, bounce: 0.22, }; // Keep the spring on the shell, but unfold complex clip-path values with the // same progressive tween as Morph Popover so the content never snaps ahead. const SEARCH_CLIP_TRANSITION: Transition = { duration: 0.32, ease: EASE_OUT, }; export type MorphingSearchItem = { id: string; title: string; description?: string; keywords?: string[]; icon?: LucideIcon; onSelect?: () => void; }; export interface MorphingSearchProps { items: MorphingSearchItem[]; placeholder?: string; shortcut?: string; /** Render the closed trigger as a compact search icon. */ iconOnly?: boolean; emptyMessage?: string; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; onQueryChange?: (query: string) => void; onSelect?: (item: MorphingSearchItem) => void; className?: string; } type AnchorRect = { top: number; left: number; width: number; }; function isEditableTarget(target: EventTarget | null) { if (!(target instanceof HTMLElement)) return false; return ( target.isContentEditable || target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement ); } export function MorphingSearch({ items, placeholder = "Search", shortcut = "f", iconOnly = false, emptyMessage = "No results found.", open: controlledOpen, defaultOpen = false, onOpenChange, onQueryChange, onSelect, className, }: MorphingSearchProps) { const [internalOpen, setInternalOpen] = useState(defaultOpen); const [query, setQuery] = useState(""); const [activeIndex, setActiveIndex] = useState(0); const [mounted, setMounted] = useState(false); const [backgroundScrollLocked, setBackgroundScrollLocked] = useState(defaultOpen); const [anchorRect, setAnchorRect] = useState({ top: 16, left: 16, width: 288, }); const open = controlledOpen ?? internalOpen; const controlled = controlledOpen !== undefined; const reduce = useReducedMotion(); const uid = useId(); const anchorRef = useRef(null); const triggerRef = useRef(null); const inputRef = useRef(null); const dialogRef = useRef(null); const listRef = useRef(null); const previousFocusRef = useRef(null); const wasOpenRef = useRef(open); const transition: Transition = reduce ? { duration: 0 } : SPRING_LAYOUT; const morphTransition: Transition = reduce ? { duration: 0 } : SEARCH_MORPH; const setOpen = useCallback( (next: boolean) => { if (!controlled) setInternalOpen(next); onOpenChange?.(next); }, [controlled, onOpenChange], ); const measureAnchor = useCallback(() => { const rect = anchorRef.current?.getBoundingClientRect(); if (!rect || rect.width === 0) return; setAnchorRect({ top: rect.top, left: rect.left, width: rect.width }); }, []); const openSearch = useCallback(() => { measureAnchor(); setBackgroundScrollLocked(true); previousFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null; setOpen(true); }, [measureAnchor, setOpen]); const updateQuery = useCallback( (next: string) => { setQuery(next); setActiveIndex(0); onQueryChange?.(next); }, [onQueryChange], ); const closeSearch = useCallback(() => { updateQuery(""); setOpen(false); }, [setOpen, updateQuery]); useEffect(() => setMounted(true), []); useEffect(() => { if (open) setBackgroundScrollLocked(true); }, [open]); useEffect(() => { measureAnchor(); const anchor = anchorRef.current; const observer = anchor && typeof ResizeObserver !== "undefined" ? new ResizeObserver(measureAnchor) : null; if (anchor) observer?.observe(anchor); window.addEventListener("resize", measureAnchor); document.addEventListener("scroll", measureAnchor, true); window.visualViewport?.addEventListener("resize", measureAnchor); window.visualViewport?.addEventListener("scroll", measureAnchor); return () => { observer?.disconnect(); window.removeEventListener("resize", measureAnchor); document.removeEventListener("scroll", measureAnchor, true); window.visualViewport?.removeEventListener("resize", measureAnchor); window.visualViewport?.removeEventListener("scroll", measureAnchor); }; }, [measureAnchor]); useEffect(() => { if (!backgroundScrollLocked) return; const preventBackgroundWheel = (event: WheelEvent) => { const target = event.target; if (target instanceof Node && listRef.current?.contains(target)) return; event.preventDefault(); }; const preventBackgroundTouch = (event: TouchEvent) => { const target = event.target; if (target instanceof Node && listRef.current?.contains(target)) return; event.preventDefault(); }; document.addEventListener("wheel", preventBackgroundWheel, { passive: false, }); document.addEventListener("touchmove", preventBackgroundTouch, { passive: false, }); return () => { document.removeEventListener("wheel", preventBackgroundWheel); document.removeEventListener("touchmove", preventBackgroundTouch); }; }, [backgroundScrollLocked]); useEffect(() => { const handleShortcut = (event: KeyboardEvent) => { if (event.key === "Escape" && open) { event.preventDefault(); closeSearch(); return; } if ( !open && shortcut && event.key.toLowerCase() === shortcut.toLowerCase() && !event.repeat && !event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey && !isEditableTarget(event.target) ) { event.preventDefault(); openSearch(); } }; window.addEventListener("keydown", handleShortcut); return () => window.removeEventListener("keydown", handleShortcut); }, [closeSearch, open, openSearch, shortcut]); useEffect(() => { if (open) { updateQuery(""); const frame = requestAnimationFrame(() => inputRef.current?.focus()); return () => cancelAnimationFrame(frame); } if (wasOpenRef.current) { const frame = requestAnimationFrame(() => { const previousFocus = previousFocusRef.current; const focusTarget = previousFocus?.isConnected ? previousFocus : triggerRef.current; focusTarget?.focus(); }); return () => cancelAnimationFrame(frame); } }, [open, updateQuery]); useEffect(() => { wasOpenRef.current = open; }, [open]); const filteredItems = useMemo(() => { const needle = query.trim().toLowerCase(); if (!needle) return items; return items.filter((item) => [item.title, item.description ?? "", ...(item.keywords ?? [])] .join(" ") .toLowerCase() .includes(needle), ); }, [items, query]); useEffect(() => { if (activeIndex < filteredItems.length) return; setActiveIndex(Math.max(0, filteredItems.length - 1)); }, [activeIndex, filteredItems.length]); useEffect(() => { if (!open) return; listRef.current ?.querySelector(`[data-index="${activeIndex}"]`) ?.scrollIntoView({ block: "nearest" }); }, [activeIndex, open]); const selectItem = useCallback( (item: MorphingSearchItem) => { item.onSelect?.(); onSelect?.(item); closeSearch(); }, [closeSearch, onSelect], ); const handleDialogKeyDown = (event: ReactKeyboardEvent) => { if (event.key === "ArrowDown") { event.preventDefault(); if (filteredItems.length === 0) return; setActiveIndex((current) => Math.min(current + 1, filteredItems.length - 1), ); return; } if (event.key === "ArrowUp") { event.preventDefault(); setActiveIndex((current) => Math.max(current - 1, 0)); return; } if (event.key === "Enter") { event.preventDefault(); const item = filteredItems[activeIndex]; if (item) selectItem(item); return; } if (event.key !== "Tab" || !dialogRef.current) return; const focusable = Array.from( dialogRef.current.querySelectorAll( 'input, button:not([disabled]), [tabindex]:not([tabindex="-1"])', ), ); const first = focusable[0]; const last = focusable.at(-1); if (!first || !last) return; if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus(); } else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); } }; const shellLayoutId = `${uid}-shell`; const listboxId = `${uid}-results`; const panelWidth = mounted ? Math.max( anchorRect.width, Math.min(448, window.innerWidth - anchorRect.left - 16), ) : anchorRect.width; const resultsHeight = mounted ? Math.max(96, Math.min(288, window.innerHeight - anchorRect.top - 80)) : 288; const collapsedContentClip = `inset(0px ${Math.max( 0, panelWidth - anchorRect.width, )}px ${resultsHeight}px 0px round 12px)`; const expandedContentClip = "inset(0px 0px 0px 0px round 12px)"; const overlay = mounted ? createPortal(

setBackgroundScrollLocked(false)} > {open ? ( ); }) ) : (

{emptyMessage}

)} ) : null}

, document.body, ) : null; return (

{!open ? ( ) : null}

{overlay} ); } 52: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; 4e:["$","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"}]]}]}]]}],["$","$L4f",null,{"namespace":"@karaui","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"components/motion/morphing-search.tsx","content":"$51","type":"registry:component","target":"@components/motion/morphing-search.tsx"},{"path":"lib/ease.ts","content":"$52","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"}]]}]