@evolve.ui/core-components 1.0.0

package/BottomSheet-ZV_eq3xt.mjs

@@ -0,0 +1,1708 @@
+import { t as nodeEnv } from "./nodeEnv-B4v61vkJ.mjs";
+import { BodySecondary, H2 } from "./Typography/Text.mjs";
+import { cn, wrapVarRgb } from "@evolve.ui/theme-system";
+import { forwardRef, memo, useCallback, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
+import { createPortal } from "react-dom";
+import { animated, to, useSpring } from "@react-spring/web";
+import { rubberbandIfOutOfBounds, useDrag } from "@use-gesture/react";
+import { ResizeObserver as ResizeObserver$1 } from "@juggle/resize-observer";
+//#region src/BottomSheet/components/SheetDescription/SheetDescription.tsx
+const SheetDescription = ({ children, className, id }) => {
+	return /* @__PURE__ */ jsx(BodySecondary, {
+		className,
+		color: "secondary",
+		"data-testid": "sheet-description",
+		id,
+		children
+	});
+};
+//#endregion
+//#region src/BottomSheet/components/SheetTitle/SheetTitle.tsx
+const SheetTitle = ({ children, className, id }) => {
+	return /* @__PURE__ */ jsx(H2, {
+		className,
+		"data-testid": "sheet-title",
+		id,
+		children
+	});
+};
+//#endregion
+//#region src/BottomSheet/components/BottomSheetBackdrop/BottomSheetBackdrop.tsx
+/**
+* BottomSheetBackdrop handles the backdrop overlay that appears behind the sheet
+*/
+const BottomSheetBackdrop = ({ bind, blocking }) => {
+	if (!blocking) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("fixed inset-0", "-bottom-[60px] -top-[60px]", "bg-background-overlay", "cursor-pointer", "touch-none select-none", "opacity-100"),
+		"data-testid": "rsbs-backdrop",
+		...bind({ closeOnTap: true })
+	}, "backdrop");
+};
+//#endregion
+//#region src/BottomSheet/components/BottomSheetContentArea/BottomSheetContentArea.tsx
+/**
+* BottomSheetContentArea handles the scrollable content area of the sheet
+* Memoized to prevent unnecessary re-renders when parent state changes
+*/
+const BottomSheetContentArea = memo(({ children, contentRef, disableScroll = false, scrollRef }) => {
+	const [isDisableScrollActive, setIsDisableScrollActive] = useState(false);
+	useEffect(() => {
+		if (disableScroll) {
+			const timer = setTimeout(() => {
+				setIsDisableScrollActive(true);
+			}, 200);
+			return () => clearTimeout(timer);
+		}
+		setIsDisableScrollActive(false);
+	}, [disableScroll]);
+	useLayoutEffect(() => {
+		if (!scrollRef.current) return;
+		scrollRef.current.scrollTop = 0;
+		const timer = setTimeout(() => {
+			if (scrollRef.current) scrollRef.current.scrollTop = 0;
+		}, 50);
+		return () => clearTimeout(timer);
+	}, [scrollRef]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("min-h-0 flex-shrink flex-grow", {
+			"flex flex-col overflow-hidden": isDisableScrollActive,
+			"overflow-auto overscroll-contain": !isDisableScrollActive
+		}, "focus:outline-none"),
+		"data-testid": "rsbs-scroll",
+		ref: scrollRef,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn({
+				"flex min-h-0 flex-grow flex-col": isDisableScrollActive,
+				"overflow-hidden": !isDisableScrollActive
+			}),
+			"data-testid": "rsbs-content",
+			ref: contentRef,
+			children
+		})
+	}, "scroll");
+});
+BottomSheetContentArea.displayName = "BottomSheetContentArea";
+//#endregion
+//#region src/BottomSheet/components/BottomSheetOverlay/BottomSheetOverlayTranslate3d.tsx
+/**
+* EXPERIMENTAL: BottomSheetOverlayTranslate3d - GPU-accelerated version using translate3d
+*
+* This version uses a static height and translate3d transforms for better performance.
+* Key differences from the original:
+* 1. Static height instead of animated height
+* 2. translate3d for positioning (GPU accelerated)
+* 3. Optimized for mobile device performance
+* 4. Memoized to prevent unnecessary re-renders
+*/
+const BottomSheetOverlayTranslate3d = memo(({ bind, children, contentRef, disableScroll, footer, footerRef, header, headerRef, isScrollable, isScrolledToBottom, onDismiss, overlayRef, scrollRef }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-describedby": header?.description ? "bottom-sheet-description" : void 0,
+		"aria-label": header?.title ? void 0 : "Bottom Sheet",
+		"aria-labelledby": header?.title ? "bottom-sheet-title" : void 0,
+		"aria-modal": "true",
+		className: cn("bg-background-primary p-md", "flex flex-col", "relative", "rounded-t-xl", "hui-focus-visible-outline focus:outline-none", "h-[var(--rsbs-overlay-h-static,100vh)]", "transform-gpu", "will-change-transform", "before:absolute before:left-1/2 before:top-2xs before:block", "before:h-2xs before:w-9 before:-translate-x-1/2 before:rounded-sm", "before:bg-icon-secondary/20 before:content-[\"\"]"),
+		onKeyDown: (event) => {
+			if (event.key === "Escape") {
+				event.stopPropagation();
+				if (onDismiss) onDismiss();
+			}
+		},
+		ref: overlayRef,
+		role: "dialog",
+		style: { transform: "var(--rsbs-overlay-translate3d, translate3d(0, var(--rsbs-overlay-h-static, 100vh), 0))" },
+		tabIndex: -1,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: cn("absolute left-0 right-0 top-0", "h-md", "cursor-ns-resize select-none", "z-10"),
+				style: { touchAction: "none" },
+				...bind()
+			}),
+			header && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2xs pb-sm",
+				ref: headerRef,
+				children: [/* @__PURE__ */ jsx(SheetTitle, {
+					id: "bottom-sheet-title",
+					children: header.title
+				}), /* @__PURE__ */ jsx(SheetDescription, {
+					id: "bottom-sheet-description",
+					children: header.description
+				})]
+			}, "header"),
+			!header && /* @__PURE__ */ jsx("div", {
+				className: "hidden",
+				ref: headerRef
+			}),
+			/* @__PURE__ */ jsx(BottomSheetContentArea, {
+				contentRef,
+				disableScroll,
+				scrollRef,
+				children
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("relative flex-shrink-0", footer ? "pt-lg" : "min-h-[1px] pb-md", footer && "cursor-ns-resize"),
+				ref: footerRef,
+				style: footer ? { touchAction: "none" } : void 0,
+				...footer ? bind() : {},
+				children: [!disableScroll && isScrollable && !isScrolledToBottom && /* @__PURE__ */ jsx("div", {
+					className: "pointer-events-none absolute -top-[42px] left-0 right-0 h-xl w-full",
+					"data-testid": "gradient-overlay",
+					style: { background: `linear-gradient(to bottom, transparent, ${wrapVarRgb("--color-background-primary")})` }
+				}), footer]
+			}, "footer")
+		]
+	}, "overlay");
+});
+BottomSheetOverlayTranslate3d.displayName = "BottomSheetOverlayTranslate3d";
+//#endregion
+//#region src/BottomSheet/hooks/useAriaHider.tsx
+const useAriaHider = ({ enabled, targetRef }) => {
+	const ref = useRef({
+		activate: () => {
+			throw new TypeError("Tried to activate aria hider too early");
+		},
+		deactivate: () => {}
+	});
+	useDebugValue(enabled ? "Enabled" : "Disabled");
+	useEffect(() => {
+		if (!enabled) {
+			ref.current.deactivate();
+			ref.current = {
+				activate: () => {},
+				deactivate: () => {}
+			};
+			return;
+		}
+		const target = targetRef.current;
+		let active = false;
+		let originalValues = [];
+		let rootNodes = [];
+		ref.current = {
+			activate: () => {
+				if (active) return;
+				active = true;
+				const targetElement = target;
+				Array.from(document.querySelectorAll("body > *")).forEach((node) => {
+					if (node === targetElement) return;
+					if (node.contains(targetElement)) return;
+					const attr = node.getAttribute("aria-hidden");
+					if (attr !== null && attr !== "false") return;
+					const tagName = node.tagName.toLowerCase();
+					if ([
+						"script",
+						"style",
+						"meta",
+						"title",
+						"link"
+					].includes(tagName)) return;
+					originalValues.push(attr);
+					rootNodes.push(node);
+					node.setAttribute("aria-hidden", "true");
+				});
+			},
+			deactivate: () => {
+				if (!active) return;
+				active = false;
+				rootNodes.forEach((node, index) => {
+					const originalValue = originalValues[index];
+					if (originalValue === null) node.removeAttribute("aria-hidden");
+					else node.setAttribute("aria-hidden", originalValue);
+				});
+				originalValues = [];
+				rootNodes = [];
+			}
+		};
+	}, [targetRef, enabled]);
+	return ref;
+};
+//#endregion
+//#region src/BottomSheet/hooks/useFocusTrap.tsx
+/**
+* Lightweight focus trap implementation without external dependencies
+* Provides basic focus management for modal/sheet components
+*/
+const useFocusTrap = ({ enabled, fallbackRef, initialFocusRef, targetRef }) => {
+	const ref = useRef({
+		activate: () => {
+			throw new TypeError("Tried to activate focus trap too early");
+		},
+		deactivate: () => {}
+	});
+	const previousActiveElement = useRef(null);
+	useDebugValue(enabled ? "Enabled" : "Disabled");
+	useEffect(() => {
+		if (!enabled) {
+			ref.current.deactivate();
+			ref.current = {
+				activate: () => {},
+				deactivate: () => {}
+			};
+			return;
+		}
+		const target = targetRef.current;
+		let active = false;
+		const getFocusableElements = (container) => {
+			const focusableSelectors = [
+				"button:not([disabled])",
+				"input:not([disabled])",
+				"textarea:not([disabled])",
+				"select:not([disabled])",
+				"a[href]",
+				"[tabindex]:not([tabindex=\"-1\"])"
+			].join(", ");
+			return Array.from(container.querySelectorAll(focusableSelectors));
+		};
+		const handleKeyDown = (e) => {
+			if (!active || !target || e.key !== "Tab") return;
+			const focusableElements = getFocusableElements(target);
+			if (focusableElements.length === 0) return;
+			const firstElement = focusableElements[0];
+			const lastElement = focusableElements[focusableElements.length - 1];
+			if (e.shiftKey) {
+				if (document.activeElement === firstElement) {
+					e.preventDefault();
+					lastElement.focus();
+				}
+			} else if (document.activeElement === lastElement) {
+				e.preventDefault();
+				firstElement.focus();
+			}
+		};
+		ref.current = {
+			activate: () => {
+				if (active || !target) return;
+				active = true;
+				previousActiveElement.current = document.activeElement;
+				document.addEventListener("keydown", handleKeyDown);
+			},
+			deactivate: () => {
+				if (!active) return;
+				active = false;
+				document.removeEventListener("keydown", handleKeyDown);
+				if (previousActiveElement.current && typeof previousActiveElement.current.focus === "function") previousActiveElement.current.focus();
+				previousActiveElement.current = null;
+			}
+		};
+	}, [
+		enabled,
+		fallbackRef,
+		initialFocusRef,
+		targetRef
+	]);
+	return ref;
+};
+//#endregion
+//#region src/BottomSheet/hooks/useLayoutEffect.tsx
+const useLayoutEffect$1 = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+//#endregion
+//#region src/BottomSheet/hooks/useOptimizedScrollState.tsx
+/**
+* Custom hook for optimized scroll state management
+* Reduces re-renders and improves performance for scroll tracking
+*/
+const useOptimizedScrollState = (scrollRef, ready) => {
+	const [isScrollable, setIsScrollable] = useState(false);
+	const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);
+	const checkScrollState = useCallback(() => {
+		const elem = scrollRef.current;
+		if (!elem) return;
+		const { clientHeight, scrollHeight, scrollTop } = elem;
+		const scrollable = scrollHeight > clientHeight;
+		const atBottom = Math.abs(scrollHeight - clientHeight - scrollTop) < 1;
+		setIsScrollable((prev) => prev !== scrollable ? scrollable : prev);
+		setIsScrolledToBottom((prev) => prev !== atBottom ? atBottom : prev);
+	}, [scrollRef]);
+	const checkScrollStateRef = useRef(checkScrollState);
+	checkScrollStateRef.current = checkScrollState;
+	useEffect(() => {
+		const elem = scrollRef.current;
+		if (!elem || !ready) return;
+		checkScrollState();
+		let scrollRaf = null;
+		let resizeRaf = null;
+		const throttledScrollCheck = () => {
+			if (scrollRaf !== null) return;
+			scrollRaf = requestAnimationFrame(() => {
+				checkScrollStateRef.current();
+				scrollRaf = null;
+			});
+		};
+		const throttledResizeCheck = () => {
+			if (resizeRaf !== null) return;
+			resizeRaf = requestAnimationFrame(() => {
+				checkScrollStateRef.current();
+				resizeRaf = null;
+			});
+		};
+		elem.addEventListener("scroll", throttledScrollCheck, { passive: true });
+		const resizeObserver = new ResizeObserver(throttledResizeCheck);
+		resizeObserver.observe(elem);
+		return () => {
+			elem.removeEventListener("scroll", throttledScrollCheck);
+			if (scrollRaf !== null) cancelAnimationFrame(scrollRaf);
+			if (resizeRaf !== null) cancelAnimationFrame(resizeRaf);
+			resizeObserver.disconnect();
+		};
+	}, [
+		ready,
+		scrollRef,
+		checkScrollState
+	]);
+	return {
+		checkScrollState,
+		isScrollable,
+		isScrolledToBottom
+	};
+};
+//#endregion
+//#region src/BottomSheet/hooks/useReady.tsx
+const useReady = () => {
+	const [ready, setReady] = useState(false);
+	const [readyMap, updateReadyMap] = useState({});
+	const registerReady = useCallback((key) => {
+		updateReadyMap((ready) => ({
+			...ready,
+			[key]: false
+		}));
+		return () => {
+			updateReadyMap((ready) => ({
+				...ready,
+				[key]: true
+			}));
+		};
+	}, []);
+	useEffect(() => {
+		const states = Object.values(readyMap);
+		if (states.length === 0) return;
+		if (states.every(Boolean)) setReady(true);
+	}, [readyMap]);
+	return {
+		ready,
+		registerReady
+	};
+};
+//#endregion
+//#region src/BottomSheet/hooks/useReducedMotion.tsx
+const useReducedMotion = () => {
+	const mql = useMemo(() => typeof window !== "undefined" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null, []);
+	const ref = useRef(mql?.matches);
+	useDebugValue(ref.current ? "reduce" : "no-preference");
+	useEffect(() => {
+		const handler = (event) => {
+			ref.current = event.matches;
+		};
+		mql?.addEventListener("change", handler);
+		return () => mql?.removeEventListener("change", handler);
+	}, [mql]);
+	return ref;
+};
+//#endregion
+//#region src/BottomSheet/hooks/useScrollLock.tsx
+/**
+* Lightweight scroll lock implementation without external dependencies
+* Handle scroll locking to ensure a good dragging experience on Android and iOS.
+*
+* On iOS the following may happen if scroll isn't locked:
+* - When dragging the sheet the background gets dragged at the same time.
+* - When dragging the page scroll is also affected, causing the drag to feel buggy and "slow".
+*
+* On Android it causes the chrome toolbar to pop down as you drag down, and hide as you drag up.
+* When it's in between two toolbar states it causes the framerate to drop way below 60fps on
+* the bottom sheet drag interaction.
+*/
+const useScrollLock = ({ enabled, reserveScrollBarGap, targetRef }) => {
+	const ref = useRef({
+		activate: () => {
+			throw new TypeError("Tried to activate scroll lock too early");
+		},
+		deactivate: () => {}
+	});
+	const originalStyles = useRef(null);
+	useDebugValue(enabled ? "Enabled" : "Disabled");
+	useEffect(() => {
+		if (!enabled) {
+			ref.current.deactivate();
+			ref.current = {
+				activate: () => {},
+				deactivate: () => {}
+			};
+			return;
+		}
+		let active = false;
+		const getScrollbarWidth = () => {
+			const scrollDiv = document.createElement("div");
+			scrollDiv.style.cssText = "width: 100px; height: 100px; overflow: scroll; position: absolute; top: -9999px;";
+			document.body.appendChild(scrollDiv);
+			const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+			document.body.removeChild(scrollDiv);
+			return scrollbarWidth;
+		};
+		const preventTouchMove = (e) => {
+			const target = e.target;
+			if (target.closest("[data-body-scroll-lock-ignore]") || targetRef.current && targetRef.current.contains(target)) return;
+			e.preventDefault();
+		};
+		ref.current = {
+			activate: () => {
+				if (active) return;
+				active = true;
+				const body = document.body;
+				const html = document.documentElement;
+				originalStyles.current = {
+					overflow: body.style.overflow,
+					paddingRight: body.style.paddingRight,
+					position: body.style.position
+				};
+				let scrollbarWidth = 0;
+				if (reserveScrollBarGap && window.innerWidth > html.clientWidth) scrollbarWidth = getScrollbarWidth();
+				body.style.overflow = "hidden";
+				if (scrollbarWidth > 0) body.style.paddingRight = `${scrollbarWidth}px`;
+				document.addEventListener("touchmove", preventTouchMove, { passive: false });
+				if (typeof window !== "undefined" && "scrollY" in window) {
+					const scrollY = window.scrollY;
+					body.style.position = "fixed";
+					body.style.top = `-${scrollY}px`;
+					body.style.width = "100%";
+				}
+			},
+			deactivate: () => {
+				if (!active) return;
+				active = false;
+				const body = document.body;
+				document.removeEventListener("touchmove", preventTouchMove);
+				if (originalStyles.current) {
+					body.style.overflow = originalStyles.current.overflow;
+					body.style.paddingRight = originalStyles.current.paddingRight;
+					if (body.style.position === "fixed") {
+						const scrollY = parseInt(body.style.top || "0", 10) * -1;
+						body.style.position = originalStyles.current.position;
+						body.style.top = "";
+						body.style.width = "";
+						window.scrollTo(0, scrollY);
+					}
+				}
+				originalStyles.current = null;
+			}
+		};
+	}, [
+		enabled,
+		targetRef,
+		reserveScrollBarGap
+	]);
+	return ref;
+};
+//#endregion
+//#region src/BottomSheet/utils.ts
+const clamp = (number, lower, upper) => {
+	number = Number(number);
+	lower = Number(lower);
+	upper = Number(upper);
+	lower = lower === lower ? lower : 0;
+	upper = upper === upper ? upper : 0;
+	if (number === number) {
+		number = number <= upper ? number : upper;
+		number = number >= lower ? number : lower;
+	}
+	return number;
+};
+const roundAndCheckForNaN = (unrounded) => {
+	const rounded = Math.round(unrounded);
+	if (Number.isNaN(unrounded)) throw new TypeError("Found a NaN! Check your snapPoints / defaultSnap / snapTo ");
+	return rounded;
+};
+const processSnapPoints = (unsafeSnaps, maxHeight) => {
+	const safeSnaps = [].concat(unsafeSnaps).map(roundAndCheckForNaN);
+	const viewportHeight = typeof window !== "undefined" ? window.innerHeight : maxHeight;
+	const absoluteMaxHeight = Math.min(maxHeight, viewportHeight);
+	const snapPointsDedupedSet = safeSnaps.reduce((acc, snapPoint) => {
+		acc.add(clamp(snapPoint, 0, absoluteMaxHeight));
+		return acc;
+	}, /* @__PURE__ */ new Set());
+	const snapPoints = Array.from(snapPointsDedupedSet);
+	const minSnap = Math.min(...snapPoints);
+	if (Number.isNaN(minSnap)) throw new TypeError("minSnap is NaN");
+	const maxSnap = Math.max(...snapPoints);
+	if (Number.isNaN(maxSnap)) throw new TypeError("maxSnap is NaN");
+	return {
+		maxSnap,
+		minSnap,
+		snapPoints
+	};
+};
+//#endregion
+//#region src/BottomSheet/hooks/useSnapPoints.tsx
+const useSnapPoints = ({ contentRef, controlledMaxHeight, controlledMinHeight, footerEnabled, footerRef, getSnapPoints, headerEnabled, headerRef, heightRef, lastSnapRef, ready, registerReady, resizeSourceRef }) => {
+	const { footerHeight, headerHeight, maxHeight, minHeight } = useDimensions({
+		contentRef,
+		controlledMaxHeight,
+		controlledMinHeight,
+		footerEnabled,
+		footerRef,
+		headerEnabled,
+		headerRef,
+		registerReady,
+		resizeSourceRef
+	});
+	const { maxSnap, minSnap, snapPoints } = processSnapPoints(ready ? getSnapPoints({
+		footerHeight,
+		headerHeight,
+		height: heightRef.current,
+		maxHeight,
+		minHeight
+	}) : [0], maxHeight);
+	const findSnap = useCallback((numberOrCallback, velocity) => {
+		let unsafeSearch;
+		if (typeof numberOrCallback === "function") unsafeSearch = numberOrCallback({
+			footerHeight,
+			headerHeight,
+			height: heightRef.current,
+			lastSnap: lastSnapRef.current,
+			maxHeight,
+			minHeight,
+			snapPoints
+		});
+		else unsafeSearch = numberOrCallback;
+		const querySnap = roundAndCheckForNaN(unsafeSearch);
+		if (velocity && Math.abs(velocity) > .3) {
+			const currentSnap = heightRef.current || 0;
+			const direction = velocity > 0 ? 1 : -1;
+			const snapsInDirection = snapPoints.filter((snap) => direction > 0 ? snap > currentSnap : snap < currentSnap);
+			if (snapsInDirection.length > 0) {
+				const targetSnap = direction > 0 ? Math.min(...snapsInDirection) : Math.max(...snapsInDirection);
+				if (Math.abs(targetSnap - querySnap) < Math.abs(snapPoints.reduce((prev, curr) => Math.abs(curr - querySnap) < Math.abs(prev - querySnap) ? curr : prev, minSnap) - querySnap) * 1.2 && Math.abs(velocity) > .5) return targetSnap;
+			}
+		}
+		return snapPoints.reduce((prev, curr) => Math.abs(curr - querySnap) < Math.abs(prev - querySnap) ? curr : prev, minSnap);
+	}, [
+		snapPoints,
+		minSnap,
+		footerHeight,
+		headerHeight,
+		heightRef,
+		lastSnapRef,
+		maxHeight,
+		minHeight
+	]);
+	useDebugValue(`minSnap: ${minSnap}, maxSnap:${maxSnap}`);
+	return {
+		findSnap,
+		maxHeight,
+		maxSnap,
+		minSnap
+	};
+};
+function useDimensions({ contentRef, controlledMaxHeight, controlledMinHeight = 300, footerEnabled, footerRef, headerEnabled, headerRef, registerReady, resizeSourceRef }) {
+	const setReady = useMemo(() => registerReady("contentHeight"), [registerReady]);
+	const maxHeight = useMaxHeight(controlledMaxHeight, registerReady, resizeSourceRef);
+	const headerHeight = useElementSizeObserver(headerRef, {
+		enabled: headerEnabled,
+		label: "headerHeight",
+		resizeSourceRef
+	});
+	const contentHeight = useElementSizeObserver(contentRef, {
+		enabled: true,
+		label: "contentHeight",
+		resizeSourceRef
+	});
+	const footerHeight = useElementSizeObserver(footerRef, {
+		enabled: footerEnabled,
+		label: "footerHeight",
+		resizeSourceRef
+	});
+	const calculatedMinHeight = Math.min(maxHeight - headerHeight - footerHeight, contentHeight) + headerHeight + footerHeight;
+	const minHeight = Math.min(Math.max(calculatedMinHeight, controlledMinHeight), maxHeight);
+	useDebugValue(`minHeight: ${minHeight}`);
+	const ready = contentHeight > 0;
+	useEffect(() => {
+		if (ready) setReady();
+	}, [ready, setReady]);
+	return {
+		footerHeight,
+		headerHeight,
+		maxHeight,
+		minHeight
+	};
+}
+const observerOptions = { box: "border-box" };
+/**
+* Hook for determining the size of an element using the Resize Observer API.
+*
+* @param ref - A React ref to an element
+*/
+function useElementSizeObserver(ref, { enabled, label, resizeSourceRef }) {
+	const [size, setSize] = useState(0);
+	const rafRef = useRef(0);
+	const lastSizeRef = useRef(0);
+	useDebugValue(`${label}: ${size}`);
+	const handleResize = useCallback((entries) => {
+		if (rafRef.current) cancelAnimationFrame(rafRef.current);
+		rafRef.current = requestAnimationFrame(() => {
+			const entry = entries[0];
+			const newSize = entry.borderBoxSize[0]?.blockSize || entry.contentRect.height;
+			if (Math.abs(newSize - lastSizeRef.current) >= 1) {
+				lastSizeRef.current = newSize;
+				setSize(newSize);
+				resizeSourceRef.current = "element";
+			}
+			rafRef.current = 0;
+		});
+	}, [resizeSourceRef]);
+	useLayoutEffect$1(() => {
+		if (!ref.current || !enabled) return;
+		const element = ref.current;
+		const resizeObserver = new ResizeObserver$1(handleResize);
+		const initialRect = element.getBoundingClientRect();
+		if (initialRect.height > 0 && lastSizeRef.current === 0) {
+			lastSizeRef.current = initialRect.height;
+			setSize(initialRect.height);
+		}
+		resizeObserver.observe(element, observerOptions);
+		return () => {
+			resizeObserver.disconnect();
+			if (rafRef.current) cancelAnimationFrame(rafRef.current);
+		};
+	}, [
+		ref,
+		handleResize,
+		enabled
+	]);
+	return enabled ? size : 0;
+}
+function useMaxHeight(controlledMaxHeight, registerReady, resizeSourceRef) {
+	const setReady = useMemo(() => registerReady("maxHeight"), [registerReady]);
+	const getSafeViewportHeight = useCallback((viewportHeight) => {
+		return Math.max(viewportHeight - 64, 300);
+	}, []);
+	const [maxHeight, setMaxHeight] = useState(() => {
+		const viewportHeight = typeof window !== "undefined" ? window.innerHeight : 0;
+		if (controlledMaxHeight) {
+			const controlledHeight = roundAndCheckForNaN(controlledMaxHeight);
+			return Math.min(controlledHeight, viewportHeight);
+		}
+		return getSafeViewportHeight(viewportHeight);
+	});
+	const ready = maxHeight > 0;
+	const raf = useRef(0);
+	useDebugValue(controlledMaxHeight ? "controlled" : "auto");
+	useEffect(() => {
+		if (ready) setReady();
+	}, [ready, setReady]);
+	useLayoutEffect$1(() => {
+		if (controlledMaxHeight) {
+			const controlledHeight = roundAndCheckForNaN(controlledMaxHeight);
+			const cappedHeight = Math.min(controlledHeight, window.innerHeight);
+			setMaxHeight(cappedHeight);
+			resizeSourceRef.current = "maxheightprop";
+			return;
+		}
+		const handleResize = () => {
+			if (raf.current) return;
+			raf.current = requestAnimationFrame(() => {
+				const safeHeight = getSafeViewportHeight(window.innerHeight);
+				setMaxHeight(safeHeight);
+				resizeSourceRef.current = "window";
+				raf.current = 0;
+			});
+		};
+		window.addEventListener("resize", handleResize);
+		const initialSafeHeight = getSafeViewportHeight(window.innerHeight);
+		setMaxHeight(initialSafeHeight);
+		resizeSourceRef.current = "window";
+		setReady();
+		return () => {
+			window.removeEventListener("resize", handleResize);
+			cancelAnimationFrame(raf.current);
+		};
+	}, [
+		controlledMaxHeight,
+		setReady,
+		resizeSourceRef,
+		getSafeViewportHeight
+	]);
+	return maxHeight;
+}
+//#endregion
+//#region src/BottomSheet/hooks/useSpring.tsx
+const useSpring$1 = () => {
+	const [spring, api] = useSpring(() => ({
+		config: {
+			friction: 32,
+			overshootClamping: true,
+			restDisplacementThreshold: .1,
+			restSpeedThreshold: 10,
+			tension: 280
+		},
+		maxHeight: 0,
+		maxSnap: 0,
+		minSnap: 0,
+		y: 0
+	}));
+	return [spring, api];
+};
+//#endregion
+//#region src/BottomSheet/hooks/useSpringInterpolationsTranslate3d.tsx
+/**
+* Experimental translate3d-based interpolations for GPU-accelerated bottom sheet animations.
+* This approach uses a static height and translates the entire sheet vertically using translate3d,
+* which leverages GPU acceleration for better performance on mobile devices.
+*/
+const useSpringInterpolationsTranslate3d = ({ spring }) => {
+	const interpolations = useMemo(() => {
+		const interpolateBorderRadius = to([spring.y, spring.maxHeight], (y, maxHeight) => {
+			const clamped = Math.max(0, Math.min(16, maxHeight - y));
+			return `${Math.round(clamped)}px`;
+		});
+		/**
+		* EXPERIMENTAL: Static height calculation
+		* Instead of animating height, we calculate the maximum height once and keep it static.
+		* This avoids expensive height recalculations during animation.
+		*/
+		const interpolateStaticHeight = to([spring.maxSnap], (maxSnap) => {
+			return `${Math.round(maxSnap)}px`;
+		});
+		/**
+		* EXPERIMENTAL: translate3d Y positioning
+		* This is the core of the GPU acceleration approach.
+		* We translate the entire bottom sheet vertically using translate3d.
+		*
+		* Logic based on spring system expectations:
+		* - When closed (y = 0): translate3d(0, maxSnap, 0) - hidden below viewport
+		* - When open (y = current snap): translate3d(0, 0, 0) - visible at normal position
+		* - During drag: interpolate between positions based on current y value
+		*/
+		const interpolateTranslate3d = to([spring.y, spring.maxSnap], (y, maxSnap) => {
+			const safeMaxSnap = maxSnap || (typeof window !== "undefined" ? window.innerHeight : 800);
+			if (y === 0) return `translate3d(0, ${Math.round(safeMaxSnap)}px, 0)`;
+			const offset = Math.max(0, safeMaxSnap - y);
+			return `translate3d(0, ${Math.round(offset)}px, 0)`;
+		});
+		const interpolateFiller = to([spring.y, spring.maxSnap], (y, maxSnap) => {
+			return Math.max(0, Math.ceil(y - maxSnap));
+		});
+		const interpolateContentOpacity = to([spring.y], () => 1);
+		return {
+			interpolateBackdrop: to([spring.y], () => 1),
+			interpolateBorderRadius,
+			interpolateContentOpacity,
+			interpolateFiller,
+			interpolateStaticHeight,
+			interpolateTranslate3d
+		};
+	}, [
+		spring.y,
+		spring.maxSnap,
+		spring.maxHeight
+	]);
+	return {
+		"--rsbs-content-opacity": interpolations.interpolateContentOpacity,
+		"--rsbs-backdrop-opacity": interpolations.interpolateBackdrop,
+		"--rsbs-antigap-scale-y": interpolations.interpolateFiller,
+		"--rsbs-overlay-h-static": interpolations.interpolateStaticHeight,
+		"--rsbs-overlay-translate3d": interpolations.interpolateTranslate3d,
+		"--rsbs-overlay-rounded": interpolations.interpolateBorderRadius
+	};
+};
+//#endregion
+//#region src/BottomSheet/hooks/useDragHandler.tsx
+/**
+* Custom hook to handle drag interactions for the bottom sheet
+*/
+const useDragHandler = ({ api, canDragRef, maxHeightRef, maxSnapRef, minSnapRef, onDismiss, preventScrollingRef, send, spring }) => {
+	const sendRef = useRef(send);
+	const apiRef = useRef(api);
+	const onDismissRef = useRef(onDismiss);
+	const springRef = useRef(spring);
+	const rafRef = useRef(0);
+	const lastUpdateRef = useRef(0);
+	const activeTimersRef = useRef(/* @__PURE__ */ new Set());
+	const activeRAFsRef = useRef(/* @__PURE__ */ new Set());
+	const cleanupPendingCalls = useCallback(() => {
+		activeRAFsRef.current.forEach((id) => {
+			cancelAnimationFrame(id);
+		});
+		activeRAFsRef.current.clear();
+		activeTimersRef.current.forEach((id) => {
+			clearTimeout(id);
+		});
+		activeTimersRef.current.clear();
+		if (rafRef.current) {
+			cancelAnimationFrame(rafRef.current);
+			rafRef.current = 0;
+		}
+	}, []);
+	useEffect(() => {
+		return () => {
+			cleanupPendingCalls();
+		};
+	}, [cleanupPendingCalls]);
+	sendRef.current = send;
+	apiRef.current = api;
+	onDismissRef.current = onDismiss;
+	springRef.current = spring;
+	return { handleDrag: useCallback((state) => {
+		if (state?.first) cleanupPendingCalls();
+		const args = state?.args || [];
+		const cancel = state?.cancel;
+		const direction = state?.direction?.[1] || 0;
+		const down = state?.down;
+		const first = state?.first;
+		const last = state?.last;
+		const memo = state?.memo ?? springRef.current.y.get();
+		const movement = state?.movement || [0, 0];
+		const tap = state?.tap;
+		const velocity = state?.velocity || [0, 0];
+		const closeOnTap = args[0]?.closeOnTap || false;
+		const _my = movement[1];
+		const velocityY = velocity[1];
+		const my = _my * -1;
+		if (!canDragRef.current) {
+			cancel();
+			return memo;
+		}
+		if (onDismissRef.current && closeOnTap && tap) {
+			cancel();
+			const timerId = setTimeout(() => {
+				activeTimersRef.current.delete(timerId);
+				onDismissRef.current?.();
+			}, 0);
+			activeTimersRef.current.add(timerId);
+			return memo;
+		}
+		if (tap) return memo;
+		const rawY = memo + my;
+		const velocityFactor = Math.min(Math.abs(velocityY), 2);
+		const predictedDistance = my * velocityFactor * .3;
+		const unclamped = rawY + predictedDistance;
+		const predictedY = onDismissRef.current ? Math.min(maxSnapRef.current, unclamped) : Math.max(minSnapRef.current, Math.min(maxSnapRef.current, unclamped));
+		if (!down && onDismissRef.current && direction > 0 && rawY + predictedDistance < minSnapRef.current / 2) {
+			cancel();
+			onDismissRef.current();
+			return memo;
+		}
+		const newY = down ? !onDismissRef.current && minSnapRef.current === maxSnapRef.current ? rubberbandIfOutOfBounds(rawY, minSnapRef.current * .5, minSnapRef.current * 1.5, .55) : rubberbandIfOutOfBounds(rawY, onDismissRef.current ? 0 : minSnapRef.current, maxSnapRef.current, .55) : predictedY;
+		preventScrollingRef.current = false;
+		if (first) sendRef.current("DRAG");
+		if (last) {
+			const timerId1 = setTimeout(() => {
+				activeTimersRef.current.delete(timerId1);
+				const closePosition = rawY + my * velocityFactor * .3;
+				if (onDismissRef.current && (closePosition < minSnapRef.current * .75 || velocityY < -.5 && closePosition < minSnapRef.current)) {
+					cancel();
+					const timerId2 = setTimeout(() => {
+						activeTimersRef.current.delete(timerId2);
+						onDismissRef.current?.();
+					}, 0);
+					activeTimersRef.current.add(timerId2);
+				} else sendRef.current("SNAP", {
+					source: "dragging",
+					velocity: Math.abs(velocityY) > .01 ? Math.abs(velocityY) : .5,
+					y: newY
+				});
+			}, 0);
+			activeTimersRef.current.add(timerId1);
+			return memo;
+		}
+		const now = performance.now();
+		if (now - lastUpdateRef.current < 16) {
+			if (rafRef.current) {
+				activeRAFsRef.current.delete(rafRef.current);
+				cancelAnimationFrame(rafRef.current);
+			}
+			rafRef.current = requestAnimationFrame(() => {
+				activeRAFsRef.current.delete(rafRef.current);
+				apiRef.current.start({
+					config: { velocity: velocityY },
+					immediate: true,
+					maxHeight: maxHeightRef.current,
+					maxSnap: maxSnapRef.current,
+					minSnap: minSnapRef.current,
+					y: newY
+				});
+				lastUpdateRef.current = performance.now();
+				rafRef.current = 0;
+			});
+			activeRAFsRef.current.add(rafRef.current);
+		} else {
+			apiRef.current.start({
+				config: { velocity: velocityY },
+				immediate: true,
+				maxHeight: maxHeightRef.current,
+				maxSnap: maxSnapRef.current,
+				minSnap: minSnapRef.current,
+				y: newY
+			});
+			lastUpdateRef.current = now;
+		}
+		return memo;
+	}, [
+		canDragRef,
+		preventScrollingRef,
+		minSnapRef,
+		maxSnapRef,
+		maxHeightRef,
+		cleanupPendingCalls
+	]) };
+};
+//#endregion
+//#region src/BottomSheet/hooks/useBottomSheetServices.tsx
+/**
+* Custom hook to provide state machine services for the bottom sheet
+*/
+const useBottomSheetServices = ({ ariaHiderRef, asyncSet, canDragRef, defaultSnapRef, findSnapRef, focusTrapRef, heightRef, lastSnapRef, maxHeightRef, maxSnapRef, minSnapRef, onSpringEndRef, onSpringStartRef, prefersReducedMotion, resizeSourceRef, scrollLockRef }) => {
+	return useCallback(() => ({
+		activate: async () => {
+			canDragRef.current = true;
+			await Promise.all([
+				scrollLockRef.current.activate(),
+				focusTrapRef.current.activate(),
+				ariaHiderRef.current.activate()
+			].filter(Boolean));
+		},
+		closeSmoothly: async () => {
+			asyncSet({
+				immediate: true,
+				minSnap: heightRef.current
+			});
+			heightRef.current = 0;
+			await asyncSet({
+				immediate: prefersReducedMotion.current || false,
+				maxHeight: maxHeightRef.current,
+				maxSnap: maxSnapRef.current,
+				y: 0
+			});
+		},
+		deactivate: async () => {
+			focusTrapRef.current.deactivate();
+			scrollLockRef.current.deactivate();
+			ariaHiderRef.current.deactivate();
+			canDragRef.current = false;
+		},
+		onCloseEnd: async () => {},
+		onCloseStart: async () => onSpringStartRef.current?.({ type: "CLOSE" }),
+		onOpenEnd: async () => onSpringEndRef.current?.({ type: "OPEN" }),
+		onOpenStart: async () => onSpringStartRef.current?.({ type: "OPEN" }),
+		onResizeEnd: async () => onSpringEndRef.current?.({
+			source: resizeSourceRef.current,
+			type: "RESIZE"
+		}),
+		onResizeStart: async () => onSpringStartRef.current?.({
+			source: resizeSourceRef.current,
+			type: "RESIZE"
+		}),
+		onSnapEnd: async (context) => onSpringEndRef.current?.({
+			source: context.snapSource || "custom",
+			type: "SNAP"
+		}),
+		onSnapStart: async (context) => onSpringStartRef.current?.({
+			source: context.snapSource || "custom",
+			type: "SNAP"
+		}),
+		openImmediately: async () => {
+			heightRef.current = defaultSnapRef.current;
+			await asyncSet({
+				immediate: true,
+				maxHeight: maxHeightRef.current,
+				maxSnap: maxSnapRef.current,
+				minSnap: defaultSnapRef.current,
+				y: defaultSnapRef.current
+			});
+		},
+		openSmoothly: async () => {
+			const maxHeight = maxHeightRef.current || (typeof window !== "undefined" ? window.innerHeight : 800);
+			const defaultSnap = defaultSnapRef.current || 300;
+			const maxSnap = maxSnapRef.current || maxHeight;
+			heightRef.current = defaultSnap;
+			await asyncSet({
+				from: {
+					maxHeight,
+					maxSnap,
+					minSnap: defaultSnap,
+					y: 0
+				},
+				immediate: prefersReducedMotion.current || false,
+				to: {
+					maxHeight,
+					maxSnap,
+					minSnap: defaultSnap,
+					y: defaultSnap
+				}
+			});
+		},
+		renderVisuallyHidden: async () => {
+			const maxHeight = maxHeightRef.current || (typeof window !== "undefined" ? window.innerHeight : 800);
+			const defaultSnap = defaultSnapRef.current || 300;
+			await asyncSet({
+				immediate: true,
+				maxHeight,
+				maxSnap: maxSnapRef.current || maxHeight,
+				minSnap: defaultSnap,
+				y: defaultSnap
+			});
+		},
+		resizeSmoothly: async () => {
+			const snap = findSnapRef.current(heightRef.current);
+			heightRef.current = snap;
+			lastSnapRef.current = snap;
+			await asyncSet({
+				immediate: resizeSourceRef.current === "element" ? prefersReducedMotion.current || false : true,
+				maxHeight: maxHeightRef.current,
+				maxSnap: maxSnapRef.current,
+				minSnap: minSnapRef.current,
+				y: snap
+			});
+		},
+		snapSmoothly: async (context) => {
+			const snap = findSnapRef.current(context.y || 0, context.velocity);
+			heightRef.current = snap;
+			lastSnapRef.current = snap;
+			await asyncSet({
+				config: { velocity: context.velocity || 1 },
+				immediate: prefersReducedMotion.current || false,
+				maxHeight: maxHeightRef.current,
+				maxSnap: maxSnapRef.current,
+				minSnap: minSnapRef.current,
+				y: snap
+			});
+		}
+	}), [
+		canDragRef,
+		heightRef,
+		lastSnapRef,
+		defaultSnapRef,
+		maxHeightRef,
+		maxSnapRef,
+		minSnapRef,
+		findSnapRef,
+		resizeSourceRef,
+		prefersReducedMotion,
+		asyncSet,
+		scrollLockRef,
+		focusTrapRef,
+		ariaHiderRef,
+		onSpringStartRef,
+		onSpringEndRef
+	]);
+};
+//#endregion
+//#region src/BottomSheet/state/atoms.ts
+/**
+* Core state atoms
+*/
+const bottomSheetStateAtom = atom("closed");
+const bottomSheetContextAtom = atom({ initialState: "CLOSED" });
+/**
+* Derived state atoms
+*/
+const isOpenAtom = atom((get) => {
+	const state = get(bottomSheetStateAtom);
+	return state === "open" || state === "opening" || state === "dragging" || state === "snapping" || state === "resizing";
+});
+const isClosedAtom = atom((get) => {
+	return get(bottomSheetStateAtom) === "closed";
+});
+const isTransitioningAtom = atom((get) => {
+	const state = get(bottomSheetStateAtom);
+	return state === "opening" || state === "closing" || state === "snapping" || state === "resizing";
+});
+const isDraggingAtom = atom((get) => {
+	return get(bottomSheetStateAtom) === "dragging";
+});
+/**
+* Action atoms for state transitions
+*/
+const sendEventAtom = atom(null, (get, set, event) => {
+	const currentState = get(bottomSheetStateAtom);
+	const context = get(bottomSheetContextAtom);
+	switch (event.type) {
+		case "OPEN":
+			if (currentState === "closed" || currentState === "closing") set(bottomSheetStateAtom, "opening");
+			break;
+		case "CLOSE":
+			if (currentState !== "closed" && currentState !== "closing") set(bottomSheetStateAtom, "closing");
+			break;
+		case "DRAG":
+			if (currentState === "open" || currentState === "opening" && context.initialState === "OPEN" || currentState === "snapping" || currentState === "resizing") set(bottomSheetStateAtom, "dragging");
+			break;
+		case "SNAP":
+			if (currentState === "dragging" || currentState === "open") {
+				const newContext = {
+					...context,
+					snapSource: event.payload.source,
+					velocity: event.payload.velocity,
+					y: event.payload.y
+				};
+				set(bottomSheetContextAtom, newContext);
+				set(bottomSheetStateAtom, "snapping");
+			}
+			break;
+		case "RESIZE":
+			if (currentState === "open") set(bottomSheetStateAtom, "resizing");
+			break;
+		default: break;
+	}
+});
+/**
+* Transition completion atoms
+*/
+const completeTransitionAtom = atom(null, (get, set, targetState) => {
+	const currentState = get(bottomSheetStateAtom);
+	if (get(isTransitioningAtom) || currentState === "dragging") set(bottomSheetStateAtom, targetState);
+});
+/**
+* Reset atom for cleanup
+*/
+const resetStateAtom = atom(null, (get, set, initialState = "CLOSED") => {
+	set(bottomSheetStateAtom, initialState === "OPEN" ? "open" : "closed");
+	set(bottomSheetContextAtom, {
+		initialState,
+		snapSource: void 0,
+		velocity: void 0,
+		y: void 0
+	});
+});
+//#endregion
+//#region src/BottomSheet/state/useBottomSheetStateMachine.ts
+/**
+* Hook that provides bottom sheet state machine functionality using Jotai
+*/
+const useBottomSheetStateMachine = (services, actions, initialContext) => {
+	const [state] = useAtom(bottomSheetStateAtom);
+	const [context, setContext] = useAtom(bottomSheetContextAtom);
+	const sendEvent = useSetAtom(sendEventAtom);
+	const completeTransition = useSetAtom(completeTransitionAtom);
+	const resetState = useSetAtom(resetStateAtom);
+	const isOpen = useAtomValue(isOpenAtom);
+	const isClosed = useAtomValue(isClosedAtom);
+	const isTransitioning = useAtomValue(isTransitioningAtom);
+	const isDragging = useAtomValue(isDraggingAtom);
+	const prevStateRef = useRef(state);
+	const servicesRef = useRef(services);
+	const actionsRef = useRef(actions);
+	useEffect(() => {
+		servicesRef.current = services;
+		actionsRef.current = actions;
+	}, [services, actions]);
+	useEffect(() => {
+		setContext(initialContext);
+	}, [setContext]);
+	useEffect(() => {
+		const currentServices = servicesRef.current;
+		const currentActions = actionsRef.current;
+		const prevState = prevStateRef.current;
+		const currentContext = context;
+		const handleStateTransition = async () => {
+			try {
+				switch (state) {
+					case "opening":
+						if (prevState === "closed") {
+							await currentServices.onOpenStart();
+							if (currentContext.initialState === "OPEN") {
+								await currentServices.renderVisuallyHidden();
+								await currentServices.activate();
+								await currentServices.openImmediately();
+							} else {
+								await currentServices.renderVisuallyHidden();
+								await currentServices.activate();
+								await currentServices.openSmoothly();
+							}
+							await currentServices.onOpenEnd();
+							completeTransition("open");
+						} else if (prevState === "closing") {
+							currentActions.onCloseCancel();
+							await currentServices.onOpenStart();
+							await currentServices.renderVisuallyHidden();
+							await currentServices.activate();
+							await currentServices.openSmoothly();
+							await currentServices.onOpenEnd();
+							completeTransition("open");
+						}
+						break;
+					case "closing":
+						if (prevState !== "closed") {
+							if (prevState === "opening") currentActions.onOpenCancel();
+							else if (prevState === "resizing") currentActions.onResizeCancel();
+							else if (prevState === "snapping") currentActions.onSnapCancel(currentContext);
+							await currentServices.onCloseStart();
+							await currentServices.deactivate();
+							await currentServices.closeSmoothly();
+							await currentServices.onCloseEnd();
+							currentActions.onCloseEnd();
+							completeTransition("closed");
+						}
+						break;
+					case "resizing":
+						if (prevState === "open" || prevState === "opening") {
+							await currentServices.onResizeStart();
+							await currentServices.resizeSmoothly();
+							await currentServices.onResizeEnd();
+							completeTransition("open");
+						}
+						break;
+					case "snapping":
+						if (prevState === "dragging" || prevState === "open") {
+							await currentServices.onSnapStart(currentContext);
+							await currentServices.snapSmoothly(currentContext);
+							await currentServices.onSnapEnd(currentContext);
+							completeTransition("open");
+						}
+						break;
+					case "dragging":
+						if (prevState === "opening") currentActions.onOpenEnd();
+						else if (prevState === "closing") currentActions.onCloseCancel();
+						else if (prevState === "resizing") currentActions.onResizeCancel();
+						else if (prevState === "snapping") currentActions.onSnapCancel(currentContext);
+						break;
+					default: break;
+				}
+			} catch (error) {
+				console.error("Bottom sheet state transition error:", error);
+				if (state === "opening" || state === "closing" || state === "resizing" || state === "snapping") completeTransition(state === "closing" ? "closed" : "open");
+			}
+		};
+		if (prevState !== state) {
+			handleStateTransition();
+			prevStateRef.current = state;
+		}
+	}, [state, completeTransition]);
+	const send = useCallback((type, payload) => {
+		if (type === "SNAP" && payload) sendEvent({
+			payload,
+			type: "SNAP"
+		});
+		else sendEvent({ type });
+	}, [sendEvent]);
+	const reset = useCallback((initialState = "CLOSED") => {
+		resetState(initialState);
+		prevStateRef.current = initialState === "OPEN" ? "open" : "closed";
+	}, [resetState]);
+	return {
+		current: {
+			context,
+			matches: (stateName) => state === stateName,
+			value: state
+		},
+		isClosed,
+		isDragging,
+		isOpen,
+		isTransitioning,
+		reset,
+		send,
+		state
+	};
+};
+//#endregion
+//#region src/BottomSheet/BottomSheet.tsx
+const AnimatedDiv = animated.div;
+/**
+* BottomSheet - GPU-accelerated version using translate3d transforms
+*
+* Key features:
+* - Uses translate3d for positioning instead of height + translateY
+* - Static height calculation for better performance
+* - Optimized for mobile device GPU acceleration
+* - Reduced layout thrashing during animations
+* - Viewport height limiting with 64px buffer to prevent sheet from exceeding screen bounds
+* - Hard cap at actual viewport height for all maxHeight props and snap points
+*/
+const BottomSheet$1 = forwardRef(function BottomSheetInternal({ children, className, defaultSnap: getDefaultSnap = _defaultSnap, disableScroll = false, footer, header, initialFocusRef, initialState, lastSnapRef, maxHeight: controlledMaxHeight, minHeight: controlledMinHeight = 300, onCloseEnd, onDismiss, onSpringCancel, onSpringEnd, onSpringStart, open: _open, preload = false, scrollLocking = true, snapPoints: getSnapPoints = _snapPoints, style, ...props }, forwardRef) {
+	const { ready, registerReady } = useReady();
+	const canDragRef = useRef(false);
+	const onCloseEndRef = useRef(onCloseEnd);
+	const onSpringStartRef = useRef(onSpringStart);
+	const onSpringCancelRef = useRef(onSpringCancel);
+	const onSpringEndRef = useRef(onSpringEnd);
+	useEffect(() => {
+		onCloseEndRef.current = onCloseEnd;
+		onSpringStartRef.current = onSpringStart;
+		onSpringCancelRef.current = onSpringCancel;
+		onSpringEndRef.current = onSpringEnd;
+	}, [
+		onCloseEnd,
+		onSpringCancel,
+		onSpringStart,
+		onSpringEnd
+	]);
+	const [spring, api] = useSpring$1();
+	const [showContent, setShowContent] = useState(_open);
+	const containerRef = useRef(null);
+	const scrollRef = useRef(null);
+	const contentRef = useRef(null);
+	const headerRef = useRef(null);
+	const footerRef = useRef(null);
+	const overlayRef = useRef(null);
+	const heightRef = useRef(0);
+	const resizeSourceRef = useRef("window");
+	const preventScrollingRef = useRef(false);
+	const { isScrollable, isScrolledToBottom } = useOptimizedScrollState(scrollRef, ready);
+	const prefersReducedMotion = useReducedMotion();
+	const scrollLockRef = useScrollLock({
+		enabled: ready && scrollLocking,
+		reserveScrollBarGap: true,
+		targetRef: scrollRef
+	});
+	const ariaHiderRef = useAriaHider({
+		enabled: ready,
+		targetRef: containerRef
+	});
+	const focusTrapRef = useFocusTrap({
+		enabled: ready && initialFocusRef !== false,
+		fallbackRef: overlayRef,
+		initialFocusRef: initialFocusRef || void 0,
+		targetRef: containerRef
+	});
+	const { findSnap, maxHeight, maxSnap, minSnap } = useSnapPoints({
+		contentRef,
+		controlledMaxHeight,
+		controlledMinHeight,
+		footerEnabled: Boolean(footer),
+		footerRef,
+		getSnapPoints,
+		headerEnabled: Boolean(header),
+		headerRef,
+		heightRef,
+		lastSnapRef,
+		ready,
+		registerReady,
+		resizeSourceRef
+	});
+	const maxHeightRef = useRef(maxHeight);
+	const minSnapRef = useRef(minSnap);
+	const maxSnapRef = useRef(maxSnap);
+	const findSnapRef = useRef(findSnap);
+	const defaultSnapRef = useRef(0);
+	useLayoutEffect$1(() => {
+		maxHeightRef.current = maxHeight;
+		maxSnapRef.current = maxSnap;
+		minSnapRef.current = minSnap;
+		findSnapRef.current = findSnap;
+		defaultSnapRef.current = findSnap(getDefaultSnap);
+	}, [
+		findSnap,
+		getDefaultSnap,
+		maxHeight,
+		maxSnap,
+		minSnap
+	]);
+	const services = useBottomSheetServices({
+		ariaHiderRef,
+		asyncSet: useCallback(({ onRest, ...opts }) => {
+			return new Promise((resolve) => api.start({
+				...opts,
+				onRest: (result) => {
+					resolve();
+					onRest?.(result);
+				}
+			}));
+		}, [api]),
+		canDragRef,
+		defaultSnapRef,
+		findSnapRef,
+		focusTrapRef,
+		heightRef,
+		lastSnapRef,
+		maxHeightRef,
+		maxSnapRef,
+		minSnapRef,
+		onSpringCancelRef,
+		onSpringEndRef,
+		onSpringStartRef,
+		prefersReducedMotion,
+		resizeSourceRef,
+		scrollLockRef
+	});
+	const actions = useCallback(() => ({
+		onCloseCancel: () => onSpringCancelRef.current?.({ type: "CLOSE" }),
+		onCloseEnd: () => {
+			onSpringEndRef.current?.({ type: "CLOSE" });
+			onCloseEndRef.current?.();
+		},
+		onOpenCancel: () => onSpringCancelRef.current?.({ type: "OPEN" }),
+		onOpenEnd: () => onSpringEndRef.current?.({ type: "OPEN" }),
+		onResizeCancel: () => onSpringCancelRef.current?.({
+			source: resizeSourceRef.current,
+			type: "RESIZE"
+		}),
+		onResizeEnd: () => onSpringEndRef.current?.({
+			source: resizeSourceRef.current,
+			type: "RESIZE"
+		}),
+		onSnapCancel: (context) => onSpringCancelRef.current?.({
+			source: context.snapSource || "custom",
+			type: "SNAP"
+		}),
+		onSnapEnd: (context) => onSpringEndRef.current?.({
+			source: context.snapSource || "custom",
+			type: "SNAP"
+		})
+	}), []);
+	const initialContext = useMemo(() => ({ initialState }), [initialState]);
+	const { current, reset, send } = useBottomSheetStateMachine(services(), actions(), initialContext);
+	useEffect(() => {
+		if (_open) send("OPEN");
+		else {
+			const activeElement = document.activeElement;
+			if (activeElement instanceof HTMLElement && containerRef.current?.contains(activeElement)) activeElement.blur();
+			send("CLOSE");
+		}
+	}, [
+		_open,
+		send,
+		current.value
+	]);
+	useEffect(() => {
+		if (_open) setShowContent(true);
+		else {
+			const timeoutId = setTimeout(() => setShowContent(false), 50);
+			return () => clearTimeout(timeoutId);
+		}
+	}, [_open]);
+	useLayoutEffect$1(() => {
+		if (maxHeight || maxSnap || minSnap) send("RESIZE");
+	}, [
+		maxHeight,
+		maxSnap,
+		minSnap,
+		send
+	]);
+	useEffect(() => () => {
+		try {
+			scrollLockRef.current.deactivate();
+		} catch (e) {
+			if (nodeEnv !== "production") console.error("❌ ScrollLock deactivation error:", e);
+		}
+		try {
+			focusTrapRef.current.deactivate();
+		} catch (e) {
+			if (nodeEnv !== "production") console.error("❌ FocusTrap deactivation error:", e);
+		}
+		try {
+			ariaHiderRef.current.deactivate();
+		} catch (e) {
+			if (nodeEnv !== "production") console.error("❌ AriaHider deactivation error:", e);
+		}
+		try {
+			api.stop();
+		} catch (e) {
+			if (nodeEnv !== "production") console.error("❌ Spring API stop error:", e);
+		}
+		try {
+			reset("CLOSED");
+		} catch (e) {
+			if (nodeEnv !== "production") console.error("❌ State machine reset error:", e);
+		}
+	}, [
+		api,
+		ariaHiderRef,
+		focusTrapRef,
+		reset,
+		scrollLockRef
+	]);
+	useImperativeHandle(forwardRef, () => ({
+		get height() {
+			return heightRef.current;
+		},
+		snapTo: (numberOrCallback, { source = "custom", velocity = 1 } = {}) => {
+			send("SNAP", {
+				source,
+				velocity,
+				y: findSnapRef.current(numberOrCallback, velocity)
+			});
+		}
+	}), [send]);
+	const { handleDrag } = useDragHandler({
+		api,
+		canDragRef,
+		maxHeightRef,
+		maxSnapRef,
+		minSnapRef,
+		onDismiss,
+		preventScrollingRef,
+		send,
+		spring
+	});
+	const bind = useDrag(handleDrag, useMemo(() => ({
+		filterTaps: true,
+		rubberband: true,
+		threshold: 5
+	}), []));
+	if (nodeEnv === "development") {
+		if (Number.isNaN(maxSnapRef.current)) throw new TypeError("maxSnapRef is NaN!!");
+		if (Number.isNaN(minSnapRef.current)) throw new TypeError("minSnapRef is NaN!!");
+	}
+	const interpolations = useSpringInterpolationsTranslate3d({ spring });
+	return /* @__PURE__ */ jsxs(AnimatedDiv, {
+		...props,
+		className: cn("fixed bottom-0 left-0 right-0 z-[10001]", "touch-none select-none", preload ? "transition-opacity duration-150" : "transition-opacity duration-300", {
+			"opacity-0": !showContent,
+			"opacity-100": showContent
+		}, className),
+		ref: containerRef,
+		style: {
+			...interpolations,
+			...style,
+			...preload && !_open && {
+				pointerEvents: "none",
+				visibility: "hidden"
+			}
+		},
+		children: [
+			/* @__PURE__ */ jsx(BottomSheetBackdrop, {
+				bind,
+				blocking: true
+			}),
+			/* @__PURE__ */ jsx("div", { className: cn("fixed bottom-0 left-0 right-0", "h-px bg-background-primary", "origin-bottom", "scale-y-[var(--rsbs-antigap-scale-y,0)]", "pointer-events-none", "will-change-transform") }),
+			/* @__PURE__ */ jsx(BottomSheetOverlayTranslate3d, {
+				bind,
+				contentRef,
+				disableScroll,
+				footer,
+				footerRef,
+				header,
+				headerRef,
+				isScrollable,
+				isScrolledToBottom,
+				onDismiss,
+				overlayRef,
+				scrollRef,
+				children
+			})
+		]
+	});
+});
+function _defaultSnap({ lastSnap, snapPoints }) {
+	return lastSnap ?? Math.min(...snapPoints);
+}
+function _snapPoints({ minHeight }) {
+	return minHeight;
+}
+//#endregion
+//#region src/BottomSheet/index.tsx
+/**
+* BottomSheet component with SSR support and proper animation lifecycle management
+*/
+const BottomSheet = forwardRef(function BottomSheet({ onCloseEnd, onDismiss, onSpringEnd, onSpringStart, ...props }, ref) {
+	const [mounted, setMounted] = useState(false);
+	const [modalTarget, setModalTarget] = useState(null);
+	const [isAnimating, setIsAnimating] = useState(false);
+	const [isOpening, setIsOpening] = useState(false);
+	const [shouldShow, setShouldShow] = useState(false);
+	const timerRef = useRef(0);
+	const lastSnapRef = useRef(0);
+	const shouldCallOnDismiss = useRef(false);
+	const lastActionTime = useRef(0);
+	const isForceClosedRef = useRef(false);
+	const initialStateRef = useRef("CLOSED");
+	useEffect(() => {
+		const target = document.querySelector(".hui-modal-target");
+		if (!target) throw new Error("Modal target not found, add one in the DOM tree.");
+		setModalTarget(target);
+	}, []);
+	const startCloseTransition = useCallback((callOnDismiss = false) => {
+		setIsAnimating(true);
+		shouldCallOnDismiss.current = callOnDismiss;
+	}, []);
+	const handleInternalDismiss = useCallback(() => {
+		const now = Date.now();
+		if (isOpening || isAnimating || now - lastActionTime.current < 150) return;
+		lastActionTime.current = now;
+		isForceClosedRef.current = true;
+		onDismiss?.();
+	}, [
+		onDismiss,
+		isOpening,
+		isAnimating
+	]);
+	useEffect(() => {
+		if (mounted && !props.open && !isAnimating) startCloseTransition(false);
+	}, [
+		mounted,
+		props.open,
+		isAnimating,
+		startCloseTransition
+	]);
+	useLayoutEffect$1(() => {
+		if (props.open) {
+			const now = Date.now();
+			if (now - lastActionTime.current < 50) return;
+			cancelAnimationFrame(timerRef.current);
+			setMounted(true);
+			setIsAnimating(false);
+			setIsOpening(true);
+			shouldCallOnDismiss.current = false;
+			lastActionTime.current = now;
+			isForceClosedRef.current = false;
+			const delayId = requestAnimationFrame(() => {
+				if (props.open) setShouldShow(true);
+			});
+			return () => {
+				cancelAnimationFrame(delayId);
+				initialStateRef.current = "CLOSED";
+				setShouldShow(false);
+			};
+		}
+		setShouldShow(false);
+	}, [props.open]);
+	const handleSpringStart = useCallback(async function handleSpringStart(event) {
+		if (!props.open && event.type !== "CLOSE") return;
+		await onSpringStart?.(event);
+		if (event.type === "OPEN") cancelAnimationFrame(timerRef.current);
+	}, [onSpringStart, props.open]);
+	const handleSpringEnd = useCallback(async function handleSpringEnd(event) {
+		if ((isForceClosedRef.current || !props.open) && event.type !== "CLOSE") return;
+		await onSpringEnd?.(event);
+		if (event.type === "OPEN") setIsOpening(false);
+		else if (event.type === "CLOSE") {
+			setIsAnimating(false);
+			setIsOpening(false);
+			shouldCallOnDismiss.current = false;
+			timerRef.current = requestAnimationFrame(() => setMounted(false));
+		}
+	}, [onSpringEnd, props.open]);
+	useEffect(() => {
+		if (!props.open && mounted) {
+			const fallbackTimeoutId = setTimeout(() => {
+				if (!props.open) {
+					cancelAnimationFrame(timerRef.current);
+					setMounted(false);
+					setIsAnimating(false);
+					shouldCallOnDismiss.current = false;
+					isForceClosedRef.current = true;
+				}
+			}, 500);
+			return () => clearTimeout(fallbackTimeoutId);
+		}
+	}, [props.open, mounted]);
+	useEffect(() => {
+		return () => {
+			setTimeout(() => {
+				try {
+					const modalTarget = document.querySelector(".hui-modal-target");
+					if (modalTarget && modalTarget.children.length === 0) modalTarget.innerHTML = "";
+				} catch {}
+			}, 200);
+		};
+	}, []);
+	if (!mounted || !modalTarget) return null;
+	const { onDismiss: _, ...bottomSheetProps } = props;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		"aria-hidden": !props.open,
+		role: "presentation",
+		children: /* @__PURE__ */ jsx(BottomSheet$1, {
+			...bottomSheetProps,
+			initialState: initialStateRef.current,
+			lastSnapRef,
+			onCloseEnd,
+			onDismiss: handleInternalDismiss,
+			onSpringEnd: handleSpringEnd,
+			onSpringStart: handleSpringStart,
+			open: shouldShow,
+			ref
+		})
+	}), modalTarget);
+});
+//#endregion
+export { BottomSheet as t };
+
+//# sourceMappingURL=BottomSheet-ZV_eq3xt.mjs.map