@krizaka/ui 2.2.0 → 2.4.0

package/registry/file-upload.json

@@ -0,0 +1,471 @@
+{
+  "name": "file-upload",
+  "type": "primitive",
+  "title": "File upload",
+  "summary": "A drop zone that checks type, size and count, a list of uploads with preview, progress, speed and the actions each state allows, and a queue that pauses and resumes — Tus-ready without depending on it.",
+  "description": "A drop zone that checks type, size and count, a list of uploads with preview, progress, speed and the actions each state allows, and a queue that pauses and resumes — Tus-ready without depending on it.",
+  "status": "beta",
+  "category": "media",
+  "platforms": "web",
+  "whenToUse": [
+    "To send files: a video to publish, documents to index, pictures for a gallery.",
+    "With `useUploadQueue` for large files that must survive a pause, a failure or a slow network (Tus, multipart)."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "To take a picture or a clip with the camera in the page: media capture.",
+      "use": "media-capture"
+    },
+    {
+      "when": "To choose a picture's frame before sending it: the cropper, then the upload.",
+      "use": "image-cropper"
+    }
+  ],
+  "bestPractices": [
+    "Say what is accepted in `hint` (“MP4 or MOV, up to 4 GB”) and enforce it with `accept` and `maxSize`.",
+    "Explain each refusal with `refusalLabel` (“clip.avi is not a supported format”).",
+    "Wrap your upload client in `upload(file, { signal, onProgress, resumed })`: abort on `signal`, resume from the offset when `resumed`.",
+    "Revoke previews you create yourself; `useUploadQueue` revokes its own."
+  ],
+  "accessibility": {
+    "keyboard": [
+      {
+        "keys": "Enter / Space",
+        "action": "On the button: open the file picker (dropping is never the only way)."
+      }
+    ],
+    "notes": [
+      "The zone's button is described by the title and the hint; the file input itself stays out of the tab order.",
+      "Each upload's progress is a `progressbar` named by the file; a failure is announced (`role=\"alert\"`).",
+      "Every action is a button named with the file (“Pause clip.mp4”)."
+    ]
+  },
+  "related": [
+    "progress",
+    "media-capture",
+    "image-cropper",
+    "video-trimmer"
+  ],
+  "web": {
+    "entry": "@krizaka/ui/file-upload",
+    "import": "import { Dropzone, UploadList, useUploadQueue, acceptsFile, formatBytes } from \"@krizaka/ui/file-upload\";",
+    "props": [
+      {
+        "component": "Dropzone",
+        "description": "A zone to drop files on, with a button that opens the picker: checks type, size and count.",
+        "props": [
+          {
+            "name": "browseLabel",
+            "type": "string",
+            "default": null,
+            "description": "The button that opens the file picker (\"Choose a file\"), passed translated.",
+            "required": true
+          },
+          {
+            "name": "onFiles",
+            "type": "(files: File[]) => void",
+            "default": null,
+            "description": "Called with the files accepted (never empty).",
+            "required": true
+          },
+          {
+            "name": "title",
+            "type": "string",
+            "default": null,
+            "description": "The title in the zone (\"Drop your video here\"), passed translated.",
+            "required": true
+          },
+          {
+            "name": "accept",
+            "type": "string",
+            "default": null,
+            "description": "The types accepted, as the `accept` attribute (`\"video/*\"`, `\"image/png,.pdf\"`).",
+            "required": false
+          },
+          {
+            "name": "capture",
+            "type": "\"user\" | \"environment\"",
+            "default": null,
+            "description": "On a phone, opens the camera directly (`\"environment\"` the back one, `\"user\"` the front one).",
+            "required": false
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the zone.",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available (an upload is running).",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "What is accepted, in words (\"MP4 or MOV, up to 4 GB\").",
+            "required": false
+          },
+          {
+            "name": "icon",
+            "type": "ReactNode",
+            "default": null,
+            "description": "An icon instead of the upload glyph.",
+            "required": false
+          },
+          {
+            "name": "maxFiles",
+            "type": "number",
+            "default": null,
+            "description": "The most files at once (1 unless `multiple`).",
+            "required": false
+          },
+          {
+            "name": "maxSize",
+            "type": "number",
+            "default": null,
+            "description": "The largest file, in bytes.",
+            "required": false
+          },
+          {
+            "name": "multiple",
+            "type": "boolean",
+            "default": null,
+            "description": "Several files at once.",
+            "required": false
+          },
+          {
+            "name": "onReject",
+            "type": "((rejections: FileRejection[]) => void)",
+            "default": null,
+            "description": "Called with the files refused and why (show `refusalLabel`'s words, or your own).",
+            "required": false
+          },
+          {
+            "name": "refusalLabel",
+            "type": "((rejection: FileRejection) => string)",
+            "default": null,
+            "description": "The words of a refusal, shown in the zone: `(r) => r.file.name + \" is too large\"`. Without it, nothing is shown.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "UploadList",
+        "description": "The files being sent: preview, size, progress, speed and time left, and the actions each state allows.",
+        "props": [
+          {
+            "name": "items",
+            "type": "readonly UploadItem[]",
+            "default": null,
+            "description": "The uploads, as `useUploadQueue` gives them (or your own state).",
+            "required": true
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the list.",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "Partial<UploadListLabels>",
+            "default": null,
+            "description": "The words, passed translated; English by default.",
+            "required": false
+          },
+          {
+            "name": "locale",
+            "type": "string",
+            "default": "en",
+            "description": "The locale of sizes and speeds. Default `\"en\"`.",
+            "required": false
+          },
+          {
+            "name": "onCancel",
+            "type": "((id: string) => void)",
+            "default": null,
+            "description": "Stops an upload under way and drops it.",
+            "required": false
+          },
+          {
+            "name": "onPause",
+            "type": "((id: string) => void)",
+            "default": null,
+            "description": "Pauses an upload (shown while it uploads, when given).",
+            "required": false
+          },
+          {
+            "name": "onRemove",
+            "type": "((id: string) => void)",
+            "default": null,
+            "description": "Drops a finished or failed one from the list.",
+            "required": false
+          },
+          {
+            "name": "onResume",
+            "type": "((id: string) => void)",
+            "default": null,
+            "description": "Resumes a paused one.",
+            "required": false
+          },
+          {
+            "name": "onRetry",
+            "type": "((id: string) => void)",
+            "default": null,
+            "description": "Tries a failed one again.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "video",
+        "title": "Publish a video",
+        "description": "The zone and the queue together: drop, watch the progress, pause and resume.",
+        "path": "examples/file-upload/video.tsx",
+        "module": "@krizaka/ui/registry/examples/file-upload/video",
+        "code": "\"use client\";\n\nimport { Dropzone, UploadList, useUploadQueue } from \"@krizaka/ui/file-upload\";\n\n// A stand-in for your client (Tus, multipart…): it reports progress and stops when the signal aborts.\nfunction fakeUpload(file: File, { signal, onProgress }: { signal: AbortSignal; onProgress: (sent: number) => void }) {\n  return new Promise<void>((resolve) => {\n    let sent = 0;\n    const timer = setInterval(() => {\n      sent = Math.min(file.size, sent + file.size / 40);\n      onProgress(sent);\n      if (sent < file.size) return;\n      clearInterval(timer);\n      resolve();\n    }, 150);\n    signal.addEventListener(\"abort\", () => clearInterval(timer));\n  });\n}\n\nexport default function FileUploadVideo() {\n  const queue = useUploadQueue({ upload: fakeUpload });\n  return (\n    <div className=\"flex w-full max-w-lg flex-col gap-3\">\n      <Dropzone\n        title=\"Drop your video here\"\n        browseLabel=\"Choose a video\"\n        hint=\"MP4, MOV or WebM, up to 4 GB\"\n        accept=\"video/*\"\n        maxSize={4 * 1024 ** 3}\n        onFiles={queue.add}\n        refusalLabel={(r) => `${r.file.name}: ${r.reason === \"size\" ? \"larger than 4 GB\" : \"not a video\"}`}\n      />\n      {queue.items.length > 0 && <UploadList items={queue.items} onPause={queue.pause} onResume={queue.resume} onCancel={queue.cancel} onRemove={queue.remove} onRetry={queue.retry} />}\n    </div>\n  );\n}\n"
+      },
+      {
+        "name": "states",
+        "title": "Every state",
+        "description": "`UploadList` with an upload under way, a paused one, a failed one and a finished one.",
+        "path": "examples/file-upload/states.tsx",
+        "module": "@krizaka/ui/registry/examples/file-upload/states",
+        "code": "import { UploadList } from \"@krizaka/ui/file-upload\";\n\nconst noop = () => undefined;\n\n// Each state with the actions it allows: pause while it sends, resume, retry, remove.\nexport default function FileUploadStates() {\n  return (\n    <UploadList\n      className=\"max-w-lg\"\n      items={[\n        { id: \"a\", name: \"sunset-timelapse.mp4\", size: 1_840_000_000, type: \"video/mp4\", progress: 0.42, status: \"uploading\", speed: 12_400_000 },\n        { id: \"b\", name: \"behind-the-scenes.mov\", size: 620_000_000, type: \"video/quicktime\", progress: 0.71, status: \"paused\" },\n        { id: \"c\", name: \"interview.mp4\", size: 240_000_000, type: \"video/mp4\", progress: 0.1, status: \"error\", error: \"The connection was lost. Your upload resumes where it stopped.\" },\n        { id: \"d\", name: \"cover.jpg\", size: 820_000, type: \"image/jpeg\", progress: 1, status: \"done\" },\n      ]}\n      onPause={noop}\n      onResume={noop}\n      onRetry={noop}\n      onCancel={noop}\n      onRemove={noop}\n    />\n  );\n}\n"
+      },
+      {
+        "name": "images",
+        "title": "Several pictures",
+        "description": "Up to six images of 10 MB; the refused ones are listed with their reason.",
+        "path": "examples/file-upload/images.tsx",
+        "module": "@krizaka/ui/registry/examples/file-upload/images",
+        "code": "\"use client\";\n\nimport { Dropzone } from \"@krizaka/ui/file-upload\";\nimport * as React from \"react\";\n\n// Up to six pictures of 10 MB; each refusal says why.\nexport default function FileUploadImages() {\n  const [names, setNames] = React.useState<string[]>([]);\n  return (\n    <div className=\"flex w-full max-w-lg flex-col gap-2\">\n      <Dropzone\n        title=\"Add pictures to the gallery\"\n        browseLabel=\"Choose pictures\"\n        hint=\"JPEG, PNG or WebP — up to 6 pictures of 10 MB\"\n        accept=\"image/jpeg,image/png,image/webp\"\n        multiple\n        maxFiles={6}\n        maxSize={10 * 1024 ** 2}\n        onFiles={(files) => setNames(files.map((f) => f.name))}\n        refusalLabel={(r) => `${r.file.name}: ${{ type: \"not a JPEG, PNG or WebP\", size: \"larger than 10 MB\", count: \"more than 6 pictures\" }[r.reason]}`}\n      />\n      {names.length > 0 && <p className=\"text-sm text-fg-secondary\">Ready: {names.join(\", \")}</p>}\n    </div>\n  );\n}\n"
+      },
+      {
+        "name": "tus",
+        "title": "Tus, resumable",
+        "description": "`useUploadQueue` around a resumable client: abort on pause, continue from the offset on resume.",
+        "path": "examples/file-upload/tus.tsx",
+        "module": "@krizaka/ui/registry/examples/file-upload/tus",
+        "code": "\"use client\";\n\nimport { Dropzone, UploadList, useUploadQueue } from \"@krizaka/ui/file-upload\";\n\n// The shape of a Tus client (tus-js-client: new Upload(file, options), start(), abort()), kept out of the example.\ntype Resumable = { start(): void; abort(): void };\ndeclare function createTusUpload(file: File, events: { onProgress: (sent: number) => void; onSuccess: () => void; onError: (e: Error) => void }): Resumable;\n\nexport default function FileUploadTus() {\n  const queue = useUploadQueue({\n    concurrency: 1,\n    // `resumed`: Tus finds the offset by itself (its fingerprint); a multipart client would skip the parts sent.\n    upload: (file, { signal, onProgress }) =>\n      new Promise((resolve, reject) => {\n        const upload = createTusUpload(file, { onProgress, onSuccess: resolve, onError: reject });\n        signal.addEventListener(\"abort\", () => upload.abort());\n        upload.start();\n      }),\n  });\n  return (\n    <div className=\"flex w-full max-w-lg flex-col gap-3\">\n      <Dropzone title=\"Drop documents to index\" browseLabel=\"Choose documents\" accept=\".pdf,.docx,.md\" multiple onFiles={queue.add} />\n      <UploadList items={queue.items} onPause={queue.pause} onResume={queue.resume} onRetry={queue.retry} onCancel={queue.cancel} onRemove={queue.remove} />\n    </div>\n  );\n}\n"
+      }
+    ]
+  },
+  "native": null,
+  "files": [
+    {
+      "path": "file-upload/file-upload.tsx",
+      "content": "// Client. Three parts that work alone or together:\n// - `Dropzone`: drop files on it or pick them with its button (a real `<input type=\"file\">`, so the keyboard and the\n//   phone's camera / files sheet work); it checks the type, the size and the count, and hands over the accepted files\n//   and the refused ones with their reason;\n// - `UploadList`: each file with its preview, size, progress, speed, and the actions its state allows (pause, resume,\n//   retry, cancel, remove); the progress is a `progressbar`, a failure is announced;\n// - `useUploadQueue`: runs the app's `upload(file, { signal, onProgress, resumed })` with a concurrency, pauses by\n//   aborting the signal and resumes by calling it again with `resumed: true` — what a Tus client (tus-js-client's\n//   `abort()` / `start()`) or a multipart upload needs, without depending on either.\nimport { getNumberFormat } from \"@krizaka/intl\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { CloseGlyph, FileGlyph, PauseGlyph, PlayGlyph, RetryGlyph, UploadGlyph } from \"../glyphs\";\nimport { Progress } from \"../progress\";\n\nexport const fileUpload = tv({\n  slots: {\n    zone:\n      \"relative flex w-full flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed border-border-default bg-surface-1 px-6 py-10 text-center \" +\n      \"transition-colors data-[dragging]:border-accent data-[dragging]:bg-accent-soft data-[disabled]:opacity-50 has-[:focus-visible]:border-accent\",\n    zoneIcon: \"flex h-12 w-12 items-center justify-center rounded-full bg-surface-3 text-fg-secondary\",\n    zoneTitle: \"text-sm font-semibold text-fg\",\n    zoneHint: \"text-xs text-fg-secondary\",\n    browse:\n      \"inline-flex h-9 items-center justify-center rounded-lg bg-accent px-4 text-sm font-semibold text-on-accent transition-colors hover:bg-accent-hover \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:pointer-events-none\",\n    refusals: \"w-full text-left text-xs font-medium text-fg-danger\",\n    list: \"flex w-full flex-col gap-2\",\n    item: \"flex items-center gap-3 rounded-xl border border-border-default bg-surface-1 p-3 data-[status=error]:border-danger/60\",\n    preview: \"flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-surface-3 text-fg-secondary\",\n    body: \"flex min-w-0 flex-1 flex-col gap-1.5\",\n    name: \"truncate text-sm font-semibold text-fg\",\n    meta: \"flex flex-wrap gap-x-2 text-xs tabular-nums text-fg-secondary\",\n    error: \"text-xs font-medium text-fg-danger\",\n    actions: \"flex shrink-0 items-center gap-1\",\n    action:\n      \"inline-flex h-8 w-8 items-center justify-center rounded-md text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  },\n});\n\n/** Why a file was refused. */\nexport type FileRejection = { file: File; reason: \"type\" | \"size\" | \"count\" };\n\n/** Whether a file matches an `accept` list (`\"video/*,.mov,image/png\"`). */\nexport function acceptsFile(file: File, accept?: string): boolean {\n  if (!accept) return true;\n  const name = file.name.toLowerCase();\n  const type = file.type.toLowerCase();\n  return accept\n    .split(\",\")\n    .map((rule) => rule.trim().toLowerCase())\n    .filter(Boolean)\n    .some((rule) => (rule.startsWith(\".\") ? name.endsWith(rule) : rule.endsWith(\"/*\") ? type.startsWith(rule.slice(0, -1)) : type === rule));\n}\n\n/** A size in the locale's words (`\"1.4 GB\"`, `\"820 kB\"`), through `@krizaka/intl`. */\nexport function formatBytes(bytes: number, locale = \"en\"): string {\n  const units = [\"byte\", \"kilobyte\", \"megabyte\", \"gigabyte\", \"terabyte\"] as const;\n  let value = Math.max(0, bytes);\n  let unit = 0;\n  while (value >= 1000 && unit < units.length - 1) {\n    value /= 1000;\n    unit += 1;\n  }\n  return getNumberFormat(locale, { style: \"unit\", unit: units[unit], unitDisplay: \"short\", maximumFractionDigits: value < 10 && unit > 0 ? 1 : 0 }).format(value);\n}\n\nexport type DropzoneProps = {\n  /** The title in the zone (\"Drop your video here\"), passed translated. */\n  title: string;\n  /** The button that opens the file picker (\"Choose a file\"), passed translated. */\n  browseLabel: string;\n  /** What is accepted, in words (\"MP4 or MOV, up to 4 GB\"). */\n  hint?: string;\n  /** The types accepted, as the `accept` attribute (`\"video/*\"`, `\"image/png,.pdf\"`). */\n  accept?: string;\n  /** The largest file, in bytes. */\n  maxSize?: number;\n  /** The most files at once (1 unless `multiple`). */\n  maxFiles?: number;\n  /** Several files at once. */\n  multiple?: boolean;\n  /** Not available (an upload is running). */\n  disabled?: boolean;\n  /** On a phone, opens the camera directly (`\"environment\"` the back one, `\"user\"` the front one). */\n  capture?: \"user\" | \"environment\";\n  /** Called with the files accepted (never empty). */\n  onFiles: (files: File[]) => void;\n  /** Called with the files refused and why (show `refusalLabel`'s words, or your own). */\n  onReject?: (rejections: FileRejection[]) => void;\n  /** The words of a refusal, shown in the zone: `(r) => r.file.name + \" is too large\"`. Without it, nothing is shown. */\n  refusalLabel?: (rejection: FileRejection) => string;\n  /** An icon instead of the upload glyph. */\n  icon?: React.ReactNode;\n  /** Classes merged on the zone. */\n  className?: string;\n};\n\n/** A zone to drop files on, with a button that opens the picker: checks type, size and count. */\nexport function Dropzone({\n  title,\n  browseLabel,\n  hint,\n  accept,\n  maxSize,\n  maxFiles,\n  multiple,\n  disabled,\n  capture,\n  onFiles,\n  onReject,\n  refusalLabel,\n  icon,\n  className,\n}: DropzoneProps) {\n  const s = fileUpload();\n  const input = React.useRef<HTMLInputElement>(null);\n  const [dragging, setDragging] = React.useState(false);\n  const [refused, setRefused] = React.useState<FileRejection[]>([]);\n  const depth = React.useRef(0);\n  const id = React.useId();\n  const limit = maxFiles ?? (multiple ? Infinity : 1);\n\n  const take = (list: FileList | File[]) => {\n    const files = [...list];\n    const accepted: File[] = [];\n    const rejections: FileRejection[] = [];\n    for (const file of files) {\n      if (!acceptsFile(file, accept)) rejections.push({ file, reason: \"type\" });\n      else if (maxSize !== undefined && file.size > maxSize) rejections.push({ file, reason: \"size\" });\n      else if (accepted.length >= limit) rejections.push({ file, reason: \"count\" });\n      else accepted.push(file);\n    }\n    setRefused(rejections);\n    if (accepted.length) onFiles(accepted);\n    if (rejections.length) onReject?.(rejections);\n  };\n\n  return (\n    <div\n      className={s.zone({ className })}\n      data-dragging={dragging ? \"\" : undefined}\n      data-disabled={disabled ? \"\" : undefined}\n      onDragEnter={(event) => {\n        if (disabled) return;\n        event.preventDefault();\n        depth.current += 1;\n        setDragging(true);\n      }}\n      onDragOver={(event) => {\n        if (disabled) return;\n        event.preventDefault();\n        event.dataTransfer.dropEffect = \"copy\";\n      }}\n      onDragLeave={() => {\n        depth.current = Math.max(0, depth.current - 1);\n        if (depth.current === 0) setDragging(false);\n      }}\n      onDrop={(event) => {\n        if (disabled) return;\n        event.preventDefault();\n        depth.current = 0;\n        setDragging(false);\n        take(event.dataTransfer.files);\n      }}\n    >\n      <span className={s.zoneIcon()} aria-hidden>\n        {icon ?? <UploadGlyph className=\"h-6 w-6\" />}\n      </span>\n      <p id={`${id}-title`} className={s.zoneTitle()}>\n        {title}\n      </p>\n      {hint ? (\n        <p id={`${id}-hint`} className={s.zoneHint()}>\n          {hint}\n        </p>\n      ) : null}\n      <button\n        type=\"button\"\n        className={s.browse()}\n        disabled={disabled}\n        aria-describedby={[`${id}-title`, hint ? `${id}-hint` : null].filter(Boolean).join(\" \")}\n        onClick={() => input.current?.click()}\n      >\n        {browseLabel}\n      </button>\n      <input\n        ref={input}\n        type=\"file\"\n        tabIndex={-1}\n        aria-hidden\n        className=\"sr-only\"\n        accept={accept}\n        multiple={multiple}\n        capture={capture}\n        disabled={disabled}\n        onChange={(event) => {\n          if (event.target.files?.length) take(event.target.files);\n          event.target.value = \"\";\n        }}\n      />\n      {refusalLabel && refused.length > 0 ? (\n        <ul role=\"alert\" className={s.refusals()}>\n          {refused.map((r) => (\n            <li key={`${r.file.name}-${r.reason}`}>{refusalLabel(r)}</li>\n          ))}\n        </ul>\n      ) : null}\n    </div>\n  );\n}\n\nexport type UploadStatus = \"queued\" | \"uploading\" | \"paused\" | \"done\" | \"error\";\n\nexport type UploadItem = {\n  /** A stable id. */\n  id: string;\n  /** The file's name. */\n  name: string;\n  /** Its size, in bytes. */\n  size: number;\n  /** Its MIME type (`video/mp4`): picks the preview. */\n  type?: string;\n  /** Sent so far, between 0 and 1. */\n  progress: number;\n  /** Where it stands. */\n  status: UploadStatus;\n  /** Why it failed, passed translated. */\n  error?: string;\n  /** A preview (an object URL of the file, a thumbnail from the server). */\n  previewUrl?: string;\n  /** Bytes per second, for the speed and the time left. */\n  speed?: number;\n};\n\nexport type UploadListLabels = {\n  /** The list's accessible name (\"Uploads\"). */\n  list: string;\n  pause: (name: string) => string;\n  resume: (name: string) => string;\n  retry: (name: string) => string;\n  cancel: (name: string) => string;\n  remove: (name: string) => string;\n  /** A state in words: `(status) => \"Paused\"`… */\n  status: (status: UploadStatus) => string;\n  /** The time left: `(seconds) => \"2 min left\"`. */\n  remaining: (seconds: number) => string;\n};\n\nexport const uploadListLabels: UploadListLabels = {\n  list: \"Uploads\",\n  pause: (name) => `Pause ${name}`,\n  resume: (name) => `Resume ${name}`,\n  retry: (name) => `Retry ${name}`,\n  cancel: (name) => `Cancel ${name}`,\n  remove: (name) => `Remove ${name}`,\n  status: (status) => ({ queued: \"Waiting\", uploading: \"Uploading\", paused: \"Paused\", done: \"Uploaded\", error: \"Failed\" })[status],\n  remaining: (seconds) => (seconds < 60 ? `${Math.ceil(seconds)} s left` : `${Math.ceil(seconds / 60)} min left`),\n};\n\nexport type UploadListProps = {\n  /** The uploads, as `useUploadQueue` gives them (or your own state). */\n  items: readonly UploadItem[];\n  /** Pauses an upload (shown while it uploads, when given). */\n  onPause?: (id: string) => void;\n  /** Resumes a paused one. */\n  onResume?: (id: string) => void;\n  /** Tries a failed one again. */\n  onRetry?: (id: string) => void;\n  /** Stops an upload under way and drops it. */\n  onCancel?: (id: string) => void;\n  /** Drops a finished or failed one from the list. */\n  onRemove?: (id: string) => void;\n  /** The locale of sizes and speeds. Default `\"en\"`. */\n  locale?: string;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<UploadListLabels>;\n  /** Classes merged on the list. */\n  className?: string;\n};\n\nfunction Preview({ item }: { item: UploadItem }) {\n  if (item.previewUrl && item.type?.startsWith(\"image/\")) return <img src={item.previewUrl} alt=\"\" className=\"h-full w-full object-cover\" />;\n  if (item.previewUrl && item.type?.startsWith(\"video/\")) return <video src={item.previewUrl} muted playsInline preload=\"metadata\" className=\"h-full w-full object-cover\" aria-hidden />;\n  return <FileGlyph className=\"h-5 w-5\" />;\n}\n\n/** The files being sent: preview, size, progress, speed and time left, and the actions each state allows. */\nexport function UploadList({ items, onPause, onResume, onRetry, onCancel, onRemove, locale = \"en\", labels: given, className }: UploadListProps) {\n  const labels = { ...uploadListLabels, ...given };\n  const s = fileUpload();\n  const action = (label: string, run: () => void, glyph: React.ReactNode) => (\n    <button type=\"button\" className={s.action()} aria-label={label} title={label} onClick={run}>\n      {glyph}\n    </button>\n  );\n  return (\n    <ul aria-label={labels.list} className={s.list({ className })}>\n      {items.map((item) => {\n        const left = item.status === \"uploading\" && item.speed ? ((1 - item.progress) * item.size) / item.speed : null;\n        return (\n          <li key={item.id} className={s.item()} data-status={item.status}>\n            <span className={s.preview()}>\n              <Preview item={item} />\n            </span>\n            <div className={s.body()}>\n              <p className={s.name()}>{item.name}</p>\n              {item.status !== \"done\" && item.status !== \"error\" ? (\n                <Progress size=\"sm\" label={item.name} value={item.status === \"queued\" ? null : Math.round(item.progress * 100)} />\n              ) : null}\n              <p className={s.meta()}>\n                <span>{labels.status(item.status)}</span>\n                <span>{item.status === \"done\" ? formatBytes(item.size, locale) : `${formatBytes(item.progress * item.size, locale)} / ${formatBytes(item.size, locale)}`}</span>\n                {item.status === \"uploading\" && item.speed ? <span>{formatBytes(item.speed, locale)}/s</span> : null}\n                {left !== null ? <span>{labels.remaining(left)}</span> : null}\n              </p>\n              {item.status === \"error\" && item.error ? (\n                <p role=\"alert\" className={s.error()}>\n                  {item.error}\n                </p>\n              ) : null}\n            </div>\n            <div className={s.actions()}>\n              {item.status === \"uploading\" && onPause && action(labels.pause(item.name), () => onPause(item.id), <PauseGlyph className=\"h-4 w-4\" />)}\n              {item.status === \"paused\" && onResume && action(labels.resume(item.name), () => onResume(item.id), <PlayGlyph className=\"h-4 w-4\" />)}\n              {item.status === \"error\" && onRetry && action(labels.retry(item.name), () => onRetry(item.id), <RetryGlyph className=\"h-4 w-4\" />)}\n              {(item.status === \"done\" || item.status === \"error\") && onRemove\n                ? action(labels.remove(item.name), () => onRemove(item.id), <CloseGlyph className=\"h-4 w-4\" />)\n                : item.status !== \"done\" && onCancel\n                  ? action(labels.cancel(item.name), () => onCancel(item.id), <CloseGlyph className=\"h-4 w-4\" />)\n                  : null}\n            </div>\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n\nexport type UploadContext = {\n  /** Aborted on pause and cancel: stop sending (`tusUpload.abort()`, `xhr.abort()`). */\n  signal: AbortSignal;\n  /** Report the bytes sent so far. */\n  onProgress: (sent: number) => void;\n  /** `true` when this call resumes a paused or failed upload (a Tus client then continues from its offset). */\n  resumed: boolean;\n};\n\nexport type UploadQueueOptions = {\n  /** Sends one file; resolves when it is done, rejects on failure (its `message` becomes the item's error). */\n  upload: (file: File, context: UploadContext) => Promise<void>;\n  /** How many files go at once. Default 2. */\n  concurrency?: number;\n  /** Makes an object URL for each file to preview (revoked when it leaves). Default `true`. */\n  previews?: boolean;\n};\n\ntype Entry = { item: UploadItem; file: File; controller: AbortController | null; started: boolean; last?: { at: number; sent: number } };\n\n/** The queue itself, outside React: entries, the pump that starts the next uploads, and the actions. */\nfunction createQueue(initial: UploadQueueOptions, emit: (items: UploadItem[]) => void) {\n  let current = initial;\n  const options = () => current;\n  const entries = new Map<string, Entry>();\n  const sync = () => emit([...entries.values()].map((e) => e.item));\n  const patch = (id: string, next: Partial<UploadItem>) => {\n    const entry = entries.get(id);\n    if (!entry) return;\n    entry.item = { ...entry.item, ...next };\n    sync();\n  };\n  const pump = () => {\n    const { upload, concurrency = 2 } = options();\n    const all = [...entries.values()];\n    let running = all.filter((e) => e.item.status === \"uploading\").length;\n    for (const entry of all) {\n      if (running >= concurrency) break;\n      if (entry.item.status !== \"queued\") continue;\n      running += 1;\n      const controller = new AbortController();\n      const resumed = entry.started;\n      entry.controller = controller;\n      entry.started = true;\n      entry.last = { at: Date.now(), sent: entry.item.progress * entry.item.size };\n      patch(entry.item.id, { status: \"uploading\", error: undefined });\n      upload(entry.file, {\n        signal: controller.signal,\n        resumed,\n        onProgress: (sent) => {\n          if (controller.signal.aborted) return;\n          const now = Date.now();\n          const last = entry.last ?? { at: now, sent };\n          const fresh = now - last.at > 400;\n          const speed = fresh ? ((sent - last.sent) / (now - last.at)) * 1000 : entry.item.speed;\n          if (fresh) entry.last = { at: now, sent };\n          patch(entry.item.id, { progress: entry.item.size ? Math.min(1, sent / entry.item.size) : 0, speed });\n        },\n      }).then(\n        () => {\n          if (controller.signal.aborted) return;\n          patch(entry.item.id, { status: \"done\", progress: 1, speed: undefined });\n          pump();\n        },\n        (error: unknown) => {\n          if (controller.signal.aborted) return;\n          patch(entry.item.id, { status: \"error\", error: error instanceof Error ? error.message : String(error), speed: undefined });\n          pump();\n        },\n      );\n    }\n  };\n  const release = (entry: Entry) => {\n    entry.controller?.abort();\n    if (entry.item.previewUrl) URL.revokeObjectURL(entry.item.previewUrl);\n  };\n  return {\n    configure(next: UploadQueueOptions) {\n      current = next;\n    },\n    add(files: readonly File[]) {\n      const { previews = true } = options();\n      for (const file of files) {\n        const id = `${file.name}-${file.size}-${Math.random().toString(36).slice(2, 8)}`;\n        const previewUrl = previews && typeof URL.createObjectURL === \"function\" ? URL.createObjectURL(file) : undefined;\n        entries.set(id, { file, controller: null, started: false, item: { id, name: file.name, size: file.size, type: file.type, progress: 0, status: \"queued\", previewUrl } });\n      }\n      sync();\n      pump();\n    },\n    pause(id: string) {\n      entries.get(id)?.controller?.abort();\n      patch(id, { status: \"paused\", speed: undefined });\n      pump();\n    },\n    resume(id: string) {\n      patch(id, { status: \"queued\" });\n      pump();\n    },\n    remove(id: string) {\n      const entry = entries.get(id);\n      if (!entry) return;\n      release(entry);\n      entries.delete(id);\n      sync();\n      pump();\n    },\n    dispose() {\n      for (const entry of entries.values()) release(entry);\n    },\n  };\n}\n\n/** The state of an upload queue around the app's `upload` function: `add`, `pause`, `resume`, `retry`, `cancel`, `remove`. */\nexport function useUploadQueue(options: UploadQueueOptions) {\n  const [items, setItems] = React.useState<UploadItem[]>([]);\n  const [queue] = React.useState(() => createQueue(options, setItems));\n  React.useLayoutEffect(() => queue.configure(options));\n  React.useEffect(() => () => queue.dispose(), [queue]);\n  return { items, add: queue.add, pause: queue.pause, resume: queue.resume, retry: queue.resume, cancel: queue.remove, remove: queue.remove };\n}\n"
+    },
+    {
+      "path": "file-upload/index.ts",
+      "content": "/** @krizaka/ui/file-upload — `Dropzone`, `UploadList`, `useUploadQueue` (pause / resume through an AbortSignal: Tus-ready without depending on it), `acceptsFile`, `formatBytes`, `fileUpload` (the slots). Client (\"use client\"). */\nexport {\n  acceptsFile,\n  Dropzone,\n  type DropzoneProps,\n  type FileRejection,\n  fileUpload,\n  formatBytes,\n  type UploadContext,\n  type UploadItem,\n  UploadList,\n  type UploadListLabels,\n  uploadListLabels,\n  type UploadListProps,\n  type UploadQueueOptions,\n  type UploadStatus,\n  useUploadQueue,\n} from \"./file-upload\";\n"
+    },
+    {
+      "path": "file-upload/meta.ts",
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"File upload\",\n  summary: \"A drop zone that checks type, size and count, a list of uploads with preview, progress, speed and the actions each state allows, and a queue that pauses and resumes — Tus-ready without depending on it.\",\n  status: \"beta\",\n  category: \"media\",\n  platforms: \"web\",\n  whenToUse: [\n    \"To send files: a video to publish, documents to index, pictures for a gallery.\",\n    \"With `useUploadQueue` for large files that must survive a pause, a failure or a slow network (Tus, multipart).\",\n  ],\n  whenNotToUse: [\n    { when: \"To take a picture or a clip with the camera in the page: media capture.\", use: \"media-capture\" },\n    { when: \"To choose a picture's frame before sending it: the cropper, then the upload.\", use: \"image-cropper\" },\n  ],\n  bestPractices: [\n    \"Say what is accepted in `hint` (“MP4 or MOV, up to 4 GB”) and enforce it with `accept` and `maxSize`.\",\n    \"Explain each refusal with `refusalLabel` (“clip.avi is not a supported format”).\",\n    \"Wrap your upload client in `upload(file, { signal, onProgress, resumed })`: abort on `signal`, resume from the offset when `resumed`.\",\n    \"Revoke previews you create yourself; `useUploadQueue` revokes its own.\",\n  ],\n  accessibility: {\n    keyboard: [{ keys: \"Enter / Space\", action: \"On the button: open the file picker (dropping is never the only way).\" }],\n    notes: [\n      \"The zone's button is described by the title and the hint; the file input itself stays out of the tab order.\",\n      \"Each upload's progress is a `progressbar` named by the file; a failure is announced (`role=\\\"alert\\\"`).\",\n      \"Every action is a button named with the file (“Pause clip.mp4”).\",\n    ],\n  },\n  related: [\"progress\", \"media-capture\", \"image-cropper\", \"video-trimmer\"],\n  web: {\n    imports: [\"Dropzone\", \"UploadList\", \"useUploadQueue\", \"acceptsFile\", \"formatBytes\"],\n    examples: [\n      { name: \"video\", title: \"Publish a video\", description: \"The zone and the queue together: drop, watch the progress, pause and resume.\" },\n      { name: \"states\", title: \"Every state\", description: \"`UploadList` with an upload under way, a paused one, a failed one and a finished one.\" },\n      { name: \"images\", title: \"Several pictures\", description: \"Up to six images of 10 MB; the refused ones are listed with their reason.\" },\n      { name: \"tus\", title: \"Tus, resumable\", description: \"`useUploadQueue` around a resumable client: abort on pause, continue from the offset on resume.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+    },
+    {
+      "path": "glyphs.tsx",
+      "content": "// The small line glyphs the data and media primitives draw (play, volume, search, chevrons…): decorative, 24-unit\n// box, `currentColor`, sized by the caller's class. Shared by the entries that need them; never exported on its own —\n// a product draws its own icons with @krizaka/icons.\nimport type * as React from \"react\";\n\ntype GlyphProps = { className?: string };\n\nfunction Glyph({ className = \"h-4 w-4\", fill, children }: GlyphProps & { fill?: boolean; children: React.ReactNode }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      className={className}\n      fill={fill ? \"currentColor\" : \"none\"}\n      stroke={fill ? \"none\" : \"currentColor\"}\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n      focusable=\"false\"\n    >\n      {children}\n    </svg>\n  );\n}\n\nexport const PlayGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <path d=\"M8 5.5v13a1 1 0 0 0 1.5.86l10.4-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z\" />\n  </Glyph>\n);\nexport const PauseGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n    <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n  </Glyph>\n);\nexport const VolumeGlyph = ({ muted, ...p }: GlyphProps & { muted?: boolean }) => (\n  <Glyph {...p}>\n    <path d=\"M11 5 6 9H3v6h3l5 4V5Z\" />\n    {muted ? <path d=\"m22 9-6 6m0-6 6 6\" /> : <path d=\"M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13\" />}\n  </Glyph>\n);\nexport const FullscreenGlyph = ({ exit, ...p }: GlyphProps & { exit?: boolean }) => (\n  <Glyph {...p}>\n    {exit ? <path d=\"M9 4v5H4m11-5v5h5M9 20v-5H4m11 5v-5h5\" /> : <path d=\"M4 9V4h5m6 0h5v5M4 15v5h5m11-5v5h-5\" />}\n  </Glyph>\n);\nexport const CaptionsGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <path d=\"M10 10.5a2 2 0 1 0 0 3M17 10.5a2 2 0 1 0 0 3\" />\n  </Glyph>\n);\nexport const PipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <rect x=\"12\" y=\"12\" width=\"6\" height=\"4\" rx=\"1\" />\n  </Glyph>\n);\nexport const SearchGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <circle cx=\"11\" cy=\"11\" r=\"7\" />\n    <path d=\"m20 20-3.5-3.5\" />\n  </Glyph>\n);\nexport const CloseGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M18 6 6 18M6 6l12 12\" />\n  </Glyph>\n);\nexport const ChevronGlyph = ({ direction = \"down\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" | \"up\" | \"down\" }) => (\n  <Glyph {...p}>\n    <path d={{ left: \"m15 6-6 6 6 6\", right: \"m9 6 6 6-6 6\", up: \"m6 15 6-6 6 6\", down: \"m6 9 6 6 6-6\" }[direction]} />\n  </Glyph>\n);\nexport const CheckGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M20 6 9 17l-5-5\" />\n  </Glyph>\n);\nexport const PlusGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 5v14M5 12h14\" />\n  </Glyph>\n);\nexport const CalendarGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\" />\n    <path d=\"M3 10h18M8 3v4M16 3v4\" />\n  </Glyph>\n);\nexport const UploadGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 16V4m0 0L7 9m5-5 5 5\" />\n    <path d=\"M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\" />\n  </Glyph>\n);\nexport const FileGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z\" />\n    <path d=\"M14 3v5h5\" />\n  </Glyph>\n);\nexport const CameraGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z\" />\n    <circle cx=\"12\" cy=\"13.5\" r=\"3.5\" />\n  </Glyph>\n);\nexport const FlipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 0 1 14-5.3M20 12a8 8 0 0 1-14 5.3\" />\n    <path d=\"M18 3v4h-4M6 21v-4h4\" />\n  </Glyph>\n);\nexport const RetryGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 1 0 2.3-5.7L4 8.5\" />\n    <path d=\"M4 4v4.5h4.5\" />\n  </Glyph>\n);\nexport const SortGlyph = ({ direction, ...p }: GlyphProps & { direction?: \"ascending\" | \"descending\" }) => (\n  <Glyph {...p}>\n    {direction === \"ascending\" ? <path d=\"m7 14 5-5 5 5\" /> : direction === \"descending\" ? <path d=\"m7 10 5 5 5-5\" /> : <path d=\"m8 9 4-4 4 4M8 15l4 4 4-4\" />}\n  </Glyph>\n);\n"
+    },
+    {
+      "path": "meta.ts",
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"alert\"\n  | \"audio-player\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"cn\"\n  | \"combobox\"\n  | \"command\"\n  | \"confirm-button\"\n  | \"countdown\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"dialog\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"glow-card\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"loader\"\n  | \"marquee\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page-header\"\n  | \"pagination\"\n  | \"popover\"\n  | \"progress\"\n  | \"radio-group\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"stat\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"theme\"\n  | \"toast\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/** The group of the catalogue. `media`: video, sound, camera, files, cropping. */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+    }
+  ],
+  "dependencies": [
+    "@krizaka/intl@^0.1.0",
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [
+    "progress"
+  ],
+  "demo": {
+    "path": "examples/file-upload/video.tsx",
+    "content": "\"use client\";\n\nimport { Dropzone, UploadList, useUploadQueue } from \"@krizaka/ui/file-upload\";\n\n// A stand-in for your client (Tus, multipart…): it reports progress and stops when the signal aborts.\nfunction fakeUpload(file: File, { signal, onProgress }: { signal: AbortSignal; onProgress: (sent: number) => void }) {\n  return new Promise<void>((resolve) => {\n    let sent = 0;\n    const timer = setInterval(() => {\n      sent = Math.min(file.size, sent + file.size / 40);\n      onProgress(sent);\n      if (sent < file.size) return;\n      clearInterval(timer);\n      resolve();\n    }, 150);\n    signal.addEventListener(\"abort\", () => clearInterval(timer));\n  });\n}\n\nexport default function FileUploadVideo() {\n  const queue = useUploadQueue({ upload: fakeUpload });\n  return (\n    <div className=\"flex w-full max-w-lg flex-col gap-3\">\n      <Dropzone\n        title=\"Drop your video here\"\n        browseLabel=\"Choose a video\"\n        hint=\"MP4, MOV or WebM, up to 4 GB\"\n        accept=\"video/*\"\n        maxSize={4 * 1024 ** 3}\n        onFiles={queue.add}\n        refusalLabel={(r) => `${r.file.name}: ${r.reason === \"size\" ? \"larger than 4 GB\" : \"not a video\"}`}\n      />\n      {queue.items.length > 0 && <UploadList items={queue.items} onPause={queue.pause} onResume={queue.resume} onCancel={queue.cancel} onRemove={queue.remove} onRetry={queue.retry} />}\n    </div>\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "Dropzone",
+      "description": "A zone to drop files on, with a button that opens the picker: checks type, size and count.",
+      "props": [
+        {
+          "name": "browseLabel",
+          "type": "string",
+          "default": null,
+          "description": "The button that opens the file picker (\"Choose a file\"), passed translated.",
+          "required": true
+        },
+        {
+          "name": "onFiles",
+          "type": "(files: File[]) => void",
+          "default": null,
+          "description": "Called with the files accepted (never empty).",
+          "required": true
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "default": null,
+          "description": "The title in the zone (\"Drop your video here\"), passed translated.",
+          "required": true
+        },
+        {
+          "name": "accept",
+          "type": "string",
+          "default": null,
+          "description": "The types accepted, as the `accept` attribute (`\"video/*\"`, `\"image/png,.pdf\"`).",
+          "required": false
+        },
+        {
+          "name": "capture",
+          "type": "\"user\" | \"environment\"",
+          "default": null,
+          "description": "On a phone, opens the camera directly (`\"environment\"` the back one, `\"user\"` the front one).",
+          "required": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged on the zone.",
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": null,
+          "description": "Not available (an upload is running).",
+          "required": false
+        },
+        {
+          "name": "hint",
+          "type": "string",
+          "default": null,
+          "description": "What is accepted, in words (\"MP4 or MOV, up to 4 GB\").",
+          "required": false
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "default": null,
+          "description": "An icon instead of the upload glyph.",
+          "required": false
+        },
+        {
+          "name": "maxFiles",
+          "type": "number",
+          "default": null,
+          "description": "The most files at once (1 unless `multiple`).",
+          "required": false
+        },
+        {
+          "name": "maxSize",
+          "type": "number",
+          "default": null,
+          "description": "The largest file, in bytes.",
+          "required": false
+        },
+        {
+          "name": "multiple",
+          "type": "boolean",
+          "default": null,
+          "description": "Several files at once.",
+          "required": false
+        },
+        {
+          "name": "onReject",
+          "type": "((rejections: FileRejection[]) => void)",
+          "default": null,
+          "description": "Called with the files refused and why (show `refusalLabel`'s words, or your own).",
+          "required": false
+        },
+        {
+          "name": "refusalLabel",
+          "type": "((rejection: FileRejection) => string)",
+          "default": null,
+          "description": "The words of a refusal, shown in the zone: `(r) => r.file.name + \" is too large\"`. Without it, nothing is shown.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "UploadList",
+      "description": "The files being sent: preview, size, progress, speed and time left, and the actions each state allows.",
+      "props": [
+        {
+          "name": "items",
+          "type": "readonly UploadItem[]",
+          "default": null,
+          "description": "The uploads, as `useUploadQueue` gives them (or your own state).",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged on the list.",
+          "required": false
+        },
+        {
+          "name": "labels",
+          "type": "Partial<UploadListLabels>",
+          "default": null,
+          "description": "The words, passed translated; English by default.",
+          "required": false
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "default": "en",
+          "description": "The locale of sizes and speeds. Default `\"en\"`.",
+          "required": false
+        },
+        {
+          "name": "onCancel",
+          "type": "((id: string) => void)",
+          "default": null,
+          "description": "Stops an upload under way and drops it.",
+          "required": false
+        },
+        {
+          "name": "onPause",
+          "type": "((id: string) => void)",
+          "default": null,
+          "description": "Pauses an upload (shown while it uploads, when given).",
+          "required": false
+        },
+        {
+          "name": "onRemove",
+          "type": "((id: string) => void)",
+          "default": null,
+          "description": "Drops a finished or failed one from the list.",
+          "required": false
+        },
+        {
+          "name": "onResume",
+          "type": "((id: string) => void)",
+          "default": null,
+          "description": "Resumes a paused one.",
+          "required": false
+        },
+        {
+          "name": "onRetry",
+          "type": "((id: string) => void)",
+          "default": null,
+          "description": "Tries a failed one again.",
+          "required": false
+        }
+      ]
+    }
+  ]
+}