@evolve.ui/core-components 1.0.0

package/AutomatedCarousel-ylYqkHPX.cjs

@@ -0,0 +1,281 @@
+const require_rolldown_runtime = require("./rolldown-runtime-D6vf50IK.cjs");
+const require_Icons = require("./Icons.cjs");
+const require_windowSizeProvider = require("./windowSizeProvider-BMaATFiZ.cjs");
+const require_Carousel = require("./Carousel-Du89BCCK.cjs");
+const require_IconButton = require("./IconButton.cjs");
+const require_hooks_usePrevious = require("./hooks/usePrevious.cjs");
+let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let ms = require("ms");
+ms = require_rolldown_runtime.__toESM(ms);
+//#region src/AutomatedCarousel/automatedCarousel.types.ts
+const SHOW_CAROUSEL_PAGE_DURATION = (0, ms.default)("6s");
+//#endregion
+//#region src/AutomatedCarousel/components/CarouselProgressBar/components/CarouselProgressBarUnit/CarouselProgressBarUnit.tsx
+const MAX_PROGRESS_CAP = 100;
+const PERCENT_CONVERSION = 100;
+const CarouselProgressBarUnit = ({ isPausedOverride, onClick, onComplete, page, progressState }) => {
+	const isDesktop = require_windowSizeProvider.useWindowIsDesktop();
+	const animationStartTime = (0, react.useRef)(0);
+	const [progress, setProgress] = (0, react.useState)(progressState === 0 ? 100 : 0);
+	const isPaused = (0, react.useRef)(isPausedOverride);
+	const pausedTime = (0, react.useRef)(0);
+	const unpausedTime = (0, react.useRef)(0);
+	const [isComplete, setIsComplete] = (0, react.useState)(false);
+	const clearRunningInterval = (0, react.useCallback)(() => {
+		if (animationInterval.current) {
+			clearInterval(animationInterval.current);
+			animationInterval.current = null;
+		}
+	}, []);
+	(0, react.useEffect)(() => {
+		return () => {
+			clearRunningInterval();
+		};
+	}, [clearRunningInterval]);
+	(0, react.useEffect)(() => {
+		if (isComplete) {
+			onComplete();
+			clearRunningInterval();
+		}
+	}, [
+		clearRunningInterval,
+		isComplete,
+		onComplete
+	]);
+	const animationInterval = (0, react.useRef)(null);
+	const runAnimation = (0, react.useCallback)(() => {
+		if (animationInterval.current) return;
+		animationInterval.current = setInterval(() => {
+			if (isPaused.current) return;
+			const now = Date.now();
+			let startTime = animationStartTime.current;
+			if (unpausedTime.current) {
+				const pauseDuration = unpausedTime.current - pausedTime.current;
+				startTime += pauseDuration;
+			}
+			const newProgress = (now - startTime) / SHOW_CAROUSEL_PAGE_DURATION * PERCENT_CONVERSION;
+			const cappedProgress = Math.min(newProgress, MAX_PROGRESS_CAP);
+			if (cappedProgress < MAX_PROGRESS_CAP) requestAnimationFrame(() => {
+				setProgress(cappedProgress);
+			});
+			else if (animationInterval.current) setIsComplete(true);
+		}, 100);
+	}, []);
+	(0, react.useEffect)(() => {
+		if (progressState === 1 && !Boolean(animationStartTime.current)) {
+			unpausedTime.current = 0;
+			animationStartTime.current = Date.now();
+			runAnimation();
+		}
+	}, [progressState, runAnimation]);
+	(0, react.useEffect)(() => {
+		isPaused.current = isPausedOverride;
+		if (isPausedOverride) {
+			pausedTime.current = Date.now();
+			clearRunningInterval();
+		} else if (progressState === 1) runAnimation();
+	}, [
+		clearRunningInterval,
+		isPausedOverride,
+		progressState,
+		runAnimation
+	]);
+	const wasPaused = require_hooks_usePrevious.usePrevious(isPausedOverride);
+	(0, react.useEffect)(() => {
+		if (wasPaused && !isPausedOverride) unpausedTime.current = Date.now();
+	}, [isPausedOverride, wasPaused]);
+	const sharedStyles = "h-[5px] rounded-lg";
+	if (!isDesktop) return;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"aria-label": `Go to page #${page}`,
+		className: (0, _evolve_ui_theme_system.cn)(sharedStyles, "min-w-min max-w-lg hover:cursor-pointer", {
+			"bg-icon-disabled": progressState !== 1,
+			"bg-primary-100": progressState === 1
+		}),
+		onClick: () => {
+			onClick();
+		},
+		onKeyUp: ({ key }) => {
+			if (key === "Enter") onClick();
+		},
+		role: "button",
+		tabIndex: 0,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, _evolve_ui_theme_system.cn)(sharedStyles, `bg-icon-info duration-${SHOW_CAROUSEL_PAGE_DURATION} w-[${progress}%] ease-linear`),
+			"data-testid": "carousel-progress-bar-unit",
+			style: { width: `${progress}%` }
+		})
+	});
+};
+//#endregion
+//#region src/AutomatedCarousel/components/CarouselProgressBar/CarouselProgressBar.tsx
+const CarouselProgressBar = ({ currentFreeScrollPage, currentPage, goToPage, isPaused, pageCount, setPausedState, style }) => {
+	const isDesktop = require_windowSizeProvider.useWindowIsDesktop();
+	const previousPageCount = require_hooks_usePrevious.usePrevious(pageCount);
+	const pageBarUnits = (0, react.useMemo)(() => {
+		const currentPageInUse = isPaused ? currentFreeScrollPage : currentPage;
+		const units = [];
+		for (let i = 0; i < pageCount; i++) {
+			const onClickProgressBarUnit = () => {
+				goToPage(i);
+				setPausedState(true);
+			};
+			const onCompleteProgressBarUnit = () => {
+				goToPage((i + 1) % pageCount);
+			};
+			if (i < currentPageInUse) units.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CarouselProgressBarUnit, {
+				isPausedOverride: isPaused,
+				onClick: onClickProgressBarUnit,
+				onComplete: onCompleteProgressBarUnit,
+				page: i + 1,
+				progressState: 0
+			}, `page-bar-unit-past-${i}-past`));
+			else if (i === currentPageInUse) units.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CarouselProgressBarUnit, {
+				isPausedOverride: isPaused,
+				onClick: onClickProgressBarUnit,
+				onComplete: onCompleteProgressBarUnit,
+				page: i + 1,
+				progressState: 1
+			}, `page-bar-unit-current-${i}-current`));
+			else units.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CarouselProgressBarUnit, {
+				isPausedOverride: isPaused,
+				onClick: onClickProgressBarUnit,
+				onComplete: onCompleteProgressBarUnit,
+				page: i + 1,
+				progressState: 2
+			}, `page-bar-unit-future-${i}-future`));
+		}
+		return units;
+	}, [
+		currentFreeScrollPage,
+		currentPage,
+		goToPage,
+		isPaused,
+		pageCount,
+		setPausedState
+	]);
+	const togglePause = (0, react.useCallback)(() => {
+		setPausedState(!isPaused);
+	}, [isPaused, setPausedState]);
+	(0, react.useEffect)(() => {
+		if (pageCount !== previousPageCount) {
+			goToPage(0);
+			setPausedState(false);
+		}
+	}, [
+		goToPage,
+		pageCount,
+		previousPageCount,
+		setPausedState
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "mx-xl grid items-center gap-xs xsMax:m-0 xsMax:flex",
+		style: { gridTemplateColumns: `repeat(${pageCount + 1}, minmax(0, 32px))` },
+		children: [pageBarUnits, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex justify-center",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+				"data-testid": "automated-carousel-toggle-pause-button",
+				icon: isPaused ? require_Icons.Play : require_Icons.Pause,
+				iconStyle: "fill",
+				onClick: togglePause,
+				size: isDesktop ? "xs" : "sm",
+				style,
+				variant: "filled"
+			})
+		})]
+	});
+};
+//#endregion
+//#region src/AutomatedCarousel/AutomatedCarousel.tsx
+const AutomatedCarousel = ({ cardOffset = 0, cards, expectedPageCount, fullPage = true, progressBarGap, style = "primary", title, ...rest }) => {
+	const [currentPage, setCurrentPage] = (0, react.useState)(0);
+	const [currentFreeScrollPage, setCurrentFreeScrollPage] = (0, react.useState)(0);
+	(0, react.useEffect)(() => {
+		setCurrentFreeScrollPage(currentPage);
+	}, [currentPage]);
+	const goToPageAndContinue = (0, react.useCallback)((newPage) => {
+		setCurrentPage(newPage);
+	}, []);
+	const goToPageAndPause = (0, react.useCallback)(({ buttonDirection, oneBasedPageNumber }) => {
+		if (buttonDirection) setCurrentPage(currentFreeScrollPage + buttonDirection);
+		else setCurrentPage(oneBasedPageNumber - 1);
+		setIsPaused(true);
+	}, [currentFreeScrollPage]);
+	const getInitialPageCount = () => {
+		if (expectedPageCount !== void 0) return expectedPageCount;
+		return fullPage ? cards.length : 0;
+	};
+	const [numberOfPages, setNumberOfPages] = (0, react.useState)(getInitialPageCount());
+	const setPageCount = (0, react.useCallback)((pageCount) => {
+		setNumberOfPages(pageCount);
+	}, []);
+	(0, react.useEffect)(() => {
+		setNumberOfPages(getInitialPageCount());
+	}, [
+		fullPage,
+		cards.length,
+		expectedPageCount
+	]);
+	const oneBasedCarouselPage = currentPage + 1;
+	const [isPaused, setIsPaused] = (0, react.useState)(true);
+	const wasPaused = require_hooks_usePrevious.usePrevious(isPaused);
+	const progressBarClassName = (0, react.useMemo)(() => {
+		if (Boolean(progressBarGap)) return `w-fit flex mx-auto mt-${progressBarGap}`;
+		return (0, _evolve_ui_theme_system.cn)("absolute bottom-lg left-0 flex w-full justify-center", "xsMax:bottom-xs xsMax:left-[calc(100%-38px)] xsMax:block xsMax:transition-all xsMax:duration-500");
+	}, [progressBarGap]);
+	const onScrollCarousel = (0, react.useCallback)((currentScrollPage) => {
+		setCurrentFreeScrollPage(currentScrollPage);
+		setIsPaused(true);
+	}, []);
+	(0, react.useEffect)(() => {
+		setIsPaused(!document.readyState);
+	}, []);
+	(0, react.useEffect)(() => {
+		if (isPaused && !wasPaused) setCurrentFreeScrollPage(currentPage);
+		else if (!isPaused && wasPaused) setCurrentPage(currentFreeScrollPage);
+	}, [
+		currentFreeScrollPage,
+		currentPage,
+		isPaused,
+		wasPaused
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: "relative",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Carousel.Carousel, {
+			cardOffset,
+			cards,
+			fullPage,
+			goToPage: goToPageAndPause,
+			onScroll: onScrollCarousel,
+			providePageCount: setPageCount,
+			selectedPage: oneBasedCarouselPage,
+			shouldGoToPageBreakpointsOnScrolling: !isPaused,
+			showPagination: false,
+			title,
+			...rest
+		}), numberOfPages > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: progressBarClassName,
+			"data-testid": `${title}.automated-carousel.progress-bar-container`,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CarouselProgressBar, {
+				currentFreeScrollPage,
+				currentPage,
+				goToPage: goToPageAndContinue,
+				isPaused,
+				pageCount: numberOfPages,
+				setPausedState: setIsPaused,
+				style
+			})
+		})]
+	});
+};
+//#endregion
+Object.defineProperty(exports, "AutomatedCarousel", {
+	enumerable: true,
+	get: function() {
+		return AutomatedCarousel;
+	}
+});
+
+//# sourceMappingURL=AutomatedCarousel-ylYqkHPX.cjs.map

package/AutomatedCarousel-ylYqkHPX.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutomatedCarousel-ylYqkHPX.cjs","names":["useWindowIsDesktop","usePrevious","useWindowIsDesktop","usePrevious","IconButton","Play","Pause","usePrevious","Carousel"],"sources":["../src/AutomatedCarousel/automatedCarousel.types.ts","../src/AutomatedCarousel/components/CarouselProgressBar/components/CarouselProgressBarUnit/CarouselProgressBarUnit.tsx","../src/AutomatedCarousel/components/CarouselProgressBar/CarouselProgressBar.tsx","../src/AutomatedCarousel/AutomatedCarousel.tsx"],"sourcesContent":["import ms from 'ms';\n\nexport const SHOW_CAROUSEL_PAGE_DURATION = ms('6s');\n\nexport const CAROUSEL_PROGRESS_BAR_GAP_SIZE = 8;\nexport const CAROUSEL_PAUSE_BUTTON_WIDTH = 20;\nexport const MAXIMUM_CAROUSEL_PROGRESS_BAR_UNIT_WIDTH = 32;\n","import { cn } from '@evolve.ui/theme-system';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { usePrevious } from '../../../../../hooks/usePrevious';\nimport { useWindowIsDesktop } from '../../../../../providers';\nimport { SHOW_CAROUSEL_PAGE_DURATION } from '../../../../automatedCarousel.types';\n\nconst MAX_PROGRESS_CAP = 100;\nconst PERCENT_CONVERSION = 100;\nexport const ANIMATION_STEP_DURATION = 100; // in milliseconds\n\nexport enum CarouselProgressBarUnitProgressState {\n    Past,\n    Current,\n    Future,\n}\n\ntype Props = {\n    isPausedOverride: boolean;\n    onClick: () => void;\n    onComplete: () => void;\n    page: number;\n    progressState: CarouselProgressBarUnitProgressState;\n};\n\nexport const CarouselProgressBarUnit = ({ isPausedOverride, onClick, onComplete, page, progressState }: Props) => {\n    const isDesktop = useWindowIsDesktop();\n\n    const animationStartTime = useRef(0);\n    const [progress, setProgress] = useState(progressState === CarouselProgressBarUnitProgressState.Past ? 100 : 0);\n    const isPaused = useRef(isPausedOverride);\n    const pausedTime = useRef(0);\n    const unpausedTime = useRef(0);\n    const [isComplete, setIsComplete] = useState(false);\n\n    const clearRunningInterval = useCallback(() => {\n        if (animationInterval.current) {\n            clearInterval(animationInterval.current);\n            animationInterval.current = null;\n        }\n    }, []);\n\n    useEffect(() => {\n        return () => {\n            clearRunningInterval();\n        };\n    }, [clearRunningInterval]);\n\n    useEffect(() => {\n        if (isComplete) {\n            onComplete();\n            clearRunningInterval();\n        }\n    }, [clearRunningInterval, isComplete, onComplete]);\n\n    const animationInterval = useRef<ReturnType<typeof setInterval>>(null);\n\n    const runAnimation = useCallback(() => {\n        if (animationInterval.current) {\n            return;\n        }\n        animationInterval.current = setInterval(() => {\n            if (isPaused.current) {\n                return;\n            }\n            const now = Date.now();\n            let startTime = animationStartTime.current;\n            if (unpausedTime.current) {\n                const pauseDuration = unpausedTime.current - pausedTime.current;\n                startTime += pauseDuration;\n            }\n            const newProgress = ((now - startTime) / SHOW_CAROUSEL_PAGE_DURATION) * PERCENT_CONVERSION;\n            const cappedProgress = Math.min(newProgress, MAX_PROGRESS_CAP);\n            if (cappedProgress < MAX_PROGRESS_CAP) {\n                requestAnimationFrame(() => {\n                    setProgress(cappedProgress);\n                });\n            } else if (animationInterval.current) {\n                setIsComplete(true);\n            }\n        }, ANIMATION_STEP_DURATION);\n    }, []);\n\n    useEffect(() => {\n        if (progressState === CarouselProgressBarUnitProgressState.Current && !Boolean(animationStartTime.current)) {\n            unpausedTime.current = 0;\n            animationStartTime.current = Date.now();\n            runAnimation();\n        }\n    }, [progressState, runAnimation]);\n\n    useEffect(() => {\n        isPaused.current = isPausedOverride;\n        if (isPausedOverride) {\n            pausedTime.current = Date.now();\n            clearRunningInterval();\n        } else if (progressState === CarouselProgressBarUnitProgressState.Current) {\n            runAnimation();\n        }\n    }, [clearRunningInterval, isPausedOverride, progressState, runAnimation]);\n\n    const wasPaused = usePrevious(isPausedOverride);\n    useEffect(() => {\n        if (wasPaused && !isPausedOverride) {\n            unpausedTime.current = Date.now();\n        }\n    }, [isPausedOverride, wasPaused]);\n\n    const sharedStyles = 'h-[5px] rounded-lg';\n\n    if (!isDesktop) {\n        // This probably looks very weird. The initial impression you may have,\n        // looking at this code, is that the parent component should simply not\n        // render this component at all.\n        // BUT this unit component is running the animation to fill the bar that,\n        // when completed, will trigger the carousel to slide to the next card.\n        // \"Well, then,\" you say, smug look on your face, \"Why not have a duration\n        // in the parent component that handles the card switching?\"\n        // And that seems reasonable. In fact, that was how it worked in a previous\n        // iteration.\n        // HOWEVER, we still need to have the interval running here to update\n        // the progress bar animation. Which resulted in trying to manage and\n        // synchronize two intervals in two different places (actually more,\n        // given that there are multiple progress bars).\n        // As such, the easiest solution is to have the bar units finish their\n        // animation, alert the parent that they've completed, and then the parent\n        // slides to the next card and tells the next progress bar to start their\n        // animation.\n        // And THAT, dear reader, is why this implementation is the best solution\n        // for this component. It will make it a lot easier to maintain.\n        // I can assure you, with little hyperbole any other solution is\n        // more complex and will bring you nothing but weeks of absolutely\n        // frustrating development.\n        return;\n    }\n\n    return (\n        <div\n            aria-label={`Go to page #${page}`}\n            className={cn(sharedStyles, 'min-w-min max-w-lg hover:cursor-pointer', {\n                'bg-icon-disabled': progressState !== CarouselProgressBarUnitProgressState.Current,\n                'bg-primary-100': progressState === CarouselProgressBarUnitProgressState.Current,\n            })}\n            onClick={() => {\n                onClick();\n            }}\n            onKeyUp={({ key }) => {\n                if (key === 'Enter') {\n                    onClick();\n                }\n            }}\n            role=\"button\"\n            tabIndex={0}\n        >\n            <div\n                className={cn(\n                    sharedStyles,\n                    `bg-icon-info duration-${SHOW_CAROUSEL_PAGE_DURATION} w-[${progress}%] ease-linear`\n                )}\n                data-testid=\"carousel-progress-bar-unit\"\n                style={{ width: `${progress}%` }}\n            />\n        </div>\n    );\n};\n","import { ReactNode, useCallback, useEffect, useMemo } from 'react';\n\nimport { usePrevious } from '../../../hooks/usePrevious';\nimport { IconButton } from '../../../IconButton/IconButton';\nimport { Pause, Play } from '../../../Icons';\nimport { useWindowIsDesktop } from '../../../providers';\nimport {\n    CarouselProgressBarUnit,\n    CarouselProgressBarUnitProgressState,\n} from './components/CarouselProgressBarUnit/CarouselProgressBarUnit';\n\ntype Props = {\n    /**\n     * If the user is scrolling/dragging freely, this is the page they're currently on\n     */\n    currentFreeScrollPage: number;\n    /**\n     * The current page of the carousel\n     */\n    currentPage: number;\n    /**\n     * Bring the slider to the selected page\n     * @param pageIndex Index of the page to view\n     */\n    goToPage: (pageIndex: number) => void;\n    /**\n     * If the parent determines the pause should be a certain state, we listen\n     */\n    isPaused: boolean;\n    /**\n     * Total number of pages\n     */\n    pageCount: number;\n    /**\n     * Called when the progress bar toggles the pause state\n     * @param isPaused\n     */\n    setPausedState: (isPaused: boolean) => void;\n    /**\n     * Changes the styling for the pause/play buttons to better reflect various backgrounds\n     */\n    style: 'primary' | 'inverse';\n};\n\nexport const CarouselProgressBar = ({\n    currentFreeScrollPage,\n    currentPage,\n    goToPage,\n    isPaused,\n    pageCount,\n    setPausedState,\n    style,\n}: Props) => {\n    const isDesktop = useWindowIsDesktop();\n    const previousPageCount = usePrevious(pageCount);\n\n    const pageBarUnits = useMemo(() => {\n        const currentPageInUse = isPaused ? currentFreeScrollPage : currentPage;\n        const units: ReactNode[] = [];\n\n        for (let i = 0; i < pageCount; i++) {\n            const onClickProgressBarUnit = () => {\n                goToPage(i);\n                setPausedState(true);\n            };\n\n            const onCompleteProgressBarUnit = () => {\n                goToPage((i + 1) % pageCount);\n            };\n\n            if (i < currentPageInUse) {\n                units.push(\n                    <CarouselProgressBarUnit\n                        isPausedOverride={isPaused}\n                        key={`page-bar-unit-past-${i}-past`}\n                        onClick={onClickProgressBarUnit}\n                        onComplete={onCompleteProgressBarUnit}\n                        page={i + 1}\n                        progressState={CarouselProgressBarUnitProgressState.Past}\n                    />\n                );\n            } else if (i === currentPageInUse) {\n                units.push(\n                    <CarouselProgressBarUnit\n                        isPausedOverride={isPaused}\n                        key={`page-bar-unit-current-${i}-current`}\n                        onClick={onClickProgressBarUnit}\n                        onComplete={onCompleteProgressBarUnit}\n                        page={i + 1}\n                        progressState={CarouselProgressBarUnitProgressState.Current}\n                    />\n                );\n            } else {\n                units.push(\n                    <CarouselProgressBarUnit\n                        isPausedOverride={isPaused}\n                        key={`page-bar-unit-future-${i}-future`}\n                        onClick={onClickProgressBarUnit}\n                        onComplete={onCompleteProgressBarUnit}\n                        page={i + 1}\n                        progressState={CarouselProgressBarUnitProgressState.Future}\n                    />\n                );\n            }\n        }\n        return units;\n    }, [currentFreeScrollPage, currentPage, goToPage, isPaused, pageCount, setPausedState]);\n\n    const togglePause = useCallback(() => {\n        setPausedState(!isPaused);\n    }, [isPaused, setPausedState]);\n\n    useEffect(() => {\n        if (pageCount !== previousPageCount) {\n            goToPage(0);\n            setPausedState(false);\n        }\n    }, [goToPage, pageCount, previousPageCount, setPausedState]);\n\n    return (\n        <div\n            className=\"mx-xl grid items-center gap-xs xsMax:m-0 xsMax:flex\"\n            style={{ gridTemplateColumns: `repeat(${pageCount + 1}, minmax(0, 32px))` }}\n        >\n            {pageBarUnits}\n            <div className=\"flex justify-center\">\n                <IconButton\n                    data-testid=\"automated-carousel-toggle-pause-button\"\n                    icon={isPaused ? Play : Pause}\n                    iconStyle=\"fill\"\n                    onClick={togglePause}\n                    size={isDesktop ? 'xs' : 'sm'}\n                    style={style}\n                    variant=\"filled\"\n                />\n            </div>\n        </div>\n    );\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { ComponentProps, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { Carousel } from '../Carousel';\nimport { usePrevious } from '../hooks/usePrevious';\nimport { CarouselProgressBar } from './components/CarouselProgressBar/CarouselProgressBar';\n\ntype Props = Omit<\n    ComponentProps<typeof Carousel>,\n    'goToPage' | 'providePageCount' | 'selectedPage' | 'shouldGoToPageBreakpointsOnScrolling' | 'showPagination'\n> & {\n    /**\n     * If provided, the cards, barring the first card, will be offset so that some of the previous card will be shown on the left.\n     * This is best used for mobile carousels so that people can better see that they're in the middle of a carousel.\n     * It should be a positive number, representing a pixel amount.\n     * Gap size will be added to it, so make sure you aren't including it.\n     *\n     * @default 0\n     */\n    cardOffset?: number;\n    /**\n     * If provided, it's an estimate of the number of pages that will be rendered.\n     * It's only used before the initial page calculation is completed.\n     */\n    expectedPageCount?: number;\n    /**\n     * Are the cards taking up a full page of the carousel?\n     * This is used to use card counts to render the page-based sections of the carousel for SSR.\n     */\n    fullPage?: boolean;\n    /**\n     * If populated, the progress bar will be placed below the cards, rather than on top of the card content\n     */\n    progressBarGap?: 'sm' | 'md' | 'lg';\n    /**\n     * Changes the color of the pause/play buttons to better reflect various backgrounds\n     *\n     * @default = 'primary'\n     */\n    style?: 'primary' | 'inverse';\n};\n\nexport const AutomatedCarousel = ({\n    cardOffset = 0,\n    cards,\n    expectedPageCount,\n    fullPage = true,\n    progressBarGap,\n    style = 'primary',\n    title,\n    ...rest\n}: Props) => {\n    const [currentPage, setCurrentPage] = useState(0);\n    const [currentFreeScrollPage, setCurrentFreeScrollPage] = useState(0);\n\n    useEffect(() => {\n        setCurrentFreeScrollPage(currentPage);\n    }, [currentPage]);\n\n    const goToPageAndContinue: ComponentProps<typeof CarouselProgressBar>['goToPage'] = useCallback((newPage) => {\n        setCurrentPage(newPage);\n    }, []);\n\n    const goToPageAndPause: NonNullable<ComponentProps<typeof Carousel>['goToPage']> = useCallback(\n        ({ buttonDirection, oneBasedPageNumber }) => {\n            if (buttonDirection) {\n                setCurrentPage(currentFreeScrollPage + buttonDirection);\n            } else {\n                setCurrentPage(oneBasedPageNumber - 1);\n            }\n            setIsPaused(true);\n        },\n        [currentFreeScrollPage]\n    );\n\n    const getInitialPageCount = () => {\n        if (expectedPageCount !== undefined) {\n            return expectedPageCount;\n        }\n        return fullPage ? cards.length : 0;\n    };\n\n    const [numberOfPages, setNumberOfPages] = useState(getInitialPageCount());\n    const setPageCount: NonNullable<ComponentProps<typeof Carousel>['providePageCount']> = useCallback((pageCount) => {\n        setNumberOfPages(pageCount);\n    }, []);\n\n    useEffect(() => {\n        setNumberOfPages(getInitialPageCount());\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [fullPage, cards.length, expectedPageCount]);\n\n    const oneBasedCarouselPage = currentPage + 1;\n\n    const [isPaused, setIsPaused] = useState(true);\n    const wasPaused = usePrevious(isPaused);\n\n    const progressBarClassName = useMemo(() => {\n        if (Boolean(progressBarGap)) {\n            return `w-fit flex mx-auto mt-${progressBarGap}`;\n        }\n        // progress bar should render over card content\n        return cn(\n            'absolute bottom-lg left-0 flex w-full justify-center',\n            // MOBILE\n            'xsMax:bottom-xs xsMax:left-[calc(100%-38px)] xsMax:block xsMax:transition-all xsMax:duration-500'\n        );\n    }, [progressBarGap]);\n\n    const onScrollCarousel: NonNullable<ComponentProps<typeof Carousel>['onScroll']> = useCallback(\n        (currentScrollPage) => {\n            setCurrentFreeScrollPage(currentScrollPage);\n            setIsPaused(true);\n        },\n        []\n    );\n\n    useEffect(() => {\n        setIsPaused(!document.readyState);\n    }, []);\n\n    useEffect(() => {\n        if (isPaused && !wasPaused) {\n            setCurrentFreeScrollPage(currentPage);\n        } else if (!isPaused && wasPaused) {\n            setCurrentPage(currentFreeScrollPage);\n        }\n    }, [currentFreeScrollPage, currentPage, isPaused, wasPaused]);\n\n    return (\n        <section className=\"relative\">\n            <Carousel\n                cardOffset={cardOffset}\n                cards={cards}\n                fullPage={fullPage}\n                goToPage={goToPageAndPause}\n                onScroll={onScrollCarousel}\n                providePageCount={setPageCount}\n                selectedPage={oneBasedCarouselPage}\n                shouldGoToPageBreakpointsOnScrolling={!isPaused}\n                showPagination={false}\n                title={title}\n                {...rest}\n            />\n            {numberOfPages > 0 && (\n                <div\n                    className={progressBarClassName}\n                    data-testid={`${title}.automated-carousel.progress-bar-container`}\n                >\n                    <CarouselProgressBar\n                        currentFreeScrollPage={currentFreeScrollPage}\n                        currentPage={currentPage}\n                        goToPage={goToPageAndContinue}\n                        isPaused={isPaused}\n                        pageCount={numberOfPages}\n                        setPausedState={setIsPaused}\n                        style={style}\n                    />\n                </div>\n            )}\n        </section>\n    );\n};\n"],"mappings":"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"}

package/Badge/ItemBadge.cjs

@@ -0,0 +1,75 @@
+'use client';
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_Icons = require("../Icons.cjs");
+const require_Badge = require("../Badge.cjs");
+let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Badge/ItemBadge.tsx
+/**
+* ItemBadge displays the status of a listing item.
+*
+* This component shows a badge with item status (FEATURED/LIVE/EXTENDED/SOLD), optional viewer count
+* for live items, and appropriate styling based on the status.
+*
+* Priority order: isSold > isExtended > isLive > isFeatured
+*
+* @example
+* ```tsx
+* // Featured item
+* <ItemBadge isFeatured={true} />
+*
+* // Live item with viewers
+* <ItemBadge isLive={true} viewers={126} />
+*
+* // Extended item
+* <ItemBadge isExtended={true} />
+*
+* // Sold item
+* <ItemBadge isSold={true} />
+* ```
+*/
+const ItemBadge = ({ className, isExtended, isFeatured, isLive, isSold, viewers }) => {
+	let text = null;
+	let color = "neutral";
+	let emphasis = "bold";
+	let showViewerCount = false;
+	if (isSold) {
+		text = "SOLD";
+		color = "neutral";
+		emphasis = "bold";
+	} else if (isExtended) {
+		text = "EXTENDED";
+		color = "critical";
+		emphasis = "bold";
+	} else if (isLive) {
+		text = "LIVE";
+		color = "critical";
+		emphasis = "bold";
+		showViewerCount = viewers !== void 0 && viewers > 0;
+	} else if (isFeatured) {
+		text = "FEATURED";
+		color = "neutral";
+		emphasis = "subtle";
+	}
+	if (!text) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Badge.Badge, {
+		className: (0, _evolve_ui_theme_system.cn)("hui-text-label-strong", { "flex items-center gap-2xs": showViewerCount }, className),
+		color,
+		"data-testid": "item-badge",
+		emphasis,
+		size: "sm",
+		children: [text, showViewerCount && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.DotOutline, {
+			className: "-mx-2xs",
+			size: "sm",
+			style: "fill"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: viewers })] })]
+	});
+};
+ItemBadge.displayName = "ItemBadge";
+//#endregion
+exports.ItemBadge = ItemBadge;
+
+//# sourceMappingURL=ItemBadge.cjs.map

package/Badge/ItemBadge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemBadge.cjs","names":["Badge","DotOutline"],"sources":["../../src/Badge/ItemBadge.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\n\nimport { DotOutline } from '../Icons';\nimport { Badge } from './Badge';\n\ntype Props = {\n    /** Optional className for custom styling and positioning */\n    className?: string;\n    /** Whether the item bidding has been extended */\n    isExtended?: boolean;\n    /** Whether the item is featured */\n    isFeatured?: boolean;\n    /** Whether the item is currently live */\n    isLive?: boolean;\n    /** Whether the item has been sold */\n    isSold?: boolean;\n    /** Number of viewers currently watching (only shown when isLive and > 0) */\n    viewers?: number;\n};\n\n/**\n * ItemBadge displays the status of a listing item.\n *\n * This component shows a badge with item status (FEATURED/LIVE/EXTENDED/SOLD), optional viewer count\n * for live items, and appropriate styling based on the status.\n *\n * Priority order: isSold > isExtended > isLive > isFeatured\n *\n * @example\n * ```tsx\n * // Featured item\n * <ItemBadge isFeatured={true} />\n *\n * // Live item with viewers\n * <ItemBadge isLive={true} viewers={126} />\n *\n * // Extended item\n * <ItemBadge isExtended={true} />\n *\n * // Sold item\n * <ItemBadge isSold={true} />\n * ```\n */\nexport const ItemBadge = ({ className, isExtended, isFeatured, isLive, isSold, viewers }: Props) => {\n    // Priority order: isSold > isExtended > isLive > isFeatured\n    let text: string | null = null;\n    let color: 'neutral' | 'critical' = 'neutral';\n    let emphasis: 'bold' | 'subtle' = 'bold';\n    let showViewerCount = false;\n\n    if (isSold) {\n        text = 'SOLD';\n        color = 'neutral';\n        emphasis = 'bold';\n    } else if (isExtended) {\n        text = 'EXTENDED';\n        color = 'critical';\n        emphasis = 'bold';\n    } else if (isLive) {\n        text = 'LIVE';\n        color = 'critical';\n        emphasis = 'bold';\n        showViewerCount = viewers !== undefined && viewers > 0;\n    } else if (isFeatured) {\n        text = 'FEATURED';\n        color = 'neutral';\n        emphasis = 'subtle';\n    }\n\n    if (!text) {\n        return null;\n    }\n\n    return (\n        <Badge\n            className={cn('hui-text-label-strong', { 'flex items-center gap-2xs': showViewerCount }, className)}\n            color={color}\n            data-testid=\"item-badge\"\n            emphasis={emphasis}\n            size=\"sm\"\n        >\n            {text}\n            {showViewerCount && (\n                <>\n                    <DotOutline\n                        className=\"-mx-2xs\"\n                        size=\"sm\"\n                        style=\"fill\"\n                    />\n                    <span>{viewers}</span>\n                </>\n            )}\n        </Badge>\n    );\n};\n\nItemBadge.displayName = 'ItemBadge';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,aAAa,EAAE,WAAW,YAAY,YAAY,QAAQ,QAAQ,cAAqB;CAEhG,IAAI,OAAsB;CAC1B,IAAI,QAAgC;CACpC,IAAI,WAA8B;CAClC,IAAI,kBAAkB;CAEtB,IAAI,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,WAAW;CACf,OAAO,IAAI,YAAY;EACnB,OAAO;EACP,QAAQ;EACR,WAAW;CACf,OAAO,IAAI,QAAQ;EACf,OAAO;EACP,QAAQ;EACR,WAAW;EACX,kBAAkB,YAAY,KAAA,KAAa,UAAU;CACzD,OAAO,IAAI,YAAY;EACnB,OAAO;EACP,QAAQ;EACR,WAAW;CACf;CAEA,IAAI,CAAC,MACD,OAAO;CAGX,OACI,iBAAA,GAAA,kBAAA,KAAA,CAACA,cAAAA,OAAD;EACI,YAAA,GAAA,wBAAA,GAAA,CAAc,yBAAyB,EAAE,6BAA6B,gBAAgB,GAAG,SAAS;EAC3F;EACP,eAAY;EACF;EACV,MAAK;YALT,CAOK,MACA,mBACG,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACI,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,YAAD;GACI,WAAU;GACV,MAAK;GACL,OAAM;EACT,CAAA,GACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAA,UAAO,QAAc,CAAA,CACvB,EAAA,CAAA,CAEH;;AAEf;AAEA,UAAU,cAAc"}

package/Badge/ItemBadge.d.cts

@@ -0,0 +1,2 @@
+import { t as ItemBadge } from "../ItemBadge-D1S8YsIy.cjs";
+export { ItemBadge };

package/Badge/ItemBadge.d.mts

@@ -0,0 +1,2 @@
+import { t as ItemBadge } from "../ItemBadge-D1S8YsIy.mjs";
+export { ItemBadge };

package/Badge/ItemBadge.mjs

@@ -0,0 +1,71 @@
+'use client';
+import { DotOutline } from "../Icons.mjs";
+import { Badge } from "../Badge.mjs";
+import { cn } from "@evolve.ui/theme-system";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/Badge/ItemBadge.tsx
+/**
+* ItemBadge displays the status of a listing item.
+*
+* This component shows a badge with item status (FEATURED/LIVE/EXTENDED/SOLD), optional viewer count
+* for live items, and appropriate styling based on the status.
+*
+* Priority order: isSold > isExtended > isLive > isFeatured
+*
+* @example
+* ```tsx
+* // Featured item
+* <ItemBadge isFeatured={true} />
+*
+* // Live item with viewers
+* <ItemBadge isLive={true} viewers={126} />
+*
+* // Extended item
+* <ItemBadge isExtended={true} />
+*
+* // Sold item
+* <ItemBadge isSold={true} />
+* ```
+*/
+const ItemBadge = ({ className, isExtended, isFeatured, isLive, isSold, viewers }) => {
+	let text = null;
+	let color = "neutral";
+	let emphasis = "bold";
+	let showViewerCount = false;
+	if (isSold) {
+		text = "SOLD";
+		color = "neutral";
+		emphasis = "bold";
+	} else if (isExtended) {
+		text = "EXTENDED";
+		color = "critical";
+		emphasis = "bold";
+	} else if (isLive) {
+		text = "LIVE";
+		color = "critical";
+		emphasis = "bold";
+		showViewerCount = viewers !== void 0 && viewers > 0;
+	} else if (isFeatured) {
+		text = "FEATURED";
+		color = "neutral";
+		emphasis = "subtle";
+	}
+	if (!text) return null;
+	return /* @__PURE__ */ jsxs(Badge, {
+		className: cn("hui-text-label-strong", { "flex items-center gap-2xs": showViewerCount }, className),
+		color,
+		"data-testid": "item-badge",
+		emphasis,
+		size: "sm",
+		children: [text, showViewerCount && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DotOutline, {
+			className: "-mx-2xs",
+			size: "sm",
+			style: "fill"
+		}), /* @__PURE__ */ jsx("span", { children: viewers })] })]
+	});
+};
+ItemBadge.displayName = "ItemBadge";
+//#endregion
+export { ItemBadge };
+
+//# sourceMappingURL=ItemBadge.mjs.map

package/Badge/ItemBadge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemBadge.mjs","names":[],"sources":["../../src/Badge/ItemBadge.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\n\nimport { DotOutline } from '../Icons';\nimport { Badge } from './Badge';\n\ntype Props = {\n    /** Optional className for custom styling and positioning */\n    className?: string;\n    /** Whether the item bidding has been extended */\n    isExtended?: boolean;\n    /** Whether the item is featured */\n    isFeatured?: boolean;\n    /** Whether the item is currently live */\n    isLive?: boolean;\n    /** Whether the item has been sold */\n    isSold?: boolean;\n    /** Number of viewers currently watching (only shown when isLive and > 0) */\n    viewers?: number;\n};\n\n/**\n * ItemBadge displays the status of a listing item.\n *\n * This component shows a badge with item status (FEATURED/LIVE/EXTENDED/SOLD), optional viewer count\n * for live items, and appropriate styling based on the status.\n *\n * Priority order: isSold > isExtended > isLive > isFeatured\n *\n * @example\n * ```tsx\n * // Featured item\n * <ItemBadge isFeatured={true} />\n *\n * // Live item with viewers\n * <ItemBadge isLive={true} viewers={126} />\n *\n * // Extended item\n * <ItemBadge isExtended={true} />\n *\n * // Sold item\n * <ItemBadge isSold={true} />\n * ```\n */\nexport const ItemBadge = ({ className, isExtended, isFeatured, isLive, isSold, viewers }: Props) => {\n    // Priority order: isSold > isExtended > isLive > isFeatured\n    let text: string | null = null;\n    let color: 'neutral' | 'critical' = 'neutral';\n    let emphasis: 'bold' | 'subtle' = 'bold';\n    let showViewerCount = false;\n\n    if (isSold) {\n        text = 'SOLD';\n        color = 'neutral';\n        emphasis = 'bold';\n    } else if (isExtended) {\n        text = 'EXTENDED';\n        color = 'critical';\n        emphasis = 'bold';\n    } else if (isLive) {\n        text = 'LIVE';\n        color = 'critical';\n        emphasis = 'bold';\n        showViewerCount = viewers !== undefined && viewers > 0;\n    } else if (isFeatured) {\n        text = 'FEATURED';\n        color = 'neutral';\n        emphasis = 'subtle';\n    }\n\n    if (!text) {\n        return null;\n    }\n\n    return (\n        <Badge\n            className={cn('hui-text-label-strong', { 'flex items-center gap-2xs': showViewerCount }, className)}\n            color={color}\n            data-testid=\"item-badge\"\n            emphasis={emphasis}\n            size=\"sm\"\n        >\n            {text}\n            {showViewerCount && (\n                <>\n                    <DotOutline\n                        className=\"-mx-2xs\"\n                        size=\"sm\"\n                        style=\"fill\"\n                    />\n                    <span>{viewers}</span>\n                </>\n            )}\n        </Badge>\n    );\n};\n\nItemBadge.displayName = 'ItemBadge';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,aAAa,EAAE,WAAW,YAAY,YAAY,QAAQ,QAAQ,cAAqB;CAEhG,IAAI,OAAsB;CAC1B,IAAI,QAAgC;CACpC,IAAI,WAA8B;CAClC,IAAI,kBAAkB;CAEtB,IAAI,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,WAAW;CACf,OAAO,IAAI,YAAY;EACnB,OAAO;EACP,QAAQ;EACR,WAAW;CACf,OAAO,IAAI,QAAQ;EACf,OAAO;EACP,QAAQ;EACR,WAAW;EACX,kBAAkB,YAAY,KAAA,KAAa,UAAU;CACzD,OAAO,IAAI,YAAY;EACnB,OAAO;EACP,QAAQ;EACR,WAAW;CACf;CAEA,IAAI,CAAC,MACD,OAAO;CAGX,OACI,qBAAC,OAAD;EACI,WAAW,GAAG,yBAAyB,EAAE,6BAA6B,gBAAgB,GAAG,SAAS;EAC3F;EACP,eAAY;EACF;EACV,MAAK;YALT,CAOK,MACA,mBACG,qBAAA,UAAA,EAAA,UAAA,CACI,oBAAC,YAAD;GACI,WAAU;GACV,MAAK;GACL,OAAM;EACT,CAAA,GACD,oBAAC,QAAD,EAAA,UAAO,QAAc,CAAA,CACvB,EAAA,CAAA,CAEH;;AAEf;AAEA,UAAU,cAAc"}

package/Badge/LiveStatusBadge.cjs

@@ -0,0 +1,78 @@
+'use client';
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_Icons = require("../Icons.cjs");
+const require_Badge = require("../Badge.cjs");
+let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Badge/LiveStatusBadge.tsx
+/**
+* LiveStatusBadge displays the LIVE/PAUSED/CLOSING status of a live session with viewer count.
+*
+* This component shows a badge with session status (LIVE/PAUSED/CLOSING), optional video camera icon,
+* viewer count with dot separator, and appropriate state indicators.
+*
+* @example
+* ```tsx
+* // Live session with video
+* <LiveStatusBadge
+*   hasVideo={true}
+*   isClosing={false}
+*   isPaused={false}
+*   viewers={245}
+* />
+*
+* // Paused session
+* <LiveStatusBadge
+*   isClosing={false}
+*   isPaused={true}
+*   viewers={132}
+* />
+*
+* // Closing session
+* <LiveStatusBadge
+*   hasVideo={false}
+*   isClosing={true}
+*   isPaused={false}
+*   viewers={0}
+* />
+* ```
+*/
+const LiveStatusBadge = ({ className, hasVideo, isClosing, isPaused, viewers = 1 }) => {
+	let statusText = isPaused ? "PAUSED" : "LIVE";
+	if (isClosing) statusText = "CLOSING";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Badge.Badge, {
+		className: (0, _evolve_ui_theme_system.cn)("hui-text-label-strong flex items-center gap-2xs", className),
+		color: "critical",
+		"data-testid": "live-status-badge",
+		emphasis: "bold",
+		iconStyle: "fill",
+		size: "sm",
+		children: [
+			!isPaused && !isClosing && hasVideo && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.VideoCamera, {
+				"data-testid": "video-camera-icon",
+				size: "sm",
+				style: "fill"
+			}),
+			isPaused && !isClosing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.Pause, {
+				"data-testid": "pause-icon",
+				size: "sm",
+				style: "fill"
+			}),
+			statusText,
+			!isClosing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.DotOutline, {
+				className: "-mx-2xs",
+				size: "sm",
+				style: "fill"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: !isClosing && viewers })
+		]
+	});
+};
+LiveStatusBadge.displayName = "LiveStatusBadge";
+//#endregion
+exports.LiveStatusBadge = LiveStatusBadge;
+
+//# sourceMappingURL=LiveStatusBadge.cjs.map

package/Badge/LiveStatusBadge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveStatusBadge.cjs","names":["Badge","VideoCamera","Pause","DotOutline"],"sources":["../../src/Badge/LiveStatusBadge.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\n\nimport { DotOutline, Pause, VideoCamera } from '../Icons';\nimport { Badge } from './Badge';\n\ntype Props = {\n    /** Optional className for custom styling and positioning */\n    className?: string;\n    /** Whether the live session has video streaming capabilities */\n    hasVideo?: boolean;\n    /** Whether the live session is currently closing */\n    isClosing?: boolean;\n    /** Whether the live session is currently paused */\n    isPaused?: boolean;\n    /** Number of viewers currently watching */\n    viewers: number;\n};\n\n/**\n * LiveStatusBadge displays the LIVE/PAUSED/CLOSING status of a live session with viewer count.\n *\n * This component shows a badge with session status (LIVE/PAUSED/CLOSING), optional video camera icon,\n * viewer count with dot separator, and appropriate state indicators.\n *\n * @example\n * ```tsx\n * // Live session with video\n * <LiveStatusBadge\n *   hasVideo={true}\n *   isClosing={false}\n *   isPaused={false}\n *   viewers={245}\n * />\n *\n * // Paused session\n * <LiveStatusBadge\n *   isClosing={false}\n *   isPaused={true}\n *   viewers={132}\n * />\n *\n * // Closing session\n * <LiveStatusBadge\n *   hasVideo={false}\n *   isClosing={true}\n *   isPaused={false}\n *   viewers={0}\n * />\n * ```\n */\nexport const LiveStatusBadge = ({ className, hasVideo, isClosing, isPaused, viewers = 1 }: Props) => {\n    let statusText = isPaused ? 'PAUSED' : 'LIVE';\n    if (isClosing) {\n        statusText = 'CLOSING';\n    }\n\n    return (\n        <Badge\n            className={cn('hui-text-label-strong flex items-center gap-2xs', className)}\n            color=\"critical\"\n            data-testid=\"live-status-badge\"\n            emphasis=\"bold\"\n            iconStyle=\"fill\"\n            size=\"sm\"\n        >\n            {!isPaused && !isClosing && hasVideo && (\n                <VideoCamera\n                    data-testid=\"video-camera-icon\"\n                    size=\"sm\"\n                    style=\"fill\"\n                />\n            )}\n            {isPaused && !isClosing && (\n                <Pause\n                    data-testid=\"pause-icon\"\n                    size=\"sm\"\n                    style=\"fill\"\n                />\n            )}\n            {statusText}\n            {!isClosing && (\n                <DotOutline\n                    className=\"-mx-2xs\"\n                    size=\"sm\"\n                    style=\"fill\"\n                />\n            )}\n            <span>{!isClosing && viewers}</span>\n        </Badge>\n    );\n};\n\nLiveStatusBadge.displayName = 'LiveStatusBadge';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,MAAa,mBAAmB,EAAE,WAAW,UAAU,WAAW,UAAU,UAAU,QAAe;CACjG,IAAI,aAAa,WAAW,WAAW;CACvC,IAAI,WACA,aAAa;CAGjB,OACI,iBAAA,GAAA,kBAAA,KAAA,CAACA,cAAAA,OAAD;EACI,YAAA,GAAA,wBAAA,GAAA,CAAc,mDAAmD,SAAS;EAC1E,OAAM;EACN,eAAY;EACZ,UAAS;EACT,WAAU;EACV,MAAK;YANT;GAQK,CAAC,YAAY,CAAC,aAAa,YACxB,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,aAAD;IACI,eAAY;IACZ,MAAK;IACL,OAAM;GACT,CAAA;GAEJ,YAAY,CAAC,aACV,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;IACI,eAAY;IACZ,MAAK;IACL,OAAM;GACT,CAAA;GAEJ;GACA,CAAC,aACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,YAAD;IACI,WAAU;IACV,MAAK;IACL,OAAM;GACT,CAAA;GAEL,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAA,UAAO,CAAC,aAAa,QAAc,CAAA;EAChC;;AAEf;AAEA,gBAAgB,cAAc"}

package/Badge/LiveStatusBadge.d.cts

@@ -0,0 +1,2 @@
+import { t as LiveStatusBadge } from "../LiveStatusBadge-D1TX11B6.cjs";
+export { LiveStatusBadge };

package/Badge/LiveStatusBadge.d.mts

@@ -0,0 +1,2 @@
+import { t as LiveStatusBadge } from "../LiveStatusBadge-D1TX11B6.mjs";
+export { LiveStatusBadge };