50: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"] 51: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"] 52:T182f,"use client"; import { SearchIcon, XIcon } from "blode-icons-react"; import type * as React from "react"; import { useEffect, useRef, useState, useSyncExternalStore } from "react"; import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "@/components/ui/input-group"; const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)"; /** Joins the placeholder list into one dependency so a fresh array literal on * every render does not restart the typewriter. */ const PHRASE_SEPARATOR = "\n"; const subscribeToReducedMotion = (onStoreChange: () => void) => { const query = window.matchMedia(REDUCED_MOTION_QUERY); query.addEventListener("change", onStoreChange); return () => query.removeEventListener("change", onStoreChange); }; /** * Tracks `prefers-reduced-motion` and re-renders when it changes. The global * reduced-motion stylesheet cannot reach a JS timer, so the typewriter has to * gate itself. The server snapshot is `true` so no animation runs before the * real preference is known. */ const usePrefersReducedMotion = () => useSyncExternalStore( subscribeToReducedMotion, () => window.matchMedia(REDUCED_MOTION_QUERY).matches, () => true, ); export interface SearchInputProps extends Omit< React.ComponentProps<"input">, "onChange" | "placeholder" | "type" | "value" > { /** Accessible name for the clear button (default: "Clear search"). */ clearLabel?: string; /** Milliseconds between removed characters while cycling (default: 100). */ deletingSpeed?: number; /** Called after the value is cleared by the clear button. */ onClear?: () => void; /** Called with the next search string on every keystroke. */ onValueChange: (value: string) => void; /** Milliseconds a completed phrase rests before deleting (default: 1000). */ pauseDuration?: number; /** Milliseconds between typed characters while cycling (default: 150). */ typingSpeed?: number; /** * The stable placeholder. Also the accessible description exposed through * `aria-placeholder` while the animated placeholder is cycling. */ placeholder?: string; /** * Phrases to type and delete in the placeholder. Decorative: cycling stops * on focus, on a non-empty value, and under reduced motion. */ placeholders?: string[]; /** The current search string. */ value: string; } const SearchInput = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, clearLabel = "Clear search", deletingSpeed = 100, id, onBlur, onClear, onFocus, onValueChange, pauseDuration = 1000, placeholder = "Search", placeholders, typingSpeed = 150, value, ...props }: SearchInputProps) => { const inputRef = useRef(null); const prefersReducedMotion = usePrefersReducedMotion(); const [isFocused, setIsFocused] = useState(false); const [typed, setTyped] = useState(""); // Empty entries are dropped: a zero-length phrase never reaches its own // length in the typing branch, so the timer would reschedule forever. const phrasesKey = placeholders?.filter(Boolean).join(PHRASE_SEPARATOR) ?? ""; // A moving placeholder under a typing user is hostile, so cycling pauses // while the field is focused or holds a value. const isCycling = phrasesKey !== "" && !prefersReducedMotion && !isFocused && value === ""; useEffect(() => { if (!isCycling) { return; } const phrases = phrasesKey.split(PHRASE_SEPARATOR); let timeout: ReturnType; let phraseIndex = 0; let charIndex = 0; let isDeleting = false; const tick = () => { const phrase = phrases[phraseIndex]; if (isDeleting) { charIndex -= 1; setTyped(phrase.slice(0, charIndex)); if (charIndex === 0) { isDeleting = false; phraseIndex = (phraseIndex + 1) % phrases.length; } timeout = setTimeout(tick, deletingSpeed); return; } charIndex += 1; setTyped(phrase.slice(0, charIndex)); if (charIndex === phrase.length) { isDeleting = true; timeout = setTimeout(tick, pauseDuration); return; } timeout = setTimeout(tick, typingSpeed); }; timeout = setTimeout(tick, typingSpeed); return () => { clearTimeout(timeout); // Rewind so the next run starts from an empty placeholder rather than // flashing the phrase the last run had reached. setTyped(""); }; }, [deletingSpeed, isCycling, pauseDuration, phrasesKey, typingSpeed]); const handleClear = () => { onValueChange(""); onClear?.(); inputRef.current?.focus(); }; // Only name the input ourselves when nothing else does. An `id` implies an // external , and overriding a visible label breaks // label-in-name for voice control. const hasExternalName = Boolean(ariaLabel ?? ariaLabelledBy ?? id); return ( { setIsFocused(false); onBlur?.(event); }} onChange={(event) => onValueChange(event.target.value)} onFocus={(event) => { setIsFocused(true); onFocus?.(event); }} placeholder={isCycling ? typed : placeholder} type="search" value={value} {...props} ref={inputRef} /> {value !== "" && ( )} ); }; export { SearchInput }; 4f:["$","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","blode-icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/blode-icons-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":"blode-icons-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@blode","registryDependencies":["input-group"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/search-input.tsx","content":"$52","type":"registry:ui","target":""}],"className":"h-[70svh] min-h-80"}]]}]