4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 52:T32fc,"use client"; import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, } from "react"; import { motion, useReducedMotion } from "motion/react"; const DISCLOSE = { type: "spring", stiffness: 380, damping: 38, mass: 0.7 } as const; const CROSSFADE = { type: "spring", stiffness: 260, damping: 34, mass: 0.8 } as const; const CELL = { type: "spring", stiffness: 520, damping: 34, mass: 0.45 } as const; const INSTANT = { duration: 0 } as const; const COLLAPSED = 40; const TEXT_LEFT = 34; const CLEAR_SLOT = 35; const COUNT_SLOT = 38; const ANNOUNCE_DELAY = 500; const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect; export type UseExpandingSearchOptions = { value?: string; defaultValue?: string; onChange?: (value: string) => void; onSearch?: (value: string) => void; onSubmit?: (value: string) => void; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; debounce?: number; collapseOnBlur?: boolean; disabled?: boolean; }; export type UseExpandingSearchReturn = { open: boolean; focused: boolean; query: string; expand: () => void; collapse: (returnFocus?: boolean) => void; toggle: () => void; clear: () => void; inputRef: React.RefObject; triggerRef: React.RefObject; rootProps: { onFocus: (event: React.FocusEvent) => void; onBlur: (event: React.FocusEvent) => void; }; triggerProps: { ref: React.RefObject; type: "button"; disabled: boolean; tabIndex: number; "aria-expanded": boolean; onClick: () => void; }; inputProps: { ref: React.RefObject; value: string; disabled: boolean; tabIndex: number; onChange: (event: React.ChangeEvent) => void; onKeyDown: (event: React.KeyboardEvent) => void; onFocus: () => void; }; }; export function useExpandingSearch({ value, defaultValue = "", onChange, onSearch, onSubmit, open, defaultOpen = false, onOpenChange, debounce = 220, collapseOnBlur = true, disabled = false, }: UseExpandingSearchOptions = {}): UseExpandingSearchReturn { const [ownValue, setOwnValue] = useState(defaultValue); const [ownOpen, setOwnOpen] = useState(defaultOpen); const [focused, setFocused] = useState(false); const query = value ?? ownValue; const isOpen = open ?? ownOpen; const inputRef = useRef(null); const triggerRef = useRef(null); const timer = useRef | null>(null); const openRef = useRef(isOpen); const latest = useRef({ query, onChange, onSearch, onSubmit, onOpenChange }); latest.current = { query, onChange, onSearch, onSubmit, onOpenChange }; useEffect(() => { openRef.current = isOpen; }, [isOpen]); useEffect( () => () => { if (timer.current) clearTimeout(timer.current); }, [], ); const setOpen = useCallback((next: boolean) => { if (openRef.current === next) return; openRef.current = next; setOwnOpen(next); latest.current.onOpenChange?.(next); }, []); const commit = useCallback( (next: string) => { setOwnValue(next); latest.current.onChange?.(next); if (timer.current) clearTimeout(timer.current); timer.current = setTimeout(() => { timer.current = null; latest.current.onSearch?.(next); }, debounce); }, [debounce], ); const flush = useCallback(() => { if (!timer.current) return; clearTimeout(timer.current); timer.current = null; latest.current.onSearch?.(latest.current.query); }, []); const expand = useCallback(() => { if (disabled) return; setOpen(true); inputRef.current?.focus(); }, [disabled, setOpen]); const collapse = useCallback( (returnFocus = false) => { setOpen(false); if (returnFocus) triggerRef.current?.focus(); }, [setOpen], ); const toggle = useCallback(() => { if (openRef.current) collapse(true); else expand(); }, [collapse, expand]); const clear = useCallback(() => { commit(""); inputRef.current?.focus(); }, [commit]); const onRootFocus = useCallback(() => setFocused(true), []); const onRootBlur = useCallback( (event: React.FocusEvent) => { const next = event.relatedTarget as Node | null; if (next && event.currentTarget.contains(next)) return; setFocused(false); if (!collapseOnBlur) return; if (!document.hasFocus()) return; if (latest.current.query.length > 0) return; setOpen(false); }, [collapseOnBlur, setOpen], ); const onInputKeyDown = useCallback( (event: React.KeyboardEvent) => { if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); if (latest.current.query.length > 0) { commit(""); return; } collapse(true); return; } if (event.key === "Enter") { event.preventDefault(); flush(); latest.current.onSubmit?.(latest.current.query); } }, [collapse, commit, flush], ); const onInputFocus = useCallback(() => setOpen(true), [setOpen]); const onInputChange = useCallback( (event: React.ChangeEvent) => commit(event.currentTarget.value), [commit], ); return { open: isOpen, focused, query, expand, collapse, toggle, clear, inputRef, triggerRef, rootProps: { onFocus: onRootFocus, onBlur: onRootBlur }, triggerProps: { ref: triggerRef, type: "button", disabled, tabIndex: isOpen ? -1 : 0, "aria-expanded": isOpen, onClick: expand, }, inputProps: { ref: inputRef, value: query, disabled, tabIndex: isOpen ? 0 : -1, onChange: onInputChange, onKeyDown: onInputKeyDown, onFocus: onInputFocus, }, }; } export type ExpandingSearchProps = UseExpandingSearchOptions & { label?: string; placeholder?: string; resultCount?: number; align?: "left" | "right"; className?: string; clearLabel?: string; formatResults?: (count: number, query: string) => string; }; export function ExpandingSearch({ label = "Search", placeholder = "Search", resultCount, align = "right", className = "", clearLabel = "Clear search", formatResults = (count, query) => `${count} ${count === 1 ? "result" : "results"} for ${query}`, ...options }: ExpandingSearchProps) { const reduced = useReducedMotion(); const auto = useId(); const inputId = `${auto}-field`; const { open, focused, query, clear, inputRef, rootProps, triggerProps, inputProps, } = useExpandingSearch(options); const trackRef = useRef(null); const [track, setTrack] = useState(0); useIsomorphicLayoutEffect(() => { const el = trackRef.current; if (!el) return; const read = (w: number) => setTrack((prev) => (Math.abs(prev - w) < 0.5 ? prev : w)); read(el.getBoundingClientRect().width); const observer = new ResizeObserver((entries) => { const box = entries[0]; if (box) read(box.contentRect.width); }); observer.observe(el); return () => observer.disconnect(); }, []); const [announced, setAnnounced] = useState(""); useEffect(() => { const id = setTimeout(() => { if (!open || query.length === 0 || resultCount === undefined) { setAnnounced(""); return; } setAnnounced(formatResults(resultCount, query)); }, ANNOUNCE_DELAY); return () => clearTimeout(id); }, [formatResults, open, query, resultCount]); const expanded = Math.max(COLLAPSED, track); const rightInset = CLEAR_SLOT + (resultCount === undefined ? 0 : COUNT_SLOT); const inner = Math.max(0, expanded - TEXT_LEFT - rightInset); const filled = query.length > 0; const shellMotion = reduced ? INSTANT : DISCLOSE; const fadeMotion = reduced ? INSTANT : CROSSFADE; const cellMotion = reduced ? INSTANT : CELL; return ( ); } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://motion-lexicon.pages.dev/r/expanding-search.json","proxyUrl":"https://shadcnregistry.com/r/motion-lexicon/expanding-search","itemId":"@motion-lexicon/expanding-search"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"src/registry/components/expanding-search.tsx","content":"$52","type":"registry:ui","target":"components/motion-lexicon/expanding-search.tsx"}]}]]}],"$L53"]}]

Expanding Search

Installation

Files

components

Styles