@yahoo/uds 3.114.0-beta.2 → 3.114.0

package/dist/components/client/BottomSheet/useBottomSheetDrag.js

@@ -0,0 +1,185 @@
+"use client";
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { clampIndex, isScrollable, shouldPreventDragFromTarget } from "./utils.js";
+import { useCallback, useRef } from "react";
+import { clamp } from "lodash-es";
+
+//#region src/components/client/BottomSheet/useBottomSheetDrag.ts
+const DEFAULT_SCROLL_LOCK_TIMEOUT_MS = 100;
+const OPEN_SCROLL_LOCK_TIMEOUT_MS = 500;
+/**
+* Drag-to-dismiss velocity threshold in pixels/second. A fast downward swipe
+* exceeding this speed dismisses the sheet (regardless of distance dragged).
+*/
+const DRAG_DISMISS_VELOCITY_PX_PER_SECOND = 400;
+function useBottomSheetDrag({ enableDrag, dismissible, store, sheetRef, isDraggingRef, activeSnapIndex, snapPointTranslatesPx, maxSnapPointPx, resolvedSnapPointsLength, resolvedDismissThresholdPx, emitSnapPointChange, setTranslateImmediate, openTimeRef, lastTimeDragPreventedRef }) {
+	const isAllowedToDragRef = useRef(false);
+	const dragStartTimeRef = useRef(null);
+	const pointerStartRef = useRef(null);
+	const dragStartTranslateRef = useRef(0);
+	const dragStartIndexRef = useRef(0);
+	const shouldDragFromTarget = useCallback((target, isDraggingUp) => {
+		if (!sheetRef.current) return false;
+		if (shouldPreventDragFromTarget(target)) return false;
+		const selection = window.getSelection();
+		if (selection?.toString() && sheetRef.current?.contains(selection.anchorNode)) return false;
+		const now = Date.now();
+		const openTime = openTimeRef.current;
+		if (openTime && now - openTime < OPEN_SCROLL_LOCK_TIMEOUT_MS) return false;
+		const currentHeight = sheetRef.current.getBoundingClientRect().height;
+		if (currentHeight < maxSnapPointPx) return true;
+		const lastPrevented = lastTimeDragPreventedRef.current;
+		if (lastPrevented && now - lastPrevented < DEFAULT_SCROLL_LOCK_TIMEOUT_MS && currentHeight >= maxSnapPointPx) return false;
+		if (isDraggingUp) {
+			lastTimeDragPreventedRef.current = now;
+			return false;
+		}
+		let element = target instanceof HTMLElement ? target : null;
+		while (element) {
+			if (isScrollable(element)) {
+				if (element.scrollTop !== 0) {
+					lastTimeDragPreventedRef.current = now;
+					return false;
+				}
+			}
+			if (element === sheetRef.current || element.getAttribute("role") === "dialog") return true;
+			element = element.parentNode;
+		}
+		return true;
+	}, [
+		lastTimeDragPreventedRef,
+		maxSnapPointPx,
+		openTimeRef,
+		sheetRef
+	]);
+	const cancelDrag = useCallback(() => {
+		isDraggingRef.current = false;
+		isAllowedToDragRef.current = false;
+		dragStartTimeRef.current = null;
+		pointerStartRef.current = null;
+		sheetRef.current?.style.removeProperty("transition");
+	}, [isDraggingRef, sheetRef]);
+	const onPointerDown = useCallback((event) => {
+		if (!enableDrag) return;
+		if (event.button !== 0) return;
+		if (shouldPreventDragFromTarget(event.target)) return;
+		isDraggingRef.current = false;
+		isAllowedToDragRef.current = false;
+		dragStartTimeRef.current = performance.now();
+		pointerStartRef.current = {
+			x: event.pageX,
+			y: event.pageY
+		};
+		dragStartTranslateRef.current = maxSnapPointPx - (sheetRef.current?.getBoundingClientRect().height ?? 0);
+		dragStartIndexRef.current = activeSnapIndex;
+	}, [
+		activeSnapIndex,
+		enableDrag,
+		isDraggingRef,
+		maxSnapPointPx,
+		sheetRef
+	]);
+	const onPointerMove = useCallback((event) => {
+		if (!enableDrag) return;
+		const startPoint = pointerStartRef.current;
+		const sheetEl = sheetRef.current;
+		if (!startPoint || !sheetEl) return;
+		if (!isAllowedToDragRef.current && event.buttons === 0) {
+			cancelDrag();
+			return;
+		}
+		const { x: startX, y: startY } = startPoint;
+		const dx = event.pageX - startX;
+		const dy = event.pageY - startY;
+		const swipeStartThreshold = event.pointerType === "touch" ? 10 : 2;
+		if (!isAllowedToDragRef.current) {
+			if (Math.abs(dy) < swipeStartThreshold) return;
+			if (Math.abs(dx) > Math.abs(dy)) {
+				pointerStartRef.current = null;
+				return;
+			}
+		}
+		const isDraggingUp = startY - event.pageY > 0;
+		if (!isAllowedToDragRef.current && !shouldDragFromTarget(event.target, isDraggingUp)) return;
+		if (!isAllowedToDragRef.current) {
+			event.currentTarget.setPointerCapture(event.pointerId);
+			isAllowedToDragRef.current = true;
+			isDraggingRef.current = true;
+		}
+		sheetEl.style.transition = "none";
+		setTranslateImmediate(clamp(dragStartTranslateRef.current + dy, 0, maxSnapPointPx));
+	}, [
+		enableDrag,
+		isDraggingRef,
+		maxSnapPointPx,
+		setTranslateImmediate,
+		shouldDragFromTarget,
+		sheetRef
+	]);
+	const onPointerUp = useCallback((event) => {
+		if (!enableDrag) return;
+		if (!pointerStartRef.current || !sheetRef.current) {
+			cancelDrag();
+			return;
+		}
+		if (!isAllowedToDragRef.current) {
+			cancelDrag();
+			return;
+		}
+		const { y: startY } = pointerStartRef.current;
+		const draggedDistance = startY - event.pageY;
+		const timeTakenMs = Math.max(performance.now() - (dragStartTimeRef.current ?? performance.now()), 1);
+		const velocityPxPerSecond = Math.abs(draggedDistance) / timeTakenMs * 1e3;
+		const currentTranslatePx = maxSnapPointPx - sheetRef.current.getBoundingClientRect().height;
+		const draggedDownBeyondLowestPx = currentTranslatePx - (snapPointTranslatesPx[dragStartIndexRef.current] ?? maxSnapPointPx);
+		const draggedDown = draggedDistance < 0;
+		const draggedUp = draggedDistance > 0;
+		const isAtLowestSnapPoint = dragStartIndexRef.current === 0;
+		if (dismissible && isAtLowestSnapPoint && draggedDown && (velocityPxPerSecond >= DRAG_DISMISS_VELOCITY_PX_PER_SECOND || draggedDownBeyondLowestPx >= resolvedDismissThresholdPx)) {
+			cancelDrag();
+			store.hide();
+			return;
+		}
+		const lastIndex = resolvedSnapPointsLength - 1;
+		const startIndex = dragStartIndexRef.current;
+		if (velocityPxPerSecond >= DRAG_DISMISS_VELOCITY_PX_PER_SECOND && (draggedUp || draggedDown)) {
+			const nextIndex = clampIndex(startIndex + (draggedUp ? 1 : -1), resolvedSnapPointsLength);
+			cancelDrag();
+			emitSnapPointChange(nextIndex);
+			return;
+		}
+		let closestIndex = 0;
+		let closestDist = Number.POSITIVE_INFINITY;
+		for (let i = 0; i <= lastIndex; i++) {
+			const dist = Math.abs((snapPointTranslatesPx[i] ?? 0) - currentTranslatePx);
+			if (dist < closestDist) {
+				closestDist = dist;
+				closestIndex = i;
+			}
+		}
+		cancelDrag();
+		emitSnapPointChange(closestIndex);
+	}, [
+		cancelDrag,
+		dismissible,
+		emitSnapPointChange,
+		enableDrag,
+		maxSnapPointPx,
+		resolvedDismissThresholdPx,
+		resolvedSnapPointsLength,
+		sheetRef,
+		snapPointTranslatesPx,
+		store
+	]);
+	return {
+		onPointerDown,
+		onPointerMove,
+		onPointerUp,
+		onPointerCancel: useCallback((event) => {
+			onPointerUp(event);
+		}, [onPointerUp])
+	};
+}
+
+//#endregion
+export { useBottomSheetDrag };

package/dist/components/client/BottomSheet/useBottomSheetSnapModel.cjs

@@ -0,0 +1,138 @@
+"use client";
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_components_client_BottomSheet_utils = require('./utils.cjs');
+let react = require("react");
+let lodash_clamp_js = require("lodash/clamp.js");
+lodash_clamp_js = require_runtime.__toESM(lodash_clamp_js);
+
+//#region src/components/client/BottomSheet/useBottomSheetSnapModel.ts
+const DEFAULT_SNAP_POINT = "40%";
+const OPEN_SHEET_ENTER_DELAY_MS = 50;
+function useBottomSheetSnapModel({ isOpen, snapPointsProp, height, defaultSnapPointIndex, snapPointIndexProp, onSnapPointChange, viewportHeightPx, maxHeightPx, setTranslateAnimated, isDraggingRef }) {
+	const openTimeRef = (0, react.useRef)(null);
+	const lastTimeDragPreventedRef = (0, react.useRef)(null);
+	const openEnterTimeoutRef = (0, react.useRef)(null);
+	const isEnteringRef = (0, react.useRef)(false);
+	const resolvedSnapPoints = (0, react.useMemo)(() => {
+		if (snapPointsProp?.length) return snapPointsProp;
+		if (height !== void 0) return [height];
+		return [DEFAULT_SNAP_POINT];
+	}, [height, snapPointsProp]);
+	const snapPointsPx = (0, react.useMemo)(() => {
+		return resolvedSnapPoints.map((sp) => (0, lodash_clamp_js.default)(require_components_client_BottomSheet_utils.resolveHeightToPx(sp, viewportHeightPx), 0, maxHeightPx));
+	}, [
+		maxHeightPx,
+		resolvedSnapPoints,
+		viewportHeightPx
+	]);
+	const maxSnapPointPx = (0, react.useMemo)(() => Math.max(0, ...snapPointsPx), [snapPointsPx]);
+	const snapPointTranslatesPx = (0, react.useMemo)(() => {
+		return snapPointsPx.map((h) => maxSnapPointPx - h);
+	}, [maxSnapPointPx, snapPointsPx]);
+	const isSnapPointControlled = snapPointIndexProp !== void 0;
+	const [uncontrolledSnapIndex, setUncontrolledSnapIndex] = (0, react.useState)(() => require_components_client_BottomSheet_utils.clampIndex(defaultSnapPointIndex, resolvedSnapPoints.length));
+	const activeSnapIndex = require_components_client_BottomSheet_utils.clampIndex(isSnapPointControlled ? snapPointIndexProp ?? 0 : uncontrolledSnapIndex, resolvedSnapPoints.length);
+	const activeTranslatePx = snapPointTranslatesPx[activeSnapIndex] ?? maxSnapPointPx;
+	const [restTranslatePx, setRestTranslatePx] = (0, react.useState)(() => maxSnapPointPx);
+	const lastEmittedTranslateRef = (0, react.useRef)(null);
+	const emitSnapPointChange = (0, react.useCallback)((nextIndex) => {
+		const clamped = require_components_client_BottomSheet_utils.clampIndex(nextIndex, resolvedSnapPoints.length);
+		const nextTranslatePx = snapPointTranslatesPx[clamped] ?? maxSnapPointPx;
+		onSnapPointChange?.(clamped, resolvedSnapPoints[clamped]);
+		if (!isSnapPointControlled) setUncontrolledSnapIndex(clamped);
+		setRestTranslatePx(nextTranslatePx);
+		lastEmittedTranslateRef.current = nextTranslatePx;
+		setTranslateAnimated(nextTranslatePx);
+	}, [
+		isSnapPointControlled,
+		maxSnapPointPx,
+		onSnapPointChange,
+		resolvedSnapPoints,
+		setTranslateAnimated,
+		snapPointTranslatesPx
+	]);
+	(0, react.useEffect)(() => {
+		const wasOpen = openTimeRef.current !== null;
+		if (!isOpen) {
+			if (openEnterTimeoutRef.current !== null) {
+				window.clearTimeout(openEnterTimeoutRef.current);
+				openEnterTimeoutRef.current = null;
+			}
+			isEnteringRef.current = false;
+			openTimeRef.current = null;
+			setRestTranslatePx(maxSnapPointPx);
+			return;
+		}
+		if (wasOpen) return;
+		isEnteringRef.current = true;
+		openTimeRef.current = Date.now();
+		const initialSnapIndex = isSnapPointControlled ? activeSnapIndex : require_components_client_BottomSheet_utils.clampIndex(defaultSnapPointIndex, resolvedSnapPoints.length);
+		if (!isSnapPointControlled) setUncontrolledSnapIndex(initialSnapIndex);
+		setRestTranslatePx(maxSnapPointPx);
+		const initialTranslatePx = snapPointTranslatesPx[initialSnapIndex] ?? maxSnapPointPx;
+		openEnterTimeoutRef.current = window.setTimeout(() => {
+			isEnteringRef.current = false;
+			setRestTranslatePx(initialTranslatePx);
+			setTranslateAnimated(initialTranslatePx);
+			openEnterTimeoutRef.current = null;
+		}, OPEN_SHEET_ENTER_DELAY_MS);
+	}, [
+		activeSnapIndex,
+		defaultSnapPointIndex,
+		isOpen,
+		isSnapPointControlled,
+		maxSnapPointPx,
+		resolvedSnapPoints.length,
+		setTranslateAnimated,
+		snapPointTranslatesPx
+	]);
+	(0, react.useEffect)(() => {
+		return () => {
+			if (openEnterTimeoutRef.current !== null) {
+				window.clearTimeout(openEnterTimeoutRef.current);
+				openEnterTimeoutRef.current = null;
+			}
+		};
+	}, []);
+	(0, react.useEffect)(() => {
+		if (!isOpen || isEnteringRef.current || isDraggingRef.current) return;
+		setRestTranslatePx(activeTranslatePx);
+		if (lastEmittedTranslateRef.current === activeTranslatePx) {
+			lastEmittedTranslateRef.current = null;
+			return;
+		}
+		setTranslateAnimated(activeTranslatePx);
+	}, [
+		activeTranslatePx,
+		isDraggingRef,
+		isOpen,
+		setTranslateAnimated
+	]);
+	(0, react.useEffect)(() => {
+		if (!isOpen) return;
+		if (activeSnapIndex === resolvedSnapPoints.length - 1) openTimeRef.current = Date.now();
+	}, [
+		activeSnapIndex,
+		isOpen,
+		resolvedSnapPoints.length
+	]);
+	return {
+		resolvedSnapPoints,
+		snapPointsPx,
+		maxSnapPointPx,
+		snapPointTranslatesPx,
+		activeSnapIndex,
+		restTranslatePx,
+		setRestTranslatePx,
+		isSnapPointControlled,
+		emitSnapPointChange,
+		openTimeRef,
+		lastTimeDragPreventedRef,
+		isEnteringRef
+	};
+}
+
+//#endregion
+exports.useBottomSheetSnapModel = useBottomSheetSnapModel;

package/dist/components/client/BottomSheet/useBottomSheetSnapModel.d.cts

@@ -0,0 +1,46 @@
+
+import { BottomSheetHeight } from "../../../types/dist/index.cjs";
+import "../../../tokens/index.cjs";
+import { MutableRefObject } from "react";
+
+//#region src/components/client/BottomSheet/useBottomSheetSnapModel.d.ts
+interface UseBottomSheetSnapModelParams {
+  isOpen: boolean;
+  snapPointsProp?: BottomSheetHeight[];
+  height?: BottomSheetHeight;
+  defaultSnapPointIndex: number;
+  snapPointIndexProp?: number;
+  onSnapPointChange?: (index: number, height: BottomSheetHeight) => void;
+  viewportHeightPx: number;
+  maxHeightPx: number;
+  setTranslateAnimated: (nextTranslatePx: number) => void;
+  isDraggingRef: MutableRefObject<boolean>;
+}
+interface UseBottomSheetSnapModelResult {
+  resolvedSnapPoints: BottomSheetHeight[];
+  snapPointsPx: number[];
+  maxSnapPointPx: number;
+  snapPointTranslatesPx: number[];
+  activeSnapIndex: number;
+  restTranslatePx: number;
+  setRestTranslatePx: React.Dispatch<React.SetStateAction<number>>;
+  isSnapPointControlled: boolean;
+  emitSnapPointChange: (nextIndex: number) => void;
+  openTimeRef: MutableRefObject<number | null>;
+  lastTimeDragPreventedRef: MutableRefObject<number | null>;
+  isEnteringRef: MutableRefObject<boolean>;
+}
+declare function useBottomSheetSnapModel({
+  isOpen,
+  snapPointsProp,
+  height,
+  defaultSnapPointIndex,
+  snapPointIndexProp,
+  onSnapPointChange,
+  viewportHeightPx,
+  maxHeightPx,
+  setTranslateAnimated,
+  isDraggingRef
+}: UseBottomSheetSnapModelParams): UseBottomSheetSnapModelResult;
+//#endregion
+export { useBottomSheetSnapModel };

package/dist/components/client/BottomSheet/useBottomSheetSnapModel.d.ts

@@ -0,0 +1,46 @@
+
+import { BottomSheetHeight } from "../../../types/dist/index.js";
+import "../../../tokens/index.js";
+import { MutableRefObject } from "react";
+
+//#region src/components/client/BottomSheet/useBottomSheetSnapModel.d.ts
+interface UseBottomSheetSnapModelParams {
+  isOpen: boolean;
+  snapPointsProp?: BottomSheetHeight[];
+  height?: BottomSheetHeight;
+  defaultSnapPointIndex: number;
+  snapPointIndexProp?: number;
+  onSnapPointChange?: (index: number, height: BottomSheetHeight) => void;
+  viewportHeightPx: number;
+  maxHeightPx: number;
+  setTranslateAnimated: (nextTranslatePx: number) => void;
+  isDraggingRef: MutableRefObject<boolean>;
+}
+interface UseBottomSheetSnapModelResult {
+  resolvedSnapPoints: BottomSheetHeight[];
+  snapPointsPx: number[];
+  maxSnapPointPx: number;
+  snapPointTranslatesPx: number[];
+  activeSnapIndex: number;
+  restTranslatePx: number;
+  setRestTranslatePx: React.Dispatch<React.SetStateAction<number>>;
+  isSnapPointControlled: boolean;
+  emitSnapPointChange: (nextIndex: number) => void;
+  openTimeRef: MutableRefObject<number | null>;
+  lastTimeDragPreventedRef: MutableRefObject<number | null>;
+  isEnteringRef: MutableRefObject<boolean>;
+}
+declare function useBottomSheetSnapModel({
+  isOpen,
+  snapPointsProp,
+  height,
+  defaultSnapPointIndex,
+  snapPointIndexProp,
+  onSnapPointChange,
+  viewportHeightPx,
+  maxHeightPx,
+  setTranslateAnimated,
+  isDraggingRef
+}: UseBottomSheetSnapModelParams): UseBottomSheetSnapModelResult;
+//#endregion
+export { useBottomSheetSnapModel };

package/dist/components/client/BottomSheet/useBottomSheetSnapModel.js

@@ -0,0 +1,135 @@
+"use client";
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { clampIndex, resolveHeightToPx } from "./utils.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { clamp } from "lodash-es";
+
+//#region src/components/client/BottomSheet/useBottomSheetSnapModel.ts
+const DEFAULT_SNAP_POINT = "40%";
+const OPEN_SHEET_ENTER_DELAY_MS = 50;
+function useBottomSheetSnapModel({ isOpen, snapPointsProp, height, defaultSnapPointIndex, snapPointIndexProp, onSnapPointChange, viewportHeightPx, maxHeightPx, setTranslateAnimated, isDraggingRef }) {
+	const openTimeRef = useRef(null);
+	const lastTimeDragPreventedRef = useRef(null);
+	const openEnterTimeoutRef = useRef(null);
+	const isEnteringRef = useRef(false);
+	const resolvedSnapPoints = useMemo(() => {
+		if (snapPointsProp?.length) return snapPointsProp;
+		if (height !== void 0) return [height];
+		return [DEFAULT_SNAP_POINT];
+	}, [height, snapPointsProp]);
+	const snapPointsPx = useMemo(() => {
+		return resolvedSnapPoints.map((sp) => clamp(resolveHeightToPx(sp, viewportHeightPx), 0, maxHeightPx));
+	}, [
+		maxHeightPx,
+		resolvedSnapPoints,
+		viewportHeightPx
+	]);
+	const maxSnapPointPx = useMemo(() => Math.max(0, ...snapPointsPx), [snapPointsPx]);
+	const snapPointTranslatesPx = useMemo(() => {
+		return snapPointsPx.map((h) => maxSnapPointPx - h);
+	}, [maxSnapPointPx, snapPointsPx]);
+	const isSnapPointControlled = snapPointIndexProp !== void 0;
+	const [uncontrolledSnapIndex, setUncontrolledSnapIndex] = useState(() => clampIndex(defaultSnapPointIndex, resolvedSnapPoints.length));
+	const activeSnapIndex = clampIndex(isSnapPointControlled ? snapPointIndexProp ?? 0 : uncontrolledSnapIndex, resolvedSnapPoints.length);
+	const activeTranslatePx = snapPointTranslatesPx[activeSnapIndex] ?? maxSnapPointPx;
+	const [restTranslatePx, setRestTranslatePx] = useState(() => maxSnapPointPx);
+	const lastEmittedTranslateRef = useRef(null);
+	const emitSnapPointChange = useCallback((nextIndex) => {
+		const clamped = clampIndex(nextIndex, resolvedSnapPoints.length);
+		const nextTranslatePx = snapPointTranslatesPx[clamped] ?? maxSnapPointPx;
+		onSnapPointChange?.(clamped, resolvedSnapPoints[clamped]);
+		if (!isSnapPointControlled) setUncontrolledSnapIndex(clamped);
+		setRestTranslatePx(nextTranslatePx);
+		lastEmittedTranslateRef.current = nextTranslatePx;
+		setTranslateAnimated(nextTranslatePx);
+	}, [
+		isSnapPointControlled,
+		maxSnapPointPx,
+		onSnapPointChange,
+		resolvedSnapPoints,
+		setTranslateAnimated,
+		snapPointTranslatesPx
+	]);
+	useEffect(() => {
+		const wasOpen = openTimeRef.current !== null;
+		if (!isOpen) {
+			if (openEnterTimeoutRef.current !== null) {
+				window.clearTimeout(openEnterTimeoutRef.current);
+				openEnterTimeoutRef.current = null;
+			}
+			isEnteringRef.current = false;
+			openTimeRef.current = null;
+			setRestTranslatePx(maxSnapPointPx);
+			return;
+		}
+		if (wasOpen) return;
+		isEnteringRef.current = true;
+		openTimeRef.current = Date.now();
+		const initialSnapIndex = isSnapPointControlled ? activeSnapIndex : clampIndex(defaultSnapPointIndex, resolvedSnapPoints.length);
+		if (!isSnapPointControlled) setUncontrolledSnapIndex(initialSnapIndex);
+		setRestTranslatePx(maxSnapPointPx);
+		const initialTranslatePx = snapPointTranslatesPx[initialSnapIndex] ?? maxSnapPointPx;
+		openEnterTimeoutRef.current = window.setTimeout(() => {
+			isEnteringRef.current = false;
+			setRestTranslatePx(initialTranslatePx);
+			setTranslateAnimated(initialTranslatePx);
+			openEnterTimeoutRef.current = null;
+		}, OPEN_SHEET_ENTER_DELAY_MS);
+	}, [
+		activeSnapIndex,
+		defaultSnapPointIndex,
+		isOpen,
+		isSnapPointControlled,
+		maxSnapPointPx,
+		resolvedSnapPoints.length,
+		setTranslateAnimated,
+		snapPointTranslatesPx
+	]);
+	useEffect(() => {
+		return () => {
+			if (openEnterTimeoutRef.current !== null) {
+				window.clearTimeout(openEnterTimeoutRef.current);
+				openEnterTimeoutRef.current = null;
+			}
+		};
+	}, []);
+	useEffect(() => {
+		if (!isOpen || isEnteringRef.current || isDraggingRef.current) return;
+		setRestTranslatePx(activeTranslatePx);
+		if (lastEmittedTranslateRef.current === activeTranslatePx) {
+			lastEmittedTranslateRef.current = null;
+			return;
+		}
+		setTranslateAnimated(activeTranslatePx);
+	}, [
+		activeTranslatePx,
+		isDraggingRef,
+		isOpen,
+		setTranslateAnimated
+	]);
+	useEffect(() => {
+		if (!isOpen) return;
+		if (activeSnapIndex === resolvedSnapPoints.length - 1) openTimeRef.current = Date.now();
+	}, [
+		activeSnapIndex,
+		isOpen,
+		resolvedSnapPoints.length
+	]);
+	return {
+		resolvedSnapPoints,
+		snapPointsPx,
+		maxSnapPointPx,
+		snapPointTranslatesPx,
+		activeSnapIndex,
+		restTranslatePx,
+		setRestTranslatePx,
+		isSnapPointControlled,
+		emitSnapPointChange,
+		openTimeRef,
+		lastTimeDragPreventedRef,
+		isEnteringRef
+	};
+}
+
+//#endregion
+export { useBottomSheetSnapModel };

package/dist/components/client/BottomSheet/useBottomSheetStore.cjs

@@ -0,0 +1,34 @@
+"use client";
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_components_client_BottomSheet_useBottomSheetStoreInternal = require('./useBottomSheetStoreInternal.cjs');
+let _ariakit_react = require("@ariakit/react");
+
+//#region src/components/client/BottomSheet/useBottomSheetStore.ts
+/** @internal */
+const BOTTOM_SHEET_INTERNAL_STORE_KEY = "__bottomSheetInternal";
+/** @internal */
+function getBottomSheetInternal(controller) {
+	const internal = controller[BOTTOM_SHEET_INTERNAL_STORE_KEY];
+	if (!internal) throw new Error("Invalid BottomSheet controller. Use `useBottomSheetStore()` to create one.");
+	return internal;
+}
+const useBottomSheetStore = ({ animated = true, defaultOpen = false, open: openProp } = {}) => {
+	const bottomSheetInternal = require_components_client_BottomSheet_useBottomSheetStoreInternal.useBottomSheetStoreInternal({
+		animated,
+		open: openProp,
+		defaultOpen
+	});
+	const isOpen = (0, _ariakit_react.useStoreState)(bottomSheetInternal, (state) => state.open);
+	return {
+		open: bottomSheetInternal.show,
+		close: bottomSheetInternal.hide,
+		isOpen,
+		[BOTTOM_SHEET_INTERNAL_STORE_KEY]: bottomSheetInternal
+	};
+};
+
+//#endregion
+exports.getBottomSheetInternal = getBottomSheetInternal;
+exports.useBottomSheetStore = useBottomSheetStore;

package/dist/components/client/BottomSheet/useBottomSheetStore.d.cts

@@ -0,0 +1,38 @@
+
+import * as _ariakit_react0 from "@ariakit/react";
+
+//#region src/components/client/BottomSheet/useBottomSheetStore.d.ts
+interface UseBottomSheetStoreProps {
+  /**
+   * The initial state of the bottom sheet.
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * Whether the bottom sheet is open.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Whether the bottom sheet is animated.
+   * @default true
+   */
+  animated?: boolean;
+}
+interface BottomSheetController {
+  /** Open the bottom sheet. */
+  open: () => void;
+  /** Close the bottom sheet. */
+  close: () => void;
+  /** Whether the bottom sheet is currently open. */
+  isOpen: boolean;
+}
+/** @internal */
+declare function getBottomSheetInternal(controller: BottomSheetController): _ariakit_react0.DialogStore;
+declare const useBottomSheetStore: ({
+  animated,
+  defaultOpen,
+  open: openProp
+}?: UseBottomSheetStoreProps) => BottomSheetController;
+//#endregion
+export { type BottomSheetController, type UseBottomSheetStoreProps, getBottomSheetInternal, useBottomSheetStore };

package/dist/components/client/BottomSheet/useBottomSheetStore.d.ts

@@ -0,0 +1,38 @@
+
+import * as _ariakit_react0 from "@ariakit/react";
+
+//#region src/components/client/BottomSheet/useBottomSheetStore.d.ts
+interface UseBottomSheetStoreProps {
+  /**
+   * The initial state of the bottom sheet.
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * Whether the bottom sheet is open.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Whether the bottom sheet is animated.
+   * @default true
+   */
+  animated?: boolean;
+}
+interface BottomSheetController {
+  /** Open the bottom sheet. */
+  open: () => void;
+  /** Close the bottom sheet. */
+  close: () => void;
+  /** Whether the bottom sheet is currently open. */
+  isOpen: boolean;
+}
+/** @internal */
+declare function getBottomSheetInternal(controller: BottomSheetController): _ariakit_react0.DialogStore;
+declare const useBottomSheetStore: ({
+  animated,
+  defaultOpen,
+  open: openProp
+}?: UseBottomSheetStoreProps) => BottomSheetController;
+//#endregion
+export { type BottomSheetController, type UseBottomSheetStoreProps, getBottomSheetInternal, useBottomSheetStore };