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

package/dist/components/snackbar/index.js

@@ -0,0 +1,540 @@
+import { CloseGlyph } from "../../glyphs/index.js";
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useTypeRole } from "../../typography/roles.js";
+import { hitSlop, usePressFeedback } from "../../press/index.js";
+import { useWindowSizeClass } from "../../hooks/useWindowSizeClass.js";
+import { Overlay } from "../../overlay/host.js";
+import { c } from "react/compiler-runtime";
+import { AccessibilityInfo, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { use, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { SafeAreaInsetsContext } from "react-native-safe-area-context";
+//#region src/components/snackbar/index.tsx
+const MESSAGE_MS = 5e3;
+const UNTIL_CLOSED = 0;
+const MIN_WIDE = 320;
+const MAX_WIDE = 576;
+const MESSAGE_BLOCK_PADDING = 14;
+const RING_WIDTH = 2;
+const RING_OFFSET = -4;
+const NO_INSETS = {
+	bottom: 0,
+	left: 0,
+	right: 0,
+	top: 0
+};
+const stylesOf = themedStyles(({ colors, radii, shadows, sizing, spacing }) => StyleSheet.create({
+	action: {
+		alignItems: "center",
+		justifyContent: "center",
+		minHeight: sizing.controlSm,
+		paddingHorizontal: spacing.md,
+		paddingVertical: spacing.sm
+	},
+	actionLabel: { color: colors.inversePrimary },
+	actionRing: {
+		outlineColor: colors.inversePrimary,
+		outlineOffset: RING_OFFSET,
+		outlineStyle: "solid",
+		outlineWidth: RING_WIDTH
+	},
+	close: {
+		alignItems: "center",
+		height: sizing.controlMd,
+		justifyContent: "center",
+		width: sizing.controlMd
+	},
+	closeRing: {
+		outlineColor: colors.inverseOnSurface,
+		outlineOffset: RING_OFFSET,
+		outlineStyle: "solid",
+		outlineWidth: RING_WIDTH
+	},
+	control: { borderRadius: radii.pill },
+	message: {
+		flexBasis: "50%",
+		flexGrow: 1,
+		marginHorizontal: spacing.sm,
+		minWidth: 0,
+		paddingVertical: MESSAGE_BLOCK_PADDING
+	},
+	messageText: { color: colors.inverseOnSurface },
+	region: {
+		alignItems: "center",
+		bottom: 0,
+		left: 0,
+		paddingTop: spacing.sm,
+		pointerEvents: "box-none",
+		position: "absolute",
+		right: 0
+	},
+	strip: {
+		alignItems: "center",
+		backgroundColor: colors.inverseSurface,
+		borderRadius: radii.xs,
+		boxShadow: shadows.elevation3,
+		flexDirection: "row",
+		flexWrap: "wrap",
+		minHeight: sizing.controlMd,
+		paddingHorizontal: spacing.sm,
+		width: "100%"
+	}
+}));
+const styles = StyleSheet.create({
+	controls: {
+		alignItems: "center",
+		flexDirection: "row",
+		flexShrink: 0,
+		marginStart: "auto"
+	},
+	wide: {
+		maxWidth: MAX_WIDE,
+		minWidth: MIN_WIDE
+	}
+});
+/**
+* The queue a snackbar is shown from. Make one where the app can reach it, a
+* module of its own being the usual place, mount `Snackbar` once with it, and
+* call `add` from anywhere.
+*
+* ```ts
+* const messages = new Snackbar.Queue()
+* messages.add('Label', { action: { label: 'Undo', onPress: undo } })
+* ```
+*/
+var SnackbarQueue = class {
+	#added = 0;
+	#listeners = /* @__PURE__ */ new Set();
+	#shown = null;
+	/**
+	* Shows a message in place of the one on screen, and returns the key that
+	* closes it. The message it replaces is closed, so its `onClose` runs, and
+	* it does not come back.
+	*/
+	add(message, options = {}) {
+		const { action, onClose, showCloseButton = false, timeout } = options;
+		this.clear();
+		this.#added += 1;
+		const key = `snackbar-${String(this.#added)}`;
+		this.#shown = {
+			action,
+			key,
+			message,
+			onClose,
+			showCloseButton,
+			timeout: timeout ?? (action === void 0 ? MESSAGE_MS : UNTIL_CLOSED)
+		};
+		this.#changed();
+		return key;
+	}
+	/** Closes the snackbar on screen, running its `onClose`. */
+	clear() {
+		if (this.#shown !== null) this.close(this.#shown.key);
+	}
+	/** Closes one snackbar, by the key `add` returned. */
+	close(key) {
+		const shown = this.#shown;
+		if (shown?.key !== key) return;
+		this.#shown = null;
+		this.#changed();
+		shown.onClose?.();
+	}
+	/**
+	* Calls `listener` whenever the message on screen changes, and returns what
+	* stops it. `Snackbar` reads the queue through this and `visible`, and
+	* neither is meant for a call site.
+	*/
+	subscribe = (listener) => {
+		this.#listeners.add(listener);
+		return () => {
+			this.#listeners.delete(listener);
+		};
+	};
+	/** The message on screen, or `null`. */
+	visible = () => this.#shown;
+	#changed() {
+		for (const listener of this.#listeners) listener();
+	}
+};
+function actionOf(action, close) {
+	return () => {
+		action.onPress();
+		close();
+	};
+}
+function closeOf(queue, key) {
+	return () => {
+		queue.close(key);
+	};
+}
+function flagOf(set, value) {
+	return () => {
+		set(value);
+	};
+}
+function measureInto(height) {
+	return (event) => {
+		height.set(event.nativeEvent.layout.height);
+	};
+}
+/**
+* A brief message at the bottom of the screen, with an optional action, with
+* web's props and values. Mount one of these with a `Snackbar.Queue`, and
+* call the queue's `add` to show a message from anywhere.
+*
+* ```tsx
+* const messages = new Snackbar.Queue()
+*
+* <Snackbar queue={messages} />
+* ```
+*
+* It draws in the overlay host of the app's outermost `ThemeScope`, above the
+* screen, and needs one around it. It is one region rather than one per
+* message, so mount it once, near the root, inside the `SafeAreaProvider`
+* whose insets it keeps clear of.
+*
+* `style`, `ref` and `testID` land on that region, a view along the bottom of
+* the screen that holds the message.
+*/
+function Snackbar(t0) {
+	const $ = c(24);
+	let props;
+	let queue;
+	let style;
+	let t1;
+	if ($[0] !== t0) {
+		({closeLabel: t1, queue, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = queue;
+		$[3] = style;
+		$[4] = t1;
+	} else {
+		props = $[1];
+		queue = $[2];
+		style = $[3];
+		t1 = $[4];
+	}
+	const closeLabel = t1 === void 0 ? "Close" : t1;
+	const theme = useTheme();
+	const insets = use(SafeAreaInsetsContext) ?? NO_INSETS;
+	const wide = useWindowSizeClass() !== "compact";
+	const shown = useSyncExternalStore(queue.subscribe, queue.visible);
+	let t2;
+	if ($[5] !== queue) {
+		t2 = () => queue.visible()?.key;
+		$[5] = queue;
+		$[6] = t2;
+	} else t2 = $[6];
+	const [standing] = useState(t2);
+	const { spacing } = theme;
+	let t3;
+	if ($[7] !== insets.bottom || $[8] !== insets.left || $[9] !== insets.right || $[10] !== spacing.sm || $[11] !== style || $[12] !== theme) {
+		t3 = composeStyles(stylesOf(theme).region, {
+			paddingBottom: spacing.sm + insets.bottom,
+			paddingLeft: spacing.sm + insets.left,
+			paddingRight: spacing.sm + insets.right
+		}, style);
+		$[7] = insets.bottom;
+		$[8] = insets.left;
+		$[9] = insets.right;
+		$[10] = spacing.sm;
+		$[11] = style;
+		$[12] = theme;
+		$[13] = t3;
+	} else t3 = $[13];
+	let t4;
+	if ($[14] !== closeLabel || $[15] !== queue || $[16] !== shown || $[17] !== standing || $[18] !== wide) {
+		t4 = shown === null ? null : /* @__PURE__ */ jsx(SnackbarStrip, {
+			arrives: shown.key !== standing,
+			closeLabel,
+			queue,
+			shown,
+			wide
+		}, shown.key);
+		$[14] = closeLabel;
+		$[15] = queue;
+		$[16] = shown;
+		$[17] = standing;
+		$[18] = wide;
+		$[19] = t4;
+	} else t4 = $[19];
+	let t5;
+	if ($[20] !== props || $[21] !== t3 || $[22] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Overlay, { children: /* @__PURE__ */ jsx(View, {
+			"aria-live": Platform.OS === "web" ? "polite" : void 0,
+			...props,
+			style: t3,
+			children: t4
+		}) });
+		$[20] = props;
+		$[21] = t3;
+		$[22] = t4;
+		$[23] = t5;
+	} else t5 = $[23];
+	return t5;
+}
+/**
+* One of the snackbar's two controls, a pill drawing the state layer, the
+* ripple and the ring in its own colour, over a target brought up to 48dp
+* from the `height` it is drawn at. It reports when it takes and loses focus,
+* which pauses the message's timer.
+*/
+function SnackbarButton(t0) {
+	const $ = c(14);
+	const { "aria-label": ariaLabel, children, color, height, onFocusChange, onPress, ring, style } = t0;
+	const theme = useTheme();
+	const corners = stylesOf(theme).control;
+	let t1;
+	let t2;
+	if ($[0] !== onFocusChange) {
+		t1 = () => {
+			onFocusChange(false);
+		};
+		t2 = () => {
+			onFocusChange(true);
+		};
+		$[0] = onFocusChange;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	const feedback = usePressFeedback({
+		color,
+		corners,
+		onBlur: t1,
+		onFocus: t2
+	});
+	const T0 = Pressable;
+	const t3 = feedback.handlers;
+	let t4;
+	if ($[3] !== height) {
+		t4 = hitSlop(height);
+		$[3] = height;
+		$[4] = t4;
+	} else t4 = $[4];
+	const t5 = "button";
+	const t6 = composeStyles(corners, style, feedback.ring === void 0 ? void 0 : ring);
+	let t7;
+	if ($[5] !== T0 || $[6] !== ariaLabel || $[7] !== children || $[8] !== feedback.handlers || $[9] !== feedback.layer || $[10] !== onPress || $[11] !== t4 || $[12] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(T0, {
+			...t3,
+			"aria-label": ariaLabel,
+			hitSlop: t4,
+			onPress,
+			role: t5,
+			style: t6,
+			children: [feedback.layer, children]
+		});
+		$[5] = T0;
+		$[6] = ariaLabel;
+		$[7] = children;
+		$[8] = feedback.handlers;
+		$[9] = feedback.layer;
+		$[10] = onPress;
+		$[11] = t4;
+		$[12] = t6;
+		$[13] = t7;
+	} else t7 = $[13];
+	return t7;
+}
+/** One message: the words, then whatever sits after them. */
+function SnackbarStrip(t0) {
+	const $ = c(15);
+	const { arrives, closeLabel, queue, shown, wide } = t0;
+	const theme = useTheme();
+	const themed = stylesOf(theme);
+	const body = useTypeRole("bodyMedium");
+	const label = useTypeRole("labelLarge");
+	const reduceMotion = useReducedMotion();
+	const [focused, setFocused] = useState(false);
+	const [hovered, setHovered] = useState(false);
+	const { action, key, message, showCloseButton } = shown;
+	const { colors, motion, sizing } = theme;
+	const rises = arrives && !reduceMotion;
+	const arrived = useSharedValue(rises ? 0 : 1);
+	const height = useSharedValue(0);
+	const rise = useAnimatedStyle(() => {
+		"worklet";
+		const progress = arrived.get();
+		return {
+			opacity: progress,
+			transform: [{ translateY: (1 - progress) * height.get() }]
+		};
+	});
+	let t1;
+	let t2;
+	if ($[0] !== arrived || $[1] !== motion || $[2] !== rises) {
+		t1 = () => {
+			if (rises) arrived.set(withTiming(1, {
+				duration: motion.durationMedium1,
+				easing: Easing.bezier(...motion.easingEmphasizedDecelerate)
+			}));
+		};
+		t2 = [
+			arrived,
+			motion,
+			rises
+		];
+		$[0] = arrived;
+		$[1] = motion;
+		$[2] = rises;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		t1 = $[3];
+		t2 = $[4];
+	}
+	useEffect(t1, t2);
+	let t3;
+	let t4;
+	if ($[5] !== message) {
+		t3 = () => {
+			if (Platform.OS === "ios" || Platform.OS === "android") AccessibilityInfo.announceForAccessibilityWithOptions(message, { queue: true });
+		};
+		t4 = [message];
+		$[5] = message;
+		$[6] = t3;
+		$[7] = t4;
+	} else {
+		t3 = $[6];
+		t4 = $[7];
+	}
+	useEffect(t3, t4);
+	let t5;
+	if ($[8] !== key || $[9] !== queue) {
+		t5 = closeOf(queue, key);
+		$[8] = key;
+		$[9] = queue;
+		$[10] = t5;
+	} else t5 = $[10];
+	const close = t5;
+	useExpiry(useShownFor(shown.timeout), focused || hovered, close);
+	let t6;
+	if ($[11] !== height) {
+		t6 = measureInto(height);
+		$[11] = height;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	let t8;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = flagOf(setHovered, true);
+		t8 = flagOf(setHovered, false);
+		$[13] = t7;
+		$[14] = t8;
+	} else {
+		t7 = $[13];
+		t8 = $[14];
+	}
+	return /* @__PURE__ */ jsxs(Animated.View, {
+		onLayout: t6,
+		onPointerEnter: t7,
+		onPointerLeave: t8,
+		style: composeStyles(themed.strip, wide ? styles.wide : void 0, rise),
+		children: [/* @__PURE__ */ jsx(View, {
+			style: themed.message,
+			children: /* @__PURE__ */ jsx(Text, {
+				style: composeStyles(body, themed.messageText),
+				children: message
+			})
+		}), action === void 0 && !showCloseButton ? null : /* @__PURE__ */ jsxs(View, {
+			style: styles.controls,
+			children: [action === void 0 ? null : /* @__PURE__ */ jsx(SnackbarButton, {
+				color: colors.inversePrimary,
+				height: sizing.controlSm,
+				onFocusChange: setFocused,
+				onPress: actionOf(action, close),
+				ring: themed.actionRing,
+				style: themed.action,
+				children: /* @__PURE__ */ jsx(Text, {
+					style: composeStyles(label, themed.actionLabel),
+					children: action.label
+				})
+			}), showCloseButton ? /* @__PURE__ */ jsx(SnackbarButton, {
+				"aria-label": closeLabel,
+				color: colors.inverseOnSurface,
+				height: sizing.controlMd,
+				onFocusChange: setFocused,
+				onPress: close,
+				ring: themed.closeRing,
+				style: themed.close,
+				children: /* @__PURE__ */ jsx(CloseGlyph, {
+					color: colors.inverseOnSurface,
+					size: 24
+				})
+			}) : null]
+		})]
+	});
+}
+function useExpiry(duration, paused, expire) {
+	const $ = c(5);
+	const left = useRef(null);
+	let t0;
+	let t1;
+	if ($[0] !== duration || $[1] !== expire || $[2] !== paused) {
+		t0 = () => {
+			if (duration === null || duration === 0 || paused) return;
+			const remaining = left.current ?? duration;
+			const started = Date.now();
+			const timer = setTimeout(expire, remaining);
+			return () => {
+				clearTimeout(timer);
+				left.current = remaining - (Date.now() - started);
+			};
+		};
+		t1 = [
+			duration,
+			expire,
+			paused
+		];
+		$[0] = duration;
+		$[1] = expire;
+		$[2] = paused;
+		$[3] = t0;
+		$[4] = t1;
+	} else {
+		t0 = $[3];
+		t1 = $[4];
+	}
+	useEffect(t0, t1);
+}
+function useShownFor(timeout) {
+	const $ = c(4);
+	const [recommended, setRecommended] = useState(null);
+	const asks = Platform.OS === "android" && timeout > 0;
+	let t0;
+	let t1;
+	if ($[0] !== asks || $[1] !== timeout) {
+		t0 = () => {
+			if (!asks) return;
+			let current = true;
+			(async function ask() {
+				const milliseconds = await AccessibilityInfo.getRecommendedTimeoutMillis(timeout);
+				if (current) setRecommended(milliseconds);
+			})();
+			return () => {
+				current = false;
+			};
+		};
+		t1 = [asks, timeout];
+		$[0] = asks;
+		$[1] = timeout;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	useEffect(t0, t1);
+	return asks ? recommended : timeout;
+}
+Snackbar.Queue = SnackbarQueue;
+//#endregion
+export { Snackbar };
+
+//# sourceMappingURL=index.js.map

package/dist/components/snackbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ReactNode","Ref","LayoutChangeEvent","StyleProp","TextStyle","ViewProps","ViewStyle","AnimatedStyle","SharedValue","use","useEffect","useRef","useState","useSyncExternalStore","AccessibilityInfo","Text","NativeText","Platform","Pressable","StyleSheet","View","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","SafeAreaInsetsContext","CloseGlyph","useWindowSizeClass","Overlay","hitSlop","usePressFeedback","useTheme","composeStyles","themedStyles","useTypeRole","MESSAGE_MS","UNTIL_CLOSED","MIN_WIDE","MAX_WIDE","MESSAGE_BLOCK_PADDING","RING_WIDTH","RING_OFFSET","NO_INSETS","bottom","left","right","top","stylesOf","colors","radii","shadows","sizing","spacing","create","action","alignItems","justifyContent","minHeight","controlSm","paddingHorizontal","md","paddingVertical","sm","actionLabel","color","inversePrimary","actionRing","outlineColor","outlineOffset","outlineStyle","outlineWidth","close","height","controlMd","width","closeRing","inverseOnSurface","control","borderRadius","pill","message","flexBasis","flexGrow","marginHorizontal","minWidth","messageText","region","paddingTop","pointerEvents","position","strip","backgroundColor","inverseSurface","xs","boxShadow","elevation3","flexDirection","flexWrap","styles","controls","flexShrink","marginStart","wide","maxWidth","ShownMessage","SnackbarAction","key","onClose","showCloseButton","timeout","label","onPress","SnackbarOptions","SnackbarProps","Omit","closeLabel","queue","SnackbarQueue","ref","style","added","listeners","Set","shown","add","options","clear","String","undefined","changed","subscribe","listener","delete","visible","#changed","actionOf","closeOf","flagOf","set","value","measureInto","event","nativeEvent","layout","Snackbar","t0","$","_c","props","t1","theme","insets","t2","standing","t3","paddingBottom","paddingLeft","paddingRight","t4","t5","OS","SnackbarButton","ariaLabel","children","onFocusChange","ring","corners","feedback","onBlur","onFocus","T0","handlers","t6","t7","layer","SnackbarStrip","arrives","themed","body","reduceMotion","focused","setFocused","hovered","setHovered","motion","rises","arrived","rise","progress","get","opacity","transform","translateY","duration","durationMedium1","easing","bezier","easingEmphasizedDecelerate","announceForAccessibilityWithOptions","useExpiry","useShownFor","t8","Symbol","for","paused","expire","remaining","current","started","Date","now","timer","setTimeout","clearTimeout","recommended","setRecommended","asks","ask","milliseconds","getRecommendedTimeoutMillis","Queue","_c","NativeText"],"sources":["../../../src/components/snackbar/index.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react'\nimport type {\n  LayoutChangeEvent,\n  StyleProp,\n  TextStyle,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle, SharedValue } from 'react-native-reanimated'\n\nimport { use, useEffect, useRef, useState, useSyncExternalStore } from 'react'\nimport {\n  AccessibilityInfo,\n  Text as NativeText,\n  Platform,\n  Pressable,\n  StyleSheet,\n  View,\n} from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\nimport { SafeAreaInsetsContext } from 'react-native-safe-area-context'\n\nimport { CloseGlyph } from '../../glyphs'\nimport { useWindowSizeClass } from '../../hooks/useWindowSizeClass'\nimport { Overlay } from '../../overlay'\nimport { hitSlop, usePressFeedback } from '../../press'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useTypeRole } from '../../typography/roles'\n\n// The snackbar page's brief message at the bottom of the screen, with an\n// optional action beside it and an optional close button after that, as\n// kanso-ui's Snackbar draws it. The page's container is the inverse surface\n// at a 4dp corner and elevation 3, its supporting text is body-medium in\n// inverse on surface, its action label is inverse primary, and its close icon\n// takes the supporting text's colour. The measurements are the page's too: 8dp\n// of margin from the edges of the screen, 8dp of padding inside the container\n// with another 8dp either side of the message, 14dp above and below on a\n// single line, and between 320 and 576dp wide from the 600dp breakpoint up,\n// the width of the window less its margins below it. The margin is counted\n// from the safe area, so a message clears the home indicator and the gesture\n// bar.\n//\n// One at a time, as on web. The page shows a single snackbar and replaces it\n// rather than stacking, so a message added while another is up closes that\n// one, whose `onClose` runs, and takes its place. Nothing waits behind it, so\n// an Undo never comes back long after the thing it undid.\n//\n// The queue is web's API: `add` a message with its options from anywhere, and\n// mount one `Snackbar` with the queue near the root. It draws in the overlay\n// host of the outermost `ThemeScope`, so it floats above every screen in the\n// theme around it.\n//\n// **A message is read out as it arrives.** On iOS and Android it is\n// announced through `AccessibilityInfo`, after whatever VoiceOver is already\n// saying, which is how CopyField says its confirmation too. Under React Native\n// Web the region it appears in is a polite live region instead, as web's is,\n// and the browser's screen reader reads it as it changes. Android is not given\n// a live region as well, since TalkBack would then read each message twice.\n//\n// **A message is a string, where web takes a node.** The announcement is the\n// message's words, and a node has none to hand VoiceOver.\n//\n// **The action and the close button are drawn here rather than through\n// Button and IconButton**, as on web: the page colours them inverse primary\n// and inverse on surface, which no variant of either carries. They take the\n// state layer, the ripple and the focus ring from src/press, with the ring\n// drawn 2dp inside the control rather than outside it: the close button is\n// 48dp in a strip 48dp tall, so a ring outside it crossed the strip's edges\n// onto the screen, in a colour chosen to read on the strip rather than on\n// the screen around it.\n\n// How long a message is shown when the call site names no `timeout`, web's\n// durations from the snackbar's guidelines and accessibility pages. A message\n// alone leaves after five seconds, which Android lengthens from the reader's\n// own accessibility setting, as its own snackbar does. A message with an\n// action stays until the action is taken or something closes it, since no\n// timer knows how long a reader needs to reach it.\nconst MESSAGE_MS = 5000\nconst UNTIL_CLOSED = 0\n\n// The width from the 600dp breakpoint up, the page's. Literals, as on web:\n// they bound the strip rather than measure anything a theme would resize.\nconst MIN_WIDE = 320\nconst MAX_WIDE = 576\n\n// The page's 14dp above and below the message, which with its 20dp line makes\n// a single-line strip 48dp tall. A literal, as on web, since no spacing step\n// is 14.\nconst MESSAGE_BLOCK_PADDING = 14\n\n// The ring's 2dp, drawn 4dp in from the control's edge so all of it lies\n// inside.\nconst RING_WIDTH = 2\nconst RING_OFFSET = -4\n\n// Outside a SafeAreaProvider the insets are unknown, and the window's own edge\n// is the best bound there is.\nconst NO_INSETS = { bottom: 0, left: 0, right: 0, top: 0 }\n\nconst stylesOf = themedStyles(({ colors, radii, shadows, sizing, spacing }) =>\n  StyleSheet.create({\n    // Material Design's text button in the page's inverse primary, at the\n    // label large the page gives it: 40dp tall, as Button's medium size is,\n    // over a 48dp target, which is the strip's own height. A least height\n    // rather than a height, so a type scale with a taller line grows the\n    // button instead of clipping its label.\n    action: {\n      alignItems: 'center',\n      justifyContent: 'center',\n      minHeight: sizing.controlSm,\n      paddingHorizontal: spacing.md,\n      paddingVertical: spacing.sm,\n    },\n    actionLabel: {\n      color: colors.inversePrimary,\n    },\n    actionRing: {\n      outlineColor: colors.inversePrimary,\n      outlineOffset: RING_OFFSET,\n      outlineStyle: 'solid',\n      outlineWidth: RING_WIDTH,\n    },\n    // The page's 24dp icon in the supporting text's colour, in a 48dp box,\n    // the least press area the icon buttons page allows.\n    close: {\n      alignItems: 'center',\n      height: sizing.controlMd,\n      justifyContent: 'center',\n      width: sizing.controlMd,\n    },\n    closeRing: {\n      outlineColor: colors.inverseOnSurface,\n      outlineOffset: RING_OFFSET,\n      outlineStyle: 'solid',\n      outlineWidth: RING_WIDTH,\n    },\n    // Both controls are pills, which the state layer and the ripple clip to.\n    control: {\n      borderRadius: radii.pill,\n    },\n    // The message: its 8dp either side inside the strip's own 8dp, and the\n    // 14dp above and below. The height is the message's rather than the\n    // strip's, which is what lets a 48dp close button sit beside it without\n    // making the strip taller than the page draws it.\n    //\n    // Its basis is half the strip, which is what decides when the controls\n    // drop beneath it. A word longer than the line holds breaks inside\n    // itself rather than running under the controls, which the least width\n    // of 0 allows on the web, where a flex item otherwise keeps the width of\n    // its longest word.\n    message: {\n      flexBasis: '50%',\n      flexGrow: 1,\n      marginHorizontal: spacing.sm,\n      minWidth: 0,\n      paddingVertical: MESSAGE_BLOCK_PADDING,\n    },\n    messageText: {\n      color: colors.inverseOnSurface,\n    },\n    // A strip along the bottom of the overlay layer, with the page's 8dp\n    // above it. It passes a touch through wherever no strip is drawn, so\n    // the screen under it stays usable.\n    region: {\n      alignItems: 'center',\n      bottom: 0,\n      left: 0,\n      paddingTop: spacing.sm,\n      pointerEvents: 'box-none',\n      position: 'absolute',\n      right: 0,\n    },\n    // The container: the page's 8dp either side, and nothing above or\n    // below, since what sets its height is the message and the close\n    // button. It wraps, so controls too long to leave the message half the\n    // strip drop onto a line of their own beneath it, Material Design's\n    // two-line snackbar with a longer action.\n    strip: {\n      alignItems: 'center',\n      backgroundColor: colors.inverseSurface,\n      borderRadius: radii.xs,\n      boxShadow: shadows.elevation3,\n      flexDirection: 'row',\n      flexWrap: 'wrap',\n      minHeight: sizing.controlMd,\n      paddingHorizontal: spacing.sm,\n      width: '100%',\n    },\n  }),\n)\n\nconst styles = StyleSheet.create({\n  // The action, and the close button after it, kept together after the\n  // message so they move beneath it together. The auto margin puts them at\n  // the trailing edge: on the message's row the message takes all the room\n  // first, and on a row of their own it is all the room there is.\n  controls: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    flexShrink: 0,\n    marginStart: 'auto',\n  },\n  wide: {\n    maxWidth: MAX_WIDE,\n    minWidth: MIN_WIDE,\n  },\n})\n\n// A message on screen, with what it was added with.\ntype ShownMessage = {\n  readonly action: SnackbarAction | undefined\n  readonly key: string\n  readonly message: string\n  readonly onClose: (() => void) | undefined\n  readonly showCloseButton: boolean\n  readonly timeout: number\n}\n\ntype SnackbarAction = {\n  /** What the action says. The page gives it a single word where it can. */\n  readonly label: string\n  /** Run when the action is pressed, just before the snackbar closes. */\n  readonly onPress: () => void\n}\n\ntype SnackbarOptions = {\n  /**\n   * A single action shown after the message. Pressing it runs `onPress` and\n   * closes the snackbar, which is what the page draws.\n   */\n  readonly action?: SnackbarAction\n  /**\n   * Run when the snackbar closes, however it was closed: by its timer, its\n   * action or close button, `close`, `clear`, or a newer message added in its\n   * place.\n   */\n  readonly onClose?: () => void\n  /**\n   * Whether a close button is shown at the end. The page draws one for a\n   * message a reader may want out of the way before it expires.\n   * @default false\n   */\n  readonly showCloseButton?: boolean\n  /**\n   * How long the snackbar is shown, in milliseconds. Defaults to five seconds\n   * for a message alone, which Android lengthens from the reader's own\n   * accessibility setting. A message with an action defaults to `0` and stays\n   * until the action is taken or something closes it, as Material Design asks\n   * of an actionable snackbar. The timer is paused while a pointer is over the\n   * snackbar or one of its controls has focus, so a message never expires\n   * while it is being read.\n   *\n   * `0` is the page's indefinite length: the snackbar stays until something\n   * closes it. Give one of those an action or `showCloseButton`, or there is\n   * no way to be rid of it.\n   */\n  readonly timeout?: number\n}\n\ntype SnackbarProps = Omit<ViewProps, 'children' | 'style'> & {\n  /**\n   * What a screen reader calls the button that dismisses a snackbar. It sits\n   * here rather than on a message's own options because it does not vary by\n   * message.\n   * @default 'Close'\n   */\n  readonly closeLabel?: string\n  /** The queue the snackbar shows messages from. */\n  readonly queue: SnackbarQueue\n  readonly ref?: Ref<View>\n  readonly style?: StyleProp<ViewStyle>\n}\n\n/**\n * The queue a snackbar is shown from. Make one where the app can reach it, a\n * module of its own being the usual place, mount `Snackbar` once with it, and\n * call `add` from anywhere.\n *\n * ```ts\n * const messages = new Snackbar.Queue()\n * messages.add('Label', { action: { label: 'Undo', onPress: undo } })\n * ```\n */\nclass SnackbarQueue {\n  #added = 0\n  readonly #listeners = new Set<() => void>()\n  #shown: null | ShownMessage = null\n\n  /**\n   * Shows a message in place of the one on screen, and returns the key that\n   * closes it. The message it replaces is closed, so its `onClose` runs, and\n   * it does not come back.\n   */\n  add(message: string, options: SnackbarOptions = {}): string {\n    const { action, onClose, showCloseButton = false, timeout } = options\n\n    this.clear()\n    this.#added += 1\n\n    const key = `snackbar-${String(this.#added)}`\n\n    this.#shown = {\n      action,\n      key,\n      message,\n      onClose,\n      showCloseButton,\n      timeout: timeout ?? (action === undefined ? MESSAGE_MS : UNTIL_CLOSED),\n    }\n    this.#changed()\n\n    return key\n  }\n\n  /** Closes the snackbar on screen, running its `onClose`. */\n  clear() {\n    if (this.#shown !== null) {\n      this.close(this.#shown.key)\n    }\n  }\n\n  /** Closes one snackbar, by the key `add` returned. */\n  close(key: string) {\n    const shown = this.#shown\n\n    if (shown?.key !== key) {\n      return\n    }\n\n    // Off the screen before `onClose` runs, so one that adds the next message\n    // adds it to an empty queue.\n    this.#shown = null\n    this.#changed()\n    shown.onClose?.()\n  }\n\n  /**\n   * Calls `listener` whenever the message on screen changes, and returns what\n   * stops it. `Snackbar` reads the queue through this and `visible`, and\n   * neither is meant for a call site.\n   */\n  readonly subscribe = (listener: () => void) => {\n    this.#listeners.add(listener)\n\n    return () => {\n      this.#listeners.delete(listener)\n    }\n  }\n\n  /** The message on screen, or `null`. */\n  readonly visible = () => this.#shown\n\n  #changed() {\n    for (const listener of this.#listeners) {\n      listener()\n    }\n  }\n}\n\n// The handlers the strip hands its views, each built by a call rather than\n// declared in the component, which is what react-perf's\n// jsx-no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\nfunction actionOf(action: SnackbarAction, close: () => void) {\n  return () => {\n    action.onPress()\n    close()\n  }\n}\n\nfunction closeOf(queue: SnackbarQueue, key: string) {\n  return () => {\n    queue.close(key)\n  }\n}\n\nfunction flagOf(set: (value: boolean) => void, value: boolean) {\n  return () => {\n    set(value)\n  }\n}\n\nfunction measureInto(height: SharedValue<number>) {\n  return (event: LayoutChangeEvent) => {\n    height.set(event.nativeEvent.layout.height)\n  }\n}\n\n/**\n * A brief message at the bottom of the screen, with an optional action, with\n * web's props and values. Mount one of these with a `Snackbar.Queue`, and\n * call the queue's `add` to show a message from anywhere.\n *\n * ```tsx\n * const messages = new Snackbar.Queue()\n *\n * <Snackbar queue={messages} />\n * ```\n *\n * It draws in the overlay host of the app's outermost `ThemeScope`, above the\n * screen, and needs one around it. It is one region rather than one per\n * message, so mount it once, near the root, inside the `SafeAreaProvider`\n * whose insets it keeps clear of.\n *\n * `style`, `ref` and `testID` land on that region, a view along the bottom of\n * the screen that holds the message.\n */\nfunction Snackbar({\n  closeLabel = 'Close',\n  queue,\n  style,\n  ...props\n}: SnackbarProps) {\n  const theme = useTheme()\n  const insets = use(SafeAreaInsetsContext) ?? NO_INSETS\n  const wide = useWindowSizeClass() !== 'compact'\n  const shown = useSyncExternalStore(queue.subscribe, queue.visible)\n  // The message up when the snackbar mounted, which was on screen before it\n  // rather than arriving, so it is put in place rather than risen to it: on\n  // a screen that remounts the snackbar, and on a story seeded with one.\n  const [standing] = useState(() => queue.visible()?.key)\n  const { spacing } = theme\n\n  return (\n    <Overlay>\n      <View\n        aria-live={Platform.OS === 'web' ? 'polite' : undefined}\n        {...props}\n        style={composeStyles<ViewStyle>(\n          stylesOf(theme).region,\n          {\n            paddingBottom: spacing.sm + insets.bottom,\n            paddingLeft: spacing.sm + insets.left,\n            paddingRight: spacing.sm + insets.right,\n          },\n          style,\n        )}\n      >\n        {shown === null ? null : (\n          <SnackbarStrip\n            arrives={shown.key !== standing}\n            closeLabel={closeLabel}\n            key={shown.key}\n            queue={queue}\n            shown={shown}\n            wide={wide}\n          />\n        )}\n      </View>\n    </Overlay>\n  )\n}\n\n/**\n * One of the snackbar's two controls, a pill drawing the state layer, the\n * ripple and the ring in its own colour, over a target brought up to 48dp\n * from the `height` it is drawn at. It reports when it takes and loses focus,\n * which pauses the message's timer.\n */\nfunction SnackbarButton({\n  'aria-label': ariaLabel,\n  children,\n  color,\n  height,\n  onFocusChange,\n  onPress,\n  ring,\n  style,\n}: {\n  readonly 'aria-label'?: string\n  readonly children: ReactNode\n  readonly color: string\n  readonly height: number\n  readonly onFocusChange: (focused: boolean) => void\n  readonly onPress: () => void\n  readonly ring: ViewStyle\n  readonly style: ViewStyle\n}) {\n  const theme = useTheme()\n  const corners = stylesOf(theme).control\n  const feedback = usePressFeedback({\n    color,\n    corners,\n    onBlur: () => {\n      onFocusChange(false)\n    },\n    onFocus: () => {\n      onFocusChange(true)\n    },\n  })\n\n  return (\n    <Pressable\n      {...feedback.handlers}\n      aria-label={ariaLabel}\n      hitSlop={hitSlop(height)}\n      onPress={onPress}\n      role=\"button\"\n      style={composeStyles<ViewStyle>(\n        corners,\n        style,\n        feedback.ring === undefined ? undefined : ring,\n      )}\n    >\n      {feedback.layer}\n      {children}\n    </Pressable>\n  )\n}\n\n/** One message: the words, then whatever sits after them. */\nfunction SnackbarStrip({\n  arrives,\n  closeLabel,\n  queue,\n  shown,\n  wide,\n}: {\n  /** Whether the message rises into place, or is drawn there at once. */\n  readonly arrives: boolean\n  readonly closeLabel: string\n  readonly queue: SnackbarQueue\n  readonly shown: ShownMessage\n  readonly wide: boolean\n}) {\n  const theme = useTheme()\n  const themed = stylesOf(theme)\n  const body = useTypeRole('bodyMedium')\n  const label = useTypeRole('labelLarge')\n  const reduceMotion = useReducedMotion()\n  const [focused, setFocused] = useState(false)\n  const [hovered, setHovered] = useState(false)\n  const { action, key, message, showCloseButton } = shown\n  const { colors, motion, sizing } = theme\n\n  // It rises its own height from the bottom edge as it fades in, which is\n  // what the page draws and what says the message came from the edge of the\n  // screen rather than appearing over it. Reduced motion puts it in its\n  // settled place at once, as web's zeroed duration does.\n  const rises = arrives && !reduceMotion\n  const arrived = useSharedValue(rises ? 0 : 1)\n  const height = useSharedValue(0)\n  const rise = useAnimatedStyle(() => {\n    'worklet'\n    const progress = arrived.get()\n\n    return {\n      opacity: progress,\n      transform: [{ translateY: (1 - progress) * height.get() }],\n    }\n  })\n\n  useEffect(() => {\n    if (rises) {\n      arrived.set(\n        withTiming(1, {\n          duration: motion.durationMedium1,\n          easing: Easing.bezier(...motion.easingEmphasizedDecelerate),\n        }),\n      )\n    }\n  }, [arrived, motion, rises])\n\n  useEffect(() => {\n    if (Platform.OS === 'ios' || Platform.OS === 'android') {\n      AccessibilityInfo.announceForAccessibilityWithOptions(message, {\n        queue: true,\n      })\n    }\n  }, [message])\n\n  const close = closeOf(queue, key)\n\n  useExpiry(useShownFor(shown.timeout), focused || hovered, close)\n\n  return (\n    <Animated.View\n      onLayout={measureInto(height)}\n      onPointerEnter={flagOf(setHovered, true)}\n      onPointerLeave={flagOf(setHovered, false)}\n      style={composeStyles<AnimatedStyle<ViewStyle>>(\n        themed.strip,\n        wide ? styles.wide : undefined,\n        rise,\n      )}\n    >\n      <View style={themed.message}>\n        <NativeText style={composeStyles<TextStyle>(body, themed.messageText)}>\n          {message}\n        </NativeText>\n      </View>\n      {action === undefined && !showCloseButton ? null : (\n        <View style={styles.controls}>\n          {action === undefined ? null : (\n            <SnackbarButton\n              color={colors.inversePrimary}\n              height={sizing.controlSm}\n              onFocusChange={setFocused}\n              onPress={actionOf(action, close)}\n              ring={themed.actionRing}\n              style={themed.action}\n            >\n              <NativeText\n                style={composeStyles<TextStyle>(label, themed.actionLabel)}\n              >\n                {action.label}\n              </NativeText>\n            </SnackbarButton>\n          )}\n          {showCloseButton ? (\n            <SnackbarButton\n              aria-label={closeLabel}\n              color={colors.inverseOnSurface}\n              height={sizing.controlMd}\n              onFocusChange={setFocused}\n              onPress={close}\n              ring={themed.closeRing}\n              style={themed.close}\n            >\n              <CloseGlyph color={colors.inverseOnSurface} size={24} />\n            </SnackbarButton>\n          ) : null}\n        </View>\n      )}\n    </Animated.View>\n  )\n}\n\n// Closes a message once it has been shown for `duration` milliseconds,\n// counting only the time it was not paused. Nothing for a `duration` of 0,\n// which is until closed, or of `null`, which is not yet known.\nfunction useExpiry(\n  duration: null | number,\n  paused: boolean,\n  expire: () => void,\n) {\n  const left = useRef<null | number>(null)\n\n  useEffect(() => {\n    if (duration === null || duration === 0 || paused) {\n      return undefined\n    }\n\n    const remaining = left.current ?? duration\n    const started = Date.now()\n    const timer = setTimeout(expire, remaining)\n\n    return () => {\n      clearTimeout(timer)\n      left.current = remaining - (Date.now() - started)\n    }\n  }, [duration, expire, paused])\n}\n\n// How long a message is shown: its `timeout`, which Android lengthens from\n// the reader's \"Time to take action\" setting, as its own snackbar does, and\n// is `null` until Android has answered. Nothing is asked for a message shown\n// until closed.\nfunction useShownFor(timeout: number): null | number {\n  const [recommended, setRecommended] = useState<null | number>(null)\n  const asks = Platform.OS === 'android' && timeout > 0\n\n  useEffect(() => {\n    if (!asks) {\n      return undefined\n    }\n\n    let current = true\n\n    async function ask() {\n      const milliseconds =\n        await AccessibilityInfo.getRecommendedTimeoutMillis(timeout)\n\n      if (current) {\n        setRecommended(milliseconds)\n      }\n    }\n\n    void ask()\n\n    return () => {\n      current = false\n    }\n  }, [asks, timeout])\n\n  return asks ? recommended : timeout\n}\n\nSnackbar.Queue = SnackbarQueue\n\n// The queue is reached as `Snackbar.Queue` rather than exported beside the\n// component, as on web: a module exporting something that is not a component\n// is one fast refresh reloads whole.\nexport { Snackbar }\nexport type { SnackbarAction, SnackbarOptions, SnackbarProps, SnackbarQueue }\n"],"mappings":"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"}

package/dist/glyphs/hidden.js

@@ -0,0 +1,13 @@
+import { Platform } from "react-native";
+//#region src/glyphs/hidden.ts
+const HIDDEN = Platform.select({
+	default: {
+		accessibilityElementsHidden: true,
+		importantForAccessibility: "no-hide-descendants"
+	},
+	web: { "aria-hidden": true }
+});
+//#endregion
+export { HIDDEN };
+
+//# sourceMappingURL=hidden.js.map

package/dist/glyphs/hidden.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hidden.js","names":["SvgProps","Platform","HIDDEN","select","default","accessibilityElementsHidden","importantForAccessibility","web"],"sources":["../../src/glyphs/hidden.ts"],"sourcesContent":["import type { SvgProps } from 'react-native-svg'\n\nimport { Platform } from 'react-native'\n\n// What hides an svg from screen readers, for the glyphs and anything else the\n// library draws in one. On iOS and Android that is React Native's two props,\n// one for VoiceOver and one for TalkBack. Under React Native Web,\n// react-native-svg hands its props to the `<svg>` as they are, so it is\n// `aria-hidden` there, which is the one the browser reads.\nconst HIDDEN = Platform.select<SvgProps>({\n  default: {\n    accessibilityElementsHidden: true,\n    importantForAccessibility: 'no-hide-descendants',\n  },\n  web: { 'aria-hidden': true },\n})\n\nexport { HIDDEN }\n"],"mappings":";;AASA,MAAME,SAASD,SAASE,OAAiB;CACvCC,SAAS;EACPC,6BAA6B;EAC7BC,2BAA2B;CAC7B;CACAC,KAAK,EAAE,eAAe,KAAK;AAC7B,CAAC"}

package/dist/glyphs/index.js

@@ -1,17 +1,11 @@
+import { HIDDEN } from "./hidden.js";
 import { useIconStyle } from "./icon-style.js";
 import { glyphStyles } from "./styles.js";
 import { c } from "react/compiler-runtime";
-import { I18nManager, Platform, StyleSheet } from "react-native";
+import { I18nManager, StyleSheet } from "react-native";
 import Svg, { Path } from "react-native-svg";
 import { jsx } from "react/jsx-runtime";
 //#region src/glyphs/index.tsx
-const HIDDEN = Platform.select({
-	default: {
-		accessibilityElementsHidden: true,
-		importantForAccessibility: "no-hide-descendants"
-	},
-	web: { "aria-hidden": true }
-});
 function CheckGlyph(props) {
 	const $ = c(3);
 	let t0;