@krizaka/ui 2.3.0 → 2.4.0

package/dist/file-upload.d.ts

@@ -0,0 +1,238 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const fileUpload: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            error?: tailwind_variants.ClassValue;
+            body?: tailwind_variants.ClassValue;
+            meta?: tailwind_variants.ClassValue;
+            list?: tailwind_variants.ClassValue;
+            zoneIcon?: tailwind_variants.ClassValue;
+            zoneTitle?: tailwind_variants.ClassValue;
+            zoneHint?: tailwind_variants.ClassValue;
+            refusals?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            preview?: tailwind_variants.ClassValue;
+            name?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+            zone?: tailwind_variants.ClassValue;
+            browse?: tailwind_variants.ClassValue;
+            action?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            error?: tailwind_variants.ClassValue;
+            body?: tailwind_variants.ClassValue;
+            meta?: tailwind_variants.ClassValue;
+            list?: tailwind_variants.ClassValue;
+            zoneIcon?: tailwind_variants.ClassValue;
+            zoneTitle?: tailwind_variants.ClassValue;
+            zoneHint?: tailwind_variants.ClassValue;
+            refusals?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            preview?: tailwind_variants.ClassValue;
+            name?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+            zone?: tailwind_variants.ClassValue;
+            browse?: tailwind_variants.ClassValue;
+            action?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    zone: string;
+    zoneIcon: string;
+    zoneTitle: string;
+    zoneHint: string;
+    browse: string;
+    refusals: string;
+    list: string;
+    item: string;
+    preview: string;
+    body: string;
+    name: string;
+    meta: string;
+    error: string;
+    actions: string;
+    action: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            error?: tailwind_variants.ClassValue;
+            body?: tailwind_variants.ClassValue;
+            meta?: tailwind_variants.ClassValue;
+            list?: tailwind_variants.ClassValue;
+            zoneIcon?: tailwind_variants.ClassValue;
+            zoneTitle?: tailwind_variants.ClassValue;
+            zoneHint?: tailwind_variants.ClassValue;
+            refusals?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            preview?: tailwind_variants.ClassValue;
+            name?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+            zone?: tailwind_variants.ClassValue;
+            browse?: tailwind_variants.ClassValue;
+            action?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    zone: string;
+    zoneIcon: string;
+    zoneTitle: string;
+    zoneHint: string;
+    browse: string;
+    refusals: string;
+    list: string;
+    item: string;
+    preview: string;
+    body: string;
+    name: string;
+    meta: string;
+    error: string;
+    actions: string;
+    action: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    zone: string;
+    zoneIcon: string;
+    zoneTitle: string;
+    zoneHint: string;
+    browse: string;
+    refusals: string;
+    list: string;
+    item: string;
+    preview: string;
+    body: string;
+    name: string;
+    meta: string;
+    error: string;
+    actions: string;
+    action: string;
+}>>;
+/** Why a file was refused. */
+type FileRejection = {
+    file: File;
+    reason: "type" | "size" | "count";
+};
+/** Whether a file matches an `accept` list (`"video/*,.mov,image/png"`). */
+declare function acceptsFile(file: File, accept?: string): boolean;
+/** A size in the locale's words (`"1.4 GB"`, `"820 kB"`), through `@krizaka/intl`. */
+declare function formatBytes(bytes: number, locale?: string): string;
+type DropzoneProps = {
+    /** The title in the zone ("Drop your video here"), passed translated. */
+    title: string;
+    /** The button that opens the file picker ("Choose a file"), passed translated. */
+    browseLabel: string;
+    /** What is accepted, in words ("MP4 or MOV, up to 4 GB"). */
+    hint?: string;
+    /** The types accepted, as the `accept` attribute (`"video/*"`, `"image/png,.pdf"`). */
+    accept?: string;
+    /** The largest file, in bytes. */
+    maxSize?: number;
+    /** The most files at once (1 unless `multiple`). */
+    maxFiles?: number;
+    /** Several files at once. */
+    multiple?: boolean;
+    /** Not available (an upload is running). */
+    disabled?: boolean;
+    /** On a phone, opens the camera directly (`"environment"` the back one, `"user"` the front one). */
+    capture?: "user" | "environment";
+    /** Called with the files accepted (never empty). */
+    onFiles: (files: File[]) => void;
+    /** Called with the files refused and why (show `refusalLabel`'s words, or your own). */
+    onReject?: (rejections: FileRejection[]) => void;
+    /** The words of a refusal, shown in the zone: `(r) => r.file.name + " is too large"`. Without it, nothing is shown. */
+    refusalLabel?: (rejection: FileRejection) => string;
+    /** An icon instead of the upload glyph. */
+    icon?: React.ReactNode;
+    /** Classes merged on the zone. */
+    className?: string;
+};
+/** A zone to drop files on, with a button that opens the picker: checks type, size and count. */
+declare function Dropzone({ title, browseLabel, hint, accept, maxSize, maxFiles, multiple, disabled, capture, onFiles, onReject, refusalLabel, icon, className, }: DropzoneProps): React.JSX.Element;
+type UploadStatus = "queued" | "uploading" | "paused" | "done" | "error";
+type UploadItem = {
+    /** A stable id. */
+    id: string;
+    /** The file's name. */
+    name: string;
+    /** Its size, in bytes. */
+    size: number;
+    /** Its MIME type (`video/mp4`): picks the preview. */
+    type?: string;
+    /** Sent so far, between 0 and 1. */
+    progress: number;
+    /** Where it stands. */
+    status: UploadStatus;
+    /** Why it failed, passed translated. */
+    error?: string;
+    /** A preview (an object URL of the file, a thumbnail from the server). */
+    previewUrl?: string;
+    /** Bytes per second, for the speed and the time left. */
+    speed?: number;
+};
+type UploadListLabels = {
+    /** The list's accessible name ("Uploads"). */
+    list: string;
+    pause: (name: string) => string;
+    resume: (name: string) => string;
+    retry: (name: string) => string;
+    cancel: (name: string) => string;
+    remove: (name: string) => string;
+    /** A state in words: `(status) => "Paused"`… */
+    status: (status: UploadStatus) => string;
+    /** The time left: `(seconds) => "2 min left"`. */
+    remaining: (seconds: number) => string;
+};
+declare const uploadListLabels: UploadListLabels;
+type UploadListProps = {
+    /** The uploads, as `useUploadQueue` gives them (or your own state). */
+    items: readonly UploadItem[];
+    /** Pauses an upload (shown while it uploads, when given). */
+    onPause?: (id: string) => void;
+    /** Resumes a paused one. */
+    onResume?: (id: string) => void;
+    /** Tries a failed one again. */
+    onRetry?: (id: string) => void;
+    /** Stops an upload under way and drops it. */
+    onCancel?: (id: string) => void;
+    /** Drops a finished or failed one from the list. */
+    onRemove?: (id: string) => void;
+    /** The locale of sizes and speeds. Default `"en"`. */
+    locale?: string;
+    /** The words, passed translated; English by default. */
+    labels?: Partial<UploadListLabels>;
+    /** Classes merged on the list. */
+    className?: string;
+};
+/** The files being sent: preview, size, progress, speed and time left, and the actions each state allows. */
+declare function UploadList({ items, onPause, onResume, onRetry, onCancel, onRemove, locale, labels: given, className }: UploadListProps): React.JSX.Element;
+type UploadContext = {
+    /** Aborted on pause and cancel: stop sending (`tusUpload.abort()`, `xhr.abort()`). */
+    signal: AbortSignal;
+    /** Report the bytes sent so far. */
+    onProgress: (sent: number) => void;
+    /** `true` when this call resumes a paused or failed upload (a Tus client then continues from its offset). */
+    resumed: boolean;
+};
+type UploadQueueOptions = {
+    /** Sends one file; resolves when it is done, rejects on failure (its `message` becomes the item's error). */
+    upload: (file: File, context: UploadContext) => Promise<void>;
+    /** How many files go at once. Default 2. */
+    concurrency?: number;
+    /** Makes an object URL for each file to preview (revoked when it leaves). Default `true`. */
+    previews?: boolean;
+};
+/** The state of an upload queue around the app's `upload` function: `add`, `pause`, `resume`, `retry`, `cancel`, `remove`. */
+declare function useUploadQueue(options: UploadQueueOptions): {
+    items: UploadItem[];
+    add: (files: readonly File[]) => void;
+    pause: (id: string) => void;
+    resume: (id: string) => void;
+    retry: (id: string) => void;
+    cancel: (id: string) => void;
+    remove: (id: string) => void;
+};
+
+export { Dropzone, type DropzoneProps, type FileRejection, type UploadContext, type UploadItem, UploadList, type UploadListLabels, type UploadListProps, type UploadQueueOptions, type UploadStatus, acceptsFile, fileUpload, formatBytes, uploadListLabels, useUploadQueue };

package/dist/file-upload.js

@@ -0,0 +1,437 @@
+"use client";
+import {
+  CloseGlyph,
+  FileGlyph,
+  PauseGlyph,
+  PlayGlyph,
+  RetryGlyph,
+  UploadGlyph
+} from "./chunk-YX6CNVJA.js";
+
+// src/file-upload/file-upload.tsx
+import { getNumberFormat } from "@krizaka/intl";
+import * as React2 from "react";
+import { tv as tv2 } from "tailwind-variants";
+
+// src/progress/progress.tsx
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var progress = tv({
+  slots: {
+    root: "relative",
+    track: "",
+    indicator: "",
+    center: "absolute inset-0 flex flex-col items-center justify-center text-center",
+    buffer: "absolute inset-y-0 left-0 -z-10 rounded-full bg-accent/25 transition-[width] duration-500 motion-reduce:transition-none",
+    frame: "flex w-full flex-col gap-1.5",
+    header: "flex items-baseline gap-2 text-xs",
+    caption: "min-w-0 flex-1 truncate font-medium text-fg",
+    figure: "shrink-0 tabular-nums text-fg-secondary"
+  },
+  variants: {
+    variant: {
+      bar: {
+        root: "relative isolate w-full overflow-hidden rounded-full bg-surface-3",
+        indicator: "kz-progress h-full rounded-full bg-linear-to-r from-accent to-accent-2 transition-[width] duration-500 motion-reduce:transition-none data-[state=indeterminate]:w-2/5"
+      },
+      ring: {
+        root: "inline-flex shrink-0 items-center justify-center",
+        track: "stroke-border-default",
+        indicator: "stroke-accent transition-[stroke-dashoffset] duration-1000 motion-reduce:transition-none data-[state=indeterminate]:origin-center data-[state=indeterminate]:animate-spin motion-reduce:data-[state=indeterminate]:animate-none"
+      }
+    },
+    size: { sm: {}, md: {}, lg: {} },
+    status: {
+      active: {},
+      // Paused: the fill rests, striped — the task is waiting for someone, not broken.
+      paused: { indicator: "kz-progress-paused opacity-70" },
+      // Failed: the fill turns to the danger colour where it stopped.
+      error: { indicator: "from-danger to-danger stroke-danger" }
+    }
+  },
+  compoundVariants: [
+    { variant: "bar", size: "sm", class: { root: "h-1" } },
+    { variant: "bar", size: "md", class: { root: "h-2" } },
+    { variant: "bar", size: "lg", class: { root: "h-3" } },
+    { variant: "ring", size: "sm", class: { root: "h-10 w-10" } },
+    { variant: "ring", size: "md", class: { root: "h-20 w-20" } },
+    { variant: "ring", size: "lg", class: { root: "h-36 w-36" } }
+  ],
+  defaultVariants: { variant: "bar", size: "md", status: "active" }
+});
+var STROKE = { sm: 12, md: 9, lg: 7 };
+function Progress({
+  variant = "bar",
+  size = "md",
+  value,
+  max = 100,
+  label,
+  valueText,
+  className,
+  children,
+  buffer,
+  segments,
+  status = "active",
+  showLabel,
+  eta,
+  ...props
+}) {
+  const s = progress({ variant, size, status });
+  const maskId = `kz-seg-${React.useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const known = typeof value === "number" && Number.isFinite(value);
+  const ratio = known ? Math.min(1, Math.max(0, value / (max || 1))) : 0;
+  const percent = Math.round(ratio * 100);
+  const state = !known ? "indeterminate" : ratio >= 1 ? "complete" : "loading";
+  const aria = {
+    role: "progressbar",
+    "aria-label": label,
+    "aria-valuemin": known ? 0 : void 0,
+    "aria-valuemax": known ? max : void 0,
+    "aria-valuenow": known ? Math.min(max, Math.max(0, value)) : void 0,
+    "aria-valuetext": [known ? valueText ?? `${percent}%` : valueText, eta].filter(Boolean).join(", ") || void 0,
+    "data-state": state,
+    "data-status": status === "active" ? void 0 : status,
+    "data-value": known ? value : void 0,
+    "data-variant": variant
+  };
+  if (variant === "ring") {
+    const stroke = STROKE[size];
+    const r = 50 - stroke / 2;
+    return /* @__PURE__ */ jsxs("div", { ...aria, className: s.root({ className }), ...props, children: [
+      /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", "aria-hidden": true, children: [
+        segments && segments > 1 && /* @__PURE__ */ jsx("mask", { id: maskId, children: /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r, fill: "none", stroke: "white", strokeWidth: stroke + 2, pathLength: 100, strokeDasharray: `${100 / segments - 2} 2` }) }),
+        /* @__PURE__ */ jsxs("g", { mask: segments && segments > 1 ? `url(#${maskId})` : void 0, children: [
+          /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r, fill: "none", strokeWidth: stroke, className: s.track() }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "50",
+              cy: "50",
+              r,
+              fill: "none",
+              strokeWidth: stroke,
+              strokeLinecap: "round",
+              pathLength: 100,
+              strokeDasharray: 100,
+              strokeDashoffset: known ? 100 - percent : 75,
+              "data-state": state,
+              className: s.indicator()
+            }
+          )
+        ] })
+      ] }),
+      children !== void 0 && /* @__PURE__ */ jsx("div", { className: s.center(), children })
+    ] });
+  }
+  const segmented = segments && segments > 1 ? { "--kz-segments": segments } : void 0;
+  const bufferRatio = typeof buffer === "number" && Number.isFinite(buffer) ? Math.min(1, Math.max(0, buffer / (max || 1))) : null;
+  const bar = /* @__PURE__ */ jsxs("div", { ...aria, className: s.root({ className: [segmented && "kz-progress-segmented", className].filter(Boolean).join(" ") || void 0 }), style: segmented, ...props, children: [
+    /* @__PURE__ */ jsx("div", { "data-state": state, className: s.indicator(), style: known ? { width: `${ratio * 100}%` } : void 0 }),
+    bufferRatio !== null && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: s.buffer(), style: { width: `${bufferRatio * 100}%` } })
+  ] });
+  if (!showLabel) return bar;
+  const figure = [known ? valueText ?? `${percent} %` : valueText, eta].filter(Boolean).join(" \xB7 ");
+  return /* @__PURE__ */ jsxs("div", { className: s.frame(), children: [
+    /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: s.header(), children: [
+      /* @__PURE__ */ jsx("span", { className: s.caption(), children: label }),
+      figure && /* @__PURE__ */ jsx("span", { className: s.figure(), children: figure })
+    ] }),
+    bar
+  ] });
+}
+
+// src/file-upload/file-upload.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var fileUpload = tv2({
+  slots: {
+    zone: "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 transition-colors data-[dragging]:border-accent data-[dragging]:bg-accent-soft data-[disabled]:opacity-50 has-[:focus-visible]:border-accent",
+    zoneIcon: "flex h-12 w-12 items-center justify-center rounded-full bg-surface-3 text-fg-secondary",
+    zoneTitle: "text-sm font-semibold text-fg",
+    zoneHint: "text-xs text-fg-secondary",
+    browse: "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 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",
+    refusals: "w-full text-left text-xs font-medium text-fg-danger",
+    list: "flex w-full flex-col gap-2",
+    item: "flex items-center gap-3 rounded-xl border border-border-default bg-surface-1 p-3 data-[status=error]:border-danger/60",
+    preview: "flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-surface-3 text-fg-secondary",
+    body: "flex min-w-0 flex-1 flex-col gap-1.5",
+    name: "truncate text-sm font-semibold text-fg",
+    meta: "flex flex-wrap gap-x-2 text-xs tabular-nums text-fg-secondary",
+    error: "text-xs font-medium text-fg-danger",
+    actions: "flex shrink-0 items-center gap-1",
+    action: "inline-flex h-8 w-8 items-center justify-center rounded-md text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
+  }
+});
+function acceptsFile(file, accept) {
+  if (!accept) return true;
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return accept.split(",").map((rule) => rule.trim().toLowerCase()).filter(Boolean).some((rule) => rule.startsWith(".") ? name.endsWith(rule) : rule.endsWith("/*") ? type.startsWith(rule.slice(0, -1)) : type === rule);
+}
+function formatBytes(bytes, locale = "en") {
+  const units = ["byte", "kilobyte", "megabyte", "gigabyte", "terabyte"];
+  let value = Math.max(0, bytes);
+  let unit = 0;
+  while (value >= 1e3 && unit < units.length - 1) {
+    value /= 1e3;
+    unit += 1;
+  }
+  return getNumberFormat(locale, { style: "unit", unit: units[unit], unitDisplay: "short", maximumFractionDigits: value < 10 && unit > 0 ? 1 : 0 }).format(value);
+}
+function Dropzone({
+  title,
+  browseLabel,
+  hint,
+  accept,
+  maxSize,
+  maxFiles,
+  multiple,
+  disabled,
+  capture,
+  onFiles,
+  onReject,
+  refusalLabel,
+  icon,
+  className
+}) {
+  const s = fileUpload();
+  const input = React2.useRef(null);
+  const [dragging, setDragging] = React2.useState(false);
+  const [refused, setRefused] = React2.useState([]);
+  const depth = React2.useRef(0);
+  const id = React2.useId();
+  const limit = maxFiles ?? (multiple ? Infinity : 1);
+  const take = (list) => {
+    const files = [...list];
+    const accepted = [];
+    const rejections = [];
+    for (const file of files) {
+      if (!acceptsFile(file, accept)) rejections.push({ file, reason: "type" });
+      else if (maxSize !== void 0 && file.size > maxSize) rejections.push({ file, reason: "size" });
+      else if (accepted.length >= limit) rejections.push({ file, reason: "count" });
+      else accepted.push(file);
+    }
+    setRefused(rejections);
+    if (accepted.length) onFiles(accepted);
+    if (rejections.length) onReject?.(rejections);
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: s.zone({ className }),
+      "data-dragging": dragging ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      onDragEnter: (event) => {
+        if (disabled) return;
+        event.preventDefault();
+        depth.current += 1;
+        setDragging(true);
+      },
+      onDragOver: (event) => {
+        if (disabled) return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "copy";
+      },
+      onDragLeave: () => {
+        depth.current = Math.max(0, depth.current - 1);
+        if (depth.current === 0) setDragging(false);
+      },
+      onDrop: (event) => {
+        if (disabled) return;
+        event.preventDefault();
+        depth.current = 0;
+        setDragging(false);
+        take(event.dataTransfer.files);
+      },
+      children: [
+        /* @__PURE__ */ jsx2("span", { className: s.zoneIcon(), "aria-hidden": true, children: icon ?? /* @__PURE__ */ jsx2(UploadGlyph, { className: "h-6 w-6" }) }),
+        /* @__PURE__ */ jsx2("p", { id: `${id}-title`, className: s.zoneTitle(), children: title }),
+        hint ? /* @__PURE__ */ jsx2("p", { id: `${id}-hint`, className: s.zoneHint(), children: hint }) : null,
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: s.browse(),
+            disabled,
+            "aria-describedby": [`${id}-title`, hint ? `${id}-hint` : null].filter(Boolean).join(" "),
+            onClick: () => input.current?.click(),
+            children: browseLabel
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            ref: input,
+            type: "file",
+            tabIndex: -1,
+            "aria-hidden": true,
+            className: "sr-only",
+            accept,
+            multiple,
+            capture,
+            disabled,
+            onChange: (event) => {
+              if (event.target.files?.length) take(event.target.files);
+              event.target.value = "";
+            }
+          }
+        ),
+        refusalLabel && refused.length > 0 ? /* @__PURE__ */ jsx2("ul", { role: "alert", className: s.refusals(), children: refused.map((r) => /* @__PURE__ */ jsx2("li", { children: refusalLabel(r) }, `${r.file.name}-${r.reason}`)) }) : null
+      ]
+    }
+  );
+}
+var uploadListLabels = {
+  list: "Uploads",
+  pause: (name) => `Pause ${name}`,
+  resume: (name) => `Resume ${name}`,
+  retry: (name) => `Retry ${name}`,
+  cancel: (name) => `Cancel ${name}`,
+  remove: (name) => `Remove ${name}`,
+  status: (status) => ({ queued: "Waiting", uploading: "Uploading", paused: "Paused", done: "Uploaded", error: "Failed" })[status],
+  remaining: (seconds) => seconds < 60 ? `${Math.ceil(seconds)} s left` : `${Math.ceil(seconds / 60)} min left`
+};
+function Preview({ item }) {
+  if (item.previewUrl && item.type?.startsWith("image/")) return /* @__PURE__ */ jsx2("img", { src: item.previewUrl, alt: "", className: "h-full w-full object-cover" });
+  if (item.previewUrl && item.type?.startsWith("video/")) return /* @__PURE__ */ jsx2("video", { src: item.previewUrl, muted: true, playsInline: true, preload: "metadata", className: "h-full w-full object-cover", "aria-hidden": true });
+  return /* @__PURE__ */ jsx2(FileGlyph, { className: "h-5 w-5" });
+}
+function UploadList({ items, onPause, onResume, onRetry, onCancel, onRemove, locale = "en", labels: given, className }) {
+  const labels = { ...uploadListLabels, ...given };
+  const s = fileUpload();
+  const action = (label, run, glyph) => /* @__PURE__ */ jsx2("button", { type: "button", className: s.action(), "aria-label": label, title: label, onClick: run, children: glyph });
+  return /* @__PURE__ */ jsx2("ul", { "aria-label": labels.list, className: s.list({ className }), children: items.map((item) => {
+    const left = item.status === "uploading" && item.speed ? (1 - item.progress) * item.size / item.speed : null;
+    return /* @__PURE__ */ jsxs2("li", { className: s.item(), "data-status": item.status, children: [
+      /* @__PURE__ */ jsx2("span", { className: s.preview(), children: /* @__PURE__ */ jsx2(Preview, { item }) }),
+      /* @__PURE__ */ jsxs2("div", { className: s.body(), children: [
+        /* @__PURE__ */ jsx2("p", { className: s.name(), children: item.name }),
+        item.status !== "done" && item.status !== "error" ? /* @__PURE__ */ jsx2(Progress, { size: "sm", label: item.name, value: item.status === "queued" ? null : Math.round(item.progress * 100) }) : null,
+        /* @__PURE__ */ jsxs2("p", { className: s.meta(), children: [
+          /* @__PURE__ */ jsx2("span", { children: labels.status(item.status) }),
+          /* @__PURE__ */ jsx2("span", { children: item.status === "done" ? formatBytes(item.size, locale) : `${formatBytes(item.progress * item.size, locale)} / ${formatBytes(item.size, locale)}` }),
+          item.status === "uploading" && item.speed ? /* @__PURE__ */ jsxs2("span", { children: [
+            formatBytes(item.speed, locale),
+            "/s"
+          ] }) : null,
+          left !== null ? /* @__PURE__ */ jsx2("span", { children: labels.remaining(left) }) : null
+        ] }),
+        item.status === "error" && item.error ? /* @__PURE__ */ jsx2("p", { role: "alert", className: s.error(), children: item.error }) : null
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: s.actions(), children: [
+        item.status === "uploading" && onPause && action(labels.pause(item.name), () => onPause(item.id), /* @__PURE__ */ jsx2(PauseGlyph, { className: "h-4 w-4" })),
+        item.status === "paused" && onResume && action(labels.resume(item.name), () => onResume(item.id), /* @__PURE__ */ jsx2(PlayGlyph, { className: "h-4 w-4" })),
+        item.status === "error" && onRetry && action(labels.retry(item.name), () => onRetry(item.id), /* @__PURE__ */ jsx2(RetryGlyph, { className: "h-4 w-4" })),
+        (item.status === "done" || item.status === "error") && onRemove ? action(labels.remove(item.name), () => onRemove(item.id), /* @__PURE__ */ jsx2(CloseGlyph, { className: "h-4 w-4" })) : item.status !== "done" && onCancel ? action(labels.cancel(item.name), () => onCancel(item.id), /* @__PURE__ */ jsx2(CloseGlyph, { className: "h-4 w-4" })) : null
+      ] })
+    ] }, item.id);
+  }) });
+}
+function createQueue(initial, emit) {
+  let current = initial;
+  const options = () => current;
+  const entries = /* @__PURE__ */ new Map();
+  const sync = () => emit([...entries.values()].map((e) => e.item));
+  const patch = (id, next) => {
+    const entry = entries.get(id);
+    if (!entry) return;
+    entry.item = { ...entry.item, ...next };
+    sync();
+  };
+  const pump = () => {
+    const { upload, concurrency = 2 } = options();
+    const all = [...entries.values()];
+    let running = all.filter((e) => e.item.status === "uploading").length;
+    for (const entry of all) {
+      if (running >= concurrency) break;
+      if (entry.item.status !== "queued") continue;
+      running += 1;
+      const controller = new AbortController();
+      const resumed = entry.started;
+      entry.controller = controller;
+      entry.started = true;
+      entry.last = { at: Date.now(), sent: entry.item.progress * entry.item.size };
+      patch(entry.item.id, { status: "uploading", error: void 0 });
+      upload(entry.file, {
+        signal: controller.signal,
+        resumed,
+        onProgress: (sent) => {
+          if (controller.signal.aborted) return;
+          const now = Date.now();
+          const last = entry.last ?? { at: now, sent };
+          const fresh = now - last.at > 400;
+          const speed = fresh ? (sent - last.sent) / (now - last.at) * 1e3 : entry.item.speed;
+          if (fresh) entry.last = { at: now, sent };
+          patch(entry.item.id, { progress: entry.item.size ? Math.min(1, sent / entry.item.size) : 0, speed });
+        }
+      }).then(
+        () => {
+          if (controller.signal.aborted) return;
+          patch(entry.item.id, { status: "done", progress: 1, speed: void 0 });
+          pump();
+        },
+        (error) => {
+          if (controller.signal.aborted) return;
+          patch(entry.item.id, { status: "error", error: error instanceof Error ? error.message : String(error), speed: void 0 });
+          pump();
+        }
+      );
+    }
+  };
+  const release = (entry) => {
+    entry.controller?.abort();
+    if (entry.item.previewUrl) URL.revokeObjectURL(entry.item.previewUrl);
+  };
+  return {
+    configure(next) {
+      current = next;
+    },
+    add(files) {
+      const { previews = true } = options();
+      for (const file of files) {
+        const id = `${file.name}-${file.size}-${Math.random().toString(36).slice(2, 8)}`;
+        const previewUrl = previews && typeof URL.createObjectURL === "function" ? URL.createObjectURL(file) : void 0;
+        entries.set(id, { file, controller: null, started: false, item: { id, name: file.name, size: file.size, type: file.type, progress: 0, status: "queued", previewUrl } });
+      }
+      sync();
+      pump();
+    },
+    pause(id) {
+      entries.get(id)?.controller?.abort();
+      patch(id, { status: "paused", speed: void 0 });
+      pump();
+    },
+    resume(id) {
+      patch(id, { status: "queued" });
+      pump();
+    },
+    remove(id) {
+      const entry = entries.get(id);
+      if (!entry) return;
+      release(entry);
+      entries.delete(id);
+      sync();
+      pump();
+    },
+    dispose() {
+      for (const entry of entries.values()) release(entry);
+    }
+  };
+}
+function useUploadQueue(options) {
+  const [items, setItems] = React2.useState([]);
+  const [queue] = React2.useState(() => createQueue(options, setItems));
+  React2.useLayoutEffect(() => queue.configure(options));
+  React2.useEffect(() => () => queue.dispose(), [queue]);
+  return { items, add: queue.add, pause: queue.pause, resume: queue.resume, retry: queue.resume, cancel: queue.remove, remove: queue.remove };
+}
+export {
+  Dropzone,
+  UploadList,
+  acceptsFile,
+  fileUpload,
+  formatBytes,
+  uploadListLabels,
+  useUploadQueue
+};
+//# sourceMappingURL=file-upload.js.map