@povio/ui 2.1.14 → 2.1.16

package/dist/DateTimeDialogFooter.js

@@ -0,0 +1,25 @@
+import { TextButton } from "./TextButton.js";
+import { ns } from "./i18n.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useTranslation } from "react-i18next";
+const DateTimeDialogFooter = ({ isValid = true, isDisabled = false, onTodayPress, onApply }) => {
+	const { t } = useTranslation("ui");
+	return /* @__PURE__ */ jsxs("footer", {
+		className: clsx("flex shrink-0 items-center gap-2 bg-elevation-fill-default-2 px-4 py-3 md:border-elevation-outline-default-1 md:border-t md:bg-elevation-fill-default-1 md:py-1-5", onTodayPress ? "justify-between" : "justify-end"),
+		children: [onTodayPress && /* @__PURE__ */ jsx(TextButton, {
+			type: "button",
+			color: "primary",
+			isDisabled,
+			onPress: onTodayPress,
+			children: t(($) => $.ui.datePicker.today)
+		}), /* @__PURE__ */ jsx(TextButton, {
+			type: "button",
+			color: "secondary",
+			onPress: onApply,
+			isDisabled: !isValid,
+			children: t(($) => $.ui.datePicker.save)
+		})]
+	});
+};
+export { DateTimeDialogFooter };

package/dist/DateTimePicker.js

@@ -0,0 +1,209 @@
+import { UIConfig } from "./uiConfig.context.js";
+import { Calendar } from "./Calendar2.js";
+import { DatePickerInput } from "./DatePickerInput.js";
+import { DateTimeDialog } from "./DateTimeDialog.js";
+import { DateTimeDialogFooter } from "./DateTimeDialogFooter.js";
+import { FormField } from "./FormField.js";
+import { TooltipWrapper } from "./TooltipWrapper.js";
+import { DateTimeUtils } from "./date-time.utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useImperativeHandle, useMemo, useRef } from "react";
+import { useDatePicker, useLocale } from "react-aria";
+import { mergeRefs } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
+import { CalendarDateTime, Time, createCalendar, getLocalTimeZone, now, toCalendarDateTime, today } from "@internationalized/date";
+import { useCalendarState, useDatePickerState } from "react-stately";
+var PLACEHOLDER_VALUE = new CalendarDateTime(2024, 1, 1);
+var DateTimePickerBase = (props) => {
+	const ui = UIConfig.useConfig();
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, isTimeOptional, placeholder, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry,...rest } = props;
+	const formFieldProps = {
+		error,
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName
+	};
+	const datePickerInputRef = useRef(null);
+	const datePickerRef = useMemo(() => ({ get current() {
+		return datePickerInputRef.current?.getContainer?.() || null;
+	} }), []);
+	useImperativeHandle(ref, () => ({ clear: () => {
+		datePickerInputRef.current?.clear();
+	} }));
+	const dialogState = useDatePickerState({
+		...rest,
+		defaultValue: value || rest.defaultValue,
+		shouldCloseOnSelect: false,
+		granularity: "minute",
+		hideTimeZone: true,
+		shouldForceLeadingZeros
+	});
+	useEffect(() => {
+		if (isTimeOptional && !dialogState.timeValue) dialogState.setTimeValue(new Time(0, 0));
+	}, [isTimeOptional, dialogState]);
+	const state = useDatePickerState({
+		...rest,
+		shouldForceLeadingZeros,
+		value,
+		onChange: (val) => {
+			onChange?.(val);
+			dialogState.setValue(val);
+			calendarState.setFocusedDate(val || today(getLocalTimeZone()));
+		},
+		shouldCloseOnSelect: false,
+		granularity: "minute",
+		hideTimeZone: true
+	});
+	const { groupProps, labelProps, fieldProps, buttonProps, dialogProps } = useDatePicker({
+		...rest,
+		label,
+		granularity: "minute",
+		hideTimeZone: true,
+		shouldForceLeadingZeros
+	}, state, datePickerRef);
+	const { calendarProps } = useDatePicker({
+		...rest,
+		label,
+		shouldForceLeadingZeros
+	}, dialogState, datePickerRef);
+	const { locale } = useLocale();
+	const calendarState = useCalendarState({
+		...calendarProps,
+		locale,
+		createCalendar
+	});
+	const headerProps = {
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isDisabled,
+		className: headerClassName,
+		labelProps
+	};
+	const onApply = () => {
+		state.setValue(dialogState.value);
+		state.toggle();
+	};
+	const onTodayPress = () => {
+		dialogState.setValue(toCalendarDateTime(now(getLocalTimeZone())));
+		calendarState.setFocusedDate(today(getLocalTimeZone()));
+	};
+	const onOpenChange = (isOpen) => {
+		state.toggle();
+		calendarState.setFocusedDate(state.value || today(getLocalTimeZone()));
+		if (!isOpen) dialogState.setValue(state.value);
+	};
+	const onInputBlur = (e) => {
+		if (!isTimeOptional) return;
+		const textValue = e.currentTarget.textContent;
+		const dateTimeValue = DateTimeUtils.formatTextDateToCalendarDateTime(textValue);
+		if (dateTimeValue) {
+			state.setValue(dateTimeValue);
+			dialogState.setValue(dateTimeValue);
+			dialogState.setTimeValue(new Time(0, 0));
+		}
+	};
+	return /* @__PURE__ */ jsx(TooltipWrapper, {
+		as,
+		error,
+		triggerTabIndex: as === "inline" ? -1 : void 0,
+		children: /* @__PURE__ */ jsxs(FormField, {
+			...formFieldProps,
+			as,
+			labelProps,
+			className: "relative inline-flex w-full flex-col text-left",
+			tabIndex: as === "inline" ? -1 : void 0,
+			children: [/* @__PURE__ */ jsx(DatePickerInput, {
+				ref: mergeRefs(ref, datePickerInputRef),
+				as,
+				groupProps,
+				fieldProps: {
+					...fieldProps,
+					placeholderValue: PLACEHOLDER_VALUE,
+					onBlur: (e) => {
+						fieldProps.onBlur?.(e);
+						onInputBlur(e);
+					}
+				},
+				buttonProps,
+				isDirty,
+				isDisabled,
+				isInvalid: !!error,
+				disableDropdown,
+				variant,
+				size,
+				isDateTime: true,
+				isClearable,
+				headerProps,
+				todayIcon,
+				isRequired,
+				disableManualEntry,
+				placeholder,
+				onOpenDropdown: () => state.toggle()
+			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
+				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
+					isDisabled,
+					isValid: !dialogState.isInvalid && !!dialogState.value,
+					onTodayPress,
+					onApply
+				}),
+				label,
+				triggerRef: datePickerRef,
+				dialogProps,
+				isOpen: state.isOpen,
+				onOpenChange,
+				children: /* @__PURE__ */ jsx(Calendar, {
+					state: calendarState,
+					calendarProps,
+					includesTime: true,
+					datePickerState: dialogState,
+					onApply
+				})
+			})]
+		})
+	});
+};
+const DateTimePicker = ({ fullIso = true,...props }) => {
+	const formatDateValue = (dateValue) => {
+		if (dateValue === null) return null;
+		if (fullIso) return DateTimeUtils.fromCalendarDateTimeToUTCISO(dateValue);
+		return DateTimeUtils.fromDateValueToISO(dateValue);
+	};
+	const parseDateValue = (isoString) => {
+		if (isoString == null) return isoString;
+		return DateTimeUtils.fromUTCISOToCalendarDateTime(isoString);
+	};
+	if ("formControl" in props && props.formControl) {
+		const { formControl, ref,...innerProps } = props;
+		return /* @__PURE__ */ jsx(Controller, {
+			control: formControl.control,
+			name: formControl.name,
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(DateTimePickerBase, {
+				...innerProps,
+				ref: mergeRefs(ref, field.ref),
+				value: parseDateValue(field.value),
+				onChange: (value) => field.onChange(formatDateValue(value)),
+				onBlur: field.onBlur,
+				isDirty,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(DateTimePickerBase, {
+		...props,
+		value: parseDateValue(props.value),
+		onChange: (value) => props.onChange?.(formatDateValue(value))
+	});
+};
+export { DateTimePicker };

package/dist/Drag.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+const DragIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "M9 19.615q-.666 0-1.14-.474A1.56 1.56 0 0 1 7.384 18q0-.666.474-1.14A1.56 1.56 0 0 1 9 16.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14A1.56 1.56 0 0 1 9 19.616m6 0q-.666 0-1.14-.474A1.56 1.56 0 0 1 13.384 18q0-.666.474-1.14A1.56 1.56 0 0 1 15 16.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14a1.56 1.56 0 0 1-1.141.475m-6-6q-.666 0-1.14-.474A1.56 1.56 0 0 1 7.384 12q0-.666.474-1.14A1.56 1.56 0 0 1 9 10.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14A1.56 1.56 0 0 1 9 13.616m6 0q-.666 0-1.14-.474A1.56 1.56 0 0 1 13.384 12q0-.666.474-1.14A1.56 1.56 0 0 1 15 10.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14a1.56 1.56 0 0 1-1.141.475m-6-6q-.666 0-1.14-.474A1.56 1.56 0 0 1 7.384 6q0-.666.474-1.14A1.56 1.56 0 0 1 9 4.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14A1.56 1.56 0 0 1 9 7.616m6 0q-.666 0-1.14-.474A1.56 1.56 0 0 1 13.384 6q0-.666.474-1.14A1.56 1.56 0 0 1 15 4.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14A1.56 1.56 0 0 1 15 7.616"
+	})
+});
+export { DragIcon };

package/dist/Drawer.js

@@ -0,0 +1,43 @@
+import { modalOverlay } from "./modal.cva.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Dialog, DialogTrigger, Modal, ModalOverlay } from "react-aria-components";
+const Drawer = ({ isOpen, portalContainerRef, onOpenChange, trigger, children, isDismissable, overlayClassName, dialogClassName, className }) => {
+	if (trigger) return /* @__PURE__ */ jsxs(DialogTrigger, {
+		isOpen,
+		onOpenChange,
+		children: [trigger, /* @__PURE__ */ jsx(DrawerOverlay, {
+			portalContainerRef,
+			isDismissable,
+			overlayClassName,
+			dialogClassName,
+			className,
+			children
+		})]
+	});
+	return /* @__PURE__ */ jsx(DrawerOverlay, {
+		isOpen,
+		onOpenChange,
+		portalContainerRef,
+		isDismissable,
+		className,
+		children
+	});
+};
+var DrawerOverlay = ({ isOpen, onOpenChange, portalContainerRef, children, isDismissable, overlayClassName, dialogClassName, className }) => {
+	return /* @__PURE__ */ jsx(ModalOverlay, {
+		isOpen,
+		onOpenChange,
+		UNSTABLE_portalContainer: portalContainerRef?.current,
+		className: clsx(modalOverlay(), overlayClassName),
+		isDismissable,
+		children: /* @__PURE__ */ jsx(Modal, {
+			className: clsx("fixed inset-y-0 right-0 z-10 w-fit entering:animate-drawer-enter-right exiting:animate-drawer-exit-right bg-elevation-fill-default-1", className),
+			children: /* @__PURE__ */ jsx(Dialog, {
+				className: clsx("outline-none", dialogClassName),
+				children: ({ close }) => children(close)
+			})
+		})
+	});
+};
+export { Drawer };

package/dist/File.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+const FileIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		fillRule: "evenodd",
+		d: "M12.9 2.1a1 1 0 0 1 .234.03l.009.003a1 1 0 0 1 .12.046q.03.013.054.027a1 1 0 0 1 .143.093q.03.023.058.049l.018.015 6.3 6.301.014.015q.015.014.029.032l.016.018q.018.025.034.048.022.03.042.062.02.035.037.073a.9.9 0 0 1 .093.388l-.001.016V19.2a2.7 2.7 0 0 1-2.7 2.7H6.6a2.7 2.7 0 0 1-2.7-2.7V4.8a2.7 2.7 0 0 1 2.7-2.7zM6.6 3.9a.9.9 0 0 0-.9.9v14.4a.9.9 0 0 0 .9.9h10.8a.9.9 0 0 0 .9-.9v-9h-5.4a.9.9 0 0 1-.9-.9V3.9zm7.2 4.5h3.227l-3.226-3.226z",
+		clipRule: "evenodd"
+	})
+});
+export { FileIcon };

package/dist/FileCard.js

@@ -0,0 +1,50 @@
+import { FileUploadContentError } from "./FileUploadContentError.js";
+import { FileUploadContentFilled } from "./FileUploadContentFilled.js";
+import { FileUploadContentLoading } from "./FileUploadContentLoading.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useMemo } from "react";
+const FileCard = ({ index, as, state, onRemove, isDisabled, onCancel }) => {
+	const content = useMemo(() => {
+		if (state.state === "uploading") return /* @__PURE__ */ jsx(FileUploadContentLoading, {
+			index,
+			variant: "horizontal",
+			as,
+			isDisabled,
+			state,
+			onCancel: () => onCancel?.(index)
+		});
+		if (state.state === "error") return /* @__PURE__ */ jsx(FileUploadContentError, {
+			as,
+			removeWithIcon: true,
+			variant: "horizontal",
+			isDisabled,
+			state,
+			onRemove: () => {
+				onCancel?.(index);
+			}
+		});
+		return /* @__PURE__ */ jsx(FileUploadContentFilled, {
+			as,
+			removeWithIcon: true,
+			variant: "horizontal",
+			isDisabled,
+			state,
+			onRemove: () => {
+				onRemove?.(state.id ?? "");
+			}
+		});
+	}, [
+		state,
+		index,
+		as,
+		isDisabled,
+		onCancel,
+		onRemove
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("flex items-center self-stretch", "bg-elevation-fill-default-1", "px-file-upload-file-card-side-default", "py-4", "rounded-file-upload-file-card-rounding-default border border-elevation-outline-default-1 border-solid"),
+		children: content
+	});
+};
+export { FileCard };

package/dist/FileCardList.js

@@ -0,0 +1,17 @@
+import { FileCard } from "./FileCard.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+const FileCardList = ({ uploadState, as, isDisabled, className, onRemove, onCancel }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("mt-10 flex flex-col items-start gap-4 self-stretch", className),
+		children: uploadState.map((state, index) => /* @__PURE__ */ jsx(FileCard, {
+			index,
+			as,
+			state,
+			isDisabled,
+			onRemove,
+			onCancel
+		}, state.file.name || state.id || state.src))
+	});
+};
+export { FileCardList };

package/dist/FileUpload.js

@@ -0,0 +1,189 @@
+import { UIConfig } from "./uiConfig.context.js";
+import { ns } from "./i18n.js";
+import { FormField } from "./FormField.js";
+import { FileUtils } from "./file.utils.js";
+import { FileCardList } from "./FileCardList.js";
+import { FileUploadContentEmpty } from "./FileUploadContentEmpty.js";
+import { FileUploadContent } from "./FileUploadContent.js";
+import { fileUploadDropZone } from "./fileUpload.cva.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { DropZone } from "react-aria-components";
+import { useCallback, useState } from "react";
+import { mergeRefs, useLabels } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+var FileUploadBase = (props) => {
+	const { t } = useTranslation("ui");
+	const { ref: _ref, label, tooltipText, variant = "vertical", as = "button", helperText, isRequired, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, allowsMultiple = false, hideLabel, acceptedFileTypes, clearOnSuccess, emptyText = t(($) => $.ui.fileUpload.emptyText), uploadText = t(($) => $.ui.fileUpload.uploadText), browseText = t(($) => $.ui.fileUpload.browse), fileUpload, fileRemove, children, listRenderer, onInvalidFileType,...rest } = props;
+	const ui = UIConfig.useConfig();
+	const [uploadState, setUploadState] = useState(props.value ?? []);
+	const formFieldProps = {
+		error,
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		isHeaderHidden,
+		hideLabel: hideLabel ?? ui.input.hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName
+	};
+	const labelProps = useLabels({ "aria-label": label });
+	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 || !fileUpload) return;
+		if (!allowsMultiple) setUploadState([]);
+		const newUploadState = [];
+		acceptedFiles.forEach((file) => {
+			newUploadState.push({
+				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 ? {
+						...state,
+						progress
+					} : state));
+				},
+				abortController: newUploadState[index]?.abortController
+			}));
+		});
+		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([]);
+		} catch (error$1) {
+			setUploadState((prev) => prev.filter((_, i) => i < startIndex));
+			throw error$1;
+		}
+	};
+	const handleSelect = (inputFiles) => {
+		if (!inputFiles) return;
+		handleUpload(Array.from(inputFiles));
+	};
+	const handleDrop = async (e) => {
+		if (!e.items) return;
+		const promises = [];
+		e.items.forEach((item) => {
+			if (item.kind === "file") promises.push(item.getFile());
+		});
+		handleUpload(await Promise.all(promises));
+	};
+	const handleRemove = useCallback((id) => {
+		fileRemove?.({ id });
+		setUploadState((prev) => prev.filter((state) => state.id !== id));
+	}, [fileRemove]);
+	const handleCancelUpload = useCallback((index) => {
+		const findState = uploadState[index];
+		if (findState) {
+			findState.abortController?.abort("canceled by user");
+			setUploadState((prev) => prev.filter((_, i) => i !== index));
+		}
+	}, [uploadState]);
+	return /* @__PURE__ */ jsxs(FormField, {
+		...formFieldProps,
+		labelProps,
+		className: clsx("w-full", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex w-full items-center justify-between gap-input-gap-input-to-button-gap",
+			children: /* @__PURE__ */ jsx(DropZone, {
+				...rest,
+				"data-rac": "",
+				"data-disabled": isDisabled || void 0,
+				"data-invalid": !!error || void 0,
+				"data-multiple": allowsMultiple || void 0,
+				"data-has-files": uploadState.length > 0 || void 0,
+				isDisabled,
+				onDrop: handleDrop,
+				className: fileUploadDropZone({
+					variant,
+					isContainer: !!children,
+					className: "group/file-upload-drop-zone"
+				}),
+				children: children ? /* @__PURE__ */ jsxs(Fragment, { children: [children({
+					files: uploadState,
+					onRemove: handleRemove,
+					onCancel: handleCancelUpload
+				}), /* @__PURE__ */ jsx(FileUploadContentEmpty, {
+					as,
+					variant,
+					singleFile: true,
+					hideButton: true,
+					isDisabled,
+					title: emptyText,
+					uploadText,
+					browseText,
+					className: "group-drop-target/file-upload-drop-zone:flex! absolute top-1/2 left-1/2 z-50 hidden -translate-x-1/2 -translate-y-1/2 flex-col"
+				})] }) : /* @__PURE__ */ jsx(FileUploadContent, {
+					...rest,
+					variant,
+					as,
+					isDisabled,
+					browseText,
+					uploadText,
+					emptyText,
+					uploadState,
+					handleSelect,
+					handleCancelUpload,
+					handleRemove,
+					acceptedFileTypes,
+					allowsMultiple
+				})
+			})
+		}), !children && allowsMultiple && uploadState.length > 0 && (listRenderer ? listRenderer({
+			files: uploadState,
+			onRemove: handleRemove,
+			onCancel: handleCancelUpload
+		}) : /* @__PURE__ */ jsx(FileCardList, {
+			as,
+			uploadState,
+			isDisabled,
+			onRemove: handleRemove,
+			onCancel: handleCancelUpload
+		}))]
+	});
+};
+const FileUpload = (props) => {
+	if ("formControl" in props && props.formControl) {
+		const { formControl, ref,...innerProps } = props;
+		return /* @__PURE__ */ jsx(Controller, {
+			control: formControl.control,
+			name: formControl.name,
+			render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(FileUploadBase, {
+				...innerProps,
+				ref: mergeRefs(ref, field.ref),
+				value: field.value,
+				onChange: field.onChange,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(FileUploadBase, { ...props });
+};
+export { FileUpload };

package/dist/FileUploadContainer.js

@@ -0,0 +1,12 @@
+import { FileUpload } from "./FileUpload.js";
+import { jsx } from "react/jsx-runtime";
+const FileUploadContainer = (props) => {
+	return /* @__PURE__ */ jsx(FileUpload, {
+		label: "",
+		hideLabel: true,
+		variant: "vertical",
+		as: "button",
+		...props
+	});
+};
+export { FileUploadContainer };

package/dist/FileUploadContent.js

@@ -0,0 +1,61 @@
+import { FileUploadContentError } from "./FileUploadContentError.js";
+import { FileUploadContentFilled } from "./FileUploadContentFilled.js";
+import { FileUploadContentLoading } from "./FileUploadContentLoading.js";
+import { FileUploadContentEmpty } from "./FileUploadContentEmpty.js";
+import { jsx } from "react/jsx-runtime";
+import { FileTrigger } from "react-aria-components";
+const FileUploadContent = ({ variant, as, isDisabled, browseText, uploadText, emptyText, uploadState, handleCancelUpload, handleRemove, acceptedFileTypes, allowsMultiple, handleSelect,...rest }) => {
+	const currentState = uploadState.at(0);
+	const fileTriggerProps = {
+		...rest,
+		acceptedFileTypes,
+		allowsMultiple,
+		onSelect: handleSelect
+	};
+	if (!allowsMultiple && currentState) {
+		if (currentState.state === "uploading") return /* @__PURE__ */ jsx(FileUploadContentLoading, {
+			index: 0,
+			variant,
+			as,
+			singleFile: true,
+			isDisabled,
+			state: currentState,
+			onCancel: handleCancelUpload
+		});
+		if (currentState.state === "uploaded") return /* @__PURE__ */ jsx(FileUploadContentFilled, {
+			as,
+			variant,
+			singleFile: true,
+			isDisabled,
+			state: currentState,
+			browseText,
+			fileTriggerProps,
+			onRemove: () => {
+				handleRemove(currentState.id ?? "");
+			}
+		});
+		if (currentState.state === "error") return /* @__PURE__ */ jsx(FileUploadContentError, {
+			as,
+			variant,
+			singleFile: true,
+			isDisabled,
+			state: currentState,
+			onRemove: () => {
+				handleRemove(currentState.id ?? "");
+			}
+		});
+	}
+	return /* @__PURE__ */ jsx(FileTrigger, {
+		...fileTriggerProps,
+		children: /* @__PURE__ */ jsx(FileUploadContentEmpty, {
+			as,
+			variant,
+			singleFile: true,
+			isDisabled,
+			title: emptyText,
+			uploadText,
+			browseText
+		})
+	});
+};
+export { FileUploadContent };