@kanso-labs/react-native-kanso-ui 0.1.0 → 0.2.0

package/dist/components/progress-indicator/index.js

@@ -0,0 +1,1024 @@
+import { HIDDEN } from "../../glyphs/hidden.js";
+import { parseLength } from "../../theme/resolve.js";
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { DETERMINATE_EASING, stylesOf as stylesOf$1 } from "../../indicator/styles.js";
+import { IndicatorLabels, IndicatorLine, activeLength, fillOf, readingOf, useEased, useIndicatorColors, useMeasuredWidth } from "../../indicator/index.js";
+import { keyframeAt, useLoop } from "../../indicator/motion.js";
+import { TURN, WAVE_HEIGHT, WAVE_ORIGIN, arcPath, wavePath, wavyArcPath } from "../../indicator/paths.js";
+import { c } from "react/compiler-runtime";
+import { I18nManager, StyleSheet, View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Animated, { useAnimatedProps, useAnimatedStyle, useDerivedValue, useReducedMotion } from "react-native-reanimated";
+//#region src/components/progress-indicator/index.tsx
+const CIRCULAR_SIZE = 40;
+const RADIUS = 18;
+const ARC_MS = 1333;
+const CYCLE_MS = ARC_MS * 4;
+const ROTATE_MS = Math.round(ARC_MS * 360 / 306);
+const RING_EASING = [
+	.4,
+	0,
+	.2,
+	1
+];
+const RING_SETTLE = [
+	0,
+	0,
+	.2,
+	1
+];
+const INDETERMINATE_MS = 2e3;
+const BUFFER_MS = 250;
+const LINE_SLOWDOWN = 2;
+const RING_SLOWDOWN = 1.25;
+const WAVE_WAVELENGTH = 40;
+const INDETERMINATE_WAVELENGTH = 20;
+const WAVE_REACH = 2048;
+const WAVE_FROM = 10;
+const WAVE_UNTIL = 95;
+const WAVY_SIZE = 48;
+const RING_AMPLITUDE = 1.6;
+const RING_WAVELENGTH = 15;
+const WAVY_RADIUS = 20.4;
+const RING_WAVE = {
+	amplitude: RING_AMPLITUDE,
+	centre: WAVY_SIZE / 2,
+	radius: WAVY_RADIUS,
+	waves: Math.round(TURN * WAVY_RADIUS / RING_WAVELENGTH)
+};
+const PITCH = 10;
+const PRIMARY_BAR = {
+	scale: [
+		[0, .08],
+		[
+			.3665,
+			.08,
+			[
+				.334731,
+				.12482,
+				.785844,
+				1
+			]
+		],
+		[
+			.6915,
+			.661479,
+			[
+				.06,
+				.11,
+				.6,
+				1
+			]
+		],
+		[1, .08]
+	],
+	start: -1.45167,
+	translate: [
+		[0, 0],
+		[
+			.2,
+			0,
+			[
+				.5,
+				0,
+				.701732,
+				.495819
+			]
+		],
+		[
+			.5915,
+			.836714,
+			[
+				.302435,
+				.381352,
+				.55,
+				.956352
+			]
+		],
+		[1, 2.00611]
+	]
+};
+const SECONDARY_BAR = {
+	scale: [
+		[
+			0,
+			.08,
+			[
+				.205028,
+				.057051,
+				.57661,
+				.453971
+			]
+		],
+		[
+			.1915,
+			.457104,
+			[
+				.152313,
+				.196432,
+				.648374,
+				1.00432
+			]
+		],
+		[
+			.4415,
+			.72796,
+			[
+				.257759,
+				-.003163,
+				.211762,
+				1.38179
+			]
+		],
+		[1, .08]
+	],
+	start: -.548889,
+	translate: [
+		[
+			0,
+			0,
+			[
+				.15,
+				0,
+				.515058,
+				.409685
+			]
+		],
+		[
+			.25,
+			.376519,
+			[
+				.31033,
+				.284058,
+				.8,
+				.733712
+			]
+		],
+		[
+			.4835,
+			.843862,
+			[
+				.4,
+				.627035,
+				.6,
+				.902026
+			]
+		],
+		[1, 1.60278]
+	]
+};
+const EXPAND_ARC = [
+	[
+		0,
+		.08,
+		RING_EASING
+	],
+	[
+		.5,
+		.75,
+		RING_EASING
+	],
+	[1, .08]
+];
+const TRAVEL_ARC = [
+	[
+		0,
+		0,
+		RING_EASING
+	],
+	[
+		.125,
+		.375,
+		RING_EASING
+	],
+	[
+		.25,
+		.75,
+		RING_EASING
+	],
+	[
+		.375,
+		1.125,
+		RING_EASING
+	],
+	[
+		.5,
+		1.5,
+		RING_EASING
+	],
+	[
+		.625,
+		1.875,
+		RING_EASING
+	],
+	[
+		.75,
+		2.25,
+		RING_EASING
+	],
+	[
+		.875,
+		2.625,
+		RING_EASING
+	],
+	[1, 3]
+];
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+const styles = StyleSheet.create({
+	bar: {
+		height: 4,
+		left: 0,
+		position: "absolute",
+		top: 0,
+		transformOrigin: "left center"
+	},
+	buffered: {
+		flexShrink: 0,
+		height: 4
+	},
+	dot: {
+		height: 4,
+		width: 4
+	},
+	dotRow: {
+		flexDirection: "row",
+		gap: 6
+	},
+	dots: {
+		flexGrow: 1,
+		flexShrink: 1,
+		height: 4,
+		minWidth: 0,
+		overflow: "hidden"
+	},
+	line: {
+		alignSelf: "stretch",
+		justifyContent: "center"
+	},
+	mirrored: { transform: [{ scaleX: -1 }] },
+	rootCircular: { alignItems: "flex-start" },
+	row: {
+		alignSelf: "stretch",
+		height: 4,
+		overflow: "hidden"
+	},
+	track: { ...StyleSheet.absoluteFill },
+	wave: {
+		left: 0,
+		overflow: "hidden",
+		position: "absolute",
+		top: 0
+	},
+	wavyLine: {
+		alignSelf: "stretch",
+		height: WAVE_HEIGHT,
+		justifyContent: "center"
+	}
+});
+const stylesOf = themedStyles(({ radii }) => StyleSheet.create({
+	bar: { borderRadius: radii.pill },
+	dot: { borderRadius: radii.circle },
+	row: { borderRadius: radii.pill }
+}));
+/**
+* The dots beyond the buffer, scrolling toward the start of the line. There
+* is one more of them than the row has room for, so the row stays full as
+* they move.
+*/
+function Buffer(t0) {
+	const $ = c(18);
+	const { colors, share, width } = t0;
+	const theme = useTheme();
+	const own = stylesOf(theme);
+	const reduceMotion = useReducedMotion();
+	const clock = useLoop(BUFFER_MS * (reduceMotion ? LINE_SLOWDOWN : 1), true);
+	const direction = I18nManager.isRTL ? -1 : 1;
+	const scroll = useAnimatedStyle(() => {
+		"worklet";
+		return { transform: [{ translateX: -10 * clock.get() * direction }] };
+	});
+	let t1;
+	if ($[0] !== colors.track || $[1] !== share) {
+		t1 = composeStyles(styles.buffered, fillOf(colors.track), widthOf(`${share}%`));
+		$[0] = colors.track;
+		$[1] = share;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(View, { style: t1 });
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	const T0 = View;
+	const t3 = styles;
+	const t4 = Animated;
+	let t5;
+	if ($[5] !== scroll) {
+		t5 = composeStyles(styles.dotRow, scroll);
+		$[5] = scroll;
+		$[6] = t5;
+	} else t5 = $[6];
+	const t6 = dotsFor(width).map((dot) => /* @__PURE__ */ jsx(View, { style: composeStyles(styles.dot, own.dot, fillOf(colors.track)) }, dot));
+	let t7;
+	if ($[7] !== t4.View || $[8] !== t5 || $[9] !== t6) {
+		t7 = /* @__PURE__ */ jsx(t4.View, {
+			style: t5,
+			children: t6
+		});
+		$[7] = t4.View;
+		$[8] = t5;
+		$[9] = t6;
+		$[10] = t7;
+	} else t7 = $[10];
+	let t8;
+	if ($[11] !== T0 || $[12] !== t3.dots || $[13] !== t7) {
+		t8 = /* @__PURE__ */ jsx(T0, {
+			style: t3.dots,
+			children: t7
+		});
+		$[11] = T0;
+		$[12] = t3.dots;
+		$[13] = t7;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] !== t2 || $[16] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Fragment, { children: [t2, t8] });
+		$[15] = t2;
+		$[16] = t8;
+		$[17] = t9;
+	} else t9 = $[17];
+	return t9;
+}
+function bufferShare(buffer, percentage, minValue, maxValue) {
+	if (buffer === void 0) return;
+	const range = maxValue - minValue;
+	const buffered = range === 0 ? 0 : (buffer - minValue) / range * 100;
+	const remaining = 100 - percentage;
+	if (remaining <= 0) return 0;
+	return Math.min(100, Math.max(0, (buffered - percentage) / remaining * 100));
+}
+/**
+* The ring: two arcs of one circle while determinate, one arc growing,
+* shrinking and travelling round while indeterminate, and for the wavy shape a
+* wave over the active arc. Drawn on a box of its own size and scaled to the
+* diameter, so the stroke and the gap scale with it.
+*/
+function CircularTrack(t0) {
+	const $ = c(28);
+	const { colors, diameter, isIndeterminate, percentage, shape } = t0;
+	const { motion } = useTheme();
+	const reduceMotion = useReducedMotion();
+	const wavy = shape === "wavy";
+	const waves = wavy && !reduceMotion;
+	const box = wavy ? WAVY_SIZE : CIRCULAR_SIZE;
+	const centre = box / 2;
+	const radius = wavy ? WAVY_RADIUS : RADIUS;
+	const circumference = TURN * radius;
+	let t1;
+	if ($[0] !== motion.durationLong2) {
+		t1 = {
+			duration: motion.durationLong2,
+			easing: RING_SETTLE
+		};
+		$[0] = motion.durationLong2;
+		$[1] = t1;
+	} else t1 = $[1];
+	const timing = t1;
+	const shown = useEased(percentage, timing);
+	const fade = useEased(waves && (isIndeterminate || isWaving(percentage)) ? 1 : 0, timing);
+	const slowdown = reduceMotion ? RING_SLOWDOWN : 1;
+	const arc = useLoop(ARC_MS * slowdown, isIndeterminate);
+	const cycle = useLoop(CYCLE_MS * slowdown, isIndeterminate);
+	let t2;
+	if ($[2] !== slowdown) {
+		t2 = Math.round(ROTATE_MS * slowdown);
+		$[2] = slowdown;
+		$[3] = t2;
+	} else t2 = $[3];
+	const turn = useLoop(t2, isIndeterminate);
+	const active = useAnimatedProps(() => {
+		"worklet";
+		const opacity = 1 - fade.get();
+		if (isIndeterminate) {
+			const from = TURN / 4 + TURN * (turn.get() + keyframeAt(TRAVEL_ARC, cycle.get()));
+			return {
+				d: arcPath(centre, radius, from, TURN * keyframeAt(EXPAND_ARC, arc.get())),
+				opacity
+			};
+		}
+		return {
+			d: arcPath(centre, radius, 0, TURN * shown.get() / 100),
+			opacity
+		};
+	});
+	const track = useAnimatedProps(() => {
+		"worklet";
+		const length = circumference * shown.get() / 100;
+		return { d: arcPath(centre, radius, (length + 4) / radius, Math.max(0, circumference - length - 8) / radius) };
+	});
+	const t3 = `0 0 ${box} ${box}`;
+	let t4;
+	if ($[4] !== colors.track || $[5] !== isIndeterminate || $[6] !== track) {
+		t4 = isIndeterminate ? null : /* @__PURE__ */ jsx(AnimatedPath, {
+			animatedProps: track,
+			...strokeOf(colors.track)
+		});
+		$[4] = colors.track;
+		$[5] = isIndeterminate;
+		$[6] = track;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== colors.active) {
+		t5 = strokeOf(colors.active);
+		$[8] = colors.active;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== active || $[11] !== t5) {
+		t6 = /* @__PURE__ */ jsx(AnimatedPath, {
+			animatedProps: active,
+			...t5
+		});
+		$[10] = active;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== arc || $[14] !== colors || $[15] !== cycle || $[16] !== fade || $[17] !== isIndeterminate || $[18] !== shown || $[19] !== turn || $[20] !== waves) {
+		t7 = waves ? /* @__PURE__ */ jsx(RingWavePath, {
+			arc,
+			colors,
+			cycle,
+			fade,
+			isIndeterminate,
+			shown,
+			turn
+		}) : null;
+		$[13] = arc;
+		$[14] = colors;
+		$[15] = cycle;
+		$[16] = fade;
+		$[17] = isIndeterminate;
+		$[18] = shown;
+		$[19] = turn;
+		$[20] = waves;
+		$[21] = t7;
+	} else t7 = $[21];
+	let t8;
+	if ($[22] !== diameter || $[23] !== t3 || $[24] !== t4 || $[25] !== t6 || $[26] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Svg, {
+			...HIDDEN,
+			height: diameter,
+			viewBox: t3,
+			width: diameter,
+			children: [
+				t4,
+				t6,
+				t7
+			]
+		});
+		$[22] = diameter;
+		$[23] = t3;
+		$[24] = t4;
+		$[25] = t6;
+		$[26] = t7;
+		$[27] = t8;
+	} else t8 = $[27];
+	return t8;
+}
+/**
+* The line determinate: src/indicator's, with the buffer in its track, and
+* for the wavy shape a wave over its active indicator, crossfading with it as
+* the value crosses the bounds the wave stands between.
+*/
+function DeterminateLine(t0) {
+	const $ = c(21);
+	const { buffer, colors, percentage, waves, width } = t0;
+	const { motion } = useTheme();
+	let t1;
+	if ($[0] !== motion.durationMedium1) {
+		t1 = {
+			duration: motion.durationMedium1,
+			easing: DETERMINATE_EASING
+		};
+		$[0] = motion.durationMedium1;
+		$[1] = t1;
+	} else t1 = $[1];
+	const timing = t1;
+	const shown = useEased(percentage, timing);
+	const fade = useEased(waves && isWaving(percentage) ? 1 : 0, timing);
+	const under = useDerivedValue(() => 1 - fade.get());
+	const t2 = waves ? under : void 0;
+	let t3;
+	if ($[2] !== buffer || $[3] !== colors || $[4] !== width) {
+		t3 = buffer === void 0 ? void 0 : /* @__PURE__ */ jsx(Buffer, {
+			colors,
+			share: buffer,
+			width
+		});
+		$[2] = buffer;
+		$[3] = colors;
+		$[4] = width;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== colors || $[7] !== shown || $[8] !== t2 || $[9] !== t3 || $[10] !== width) {
+		t4 = /* @__PURE__ */ jsx(IndicatorLine, {
+			activeOpacity: t2,
+			colors,
+			percentage: shown,
+			width,
+			children: t3
+		});
+		$[6] = colors;
+		$[7] = shown;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = width;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== colors || $[13] !== fade || $[14] !== shown || $[15] !== waves || $[16] !== width) {
+		t5 = waves ? /* @__PURE__ */ jsx(LineWave, {
+			colors,
+			fade,
+			shown,
+			width
+		}) : null;
+		$[12] = colors;
+		$[13] = fade;
+		$[14] = shown;
+		$[15] = waves;
+		$[16] = width;
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
+	if ($[18] !== t4 || $[19] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Fragment, { children: [t4, t5] });
+		$[18] = t4;
+		$[19] = t5;
+		$[20] = t6;
+	} else t6 = $[20];
+	return t6;
+}
+function dotsFor(width) {
+	return Array.from({ length: Math.ceil(width / PITCH) + 1 }, (_, index) => index);
+}
+function IndeterminateBars(t0) {
+	const $ = c(3);
+	const { clock, colors, width } = t0;
+	const own = stylesOf(useTheme());
+	const primary = useBarStyle(clock, PRIMARY_BAR, width);
+	const secondary = useBarStyle(clock, SECONDARY_BAR, width);
+	const t1 = Animated;
+	const t2 = composeStyles(styles.bar, own.bar, widthOf(width), fillOf(colors.active), secondary);
+	let t3;
+	if ($[0] !== t1.View || $[1] !== t2) {
+		t3 = /* @__PURE__ */ jsx(t1.View, { style: t2 });
+		$[0] = t1.View;
+		$[1] = t2;
+		$[2] = t3;
+	} else t3 = $[2];
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Animated.View, { style: composeStyles(styles.bar, own.bar, widthOf(width), fillOf(colors.active), primary) }), t3] });
+}
+/**
+* The line indeterminate: the track, with two bars crossing it, or for the
+* wavy shape two stretches of a wave crossing it where the bars would be. The
+* row is mirrored under a right-to-left layout, which makes the sweep travel
+* the way the line reads while the bars move as Material's keyframes say.
+*/
+function IndeterminateLine(t0) {
+	const $ = c(23);
+	const { colors, waves, width } = t0;
+	const own = stylesOf(useTheme());
+	const reduceMotion = useReducedMotion();
+	const clock = useLoop(INDETERMINATE_MS * (reduceMotion ? LINE_SLOWDOWN : 1), true);
+	const mirrored = I18nManager.isRTL ? styles.mirrored : void 0;
+	const T0 = View;
+	const t1 = composeStyles(styles.row, own.row, mirrored);
+	let t2;
+	if ($[0] !== colors.track) {
+		t2 = composeStyles(styles.track, fillOf(colors.track));
+		$[0] = colors.track;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== t2) {
+		t3 = /* @__PURE__ */ jsx(View, { style: t2 });
+		$[2] = t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== clock || $[5] !== colors || $[6] !== waves || $[7] !== width) {
+		t4 = waves ? null : /* @__PURE__ */ jsx(IndeterminateBars, {
+			clock,
+			colors,
+			width
+		});
+		$[4] = clock;
+		$[5] = colors;
+		$[6] = waves;
+		$[7] = width;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== T0 || $[10] !== t1 || $[11] !== t3 || $[12] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(T0, {
+			style: t1,
+			children: [t3, t4]
+		});
+		$[9] = T0;
+		$[10] = t1;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== clock || $[15] !== colors || $[16] !== mirrored || $[17] !== waves || $[18] !== width) {
+		t6 = waves ? /* @__PURE__ */ jsxs(Svg, {
+			...HIDDEN,
+			height: WAVE_HEIGHT,
+			style: composeStyles(styles.wave, mirrored),
+			width,
+			children: [/* @__PURE__ */ jsx(WaveBar, {
+				bar: PRIMARY_BAR,
+				clock,
+				colors,
+				width
+			}), /* @__PURE__ */ jsx(WaveBar, {
+				bar: SECONDARY_BAR,
+				clock,
+				colors,
+				width
+			})]
+		}) : null;
+		$[14] = clock;
+		$[15] = colors;
+		$[16] = mirrored;
+		$[17] = waves;
+		$[18] = width;
+		$[19] = t6;
+	} else t6 = $[19];
+	let t7;
+	if ($[20] !== t5 || $[21] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Fragment, { children: [t5, t6] });
+		$[20] = t5;
+		$[21] = t6;
+		$[22] = t7;
+	} else t7 = $[22];
+	return t7;
+}
+function isWaving(percentage) {
+	return percentage > WAVE_FROM && percentage < WAVE_UNTIL;
+}
+/**
+* The line, measured: the row is laid out first and the line drawn to its
+* width, which is what web's `calc()` and container units do without a
+* measurement.
+*/
+function LinearTrack(t0) {
+	const $ = c(11);
+	const { buffer, colors, isIndeterminate, percentage, shape } = t0;
+	const { onLayout, width } = useMeasuredWidth();
+	const reduceMotion = useReducedMotion();
+	const wavy = shape === "wavy";
+	const waves = wavy && !reduceMotion && width <= WAVE_REACH;
+	const t1 = wavy ? styles.wavyLine : styles.line;
+	let t2;
+	if ($[0] !== buffer || $[1] !== colors || $[2] !== isIndeterminate || $[3] !== percentage || $[4] !== waves || $[5] !== width) {
+		t2 = isIndeterminate ? /* @__PURE__ */ jsx(IndeterminateLine, {
+			colors,
+			waves,
+			width
+		}) : /* @__PURE__ */ jsx(DeterminateLine, {
+			buffer,
+			colors,
+			percentage,
+			waves,
+			width
+		});
+		$[0] = buffer;
+		$[1] = colors;
+		$[2] = isIndeterminate;
+		$[3] = percentage;
+		$[4] = waves;
+		$[5] = width;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== onLayout || $[8] !== t1 || $[9] !== t2) {
+		t3 = /* @__PURE__ */ jsx(View, {
+			onLayout,
+			style: t1,
+			children: t2
+		});
+		$[7] = onLayout;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	return t3;
+}
+/** The determinate line's wave, cut to the active indicator's length. */
+function LineWave(t0) {
+	const $ = c(9);
+	const { colors, fade, shown, width } = t0;
+	const wave = useAnimatedProps(() => {
+		"worklet";
+		const length = Math.max(0, activeLength(width, shown.get()) - 4);
+		return {
+			d: wavePath(WAVE_WAVELENGTH, WAVE_ORIGIN, WAVE_ORIGIN + length),
+			opacity: fade.get()
+		};
+	});
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = composeStyles(styles.wave, I18nManager.isRTL ? styles.mirrored : void 0);
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== colors.active) {
+		t2 = strokeOf(colors.active);
+		$[1] = colors.active;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== t2 || $[4] !== wave) {
+		t3 = /* @__PURE__ */ jsx(AnimatedPath, {
+			animatedProps: wave,
+			...t2
+		});
+		$[3] = t2;
+		$[4] = wave;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t3 || $[7] !== width) {
+		t4 = /* @__PURE__ */ jsx(Svg, {
+			...HIDDEN,
+			height: WAVE_HEIGHT,
+			style: t1,
+			width,
+			children: t3
+		});
+		$[6] = t3;
+		$[7] = width;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
+}
+/**
+* Progress through a task, as a line or a ring. Pass `value` between
+* `minValue` and `maxValue`, or set `isIndeterminate` for work whose length is
+* not known. `formatOptions` says how the value reads, in `locale`, and
+* `buffer` marks how far the work is loaded ahead of it.
+*
+* ```tsx
+* <ProgressIndicator label="Label" showValue value={40} />
+* ```
+*
+* A screen reader hears it as a progress bar named by its label, with its
+* value as `formatOptions` writes it, and no value while it is indeterminate.
+* `style`, `ref` and `testID` land on the indicator as a whole, which is the
+* view a layout positions.
+*/
+function ProgressIndicator(t0) {
+	const $ = c(41);
+	let ariaLabel;
+	let buffer;
+	let diameter;
+	let formatOptions;
+	let label;
+	let locale;
+	let props;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	let valueLabel;
+	if ($[0] !== t0) {
+		({"aria-label": ariaLabel, buffer, diameter, formatOptions, isIndeterminate: t1, label, locale, maxValue: t2, minValue: t3, shape: t4, showValue: t5, style, tone: t6, value: t7, valueLabel, variant: t8, ...props} = t0);
+		$[0] = t0;
+		$[1] = ariaLabel;
+		$[2] = buffer;
+		$[3] = diameter;
+		$[4] = formatOptions;
+		$[5] = label;
+		$[6] = locale;
+		$[7] = props;
+		$[8] = style;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = t6;
+		$[15] = t7;
+		$[16] = t8;
+		$[17] = valueLabel;
+	} else {
+		ariaLabel = $[1];
+		buffer = $[2];
+		diameter = $[3];
+		formatOptions = $[4];
+		label = $[5];
+		locale = $[6];
+		props = $[7];
+		style = $[8];
+		t1 = $[9];
+		t2 = $[10];
+		t3 = $[11];
+		t4 = $[12];
+		t5 = $[13];
+		t6 = $[14];
+		t7 = $[15];
+		t8 = $[16];
+		valueLabel = $[17];
+	}
+	const isIndeterminate = t1 === void 0 ? false : t1;
+	const maxValue = t2 === void 0 ? 100 : t2;
+	const minValue = t3 === void 0 ? 0 : t3;
+	const shape = t4 === void 0 ? "flat" : t4;
+	const showValue = t5 === void 0 ? false : t5;
+	const tone = t6 === void 0 ? "primary" : t6;
+	const value = t7 === void 0 ? 0 : t7;
+	const variant = t8 === void 0 ? "linear" : t8;
+	const theme = useTheme();
+	const colors = useIndicatorColors(tone);
+	let t9;
+	if ($[18] !== ariaLabel || $[19] !== buffer || $[20] !== colors || $[21] !== diameter || $[22] !== formatOptions || $[23] !== isIndeterminate || $[24] !== label || $[25] !== locale || $[26] !== maxValue || $[27] !== minValue || $[28] !== props || $[29] !== shape || $[30] !== showValue || $[31] !== style || $[32] !== theme || $[33] !== value || $[34] !== valueLabel || $[35] !== variant) {
+		const reading = readingOf({
+			formatOptions,
+			locale,
+			maxValue,
+			minValue,
+			value,
+			valueLabel
+		});
+		const text = isIndeterminate ? void 0 : reading.text;
+		let t10;
+		if ($[37] !== style || $[38] !== theme || $[39] !== variant) {
+			t10 = composeStyles(stylesOf$1(theme).root, variant === "circular" ? styles.rootCircular : void 0, style);
+			$[37] = style;
+			$[38] = theme;
+			$[39] = variant;
+			$[40] = t10;
+		} else t10 = $[40];
+		t9 = /* @__PURE__ */ jsxs(View, {
+			accessible: true,
+			"aria-label": label ?? ariaLabel,
+			"aria-valuemax": maxValue,
+			"aria-valuemin": minValue,
+			"aria-valuenow": isIndeterminate ? void 0 : reading.value,
+			"aria-valuetext": text,
+			role: "progressbar",
+			...props,
+			style: t10,
+			children: [/* @__PURE__ */ jsx(IndicatorLabels, {
+				label,
+				value: showValue ? text : void 0
+			}), variant === "circular" ? /* @__PURE__ */ jsx(CircularTrack, {
+				colors,
+				diameter: (diameter === void 0 ? void 0 : parseLength(diameter)) ?? (shape === "wavy" ? WAVY_SIZE : CIRCULAR_SIZE),
+				isIndeterminate,
+				percentage: reading.percentage,
+				shape
+			}) : /* @__PURE__ */ jsx(LinearTrack, {
+				buffer: bufferShare(buffer, reading.percentage, minValue, maxValue),
+				colors,
+				isIndeterminate,
+				percentage: reading.percentage,
+				shape
+			})]
+		});
+		$[18] = ariaLabel;
+		$[19] = buffer;
+		$[20] = colors;
+		$[21] = diameter;
+		$[22] = formatOptions;
+		$[23] = isIndeterminate;
+		$[24] = label;
+		$[25] = locale;
+		$[26] = maxValue;
+		$[27] = minValue;
+		$[28] = props;
+		$[29] = shape;
+		$[30] = showValue;
+		$[31] = style;
+		$[32] = theme;
+		$[33] = value;
+		$[34] = valueLabel;
+		$[35] = variant;
+		$[36] = t9;
+	} else t9 = $[36];
+	return t9;
+}
+/**
+* The wave over the ring's active arc, cut by the same lengths, or running
+* round as the indeterminate arc does. Its crests turn with the ring.
+*/
+function RingWavePath(t0) {
+	const $ = c(5);
+	const { arc, colors, cycle, fade, isIndeterminate, shown, turn } = t0;
+	const wave = useAnimatedProps(() => {
+		"worklet";
+		if (isIndeterminate) {
+			const phase = TURN / 4 + TURN * turn.get();
+			return {
+				d: wavyArcPath(RING_WAVE, phase, phase + TURN * keyframeAt(TRAVEL_ARC, cycle.get()), TURN * keyframeAt(EXPAND_ARC, arc.get())),
+				opacity: fade.get()
+			};
+		}
+		return {
+			d: wavyArcPath(RING_WAVE, 0, 0, TURN * shown.get() / 100),
+			opacity: fade.get()
+		};
+	});
+	let t1;
+	if ($[0] !== colors.active) {
+		t1 = strokeOf(colors.active);
+		$[0] = colors.active;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== t1 || $[3] !== wave) {
+		t2 = /* @__PURE__ */ jsx(AnimatedPath, {
+			animatedProps: wave,
+			...t1
+		});
+		$[2] = t1;
+		$[3] = wave;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
+function strokeOf(color) {
+	return {
+		fill: "none",
+		stroke: color,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: 4
+	};
+}
+/**
+* A bar of the indeterminate line where the clock has it: its start, and its
+* scale from there, both as web's keyframes give them in shares of the row.
+*/
+function useBarStyle(clock, bar, width) {
+	return useAnimatedStyle(() => {
+		"worklet";
+		const time = clock.get();
+		return { transform: [{ translateX: (bar.start + keyframeAt(bar.translate, time)) * width }, { scaleX: keyframeAt(bar.scale, time) }] };
+	});
+}
+/**
+* A bar of the indeterminate line drawn as a stretch of the wave: from where
+* the flat bar starts, as long as the flat bar is, and nothing of it before
+* the wave's own start.
+*/
+function WaveBar(t0) {
+	const $ = c(5);
+	const { bar, clock, colors, width } = t0;
+	const wave = useAnimatedProps(() => {
+		"worklet";
+		const time = clock.get();
+		const from = WAVE_ORIGIN + (bar.start + keyframeAt(bar.translate, time)) * width;
+		const to = from + keyframeAt(bar.scale, time) * width;
+		return { d: wavePath(INDETERMINATE_WAVELENGTH, Math.max(WAVE_ORIGIN, from), Math.min(WAVE_ORIGIN + width, to)) };
+	});
+	let t1;
+	if ($[0] !== colors.active) {
+		t1 = strokeOf(colors.active);
+		$[0] = colors.active;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== t1 || $[3] !== wave) {
+		t2 = /* @__PURE__ */ jsx(AnimatedPath, {
+			animatedProps: wave,
+			...t1
+		});
+		$[2] = t1;
+		$[3] = wave;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
+function widthOf(width) {
+	return { width };
+}
+//#endregion
+export { ProgressIndicator };
+
+//# sourceMappingURL=index.js.map