@optimum-intelligence/opti-ui 0.0.0-stage → 0.3.0

package/dist/components/file-upload/FileUpload.js

@@ -0,0 +1,714 @@
+"use client";
+import { cx } from "../../utils/cx.js";
+import { CircleCheckIcon, FileIcon, UploadIcon, XIcon } from "../../icons/index.js";
+import { IconButton } from "../button/Button.js";
+import { Progress } from "../progress/Progress.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/file-upload/FileUpload.tsx
+/** `1536` → `"1.5 KB"`. */
+function formatFileSize(bytes, locale) {
+	const units = [
+		"B",
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	let value = bytes;
+	let unit = 0;
+	while (value >= 1024 && unit < units.length - 1) {
+		value /= 1024;
+		unit += 1;
+	}
+	const digits = unit > 0 && value < 10 ? 1 : 0;
+	return `${new Intl.NumberFormat(locale, { maximumFractionDigits: digits }).format(value)} ${units[unit]}`;
+}
+function accepts(file, accept) {
+	const tokens = (accept ?? "").split(",").map((token) => token.trim().toLowerCase()).filter(Boolean);
+	if (!tokens.length) return true;
+	const [name, type] = [file.name.toLowerCase(), file.type.toLowerCase()];
+	return tokens.some((token) => token.startsWith(".") ? name.endsWith(token) : token.endsWith("/*") ? type.startsWith(token.slice(0, -1)) : type === token);
+}
+function setInputFiles(input, files) {
+	if (!input) return;
+	if (!files?.length || typeof DataTransfer === "undefined") {
+		input.value = "";
+		return;
+	}
+	const transfer = new DataTransfer();
+	for (const file of files) transfer.items.add(file);
+	input.files = transfer.files;
+}
+/** Drop target that also opens the file browser on click, Enter or Space. */
+function Dropzone(t0) {
+	const $ = c(74);
+	let accept;
+	let children;
+	let className;
+	let disabled;
+	let files;
+	let hint;
+	let icon;
+	let inputProps;
+	let invalid;
+	let maxSize;
+	let multiple;
+	let onFiles;
+	let onReject;
+	let props;
+	let ref;
+	let t1;
+	let title;
+	if ($[0] !== t0) {
+		({onFiles, onReject, accept, multiple, maxSize, files, disabled, invalid, size: t1, icon, title, hint, inputProps, className, children, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = accept;
+		$[2] = children;
+		$[3] = className;
+		$[4] = disabled;
+		$[5] = files;
+		$[6] = hint;
+		$[7] = icon;
+		$[8] = inputProps;
+		$[9] = invalid;
+		$[10] = maxSize;
+		$[11] = multiple;
+		$[12] = onFiles;
+		$[13] = onReject;
+		$[14] = props;
+		$[15] = ref;
+		$[16] = t1;
+		$[17] = title;
+	} else {
+		accept = $[1];
+		children = $[2];
+		className = $[3];
+		disabled = $[4];
+		files = $[5];
+		hint = $[6];
+		icon = $[7];
+		inputProps = $[8];
+		invalid = $[9];
+		maxSize = $[10];
+		multiple = $[11];
+		onFiles = $[12];
+		onReject = $[13];
+		props = $[14];
+		ref = $[15];
+		t1 = $[16];
+		title = $[17];
+	}
+	const size = t1 === void 0 ? "md" : t1;
+	const [dragging, setDragging] = React.useState(false);
+	const inputRef = React.useRef(null);
+	let t2;
+	let t3;
+	if ($[18] !== files) {
+		t2 = () => {
+			setInputFiles(inputRef.current, files);
+		};
+		t3 = [files];
+		$[18] = files;
+		$[19] = t2;
+		$[20] = t3;
+	} else {
+		t2 = $[19];
+		t3 = $[20];
+	}
+	React.useEffect(t2, t3);
+	let t4;
+	if ($[21] !== accept || $[22] !== files || $[23] !== maxSize || $[24] !== multiple || $[25] !== onFiles || $[26] !== onReject) {
+		t4 = (list) => {
+			const accepted = [];
+			const rejected = [];
+			for (const file of Array.from(list ?? [])) if (!accepts(file, accept)) rejected.push({
+				file,
+				reason: "type"
+			});
+			else if (maxSize != null && file.size > maxSize) rejected.push({
+				file,
+				reason: "size"
+			});
+			else if (!multiple && accepted.length) rejected.push({
+				file,
+				reason: "count"
+			});
+			else accepted.push(file);
+			setInputFiles(inputRef.current, files);
+			if (accepted.length) onFiles?.(accepted);
+			if (rejected.length) onReject?.(rejected);
+		};
+		$[21] = accept;
+		$[22] = files;
+		$[23] = maxSize;
+		$[24] = multiple;
+		$[25] = onFiles;
+		$[26] = onReject;
+		$[27] = t4;
+	} else t4 = $[27];
+	const take = t4;
+	const hasFiles = _temp;
+	let t5;
+	if ($[28] !== className) {
+		t5 = cx("oui-dropzone", className);
+		$[28] = className;
+		$[29] = t5;
+	} else t5 = $[29];
+	const t6 = dragging ? "" : void 0;
+	const t7 = disabled ? "" : void 0;
+	const t8 = invalid ? "" : void 0;
+	let t9;
+	if ($[30] !== disabled) {
+		t9 = (event_0) => {
+			if (!disabled && hasFiles(event_0)) setDragging(true);
+		};
+		$[30] = disabled;
+		$[31] = t9;
+	} else t9 = $[31];
+	let t10;
+	let t11;
+	if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = (event_1) => {
+			if (hasFiles(event_1)) event_1.preventDefault();
+		};
+		t11 = (event_2) => {
+			if (!event_2.currentTarget.contains(event_2.relatedTarget)) setDragging(false);
+		};
+		$[32] = t10;
+		$[33] = t11;
+	} else {
+		t10 = $[32];
+		t11 = $[33];
+	}
+	let t12;
+	if ($[34] !== disabled || $[35] !== take) {
+		t12 = (event_3) => {
+			if (!hasFiles(event_3)) return;
+			event_3.preventDefault();
+			setDragging(false);
+			if (!disabled) take(event_3.dataTransfer.files);
+		};
+		$[34] = disabled;
+		$[35] = take;
+		$[36] = t12;
+	} else t12 = $[36];
+	const t13 = inputProps?.className;
+	let t14;
+	if ($[37] !== t13) {
+		t14 = cx("oui-dropzone__input", t13);
+		$[37] = t13;
+		$[38] = t14;
+	} else t14 = $[38];
+	const t15 = invalid || void 0;
+	let t16;
+	if ($[39] !== take) {
+		t16 = (event_4) => take(event_4.target.files);
+		$[39] = take;
+		$[40] = t16;
+	} else t16 = $[40];
+	let t17;
+	if ($[41] !== accept || $[42] !== disabled || $[43] !== inputProps || $[44] !== multiple || $[45] !== t14 || $[46] !== t15 || $[47] !== t16) {
+		t17 = /* @__PURE__ */ jsx("input", {
+			...inputProps,
+			ref: inputRef,
+			type: "file",
+			className: t14,
+			accept,
+			multiple,
+			disabled,
+			"aria-invalid": t15,
+			onChange: t16
+		});
+		$[41] = accept;
+		$[42] = disabled;
+		$[43] = inputProps;
+		$[44] = multiple;
+		$[45] = t14;
+		$[46] = t15;
+		$[47] = t16;
+		$[48] = t17;
+	} else t17 = $[48];
+	let t18;
+	if ($[49] !== icon) {
+		t18 = icon ?? /* @__PURE__ */ jsx(UploadIcon, {});
+		$[49] = icon;
+		$[50] = t18;
+	} else t18 = $[50];
+	let t19;
+	if ($[51] !== t18) {
+		t19 = /* @__PURE__ */ jsx("span", {
+			className: "oui-dropzone__icon",
+			children: t18
+		});
+		$[51] = t18;
+		$[52] = t19;
+	} else t19 = $[52];
+	const t20 = title ?? (multiple ? "Drop files here or click to browse" : "Drop a file here or click to browse");
+	let t21;
+	if ($[53] !== t20) {
+		t21 = /* @__PURE__ */ jsx("span", {
+			className: "oui-dropzone__title",
+			children: t20
+		});
+		$[53] = t20;
+		$[54] = t21;
+	} else t21 = $[54];
+	let t22;
+	if ($[55] !== hint) {
+		t22 = hint != null && /* @__PURE__ */ jsx("span", {
+			className: "oui-dropzone__hint",
+			children: hint
+		});
+		$[55] = hint;
+		$[56] = t22;
+	} else t22 = $[56];
+	let t23;
+	if ($[57] !== t21 || $[58] !== t22) {
+		t23 = /* @__PURE__ */ jsxs("span", {
+			className: "oui-dropzone__text",
+			children: [t21, t22]
+		});
+		$[57] = t21;
+		$[58] = t22;
+		$[59] = t23;
+	} else t23 = $[59];
+	let t24;
+	if ($[60] !== children || $[61] !== props || $[62] !== ref || $[63] !== size || $[64] !== t12 || $[65] !== t17 || $[66] !== t19 || $[67] !== t23 || $[68] !== t5 || $[69] !== t6 || $[70] !== t7 || $[71] !== t8 || $[72] !== t9) {
+		t24 = /* @__PURE__ */ jsxs("label", {
+			ref,
+			...props,
+			className: t5,
+			"data-size": size,
+			"data-dragging": t6,
+			"data-disabled": t7,
+			"data-invalid": t8,
+			onDragEnter: t9,
+			onDragOver: t10,
+			onDragLeave: t11,
+			onDrop: t12,
+			children: [
+				t17,
+				t19,
+				t23,
+				children
+			]
+		});
+		$[60] = children;
+		$[61] = props;
+		$[62] = ref;
+		$[63] = size;
+		$[64] = t12;
+		$[65] = t17;
+		$[66] = t19;
+		$[67] = t23;
+		$[68] = t5;
+		$[69] = t6;
+		$[70] = t7;
+		$[71] = t8;
+		$[72] = t9;
+		$[73] = t24;
+	} else t24 = $[73];
+	return t24;
+}
+function _temp(event) {
+	return event.dataTransfer.types.includes("Files");
+}
+/** One file in a list: name, size, upload progress or error, and a remove button. */
+function FileItem(t0) {
+	const $ = c(59);
+	let actions;
+	let className;
+	let error;
+	let icon;
+	let locale;
+	let name;
+	let onRemove;
+	let props;
+	let ref;
+	let removeLabel;
+	let size;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({name, size, icon, status: t1, progress: t2, error, onRemove, removeLabel, actions, locale, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = actions;
+		$[2] = className;
+		$[3] = error;
+		$[4] = icon;
+		$[5] = locale;
+		$[6] = name;
+		$[7] = onRemove;
+		$[8] = props;
+		$[9] = ref;
+		$[10] = removeLabel;
+		$[11] = size;
+		$[12] = t1;
+		$[13] = t2;
+	} else {
+		actions = $[1];
+		className = $[2];
+		error = $[3];
+		icon = $[4];
+		locale = $[5];
+		name = $[6];
+		onRemove = $[7];
+		props = $[8];
+		ref = $[9];
+		removeLabel = $[10];
+		size = $[11];
+		t1 = $[12];
+		t2 = $[13];
+	}
+	const status = t1 === void 0 ? "idle" : t1;
+	const progress = t2 === void 0 ? null : t2;
+	const uploading = status === "uploading";
+	let t3;
+	if ($[14] !== locale || $[15] !== size) {
+		t3 = size != null && formatFileSize(size, locale);
+		$[14] = locale;
+		$[15] = size;
+		$[16] = t3;
+	} else t3 = $[16];
+	let t4;
+	if ($[17] !== progress || $[18] !== uploading) {
+		t4 = uploading && progress != null && `${Math.round(progress)}%`;
+		$[17] = progress;
+		$[18] = uploading;
+		$[19] = t4;
+	} else t4 = $[19];
+	let t5;
+	if ($[20] !== t3 || $[21] !== t4) {
+		t5 = [t3, t4].filter(Boolean);
+		$[20] = t3;
+		$[21] = t4;
+		$[22] = t5;
+	} else t5 = $[22];
+	const meta = t5;
+	let t6;
+	if ($[23] !== className) {
+		t6 = cx("oui-file-item", className);
+		$[23] = className;
+		$[24] = t6;
+	} else t6 = $[24];
+	let t7;
+	if ($[25] !== icon) {
+		t7 = icon ?? /* @__PURE__ */ jsx(FileIcon, {});
+		$[25] = icon;
+		$[26] = t7;
+	} else t7 = $[26];
+	let t8;
+	if ($[27] !== t7) {
+		t8 = /* @__PURE__ */ jsx("span", {
+			className: "oui-file-item__icon",
+			children: t7
+		});
+		$[27] = t7;
+		$[28] = t8;
+	} else t8 = $[28];
+	let t9;
+	if ($[29] !== name) {
+		t9 = /* @__PURE__ */ jsx("span", {
+			className: "oui-file-item__name",
+			title: name,
+			children: name
+		});
+		$[29] = name;
+		$[30] = t9;
+	} else t9 = $[30];
+	let t10;
+	if ($[31] !== error || $[32] !== meta || $[33] !== status) {
+		t10 = status === "error" && error ? /* @__PURE__ */ jsx("span", {
+			className: "oui-file-item__meta",
+			role: "alert",
+			children: error
+		}) : meta.length > 0 && /* @__PURE__ */ jsx("span", {
+			className: "oui-file-item__meta",
+			children: meta.join(" · ")
+		});
+		$[31] = error;
+		$[32] = meta;
+		$[33] = status;
+		$[34] = t10;
+	} else t10 = $[34];
+	let t11;
+	if ($[35] !== name || $[36] !== progress || $[37] !== uploading) {
+		t11 = uploading && /* @__PURE__ */ jsx(Progress, {
+			size: "sm",
+			value: progress,
+			"aria-label": name
+		});
+		$[35] = name;
+		$[36] = progress;
+		$[37] = uploading;
+		$[38] = t11;
+	} else t11 = $[38];
+	let t12;
+	if ($[39] !== t10 || $[40] !== t11 || $[41] !== t9) {
+		t12 = /* @__PURE__ */ jsxs("div", {
+			className: "oui-file-item__body",
+			children: [
+				t9,
+				t10,
+				t11
+			]
+		});
+		$[39] = t10;
+		$[40] = t11;
+		$[41] = t9;
+		$[42] = t12;
+	} else t12 = $[42];
+	let t13;
+	if ($[43] !== status) {
+		t13 = status === "success" && /* @__PURE__ */ jsx(CircleCheckIcon, { className: "oui-file-item__done" });
+		$[43] = status;
+		$[44] = t13;
+	} else t13 = $[44];
+	let t14;
+	if ($[45] !== name || $[46] !== onRemove || $[47] !== removeLabel) {
+		t14 = onRemove && /* @__PURE__ */ jsx(IconButton, {
+			size: "sm",
+			"aria-label": removeLabel ?? `Remove ${name}`,
+			onClick: onRemove,
+			children: /* @__PURE__ */ jsx(XIcon, {})
+		});
+		$[45] = name;
+		$[46] = onRemove;
+		$[47] = removeLabel;
+		$[48] = t14;
+	} else t14 = $[48];
+	let t15;
+	if ($[49] !== actions || $[50] !== props || $[51] !== ref || $[52] !== status || $[53] !== t12 || $[54] !== t13 || $[55] !== t14 || $[56] !== t6 || $[57] !== t8) {
+		t15 = /* @__PURE__ */ jsxs("div", {
+			ref,
+			className: t6,
+			"data-status": status,
+			...props,
+			children: [
+				t8,
+				t12,
+				t13,
+				actions,
+				t14
+			]
+		});
+		$[49] = actions;
+		$[50] = props;
+		$[51] = ref;
+		$[52] = status;
+		$[53] = t12;
+		$[54] = t13;
+		$[55] = t14;
+		$[56] = t6;
+		$[57] = t8;
+		$[58] = t15;
+	} else t15 = $[58];
+	return t15;
+}
+var defaultLabels = { remove: (name) => `Remove ${name}` };
+var sameFile = (a, b) => a.name === b.name && a.size === b.size && a.lastModified === b.lastModified;
+/**
+* File field: a dropzone plus the list of chosen files. It only collects
+* `File` objects; upload them yourself and report progress through `fileState`.
+*/
+function FileUpload(t0) {
+	const $ = c(54);
+	const { value, defaultValue, onValueChange, accept, multiple, maxSize, maxFiles, onReject, fileState, size, icon, title, hint, label, description, error, required, disabled, name, id: idProp, className, locale, labels, ref } = t0;
+	const text = {
+		...defaultLabels,
+		...labels
+	};
+	let t1;
+	if ($[0] !== defaultValue) {
+		t1 = defaultValue ?? [];
+		$[0] = defaultValue;
+		$[1] = t1;
+	} else t1 = $[1];
+	const [inner, setInner] = React.useState(t1);
+	const files = value ?? inner;
+	const generatedId = React.useId();
+	const id = idProp ?? generatedId;
+	const descriptionId = description != null ? `${id}-description` : null;
+	const errorId = error ? `${id}-error` : null;
+	let t2;
+	if ($[2] !== descriptionId || $[3] !== errorId) {
+		t2 = cx(descriptionId, errorId) || void 0;
+		$[2] = descriptionId;
+		$[3] = errorId;
+		$[4] = t2;
+	} else t2 = $[4];
+	const describedBy = t2;
+	let t3;
+	if ($[5] !== onValueChange) {
+		t3 = (next) => {
+			setInner(next);
+			onValueChange?.(next);
+		};
+		$[5] = onValueChange;
+		$[6] = t3;
+	} else t3 = $[6];
+	const commit = t3;
+	let t4;
+	if ($[7] !== commit || $[8] !== files || $[9] !== maxFiles || $[10] !== multiple || $[11] !== onReject) {
+		t4 = (added) => {
+			if (!multiple) {
+				commit(added.slice(0, 1));
+				return;
+			}
+			const fresh = added.filter((file) => !files.some((existing) => sameFile(existing, file)));
+			const room = maxFiles == null ? fresh.length : Math.max(0, maxFiles - files.length);
+			if (fresh.length > room) onReject?.(fresh.slice(room).map(_temp2));
+			if (room > 0 && fresh.length > 0) commit([...files, ...fresh.slice(0, room)]);
+		};
+		$[7] = commit;
+		$[8] = files;
+		$[9] = maxFiles;
+		$[10] = multiple;
+		$[11] = onReject;
+		$[12] = t4;
+	} else t4 = $[12];
+	const add = t4;
+	let t5;
+	if ($[13] !== className) {
+		t5 = cx("oui-field", "oui-file-upload", className);
+		$[13] = className;
+		$[14] = t5;
+	} else t5 = $[14];
+	const t6 = disabled || void 0;
+	const t7 = error ? "" : void 0;
+	let t8;
+	if ($[15] !== id || $[16] !== label || $[17] !== required) {
+		t8 = label != null && /* @__PURE__ */ jsxs("label", {
+			htmlFor: id,
+			className: "oui-field__label",
+			children: [label, required && /* @__PURE__ */ jsx("span", {
+				className: "oui-field__required",
+				"aria-hidden": true,
+				children: "*"
+			})]
+		});
+		$[15] = id;
+		$[16] = label;
+		$[17] = required;
+		$[18] = t8;
+	} else t8 = $[18];
+	const t9 = Boolean(error);
+	let t10;
+	if ($[19] !== describedBy || $[20] !== id || $[21] !== name || $[22] !== required) {
+		t10 = {
+			id,
+			name,
+			required,
+			"aria-describedby": describedBy
+		};
+		$[19] = describedBy;
+		$[20] = id;
+		$[21] = name;
+		$[22] = required;
+		$[23] = t10;
+	} else t10 = $[23];
+	let t11;
+	if ($[24] !== accept || $[25] !== add || $[26] !== disabled || $[27] !== files || $[28] !== hint || $[29] !== icon || $[30] !== maxSize || $[31] !== multiple || $[32] !== onReject || $[33] !== ref || $[34] !== size || $[35] !== t10 || $[36] !== t9 || $[37] !== title) {
+		t11 = /* @__PURE__ */ jsx(Dropzone, {
+			ref,
+			files,
+			onFiles: add,
+			onReject,
+			accept,
+			multiple,
+			maxSize,
+			disabled,
+			invalid: t9,
+			size,
+			icon,
+			title,
+			hint,
+			inputProps: t10
+		});
+		$[24] = accept;
+		$[25] = add;
+		$[26] = disabled;
+		$[27] = files;
+		$[28] = hint;
+		$[29] = icon;
+		$[30] = maxSize;
+		$[31] = multiple;
+		$[32] = onReject;
+		$[33] = ref;
+		$[34] = size;
+		$[35] = t10;
+		$[36] = t9;
+		$[37] = title;
+		$[38] = t11;
+	} else t11 = $[38];
+	const t12 = files.length > 0 && /* @__PURE__ */ jsx("ul", {
+		className: "oui-file-upload__list",
+		children: files.map((file_1, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(FileItem, {
+			name: file_1.name,
+			size: file_1.size,
+			locale,
+			removeLabel: text.remove(file_1.name),
+			onRemove: disabled ? void 0 : () => commit(files.filter((_, position) => position !== index)),
+			...fileState?.(file_1)
+		}) }, `${file_1.name}-${file_1.size}-${file_1.lastModified}`))
+	});
+	let t13;
+	if ($[39] !== description || $[40] !== id) {
+		t13 = description != null && /* @__PURE__ */ jsx("p", {
+			id: `${id}-description`,
+			className: "oui-field__description",
+			children: description
+		});
+		$[39] = description;
+		$[40] = id;
+		$[41] = t13;
+	} else t13 = $[41];
+	let t14;
+	if ($[42] !== error || $[43] !== id) {
+		t14 = error && /* @__PURE__ */ jsx("div", {
+			id: `${id}-error`,
+			className: "oui-field__error",
+			children: error
+		});
+		$[42] = error;
+		$[43] = id;
+		$[44] = t14;
+	} else t14 = $[44];
+	let t15;
+	if ($[45] !== t11 || $[46] !== t12 || $[47] !== t13 || $[48] !== t14 || $[49] !== t5 || $[50] !== t6 || $[51] !== t7 || $[52] !== t8) {
+		t15 = /* @__PURE__ */ jsxs("div", {
+			className: t5,
+			"data-disabled": t6,
+			"data-invalid": t7,
+			children: [
+				t8,
+				t11,
+				t12,
+				t13,
+				t14
+			]
+		});
+		$[45] = t11;
+		$[46] = t12;
+		$[47] = t13;
+		$[48] = t14;
+		$[49] = t5;
+		$[50] = t6;
+		$[51] = t7;
+		$[52] = t8;
+		$[53] = t15;
+	} else t15 = $[53];
+	return t15;
+}
+function _temp2(file_0) {
+	return {
+		file: file_0,
+		reason: "count"
+	};
+}
+//#endregion
+export { Dropzone, FileItem, FileUpload, formatFileSize };
+
+//# sourceMappingURL=FileUpload.js.map