@windmorph/react 0.0.0-stage → 0.1.0

package/dist/components/progress/progress-geometry.js

@@ -0,0 +1,285 @@
+import { CornerRounding } from "../../shapes/corner-rounding.js";
+import { circle, star } from "../../shapes/shapes.js";
+import { cubicsToPath, polygonToPath } from "../../shapes/path.js";
+import { getMorph } from "../../primitives/morph-path.js";
+const DEFAULT_STROKES = {
+	active: 4,
+	track: 4
+};
+/** Round caps reach half the thicker stroke past each end (Compose `currentStrokeCapWidth`). */
+const capOf = (strokes) => Math.max(strokes.active, strokes.track) / 2;
+const MIN_CIRCULAR_VERTICES = 5;
+/**
+* The box that holds the strokes. Thicker strokes grow it by the extra thickness, keeping the
+* wave's room: Compose's thick samples use 8px strokes in a 14px linear and a 52px wavy
+* circular indicator (the spec's "thicker variants").
+*/
+const linearHeight = (wavy, strokes = DEFAULT_STROKES) => Math.max(strokes.active, strokes.track) + (wavy ? 6 : 0);
+/**
+* The circular box. An explicit `size` (clamped to the spec's range) is the diameter, whatever
+* the strokes; as in Compose, only the ring and its wave grow, the strokes keep their width.
+*/
+const circularSize = (wavy, strokes = DEFAULT_STROKES, size) => size === void 0 ? (wavy ? 48 : 40) + Math.max(strokes.active, strokes.track) - 4 : Math.min(Math.max(size, 24), 240);
+/** The wave travels one wavelength per second (`waveSpeed = wavelength`). */
+const WAVE_PERIOD_MS = 1e3;
+/** CSS-style cubic-bézier easing, solved for x by Newton–Raphson with a bisection fallback. */
+function cubicBezier(x1, y1, x2, y2) {
+	const bez = (a, b, t) => 3 * a * t * (1 - t) ** 2 + 3 * b * t * t * (1 - t) + t ** 3;
+	const slope = (a, b, t) => 3 * a * (1 - t) ** 2 + 6 * (b - a) * t * (1 - t) + 3 * (1 - b) * t * t;
+	return (x) => {
+		if (x <= 0) return 0;
+		if (x >= 1) return 1;
+		let t = x;
+		for (let i = 0; i < 8; i++) {
+			const d = slope(x1, x2, t);
+			if (Math.abs(d) < 1e-6) break;
+			t -= (bez(x1, x2, t) - x) / d;
+		}
+		if (t < 0 || t > 1 || Math.abs(bez(x1, x2, t) - x) > 1e-5) {
+			let lo = 0;
+			let hi = 1;
+			for (let i = 0; i < 40; i++) {
+				t = (lo + hi) / 2;
+				if (bez(x1, x2, t) < x) lo = t;
+				else hi = t;
+			}
+		}
+		return bez(y1, y2, t);
+	};
+}
+/** `EasingEmphasizedAccelerateCubicBezier`. */
+const emphasizedAccelerate = cubicBezier(.3, 0, .8, .15);
+/** `EasingStandardCubicBezier`. */
+const standard = cubicBezier(.2, 0, 0, 1);
+/** `EasingEmphasizedDecelerateCubicBezier`. */
+const emphasizedDecelerate = cubicBezier(.05, .7, .1, 1);
+/** `WavyProgressIndicatorDefaults.indicatorAmplitude`: no wave below 10% or above 95%. */
+const amplitudeFor = (progress) => progress <= .1 || progress >= .95 ? 0 : 1;
+/**
+* Compose's indeterminate linear keyframes over a 1750ms cycle: each value eases from 0 to 1
+* (emphasized accelerate) between its delay and delay + duration, then holds at 1.
+* Returns [firstTail, firstHead, secondTail, secondHead] as fractions of the width.
+*/
+function indeterminateLinearFractions(elapsedMs) {
+	const t = elapsedMs % 1750;
+	const at = (delay, duration) => emphasizedAccelerate(Math.min(Math.max((t - delay) / duration, 0), 1));
+	return [
+		at(250, 1e3),
+		at(0, 1e3),
+		at(900, 850),
+		at(650, 850)
+	];
+}
+/** The indeterminate circular cycle (Compose `CircularAnimationProgressDuration`). */
+const CIRCULAR_CYCLE_MS = 6e3;
+const CIRCULAR_STEP_MS = 300;
+const CIRCULAR_STEP_EVERY_MS = 1500;
+const CIRCULAR_MIN_SWEEP = .1;
+const CIRCULAR_MAX_SWEEP = .87;
+/**
+* Compose's indeterminate circular motion over a 6000ms cycle: a linear 1080° turn, plus a
+* 90° step every 1500ms (300ms, emphasized decelerate), while the arc grows from 10% to 87%
+* of the ring and shrinks back (3000ms each, standard easing). Compose attaches each easing
+* to the keyframe after the move, so its steps run linear; the easings here are the ones its
+* comments describe. `rotation` is in degrees clockwise from 12 o'clock; `sweep` is a fraction.
+*/
+function indeterminateCircular(elapsedMs) {
+	const t = (elapsedMs % CIRCULAR_CYCLE_MS + CIRCULAR_CYCLE_MS) % CIRCULAR_CYCLE_MS;
+	const global = t / CIRCULAR_CYCLE_MS * 1080;
+	const step = Math.floor(t / CIRCULAR_STEP_EVERY_MS);
+	const within = t - step * CIRCULAR_STEP_EVERY_MS;
+	const additional = (step + emphasizedDecelerate(Math.min(within / CIRCULAR_STEP_MS, 1))) * 90;
+	const half = CIRCULAR_CYCLE_MS / 2;
+	const range = .77;
+	const sweep = t < half ? CIRCULAR_MIN_SWEEP + range * standard(t / half) : CIRCULAR_MAX_SWEEP - range * standard((t - half) / half);
+	return {
+		rotation: (global + additional) % 360,
+		sweep
+	};
+}
+const clampNum = (v, lo, hi) => Math.min(Math.max(v, lo), hi);
+const fmt = (n) => String(Math.round(n * 100) / 100);
+/**
+* One wavy (or flat) stroke segment from x0 to x1. The wave is Compose's: quadratic
+* half-waves with their control point halfway along, peaking at (height − stroke) / 2,
+* scaled by `amplitude` about the centre line and shifted by `waveOffset` wavelengths.
+*/
+function waveSegment(x0, x1, height, amplitude, wavelength, waveOffset, stroke = 4) {
+	const mid = height / 2;
+	if (amplitude === 0 || x1 <= x0) return `M${fmt(x0)} ${fmt(mid)}L${fmt(x1)} ${fmt(mid)}`;
+	const shift = waveOffset * wavelength;
+	const half = wavelength / 2;
+	const peak = (height - stroke) * amplitude;
+	const wave = (u) => {
+		const k = Math.floor(u / half);
+		const t = (u - k * half) / half;
+		const sign = k % 2 === 0 ? 1 : -1;
+		return {
+			y: mid + peak * 2 * t * (1 - t) * sign,
+			slope: peak * sign * 2 * (1 - 2 * t) / half
+		};
+	};
+	let d = `M${fmt(x0)} ${fmt(wave(x0 + shift).y)}`;
+	let u = x0 + shift;
+	const end = x1 + shift;
+	while (u < end - 1e-6) {
+		const next = Math.min((Math.floor(u / half + 1e-9) + 1) * half, end);
+		const { y, slope } = wave(u);
+		const cx = (u + next) / 2 - shift;
+		const cy = y + slope * (next - u) / 2;
+		d += `Q${fmt(cx)} ${fmt(cy)} ${fmt(next - shift)} ${fmt(wave(next).y)}`;
+		u = next;
+	}
+	return d;
+}
+/**
+* Compose `LinearProgressDrawingCache.updateDrawPaths`: the active segments (tail/head
+* pairs) and the track filling the gaps between them, inset for the round caps, with a 4px
+* gap that shrinks while the progress is still entering.
+*/
+function linearPaths(width, height, fractions, amplitude, waveOffset, wavelength, strokes = DEFAULT_STROKES) {
+	const cap = capOf(strokes);
+	const mid = height / 2;
+	const active = [];
+	let track = "";
+	let nextEnd = width - cap;
+	track += `M${fmt(nextEnd)} ${fmt(mid)}`;
+	let gap = 4;
+	let activeVisible = false;
+	for (let i = 0; i < fractions.length / 2; i++) {
+		const start = fractions[i * 2];
+		const end = fractions[i * 2 + 1];
+		const tail = start * width;
+		const head = end * width;
+		if (i === 0) {
+			gap = head < cap ? 0 : Math.min(head - cap, 4);
+			activeVisible = head >= cap;
+		}
+		const adjHead = clampNum(head, cap, width - cap);
+		const adjTail = clampNum(tail, cap, width - cap);
+		if (Math.abs(end - start) > 0 && head >= cap) active.push(waveSegment(adjTail, adjHead, height, amplitude, wavelength, waveOffset, strokes.active));
+		const spacing = activeVisible ? gap + cap * 2 : gap;
+		if (nextEnd > adjHead + spacing) track += `L${fmt(Math.max(cap, adjHead + spacing))} ${fmt(mid)}`;
+		if (head > tail) {
+			nextEnd = Math.max(cap, adjTail - spacing);
+			track += `M${fmt(nextEnd)} ${fmt(mid)}`;
+		}
+	}
+	if (nextEnd > cap) track += `L${fmt(cap)} ${fmt(mid)}`;
+	return {
+		active,
+		track
+	};
+}
+/**
+* The stop indicator (Compose `drawStopIndicator`, wavy version): a dot at the track's end, at
+* most 4px (inset by a quarter of a thicker track), that shrinks once the progress reaches it.
+*/
+function stopIndicator(width, height, progress, strokes = DEFAULT_STROKES) {
+	let size = Math.min(strokes.track, 4);
+	let x = width - size - (size === strokes.track ? 0 : strokes.track / 4);
+	const progressX = width * progress + capOf(strokes);
+	if (x <= progressX) {
+		size = Math.max(0, size - (progressX - x));
+		x = progressX;
+	}
+	return size > 0 ? {
+		cx: x + size / 2,
+		cy: height / 2,
+		r: size / 2
+	} : null;
+}
+/**
+* Flat circular indicator (Compose `CircularProgressIndicator`): the arc and the track as
+* fractions of a circle starting at 12 o'clock, the gap being (4px + stroke) of circumference.
+*/
+function circularFlatArcs(progress, size = 40, stroke = 4) {
+	const gap = (4 + stroke) / (Math.PI * size);
+	const g = Math.min(progress, gap);
+	return {
+		active: progress,
+		trackStart: progress + g,
+		trackLength: Math.max(0, 1 - progress - 2 * g)
+	};
+}
+/** A circle path from 12 o'clock, clockwise, for `pathLength="1"` dashes. */
+function circlePath(size, stroke = 4) {
+	const r = (size - stroke) / 2;
+	const c = size / 2;
+	return `M${c} ${c - r}A${r} ${r} 0 1 1 ${c} ${c + r}A${r} ${r} 0 1 1 ${c} ${c - r}Z`;
+}
+const wavyShapes = /* @__PURE__ */ new Map();
+/** Compose `CircularShapes`: a circle and a 0.75-inner-radius star with matched vertices. */
+function circularWavyShapes(size = 48, wavelength = 15, stroke = 4) {
+	const r = size / 2 - stroke / 2;
+	const vertices = Math.max(MIN_CIRCULAR_VERTICES, Math.round(2 * Math.PI * r / wavelength));
+	let shapes = wavyShapes.get(vertices);
+	if (!shapes) {
+		shapes = {
+			track: circle({ numVertices: vertices }).normalized(),
+			active: star(vertices, {
+				innerRadius: .75,
+				rounding: new CornerRounding(.35, .4),
+				innerRounding: new CornerRounding(.5)
+			}).normalized()
+		};
+		wavyShapes.set(vertices, shapes);
+	}
+	return {
+		...shapes,
+		vertices
+	};
+}
+/**
+* Paths for the wavy circular indicator, scaled to (size − stroke) and centred, starting at
+* 12 o'clock: the flat track circle and the active ring morphed from that circle towards
+* the star by `amplitude`.
+*/
+function circularWavyPaths(amplitude, size = 48, stroke = 4) {
+	const { track, active } = circularWavyShapes(size, 15, stroke);
+	const scale = size - stroke;
+	const offset = stroke / 2;
+	const place = {
+		scale,
+		translateX: offset,
+		translateY: offset,
+		startAngle: 270
+	};
+	const twice = {
+		...place,
+		repeatPath: true,
+		closePath: false
+	};
+	const activePolygon = amplitude >= 1 ? active : amplitude <= 0 ? track : null;
+	const activePath = activePolygon ? polygonToPath(activePolygon, twice) : cubicsToPath(getMorph(track, active).asCubics(amplitude), {
+		...twice,
+		rotationPivotX: .5,
+		rotationPivotY: .5
+	});
+	return {
+		track: polygonToPath(track, place),
+		active: activePath
+	};
+}
+/**
+* Track spacing for the wavy circle (Compose `updateDrawPaths`): the gap plus both caps,
+* shrinking while the progress is smaller, as fractions of the circumference.
+*/
+function circularWavyTrack(progress, size = 48, strokes = DEFAULT_STROKES) {
+	const cap = capOf(strokes);
+	const length = Math.PI * (size - strokes.active);
+	const stop = progress * length;
+	const spacing = Math.min(stop, cap) * 2 + Math.min(stop, 4);
+	const start = (stop + spacing) / length;
+	const end = (length - spacing) / length;
+	return {
+		start,
+		length: Math.max(0, end - start)
+	};
+}
+/** One revolution of the circular wave takes a second per vertex (Compose). */
+const circularWavePeriod = (vertices) => WAVE_PERIOD_MS * vertices;
+//#endregion
+export { CIRCULAR_CYCLE_MS, DEFAULT_STROKES, WAVE_PERIOD_MS, amplitudeFor, circlePath, circularFlatArcs, circularSize, circularWavePeriod, circularWavyPaths, circularWavyShapes, circularWavyTrack, cubicBezier, emphasizedAccelerate, emphasizedDecelerate, indeterminateCircular, indeterminateLinearFractions, linearHeight, linearPaths, standard, stopIndicator, waveSegment };
+
+//# sourceMappingURL=progress-geometry.js.map

package/dist/components/progress/progress-geometry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-geometry.js","names":[],"sources":["../../../src/components/progress/progress-geometry.ts"],"sourcesContent":["import { getMorph } from '../../primitives/morph-path';\nimport { CornerRounding } from '../../shapes/corner-rounding';\nimport { cubicsToPath, polygonToPath } from '../../shapes/path';\nimport type { RoundedPolygon } from '../../shapes/rounded-polygon';\nimport { circle, star } from '../../shapes/shapes';\n\n/*\n * Geometry and timing of Compose's progress indicators (ProgressIndicator.kt,\n * WavyProgressIndicator.kt, Linear/CircularWavyProgressModifiers.kt and the\n * Linear/CircularProgressIndicator tokens), as pure functions of the inputs.\n */\n\n/** The default thickness of the active indicator and the track (`ActiveThickness`, `TrackThickness`). */\nexport const STROKE = 4;\nexport const GAP = 4;\nexport const STOP = 4;\n\n/** Stroke widths of the active indicator and the track, in px. */\nexport interface Strokes {\n  active: number;\n  track: number;\n}\n\nexport const DEFAULT_STROKES: Strokes = { active: STROKE, track: STROKE };\n\n/** Round caps reach half the thicker stroke past each end (Compose `currentStrokeCapWidth`). */\nconst capOf = (strokes: Strokes) => Math.max(strokes.active, strokes.track) / 2;\n\nexport const LINEAR_WIDTH = 240;\nexport const LINEAR_FLAT_HEIGHT = 4;\nexport const LINEAR_WAVE_HEIGHT = 10;\n/** `ActiveWaveAmplitude`: the wave's peak either side of the centre line. */\nexport const LINEAR_AMPLITUDE = 3;\nexport const LINEAR_WAVELENGTH = 40;\nexport const LINEAR_INDETERMINATE_WAVELENGTH = 20;\n\nexport const CIRCULAR_FLAT_SIZE = 40;\nexport const CIRCULAR_WAVE_SIZE = 48;\nexport const CIRCULAR_WAVELENGTH = 15;\nconst MIN_CIRCULAR_VERTICES = 5;\n\n/**\n * The box that holds the strokes. Thicker strokes grow it by the extra thickness, keeping the\n * wave's room: Compose's thick samples use 8px strokes in a 14px linear and a 52px wavy\n * circular indicator (the spec's \"thicker variants\").\n */\nexport const linearHeight = (wavy: boolean, strokes: Strokes = DEFAULT_STROKES) =>\n  Math.max(strokes.active, strokes.track) + (wavy ? LINEAR_AMPLITUDE * 2 : 0);\n\n/** The spec's range for a circular indicator: \"can range from 24dp to 240dp\". */\nexport const CIRCULAR_MIN_SIZE = 24;\nexport const CIRCULAR_MAX_SIZE = 240;\n\n/**\n * The circular box. An explicit `size` (clamped to the spec's range) is the diameter, whatever\n * the strokes; as in Compose, only the ring and its wave grow, the strokes keep their width.\n */\nexport const circularSize = (wavy: boolean, strokes: Strokes = DEFAULT_STROKES, size?: number) =>\n  size === undefined\n    ? (wavy ? CIRCULAR_WAVE_SIZE : CIRCULAR_FLAT_SIZE) +\n      Math.max(strokes.active, strokes.track) -\n      STROKE\n    : Math.min(Math.max(size, CIRCULAR_MIN_SIZE), CIRCULAR_MAX_SIZE);\n\n/** The wave travels one wavelength per second (`waveSpeed = wavelength`). */\nexport const WAVE_PERIOD_MS = 1000;\n/** Amplitude changes take `DurationLong2` (500ms). */\nexport const AMPLITUDE_DURATION_MS = 500;\n\n/** CSS-style cubic-bézier easing, solved for x by Newton–Raphson with a bisection fallback. */\nexport function cubicBezier(x1: number, y1: number, x2: number, y2: number) {\n  const bez = (a: number, b: number, t: number) =>\n    3 * a * t * (1 - t) ** 2 + 3 * b * t * t * (1 - t) + t ** 3;\n  const slope = (a: number, b: number, t: number) =>\n    3 * a * (1 - t) ** 2 + 6 * (b - a) * t * (1 - t) + 3 * (1 - b) * t * t;\n  return (x: number) => {\n    if (x <= 0) return 0;\n    if (x >= 1) return 1;\n    let t = x;\n    for (let i = 0; i < 8; i++) {\n      const d = slope(x1, x2, t);\n      if (Math.abs(d) < 1e-6) break;\n      t -= (bez(x1, x2, t) - x) / d;\n    }\n    if (t < 0 || t > 1 || Math.abs(bez(x1, x2, t) - x) > 1e-5) {\n      let lo = 0;\n      let hi = 1;\n      for (let i = 0; i < 40; i++) {\n        t = (lo + hi) / 2;\n        if (bez(x1, x2, t) < x) lo = t;\n        else hi = t;\n      }\n    }\n    return bez(y1, y2, t);\n  };\n}\n\n/** `EasingEmphasizedAccelerateCubicBezier`. */\nexport const emphasizedAccelerate = cubicBezier(0.3, 0, 0.8, 0.15);\n/** `EasingStandardCubicBezier`. */\nexport const standard = cubicBezier(0.2, 0, 0, 1);\n/** `EasingEmphasizedDecelerateCubicBezier`. */\nexport const emphasizedDecelerate = cubicBezier(0.05, 0.7, 0.1, 1);\n\n/** `WavyProgressIndicatorDefaults.indicatorAmplitude`: no wave below 10% or above 95%. */\nexport const amplitudeFor = (progress: number) => (progress <= 0.1 || progress >= 0.95 ? 0 : 1);\n\n/**\n * Compose's indeterminate linear keyframes over a 1750ms cycle: each value eases from 0 to 1\n * (emphasized accelerate) between its delay and delay + duration, then holds at 1.\n * Returns [firstTail, firstHead, secondTail, secondHead] as fractions of the width.\n */\nexport function indeterminateLinearFractions(elapsedMs: number): number[] {\n  const t = elapsedMs % 1750;\n  const at = (delay: number, duration: number) =>\n    emphasizedAccelerate(Math.min(Math.max((t - delay) / duration, 0), 1));\n  return [at(250, 1000), at(0, 1000), at(900, 850), at(650, 850)];\n}\n\n/** The indeterminate circular cycle (Compose `CircularAnimationProgressDuration`). */\nexport const CIRCULAR_CYCLE_MS = 6000;\nconst CIRCULAR_STEP_MS = 300;\nconst CIRCULAR_STEP_EVERY_MS = 1500;\nconst CIRCULAR_MIN_SWEEP = 0.1;\nconst CIRCULAR_MAX_SWEEP = 0.87;\n\n/**\n * Compose's indeterminate circular motion over a 6000ms cycle: a linear 1080° turn, plus a\n * 90° step every 1500ms (300ms, emphasized decelerate), while the arc grows from 10% to 87%\n * of the ring and shrinks back (3000ms each, standard easing). Compose attaches each easing\n * to the keyframe after the move, so its steps run linear; the easings here are the ones its\n * comments describe. `rotation` is in degrees clockwise from 12 o'clock; `sweep` is a fraction.\n */\nexport function indeterminateCircular(elapsedMs: number): { rotation: number; sweep: number } {\n  const t = ((elapsedMs % CIRCULAR_CYCLE_MS) + CIRCULAR_CYCLE_MS) % CIRCULAR_CYCLE_MS;\n  const global = (t / CIRCULAR_CYCLE_MS) * 1080;\n  const step = Math.floor(t / CIRCULAR_STEP_EVERY_MS);\n  const within = t - step * CIRCULAR_STEP_EVERY_MS;\n  const additional = (step + emphasizedDecelerate(Math.min(within / CIRCULAR_STEP_MS, 1))) * 90;\n  const half = CIRCULAR_CYCLE_MS / 2;\n  const range = CIRCULAR_MAX_SWEEP - CIRCULAR_MIN_SWEEP;\n  const sweep =\n    t < half\n      ? CIRCULAR_MIN_SWEEP + range * standard(t / half)\n      : CIRCULAR_MAX_SWEEP - range * standard((t - half) / half);\n  return { rotation: (global + additional) % 360, sweep };\n}\n\nconst clampNum = (v: number, lo: number, hi: number) => Math.min(Math.max(v, lo), hi);\nconst fmt = (n: number) => String(Math.round(n * 100) / 100);\n\n/**\n * One wavy (or flat) stroke segment from x0 to x1. The wave is Compose's: quadratic\n * half-waves with their control point halfway along, peaking at (height − stroke) / 2,\n * scaled by `amplitude` about the centre line and shifted by `waveOffset` wavelengths.\n */\nexport function waveSegment(\n  x0: number,\n  x1: number,\n  height: number,\n  amplitude: number,\n  wavelength: number,\n  waveOffset: number,\n  stroke = STROKE,\n): string {\n  const mid = height / 2;\n  if (amplitude === 0 || x1 <= x0) return `M${fmt(x0)} ${fmt(mid)}L${fmt(x1)} ${fmt(mid)}`;\n  const shift = waveOffset * wavelength;\n  const half = wavelength / 2;\n  const peak = (height - stroke) * amplitude;\n  const wave = (u: number) => {\n    const k = Math.floor(u / half);\n    const t = (u - k * half) / half;\n    const sign = k % 2 === 0 ? 1 : -1;\n    return {\n      y: mid + peak * 2 * t * (1 - t) * sign,\n      slope: (peak * sign * 2 * (1 - 2 * t)) / half,\n    };\n  };\n  let d = `M${fmt(x0)} ${fmt(wave(x0 + shift).y)}`;\n  let u = x0 + shift;\n  const end = x1 + shift;\n  while (u < end - 1e-6) {\n    const next = Math.min((Math.floor(u / half + 1e-9) + 1) * half, end);\n    const { y, slope } = wave(u);\n    // Each half-wave is a parabola, so its restriction to [u, next] is exactly this quadratic.\n    const cx = (u + next) / 2 - shift;\n    const cy = y + (slope * (next - u)) / 2;\n    d += `Q${fmt(cx)} ${fmt(cy)} ${fmt(next - shift)} ${fmt(wave(next).y)}`;\n    u = next;\n  }\n  return d;\n}\n\nexport interface LinearPaths {\n  active: string[];\n  track: string;\n}\n\n/**\n * Compose `LinearProgressDrawingCache.updateDrawPaths`: the active segments (tail/head\n * pairs) and the track filling the gaps between them, inset for the round caps, with a 4px\n * gap that shrinks while the progress is still entering.\n */\nexport function linearPaths(\n  width: number,\n  height: number,\n  fractions: readonly number[],\n  amplitude: number,\n  waveOffset: number,\n  wavelength: number,\n  strokes: Strokes = DEFAULT_STROKES,\n): LinearPaths {\n  const cap = capOf(strokes);\n  const mid = height / 2;\n  const active: string[] = [];\n  let track = '';\n  let nextEnd = width - cap;\n  track += `M${fmt(nextEnd)} ${fmt(mid)}`;\n  let gap = GAP;\n  let activeVisible = false;\n  for (let i = 0; i < fractions.length / 2; i++) {\n    const start = fractions[i * 2]!;\n    const end = fractions[i * 2 + 1]!;\n    const tail = start * width;\n    const head = end * width;\n    if (i === 0) {\n      gap = head < cap ? 0 : Math.min(head - cap, GAP);\n      activeVisible = head >= cap;\n    }\n    const adjHead = clampNum(head, cap, width - cap);\n    const adjTail = clampNum(tail, cap, width - cap);\n    if (Math.abs(end - start) > 0 && head >= cap) {\n      active.push(\n        waveSegment(adjTail, adjHead, height, amplitude, wavelength, waveOffset, strokes.active),\n      );\n    }\n    const spacing = activeVisible ? gap + cap * 2 : gap;\n    if (nextEnd > adjHead + spacing) {\n      track += `L${fmt(Math.max(cap, adjHead + spacing))} ${fmt(mid)}`;\n    }\n    if (head > tail) {\n      nextEnd = Math.max(cap, adjTail - spacing);\n      track += `M${fmt(nextEnd)} ${fmt(mid)}`;\n    }\n  }\n  if (nextEnd > cap) track += `L${fmt(cap)} ${fmt(mid)}`;\n  return { active, track };\n}\n\n/**\n * The stop indicator (Compose `drawStopIndicator`, wavy version): a dot at the track's end, at\n * most 4px (inset by a quarter of a thicker track), that shrinks once the progress reaches it.\n */\nexport function stopIndicator(\n  width: number,\n  height: number,\n  progress: number,\n  strokes: Strokes = DEFAULT_STROKES,\n) {\n  let size = Math.min(strokes.track, STOP);\n  let x = width - size - (size === strokes.track ? 0 : strokes.track / 4);\n  const progressX = width * progress + capOf(strokes);\n  if (x <= progressX) {\n    size = Math.max(0, size - (progressX - x));\n    x = progressX;\n  }\n  return size > 0 ? { cx: x + size / 2, cy: height / 2, r: size / 2 } : null;\n}\n\n/* --------------------------------------------------------------------- Circular */\n\n/**\n * Flat circular indicator (Compose `CircularProgressIndicator`): the arc and the track as\n * fractions of a circle starting at 12 o'clock, the gap being (4px + stroke) of circumference.\n */\nexport function circularFlatArcs(progress: number, size = CIRCULAR_FLAT_SIZE, stroke = STROKE) {\n  const gap = (GAP + stroke) / (Math.PI * size);\n  const g = Math.min(progress, gap);\n  return {\n    active: progress,\n    trackStart: progress + g,\n    trackLength: Math.max(0, 1 - progress - 2 * g),\n  };\n}\n\n/** A circle path from 12 o'clock, clockwise, for `pathLength=\"1\"` dashes. */\nexport function circlePath(size: number, stroke = STROKE) {\n  const r = (size - stroke) / 2;\n  const c = size / 2;\n  return `M${c} ${c - r}A${r} ${r} 0 1 1 ${c} ${c + r}A${r} ${r} 0 1 1 ${c} ${c - r}Z`;\n}\n\nconst wavyShapes = new Map<number, { track: RoundedPolygon; active: RoundedPolygon }>();\n\n/** Compose `CircularShapes`: a circle and a 0.75-inner-radius star with matched vertices. */\nexport function circularWavyShapes(\n  size = CIRCULAR_WAVE_SIZE,\n  wavelength = CIRCULAR_WAVELENGTH,\n  stroke = STROKE,\n) {\n  const r = size / 2 - stroke / 2;\n  const vertices = Math.max(MIN_CIRCULAR_VERTICES, Math.round((2 * Math.PI * r) / wavelength));\n  let shapes = wavyShapes.get(vertices);\n  if (!shapes) {\n    shapes = {\n      track: circle({ numVertices: vertices }).normalized(),\n      active: star(vertices, {\n        innerRadius: 0.75,\n        rounding: new CornerRounding(0.35, 0.4),\n        innerRounding: new CornerRounding(0.5),\n      }).normalized(),\n    };\n    wavyShapes.set(vertices, shapes);\n  }\n  return { ...shapes, vertices };\n}\n\n/**\n * Paths for the wavy circular indicator, scaled to (size − stroke) and centred, starting at\n * 12 o'clock: the flat track circle and the active ring morphed from that circle towards\n * the star by `amplitude`.\n */\nexport function circularWavyPaths(amplitude: number, size = CIRCULAR_WAVE_SIZE, stroke = STROKE) {\n  const { track, active } = circularWavyShapes(size, CIRCULAR_WAVELENGTH, stroke);\n  const scale = size - stroke;\n  const offset = stroke / 2;\n  const place = { scale, translateX: offset, translateY: offset, startAngle: 270 };\n  // The active ring is drawn twice (Compose's `repeatPath`), so a dash shifted along it by\n  // the wave offset never runs off the end; give it `pathLength=\"2\"`.\n  const twice = { ...place, repeatPath: true, closePath: false };\n  const activePolygon: RoundedPolygon | null =\n    amplitude >= 1 ? active : amplitude <= 0 ? track : null;\n  const activePath = activePolygon\n    ? polygonToPath(activePolygon, twice)\n    : cubicsToPath(getMorph(track, active).asCubics(amplitude), {\n        ...twice,\n        rotationPivotX: 0.5,\n        rotationPivotY: 0.5,\n      });\n  return { track: polygonToPath(track, place), active: activePath };\n}\n\n/**\n * Track spacing for the wavy circle (Compose `updateDrawPaths`): the gap plus both caps,\n * shrinking while the progress is smaller, as fractions of the circumference.\n */\nexport function circularWavyTrack(\n  progress: number,\n  size = CIRCULAR_WAVE_SIZE,\n  strokes: Strokes = DEFAULT_STROKES,\n) {\n  const cap = capOf(strokes);\n  const length = Math.PI * (size - strokes.active);\n  const stop = progress * length;\n  const spacing = Math.min(stop, cap) * 2 + Math.min(stop, GAP);\n  const start = (stop + spacing) / length;\n  const end = (length - spacing) / length;\n  return { start, length: Math.max(0, end - start) };\n}\n\n/** One revolution of the circular wave takes a second per vertex (Compose). */\nexport const circularWavePeriod = (vertices: number) => WAVE_PERIOD_MS * vertices;\n"],"mappings":"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"}

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

@@ -0,0 +1,81 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/progress/progress-styles.d.ts
+/** Variant definitions for {@link LinearProgressIndicator}; extend them to add variants. */
+export declare const linearProgressStyles: import("tailwind-variants").TVReturnType<{
+  wavy: {
+    true: {};
+    false: {};
+  };
+}, {
+  root: string;
+  svg: string;
+  track: string[];
+  indicator: string[];
+  stop: string;
+}, undefined, {
+  wavy: {
+    true: {};
+    false: {};
+  };
+}, {
+  root: string;
+  svg: string;
+  track: string[];
+  indicator: string[];
+  stop: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  wavy: {
+    true: {};
+    false: {};
+  };
+}, {
+  root: string;
+  svg: string;
+  track: string[];
+  indicator: string[];
+  stop: string;
+}>>;
+/** Variant definitions for {@link CircularProgressIndicator}; extend them to add variants. */
+export declare const circularProgressStyles: import("tailwind-variants").TVReturnType<{
+  wavy: {
+    true: {};
+    false: {};
+  };
+}, {
+  root: string;
+  svg: string;
+  track: string[];
+  indicator: string[];
+}, undefined, {
+  wavy: {
+    true: {};
+    false: {};
+  };
+}, {
+  root: string;
+  svg: string;
+  track: string[];
+  indicator: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+  wavy: {
+    true: {};
+    false: {};
+  };
+}, {
+  root: string;
+  svg: string;
+  track: string[];
+  indicator: string[];
+}>>;
+/**
+ * The variants of {@link linearProgressStyles}, for building on its styles. They are the recipe's keys, not
+ * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.
+ */
+export type LinearProgressStyleProps = VariantProps<typeof linearProgressStyles>;
+/**
+ * The variants of {@link circularProgressStyles}, for building on its styles. They are the recipe's keys, not
+ * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.
+ */
+export type CircularProgressStyleProps = VariantProps<typeof circularProgressStyles>;
+//#endregion
+//# sourceMappingURL=progress-styles.d.ts.map

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

@@ -0,0 +1,43 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/progress/progress-styles.ts
+/** Variant definitions for {@link LinearProgressIndicator}; extend them to add variants. */
+const linearProgressStyles = tv({
+	slots: {
+		root: "block h-(--m3-progress-height) w-[240px] max-w-full shrink-0",
+		svg: "block size-full overflow-visible rtl:-scale-x-100",
+		track: ["fill-none stroke-[var(--_md-comp-progress-indicator-track-color)] [stroke-linecap:round]", "forced-colors:stroke-[GrayText]"],
+		indicator: [
+			"fill-none stroke-[var(--_md-comp-progress-indicator-active-indicator-color)]",
+			"forced-colors:stroke-[CanvasText]",
+			"[stroke-linecap:round] [stroke-linejoin:round]"
+		],
+		stop: "fill-[var(--_md-comp-progress-indicator-stop-indicator-color)] forced-colors:fill-[CanvasText]"
+	},
+	variants: { wavy: {
+		true: {},
+		false: {}
+	} },
+	defaultVariants: { wavy: false }
+});
+/** Variant definitions for {@link CircularProgressIndicator}; extend them to add variants. */
+const circularProgressStyles = tv({
+	slots: {
+		root: "inline-block size-(--m3-progress-size) shrink-0",
+		svg: "block size-full overflow-visible",
+		track: ["fill-none stroke-[var(--_md-comp-progress-indicator-track-color)] [stroke-linecap:round]", "forced-colors:stroke-[GrayText]"],
+		indicator: [
+			"fill-none stroke-[var(--_md-comp-progress-indicator-active-indicator-color)]",
+			"forced-colors:stroke-[CanvasText]",
+			"[stroke-linecap:round] [stroke-linejoin:round]"
+		]
+	},
+	variants: { wavy: {
+		true: {},
+		false: {}
+	} },
+	defaultVariants: { wavy: false }
+});
+//#endregion
+export { circularProgressStyles, linearProgressStyles };
+
+//# sourceMappingURL=progress-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress-styles.js","names":[],"sources":["../../../src/components/progress/progress-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow Compose Material 3 (ProgressIndicator.kt, WavyProgressIndicator.kt and the\n * ProgressIndicator / Linear / Circular tokens): `primary` active indicator and stop dot on\n * a `secondary-container` track, round strokes and a 4px gap. The stroke widths come from the\n * `thickness` props (4px by default) as SVG attributes, and the box from them: the linear\n * height and circular size are the `--m3-progress-height` / `--m3-progress-size` variables\n * the component sets (linear 4px, 10px wavy; circular 40px, 48px wavy, at 4px). Only the\n * linear indicator mirrors in RTL; the spec keeps circular indicators clockwise.\n *\n * The colours come from the component tokens (`progress-tokens.ts`,\n * `--md-comp-progress-indicator-*`); each root carries\n * `data-tokens=\"md-comp-progress-indicator\"`, and the parts read one private variable each. A\n * consumer class (`stroke-current`) still wins.\n *\n * Forced colours (2026-10-15): browsers don't force SVG strokes, so they kept the theme's\n * colours (a 1.2:1 track on a white high-contrast canvas). There the indicator and stop dot\n * are `CanvasText` and the track `GrayText`.\n * Every class is written out in full so Tailwind can find it.\n */\n\n/** Variant definitions for {@link LinearProgressIndicator}; extend them to add variants. */\nexport const linearProgressStyles = tv({\n  slots: {\n    root: 'block h-(--m3-progress-height) w-[240px] max-w-full shrink-0',\n    svg: 'block size-full overflow-visible rtl:-scale-x-100',\n    track: [\n      'fill-none stroke-[var(--_md-comp-progress-indicator-track-color)] [stroke-linecap:round]',\n      'forced-colors:stroke-[GrayText]',\n    ],\n    indicator: [\n      'fill-none stroke-[var(--_md-comp-progress-indicator-active-indicator-color)]',\n      'forced-colors:stroke-[CanvasText]',\n      '[stroke-linecap:round] [stroke-linejoin:round]',\n    ],\n    stop: 'fill-[var(--_md-comp-progress-indicator-stop-indicator-color)] forced-colors:fill-[CanvasText]',\n  },\n  variants: {\n    wavy: { true: {}, false: {} },\n  },\n  defaultVariants: { wavy: false },\n});\n\n/** Variant definitions for {@link CircularProgressIndicator}; extend them to add variants. */\nexport const circularProgressStyles = tv({\n  slots: {\n    root: 'inline-block size-(--m3-progress-size) shrink-0',\n    svg: 'block size-full overflow-visible',\n    track: [\n      'fill-none stroke-[var(--_md-comp-progress-indicator-track-color)] [stroke-linecap:round]',\n      'forced-colors:stroke-[GrayText]',\n    ],\n    indicator: [\n      'fill-none stroke-[var(--_md-comp-progress-indicator-active-indicator-color)]',\n      'forced-colors:stroke-[CanvasText]',\n      '[stroke-linecap:round] [stroke-linejoin:round]',\n    ],\n  },\n  variants: {\n    wavy: { true: {}, false: {} },\n  },\n  defaultVariants: { wavy: false },\n});\n\n/**\n * The variants of {@link linearProgressStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type LinearProgressStyleProps = VariantProps<typeof linearProgressStyles>;\n/**\n * The variants of {@link circularProgressStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type CircularProgressStyleProps = VariantProps<typeof circularProgressStyles>;\n"],"mappings":";;;AAuBA,MAAa,uBAAuB,GAAG;CACrC,OAAO;EACL,MAAM;EACN,KAAK;EACL,OAAO,CACL,4FACA,iCACF;EACA,WAAW;GACT;GACA;GACA;EACF;EACA,MAAM;CACR;CACA,UAAU,EACR,MAAM;EAAE,MAAM,CAAC;EAAG,OAAO,CAAC;CAAE,EAC9B;CACA,iBAAiB,EAAE,MAAM,MAAM;AACjC,CAAC;;AAGD,MAAa,yBAAyB,GAAG;CACvC,OAAO;EACL,MAAM;EACN,KAAK;EACL,OAAO,CACL,4FACA,iCACF;EACA,WAAW;GACT;GACA;GACA;EACF;CACF;CACA,UAAU,EACR,MAAM;EAAE,MAAM,CAAC;EAAG,OAAO,CAAC;CAAE,EAC9B;CACA,iBAAiB,EAAE,MAAM,MAAM;AACjC,CAAC"}

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

@@ -0,0 +1,7 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/progress/progress-tokens.d.ts
+/** The tokens of the progress indicators: `--md-comp-progress-indicator-<part>`. */
+export declare const progressIndicatorTokenSet: ComponentTokenSet<"active-indicator-color" | "track-color" | "stop-indicator-color">;
+//#endregion
+//# sourceMappingURL=progress-tokens.d.ts.map

package/dist/components/progress/progress-tokens.js

@@ -0,0 +1,39 @@
+import { color, defineComponentTokens } from "../../tokens/component.js";
+//#region src/components/progress/progress-tokens.ts
+/** The tokens of the progress indicators: `--md-comp-progress-indicator-<part>`. */
+const progressIndicatorTokenSet = defineComponentTokens({
+	name: "md-comp-progress-indicator",
+	tokens: {
+		"active-indicator-color": {
+			value: color("primary"),
+			description: "The active indicator: the line or arc that shows progress.",
+			compose: "ProgressIndicatorTokens.ActiveIndicatorColor",
+			paints: {
+				property: "stroke",
+				slot: "indicator"
+			}
+		},
+		"track-color": {
+			value: color("secondary-container"),
+			description: "The track behind the active indicator.",
+			compose: "ProgressIndicatorTokens.TrackColor",
+			paints: {
+				property: "stroke",
+				slot: "track"
+			}
+		},
+		"stop-indicator-color": {
+			value: color("primary"),
+			description: "The stop dot at the end of a determinate linear indicator's track.",
+			compose: "ProgressIndicatorTokens.StopIndicatorColor",
+			paints: {
+				property: "fill",
+				slot: "stop"
+			}
+		}
+	}
+});
+//#endregion
+export { progressIndicatorTokenSet };
+
+//# sourceMappingURL=progress-tokens.js.map

package/dist/components/progress/progress-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-tokens.js","names":[],"sources":["../../../src/components/progress/progress-tokens.ts"],"sourcesContent":["import { color, defineComponentTokens } from '../../tokens/component';\n\n/*\n * The progress indicators' component tokens, M3's `md.comp.progress-indicator.*` names\n * (checked against m3.material.io's token tables, 2026-10-14), with Compose's\n * ProgressIndicatorTokens defaults. Linear and circular indicators share them (each root\n * carries `data-tokens=\"md-comp-progress-indicator\"`); `progress-styles.ts` reads one\n * private variable per part. Thickness, the gap and the wave stay props and classes.\n */\n\n/** The tokens of the progress indicators: `--md-comp-progress-indicator-<part>`. */\nexport const progressIndicatorTokenSet = defineComponentTokens({\n  name: 'md-comp-progress-indicator',\n  tokens: {\n    'active-indicator-color': {\n      value: color('primary'),\n      description: 'The active indicator: the line or arc that shows progress.',\n      compose: 'ProgressIndicatorTokens.ActiveIndicatorColor',\n      paints: { property: 'stroke', slot: 'indicator' },\n    },\n    'track-color': {\n      value: color('secondary-container'),\n      description: 'The track behind the active indicator.',\n      compose: 'ProgressIndicatorTokens.TrackColor',\n      paints: { property: 'stroke', slot: 'track' },\n    },\n    'stop-indicator-color': {\n      value: color('primary'),\n      description: \"The stop dot at the end of a determinate linear indicator's track.\",\n      compose: 'ProgressIndicatorTokens.StopIndicatorColor',\n      paints: { property: 'fill', slot: 'stop' },\n    },\n  },\n});\n"],"mappings":";;;AAWA,MAAa,4BAA4B,sBAAsB;CAC7D,MAAM;CACN,QAAQ;EACN,0BAA0B;GACxB,OAAO,MAAM,SAAS;GACtB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAU,MAAM;GAAY;EAClD;EACA,eAAe;GACb,OAAO,MAAM,qBAAqB;GAClC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAU,MAAM;GAAQ;EAC9C;EACA,wBAAwB;GACtB,OAAO,MAAM,SAAS;GACtB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAQ,MAAM;GAAO;EAC3C;CACF;AACF,CAAC"}

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

@@ -0,0 +1,94 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/pull-to-refresh/PullToRefresh.d.ts
+export interface PullToRefreshClassNames {
+  /** The outer element, around the content. */
+  root?: string;
+  /**
+   * The zero-height sticky layer the indicator hangs from, at the top of the area. Give it a
+   * `top-*` class when a sticky app bar covers the top of a scrolling page. Its margins are
+   * the library's, so a flex root's `gap-*` or a block root's `space-y-*` never moves the
+   * content. In a grid root it is a grid item, so one row gap opens above the content.
+   */
+  layer?: string;
+  /** The 48px circle holding the loading indicator. */
+  indicator?: string;
+}
+/** Words the pull to refresh announces. */
+export interface PullToRefreshLabels {
+  /** The indicator's name while it follows a pull. @default "Pull to refresh" */
+  pull: string;
+  /**
+   * The indicator's name while refreshing, also announced when a refresh starts.
+   * @default "Refreshing"
+   */
+  refreshing: string;
+  /** Announced when a refresh completes. @default "Refreshed" */
+  refreshed: string;
+}
+interface PullToRefreshOwnProps {
+  /**
+   * Whether a refresh is running. While it is, the indicator rests at the threshold as an
+   * indeterminate loading indicator; when it turns `false` the indicator leaves. Set it `true`
+   * from a refresh button too, and the indicator comes in the same way. Leave it out to let a
+   * promise returned by `onRefresh` drive it.
+   */
+  refreshing?: boolean;
+  /**
+   * Called when a pull is released past the threshold. Start the refresh and set
+   * `refreshing`, or return a promise: without `refreshing`, the indicator stays until it
+   * settles.
+   */
+  onRefresh: () => void | Promise<unknown>;
+  /** How far the indicator travels before a release refreshes, px. @default 80 */
+  threshold?: number;
+  /** Turns the gesture off. A running refresh still shows its indicator. @default false */
+  disabled?: boolean;
+  /**
+   * Words the pull to refresh announces, with English defaults; name them for what refreshes
+   * ("Refreshing messages").
+   */
+  labels?: Partial<PullToRefreshLabels>;
+  /**
+   * The content: a scrolling list, grid or card collection, or a whole page. On a grid root
+   * (`grid` on `className`) the indicator's layer is a grid item, so one row gap opens above
+   * the content; put the grid on an element inside instead. Flex, block and `space-y-*` roots
+   * are exact.
+   */
+  children?: ReactNode;
+  /** Classes for the parts: `root`, `layer` (the sticky layer at the top) and `indicator`. */
+  classNames?: PullToRefreshClassNames;
+}
+export type PullToRefreshProps = PullToRefreshOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof PullToRefreshOwnProps>;
+/**
+ * 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>
+ */
+export declare function PullToRefresh({ refreshing: refreshingProp, onRefresh, threshold, disabled, labels: labelsProp, children, classNames, className, ref, ...rest }: PullToRefreshProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=PullToRefresh.d.ts.map