@plexui/ui 0.2.0

package/dist/es/components/Transition/SlotTransitionGroup.js

@@ -0,0 +1,198 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { Children, useCallback, useEffect, useLayoutEffect, useReducer, useRef, useState, } from "react";
+import { mergeRefs } from "react-merge-refs";
+import { waitForAnimationFrame } from "../../lib/helpers";
+// (no-op) clsx removed: className is not managed at group-level for slotted children
+import { useTimeout } from "usehooks-ts";
+import getDisableAnimations from "./getDisableAnimations";
+import { assertSingleChildWhenRef, ChildrenWithKeys, computeNextRenderChildren, noop, useChildCallback, } from "./shared";
+import { getInitialTransitionState, transitionReducer } from "./transitionReducer";
+const SlotTransitionGroupChildInner = ({ ref, component, preventMountTransition, shouldRender, enterDuration, exitDuration, removeChild, onEnter, onEnterActive, onEnterComplete, onExit, onExitActive, onExitComplete, }) => {
+    const [state, dispatch] = useReducer(transitionReducer, getInitialTransitionState(preventMountTransition || false));
+    const preventedMountTransition = useRef(false);
+    const elementRef = useRef(null);
+    const enterDurationRef = useRef(enterDuration);
+    enterDurationRef.current = enterDuration;
+    const exitDurationRef = useRef(exitDuration);
+    exitDurationRef.current = exitDuration;
+    const lastCallbackRef = useRef(null);
+    const triggerCallback = useCallback((callbackType) => {
+        const element = elementRef.current;
+        if (!element || callbackType === lastCallbackRef.current) {
+            return;
+        }
+        lastCallbackRef.current = callbackType;
+        switch (callbackType) {
+            case "enter":
+                onEnter(element);
+                break;
+            case "enter-active":
+                onEnterActive(element);
+                break;
+            case "enter-complete":
+                onEnterComplete(element);
+                break;
+            case "exit":
+                onExit(element);
+                break;
+            case "exit-active":
+                onExitActive(element);
+                break;
+            case "exit-complete":
+                onExitComplete(element);
+                break;
+            default:
+                callbackType;
+                break;
+        }
+    }, [onEnter, onEnterActive, onEnterComplete, onExit, onExitActive, onExitComplete]);
+    /**
+     * IMPORTANT: `useLayoutEffect()` is used here to avoid race conditions between new SlotTransitionGroupChild components.
+     */
+    useLayoutEffect(() => {
+        // Exit transition
+        if (!shouldRender) {
+            let exitTimeout;
+            dispatch({ type: "exit-before" });
+            triggerCallback("exit");
+            const cancelAnimationFrame = waitForAnimationFrame(() => {
+                dispatch({ type: "exit-active" });
+                triggerCallback("exit-active");
+                exitTimeout = window.setTimeout(() => {
+                    triggerCallback("exit-complete");
+                    removeChild();
+                }, exitDurationRef.current);
+            });
+            return () => {
+                cancelAnimationFrame();
+                if (exitTimeout !== undefined)
+                    clearTimeout(exitTimeout);
+            };
+        }
+        // Enter transition
+        // Check if we need to prevent this specific entering cycle
+        if (preventMountTransition && !preventedMountTransition.current) {
+            // Mark initial transition as prevented and short-circuit.
+            preventedMountTransition.current = true;
+            return;
+        }
+        let enterTimeout;
+        dispatch({ type: "enter-before" });
+        triggerCallback("enter");
+        const cancelAnimationFrame = waitForAnimationFrame(() => {
+            dispatch({ type: "enter-active" });
+            triggerCallback("enter-active");
+            enterTimeout = window.setTimeout(() => {
+                dispatch({ type: "done" });
+                triggerCallback("enter-complete");
+            }, enterDurationRef.current);
+        });
+        return () => {
+            cancelAnimationFrame();
+            if (enterTimeout !== undefined)
+                clearTimeout(enterTimeout);
+        };
+    }, [
+        shouldRender,
+        // This value is immutable after <SlotTransitionGroup> is created, and does not change on re-renders.
+        preventMountTransition,
+        removeChild,
+        triggerCallback,
+    ]);
+    useEffect(() => {
+        // Required for <StrictMode>
+        return () => {
+            preventedMountTransition.current = false;
+        };
+    }, []);
+    const original = component;
+    const mergedRef = mergeRefs([
+        elementRef,
+        ref,
+        (original.ref ?? null),
+    ]);
+    const nextProps = {
+        "data-entering": state.enter ? "" : undefined,
+        "data-entering-active": state.enterActive ? "" : undefined,
+        "data-exiting": state.exit ? "" : undefined,
+        "data-exiting-active": state.exitActive ? "" : undefined,
+        "data-interrupted": state.interrupted ? "" : undefined,
+        "ref": mergedRef,
+    };
+    return React.isValidElement(original) ? React.cloneElement(original, nextProps) : null;
+};
+const SlotTransitionGroupChild = (props) => {
+    const { enterMountDelay, preventMountTransition } = props;
+    const mountDelay = !preventMountTransition && enterMountDelay != null ? enterMountDelay : null;
+    const [mounted, setMounted] = useState(mountDelay == null);
+    useTimeout(() => setMounted(true), mounted ? null : mountDelay);
+    return mounted ? _jsx(SlotTransitionGroupChildInner, { ...props }) : null;
+};
+export const SlotTransitionGroup = (props) => {
+    const { ref, children, enterDuration = 0, exitDuration = 0, preventInitialTransition = true, enterMountDelay, insertMethod = "append", disableAnimations = getDisableAnimations(), } = props;
+    // Create stable, mutable references for all callbacks
+    const onEnter = useChildCallback(props.onEnter ?? noop);
+    const onEnterActive = useChildCallback(props.onEnterActive ?? noop);
+    const onEnterComplete = useChildCallback(props.onEnterComplete ?? noop);
+    const onExit = useChildCallback(props.onExit ?? noop);
+    const onExitActive = useChildCallback(props.onExitActive ?? noop);
+    const onExitComplete = useChildCallback(props.onExitComplete ?? noop);
+    // Ensure all children are provided with keys.
+    Children.forEach(children, (child) => {
+        // @ts-expect-error - We know `key` might not exist on certain types, that's why we're checking
+        if (child && !child.key) {
+            throw new Error("Child elements of <SlotTransitionGroup /> must include a `key`");
+        }
+    });
+    const createDefaultRenderChildProps = useCallback((child) => ({
+        component: child,
+        shouldRender: true,
+        removeChild: () => {
+            setRenderChildren((currentRenderChildren) => currentRenderChildren.filter((c) => child.key !== c.component.key));
+        },
+        onEnter,
+        onEnterActive,
+        onEnterComplete,
+        onExit,
+        onExitActive,
+        onExitComplete,
+    }), [onEnter, onEnterActive, onEnterComplete, onExit, onExitActive, onExitComplete]);
+    const [renderChildren, setRenderChildren] = useState(() => {
+        return ChildrenWithKeys(children).map((child) => ({
+            ...createDefaultRenderChildProps(child),
+            // Lock this value to whatever the value was on initial render of the group.
+            preventMountTransition: preventInitialTransition,
+        }));
+    });
+    // IMPORTANT: useLayoutEffect is required to satisfy render timings for prop updates to input elements
+    useLayoutEffect(() => {
+        setRenderChildren((currentRenderChildren) => {
+            const propChildrenArray = ChildrenWithKeys(children, false, "SlotTransitionGroup");
+            return computeNextRenderChildren(propChildrenArray, currentRenderChildren, createDefaultRenderChildProps, insertMethod);
+        });
+    }, [children, insertMethod, createDefaultRenderChildProps]);
+    // Prevent mistakes with forwardRef() by ensuring single child usage within the group.
+    assertSingleChildWhenRef("SlotTransitionGroup", ref, Children.count(children));
+    if (disableAnimations) {
+        // Fast path: when animations are disabled and no ref is provided, render children as-is.
+        if (!ref) {
+            return _jsx(_Fragment, { children: children });
+        }
+        // If a ref is provided, attach it to the (single) child by cloning.
+        return (_jsx(_Fragment, { children: Children.map(children, (child) => {
+                if (!React.isValidElement(child))
+                    return child;
+                const original = child;
+                const merged = mergeRefs([
+                    ref,
+                    (original.ref ??
+                        null),
+                ]);
+                const nextProps = { ref: merged };
+                return React.cloneElement(original, nextProps);
+            }) }));
+    }
+    return (_jsx(_Fragment, { children: renderChildren.map(({ component, ...restProps }) => (_jsx(SlotTransitionGroupChild, { ...restProps, component: component, enterDuration: enterDuration, exitDuration: exitDuration, enterMountDelay: enterMountDelay, ref: ref }, component.key))) }));
+};
+//# sourceMappingURL=SlotTransitionGroup.js.map

package/dist/es/components/Transition/SlotTransitionGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlotTransitionGroup.js","sourceRoot":"","sources":["../../../../src/components/Transition/SlotTransitionGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport React, {\n  Children,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useReducer,\n  useRef,\n  useState,\n} from \"react\"\nimport { mergeRefs } from \"react-merge-refs\"\n\nimport { waitForAnimationFrame } from \"../../lib/helpers\"\n\n// (no-op) clsx removed: className is not managed at group-level for slotted children\nimport { useTimeout } from \"usehooks-ts\"\nimport getDisableAnimations from \"./getDisableAnimations\"\nimport {\n  assertSingleChildWhenRef,\n  ChildrenWithKeys,\n  computeNextRenderChildren,\n  noop,\n  useChildCallback,\n  type CallbackType,\n  type ReactElementWithKey,\n  type TransitionGroupChildCallbacks,\n} from \"./shared\"\nimport { getInitialTransitionState, transitionReducer } from \"./transitionReducer\"\n\ntype SlotTransitionGroupChildProps = {\n  component: ReactElementWithKey\n  preventMountTransition?: boolean\n  shouldRender: boolean\n  enterDuration: number\n  exitDuration: number\n  enterMountDelay?: number\n  removeChild: () => void\n  ref?: React.Ref<unknown>\n} & TransitionGroupChildCallbacks\n\nconst SlotTransitionGroupChildInner = ({\n  ref,\n  component,\n  preventMountTransition,\n  shouldRender,\n  enterDuration,\n  exitDuration,\n  removeChild,\n  onEnter,\n  onEnterActive,\n  onEnterComplete,\n  onExit,\n  onExitActive,\n  onExitComplete,\n}: SlotTransitionGroupChildProps) => {\n  const [state, dispatch] = useReducer(\n    transitionReducer,\n    getInitialTransitionState(preventMountTransition || false),\n  )\n  const preventedMountTransition = useRef<boolean>(false)\n  const elementRef = useRef<HTMLDivElement | null>(null)\n  const enterDurationRef = useRef<number>(enterDuration)\n  enterDurationRef.current = enterDuration\n  const exitDurationRef = useRef<number>(exitDuration)\n  exitDurationRef.current = exitDuration\n\n  const lastCallbackRef = useRef<CallbackType>(null as unknown as CallbackType)\n  const triggerCallback = useCallback(\n    (callbackType: CallbackType) => {\n      const element = elementRef.current\n      if (!element || callbackType === lastCallbackRef.current) {\n        return\n      }\n      lastCallbackRef.current = callbackType\n      switch (callbackType) {\n        case \"enter\":\n          onEnter(element)\n          break\n        case \"enter-active\":\n          onEnterActive(element)\n          break\n        case \"enter-complete\":\n          onEnterComplete(element)\n          break\n        case \"exit\":\n          onExit(element)\n          break\n        case \"exit-active\":\n          onExitActive(element)\n          break\n        case \"exit-complete\":\n          onExitComplete(element)\n          break\n        default:\n          callbackType satisfies never\n          break\n      }\n    },\n    [onEnter, onEnterActive, onEnterComplete, onExit, onExitActive, onExitComplete],\n  )\n\n  /**\n   * IMPORTANT: `useLayoutEffect()` is used here to avoid race conditions between new SlotTransitionGroupChild components.\n   */\n  useLayoutEffect(() => {\n    // Exit transition\n    if (!shouldRender) {\n      let exitTimeout: number | undefined\n\n      dispatch({ type: \"exit-before\" })\n      triggerCallback(\"exit\")\n\n      const cancelAnimationFrame = waitForAnimationFrame(() => {\n        dispatch({ type: \"exit-active\" })\n        triggerCallback(\"exit-active\")\n\n        exitTimeout = window.setTimeout(() => {\n          triggerCallback(\"exit-complete\")\n          removeChild()\n        }, exitDurationRef.current)\n      })\n\n      return () => {\n        cancelAnimationFrame()\n        if (exitTimeout !== undefined) clearTimeout(exitTimeout)\n      }\n    }\n\n    // Enter transition\n\n    // Check if we need to prevent this specific entering cycle\n    if (preventMountTransition && !preventedMountTransition.current) {\n      // Mark initial transition as prevented and short-circuit.\n      preventedMountTransition.current = true\n      return\n    }\n\n    let enterTimeout: number | undefined\n\n    dispatch({ type: \"enter-before\" })\n    triggerCallback(\"enter\")\n\n    const cancelAnimationFrame = waitForAnimationFrame(() => {\n      dispatch({ type: \"enter-active\" })\n      triggerCallback(\"enter-active\")\n\n      enterTimeout = window.setTimeout(() => {\n        dispatch({ type: \"done\" })\n        triggerCallback(\"enter-complete\")\n      }, enterDurationRef.current)\n    })\n\n    return () => {\n      cancelAnimationFrame()\n      if (enterTimeout !== undefined) clearTimeout(enterTimeout)\n    }\n  }, [\n    shouldRender,\n    // This value is immutable after <SlotTransitionGroup> is created, and does not change on re-renders.\n    preventMountTransition,\n    removeChild,\n    triggerCallback,\n  ])\n\n  useEffect(() => {\n    // Required for <StrictMode>\n    return () => {\n      preventedMountTransition.current = false\n    }\n  }, [])\n\n  const original = component\n\n  const mergedRef = mergeRefs<unknown>([\n    elementRef as unknown as React.Ref<unknown>,\n    ref as unknown as React.Ref<unknown>,\n    ((original as unknown as { ref?: React.Ref<unknown> }).ref ?? null) as React.Ref<unknown>,\n  ])\n\n  const nextProps = {\n    \"data-entering\": state.enter ? \"\" : undefined,\n    \"data-entering-active\": state.enterActive ? \"\" : undefined,\n    \"data-exiting\": state.exit ? \"\" : undefined,\n    \"data-exiting-active\": state.exitActive ? \"\" : undefined,\n    \"data-interrupted\": state.interrupted ? \"\" : undefined,\n    \"ref\": mergedRef,\n  }\n\n  return React.isValidElement(original) ? React.cloneElement(original, nextProps) : null\n}\n\nconst SlotTransitionGroupChild = (props: SlotTransitionGroupChildProps) => {\n  const { enterMountDelay, preventMountTransition } = props\n  const mountDelay = !preventMountTransition && enterMountDelay != null ? enterMountDelay : null\n  const [mounted, setMounted] = useState(mountDelay == null)\n  useTimeout(() => setMounted(true), mounted ? null : mountDelay)\n\n  return mounted ? <SlotTransitionGroupChildInner {...props} /> : null\n}\n\nexport type SlotTransitionGroupProps = {\n  /** Components controlled by SlotTransitionGroup rendering */\n  children: React.ReactNode\n  /** Determines the amount of time that the enter state is applied during mounting */\n  enterDuration?: number\n  /** Determines the amount of time that the exit state is applied before unmounting */\n  exitDuration?: number\n  /**\n   * Determines if children should have an enter transition applied during mounting of the group.\n   * @default true\n   */\n  preventInitialTransition?: boolean\n  /** Delay in MS to wait before mounting a child. `null` for no delay (default). */\n  enterMountDelay?: number\n  /** Render children changes immediately, bypassing transition timings */\n  disableAnimations?: boolean\n  /** Determines how new children are added to the children array */\n  insertMethod?: \"append\" | \"prepend\"\n  /** Ref for the SlotTransitionGroup (applied to the single child when possible) */\n  ref?: React.Ref<unknown>\n} & Partial<TransitionGroupChildCallbacks>\n\ntype RenderChild = {\n  component: ReactElementWithKey\n  shouldRender: boolean\n  preventMountTransition?: boolean\n  removeChild: () => void\n} & TransitionGroupChildCallbacks\n\nexport const SlotTransitionGroup = (props: SlotTransitionGroupProps) => {\n  const {\n    ref,\n    children,\n    enterDuration = 0,\n    exitDuration = 0,\n    preventInitialTransition = true,\n    enterMountDelay,\n    insertMethod = \"append\",\n    disableAnimations = getDisableAnimations(),\n  } = props\n\n  // Create stable, mutable references for all callbacks\n  const onEnter = useChildCallback(props.onEnter ?? noop)\n  const onEnterActive = useChildCallback(props.onEnterActive ?? noop)\n  const onEnterComplete = useChildCallback(props.onEnterComplete ?? noop)\n  const onExit = useChildCallback(props.onExit ?? noop)\n  const onExitActive = useChildCallback(props.onExitActive ?? noop)\n  const onExitComplete = useChildCallback(props.onExitComplete ?? noop)\n\n  // Ensure all children are provided with keys.\n  Children.forEach(children, (child) => {\n    // @ts-expect-error - We know `key` might not exist on certain types, that's why we're checking\n    if (child && !child.key) {\n      throw new Error(\"Child elements of <SlotTransitionGroup /> must include a `key`\")\n    }\n  })\n\n  const createDefaultRenderChildProps = useCallback(\n    (child: ReactElementWithKey): RenderChild => ({\n      component: child,\n      shouldRender: true,\n      removeChild: () => {\n        setRenderChildren((currentRenderChildren) =>\n          currentRenderChildren.filter((c) => child.key !== c.component.key),\n        )\n      },\n      onEnter,\n      onEnterActive,\n      onEnterComplete,\n      onExit,\n      onExitActive,\n      onExitComplete,\n    }),\n    [onEnter, onEnterActive, onEnterComplete, onExit, onExitActive, onExitComplete],\n  )\n\n  const [renderChildren, setRenderChildren] = useState<RenderChild[]>((): RenderChild[] => {\n    return ChildrenWithKeys(children).map((child) => ({\n      ...createDefaultRenderChildProps(child),\n      // Lock this value to whatever the value was on initial render of the group.\n      preventMountTransition: preventInitialTransition,\n    }))\n  })\n\n  // IMPORTANT: useLayoutEffect is required to satisfy render timings for prop updates to input elements\n  useLayoutEffect(() => {\n    setRenderChildren((currentRenderChildren): RenderChild[] => {\n      const propChildrenArray = ChildrenWithKeys(children, false, \"SlotTransitionGroup\")\n      return computeNextRenderChildren(\n        propChildrenArray,\n        currentRenderChildren,\n        createDefaultRenderChildProps,\n        insertMethod,\n      )\n    })\n  }, [children, insertMethod, createDefaultRenderChildProps])\n\n  // Prevent mistakes with forwardRef() by ensuring single child usage within the group.\n  assertSingleChildWhenRef(\"SlotTransitionGroup\", ref, Children.count(children))\n\n  if (disableAnimations) {\n    // Fast path: when animations are disabled and no ref is provided, render children as-is.\n    if (!ref) {\n      return <>{children}</>\n    }\n\n    // If a ref is provided, attach it to the (single) child by cloning.\n    return (\n      <>\n        {Children.map(children, (child) => {\n          if (!React.isValidElement(child)) return child\n          const original = child as ReactElementWithKey\n          const merged = mergeRefs<unknown>([\n            ref as unknown as React.Ref<unknown>,\n            ((original as unknown as { ref?: React.Ref<unknown> }).ref ??\n              null) as React.Ref<unknown>,\n          ])\n          const nextProps = { ref: merged }\n          return React.cloneElement(original, nextProps)\n        })}\n      </>\n    )\n  }\n\n  return (\n    <>\n      {renderChildren.map(({ component, ...restProps }) => (\n        <SlotTransitionGroupChild\n          key={component.key}\n          {...restProps}\n          component={component}\n          enterDuration={enterDuration}\n          exitDuration={exitDuration}\n          enterMountDelay={enterMountDelay}\n          ref={ref}\n        />\n      ))}\n    </>\n  )\n}\n"]}

package/dist/es/components/Transition/TransitionGroup.js

@@ -0,0 +1,178 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { Children, useCallback, useEffect, useLayoutEffect, useReducer, useRef, useState, } from "react";
+import { mergeRefs } from "react-merge-refs";
+import { waitForAnimationFrame } from "../../lib/helpers";
+import clsx from "clsx";
+import { useTimeout } from "usehooks-ts";
+import getDisableAnimations from "./getDisableAnimations";
+import { assertSingleChildWhenRef, ChildrenWithKeys, computeNextRenderChildren, noop, useChildCallback, } from "./shared";
+import s from "./TransitionGroup.module.css";
+import { getInitialTransitionState, transitionReducer } from "./transitionReducer";
+const TransitionGroupChildInner = ({ ref: forwardedRef, as: TagName, children, className, transitionId, style, preventMountTransition, shouldRender, enterDuration, exitDuration, removeChild, onEnter, onEnterActive, onEnterComplete, onExit, onExitActive, onExitComplete, }) => {
+    const [state, dispatch] = useReducer(transitionReducer, getInitialTransitionState(preventMountTransition || false));
+    // Allow a child to prevent mount transition, but still experience
+    // future enter transition events, when applicable.
+    const preventedMountTransition = useRef(false);
+    const elementRef = useRef(null);
+    // Duration values should not affect hook re-renders, so we create refs for them
+    const enterDurationRef = useRef(enterDuration);
+    enterDurationRef.current = enterDuration;
+    const exitDurationRef = useRef(exitDuration);
+    exitDurationRef.current = exitDuration;
+    const lastCallbackRef = useRef(null);
+    const triggerCallback = useCallback((callbackType) => {
+        const element = elementRef.current;
+        if (!element || callbackType === lastCallbackRef.current) {
+            return;
+        }
+        lastCallbackRef.current = callbackType;
+        switch (callbackType) {
+            case "enter":
+                onEnter(element);
+                break;
+            case "enter-active":
+                onEnterActive(element);
+                break;
+            case "enter-complete":
+                onEnterComplete(element);
+                break;
+            case "exit":
+                onExit(element);
+                break;
+            case "exit-active":
+                onExitActive(element);
+                break;
+            case "exit-complete":
+                onExitComplete(element);
+                break;
+            default:
+                callbackType;
+                break;
+        }
+    }, [onEnter, onEnterActive, onEnterComplete, onExit, onExitActive, onExitComplete]);
+    React.useLayoutEffect(() => {
+        // Exit transition
+        if (!shouldRender) {
+            let exitTimeout;
+            dispatch({ type: "exit-before" });
+            triggerCallback("exit");
+            const cancelAnimationFrame = waitForAnimationFrame(() => {
+                dispatch({ type: "exit-active" });
+                triggerCallback("exit-active");
+                exitTimeout = window.setTimeout(() => {
+                    triggerCallback("exit-complete");
+                    removeChild();
+                }, exitDurationRef.current);
+            });
+            return () => {
+                cancelAnimationFrame();
+                if (exitTimeout !== undefined)
+                    clearTimeout(exitTimeout);
+            };
+        }
+        // Enter transition
+        // Check if we need to prevent this specific entering cycle
+        if (preventMountTransition && !preventedMountTransition.current) {
+            // Mark initial transition as prevented and short-circuit.
+            preventedMountTransition.current = true;
+            return;
+        }
+        let enterTimeout;
+        dispatch({ type: "enter-before" });
+        triggerCallback("enter");
+        const cancelAnimationFrame = waitForAnimationFrame(() => {
+            dispatch({ type: "enter-active" });
+            triggerCallback("enter-active");
+            enterTimeout = window.setTimeout(() => {
+                dispatch({ type: "done" });
+                triggerCallback("enter-complete");
+            }, enterDurationRef.current);
+        });
+        return () => {
+            cancelAnimationFrame();
+            if (enterTimeout !== undefined)
+                clearTimeout(enterTimeout);
+        };
+    }, [
+        shouldRender,
+        // This value is immutable after <TransitionGroup> is created, and does not change on re-renders.
+        preventMountTransition,
+        removeChild,
+        triggerCallback,
+    ]);
+    useEffect(() => {
+        // Required for <StrictMode>, because we need to unset this token
+        // when the hooks are re-run. It's an imperative effect that we need to manage.
+        return () => {
+            preventedMountTransition.current = false;
+        };
+    }, []);
+    return (_jsx(TagName, { ref: mergeRefs([elementRef, forwardedRef]), className: clsx(className, s.TransitionGroupChild), "data-transition-id": transitionId, style: style, "data-entering": state.enter ? "" : undefined, "data-entering-active": state.enterActive ? "" : undefined, "data-exiting": state.exit ? "" : undefined, "data-exiting-active": state.exitActive ? "" : undefined, "data-interrupted": state.interrupted ? "" : undefined, children: children }));
+};
+const TransitionGroupChild = (props) => {
+    // Don't spread these out of props - pass all props to inner child
+    const { enterMountDelay, preventMountTransition } = props;
+    // Mount gating occurs when enterMountDelay exists, and isn't initial mount
+    // Otherwise, this flag is a no-op and the TransitionChild mounts normally.
+    const mountDelay = !preventMountTransition && enterMountDelay != null ? enterMountDelay : null;
+    const [mounted, setMounted] = useState(mountDelay == null);
+    useTimeout(() => setMounted(true), mounted ? null : mountDelay);
+    return mounted ? _jsx(TransitionGroupChildInner, { ...props }) : null;
+};
+export const TransitionGroup = (props) => {
+    const { ref: forwardedRef, as: TagName = "span", children, className, transitionId, style, enterDuration = 0, exitDuration = 0, preventInitialTransition = true, enterMountDelay, insertMethod = "append", disableAnimations = getDisableAnimations(), } = props;
+    // Create stable, mutable references for all callbacks
+    const onEnter = useChildCallback(props.onEnter ?? noop);
+    const onEnterActive = useChildCallback(props.onEnterActive ?? noop);
+    const onEnterComplete = useChildCallback(props.onEnterComplete ?? noop);
+    const onExit = useChildCallback(props.onExit ?? noop);
+    const onExitActive = useChildCallback(props.onExitActive ?? noop);
+    const onExitComplete = useChildCallback(props.onExitComplete ?? noop);
+    // Ensure all children are provided with keys.
+    // Cannot reliably use Children.toArray() because `key` is processed: https://reactjs.org/docs/react-api.html#reactchildrentoarray
+    Children.forEach(children, (child) => {
+        // @ts-expect-error - We know `key` might not exist on certain types, that's why we're checking
+        if (child && !child.key) {
+            throw new Error("Child elements of <TransitionGroup /> must include a `key`");
+        }
+    });
+    const createDefaultRenderChildProps = useCallback((child) => ({
+        component: child,
+        shouldRender: true,
+        removeChild: () => {
+            setRenderChildren((currentRenderChildren) => currentRenderChildren.filter((c) => child.key !== c.component.key));
+        },
+        onEnter,
+        onEnterActive,
+        onEnterComplete,
+        onExit,
+        onExitActive,
+        onExitComplete,
+    }), [onEnter, onEnterActive, onEnterComplete, onExit, onExitActive, onExitComplete]);
+    const [renderChildren, setRenderChildren] = useState(() => {
+        return ChildrenWithKeys(children).map((child) => ({
+            ...createDefaultRenderChildProps(child),
+            // Lock this value to whatever the value was on initial render of the TransitionGroup.
+            // It doesn't make sense to change this once it is mounted.
+            preventMountTransition: preventInitialTransition,
+        }));
+    });
+    useLayoutEffect(() => {
+        setRenderChildren((currentRenderChildren) => {
+            const propChildrenArray = ChildrenWithKeys(children);
+            return computeNextRenderChildren(propChildrenArray, currentRenderChildren, createDefaultRenderChildProps, insertMethod);
+        });
+    }, [children, insertMethod, createDefaultRenderChildProps]);
+    // Prevent mistakes with forwardRef() by ensuring single child usage within the group.
+    assertSingleChildWhenRef("TransitionGroup", forwardedRef, Children.count(children));
+    if (disableAnimations) {
+        return (_jsx(_Fragment, { children: Children.map(children, (child) => (_jsx(TagName
+            // @ts-expect-error -- TS is not happy about this forwardedRef, but it's fine.
+            , { 
+                // @ts-expect-error -- TS is not happy about this forwardedRef, but it's fine.
+                ref: forwardedRef, className: className, style: style, "data-transition-id": transitionId, children: child }))) }));
+    }
+    return (_jsx(_Fragment, { children: renderChildren.map(({ component, ...restProps }) => (_jsx(TransitionGroupChild, { ...restProps, as: TagName, className: className, transitionId: transitionId, enterDuration: enterDuration, exitDuration: exitDuration, enterMountDelay: enterMountDelay, style: style, ref: forwardedRef, children: component }, component.key))) }));
+};
+//# sourceMappingURL=TransitionGroup.js.map

package/dist/es/components/Transition/TransitionGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransitionGroup.js","sourceRoot":"","sources":["../../../../src/components/Transition/TransitionGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport React, {\n  Children,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useReducer,\n  useRef,\n  useState,\n  type CSSProperties,\n} from \"react\"\nimport { mergeRefs } from \"react-merge-refs\"\n\nimport { waitForAnimationFrame } from \"../../lib/helpers\"\n\nimport clsx from \"clsx\"\nimport { useTimeout } from \"usehooks-ts\"\nimport getDisableAnimations from \"./getDisableAnimations\"\nimport {\n  assertSingleChildWhenRef,\n  ChildrenWithKeys,\n  computeNextRenderChildren,\n  noop,\n  useChildCallback,\n  type CallbackType,\n  type ReactElementWithKey,\n  type TransitionGroupChildCallbacks,\n} from \"./shared\"\nimport s from \"./TransitionGroup.module.css\"\nimport { getInitialTransitionState, transitionReducer } from \"./transitionReducer\"\n\ntype TransitionGroupChildProps = {\n  as: \"div\" | \"span\"\n  children: React.ReactNode\n  className?: string\n  transitionId?: string\n  style?: CSSProperties\n  preventMountTransition?: boolean\n  shouldRender: boolean\n  enterDuration: number\n  exitDuration: number\n  enterMountDelay?: number\n  removeChild: () => void\n  ref?: React.Ref<unknown>\n} & TransitionGroupChildCallbacks\n\nconst TransitionGroupChildInner = ({\n  ref: forwardedRef,\n  as: TagName,\n  children,\n  className,\n  transitionId,\n  style,\n  preventMountTransition,\n  shouldRender,\n  enterDuration,\n  exitDuration,\n  removeChild,\n  onEnter,\n  onEnterActive,\n  onEnterComplete,\n  onExit,\n  onExitActive,\n  onExitComplete,\n}: TransitionGroupChildProps) => {\n  const [state, dispatch] = useReducer(\n    transitionReducer,\n    getInitialTransitionState(preventMountTransition || false),\n  )\n  // Allow a child to prevent mount transition, but still experience\n  // future enter transition events, when applicable.\n  const preventedMountTransition = useRef<boolean>(false)\n  const elementRef = useRef<HTMLDivElement | null>(null)\n  // Duration values should not affect hook re-renders, so we create refs for them\n  const enterDurationRef = useRef<number>(enterDuration)\n  enterDurationRef.current = enterDuration\n  const exitDurationRef = useRef<number>(exitDuration)\n  exitDurationRef.current = exitDuration\n\n  const lastCallbackRef = useRef<CallbackType>(null)\n  const triggerCallback = useCallback(\n    (callbackType: CallbackType) => {\n      const element = elementRef.current\n\n      if (!element || callbackType === lastCallbackRef.current) {\n        return\n      }\n\n      lastCallbackRef.current = callbackType\n\n      switch (callbackType) {\n        case \"enter\":\n          onEnter(element)\n          break\n        case \"enter-active\":\n          onEnterActive(element)\n          break\n        case \"enter-complete\":\n          onEnterComplete(element)\n          break\n        case \"exit\":\n          onExit(element)\n          break\n        case \"exit-active\":\n          onExitActive(element)\n          break\n        case \"exit-complete\":\n          onExitComplete(element)\n          break\n        default:\n          callbackType satisfies never\n          break\n      }\n    },\n    [onEnter, onEnterActive, onEnterComplete, onExit, onExitActive, onExitComplete],\n  )\n\n  React.useLayoutEffect(() => {\n    // Exit transition\n    if (!shouldRender) {\n      let exitTimeout: number | undefined\n\n      dispatch({ type: \"exit-before\" })\n      triggerCallback(\"exit\")\n\n      const cancelAnimationFrame = waitForAnimationFrame(() => {\n        dispatch({ type: \"exit-active\" })\n        triggerCallback(\"exit-active\")\n\n        exitTimeout = window.setTimeout(() => {\n          triggerCallback(\"exit-complete\")\n          removeChild()\n        }, exitDurationRef.current)\n      })\n\n      return () => {\n        cancelAnimationFrame()\n        if (exitTimeout !== undefined) clearTimeout(exitTimeout)\n      }\n    }\n\n    // Enter transition\n\n    // Check if we need to prevent this specific entering cycle\n    if (preventMountTransition && !preventedMountTransition.current) {\n      // Mark initial transition as prevented and short-circuit.\n      preventedMountTransition.current = true\n      return\n    }\n\n    let enterTimeout: number | undefined\n\n    dispatch({ type: \"enter-before\" })\n    triggerCallback(\"enter\")\n\n    const cancelAnimationFrame = waitForAnimationFrame(() => {\n      dispatch({ type: \"enter-active\" })\n      triggerCallback(\"enter-active\")\n\n      enterTimeout = window.setTimeout(() => {\n        dispatch({ type: \"done\" })\n        triggerCallback(\"enter-complete\")\n      }, enterDurationRef.current)\n    })\n\n    return () => {\n      cancelAnimationFrame()\n      if (enterTimeout !== undefined) clearTimeout(enterTimeout)\n    }\n  }, [\n    shouldRender,\n    // This value is immutable after <TransitionGroup> is created, and does not change on re-renders.\n    preventMountTransition,\n    removeChild,\n    triggerCallback,\n  ])\n\n  useEffect(() => {\n    // Required for <StrictMode>, because we need to unset this token\n    // when the hooks are re-run. It's an imperative effect that we need to manage.\n    return () => {\n      preventedMountTransition.current = false\n    }\n  }, [])\n\n  return (\n    <TagName\n      ref={mergeRefs([elementRef, forwardedRef])}\n      className={clsx(className, s.TransitionGroupChild)}\n      data-transition-id={transitionId}\n      style={style}\n      data-entering={state.enter ? \"\" : undefined}\n      data-entering-active={state.enterActive ? \"\" : undefined}\n      data-exiting={state.exit ? \"\" : undefined}\n      data-exiting-active={state.exitActive ? \"\" : undefined}\n      data-interrupted={state.interrupted ? \"\" : undefined}\n    >\n      {children}\n    </TagName>\n  )\n}\n\nconst TransitionGroupChild = (props: TransitionGroupChildProps) => {\n  // Don't spread these out of props - pass all props to inner child\n  const { enterMountDelay, preventMountTransition } = props\n  // Mount gating occurs when enterMountDelay exists, and isn't initial mount\n  // Otherwise, this flag is a no-op and the TransitionChild mounts normally.\n  const mountDelay = !preventMountTransition && enterMountDelay != null ? enterMountDelay : null\n  const [mounted, setMounted] = useState(mountDelay == null)\n  useTimeout(() => setMounted(true), mounted ? null : mountDelay)\n\n  return mounted ? <TransitionGroupChildInner {...props} /> : null\n}\n\nexport type TransitionGroupProps = {\n  /** Components controlled by TransitionGroup rendering */\n  children: React.ReactNode\n  /** Determines the tag used by wrapping elements */\n  as?: \"div\" | \"span\"\n  /** Class passed to wrapping elements */\n  className?: string\n  /** Identifier passed to wrapping elements as `[data-transition-id]` */\n  transitionId?: string\n  /** Determines the amount of time that the enter state is applied during mounting */\n  enterDuration?: number\n  /** Determines the amount of time that the exit state is applied before unmounting */\n  exitDuration?: number\n  /**\n   * Determines if children should have an enter transition applied during mounting of the TransitionGroup.\n   * @default true\n   */\n  preventInitialTransition?: boolean\n  /** Delay in MS to wait before mounting a child. `null` for no delay (default). */\n  enterMountDelay?: number\n  /** Render children changes immediately, bypassing transition timings */\n  disableAnimations?: boolean\n  /** Determines how new children are added to the children array */\n  insertMethod?: \"append\" | \"prepend\"\n  /** Styles applied to wrapping elements */\n  style?: CSSProperties\n  /** Ref for the TransitionGroup */\n  ref?: React.Ref<unknown>\n} & Partial<TransitionGroupChildCallbacks>\n\ntype RenderChild = {\n  component: ReactElementWithKey\n  shouldRender: boolean\n  preventMountTransition?: boolean\n  removeChild: () => void\n} & TransitionGroupChildCallbacks\n\nexport const TransitionGroup = (props: TransitionGroupProps) => {\n  const {\n    ref: forwardedRef,\n    as: TagName = \"span\",\n    children,\n    className,\n    transitionId,\n    style,\n    enterDuration = 0,\n    exitDuration = 0,\n    preventInitialTransition = true,\n    enterMountDelay,\n    insertMethod = \"append\",\n    disableAnimations = getDisableAnimations(),\n  } = props\n  // Create stable, mutable references for all callbacks\n  const onEnter = useChildCallback(props.onEnter ?? noop)\n  const onEnterActive = useChildCallback(props.onEnterActive ?? noop)\n  const onEnterComplete = useChildCallback(props.onEnterComplete ?? noop)\n  const onExit = useChildCallback(props.onExit ?? noop)\n  const onExitActive = useChildCallback(props.onExitActive ?? noop)\n  const onExitComplete = useChildCallback(props.onExitComplete ?? noop)\n\n  // Ensure all children are provided with keys.\n  // Cannot reliably use Children.toArray() because `key` is processed: https://reactjs.org/docs/react-api.html#reactchildrentoarray\n  Children.forEach(children, (child) => {\n    // @ts-expect-error - We know `key` might not exist on certain types, that's why we're checking\n    if (child && !child.key) {\n      throw new Error(\"Child elements of <TransitionGroup /> must include a `key`\")\n    }\n  })\n\n  const createDefaultRenderChildProps = useCallback(\n    (child: ReactElementWithKey): RenderChild => ({\n      component: child,\n      shouldRender: true,\n      removeChild: () => {\n        setRenderChildren((currentRenderChildren) =>\n          currentRenderChildren.filter((c) => child.key !== c.component.key),\n        )\n      },\n      onEnter,\n      onEnterActive,\n      onEnterComplete,\n      onExit,\n      onExitActive,\n      onExitComplete,\n    }),\n    [onEnter, onEnterActive, onEnterComplete, onExit, onExitActive, onExitComplete],\n  )\n\n  const [renderChildren, setRenderChildren] = useState<RenderChild[]>((): RenderChild[] => {\n    return ChildrenWithKeys(children).map((child) => ({\n      ...createDefaultRenderChildProps(child),\n      // Lock this value to whatever the value was on initial render of the TransitionGroup.\n      // It doesn't make sense to change this once it is mounted.\n      preventMountTransition: preventInitialTransition,\n    }))\n  })\n\n  useLayoutEffect(() => {\n    setRenderChildren((currentRenderChildren): RenderChild[] => {\n      const propChildrenArray = ChildrenWithKeys(children)\n      return computeNextRenderChildren(\n        propChildrenArray,\n        currentRenderChildren,\n        createDefaultRenderChildProps,\n        insertMethod,\n      )\n    })\n  }, [children, insertMethod, createDefaultRenderChildProps])\n\n  // Prevent mistakes with forwardRef() by ensuring single child usage within the group.\n  assertSingleChildWhenRef(\"TransitionGroup\", forwardedRef, Children.count(children))\n\n  if (disableAnimations) {\n    return (\n      <>\n        {Children.map(children, (child) => (\n          <TagName\n            // @ts-expect-error -- TS is not happy about this forwardedRef, but it's fine.\n            ref={forwardedRef}\n            className={className}\n            style={style}\n            data-transition-id={transitionId}\n          >\n            {child}\n          </TagName>\n        ))}\n      </>\n    )\n  }\n\n  return (\n    <>\n      {renderChildren.map(({ component, ...restProps }) => (\n        <TransitionGroupChild\n          key={component.key}\n          {...restProps}\n          as={TagName}\n          className={className}\n          transitionId={transitionId}\n          enterDuration={enterDuration}\n          exitDuration={exitDuration}\n          enterMountDelay={enterMountDelay}\n          style={style}\n          ref={forwardedRef}\n        >\n          {component}\n        </TransitionGroupChild>\n      ))}\n    </>\n  )\n}\n"]}

package/dist/es/components/Transition/TransitionGroup.module.css

@@ -0,0 +1,4 @@
+@layer components {.TransitionGroupChild {
+  display: block;
+}
+}

package/dist/es/components/Transition/getDisableAnimations.js

@@ -0,0 +1,6 @@
+import { isTest } from "../../lib/constants";
+// By default, all tests will treat <TransitionGroup> as `disableAnimations={true}`,
+// removing the need to be aware of misc. async animations happening across tests.
+// We could add support for things like `prefers-reduced-motion` in the future here as well.
+export default () => isTest;
+//# sourceMappingURL=getDisableAnimations.js.map

package/dist/es/components/Transition/getDisableAnimations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getDisableAnimations.js","sourceRoot":"","sources":["../../../../src/components/Transition/getDisableAnimations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAE5C,oFAAoF;AACpF,kFAAkF;AAClF,4FAA4F;AAC5F,eAAe,GAAG,EAAE,CAAC,MAAM,CAAA","sourcesContent":["import { isTest } from \"../../lib/constants\"\n\n// By default, all tests will treat <TransitionGroup> as `disableAnimations={true}`,\n// removing the need to be aware of misc. async animations happening across tests.\n// We could add support for things like `prefers-reduced-motion` in the future here as well.\nexport default () => isTest\n"]}

package/dist/es/components/Transition/index.js

@@ -0,0 +1,6 @@
+export { Animate } from "./Animate";
+export { AnimateLayout } from "./AnimateLayout";
+export { AnimateLayoutGroup } from "./AnimateLayoutGroup";
+export { SlotTransitionGroup } from "./SlotTransitionGroup";
+export { TransitionGroup } from "./TransitionGroup";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Transition/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Transition/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAA;AACtD,OAAO,EAAE,aAAa,EAA2B,MAAM,iBAAiB,CAAA;AACxE,OAAO,EAAE,kBAAkB,EAAgC,MAAM,sBAAsB,CAAA;AACvF,OAAO,EAAE,mBAAmB,EAAiC,MAAM,uBAAuB,CAAA;AAC1F,OAAO,EAAE,eAAe,EAA6B,MAAM,mBAAmB,CAAA","sourcesContent":["export { Animate, type AnimateProps } from \"./Animate\"\nexport { AnimateLayout, type AnimateLayoutProps } from \"./AnimateLayout\"\nexport { AnimateLayoutGroup, type AnimateLayoutGroupProps } from \"./AnimateLayoutGroup\"\nexport { SlotTransitionGroup, type SlotTransitionGroupProps } from \"./SlotTransitionGroup\"\nexport { TransitionGroup, type TransitionGroupProps } from \"./TransitionGroup\"\n"]}

package/dist/es/components/Transition/shared.js

@@ -0,0 +1,43 @@
+import React, { Children, useCallback, useRef } from "react";
+import { isDev, isTest } from "../../lib/constants";
+export const NonNullChildren = (children) => Children.toArray(children).filter((child) => child !== null && child !== undefined);
+export const ChildrenWithKeys = (children, shouldThrow = false, componentName = "TransitionGroup") => {
+    const validChildren = [];
+    Children.forEach(children, (child) => {
+        if (child && typeof child === "object" && "key" in child && !!child.key) {
+            // @ts-expect-error -- The above conditional is enough coercion that the component is valid
+            validChildren.push(child);
+        }
+        else if (shouldThrow) {
+            throw new Error(`Child elements of <${componentName} /> must include a \`key\``);
+        }
+    });
+    return validChildren;
+};
+export const noop = () => { };
+export const useChildCallback = (cb) => {
+    const ref = useRef(cb);
+    ref.current = cb;
+    return useCallback((element) => ref.current(element), []);
+};
+export function computeNextRenderChildren(propChildrenArray, currentRenderChildren, createDefaultRenderChildProps, insertMethod) {
+    const propChildKeyMap = propChildrenArray.reduce((acc, child) => ({ ...acc, [child.key]: 1 }), {});
+    const currentRenderChildKeyMap = currentRenderChildren.reduce((acc, child) => ({ ...acc, [child.component.key]: 1 }), {});
+    const newRenderChildren = propChildrenArray
+        .filter((propChild) => !currentRenderChildKeyMap[propChild.key])
+        .map(createDefaultRenderChildProps);
+    const updatedCurrentChildren = currentRenderChildren.map((childProps) => ({
+        ...childProps,
+        component: propChildrenArray.find(({ key }) => key === childProps.component.key) || childProps.component,
+        shouldRender: !!propChildKeyMap[childProps.component.key],
+    }));
+    return insertMethod === "append"
+        ? updatedCurrentChildren.concat(newRenderChildren)
+        : newRenderChildren.concat(updatedCurrentChildren);
+}
+export function assertSingleChildWhenRef(componentName, ref, childrenCount) {
+    if ((isTest || isDev) && ref && childrenCount > 1) {
+        throw new Error(`Cannot use forwardRef with multiple children in <${componentName} />`);
+    }
+}
+//# sourceMappingURL=shared.js.map

package/dist/es/components/Transition/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../../../src/components/Transition/shared.ts"],"names":[],"mappings":"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","sourcesContent":["import React, { Children, useCallback, useRef } from \"react\"\nimport { isDev, isTest } from \"../../lib/constants\"\n\nexport type TransitionDefinition = {\n  opacity?: number\n  /** The horizontal translation value in pixels */\n  x?: number\n  /**  The horizontal vertical value in pixels */\n  y?: number\n  /** The opacity value ranging from 0 to 1. */\n  scale?: number\n  rotate?: number | string\n  skewX?: number | string\n  skewY?: number | string\n  blur?: number\n  duration?: number\n  delay?: number\n  timingFunction?: string\n}\n\nexport type InitialTransitionDefinition = Omit<\n  TransitionDefinition,\n  \"duration\" | \"delay\" | \"timingFunction\"\n>\n\nexport type LayoutTransitionDefinition = {\n  duration?: number\n  delay?: number\n  timingFunction?: string\n}\n\nexport type CallbackType =\n  | \"enter\"\n  | \"enter-active\"\n  | \"enter-complete\"\n  | \"exit\"\n  | \"exit-active\"\n  | \"exit-complete\"\n\n// Transition callbacks and types shared across implementations\nexport type TransitionGroupChildCallback = (element: HTMLDivElement) => void\n\nexport type TransitionGroupChildCallbacks = {\n  /** Callback fired when an enter animation is staged (e.g., component mounted to the DOM) */\n  onEnter: TransitionGroupChildCallback\n  /** Callback fired when an enter animation starts */\n  onEnterActive: TransitionGroupChildCallback\n  /** Callback fired when an enter animation completes */\n  onEnterComplete: TransitionGroupChildCallback\n  /** Callback fired when an exit animation is staged */\n  onExit: TransitionGroupChildCallback\n  /** Callback fired when an exit animation starts */\n  onExitActive: TransitionGroupChildCallback\n  /** Callback fired when an exit animation completes (e.g., component unmounted from the DOM) */\n  onExitComplete: TransitionGroupChildCallback\n}\n\nexport const NonNullChildren = (children: React.ReactNode) =>\n  Children.toArray(children).filter((child) => child !== null && child !== undefined)\n\n// Shared keyed-children and transition helpers\nexport interface ReactElementWithKey extends React.ReactElement {\n  key: string\n}\n\nexport const ChildrenWithKeys = (\n  children: React.ReactNode,\n  shouldThrow: boolean = false,\n  componentName: string = \"TransitionGroup\",\n): ReactElementWithKey[] => {\n  const validChildren: ReactElementWithKey[] = []\n  Children.forEach(children, (child) => {\n    if (child && typeof child === \"object\" && \"key\" in child && !!child.key) {\n      // @ts-expect-error -- The above conditional is enough coercion that the component is valid\n      validChildren.push(child)\n    } else if (shouldThrow) {\n      throw new Error(`Child elements of <${componentName} /> must include a \\`key\\``)\n    }\n  })\n  return validChildren\n}\n\nexport const noop = () => {}\n\nexport const useChildCallback = (cb: (el: HTMLDivElement) => void) => {\n  const ref = useRef(cb)\n  ref.current = cb\n  return useCallback<(el: HTMLDivElement) => void>((element) => ref.current(element), [])\n}\n\nexport type InsertMethod = \"append\" | \"prepend\"\n\nexport function computeNextRenderChildren<\n  RenderChild extends { component: ReactElementWithKey; shouldRender: boolean },\n>(\n  propChildrenArray: ReactElementWithKey[],\n  currentRenderChildren: RenderChild[],\n  createDefaultRenderChildProps: (child: ReactElementWithKey) => RenderChild,\n  insertMethod: InsertMethod,\n): RenderChild[] {\n  const propChildKeyMap = propChildrenArray.reduce<Record<string, number>>(\n    (acc, child) => ({ ...acc, [child.key]: 1 }),\n    {},\n  )\n  const currentRenderChildKeyMap = currentRenderChildren.reduce<Record<string, number>>(\n    (acc, child) => ({ ...acc, [child.component.key]: 1 }),\n    {},\n  )\n\n  const newRenderChildren: RenderChild[] = propChildrenArray\n    .filter((propChild) => !currentRenderChildKeyMap[propChild.key])\n    .map(createDefaultRenderChildProps)\n\n  const updatedCurrentChildren: RenderChild[] = currentRenderChildren.map((childProps) => ({\n    ...childProps,\n    component:\n      propChildrenArray.find(({ key }) => key === childProps.component.key) || childProps.component,\n    shouldRender: !!propChildKeyMap[childProps.component.key],\n  }))\n\n  return insertMethod === \"append\"\n    ? updatedCurrentChildren.concat(newRenderChildren)\n    : newRenderChildren.concat(updatedCurrentChildren)\n}\n\nexport function assertSingleChildWhenRef(\n  componentName: string,\n  ref: React.Ref<unknown> | undefined,\n  childrenCount: number,\n): void {\n  if ((isTest || isDev) && ref && childrenCount > 1) {\n    throw new Error(`Cannot use forwardRef with multiple children in <${componentName} />`)\n  }\n}\n"]}

package/dist/es/components/Transition/transitionReducer.js

@@ -0,0 +1,51 @@
+export const RESTING_TRANSITION_STATE = {
+    enter: false,
+    enterActive: false,
+    exit: false,
+    exitActive: false,
+    interrupted: false,
+};
+export const getInitialTransitionState = (preventMountTransition) => ({
+    ...RESTING_TRANSITION_STATE,
+    enter: !preventMountTransition,
+});
+export const transitionReducer = (state, action) => {
+    switch (action.type) {
+        case "enter-before":
+            return {
+                enter: true,
+                enterActive: false,
+                exit: false,
+                exitActive: false,
+                interrupted: state.interrupted || state.exit,
+            };
+        case "enter-active":
+            return {
+                enter: true,
+                enterActive: true,
+                exit: false,
+                exitActive: false,
+                interrupted: false,
+            };
+        case "exit-before":
+            return {
+                enter: false,
+                enterActive: false,
+                exit: true,
+                exitActive: false,
+                interrupted: state.interrupted || state.enter,
+            };
+        case "exit-active":
+            return {
+                enter: false,
+                enterActive: false,
+                exit: true,
+                exitActive: true,
+                interrupted: false,
+            };
+        case "done":
+        default:
+            return RESTING_TRANSITION_STATE;
+    }
+};
+//# sourceMappingURL=transitionReducer.js.map

package/dist/es/components/Transition/transitionReducer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transitionReducer.js","sourceRoot":"","sources":["../../../../src/components/Transition/transitionReducer.ts"],"names":[],"mappings":"AAeA,MAAM,CAAC,MAAM,wBAAwB,GAAoB;IACvD,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,KAAK;IACX,UAAU,EAAE,KAAK;IACjB,WAAW,EAAE,KAAK;CACnB,CAAA;AAED,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,sBAA+B,EAAmB,EAAE,CAAC,CAAC;IAC9F,GAAG,wBAAwB;IAC3B,KAAK,EAAE,CAAC,sBAAsB;CAC/B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,KAAsB,EACtB,MAA6B,EACZ,EAAE;IACnB,QAAQ,MAAM,CAAC,IAAI,EAAE,CAAC;QACpB,KAAK,cAAc;YACjB,OAAO;gBACL,KAAK,EAAE,IAAI;gBACX,WAAW,EAAE,KAAK;gBAClB,IAAI,EAAE,KAAK;gBACX,UAAU,EAAE,KAAK;gBACjB,WAAW,EAAE,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,IAAI;aAC7C,CAAA;QACH,KAAK,cAAc;YACjB,OAAO;gBACL,KAAK,EAAE,IAAI;gBACX,WAAW,EAAE,IAAI;gBACjB,IAAI,EAAE,KAAK;gBACX,UAAU,EAAE,KAAK;gBACjB,WAAW,EAAE,KAAK;aACnB,CAAA;QACH,KAAK,aAAa;YAChB,OAAO;gBACL,KAAK,EAAE,KAAK;gBACZ,WAAW,EAAE,KAAK;gBAClB,IAAI,EAAE,IAAI;gBACV,UAAU,EAAE,KAAK;gBACjB,WAAW,EAAE,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,KAAK;aAC9C,CAAA;QACH,KAAK,aAAa;YAChB,OAAO;gBACL,KAAK,EAAE,KAAK;gBACZ,WAAW,EAAE,KAAK;gBAClB,IAAI,EAAE,IAAI;gBACV,UAAU,EAAE,IAAI;gBAChB,WAAW,EAAE,KAAK;aACnB,CAAA;QACH,KAAK,MAAM,CAAC;QACZ;YACE,OAAO,wBAAwB,CAAA;IACnC,CAAC;AACH,CAAC,CAAA","sourcesContent":["export type TransitionState = {\n  enter: boolean\n  enterActive: boolean\n  exit: boolean\n  exitActive: boolean\n  interrupted: boolean\n}\n\nexport type TransitionStateAction =\n  | { type: \"enter-before\" }\n  | { type: \"enter-active\" }\n  | { type: \"exit-before\" }\n  | { type: \"exit-active\" }\n  | { type: \"done\" }\n\nexport const RESTING_TRANSITION_STATE: TransitionState = {\n  enter: false,\n  enterActive: false,\n  exit: false,\n  exitActive: false,\n  interrupted: false,\n}\n\nexport const getInitialTransitionState = (preventMountTransition: boolean): TransitionState => ({\n  ...RESTING_TRANSITION_STATE,\n  enter: !preventMountTransition,\n})\n\nexport const transitionReducer = (\n  state: TransitionState,\n  action: TransitionStateAction,\n): TransitionState => {\n  switch (action.type) {\n    case \"enter-before\":\n      return {\n        enter: true,\n        enterActive: false,\n        exit: false,\n        exitActive: false,\n        interrupted: state.interrupted || state.exit,\n      }\n    case \"enter-active\":\n      return {\n        enter: true,\n        enterActive: true,\n        exit: false,\n        exitActive: false,\n        interrupted: false,\n      }\n    case \"exit-before\":\n      return {\n        enter: false,\n        enterActive: false,\n        exit: true,\n        exitActive: false,\n        interrupted: state.interrupted || state.enter,\n      }\n    case \"exit-active\":\n      return {\n        enter: false,\n        enterActive: false,\n        exit: true,\n        exitActive: true,\n        interrupted: false,\n      }\n    case \"done\":\n    default:\n      return RESTING_TRANSITION_STATE\n  }\n}\n"]}

package/dist/es/components/UIProvider/UIProvider.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import {} from "react";
+import { UIProviderContext } from "./UIProviderContext";
+/**
+ * Shared context for all Storybook components - wrap your app in this
+ * provider to use Storybook components.
+ *
+ * It's pretty thin right now, we only use it to hold onto the component you
+ * use for rendering Links, but it could be expanded in the future.
+ */
+export function UIProvider({ children, linkComponent, }) {
+    return (_jsx(UIProviderContext.Provider, { value: { linkComponent }, children: children }));
+}
+//# sourceMappingURL=UIProvider.js.map