KQ-656 · EXPLORER/SEARCH

Explorer Search

A search field that recognises the shape of what you paste before it looks anything up: the leading mark swaps to the recognised kind on flick while the border tweens to cobalt, and a hairline sweeps the field linearly through the debounce so the wait reads as work. The resolved preview card arrives from a step below on glide, and its wrapper's height is measured with a ResizeObserver so no room is ever reserved for a card that has not resolved. Enter opens the record, Escape clears the field, and a polite status region announces each outcome once instead of on every keystroke.

KQ-656 · EXPLORER/SEARCH

Basinworks explorer

Explorer unknown typing

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/explorer-search

Props

value / defaultValue: string; default ""; Controlled or initial query text.
onValueChange: (value: string) => void; default —; Fires from the input, the clear press or Escape.
resolve: (query: string, kind: ExplorerKind) => ExplorerHit | null; default —; Looks the query up. Called from the debounce timer, never during render.
resolveDelayMs: number; default 420; Milliseconds between the last keystroke and the lookup; the sweep runs for exactly this long.
format: (value: number) => string; default Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); Formats every amount on the preview card. The default pins an explicit locale so server and client agree.
asset: string; default "BSN"; Ticker printed after each amount.
onKindChange: (kind: ExplorerKind) => void; default —; Fires when the recognised shape changes — hash, address, block or unknown.
onResolved: (hit: ExplorerHit | null) => void; default —; Fires from the resolve timer with the record, or null for no match.
onOpen: (hit: ExplorerHit) => void; default —; Fires from Enter in the field or the card's open press.
label: React.ReactNode; default —; Visible field label; omit it and pass aria-label to label the field invisibly.
placeholder: string; default "Hash, address or block"; Field placeholder.

Prop	Type	Default	Description
value / defaultValue	string	""	Controlled or initial query text.
onValueChange	(value: string) => void	—	Fires from the input, the clear press or Escape.
resolve	(query: string, kind: ExplorerKind) => ExplorerHit \| null	—	Looks the query up. Called from the debounce timer, never during render.
resolveDelayMs	number	420	Milliseconds between the last keystroke and the lookup; the sweep runs for exactly this long.
format	(value: number) => string	Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })	Formats every amount on the preview card. The default pins an explicit locale so server and client agree.
asset	string	"BSN"	Ticker printed after each amount.
onKindChange	(kind: ExplorerKind) => void	—	Fires when the recognised shape changes — hash, address, block or unknown.
onResolved	(hit: ExplorerHit \| null) => void	—	Fires from the resolve timer with the record, or null for no match.
onOpen	(hit: ExplorerHit) => void	—	Fires from Enter in the field or the card's open press.
label	React.ReactNode	—	Visible field label; omit it and pass aria-label to label the field invisibly.
placeholder	string	"Hash, address or block"	Field placeholder.