shadcn.io is not affiliated with official shadcn/ui
Attachment Counts Stepper Block for Solid
A tender pack in four steps, each showing a paperclip, how many files it holds and type tags like PDF and DWG, with a drop zone that lists names and sizes only and a pack total worked out from the sizes.
Installation
Overview
Show what each stage holds before it is sent, with this attachment stepper for Solid with Ark UI. A plus-marked frame has a heading row with the whole pack worked out from the file sizes, such as "6 files, 3.4 MB", over a Steps rail at the start with four steps: Brief, Drawings, Compliance and Sign-off. Each shows a paperclip, a count and small type tags read from the file names (PDF, DWG, XLSX). The open step's panel has a File Upload drop zone that lists names and sizes only and says the files stay on this device, a list with a Remove button on every file, and an Empty state when a step has none. "Continue" is the block's one Shine Button: a step needs one file first, and the status line says which. Nothing is read, scanned or uploaded. For tenders, applications, claims and onboarding packs.
FAQ
Where do the counts and tags come from?
From the list of files in state, so they cannot disagree with it: each step's count is the files tagged with its id, the tags are the distinct extensions among them in the order they first appear, and the total adds up each file's size. Adding or removing a file changes all three at once.
What happens to a file I drop?
Only its name and size are read, as the drop zone says. The browser does not open it, scan it or send it anywhere, and the list is gone when you reload. Files that are not PDF, DWG, XLSX or DOCX, or are over 25 MB, are refused with a line saying which.
Why does Continue not move on?
A step needs at least one file. The button stays in place but quiet and is marked aria-disabled, so it keeps its focus, and pressing it says "Add a file to Compliance first." Going back is always free.
Where does focus go after Remove?
To the file list itself, which is a scrolling region you can reach with Tab and scroll with the arrow keys, so you do not lose your place. The list keeps the same height whether it holds none or ten files, and scrolls when there are more than three.