{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "file-drop", "type": "registry:ui", "title": "File drop", "description": "An area to drop files on or choose them from, that turns away the wrong type or size and says why, and rows that show each file uploading on a Progress rail, with Retry for one that failed.", "registryDependencies": [ "https://littmd.vercel.app/r/litt.json", "https://littmd.vercel.app/r/button.json", "https://littmd.vercel.app/r/icons.json", "https://littmd.vercel.app/r/motion.json", "https://littmd.vercel.app/r/progress.json" ], "files": [ { "path": "registry/litt/ui/file-drop.tsx", "type": "registry:ui", "content": "\"use client\";\n// @litt/file-drop 2026.11.09. What changed: https://littmd.vercel.app/changelog.md\n\n/**\n * File drop: where someone adds files, by dropping them or choosing them, and where they watch them upload\n * (components.md, \"File drop\").\n *\n * - FileDrop is the area. This file is the contract; the look is a body per material (below).\n * - On a touch screen nothing is dragged in, so the words say \"Add files\" and the button does the work.\n * - Choosing: Choose files opens the file picker; so does a click anywhere on the area. Only the button is a tab stop.\n * - Checking: files whose type is not in accept or whose size is over maxSize are turned away, each with a sentence\n * under the area that says which file and why. The rest go to onFiles. The sentences go when the next files come.\n * - FileList and FileRow show what was added: one row per file, its name, its size, and while it uploads a\n * progress rail under the name. A failed file says why in --litt-danger and offers Retry. Remove is a button named for\n * its file, and says Cancel while the file uploads.\n * - Dragging is counted, because enter and leave fire for children too; the words say what a drop will do. A body shows\n * it on the instant tier and under forced colors keeps an outline.\n * - Disabled lies flat: no drop and no tab stop. The words stay --litt-fg-subtle, because they still say something (when\n * it opens again), as a disabled Slide to confirm's do.\n * - One contract, three bodies (proposals/worlds.md, Bodies). This file is the contract: the props, the checking, the\n * drag count, the picker and its hidden input, the alert, the list and the row's actions. It resolves them once into\n * FileDropBodyProps and FileRowBodyProps and renders the body the material picks (byWorld).\n * - PressBody and PressRowBody, below: a plate that stands (--litt-block, --litt-plate-lift) with a deep tray cut into it\n * (--litt-tray, --litt-tray-shade) that holds a raised arrow block (--litt-block, --litt-block-lift), the words and Choose files. While\n * files are over it the tray goes deeper (--litt-slot, --litt-slot-shade) and its lower wall catches the light. The list is\n * a tray of slats: each file a raised block with its name, size and a Progress rail cut into it.\n * - bodies/file-drop.flat.tsx: a grey sheet with one sentence, \"Drop files or choose\", ringed in ink while a file is\n * over it. Each file is a line of words with Retry and Remove as words.\n * - bodies/file-drop.device.tsx: a slot with an engraved legend over LCD glass and a Choose key; each file a line of\n * glass whose upload lights segments in steps.\n */\nimport { useId, useRef, useState, type ComponentProps, type DragEvent, type ReactNode } from \"react\";\nimport { Button } from \"./button\";\nimport { ArrowUpIcon, FileIcon, RetryIcon, XIcon } from \"./icons\";\nimport { Progress } from \"./progress\";\nimport { byWorld, useDevice, useMaterial } from \"../../lib/litt/motion\";\nimport { FileDropDeviceBody, FileRowDeviceBody } from \"./bodies/file-drop.device\";\nimport { FileDropFlatBody, FileRowFlatBody } from \"./bodies/file-drop.flat\";\n\n/** 2048 to \"2.0 KB\": the size in the units people read. */\nexport function formatSize(bytes: number): string {\n if (bytes < 1024) return `${bytes} B`;\n if (bytes < 1024 * 1024) return `${bytes < 10 * 1024 ? (bytes / 1024).toFixed(1) : Math.round(bytes / 1024)} KB`;\n return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n}\n\n/** Does a file match one entry of an accept list: \".pdf\", \"image/*\" or \"image/png\"? */\nfunction matches(file: File, rule: string): boolean {\n const r = rule.trim().toLowerCase();\n if (r.startsWith(\".\")) return file.name.toLowerCase().endsWith(r);\n if (r.endsWith(\"/*\")) return file.type.toLowerCase().startsWith(r.slice(0, -1));\n return file.type.toLowerCase() === r;\n}\n\nexport type FileRejection = { file: File; reason: string };\n\n/* ------------------------------------------------------------------ FileDrop */\n\nexport type FileDropProps = {\n /** What the files are for, as the area's name: \"Project files\". Screen readers hear it with the button. */\n label: string;\n /** The types it takes, as a file input's accept: [\".pdf\", \"image/*\"]. Leave it out to take any file. */\n accept?: string[];\n /** The largest file it takes, in bytes. */\n maxSize?: number;\n /** Takes several files at once. Default true. */\n multiple?: boolean;\n /** Runs with the files that passed the checks, in the order they came. */\n onFiles: (files: File[]) => void;\n /** Runs with the files that were turned away and why. The area also says it under itself. */\n onReject?: (rejected: FileRejection[]) => void;\n /** The line under \"Drop files here\": the types and the limit, \"PDF or images, up to 10 MB\". */\n hint?: ReactNode;\n disabled?: boolean;\n className?: string;\n};\n\n/** An area to drop files on or choose them from. It checks type and size, says what it turned away, and hands over the rest. */\nexport function FileDrop({ label, accept, maxSize, multiple = true, onFiles, onReject, hint, disabled = false, className = \"\" }: FileDropProps) {\n const { coarse } = useDevice();\n const input = useRef(null);\n const hintId = useId();\n const [over, setOver] = useState(0); // how many dragged items are over the area: enter and leave fire for children too\n const [turnedAway, setTurnedAway] = useState([]);\n\n const take = (list: FileList | null) => {\n if (!list || disabled) return;\n const files = [...list].slice(0, multiple ? undefined : 1);\n const ok: File[] = [];\n const no: FileRejection[] = [];\n for (const file of files) {\n if (accept?.length && !accept.some((r) => matches(file, r))) no.push({ file, reason: `${file.name} is not a type this takes.` });\n else if (maxSize !== undefined && file.size > maxSize) no.push({ file, reason: `${file.name} is ${formatSize(file.size)}, over the ${formatSize(maxSize)} limit.` });\n else ok.push(file);\n }\n setTurnedAway(no);\n if (no.length) onReject?.(no);\n if (ok.length) onFiles(ok);\n };\n\n const dragging = over > 0 && !disabled;\n const drag = (e: DragEvent, step: number) => {\n if (disabled || !e.dataTransfer.types.includes(\"Files\")) return;\n e.preventDefault();\n setOver((n) => Math.max(0, n + step));\n };\n\n const area: ComponentProps<\"div\"> = {\n role: \"group\",\n \"aria-label\": label,\n onDragEnter: (e) => drag(e, 1),\n onDragLeave: (e) => drag(e, -1),\n onDragOver: (e) => {\n if (disabled || !e.dataTransfer.types.includes(\"Files\")) return;\n e.preventDefault();\n e.dataTransfer.dropEffect = \"copy\";\n },\n onDrop: (e) => {\n if (disabled) return;\n e.preventDefault();\n setOver(0);\n take(e.dataTransfer.files);\n },\n /* A click anywhere chooses files too; the button is the keyboard's way in, so the area is no tab stop. */\n onClick: (e) => {\n if (!disabled && !(e.target as Element).closest(\"button\")) input.current?.click();\n },\n };\n const Body = byWorld(useMaterial(), { press: PressBody, flat: FileDropFlatBody, device: FileDropDeviceBody });\n\n return (\n
\n input.current?.click()}\n picker={\n {\n take(e.target.files);\n e.target.value = \"\"; // so choosing the same file again still counts\n }}\n />\n }\n />\n {/* What was turned away, and why. An alert, because it answers what the person just did. */}\n
\n {turnedAway.map((r) => (\n

\n {r.reason}\n

\n ))}\n
\n
\n );\n}\n\n/**\n * What the contract hands the area's body: the drag, the picker and the words, resolved once. A body draws the group\n * (`area`: its role, name, drag and drop handlers and the click that chooses, kept whole, plus its own className and\n * data-body), the words, the hint, a Choose button that calls onChoose and is described by the hint, and the hidden\n * `picker` input, which it renders anywhere inside the group. It says dragging and disabled without color alone: the\n * words change, and a disabled area has no tab stop.\n */\nexport type FileDropBodyProps = {\n area: ComponentProps<\"div\">;\n /** \"Drop files here\", \"Drop to add these files\" while dragging, or \"Add files\" on a touch screen. */\n words: string;\n hint?: ReactNode;\n /** The hint's id, which the Choose button names with aria-describedby. */\n hintId: string;\n dragging: boolean;\n disabled: boolean;\n /** \"Choose files\", or \"Choose a file\" when it takes one. */\n chooseLabel: string;\n onChoose: () => void;\n /** The hidden file input. */\n picker: ReactNode;\n};\n\n/**\n * Press, the instrument: a plate that stands on the page (--litt-block, --litt-plate-lift) with a deep tray cut into it\n * (--litt-tray, --litt-tray-shade, 4px in, its corners the plate's less those 4px). In the tray stands the arrow on a raised\n * block (--litt-block, --litt-block-lift), then the words, and Choose files at the end. While files are over it the tray goes\n * deeper: its floor is the slot's (--litt-slot, a step toward --litt-fg) and its walls are the slot's (--litt-slot-shade), whose lower wall catches\n * the light. The words change too, so it is never said by depth alone. Disabled lies flat: --litt-surface-2 with the\n * hairline, and a tray that is only a --litt-surface-3 floor.\n */\nfunction PressBody({ area, words, hint, hintId, dragging, disabled, chooseLabel, onChoose, picker }: FileDropBodyProps) {\n return (\n \n \n \n \n \n
\n

{words}

\n {/* The hint is on the tray's floor, a step darker than the plate, so it takes the full ink to keep 4.5:1 there. */}\n {hint && (\n

\n {hint}\n

\n )}\n
\n \n {picker}\n \n \n );\n}\n\n/* ------------------------------------------------------------------ FileList and FileRow */\n\n/* Press: the list is a tray, and each file stands in it as a slat. Flat: rows parted by space. Device: lines of glass. */\nconst listLook = {\n press: \"gap-1 rounded-litt-surface bg-litt-tray p-1 shadow-(--litt-tray-shade) forced-colors:border \",\n flat: \"gap-1 \",\n device: \"gap-2 \",\n};\n\n/** The files that were added, one row each. Name it, so a screen reader knows whose files these are. */\nexport function FileList({ label, children, className = \"\" }: { label: string; children: ReactNode; className?: string }) {\n const material = useMaterial();\n return (\n
    \n {children}\n
\n );\n}\n\nexport type FileRowProps = {\n name: string;\n /** In bytes. */\n size?: number;\n /** How far the upload is, 0 to 100. Leave it out once the file is in. */\n progress?: number;\n /** Why the upload failed. Shown in --litt-danger under the name, with Retry. */\n error?: ReactNode;\n onRetry?: () => void;\n onRemove?: () => void;\n};\n\n/** What the contract hands a row's body: the row's props and whether it is uploading (a rail shows, and Remove says Cancel). */\nexport type FileRowBodyProps = FileRowProps & { uploading: boolean };\n\n/** One file in a FileList: its name and size, a Progress rail while it uploads, why it failed, Retry and Remove. */\nexport function FileRow(props: FileRowProps) {\n const uploading = props.progress !== undefined && props.progress < 100 && !props.error;\n const Body = byWorld(useMaterial(), { press: PressRowBody, flat: FileRowFlatBody, device: FileRowDeviceBody });\n return ;\n}\n\n/**\n * Press, a slat: a raised block (--litt-block, --litt-block-lift) standing in the list's tray, 4px in, its corners the tray's less\n * those 4px. Its name and size are on its face, a Progress rail is cut into it under them, and Retry and Remove are\n * ghost icon buttons at its end.\n */\nfunction PressRowBody({ name, size, progress, error, uploading, onRetry, onRemove }: FileRowBodyProps) {\n return (\n \n \n
\n

\n {name}\n {size !== undefined && {formatSize(size)}}\n

\n {(uploading || error) && }\n
\n
\n {error && onRetry && (\n \n )}\n {onRemove && (\n \n )}\n
\n \n );\n}\n", "target": "components/litt/file-drop.tsx" }, { "path": "registry/litt/ui/bodies/file-drop.device.tsx", "type": "registry:ui", "content": "\"use client\";\n// @litt/file-drop 2026.11.09. What changed: https://littmd.vercel.app/changelog.md\n\n/**\n * File drop, the Device body (proposals/worlds.md, Bodies; material.md, 8): a slot in the body, with a key to choose.\n *\n * - The area is an engraved legend (litt-legend: capitals, tracked, --litt-engrave) over a slot: LCD glass (--litt-field,\n * --litt-field-shade, the mono) set in a bezel well (--litt-tray, --litt-tray-shade) with the hint on it, and a Choose key (the\n * Button's, --litt-block on its 2px skirt) beside it. Nothing is framed round them: the body is the page.\n * - Dragging: the legend changes to say what a drop will do, the bezel takes the focus ring, the glass brightens to\n * its ink and a lamp at its end lights (--litt-field-ink with a little glow, never the accent, R6). The lamp never says\n * it alone: the words do. They switch in three steps on the instant tier, never a fade.\n * - Disabled lies flat: a surface-2 bezel with a hairline, dimmed glass, the legend in --litt-fg-subtle because it still\n * says something, and no drop and no tab stop.\n * - A file row is a line of LCD glass: the file icon, its name in the mono and, at its end, its size; while it uploads\n * the size gives way to a row of segments that light in steps and the percent. Retry and Remove are real keys on the\n * body beside it (a ghost button would not read on dark glass). A failure keeps its lit segments where they\n * stopped, in --litt-danger, and says why on a second line of glass under it, beside a lamp in --litt-danger.\n * - The segments are decoration: the row's role=\"progressbar\" is named \"Uploading \", carries the percent as its\n * value text, and its end is said once in a polite status, as Progress does.\n * - Forced colors drops shadows and fills, so the bezel and the glass get real borders and a lit lamp or segment is\n * a system highlight.\n * - The contract (the drop, the checking, the picker, the alert) is file-drop.tsx's.\n */\nimport { useId, type CSSProperties } from \"react\";\nimport { Button } from \"../button\";\nimport { FileIcon, RetryIcon, XIcon } from \"../icons\";\nimport { formatSize, type FileDropBodyProps, type FileRowBodyProps } from \"../file-drop\";\n\n/* A change switches in place in three even steps on the instant tier, as a display's segments light. */\nconst STEPS = \"steps(3, end)\";\nconst stepped: CSSProperties = {\n transitionProperty: \"background-color, box-shadow, color\",\n transitionDuration: \"var(--litt-dur-instant)\",\n transitionTimingFunction: `${STEPS}`,\n};\n\n/** Device, the slot: an engraved legend over LCD glass in a bezel, and a Choose key. */\nexport function FileDropDeviceBody({ area, words, hint, hintId, dragging, disabled, chooseLabel, onChoose, picker }: FileDropBodyProps) {\n return (\n \n

\n {words}\n

\n
\n \n \n {hint && (\n

\n {hint}\n

\n )}\n \n
\n \n \n \n {picker}\n \n );\n}\n\n/* Twenty segments; the share lights that many of them. */\nconst SEGMENTS = 20;\n\n/** Device, a file row: a line of LCD glass, its upload as segments lighting in steps, and Retry and Remove as keys. */\nexport function FileRowDeviceBody({ name, size, progress, error, uploading, onRetry, onRemove }: FileRowBodyProps) {\n const labelId = useId();\n const messageId = useId();\n const showing = uploading || !!error;\n const share = Math.max(0, Math.min(1, (progress ?? 0) / 100));\n const lit = Math.round(share * SEGMENTS);\n const reading = error ? \"Failed\" : `${Math.round(share * 100)}%`;\n return (\n
  • \n
    \n
    \n \n {name}\n {showing && (\n <>\n {`Uploading ${name}`}\n \n {Array.from({ length: SEGMENTS }, (_, i) => (\n \n ))}\n
    \n \n )}\n {showing ? error ? Failed : reading : size !== undefined ? formatSize(size) : \"\"}\n
    \n
    \n {error && onRetry && (\n \n )}\n {onRemove && (\n \n )}\n
    \n \n {error && (\n

    \n \n {error}\n

    \n )}\n \n {error ? `Uploading ${name}: failed.` : \"\"}\n \n
    • \n );\n}\n", "target": "components/litt/bodies/file-drop.device.tsx" }, { "path": "registry/litt/ui/bodies/file-drop.flat.tsx", "type": "registry:ui", "content": "\"use client\";\n// @litt/file-drop 2026.11.09. What changed: https://littmd.vercel.app/changelog.md\n\n/**\n * File drop, the Flat body (proposals/worlds.md, Bodies; material.md, 7): ink on paper.\n *\n * - The area is a grey sheet (--litt-cut is --litt-surface-3) with one sentence on it, \"Drop files or choose\", the last word a\n * pill (the one shape for what a hand touches) that opens the picker. No arrow, no block, no line, no shade. Under\n * it the hint in grey words. On a touch screen the sentence is the pill alone, \"Add files\".\n * - While files are over it the sheet is ringed in ink (a 2px outline drawn inside the sheet, the only line Flat\n * makes) and the sentence says what a drop will do: \"Drop to add these files\". The pill steps aside (clipped away,\n * not removed) so the sheet has one sentence, not two. Forced colors keeps the outline in Highlight.\n * - Choose is a real button named by the contract (\"Choose files\", with the hint as its description): the visible\n * word is inside the name, so a voice user who says \"choose\" reaches it.\n * - A file is a line of words: its name in ink and its size in grey, Retry and Remove as words in pills at the\n * end, and under them the Progress rail while it uploads (an ink fill on grey, nothing else) and, if it failed,\n * why in --litt-danger. No icon, no rule between rows; space parts them.\n * - Disabled lies flat: a --litt-surface-2 sheet, the sentence in --litt-fg-subtle, no drop and no tab stop.\n */\nimport { Button } from \"../button\";\nimport { Progress } from \"../progress\";\nimport { useDevice } from \"../../../lib/litt/motion\";\nimport { formatSize, type FileDropBodyProps, type FileRowBodyProps } from \"../file-drop\";\n\n/** Flat, a grey sheet with one sentence: \"Drop files or choose\", ringed in ink while a file is over it. */\nexport function FileDropFlatBody({ area, words, hint, hintId, dragging, disabled, chooseLabel, onChoose, picker }: FileDropBodyProps) {\n const { coarse } = useDevice();\n /* While files are over it the pill is clipped away (sr-only), not removed, so it is still the button that was there. */\n const pill = (\n \n \n \n );\n return (\n \n

    \n {dragging ? (\n words\n ) : coarse ? null : (\n \"Drop files or\"\n )}\n {pill}\n

    \n {hint && (\n

    \n {hint}\n

    \n )}\n {picker}\n \n );\n}\n\n/** Flat, a file as a line of words: name in ink, size in grey, Retry and Remove as words, the rail and the reason under. */\nexport function FileRowFlatBody({ name, size, progress, error, uploading, onRetry, onRemove }: FileRowBodyProps) {\n return (\n
  • \n

    \n {name}\n {size !== undefined && {formatSize(size)}}\n

    \n
    \n {error && onRetry && (\n \n )}\n {onRemove && (\n \n )}\n
    \n {(uploading || error) && (\n \n )}\n
    • \n );\n}\n", "target": "components/litt/bodies/file-drop.flat.tsx" } ], "docs": "Import FileDrop, FileList and FileRow from components/litt/file-drop. FileDrop hands the files that passed to onFiles; you upload them and render a FileRow for each.", "meta": { "version": "2026.11.09", "released": "2026-11-09", "changelog": "https://littmd.vercel.app/changelog.md" } }