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

@@ -0,0 +1,77 @@
+---
+name: indicator
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "FnIndicator(props: FnIndicatorProps): JSX.Element"
+description: "Badge indicador posicionado sobre un elemento hijo. Wrapper sobre Mantine Indicator."
+tags: [mantine, indicator, badge, notification, dot, component, ui]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/core"]
+framework: react
+props:
+  - name: children
+    type: "ReactNode"
+    required: true
+    description: "Elemento sobre el cual se posiciona el indicador"
+  - name: color
+    type: "MantineColor"
+    required: false
+    description: "Color del indicador, default red"
+  - name: size
+    type: "number"
+    required: false
+    description: "Tamano del dot en px, default 10"
+  - name: position
+    type: "'top-start' | 'top-center' | 'top-end' | 'middle-start' | 'middle-center' | 'middle-end' | 'bottom-start' | 'bottom-center' | 'bottom-end'"
+    required: false
+    description: "Posicion del indicador, default top-end"
+  - name: processing
+    type: "boolean"
+    required: false
+    description: "Animacion de pulso, default false"
+  - name: disabled
+    type: "boolean"
+    required: false
+    description: "Oculta el indicador, default false"
+  - name: label
+    type: "ReactNode"
+    required: false
+    description: "Contenido dentro del indicador (numero, texto)"
+output: "Elemento hijo con un dot/badge indicador posicionado en una esquina"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/indicator.tsx"
+emits: []
+has_state: false
+variant: []
+---
+
+## Ejemplo
+
+```tsx
+import { FnIndicator } from '@fn_library'
+import { FnActionIcon } from '@fn_library'
+import { IconBell } from '@tabler/icons-react'
+
+{/* Dot simple */}
+<FnIndicator processing>
+  <FnActionIcon icon={<IconBell size={18} />} />
+</FnIndicator>
+
+{/* Con contador */}
+<FnIndicator label={5} size={16} color="blue">
+  <Avatar src="user.png" />
+</FnIndicator>
+```
+
+## Notas
+
+Wrapper sobre Mantine `Indicator`. El `processing` prop agrega una animacion de pulso al dot. Si se provee `label`, el indicador se agranda para mostrar contenido. `disabled` oculta el indicador sin desmontar el componente.