@evolve.ui/core-components 1.0.0

package/ContentPager-B9UIPahb.mjs

@@ -0,0 +1,138 @@
+import { t as nodeEnv } from "./nodeEnv-B4v61vkJ.mjs";
+import { cn } from "@evolve.ui/theme-system";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import useMeasure from "react-use-measure";
+import { atom, useSetAtom } from "jotai";
+import { animated, useSpring, useTransition } from "@react-spring/web";
+//#region src/ContentPager/components/Page.tsx
+const Page = ({ children, className, "data-testid": testId = "pager-content-page" }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		"data-testid": testId,
+		id: "content-pager-page",
+		children
+	});
+};
+//#endregion
+//#region src/ContentPager/ContentPager.tsx
+const AnimatedDiv = animated.div;
+const currentPageAtom = atom("");
+const ContentPager = ({ children, className, currentPage, "data-testid": testId = "content-pager", onTransitionEnd }) => {
+	const [initialPage, setInitialPage] = useState(currentPage);
+	const [modalContentHeight, setModalContentHeight] = useState(0);
+	const isTestEnv = nodeEnv === "test";
+	const isInitialRender = useRef(true);
+	const setCurrentPage = useSetAtom(currentPageAtom);
+	const [ref, { height, width }] = useMeasure();
+	const currentPageIndex = useMemo(() => children.findIndex((page) => page.props.name === currentPage), [children, currentPage]);
+	const currentPageComponent = useMemo(() => children[currentPageIndex], [children, currentPageIndex]);
+	const [previousPageIndex, setPreviousPageIndex] = useState(currentPageIndex);
+	const containerAnimatedStyles = useSpring({
+		config: {
+			friction: 32,
+			overshootClamping: true,
+			restDisplacementThreshold: .1,
+			restSpeedThreshold: 10,
+			tension: 280
+		},
+		height: isInitialRender.current ? modalContentHeight : initialPage === currentPage && modalContentHeight !== 0 ? modalContentHeight : height,
+		immediate: isTestEnv || isInitialRender.current
+	});
+	const { fromTransform, leaveTransform } = useMemo(() => {
+		const rightTransform = `translate(${width}px)`;
+		const leftTransform = `translate(-${width}px)`;
+		return {
+			fromTransform: currentPageIndex > previousPageIndex ? rightTransform : leftTransform,
+			leaveTransform: currentPageIndex > previousPageIndex ? leftTransform : rightTransform
+		};
+	}, [
+		currentPageIndex,
+		previousPageIndex,
+		width
+	]);
+	useEffect(() => {
+		if (initialPage === "") return;
+		if (initialPage !== currentPage) {
+			setInitialPage("");
+			setModalContentHeight(0);
+		}
+		if (isInitialRender.current) window.requestAnimationFrame(() => {
+			isInitialRender.current = false;
+		});
+	}, [
+		currentPage,
+		currentPageIndex,
+		initialPage
+	]);
+	useEffect(() => {
+		if (currentPage === initialPage) {
+			const modalElement = document.querySelector("[data-hui-id=\"Modal\"]");
+			const pageElement = document.querySelector("[data-hui-id=\"ContentPager\"] [data-page-name]");
+			if (modalElement && pageElement) setModalContentHeight(pageElement.scrollHeight + 1);
+		}
+	}, [
+		currentPage,
+		initialPage,
+		height
+	]);
+	useEffect(() => {
+		setCurrentPage(currentPage);
+	}, [currentPage, setCurrentPage]);
+	const transitions = useTransition([{
+		currentPage,
+		currentPageComponent
+	}], {
+		enter: {
+			opacity: 1,
+			transform: "translate(0px)"
+		},
+		from: {
+			opacity: 0,
+			transform: fromTransform
+		},
+		immediate: isInitialRender.current,
+		initial: {
+			opacity: 1,
+			transform: "translate(0px)"
+		},
+		keys: (page) => page.currentPage,
+		leave: {
+			opacity: 0,
+			transform: leaveTransform
+		},
+		onRest: () => {
+			setPreviousPageIndex(currentPageIndex);
+			if (onTransitionEnd) onTransitionEnd();
+		},
+		onStart: () => {
+			setCurrentPage(currentPage);
+		}
+	});
+	return /* @__PURE__ */ jsx(AnimatedDiv, {
+		className: cn("relative w-full overflow-hidden", className),
+		"data-hui-id": "ContentPager",
+		"data-testid": testId,
+		style: {
+			...containerAnimatedStyles,
+			height: containerAnimatedStyles.height
+		},
+		children: transitions(({ ...style }, page) => /* @__PURE__ */ jsx(AnimatedDiv, {
+			className: cn("absolute left-0 right-0 h-full"),
+			style: {
+				...style,
+				opacity: style.opacity,
+				position: "absolute"
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				"data-page-name": page.currentPage,
+				ref,
+				children: page.currentPageComponent
+			})
+		}))
+	});
+};
+//#endregion
+export { currentPageAtom as n, Page as r, ContentPager as t };
+
+//# sourceMappingURL=ContentPager-B9UIPahb.mjs.map

package/ContentPager-B9UIPahb.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentPager-B9UIPahb.mjs","names":[],"sources":["../src/ContentPager/components/Page.tsx","../src/ContentPager/ContentPager.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype PageProps = {\n    /** Page content */\n    children: React.ReactNode;\n    /** className __ALL__ exported components pass through a classname to the outermost component */\n    className?: string;\n    /** Adds a data-testid attribute to the dom element, used for end to end testing. */\n    'data-testid'?: string;\n    /** A unique page name, used by the parent <ContentPager /> for moving between pages */\n    name: string;\n};\n\nexport const Page = ({ children, className, 'data-testid': testId = 'pager-content-page' }: PageProps) => {\n    return (\n        <div\n            className={className}\n            data-testid={testId}\n            id=\"content-pager-page\"\n        >\n            {children}\n        </div>\n    );\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { animated, useSpring, useTransition } from '@react-spring/web';\nimport { atom, useSetAtom } from 'jotai';\nimport { ComponentProps, FC, HTMLProps, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\nimport useMeasure from 'react-use-measure';\n\nimport { nodeEnv } from '../utils/nodeEnv';\nimport { Page } from './components/Page';\n\n// react-spring 9.7.5's AnimatedComponent props drop `children` under TypeScript 6;\n// runtime behavior is unchanged — re-widen with a typed alias.\ntype AnimatedDivProps = Omit<HTMLProps<HTMLDivElement>, 'style'> & { style?: object };\nconst AnimatedDiv = animated.div as unknown as FC<AnimatedDivProps>;\n\nexport const currentPageAtom = atom<string>('');\n\ntype PagerProps = {\n    /** Page components */\n    children: ReactElement<ComponentProps<typeof Page>>[];\n    /** Custom styling for the outermost ContentPager containing element */\n    className?: string;\n    /** The currently visible page */\n    currentPage: string;\n    /** Adds a data-testid attribute to the dom element, used for end to end testing. */\n    'data-testid'?: string;\n    /** A callback to run when animation has completed. Useful for focusing.*/\n    onTransitionEnd?: () => void;\n};\n\nexport const ContentPager = ({\n    children,\n    className,\n    currentPage,\n    'data-testid': testId = 'content-pager',\n    onTransitionEnd,\n}: PagerProps) => {\n    // Add state for modal content height detection\n    const [initialPage, setInitialPage] = useState<string>(currentPage);\n    const [modalContentHeight, setModalContentHeight] = useState(0);\n    const isTestEnv = nodeEnv === 'test';\n    const isInitialRender = useRef(true);\n\n    const setCurrentPage = useSetAtom(currentPageAtom);\n\n    const [ref, { height, width }] = useMeasure();\n\n    const currentPageIndex = useMemo(\n        () => children.findIndex((page) => page.props.name === currentPage),\n        [children, currentPage]\n    );\n    const currentPageComponent = useMemo(() => children[currentPageIndex], [children, currentPageIndex]);\n\n    const [previousPageIndex, setPreviousPageIndex] = useState(currentPageIndex);\n\n    const containerAnimatedStyles = useSpring({\n        config: {\n            // Increase friction for less oscillation\n            friction: 32,\n            // Prevent spring from overshooting its target, eliminating final bounce\n            overshootClamping: true,\n            // End animation sooner when displacement is below this threshold (increased from 0.01)\n            restDisplacementThreshold: 0.1,\n            // End animation sooner when speed drops below this threshold (increased from 2)\n            restSpeedThreshold: 10,\n            // Increase tension slightly for snappier animations\n            tension: 280,\n        },\n        height: isInitialRender.current\n            ? modalContentHeight\n            : initialPage === currentPage && modalContentHeight !== 0\n              ? modalContentHeight\n              : height,\n        immediate: isTestEnv || isInitialRender.current,\n    });\n\n    const { fromTransform, leaveTransform } = useMemo(() => {\n        const rightTransform = `translate(${width}px)`;\n        const leftTransform = `translate(-${width}px)`;\n        const fromTransform = currentPageIndex > previousPageIndex ? rightTransform : leftTransform;\n        const leaveTransform = currentPageIndex > previousPageIndex ? leftTransform : rightTransform;\n\n        return { fromTransform, leaveTransform };\n    }, [currentPageIndex, previousPageIndex, width]);\n\n    useEffect(() => {\n        if (initialPage === '') {\n            return;\n        }\n\n        if (initialPage !== currentPage) {\n            setInitialPage('');\n            setModalContentHeight(0);\n        }\n        if (isInitialRender.current) {\n            window.requestAnimationFrame(() => {\n                isInitialRender.current = false;\n            });\n        }\n    }, [currentPage, currentPageIndex, initialPage]);\n\n    // Ensure that modal content height is detected as it has issues with the transition\n    useEffect(() => {\n        if (currentPage === initialPage) {\n            const modalElement = document.querySelector('[data-hui-id=\"Modal\"]');\n            const pageElement = document.querySelector(\n                '[data-hui-id=\"ContentPager\"] [data-page-name]'\n            ) as HTMLElement | null;\n\n            if (modalElement && pageElement) {\n                setModalContentHeight(pageElement.scrollHeight + 1);\n            }\n        }\n    }, [currentPage, initialPage, height]);\n\n    // Keep the current page atom in sync immediately, so portal actions can resolve visibility on first render\n    useEffect(() => {\n        setCurrentPage(currentPage);\n    }, [currentPage, setCurrentPage]);\n\n    const transitions = useTransition(\n        [\n            {\n                currentPage,\n                currentPageComponent,\n            },\n        ],\n        {\n            enter: {\n                opacity: 1,\n                transform: 'translate(0px)',\n            },\n            from: {\n                opacity: 0,\n                transform: fromTransform,\n            },\n            immediate: isInitialRender.current,\n            initial: {\n                opacity: 1,\n                transform: 'translate(0px)',\n            },\n            keys: (page) => page.currentPage,\n            leave: {\n                opacity: 0,\n                transform: leaveTransform,\n            },\n            onRest: () => {\n                setPreviousPageIndex(currentPageIndex);\n                if (onTransitionEnd) {\n                    onTransitionEnd();\n                }\n            },\n            onStart: () => {\n                setCurrentPage(currentPage);\n            },\n        }\n    );\n\n    return (\n        <AnimatedDiv\n            className={cn('relative w-full overflow-hidden', className)}\n            data-hui-id=\"ContentPager\"\n            data-testid={testId}\n            style={{\n                ...containerAnimatedStyles,\n                height: containerAnimatedStyles.height,\n            }}\n        >\n            {transitions(({ ...style }, page) => (\n                <AnimatedDiv\n                    className={cn('absolute left-0 right-0 h-full')}\n                    style={{\n                        ...style,\n                        opacity: style.opacity,\n                        position: 'absolute',\n                    }}\n                >\n                    <div\n                        data-page-name={page.currentPage}\n                        ref={ref}\n                    >\n                        {page.currentPageComponent}\n                    </div>\n                </AnimatedDiv>\n            ))}\n        </AnimatedDiv>\n    );\n};\n\nexport { Page };\n"],"mappings":"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"}

package/ContentPager-BJo1L64Y.cjs

@@ -0,0 +1,158 @@
+const require_rolldown_runtime = require("./rolldown-runtime-D6vf50IK.cjs");
+const require_nodeEnv = require("./nodeEnv-BdQ-HyQz.cjs");
+let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_use_measure = require("react-use-measure");
+react_use_measure = require_rolldown_runtime.__toESM(react_use_measure);
+let jotai = require("jotai");
+let _react_spring_web = require("@react-spring/web");
+//#region src/ContentPager/components/Page.tsx
+const Page = ({ children, className, "data-testid": testId = "pager-content-page" }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		"data-testid": testId,
+		id: "content-pager-page",
+		children
+	});
+};
+//#endregion
+//#region src/ContentPager/ContentPager.tsx
+const AnimatedDiv = _react_spring_web.animated.div;
+const currentPageAtom = (0, jotai.atom)("");
+const ContentPager = ({ children, className, currentPage, "data-testid": testId = "content-pager", onTransitionEnd }) => {
+	const [initialPage, setInitialPage] = (0, react.useState)(currentPage);
+	const [modalContentHeight, setModalContentHeight] = (0, react.useState)(0);
+	const isTestEnv = require_nodeEnv.nodeEnv === "test";
+	const isInitialRender = (0, react.useRef)(true);
+	const setCurrentPage = (0, jotai.useSetAtom)(currentPageAtom);
+	const [ref, { height, width }] = (0, react_use_measure.default)();
+	const currentPageIndex = (0, react.useMemo)(() => children.findIndex((page) => page.props.name === currentPage), [children, currentPage]);
+	const currentPageComponent = (0, react.useMemo)(() => children[currentPageIndex], [children, currentPageIndex]);
+	const [previousPageIndex, setPreviousPageIndex] = (0, react.useState)(currentPageIndex);
+	const containerAnimatedStyles = (0, _react_spring_web.useSpring)({
+		config: {
+			friction: 32,
+			overshootClamping: true,
+			restDisplacementThreshold: .1,
+			restSpeedThreshold: 10,
+			tension: 280
+		},
+		height: isInitialRender.current ? modalContentHeight : initialPage === currentPage && modalContentHeight !== 0 ? modalContentHeight : height,
+		immediate: isTestEnv || isInitialRender.current
+	});
+	const { fromTransform, leaveTransform } = (0, react.useMemo)(() => {
+		const rightTransform = `translate(${width}px)`;
+		const leftTransform = `translate(-${width}px)`;
+		return {
+			fromTransform: currentPageIndex > previousPageIndex ? rightTransform : leftTransform,
+			leaveTransform: currentPageIndex > previousPageIndex ? leftTransform : rightTransform
+		};
+	}, [
+		currentPageIndex,
+		previousPageIndex,
+		width
+	]);
+	(0, react.useEffect)(() => {
+		if (initialPage === "") return;
+		if (initialPage !== currentPage) {
+			setInitialPage("");
+			setModalContentHeight(0);
+		}
+		if (isInitialRender.current) window.requestAnimationFrame(() => {
+			isInitialRender.current = false;
+		});
+	}, [
+		currentPage,
+		currentPageIndex,
+		initialPage
+	]);
+	(0, react.useEffect)(() => {
+		if (currentPage === initialPage) {
+			const modalElement = document.querySelector("[data-hui-id=\"Modal\"]");
+			const pageElement = document.querySelector("[data-hui-id=\"ContentPager\"] [data-page-name]");
+			if (modalElement && pageElement) setModalContentHeight(pageElement.scrollHeight + 1);
+		}
+	}, [
+		currentPage,
+		initialPage,
+		height
+	]);
+	(0, react.useEffect)(() => {
+		setCurrentPage(currentPage);
+	}, [currentPage, setCurrentPage]);
+	const transitions = (0, _react_spring_web.useTransition)([{
+		currentPage,
+		currentPageComponent
+	}], {
+		enter: {
+			opacity: 1,
+			transform: "translate(0px)"
+		},
+		from: {
+			opacity: 0,
+			transform: fromTransform
+		},
+		immediate: isInitialRender.current,
+		initial: {
+			opacity: 1,
+			transform: "translate(0px)"
+		},
+		keys: (page) => page.currentPage,
+		leave: {
+			opacity: 0,
+			transform: leaveTransform
+		},
+		onRest: () => {
+			setPreviousPageIndex(currentPageIndex);
+			if (onTransitionEnd) onTransitionEnd();
+		},
+		onStart: () => {
+			setCurrentPage(currentPage);
+		}
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedDiv, {
+		className: (0, _evolve_ui_theme_system.cn)("relative w-full overflow-hidden", className),
+		"data-hui-id": "ContentPager",
+		"data-testid": testId,
+		style: {
+			...containerAnimatedStyles,
+			height: containerAnimatedStyles.height
+		},
+		children: transitions(({ ...style }, page) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedDiv, {
+			className: (0, _evolve_ui_theme_system.cn)("absolute left-0 right-0 h-full"),
+			style: {
+				...style,
+				opacity: style.opacity,
+				position: "absolute"
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-page-name": page.currentPage,
+				ref,
+				children: page.currentPageComponent
+			})
+		}))
+	});
+};
+//#endregion
+Object.defineProperty(exports, "ContentPager", {
+	enumerable: true,
+	get: function() {
+		return ContentPager;
+	}
+});
+Object.defineProperty(exports, "Page", {
+	enumerable: true,
+	get: function() {
+		return Page;
+	}
+});
+Object.defineProperty(exports, "currentPageAtom", {
+	enumerable: true,
+	get: function() {
+		return currentPageAtom;
+	}
+});
+
+//# sourceMappingURL=ContentPager-BJo1L64Y.cjs.map

package/ContentPager-BJo1L64Y.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentPager-BJo1L64Y.cjs","names":["animated","nodeEnv"],"sources":["../src/ContentPager/components/Page.tsx","../src/ContentPager/ContentPager.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype PageProps = {\n    /** Page content */\n    children: React.ReactNode;\n    /** className __ALL__ exported components pass through a classname to the outermost component */\n    className?: string;\n    /** Adds a data-testid attribute to the dom element, used for end to end testing. */\n    'data-testid'?: string;\n    /** A unique page name, used by the parent <ContentPager /> for moving between pages */\n    name: string;\n};\n\nexport const Page = ({ children, className, 'data-testid': testId = 'pager-content-page' }: PageProps) => {\n    return (\n        <div\n            className={className}\n            data-testid={testId}\n            id=\"content-pager-page\"\n        >\n            {children}\n        </div>\n    );\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { animated, useSpring, useTransition } from '@react-spring/web';\nimport { atom, useSetAtom } from 'jotai';\nimport { ComponentProps, FC, HTMLProps, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\nimport useMeasure from 'react-use-measure';\n\nimport { nodeEnv } from '../utils/nodeEnv';\nimport { Page } from './components/Page';\n\n// react-spring 9.7.5's AnimatedComponent props drop `children` under TypeScript 6;\n// runtime behavior is unchanged — re-widen with a typed alias.\ntype AnimatedDivProps = Omit<HTMLProps<HTMLDivElement>, 'style'> & { style?: object };\nconst AnimatedDiv = animated.div as unknown as FC<AnimatedDivProps>;\n\nexport const currentPageAtom = atom<string>('');\n\ntype PagerProps = {\n    /** Page components */\n    children: ReactElement<ComponentProps<typeof Page>>[];\n    /** Custom styling for the outermost ContentPager containing element */\n    className?: string;\n    /** The currently visible page */\n    currentPage: string;\n    /** Adds a data-testid attribute to the dom element, used for end to end testing. */\n    'data-testid'?: string;\n    /** A callback to run when animation has completed. Useful for focusing.*/\n    onTransitionEnd?: () => void;\n};\n\nexport const ContentPager = ({\n    children,\n    className,\n    currentPage,\n    'data-testid': testId = 'content-pager',\n    onTransitionEnd,\n}: PagerProps) => {\n    // Add state for modal content height detection\n    const [initialPage, setInitialPage] = useState<string>(currentPage);\n    const [modalContentHeight, setModalContentHeight] = useState(0);\n    const isTestEnv = nodeEnv === 'test';\n    const isInitialRender = useRef(true);\n\n    const setCurrentPage = useSetAtom(currentPageAtom);\n\n    const [ref, { height, width }] = useMeasure();\n\n    const currentPageIndex = useMemo(\n        () => children.findIndex((page) => page.props.name === currentPage),\n        [children, currentPage]\n    );\n    const currentPageComponent = useMemo(() => children[currentPageIndex], [children, currentPageIndex]);\n\n    const [previousPageIndex, setPreviousPageIndex] = useState(currentPageIndex);\n\n    const containerAnimatedStyles = useSpring({\n        config: {\n            // Increase friction for less oscillation\n            friction: 32,\n            // Prevent spring from overshooting its target, eliminating final bounce\n            overshootClamping: true,\n            // End animation sooner when displacement is below this threshold (increased from 0.01)\n            restDisplacementThreshold: 0.1,\n            // End animation sooner when speed drops below this threshold (increased from 2)\n            restSpeedThreshold: 10,\n            // Increase tension slightly for snappier animations\n            tension: 280,\n        },\n        height: isInitialRender.current\n            ? modalContentHeight\n            : initialPage === currentPage && modalContentHeight !== 0\n              ? modalContentHeight\n              : height,\n        immediate: isTestEnv || isInitialRender.current,\n    });\n\n    const { fromTransform, leaveTransform } = useMemo(() => {\n        const rightTransform = `translate(${width}px)`;\n        const leftTransform = `translate(-${width}px)`;\n        const fromTransform = currentPageIndex > previousPageIndex ? rightTransform : leftTransform;\n        const leaveTransform = currentPageIndex > previousPageIndex ? leftTransform : rightTransform;\n\n        return { fromTransform, leaveTransform };\n    }, [currentPageIndex, previousPageIndex, width]);\n\n    useEffect(() => {\n        if (initialPage === '') {\n            return;\n        }\n\n        if (initialPage !== currentPage) {\n            setInitialPage('');\n            setModalContentHeight(0);\n        }\n        if (isInitialRender.current) {\n            window.requestAnimationFrame(() => {\n                isInitialRender.current = false;\n            });\n        }\n    }, [currentPage, currentPageIndex, initialPage]);\n\n    // Ensure that modal content height is detected as it has issues with the transition\n    useEffect(() => {\n        if (currentPage === initialPage) {\n            const modalElement = document.querySelector('[data-hui-id=\"Modal\"]');\n            const pageElement = document.querySelector(\n                '[data-hui-id=\"ContentPager\"] [data-page-name]'\n            ) as HTMLElement | null;\n\n            if (modalElement && pageElement) {\n                setModalContentHeight(pageElement.scrollHeight + 1);\n            }\n        }\n    }, [currentPage, initialPage, height]);\n\n    // Keep the current page atom in sync immediately, so portal actions can resolve visibility on first render\n    useEffect(() => {\n        setCurrentPage(currentPage);\n    }, [currentPage, setCurrentPage]);\n\n    const transitions = useTransition(\n        [\n            {\n                currentPage,\n                currentPageComponent,\n            },\n        ],\n        {\n            enter: {\n                opacity: 1,\n                transform: 'translate(0px)',\n            },\n            from: {\n                opacity: 0,\n                transform: fromTransform,\n            },\n            immediate: isInitialRender.current,\n            initial: {\n                opacity: 1,\n                transform: 'translate(0px)',\n            },\n            keys: (page) => page.currentPage,\n            leave: {\n                opacity: 0,\n                transform: leaveTransform,\n            },\n            onRest: () => {\n                setPreviousPageIndex(currentPageIndex);\n                if (onTransitionEnd) {\n                    onTransitionEnd();\n                }\n            },\n            onStart: () => {\n                setCurrentPage(currentPage);\n            },\n        }\n    );\n\n    return (\n        <AnimatedDiv\n            className={cn('relative w-full overflow-hidden', className)}\n            data-hui-id=\"ContentPager\"\n            data-testid={testId}\n            style={{\n                ...containerAnimatedStyles,\n                height: containerAnimatedStyles.height,\n            }}\n        >\n            {transitions(({ ...style }, page) => (\n                <AnimatedDiv\n                    className={cn('absolute left-0 right-0 h-full')}\n                    style={{\n                        ...style,\n                        opacity: style.opacity,\n                        position: 'absolute',\n                    }}\n                >\n                    <div\n                        data-page-name={page.currentPage}\n                        ref={ref}\n                    >\n                        {page.currentPageComponent}\n                    </div>\n                </AnimatedDiv>\n            ))}\n        </AnimatedDiv>\n    );\n};\n\nexport { Page };\n"],"mappings":"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"}

package/ContentPager-DuxgJP42.d.mts

@@ -0,0 +1,37 @@
+import * as React$1 from "react";
+import { ComponentProps, ReactElement } from "react";
+
+//#region src/ContentPager/components/Page.d.ts
+type PageProps = {
+  /** Page content */children: React$1.ReactNode; /** className __ALL__ exported components pass through a classname to the outermost component */
+  className?: string; /** Adds a data-testid attribute to the dom element, used for end to end testing. */
+  'data-testid'?: string; /** A unique page name, used by the parent <ContentPager /> for moving between pages */
+  name: string;
+};
+declare const Page: ({
+  children,
+  className,
+  "data-testid": testId
+}: PageProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+//#region src/ContentPager/ContentPager.d.ts
+declare const currentPageAtom: import("jotai").PrimitiveAtom<string> & {
+  init: string;
+};
+type PagerProps = {
+  /** Page components */children: ReactElement<ComponentProps<typeof Page>>[]; /** Custom styling for the outermost ContentPager containing element */
+  className?: string; /** The currently visible page */
+  currentPage: string; /** Adds a data-testid attribute to the dom element, used for end to end testing. */
+  'data-testid'?: string; /** A callback to run when animation has completed. Useful for focusing.*/
+  onTransitionEnd?: () => void;
+};
+declare const ContentPager: ({
+  children,
+  className,
+  currentPage,
+  "data-testid": testId,
+  onTransitionEnd
+}: PagerProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { currentPageAtom as n, Page as r, ContentPager as t };
+//# sourceMappingURL=ContentPager-DuxgJP42.d.mts.map

package/ContentPager-DuxgJP42.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentPager-DuxgJP42.d.mts","names":[],"sources":["../src/ContentPager/components/Page.tsx","../src/ContentPager/ContentPager.tsx"],"mappings":";;;;KAEK,SAAA;qBAED,QAAA,EAAU,OAAA,CAAM,SAAS,EAFxB;EAID,SAAA;EAEA,aAAA,WAJA;EAMA,IAAA;AAAA;AAAA,cAGS,IAAA;EAAQ,QAAA;EAAA,SAAA;EAAA,eAAA;AAAA,GAAuE,SAAA,iCAAS,GAAA,CAAA,OAAA;;;cCCxF,eAAA,kBAAe,aAAA;EAAA,IAAA;AAAA;AAAA,KAEvB,UAAA;wBAED,QAAA,EAAU,YAAA,CAAa,cAAA,QAAsB,IAAA,MDd7C;ECgBA,SAAA,WDhBgB;ECkBhB,WAAA,UDdA;ECgBA,aAAA,WDdI;ECgBJ,eAAA;AAAA;AAAA,cAGS,YAAA;EAAgB,QAAA;EAAA,SAAA;EAAA,WAAA;EAAA,eAAA,MAAA;EAAA;AAAA,GAM1B,UAAA,iCAAU,GAAA,CAAA,OAAA"}