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/chip.md

@@ -0,0 +1,88 @@
+---
+name: chip
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "Chip(props: ChipProps): JSX.Element"
+description: "Chip seleccionable con variantes filled/outline/light. ChipGroup para selección simple o múltiple. Wrapper sobre Mantine Chip."
+tags: [chip, toggle, selection, component, ui, mantine]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core"]
+output: "Componente Chip que renderiza un elemento seleccionable tipo badge, con ChipGroup para gestionar selección simple o múltiple entre varios chips"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/chip.tsx"
+props:
+  - name: checked
+    type: "boolean"
+    required: false
+    description: "Estado seleccionado del chip (controlled)"
+  - name: onChange
+    type: "(checked: boolean) => void"
+    required: false
+    description: "Callback al cambiar el estado del chip"
+  - name: variant
+    type: "'filled' | 'outline' | 'light'"
+    required: false
+    description: "Estilo visual del chip"
+  - name: color
+    type: "string"
+    required: false
+    description: "Color del chip cuando está seleccionado"
+  - name: size
+    type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+    required: false
+    description: "Tamaño del chip"
+  - name: children
+    type: "React.ReactNode"
+    required: true
+    description: "Contenido del chip — texto o elemento"
+emits: [onChange]
+has_state: true
+framework: react
+variant: [filled, outline, light]
+---
+
+## Ejemplo
+
+```tsx
+import { Chip, ChipGroup } from '@fn_library'
+
+// Chip individual controlado
+<Chip checked={active} onChange={setActive}>
+  Activo
+</Chip>
+
+// ChipGroup selección simple (una sola opción)
+<ChipGroup value={selected} onChange={setSelected}>
+  <Chip value="react">React</Chip>
+  <Chip value="vue">Vue</Chip>
+  <Chip value="svelte">Svelte</Chip>
+</ChipGroup>
+
+// ChipGroup selección múltiple
+<ChipGroup multiple value={tags} onChange={setTags}>
+  <Chip value="frontend">Frontend</Chip>
+  <Chip value="backend">Backend</Chip>
+  <Chip value="devops">DevOps</Chip>
+</ChipGroup>
+
+// Con variante y color custom
+<Chip variant="outline" color="teal" size="lg">
+  Destacado
+</Chip>
+```
+
+## Notas
+
+- Wrapper directo sobre `Chip` de `@mantine/core` v9. Todas las props de Mantine Chip son válidas.
+- `ChipGroup` es un alias de `MantineChip.Group` — gestiona el estado de selección entre chips hijos.
+- En `ChipGroup` sin `multiple`, `value` es `string`. Con `multiple`, `value` es `string[]`.
+- Internamente cada `Chip` renderiza un checkbox/radio accesible oculto con label visual.