@zayne-labs/ui-react 0.10.29 → 0.10.30

package/dist/esm/common/await/index.d.ts

@@ -1,8 +1,8 @@
-import { ErrorBoundaryProps } from "../../index-VaH0JUpk.js";
-import { SuspenseWithBoundaryProps } from "../../index-b07BOI6k.js";
+import { ErrorBoundaryProps } from "../../index-D5O2PoOf.js";
+import { SuspenseWithBoundaryProps } from "../../index-BFkVXsFG.js";
 import { GetSlotComponentProps } from "@zayne-labs/toolkit-react/utils";
 import * as React from "react";
-import * as react_jsx_runtime18 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/common/await/await.d.ts
 type RenderPropFn<TValue> = (result: TValue) => React.ReactNode;
@@ -14,7 +14,7 @@ type AwaitRootProps<TValue> = Pick<SuspenseWithBoundaryProps, "errorFallback" |
   withErrorBoundary?: boolean;
   withSuspense?: boolean;
 };
-declare function AwaitRoot<TValue>(props: AwaitRootProps<TValue>): react_jsx_runtime18.JSX.Element;
+declare function AwaitRoot<TValue>(props: AwaitRootProps<TValue>): react_jsx_runtime0.JSX.Element;
 type AwaitSuccessProps<TValue = unknown> = GetSlotComponentProps<"default", ChildrenType<TValue>>;
 declare function AwaitSuccess<TPromiseOrValue, TValue = Awaited<TPromiseOrValue>>(props: Pick<AwaitSuccessProps<TValue>, "children">): React.ReactNode;
 type AwaitErrorProps = GetSlotComponentProps<"error", ErrorBoundaryProps["fallback"]>;

package/dist/esm/common/error-boundary/index.d.ts

@@ -1,2 +1,2 @@
-import { ErrorBoundary, ErrorBoundaryContextType, ErrorBoundaryProps, FallbackProps, useErrorBoundary, useErrorBoundaryContext } from "../../index-VaH0JUpk.js";
+import { ErrorBoundary, ErrorBoundaryContextType, ErrorBoundaryProps, FallbackProps, useErrorBoundary, useErrorBoundaryContext } from "../../index-D5O2PoOf.js";
 export { ErrorBoundary, ErrorBoundaryContextType, ErrorBoundaryProps, FallbackProps, useErrorBoundary, useErrorBoundaryContext };

package/dist/esm/common/for/index.d.ts

@@ -1,7 +1,7 @@
 import { DiscriminatedRenderItemProps, PolymorphicPropsStrict } from "@zayne-labs/toolkit-react/utils";
 import { Prettify } from "@zayne-labs/toolkit-type-helpers";
 import * as React from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
 
 //#region src/components/common/for/for.d.ts
 type ArrayOrNumber = number | readonly unknown[];
@@ -15,7 +15,7 @@ type ForProps<TArray extends ArrayOrNumber> = Prettify<{
 declare function For<const TArray extends ArrayOrNumber>(props: ForProps<TArray>): string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null;
 declare function ForWithWrapper<const TArray extends ArrayOrNumber, TElement extends React.ElementType = "ul">(props: PolymorphicPropsStrict<TElement, ForProps<TArray>> & {
   displayFallBackWhenEmpty?: boolean;
-}): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null;
+}): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | react_jsx_runtime17.JSX.Element | null;
 //#endregion
 //#region src/components/common/for/getElementList.d.ts
 type GetElementListResult<TVariant extends "base" | "withWrapper"> = TVariant extends "base" ? [typeof For] : [typeof ForWithWrapper];

package/dist/esm/common/presence/index.d.ts

@@ -4,6 +4,20 @@ import * as React from "react";
 type UsePresenceOptions = {
   onExitComplete?: () => void;
   present: boolean;
+  /**
+   * @default "animation"
+   */
+  variant?: "animation" | "transition";
+};
+/**
+ * React hook that provides the ability to animate the mount/unmount of a component.
+ * @see https://github.com/radix-ui/primitives/blob/main/packages/react/presence/src/presence.tsx
+ */
+declare const usePresence: (options: UsePresenceOptions) => {
+  isPresent: boolean;
+  isPresentOrIsTransitionComplete: boolean;
+  ref: (refNode: HTMLElement | null) => void;
+  shouldStartTransition: boolean;
 };
 //#endregion
 //#region src/components/common/presence/presence.d.ts
@@ -11,9 +25,7 @@ type RefProp = {
   ref?: React.Ref<HTMLElement>;
 };
 type PresenceProps = UsePresenceOptions & {
-  children?: React.ReactElement<RefProp> | ((props: {
-    isPresent: boolean;
-  }) => React.ReactElement<RefProp>);
+  children?: React.ReactElement<RefProp> | ((props: Omit<ReturnType<typeof usePresence>, "ref">) => React.ReactElement<RefProp>);
   forceMount?: boolean;
 };
 declare function Presence(props: PresenceProps): React.ReactElement<RefProp, string | React.JSXElementConstructor<any>> | null | undefined;

package/dist/esm/common/presence/index.js

@@ -1,6 +1,6 @@
 "use client";
 
 
-import { Presence } from "../../presence-CAQElNtY.js";
+import { Presence } from "../../presence-CzmCEhXS.js";
 
 export { Presence };

package/dist/esm/common/slot/index.d.ts

@@ -1,10 +1,10 @@
 import { InferProps } from "@zayne-labs/toolkit-react/utils";
 import * as React from "react";
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
 
 //#region src/components/common/slot/slot.d.ts
 type SlotProps = InferProps<HTMLElement>;
-declare function SlotRoot(props: SlotProps): react_jsx_runtime8.JSX.Element | null;
+declare function SlotRoot(props: SlotProps): react_jsx_runtime16.JSX.Element | null;
 declare function SlotSlottable({
   children
 }: Pick<SlotProps, "children">): React.ReactNode;

package/dist/esm/common/suspense-with-boundary/index.d.ts

@@ -1,3 +1,3 @@
-import "../../index-VaH0JUpk.js";
-import { SuspenseWithBoundary, SuspenseWithBoundaryProps } from "../../index-b07BOI6k.js";
+import "../../index-D5O2PoOf.js";
+import { SuspenseWithBoundary, SuspenseWithBoundaryProps } from "../../index-BFkVXsFG.js";
 export { SuspenseWithBoundary, SuspenseWithBoundaryProps };

package/dist/esm/common/teleport/index.js

@@ -1,25 +1,28 @@
 import { isString } from "@zayne-labs/toolkit-type-helpers";
-import { useEffect, useState } from "react";
+import { useEffectEvent, useInsertionEffect, useState } from "react";
 import { createPortal } from "react-dom";
 
 //#region src/components/common/teleport/teleport.tsx
 function Teleport(props) {
 	const { children, insertPosition, to } = props;
 	const [portalContainer, setPortalContainer] = useState(null);
-	useEffect(() => {
+	const updatePortalContainer = useEffectEvent((destination) => {
+		setPortalContainer(destination);
+	});
+	useInsertionEffect(() => {
 		if (!to) return;
 		if (insertPosition) return;
 		const destination = isString(to) ? document.querySelector(to) : to;
-		destination && setPortalContainer(destination);
+		destination && updatePortalContainer(destination);
 	}, [to, insertPosition]);
-	useEffect(() => {
+	useInsertionEffect(() => {
 		if (!to) return;
 		if (!insertPosition) return;
 		const destination = isString(to) ? document.querySelector(to) : to;
 		const tempWrapper = document.createElement("div");
 		tempWrapper.style.display = "contents";
 		destination?.insertAdjacentElement(insertPosition, tempWrapper);
-		setPortalContainer(tempWrapper);
+		updatePortalContainer(tempWrapper);
 		return () => {
 			tempWrapper.remove();
 		};

package/dist/esm/common/teleport/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/common/teleport/teleport.tsx"],"sourcesContent":["\"use client\";\n\nimport { type AnyString, isString } from \"@zayne-labs/toolkit-type-helpers\";\nimport * as React from \"react\";\nimport { useEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\ntype ValidHtmlTags = keyof HTMLElementTagNameMap;\n\ntype PortalProps = {\n\tchildren: React.ReactNode;\n\tinsertPosition?: InsertPosition;\n\tto: AnyString | HTMLElement | ValidHtmlTags | null;\n};\n\nfunction Teleport(props: PortalProps) {\n\tconst { children, insertPosition, to } = props;\n\n\tconst [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);\n\n\t/* eslint-disable react-hooks-extra/no-direct-set-state-in-use-effect -- Allow */\n\n\tuseEffect(() => {\n\t\tif (!to) return;\n\n\t\tif (insertPosition) return;\n\n\t\tconst destination = isString(to) ? document.querySelector<HTMLElement>(to) : to;\n\n\t\tdestination && setPortalContainer(destination);\n\t}, [to, insertPosition]);\n\n\tuseEffect(() => {\n\t\tif (!to) return;\n\n\t\tif (!insertPosition) return;\n\n\t\tconst destination = isString(to) ? document.querySelector<HTMLElement>(to) : to;\n\n\t\tconst tempWrapper = document.createElement(\"div\");\n\t\ttempWrapper.style.display = \"contents\";\n\n\t\tdestination?.insertAdjacentElement(insertPosition, tempWrapper);\n\n\t\tsetPortalContainer(tempWrapper);\n\n\t\treturn () => {\n\t\t\ttempWrapper.remove();\n\t\t};\n\t}, [to, insertPosition]);\n\n\t/* eslint-enable react-hooks-extra/no-direct-set-state-in-use-effect -- Allow */\n\n\treturn portalContainer && createPortal(children, portalContainer);\n}\n\nexport { Teleport };\n"],"mappings":";;;;;AAeA,SAAS,SAAS,OAAoB;CACrC,MAAM,EAAE,UAAU,gBAAgB,OAAO;CAEzC,MAAM,CAAC,iBAAiB,sBAAsB,SAA6B,KAAK;AAIhF,iBAAgB;AACf,MAAI,CAAC,GAAI;AAET,MAAI,eAAgB;EAEpB,MAAM,cAAc,SAAS,GAAG,GAAG,SAAS,cAA2B,GAAG,GAAG;AAE7E,iBAAe,mBAAmB,YAAY;IAC5C,CAAC,IAAI,eAAe,CAAC;AAExB,iBAAgB;AACf,MAAI,CAAC,GAAI;AAET,MAAI,CAAC,eAAgB;EAErB,MAAM,cAAc,SAAS,GAAG,GAAG,SAAS,cAA2B,GAAG,GAAG;EAE7E,MAAM,cAAc,SAAS,cAAc,MAAM;AACjD,cAAY,MAAM,UAAU;AAE5B,eAAa,sBAAsB,gBAAgB,YAAY;AAE/D,qBAAmB,YAAY;AAE/B,eAAa;AACZ,eAAY,QAAQ;;IAEnB,CAAC,IAAI,eAAe,CAAC;AAIxB,QAAO,mBAAmB,aAAa,UAAU,gBAAgB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/common/teleport/teleport.tsx"],"sourcesContent":["\"use client\";\n\nimport { type AnyString, isString } from \"@zayne-labs/toolkit-type-helpers\";\nimport * as React from \"react\";\nimport { useEffectEvent, useInsertionEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\ntype ValidHtmlTags = keyof HTMLElementTagNameMap;\n\ntype PortalProps = {\n\tchildren: React.ReactNode;\n\tinsertPosition?: InsertPosition;\n\tto: AnyString | HTMLElement | ValidHtmlTags | null;\n};\n\nfunction Teleport(props: PortalProps) {\n\tconst { children, insertPosition, to } = props;\n\n\tconst [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);\n\n\tconst updatePortalContainer = useEffectEvent((destination: HTMLElement | null) => {\n\t\tsetPortalContainer(destination);\n\t});\n\n\tuseInsertionEffect(() => {\n\t\tif (!to) return;\n\n\t\tif (insertPosition) return;\n\n\t\tconst destination = isString(to) ? document.querySelector<HTMLElement>(to) : to;\n\n\t\tdestination && updatePortalContainer(destination);\n\t}, [to, insertPosition]);\n\n\tuseInsertionEffect(() => {\n\t\tif (!to) return;\n\n\t\tif (!insertPosition) return;\n\n\t\tconst destination = isString(to) ? document.querySelector<HTMLElement>(to) : to;\n\n\t\tconst tempWrapper = document.createElement(\"div\");\n\t\ttempWrapper.style.display = \"contents\";\n\n\t\tdestination?.insertAdjacentElement(insertPosition, tempWrapper);\n\n\t\tupdatePortalContainer(tempWrapper);\n\n\t\treturn () => {\n\t\t\ttempWrapper.remove();\n\t\t};\n\t}, [to, insertPosition]);\n\n\treturn portalContainer && createPortal(children, portalContainer);\n}\n\nexport { Teleport };\n"],"mappings":";;;;;AAeA,SAAS,SAAS,OAAoB;CACrC,MAAM,EAAE,UAAU,gBAAgB,OAAO;CAEzC,MAAM,CAAC,iBAAiB,sBAAsB,SAA6B,KAAK;CAEhF,MAAM,wBAAwB,gBAAgB,gBAAoC;AACjF,qBAAmB,YAAY;GAC9B;AAEF,0BAAyB;AACxB,MAAI,CAAC,GAAI;AAET,MAAI,eAAgB;EAEpB,MAAM,cAAc,SAAS,GAAG,GAAG,SAAS,cAA2B,GAAG,GAAG;AAE7E,iBAAe,sBAAsB,YAAY;IAC/C,CAAC,IAAI,eAAe,CAAC;AAExB,0BAAyB;AACxB,MAAI,CAAC,GAAI;AAET,MAAI,CAAC,eAAgB;EAErB,MAAM,cAAc,SAAS,GAAG,GAAG,SAAS,cAA2B,GAAG,GAAG;EAE7E,MAAM,cAAc,SAAS,cAAc,MAAM;AACjD,cAAY,MAAM,UAAU;AAE5B,eAAa,sBAAsB,gBAAgB,YAAY;AAE/D,wBAAsB,YAAY;AAElC,eAAa;AACZ,eAAY,QAAQ;;IAEnB,CAAC,IAAI,eAAe,CAAC;AAExB,QAAO,mBAAmB,aAAa,UAAU,gBAAgB"}

package/dist/esm/{index-b07BOI6k.d.ts → index-BFkVXsFG.d.ts}

@@ -1,6 +1,6 @@
-import { ErrorBoundaryProps } from "./index-VaH0JUpk.js";
+import { ErrorBoundaryProps } from "./index-D5O2PoOf.js";
 import * as React from "react";
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/common/suspense-with-boundary/suspense-with-boundary.d.ts
 type SuspenseWithBoundaryProps = {
@@ -8,7 +8,7 @@ type SuspenseWithBoundaryProps = {
   errorFallback?: ErrorBoundaryProps["fallback"];
   fallback?: React.ReactNode;
 };
-declare function SuspenseWithBoundary(props: SuspenseWithBoundaryProps): react_jsx_runtime9.JSX.Element;
+declare function SuspenseWithBoundary(props: SuspenseWithBoundaryProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { SuspenseWithBoundary, SuspenseWithBoundaryProps };
-//# sourceMappingURL=index-b07BOI6k.d.ts.map
+//# sourceMappingURL=index-BFkVXsFG.d.ts.map

package/dist/esm/{index-VaH0JUpk.d.ts → index-D5O2PoOf.d.ts}

@@ -1,7 +1,7 @@
 import * as React$1 from "react";
 import { Component } from "react";
 import * as _zayne_labs_toolkit_react0 from "@zayne-labs/toolkit-react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
 
 //#region src/components/common/error-boundary/types.d.ts
 type FallbackProps = {
@@ -49,7 +49,7 @@ declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryS
   };
   componentDidCatch(error: Error, info: React$1.ErrorInfo): void;
   componentDidUpdate(prevProps: ErrorBoundaryProps, prevState: ErrorBoundaryState): void;
-  render(): react_jsx_runtime0.JSX.Element;
+  render(): react_jsx_runtime18.JSX.Element;
 }
 //#endregion
 //#region src/components/common/error-boundary/error-boundary-context.d.ts
@@ -67,4 +67,4 @@ declare const useErrorBoundary: <TError extends Error>() => {
 };
 //#endregion
 export { ErrorBoundary, type ErrorBoundaryContextType, ErrorBoundaryProps, FallbackProps, useErrorBoundary, useErrorBoundaryContext };
-//# sourceMappingURL=index-VaH0JUpk.d.ts.map
+//# sourceMappingURL=index-D5O2PoOf.d.ts.map

package/dist/esm/{presence-CAQElNtY.js → presence-CzmCEhXS.js}

@@ -1,6 +1,6 @@
 import { isFunction } from "@zayne-labs/toolkit-type-helpers";
 import { Children, cloneElement, useEffect, useLayoutEffect, useReducer, useRef, useState } from "react";
-import { useCallbackRef, useComposeRefs } from "@zayne-labs/toolkit-react";
+import { useCallbackRef, useComposeRefs, useToggle } from "@zayne-labs/toolkit-react";
 import { on } from "@zayne-labs/toolkit-core";
 
 //#region src/components/common/presence/use-presence.ts
@@ -16,14 +16,17 @@ const getAnimationName = (styles) => styles?.animationName ?? "none";
 * @see https://github.com/radix-ui/primitives/blob/main/packages/react/presence/src/presence.tsx
 */
 const usePresence = (options) => {
-	const { onExitComplete, present } = options;
-	const saveOnExitComplete = useCallbackRef(onExitComplete);
+	const { onExitComplete, present: presentProp, variant = "animation" } = options;
+	const stableOnExitComplete = useCallbackRef(onExitComplete);
 	const [node, setNode] = useState(null);
+	const [hasTransitioned, toggleHasTransitioned] = useToggle(false);
 	const stylesRef = useRef(null);
-	const prevPresentRef = useRef(present);
-	const prevAnimationNameRef = useRef("none");
+	const prevNodeStateRef = useRef({
+		prevAnimationName: "none",
+		prevPresent: presentProp
+	});
 	const [state, send] = useStateMachine({
-		initial: present ? "mounted" : "unmounted",
+		initial: presentProp ? "mounted" : "unmounted",
 		states: {
 			mounted: {
 				ANIMATION_OUT: "unmountSuspended",
@@ -38,38 +41,41 @@ const usePresence = (options) => {
 	});
 	useEffect(() => {
 		const currentAnimationName = getAnimationName(stylesRef.current);
-		prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
+		prevNodeStateRef.current.prevAnimationName = state === "mounted" ? currentAnimationName : "none";
 	}, [state]);
 	useLayoutEffect(() => {
 		const styles = stylesRef.current;
-		const wasPresent = prevPresentRef.current;
-		if (!(wasPresent !== present)) return;
-		const prevAnimationName = prevAnimationNameRef.current;
+		const wasPresent = prevNodeStateRef.current.prevPresent;
+		if (!(wasPresent !== presentProp)) return;
+		const prevAnimationName = prevNodeStateRef.current.prevAnimationName;
 		const currentAnimationName = getAnimationName(styles);
 		switch (true) {
-			case present:
+			case presentProp:
 				send("MOUNT");
+				if (variant === "transition") requestAnimationFrame(() => toggleHasTransitioned(true));
 				break;
-			case Boolean(node):
-				if (!(currentAnimationName !== "none" && styles?.display !== "none" || styles?.transitionProperty !== "none" && Number(styles?.transitionDuration) > 0)) {
-					send("UNMOUNT");
-					break;
-				}
-				if (!(wasPresent && prevAnimationName !== currentAnimationName)) {
-					send("UNMOUNT");
-					break;
-				}
-				send("ANIMATION_OUT");
+			case Boolean(node) && variant === "animation": {
+				/**
+				* When `present` changes to `false`, we check changes to animation-name to
+				* determine whether an animation has started. We chose this approach (reading
+				* computed styles) because there is no `animationrun` event (like the `transitionrun` event) and `animationstart`
+				* fires after `animation-delay` has expired which would be too late.
+				*/
+				const isAnimationStarted = currentAnimationName !== "none" && styles?.display !== "none" && prevAnimationName !== currentAnimationName;
+				send(wasPresent && isAnimationStarted ? "ANIMATION_OUT" : "UNMOUNT");
 				break;
+			}
 			default:
 				send("UNMOUNT");
 				break;
 		}
-		prevPresentRef.current = present;
+		prevNodeStateRef.current.prevPresent = presentProp;
 	}, [
-		present,
+		presentProp,
 		node,
-		send
+		send,
+		variant,
+		toggleHasTransitioned
 	]);
 	useLayoutEffect(() => {
 		if (!node) {
@@ -78,6 +84,10 @@ const usePresence = (options) => {
 		}
 		let timeoutId;
 		const ownerWindow = node.ownerDocument.defaultView ?? globalThis;
+		const handleAnimationStart = (event) => {
+			if (!(event.target === node)) return;
+			prevNodeStateRef.current.prevAnimationName = getAnimationName(stylesRef.current);
+		};
 		/**
 		* @description Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
 		* event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we
@@ -87,7 +97,7 @@ const usePresence = (options) => {
 			const isCurrentAnimation = getAnimationName(stylesRef.current).includes(CSS.escape(event.animationName));
 			if (!(event.target === node && isCurrentAnimation)) return;
 			send("ANIMATION_END");
-			if (!prevPresentRef.current) {
+			if (!prevNodeStateRef.current.prevPresent) {
 				const currentFillMode = node.style.animationFillMode;
 				node.style.animationFillMode = "forwards";
 				timeoutId = ownerWindow.setTimeout(() => {
@@ -95,17 +105,18 @@ const usePresence = (options) => {
 				});
 			}
 		};
+		const handleTransitionRun = (event) => {
+			if (!(event.target === node)) return;
+			send("ANIMATION_OUT");
+		};
 		const handleTransitionEnd = (event) => {
-			if (!(event.target === node && !prevPresentRef.current)) return;
+			if (!(event.target === node && !prevNodeStateRef.current.prevPresent)) return;
 			send("ANIMATION_END");
 		};
-		const handleAnimationStart = (event) => {
-			if (!(event.target === node)) return;
-			prevAnimationNameRef.current = getAnimationName(stylesRef.current);
-		};
 		const onAnimationStartCleanup = on("animationstart", node, handleAnimationStart);
 		const onAnimationEndCleanup = on("animationend", node, handleAnimationEnd);
 		const onAnimationCancelCleanup = on("animationcancel", node, handleAnimationEnd);
+		const onTransitionRunCleanup = on("transitionrun", node, handleTransitionRun);
 		const onTransitionEndCleanup = on("transitionend", node, handleTransitionEnd);
 		const onTransitionCancelCleanup = on("transitioncancel", node, handleTransitionEnd);
 		return () => {
@@ -113,44 +124,55 @@ const usePresence = (options) => {
 			onAnimationStartCleanup();
 			onAnimationEndCleanup();
 			onAnimationCancelCleanup();
+			onTransitionRunCleanup();
 			onTransitionEndCleanup();
 			onTransitionCancelCleanup();
 		};
 	}, [node, send]);
 	useEffect(() => {
-		if (!(state === "unmounted" && !present)) return;
-		saveOnExitComplete();
+		if (state === "unmounted" && !presentProp) {
+			toggleHasTransitioned(false);
+			stableOnExitComplete();
+		}
 	}, [
 		state,
-		present,
-		saveOnExitComplete
+		presentProp,
+		stableOnExitComplete,
+		toggleHasTransitioned
 	]);
-	const isPresent = ["mounted", "unmountSuspended"].includes(state);
 	const ref = useCallbackRef((refNode) => {
-		refNode && (stylesRef.current = getComputedStyle(refNode));
 		setNode(refNode);
+		if (refNode) stylesRef.current = getComputedStyle(refNode);
 	});
+	const isPresent = ["mounted", "unmountSuspended"].includes(state);
 	return {
 		isPresent,
-		ref
+		isPresentOrIsTransitionComplete: isPresent || hasTransitioned,
+		ref,
+		shouldStartTransition: presentProp && hasTransitioned
 	};
 };
 
 //#endregion
 //#region src/components/common/presence/presence.tsx
 function Presence(props) {
-	const { children, forceMount = false, onExitComplete, present } = props;
-	const presence = usePresence({
+	const { children, forceMount = false, onExitComplete, present, variant } = props;
+	const { isPresent, isPresentOrIsTransitionComplete, ref: presenceRef, shouldStartTransition } = usePresence({
 		onExitComplete,
-		present
+		present,
+		variant
 	});
-	const resolvedChild = isFunction(children) ? children({ isPresent: presence.isPresent }) : Children.only(children);
+	const resolvedChild = isFunction(children) ? children({
+		isPresent,
+		isPresentOrIsTransitionComplete,
+		shouldStartTransition
+	}) : Children.only(children);
 	const childRef = resolvedChild?.props.ref ?? resolvedChild.ref;
-	const ref = useComposeRefs(presence.ref, childRef);
-	if (!(forceMount || presence.isPresent)) return null;
-	return resolvedChild && cloneElement(resolvedChild, { ref });
+	const combinedRefs = useComposeRefs(presenceRef, childRef);
+	if (!(forceMount || (variant === "transition" ? isPresentOrIsTransitionComplete : isPresent))) return null;
+	return resolvedChild && cloneElement(resolvedChild, { ref: combinedRefs });
 }
 
 //#endregion
 export { Presence };
-//# sourceMappingURL=presence-CAQElNtY.js.map
+//# sourceMappingURL=presence-CzmCEhXS.js.map

package/dist/esm/presence-CzmCEhXS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presence-CzmCEhXS.js","names":["timeoutId: number"],"sources":["../../src/components/common/presence/use-presence.ts","../../src/components/common/presence/presence.tsx"],"sourcesContent":["import { on } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef, useToggle } from \"@zayne-labs/toolkit-react\";\nimport { useEffect, useLayoutEffect, useReducer, useRef, useState } from \"react\";\n\ntype StateMachineConfig<TState extends string, TEvent extends string> = {\n\tinitial: TState;\n\tstates: Record<TState, Partial<Record<TEvent, TState>>>;\n};\n\nconst useStateMachine = <TState extends string, TEvent extends string>(\n\tconfig: StateMachineConfig<TState, TEvent>\n) => {\n\tconst reducer = (prevState: TState, event: TEvent): TState => {\n\t\tconst newState = config.states[prevState][event] ?? prevState;\n\n\t\treturn newState;\n\t};\n\n\treturn useReducer(reducer, config.initial);\n};\n\nconst getAnimationName = (styles: CSSStyleDeclaration | null) => styles?.animationName ?? \"none\";\n\nexport type UsePresenceOptions = {\n\tonExitComplete?: () => void;\n\tpresent: boolean;\n\t/**\n\t * @default \"animation\"\n\t */\n\tvariant?: \"animation\" | \"transition\";\n};\n\n/**\n * React hook that provides the ability to animate the mount/unmount of a component.\n * @see https://github.com/radix-ui/primitives/blob/main/packages/react/presence/src/presence.tsx\n */\n\nconst usePresence = (options: UsePresenceOptions) => {\n\tconst { onExitComplete, present: presentProp, variant = \"animation\" } = options;\n\n\tconst stableOnExitComplete = useCallbackRef(onExitComplete);\n\n\tconst [node, setNode] = useState<HTMLElement | null>(null);\n\n\tconst [hasTransitioned, toggleHasTransitioned] = useToggle(false);\n\n\tconst stylesRef = useRef<CSSStyleDeclaration | null>(null);\n\n\tconst prevNodeStateRef = useRef<{\n\t\tprevAnimationName: string;\n\t\tprevPresent: boolean;\n\t}>({\n\t\tprevAnimationName: \"none\",\n\t\tprevPresent: presentProp,\n\t});\n\n\tconst initialState = presentProp ? \"mounted\" : \"unmounted\";\n\n\tconst [state, send] = useStateMachine({\n\t\tinitial: initialState,\n\t\tstates: {\n\t\t\tmounted: {\n\t\t\t\tANIMATION_OUT: \"unmountSuspended\",\n\t\t\t\tUNMOUNT: \"unmounted\",\n\t\t\t},\n\t\t\tunmounted: {\n\t\t\t\tMOUNT: \"mounted\",\n\t\t\t},\n\t\t\tunmountSuspended: {\n\t\t\t\tANIMATION_END: \"unmounted\",\n\t\t\t\tMOUNT: \"mounted\",\n\t\t\t},\n\t\t},\n\t});\n\n\tuseEffect(() => {\n\t\tconst currentAnimationName = getAnimationName(stylesRef.current);\n\n\t\tprevNodeStateRef.current.prevAnimationName = state === \"mounted\" ? currentAnimationName : \"none\";\n\t}, [state]);\n\n\tuseLayoutEffect(() => {\n\t\tconst styles = stylesRef.current;\n\t\tconst wasPresent = prevNodeStateRef.current.prevPresent;\n\t\tconst hasPresentChanged = wasPresent !== presentProp;\n\n\t\tif (!hasPresentChanged) return;\n\n\t\tconst prevAnimationName = prevNodeStateRef.current.prevAnimationName;\n\t\tconst currentAnimationName = getAnimationName(styles);\n\n\t\tswitch (true) {\n\t\t\tcase presentProp: {\n\t\t\t\tsend(\"MOUNT\");\n\n\t\t\t\tif (variant === \"transition\") {\n\t\t\t\t\trequestAnimationFrame(() => toggleHasTransitioned(true));\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tcase Boolean(node) && variant === \"animation\": {\n\t\t\t\tconst hasAnimation = currentAnimationName !== \"none\" && styles?.display !== \"none\";\n\n\t\t\t\t/**\n\t\t\t\t * When `present` changes to `false`, we check changes to animation-name to\n\t\t\t\t * determine whether an animation has started. We chose this approach (reading\n\t\t\t\t * computed styles) because there is no `animationrun` event (like the `transitionrun` event) and `animationstart`\n\t\t\t\t * fires after `animation-delay` has expired which would be too late.\n\t\t\t\t */\n\n\t\t\t\tconst isAnimationStarted = hasAnimation && prevAnimationName !== currentAnimationName;\n\n\t\t\t\tconst isAnimatingOut = wasPresent && isAnimationStarted;\n\n\t\t\t\tsend(isAnimatingOut ? \"ANIMATION_OUT\" : \"UNMOUNT\");\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tdefault: {\n\t\t\t\tsend(\"UNMOUNT\");\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\tprevNodeStateRef.current.prevPresent = presentProp;\n\t}, [presentProp, node, send, variant, toggleHasTransitioned]);\n\n\tuseLayoutEffect(() => {\n\t\tif (!node) {\n\t\t\t// Transition to the unmounted state if the node is removed prematurely.\n\t\t\t// We avoid doing so during cleanup as the node may change but still exist.\n\t\t\tsend(\"ANIMATION_END\");\n\t\t\treturn;\n\t\t}\n\n\t\tlet timeoutId: number;\n\n\t\tconst ownerWindow = node.ownerDocument.defaultView ?? globalThis;\n\n\t\tconst handleAnimationStart = (event: AnimationEvent) => {\n\t\t\tconst isTargetAnimatingNode = event.target === node;\n\n\t\t\tif (!isTargetAnimatingNode) return;\n\n\t\t\tprevNodeStateRef.current.prevAnimationName = getAnimationName(stylesRef.current);\n\t\t};\n\n\t\t/**\n\t\t * @description Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`\n\t\t * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we\n\t\t * make sure we only trigger ANIMATION_END for the currently active animation.\n\t\t */\n\t\tconst handleAnimationEnd = (event: AnimationEvent) => {\n\t\t\tconst currentAnimationName = getAnimationName(stylesRef.current);\n\n\t\t\t// The event.animationName is unescaped for CSS syntax, so we need to escape it to compare with the animationName computed from the style.\n\t\t\tconst isCurrentAnimation = currentAnimationName.includes(CSS.escape(event.animationName));\n\n\t\t\tconst isTargetAnimatingNode = event.target === node && isCurrentAnimation;\n\n\t\t\tif (!isTargetAnimatingNode) return;\n\n\t\t\t// With React 18 concurrency this update is applied a frame after the\n\t\t\t// animation ends, creating a flash of visible content. By setting the\n\t\t\t// animation fill mode to \"forwards\", we force the node to keep the\n\t\t\t// styles of the last keyframe, removing the flash.\n\n\t\t\t// Previously we flushed the update via ReactDom.flushSync, but with\n\t\t\t// exit animations this resulted in the node being removed from the\n\t\t\t// DOM before the synthetic animationEnd event was dispatched, meaning\n\t\t\t// user-provided event handlers would not be called.\n\t\t\t// https://github.com/radix-ui/primitives/pull/1849\n\t\t\tsend(\"ANIMATION_END\");\n\n\t\t\tif (!prevNodeStateRef.current.prevPresent) {\n\t\t\t\tconst currentFillMode = node.style.animationFillMode;\n\t\t\t\tnode.style.animationFillMode = \"forwards\";\n\n\t\t\t\t// Reset the style after the node had time to unmount (for cases\n\t\t\t\t// where the component chooses not to unmount). Doing this any\n\t\t\t\t// sooner than `setTimeout` (e.g. with `requestAnimationFrame`)\n\t\t\t\t// still causes a flash.\n\t\t\t\ttimeoutId = ownerWindow.setTimeout(() => {\n\t\t\t\t\tif (node.style.animationFillMode === \"forwards\") {\n\t\t\t\t\t\tnode.style.animationFillMode = currentFillMode;\n\t\t\t\t\t}\n\t\t\t\t}) as never;\n\t\t\t}\n\t\t};\n\n\t\tconst handleTransitionRun = (event: TransitionEvent) => {\n\t\t\tconst isTargetTransitioningNode = event.target === node;\n\n\t\t\tif (!isTargetTransitioningNode) return;\n\n\t\t\tsend(\"ANIMATION_OUT\");\n\t\t};\n\n\t\tconst handleTransitionEnd = (event: TransitionEvent) => {\n\t\t\tconst isTargetTransitioningNode = event.target === node && !prevNodeStateRef.current.prevPresent;\n\n\t\t\tif (!isTargetTransitioningNode) return;\n\n\t\t\tsend(\"ANIMATION_END\");\n\t\t};\n\n\t\tconst onAnimationStartCleanup = on(\"animationstart\", node, handleAnimationStart);\n\t\tconst onAnimationEndCleanup = on(\"animationend\", node, handleAnimationEnd);\n\t\tconst onAnimationCancelCleanup = on(\"animationcancel\", node, handleAnimationEnd);\n\n\t\tconst onTransitionRunCleanup = on(\"transitionrun\", node, handleTransitionRun);\n\t\tconst onTransitionEndCleanup = on(\"transitionend\", node, handleTransitionEnd);\n\t\tconst onTransitionCancelCleanup = on(\"transitioncancel\", node, handleTransitionEnd);\n\n\t\treturn () => {\n\t\t\townerWindow.clearTimeout(timeoutId);\n\t\t\tonAnimationStartCleanup();\n\t\t\tonAnimationEndCleanup();\n\t\t\tonAnimationCancelCleanup();\n\n\t\t\tonTransitionRunCleanup();\n\t\t\tonTransitionEndCleanup();\n\t\t\tonTransitionCancelCleanup();\n\t\t};\n\t}, [node, send]);\n\n\tuseEffect(() => {\n\t\tconst isExitCompleted = state === \"unmounted\" && !presentProp;\n\n\t\tif (isExitCompleted) {\n\t\t\ttoggleHasTransitioned(false);\n\t\t\tstableOnExitComplete();\n\t\t}\n\t}, [state, presentProp, stableOnExitComplete, toggleHasTransitioned]);\n\n\tconst ref = useCallbackRef((refNode: HTMLElement | null) => {\n\t\tsetNode(refNode);\n\n\t\tif (refNode) {\n\t\t\tstylesRef.current = getComputedStyle(refNode);\n\t\t}\n\t});\n\n\tconst MOUNTED_STATES = [\"mounted\", \"unmountSuspended\"] satisfies Array<typeof state>;\n\tconst isPresent = MOUNTED_STATES.includes(state);\n\n\treturn {\n\t\tisPresent,\n\t\tisPresentOrIsTransitionComplete: isPresent || hasTransitioned,\n\t\tref,\n\t\tshouldStartTransition: presentProp && hasTransitioned,\n\t};\n};\n\nexport { usePresence };\n","\"use client\";\n\nimport { useComposeRefs } from \"@zayne-labs/toolkit-react\";\nimport { isFunction, type UnknownObject } from \"@zayne-labs/toolkit-type-helpers\";\nimport * as React from \"react\";\nimport { Children, cloneElement } from \"react\";\nimport { type UsePresenceOptions, usePresence } from \"./use-presence\";\n\ntype RefProp = { ref?: React.Ref<HTMLElement> };\n\ntype PresenceProps = UsePresenceOptions & {\n\tchildren?:\n\t\t| React.ReactElement<RefProp>\n\t\t| ((props: Omit<ReturnType<typeof usePresence>, \"ref\">) => React.ReactElement<RefProp>);\n\tforceMount?: boolean;\n};\n\nfunction Presence(props: PresenceProps) {\n\tconst { children, forceMount = false, onExitComplete, present, variant } = props;\n\n\tconst {\n\t\tisPresent,\n\t\tisPresentOrIsTransitionComplete,\n\t\tref: presenceRef,\n\t\tshouldStartTransition,\n\t} = usePresence({ onExitComplete, present, variant });\n\n\tconst resolvedChild =\n\t\tisFunction(children) ?\n\t\t\tchildren({ isPresent, isPresentOrIsTransitionComplete, shouldStartTransition })\n\t\t:\tChildren.only(children);\n\n\tconst childRef = (resolvedChild?.props.ref\n\t\t?? (resolvedChild as unknown as UnknownObject).ref) as React.Ref<HTMLElement>;\n\n\tconst combinedRefs = useComposeRefs(presenceRef, childRef);\n\n\tconst shouldRender =\n\t\tforceMount || (variant === \"transition\" ? isPresentOrIsTransitionComplete : isPresent);\n\n\tif (!shouldRender) {\n\t\treturn null;\n\t}\n\n\treturn resolvedChild && cloneElement(resolvedChild, { ref: combinedRefs });\n}\n\nexport { Presence };\n"],"mappings":"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"}

package/dist/esm/ui/carousel/index.d.ts

@@ -1,7 +1,7 @@
 import { PolymorphicPropsStrict } from "@zayne-labs/toolkit-react/utils";
 import { UnionDiscriminator } from "@zayne-labs/toolkit-type-helpers";
 import * as React$1 from "react";
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 import { StoreApi } from "@zayne-labs/toolkit-core";
 
 //#region src/components/ui/carousel/types.d.ts
@@ -79,14 +79,14 @@ type OtherCarouselProps = {
 };
 //#endregion
 //#region src/components/ui/carousel/carousel.d.ts
-declare function CarouselRoot<TImages extends ImagesType, TElement extends React$1.ElementType = "div">(props: PolymorphicPropsStrict<TElement, CarouselRootProps<TImages>>): react_jsx_runtime10.JSX.Element;
-declare function CarouselButton(props: CarouselButtonsProps): react_jsx_runtime10.JSX.Element;
-declare function CarouselControls(props: CarouselControlProps): react_jsx_runtime10.JSX.Element;
-declare function CarouselItemList<TArray extends unknown[]>(props: CarouselWrapperProps<TArray[number]>): react_jsx_runtime10.JSX.Element;
-declare function CarouselItem(props: OtherCarouselProps): react_jsx_runtime10.JSX.Element;
-declare function CarouselCaption<TElement extends React$1.ElementType = "div">(props: PolymorphicPropsStrict<TElement, OtherCarouselProps>): react_jsx_runtime10.JSX.Element;
-declare function CarouselIndicatorList<TArray extends unknown[]>(props: CarouselWrapperProps<TArray[number]>): react_jsx_runtime10.JSX.Element;
-declare function CarouselIndicator(props: CarouselIndicatorProps): react_jsx_runtime10.JSX.Element;
+declare function CarouselRoot<TImages extends ImagesType, TElement extends React$1.ElementType = "div">(props: PolymorphicPropsStrict<TElement, CarouselRootProps<TImages>>): react_jsx_runtime8.JSX.Element;
+declare function CarouselButton(props: CarouselButtonsProps): react_jsx_runtime8.JSX.Element;
+declare function CarouselControls(props: CarouselControlProps): react_jsx_runtime8.JSX.Element;
+declare function CarouselItemList<TArray extends unknown[]>(props: CarouselWrapperProps<TArray[number]>): react_jsx_runtime8.JSX.Element;
+declare function CarouselItem(props: OtherCarouselProps): react_jsx_runtime8.JSX.Element;
+declare function CarouselCaption<TElement extends React$1.ElementType = "div">(props: PolymorphicPropsStrict<TElement, OtherCarouselProps>): react_jsx_runtime8.JSX.Element;
+declare function CarouselIndicatorList<TArray extends unknown[]>(props: CarouselWrapperProps<TArray[number]>): react_jsx_runtime8.JSX.Element;
+declare function CarouselIndicator(props: CarouselIndicatorProps): react_jsx_runtime8.JSX.Element;
 declare namespace carousel_parts_d_exports {
   export { CarouselButton as Button, CarouselCaption as Caption, CarouselControls as Controls, CarouselIndicator as Indicator, CarouselIndicatorList as IndicatorList, CarouselItem as Item, CarouselItemList as ItemList, CarouselRoot as Root };
 }

package/dist/esm/ui/drag-scroll/index.js

@@ -1,8 +1,8 @@
 import { cnMerge } from "../../cn-DdD3uYxA.js";
 import { composeRefs, mergeTwoProps } from "@zayne-labs/toolkit-react/utils";
 import { useCallback, useMemo, useRef } from "react";
-import { useCallbackRef } from "@zayne-labs/toolkit-react";
-import { checkIsDeviceMobile, off, on } from "@zayne-labs/toolkit-core";
+import { useCallbackRef, useLazyRef } from "@zayne-labs/toolkit-react";
+import { checkIsDeviceMobile, on } from "@zayne-labs/toolkit-core";
 
 //#region src/components/ui/drag-scroll/utils.ts
 const updateCursor = (element) => {
@@ -36,6 +36,11 @@ const useDragScroll = (props) => {
 		x: 0,
 		y: 0
 	});
+	const abortControllersRef = useLazyRef(() => ({
+		mouseLeave: new AbortController(),
+		mouseMove: new AbortController(),
+		mouseUp: new AbortController()
+	}));
 	const handleMouseMove = useCallbackRef((event) => {
 		if (!dragContainerRef.current) return;
 		if (orientation === "horizontal" || orientation === "both") {
@@ -49,10 +54,10 @@ const useDragScroll = (props) => {
 	});
 	const handleMouseUpOrLeave = useCallbackRef(() => {
 		if (!dragContainerRef.current) return;
-		off("mousemove", dragContainerRef.current, handleMouseMove);
-		off("mouseup", dragContainerRef.current, handleMouseUpOrLeave);
-		off("mouseleave", dragContainerRef.current, handleMouseUpOrLeave);
 		resetCursor(dragContainerRef.current);
+		abortControllersRef.current.mouseMove.abort();
+		abortControllersRef.current.mouseUp.abort();
+		abortControllersRef.current.mouseLeave.abort();
 	});
 	const handleMouseDown = useCallbackRef((event) => {
 		if (usage === "mobileAndTabletOnly" && window.innerWidth >= 768) return;
@@ -67,9 +72,9 @@ const useDragScroll = (props) => {
 			positionRef.current.top = dragContainerRef.current.scrollTop;
 		}
 		updateCursor(dragContainerRef.current);
-		on("mousemove", dragContainerRef.current, handleMouseMove);
-		on("mouseup", dragContainerRef.current, handleMouseUpOrLeave);
-		on("mouseleave", dragContainerRef.current, handleMouseUpOrLeave);
+		on("mousemove", dragContainerRef.current, handleMouseMove, { signal: abortControllersRef.current.mouseMove.signal });
+		on("mouseup", dragContainerRef.current, handleMouseUpOrLeave, { signal: abortControllersRef.current.mouseUp.signal });
+		on("mouseleave", dragContainerRef.current, handleMouseUpOrLeave, { signal: abortControllersRef.current.mouseLeave.signal });
 	});
 	const refCallBack = useCallbackRef((node) => {
 		dragContainerRef.current = node;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["refCallBack: RefCallback<TElement>","getRootProps: DragScrollResult<TElement, TItemElement>[\"getRootProps\"]","getItemProps: DragScrollResult<TElement, TItemElement>[\"getItemProps\"]"],"sources":["../../../../src/components/ui/drag-scroll/utils.ts","../../../../src/components/ui/drag-scroll/use-drag-scroll.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 { off, on } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef } from \"@zayne-labs/toolkit-react\";\nimport { composeRefs, type InferProps, mergeTwoProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { type RefCallback, useCallback, useMemo, useRef } from \"react\";\nimport { cnMerge } from \"@/lib/utils/cn\";\nimport { handleScrollSnap, resetCursor, updateCursor } from \"./utils\";\n\ntype ItemProps<TItemElement extends HTMLElement> = Omit<InferProps<TItemElement>, \"children\">;\n\ntype RootProps<TElement extends HTMLElement> = Omit<InferProps<TElement>, \"children\">;\n\ntype DragScrollProps<TElement extends HTMLElement, TItemElement extends HTMLElement> = {\n\tclassNames?: { base?: string; item?: string };\n\textraItemProps?: ItemProps<TItemElement>;\n\textraRootProps?: InferProps<TElement>;\n\torientation?: \"both\" | \"horizontal\" | \"vertical\";\n\tusage?: \"allScreens\" | \"desktopOnly\" | \"mobileAndTabletOnly\";\n};\n\ntype DragScrollResult<TElement extends HTMLElement, TItemElement extends HTMLElement> = {\n\tgetItemProps: (itemProps?: ItemProps<TItemElement>) => ItemProps<TItemElement>;\n\tgetRootProps: (rootProps?: RootProps<TElement>) => RootProps<TElement>;\n};\n\nconst useDragScroll = <TElement extends HTMLElement, TItemElement extends HTMLElement = HTMLElement>(\n\tprops?: DragScrollProps<TElement, TItemElement>\n): DragScrollResult<TElement, TItemElement> => {\n\tconst {\n\t\tclassNames,\n\t\textraItemProps,\n\t\textraRootProps,\n\t\torientation = \"horizontal\",\n\t\tusage = \"allScreens\",\n\t} = props ?? {};\n\n\tconst dragContainerRef = useRef<TElement>(null);\n\n\tconst positionRef = useRef({ left: 0, top: 0, x: 0, y: 0 });\n\n\tconst handleMouseMove = useCallbackRef((event: MouseEvent) => {\n\t\tif (!dragContainerRef.current) return;\n\n\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\t// == calculate the current change in the horizontal scroll position based on the difference between the previous mouse position and the new mouse position\n\t\t\tconst dx = event.clientX - positionRef.current.x;\n\n\t\t\t// == Assign the scrollLeft of the container to the difference between its previous horizontal scroll position and the change in the mouse position\n\t\t\tdragContainerRef.current.scrollLeft = positionRef.current.left - dx;\n\t\t}\n\n\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\t// == calculate the current change in the vertical scroll position based on the difference between the previous mouse position and the new mouse position\n\t\t\tconst dy = event.clientY - positionRef.current.y;\n\n\t\t\t// == Assign the scrollTop of the container to the difference between its previous vertical scroll position and the change in the mouse position\n\t\t\tdragContainerRef.current.scrollTop = positionRef.current.top - dy;\n\t\t}\n\t});\n\n\tconst handleMouseUpOrLeave = useCallbackRef(() => {\n\t\tif (!dragContainerRef.current) return;\n\n\t\toff(\"mousemove\", dragContainerRef.current, handleMouseMove);\n\t\toff(\"mouseup\", dragContainerRef.current, handleMouseUpOrLeave);\n\t\toff(\"mouseleave\", dragContainerRef.current, handleMouseUpOrLeave);\n\n\t\tresetCursor(dragContainerRef.current);\n\t});\n\n\tconst handleMouseDown = useCallbackRef((event: MouseEvent) => {\n\t\tif (usage === \"mobileAndTabletOnly\" && window.innerWidth >= 768) return;\n\t\tif (usage === \"desktopOnly\" && window.innerWidth < 768) return;\n\n\t\tif (!dragContainerRef.current) return;\n\n\t\t// == Update all initial position properties stored in the positionRef\n\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\tpositionRef.current.x = event.clientX;\n\t\t\tpositionRef.current.left = dragContainerRef.current.scrollLeft;\n\t\t}\n\n\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\tpositionRef.current.y = event.clientY;\n\t\t\tpositionRef.current.top = dragContainerRef.current.scrollTop;\n\t\t}\n\n\t\tupdateCursor(dragContainerRef.current);\n\n\t\ton(\"mousemove\", dragContainerRef.current, handleMouseMove);\n\t\ton(\"mouseup\", dragContainerRef.current, handleMouseUpOrLeave);\n\t\ton(\"mouseleave\", dragContainerRef.current, handleMouseUpOrLeave);\n\t});\n\n\tconst refCallBack: RefCallback<TElement> = useCallbackRef((node) => {\n\t\tdragContainerRef.current = node;\n\n\t\tnode && handleScrollSnap(node);\n\n\t\tconst cleanup = on(\"mousedown\", dragContainerRef.current, handleMouseDown);\n\n\t\treturn cleanup;\n\t});\n\n\tconst getRootProps: DragScrollResult<TElement, TItemElement>[\"getRootProps\"] = useCallback(\n\t\t(rootProps) => {\n\t\t\tconst mergedRootProps = mergeTwoProps(extraRootProps, rootProps);\n\n\t\t\treturn {\n\t\t\t\t...mergedRootProps,\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\n\t\t\t\t\toverflow-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\tclassNames?.base,\n\t\t\t\t\tmergedRootProps.className\n\t\t\t\t),\n\t\t\t\t\"data-part\": \"root\",\n\t\t\t\t\"data-scope\": \"drag-scroll\",\n\t\t\t\t\"data-slot\": \"drag-scroll-root\",\n\t\t\t\tref: composeRefs(\n\t\t\t\t\trefCallBack,\n\t\t\t\t\t(mergedRootProps as { ref?: React.Ref<TElement> } | undefined)?.ref\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[extraRootProps, classNames?.base, orientation, refCallBack, usage]\n\t);\n\n\tconst getItemProps: DragScrollResult<TElement, TItemElement>[\"getItemProps\"] = useCallback(\n\t\t(itemProps) => {\n\t\t\tconst mergedItemProps = mergeTwoProps(extraItemProps, itemProps);\n\n\t\t\treturn {\n\t\t\t\t...mergedItemProps,\n\t\t\t\tclassName: cnMerge(\"snap-center snap-always\", classNames?.item, mergedItemProps.className),\n\t\t\t\t\"data-part\": \"item\",\n\t\t\t\t\"data-scope\": \"drag-scroll\",\n\t\t\t\t\"data-slot\": \"drag-scroll-item\",\n\t\t\t};\n\t\t},\n\t\t[extraItemProps, classNames?.item]\n\t);\n\n\tconst result = useMemo(() => ({ getItemProps, getRootProps }), [getItemProps, getRootProps]);\n\n\treturn result;\n};\n\nexport { useDragScroll };\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["refCallBack: RefCallback<TElement>","getRootProps: DragScrollResult<TElement, TItemElement>[\"getRootProps\"]","getItemProps: DragScrollResult<TElement, TItemElement>[\"getItemProps\"]"],"sources":["../../../../src/components/ui/drag-scroll/utils.ts","../../../../src/components/ui/drag-scroll/use-drag-scroll.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 { on } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef, useLazyRef } from \"@zayne-labs/toolkit-react\";\nimport { composeRefs, type InferProps, mergeTwoProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { type RefCallback, useCallback, useMemo, useRef } from \"react\";\nimport { cnMerge } from \"@/lib/utils/cn\";\nimport { handleScrollSnap, resetCursor, updateCursor } from \"./utils\";\n\ntype ItemProps<TItemElement extends HTMLElement> = Omit<InferProps<TItemElement>, \"children\">;\n\ntype RootProps<TElement extends HTMLElement> = Omit<InferProps<TElement>, \"children\">;\n\ntype DragScrollProps<TElement extends HTMLElement, TItemElement extends HTMLElement> = {\n\tclassNames?: { base?: string; item?: string };\n\textraItemProps?: ItemProps<TItemElement>;\n\textraRootProps?: InferProps<TElement>;\n\torientation?: \"both\" | \"horizontal\" | \"vertical\";\n\tusage?: \"allScreens\" | \"desktopOnly\" | \"mobileAndTabletOnly\";\n};\n\ntype DragScrollResult<TElement extends HTMLElement, TItemElement extends HTMLElement> = {\n\tgetItemProps: (itemProps?: ItemProps<TItemElement>) => ItemProps<TItemElement>;\n\tgetRootProps: (rootProps?: RootProps<TElement>) => RootProps<TElement>;\n};\n\nconst useDragScroll = <TElement extends HTMLElement, TItemElement extends HTMLElement = HTMLElement>(\n\tprops?: DragScrollProps<TElement, TItemElement>\n): DragScrollResult<TElement, TItemElement> => {\n\tconst {\n\t\tclassNames,\n\t\textraItemProps,\n\t\textraRootProps,\n\t\torientation = \"horizontal\",\n\t\tusage = \"allScreens\",\n\t} = props ?? {};\n\n\tconst dragContainerRef = useRef<TElement>(null);\n\n\tconst positionRef = useRef({ left: 0, top: 0, x: 0, y: 0 });\n\n\tconst abortControllersRef = useLazyRef(() => ({\n\t\tmouseLeave: new AbortController(),\n\t\tmouseMove: new AbortController(),\n\t\tmouseUp: new AbortController(),\n\t}));\n\n\tconst handleMouseMove = useCallbackRef((event: MouseEvent) => {\n\t\tif (!dragContainerRef.current) return;\n\n\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\t// == calculate the current change in the horizontal scroll position based on the difference between the previous mouse position and the new mouse position\n\t\t\tconst dx = event.clientX - positionRef.current.x;\n\n\t\t\t// == Assign the scrollLeft of the container to the difference between its previous horizontal scroll position and the change in the mouse position\n\t\t\tdragContainerRef.current.scrollLeft = positionRef.current.left - dx;\n\t\t}\n\n\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\t// == calculate the current change in the vertical scroll position based on the difference between the previous mouse position and the new mouse position\n\t\t\tconst dy = event.clientY - positionRef.current.y;\n\n\t\t\t// == Assign the scrollTop of the container to the difference between its previous vertical scroll position and the change in the mouse position\n\t\t\tdragContainerRef.current.scrollTop = positionRef.current.top - dy;\n\t\t}\n\t});\n\n\tconst handleMouseUpOrLeave = useCallbackRef(() => {\n\t\tif (!dragContainerRef.current) return;\n\n\t\tresetCursor(dragContainerRef.current);\n\n\t\tabortControllersRef.current.mouseMove.abort();\n\t\tabortControllersRef.current.mouseUp.abort();\n\t\tabortControllersRef.current.mouseLeave.abort();\n\t});\n\n\tconst handleMouseDown = useCallbackRef((event: MouseEvent) => {\n\t\tif (usage === \"mobileAndTabletOnly\" && window.innerWidth >= 768) return;\n\t\tif (usage === \"desktopOnly\" && window.innerWidth < 768) return;\n\n\t\tif (!dragContainerRef.current) return;\n\n\t\t// == Update all initial position properties stored in the positionRef\n\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\tpositionRef.current.x = event.clientX;\n\t\t\tpositionRef.current.left = dragContainerRef.current.scrollLeft;\n\t\t}\n\n\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\tpositionRef.current.y = event.clientY;\n\t\t\tpositionRef.current.top = dragContainerRef.current.scrollTop;\n\t\t}\n\n\t\tupdateCursor(dragContainerRef.current);\n\n\t\ton(\"mousemove\", dragContainerRef.current, handleMouseMove, {\n\t\t\tsignal: abortControllersRef.current.mouseMove.signal,\n\t\t});\n\t\ton(\"mouseup\", dragContainerRef.current, handleMouseUpOrLeave, {\n\t\t\tsignal: abortControllersRef.current.mouseUp.signal,\n\t\t});\n\t\ton(\"mouseleave\", dragContainerRef.current, handleMouseUpOrLeave, {\n\t\t\tsignal: abortControllersRef.current.mouseLeave.signal,\n\t\t});\n\t});\n\n\tconst refCallBack: RefCallback<TElement> = useCallbackRef((node) => {\n\t\tdragContainerRef.current = node;\n\n\t\tnode && handleScrollSnap(node);\n\n\t\tconst cleanup = on(\"mousedown\", dragContainerRef.current, handleMouseDown);\n\n\t\treturn cleanup;\n\t});\n\n\tconst getRootProps: DragScrollResult<TElement, TItemElement>[\"getRootProps\"] = useCallback(\n\t\t(rootProps) => {\n\t\t\tconst mergedRootProps = mergeTwoProps(extraRootProps, rootProps);\n\n\t\t\treturn {\n\t\t\t\t...mergedRootProps,\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\n\t\t\t\t\toverflow-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\tclassNames?.base,\n\t\t\t\t\tmergedRootProps.className\n\t\t\t\t),\n\t\t\t\t\"data-part\": \"root\",\n\t\t\t\t\"data-scope\": \"drag-scroll\",\n\t\t\t\t\"data-slot\": \"drag-scroll-root\",\n\t\t\t\tref: composeRefs(\n\t\t\t\t\trefCallBack,\n\t\t\t\t\t(mergedRootProps as { ref?: React.Ref<TElement> } | undefined)?.ref\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[extraRootProps, classNames?.base, orientation, refCallBack, usage]\n\t);\n\n\tconst getItemProps: DragScrollResult<TElement, TItemElement>[\"getItemProps\"] = useCallback(\n\t\t(itemProps) => {\n\t\t\tconst mergedItemProps = mergeTwoProps(extraItemProps, itemProps);\n\n\t\t\treturn {\n\t\t\t\t...mergedItemProps,\n\t\t\t\tclassName: cnMerge(\"snap-center snap-always\", classNames?.item, mergedItemProps.className),\n\t\t\t\t\"data-part\": \"item\",\n\t\t\t\t\"data-scope\": \"drag-scroll\",\n\t\t\t\t\"data-slot\": \"drag-scroll-item\",\n\t\t\t};\n\t\t},\n\t\t[extraItemProps, classNames?.item]\n\t);\n\n\tconst result = useMemo(() => ({ getItemProps, getRootProps }), [getItemProps, getRootProps]);\n\n\treturn result;\n};\n\nexport { useDragScroll };\n"],"mappings":"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"}

package/dist/esm/ui/drop-zone/index.d.ts

@@ -311,7 +311,9 @@ type RenderPreviewFn = (context: RenderPropContext) => RenderPreviewObject;
 type RenderPreview = RenderPreviewFn | RenderPreviewObject;
 type DropZoneFileItemPreviewProps = Omit<PartInputProps["fileItemPreview"], "children"> & Partial<Pick<FileItemContextType, "fileState">> & {
   asChild?: boolean;
-  children?: react4.ReactNode | ((context: RenderPropContext) => react4.ReactNode);
+  children?: react4.ReactNode | ((context: RenderPropContext & {
+    fallbackPreview: () => react4.ReactNode;
+  }) => react4.ReactNode);
   renderPreview?: boolean | RenderPreview;
 };
 declare function DropZoneFileItemPreview<TElement extends react4.ElementType>(props: PolymorphicPropsStrict<TElement, DropZoneFileItemPreviewProps>): react_jsx_runtime36.JSX.Element | null;