@kanso-labs/react-native-kanso-ui 0.6.0 → 0.8.0

package/README.md

@@ -155,6 +155,43 @@ export default function App() {
 }
 ```
 
+## Localisation
+
+Wrap the app in `I18nProvider`, as kanso-ui is wrapped in React Aria's, and the
+components write in its locale: the library's own words, such as a pending
+ring's name, a bottom sheet's handle, a list's or a menu's loading and empty
+rows and a calendar's chevrons, and its numbers and dates, such as a
+`Currency`'s amount, a field's count, a `Meter`'s value and a `Calendar`'s
+month. A component given a `locale` of its own writes in that one instead.
+
+Outside any provider, and for a locale the runtime cannot parse, the components
+write in the device's. So an app that follows the device needs no provider, and
+one with a language setting of its own passes the setting, falling back to the
+device's first language from Expo Localization:
+
+```tsx
+// app/_layout.tsx
+import { I18nProvider } from '@kanso-labs/react-native-kanso-ui'
+import { useLocales } from 'expo-localization'
+import { Stack } from 'expo-router'
+
+export default function RootLayout() {
+  const [device] = useLocales()
+  const language = useLanguageSetting() // the app's own, or undefined
+
+  return (
+    <I18nProvider locale={language ?? device?.languageTag}>
+      <Stack />
+    </I18nProvider>
+  )
+}
+```
+
+`useLocale()` returns `{ direction, locale }`, as React Aria's does on web, for
+an app's own formatting to match. The direction is `I18nManager`'s, which is
+what React Native lays out by: the provider sets none, and an app turns its
+layout over with `I18nManager.forceRTL` and a reload.
+
 ## Development
 
 Install with the Node version in `.tool-versions`:

package/dist/badge/index.js

@@ -1,30 +1,33 @@
 import { useTheme } from "../theme/scope.js";
 import { composeStyles } from "../theme/styles.js";
 import { useTypeRole } from "../typography/roles.js";
+import { formatCount } from "../number/count.js";
+import { useLocaleOf } from "../i18n/provider.js";
 import { styles, stylesOf } from "./styles.js";
 import { c } from "react/compiler-runtime";
 import { Text, View } from "react-native";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/badge/index.tsx
-let countFormat;
 /**
 * A badge on the top trailing corner of the icon it wraps: the small dot, or
 * with `count` the large badge holding the number.
 */
 function Badge(t0) {
-	const $ = c(12);
+	const $ = c(13);
 	const { children, count, inFlow: t1, max: t2 } = t0;
 	const inFlow = t1 === void 0 ? false : t1;
 	const max = t2 === void 0 ? 999 : t2;
 	const own = stylesOf(useTheme());
 	const role = useTypeRole("labelSmall");
+	const locale = useLocaleOf(void 0);
 	let t3;
-	if ($[0] !== count || $[1] !== max) {
-		t3 = count === void 0 ? void 0 : countOf(count, max);
+	if ($[0] !== count || $[1] !== locale || $[2] !== max) {
+		t3 = count === void 0 ? void 0 : countOf(count, max, locale);
 		$[0] = count;
-		$[1] = max;
-		$[2] = t3;
-	} else t3 = $[2];
+		$[1] = locale;
+		$[2] = max;
+		$[3] = t3;
+	} else t3 = $[3];
 	const label = t3;
 	const T0 = View;
 	const t4 = styles;
@@ -39,34 +42,33 @@ function Badge(t0) {
 		children: label
 	})] });
 	let t8;
-	if ($[3] !== T1 || $[4] !== t6 || $[5] !== t7) {
+	if ($[4] !== T1 || $[5] !== t6 || $[6] !== t7) {
 		t8 = /* @__PURE__ */ jsx(T1, {
 			"aria-hidden": t5,
 			style: t6,
 			children: t7
 		});
-		$[3] = T1;
-		$[4] = t6;
-		$[5] = t7;
-		$[6] = t8;
-	} else t8 = $[6];
+		$[4] = T1;
+		$[5] = t6;
+		$[6] = t7;
+		$[7] = t8;
+	} else t8 = $[7];
 	let t9;
-	if ($[7] !== T0 || $[8] !== children || $[9] !== t4.anchor || $[10] !== t8) {
+	if ($[8] !== T0 || $[9] !== children || $[10] !== t4.anchor || $[11] !== t8) {
 		t9 = /* @__PURE__ */ jsxs(T0, {
 			style: t4.anchor,
 			children: [children, t8]
 		});
-		$[7] = T0;
-		$[8] = children;
-		$[9] = t4.anchor;
-		$[10] = t8;
-		$[11] = t9;
-	} else t9 = $[11];
+		$[8] = T0;
+		$[9] = children;
+		$[10] = t4.anchor;
+		$[11] = t8;
+		$[12] = t9;
+	} else t9 = $[12];
 	return t9;
 }
-function countOf(count, max) {
-	countFormat ??= new Intl.NumberFormat();
-	return count > max ? `${countFormat.format(max)}+` : countFormat.format(count);
+function countOf(count, max, locale) {
+	return count > max ? `${formatCount(max, locale)}+` : formatCount(count, locale);
 }
 //#endregion
 export { Badge };

package/dist/badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","TextStyle","ViewStyle","Text","NativeText","View","useTheme","composeStyles","useTypeRole","styles","stylesOf","BadgeProps","children","count","inFlow","max","countFormat","Intl","NumberFormat","Badge","t0","$","_c","t1","t2","undefined","own","role","t3","countOf","label","T0","T1","t5","t6","mark","small","large","over","t7","space","t8","t9","t4","anchor","format","_c","NativeText"],"sources":["../../src/badge/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { TextStyle, ViewStyle } from 'react-native'\n\nimport { Text as NativeText, View } from 'react-native'\n\nimport { useTheme } from '../theme/scope'\nimport { composeStyles } from '../theme/styles'\nimport { useTypeRole } from '../typography/roles'\nimport { styles, stylesOf } from './styles'\n\n// The badges page's badge, as kanso-ui's Badge draws it on a navigation\n// destination: a mark on the corner of an icon that flags something new\n// there, either as the 6dp small badge or as the 16dp large badge holding a\n// count. Both are the error pair, the error role with the count in on error,\n// on a full corner, and the count is label small, capped with a plus, as\n// \"999+\".\n//\n// The badge wraps the icon and places the mark against the icon's box,\n// which is what the page measures from. The small badge fills the icon's top\n// trailing 6dp square. The large badge's bottom leading corner sits 14dp\n// down and 12dp in from the icon's top trailing corner, so it stands 2dp\n// above the icon and grows toward the end as its count lengthens. Both are\n// placed by `start` and `end`, so the mark stays on the trailing corner under\n// right-to-left.\n//\n// Where a label stands beside the icon rather than under it, the large badge\n// joins the flow after the icon instead, so the label starts after it rather\n// than under it: `inFlow`. The small badge stays inside the icon's box, so\n// nothing has to make room for it.\n//\n// The mark is hidden from a screen reader. A count read on its own is a\n// number with no subject; it belongs in the name of the control it sits on,\n// where a reader meets it with what it counts, \"First item, 3 new\".\n//\n// The count is set apart from the text before it by a space drawn out of the\n// flow. Under React Native Web the count is still text inside the control,\n// and with nothing between them a label and its count ran together as\n// \"Second item3\", a word in no name: what axe's label-in-name check fails,\n// and not what a speech-input user would say. Web draws the count as\n// generated content instead, which a style here has no counterpart for.\n\ntype BadgeProps = {\n  /** What the badge is drawn on: an icon, at 24dp. */\n  readonly children?: ReactNode\n  /**\n   * The number to show, which draws the large badge. Left out, the badge is\n   * the small dot, which flags without counting.\n   */\n  readonly count?: number | undefined\n  /**\n   * Draws the large badge in the flow after the icon rather than over its\n   * corner, for a label beside the icon.\n   * @default false\n   */\n  readonly inFlow?: boolean\n  /**\n   * The largest count drawn as itself. Above it the badge reads `max` and a\n   * plus, which is the page's 999+ at the default.\n   * @default 999\n   */\n  readonly max?: number\n}\n\nlet countFormat: Intl.NumberFormat | undefined\n\n/**\n * A badge on the top trailing corner of the icon it wraps: the small dot, or\n * with `count` the large badge holding the number.\n */\nfunction Badge({ children, count, inFlow = false, max = 999 }: BadgeProps) {\n  const own = stylesOf(useTheme())\n  const role = useTypeRole('labelSmall')\n  const label = count === undefined ? undefined : countOf(count, max)\n\n  return (\n    <View style={styles.anchor}>\n      {children}\n      <View\n        aria-hidden\n        style={composeStyles<ViewStyle>(\n          own.mark,\n          label === undefined\n            ? styles.small\n            : [own.large, inFlow ? styles.inFlow : styles.over],\n        )}\n      >\n        {label === undefined ? null : (\n          <>\n            <NativeText style={styles.space}> </NativeText>\n            <NativeText style={composeStyles<TextStyle>(role, own.count)}>\n              {label}\n            </NativeText>\n          </>\n        )}\n      </View>\n    </View>\n  )\n}\n\n// The count in the device's digits and grouping, as web writes it in the\n// reader's locale. One formatter, since a badge's count changes often.\nfunction countOf(count: number, max: number) {\n  countFormat ??= new Intl.NumberFormat()\n\n  return count > max ? `${countFormat.format(max)}+` : countFormat.format(count)\n}\n\nexport type { BadgeProps }\n\nexport { Badge }\n"],"mappings":";;;;;;;;AA+DA,IAAIgB;;;;;AAMJ,SAAAG,MAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAe,MAAA,EAAAV,UAAAC,OAAAC,QAAAS,IAAAR,KAAAS,OAAAJ;CAAmB,MAAAN,SAAAS,OAAAE,KAAAA,IAAA,QAAAF;CAAgB,MAAAR,MAAAS,OAAAC,KAAAA,IAAA,MAAAD;CAChD,MAAAE,MAAYhB,SAASJ,SAAS,CAAC;CAC/B,MAAAqB,OAAanB,YAAY,YAAY;CAAC,IAAAoB;CAAA,IAAAP,EAAA,OAAAR,SAAAQ,EAAA,OAAAN,KAAA;EACxBa,KAAAf,UAAUY,KAAAA,IAAVA,KAAAA,IAAkCI,QAAQhB,OAAOE,GAAG;EAACM,EAAA,KAAAR;EAAAQ,EAAA,KAAAN;EAAAM,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAnE,MAAAS,QAAcF;CAGX,MAAAG,KAAA1B;CAAYI,MAAAA,KAAAA;CAEV,MAAAuB,KAAA3B;CACC,MAAA4B,KAAA;CACO,MAAAC,KAAA3B,cACLmB,IAAGS,MACHL,UAAUL,KAAAA,IACNhB,OAAM2B,QADV,CAEKV,IAAGW,OAAQvB,SAASL,OAAMK,SAAUL,OAAM6B,IAAK,CACtD;CAEC,MAAAC,KAAAT,UAAUL,KAAAA,IAAV,OAAA,qBAAA,UAAA,EAAA,UAAA,CAEG,oBAACsB,MAAD;EAAmB,OAAAtC,OAAM+B;EAAQ,UAAA;CAAtB,CAAA,GACX,oBAACO,MAAD;EAAmB,OAAAxC,cAAyBoB,MAAMD,IAAGb,KAAM;EACxDiB,UAAAA;CADQ,CAAA,CAEE,EAAA,CAAA;CAEhB,IAAAW;CAAA,IAAApB,EAAA,OAAAW,MAAAX,EAAA,OAAAa,MAAAb,EAAA,OAAAkB,IAAA;EAhBHE,KAAA,oBAAC,IAAD;GACE,eAAAR;GACO,OAAAC;GAONK,UAAAA;EATE,CAAA;EAiBElB,EAAA,KAAAW;EAAAX,EAAA,KAAAa;EAAAb,EAAA,KAAAkB;EAAAlB,EAAA,KAAAoB;CAAA,OAAAA,KAAApB,EAAA;CAAA,IAAAqB;CAAA,IAAArB,EAAA,OAAAU,MAAAV,EAAA,OAAAT,YAAAS,EAAA,OAAAsB,GAAAC,UAAAvB,EAAA,QAAAoB,IAAA;EAnBTC,KAAA,qBAAC,IAAD;GAAa,OAAAjC,GAAMmC;GAAnB,UAAA,CACGhC,UACD6B,EAFG;;EAoBEpB,EAAA,KAAAU;EAAAV,EAAA,KAAAT;EAAAS,EAAA,KAAAsB,GAAAC;EAAAvB,EAAA,MAAAoB;EAAApB,EAAA,MAAAqB;CAAA,OAAAA,KAAArB,EAAA;CAAA,OApBPqB;AAoBO;AAMX,SAASb,QAAQhB,OAAeE,KAAa;CAC3CC,gBAAgB,IAAIC,KAAKC,aAAa;CAEtC,OAAOL,QAAQE,MAAM,GAAGC,YAAY6B,OAAO9B,GAAG,EAAC,KAAMC,YAAY6B,OAAOhC,KAAK;AAC/E"}
+{"version":3,"file":"index.js","names":["ReactNode","TextStyle","ViewStyle","Text","NativeText","View","useLocaleOf","formatCount","useTheme","composeStyles","useTypeRole","styles","stylesOf","BadgeProps","children","count","inFlow","max","Badge","t0","$","_c","t1","t2","undefined","own","role","locale","t3","countOf","label","T0","T1","t5","t6","mark","small","large","over","t7","space","t8","t9","t4","anchor","_c","NativeText"],"sources":["../../src/badge/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { TextStyle, ViewStyle } from 'react-native'\n\nimport { Text as NativeText, View } from 'react-native'\n\nimport { useLocaleOf } from '../i18n/provider'\nimport { formatCount } from '../number/count'\nimport { useTheme } from '../theme/scope'\nimport { composeStyles } from '../theme/styles'\nimport { useTypeRole } from '../typography/roles'\nimport { styles, stylesOf } from './styles'\n\n// The badges page's badge, as kanso-ui's Badge draws it on a navigation\n// destination: a mark on the corner of an icon that flags something new\n// there, either as the 6dp small badge or as the 16dp large badge holding a\n// count. Both are the error pair, the error role with the count in on error,\n// on a full corner, and the count is label small, capped with a plus, as\n// \"999+\".\n//\n// The badge wraps the icon and places the mark against the icon's box,\n// which is what the page measures from. The small badge fills the icon's top\n// trailing 6dp square. The large badge's bottom leading corner sits 14dp\n// down and 12dp in from the icon's top trailing corner, so it stands 2dp\n// above the icon and grows toward the end as its count lengthens. Both are\n// placed by `start` and `end`, so the mark stays on the trailing corner under\n// right-to-left.\n//\n// Where a label stands beside the icon rather than under it, the large badge\n// joins the flow after the icon instead, so the label starts after it rather\n// than under it: `inFlow`. The small badge stays inside the icon's box, so\n// nothing has to make room for it.\n//\n// The mark is hidden from a screen reader. A count read on its own is a\n// number with no subject; it belongs in the name of the control it sits on,\n// where a reader meets it with what it counts, \"First item, 3 new\".\n//\n// The count is set apart from the text before it by a space drawn out of the\n// flow. Under React Native Web the count is still text inside the control,\n// and with nothing between them a label and its count ran together as\n// \"Second item3\", a word in no name: what axe's label-in-name check fails,\n// and not what a speech-input user would say. Web draws the count as\n// generated content instead, which a style here has no counterpart for.\n\ntype BadgeProps = {\n  /** What the badge is drawn on: an icon, at 24dp. */\n  readonly children?: ReactNode\n  /**\n   * The number to show, which draws the large badge. Left out, the badge is\n   * the small dot, which flags without counting.\n   */\n  readonly count?: number | undefined\n  /**\n   * Draws the large badge in the flow after the icon rather than over its\n   * corner, for a label beside the icon.\n   * @default false\n   */\n  readonly inFlow?: boolean\n  /**\n   * The largest count drawn as itself. Above it the badge reads `max` and a\n   * plus, which is the page's 999+ at the default.\n   * @default 999\n   */\n  readonly max?: number\n}\n\n/**\n * A badge on the top trailing corner of the icon it wraps: the small dot, or\n * with `count` the large badge holding the number.\n */\nfunction Badge({ children, count, inFlow = false, max = 999 }: BadgeProps) {\n  const own = stylesOf(useTheme())\n  const role = useTypeRole('labelSmall')\n  const locale = useLocaleOf(undefined)\n  const label = count === undefined ? undefined : countOf(count, max, locale)\n\n  return (\n    <View style={styles.anchor}>\n      {children}\n      <View\n        aria-hidden\n        style={composeStyles<ViewStyle>(\n          own.mark,\n          label === undefined\n            ? styles.small\n            : [own.large, inFlow ? styles.inFlow : styles.over],\n        )}\n      >\n        {label === undefined ? null : (\n          <>\n            <NativeText style={styles.space}> </NativeText>\n            <NativeText style={composeStyles<TextStyle>(role, own.count)}>\n              {label}\n            </NativeText>\n          </>\n        )}\n      </View>\n    </View>\n  )\n}\n\n// The count in the locale's digits and grouping, as web writes it in the\n// provider's.\nfunction countOf(count: number, max: number, locale: string) {\n  return count > max\n    ? `${formatCount(max, locale)}+`\n    : formatCount(count, locale)\n}\n\nexport type { BadgeProps }\n\nexport { Badge }\n"],"mappings":";;;;;;;;;;;;;;AAqEA,SAAAkB,MAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAe,MAAA,EAAAP,UAAAC,OAAAC,QAAAM,IAAAL,KAAAM,OAAAJ;CAAmB,MAAAH,SAAAM,OAAAE,KAAAA,IAAA,QAAAF;CAAgB,MAAAL,MAAAM,OAAAC,KAAAA,IAAA,MAAAD;CAChD,MAAAE,MAAYb,SAASJ,SAAS,CAAC;CAC/B,MAAAkB,OAAahB,YAAY,YAAY;CACrC,MAAAiB,SAAerB,YAAYkB,KAAAA,CAAS;CAAC,IAAAI;CAAA,IAAAR,EAAA,OAAAL,SAAAK,EAAA,OAAAO,UAAAP,EAAA,OAAAH,KAAA;EACvBW,KAAAb,UAAUS,KAAAA,IAAVA,KAAAA,IAAkCK,QAAQd,OAAOE,KAAKU,MAAM;EAACP,EAAA,KAAAL;EAAAK,EAAA,KAAAO;EAAAP,EAAA,KAAAH;EAAAG,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAA3E,MAAAU,QAAcF;CAGX,MAAAG,KAAA1B;CAAYM,MAAAA,KAAAA;CAEV,MAAAqB,KAAA3B;CACC,MAAA4B,KAAA;CACO,MAAAC,KAAAzB,cACLgB,IAAGU,MACHL,UAAUN,KAAAA,IACNb,OAAMyB,QADV,CAEKX,IAAGY,OAAQrB,SAASL,OAAMK,SAAUL,OAAM2B,IAAK,CACtD;CAEC,MAAAC,KAAAT,UAAUN,KAAAA,IAAV,OAAA,qBAAA,UAAA,EAAA,UAAA,CAEG,oBAACsB,MAAD;EAAmB,OAAAnC,OAAM6B;EAAQ,UAAA;CAAtB,CAAA,GACX,oBAACM,MAAD;EAAmB,OAAArC,cAAyBiB,MAAMD,IAAGV,KAAM;EACxDe,UAAAA;CADQ,CAAA,CAEE,EAAA,CAAA;CAEhB,IAAAW;CAAA,IAAArB,EAAA,OAAAY,MAAAZ,EAAA,OAAAc,MAAAd,EAAA,OAAAmB,IAAA;EAhBHE,KAAA,oBAAC,IAAD;GACE,eAAAR;GACO,OAAAC;GAONK,UAAAA;EATE,CAAA;EAiBEnB,EAAA,KAAAY;EAAAZ,EAAA,KAAAc;EAAAd,EAAA,KAAAmB;EAAAnB,EAAA,KAAAqB;CAAA,OAAAA,KAAArB,EAAA;CAAA,IAAAsB;CAAA,IAAAtB,EAAA,OAAAW,MAAAX,EAAA,OAAAN,YAAAM,EAAA,QAAAuB,GAAAC,UAAAxB,EAAA,QAAAqB,IAAA;EAnBTC,KAAA,qBAAC,IAAD;GAAa,OAAA/B,GAAMiC;GAAnB,UAAA,CACG9B,UACD2B,EAFG;;EAoBErB,EAAA,KAAAW;EAAAX,EAAA,KAAAN;EAAAM,EAAA,MAAAuB,GAAAC;EAAAxB,EAAA,MAAAqB;EAAArB,EAAA,MAAAsB;CAAA,OAAAA,KAAAtB,EAAA;CAAA,OApBPsB;AAoBO;AAMX,SAASb,QAAQd,OAAeE,KAAaU,QAAgB;CAC3D,OAAOZ,QAAQE,MACX,GAAGV,YAAYU,KAAKU,MAAM,EAAC,KAC3BpB,YAAYQ,OAAOY,MAAM;AAC/B"}

package/dist/button/index.d.ts

@@ -38,7 +38,8 @@ type ButtonPending = {
   /**
    * 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.
+   * the word for it in the `I18nProvider`'s locale, or the device's outside
+   * one, "Loading" in English.
    */
   readonly pendingLabel?: string;
 };

package/dist/button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Ref","GestureResponderEvent","HostInstance","LayoutChangeEvent","PressableProps","SharedValue","use","useState","Platform","Pressable","StyleSheet","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","ResolvedTheme","FormContext","refsOf","useOpenLink","useTheme","ButtonSlotContext","ButtonLinkForm","defaultSelected","href","isPending","isSelected","onChange","pendingLabel","slot","type","ButtonPending","ButtonPressForm","ButtonToggleForm","ControlSize","SlotTriggerProps","delayLongPress","onHoverIn","onHoverOut","onLongPress","ref","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","andThen","own","event","E","undefined","measureThen","height","onLayout","set","nativeEvent","layout","pressThen","onPress","then","useButtonAction","t0","$","_c","isToggle","openLink","form","slots","ownSelected","setOwnSelected","filled","t1","follow","requestSubmit","t2","t3","useCorner","radius","motion","reduceMotion","durationShort2","easingEmphasized","bezier","duration","easing","timing","corner","measured","get","target","Math","min","borderRadius","t4","useSlotTrigger","trigger","expanded","_c"],"sources":["../../src/button/index.ts"],"sourcesContent":["import type { Ref } from 'react'\nimport type {\n  GestureResponderEvent,\n  HostInstance,\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 { refsOf } from '../ref'\nimport { useOpenLink } from '../router'\nimport { useTheme } from '../theme/scope'\nimport { ButtonSlotContext } from './slots'\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, and what the slot it\n// fills in an overlay adds to it, the corner that eases between shapes, and\n// 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 slot?: 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   * `close` closes the overlay the button is in, as web's React Aria slot of\n   * that name does: a `Dialog` given one inside its content closes when it is\n   * pressed, after the button's own `onPress`.\n   */\n  readonly slot?: 'close'\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 slot?: never\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. */\n// What `useSlotTrigger` hands the Pressable, spelled out because the\n// composed ref's inferred type names a private React Native module, which a\n// declaration file cannot reach.\ntype SlotTriggerProps = {\n  readonly 'aria-expanded'?: boolean\n  readonly delayLongPress: PressableProps['delayLongPress']\n  readonly onHoverIn: PressableProps['onHoverIn']\n  readonly onHoverOut: PressableProps['onHoverOut']\n  readonly onLongPress: PressableProps['onLongPress']\n  readonly ref: Ref<HostInstance> | undefined\n}\n\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// A handler that runs the call site's own and then the slot's, which takes no\n// event, or the call site's alone where the slot adds nothing.\nfunction andThen<E>(\n  own: ((event: E) => void) | null | undefined,\n  slot: (() => void) | undefined,\n) {\n  if (slot === undefined) {\n    return own ?? undefined\n  }\n\n  return (event: E) => {\n    own?.(event)\n    slot()\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(\n  onPress: PressableProps['onPress'],\n  then: (event: GestureResponderEvent) => void,\n) {\n  return (event: GestureResponderEvent) => {\n    onPress?.(event)\n    then(event)\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 *\n * Given a `slot`, a button that is not a link then does what that slot of\n * the overlay around it does, as src/button's slots.ts sets out: opens it\n * from the trigger, or closes it from its content.\n */\nfunction useButtonAction({\n  defaultSelected,\n  href,\n  isSelected,\n  isToggle,\n  onChange,\n  onPress,\n  slot,\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 slot?: 'close' | 'default'\n  readonly type: 'button' | 'submit' | undefined\n}) {\n  const openLink = useOpenLink()\n  const form = use(FormContext)\n  const slots = use(ButtonSlotContext)\n  const [ownSelected, setOwnSelected] = useState(defaultSelected ?? false)\n  const selected = isToggle && (isSelected ?? ownSelected)\n  const filled = slot === undefined ? undefined : slots?.[slot]\n\n  function follow(event: GestureResponderEvent) {\n    if (href !== undefined) {\n      openLink(href)\n      return\n    }\n    if (isToggle) {\n      setOwnSelected(!selected)\n      onChange?.(!selected)\n    } else if (type === 'submit') {\n      form?.requestSubmit()\n    }\n    filled?.(event)\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\n/**\n * What a button filling the default slot of an overlay drawn beside it takes\n * on, as src/button's slots.ts sets out: its node is kept for the overlay to\n * be placed against, alongside the call site's own `ref`, `aria-expanded`\n * says whether the overlay is open, and the overlay's hover and long press\n * handlers run after the call site's. A button filling no such slot, or a\n * link, keeps its own props untouched.\n */\nfunction useSlotTrigger({\n  delayLongPress,\n  href,\n  onHoverIn,\n  onHoverOut,\n  onLongPress,\n  ref,\n  slot,\n}: {\n  readonly delayLongPress: PressableProps['delayLongPress']\n  readonly href: string | undefined\n  readonly onHoverIn: PressableProps['onHoverIn']\n  readonly onHoverOut: PressableProps['onHoverOut']\n  readonly onLongPress: PressableProps['onLongPress']\n  readonly ref: Ref<HostInstance> | undefined\n  readonly slot: 'close' | undefined\n}): SlotTriggerProps {\n  const slots = use(ButtonSlotContext)\n  const trigger =\n    href === undefined && slot === undefined ? slots?.trigger : undefined\n\n  return {\n    ...(trigger === undefined\n      ? { delayLongPress, ref }\n      : {\n          'aria-expanded': trigger.expanded,\n          delayLongPress: trigger.delayLongPress ?? delayLongPress,\n          ref: refsOf(trigger.ref, ref),\n        }),\n    onHoverIn: andThen(onHoverIn, trigger?.onHoverIn),\n    onHoverOut: andThen(onHoverOut, trigger?.onHoverOut),\n    onLongPress: andThen(onLongPress, trigger?.onLongPress),\n  }\n}\n\nexport {\n  AnimatedPressable,\n  buttonStyles,\n  HEIGHTS,\n  OUTLINE_WIDTHS,\n  PRESSED_CORNERS,\n  toggleState,\n  useButtonAction,\n  useCorner,\n  useSlotTrigger,\n}\nexport type { ButtonLinkForm, ButtonPressForm, ButtonToggleForm, ControlSize }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Ref","GestureResponderEvent","HostInstance","LayoutChangeEvent","PressableProps","SharedValue","use","useState","Platform","Pressable","StyleSheet","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","ResolvedTheme","FormContext","refsOf","useOpenLink","useTheme","ButtonSlotContext","ButtonLinkForm","defaultSelected","href","isPending","isSelected","onChange","pendingLabel","slot","type","ButtonPending","ButtonPressForm","ButtonToggleForm","ControlSize","SlotTriggerProps","delayLongPress","onHoverIn","onHoverOut","onLongPress","ref","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","andThen","own","event","E","undefined","measureThen","height","onLayout","set","nativeEvent","layout","pressThen","onPress","then","useButtonAction","t0","$","_c","isToggle","openLink","form","slots","ownSelected","setOwnSelected","filled","t1","follow","requestSubmit","t2","t3","useCorner","radius","motion","reduceMotion","durationShort2","easingEmphasized","bezier","duration","easing","timing","corner","measured","get","target","Math","min","borderRadius","t4","useSlotTrigger","trigger","expanded","_c"],"sources":["../../src/button/index.ts"],"sourcesContent":["import type { Ref } from 'react'\nimport type {\n  GestureResponderEvent,\n  HostInstance,\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 { refsOf } from '../ref'\nimport { useOpenLink } from '../router'\nimport { useTheme } from '../theme/scope'\nimport { ButtonSlotContext } from './slots'\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, and what the slot it\n// fills in an overlay adds to it, the corner that eases between shapes, and\n// 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 slot?: 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 `I18nProvider`'s locale, or the device's outside\n   * one, \"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   * `close` closes the overlay the button is in, as web's React Aria slot of\n   * that name does: a `Dialog` given one inside its content closes when it is\n   * pressed, after the button's own `onPress`.\n   */\n  readonly slot?: 'close'\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 slot?: never\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. */\n// What `useSlotTrigger` hands the Pressable, spelled out because the\n// composed ref's inferred type names a private React Native module, which a\n// declaration file cannot reach.\ntype SlotTriggerProps = {\n  readonly 'aria-expanded'?: boolean\n  readonly delayLongPress: PressableProps['delayLongPress']\n  readonly onHoverIn: PressableProps['onHoverIn']\n  readonly onHoverOut: PressableProps['onHoverOut']\n  readonly onLongPress: PressableProps['onLongPress']\n  readonly ref: Ref<HostInstance> | undefined\n}\n\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// A handler that runs the call site's own and then the slot's, which takes no\n// event, or the call site's alone where the slot adds nothing.\nfunction andThen<E>(\n  own: ((event: E) => void) | null | undefined,\n  slot: (() => void) | undefined,\n) {\n  if (slot === undefined) {\n    return own ?? undefined\n  }\n\n  return (event: E) => {\n    own?.(event)\n    slot()\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(\n  onPress: PressableProps['onPress'],\n  then: (event: GestureResponderEvent) => void,\n) {\n  return (event: GestureResponderEvent) => {\n    onPress?.(event)\n    then(event)\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 *\n * Given a `slot`, a button that is not a link then does what that slot of\n * the overlay around it does, as src/button's slots.ts sets out: opens it\n * from the trigger, or closes it from its content.\n */\nfunction useButtonAction({\n  defaultSelected,\n  href,\n  isSelected,\n  isToggle,\n  onChange,\n  onPress,\n  slot,\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 slot?: 'close' | 'default'\n  readonly type: 'button' | 'submit' | undefined\n}) {\n  const openLink = useOpenLink()\n  const form = use(FormContext)\n  const slots = use(ButtonSlotContext)\n  const [ownSelected, setOwnSelected] = useState(defaultSelected ?? false)\n  const selected = isToggle && (isSelected ?? ownSelected)\n  const filled = slot === undefined ? undefined : slots?.[slot]\n\n  function follow(event: GestureResponderEvent) {\n    if (href !== undefined) {\n      openLink(href)\n      return\n    }\n    if (isToggle) {\n      setOwnSelected(!selected)\n      onChange?.(!selected)\n    } else if (type === 'submit') {\n      form?.requestSubmit()\n    }\n    filled?.(event)\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\n/**\n * What a button filling the default slot of an overlay drawn beside it takes\n * on, as src/button's slots.ts sets out: its node is kept for the overlay to\n * be placed against, alongside the call site's own `ref`, `aria-expanded`\n * says whether the overlay is open, and the overlay's hover and long press\n * handlers run after the call site's. A button filling no such slot, or a\n * link, keeps its own props untouched.\n */\nfunction useSlotTrigger({\n  delayLongPress,\n  href,\n  onHoverIn,\n  onHoverOut,\n  onLongPress,\n  ref,\n  slot,\n}: {\n  readonly delayLongPress: PressableProps['delayLongPress']\n  readonly href: string | undefined\n  readonly onHoverIn: PressableProps['onHoverIn']\n  readonly onHoverOut: PressableProps['onHoverOut']\n  readonly onLongPress: PressableProps['onLongPress']\n  readonly ref: Ref<HostInstance> | undefined\n  readonly slot: 'close' | undefined\n}): SlotTriggerProps {\n  const slots = use(ButtonSlotContext)\n  const trigger =\n    href === undefined && slot === undefined ? slots?.trigger : undefined\n\n  return {\n    ...(trigger === undefined\n      ? { delayLongPress, ref }\n      : {\n          'aria-expanded': trigger.expanded,\n          delayLongPress: trigger.delayLongPress ?? delayLongPress,\n          ref: refsOf(trigger.ref, ref),\n        }),\n    onHoverIn: andThen(onHoverIn, trigger?.onHoverIn),\n    onHoverOut: andThen(onHoverOut, trigger?.onHoverOut),\n    onLongPress: andThen(onLongPress, trigger?.onLongPress),\n  }\n}\n\nexport {\n  AnimatedPressable,\n  buttonStyles,\n  HEIGHTS,\n  OUTLINE_WIDTHS,\n  PRESSED_CORNERS,\n  toggleState,\n  useButtonAction,\n  useCorner,\n  useSlotTrigger,\n}\nexport type { ButtonLinkForm, ButtonPressForm, ButtonToggleForm, ControlSize }\n"],"mappings":"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"}

package/dist/button/pending.js

@@ -1,6 +1,6 @@
 import { IconStyleContext } from "../glyphs/icon-style.js";
+import { useMessages } from "../i18n/provider.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";
@@ -99,7 +99,8 @@ function slotOf(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.
+* The name is `pendingLabel`, or the word for loading in the locale
+* `useLocaleOf` resolves.
 *
 * 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
@@ -110,32 +111,27 @@ function slotOf(color, size) {
 * 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 $ = c(4);
+	const messages = useMessages();
+	const label = pendingLabel ?? messages.loading;
 	const was = useRef(isPending);
+	let t0;
 	let t1;
-	let t2;
-	if ($[2] !== isPending || $[3] !== label) {
-		t1 = () => {
+	if ($[0] !== isPending || $[1] !== label) {
+		t0 = () => {
 			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;
+		t1 = [isPending, label];
+		$[0] = isPending;
+		$[1] = label;
+		$[2] = t0;
+		$[3] = t1;
 	} else {
-		t1 = $[4];
-		t2 = $[5];
+		t0 = $[2];
+		t1 = $[3];
 	}
-	useEffect(t1, t2);
+	useEffect(t0, t1);
 	return label;
 }
 //#endregion

package/dist/button/pending.js.map

@@ -1 +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":";;;;;;;;AAgBA,MAAMY,gBAAgBN,WAAWO,OAAO;CAItCC,QAAQ,EACNC,SAAS,EACX;CAGAC,MAAM;EACJC,YAAY;EACZC,QAAQ;EACRC,gBAAgB;EAChBC,MAAM;EACNC,eAAe;EACfC,UAAU;EACVC,OAAO;EACPC,KAAK;CACP;AACF,CAAC;AAID,MAAMC,OAAO,EAAE,aAAa,KAAK;AAIjC,MAAME,YAAY,EAAE,eAAe,KAAK;;;;;;AAOxC,SAAAC,eAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAwB,MAAA,EAAAC,UAAAC,cAAAJ;CASb,MAAAK,KAAAD,YAAAN,YAAAQ,KAAAA;CACE,MAAAC,KAAAH,YAAYrB,cAAaE,SAAzBqB,KAAAA;CAA4C,IAAAE;CAAA,IAAAP,EAAA,OAAAE,YAAAF,EAAA,OAAAI,MAAAJ,EAAA,OAAAM,IAAA;EAFrDC,KAAA,oBAAC,MAAD;GAAK,GACEH;GACE,OAAAE;GAENJ;EAJE,CAAA;EAKEF,EAAA,KAAAE;EAAAF,EAAA,KAAAI;EAAAJ,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,OALPO;AAKO;;;;;;;;AAWX,SAAAC,YAAAT,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAqB,MAAA,EAAAQ,OAAAC,UAAAC,UAAAZ;CAQpB,IAAAK;CAAA,IAAAJ,EAAA,OAAAS,SAAAT,EAAA,OAAAU,UAAA;EAG8BN,KAAAQ,OAAOH,OAAOC,QAAQ;EAACV,EAAA,KAAAS;EAAAT,EAAA,KAAAU;EAAAV,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAGlC,MAAAM,KAAA,GAAGI,SAAQ;CAAI,IAAAH;CAAA,IAAAP,EAAA,OAAAW,SAAAX,EAAA,OAAAM,IAAA;EAF3BC,KAAA,oBAAC,mBAAD;GACcI,cAAAA;GACF,UAAAL;GACV,iBAAA;GACK,MAAA;GACG,SAAA;EAAU,CAAA;EAClBN,EAAA,KAAAW;EAAAX,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAI,MAAAJ,EAAA,OAAAO,IAAA;EARNM,KAAA,oBAAC,MAAD;GAAa,OAAA/B,cAAaI;GACxB,UAAA,oBAAC,kBAAD;IAAyB,OAAAkB;IACvBG,UAAAA;GADe,CAAA;EADd,CAAA;EAUEP,EAAA,KAAAI;EAAAJ,EAAA,KAAAO;EAAAP,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,OAVPa;AAUO;AAIX,SAASD,OAAOH,OAAmBK,MAAyB;CAC1D,OAAO;EAAEL;EAAOK;CAAK;AACvB;;;;;;;;;;;;;AAcA,SAAAC,WAAAZ,WAAAa,cAAA;CAAA,MAAAhB,IAAAC,EAAA,CAAA;CAAA,IAAAF;CAAA,IAAAC,EAAA,OAAAgB,cAAA;EACgBjB,KAAAiB,gBAAgBnC,YAAY,CAAC,CAAAoC;EAAQjB,EAAA,KAAAgB;EAAAhB,EAAA,KAAAD;CAAA,OAAAA,KAAAC,EAAA;CAAnD,MAAAW,QAAcZ;CACd,MAAAmB,MAAY7C,OAAO8B,SAAS;CAAC,IAAAC;CAAA,IAAAE;CAAA,IAAAN,EAAA,OAAAG,aAAAH,EAAA,OAAAW,OAAA;EAEnBP,WAAA;GACR,IACED,aAAA,CACCe,IAAGC,YACH5C,SAAQ6C,OAAQ,SAAS7C,SAAQ6C,OAAQ,YAE1C9C,kBAAiB+C,yBAA0BV,KAAK;GAElDO,IAAGC,UAAWhB;EAAH;EACVG,KAAA,CAACH,WAAWQ,KAAK;EAACX,EAAA,KAAAG;EAAAH,EAAA,KAAAW;EAAAX,EAAA,KAAAI;EAAAJ,EAAA,KAAAM;CAAA,OAAA;EAAAF,KAAAJ,EAAA;EAAAM,KAAAN,EAAA;CAAA;CATrB5B,UAAUgC,IASPE,EAAkB;CAAC,OAEfK;AAAK"}
+{"version":3,"file":"pending.js","names":["ReactNode","ColorValue","useEffect","useRef","AccessibilityInfo","Platform","StyleSheet","View","IconStyle","ProgressIndicator","IconStyleContext","useMessages","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","messages","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 { useMessages } from '../i18n/provider'\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 locale\n * `useLocaleOf` resolves.\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 messages = useMessages()\n  const label = pendingLabel ?? messages.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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"}