@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/forms/FileUpload/FileUpload.d.ts

@@ -0,0 +1,153 @@
+import { ComponentPropsWithRef, ReactNode, Ref } from 'react';
+import { Size } from '../../../types/common';
+import { Messages } from '../../../i18n/types';
+/**
+ * How the picker is presented.
+ * - `dropzone`: a large dashed drop area with a prompt, hint, and Browse button (default).
+ * - `button`: just a Button that opens the picker, plus the file list. No drop target.
+ */
+export type FileUploadVariant = "dropzone" | "button";
+/** Upload status of one file. The component doesn't upload; you drive this from your upload code. */
+export type FileUploadStatus = "uploading" | "done" | "error";
+/** Per-file upload state, returned from `getFileState`. */
+export interface FileUploadFileState {
+    /** Upload progress from 0 to 100. Shows a progress bar while uploading. */
+    progress?: number;
+    /** Upload status. Shown as text plus an icon (never color alone). */
+    status?: FileUploadStatus;
+    /** Extra text, e.g. the reason an upload failed. Replaces the default status text. */
+    message?: string;
+}
+/** A file that failed validation, with human-readable reasons. */
+export interface FileRejection {
+    file: File;
+    /** One message per failed rule, e.g. `"File is larger than 5 MB"`. */
+    errors: string[];
+}
+/** State passed to a `children` render function. */
+export interface FileUploadRenderState {
+    /** Files are being dragged over the dropzone. */
+    dragging: boolean;
+    disabled: boolean;
+    /** Opens the native file picker. */
+    openPicker: () => void;
+}
+/**
+ * Formats a byte count for people: `512 B`, `240 KB`, `1.5 MB`, `5 MB`.
+ * Uses 1024-based units, matching how operating systems usually report file sizes.
+ */
+export declare function formatFileSize(bytes: number, units?: Messages["fileUpload"]["units"], locale?: string): string;
+/** True when the file matches one of the `accept` tokens (extension, exact MIME, or `type/*`). */
+export declare function fileMatchesAccept(file: File, accept: string | undefined): boolean;
+/** Turns an `accept` string into readable text: `"image/png,.pdf"` becomes `"PNG, PDF"`. */
+export declare function describeAccept(accept: string | undefined, messages?: Messages["fileUpload"]): string;
+export interface FileUploadListProps extends Omit<ComponentPropsWithRef<"ul">, "children"> {
+    /** The files to show. */
+    files: File[];
+    /** Called when a remove button is pressed. Omit to hide remove buttons. */
+    onRemove?: (file: File, index: number) => void;
+    /** Per-file upload progress and status. */
+    getFileState?: (file: File, index: number) => FileUploadFileState | undefined;
+    /** Show image thumbnails (object URLs, revoked on removal and unmount). @default true */
+    showThumbnails?: boolean;
+    /** Disables the remove buttons. @default false */
+    disabled?: boolean;
+    /** Accessible name of the list. @default "Selected files" */
+    "aria-label"?: string;
+    /** Builds each remove button's accessible name. @default (name) => `Remove ${name}` */
+    removeLabel?: (fileName: string) => string;
+    /**
+     * Element to focus after the last file is removed (for example the Browse
+     * button). Otherwise focus moves to the next item's remove button, or the
+     * previous one when the last item was removed.
+     */
+    focusFallback?: () => HTMLElement | null | undefined;
+    /** Row density. @default "md" */
+    size?: Size;
+}
+/**
+ * The list of selected files: icon or image thumbnail, name (truncated, full
+ * name on hover and focus), formatted size, optional upload progress and
+ * status, and a remove button per file. `FileUpload` renders one for you;
+ * use `FileUpload.List` directly for custom layouts.
+ *
+ * After a removal, focus moves to the next item's remove button (or the
+ * previous one), then to `focusFallback` when the list becomes empty.
+ * Upload completions and failures are announced in a polite live region.
+ */
+export declare const FileUploadList: ({ files, onRemove, getFileState, showThumbnails, disabled, removeLabel: removeLabelProp, focusFallback, size, className, "aria-label": ariaLabelProp, ...rest }: FileUploadListProps) => import("react").JSX.Element;
+export interface FileUploadProps extends Omit<ComponentPropsWithRef<"div">, "children" | "defaultValue" | "onChange"> {
+    /** File types to accept, as in the native attribute: `"image/*"`, `"image/png,.pdf"`. Also enforced on drop. */
+    accept?: string;
+    /** Allow more than one file. Without it, a new file replaces the current one. @default false */
+    multiple?: boolean;
+    /** Maximum number of accepted files in total (with `multiple`). */
+    maxFiles?: number;
+    /** Maximum size of each file, in bytes. */
+    maxSize?: number;
+    /** Minimum size of each file, in bytes. */
+    minSize?: number;
+    /** Custom rule. Return a human-readable error message to reject the file, or `null` to accept it. */
+    validator?: (file: File) => string | null;
+    /** Accepted files (controlled). */
+    value?: File[];
+    /** Initially accepted files (uncontrolled). */
+    defaultValue?: File[];
+    /** Called with the full list of accepted files whenever it changes (added or removed). */
+    onValueChange?: (files: File[]) => void;
+    /** Called with the files that failed validation in the latest selection or drop. */
+    onReject?: (rejections: FileRejection[]) => void;
+    /** Called when a file is removed with its remove button (e.g. to cancel its upload). */
+    onFileRemove?: (file: File) => void;
+    /** Disables the picker, drop target, and remove buttons. Inherits from a surrounding `Field`. */
+    disabled?: boolean;
+    /** Invalid state: danger border and `aria-invalid` on the Browse button. Inherits from a surrounding `Field`. */
+    invalid?: boolean;
+    /** Form field name. The native file input's `files` are kept in sync with the accepted list, so forms submit them. */
+    name?: string;
+    /** Native `required` on the file input. Inherits from a surrounding `Field`. */
+    required?: boolean;
+    /**
+     * `sm`: compact inline row. `md`: standard dropzone. `lg`: hero dropzone.
+     * Inherits from a surrounding `Field`. @default "md"
+     */
+    size?: Size;
+    /** Presentation. @default "dropzone" */
+    variant?: FileUploadVariant;
+    /**
+     * Replaces the prompt and hint inside the dropzone. A function receives
+     * `{ dragging, disabled, openPicker }`. The Browse button is always rendered.
+     */
+    children?: ReactNode | ((state: FileUploadRenderState) => ReactNode);
+    /** Prompt text in the dropzone. @default "Drop files here or browse" ("Drop a file here or browse" without `multiple`) */
+    prompt?: ReactNode;
+    /**
+     * Hint under the prompt. Defaults to text built from `accept`, `maxSize`,
+     * and `maxFiles` (e.g. "PNG, JPG up to 5 MB each. Up to 3 files."). Pass
+     * `null` to hide. It is wired to the Browse button with `aria-describedby`.
+     */
+    hint?: ReactNode;
+    /** Label of the button that opens the picker. @default "Browse files" ("Upload files" for the `button` variant) */
+    browseLabel?: string;
+    /** Show the built-in file list. @default true */
+    showList?: boolean;
+    /** Show the latest rejections, with their reasons, under the picker. @default true */
+    showRejections?: boolean;
+    /** Show image thumbnails in the list. @default true */
+    showThumbnails?: boolean;
+    /** Per-file upload progress and status for the built-in list. */
+    getFileState?: (file: File, index: number) => FileUploadFileState | undefined;
+    /** Ref to the native `<input type="file">`. `ref` points at the root `div`. */
+    inputRef?: Ref<HTMLInputElement>;
+    /** Ref to the Browse button. */
+    buttonRef?: Ref<HTMLButtonElement>;
+    /** id for the Browse button (the focusable control). Inside a `Field`, the Field's control id is used. */
+    id?: string;
+}
+/**
+ * File picker with drag and drop, validation, and a file list.
+ * `FileUpload.List` is the standalone list for custom layouts.
+ */
+export declare const FileUpload: (({ accept, multiple, maxFiles, maxSize, minSize, validator, value, defaultValue, onValueChange, onReject, onFileRemove, disabled, invalid, name, required, size, variant, children, prompt, hint, browseLabel, showList, showRejections, showThumbnails, getFileState, inputRef, buttonRef, id, className, style, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: FileUploadProps) => import("react").JSX.Element) & {
+    List: ({ files, onRemove, getFileState, showThumbnails, disabled, removeLabel: removeLabelProp, focusFallback, size, className, "aria-label": ariaLabelProp, ...rest }: FileUploadListProps) => import("react").JSX.Element;
+};

package/dist/components/forms/FileUpload/FileUpload.mjs

@@ -0,0 +1,447 @@
+import { en as e } from "../../../i18n/en.mjs";
+import { useControllableState as t } from "../../../hooks/useControllableState.mjs";
+import { useFormReset as n } from "../../../hooks/useFormReset.mjs";
+import { useLocale as r } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { assignRef as i } from "../../../utils/refs.mjs";
+import { cx as a } from "../../../utils/cx.mjs";
+import { VisuallyHidden as o } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { Spinner as s } from "../../feedback/Spinner/Spinner.mjs";
+import { Button as c, IconButton as l } from "../../primitives/Button/Button.mjs";
+import { CheckIcon as u, CloseIcon as d, ErrorIcon as f, FileIcon as p, ImageIcon as m, TrashIcon as h, UploadIcon as g } from "../../primitives/Icon/icons.mjs";
+import { useFieldContext as _, useFieldControl as v } from "../Field/FieldContext.mjs";
+import { Progress as y } from "../../feedback/Progress/Progress.mjs";
+import b from "./FileUpload.module.css.mjs";
+import { useCallback as x, useEffect as S, useId as C, useLayoutEffect as w, useMemo as T, useRef as E, useState as D } from "react";
+import { Fragment as ee, jsx as O, jsxs as k } from "react/jsx-runtime";
+//#region src/components/forms/FileUpload/FileUpload.tsx
+var te = {
+	sm: b.sm,
+	md: b.md,
+	lg: b.lg
+}, A = {
+	dropzone: b.variantDropzone,
+	button: b.variantButton
+};
+function j(t, n = e.fileUpload.units, r) {
+	let i = (e) => new Intl.NumberFormat(r).format(e);
+	if (!Number.isFinite(t) || t < 0) return `${i(0)} ${n.B}`;
+	if (t < 1024) return `${i(Math.round(t))} ${n.B}`;
+	let a = [
+		n.KB,
+		n.MB,
+		n.GB,
+		n.TB
+	], o = t / 1024, s = 0;
+	for (; o >= 1024 && s < a.length - 1;) o /= 1024, s++;
+	return `${i(o >= 10 ? Math.round(o) : Math.round(o * 10) / 10)} ${a[s]}`;
+}
+function M(e) {
+	return e ? e.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean) : [];
+}
+function N(e, t) {
+	let n = M(t);
+	if (n.length === 0) return !0;
+	let r = e.name.toLowerCase(), i = (e.type || "").toLowerCase();
+	return n.some((e) => e.startsWith(".") ? r.endsWith(e) : e.endsWith("/*") ? i.startsWith(e.slice(0, -1)) : i === e);
+}
+var P = {
+	"image/jpeg": "JPG",
+	"image/svg+xml": "SVG",
+	"text/plain": "TXT",
+	"application/msword": "DOC",
+	"application/vnd.openxmlformats-officedocument.wordprocessingml.document": "DOCX",
+	"application/vnd.ms-excel": "XLS",
+	"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "XLSX"
+};
+function F(t, n = e.fileUpload) {
+	let r = n.typeGroups, i = M(t).map((e) => {
+		if (e.startsWith(".")) return e.slice(1).toUpperCase();
+		if (e.endsWith("/*")) {
+			let t = e.slice(0, -2);
+			return r[t] ?? n.typeGroup(t);
+		}
+		return P[e] ? P[e] : (e.split("/")[1] ?? e).toUpperCase();
+	}), a = Array.from(new Set(i));
+	if (a.length === 0) return "";
+	let o = a.join(", ");
+	return o.charAt(0).toUpperCase() + o.slice(1);
+}
+var I = (e) => `${e.name}::${e.size}::${e.lastModified}`, ne = (e) => (e.type || "").startsWith("image/"), L = /* @__PURE__ */ new WeakMap(), re = 0;
+function ie(e) {
+	let t = L.get(e);
+	return t || (t = `file-${++re}`, L.set(e, t)), t;
+}
+function ae(e, t) {
+	let n = Intl.ListFormat;
+	return n ? new n(t, { type: "conjunction" }).format(e) : e.join(", ");
+}
+function oe() {
+	let [e, t] = D(""), n = E(!1);
+	return [e, x((e) => {
+		n.current = !n.current, t(n.current ? `${e} ` : e);
+	}, [])];
+}
+function R(e, t) {
+	let [n, r] = D();
+	return S(() => {
+		if (!t || typeof URL > "u" || typeof URL.createObjectURL != "function") return;
+		let n = URL.createObjectURL(e);
+		return r(n), () => {
+			URL.revokeObjectURL(n), r(void 0);
+		};
+	}, [e, t]), n;
+}
+var z = (e, t) => {
+	if (!e?.status && e?.progress == null) return null;
+	if (e.message) return e.message;
+	switch (e.status) {
+		case "done": return t.uploaded;
+		case "error": return t.uploadFailed;
+		default: return e.progress == null ? t.uploading : t.uploadingPercent(Math.round(e.progress));
+	}
+}, se = ({ file: e, state: t, showThumbnails: n, disabled: i, removeLabel: a, onRemove: o, removeRef: c }) => {
+	let { messages: g, locale: _ } = r(), v = ne(e), [x, S] = D(!1), C = R(e, n && v), w = t?.status ?? (t?.progress == null ? void 0 : "uploading"), T = z(t, g.fileUpload), E = w === "uploading" && t?.progress != null;
+	return /* @__PURE__ */ k("li", {
+		className: b.item,
+		"data-status": w,
+		children: [
+			/* @__PURE__ */ O("span", {
+				className: b.thumb,
+				"aria-hidden": "true",
+				children: C && !x ? /* @__PURE__ */ O("img", {
+					className: b.thumbImage,
+					src: C,
+					alt: "",
+					onError: () => S(!0)
+				}) : O(v ? m : p, { size: "md" })
+			}),
+			/* @__PURE__ */ k("div", {
+				className: b.itemBody,
+				children: [
+					/* @__PURE__ */ O("span", {
+						className: b.fileName,
+						title: e.name,
+						children: e.name
+					}),
+					/* @__PURE__ */ k("span", {
+						className: b.meta,
+						children: [/* @__PURE__ */ O("span", { children: j(e.size, g.fileUpload.units, _) }), T && /* @__PURE__ */ k("span", {
+							className: b.status,
+							"data-status": w,
+							children: [
+								w === "done" && /* @__PURE__ */ O(u, { size: "sm" }),
+								w === "error" && /* @__PURE__ */ O(f, { size: "sm" }),
+								w === "uploading" && /* @__PURE__ */ O(s, {
+									decorative: !0,
+									size: "xs"
+								}),
+								/* @__PURE__ */ O("span", { children: T })
+							]
+						})]
+					}),
+					E && /* @__PURE__ */ O(y, {
+						className: b.progress,
+						size: "sm",
+						value: t?.progress,
+						"aria-label": g.fileUpload.progressFor(e.name)
+					})
+				]
+			}),
+			o && /* @__PURE__ */ O(l, {
+				ref: c,
+				className: b.remove,
+				variant: "ghost",
+				tone: "neutral",
+				size: "sm",
+				"aria-label": a,
+				disabled: i,
+				onClick: o,
+				children: O(w === "uploading" ? d : h, { size: "sm" })
+			})
+		]
+	});
+}, ce = ({ files: e, onRemove: t, getFileState: n, showThumbnails: i = !0, disabled: s = !1, removeLabel: c, focusFallback: l, size: u = "md", className: d, "aria-label": f, ...p }) => {
+	let { messages: m, locale: h } = r(), g = (e) => ae(e, h), _ = c ?? m.fileUpload.remove, v = f ?? m.fileUpload.list, y = E([]), x = E(null), [C, T] = oe(), D = (n, r) => {
+		x.current = {
+			index: r,
+			length: e.length
+		}, t?.(n, r);
+	};
+	w(() => {
+		let t = x.current;
+		if (t && (x.current = null, !(e.length >= t.length))) {
+			if (e.length === 0) {
+				l?.()?.focus();
+				return;
+			}
+			y.current[Math.min(t.index, e.length - 1)]?.focus();
+		}
+	}, [e, l]);
+	let A = e.map((e, t) => n?.(e, t)), j = E(/* @__PURE__ */ new WeakMap()), M = A.map((e) => e?.status ?? "").join("|");
+	return S(() => {
+		let t = [], n = [];
+		e.forEach((e, r) => {
+			let i = A[r]?.status, a = j.current.get(e);
+			i !== a && ((a !== void 0 || j.current.has(e)) && (i === "done" && t.push(e.name), i === "error" && n.push(e.name)), j.current.set(e, i));
+		});
+		let r = [];
+		t.length && r.push(m.fileUpload.announceUploaded(g(t))), n.length && r.push(m.fileUpload.announceFailed(g(n))), r.length && T(r.join(" "));
+	}, [
+		e,
+		M,
+		T
+	]), /* @__PURE__ */ k(ee, { children: [e.length > 0 && /* @__PURE__ */ O("ul", {
+		...p,
+		"aria-label": v,
+		className: a(b.list, te[u], d),
+		children: e.map((e, n) => /* @__PURE__ */ O(se, {
+			file: e,
+			state: A[n],
+			showThumbnails: i,
+			disabled: s,
+			removeLabel: _(e.name),
+			onRemove: t ? () => D(e, n) : void 0,
+			removeRef: (e) => {
+				y.current[n] = e;
+			}
+		}, ie(e)))
+	}), /* @__PURE__ */ O(o, {
+		role: "status",
+		children: C
+	})] });
+};
+function le(e, t, n, r, i) {
+	let a = (e) => j(e, r.units, i), { accept: o, multiple: s = !1, maxFiles: c, maxSize: l, minSize: u, validator: d } = n, f = [], p = [], m = new Set(s ? t.map(I) : []), h = s ? c ?? Infinity : 1, g = s ? t.length : 0, _ = F(o, r);
+	for (let t of e) {
+		let e = [];
+		if (N(t, o) || e.push(_ ? r.typeNotAcceptedUse(_) : r.typeNotAccepted), l != null && t.size > l && e.push(r.tooLarge(a(l))), u != null && t.size < u && e.push(r.tooSmall(a(u))), m.has(I(t)) && e.push(r.duplicate), e.length === 0 && d) {
+			let n = d(t);
+			n && e.push(n);
+		}
+		e.length === 0 && g + f.length >= h && e.push(s ? r.tooMany(h) : r.onlyOne), e.length ? p.push({
+			file: t,
+			errors: e
+		}) : (f.push(t), m.add(I(t)));
+	}
+	return {
+		accepted: f,
+		rejections: p
+	};
+}
+var B = (e) => Array.from(e.dataTransfer?.types ?? []).includes("Files"), ue = Object.assign(({ accept: e, multiple: s = !1, maxFiles: u, maxSize: p, minSize: m, validator: h, value: y, defaultValue: w, onValueChange: M, onReject: N, onFileRemove: P, disabled: I, invalid: ne, name: L, required: re, size: ae, variant: R = "dropzone", children: z, prompt: se, hint: ue, browseLabel: de, showList: fe = !0, showRejections: pe = !0, showThumbnails: me = !0, getFileState: he, inputRef: ge, buttonRef: _e, id: ve, className: ye, style: be, "aria-describedby": xe, "aria-label": Se, "aria-labelledby": Ce, ...we }) => {
+	let { messages: V, locale: Te } = r(), Ee = (e) => j(e, V.fileUpload.units, Te), H = C(), De = `${H}-hint`, Oe = `${H}-prompt`, ke = `${H}-browse`, Ae = `${H}-rejections`, je = `${H}-required`, Me = `${H}-input`, U = _(), [Ne, Pe] = D([]), W = ue === void 0 ? [[F(e, V.fileUpload), p == null ? "" : s ? V.fileUpload.upToEach(Ee(p)) : V.fileUpload.upTo(Ee(p))].filter(Boolean).join(" "), s && u != null ? V.fileUpload.maxFiles(u) : ""].filter(Boolean).map((e) => `${e}.`).join(" ") || null : ue, Fe = W !== null && W !== !1 && W !== "", Ie = pe && Ne.length > 0, G = v({
+		id: ve,
+		invalid: ne,
+		required: re,
+		disabled: I,
+		size: ae,
+		"aria-describedby": [
+			xe,
+			Fe && !z ? De : void 0,
+			Ie ? Ae : void 0
+		].filter(Boolean).join(" ") || void 0
+	}), K = G.size ?? "md", q = G.disabled, [J, Le] = t({
+		value: y,
+		defaultValue: w ?? [],
+		onChange: M
+	});
+	n(() => G.id ? document.getElementById(G.id) : null, () => Le(w ?? []), y === void 0);
+	let Y = E(J);
+	Y.current = J;
+	let [Re, ze] = oe(), [Be, Ve] = D(!1), X = E(0), Z = E(null), Q = E(null), He = x((e) => {
+		Z.current = e, i(ge, e);
+	}, [ge]), Ue = x((e) => {
+		Q.current = e, i(_e, e);
+	}, [_e]), $ = x((e) => {
+		let t = Z.current;
+		if (t) try {
+			if (typeof DataTransfer > "u") throw Error("unsupported");
+			let n = new DataTransfer();
+			e.forEach((e) => n.items.add(e)), t.files = n.files;
+		} catch {
+			e.length === 0 && (t.value = "");
+		}
+	}, []);
+	S(() => {
+		$(J);
+	}, [J, $]);
+	let We = x(() => {
+		if (q) return;
+		let e = Z.current;
+		e && (e.value = "", e.click());
+	}, [q]);
+	S(() => {
+		let e = Z.current;
+		if (!e) return;
+		let t = () => $(Y.current);
+		return e.addEventListener("cancel", t), () => e.removeEventListener("cancel", t);
+	}, [$]);
+	let Ge = (t) => {
+		if (q || t.length === 0) return;
+		let n = Y.current, r = le(t, n, {
+			accept: e,
+			multiple: s,
+			maxFiles: u,
+			maxSize: p,
+			minSize: m,
+			validator: h
+		}, V.fileUpload, Te);
+		r.accepted.length && Le(s ? [...n, ...r.accepted] : r.accepted), Pe(r.rejections), r.rejections.length && N?.(r.rejections);
+		let i = r.accepted.length, a = r.rejections.length, o = V.fileUpload.announceAdded(i, a);
+		a === 1 && i === 0 && (o += ` ${r.rejections[0].file.name}: ${r.rejections[0].errors.join(" ")}`), ze(o);
+	}, Ke = (e) => {
+		let t = Array.from(e.target.files ?? []);
+		Ge(t), requestAnimationFrame(() => $(Y.current));
+	}, qe = (e) => {
+		let t = Y.current.filter((t) => t !== e);
+		Le(t), P?.(e), ze(`${e.name} removed.`);
+	}, Je = () => {
+		X.current = 0, Ve(!1);
+	}, Ye = (e) => {
+		B(e) && (e.preventDefault(), X.current += 1, q || Ve(!0));
+	}, Xe = (e) => {
+		B(e) && (e.preventDefault(), e.dataTransfer.dropEffect = q ? "none" : "copy");
+	}, Ze = (e) => {
+		B(e) && (X.current = Math.max(0, X.current - 1), X.current === 0 && Ve(!1));
+	}, Qe = (e) => {
+		B(e) && (e.preventDefault(), Je(), !q && Ge(Array.from(e.dataTransfer.files ?? [])));
+	}, $e = [ke, U && !U.isGroup ? U.labelId : void 0].filter(Boolean).join(" "), et = [G.ariaProps["aria-describedby"], G.required ? je : void 0].filter(Boolean).join(" ") || void 0, tt = de ?? (R === "button" ? V.fileUpload.uploadFiles : V.fileUpload.browseFiles), nt = K, rt = /* @__PURE__ */ O(c, {
+		ref: Ue,
+		id: G.id,
+		className: b.browse,
+		variant: R === "button" ? "outline" : "solid",
+		size: nt,
+		startIcon: R === "button" ? /* @__PURE__ */ O(g, { size: "sm" }) : void 0,
+		disabled: q,
+		"aria-labelledby": $e,
+		"aria-describedby": et,
+		"aria-invalid": G.ariaProps["aria-invalid"],
+		"aria-errormessage": G.ariaProps["aria-errormessage"],
+		"aria-controls": Me,
+		onClick: We,
+		children: /* @__PURE__ */ O("span", {
+			id: ke,
+			children: tt
+		})
+	}), it = se ?? (s ? V.fileUpload.dropFiles : V.fileUpload.dropFile), at = typeof z == "function" ? z({
+		dragging: Be,
+		disabled: q,
+		openPicker: We
+	}) : z, ot = Fe ? /* @__PURE__ */ O("p", {
+		id: De,
+		className: b.hint,
+		children: W
+	}) : null, st = Ce ?? (U && !Se ? U.labelId : void 0), ct = !!(Se || st), lt = x(() => Q.current, []), ut = T(() => J, [J]);
+	return /* @__PURE__ */ k("div", {
+		...we,
+		role: ct ? "group" : we.role,
+		"aria-label": Se,
+		"aria-labelledby": st,
+		className: a(b.root, te[K], A[R], G.invalid && b.invalid, q && b.disabled, ye),
+		style: be,
+		"data-size": K,
+		"data-variant": R,
+		"data-dragging": Be || void 0,
+		"data-disabled": q || void 0,
+		"aria-disabled": q || void 0,
+		children: [
+			/* @__PURE__ */ O("input", {
+				ref: He,
+				id: Me,
+				className: b.nativeInput,
+				type: "file",
+				name: L,
+				accept: e,
+				multiple: s,
+				required: G.required,
+				disabled: q,
+				tabIndex: -1,
+				"aria-hidden": "true",
+				onChange: Ke,
+				onInvalid: () => Q.current?.focus()
+			}),
+			G.required && /* @__PURE__ */ O(o, {
+				id: je,
+				children: V.fileUpload.required
+			}),
+			R === "dropzone" ? /* @__PURE__ */ k("div", {
+				className: b.dropzone,
+				onDragEnter: Ye,
+				onDragOver: Xe,
+				onDragLeave: Ze,
+				onDrop: Qe,
+				children: [
+					/* @__PURE__ */ O("span", {
+						className: b.iconBadge,
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ O(g, { size: K === "lg" ? "xl" : K === "sm" ? "sm" : "lg" })
+					}),
+					/* @__PURE__ */ O("div", {
+						className: b.text,
+						children: at ?? /* @__PURE__ */ k(ee, { children: [/* @__PURE__ */ O("p", {
+							id: Oe,
+							className: b.prompt,
+							children: it
+						}), ot] })
+					}),
+					rt
+				]
+			}) : /* @__PURE__ */ k("div", {
+				className: b.buttonRow,
+				children: [rt, at ?? ot]
+			}),
+			Ie && /* @__PURE__ */ k("div", {
+				id: Ae,
+				className: b.rejections,
+				children: [/* @__PURE__ */ k("div", {
+					className: b.rejectionsHeader,
+					children: [
+						/* @__PURE__ */ O(f, { size: "sm" }),
+						/* @__PURE__ */ O("p", {
+							className: b.rejectionsTitle,
+							children: V.fileUpload.rejected(Ne.length)
+						}),
+						/* @__PURE__ */ O(l, {
+							className: b.rejectionsDismiss,
+							variant: "ghost",
+							tone: "neutral",
+							size: "sm",
+							"aria-label": V.fileUpload.dismissErrors,
+							onClick: () => {
+								Pe([]), Q.current?.focus();
+							},
+							children: /* @__PURE__ */ O(d, { size: "sm" })
+						})
+					]
+				}), /* @__PURE__ */ O("ul", {
+					className: b.rejectionList,
+					children: Ne.map(({ file: e, errors: t }, n) => /* @__PURE__ */ k("li", {
+						className: b.rejection,
+						children: [/* @__PURE__ */ O("span", {
+							className: b.rejectionName,
+							children: e.name
+						}), /* @__PURE__ */ O("span", {
+							className: b.rejectionReason,
+							children: t.join(" ")
+						})]
+					}, `${ie(e)}-${n}`))
+				})]
+			}),
+			fe && /* @__PURE__ */ O(ce, {
+				files: ut,
+				size: K,
+				disabled: q,
+				showThumbnails: me,
+				getFileState: he,
+				onRemove: qe,
+				focusFallback: lt
+			}),
+			/* @__PURE__ */ O(o, {
+				role: "status",
+				children: Re
+			})
+		]
+	});
+}, { List: ce });
+//#endregion
+export { ue as FileUpload, ce as FileUploadList, F as describeAccept, N as fileMatchesAccept, j as formatFileSize };

package/dist/components/forms/FileUpload/FileUpload.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_wpmjx_25`,t=`_nativeInput_wpmjx_61`,n=`_sm_wpmjx_87`,r=`_md_wpmjx_101`,i=`_lg_wpmjx_115`,a=`_variantDropzone_wpmjx_133`,o=`_variantButton_wpmjx_143`,s=`_buttonRow_wpmjx_151`,c=`_hint_wpmjx_165`,l=`_dropzone_wpmjx_131`,u=`_browse_wpmjx_233`,d=`_iconBadge_wpmjx_251`,f=`_text_wpmjx_283`,p=`_prompt_wpmjx_297`,m=`_invalid_wpmjx_369`,h=`_disabled_wpmjx_381`,g=`_rejections_wpmjx_415`,_=`_rejectionsHeader_wpmjx_437`,v=`_rejectionsTitle_wpmjx_449`,y=`_rejectionsDismiss_wpmjx_465`,b=`_rejectionList_wpmjx_473`,x=`_rejection_wpmjx_415`,S=`_rejectionName_wpmjx_507`,C=`_rejectionReason_wpmjx_519`,w=`_list_wpmjx_529`,T=`_item_wpmjx_547`,E=`_itemEnter_wpmjx_1`,D=`_thumb_wpmjx_609`,O=`_thumbImage_wpmjx_647`,k=`_itemBody_wpmjx_659`,A=`_fileName_wpmjx_677`,j=`_meta_wpmjx_713`,M=`_status_wpmjx_733`,N=`_progress_wpmjx_771`,P=`_remove_wpmjx_779`,F={root:e,nativeInput:t,sm:n,md:r,lg:i,variantDropzone:a,variantButton:o,buttonRow:s,hint:c,dropzone:l,browse:u,iconBadge:d,text:f,prompt:p,invalid:m,disabled:h,rejections:g,rejectionsHeader:_,rejectionsTitle:v,rejectionsDismiss:y,rejectionList:b,rejection:x,rejectionName:S,rejectionReason:C,list:w,item:T,itemEnter:E,thumb:D,thumbImage:O,itemBody:k,fileName:A,meta:j,status:M,progress:N,remove:P};exports.browse=u,exports.buttonRow=s,exports.default=F,exports.disabled=h,exports.dropzone=l,exports.fileName=A,exports.hint=c,exports.iconBadge=d,exports.invalid=m,exports.item=T,exports.itemBody=k,exports.itemEnter=E,exports.lg=i,exports.list=w,exports.md=r,exports.meta=j,exports.nativeInput=t,exports.progress=N,exports.prompt=p,exports.rejection=x,exports.rejectionList=b,exports.rejectionName=S,exports.rejectionReason=C,exports.rejections=g,exports.rejectionsDismiss=y,exports.rejectionsHeader=_,exports.rejectionsTitle=v,exports.remove=P,exports.root=e,exports.sm=n,exports.status=M,exports.text=f,exports.thumb=D,exports.thumbImage=O,exports.variantButton=o,exports.variantDropzone=a;

package/dist/components/forms/FileUpload/FileUpload.module.css.mjs

@@ -0,0 +1,40 @@
+//#region src/components/forms/FileUpload/FileUpload.module.css
+var e = "_root_wpmjx_25", t = "_nativeInput_wpmjx_61", n = "_sm_wpmjx_87", r = "_md_wpmjx_101", i = "_lg_wpmjx_115", a = "_variantDropzone_wpmjx_133", o = "_variantButton_wpmjx_143", s = "_buttonRow_wpmjx_151", c = "_hint_wpmjx_165", l = "_dropzone_wpmjx_131", u = "_browse_wpmjx_233", d = "_iconBadge_wpmjx_251", f = "_text_wpmjx_283", p = "_prompt_wpmjx_297", m = "_invalid_wpmjx_369", h = "_disabled_wpmjx_381", g = "_rejections_wpmjx_415", _ = "_rejectionsHeader_wpmjx_437", v = "_rejectionsTitle_wpmjx_449", y = "_rejectionsDismiss_wpmjx_465", b = "_rejectionList_wpmjx_473", x = "_rejection_wpmjx_415", S = "_rejectionName_wpmjx_507", C = "_rejectionReason_wpmjx_519", w = "_list_wpmjx_529", T = "_item_wpmjx_547", E = "_itemEnter_wpmjx_1", D = "_thumb_wpmjx_609", O = "_thumbImage_wpmjx_647", k = "_itemBody_wpmjx_659", A = "_fileName_wpmjx_677", j = "_meta_wpmjx_713", M = "_status_wpmjx_733", N = "_progress_wpmjx_771", P = "_remove_wpmjx_779", F = {
+	root: e,
+	nativeInput: t,
+	sm: n,
+	md: r,
+	lg: i,
+	variantDropzone: a,
+	variantButton: o,
+	buttonRow: s,
+	hint: c,
+	dropzone: l,
+	browse: u,
+	iconBadge: d,
+	text: f,
+	prompt: p,
+	invalid: m,
+	disabled: h,
+	rejections: g,
+	rejectionsHeader: _,
+	rejectionsTitle: v,
+	rejectionsDismiss: y,
+	rejectionList: b,
+	rejection: x,
+	rejectionName: S,
+	rejectionReason: C,
+	list: w,
+	item: T,
+	itemEnter: E,
+	thumb: D,
+	thumbImage: O,
+	itemBody: k,
+	fileName: A,
+	meta: j,
+	status: M,
+	progress: N,
+	remove: P
+};
+//#endregion
+export { u as browse, s as buttonRow, F as default, h as disabled, l as dropzone, A as fileName, c as hint, d as iconBadge, m as invalid, T as item, k as itemBody, E as itemEnter, i as lg, w as list, r as md, j as meta, t as nativeInput, N as progress, p as prompt, x as rejection, b as rejectionList, S as rejectionName, C as rejectionReason, g as rejections, y as rejectionsDismiss, _ as rejectionsHeader, v as rejectionsTitle, P as remove, e as root, n as sm, M as status, f as text, D as thumb, O as thumbImage, o as variantButton, a as variantDropzone };

package/dist/components/forms/FileUpload/index.d.ts

@@ -0,0 +1 @@
+export * from './FileUpload';

package/dist/components/forms/Input/Input.cjs.js

@@ -0,0 +1 @@
+const e=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),t=require("../../../utils/refs.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../../feedback/Spinner/Spinner.cjs.js"),i=require("../../primitives/Icon/icons.cjs.js"),ee=require("../Field/FieldContext.cjs.js"),a=require("./Input.module.css.cjs.js");let o=require("react"),s=require("react/jsx-runtime");var c={outline:a.default.outline,filled:a.default.filled},l={sm:a.default.sm,md:a.default.md,lg:a.default.lg},u={none:a.default.radiusNone,xs:a.default.radiusXs,sm:a.default.radiusSm,md:a.default.radiusMd,lg:a.default.radiusLg,xl:a.default.radiusXl,"2xl":a.default.radius2xl,pill:a.default.radiusPill};function d(e){return e!=null&&String(e)!==``}function f(e){return typeof e==`string`||typeof e==`number`}function p(e,t){let n=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,`value`)?.set;n?n.call(e,t):e.value=t,e.dispatchEvent(new Event(`input`,{bubbles:!0}))}var m=({size:m,variant:h=`outline`,radius:g,invalid:_,startIcon:v,endIcon:y,startAddon:b,endAddon:x,startElement:S,endElement:C,clearable:w=!1,clearLabel:T,onClear:E,loading:D=!1,fullWidth:te=!0,htmlSize:ne,onValueChange:re,onChange:O,className:k,inputClassName:A,style:j,ref:M,id:N,type:P=`text`,value:F,defaultValue:I,disabled:L,required:R,readOnly:z,"aria-describedby":B,"aria-busy":V,...H})=>{let U=e.useMessages(),ie=T??U.input.clear,W=(0,o.useId)(),G=`${W}-start-addon`,K=`${W}-end-addon`,q=[B,b!=null&&f(b)?G:void 0,x!=null&&f(x)?K:void 0].filter(Boolean).join(` `)||void 0,J=ee.useFieldControl({id:N,invalid:_,required:R,disabled:L,readOnly:z,size:m,"aria-describedby":q}),Y=J.size??`md`,X=F!==void 0,Z=(0,o.useRef)(null),ae=(0,o.useCallback)(e=>{Z.current=e,t.assignRef(M,e)},[M]),[oe,Q]=(0,o.useState)(()=>d(I)),se=X?d(F):oe;(0,o.useEffect)(()=>{if(X)return;let e=Z.current?.form;if(!e)return;let t=()=>{requestAnimationFrame(()=>{Z.current&&Q(Z.current.value!==``)})};return e.addEventListener(`reset`,t),()=>e.removeEventListener(`reset`,t)},[X]);let ce=e=>{let t=e.target.value;X||Q(t!==``),O?.(e),re?.(t)},le=()=>{let e=Z.current;e&&(p(e,``),e.focus(),E?.())},ue=e=>{let t=Z.current;if(!t||J.disabled)return;let n=e.target;n!==t&&(n.closest(`button, a, input, select, textarea, [tabindex], [contenteditable]`)||(e.preventDefault(),t.focus()))},$=w&&se&&!J.disabled&&!J.readOnly,de=$||C!=null;return(0,s.jsxs)(`div`,{className:n.cx(a.default.root,c[h],l[Y],g?u[g]:a.default.radiusDefault,te&&a.default.fullWidth,J.invalid&&a.default.invalid,J.disabled&&a.default.disabled,J.readOnly&&!J.disabled&&a.default.readOnly,b!=null&&a.default.hasStartAddon,x!=null&&a.default.hasEndAddon,S!=null&&a.default.hasStartElement,de&&a.default.hasEndControl,k),style:j,"data-size":Y,"data-variant":h,onPointerDown:ue,children:[b!=null&&(0,s.jsx)(`span`,{className:n.cx(a.default.addon,a.default.startAddon),id:f(b)?G:void 0,children:b}),S!=null&&(0,s.jsx)(`span`,{className:a.default.element,children:S}),v!=null&&(0,s.jsx)(`span`,{className:a.default.icon,"aria-hidden":`true`,children:v}),(0,s.jsx)(`input`,{...H,ref:ae,id:J.id,type:P,value:F,defaultValue:I,size:ne,disabled:J.disabled,required:J.required,readOnly:J.readOnly,...J.ariaProps,"aria-busy":D?!0:V,className:n.cx(a.default.input,w&&a.default.hideNativeClear,A),onChange:ce}),D&&(0,s.jsx)(`span`,{className:a.default.icon,children:(0,s.jsx)(r.Spinner,{decorative:!0,size:Y===`sm`?`xs`:`sm`})}),$&&(0,s.jsx)(`button`,{type:`button`,className:a.default.clear,"aria-label":ie,"aria-controls":J.id,onClick:le,children:(0,s.jsx)(i.CloseIcon,{size:Y===`lg`?`sm`:`xs`})}),C!=null&&(0,s.jsx)(`span`,{className:a.default.element,children:C}),y!=null&&(0,s.jsx)(`span`,{className:a.default.icon,"aria-hidden":`true`,children:y}),x!=null&&(0,s.jsx)(`span`,{className:n.cx(a.default.addon,a.default.endAddon),id:f(x)?K:void 0,children:x})]})};exports.Input=m;