@windmorph/react 0.0.0-stage → 0.1.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"sheet-icons.js","names":[],"sources":["../../../src/components/sheet/sheet-icons.tsx"],"sourcesContent":["/** Material Symbols \"close\" (Apache-2.0). */\nexport function CloseIcon() {\n  return (\n    <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\n      <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\" />\n    </svg>\n  );\n}\n\n/** Material Symbols \"arrow_back\" (Apache-2.0), mirrored in right-to-left layouts. */\nexport function BackIcon() {\n  return (\n    <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\" className=\"rtl:-scale-x-100\">\n      <path d=\"m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z\" />\n    </svg>\n  );\n}\n\n/** Material Symbols \"expand_more\" (Apache-2.0). */\nexport function CollapseIcon() {\n  return (\n    <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\n      <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\" />\n    </svg>\n  );\n}\n"],"mappings":";;;AACA,SAAgB,YAAY;CAC1B,OACE,oBAAC,OAAD;EAAK,SAAQ;EAAiB,MAAK;EACjC,UAAA,oBAAC,QAAD,EAAM,GAAE,oGAAqG,CAAA;CAC1G,CAAA;AAET;;AAGA,SAAgB,WAAW;CACzB,OACE,oBAAC,OAAD;EAAK,SAAQ;EAAiB,MAAK;EAAe,WAAU;EAC1D,UAAA,oBAAC,QAAD,EAAM,GAAE,mEAAoE,CAAA;CACzE,CAAA;AAET;;AAGA,SAAgB,eAAe;CAC7B,OACE,oBAAC,OAAD;EAAK,SAAQ;EAAiB,MAAK;EACjC,UAAA,oBAAC,QAAD,EAAM,GAAE,wDAAyD,CAAA;CAC9D,CAAA;AAET"}

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

@@ -0,0 +1,58 @@
+import { SPRINGS } from "../../tokens/motion.js";
+import { springWithVelocityToLinearEasing } from "../../tokens/spring-velocity.js";
+/** The anchor at or beyond `position` in one direction, nearest to it. */
+function closestAnchor(anchors, position, searchUpwards) {
+	let best;
+	for (const anchor of anchors) if ((searchUpwards ? anchor >= position : anchor <= position) && (best === void 0 || Math.abs(anchor - position) < Math.abs(best - position))) best = anchor;
+	return best ?? (searchUpwards ? Math.max(...anchors) : Math.min(...anchors));
+}
+/**
+* Where a dragged sheet settles, ported from Compose's `AnchoredDraggableState`
+* (`computeTarget`). Offsets grow away from the open position (0 = fully open; downwards for
+* a bottom sheet, toward its edge for a side sheet); `velocity` is in px per second, positive
+* the same way.
+*
+* - A fling faster than 125px/s goes to the next anchor in its direction.
+* - Otherwise the sheet moves on once it has travelled `positionalThreshold` (56px, the
+*   bottom sheet's; a side sheet passes half its width, as Compose's horizontal
+*   `ModalWideNavigationRail` does) towards the neighbouring anchor, and returns to where it
+*   started if not.
+*/
+function settleTarget(anchors, origin, offset, velocity, positionalThreshold = 56) {
+	if (offset === origin) return origin;
+	if (Math.abs(velocity) >= 125) return closestAnchor(anchors, offset, velocity > 0);
+	const neighbour = closestAnchor(anchors, offset, offset > origin);
+	return Math.abs(origin - offset) < Math.min(positionalThreshold, Math.abs(neighbour - origin)) ? origin : neighbour;
+}
+/**
+* A drag's velocity at release, px per second, from the samples of the last
+* {@link VELOCITY_WINDOW}ms before the last one (the release), so a slow drag that ends in a
+* flick reads as a fling and one that stops before lifting doesn't.
+*/
+function releaseVelocity(samples) {
+	const last = samples.at(-1);
+	if (!last) return 0;
+	const first = samples.find((sample) => last.time - sample.time <= 100) ?? last;
+	const elapsed = (last.time - first.time) / 1e3;
+	return elapsed > 0 ? (last.position - first.position) / elapsed : 0;
+}
+/**
+* How far a closing sheet travels, as a share of its size: 112%, so the fast spatial spring's
+* overshoot (under 10.5% of the distance) settles out of view (see `sheet-styles.ts`).
+*/
+const EXIT_DISTANCE = 1.12;
+/**
+* The transition that settles a released sheet at the speed it was let go with, as Compose's
+* `animateTo(target, velocity)`: the fast spatial spring for an exit (`closes`), the default
+* spatial spring otherwise, started with `velocity` (px per second) over `distance` (px, the
+* way still to go, same sign convention). `null` (the sheet's own transition, instant under
+* reduced motion) when reduced motion is on or there's nowhere to go. Both sheets use it.
+*/
+function releaseMotion(scheme, closes, velocity, distance) {
+	if (typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches || Math.abs(distance) < .5) return null;
+	return springWithVelocityToLinearEasing(SPRINGS[scheme].spatial[closes ? "fast" : "default"], velocity / distance);
+}
+//#endregion
+export { EXIT_DISTANCE, releaseMotion, releaseVelocity, settleTarget };
+
+//# sourceMappingURL=sheet-settle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sheet-settle.js","names":[],"sources":["../../../src/components/sheet/sheet-settle.ts"],"sourcesContent":["import { SPRINGS, type MotionScheme } from '../../tokens/motion';\nimport { springWithVelocityToLinearEasing } from '../../tokens/spring-velocity';\n\n/** Compose's `BottomSheetDefaults.PositionalThreshold` (56dp). */\nexport const POSITIONAL_THRESHOLD = 56;\n/** Compose's `BottomSheetDefaults.VelocityThreshold` (125dp per second). */\nexport const VELOCITY_THRESHOLD = 125;\n\n/** The anchor at or beyond `position` in one direction, nearest to it. */\nfunction closestAnchor(anchors: number[], position: number, searchUpwards: boolean) {\n  let best: number | undefined;\n  for (const anchor of anchors) {\n    const beyond = searchUpwards ? anchor >= position : anchor <= position;\n    if (beyond && (best === undefined || Math.abs(anchor - position) < Math.abs(best - position)))\n      best = anchor;\n  }\n  return best ?? (searchUpwards ? Math.max(...anchors) : Math.min(...anchors));\n}\n\n/**\n * Where a dragged sheet settles, ported from Compose's `AnchoredDraggableState`\n * (`computeTarget`). Offsets grow away from the open position (0 = fully open; downwards for\n * a bottom sheet, toward its edge for a side sheet); `velocity` is in px per second, positive\n * the same way.\n *\n * - A fling faster than 125px/s goes to the next anchor in its direction.\n * - Otherwise the sheet moves on once it has travelled `positionalThreshold` (56px, the\n *   bottom sheet's; a side sheet passes half its width, as Compose's horizontal\n *   `ModalWideNavigationRail` does) towards the neighbouring anchor, and returns to where it\n *   started if not.\n */\nexport function settleTarget(\n  anchors: number[],\n  origin: number,\n  offset: number,\n  velocity: number,\n  positionalThreshold: number = POSITIONAL_THRESHOLD,\n): number {\n  if (offset === origin) return origin;\n  if (Math.abs(velocity) >= VELOCITY_THRESHOLD) {\n    return closestAnchor(anchors, offset, velocity > 0);\n  }\n  const neighbour = closestAnchor(anchors, offset, offset > origin);\n  const travelled = Math.abs(origin - offset);\n  return travelled < Math.min(positionalThreshold, Math.abs(neighbour - origin))\n    ? origin\n    : neighbour;\n}\n\n/** A pointer position along a drag's axis, and when it was there (ms). */\nexport interface DragSample {\n  position: number;\n  time: number;\n}\n\n/** How far back a release velocity looks, ms (Compose's `VelocityTracker` horizon). */\nexport const VELOCITY_WINDOW = 100;\n\n/**\n * A drag's velocity at release, px per second, from the samples of the last\n * {@link VELOCITY_WINDOW}ms before the last one (the release), so a slow drag that ends in a\n * flick reads as a fling and one that stops before lifting doesn't.\n */\nexport function releaseVelocity(samples: readonly DragSample[]): number {\n  const last = samples.at(-1);\n  if (!last) return 0;\n  const first = samples.find((sample) => last.time - sample.time <= VELOCITY_WINDOW) ?? last;\n  const elapsed = (last.time - first.time) / 1000;\n  return elapsed > 0 ? (last.position - first.position) / elapsed : 0;\n}\n\n/**\n * How far a closing sheet travels, as a share of its size: 112%, so the fast spatial spring's\n * overshoot (under 10.5% of the distance) settles out of view (see `sheet-styles.ts`).\n */\nexport const EXIT_DISTANCE = 1.12;\n\n/** A settle's spring, started at the release speed, as a `linear()` easing and a duration. */\nexport interface ReleaseMotion {\n  easing: string;\n  duration: number;\n}\n\n/**\n * The transition that settles a released sheet at the speed it was let go with, as Compose's\n * `animateTo(target, velocity)`: the fast spatial spring for an exit (`closes`), the default\n * spatial spring otherwise, started with `velocity` (px per second) over `distance` (px, the\n * way still to go, same sign convention). `null` (the sheet's own transition, instant under\n * reduced motion) when reduced motion is on or there's nowhere to go. Both sheets use it.\n */\nexport function releaseMotion(\n  scheme: MotionScheme,\n  closes: boolean,\n  velocity: number,\n  distance: number,\n): ReleaseMotion | null {\n  const reduced =\n    typeof window !== 'undefined' &&\n    window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;\n  if (reduced || Math.abs(distance) < 0.5) return null;\n  return springWithVelocityToLinearEasing(\n    SPRINGS[scheme].spatial[closes ? 'fast' : 'default'],\n    velocity / distance,\n  );\n}\n"],"mappings":";;;AASA,SAAS,cAAc,SAAmB,UAAkB,eAAwB;CAClF,IAAI;CACJ,KAAK,MAAM,UAAU,SAEnB,KADe,gBAAgB,UAAU,WAAW,UAAU,cAC/C,SAAS,KAAA,KAAa,KAAK,IAAI,SAAS,QAAQ,IAAI,KAAK,IAAI,OAAO,QAAQ,IACzF,OAAO;CAEX,OAAO,SAAS,gBAAgB,KAAK,IAAI,GAAG,OAAO,IAAI,KAAK,IAAI,GAAG,OAAO;AAC5E;;;;;;;;;;;;;AAcA,SAAgB,aACd,SACA,QACA,QACA,UACA,sBAAA,IACQ;CACR,IAAI,WAAW,QAAQ,OAAO;CAC9B,IAAI,KAAK,IAAI,QAAQ,KAAA,KACnB,OAAO,cAAc,SAAS,QAAQ,WAAW,CAAC;CAEpD,MAAM,YAAY,cAAc,SAAS,QAAQ,SAAS,MAAM;CAEhE,OADkB,KAAK,IAAI,SAAS,MACrB,IAAI,KAAK,IAAI,qBAAqB,KAAK,IAAI,YAAY,MAAM,CAAC,IACzE,SACA;AACN;;;;;;AAgBA,SAAgB,gBAAgB,SAAwC;CACtE,MAAM,OAAO,QAAQ,GAAG,EAAE;CAC1B,IAAI,CAAC,MAAM,OAAO;CAClB,MAAM,QAAQ,QAAQ,MAAM,WAAW,KAAK,OAAO,OAAO,QAAA,GAAuB,KAAK;CACtF,MAAM,WAAW,KAAK,OAAO,MAAM,QAAQ;CAC3C,OAAO,UAAU,KAAK,KAAK,WAAW,MAAM,YAAY,UAAU;AACpE;;;;;AAMA,MAAa,gBAAgB;;;;;;;;AAe7B,SAAgB,cACd,QACA,QACA,UACA,UACsB;CAItB,IAFE,OAAO,WAAW,eAClB,OAAO,aAAa,kCAAkC,CAAC,CAAC,WAC3C,KAAK,IAAI,QAAQ,IAAI,IAAK,OAAO;CAChD,OAAO,iCACL,QAAQ,OAAO,CAAC,QAAQ,SAAS,SAAS,YAC1C,WAAW,QACb;AACF"}

package/dist/components/sheet/sheet-styles.d.ts

@@ -0,0 +1,312 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/sheet/sheet-styles.d.ts
+/** Variant definitions for {@link BottomSheet}. */
+export declare const bottomSheetStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    modal: {};
+    standard: {
+      container: string;
+    };
+  };
+  /** Dragging moves the sheet (`swipeable`); without it the handle is only a button. */
+  swipeable: {
+    true: {
+      handle: string;
+      content: string[];
+    };
+    false: {
+      handle: string;
+    };
+  };
+}, {
+  scrim: string[];
+  container: string[];
+  motion: string[];
+  panel: string[];
+  handle: string[];
+  handleBar: string[];
+  closeRow: string;
+  content: string;
+}, undefined, {
+  variant: {
+    modal: {};
+    standard: {
+      container: string;
+    };
+  };
+  /** Dragging moves the sheet (`swipeable`); without it the handle is only a button. */
+  swipeable: {
+    true: {
+      handle: string;
+      content: string[];
+    };
+    false: {
+      handle: string;
+    };
+  };
+}, {
+  scrim: string[];
+  container: string[];
+  motion: string[];
+  panel: string[];
+  handle: string[];
+  handleBar: string[];
+  closeRow: string;
+  content: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  variant: {
+    modal: {};
+    standard: {
+      container: string;
+    };
+  };
+  /** Dragging moves the sheet (`swipeable`); without it the handle is only a button. */
+  swipeable: {
+    true: {
+      handle: string;
+      content: string[];
+    };
+    false: {
+      handle: string;
+    };
+  };
+}, {
+  scrim: string[];
+  container: string[];
+  motion: string[];
+  panel: string[];
+  handle: string[];
+  handleBar: string[];
+  closeRow: string;
+  content: string;
+}>>;
+/**
+ * The variants of {@link bottomSheetStyles}, for building on its styles. They are the recipe's keys, not
+ * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.
+ */
+export type BottomSheetStyleProps = VariantProps<typeof bottomSheetStyles>;
+/** Variant definitions for {@link SideSheet}. */
+export declare const sideSheetStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    modal: {};
+    standard: {
+      panel: string;
+    };
+  };
+  /** The window edge the sheet sits on; `end` is the right in LTR and the left in RTL. */
+  edge: {
+    end: {
+      container: string[];
+      motion: string[];
+      standardClip: string;
+    };
+    start: {
+      container: string[];
+      motion: string[];
+      standardClip: string;
+    };
+  };
+  /**
+   * A touch or pen swipe can close the modal sheet: the browser keeps vertical scrolling
+   * and pinch zoom but never takes a horizontal pan from it (the content too, a scroller,
+   * which would give its descendants panning back).
+   */
+  swipeable: {
+    true: {
+      panel: string;
+      content: string;
+    };
+    false: {};
+  };
+  detached: {
+    true: {
+      motion: string;
+      standardFrame: string;
+      panel: string;
+    };
+    false: {};
+  };
+  /** A back button leads the header. */
+  hasBack: {
+    true: {
+      header: string;
+    };
+    false: {};
+  };
+  /** A divider separates the standard sheet from the content beside it. */
+  divider: {
+    true: {};
+    false: {};
+  };
+  /** A divider separates the bottom actions from the content. */
+  footerDivider: {
+    true: {
+      footer: string;
+    };
+    false: {};
+  };
+}, {
+  scrim: string[];
+  container: string;
+  motion: string[];
+  panel: string[];
+  header: string;
+  title: string;
+  headerActions: string;
+  content: string;
+  footer: string[];
+  standard: string[];
+  standardClip: string;
+  standardFrame: string;
+}, undefined, {
+  variant: {
+    modal: {};
+    standard: {
+      panel: string;
+    };
+  };
+  /** The window edge the sheet sits on; `end` is the right in LTR and the left in RTL. */
+  edge: {
+    end: {
+      container: string[];
+      motion: string[];
+      standardClip: string;
+    };
+    start: {
+      container: string[];
+      motion: string[];
+      standardClip: string;
+    };
+  };
+  /**
+   * A touch or pen swipe can close the modal sheet: the browser keeps vertical scrolling
+   * and pinch zoom but never takes a horizontal pan from it (the content too, a scroller,
+   * which would give its descendants panning back).
+   */
+  swipeable: {
+    true: {
+      panel: string;
+      content: string;
+    };
+    false: {};
+  };
+  detached: {
+    true: {
+      motion: string;
+      standardFrame: string;
+      panel: string;
+    };
+    false: {};
+  };
+  /** A back button leads the header. */
+  hasBack: {
+    true: {
+      header: string;
+    };
+    false: {};
+  };
+  /** A divider separates the standard sheet from the content beside it. */
+  divider: {
+    true: {};
+    false: {};
+  };
+  /** A divider separates the bottom actions from the content. */
+  footerDivider: {
+    true: {
+      footer: string;
+    };
+    false: {};
+  };
+}, {
+  scrim: string[];
+  container: string;
+  motion: string[];
+  panel: string[];
+  header: string;
+  title: string;
+  headerActions: string;
+  content: string;
+  footer: string[];
+  standard: string[];
+  standardClip: string;
+  standardFrame: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  variant: {
+    modal: {};
+    standard: {
+      panel: string;
+    };
+  };
+  /** The window edge the sheet sits on; `end` is the right in LTR and the left in RTL. */
+  edge: {
+    end: {
+      container: string[];
+      motion: string[];
+      standardClip: string;
+    };
+    start: {
+      container: string[];
+      motion: string[];
+      standardClip: string;
+    };
+  };
+  /**
+   * A touch or pen swipe can close the modal sheet: the browser keeps vertical scrolling
+   * and pinch zoom but never takes a horizontal pan from it (the content too, a scroller,
+   * which would give its descendants panning back).
+   */
+  swipeable: {
+    true: {
+      panel: string;
+      content: string;
+    };
+    false: {};
+  };
+  detached: {
+    true: {
+      motion: string;
+      standardFrame: string;
+      panel: string;
+    };
+    false: {};
+  };
+  /** A back button leads the header. */
+  hasBack: {
+    true: {
+      header: string;
+    };
+    false: {};
+  };
+  /** A divider separates the standard sheet from the content beside it. */
+  divider: {
+    true: {};
+    false: {};
+  };
+  /** A divider separates the bottom actions from the content. */
+  footerDivider: {
+    true: {
+      footer: string;
+    };
+    false: {};
+  };
+}, {
+  scrim: string[];
+  container: string;
+  motion: string[];
+  panel: string[];
+  header: string;
+  title: string;
+  headerActions: string;
+  content: string;
+  footer: string[];
+  standard: string[];
+  standardClip: string;
+  standardFrame: string;
+}>>;
+/**
+ * The variants of {@link sideSheetStyles}, for building on its styles. They are the recipe's keys, not
+ * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.
+ */
+export type SideSheetStyleProps = VariantProps<typeof sideSheetStyles>;
+//#endregion
+//# sourceMappingURL=sheet-styles.d.ts.map

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

@@ -0,0 +1,229 @@
+import { tv } from "../../utils/tv.js";
+import { reducedMotionFade } from "../../motion/reduced-motion.js";
+//#region src/components/sheet/sheet-styles.ts
+const scrim = [
+	"fixed inset-0 z-(--md-sys-z-scrim) bg-scrim/32 opacity-100",
+	"[transition-property:opacity]",
+	"[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]",
+	"[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]",
+	"starting:opacity-0 data-exiting:opacity-0"
+];
+/**
+* Shows on the default spatial spring, hides on the fast spatial spring. Exits translate
+* 112% of the sheet's size, so the spring's overshoot stays off-screen. Under reduced motion
+* the sheet fades in and out where it rests, and settling on a detent is instant; a drag
+* still follows the pointer.
+*/
+const sheetMotion = [
+	"[transition-property:translate]",
+	"[transition-duration:var(--md-sys-motion-spring-spatial-default-duration)]",
+	"[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]",
+	"data-exiting:[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)]",
+	"data-exiting:[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)]",
+	"data-dragging:[transition-duration:0s]",
+	"motion-safe:data-lowering:not-data-exiting:not-data-dragging:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)]",
+	"motion-safe:data-lowering:not-data-exiting:not-data-dragging:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]",
+	...reducedMotionFade
+];
+/**
+* The transitions that end a sheet's exit (`usePresence`): the slide, or the fade under
+* reduced motion.
+*/
+const SHEET_EXIT_PROPERTIES = ["translate", "opacity"];
+/** Variant definitions for {@link BottomSheet}. */
+const bottomSheetStyles = tv({
+	slots: {
+		scrim,
+		container: [
+			"fixed inset-x-0 bottom-0 z-(--md-sys-z-sheet) mx-auto flex w-full max-w-[640px] items-end",
+			"max-h-[calc(100dvh-72px)] min-[641px]:max-h-[calc(100dvh-56px)]",
+			"min-[641px]:max-w-[min(640px,calc(100%-112px))]",
+			"[clip-path:inset(-100vh_-100vw_0_-100vw)]"
+		],
+		motion: [
+			"flex w-full",
+			"translate-y-(--m3-sheet-offset) motion-safe:starting:translate-y-full motion-safe:data-exiting:translate-y-[112%]",
+			...sheetMotion
+		],
+		panel: [
+			"relative flex max-h-[calc(100dvh-72px)] w-full flex-col",
+			"after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-[32px] after:[background-color:inherit] after:content-['']",
+			"rounded-t-[var(--_md-comp-sheet-bottom-docked-container-shape)]",
+			"min-[641px]:max-h-[calc(100dvh-56px)]",
+			"bg-[var(--_md-comp-sheet-bottom-docked-container-color)] text-on-surface outline-none",
+			"shadow-[shadow:var(--_md-comp-sheet-bottom-docked-container-elevation)]",
+			"forced-colors:border-x forced-colors:border-t forced-colors:border-solid forced-colors:border-[CanvasText]"
+		],
+		handle: ["flex w-full shrink-0 justify-center pt-[22px] pb-[22px] outline-none", "focus-ring-inset rounded-t-[var(--_md-comp-sheet-bottom-docked-container-shape)]"],
+		handleBar: [
+			"h-[4px] w-[32px] rounded-corner-extra-large",
+			"bg-[var(--_md-comp-sheet-bottom-docked-drag-handle-color)]",
+			"forced-colors:bg-[CanvasText] forced-colors:forced-color-adjust-none"
+		],
+		closeRow: "flex shrink-0 justify-end ps-[4px] pe-[4px]",
+		content: "min-h-0 flex-1 overflow-y-auto overscroll-contain"
+	},
+	variants: {
+		variant: {
+			modal: {},
+			standard: { container: "z-(--md-sys-z-sticky)" }
+		},
+		/** Dragging moves the sheet (`swipeable`); without it the handle is only a button. */
+		swipeable: {
+			true: {
+				handle: "cursor-grab touch-none data-dragging:cursor-grabbing",
+				content: ["data-at-top:[touch-action:pan-x_pan-down_pinch-zoom]", "data-at-top:data-can-rise:[touch-action:pan-x_pinch-zoom]"]
+			},
+			false: { handle: "cursor-pointer" }
+		}
+	},
+	defaultVariants: {
+		variant: "modal",
+		swipeable: true
+	}
+});
+/** Variant definitions for {@link SideSheet}. */
+const sideSheetStyles = tv({
+	slots: {
+		scrim,
+		container: "fixed inset-y-0 z-(--md-sys-z-sheet) flex max-w-full",
+		motion: [
+			"flex min-w-0",
+			"translate-x-(--m3-side-sheet-offset)",
+			...sheetMotion
+		],
+		panel: [
+			"flex w-[256px] max-w-[400px] min-w-0 flex-col text-on-surface outline-none",
+			"bg-[var(--_md-comp-sheet-side-container-color)]",
+			"shadow-[shadow:var(--_md-comp-sheet-side-container-elevation)]"
+		],
+		header: "flex min-h-[72px] shrink-0 items-center gap-[12px] ps-[24px] pe-[12px] pt-[12px] pb-[12px]",
+		title: "min-w-0 flex-1 text-title-large font-brand text-on-surface-variant",
+		headerActions: "ms-auto flex shrink-0 items-center gap-[12px]",
+		content: "min-h-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-contain ps-[24px] pe-[24px]",
+		footer: ["flex min-h-[72px] shrink-0 flex-wrap items-center justify-start gap-[8px]", "ps-[24px] pe-[24px] pt-[16px] pb-[24px]"],
+		standard: [
+			"flex h-full w-[var(--m3-side-sheet-width,auto)] shrink-0 visible data-closed:invisible data-closed:w-0",
+			"max-w-[var(--m3-side-sheet-width,none)]",
+			"[transition-property:width,visibility]",
+			"[transition-duration:var(--md-sys-motion-spring-spatial-default-duration),var(--md-sys-motion-spring-spatial-default-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing),linear]"
+		],
+		standardClip: "flex w-full min-w-0 overflow-hidden",
+		standardFrame: "flex h-full shrink-0"
+	},
+	variants: {
+		variant: {
+			modal: {},
+			standard: { panel: "h-full shrink-0" }
+		},
+		/** The window edge the sheet sits on; `end` is the right in LTR and the left in RTL. */
+		edge: {
+			end: {
+				container: ["end-0", "[clip-path:inset(-100vh_0_-100vh_-100vw)] rtl:[clip-path:inset(-100vh_-100vw_-100vh_0)]"],
+				motion: ["motion-safe:starting:translate-x-full motion-safe:data-exiting:translate-x-[112%]", "motion-safe:rtl:starting:-translate-x-full motion-safe:rtl:data-exiting:-translate-x-[112%]"],
+				standardClip: "justify-start"
+			},
+			start: {
+				container: ["start-0", "[clip-path:inset(-100vh_-100vw_-100vh_0)] rtl:[clip-path:inset(-100vh_0_-100vh_-100vw)]"],
+				motion: ["motion-safe:starting:-translate-x-full motion-safe:data-exiting:-translate-x-[112%]", "motion-safe:rtl:starting:translate-x-full motion-safe:rtl:data-exiting:translate-x-[112%]"],
+				standardClip: "justify-end"
+			}
+		},
+		/**
+		* A touch or pen swipe can close the modal sheet: the browser keeps vertical scrolling
+		* and pinch zoom but never takes a horizontal pan from it (the content too, a scroller,
+		* which would give its descendants panning back).
+		*/
+		swipeable: {
+			true: {
+				panel: "[touch-action:pan-y_pinch-zoom]",
+				content: "[touch-action:pan-y_pinch-zoom]"
+			},
+			false: {}
+		},
+		detached: {
+			true: {
+				motion: "pt-[16px] pb-[16px]",
+				standardFrame: "pt-[16px] pb-[16px] ps-[16px] pe-[16px]",
+				panel: "rounded-[var(--_md-comp-sheet-side-container-shape)]"
+			},
+			false: {}
+		},
+		/** A back button leads the header. */
+		hasBack: {
+			true: { header: "ps-[16px]" },
+			false: {}
+		},
+		/** A divider separates the standard sheet from the content beside it. */
+		divider: {
+			true: {},
+			false: {}
+		},
+		/** A divider separates the bottom actions from the content. */
+		footerDivider: {
+			true: { footer: "border-t border-outline-variant" },
+			false: {}
+		}
+	},
+	compoundVariants: [
+		{
+			detached: true,
+			edge: "end",
+			class: { motion: "pe-[16px]" }
+		},
+		{
+			detached: true,
+			edge: "start",
+			class: { motion: "ps-[16px]" }
+		},
+		{
+			variant: "modal",
+			detached: false,
+			class: { panel: ["relative after:pointer-events-none after:absolute after:inset-y-0 after:w-[32px] after:[background-color:inherit] after:content-['']", "forced-colors:border-solid forced-colors:border-[CanvasText]"] }
+		},
+		{
+			variant: "modal",
+			detached: false,
+			edge: "end",
+			class: { panel: ["rounded-s-[var(--_md-comp-sheet-side-container-shape)] after:start-full", "forced-colors:border-s"] }
+		},
+		{
+			variant: "modal",
+			detached: false,
+			edge: "start",
+			class: { panel: ["rounded-e-[var(--_md-comp-sheet-side-container-shape)] after:end-full", "forced-colors:border-e"] }
+		},
+		{
+			detached: true,
+			class: { panel: "forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]" }
+		},
+		{
+			variant: "standard",
+			detached: false,
+			divider: true,
+			edge: "end",
+			class: { panel: "border-s border-outline-variant" }
+		},
+		{
+			variant: "standard",
+			detached: false,
+			divider: true,
+			edge: "start",
+			class: { panel: "border-e border-outline-variant" }
+		}
+	],
+	defaultVariants: {
+		variant: "modal",
+		edge: "end",
+		swipeable: false,
+		detached: false,
+		hasBack: false,
+		divider: true,
+		footerDivider: false
+	}
+});
+//#endregion
+export { SHEET_EXIT_PROPERTIES, bottomSheetStyles, sideSheetStyles };
+
+//# sourceMappingURL=sheet-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sheet-styles.js","names":[],"sources":["../../../src/components/sheet/sheet-styles.ts"],"sourcesContent":["import { reducedMotionFade } from '../../motion/reduced-motion';\nimport { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Bottom sheet values follow m3.material.io and Compose Material 3 (ModalBottomSheet.kt,\n * BottomSheetScaffold.kt, SheetDefaults.kt, SheetBottomTokens): at most 640px wide and\n * centred, with a 72px top margin (56px, and 56px side margins, above 640px), 28px top\n * corners, `surface-container-low` at level 1, a 32 × 4px `on-surface-variant` drag handle\n * with 22px above and below it, and (modal) a 32% scrim fading on the default effects\n * spring. It shows on the default spatial spring and hides on the fast spatial spring: the\n * exit moves the sheet, and position moves on spatial springs (2026-10-13). The exit\n * travels 112% of the sheet's size, so the spring's overshoot (under 10.5% of the\n * distance) settles out of view and the sheet never springs back into the window.\n *\n * Side sheets aren't in Compose; values follow m3.material.io and Material Components\n * Android (`m3_comp_sheet_side_*`): 256px wide, at most 400px; standard `surface` at level 0 with no\n * corners and an `outline-variant` divider on its content edge; modal\n * `surface-container-low` at level 1 with 16px corners on its free edge, over a 32% scrim;\n * detached sheets sit 16px from the edges with 16px corners all round. The header has 24px\n * start padding (16px with a back button) and 12px between its parts; the bottom action\n * row is at least 72px, 16px above and 24px below, start-aligned. They move on the bottom\n * sheet's springs.\n *\n * The sheets move by `translate` on a library-owned wrapper, never on the consumer's panel\n * (§10).\n *\n * The containers' colours, corners and shadows and the drag handle's colour come from the\n * sheets' component tokens (`sheet-tokens.ts`, `--md-comp-sheet-bottom-docked-*` and\n * `--md-comp-sheet-side-*`); each sheet's root carries its set's `data-tokens` and\n * `data-variant` (a detached side sheet also `data-detached`), and the parts read one private\n * variable each. A consumer class (`bg-surface-container`) still wins. Every class is written\n * out in full so Tailwind can find it.\n */\n\nconst scrim = [\n  'fixed inset-0 z-(--md-sys-z-scrim) bg-scrim/32 opacity-100',\n  '[transition-property:opacity]',\n  '[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]',\n  '[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]',\n  'starting:opacity-0 data-exiting:opacity-0',\n];\n\n/**\n * Shows on the default spatial spring, hides on the fast spatial spring. Exits translate\n * 112% of the sheet's size, so the spring's overshoot stays off-screen. Under reduced motion\n * the sheet fades in and out where it rests, and settling on a detent is instant; a drag\n * still follows the pointer.\n */\nconst sheetMotion = [\n  '[transition-property:translate]',\n  '[transition-duration:var(--md-sys-motion-spring-spatial-default-duration)]',\n  '[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]',\n  'data-exiting:[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)]',\n  'data-exiting:[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)]',\n  'data-dragging:[transition-duration:0s]',\n  // A move down to a lower detent that isn't a drag's settle (BottomSheet's state): the fast\n  // effects spring, no overshoot. Under reduced motion detent changes stay instant.\n  'motion-safe:data-lowering:not-data-exiting:not-data-dragging:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)]',\n  'motion-safe:data-lowering:not-data-exiting:not-data-dragging:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]',\n  ...reducedMotionFade,\n];\n\n/**\n * The transitions that end a sheet's exit (`usePresence`): the slide, or the fade under\n * reduced motion.\n */\nexport const SHEET_EXIT_PROPERTIES = ['translate', 'opacity'] as const;\n\n/** Variant definitions for {@link BottomSheet}. */\nexport const bottomSheetStyles = tv({\n  slots: {\n    scrim,\n    // The outermost element, which places the sheet and takes the consumer's `className` and\n    // `style`. The sheet sits at its bottom (`items-end`), so a consumer inset that stretches\n    // it (`top-24` with the library's `bottom-0`) never stretches the sheet.\n    container: [\n      'fixed inset-x-0 bottom-0 z-(--md-sys-z-sheet) mx-auto flex w-full max-w-[640px] items-end',\n      'max-h-[calc(100dvh-72px)] min-[641px]:max-h-[calc(100dvh-56px)]',\n      'min-[641px]:max-w-[min(640px,calc(100%-112px))]',\n      // Clips below its bottom edge only, where the panel's bleed hangs (see `panel`).\n      '[clip-path:inset(-100vh_-100vw_0_-100vw)]',\n    ],\n    // Library-owned layer that moves the sheet, inside the container, so the motion never\n    // animates the outermost element's `translate` (architecture §10 rule 4).\n    motion: [\n      'flex w-full',\n      'translate-y-(--m3-sheet-offset) motion-safe:starting:translate-y-full motion-safe:data-exiting:translate-y-[112%]',\n      ...sheetMotion,\n    ],\n    panel: [\n      'relative flex max-h-[calc(100dvh-72px)] w-full flex-col',\n      // A bleed in the panel's colour below its bottom edge: when the spring overshoots, the\n      // sheet lifts a few pixels off the window's edge and this fills the gap (Compose scales\n      // the sheet up for the same reason). The container clips it at rest.\n      \"after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-[32px] after:[background-color:inherit] after:content-['']\",\n      'rounded-t-[var(--_md-comp-sheet-bottom-docked-container-shape)]',\n      'min-[641px]:max-h-[calc(100dvh-56px)]',\n      'bg-[var(--_md-comp-sheet-bottom-docked-container-color)] text-on-surface outline-none',\n      'shadow-[shadow:var(--_md-comp-sheet-bottom-docked-container-elevation)]',\n      // Forced colours drop the container and the shadow: a border on the free edges.\n      'forced-colors:border-x forced-colors:border-t forced-colors:border-solid forced-colors:border-[CanvasText]',\n    ],\n    handle: [\n      'flex w-full shrink-0 justify-center pt-[22px] pb-[22px] outline-none',\n      'focus-ring-inset rounded-t-[var(--_md-comp-sheet-bottom-docked-container-shape)]',\n    ],\n    handleBar: [\n      'h-[4px] w-[32px] rounded-corner-extra-large',\n      'bg-[var(--_md-comp-sheet-bottom-docked-drag-handle-color)]',\n      'forced-colors:bg-[CanvasText] forced-colors:forced-color-adjust-none',\n    ],\n    closeRow: 'flex shrink-0 justify-end ps-[4px] pe-[4px]',\n    content: 'min-h-0 flex-1 overflow-y-auto overscroll-contain',\n  },\n  variants: {\n    variant: {\n      modal: {},\n      // Over the page without a scrim, below every overlay; the page stays usable around it.\n      standard: { container: 'z-(--md-sys-z-sticky)' },\n    },\n    /** Dragging moves the sheet (`swipeable`); without it the handle is only a button. */\n    swipeable: {\n      true: {\n        handle: 'cursor-grab touch-none data-dragging:cursor-grabbing',\n        // At its top, the content leaves downward touch moves to the sheet's drag\n        // (BottomSheet), and upward ones too while the sheet rests below its top detent\n        // (`data-can-rise`), so an upward swipe raises the sheet before the content scrolls.\n        content: [\n          'data-at-top:[touch-action:pan-x_pan-down_pinch-zoom]',\n          'data-at-top:data-can-rise:[touch-action:pan-x_pinch-zoom]',\n        ],\n      },\n      false: { handle: 'cursor-pointer' },\n    },\n  },\n  defaultVariants: { variant: 'modal', swipeable: true },\n});\n\n/**\n * The variants of {@link bottomSheetStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type BottomSheetStyleProps = VariantProps<typeof bottomSheetStyles>;\n\n/** Variant definitions for {@link SideSheet}. */\nexport const sideSheetStyles = tv({\n  slots: {\n    scrim,\n    // A modal sheet's outermost element, which places it on its `edge` and takes the\n    // consumer's `className` and `style`. It clips past that edge only, where a docked\n    // panel's bleed hangs (see `compoundVariants`).\n    container: 'fixed inset-y-0 z-(--md-sys-z-sheet) flex max-w-full',\n    // Library-owned layer that moves a modal sheet, inside the container (architecture §10\n    // rule 4); it holds a detached sheet's 16px margins, so the exit clears them. A swipe\n    // moves it by `--m3-side-sheet-offset` (physical px, set by SideSheet while dragging and\n    // settling); it enters from and leaves past the sheet's edge (`edge`).\n    motion: ['flex min-w-0', 'translate-x-(--m3-side-sheet-offset)', ...sheetMotion],\n    // 256px by default; a consumer width can't pass the spec's 400px maximum. A fixed\n    // maximum (not a percentage) also caps the wrapper's shrink-to-fit width, and `min-w-0`\n    // lets the panel shrink with the wrapper in a narrow window.\n    panel: [\n      'flex w-[256px] max-w-[400px] min-w-0 flex-col text-on-surface outline-none',\n      'bg-[var(--_md-comp-sheet-side-container-color)]',\n      'shadow-[shadow:var(--_md-comp-sheet-side-container-elevation)]',\n    ],\n    header:\n      'flex min-h-[72px] shrink-0 items-center gap-[12px] ps-[24px] pe-[12px] pt-[12px] pb-[12px]',\n    title: 'min-w-0 flex-1 text-title-large font-brand text-on-surface-variant',\n    headerActions: 'ms-auto flex shrink-0 items-center gap-[12px]',\n    // m3.material.io: \"Side sheets cannot scroll horizontally.\"\n    content:\n      'min-h-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-contain ps-[24px] pe-[24px]',\n    footer: [\n      'flex min-h-[72px] shrink-0 flex-wrap items-center justify-start gap-[8px]',\n      'ps-[24px] pe-[24px] pt-[16px] pb-[24px]',\n    ],\n    // Standard sheets sit in the layout; their width opens and closes (a measured length, so\n    // the panel stays on its edge), on the default spatial spring. The measured width is also\n    // the maximum, so the spring's overshoot never opens a strip beside the panel.\n    standard: [\n      'flex h-full w-[var(--m3-side-sheet-width,auto)] shrink-0 visible data-closed:invisible data-closed:w-0',\n      'max-w-[var(--m3-side-sheet-width,none)]',\n      '[transition-property:width,visibility]',\n      '[transition-duration:var(--md-sys-motion-spring-spatial-default-duration),var(--md-sys-motion-spring-spatial-default-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing),linear]',\n    ],\n    // The panel rides the root's inner edge (the content's side, `edge`), so as the width\n    // moves the sheet slides in and out with its edge leading, as M3's reference moves it\n    // (2026-10-24); pinned to the window's side, its far side was wiped into view first.\n    standardClip: 'flex w-full min-w-0 overflow-hidden',\n    standardFrame: 'flex h-full shrink-0',\n  },\n  variants: {\n    variant: {\n      modal: {},\n      standard: { panel: 'h-full shrink-0' },\n    },\n    /** The window edge the sheet sits on; `end` is the right in LTR and the left in RTL. */\n    edge: {\n      end: {\n        container: [\n          'end-0',\n          '[clip-path:inset(-100vh_0_-100vh_-100vw)] rtl:[clip-path:inset(-100vh_-100vw_-100vh_0)]',\n        ],\n        motion: [\n          'motion-safe:starting:translate-x-full motion-safe:data-exiting:translate-x-[112%]',\n          'motion-safe:rtl:starting:-translate-x-full motion-safe:rtl:data-exiting:-translate-x-[112%]',\n        ],\n        standardClip: 'justify-start',\n      },\n      start: {\n        container: [\n          'start-0',\n          '[clip-path:inset(-100vh_-100vw_-100vh_0)] rtl:[clip-path:inset(-100vh_0_-100vh_-100vw)]',\n        ],\n        motion: [\n          'motion-safe:starting:-translate-x-full motion-safe:data-exiting:-translate-x-[112%]',\n          'motion-safe:rtl:starting:translate-x-full motion-safe:rtl:data-exiting:translate-x-[112%]',\n        ],\n        standardClip: 'justify-end',\n      },\n    },\n    /**\n     * A touch or pen swipe can close the modal sheet: the browser keeps vertical scrolling\n     * and pinch zoom but never takes a horizontal pan from it (the content too, a scroller,\n     * which would give its descendants panning back).\n     */\n    swipeable: {\n      true: {\n        panel: '[touch-action:pan-y_pinch-zoom]',\n        content: '[touch-action:pan-y_pinch-zoom]',\n      },\n      false: {},\n    },\n    detached: {\n      true: {\n        motion: 'pt-[16px] pb-[16px]',\n        standardFrame: 'pt-[16px] pb-[16px] ps-[16px] pe-[16px]',\n        panel: 'rounded-[var(--_md-comp-sheet-side-container-shape)]',\n      },\n      false: {},\n    },\n    /** A back button leads the header. */\n    hasBack: { true: { header: 'ps-[16px]' }, false: {} },\n    /** A divider separates the standard sheet from the content beside it. */\n    divider: { true: {}, false: {} },\n    /** A divider separates the bottom actions from the content. */\n    footerDivider: { true: { footer: 'border-t border-outline-variant' }, false: {} },\n  },\n  compoundVariants: [\n    { detached: true, edge: 'end', class: { motion: 'pe-[16px]' } },\n    { detached: true, edge: 'start', class: { motion: 'ps-[16px]' } },\n    {\n      variant: 'modal',\n      detached: false,\n      class: {\n        panel: [\n          // A bleed past the anchored edge fills the gap when the spring overshoots (see the\n          // bottom sheet's panel).\n          \"relative after:pointer-events-none after:absolute after:inset-y-0 after:w-[32px] after:[background-color:inherit] after:content-['']\",\n          // Forced colours drop the container and the shadow: a border on the free edge.\n          'forced-colors:border-solid forced-colors:border-[CanvasText]',\n        ],\n      },\n    },\n    // The corners and the forced-colours border are on the free edge, the bleed on the other.\n    {\n      variant: 'modal',\n      detached: false,\n      edge: 'end',\n      class: {\n        panel: [\n          'rounded-s-[var(--_md-comp-sheet-side-container-shape)] after:start-full',\n          'forced-colors:border-s',\n        ],\n      },\n    },\n    {\n      variant: 'modal',\n      detached: false,\n      edge: 'start',\n      class: {\n        panel: [\n          'rounded-e-[var(--_md-comp-sheet-side-container-shape)] after:end-full',\n          'forced-colors:border-e',\n        ],\n      },\n    },\n    {\n      detached: true,\n      class: {\n        panel: 'forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]',\n      },\n    },\n    // The divider is on the content edge, the side away from the window's.\n    {\n      variant: 'standard',\n      detached: false,\n      divider: true,\n      edge: 'end',\n      class: { panel: 'border-s border-outline-variant' },\n    },\n    {\n      variant: 'standard',\n      detached: false,\n      divider: true,\n      edge: 'start',\n      class: { panel: 'border-e border-outline-variant' },\n    },\n  ],\n  defaultVariants: {\n    variant: 'modal',\n    edge: 'end',\n    swipeable: false,\n    detached: false,\n    hasBack: false,\n    divider: true,\n    footerDivider: false,\n  },\n});\n\n/**\n * The variants of {@link sideSheetStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type SideSheetStyleProps = VariantProps<typeof sideSheetStyles>;\n"],"mappings":"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"}

package/dist/components/sheet/sheet-tokens.d.ts

@@ -0,0 +1,12 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/sheet/sheet-tokens.d.ts
+/** The tokens of {@link BottomSheet}: `--md-comp-sheet-bottom-docked-[<variant>-]<part>`. */
+export declare const bottomSheetTokenSet: ComponentTokenSet<"container-color" | "container-shape" | "drag-handle-color">;
+/**
+ * The tokens of {@link SideSheet}: `--md-comp-sheet-side-docked-<variant>-<part>`, and
+ * `--md-comp-sheet-side-detached-container-shape` for a detached sheet.
+ */
+export declare const sideSheetTokenSet: ComponentTokenSet<never>;
+//#endregion
+//# sourceMappingURL=sheet-tokens.d.ts.map