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>
2026-04-21 19:06:49 +02:00
commit 5a824c2eee
157 changed files with 11539 additions and 0 deletions
@@ -0,0 +1,111 @@
+---
+name: multi_select
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "MultiSelect(props: MultiSelectProps): JSX.Element"
+description: "Selector múltiple con búsqueda, pills y límite de selecciones. Wrapper sobre Mantine MultiSelect."
+tags: [multi-select, form, dropdown, pills, component, ui, interactive, mantine]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core"]
+output: "Componente MultiSelect que renderiza dropdown con selección múltiple, búsqueda y pills"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/multi_select.tsx"
+props:
+  - name: data
+    type: "string[] | { value: string; label: string; disabled?: boolean }[]"
+    required: true
+    description: "Opciones del selector — strings o objetos {value, label}"
+  - name: value
+    type: "string[]"
+    required: false
+    description: "Valores seleccionados (controlled)"
+  - name: onChange
+    type: "(value: string[]) => void"
+    required: false
+    description: "Callback al cambiar la selección"
+  - name: searchable
+    type: "boolean"
+    required: false
+    description: "Permite buscar entre opciones"
+  - name: clearable
+    type: "boolean"
+    required: false
+    description: "Muestra botón para limpiar toda la selección"
+  - name: maxValues
+    type: "number"
+    required: false
+    description: "Número máximo de valores seleccionables"
+  - name: placeholder
+    type: "string"
+    required: false
+    description: "Texto cuando no hay selección"
+  - name: label
+    type: "string"
+    required: false
+    description: "Label del campo"
+  - name: disabled
+    type: "boolean"
+    required: false
+    description: "Deshabilitar el selector"
+  - name: size
+    type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+    required: false
+    description: "Tamaño del componente"
+emits: [onChange]
+has_state: true
+framework: react
+variant: [default]
+---
+
+## Ejemplo
+
+```tsx
+import { MultiSelect } from '@fn_library'
+
+// Opciones simples
+<MultiSelect
+  label="Frameworks favoritos"
+  placeholder="Elige uno o más"
+  data={['React', 'Vue', 'Angular', 'Svelte']}
+/>
+
+// Con búsqueda y clearable
+<MultiSelect
+  label="Tecnologías"
+  placeholder="Busca y selecciona"
+  searchable
+  clearable
+  value={selected}
+  onChange={setSelected}
+  data={[
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+    { value: 'ts', label: 'TypeScript' },
+  ]}
+/>
+
+// Máximo de selecciones
+<MultiSelect
+  label="Elige hasta 2"
+  placeholder="Máximo 2"
+  maxValues={2}
+  data={['Opción A', 'Opción B', 'Opción C', 'Opción D']}
+/>
+```
+
+## Notas
+
+- Wrapper directo sobre `MultiSelect` de `@mantine/core` v9. Todas las props de Mantine MultiSelect son válidas.
+- A diferencia de `Select`, `value` es `string[]` y `onChange` recibe `string[]`.
+- Las selecciones se muestran como pills dentro del input, eliminables con clic.
+- `maxValues` limita cuántos items pueden seleccionarse — el dropdown bloquea más selecciones al alcanzar el límite.
+- Soporta `searchable` para filtrar opciones y `clearable` para un botón de limpiar todo.