@windmorph/react 0.0.0-stage → 0.1.1

package/dist/primitives/morph-path.js

@@ -0,0 +1,38 @@
+import { MaterialShapes } from "../shapes/material-shapes.js";
+import { Morph } from "../shapes/morph.js";
+import { morphToPath, polygonToPath } from "../shapes/path.js";
+//#region src/primitives/morph-path.ts
+const morphCache = /* @__PURE__ */ new WeakMap();
+/** The (cached) morph between two shapes. */
+function getMorph(from, to) {
+	let byEnd = morphCache.get(from);
+	if (!byEnd) morphCache.set(from, byEnd = /* @__PURE__ */ new WeakMap());
+	let morph = byEnd.get(to);
+	if (!morph) byEnd.set(to, morph = new Morph(from, to));
+	return morph;
+}
+const resolve = (shape) => typeof shape === "string" ? MaterialShapes[shape] : shape;
+/**
+* SVG path data for `shapes` at `progress`, where 0 is the first shape, 1 the second and so
+* on. Values outside `[0, n - 1]` extrapolate the first or last morph, so springs can
+* overshoot.
+*/
+function morphPathAt(shapes, progress, { size = 1, startAngle = 0 } = {}) {
+	if (shapes.length === 0) return "";
+	if (shapes.length === 1) return polygonToPath(resolve(shapes[0]), {
+		scale: size,
+		startAngle
+	});
+	const index = Math.min(Math.max(Math.floor(progress), 0), shapes.length - 2);
+	const morph = getMorph(resolve(shapes[index]), resolve(shapes[index + 1]));
+	return morphToPath(morph, progress - index, {
+		scale: size,
+		startAngle,
+		rotationPivotX: .5,
+		rotationPivotY: .5
+	});
+}
+//#endregion
+export { getMorph, morphPathAt };
+
+//# sourceMappingURL=morph-path.js.map

package/dist/primitives/morph-path.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"morph-path.js","names":[],"sources":["../../src/primitives/morph-path.ts"],"sourcesContent":["import { MaterialShapes, type MaterialShapeName } from '../shapes/material-shapes';\nimport { Morph } from '../shapes/morph';\nimport { morphToPath, polygonToPath } from '../shapes/path';\nimport type { RoundedPolygon } from '../shapes/rounded-polygon';\n\nexport type MorphShape = RoundedPolygon | MaterialShapeName;\n\nexport interface M3MorphOptions {\n  /**\n   * Scales the unit-square shapes, e.g. to the SVG `viewBox` size. Default 1. Mid-morph\n   * control points can poke up to ~1% outside the square, so give the `<svg>`\n   * `overflow=\"visible\"` or a little padding.\n   */\n  size?: number;\n  /** Rotates each frame so its first point sits at this angle (degrees). Default 0. */\n  startAngle?: number;\n}\n\n// Matching is the expensive part of a morph, so pairs are shared across components.\nconst morphCache = new WeakMap<RoundedPolygon, WeakMap<RoundedPolygon, Morph>>();\n\n/** The (cached) morph between two shapes. */\nexport function getMorph(from: RoundedPolygon, to: RoundedPolygon): Morph {\n  let byEnd = morphCache.get(from);\n  if (!byEnd) morphCache.set(from, (byEnd = new WeakMap()));\n  let morph = byEnd.get(to);\n  if (!morph) byEnd.set(to, (morph = new Morph(from, to)));\n  return morph;\n}\n\nconst resolve = (shape: MorphShape) => (typeof shape === 'string' ? MaterialShapes[shape] : shape);\n\n/**\n * SVG path data for `shapes` at `progress`, where 0 is the first shape, 1 the second and so\n * on. Values outside `[0, n - 1]` extrapolate the first or last morph, so springs can\n * overshoot.\n */\nexport function morphPathAt(\n  shapes: readonly MorphShape[],\n  progress: number,\n  { size = 1, startAngle = 0 }: M3MorphOptions = {},\n): string {\n  if (shapes.length === 0) return '';\n  if (shapes.length === 1) return polygonToPath(resolve(shapes[0]!), { scale: size, startAngle });\n  const index = Math.min(Math.max(Math.floor(progress), 0), shapes.length - 2);\n  const morph = getMorph(resolve(shapes[index]!), resolve(shapes[index + 1]!));\n  // Rotation pivots in shape space, before scaling; normalized shapes center on (0.5, 0.5).\n  return morphToPath(morph, progress - index, {\n    scale: size,\n    startAngle,\n    rotationPivotX: 0.5,\n    rotationPivotY: 0.5,\n  });\n}\n"],"mappings":";;;;AAmBA,MAAM,6BAAa,IAAI,QAAwD;;AAG/E,SAAgB,SAAS,MAAsB,IAA2B;CACxE,IAAI,QAAQ,WAAW,IAAI,IAAI;CAC/B,IAAI,CAAC,OAAO,WAAW,IAAI,MAAO,wBAAQ,IAAI,QAAQ,CAAE;CACxD,IAAI,QAAQ,MAAM,IAAI,EAAE;CACxB,IAAI,CAAC,OAAO,MAAM,IAAI,IAAK,QAAQ,IAAI,MAAM,MAAM,EAAE,CAAE;CACvD,OAAO;AACT;AAEA,MAAM,WAAW,UAAuB,OAAO,UAAU,WAAW,eAAe,SAAS;;;;;;AAO5F,SAAgB,YACd,QACA,UACA,EAAE,OAAO,GAAG,aAAa,MAAsB,CAAC,GACxC;CACR,IAAI,OAAO,WAAW,GAAG,OAAO;CAChC,IAAI,OAAO,WAAW,GAAG,OAAO,cAAc,QAAQ,OAAO,EAAG,GAAG;EAAE,OAAO;EAAM;CAAW,CAAC;CAC9F,MAAM,QAAQ,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM,QAAQ,GAAG,CAAC,GAAG,OAAO,SAAS,CAAC;CAC3E,MAAM,QAAQ,SAAS,QAAQ,OAAO,MAAO,GAAG,QAAQ,OAAO,QAAQ,EAAG,CAAC;CAE3E,OAAO,YAAY,OAAO,WAAW,OAAO;EAC1C,OAAO;EACP;EACA,gBAAgB;EAChB,gBAAgB;CAClB,CAAC;AACH"}

package/dist/primitives/selection-control-styles.d.ts

@@ -0,0 +1,54 @@
+//#region src/primitives/selection-control-styles.d.ts
+/**
+ * Shared anatomy of checkboxes, radio buttons and switches: a root `<label>`, the
+ * control (focus ring, touch target; for `kind: 'circle'` also the 40px round state
+ * layer, which web density shrinks) and the label text. State layers
+ * follow the M3 spec: on-surface when unselected, primary when selected, inverted while
+ * pressed, error when invalid. Recipes `extend` this and style their own indicator with
+ * `group-data-*\/control:` variants. Every class is written out in full.
+ */
+export declare const selectionControlStyles: import("tailwind-variants").TVReturnType<{
+  kind: {
+    circle: {
+      control: string[];
+    };
+    track: {
+      control: string;
+      label: string;
+    };
+  };
+}, {
+  root: string[];
+  control: string;
+  label: string;
+}, undefined, {
+  kind: {
+    circle: {
+      control: string[];
+    };
+    track: {
+      control: string;
+      label: string;
+    };
+  };
+}, {
+  root: string[];
+  control: string;
+  label: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  kind: {
+    circle: {
+      control: string[];
+    };
+    track: {
+      control: string;
+      label: string;
+    };
+  };
+}, {
+  root: string[];
+  control: string;
+  label: string;
+}>>;
+//#endregion
+//# sourceMappingURL=selection-control-styles.d.ts.map

package/dist/primitives/selection-control-styles.js

@@ -0,0 +1,44 @@
+import { tv } from "../utils/tv.js";
+//#region src/primitives/selection-control-styles.ts
+/**
+* Shared anatomy of checkboxes, radio buttons and switches: a root `<label>`, the
+* control (focus ring, touch target; for `kind: 'circle'` also the 40px round state
+* layer, which web density shrinks) and the label text. State layers
+* follow the M3 spec: on-surface when unselected, primary when selected, inverted while
+* pressed, error when invalid. Recipes `extend` this and style their own indicator with
+* `group-data-*\/control:` variants. Every class is written out in full.
+*/
+const selectionControlStyles = tv({
+	slots: {
+		root: [
+			"group/control inline-flex cursor-pointer items-center align-middle select-none",
+			"text-body-large text-on-surface",
+			"data-disabled:cursor-default data-disabled:text-on-surface/38"
+		],
+		control: "relative inline-flex shrink-0 items-center justify-center focus-ring",
+		label: "min-w-0 pe-[8px]"
+	},
+	variants: { kind: {
+		circle: { control: [
+			"size-[calc(40px+var(--md-sys-density,0)*4px)] rounded-full state-layer",
+			"[--m3-ripple-size:calc(20px+var(--md-sys-density,0)*2px)] [--m3-ripple-start:calc(12px+var(--md-sys-density,0)*1.2px)]",
+			"[--m3-state-layer-color:var(--md-sys-color-on-surface)]",
+			"data-checked:[--m3-state-layer-color:var(--md-sys-color-primary)] data-indeterminate:[--m3-state-layer-color:var(--md-sys-color-primary)]",
+			"data-pressed:[--m3-state-layer-color:var(--md-sys-color-primary)]",
+			"data-checked:data-pressed:[--m3-state-layer-color:var(--md-sys-color-on-surface)] data-indeterminate:data-pressed:[--m3-state-layer-color:var(--md-sys-color-on-surface)]",
+			"data-invalid:[--m3-state-layer-color:var(--md-sys-color-error)]",
+			"data-invalid:data-checked:[--m3-state-layer-color:var(--md-sys-color-error)] data-invalid:data-indeterminate:[--m3-state-layer-color:var(--md-sys-color-error)]",
+			"data-invalid:data-pressed:[--m3-state-layer-color:var(--md-sys-color-error)]",
+			"data-invalid:data-checked:data-pressed:[--m3-state-layer-color:var(--md-sys-color-error)] data-invalid:data-indeterminate:data-pressed:[--m3-state-layer-color:var(--md-sys-color-error)]"
+		] },
+		track: {
+			control: "rounded-full",
+			label: "ps-[12px]"
+		}
+	} },
+	defaultVariants: { kind: "circle" }
+});
+//#endregion
+export { selectionControlStyles };
+
+//# sourceMappingURL=selection-control-styles.js.map

package/dist/primitives/selection-control-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-control-styles.js","names":[],"sources":["../../src/primitives/selection-control-styles.ts"],"sourcesContent":["import { tv } from '../utils/tv';\n\n/**\n * Shared anatomy of checkboxes, radio buttons and switches: a root `<label>`, the\n * control (focus ring, touch target; for `kind: 'circle'` also the 40px round state\n * layer, which web density shrinks) and the label text. State layers\n * follow the M3 spec: on-surface when unselected, primary when selected, inverted while\n * pressed, error when invalid. Recipes `extend` this and style their own indicator with\n * `group-data-*\\/control:` variants. Every class is written out in full.\n */\nexport const selectionControlStyles = tv({\n  slots: {\n    root: [\n      'group/control inline-flex cursor-pointer items-center align-middle select-none',\n      'text-body-large text-on-surface',\n      'data-disabled:cursor-default data-disabled:text-on-surface/38',\n    ],\n    // Library-owned inner wrapper holding the indicator, focus ring and touch target.\n    control: 'relative inline-flex shrink-0 items-center justify-center focus-ring',\n    label: 'min-w-0 pe-[8px]',\n  },\n  variants: {\n    kind: {\n      // Checkboxes and radio buttons: the control is the 40px state-layer circle, 4px less per\n      // density step (40 → 36 → 32 → 28px, Material Components Web's checkbox and radio\n      // density); the ripple keeps its proportions (half the size, from 30%).\n      circle: {\n        control: [\n          'size-[calc(40px+var(--md-sys-density,0)*4px)] rounded-full state-layer',\n          '[--m3-ripple-size:calc(20px+var(--md-sys-density,0)*2px)] [--m3-ripple-start:calc(12px+var(--md-sys-density,0)*1.2px)]',\n          '[--m3-state-layer-color:var(--md-sys-color-on-surface)]',\n          'data-checked:[--m3-state-layer-color:var(--md-sys-color-primary)] data-indeterminate:[--m3-state-layer-color:var(--md-sys-color-primary)]',\n          'data-pressed:[--m3-state-layer-color:var(--md-sys-color-primary)]',\n          'data-checked:data-pressed:[--m3-state-layer-color:var(--md-sys-color-on-surface)] data-indeterminate:data-pressed:[--m3-state-layer-color:var(--md-sys-color-on-surface)]',\n          // Invalid wins in every state (stacked, so it never depends on CSS order): the\n          // state layer is `error` selected or not, pressed or not (md.comp.checkbox.error.*).\n          'data-invalid:[--m3-state-layer-color:var(--md-sys-color-error)]',\n          'data-invalid:data-checked:[--m3-state-layer-color:var(--md-sys-color-error)] data-invalid:data-indeterminate:[--m3-state-layer-color:var(--md-sys-color-error)]',\n          'data-invalid:data-pressed:[--m3-state-layer-color:var(--md-sys-color-error)]',\n          'data-invalid:data-checked:data-pressed:[--m3-state-layer-color:var(--md-sys-color-error)] data-invalid:data-indeterminate:data-pressed:[--m3-state-layer-color:var(--md-sys-color-error)]',\n        ],\n      },\n      // Switches: the control is the track; the recipe adds a state layer that follows the thumb.\n      track: { control: 'rounded-full', label: 'ps-[12px]' },\n    },\n  },\n  defaultVariants: { kind: 'circle' },\n});\n"],"mappings":";;;;;;;;;;AAUA,MAAa,yBAAyB,GAAG;CACvC,OAAO;EACL,MAAM;GACJ;GACA;GACA;EACF;EAEA,SAAS;EACT,OAAO;CACT;CACA,UAAU,EACR,MAAM;EAIJ,QAAQ,EACN,SAAS;GACP;GACA;GACA;GACA;GACA;GACA;GAGA;GACA;GACA;GACA;EACF,EACF;EAEA,OAAO;GAAE,SAAS;GAAgB,OAAO;EAAY;CACvD,EACF;CACA,iBAAiB,EAAE,MAAM,SAAS;AACpC,CAAC"}

package/dist/primitives/use-m3-interaction.d.ts

@@ -0,0 +1,51 @@
+import { DOMAttributes, RefObject } from "react";
+import { PressEvents } from "react-aria";
+//#region src/primitives/use-m3-interaction.d.ts
+export interface M3InteractionOptions extends PressEvents {
+  isDisabled?: boolean;
+  isSelected?: boolean;
+  isDragged?: boolean;
+  /**
+   * Pressed state from another React Aria hook (e.g. `useButton`). When provided,
+   * this hook does not attach its own press handling.
+   */
+  isPressed?: boolean;
+  /** Treat focus inside the element as focus on the element (e.g. text fields). */
+  within?: boolean;
+  /** Whether the element is a text input; focus is then always visible. */
+  isTextInput?: boolean;
+  autoFocus?: boolean;
+}
+export interface M3InteractionState {
+  isHovered: boolean;
+  isPressed: boolean;
+  isFocused: boolean;
+  isFocusVisible: boolean;
+}
+/** `data-*` attributes read by the `state-layer` and `focus-ring` utilities. */
+export interface M3InteractionDataAttributes {
+  'data-hovered'?: true;
+  'data-pressed'?: true;
+  /** The ripple is showing: from press start until release, but at least 225ms. */
+  'data-rippling'?: true;
+  'data-focused'?: true;
+  'data-focus-visible'?: true;
+  'data-disabled'?: true;
+  'data-selected'?: true;
+  'data-dragged'?: true;
+}
+export interface M3InteractionResult {
+  /** Event handlers to spread on the interactive element. */
+  interactionProps: DOMAttributes<HTMLElement>;
+  dataAttributes: M3InteractionDataAttributes;
+  state: M3InteractionState;
+}
+/**
+ * M3 interaction states for any element: hover, press, focus-visible, selected,
+ * dragged and disabled, exposed as `data-*` attributes, plus the ripple origin.
+ * Pair with the `state-layer` and `focus-ring` utilities, which paint the state
+ * layer and ripple as background layers on the element itself (no child nodes).
+ */
+export declare function useM3Interaction(options: M3InteractionOptions, ref: RefObject<HTMLElement | null>): M3InteractionResult;
+//#endregion
+//# sourceMappingURL=use-m3-interaction.d.ts.map

package/dist/primitives/use-m3-interaction.js

@@ -0,0 +1,149 @@
+"use client";
+import { useEffect, useState } from "react";
+import { mergeProps, useFocusRing, useHover, usePress } from "react-aria";
+//#region src/primitives/use-m3-interaction.ts
+const flag = (value) => value ? true : void 0;
+/** The ripple's animated properties, pinned at the start of a new ripple. */
+const RIPPLE_START = {
+	"--m3-ripple-opacity": "0",
+	"--m3-ripple-radius": "var(--m3-ripple-start, 0px)",
+	"--m3-ripple-x": "var(--m3-ripple-origin-x, 50%)",
+	"--m3-ripple-y": "var(--m3-ripple-origin-y, 50%)"
+};
+/**
+* Starts a fresh ripple on `element`, as Compose does for every press, even while the last
+* one is still growing or fading. The ripple's animated properties are pinned to their start
+* values with their transitions off and flushed to style, then released: they transition
+* from this press's start to whatever the state layer's rules say (growing if
+* `data-rippling` is on, or once it turns on). Only the ripple's transitions are switched
+* off: the component's own (`--m3-transition-property`, such as a running corner morph) keep
+* running, so a quick second press doesn't make the corners jump.
+*/
+function restartRipple(element) {
+	const { style } = element;
+	const transitionProperty = style.transitionProperty;
+	style.transitionProperty = "var(--m3-transition-property, --m3-none)";
+	for (const [name, value] of Object.entries(RIPPLE_START)) style.setProperty(name, value);
+	getComputedStyle(element).getPropertyValue("--m3-ripple-x");
+	for (const name of Object.keys(RIPPLE_START)) style.removeProperty(name);
+	style.transitionProperty = transitionProperty;
+}
+/**
+* Positions a new ripple at the press point (Compose `RippleAnimation`): it grows from 30%
+* of the element's longer side to half its diagonal plus 10px while its centre moves to the
+* middle. Without a point (a key press) it starts in the middle. For a state layer on a
+* child of the pressed element (a navigation item's pill), pass that child.
+*/
+function setRippleOrigin(element, clientX, clientY) {
+	const rect = element.getBoundingClientRect();
+	const x = clientX === void 0 ? rect.width / 2 : clientX - rect.left;
+	const y = clientY === void 0 ? rect.height / 2 : clientY - rect.top;
+	const { style } = element;
+	style.setProperty("--m3-ripple-origin-x", `${x}px`);
+	style.setProperty("--m3-ripple-origin-y", `${y}px`);
+	style.setProperty("--m3-ripple-center-x", `${rect.width / 2}px`);
+	style.setProperty("--m3-ripple-center-y", `${rect.height / 2}px`);
+	style.setProperty("--m3-ripple-start", `${Math.max(rect.width, rect.height) * .3}px`);
+	style.setProperty("--m3-ripple-size", `${Math.ceil(Math.hypot(rect.width, rect.height) / 2 + 10)}px`);
+	restartRipple(element);
+}
+/**
+* Flags a press that starts while the element's corner morph is still running
+* (`data-rapid-press`). M3's buttons note that the web can use "a modified motion curve to
+* avoid resonant effects from overlapping animations": the `container-motion` utility then
+* morphs on the fast effects spring, which doesn't overshoot, instead of the fast spatial
+* one. The attribute is set on the element directly, before React renders the press, so
+* the morph that press starts already uses the modified curve. Call it before anything
+* that resets the element's transitions (such as `restartRipple`).
+*/
+function markRapidPress(element) {
+	const morphing = typeof element.getAnimations === "function" && element.getAnimations().some((animation) => animation instanceof CSSTransition && animation.transitionProperty.endsWith("radius") && animation.playState === "running");
+	element.toggleAttribute("data-rapid-press", morphing);
+}
+/**
+* Whether a ripple should be showing. Compose always finishes a ripple's 225ms growth
+* before fading it out, so a quick tap still reaches the edges: this stays true from press
+* start until release, but for at least 225ms.
+*/
+function useRippleHold(isPressed) {
+	const [wasPressed, setWasPressed] = useState(isPressed);
+	const [held, setHeld] = useState(false);
+	const [presses, setPresses] = useState(0);
+	if (isPressed !== wasPressed) {
+		setWasPressed(isPressed);
+		if (isPressed) {
+			setHeld(true);
+			setPresses((n) => n + 1);
+		}
+	}
+	useEffect(() => {
+		if (!held) return;
+		const timer = setTimeout(() => setHeld(false), 225);
+		return () => clearTimeout(timer);
+	}, [held, presses]);
+	return isPressed || held;
+}
+/**
+* M3 interaction states for any element: hover, press, focus-visible, selected,
+* dragged and disabled, exposed as `data-*` attributes, plus the ripple origin.
+* Pair with the `state-layer` and `focus-ring` utilities, which paint the state
+* layer and ripple as background layers on the element itself (no child nodes).
+*/
+function useM3Interaction(options, ref) {
+	const { isDisabled, isSelected, isDragged, within, isTextInput, autoFocus, onPress, onPressStart, onPressEnd, onPressChange, onPressUp, onClick } = options;
+	const hasExternalPress = options.isPressed !== void 0;
+	const { pressProps, isPressed: isOwnPressed } = usePress({
+		onPress,
+		onPressStart,
+		onPressEnd,
+		onPressChange,
+		onPressUp,
+		onClick,
+		ref,
+		isDisabled: isDisabled || hasExternalPress
+	});
+	const { hoverProps, isHovered } = useHover({ isDisabled });
+	const { focusProps, isFocused, isFocusVisible } = useFocusRing({
+		within,
+		isTextInput,
+		autoFocus
+	});
+	const isPressed = hasExternalPress ? Boolean(options.isPressed) : isOwnPressed;
+	const isRippling = useRippleHold(isPressed && !isDisabled);
+	return {
+		interactionProps: mergeProps(hasExternalPress ? {} : pressProps, hoverProps, focusProps, {
+			onPointerDown: (event) => {
+				if (!isDisabled && event.button === 0) {
+					markRapidPress(event.currentTarget);
+					setRippleOrigin(event.currentTarget, event.clientX, event.clientY);
+				}
+			},
+			onKeyDown: (event) => {
+				if (!isDisabled && (event.key === "Enter" || event.key === " ")) {
+					markRapidPress(event.currentTarget);
+					setRippleOrigin(event.currentTarget);
+				}
+			}
+		}),
+		dataAttributes: {
+			"data-hovered": flag(isHovered && !isDisabled),
+			"data-pressed": flag(isPressed && !isDisabled),
+			"data-rippling": flag(isRippling),
+			"data-focused": flag(isFocused),
+			"data-focus-visible": flag(isFocusVisible),
+			"data-disabled": flag(isDisabled),
+			"data-selected": flag(isSelected),
+			"data-dragged": flag(isDragged)
+		},
+		state: {
+			isHovered,
+			isPressed,
+			isFocused,
+			isFocusVisible
+		}
+	};
+}
+//#endregion
+export { markRapidPress, restartRipple, setRippleOrigin, useM3Interaction, useRippleHold };
+
+//# sourceMappingURL=use-m3-interaction.js.map

package/dist/primitives/use-m3-interaction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-m3-interaction.js","names":[],"sources":["../../src/primitives/use-m3-interaction.ts"],"sourcesContent":["'use client';\n\nimport { mergeProps, useFocusRing, useHover, usePress, type PressEvents } from 'react-aria';\nimport {\n  useEffect,\n  useState,\n  type DOMAttributes,\n  type KeyboardEvent,\n  type PointerEvent,\n  type RefObject,\n} from 'react';\n\nexport interface M3InteractionOptions extends PressEvents {\n  isDisabled?: boolean;\n  isSelected?: boolean;\n  isDragged?: boolean;\n  /**\n   * Pressed state from another React Aria hook (e.g. `useButton`). When provided,\n   * this hook does not attach its own press handling.\n   */\n  isPressed?: boolean;\n  /** Treat focus inside the element as focus on the element (e.g. text fields). */\n  within?: boolean;\n  /** Whether the element is a text input; focus is then always visible. */\n  isTextInput?: boolean;\n  autoFocus?: boolean;\n}\n\nexport interface M3InteractionState {\n  isHovered: boolean;\n  isPressed: boolean;\n  isFocused: boolean;\n  isFocusVisible: boolean;\n}\n\n/** `data-*` attributes read by the `state-layer` and `focus-ring` utilities. */\nexport interface M3InteractionDataAttributes {\n  'data-hovered'?: true;\n  'data-pressed'?: true;\n  /** The ripple is showing: from press start until release, but at least 225ms. */\n  'data-rippling'?: true;\n  'data-focused'?: true;\n  'data-focus-visible'?: true;\n  'data-disabled'?: true;\n  'data-selected'?: true;\n  'data-dragged'?: true;\n}\n\nexport interface M3InteractionResult {\n  /** Event handlers to spread on the interactive element. */\n  interactionProps: DOMAttributes<HTMLElement>;\n  dataAttributes: M3InteractionDataAttributes;\n  state: M3InteractionState;\n}\n\nconst flag = (value: boolean | undefined): true | undefined => (value ? true : undefined);\n\n/** Compose `RippleAnimation`: the radius grows (and the centre travels) over 225ms. */\nexport const RIPPLE_GROW_MS = 225;\n\n/** The ripple's animated properties, pinned at the start of a new ripple. */\nconst RIPPLE_START = {\n  '--m3-ripple-opacity': '0',\n  '--m3-ripple-radius': 'var(--m3-ripple-start, 0px)',\n  '--m3-ripple-x': 'var(--m3-ripple-origin-x, 50%)',\n  '--m3-ripple-y': 'var(--m3-ripple-origin-y, 50%)',\n} as const;\n\n/**\n * Starts a fresh ripple on `element`, as Compose does for every press, even while the last\n * one is still growing or fading. The ripple's animated properties are pinned to their start\n * values with their transitions off and flushed to style, then released: they transition\n * from this press's start to whatever the state layer's rules say (growing if\n * `data-rippling` is on, or once it turns on). Only the ripple's transitions are switched\n * off: the component's own (`--m3-transition-property`, such as a running corner morph) keep\n * running, so a quick second press doesn't make the corners jump.\n */\nexport function restartRipple(element: HTMLElement) {\n  const { style } = element;\n  const transitionProperty = style.transitionProperty;\n  style.transitionProperty = 'var(--m3-transition-property, --m3-none)';\n  for (const [name, value] of Object.entries(RIPPLE_START)) style.setProperty(name, value);\n  getComputedStyle(element).getPropertyValue('--m3-ripple-x');\n  for (const name of Object.keys(RIPPLE_START)) style.removeProperty(name);\n  style.transitionProperty = transitionProperty;\n}\n\n/**\n * Positions a new ripple at the press point (Compose `RippleAnimation`): it grows from 30%\n * of the element's longer side to half its diagonal plus 10px while its centre moves to the\n * middle. Without a point (a key press) it starts in the middle. For a state layer on a\n * child of the pressed element (a navigation item's pill), pass that child.\n */\nexport function setRippleOrigin(element: HTMLElement, clientX?: number, clientY?: number) {\n  const rect = element.getBoundingClientRect();\n  const x = clientX === undefined ? rect.width / 2 : clientX - rect.left;\n  const y = clientY === undefined ? rect.height / 2 : clientY - rect.top;\n  const { style } = element;\n  style.setProperty('--m3-ripple-origin-x', `${x}px`);\n  style.setProperty('--m3-ripple-origin-y', `${y}px`);\n  style.setProperty('--m3-ripple-center-x', `${rect.width / 2}px`);\n  style.setProperty('--m3-ripple-center-y', `${rect.height / 2}px`);\n  style.setProperty('--m3-ripple-start', `${Math.max(rect.width, rect.height) * 0.3}px`);\n  style.setProperty(\n    '--m3-ripple-size',\n    `${Math.ceil(Math.hypot(rect.width, rect.height) / 2 + 10)}px`,\n  );\n  restartRipple(element);\n}\n\n/**\n * Flags a press that starts while the element's corner morph is still running\n * (`data-rapid-press`). M3's buttons note that the web can use \"a modified motion curve to\n * avoid resonant effects from overlapping animations\": the `container-motion` utility then\n * morphs on the fast effects spring, which doesn't overshoot, instead of the fast spatial\n * one. The attribute is set on the element directly, before React renders the press, so\n * the morph that press starts already uses the modified curve. Call it before anything\n * that resets the element's transitions (such as `restartRipple`).\n */\nexport function markRapidPress(element: HTMLElement) {\n  const morphing =\n    typeof element.getAnimations === 'function' &&\n    element\n      .getAnimations()\n      .some(\n        (animation) =>\n          animation instanceof CSSTransition &&\n          animation.transitionProperty.endsWith('radius') &&\n          animation.playState === 'running',\n      );\n  element.toggleAttribute('data-rapid-press', morphing);\n}\n\n/**\n * Whether a ripple should be showing. Compose always finishes a ripple's 225ms growth\n * before fading it out, so a quick tap still reaches the edges: this stays true from press\n * start until release, but for at least 225ms.\n */\nexport function useRippleHold(isPressed: boolean): boolean {\n  const [wasPressed, setWasPressed] = useState(isPressed);\n  const [held, setHeld] = useState(false);\n  const [presses, setPresses] = useState(0);\n  // Adjust state while rendering when a press starts (no effect, no extra paint).\n  if (isPressed !== wasPressed) {\n    setWasPressed(isPressed);\n    if (isPressed) {\n      setHeld(true);\n      setPresses((n) => n + 1);\n    }\n  }\n  useEffect(() => {\n    if (!held) return;\n    const timer = setTimeout(() => setHeld(false), RIPPLE_GROW_MS);\n    return () => clearTimeout(timer);\n  }, [held, presses]);\n  return isPressed || held;\n}\n\n/**\n * M3 interaction states for any element: hover, press, focus-visible, selected,\n * dragged and disabled, exposed as `data-*` attributes, plus the ripple origin.\n * Pair with the `state-layer` and `focus-ring` utilities, which paint the state\n * layer and ripple as background layers on the element itself (no child nodes).\n */\nexport function useM3Interaction(\n  options: M3InteractionOptions,\n  ref: RefObject<HTMLElement | null>,\n): M3InteractionResult {\n  const {\n    isDisabled,\n    isSelected,\n    isDragged,\n    within,\n    isTextInput,\n    autoFocus,\n    onPress,\n    onPressStart,\n    onPressEnd,\n    onPressChange,\n    onPressUp,\n    onClick,\n  } = options;\n  const hasExternalPress = options.isPressed !== undefined;\n\n  // Only `usePress`'s own options: it spreads any others onto the props it returns, so this\n  // hook's options (`isDragged`, `within` …) would reach the DOM as unknown attributes.\n  const { pressProps, isPressed: isOwnPressed } = usePress({\n    onPress,\n    onPressStart,\n    onPressEnd,\n    onPressChange,\n    onPressUp,\n    onClick,\n    ref,\n    isDisabled: isDisabled || hasExternalPress,\n  });\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  const { focusProps, isFocused, isFocusVisible } = useFocusRing({\n    within,\n    isTextInput,\n    autoFocus,\n  });\n\n  const isPressed = hasExternalPress ? Boolean(options.isPressed) : isOwnPressed;\n  const isRippling = useRippleHold(isPressed && !isDisabled);\n\n  const rippleProps: DOMAttributes<HTMLElement> = {\n    onPointerDown: (event: PointerEvent<HTMLElement>) => {\n      if (!isDisabled && event.button === 0) {\n        markRapidPress(event.currentTarget);\n        setRippleOrigin(event.currentTarget, event.clientX, event.clientY);\n      }\n    },\n    onKeyDown: (event: KeyboardEvent<HTMLElement>) => {\n      if (!isDisabled && (event.key === 'Enter' || event.key === ' ')) {\n        markRapidPress(event.currentTarget);\n        setRippleOrigin(event.currentTarget);\n      }\n    },\n  };\n\n  return {\n    interactionProps: mergeProps(\n      hasExternalPress ? {} : pressProps,\n      hoverProps,\n      focusProps,\n      rippleProps,\n    ),\n    dataAttributes: {\n      'data-hovered': flag(isHovered && !isDisabled),\n      'data-pressed': flag(isPressed && !isDisabled),\n      'data-rippling': flag(isRippling),\n      'data-focused': flag(isFocused),\n      'data-focus-visible': flag(isFocusVisible),\n      'data-disabled': flag(isDisabled),\n      'data-selected': flag(isSelected),\n      'data-dragged': flag(isDragged),\n    },\n    state: { isHovered, isPressed, isFocused, isFocusVisible },\n  };\n}\n"],"mappings":"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"}

package/dist/primitives/use-m3-morph.d.ts

@@ -0,0 +1,18 @@
+import { M3MorphOptions, MorphShape } from "./morph-path.js";
+import { MotionValue } from "motion/react";
+//#region src/primitives/use-m3-morph.d.ts
+/**
+ * Morphs through Material shapes with a Motion value, for an `m.path`'s `d`. Shapes are the
+ * 35 `MaterialShapes` (by name) or any normalized `RoundedPolygon`; corners are matched
+ * between consecutive shapes as in Compose.
+ *
+ * Reduced motion is the caller's call: snap `progress` instead of springing it.
+ *
+ * @example
+ * const progress = useSpring(0, useM3Spring('spatial'));
+ * const d = useM3Morph(['Circle', 'Cookie9Sided'], progress, { size: 48 });
+ * <svg viewBox="0 0 48 48"><m.path d={d} /></svg>
+ */
+export declare function useM3Morph(shapes: readonly MorphShape[], progress: MotionValue<number>, options?: M3MorphOptions): MotionValue<string>;
+//#endregion
+//# sourceMappingURL=use-m3-morph.d.ts.map

package/dist/primitives/use-m3-morph.js

@@ -0,0 +1,36 @@
+"use client";
+import { morphPathAt } from "./morph-path.js";
+import { useLayoutEffect, useRef } from "react";
+import { useTransform } from "motion/react";
+//#region src/primitives/use-m3-morph.ts
+/**
+* Morphs through Material shapes with a Motion value, for an `m.path`'s `d`. Shapes are the
+* 35 `MaterialShapes` (by name) or any normalized `RoundedPolygon`; corners are matched
+* between consecutive shapes as in Compose.
+*
+* Reduced motion is the caller's call: snap `progress` instead of springing it.
+*
+* @example
+* const progress = useSpring(0, useM3Spring('spatial'));
+* const d = useM3Morph(['Circle', 'Cookie9Sided'], progress, { size: 48 });
+* <svg viewBox="0 0 48 48"><m.path d={d} /></svg>
+*/
+function useM3Morph(shapes, progress, options = {}) {
+	const { size = 1, startAngle = 0 } = options;
+	const compute = (p) => morphPathAt(shapes, p, {
+		size,
+		startAngle
+	});
+	const computeRef = useRef(compute);
+	const d = useTransform(progress, (p) => computeRef.current(p));
+	useLayoutEffect(() => {
+		computeRef.current = compute;
+		const next = compute(progress.get());
+		if (next !== d.get()) d.set(next);
+	});
+	return d;
+}
+//#endregion
+export { useM3Morph };
+
+//# sourceMappingURL=use-m3-morph.js.map

package/dist/primitives/use-m3-morph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-m3-morph.js","names":[],"sources":["../../src/primitives/use-m3-morph.ts"],"sourcesContent":["'use client';\n\nimport { useTransform, type MotionValue } from 'motion/react';\nimport { useLayoutEffect, useRef } from 'react';\nimport { morphPathAt, type M3MorphOptions, type MorphShape } from './morph-path';\n\n/**\n * Morphs through Material shapes with a Motion value, for an `m.path`'s `d`. Shapes are the\n * 35 `MaterialShapes` (by name) or any normalized `RoundedPolygon`; corners are matched\n * between consecutive shapes as in Compose.\n *\n * Reduced motion is the caller's call: snap `progress` instead of springing it.\n *\n * @example\n * const progress = useSpring(0, useM3Spring('spatial'));\n * const d = useM3Morph(['Circle', 'Cookie9Sided'], progress, { size: 48 });\n * <svg viewBox=\"0 0 48 48\"><m.path d={d} /></svg>\n */\nexport function useM3Morph(\n  shapes: readonly MorphShape[],\n  progress: MotionValue<number>,\n  options: M3MorphOptions = {},\n): MotionValue<string> {\n  const { size = 1, startAngle = 0 } = options;\n  const compute = (p: number) => morphPathAt(shapes, p, { size, startAngle });\n  const computeRef = useRef(compute);\n  const d = useTransform(progress, (p) => computeRef.current(p));\n  // New shapes or options update the path without waiting for progress to change. This runs\n  // every render; morphs are cached, so it costs one path build.\n  useLayoutEffect(() => {\n    computeRef.current = compute;\n    const next = compute(progress.get());\n    if (next !== d.get()) d.set(next);\n  });\n  return d;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,SAAgB,WACd,QACA,UACA,UAA0B,CAAC,GACN;CACrB,MAAM,EAAE,OAAO,GAAG,aAAa,MAAM;CACrC,MAAM,WAAW,MAAc,YAAY,QAAQ,GAAG;EAAE;EAAM;CAAW,CAAC;CAC1E,MAAM,aAAa,OAAO,OAAO;CACjC,MAAM,IAAI,aAAa,WAAW,MAAM,WAAW,QAAQ,CAAC,CAAC;CAG7D,sBAAsB;EACpB,WAAW,UAAU;EACrB,MAAM,OAAO,QAAQ,SAAS,IAAI,CAAC;EACnC,IAAI,SAAS,EAAE,IAAI,GAAG,EAAE,IAAI,IAAI;CAClC,CAAC;CACD,OAAO;AACT"}

package/dist/primitives/use-presence.d.ts

@@ -0,0 +1,19 @@
+import { TransitionEvent } from "react";
+//#region src/primitives/use-presence.d.ts
+/**
+ * Keeps an overlay mounted while it animates out. `isPresent` turns true as soon as
+ * `isOpen` does and stays true until the exit transition ends (or a fallback timeout).
+ * Spread `exitProps` on the element whose transition of `property` (default `opacity`)
+ * marks the end; with several properties, the first of them to end does, so an exit that
+ * slides normally and fades under reduced motion passes both. With `animated` false there is
+ * no exit motion to wait for, so `isPresent` follows `isOpen` at once.
+ */
+export declare function usePresence(isOpen: boolean, property?: string | readonly string[], animated?: boolean): {
+  isPresent: boolean;
+  isExiting: boolean;
+  exitProps: {
+    onTransitionEnd: (event: TransitionEvent<HTMLElement>) => void;
+  };
+};
+//#endregion
+//# sourceMappingURL=use-presence.d.ts.map

package/dist/primitives/use-presence.js

@@ -0,0 +1,37 @@
+"use client";
+import { useEffect, useState } from "react";
+/**
+* Keeps an overlay mounted while it animates out. `isPresent` turns true as soon as
+* `isOpen` does and stays true until the exit transition ends (or a fallback timeout).
+* Spread `exitProps` on the element whose transition of `property` (default `opacity`)
+* marks the end; with several properties, the first of them to end does, so an exit that
+* slides normally and fades under reduced motion passes both. With `animated` false there is
+* no exit motion to wait for, so `isPresent` follows `isOpen` at once.
+*/
+function usePresence(isOpen, property = "opacity", animated = true) {
+	const [isPresent, setPresent] = useState(isOpen);
+	const [wasOpen, setWasOpen] = useState(isOpen);
+	if (isOpen !== wasOpen) {
+		setWasOpen(isOpen);
+		if (isOpen) setPresent(true);
+	}
+	if (!animated && isPresent !== isOpen) setPresent(isOpen);
+	const isExiting = animated && isPresent && !isOpen;
+	useEffect(() => {
+		if (!isExiting) return;
+		const timer = setTimeout(() => setPresent(false), 800);
+		return () => clearTimeout(timer);
+	}, [isExiting]);
+	return {
+		isPresent,
+		isExiting,
+		exitProps: { onTransitionEnd: (event) => {
+			const ends = typeof property === "string" ? [property] : property;
+			if (isExiting && event.target === event.currentTarget && ends.includes(event.propertyName)) setPresent(false);
+		} }
+	};
+}
+//#endregion
+export { usePresence };
+
+//# sourceMappingURL=use-presence.js.map

package/dist/primitives/use-presence.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-presence.js","names":[],"sources":["../../src/primitives/use-presence.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState, type TransitionEvent } from 'react';\n\n/**\n * Upper bound for an exit transition, in case `transitionend` never fires. Presence normally\n * ends on that event; this only has to outlast the longest exit the motion tokens can build\n * (checked in `use-presence.test.tsx`), so it never cuts a fade short.\n */\nexport const EXIT_FALLBACK_MS = 800;\n\n/**\n * Keeps an overlay mounted while it animates out. `isPresent` turns true as soon as\n * `isOpen` does and stays true until the exit transition ends (or a fallback timeout).\n * Spread `exitProps` on the element whose transition of `property` (default `opacity`)\n * marks the end; with several properties, the first of them to end does, so an exit that\n * slides normally and fades under reduced motion passes both. With `animated` false there is\n * no exit motion to wait for, so `isPresent` follows `isOpen` at once.\n */\nexport function usePresence(\n  isOpen: boolean,\n  property: string | readonly string[] = 'opacity',\n  animated = true,\n) {\n  const [isPresent, setPresent] = useState(isOpen);\n  const [wasOpen, setWasOpen] = useState(isOpen);\n  // Adjust state while rendering when `isOpen` changes (no effect, no extra paint).\n  if (isOpen !== wasOpen) {\n    setWasOpen(isOpen);\n    if (isOpen) setPresent(true);\n  }\n  if (!animated && isPresent !== isOpen) setPresent(isOpen);\n  const isExiting = animated && isPresent && !isOpen;\n\n  useEffect(() => {\n    if (!isExiting) return;\n    const timer = setTimeout(() => setPresent(false), EXIT_FALLBACK_MS);\n    return () => clearTimeout(timer);\n  }, [isExiting]);\n\n  const exitProps = {\n    onTransitionEnd: (event: TransitionEvent<HTMLElement>) => {\n      const ends = typeof property === 'string' ? [property] : property;\n      if (isExiting && event.target === event.currentTarget && ends.includes(event.propertyName)) {\n        setPresent(false);\n      }\n    },\n  };\n\n  return { isPresent, isExiting, exitProps };\n}\n"],"mappings":";;;;;;;;;;AAmBA,SAAgB,YACd,QACA,WAAuC,WACvC,WAAW,MACX;CACA,MAAM,CAAC,WAAW,cAAc,SAAS,MAAM;CAC/C,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAE7C,IAAI,WAAW,SAAS;EACtB,WAAW,MAAM;EACjB,IAAI,QAAQ,WAAW,IAAI;CAC7B;CACA,IAAI,CAAC,YAAY,cAAc,QAAQ,WAAW,MAAM;CACxD,MAAM,YAAY,YAAY,aAAa,CAAC;CAE5C,gBAAgB;EACd,IAAI,CAAC,WAAW;EAChB,MAAM,QAAQ,iBAAiB,WAAW,KAAK,GAAA,GAAmB;EAClE,aAAa,aAAa,KAAK;CACjC,GAAG,CAAC,SAAS,CAAC;CAWd,OAAO;EAAE;EAAW;EAAW,WAAA,EAR7B,kBAAkB,UAAwC;GACxD,MAAM,OAAO,OAAO,aAAa,WAAW,CAAC,QAAQ,IAAI;GACzD,IAAI,aAAa,MAAM,WAAW,MAAM,iBAAiB,KAAK,SAAS,MAAM,YAAY,GACvF,WAAW,KAAK;EAEpB,EAGqC;CAAE;AAC3C"}

package/dist/primitives.d.ts

@@ -0,0 +1,36 @@
+import { ThemeScopeContext } from "./theme/context.js";
+import { getM3Spring } from "./motion/get-m3-spring.js";
+import { useM3Spring } from "./motion/use-m3-spring.js";
+import { ButtonBase, ButtonBaseActionProps, ButtonBaseDivActionProps, ButtonBaseLinkProps, ButtonBasePendingProps, ButtonBaseProps, ButtonBaseRenderState, ButtonBaseToggleProps } from "./primitives/ButtonBase.js";
+import { DescriptionAria, RootDOMProps, SplitRootProps, SplitRootPropsOptions, WidgetAria, WrapperRootDOMProps, pickDescriptionAria, pickWidgetAria, splitRootProps } from "./utils/root-props.js";
+import { CornerRounding } from "./shapes/corner-rounding.js";
+import { PointTransformer } from "./shapes/point.js";
+import { Cubic } from "./shapes/cubic.js";
+import { RoundedPolygon } from "./shapes/rounded-polygon.js";
+import { MaterialShapePath } from "./shapes/shape-path.js";
+import { MaterialShapeName, archShape, arrowShape, boomShape, bunShape, burstShape, circleShape, clamShellShape, clover4LeafShape, clover8LeafShape, cookie12SidedShape, cookie4SidedShape, cookie6SidedShape, cookie7SidedShape, cookie9SidedShape, diamondShape, fanShape, flowerShape, gemShape, ghostishShape, heartShape, materialShapeNames, ovalShape, pentagonShape, pillShape, pixelCircleShape, pixelTriangleShape, puffyDiamondShape, puffyShape, semiCircleShape, slantedShape, softBoomShape, softBurstShape, squareShape, sunnyShape, triangleShape, verySunnyShape } from "./shapes/generated/material-shape-paths.js";
+import { MaterialShapes } from "./shapes/material-shapes.js";
+import { Morph } from "./shapes/morph.js";
+import { M3MorphOptions, MorphShape, getMorph, morphPathAt } from "./primitives/morph-path.js";
+import { SelectionControl, SelectionControlClassNames, SelectionControlProps } from "./primitives/SelectionControl.js";
+import { M3InteractionDataAttributes, M3InteractionOptions, M3InteractionResult, M3InteractionState, useM3Interaction } from "./primitives/use-m3-interaction.js";
+import { Surface, SurfaceProps, SurfaceVariants, surfaceStyles } from "./primitives/Surface.js";
+import { Overlay, OverlayProps } from "./primitives/Overlay.js";
+import { TouchTarget, TouchTargetProps } from "./primitives/TouchTarget.js";
+import { CharacterCounter, CharacterCounterProps, ErrorText, ErrorTextProps, FieldErrorIcon, FieldErrorIconProps, FieldLabel, FieldLabelProps, SupportingText, SupportingTextProps } from "./primitives/Field.js";
+import { springProgressWithVelocity, springWithVelocityToLinearEasing } from "./tokens/spring-velocity.js";
+import { selectionControlStyles } from "./primitives/selection-control-styles.js";
+import { TriggerContext, TriggerContextValue, useTriggerProps } from "./primitives/TriggerContext.js";
+import { usePresence } from "./primitives/use-presence.js";
+import { DomDirectionLocale, DomDirectionLocaleProps } from "./primitives/DomDirectionLocale.js";
+import { localeWithDirection } from "./primitives/locale-with-direction.js";
+import { useM3Morph } from "./primitives/use-m3-morph.js";
+import { KeepPressedInPlaceResult, useKeepPressedInPlace } from "./utils/keep-pressed-in-place.js";
+import { mergeDataTokens } from "./utils/merge-data-tokens.js";
+import { splitDataAttributes } from "./utils/split-data-attributes.js";
+import { generateSchemeColors } from "./theme/scheme.js";
+import { materialShapeMask } from "./shapes/mask.js";
+import { materialShapePaths } from "./shapes/generated/material-shape-path-record.js";
+import { MorphPathOptions, PathOptions, cubicsToPath, morphToPath, polygonToPath } from "./shapes/path.js";
+import { circle, pill, pillStar, rectangle, star } from "./shapes/shapes.js";
+export { ButtonBase, type ButtonBaseActionProps, type ButtonBaseDivActionProps, type ButtonBaseLinkProps, type ButtonBasePendingProps, type ButtonBaseProps, type ButtonBaseRenderState, type ButtonBaseToggleProps, CharacterCounter, type CharacterCounterProps, CornerRounding, Cubic, type DescriptionAria, DomDirectionLocale, type DomDirectionLocaleProps, ErrorText, type ErrorTextProps, FieldErrorIcon, type FieldErrorIconProps, FieldLabel, type FieldLabelProps, type KeepPressedInPlaceResult, type M3InteractionDataAttributes, type M3InteractionOptions, type M3InteractionResult, type M3InteractionState, type M3MorphOptions, MaterialShapeName, type MaterialShapePath, MaterialShapes, Morph, type MorphPathOptions, type MorphShape, Overlay, type OverlayProps, type PathOptions, type PointTransformer, type RootDOMProps, RoundedPolygon, SelectionControl, type SelectionControlClassNames, type SelectionControlProps, type SplitRootProps, type SplitRootPropsOptions, SupportingText, type SupportingTextProps, Surface, type SurfaceProps, type SurfaceVariants, ThemeScopeContext, TouchTarget, type TouchTargetProps, TriggerContext, type TriggerContextValue, type WidgetAria, type WrapperRootDOMProps, archShape, arrowShape, boomShape, bunShape, burstShape, circle, circleShape, clamShellShape, clover4LeafShape, clover8LeafShape, cookie12SidedShape, cookie4SidedShape, cookie6SidedShape, cookie7SidedShape, cookie9SidedShape, cubicsToPath, diamondShape, fanShape, flowerShape, gemShape, generateSchemeColors, getM3Spring, getMorph, ghostishShape, heartShape, localeWithDirection, materialShapeMask, materialShapeNames, materialShapePaths, mergeDataTokens, morphPathAt, morphToPath, ovalShape, pentagonShape, pickDescriptionAria, pickWidgetAria, pill, pillShape, pillStar, pixelCircleShape, pixelTriangleShape, polygonToPath, puffyDiamondShape, puffyShape, rectangle, selectionControlStyles, semiCircleShape, slantedShape, softBoomShape, softBurstShape, splitDataAttributes, splitRootProps, springProgressWithVelocity, springWithVelocityToLinearEasing, squareShape, star, sunnyShape, surfaceStyles, triangleShape, useKeepPressedInPlace, useM3Interaction, useM3Morph, useM3Spring, usePresence, useTriggerProps, verySunnyShape };

package/dist/primitives.js

@@ -0,0 +1,34 @@
+import { ThemeScopeContext } from "./theme/context.js";
+import { generateSchemeColors } from "./theme/scheme.js";
+import { getM3Spring } from "./motion/get-m3-spring.js";
+import { useM3Spring } from "./motion/use-m3-spring.js";
+import { TriggerContext, useTriggerProps } from "./primitives/TriggerContext.js";
+import { useM3Interaction } from "./primitives/use-m3-interaction.js";
+import { ButtonBase } from "./primitives/ButtonBase.js";
+import { TouchTarget } from "./primitives/TouchTarget.js";
+import { mergeDataTokens } from "./utils/merge-data-tokens.js";
+import { usePresence } from "./primitives/use-presence.js";
+import { localeWithDirection } from "./primitives/locale-with-direction.js";
+import { DomDirectionLocale } from "./primitives/DomDirectionLocale.js";
+import { CornerRounding } from "./shapes/corner-rounding.js";
+import { Cubic } from "./shapes/cubic.js";
+import { RoundedPolygon } from "./shapes/rounded-polygon.js";
+import { circle, pill, pillStar, rectangle, star } from "./shapes/shapes.js";
+import { MaterialShapes } from "./shapes/material-shapes.js";
+import { Morph } from "./shapes/morph.js";
+import { cubicsToPath, morphToPath, polygonToPath } from "./shapes/path.js";
+import { getMorph, morphPathAt } from "./primitives/morph-path.js";
+import { Overlay } from "./primitives/Overlay.js";
+import { pickDescriptionAria, pickWidgetAria, splitRootProps } from "./utils/root-props.js";
+import { CharacterCounter, ErrorText, FieldErrorIcon, FieldLabel, SupportingText } from "./primitives/Field.js";
+import { selectionControlStyles } from "./primitives/selection-control-styles.js";
+import { SelectionControl } from "./primitives/SelectionControl.js";
+import { useKeepPressedInPlace } from "./utils/keep-pressed-in-place.js";
+import { springProgressWithVelocity, springWithVelocityToLinearEasing } from "./tokens/spring-velocity.js";
+import { Surface, surfaceStyles } from "./primitives/Surface.js";
+import { useM3Morph } from "./primitives/use-m3-morph.js";
+import { splitDataAttributes } from "./utils/split-data-attributes.js";
+import { materialShapeMask } from "./shapes/mask.js";
+import { archShape, arrowShape, boomShape, bunShape, burstShape, circleShape, clamShellShape, clover4LeafShape, clover8LeafShape, cookie12SidedShape, cookie4SidedShape, cookie6SidedShape, cookie7SidedShape, cookie9SidedShape, diamondShape, fanShape, flowerShape, gemShape, ghostishShape, heartShape, materialShapeNames, ovalShape, pentagonShape, pillShape, pixelCircleShape, pixelTriangleShape, puffyDiamondShape, puffyShape, semiCircleShape, slantedShape, softBoomShape, softBurstShape, squareShape, sunnyShape, triangleShape, verySunnyShape } from "./shapes/generated/material-shape-paths.js";
+import { materialShapePaths } from "./shapes/generated/material-shape-path-record.js";
+export { ButtonBase, CharacterCounter, CornerRounding, Cubic, DomDirectionLocale, ErrorText, FieldErrorIcon, FieldLabel, MaterialShapes, Morph, Overlay, RoundedPolygon, SelectionControl, SupportingText, Surface, ThemeScopeContext, TouchTarget, TriggerContext, archShape, arrowShape, boomShape, bunShape, burstShape, circle, circleShape, clamShellShape, clover4LeafShape, clover8LeafShape, cookie12SidedShape, cookie4SidedShape, cookie6SidedShape, cookie7SidedShape, cookie9SidedShape, cubicsToPath, diamondShape, fanShape, flowerShape, gemShape, generateSchemeColors, getM3Spring, getMorph, ghostishShape, heartShape, localeWithDirection, materialShapeMask, materialShapeNames, materialShapePaths, mergeDataTokens, morphPathAt, morphToPath, ovalShape, pentagonShape, pickDescriptionAria, pickWidgetAria, pill, pillShape, pillStar, pixelCircleShape, pixelTriangleShape, polygonToPath, puffyDiamondShape, puffyShape, rectangle, selectionControlStyles, semiCircleShape, slantedShape, softBoomShape, softBurstShape, splitDataAttributes, splitRootProps, springProgressWithVelocity, springWithVelocityToLinearEasing, squareShape, star, sunnyShape, surfaceStyles, triangleShape, useKeepPressedInPlace, useM3Interaction, useM3Morph, useM3Spring, usePresence, useTriggerProps, verySunnyShape };

package/dist/shapes/corner-rounding.d.ts

@@ -0,0 +1,13 @@
+//#region src/shapes/corner-rounding.d.ts
+/**
+ * How a polygon corner is rounded: `radius` of the circular arc, and `smoothing` (0..1) that
+ * blends the arc into the edges with flanking curves.
+ */
+export declare class CornerRounding {
+  readonly radius: number;
+  readonly smoothing: number;
+  static readonly Unrounded: CornerRounding;
+  constructor(radius?: number, smoothing?: number);
+}
+//#endregion
+//# sourceMappingURL=corner-rounding.d.ts.map

package/dist/shapes/corner-rounding.js

@@ -0,0 +1,18 @@
+//#region src/shapes/corner-rounding.ts
+/**
+* How a polygon corner is rounded: `radius` of the circular arc, and `smoothing` (0..1) that
+* blends the arc into the edges with flanking curves.
+*/
+var CornerRounding = class CornerRounding {
+	radius;
+	smoothing;
+	static Unrounded = new CornerRounding();
+	constructor(radius = 0, smoothing = 0) {
+		this.radius = radius;
+		this.smoothing = smoothing;
+	}
+};
+//#endregion
+export { CornerRounding };
+
+//# sourceMappingURL=corner-rounding.js.map

package/dist/shapes/corner-rounding.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"corner-rounding.js","names":[],"sources":["../../src/shapes/corner-rounding.ts"],"sourcesContent":["/*\n * Port of androidx.graphics.shapes CornerRounding.kt (Apache-2.0, see LICENSE-androidx.md).\n */\n\n/**\n * How a polygon corner is rounded: `radius` of the circular arc, and `smoothing` (0..1) that\n * blends the arc into the edges with flanking curves.\n */\nexport class CornerRounding {\n  static readonly Unrounded = new CornerRounding();\n\n  constructor(\n    readonly radius = 0,\n    readonly smoothing = 0,\n  ) {}\n}\n"],"mappings":";;;;;AAQA,IAAa,iBAAb,MAAa,eAAe;CAIf;CACA;CAJX,OAAgB,YAAY,IAAI,eAAe;CAE/C,YACE,SAAkB,GAClB,YAAqB,GACrB;EAFS,KAAA,SAAA;EACA,KAAA,YAAA;CACR;AACL"}