beez-ui 0.7.0 → 0.8.0

package/dist/components/file-upload.js

@@ -0,0 +1,678 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* File upload building blocks: a drop zone that validates picked or dropped files, and a list of
+* files with upload progress, failure and retry. Uploading itself stays with the application.
+*/
+import { useId, useRef, useState } from "react";
+import { AnimatePresence } from "motion/react";
+import { CheckCircle2Icon, FileIcon, Trash2Icon, UploadCloudIcon, XCircleIcon } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { classifyFiles } from "../lib/file-acceptance.js";
+import { formatFileSize } from "../lib/format-file-size.js";
+import { AnimatedListItem } from "./animated-list-item.js";
+import { Button } from "./button.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const COMPLETE_PROGRESS = 100;
+const FILE_UPLOAD_DROP_ZONE_DEFAULT_LABELS = {
+	uploadAction: "Elegí un archivo",
+	dragAndDrop: "o arrastralo acá",
+	input: "Subir archivos"
+};
+/**
+* Renders the drop zone. The action button and a click anywhere on the zone open the native file
+* picker; the same file can be picked again after a failure.
+* @param props - Constraints, callbacks and optional copy.
+* @returns The drop zone.
+*/
+export function FileUploadDropZone(t0) {
+	const $ = _c(63);
+	const { hint, isDisabled: t1, accept, allowsMultiple: t2, maxSize, onDropFiles, onDropUnacceptedFiles, onSizeLimitExceed, inputId, labels, className } = t0;
+	const isDisabled = t1 === undefined ? false : t1;
+	const allowsMultiple = t2 === undefined ? true : t2;
+	let t3;
+	if ($[0] !== labels) {
+		t3 = {
+			...FILE_UPLOAD_DROP_ZONE_DEFAULT_LABELS,
+			...labels
+		};
+		$[0] = labels;
+		$[1] = t3;
+	} else {
+		t3 = $[1];
+	}
+	const resolvedLabels = t3;
+	const generatedInputId = useId();
+	const hintId = useId();
+	const resolvedInputId = inputId ?? generatedInputId;
+	const inputRef = useRef(null);
+	const [isInvalid, setIsInvalid] = useState(false);
+	const [isDraggingOver, setIsDraggingOver] = useState(false);
+	let t4;
+	if ($[2] !== accept || $[3] !== allowsMultiple || $[4] !== maxSize || $[5] !== onDropFiles || $[6] !== onDropUnacceptedFiles || $[7] !== onSizeLimitExceed) {
+		t4 = (files) => {
+			const { accepted, unaccepted, oversized } = classifyFiles(files, {
+				accept,
+				maxSize,
+				allowsMultiple
+			});
+			setIsInvalid(unaccepted.length > 0 || oversized.length > 0);
+			if (oversized.length > 0) {
+				onSizeLimitExceed?.(oversized);
+			}
+			if (accepted.length > 0) {
+				onDropFiles?.(accepted);
+			}
+			if (unaccepted.length > 0) {
+				onDropUnacceptedFiles?.(unaccepted);
+			}
+			if (inputRef.current) {
+				inputRef.current.value = "";
+			}
+		};
+		$[2] = accept;
+		$[3] = allowsMultiple;
+		$[4] = maxSize;
+		$[5] = onDropFiles;
+		$[6] = onDropUnacceptedFiles;
+		$[7] = onSizeLimitExceed;
+		$[8] = t4;
+	} else {
+		t4 = $[8];
+	}
+	const processFiles = t4;
+	let t5;
+	if ($[9] !== isDisabled) {
+		t5 = (event) => {
+			event.preventDefault();
+			if (!isDisabled) {
+				setIsDraggingOver(true);
+			}
+		};
+		$[9] = isDisabled;
+		$[10] = t5;
+	} else {
+		t5 = $[10];
+	}
+	const handleDragOver = t5;
+	let t6;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = (event_0) => {
+			event_0.preventDefault();
+			setIsDraggingOver(false);
+		};
+		$[11] = t6;
+	} else {
+		t6 = $[11];
+	}
+	const handleDragLeave = t6;
+	let t7;
+	if ($[12] !== isDisabled || $[13] !== processFiles) {
+		t7 = (event_1) => {
+			event_1.preventDefault();
+			setIsDraggingOver(false);
+			if (!isDisabled) {
+				processFiles(Array.from(event_1.dataTransfer.files));
+			}
+		};
+		$[12] = isDisabled;
+		$[13] = processFiles;
+		$[14] = t7;
+	} else {
+		t7 = $[14];
+	}
+	const handleDrop = t7;
+	let t8;
+	if ($[15] !== isDisabled) {
+		t8 = () => {
+			if (!isDisabled) {
+				inputRef.current?.click();
+			}
+		};
+		$[15] = isDisabled;
+		$[16] = t8;
+	} else {
+		t8 = $[16];
+	}
+	const openFilePicker = t8;
+	const t9 = isDraggingOver || undefined;
+	const t10 = isDisabled || undefined;
+	const t11 = isInvalid || undefined;
+	let t12;
+	if ($[17] !== className) {
+		t12 = cn("relative flex cursor-pointer flex-col items-center gap-3 rounded-xl bg-background px-6 py-4 text-muted-foreground ring-1 ring-border transition-[box-shadow,background-color] ring-inset data-dragging:ring-2 data-dragging:ring-primary data-disabled:cursor-not-allowed data-disabled:bg-muted", className);
+		$[17] = className;
+		$[18] = t12;
+	} else {
+		t12 = $[18];
+	}
+	const t13 = isDisabled && "opacity-50";
+	let t14;
+	if ($[19] !== t13) {
+		t14 = cn("inline-flex size-10 items-center justify-center rounded-lg border border-border bg-background shadow-xs", t13);
+		$[19] = t13;
+		$[20] = t14;
+	} else {
+		t14 = $[20];
+	}
+	let t15;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /* @__PURE__ */ _jsx(UploadCloudIcon, {
+			"aria-hidden": true,
+			className: "size-5 text-foreground"
+		});
+		$[21] = t15;
+	} else {
+		t15 = $[21];
+	}
+	let t16;
+	if ($[22] !== t14) {
+		t16 = /* @__PURE__ */ _jsx("span", {
+			className: t14,
+			children: t15
+		});
+		$[22] = t14;
+		$[23] = t16;
+	} else {
+		t16 = $[23];
+	}
+	const t17 = hint ? hintId : undefined;
+	let t18;
+	if ($[24] !== processFiles) {
+		t18 = (event_2) => processFiles(Array.from(event_2.target.files ?? []));
+		$[24] = processFiles;
+		$[25] = t18;
+	} else {
+		t18 = $[25];
+	}
+	let t19;
+	if ($[26] !== accept || $[27] !== allowsMultiple || $[28] !== isDisabled || $[29] !== resolvedInputId || $[30] !== resolvedLabels.input || $[31] !== t17 || $[32] !== t18) {
+		t19 = /* @__PURE__ */ _jsx("input", {
+			ref: inputRef,
+			id: resolvedInputId,
+			type: "file",
+			className: "sr-only",
+			disabled: isDisabled,
+			"aria-label": resolvedLabels.input,
+			"aria-describedby": t17,
+			accept,
+			multiple: allowsMultiple,
+			onChange: t18,
+			onClick: _temp
+		});
+		$[26] = accept;
+		$[27] = allowsMultiple;
+		$[28] = isDisabled;
+		$[29] = resolvedInputId;
+		$[30] = resolvedLabels.input;
+		$[31] = t17;
+		$[32] = t18;
+		$[33] = t19;
+	} else {
+		t19 = $[33];
+	}
+	let t20;
+	if ($[34] !== openFilePicker) {
+		t20 = (event_4) => {
+			event_4.stopPropagation();
+			openFilePicker();
+		};
+		$[34] = openFilePicker;
+		$[35] = t20;
+	} else {
+		t20 = $[35];
+	}
+	let t21;
+	if ($[36] !== isDisabled || $[37] !== resolvedLabels.uploadAction || $[38] !== t20) {
+		t21 = /* @__PURE__ */ _jsx(Button, {
+			className: "h-auto p-0 font-semibold",
+			disabled: isDisabled,
+			type: "button",
+			variant: "link",
+			onClick: t20,
+			children: resolvedLabels.uploadAction
+		});
+		$[36] = isDisabled;
+		$[37] = resolvedLabels.uploadAction;
+		$[38] = t20;
+		$[39] = t21;
+	} else {
+		t21 = $[39];
+	}
+	let t22;
+	if ($[40] !== resolvedLabels.dragAndDrop) {
+		t22 = /* @__PURE__ */ _jsx("span", {
+			className: "text-sm max-md:hidden",
+			children: resolvedLabels.dragAndDrop
+		});
+		$[40] = resolvedLabels.dragAndDrop;
+		$[41] = t22;
+	} else {
+		t22 = $[41];
+	}
+	let t23;
+	if ($[42] !== t19 || $[43] !== t21 || $[44] !== t22) {
+		t23 = /* @__PURE__ */ _jsxs("div", {
+			className: "flex flex-wrap items-center justify-center gap-1",
+			children: [
+				t19,
+				t21,
+				t22
+			]
+		});
+		$[42] = t19;
+		$[43] = t21;
+		$[44] = t22;
+		$[45] = t23;
+	} else {
+		t23 = $[45];
+	}
+	let t24;
+	if ($[46] !== hint || $[47] !== hintId || $[48] !== isInvalid) {
+		t24 = hint ? /* @__PURE__ */ _jsx("p", {
+			id: hintId,
+			className: cn("m-0 text-xs transition-colors", isInvalid && "text-destructive"),
+			children: hint
+		}) : null;
+		$[46] = hint;
+		$[47] = hintId;
+		$[48] = isInvalid;
+		$[49] = t24;
+	} else {
+		t24 = $[49];
+	}
+	let t25;
+	if ($[50] !== t23 || $[51] !== t24) {
+		t25 = /* @__PURE__ */ _jsxs("div", {
+			className: "flex flex-col gap-1 text-center",
+			children: [t23, t24]
+		});
+		$[50] = t23;
+		$[51] = t24;
+		$[52] = t25;
+	} else {
+		t25 = $[52];
+	}
+	let t26;
+	if ($[53] !== handleDragOver || $[54] !== handleDrop || $[55] !== openFilePicker || $[56] !== t10 || $[57] !== t11 || $[58] !== t12 || $[59] !== t16 || $[60] !== t25 || $[61] !== t9) {
+		t26 = /* @__PURE__ */ _jsxs("div", {
+			"data-slot": "file-upload-drop-zone",
+			"data-dragging": t9,
+			"data-disabled": t10,
+			"data-invalid": t11,
+			className: t12,
+			onClick: openFilePicker,
+			onDragEnter: handleDragOver,
+			onDragOver: handleDragOver,
+			onDragLeave: handleDragLeave,
+			onDragEnd: handleDragLeave,
+			onDrop: handleDrop,
+			children: [t16, t25]
+		});
+		$[53] = handleDragOver;
+		$[54] = handleDrop;
+		$[55] = openFilePicker;
+		$[56] = t10;
+		$[57] = t11;
+		$[58] = t12;
+		$[59] = t16;
+		$[60] = t25;
+		$[61] = t9;
+		$[62] = t26;
+	} else {
+		t26 = $[62];
+	}
+	return t26;
+}
+function _temp(event_3) {
+	return event_3.stopPropagation();
+}
+const FILE_UPLOAD_ITEM_DEFAULT_LABELS = {
+	complete: "Completado",
+	uploading: "Subiendo...",
+	failed: "Falló",
+	retry: "Reintentar",
+	delete: "Eliminar",
+	progress: "Progreso de subida"
+};
+/**
+* Renders one file with its size, status, progress bar, delete action and, after a failure, a
+* retry action. Place it inside `FileUploadList` so additions and removals animate.
+* @param props - File metadata, progress, callbacks and optional copy.
+* @returns The list item.
+*/
+export function FileUploadItem(t0) {
+	const $ = _c(46);
+	const { name, size, progress, failed: t1, onDelete, isDeleteDisabled, onRetry, locale, labels, className } = t0;
+	const failed = t1 === undefined ? false : t1;
+	let t2;
+	if ($[0] !== labels) {
+		t2 = {
+			...FILE_UPLOAD_ITEM_DEFAULT_LABELS,
+			...labels
+		};
+		$[0] = labels;
+		$[1] = t2;
+	} else {
+		t2 = $[1];
+	}
+	const resolvedLabels = t2;
+	const clampedProgress = Math.min(Math.max(progress, 0), COMPLETE_PROGRESS);
+	const isComplete = clampedProgress === COMPLETE_PROGRESS && !failed;
+	const t3 = failed || undefined;
+	let t4;
+	if ($[2] !== className) {
+		t4 = cn("relative flex w-full min-w-0 gap-3 rounded-xl bg-background p-4 ring-1 ring-border ring-inset data-failed:ring-2 data-failed:ring-destructive", className);
+		$[2] = className;
+		$[3] = t4;
+	} else {
+		t4 = $[3];
+	}
+	let t5;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ _jsx(FileIcon, {
+			"aria-hidden": true,
+			className: "size-10 shrink-0 stroke-[1.25] text-muted-foreground"
+		});
+		$[4] = t5;
+	} else {
+		t5 = $[4];
+	}
+	let t6;
+	if ($[5] !== name) {
+		t6 = /* @__PURE__ */ _jsx("p", {
+			className: "m-0 max-w-full text-sm font-medium break-words text-foreground",
+			children: name
+		});
+		$[5] = name;
+		$[6] = t6;
+	} else {
+		t6 = $[6];
+	}
+	let t7;
+	if ($[7] !== locale || $[8] !== size) {
+		t7 = formatFileSize(size, { locale });
+		$[7] = locale;
+		$[8] = size;
+		$[9] = t7;
+	} else {
+		t7 = $[9];
+	}
+	let t8;
+	if ($[10] !== t7) {
+		t8 = /* @__PURE__ */ _jsx("span", {
+			className: "truncate whitespace-nowrap text-muted-foreground",
+			children: t7
+		});
+		$[10] = t7;
+		$[11] = t8;
+	} else {
+		t8 = $[11];
+	}
+	let t9;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ _jsx("span", {
+			"aria-hidden": true,
+			className: "h-3 w-px rounded-full bg-border"
+		});
+		$[12] = t9;
+	} else {
+		t9 = $[12];
+	}
+	let t10;
+	if ($[13] !== failed || $[14] !== isComplete || $[15] !== resolvedLabels.complete || $[16] !== resolvedLabels.failed || $[17] !== resolvedLabels.uploading) {
+		t10 = /* @__PURE__ */ _jsx("span", {
+			className: "flex items-center gap-1 font-medium",
+			role: "status",
+			children: failed ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(XCircleIcon, {
+				"aria-hidden": true,
+				className: "size-4 text-destructive"
+			}), /* @__PURE__ */ _jsx("span", {
+				className: "text-destructive",
+				children: resolvedLabels.failed
+			})] }) : isComplete ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(CheckCircle2Icon, {
+				"aria-hidden": true,
+				className: "size-4 text-green-600 dark:text-green-500"
+			}), /* @__PURE__ */ _jsx("span", {
+				className: "text-green-700 dark:text-green-400",
+				children: resolvedLabels.complete
+			})] }) : /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(UploadCloudIcon, {
+				"aria-hidden": true,
+				className: "size-4 text-muted-foreground"
+			}), /* @__PURE__ */ _jsx("span", {
+				className: "text-muted-foreground",
+				children: resolvedLabels.uploading
+			})] })
+		});
+		$[13] = failed;
+		$[14] = isComplete;
+		$[15] = resolvedLabels.complete;
+		$[16] = resolvedLabels.failed;
+		$[17] = resolvedLabels.uploading;
+		$[18] = t10;
+	} else {
+		t10 = $[18];
+	}
+	let t11;
+	if ($[19] !== t10 || $[20] !== t8) {
+		t11 = /* @__PURE__ */ _jsxs("div", {
+			className: "mt-0.5 flex items-center gap-2 text-sm",
+			children: [
+				t8,
+				t9,
+				t10
+			]
+		});
+		$[19] = t10;
+		$[20] = t8;
+		$[21] = t11;
+	} else {
+		t11 = $[21];
+	}
+	let t12;
+	if ($[22] !== t11 || $[23] !== t6) {
+		t12 = /* @__PURE__ */ _jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [t6, t11]
+		});
+		$[22] = t11;
+		$[23] = t6;
+		$[24] = t12;
+	} else {
+		t12 = $[24];
+	}
+	let t13;
+	if ($[25] !== isDeleteDisabled || $[26] !== name || $[27] !== onDelete || $[28] !== resolvedLabels.delete) {
+		t13 = onDelete ? /* @__PURE__ */ _jsx(Button, {
+			"aria-label": `${resolvedLabels.delete} ${name}`,
+			className: "-mt-2 -mr-2 self-start text-muted-foreground",
+			disabled: isDeleteDisabled,
+			size: "icon-sm",
+			type: "button",
+			variant: "ghost",
+			onClick: onDelete,
+			children: /* @__PURE__ */ _jsx(Trash2Icon, { "aria-hidden": true })
+		}) : null;
+		$[25] = isDeleteDisabled;
+		$[26] = name;
+		$[27] = onDelete;
+		$[28] = resolvedLabels.delete;
+		$[29] = t13;
+	} else {
+		t13 = $[29];
+	}
+	let t14;
+	if ($[30] !== t12 || $[31] !== t13) {
+		t14 = /* @__PURE__ */ _jsxs("div", {
+			className: "flex w-full min-w-0 flex-1",
+			children: [t12, t13]
+		});
+		$[30] = t12;
+		$[31] = t13;
+		$[32] = t14;
+	} else {
+		t14 = $[32];
+	}
+	let t15;
+	if ($[33] !== clampedProgress || $[34] !== failed || $[35] !== onRetry || $[36] !== resolvedLabels.progress || $[37] !== resolvedLabels.retry) {
+		t15 = failed ? onRetry ? /* @__PURE__ */ _jsx(Button, {
+			className: "mt-1.5 h-auto p-0 text-destructive",
+			size: "sm",
+			type: "button",
+			variant: "link",
+			onClick: onRetry,
+			children: resolvedLabels.retry
+		}) : null : /* @__PURE__ */ _jsxs("div", {
+			className: "mt-1 flex w-full items-center gap-3",
+			children: [/* @__PURE__ */ _jsx("div", {
+				"aria-label": resolvedLabels.progress,
+				"aria-valuemax": COMPLETE_PROGRESS,
+				"aria-valuemin": 0,
+				"aria-valuenow": clampedProgress,
+				className: "h-2 flex-1 overflow-hidden rounded-full bg-muted",
+				role: "progressbar",
+				children: /* @__PURE__ */ _jsx("div", {
+					className: "h-full rounded-full bg-primary transition-[width] duration-150",
+					style: { width: `${clampedProgress}%` }
+				})
+			}), /* @__PURE__ */ _jsxs("span", {
+				className: "text-sm font-medium text-foreground tabular-nums",
+				children: [clampedProgress, "%"]
+			})]
+		});
+		$[33] = clampedProgress;
+		$[34] = failed;
+		$[35] = onRetry;
+		$[36] = resolvedLabels.progress;
+		$[37] = resolvedLabels.retry;
+		$[38] = t15;
+	} else {
+		t15 = $[38];
+	}
+	let t16;
+	if ($[39] !== t14 || $[40] !== t15) {
+		t16 = /* @__PURE__ */ _jsxs("div", {
+			className: "flex min-w-0 flex-1 flex-col items-start",
+			children: [t14, t15]
+		});
+		$[39] = t14;
+		$[40] = t15;
+		$[41] = t16;
+	} else {
+		t16 = $[41];
+	}
+	let t17;
+	if ($[42] !== t16 || $[43] !== t3 || $[44] !== t4) {
+		t17 = /* @__PURE__ */ _jsxs(AnimatedListItem, {
+			"data-slot": "file-upload-item",
+			"data-failed": t3,
+			className: t4,
+			children: [t5, t16]
+		});
+		$[42] = t16;
+		$[43] = t3;
+		$[44] = t4;
+		$[45] = t17;
+	} else {
+		t17 = $[45];
+	}
+	return t17;
+}
+/**
+* Lays out a drop zone and its file list.
+* @param props - Native `div` attributes.
+* @returns The container.
+*/
+export function FileUpload(t0) {
+	const $ = _c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("flex w-full min-w-0 flex-col gap-4", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx("div", {
+			"data-slot": "file-upload",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
+}
+/**
+* Lists `FileUploadItem`s; only files added after the first render animate in.
+* @param props - Native `ul` attributes and the items.
+* @returns The list.
+*/
+export function FileUploadList(t0) {
+	const $ = _c(12);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = cn("m-0 flex w-full min-w-0 list-none flex-col gap-3 p-0", className);
+		$[4] = className;
+		$[5] = t1;
+	} else {
+		t1 = $[5];
+	}
+	let t2;
+	if ($[6] !== children) {
+		t2 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			initial: false,
+			children
+		});
+		$[6] = children;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	let t3;
+	if ($[8] !== props || $[9] !== t1 || $[10] !== t2) {
+		t3 = /* @__PURE__ */ _jsx("ul", {
+			"data-slot": "file-upload-list",
+			className: t1,
+			...props,
+			children: t2
+		});
+		$[8] = props;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+	} else {
+		t3 = $[11];
+	}
+	return t3;
+}

package/dist/components/info-popover.d.ts

@@ -0,0 +1,23 @@
+/** Icon button that toggles a short explanatory message, for inline help next to labels. */
+import { type ReactNode } from "react";
+export interface InfoPopoverLabels {
+    /** Accessible name of the close button inside the message. */
+    close?: string;
+    /** Accessible name of the icon-only trigger. */
+    trigger?: string;
+}
+export interface InfoPopoverProps {
+    /** Explanation shown inside the popover. */
+    message: ReactNode;
+    labels?: InfoPopoverLabels;
+    side?: "top" | "right" | "bottom" | "left";
+    className?: string;
+    contentClassName?: string;
+}
+/**
+ * Renders an info icon that opens the message on click or tap, unlike a hover tooltip, so it
+ * works on touch devices. Escape, an outside click or the close button dismiss it.
+ * @param props - Message, optional labels, side and class names.
+ * @returns The trigger with its popover.
+ */
+export declare function InfoPopover({ message, labels, side, className, contentClassName }: InfoPopoverProps): import("react").JSX.Element;