Tier 1Web (www / app / auth). The full design system: our component library and the components.css recipe. This is the one tier where the recipe is the contract, native tiers take the tokens and nothing else.--yellow-solid · --radius-lg · --dur-fast · --ease-out
01 Inline dropzone: four states Dropzone · react-dropzone
The Upload files tab of New transfer. 1px dashed --border on --app-bg, radius 4. Dragging goes solid on --component-bg-active; the border says accept (green) or reject (red). The copy never changes.
Drag and drop, or select files.
idle
Drag and drop, or select files.
focused
Drag and drop, or select files.
drag accept
Drag and drop, or select files.
drag reject
02 Full-screen overlay: drag-anywhere
Dragging files anywhere in the app fades in a --component-bg-active layer at 75% with a dashed inner frame. Drop uploads to the default download folder, or the current folder if that setting is on.
Drop your files to upload
03 After drop: the upload task
Dropped files go to the task dock as one Uploading card, a row per file. Full states live on Tasks. app.put.io draws these icons from its flaticon font.
Uploading...
The.Wire.S03E04.Back.Burners.1080p.BluRay.x264-DEMAND.mkv
3 GB
IMG_4392.HEIC
Upload paused.