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

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

@@ -0,0 +1,44 @@
+import { TypeRole } from "../../typography/roles.js";
+import { Text, TextProps } from "react-native";
+import { ComponentRef, Ref } from "react";
+//#region src/components/text/index.d.ts
+type TextProps$1 = TextProps & {
+  readonly ref?: Ref<ComponentRef<typeof Text>>;
+  /**
+   * The colour role to draw in. `neutral` is the on-surface role, as it is on
+   * web; `inherit` takes the colour of the Text around it instead of setting
+   * one.
+   * @default 'neutral'
+   */
+  readonly tone?: 'error' | 'inherit' | 'muted' | 'negative' | 'neutral' | 'positive' | 'primary';
+  /**
+   * Which role of the type scale to draw in.
+   * @default 'bodyMedium'
+   */
+  readonly variant?: TypeRole;
+};
+/**
+ * A run of text in one role of Material Design's type scale and one colour
+ * role, with web's props and values.
+ *
+ * ```tsx
+ * <Text accessibilityRole="header" variant="titleLarge">
+ *   Headline
+ * </Text>
+ * ```
+ *
+ * Each role reads its family, size, line height, weight and tracking from the
+ * theme, so an override of the plain or brand family reaches every role drawn
+ * in it. The family is the token's first when the app has registered it with
+ * expo-font, and the system font otherwise. The OS text size scales every
+ * role, as `allowFontScaling` leaves it.
+ *
+ * Web's `render` and `block` have no counterpart: a native Text is a block
+ * unless it sits inside another, and a heading is an `accessibilityRole`
+ * 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;
+//#endregion
+export { Text$1 as Text, type TextProps$1 as TextProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/text/index.js

@@ -0,0 +1,78 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useTypeRole } from "../../typography/roles.js";
+import { c } from "react/compiler-runtime";
+import { StyleSheet, Text } from "react-native";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/text/index.tsx
+const stylesOf = themedStyles(({ colors }) => StyleSheet.create({
+	error: { color: colors.error },
+	inherit: {},
+	muted: { color: colors.onSurfaceVariant },
+	negative: { color: colors.negative },
+	neutral: { color: colors.onSurface },
+	positive: { color: colors.positive },
+	primary: { color: colors.primary }
+}));
+/**
+* A run of text in one role of Material Design's type scale and one colour
+* role, with web's props and values.
+*
+* ```tsx
+* <Text accessibilityRole="header" variant="titleLarge">
+*   Headline
+* </Text>
+* ```
+*
+* Each role reads its family, size, line height, weight and tracking from the
+* theme, so an override of the plain or brand family reaches every role drawn
+* in it. The family is the token's first when the app has registered it with
+* expo-font, and the system font otherwise. The OS text size scales every
+* role, as `allowFontScaling` leaves it.
+*
+* Web's `render` and `block` have no counterpart: a native Text is a block
+* unless it sits inside another, and a heading is an `accessibilityRole`
+* rather than an element. `style`, `ref` and `testID` land on React Native's
+* own Text.
+*/
+function Text$1(t0) {
+	const $ = c(9);
+	let props;
+	let style;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({style, tone: t1, variant: t2, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = style;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		props = $[1];
+		style = $[2];
+		t1 = $[3];
+		t2 = $[4];
+	}
+	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);
+	let t4;
+	if ($[5] !== T0 || $[6] !== props || $[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T0, {
+			...props,
+			style: t3
+		});
+		$[5] = T0;
+		$[6] = props;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
+}
+//#endregion
+export { Text$1 as Text };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,146 @@
+import { ValidationResult } from "../../form/index.js";
+import { FieldVariant } from "../../field/index.js";
+import { StyleProp, TextInput, TextInputProps, View, ViewStyle } from "react-native";
+import { ReactNode, Ref } from "react";
+//#region src/components/text-field/index.d.ts
+type TextFieldProps = Omit<TextInputProps, 'accessibilityHint' | 'accessibilityLabel' | 'aria-disabled' | 'aria-label' | 'children' | 'cursorColor' | 'defaultValue' | 'editable' | 'multiline' | 'numberOfLines' | 'onChange' | 'onChangeText' | 'placeholder' | 'placeholderTextColor' | 'readOnly' | 'selectionColor' | 'style' | 'underlineColorAndroid' | 'value'> & {
+  /**
+   * 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.
+   * @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 English
+   * sentence, "Up to 20 characters", 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<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 field 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 value: 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;
+  /**
+   * Renders the value in the mono face with tabular figures, for amounts and
+   * other numbers meant to be compared down a column.
+   * @default false
+   */
+  readonly numeric?: boolean;
+  /** Called with the new value as it is edited. */
+  readonly onChange?: (value: string) => void;
+  /**
+   * Text before the value on its line, in the muted role, shown while the
+   * field is focused or holds a value.
+   */
+  readonly prefix?: ReactNode;
+  readonly ref?: Ref<View>;
+  /** Positions and sizes the field as a whole. */
+  readonly style?: StyleProp<ViewStyle>;
+  /**
+   * Text after the value on its line, in the muted role, shown while the
+   * field is focused or holds a value.
+   */
+  readonly suffix?: ReactNode;
+  /**
+   * An icon at the end of the box, after the value: 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 single-line input, the text fields page's filled or outlined
+ * field. Pass `value` with `onChange` to control it, or `defaultValue` to let
+ * it keep its own; `onChange` is handed the string.
+ *
+ * The page's configurations are props: `leadingIcon` and `trailingIcon` at
+ * the box's ends, `prefix` and `suffix` on the value's line, and
+ * `characterCount` opposite the supporting text, counting against
+ * `maxLength`. React Native's own `TextInput` props, the keyboard and the
+ * return key among them, reach the control; `style` and `ref` are the field
+ * as a whole, and `inputRef` the control.
+ *
+ * ```tsx
+ * <TextField label="Label" description="Supporting line" />
+ * ```
+ */
+declare function TextField({ characterCount, characterLimitLabel, defaultValue, description, error, floatingLabel, inputRef, isDisabled, isReadOnly, isRequired, label, leadingIcon, name, numeric, onBlur, onChange, onFocus, prefix, ref, style, suffix, trailingIcon, validate, value, variant, ...props }: TextFieldProps): import("react").JSX.Element;
+//#endregion
+export { TextField, type TextFieldProps };
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ReactNode","Ref","StyleProp","TextInput","TextInputProps","ViewStyle","useId","useImperativeHandle","useRef","useState","View","FieldVariant","ValidationResult","describedBy","FieldBox","FieldInput","FieldMessage","useFieldFocus","useFieldValidation","TextFieldProps","Omit","characterCount","characterLimitLabel","defaultValue","description","error","floatingLabel","inputRef","isDisabled","isReadOnly","isRequired","label","leadingIcon","name","numeric","onChange","value","prefix","ref","style","suffix","trailingIcon","validate","variant","blurThen","onBlur","then","event","editInto","setOwn","onEdit","text","TextField","t0","$","_c","t1","t2","t3","t4","t5","t6","t7","onFocus","t8","props","undefined","id","control","own","current","t9","t10","isEmpty","submitted","validation","t11","t12","focus","shownError","t13","t14","Symbol","for","T0","T1","t15","focused","t16","t17","T2","t18","handlers","t19","maxLength","t20","t21","t22","t23","t24","length","t25","_c"],"sources":["../../../src/components/text-field/index.tsx"],"sourcesContent":["import type { 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'\n\n// kanso-ui's TextField, drawn through the field chrome in src/field: the box\n// with its label and icons, the control on the value's line with its prefix\n// and suffix, and the supporting line under it with the count. What the\n// chrome draws, and how it draws it, is written there.\n//\n// The value is the field's own or the call site's. Given `value` it shows\n// that and reports edits through `onChange`; given `defaultValue`, or\n// nothing, it keeps what is typed itself. `onChange` is handed the string, as\n// web's is, rather than React Native's event.\n//\n// **Web's `isInvalid` is not a prop here either.** The error is what puts the\n// field in its error state, the message and the colours and the invalid\n// state a screen reader reads following from it, so a field cannot be\n// invalid with nothing to say why. The error shown is `error`, or what the\n// field's `validate` and the `Form` around it say, which src/form decides.\n\ntype TextFieldProps = 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  | 'selectionColor'\n  | 'style'\n  | 'underlineColorAndroid'\n  | 'value'\n> & {\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 device's digits.\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 English\n   * sentence, \"Up to 20 characters\", 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<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 field 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 value: 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  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column.\n   * @default false\n   */\n  readonly numeric?: boolean\n  /** Called with the new value as it is edited. */\n  readonly onChange?: (value: string) => void\n  /**\n   * Text before the value on its line, in the muted role, shown while the\n   * field is focused or holds a value.\n   */\n  readonly prefix?: ReactNode\n  readonly ref?: Ref<View>\n  /** Positions and sizes the field as a whole. */\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * Text after the value on its line, in the muted role, shown while the\n   * field is focused or holds a value.\n   */\n  readonly suffix?: ReactNode\n  /**\n   * An icon at the end of the box, after the value: 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 single-line input, the text fields page's filled or outlined\n * field. Pass `value` with `onChange` to control it, or `defaultValue` to let\n * it keep its own; `onChange` is handed the string.\n *\n * The page's configurations are props: `leadingIcon` and `trailingIcon` at\n * the box's ends, `prefix` and `suffix` on the value's line, and\n * `characterCount` opposite the supporting text, counting against\n * `maxLength`. React Native's own `TextInput` props, the keyboard and the\n * return key among them, reach the control; `style` and `ref` are the field\n * as a whole, and `inputRef` the control.\n *\n * ```tsx\n * <TextField label=\"Label\" description=\"Supporting line\" />\n * ```\n */\nfunction TextField({\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  numeric = false,\n  onBlur,\n  onChange,\n  onFocus,\n  prefix,\n  ref,\n  style,\n  suffix,\n  trailingIcon,\n  validate,\n  value,\n  variant = 'filled',\n  ...props\n}: TextFieldProps) {\n  const id = useId()\n  const control = useRef<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\n  useImperativeHandle<null | TextInput, null | TextInput>(\n    inputRef,\n    () => control.current,\n    [],\n  )\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          described={describedBy(id, {\n            characterLimitLabel,\n            description,\n            error: shownError,\n            maxLength: props.maxLength,\n          })}\n          editable={!isDisabled && !isReadOnly}\n          numeric={numeric}\n          onChangeText={editInto(setOwn, onChange, validation.onEdit)}\n          prefix={prefix}\n          ref={control}\n          suffix={suffix}\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 { TextField }\nexport type { TextFieldProps }\n"],"mappings":"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"}

package/dist/control/index.js

@@ -0,0 +1,117 @@
+import { useTheme } from "../theme/scope.js";
+import { composeStyles } from "../theme/styles.js";
+import { useTypeRole } from "../typography/roles.js";
+import { controlStylesOf } from "./styles.js";
+import { c } from "react/compiler-runtime";
+import { Platform, Text, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+//#region src/control/index.tsx
+const HIDDEN = {
+	accessibilityElementsHidden: true,
+	importantForAccessibility: "no-hide-descendants"
+};
+/**
+* The label beside a selection control, set in body large. Renders nothing
+* without children, which is what a control labelled some other way, by
+* `aria-label` or a group's label, needs.
+*/
+function ControlLabel(t0) {
+	const $ = c(4);
+	const { children, isDisabled: t1 } = t0;
+	const isDisabled = t1 === void 0 ? false : t1;
+	const theme = useTheme();
+	const own = controlStylesOf(theme);
+	const role = useTypeRole("bodyLarge");
+	if (children === void 0) return null;
+	const T0 = Text;
+	const t2 = composeStyles(role, own.label, isDisabled ? own.labelDisabled : void 0);
+	let t3;
+	if ($[0] !== T0 || $[1] !== children || $[2] !== t2) {
+		t3 = /* @__PURE__ */ jsx(T0, {
+			style: t2,
+			children
+		});
+		$[0] = T0;
+		$[1] = children;
+		$[2] = t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	return t3;
+}
+/**
+* The line under a selection control's label: the error while there is one,
+* otherwise the description, so the two never stack. Renders nothing when
+* there is neither. Hand the control `describedBy(id, message)` with the same
+* `id`, so a screen reader reads the line with the control.
+*/
+function ControlMessage(t0) {
+	const $ = c(13);
+	const { description, error, id, style } = t0;
+	const theme = useTheme();
+	const own = controlStylesOf(theme);
+	const role = useTypeRole("bodySmall");
+	let t1;
+	if ($[0] !== description || $[1] !== error) {
+		t1 = messageOf(description, error);
+		$[0] = description;
+		$[1] = error;
+		$[2] = t1;
+	} else t1 = $[2];
+	const message = t1;
+	if (message === void 0) return null;
+	const T0 = View;
+	const t2 = Platform.OS === "web" ? void 0 : HIDDEN;
+	const t3 = composeStyles(own.messages, style);
+	const T1 = Text;
+	const t4 = composeStyles(role, own.message, error === void 0 ? void 0 : own.messageError);
+	let t5;
+	if ($[3] !== T1 || $[4] !== id || $[5] !== message || $[6] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T1, {
+			id,
+			style: t4,
+			children: message
+		});
+		$[3] = T1;
+		$[4] = id;
+		$[5] = message;
+		$[6] = t4;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== T0 || $[9] !== t2 || $[10] !== t3 || $[11] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			...t2,
+			style: t3,
+			children: t5
+		});
+		$[8] = T0;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	return t6;
+}
+/**
+* How a control is described by the line under it, to spread onto the
+* control. On iOS and Android the message is the control's accessibility
+* hint, which VoiceOver and TalkBack read after its name and state, and
+* `ControlMessage` hides the line itself from them so it is not read twice.
+* React Native Web drops the hint, so there the control points at the line
+* with `aria-describedby`, as web's controls do.
+*/
+function describedBy(id, message) {
+	return Platform.OS === "web" ? { "aria-describedby": message === void 0 ? void 0 : id } : { accessibilityHint: message };
+}
+/**
+* What the line under a control says: the error while there is one,
+* otherwise the description, and nothing for an empty string.
+*/
+function messageOf(description, error) {
+	const message = error ?? description;
+	return message === "" ? void 0 : message;
+}
+//#endregion
+export { ControlLabel, ControlMessage, describedBy, messageOf };
+
+//# sourceMappingURL=index.js.map