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

@@ -0,0 +1,118 @@
+---
+name: dropzone
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "Dropzone(props: DropzoneProps): JSX.Element"
+description: "Zona de drag-and-drop para archivos con estados idle/accept/reject, límite de tamaño y tipos MIME. Wrapper sobre Mantine Dropzone."
+tags: [dropzone, upload, drag-drop, file, component, ui, interactive, mantine]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/dropzone"]
+output: "Componente Dropzone que renderiza área de arrastrar y soltar archivos con feedback visual"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/dropzone.tsx"
+props:
+  - name: onDrop
+    type: "(files: File[]) => void"
+    required: false
+    description: "Callback ejecutado cuando el usuario suelta archivos aceptados"
+  - name: onReject
+    type: "(files: FileRejection[]) => void"
+    required: false
+    description: "Callback ejecutado cuando el usuario suelta archivos rechazados (tipo o tamaño inválido)"
+  - name: accept
+    type: "Record<string, string[]>"
+    required: false
+    description: "Tipos MIME aceptados. Usar IMAGE_MIME_TYPE o MIME_TYPES para constantes predefinidas"
+  - name: maxSize
+    type: "number"
+    required: false
+    description: "Tamaño máximo de archivo en bytes"
+  - name: multiple
+    type: "boolean"
+    required: false
+    description: "Permite seleccionar múltiples archivos a la vez"
+  - name: loading
+    type: "boolean"
+    required: false
+    description: "Muestra estado de carga y desactiva la interacción"
+  - name: disabled
+    type: "boolean"
+    required: false
+    description: "Desactiva el dropzone"
+  - name: children
+    type: "React.ReactNode"
+    required: true
+    description: "Contenido interno, generalmente compuesto con DropzoneAccept, DropzoneReject y DropzoneIdle"
+emits: [onDrop, onReject]
+has_state: true
+framework: react
+variant: []
+---
+
+## Ejemplo
+
+```tsx
+import {
+  Dropzone,
+  DropzoneAccept,
+  DropzoneReject,
+  DropzoneIdle,
+  IMAGE_MIME_TYPE,
+} from '@fn_library/dropzone'
+import { IconPhoto, IconUpload, IconX } from '@tabler/icons-react'
+import { Group, Text } from '@mantine/core'
+
+function ImageUploader() {
+  return (
+    <Dropzone
+      onDrop={(files) => console.log('Archivos aceptados:', files)}
+      onReject={(files) => console.log('Archivos rechazados:', files)}
+      accept={IMAGE_MIME_TYPE}
+      maxSize={5 * 1024 ** 2}
+    >
+      <Group justify="center" gap="xl" mih={120} style={{ pointerEvents: 'none' }}>
+        <DropzoneAccept>
+          <IconUpload size={52} stroke={1.5} />
+        </DropzoneAccept>
+        <DropzoneReject>
+          <IconX size={52} stroke={1.5} />
+        </DropzoneReject>
+        <DropzoneIdle>
+          <IconPhoto size={52} stroke={1.5} />
+        </DropzoneIdle>
+        <div>
+          <Text size="xl" inline>
+            Arrastra imágenes aquí o haz clic para seleccionar
+          </Text>
+          <Text size="sm" c="dimmed" inline mt={7}>
+            Máximo 5 MB por imagen
+          </Text>
+        </div>
+      </Group>
+    </Dropzone>
+  )
+}
+```
+
+## Notas
+
+El prop `onDrop` tiene un default vacío (`() => {}`) para que el componente sea válido sin handler. Siempre sobreescribirlo en uso real.
+
+Sub-componentes exportados:
+- `DropzoneAccept` — visible cuando el archivo arrastrado es aceptado (tipo y tamaño válidos)
+- `DropzoneReject` — visible cuando el archivo es rechazado
+- `DropzoneIdle` — visible en estado de reposo
+- `DropzoneFullScreen` — captura drops en cualquier parte de la pantalla
+
+Constantes de tipos MIME exportadas:
+- `IMAGE_MIME_TYPE` — imágenes comunes (png, jpg, gif, webp, etc.)
+- `MIME_TYPES` — objeto con claves por tipo (pdf, csv, xlsx, mp4, etc.)