@yahoo/uds 3.114.0-beta.2 → 3.114.0

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

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

@@ -0,0 +1,26 @@
+"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_VStack = require('../../VStack.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/client/BottomSheet/BottomSheetContent.tsx
+function BottomSheetContent({ children, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+		display: "block",
+		overflowY: "auto",
+		flex: "1",
+		className: require_styles_styler.cx("min-h-0", "touch-pan-y", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_VStack.VStack, {
+			className: "pb-[calc(env(safe-area-inset-bottom))]",
+			children
+		})
+	});
+}
+BottomSheetContent.displayName = "BottomSheetContent";
+
+//#endregion
+exports.BottomSheetContent = BottomSheetContent;

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

@@ -0,0 +1,15 @@
+
+import { UniversalBottomSheetContentProps } from "../../../types/dist/index.cjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/BottomSheet/BottomSheetContent.d.ts
+type BottomSheetContentProps = UniversalBottomSheetContentProps;
+declare function BottomSheetContent({
+  children,
+  className
+}: BottomSheetContentProps): react_jsx_runtime0.JSX.Element;
+declare namespace BottomSheetContent {
+  var displayName: string;
+}
+//#endregion
+export { BottomSheetContent, type BottomSheetContentProps };

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

@@ -0,0 +1,15 @@
+
+import { UniversalBottomSheetContentProps } from "../../../types/dist/index.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/BottomSheet/BottomSheetContent.d.ts
+type BottomSheetContentProps = UniversalBottomSheetContentProps;
+declare function BottomSheetContent({
+  children,
+  className
+}: BottomSheetContentProps): react_jsx_runtime0.JSX.Element;
+declare namespace BottomSheetContent {
+  var displayName: string;
+}
+//#endregion
+export { BottomSheetContent, type BottomSheetContentProps };

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

@@ -0,0 +1,24 @@
+"use client";
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { cx } from "../../../styles/styler.js";
+import { Box } from "../../Box.js";
+import { VStack } from "../../VStack.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/client/BottomSheet/BottomSheetContent.tsx
+function BottomSheetContent({ children, className }) {
+	return /* @__PURE__ */ jsx(Box, {
+		display: "block",
+		overflowY: "auto",
+		flex: "1",
+		className: cx("min-h-0", "touch-pan-y", className),
+		children: /* @__PURE__ */ jsx(VStack, {
+			className: "pb-[calc(env(safe-area-inset-bottom))]",
+			children
+		})
+	});
+}
+BottomSheetContent.displayName = "BottomSheetContent";
+
+//#endregion
+export { BottomSheetContent };

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

@@ -0,0 +1,15 @@
+"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_jsx_runtime = require("react/jsx-runtime");
+let _ariakit_react_dialog = require("@ariakit/react/dialog");
+
+//#region src/components/client/BottomSheet/BottomSheetDismiss.tsx
+function BottomSheetDismiss(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react_dialog.DialogDismiss, { ...props });
+}
+BottomSheetDismiss.displayName = "BottomSheetDismiss";
+
+//#endregion
+exports.BottomSheetDismiss = BottomSheetDismiss;

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

@@ -0,0 +1,12 @@
+
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { DialogDismissProps } from "@ariakit/react/dialog";
+
+//#region src/components/client/BottomSheet/BottomSheetDismiss.d.ts
+type BottomSheetDismissProps = DialogDismissProps;
+declare function BottomSheetDismiss(props: BottomSheetDismissProps): react_jsx_runtime0.JSX.Element;
+declare namespace BottomSheetDismiss {
+  var displayName: string;
+}
+//#endregion
+export { BottomSheetDismiss, type BottomSheetDismissProps };

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

@@ -0,0 +1,12 @@
+
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { DialogDismissProps } from "@ariakit/react/dialog";
+
+//#region src/components/client/BottomSheet/BottomSheetDismiss.d.ts
+type BottomSheetDismissProps = DialogDismissProps;
+declare function BottomSheetDismiss(props: BottomSheetDismissProps): react_jsx_runtime0.JSX.Element;
+declare namespace BottomSheetDismiss {
+  var displayName: string;
+}
+//#endregion
+export { BottomSheetDismiss, type BottomSheetDismissProps };

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

@@ -0,0 +1,13 @@
+"use client";
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { jsx } from "react/jsx-runtime";
+import { DialogDismiss } from "@ariakit/react/dialog";
+
+//#region src/components/client/BottomSheet/BottomSheetDismiss.tsx
+function BottomSheetDismiss(props) {
+	return /* @__PURE__ */ jsx(DialogDismiss, { ...props });
+}
+BottomSheetDismiss.displayName = "BottomSheetDismiss";
+
+//#endregion
+export { BottomSheetDismiss };

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

@@ -0,0 +1,30 @@
+"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');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/client/BottomSheet/BottomSheetHandle.tsx
+function BottomSheetHandle({ className, onKeyDown, ariaLabel }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+		display: "flex",
+		justifyContent: "center",
+		className: require_styles_styler.cx(className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+			tabIndex: 0,
+			"aria-label": ariaLabel ?? "Resize sheet",
+			onKeyDown,
+			className: require_styles_styler.cx("relative", "h-5 w-16", "outline-none focus-visible:outline-none", "[touch-action:pan-y]"),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+				display: "block",
+				className: require_styles_styler.cx("absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", "h-1 w-8 rounded-full bg-accent")
+			})
+		})
+	});
+}
+BottomSheetHandle.displayName = "BottomSheetHandle";
+
+//#endregion
+exports.BottomSheetHandle = BottomSheetHandle;

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

@@ -0,0 +1,19 @@
+
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/BottomSheet/BottomSheetHandle.d.ts
+interface BottomSheetHandleProps {
+  className?: string;
+  onKeyDown?: (event: React.KeyboardEvent) => void;
+  ariaLabel?: string;
+}
+declare function BottomSheetHandle({
+  className,
+  onKeyDown,
+  ariaLabel
+}: BottomSheetHandleProps): react_jsx_runtime0.JSX.Element;
+declare namespace BottomSheetHandle {
+  var displayName: string;
+}
+//#endregion
+export { BottomSheetHandle };

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

@@ -0,0 +1,19 @@
+
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/BottomSheet/BottomSheetHandle.d.ts
+interface BottomSheetHandleProps {
+  className?: string;
+  onKeyDown?: (event: React.KeyboardEvent) => void;
+  ariaLabel?: string;
+}
+declare function BottomSheetHandle({
+  className,
+  onKeyDown,
+  ariaLabel
+}: BottomSheetHandleProps): react_jsx_runtime0.JSX.Element;
+declare namespace BottomSheetHandle {
+  var displayName: string;
+}
+//#endregion
+export { BottomSheetHandle };

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

@@ -0,0 +1,28 @@
+"use client";
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { cx } from "../../../styles/styler.js";
+import { Box } from "../../Box.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/client/BottomSheet/BottomSheetHandle.tsx
+function BottomSheetHandle({ className, onKeyDown, ariaLabel }) {
+	return /* @__PURE__ */ jsx(Box, {
+		display: "flex",
+		justifyContent: "center",
+		className: cx(className),
+		children: /* @__PURE__ */ jsx(Box, {
+			tabIndex: 0,
+			"aria-label": ariaLabel ?? "Resize sheet",
+			onKeyDown,
+			className: cx("relative", "h-5 w-16", "outline-none focus-visible:outline-none", "[touch-action:pan-y]"),
+			children: /* @__PURE__ */ jsx(Box, {
+				display: "block",
+				className: cx("absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", "h-1 w-8 rounded-full bg-accent")
+			})
+		})
+	});
+}
+BottomSheetHandle.displayName = "BottomSheetHandle";
+
+//#endregion
+export { BottomSheetHandle };

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

@@ -0,0 +1,42 @@
+"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_Text = require('../../Text.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/client/BottomSheet/BottomSheetHeader.tsx
+function BottomSheetHeader({ children, start, end, variant = "default", className }) {
+	const headerVariantClass = require_styles_styler.getStyles({ bottomsheetVariantHeader: variant });
+	const resolvedStart = start ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, { className: "h-10 w-10 opacity-0 pointer-events-none" });
+	const resolvedEnd = end ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, { className: "h-10 w-10 opacity-0 pointer-events-none" });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
+		display: "grid",
+		className: require_styles_styler.cx("grid-cols-[40px_1fr_40px]", "items-center", "w-full", "min-h-10", "mt-2", headerVariantClass, className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+				display: "flex",
+				justifyContent: "flex-start",
+				children: resolvedStart
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+				variant: "inherit",
+				color: "inherit",
+				textAlign: "center",
+				className: "w-full",
+				children
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+				display: "flex",
+				justifyContent: "flex-end",
+				children: resolvedEnd
+			})
+		]
+	});
+}
+BottomSheetHeader.displayName = "BottomSheetHeader";
+
+//#endregion
+exports.BottomSheetHeader = BottomSheetHeader;

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

@@ -0,0 +1,18 @@
+
+import { UniversalBottomSheetHeaderProps } from "../../../types/dist/index.cjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/BottomSheet/BottomSheetHeader.d.ts
+type BottomSheetHeaderProps = UniversalBottomSheetHeaderProps;
+declare function BottomSheetHeader({
+  children,
+  start,
+  end,
+  variant,
+  className
+}: BottomSheetHeaderProps): react_jsx_runtime0.JSX.Element;
+declare namespace BottomSheetHeader {
+  var displayName: string;
+}
+//#endregion
+export { BottomSheetHeader, type BottomSheetHeaderProps };