@windmorph/react 0.0.0-stage → 0.1.1

package/dist/components/navigation/use-hide-on-scroll.js

@@ -0,0 +1,115 @@
+"use client";
+import { hasVisibleFocusWithin } from "../../utils/focus-visible.js";
+import { useEffect } from "react";
+import { useReducedMotion } from "motion/react";
+//#region src/components/navigation/use-hide-on-scroll.ts
+/** How long after the last scroll event the scroll counts as ended where `scrollend` is missing. */
+const SCROLL_END_FALLBACK_MS = 150;
+/**
+* Hides a bottom bar while the page scrolls down and brings it back on any scroll up
+* (M3: "Scrolling downward can hide the navigation bar; scrolling upward reveals it"). The
+* offset, 0 down to minus the bar's height, follows the scroll distance like a top app
+* bar's `enter-always`, and is written to `--m3-nav-bar-offset`, which the sticky bar uses
+* as its `bottom`, so nothing re-renders while scrolling. Under reduced motion the bar
+* stays put.
+*
+* When the scroll ends with the bar part-hidden, it settles shown or hidden, whichever is
+* nearer, on the default effects spring (`data-settling`; 2026-10-15), as Compose's
+* exit-always bottom bars snap, so it never rests half off the screen.
+*
+* Fully hidden, the bar is `inert`, so Tab and screen readers skip its destinations until
+* it comes back. While keyboard focus is on one of its items it stays on screen (WCAG
+* 2.4.11 Focus Not Obscured), and focusing a partly hidden bar brings it back. Other focus
+* in it (an item pressed with a pointer) doesn't hold it on screen, but the bar isn't made
+* `inert` until focus leaves it, so that focus never drops to the page (2026-10-15).
+*/
+function useHideOnScroll(enabled, barRef, scrollRef) {
+	const reducedMotion = useReducedMotion();
+	const active = enabled && !reducedMotion;
+	useEffect(() => {
+		const bar = barRef.current;
+		if (!bar) return;
+		if (!active) {
+			bar.style.removeProperty("--m3-nav-bar-offset");
+			return;
+		}
+		const scroller = scrollRef?.current;
+		const target = scroller ?? window;
+		const position = () => Math.max(0, scroller ? scroller.scrollTop : window.scrollY);
+		let last = position();
+		let offset = 0;
+		let frame = 0;
+		let endTimer;
+		let isInert = false;
+		const setOffset = (value) => {
+			offset = value;
+			bar.style.setProperty("--m3-nav-bar-offset", `${offset}px`);
+			syncInert();
+		};
+		const syncInert = () => {
+			const height = bar.offsetHeight;
+			const inert = height > 0 && -offset >= height - .5 && !bar.contains(document.activeElement);
+			if (inert !== isInert) {
+				isInert = inert;
+				bar.toggleAttribute("inert", inert);
+			}
+		};
+		const update = () => {
+			frame = 0;
+			const scroll = position();
+			const delta = scroll - last;
+			last = scroll;
+			const height = bar.offsetHeight;
+			setOffset(hasVisibleFocusWithin(bar) ? 0 : Math.min(0, Math.max(-height, offset - delta)));
+		};
+		const settle = () => {
+			clearTimeout(endTimer);
+			if (frame) {
+				cancelAnimationFrame(frame);
+				update();
+			}
+			const height = bar.offsetHeight;
+			if (offset >= 0 || offset <= -height) return;
+			bar.toggleAttribute("data-settling", true);
+			setOffset(-offset > height / 2 ? -height : 0);
+		};
+		const onScroll = () => {
+			bar.removeAttribute("data-settling");
+			if (!frame) frame = requestAnimationFrame(update);
+			if (!("onscrollend" in window)) {
+				clearTimeout(endTimer);
+				endTimer = setTimeout(settle, SCROLL_END_FALLBACK_MS);
+			}
+		};
+		const onSettled = (event) => {
+			if (event.target === bar) bar.removeAttribute("data-settling");
+		};
+		const onFocusOut = () => requestAnimationFrame(syncInert);
+		update();
+		target.addEventListener("scroll", onScroll, { passive: true });
+		target.addEventListener("scrollend", settle);
+		bar.addEventListener("focusin", onScroll);
+		bar.addEventListener("focusout", onFocusOut);
+		bar.addEventListener("transitionend", onSettled);
+		return () => {
+			target.removeEventListener("scroll", onScroll);
+			target.removeEventListener("scrollend", settle);
+			bar.removeEventListener("focusin", onScroll);
+			bar.removeEventListener("focusout", onFocusOut);
+			bar.removeEventListener("transitionend", onSettled);
+			cancelAnimationFrame(frame);
+			clearTimeout(endTimer);
+			if (isInert) bar.removeAttribute("inert");
+			bar.removeAttribute("data-settling");
+			bar.style.removeProperty("--m3-nav-bar-offset");
+		};
+	}, [
+		active,
+		barRef,
+		scrollRef
+	]);
+}
+//#endregion
+export { useHideOnScroll };
+
+//# sourceMappingURL=use-hide-on-scroll.js.map

package/dist/components/navigation/use-hide-on-scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-hide-on-scroll.js","names":[],"sources":["../../../src/components/navigation/use-hide-on-scroll.ts"],"sourcesContent":["'use client';\n\nimport { useReducedMotion } from 'motion/react';\nimport { useEffect, type RefObject } from 'react';\nimport { hasVisibleFocusWithin } from '../../utils/focus-visible';\n\n/** How long after the last scroll event the scroll counts as ended where `scrollend` is missing. */\nconst SCROLL_END_FALLBACK_MS = 150;\n\n/**\n * Hides a bottom bar while the page scrolls down and brings it back on any scroll up\n * (M3: \"Scrolling downward can hide the navigation bar; scrolling upward reveals it\"). The\n * offset, 0 down to minus the bar's height, follows the scroll distance like a top app\n * bar's `enter-always`, and is written to `--m3-nav-bar-offset`, which the sticky bar uses\n * as its `bottom`, so nothing re-renders while scrolling. Under reduced motion the bar\n * stays put.\n *\n * When the scroll ends with the bar part-hidden, it settles shown or hidden, whichever is\n * nearer, on the default effects spring (`data-settling`; 2026-10-15), as Compose's\n * exit-always bottom bars snap, so it never rests half off the screen.\n *\n * Fully hidden, the bar is `inert`, so Tab and screen readers skip its destinations until\n * it comes back. While keyboard focus is on one of its items it stays on screen (WCAG\n * 2.4.11 Focus Not Obscured), and focusing a partly hidden bar brings it back. Other focus\n * in it (an item pressed with a pointer) doesn't hold it on screen, but the bar isn't made\n * `inert` until focus leaves it, so that focus never drops to the page (2026-10-15).\n */\nexport function useHideOnScroll(\n  enabled: boolean,\n  barRef: RefObject<HTMLElement | null>,\n  scrollRef?: RefObject<HTMLElement | null>,\n) {\n  const reducedMotion = useReducedMotion();\n  const active = enabled && !reducedMotion;\n  useEffect(() => {\n    const bar = barRef.current;\n    if (!bar) return;\n    if (!active) {\n      bar.style.removeProperty('--m3-nav-bar-offset');\n      return;\n    }\n    const scroller = scrollRef?.current;\n    const target: HTMLElement | Window = scroller ?? window;\n    const position = () => Math.max(0, scroller ? scroller.scrollTop : window.scrollY);\n    let last = position();\n    let offset = 0;\n    let frame = 0;\n    let endTimer: ReturnType<typeof setTimeout> | undefined;\n    let isInert = false;\n    const setOffset = (value: number) => {\n      offset = value;\n      bar.style.setProperty('--m3-nav-bar-offset', `${offset}px`);\n      syncInert();\n    };\n    const syncInert = () => {\n      const height = bar.offsetHeight;\n      const offScreen = height > 0 && -offset >= height - 0.5;\n      const inert = offScreen && !bar.contains(document.activeElement);\n      if (inert !== isInert) {\n        isInert = inert;\n        bar.toggleAttribute('inert', inert);\n      }\n    };\n    const update = () => {\n      frame = 0;\n      const scroll = position();\n      const delta = scroll - last;\n      last = scroll;\n      const height = bar.offsetHeight;\n      setOffset(hasVisibleFocusWithin(bar) ? 0 : Math.min(0, Math.max(-height, offset - delta)));\n    };\n    const settle = () => {\n      clearTimeout(endTimer);\n      // An instant scroll ends in the frame of its last scroll event, before that frame's\n      // update has run: apply it first, or the bar settles from the old offset and the\n      // update then leaves it part-hidden (2026-10-17).\n      if (frame) {\n        cancelAnimationFrame(frame);\n        update();\n      }\n      const height = bar.offsetHeight;\n      if (offset >= 0 || offset <= -height) return;\n      bar.toggleAttribute('data-settling', true);\n      setOffset(-offset > height / 2 ? -height : 0);\n    };\n    const onScroll = () => {\n      bar.removeAttribute('data-settling');\n      if (!frame) frame = requestAnimationFrame(update);\n      if (!('onscrollend' in window)) {\n        clearTimeout(endTimer);\n        endTimer = setTimeout(settle, SCROLL_END_FALLBACK_MS);\n      }\n    };\n    const onSettled = (event: TransitionEvent) => {\n      if (event.target === bar) bar.removeAttribute('data-settling');\n    };\n    // Focus leaving a hidden bar makes it inert then.\n    const onFocusOut = () => requestAnimationFrame(syncInert);\n    update();\n    target.addEventListener('scroll', onScroll, { passive: true });\n    target.addEventListener('scrollend', settle);\n    bar.addEventListener('focusin', onScroll);\n    bar.addEventListener('focusout', onFocusOut);\n    bar.addEventListener('transitionend', onSettled);\n    return () => {\n      target.removeEventListener('scroll', onScroll);\n      target.removeEventListener('scrollend', settle);\n      bar.removeEventListener('focusin', onScroll);\n      bar.removeEventListener('focusout', onFocusOut);\n      bar.removeEventListener('transitionend', onSettled);\n      cancelAnimationFrame(frame);\n      clearTimeout(endTimer);\n      if (isInert) bar.removeAttribute('inert');\n      bar.removeAttribute('data-settling');\n      bar.style.removeProperty('--m3-nav-bar-offset');\n    };\n  }, [active, barRef, scrollRef]);\n}\n"],"mappings":";;;;;;AAOA,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;AAoB/B,SAAgB,gBACd,SACA,QACA,WACA;CACA,MAAM,gBAAgB,iBAAiB;CACvC,MAAM,SAAS,WAAW,CAAC;CAC3B,gBAAgB;EACd,MAAM,MAAM,OAAO;EACnB,IAAI,CAAC,KAAK;EACV,IAAI,CAAC,QAAQ;GACX,IAAI,MAAM,eAAe,qBAAqB;GAC9C;EACF;EACA,MAAM,WAAW,WAAW;EAC5B,MAAM,SAA+B,YAAY;EACjD,MAAM,iBAAiB,KAAK,IAAI,GAAG,WAAW,SAAS,YAAY,OAAO,OAAO;EACjF,IAAI,OAAO,SAAS;EACpB,IAAI,SAAS;EACb,IAAI,QAAQ;EACZ,IAAI;EACJ,IAAI,UAAU;EACd,MAAM,aAAa,UAAkB;GACnC,SAAS;GACT,IAAI,MAAM,YAAY,uBAAuB,GAAG,OAAO,GAAG;GAC1D,UAAU;EACZ;EACA,MAAM,kBAAkB;GACtB,MAAM,SAAS,IAAI;GAEnB,MAAM,QADY,SAAS,KAAK,CAAC,UAAU,SAAS,MACzB,CAAC,IAAI,SAAS,SAAS,aAAa;GAC/D,IAAI,UAAU,SAAS;IACrB,UAAU;IACV,IAAI,gBAAgB,SAAS,KAAK;GACpC;EACF;EACA,MAAM,eAAe;GACnB,QAAQ;GACR,MAAM,SAAS,SAAS;GACxB,MAAM,QAAQ,SAAS;GACvB,OAAO;GACP,MAAM,SAAS,IAAI;GACnB,UAAU,sBAAsB,GAAG,IAAI,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,CAAC,QAAQ,SAAS,KAAK,CAAC,CAAC;EAC3F;EACA,MAAM,eAAe;GACnB,aAAa,QAAQ;GAIrB,IAAI,OAAO;IACT,qBAAqB,KAAK;IAC1B,OAAO;GACT;GACA,MAAM,SAAS,IAAI;GACnB,IAAI,UAAU,KAAK,UAAU,CAAC,QAAQ;GACtC,IAAI,gBAAgB,iBAAiB,IAAI;GACzC,UAAU,CAAC,SAAS,SAAS,IAAI,CAAC,SAAS,CAAC;EAC9C;EACA,MAAM,iBAAiB;GACrB,IAAI,gBAAgB,eAAe;GACnC,IAAI,CAAC,OAAO,QAAQ,sBAAsB,MAAM;GAChD,IAAI,EAAE,iBAAiB,SAAS;IAC9B,aAAa,QAAQ;IACrB,WAAW,WAAW,QAAQ,sBAAsB;GACtD;EACF;EACA,MAAM,aAAa,UAA2B;GAC5C,IAAI,MAAM,WAAW,KAAK,IAAI,gBAAgB,eAAe;EAC/D;EAEA,MAAM,mBAAmB,sBAAsB,SAAS;EACxD,OAAO;EACP,OAAO,iBAAiB,UAAU,UAAU,EAAE,SAAS,KAAK,CAAC;EAC7D,OAAO,iBAAiB,aAAa,MAAM;EAC3C,IAAI,iBAAiB,WAAW,QAAQ;EACxC,IAAI,iBAAiB,YAAY,UAAU;EAC3C,IAAI,iBAAiB,iBAAiB,SAAS;EAC/C,aAAa;GACX,OAAO,oBAAoB,UAAU,QAAQ;GAC7C,OAAO,oBAAoB,aAAa,MAAM;GAC9C,IAAI,oBAAoB,WAAW,QAAQ;GAC3C,IAAI,oBAAoB,YAAY,UAAU;GAC9C,IAAI,oBAAoB,iBAAiB,SAAS;GAClD,qBAAqB,KAAK;GAC1B,aAAa,QAAQ;GACrB,IAAI,SAAS,IAAI,gBAAgB,OAAO;GACxC,IAAI,gBAAgB,eAAe;GACnC,IAAI,MAAM,eAAe,qBAAqB;EAChD;CACF,GAAG;EAAC;EAAQ;EAAQ;CAAS,CAAC;AAChC"}

package/dist/components/navigation/use-item-arrow-keys.js

@@ -0,0 +1,37 @@
+//#region src/components/navigation/use-item-arrow-keys.ts
+const isUsable = (element) => !element.hasAttribute("disabled") && element.getAttribute("aria-disabled") !== "true";
+/**
+* Arrow-key focus movement between navigation items (M3 rail: "Use arrows to move between
+* navigation items"). Up / Down (or Left / Right along a bar, mirrored right to left) move
+* focus to the previous or next item, wrapping, and Home / End to the first or last. Focus
+* moves without choosing a destination; Tab keeps working as usual.
+*/
+function onItemArrowKeys(orientation) {
+	return (event) => {
+		if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+		const list = event.currentTarget;
+		const rtl = getComputedStyle(list).direction === "rtl";
+		const previousKey = orientation === "vertical" ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+		const nextKey = orientation === "vertical" ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight";
+		if (![
+			previousKey,
+			nextKey,
+			"Home",
+			"End"
+		].includes(event.key)) return;
+		const items = [...list.querySelectorAll("[data-nav-item]")].filter(isUsable);
+		if (items.length === 0) return;
+		const index = items.findIndex((item) => item.contains(document.activeElement));
+		if (index === -1) return;
+		let target;
+		if (event.key === "Home") target = items[0];
+		else if (event.key === "End") target = items[items.length - 1];
+		else target = items[(index + (event.key === nextKey ? 1 : -1) + items.length) % items.length];
+		event.preventDefault();
+		target.focus();
+	};
+}
+//#endregion
+export { onItemArrowKeys };
+
+//# sourceMappingURL=use-item-arrow-keys.js.map

package/dist/components/navigation/use-item-arrow-keys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-item-arrow-keys.js","names":[],"sources":["../../../src/components/navigation/use-item-arrow-keys.ts"],"sourcesContent":["import type { KeyboardEvent } from 'react';\n\nconst isUsable = (element: HTMLElement) =>\n  !element.hasAttribute('disabled') && element.getAttribute('aria-disabled') !== 'true';\n\n/**\n * Arrow-key focus movement between navigation items (M3 rail: \"Use arrows to move between\n * navigation items\"). Up / Down (or Left / Right along a bar, mirrored right to left) move\n * focus to the previous or next item, wrapping, and Home / End to the first or last. Focus\n * moves without choosing a destination; Tab keeps working as usual.\n */\nexport function onItemArrowKeys(orientation: 'vertical' | 'horizontal') {\n  return (event: KeyboardEvent<HTMLElement>) => {\n    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;\n    const list = event.currentTarget;\n    const rtl = getComputedStyle(list).direction === 'rtl';\n    const previousKey = orientation === 'vertical' ? 'ArrowUp' : rtl ? 'ArrowRight' : 'ArrowLeft';\n    const nextKey = orientation === 'vertical' ? 'ArrowDown' : rtl ? 'ArrowLeft' : 'ArrowRight';\n    if (![previousKey, nextKey, 'Home', 'End'].includes(event.key)) return;\n    const items = [...list.querySelectorAll<HTMLElement>('[data-nav-item]')].filter(isUsable);\n    if (items.length === 0) return;\n    const index = items.findIndex((item) => item.contains(document.activeElement));\n    if (index === -1) return;\n    let target: HTMLElement;\n    if (event.key === 'Home') target = items[0]!;\n    else if (event.key === 'End') target = items[items.length - 1]!;\n    else {\n      const step = event.key === nextKey ? 1 : -1;\n      target = items[(index + step + items.length) % items.length]!;\n    }\n    event.preventDefault();\n    target.focus();\n  };\n}\n"],"mappings":";AAEA,MAAM,YAAY,YAChB,CAAC,QAAQ,aAAa,UAAU,KAAK,QAAQ,aAAa,eAAe,MAAM;;;;;;;AAQjF,SAAgB,gBAAgB,aAAwC;CACtE,QAAQ,UAAsC;EAC5C,IAAI,MAAM,UAAU,MAAM,WAAW,MAAM,WAAW,MAAM,UAAU;EACtE,MAAM,OAAO,MAAM;EACnB,MAAM,MAAM,iBAAiB,IAAI,CAAC,CAAC,cAAc;EACjD,MAAM,cAAc,gBAAgB,aAAa,YAAY,MAAM,eAAe;EAClF,MAAM,UAAU,gBAAgB,aAAa,cAAc,MAAM,cAAc;EAC/E,IAAI,CAAC;GAAC;GAAa;GAAS;GAAQ;EAAK,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG;EAChE,MAAM,QAAQ,CAAC,GAAG,KAAK,iBAA8B,iBAAiB,CAAC,CAAC,CAAC,OAAO,QAAQ;EACxF,IAAI,MAAM,WAAW,GAAG;EACxB,MAAM,QAAQ,MAAM,WAAW,SAAS,KAAK,SAAS,SAAS,aAAa,CAAC;EAC7E,IAAI,UAAU,IAAI;EAClB,IAAI;EACJ,IAAI,MAAM,QAAQ,QAAQ,SAAS,MAAM;OACpC,IAAI,MAAM,QAAQ,OAAO,SAAS,MAAM,MAAM,SAAS;OAG1D,SAAS,OAAO,SADH,MAAM,QAAQ,UAAU,IAAI,MACV,MAAM,UAAU,MAAM;EAEvD,MAAM,eAAe;EACrB,OAAO,MAAM;CACf;AACF"}

package/dist/components/navigation/use-rail-item-morph.js

@@ -0,0 +1,61 @@
+"use client";
+import { useLayoutEffect, useRef } from "react";
+//#region src/components/navigation/use-rail-item-morph.ts
+/** A CSS time (`500ms`, `.5s`) in ms; 0 for anything else. */
+function toMs(value) {
+	const time = value.trim();
+	const amount = parseFloat(time);
+	if (Number.isNaN(amount)) return 0;
+	return time.endsWith("ms") ? amount : time.endsWith("s") ? amount * 1e3 : 0;
+}
+/** Each item's pill and its icon's top, relative to the rail. */
+function measure(rail) {
+	const railTop = rail.getBoundingClientRect().top;
+	const tops = /* @__PURE__ */ new Map();
+	for (const pill of rail.querySelectorAll("[data-nav-item] [data-slot=\"pill\"]")) {
+		const icon = pill.querySelector("[data-slot=\"icon\"]");
+		if (icon) tops.set(pill, icon.getBoundingClientRect().top - railTop);
+	}
+	return tops;
+}
+/**
+* Moves the rail's item pills from where their icons were to where they are as the rail
+* expands or collapses, on the default spatial spring, as Compose's rail lerps each icon
+* between its top and start positions (`NavigationItem.kt`; 2026-10-17). The items' heights
+* and gaps spring in CSS (64 → 48px and 4 → 0px, `itemMinHeight` / `itemVerticalSpacedBy`),
+* but the switch between an icon above its label and beside it moved every icon in one
+* frame. Only the pills move (the `translate` property), never the rail's root; nothing
+* moves under reduced motion, where the spatial spring is 0ms.
+*
+* Call `capture` while rendering the switch (the DOM still shows the old layout); the
+* layout effect then plays the move from the captured positions.
+*/
+function useRailItemMorph(railRef, mode) {
+	const before = useRef(null);
+	const capture = () => {
+		if (railRef.current) before.current = measure(railRef.current);
+	};
+	useLayoutEffect(() => {
+		const rail = railRef.current;
+		const from = before.current;
+		before.current = null;
+		if (!rail || !from || typeof rail.animate !== "function") return;
+		const style = getComputedStyle(rail);
+		const duration = toMs(style.getPropertyValue("--md-sys-motion-spring-spatial-default-duration"));
+		if (duration <= 0) return;
+		const easing = style.getPropertyValue("--md-sys-motion-spring-spatial-default-easing").trim();
+		for (const [pill, top] of measure(rail)) {
+			const old = from.get(pill);
+			if (old === void 0 || Math.abs(old - top) < .5) continue;
+			pill.animate([{ translate: `0 ${old - top}px` }, { translate: "0 0" }], {
+				duration,
+				easing: easing || "ease"
+			});
+		}
+	}, [railRef, mode]);
+	return capture;
+}
+//#endregion
+export { useRailItemMorph };
+
+//# sourceMappingURL=use-rail-item-morph.js.map

package/dist/components/navigation/use-rail-item-morph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-rail-item-morph.js","names":[],"sources":["../../../src/components/navigation/use-rail-item-morph.ts"],"sourcesContent":["'use client';\n\nimport { useLayoutEffect, useRef, type RefObject } from 'react';\n\n/** A CSS time (`500ms`, `.5s`) in ms; 0 for anything else. */\nfunction toMs(value: string) {\n  const time = value.trim();\n  const amount = parseFloat(time);\n  if (Number.isNaN(amount)) return 0;\n  return time.endsWith('ms') ? amount : time.endsWith('s') ? amount * 1000 : 0;\n}\n\n/** Each item's pill and its icon's top, relative to the rail. */\nfunction measure(rail: HTMLElement) {\n  const railTop = rail.getBoundingClientRect().top;\n  const tops = new Map<HTMLElement, number>();\n  for (const pill of rail.querySelectorAll<HTMLElement>('[data-nav-item] [data-slot=\"pill\"]')) {\n    const icon = pill.querySelector('[data-slot=\"icon\"]');\n    if (icon) tops.set(pill, icon.getBoundingClientRect().top - railTop);\n  }\n  return tops;\n}\n\n/**\n * Moves the rail's item pills from where their icons were to where they are as the rail\n * expands or collapses, on the default spatial spring, as Compose's rail lerps each icon\n * between its top and start positions (`NavigationItem.kt`; 2026-10-17). The items' heights\n * and gaps spring in CSS (64 → 48px and 4 → 0px, `itemMinHeight` / `itemVerticalSpacedBy`),\n * but the switch between an icon above its label and beside it moved every icon in one\n * frame. Only the pills move (the `translate` property), never the rail's root; nothing\n * moves under reduced motion, where the spatial spring is 0ms.\n *\n * Call `capture` while rendering the switch (the DOM still shows the old layout); the\n * layout effect then plays the move from the captured positions.\n */\nexport function useRailItemMorph(railRef: RefObject<HTMLElement | null>, mode: boolean) {\n  const before = useRef<Map<HTMLElement, number> | null>(null);\n  const capture = () => {\n    if (railRef.current) before.current = measure(railRef.current);\n  };\n  useLayoutEffect(() => {\n    const rail = railRef.current;\n    const from = before.current;\n    before.current = null;\n    if (!rail || !from || typeof rail.animate !== 'function') return;\n    const style = getComputedStyle(rail);\n    const duration = toMs(\n      style.getPropertyValue('--md-sys-motion-spring-spatial-default-duration'),\n    );\n    if (duration <= 0) return;\n    const easing = style.getPropertyValue('--md-sys-motion-spring-spatial-default-easing').trim();\n    for (const [pill, top] of measure(rail)) {\n      const old = from.get(pill);\n      if (old === undefined || Math.abs(old - top) < 0.5) continue;\n      pill.animate([{ translate: `0 ${old - top}px` }, { translate: '0 0' }], {\n        duration,\n        easing: easing || 'ease',\n      });\n    }\n  }, [railRef, mode]);\n  return capture;\n}\n"],"mappings":";;;;AAKA,SAAS,KAAK,OAAe;CAC3B,MAAM,OAAO,MAAM,KAAK;CACxB,MAAM,SAAS,WAAW,IAAI;CAC9B,IAAI,OAAO,MAAM,MAAM,GAAG,OAAO;CACjC,OAAO,KAAK,SAAS,IAAI,IAAI,SAAS,KAAK,SAAS,GAAG,IAAI,SAAS,MAAO;AAC7E;;AAGA,SAAS,QAAQ,MAAmB;CAClC,MAAM,UAAU,KAAK,sBAAsB,CAAC,CAAC;CAC7C,MAAM,uBAAO,IAAI,IAAyB;CAC1C,KAAK,MAAM,QAAQ,KAAK,iBAA8B,sCAAoC,GAAG;EAC3F,MAAM,OAAO,KAAK,cAAc,sBAAoB;EACpD,IAAI,MAAM,KAAK,IAAI,MAAM,KAAK,sBAAsB,CAAC,CAAC,MAAM,OAAO;CACrE;CACA,OAAO;AACT;;;;;;;;;;;;;AAcA,SAAgB,iBAAiB,SAAwC,MAAe;CACtF,MAAM,SAAS,OAAwC,IAAI;CAC3D,MAAM,gBAAgB;EACpB,IAAI,QAAQ,SAAS,OAAO,UAAU,QAAQ,QAAQ,OAAO;CAC/D;CACA,sBAAsB;EACpB,MAAM,OAAO,QAAQ;EACrB,MAAM,OAAO,OAAO;EACpB,OAAO,UAAU;EACjB,IAAI,CAAC,QAAQ,CAAC,QAAQ,OAAO,KAAK,YAAY,YAAY;EAC1D,MAAM,QAAQ,iBAAiB,IAAI;EACnC,MAAM,WAAW,KACf,MAAM,iBAAiB,iDAAiD,CAC1E;EACA,IAAI,YAAY,GAAG;EACnB,MAAM,SAAS,MAAM,iBAAiB,+CAA+C,CAAC,CAAC,KAAK;EAC5F,KAAK,MAAM,CAAC,MAAM,QAAQ,QAAQ,IAAI,GAAG;GACvC,MAAM,MAAM,KAAK,IAAI,IAAI;GACzB,IAAI,QAAQ,KAAA,KAAa,KAAK,IAAI,MAAM,GAAG,IAAI,IAAK;GACpD,KAAK,QAAQ,CAAC,EAAE,WAAW,KAAK,MAAM,IAAI,IAAI,GAAG,EAAE,WAAW,MAAM,CAAC,GAAG;IACtE;IACA,QAAQ,UAAU;GACpB,CAAC;EACH;CACF,GAAG,CAAC,SAAS,IAAI,CAAC;CAClB,OAAO;AACT"}

package/dist/components/progress/ProgressIndicator.d.ts

@@ -0,0 +1,95 @@
+import { ComponentPropsWithRef } from "react";
+//#region src/components/progress/ProgressIndicator.d.ts
+type Naming = {
+  /** Names the indicator ("Loading messages"). Required unless `aria-labelledby` is set. */
+  'aria-label': string;
+  /** The id of the visible text that names the indicator. Required unless `aria-label` is set. */
+  'aria-labelledby'?: string;
+} | {
+  /** Names the indicator ("Loading messages"). Required unless `aria-labelledby` is set. */
+  'aria-label'?: string;
+  /** The id of the visible text that names the indicator. Required unless `aria-label` is set. */
+  'aria-labelledby': string;
+};
+interface SharedOwnProps {
+  /** Progress from 0 to 1; leave it out for an indeterminate indicator. */
+  value?: number;
+  /** The M3 Expressive wavy indicator. @default false */
+  wavy?: boolean;
+  /**
+   * Thickness of the active indicator in px. The spec's thick configuration is 8 (with the
+   * track); the indicator grows to fit, keeping room for the wave. @default 4
+   */
+  thickness?: number;
+  /** Thickness of the track in px. @default the same as `thickness` */
+  trackThickness?: number;
+  /**
+   * Draw the track (and the linear stop dot). Remove it inside a button, colouring the
+   * indicator like the button's label: `classNames={{ indicator: 'stroke-current' }}`.
+   * @default true
+   */
+  track?: boolean;
+}
+export interface LinearProgressIndicatorClassNames {
+  /** The outer element, which carries the `progressbar` role. */
+  root?: string;
+  /** The track: the line behind the active indicator. */
+  track?: string;
+  /** The active indicator, the line that shows progress. */
+  indicator?: string;
+  /** The stop dot at the end of a determinate track. */
+  stop?: string;
+}
+interface LinearOwnProps extends SharedOwnProps {
+  /** The dot at the end of a determinate track (Compose draws it). @default true */
+  stopIndicator?: boolean;
+  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */
+  classNames?: LinearProgressIndicatorClassNames;
+}
+export type LinearProgressIndicatorProps = LinearOwnProps & Naming & Omit<ComponentPropsWithRef<'div'>, keyof LinearOwnProps | 'aria-label' | 'aria-labelledby' | 'children' | 'role'>;
+/**
+ * M3 linear progress indicator: determinate (`value`) or indeterminate, flat or wavy, with a
+ * stop dot at the end of a determinate track. 240px wide by default; set the width with
+ * `className` (`w-full`). `thickness` and `trackThickness` set the strokes (4px by default).
+ * A wavy determinate indicator flattens below 10% and above 95%. It mirrors in right-to-left
+ * layouts. When `value` arrives on an indeterminate indicator, the moving line eases into it.
+ *
+ * @example
+ * <LinearProgressIndicator value={0.4} wavy aria-label="Uploading" className="w-full" />
+ */
+export declare function LinearProgressIndicator({ value, wavy, thickness, trackThickness, track: showTrack, stopIndicator: showStop, classNames, className, style, ref, ...rest }: LinearProgressIndicatorProps): import("react").JSX.Element;
+export interface CircularProgressIndicatorClassNames {
+  /** The outer element, which carries the `progressbar` role. */
+  root?: string;
+  /** The track: the ring behind the active indicator. */
+  track?: string;
+  /** The active indicator, the arc that shows progress. */
+  indicator?: string;
+}
+interface CircularOwnProps extends SharedOwnProps {
+  /**
+   * The diameter in px. The spec: circular indicators "can range from 24dp to 240dp"; values
+   * outside that range are clamped. The strokes keep their `thickness`; the ring and its wave
+   * grow (more waves of the same length, as in Compose).
+   * @default 40, or 48 when wavy, plus any extra thickness
+   */
+  size?: number;
+  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */
+  classNames?: CircularProgressIndicatorClassNames;
+}
+export type CircularProgressIndicatorProps = CircularOwnProps & Naming & Omit<ComponentPropsWithRef<'div'>, keyof CircularOwnProps | 'aria-label' | 'aria-labelledby' | 'children' | 'role'>;
+/**
+ * M3 circular progress indicator: determinate (`value`) or indeterminate, flat (40px) or wavy
+ * (48px), drawn clockwise from 12 o'clock over a track. A wavy indicator's wave travels
+ * around the ring. `thickness` and `trackThickness` set the strokes (4px by default); the spec's
+ * thick configuration (8px) makes it 44px, or 52px wavy. `size` sets the diameter (24–240px).
+ * It isn't mirrored in right-to-left
+ * layouts. For short waits, {@link LoadingIndicator} is recommended.
+ *
+ * @example
+ * <CircularProgressIndicator value={0.7} wavy aria-label="Downloading" />
+ * <CircularProgressIndicator aria-label="Loading" />
+ */
+export declare function CircularProgressIndicator({ value, wavy, size: sizeProp, thickness, trackThickness, track: showTrack, classNames, className, style, ref, ...rest }: CircularProgressIndicatorProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=ProgressIndicator.d.ts.map