initial: mirror of @fn_library from fn_registry

75 components + DESIGN_SYSTEM.md + sync script.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

components/search_bar.md

@@ -0,0 +1,72 @@
+---
+name: search_bar
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "SearchBar(props: SearchBarProps): JSX.Element"
+description: "Search input with debounce, search icon, and clear button"
+tags: [component, ui, search, input, debounce]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core", "@tabler/icons-react"]
+params:
+  - name: onSearch
+    desc: "Callback que se ejecuta con la query debounceada"
+  - name: placeholder
+    desc: "Placeholder del input (por defecto 'Search...')"
+  - name: debounceMs
+    desc: "Delay en milisegundos para el debounce (por defecto 300)"
+output: "Componente SearchBar que renderiza input de búsqueda con icono y botón de limpiar"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/search_bar.tsx"
+props:
+  - name: onSearch
+    type: "(query: string) => void"
+    required: true
+    description: "Called with the debounced search query"
+  - name: placeholder
+    type: "string"
+    required: false
+    description: "Placeholder text (default: Search...)"
+  - name: debounceMs
+    type: "number"
+    required: false
+    description: "Debounce delay in ms (default: 300)"
+  - name: className
+    type: "string"
+    required: false
+    description: "Additional CSS classes"
+emits: []
+has_state: true
+framework: react
+variant: []
+---
+
+## Ejemplo
+
+```tsx
+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)