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

@@ -0,0 +1,77 @@
+---
+name: action_icon
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "FnActionIcon(props: FnActionIconProps): JSX.Element"
+description: "Boton de icono con variantes, loading y tooltip opcional. Wrapper sobre Mantine ActionIcon."
+tags: [mantine, button, icon, action, tooltip, component, ui]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core"]
+framework: react
+props:
+  - name: icon
+    type: "ReactNode"
+    required: true
+    description: "Icono a renderizar dentro del boton"
+  - name: variant
+    type: "'filled' | 'light' | 'outline' | 'transparent' | 'default' | 'subtle'"
+    required: false
+    description: "Variante visual del boton, default 'default'"
+  - name: size
+    type: "MantineSize | number"
+    required: false
+    description: "Tamano del boton"
+  - name: color
+    type: "MantineColor"
+    required: false
+    description: "Color del boton"
+  - name: onClick
+    type: "MouseEventHandler"
+    required: false
+    description: "Callback al hacer click"
+  - name: loading
+    type: "boolean"
+    required: false
+    description: "Muestra spinner de carga"
+  - name: disabled
+    type: "boolean"
+    required: false
+    description: "Deshabilita el boton"
+  - name: tooltip
+    type: "string"
+    required: false
+    description: "Si se provee, envuelve el boton en un Tooltip"
+output: "Boton de icono con tooltip opcional, estados loading/disabled y multiples variantes"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/action_icon.tsx"
+emits: []
+has_state: false
+variant: [filled, light, outline, transparent, default, subtle]
+---
+
+## Ejemplo
+
+```tsx
+import { FnActionIcon } from '@fn_library'
+import { IconSettings } from '@tabler/icons-react'
+
+<FnActionIcon
+  icon={<IconSettings size={18} />}
+  tooltip="Configuracion"
+  variant="light"
+  onClick={() => openSettings()}
+/>
+```
+
+## Notas
+
+Wrapper sobre Mantine `ActionIcon`. Si se provee `tooltip`, envuelve automaticamente en Mantine `Tooltip`. Compatible con iconos de `@tabler/icons-react`.