File Upload

1/** @jsxImportSource hono/jsx */
2import { cn, type ClassValue } from "@/registry/lib/cn"
3 
4// File Upload — shadcn-htmx, htmx v4 + Tailwind v4.
5//
6// A styled <label>-wrapped native <input type="file"> with an optional
7// drag-and-drop enhancement, a selected-file list (with image previews),
8// and a native <progress> upload bar. It submits via a standard multipart
9// POST — no custom transport — so it works with a plain <form> and degrades
10// to a bare file picker when JavaScript is off.
11//
12// There is no "file upload" or "dropzone" element in the platform — the
13// pieces are:
14//   - <input type="file"> + <label>  — the picker + its accessible name.
15//       repos/mdn/files/en-us/web/html/reference/elements/input/file/index.md
16//   - Drag-and-Drop API (drop/dragover) + File API (input.files, FileList)
17//     for the optional drop-zone enhancement.
18//       repos/mdn/files/en-us/web/api/html_drag_and_drop_api/file_drag_and_drop/index.md
19//   - htmx multipart upload (hx-encoding="multipart/form-data") and
20//     hx-preserve to keep the selection across re-render-on-error swaps.
21//       repos/htmx/www/src/content/patterns/02-forms/03-file-upload.md
22//       repos/htmx/www/reference.md  (hx-encoding, hx-preserve)
23//
24// Style analogues (matched exactly): registry/ui/input.tsx (the field /
25// file:* affordance + focus-visible ring + .htmx-request dim) and
26// registry/ui/progress.tsx (the native <progress> visual).
27//
28// The keyboard/behaviour contract (drop wiring + filename/preview list +
29// reset) lives in public/site.js, scoped to [data-slot="file-upload"]; an
30// inline boot script next to the root only marks it ready, so a server swap
31// re-arms cleanly. None of it is required for the upload to work.
32 
33const root =
34  "group/file-upload grid w-full gap-3 " +
35  // While a request triggered by/targeting this control is in flight,
36  // htmx adds .htmx-request — dim like Input does.
37  "[&.htmx-request]:opacity-70"
38 
39const zone =
40  "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border border-dashed border-input bg-transparent px-6 py-8 text-center text-sm text-muted-foreground shadow-xs transition-[color,box-shadow] outline-none " +
41  "dark:bg-input/30 " +
42  // The visually-hidden <input> is the real focus target; mirror its focus
43  // ring onto the styled label via :focus-within.
44  "focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 " +
45  "hover:border-ring/60 hover:text-foreground " +
46// … truncated