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

@@ -0,0 +1,83 @@
+---
+name: simple_select
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "SimpleSelect(props: SimpleSelectProps): JSX.Element"
+description: "Select simplificado que acepta un array plano o agrupado de opciones. Wrapper sobre Select con API declarativa."
+tags: [select, dropdown, form, component, ui, simple]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core"]
+output: "Componente SimpleSelect que renderiza dropdown simplificado con soporte para opciones planas o agrupadas"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/simple_select.tsx"
+props:
+  - name: value
+    type: "string"
+    required: true
+    description: "Valor seleccionado actualmente"
+  - name: onValueChange
+    type: "(value: string) => void"
+    required: true
+    description: "Callback cuando cambia la seleccion"
+  - name: options
+    type: "SimpleSelectOption[] | SimpleSelectGroup[]"
+    required: true
+    description: "Opciones planas o agrupadas"
+  - name: placeholder
+    type: "string"
+    required: false
+    description: "Texto cuando no hay seleccion"
+  - name: disabled
+    type: "boolean"
+    required: false
+    description: "Deshabilita el select"
+  - name: size
+    type: "'sm' | 'default'"
+    required: false
+    description: "Tamano del trigger"
+  - name: className
+    type: "string"
+    required: false
+    description: "Clases CSS adicionales"
+emits: []
+has_state: false
+framework: react
+variant: [default, sm]
+---
+
+## Ejemplo
+
+```tsx
+import { SimpleSelect } from '@fn_library'
+
+// Opciones planas
+const options = [
+  { value: 'a', label: 'Opcion A' },
+  { value: 'b', label: 'Opcion B' },
+]
+
+<SimpleSelect value={selected} onValueChange={setSelected} options={options} />
+
+// Opciones agrupadas
+const grouped = [
+  { group: 'Frutas', items: [{ value: 'apple', label: 'Manzana' }] },
+  { group: 'Verduras', items: [{ value: 'carrot', label: 'Zanahoria' }] },
+]
+
+<SimpleSelect value={selected} onValueChange={setSelected} options={grouped} />
+```
+
+## Notas
+
+- Detecta automaticamente si las opciones son planas o agrupadas via type guard `isGrouped`.
+- Wrapper sobre `Select` del registry — toda la logica de Base-UI y accesibilidad viene del componente base.
+- Soporta items deshabilitados individualmente con `disabled: true` en cada opcion.