@povio/ui 3.4.0-rc.15 → 3.4.0-rc.17

package/dist/components/checkbox-group.js

@@ -0,0 +1,163 @@
+import { UIOverrides } from "../config/uiOverrides.context.js";
+import { UIConfig } from "../config/uiConfig.context.js";
+import { FieldController } from "./inputs/shared/form.binding.js";
+import { checkboxContentRowDefinition, checkboxContentWrapperDefinition, checkboxGroupLabelDefinition } from "./inputs/Checkbox/checkbox.cva.js";
+import { CheckboxBase } from "./checkbox.js";
+import { FormFieldLabel } from "./inputs/FormField/FormFieldLabel.js";
+import { FormField } from "./form-field.js";
+import { inputBaseDefinition, inputSizeDefinition } from "./inputs/shared/input.cva.js";
+import { clsx } from "clsx";
+import { memo } from "react";
+import { CheckboxGroup as CheckboxGroup$1 } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLabel } from "react-aria";
+import { mergeRefs } from "@react-aria/utils";
+//#region src/components/inputs/Checkbox/CheckboxGroup.tsx
+const CheckboxGroupBase = (props) => {
+	const ui = UIConfig.useConfig();
+	const checkboxContentWrapperCva = UIOverrides.useCva("checkbox.contentWrapperCva", checkboxContentWrapperDefinition);
+	const checkboxContentRowCva = UIOverrides.useCva("checkbox.contentRowCva", checkboxContentRowDefinition);
+	const checkboxGroupLabelCva = UIOverrides.useCva("checkbox.groupLabelCva", checkboxGroupLabelDefinition);
+	const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBaseDefinition);
+	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
+	const { ref, label, tooltipText, helperText, isDirty, isRequired, rightContent, isDisabled, headerClassName, errorClassName, labelClassName, inputClassName, isHeaderHidden, error, className, options, allValue, value, defaultValue, onChange, onBlur, as: asProp, size: sizeProp, variant: variantProp, hideLabel: hideLabelProp, ...rest } = props;
+	const as = asProp ?? ui.input.as;
+	const size = sizeProp ?? ui.input.size;
+	const variant = variantProp ?? ui.checkbox.variant;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const optionValues = options.map((option) => option.value);
+	const expandAllValue = (currentValue) => {
+		if (allValue === null && currentValue === null) return optionValues;
+		if (allValue !== void 0 && allValue !== null && currentValue) {
+			if (currentValue.length === allValue.length && currentValue.every((item, index) => item === allValue[index])) return optionValues;
+		}
+		return currentValue ?? void 0;
+	};
+	const resolvedValue = expandAllValue(value);
+	const resolvedDefaultValue = expandAllValue(defaultValue);
+	const selectedValue = resolvedValue ?? resolvedDefaultValue;
+	const shouldRenderInputFrame = as !== "default";
+	const { labelProps, fieldProps } = useLabel({ label });
+	const formFieldProps = {
+		className,
+		error,
+		errorClassName,
+		headerClassName,
+		helperText,
+		hideLabel,
+		isDisabled,
+		isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+		isRequired,
+		label,
+		rightContent,
+		tooltipText
+	};
+	const headerProps = {
+		className: headerClassName,
+		helperText,
+		isDisabled,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isRequired,
+		label,
+		labelProps,
+		rightContent,
+		tooltipText
+	};
+	const handleChange = (nextValue) => {
+		const hasAllOptions = allValue !== void 0 && optionValues.length > 0 && optionValues.every((optionValue) => nextValue.includes(optionValue));
+		onChange?.(hasAllOptions ? allValue : nextValue);
+	};
+	return /* @__PURE__ */ jsx(CheckboxGroup$1, {
+		...rest,
+		...fieldProps,
+		ref,
+		value: resolvedValue,
+		defaultValue: resolvedDefaultValue,
+		onChange: handleChange,
+		onBlur,
+		isDisabled,
+		isInvalid: !!error,
+		isRequired,
+		"data-is-dirty": isDirty || void 0,
+		"data-is-required": isRequired || void 0,
+		className: "group",
+		children: /* @__PURE__ */ jsx(FormField, {
+			...formFieldProps,
+			as,
+			labelProps,
+			className: clsx("w-full", as === "inline" && "h-full", className),
+			tabIndex: as === "inline" ? -1 : void 0,
+			children: /* @__PURE__ */ jsx("div", {
+				className: clsx("group/checkbox-group-content relative", shouldRenderInputFrame && inputBaseCva({
+					variant: ui.input.variant,
+					as
+				}), inputClassName),
+				"data-rac": "",
+				"data-disabled": isDisabled || void 0,
+				"data-is-disabled": isDisabled || void 0,
+				"data-invalid": !!error || void 0,
+				"data-has-selection": selectedValue?.length ? true : void 0,
+				"data-checkbox-group-content": "",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: clsx(checkboxContentWrapperCva({
+						variant,
+						as,
+						size,
+						hasInputFrame: shouldRenderInputFrame,
+						...rest
+					}), shouldRenderInputFrame && as !== "floating" && inputSizeCva({
+						as,
+						size
+					})),
+					"data-is-dirty": isDirty || void 0,
+					"data-is-required": isRequired || void 0,
+					children: [as && ["filter", "floating"].includes(as) && /* @__PURE__ */ jsx(FormFieldLabel, {
+						...headerProps,
+						as: as === "floating" ? "filter" : as,
+						size,
+						className: clsx(headerClassName, checkboxGroupLabelCva({ as }))
+					}), /* @__PURE__ */ jsx("div", {
+						className: checkboxContentRowCva({
+							variant,
+							as,
+							hasInputFrame: shouldRenderInputFrame,
+							...rest
+						}),
+						children: options.map((option) => /* @__PURE__ */ jsx(CheckboxBase, {
+							value: option.value,
+							variant,
+							hideLabel,
+							hideError: true,
+							labelClassName,
+							children: option.label
+						}, option.value))
+					})]
+				})
+			})
+		})
+	});
+};
+const CheckboxGroupComponent = (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, isDirty } }) => /* @__PURE__ */ jsx(CheckboxGroupBase, {
+				...innerProps,
+				ref: mergeRefs(ref, field.ref),
+				value: field.value,
+				onChange: field.onChange,
+				onBlur: field.onBlur,
+				name: field.name,
+				isDirty,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(CheckboxGroupBase, { ...props });
+};
+const CheckboxGroup = memo(CheckboxGroupComponent);
+//#endregion
+export { CheckboxGroup };

package/dist/components/checkbox.d.ts

@@ -0,0 +1,24 @@
+import { FieldValues } from "./inputs/shared/form.binding.js";
+import { CheckboxVariantProps } from "./inputs/Checkbox/checkbox.cva.js";
+import { FormFieldErrorProps } from "./inputs/FormField/FormFieldError.js";
+import { ControlProps } from "./inputs/shared/form.types.js";
+import { ComponentType, ReactElement, Ref, SVGProps } from "react";
+import { CheckboxProps as CheckboxProps$1 } from "react-aria-components";
+//#region src/components/inputs/Checkbox/Checkbox.d.ts
+interface CheckboxBaseProps extends FormFieldErrorProps, CheckboxVariantProps, Omit<CheckboxProps$1, "className"> {
+  ref?: Ref<HTMLLabelElement>;
+  children: string | ReactElement;
+  hideLabel?: boolean;
+  hideError?: boolean;
+  selectedIcon?: ComponentType<SVGProps<SVGSVGElement>>;
+  indeterminateIcon?: ComponentType<SVGProps<SVGSVGElement>>;
+  isDirty?: boolean;
+  labelClassName?: string;
+}
+declare const CheckboxBase: (props: CheckboxBaseProps) => import("react/jsx-runtime").JSX.Element;
+type CheckboxProps = CheckboxBaseProps;
+type ControlledCheckboxProps<TFieldValues extends FieldValues> = ControlProps<CheckboxProps, TFieldValues, "isSelected">;
+declare const CheckboxComponent: <TFieldValues extends FieldValues>(props: ControlledCheckboxProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+declare const Checkbox: typeof CheckboxComponent;
+//#endregion
+export { Checkbox, CheckboxBase, CheckboxBaseProps, CheckboxProps, ControlledCheckboxProps };

package/dist/components/checkbox.js

@@ -0,0 +1,80 @@
+import { UIOverrides } from "../config/uiOverrides.context.js";
+import { UIConfig } from "../config/uiConfig.context.js";
+import { FieldController } from "./inputs/shared/form.binding.js";
+import { checkboxContentClassName, checkboxIndicatorClass, checkboxTypography } from "./inputs/Checkbox/checkbox.cva.js";
+import { FormFieldError } from "./inputs/FormField/FormFieldError.js";
+import { CheckContent } from "./inputs/shared/CheckContent.js";
+import { CheckboxCheckmark } from "./inputs/Checkbox/CheckboxCheckmark.js";
+import { clsx } from "clsx";
+import { memo } from "react";
+import { Checkbox as Checkbox$1 } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
+//#region src/components/inputs/Checkbox/Checkbox.tsx
+const CheckboxBase = (props) => {
+	const ui = UIConfig.useConfig();
+	const checkboxTypographyMap = UIOverrides.useMapper("checkbox.typography", checkboxTypography);
+	const checkboxContentClassNameMap = UIOverrides.useMapper("checkbox.contentClassName", checkboxContentClassName);
+	const { className, children, isDisabled, isRequired, error, hideError, labelClassName, variant: variantProp, hideLabel: hideLabelProp, onChange, onBlur, ...rest } = props;
+	const variant = variantProp ?? ui.checkbox.variant;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const formFieldErrorProps = {
+		error,
+		isDisabled
+	};
+	const handleChange = (isSelected) => {
+		onChange?.(isSelected);
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Checkbox$1, {
+		...rest,
+		isDisabled,
+		isInvalid: !!error,
+		isRequired,
+		"aria-label": hideLabel && typeof children === "string" ? children : void 0,
+		"aria-errormessage": error || void 0,
+		"data-is-dirty": props.isDirty || void 0,
+		"data-is-required": props.isRequired || void 0,
+		onChange: handleChange,
+		onBlur,
+		className: clsx("relative", checkboxIndicatorClass, className),
+		children: [/* @__PURE__ */ jsx(CheckboxCheckmark, {
+			variant,
+			...rest
+		}), !hideLabel && /* @__PURE__ */ jsx(CheckContent, {
+			typography: checkboxTypographyMap({
+				variant,
+				...rest
+			}),
+			contentClassName: checkboxContentClassNameMap({
+				variant,
+				...rest
+			}),
+			className: labelClassName,
+			children
+		})]
+	}), !hideError && /* @__PURE__ */ jsx(FormFieldError, { ...formFieldErrorProps })] });
+};
+const CheckboxComponent = (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, isDirty } }) => /* @__PURE__ */ jsx(CheckboxBase, {
+				...innerProps,
+				ref: mergeRefs(ref, field.ref),
+				isSelected: field.value,
+				onChange: field.onChange,
+				onBlur: field.onBlur,
+				name: field.name,
+				isDirty,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(CheckboxBase, { ...props });
+};
+const Checkbox = memo(CheckboxComponent);
+//#endregion
+export { Checkbox, CheckboxBase };

package/dist/components/date-picker.d.ts

@@ -0,0 +1,2 @@
+import { ControlledDatePickerProps, DatePicker, DatePickerProps } from "./inputs/DateTime/DatePicker/DatePicker.js";
+export { type ControlledDatePickerProps, DatePicker, type DatePickerProps };

package/dist/components/date-picker.js

@@ -0,0 +1,2 @@
+import { DatePicker } from "./inputs/DateTime/DatePicker/DatePicker.js";
+export { DatePicker };

package/dist/components/date-range-picker.d.ts

@@ -0,0 +1,2 @@
+import { ControlledDateRangePickerProps, DateRangePicker, DateRangePickerProps } from "./inputs/DateTime/DateRangePicker/DateRangePicker.js";
+export { type ControlledDateRangePickerProps, DateRangePicker, type DateRangePickerProps };

package/dist/components/date-range-picker.js

@@ -0,0 +1,2 @@
+import { DateRangePicker } from "./inputs/DateTime/DateRangePicker/DateRangePicker.js";
+export { DateRangePicker };

package/dist/components/date-time-picker.d.ts

@@ -0,0 +1,2 @@
+import { ControlledDateTimePickerProps, DateTimePicker, DateTimePickerProps } from "./inputs/DateTime/DateTimePicker/DateTimePicker.js";
+export { type ControlledDateTimePickerProps, DateTimePicker, type DateTimePickerProps };

package/dist/components/date-time-picker.js

@@ -0,0 +1,2 @@
+import { DateTimePicker } from "./inputs/DateTime/DateTimePicker/DateTimePicker.js";
+export { DateTimePicker };

package/dist/components/drawer.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode, RefObject } from "react";
+//#region src/components/overlays/Drawer/Drawer.d.ts
+interface DrawerProps {
+  label: string;
+  isOpen?: boolean;
+  portalContainerRef?: RefObject<HTMLElement>;
+  onOpenChange?: (isOpen: boolean) => void;
+  trigger?: ReactNode;
+  children: (close: () => void) => ReactNode;
+  isDismissable?: boolean;
+  overlayClassName?: string;
+  dialogClassName?: string;
+  className?: string;
+  shouldCloseOnInteractOutside?: () => boolean;
+}
+declare const Drawer: ({ label, isOpen, portalContainerRef, onOpenChange, trigger, children, isDismissable, overlayClassName, dialogClassName, className, shouldCloseOnInteractOutside }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Drawer, DrawerProps };

package/dist/components/{overlays/Drawer/Drawer.js → drawer.js}

@@ -1,10 +1,10 @@
-import { modalOverlay } from "../Modal/modal.cva.js";
+import { modalOverlay } from "./overlays/Modal/modal.cva.js";
+import { c } from "react/compiler-runtime";
 import { clsx } from "clsx";
 import { Dialog, DialogTrigger, Modal, ModalOverlay } from "react-aria-components";
-import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/overlays/Drawer/Drawer.tsx
-var Drawer = (t0) => {
+const Drawer = (t0) => {
 	const $ = c(25);
 	const { label, isOpen, portalContainerRef, onOpenChange, trigger, children, isDismissable, overlayClassName, dialogClassName, className, shouldCloseOnInteractOutside } = t0;
 	if (trigger) {
@@ -73,7 +73,7 @@ var Drawer = (t0) => {
 	} else t1 = $[24];
 	return t1;
 };
-var DrawerOverlay = ({ label, isOpen, onOpenChange, portalContainerRef, children, isDismissable, overlayClassName, dialogClassName, className, shouldCloseOnInteractOutside }) => {
+const DrawerOverlay = ({ label, isOpen, onOpenChange, portalContainerRef, children, isDismissable, overlayClassName, dialogClassName, className, shouldCloseOnInteractOutside }) => {
 	return /* @__PURE__ */ jsx(ModalOverlay, {
 		isOpen,
 		onOpenChange,

package/dist/components/file-upload-container.d.ts

@@ -0,0 +1,5 @@
+import { FileUploadContainerProps } from "./inputs/File/fileUpload.types.js";
+//#region src/components/inputs/File/FileUploadContainer.d.ts
+declare const FileUploadContainer: import("react").MemoExoticComponent<(props: FileUploadContainerProps) => import("react/jsx-runtime").JSX.Element>;
+//#endregion
+export { FileUploadContainer, type FileUploadContainerProps };

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

@@ -0,0 +1,15 @@
+import { FileUpload } from "./file-upload.js";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/inputs/File/FileUploadContainer.tsx
+const FileUploadContainer = memo((props) => {
+	return /* @__PURE__ */ jsx(FileUpload, {
+		label: "",
+		hideLabel: true,
+		variant: "vertical",
+		as: "button",
+		...props
+	});
+});
+//#endregion
+export { FileUploadContainer };

package/dist/components/file-upload.d.ts

@@ -0,0 +1,7 @@
+import { FieldValues } from "./inputs/shared/form.binding.js";
+import { DefaultFile, FileUploadBaseProps, FileUploadButtonProps, FileUploadError, FileUploadProps, FileUploadRequest, FileUploadResponse, FileUploadState } from "./inputs/File/fileUpload.types.js";
+//#region src/components/inputs/File/FileUpload.d.ts
+declare const FileUploadComponent: <TFieldValues extends FieldValues = FieldValues>(props: FileUploadProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+declare const FileUpload: typeof FileUploadComponent;
+//#endregion
+export { type DefaultFile, FileUpload, type FileUploadBaseProps, type FileUploadButtonProps, type FileUploadError, type FileUploadProps, type FileUploadRequest, type FileUploadResponse, type FileUploadState };

package/dist/components/{inputs/File/FileUpload.js → file-upload.js}

@@ -1,22 +1,21 @@
-import { UIOverrides } from "../../../config/uiOverrides.context.js";
-import { UIConfig } from "../../../config/uiConfig.context.js";
-import "../../../config/i18n.js";
-import { FieldController } from "../shared/form.binding.js";
-import { FormField } from "../FormField/FormField.js";
-import { FileUtils } from "../../../utils/file.utils.js";
-import { FileCardList } from "./shared/FileCardList.js";
-import { FileUploadContentEmpty } from "./shared/FileUploadContentEmpty.js";
-import { FileUploadContent } from "./shared/FileUploadContent.js";
-import { fileUploadDropZoneDefinition } from "./shared/fileUpload.cva.js";
+import { UIOverrides } from "../config/uiOverrides.context.js";
+import { UIConfig } from "../config/uiConfig.context.js";
+import "../config/i18n.js";
+import { FieldController } from "./inputs/shared/form.binding.js";
+import { FormField } from "./form-field.js";
+import { FileUtils } from "../utils/file.utils.js";
+import { FileCardList } from "./inputs/File/shared/FileCardList.js";
+import { FileUploadContentEmpty } from "./inputs/File/shared/FileUploadContentEmpty.js";
+import { FileUploadContent } from "./inputs/File/shared/FileUploadContent.js";
+import { fileUploadDropZoneDefinition } from "./inputs/File/shared/fileUpload.cva.js";
 import { clsx } from "clsx";
-import { useCallback, useState } from "react";
+import { memo, useCallback, useState } from "react";
 import { DropZone } from "react-aria-components";
-import { c } from "react/compiler-runtime";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { mergeRefs, useLabels } from "@react-aria/utils";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/File/FileUpload.tsx
-var FileUploadBase = (props) => {
+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 = false, 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, defaultState, ...rest } = props;
 	const ui = UIConfig.useConfig();
@@ -49,76 +48,78 @@ var FileUploadBase = (props) => {
 	const labelProps = useLabels({ "aria-label": label });
 	const handleUpload = async (inputFiles) => {
 		const acceptedFiles = inputFiles.filter((file) => FileUtils.isFileTypeAccepted(file, acceptedFileTypes));
-		const invalidFiles = inputFiles.filter((file_0) => !FileUtils.isFileTypeAccepted(file_0, acceptedFileTypes));
-		if (invalidFiles.length > 0) if (allowsMultiple) onInvalidFileType?.(invalidFiles.map((file_1) => file_1.name));
+		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_2) => {
+		acceptedFiles.forEach((file) => {
 			newUploadState.push({
 				state: "uploading",
 				progress: 0,
-				file: file_2,
+				file,
 				abortController: new AbortController()
 			});
 		});
 		const startIndex = allowsMultiple ? uploadState.length : 0;
 		setUploadState((prev) => [...prev, ...newUploadState]);
 		const promises = [];
-		acceptedFiles.forEach(async (file_3, index_0) => {
+		acceptedFiles.forEach(async (file, index) => {
 			promises.push(fileUpload({ data: {
-				resourceName: file_3.name,
-				fileName: file_3.name,
-				fileSize: file_3.size,
+				resourceName: file.name,
+				fileName: file.name,
+				fileSize: file.size,
 				method: "put"
-			} }, file_3, {
+			} }, file, {
 				onUploadProgress: ({ loaded, total }) => {
 					if (total == null) return;
 					const progress = Math.round(loaded / total * 100);
-					setUploadState((prev_0) => prev_0.map((state, i) => i === startIndex + index_0 ? {
+					setUploadState((prev) => prev.map((state, i) => i === startIndex + index ? {
 						...state,
 						progress
 					} : state));
 				},
-				abortController: newUploadState[index_0]?.abortController
+				abortController: newUploadState[index]?.abortController
 			}));
 		});
 		try {
-			(await Promise.all(promises)).forEach((res, index_1) => {
-				setUploadState((prev_2) => prev_2.map((state_0, i_1) => i_1 === startIndex + index_1 ? {
-					...state_0,
+			(await Promise.all(promises)).forEach((res, index) => {
+				setUploadState((prev) => prev.map((state, i) => i === startIndex + index ? {
+					...state,
 					state: "uploaded",
 					id: res.id
-				} : state_0));
+				} : state));
 			});
 			if (clearOnSuccess) setUploadState([]);
-		} catch (error_0) {
-			setUploadState((prev_1) => prev_1.filter((_, i_0) => i_0 < startIndex));
-			throw error_0;
+		} catch (error) {
+			setUploadState((prev) => prev.filter((_, i) => i < startIndex));
+			throw error;
 		}
 	};
-	const handleSelect = (inputFiles_0) => {
-		if (!inputFiles_0) return;
-		handleUpload(Array.from(inputFiles_0));
+	const handleSelect = (inputFiles) => {
+		if (!inputFiles) return;
+		const filesArray = Array.from(inputFiles);
+		handleUpload(filesArray);
 	};
 	const handleDrop = async (e) => {
 		if (!e.items) return;
-		const promises_0 = [];
-		e.items.forEach((item_0) => {
-			if (item_0.kind === "file") promises_0.push(item_0.getFile());
+		const promises = [];
+		e.items.forEach((item) => {
+			if (item.kind === "file") promises.push(item.getFile());
 		});
-		handleUpload(await Promise.all(promises_0));
+		const inputFiles = await Promise.all(promises);
+		handleUpload(inputFiles);
 	};
 	const handleRemove = useCallback((id) => {
 		fileRemove?.({ id });
-		setUploadState((prev_3) => prev_3.filter((state_1) => state_1.id !== id));
+		setUploadState((prev) => prev.filter((state) => state.id !== id));
 	}, [fileRemove]);
-	const handleCancelUpload = useCallback((index_2) => {
-		const findState = uploadState[index_2];
+	const handleCancelUpload = useCallback((index) => {
+		const findState = uploadState[index];
 		if (findState) {
 			findState.abortController?.abort("canceled by user");
-			setUploadState((prev_4) => prev_4.filter((__0, i_2) => i_2 !== index_2));
+			setUploadState((prev) => prev.filter((_, i) => i !== index));
 		}
 	}, [uploadState]);
 	return /* @__PURE__ */ jsxs(FormField, {
@@ -190,64 +191,24 @@ var FileUploadBase = (props) => {
 		}))]
 	});
 };
-var FileUpload = (props) => {
-	const $ = c(15);
+const FileUploadComponent = (props) => {
 	if ("field" in props && props.field) {
-		let field;
-		let innerProps;
-		let ref;
-		if ($[0] !== props) {
-			({field, ref, ...innerProps} = props);
-			$[0] = props;
-			$[1] = field;
-			$[2] = innerProps;
-			$[3] = ref;
-		} else {
-			field = $[1];
-			innerProps = $[2];
-			ref = $[3];
-		}
-		let t0;
-		if ($[4] !== innerProps || $[5] !== props.error || $[6] !== props.isDisabled || $[7] !== ref) {
-			t0 = (t1) => {
-				const { field: field_0, fieldState: t2 } = t1;
-				const { error } = t2;
-				return /* @__PURE__ */ jsx(FileUploadBase, {
-					...innerProps,
-					ref: mergeRefs(ref, field_0.ref),
-					value: field_0.value,
-					onChange: field_0.onChange,
-					isDisabled: field_0.disabled || props.isDisabled,
-					error: props.error ?? error?.message
-				});
-			};
-			$[4] = innerProps;
-			$[5] = props.error;
-			$[6] = props.isDisabled;
-			$[7] = ref;
-			$[8] = t0;
-		} else t0 = $[8];
-		let t1;
-		if ($[9] !== field.form || $[10] !== field.name || $[11] !== t0) {
-			t1 = /* @__PURE__ */ jsx(FieldController, {
-				control: field.form,
-				name: field.name,
-				render: t0
-			});
-			$[9] = field.form;
-			$[10] = field.name;
-			$[11] = t0;
-			$[12] = t1;
-		} else t1 = $[12];
-		return t1;
+		const { field, ref, ...innerProps } = props;
+		return /* @__PURE__ */ jsx(FieldController, {
+			control: field.form,
+			name: field.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
+			})
+		});
 	}
-	let t0;
-	if ($[13] !== props) {
-		t0 = /* @__PURE__ */ jsx(FileUploadBase, { ...props });
-		$[13] = props;
-		$[14] = t0;
-	} else t0 = $[14];
-	return t0;
+	return /* @__PURE__ */ jsx(FileUploadBase, { ...props });
 };
+const FileUpload = memo(FileUploadComponent);
 //#endregion
 export { FileUpload };

package/dist/components/form-field.d.ts

@@ -0,0 +1,24 @@
+import { FormFieldErrorProps } from "./inputs/FormField/FormFieldError.js";
+import { FormFieldHeaderProps } from "./inputs/FormField/FormFieldHeader.js";
+import { TextInputProps } from "./text-input.js";
+import { FocusEventHandler, MouseEventHandler, PropsWithChildren, Ref } from "react";
+//#region src/components/inputs/FormField/FormField.d.ts
+interface FormFieldProps extends Omit<FormFieldHeaderProps, "className" | "labelProps">, Omit<FormFieldErrorProps, "className"> {
+  errorMessageId?: string;
+  helperTextId?: string;
+  hideLabel?: boolean;
+  headerClassName?: string;
+  errorClassName?: string;
+  className?: string;
+}
+interface FormFieldComponentProps extends PropsWithChildren<FormFieldProps> {
+  ref?: Ref<HTMLDivElement>;
+  labelProps?: FormFieldHeaderProps["labelProps"];
+  as?: TextInputProps["as"];
+  tabIndex?: number;
+  onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+  onFocusCapture?: FocusEventHandler<HTMLDivElement>;
+}
+declare const FormField: ({ ref, as, label, tooltipText, helperText, helperTextId, isRequired, rightContent, isDisabled, error, errorMessageId, hideLabel, headerClassName, errorClassName, children, className, labelProps, isHeaderHidden, tabIndex, onMouseEnter, onFocusCapture }: FormFieldComponentProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { FormField, FormFieldProps };