@yahoo/uds 3.114.0-beta.2 → 3.114.0

package/dist/cli/commands/sync.cjs

@@ -2,17 +2,19 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
 const require_defaultTokensConfig = require('../../defaultTokensConfig.cjs');
+const require_runtime_bottomSheetConfig = require('../../runtime/bottomSheetConfig.cjs');
 const require_runtime_breakpointsConfig = require('../../runtime/breakpointsConfig.cjs');
 const require_runtime_toastConfig = require('../../runtime/toastConfig.cjs');
 const require_runtime_tooltipConfig = require('../../runtime/tooltipConfig.cjs');
+const require_analytics = require('../dist/utils/analytics.cjs');
 const require_colors = require('../dist/lib/colors.cjs');
 const require_print = require('../dist/lib/print.cjs');
 const require_box = require('../dist/lib/box.cjs');
 const require_config = require('../dist/utils/rules/config.cjs');
 const require_cli_commands_utils_sortKeys = require('./utils/sortKeys.cjs');
-let node_fs = require("node:fs");
 let node_path = require("node:path");
 node_path = require_runtime.__toESM(node_path);
+let node_fs = require("node:fs");
 
 //#region src/cli/commands/sync.ts
 const PRODUCTION_ENDPOINT = "https://config.uds.build/api/config";
@@ -61,6 +63,7 @@ const syncCommand = {
 			const exportsTS = [`export const config: UniversalTokensConfig = ${JSON.stringify(sortedConfig, null, 2)} as UniversalTokensConfig;`];
 			const exportsJS = [`export const config = ${JSON.stringify(sortedConfig, null, 2)};`];
 			const runtimeConfigs = {
+				bottomSheet: [require_runtime_bottomSheetConfig.configToBottomSheetConfigContext(sortedConfig), "UDSBottomSheetConfigContextType"],
 				breakpoints: [require_runtime_breakpointsConfig.configToBreakpointsConfigContext(sortedConfig), "UDSBreakpointsConfigContextType"],
 				toast: [require_runtime_toastConfig.configToToastConfigContext(sortedConfig), "UDSToastConfigContextType"],
 				tooltip: [require_runtime_tooltipConfig.configToTooltipConfigContext(sortedConfig), "UDSTooltipConfigContextType"]
@@ -75,11 +78,13 @@ const syncCommand = {
 			runtimeTypeImports.push("UDSConfigContextType");
 			importsTS.push(`import type { ${runtimeTypeImports.sort().join(", ")} } from '@yahoo/uds/runtime';`);
 			exportsTS.push(`export const runtimeConfig: UDSConfigContextType = {
+  bottomSheet: bottomSheetRuntimeConfig,
   breakpoints: breakpointsRuntimeConfig,
   toast: toastRuntimeConfig,
   tooltip: tooltipRuntimeConfig,
 };`);
 			exportsJS.push(`export const runtimeConfig = {
+  bottomSheet: bottomSheetRuntimeConfig,
   breakpoints: breakpointsRuntimeConfig,
   toast: toastRuntimeConfig,
   tooltip: tooltipRuntimeConfig,
@@ -90,6 +95,7 @@ const syncCommand = {
 			require_print.print(require_colors.green(`✅ Synced UDS config ${id} to ${fullPath}`));
 			const staleEditors = require_config.getEditorsWithStaleRules(process.cwd());
 			if (staleEditors.length > 0) require_box.printBox([require_colors.bold(`Updated UDS rules are available for ${staleEditors.join(" and ")}.`), `Run ${require_colors.cyan("`uds editor-rules`")} to update.`]);
+			await require_analytics.trackEvent("sync", { id });
 		} catch (error) {
 			require_print.print(require_colors.red(`❌ ${error.message}`));
 			require_print.print(require_colors.yellow("Please reach out to #uds-ask channel for support."));

package/dist/cli/commands/sync.d.cts

@@ -1,5 +1,5 @@
 
-import { Props } from "@yahoo/uds-cli/lib";
+import { Props } from "@yahoo/uds-cli";
 
 //#region src/cli/commands/sync.d.ts
 declare const syncCommand: {

package/dist/cli/commands/sync.d.ts

@@ -1,5 +1,5 @@
 
-import { Props } from "@yahoo/uds-cli/lib";
+import { Props } from "@yahoo/uds-cli";
 
 //#region src/cli/commands/sync.d.ts
 declare const syncCommand: {

package/dist/cli/commands/sync.js

@@ -1,15 +1,17 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 import { defaultTokensConfig } from "../../defaultTokensConfig.js";
+import { configToBottomSheetConfigContext } from "../../runtime/bottomSheetConfig.js";
 import { configToBreakpointsConfigContext } from "../../runtime/breakpointsConfig.js";
 import { configToToastConfigContext } from "../../runtime/toastConfig.js";
 import { configToTooltipConfigContext } from "../../runtime/tooltipConfig.js";
+import { trackEvent } from "../dist/utils/analytics.js";
 import { bold, cyan, green, magenta, red, yellow } from "../dist/lib/colors.js";
 import { print } from "../dist/lib/print.js";
 import { printBox } from "../dist/lib/box.js";
 import { getEditorsWithStaleRules } from "../dist/utils/rules/config.js";
 import { sortKeys } from "./utils/sortKeys.js";
-import { writeFileSync } from "node:fs";
 import path from "node:path";
+import { writeFileSync } from "node:fs";
 
 //#region src/cli/commands/sync.ts
 const PRODUCTION_ENDPOINT = "https://config.uds.build/api/config";
@@ -58,6 +60,7 @@ const syncCommand = {
 			const exportsTS = [`export const config: UniversalTokensConfig = ${JSON.stringify(sortedConfig, null, 2)} as UniversalTokensConfig;`];
 			const exportsJS = [`export const config = ${JSON.stringify(sortedConfig, null, 2)};`];
 			const runtimeConfigs = {
+				bottomSheet: [configToBottomSheetConfigContext(sortedConfig), "UDSBottomSheetConfigContextType"],
 				breakpoints: [configToBreakpointsConfigContext(sortedConfig), "UDSBreakpointsConfigContextType"],
 				toast: [configToToastConfigContext(sortedConfig), "UDSToastConfigContextType"],
 				tooltip: [configToTooltipConfigContext(sortedConfig), "UDSTooltipConfigContextType"]
@@ -72,11 +75,13 @@ const syncCommand = {
 			runtimeTypeImports.push("UDSConfigContextType");
 			importsTS.push(`import type { ${runtimeTypeImports.sort().join(", ")} } from '@yahoo/uds/runtime';`);
 			exportsTS.push(`export const runtimeConfig: UDSConfigContextType = {
+  bottomSheet: bottomSheetRuntimeConfig,
   breakpoints: breakpointsRuntimeConfig,
   toast: toastRuntimeConfig,
   tooltip: tooltipRuntimeConfig,
 };`);
 			exportsJS.push(`export const runtimeConfig = {
+  bottomSheet: bottomSheetRuntimeConfig,
   breakpoints: breakpointsRuntimeConfig,
   toast: toastRuntimeConfig,
   tooltip: tooltipRuntimeConfig,
@@ -87,6 +92,7 @@ const syncCommand = {
 			print(green(`✅ Synced UDS config ${id} to ${fullPath}`));
 			const staleEditors = getEditorsWithStaleRules(process.cwd());
 			if (staleEditors.length > 0) printBox([bold(`Updated UDS rules are available for ${staleEditors.join(" and ")}.`), `Run ${cyan("`uds editor-rules`")} to update.`]);
+			await trackEvent("sync", { id });
 		} catch (error) {
 			print(red(`❌ ${error.message}`));
 			print(yellow("Please reach out to #uds-ask channel for support."));

package/dist/cli/commands/version.cjs

@@ -1,6 +1,7 @@
 /*! © 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_analytics = require('../dist/utils/analytics.cjs');
 const require_print = require('../dist/lib/print.cjs');
 let _yahoo_uds_package_json = require("@yahoo/uds/package.json");
 _yahoo_uds_package_json = require_runtime.__toESM(_yahoo_uds_package_json);
@@ -12,6 +13,7 @@ const versionCommand = {
 	description: `Display CLI version (${version})`,
 	run: async () => {
 		require_print.print(version);
+		await require_analytics.trackEvent("version", { version });
 	}
 };
 

package/dist/cli/commands/version.d.cts

@@ -1,5 +1,5 @@
 
-import { Command } from "@yahoo/uds-cli/lib";
+import { Command } from "@yahoo/uds-cli";
 
 //#region src/cli/commands/version.d.ts
 declare const versionCommand: Command;

package/dist/cli/commands/version.d.ts

@@ -1,5 +1,5 @@
 
-import { Command } from "@yahoo/uds-cli/lib";
+import { Command } from "@yahoo/uds-cli";
 
 //#region src/cli/commands/version.d.ts
 declare const versionCommand: Command;

package/dist/cli/commands/version.js

@@ -1,4 +1,5 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { trackEvent } from "../dist/utils/analytics.js";
 import { print } from "../dist/lib/print.js";
 import pkg from "@yahoo/uds/package.json" with { type: "json" };
 
@@ -9,6 +10,7 @@ const versionCommand = {
 	description: `Display CLI version (${version})`,
 	run: async () => {
 		print(version);
+		await trackEvent("version", { version });
 	}
 };
 

package/dist/cli/dist/cli.cjs

@@ -1,8 +1,8 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+const require_analytics = require('./utils/analytics.cjs');
 const require_args = require('./lib/args.cjs');
 const require_colors = require('./lib/colors.cjs');
 const require_print = require('./lib/print.cjs');
-const require_analytics = require('./utils/analytics.cjs');
 const require_getCommandHelp = require('./utils/getCommandHelp.cjs');
 const require_codemod = require('./commands/codemod/codemod.cjs');
 const require_editor_rules = require('./commands/editor-rules.cjs');

package/dist/cli/dist/cli.js

@@ -1,8 +1,8 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { trackEvent } from "./utils/analytics.js";
 import { parseArgs } from "./lib/args.js";
 import { cyan, gray, green, magenta, red, white } from "./lib/colors.js";
 import { print } from "./lib/print.js";
-import { trackEvent } from "./utils/analytics.js";
 import { CODEMOD_SUBCOMMANDS } from "./utils/getCommandHelp.js";
 import { codemod_default } from "./commands/codemod/codemod.js";
 import { editor_rules_default } from "./commands/editor-rules.js";

package/dist/cli/dist/commands/editor-rules.cjs

@@ -1,11 +1,11 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_analytics = require('../utils/analytics.cjs');
 const require_colors = require('../lib/colors.cjs');
 const require_print = require('../lib/print.cjs');
-const require_analytics = require('../utils/analytics.cjs');
 const require_config = require('../utils/rules/config.cjs');
-let node_fs = require("node:fs");
 let node_path = require("node:path");
+let node_fs = require("node:fs");
 
 //#region ../cli/dist/commands/editor-rules.mjs
 /*! © 2026 Yahoo, Inc. UDS CLI v0.0.0-development */

package/dist/cli/dist/commands/editor-rules.js

@@ -1,10 +1,10 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { trackEvent } from "../utils/analytics.js";
 import { blue, green, red, yellow } from "../lib/colors.js";
 import { print } from "../lib/print.js";
-import { trackEvent } from "../utils/analytics.js";
 import { getAvailableEditors, getEditorConfig, getRuleContent } from "../utils/rules/config.js";
-import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
 import { join } from "node:path";
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
 
 //#region ../cli/dist/commands/editor-rules.mjs
 /*! © 2026 Yahoo, Inc. UDS CLI v0.0.0-development */

package/dist/cli/dist/utils/rules/config.cjs

@@ -1,7 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 const require_runtime = require('../../../../_virtual/_rolldown/runtime.cjs');
-let node_fs = require("node:fs");
 let node_path = require("node:path");
+let node_fs = require("node:fs");
 let node_url = require("node:url");
 
 //#region ../cli/dist/utils/rules/config.mjs

package/dist/cli/dist/utils/rules/config.js

@@ -1,6 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-import { existsSync, readFileSync } from "node:fs";
 import { dirname, join } from "node:path";
+import { existsSync, readFileSync } from "node:fs";
 import { fileURLToPath } from "node:url";
 
 //#region ../cli/dist/utils/rules/config.mjs

package/dist/cli/runner.cjs

@@ -2,17 +2,16 @@
 const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
 const require_styles_variants = require('../styles/variants.cjs');
 const require_components_index = require('../components/index.cjs');
-const require_css = require('../tailwind/dist/commands/css.cjs');
+const require_cli = require('./dist/cli.cjs');
 const require_generateComponentData = require('../tailwind/dist/commands/generateComponentData.cjs');
 const require_generatePurgeCSSData = require('../tailwind/dist/commands/generatePurgeCSSData.cjs');
 const require_purge = require('../tailwind/dist/commands/purge.cjs');
-const require_cli = require('./dist/cli.cjs');
 const require_package = require('../uds/package.cjs');
 const require_components_experimental_index = require('../components/experimental/index.cjs');
 const require_cli_commands_sync = require('./commands/sync.cjs');
 const require_cli_commands_version = require('./commands/version.cjs');
-let ts_morph = require("ts-morph");
 let node_path = require("node:path");
+let ts_morph = require("ts-morph");
 
 //#region src/cli/runner.ts
 require_cli.run([
@@ -45,14 +44,6 @@ require_cli.run([
 			outputFile: (0, node_path.join)(process.cwd(), "generated/componentData.json")
 		};
 	}),
-	require_css.makeCSSCommand(async () => {
-		const componentData = await Promise.resolve().then(() => require("../uds/generated/componentData.cjs"));
-		return {
-			variants: require_styles_variants.variants,
-			autoVariants: (await Promise.resolve().then(() => require("../automated-config/dist/generated/autoVariants.cjs"))).autoVariants,
-			componentData
-		};
-	}),
 	require_cli_commands_sync.syncCommand
 ]);
 

package/dist/cli/runner.js

@@ -1,17 +1,16 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 import { variants } from "../styles/variants.js";
 import { components_exports } from "../components/index.js";
-import { makeCSSCommand } from "../tailwind/dist/commands/css.js";
+import { run } from "./dist/cli.js";
 import { makeGenerateComponentDataCommand } from "../tailwind/dist/commands/generateComponentData.js";
 import { makeGeneratePurgeCSSDataCommand } from "../tailwind/dist/commands/generatePurgeCSSData.js";
 import { makePurgeCommand } from "../tailwind/dist/commands/purge.js";
-import { run } from "./dist/cli.js";
 import package_default from "../uds/package.js";
 import { experimental_exports } from "../components/experimental/index.js";
 import { syncCommand } from "./commands/sync.js";
 import { versionCommand } from "./commands/version.js";
-import { Project } from "ts-morph";
 import { join } from "node:path";
+import { Project } from "ts-morph";
 
 //#region src/cli/runner.ts
 run([
@@ -44,14 +43,6 @@ run([
 			outputFile: join(process.cwd(), "generated/componentData.json")
 		};
 	}),
-	makeCSSCommand(async () => {
-		const componentData = await import("../uds/generated/componentData.js");
-		return {
-			variants,
-			autoVariants: (await import("../automated-config/dist/generated/autoVariants.js")).autoVariants,
-			componentData
-		};
-	}),
 	syncCommand
 ]);
 

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;