@kanso-labs/react-native-kanso-ui 0.0.0-stage → 0.1.1

package/dist/components/currency/index.js

@@ -0,0 +1,162 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useFontFamily } from "../../typography/fonts.js";
+import { familyStyle, nativeWeight } from "../../typography/roles.js";
+import { c } from "react/compiler-runtime";
+import { StyleSheet, Text } from "react-native";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/currency/index.tsx
+const stylesOf = themedStyles(({ colors, typography }) => StyleSheet.create({
+	base: {
+		fontVariant: ["tabular-nums"],
+		fontWeight: nativeWeight(typography.weightMedium)
+	},
+	negative: { color: colors.negative },
+	neutral: { color: colors.onSurface },
+	positive: { color: colors.positive }
+}));
+const MINUS_SIGN = "−";
+const PLUS_SIGN = "+";
+const LOCALE_MINUS = /[-\u2212]/u;
+/**
+* An amount of money, formatted for the reader's locale in the mono face with
+* tabular figures, so a column of amounts lines up on the decimal point.
+* Negatives carry a true minus sign, and the tone follows the sign unless
+* `tone` names one.
+*
+* ```tsx
+* <Text variant="bodyLarge">
+*   <Currency currency="EUR" value={-42.5} />
+* </Text>
+* ```
+*
+* It sets no size of its own, so it takes the type of the Text around it:
+* put it in one, a heading-scale one for a larger figure. On its own it draws
+* at the platform's default size. The face is the mono family's first, once
+* the app has registered it with expo-font, and the system font until then,
+* with tabular figures either way.
+*
+* Web's `render` has no counterpart. `style`, `ref` and `testID` land on React
+* Native's own Text.
+*/
+function Currency(t0) {
+	const $ = c(13);
+	let locale;
+	let props;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	let value;
+	if ($[0] !== t0) {
+		({currency: t1, locale, sign: t2, style, tone: t3, value, ...props} = t0);
+		$[0] = t0;
+		$[1] = locale;
+		$[2] = props;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+		$[7] = value;
+	} else {
+		locale = $[1];
+		props = $[2];
+		style = $[3];
+		t1 = $[4];
+		t2 = $[5];
+		t3 = $[6];
+		value = $[7];
+	}
+	const currency = t1 === void 0 ? "USD" : t1;
+	const sign = t2 === void 0 ? "auto" : t2;
+	const tone = t3 === void 0 ? "auto" : t3;
+	const theme = useTheme();
+	const own = stylesOf(theme);
+	const family = familyStyle(useFontFamily(theme.typography.fontFamilyMono));
+	const amount = formatCurrency(value, {
+		currency,
+		locale,
+		sign
+	});
+	const T0 = Text;
+	const t4 = composeStyles(own.base, family, own[resolveTone(value, tone, amount.shownAsZero)], style);
+	let t5;
+	if ($[8] !== T0 || $[9] !== amount.text || $[10] !== props || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			...props,
+			style: t4,
+			children: amount.text
+		});
+		$[8] = T0;
+		$[9] = amount.text;
+		$[10] = props;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+}
+const formatters = /* @__PURE__ */ new Map();
+function formatCurrency(value, options) {
+	const { code, formatter, zero } = formatterFor(options.locale, options.currency);
+	const magnitude = formatter.format(Math.abs(value));
+	const shownAsZero = magnitude === zero;
+	const mark = signFor(value, options.sign, shownAsZero);
+	const amount = mark === void 0 ? magnitude : signed(formatter, value, mark);
+	return {
+		shownAsZero,
+		text: code === null || code === "" ? amount : `${amount} ${code}`
+	};
+}
+function formatterFor(locale, currency) {
+	const key = `${locale ?? ""}|${currency}`;
+	const cached = formatters.get(key);
+	if (cached !== void 0) return cached;
+	const usable = locale !== void 0 && isLocale(locale) ? locale : void 0;
+	let formatter;
+	let code = null;
+	try {
+		formatter = new Intl.NumberFormat(usable, {
+			currency,
+			style: "currency"
+		});
+	} catch {
+		formatter = new Intl.NumberFormat(usable, {
+			maximumFractionDigits: 2,
+			minimumFractionDigits: 2
+		});
+		code = currency;
+	}
+	const resolved = {
+		code,
+		formatter,
+		zero: formatter.format(0)
+	};
+	formatters.set(key, resolved);
+	return resolved;
+}
+function isLocale(tag) {
+	try {
+		return Intl.NumberFormat.supportedLocalesOf(tag).length >= 0;
+	} catch {
+		return false;
+	}
+}
+function resolveTone(value, tone, shownAsZero) {
+	if (tone !== "auto") return tone;
+	if (shownAsZero) return "neutral";
+	if (value > 0) return "positive";
+	if (value < 0) return "negative";
+	return "neutral";
+}
+function signed(formatter, value, mark) {
+	return formatter.format(-Math.abs(value)).replace(LOCALE_MINUS, mark);
+}
+function signFor(value, sign, shownAsZero) {
+	if (shownAsZero || sign === "never") return;
+	if (value < 0) return MINUS_SIGN;
+	if (value > 0 && sign === "always") return PLUS_SIGN;
+}
+//#endregion
+export { Currency };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","Ref","TextProps","NativeTextProps","TextStyle","Text","NativeText","StyleSheet","useTheme","composeStyles","themedStyles","useFontFamily","familyStyle","nativeWeight","stylesOf","colors","typography","create","base","fontVariant","fontWeight","weightMedium","negative","color","neutral","onSurface","positive","MINUS_SIGN","PLUS_SIGN","LOCALE_MINUS","CurrencyProps","Omit","currency","locale","ref","sign","CurrencySignDisplay","tone","CurrencyTone","value","ResolvedFormat","code","formatter","Intl","NumberFormat","zero","Currency","t0","$","_c","props","style","t1","t2","t3","undefined","theme","own","family","fontFamilyMono","amount","formatCurrency","T0","t4","resolveTone","shownAsZero","t5","text","formatters","Map","options","formatterFor","magnitude","format","Math","abs","mark","signFor","signed","key","cached","get","usable","isLocale","maximumFractionDigits","minimumFractionDigits","resolved","set","tag","supportedLocalesOf","length","replace","_c","NativeText"],"sources":["../../../src/components/currency/index.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type { TextProps as NativeTextProps, TextStyle } from 'react-native'\n\nimport { Text as NativeText, StyleSheet } from 'react-native'\n\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useFontFamily } from '../../typography/fonts'\nimport { familyStyle, nativeWeight } from '../../typography/roles'\n\n// Deliberately sets no font size or line height, as web's sets none. The same\n// amount turns up at several sizes, inside a list row, as a heading-scale\n// figure, as a total, differing in nothing else, so the size is the decision\n// of the Text around it. What must never vary is here: the mono face, tabular\n// figures so a column of them lines up on the decimal point, and the medium\n// weight that separates a figure from the prose around it.\n//\n// No Material Design page draws an amount. It is type alone: the mono face\n// and medium weight from the type tokens, tabular figures, and the on surface\n// role for the neutral tone. Positive and negative are the library's own\n// roles.\nconst stylesOf = themedStyles(({ colors, typography }) =>\n  StyleSheet.create({\n    base: {\n      fontVariant: ['tabular-nums'],\n      fontWeight: nativeWeight(typography.weightMedium),\n    },\n    negative: {\n      color: colors.negative,\n    },\n    neutral: {\n      color: colors.onSurface,\n    },\n    positive: {\n      color: colors.positive,\n    },\n  }),\n)\n\n// U+2212 MINUS SIGN, not the U+002D hyphen Intl actually emits. The hyphen is\n// a typographic stand-in: it is narrower than the plus it pairs with and does\n// not sit on the same optical centre as the digits, which shows up as a\n// wobbling column the moment amounts are stacked.\nconst MINUS_SIGN = '\\u2212'\n\nconst PLUS_SIGN = '+'\n\n// The minus a locale writes, which is the hyphen in most and U+2212 already in\n// a few, such as Swedish and Persian.\nconst LOCALE_MINUS = /[-\\u2212]/u\n\ntype CurrencyProps = Omit<NativeTextProps, 'children'> & {\n  /**\n   * ISO 4217 code for the currency to format in.\n   * @default 'USD'\n   */\n  readonly currency?: string\n  /**\n   * BCP 47 locale to format for. Defaults to the device's, which is the one\n   * the runtime formats in when it is handed none.\n   */\n  readonly locale?: string\n  readonly ref?: Ref<ComponentRef<typeof NativeText>>\n  /**\n   * When to show the sign. `auto` shows one only on negatives, `always` also\n   * prefixes positives with a plus, and `never` shows neither, which leaves\n   * colour as the only thing separating a credit from a debt, so reach for it\n   * only where the direction is already stated some other way.\n   *\n   * An amount that shows as zero carries no sign under any of them, since\n   * there is nothing owed or owing: `-0.004` reads `$0.00`, not `−$0.00`.\n   * @default 'auto'\n   */\n  readonly sign?: CurrencySignDisplay\n  /**\n   * Which colour role to render in. `auto` follows the sign of the amount as\n   * it is shown, so one that rounds to zero, float residue or a fraction of a\n   * cent, reads as neutral rather than as a gain or a debt.\n   *\n   * The positive and negative roles are guaranteed legible on the surface\n   * family, which is what the library's own tokens and every demo scheme are\n   * held to. Over a container of its own, such as a filled card, the pair is\n   * one colour family on top of another and is not guaranteed, so a custom\n   * theme placing one there has to check that pair itself.\n   * @default 'auto'\n   */\n  readonly tone?: CurrencyTone\n  /** The amount, in the currency's major units. */\n  readonly value: number\n}\n\ntype CurrencySignDisplay = 'always' | 'auto' | 'never'\n\ntype CurrencyTone = 'auto' | 'negative' | 'neutral' | 'positive'\n\n/**\n * A formatter, how it writes zero, and the currency code written beside its\n * number when it is the decimal fallback for a code the runtime rejected.\n */\ntype ResolvedFormat = {\n  readonly code: null | string\n  readonly formatter: Intl.NumberFormat\n  readonly zero: string\n}\n\n/**\n * An amount of money, formatted for the reader's locale in the mono face with\n * tabular figures, so a column of amounts lines up on the decimal point.\n * Negatives carry a true minus sign, and the tone follows the sign unless\n * `tone` names one.\n *\n * ```tsx\n * <Text variant=\"bodyLarge\">\n *   <Currency currency=\"EUR\" value={-42.5} />\n * </Text>\n * ```\n *\n * It sets no size of its own, so it takes the type of the Text around it:\n * put it in one, a heading-scale one for a larger figure. On its own it draws\n * at the platform's default size. The face is the mono family's first, once\n * the app has registered it with expo-font, and the system font until then,\n * with tabular figures either way.\n *\n * Web's `render` has no counterpart. `style`, `ref` and `testID` land on React\n * Native's own Text.\n */\nfunction Currency({\n  currency = 'USD',\n  locale,\n  sign = 'auto',\n  style,\n  tone = 'auto',\n  value,\n  ...props\n}: CurrencyProps) {\n  const theme = useTheme()\n  const own = stylesOf(theme)\n  const family = familyStyle(useFontFamily(theme.typography.fontFamilyMono))\n\n  const amount = formatCurrency(value, { currency, locale, sign })\n\n  return (\n    <NativeText\n      {...props}\n      style={composeStyles<TextStyle>(\n        own.base,\n        family,\n        own[resolveTone(value, tone, amount.shownAsZero)],\n        style,\n      )}\n    >\n      {amount.text}\n    </NativeText>\n  )\n}\n\n// Constructing an Intl.NumberFormat resolves the locale, loads the currency's\n// data and builds the pattern; formatting with one already built skips all\n// three. An instance is stateless once constructed, so one can be shared\n// across every component asking for the same locale and currency. The sign\n// is no part of the key, since every setting is drawn from the one formatter.\n//\n// What this saves is a mount and a changing amount, not an idle re-render:\n// the React Compiler already memoises the call below on the things it reads,\n// so a component re-rendered with the same props never reaches here. That\n// cache belongs to one component instance and counts `value` among its keys,\n// which leaves two cases it cannot cover: a column of rows, where every\n// instance has a cache of its own and each builds a formatter, and a single\n// amount that ticks, where each new value misses.\n//\n// Unbounded on purpose. The keys are the pairs an app actually uses, its\n// locales times its currencies, so the map settles at that size rather than\n// growing with renders or with values.\n//\n// A request the runtime rejects is cached too, under its own key, as the\n// fallback it resolved to, so a bad pair costs one failed construction rather\n// than one a render.\nconst formatters = new Map<string, ResolvedFormat>()\n\n// The amount is read off `format` alone, where web reads it off\n// `formatToParts` with the `signDisplay` settings that leave a zero bare.\n// Hermes has neither: it defines no `formatToParts` on iOS, ignores\n// `signDisplay` there, and takes only `auto`, `never`, `always` and\n// `exceptZero` on Android, so the `negative` web asks for throws. `format` is\n// what every runtime React Native runs on has.\n//\n// So the magnitude is formatted on its own, and it shows as zero exactly when\n// it reads as zero formatted by the same formatter, whatever digits the\n// locale writes. A sign, where one is shown, goes where the locale puts its\n// own minus. On a runtime with `formatToParts` the text this writes is the\n// text web writes, which the tests compare across locales.\nfunction formatCurrency(\n  value: number,\n  options: {\n    currency: string\n    locale: string | undefined\n    sign: CurrencySignDisplay\n  },\n) {\n  const { code, formatter, zero } = formatterFor(\n    options.locale,\n    options.currency,\n  )\n  const magnitude = formatter.format(Math.abs(value))\n  // Whether every digit shown is a zero, which is what the tone reads rather\n  // than the raw value: the two never saw the same number before.\n  const shownAsZero = magnitude === zero\n  const mark = signFor(value, options.sign, shownAsZero)\n  const amount = mark === undefined ? magnitude : signed(formatter, value, mark)\n\n  return {\n    shownAsZero,\n    text: code === null || code === '' ? amount : `${amount} ${code}`,\n  }\n}\n\n// A component that only shows an amount must not take the screen down with\n// it, and `new Intl.NumberFormat` throws for a malformed locale (`xx_YY`) and\n// for a currency code that is not one (`xx`, `US`). Valid input takes exactly\n// the path it always did; the rest falls back. A locale the runtime rejects,\n// an empty one among them, which is what clearing a locale control leaves,\n// gives way to the device's, and a currency code it rejects to the plain\n// number in that locale with the code written after it, so the amount still\n// reads and what was wrong with it stays visible.\n//\n// Nothing is logged: the library writes to the console nowhere, and a\n// warning an app cannot turn off is not its to emit.\nfunction formatterFor(locale: string | undefined, currency: string) {\n  // Neither a BCP 47 locale nor an ISO 4217 code can contain a vertical bar,\n  // so joining on one cannot make two different pairs share a key.\n  const key = `${locale ?? ''}|${currency}`\n  const cached = formatters.get(key)\n  if (cached !== undefined) {\n    return cached\n  }\n\n  const usable = locale !== undefined && isLocale(locale) ? locale : undefined\n  let formatter: Intl.NumberFormat\n  let code: null | string = null\n  try {\n    formatter = new Intl.NumberFormat(usable, { currency, style: 'currency' })\n  } catch {\n    formatter = new Intl.NumberFormat(usable, {\n      maximumFractionDigits: 2,\n      minimumFractionDigits: 2,\n    })\n    code = currency\n  }\n\n  const resolved = { code, formatter, zero: formatter.format(0) }\n  formatters.set(key, resolved)\n  return resolved\n}\n\n// Whether the runtime takes `tag` as a locale at all — one it parses, whether\n// or not it has data for it, which it then fills in from the nearest it has.\nfunction isLocale(tag: string) {\n  try {\n    return Intl.NumberFormat.supportedLocalesOf(tag).length >= 0\n  } catch {\n    return false\n  }\n}\n\n// An amount shown as zero is neither owed nor owing, so it takes the neutral\n// role whatever the raw value's sign: negative zero, a rounded-away debt and\n// float residue all read as settled. Otherwise the sign decides.\nfunction resolveTone(value: number, tone: CurrencyTone, shownAsZero: boolean) {\n  if (tone !== 'auto') {\n    return tone\n  }\n  if (shownAsZero) {\n    return 'neutral'\n  }\n  if (value > 0) {\n    return 'positive'\n  }\n  if (value < 0) {\n    return 'negative'\n  }\n  return 'neutral'\n}\n\n// The amount with `mark` in place of the minus the locale writes on a\n// negative, so the mark sits where the locale puts its own sign: before the\n// symbol or after it, beside a direction mark in a right-to-left locale, or in\n// place of a space, as Swiss German's `CHF-12.50` does beside `CHF 12.50`. A\n// plus takes the same place, which is where Intl's own `exceptZero` puts it.\n// Only the sign is replaced: nothing a locale writes ahead of it, a symbol, a\n// code, a space or a direction mark, is a minus, so the first is the sign.\nfunction signed(formatter: Intl.NumberFormat, value: number, mark: string) {\n  return formatter.format(-Math.abs(value)).replace(LOCALE_MINUS, mark)\n}\n\n// The sign an amount carries, if any. One shown as zero carries none under\n// any setting, since there is nothing owed or owing; otherwise a negative\n// takes a minus unless told to show none, and a positive a plus only when\n// told to always show one.\nfunction signFor(\n  value: number,\n  sign: CurrencySignDisplay,\n  shownAsZero: boolean,\n) {\n  if (shownAsZero || sign === 'never') {\n    return undefined\n  }\n  if (value < 0) {\n    return MINUS_SIGN\n  }\n  if (value > 0 && sign === 'always') {\n    return PLUS_SIGN\n  }\n  return undefined\n}\n\nexport type { CurrencyProps, CurrencySignDisplay, CurrencyTone }\n\nexport { Currency }\n"],"mappings":";;;;;;;;AAqBA,MAAMc,WAAWJ,cAAc,EAAEK,QAAQC,iBACvCT,WAAWU,OAAO;CAChBC,MAAM;EACJC,aAAa,CAAC,cAAc;EAC5BC,YAAYP,aAAaG,WAAWK,YAAY;CAClD;CACAC,UAAU,EACRC,OAAOR,OAAOO,SAChB;CACAE,SAAS,EACPD,OAAOR,OAAOU,UAChB;CACAC,UAAU,EACRH,OAAOR,OAAOW,SAChB;AACF,CAAC,CACH;AAMA,MAAMC,aAAa;AAEnB,MAAMC,YAAY;AAIlB,MAAMC,eAAe;;;;;;;;;;;;;;;;;;;;;;AA6ErB,SAAAiB,SAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAhB;CAAA,IAAAiB;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAf;CAAA,IAAAS,EAAA,OAAAD,IAAA;EAAkB,CAAA,CAAAf,UAAAoB,IAAAnB,QAAAE,MAAAkB,IAAAF,OAAAd,MAAAiB,IAAAf,OAAA,GAAAW,SAAAH;EAQFC,EAAA,KAAAD;EAAAC,EAAA,KAAAf;EAAAe,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAT;CAAA,OAAA;EAAAN,SAAAe,EAAA;EAAAE,QAAAF,EAAA;EAAAG,QAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAT,QAAAS,EAAA;CAAA;CAPd,MAAAhB,WAAAoB,OAAAG,KAAAA,IAAA,QAAAH;CAEA,MAAAjB,OAAAkB,OAAAE,KAAAA,IAAA,SAAAF;CAEA,MAAAhB,OAAAiB,OAAAC,KAAAA,IAAA,SAAAD;CAIA,MAAAE,QAAchD,SAAS;CACvB,MAAAiD,MAAY3C,SAAS0C,KAAK;CAC1B,MAAAE,SAAe9C,YAAYD,cAAc6C,MAAKxC,WAAW2C,cAAe,CAAC;CAEzE,MAAAC,SAAeC,eAAetB,OAAO;EAAAP;EAAAC;EAAAE;CAAyB,CAAC;CAG5D,MAAA2B,KAAAxD;CAEQ,MAAAyD,KAAAtD,cACLgD,IAAGvC,MACHwC,QACAD,IAAIO,YAAYzB,OAAOF,MAAMuB,OAAMK,WAAY,IAC/Cd,KACF;CAAC,IAAAe;CAAA,IAAAlB,EAAA,OAAAc,MAAAd,EAAA,OAAAY,OAAAO,QAAAnB,EAAA,QAAAE,SAAAF,EAAA,QAAAe,IAAA;EAPHG,KAAA,oBAAC,IAAD;GAAW,GACLhB;GACG,OAAAa;GAONH,UAAAA,OAAMO;EATE,CAAA;EAUEnB,EAAA,KAAAc;EAAAd,EAAA,KAAAY,OAAAO;EAAAnB,EAAA,MAAAE;EAAAF,EAAA,MAAAe;EAAAf,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,OAVbkB;AAUa;AAyBjB,MAAME,6BAAa,IAAIC,IAA4B;AAcnD,SAASR,eACPtB,OACA+B,SAKA;CACA,MAAM,EAAE7B,MAAMC,WAAWG,SAAS0B,aAChCD,QAAQrC,QACRqC,QAAQtC,QACV;CACA,MAAMwC,YAAY9B,UAAU+B,OAAOC,KAAKC,IAAIpC,KAAK,CAAC;CAGlD,MAAM0B,cAAcO,cAAc3B;CAClC,MAAM+B,OAAOC,QAAQtC,OAAO+B,QAAQnC,MAAM8B,WAAW;CACrD,MAAML,SAASgB,SAASrB,KAAAA,IAAYiB,YAAYM,OAAOpC,WAAWH,OAAOqC,IAAI;CAE7E,OAAO;EACLX;EACAE,MAAM1B,SAAS,QAAQA,SAAS,KAAKmB,SAAS,GAAGA,OAAM,GAAInB;CAC7D;AACF;AAaA,SAAS8B,aAAatC,QAA4BD,UAAkB;CAGlE,MAAM+C,MAAM,GAAG9C,UAAU,GAAE,GAAID;CAC/B,MAAMgD,SAASZ,WAAWa,IAAIF,GAAG;CACjC,IAAIC,WAAWzB,KAAAA,GACb,OAAOyB;CAGT,MAAME,SAASjD,WAAWsB,KAAAA,KAAa4B,SAASlD,MAAM,IAAIA,SAASsB,KAAAA;CACnE,IAAIb;CACJ,IAAID,OAAsB;CAC1B,IAAI;EACFC,YAAY,IAAIC,KAAKC,aAAasC,QAAQ;GAAElD;GAAUmB,OAAO;EAAW,CAAC;CAC3E,QAAQ;EACNT,YAAY,IAAIC,KAAKC,aAAasC,QAAQ;GACxCE,uBAAuB;GACvBC,uBAAuB;EACzB,CAAC;EACD5C,OAAOT;CACT;CAEA,MAAMsD,WAAW;EAAE7C;EAAMC;EAAWG,MAAMH,UAAU+B,OAAO,CAAC;CAAE;CAC9DL,WAAWmB,IAAIR,KAAKO,QAAQ;CAC5B,OAAOA;AACT;AAIA,SAASH,SAASK,KAAa;CAC7B,IAAI;EACF,OAAO7C,KAAKC,aAAa6C,mBAAmBD,GAAG,CAAC,CAACE,UAAU;CAC7D,QAAQ;EACN,OAAO;CACT;AACF;AAKA,SAAS1B,YAAYzB,OAAeF,MAAoB4B,aAAsB;CAC5E,IAAI5B,SAAS,QACX,OAAOA;CAET,IAAI4B,aACF,OAAO;CAET,IAAI1B,QAAQ,GACV,OAAO;CAET,IAAIA,QAAQ,GACV,OAAO;CAET,OAAO;AACT;AASA,SAASuC,OAAOpC,WAA8BH,OAAeqC,MAAc;CACzE,OAAOlC,UAAU+B,OAAO,CAACC,KAAKC,IAAIpC,KAAK,CAAC,CAAC,CAACoD,QAAQ9D,cAAc+C,IAAI;AACtE;AAMA,SAASC,QACPtC,OACAJ,MACA8B,aACA;CACA,IAAIA,eAAe9B,SAAS,SAC1B;CAEF,IAAII,QAAQ,GACV,OAAOZ;CAET,IAAIY,QAAQ,KAAKJ,SAAS,UACxB,OAAOP;AAGX"}

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

@@ -0,0 +1,84 @@
+import { FormValidationBehavior, FormValues, ValidationErrors } from "../../form/index.js";
+import { ReactNode, Ref } from "react";
+//#region src/components/form/index.d.ts
+/** What a form's ref holds. */
+type FormHandle = {
+  /**
+   * Submits the form, as a Button with `type="submit"` inside it does: under
+   * `native` it is held back while a field blocks it, and otherwise
+   * `onSubmit` is handed the values. Named after the web form's method that
+   * does the same.
+   */
+  readonly requestSubmit: () => void;
+};
+type FormProps = {
+  readonly children?: ReactNode;
+  /**
+   * Called with the values when the form is submitted: each field with a
+   * `name` and not disabled, as the string a web form submits for it, so a
+   * number field's value is its number written out, and an empty one is
+   * `''`. Under `native` it is not called while a field blocks the
+   * submission.
+   */
+  readonly onSubmit?: (values: FormValues) => void;
+  readonly ref?: Ref<FormHandle>;
+  /**
+   * How the fields inside validate. `aria` marks a field invalid and shows
+   * its error as soon as the field says so, through its `validate`, and
+   * lets the form submit regardless. `native` holds the submission back
+   * while a field is required and empty or rejected by its `validate`, shows
+   * each such field's error once submission is tried, and focuses the first
+   * of them.
+   *
+   * Under `aria`, moving focus after a server answers is the call site's.
+   * Each error is announced as it appears under its field, but nothing
+   * moves, because no part of the form knows a round trip happened:
+   * `validationErrors` is a prop rather than an event, so a form cannot tell
+   * a submission coming back from a first render that was given errors to
+   * begin with. Focus the first field that came back invalid through its
+   * `inputRef`, as the Async submit story does.
+   * @default 'aria'
+   */
+  readonly validationBehavior?: FormValidationBehavior;
+  /**
+   * Errors to show under the fields, keyed by each field's `name`, such as
+   * what a server sent back: one message, or several shown as one line. A
+   * field's error stays until the field is edited, and a new object shows
+   * them all again.
+   */
+  readonly validationErrors?: ValidationErrors;
+};
+/**
+ * A form: the fields inside it and what they are told about validation. Pass
+ * `validationErrors`, an object keyed by field `name`, to show what a server
+ * sent back under each field, and `validationBehavior="native"` to hold the
+ * submission back while a required field is empty or a field's `validate`
+ * rejects its value. A Button with `type="submit"` inside it submits it, and
+ * `onSubmit` is handed the values by name.
+ *
+ * ```tsx
+ * <Form onSubmit={(values) => save(values)}>
+ *   <Stack gap="md">
+ *     <TextField label="Headline" name="headline" />
+ *     <Button type="submit">Save changes</Button>
+ *   </Stack>
+ * </Form>
+ * ```
+ *
+ * Handing `validationErrors` back from a submission is where a reader has to
+ * be told something arrived: see `validationBehavior` for what the form does
+ * and what it leaves to the call site.
+ *
+ * A form also reserves each field's message line. A field on its own draws
+ * that line only once it has something to say, so an error arriving after a
+ * submit or an async check makes the field taller and moves everything below
+ * it down the screen. Inside a form the line is there from the start, empty,
+ * and nothing moves when it fills.
+ *
+ * It draws nothing, so it takes no `style`; its ref is a handle whose
+ * `requestSubmit()` submits it.
+ */
+declare function Form({ children, onSubmit, ref, validationBehavior, validationErrors }: FormProps): import("react").JSX.Element;
+//#endregion
+export { Form, type FormHandle, type FormProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form/index.js

@@ -0,0 +1,95 @@
+import { FIELD_VALIDATION_BEHAVIOR, FormContext, createRegistry, submitOf } from "../../form/index.js";
+import { c } from "react/compiler-runtime";
+import { useImperativeHandle, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/form/index.tsx
+const NO_ERRORS = {};
+/**
+* A form: the fields inside it and what they are told about validation. Pass
+* `validationErrors`, an object keyed by field `name`, to show what a server
+* sent back under each field, and `validationBehavior="native"` to hold the
+* submission back while a required field is empty or a field's `validate`
+* rejects its value. A Button with `type="submit"` inside it submits it, and
+* `onSubmit` is handed the values by name.
+*
+* ```tsx
+* <Form onSubmit={(values) => save(values)}>
+*   <Stack gap="md">
+*     <TextField label="Headline" name="headline" />
+*     <Button type="submit">Save changes</Button>
+*   </Stack>
+* </Form>
+* ```
+*
+* Handing `validationErrors` back from a submission is where a reader has to
+* be told something arrived: see `validationBehavior` for what the form does
+* and what it leaves to the call site.
+*
+* A form also reserves each field's message line. A field on its own draws
+* that line only once it has something to say, so an error arriving after a
+* submit or an async check makes the field taller and moves everything below
+* it down the screen. Inside a form the line is there from the start, empty,
+* and nothing moves when it fills.
+*
+* It draws nothing, so it takes no `style`; its ref is a handle whose
+* `requestSubmit()` submits it.
+*/
+function Form(t0) {
+	const $ = c(15);
+	const { children, onSubmit, ref, validationBehavior: t1, validationErrors: t2 } = t0;
+	const validationBehavior = t1 === void 0 ? FIELD_VALIDATION_BEHAVIOR : t1;
+	const validationErrors = t2 === void 0 ? NO_ERRORS : t2;
+	const [registry] = useState(createRegistry);
+	let t3;
+	if ($[0] !== onSubmit || $[1] !== registry || $[2] !== validationBehavior) {
+		t3 = submitOf(registry, validationBehavior, onSubmit);
+		$[0] = onSubmit;
+		$[1] = registry;
+		$[2] = validationBehavior;
+		$[3] = t3;
+	} else t3 = $[3];
+	const requestSubmit = t3;
+	let t4;
+	if ($[4] !== registry || $[5] !== requestSubmit || $[6] !== validationBehavior || $[7] !== validationErrors) {
+		t4 = {
+			registry,
+			requestSubmit,
+			validationBehavior,
+			validationErrors
+		};
+		$[4] = registry;
+		$[5] = requestSubmit;
+		$[6] = validationBehavior;
+		$[7] = validationErrors;
+		$[8] = t4;
+	} else t4 = $[8];
+	const state = t4;
+	let t5;
+	let t6;
+	if ($[9] !== requestSubmit) {
+		t5 = () => ({ requestSubmit });
+		t6 = [requestSubmit];
+		$[9] = requestSubmit;
+		$[10] = t5;
+		$[11] = t6;
+	} else {
+		t5 = $[10];
+		t6 = $[11];
+	}
+	useImperativeHandle(ref, t5, t6);
+	let t7;
+	if ($[12] !== children || $[13] !== state) {
+		t7 = /* @__PURE__ */ jsx(FormContext, {
+			value: state,
+			children
+		});
+		$[12] = children;
+		$[13] = state;
+		$[14] = t7;
+	} else t7 = $[14];
+	return t7;
+}
+//#endregion
+export { Form };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ReactNode","Ref","useImperativeHandle","useMemo","useState","FormValidationBehavior","FormValues","ValidationErrors","createRegistry","FIELD_VALIDATION_BEHAVIOR","FormContext","submitOf","FormHandle","requestSubmit","FormProps","children","onSubmit","values","ref","validationBehavior","validationErrors","NO_ERRORS","Form","t0","$","_c","t1","t2","undefined","registry","t3","t4","state","t5","t6","t7","_c"],"sources":["../../../src/components/form/index.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react'\n\nimport { useImperativeHandle, useMemo, useState } from 'react'\n\nimport type {\n  FormValidationBehavior,\n  FormValues,\n  ValidationErrors,\n} from '../../form'\n\nimport {\n  createRegistry,\n  FIELD_VALIDATION_BEHAVIOR,\n  FormContext,\n  submitOf,\n} from '../../form'\n\n// No Material Design page of its own, as on web: a form is the fields inside\n// it, and the text fields page is what each of them draws. The error a form\n// reports lands in the field's supporting text, in the error role, under the\n// box.\n//\n// Native has no form element, so this is a context around its fields rather\n// than an element of its own. It draws nothing and lays nothing out; a Stack\n// inside it is what spaces the fields. It hands each field inside it two\n// things, as React Aria's Form does on web: `validationErrors`, keyed by each\n// field's `name`, which is how a server's answer reaches the fields without\n// any of them changing, and `validationBehavior`, which every field reads in\n// place of its own. And it reserves each field's message line, so an error\n// that arrives later moves nothing below the field.\n//\n// Native has no browser to validate or submit either, so the form does both.\n// A Button with `type=\"submit\"` inside it submits it, as does\n// `requestSubmit()` on its ref, which is how the keyboard's return key does.\n\n/** What a form's ref holds. */\ntype FormHandle = {\n  /**\n   * Submits the form, as a Button with `type=\"submit\"` inside it does: under\n   * `native` it is held back while a field blocks it, and otherwise\n   * `onSubmit` is handed the values. Named after the web form's method that\n   * does the same.\n   */\n  readonly requestSubmit: () => void\n}\n\ntype FormProps = {\n  readonly children?: ReactNode\n  /**\n   * Called with the values when the form is submitted: each field with a\n   * `name` and not disabled, as the string a web form submits for it, so a\n   * number field's value is its number written out, and an empty one is\n   * `''`. Under `native` it is not called while a field blocks the\n   * submission.\n   */\n  readonly onSubmit?: (values: FormValues) => void\n  readonly ref?: Ref<FormHandle>\n  /**\n   * How the fields inside validate. `aria` marks a field invalid and shows\n   * its error as soon as the field says so, through its `validate`, and\n   * lets the form submit regardless. `native` holds the submission back\n   * while a field is required and empty or rejected by its `validate`, shows\n   * each such field's error once submission is tried, and focuses the first\n   * of them.\n   *\n   * Under `aria`, moving focus after a server answers is the call site's.\n   * Each error is announced as it appears under its field, but nothing\n   * moves, because no part of the form knows a round trip happened:\n   * `validationErrors` is a prop rather than an event, so a form cannot tell\n   * a submission coming back from a first render that was given errors to\n   * begin with. Focus the first field that came back invalid through its\n   * `inputRef`, as the Async submit story does.\n   * @default 'aria'\n   */\n  readonly validationBehavior?: FormValidationBehavior\n  /**\n   * Errors to show under the fields, keyed by each field's `name`, such as\n   * what a server sent back: one message, or several shown as one line. A\n   * field's error stays until the field is edited, and a new object shows\n   * them all again.\n   */\n  readonly validationErrors?: ValidationErrors\n}\n\nconst NO_ERRORS: ValidationErrors = {}\n\n/**\n * A form: the fields inside it and what they are told about validation. Pass\n * `validationErrors`, an object keyed by field `name`, to show what a server\n * sent back under each field, and `validationBehavior=\"native\"` to hold the\n * submission back while a required field is empty or a field's `validate`\n * rejects its value. A Button with `type=\"submit\"` inside it submits it, and\n * `onSubmit` is handed the values by name.\n *\n * ```tsx\n * <Form onSubmit={(values) => save(values)}>\n *   <Stack gap=\"md\">\n *     <TextField label=\"Headline\" name=\"headline\" />\n *     <Button type=\"submit\">Save changes</Button>\n *   </Stack>\n * </Form>\n * ```\n *\n * Handing `validationErrors` back from a submission is where a reader has to\n * be told something arrived: see `validationBehavior` for what the form does\n * and what it leaves to the call site.\n *\n * A form also reserves each field's message line. A field on its own draws\n * that line only once it has something to say, so an error arriving after a\n * submit or an async check makes the field taller and moves everything below\n * it down the screen. Inside a form the line is there from the start, empty,\n * and nothing moves when it fills.\n *\n * It draws nothing, so it takes no `style`; its ref is a handle whose\n * `requestSubmit()` submits it.\n */\nfunction Form({\n  children,\n  onSubmit,\n  ref,\n  validationBehavior = FIELD_VALIDATION_BEHAVIOR,\n  validationErrors = NO_ERRORS,\n}: FormProps) {\n  const [registry] = useState(createRegistry)\n  const requestSubmit = submitOf(registry, validationBehavior, onSubmit)\n  const state = useMemo(\n    () => ({ registry, requestSubmit, validationBehavior, validationErrors }),\n    [registry, requestSubmit, validationBehavior, validationErrors],\n  )\n\n  useImperativeHandle(ref, () => ({ requestSubmit }), [requestSubmit])\n\n  return <FormContext value={state}>{children}</FormContext>\n}\n\nexport { Form }\nexport type { FormHandle, FormProps }\n"],"mappings":";;;;;AAoFA,MAAMqB,YAA8B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCrC,SAAAC,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAc,MAAA,EAAAV,UAAAC,UAAAE,KAAAC,oBAAAO,IAAAN,kBAAAO,OAAAJ;CAIZ,MAAAJ,qBAAAO,OAAAE,KAAAA,IAAAnB,4BAAAiB;CACA,MAAAN,mBAAAO,OAAAC,KAAAA,IAAAP,YAAAM;CAEA,MAAA,CAAAE,YAAmBzB,SAASI,cAAc;CAAC,IAAAsB;CAAA,IAAAN,EAAA,OAAAR,YAAAQ,EAAA,OAAAK,YAAAL,EAAA,OAAAL,oBAAA;EACrBW,KAAAnB,SAASkB,UAAUV,oBAAoBH,QAAQ;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAK;EAAAL,EAAA,KAAAL;EAAAK,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAtE,MAAAX,gBAAsBiB;CAAgD,IAAAC;CAAA,IAAAP,EAAA,OAAAK,YAAAL,EAAA,OAAAX,iBAAAW,EAAA,OAAAL,sBAAAK,EAAA,OAAAJ,kBAAA;EAE7DW,KAAA;GAAAF;GAAAhB;GAAAM;GAAAC;EAAgE;EAACI,EAAA,KAAAK;EAAAL,EAAA,KAAAX;EAAAW,EAAA,KAAAL;EAAAK,EAAA,KAAAJ;EAAAI,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAD1E,MAAAQ,QACSD;CAER,IAAAE;CAAA,IAAAC;CAAA,IAAAV,EAAA,OAAAX,eAAA;EAEwBoB,YAAO,EAAApB,cAAgB;EAAIqB,KAAA,CAACrB,aAAa;EAACW,EAAA,KAAAX;EAAAW,EAAA,MAAAS;EAAAT,EAAA,MAAAU;CAAA,OAAA;EAAAD,KAAAT,EAAA;EAAAU,KAAAV,EAAA;CAAA;CAAnEtB,oBAAoBgB,KAAKe,IAA2BC,EAAe;CAAC,IAAAC;CAAA,IAAAX,EAAA,QAAAT,YAAAS,EAAA,QAAAQ,OAAA;EAE7DG,KAAA,oBAAC,aAAD;GAAoBH,OAAAA;GAAQjB;EAAhB,CAAA;EAAuCS,EAAA,MAAAT;EAAAS,EAAA,MAAAQ;EAAAR,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,OAAnDW;AAAmD"}

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

@@ -0,0 +1,68 @@
+import { ButtonLinkForm, ButtonPressForm, ButtonToggleForm } from "../../button/index.js";
+import { PressableProps, StyleProp, View, ViewStyle } from "react-native";
+import { ReactNode, Ref } from "react";
+//#region src/components/icon-button/index.d.ts
+type IconButtonProps = (ButtonLinkForm | ButtonPressForm | ButtonToggleForm) & Omit<PressableProps, 'aria-label' | 'children' | 'disabled' | 'style'> & {
+  /**
+   * What the button does, in words. Required rather than optional: an icon
+   * on its own has no accessible name, so without this the control
+   * announces nothing at all.
+   */
+  readonly 'aria-label': string;
+  /**
+   * The icon. The button hands it its colour and the page's icon size for
+   * the button's size through `useIconStyle()`.
+   */
+  readonly children?: ReactNode;
+  /**
+   * Draws no press ripple. The state layer is unaffected.
+   * @default false
+   */
+  readonly disableRipple?: boolean;
+  /**
+   * Draws the button disabled, and takes no presses.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  readonly ref?: Ref<View>;
+  /**
+   * Control size: `xs` 32dp, `md` 40dp, `lg` 56dp, `xl` 96dp, `xxl` 136dp,
+   * the icon buttons spec page's XS to XL, and the same heights `Button`
+   * uses, so the two line up beside each other in a row. The icon is 20dp,
+   * 24dp, 24dp, 32dp and 40dp in turn.
+   * @default 'md'
+   */
+  readonly size?: IconButtonSize;
+  readonly style?: StyleProp<ViewStyle>;
+  /**
+   * `standard` is transparent and tints what it sits on; `outlined` is
+   * transparent with a rule around it; `filled` and `tonal` carry a
+   * container of their own.
+   * @default 'standard'
+   */
+  readonly variant?: IconButtonVariant;
+};
+type IconButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';
+type IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal';
+/**
+ * A button that is an icon, at five control heights, with web's props and
+ * values. Given `href` it is a link with the same appearance, and given
+ * `isSelected`, `defaultSelected` or `onChange` it is a toggle, which reports
+ * its state to a screen reader and draws the page's second pair of colour
+ * roles for its variant. The three forms are exclusive, so a toggle given
+ * `href` does not compile.
+ *
+ * ```tsx
+ * <IconButton aria-label="Label" defaultSelected variant="tonal">
+ *   <Icon />
+ * </IconButton>
+ * ```
+ *
+ * The two sizes under 48dp, `xs` and `md`, take presses over a 48dp target
+ * through `hitSlop`, which a `hitSlop` of the call site's own replaces.
+ * `style`, `ref` and `testID` land on the `Pressable`.
+ */
+declare function IconButton({ children, defaultSelected, disableRipple, hitSlop: ownHitSlop, href, isDisabled, isSelected, onBlur, onChange, onFocus, onHoverIn, onHoverOut, onLayout, onPress, onPressIn, onPressOut, size, style, type, variant, ...props }: IconButtonProps): import("react").JSX.Element;
+//#endregion
+export { IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant };
+//# sourceMappingURL=index.d.ts.map