fn-design-system/components/search_bar.md

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, params, output, 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	params	output	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				false		@mantine/core @tabler/icons-react	name desc onSearch Callback que se ejecuta con la query debounceada name desc placeholder Placeholder del input (por defecto 'Search...') name desc debounceMs Delay en milisegundos para el debounce (por defecto 300)	Componente SearchBar que renderiza input de búsqueda con icono y botón de limpiar	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)