KQ-882 · FILE/CARD

File Card

A file in a thread, and the distance it still has to travel. One control carries the whole journey: a round button with a down arrow on offer, a ring whose dash offset follows progress on glide with the arrow cross-faded to a stop square so the same press cancels, and at 1 a pill that widens in place with layout while a tick draws on flick. Failure freezes the ring, states "Failed" in words beside the name and offers Retry; the type tile is drawn from the file's own name and every size goes through a format prop.

KQ-882 · FILE/CARD

site-survey.pdfPDF · 2.4 MB
Rui · document9:41
pallet-counts.csvCSV · 48 KB
Rui · sheet9:42

two files offered

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/file-card

Props

files: FileMessage[]; default —; The files in the thread, oldest first: id, from, name, bytes, kind, progress, state and time.
format: (bytes: number) => string; default a KB/MB formatter; Renders every size, so a host's own units win.
onDownload: (id: string) => void; default —; Fires from the round control while the file is on offer.
onCancel: (id: string) => void; default —; Fires from the same control while it is loading.
onOpen: (id: string) => void; default —; Fires from the Open pill once the file has landed.
onRetry: (id: string) => void; default —; Fires from the Retry pill after a failure.
onSettle: (id: string) => void; default —; Fires once, when a file first reaches "ready".
peerName: string; default "Them"; Names the sender under each card.
label: string; default —; Names the thread list for assistive technology.

Prop	Type	Default	Description
files	FileMessage[]	—	The files in the thread, oldest first: id, from, name, bytes, kind, progress, state and time.
format	(bytes: number) => string	a KB/MB formatter	Renders every size, so a host's own units win.
onDownload	(id: string) => void	—	Fires from the round control while the file is on offer.
onCancel	(id: string) => void	—	Fires from the same control while it is loading.
onOpen	(id: string) => void	—	Fires from the Open pill once the file has landed.
onRetry	(id: string) => void	—	Fires from the Retry pill after a failure.
onSettle	(id: string) => void	—	Fires once, when a file first reaches "ready".
peerName	string	"Them"	Names the sender under each card.
label	string	—	Names the thread list for assistive technology.