@povio/ui 5.0.0-rc.8 → 6.0.0-rc.1

package/dist/{FileUpload-CgNDIvzg.js → FileUpload-CG60c6wM.js}

@@ -1,23 +1,20 @@
 import { t as createLucideIcon } from "./createLucideIcon-LcezOE4z.js";
-import { t as UIConfig } from "./uiConfig.context-BS3r_kTS.js";
-import { t as Upload } from "./upload-CXU83BJ4.js";
+import { t as UIConfig } from "./uiConfig.context-CT9EVqC5.js";
+import { n as $070c0dd15dc89b58$export$3c6489d84dc98b6, r as Upload, t as $b325d7bd7e74496a$export$6fb4a10d2c950550 } from "./FileTrigger-DBX1Io6E.js";
 import { t as X } from "./x-B6vfz8Ps.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
 import { t as IconSlot } from "./IconSlot-DSK7qNxc.js";
-import { n as $070c0dd15dc89b58$export$3c6489d84dc98b6, t as $b325d7bd7e74496a$export$6fb4a10d2c950550 } from "./FileTrigger-Cthk5_Wp.js";
 import { t as Typography } from "./Typography-LU4z2pR1.js";
-import { t as Button } from "./Button-BPTvffuk.js";
-import { InlineIconButton } from "./components/inline-icon-button.js";
-import { TextButton } from "./components/text-button.js";
-import { i as $a8ea2faf2ebe4d2f$re_export$useLabels, r as $a8ea2faf2ebe4d2f$re_export$mergeRefs } from "./import-BE0r63d8.js";
-import { t as FieldController } from "./form.binding-CG1RPv6o.js";
-import { t as FormField } from "./FormField-AY25LzbW.js";
-import "./i18n-CX2EjhJI.js";
+import { t as Button } from "./Button-DER_6cxv.js";
+import { IconButton } from "./components/icon-button.js";
+import { i as $a8ea2faf2ebe4d2f$re_export$useLabels } from "./import-D_3dPATF.js";
+import { t as FormField } from "./FormField-D7KKJ6kG.js";
+import "./i18n-BjNKHh_D.js";
 import { t as FileUtils } from "./file.utils-DqQxnuAm.js";
-import { t as Progress } from "./Progress-Du30L4_s.js";
+import { t as Progress } from "./Progress-De76pCfX.js";
 import { t as fileUploadDropZoneDefinition } from "./fileUpload.cva-ujmStxB1.js";
-import { memo, useCallback, useMemo, useState } from "react";
+import { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/circle-alert.mjs
@@ -112,18 +109,18 @@ const FileUploadContentError = ({ variant, as, isDisabled, state, browseText, fi
 				className: clsx("flex min-w-0 max-w-full flex-grow items-center gap-file-upload-content-gap-icon-to-content", variant === "vertical" && "flex-col", variant === "horizontal" && "flex-row", isDisabled && "opacity-50"),
 				children: [/* @__PURE__ */ jsx(IconSlot, {
 					icon: CircleAlert,
-					className: "text-surface-warning-base"
+					className: "text-status-warning-accent"
 				}), /* @__PURE__ */ jsxs("div", {
 					className: clsx("flex flex-col gap-file-upload-content-gap-text-to-text", variant === "vertical" && "max-w-full items-center", variant === "horizontal" && "max-w-[calc(100%_-_32px)]"),
 					children: [/* @__PURE__ */ jsx(Typography, {
 						size: "large",
 						as: "span",
-						className: clsx("self-stretch truncate text-surface-default-card-foreground font-bold", variant === "vertical" && "text-center"),
+						className: clsx("self-stretch truncate text-content-primary font-bold", variant === "vertical" && "text-center"),
 						children: state.file?.name ?? state.displayName ?? ""
 					}), /* @__PURE__ */ jsx(Typography, {
 						size: singleFile ? "small" : "small",
 						as: "span",
-						className: clsx("text-surface-default-foreground", variant === "vertical" && "text-center"),
+						className: clsx("text-content-secondary", variant === "vertical" && "text-center"),
 						children: state.error?.serverMessage ?? state.error?.message
 					})]
 				})]
@@ -131,27 +128,35 @@ const FileUploadContentError = ({ variant, as, isDisabled, state, browseText, fi
 				className: clsx("flex flex-none items-center justify-end", variant === "vertical" && as === "button" && "flex-col", as === "link" && "gap-file-upload-content-gap-text-to-text", as === "button" && "gap-file-upload-content-gap-content-to-button"),
 				children: as === "link" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [fileTriggerProps && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx($b325d7bd7e74496a$export$6fb4a10d2c950550, {
 					...fileTriggerProps,
-					children: /* @__PURE__ */ jsx(TextButton, {
-						className: "text-interactive-primary-background",
+					children: /* @__PURE__ */ jsx(Button, {
+						className: "text-interactive-subtle-primary-foreground",
+						variant: "text",
+						width: "hug",
 						children: browseText ?? ""
 					})
 				}), /* @__PURE__ */ jsx(Typography, {
 					size: "small",
 					as: "span",
-					className: "text-surface-default-foreground",
+					className: "text-content-secondary",
 					children: t(($) => $.ui.fileUpload.or)
-				})] }), removeWithIcon ? /* @__PURE__ */ jsx(InlineIconButton, {
+				})] }), removeWithIcon ? /* @__PURE__ */ jsx(IconButton, {
 					label: "Cancel",
 					color: "secondary",
 					onPress: () => {
 						onRemove(state.id ?? "");
 					},
-					icon: X
-				}) : /* @__PURE__ */ jsx(TextButton, {
-					className: "text-interactive-primary-background lowercase",
+					icon: X,
+					variant: "text",
+					width: "hug",
+					disableTooltip: true,
+					size: "sm"
+				}) : /* @__PURE__ */ jsx(Button, {
+					className: "text-interactive-subtle-primary-foreground lowercase",
 					onPress: () => {
 						onRemove(state.id ?? "");
 					},
+					variant: "text",
+					width: "hug",
 					children: t(($) => $.ui.fileUpload.removeFile)
 				})] }) : /* @__PURE__ */ jsxs("div", {
 					className: "flex items-center justify-center gap-file-upload-content-gap-button-to-button self-stretch",
@@ -165,18 +170,24 @@ const FileUploadContentError = ({ variant, as, isDisabled, state, browseText, fi
 							isDisabled,
 							children: browseText ?? ""
 						})
-					}), removeWithIcon ? /* @__PURE__ */ jsx(InlineIconButton, {
+					}), removeWithIcon ? /* @__PURE__ */ jsx(IconButton, {
 						label: "Cancel",
 						color: "secondary",
 						onPress: () => {
 							onRemove(state.id ?? "");
 						},
-						icon: X
-					}) : /* @__PURE__ */ jsx(TextButton, {
+						icon: X,
+						variant: "text",
+						width: "hug",
+						disableTooltip: true,
+						size: "sm"
+					}) : /* @__PURE__ */ jsx(Button, {
 						color: "secondary",
 						onPress: () => {
 							onRemove(state.id ?? "");
 						},
+						variant: "text",
+						width: "hug",
 						children: t(($) => $.ui.fileUpload.removeFile)
 					})]
 				})
@@ -197,18 +208,18 @@ const FileUploadContentFilled = ({ variant, as, isDisabled, state, browseText, f
 				className: clsx("flex min-w-0 max-w-full grow items-center gap-file-upload-content-gap-icon-to-content", variant === "vertical" && "flex-col", variant === "horizontal" && "flex-row", isDisabled && "opacity-50"),
 				children: [/* @__PURE__ */ jsx(IconSlot, {
 					icon: CircleCheckBig,
-					className: "text-surface-default-card-foreground"
+					className: "text-content-primary"
 				}), /* @__PURE__ */ jsxs("div", {
 					className: clsx("flex flex-col gap-file-upload-content-gap-text-to-text", variant === "vertical" && "max-w-full items-center", variant === "horizontal" && "max-w-[calc(100%-32px)]"),
 					children: [/* @__PURE__ */ jsx(Typography, {
 						size: "large",
 						as: "span",
-						className: "self-stretch truncate text-center text-surface-default-card-foreground font-bold",
+						className: "self-stretch truncate text-center text-content-primary font-bold",
 						children: state.file?.name ?? state.displayName ?? ""
 					}), /* @__PURE__ */ jsx(Typography, {
 						size: singleFile ? "small" : "small",
 						as: "span",
-						className: "text-surface-default-foreground",
+						className: "text-content-secondary",
 						children: FileUtils.getFileDisplaySize(state)
 					})]
 				})]
@@ -216,28 +227,36 @@ const FileUploadContentFilled = ({ variant, as, isDisabled, state, browseText, f
 				className: clsx("flex flex-none items-center justify-end", variant === "vertical" && as === "button" && "flex-col", as === "link" && variant === "vertical" && "gap-file-upload-content-gap-text-to-text", as === "button" && variant === "vertical" && "gap-file-upload-content-gap-content-to-button", variant === "horizontal" && "gap-file-upload-content-gap-button-to-button"),
 				children: as === "link" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [fileTriggerProps && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx($b325d7bd7e74496a$export$6fb4a10d2c950550, {
 					...fileTriggerProps,
-					children: /* @__PURE__ */ jsx(TextButton, {
-						className: clsx("text-interactive-primary-background", variant === "vertical" && "[&>span>span]:font-medium!"),
+					children: /* @__PURE__ */ jsx(Button, {
+						className: clsx("text-interactive-subtle-primary-foreground", variant === "vertical" && "[&>span>span]:font-medium!"),
+						variant: "text",
+						width: "hug",
 						children: browseText ?? ""
 					})
 				}), variant === "vertical" && /* @__PURE__ */ jsx(Typography, {
 					size: "small",
 					as: "span",
-					className: "text-surface-default-foreground",
+					className: "text-content-secondary",
 					children: t(($) => $.ui.fileUpload.or)
-				})] }), removeWithIcon ? /* @__PURE__ */ jsx(InlineIconButton, {
+				})] }), removeWithIcon ? /* @__PURE__ */ jsx(IconButton, {
 					label: "Cancel",
 					color: "secondary",
 					onPress: () => {
 						onRemove(state.id ?? "");
 					},
-					icon: X
-				}) : /* @__PURE__ */ jsx(TextButton, {
-					className: clsx(variant === "vertical" && "text-interactive-primary-background lowercase [&>span>span]:font-medium!"),
+					icon: X,
+					variant: "text",
+					width: "hug",
+					disableTooltip: true,
+					size: "sm"
+				}) : /* @__PURE__ */ jsx(Button, {
+					className: clsx(variant === "vertical" && "text-interactive-subtle-primary-foreground lowercase [&>span>span]:font-medium!"),
 					color: variant === "horizontal" ? "secondary" : "primary",
 					onPress: () => {
 						onRemove(state.id ?? "");
 					},
+					variant: "text",
+					width: "hug",
 					children: t(($) => $.ui.fileUpload.removeFile)
 				})] }) : /* @__PURE__ */ jsxs("div", {
 					className: "flex items-center justify-center gap-file-upload-content-gap-button-to-button self-stretch",
@@ -251,20 +270,26 @@ const FileUploadContentFilled = ({ variant, as, isDisabled, state, browseText, f
 							isDisabled,
 							children: browseText ?? ""
 						})
-					}), removeWithIcon ? /* @__PURE__ */ jsx(InlineIconButton, {
+					}), removeWithIcon ? /* @__PURE__ */ jsx(IconButton, {
 						label: "Cancel",
 						color: "secondary",
 						onPress: () => {
 							onRemove(state.id ?? "");
 						},
 						icon: X,
-						isDisabled
-					}) : /* @__PURE__ */ jsx(TextButton, {
+						isDisabled,
+						variant: "text",
+						width: "hug",
+						disableTooltip: true,
+						size: "sm"
+					}) : /* @__PURE__ */ jsx(Button, {
 						color: "secondary",
 						onPress: () => {
 							onRemove(state.id ?? "");
 						},
 						isDisabled,
+						variant: "text",
+						width: "hug",
 						children: t(($) => $.ui.fileUpload.removeFile)
 					})]
 				})
@@ -285,30 +310,34 @@ const FileUploadContentLoading = ({ index, variant, as, state, isDisabled, singl
 				className: clsx("flex items-center gap-file-upload-content-gap-icon-to-content", variant === "vertical" && "w-full flex-col", variant === "horizontal" && "w-1/2"),
 				children: [/* @__PURE__ */ jsx(IconSlot, {
 					icon: File,
-					className: "text-surface-default-card-foreground"
+					className: "text-content-primary"
 				}), /* @__PURE__ */ jsxs("div", {
 					className: clsx("flex flex-col", variant === "vertical" && "max-w-full gap-file-upload-content-gap-icon-to-content text-center", variant === "horizontal" && "max-w-[calc(100%-32px)] gap-file-upload-content-gap-text-to-text"),
 					children: [/* @__PURE__ */ jsx(Typography, {
 						size: "large",
 						as: "span",
-						className: "self-stretch truncate text-center text-surface-default-card-foreground font-bold",
+						className: "self-stretch truncate text-center text-content-primary font-bold",
 						children: state.file?.name ?? state.displayName ?? ""
 					}), /* @__PURE__ */ jsx(Typography, {
 						size: singleFile ? "small" : "small",
 						as: "span",
-						className: "text-surface-default-foreground",
+						className: "text-content-secondary",
 						children: FileUtils.getFileDisplaySize(state)
 					})]
 				})]
 			}), /* @__PURE__ */ jsxs("div", {
 				className: clsx("flex items-center gap-1", variant === "horizontal" && "w-1/2", variant === "vertical" && "w-full"),
-				children: [/* @__PURE__ */ jsx(Progress, { progress: state.progress }), (as === "link" || variant === "horizontal") && /* @__PURE__ */ jsx(InlineIconButton, {
+				children: [/* @__PURE__ */ jsx(Progress, { progress: state.progress }), (as === "link" || variant === "horizontal") && /* @__PURE__ */ jsx(IconButton, {
 					label: "Cancel",
 					color: "secondary",
 					onPress: () => {
 						onCancel(index);
 					},
-					icon: X
+					icon: X,
+					variant: "text",
+					width: "hug",
+					disableTooltip: true,
+					size: "sm"
 				})]
 			})]
 		}), as === "button" && variant === "vertical" && /* @__PURE__ */ jsx(Button, {
@@ -356,7 +385,8 @@ const FileCardComponent = ({ index, as, state, onRemove, isDisabled, browseButto
 			state,
 			browseButtonProps,
 			onRemove: () => {
-				onRemove?.(state.id ?? "");
+				if (state.id) onRemove?.(state.id);
+				else onCancel?.(index);
 			}
 		});
 	}, [
@@ -402,11 +432,11 @@ const FileUploadContentEmpty = ({ variant, as, isDisabled, title, browseText, up
 			className: clsx("flex items-center gap-file-upload-content-gap-icon-to-content", variant === "vertical" && "flex-col", variant === "horizontal" && "flex-row", isDisabled && "opacity-50"),
 			children: [/* @__PURE__ */ jsx(IconSlot, {
 				icon: Upload,
-				className: "text-surface-default-card-foreground"
+				className: "text-content-primary"
 			}), /* @__PURE__ */ jsx(Typography, {
 				size: "lead",
 				as: "span",
-				className: clsx("self-stretch text-surface-default-card-foreground font-normal", variant === "vertical" && "text-center"),
+				className: clsx("self-stretch text-content-primary font-normal", variant === "vertical" && "text-center"),
 				children: title
 			})]
 		}), /* @__PURE__ */ jsxs("div", {
@@ -414,11 +444,13 @@ const FileUploadContentEmpty = ({ variant, as, isDisabled, title, browseText, up
 			children: [/* @__PURE__ */ jsx(Typography, {
 				size: "large",
 				as: "span",
-				className: clsx("text-surface-default-foreground font-normal", variant === "vertical" && "text-center", isDisabled && "opacity-50"),
+				className: clsx("text-content-secondary font-normal", variant === "vertical" && "text-center", isDisabled && "opacity-50"),
 				children: uploadText
-			}), !hideButton && browseText && (as === "link" ? /* @__PURE__ */ jsx(TextButton, {
-				className: "text-interactive-primary-background lowercase",
+			}), !hideButton && browseText && (as === "link" ? /* @__PURE__ */ jsx(Button, {
+				className: "text-interactive-subtle-primary-foreground lowercase",
 				isDisabled,
+				variant: "text",
+				width: "hug",
 				children: browseText
 			}) : /* @__PURE__ */ jsx(Button, {
 				variant: browseButtonVariant,
@@ -452,7 +484,7 @@ const FileUploadContent = ({ variant, as, isDisabled, browseText, uploadText, em
 			cancelButtonProps,
 			onCancel: handleCancelUpload
 		});
-		if (currentState.state === "uploaded") return /* @__PURE__ */ jsx(FileUploadContentFilled, {
+		if (currentState.state === "uploaded" || currentState.state === "idle") return /* @__PURE__ */ jsx(FileUploadContentFilled, {
 			as,
 			variant,
 			singleFile: true,
@@ -462,7 +494,8 @@ const FileUploadContent = ({ variant, as, isDisabled, browseText, uploadText, em
 			browseButtonProps,
 			fileTriggerProps,
 			onRemove: () => {
-				handleRemove(currentState.id ?? "");
+				if (currentState.id) handleRemove(currentState.id);
+				else handleCancelUpload(0);
 			}
 		});
 		if (currentState.state === "error") return /* @__PURE__ */ jsx(FileUploadContentError, {
@@ -473,7 +506,8 @@ const FileUploadContent = ({ variant, as, isDisabled, browseText, uploadText, em
 			state: currentState,
 			browseButtonProps,
 			onRemove: () => {
-				handleRemove(currentState.id ?? "");
+				if (currentState.id) handleRemove(currentState.id);
+				else handleCancelUpload(0);
 			}
 		});
 	}
@@ -495,12 +529,26 @@ const FileUploadContent = ({ variant, as, isDisabled, browseText, uploadText, em
 //#region src/components/inputs/File/FileUpload.tsx
 const FileUploadBase = (props) => {
 	const { t } = useTranslation("ui");
-	const { ref: _ref, label, tooltipText, variant = "vertical", as = "button", helperText, isRequired, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, allowsMultiple: allowsMultipleProp, multiple, hideLabel, acceptedFileTypes, clearOnSuccess, emptyText = t(($) => $.ui.fileUpload.emptyText), uploadText = t(($) => $.ui.fileUpload.uploadText), browseText = t(($) => $.ui.fileUpload.browse), fileUpload, fileRemove, children, listRenderer, browseButtonProps, cancelButtonProps, onInvalidFileType, onChange, defaultState, ...rest } = props;
+	const { ref, label, tooltipText, variant = "vertical", as = "button", helperText, isRequired, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, errorMessageId, className, allowsMultiple: allowsMultipleProp, multiple, hideLabel, acceptedFileTypes, clearOnSuccess, emptyText = t(($) => $.ui.fileUpload.emptyText), uploadText = t(($) => $.ui.fileUpload.uploadText), browseText = t(($) => $.ui.fileUpload.browse), fileUpload, fileRemove, children, listRenderer, browseButtonProps, cancelButtonProps, onInvalidFileType, onChange, onBlur, defaultState, boundValue, ...rest } = props;
 	const allowsMultiple = allowsMultipleProp ?? multiple ?? false;
 	const ui = UIConfig.useConfig();
 	const fileUploadDropZoneCva = UIOverrides.useCva("fileUpload.dropZoneCva", fileUploadDropZoneDefinition);
 	const getInitialState = () => {
-		if (props.value != null && props.value.length > 0) return props.value;
+		if (boundValue !== void 0) return (Array.isArray(boundValue) ? boundValue : boundValue ? [boundValue] : []).map((file) => ({
+			state: "idle",
+			file,
+			displayName: file.name,
+			displaySize: file.size,
+			displayType: file.type
+		}));
+		if (props.value !== void 0) return props.value ?? [];
+		if (props.defaultValue !== void 0) return (Array.isArray(props.defaultValue) ? props.defaultValue : props.defaultValue ? [props.defaultValue] : []).map((file) => ({
+			state: "idle",
+			file,
+			displayName: file.name,
+			displaySize: file.size,
+			displayType: file.type
+		}));
 		if (!defaultState?.length) return [];
 		const items = defaultState.map((item, index) => ({
 			state: "uploaded",
@@ -511,13 +559,62 @@ const FileUploadBase = (props) => {
 		}));
 		return allowsMultiple ? items : items.slice(0, 1);
 	};
+	const generatedErrorId = useId();
+	const resolvedErrorId = errorMessageId ?? generatedErrorId;
+	const [uploadError, setUploadError] = useState();
+	const resolvedError = error ?? uploadError;
 	const [uploadState, setUploadState] = useState(getInitialState);
+	const uploadStateRef = useRef(uploadState);
+	const uploadGeneration = useRef(0);
+	uploadStateRef.current = uploadState;
+	const updateUploadState = useCallback((next) => {
+		const value = typeof next === "function" ? next(uploadStateRef.current) : next;
+		uploadStateRef.current = value;
+		setUploadState(value);
+	}, []);
+	const previousExternalValue = useRef(props.value);
+	useEffect(() => {
+		if (boundValue !== void 0 || props.value === void 0 || props.value === previousExternalValue.current) return;
+		previousExternalValue.current = props.value;
+		uploadGeneration.current += 1;
+		setUploadError(void 0);
+		uploadState.forEach((item) => {
+			if (!props.value?.some((next) => next.file === item.file && next.id === item.id)) item.abortController?.abort();
+		});
+		updateUploadState(props.value ?? []);
+	}, [
+		boundValue,
+		props.value,
+		uploadState,
+		updateUploadState
+	]);
+	useEffect(() => {
+		if (boundValue === void 0) return;
+		const files = Array.isArray(boundValue) ? boundValue : boundValue ? [boundValue] : [];
+		const currentFiles = uploadState.flatMap((item) => item.file ? [item.file] : []);
+		if (files.length === currentFiles.length && files.every((file, index) => file === currentFiles[index])) return;
+		uploadGeneration.current += 1;
+		setUploadError(void 0);
+		uploadState.forEach((item) => item.abortController?.abort());
+		updateUploadState(files.map((file) => ({
+			state: "idle",
+			file,
+			displayName: file.name,
+			displaySize: file.size,
+			displayType: file.type
+		})));
+	}, [
+		boundValue,
+		uploadState,
+		updateUploadState
+	]);
 	const emitFiles = useCallback((files) => {
 		if (allowsMultiple) onChange?.(files);
 		else onChange?.(files[0] ?? null);
 	}, [allowsMultiple, onChange]);
 	const formFieldProps = {
-		error,
+		error: resolvedError,
+		errorMessageId: resolvedErrorId,
 		label,
 		tooltipText,
 		helperText,
@@ -529,112 +626,146 @@ const FileUploadBase = (props) => {
 		errorClassName
 	};
 	const labelProps = $a8ea2faf2ebe4d2f$re_export$useLabels({ "aria-label": label });
+	const reportUploadError = (failure, generation) => {
+		if (generation !== uploadGeneration.current) return;
+		const message = typeof failure === "object" && failure !== null ? "serverMessage" in failure && typeof failure.serverMessage === "string" && failure.serverMessage.trim() ? failure.serverMessage : "message" in failure && typeof failure.message === "string" ? failure.message : void 0 : typeof failure === "string" ? failure : void 0;
+		setUploadError(message?.trim() ? message : t(($) => $.ui.fileUpload.uploadFailed));
+	};
 	const handleUpload = async (inputFiles) => {
-		const acceptedFiles = inputFiles.filter((file) => FileUtils.isFileTypeAccepted(file, acceptedFileTypes));
-		const invalidFiles = inputFiles.filter((file) => !FileUtils.isFileTypeAccepted(file, acceptedFileTypes));
-		if (invalidFiles.length > 0) {
-			if (allowsMultiple) onInvalidFileType?.(invalidFiles.map((file) => file.name));
-			else onInvalidFileType?.(invalidFiles[0].name);
-		}
-		if (acceptedFiles.length === 0) return;
-		const existingFiles = allowsMultiple ? uploadState.flatMap((state) => state.file ? [state.file] : []) : [];
-		emitFiles([...existingFiles, ...acceptedFiles]);
-		if (!fileUpload) return;
-		if (!allowsMultiple) setUploadState([]);
-		const newUploadState = [];
-		acceptedFiles.forEach((file) => {
-			newUploadState.push({
+		const generation = uploadGeneration.current;
+		setUploadError(void 0);
+		try {
+			const validFiles = inputFiles.filter((file) => FileUtils.isFileTypeAccepted(file, acceptedFileTypes));
+			const acceptedFiles = allowsMultiple ? validFiles : validFiles.slice(0, 1);
+			const invalidFiles = inputFiles.filter((file) => !FileUtils.isFileTypeAccepted(file, acceptedFileTypes));
+			if (invalidFiles.length > 0) {
+				if (allowsMultiple) onInvalidFileType?.(invalidFiles.map((file) => file.name));
+				else onInvalidFileType?.(invalidFiles[0].name);
+			}
+			if (acceptedFiles.length === 0) return;
+			const existingFiles = allowsMultiple ? uploadStateRef.current.flatMap((state) => state.file ? [state.file] : []) : [];
+			emitFiles([...existingFiles, ...acceptedFiles]);
+			if (!fileUpload) {
+				const states = acceptedFiles.map((file) => ({
+					state: "idle",
+					file,
+					displayName: file.name,
+					displaySize: file.size,
+					displayType: file.type
+				}));
+				updateUploadState((previous) => allowsMultiple ? [...previous, ...states] : states);
+				return;
+			}
+			if (!allowsMultiple) {
+				uploadStateRef.current.forEach((item) => item.abortController?.abort());
+				updateUploadState([]);
+			}
+			const newUploadState = acceptedFiles.map((file) => ({
 				state: "uploading",
 				progress: 0,
 				file,
 				abortController: new AbortController()
-			});
-		});
-		const startIndex = allowsMultiple ? uploadState.length : 0;
-		setUploadState((prev) => [...prev, ...newUploadState]);
-		const promises = [];
-		acceptedFiles.forEach(async (file, index) => {
-			promises.push(fileUpload({ data: {
-				resourceName: file.name,
-				fileName: file.name,
-				fileSize: file.size,
-				method: "put"
-			} }, file, {
-				onUploadProgress: ({ loaded, total }) => {
-					if (total == null) return;
-					const progress = Math.round(loaded / total * 100);
-					setUploadState((prev) => prev.map((state, i) => i === startIndex + index ? {
+			}));
+			updateUploadState((previous) => [...previous, ...newUploadState]);
+			const succeeded = await Promise.all(newUploadState.map(async ({ file, abortController }) => {
+				const isCurrent = () => generation === uploadGeneration.current && !abortController.signal.aborted;
+				try {
+					const response = await fileUpload({ data: {
+						resourceName: file.name,
+						fileName: file.name,
+						fileSize: file.size,
+						method: "put"
+					} }, file, {
+						onUploadProgress: ({ loaded, total }) => {
+							if (total == null || !isCurrent()) return;
+							const progress = Math.round(loaded / total * 100);
+							updateUploadState((previous) => previous.map((state) => state.abortController === abortController ? {
+								...state,
+								progress
+							} : state));
+						},
+						abortController
+					});
+					if (!isCurrent()) return false;
+					updateUploadState((previous) => previous.map((state) => state.abortController === abortController ? {
 						...state,
-						progress
+						state: "uploaded",
+						id: response.id
 					} : state));
-				},
-				abortController: newUploadState[index]?.abortController
+					return true;
+				} catch (failure) {
+					if (!isCurrent()) return false;
+					const remainingState = uploadStateRef.current.filter((state) => state.abortController !== abortController);
+					updateUploadState(remainingState);
+					reportUploadError(failure, generation);
+					emitFiles(remainingState.flatMap((state) => state.file ? [state.file] : []));
+					return false;
+				}
 			}));
-		});
-		try {
-			(await Promise.all(promises)).forEach((res, index) => {
-				setUploadState((prev) => prev.map((state, i) => i === startIndex + index ? {
-					...state,
-					state: "uploaded",
-					id: res.id
-				} : state));
-			});
-			if (clearOnSuccess) {
-				setUploadState([]);
+			if (generation === uploadGeneration.current && succeeded.every(Boolean) && clearOnSuccess && uploadStateRef.current.every((item) => newUploadState.some((pending) => pending.abortController === item.abortController))) {
+				updateUploadState([]);
 				emitFiles([]);
 			}
-		} catch (error) {
-			const remainingState = uploadState.slice(0, startIndex);
-			setUploadState(remainingState);
-			emitFiles(remainingState.flatMap((state) => state.file ? [state.file] : []));
-			throw error;
+		} catch (failure) {
+			reportUploadError(failure, generation);
 		}
 	};
 	const handleSelect = (inputFiles) => {
-		if (!inputFiles) return;
-		const filesArray = Array.from(inputFiles);
-		handleUpload(filesArray);
+		if (inputFiles) handleUpload(Array.from(inputFiles));
 	};
 	const handleDrop = async (e) => {
+		const generation = uploadGeneration.current;
 		if (!e.items) return;
-		const promises = [];
-		e.items.forEach((item) => {
-			if (item.kind === "file") promises.push(item.getFile());
-		});
-		const inputFiles = await Promise.all(promises);
-		handleUpload(inputFiles);
+		setUploadError(void 0);
+		try {
+			const inputFiles = await Promise.all(e.items.flatMap((item) => item.kind === "file" ? [Promise.resolve().then(() => item.getFile())] : []));
+			if (generation !== uploadGeneration.current) return;
+			await handleUpload(inputFiles);
+		} catch (failure) {
+			reportUploadError(failure, generation);
+		}
 	};
 	const handleRemove = useCallback((id) => {
 		fileRemove?.({ id });
 		const remainingState = uploadState.filter((state) => state.id !== id);
-		setUploadState(remainingState);
+		updateUploadState(remainingState);
 		emitFiles(remainingState.flatMap((state) => state.file ? [state.file] : []));
 	}, [
 		emitFiles,
 		fileRemove,
-		uploadState
+		uploadState,
+		updateUploadState
 	]);
 	const handleCancelUpload = useCallback((index) => {
 		const findState = uploadState[index];
 		if (findState) {
 			findState.abortController?.abort("canceled by user");
 			const remainingState = uploadState.filter((_, i) => i !== index);
-			setUploadState(remainingState);
+			updateUploadState(remainingState);
 			emitFiles(remainingState.flatMap((state) => state.file ? [state.file] : []));
 		}
-	}, [emitFiles, uploadState]);
+	}, [
+		emitFiles,
+		uploadState,
+		updateUploadState
+	]);
 	return /* @__PURE__ */ jsxs(FormField, {
+		ref,
+		onBlurCapture: onBlur,
 		...formFieldProps,
 		labelProps,
 		className: clsx("w-full", className),
 		children: [/* @__PURE__ */ jsx("div", {
+			role: "group",
+			"aria-label": label,
+			"aria-describedby": [rest["aria-describedby"], resolvedError ? resolvedErrorId : void 0].filter(Boolean).join(" ") || void 0,
 			className: "flex w-full items-center justify-between gap-input-gap-input-to-button-gap",
 			children: /* @__PURE__ */ jsx($070c0dd15dc89b58$export$3c6489d84dc98b6, {
 				...rest,
 				"data-rac": "",
 				"data-disabled": isDisabled || void 0,
 				"data-is-disabled": isDisabled || void 0,
-				"data-invalid": !!error || void 0,
+				"data-invalid": !!resolvedError || void 0,
 				"data-multiple": allowsMultiple || void 0,
 				"data-has-files": uploadState.length > 0 || void 0,
 				"data-filled": !allowsMultiple && uploadState[0]?.state === "uploaded" || void 0,
@@ -693,27 +824,7 @@ const FileUploadBase = (props) => {
 		}))]
 	});
 };
-const FileUploadComponent = (props) => {
-	if ("field" in props && props.field) {
-		const { field, ref, ...innerProps } = props;
-		return /* @__PURE__ */ jsx(FieldController, {
-			control: field.form,
-			name: field.name,
-			render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(FileUploadBase, {
-				...innerProps,
-				ref: $a8ea2faf2ebe4d2f$re_export$mergeRefs(ref, field.ref),
-				value: field.value,
-				onChange: ((value) => {
-					field.onChange(value);
-					field.onBlur();
-				}),
-				isDisabled: field.disabled || props.isDisabled,
-				error: props.error ?? error?.message
-			})
-		});
-	}
-	return /* @__PURE__ */ jsx(FileUploadBase, { ...props });
-};
+const FileUploadComponent = (props) => /* @__PURE__ */ jsx(FileUploadBase, { ...props });
 const FileUpload = memo(FileUploadComponent);
 //#endregion
-export { FileUpload as t };
+export { FileUploadBase as n, FileUpload as t };