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

package/dist/components/separator/index.js

@@ -1,7 +1,9 @@
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { SeparatorOrientationContext } from "../../separator/index.js";
 import { c } from "react/compiler-runtime";
 import { StyleSheet, View } from "react-native";
+import { use } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/separator/index.tsx
 const styles = StyleSheet.create({
@@ -58,50 +60,51 @@ const VERTICAL = { "aria-orientation": "vertical" };
 */
 function Separator(t0) {
 	const $ = c(14);
+	let own;
 	let props;
 	let style;
 	let t1;
-	let t2;
 	if ($[0] !== t0) {
-		({inset: t1, orientation: t2, style, ...props} = t0);
+		({inset: t1, orientation: own, style, ...props} = t0);
 		$[0] = t0;
-		$[1] = props;
-		$[2] = style;
-		$[3] = t1;
-		$[4] = t2;
+		$[1] = own;
+		$[2] = props;
+		$[3] = style;
+		$[4] = t1;
 	} else {
-		props = $[1];
-		style = $[2];
-		t1 = $[3];
-		t2 = $[4];
+		own = $[1];
+		props = $[2];
+		style = $[3];
+		t1 = $[4];
 	}
 	const inset = t1 === void 0 ? "none" : t1;
-	const orientation = t2 === void 0 ? "horizontal" : t2;
 	const theme = useTheme();
-	const t3 = orientation === "vertical" ? VERTICAL : void 0;
-	let t4;
+	const provided = use(SeparatorOrientationContext);
+	const orientation = own ?? provided ?? "horizontal";
+	const t2 = orientation === "vertical" ? VERTICAL : void 0;
+	let t3;
 	if ($[5] !== inset || $[6] !== orientation || $[7] !== style || $[8] !== theme) {
-		t4 = composeStyles(styles[orientation], fillOf(theme).rule, insetsOf(theme)[orientation][inset], style);
+		t3 = composeStyles(styles[orientation], fillOf(theme).rule, insetsOf(theme)[orientation][inset], style);
 		$[5] = inset;
 		$[6] = orientation;
 		$[7] = style;
 		$[8] = theme;
-		$[9] = t4;
-	} else t4 = $[9];
-	let t5;
-	if ($[10] !== props || $[11] !== t3 || $[12] !== t4) {
-		t5 = /* @__PURE__ */ jsx(View, {
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== props || $[11] !== t2 || $[12] !== t3) {
+		t4 = /* @__PURE__ */ jsx(View, {
 			role: "separator",
-			...t3,
+			...t2,
 			...props,
-			style: t4
+			style: t3
 		});
 		$[10] = props;
-		$[11] = t3;
-		$[12] = t4;
-		$[13] = t5;
-	} else t5 = $[13];
-	return t5;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	return t4;
 }
 //#endregion
 export { Separator };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ComponentRef","Ref","ViewProps","ViewStyle","StyleSheet","View","useTheme","composeStyles","themedStyles","styles","create","horizontal","alignSelf","flexShrink","height","vertical","width","fillOf","colors","rule","backgroundColor","outlineVariant","insetsOf","spacing","both","marginEnd","lg","marginStart","none","start","marginBottom","marginTop","VERTICAL","SeparatorInset","SeparatorProps","inset","orientation","ref","Separator","t0","$","_c","props","style","t1","t2","undefined","theme","t3","t4","t5","_c"],"sources":["../../../src/components/separator/index.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type { ViewProps, ViewStyle } from 'react-native'\n\nimport { StyleSheet, View } from 'react-native'\n\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// A divider is the same colour as a border, so it draws from outlineVariant\n// rather than a role of its own, as on web: the design system treats the two\n// as one decision.\n//\n// Drawn as a filled 1dp view rather than as a border, so the rule is the view\n// itself, which flex `gap` and anything measuring it can see.\n//\n// A rule has no length of its own. `alignSelf: 'stretch'` takes it from the\n// parent's cross axis: a horizontal rule spans a column, which is what a\n// `View` is by default, and a vertical one spans a row. A rule between two\n// rows should match whatever they turn out to be rather than being told a\n// length at the call site, and in a parent running the same way as the rule\n// it has none, which is the documented cost.\n//\n// The divider page gives three forms and this draws all three: full width,\n// inset by 16dp at the leading end, and middle-inset by 16dp at both. The page\n// names them \"inset\" and \"middle-inset\"; the prop says `start` and `both`, as\n// on web, since the two words say which ends move. The inset is a margin on\n// the axis the rule runs along, which shortens a stretched rule rather than\n// pushing it out of its parent. A horizontal rule's is `marginStart`, which\n// React Native puts on the right under right-to-left.\nconst styles = StyleSheet.create({\n  horizontal: {\n    alignSelf: 'stretch',\n    flexShrink: 0,\n    height: 1,\n  },\n  vertical: {\n    alignSelf: 'stretch',\n    flexShrink: 0,\n    width: 1,\n  },\n})\n\nconst fillOf = themedStyles(({ colors }) =>\n  StyleSheet.create({\n    rule: { backgroundColor: colors.outlineVariant },\n  }),\n)\n\n// The page's 16dp, on the axis the rule runs along.\nconst insetsOf = themedStyles(({ spacing }) => ({\n  horizontal: StyleSheet.create({\n    both: { marginEnd: spacing.lg, marginStart: spacing.lg },\n    none: {},\n    start: { marginStart: spacing.lg },\n  }),\n  vertical: StyleSheet.create({\n    both: { marginBottom: spacing.lg, marginTop: spacing.lg },\n    none: {},\n    start: { marginTop: spacing.lg },\n  }),\n}))\n\n// React Native Web writes `aria-orientation` onto the element, which React\n// Native's types do not name. A horizontal rule needs none, since that is the\n// separator role's own default.\nconst VERTICAL: { readonly 'aria-orientation': 'vertical' } = {\n  'aria-orientation': 'vertical',\n}\n\ntype SeparatorInset = 'both' | 'none' | 'start'\n\ntype SeparatorProps = ViewProps & {\n  /**\n   * How far the rule is held off the ends it runs between. `start` holds it\n   * 16dp off the leading end, which is the page's inset divider; `both` holds\n   * it off each end, which is its middle-inset one. The inset follows the\n   * writing direction rather than a fixed side.\n   * @default 'none'\n   */\n  readonly inset?: SeparatorInset\n  /**\n   * Which way the rule runs. A rule takes its length from its parent: a\n   * horizontal one spans a column, and a vertical one a row.\n   * @default 'horizontal'\n   */\n  readonly orientation?: 'horizontal' | 'vertical'\n  readonly ref?: Ref<ComponentRef<typeof View>>\n}\n\n/**\n * A 1dp rule between items, in the outline-variant colour, carrying the\n * separator role.\n *\n * ```tsx\n * <Stack gap=\"none\">\n *   <Text>First item</Text>\n *   <Separator inset=\"start\" />\n *   <Text>Second item</Text>\n * </Stack>\n * ```\n *\n * `inset` holds the rule off the ends it runs between, `start` off the\n * leading one and `both` off each, which is what a rule between list rows\n * takes so it lines up with their text rather than the container's edge.\n *\n * Web draws the rule again as a border under forced colours, which neither\n * iOS nor Android has. `style`, `ref` and `testID` land on the `View`, and a\n * `style` there applies over the rule's own.\n */\nfunction Separator({\n  inset = 'none',\n  orientation = 'horizontal',\n  style,\n  ...props\n}: SeparatorProps) {\n  const theme = useTheme()\n\n  return (\n    <View\n      role=\"separator\"\n      {...(orientation === 'vertical' ? VERTICAL : undefined)}\n      {...props}\n      style={composeStyles<ViewStyle>(\n        styles[orientation],\n        fillOf(theme).rule,\n        insetsOf(theme)[orientation][inset],\n        style,\n      )}\n    />\n  )\n}\n\nexport type { SeparatorInset, SeparatorProps }\n\nexport { Separator }\n"],"mappings":";;;;;;AA6BA,MAAMS,SAASL,WAAWM,OAAO;CAC/BC,YAAY;EACVC,WAAW;EACXC,YAAY;EACZC,QAAQ;CACV;CACAC,UAAU;EACRH,WAAW;EACXC,YAAY;EACZG,OAAO;CACT;AACF,CAAC;AAED,MAAMC,SAAST,cAAc,EAAEU,aAC7Bd,WAAWM,OAAO,EAChBS,MAAM,EAAEC,iBAAiBF,OAAOG,eAAe,EACjD,CAAC,CACH;AAGA,MAAMC,WAAWd,cAAc,EAAEe,eAAe;CAC9CZ,YAAYP,WAAWM,OAAO;EAC5Bc,MAAM;GAAEC,WAAWF,QAAQG;GAAIC,aAAaJ,QAAQG;EAAG;EACvDE,MAAM,CAAC;EACPC,OAAO,EAAEF,aAAaJ,QAAQG,GAAG;CACnC,CAAC;CACDX,UAAUX,WAAWM,OAAO;EAC1Bc,MAAM;GAAEM,cAAcP,QAAQG;GAAIK,WAAWR,QAAQG;EAAG;EACxDE,MAAM,CAAC;EACPC,OAAO,EAAEE,WAAWR,QAAQG,GAAG;CACjC,CAAC;AACH,EAAE;AAKF,MAAMM,WAAwD,EAC5D,oBAAoB,WACtB;;;;;;;;;;;;;;;;;;;;;AA0CA,SAAAM,UAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAmB,CAAA,CAAAJ,OAAAS,IAAAR,aAAAS,IAAAF,OAAA,GAAAD,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;CAJf,MAAAL,QAAAS,OAAAE,KAAAA,IAAA,SAAAF;CACA,MAAAR,cAAAS,OAAAC,KAAAA,IAAA,eAAAD;CAIA,MAAAE,QAAczC,SAAS;CAKd,MAAA0C,KAAAZ,gBAAgB,aAAhBJ,WAAAc,KAAAA;CAAiD,IAAAG;CAAA,IAAAT,EAAA,OAAAL,SAAAK,EAAA,OAAAJ,eAAAI,EAAA,OAAAG,SAAAH,EAAA,OAAAO,OAAA;EAE/CE,KAAA1C,cACLE,OAAO2B,cACPnB,OAAO8B,KAAK,CAAC,CAAA5B,MACbG,SAASyB,KAAK,CAAC,CAACX,YAAY,CAACD,QAC7BQ,KACF;EAACH,EAAA,KAAAL;EAAAK,EAAA,KAAAJ;EAAAI,EAAA,KAAAG;EAAAH,EAAA,KAAAO;EAAAP,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,QAAAE,SAAAF,EAAA,QAAAQ,MAAAR,EAAA,QAAAS,IAAA;EATHC,KAAA,oBAAC,MAAD;GACO,MAAA;GAAW,GACXF;GAAiD,GAClDN;GACG,OAAAO;EAKN,CAAA;EACDT,EAAA,MAAAE;EAAAF,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;EAAAT,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OAVFU;AAUE"}
+{"version":3,"file":"index.js","names":["ComponentRef","Ref","ViewProps","ViewStyle","use","StyleSheet","View","SeparatorOrientationContext","useTheme","composeStyles","themedStyles","styles","create","horizontal","alignSelf","flexShrink","height","vertical","width","fillOf","colors","rule","backgroundColor","outlineVariant","insetsOf","spacing","both","marginEnd","lg","marginStart","none","start","marginBottom","marginTop","VERTICAL","SeparatorInset","SeparatorProps","inset","orientation","ref","Separator","t0","$","_c","own","props","style","t1","undefined","theme","provided","t2","t3","t4","_c"],"sources":["../../../src/components/separator/index.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type { ViewProps, ViewStyle } from 'react-native'\n\nimport { use } from 'react'\nimport { StyleSheet, View } from 'react-native'\n\nimport { SeparatorOrientationContext } from '../../separator'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// A divider is the same colour as a border, so it draws from outlineVariant\n// rather than a role of its own, as on web: the design system treats the two\n// as one decision.\n//\n// Drawn as a filled 1dp view rather than as a border, so the rule is the view\n// itself, which flex `gap` and anything measuring it can see.\n//\n// A rule has no length of its own. `alignSelf: 'stretch'` takes it from the\n// parent's cross axis: a horizontal rule spans a column, which is what a\n// `View` is by default, and a vertical one spans a row. A rule between two\n// rows should match whatever they turn out to be rather than being told a\n// length at the call site, and in a parent running the same way as the rule\n// it has none, which is the documented cost.\n//\n// The divider page gives three forms and this draws all three: full width,\n// inset by 16dp at the leading end, and middle-inset by 16dp at both. The page\n// names them \"inset\" and \"middle-inset\"; the prop says `start` and `both`, as\n// on web, since the two words say which ends move. The inset is a margin on\n// the axis the rule runs along, which shortens a stretched rule rather than\n// pushing it out of its parent. A horizontal rule's is `marginStart`, which\n// React Native puts on the right under right-to-left.\nconst styles = StyleSheet.create({\n  horizontal: {\n    alignSelf: 'stretch',\n    flexShrink: 0,\n    height: 1,\n  },\n  vertical: {\n    alignSelf: 'stretch',\n    flexShrink: 0,\n    width: 1,\n  },\n})\n\nconst fillOf = themedStyles(({ colors }) =>\n  StyleSheet.create({\n    rule: { backgroundColor: colors.outlineVariant },\n  }),\n)\n\n// The page's 16dp, on the axis the rule runs along.\nconst insetsOf = themedStyles(({ spacing }) => ({\n  horizontal: StyleSheet.create({\n    both: { marginEnd: spacing.lg, marginStart: spacing.lg },\n    none: {},\n    start: { marginStart: spacing.lg },\n  }),\n  vertical: StyleSheet.create({\n    both: { marginBottom: spacing.lg, marginTop: spacing.lg },\n    none: {},\n    start: { marginTop: spacing.lg },\n  }),\n}))\n\n// React Native Web writes `aria-orientation` onto the element, which React\n// Native's types do not name. A horizontal rule needs none, since that is the\n// separator role's own default.\nconst VERTICAL: { readonly 'aria-orientation': 'vertical' } = {\n  'aria-orientation': 'vertical',\n}\n\ntype SeparatorInset = 'both' | 'none' | 'start'\n\ntype SeparatorProps = ViewProps & {\n  /**\n   * How far the rule is held off the ends it runs between. `start` holds it\n   * 16dp off the leading end, which is the page's inset divider; `both` holds\n   * it off each end, which is its middle-inset one. The inset follows the\n   * writing direction rather than a fixed side.\n   * @default 'none'\n   */\n  readonly inset?: SeparatorInset\n  /**\n   * Which way the rule runs. A rule takes its length from its parent: a\n   * horizontal one spans a column, and a vertical one a row. Inside a\n   * `Toolbar` it runs across the bar unless this says otherwise.\n   * @default 'horizontal'\n   */\n  readonly orientation?: 'horizontal' | 'vertical'\n  readonly ref?: Ref<ComponentRef<typeof View>>\n}\n\n/**\n * A 1dp rule between items, in the outline-variant colour, carrying the\n * separator role.\n *\n * ```tsx\n * <Stack gap=\"none\">\n *   <Text>First item</Text>\n *   <Separator inset=\"start\" />\n *   <Text>Second item</Text>\n * </Stack>\n * ```\n *\n * `inset` holds the rule off the ends it runs between, `start` off the\n * leading one and `both` off each, which is what a rule between list rows\n * takes so it lines up with their text rather than the container's edge.\n *\n * Web draws the rule again as a border under forced colours, which neither\n * iOS nor Android has. `style`, `ref` and `testID` land on the `View`, and a\n * `style` there applies over the rule's own.\n */\nfunction Separator({\n  inset = 'none',\n  orientation: own,\n  style,\n  ...props\n}: SeparatorProps) {\n  const theme = useTheme()\n  const provided = use(SeparatorOrientationContext)\n  const orientation = own ?? provided ?? 'horizontal'\n\n  return (\n    <View\n      role=\"separator\"\n      {...(orientation === 'vertical' ? VERTICAL : undefined)}\n      {...props}\n      style={composeStyles<ViewStyle>(\n        styles[orientation],\n        fillOf(theme).rule,\n        insetsOf(theme)[orientation][inset],\n        style,\n      )}\n    />\n  )\n}\n\nexport type { SeparatorInset, SeparatorProps }\n\nexport { Separator }\n"],"mappings":";;;;;;;;AA+BA,MAAMW,SAASN,WAAWO,OAAO;CAC/BC,YAAY;EACVC,WAAW;EACXC,YAAY;EACZC,QAAQ;CACV;CACAC,UAAU;EACRH,WAAW;EACXC,YAAY;EACZG,OAAO;CACT;AACF,CAAC;AAED,MAAMC,SAAST,cAAc,EAAEU,aAC7Bf,WAAWO,OAAO,EAChBS,MAAM,EAAEC,iBAAiBF,OAAOG,eAAe,EACjD,CAAC,CACH;AAGA,MAAMC,WAAWd,cAAc,EAAEe,eAAe;CAC9CZ,YAAYR,WAAWO,OAAO;EAC5Bc,MAAM;GAAEC,WAAWF,QAAQG;GAAIC,aAAaJ,QAAQG;EAAG;EACvDE,MAAM,CAAC;EACPC,OAAO,EAAEF,aAAaJ,QAAQG,GAAG;CACnC,CAAC;CACDX,UAAUZ,WAAWO,OAAO;EAC1Bc,MAAM;GAAEM,cAAcP,QAAQG;GAAIK,WAAWR,QAAQG;EAAG;EACxDE,MAAM,CAAC;EACPC,OAAO,EAAEE,WAAWR,QAAQG,GAAG;CACjC,CAAC;AACH,EAAE;AAKF,MAAMM,WAAwD,EAC5D,oBAAoB,WACtB;;;;;;;;;;;;;;;;;;;;;AA2CA,SAAAM,UAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAmB,CAAA,CAAAJ,OAAAU,IAAAT,aAAAM,KAAAE,OAAA,GAAAD,SAAAJ;EAKFC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,MAAAF,EAAA;EAAAG,QAAAH,EAAA;EAAAI,QAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAJf,MAAAL,QAAAU,OAAAC,KAAAA,IAAA,SAAAD;CAKA,MAAAE,QAAczC,SAAS;CACvB,MAAA0C,WAAiB9C,IAAIG,2BAA2B;CAChD,MAAA+B,cAAoBM,OAAAM,YAAA;CAKX,MAAAC,KAAAb,gBAAgB,aAAhBJ,WAAAc,KAAAA;CAAiD,IAAAI;CAAA,IAAAV,EAAA,OAAAL,SAAAK,EAAA,OAAAJ,eAAAI,EAAA,OAAAI,SAAAJ,EAAA,OAAAO,OAAA;EAE/CG,KAAA3C,cACLE,OAAO2B,cACPnB,OAAO8B,KAAK,CAAC,CAAA5B,MACbG,SAASyB,KAAK,CAAC,CAACX,YAAY,CAACD,QAC7BS,KACF;EAACJ,EAAA,KAAAL;EAAAK,EAAA,KAAAJ;EAAAI,EAAA,KAAAI;EAAAJ,EAAA,KAAAO;EAAAP,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,QAAAG,SAAAH,EAAA,QAAAS,MAAAT,EAAA,QAAAU,IAAA;EATHC,KAAA,oBAAC,MAAD;GACO,MAAA;GAAW,GACXF;GAAiD,GAClDN;GACG,OAAAO;EAKN,CAAA;EACDV,EAAA,MAAAG;EAAAH,EAAA,MAAAS;EAAAT,EAAA,MAAAU;EAAAV,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,OAVFW;AAUE"}

package/dist/components/supporting-pane/index.d.ts

@@ -0,0 +1,44 @@
+import { View, ViewProps } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+//#region src/components/supporting-pane/index.d.ts
+type SupportingPaneProps = Omit<ViewProps, 'children'> & {
+  /**
+   * The primary content. Takes whatever width the supporting pane leaves from
+   * the expanded window size up.
+   */
+  readonly main?: ReactNode;
+  /**
+   * Which side of the main pane the supporting one takes from the expanded
+   * window size up. Below it the layout stacks either way, with the
+   * supporting pane under the main one.
+   * @default 'trailing'
+   */
+  readonly placement?: 'leading' | 'trailing';
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /**
+   * Content that only means something beside `main`. Sits below it in a
+   * compact or medium window, and beside it at a fixed 360dp from the
+   * expanded window size up.
+   */
+  readonly supporting?: ReactNode;
+};
+/**
+ * Material Design's supporting pane layout: a main pane and a companion that
+ * reflows underneath it when there is no room beside it.
+ *
+ * ```tsx
+ * <SupportingPane main={<Article />} supporting={<Related />} />
+ * ```
+ *
+ * Layout only: neither pane paints a surface or a border of its own, so what
+ * goes in them is composed at the call site out of Cards, lists or plain
+ * content. The main pane comes first in the tree in both shapes, so a screen
+ * reader reaches it before the content that supports it.
+ *
+ * `style`, `ref` and `testID` land on the outer `View`, and a `style` there
+ * applies over the layout's own.
+ */
+declare function SupportingPane({ main, placement, style, supporting, ...props }: SupportingPaneProps): import("react").JSX.Element;
+//#endregion
+export { SupportingPane, type SupportingPaneProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/supporting-pane/index.js

@@ -0,0 +1,109 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useWindowSizeClass } from "../../hooks/useWindowSizeClass.js";
+import { c } from "react/compiler-runtime";
+import { StyleSheet, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/supporting-pane/index.tsx
+const SUPPORTING_PANE = 360;
+const BESIDE = /* @__PURE__ */ new Set([
+	"expanded",
+	"extraLarge",
+	"large"
+]);
+const styles = StyleSheet.create({
+	leading: { flexDirection: "row-reverse" },
+	main: {
+		flex: 1,
+		minWidth: 0
+	},
+	supporting: { width: SUPPORTING_PANE },
+	trailing: { flexDirection: "row" }
+});
+const stylesOf = themedStyles(({ spacing }) => StyleSheet.create({ root: { gap: spacing.xl } }));
+/**
+* Material Design's supporting pane layout: a main pane and a companion that
+* reflows underneath it when there is no room beside it.
+*
+* ```tsx
+* <SupportingPane main={<Article />} supporting={<Related />} />
+* ```
+*
+* Layout only: neither pane paints a surface or a border of its own, so what
+* goes in them is composed at the call site out of Cards, lists or plain
+* content. The main pane comes first in the tree in both shapes, so a screen
+* reader reaches it before the content that supports it.
+*
+* `style`, `ref` and `testID` land on the outer `View`, and a `style` there
+* applies over the layout's own.
+*/
+function SupportingPane(t0) {
+	const $ = c(18);
+	let main;
+	let props;
+	let style;
+	let supporting;
+	let t1;
+	if ($[0] !== t0) {
+		({main, placement: t1, style, supporting, ...props} = t0);
+		$[0] = t0;
+		$[1] = main;
+		$[2] = props;
+		$[3] = style;
+		$[4] = supporting;
+		$[5] = t1;
+	} else {
+		main = $[1];
+		props = $[2];
+		style = $[3];
+		supporting = $[4];
+		t1 = $[5];
+	}
+	const placement = t1 === void 0 ? "trailing" : t1;
+	const own = stylesOf(useTheme());
+	const beside = BESIDE.has(useWindowSizeClass());
+	const row = placement === "leading" ? styles.leading : styles.trailing;
+	const T0 = View;
+	const t2 = composeStyles(own.root, beside ? row : null, style);
+	const t3 = beside ? styles.main : null;
+	let t4;
+	if ($[6] !== main || $[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(View, {
+			style: t3,
+			children: main
+		});
+		$[6] = main;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	const t5 = beside ? styles.supporting : null;
+	let t6;
+	if ($[9] !== supporting || $[10] !== t5) {
+		t6 = /* @__PURE__ */ jsx(View, {
+			style: t5,
+			children: supporting
+		});
+		$[9] = supporting;
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== T0 || $[13] !== props || $[14] !== t2 || $[15] !== t4 || $[16] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(T0, {
+			...props,
+			style: t2,
+			children: [t4, t6]
+		});
+		$[12] = T0;
+		$[13] = props;
+		$[14] = t2;
+		$[15] = t4;
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	return t7;
+}
+//#endregion
+export { SupportingPane };
+
+//# sourceMappingURL=index.js.map

package/dist/components/supporting-pane/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","ViewProps","ViewStyle","StyleSheet","View","WindowSizeClass","useWindowSizeClass","useTheme","composeStyles","themedStyles","SUPPORTING_PANE","BESIDE","ReadonlySet","Set","styles","create","leading","flexDirection","main","flex","minWidth","supporting","width","trailing","stylesOf","spacing","root","gap","xl","SupportingPaneProps","Omit","placement","ref","SupportingPane","t0","$","_c","props","style","t1","undefined","own","beside","has","row","T0","t2","t3","t4","t5","t6","t7","_c"],"sources":["../../../src/components/supporting-pane/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { ViewProps, ViewStyle } from 'react-native'\n\nimport { StyleSheet, View } from 'react-native'\n\nimport type { WindowSizeClass } from '../../hooks/useWindowSizeClass'\n\nimport { useWindowSizeClass } from '../../hooks/useWindowSizeClass'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// kanso-ui's SupportingPane, Material Design's supporting pane canonical\n// layout. The supporting pane holds content that only means anything next to\n// the main pane, such as comments, related items or a tool panel, which is\n// what separates it from list-detail, where the second pane stands on its own.\n//\n// The page gives the layout two shapes. Below the expanded window size the\n// supporting pane is stacked under the main one, which is Material Design's\n// reflow strategy; the page's other compact option, a bottom sheet, is\n// Sheet's job at the call site. From expanded up, 840dp, the supporting pane\n// stands beside the main one at a fixed 360dp and the main pane takes the\n// rest. Native has no media queries, so the shape follows\n// `useWindowSizeClass()`, as ListDetail's does.\n//\n// **Which side the supporting pane takes is a choice of the side-by-side\n// shape alone.** The page puts it below the focus pane in medium windows and\n// under, and \"on the leading or trailing side of the focus pane\" from\n// expanded up, so `placement` moves the pane beside the main one and leaves\n// the stacked shape alone.\n//\n// **The main pane is first in the tree in both shapes, and a leading pane is\n// drawn before it by reversing the row.** That is web's departure too, for\n// web's reason: the page asks that the reading order match the arrangement\n// on screen, and no one order of the panes satisfies both of its rules. A\n// supporting pane written first would read before the main one when the\n// layout stacks, which is the one arrangement the page rules out, so the\n// break lands side by side instead, where a screen reader reaches the main\n// pane before the leading one drawn at its start.\n//\n// Both panes stay mounted in the same places in the tree in both shapes, so\n// a rotation or an unfolding keeps what either holds. A row runs from the\n// start edge, so under a right-to-left layout leading is the right-hand side,\n// with nothing here turning it over.\n\n// Material Design's width for the supporting pane, beside the main one.\nconst SUPPORTING_PANE = 360\n\n// The window sizes with room for both panes side by side.\nconst BESIDE: ReadonlySet<WindowSizeClass> = new Set([\n  'expanded',\n  'extraLarge',\n  'large',\n])\n\nconst styles = StyleSheet.create({\n  leading: {\n    flexDirection: 'row-reverse',\n  },\n  // The main pane beside the supporting one: whatever the fixed pane leaves,\n  // which a long unbroken line inside cannot widen past its share.\n  main: {\n    flex: 1,\n    minWidth: 0,\n  },\n  supporting: {\n    width: SUPPORTING_PANE,\n  },\n  trailing: {\n    flexDirection: 'row',\n  },\n})\n\n// The 24dp between the panes, web's `spacing.xl`, in either shape.\nconst stylesOf = themedStyles(({ spacing }) =>\n  StyleSheet.create({\n    root: {\n      gap: spacing.xl,\n    },\n  }),\n)\n\ntype SupportingPaneProps = Omit<ViewProps, 'children'> & {\n  /**\n   * The primary content. Takes whatever width the supporting pane leaves from\n   * the expanded window size up.\n   */\n  readonly main?: ReactNode\n  /**\n   * Which side of the main pane the supporting one takes from the expanded\n   * window size up. Below it the layout stacks either way, with the\n   * supporting pane under the main one.\n   * @default 'trailing'\n   */\n  readonly placement?: 'leading' | 'trailing'\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * Content that only means something beside `main`. Sits below it in a\n   * compact or medium window, and beside it at a fixed 360dp from the\n   * expanded window size up.\n   */\n  readonly supporting?: ReactNode\n}\n\n/**\n * Material Design's supporting pane layout: a main pane and a companion that\n * reflows underneath it when there is no room beside it.\n *\n * ```tsx\n * <SupportingPane main={<Article />} supporting={<Related />} />\n * ```\n *\n * Layout only: neither pane paints a surface or a border of its own, so what\n * goes in them is composed at the call site out of Cards, lists or plain\n * content. The main pane comes first in the tree in both shapes, so a screen\n * reader reaches it before the content that supports it.\n *\n * `style`, `ref` and `testID` land on the outer `View`, and a `style` there\n * applies over the layout's own.\n */\nfunction SupportingPane({\n  main,\n  placement = 'trailing',\n  style,\n  supporting,\n  ...props\n}: SupportingPaneProps) {\n  const own = stylesOf(useTheme())\n  const beside = BESIDE.has(useWindowSizeClass())\n  const row = placement === 'leading' ? styles.leading : styles.trailing\n\n  return (\n    <View\n      {...props}\n      style={composeStyles<ViewStyle>(own.root, beside ? row : null, style)}\n    >\n      <View style={beside ? styles.main : null}>{main}</View>\n      <View style={beside ? styles.supporting : null}>{supporting}</View>\n    </View>\n  )\n}\n\nexport type { SupportingPaneProps }\n\nexport { SupportingPane }\n"],"mappings":";;;;;;;AA6CA,MAAMY,kBAAkB;AAGxB,MAAMC,yBAAuC,IAAIE,IAAI;CACnD;CACA;CACA;AAAO,CACR;AAED,MAAMC,SAASX,WAAWY,OAAO;CAC/BC,SAAS,EACPC,eAAe,cACjB;CAGAC,MAAM;EACJC,MAAM;EACNC,UAAU;CACZ;CACAC,YAAY,EACVC,OAAOZ,gBACT;CACAa,UAAU,EACRN,eAAe,MACjB;AACF,CAAC;AAGD,MAAMO,WAAWf,cAAc,EAAEgB,cAC/BtB,WAAWY,OAAO,EAChBW,MAAM,EACJC,KAAKF,QAAQG,GACf,EACF,CAAC,CACH;;;;;;;;;;;;;;;;;AAwCA,SAAAK,eAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAlB;CAAA,IAAAmB;CAAA,IAAAC;CAAA,IAAAjB;CAAA,IAAAkB;CAAA,IAAAJ,EAAA,OAAAD,IAAA;EAAwB,CAAA,CAAAhB,MAAAa,WAAAQ,IAAAD,OAAAjB,YAAA,GAAAgB,SAAAH;EAMFC,EAAA,KAAAD;EAAAC,EAAA,KAAAjB;EAAAiB,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAd;EAAAc,EAAA,KAAAI;CAAA,OAAA;EAAArB,OAAAiB,EAAA;EAAAE,QAAAF,EAAA;EAAAG,QAAAH,EAAA;EAAAd,aAAAc,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAJpB,MAAAJ,YAAAQ,OAAAC,KAAAA,IAAA,aAAAD;CAKA,MAAAE,MAAYjB,SAASjB,SAAS,CAAC;CAC/B,MAAAmC,SAAe/B,OAAMgC,IAAKrC,mBAAmB,CAAC;CAC9C,MAAAsC,MAAYb,cAAc,YAAYjB,OAAME,UAAWF,OAAMS;CAG1D,MAAAsB,KAAAzC;CAEQ,MAAA0C,KAAAtC,cAAyBiC,IAAGf,MAAOgB,SAAAE,MAAA,MAAqBN,KAAK;CAEvD,MAAAS,KAAAL,SAAS5B,OAAMI,OAAf;CAA2B,IAAA8B;CAAA,IAAAb,EAAA,OAAAjB,QAAAiB,EAAA,OAAAY,IAAA;EAAxCC,KAAA,oBAAC,MAAD;GAAa,OAAAD;GAA8B7B,UAAAA;EAAtC,CAAA;EAAkDiB,EAAA,KAAAjB;EAAAiB,EAAA,KAAAY;EAAAZ,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAC1C,MAAAc,KAAAP,SAAS5B,OAAMO,aAAf;CAAiC,IAAA6B;CAAA,IAAAf,EAAA,OAAAd,cAAAc,EAAA,QAAAc,IAAA;EAA9CC,KAAA,oBAAC,MAAD;GAAa,OAAAD;GAAoC5B,UAAAA;EAA5C,CAAA;EAA8Dc,EAAA,KAAAd;EAAAc,EAAA,MAAAc;EAAAd,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,IAAAgB;CAAA,IAAAhB,EAAA,QAAAU,MAAAV,EAAA,QAAAE,SAAAF,EAAA,QAAAW,MAAAX,EAAA,QAAAa,MAAAb,EAAA,QAAAe,IAAA;EALrEC,KAAA,qBAAC,IAAD;GAAK,GACCd;GACG,OAAAS;GAFT,UAAA,CAIEE,IACAE,EALG;;EAMEf,EAAA,MAAAU;EAAAV,EAAA,MAAAE;EAAAF,EAAA,MAAAW;EAAAX,EAAA,MAAAa;EAAAb,EAAA,MAAAe;EAAAf,EAAA,MAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,OANPgB;AAMO"}

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