@yahoo/uds 3.114.0-beta.3 → 3.115.0-beta.1

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 };

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

@@ -0,0 +1,31 @@
+"use client";
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { useBottomSheetStoreInternal } from "./useBottomSheetStoreInternal.js";
+import { useStoreState } from "@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 = useBottomSheetStoreInternal({
+		animated,
+		open: openProp,
+		defaultOpen
+	});
+	const isOpen = useStoreState(bottomSheetInternal, (state) => state.open);
+	return {
+		open: bottomSheetInternal.show,
+		close: bottomSheetInternal.hide,
+		isOpen,
+		[BOTTOM_SHEET_INTERNAL_STORE_KEY]: bottomSheetInternal
+	};
+};
+
+//#endregion
+export { getBottomSheetInternal, useBottomSheetStore };

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

@@ -0,0 +1,17 @@
+"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');
+let _ariakit_react = require("@ariakit/react");
+
+//#region src/components/client/BottomSheet/useBottomSheetStoreInternal.ts
+const useBottomSheetStoreInternal = ({ animated = true, defaultOpen = false, open } = {}) => {
+	return (0, _ariakit_react.useDialogStore)({
+		animated,
+		open,
+		defaultOpen
+	});
+};
+
+//#endregion
+exports.useBottomSheetStoreInternal = useBottomSheetStoreInternal;

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

@@ -0,0 +1,13 @@
+
+import * as _ariakit_react0 from "@ariakit/react";
+import { DialogStoreProps } from "@ariakit/react";
+
+//#region src/components/client/BottomSheet/useBottomSheetStoreInternal.d.ts
+type UseBottomSheetStoreInternalProps = Pick<DialogStoreProps, 'animated' | 'open' | 'defaultOpen'>;
+declare const useBottomSheetStoreInternal: ({
+  animated,
+  defaultOpen,
+  open
+}?: UseBottomSheetStoreInternalProps) => _ariakit_react0.DialogStore;
+//#endregion
+export { useBottomSheetStoreInternal };

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

@@ -0,0 +1,13 @@
+
+import * as _ariakit_react0 from "@ariakit/react";
+import { DialogStoreProps } from "@ariakit/react";
+
+//#region src/components/client/BottomSheet/useBottomSheetStoreInternal.d.ts
+type UseBottomSheetStoreInternalProps = Pick<DialogStoreProps, 'animated' | 'open' | 'defaultOpen'>;
+declare const useBottomSheetStoreInternal: ({
+  animated,
+  defaultOpen,
+  open
+}?: UseBottomSheetStoreInternalProps) => _ariakit_react0.DialogStore;
+//#endregion
+export { useBottomSheetStoreInternal };

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

@@ -0,0 +1,15 @@
+"use client";
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { useDialogStore } from "@ariakit/react";
+
+//#region src/components/client/BottomSheet/useBottomSheetStoreInternal.ts
+const useBottomSheetStoreInternal = ({ animated = true, defaultOpen = false, open } = {}) => {
+	return useDialogStore({
+		animated,
+		open,
+		defaultOpen
+	});
+};
+
+//#endregion
+export { useBottomSheetStoreInternal };

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

@@ -0,0 +1,89 @@
+"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');
+let react = require("react");
+
+//#region src/components/client/BottomSheet/useExpansionMargins.ts
+/**
+* Manages the `fullWidthAtMaxSnap` feature: animates configured CSS margins to 0
+* as the sheet expands from the second-to-last snap point to the max snap point.
+*
+* Returns a stable `applyExpansionMargins` callback (safe for `useCallback([], [])`)
+* and a `thresholdRef` that the caller must set during render after the snap model
+* resolves pixel snap points
+*/
+function useExpansionMargins({ sheetRef, maxSnapPxRef, fullWidthAtMaxSnap, snapPointsLength, isOpen, forceZeroRef }) {
+	const thresholdRef = (0, react.useRef)(null);
+	const marginsRef = (0, react.useRef)(null);
+	const applyExpansionMargins = (0, react.useCallback)((el, currentTranslatePx) => {
+		if (forceZeroRef.current) {
+			el.style.marginLeft = "0px";
+			el.style.marginRight = "0px";
+			el.style.marginBottom = "0px";
+			return;
+		}
+		const threshold = thresholdRef.current;
+		if (threshold == null) return;
+		let margins = marginsRef.current;
+		if (!margins) {
+			el.style.removeProperty("margin-left");
+			el.style.removeProperty("margin-right");
+			el.style.removeProperty("margin-bottom");
+			const computed = getComputedStyle(el);
+			const left = parseFloat(computed.marginLeft) || 0;
+			const right = parseFloat(computed.marginRight) || 0;
+			const bottom = parseFloat(computed.marginBottom) || 0;
+			if (left === 0 && right === 0 && bottom === 0) return;
+			margins = {
+				left,
+				right,
+				bottom
+			};
+			marginsRef.current = margins;
+		}
+		const maxSnap = maxSnapPxRef.current;
+		const range = maxSnap - threshold;
+		if (range <= 0) return;
+		const rawProgress = (maxSnap - currentTranslatePx - threshold) / range;
+		const progress = Math.max(0, Math.min(1, rawProgress));
+		if (progress <= 0) {
+			marginsRef.current = null;
+			el.style.removeProperty("margin-left");
+			el.style.removeProperty("margin-right");
+			el.style.removeProperty("margin-bottom");
+			return;
+		}
+		el.style.marginLeft = `${margins.left * (1 - progress)}px`;
+		el.style.marginRight = `${margins.right * (1 - progress)}px`;
+		el.style.marginBottom = `${margins.bottom * (1 - progress)}px`;
+	}, [
+		forceZeroRef,
+		maxSnapPxRef,
+		thresholdRef,
+		marginsRef
+	]);
+	(0, react.useEffect)(() => {
+		if (isOpen && fullWidthAtMaxSnap && snapPointsLength >= 2) return;
+		marginsRef.current = null;
+		const el = sheetRef.current;
+		if (el) {
+			el.style.removeProperty("margin-left");
+			el.style.removeProperty("margin-right");
+			el.style.removeProperty("margin-bottom");
+			if (!isOpen) el.style.removeProperty("height");
+		}
+	}, [
+		isOpen,
+		fullWidthAtMaxSnap,
+		snapPointsLength,
+		sheetRef
+	]);
+	return {
+		applyExpansionMargins,
+		thresholdRef
+	};
+}
+
+//#endregion
+exports.useExpansionMargins = useExpansionMargins;

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

@@ -0,0 +1,34 @@
+
+import React from "react";
+
+//#region src/components/client/BottomSheet/useExpansionMargins.d.ts
+interface UseExpansionMarginsParams {
+  sheetRef: React.RefObject<HTMLElement | null>;
+  maxSnapPxRef: React.RefObject<number>;
+  fullWidthAtMaxSnap: boolean;
+  snapPointsLength: number;
+  isOpen: boolean;
+  /** When true, forces all margins to 0 (e.g. virtual keyboard visible). */
+  forceZeroRef: React.RefObject<boolean>;
+}
+/**
+ * Manages the `fullWidthAtMaxSnap` feature: animates configured CSS margins to 0
+ * as the sheet expands from the second-to-last snap point to the max snap point.
+ *
+ * Returns a stable `applyExpansionMargins` callback (safe for `useCallback([], [])`)
+ * and a `thresholdRef` that the caller must set during render after the snap model
+ * resolves pixel snap points
+ */
+declare function useExpansionMargins({
+  sheetRef,
+  maxSnapPxRef,
+  fullWidthAtMaxSnap,
+  snapPointsLength,
+  isOpen,
+  forceZeroRef
+}: UseExpansionMarginsParams): {
+  applyExpansionMargins: (el: HTMLElement, currentTranslatePx: number) => void;
+  thresholdRef: React.RefObject<number | null>;
+};
+//#endregion
+export { useExpansionMargins };

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

@@ -0,0 +1,34 @@
+
+import React from "react";
+
+//#region src/components/client/BottomSheet/useExpansionMargins.d.ts
+interface UseExpansionMarginsParams {
+  sheetRef: React.RefObject<HTMLElement | null>;
+  maxSnapPxRef: React.RefObject<number>;
+  fullWidthAtMaxSnap: boolean;
+  snapPointsLength: number;
+  isOpen: boolean;
+  /** When true, forces all margins to 0 (e.g. virtual keyboard visible). */
+  forceZeroRef: React.RefObject<boolean>;
+}
+/**
+ * Manages the `fullWidthAtMaxSnap` feature: animates configured CSS margins to 0
+ * as the sheet expands from the second-to-last snap point to the max snap point.
+ *
+ * Returns a stable `applyExpansionMargins` callback (safe for `useCallback([], [])`)
+ * and a `thresholdRef` that the caller must set during render after the snap model
+ * resolves pixel snap points
+ */
+declare function useExpansionMargins({
+  sheetRef,
+  maxSnapPxRef,
+  fullWidthAtMaxSnap,
+  snapPointsLength,
+  isOpen,
+  forceZeroRef
+}: UseExpansionMarginsParams): {
+  applyExpansionMargins: (el: HTMLElement, currentTranslatePx: number) => void;
+  thresholdRef: React.RefObject<number | null>;
+};
+//#endregion
+export { useExpansionMargins };

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

@@ -0,0 +1,87 @@
+"use client";
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { useCallback, useEffect, useRef } from "react";
+
+//#region src/components/client/BottomSheet/useExpansionMargins.ts
+/**
+* Manages the `fullWidthAtMaxSnap` feature: animates configured CSS margins to 0
+* as the sheet expands from the second-to-last snap point to the max snap point.
+*
+* Returns a stable `applyExpansionMargins` callback (safe for `useCallback([], [])`)
+* and a `thresholdRef` that the caller must set during render after the snap model
+* resolves pixel snap points
+*/
+function useExpansionMargins({ sheetRef, maxSnapPxRef, fullWidthAtMaxSnap, snapPointsLength, isOpen, forceZeroRef }) {
+	const thresholdRef = useRef(null);
+	const marginsRef = useRef(null);
+	const applyExpansionMargins = useCallback((el, currentTranslatePx) => {
+		if (forceZeroRef.current) {
+			el.style.marginLeft = "0px";
+			el.style.marginRight = "0px";
+			el.style.marginBottom = "0px";
+			return;
+		}
+		const threshold = thresholdRef.current;
+		if (threshold == null) return;
+		let margins = marginsRef.current;
+		if (!margins) {
+			el.style.removeProperty("margin-left");
+			el.style.removeProperty("margin-right");
+			el.style.removeProperty("margin-bottom");
+			const computed = getComputedStyle(el);
+			const left = parseFloat(computed.marginLeft) || 0;
+			const right = parseFloat(computed.marginRight) || 0;
+			const bottom = parseFloat(computed.marginBottom) || 0;
+			if (left === 0 && right === 0 && bottom === 0) return;
+			margins = {
+				left,
+				right,
+				bottom
+			};
+			marginsRef.current = margins;
+		}
+		const maxSnap = maxSnapPxRef.current;
+		const range = maxSnap - threshold;
+		if (range <= 0) return;
+		const rawProgress = (maxSnap - currentTranslatePx - threshold) / range;
+		const progress = Math.max(0, Math.min(1, rawProgress));
+		if (progress <= 0) {
+			marginsRef.current = null;
+			el.style.removeProperty("margin-left");
+			el.style.removeProperty("margin-right");
+			el.style.removeProperty("margin-bottom");
+			return;
+		}
+		el.style.marginLeft = `${margins.left * (1 - progress)}px`;
+		el.style.marginRight = `${margins.right * (1 - progress)}px`;
+		el.style.marginBottom = `${margins.bottom * (1 - progress)}px`;
+	}, [
+		forceZeroRef,
+		maxSnapPxRef,
+		thresholdRef,
+		marginsRef
+	]);
+	useEffect(() => {
+		if (isOpen && fullWidthAtMaxSnap && snapPointsLength >= 2) return;
+		marginsRef.current = null;
+		const el = sheetRef.current;
+		if (el) {
+			el.style.removeProperty("margin-left");
+			el.style.removeProperty("margin-right");
+			el.style.removeProperty("margin-bottom");
+			if (!isOpen) el.style.removeProperty("height");
+		}
+	}, [
+		isOpen,
+		fullWidthAtMaxSnap,
+		snapPointsLength,
+		sheetRef
+	]);
+	return {
+		applyExpansionMargins,
+		thresholdRef
+	};
+}
+
+//#endregion
+export { useExpansionMargins };

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

@@ -0,0 +1,32 @@
+"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");
+
+//#region src/components/client/BottomSheet/useViewportHeight.ts
+/**
+* Hook to get the viewport height in pixels.
+* @returns The viewport height in pixels.
+*/
+function useViewportHeight() {
+	const [viewportHeightPx, setViewportHeightPx] = (0, react.useState)(require_components_client_BottomSheet_utils.getViewportHeightPx);
+	(0, react.useEffect)(() => {
+		if (typeof window === "undefined") return;
+		function onResize() {
+			setViewportHeightPx(require_components_client_BottomSheet_utils.getViewportHeightPx());
+		}
+		onResize();
+		window.addEventListener("resize", onResize);
+		window.visualViewport?.addEventListener("resize", onResize);
+		return () => {
+			window.removeEventListener("resize", onResize);
+			window.visualViewport?.removeEventListener("resize", onResize);
+		};
+	}, []);
+	return viewportHeightPx;
+}
+
+//#endregion
+exports.useViewportHeight = useViewportHeight;

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

@@ -0,0 +1,9 @@
+
+//#region src/components/client/BottomSheet/useViewportHeight.d.ts
+/**
+ * Hook to get the viewport height in pixels.
+ * @returns The viewport height in pixels.
+ */
+declare function useViewportHeight(): number;
+//#endregion
+export { useViewportHeight };