@zayne-labs/ui-react 0.9.21 → 0.10.3

package/dist/esm/drop-zone-BPfSu99L.js

@@ -0,0 +1,381 @@
+import { __export } from "./chunk-Cl8Af3a2.js";
+import { SlotRoot } from "./slot-D1062oA5.js";
+import { cnMerge } from "./cn-_FbtIrlZ.js";
+import { isFile, isFunction, isString } from "@zayne-labs/toolkit-type-helpers";
+import { useCallback, useMemo, useRef } from "react";
+import { createImagePreview, createStore, dataAttr, handleFileValidationAsync, toArray } from "@zayne-labs/toolkit-core";
+import { createCustomContext, useCallbackRef, useConstant, useShallowComparedValue, useStore } from "@zayne-labs/toolkit-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { composeRefs, composeTwoEventHandlers, mergeTwoProps } from "@zayne-labs/toolkit-react/utils";
+import { createZustandContext } from "@zayne-labs/toolkit-react/zustand";
+
+//#region src/components/ui/drop-zone/drop-zone-context.ts
+const [DropZoneStoreContextProvider, useDropZoneStoreContext] = createZustandContext({
+	hookName: "useDropZoneStoreContext",
+	name: "DropZoneStoreContext",
+	providerName: "DropZoneRoot"
+});
+const [DropZonePropGettersContextProvider, usePropGettersContext] = createCustomContext({
+	hookName: "usePropGettersContext",
+	name: "PropGettersContext",
+	providerName: "DropZoneRoot"
+});
+
+//#endregion
+//#region src/components/ui/drop-zone/utils.ts
+const generateUniqueId = (file) => {
+	if (!isFile(file)) return file.id;
+	return `${file.name}-(${Math.round(performance.now())})-${crypto.randomUUID().slice(0, 8)}`;
+};
+const createObjectURL = (file, disallowPreviewForNonImageFiles) => {
+	if (disallowPreviewForNonImageFiles && !file.type.startsWith("image/")) return;
+	return createImagePreview(file);
+};
+const clearObjectURL = (fileState, disallowPreviewForNonImageFiles) => {
+	if (!isFile(fileState?.file)) return;
+	if (disallowPreviewForNonImageFiles && !fileState.file.type.startsWith("image/")) return;
+	if (!fileState.preview) return;
+	URL.revokeObjectURL(fileState.preview);
+};
+
+//#endregion
+//#region src/components/ui/drop-zone/drop-zone-store.ts
+const createDropZoneStore = (initStoreValues) => {
+	const { allowedFileTypes, disablePreviewForNonImageFiles, initialFiles, inputRef, maxFileCount, maxFileSize, multiple, onFilesChange, onUpload, onUploadError, onUploadErrorCollection, onUploadSuccess, rejectDuplicateFiles, validator } = initStoreValues;
+	const initialFileArray = toArray(initialFiles).filter(Boolean);
+	const clearInputValue = () => {
+		if (!inputRef.current) return;
+		inputRef.current.value = "";
+	};
+	const store = createStore((set, get) => ({
+		errors: [],
+		fileStateArray: initialFileArray.map((fileMeta) => ({
+			file: fileMeta,
+			id: fileMeta.id,
+			preview: fileMeta.url
+		})),
+		isDraggingOver: false,
+		actions: {
+			addFiles: async (files) => {
+				if (!files || files.length === 0) {
+					console.warn("No file selected!");
+					return;
+				}
+				const { fileStateArray } = get();
+				const newFiles = !multiple ? [files[0]] : files;
+				const { errors, validFiles } = await handleFileValidationAsync({
+					existingFiles: fileStateArray.map((fileWithPreview) => fileWithPreview.file),
+					hooks: {
+						onError: onUploadError,
+						onErrorCollection: onUploadErrorCollection,
+						onSuccess: onUploadSuccess
+					},
+					newFiles,
+					settings: {
+						allowedFileTypes,
+						maxFileCount,
+						maxFileSize,
+						rejectDuplicateFiles,
+						validator
+					}
+				});
+				if (validFiles.length === 0) {
+					set({
+						errors,
+						isDraggingOver: false
+					});
+					return;
+				}
+				const newFileStateArray = validFiles.map((file) => ({
+					file,
+					id: generateUniqueId(file),
+					preview: createObjectURL(file, disablePreviewForNonImageFiles)
+				}));
+				set({
+					errors,
+					fileStateArray: multiple ? [...fileStateArray, ...newFileStateArray] : newFileStateArray,
+					isDraggingOver: false
+				});
+				await onUpload?.({ fileStateArray: newFileStateArray });
+			},
+			clearErrors: () => {
+				set({ errors: [] });
+			},
+			clearFiles: () => {
+				const { fileStateArray } = get();
+				for (const fileState of fileStateArray) clearObjectURL(fileState, disablePreviewForNonImageFiles);
+				set({ fileStateArray: [] });
+			},
+			handleChange: async (event) => {
+				const fileList = event.target.files;
+				const { actions } = get();
+				await actions.addFiles(fileList);
+				clearInputValue();
+			},
+			handleDragEnter: (event) => {
+				event.preventDefault();
+				event.stopPropagation();
+				set({ isDraggingOver: true });
+			},
+			handleDragLeave: (event) => {
+				event.preventDefault();
+				event.stopPropagation();
+				set({ isDraggingOver: false });
+			},
+			handleDragOver: (event) => {
+				event.preventDefault();
+				event.stopPropagation();
+			},
+			handleDrop: async (event) => {
+				event.preventDefault();
+				event.stopPropagation();
+				if (inputRef.current?.disabled) return;
+				const fileList = event.dataTransfer.files;
+				const { actions } = get();
+				await actions.addFiles(fileList);
+			},
+			openFilePicker: () => {
+				inputRef.current?.click();
+			},
+			removeFile: (fileToRemoveOrFileId) => {
+				const { fileStateArray } = get();
+				const actualFileToRemove = isString(fileToRemoveOrFileId) ? fileStateArray.find((file) => file.id === fileToRemoveOrFileId) : fileToRemoveOrFileId;
+				if (!actualFileToRemove) return;
+				clearObjectURL(actualFileToRemove, disablePreviewForNonImageFiles);
+				const updatedFileStateArray = fileStateArray.filter((file) => file.id !== actualFileToRemove.id);
+				set({
+					errors: [],
+					fileStateArray: updatedFileStateArray
+				});
+			}
+		}
+	}));
+	store.subscribe.withSelector((state) => state.fileStateArray, (fileStateArray) => {
+		onFilesChange?.({ fileStateArray });
+	});
+	return store;
+};
+
+//#endregion
+//#region src/components/ui/drop-zone/use-drop-zone.ts
+const useDropZone = (props) => {
+	const { allowedFileTypes, classNames, disablePreviewForNonImageFiles = true, extraProps, initialFiles, maxFileCount, maxFileSize, multiple, onFilesChange, onUpload, onUploadError, onUploadErrorCollection, onUploadSuccess, rejectDuplicateFiles = true, shouldOpenFilePickerOnAreaClick = true, validator } = props ?? {};
+	const inputRef = useRef(null);
+	const savedOnFilesChange = useCallbackRef(onFilesChange);
+	const savedOnUpload = useCallbackRef(onUpload);
+	const savedOnUploadError = useCallbackRef(onUploadError);
+	const savedOnUploadErrorCollection = useCallbackRef(onUploadErrorCollection);
+	const savedOnUploadSuccess = useCallbackRef(onUploadSuccess);
+	const savedValidator = useCallbackRef(validator);
+	const constantInitialFiles = useConstant(() => initialFiles);
+	const shallowComparedMaxFileSize = useShallowComparedValue(maxFileSize);
+	const shallowComparedAllowedFileTypes = useShallowComparedValue(allowedFileTypes);
+	const storeApi = useMemo(() => {
+		return createDropZoneStore({
+			allowedFileTypes: shallowComparedAllowedFileTypes,
+			disablePreviewForNonImageFiles,
+			initialFiles: constantInitialFiles,
+			inputRef,
+			maxFileCount,
+			maxFileSize: shallowComparedMaxFileSize,
+			multiple,
+			onFilesChange: savedOnFilesChange,
+			onUpload: savedOnUpload,
+			onUploadError: savedOnUploadError,
+			onUploadErrorCollection: savedOnUploadErrorCollection,
+			onUploadSuccess: savedOnUploadSuccess,
+			rejectDuplicateFiles,
+			validator: savedValidator
+		});
+	}, [
+		shallowComparedAllowedFileTypes,
+		disablePreviewForNonImageFiles,
+		constantInitialFiles,
+		maxFileCount,
+		shallowComparedMaxFileSize,
+		multiple,
+		savedOnFilesChange,
+		savedOnUpload,
+		savedOnUploadError,
+		savedOnUploadErrorCollection,
+		savedOnUploadSuccess,
+		rejectDuplicateFiles,
+		savedValidator
+	]);
+	const useDropZoneStore = (selector) => {
+		return useStore(storeApi, selector);
+	};
+	const isDraggingOver = useDropZoneStore((store) => store.isDraggingOver);
+	const actions = useDropZoneStore((store) => store.actions);
+	const getContainerProps = useCallback((containerProps) => {
+		const mergedContainerProps = mergeTwoProps(extraProps?.container, containerProps);
+		return {
+			...mergedContainerProps,
+			className: cnMerge("relative isolate flex flex-col", isDraggingOver && "opacity-60", classNames?.container, mergedContainerProps.className),
+			"data-drag-over": dataAttr(isDraggingOver),
+			"data-scope": "dropzone",
+			"data-part": "container",
+			"data-slot": "dropzone-container",
+			onDragEnter: composeTwoEventHandlers(actions.handleDragEnter, mergedContainerProps.onDragEnter),
+			onDragLeave: composeTwoEventHandlers(actions.handleDragLeave, mergedContainerProps.onDragLeave),
+			onDragOver: composeTwoEventHandlers(actions.handleDragOver, mergedContainerProps.onDragOver),
+			onDrop: composeTwoEventHandlers(actions.handleDrop, mergedContainerProps.onDrop)
+		};
+	}, [
+		actions.handleDragEnter,
+		actions.handleDragLeave,
+		actions.handleDragOver,
+		actions.handleDrop,
+		classNames?.container,
+		extraProps?.container,
+		isDraggingOver
+	]);
+	const getInputProps = useCallback((inputProps) => {
+		const mergedInputProps = mergeTwoProps(extraProps?.input, inputProps);
+		return {
+			...mergedInputProps,
+			accept: allowedFileTypes ? allowedFileTypes.join(", ") : mergedInputProps.accept,
+			className: cnMerge(shouldOpenFilePickerOnAreaClick ? "absolute inset-0 z-[100] cursor-pointer opacity-0" : "hidden", classNames?.input, mergedInputProps.className),
+			"data-drag-over": dataAttr(isDraggingOver),
+			"data-scope": "dropzone",
+			"data-part": "input",
+			"data-slot": "dropzone-input",
+			multiple: multiple ?? mergedInputProps.multiple,
+			onChange: composeTwoEventHandlers(actions.handleChange, mergedInputProps.onChange),
+			ref: composeRefs(inputRef, mergedInputProps.ref),
+			type: "file"
+		};
+	}, [
+		actions.handleChange,
+		allowedFileTypes,
+		classNames?.input,
+		extraProps?.input,
+		isDraggingOver,
+		multiple,
+		shouldOpenFilePickerOnAreaClick
+	]);
+	const getTriggerProps = useCallback((triggerProps) => {
+		const mergedTriggerProps = mergeTwoProps(extraProps?.trigger, triggerProps);
+		return {
+			...mergedTriggerProps,
+			className: cnMerge(classNames?.trigger, mergedTriggerProps.className),
+			"data-scope": "dropzone",
+			"data-part": "trigger",
+			"data-slot": "dropzone-trigger",
+			onClick: composeTwoEventHandlers(actions.openFilePicker, mergedTriggerProps.onClick)
+		};
+	}, [
+		actions.openFilePicker,
+		classNames?.trigger,
+		extraProps?.trigger
+	]);
+	const propGetters = useMemo(() => ({
+		getContainerProps,
+		getInputProps,
+		getTriggerProps
+	}), [
+		getContainerProps,
+		getInputProps,
+		getTriggerProps
+	]);
+	const savedUseDropZoneStore = useCallbackRef(useDropZoneStore);
+	const result = useMemo(() => ({
+		inputRef,
+		propGetters,
+		storeApi,
+		useDropZoneStore: savedUseDropZoneStore
+	}), [
+		propGetters,
+		storeApi,
+		savedUseDropZoneStore
+	]);
+	return result;
+};
+
+//#endregion
+//#region src/components/ui/drop-zone/drop-zone.tsx
+function DropZoneRoot(props) {
+	const { children,...restOfProps } = props;
+	const dropZone = useDropZone(restOfProps);
+	return /* @__PURE__ */ jsx(DropZoneStoreContextProvider, {
+		store: dropZone.storeApi,
+		children: /* @__PURE__ */ jsx(DropZonePropGettersContextProvider, {
+			value: dropZone.propGetters,
+			children
+		})
+	});
+}
+function DropZoneContext(props) {
+	const { children, selector } = props;
+	const dropZoneCtx = useDropZoneStoreContext(selector);
+	const resolvedChildren = isFunction(children) ? children(dropZoneCtx) : children;
+	return resolvedChildren;
+}
+function DropZoneContainer(props) {
+	const { as: Element = "div", asChild,...restOfProps } = props;
+	const propGetters = usePropGettersContext();
+	const Component$1 = asChild ? SlotRoot : Element;
+	return /* @__PURE__ */ jsx(Component$1, { ...propGetters.getContainerProps(restOfProps) });
+}
+function DropZoneInput(props) {
+	const { asChild,...restOfProps } = props;
+	const propGetters = usePropGettersContext();
+	const Component$1 = asChild ? SlotRoot : "input";
+	return /* @__PURE__ */ jsx(Component$1, { ...propGetters.getInputProps(restOfProps) });
+}
+function DropZoneArea(props) {
+	const { children, extraProps, selector } = props;
+	return /* @__PURE__ */ jsxs(DropZoneContainer, {
+		...extraProps?.container,
+		children: [/* @__PURE__ */ jsx(DropZoneInput, { ...extraProps?.input }), /* @__PURE__ */ jsx(DropZoneContext, {
+			selector,
+			children
+		})]
+	});
+}
+function DropZoneTrigger(props) {
+	const { asChild,...restOfProps } = props;
+	const propGetters = usePropGettersContext();
+	const Component$1 = asChild ? SlotRoot : "button";
+	return /* @__PURE__ */ jsx(Component$1, { ...propGetters.getTriggerProps(restOfProps) });
+}
+function DropZoneFilePreview(props) {
+	const { children } = props;
+	const fileStateArray = useDropZoneStoreContext((store) => store.fileStateArray);
+	const actions = useDropZoneStoreContext((store) => store.actions);
+	if (fileStateArray.length === 0) return;
+	const resolvedChildren = isFunction(children) ? children({
+		actions,
+		fileStateArray
+	}) : children;
+	return resolvedChildren;
+}
+function DropZoneErrorPreview(props) {
+	const { children } = props;
+	const errors = useDropZoneStoreContext((store) => store.errors);
+	const actions = useDropZoneStoreContext((store) => store.actions);
+	if (errors.length === 0) return;
+	const resolvedChildren = isFunction(children) ? children({
+		actions,
+		errors
+	}) : children;
+	return resolvedChildren;
+}
+
+//#endregion
+//#region src/components/ui/drop-zone/drop-zone-parts.ts
+var drop_zone_parts_exports = {};
+__export(drop_zone_parts_exports, {
+	Area: () => DropZoneArea,
+	Container: () => DropZoneContainer,
+	Context: () => DropZoneContext,
+	ErrorPreview: () => DropZoneErrorPreview,
+	FilePreview: () => DropZoneFilePreview,
+	Input: () => DropZoneInput,
+	Root: () => DropZoneRoot,
+	Trigger: () => DropZoneTrigger
+});
+
+//#endregion
+export { DropZoneArea, DropZoneContainer, DropZoneContext, DropZoneErrorPreview, DropZoneFilePreview, DropZoneInput, DropZoneRoot, DropZoneTrigger, drop_zone_parts_exports, useDropZone, useDropZoneStoreContext };
+//# sourceMappingURL=drop-zone-BPfSu99L.js.map

package/dist/esm/drop-zone-BPfSu99L.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drop-zone-BPfSu99L.js","names":["useDropZoneStore: UseDropZoneResult[\"useDropZoneStore\"]","getContainerProps: UseDropZoneResult[\"propGetters\"][\"getContainerProps\"]","getInputProps: UseDropZoneResult[\"propGetters\"][\"getInputProps\"]","getTriggerProps: UseDropZoneResult[\"propGetters\"][\"getTriggerProps\"]","Component"],"sources":["../../src/components/ui/drop-zone/drop-zone-context.ts","../../src/components/ui/drop-zone/utils.ts","../../src/components/ui/drop-zone/drop-zone-store.ts","../../src/components/ui/drop-zone/use-drop-zone.ts","../../src/components/ui/drop-zone/drop-zone.tsx","../../src/components/ui/drop-zone/drop-zone-parts.ts"],"sourcesContent":["import { createCustomContext } from \"@zayne-labs/toolkit-react\";\nimport { createZustandContext } from \"@zayne-labs/toolkit-react/zustand\";\nimport type { DropZoneStore } from \"./drop-zone-store\";\nimport type { DropZonePropGetters } from \"./types\";\n\nconst [DropZoneStoreContextProvider, useDropZoneStoreContext] = createZustandContext<DropZoneStore>({\n\thookName: \"useDropZoneStoreContext\",\n\tname: \"DropZoneStoreContext\",\n\tproviderName: \"DropZoneRoot\",\n});\n\nconst [DropZonePropGettersContextProvider, usePropGettersContext] =\n\tcreateCustomContext<DropZonePropGetters>({\n\t\thookName: \"usePropGettersContext\",\n\t\tname: \"PropGettersContext\",\n\t\tproviderName: \"DropZoneRoot\",\n\t});\n\nexport {\n\tDropZoneStoreContextProvider,\n\tuseDropZoneStoreContext,\n\tDropZonePropGettersContextProvider,\n\tusePropGettersContext,\n};\n","import { createImagePreview, type FileMeta } from \"@zayne-labs/toolkit-core\";\nimport { isFile } from \"@zayne-labs/toolkit-type-helpers\";\nimport type { FileState } from \"./types\";\n\nexport const generateUniqueId = (file: File | FileMeta): string => {\n\tif (!isFile(file)) {\n\t\treturn file.id;\n\t}\n\n\treturn `${file.name}-(${Math.round(performance.now())})-${crypto.randomUUID().slice(0, 8)}`;\n};\n\nexport const createObjectURL = (file: File, disallowPreviewForNonImageFiles: boolean | undefined) => {\n\tif (disallowPreviewForNonImageFiles && !file.type.startsWith(\"image/\")) return;\n\n\treturn createImagePreview(file);\n};\n\nexport const clearObjectURL = (\n\tfileState: FileState | undefined,\n\tdisallowPreviewForNonImageFiles: boolean | undefined\n) => {\n\tif (!isFile(fileState?.file)) return;\n\n\tif (disallowPreviewForNonImageFiles && !fileState.file.type.startsWith(\"image/\")) return;\n\n\tif (!fileState.preview) return;\n\n\tURL.revokeObjectURL(fileState.preview);\n};\n","import { createStore, handleFileValidationAsync, toArray } from \"@zayne-labs/toolkit-core\";\nimport { isString } from \"@zayne-labs/toolkit-type-helpers\";\nimport type { DropZoneActions, DropZoneState } from \"./types\";\nimport type { UseDropZoneProps } from \"./use-drop-zone\";\nimport { clearObjectURL, createObjectURL, generateUniqueId } from \"./utils\";\n\nexport type DropZoneStore = DropZoneState & { actions: DropZoneActions };\n\nexport const createDropZoneStore = (\n\tinitStoreValues: Pick<\n\t\tUseDropZoneProps,\n\t\t| \"allowedFileTypes\"\n\t\t| \"disablePreviewForNonImageFiles\"\n\t\t| \"initialFiles\"\n\t\t| \"maxFileCount\"\n\t\t| \"maxFileSize\"\n\t\t| \"multiple\"\n\t\t| \"onFilesChange\"\n\t\t| \"onUpload\"\n\t\t| \"onUploadError\"\n\t\t| \"onUploadErrorCollection\"\n\t\t| \"onUploadSuccess\"\n\t\t| \"rejectDuplicateFiles\"\n\t\t| \"validator\"\n\t> & {\n\t\tinputRef: React.RefObject<HTMLInputElement | null>;\n\t}\n) => {\n\tconst {\n\t\tallowedFileTypes,\n\t\tdisablePreviewForNonImageFiles,\n\t\tinitialFiles,\n\t\tinputRef,\n\t\tmaxFileCount,\n\t\tmaxFileSize,\n\t\tmultiple,\n\t\tonFilesChange,\n\t\tonUpload,\n\t\tonUploadError,\n\t\tonUploadErrorCollection,\n\t\tonUploadSuccess,\n\t\trejectDuplicateFiles,\n\t\tvalidator,\n\t} = initStoreValues;\n\n\tconst initialFileArray = toArray(initialFiles).filter(Boolean);\n\n\tconst clearInputValue = () => {\n\t\tif (!inputRef.current) return;\n\n\t\tinputRef.current.value = \"\";\n\t};\n\n\tconst store = createStore<DropZoneStore>((set, get) => ({\n\t\terrors: [],\n\t\tfileStateArray: initialFileArray.map((fileMeta) => ({\n\t\t\tfile: fileMeta,\n\t\t\tid: fileMeta.id,\n\t\t\tpreview: fileMeta.url,\n\t\t})),\n\t\tisDraggingOver: false,\n\n\t\t// eslint-disable-next-line perfectionist/sort-objects -- Ignore\n\t\tactions: {\n\t\t\t// registerEventListeners: () => {\n\t\t\t// \tconst containerElement = {}\n\t\t\t// \tconst inputElement = {}\n\n\t\t\t// \tinputRef.current.addEventListener(\"change\", get().actions.handleChange);\n\t\t\t// \tinputRef.current.addEventListener(\"dragenter\", get().actions.handleDragEnter);\n\t\t\t// \tinputRef.current.addEventListener(\"dragleave\", get().actions.handleDragLeave);\n\t\t\t// \tinputRef.current.addEventListener(\"dragover\", get().actions.handleDragOver);\n\t\t\t// \tinputRef.current.addEventListener(\"drop\", get().actions.handleDrop);\n\t\t\t// },\n\t\t\taddFiles: async (files) => {\n\t\t\t\tif (!files || files.length === 0) {\n\t\t\t\t\tconsole.warn(\"No file selected!\");\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst { fileStateArray } = get();\n\n\t\t\t\t// == In single file mode, only use the first file\n\t\t\t\tconst newFiles = !multiple ? [files[0]] : files;\n\n\t\t\t\tconst { errors, validFiles } = await handleFileValidationAsync({\n\t\t\t\t\texistingFiles: fileStateArray.map((fileWithPreview) => fileWithPreview.file),\n\t\t\t\t\thooks: {\n\t\t\t\t\t\tonError: onUploadError,\n\t\t\t\t\t\tonErrorCollection: onUploadErrorCollection,\n\t\t\t\t\t\tonSuccess: onUploadSuccess,\n\t\t\t\t\t},\n\t\t\t\t\tnewFiles,\n\t\t\t\t\tsettings: {\n\t\t\t\t\t\tallowedFileTypes,\n\t\t\t\t\t\tmaxFileCount,\n\t\t\t\t\t\tmaxFileSize,\n\t\t\t\t\t\trejectDuplicateFiles,\n\t\t\t\t\t\tvalidator,\n\t\t\t\t\t},\n\t\t\t\t});\n\n\t\t\t\tif (validFiles.length === 0) {\n\t\t\t\t\tset({ errors, isDraggingOver: false });\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst newFileStateArray = validFiles.map((file) => ({\n\t\t\t\t\tfile,\n\t\t\t\t\tid: generateUniqueId(file),\n\t\t\t\t\tpreview: createObjectURL(file, disablePreviewForNonImageFiles),\n\t\t\t\t}));\n\n\t\t\t\tset({\n\t\t\t\t\terrors,\n\t\t\t\t\tfileStateArray: multiple ? [...fileStateArray, ...newFileStateArray] : newFileStateArray,\n\t\t\t\t\tisDraggingOver: false,\n\t\t\t\t});\n\n\t\t\t\tawait onUpload?.({ fileStateArray: newFileStateArray });\n\t\t\t},\n\t\t\tclearErrors: () => {\n\t\t\t\tset({ errors: [] });\n\t\t\t},\n\t\t\tclearFiles: () => {\n\t\t\t\tconst { fileStateArray } = get();\n\n\t\t\t\tfor (const fileState of fileStateArray) {\n\t\t\t\t\tclearObjectURL(fileState, disablePreviewForNonImageFiles);\n\t\t\t\t}\n\n\t\t\t\tset({ fileStateArray: [] });\n\t\t\t},\n\t\t\thandleChange: async (event) => {\n\t\t\t\tconst fileList = event.target.files;\n\n\t\t\t\tconst { actions } = get();\n\n\t\t\t\tawait actions.addFiles(fileList);\n\n\t\t\t\tclearInputValue();\n\t\t\t},\n\t\t\thandleDragEnter: (event) => {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tevent.stopPropagation();\n\n\t\t\t\tset({ isDraggingOver: true });\n\t\t\t},\n\t\t\thandleDragLeave: (event) => {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tevent.stopPropagation();\n\n\t\t\t\tset({ isDraggingOver: false });\n\t\t\t},\n\t\t\thandleDragOver: (event) => {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tevent.stopPropagation();\n\t\t\t},\n\t\t\thandleDrop: async (event) => {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tevent.stopPropagation();\n\n\t\t\t\tif (inputRef.current?.disabled) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst fileList = event.dataTransfer.files;\n\n\t\t\t\tconst { actions } = get();\n\n\t\t\t\tawait actions.addFiles(fileList);\n\t\t\t},\n\t\t\topenFilePicker: () => {\n\t\t\t\tinputRef.current?.click();\n\t\t\t},\n\t\t\tremoveFile: (fileToRemoveOrFileId) => {\n\t\t\t\tconst { fileStateArray } = get();\n\n\t\t\t\tconst actualFileToRemove =\n\t\t\t\t\tisString(fileToRemoveOrFileId) ?\n\t\t\t\t\t\tfileStateArray.find((file) => file.id === fileToRemoveOrFileId)\n\t\t\t\t\t:\tfileToRemoveOrFileId;\n\n\t\t\t\tif (!actualFileToRemove) return;\n\n\t\t\t\tclearObjectURL(actualFileToRemove, disablePreviewForNonImageFiles);\n\n\t\t\t\tconst updatedFileStateArray = fileStateArray.filter(\n\t\t\t\t\t(file) => file.id !== actualFileToRemove.id\n\t\t\t\t);\n\n\t\t\t\tset({ errors: [], fileStateArray: updatedFileStateArray });\n\t\t\t},\n\t\t},\n\t}));\n\n\tstore.subscribe.withSelector(\n\t\t(state) => state.fileStateArray,\n\t\t(fileStateArray) => {\n\t\t\tonFilesChange?.({ fileStateArray });\n\t\t}\n\t);\n\n\treturn store;\n};\n","import {\n\tdataAttr,\n\ttype FileMeta,\n\ttype FileValidationHooksAsync,\n\ttype FileValidationSettingsAsync,\n} from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef, useConstant, useShallowComparedValue, useStore } from \"@zayne-labs/toolkit-react\";\nimport type { InferProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { composeRefs, composeTwoEventHandlers, mergeTwoProps } from \"@zayne-labs/toolkit-react/utils\";\nimport type { Awaitable } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { cnMerge } from \"@/lib/utils/cn\";\nimport type { useDropZoneStoreContext } from \"./drop-zone-context\";\nimport { createDropZoneStore } from \"./drop-zone-store\";\nimport type { DropZonePropGetters, DropZoneState } from \"./types\";\n\nexport type ExtraProps = {\n\tcontainer?: InferProps<HTMLElement>;\n\tinput?: InferProps<\"input\">;\n\ttrigger?: InferProps<\"button\">;\n};\n\nexport type ClassNames = {\n\t[key in keyof ExtraProps]: string;\n};\n\nexport type UseDropZoneResult = {\n\tinputRef: React.RefObject<HTMLInputElement | null>;\n\tpropGetters: DropZonePropGetters;\n\tstoreApi: ReturnType<typeof createDropZoneStore>;\n\tuseDropZoneStore: typeof useDropZoneStoreContext;\n};\n\nexport type UseDropZoneProps = FileValidationSettingsAsync & {\n\t/**\n\t * CSS classes to apply to the various parts of the drop zone\n\t */\n\tclassNames?: ClassNames;\n\n\t/**\n\t * Whether to disallow preview for non-image files\n\t * @default true\n\t */\n\tdisablePreviewForNonImageFiles?: boolean;\n\n\t/**\n\t * Extra props to pass to various parts of the dropzone\n\t */\n\textraProps?: ExtraProps;\n\n\t/**\n\t * Initial files to populate the drop zone\n\t */\n\tinitialFiles?: FileMeta | FileMeta[] | null;\n\n\t/**\n\t * Whether to allow multiple files to be uploaded\n\t */\n\tmultiple?: boolean;\n\n\t/**\n\t * Callback function to be called when internal files state changes\n\t */\n\tonFilesChange?: (context: Pick<DropZoneState, \"fileStateArray\">) => void;\n\n\t/**\n\t * Callback function to be called when new files are uploaded\n\t */\n\tonUpload?: (context: Pick<DropZoneState, \"fileStateArray\">) => Awaitable<void>;\n\n\t/**\n\t * Callback function to be called on each file upload as they occur\n\t */\n\tonUploadError?: FileValidationHooksAsync[\"onError\"];\n\n\t/**\n\t * Callback function to be called once after all file upload errors have occurred\n\t */\n\tonUploadErrorCollection?: FileValidationHooksAsync[\"onErrorCollection\"];\n\n\t/**\n\t * Callback function to be called on file upload success\n\t */\n\tonUploadSuccess?: FileValidationHooksAsync[\"onSuccess\"];\n\n\t/**\n\t * Whether clicking the drop zone area will open the default file picker or not\n\t *\n\t * @default true\n\t */\n\tshouldOpenFilePickerOnAreaClick?: boolean;\n\n\t/**\n\t * Custom validation function.\n\t *\n\t * If the function returns false, the file will be rejected\n\t *\n\t */\n\tvalidator?: FileValidationSettingsAsync[\"validator\"];\n};\n\nexport const useDropZone = (props?: UseDropZoneProps): UseDropZoneResult => {\n\tconst {\n\t\tallowedFileTypes,\n\t\tclassNames,\n\t\tdisablePreviewForNonImageFiles = true,\n\t\textraProps,\n\t\tinitialFiles,\n\t\tmaxFileCount,\n\t\tmaxFileSize,\n\t\tmultiple,\n\t\tonFilesChange,\n\t\tonUpload,\n\t\tonUploadError,\n\t\tonUploadErrorCollection,\n\t\tonUploadSuccess,\n\t\trejectDuplicateFiles = true,\n\t\tshouldOpenFilePickerOnAreaClick = true,\n\t\tvalidator,\n\t} = props ?? {};\n\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\n\tconst savedOnFilesChange = useCallbackRef(onFilesChange);\n\tconst savedOnUpload = useCallbackRef(onUpload);\n\tconst savedOnUploadError = useCallbackRef(onUploadError);\n\tconst savedOnUploadErrorCollection = useCallbackRef(onUploadErrorCollection);\n\tconst savedOnUploadSuccess = useCallbackRef(onUploadSuccess);\n\tconst savedValidator = useCallbackRef(validator);\n\n\tconst constantInitialFiles = useConstant(() => initialFiles);\n\tconst shallowComparedMaxFileSize = useShallowComparedValue(maxFileSize);\n\tconst shallowComparedAllowedFileTypes = useShallowComparedValue(allowedFileTypes);\n\n\tconst storeApi = useMemo(() => {\n\t\treturn createDropZoneStore({\n\t\t\tallowedFileTypes: shallowComparedAllowedFileTypes,\n\t\t\tdisablePreviewForNonImageFiles,\n\t\t\tinitialFiles: constantInitialFiles,\n\t\t\tinputRef,\n\t\t\tmaxFileCount,\n\t\t\tmaxFileSize: shallowComparedMaxFileSize,\n\t\t\tmultiple,\n\t\t\tonFilesChange: savedOnFilesChange,\n\t\t\tonUpload: savedOnUpload,\n\t\t\tonUploadError: savedOnUploadError,\n\t\t\tonUploadErrorCollection: savedOnUploadErrorCollection,\n\t\t\tonUploadSuccess: savedOnUploadSuccess,\n\t\t\trejectDuplicateFiles,\n\t\t\tvalidator: savedValidator,\n\t\t});\n\t}, [\n\t\tshallowComparedAllowedFileTypes,\n\t\tdisablePreviewForNonImageFiles,\n\t\tconstantInitialFiles,\n\t\tmaxFileCount,\n\t\tshallowComparedMaxFileSize,\n\t\tmultiple,\n\t\tsavedOnFilesChange,\n\t\tsavedOnUpload,\n\t\tsavedOnUploadError,\n\t\tsavedOnUploadErrorCollection,\n\t\tsavedOnUploadSuccess,\n\t\trejectDuplicateFiles,\n\t\tsavedValidator,\n\t]);\n\n\tconst useDropZoneStore: UseDropZoneResult[\"useDropZoneStore\"] = (selector) => {\n\t\treturn useStore(storeApi, selector);\n\t};\n\n\tconst isDraggingOver = useDropZoneStore((store) => store.isDraggingOver);\n\tconst actions = useDropZoneStore((store) => store.actions);\n\n\tconst getContainerProps: UseDropZoneResult[\"propGetters\"][\"getContainerProps\"] = useCallback(\n\t\t(containerProps) => {\n\t\t\tconst mergedContainerProps = mergeTwoProps(extraProps?.container, containerProps);\n\n\t\t\treturn {\n\t\t\t\t...mergedContainerProps,\n\t\t\t\tclassName: cnMerge(\n\t\t\t\t\t\"relative isolate flex flex-col\",\n\t\t\t\t\tisDraggingOver && \"opacity-60\",\n\t\t\t\t\tclassNames?.container,\n\t\t\t\t\tmergedContainerProps.className\n\t\t\t\t),\n\t\t\t\t\"data-drag-over\": dataAttr(isDraggingOver),\n\t\t\t\t\"data-scope\": \"dropzone\",\n\t\t\t\t// eslint-disable-next-line perfectionist/sort-objects -- I need data-scope to be first\n\t\t\t\t\"data-part\": \"container\",\n\t\t\t\t\"data-slot\": \"dropzone-container\",\n\t\t\t\tonDragEnter: composeTwoEventHandlers(\n\t\t\t\t\tactions.handleDragEnter,\n\t\t\t\t\tmergedContainerProps.onDragEnter\n\t\t\t\t),\n\t\t\t\tonDragLeave: composeTwoEventHandlers(\n\t\t\t\t\tactions.handleDragLeave,\n\t\t\t\t\tmergedContainerProps.onDragLeave\n\t\t\t\t),\n\t\t\t\tonDragOver: composeTwoEventHandlers(actions.handleDragOver, mergedContainerProps.onDragOver),\n\t\t\t\tonDrop: composeTwoEventHandlers(actions.handleDrop, mergedContainerProps.onDrop),\n\t\t\t};\n\t\t},\n\t\t[\n\t\t\tactions.handleDragEnter,\n\t\t\tactions.handleDragLeave,\n\t\t\tactions.handleDragOver,\n\t\t\tactions.handleDrop,\n\t\t\tclassNames?.container,\n\t\t\textraProps?.container,\n\t\t\tisDraggingOver,\n\t\t]\n\t);\n\n\tconst getInputProps: UseDropZoneResult[\"propGetters\"][\"getInputProps\"] = useCallback(\n\t\t(inputProps) => {\n\t\t\tconst mergedInputProps = mergeTwoProps(extraProps?.input, inputProps);\n\n\t\t\treturn {\n\t\t\t\t...mergedInputProps,\n\t\t\t\taccept: allowedFileTypes ? allowedFileTypes.join(\", \") : mergedInputProps.accept,\n\t\t\t\tclassName: cnMerge(\n\t\t\t\t\tshouldOpenFilePickerOnAreaClick ?\n\t\t\t\t\t\t\"absolute inset-0 z-[100] cursor-pointer opacity-0\"\n\t\t\t\t\t:\t\"hidden\",\n\t\t\t\t\tclassNames?.input,\n\t\t\t\t\tmergedInputProps.className\n\t\t\t\t),\n\t\t\t\t\"data-drag-over\": dataAttr(isDraggingOver),\n\t\t\t\t\"data-scope\": \"dropzone\",\n\t\t\t\t// eslint-disable-next-line perfectionist/sort-objects -- I need data-scope to be first\n\t\t\t\t\"data-part\": \"input\",\n\t\t\t\t\"data-slot\": \"dropzone-input\",\n\t\t\t\tmultiple: multiple ?? mergedInputProps.multiple,\n\t\t\t\tonChange: composeTwoEventHandlers(actions.handleChange, mergedInputProps.onChange),\n\t\t\t\tref: composeRefs(inputRef, mergedInputProps.ref),\n\t\t\t\ttype: \"file\",\n\t\t\t};\n\t\t},\n\t\t[\n\t\t\tactions.handleChange,\n\t\t\tallowedFileTypes,\n\t\t\tclassNames?.input,\n\t\t\textraProps?.input,\n\t\t\tisDraggingOver,\n\t\t\tmultiple,\n\t\t\tshouldOpenFilePickerOnAreaClick,\n\t\t]\n\t);\n\n\tconst getTriggerProps: UseDropZoneResult[\"propGetters\"][\"getTriggerProps\"] = useCallback(\n\t\t(triggerProps) => {\n\t\t\tconst mergedTriggerProps = mergeTwoProps(extraProps?.trigger, triggerProps);\n\n\t\t\treturn {\n\t\t\t\t...mergedTriggerProps,\n\t\t\t\tclassName: cnMerge(classNames?.trigger, mergedTriggerProps.className),\n\t\t\t\t\"data-scope\": \"dropzone\",\n\t\t\t\t// eslint-disable-next-line perfectionist/sort-objects -- I need data-scope to be first\n\t\t\t\t\"data-part\": \"trigger\",\n\t\t\t\t\"data-slot\": \"dropzone-trigger\",\n\t\t\t\tonClick: composeTwoEventHandlers(actions.openFilePicker, mergedTriggerProps.onClick),\n\t\t\t};\n\t\t},\n\t\t[actions.openFilePicker, classNames?.trigger, extraProps?.trigger]\n\t);\n\n\t// const getDeleteProps: UseDropZoneResult[\"propGetters\"][\"getTriggerProps\"] = useCallback(\n\t// \t(triggerProps) => {\n\t// \t\tconst mergedTriggerProps = mergeTwoProps(extraProps?.trigger, triggerProps);\n\n\t// \t\treturn {\n\t// \t\t\t...mergedTriggerProps,\n\t// \t\t\tclassName: cnMerge(classNames?.trigger, mergedTriggerProps.className),\n\t// \t\t\t\"data-scope\": \"dropzone\",\n\t// \t\t\t// eslint-disable-next-line perfectionist/sort-objects -- I need data-scope to be first\n\t// \t\t\t\"data-part\": \"trigger\",\n\t// \t\t\t\"data-slot\": \"dropzone-trigger\",\n\t// \t\t\tonClick: composeTwoEventHandlers(actions.openFilePicker, mergedTriggerProps.onClick),\n\t// \t\t};\n\t// \t},\n\t// \t[actions.openFilePicker, classNames?.trigger, extraProps?.trigger]\n\t// );\n\n\tconst propGetters = useMemo(\n\t\t() => ({ getContainerProps, getInputProps, getTriggerProps }),\n\t\t[getContainerProps, getInputProps, getTriggerProps]\n\t);\n\n\tconst savedUseDropZoneStore = useCallbackRef(useDropZoneStore);\n\n\tconst result = useMemo<UseDropZoneResult>(\n\t\t() =>\n\t\t\t({\n\t\t\t\tinputRef,\n\t\t\t\tpropGetters,\n\t\t\t\tstoreApi,\n\t\t\t\tuseDropZoneStore: savedUseDropZoneStore,\n\t\t\t}) satisfies UseDropZoneResult,\n\t\t[propGetters, storeApi, savedUseDropZoneStore]\n\t);\n\n\treturn result;\n};\n","\"use client\";\n\nimport type { PolymorphicProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { isFunction, type SelectorFn } from \"@zayne-labs/toolkit-type-helpers\";\nimport * as React from \"react\";\nimport { Slot } from \"@/components/common\";\nimport {\n\tDropZonePropGettersContextProvider,\n\tDropZoneStoreContextProvider,\n\tuseDropZoneStoreContext,\n\tusePropGettersContext,\n} from \"./drop-zone-context\";\nimport type { DropZoneStore } from \"./drop-zone-store\";\nimport { type ExtraProps, type UseDropZoneProps, useDropZone } from \"./use-drop-zone\";\n\nexport type DropZoneRootProps = UseDropZoneProps & { children: React.ReactNode };\n\nexport function DropZoneRoot(props: DropZoneRootProps) {\n\tconst { children, ...restOfProps } = props;\n\n\tconst dropZone = useDropZone(restOfProps);\n\n\treturn (\n\t\t<DropZoneStoreContextProvider store={dropZone.storeApi}>\n\t\t\t<DropZonePropGettersContextProvider value={dropZone.propGetters}>\n\t\t\t\t{children}\n\t\t\t</DropZonePropGettersContextProvider>\n\t\t</DropZoneStoreContextProvider>\n\t);\n}\n\nexport type DropZoneContextProps<TSlice> = {\n\tchildren: React.ReactNode | ((props: TSlice) => React.ReactNode);\n\tselector?: SelectorFn<DropZoneStore, TSlice>;\n};\n\nexport function DropZoneContext<TSlice = DropZoneStore>(props: DropZoneContextProps<TSlice>) {\n\tconst { children, selector } = props;\n\n\tconst dropZoneCtx = useDropZoneStoreContext(selector);\n\n\tconst resolvedChildren = isFunction(children) ? children(dropZoneCtx) : children;\n\n\treturn resolvedChildren;\n}\n\ntype DropZoneContainerProps = ExtraProps[\"container\"] & { asChild?: boolean };\n\nexport function DropZoneContainer<TElement extends React.ElementType = \"div\">(\n\tprops: PolymorphicProps<TElement, DropZoneContainerProps>\n) {\n\tconst { as: Element = \"div\", asChild, ...restOfProps } = props;\n\n\tconst propGetters = usePropGettersContext();\n\n\tconst Component = asChild ? Slot.Root : Element;\n\n\treturn <Component {...propGetters.getContainerProps(restOfProps)} />;\n}\n\ntype DropZoneInputProps = ExtraProps[\"input\"] & { asChild?: boolean };\n\nexport function DropZoneInput(props: DropZoneInputProps) {\n\tconst { asChild, ...restOfProps } = props;\n\n\tconst propGetters = usePropGettersContext();\n\n\tconst Component = asChild ? Slot.Root : \"input\";\n\n\treturn <Component {...propGetters.getInputProps(restOfProps)} />;\n}\n\ntype DropZoneAreaProps<TSlice> = {\n\tchildren: React.ReactNode | ((props: TSlice) => React.ReactNode);\n\textraProps?: Pick<ExtraProps, \"container\" | \"input\">;\n\tselector?: SelectorFn<DropZoneStore, TSlice>;\n};\n\nexport function DropZoneArea<TSlice = DropZoneStore>(props: DropZoneAreaProps<TSlice>) {\n\tconst { children, extraProps, selector } = props;\n\n\treturn (\n\t\t<DropZoneContainer {...extraProps?.container}>\n\t\t\t<DropZoneInput {...extraProps?.input} />\n\n\t\t\t<DropZoneContext selector={selector}>{children}</DropZoneContext>\n\t\t</DropZoneContainer>\n\t);\n}\n\ntype DropZoneTriggerProps = ExtraProps[\"trigger\"] & { asChild?: boolean };\n\nexport function DropZoneTrigger(props: DropZoneTriggerProps) {\n\tconst { asChild, ...restOfProps } = props;\n\n\tconst propGetters = usePropGettersContext();\n\n\tconst Component = asChild ? Slot.Root : \"button\";\n\n\treturn <Component {...propGetters.getTriggerProps(restOfProps)} />;\n}\n\ntype DropZoneFilePreviewProps = {\n\tchildren:\n\t\t| React.ReactNode\n\t\t| ((props: Pick<DropZoneStore, \"actions\" | \"fileStateArray\">) => React.ReactNode);\n};\n\nexport function DropZoneFilePreview(props: DropZoneFilePreviewProps) {\n\tconst { children } = props;\n\n\tconst fileStateArray = useDropZoneStoreContext((store) => store.fileStateArray);\n\tconst actions = useDropZoneStoreContext((store) => store.actions);\n\n\tif (fileStateArray.length === 0) return;\n\n\tconst resolvedChildren = isFunction(children) ? children({ actions, fileStateArray }) : children;\n\n\treturn resolvedChildren;\n}\n\ntype DropZoneErrorPreviewProps = {\n\tchildren: React.ReactNode | ((props: Pick<DropZoneStore, \"actions\" | \"errors\">) => React.ReactNode);\n};\n\nexport function DropZoneErrorPreview(props: DropZoneErrorPreviewProps) {\n\tconst { children } = props;\n\n\tconst errors = useDropZoneStoreContext((store) => store.errors);\n\tconst actions = useDropZoneStoreContext((store) => store.actions);\n\n\tif (errors.length === 0) return;\n\n\tconst resolvedChildren = isFunction(children) ? children({ actions, errors }) : children;\n\n\treturn resolvedChildren;\n}\n","export {\n\tDropZoneArea as Area,\n\tDropZoneContainer as Container,\n\tDropZoneContext as Context,\n\tDropZoneErrorPreview as ErrorPreview,\n\tDropZoneFilePreview as FilePreview,\n\tDropZoneInput as Input,\n\tDropZoneRoot as Root,\n\tDropZoneTrigger as Trigger,\n} from \"./drop-zone\";\n"],"mappings":"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"}

package/dist/esm/{error-boundary-B3ycUZ1t.js → error-boundary-xM9An3gz.js}

@@ -1,5 +1,5 @@
-import { Component, useState } from "react";
 import { isFunction } from "@zayne-labs/toolkit-type-helpers";
+import { Component, useState } from "react";
 import { createCustomContext, useCallbackRef } from "@zayne-labs/toolkit-react";
 import { jsx } from "react/jsx-runtime";
 
@@ -65,10 +65,9 @@ var ErrorBoundary = class extends Component {
 				childToRender = fallback(fallbackRenderProps);
 				break;
 			}
-			case Boolean(fallback): {
+			case Boolean(fallback):
 				childToRender = fallback;
 				break;
-			}
 			default: console.warn("No fallback provided to error boundary");
 		}
 		const contextValue = {
@@ -123,4 +122,4 @@ const useErrorBoundary = () => {
 
 //#endregion
 export { ErrorBoundary, useErrorBoundary, useErrorBoundaryContext };
-//# sourceMappingURL=error-boundary-B3ycUZ1t.js.map
+//# sourceMappingURL=error-boundary-xM9An3gz.js.map

package/dist/esm/error-boundary-xM9An3gz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-boundary-xM9An3gz.js","names":["initialState: ErrorBoundaryState","#resetErrorBoundary"],"sources":["../../src/components/common/error-boundary/error-boundary-context.ts","../../src/components/common/error-boundary/error-boundary.tsx","../../src/components/common/error-boundary/useErrorBoundary.ts"],"sourcesContent":["import { createCustomContext } from \"@zayne-labs/toolkit-react\";\n\nexport type ErrorBoundaryContextType = {\n\terror: unknown;\n\thasError: boolean;\n\tresetErrorBoundary: (...args: unknown[]) => void;\n};\n\nexport const [ErrorBoundaryContext, useErrorBoundaryContext] =\n\tcreateCustomContext<ErrorBoundaryContextType>({\n\t\thookName: \"useErrorBoundaryContext\",\n\t\tname: \"ErrorBoundaryContext\",\n\t\tproviderName: \"ErrorBoundaryContextProvider\",\n\t});\n","import * as React from \"react\";\n\nimport { isFunction } from \"@zayne-labs/toolkit-type-helpers\";\nimport { Component } from \"react\";\nimport { ErrorBoundaryContext, type ErrorBoundaryContextType } from \"./error-boundary-context\";\nimport type { ErrorBoundaryProps, FallbackProps } from \"./types\";\n\ntype ErrorBoundaryState =\n\t| {\n\t\t\terror: Error;\n\t\t\thasError: true;\n\t  }\n\t| {\n\t\t\terror: null;\n\t\t\thasError: false;\n\t  };\n\nconst initialState: ErrorBoundaryState = {\n\terror: null,\n\thasError: false,\n};\n\nconst hasArrayChanged = (arrayOne: unknown[] = [], arrayTwo: unknown[] = []) => {\n\treturn (\n\t\tarrayOne.length !== arrayTwo.length\n\t\t|| arrayOne.some((item, index) => !Object.is(item, arrayTwo[index]))\n\t);\n};\n\n/**\n * Copied from react-error-boundary package\n * @see https://github.com/bvaughn/react-error-boundary\n */\n\nexport class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {\n\tconstructor(props: ErrorBoundaryProps) {\n\t\tsuper(props);\n\n\t\tthis.state = initialState;\n\t}\n\n\tstatic getDerivedStateFromError(error: Error) {\n\t\treturn { error, hasError: true };\n\t}\n\n\toverride componentDidCatch(error: Error, info: React.ErrorInfo) {\n\t\tthis.props.onError?.({\n\t\t\terror,\n\t\t\tinfo,\n\t\t});\n\t}\n\n\toverride componentDidUpdate(prevProps: ErrorBoundaryProps, prevState: ErrorBoundaryState) {\n\t\tconst { hasError } = this.state;\n\t\tconst { resetKeys } = this.props;\n\n\t\t// == There's an edge case where if the thing that triggered the error happens to *also* be in the resetKeys array, we'd end up resetting the error boundary immediately.\n\t\t// == This would likely trigger a second error to be thrown.\n\t\t// == So we make sure that we don't check the resetKeys on the first call of cDU after the error is set.\n\n\t\tif (hasError && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {\n\t\t\tthis.props.onReset?.({\n\t\t\t\tnext: resetKeys,\n\t\t\t\tprev: prevProps.resetKeys,\n\t\t\t\treason: \"keys\",\n\t\t\t});\n\n\t\t\tthis.setState(initialState);\n\t\t}\n\t}\n\n\toverride render() {\n\t\tconst { children, fallback } = this.props;\n\t\tconst { error, hasError } = this.state;\n\n\t\tlet childToRender = children;\n\n\t\tif (hasError) {\n\t\t\tswitch (true) {\n\t\t\t\tcase isFunction(fallback): {\n\t\t\t\t\tconst fallbackRenderProps = {\n\t\t\t\t\t\terror,\n\t\t\t\t\t\tresetErrorBoundary: this.#resetErrorBoundary,\n\t\t\t\t\t} satisfies FallbackProps;\n\n\t\t\t\t\tchildToRender = fallback(fallbackRenderProps);\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tcase Boolean(fallback): {\n\t\t\t\t\tchildToRender = fallback;\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tdefault: {\n\t\t\t\t\tconsole.warn(\"No fallback provided to error boundary\");\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst contextValue = {\n\t\t\terror,\n\t\t\thasError,\n\t\t\tresetErrorBoundary: this.#resetErrorBoundary,\n\t\t} satisfies ErrorBoundaryContextType;\n\n\t\treturn <ErrorBoundaryContext value={contextValue}>{childToRender}</ErrorBoundaryContext>;\n\t}\n\n\t#resetErrorBoundary = (...parameters: unknown[]) => {\n\t\tconst { error } = this.state;\n\n\t\tif (error !== null) {\n\t\t\tthis.props.onReset?.({\n\t\t\t\targs: parameters,\n\t\t\t\treason: \"imperative-api\",\n\t\t\t});\n\n\t\t\tthis.setState(initialState);\n\t\t}\n\t};\n}\n","import { useCallbackRef } from \"@zayne-labs/toolkit-react\";\nimport { useState } from \"react\";\nimport { useErrorBoundaryContext } from \"./error-boundary-context\";\n\ntype UseErrorBoundaryState<TError extends Error> =\n\t| {\n\t\t\terror: null;\n\t\t\thasError: false;\n\t  }\n\t| {\n\t\t\terror: TError;\n\t\t\thasError: true;\n\t  };\n\nexport const useErrorBoundary = <TError extends Error>() => {\n\tconst { resetErrorBoundary } = useErrorBoundaryContext();\n\n\tconst [state, setState] = useState<UseErrorBoundaryState<TError>>({\n\t\terror: null,\n\t\thasError: false,\n\t});\n\n\tif (state.hasError) {\n\t\tthrow state.error;\n\t}\n\n\tconst resetBoundary = useCallbackRef(() => {\n\t\tresetErrorBoundary();\n\n\t\tsetState({\n\t\t\terror: null,\n\t\t\thasError: false,\n\t\t});\n\t});\n\n\tconst showBoundary = useCallbackRef((error: TError) => {\n\t\tsetState({\n\t\t\terror,\n\t\t\thasError: true,\n\t\t});\n\t});\n\n\treturn { resetBoundary, showBoundary };\n};\n"],"mappings":";;;;;;AAQA,MAAa,CAAC,sBAAsB,wBAAwB,GAC3D,oBAA8C;CAC7C,UAAU;CACV,MAAM;CACN,cAAc;CACd;;;;ACIF,MAAMA,eAAmC;CACxC,OAAO;CACP,UAAU;CACV;AAED,MAAM,mBAAmB,WAAsB,EAAE,EAAE,WAAsB,EAAE,KAAK;AAC/E,QACC,SAAS,WAAW,SAAS,UAC1B,SAAS,MAAM,MAAM,UAAU,CAAC,OAAO,GAAG,MAAM,SAAS;AAE7D;;;;;AAOD,IAAa,gBAAb,cAAmC,UAAkD;CACpF,YAAY,OAA2B;AACtC,QAAM;AAEN,OAAK,QAAQ;CACb;CAED,OAAO,yBAAyB,OAAc;AAC7C,SAAO;GAAE;GAAO,UAAU;GAAM;CAChC;CAED,AAAS,kBAAkB,OAAc,MAAuB;AAC/D,OAAK,MAAM,UAAU;GACpB;GACA;GACA;CACD;CAED,AAAS,mBAAmB,WAA+B,WAA+B;EACzF,MAAM,EAAE,UAAU,GAAG,KAAK;EAC1B,MAAM,EAAE,WAAW,GAAG,KAAK;AAM3B,MAAI,YAAY,UAAU,UAAU,QAAQ,gBAAgB,UAAU,WAAW,YAAY;AAC5F,QAAK,MAAM,UAAU;IACpB,MAAM;IACN,MAAM,UAAU;IAChB,QAAQ;IACR;AAED,QAAK,SAAS;EACd;CACD;CAED,AAAS,SAAS;EACjB,MAAM,EAAE,UAAU,UAAU,GAAG,KAAK;EACpC,MAAM,EAAE,OAAO,UAAU,GAAG,KAAK;EAEjC,IAAI,gBAAgB;AAEpB,MAAI,SACH,SAAQ,MAAR;GACC,KAAK,WAAW,WAAW;IAC1B,MAAM,sBAAsB;KAC3B;KACA,oBAAoB,MAAKC;KACzB;AAED,oBAAgB,SAAS;AACzB;GACA;GAED,KAAK,QAAQ;AACZ,oBAAgB;AAChB;GAGD,QACC,SAAQ,KAAK;EAEd;EAGF,MAAM,eAAe;GACpB;GACA;GACA,oBAAoB,MAAKA;GACzB;AAED,SAAO,oBAAC;GAAqB,OAAO;aAAe;;CACnD;CAED,uBAAuB,GAAG,eAA0B;EACnD,MAAM,EAAE,OAAO,GAAG,KAAK;AAEvB,MAAI,UAAU,MAAM;AACnB,QAAK,MAAM,UAAU;IACpB,MAAM;IACN,QAAQ;IACR;AAED,QAAK,SAAS;EACd;CACD;AACD;;;;AC3GD,MAAa,yBAA+C;CAC3D,MAAM,EAAE,oBAAoB,GAAG;CAE/B,MAAM,CAAC,OAAO,SAAS,GAAG,SAAwC;EACjE,OAAO;EACP,UAAU;EACV;AAED,KAAI,MAAM,SACT,OAAM,MAAM;CAGb,MAAM,gBAAgB,qBAAqB;AAC1C;AAEA,WAAS;GACR,OAAO;GACP,UAAU;GACV;CACD;CAED,MAAM,eAAe,gBAAgB,UAAkB;AACtD,WAAS;GACR;GACA,UAAU;GACV;CACD;AAED,QAAO;EAAE;EAAe;EAAc;AACtC"}

package/dist/esm/{for-aTw1TgJo.js → for-DGs2XZ21.js}

@@ -1,20 +1,20 @@
-import "react";
 import { isArray, isNumber } from "@zayne-labs/toolkit-type-helpers";
+import "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/common/for/for.tsx
 function For(props) {
-	const { children, each, fallback = null, render } = props;
+	const { children, each, fallback = null, renderItem } = props;
 	if (each == null || isNumber(each) && each === 0 || isArray(each) && each.length === 0) return fallback;
 	const resolvedArray = isNumber(each) ? [...Array(each).keys()] : each;
 	if (resolvedArray.length === 0) return fallback;
 	const JSXElementList = resolvedArray.map((...params) => {
-		return typeof children === "function" ? children(...params) : render(...params);
+		return typeof children === "function" ? children(...params) : renderItem(...params);
 	});
 	return JSXElementList;
 }
 function ForWithWrapper(props) {
-	const { as: ListContainer = "ul", children, className, each, ref, render,...restOfListProps } = props;
+	const { as: ListContainer = "ul", children, className, each, ref, renderItem,...restOfListProps } = props;
 	return /* @__PURE__ */ jsx(ListContainer, {
 		ref,
 		className,
@@ -22,7 +22,7 @@ function ForWithWrapper(props) {
 		children: /* @__PURE__ */ jsx(For, {
 			children,
 			each,
-			render
+			renderItem
 		})
 	});
 }
@@ -39,4 +39,4 @@ const getElementList = (variant) => {
 
 //#endregion
 export { For, ForWithWrapper, getElementList };
-//# sourceMappingURL=for-aTw1TgJo.js.map
+//# sourceMappingURL=for-DGs2XZ21.js.map

package/dist/esm/for-DGs2XZ21.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"for-DGs2XZ21.js","names":[],"sources":["../../src/components/common/for/for.tsx","../../src/components/common/for/getElementList.ts"],"sourcesContent":["import type { DiscriminatedRenderItemProps, PolymorphicProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { type ExtractUnion, isArray, isNumber, type Prettify } from \"@zayne-labs/toolkit-type-helpers\";\nimport * as React from \"react\";\n\n// prettier-ignore\ntype RenderPropFn<TArray> = (\n\titem: TArray extends readonly unknown[] ? ExtractUnion<TArray> : TArray extends number ? number : unknown,\n\tindex: number,\n\tarray: TArray extends readonly unknown[] ? TArray : TArray extends number ? number[] : unknown[]\n) => React.ReactNode;\n\nexport type ForRenderProps<TArrayItem> = DiscriminatedRenderItemProps<RenderPropFn<TArrayItem>>;\n\n/* eslint-disable perfectionist/sort-intersection-types -- Prefer the object to come first before the render props */\ntype ForProps<TArray> = Prettify<\n\t{\n\t\teach: TArray;\n\t\tfallback?: React.ReactNode;\n\t} & ForRenderProps<TArray>\n>;\n\n/* eslint-enable perfectionist/sort-intersection-types -- Prefer the object to come first before the render props */\n\nexport function For<const TArray>(props: ForProps<TArray>) {\n\tconst { children, each, fallback = null, renderItem } = props;\n\n\tif (each == null || (isNumber(each) && each === 0) || (isArray(each) && each.length === 0)) {\n\t\treturn fallback;\n\t}\n\n\tconst resolvedArray = isNumber(each) ? [...Array(each).keys()] : (each as unknown[]);\n\n\tif (resolvedArray.length === 0) {\n\t\treturn fallback;\n\t}\n\n\tconst JSXElementList = resolvedArray.map((...params) => {\n\t\ttype Params = Parameters<RenderPropFn<TArray>>;\n\n\t\treturn typeof children === \"function\" ?\n\t\t\t\tchildren(...(params as Params))\n\t\t\t:\trenderItem(...(params as Params));\n\t});\n\n\treturn JSXElementList;\n}\n\nexport function ForWithWrapper<TArrayItem, TElement extends React.ElementType = \"ul\">(\n\tprops: PolymorphicProps<TElement, ForProps<TArrayItem>>\n) {\n\tconst {\n\t\tas: ListContainer = \"ul\",\n\t\tchildren,\n\t\tclassName,\n\t\teach,\n\t\tref,\n\t\trenderItem,\n\t\t...restOfListProps\n\t} = props;\n\n\treturn (\n\t\t<ListContainer ref={ref} className={className} {...restOfListProps}>\n\t\t\t<For {...({ children, each, renderItem } as ForProps<TArrayItem>)} />\n\t\t</ListContainer>\n\t);\n}\n","import { For, ForWithWrapper } from \"./for\";\n\ntype GetElementListResult<TVariant extends \"base\" | \"withWrapper\"> = TVariant extends \"base\"\n\t? [typeof For]\n\t: [typeof ForWithWrapper];\n\nconst getElementList = <TVariant extends \"base\" | \"withWrapper\" = \"withWrapper\">(\n\tvariant?: TVariant\n): GetElementListResult<TVariant> => {\n\tswitch (variant) {\n\t\tcase \"base\": {\n\t\t\treturn [For] as never;\n\t\t}\n\t\tcase \"withWrapper\": {\n\t\t\treturn [ForWithWrapper] as never;\n\t\t}\n\t\tdefault: {\n\t\t\treturn [ForWithWrapper] as never;\n\t\t}\n\t}\n};\n\nexport { getElementList };\n"],"mappings":";;;;;AAuBA,SAAgB,IAAkB,OAAyB;CAC1D,MAAM,EAAE,UAAU,MAAM,WAAW,MAAM,YAAY,GAAG;AAExD,KAAI,QAAQ,QAAS,SAAS,SAAS,SAAS,KAAO,QAAQ,SAAS,KAAK,WAAW,EACvF,QAAO;CAGR,MAAM,gBAAgB,SAAS,QAAQ,CAAC,GAAG,MAAM,MAAM,OAAO,GAAI;AAElE,KAAI,cAAc,WAAW,EAC5B,QAAO;CAGR,MAAM,iBAAiB,cAAc,KAAK,GAAG,WAAW;AAGvD,SAAO,OAAO,aAAa,aACzB,SAAS,GAAI,UACZ,WAAW,GAAI;CAClB;AAED,QAAO;AACP;AAED,SAAgB,eACf,OACC;CACD,MAAM,EACL,IAAI,gBAAgB,MACpB,UACA,WACA,MACA,KACA,WACA,GAAG,iBACH,GAAG;AAEJ,QACC,oBAAC;EAAmB;EAAgB;EAAW,GAAI;YAClD,oBAAC;GAAW;GAAU;GAAM;;;AAG9B;;;;AC3DD,MAAM,kBACL,YACoC;AACpC,SAAQ,SAAR;EACC,KAAK,OACJ,QAAO,CAAC,IAAI;EAEb,KAAK,cACJ,QAAO,CAAC,eAAe;EAExB,QACC,QAAO,CAAC,eAAe;CAExB;AACD"}

package/dist/esm/{form-6RV0u4YT.js → form-BnSpmc4f.js}

@@ -1,11 +1,11 @@
 import { __export } from "./chunk-Cl8Af3a2.js";
-import { getMultipleSlots } from "./getSlot-D1_uG-Ym.js";
-import { SlotRoot } from "./slot-RXTKo4L7.js";
-import { getElementList } from "./for-aTw1TgJo.js";
+import { getMultipleSlots } from "./getSlot-Cf5ON6lE.js";
+import { SlotRoot } from "./slot-D1062oA5.js";
+import { getElementList } from "./for-DGs2XZ21.js";
 import { cnMerge } from "./cn-_FbtIrlZ.js";
+import { defineEnum, isObject } from "@zayne-labs/toolkit-type-helpers";
 import { Fragment, createElement, useEffect, useId, useMemo, useRef } from "react";
 import { dataAttr, on, toArray } from "@zayne-labs/toolkit-core";
-import { defineEnum, isObject } from "@zayne-labs/toolkit-type-helpers";
 import { ContextError, createCustomContext, useCallbackRef, useToggle } from "@zayne-labs/toolkit-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { composeRefs, composeTwoEventHandlers } from "@zayne-labs/toolkit-react/utils";
@@ -200,17 +200,16 @@ function FormFieldContext(props) {
 	return render(fieldContextValues);
 }
 function FormLabel(props) {
-	const { formItemId, name } = useStrictFormFieldContext();
-	const { children, className,...restOfProps } = props;
-	const { isDisabled, isInvalid } = useLaxFormFieldState({ name });
+	const fieldContextValues = useLaxFormFieldContext();
+	const { children, htmlFor = fieldContextValues?.formItemId,...restOfProps } = props;
+	const { isDisabled, isInvalid } = useLaxFormFieldState({ name: fieldContextValues?.name });
 	return /* @__PURE__ */ jsx("label", {
 		"data-scope": "form",
 		"data-part": "label",
 		"data-slot": "form-label",
 		"data-disabled": dataAttr(isDisabled),
 		"data-invalid": dataAttr(isInvalid),
-		htmlFor: formItemId,
-		className,
+		htmlFor,
 		...restOfProps,
 		children
 	});
@@ -400,7 +399,7 @@ function FormDescription(props) {
 const FormErrorMessagePrimitive = (props) => {
 	const fieldContextValues = useLaxFormFieldContext();
 	const rootContextValues = useFormMethodsContext({ strict: false });
-	const { children, className, classNames, control = rootContextValues?.control, disableErrorAnimation = false, disableScrollToErrorField = false, fieldName = fieldContextValues?.name, render, type = "regular" } = props;
+	const { children, className, classNames, control = rootContextValues?.control, disableErrorAnimation = false, disableScrollToErrorField = false, fieldName = fieldContextValues?.name, renderItem, type = "regular" } = props;
 	const { errors } = useLaxFormFieldState({
 		control,
 		name: fieldName
@@ -433,9 +432,6 @@ const FormErrorMessagePrimitive = (props) => {
 		const errorMessageElements = getErrorElements();
 		const firstErrorElement = errorMessageElements[0];
 		if (!firstErrorElement) return;
-		const inputField = document.querySelector(`[name='${fieldName}']`);
-		const isFocusableInput = inputField?.matches(":is(input, select, textarea, [contenteditable='true'])");
-		if (isFocusableInput) return;
 		requestAnimationFrame(() => {
 			const rect = firstErrorElement.getBoundingClientRect();
 			const topWithOffset = rect.top - 100;
@@ -490,12 +486,12 @@ const FormErrorMessagePrimitive = (props) => {
 		"data-slot": "form-error-message-container",
 		ref: wrapperRef
 	};
-	const selectedChildren = typeof children === "function" ? children : render;
+	const selectedChildren = typeof children === "function" ? children : renderItem;
 	return /* @__PURE__ */ jsx(WrapperComponent, {
 		...wrapperComponentProps,
 		children: /* @__PURE__ */ jsx(ErrorMessageList, {
 			each: errorMessageArray,
-			render: (errorMessage, index) => {
+			renderItem: (errorMessage, index) => {
 				return selectedChildren({
 					props: getRenderProps({ index }),
 					state: getRenderState({
@@ -515,7 +511,7 @@ function FormErrorMessage(props) {
 		control,
 		fieldName: errorField,
 		type,
-		render: ({ props: renderProps, state }) => /* @__PURE__ */ jsx("p", {
+		renderItem: ({ props: renderProps, state }) => /* @__PURE__ */ jsx("p", {
 			...renderProps,
 			className: cnMerge("text-shadcn-destructive text-[13px]", "data-[index=0]:mt-1", renderProps.className, className),
 			children: state.errorMessage
@@ -542,8 +538,8 @@ function FormSubscribeToFieldValue(props) {
 		control,
 		name
 	});
-	const fieldProps = { value: formValue };
 	const selectedChildren = typeof children === "function" ? children : render;
+	const fieldProps = { value: formValue };
 	const resolvedChildren = selectedChildren(fieldProps);
 	return resolvedChildren;
 }
@@ -587,4 +583,4 @@ __export(form_parts_exports, {
 
 //#endregion
 export { FormDescription, FormErrorMessage, FormErrorMessagePrimitive, FormField, FormFieldContext, FormFieldControlledField, FormFieldController, FormInput, FormInputGroup, FormInputLeftItem, FormInputPrimitive, FormInputRightItem, FormLabel, FormRoot, FormSelect, FormSelectPrimitive, FormSubmit, FormSubscribeToFieldValue, FormSubscribeToFormState, FormTextArea, FormTextAreaPrimitive, form_parts_exports, useFormRootContext, useStrictFormFieldContext };
-//# sourceMappingURL=form-6RV0u4YT.js.map
+//# sourceMappingURL=form-BnSpmc4f.js.map