componente · @solu30/ui-kit/input

DropZone

Zona para soltar archivos o abrir el explorador, con filtro por tipo y por tamaño máximo.

Seguir leyendo — 3 párrafos más

Drag-and-drop file upload zone.

Supports native HTML5 drag-and-drop and click-to-browse. Filters files by maxSize when provided and forwards valid files to onFiles.

Uses design tokens:

8 sitios de import en 4 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

El componente, montado

Cargando el componente del paquete instalado…

import { DropZone } from '@solu30/ui-kit/input'

10 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
onFiles	sí	`(files: File[]) => void`	Called with accepted files after drop or file input
accept	opcional	`string`	Accepted MIME types (e.g. 'image/*', '.pdf')
multiple	opcional	`boolean`	Allow multiple files
maxSize	opcional	`number`	Max file size in bytes
disabled	opcional	`boolean`	Disabled state
icon	opcional	`React__default.ReactNode`	Custom icon (defaults to Upload)
label	opcional	`string`	Main label
hint	opcional	`string`	Subtitle / hint text
className	opcional	`string`	Additional CSS class
children	opcional	`React__default.ReactNode`	Children override the default content

<DropZone
  onFiles={(files) => {
    // Handle files
  }}
  accept="image/*"
  multiple
  label="Drop images here"
  hint="PNG, JPG up to 10 MB"
/>

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.