@windmorph/react 0.0.0-stage → 0.1.1

package/dist/components/pull-to-refresh/PullToRefresh.js

@@ -0,0 +1,395 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { useM3Spring } from "../../motion/use-m3-spring.js";
+import { usePreloadWhenIdle } from "../../utils/load-on-demand.js";
+import { LazyLoadingIndicator, preloadLoadingIndicator } from "../loading-indicator/lazy-loading-indicator.js";
+import { distanceFraction, overshootRotation, passesThreshold } from "./pull-to-refresh-math.js";
+import { pullToRefreshStyles } from "./pull-to-refresh-styles.js";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { animate, useMotionValue, useMotionValueEvent, useReducedMotion } from "motion/react";
+import { useObjectRef } from "react-aria";
+//#region src/components/pull-to-refresh/PullToRefresh.tsx
+const DEFAULT_LABELS = {
+	pull: "Pull to refresh",
+	refreshing: "Refreshing",
+	refreshed: "Refreshed"
+};
+/** How far a gesture moves before it's a pull or the browser's, px. */
+const POINTER_SLOP = 4;
+const isScrollContainer = (element) => /^(auto|scroll|overlay)$/.test(getComputedStyle(element).overflowY);
+/**
+* Whether every scroll container from `target` up to the area's (the area itself if it
+* scrolls, else the nearest one above it, or the page) is scrolled to its top, so a downward
+* drag can't scroll anything and pulls instead.
+*/
+function isAtTop(target, root) {
+	let passedRoot = false;
+	for (let node = target instanceof Element ? target : root; node; node = node.parentElement) {
+		if (node.scrollTop >= 1) return false;
+		if (node === root) {
+			if (isScrollContainer(node)) return true;
+			passedRoot = true;
+		} else if (passedRoot && isScrollContainer(node)) return true;
+	}
+	return true;
+}
+/**
+* Whether something between `target` and the area handles vertical drags itself (its
+* `touch-action` doesn't allow vertical panning: a vertical slider, a drawing surface), so
+* the gesture is left to it.
+*/
+function ownsVerticalDrag(target, root) {
+	for (let node = target instanceof Element ? target : null; node && node !== root; node = node.parentElement) {
+		const touchAction = getComputedStyle(node).touchAction;
+		if (touchAction === "none") return true;
+		if (/pan-x/.test(touchAction) && !/pan-y|pan-up|pan-down/.test(touchAction)) return true;
+	}
+	return false;
+}
+const isThenable = (value) => typeof value === "object" && value !== null && typeof value.then === "function";
+/**
+* M3 pull to refresh: at the top of its content, a downward drag (touch, mouse or pen) pulls
+* a contained loading indicator in from the top edge, morphing with the pull. Releasing past
+* the threshold calls `onRefresh`; the indicator then rests at the threshold, as an
+* indeterminate loading indicator, until `refreshing` turns `false`. Releasing short of the
+* threshold, or pushing back up, cancels.
+*
+* Wrap a scroll container (give the root `overflow-y-auto` and a height, or put the scrolling
+* element inside it) or a whole page. Scrolling is untouched: the gesture only pulls when the
+* content is at its top and the drag goes down.
+*
+* A `gap-*` on a flex root or `space-y-*` on a block root spaces the content exactly. On a
+* grid root, every in-flow child is a grid item, so the indicator's sticky layer takes a
+* zero-height row of its own and one `row-gap` opens above the content (removing it would
+* mean positioning the layer, which layout safety rules out). Put the grid on an element
+* inside: `<PullToRefresh><div className="grid gap-4">…</div></PullToRefresh>`.
+*
+* Pulling isn't available to everyone, so also offer a refresh button that sets `refreshing`,
+* in an app bar, a menu or next to the content (the spec's accessibility guidance).
+*
+* The motion and sizes follow Compose's `PullToRefreshBox` with
+* `PullToRefreshDefaults.LoadingIndicator`: an 80px threshold, the indicator moving at half
+* the finger's speed and meeting resistance past the threshold, a 48px `primary-container`
+* circle at elevation 0, and a crossfade to the indeterminate indicator while refreshing.
+*
+* @example
+* <PullToRefresh refreshing={loading} onRefresh={reload} className="h-dvh overflow-y-auto">
+*   <List aria-label="Messages">…</List>
+* </PullToRefresh>
+*/
+function PullToRefresh({ refreshing: refreshingProp, onRefresh, threshold = 80, disabled = false, labels: labelsProp, children, classNames, className, ref, ...rest }) {
+	const labels = {
+		...DEFAULT_LABELS,
+		...labelsProp
+	};
+	const [pendingRefresh, setPendingRefresh] = useState(false);
+	const refreshing = refreshingProp ?? pendingRefresh;
+	const fraction = useMotionValue(refreshing ? 1 : 0);
+	const spring = useM3Spring("effects", "default");
+	const settle = useReducedMotion() ? { duration: 0 } : spring;
+	const [pulling, setPulling] = useState(false);
+	const [announcement, setAnnouncement] = useState("");
+	usePreloadWhenIdle(preloadLoadingIndicator, !disabled);
+	const rootRef = useObjectRef(ref);
+	const animationRef = useRef(null);
+	const animatingRef = useRef(false);
+	const mountedRef = useRef(true);
+	const latest = useRef({
+		refreshing,
+		disabled,
+		threshold,
+		onRefresh,
+		refreshingProp,
+		settle
+	});
+	useLayoutEffect(() => {
+		latest.current = {
+			refreshing,
+			disabled,
+			threshold,
+			onRefresh,
+			refreshingProp,
+			settle
+		};
+	});
+	const layerRef = useRef(null);
+	useLayoutEffect(() => {
+		if (rootRef.current && layerRef.current) cancelRootGap(rootRef.current, layerRef.current);
+	});
+	useEffect(() => {
+		const root = rootRef.current;
+		if (!root || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			if (layerRef.current) cancelRootGap(root, layerRef.current);
+		});
+		observer.observe(root);
+		return () => observer.disconnect();
+	}, [rootRef]);
+	useEffect(() => {
+		mountedRef.current = true;
+		return () => {
+			mountedRef.current = false;
+			animationRef.current?.stop();
+		};
+	}, []);
+	/** Springs the indicator to `target` (Compose's `animateToThreshold` / `animateToHidden`). */
+	const settleRef = useRef((target) => {
+		animationRef.current?.stop();
+		animatingRef.current = true;
+		const controls = animate(fraction, target, latest.current.settle);
+		animationRef.current = controls;
+		controls.then(() => {
+			if (animationRef.current === controls) animatingRef.current = false;
+		});
+	});
+	const previousRefreshing = useRef(refreshing);
+	useEffect(() => {
+		if (previousRefreshing.current === refreshing) return;
+		previousRefreshing.current = refreshing;
+		settleRef.current(refreshing ? 1 : 0);
+		setAnnouncement(refreshing ? labels.refreshing : labels.refreshed);
+	}, [
+		refreshing,
+		labels.refreshing,
+		labels.refreshed
+	]);
+	useEffect(() => {
+		const root = rootRef.current;
+		if (!root) return;
+		let gesture = null;
+		let suppressClick = false;
+		const begin = (source, id, x, y, target) => {
+			const { disabled: off } = latest.current;
+			gesture = off || ownsVerticalDrag(target, root) ? null : {
+				id,
+				source,
+				startX: x,
+				startY: y,
+				lastY: y,
+				phase: "tracking",
+				atTop: isAtTop(target, root),
+				pulled: 0
+			};
+			if (gesture?.atTop) preloadLoadingIndicator().catch(() => void 0);
+		};
+		/** Moves the gesture to `y`; returns whether the area took the movement. */
+		const move = (x, y, cancelable) => {
+			const current = gesture;
+			if (!current || current.phase === "native") return false;
+			const dy = y - current.lastY;
+			current.lastY = y;
+			if (current.phase === "tracking") {
+				const totalX = x - current.startX;
+				const totalY = y - current.startY;
+				const distance = Math.max(Math.abs(totalX), Math.abs(totalY));
+				if (current.source === "pointer" && distance <= POINTER_SLOP) return false;
+				if (!(totalY > 0 && totalY >= Math.abs(totalX) && current.atTop) || !cancelable) {
+					if (!cancelable || distance > POINTER_SLOP) current.phase = "native";
+					return false;
+				}
+				const { refreshing: busy } = latest.current;
+				if (busy || animatingRef.current) {
+					current.phase = "inert";
+					return true;
+				}
+				current.phase = "pulling";
+				current.pulled = Math.max(0, totalY - (current.source === "pointer" ? POINTER_SLOP : 0));
+				setPulling(true);
+				fraction.set(distanceFraction(current.pulled, latest.current.threshold));
+				return true;
+			}
+			if (current.phase === "inert") return true;
+			current.pulled = Math.max(0, current.pulled + dy);
+			fraction.set(distanceFraction(current.pulled, latest.current.threshold));
+			if (current.pulled === 0) {
+				current.phase = "tracking";
+				current.startX = x;
+				current.startY = y;
+				current.atTop = true;
+				setPulling(false);
+			}
+			return true;
+		};
+		/** Ends the gesture (Compose's `onRelease`); `cancel` never refreshes. */
+		const end = (cancel) => {
+			const current = gesture;
+			gesture = null;
+			if (!current || current.phase !== "pulling") return;
+			setPulling(false);
+			if (current.source === "pointer") {
+				suppressClick = true;
+				setTimeout(() => {
+					suppressClick = false;
+				});
+			}
+			const { threshold: limit, refreshingProp: controlled } = latest.current;
+			if (!cancel && passesThreshold(current.pulled, limit)) {
+				const result = latest.current.onRefresh();
+				if (controlled === void 0 && isThenable(result)) {
+					setPendingRefresh(true);
+					const done = () => {
+						if (mountedRef.current) setPendingRefresh(false);
+					};
+					result.then(done, done);
+				}
+			}
+			settleRef.current(0);
+		};
+		const touchOf = (event) => gesture === null ? void 0 : [...event.changedTouches].find((touch) => touch.identifier === gesture?.id);
+		const onTouchStart = (event) => {
+			if (event.touches.length > 1) {
+				end(true);
+				return;
+			}
+			const touch = event.changedTouches[0];
+			if (touch) begin("touch", touch.identifier, touch.clientX, touch.clientY, event.target);
+		};
+		const onTouchMove = (event) => {
+			const touch = touchOf(event);
+			if (!touch || event.defaultPrevented) return;
+			if (move(touch.clientX, touch.clientY, event.cancelable) && event.cancelable) event.preventDefault();
+		};
+		const onTouchEnd = (event) => {
+			if (touchOf(event)) end(event.type === "touchcancel");
+		};
+		const onPointerDown = (event) => {
+			if (event.pointerType === "touch" || event.button !== 0 || !event.isPrimary) return;
+			begin("pointer", event.pointerId, event.clientX, event.clientY, event.target);
+		};
+		const onPointerMove = (event) => {
+			if (gesture?.source !== "pointer" || event.pointerId !== gesture.id) return;
+			const wasPulling = gesture.phase === "pulling";
+			if (!move(event.clientX, event.clientY, true)) return;
+			event.preventDefault();
+			if (!wasPulling && gesture?.phase === "pulling") {
+				root.setPointerCapture?.(event.pointerId);
+				window.getSelection()?.removeAllRanges();
+			}
+		};
+		const onPointerEnd = (event) => {
+			if (gesture?.source !== "pointer" || event.pointerId !== gesture.id) return;
+			end(event.type === "pointercancel");
+		};
+		const onClick = (event) => {
+			if (!suppressClick) return;
+			suppressClick = false;
+			event.preventDefault();
+			event.stopPropagation();
+		};
+		const options = { passive: false };
+		root.addEventListener("touchstart", onTouchStart, { passive: true });
+		root.addEventListener("touchmove", onTouchMove, options);
+		root.addEventListener("touchend", onTouchEnd);
+		root.addEventListener("touchcancel", onTouchEnd);
+		root.addEventListener("pointerdown", onPointerDown);
+		root.addEventListener("pointermove", onPointerMove);
+		root.addEventListener("pointerup", onPointerEnd);
+		root.addEventListener("pointercancel", onPointerEnd);
+		root.addEventListener("click", onClick, { capture: true });
+		return () => {
+			root.removeEventListener("touchstart", onTouchStart);
+			root.removeEventListener("touchmove", onTouchMove);
+			root.removeEventListener("touchend", onTouchEnd);
+			root.removeEventListener("touchcancel", onTouchEnd);
+			root.removeEventListener("pointerdown", onPointerDown);
+			root.removeEventListener("pointermove", onPointerMove);
+			root.removeEventListener("pointerup", onPointerEnd);
+			root.removeEventListener("pointercancel", onPointerEnd);
+			root.removeEventListener("click", onClick, { capture: true });
+		};
+	}, [fraction, rootRef]);
+	const styles = pullToRefreshStyles();
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		ref: rootRef,
+		"data-pulling": pulling || void 0,
+		"data-refreshing": refreshing || void 0,
+		"data-disabled": disabled || void 0,
+		className: styles.root({ class: cn(classNames?.root, className) }),
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: layerRef,
+			className: styles.layer({ class: classNames?.layer }),
+			style: { "--m3-pull-to-refresh-threshold": `${threshold}px` },
+			children: [/* @__PURE__ */ jsx("div", {
+				className: styles.clip(),
+				children: /* @__PURE__ */ jsx(PullIndicator, {
+					fraction,
+					refreshing,
+					threshold,
+					labels,
+					className: styles.indicator({ class: classNames?.indicator }),
+					faceClassName: styles.face()
+				})
+			}), /* @__PURE__ */ jsx("span", {
+				role: "status",
+				className: "sr-only",
+				children: announcement
+			})]
+		}), children]
+	});
+}
+/**
+* Keeps the root's own spacing from opening below the zero-height layer. Its margins are the
+* library's: zero, so a `space-y-*` root doesn't push the content down, and in a flex root a
+* negative margin as large as the gap along the main axis. In a grid root it moves to an
+* implicit row of its own before the first one, across every column, so the content keeps its
+* rows and columns; a grid row's size can't go below zero, so one row gap stays above the
+* content (documented: put the grid on an element inside the root).
+*/
+function cancelRootGap(root, layer) {
+	const style = getComputedStyle(root);
+	const grid = style.display.endsWith("grid");
+	const flex = style.display.endsWith("flex");
+	const row = flex && style.flexDirection.startsWith("row");
+	const reverse = flex && style.flexDirection.endsWith("reverse");
+	const gap = Number.parseFloat(row ? style.columnGap : style.rowGap);
+	for (const side of [
+		"BlockStart",
+		"BlockEnd",
+		"InlineStart",
+		"InlineEnd"
+	]) layer.style[`margin${side}`] = "0px";
+	if (flex && gap > 0) layer.style[`margin${row ? "Inline" : "Block"}${reverse ? "Start" : "End"}`] = `${-gap}px`;
+	layer.style.gridRow = grid ? "span 1 / 1" : "";
+	layer.style.gridColumn = grid ? "1 / -1" : "";
+}
+/**
+* The indicator, subscribed to the pull on its own so a pull re-renders only it, never the
+* content. Hidden at rest; while pulled it is a determinate loading indicator following the
+* pull, and while refreshing an indeterminate one, crossfading between them.
+*/
+function PullIndicator({ fraction, refreshing, threshold, labels, className, faceClassName }) {
+	const [value, setValue] = useState(() => fraction.get());
+	useMotionValueEvent(fraction, "change", setValue);
+	if (value <= 0 && !refreshing) return null;
+	const rotation = overshootRotation(value);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-indicator": "",
+		className,
+		style: { transform: `translateY(calc(${value * threshold}px - 100%))` },
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-active": !refreshing,
+			"aria-hidden": refreshing || void 0,
+			className: faceClassName,
+			style: rotation === 0 ? void 0 : { transform: `rotate(${rotation}deg)` },
+			children: /* @__PURE__ */ jsx(LazyLoadingIndicator, {
+				variant: "contained",
+				value: Math.min(Math.max(value, 0), 1),
+				"aria-label": labels.pull
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			"data-active": refreshing,
+			"aria-hidden": !refreshing || void 0,
+			className: faceClassName,
+			children: /* @__PURE__ */ jsx(LazyLoadingIndicator, {
+				variant: "contained",
+				"aria-label": labels.refreshing
+			})
+		})]
+	});
+}
+//#endregion
+export { PullToRefresh };
+
+//# sourceMappingURL=PullToRefresh.js.map

package/dist/components/pull-to-refresh/PullToRefresh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PullToRefresh.js","names":[],"sources":["../../../src/components/pull-to-refresh/PullToRefresh.tsx"],"sourcesContent":["'use client';\n\nimport {\n  animate,\n  useMotionValue,\n  useMotionValueEvent,\n  useReducedMotion,\n  type MotionValue,\n} from 'motion/react';\nimport {\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type ReactNode,\n} from 'react';\nimport { useObjectRef } from 'react-aria';\nimport { useM3Spring } from '../../motion/use-m3-spring';\nimport { cn } from '../../utils/cn';\nimport { usePreloadWhenIdle } from '../../utils/load-on-demand';\nimport {\n  LazyLoadingIndicator,\n  preloadLoadingIndicator,\n} from '../loading-indicator/lazy-loading-indicator';\nimport {\n  POSITIONAL_THRESHOLD,\n  distanceFraction,\n  overshootRotation,\n  passesThreshold,\n} from './pull-to-refresh-math';\nimport { pullToRefreshStyles } from './pull-to-refresh-styles';\n\nexport interface PullToRefreshClassNames {\n  /** The outer element, around the content. */\n  root?: string;\n  /**\n   * The zero-height sticky layer the indicator hangs from, at the top of the area. Give it a\n   * `top-*` class when a sticky app bar covers the top of a scrolling page. Its margins are\n   * the library's, so a flex root's `gap-*` or a block root's `space-y-*` never moves the\n   * content. In a grid root it is a grid item, so one row gap opens above the content.\n   */\n  layer?: string;\n  /** The 48px circle holding the loading indicator. */\n  indicator?: string;\n}\n\n/** Words the pull to refresh announces. */\nexport interface PullToRefreshLabels {\n  /** The indicator's name while it follows a pull. @default \"Pull to refresh\" */\n  pull: string;\n  /**\n   * The indicator's name while refreshing, also announced when a refresh starts.\n   * @default \"Refreshing\"\n   */\n  refreshing: string;\n  /** Announced when a refresh completes. @default \"Refreshed\" */\n  refreshed: string;\n}\n\nconst DEFAULT_LABELS: PullToRefreshLabels = {\n  pull: 'Pull to refresh',\n  refreshing: 'Refreshing',\n  refreshed: 'Refreshed',\n};\n\n/** How far a gesture moves before it's a pull or the browser's, px. */\nconst POINTER_SLOP = 4;\n\ninterface PullToRefreshOwnProps {\n  /**\n   * Whether a refresh is running. While it is, the indicator rests at the threshold as an\n   * indeterminate loading indicator; when it turns `false` the indicator leaves. Set it `true`\n   * from a refresh button too, and the indicator comes in the same way. Leave it out to let a\n   * promise returned by `onRefresh` drive it.\n   */\n  refreshing?: boolean;\n  /**\n   * Called when a pull is released past the threshold. Start the refresh and set\n   * `refreshing`, or return a promise: without `refreshing`, the indicator stays until it\n   * settles.\n   */\n  onRefresh: () => void | Promise<unknown>;\n  /** How far the indicator travels before a release refreshes, px. @default 80 */\n  threshold?: number;\n  /** Turns the gesture off. A running refresh still shows its indicator. @default false */\n  disabled?: boolean;\n  /**\n   * Words the pull to refresh announces, with English defaults; name them for what refreshes\n   * (\"Refreshing messages\").\n   */\n  labels?: Partial<PullToRefreshLabels>;\n  /**\n   * The content: a scrolling list, grid or card collection, or a whole page. On a grid root\n   * (`grid` on `className`) the indicator's layer is a grid item, so one row gap opens above\n   * the content; put the grid on an element inside instead. Flex, block and `space-y-*` roots\n   * are exact.\n   */\n  children?: ReactNode;\n  /** Classes for the parts: `root`, `layer` (the sticky layer at the top) and `indicator`. */\n  classNames?: PullToRefreshClassNames;\n}\n\nexport type PullToRefreshProps = PullToRefreshOwnProps &\n  Omit<ComponentPropsWithRef<'div'>, keyof PullToRefreshOwnProps>;\n\n/** A pointer or touch gesture over the area. */\ninterface Gesture {\n  /** The touch's identifier, or the pointer's id. */\n  id: number;\n  /** `touch` for touch events, otherwise the pointer type (mouse or pen). */\n  source: 'touch' | 'pointer';\n  startX: number;\n  startY: number;\n  lastY: number;\n  /**\n   * `tracking`: not pulling (yet). `pulling`: the indicator follows the gesture. `inert`: the\n   * area claims the gesture (so the browser doesn't overscroll) but it does nothing, because a\n   * refresh or a settle animation is running. `native`: the browser scrolls; hands off.\n   */\n  phase: 'tracking' | 'pulling' | 'inert' | 'native';\n  /** Every scroll container between the gesture's target and the area is at its top. */\n  atTop: boolean;\n  /** How far the gesture has pulled, px (Compose's `distancePulled`). */\n  pulled: number;\n}\n\nconst isScrollContainer = (element: Element) =>\n  /^(auto|scroll|overlay)$/.test(getComputedStyle(element).overflowY);\n\n/**\n * Whether every scroll container from `target` up to the area's (the area itself if it\n * scrolls, else the nearest one above it, or the page) is scrolled to its top, so a downward\n * drag can't scroll anything and pulls instead.\n */\nfunction isAtTop(target: EventTarget | null, root: HTMLElement): boolean {\n  let passedRoot = false;\n  for (\n    let node: Element | null = target instanceof Element ? target : root;\n    node;\n    node = node.parentElement\n  ) {\n    if (node.scrollTop >= 1) return false;\n    if (node === root) {\n      if (isScrollContainer(node)) return true;\n      passedRoot = true;\n    } else if (passedRoot && isScrollContainer(node)) {\n      return true;\n    }\n  }\n  return true;\n}\n\n/**\n * Whether something between `target` and the area handles vertical drags itself (its\n * `touch-action` doesn't allow vertical panning: a vertical slider, a drawing surface), so\n * the gesture is left to it.\n */\nfunction ownsVerticalDrag(target: EventTarget | null, root: HTMLElement): boolean {\n  for (\n    let node = target instanceof Element ? target : null;\n    node && node !== root;\n    node = node.parentElement\n  ) {\n    const touchAction = getComputedStyle(node).touchAction;\n    if (touchAction === 'none') return true;\n    if (/pan-x/.test(touchAction) && !/pan-y|pan-up|pan-down/.test(touchAction)) return true;\n  }\n  return false;\n}\n\nconst isThenable = (value: unknown): value is PromiseLike<unknown> =>\n  typeof value === 'object' &&\n  value !== null &&\n  typeof (value as { then?: unknown }).then === 'function';\n\n/**\n * M3 pull to refresh: at the top of its content, a downward drag (touch, mouse or pen) pulls\n * a contained loading indicator in from the top edge, morphing with the pull. Releasing past\n * the threshold calls `onRefresh`; the indicator then rests at the threshold, as an\n * indeterminate loading indicator, until `refreshing` turns `false`. Releasing short of the\n * threshold, or pushing back up, cancels.\n *\n * Wrap a scroll container (give the root `overflow-y-auto` and a height, or put the scrolling\n * element inside it) or a whole page. Scrolling is untouched: the gesture only pulls when the\n * content is at its top and the drag goes down.\n *\n * A `gap-*` on a flex root or `space-y-*` on a block root spaces the content exactly. On a\n * grid root, every in-flow child is a grid item, so the indicator's sticky layer takes a\n * zero-height row of its own and one `row-gap` opens above the content (removing it would\n * mean positioning the layer, which layout safety rules out). Put the grid on an element\n * inside: `<PullToRefresh><div className=\"grid gap-4\">…</div></PullToRefresh>`.\n *\n * Pulling isn't available to everyone, so also offer a refresh button that sets `refreshing`,\n * in an app bar, a menu or next to the content (the spec's accessibility guidance).\n *\n * The motion and sizes follow Compose's `PullToRefreshBox` with\n * `PullToRefreshDefaults.LoadingIndicator`: an 80px threshold, the indicator moving at half\n * the finger's speed and meeting resistance past the threshold, a 48px `primary-container`\n * circle at elevation 0, and a crossfade to the indeterminate indicator while refreshing.\n *\n * @example\n * <PullToRefresh refreshing={loading} onRefresh={reload} className=\"h-dvh overflow-y-auto\">\n *   <List aria-label=\"Messages\">…</List>\n * </PullToRefresh>\n */\nexport function PullToRefresh({\n  refreshing: refreshingProp,\n  onRefresh,\n  threshold = POSITIONAL_THRESHOLD,\n  disabled = false,\n  labels: labelsProp,\n  children,\n  classNames,\n  className,\n  ref,\n  ...rest\n}: PullToRefreshProps) {\n  const labels = { ...DEFAULT_LABELS, ...labelsProp };\n  const [pendingRefresh, setPendingRefresh] = useState(false);\n  const refreshing = refreshingProp ?? pendingRefresh;\n  const fraction = useMotionValue(refreshing ? 1 : 0);\n  // Settling to the threshold or away never bounces: Compose animates it with\n  // `Animatable.animateTo`'s default, non-bouncing spring, which the default effects spring\n  // matches (2026-10-15; the fast spatial one dipped 3px under the threshold and back).\n  const spring = useM3Spring('effects', 'default');\n  // Under reduced motion the indicator jumps to the threshold or away; a pull still moves it.\n  const settle = useReducedMotion() ? { duration: 0 } : spring;\n  const [pulling, setPulling] = useState(false);\n  const [announcement, setAnnouncement] = useState('');\n  // The indicator's code (its shapes and morphing) loads on demand: when the browser is first\n  // idle, or when a pull starts, whichever comes first.\n  usePreloadWhenIdle(preloadLoadingIndicator, !disabled);\n\n  const rootRef = useObjectRef(ref);\n  const animationRef = useRef<{ stop: () => void } | null>(null);\n  const animatingRef = useRef(false);\n  const mountedRef = useRef(true);\n  // The latest props and helpers, for the native listeners added once.\n  const latest = useRef({ refreshing, disabled, threshold, onRefresh, refreshingProp, settle });\n  useLayoutEffect(() => {\n    latest.current = { refreshing, disabled, threshold, onRefresh, refreshingProp, settle };\n  });\n\n  // The layer is the root's first child, so a consumer `gap-*` on a flex root would open a gap\n  // below it and push the content down. It's cancelled after every render and whenever the\n  // root resizes (a responsive class may change the gap).\n  const layerRef = useRef<HTMLDivElement>(null);\n  useLayoutEffect(() => {\n    if (rootRef.current && layerRef.current) cancelRootGap(rootRef.current, layerRef.current);\n  });\n  useEffect(() => {\n    const root = rootRef.current;\n    if (!root || typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(() => {\n      if (layerRef.current) cancelRootGap(root, layerRef.current);\n    });\n    observer.observe(root);\n    return () => observer.disconnect();\n  }, [rootRef]);\n\n  useEffect(() => {\n    mountedRef.current = true;\n    return () => {\n      mountedRef.current = false;\n      animationRef.current?.stop();\n    };\n  }, []);\n\n  /** Springs the indicator to `target` (Compose's `animateToThreshold` / `animateToHidden`). */\n  const settleRef = useRef((target: number) => {\n    animationRef.current?.stop();\n    animatingRef.current = true;\n    const controls = animate(fraction, target, latest.current.settle);\n    animationRef.current = controls;\n    void controls.then(() => {\n      if (animationRef.current === controls) animatingRef.current = false;\n    });\n  });\n\n  // A refresh starting or ending moves the indicator to the threshold or away, and is\n  // announced. The first render places it without either (Compose's `onAttach`).\n  const previousRefreshing = useRef(refreshing);\n  useEffect(() => {\n    if (previousRefreshing.current === refreshing) return;\n    previousRefreshing.current = refreshing;\n    settleRef.current(refreshing ? 1 : 0);\n    setAnnouncement(refreshing ? labels.refreshing : labels.refreshed);\n  }, [refreshing, labels.refreshing, labels.refreshed]);\n\n  useEffect(() => {\n    const root = rootRef.current;\n    if (!root) return;\n    let gesture: Gesture | null = null;\n    let suppressClick = false;\n\n    const begin = (\n      source: Gesture['source'],\n      id: number,\n      x: number,\n      y: number,\n      target: EventTarget | null,\n    ) => {\n      const { disabled: off } = latest.current;\n      gesture =\n        off || ownsVerticalDrag(target, root)\n          ? null\n          : {\n              id,\n              source,\n              startX: x,\n              startY: y,\n              lastY: y,\n              phase: 'tracking',\n              atTop: isAtTop(target, root),\n              pulled: 0,\n            };\n      // A pull may start: the indicator's code loads now (if the idle preload hasn't loaded it\n      // yet), well before the gesture passes the slop and the indicator shows. A failed load is\n      // tried again by the indicator itself.\n      if (gesture?.atTop) void preloadLoadingIndicator().catch(() => undefined);\n    };\n\n    /** Moves the gesture to `y`; returns whether the area took the movement. */\n    const move = (x: number, y: number, cancelable: boolean): boolean => {\n      const current = gesture;\n      if (!current || current.phase === 'native') return false;\n      const dy = y - current.lastY;\n      current.lastY = y;\n      if (current.phase === 'tracking') {\n        const totalX = x - current.startX;\n        const totalY = y - current.startY;\n        const distance = Math.max(Math.abs(totalX), Math.abs(totalY));\n        // A mouse or pen must move past the slop first, so a click stays a click.\n        if (current.source === 'pointer' && distance <= POINTER_SLOP) return false;\n        const downward = totalY > 0 && totalY >= Math.abs(totalX) && current.atTop;\n        if (!downward || !cancelable) {\n          // Sideways, upward or mid-scroll: the browser's for the rest of the gesture. A\n          // touch gets the same slop before it's decided, against a finger's jitter.\n          if (!cancelable || distance > POINTER_SLOP) current.phase = 'native';\n          return false;\n        }\n        const { refreshing: busy } = latest.current;\n        if (busy || animatingRef.current) {\n          current.phase = 'inert';\n          return true;\n        }\n        current.phase = 'pulling';\n        // A mouse or pen pull starts at the slop, so the indicator doesn't jump.\n        current.pulled = Math.max(0, totalY - (current.source === 'pointer' ? POINTER_SLOP : 0));\n        setPulling(true);\n        fraction.set(distanceFraction(current.pulled, latest.current.threshold));\n        return true;\n      }\n      if (current.phase === 'inert') return true;\n      // Pulling: up and down both move the indicator (Compose's pre- and post-scroll).\n      current.pulled = Math.max(0, current.pulled + dy);\n      fraction.set(distanceFraction(current.pulled, latest.current.threshold));\n      if (current.pulled === 0) {\n        // Pushed all the way back: the gesture may scroll the content again.\n        current.phase = 'tracking';\n        current.startX = x;\n        current.startY = y;\n        current.atTop = true;\n        setPulling(false);\n      }\n      return true;\n    };\n\n    /** Ends the gesture (Compose's `onRelease`); `cancel` never refreshes. */\n    const end = (cancel: boolean) => {\n      const current = gesture;\n      gesture = null;\n      if (!current || current.phase !== 'pulling') return;\n      setPulling(false);\n      if (current.source === 'pointer') {\n        // A mouse pull ends with a click on whatever is under the pointer; it isn't one. The\n        // click comes before any timer.\n        suppressClick = true;\n        setTimeout(() => {\n          suppressClick = false;\n        });\n      }\n      const { threshold: limit, refreshingProp: controlled } = latest.current;\n      if (!cancel && passesThreshold(current.pulled, limit)) {\n        const result = latest.current.onRefresh();\n        if (controlled === undefined && isThenable(result)) {\n          setPendingRefresh(true);\n          const done = () => {\n            if (mountedRef.current) setPendingRefresh(false);\n          };\n          result.then(done, done);\n        }\n      }\n      // Compose hides the indicator here; a refresh that starts moves it to the threshold.\n      settleRef.current(0);\n    };\n\n    const touchOf = (event: TouchEvent) =>\n      gesture === null\n        ? undefined\n        : [...event.changedTouches].find((touch) => touch.identifier === gesture?.id);\n\n    const onTouchStart = (event: TouchEvent) => {\n      if (event.touches.length > 1) {\n        // A second finger (pinch to zoom) ends the pull without refreshing.\n        end(true);\n        return;\n      }\n      const touch = event.changedTouches[0];\n      if (touch) begin('touch', touch.identifier, touch.clientX, touch.clientY, event.target);\n    };\n    const onTouchMove = (event: TouchEvent) => {\n      const touch = touchOf(event);\n      if (!touch || event.defaultPrevented) return;\n      if (move(touch.clientX, touch.clientY, event.cancelable) && event.cancelable) {\n        event.preventDefault();\n      }\n    };\n    const onTouchEnd = (event: TouchEvent) => {\n      if (touchOf(event)) end(event.type === 'touchcancel');\n    };\n\n    const onPointerDown = (event: PointerEvent) => {\n      if (event.pointerType === 'touch' || event.button !== 0 || !event.isPrimary) return;\n      begin('pointer', event.pointerId, event.clientX, event.clientY, event.target);\n    };\n    const onPointerMove = (event: PointerEvent) => {\n      if (gesture?.source !== 'pointer' || event.pointerId !== gesture.id) return;\n      const wasPulling = gesture.phase === 'pulling';\n      if (!move(event.clientX, event.clientY, true)) return;\n      event.preventDefault();\n      if (!wasPulling && gesture?.phase === 'pulling') {\n        root.setPointerCapture?.(event.pointerId);\n        // A mouse drag would otherwise select the text it passes.\n        window.getSelection()?.removeAllRanges();\n      }\n    };\n    const onPointerEnd = (event: PointerEvent) => {\n      if (gesture?.source !== 'pointer' || event.pointerId !== gesture.id) return;\n      end(event.type === 'pointercancel');\n    };\n    const onClick = (event: MouseEvent) => {\n      if (!suppressClick) return;\n      suppressClick = false;\n      event.preventDefault();\n      event.stopPropagation();\n    };\n\n    const options = { passive: false } as const;\n    root.addEventListener('touchstart', onTouchStart, { passive: true });\n    root.addEventListener('touchmove', onTouchMove, options);\n    root.addEventListener('touchend', onTouchEnd);\n    root.addEventListener('touchcancel', onTouchEnd);\n    root.addEventListener('pointerdown', onPointerDown);\n    root.addEventListener('pointermove', onPointerMove);\n    root.addEventListener('pointerup', onPointerEnd);\n    root.addEventListener('pointercancel', onPointerEnd);\n    root.addEventListener('click', onClick, { capture: true });\n    return () => {\n      root.removeEventListener('touchstart', onTouchStart);\n      root.removeEventListener('touchmove', onTouchMove);\n      root.removeEventListener('touchend', onTouchEnd);\n      root.removeEventListener('touchcancel', onTouchEnd);\n      root.removeEventListener('pointerdown', onPointerDown);\n      root.removeEventListener('pointermove', onPointerMove);\n      root.removeEventListener('pointerup', onPointerEnd);\n      root.removeEventListener('pointercancel', onPointerEnd);\n      root.removeEventListener('click', onClick, { capture: true });\n    };\n  }, [fraction, rootRef]);\n\n  const styles = pullToRefreshStyles();\n\n  return (\n    <div\n      {...rest}\n      ref={rootRef}\n      data-pulling={pulling || undefined}\n      data-refreshing={refreshing || undefined}\n      data-disabled={disabled || undefined}\n      className={styles.root({ class: cn(classNames?.root, className) })}\n    >\n      <div\n        ref={layerRef}\n        className={styles.layer({ class: classNames?.layer })}\n        style={{ '--m3-pull-to-refresh-threshold': `${threshold}px` } as CSSProperties}\n      >\n        <div className={styles.clip()}>\n          <PullIndicator\n            fraction={fraction}\n            refreshing={refreshing}\n            threshold={threshold}\n            labels={labels}\n            className={styles.indicator({ class: classNames?.indicator })}\n            faceClassName={styles.face()}\n          />\n        </div>\n        <span role=\"status\" className=\"sr-only\">\n          {announcement}\n        </span>\n      </div>\n      {children}\n    </div>\n  );\n}\n\n/**\n * Keeps the root's own spacing from opening below the zero-height layer. Its margins are the\n * library's: zero, so a `space-y-*` root doesn't push the content down, and in a flex root a\n * negative margin as large as the gap along the main axis. In a grid root it moves to an\n * implicit row of its own before the first one, across every column, so the content keeps its\n * rows and columns; a grid row's size can't go below zero, so one row gap stays above the\n * content (documented: put the grid on an element inside the root).\n */\nfunction cancelRootGap(root: HTMLElement, layer: HTMLElement) {\n  const style = getComputedStyle(root);\n  const grid = style.display.endsWith('grid');\n  const flex = style.display.endsWith('flex');\n  const row = flex && style.flexDirection.startsWith('row');\n  const reverse = flex && style.flexDirection.endsWith('reverse');\n  const gap = Number.parseFloat(row ? style.columnGap : style.rowGap);\n  for (const side of ['BlockStart', 'BlockEnd', 'InlineStart', 'InlineEnd'] as const) {\n    layer.style[`margin${side}`] = '0px';\n  }\n  if (flex && gap > 0) {\n    layer.style[`margin${row ? 'Inline' : 'Block'}${reverse ? 'Start' : 'End'}`] = `${-gap}px`;\n  }\n  layer.style.gridRow = grid ? 'span 1 / 1' : '';\n  layer.style.gridColumn = grid ? '1 / -1' : '';\n}\n\n/**\n * The indicator, subscribed to the pull on its own so a pull re-renders only it, never the\n * content. Hidden at rest; while pulled it is a determinate loading indicator following the\n * pull, and while refreshing an indeterminate one, crossfading between them.\n */\nfunction PullIndicator({\n  fraction,\n  refreshing,\n  threshold,\n  labels,\n  className,\n  faceClassName,\n}: {\n  fraction: MotionValue<number>;\n  refreshing: boolean;\n  threshold: number;\n  labels: PullToRefreshLabels;\n  className: string;\n  faceClassName: string;\n}) {\n  const [value, setValue] = useState(() => fraction.get());\n  useMotionValueEvent(fraction, 'change', setValue);\n  if (value <= 0 && !refreshing) return null;\n  const rotation = overshootRotation(value);\n  return (\n    <div\n      data-indicator=\"\"\n      className={className}\n      // Compose's `translationY = distanceFraction × maxDistance − height`.\n      style={{ transform: `translateY(calc(${value * threshold}px - 100%))` }}\n    >\n      <div\n        data-active={!refreshing}\n        aria-hidden={refreshing || undefined}\n        className={faceClassName}\n        style={rotation === 0 ? undefined : { transform: `rotate(${rotation}deg)` }}\n      >\n        <LazyLoadingIndicator\n          variant=\"contained\"\n          value={Math.min(Math.max(value, 0), 1)}\n          aria-label={labels.pull}\n        />\n      </div>\n      <div\n        data-active={refreshing}\n        aria-hidden={!refreshing || undefined}\n        className={faceClassName}\n      >\n        <LazyLoadingIndicator variant=\"contained\" aria-label={labels.refreshing} />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/pull-to-refresh/pull-to-refresh-math.js

@@ -0,0 +1,37 @@
+//#region src/components/pull-to-refresh/pull-to-refresh-math.ts
+/** Compose's `DragMultiplier`: the indicator moves half as far as the finger. */
+const DRAG_MULTIPLIER = .5;
+/**
+* The indicator's offset, px, for a pull of `distancePulled` px (Compose's
+* `calculateVerticalOffset`). Below the threshold it follows the finger at half speed; past it
+* the extra pull meets growing resistance, up to one more threshold at three times the pull.
+*/
+function verticalOffset(distancePulled, threshold) {
+	const adjusted = Math.max(0, distancePulled) * DRAG_MULTIPLIER;
+	if (adjusted <= threshold) return adjusted;
+	const linearTension = Math.min(Math.max(adjusted / threshold - 1, 0), 2);
+	return threshold + threshold * (linearTension - linearTension ** 2 / 4);
+}
+/**
+* Compose's `PullToRefreshState.distanceFraction` while pulling: the offset over the
+* threshold. 1 is the threshold; it reaches 2 at most.
+*/
+function distanceFraction(distancePulled, threshold) {
+	return threshold > 0 ? verticalOffset(distancePulled, threshold) / threshold : 0;
+}
+/** Whether releasing a pull of `distancePulled` px refreshes (Compose's `onRelease`). */
+function passesThreshold(distancePulled, threshold) {
+	return distancePulled * DRAG_MULTIPLIER > threshold;
+}
+/**
+* The extra turn, in degrees, of the determinate indicator pulled past the threshold:
+* Compose's `PullToRefreshDefaults.LoadingIndicator` turns it back half a turn per threshold
+* of overshoot, starting at the threshold so the shape doesn't jump.
+*/
+function overshootRotation(fraction) {
+	return fraction > 1 ? -(fraction - 1) * 180 : 0;
+}
+//#endregion
+export { DRAG_MULTIPLIER, distanceFraction, overshootRotation, passesThreshold, verticalOffset };
+
+//# sourceMappingURL=pull-to-refresh-math.js.map

package/dist/components/pull-to-refresh/pull-to-refresh-math.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pull-to-refresh-math.js","names":[],"sources":["../../../src/components/pull-to-refresh/pull-to-refresh-math.ts"],"sourcesContent":["/*\n * The pull's arithmetic, ported from Compose Material 3's `PullToRefreshModifierNode`\n * (androidx `compose/material3/pulltorefresh/PullToRefresh.kt`). Pure functions, so they're\n * unit-tested against Compose's numbers.\n */\n\n/** Compose's `PullToRefreshDefaults.PositionalThreshold`, px: how far the indicator travels. */\nexport const POSITIONAL_THRESHOLD = 80;\n\n/** Compose's `DragMultiplier`: the indicator moves half as far as the finger. */\nexport const DRAG_MULTIPLIER = 0.5;\n\n/**\n * The indicator's offset, px, for a pull of `distancePulled` px (Compose's\n * `calculateVerticalOffset`). Below the threshold it follows the finger at half speed; past it\n * the extra pull meets growing resistance, up to one more threshold at three times the pull.\n */\nexport function verticalOffset(distancePulled: number, threshold: number): number {\n  const adjusted = Math.max(0, distancePulled) * DRAG_MULTIPLIER;\n  if (adjusted <= threshold) return adjusted;\n  // How far beyond the threshold the pull has gone, as a fraction of the threshold, limited\n  // to 200%; the tension grows with it at a decreasing rate.\n  const linearTension = Math.min(Math.max(adjusted / threshold - 1, 0), 2);\n  const tension = linearTension - linearTension ** 2 / 4;\n  return threshold + threshold * tension;\n}\n\n/**\n * Compose's `PullToRefreshState.distanceFraction` while pulling: the offset over the\n * threshold. 1 is the threshold; it reaches 2 at most.\n */\nexport function distanceFraction(distancePulled: number, threshold: number): number {\n  return threshold > 0 ? verticalOffset(distancePulled, threshold) / threshold : 0;\n}\n\n/** Whether releasing a pull of `distancePulled` px refreshes (Compose's `onRelease`). */\nexport function passesThreshold(distancePulled: number, threshold: number): boolean {\n  return distancePulled * DRAG_MULTIPLIER > threshold;\n}\n\n/**\n * The extra turn, in degrees, of the determinate indicator pulled past the threshold:\n * Compose's `PullToRefreshDefaults.LoadingIndicator` turns it back half a turn per threshold\n * of overshoot, starting at the threshold so the shape doesn't jump.\n */\nexport function overshootRotation(fraction: number): number {\n  return fraction > 1 ? -(fraction - 1) * 180 : 0;\n}\n"],"mappings":";;AAUA,MAAa,kBAAkB;;;;;;AAO/B,SAAgB,eAAe,gBAAwB,WAA2B;CAChF,MAAM,WAAW,KAAK,IAAI,GAAG,cAAc,IAAI;CAC/C,IAAI,YAAY,WAAW,OAAO;CAGlC,MAAM,gBAAgB,KAAK,IAAI,KAAK,IAAI,WAAW,YAAY,GAAG,CAAC,GAAG,CAAC;CAEvE,OAAO,YAAY,aADH,gBAAgB,iBAAiB,IAAI;AAEvD;;;;;AAMA,SAAgB,iBAAiB,gBAAwB,WAA2B;CAClF,OAAO,YAAY,IAAI,eAAe,gBAAgB,SAAS,IAAI,YAAY;AACjF;;AAGA,SAAgB,gBAAgB,gBAAwB,WAA4B;CAClF,OAAO,iBAAiB,kBAAkB;AAC5C;;;;;;AAOA,SAAgB,kBAAkB,UAA0B;CAC1D,OAAO,WAAW,IAAI,EAAE,WAAW,KAAK,MAAM;AAChD"}

package/dist/components/pull-to-refresh/pull-to-refresh-styles.d.ts

@@ -0,0 +1,53 @@
+//#region src/components/pull-to-refresh/pull-to-refresh-styles.d.ts
+/** Variant definitions for {@link PullToRefresh}; extend them to add variants. */
+export declare const pullToRefreshStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      indicator?: import("tailwind-variants").ClassValue;
+      layer?: import("tailwind-variants").ClassValue;
+      clip?: import("tailwind-variants").ClassValue;
+      face?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      indicator?: import("tailwind-variants").ClassValue;
+      layer?: import("tailwind-variants").ClassValue;
+      clip?: import("tailwind-variants").ClassValue;
+      face?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string;
+  layer: string;
+  clip: string;
+  indicator: string;
+  face: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      indicator?: import("tailwind-variants").ClassValue;
+      layer?: import("tailwind-variants").ClassValue;
+      clip?: import("tailwind-variants").ClassValue;
+      face?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string;
+  layer: string;
+  clip: string;
+  indicator: string;
+  face: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  root: string;
+  layer: string;
+  clip: string;
+  indicator: string;
+  face: string;
+}>>;
+//#endregion
+//# sourceMappingURL=pull-to-refresh-styles.d.ts.map

package/dist/components/pull-to-refresh/pull-to-refresh-styles.js

@@ -0,0 +1,14 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/pull-to-refresh/pull-to-refresh-styles.ts
+/** Variant definitions for {@link PullToRefresh}; extend them to add variants. */
+const pullToRefreshStyles = tv({ slots: {
+	root: "overscroll-y-contain data-pulling:select-none",
+	layer: "pointer-events-none sticky top-0 z-(--md-sys-z-sticky) h-0",
+	clip: "flex h-[calc(var(--m3-pull-to-refresh-threshold)*2)] justify-center overflow-hidden",
+	indicator: "grid size-[48px] shrink-0 place-items-center overflow-hidden rounded-corner-full bg-primary-container",
+	face: "[grid-area:1/1] transition-opacity duration-m3-effects-default ease-m3-effects-default data-[active=false]:opacity-0"
+} });
+//#endregion
+export { pullToRefreshStyles };
+
+//# sourceMappingURL=pull-to-refresh-styles.js.map

package/dist/components/pull-to-refresh/pull-to-refresh-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pull-to-refresh-styles.js","names":[],"sources":["../../../src/components/pull-to-refresh/pull-to-refresh-styles.ts"],"sourcesContent":["import { tv } from '../../utils/tv';\n\n/*\n * Values follow Compose Material 3 (`PullToRefreshDefaults.LoadingIndicator` and\n * `IndicatorBox`): a 48px circle on `primary-container`, elevation level 0, holding a\n * contained loading indicator, clipped at the top of the pull area. The determinate and\n * indeterminate indicators crossfade on the default effects spring, as Compose's `Crossfade`\n * does. Every class is written out in full so Tailwind can find it.\n */\n\n/** Variant definitions for {@link PullToRefresh}; extend them to add variants. */\nexport const pullToRefreshStyles = tv({\n  slots: {\n    // No layout of its own: the consumer's classes make it the scroll container (or not).\n    // `overscroll-y-contain` keeps a scrolling root from chaining into the page or starting\n    // the browser's own pull to refresh.\n    root: 'overscroll-y-contain data-pulling:select-none',\n    // A zero-height sticky layer at the top of the area, so the indicator stays in view while\n    // the content scrolls (\"Don't scroll the loading indicator off-screen\").\n    layer: 'pointer-events-none sticky top-0 z-(--md-sys-z-sticky) h-0',\n    // Clips the indicator at the top of the area (Compose's `clipRect(top = 0f)`), with room\n    // for the longest pull: twice the threshold. In flow but overflowing the zero-height layer,\n    // so it covers the content without moving it, and nothing inside is positioned.\n    clip: 'flex h-[calc(var(--m3-pull-to-refresh-threshold)*2)] justify-center overflow-hidden',\n    indicator:\n      'grid size-[48px] shrink-0 place-items-center overflow-hidden rounded-corner-full bg-primary-container',\n    face: '[grid-area:1/1] transition-opacity duration-m3-effects-default ease-m3-effects-default data-[active=false]:opacity-0',\n  },\n});\n"],"mappings":";;;AAWA,MAAa,sBAAsB,GAAG,EACpC,OAAO;CAIL,MAAM;CAGN,OAAO;CAIP,MAAM;CACN,WACE;CACF,MAAM;AACR,EACF,CAAC"}