@windmorph/react 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,139 @@
+import { ClosedBy } from "../../utils/closed-by.js";
+import { CSSProperties, ComponentPropsWithRef, ReactElement, ReactNode, Ref } from "react";
+//#region src/components/sheet/SideSheet.d.ts
+export interface SideSheetClassNames {
+  /**
+   * The outermost element, which places the sheet (where `className` and `style` go too):
+   * a modal sheet's box `fixed` to the window's `edge`, or a standard sheet's layout box.
+   */
+  container?: string;
+  /** The dimmed layer behind a modal sheet. */
+  scrim?: string;
+  /** The sheet's surface: its colour, corners, width and shadow. */
+  panel?: string;
+  /** The header row: back button, title, actions and close button. */
+  header?: string;
+  /** The back button. */
+  back?: string;
+  /** The headline. */
+  title?: string;
+  /** The end of the header: `actions` and the close button. */
+  headerActions?: string;
+  /** The close button. */
+  close?: string;
+  /** The scrollable content area. */
+  content?: string;
+  /** The bottom row of action buttons. */
+  footer?: string;
+}
+/** Words the side sheet announces. */
+export interface SideSheetLabels {
+  /** The close button. @default "Close" */
+  close: string;
+  /** The back button (with `onBack`). @default "Back" */
+  back: string;
+}
+interface SideSheetRenderProps {
+  /** Closes a modal sheet, or reports `onOpenChange(false)` for a standard one. */
+  close: () => void;
+}
+interface SideSheetOwnProps {
+  /**
+   * `modal` opens over a scrim as a dialog; `standard` sits in the layout beside the
+   * content and opens and closes its width. @default "modal"
+   */
+  variant?: 'modal' | 'standard';
+  /** Float 16px from the edges with corners all round. @default false */
+  detached?: boolean;
+  /**
+   * The window edge the sheet is anchored to: `end` (the right in a left-to-right page, the
+   * left in RTL, as M3 asks) or `start`. A modal sheet slides in from it and swipes out toward
+   * it; a standard sheet faces it, with its divider on the other side. The root's `data-edge`
+   * says which.
+   * @default "end"
+   */
+  edge?: 'start' | 'end';
+  /**
+   * Whether a touch or pen swipe toward the sheet's edge closes a modal sheet (past half its
+   * width, or a fling). The close button, Escape and the scrim still close it either way, and
+   * a mouse drag never moves it. Off when `closedBy` is `"none"`; a standard sheet ignores
+   * it. To keep the sheet open after a swipe (unsaved changes), control `open` and leave it
+   * `true`: the sheet springs back.
+   * @default true
+   */
+  swipeable?: boolean;
+  /** Whether the sheet is open (controlled). */
+  open?: boolean;
+  /** Whether the sheet starts open when uncontrolled. @default false, or true when standard */
+  defaultOpen?: boolean;
+  /** Called when the sheet opens or closes. */
+  onOpenChange?: (open: boolean) => void;
+  /** The headline. It names the sheet. */
+  title?: ReactNode;
+  /** Shows a back button before the title, for a sheet with several levels. */
+  onBack?: () => void;
+  /** Header controls before the close button. */
+  actions?: ReactNode | ((props: SideSheetRenderProps) => ReactNode);
+  /** Bottom action buttons, start-aligned, e.g. Save and Cancel. */
+  footer?: ReactNode | ((props: SideSheetRenderProps) => ReactNode);
+  /** A divider between the content and `footer`. @default false */
+  footerDivider?: boolean;
+  /** A divider between a standard sheet and the content beside it. @default true */
+  divider?: boolean;
+  /**
+   * How the user can close a modal sheet, as HTML's `<dialog closedby>`: `any` (Escape, a
+   * press on the scrim or a swipe), `closerequest` (Escape or a swipe) or `none` (only its
+   * buttons or the app).
+   * @default "any"
+   */
+  closedBy?: ClosedBy;
+  /** Replaces the close button's icon. */
+  closeIcon?: ReactElement;
+  /** Replaces the back button's icon. */
+  backIcon?: ReactElement;
+  /** Words the sheet announces, with English defaults. */
+  labels?: Partial<SideSheetLabels>;
+  children?: ReactNode | ((props: SideSheetRenderProps) => ReactNode);
+  /** Classes for each part, by slot. */
+  classNames?: SideSheetClassNames;
+  /**
+   * Goes with `style` on the outermost element, the box that places the sheet, so a layout class
+   * moves the whole sheet and never clips or stretches its surface. Style the surface with
+   * `classNames.panel`; `ref`, `data-*` and other attributes go on the panel (a standard
+   * sheet's are on its outer box).
+   */
+  className?: string;
+  /** Goes on the outermost element, with `className`. */
+  style?: CSSProperties;
+  /** Ref to the panel, the sheet's surface (`role="dialog"`); a standard sheet's outer box. */
+  ref?: Ref<HTMLDivElement>;
+}
+type Naming = {
+  title: ReactNode;
+  /** Accessible name when there's no visible title; overrides `title` when both are set. */
+  'aria-label'?: string;
+} | {
+  /** Accessible name when there's no visible title. */
+  'aria-label': string;
+} | {
+  /** Id of a visible element that names the sheet, when there's no `title`. */
+  'aria-labelledby': string;
+};
+export type SideSheetProps = SideSheetOwnProps & Naming & Omit<ComponentPropsWithRef<'div'>, keyof SideSheetOwnProps | 'aria-label' | 'aria-labelledby'>;
+/**
+ * M3 side sheet: supplementary content at the end edge of the window (`edge="start"` for the
+ * other). A modal sheet slides in over a scrim as a dialog (Escape, a press outside or a
+ * touch swipe toward its edge closes it); a standard sheet sits in the layout as a non-modal
+ * dialog and opens and closes its width. Both always show a close button, as M3 requires.
+ *
+ * @example
+ * <SheetTrigger>
+ *   <Button>Filters</Button>
+ *   <SideSheet title="Filters" footer={({ close }) => <Button onPress={close}>Apply</Button>}>
+ *     …
+ *   </SideSheet>
+ * </SheetTrigger>
+ */
+export declare function SideSheet({ variant, open, defaultOpen, onOpenChange, ...props }: SideSheetProps): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=SideSheet.d.ts.map

package/dist/components/sheet/SideSheet.js

@@ -0,0 +1,289 @@
+"use client";
+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, tabbables } from "../../utils/focus.js";
+import { Overlay as Overlay$1 } from "../../primitives/Overlay.js";
+import { DensityZeroButtons } from "../button/DensityZeroButtons.js";
+import { BackIcon, CloseIcon } from "./sheet-icons.js";
+import { closedByOverlayOptions } from "../../utils/closed-by.js";
+import { SheetTriggerContext } from "./SheetTrigger.js";
+import { SHEET_EXIT_PROPERTIES, sideSheetStyles } from "./sheet-styles.js";
+import { useSideSwipe } from "./use-side-swipe.js";
+import { useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps, useDialog, useModalOverlay, useObjectRef } from "react-aria";
+import { useOverlayTriggerState } from "react-stately";
+//#region src/components/sheet/SideSheet.tsx
+const DEFAULT_LABELS = {
+	close: "Close",
+	back: "Back"
+};
+/**
+* M3 side sheet: supplementary content at the end edge of the window (`edge="start"` for the
+* other). A modal sheet slides in over a scrim as a dialog (Escape, a press outside or a
+* touch swipe toward its edge closes it); a standard sheet sits in the layout as a non-modal
+* dialog and opens and closes its width. Both always show a close button, as M3 requires.
+*
+* @example
+* <SheetTrigger>
+*   <Button>Filters</Button>
+*   <SideSheet title="Filters" footer={({ close }) => <Button onPress={close}>Apply</Button>}>
+*     …
+*   </SideSheet>
+* </SheetTrigger>
+*/
+function SideSheet({ 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 (variant === "standard") return /* @__PURE__ */ jsx(StandardSideSheet, {
+		...props,
+		state
+	});
+	if (!isPresent) return null;
+	return /* @__PURE__ */ jsx(Overlay$1, {
+		exiting: isExiting,
+		children: /* @__PURE__ */ jsx(ModalSideSheet, {
+			...props,
+			state,
+			isExiting,
+			exitProps,
+			triggerOverlayProps: trigger?.overlayProps
+		})
+	});
+}
+function SheetBody({ title, titleId, onBack, actions, footer, children, closeIcon, backIcon, labels: labelsProp, close, styles, classNames, contentRef }) {
+	const labels = {
+		...DEFAULT_LABELS,
+		...labelsProp
+	};
+	const renderProps = { close };
+	const render = (slot) => typeof slot === "function" ? slot(renderProps) : slot;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: styles.header({ class: classNames?.header }),
+			children: [
+				onBack && /* @__PURE__ */ jsx(IconButton, {
+					variant: "standard",
+					density: 0,
+					icon: backIcon ?? /* @__PURE__ */ jsx(BackIcon, {}),
+					"aria-label": labels.back,
+					onPress: onBack,
+					className: classNames?.back
+				}),
+				title != null && /* @__PURE__ */ jsx("h2", {
+					id: titleId,
+					className: styles.title({ class: classNames?.title }),
+					children: title
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: styles.headerActions({ class: classNames?.headerActions }),
+					children: [/* @__PURE__ */ jsx(DensityZeroButtons, { children: render(actions) }), /* @__PURE__ */ jsx(IconButton, {
+						variant: "standard",
+						density: 0,
+						icon: closeIcon ?? /* @__PURE__ */ jsx(CloseIcon, {}),
+						"aria-label": labels.close,
+						onPress: close,
+						className: classNames?.close
+					})]
+				})
+			]
+		}),
+		/* @__PURE__ */ jsx("div", {
+			ref: contentRef,
+			className: styles.content({ class: classNames?.content }),
+			children: render(children)
+		}),
+		footer != null && /* @__PURE__ */ jsx("div", {
+			className: styles.footer({ class: classNames?.footer }),
+			children: render(footer)
+		})
+	] });
+}
+const BODY_KEYS = [
+	"title",
+	"onBack",
+	"actions",
+	"footer",
+	"children",
+	"closeIcon",
+	"backIcon",
+	"labels",
+	"classNames"
+];
+/** Splits the header, body and footer props from those of the panel element. */
+function splitBodyProps(props) {
+	const body = {};
+	const rest = { ...props };
+	for (const key of BODY_KEYS) {
+		body[key] = rest[key];
+		delete rest[key];
+	}
+	return {
+		body,
+		rest
+	};
+}
+/** `aria-labelledby` for the panel: the consumer's, else the title's unless `aria-label` names it. */
+function labelledBy(props, hasTitle, titleId) {
+	return props["aria-labelledby"] ?? (props["aria-label"] == null && hasTitle ? titleId : void 0);
+}
+function ModalSideSheet({ state, isExiting, exitProps, triggerOverlayProps, detached = false, edge = "end", swipeable = true, closedBy = "any", divider: _divider, footerDivider = false, className, style, ref, ...props }) {
+	const { body, rest } = splitBodyProps(props);
+	const panelRef = useObjectRef(ref);
+	const motionRef = useRef(null);
+	const contentRef = useRef(null);
+	const titleId = useId();
+	const canSwipe = swipeable && closedBy !== "none";
+	const styles = sideSheetStyles({
+		variant: "modal",
+		edge,
+		swipeable: canSwipe,
+		detached,
+		hasBack: body.onBack != null,
+		footerDivider
+	});
+	const { panelHandlers, motionProps, dragging } = useSideSwipe({
+		enabled: canSwipe && !isExiting,
+		edge,
+		isOpen: state.isOpen,
+		close: state.close,
+		panelRef,
+		motionRef,
+		contentRef
+	});
+	const { modalProps, underlayProps } = useModalOverlay(closedByOverlayOptions(closedBy, isExiting), state, panelRef);
+	const { dialogProps } = useDialog({
+		...rest,
+		"aria-labelledby": labelledBy(rest, body.title != null, titleId)
+	}, panelRef);
+	useEffect(() => focusFirstInteractive(panelRef.current), [panelRef]);
+	const exiting = isExiting || void 0;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		"data-exiting": exiting,
+		className: styles.scrim({ class: body.classNames?.scrim })
+	}), /* @__PURE__ */ jsx("div", {
+		...underlayProps,
+		className: "fixed inset-0 z-(--md-sys-z-sheet)",
+		children: /* @__PURE__ */ jsx("div", {
+			style,
+			className: styles.container({ class: cn(body.classNames?.container, className) }),
+			children: /* @__PURE__ */ jsx("div", {
+				...mergeProps(exitProps, motionProps),
+				ref: motionRef,
+				"data-exiting": exiting,
+				className: styles.motion(),
+				children: /* @__PURE__ */ jsx("div", {
+					...mergeProps(rest, triggerOverlayProps ?? {}, modalProps, dialogProps, panelHandlers),
+					ref: panelRef,
+					"data-tokens": mergeDataTokens("md-comp-sheet-side", rest),
+					"data-variant": "modal",
+					"data-edge": edge,
+					"data-detached": detached || void 0,
+					"data-dragging": dragging || void 0,
+					"data-exiting": exiting,
+					className: styles.panel({ class: body.classNames?.panel }),
+					children: /* @__PURE__ */ jsx(TriggerContext, {
+						value: null,
+						children: /* @__PURE__ */ jsx(SheetBody, {
+							...body,
+							titleId,
+							close: state.close,
+							styles,
+							contentRef
+						})
+					})
+				})
+			})
+		})
+	})] });
+}
+function StandardSideSheet({ state, detached = false, edge = "end", swipeable: _swipeable, divider = true, footerDivider = false, closedBy: _closedBy, className, style, ref, ...props }) {
+	const { body, rest } = splitBodyProps(props);
+	const titleId = useId();
+	const styles = sideSheetStyles({
+		variant: "standard",
+		edge,
+		detached,
+		divider,
+		hasBack: body.onBack != null,
+		footerDivider
+	});
+	const closed = !state.isOpen || void 0;
+	const rootRef = useObjectRef(ref);
+	const frameRef = useRef(null);
+	const [width, setWidth] = useState(null);
+	useLayoutEffect(() => {
+		const frame = frameRef.current;
+		if (!frame) return;
+		const measure = () => setWidth(frame.offsetWidth);
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(frame);
+		return () => observer.disconnect();
+	}, []);
+	const returnFocus = useRef(null);
+	useLayoutEffect(() => {
+		const root = rootRef.current;
+		const active = root?.ownerDocument.activeElement;
+		if (state.isOpen || !root || !(active instanceof HTMLElement) || !root.contains(active)) return;
+		const saved = returnFocus.current;
+		const target = saved?.isConnected && !root.contains(saved) && !saved.closest("[inert]") ? saved : tabbables(root.ownerDocument.body, (el) => root.contains(el)).filter((el) => el.compareDocumentPosition(root) & Node.DOCUMENT_POSITION_FOLLOWING).at(-1) ?? null;
+		if (target) target.focus({ preventScroll: true });
+		else active.blur();
+	}, [state.isOpen, rootRef]);
+	const rootStyle = {
+		...style,
+		...width === null ? {} : { "--m3-side-sheet-width": `${width}px` }
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		onFocus: (event) => {
+			rest.onFocus?.(event);
+			const from = event.relatedTarget;
+			if (from instanceof HTMLElement && !event.currentTarget.contains(from)) returnFocus.current = from;
+		},
+		ref: rootRef,
+		role: "dialog",
+		style: rootStyle,
+		"data-tokens": mergeDataTokens("md-comp-sheet-side", rest),
+		"data-variant": "standard",
+		"data-edge": edge,
+		"data-detached": detached || void 0,
+		"data-closed": closed,
+		inert: !state.isOpen,
+		"aria-labelledby": labelledBy(rest, body.title != null, titleId),
+		className: styles.standard({ class: cn(body.classNames?.container, className) }),
+		children: /* @__PURE__ */ jsx("div", {
+			className: styles.standardClip(),
+			children: /* @__PURE__ */ jsx("div", {
+				ref: frameRef,
+				className: styles.standardFrame(),
+				children: /* @__PURE__ */ jsx("div", {
+					"data-slot": "panel",
+					className: styles.panel({ class: body.classNames?.panel }),
+					children: /* @__PURE__ */ jsx(SheetBody, {
+						...body,
+						titleId,
+						close: state.close,
+						styles
+					})
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { SideSheet };
+
+//# sourceMappingURL=SideSheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideSheet.js","names":["Overlay"],"sources":["../../../src/components/sheet/SideSheet.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useContext,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type FocusEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {\n  mergeProps,\n  useDialog,\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, tabbables } from '../../utils/focus';\nimport { DensityZeroButtons } from '../button/DensityZeroButtons';\nimport { IconButton } from '../icon-button/IconButton';\nimport { BackIcon, CloseIcon } from './sheet-icons';\nimport { SHEET_EXIT_PROPERTIES, sideSheetStyles } from './sheet-styles';\nimport { SheetTriggerContext } from './SheetTrigger';\nimport { useSideSwipe } from './use-side-swipe';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\n\nexport interface SideSheetClassNames {\n  /**\n   * The outermost element, which places the sheet (where `className` and `style` go too):\n   * a modal sheet's box `fixed` to the window's `edge`, or a standard sheet's layout box.\n   */\n  container?: string;\n  /** The dimmed layer behind a modal sheet. */\n  scrim?: string;\n  /** The sheet's surface: its colour, corners, width and shadow. */\n  panel?: string;\n  /** The header row: back button, title, actions and close button. */\n  header?: string;\n  /** The back button. */\n  back?: string;\n  /** The headline. */\n  title?: string;\n  /** The end of the header: `actions` and the close button. */\n  headerActions?: string;\n  /** The close button. */\n  close?: string;\n  /** The scrollable content area. */\n  content?: string;\n  /** The bottom row of action buttons. */\n  footer?: string;\n}\n\n/** Words the side sheet announces. */\nexport interface SideSheetLabels {\n  /** The close button. @default \"Close\" */\n  close: string;\n  /** The back button (with `onBack`). @default \"Back\" */\n  back: string;\n}\n\nconst DEFAULT_LABELS: SideSheetLabels = { close: 'Close', back: 'Back' };\n\ninterface SideSheetRenderProps {\n  /** Closes a modal sheet, or reports `onOpenChange(false)` for a standard one. */\n  close: () => void;\n}\n\ninterface SideSheetOwnProps {\n  /**\n   * `modal` opens over a scrim as a dialog; `standard` sits in the layout beside the\n   * content and opens and closes its width. @default \"modal\"\n   */\n  variant?: 'modal' | 'standard';\n  /** Float 16px from the edges with corners all round. @default false */\n  detached?: boolean;\n  /**\n   * The window edge the sheet is anchored to: `end` (the right in a left-to-right page, the\n   * left in RTL, as M3 asks) or `start`. A modal sheet slides in from it and swipes out toward\n   * it; a standard sheet faces it, with its divider on the other side. The root's `data-edge`\n   * says which.\n   * @default \"end\"\n   */\n  edge?: 'start' | 'end';\n  /**\n   * Whether a touch or pen swipe toward the sheet's edge closes a modal sheet (past half its\n   * width, or a fling). The close button, Escape and the scrim still close it either way, and\n   * a mouse drag never moves it. Off when `closedBy` is `\"none\"`; a standard sheet ignores\n   * it. To keep the sheet open after a swipe (unsaved changes), control `open` and leave it\n   * `true`: the sheet springs back.\n   * @default true\n   */\n  swipeable?: boolean;\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  /** The headline. It names the sheet. */\n  title?: ReactNode;\n  /** Shows a back button before the title, for a sheet with several levels. */\n  onBack?: () => void;\n  /** Header controls before the close button. */\n  actions?: ReactNode | ((props: SideSheetRenderProps) => ReactNode);\n  /** Bottom action buttons, start-aligned, e.g. Save and Cancel. */\n  footer?: ReactNode | ((props: SideSheetRenderProps) => ReactNode);\n  /** A divider between the content and `footer`. @default false */\n  footerDivider?: boolean;\n  /** A divider between a standard sheet and the content beside it. @default true */\n  divider?: boolean;\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 swipe), `closerequest` (Escape or a swipe) or `none` (only its\n   * buttons or the app).\n   * @default \"any\"\n   */\n  closedBy?: ClosedBy;\n  /** Replaces the close button's icon. */\n  closeIcon?: ReactElement;\n  /** Replaces the back button's icon. */\n  backIcon?: ReactElement;\n  /** Words the sheet announces, with English defaults. */\n  labels?: Partial<SideSheetLabels>;\n  children?: ReactNode | ((props: SideSheetRenderProps) => ReactNode);\n  /** Classes for each part, by slot. */\n  classNames?: SideSheetClassNames;\n  /**\n   * Goes with `style` on the outermost element, the box that places the sheet, so a layout class\n   * moves the whole sheet and never clips or stretches its surface. Style the surface with\n   * `classNames.panel`; `ref`, `data-*` and other attributes go on the panel (a standard\n   * sheet's are on its outer box).\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\"`); a standard sheet's outer box. */\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype Naming =\n  | {\n      title: ReactNode;\n      /** Accessible name when there's no visible title; overrides `title` when both are set. */\n      'aria-label'?: string;\n    }\n  | {\n      /** Accessible name when there's no visible title. */\n      'aria-label': string;\n    }\n  | {\n      /** Id of a visible element that names the sheet, when there's no `title`. */\n      'aria-labelledby': string;\n    };\n\nexport type SideSheetProps = SideSheetOwnProps &\n  Naming &\n  Omit<ComponentPropsWithRef<'div'>, keyof SideSheetOwnProps | 'aria-label' | 'aria-labelledby'>;\n\n/**\n * M3 side sheet: supplementary content at the end edge of the window (`edge=\"start\"` for the\n * other). A modal sheet slides in over a scrim as a dialog (Escape, a press outside or a\n * touch swipe toward its edge closes it); a standard sheet sits in the layout as a non-modal\n * dialog and opens and closes its width. Both always show a close button, as M3 requires.\n *\n * @example\n * <SheetTrigger>\n *   <Button>Filters</Button>\n *   <SideSheet title=\"Filters\" footer={({ close }) => <Button onPress={close}>Apply</Button>}>\n *     …\n *   </SideSheet>\n * </SheetTrigger>\n */\nexport function SideSheet({\n  variant = 'modal',\n  open,\n  defaultOpen,\n  onOpenChange,\n  ...props\n}: SideSheetProps) {\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 (variant === 'standard') return <StandardSideSheet {...props} state={state} />;\n  if (!isPresent) return null;\n  return (\n    <Overlay exiting={isExiting}>\n      <ModalSideSheet\n        {...props}\n        state={state}\n        isExiting={isExiting}\n        exitProps={exitProps}\n        triggerOverlayProps={trigger?.overlayProps}\n      />\n    </Overlay>\n  );\n}\n\ntype InnerProps = Omit<SideSheetProps, 'variant' | 'open' | 'defaultOpen' | 'onOpenChange'> & {\n  state: OverlayTriggerState;\n};\n\ntype BodyProps = Pick<\n  SideSheetOwnProps,\n  | 'title'\n  | 'onBack'\n  | 'actions'\n  | 'footer'\n  | 'children'\n  | 'closeIcon'\n  | 'backIcon'\n  | 'labels'\n  | 'classNames'\n> & {\n  titleId: string;\n  close: () => void;\n  styles: ReturnType<typeof sideSheetStyles>;\n  contentRef?: Ref<HTMLDivElement>;\n};\n\nfunction SheetBody({\n  title,\n  titleId,\n  onBack,\n  actions,\n  footer,\n  children,\n  closeIcon,\n  backIcon,\n  labels: labelsProp,\n  close,\n  styles,\n  classNames,\n  contentRef,\n}: BodyProps) {\n  const labels = { ...DEFAULT_LABELS, ...labelsProp };\n  const renderProps = { close };\n  const render = (slot: SideSheetOwnProps['children']) =>\n    typeof slot === 'function' ? slot(renderProps) : slot;\n  return (\n    <>\n      <div className={styles.header({ class: classNames?.header })}>\n        {onBack && (\n          <IconButton\n            variant=\"standard\"\n            density={0}\n            icon={backIcon ?? <BackIcon />}\n            aria-label={labels.back}\n            onPress={onBack}\n            className={classNames?.back}\n          />\n        )}\n        {title != null && (\n          <h2 id={titleId} className={styles.title({ class: classNames?.title })}>\n            {title}\n          </h2>\n        )}\n        <div className={styles.headerActions({ class: classNames?.headerActions })}>\n          <DensityZeroButtons>{render(actions)}</DensityZeroButtons>\n          <IconButton\n            variant=\"standard\"\n            density={0}\n            icon={closeIcon ?? <CloseIcon />}\n            aria-label={labels.close}\n            onPress={close}\n            className={classNames?.close}\n          />\n        </div>\n      </div>\n      <div ref={contentRef} className={styles.content({ class: classNames?.content })}>\n        {render(children)}\n      </div>\n      {footer != null && (\n        <div className={styles.footer({ class: classNames?.footer })}>{render(footer)}</div>\n      )}\n    </>\n  );\n}\n\nconst BODY_KEYS = [\n  'title',\n  'onBack',\n  'actions',\n  'footer',\n  'children',\n  'closeIcon',\n  'backIcon',\n  'labels',\n  'classNames',\n] as const;\n\n/** Splits the header, body and footer props from those of the panel element. */\nfunction splitBodyProps<T extends Record<string, unknown>>(props: T) {\n  const body: Record<string, unknown> = {};\n  const rest: Record<string, unknown> = { ...props };\n  for (const key of BODY_KEYS) {\n    body[key] = rest[key];\n    delete rest[key];\n  }\n  return {\n    body: body as Omit<BodyProps, 'titleId' | 'close' | 'styles' | 'contentRef'>,\n    rest: rest as Omit<T, (typeof BODY_KEYS)[number]>,\n  };\n}\n\n/** `aria-labelledby` for the panel: the consumer's, else the title's unless `aria-label` names it. */\nfunction labelledBy(props: Record<string, unknown>, hasTitle: boolean, titleId: string) {\n  const own = props['aria-labelledby'] as string | undefined;\n  return own ?? (props['aria-label'] == null && hasTitle ? titleId : undefined);\n}\n\nfunction ModalSideSheet({\n  state,\n  isExiting,\n  exitProps,\n  triggerOverlayProps,\n  detached = false,\n  edge = 'end',\n  swipeable = true,\n  closedBy = 'any',\n  divider: _divider,\n  footerDivider = false,\n  className,\n  style,\n  ref,\n  ...props\n}: InnerProps & {\n  isExiting: boolean;\n  exitProps: ReturnType<typeof usePresence>['exitProps'];\n  triggerOverlayProps?: { id?: string };\n}) {\n  const { body, rest } = splitBodyProps(props);\n  const panelRef = useObjectRef(ref as Ref<HTMLDivElement>);\n  const motionRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  // `closedBy=\"none\"` leaves closing to the app, so a swipe doesn't close it either.\n  const canSwipe = swipeable && closedBy !== 'none';\n  const styles = sideSheetStyles({\n    variant: 'modal',\n    edge,\n    swipeable: canSwipe,\n    detached,\n    hasBack: body.onBack != null,\n    footerDivider,\n  });\n  const { panelHandlers, motionProps, dragging } = useSideSwipe({\n    enabled: canSwipe && !isExiting,\n    edge,\n    isOpen: state.isOpen,\n    close: state.close,\n    panelRef,\n    motionRef,\n    contentRef,\n  });\n  const { modalProps, underlayProps } = useModalOverlay(\n    closedByOverlayOptions(closedBy, isExiting),\n    state,\n    panelRef,\n  );\n  const { dialogProps } = useDialog(\n    {\n      ...(rest as AriaDialogProps),\n      'aria-labelledby': labelledBy(rest, body.title != null, titleId),\n    },\n    panelRef,\n  );\n  // M3: focus lands on the first (non-disabled) icon button, as in a Dialog, not the panel.\n  useEffect(() => focusFirstInteractive(panelRef.current), [panelRef]);\n  const exiting = isExiting || undefined;\n  return (\n    <>\n      <div\n        aria-hidden=\"true\"\n        data-exiting={exiting}\n        className={styles.scrim({ class: body.classNames?.scrim })}\n      />\n      <div {...underlayProps} className=\"fixed inset-0 z-(--md-sys-z-sheet)\">\n        <div\n          style={style}\n          className={styles.container({ class: cn(body.classNames?.container, className) })}\n        >\n          <div\n            {...mergeProps(exitProps, motionProps)}\n            ref={motionRef}\n            data-exiting={exiting}\n            className={styles.motion()}\n          >\n            <div\n              {...mergeProps(\n                rest,\n                triggerOverlayProps ?? {},\n                modalProps,\n                dialogProps,\n                panelHandlers,\n              )}\n              ref={panelRef}\n              // The component tokens' hooks (sheet-tokens.ts); `data-variant` and `data-edge`\n              // are also public.\n              data-tokens={mergeDataTokens('md-comp-sheet-side', rest)}\n              data-variant=\"modal\"\n              data-edge={edge}\n              data-detached={detached || undefined}\n              data-dragging={dragging || undefined}\n              data-exiting={exiting}\n              className={styles.panel({ class: body.classNames?.panel })}\n            >\n              <TriggerContext value={null}>\n                <SheetBody\n                  {...body}\n                  titleId={titleId}\n                  close={state.close}\n                  styles={styles}\n                  contentRef={contentRef}\n                />\n              </TriggerContext>\n            </div>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n\nfunction StandardSideSheet({\n  state,\n  detached = false,\n  edge = 'end',\n  swipeable: _swipeable,\n  divider = true,\n  footerDivider = false,\n  closedBy: _closedBy,\n  className,\n  style,\n  ref,\n  ...props\n}: InnerProps) {\n  const { body, rest } = splitBodyProps(props);\n  const titleId = useId();\n  const styles = sideSheetStyles({\n    variant: 'standard',\n    edge,\n    detached,\n    divider,\n    hasBack: body.onBack != null,\n    footerDivider,\n  });\n  const closed = !state.isOpen || undefined;\n  const rootRef = useObjectRef(ref as Ref<HTMLDivElement>);\n  const frameRef = useRef<HTMLDivElement>(null);\n  // The sheet's open width, measured, so the root's width (not a grid fraction, which takes\n  // only part of the shrinking free space and left the panel floating off its edge) moves\n  // between it and 0. Until it's measured (the server's HTML) the open root is `auto` wide.\n  const [width, setWidth] = useState<number | null>(null);\n  useLayoutEffect(() => {\n    const frame = frameRef.current;\n    if (!frame) return;\n    // The layout width, not the box on screen, which a consumer transform scales or turns.\n    const measure = () => setWidth(frame.offsetWidth);\n    measure();\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(frame);\n    return () => observer.disconnect();\n  }, []);\n  // Focus that came from outside returns there when the sheet closes with focus inside (its\n  // close button, Escape in content, or the app closing it): the closed sheet is `inert`, and\n  // focus would otherwise drop to the page.\n  const returnFocus = useRef<HTMLElement | null>(null);\n  useLayoutEffect(() => {\n    const root = rootRef.current;\n    const active = root?.ownerDocument.activeElement;\n    if (state.isOpen || !root || !(active instanceof HTMLElement) || !root.contains(active)) return;\n    const saved = returnFocus.current;\n    const target =\n      saved?.isConnected && !root.contains(saved) && !saved.closest('[inert]')\n        ? saved\n        : (tabbables(root.ownerDocument.body, (el) => root.contains(el))\n            .filter((el) => el.compareDocumentPosition(root) & Node.DOCUMENT_POSITION_FOLLOWING)\n            .at(-1) ?? null);\n    if (target) target.focus({ preventScroll: true });\n    else active.blur();\n  }, [state.isOpen, rootRef]);\n  const rootStyle = {\n    ...style,\n    ...(width === null ? {} : { '--m3-side-sheet-width': `${width}px` }),\n  } as CSSProperties;\n  // A non-modal dialog (m3.material.io: the side sheet's role is dialog); focus isn't moved.\n  return (\n    <div\n      {...rest}\n      onFocus={(event: FocusEvent<HTMLDivElement>) => {\n        (rest as { onFocus?: (event: FocusEvent<HTMLDivElement>) => void }).onFocus?.(event);\n        const from = event.relatedTarget;\n        if (from instanceof HTMLElement && !event.currentTarget.contains(from)) {\n          returnFocus.current = from;\n        }\n      }}\n      ref={rootRef}\n      role=\"dialog\"\n      style={rootStyle}\n      // The component tokens' hooks (sheet-tokens.ts), read by the panel inside.\n      data-tokens={mergeDataTokens('md-comp-sheet-side', rest)}\n      data-variant=\"standard\"\n      data-edge={edge}\n      data-detached={detached || undefined}\n      data-closed={closed}\n      inert={!state.isOpen}\n      aria-labelledby={labelledBy(rest, body.title != null, titleId)}\n      className={styles.standard({ class: cn(body.classNames?.container, className) })}\n    >\n      <div className={styles.standardClip()}>\n        <div ref={frameRef} className={styles.standardFrame()}>\n          <div data-slot=\"panel\" className={styles.panel({ class: body.classNames?.panel })}>\n            <SheetBody {...body} titleId={titleId} close={state.close} styles={styles} />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/sheet/bottom-sheet-gesture.js

@@ -0,0 +1,30 @@
+//#region src/components/sheet/bottom-sheet-gesture.ts
+/**
+* Decides whether a touch on the sheet's content drags the sheet or scrolls the content,
+* from how far it has moved (`dx`, `dy`, px; `dy` positive downwards), whether the content
+* under it is scrolled, and whether the sheet can still rise (it rests below its top
+* detent). Until it moves past {@link DRAG_SLOP} it is undecided; then a mostly horizontal
+* move scrolls (horizontal scrollers, text). On content at its top, a downward move drags
+* the sheet, and so does an upward one while the sheet can rise (Compose's nested scroll
+* raises the sheet before the content scrolls; the caller hands the rest of the move to
+* the content once the sheet is up). Anything else scrolls. Callers keep the first decision
+* until the pointer lifts.
+*/
+function contentGesture(dx, dy, scrolled, canRise = false) {
+	if (Math.max(Math.abs(dx), Math.abs(dy)) <= 4) return "undecided";
+	if (Math.abs(dx) >= Math.abs(dy)) return "scroll";
+	if (scrolled) return "scroll";
+	return dy > 0 || canRise ? "drag" : "scroll";
+}
+/** Whether `root`, or any scroller between `target` and it, is scrolled away from its top. */
+function scrolledAbove(target, root) {
+	for (let node = target; node; node = node.parentElement) {
+		if (node.scrollTop > 0) return true;
+		if (node === root) return false;
+	}
+	return false;
+}
+//#endregion
+export { contentGesture, scrolledAbove };
+
+//# sourceMappingURL=bottom-sheet-gesture.js.map

package/dist/components/sheet/bottom-sheet-gesture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bottom-sheet-gesture.js","names":[],"sources":["../../../src/components/sheet/bottom-sheet-gesture.ts"],"sourcesContent":["import { DRAG_SLOP } from './sheet-gesture';\n\n/** What a touch that starts on a bottom sheet's content does. */\nexport type ContentGesture = 'undecided' | 'drag' | 'scroll';\n\n/**\n * Decides whether a touch on the sheet's content drags the sheet or scrolls the content,\n * from how far it has moved (`dx`, `dy`, px; `dy` positive downwards), whether the content\n * under it is scrolled, and whether the sheet can still rise (it rests below its top\n * detent). Until it moves past {@link DRAG_SLOP} it is undecided; then a mostly horizontal\n * move scrolls (horizontal scrollers, text). On content at its top, a downward move drags\n * the sheet, and so does an upward one while the sheet can rise (Compose's nested scroll\n * raises the sheet before the content scrolls; the caller hands the rest of the move to\n * the content once the sheet is up). Anything else scrolls. Callers keep the first decision\n * until the pointer lifts.\n */\nexport function contentGesture(\n  dx: number,\n  dy: number,\n  scrolled: boolean,\n  canRise = false,\n): ContentGesture {\n  if (Math.max(Math.abs(dx), Math.abs(dy)) <= DRAG_SLOP) return 'undecided';\n  if (Math.abs(dx) >= Math.abs(dy)) return 'scroll';\n  if (scrolled) return 'scroll';\n  return dy > 0 || canRise ? 'drag' : 'scroll';\n}\n\n/** Whether `root`, or any scroller between `target` and it, is scrolled away from its top. */\nexport function scrolledAbove(target: Element, root: Element): boolean {\n  for (let node: Element | null = target; node; node = node.parentElement) {\n    if (node.scrollTop > 0) return true;\n    if (node === root) return false;\n  }\n  return false;\n}\n"],"mappings":";;;;;;;;;;;;AAgBA,SAAgB,eACd,IACA,IACA,UACA,UAAU,OACM;CAChB,IAAI,KAAK,IAAI,KAAK,IAAI,EAAE,GAAG,KAAK,IAAI,EAAE,CAAC,KAAA,GAAgB,OAAO;CAC9D,IAAI,KAAK,IAAI,EAAE,KAAK,KAAK,IAAI,EAAE,GAAG,OAAO;CACzC,IAAI,UAAU,OAAO;CACrB,OAAO,KAAK,KAAK,UAAU,SAAS;AACtC;;AAGA,SAAgB,cAAc,QAAiB,MAAwB;CACrE,KAAK,IAAI,OAAuB,QAAQ,MAAM,OAAO,KAAK,eAAe;EACvE,IAAI,KAAK,YAAY,GAAG,OAAO;EAC/B,IAAI,SAAS,MAAM,OAAO;CAC5B;CACA,OAAO;AACT"}

package/dist/components/sheet/lazy-bottom-sheet.js

@@ -0,0 +1,33 @@
+"use client";
+import { onDemand, usePreloadOnIntent } from "../../utils/load-on-demand.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/sheet/lazy-bottom-sheet.tsx
+const sheet = onDemand(() => import("./BottomSheet.js").then((module) => module.BottomSheet));
+sheet.preload;
+/**
+* A `BottomSheet` whose module is loaded the first time it opens, for components that show
+* a sheet only in some presentations (`Menu` and `Select` with `presentation="sheet"` or
+* `"auto"`). Their other presentations then don't carry the sheet's code. Until it first
+* opens it renders nothing; while the module loads it renders nothing too, rather than a
+* placeholder of another shape. Once loaded it opens in the same pass as the open itself
+* (it never suspends, see `onDemand`). Once opened it stays mounted, so it can play its exit.
+* Server rendering works as it did: a sheet is never open there.
+*/
+function LazyBottomSheet(props) {
+	const [opened, setOpened] = useState(props.open === true);
+	if (props.open === true && !opened) setOpened(true);
+	if (!opened) return null;
+	return /* @__PURE__ */ jsx(sheet.Component, { ...props });
+}
+/**
+* Preloads the sheet when the pointer moves over `ref`'s element or focus enters it, while
+* `enabled` (the component would open in a sheet).
+*/
+function usePreloadBottomSheet(ref, enabled) {
+	usePreloadOnIntent(ref, sheet.preload, enabled);
+}
+//#endregion
+export { LazyBottomSheet, usePreloadBottomSheet };
+
+//# sourceMappingURL=lazy-bottom-sheet.js.map

package/dist/components/sheet/lazy-bottom-sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy-bottom-sheet.js","names":[],"sources":["../../../src/components/sheet/lazy-bottom-sheet.tsx"],"sourcesContent":["'use client';\n\nimport { useState, type RefObject } from 'react';\nimport { onDemand, usePreloadOnIntent } from '../../utils/load-on-demand';\nimport type { BottomSheetProps } from './BottomSheet';\n\nconst sheet = onDemand<BottomSheetProps>(() =>\n  import('./BottomSheet').then((module) => module.BottomSheet),\n);\n\n/**\n * Starts loading the `BottomSheet` module, once; later calls return the same promise.\n * Components that open in a sheet only sometimes call it when a sheet becomes likely (the\n * pointer over their trigger, or focus on it), so the sheet is usually loaded by the time\n * it opens.\n */\nexport const preloadBottomSheet = sheet.preload;\n\n/**\n * A `BottomSheet` whose module is loaded the first time it opens, for components that show\n * a sheet only in some presentations (`Menu` and `Select` with `presentation=\"sheet\"` or\n * `\"auto\"`). Their other presentations then don't carry the sheet's code. Until it first\n * opens it renders nothing; while the module loads it renders nothing too, rather than a\n * placeholder of another shape. Once loaded it opens in the same pass as the open itself\n * (it never suspends, see `onDemand`). Once opened it stays mounted, so it can play its exit.\n * Server rendering works as it did: a sheet is never open there.\n */\nexport function LazyBottomSheet(props: BottomSheetProps) {\n  const [opened, setOpened] = useState(props.open === true);\n  // Set during render, so the first open renders the sheet in the same pass.\n  if (props.open === true && !opened) setOpened(true);\n  if (!opened) return null;\n  return <sheet.Component {...props} />;\n}\n\n/**\n * Preloads the sheet when the pointer moves over `ref`'s element or focus enters it, while\n * `enabled` (the component would open in a sheet).\n */\nexport function usePreloadBottomSheet(ref: RefObject<HTMLElement | null>, enabled: boolean) {\n  usePreloadOnIntent(ref, sheet.preload, enabled);\n}\n"],"mappings":";;;;;AAMA,MAAM,QAAQ,eACZ,OAAO,mBAAgB,CAAC,MAAM,WAAW,OAAO,WAAW,CAC7D;AAQkC,MAAM;;;;;;;;;;AAWxC,SAAgB,gBAAgB,OAAyB;CACvD,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM,SAAS,IAAI;CAExD,IAAI,MAAM,SAAS,QAAQ,CAAC,QAAQ,UAAU,IAAI;CAClD,IAAI,CAAC,QAAQ,OAAO;CACpB,OAAO,oBAAC,MAAM,WAAP,EAAiB,GAAI,MAAQ,CAAA;AACtC;;;;;AAMA,SAAgB,sBAAsB,KAAoC,SAAkB;CAC1F,mBAAmB,KAAK,MAAM,SAAS,OAAO;AAChD"}

package/dist/components/sheet/sheet-gesture.js

@@ -0,0 +1,48 @@
+//#region src/components/sheet/sheet-gesture.ts
+const EDITABLE = "input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])";
+/**
+* Whether a computed `touch-action` keeps the browser from panning along `axis`, which means
+* the element handles drags along it itself: `none` both ways, `pan-y` (a horizontal slider,
+* a carousel's own drag) the inline axis, `pan-x` (a vertical slider) the block axis.
+*/
+function excludesPan(touchAction, axis) {
+	if (touchAction === "" || touchAction === "auto" || touchAction === "manipulation") return false;
+	if (touchAction === "none") return true;
+	const values = touchAction.split(/\s+/);
+	return axis === "x" ? !values.some((value) => value === "pan-x" || value === "pan-left" || value === "pan-right") : !values.some((value) => value === "pan-y" || value === "pan-up" || value === "pan-down");
+}
+/**
+* Whether `node` scrolls along the inline axis and still can toward a finger moving by `dx`
+* (px, positive rightwards): a finger moving right reveals what lies to the left, in either
+* direction (`scrollLeft` runs 0 → positive in LTR and 0 → negative in RTL).
+*/
+function scrollsSideways(node, dx) {
+	const range = node.scrollWidth - node.clientWidth;
+	if (range < 1) return false;
+	const style = getComputedStyle(node);
+	if (style.overflowX !== "auto" && style.overflowX !== "scroll") return false;
+	const rtl = style.direction === "rtl";
+	const min = rtl ? -range : 0;
+	const max = rtl ? 0 : range;
+	return dx > 0 ? node.scrollLeft > min + .5 : node.scrollLeft < max - .5;
+}
+/**
+* Whether a touch starting on `target` is left to the content, for a drag along `axis`: on a
+* form field (text selection and caret placement), or on an element between `target` and
+* `root` that handles that axis's drags itself (its `touch-action` excludes panning along
+* it, see {@link excludesPan}). With `dx` (a decided inline move, px, positive rightwards),
+* a horizontal scroller in between that can still scroll that way owns it too, while one at
+* its end in that direction lets the sheet have it.
+*/
+function ownsGesture(target, root, axis = "y", dx = 0) {
+	if (target.closest(EDITABLE) && root.contains(target.closest(EDITABLE))) return true;
+	for (let node = target; node && node !== root; node = node.parentElement) {
+		if (excludesPan(getComputedStyle(node).touchAction, axis)) return true;
+		if (axis === "x" && dx !== 0 && scrollsSideways(node, dx)) return true;
+	}
+	return false;
+}
+//#endregion
+export { ownsGesture };
+
+//# sourceMappingURL=sheet-gesture.js.map

package/dist/components/sheet/sheet-gesture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet-gesture.js","names":[],"sources":["../../../src/components/sheet/sheet-gesture.ts"],"sourcesContent":["/** How far a pointer moves before a press becomes a drag. */\nexport const DRAG_SLOP = 4;\n\nconst EDITABLE = 'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])';\n\n/** A drag's axis: `x` (inline, a side sheet's swipe) or `y` (block, a bottom sheet's drag). */\nexport type GestureAxis = 'x' | 'y';\n\n/**\n * Whether a computed `touch-action` keeps the browser from panning along `axis`, which means\n * the element handles drags along it itself: `none` both ways, `pan-y` (a horizontal slider,\n * a carousel's own drag) the inline axis, `pan-x` (a vertical slider) the block axis.\n */\nfunction excludesPan(touchAction: string, axis: GestureAxis) {\n  if (touchAction === '' || touchAction === 'auto' || touchAction === 'manipulation') return false;\n  if (touchAction === 'none') return true;\n  const values = touchAction.split(/\\s+/);\n  return axis === 'x'\n    ? !values.some((value) => value === 'pan-x' || value === 'pan-left' || value === 'pan-right')\n    : !values.some((value) => value === 'pan-y' || value === 'pan-up' || value === 'pan-down');\n}\n\n/**\n * Whether `node` scrolls along the inline axis and still can toward a finger moving by `dx`\n * (px, positive rightwards): a finger moving right reveals what lies to the left, in either\n * direction (`scrollLeft` runs 0 → positive in LTR and 0 → negative in RTL).\n */\nfunction scrollsSideways(node: Element, dx: number) {\n  const range = node.scrollWidth - node.clientWidth;\n  if (range < 1) return false;\n  const style = getComputedStyle(node);\n  if (style.overflowX !== 'auto' && style.overflowX !== 'scroll') return false;\n  const rtl = style.direction === 'rtl';\n  const min = rtl ? -range : 0;\n  const max = rtl ? 0 : range;\n  return dx > 0 ? node.scrollLeft > min + 0.5 : node.scrollLeft < max - 0.5;\n}\n\n/**\n * Whether a touch starting on `target` is left to the content, for a drag along `axis`: on a\n * form field (text selection and caret placement), or on an element between `target` and\n * `root` that handles that axis's drags itself (its `touch-action` excludes panning along\n * it, see {@link excludesPan}). With `dx` (a decided inline move, px, positive rightwards),\n * a horizontal scroller in between that can still scroll that way owns it too, while one at\n * its end in that direction lets the sheet have it.\n */\nexport function ownsGesture(\n  target: Element,\n  root: Element,\n  axis: GestureAxis = 'y',\n  dx = 0,\n): boolean {\n  if (target.closest(EDITABLE) && root.contains(target.closest(EDITABLE))) return true;\n  for (let node: Element | null = target; node && node !== root; node = node.parentElement) {\n    if (excludesPan(getComputedStyle(node).touchAction, axis)) return true;\n    if (axis === 'x' && dx !== 0 && scrollsSideways(node, dx)) return true;\n  }\n  return false;\n}\n"],"mappings":";AAGA,MAAM,WAAW;;;;;;AAUjB,SAAS,YAAY,aAAqB,MAAmB;CAC3D,IAAI,gBAAgB,MAAM,gBAAgB,UAAU,gBAAgB,gBAAgB,OAAO;CAC3F,IAAI,gBAAgB,QAAQ,OAAO;CACnC,MAAM,SAAS,YAAY,MAAM,KAAK;CACtC,OAAO,SAAS,MACZ,CAAC,OAAO,MAAM,UAAU,UAAU,WAAW,UAAU,cAAc,UAAU,WAAW,IAC1F,CAAC,OAAO,MAAM,UAAU,UAAU,WAAW,UAAU,YAAY,UAAU,UAAU;AAC7F;;;;;;AAOA,SAAS,gBAAgB,MAAe,IAAY;CAClD,MAAM,QAAQ,KAAK,cAAc,KAAK;CACtC,IAAI,QAAQ,GAAG,OAAO;CACtB,MAAM,QAAQ,iBAAiB,IAAI;CACnC,IAAI,MAAM,cAAc,UAAU,MAAM,cAAc,UAAU,OAAO;CACvE,MAAM,MAAM,MAAM,cAAc;CAChC,MAAM,MAAM,MAAM,CAAC,QAAQ;CAC3B,MAAM,MAAM,MAAM,IAAI;CACtB,OAAO,KAAK,IAAI,KAAK,aAAa,MAAM,KAAM,KAAK,aAAa,MAAM;AACxE;;;;;;;;;AAUA,SAAgB,YACd,QACA,MACA,OAAoB,KACpB,KAAK,GACI;CACT,IAAI,OAAO,QAAQ,QAAQ,KAAK,KAAK,SAAS,OAAO,QAAQ,QAAQ,CAAC,GAAG,OAAO;CAChF,KAAK,IAAI,OAAuB,QAAQ,QAAQ,SAAS,MAAM,OAAO,KAAK,eAAe;EACxF,IAAI,YAAY,iBAAiB,IAAI,CAAC,CAAC,aAAa,IAAI,GAAG,OAAO;EAClE,IAAI,SAAS,OAAO,OAAO,KAAK,gBAAgB,MAAM,EAAE,GAAG,OAAO;CACpE;CACA,OAAO;AACT"}

package/dist/components/sheet/sheet-icons.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/sheet/sheet-icons.tsx
+/** Material Symbols "close" (Apache-2.0). */
+function CloseIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 -960 960 960",
+		fill: "currentColor",
+		children: /* @__PURE__ */ jsx("path", { d: "m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" })
+	});
+}
+/** Material Symbols "arrow_back" (Apache-2.0), mirrored in right-to-left layouts. */
+function BackIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 -960 960 960",
+		fill: "currentColor",
+		className: "rtl:-scale-x-100",
+		children: /* @__PURE__ */ jsx("path", { d: "m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z" })
+	});
+}
+/** Material Symbols "expand_more" (Apache-2.0). */
+function CollapseIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 -960 960 960",
+		fill: "currentColor",
+		children: /* @__PURE__ */ jsx("path", { d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" })
+	});
+}
+//#endregion
+export { BackIcon, CloseIcon, CollapseIcon };
+
+//# sourceMappingURL=sheet-icons.js.map