@windmorph/react 0.0.0-stage → 0.1.0

package/dist/components/sheet/BottomSheet.js

@@ -0,0 +1,442 @@
+"use client";
+import { useThemeScope } from "../../theme/context.js";
+import { cn } from "../../utils/cn.js";
+import { TriggerContext } from "../../primitives/TriggerContext.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { usePresence } from "../../primitives/use-presence.js";
+import { IconButton } from "../icon-button/IconButton.js";
+import { focusFirstInteractive } from "../../utils/focus.js";
+import { Overlay as Overlay$1 } from "../../primitives/Overlay.js";
+import { CloseIcon, CollapseIcon } from "./sheet-icons.js";
+import { closedByOverlayOptions } from "../../utils/closed-by.js";
+import { SheetTriggerContext } from "./SheetTrigger.js";
+import { ownsGesture } from "./sheet-gesture.js";
+import { contentGesture, scrolledAbove } from "./bottom-sheet-gesture.js";
+import { EXIT_DISTANCE, releaseMotion, releaseVelocity, settleTarget } from "./sheet-settle.js";
+import { usePeekInert } from "./use-peek-inert.js";
+import { SHEET_EXIT_PROPERTIES, bottomSheetStyles } from "./sheet-styles.js";
+import { useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps, useDialog, useFocusRing, useModalOverlay, useObjectRef } from "react-aria";
+import { useOverlayTriggerState } from "react-stately";
+//#region src/components/sheet/BottomSheet.tsx
+const DEFAULT_LABELS = {
+	expand: "Expand sheet",
+	collapse: "Collapse sheet",
+	dismiss: "Close sheet",
+	close: "Close"
+};
+/** The interactive strip at the top of a sheet without a drag handle (m3.material.io). */
+const DRAG_ZONE = 48;
+/**
+* M3 bottom sheet. A `modal` sheet slides up over a scrim, opening to half the window when
+* its content is taller (drag the handle up, or press it, to expand), and closes on a drag
+* down, a press on the scrim or Escape, in one press from any height. A
+* `standard` sheet sits over the page without a scrim, collapsed to `peekHeight` until it
+* is expanded, or opening expanded with `defaultDetent="expanded"`; `detent` and
+* `onDetentChange` control it.
+*
+* @example
+* <SheetTrigger>
+*   <Button>Share</Button>
+*   <BottomSheet aria-label="Share">{({ close }) => <ShareOptions onPick={close} />}</BottomSheet>
+* </SheetTrigger>
+*/
+function BottomSheet({ variant = "modal", open, defaultOpen, onOpenChange, ...props }) {
+	const trigger = useContext(SheetTriggerContext);
+	const ownState = useOverlayTriggerState({
+		isOpen: open,
+		defaultOpen: defaultOpen ?? (variant === "standard" ? true : void 0),
+		onOpenChange
+	});
+	const state = (variant === "modal" ? trigger?.state : void 0) ?? ownState;
+	const { isPresent, isExiting, exitProps } = usePresence(state.isOpen, SHEET_EXIT_PROPERTIES);
+	if (!isPresent) return null;
+	if (variant === "standard") return /* @__PURE__ */ jsx(BottomSheetPanel, {
+		...props,
+		variant: "standard",
+		state,
+		isExiting,
+		exitProps
+	});
+	return /* @__PURE__ */ jsx(Overlay$1, {
+		exiting: isExiting,
+		children: /* @__PURE__ */ jsx(ModalBottomSheet, {
+			...props,
+			state,
+			isExiting,
+			exitProps,
+			triggerOverlayProps: trigger?.overlayProps
+		})
+	});
+}
+function ModalBottomSheet({ state, isExiting, triggerOverlayProps, closedBy = "any", classNames, ref, ...props }) {
+	const panelRef = useObjectRef(ref);
+	const { modalProps, underlayProps } = useModalOverlay({
+		...closedByOverlayOptions(closedBy, isExiting),
+		isKeyboardDismissDisabled: true
+	}, state, panelRef);
+	const { dialogProps } = useDialog(props, panelRef);
+	useEffect(() => focusFirstInteractive(panelRef.current), [panelRef]);
+	const styles = bottomSheetStyles();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		"data-exiting": isExiting || void 0,
+		className: styles.scrim({ class: classNames?.scrim })
+	}), /* @__PURE__ */ jsx("div", {
+		...underlayProps,
+		className: "fixed inset-0 z-(--md-sys-z-sheet)",
+		children: /* @__PURE__ */ jsx(BottomSheetPanel, {
+			...props,
+			variant: "modal",
+			closedBy,
+			state,
+			isExiting,
+			classNames,
+			ref: panelRef,
+			panelProps: mergeProps(triggerOverlayProps ?? {}, modalProps, dialogProps)
+		})
+	})] });
+}
+/** The sheet itself: the moving wrapper, the panel, its handle and its detents. */
+function BottomSheetPanel({ variant, state, isExiting, exitProps, panelProps: overlayPanelProps, dragHandle = true, swipeable = true, skipPartiallyExpanded = false, peekHeight = 56, detent: detentProp, defaultDetent = "collapsed", onDetentChange, closedBy = "any", closeButton = true, closeIcon, collapseIcon, labels: labelsProp, children, className, classNames, style, ref, ...rest }) {
+	const labels = {
+		...DEFAULT_LABELS,
+		...labelsProp
+	};
+	const standard = variant === "standard";
+	const panelRef = useObjectRef(ref);
+	const motionRef = useRef(null);
+	const styles = bottomSheetStyles({
+		variant,
+		swipeable
+	});
+	const [height, setHeight] = useState(0);
+	const [viewport, setViewport] = useState({
+		width: 0,
+		height: 0
+	});
+	const [ownDetent, setOwnDetent] = useState(standard && defaultDetent === "expanded" ? "expanded" : null);
+	const controlledDetent = standard && detentProp !== void 0 ? detentProp === "expanded" ? "expanded" : "lower" : void 0;
+	const detent = controlledDetent ?? ownDetent;
+	const [drag, setDrag] = useState(null);
+	const { motion: motionScheme } = useThemeScope();
+	const [settleMotion, setSettleMotion] = useState(null);
+	const [dragClosing, setDragClosing] = useState(false);
+	if (dragClosing && state.isOpen) {
+		setDragClosing(false);
+		setDrag(null);
+		setSettleMotion(null);
+	}
+	const contentRef = useRef(null);
+	const pointer = useRef({
+		pending: false,
+		fromHandle: false,
+		/** Started on the content, where a drag only moves the sheet once it picks `drag`. */
+		fromContent: false,
+		gesture: "undecided",
+		x: 0,
+		y: 0,
+		offset: 0,
+		id: 0,
+		samples: []
+	});
+	const lowerOffset = standard ? height - peekHeight : height - viewport.height / 2;
+	const hasLower = standard ? height > peekHeight : !skipPartiallyExpanded && lowerOffset > 0;
+	const current = detent === "expanded" || !hasLower ? "expanded" : "lower";
+	const restingOffset = current === "lower" ? lowerOffset : 0;
+	const offset = drag ?? restingOffset;
+	const maxOffset = standard ? Math.max(0, lowerOffset) : height;
+	const detentName = current === "expanded" ? "expanded" : standard ? "collapsed" : "partial";
+	const [lowering, setLowering] = useState(false);
+	const [previousControlled, setPreviousControlled] = useState(controlledDetent);
+	if (controlledDetent !== previousControlled) {
+		setPreviousControlled(controlledDetent);
+		setLowering(controlledDetent === "lower");
+		setSettleMotion(null);
+	}
+	/** Moves to `next`, telling `onDetentChange` when a standard sheet's detent changes. */
+	const setDetent = (next, fromDrag = false) => {
+		setLowering(next === "lower" && !fromDrag);
+		if (!fromDrag) setSettleMotion(null);
+		if (controlledDetent === void 0) setOwnDetent(next);
+		const resting = next === "lower" && hasLower ? "lower" : "expanded";
+		if (standard && resting !== current) onDetentChange?.(resting === "expanded" ? "expanded" : "collapsed");
+	};
+	useLayoutEffect(() => {
+		const element = motionRef.current;
+		if (!element) return;
+		const measure = () => {
+			setHeight(element.offsetHeight);
+			setViewport({
+				width: window.innerWidth,
+				height: window.innerHeight
+			});
+		};
+		measure();
+		const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+		observer?.observe(element);
+		window.addEventListener("resize", measure);
+		return () => {
+			observer?.disconnect();
+			window.removeEventListener("resize", measure);
+		};
+	}, []);
+	const close = state.close;
+	const closable = !standard && closedBy !== "none";
+	const anchors = [
+		0,
+		...hasLower ? [lowerOffset] : [],
+		...closable ? [height] : []
+	];
+	const settle = (target, velocity) => {
+		const closing = !standard && target >= height - .5;
+		const end = closing ? height * EXIT_DISTANCE : target;
+		setSettleMotion(releaseMotion(motionScheme, closing, velocity, end - (drag ?? restingOffset)));
+		if (closing) {
+			setDragClosing(true);
+			close();
+		} else {
+			setDrag(null);
+			setDetent(target === 0 ? "expanded" : "lower", true);
+		}
+	};
+	/** The handle's action: expand a lower sheet, collapse a standard one, close a modal one. */
+	const cycle = () => {
+		if (current === "lower") setDetent("expanded");
+		else if (standard) setDetent("lower");
+		else close();
+	};
+	const startPointer = (event, fromHandle, fromContent = false) => {
+		if (event.button !== 0 || isExiting) return;
+		setSettleMotion(null);
+		pointer.current = {
+			pending: true,
+			fromHandle,
+			fromContent,
+			gesture: "undecided",
+			x: event.clientX,
+			y: event.clientY,
+			offset: restingOffset,
+			id: event.pointerId,
+			samples: [{
+				position: event.clientY,
+				time: event.timeStamp
+			}]
+		};
+	};
+	const movePointer = (event) => {
+		const start = pointer.current;
+		if (!start.pending) return;
+		if (start.fromContent && start.gesture !== "drag") {
+			start.gesture = contentGesture(event.clientX - start.x, event.clientY - start.y, scrolledAbove(event.target, contentRef.current), current === "lower");
+			if (start.gesture === "undecided") return;
+			if (start.gesture === "scroll") {
+				start.pending = false;
+				return;
+			}
+		}
+		if (!swipeable) return;
+		start.samples = [...start.samples, {
+			position: event.clientY,
+			time: event.timeStamp
+		}];
+		if (drag === null && Math.abs(event.clientY - start.y) <= 4) return;
+		if (drag === null) event.currentTarget.setPointerCapture?.(start.id);
+		const raw = start.offset + event.clientY - start.y;
+		setDrag(Math.min(maxOffset, Math.max(0, raw)));
+		if (start.fromContent && contentRef.current) contentRef.current.scrollTop = Math.max(0, -raw);
+	};
+	const endPointer = (event) => {
+		const start = pointer.current;
+		if (!start.pending) return;
+		start.pending = false;
+		if (drag === null) {
+			if (start.fromHandle) cycle();
+			return;
+		}
+		const velocity = releaseVelocity([...start.samples, {
+			position: event.clientY,
+			time: event.timeStamp
+		}]);
+		settle(settleTarget(anchors, start.offset, drag, velocity), velocity);
+	};
+	const cancelPointer = () => {
+		pointer.current.pending = false;
+		setSettleMotion(null);
+		setDrag(null);
+	};
+	const onZonePointerDown = (event) => {
+		if (!swipeable) return;
+		const top = event.currentTarget.getBoundingClientRect().top;
+		if (event.clientY - top <= DRAG_ZONE) startPointer(event, false);
+	};
+	const onContentPointerDown = (event) => {
+		const content = contentRef.current;
+		const target = event.target;
+		pointer.current.fromContent = false;
+		if (!swipeable || event.pointerType === "mouse" || !content?.contains(target)) return;
+		if (ownsGesture(target, content)) return;
+		startPointer(event, false, true);
+	};
+	useEffect(() => {
+		const content = contentRef.current;
+		if (!content) return;
+		const update = () => content.toggleAttribute("data-at-top", content.scrollTop <= 0);
+		const onTouchMove = (event) => {
+			const start = pointer.current;
+			if (start.pending && start.fromContent && start.gesture === "drag" && event.cancelable) event.preventDefault();
+		};
+		update();
+		content.addEventListener("scroll", update, { passive: true });
+		content.addEventListener("touchmove", onTouchMove, { passive: false });
+		return () => {
+			content.removeEventListener("scroll", update);
+			content.removeEventListener("touchmove", onTouchMove);
+		};
+	}, []);
+	const onKeyDown = (event) => {
+		if (event.key !== "Escape" || isExiting) return;
+		if (standard) {
+			if (current !== "expanded" || !hasLower) return;
+			event.stopPropagation();
+			setDetent("lower");
+			return;
+		}
+		if (closedBy === "none") return;
+		event.stopPropagation();
+		close();
+	};
+	const handleRef = useRef(null);
+	usePeekInert(panelRef, contentRef, detentName === "collapsed", peekHeight, () => handleRef.current ?? panelRef.current);
+	const collapseFromButton = () => {
+		(handleRef.current ?? panelRef.current)?.focus({ preventScroll: true });
+		setDetent("lower");
+	};
+	const { focusProps: handleFocusProps, isFocusVisible: handleFocusVisible } = useFocusRing();
+	const exiting = isExiting || void 0;
+	const dragging = drag !== null && !dragClosing || void 0;
+	const handleLabel = current === "lower" ? labels.expand : standard ? labels.collapse : labels.dismiss;
+	const topMargin = viewport.width > 640 ? 56 : 72;
+	const fillsWindow = current === "expanded" && viewport.height > 0 && height >= viewport.height - topMargin - .5;
+	const showCloseButton = closeButton && fillsWindow && (!standard || hasLower);
+	const panelProps = mergeProps(rest, standard ? {
+		role: "dialog",
+		tabIndex: -1
+	} : overlayPanelProps ?? {}, { onKeyDown });
+	const zone = !dragHandle;
+	return /* @__PURE__ */ jsx("div", {
+		style,
+		className: styles.container({ class: cn(classNames?.container, className) }),
+		children: /* @__PURE__ */ jsx("div", {
+			...mergeProps(exitProps, { onTransitionEnd: (event) => {
+				if (event.target === event.currentTarget && event.propertyName === "translate") setSettleMotion(null);
+			} }),
+			ref: motionRef,
+			"data-exiting": exiting,
+			"data-dragging": dragging,
+			"data-lowering": lowering || void 0,
+			"data-settling": settleMotion ? "" : void 0,
+			style: {
+				"--m3-sheet-offset": `${offset}px`,
+				...settleMotion && {
+					transitionDuration: `${settleMotion.duration}ms`,
+					transitionTimingFunction: settleMotion.easing
+				}
+			},
+			className: styles.motion(),
+			children: /* @__PURE__ */ jsx("div", {
+				...panelProps,
+				onPointerDownCapture: (event) => {
+					panelProps.onPointerDownCapture?.(event);
+					onContentPointerDown(event);
+				},
+				onPointerMoveCapture: (event) => {
+					panelProps.onPointerMoveCapture?.(event);
+					if (pointer.current.fromContent) movePointer(event);
+				},
+				onPointerUpCapture: (event) => {
+					panelProps.onPointerUpCapture?.(event);
+					if (pointer.current.fromContent) endPointer(event);
+				},
+				onPointerCancelCapture: (event) => {
+					panelProps.onPointerCancelCapture?.(event);
+					if (pointer.current.fromContent) cancelPointer();
+				},
+				onPointerDown: (event) => {
+					panelProps.onPointerDown?.(event);
+					if (zone && !pointer.current.fromContent) onZonePointerDown(event);
+				},
+				onPointerMove: (event) => {
+					panelProps.onPointerMove?.(event);
+					if (zone && !pointer.current.fromContent) movePointer(event);
+				},
+				onPointerUp: (event) => {
+					panelProps.onPointerUp?.(event);
+					if (zone && !pointer.current.fromContent) endPointer(event);
+				},
+				onPointerCancel: (event) => {
+					panelProps.onPointerCancel?.(event);
+					if (zone && !pointer.current.fromContent) cancelPointer();
+				},
+				ref: panelRef,
+				"data-tokens": mergeDataTokens("md-comp-sheet-bottom-docked", rest),
+				"data-variant": variant,
+				"data-detent": detentName,
+				"data-exiting": exiting,
+				"data-dragging": dragging,
+				className: styles.panel({ class: classNames?.panel }),
+				children: /* @__PURE__ */ jsxs(TriggerContext, {
+					value: null,
+					children: [
+						dragHandle && /* @__PURE__ */ jsx("div", {
+							...handleFocusProps,
+							ref: handleRef,
+							role: "button",
+							tabIndex: 0,
+							"data-focus-visible": handleFocusVisible || void 0,
+							"aria-label": handleLabel,
+							"data-dragging": dragging,
+							onPointerDown: (event) => startPointer(event, true),
+							onPointerMove: movePointer,
+							onPointerUp: endPointer,
+							onPointerCancel: cancelPointer,
+							onKeyDown: (event) => {
+								if (event.key === "Enter" || event.key === " ") {
+									event.preventDefault();
+									cycle();
+								}
+							},
+							className: styles.handle({ class: classNames?.handle }),
+							children: /* @__PURE__ */ jsx("span", {
+								"data-slot": "drag-handle",
+								className: styles.handleBar({ class: classNames?.handleBar })
+							})
+						}),
+						showCloseButton && /* @__PURE__ */ jsx("div", {
+							className: styles.closeRow({ class: classNames?.closeRow }),
+							children: /* @__PURE__ */ jsx(IconButton, {
+								variant: "standard",
+								density: 0,
+								icon: standard ? collapseIcon ?? /* @__PURE__ */ jsx(CollapseIcon, {}) : closeIcon ?? /* @__PURE__ */ jsx(CloseIcon, {}),
+								"aria-label": standard ? labels.collapse : labels.close,
+								onPress: standard ? collapseFromButton : close,
+								className: classNames?.close
+							})
+						}),
+						/* @__PURE__ */ jsx("div", {
+							ref: contentRef,
+							"data-can-rise": current === "lower" || void 0,
+							className: styles.content({ class: classNames?.content }),
+							children: typeof children === "function" ? children({ close }) : children
+						})
+					]
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { BottomSheet };
+
+//# sourceMappingURL=BottomSheet.js.map

package/dist/components/sheet/BottomSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.js","names":["Overlay"],"sources":["../../../src/components/sheet/BottomSheet.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type TransitionEvent,\n} from 'react';\nimport {\n  mergeProps,\n  useDialog,\n  useFocusRing,\n  useModalOverlay,\n  useObjectRef,\n  type AriaDialogProps,\n} from 'react-aria';\nimport { useOverlayTriggerState, type OverlayTriggerState } from 'react-stately';\nimport { Overlay } from '../../primitives/Overlay';\nimport { TriggerContext } from '../../primitives/TriggerContext';\nimport { usePresence } from '../../primitives/use-presence';\nimport { closedByOverlayOptions, type ClosedBy } from '../../utils/closed-by';\nimport { cn } from '../../utils/cn';\nimport { focusFirstInteractive } from '../../utils/focus';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\nimport { useThemeScope } from '../../theme/context';\nimport { IconButton } from '../icon-button/IconButton';\nimport { CloseIcon, CollapseIcon } from './sheet-icons';\nimport { contentGesture, scrolledAbove, type ContentGesture } from './bottom-sheet-gesture';\nimport { DRAG_SLOP, ownsGesture } from './sheet-gesture';\nimport {\n  EXIT_DISTANCE,\n  releaseMotion,\n  releaseVelocity,\n  settleTarget,\n  type DragSample,\n  type ReleaseMotion,\n} from './sheet-settle';\nimport { usePeekInert } from './use-peek-inert';\nimport { SHEET_EXIT_PROPERTIES, bottomSheetStyles } from './sheet-styles';\nimport { SheetTriggerContext } from './SheetTrigger';\n\nexport interface BottomSheetClassNames {\n  /**\n   * The outermost element, which places the sheet (where `className` and `style` go too):\n   * `fixed` to the window's bottom by default, or, for example, `absolute` to a region.\n   */\n  container?: string;\n  /** The dimmed layer behind a modal sheet. */\n  scrim?: string;\n  /** The sheet's surface: its colour, corners and shadow. */\n  panel?: string;\n  /** The drag handle's 48px pressable area. */\n  handle?: string;\n  /** The drag handle's visible bar, inside `handle`. */\n  handleBar?: string;\n  /** The row holding the close (modal) or collapse (standard) button. */\n  closeRow?: string;\n  /** The close or collapse icon button. */\n  close?: string;\n  /** The scrollable content area. */\n  content?: string;\n}\n\n/** Words the bottom sheet announces. */\nexport interface BottomSheetLabels {\n  /**\n   * The drag handle while the sheet is half open or collapsed (it expands the sheet).\n   * @default \"Expand sheet\"\n   */\n  expand: string;\n  /** The drag handle and collapse button of a fully open standard sheet. @default \"Collapse sheet\" */\n  collapse: string;\n  /** The drag handle of a fully open modal sheet (it closes the sheet). @default \"Close sheet\" */\n  dismiss: string;\n  /** The close button of a modal sheet that fills the window height. @default \"Close\" */\n  close: string;\n}\n\nconst DEFAULT_LABELS: BottomSheetLabels = {\n  expand: 'Expand sheet',\n  collapse: 'Collapse sheet',\n  dismiss: 'Close sheet',\n  close: 'Close',\n};\n\n/**\n * Where a standard bottom sheet rests: `collapsed` to its `peekHeight`, or `expanded` to its\n * full height (Compose `SheetValue.PartiallyExpanded` and `SheetValue.Expanded`). A sheet whose\n * content is no taller than the peek height is always expanded.\n */\nexport type BottomSheetDetent = 'collapsed' | 'expanded';\n\n/** The interactive strip at the top of a sheet without a drag handle (m3.material.io). */\nconst DRAG_ZONE = 48;\n\ntype Naming =\n  | {\n      /** Accessible name when there's no visible title. Required without `aria-labelledby`. */\n      'aria-label': string;\n    }\n  | {\n      /** Id of the visible title that names the sheet. Required without `aria-label`. */\n      'aria-labelledby': string;\n    };\n\ninterface BottomSheetOwnProps {\n  /**\n   * `modal` opens over a scrim as a dialog that blocks the page; `standard` sits over the\n   * page without a scrim, so both can be used at once, and rests collapsed at `peekHeight`\n   * or expanded (`detent`). @default \"modal\"\n   */\n  variant?: 'modal' | 'standard';\n  /** Whether the sheet is open (controlled). */\n  open?: boolean;\n  /** Whether the sheet starts open when uncontrolled. @default false, or true when standard */\n  defaultOpen?: boolean;\n  /** Called when the sheet opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Show the drag handle. Without it, the top 48px of the sheet still drags. @default true */\n  dragHandle?: boolean;\n  /**\n   * Whether dragging the handle, the top of the sheet or (touch and pen) its content moves\n   * the sheet. Without it the handle stays a button (a press, Enter or Space), and Escape,\n   * the scrim and the close button work as before.\n   * @default true\n   */\n  swipeable?: boolean;\n  /**\n   * Open fully instead of to half the window when the content is taller than half the\n   * window (modal). @default false\n   */\n  skipPartiallyExpanded?: boolean;\n  /**\n   * Height of a collapsed standard sheet, px. While collapsed, the content's top-level parts\n   * that don't fit entirely in it are `inert`. @default 56\n   */\n  peekHeight?: number;\n  /**\n   * Where a standard sheet rests (controlled): `collapsed` at `peekHeight` or `expanded` to\n   * its full height, so the app can raise or lower it (\"can be set by the system or toggled\n   * by the user\", m3.material.io). Its handle, a drag, Escape and its collapse button then\n   * only call `onDetentChange`. A modal sheet ignores it.\n   */\n  detent?: BottomSheetDetent;\n  /**\n   * Where a standard sheet first rests when uncontrolled; `expanded` opens it fully raised\n   * (Compose `rememberStandardBottomSheetState(initialValue = SheetValue.Expanded)`). It\n   * applies each time the sheet opens. A modal sheet ignores it.\n   * @default \"collapsed\"\n   */\n  defaultDetent?: BottomSheetDetent;\n  /**\n   * Called when a standard sheet moves to another detent: by its handle (a press, Enter or\n   * Space, or a drag), Escape or its collapse button. Not called for a modal sheet.\n   */\n  onDetentChange?: (detent: BottomSheetDetent) => void;\n  /**\n   * How the user can close a modal sheet, as HTML's `<dialog closedby>`: `any` (Escape, a\n   * press on the scrim or a drag down), `closerequest` (Escape or a drag down) or `none`\n   * (only its buttons or the app). @default \"any\"\n   */\n  closedBy?: ClosedBy;\n  /**\n   * While the sheet fills the window height, show a close button (modal) or a collapse\n   * button (standard) at its top end. @default true\n   */\n  closeButton?: boolean;\n  /** Replaces the close button's icon. */\n  closeIcon?: ReactElement;\n  /** Replaces the collapse button's icon. */\n  collapseIcon?: ReactElement;\n  /** Words the sheet announces, with English defaults. */\n  labels?: Partial<BottomSheetLabels>;\n  children?: ReactNode | ((props: { close: () => void }) => ReactNode);\n  /** Classes for each part, by slot. */\n  classNames?: BottomSheetClassNames;\n  /**\n   * Goes with `style` on the outermost element, the container that places the sheet, so a\n   * layout class (`absolute`, `fixed`, a transform) moves the whole sheet and never clips or\n   * stretches its surface. Style the surface with `classNames.panel`; `ref`, `data-*` and\n   * other attributes go on the panel.\n   */\n  className?: string;\n  /** Goes on the outermost element, with `className`. */\n  style?: CSSProperties;\n  /** Ref to the panel, the sheet's surface (`role=\"dialog\"`). */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport type BottomSheetProps = BottomSheetOwnProps &\n  Naming &\n  Omit<ComponentPropsWithRef<'div'>, keyof BottomSheetOwnProps | 'aria-label' | 'aria-labelledby'>;\n\n/**\n * M3 bottom sheet. A `modal` sheet slides up over a scrim, opening to half the window when\n * its content is taller (drag the handle up, or press it, to expand), and closes on a drag\n * down, a press on the scrim or Escape, in one press from any height. A\n * `standard` sheet sits over the page without a scrim, collapsed to `peekHeight` until it\n * is expanded, or opening expanded with `defaultDetent=\"expanded\"`; `detent` and\n * `onDetentChange` control it.\n *\n * @example\n * <SheetTrigger>\n *   <Button>Share</Button>\n *   <BottomSheet aria-label=\"Share\">{({ close }) => <ShareOptions onPick={close} />}</BottomSheet>\n * </SheetTrigger>\n */\nexport function BottomSheet({\n  variant = 'modal',\n  open,\n  defaultOpen,\n  onOpenChange,\n  ...props\n}: BottomSheetProps) {\n  const trigger = useContext(SheetTriggerContext);\n  const ownState = useOverlayTriggerState({\n    isOpen: open,\n    defaultOpen: defaultOpen ?? (variant === 'standard' ? true : undefined),\n    onOpenChange,\n  });\n  const state = (variant === 'modal' ? trigger?.state : undefined) ?? ownState;\n  const { isPresent, isExiting, exitProps } = usePresence(state.isOpen, SHEET_EXIT_PROPERTIES);\n  if (!isPresent) return null;\n  if (variant === 'standard')\n    return (\n      <BottomSheetPanel\n        {...props}\n        variant=\"standard\"\n        state={state}\n        isExiting={isExiting}\n        exitProps={exitProps}\n      />\n    );\n  return (\n    <Overlay exiting={isExiting}>\n      <ModalBottomSheet\n        {...props}\n        state={state}\n        isExiting={isExiting}\n        exitProps={exitProps}\n        triggerOverlayProps={trigger?.overlayProps}\n      />\n    </Overlay>\n  );\n}\n\nfunction ModalBottomSheet({\n  state,\n  isExiting,\n  triggerOverlayProps,\n  closedBy = 'any',\n  classNames,\n  ref,\n  ...props\n}: Omit<PanelProps, 'variant' | 'panelProps'> & { triggerOverlayProps?: { id?: string } }) {\n  const panelRef = useObjectRef(ref as Ref<HTMLDivElement>);\n  const { modalProps, underlayProps } = useModalOverlay(\n    {\n      ...closedByOverlayOptions(closedBy, isExiting),\n      // The panel handles Escape itself (below), so a nested control's Escape stays its own.\n      isKeyboardDismissDisabled: true,\n    },\n    state,\n    panelRef,\n  );\n  const { dialogProps } = useDialog(props as AriaDialogProps, panelRef);\n  // Initial focus goes to the first interactive element (the drag handle, when there is one;\n  // M3), as in a Dialog, not to the panel.\n  useEffect(() => focusFirstInteractive(panelRef.current), [panelRef]);\n  const styles = bottomSheetStyles();\n  return (\n    <>\n      <div\n        aria-hidden=\"true\"\n        data-exiting={isExiting || undefined}\n        className={styles.scrim({ class: classNames?.scrim })}\n      />\n      <div {...underlayProps} className=\"fixed inset-0 z-(--md-sys-z-sheet)\">\n        <BottomSheetPanel\n          {...props}\n          variant=\"modal\"\n          closedBy={closedBy}\n          state={state}\n          isExiting={isExiting}\n          classNames={classNames}\n          ref={panelRef}\n          panelProps={mergeProps(triggerOverlayProps ?? {}, modalProps, dialogProps)}\n        />\n      </div>\n    </>\n  );\n}\n\ntype PanelProps = Omit<BottomSheetProps, 'open' | 'defaultOpen' | 'onOpenChange' | 'variant'> & {\n  variant: 'modal' | 'standard';\n  state: OverlayTriggerState;\n  isExiting: boolean;\n  exitProps: ReturnType<typeof usePresence>['exitProps'];\n  /** Props from the modal overlay and dialog hooks. */\n  panelProps?: HTMLAttributes<HTMLElement>;\n};\n\n/** The sheet itself: the moving wrapper, the panel, its handle and its detents. */\nfunction BottomSheetPanel({\n  variant,\n  state,\n  isExiting,\n  exitProps,\n  panelProps: overlayPanelProps,\n  dragHandle = true,\n  swipeable = true,\n  skipPartiallyExpanded = false,\n  peekHeight = 56,\n  detent: detentProp,\n  defaultDetent = 'collapsed',\n  onDetentChange,\n  closedBy = 'any',\n  closeButton = true,\n  closeIcon,\n  collapseIcon,\n  labels: labelsProp,\n  children,\n  className,\n  classNames,\n  style,\n  ref,\n  ...rest\n}: PanelProps) {\n  const labels = { ...DEFAULT_LABELS, ...labelsProp };\n  const standard = variant === 'standard';\n  const panelRef = useObjectRef(ref as Ref<HTMLDivElement>);\n  const motionRef = useRef<HTMLDivElement>(null);\n  const styles = bottomSheetStyles({ variant, swipeable });\n  const [height, setHeight] = useState(0);\n  const [viewport, setViewport] = useState({ width: 0, height: 0 });\n  // The lower detent is half the window (modal) or the peek height (standard); `null` rests\n  // on the lower detent when there is one.\n  const [ownDetent, setOwnDetent] = useState<'expanded' | 'lower' | null>(\n    standard && defaultDetent === 'expanded' ? 'expanded' : null,\n  );\n  const controlledDetent =\n    standard && detentProp !== undefined\n      ? detentProp === 'expanded'\n        ? 'expanded'\n        : 'lower'\n      : undefined;\n  const detent = controlledDetent ?? ownDetent;\n  const [drag, setDrag] = useState<number | null>(null);\n  // A drag's settle continues at the speed the pointer let go with, as Compose's\n  // `animateTo(target, velocity)` does: the spring starts with that velocity, as a `linear()`\n  // easing and duration set on the moving layer until its move ends (2026-10-17; it started\n  // from rest). Under reduced motion settling stays instant.\n  const { motion: motionScheme } = useThemeScope();\n  const [settleMotion, setSettleMotion] = useState<ReleaseMotion | null>(null);\n  // A drag let go to close: the offset stays where the pointer left it, so the exit leaves\n  // from there (and, under reduced motion, fades there, as the side sheet does). If the\n  // sheet is still open after that render, the app refused and the sheet springs back.\n  const [dragClosing, setDragClosing] = useState(false);\n  if (dragClosing && state.isOpen) {\n    setDragClosing(false);\n    setDrag(null);\n    setSettleMotion(null);\n  }\n  const contentRef = useRef<HTMLDivElement>(null);\n  const pointer = useRef({\n    pending: false,\n    fromHandle: false,\n    /** Started on the content, where a drag only moves the sheet once it picks `drag`. */\n    fromContent: false,\n    gesture: 'undecided' as ContentGesture,\n    x: 0,\n    y: 0,\n    offset: 0,\n    id: 0,\n    samples: [] as DragSample[],\n  });\n\n  // The lower detent: a modal sheet taller than half the window opens to half (Compose's\n  // PartiallyExpanded); a standard sheet collapses to its peek height (BottomSheetScaffold).\n  const lowerOffset = standard ? height - peekHeight : height - viewport.height / 2;\n  const hasLower = standard ? height > peekHeight : !skipPartiallyExpanded && lowerOffset > 0;\n  // Where the sheet rests: the lower detent only when it has one.\n  const current = detent === 'expanded' || !hasLower ? 'expanded' : 'lower';\n  const restingOffset = current === 'lower' ? lowerOffset : 0;\n  const offset = drag ?? restingOffset;\n  const maxOffset = standard ? Math.max(0, lowerOffset) : height;\n  const detentName = current === 'expanded' ? 'expanded' : standard ? 'collapsed' : 'partial';\n\n  // Moving down to a lower detent while staying open (Escape, the handle or the collapse\n  // button on a full sheet, or the app lowering it) runs on the fast effects spring, which\n  // doesn't overshoot, as Compose's `partialExpand()` (`hideMotionSpec`); on the spatial\n  // spring the sheet dropped a few pixels below the detent. A drag's settle keeps the\n  // spatial spring (Compose's `anchoredDraggableMotion`), and so do the entry and every\n  // move up. It's state, rendered with the move, so the transition starts with it.\n  const [lowering, setLowering] = useState(false);\n  const [previousControlled, setPreviousControlled] = useState(controlledDetent);\n  if (controlledDetent !== previousControlled) {\n    setPreviousControlled(controlledDetent);\n    setLowering(controlledDetent === 'lower');\n    setSettleMotion(null);\n  }\n\n  /** Moves to `next`, telling `onDetentChange` when a standard sheet's detent changes. */\n  const setDetent = (next: 'expanded' | 'lower', fromDrag = false) => {\n    setLowering(next === 'lower' && !fromDrag);\n    if (!fromDrag) setSettleMotion(null);\n    if (controlledDetent === undefined) setOwnDetent(next);\n    const resting = next === 'lower' && hasLower ? 'lower' : 'expanded';\n    if (standard && resting !== current)\n      onDetentChange?.(resting === 'expanded' ? 'expanded' : 'collapsed');\n  };\n\n  useLayoutEffect(() => {\n    const element = motionRef.current;\n    if (!element) return;\n    const measure = () => {\n      setHeight(element.offsetHeight);\n      setViewport({ width: window.innerWidth, height: window.innerHeight });\n    };\n    measure();\n    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure);\n    observer?.observe(element);\n    window.addEventListener('resize', measure);\n    return () => {\n      observer?.disconnect();\n      window.removeEventListener('resize', measure);\n    };\n  }, []);\n\n  const close = state.close;\n\n  // A modal sheet's last anchor is closed, unless the user may not close it (`closedBy=\"none\"`).\n  const closable = !standard && closedBy !== 'none';\n  const anchors = [0, ...(hasLower ? [lowerOffset] : []), ...(closable ? [height] : [])];\n\n  const settle = (target: number, velocity: number) => {\n    const closing = !standard && target >= height - 0.5;\n    // A closing sheet leaves to 112% of its height on the fast spatial spring (its exit).\n    const end = closing ? height * EXIT_DISTANCE : target;\n    setSettleMotion(releaseMotion(motionScheme, closing, velocity, end - (drag ?? restingOffset)));\n    if (closing) {\n      setDragClosing(true);\n      close();\n    } else {\n      setDrag(null);\n      setDetent(target === 0 ? 'expanded' : 'lower', true);\n    }\n  };\n\n  /** The handle's action: expand a lower sheet, collapse a standard one, close a modal one. */\n  const cycle = () => {\n    if (current === 'lower') setDetent('expanded');\n    else if (standard) setDetent('lower');\n    else close();\n  };\n\n  const startPointer = (\n    event: PointerEvent<HTMLElement>,\n    fromHandle: boolean,\n    fromContent = false,\n  ) => {\n    // A leaving sheet takes no new drag.\n    if (event.button !== 0 || isExiting) return;\n    setSettleMotion(null);\n    pointer.current = {\n      pending: true,\n      fromHandle,\n      fromContent,\n      gesture: 'undecided',\n      x: event.clientX,\n      y: event.clientY,\n      offset: restingOffset,\n      id: event.pointerId,\n      samples: [{ position: event.clientY, time: event.timeStamp }],\n    };\n  };\n  const movePointer = (event: PointerEvent<HTMLElement>) => {\n    const start = pointer.current;\n    if (!start.pending) return;\n    if (start.fromContent && start.gesture !== 'drag') {\n      // Once a touch on the content picks scrolling or dragging, it keeps that choice.\n      start.gesture = contentGesture(\n        event.clientX - start.x,\n        event.clientY - start.y,\n        scrolledAbove(event.target as Element, contentRef.current!),\n        current === 'lower',\n      );\n      if (start.gesture === 'undecided') return;\n      if (start.gesture === 'scroll') {\n        start.pending = false;\n        return;\n      }\n    }\n    // Without `swipeable` the handle is only a button: a move never drags it.\n    if (!swipeable) return;\n    start.samples = [...start.samples, { position: event.clientY, time: event.timeStamp }];\n    if (drag === null && Math.abs(event.clientY - start.y) <= DRAG_SLOP) return;\n    if (drag === null) event.currentTarget.setPointerCapture?.(start.id);\n    const raw = start.offset + event.clientY - start.y;\n    setDrag(Math.min(maxOffset, Math.max(0, raw)));\n    // A drag up from the content that has raised the sheet fully scrolls the content with the\n    // rest of the move, as Compose's nested scroll hands it over.\n    if (start.fromContent && contentRef.current) contentRef.current.scrollTop = Math.max(0, -raw);\n  };\n  const endPointer = (event: PointerEvent<HTMLElement>) => {\n    const start = pointer.current;\n    if (!start.pending) return;\n    start.pending = false;\n    if (drag === null) {\n      // A press on the handle cycles the sheet (Compose's handle click).\n      if (start.fromHandle) cycle();\n      return;\n    }\n    // From the last 100ms of moves, so a slow drag ending in a flick reads as a fling.\n    const velocity = releaseVelocity([\n      ...start.samples,\n      { position: event.clientY, time: event.timeStamp },\n    ]);\n    settle(settleTarget(anchors, start.offset, drag, velocity), velocity);\n  };\n  const cancelPointer = () => {\n    pointer.current.pending = false;\n    setSettleMotion(null);\n    setDrag(null);\n  };\n\n  // Without a handle the top 48px of the sheet still drags it (m3.material.io).\n  const onZonePointerDown = (event: PointerEvent<HTMLDivElement>) => {\n    if (!swipeable) return;\n    const top = event.currentTarget.getBoundingClientRect().top;\n    if (event.clientY - top <= DRAG_ZONE) startPointer(event, false);\n  };\n\n  // A touch (or pen) drag down on content scrolled to its top moves the sheet, as the\n  // handle does. Mouse drags select text instead, as they always have on the web.\n  const onContentPointerDown = (event: PointerEvent<HTMLDivElement>) => {\n    const content = contentRef.current;\n    const target = event.target as Element;\n    pointer.current.fromContent = false;\n    if (!swipeable || event.pointerType === 'mouse' || !content?.contains(target)) return;\n    if (ownsGesture(target, content)) return;\n    startPointer(event, false, true);\n  };\n\n  // While the content is at its top, the browser only scrolls it for upward and sideways\n  // moves (`touch-action: pan-x pan-down`), so a downward one reaches the sheet as pointer\n  // events. Browsers without `pan-down` (iOS Safari) are stopped from scrolling or\n  // rubber-banding by cancelling the touch moves of a drag.\n  useEffect(() => {\n    const content = contentRef.current;\n    if (!content) return;\n    const update = () => content.toggleAttribute('data-at-top', content.scrollTop <= 0);\n    const onTouchMove = (event: TouchEvent) => {\n      const start = pointer.current;\n      if (start.pending && start.fromContent && start.gesture === 'drag' && event.cancelable)\n        event.preventDefault();\n    };\n    update();\n    content.addEventListener('scroll', update, { passive: true });\n    content.addEventListener('touchmove', onTouchMove, { passive: false });\n    return () => {\n      content.removeEventListener('scroll', update);\n      content.removeEventListener('touchmove', onTouchMove);\n    };\n  }, []);\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    if (event.key !== 'Escape' || isExiting) return;\n    if (standard) {\n      if (current !== 'expanded' || !hasLower) return;\n      event.stopPropagation();\n      setDetent('lower');\n      return;\n    }\n    // Escape is a close request: it closes a modal sheet in one press, from any detent (WAI-ARIA\n    // APG modal dialog; HTML's close request), unless the user may not close it.\n    if (closedBy === 'none') return;\n    event.stopPropagation();\n    close();\n  };\n\n  const handleRef = useRef<HTMLDivElement>(null);\n  usePeekInert(\n    panelRef,\n    contentRef,\n    detentName === 'collapsed',\n    peekHeight,\n    () => handleRef.current ?? panelRef.current,\n  );\n\n  // The collapse button leaves once the sheet stops filling the window, so focus moves to the\n  // handle (or the panel) first instead of dropping to the page.\n  const collapseFromButton = () => {\n    (handleRef.current ?? panelRef.current)?.focus({ preventScroll: true });\n    setDetent('lower');\n  };\n\n  const { focusProps: handleFocusProps, isFocusVisible: handleFocusVisible } = useFocusRing();\n  const exiting = isExiting || undefined;\n  const dragging = (drag !== null && !dragClosing) || undefined;\n  const handleLabel =\n    current === 'lower' ? labels.expand : standard ? labels.collapse : labels.dismiss;\n  // The sheet fills the window up to its top margin: 72px, or 56px above 640px wide.\n  const topMargin = viewport.width > 640 ? 56 : 72;\n  const fillsWindow =\n    current === 'expanded' && viewport.height > 0 && height >= viewport.height - topMargin - 0.5;\n  const showCloseButton = closeButton && fillsWindow && (!standard || hasLower);\n\n  // A standard sheet is a non-modal dialog: no scrim, no focus trap, the page stays usable.\n  const roleProps: HTMLAttributes<HTMLElement> = standard\n    ? { role: 'dialog', tabIndex: -1 }\n    : (overlayPanelProps ?? {});\n  const panelProps = mergeProps(rest, roleProps, { onKeyDown });\n  const zone = !dragHandle;\n\n  return (\n    <div\n      style={style}\n      className={styles.container({ class: cn(classNames?.container, className) })}\n    >\n      <div\n        {...mergeProps(exitProps, {\n          onTransitionEnd: (event: TransitionEvent<HTMLDivElement>) => {\n            if (event.target === event.currentTarget && event.propertyName === 'translate')\n              setSettleMotion(null);\n          },\n        })}\n        ref={motionRef}\n        data-exiting={exiting}\n        data-dragging={dragging}\n        data-lowering={lowering || undefined}\n        data-settling={settleMotion ? '' : undefined}\n        style={\n          {\n            '--m3-sheet-offset': `${offset}px`,\n            ...(settleMotion && {\n              transitionDuration: `${settleMotion.duration}ms`,\n              transitionTimingFunction: settleMotion.easing,\n            }),\n          } as CSSProperties\n        }\n        className={styles.motion()}\n      >\n        <div\n          {...panelProps}\n          // Content drags listen in the capture phase: pressable content (list items, buttons)\n          // stops its pointer events from bubbling.\n          onPointerDownCapture={(event) => {\n            panelProps.onPointerDownCapture?.(event);\n            onContentPointerDown(event);\n          }}\n          onPointerMoveCapture={(event) => {\n            panelProps.onPointerMoveCapture?.(event);\n            if (pointer.current.fromContent) movePointer(event);\n          }}\n          onPointerUpCapture={(event) => {\n            panelProps.onPointerUpCapture?.(event);\n            if (pointer.current.fromContent) endPointer(event);\n          }}\n          onPointerCancelCapture={(event) => {\n            panelProps.onPointerCancelCapture?.(event);\n            if (pointer.current.fromContent) cancelPointer();\n          }}\n          onPointerDown={(event) => {\n            panelProps.onPointerDown?.(event);\n            if (zone && !pointer.current.fromContent) onZonePointerDown(event);\n          }}\n          onPointerMove={(event) => {\n            panelProps.onPointerMove?.(event);\n            if (zone && !pointer.current.fromContent) movePointer(event);\n          }}\n          onPointerUp={(event) => {\n            panelProps.onPointerUp?.(event);\n            if (zone && !pointer.current.fromContent) endPointer(event);\n          }}\n          onPointerCancel={(event) => {\n            panelProps.onPointerCancel?.(event);\n            if (zone && !pointer.current.fromContent) cancelPointer();\n          }}\n          ref={panelRef}\n          // The component tokens' hooks (sheet-tokens.ts); `data-variant` is also public.\n          data-tokens={mergeDataTokens('md-comp-sheet-bottom-docked', rest)}\n          data-variant={variant}\n          data-detent={detentName}\n          data-exiting={exiting}\n          data-dragging={dragging}\n          className={styles.panel({ class: classNames?.panel })}\n        >\n          <TriggerContext value={null}>\n            {dragHandle && (\n              <div\n                {...handleFocusProps}\n                ref={handleRef}\n                role=\"button\"\n                tabIndex={0}\n                data-focus-visible={handleFocusVisible || undefined}\n                aria-label={handleLabel}\n                data-dragging={dragging}\n                onPointerDown={(event) => startPointer(event, true)}\n                onPointerMove={movePointer}\n                onPointerUp={endPointer}\n                onPointerCancel={cancelPointer}\n                onKeyDown={(event) => {\n                  if (event.key === 'Enter' || event.key === ' ') {\n                    event.preventDefault();\n                    cycle();\n                  }\n                }}\n                className={styles.handle({ class: classNames?.handle })}\n              >\n                <span\n                  data-slot=\"drag-handle\"\n                  className={styles.handleBar({ class: classNames?.handleBar })}\n                />\n              </div>\n            )}\n            {showCloseButton && (\n              <div className={styles.closeRow({ class: classNames?.closeRow })}>\n                <IconButton\n                  variant=\"standard\"\n                  density={0}\n                  icon={\n                    standard ? (collapseIcon ?? <CollapseIcon />) : (closeIcon ?? <CloseIcon />)\n                  }\n                  aria-label={standard ? labels.collapse : labels.close}\n                  onPress={standard ? collapseFromButton : close}\n                  className={classNames?.close}\n                />\n              </div>\n            )}\n            <div\n              ref={contentRef}\n              data-can-rise={current === 'lower' || undefined}\n              className={styles.content({ class: classNames?.content })}\n            >\n              {typeof children === 'function' ? children({ close }) : children}\n            </div>\n          </TriggerContext>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/sheet/SheetTrigger.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+import { OverlayTriggerState } from "react-stately";
+//#region src/components/sheet/SheetTrigger.d.ts
+export interface SheetTriggerProps {
+  /** The trigger (a library button) followed by a `BottomSheet` or modal `SideSheet`. */
+  children: ReactNode;
+  /** Whether the sheet is open (controlled). */
+  open?: boolean;
+  /** Whether the sheet starts open when uncontrolled. @default false */
+  defaultOpen?: boolean;
+  /** Called when the sheet opens or closes. */
+  onOpenChange?: (open: boolean) => void;
+}
+/**
+ * Opens a modal {@link BottomSheet} or {@link SideSheet} from a button.
+ *
+ * @example
+ * <SheetTrigger>
+ *   <Button>Share</Button>
+ *   <BottomSheet aria-label="Share">…</BottomSheet>
+ * </SheetTrigger>
+ */
+export declare function SheetTrigger({ children, open, defaultOpen, onOpenChange }: SheetTriggerProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=SheetTrigger.d.ts.map

package/dist/components/sheet/SheetTrigger.js

@@ -0,0 +1,46 @@
+"use client";
+import { TriggerContext, useTriggerProps } from "../../primitives/TriggerContext.js";
+import { Children, createContext, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useOverlayTrigger } from "react-aria";
+import { useOverlayTriggerState } from "react-stately";
+//#region src/components/sheet/SheetTrigger.tsx
+/** Set by {@link SheetTrigger} for the modal sheet inside it. */
+const SheetTriggerContext = createContext(null);
+/**
+* Opens a modal {@link BottomSheet} or {@link SideSheet} from a button.
+*
+* @example
+* <SheetTrigger>
+*   <Button>Share</Button>
+*   <BottomSheet aria-label="Share">…</BottomSheet>
+* </SheetTrigger>
+*/
+function SheetTrigger({ children, open, defaultOpen, onOpenChange }) {
+	const state = useOverlayTriggerState({
+		isOpen: open,
+		defaultOpen,
+		onOpenChange
+	});
+	const triggerRef = useRef(null);
+	const { triggerProps, overlayProps } = useOverlayTrigger({ type: "dialog" }, state, triggerRef);
+	const triggerValue = useTriggerProps({
+		...triggerProps,
+		ref: triggerRef
+	});
+	const [trigger, ...sheet] = Children.toArray(children);
+	return /* @__PURE__ */ jsxs(SheetTriggerContext, {
+		value: {
+			state,
+			overlayProps
+		},
+		children: [/* @__PURE__ */ jsx(TriggerContext, {
+			value: triggerValue,
+			children: trigger
+		}), sheet]
+	});
+}
+//#endregion
+export { SheetTrigger, SheetTriggerContext };
+
+//# sourceMappingURL=SheetTrigger.js.map

package/dist/components/sheet/SheetTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SheetTrigger.js","names":[],"sources":["../../../src/components/sheet/SheetTrigger.tsx"],"sourcesContent":["'use client';\n\nimport { Children, createContext, useRef, type ReactNode } from 'react';\nimport { useOverlayTrigger } from 'react-aria';\nimport { useOverlayTriggerState, type OverlayTriggerState } from 'react-stately';\nimport {\n  TriggerContext,\n  useTriggerProps,\n  type TriggerContextValue,\n} from '../../primitives/TriggerContext';\n\nexport interface SheetTriggerContextValue {\n  state: OverlayTriggerState;\n  overlayProps: { id?: string };\n}\n\n/** Set by {@link SheetTrigger} for the modal sheet inside it. */\nexport const SheetTriggerContext = createContext<SheetTriggerContextValue | null>(null);\n\nexport interface SheetTriggerProps {\n  /** The trigger (a library button) followed by a `BottomSheet` or modal `SideSheet`. */\n  children: ReactNode;\n  /** Whether the sheet is open (controlled). */\n  open?: boolean;\n  /** Whether the sheet starts open when uncontrolled. @default false */\n  defaultOpen?: boolean;\n  /** Called when the sheet opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n}\n\n/**\n * Opens a modal {@link BottomSheet} or {@link SideSheet} from a button.\n *\n * @example\n * <SheetTrigger>\n *   <Button>Share</Button>\n *   <BottomSheet aria-label=\"Share\">…</BottomSheet>\n * </SheetTrigger>\n */\nexport function SheetTrigger({ children, open, defaultOpen, onOpenChange }: SheetTriggerProps) {\n  const state = useOverlayTriggerState({ isOpen: open, defaultOpen, onOpenChange });\n  const triggerRef = useRef<HTMLElement>(null);\n  const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef);\n  const triggerValue = useTriggerProps({\n    ...(triggerProps as TriggerContextValue),\n    ref: triggerRef,\n  });\n  const [trigger, ...sheet] = Children.toArray(children);\n  return (\n    <SheetTriggerContext value={{ state, overlayProps }}>\n      <TriggerContext value={triggerValue}>{trigger}</TriggerContext>\n      {sheet}\n    </SheetTriggerContext>\n  );\n}\n"],"mappings":";;;;;;;;AAiBA,MAAa,sBAAsB,cAA+C,IAAI;;;;;;;;;;AAsBtF,SAAgB,aAAa,EAAE,UAAU,MAAM,aAAa,gBAAmC;CAC7F,MAAM,QAAQ,uBAAuB;EAAE,QAAQ;EAAM;EAAa;CAAa,CAAC;CAChF,MAAM,aAAa,OAAoB,IAAI;CAC3C,MAAM,EAAE,cAAc,iBAAiB,kBAAkB,EAAE,MAAM,SAAS,GAAG,OAAO,UAAU;CAC9F,MAAM,eAAe,gBAAgB;EACnC,GAAI;EACJ,KAAK;CACP,CAAC;CACD,MAAM,CAAC,SAAS,GAAG,SAAS,SAAS,QAAQ,QAAQ;CACrD,OACE,qBAAC,qBAAD;EAAqB,OAAO;GAAE;GAAO;EAAa;EAAlD,UAAA,CACE,oBAAC,gBAAD;GAAgB,OAAO;GAAe,UAAA;EAAwB,CAAA,GAC7D,KACkB;;AAEzB"}