fn_registry/frontend/functions/ui/search_bar.md

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	tested	tests	test_file_path	file_path	props	emits	has_state	framework	variant
search_bar	component	ts	ui	1.0.0	impure	SearchBar(props: SearchBarProps): JSX.Element	Search input with debounce, search icon, and clear button	component ui search input debounce	cn_ts_core			false		lucide-react	false			frontend/functions/ui/search_bar.tsx	name type required description onSearch (query: string) => void true Called with the debounced search query name type required description placeholder string false Placeholder text (default: Search...) name type required description debounceMs number false Debounce delay in ms (default: 300) name type required description className string false Additional CSS classes		true	react

Ejemplo

import { SearchBar } from '@fn_library'

function MyPage() {
  return (
    <SearchBar
      onSearch={(query) => console.log('search:', query)}
      placeholder="Search entities..."
      debounceMs={300}
    />
  )
}

Notas

• Debounce usa ref para evitar re-renders innecesarios del callback
• El icono de clear solo aparece cuando hay texto
• Usa CSS variables del tema para colores (border, input, foreground, muted-foreground)