@puzzle-ui/ui 0.0.0-stage → 0.2.0

package/dist/components/utilities/transition/index.cjs

@@ -0,0 +1,171 @@
+"use client";
+;/* empty css                 */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+// src/components/utilities/transition/index.tsx
+const resolveTemplate = (template, enterFromProp, enterToProp, exitToProp) => {
+	switch (template) {
+		case "slide-in-up": return {
+			enterFrom: enterFromProp ?? "puzzle-transition-slide-in-up-from",
+			enterTo: enterToProp ?? "puzzle-transition-slide-in-up-active",
+			exitTo: exitToProp ?? "puzzle-transition-slide-in-up-exit"
+		};
+		case "slide-in-down": return {
+			enterFrom: enterFromProp ?? "puzzle-transition-slide-in-down-from",
+			enterTo: enterToProp ?? "puzzle-transition-slide-in-down-active",
+			exitTo: exitToProp ?? "puzzle-transition-slide-in-down-exit"
+		};
+		case "slide-in-left": return {
+			enterFrom: enterFromProp ?? "puzzle-transition-slide-in-left-from",
+			enterTo: enterToProp ?? "puzzle-transition-slide-in-left-active",
+			exitTo: exitToProp ?? "puzzle-transition-slide-in-left-exit"
+		};
+		case "slide-in-right": return {
+			enterFrom: enterFromProp ?? "puzzle-transition-slide-in-right-from",
+			enterTo: enterToProp ?? "puzzle-transition-slide-in-right-active",
+			exitTo: exitToProp ?? "puzzle-transition-slide-in-right-exit"
+		};
+		case "accordion": return {
+			enterFrom: enterFromProp ?? "puzzle-transition-accordion-from",
+			enterTo: enterToProp ?? "puzzle-transition-accordion-active",
+			exitTo: exitToProp ?? "puzzle-transition-accordion-exit"
+		};
+		default: return {
+			enterFrom: enterFromProp ?? "puzzle-transition-fade-from",
+			enterTo: enterToProp ?? "puzzle-transition-fade-active",
+			exitTo: exitToProp ?? "puzzle-transition-fade-exit"
+		};
+	}
+};
+const Transition = ({ visible, children, as, template, enterFrom: enterFromProp, enterTo: enterToProp, exitTo: exitToProp, className = "", duration = 300, unmountOnExit = true, forceMount = false, onEnter, onEntered, onExit, onExited, ...restProps }) => {
+	const { onAnimationEnd: propsOnAnimationEnd, onTransitionEnd: propsOnTransitionEnd, ...props } = restProps;
+	const [mounted, setMounted] = (0, react.useState)(() => visible || forceMount || !unmountOnExit);
+	const { enterFrom, enterTo, exitTo } = resolveTemplate(template, enterFromProp, enterToProp, exitToProp);
+	const [phase, setPhase] = (0, react.useState)(() => visible || forceMount || !unmountOnExit ? "enterFrom" : "exitTo");
+	const frameRef = (0, react.useRef)(null);
+	const timeoutRef = (0, react.useRef)(null);
+	const isInitialRenderRef = (0, react.useRef)(true);
+	const callbacksRef = (0, react.useRef)({
+		onEnter,
+		onEntered,
+		onExit,
+		onExited
+	});
+	(0, react.useLayoutEffect)(() => {
+		callbacksRef.current = {
+			onEnter,
+			onEntered,
+			onExit,
+			onExited
+		};
+	});
+	const clearTimers = () => {
+		if (frameRef.current !== null) {
+			cancelAnimationFrame(frameRef.current);
+			frameRef.current = null;
+		}
+		if (timeoutRef.current !== null) {
+			clearTimeout(timeoutRef.current);
+			timeoutRef.current = null;
+		}
+	};
+	(0, react.useEffect)(() => {
+		clearTimers();
+		if (isInitialRenderRef.current) {
+			isInitialRenderRef.current = false;
+			if (!visible) {
+				if (forceMount || !unmountOnExit) {
+					setMounted(true);
+					setPhase("enterFrom");
+				}
+				return clearTimers;
+			}
+		}
+		if (!unmountOnExit || forceMount) setMounted(true);
+		if (visible) {
+			setMounted(true);
+			setPhase("enterFrom");
+			callbacksRef.current.onEnter?.();
+			frameRef.current = requestAnimationFrame(() => {
+				frameRef.current = requestAnimationFrame(() => {
+					setPhase("enterTo");
+				});
+			});
+		} else {
+			if (!mounted && unmountOnExit && !forceMount) return clearTimers;
+			setPhase("exitTo");
+			callbacksRef.current.onExit?.();
+			timeoutRef.current = setTimeout(() => {
+				if (unmountOnExit && !forceMount) setMounted(false);
+				setPhase("enterFrom");
+				callbacksRef.current.onExited?.();
+			}, duration);
+		}
+		return clearTimers;
+	}, [
+		visible,
+		unmountOnExit,
+		duration,
+		forceMount
+	]);
+	const settledPhaseRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		settledPhaseRef.current = null;
+	}, [phase, visible]);
+	const handleEnd = (event) => {
+		if (event.target !== event.currentTarget) return;
+		if (settledPhaseRef.current === phase) return;
+		if (phase === "enterTo") {
+			settledPhaseRef.current = phase;
+			callbacksRef.current.onEntered?.();
+		}
+		if (phase === "exitTo" && !visible) {
+			settledPhaseRef.current = phase;
+			clearTimers();
+			if (unmountOnExit && !forceMount) setMounted(false);
+			setPhase("enterFrom");
+			callbacksRef.current.onExited?.();
+		}
+	};
+	const handleAnimationEnd = handleEnd;
+	const handleTransitionEnd = handleEnd;
+	if (!mounted && !forceMount) return null;
+	const phaseClass = {
+		enterFrom,
+		enterTo,
+		exitTo
+	}[phase];
+	if (as) return (0, react.createElement)(as, {
+		...props,
+		className: (0, _puzzle_ui_core.cn)(className, phaseClass),
+		onAnimationEnd: (event) => {
+			propsOnAnimationEnd?.(event);
+			handleAnimationEnd(event);
+		},
+		onTransitionEnd: (event) => {
+			propsOnTransitionEnd?.(event);
+			handleTransitionEnd(event);
+		}
+	}, children);
+	return react.Children.map(children, (child) => {
+		if (!(0, react.isValidElement)(child)) return child;
+		return (0, react.cloneElement)(child, {
+			...child.props,
+			...props,
+			className: (0, _puzzle_ui_core.cn)(child.props?.className, className, phaseClass),
+			onAnimationEnd: (event) => {
+				child.props.onAnimationEnd?.(event);
+				propsOnAnimationEnd?.(event);
+				handleAnimationEnd(event);
+			},
+			onTransitionEnd: (event) => {
+				child.props.onTransitionEnd?.(event);
+				propsOnTransitionEnd?.(event);
+				handleTransitionEnd(event);
+			}
+		});
+	});
+};
+exports.Transition = Transition;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/utilities/transition/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useState","useRef","createElement","cn","Children","isValidElement","cloneElement"],"sources":["../../../../src/components/utilities/transition/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@puzzle-ui/core\";\nimport {\n  Children,\n  cloneElement,\n  type AnimationEventHandler,\n  type ComponentPropsWithoutRef,\n  createElement,\n  type ElementType,\n  isValidElement,\n  type PropsWithoutRef,\n  type ReactNode,\n  type TransitionEventHandler,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport \"./transition.css\";\n\ntype TransitionPhase = \"enterFrom\" | \"enterTo\" | \"exitTo\";\n\ntype TransitionTemplate =\n  | \"fade\"\n  | \"slide-in-up\"\n  | \"slide-in-down\"\n  | \"slide-in-left\"\n  | \"slide-in-right\"\n  | \"accordion\";\n\ntype TransitionProps<T extends ElementType = \"div\"> = {\n  visible: boolean;\n  children: ReactNode;\n\n  /**\n   * Element rendered around the children, which receives the transition\n   * classes, handlers and remaining props. When omitted, the single child\n   * element is animated directly and receives those props instead.\n   */\n  as?: T;\n\n  enterFrom?: string;\n  enterTo?: string;\n  exitTo?: string;\n\n  template?: TransitionTemplate;\n\n  className?: string;\n\n  duration?: number;\n  unmountOnExit?: boolean;\n  forceMount?: boolean;\n\n  onEnter?: () => void;\n  onEntered?: () => void;\n  onExit?: () => void;\n  onExited?: () => void;\n} & Omit<ComponentPropsWithoutRef<T>, \"as\" | \"children\" | \"className\">;\n\nconst resolveTemplate = (\n  template?: TransitionTemplate,\n  enterFromProp?: string,\n  enterToProp?: string,\n  exitToProp?: string,\n) => {\n  switch (template) {\n    case \"slide-in-up\":\n      return {\n        enterFrom: enterFromProp ?? \"puzzle-transition-slide-in-up-from\",\n        enterTo: enterToProp ?? \"puzzle-transition-slide-in-up-active\",\n        exitTo: exitToProp ?? \"puzzle-transition-slide-in-up-exit\",\n      };\n    case \"slide-in-down\":\n      return {\n        enterFrom: enterFromProp ?? \"puzzle-transition-slide-in-down-from\",\n        enterTo: enterToProp ?? \"puzzle-transition-slide-in-down-active\",\n        exitTo: exitToProp ?? \"puzzle-transition-slide-in-down-exit\",\n      };\n    case \"slide-in-left\":\n      return {\n        enterFrom: enterFromProp ?? \"puzzle-transition-slide-in-left-from\",\n        enterTo: enterToProp ?? \"puzzle-transition-slide-in-left-active\",\n        exitTo: exitToProp ?? \"puzzle-transition-slide-in-left-exit\",\n      };\n    case \"slide-in-right\":\n      return {\n        enterFrom: enterFromProp ?? \"puzzle-transition-slide-in-right-from\",\n        enterTo: enterToProp ?? \"puzzle-transition-slide-in-right-active\",\n        exitTo: exitToProp ?? \"puzzle-transition-slide-in-right-exit\",\n      };\n    case \"accordion\":\n      return {\n        enterFrom: enterFromProp ?? \"puzzle-transition-accordion-from\",\n        enterTo: enterToProp ?? \"puzzle-transition-accordion-active\",\n        exitTo: exitToProp ?? \"puzzle-transition-accordion-exit\",\n      };\n    case \"fade\":\n    default:\n      return {\n        enterFrom: enterFromProp ?? \"puzzle-transition-fade-from\",\n        enterTo: enterToProp ?? \"puzzle-transition-fade-active\",\n        exitTo: exitToProp ?? \"puzzle-transition-fade-exit\",\n      };\n  }\n};\n\ntype ChildProps = PropsWithoutRef<HTMLElement> & {\n  onAnimationEnd?: AnimationEventHandler<HTMLElement>;\n  onTransitionEnd?: TransitionEventHandler<HTMLElement>;\n};\n\nconst Transition = <T extends ElementType = \"div\">({\n  visible,\n  children,\n  as,\n  template,\n  enterFrom: enterFromProp,\n  enterTo: enterToProp,\n  exitTo: exitToProp,\n  className = \"\",\n  duration = 300,\n  unmountOnExit = true,\n  forceMount = false,\n  onEnter,\n  onEntered,\n  onExit,\n  onExited,\n  ...restProps\n}: TransitionProps<T>) => {\n  const {\n    onAnimationEnd: propsOnAnimationEnd,\n    onTransitionEnd: propsOnTransitionEnd,\n    ...props\n  } = restProps as {\n    onAnimationEnd?: AnimationEventHandler<HTMLElement>;\n    onTransitionEnd?: TransitionEventHandler<HTMLElement>;\n  } & Record<string, unknown>;\n\n  const [mounted, setMounted] = useState(\n    () => visible || forceMount || !unmountOnExit,\n  );\n\n  const { enterFrom, enterTo, exitTo } = resolveTemplate(\n    template,\n    enterFromProp,\n    enterToProp,\n    exitToProp,\n  );\n\n  const [phase, setPhase] = useState<TransitionPhase>(() =>\n    visible || forceMount || !unmountOnExit ? \"enterFrom\" : \"exitTo\",\n  );\n\n  const frameRef = useRef<number | null>(null);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const isInitialRenderRef = useRef(true);\n\n  // Always call the latest callbacks without making them effect dependencies,\n  // so passing a new callback never restarts a running transition.\n  const callbacksRef = useRef({ onEnter, onEntered, onExit, onExited });\n\n  useLayoutEffect(() => {\n    callbacksRef.current = { onEnter, onEntered, onExit, onExited };\n  });\n\n  const clearTimers = () => {\n    if (frameRef.current !== null) {\n      cancelAnimationFrame(frameRef.current);\n      frameRef.current = null;\n    }\n\n    if (timeoutRef.current !== null) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n  };\n\n  useEffect(() => {\n    clearTimers();\n\n    /*\n     * A permanently mounted, initially hidden transition should start in its\n     * closed phase without firing onExit or starting an exit timer.\n     */\n    if (isInitialRenderRef.current) {\n      isInitialRenderRef.current = false;\n\n      if (!visible) {\n        if (forceMount || !unmountOnExit) {\n          setMounted(true);\n          setPhase(\"enterFrom\");\n        }\n\n        return clearTimers;\n      }\n    }\n\n    /*\n     * Keep the child mounted whenever exit unmounting is disabled.\n     * This also covers changing unmountOnExit dynamically.\n     */\n    if (!unmountOnExit || forceMount) {\n      setMounted(true);\n    }\n\n    if (visible) {\n      setMounted(true);\n      setPhase(\"enterFrom\");\n\n      callbacksRef.current.onEnter?.();\n\n      // Ensure the browser applies the initial phase before entering.\n      frameRef.current = requestAnimationFrame(() => {\n        frameRef.current = requestAnimationFrame(() => {\n          setPhase(\"enterTo\");\n        });\n      });\n    } else {\n      if (!mounted && unmountOnExit && !forceMount) {\n        return clearTimers;\n      }\n\n      setPhase(\"exitTo\");\n\n      callbacksRef.current.onExit?.();\n\n      // Fallback when transitionend/animationend does not fire.\n      timeoutRef.current = setTimeout(() => {\n        if (unmountOnExit && !forceMount) {\n          setMounted(false);\n        }\n\n        setPhase(\"enterFrom\");\n        callbacksRef.current.onExited?.();\n      }, duration);\n    }\n\n    return clearTimers;\n  }, [visible, unmountOnExit, duration, forceMount]);\n\n  // animationend and transitionend can both fire for one phase; run each callback once.\n  const settledPhaseRef = useRef<TransitionPhase | null>(null);\n\n  useEffect(() => {\n    settledPhaseRef.current = null;\n  }, [phase, visible]);\n\n  const handleEnd = (event: React.SyntheticEvent) => {\n    if (event.target !== event.currentTarget) {\n      return;\n    }\n\n    if (settledPhaseRef.current === phase) {\n      return;\n    }\n\n    if (phase === \"enterTo\") {\n      settledPhaseRef.current = phase;\n      callbacksRef.current.onEntered?.();\n    }\n\n    if (phase === \"exitTo\" && !visible) {\n      settledPhaseRef.current = phase;\n      clearTimers();\n\n      if (unmountOnExit && !forceMount) {\n        setMounted(false);\n      }\n\n      setPhase(\"enterFrom\");\n      callbacksRef.current.onExited?.();\n    }\n  };\n\n  const handleAnimationEnd = handleEnd;\n  const handleTransitionEnd = handleEnd;\n\n  if (!mounted && !forceMount) {\n    return null;\n  }\n\n  const phaseClass = {\n    enterFrom,\n    enterTo,\n    exitTo,\n  }[phase];\n\n  if (as) {\n    return createElement(\n      as,\n      {\n        ...props,\n        className: cn(className, phaseClass),\n        onAnimationEnd: (event: React.AnimationEvent<HTMLElement>) => {\n          propsOnAnimationEnd?.(event);\n          handleAnimationEnd(event);\n        },\n        onTransitionEnd: (event: React.TransitionEvent<HTMLElement>) => {\n          propsOnTransitionEnd?.(event);\n          handleTransitionEnd(event);\n        },\n      },\n      children,\n    );\n  }\n\n  const clonedChildren = Children.map(children, (child) => {\n    if (!isValidElement<ChildProps>(child)) {\n      return child;\n    }\n\n    // Preserve handlers already set on the child or passed to Transition.\n    return cloneElement(child, {\n      ...child.props,\n      ...props,\n      className: cn(child.props?.className, className, phaseClass),\n      onAnimationEnd: (event: React.AnimationEvent<HTMLElement>) => {\n        child.props.onAnimationEnd?.(event);\n        propsOnAnimationEnd?.(event);\n        handleAnimationEnd(event);\n      },\n      onTransitionEnd: (event: React.TransitionEvent<HTMLElement>) => {\n        child.props.onTransitionEnd?.(event);\n        propsOnTransitionEnd?.(event);\n        handleTransitionEnd(event);\n      },\n    });\n  });\n\n  return clonedChildren;\n};\n\nexport {\n  Transition,\n  type TransitionProps,\n  type TransitionPhase,\n  type TransitionTemplate,\n};\n"],"mappings":"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"}

package/dist/components/utilities/transition/index.d.cts

@@ -0,0 +1,27 @@
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+type TransitionPhase = "enterFrom" | "enterTo" | "exitTo";
+type TransitionTemplate = "fade" | "slide-in-up" | "slide-in-down" | "slide-in-left" | "slide-in-right" | "accordion";
+type TransitionProps<T extends ElementType = "div"> = {
+  visible: boolean;
+  children: ReactNode;
+  /**
+   * Element rendered around the children, which receives the transition
+   * classes, handlers and remaining props. When omitted, the single child
+   * element is animated directly and receives those props instead.
+   */
+  as?: T;
+  enterFrom?: string;
+  enterTo?: string;
+  exitTo?: string;
+  template?: TransitionTemplate;
+  className?: string;
+  duration?: number;
+  unmountOnExit?: boolean;
+  forceMount?: boolean;
+  onEnter?: () => void;
+  onEntered?: () => void;
+  onExit?: () => void;
+  onExited?: () => void;
+} & Omit<ComponentPropsWithoutRef<T>, "as" | "children" | "className">;
+declare const Transition: <T extends ElementType = "div">({ visible, children, as, template, enterFrom: enterFromProp, enterTo: enterToProp, exitTo: exitToProp, className, duration, unmountOnExit, forceMount, onEnter, onEntered, onExit, onExited, ...restProps }: TransitionProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | (string | number | bigint | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined>)[] | null | undefined;
+export { Transition, type TransitionPhase, type TransitionProps, type TransitionTemplate };

package/dist/components/utilities/transition/index.d.ts

@@ -0,0 +1,27 @@
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+type TransitionPhase = "enterFrom" | "enterTo" | "exitTo";
+type TransitionTemplate = "fade" | "slide-in-up" | "slide-in-down" | "slide-in-left" | "slide-in-right" | "accordion";
+type TransitionProps<T extends ElementType = "div"> = {
+  visible: boolean;
+  children: ReactNode;
+  /**
+   * Element rendered around the children, which receives the transition
+   * classes, handlers and remaining props. When omitted, the single child
+   * element is animated directly and receives those props instead.
+   */
+  as?: T;
+  enterFrom?: string;
+  enterTo?: string;
+  exitTo?: string;
+  template?: TransitionTemplate;
+  className?: string;
+  duration?: number;
+  unmountOnExit?: boolean;
+  forceMount?: boolean;
+  onEnter?: () => void;
+  onEntered?: () => void;
+  onExit?: () => void;
+  onExited?: () => void;
+} & Omit<ComponentPropsWithoutRef<T>, "as" | "children" | "className">;
+declare const Transition: <T extends ElementType = "div">({ visible, children, as, template, enterFrom: enterFromProp, enterTo: enterToProp, exitTo: exitToProp, className, duration, unmountOnExit, forceMount, onEnter, onEntered, onExit, onExited, ...restProps }: TransitionProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | (string | number | bigint | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined>)[] | null | undefined;
+export { Transition, type TransitionPhase, type TransitionProps, type TransitionTemplate };

package/dist/components/utilities/transition/index.js

@@ -0,0 +1,171 @@
+"use client";
+import "./transition.css";
+import { cn } from "@puzzle-ui/core";
+import { Children, cloneElement, createElement, isValidElement, useEffect, useLayoutEffect, useRef, useState } from "react";
+// src/components/utilities/transition/index.tsx
+const resolveTemplate = (template, enterFromProp, enterToProp, exitToProp) => {
+	switch (template) {
+		case "slide-in-up": return {
+			enterFrom: enterFromProp ?? "puzzle-transition-slide-in-up-from",
+			enterTo: enterToProp ?? "puzzle-transition-slide-in-up-active",
+			exitTo: exitToProp ?? "puzzle-transition-slide-in-up-exit"
+		};
+		case "slide-in-down": return {
+			enterFrom: enterFromProp ?? "puzzle-transition-slide-in-down-from",
+			enterTo: enterToProp ?? "puzzle-transition-slide-in-down-active",
+			exitTo: exitToProp ?? "puzzle-transition-slide-in-down-exit"
+		};
+		case "slide-in-left": return {
+			enterFrom: enterFromProp ?? "puzzle-transition-slide-in-left-from",
+			enterTo: enterToProp ?? "puzzle-transition-slide-in-left-active",
+			exitTo: exitToProp ?? "puzzle-transition-slide-in-left-exit"
+		};
+		case "slide-in-right": return {
+			enterFrom: enterFromProp ?? "puzzle-transition-slide-in-right-from",
+			enterTo: enterToProp ?? "puzzle-transition-slide-in-right-active",
+			exitTo: exitToProp ?? "puzzle-transition-slide-in-right-exit"
+		};
+		case "accordion": return {
+			enterFrom: enterFromProp ?? "puzzle-transition-accordion-from",
+			enterTo: enterToProp ?? "puzzle-transition-accordion-active",
+			exitTo: exitToProp ?? "puzzle-transition-accordion-exit"
+		};
+		default: return {
+			enterFrom: enterFromProp ?? "puzzle-transition-fade-from",
+			enterTo: enterToProp ?? "puzzle-transition-fade-active",
+			exitTo: exitToProp ?? "puzzle-transition-fade-exit"
+		};
+	}
+};
+const Transition = ({ visible, children, as, template, enterFrom: enterFromProp, enterTo: enterToProp, exitTo: exitToProp, className = "", duration = 300, unmountOnExit = true, forceMount = false, onEnter, onEntered, onExit, onExited, ...restProps }) => {
+	const { onAnimationEnd: propsOnAnimationEnd, onTransitionEnd: propsOnTransitionEnd, ...props } = restProps;
+	const [mounted, setMounted] = useState(() => visible || forceMount || !unmountOnExit);
+	const { enterFrom, enterTo, exitTo } = resolveTemplate(template, enterFromProp, enterToProp, exitToProp);
+	const [phase, setPhase] = useState(() => visible || forceMount || !unmountOnExit ? "enterFrom" : "exitTo");
+	const frameRef = useRef(null);
+	const timeoutRef = useRef(null);
+	const isInitialRenderRef = useRef(true);
+	const callbacksRef = useRef({
+		onEnter,
+		onEntered,
+		onExit,
+		onExited
+	});
+	useLayoutEffect(() => {
+		callbacksRef.current = {
+			onEnter,
+			onEntered,
+			onExit,
+			onExited
+		};
+	});
+	const clearTimers = () => {
+		if (frameRef.current !== null) {
+			cancelAnimationFrame(frameRef.current);
+			frameRef.current = null;
+		}
+		if (timeoutRef.current !== null) {
+			clearTimeout(timeoutRef.current);
+			timeoutRef.current = null;
+		}
+	};
+	useEffect(() => {
+		clearTimers();
+		if (isInitialRenderRef.current) {
+			isInitialRenderRef.current = false;
+			if (!visible) {
+				if (forceMount || !unmountOnExit) {
+					setMounted(true);
+					setPhase("enterFrom");
+				}
+				return clearTimers;
+			}
+		}
+		if (!unmountOnExit || forceMount) setMounted(true);
+		if (visible) {
+			setMounted(true);
+			setPhase("enterFrom");
+			callbacksRef.current.onEnter?.();
+			frameRef.current = requestAnimationFrame(() => {
+				frameRef.current = requestAnimationFrame(() => {
+					setPhase("enterTo");
+				});
+			});
+		} else {
+			if (!mounted && unmountOnExit && !forceMount) return clearTimers;
+			setPhase("exitTo");
+			callbacksRef.current.onExit?.();
+			timeoutRef.current = setTimeout(() => {
+				if (unmountOnExit && !forceMount) setMounted(false);
+				setPhase("enterFrom");
+				callbacksRef.current.onExited?.();
+			}, duration);
+		}
+		return clearTimers;
+	}, [
+		visible,
+		unmountOnExit,
+		duration,
+		forceMount
+	]);
+	const settledPhaseRef = useRef(null);
+	useEffect(() => {
+		settledPhaseRef.current = null;
+	}, [phase, visible]);
+	const handleEnd = (event) => {
+		if (event.target !== event.currentTarget) return;
+		if (settledPhaseRef.current === phase) return;
+		if (phase === "enterTo") {
+			settledPhaseRef.current = phase;
+			callbacksRef.current.onEntered?.();
+		}
+		if (phase === "exitTo" && !visible) {
+			settledPhaseRef.current = phase;
+			clearTimers();
+			if (unmountOnExit && !forceMount) setMounted(false);
+			setPhase("enterFrom");
+			callbacksRef.current.onExited?.();
+		}
+	};
+	const handleAnimationEnd = handleEnd;
+	const handleTransitionEnd = handleEnd;
+	if (!mounted && !forceMount) return null;
+	const phaseClass = {
+		enterFrom,
+		enterTo,
+		exitTo
+	}[phase];
+	if (as) return createElement(as, {
+		...props,
+		className: cn(className, phaseClass),
+		onAnimationEnd: (event) => {
+			propsOnAnimationEnd?.(event);
+			handleAnimationEnd(event);
+		},
+		onTransitionEnd: (event) => {
+			propsOnTransitionEnd?.(event);
+			handleTransitionEnd(event);
+		}
+	}, children);
+	return Children.map(children, (child) => {
+		if (!isValidElement(child)) return child;
+		return cloneElement(child, {
+			...child.props,
+			...props,
+			className: cn(child.props?.className, className, phaseClass),
+			onAnimationEnd: (event) => {
+				child.props.onAnimationEnd?.(event);
+				propsOnAnimationEnd?.(event);
+				handleAnimationEnd(event);
+			},
+			onTransitionEnd: (event) => {
+				child.props.onTransitionEnd?.(event);
+				propsOnTransitionEnd?.(event);
+				handleTransitionEnd(event);
+			}
+		});
+	});
+};
+export { Transition };
+
+//# sourceMappingURL=index.js.map

package/dist/components/utilities/transition/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/utilities/transition/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@puzzle-ui/core\";\nimport {\n  Children,\n  cloneElement,\n  type AnimationEventHandler,\n  type ComponentPropsWithoutRef,\n  createElement,\n  type ElementType,\n  isValidElement,\n  type PropsWithoutRef,\n  type ReactNode,\n  type TransitionEventHandler,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport \"./transition.css\";\n\ntype TransitionPhase = \"enterFrom\" | \"enterTo\" | \"exitTo\";\n\ntype TransitionTemplate =\n  | \"fade\"\n  | \"slide-in-up\"\n  | \"slide-in-down\"\n  | \"slide-in-left\"\n  | \"slide-in-right\"\n  | \"accordion\";\n\ntype TransitionProps<T extends ElementType = \"div\"> = {\n  visible: boolean;\n  children: ReactNode;\n\n  /**\n   * Element rendered around the children, which receives the transition\n   * classes, handlers and remaining props. When omitted, the single child\n   * element is animated directly and receives those props instead.\n   */\n  as?: T;\n\n  enterFrom?: string;\n  enterTo?: string;\n  exitTo?: string;\n\n  template?: TransitionTemplate;\n\n  className?: string;\n\n  duration?: number;\n  unmountOnExit?: boolean;\n  forceMount?: boolean;\n\n  onEnter?: () => void;\n  onEntered?: () => void;\n  onExit?: () => void;\n  onExited?: () => void;\n} & Omit<ComponentPropsWithoutRef<T>, \"as\" | \"children\" | \"className\">;\n\nconst resolveTemplate = (\n  template?: TransitionTemplate,\n  enterFromProp?: string,\n  enterToProp?: string,\n  exitToProp?: string,\n) => {\n  switch (template) {\n    case \"slide-in-up\":\n      return {\n        enterFrom: enterFromProp ?? \"puzzle-transition-slide-in-up-from\",\n        enterTo: enterToProp ?? \"puzzle-transition-slide-in-up-active\",\n        exitTo: exitToProp ?? \"puzzle-transition-slide-in-up-exit\",\n      };\n    case \"slide-in-down\":\n      return {\n        enterFrom: enterFromProp ?? \"puzzle-transition-slide-in-down-from\",\n        enterTo: enterToProp ?? \"puzzle-transition-slide-in-down-active\",\n        exitTo: exitToProp ?? \"puzzle-transition-slide-in-down-exit\",\n      };\n    case \"slide-in-left\":\n      return {\n        enterFrom: enterFromProp ?? \"puzzle-transition-slide-in-left-from\",\n        enterTo: enterToProp ?? \"puzzle-transition-slide-in-left-active\",\n        exitTo: exitToProp ?? \"puzzle-transition-slide-in-left-exit\",\n      };\n    case \"slide-in-right\":\n      return {\n        enterFrom: enterFromProp ?? \"puzzle-transition-slide-in-right-from\",\n        enterTo: enterToProp ?? \"puzzle-transition-slide-in-right-active\",\n        exitTo: exitToProp ?? \"puzzle-transition-slide-in-right-exit\",\n      };\n    case \"accordion\":\n      return {\n        enterFrom: enterFromProp ?? \"puzzle-transition-accordion-from\",\n        enterTo: enterToProp ?? \"puzzle-transition-accordion-active\",\n        exitTo: exitToProp ?? \"puzzle-transition-accordion-exit\",\n      };\n    case \"fade\":\n    default:\n      return {\n        enterFrom: enterFromProp ?? \"puzzle-transition-fade-from\",\n        enterTo: enterToProp ?? \"puzzle-transition-fade-active\",\n        exitTo: exitToProp ?? \"puzzle-transition-fade-exit\",\n      };\n  }\n};\n\ntype ChildProps = PropsWithoutRef<HTMLElement> & {\n  onAnimationEnd?: AnimationEventHandler<HTMLElement>;\n  onTransitionEnd?: TransitionEventHandler<HTMLElement>;\n};\n\nconst Transition = <T extends ElementType = \"div\">({\n  visible,\n  children,\n  as,\n  template,\n  enterFrom: enterFromProp,\n  enterTo: enterToProp,\n  exitTo: exitToProp,\n  className = \"\",\n  duration = 300,\n  unmountOnExit = true,\n  forceMount = false,\n  onEnter,\n  onEntered,\n  onExit,\n  onExited,\n  ...restProps\n}: TransitionProps<T>) => {\n  const {\n    onAnimationEnd: propsOnAnimationEnd,\n    onTransitionEnd: propsOnTransitionEnd,\n    ...props\n  } = restProps as {\n    onAnimationEnd?: AnimationEventHandler<HTMLElement>;\n    onTransitionEnd?: TransitionEventHandler<HTMLElement>;\n  } & Record<string, unknown>;\n\n  const [mounted, setMounted] = useState(\n    () => visible || forceMount || !unmountOnExit,\n  );\n\n  const { enterFrom, enterTo, exitTo } = resolveTemplate(\n    template,\n    enterFromProp,\n    enterToProp,\n    exitToProp,\n  );\n\n  const [phase, setPhase] = useState<TransitionPhase>(() =>\n    visible || forceMount || !unmountOnExit ? \"enterFrom\" : \"exitTo\",\n  );\n\n  const frameRef = useRef<number | null>(null);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const isInitialRenderRef = useRef(true);\n\n  // Always call the latest callbacks without making them effect dependencies,\n  // so passing a new callback never restarts a running transition.\n  const callbacksRef = useRef({ onEnter, onEntered, onExit, onExited });\n\n  useLayoutEffect(() => {\n    callbacksRef.current = { onEnter, onEntered, onExit, onExited };\n  });\n\n  const clearTimers = () => {\n    if (frameRef.current !== null) {\n      cancelAnimationFrame(frameRef.current);\n      frameRef.current = null;\n    }\n\n    if (timeoutRef.current !== null) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n  };\n\n  useEffect(() => {\n    clearTimers();\n\n    /*\n     * A permanently mounted, initially hidden transition should start in its\n     * closed phase without firing onExit or starting an exit timer.\n     */\n    if (isInitialRenderRef.current) {\n      isInitialRenderRef.current = false;\n\n      if (!visible) {\n        if (forceMount || !unmountOnExit) {\n          setMounted(true);\n          setPhase(\"enterFrom\");\n        }\n\n        return clearTimers;\n      }\n    }\n\n    /*\n     * Keep the child mounted whenever exit unmounting is disabled.\n     * This also covers changing unmountOnExit dynamically.\n     */\n    if (!unmountOnExit || forceMount) {\n      setMounted(true);\n    }\n\n    if (visible) {\n      setMounted(true);\n      setPhase(\"enterFrom\");\n\n      callbacksRef.current.onEnter?.();\n\n      // Ensure the browser applies the initial phase before entering.\n      frameRef.current = requestAnimationFrame(() => {\n        frameRef.current = requestAnimationFrame(() => {\n          setPhase(\"enterTo\");\n        });\n      });\n    } else {\n      if (!mounted && unmountOnExit && !forceMount) {\n        return clearTimers;\n      }\n\n      setPhase(\"exitTo\");\n\n      callbacksRef.current.onExit?.();\n\n      // Fallback when transitionend/animationend does not fire.\n      timeoutRef.current = setTimeout(() => {\n        if (unmountOnExit && !forceMount) {\n          setMounted(false);\n        }\n\n        setPhase(\"enterFrom\");\n        callbacksRef.current.onExited?.();\n      }, duration);\n    }\n\n    return clearTimers;\n  }, [visible, unmountOnExit, duration, forceMount]);\n\n  // animationend and transitionend can both fire for one phase; run each callback once.\n  const settledPhaseRef = useRef<TransitionPhase | null>(null);\n\n  useEffect(() => {\n    settledPhaseRef.current = null;\n  }, [phase, visible]);\n\n  const handleEnd = (event: React.SyntheticEvent) => {\n    if (event.target !== event.currentTarget) {\n      return;\n    }\n\n    if (settledPhaseRef.current === phase) {\n      return;\n    }\n\n    if (phase === \"enterTo\") {\n      settledPhaseRef.current = phase;\n      callbacksRef.current.onEntered?.();\n    }\n\n    if (phase === \"exitTo\" && !visible) {\n      settledPhaseRef.current = phase;\n      clearTimers();\n\n      if (unmountOnExit && !forceMount) {\n        setMounted(false);\n      }\n\n      setPhase(\"enterFrom\");\n      callbacksRef.current.onExited?.();\n    }\n  };\n\n  const handleAnimationEnd = handleEnd;\n  const handleTransitionEnd = handleEnd;\n\n  if (!mounted && !forceMount) {\n    return null;\n  }\n\n  const phaseClass = {\n    enterFrom,\n    enterTo,\n    exitTo,\n  }[phase];\n\n  if (as) {\n    return createElement(\n      as,\n      {\n        ...props,\n        className: cn(className, phaseClass),\n        onAnimationEnd: (event: React.AnimationEvent<HTMLElement>) => {\n          propsOnAnimationEnd?.(event);\n          handleAnimationEnd(event);\n        },\n        onTransitionEnd: (event: React.TransitionEvent<HTMLElement>) => {\n          propsOnTransitionEnd?.(event);\n          handleTransitionEnd(event);\n        },\n      },\n      children,\n    );\n  }\n\n  const clonedChildren = Children.map(children, (child) => {\n    if (!isValidElement<ChildProps>(child)) {\n      return child;\n    }\n\n    // Preserve handlers already set on the child or passed to Transition.\n    return cloneElement(child, {\n      ...child.props,\n      ...props,\n      className: cn(child.props?.className, className, phaseClass),\n      onAnimationEnd: (event: React.AnimationEvent<HTMLElement>) => {\n        child.props.onAnimationEnd?.(event);\n        propsOnAnimationEnd?.(event);\n        handleAnimationEnd(event);\n      },\n      onTransitionEnd: (event: React.TransitionEvent<HTMLElement>) => {\n        child.props.onTransitionEnd?.(event);\n        propsOnTransitionEnd?.(event);\n        handleTransitionEnd(event);\n      },\n    });\n  });\n\n  return clonedChildren;\n};\n\nexport {\n  Transition,\n  type TransitionProps,\n  type TransitionPhase,\n  type TransitionTemplate,\n};\n"],"mappings":"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"}

package/dist/components/utilities/transition/transition.css

@@ -0,0 +1,130 @@
+.puzzle-transition-fade-from {
+  opacity: 0;
+}
+
+.puzzle-transition-fade-active, .puzzle-transition-fade-exit {
+  transition: opacity var(--puzzle-duration-normal, .3s)
+    var(--puzzle-easing-out, ease-out);
+}
+
+.puzzle-transition-fade-active {
+  opacity: 1;
+}
+
+.puzzle-transition-fade-exit {
+  opacity: 0;
+}
+
+.puzzle-transition-slide-in-up-from {
+  opacity: 0;
+  transform: translateY(100%);
+}
+
+.puzzle-transition-slide-in-up-active, .puzzle-transition-slide-in-up-exit {
+  transition: transform var(--puzzle-duration-normal, .3s)
+      var(--puzzle-easing-out, ease-out),
+    opacity var(--puzzle-duration-normal, .3s)
+      var(--puzzle-easing-out, ease-out);
+}
+
+.puzzle-transition-slide-in-up-active {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.puzzle-transition-slide-in-up-exit {
+  opacity: 0;
+  transform: translateY(100%);
+}
+
+.puzzle-transition-slide-in-down-from {
+  opacity: 0;
+  transform: translateY(-100%);
+}
+
+.puzzle-transition-slide-in-down-active, .puzzle-transition-slide-in-down-exit {
+  transition: transform var(--puzzle-duration-normal, .3s)
+      var(--puzzle-easing-out, ease-out),
+    opacity var(--puzzle-duration-normal, .3s)
+      var(--puzzle-easing-out, ease-out);
+}
+
+.puzzle-transition-slide-in-down-active {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.puzzle-transition-slide-in-down-exit {
+  opacity: 0;
+  transform: translateY(-100%);
+}
+
+.puzzle-transition-slide-in-left-from {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.puzzle-transition-slide-in-left-active, .puzzle-transition-slide-in-left-exit {
+  transition: transform var(--puzzle-duration-normal, .3s)
+      var(--puzzle-easing-out, ease-out),
+    opacity var(--puzzle-duration-normal, .3s)
+      var(--puzzle-easing-out, ease-out);
+}
+
+.puzzle-transition-slide-in-left-active {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.puzzle-transition-slide-in-left-exit {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.puzzle-transition-slide-in-right-from {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+
+.puzzle-transition-slide-in-right-active, .puzzle-transition-slide-in-right-exit {
+  transition: transform var(--puzzle-duration-normal, .3s)
+      var(--puzzle-easing-out, ease-out),
+    opacity var(--puzzle-duration-normal, .3s)
+      var(--puzzle-easing-out, ease-out);
+}
+
+.puzzle-transition-slide-in-right-active {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.puzzle-transition-slide-in-right-exit {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+
+.puzzle-transition-accordion-from, .puzzle-transition-accordion-exit {
+  opacity: 0;
+  grid-template-rows: 0fr;
+}
+
+.puzzle-transition-accordion-active {
+  opacity: 1;
+  grid-template-rows: 1fr;
+}
+
+.puzzle-transition-accordion-from, .puzzle-transition-accordion-active, .puzzle-transition-accordion-exit {
+  min-height: 0;
+  transition: grid-template-rows var(--puzzle-duration-normal, .3s)
+      var(--puzzle-easing-out, ease-out),
+    opacity var(--puzzle-duration-normal, .3s)
+      var(--puzzle-easing-out, ease-out);
+  display: grid;
+  overflow: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-transition-fade-active, .puzzle-transition-fade-exit, .puzzle-transition-slide-in-up-active, .puzzle-transition-slide-in-up-exit, .puzzle-transition-slide-in-down-active, .puzzle-transition-slide-in-down-exit, .puzzle-transition-slide-in-left-active, .puzzle-transition-slide-in-left-exit, .puzzle-transition-slide-in-right-active, .puzzle-transition-slide-in-right-exit, .puzzle-transition-accordion-from, .puzzle-transition-accordion-active, .puzzle-transition-accordion-exit {
+    transition: none;
+  }
+}