@zayne-labs/ui-react 0.11.0 → 0.11.2

package/css/animation.css

@@ -7,6 +7,8 @@
 
 	--animate-files-in: files-in 0.3s ease-out forwards;
 
+	--animate-progress-out: progress-out 0.3s ease-out forwards;
+
 	@keyframes shake {
 		0%,
 		100% {
@@ -58,4 +60,15 @@
 			transform: translateY(0);
 		}
 	}
+
+	@keyframes progress-out {
+		from {
+			opacity: 1;
+			transform: translateY(0);
+		}
+		to {
+			opacity: 0;
+			transform: translateY(-6px);
+		}
+	}
 }

package/dist/esm/{cn-Bbh2G587.js → cn-jNZfGhrk.js}

@@ -4,4 +4,4 @@ const cnMerge = (...classNames) => twMerge(classNames);
 //#endregion
 export { cnMerge as t };
 
-//# sourceMappingURL=cn-Bbh2G587.js.map
+//# sourceMappingURL=cn-jNZfGhrk.js.map

package/dist/esm/{cn-Bbh2G587.js.map → cn-jNZfGhrk.js.map}

@@ -1 +1 @@
-{"version":3,"file":"cn-Bbh2G587.js","names":[],"sources":["../../src/lib/utils/cn.ts"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\n\nexport const cnMerge: typeof twMerge = (...classNames) => twMerge(classNames);\n"],"mappings":";;AAEA,MAAa,WAA2B,GAAG,eAAe,QAAQ,WAAW"}
+{"version":3,"file":"cn-jNZfGhrk.js","names":[],"sources":["../../src/lib/utils/cn.ts"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\n\nexport const cnMerge: typeof twMerge = (...classNames) => twMerge(classNames);\n"],"mappings":";;AAEA,MAAa,WAA2B,GAAG,eAAe,QAAQ,WAAW"}

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

@@ -1,5 +1,5 @@
-import { o as ErrorBoundaryProps } from "../../index-BUIvQ2wP.js";
-import { n as SuspenseWithBoundaryProps } from "../../index-ClV6w6nv.js";
+import { o as ErrorBoundaryProps } from "../../index-Dbt-nJhQ.js";
+import { n as SuspenseWithBoundaryProps } from "../../index-Ce3J0_vR.js";
 import { GetSlotComponentProps } from "@zayne-labs/toolkit-react/utils";
 import * as react from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";

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

@@ -1,2 +1,2 @@
-import { a as ErrorBoundary, i as useErrorBoundaryContext, n as useErrorBoundary, o as ErrorBoundaryProps, r as ErrorBoundaryContextType, s as ErrorFallbackProps, t as UseErrorBoundaryReturn } from "../../index-BUIvQ2wP.js";
+import { a as ErrorBoundary, i as useErrorBoundaryContext, n as useErrorBoundary, o as ErrorBoundaryProps, r as ErrorBoundaryContextType, s as ErrorFallbackProps, t as UseErrorBoundaryReturn } from "../../index-Dbt-nJhQ.js";
 export { ErrorBoundary, ErrorBoundaryContextType, ErrorBoundaryProps, ErrorFallbackProps, UseErrorBoundaryReturn, useErrorBoundary, useErrorBoundaryContext };

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

@@ -16,7 +16,7 @@ declare function For<const TArray extends ArrayOrNumber>(props: ForProps<TArray>
 type ForWithWrapperProps<TArray extends ArrayOrNumber, TElement extends React.ElementType = "ul"> = PolymorphicPropsStrict<TElement, ForProps<TArray>> & {
   displayFallBackWhenEmpty?: boolean;
 };
-declare function ForWithWrapper<const TArray extends ArrayOrNumber, TElement extends React.ElementType = "ul">(props: ForWithWrapperProps<TArray, TElement>): string | number | bigint | boolean | react_jsx_runtime0.JSX.Element | 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: ForWithWrapperProps<TArray, TElement>): 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;
 //#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

@@ -10,21 +10,21 @@ type UsePresenceOptions = {
    */
   variant?: "animation" | "transition";
 };
+type PresencePropGetters = {
+  getPresenceProps: (innerProps: InferProps<HTMLElement>) => InferProps<HTMLElement>;
+};
 type UsePresenceResult = {
-  isPresent: boolean;
-  isPresentOrIsTransitionComplete: boolean;
-  propGetters: {
-    getPresenceProps: (innerProps: InferProps<HTMLElement>) => InferProps<HTMLElement>;
-  };
+  isMounted: boolean;
+  isTransitionComplete: boolean;
+  propGetters: PresencePropGetters;
   ref: React.Ref<HTMLElement>;
-  shouldStartTransition: boolean;
 };
 //#endregion
 //#region src/components/common/presence/presence.d.ts
 type RefProp = {
   ref?: React.Ref<HTMLElement>;
 };
-type RenderPropContext = Omit<UsePresenceResult, "propGetters" | "ref">;
+type RenderPropContext = Omit<UsePresenceResult, "propGetters" | "ref"> & Pick<UsePresenceOptions, "present">;
 type PresenceProps = UsePresenceOptions & {
   children?: React.ReactElement<RefProp> | ((props: RenderPropContext) => React.ReactElement<RefProp>);
   className?: string;

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

@@ -1,3 +1,3 @@
 "use client";
-import { t as Presence } from "../../presence-CWOGx-be.js";
+import { t as Presence } from "../../presence-CHd9s3IS.js";
 export { Presence };

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

@@ -1,2 +1,2 @@
-import { n as SuspenseWithBoundaryProps, t as SuspenseWithBoundary } from "../../index-ClV6w6nv.js";
+import { n as SuspenseWithBoundaryProps, t as SuspenseWithBoundary } from "../../index-Ce3J0_vR.js";
 export { SuspenseWithBoundary, SuspenseWithBoundaryProps };

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

@@ -1,36 +1,3 @@
 "use client";
-import { t as __exportAll } from "../../chunk-pbuEa-1d.js";
-import { getRegularChildren, getSingleSlot } from "@zayne-labs/toolkit-react/utils";
-import { isFunction } from "@zayne-labs/toolkit-type-helpers";
-//#region src/components/common/switch/switch.tsx
-const defaultValueSymbol = Symbol("default-value");
-function SwitchRoot(props) {
-	const { children, value = defaultValueSymbol } = props;
-	const defaultCase = getSingleSlot(children, SwitchDefault, {
-		errorMessage: "Only one <Switch.Default> component is allowed",
-		throwOnMultipleSlotMatch: true
-	});
-	return getRegularChildren(children, SwitchDefault).find((child) => {
-		if (value === defaultValueSymbol) return Boolean(child.props.when);
-		return child.props.when === value;
-	}) ?? defaultCase;
-}
-function SwitchMatch(props) {
-	const { children, when } = props;
-	return isFunction(children) ? children(when) : children;
-}
-function SwitchDefault({ children }) {
-	return children;
-}
-SwitchDefault.slotSymbol = Symbol("switch-default");
-//#endregion
-//#region src/components/common/switch/switch-parts.ts
-var switch_parts_exports = /* @__PURE__ */ __exportAll({
-	Default: () => SwitchDefault,
-	Match: () => SwitchMatch,
-	Root: () => SwitchRoot
-});
-//#endregion
+import { i as SwitchRoot, n as SwitchDefault, r as SwitchMatch, t as switch_parts_exports } from "../../switch-Dwy5Gzsb.js";
 export { switch_parts_exports as Switch, SwitchDefault, SwitchMatch, SwitchRoot };
-
-//# sourceMappingURL=index.js.map

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

@@ -25,16 +25,12 @@ function Teleport(props) {
 			return;
 		}
 		const tempWrapper = document.createElement("div");
-		tempWrapper.id = TELEPORT_KEY;
+		tempWrapper.dataset.id = TELEPORT_KEY;
 		tempWrapper.style.display = "contents";
 		destination?.insertAdjacentElement(insertPosition, tempWrapper);
-		const timeoutId = setTimeout(() => {
-			tempWrapper.replaceWith(...tempWrapper.children);
-		}, 0);
 		stableUpdatePortalContainer(tempWrapper);
 		return () => {
 			tempWrapper.remove();
-			clearTimeout(timeoutId);
 		};
 	}, [
 		to,

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 { useCallbackRef } from \"@zayne-labs/toolkit-react\";\nimport { isString, type AnyString } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useLayoutEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { ClientGate } from \"../client-gate\";\n\ntype ValidHtmlTags = keyof HTMLElementTagNameMap;\n\nexport type TeleportProps = {\n\tchildren: React.ReactNode;\n\tinsertPosition?: InsertPosition;\n\tto: AnyString | HTMLElement | React.RefObject<HTMLElement> | ValidHtmlTags | null;\n};\n\nconst TELEPORT_KEY = \"teleport-wrapper\";\n\nconst getDestination = (to: NonNullable<TeleportProps[\"to\"]>) => {\n\tif (isString(to)) {\n\t\treturn document.querySelector<HTMLElement>(to);\n\t}\n\n\tif (to instanceof HTMLElement) {\n\t\treturn to;\n\t}\n\n\treturn to.current;\n};\n\nfunction Teleport(props: TeleportProps) {\n\tconst { children, insertPosition, to } = props;\n\n\tconst [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);\n\n\tconst stableUpdatePortalContainer = useCallbackRef((destination: HTMLElement | null) => {\n\t\t// eslint-disable-next-line react-x/set-state-in-effect -- Ignore\n\t\tsetPortalContainer(destination);\n\t});\n\n\tuseLayoutEffect(() => {\n\t\tif (!to) return;\n\n\t\tconst destination = getDestination(to);\n\n\t\tif (!insertPosition) {\n\t\t\tdestination && stableUpdatePortalContainer(destination);\n\t\t\treturn;\n\t\t}\n\n\t\tconst tempWrapper = document.createElement(\"div\");\n\t\ttempWrapper.id = TELEPORT_KEY;\n\t\ttempWrapper.style.display = \"contents\";\n\n\t\tdestination?.insertAdjacentElement(insertPosition, tempWrapper);\n\n\t\tconst timeoutId = setTimeout(() => {\n\t\t\ttempWrapper.replaceWith(...tempWrapper.children);\n\t\t}, 0);\n\n\t\tstableUpdatePortalContainer(tempWrapper);\n\n\t\treturn () => {\n\t\t\ttempWrapper.remove();\n\t\t\tclearTimeout(timeoutId);\n\t\t};\n\t}, [to, insertPosition, stableUpdatePortalContainer]);\n\n\treturn (\n\t\t<ClientGate>\n\t\t\t{() => portalContainer && createPortal(children, portalContainer, TELEPORT_KEY)}\n\t\t</ClientGate>\n\t);\n}\n\nexport { Teleport };\n"],"mappings":";;;;;;;AAgBA,MAAM,eAAe;AAErB,MAAM,kBAAkB,OAAyC;AAChE,KAAI,SAAS,GAAG,CACf,QAAO,SAAS,cAA2B,GAAG;AAG/C,KAAI,cAAc,YACjB,QAAO;AAGR,QAAO,GAAG;;AAGX,SAAS,SAAS,OAAsB;CACvC,MAAM,EAAE,UAAU,gBAAgB,OAAO;CAEzC,MAAM,CAAC,iBAAiB,sBAAsB,SAA6B,KAAK;CAEhF,MAAM,8BAA8B,gBAAgB,gBAAoC;AAEvF,qBAAmB,YAAY;GAC9B;AAEF,uBAAsB;AACrB,MAAI,CAAC,GAAI;EAET,MAAM,cAAc,eAAe,GAAG;AAEtC,MAAI,CAAC,gBAAgB;AACpB,kBAAe,4BAA4B,YAAY;AACvD;;EAGD,MAAM,cAAc,SAAS,cAAc,MAAM;AACjD,cAAY,KAAK;AACjB,cAAY,MAAM,UAAU;AAE5B,eAAa,sBAAsB,gBAAgB,YAAY;EAE/D,MAAM,YAAY,iBAAiB;AAClC,eAAY,YAAY,GAAG,YAAY,SAAS;KAC9C,EAAE;AAEL,8BAA4B,YAAY;AAExC,eAAa;AACZ,eAAY,QAAQ;AACpB,gBAAa,UAAU;;IAEtB;EAAC;EAAI;EAAgB;EAA4B,CAAC;AAErD,QACC,oBAAC,YAAD,EAAA,gBACQ,mBAAmB,aAAa,UAAU,iBAAiB,aAAa,EACnE,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/common/teleport/teleport.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallbackRef } from \"@zayne-labs/toolkit-react\";\nimport { isString, type AnyString } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useLayoutEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { ClientGate } from \"../client-gate\";\n\ntype ValidHtmlTags = keyof HTMLElementTagNameMap;\n\nexport type TeleportProps = {\n\tchildren: React.ReactNode;\n\tinsertPosition?: InsertPosition;\n\tto: AnyString | HTMLElement | React.RefObject<HTMLElement> | ValidHtmlTags | null;\n};\n\nconst TELEPORT_KEY = \"teleport-wrapper\";\n\nconst getDestination = (to: NonNullable<TeleportProps[\"to\"]>) => {\n\tif (isString(to)) {\n\t\treturn document.querySelector<HTMLElement>(to);\n\t}\n\n\tif (to instanceof HTMLElement) {\n\t\treturn to;\n\t}\n\n\treturn to.current;\n};\n\nfunction Teleport(props: TeleportProps) {\n\tconst { children, insertPosition, to } = props;\n\n\tconst [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);\n\n\tconst stableUpdatePortalContainer = useCallbackRef((destination: HTMLElement | null) => {\n\t\t// eslint-disable-next-line react-x/set-state-in-effect -- Ignore\n\t\tsetPortalContainer(destination);\n\t});\n\n\tuseLayoutEffect(() => {\n\t\tif (!to) return;\n\n\t\tconst destination = getDestination(to);\n\n\t\tif (!insertPosition) {\n\t\t\tdestination && stableUpdatePortalContainer(destination);\n\t\t\treturn;\n\t\t}\n\n\t\tconst tempWrapper = document.createElement(\"div\");\n\t\ttempWrapper.dataset.id = TELEPORT_KEY;\n\t\ttempWrapper.style.display = \"contents\";\n\n\t\tdestination?.insertAdjacentElement(insertPosition, tempWrapper);\n\n\t\t// const timeoutId = setTimeout(() => {\n\t\t// \ttempWrapper.replaceWith(...tempWrapper.children);\n\t\t// }, 0);\n\n\t\tstableUpdatePortalContainer(tempWrapper);\n\n\t\treturn () => {\n\t\t\ttempWrapper.remove();\n\t\t};\n\t}, [to, insertPosition, stableUpdatePortalContainer]);\n\n\treturn (\n\t\t<ClientGate>\n\t\t\t{() => portalContainer && createPortal(children, portalContainer, TELEPORT_KEY)}\n\t\t</ClientGate>\n\t);\n}\n\nexport { Teleport };\n"],"mappings":";;;;;;;AAgBA,MAAM,eAAe;AAErB,MAAM,kBAAkB,OAAyC;AAChE,KAAI,SAAS,GAAG,CACf,QAAO,SAAS,cAA2B,GAAG;AAG/C,KAAI,cAAc,YACjB,QAAO;AAGR,QAAO,GAAG;;AAGX,SAAS,SAAS,OAAsB;CACvC,MAAM,EAAE,UAAU,gBAAgB,OAAO;CAEzC,MAAM,CAAC,iBAAiB,sBAAsB,SAA6B,KAAK;CAEhF,MAAM,8BAA8B,gBAAgB,gBAAoC;AAEvF,qBAAmB,YAAY;GAC9B;AAEF,uBAAsB;AACrB,MAAI,CAAC,GAAI;EAET,MAAM,cAAc,eAAe,GAAG;AAEtC,MAAI,CAAC,gBAAgB;AACpB,kBAAe,4BAA4B,YAAY;AACvD;;EAGD,MAAM,cAAc,SAAS,cAAc,MAAM;AACjD,cAAY,QAAQ,KAAK;AACzB,cAAY,MAAM,UAAU;AAE5B,eAAa,sBAAsB,gBAAgB,YAAY;AAM/D,8BAA4B,YAAY;AAExC,eAAa;AACZ,eAAY,QAAQ;;IAEnB;EAAC;EAAI;EAAgB;EAA4B,CAAC;AAErD,QACC,oBAAC,YAAD,EAAA,gBACQ,mBAAmB,aAAa,UAAU,iBAAiB,aAAa,EACnE,CAAA"}

package/dist/esm/{index-ClV6w6nv.d.ts → index-Ce3J0_vR.d.ts}

@@ -1,4 +1,4 @@
-import { o as ErrorBoundaryProps } from "./index-BUIvQ2wP.js";
+import { o as ErrorBoundaryProps } from "./index-Dbt-nJhQ.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/common/suspense-with-boundary/suspense-with-boundary.d.ts
@@ -10,4 +10,4 @@ type SuspenseWithBoundaryProps = {
 declare function SuspenseWithBoundary(props: SuspenseWithBoundaryProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { SuspenseWithBoundaryProps as n, SuspenseWithBoundary as t };
-//# sourceMappingURL=index-ClV6w6nv.d.ts.map
+//# sourceMappingURL=index-Ce3J0_vR.d.ts.map

package/dist/esm/{index-BUIvQ2wP.d.ts → index-Dbt-nJhQ.d.ts}

@@ -71,4 +71,4 @@ type UseErrorBoundaryReturn = {
 };
 //#endregion
 export { ErrorBoundary as a, useErrorBoundaryContext as i, useErrorBoundary as n, ErrorBoundaryProps as o, ErrorBoundaryContextType as r, ErrorFallbackProps as s, UseErrorBoundaryReturn as t };
-//# sourceMappingURL=index-BUIvQ2wP.d.ts.map
+//# sourceMappingURL=index-Dbt-nJhQ.d.ts.map

package/dist/esm/presence-CHd9s3IS.js

@@ -0,0 +1,225 @@
+import { n as SlotRoot } from "./slot-DuwoiC2C.js";
+import { isFunction } from "@zayne-labs/toolkit-type-helpers";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
+import { useCallbackRef, useComposeRefs, useToggle } from "@zayne-labs/toolkit-react";
+import { jsx } from "react/jsx-runtime";
+import { on } from "@zayne-labs/toolkit-core";
+//#region src/components/common/presence/use-presence.ts
+const useStateMachine = (config) => {
+	const reducer = (prevState, event) => {
+		return config.states[prevState][event] ?? prevState;
+	};
+	return useReducer(reducer, config.initial);
+};
+const getAnimationName = (styles) => styles?.animationName ?? "none";
+/**
+* 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
+*/
+const usePresence = (options) => {
+	const { onExitComplete, present: presentProp, variant = "animation" } = options;
+	const stableOnExitComplete = useCallbackRef(onExitComplete);
+	const [node, setNode] = useState(null);
+	const [isTransitionComplete, toggleIsTransitionComplete] = useToggle(false);
+	const stylesRef = useRef(null);
+	const prevNodeStateRef = useRef({
+		prevAnimationName: "none",
+		prevPresent: presentProp
+	});
+	const [mountState, send] = useStateMachine({
+		initial: presentProp ? "mounted" : "unmounted",
+		states: {
+			mounted: {
+				ANIMATION_OUT: "unmountSuspended",
+				UNMOUNT: "unmounted"
+			},
+			unmounted: { MOUNT: "mounted" },
+			unmountSuspended: {
+				ANIMATION_END: "unmounted",
+				MOUNT: "mounted"
+			}
+		}
+	});
+	useEffect(() => {
+		const currentAnimationName = getAnimationName(stylesRef.current);
+		prevNodeStateRef.current.prevAnimationName = mountState === "mounted" ? currentAnimationName : "none";
+	}, [mountState]);
+	useLayoutEffect(() => {
+		const styles = stylesRef.current;
+		const wasPresent = prevNodeStateRef.current.prevPresent;
+		if (!(wasPresent !== presentProp)) return;
+		const prevAnimationName = prevNodeStateRef.current.prevAnimationName;
+		const currentAnimationName = getAnimationName(styles);
+		switch (true) {
+			case presentProp:
+				send("MOUNT");
+				if (variant === "transition") requestAnimationFrame(() => toggleIsTransitionComplete(true));
+				break;
+			case Boolean(node):
+				if (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;
+		}
+		prevNodeStateRef.current.prevPresent = presentProp;
+	}, [
+		presentProp,
+		node,
+		send,
+		variant,
+		toggleIsTransitionComplete
+	]);
+	useLayoutEffect(() => {
+		if (!node) {
+			send("ANIMATION_END");
+			return;
+		}
+		const setupAnimationListeners = () => {
+			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
+			* make sure we only trigger ANIMATION_END for the currently active animation.
+			*/
+			const handleAnimationEnd = (event) => {
+				const isCurrentAnimation = getAnimationName(stylesRef.current).includes(CSS.escape(event.animationName));
+				if (!(event.target === node && isCurrentAnimation)) return;
+				send("ANIMATION_END");
+				if (!prevNodeStateRef.current.prevPresent) {
+					const currentFillMode = node.style.animationFillMode;
+					node.style.animationFillMode = "forwards";
+					timeoutId = ownerWindow.setTimeout(() => {
+						if (node.style.animationFillMode === "forwards") node.style.animationFillMode = currentFillMode;
+					});
+				}
+			};
+			const onAnimationStartCleanup = on(node, "animationstart", handleAnimationStart);
+			const onAnimationEndCleanup = on(node, "animationend", handleAnimationEnd);
+			const onAnimationCancelCleanup = on(node, "animationcancel", handleAnimationEnd);
+			const cleanup = () => {
+				ownerWindow.clearTimeout(timeoutId);
+				onAnimationStartCleanup();
+				onAnimationEndCleanup();
+				onAnimationCancelCleanup();
+			};
+			return cleanup;
+		};
+		const setupTransitionListeners = () => {
+			const handleTransitionRun = (event) => {
+				if (!(event.target === node)) return;
+				send("ANIMATION_OUT");
+			};
+			const handleTransitionEnd = (event) => {
+				if (!(event.target === node && !prevNodeStateRef.current.prevPresent)) return;
+				send("ANIMATION_END");
+			};
+			const onTransitionRunCleanup = on(node, "transitionrun", handleTransitionRun);
+			const onTransitionEndCleanup = on(node, "transitionend", handleTransitionEnd);
+			const onTransitionCancelCleanup = on(node, "transitioncancel", handleTransitionEnd);
+			const cleanup = () => {
+				onTransitionRunCleanup();
+				onTransitionEndCleanup();
+				onTransitionCancelCleanup();
+			};
+			return cleanup;
+		};
+		switch (variant) {
+			case "animation": return setupAnimationListeners();
+			case "transition": return setupTransitionListeners();
+			default: throw new Error(`Invalid variant: ${variant}`);
+		}
+	}, [
+		node,
+		send,
+		variant
+	]);
+	useEffect(() => {
+		if (!presentProp && mountState === "unmounted") {
+			toggleIsTransitionComplete(false);
+			stableOnExitComplete?.();
+		}
+	}, [
+		mountState,
+		presentProp,
+		stableOnExitComplete,
+		toggleIsTransitionComplete
+	]);
+	const ref = useCallbackRef((refNode) => {
+		setNode(refNode);
+		if (refNode) stylesRef.current = getComputedStyle(refNode);
+	});
+	const isMounted = ["mounted", "unmountSuspended"].includes(mountState);
+	const transitionPhase = presentProp && isTransitionComplete ? "enter" : "exit";
+	const animationPhase = presentProp ? "enter" : "exit";
+	const getPresenceProps = useCallback((innerProps) => {
+		return {
+			"data-animation-phase": animationPhase,
+			"data-mounted": isMounted,
+			"data-present": presentProp,
+			"data-transition-phase": transitionPhase,
+			"data-variant": variant,
+			...innerProps,
+			className: innerProps.className
+		};
+	}, [
+		animationPhase,
+		isMounted,
+		presentProp,
+		transitionPhase,
+		variant
+	]);
+	const propGetters = useMemo(() => ({ getPresenceProps }), [getPresenceProps]);
+	return useMemo(() => ({
+		isMounted,
+		isTransitionComplete,
+		propGetters,
+		ref
+	}), [
+		isMounted,
+		isTransitionComplete,
+		propGetters,
+		ref
+	]);
+};
+//#endregion
+//#region src/components/common/presence/presence.tsx
+function Presence(props) {
+	const { children, className, forceMount = false, onExitComplete, present, variant } = props;
+	const { isMounted, isTransitionComplete, propGetters, ref: presenceRef } = usePresence({
+		onExitComplete,
+		present,
+		variant
+	});
+	const context = {
+		isMounted,
+		isTransitionComplete,
+		present
+	};
+	const resolvedChild = isFunction(children) ? children(context) : children;
+	const ref = useComposeRefs(presenceRef, resolvedChild?.props.ref ?? resolvedChild.ref);
+	if (!(forceMount || (variant === "transition" ? isMounted || isTransitionComplete : isMounted))) return null;
+	return /* @__PURE__ */ jsx(SlotRoot, {
+		ref,
+		...propGetters.getPresenceProps({ className }),
+		children: resolvedChild
+	});
+}
+//#endregion
+export { Presence as t };
+
+//# sourceMappingURL=presence-CHd9s3IS.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"presence-CHd9s3IS.js","names":["Slot.Root"],"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 type { InferProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { useCallback, useEffect, useLayoutEffect, useMemo, 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\nexport type PresencePropGetters = {\n\tgetPresenceProps: (innerProps: InferProps<HTMLElement>) => InferProps<HTMLElement>;\n};\n\nexport type UsePresenceResult = {\n\tisMounted: boolean;\n\tisTransitionComplete: boolean;\n\tpropGetters: PresencePropGetters;\n\tref: React.Ref<HTMLElement>;\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): UsePresenceResult => {\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 [isTransitionComplete, toggleIsTransitionComplete] = 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 [mountState, 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 =\n\t\t\tmountState === \"mounted\" ? currentAnimationName : \"none\";\n\t}, [mountState]);\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(() => toggleIsTransitionComplete(true));\n\t\t\t\t}\n\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tcase Boolean(node): {\n\t\t\t\tif (variant === \"animation\") {\n\t\t\t\t\tconst hasAnimation = currentAnimationName !== \"none\" && styles?.display !== \"none\";\n\n\t\t\t\t\t/**\n\t\t\t\t\t * When `present` changes to `false`, we check changes to animation-name to\n\t\t\t\t\t * determine whether an animation has started. We chose this approach (reading\n\t\t\t\t\t * computed styles) because there is no `animationrun` event (like the `transitionrun` event) and `animationstart`\n\t\t\t\t\t * fires after `animation-delay` has expired which would be too late.\n\t\t\t\t\t */\n\n\t\t\t\t\tconst isAnimationStarted = hasAnimation && prevAnimationName !== currentAnimationName;\n\n\t\t\t\t\tconst isAnimatingOut = wasPresent && isAnimationStarted;\n\n\t\t\t\t\tsend(isAnimatingOut ? \"ANIMATION_OUT\" : \"UNMOUNT\");\n\t\t\t\t}\n\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, toggleIsTransitionComplete]);\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\tconst setupAnimationListeners = () => {\n\t\t\tlet timeoutId: number;\n\n\t\t\tconst ownerWindow = node.ownerDocument.defaultView ?? globalThis;\n\n\t\t\tconst handleAnimationStart = (event: AnimationEvent) => {\n\t\t\t\tconst isTargetAnimatingNode = event.target === node;\n\n\t\t\t\tif (!isTargetAnimatingNode) return;\n\n\t\t\t\tprevNodeStateRef.current.prevAnimationName = getAnimationName(stylesRef.current);\n\t\t\t};\n\n\t\t\t/**\n\t\t\t * @description Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`\n\t\t\t * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we\n\t\t\t * make sure we only trigger ANIMATION_END for the currently active animation.\n\t\t\t */\n\t\t\tconst handleAnimationEnd = (event: AnimationEvent) => {\n\t\t\t\tconst currentAnimationName = getAnimationName(stylesRef.current);\n\n\t\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\t\tconst isCurrentAnimation = currentAnimationName.includes(CSS.escape(event.animationName));\n\n\t\t\t\tconst isTargetAnimatingNode = event.target === node && isCurrentAnimation;\n\n\t\t\t\tif (!isTargetAnimatingNode) return;\n\n\t\t\t\t// With React 18 concurrency this update is applied a frame after the\n\t\t\t\t// animation ends, creating a flash of visible content. By setting the\n\t\t\t\t// animation fill mode to \"forwards\", we force the node to keep the\n\t\t\t\t// styles of the last keyframe, removing the flash.\n\n\t\t\t\t// Previously we flushed the update via ReactDom.flushSync, but with\n\t\t\t\t// exit animations this resulted in the node being removed from the\n\t\t\t\t// DOM before the synthetic animationEnd event was dispatched, meaning\n\t\t\t\t// user-provided event handlers would not be called.\n\t\t\t\t// https://github.com/radix-ui/primitives/pull/1849\n\t\t\t\tsend(\"ANIMATION_END\");\n\n\t\t\t\tif (!prevNodeStateRef.current.prevPresent) {\n\t\t\t\t\tconst currentFillMode = node.style.animationFillMode;\n\t\t\t\t\tnode.style.animationFillMode = \"forwards\";\n\n\t\t\t\t\t// Reset the style after the node had time to unmount (for cases\n\t\t\t\t\t// where the component chooses not to unmount). Doing this any\n\t\t\t\t\t// sooner than `setTimeout` (e.g. with `requestAnimationFrame`)\n\t\t\t\t\t// still causes a flash.\n\t\t\t\t\ttimeoutId = ownerWindow.setTimeout(() => {\n\t\t\t\t\t\tif (node.style.animationFillMode === \"forwards\") {\n\t\t\t\t\t\t\tnode.style.animationFillMode = currentFillMode;\n\t\t\t\t\t\t}\n\t\t\t\t\t}) as never;\n\t\t\t\t}\n\t\t\t};\n\n\t\t\tconst onAnimationStartCleanup = on(node, \"animationstart\", handleAnimationStart);\n\t\t\tconst onAnimationEndCleanup = on(node, \"animationend\", handleAnimationEnd);\n\t\t\tconst onAnimationCancelCleanup = on(node, \"animationcancel\", handleAnimationEnd);\n\n\t\t\tconst cleanup = () => {\n\t\t\t\townerWindow.clearTimeout(timeoutId);\n\t\t\t\tonAnimationStartCleanup();\n\t\t\t\tonAnimationEndCleanup();\n\t\t\t\tonAnimationCancelCleanup();\n\t\t\t};\n\n\t\t\treturn cleanup;\n\t\t};\n\n\t\tconst setupTransitionListeners = () => {\n\t\t\tconst handleTransitionRun = (event: TransitionEvent) => {\n\t\t\t\tconst isTargetTransitioningNode = event.target === node;\n\n\t\t\t\tif (!isTargetTransitioningNode) return;\n\n\t\t\t\tsend(\"ANIMATION_OUT\");\n\t\t\t};\n\n\t\t\tconst handleTransitionEnd = (event: TransitionEvent) => {\n\t\t\t\tconst isTargetTransitioningNode =\n\t\t\t\t\tevent.target === node && !prevNodeStateRef.current.prevPresent;\n\n\t\t\t\tif (!isTargetTransitioningNode) return;\n\n\t\t\t\tsend(\"ANIMATION_END\");\n\t\t\t};\n\n\t\t\tconst onTransitionRunCleanup = on(node, \"transitionrun\", handleTransitionRun);\n\t\t\tconst onTransitionEndCleanup = on(node, \"transitionend\", handleTransitionEnd);\n\t\t\tconst onTransitionCancelCleanup = on(node, \"transitioncancel\", handleTransitionEnd);\n\n\t\t\tconst cleanup = () => {\n\t\t\t\tonTransitionRunCleanup();\n\t\t\t\tonTransitionEndCleanup();\n\t\t\t\tonTransitionCancelCleanup();\n\t\t\t};\n\n\t\t\treturn cleanup;\n\t\t};\n\n\t\tswitch (variant) {\n\t\t\tcase \"animation\": {\n\t\t\t\tconst cleanup = setupAnimationListeners();\n\n\t\t\t\treturn cleanup;\n\t\t\t}\n\n\t\t\tcase \"transition\": {\n\t\t\t\tconst cleanup = setupTransitionListeners();\n\n\t\t\t\treturn cleanup;\n\t\t\t}\n\n\t\t\tdefault: {\n\t\t\t\tvariant satisfies never;\n\t\t\t\tthrow new Error(`Invalid variant: ${variant}`);\n\t\t\t}\n\t\t}\n\t}, [node, send, variant]);\n\n\tuseEffect(() => {\n\t\tconst isExitCompleted = !presentProp && mountState === \"unmounted\";\n\n\t\tif (isExitCompleted) {\n\t\t\ttoggleIsTransitionComplete(false);\n\t\t\tstableOnExitComplete?.();\n\t\t}\n\t}, [mountState, presentProp, stableOnExitComplete, toggleIsTransitionComplete]);\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 mountState>;\n\tconst isMounted = MOUNTED_STATES.includes(mountState);\n\tconst transitionPhase = presentProp && isTransitionComplete ? \"enter\" : \"exit\";\n\tconst animationPhase = presentProp ? \"enter\" : \"exit\";\n\n\tconst getPresenceProps: PresencePropGetters[\"getPresenceProps\"] = useCallback(\n\t\t(innerProps) => {\n\t\t\treturn {\n\t\t\t\t\"data-animation-phase\": animationPhase,\n\t\t\t\t\"data-mounted\": isMounted,\n\t\t\t\t\"data-present\": presentProp,\n\t\t\t\t\"data-transition-phase\": transitionPhase,\n\t\t\t\t\"data-variant\": variant,\n\t\t\t\t...innerProps,\n\t\t\t\tclassName: innerProps.className,\n\t\t\t};\n\t\t},\n\t\t[animationPhase, isMounted, presentProp, transitionPhase, variant]\n\t);\n\n\tconst propGetters = useMemo(\n\t\t() => ({\n\t\t\tgetPresenceProps,\n\t\t}),\n\t\t[getPresenceProps]\n\t);\n\n\tconst result = useMemo<UsePresenceResult>(\n\t\t() =>\n\t\t\t({\n\t\t\t\tisMounted,\n\t\t\t\tisTransitionComplete,\n\t\t\t\tpropGetters,\n\t\t\t\tref,\n\t\t\t}) satisfies UsePresenceResult,\n\t\t[isMounted, isTransitionComplete, propGetters, ref]\n\t);\n\n\treturn result;\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 { Slot } from \"../slot\";\nimport { usePresence, type UsePresenceOptions, type UsePresenceResult } from \"./use-presence\";\n\ntype RefProp = { ref?: React.Ref<HTMLElement> };\n\ntype RenderPropContext = Omit<UsePresenceResult, \"propGetters\" | \"ref\">\n\t& Pick<UsePresenceOptions, \"present\">;\n\nexport type PresenceProps = UsePresenceOptions & {\n\tchildren?: React.ReactElement<RefProp> | ((props: RenderPropContext) => React.ReactElement<RefProp>);\n\tclassName?: string;\n\tforceMount?: boolean;\n};\n\nfunction Presence(props: PresenceProps) {\n\tconst { children, className, forceMount = false, onExitComplete, present, variant } = props;\n\n\tconst {\n\t\tisMounted,\n\t\tisTransitionComplete,\n\t\tpropGetters,\n\t\tref: presenceRef,\n\t} = usePresence({ onExitComplete, present, variant });\n\n\tconst context = {\n\t\tisMounted,\n\t\tisTransitionComplete,\n\t\tpresent,\n\t} satisfies RenderPropContext;\n\n\tconst resolvedChild = isFunction(children) ? children(context) : children;\n\n\tconst childRef = (resolvedChild?.props.ref\n\t\t?? (resolvedChild as unknown as UnknownObject).ref) as React.Ref<HTMLElement>;\n\n\tconst ref = useComposeRefs(presenceRef, childRef);\n\n\tconst shouldRender =\n\t\tforceMount || (variant === \"transition\" ? isMounted || isTransitionComplete : isMounted);\n\n\tif (!shouldRender) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Slot.Root ref={ref} {...propGetters.getPresenceProps({ className })}>\n\t\t\t{resolvedChild}\n\t\t</Slot.Root>\n\t);\n}\n\nexport { Presence };\n"],"mappings":"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"}

package/dist/esm/switch-Dwy5Gzsb.js

@@ -0,0 +1,35 @@
+import { t as __exportAll } from "./chunk-pbuEa-1d.js";
+import { getRegularChildren, getSingleSlot } from "@zayne-labs/toolkit-react/utils";
+import { isFunction } from "@zayne-labs/toolkit-type-helpers";
+//#region src/components/common/switch/switch.tsx
+const defaultValueSymbol = Symbol("default-value");
+function SwitchRoot(props) {
+	const { children, value = defaultValueSymbol } = props;
+	const defaultCase = getSingleSlot(children, SwitchDefault, {
+		errorMessage: "Only one <Switch.Default> component is allowed",
+		throwOnMultipleSlotMatch: true
+	});
+	return getRegularChildren(children, SwitchDefault).find((child) => {
+		if (value === defaultValueSymbol) return Boolean(child.props.when);
+		return child.props.when === value;
+	}) ?? defaultCase;
+}
+function SwitchMatch(props) {
+	const { children, when } = props;
+	return isFunction(children) ? children(when) : children;
+}
+function SwitchDefault({ children }) {
+	return children;
+}
+SwitchDefault.slotSymbol = Symbol("switch-default");
+//#endregion
+//#region src/components/common/switch/switch-parts.ts
+var switch_parts_exports = /* @__PURE__ */ __exportAll({
+	Default: () => SwitchDefault,
+	Match: () => SwitchMatch,
+	Root: () => SwitchRoot
+});
+//#endregion
+export { SwitchRoot as i, SwitchDefault as n, SwitchMatch as r, switch_parts_exports as t };
+
+//# sourceMappingURL=switch-Dwy5Gzsb.js.map

package/dist/esm/switch-Dwy5Gzsb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-Dwy5Gzsb.js","names":[],"sources":["../../src/components/common/switch/switch.tsx","../../src/components/common/switch/switch-parts.ts"],"sourcesContent":["\"use client\";\n\nimport { getRegularChildren, getSingleSlot } from \"@zayne-labs/toolkit-react/utils\";\nimport { isFunction } from \"@zayne-labs/toolkit-type-helpers\";\n\ntype ValidSwitchComponentType = React.ReactElement<SwitchMatchProps<unknown>>;\n\nexport type SwitchRootProps<TValue> = {\n\tchildren: ValidSwitchComponentType | ValidSwitchComponentType[];\n\tvalue?: TValue;\n};\n\nconst defaultValueSymbol = Symbol(\"default-value\");\n\n// TODO - Add a factory to make this 'when' and 'value' type-safe later following the link below\n// LINK - https://tkdodo.eu/blog/building-type-safe-compound-components#component-factory-pattern\nexport function SwitchRoot<TValue>(props: SwitchRootProps<TValue>) {\n\tconst { children, value = defaultValueSymbol } = props;\n\n\tconst defaultCase = getSingleSlot(children, SwitchDefault, {\n\t\terrorMessage: \"Only one <Switch.Default> component is allowed\",\n\t\tthrowOnMultipleSlotMatch: true,\n\t});\n\n\tconst childrenCasesArray = getRegularChildren(children, SwitchDefault) as ValidSwitchComponentType[];\n\n\tconst matchedCase = childrenCasesArray.find((child) => {\n\t\t// == If value is defaultValueSymbol, match the cases in order like switch(true)\n\t\tif (value === defaultValueSymbol) {\n\t\t\treturn Boolean(child.props.when);\n\t\t}\n\n\t\t// == Otherwise, match the cases like switch(value)\n\t\treturn child.props.when === value;\n\t});\n\n\treturn matchedCase ?? defaultCase;\n}\n\nexport type SwitchMatchProps<TWhen> = {\n\tchildren: React.ReactNode | ((value: TWhen) => React.ReactNode);\n\twhen: false | TWhen | null | undefined;\n};\n\nexport function SwitchMatch<TWhen>(props: SwitchMatchProps<TWhen>) {\n\tconst { children, when } = props;\n\n\tconst resolvedChildren = isFunction(children) ? children(when as TWhen) : children;\n\n\treturn resolvedChildren;\n}\n\nexport function SwitchDefault({ children }: { children: React.ReactNode }) {\n\treturn children;\n}\nSwitchDefault.slotSymbol = Symbol(\"switch-default\");\n","export { SwitchDefault as Default, SwitchMatch as Match, SwitchRoot as Root } from \"./switch\";\n"],"mappings":";;;;AAYA,MAAM,qBAAqB,OAAO,gBAAgB;AAIlD,SAAgB,WAAmB,OAAgC;CAClE,MAAM,EAAE,UAAU,QAAQ,uBAAuB;CAEjD,MAAM,cAAc,cAAc,UAAU,eAAe;EAC1D,cAAc;EACd,0BAA0B;EAC1B,CAAC;AAcF,QAZ2B,mBAAmB,UAAU,cAAc,CAE/B,MAAM,UAAU;AAEtD,MAAI,UAAU,mBACb,QAAO,QAAQ,MAAM,MAAM,KAAK;AAIjC,SAAO,MAAM,MAAM,SAAS;GAC3B,IAEoB;;AAQvB,SAAgB,YAAmB,OAAgC;CAClE,MAAM,EAAE,UAAU,SAAS;AAI3B,QAFyB,WAAW,SAAS,GAAG,SAAS,KAAc,GAAG;;AAK3E,SAAgB,cAAc,EAAE,YAA2C;AAC1E,QAAO;;AAER,cAAc,aAAa,OAAO,iBAAiB"}

package/dist/esm/ui/card/index.js

@@ -1,6 +1,6 @@
 import { t as __exportAll } from "../../chunk-pbuEa-1d.js";
 import { n as SlotRoot } from "../../slot-DuwoiC2C.js";
-import { t as cnMerge } from "../../cn-Bbh2G587.js";
+import { t as cnMerge } from "../../cn-jNZfGhrk.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ui/card/card.tsx
 function CardRoot(props) {

package/dist/esm/ui/carousel/index.js

@@ -2,7 +2,7 @@
 import { t as __exportAll } from "../../chunk-pbuEa-1d.js";
 import { n as For } from "../../for-DGTMIS0w.js";
 import { i as ShowRoot, n as ShowContent, r as ShowFallback } from "../../show-BzfAw7y3.js";
-import { t as cnMerge } from "../../cn-Bbh2G587.js";
+import { t as cnMerge } from "../../cn-jNZfGhrk.js";
 import { isFunction } from "@zayne-labs/toolkit-type-helpers";
 import { useMemo, useState } from "react";
 import { useAnimationInterval, useCallbackRef, useStore } from "@zayne-labs/toolkit-react";

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

@@ -1,7 +1,7 @@
 "use client";
 import { t as __exportAll } from "../../chunk-pbuEa-1d.js";
 import { n as SlotRoot } from "../../slot-DuwoiC2C.js";
-import { t as cnMerge } from "../../cn-Bbh2G587.js";
+import { t as cnMerge } from "../../cn-jNZfGhrk.js";
 import { composeRefs, composeTwoEventHandlers } from "@zayne-labs/toolkit-react/utils";
 import { isFunction, isNumber } from "@zayne-labs/toolkit-type-helpers";
 import { useCallback, useEffect, useMemo, useRef } from "react";

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

@@ -352,19 +352,29 @@ type DropZoneFileItemDeleteProps = {
   asChild?: boolean;
 } & PartInputProps["fileItemDelete"];
 declare function DropZoneFileItemDelete(props: DropZoneFileItemDeleteProps): react_jsx_runtime0.JSX.Element;
+type StrictExtract<TUnion, TPick extends TUnion> = Extract<TUnion, TPick>;
 type DropZoneFileItemProgressProps = {
   asChild?: boolean;
-  classNames?: {
-    circular?: {
-      root?: string;
-      svgCircleOne?: string;
-      svgCircleTwo?: string;
-      svgRoot?: string;
-    };
-  };
   forceMount?: boolean;
   size?: number;
-} & PartInputProps["fileItemProgress"];
+} & PartInputProps["fileItemProgress"] & ({
+  classNames?: {
+    svgCircleOne?: string;
+    svgCircleTwo?: string;
+    svgRoot?: string;
+  };
+  variant: StrictExtract<PartInputProps["fileItemProgress"]["variant"], "circular">;
+} | {
+  classNames?: {
+    track?: string;
+  };
+  variant: StrictExtract<PartInputProps["fileItemProgress"]["variant"], "fill">;
+} | {
+  classNames?: {
+    track?: string;
+  };
+  variant?: StrictExtract<PartInputProps["fileItemProgress"]["variant"], "linear">;
+});
 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>;