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

package/dist/button/index.d.ts

@@ -14,11 +14,33 @@ type ButtonLinkForm = {
    * with a scheme of its own, and the button is announced as a link.
    */
   readonly href: string;
+  readonly isPending?: never;
   readonly isSelected?: never;
   readonly onChange?: never;
+  readonly pendingLabel?: never;
   readonly type?: never;
 };
-type ButtonPressForm = {
+/**
+ * Whether the button's action is under way, which the plain button and the
+ * toggle both take and the link does not.
+ */
+type ButtonPending = {
+  /**
+   * Shows that the button's action is under way: a ring takes the place of
+   * the label and the icon, which keep their space, and the button keeps its
+   * focus and takes no press until it clears. A toggle may be pending, for a
+   * state saved somewhere slow.
+   * @default false
+   */
+  readonly isPending?: boolean;
+  /**
+   * The name of the ring shown while the button is pending, for a screen
+   * reader. The content it replaces is hidden while it shows. Left out, it is
+   * the word for it in the device's locale, "Loading" in English.
+   */
+  readonly pendingLabel?: string;
+};
+type ButtonPressForm = ButtonPending & {
   readonly defaultSelected?: never;
   readonly href?: never;
   readonly isSelected?: never;
@@ -30,7 +52,7 @@ type ButtonPressForm = {
    */
   readonly type?: 'button' | 'submit';
 };
-type ButtonToggleForm = {
+type ButtonToggleForm = ButtonPending & {
   /**
    * Whether a toggle starts selected, when it keeps its own state. Passing
    * this, `isSelected` or `onChange` is what makes the button a toggle.

package/dist/button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["GestureResponderEvent","LayoutChangeEvent","PressableProps","SharedValue","use","useState","Platform","Pressable","StyleSheet","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","ResolvedTheme","FormContext","useOpenLink","useTheme","ButtonLinkForm","defaultSelected","href","isSelected","onChange","type","ButtonPressForm","ButtonToggleForm","ControlSize","ToggleState","HEIGHTS","lg","md","xl","xs","xxl","const","Record","OUTLINE_WIDTHS","Readonly","PRESSED_CORNERS","AnimatedPressable","createAnimatedComponent","toggleState","select","selected","default","web","buttonStyles","create","clip","bottom","left","overflow","pointerEvents","position","right","top","measureThen","height","onLayout","event","set","nativeEvent","layout","pressThen","onPress","then","useButtonAction","t0","$","_c","isToggle","openLink","form","ownSelected","setOwnSelected","t1","follow","undefined","requestSubmit","t2","t3","useCorner","radius","motion","reduceMotion","durationShort2","easingEmphasized","bezier","duration","easing","timing","corner","measured","get","target","Math","min","borderRadius","t4","_c"],"sources":["../../src/button/index.ts"],"sourcesContent":["import type {\n  GestureResponderEvent,\n  LayoutChangeEvent,\n  PressableProps,\n} from 'react-native'\nimport type { SharedValue } from 'react-native-reanimated'\n\nimport { use, useState } from 'react'\nimport { Platform, Pressable, StyleSheet } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\n\nimport type { ResolvedTheme } from '../theme/scope'\n\nimport { FormContext } from '../form'\nimport { useOpenLink } from '../router'\nimport { useTheme } from '../theme/scope'\n\n// What every button does past its own styles, shared by Button and\n// IconButton as web's src/button is: the three forms a button takes, the\n// toggle's state and how it is announced, what a press does after the call\n// site's own `onPress`, a submit button's included, the corner that eases\n// between shapes, and the metrics\n// the two components' pages give alike, since the two share their five\n// heights so that they line up in a row.\n\n/**\n * A plain button, a link, or a toggle, of which a call site writes exactly\n * one. Each form names the props of the other two as `never`, so a toggle\n * given `href` is a compile error rather than a prop that silently does\n * nothing.\n */\ntype ButtonLinkForm = {\n  readonly defaultSelected?: never\n  /**\n   * Where the button leads. Given one, a press opens it through the\n   * `RouterProvider` around the button, or through the platform for a URL\n   * with a scheme of its own, and the button is announced as a link.\n   */\n  readonly href: string\n  readonly isSelected?: never\n  readonly onChange?: never\n  readonly type?: never\n}\n\ntype ButtonPressForm = {\n  readonly defaultSelected?: never\n  readonly href?: never\n  readonly isSelected?: never\n  readonly onChange?: never\n  /**\n   * What a press does past `onPress`. `submit` submits the `Form` the button\n   * is in, as a submit button does on web; `button` does nothing more.\n   * @default 'button'\n   */\n  readonly type?: 'button' | 'submit'\n}\n\ntype ButtonToggleForm = {\n  /**\n   * Whether a toggle starts selected, when it keeps its own state. Passing\n   * this, `isSelected` or `onChange` is what makes the button a toggle.\n   */\n  readonly defaultSelected?: boolean\n  readonly href?: never\n  /**\n   * Whether a toggle is selected, when the call site holds the state. Pass\n   * it with `onChange`; passing this, `defaultSelected` or `onChange` is what\n   * makes the button a toggle.\n   */\n  readonly isSelected?: boolean\n  /**\n   * Called with the new state when a toggle is pressed, after `onPress`.\n   * Passing this, `isSelected` or `defaultSelected` is what makes the button\n   * a toggle.\n   */\n  readonly onChange?: (isSelected: boolean) => void\n  readonly type?: never\n}\n\n/** The five control heights both pages give, by the names both props take. */\ntype ControlSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl'\n\n/** How a toggle reports its state to a screen reader. */\ntype ToggleState = {\n  readonly 'aria-pressed'?: boolean\n  readonly 'aria-selected'?: boolean\n}\n\n// The control height each size reads: the page's XS, S, M, L and XL, which\n// the theme's sizing scale names one step apart from this prop.\nconst HEIGHTS = {\n  lg: 'controlLg',\n  md: 'controlSm',\n  xl: 'controlXl',\n  xs: 'controlXs',\n  xxl: 'controlXxl',\n} as const satisfies Record<ControlSize, keyof ResolvedTheme['sizing']>\n\n// The outlined rule thickens with the size, as the buttons page's size tokens\n// have it: 1dp up to M, 2dp at L, 3dp at XL. The icon buttons page keeps its\n// widths in a token set its widget will not open, so the icon button takes\n// these, which a 96dp icon button beside a 96dp outlined button needs anyway.\nconst OUTLINE_WIDTHS: Readonly<Record<ControlSize, number>> = {\n  lg: 1,\n  md: 1,\n  xl: 2,\n  xs: 1,\n  xxl: 3,\n}\n\n// The corner each size presses to, which both pages give alike.\nconst PRESSED_CORNERS = {\n  lg: 'md',\n  md: 'sm',\n  xl: 'lg',\n  xs: 'sm',\n  xxl: 'lg',\n} as const satisfies Record<ControlSize, keyof ResolvedTheme['radii']>\n\nconst AnimatedPressable = Animated.createAnimatedComponent(Pressable)\n\n// Web's toggle reports `aria-pressed`, which React Native Web writes onto the\n// element. React Native has no pressed state to report, and reports the\n// selected one instead, which VoiceOver and TalkBack both read out.\nconst toggleState = Platform.select<(selected: boolean) => ToggleState>({\n  default: (selected) => ({ 'aria-selected': selected }),\n  web: (selected) => ({ 'aria-pressed': selected }),\n})\n\nconst buttonStyles = StyleSheet.create({\n  // Clips the state layer and the ripple to the corner as it morphs, and\n  // takes no touches.\n  clip: {\n    bottom: 0,\n    left: 0,\n    overflow: 'hidden',\n    pointerEvents: 'none',\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n})\n\n// Records the button's height for the corner, then calls the call site's own\n// `onLayout`. Built by a call rather than declared in a component, which is\n// what react-perf's jsx-no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction measureThen(\n  height: SharedValue<number>,\n  onLayout: PressableProps['onLayout'],\n) {\n  return (event: LayoutChangeEvent) => {\n    height.set(event.nativeEvent.layout.height)\n    onLayout?.(event)\n  }\n}\n\n// The call site's own `onPress`, then what the button does with the press.\n// Built by a call for the reason `measureThen` is.\nfunction pressThen(onPress: PressableProps['onPress'], then: () => void) {\n  return (event: GestureResponderEvent) => {\n    onPress?.(event)\n    then()\n  }\n}\n\n/**\n * What a press does, and whether a toggle is selected. A press calls the call\n * site's own `onPress` first, then opens the link, changes the toggle's state\n * or submits the form the button is in, which is the order web reports them\n * in. A toggle keeps its own state from `defaultSelected` unless the call\n * site holds it in `isSelected`. A submit button outside a form submits\n * nothing, as on web.\n */\nfunction useButtonAction({\n  defaultSelected,\n  href,\n  isSelected,\n  isToggle,\n  onChange,\n  onPress,\n  type,\n}: {\n  readonly defaultSelected: boolean | undefined\n  readonly href: string | undefined\n  readonly isSelected: boolean | undefined\n  readonly isToggle: boolean\n  readonly onChange: ((isSelected: boolean) => void) | undefined\n  readonly onPress: PressableProps['onPress']\n  readonly type: 'button' | 'submit' | undefined\n}) {\n  const openLink = useOpenLink()\n  const form = use(FormContext)\n  const [ownSelected, setOwnSelected] = useState(defaultSelected ?? false)\n  const selected = isToggle && (isSelected ?? ownSelected)\n\n  function follow() {\n    if (href !== undefined) {\n      openLink(href)\n    } else if (isToggle) {\n      setOwnSelected(!selected)\n      onChange?.(!selected)\n    } else if (type === 'submit') {\n      form?.requestSubmit()\n    }\n  }\n\n  return { onPress: pressThen(onPress, follow), selected }\n}\n\n/**\n * The corner a button eases to, over the motion tokens' short duration on the\n * emphasised curve, and at once for a reader who asks the device for reduced\n * motion. The pill is the radius scale's `pill`, far larger than any button,\n * so the ease runs from half the button's measured height rather than from\n * that: otherwise the corner would hold the pill for most of the ease and\n * jump at its end. The `onLayout` it hands back measures the button, then\n * calls the call site's own.\n */\nfunction useCorner(radius: number, onLayout: PressableProps['onLayout']) {\n  const { motion } = useTheme()\n  const reduceMotion = useReducedMotion()\n  const height = useSharedValue(0)\n  const timing = {\n    duration: motion.durationShort2,\n    easing: Easing.bezier(...motion.easingEmphasized),\n  }\n  const corner = useAnimatedStyle(() => {\n    'worklet'\n    const measured = height.get()\n    const target = measured > 0 ? Math.min(radius, measured / 2) : radius\n\n    return {\n      borderRadius: reduceMotion ? target : withTiming(target, timing),\n    }\n  })\n\n  return { corner, onLayout: measureThen(height, onLayout) }\n}\n\nexport {\n  AnimatedPressable,\n  buttonStyles,\n  HEIGHTS,\n  OUTLINE_WIDTHS,\n  PRESSED_CORNERS,\n  toggleState,\n  useButtonAction,\n  useCorner,\n}\nexport type { ButtonLinkForm, ButtonPressForm, ButtonToggleForm, ControlSize }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["GestureResponderEvent","LayoutChangeEvent","PressableProps","SharedValue","use","useState","Platform","Pressable","StyleSheet","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","ResolvedTheme","FormContext","useOpenLink","useTheme","ButtonLinkForm","defaultSelected","href","isPending","isSelected","onChange","pendingLabel","type","ButtonPending","ButtonPressForm","ButtonToggleForm","ControlSize","ToggleState","HEIGHTS","lg","md","xl","xs","xxl","const","Record","OUTLINE_WIDTHS","Readonly","PRESSED_CORNERS","AnimatedPressable","createAnimatedComponent","toggleState","select","selected","default","web","buttonStyles","create","clip","bottom","left","overflow","pointerEvents","position","right","top","measureThen","height","onLayout","event","set","nativeEvent","layout","pressThen","onPress","then","useButtonAction","t0","$","_c","isToggle","openLink","form","ownSelected","setOwnSelected","t1","follow","undefined","requestSubmit","t2","t3","useCorner","radius","motion","reduceMotion","durationShort2","easingEmphasized","bezier","duration","easing","timing","corner","measured","get","target","Math","min","borderRadius","t4","_c"],"sources":["../../src/button/index.ts"],"sourcesContent":["import type {\n  GestureResponderEvent,\n  LayoutChangeEvent,\n  PressableProps,\n} from 'react-native'\nimport type { SharedValue } from 'react-native-reanimated'\n\nimport { use, useState } from 'react'\nimport { Platform, Pressable, StyleSheet } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\n\nimport type { ResolvedTheme } from '../theme/scope'\n\nimport { FormContext } from '../form'\nimport { useOpenLink } from '../router'\nimport { useTheme } from '../theme/scope'\n\n// What every button does past its own styles, shared by Button and\n// IconButton as web's src/button is: the three forms a button takes, the\n// toggle's state and how it is announced, what a press does after the call\n// site's own `onPress`, a submit button's included, the corner that eases\n// between shapes, and the metrics\n// the two components' pages give alike, since the two share their five\n// heights so that they line up in a row. What a pending button draws and\n// says is ./pending.tsx.\n\n/**\n * A plain button, a link, or a toggle, of which a call site writes exactly\n * one. Each form names the props of the other two as `never`, so a toggle\n * given `href` is a compile error rather than a prop that silently does\n * nothing.\n */\ntype ButtonLinkForm = {\n  readonly defaultSelected?: never\n  /**\n   * Where the button leads. Given one, a press opens it through the\n   * `RouterProvider` around the button, or through the platform for a URL\n   * with a scheme of its own, and the button is announced as a link.\n   */\n  readonly href: string\n  readonly isPending?: never\n  readonly isSelected?: never\n  readonly onChange?: never\n  readonly pendingLabel?: never\n  readonly type?: never\n}\n\n/**\n * Whether the button's action is under way, which the plain button and the\n * toggle both take and the link does not.\n */\ntype ButtonPending = {\n  /**\n   * Shows that the button's action is under way: a ring takes the place of\n   * the label and the icon, which keep their space, and the button keeps its\n   * focus and takes no press until it clears. A toggle may be pending, for a\n   * state saved somewhere slow.\n   * @default false\n   */\n  readonly isPending?: boolean\n  /**\n   * The name of the ring shown while the button is pending, for a screen\n   * reader. The content it replaces is hidden while it shows. Left out, it is\n   * the word for it in the device's locale, \"Loading\" in English.\n   */\n  readonly pendingLabel?: string\n}\n\ntype ButtonPressForm = ButtonPending & {\n  readonly defaultSelected?: never\n  readonly href?: never\n  readonly isSelected?: never\n  readonly onChange?: never\n  /**\n   * What a press does past `onPress`. `submit` submits the `Form` the button\n   * is in, as a submit button does on web; `button` does nothing more.\n   * @default 'button'\n   */\n  readonly type?: 'button' | 'submit'\n}\n\ntype ButtonToggleForm = ButtonPending & {\n  /**\n   * Whether a toggle starts selected, when it keeps its own state. Passing\n   * this, `isSelected` or `onChange` is what makes the button a toggle.\n   */\n  readonly defaultSelected?: boolean\n  readonly href?: never\n  /**\n   * Whether a toggle is selected, when the call site holds the state. Pass\n   * it with `onChange`; passing this, `defaultSelected` or `onChange` is what\n   * makes the button a toggle.\n   */\n  readonly isSelected?: boolean\n  /**\n   * Called with the new state when a toggle is pressed, after `onPress`.\n   * Passing this, `isSelected` or `defaultSelected` is what makes the button\n   * a toggle.\n   */\n  readonly onChange?: (isSelected: boolean) => void\n  readonly type?: never\n}\n\n/** The five control heights both pages give, by the names both props take. */\ntype ControlSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl'\n\n/** How a toggle reports its state to a screen reader. */\ntype ToggleState = {\n  readonly 'aria-pressed'?: boolean\n  readonly 'aria-selected'?: boolean\n}\n\n// The control height each size reads: the page's XS, S, M, L and XL, which\n// the theme's sizing scale names one step apart from this prop.\nconst HEIGHTS = {\n  lg: 'controlLg',\n  md: 'controlSm',\n  xl: 'controlXl',\n  xs: 'controlXs',\n  xxl: 'controlXxl',\n} as const satisfies Record<ControlSize, keyof ResolvedTheme['sizing']>\n\n// The outlined rule thickens with the size, as the buttons page's size tokens\n// have it: 1dp up to M, 2dp at L, 3dp at XL. The icon buttons page keeps its\n// widths in a token set its widget will not open, so the icon button takes\n// these, which a 96dp icon button beside a 96dp outlined button needs anyway.\nconst OUTLINE_WIDTHS: Readonly<Record<ControlSize, number>> = {\n  lg: 1,\n  md: 1,\n  xl: 2,\n  xs: 1,\n  xxl: 3,\n}\n\n// The corner each size presses to, which both pages give alike.\nconst PRESSED_CORNERS = {\n  lg: 'md',\n  md: 'sm',\n  xl: 'lg',\n  xs: 'sm',\n  xxl: 'lg',\n} as const satisfies Record<ControlSize, keyof ResolvedTheme['radii']>\n\nconst AnimatedPressable = Animated.createAnimatedComponent(Pressable)\n\n// Web's toggle reports `aria-pressed`, which React Native Web writes onto the\n// element. React Native has no pressed state to report, and reports the\n// selected one instead, which VoiceOver and TalkBack both read out.\nconst toggleState = Platform.select<(selected: boolean) => ToggleState>({\n  default: (selected) => ({ 'aria-selected': selected }),\n  web: (selected) => ({ 'aria-pressed': selected }),\n})\n\nconst buttonStyles = StyleSheet.create({\n  // Clips the state layer and the ripple to the corner as it morphs, and\n  // takes no touches.\n  clip: {\n    bottom: 0,\n    left: 0,\n    overflow: 'hidden',\n    pointerEvents: 'none',\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n})\n\n// Records the button's height for the corner, then calls the call site's own\n// `onLayout`. Built by a call rather than declared in a component, which is\n// what react-perf's jsx-no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction measureThen(\n  height: SharedValue<number>,\n  onLayout: PressableProps['onLayout'],\n) {\n  return (event: LayoutChangeEvent) => {\n    height.set(event.nativeEvent.layout.height)\n    onLayout?.(event)\n  }\n}\n\n// The call site's own `onPress`, then what the button does with the press.\n// Built by a call for the reason `measureThen` is.\nfunction pressThen(onPress: PressableProps['onPress'], then: () => void) {\n  return (event: GestureResponderEvent) => {\n    onPress?.(event)\n    then()\n  }\n}\n\n/**\n * What a press does, and whether a toggle is selected. A press calls the call\n * site's own `onPress` first, then opens the link, changes the toggle's state\n * or submits the form the button is in, which is the order web reports them\n * in. A toggle keeps its own state from `defaultSelected` unless the call\n * site holds it in `isSelected`. A submit button outside a form submits\n * nothing, as on web.\n */\nfunction useButtonAction({\n  defaultSelected,\n  href,\n  isSelected,\n  isToggle,\n  onChange,\n  onPress,\n  type,\n}: {\n  readonly defaultSelected: boolean | undefined\n  readonly href: string | undefined\n  readonly isSelected: boolean | undefined\n  readonly isToggle: boolean\n  readonly onChange: ((isSelected: boolean) => void) | undefined\n  readonly onPress: PressableProps['onPress']\n  readonly type: 'button' | 'submit' | undefined\n}) {\n  const openLink = useOpenLink()\n  const form = use(FormContext)\n  const [ownSelected, setOwnSelected] = useState(defaultSelected ?? false)\n  const selected = isToggle && (isSelected ?? ownSelected)\n\n  function follow() {\n    if (href !== undefined) {\n      openLink(href)\n    } else if (isToggle) {\n      setOwnSelected(!selected)\n      onChange?.(!selected)\n    } else if (type === 'submit') {\n      form?.requestSubmit()\n    }\n  }\n\n  return { onPress: pressThen(onPress, follow), selected }\n}\n\n/**\n * The corner a button eases to, over the motion tokens' short duration on the\n * emphasised curve, and at once for a reader who asks the device for reduced\n * motion. The pill is the radius scale's `pill`, far larger than any button,\n * so the ease runs from half the button's measured height rather than from\n * that: otherwise the corner would hold the pill for most of the ease and\n * jump at its end. The `onLayout` it hands back measures the button, then\n * calls the call site's own.\n */\nfunction useCorner(radius: number, onLayout: PressableProps['onLayout']) {\n  const { motion } = useTheme()\n  const reduceMotion = useReducedMotion()\n  const height = useSharedValue(0)\n  const timing = {\n    duration: motion.durationShort2,\n    easing: Easing.bezier(...motion.easingEmphasized),\n  }\n  const corner = useAnimatedStyle(() => {\n    'worklet'\n    const measured = height.get()\n    const target = measured > 0 ? Math.min(radius, measured / 2) : radius\n\n    return {\n      borderRadius: reduceMotion ? target : withTiming(target, timing),\n    }\n  })\n\n  return { corner, onLayout: measureThen(height, onLayout) }\n}\n\nexport {\n  AnimatedPressable,\n  buttonStyles,\n  HEIGHTS,\n  OUTLINE_WIDTHS,\n  PRESSED_CORNERS,\n  toggleState,\n  useButtonAction,\n  useCorner,\n}\nexport type { ButtonLinkForm, ButtonPressForm, ButtonToggleForm, ControlSize }\n"],"mappings":"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"}

package/dist/button/pending.js

@@ -0,0 +1,144 @@
+import { IconStyleContext } from "../glyphs/icon-style.js";
+import { ProgressIndicator } from "../components/progress-indicator/index.js";
+import { messagesFor } from "../i18n/index.js";
+import { c } from "react/compiler-runtime";
+import { AccessibilityInfo, Platform, StyleSheet, View } from "react-native";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/button/pending.tsx
+const pendingStyles = StyleSheet.create({
+	hidden: { opacity: 0 },
+	ring: {
+		alignItems: "center",
+		bottom: 0,
+		justifyContent: "center",
+		left: 0,
+		pointerEvents: "none",
+		position: "absolute",
+		right: 0,
+		top: 0
+	}
+});
+const BUSY = { "aria-busy": true };
+const CONCEALED = { "aria-hidden": true };
+/**
+* The icon a button draws, in a view that hides it in place while the button
+* is pending. The view is there whether or not the button is, so an icon
+* keeps its state when the button goes pending and comes back.
+*/
+function PendingContent(t0) {
+	const $ = c(4);
+	const { children, isPending } = t0;
+	const t1 = isPending ? CONCEALED : void 0;
+	const t2 = isPending ? pendingStyles.hidden : void 0;
+	let t3;
+	if ($[0] !== children || $[1] !== t1 || $[2] !== t2) {
+		t3 = /* @__PURE__ */ jsx(View, {
+			...t1,
+			style: t2,
+			children
+		});
+		$[0] = children;
+		$[1] = t1;
+		$[2] = t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	return t3;
+}
+/**
+* The indeterminate ring a pending button draws over its content, in the
+* button's content colour rather than the progress page's primary, which on a
+* filled button is the fill itself. `diameter` is what the content it
+* replaces measures, the label's type size on Button and the icon on
+* IconButton, which is what web's `1em` reads in each.
+*/
+function PendingRing(t0) {
+	const $ = c(9);
+	const { color, diameter, label } = t0;
+	let t1;
+	if ($[0] !== color || $[1] !== diameter) {
+		t1 = slotOf(color, diameter);
+		$[0] = color;
+		$[1] = diameter;
+		$[2] = t1;
+	} else t1 = $[2];
+	const t2 = `${diameter}px`;
+	let t3;
+	if ($[3] !== label || $[4] !== t2) {
+		t3 = /* @__PURE__ */ jsx(ProgressIndicator, {
+			"aria-label": label,
+			diameter: t2,
+			isIndeterminate: true,
+			tone: "inherit",
+			variant: "circular"
+		});
+		$[3] = label;
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t1 || $[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(View, {
+			style: pendingStyles.ring,
+			children: /* @__PURE__ */ jsx(IconStyleContext, {
+				value: t1,
+				children: t3
+			})
+		});
+		$[6] = t1;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
+}
+function slotOf(color, size) {
+	return {
+		color,
+		size
+	};
+}
+/**
+* The ring's name, and the announcement a button makes as it goes pending.
+* The name is `pendingLabel`, or the word for loading in the device's locale.
+*
+* On iOS and Android the change is said through VoiceOver and TalkBack, as
+* web's is said through React Aria's live announcer, since a ring appearing
+* under them is not reliably read. Web says it only to a reader whose focus
+* is on the button; a screen reader's focus is not something a component
+* here can read, so it is said whatever has focus. A button pending as it
+* mounts says nothing, as on web, which announces a change. React Native Web
+* has no announcer, so there the ring is read when the button next is.
+*/
+function usePending(isPending, pendingLabel) {
+	const $ = c(6);
+	let t0;
+	if ($[0] !== pendingLabel) {
+		t0 = pendingLabel ?? messagesFor().loading;
+		$[0] = pendingLabel;
+		$[1] = t0;
+	} else t0 = $[1];
+	const label = t0;
+	const was = useRef(isPending);
+	let t1;
+	let t2;
+	if ($[2] !== isPending || $[3] !== label) {
+		t1 = () => {
+			if (isPending && !was.current && (Platform.OS === "ios" || Platform.OS === "android")) AccessibilityInfo.announceForAccessibility(label);
+			was.current = isPending;
+		};
+		t2 = [isPending, label];
+		$[2] = isPending;
+		$[3] = label;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		t1 = $[4];
+		t2 = $[5];
+	}
+	useEffect(t1, t2);
+	return label;
+}
+//#endregion
+export { BUSY, CONCEALED, PendingContent, PendingRing, pendingStyles, usePending };
+
+//# sourceMappingURL=pending.js.map

package/dist/button/pending.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pending.js","names":["ReactNode","ColorValue","useEffect","useRef","AccessibilityInfo","Platform","StyleSheet","View","IconStyle","ProgressIndicator","IconStyleContext","messagesFor","pendingStyles","create","hidden","opacity","ring","alignItems","bottom","justifyContent","left","pointerEvents","position","right","top","BUSY","const","CONCEALED","PendingContent","t0","$","_c","children","isPending","t1","undefined","t2","t3","PendingRing","color","diameter","label","slotOf","t4","size","usePending","pendingLabel","loading","was","current","OS","announceForAccessibility","_c"],"sources":["../../src/button/pending.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { ColorValue } from 'react-native'\n\nimport { useEffect, useRef } from 'react'\nimport { AccessibilityInfo, Platform, StyleSheet, View } from 'react-native'\n\nimport type { IconStyle } from '../glyphs/icon-style'\n\nimport { ProgressIndicator } from '../components/progress-indicator'\nimport { IconStyleContext } from '../glyphs/icon-style'\nimport { messagesFor } from '../i18n'\n\n// What a pending button draws and says, shared by Button and IconButton as\n// web's ButtonBase draws it for both: the content hidden in place, the ring\n// over it, and the announcement that the button has gone pending.\n\nconst pendingStyles = StyleSheet.create({\n  // The label and the icon while the ring shows: still laid out, so the\n  // button keeps its width, which is what stops a form jumping the moment it\n  // is submitted, and not drawn.\n  hidden: {\n    opacity: 0,\n  },\n  // The ring sits over the hidden content, centred in the button, and takes\n  // no touches.\n  ring: {\n    alignItems: 'center',\n    bottom: 0,\n    justifyContent: 'center',\n    left: 0,\n    pointerEvents: 'none',\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n})\n\n// What a pending button reports to a screen reader, spread before the call\n// site's own props, so an `aria-busy` of its own still wins, as on web.\nconst BUSY = { 'aria-busy': true } as const\n\n// What takes the hidden content out of what a screen reader reads, so the\n// button is named by the ring while it shows.\nconst CONCEALED = { 'aria-hidden': true } as const\n\n/**\n * The icon a button draws, in a view that hides it in place while the button\n * is pending. The view is there whether or not the button is, so an icon\n * keeps its state when the button goes pending and comes back.\n */\nfunction PendingContent({\n  children,\n  isPending,\n}: {\n  readonly children: ReactNode\n  readonly isPending: boolean\n}) {\n  return (\n    <View\n      {...(isPending ? CONCEALED : undefined)}\n      style={isPending ? pendingStyles.hidden : undefined}\n    >\n      {children}\n    </View>\n  )\n}\n\n/**\n * The indeterminate ring a pending button draws over its content, in the\n * button's content colour rather than the progress page's primary, which on a\n * filled button is the fill itself. `diameter` is what the content it\n * replaces measures, the label's type size on Button and the icon on\n * IconButton, which is what web's `1em` reads in each.\n */\nfunction PendingRing({\n  color,\n  diameter,\n  label,\n}: {\n  readonly color: ColorValue\n  readonly diameter: number\n  readonly label: string\n}) {\n  return (\n    <View style={pendingStyles.ring}>\n      <IconStyleContext value={slotOf(color, diameter)}>\n        <ProgressIndicator\n          aria-label={label}\n          diameter={`${diameter}px`}\n          isIndeterminate\n          tone=\"inherit\"\n          variant=\"circular\"\n        />\n      </IconStyleContext>\n    </View>\n  )\n}\n\nfunction slotOf(color: ColorValue, size: number): IconStyle {\n  return { color, size }\n}\n\n/**\n * The ring's name, and the announcement a button makes as it goes pending.\n * The name is `pendingLabel`, or the word for loading in the device's locale.\n *\n * On iOS and Android the change is said through VoiceOver and TalkBack, as\n * web's is said through React Aria's live announcer, since a ring appearing\n * under them is not reliably read. Web says it only to a reader whose focus\n * is on the button; a screen reader's focus is not something a component\n * here can read, so it is said whatever has focus. A button pending as it\n * mounts says nothing, as on web, which announces a change. React Native Web\n * has no announcer, so there the ring is read when the button next is.\n */\nfunction usePending(isPending: boolean, pendingLabel: string | undefined) {\n  const label = pendingLabel ?? messagesFor().loading\n  const was = useRef(isPending)\n\n  useEffect(() => {\n    if (\n      isPending &&\n      !was.current &&\n      (Platform.OS === 'ios' || Platform.OS === 'android')\n    ) {\n      AccessibilityInfo.announceForAccessibility(label)\n    }\n    was.current = isPending\n  }, [isPending, label])\n\n  return label\n}\n\nexport {\n  BUSY,\n  CONCEALED,\n  PendingContent,\n  PendingRing,\n  pendingStyles,\n  usePending,\n}\n"],"mappings":"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"}

package/dist/components/button/index.d.ts

@@ -81,7 +81,7 @@ type ButtonVariant = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal';
  * target through `hitSlop`, which a `hitSlop` of the call site's own replaces.
  * `style`, `ref` and `testID` land on the `Pressable`.
  */
-declare function Button({ children, defaultSelected, disableRipple, hitSlop: ownHitSlop, href, icon, isDisabled, isSelected, onBlur, onChange, onFocus, onHoverIn, onHoverOut, onLayout, onPress, onPressIn, onPressOut, shape, size, style, type, variant, ...props }: ButtonProps): import("react").JSX.Element;
+declare function Button({ children, defaultSelected, disableRipple, hitSlop: ownHitSlop, href, icon, isDisabled, isPending, isSelected, onBlur, onChange, onFocus, onHoverIn, onHoverOut, onLayout, onLongPress, onPress, onPressIn, onPressOut, pendingLabel, shape, size, style, type, variant, ...props }: ButtonProps): import("react").JSX.Element;
 //#endregion
 export { Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/button/index.js

@@ -4,9 +4,10 @@ import { composeStyles, themedStyles } from "../../theme/styles.js";
 import { useTypeRole } from "../../typography/roles.js";
 import { AnimatedPressable, HEIGHTS, OUTLINE_WIDTHS, PRESSED_CORNERS, buttonStyles, toggleState, useButtonAction, useCorner } from "../../button/index.js";
 import { palettesOf } from "../../button/palettes.js";
+import { BUSY, CONCEALED, PendingContent, PendingRing, pendingStyles, usePending } from "../../button/pending.js";
 import { hitSlop, usePressFeedback } from "../../press/index.js";
 import { c } from "react/compiler-runtime";
-import { StyleSheet, Text } from "react-native";
+import { StyleSheet, Text, useWindowDimensions } from "react-native";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Animated from "react-native-reanimated";
 //#region src/components/button/index.tsx
@@ -160,7 +161,7 @@ const outlinedSizesOf = themedStyles((theme) => {
 * `style`, `ref` and `testID` land on the `Pressable`.
 */
 function Button(t0) {
-	const $ = c(58);
+	const $ = c(71);
 	let children;
 	let defaultSelected;
 	let href;
@@ -172,10 +173,12 @@ function Button(t0) {
 	let onHoverIn;
 	let onHoverOut;
 	let onLayout;
+	let onLongPress;
 	let onPress;
 	let onPressIn;
 	let onPressOut;
 	let ownHitSlop;
+	let pendingLabel;
 	let props;
 	let style;
 	let t1;
@@ -183,9 +186,10 @@ function Button(t0) {
 	let t3;
 	let t4;
 	let t5;
+	let t6;
 	let type;
 	if ($[0] !== t0) {
-		({children, defaultSelected, disableRipple: t1, hitSlop: ownHitSlop, href, icon, isDisabled: t2, isSelected, onBlur, onChange, onFocus, onHoverIn, onHoverOut, onLayout, onPress, onPressIn, onPressOut, shape: t3, size: t4, style, type, variant: t5, ...props} = t0);
+		({children, defaultSelected, disableRipple: t1, hitSlop: ownHitSlop, href, icon, isDisabled: t2, isPending: t3, isSelected, onBlur, onChange, onFocus, onHoverIn, onHoverOut, onLayout, onLongPress, onPress, onPressIn, onPressOut, pendingLabel, shape: t4, size: t5, style, type, variant: t6, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = defaultSelected;
@@ -198,18 +202,21 @@ function Button(t0) {
 		$[9] = onHoverIn;
 		$[10] = onHoverOut;
 		$[11] = onLayout;
-		$[12] = onPress;
-		$[13] = onPressIn;
-		$[14] = onPressOut;
-		$[15] = ownHitSlop;
-		$[16] = props;
-		$[17] = style;
-		$[18] = t1;
-		$[19] = t2;
-		$[20] = t3;
-		$[21] = t4;
-		$[22] = t5;
-		$[23] = type;
+		$[12] = onLongPress;
+		$[13] = onPress;
+		$[14] = onPressIn;
+		$[15] = onPressOut;
+		$[16] = ownHitSlop;
+		$[17] = pendingLabel;
+		$[18] = props;
+		$[19] = style;
+		$[20] = t1;
+		$[21] = t2;
+		$[22] = t3;
+		$[23] = t4;
+		$[24] = t5;
+		$[25] = t6;
+		$[26] = type;
 	} else {
 		children = $[1];
 		defaultSelected = $[2];
@@ -222,30 +229,37 @@ function Button(t0) {
 		onHoverIn = $[9];
 		onHoverOut = $[10];
 		onLayout = $[11];
-		onPress = $[12];
-		onPressIn = $[13];
-		onPressOut = $[14];
-		ownHitSlop = $[15];
-		props = $[16];
-		style = $[17];
-		t1 = $[18];
-		t2 = $[19];
-		t3 = $[20];
-		t4 = $[21];
-		t5 = $[22];
-		type = $[23];
+		onLongPress = $[12];
+		onPress = $[13];
+		onPressIn = $[14];
+		onPressOut = $[15];
+		ownHitSlop = $[16];
+		pendingLabel = $[17];
+		props = $[18];
+		style = $[19];
+		t1 = $[20];
+		t2 = $[21];
+		t3 = $[22];
+		t4 = $[23];
+		t5 = $[24];
+		t6 = $[25];
+		type = $[26];
 	}
 	const disableRipple = t1 === void 0 ? false : t1;
 	const isDisabled = t2 === void 0 ? false : t2;
-	const shape = t3 === void 0 ? "round" : t3;
-	const size = t4 === void 0 ? "md" : t4;
-	const variant = t5 === void 0 ? "filled" : t5;
+	const isPending = t3 === void 0 ? false : t3;
+	const shape = t4 === void 0 ? "round" : t4;
+	const size = t5 === void 0 ? "md" : t5;
+	const variant = t6 === void 0 ? "filled" : t6;
 	const theme = useTheme();
 	const role = useTypeRole(ROLES[size]);
+	const { fontScale } = useWindowDimensions();
+	const pending = href === void 0 && isPending;
+	const ringLabel = usePending(pending, pendingLabel);
 	const isToggle = variant !== "text" && (defaultSelected !== void 0 || isSelected !== void 0 || onChange !== void 0);
-	let t6;
-	if ($[24] !== defaultSelected || $[25] !== href || $[26] !== isSelected || $[27] !== isToggle || $[28] !== onChange || $[29] !== onPress || $[30] !== type) {
-		t6 = {
+	let t7;
+	if ($[27] !== defaultSelected || $[28] !== href || $[29] !== isSelected || $[30] !== isToggle || $[31] !== onChange || $[32] !== onPress || $[33] !== type) {
+		t7 = {
 			defaultSelected,
 			href,
 			isSelected,
@@ -254,16 +268,16 @@ function Button(t0) {
 			onPress,
 			type
 		};
-		$[24] = defaultSelected;
-		$[25] = href;
-		$[26] = isSelected;
-		$[27] = isToggle;
-		$[28] = onChange;
-		$[29] = onPress;
-		$[30] = type;
-		$[31] = t6;
-	} else t6 = $[31];
-	const action = useButtonAction(t6);
+		$[27] = defaultSelected;
+		$[28] = href;
+		$[29] = isSelected;
+		$[30] = isToggle;
+		$[31] = onChange;
+		$[32] = onPress;
+		$[33] = type;
+		$[34] = t7;
+	} else t7 = $[34];
+	const action = useButtonAction(t7);
 	const colors = palettesOf(theme)[isDisabled ? DISABLED[variant] : variant !== "text" && isToggle ? TOGGLE_PALETTES[variant][action.selected ? "selected" : "unselected"] : variant];
 	const feedback = usePressFeedback({
 		color: colors.content,
@@ -274,90 +288,118 @@ function Button(t0) {
 		onHoverIn,
 		onHoverOut,
 		onPressIn,
-		onPressOut
+		onPressOut,
+		pending
 	});
 	const { radii } = theme;
 	const resting = shape === "square" !== action.selected ? radii[SQUARE_CORNERS[size]] : radii.pill;
 	const shaped = useCorner(feedback.pressed ? radii[PRESSED_CORNERS[size]] : resting, onLayout);
 	const T0 = AnimatedPressable;
-	const t7 = href === void 0 ? "button" : "link";
-	let t8;
-	if ($[32] !== action.selected || $[33] !== isToggle) {
-		t8 = isToggle ? toggleState(action.selected) : void 0;
-		$[32] = action.selected;
-		$[33] = isToggle;
-		$[34] = t8;
-	} else t8 = $[34];
-	const t9 = feedback.handlers;
-	let t10;
-	if ($[35] !== ownHitSlop || $[36] !== size || $[37] !== theme.sizing) {
-		t10 = ownHitSlop ?? hitSlop(theme.sizing[HEIGHTS[size]]);
-		$[35] = ownHitSlop;
-		$[36] = size;
-		$[37] = theme.sizing;
-		$[38] = t10;
-	} else t10 = $[38];
-	const t11 = shaped.onLayout;
-	const t12 = action.onPress;
-	const t13 = composeStyles(styles.base, sizesOf(theme)[size], variant === "outlined" ? outlinedSizesOf(theme)[size] : void 0, colors.container, shadowOf(variant, feedback, isDisabled, theme), shaped.corner, feedback.ring, style);
-	let t14;
-	if ($[39] !== shaped.corner) {
-		t14 = composeStyles(buttonStyles.clip, shaped.corner);
-		$[39] = shaped.corner;
-		$[40] = t14;
-	} else t14 = $[40];
-	let t15;
-	if ($[41] !== feedback.layer || $[42] !== t14) {
-		t15 = /* @__PURE__ */ jsx(Animated.View, {
-			style: t14,
+	const t8 = href === void 0 ? "button" : "link";
+	let t9;
+	if ($[35] !== action.selected || $[36] !== isToggle) {
+		t9 = isToggle ? toggleState(action.selected) : void 0;
+		$[35] = action.selected;
+		$[36] = isToggle;
+		$[37] = t9;
+	} else t9 = $[37];
+	const t10 = pending ? BUSY : void 0;
+	const t11 = feedback.handlers;
+	let t12;
+	if ($[38] !== ownHitSlop || $[39] !== size || $[40] !== theme.sizing) {
+		t12 = ownHitSlop ?? hitSlop(theme.sizing[HEIGHTS[size]]);
+		$[38] = ownHitSlop;
+		$[39] = size;
+		$[40] = theme.sizing;
+		$[41] = t12;
+	} else t12 = $[41];
+	const t13 = shaped.onLayout;
+	const t14 = pending ? void 0 : onLongPress;
+	const t15 = pending ? void 0 : action.onPress;
+	const t16 = composeStyles(styles.base, sizesOf(theme)[size], variant === "outlined" ? outlinedSizesOf(theme)[size] : void 0, colors.container, shadowOf(variant, feedback, isDisabled, theme), shaped.corner, feedback.ring, style);
+	let t17;
+	if ($[42] !== shaped.corner) {
+		t17 = composeStyles(buttonStyles.clip, shaped.corner);
+		$[42] = shaped.corner;
+		$[43] = t17;
+	} else t17 = $[43];
+	let t18;
+	if ($[44] !== feedback.layer || $[45] !== t17) {
+		t18 = /* @__PURE__ */ jsx(Animated.View, {
+			style: t17,
 			children: feedback.layer
 		});
-		$[41] = feedback.layer;
-		$[42] = t14;
-		$[43] = t15;
-	} else t15 = $[43];
-	const t16 = icon === void 0 ? null : /* @__PURE__ */ jsx(IconStyleContext, {
-		value: iconStyleOf(colors.content, size),
-		children: icon
+		$[44] = feedback.layer;
+		$[45] = t17;
+		$[46] = t18;
+	} else t18 = $[46];
+	const t19 = icon === void 0 ? null : /* @__PURE__ */ jsx(PendingContent, {
+		isPending: pending,
+		children: /* @__PURE__ */ jsx(IconStyleContext, {
+			value: iconStyleOf(colors.content, size),
+			children: icon
+		})
 	});
-	const t17 = children === void 0 ? null : /* @__PURE__ */ jsx(Text, {
-		style: composeStyles(role, styles.label, colors.label),
+	const t20 = children === void 0 ? null : /* @__PURE__ */ jsx(Text, {
+		...pending ? CONCEALED : void 0,
+		style: composeStyles(role, styles.label, colors.label, pending ? pendingStyles.hidden : void 0),
 		children
 	});
-	let t18;
-	if ($[44] !== T0 || $[45] !== action.onPress || $[46] !== feedback.handlers || $[47] !== isDisabled || $[48] !== props || $[49] !== shaped.onLayout || $[50] !== t10 || $[51] !== t13 || $[52] !== t15 || $[53] !== t16 || $[54] !== t17 || $[55] !== t7 || $[56] !== t8) {
-		t18 = /* @__PURE__ */ jsxs(T0, {
-			role: t7,
-			...t8,
-			...props,
+	let t21;
+	if ($[47] !== colors || $[48] !== fontScale || $[49] !== pending || $[50] !== ringLabel || $[51] !== size || $[52] !== theme.typography) {
+		t21 = pending ? /* @__PURE__ */ jsx(PendingRing, {
+			color: colors.content,
+			diameter: theme.typography[`${ROLES[size]}Size`] * fontScale,
+			label: ringLabel
+		}) : null;
+		$[47] = colors;
+		$[48] = fontScale;
+		$[49] = pending;
+		$[50] = ringLabel;
+		$[51] = size;
+		$[52] = theme.typography;
+		$[53] = t21;
+	} else t21 = $[53];
+	let t22;
+	if ($[54] !== T0 || $[55] !== feedback.handlers || $[56] !== isDisabled || $[57] !== props || $[58] !== shaped.onLayout || $[59] !== t10 || $[60] !== t12 || $[61] !== t14 || $[62] !== t15 || $[63] !== t16 || $[64] !== t18 || $[65] !== t19 || $[66] !== t20 || $[67] !== t21 || $[68] !== t8 || $[69] !== t9) {
+		t22 = /* @__PURE__ */ jsxs(T0, {
+			role: t8,
 			...t9,
+			...t10,
+			...props,
+			...t11,
 			disabled: isDisabled,
-			hitSlop: t10,
-			onLayout: t11,
-			onPress: t12,
-			style: t13,
+			hitSlop: t12,
+			onLayout: t13,
+			onLongPress: t14,
+			onPress: t15,
+			style: t16,
 			children: [
-				t15,
-				t16,
-				t17
+				t18,
+				t19,
+				t20,
+				t21
 			]
 		});
-		$[44] = T0;
-		$[45] = action.onPress;
-		$[46] = feedback.handlers;
-		$[47] = isDisabled;
-		$[48] = props;
-		$[49] = shaped.onLayout;
-		$[50] = t10;
-		$[51] = t13;
-		$[52] = t15;
-		$[53] = t16;
-		$[54] = t17;
-		$[55] = t7;
-		$[56] = t8;
-		$[57] = t18;
-	} else t18 = $[57];
-	return t18;
+		$[54] = T0;
+		$[55] = feedback.handlers;
+		$[56] = isDisabled;
+		$[57] = props;
+		$[58] = shaped.onLayout;
+		$[59] = t10;
+		$[60] = t12;
+		$[61] = t14;
+		$[62] = t15;
+		$[63] = t16;
+		$[64] = t18;
+		$[65] = t19;
+		$[66] = t20;
+		$[67] = t21;
+		$[68] = t8;
+		$[69] = t9;
+		$[70] = t22;
+	} else t22 = $[70];
+	return t22;
 }
 function iconStyleOf(color, size) {
 	return {