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

package/dist/components/Scrim.cjs

@@ -0,0 +1,28 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+'use client';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_styles_styler = require('../styles/styler.cjs');
+const require_components_Box = require('./Box.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Scrim.tsx
+const Scrim = (0, react.forwardRef)(function Scrim({ className, style, variant = "default", position = "fixed", animateOpacity = false, ...props }, ref) {
+	const rootVariantClass = require_styles_styler.getStyles({ scrimVariantRoot: variant });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+		ref,
+		display: "block",
+		className: require_styles_styler.cx(position === "fixed" ? "fixed" : "absolute", "inset-0 z-40", animateOpacity ? "transition-opacity duration-150 data-[enter]:opacity-100 [&:not([data-enter])]:opacity-0" : "opacity-100", "uds-bgBlurFallback", rootVariantClass, className),
+		...props,
+		style: {
+			...style,
+			backgroundColor: "rgb(var(--uds-scrim-background-color) / var(--uds-scrim-opacity))"
+		}
+	});
+});
+Scrim.displayName = "Scrim";
+
+//#endregion
+exports.Scrim = Scrim;

package/dist/components/Scrim.d.cts

@@ -0,0 +1,14 @@
+
+import { DivProps } from "./Box.cjs";
+import * as react from "react";
+
+//#region src/components/Scrim.d.ts
+interface ScrimProps extends DivProps {
+  className?: string;
+  variant?: 'default';
+  position?: 'fixed' | 'absolute';
+  animateOpacity?: boolean;
+}
+declare const Scrim: react.ForwardRefExoticComponent<ScrimProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Scrim, type ScrimProps };

package/dist/components/Scrim.d.ts

@@ -0,0 +1,14 @@
+
+import { DivProps } from "./Box.js";
+import * as react from "react";
+
+//#region src/components/Scrim.d.ts
+interface ScrimProps extends DivProps {
+  className?: string;
+  variant?: 'default';
+  position?: 'fixed' | 'absolute';
+  animateOpacity?: boolean;
+}
+declare const Scrim: react.ForwardRefExoticComponent<ScrimProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Scrim, type ScrimProps };

package/dist/components/Scrim.js

@@ -0,0 +1,26 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+'use client';
+
+import { cx, getStyles } from "../styles/styler.js";
+import { Box } from "./Box.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Scrim.tsx
+const Scrim = forwardRef(function Scrim({ className, style, variant = "default", position = "fixed", animateOpacity = false, ...props }, ref) {
+	const rootVariantClass = getStyles({ scrimVariantRoot: variant });
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		display: "block",
+		className: cx(position === "fixed" ? "fixed" : "absolute", "inset-0 z-40", animateOpacity ? "transition-opacity duration-150 data-[enter]:opacity-100 [&:not([data-enter])]:opacity-0" : "opacity-100", "uds-bgBlurFallback", rootVariantClass, className),
+		...props,
+		style: {
+			...style,
+			backgroundColor: "rgb(var(--uds-scrim-background-color) / var(--uds-scrim-opacity))"
+		}
+	});
+});
+Scrim.displayName = "Scrim";
+
+//#endregion
+export { Scrim };

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

@@ -0,0 +1,209 @@
+"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_styles_styler = require('../../../styles/styler.cjs');
+const require_components_Box = require('../../Box.cjs');
+const require_components_Scrim = require('../../Scrim.cjs');
+const require_components_client_BottomSheet_BottomSheetHandle = require('./BottomSheetHandle.cjs');
+const require_components_client_BottomSheet_UDSBottomSheetConfigProvider = require('./UDSBottomSheetConfigProvider.cjs');
+const require_components_client_BottomSheet_useBottomSheetDrag = require('./useBottomSheetDrag.cjs');
+const require_components_client_BottomSheet_useBottomSheetSnapModel = require('./useBottomSheetSnapModel.cjs');
+const require_components_client_BottomSheet_useBottomSheetStore = require('./useBottomSheetStore.cjs');
+const require_components_client_BottomSheet_useExpansionMargins = require('./useExpansionMargins.cjs');
+const require_components_client_BottomSheet_useViewportHeight = require('./useViewportHeight.cjs');
+const require_components_client_BottomSheet_useVirtualKeyboard = require('./useVirtualKeyboard.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _ariakit_react = require("@ariakit/react");
+
+//#region src/components/client/BottomSheet/BottomSheet.tsx
+/**
+* Drag-to-dismiss distance threshold as a ratio of the lowest snap point's
+* visible height. Dragging down past this fraction of the height dismisses
+* the sheet (regardless of velocity).
+*
+* Velocity and distance are OR conditions — exceeding either one triggers dismissal.
+*/
+const DRAG_DISMISS_THRESHOLD_RATIO = .25;
+/**
+* Top inset reserved when calculating max sheet height.
+* Keeps a visible sliver of page content so the fully expanded state still reads as a bottom sheet.
+*/
+const SHEET_MAX_HEIGHT_TOP_OFFSET_PX = 26;
+function BottomSheet({ children, className: sheetClassName, controller: controllerProp, variant = "default", snapPoints: snapPointsProp, defaultSnapPointIndex = 0, snapPointIndex: snapPointIndexProp, onSnapPointChange, height, modal = true, portal = true, portalElement, dismissible = true, enableDrag = true, showHandleIndicator = true, hideOnEscape = true, onClose, backdrop, preventBodyScroll, slotProps, fullWidthAtMaxSnap = false }) {
+	const storeFromContext = (0, _ariakit_react.useDialogContext)();
+	const dialogStore = controllerProp ? require_components_client_BottomSheet_useBottomSheetStore.getBottomSheetInternal(controllerProp) : storeFromContext;
+	const { backgroundColor: configBackgroundColor } = require_components_client_BottomSheet_UDSBottomSheetConfigProvider.useBottomSheetConfig();
+	if (!dialogStore) throw new Error("BottomSheet must be wrapped in BottomSheetProvider or provided a controller prop.");
+	const isOpen = dialogStore.useState().open;
+	const keyboardHeightPx = require_components_client_BottomSheet_useVirtualKeyboard.useVirtualKeyboard(isOpen);
+	const viewportHeightPx = require_components_client_BottomSheet_useViewportHeight.useViewportHeight();
+	const isDraggingRef = (0, react.useRef)(false);
+	const forceZeroMarginsRef = (0, react.useRef)(false);
+	forceZeroMarginsRef.current = keyboardHeightPx > 0;
+	const sheetRef = (0, react.useRef)(null);
+	const maxSnapPxRef = (0, react.useRef)(0);
+	const maxHeightPx = Math.max(viewportHeightPx - SHEET_MAX_HEIGHT_TOP_OFFSET_PX, 0);
+	const rootVariantClass = require_styles_styler.getStyles({ bottomsheetVariantRoot: variant });
+	const { applyExpansionMargins, thresholdRef: expansionThresholdRef } = require_components_client_BottomSheet_useExpansionMargins.useExpansionMargins({
+		sheetRef,
+		maxSnapPxRef,
+		fullWidthAtMaxSnap,
+		snapPointsLength: snapPointsProp?.length ?? 1,
+		isOpen,
+		forceZeroRef: forceZeroMarginsRef
+	});
+	/**
+	* Applies drag-time position updates with no animation.
+	* We model the sheet by height, so translate is converted to height:
+	* `height = maxSnapPointPx - translatePx`.
+	*/
+	const setTranslateImmediate = (0, react.useCallback)((nextTranslatePx) => {
+		const el = sheetRef.current;
+		if (!el) return;
+		el.style.height = `${maxSnapPxRef.current - nextTranslatePx}px`;
+		applyExpansionMargins(el, nextTranslatePx);
+	}, [applyExpansionMargins]);
+	const { resolvedSnapPoints, snapPointsPx, maxSnapPointPx, snapPointTranslatesPx, activeSnapIndex, restTranslatePx, emitSnapPointChange, openTimeRef, lastTimeDragPreventedRef, isEnteringRef } = require_components_client_BottomSheet_useBottomSheetSnapModel.useBottomSheetSnapModel({
+		isOpen,
+		snapPointsProp,
+		height,
+		defaultSnapPointIndex,
+		snapPointIndexProp,
+		onSnapPointChange,
+		viewportHeightPx,
+		maxHeightPx,
+		setTranslateAnimated: (0, react.useCallback)((nextTranslatePx) => {
+			const el = sheetRef.current;
+			if (!el) return;
+			const nextHeightPx = maxSnapPxRef.current - nextTranslatePx;
+			if (!el.style.height) {
+				el.style.height = `${nextHeightPx}px`;
+				applyExpansionMargins(el, nextTranslatePx);
+			} else {
+				const easing = "cubic-bezier(0.32, 0.72, 0, 1)";
+				let transition = `height 500ms ${easing}`;
+				if (expansionThresholdRef.current != null) transition += `, margin-left 500ms ${easing}, margin-right 500ms ${easing}, margin-bottom 500ms ${easing}`;
+				el.style.transition = transition;
+				el.style.height = `${nextHeightPx}px`;
+				applyExpansionMargins(el, nextTranslatePx);
+				const cleanup = () => {
+					el.style.removeProperty("transition");
+					el.removeEventListener("transitionend", cleanup);
+				};
+				el.addEventListener("transitionend", cleanup);
+			}
+		}, [applyExpansionMargins, expansionThresholdRef]),
+		isDraggingRef
+	});
+	maxSnapPxRef.current = maxSnapPointPx;
+	expansionThresholdRef.current = fullWidthAtMaxSnap && (snapPointsProp?.length ?? 1) >= 2 ? snapPointsPx[snapPointsPx.length - 2] ?? 0 : null;
+	const visibleTranslatePx = isOpen && !isEnteringRef.current ? 0 : viewportHeightPx;
+	const resolvedDismissThresholdPx = (snapPointsPx[0] ?? maxSnapPointPx) * DRAG_DISMISS_THRESHOLD_RATIO;
+	const shouldShowHandleIndicator = showHandleIndicator && enableDrag;
+	const isAtMaxSnapPoint = activeSnapIndex === resolvedSnapPoints.length - 1;
+	const shouldHideEdgeBordersAtMaxSnap = fullWidthAtMaxSnap && resolvedSnapPoints.length >= 2 && isAtMaxSnapPoint;
+	const handleHandleIndicatorKeyDown = (0, react.useCallback)((event) => {
+		if (!shouldShowHandleIndicator || resolvedSnapPoints.length <= 1) return;
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			emitSnapPointChange(activeSnapIndex + 1);
+		}
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			if (activeSnapIndex === 0 && dismissible) {
+				dialogStore.hide();
+				return;
+			}
+			emitSnapPointChange(activeSnapIndex - 1);
+		}
+	}, [
+		activeSnapIndex,
+		dismissible,
+		emitSnapPointChange,
+		resolvedSnapPoints.length,
+		shouldShowHandleIndicator,
+		dialogStore
+	]);
+	const { onPointerDown, onPointerMove, onPointerUp, onPointerCancel } = require_components_client_BottomSheet_useBottomSheetDrag.useBottomSheetDrag({
+		enableDrag,
+		dismissible,
+		store: dialogStore,
+		sheetRef,
+		isDraggingRef,
+		activeSnapIndex,
+		snapPointTranslatesPx,
+		maxSnapPointPx,
+		resolvedSnapPointsLength: resolvedSnapPoints.length,
+		resolvedDismissThresholdPx,
+		emitSnapPointChange,
+		setTranslateImmediate,
+		openTimeRef,
+		lastTimeDragPreventedRef
+	});
+	(0, react.useEffect)(() => {
+		if (!fullWidthAtMaxSnap || !isOpen) return;
+		const el = sheetRef.current;
+		if (!el || !el.style.height) return;
+		applyExpansionMargins(el, restTranslatePx);
+	}, [
+		restTranslatePx,
+		fullWidthAtMaxSnap,
+		isOpen,
+		applyExpansionMargins
+	]);
+	const dialogBackdrop = modal ? backdrop ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Scrim.Scrim, {
+		className: slotProps?.scrim?.className,
+		animateOpacity: true
+	}) : false;
+	const hideOnInteractOutside = modal && dismissible ? void 0 : false;
+	const isElevationBackgroundColor = configBackgroundColor[variant].startsWith("elevation-");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ariakit_react.Dialog, {
+		ref: sheetRef,
+		store: dialogStore,
+		modal,
+		unmountOnHide: true,
+		hideOnEscape: dismissible ? hideOnEscape : false,
+		hideOnInteractOutside,
+		onClose,
+		backdrop: dialogBackdrop,
+		portal,
+		portalElement,
+		preventBodyScroll: preventBodyScroll ?? (modal ? void 0 : false),
+		"data-testid": "bottom-sheet",
+		className: require_styles_styler.cx("fixed overflow-hidden inset-x-0 bottom-0 z-50", keyboardHeightPx > 0 ? void 0 : "bottom-0", "[will-change:transform] touch-none", "[transform:translate3d(0,var(--uds-bottomsheet-hidden-translate),0)]", "data-[enter]:[transform:translate3d(0,var(--uds-bottomsheet-visible-translate),0)]", "transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]", "motion-reduce:transition-none", sheetClassName, rootVariantClass),
+		style: {
+			maxHeight: maxHeightPx ? `${maxHeightPx}px` : void 0,
+			...shouldHideEdgeBordersAtMaxSnap ? {
+				borderBottomWidth: 0,
+				borderLeftWidth: 0,
+				borderRightWidth: 0
+			} : {},
+			["--uds-bottomsheet-hidden-translate"]: `${viewportHeightPx}px`,
+			["--uds-bottomsheet-visible-translate"]: `${visibleTranslatePx}px`,
+			...isElevationBackgroundColor && {
+				backdropFilter: `var(--uds-background-blur-radius-${configBackgroundColor[variant]})`,
+				WebkitBackdropFilter: `var(--uds-background-blur-radius-${configBackgroundColor[variant]})`
+			}
+		},
+		onPointerDown,
+		onPointerMove,
+		onPointerUp,
+		onPointerCancel,
+		children: [shouldShowHandleIndicator && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+			display: "block",
+			position: "absolute",
+			className: require_styles_styler.cx("inset-x-0 top-[-4px] z-[1] touch-pan-y"),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_BottomSheet_BottomSheetHandle.BottomSheetHandle, {
+				onKeyDown: handleHandleIndicatorKeyDown,
+				ariaLabel: "Resize sheet",
+				className: slotProps?.handleIndicator?.className
+			})
+		}), children]
+	});
+}
+BottomSheet.displayName = "BottomSheet";
+
+//#endregion
+exports.BottomSheet = BottomSheet;

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

@@ -0,0 +1,77 @@
+
+import { UniversalBottomSheetProps } from "../../../types/dist/index.cjs";
+import { BottomSheetController } from "./useBottomSheetStore.cjs";
+import React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { DialogProps } from "@ariakit/react";
+
+//#region src/components/client/BottomSheet/BottomSheet.d.ts
+interface BottomSheetProps extends UniversalBottomSheetProps, Pick<DialogProps, 'unmountOnHide' | 'onClose' | 'preventBodyScroll' | 'modal'> {
+  /**
+   * Controller returned from `useBottomSheetStore()`.
+   * @remarks If omitted, uses the nearest `BottomSheetProvider` context.
+   */
+  controller?: BottomSheetController;
+  /**
+   * Determines whether the element should be rendered as a React Portal.
+   * @default true
+   */
+  portal?: boolean;
+  /**
+   * An HTML element that returns an HTML element to be used as the portal element.
+   * By default, the portal element will be a div element appended to the document.body.
+   * @example
+   * ```jsx
+   * const [portal, setPortal] = useState(null);
+   * <BottomSheet portalElement={portalElement} />
+   * <div ref={setPortalElement} />
+   * ```
+   */
+  portalElement?: HTMLElement;
+  /**
+   * Determines if the dialog will hide when the user presses the Escape key.
+   *
+   * This prop can be either a boolean or a function that accepts an event as an argument and returns a boolean. The event object represents the keydown event that initiated the hide action, which could be either a native keyboard event or a React synthetic event.
+   * @default true
+   */
+  hideOnEscape?: boolean;
+  /** Optional override for the default backdrop element passed to Ariakit Dialog. */
+  backdrop?: React.ReactElement;
+  /** Optional class hooks for internal elements. */
+  slotProps?: {
+    /** Optional className for the scrim element. */scrim?: {
+      className?: string;
+    }; /** Optional className for the handle indicator element. */
+    handleIndicator?: {
+      className?: string;
+    };
+  };
+}
+declare function BottomSheet({
+  children,
+  className: sheetClassName,
+  controller: controllerProp,
+  variant,
+  snapPoints: snapPointsProp,
+  defaultSnapPointIndex,
+  snapPointIndex: snapPointIndexProp,
+  onSnapPointChange,
+  height,
+  modal,
+  portal,
+  portalElement,
+  dismissible,
+  enableDrag,
+  showHandleIndicator,
+  hideOnEscape,
+  onClose,
+  backdrop,
+  preventBodyScroll,
+  slotProps,
+  fullWidthAtMaxSnap
+}: BottomSheetProps): react_jsx_runtime0.JSX.Element;
+declare namespace BottomSheet {
+  var displayName: string;
+}
+//#endregion
+export { BottomSheet, type BottomSheetProps };

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

@@ -0,0 +1,77 @@
+
+import { UniversalBottomSheetProps } from "../../../types/dist/index.js";
+import { BottomSheetController } from "./useBottomSheetStore.js";
+import React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { DialogProps } from "@ariakit/react";
+
+//#region src/components/client/BottomSheet/BottomSheet.d.ts
+interface BottomSheetProps extends UniversalBottomSheetProps, Pick<DialogProps, 'unmountOnHide' | 'onClose' | 'preventBodyScroll' | 'modal'> {
+  /**
+   * Controller returned from `useBottomSheetStore()`.
+   * @remarks If omitted, uses the nearest `BottomSheetProvider` context.
+   */
+  controller?: BottomSheetController;
+  /**
+   * Determines whether the element should be rendered as a React Portal.
+   * @default true
+   */
+  portal?: boolean;
+  /**
+   * An HTML element that returns an HTML element to be used as the portal element.
+   * By default, the portal element will be a div element appended to the document.body.
+   * @example
+   * ```jsx
+   * const [portal, setPortal] = useState(null);
+   * <BottomSheet portalElement={portalElement} />
+   * <div ref={setPortalElement} />
+   * ```
+   */
+  portalElement?: HTMLElement;
+  /**
+   * Determines if the dialog will hide when the user presses the Escape key.
+   *
+   * This prop can be either a boolean or a function that accepts an event as an argument and returns a boolean. The event object represents the keydown event that initiated the hide action, which could be either a native keyboard event or a React synthetic event.
+   * @default true
+   */
+  hideOnEscape?: boolean;
+  /** Optional override for the default backdrop element passed to Ariakit Dialog. */
+  backdrop?: React.ReactElement;
+  /** Optional class hooks for internal elements. */
+  slotProps?: {
+    /** Optional className for the scrim element. */scrim?: {
+      className?: string;
+    }; /** Optional className for the handle indicator element. */
+    handleIndicator?: {
+      className?: string;
+    };
+  };
+}
+declare function BottomSheet({
+  children,
+  className: sheetClassName,
+  controller: controllerProp,
+  variant,
+  snapPoints: snapPointsProp,
+  defaultSnapPointIndex,
+  snapPointIndex: snapPointIndexProp,
+  onSnapPointChange,
+  height,
+  modal,
+  portal,
+  portalElement,
+  dismissible,
+  enableDrag,
+  showHandleIndicator,
+  hideOnEscape,
+  onClose,
+  backdrop,
+  preventBodyScroll,
+  slotProps,
+  fullWidthAtMaxSnap
+}: BottomSheetProps): react_jsx_runtime0.JSX.Element;
+declare namespace BottomSheet {
+  var displayName: string;
+}
+//#endregion
+export { BottomSheet, type BottomSheetProps };

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

@@ -0,0 +1,207 @@
+"use client";
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { cx, getStyles } from "../../../styles/styler.js";
+import { Box } from "../../Box.js";
+import { Scrim } from "../../Scrim.js";
+import { BottomSheetHandle } from "./BottomSheetHandle.js";
+import { useBottomSheetConfig } from "./UDSBottomSheetConfigProvider.js";
+import { useBottomSheetDrag } from "./useBottomSheetDrag.js";
+import { useBottomSheetSnapModel } from "./useBottomSheetSnapModel.js";
+import { getBottomSheetInternal } from "./useBottomSheetStore.js";
+import { useExpansionMargins } from "./useExpansionMargins.js";
+import { useViewportHeight } from "./useViewportHeight.js";
+import { useVirtualKeyboard } from "./useVirtualKeyboard.js";
+import { useCallback, useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog, useDialogContext } from "@ariakit/react";
+
+//#region src/components/client/BottomSheet/BottomSheet.tsx
+/**
+* Drag-to-dismiss distance threshold as a ratio of the lowest snap point's
+* visible height. Dragging down past this fraction of the height dismisses
+* the sheet (regardless of velocity).
+*
+* Velocity and distance are OR conditions — exceeding either one triggers dismissal.
+*/
+const DRAG_DISMISS_THRESHOLD_RATIO = .25;
+/**
+* Top inset reserved when calculating max sheet height.
+* Keeps a visible sliver of page content so the fully expanded state still reads as a bottom sheet.
+*/
+const SHEET_MAX_HEIGHT_TOP_OFFSET_PX = 26;
+function BottomSheet({ children, className: sheetClassName, controller: controllerProp, variant = "default", snapPoints: snapPointsProp, defaultSnapPointIndex = 0, snapPointIndex: snapPointIndexProp, onSnapPointChange, height, modal = true, portal = true, portalElement, dismissible = true, enableDrag = true, showHandleIndicator = true, hideOnEscape = true, onClose, backdrop, preventBodyScroll, slotProps, fullWidthAtMaxSnap = false }) {
+	const storeFromContext = useDialogContext();
+	const dialogStore = controllerProp ? getBottomSheetInternal(controllerProp) : storeFromContext;
+	const { backgroundColor: configBackgroundColor } = useBottomSheetConfig();
+	if (!dialogStore) throw new Error("BottomSheet must be wrapped in BottomSheetProvider or provided a controller prop.");
+	const isOpen = dialogStore.useState().open;
+	const keyboardHeightPx = useVirtualKeyboard(isOpen);
+	const viewportHeightPx = useViewportHeight();
+	const isDraggingRef = useRef(false);
+	const forceZeroMarginsRef = useRef(false);
+	forceZeroMarginsRef.current = keyboardHeightPx > 0;
+	const sheetRef = useRef(null);
+	const maxSnapPxRef = useRef(0);
+	const maxHeightPx = Math.max(viewportHeightPx - SHEET_MAX_HEIGHT_TOP_OFFSET_PX, 0);
+	const rootVariantClass = getStyles({ bottomsheetVariantRoot: variant });
+	const { applyExpansionMargins, thresholdRef: expansionThresholdRef } = useExpansionMargins({
+		sheetRef,
+		maxSnapPxRef,
+		fullWidthAtMaxSnap,
+		snapPointsLength: snapPointsProp?.length ?? 1,
+		isOpen,
+		forceZeroRef: forceZeroMarginsRef
+	});
+	/**
+	* Applies drag-time position updates with no animation.
+	* We model the sheet by height, so translate is converted to height:
+	* `height = maxSnapPointPx - translatePx`.
+	*/
+	const setTranslateImmediate = useCallback((nextTranslatePx) => {
+		const el = sheetRef.current;
+		if (!el) return;
+		el.style.height = `${maxSnapPxRef.current - nextTranslatePx}px`;
+		applyExpansionMargins(el, nextTranslatePx);
+	}, [applyExpansionMargins]);
+	const { resolvedSnapPoints, snapPointsPx, maxSnapPointPx, snapPointTranslatesPx, activeSnapIndex, restTranslatePx, emitSnapPointChange, openTimeRef, lastTimeDragPreventedRef, isEnteringRef } = useBottomSheetSnapModel({
+		isOpen,
+		snapPointsProp,
+		height,
+		defaultSnapPointIndex,
+		snapPointIndexProp,
+		onSnapPointChange,
+		viewportHeightPx,
+		maxHeightPx,
+		setTranslateAnimated: useCallback((nextTranslatePx) => {
+			const el = sheetRef.current;
+			if (!el) return;
+			const nextHeightPx = maxSnapPxRef.current - nextTranslatePx;
+			if (!el.style.height) {
+				el.style.height = `${nextHeightPx}px`;
+				applyExpansionMargins(el, nextTranslatePx);
+			} else {
+				const easing = "cubic-bezier(0.32, 0.72, 0, 1)";
+				let transition = `height 500ms ${easing}`;
+				if (expansionThresholdRef.current != null) transition += `, margin-left 500ms ${easing}, margin-right 500ms ${easing}, margin-bottom 500ms ${easing}`;
+				el.style.transition = transition;
+				el.style.height = `${nextHeightPx}px`;
+				applyExpansionMargins(el, nextTranslatePx);
+				const cleanup = () => {
+					el.style.removeProperty("transition");
+					el.removeEventListener("transitionend", cleanup);
+				};
+				el.addEventListener("transitionend", cleanup);
+			}
+		}, [applyExpansionMargins, expansionThresholdRef]),
+		isDraggingRef
+	});
+	maxSnapPxRef.current = maxSnapPointPx;
+	expansionThresholdRef.current = fullWidthAtMaxSnap && (snapPointsProp?.length ?? 1) >= 2 ? snapPointsPx[snapPointsPx.length - 2] ?? 0 : null;
+	const visibleTranslatePx = isOpen && !isEnteringRef.current ? 0 : viewportHeightPx;
+	const resolvedDismissThresholdPx = (snapPointsPx[0] ?? maxSnapPointPx) * DRAG_DISMISS_THRESHOLD_RATIO;
+	const shouldShowHandleIndicator = showHandleIndicator && enableDrag;
+	const isAtMaxSnapPoint = activeSnapIndex === resolvedSnapPoints.length - 1;
+	const shouldHideEdgeBordersAtMaxSnap = fullWidthAtMaxSnap && resolvedSnapPoints.length >= 2 && isAtMaxSnapPoint;
+	const handleHandleIndicatorKeyDown = useCallback((event) => {
+		if (!shouldShowHandleIndicator || resolvedSnapPoints.length <= 1) return;
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			emitSnapPointChange(activeSnapIndex + 1);
+		}
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			if (activeSnapIndex === 0 && dismissible) {
+				dialogStore.hide();
+				return;
+			}
+			emitSnapPointChange(activeSnapIndex - 1);
+		}
+	}, [
+		activeSnapIndex,
+		dismissible,
+		emitSnapPointChange,
+		resolvedSnapPoints.length,
+		shouldShowHandleIndicator,
+		dialogStore
+	]);
+	const { onPointerDown, onPointerMove, onPointerUp, onPointerCancel } = useBottomSheetDrag({
+		enableDrag,
+		dismissible,
+		store: dialogStore,
+		sheetRef,
+		isDraggingRef,
+		activeSnapIndex,
+		snapPointTranslatesPx,
+		maxSnapPointPx,
+		resolvedSnapPointsLength: resolvedSnapPoints.length,
+		resolvedDismissThresholdPx,
+		emitSnapPointChange,
+		setTranslateImmediate,
+		openTimeRef,
+		lastTimeDragPreventedRef
+	});
+	useEffect(() => {
+		if (!fullWidthAtMaxSnap || !isOpen) return;
+		const el = sheetRef.current;
+		if (!el || !el.style.height) return;
+		applyExpansionMargins(el, restTranslatePx);
+	}, [
+		restTranslatePx,
+		fullWidthAtMaxSnap,
+		isOpen,
+		applyExpansionMargins
+	]);
+	const dialogBackdrop = modal ? backdrop ?? /* @__PURE__ */ jsx(Scrim, {
+		className: slotProps?.scrim?.className,
+		animateOpacity: true
+	}) : false;
+	const hideOnInteractOutside = modal && dismissible ? void 0 : false;
+	const isElevationBackgroundColor = configBackgroundColor[variant].startsWith("elevation-");
+	return /* @__PURE__ */ jsxs(Dialog, {
+		ref: sheetRef,
+		store: dialogStore,
+		modal,
+		unmountOnHide: true,
+		hideOnEscape: dismissible ? hideOnEscape : false,
+		hideOnInteractOutside,
+		onClose,
+		backdrop: dialogBackdrop,
+		portal,
+		portalElement,
+		preventBodyScroll: preventBodyScroll ?? (modal ? void 0 : false),
+		"data-testid": "bottom-sheet",
+		className: cx("fixed overflow-hidden inset-x-0 bottom-0 z-50", keyboardHeightPx > 0 ? void 0 : "bottom-0", "[will-change:transform] touch-none", "[transform:translate3d(0,var(--uds-bottomsheet-hidden-translate),0)]", "data-[enter]:[transform:translate3d(0,var(--uds-bottomsheet-visible-translate),0)]", "transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]", "motion-reduce:transition-none", sheetClassName, rootVariantClass),
+		style: {
+			maxHeight: maxHeightPx ? `${maxHeightPx}px` : void 0,
+			...shouldHideEdgeBordersAtMaxSnap ? {
+				borderBottomWidth: 0,
+				borderLeftWidth: 0,
+				borderRightWidth: 0
+			} : {},
+			["--uds-bottomsheet-hidden-translate"]: `${viewportHeightPx}px`,
+			["--uds-bottomsheet-visible-translate"]: `${visibleTranslatePx}px`,
+			...isElevationBackgroundColor && {
+				backdropFilter: `var(--uds-background-blur-radius-${configBackgroundColor[variant]})`,
+				WebkitBackdropFilter: `var(--uds-background-blur-radius-${configBackgroundColor[variant]})`
+			}
+		},
+		onPointerDown,
+		onPointerMove,
+		onPointerUp,
+		onPointerCancel,
+		children: [shouldShowHandleIndicator && /* @__PURE__ */ jsx(Box, {
+			display: "block",
+			position: "absolute",
+			className: cx("inset-x-0 top-[-4px] z-[1] touch-pan-y"),
+			children: /* @__PURE__ */ jsx(BottomSheetHandle, {
+				onKeyDown: handleHandleIndicatorKeyDown,
+				ariaLabel: "Resize sheet",
+				className: slotProps?.handleIndicator?.className
+			})
+		}), children]
+	});
+}
+BottomSheet.displayName = "BottomSheet";
+
+//#endregion
+export { BottomSheet };