@kanso-labs/react-native-kanso-ui 0.7.0 → 0.9.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","StyleProp","TextStyle","ViewProps","ViewStyle","Children","Text","NativeText","StyleSheet","View","IconStyle","IconStyleContext","useTheme","composeStyles","themedStyles","useTypeRole","styles","create","label","flexShrink","fontVariant","stylesOf","radii","spacing","base","alignItems","borderRadius","sm","borderWidth","flexDirection","gap","xs","paddingHorizontal","paddingVertical","xxs","tonesOf","colors","filled","negative","toneOf","negativeContainer","onNegativeContainer","neutral","surfaceContainerHighest","onSurfaceVariant","positive","positiveContainer","onPositiveContainer","primary","primaryContainer","onPrimaryContainer","outlined","outlineVariant","TagProps","children","ref","tone","TagTone","variant","TagVariant","contentOf","content","text","flush","undefined","push","String","length","child","toArray","iconStyleOf","color","size","Tag","t0","$","_c","props","style","t1","t2","theme","role","T0","T1","t3","t4","t5","t6","toned","container","typography","labelSmallLineHeight","t7","t8","background","border","backgroundColor","borderColor","NativeText","_c"],"sources":["../../../src/components/tag/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native'\n\nimport { Children } from 'react'\nimport { Text as NativeText, StyleSheet, View } from 'react-native'\n\nimport type { IconStyle } from '../../glyphs/icon-style'\n\nimport { IconStyleContext } from '../../glyphs/icon-style'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useTypeRole } from '../../typography/roles'\n\n// A tag states something about what it sits beside, such as a count, a status\n// or a version, and is never itself the thing you press. That is the whole\n// line between this and Chip: a chip is a two-state button, so reaching for\n// one to draw a read-only label puts a control in the accessibility tree that\n// nothing can operate. The view takes no press and no role.\n//\n// Both variants carry a 1dp border, and `filled` makes it transparent rather\n// than dropping it, so a tag is the same size either way. Emphasising one tag\n// in a row otherwise nudges its neighbours by a dp each side.\n//\n// Tabular figures are unconditional, for the same reason Currency sets them:\n// what ends up in a tag is mostly numeric, such as counts, versions and ports,\n// and a stack of them down a list wobbles on proportional digits. Text that\n// carries no digits is unaffected.\n//\n// No Material Design page draws a tag, as on web. The badges page's large\n// badge is the nearest, a label-small count on an 8dp corner, and that is the\n// type and the corner here. A tag stands beside a word rather than on an icon,\n// so it takes the padding and the 1dp rule above in place of the badge's 16dp\n// box, and the container roles in place of the badge's error pair, since it\n// names a state rather than flagging one.\n//\n// A tag labels something else, so it is never what makes a row wrap or\n// shrink: `flexShrink: 0` holds its width, and its label stays on one line.\nconst styles = StyleSheet.create({\n  label: {\n    flexShrink: 0,\n    fontVariant: ['tabular-nums'],\n  },\n})\n\nconst stylesOf = themedStyles(({ radii, spacing }) =>\n  StyleSheet.create({\n    base: {\n      alignItems: 'center',\n      borderRadius: radii.sm,\n      borderWidth: 1,\n      flexDirection: 'row',\n      flexShrink: 0,\n      gap: spacing.xs,\n      paddingHorizontal: spacing.sm,\n      paddingVertical: spacing.xxs,\n    },\n  }),\n)\n\n// `neutral` draws from the surface roles rather than a colour of its own,\n// which is what lets it state something without ranking it. The other three\n// name a direction, and are the same three Currency uses, plus primary for the\n// notable-but-not-good-or-bad case.\n//\n// Outlined takes the tone at full strength for both the rule and the text,\n// rather than the on-container pairing filled uses. There is no container\n// there for an on-colour to be legible against, since the surface is the\n// background, so the container roles would read as washed out.\nconst tonesOf = themedStyles(({ colors }) => ({\n  filled: {\n    negative: toneOf(\n      colors.negativeContainer,\n      'transparent',\n      colors.onNegativeContainer,\n    ),\n    neutral: toneOf(\n      colors.surfaceContainerHighest,\n      'transparent',\n      colors.onSurfaceVariant,\n    ),\n    positive: toneOf(\n      colors.positiveContainer,\n      'transparent',\n      colors.onPositiveContainer,\n    ),\n    primary: toneOf(\n      colors.primaryContainer,\n      'transparent',\n      colors.onPrimaryContainer,\n    ),\n  },\n  outlined: {\n    negative: toneOf('transparent', colors.negative, colors.negative),\n    neutral: toneOf(\n      'transparent',\n      colors.outlineVariant,\n      colors.onSurfaceVariant,\n    ),\n    positive: toneOf('transparent', colors.positive, colors.positive),\n    primary: toneOf('transparent', colors.primary, colors.primary),\n  },\n}))\n\ntype TagProps = ViewProps & {\n  /**\n   * What the tag says. A string or a number is drawn as its label, and runs\n   * of them as one label; anything else, such as an icon, is drawn as given,\n   * handed the tag's colour and size through `useIconStyle()`.\n   */\n  readonly children?: ReactNode\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * Which colour role the tag carries. `neutral` states without ranking; the\n   * other three read as good, bad, or worth noticing.\n   *\n   * Each is a container under its own on-colour, 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 the pair is one colour family on top\n   * of another and is not guaranteed, so a custom theme placing a tag there\n   * has to check that pair itself.\n   * @default 'neutral'\n   */\n  readonly tone?: TagTone\n  /**\n   * How much weight the tag pulls. `filled` sits on a container of its own;\n   * `outlined` is a rule on the surface, for a tag that should not compete\n   * with the thing it labels.\n   * @default 'filled'\n   */\n  readonly variant?: TagVariant\n}\n\ntype TagTone = 'negative' | 'neutral' | 'positive' | 'primary'\n\ntype TagVariant = 'filled' | 'outlined'\n\n/**\n * The children in order, with each run of strings and numbers drawn as one\n * label, so `{count} items` is one Text rather than three. A React Native\n * string has to sit inside a Text, and anything else is drawn as given. A\n * label is keyed by where it falls among what is drawn, which a render of the\n * same children always repeats.\n */\nfunction contentOf(\n  children: ReactNode,\n  label: StyleProp<TextStyle>,\n): ReactNode[] {\n  const content: ReactNode[] = []\n  let text: string | undefined\n\n  const flush = () => {\n    if (text !== undefined) {\n      content.push(\n        <NativeText\n          key={`label-${String(content.length)}`}\n          numberOfLines={1}\n          style={label}\n        >\n          {text}\n        </NativeText>,\n      )\n      text = undefined\n    }\n  }\n\n  for (const child of Children.toArray(children)) {\n    if (\n      typeof child === 'string' ||\n      typeof child === 'number' ||\n      typeof child === 'bigint'\n    ) {\n      text = (text ?? '') + String(child)\n    } else {\n      flush()\n      content.push(child)\n    }\n  }\n  flush()\n\n  return content\n}\n\n/**\n * The colour and size the tag hands an icon beside its label. Built by a call\n * rather than written inline, which is what react-perf's\n * jsx-no-new-object-as-prop is after; the React Compiler memoises the result\n * on its inputs.\n */\nfunction iconStyleOf(color: string, size: number): IconStyle {\n  return { color, size }\n}\n\n/**\n * A short, read-only label attached to something else, such as a count or a\n * status beside a row's headline. It takes no press: for a label that can be\n * selected, reach for Chip.\n *\n * ```tsx\n * <ListItem trailing={<Tag tone=\"positive\">Label</Tag>}>Headline</ListItem>\n * ```\n *\n * The label is set in label small with tabular figures, on one line. An icon\n * given beside it is drawn at the label's line height in the label's colour,\n * so a tag with an icon is the same height as one without. A screen reader\n * reads the label where the tag sits; the tag adds no role of its own.\n *\n * Like any view, a tag stretches across a column it sits in on its own, so a\n * call site placing one there sets `alignSelf`. A row slot, such as\n * ListItem's trailing one, already holds it at its own width.\n *\n * `style`, `ref` and `testID` land on the `View`, and a `style` there applies\n * over the tag's own.\n */\nfunction Tag({\n  children,\n  style,\n  tone = 'neutral',\n  variant = 'filled',\n  ...props\n}: TagProps) {\n  const theme = useTheme()\n  const role = useTypeRole('labelSmall')\n  const toned = tonesOf(theme)[variant][tone]\n\n  return (\n    <View\n      {...props}\n      style={composeStyles<ViewStyle>(\n        stylesOf(theme).base,\n        toned.container,\n        style,\n      )}\n    >\n      <IconStyleContext\n        value={iconStyleOf(\n          toned.content,\n          theme.typography.labelSmallLineHeight,\n        )}\n      >\n        {contentOf(\n          children,\n          composeStyles<TextStyle>(role, styles.label, toned.label),\n        )}\n      </IconStyleContext>\n    </View>\n  )\n}\n\n/**\n * One tone's styles: the container's fill and rule, the label's colour, and\n * that colour on its own for an icon beside the label.\n */\nfunction toneOf(background: string, border: string, content: string) {\n  return {\n    content,\n    ...StyleSheet.create({\n      container: { backgroundColor: background, borderColor: border },\n      label: { color: content },\n    }),\n  }\n}\n\nexport type { TagProps, TagTone, TagVariant }\n\nexport { Tag }\n"],"mappings":"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"}

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

@@ -38,7 +38,7 @@ type TextProps$1 = TextProps & {
  * rather than an element. `style`, `ref` and `testID` land on React Native's
  * own Text.
  */
-declare function Text$1({ style, tone, variant, ...props }: TextProps$1): import("react").JSX.Element;
+declare function Text$1({ children, style, tone, variant, ...props }: TextProps$1): import("react").JSX.Element;
 //#endregion
 export { Text$1 as Text, type TextProps$1 as TextProps };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/text/index.js

@@ -1,6 +1,8 @@
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
 import { useTypeRole } from "../../typography/roles.js";
+import { TextSizeContext } from "../../typography/size.js";
+import { sentenceLabel } from "../keycap/index.js";
 import { c } from "react/compiler-runtime";
 import { StyleSheet, Text } from "react-native";
 import { jsx } from "react/jsx-runtime";
@@ -36,41 +38,67 @@ const stylesOf = themedStyles(({ colors }) => StyleSheet.create({
 * own Text.
 */
 function Text$1(t0) {
-	const $ = c(9);
+	const $ = c(18);
+	let children;
 	let props;
 	let style;
 	let t1;
 	let t2;
 	if ($[0] !== t0) {
-		({style, tone: t1, variant: t2, ...props} = t0);
+		({children, style, tone: t1, variant: t2, ...props} = t0);
 		$[0] = t0;
-		$[1] = props;
-		$[2] = style;
-		$[3] = t1;
-		$[4] = t2;
+		$[1] = children;
+		$[2] = props;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
 	} else {
-		props = $[1];
-		style = $[2];
-		t1 = $[3];
-		t2 = $[4];
+		children = $[1];
+		props = $[2];
+		style = $[3];
+		t1 = $[4];
+		t2 = $[5];
 	}
 	const tone = t1 === void 0 ? "neutral" : t1;
 	const role = useTypeRole(t2 === void 0 ? "bodyMedium" : t2);
 	const tones = stylesOf(useTheme());
-	const T0 = Text;
-	const t3 = composeStyles(role, tones[tone], style);
+	const composed = composeStyles(role, tones[tone], style);
+	const size = StyleSheet.flatten(composed)?.fontSize;
+	const plain = typeof children === "string" || typeof children === "number";
+	let t3;
+	if ($[6] !== children || $[7] !== props) {
+		t3 = props.accessibilityLabel ?? (props["aria-label"] === void 0 ? sentenceLabel(children) : void 0);
+		$[6] = children;
+		$[7] = props;
+		$[8] = t3;
+	} else t3 = $[8];
+	const label = t3;
 	let t4;
-	if ($[5] !== T0 || $[6] !== props || $[7] !== t3) {
-		t4 = /* @__PURE__ */ jsx(T0, {
+	if ($[9] !== children || $[10] !== plain || $[11] !== size) {
+		t4 = plain ? children : /* @__PURE__ */ jsx(TextSizeContext, {
+			value: size,
+			children
+		});
+		$[9] = children;
+		$[10] = plain;
+		$[11] = size;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== composed || $[14] !== label || $[15] !== props || $[16] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Text, {
 			...props,
-			style: t3
+			accessibilityLabel: label,
+			style: composed,
+			children: t4
 		});
-		$[5] = T0;
-		$[6] = props;
-		$[7] = t3;
-		$[8] = t4;
-	} else t4 = $[8];
-	return t4;
+		$[13] = composed;
+		$[14] = label;
+		$[15] = props;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
+	return t5;
 }
 //#endregion
 export { Text$1 as Text };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ComponentRef","Ref","TextProps","NativeTextProps","Text","NativeText","StyleSheet","TypeRole","useTheme","composeStyles","themedStyles","useTypeRole","stylesOf","colors","create","error","color","inherit","muted","onSurfaceVariant","negative","neutral","onSurface","positive","primary","ref","tone","variant","t0","$","_c","props","style","t1","t2","undefined","role","tones","T0","t3","t4","Text","_c","NativeText"],"sources":["../../../src/components/text/index.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type { TextProps as NativeTextProps } from 'react-native'\n\nimport { Text as NativeText, StyleSheet } from 'react-native'\n\nimport type { TypeRole } from '../../typography/roles'\n\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useTypeRole } from '../../typography/roles'\n\n// Tone is a separate axis from variant so the two compose freely: any of the\n// fifteen roles in any of these colours, the same set web's Text takes.\n// `inherit` sets no colour, so a Text inside another takes the outer one's.\nconst stylesOf = themedStyles(({ colors }) =>\n  StyleSheet.create({\n    error: { color: colors.error },\n    inherit: {},\n    muted: { color: colors.onSurfaceVariant },\n    negative: { color: colors.negative },\n    neutral: { color: colors.onSurface },\n    positive: { color: colors.positive },\n    primary: { color: colors.primary },\n  }),\n)\n\ntype TextProps = NativeTextProps & {\n  readonly ref?: Ref<ComponentRef<typeof NativeText>>\n  /**\n   * The colour role to draw in. `neutral` is the on-surface role, as it is on\n   * web; `inherit` takes the colour of the Text around it instead of setting\n   * one.\n   * @default 'neutral'\n   */\n  readonly tone?:\n    | 'error'\n    | 'inherit'\n    | 'muted'\n    | 'negative'\n    | 'neutral'\n    | 'positive'\n    | 'primary'\n  /**\n   * Which role of the type scale to draw in.\n   * @default 'bodyMedium'\n   */\n  readonly variant?: TypeRole\n}\n\n/**\n * A run of text in one role of Material Design's type scale and one colour\n * role, with web's props and values.\n *\n * ```tsx\n * <Text accessibilityRole=\"header\" variant=\"titleLarge\">\n *   Headline\n * </Text>\n * ```\n *\n * Each role reads its family, size, line height, weight and tracking from the\n * theme, so an override of the plain or brand family reaches every role drawn\n * in it. The family is the token's first when the app has registered it with\n * expo-font, and the system font otherwise. The OS text size scales every\n * role, as `allowFontScaling` leaves it.\n *\n * Web's `render` and `block` have no counterpart: a native Text is a block\n * unless it sits inside another, and a heading is an `accessibilityRole`\n * rather than an element. `style`, `ref` and `testID` land on React Native's\n * own Text.\n */\nfunction Text({\n  style,\n  tone = 'neutral',\n  variant = 'bodyMedium',\n  ...props\n}: TextProps) {\n  const role = useTypeRole(variant)\n  const tones = stylesOf(useTheme())\n\n  return (\n    <NativeText {...props} style={composeStyles(role, tones[tone], style)} />\n  )\n}\n\nexport type { TextProps }\n\nexport { Text }\n"],"mappings":";;;;;;;AAcA,MAAMY,WAAWF,cAAc,EAAEG,aAC/BP,WAAWQ,OAAO;CAChBC,OAAO,EAAEC,OAAOH,OAAOE,MAAM;CAC7BE,SAAS,CAAC;CACVC,OAAO,EAAEF,OAAOH,OAAOM,iBAAiB;CACxCC,UAAU,EAAEJ,OAAOH,OAAOO,SAAS;CACnCC,SAAS,EAAEL,OAAOH,OAAOS,UAAU;CACnCC,UAAU,EAAEP,OAAOH,OAAOU,SAAS;CACnCC,SAAS,EAAER,OAAOH,OAAOW,QAAQ;AACnC,CAAC,CACH;;;;;;;;;;;;;;;;;;;;;;AA8CA,SAAApB,OAAAwB,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAc,CAAA,CAAAI,OAAAN,MAAAO,IAAAN,SAAAO,IAAA,GAAAH,SAAAH;EAKFC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,QAAAF,EAAA;EAAAG,QAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAHV,MAAAH,OAAAO,OAAAE,KAAAA,IAAA,YAAAF;CAIA,MAAAG,OAAazB,YAHbuB,OAAAC,KAAAA,IAAA,eAAAD,EAGgC;CAChC,MAAAG,QAAczB,SAASJ,SAAS,CAAC;CAG9B,MAAA8B,KAAAjC;CAA6B,MAAAkC,KAAA9B,cAAc2B,MAAMC,MAAMX,OAAOM,KAAK;CAAC,IAAAQ;CAAA,IAAAX,EAAA,OAAAS,MAAAT,EAAA,OAAAE,SAAAF,EAAA,OAAAU,IAAA;EAArEC,KAAA,oBAAC,IAAD;GAAW,GAAKT;GAAc,OAAAQ;EAAuC,CAAA;EAAIV,EAAA,KAAAS;EAAAT,EAAA,KAAAE;EAAAF,EAAA,KAAAU;EAAAV,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,OAAzEW;AAAyE"}
+{"version":3,"file":"index.js","names":["ComponentRef","Ref","TextProps","NativeTextProps","TextStyle","Text","NativeText","StyleSheet","TypeRole","useTheme","composeStyles","themedStyles","useTypeRole","TextSizeContext","sentenceLabel","stylesOf","colors","create","error","color","inherit","muted","onSurfaceVariant","negative","neutral","onSurface","positive","primary","ref","tone","variant","t0","$","_c","children","props","style","t1","t2","undefined","role","tones","composed","size","flatten","fontSize","plain","t3","accessibilityLabel","label","t4","t5","Text","_c","NativeText"],"sources":["../../../src/components/text/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 type { TypeRole } from '../../typography/roles'\n\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useTypeRole } from '../../typography/roles'\nimport { TextSizeContext } from '../../typography/size'\nimport { sentenceLabel } from '../keycap'\n\n// Tone is a separate axis from variant so the two compose freely: any of the\n// fifteen roles in any of these colours, the same set web's Text takes.\n// `inherit` sets no colour, so a Text inside another takes the outer one's.\nconst stylesOf = themedStyles(({ colors }) =>\n  StyleSheet.create({\n    error: { color: colors.error },\n    inherit: {},\n    muted: { color: colors.onSurfaceVariant },\n    negative: { color: colors.negative },\n    neutral: { color: colors.onSurface },\n    positive: { color: colors.positive },\n    primary: { color: colors.primary },\n  }),\n)\n\ntype TextProps = NativeTextProps & {\n  readonly ref?: Ref<ComponentRef<typeof NativeText>>\n  /**\n   * The colour role to draw in. `neutral` is the on-surface role, as it is on\n   * web; `inherit` takes the colour of the Text around it instead of setting\n   * one.\n   * @default 'neutral'\n   */\n  readonly tone?:\n    | 'error'\n    | 'inherit'\n    | 'muted'\n    | 'negative'\n    | 'neutral'\n    | 'positive'\n    | 'primary'\n  /**\n   * Which role of the type scale to draw in.\n   * @default 'bodyMedium'\n   */\n  readonly variant?: TypeRole\n}\n\n/**\n * A run of text in one role of Material Design's type scale and one colour\n * role, with web's props and values.\n *\n * ```tsx\n * <Text accessibilityRole=\"header\" variant=\"titleLarge\">\n *   Headline\n * </Text>\n * ```\n *\n * Each role reads its family, size, line height, weight and tracking from the\n * theme, so an override of the plain or brand family reaches every role drawn\n * in it. The family is the token's first when the app has registered it with\n * expo-font, and the system font otherwise. The OS text size scales every\n * role, as `allowFontScaling` leaves it.\n *\n * Web's `render` and `block` have no counterpart: a native Text is a block\n * unless it sits inside another, and a heading is an `accessibilityRole`\n * rather than an element. `style`, `ref` and `testID` land on React Native's\n * own Text.\n */\nfunction Text({\n  children,\n  style,\n  tone = 'neutral',\n  variant = 'bodyMedium',\n  ...props\n}: TextProps) {\n  const role = useTypeRole(variant)\n  const tones = stylesOf(useTheme())\n  const composed = composeStyles<TextStyle>(role, tones[tone], style)\n  // The size the text ends up at, the call site's over the role's, which a\n  // Code or a Keycap inside it sets a share of. Plain text holds neither, so\n  // it goes in as it is, and a host Text's children stay the string a call\n  // site wrote.\n  const size = StyleSheet.flatten(composed)?.fontSize\n  const plain = typeof children === 'string' || typeof children === 'number'\n  // A Keycap is an inline View, whose name a native screen reader leaves out\n  // of the sentence, so a Text holding one says the sentence itself unless\n  // the call site has labelled it.\n  const label =\n    props.accessibilityLabel ??\n    (props['aria-label'] === undefined ? sentenceLabel(children) : undefined)\n\n  return (\n    <NativeText {...props} accessibilityLabel={label} style={composed}>\n      {plain ? (\n        children\n      ) : (\n        <TextSizeContext value={size}>{children}</TextSizeContext>\n      )}\n    </NativeText>\n  )\n}\n\nexport type { TextProps }\n\nexport { Text }\n"],"mappings":";;;;;;;;;AAgBA,MAAMe,WAAWJ,cAAc,EAAEK,aAC/BT,WAAWU,OAAO;CAChBC,OAAO,EAAEC,OAAOH,OAAOE,MAAM;CAC7BE,SAAS,CAAC;CACVC,OAAO,EAAEF,OAAOH,OAAOM,iBAAiB;CACxCC,UAAU,EAAEJ,OAAOH,OAAOO,SAAS;CACnCC,SAAS,EAAEL,OAAOH,OAAOS,UAAU;CACnCC,UAAU,EAAEP,OAAOH,OAAOU,SAAS;CACnCC,SAAS,EAAER,OAAOH,OAAOW,QAAQ;AACnC,CAAC,CACH;;;;;;;;;;;;;;;;;;;;;;AA8CA,SAAAtB,OAAA0B,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAN,EAAA,OAAAD,IAAA;EAAc,CAAA,CAAAG,UAAAE,OAAAP,MAAAQ,IAAAP,SAAAQ,IAAA,GAAAH,SAAAJ;EAMFC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAA;EAAAJ,WAAAF,EAAA;EAAAG,QAAAH,EAAA;EAAAI,QAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;CAAA;CAHV,MAAAH,OAAAQ,OAAAE,KAAAA,IAAA,YAAAF;CAIA,MAAAG,OAAa5B,YAHb0B,OAAAC,KAAAA,IAAA,eAAAD,EAGgC;CAChC,MAAAG,QAAc1B,SAASN,SAAS,CAAC;CACjC,MAAAiC,WAAiBhC,cAAyB8B,MAAMC,MAAMZ,OAAOO,KAAK;CAKlE,MAAAO,OAAapC,WAAUqC,QAASF,QAAkB,CAAC,EAAAG;CACnD,MAAAC,QAAc,OAAOZ,aAAa,YAAY,OAAOA,aAAa;CAAQ,IAAAa;CAAA,IAAAf,EAAA,OAAAE,YAAAF,EAAA,OAAAG,OAAA;EAKxEY,KAAAZ,MAAKa,uBACJb,MAAM,kBAAkBI,KAAAA,IAAYzB,cAAcoB,QAAoB,IAAtEK,KAAAA;EAAwEP,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CAF3E,MAAAiB,QACEF;CACyE,IAAAG;CAAA,IAAAlB,EAAA,OAAAE,YAAAF,EAAA,QAAAc,SAAAd,EAAA,QAAAW,MAAA;EAItEO,KAAAJ,QAAAZ,WAGC,oBAAC,iBAAD;GAAwBS,OAAAA;GAAOT;EAAf,CAAA;EACjBF,EAAA,KAAAE;EAAAF,EAAA,MAAAc;EAAAd,EAAA,MAAAW;EAAAX,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,IAAAmB;CAAA,IAAAnB,EAAA,QAAAU,YAAAV,EAAA,QAAAiB,SAAAjB,EAAA,QAAAG,SAAAH,EAAA,QAAAkB,IAAA;EALHC,KAAA,oBAACG,MAAD;GAAW,GAAKnB;GAA2Bc,oBAAAA;GAAcP,OAAAA;GACtDQ,UAAAA;EADQ,CAAA;EAMElB,EAAA,MAAAU;EAAAV,EAAA,MAAAiB;EAAAjB,EAAA,MAAAG;EAAAH,EAAA,MAAAkB;EAAAlB,EAAA,MAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAAA,OANbmB;AAMa"}

package/dist/components/text-area/index.d.ts

@@ -0,0 +1,145 @@
+import { ValidationResult } from "../../form/index.js";
+import { FieldVariant } from "../../field/index.js";
+import { StyleProp, TextInput, TextInputProps, View, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+//#region src/components/text-area/index.d.ts
+type TextAreaProps = Omit<TextInputProps, 'accessibilityHint' | 'accessibilityLabel' | 'aria-disabled' | 'aria-label' | 'children' | 'cursorColor' | 'defaultValue' | 'editable' | 'multiline' | 'numberOfLines' | 'onChange' | 'onChangeText' | 'placeholder' | 'placeholderTextColor' | 'readOnly' | 'rows' | 'selectionColor' | 'style' | 'underlineColorAndroid' | 'value'> & {
+  /**
+   * Whether the field grows with the text it holds, from `rows` up. `false`
+   * keeps it at `rows` and scrolls the text inside.
+   * @default true
+   */
+  readonly autosize?: boolean;
+  /**
+   * Counts the characters the field holds at the end of the supporting line,
+   * against `maxLength` where there is one, as the text fields page's
+   * character counter does. The count is written in the digits of the
+   * `I18nProvider`'s locale, or the device's outside one.
+   * @default false
+   */
+  readonly characterCount?: boolean;
+  /**
+   * How the limit is said to a screen reader, where there is a `maxLength`.
+   * Read with the field rather than as the value changes, so it names the
+   * limit and not what is left of it; the visible count is hidden from
+   * screen readers, which is what this replaces. Left out, it is the
+   * library's sentence in the `I18nProvider`'s locale, or the device's
+   * outside one, in the plural form the limit takes there: "Up to 20
+   * characters" in English, singular for a limit of one.
+   */
+  readonly characterLimitLabel?: string;
+  /** The value the field opens with, when it keeps its own. */
+  readonly defaultValue?: string;
+  /**
+   * A hint shown under the field. Replaced by `error` when there is one, so
+   * the two never stack.
+   */
+  readonly description?: string;
+  /**
+   * The problem with the current value, in words. Its presence is what puts
+   * the field in its error state: the message, the error colours, and the
+   * invalid state a screen reader reads all follow from it. The line under
+   * the field arrives with the message, so the field grows when this does,
+   * unless it is inside a `Form`, which keeps the line drawn. It wins over
+   * what `validate` and the form say, and holds a `native` form back.
+   */
+  readonly error?: string;
+  /**
+   * Whether the label sits in the empty box and floats to the top once the
+   * field is focused or holds a value, as the text fields page draws it.
+   * `false` keeps it small at the top in every state.
+   * @default true
+   */
+  readonly floatingLabel?: boolean;
+  /**
+   * A ref to the field's own `TextInput`, which is what a call site moves
+   * focus to, after a server's error, say. `ref` is the field as a whole.
+   */
+  readonly inputRef?: Ref<ComponentRef<typeof TextInput>>;
+  /**
+   * Draws the field disabled: it takes no focus and no input.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Shows the value and takes focus, but takes no input.
+   * @default false
+   */
+  readonly isReadOnly?: boolean;
+  /**
+   * Marks the label with an asterisk, as the text fields page marks a field
+   * that must be filled.
+   * @default false
+   */
+  readonly isRequired?: boolean;
+  /**
+   * What the field is for, and the name a screen reader reads for it.
+   * Required, since a text area with no label is a box nobody can name.
+   */
+  readonly label: string;
+  /**
+   * An icon at the start of the box, before the label and the text: the
+   * page's 24dp leading icon, in the muted role. The slot hands it that
+   * colour and size through `useIconStyle()`.
+   */
+  readonly leadingIcon?: ReactNode;
+  /**
+   * The name the value is submitted under by the `Form` around the field,
+   * and the key its `validationErrors` reach the field by.
+   */
+  readonly name?: string;
+  /** Called with the new value as it is edited. */
+  readonly onChange?: (value: string) => void;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /**
+   * How many lines of text the field shows: the least it shows while it
+   * grows, or all it shows when it does not.
+   * @default 3
+   */
+  readonly rows?: number;
+  /** Positions and sizes the field as a whole. */
+  readonly style?: StyleProp<ViewStyle>;
+  /**
+   * An icon at the end of the box, after the text: the page's 24dp trailing
+   * icon, in the muted role and the error role while the field has an
+   * error. The slot hands it that colour and size through `useIconStyle()`.
+   */
+  readonly trailingIcon?: ReactNode;
+  /**
+   * Checks the value, and returns its problem in words, or several, where
+   * there is one, and `true`, `null` or `undefined` where there is none.
+   * Under the default `aria` validation the error shows as the value
+   * changes; inside a `native` form it shows once a submission is tried, or
+   * once the field loses focus after an edit, and holds the form back.
+   */
+  readonly validate?: (value: string) => ValidationResult;
+  /** The value, when the call site keeps it. */
+  readonly value?: string;
+  /**
+   * The filled box, or the outlined one: no fill, an outline that thickens
+   * and takes the primary role while focused, and the label cutting it once
+   * it floats, the text fields page's two fields.
+   * @default 'filled'
+   */
+  readonly variant?: FieldVariant;
+};
+/**
+ * A labelled multi-line input, the text fields page's filled or outlined
+ * field holding several lines. Pass `value` with `onChange` to control it, or
+ * `defaultValue` to let it keep its own; `onChange` is handed the string.
+ *
+ * It shows `rows` lines at the least and grows with what it holds, or holds
+ * at `rows` and scrolls with `autosize={false}`. The page's configurations
+ * are props: `leadingIcon` and `trailingIcon` at the box's ends, and
+ * `characterCount` opposite the supporting text, counting against
+ * `maxLength`. React Native's own `TextInput` props reach the control;
+ * `style` and `ref` are the field as a whole, and `inputRef` the control.
+ *
+ * ```tsx
+ * <TextArea label="Label" description="Supporting line" />
+ * ```
+ */
+declare function TextArea({ autosize, characterCount, characterLimitLabel, defaultValue, description, error, floatingLabel, inputRef, isDisabled, isReadOnly, isRequired, label, leadingIcon, name, onBlur, onChange, onFocus, ref, rows, style, trailingIcon, validate, value, variant, ...props }: TextAreaProps): import("react").JSX.Element;
+//#endregion
+export { TextArea, type TextAreaProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/text-area/index.js

@@ -0,0 +1,231 @@
+import { useLocaleOf } from "../../i18n/provider.js";
+import { useFieldValidation } from "../../form/index.js";
+import { FieldBox, FieldInput, FieldMessage, describedBy, useFieldFocus } from "../../field/index.js";
+import { c } from "react/compiler-runtime";
+import { View } from "react-native";
+import { useId, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/text-area/index.tsx
+function blurThen(onBlur, then) {
+	return (event) => {
+		onBlur();
+		then?.(event);
+	};
+}
+function editInto(setOwn, onChange, onEdit) {
+	return (text) => {
+		setOwn(text);
+		onEdit();
+		onChange?.(text);
+	};
+}
+/**
+* A labelled multi-line input, the text fields page's filled or outlined
+* field holding several lines. Pass `value` with `onChange` to control it, or
+* `defaultValue` to let it keep its own; `onChange` is handed the string.
+*
+* It shows `rows` lines at the least and grows with what it holds, or holds
+* at `rows` and scrolls with `autosize={false}`. The page's configurations
+* are props: `leadingIcon` and `trailingIcon` at the box's ends, and
+* `characterCount` opposite the supporting text, counting against
+* `maxLength`. React Native's own `TextInput` props reach the control;
+* `style` and `ref` are the field as a whole, and `inputRef` the control.
+*
+* ```tsx
+* <TextArea label="Label" description="Supporting line" />
+* ```
+*/
+function TextArea(t0) {
+	const $ = c(59);
+	const { autosize: t1, characterCount: t2, characterLimitLabel, defaultValue: t3, description, error, floatingLabel: t4, inputRef, isDisabled: t5, isReadOnly: t6, isRequired: t7, label, leadingIcon, name, onBlur, onChange, onFocus, ref, rows: t8, style, trailingIcon, validate, value, variant: t9, ...props } = t0;
+	const autosize = t1 === void 0 ? true : t1;
+	const characterCount = t2 === void 0 ? false : t2;
+	const defaultValue = t3 === void 0 ? "" : t3;
+	const floatingLabel = t4 === void 0 ? true : t4;
+	const isDisabled = t5 === void 0 ? false : t5;
+	const isReadOnly = t6 === void 0 ? false : t6;
+	const isRequired = t7 === void 0 ? false : t7;
+	const rows = t8 === void 0 ? 3 : t8;
+	const variant = t9 === void 0 ? "filled" : t9;
+	const id = useId();
+	const control = useRef(null);
+	const [own, setOwn] = useState(defaultValue);
+	const current = value ?? own;
+	const t10 = current === "";
+	let t11;
+	if ($[0] !== current || $[1] !== error || $[2] !== isDisabled || $[3] !== isReadOnly || $[4] !== isRequired || $[5] !== name || $[6] !== t10 || $[7] !== validate) {
+		t11 = {
+			control,
+			error,
+			isDisabled,
+			isEmpty: t10,
+			isReadOnly,
+			isRequired,
+			name,
+			submitted: current,
+			validate,
+			value: current
+		};
+		$[0] = current;
+		$[1] = error;
+		$[2] = isDisabled;
+		$[3] = isReadOnly;
+		$[4] = isRequired;
+		$[5] = name;
+		$[6] = t10;
+		$[7] = validate;
+		$[8] = t11;
+	} else t11 = $[8];
+	const validation = useFieldValidation(t11);
+	let t12;
+	if ($[9] !== onBlur || $[10] !== validation.onBlur) {
+		t12 = blurThen(validation.onBlur, onBlur);
+		$[9] = onBlur;
+		$[10] = validation.onBlur;
+		$[11] = t12;
+	} else t12 = $[11];
+	let t13;
+	if ($[12] !== onFocus || $[13] !== t12) {
+		t13 = {
+			onBlur: t12,
+			onFocus
+		};
+		$[12] = onFocus;
+		$[13] = t12;
+		$[14] = t13;
+	} else t13 = $[14];
+	const focus = useFieldFocus(t13);
+	const shownError = validation.error;
+	const locale = useLocaleOf(void 0);
+	let t14;
+	let t15;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = () => control.current;
+		t15 = [];
+		$[15] = t14;
+		$[16] = t15;
+	} else {
+		t14 = $[15];
+		t15 = $[16];
+	}
+	useImperativeHandle(inputRef, t14, t15);
+	const T0 = View;
+	const T1 = FieldBox;
+	const t16 = focus.focused;
+	const t17 = shownError !== void 0;
+	const t18 = current !== "";
+	const T2 = FieldInput;
+	const t19 = focus.handlers;
+	const t20 = describedBy(id, {
+		characterLimitLabel,
+		description,
+		error: shownError,
+		locale,
+		maxLength: props.maxLength
+	});
+	const t21 = !isDisabled && !isReadOnly;
+	let t22;
+	if ($[17] !== onChange || $[18] !== setOwn || $[19] !== validation.onEdit) {
+		t22 = editInto(setOwn, onChange, validation.onEdit);
+		$[17] = onChange;
+		$[18] = setOwn;
+		$[19] = validation.onEdit;
+		$[20] = t22;
+	} else t22 = $[20];
+	let t23;
+	if ($[21] !== T2 || $[22] !== autosize || $[23] !== current || $[24] !== focus.handlers || $[25] !== label || $[26] !== props || $[27] !== rows || $[28] !== t20 || $[29] !== t21 || $[30] !== t22) {
+		t23 = /* @__PURE__ */ jsx(T2, {
+			...props,
+			...t19,
+			"aria-label": label,
+			autosize,
+			described: t20,
+			editable: t21,
+			multiline: true,
+			onChangeText: t22,
+			ref: control,
+			rows,
+			value: current
+		});
+		$[21] = T2;
+		$[22] = autosize;
+		$[23] = current;
+		$[24] = focus.handlers;
+		$[25] = label;
+		$[26] = props;
+		$[27] = rows;
+		$[28] = t20;
+		$[29] = t21;
+		$[30] = t22;
+		$[31] = t23;
+	} else t23 = $[31];
+	let t24;
+	if ($[32] !== T1 || $[33] !== floatingLabel || $[34] !== focus.focused || $[35] !== isDisabled || $[36] !== isRequired || $[37] !== label || $[38] !== leadingIcon || $[39] !== t17 || $[40] !== t18 || $[41] !== t23 || $[42] !== trailingIcon || $[43] !== variant) {
+		t24 = /* @__PURE__ */ jsx(T1, {
+			control,
+			floatingLabel,
+			isDisabled,
+			isFocused: t16,
+			isInvalid: t17,
+			isPopulated: t18,
+			isRequired,
+			label,
+			leading: leadingIcon,
+			trailing: trailingIcon,
+			variant,
+			children: t23
+		});
+		$[32] = T1;
+		$[33] = floatingLabel;
+		$[34] = focus.focused;
+		$[35] = isDisabled;
+		$[36] = isRequired;
+		$[37] = label;
+		$[38] = leadingIcon;
+		$[39] = t17;
+		$[40] = t18;
+		$[41] = t23;
+		$[42] = trailingIcon;
+		$[43] = variant;
+		$[44] = t24;
+	} else t24 = $[44];
+	let t25;
+	if ($[45] !== characterCount || $[46] !== characterLimitLabel || $[47] !== current.length || $[48] !== description || $[49] !== id || $[50] !== props.maxLength || $[51] !== shownError) {
+		t25 = /* @__PURE__ */ jsx(FieldMessage, {
+			characterCount,
+			characterLimitLabel,
+			description,
+			error: shownError,
+			id,
+			length: current.length,
+			maxLength: props.maxLength
+		});
+		$[45] = characterCount;
+		$[46] = characterLimitLabel;
+		$[47] = current.length;
+		$[48] = description;
+		$[49] = id;
+		$[50] = props.maxLength;
+		$[51] = shownError;
+		$[52] = t25;
+	} else t25 = $[52];
+	let t26;
+	if ($[53] !== T0 || $[54] !== ref || $[55] !== style || $[56] !== t24 || $[57] !== t25) {
+		t26 = /* @__PURE__ */ jsxs(T0, {
+			ref,
+			style,
+			children: [t24, t25]
+		});
+		$[53] = T0;
+		$[54] = ref;
+		$[55] = style;
+		$[56] = t24;
+		$[57] = t25;
+		$[58] = t26;
+	} else t26 = $[58];
+	return t26;
+}
+//#endregion
+export { TextArea };
+
+//# sourceMappingURL=index.js.map

package/dist/components/text-area/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","StyleProp","TextInput","TextInputProps","ViewStyle","useId","useImperativeHandle","useRef","useState","View","FieldVariant","ValidationResult","describedBy","FieldBox","FieldInput","FieldMessage","useFieldFocus","useFieldValidation","useLocaleOf","TextAreaProps","Omit","autosize","characterCount","characterLimitLabel","defaultValue","description","error","floatingLabel","inputRef","isDisabled","isReadOnly","isRequired","label","leadingIcon","name","onChange","value","ref","rows","style","trailingIcon","validate","variant","blurThen","onBlur","then","event","editInto","setOwn","onEdit","text","TextArea","t0","$","_c","t1","t2","t3","t4","t5","t6","t7","onFocus","t8","t9","props","undefined","id","control","own","current","t10","t11","isEmpty","submitted","validation","t12","t13","focus","shownError","locale","t14","t15","Symbol","for","T0","T1","t16","focused","t17","t18","T2","t19","handlers","t20","maxLength","t21","t22","t23","t24","t25","length","t26","_c"],"sources":["../../../src/components/text-area/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type {\n  StyleProp,\n  TextInput,\n  TextInputProps,\n  ViewStyle,\n} from 'react-native'\n\nimport { useId, useImperativeHandle, useRef, useState } from 'react'\nimport { View } from 'react-native'\n\nimport type { FieldVariant } from '../../field'\nimport type { ValidationResult } from '../../form'\n\nimport {\n  describedBy,\n  FieldBox,\n  FieldInput,\n  FieldMessage,\n  useFieldFocus,\n} from '../../field'\nimport { useFieldValidation } from '../../form'\nimport { useLocaleOf } from '../../i18n/provider'\n\n// kanso-ui's TextArea, the text fields page's multi-line configuration of the\n// field: the same box, floating label, icons, rule and supporting line as\n// TextField, drawn through the field chrome in src/field, around a control\n// that holds several lines. The page gives the box 56dp at the least, with\n// 8dp above and below the text and the label resting on its first line; a box\n// holding more grows a line at a time, which the chrome's height floor\n// already does, and its icons stay centred in its height, as web's do. The\n// page draws no resize handle, and React Native draws none.\n//\n// Its own component rather than a prop of TextField, as on web, so `rows` and\n// `autosize` stay off TextField's type and `numeric`, `prefix` and `suffix`\n// off this one.\n//\n// The value is the field's own or the call site's, as TextField's is, and\n// `onChange` is handed the string. The error shown is `error`, or what the\n// field's `validate` and the `Form` around it say, which src/form decides.\n\ntype TextAreaProps = Omit<\n  TextInputProps,\n  | 'accessibilityHint'\n  | 'accessibilityLabel'\n  | 'aria-disabled'\n  | 'aria-label'\n  | 'children'\n  | 'cursorColor'\n  | 'defaultValue'\n  | 'editable'\n  | 'multiline'\n  | 'numberOfLines'\n  | 'onChange'\n  | 'onChangeText'\n  | 'placeholder'\n  | 'placeholderTextColor'\n  | 'readOnly'\n  | 'rows'\n  | 'selectionColor'\n  | 'style'\n  | 'underlineColorAndroid'\n  | 'value'\n> & {\n  /**\n   * Whether the field grows with the text it holds, from `rows` up. `false`\n   * keeps it at `rows` and scrolls the text inside.\n   * @default true\n   */\n  readonly autosize?: boolean\n  /**\n   * Counts the characters the field holds at the end of the supporting line,\n   * against `maxLength` where there is one, as the text fields page's\n   * character counter does. The count is written in the digits of the\n   * `I18nProvider`'s locale, or the device's outside one.\n   * @default false\n   */\n  readonly characterCount?: boolean\n  /**\n   * How the limit is said to a screen reader, where there is a `maxLength`.\n   * Read with the field rather than as the value changes, so it names the\n   * limit and not what is left of it; the visible count is hidden from\n   * screen readers, which is what this replaces. Left out, it is the\n   * library's sentence in the `I18nProvider`'s locale, or the device's\n   * outside one, in the plural form the limit takes there: \"Up to 20\n   * characters\" in English, singular for a limit of one.\n   */\n  readonly characterLimitLabel?: string\n  /** The value the field opens with, when it keeps its own. */\n  readonly defaultValue?: string\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  readonly description?: string\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state: the message, the error colours, and the\n   * invalid state a screen reader reads all follow from it. The line under\n   * the field arrives with the message, so the field grows when this does,\n   * unless it is inside a `Form`, which keeps the line drawn. It wins over\n   * what `validate` and the form say, and holds a `native` form back.\n   */\n  readonly error?: string\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  readonly floatingLabel?: boolean\n  /**\n   * A ref to the field's own `TextInput`, which is what a call site moves\n   * focus to, after a server's error, say. `ref` is the field as a whole.\n   */\n  readonly inputRef?: Ref<ComponentRef<typeof TextInput>>\n  /**\n   * Draws the field disabled: it takes no focus and no input.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Shows the value and takes focus, but takes no input.\n   * @default false\n   */\n  readonly isReadOnly?: boolean\n  /**\n   * Marks the label with an asterisk, as the text fields page marks a field\n   * that must be filled.\n   * @default false\n   */\n  readonly isRequired?: boolean\n  /**\n   * What the field is for, and the name a screen reader reads for it.\n   * Required, since a text area with no label is a box nobody can name.\n   */\n  readonly label: string\n  /**\n   * An icon at the start of the box, before the label and the text: the\n   * page's 24dp leading icon, in the muted role. The slot hands it that\n   * colour and size through `useIconStyle()`.\n   */\n  readonly leadingIcon?: ReactNode\n  /**\n   * The name the value is submitted under by the `Form` around the field,\n   * and the key its `validationErrors` reach the field by.\n   */\n  readonly name?: string\n  /** Called with the new value as it is edited. */\n  readonly onChange?: (value: string) => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * How many lines of text the field shows: the least it shows while it\n   * grows, or all it shows when it does not.\n   * @default 3\n   */\n  readonly rows?: number\n  /** Positions and sizes the field as a whole. */\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * An icon at the end of the box, after the text: the page's 24dp trailing\n   * icon, in the muted role and the error role while the field has an\n   * error. The slot hands it that colour and size through `useIconStyle()`.\n   */\n  readonly trailingIcon?: ReactNode\n  /**\n   * Checks the value, and returns its problem in words, or several, where\n   * there is one, and `true`, `null` or `undefined` where there is none.\n   * Under the default `aria` validation the error shows as the value\n   * changes; inside a `native` form it shows once a submission is tried, or\n   * once the field loses focus after an edit, and holds the form back.\n   */\n  readonly validate?: (value: string) => ValidationResult\n  /** The value, when the call site keeps it. */\n  readonly value?: string\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats, the text fields page's two fields.\n   * @default 'filled'\n   */\n  readonly variant?: FieldVariant\n}\n\n// The field's own blur handling, then the call site's.\nfunction blurThen(\n  onBlur: () => void,\n  then: TextInputProps['onBlur'],\n): TextInputProps['onBlur'] {\n  return (event) => {\n    onBlur()\n    then?.(event)\n  }\n}\n\n// Keeps an edit as the field's own value and reports it, so a field the call\n// site controls is told and one it does not still shows what was typed, and\n// tells the field's validation it was edited.\nfunction editInto(\n  setOwn: (value: string) => void,\n  onChange: ((value: string) => void) | undefined,\n  onEdit: () => void,\n) {\n  return (text: string) => {\n    setOwn(text)\n    onEdit()\n    onChange?.(text)\n  }\n}\n\n/**\n * A labelled multi-line input, the text fields page's filled or outlined\n * field holding several lines. Pass `value` with `onChange` to control it, or\n * `defaultValue` to let it keep its own; `onChange` is handed the string.\n *\n * It shows `rows` lines at the least and grows with what it holds, or holds\n * at `rows` and scrolls with `autosize={false}`. The page's configurations\n * are props: `leadingIcon` and `trailingIcon` at the box's ends, and\n * `characterCount` opposite the supporting text, counting against\n * `maxLength`. React Native's own `TextInput` props reach the control;\n * `style` and `ref` are the field as a whole, and `inputRef` the control.\n *\n * ```tsx\n * <TextArea label=\"Label\" description=\"Supporting line\" />\n * ```\n */\nfunction TextArea({\n  autosize = true,\n  characterCount = false,\n  characterLimitLabel,\n  defaultValue = '',\n  description,\n  error,\n  floatingLabel = true,\n  inputRef,\n  isDisabled = false,\n  isReadOnly = false,\n  isRequired = false,\n  label,\n  leadingIcon,\n  name,\n  onBlur,\n  onChange,\n  onFocus,\n  ref,\n  rows = 3,\n  style,\n  trailingIcon,\n  validate,\n  value,\n  variant = 'filled',\n  ...props\n}: TextAreaProps) {\n  const id = useId()\n  const control = useRef<ComponentRef<typeof TextInput>>(null)\n  const [own, setOwn] = useState(defaultValue)\n  const current = value ?? own\n  const validation = useFieldValidation({\n    control,\n    error,\n    isDisabled,\n    isEmpty: current === '',\n    isReadOnly,\n    isRequired,\n    name,\n    submitted: current,\n    validate,\n    value: current,\n  })\n  const focus = useFieldFocus({\n    onBlur: blurThen(validation.onBlur, onBlur),\n    onFocus,\n  })\n  const shownError = validation.error\n  const locale = useLocaleOf(undefined)\n\n  useImperativeHandle<\n    ComponentRef<typeof TextInput> | null,\n    ComponentRef<typeof TextInput> | null\n  >(inputRef, () => control.current, [])\n\n  return (\n    <View ref={ref} style={style}>\n      <FieldBox\n        control={control}\n        floatingLabel={floatingLabel}\n        isDisabled={isDisabled}\n        isFocused={focus.focused}\n        isInvalid={shownError !== undefined}\n        isPopulated={current !== ''}\n        isRequired={isRequired}\n        label={label}\n        leading={leadingIcon}\n        trailing={trailingIcon}\n        variant={variant}\n      >\n        <FieldInput\n          {...props}\n          {...focus.handlers}\n          aria-label={label}\n          autosize={autosize}\n          described={describedBy(id, {\n            characterLimitLabel,\n            description,\n            error: shownError,\n            locale,\n            maxLength: props.maxLength,\n          })}\n          editable={!isDisabled && !isReadOnly}\n          multiline\n          onChangeText={editInto(setOwn, onChange, validation.onEdit)}\n          ref={control}\n          rows={rows}\n          value={current}\n        />\n      </FieldBox>\n      <FieldMessage\n        characterCount={characterCount}\n        characterLimitLabel={characterLimitLabel}\n        description={description}\n        error={shownError}\n        id={id}\n        length={current.length}\n        maxLength={props.maxLength}\n      />\n    </View>\n  )\n}\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"mappings":"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"}

package/dist/components/text-field/index.d.ts

@@ -7,7 +7,8 @@ type TextFieldProps = Omit<TextInputProps, 'accessibilityHint' | 'accessibilityL
   /**
    * Counts the characters the field holds at the end of the supporting line,
    * against `maxLength` where there is one, as the text fields page's
-   * character counter does. The count is written in the device's digits.
+   * character counter does. The count is written in the digits of the
+   * `I18nProvider`'s locale, or the device's outside one.
    * @default false
    */
   readonly characterCount?: boolean;
@@ -15,8 +16,10 @@ type TextFieldProps = Omit<TextInputProps, 'accessibilityHint' | 'accessibilityL
    * How the limit is said to a screen reader, where there is a `maxLength`.
    * Read with the field rather than as the value changes, so it names the
    * limit and not what is left of it; the visible count is hidden from
-   * screen readers, which is what this replaces. Left out, it is the English
-   * sentence, "Up to 20 characters", singular for a limit of one.
+   * screen readers, which is what this replaces. Left out, it is the
+   * library's sentence in the `I18nProvider`'s locale, or the device's
+   * outside one, in the plural form the limit takes there: "Up to 20
+   * characters" in English, singular for a limit of one.
    */
   readonly characterLimitLabel?: string;
   /** The value the field opens with, when it keeps its own. */

package/dist/components/text-field/index.js

@@ -1,3 +1,4 @@
+import { useLocaleOf } from "../../i18n/provider.js";
 import { useFieldValidation } from "../../form/index.js";
 import { FieldBox, FieldInput, FieldMessage, describedBy, useFieldFocus } from "../../field/index.js";
 import { c } from "react/compiler-runtime";
@@ -94,6 +95,7 @@ function TextField(t0) {
 	} else t12 = $[14];
 	const focus = useFieldFocus(t12);
 	const shownError = validation.error;
+	const locale = useLocaleOf(void 0);
 	let t13;
 	let t14;
 	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
@@ -117,6 +119,7 @@ function TextField(t0) {
 		characterLimitLabel,
 		description,
 		error: shownError,
+		locale,
 		maxLength: props.maxLength
 	});
 	const t20 = !isDisabled && !isReadOnly;