@zayne-labs/ui-react 0.11.2 → 0.11.4

package/dist/{esm → components}/ui/drag-scroll/index.js

@@ -33,7 +33,7 @@ const handleScrollSnap = (dragContainer) => {
 //#region src/components/ui/drag-scroll/drag-scroll-store.ts
 const createDragScrollStore = (initStoreValues) => {
 	const { orientation = "horizontal", scrollAmount = "item", usage = "allScreens" } = initStoreValues;
-	const containerRef = { current: null };
+	const listRef = { current: null };
 	const positionRef = { current: {
 		left: 0,
 		top: 0,
@@ -62,22 +62,22 @@ const createDragScrollStore = (initStoreValues) => {
 				abortControllerRef.current.mouseLeave.abort();
 			},
 			goToNext: () => {
-				if (!containerRef.current) return;
+				if (!listRef.current) return;
 				const { canGoToNext } = get();
 				if (!canGoToNext) return;
-				const amount = getScrollAmount(containerRef.current);
-				containerRef.current.scrollBy({
+				const amount = getScrollAmount(listRef.current);
+				listRef.current.scrollBy({
 					behavior: "smooth",
 					left: orientation === "vertical" ? 0 : amount,
 					top: orientation === "vertical" || orientation === "both" ? amount : 0
 				});
 			},
 			goToPrev: () => {
-				if (!containerRef.current) return;
+				if (!listRef.current) return;
 				const { canGoToPrev } = get();
 				if (!canGoToPrev) return;
-				const amount = getScrollAmount(containerRef.current);
-				containerRef.current.scrollBy({
+				const amount = getScrollAmount(listRef.current);
+				listRef.current.scrollBy({
 					behavior: "smooth",
 					left: orientation === "vertical" ? 0 : -amount,
 					top: orientation === "vertical" || orientation === "both" ? -amount : 0
@@ -86,7 +86,7 @@ const createDragScrollStore = (initStoreValues) => {
 			handleMouseDown: (event) => {
 				if (usage === "mobileAndTabletOnly" && window.innerWidth >= 768) return;
 				if (usage === "desktopOnly" && window.innerWidth < 768) return;
-				if (!containerRef.current) return;
+				if (!listRef.current) return;
 				abortControllerRef.current = {
 					mouseLeave: new AbortController(),
 					mouseMove: new AbortController(),
@@ -94,37 +94,37 @@ const createDragScrollStore = (initStoreValues) => {
 				};
 				if (orientation === "horizontal" || orientation === "both") {
 					positionRef.current.x = event.clientX;
-					positionRef.current.left = containerRef.current.scrollLeft;
+					positionRef.current.left = listRef.current.scrollLeft;
 				}
 				if (orientation === "vertical" || orientation === "both") {
 					positionRef.current.y = event.clientY;
-					positionRef.current.top = containerRef.current.scrollTop;
+					positionRef.current.top = listRef.current.scrollTop;
 				}
-				updateCursor(containerRef.current);
+				updateCursor(listRef.current);
 				set({ isDragging: true });
 				const { actions } = get();
-				on(containerRef.current, "mousemove", actions.handleMouseMove, { signal: abortControllerRef.current.mouseMove.signal });
-				on(containerRef.current, "mouseup", actions.handleMouseUpOrLeave, { signal: abortControllerRef.current.mouseUp.signal });
-				on(containerRef.current, "mouseleave", actions.handleMouseUpOrLeave, { signal: abortControllerRef.current.mouseLeave.signal });
+				on(listRef.current, "mousemove", actions.handleMouseMove, { signal: abortControllerRef.current.mouseMove.signal });
+				on(listRef.current, "mouseup", actions.handleMouseUpOrLeave, { signal: abortControllerRef.current.mouseUp.signal });
+				on(listRef.current, "mouseleave", actions.handleMouseUpOrLeave, { signal: abortControllerRef.current.mouseLeave.signal });
 				on(document, "mouseup", actions.handleMouseUpOrLeave, {
 					once: true,
 					signal: abortControllerRef.current.mouseUp.signal
 				});
 			},
 			handleMouseMove: (event) => {
-				if (!containerRef.current) return;
+				if (!listRef.current) return;
 				if (orientation === "horizontal" || orientation === "both") {
 					const dx = event.clientX - positionRef.current.x;
-					containerRef.current.scrollLeft = positionRef.current.left - dx;
+					listRef.current.scrollLeft = positionRef.current.left - dx;
 				}
 				if (orientation === "vertical" || orientation === "both") {
 					const dy = event.clientY - positionRef.current.y;
-					containerRef.current.scrollTop = positionRef.current.top - dy;
+					listRef.current.scrollTop = positionRef.current.top - dy;
 				}
 			},
 			handleMouseUpOrLeave: () => {
-				if (!containerRef.current) return;
-				resetCursor(containerRef.current);
+				if (!listRef.current) return;
+				resetCursor(listRef.current);
 				set({ isDragging: false });
 				const { actions } = get();
 				actions.cleanupDragListeners();
@@ -134,34 +134,34 @@ const createDragScrollStore = (initStoreValues) => {
 				actions.updateScrollState();
 			}),
 			initializeResizeObserver: () => {
-				if (!containerRef.current) return;
+				if (!listRef.current) return;
 				const { actions } = get();
 				const resizeObserver = new ResizeObserver(() => actions.updateScrollState());
-				resizeObserver.observe(containerRef.current);
-				for (const child of containerRef.current.children) resizeObserver.observe(child);
+				resizeObserver.observe(listRef.current);
+				for (const child of listRef.current.children) resizeObserver.observe(child);
 				const cleanup = () => {
 					resizeObserver.disconnect();
 				};
 				return cleanup;
 			},
-			setContainerRef: (element) => {
-				containerRef.current = element;
+			setListRef: (element) => {
+				listRef.current = element;
 				if (!element) return;
 				handleScrollSnap(element);
 				const { actions } = get();
 				actions.updateScrollState();
 			},
 			updateScrollState: () => {
-				if (!containerRef.current) return;
+				if (!listRef.current) return;
 				if (orientation === "horizontal" || orientation === "both") {
-					const { clientWidth, scrollLeft, scrollWidth } = containerRef.current;
+					const { clientWidth, scrollLeft, scrollWidth } = listRef.current;
 					set({
 						canGoToNext: Math.ceil(scrollLeft + clientWidth) < scrollWidth,
 						canGoToPrev: Math.floor(scrollLeft) > 0
 					});
 				}
 				if (orientation === "vertical") {
-					const { clientHeight, scrollHeight, scrollTop } = containerRef.current;
+					const { clientHeight, scrollHeight, scrollTop } = listRef.current;
 					set({
 						canGoToNext: Math.ceil(scrollTop + clientHeight) < scrollHeight,
 						canGoToPrev: Math.floor(scrollTop) > 0
@@ -173,14 +173,16 @@ const createDragScrollStore = (initStoreValues) => {
 };
 //#endregion
 //#region src/components/ui/drag-scroll/use-drag-scroll.ts
-const getScopeAttrs = (part) => ({
-	"data-part": part,
-	"data-scope": "drag-scroll",
-	"data-slot": `drag-scroll-${part}`
-});
+const getDragScrollScopeAttrs = (part) => {
+	return {
+		"data-slot": `drag-scroll-${part}`,
+		"data-scope": "drag-scroll",
+		"data-part": part
+	};
+};
 const useDragScroll = (props) => {
 	const { disableInternalStateSubscription = false, orientation = "horizontal", scrollAmount = "item", usage = "allScreens" } = props ?? {};
-	const containerRef = useRef(null);
+	const listRef = useRef(null);
 	const storeApi = useMemo(() => {
 		return createDragScrollStore({
 			orientation,
@@ -200,8 +202,8 @@ const useDragScroll = (props) => {
 	const canGoToNext = useDragScrollStore((state) => !disableInternalStateSubscription ? state.canGoToNext : null);
 	const isDragging = useDragScrollStore((state) => !disableInternalStateSubscription ? state.isDragging : null);
 	const refCallback = useCallbackRef((node) => {
-		containerRef.current = node;
-		actions.setContainerRef(node);
+		listRef.current = node;
+		actions.setListRef(node);
 		if (!node) return;
 		const cleanupMouseDown = on(node, "mousedown", actions.handleMouseDown);
 		const cleanupScroll = on(node, "scroll", actions.handleScroll, { passive: true });
@@ -215,16 +217,16 @@ const useDragScroll = (props) => {
 	}, [actions]);
 	const getRootProps = useCallbackRef((innerProps) => {
 		return {
-			...getScopeAttrs("root"),
 			...innerProps,
+			...getDragScrollScopeAttrs("root"),
 			className: cnMerge("relative", innerProps?.className)
 		};
 	});
-	const getContainerProps = useCallback((innerProps) => {
+	const getListProps = useCallback((innerProps) => {
 		return {
-			...getScopeAttrs("container"),
-			...!disableInternalStateSubscription && { "data-dragging": dataAttr(isDragging) },
 			...innerProps,
+			...getDragScrollScopeAttrs("list"),
+			...!disableInternalStateSubscription && { "data-dragging": dataAttr(isDragging) },
 			className: cnMerge(`scrollbar-hidden flex w-full cursor-grab snap-x snap-mandatory overflow-x-scroll overflow-y-hidden`, orientation === "horizontal" && "flex-row", orientation === "vertical" && "flex-col", usage === "mobileAndTabletOnly" && "md:cursor-default md:flex-col", usage === "desktopOnly" && "max-md:cursor-default max-md:flex-col", innerProps?.className),
 			ref: composeRefs(refCallback, innerProps?.ref)
 		};
@@ -237,54 +239,53 @@ const useDragScroll = (props) => {
 	]);
 	const getItemProps = useCallbackRef((innerProps) => {
 		return {
-			...getScopeAttrs("item"),
 			...innerProps,
+			...getDragScrollScopeAttrs("item"),
 			className: cnMerge("snap-center snap-always", innerProps?.className)
 		};
 	});
 	const getPrevButtonProps = useCallback((innerProps) => {
 		const isDisabled = innerProps?.disabled ?? !canGoToPrev;
 		return {
-			...getScopeAttrs("prev-button"),
-			type: "button",
 			...innerProps,
+			...getDragScrollScopeAttrs("prev-button"),
 			"aria-disabled": dataAttr(isDisabled),
 			"aria-label": innerProps?.["aria-label"] ?? "Scroll back",
 			"data-disabled": dataAttr(isDisabled),
 			disabled: isDisabled,
-			onClick: composeTwoEventHandlers(actions.goToPrev, innerProps?.onClick)
+			onClick: composeTwoEventHandlers(actions.goToPrev, innerProps?.onClick),
+			type: "button"
 		};
 	}, [actions.goToPrev, canGoToPrev]);
 	const getNextButtonProps = useCallback((innerProps) => {
 		const isDisabled = innerProps?.disabled ?? !canGoToNext;
 		return {
-			...getScopeAttrs("next-button"),
-			type: "button",
 			...innerProps,
-			"aria-disabled": dataAttr(isDisabled),
+			...getDragScrollScopeAttrs("next-button"),
 			"aria-label": innerProps?.["aria-label"] ?? "Scroll forward",
 			"data-disabled": dataAttr(isDisabled),
 			disabled: isDisabled,
-			onClick: composeTwoEventHandlers(actions.goToNext, innerProps?.onClick)
+			onClick: composeTwoEventHandlers(actions.goToNext, innerProps?.onClick),
+			type: "button"
 		};
 	}, [actions.goToNext, canGoToNext]);
 	const propGetters = useMemo(() => ({
-		getContainerProps,
 		getItemProps,
+		getListProps,
 		getNextButtonProps,
 		getPrevButtonProps,
 		getRootProps
 	}), [
 		getPrevButtonProps,
-		getContainerProps,
+		getListProps,
 		getItemProps,
 		getNextButtonProps,
 		getRootProps
 	]);
 	const stableUseDragScrollStore = useCallbackRef(useDragScrollStore);
 	return useMemo(() => ({
-		containerRef,
 		disableInternalStateSubscription,
+		listRef,
 		propGetters,
 		storeApi,
 		useDragScrollStore: stableUseDragScrollStore
@@ -310,21 +311,21 @@ const [DragScrollRootContextProvider, useDragScrollRootContext] = createCustomCo
 //#endregion
 //#region src/components/ui/drag-scroll/drag-scroll.tsx
 function DragScrollRoot(props) {
-	const { as: Element = "div", asChild, children, ...restOfProps } = props;
-	const { containerRef, disableInternalStateSubscription, propGetters, storeApi } = useDragScroll(restOfProps);
+	const { asChild, children, ...restOfProps } = props;
+	const { disableInternalStateSubscription, listRef, propGetters, storeApi } = useDragScroll(restOfProps);
 	return /* @__PURE__ */ jsx(DragScrollStoreContextProvider, {
 		store: storeApi,
 		children: /* @__PURE__ */ jsx(DragScrollRootContextProvider, {
 			value: useMemo(() => ({
-				containerRef,
 				disableInternalStateSubscription,
+				listRef,
 				propGetters
 			}), [
-				containerRef,
+				listRef,
 				disableInternalStateSubscription,
 				propGetters
 			]),
-			children: /* @__PURE__ */ jsx(asChild ? SlotRoot : Element, {
+			children: /* @__PURE__ */ jsx(asChild ? SlotRoot : "div", {
 				...propGetters.getRootProps(restOfProps),
 				children
 			})
@@ -336,10 +337,10 @@ function DragScrollContext(props) {
 	const dragScrollCtx = useDragScrollStoreContext(useCompareSelector(selector));
 	return isFunction(children) ? children(dragScrollCtx) : children;
 }
-function DragScrollContainer(props) {
+function DragScrollList(props) {
 	const { as: Element = "ul", asChild, ...restOfProps } = props;
 	const { propGetters } = useDragScrollRootContext();
-	return /* @__PURE__ */ jsx(asChild ? SlotRoot : Element, { ...propGetters.getContainerProps(restOfProps) });
+	return /* @__PURE__ */ jsx(asChild ? SlotRoot : Element, { ...propGetters.getListProps(restOfProps) });
 }
 function DragScrollItem(props) {
 	const { as: Element = "li", asChild, ...restOfProps } = props;
@@ -359,14 +360,14 @@ function DragScrollNext(props) {
 //#endregion
 //#region src/components/ui/drag-scroll/drag-scroll-parts.ts
 var drag_scroll_parts_exports = /* @__PURE__ */ __exportAll({
-	Container: () => DragScrollContainer,
 	Context: () => DragScrollContext,
 	Item: () => DragScrollItem,
+	List: () => DragScrollList,
 	Next: () => DragScrollNext,
 	Prev: () => DragScrollPrev,
 	Root: () => DragScrollRoot
 });
 //#endregion
-export { drag_scroll_parts_exports as DragScroll, DragScrollContainer, DragScrollContext, DragScrollItem, DragScrollNext, DragScrollPrev, DragScrollRoot, useDragScroll, useDragScrollStoreContext };
+export { drag_scroll_parts_exports as DragScroll, DragScrollContext, DragScrollItem, DragScrollList, DragScrollNext, DragScrollPrev, DragScrollRoot, getDragScrollScopeAttrs, useDragScroll, useDragScrollStoreContext };
 
 //# sourceMappingURL=index.js.map

package/dist/components/ui/drag-scroll/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Slot.Root"],"sources":["../../../../src/components/ui/drag-scroll/utils.ts","../../../../src/components/ui/drag-scroll/drag-scroll-store.ts","../../../../src/components/ui/drag-scroll/use-drag-scroll.ts","../../../../src/components/ui/drag-scroll/drag-scroll-context.ts","../../../../src/components/ui/drag-scroll/drag-scroll.tsx","../../../../src/components/ui/drag-scroll/drag-scroll-parts.ts"],"sourcesContent":["import { checkIsDeviceMobile } from \"@zayne-labs/toolkit-core\";\n\n/* eslint-disable no-param-reassign -- Mutation is needed here since it's an element */\nexport const updateCursor = <TElement extends HTMLElement>(element: TElement) => {\n\telement.style.cursor = \"grabbing\";\n\telement.style.userSelect = \"none\";\n};\n\nexport const onScrollSnap = <TElement extends HTMLElement>(\n\taction: \"remove\" | \"reset\",\n\telement: TElement\n) => {\n\tif (action === \"remove\") {\n\t\telement.style.scrollSnapType = \"none\";\n\t\treturn;\n\t}\n\n\telement.style.scrollSnapType = \"\";\n};\n\nexport const resetCursor = <TElement extends HTMLElement>(element: TElement) => {\n\telement.style.cursor = \"\";\n\telement.style.userSelect = \"\";\n};\n/* eslint-enable no-param-reassign  -- Mutation is needed here since it's an element */\n\nexport const handleScrollSnap = (dragContainer: HTMLElement) => {\n\tconst isMobile = checkIsDeviceMobile();\n\n\tif (!isMobile) {\n\t\tonScrollSnap(\"remove\", dragContainer);\n\t} else {\n\t\tonScrollSnap(\"reset\", dragContainer);\n\t}\n};\n","import { createStore, on, throttleByFrame } from \"@zayne-labs/toolkit-core\";\nimport { isNumber } from \"@zayne-labs/toolkit-type-helpers\";\nimport type { DragScrollStore, UseDragScrollProps } from \"./types\";\nimport { handleScrollSnap, resetCursor, updateCursor } from \"./utils\";\n\ntype RequiredUseDragScrollProps = {\n\t[Key in keyof Required<UseDragScrollProps>]: UseDragScrollProps[Key] | undefined;\n};\n\ntype InitStoreValues = Pick<RequiredUseDragScrollProps, \"orientation\" | \"scrollAmount\" | \"usage\">;\n\nexport const createDragScrollStore = (initStoreValues: InitStoreValues) => {\n\tconst { orientation = \"horizontal\", scrollAmount = \"item\", usage = \"allScreens\" } = initStoreValues;\n\n\tconst listRef: React.RefObject<HTMLElement | null> = {\n\t\tcurrent: null,\n\t};\n\n\tconst positionRef = {\n\t\tcurrent: {\n\t\t\tleft: 0,\n\t\t\ttop: 0,\n\t\t\tx: 0,\n\t\t\ty: 0,\n\t\t},\n\t};\n\n\tconst abortControllerRef = {\n\t\tcurrent: {\n\t\t\tmouseLeave: new AbortController(),\n\t\t\tmouseMove: new AbortController(),\n\t\t\tmouseUp: new AbortController(),\n\t\t},\n\t};\n\n\t// == Calculate scroll amount based on orientation and settings\n\tconst getScrollAmount = (container: HTMLElement): number => {\n\t\tif (isNumber(scrollAmount)) {\n\t\t\treturn scrollAmount;\n\t\t}\n\n\t\tconst firstChild = container.children[0] as HTMLElement | undefined;\n\n\t\tif (!firstChild) {\n\t\t\treturn 0;\n\t\t}\n\n\t\treturn orientation === \"vertical\" || orientation === \"both\" ?\n\t\t\t\tfirstChild.offsetHeight\n\t\t\t:\tfirstChild.offsetWidth;\n\t};\n\n\tconst store = createStore<DragScrollStore>((set, get) => ({\n\t\tcanGoToNext: true,\n\t\tcanGoToPrev: false,\n\t\tisDragging: false,\n\n\t\t// eslint-disable-next-line perfectionist/sort-objects -- actions should be last\n\t\tactions: {\n\t\t\tcleanupDragListeners: () => {\n\t\t\t\tabortControllerRef.current.mouseMove.abort();\n\t\t\t\tabortControllerRef.current.mouseUp.abort();\n\t\t\t\tabortControllerRef.current.mouseLeave.abort();\n\t\t\t},\n\n\t\t\tgoToNext: () => {\n\t\t\t\tif (!listRef.current) return;\n\n\t\t\t\tconst { canGoToNext } = get();\n\t\t\t\tif (!canGoToNext) return;\n\n\t\t\t\tconst amount = getScrollAmount(listRef.current);\n\n\t\t\t\tlistRef.current.scrollBy({\n\t\t\t\t\tbehavior: \"smooth\",\n\t\t\t\t\tleft: orientation === \"vertical\" ? 0 : amount,\n\t\t\t\t\ttop: orientation === \"vertical\" || orientation === \"both\" ? amount : 0,\n\t\t\t\t});\n\t\t\t},\n\n\t\t\tgoToPrev: () => {\n\t\t\t\tif (!listRef.current) return;\n\n\t\t\t\tconst { canGoToPrev } = get();\n\t\t\t\tif (!canGoToPrev) return;\n\n\t\t\t\tconst amount = getScrollAmount(listRef.current);\n\n\t\t\t\tlistRef.current.scrollBy({\n\t\t\t\t\tbehavior: \"smooth\",\n\t\t\t\t\tleft: orientation === \"vertical\" ? 0 : -amount,\n\t\t\t\t\ttop: orientation === \"vertical\" || orientation === \"both\" ? -amount : 0,\n\t\t\t\t});\n\t\t\t},\n\n\t\t\thandleMouseDown: (event) => {\n\t\t\t\tif (usage === \"mobileAndTabletOnly\" && window.innerWidth >= 768) return;\n\t\t\t\tif (usage === \"desktopOnly\" && window.innerWidth < 768) return;\n\n\t\t\t\tif (!listRef.current) return;\n\n\t\t\t\t// == Create fresh AbortControllers for each drag session (they cannot be reused after abort)\n\t\t\t\tabortControllerRef.current = {\n\t\t\t\t\tmouseLeave: new AbortController(),\n\t\t\t\t\tmouseMove: new AbortController(),\n\t\t\t\t\tmouseUp: new AbortController(),\n\t\t\t\t};\n\n\t\t\t\t// == Update all initial position properties\n\t\t\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\t\t\tpositionRef.current.x = event.clientX;\n\t\t\t\t\tpositionRef.current.left = listRef.current.scrollLeft;\n\t\t\t\t}\n\n\t\t\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\t\t\tpositionRef.current.y = event.clientY;\n\t\t\t\t\tpositionRef.current.top = listRef.current.scrollTop;\n\t\t\t\t}\n\n\t\t\t\tupdateCursor(listRef.current);\n\t\t\t\tset({ isDragging: true });\n\n\t\t\t\tconst { actions } = get();\n\n\t\t\t\ton(listRef.current, \"mousemove\", actions.handleMouseMove, {\n\t\t\t\t\tsignal: abortControllerRef.current.mouseMove.signal,\n\t\t\t\t});\n\t\t\t\ton(listRef.current, \"mouseup\", actions.handleMouseUpOrLeave, {\n\t\t\t\t\tsignal: abortControllerRef.current.mouseUp.signal,\n\t\t\t\t});\n\t\t\t\ton(listRef.current, \"mouseleave\", actions.handleMouseUpOrLeave, {\n\t\t\t\t\tsignal: abortControllerRef.current.mouseLeave.signal,\n\t\t\t\t});\n\t\t\t\t// == Document-level mouseup fallback for when user releases outside the container\n\t\t\t\ton(document, \"mouseup\", actions.handleMouseUpOrLeave, {\n\t\t\t\t\tonce: true,\n\t\t\t\t\tsignal: abortControllerRef.current.mouseUp.signal,\n\t\t\t\t});\n\t\t\t},\n\n\t\t\thandleMouseMove: (event) => {\n\t\t\t\tif (!listRef.current) return;\n\n\t\t\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\t\t\tconst dx = event.clientX - positionRef.current.x;\n\t\t\t\t\tlistRef.current.scrollLeft = positionRef.current.left - dx;\n\t\t\t\t}\n\n\t\t\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\t\t\tconst dy = event.clientY - positionRef.current.y;\n\t\t\t\t\tlistRef.current.scrollTop = positionRef.current.top - dy;\n\t\t\t\t}\n\t\t\t},\n\n\t\t\thandleMouseUpOrLeave: () => {\n\t\t\t\tif (!listRef.current) return;\n\n\t\t\t\tresetCursor(listRef.current);\n\t\t\t\tset({ isDragging: false });\n\n\t\t\t\tconst { actions } = get();\n\t\t\t\tactions.cleanupDragListeners();\n\t\t\t},\n\n\t\t\thandleScroll: throttleByFrame(() => {\n\t\t\t\tconst { actions } = get();\n\t\t\t\tactions.updateScrollState();\n\t\t\t}),\n\n\t\t\tinitializeResizeObserver: () => {\n\t\t\t\tif (!listRef.current) return;\n\n\t\t\t\tconst { actions } = get();\n\n\t\t\t\t// == Use ResizeObserver to detect when container or children resize\n\t\t\t\tconst resizeObserver = new ResizeObserver(() => actions.updateScrollState());\n\n\t\t\t\tresizeObserver.observe(listRef.current);\n\n\t\t\t\t// == Also observe children for size changes\n\t\t\t\tfor (const child of listRef.current.children) {\n\t\t\t\t\tresizeObserver.observe(child);\n\t\t\t\t}\n\n\t\t\t\tconst cleanup = () => {\n\t\t\t\t\tresizeObserver.disconnect();\n\t\t\t\t};\n\n\t\t\t\treturn cleanup;\n\t\t\t},\n\n\t\t\tsetListRef: (element) => {\n\t\t\t\tlistRef.current = element as HTMLElement;\n\n\t\t\t\tif (!element) return;\n\n\t\t\t\thandleScrollSnap(element);\n\n\t\t\t\tconst { actions } = get();\n\t\t\t\tactions.updateScrollState();\n\t\t\t},\n\n\t\t\tupdateScrollState: () => {\n\t\t\t\tif (!listRef.current) return;\n\n\t\t\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\t\t\tconst { clientWidth, scrollLeft, scrollWidth } = listRef.current;\n\n\t\t\t\t\tset({\n\t\t\t\t\t\tcanGoToNext: Math.ceil(scrollLeft + clientWidth) < scrollWidth,\n\t\t\t\t\t\tcanGoToPrev: Math.floor(scrollLeft) > 0,\n\t\t\t\t\t});\n\t\t\t\t}\n\n\t\t\t\tif (orientation === \"vertical\") {\n\t\t\t\t\tconst { clientHeight, scrollHeight, scrollTop } = listRef.current;\n\n\t\t\t\t\tset({\n\t\t\t\t\t\tcanGoToNext: Math.ceil(scrollTop + clientHeight) < scrollHeight,\n\t\t\t\t\t\tcanGoToPrev: Math.floor(scrollTop) > 0,\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t}));\n\n\treturn store;\n};\n","import { dataAttr, on } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef, useStore } from \"@zayne-labs/toolkit-react\";\nimport { composeRefs, composeTwoEventHandlers } from \"@zayne-labs/toolkit-react/utils\";\nimport { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { cnMerge } from \"@/lib/utils/cn\";\nimport type { FromCamelToKebabCase } from \"@/lib/utils/type-helpers\";\nimport { createDragScrollStore } from \"./drag-scroll-store\";\nimport type { DragScrollPropGetters, PartProps, UseDragScrollProps, UseDragScrollResult } from \"./types\";\n\nexport const getDragScrollScopeAttrs = (part: FromCamelToKebabCase<keyof PartProps>) => {\n\treturn {\n\t\t/* eslint-disable perfectionist/sort-objects -- I need this order to be maintained */\n\t\t\"data-slot\": `drag-scroll-${part}`,\n\t\t\"data-scope\": \"drag-scroll\",\n\t\t\"data-part\": part,\n\t\t/* eslint-enable perfectionist/sort-objects -- I need this order to be maintained */\n\t} as const;\n};\n\nexport const useDragScroll = <TContainerElement extends HTMLElement = HTMLElement>(\n\tprops?: UseDragScrollProps\n): UseDragScrollResult<TContainerElement> => {\n\tconst {\n\t\tdisableInternalStateSubscription = false,\n\t\torientation = \"horizontal\",\n\t\tscrollAmount = \"item\",\n\t\tusage = \"allScreens\",\n\t} = props ?? {};\n\n\tconst listRef = useRef<TContainerElement>(null);\n\n\tconst storeApi = useMemo(() => {\n\t\treturn createDragScrollStore({ orientation, scrollAmount, usage });\n\t}, [orientation, scrollAmount, usage]);\n\n\tconst actions = storeApi.getState().actions;\n\n\t/* eslint-disable react-hooks/hooks -- ignore */\n\t// eslint-disable-next-line react-x/component-hook-factories -- Ignore\n\tconst useDragScrollStore: UseDragScrollResult<TContainerElement>[\"useDragScrollStore\"] = (selector) => {\n\t\treturn useStore(storeApi as never, selector);\n\t};\n\n\tconst canGoToPrev = useDragScrollStore((state) =>\n\t\t!disableInternalStateSubscription ? state.canGoToPrev : null\n\t);\n\n\tconst canGoToNext = useDragScrollStore((state) =>\n\t\t!disableInternalStateSubscription ? state.canGoToNext : null\n\t);\n\n\tconst isDragging = useDragScrollStore((state) =>\n\t\t!disableInternalStateSubscription ? state.isDragging : null\n\t);\n\t/* eslint-enable react-hooks/hooks -- ignore */\n\n\tconst refCallback: React.RefCallback<TContainerElement> = useCallbackRef((node) => {\n\t\tlistRef.current = node;\n\t\tactions.setListRef(node);\n\n\t\tif (!node) return;\n\n\t\tconst cleanupMouseDown = on(node, \"mousedown\", actions.handleMouseDown);\n\t\tconst cleanupScroll = on(node, \"scroll\", actions.handleScroll, { passive: true });\n\n\t\treturn () => {\n\t\t\tcleanupMouseDown();\n\t\t\tcleanupScroll();\n\t\t};\n\t});\n\n\t// == Update scroll state when children might change (e.g., async loaded content)\n\tuseEffect(() => {\n\t\tconst cleanup = actions.initializeResizeObserver();\n\n\t\treturn cleanup;\n\t}, [actions]);\n\n\tconst getRootProps: DragScrollPropGetters<TContainerElement>[\"getRootProps\"] = useCallbackRef(\n\t\t(innerProps) => {\n\t\t\treturn {\n\t\t\t\t...innerProps,\n\t\t\t\t...getDragScrollScopeAttrs(\"root\"),\n\t\t\t\tclassName: cnMerge(\"relative\", innerProps?.className),\n\t\t\t};\n\t\t}\n\t);\n\n\tconst getListProps: DragScrollPropGetters<TContainerElement>[\"getListProps\"] = useCallback(\n\t\t(innerProps) => {\n\t\t\treturn {\n\t\t\t\t...innerProps,\n\t\t\t\t...getDragScrollScopeAttrs(\"list\"),\n\t\t\t\t...(!disableInternalStateSubscription && {\n\t\t\t\t\t\"data-dragging\": dataAttr(isDragging),\n\t\t\t\t}),\n\t\t\t\tclassName: cnMerge(\n\t\t\t\t\t`scrollbar-hidden flex w-full cursor-grab snap-x snap-mandatory overflow-x-scroll overflow-y-hidden`,\n\t\t\t\t\torientation === \"horizontal\" && \"flex-row\",\n\t\t\t\t\torientation === \"vertical\" && \"flex-col\",\n\t\t\t\t\tusage === \"mobileAndTabletOnly\" && \"md:cursor-default md:flex-col\",\n\t\t\t\t\tusage === \"desktopOnly\" && \"max-md:cursor-default max-md:flex-col\",\n\t\t\t\t\tinnerProps?.className\n\t\t\t\t),\n\t\t\t\tref: composeRefs(\n\t\t\t\t\trefCallback,\n\t\t\t\t\t(innerProps as { ref?: React.Ref<TContainerElement> } | undefined)?.ref\n\t\t\t\t),\n\t\t\t} as never;\n\t\t},\n\t\t[disableInternalStateSubscription, isDragging, orientation, refCallback, usage]\n\t);\n\n\tconst getItemProps: DragScrollPropGetters<TContainerElement>[\"getItemProps\"] = useCallbackRef(\n\t\t(innerProps) => {\n\t\t\treturn {\n\t\t\t\t...innerProps,\n\t\t\t\t...getDragScrollScopeAttrs(\"item\"),\n\t\t\t\tclassName: cnMerge(\"snap-center snap-always\", innerProps?.className),\n\t\t\t};\n\t\t}\n\t);\n\n\tconst getPrevButtonProps: DragScrollPropGetters<TContainerElement>[\"getPrevButtonProps\"] = useCallback(\n\t\t(innerProps) => {\n\t\t\tconst isDisabled = innerProps?.disabled ?? !canGoToPrev;\n\n\t\t\treturn {\n\t\t\t\t...innerProps,\n\t\t\t\t...getDragScrollScopeAttrs(\"prev-button\"),\n\t\t\t\t\"aria-disabled\": dataAttr(isDisabled),\n\t\t\t\t\"aria-label\": innerProps?.[\"aria-label\"] ?? \"Scroll back\",\n\t\t\t\t\"data-disabled\": dataAttr(isDisabled),\n\t\t\t\tdisabled: isDisabled,\n\t\t\t\tonClick: composeTwoEventHandlers(actions.goToPrev, innerProps?.onClick),\n\t\t\t\ttype: \"button\",\n\t\t\t};\n\t\t},\n\t\t[actions.goToPrev, canGoToPrev]\n\t);\n\n\tconst getNextButtonProps: DragScrollPropGetters<TContainerElement>[\"getNextButtonProps\"] = useCallback(\n\t\t(innerProps) => {\n\t\t\tconst isDisabled = innerProps?.disabled ?? !canGoToNext;\n\n\t\t\treturn {\n\t\t\t\t...innerProps,\n\t\t\t\t...getDragScrollScopeAttrs(\"next-button\"),\n\t\t\t\t\"aria-label\": innerProps?.[\"aria-label\"] ?? \"Scroll forward\",\n\t\t\t\t\"data-disabled\": dataAttr(isDisabled),\n\t\t\t\tdisabled: isDisabled,\n\t\t\t\tonClick: composeTwoEventHandlers(actions.goToNext, innerProps?.onClick),\n\t\t\t\ttype: \"button\",\n\t\t\t};\n\t\t},\n\t\t[actions.goToNext, canGoToNext]\n\t);\n\n\tconst propGetters = useMemo<DragScrollPropGetters<TContainerElement>>(\n\t\t() =>\n\t\t\t({\n\t\t\t\tgetItemProps,\n\t\t\t\tgetListProps,\n\t\t\t\tgetNextButtonProps,\n\t\t\t\tgetPrevButtonProps,\n\t\t\t\tgetRootProps,\n\t\t\t}) satisfies DragScrollPropGetters<TContainerElement>,\n\t\t[getPrevButtonProps, getListProps, getItemProps, getNextButtonProps, getRootProps]\n\t);\n\n\tconst stableUseDragScrollStore = useCallbackRef(useDragScrollStore);\n\n\tconst result = useMemo<UseDragScrollResult<TContainerElement>>(\n\t\t() =>\n\t\t\t({\n\t\t\t\tdisableInternalStateSubscription,\n\t\t\t\tlistRef,\n\t\t\t\tpropGetters,\n\t\t\t\tstoreApi,\n\t\t\t\tuseDragScrollStore: stableUseDragScrollStore,\n\t\t\t}) satisfies UseDragScrollResult<TContainerElement>,\n\t\t[propGetters, disableInternalStateSubscription, storeApi, stableUseDragScrollStore]\n\t);\n\n\treturn result;\n};\n","import { createCustomContext } from \"@zayne-labs/toolkit-react\";\nimport { createReactStoreContext } from \"@zayne-labs/toolkit-react/zustand\";\nimport type { DragScrollStore, UseDragScrollResult } from \"./types\";\n\nconst [DragScrollStoreContextProvider, useDragScrollStoreContext] =\n\tcreateReactStoreContext<DragScrollStore>({\n\t\thookName: \"useDragScrollStoreContext\",\n\t\tname: \"DragScrollStoreContext\",\n\t\tproviderName: \"DragScrollRoot\",\n\t});\n\nexport type DragScrollRootContextType<TElement extends HTMLElement = HTMLElement> = Pick<\n\tUseDragScrollResult<TElement>,\n\t\"disableInternalStateSubscription\" | \"listRef\" | \"propGetters\"\n>;\n\nconst [DragScrollRootContextProvider, useDragScrollRootContext] =\n\tcreateCustomContext<DragScrollRootContextType>({\n\t\thookName: \"useDragScrollRootContext\",\n\t\tname: \"DragScrollRootContext\",\n\t\tproviderName: \"DragScrollRoot\",\n\t});\n\nexport {\n\tDragScrollRootContextProvider,\n\tDragScrollStoreContextProvider,\n\tuseDragScrollRootContext,\n\tuseDragScrollStoreContext,\n};\n","\"use client\";\n\nimport { useCompareSelector } from \"@zayne-labs/toolkit-react\";\nimport type { PolymorphicPropsStrict } from \"@zayne-labs/toolkit-react/utils\";\nimport { isFunction, type SelectorFn } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useMemo } from \"react\";\nimport { Slot } from \"@/components/common/slot\";\nimport {\n\tDragScrollRootContextProvider,\n\tDragScrollStoreContextProvider,\n\tuseDragScrollRootContext,\n\tuseDragScrollStoreContext,\n\ttype DragScrollRootContextType,\n} from \"./drag-scroll-context\";\nimport type { DragScrollStore, PartInputProps, UseDragScrollProps } from \"./types\";\nimport { useDragScroll } from \"./use-drag-scroll\";\n\n/* eslint-disable perfectionist/sort-intersection-types -- I need non-standard props to come first */\n\nexport type DragScrollRootProps = UseDragScrollProps & {\n\tasChild?: boolean;\n\tchildren: React.ReactNode;\n} & PartInputProps[\"root\"];\n\nexport function DragScrollRoot(props: DragScrollRootProps) {\n\tconst { asChild, children, ...restOfProps } = props;\n\n\tconst { disableInternalStateSubscription, listRef, propGetters, storeApi } = useDragScroll(restOfProps);\n\n\tconst rootContextValue = useMemo<DragScrollRootContextType>(\n\t\t() =>\n\t\t\t({\n\t\t\t\tdisableInternalStateSubscription,\n\t\t\t\tlistRef,\n\t\t\t\tpropGetters,\n\t\t\t}) satisfies DragScrollRootContextType,\n\t\t[listRef, disableInternalStateSubscription, propGetters]\n\t);\n\n\tconst Component = asChild ? Slot.Root : \"div\";\n\n\treturn (\n\t\t<DragScrollStoreContextProvider store={storeApi}>\n\t\t\t<DragScrollRootContextProvider value={rootContextValue}>\n\t\t\t\t<Component {...propGetters.getRootProps(restOfProps)}>{children}</Component>\n\t\t\t</DragScrollRootContextProvider>\n\t\t</DragScrollStoreContextProvider>\n\t);\n}\n\nexport type DragScrollContextProps<TSlice> = {\n\tchildren: React.ReactNode | ((context: TSlice) => React.ReactNode);\n\tselector?: SelectorFn<DragScrollStore, TSlice>;\n};\n\nexport function DragScrollContext<TSlice = DragScrollStore>(props: DragScrollContextProps<TSlice>) {\n\tconst { children, selector } = props;\n\n\tconst dragScrollCtx = useDragScrollStoreContext(useCompareSelector(selector));\n\n\tconst resolvedChildren = isFunction(children) ? children(dragScrollCtx) : children;\n\n\treturn resolvedChildren;\n}\n\nexport type DragScrollListProps = {\n\tasChild?: boolean;\n} & PartInputProps[\"list\"];\n\nexport function DragScrollList<TElement extends React.ElementType = \"ul\">(\n\tprops: PolymorphicPropsStrict<TElement, DragScrollListProps>\n) {\n\tconst { as: Element = \"ul\", asChild, ...restOfProps } = props;\n\n\tconst { propGetters } = useDragScrollRootContext();\n\n\tconst Component = asChild ? Slot.Root : Element;\n\n\treturn <Component {...propGetters.getListProps(restOfProps)} />;\n}\n\nexport type DragScrollItemProps = {\n\tasChild?: boolean;\n} & PartInputProps[\"item\"];\n\nexport function DragScrollItem<TElement extends React.ElementType = \"li\">(\n\tprops: PolymorphicPropsStrict<TElement, DragScrollItemProps>\n) {\n\tconst { as: Element = \"li\", asChild, ...restOfProps } = props;\n\n\tconst { propGetters } = useDragScrollRootContext();\n\n\tconst Component = asChild ? Slot.Root : Element;\n\n\treturn <Component {...propGetters.getItemProps(restOfProps)} />;\n}\n\nexport type DragScrollPrevProps = {\n\tasChild?: boolean;\n} & PartInputProps[\"prevButton\"];\n\nexport function DragScrollPrev(props: DragScrollPrevProps) {\n\tconst { asChild, ...restOfProps } = props;\n\n\tconst { propGetters } = useDragScrollRootContext();\n\n\tconst Component = asChild ? Slot.Root : \"button\";\n\n\treturn <Component {...propGetters.getPrevButtonProps(restOfProps)} />;\n}\n\nexport type DragScrollNextProps = {\n\tasChild?: boolean;\n} & PartInputProps[\"nextButton\"];\n\nexport function DragScrollNext(props: DragScrollNextProps) {\n\tconst { asChild, ...restOfProps } = props;\n\n\tconst { propGetters } = useDragScrollRootContext();\n\n\tconst Component = asChild ? Slot.Root : \"button\";\n\n\treturn <Component {...propGetters.getNextButtonProps(restOfProps)} />;\n}\n\n/* eslint-enable perfectionist/sort-intersection-types -- I need non-standard props to come first */\n","export {\n\tDragScrollContext as Context,\n\tDragScrollItem as Item,\n\tDragScrollNext as Next,\n\tDragScrollPrev as Prev,\n\tDragScrollRoot as Root,\n\tDragScrollList as List,\n} from \"./drag-scroll\";\n"],"mappings":"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"}

package/dist/{esm → components}/ui/drop-zone/index.d.ts

@@ -1,9 +1,9 @@
 import { InferProps, PolymorphicPropsStrict } from "@zayne-labs/toolkit-react/utils";
-import * as _zayne_labs_toolkit_type_helpers0 from "@zayne-labs/toolkit-type-helpers";
+import * as _$_zayne_labs_toolkit_type_helpers0 from "@zayne-labs/toolkit-type-helpers";
 import { Awaitable, SelectorFn, UnionDiscriminator } from "@zayne-labs/toolkit-type-helpers";
-import * as react from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-import * as _zayne_labs_toolkit_core0 from "@zayne-labs/toolkit-core";
+import * as _$react from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$_zayne_labs_toolkit_core0 from "@zayne-labs/toolkit-core";
 import { FileMeta, FileOrFileMeta, FileValidationErrorContextEach, FileValidationHooksAsync, FileValidationSettingsAsync } from "@zayne-labs/toolkit-core";
 
 //#region src/components/ui/drop-zone/drop-zone-store.d.ts
@@ -30,20 +30,9 @@ declare const createDropZoneStore: (storeContext: StoreContext) => {
       shouldReplace: true;
     }) | undefined): void;
   };
-  subscribe: _zayne_labs_toolkit_core0.SubscribeFn<DropZoneStore>;
+  subscribe: _$_zayne_labs_toolkit_core0.SubscribeFn<DropZoneStore>;
 };
 //#endregion
-//#region src/components/ui/drop-zone/utils.d.ts
-declare class DropZoneError extends Error {
-  readonly dropZoneErrorSymbol: symbol;
-  file?: FileValidationErrorContextEach["file"];
-  name: "DropZoneError";
-  constructor(ctx: Pick<FileValidationErrorContextEach, "message"> & {
-    file?: FileValidationErrorContextEach["file"];
-  }, errorOptions?: ErrorOptions);
-  static isError(error: unknown): error is DropZoneError;
-}
-//#endregion
 //#region src/components/ui/drop-zone/types.d.ts
 type FileErrorContext = Omit<FileValidationErrorContextEach, "code"> & {
   code: "upload-error" | FileValidationErrorContextEach["code"];
@@ -89,11 +78,11 @@ type SharedInputProps = {
 };
 interface PartProps {
   container: {
-    input: PartProps["container"]["output"] & SharedInputProps;
+    input: SharedInputProps & PartProps["container"]["output"];
     output: RecordForDataAttr & InferProps<HTMLElement>;
   };
   fileItem: {
-    input: PartProps["fileItem"]["output"] & SharedInputProps;
+    input: SharedInputProps & PartProps["fileItem"]["output"];
     output: RecordForDataAttr & InferProps<"li">;
   };
   fileItemClear: {
@@ -128,6 +117,10 @@ interface PartProps {
     input: PartProps["input"]["output"];
     output: RecordForDataAttr & InferProps<"input">;
   };
+  root: {
+    input: SharedInputProps & PartProps["root"]["output"];
+    output: RecordForDataAttr & InferProps<"div">;
+  };
   trigger: {
     input: PartProps["trigger"]["output"];
     output: RecordForDataAttr & InferProps<"button">;
@@ -221,7 +214,7 @@ interface UseDropZoneProps extends FileValidationSettingsAsync, Pick<SharedInput
    */
   onUpload?: (context: Pick<DropZoneState, "fileStateArray"> & {
     onError: (ctx: FileStateOrIDProp & {
-      error: DropZoneError;
+      error: unknown;
     }) => void;
     onProgress: (ctx: FileStateOrIDProp & {
       progress: number;
@@ -269,9 +262,9 @@ declare const DropZoneStoreContextProvider: (props: {
           shouldReplace: true;
         }) | undefined): void;
       };
-      subscribe: _zayne_labs_toolkit_core0.SubscribeFn<DropZoneStore>;
+      subscribe: _$_zayne_labs_toolkit_core0.SubscribeFn<DropZoneStore>;
     };
-  }) => react.FunctionComponentElement<react.ProviderProps<{
+  }) => _$react.FunctionComponentElement<_$react.ProviderProps<{
     getInitialState: () => DropZoneStore;
     getListeners: () => Set<(state: DropZoneStore, prevState: DropZoneStore) => void>;
     getState: () => DropZoneStore;
@@ -292,39 +285,39 @@ declare const DropZoneStoreContextProvider: (props: {
         shouldReplace: true;
       }) | undefined): void;
     };
-    subscribe: _zayne_labs_toolkit_core0.SubscribeFn<DropZoneStore>;
-  }>>, useDropZoneStoreContext: <TResult = DropZoneStore>(selector?: _zayne_labs_toolkit_type_helpers0.SelectorFn<DropZoneStore, TResult> | undefined) => TResult;
+    subscribe: _$_zayne_labs_toolkit_core0.SubscribeFn<DropZoneStore>;
+  }>>, useDropZoneStoreContext: <TResult = DropZoneStore>(selector?: _$_zayne_labs_toolkit_type_helpers0.SelectorFn<DropZoneStore, TResult> | undefined) => TResult;
 type FileItemContextType = {
   fileState: FileState;
 };
 //#endregion
 //#region src/components/ui/drop-zone/drop-zone.d.ts
 type DropZoneRootProps = UseDropZoneProps & {
-  children: React.ReactNode;
-};
-declare function DropZoneRoot(props: DropZoneRootProps): react_jsx_runtime0.JSX.Element;
+  asChild?: boolean;
+} & PartInputProps["root"];
+declare function DropZoneRoot<TElement extends React.ElementType = "div">(props: PolymorphicPropsStrict<TElement, DropZoneRootProps>): _$react_jsx_runtime0.JSX.Element;
 type DropZoneContextProps<TSlice> = {
   children: React.ReactNode | ((context: TSlice) => React.ReactNode);
   selector?: SelectorFn<DropZoneStore, TSlice>;
 };
-declare function DropZoneContext<TSlice = DropZoneStore>(props: DropZoneContextProps<TSlice>): react.ReactNode;
+declare function DropZoneContext<TSlice = DropZoneStore>(props: DropZoneContextProps<TSlice>): _$react.ReactNode;
 type DropZoneContainerProps = {
   asChild?: boolean;
 } & PartInputProps["container"];
-declare function DropZoneContainer<TElement extends React.ElementType = "div">(props: PolymorphicPropsStrict<TElement, DropZoneContainerProps>): react_jsx_runtime0.JSX.Element;
+declare function DropZoneContainer<TElement extends React.ElementType = "div">(props: PolymorphicPropsStrict<TElement, DropZoneContainerProps>): _$react_jsx_runtime0.JSX.Element;
 type DropZoneInputProps = {
   asChild?: boolean;
 } & PartInputProps["input"];
-declare function DropZoneInput(props: DropZoneInputProps): react_jsx_runtime0.JSX.Element;
+declare function DropZoneInput(props: DropZoneInputProps): _$react_jsx_runtime0.JSX.Element;
 type DropZoneAreaProps<TSlice = DropZoneStore> = DropZoneContextProps<TSlice> & {
   classNames?: Partial<Record<Extract<keyof PartInputProps, "container" | "input">, string>>;
   extraProps?: Partial<Pick<PartInputProps, "container" | "input">>;
 } & PartInputProps["container"];
-declare function DropZoneArea<TSlice = DropZoneStore>(props: DropZoneAreaProps<TSlice>): react_jsx_runtime0.JSX.Element;
+declare function DropZoneArea<TSlice = DropZoneStore>(props: DropZoneAreaProps<TSlice>): _$react_jsx_runtime0.JSX.Element;
 type DropZoneTriggerProps = {
   asChild?: boolean;
 } & PartInputProps["trigger"];
-declare function DropZoneTrigger(props: DropZoneTriggerProps): react_jsx_runtime0.JSX.Element;
+declare function DropZoneTrigger(props: DropZoneTriggerProps): _$react_jsx_runtime0.JSX.Element;
 type ListPerItemContext = Pick<DropZoneStore, "actions"> & {
   array: DropZoneStore["fileStateArray"];
   fileState: DropZoneStore["fileStateArray"][number];
@@ -343,15 +336,15 @@ type DropZoneFileListProps = {
   asChild?: boolean;
   forceMount?: boolean;
 } & (FileListManualListVariant | FileListPerItemVariant) & Omit<PartInputProps["fileList"], "children">;
-declare function DropZoneFileList<TElement extends React.ElementType = "ul">(props: PolymorphicPropsStrict<TElement, DropZoneFileListProps>): react_jsx_runtime0.JSX.Element;
+declare function DropZoneFileList<TElement extends React.ElementType = "ul">(props: PolymorphicPropsStrict<TElement, DropZoneFileListProps>): _$react_jsx_runtime0.JSX.Element;
 type DropZoneFileItemProps = FileItemContextType & {
   asChild?: boolean;
 } & PartInputProps["fileItem"];
-declare function DropZoneFileItem<TElement extends React.ElementType = "li">(props: PolymorphicPropsStrict<TElement, DropZoneFileItemProps>): react_jsx_runtime0.JSX.Element;
+declare function DropZoneFileItem<TElement extends React.ElementType = "li">(props: PolymorphicPropsStrict<TElement, DropZoneFileItemProps>): _$react_jsx_runtime0.JSX.Element;
 type DropZoneFileItemDeleteProps = {
   asChild?: boolean;
 } & PartInputProps["fileItemDelete"];
-declare function DropZoneFileItemDelete(props: DropZoneFileItemDeleteProps): react_jsx_runtime0.JSX.Element;
+declare function DropZoneFileItemDelete(props: DropZoneFileItemDeleteProps): _$react_jsx_runtime0.JSX.Element;
 type StrictExtract<TUnion, TPick extends TUnion> = Extract<TUnion, TPick>;
 type DropZoneFileItemProgressProps = {
   asChild?: boolean;
@@ -375,7 +368,7 @@ type DropZoneFileItemProgressProps = {
   };
   variant?: StrictExtract<PartInputProps["fileItemProgress"]["variant"], "linear">;
 });
-declare function DropZoneFileItemProgress<TElement extends React.ElementType = "span">(props: PolymorphicPropsStrict<TElement, DropZoneFileItemProgressProps>): react_jsx_runtime0.JSX.Element | null;
+declare function DropZoneFileItemProgress<TElement extends React.ElementType = "span">(props: PolymorphicPropsStrict<TElement, DropZoneFileItemProgressProps>): _$react_jsx_runtime0.JSX.Element | null;
 type NodeCtx<TElement extends React.ElementType> = {
   getProps: (innerProps: Partial<InferProps<TElement>>) => InferProps<TElement>;
 };
@@ -407,7 +400,7 @@ type DropZoneFileItemPreviewProps = Partial<Pick<FileItemContextType, "fileState
   }) => React.ReactNode);
   renderPreview?: boolean | RenderPreview;
 } & Omit<PartInputProps["fileItemPreview"], "children">;
-declare function DropZoneFileItemPreview<TElement extends React.ElementType>(props: PolymorphicPropsStrict<TElement, DropZoneFileItemPreviewProps>): react_jsx_runtime0.JSX.Element | null;
+declare function DropZoneFileItemPreview<TElement extends React.ElementType>(props: PolymorphicPropsStrict<TElement, DropZoneFileItemPreviewProps>): _$react_jsx_runtime0.JSX.Element | null;
 type DropZoneFileItemMetadataProps = Partial<Pick<FileItemContextType, "fileState">> & {
   asChild?: boolean;
   children?: React.ReactNode | ((context: Pick<FileItemContextType, "fileState">) => React.ReactNode);
@@ -417,12 +410,12 @@ type DropZoneFileItemMetadataProps = Partial<Pick<FileItemContextType, "fileStat
   };
   size?: "default" | "sm";
 } & Omit<PartInputProps["fileItemMetadata"], "children">;
-declare function DropZoneFileItemMetadata(props: DropZoneFileItemMetadataProps): react_jsx_runtime0.JSX.Element | null;
+declare function DropZoneFileItemMetadata(props: DropZoneFileItemMetadataProps): _$react_jsx_runtime0.JSX.Element | null;
 type DropZoneFileClearProps = {
   asChild?: boolean;
   forceMount?: boolean;
 } & PartInputProps["fileItemClear"];
-declare function DropZoneFileClear(props: DropZoneFileClearProps): react_jsx_runtime0.JSX.Element | null;
+declare function DropZoneFileClear(props: DropZoneFileClearProps): _$react_jsx_runtime0.JSX.Element | null;
 declare namespace drop_zone_parts_d_exports {
   export { DropZoneArea as Area, DropZoneContainer as Container, DropZoneContext as Context, DropZoneFileClear as FileClear, DropZoneFileItem as FileItem, DropZoneFileItemDelete as FileItemDelete, DropZoneFileItemMetadata as FileItemMetadata, DropZoneFileItemPreview as FileItemPreview, DropZoneFileItemProgress as FileItemProgress, DropZoneFileList as FileList, DropZoneInput as Input, DropZoneRoot as Root, DropZoneTrigger as Trigger };
 }
@@ -430,5 +423,16 @@ declare namespace drop_zone_parts_d_exports {
 //#region src/components/ui/drop-zone/use-drop-zone.d.ts
 declare const useDropZone: (props?: UseDropZoneProps) => UseDropZoneResult;
 //#endregion
+//#region src/components/ui/drop-zone/utils.d.ts
+declare class DropZoneError extends Error {
+  readonly dropZoneErrorSymbol: symbol;
+  file?: FileValidationErrorContextEach["file"];
+  name: "DropZoneError";
+  constructor(ctx: Pick<FileValidationErrorContextEach, "message"> & {
+    file?: FileValidationErrorContextEach["file"];
+  }, errorOptions?: ErrorOptions);
+  static isError(error: unknown): error is DropZoneError;
+}
+//#endregion
 export { drop_zone_parts_d_exports as DropZone, type DropZoneActions, DropZoneArea, DropZoneAreaProps, DropZoneContainer, DropZoneContainerProps, DropZoneContext, DropZoneContextProps, DropZoneError, DropZoneFileClear, DropZoneFileClearProps, DropZoneFileItem, DropZoneFileItemDelete, DropZoneFileItemDeleteProps, DropZoneFileItemMetadata, DropZoneFileItemMetadataProps, DropZoneFileItemPreview, DropZoneFileItemPreviewProps, DropZoneFileItemProgress, DropZoneFileItemProgressProps, DropZoneFileItemProps, DropZoneFileList, DropZoneFileListProps, DropZoneInput, DropZoneInputProps, DropZoneRoot, DropZoneRootProps, type DropZoneState, type DropZoneStore, DropZoneTrigger, DropZoneTriggerProps, type FileState, type UseDropZoneProps, type UseDropZoneResult, useDropZone, useDropZoneStoreContext };
 //# sourceMappingURL=index.d.ts.map