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

package/dist/components/checkbox-group/index.js

@@ -0,0 +1,306 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useTypeRole } from "../../typography/roles.js";
+import { withOpacity } from "../../theme/color.js";
+import { useFieldValidation, useInsideForm } from "../../form/index.js";
+import { messageOf } from "../../control/index.js";
+import { CheckboxGroupContext, createMembers } from "../../control/group.js";
+import { useErrorAnnouncement } from "../../field/index.js";
+import { c } from "react/compiler-runtime";
+import { Platform, StyleSheet, Text, View, useWindowDimensions } from "react-native";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCheckboxGroupState } from "react-stately/useCheckboxGroupState";
+//#region src/components/checkbox-group/index.tsx
+const REQUIRED_MARK = "*";
+const ATOMIC = { "aria-atomic": true };
+const stylesOf = themedStyles(({ colors, spacing, stateLayerOpacity }) => StyleSheet.create({
+	items: { flexDirection: "column" },
+	label: { color: colors.onSurfaceVariant },
+	labelDisabled: { color: withOpacity(colors.onSurface, stateLayerOpacity.disabledContent) },
+	labelError: { color: colors.error },
+	message: { color: colors.onSurfaceVariant },
+	messageError: { color: colors.error },
+	messageLine: { marginTop: spacing.xs },
+	messageLineCollapsed: {
+		marginTop: 0,
+		position: "absolute"
+	},
+	outOfFlow: { position: "absolute" },
+	root: {
+		flexDirection: "column",
+		rowGap: spacing.xs
+	}
+}));
+/**
+* A labelled set of checkboxes with one value between them. The value is
+* React Stately's, as web's is React Aria's: pass `value` with `onChange` to
+* control it, or `defaultValue` to let the group keep its own, and each
+* `Checkbox` inside names the entry it stands for with `value`. Disabled,
+* read-only and the error state reach every checkbox from here.
+*
+* ```tsx
+* <CheckboxGroup defaultValue={['first']} label="Label">
+*   <Checkbox value="first">First item</Checkbox>
+*   <Checkbox value="second">Second item</Checkbox>
+* </CheckboxGroup>
+* ```
+*
+* A screen reader hears it as a group named by its label. On the web the
+* line under it describes the group, as web's does; on iOS and Android it is
+* read after the checkboxes, where it sits, and an error is announced as it
+* arrives. `style`, `ref` and `testID` land on the group as a whole, which is
+* the element a layout positions.
+*/
+function CheckboxGroup(t0) {
+	const $ = c(61);
+	let children;
+	let defaultValue;
+	let description;
+	let error;
+	let label;
+	let name;
+	let onChange;
+	let props;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	let validate;
+	let value;
+	if ($[0] !== t0) {
+		({children, defaultValue, description, error, isDisabled: t1, isReadOnly: t2, isRequired: t3, label, name, onChange, style, validate, value, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = defaultValue;
+		$[3] = description;
+		$[4] = error;
+		$[5] = label;
+		$[6] = name;
+		$[7] = onChange;
+		$[8] = props;
+		$[9] = style;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = validate;
+		$[14] = value;
+	} else {
+		children = $[1];
+		defaultValue = $[2];
+		description = $[3];
+		error = $[4];
+		label = $[5];
+		name = $[6];
+		onChange = $[7];
+		props = $[8];
+		style = $[9];
+		t1 = $[10];
+		t2 = $[11];
+		t3 = $[12];
+		validate = $[13];
+		value = $[14];
+	}
+	const isDisabled = t1 === void 0 ? false : t1;
+	const isReadOnly = t2 === void 0 ? false : t2;
+	const isRequired = t3 === void 0 ? false : t3;
+	const theme = useTheme();
+	let t4;
+	if ($[15] !== defaultValue) {
+		t4 = copyOf(defaultValue);
+		$[15] = defaultValue;
+		$[16] = t4;
+	} else t4 = $[16];
+	let t5;
+	if ($[17] !== value) {
+		t5 = copyOf(value);
+		$[17] = value;
+		$[18] = t5;
+	} else t5 = $[18];
+	let t6;
+	if ($[19] !== isDisabled || $[20] !== isReadOnly || $[21] !== onChange || $[22] !== t4 || $[23] !== t5) {
+		t6 = {
+			defaultValue: t4,
+			isDisabled,
+			isReadOnly,
+			onChange,
+			value: t5
+		};
+		$[19] = isDisabled;
+		$[20] = isReadOnly;
+		$[21] = onChange;
+		$[22] = t4;
+		$[23] = t5;
+		$[24] = t6;
+	} else t6 = $[24];
+	const state = useCheckboxGroupState(t6);
+	const [members] = useState(createMembers);
+	const t7 = state.value.length === 0;
+	let t8;
+	if ($[25] !== error || $[26] !== isDisabled || $[27] !== isReadOnly || $[28] !== isRequired || $[29] !== members || $[30] !== name || $[31] !== state.value || $[32] !== t7 || $[33] !== validate) {
+		t8 = {
+			control: members,
+			error,
+			isDisabled,
+			isEmpty: t7,
+			isReadOnly,
+			isRequired,
+			name,
+			submitted: void 0,
+			validate,
+			value: state.value
+		};
+		$[25] = error;
+		$[26] = isDisabled;
+		$[27] = isReadOnly;
+		$[28] = isRequired;
+		$[29] = members;
+		$[30] = name;
+		$[31] = state.value;
+		$[32] = t7;
+		$[33] = validate;
+		$[34] = t8;
+	} else t8 = $[34];
+	const validation = useFieldValidation(t8);
+	const labelId = useId();
+	const messageId = useId();
+	const labelRole = useTypeRole("labelLarge");
+	const messageRole = useTypeRole("bodySmall");
+	const insideForm = useInsideForm();
+	const { fontScale } = useWindowDimensions();
+	const own = stylesOf(theme);
+	const shown = validation.error;
+	const invalid = shown !== void 0;
+	const message = messageOf(description, shown);
+	const holdsLine = insideForm || message !== void 0;
+	let t9;
+	if ($[35] !== invalid || $[36] !== members || $[37] !== state || $[38] !== validation) {
+		t9 = contextOf(state, members, validation, invalid);
+		$[35] = invalid;
+		$[36] = members;
+		$[37] = state;
+		$[38] = validation;
+		$[39] = t9;
+	} else t9 = $[39];
+	const context = t9;
+	const messageStyle = composeStyles(messageRole, own.message, invalid ? own.messageError : void 0);
+	useErrorAnnouncement(shown);
+	const t10 = lineOf(messageId, message);
+	const t11 = composeStyles(own.root, style);
+	let t12;
+	if ($[40] !== children || $[41] !== context) {
+		t12 = /* @__PURE__ */ jsx(CheckboxGroupContext, {
+			value: context,
+			children
+		});
+		$[40] = children;
+		$[41] = context;
+		$[42] = t12;
+	} else t12 = $[42];
+	const T0 = View;
+	const t13 = composeStyles(own.messageLine, holdsLine ? minHeightOf(theme.typography.bodySmallLineHeight * fontScale) : own.messageLineCollapsed);
+	const t14 = invalid && shown !== "" ? void 0 : own.outOfFlow;
+	let t15;
+	if ($[43] !== invalid || $[44] !== messageId || $[45] !== messageStyle || $[46] !== shown) {
+		t15 = invalid && shown !== "" ? /* @__PURE__ */ jsx(Text, {
+			id: messageId,
+			style: messageStyle,
+			children: shown
+		}) : null;
+		$[43] = invalid;
+		$[44] = messageId;
+		$[45] = messageStyle;
+		$[46] = shown;
+		$[47] = t15;
+	} else t15 = $[47];
+	let t16;
+	if ($[48] !== t14 || $[49] !== t15) {
+		t16 = /* @__PURE__ */ jsx(View, {
+			"aria-live": "polite",
+			...Platform.OS === "web" ? ATOMIC : void 0,
+			style: t14,
+			children: t15
+		});
+		$[48] = t14;
+		$[49] = t15;
+		$[50] = t16;
+	} else t16 = $[50];
+	let t17;
+	if ($[51] !== description || $[52] !== invalid || $[53] !== messageId || $[54] !== messageStyle) {
+		t17 = invalid || description === void 0 ? null : /* @__PURE__ */ jsx(Text, {
+			id: messageId,
+			style: messageStyle,
+			children: description
+		});
+		$[51] = description;
+		$[52] = invalid;
+		$[53] = messageId;
+		$[54] = messageStyle;
+		$[55] = t17;
+	} else t17 = $[55];
+	let t18;
+	if ($[56] !== T0 || $[57] !== t13 || $[58] !== t16 || $[59] !== t17) {
+		t18 = /* @__PURE__ */ jsxs(T0, {
+			style: t13,
+			children: [t16, t17]
+		});
+		$[56] = T0;
+		$[57] = t13;
+		$[58] = t16;
+		$[59] = t17;
+		$[60] = t18;
+	} else t18 = $[60];
+	return /* @__PURE__ */ jsxs(View, {
+		...props,
+		"aria-labelledby": labelId,
+		role: "group",
+		...t10,
+		style: t11,
+		children: [
+			/* @__PURE__ */ jsxs(Text, {
+				id: labelId,
+				style: composeStyles(labelRole, own.label, isDisabled ? own.labelDisabled : void 0, invalid ? own.labelError : void 0),
+				children: [label, isRequired ? REQUIRED_MARK : null]
+			}),
+			/* @__PURE__ */ jsx(View, {
+				style: own.items,
+				children: t12
+			}),
+			t18
+		]
+	});
+}
+function contextOf(state, members, { onBlur, onEdit }, isInvalid) {
+	return {
+		isDisabled: state.isDisabled,
+		isInvalid,
+		isReadOnly: state.isReadOnly,
+		isSelected: (entry) => state.isSelected(entry),
+		members,
+		set: (entry, isSelected) => {
+			if (isSelected) state.addValue(entry);
+			else state.removeValue(entry);
+			onEdit();
+			onBlur();
+		}
+	};
+}
+function copyOf(entries) {
+	return entries === void 0 ? void 0 : [...entries];
+}
+/**
+* How the group is described by the line under it. On the web it points at
+* the line with `aria-describedby`, as web's group does. iOS and Android
+* focus the checkboxes rather than the group, so there the line is left
+* where a screen reader reaches it in order, after the last checkbox.
+*/
+function lineOf(id, message) {
+	return Platform.OS === "web" && message !== void 0 ? { "aria-describedby": id } : void 0;
+}
+function minHeightOf(minHeight) {
+	return { minHeight };
+}
+//#endregion
+export { CheckboxGroup };
+
+//# sourceMappingURL=index.js.map

package/dist/components/checkbox-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","StyleProp","TextStyle","ViewProps","ViewStyle","CheckboxGroupState","useId","useState","Text","NativeText","Platform","StyleSheet","useWindowDimensions","View","useCheckboxGroupState","CheckboxGroupContextValue","ValidationResult","messageOf","CheckboxGroupContext","createMembers","useErrorAnnouncement","useFieldValidation","useInsideForm","withOpacity","useTheme","composeStyles","themedStyles","useTypeRole","CheckboxGroupProps","Omit","children","defaultValue","description","error","isDisabled","isReadOnly","isRequired","label","name","onChange","value","ref","style","validate","REQUIRED_MARK","ATOMIC","const","stylesOf","colors","spacing","stateLayerOpacity","create","items","flexDirection","color","onSurfaceVariant","labelDisabled","onSurface","disabledContent","labelError","message","messageError","messageLine","marginTop","xs","messageLineCollapsed","position","outOfFlow","root","rowGap","CheckboxGroup","t0","$","_c","props","t1","t2","t3","undefined","theme","t4","copyOf","t5","t6","state","members","t7","length","t8","control","isEmpty","submitted","validation","labelId","messageId","labelRole","messageRole","insideForm","fontScale","own","shown","invalid","holdsLine","t9","contextOf","context","messageStyle","t10","lineOf","t11","t12","T0","t13","minHeightOf","typography","bodySmallLineHeight","t14","t15","t16","OS","t17","t18","onBlur","onEdit","isInvalid","isSelected","entry","set","addValue","removeValue","entries","id","minHeight","_c","NativeText"],"sources":["../../../src/components/checkbox-group/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native'\nimport type { CheckboxGroupState } from 'react-stately/useCheckboxGroupState'\n\nimport { useId, useState } from 'react'\nimport {\n  Text as NativeText,\n  Platform,\n  StyleSheet,\n  useWindowDimensions,\n  View,\n} from 'react-native'\nimport { useCheckboxGroupState } from 'react-stately/useCheckboxGroupState'\n\nimport type { CheckboxGroupContextValue } from '../../control/group'\nimport type { ValidationResult } from '../../form'\n\nimport { messageOf } from '../../control'\nimport { CheckboxGroupContext, createMembers } from '../../control/group'\nimport { useErrorAnnouncement } from '../../field'\nimport { useFieldValidation, useInsideForm } from '../../form'\nimport { withOpacity } from '../../theme/color'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useTypeRole } from '../../typography/roles'\n\n// kanso-ui's CheckboxGroup: a labelled set of checkboxes sharing one value.\n// The checkbox page draws the boxes; the group is what the pattern asks for\n// around them, a group named by its label, described by the line under it\n// and invalid as a whole, and its label and that line are the field chrome's,\n// so a group reads like the fields beside it.\n//\n// The group is a column: its label in label large, the checkboxes, and the\n// line under them, 4dp apart, with the line a further 4dp down, as web's\n// field chrome sets them out and RadioGroup does here. The label is on\n// surface variant, error while the group has one, and on surface at the\n// disabled opacity while disabled, with the required mark a field's label\n// carries. The line is not inset, since a group has no box to line it up\n// with.\n//\n// The value is React Stately's, as web's is React Aria's, and the group hands\n// it to its checkboxes through src/control/group, as RadioGroup hands its\n// buttons theirs. Its validation is src/form's, as a field's is: `isRequired`,\n// `validate`, and the form's errors under the group's `name`. A native Form\n// holding it back focuses its first checkbox.\n//\n// Inside a Form the line is held from the start, as web's is, so an error\n// arriving on submit moves nothing under the group. Outside one it takes\n// space only while there is something in it, and stays mounted for the live\n// region inside it, which has to be in place before the error it announces.\n\ntype CheckboxGroupProps = Omit<ViewProps, 'children' | 'style'> & {\n  /** The checkboxes, each with a `value` of its own. */\n  readonly children?: ReactNode\n  /** The entries selected at first, when the group keeps its own value. */\n  readonly defaultValue?: readonly string[]\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  readonly description?: string\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state: the message, the label's colour and\n   * every box's error colours follow from it.\n   *\n   * Outside a `Form` the line under the group arrives with the message, so\n   * the group grows when this does and moves what is under it. A `Form`\n   * holds that space from the start; so does a permanent `description`.\n   */\n  readonly error?: string\n  /**\n   * Draws every checkbox disabled, and takes no presses.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Shows the selection without letting a press change it.\n   * @default false\n   */\n  readonly isReadOnly?: boolean\n  /**\n   * Marks the group's label, and has a `native` form hold submission back\n   * while nothing is selected.\n   * @default false\n   */\n  readonly isRequired?: boolean\n  /**\n   * What the group is for. Required rather than optional: a group of\n   * checkboxes with no name is a set of boxes a screen reader cannot\n   * introduce.\n   */\n  readonly label: string\n  /**\n   * The name the form around the group knows it by, which its\n   * `validationErrors` are keyed on. A form hands `onSubmit` one string per\n   * name, so a group's selection is not among those values: read it through\n   * `onChange`, or hold it with `value`.\n   */\n  readonly name?: string\n  /** Called with the newly selected entries whenever a press changes them. */\n  readonly onChange?: (value: string[]) => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * Checks the selection, returning its problem in words, or `true`, `null`\n   * or `undefined` when there is none. Shown as it changes, or under a\n   * `native` form once a submission is tried.\n   */\n  readonly validate?: (value: readonly string[]) => ValidationResult\n  /**\n   * The selected entries, for a call site holding the value itself with\n   * `onChange`.\n   */\n  readonly value?: readonly string[]\n}\n\n// What marks a required group's label, as a field's label marks one.\nconst REQUIRED_MARK = '*'\n\n// What has a live region on the web read its whole content again whenever\n// any of it changes, as the field's line does.\nconst ATOMIC = { 'aria-atomic': true } as const\n\nconst stylesOf = themedStyles(({ colors, spacing, stateLayerOpacity }) =>\n  StyleSheet.create({\n    // The group's checkboxes, one under another.\n    items: {\n      flexDirection: 'column',\n    },\n    label: {\n      color: colors.onSurfaceVariant,\n    },\n    labelDisabled: {\n      color: withOpacity(colors.onSurface, stateLayerOpacity.disabledContent),\n    },\n    labelError: {\n      color: colors.error,\n    },\n    message: {\n      color: colors.onSurfaceVariant,\n    },\n    messageError: {\n      color: colors.error,\n    },\n    messageLine: {\n      marginTop: spacing.xs,\n    },\n    // The line with nothing to show: out of the flow, so the group ends at\n    // its last checkbox, and still there for the live region inside it.\n    messageLineCollapsed: {\n      marginTop: 0,\n      position: 'absolute',\n    },\n    // The live region with nothing in it, which takes no place in the line.\n    outOfFlow: {\n      position: 'absolute',\n    },\n    root: {\n      flexDirection: 'column',\n      rowGap: spacing.xs,\n    },\n  }),\n)\n\n/**\n * A labelled set of checkboxes with one value between them. The value is\n * React Stately's, as web's is React Aria's: pass `value` with `onChange` to\n * control it, or `defaultValue` to let the group keep its own, and each\n * `Checkbox` inside names the entry it stands for with `value`. Disabled,\n * read-only and the error state reach every checkbox from here.\n *\n * ```tsx\n * <CheckboxGroup defaultValue={['first']} label=\"Label\">\n *   <Checkbox value=\"first\">First item</Checkbox>\n *   <Checkbox value=\"second\">Second item</Checkbox>\n * </CheckboxGroup>\n * ```\n *\n * A screen reader hears it as a group named by its label. On the web the\n * line under it describes the group, as web's does; on iOS and Android it is\n * read after the checkboxes, where it sits, and an error is announced as it\n * arrives. `style`, `ref` and `testID` land on the group as a whole, which is\n * the element a layout positions.\n */\nfunction CheckboxGroup({\n  children,\n  defaultValue,\n  description,\n  error,\n  isDisabled = false,\n  isReadOnly = false,\n  isRequired = false,\n  label,\n  name,\n  onChange,\n  style,\n  validate,\n  value,\n  ...props\n}: CheckboxGroupProps) {\n  const theme = useTheme()\n  const state = useCheckboxGroupState({\n    defaultValue: copyOf(defaultValue),\n    isDisabled,\n    isReadOnly,\n    onChange,\n    value: copyOf(value),\n  })\n  const [members] = useState(createMembers)\n  const validation = useFieldValidation({\n    control: members,\n    error,\n    isDisabled,\n    isEmpty: state.value.length === 0,\n    isReadOnly,\n    isRequired,\n    name,\n    submitted: undefined,\n    validate,\n    value: state.value,\n  })\n  const labelId = useId()\n  const messageId = useId()\n  const labelRole = useTypeRole('labelLarge')\n  const messageRole = useTypeRole('bodySmall')\n  const insideForm = useInsideForm()\n  const { fontScale } = useWindowDimensions()\n\n  const own = stylesOf(theme)\n  const shown = validation.error\n  const invalid = shown !== undefined\n  const message = messageOf(description, shown)\n  const holdsLine = insideForm || message !== undefined\n  const context = contextOf(state, members, validation, invalid)\n  const messageStyle = composeStyles<TextStyle>(\n    messageRole,\n    own.message,\n    invalid ? own.messageError : undefined,\n  )\n\n  useErrorAnnouncement(shown)\n\n  return (\n    <View\n      {...props}\n      aria-labelledby={labelId}\n      role=\"group\"\n      {...lineOf(messageId, message)}\n      style={composeStyles<ViewStyle>(own.root, style)}\n    >\n      <NativeText\n        id={labelId}\n        style={composeStyles<TextStyle>(\n          labelRole,\n          own.label,\n          isDisabled ? own.labelDisabled : undefined,\n          invalid ? own.labelError : undefined,\n        )}\n      >\n        {label}\n        {isRequired ? REQUIRED_MARK : null}\n      </NativeText>\n      <View style={own.items}>\n        <CheckboxGroupContext value={context}>{children}</CheckboxGroupContext>\n      </View>\n      <View\n        style={composeStyles<ViewStyle>(\n          own.messageLine,\n          holdsLine\n            ? minHeightOf(theme.typography.bodySmallLineHeight * fontScale)\n            : own.messageLineCollapsed,\n        )}\n      >\n        <View\n          aria-live=\"polite\"\n          {...(Platform.OS === 'web' ? ATOMIC : undefined)}\n          style={invalid && shown !== '' ? undefined : own.outOfFlow}\n        >\n          {invalid && shown !== '' ? (\n            <NativeText id={messageId} style={messageStyle}>\n              {shown}\n            </NativeText>\n          ) : null}\n        </View>\n        {invalid || description === undefined ? null : (\n          <NativeText id={messageId} style={messageStyle}>\n            {description}\n          </NativeText>\n        )}\n      </View>\n    </View>\n  )\n}\n\n// What the group tells its checkboxes. A press selects or clears an entry\n// and then counts as the edit and the commit both, since a checkbox changes\n// the value at once rather than as a control loses focus, which is what a\n// native form shows an error after.\nfunction contextOf(\n  state: CheckboxGroupState,\n  members: CheckboxGroupContextValue['members'],\n  {\n    onBlur,\n    onEdit,\n  }: { readonly onBlur: () => void; readonly onEdit: () => void },\n  isInvalid: boolean,\n): CheckboxGroupContextValue {\n  return {\n    isDisabled: state.isDisabled,\n    isInvalid,\n    isReadOnly: state.isReadOnly,\n    isSelected: (entry) => state.isSelected(entry),\n    members,\n    set: (entry, isSelected) => {\n      if (isSelected) {\n        state.addValue(entry)\n      } else {\n        state.removeValue(entry)\n      }\n      onEdit()\n      onBlur()\n    },\n  }\n}\n\n// A list the call site may hold as read-only, as the mutable copy React\n// Stately takes.\nfunction copyOf(entries: readonly string[] | undefined) {\n  return entries === undefined ? undefined : [...entries]\n}\n\n/**\n * How the group is described by the line under it. On the web it points at\n * the line with `aria-describedby`, as web's group does. iOS and Android\n * focus the checkboxes rather than the group, so there the line is left\n * where a screen reader reaches it in order, after the last checkbox.\n */\nfunction lineOf(id: string, message: string | undefined) {\n  return Platform.OS === 'web' && message !== undefined\n    ? { 'aria-describedby': id }\n    : undefined\n}\n\nfunction minHeightOf(minHeight: number): ViewStyle {\n  return { minHeight }\n}\n\nexport { CheckboxGroup }\nexport type { CheckboxGroupProps }\n"],"mappings":"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"}

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

@@ -0,0 +1,25 @@
+import { Text, TextProps } from "react-native";
+import { ComponentRef, Ref } from "react";
+//#region src/components/code/index.d.ts
+type CodeProps = TextProps & {
+  readonly ref?: Ref<ComponentRef<typeof Text>>;
+};
+/**
+ * A fragment of code, a path or an identifier set in the mono face, inside a
+ * run of text.
+ *
+ * ```tsx
+ * <Text variant="bodyLarge">
+ *   A sentence naming <Code>identifier</Code>
+ * </Text>
+ * ```
+ *
+ * It takes its colour from the Text around it and 0.875 of its size, so the
+ * same Code serves a heading and a footnote. `style`, `ref` and `testID` land
+ * on React Native's own Text, and a `style` there applies over the face and
+ * the size.
+ */
+declare function Code({ children, style, ...props }: CodeProps): import("react").JSX.Element;
+//#endregion
+export { Code, type CodeProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/code/index.js

@@ -0,0 +1,87 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useFontFamily } from "../../typography/fonts.js";
+import { familyStyle, useTypeRole } from "../../typography/roles.js";
+import { TextSizeContext, useTextSize } from "../../typography/size.js";
+import { c } from "react/compiler-runtime";
+import { StyleSheet, Text } from "react-native";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/code/index.tsx
+const SHARE = .875;
+const stylesOf = themedStyles(({ colors }) => StyleSheet.create({ outside: { color: colors.onSurface } }));
+/**
+* A fragment of code, a path or an identifier set in the mono face, inside a
+* run of text.
+*
+* ```tsx
+* <Text variant="bodyLarge">
+*   A sentence naming <Code>identifier</Code>
+* </Text>
+* ```
+*
+* It takes its colour from the Text around it and 0.875 of its size, so the
+* same Code serves a heading and a footnote. `style`, `ref` and `testID` land
+* on React Native's own Text, and a `style` there applies over the face and
+* the size.
+*/
+function Code(t0) {
+	const $ = c(18);
+	let children;
+	let props;
+	let style;
+	if ($[0] !== t0) {
+		({children, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+		$[3] = style;
+	} else {
+		children = $[1];
+		props = $[2];
+		style = $[3];
+	}
+	const theme = useTheme();
+	const around = useTextSize();
+	const body = useTypeRole("bodyMedium");
+	const mono = useFontFamily(theme.typography.fontFamilyMono);
+	const outside = around === void 0;
+	const size = (around ?? theme.typography.bodyMediumSize) * SHARE;
+	let t1;
+	if ($[4] !== body || $[5] !== mono || $[6] !== outside || $[7] !== size || $[8] !== style || $[9] !== theme) {
+		t1 = composeStyles(outside ? body : null, outside ? stylesOf(theme).outside : null, familyStyle(mono), { fontSize: size }, style);
+		$[4] = body;
+		$[5] = mono;
+		$[6] = outside;
+		$[7] = size;
+		$[8] = style;
+		$[9] = theme;
+		$[10] = t1;
+	} else t1 = $[10];
+	let t2;
+	if ($[11] !== children || $[12] !== size) {
+		t2 = /* @__PURE__ */ jsx(TextSizeContext, {
+			value: size,
+			children
+		});
+		$[11] = children;
+		$[12] = size;
+		$[13] = t2;
+	} else t2 = $[13];
+	let t3;
+	if ($[14] !== props || $[15] !== t1 || $[16] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Text, {
+			...props,
+			style: t1,
+			children: t2
+		});
+		$[14] = props;
+		$[15] = t1;
+		$[16] = t2;
+		$[17] = t3;
+	} else t3 = $[17];
+	return t3;
+}
+//#endregion
+export { Code };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","Ref","TextProps","NativeTextProps","TextStyle","Text","NativeText","StyleSheet","useTheme","composeStyles","themedStyles","useFontFamily","familyStyle","useTypeRole","TextSizeContext","useTextSize","SHARE","stylesOf","colors","create","outside","color","onSurface","CodeProps","ref","Code","t0","$","_c","children","props","style","theme","around","body","mono","typography","fontFamilyMono","undefined","size","bodyMediumSize","t1","fontSize","t2","t3","_c","NativeText"],"sources":["../../../src/components/code/index.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type { TextProps as NativeTextProps, TextStyle } from 'react-native'\n\nimport { Text as NativeText, StyleSheet } from 'react-native'\n\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useFontFamily } from '../../typography/fonts'\nimport { familyStyle, useTypeRole } from '../../typography/roles'\nimport { TextSizeContext, useTextSize } from '../../typography/size'\n\n// kanso-ui's Code. No Material Design page draws inline code, so it follows\n// web's reading, which follows the type it interrupts: the role and the colour\n// of the text around it, in the mono face the type tokens carry, at 0.875 of\n// its size. A mono face at the same nominal size as the prose around it reads\n// a little larger, its glyphs being wider and its x-height taller, so the\n// ratio is what makes the two look level rather than what makes them measure\n// the same.\n//\n// No background, as on web. The mono face against the faces the rest of the\n// system uses is already the signal, and a tint would put a second surface\n// inside a Card or a Sheet. A call site wanting one can wrap this.\n//\n// It is a native Text nested in the one it interrupts, which hands it the\n// colour, the weight, the line height and the tracking with nothing set here.\n// The size is the one it cannot take as it stands, since 0.875 of a size needs\n// the number and a nested Text cannot read its parent's, so the library's Text\n// provides the size it ends up at and this sets the share of it. Outside a\n// Text there is no text around to take anything from, so it draws as a Text\n// of the default role and tone would, in body medium on surface, at the same\n// share of body medium's size. Inside some other component's text, which\n// provides no size, it does the same, so nest it in a Text.\n//\n// React Native has no `overflow-wrap: anywhere`. iOS and Android break a word\n// wider than its line between characters rather than letting it run past the\n// edge, and React Native Web's Text sets `overflow-wrap: break-word`, so a\n// package path or a hash still stays inside its container, breaking at the\n// hyphens and slashes in it where a line allows. The LongIdentifier story\n// shows it.\n\n// The size against the text around it, web's `0.875em`.\nconst SHARE = 0.875\n\nconst stylesOf = themedStyles(({ colors }) =>\n  StyleSheet.create({\n    // The colour of a Text's default tone, for a Code with no text around it.\n    outside: {\n      color: colors.onSurface,\n    },\n  }),\n)\n\ntype CodeProps = NativeTextProps & {\n  readonly ref?: Ref<ComponentRef<typeof NativeText>>\n}\n\n/**\n * A fragment of code, a path or an identifier set in the mono face, inside a\n * run of text.\n *\n * ```tsx\n * <Text variant=\"bodyLarge\">\n *   A sentence naming <Code>identifier</Code>\n * </Text>\n * ```\n *\n * It takes its colour from the Text around it and 0.875 of its size, so the\n * same Code serves a heading and a footnote. `style`, `ref` and `testID` land\n * on React Native's own Text, and a `style` there applies over the face and\n * the size.\n */\nfunction Code({ children, style, ...props }: CodeProps) {\n  const theme = useTheme()\n  const around = useTextSize()\n  const body = useTypeRole('bodyMedium')\n  const mono = useFontFamily(theme.typography.fontFamilyMono)\n  const outside = around === undefined\n  const size = (around ?? theme.typography.bodyMediumSize) * SHARE\n\n  return (\n    <NativeText\n      {...props}\n      style={composeStyles<TextStyle>(\n        outside ? body : null,\n        outside ? stylesOf(theme).outside : null,\n        familyStyle(mono),\n        { fontSize: size },\n        style,\n      )}\n    >\n      <TextSizeContext value={size}>{children}</TextSizeContext>\n    </NativeText>\n  )\n}\n\nexport type { CodeProps }\n\nexport { Code }\n"],"mappings":";;;;;;;;;AAyCA,MAAMgB,QAAQ;AAEd,MAAMC,WAAWP,cAAc,EAAEQ,aAC/BX,WAAWY,OAAO,EAEhBC,SAAS,EACPC,OAAOH,OAAOI,UAChB,EACF,CAAC,CACH;;;;;;;;;;;;;;;;AAqBA,SAAAG,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAJ,EAAA,OAAAD,IAAA;EAAc,CAAA,CAAAG,UAAAE,OAAA,GAAAD,SAAAJ;EAAwCC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAA;EAAAF,WAAAF,EAAA;EAAAG,QAAAH,EAAA;EAAAI,QAAAJ,EAAA;CAAA;CACpD,MAAAK,QAAcxB,SAAS;CACvB,MAAAyB,SAAelB,YAAY;CAC3B,MAAAmB,OAAarB,YAAY,YAAY;CACrC,MAAAsB,OAAaxB,cAAcqB,MAAKI,WAAWC,cAAe;CAC1D,MAAAjB,UAAgBa,WAAWK,KAAAA;CAC3B,MAAAC,QAAcN,UAAUD,MAAKI,WAAWI,kBAAmBxB;CAAK,IAAAyB;CAAA,IAAAd,EAAA,OAAAO,QAAAP,EAAA,OAAAQ,QAAAR,EAAA,OAAAP,WAAAO,EAAA,OAAAY,QAAAZ,EAAA,OAAAI,SAAAJ,EAAA,OAAAK,OAAA;EAKrDS,KAAAhC,cACLW,UAAAc,OAAA,MACAd,UAAUH,SAASe,KAAK,CAAC,CAAAZ,UAAzB,MACAR,YAAYuB,IAAI,GAChB,EAAAO,UAAYH,KAAK,GACjBR,KACF;EAACJ,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,KAAAP;EAAAO,EAAA,KAAAY;EAAAZ,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,IAAAgB;CAAA,IAAAhB,EAAA,QAAAE,YAAAF,EAAA,QAAAY,MAAA;EAEDI,KAAA,oBAAC,iBAAD;GAAwBJ,OAAAA;GAAOV;EAAf,CAAA;EAA0CF,EAAA,MAAAE;EAAAF,EAAA,MAAAY;EAAAZ,EAAA,MAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,QAAAG,SAAAH,EAAA,QAAAc,MAAAd,EAAA,QAAAgB,IAAA;EAV5DC,KAAA,oBAACE,MAAD;GAAW,GACLhB;GACG,OAAAW;GAQPE,UAAAA;EAVS,CAAA;EAWEhB,EAAA,MAAAG;EAAAH,EAAA,MAAAc;EAAAd,EAAA,MAAAgB;EAAAhB,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,OAXbiB;AAWa"}

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

@@ -0,0 +1,47 @@
+import { View, ViewProps } from "react-native";
+import { ComponentRef, Ref } from "react";
+//#region src/components/container/index.d.ts
+type ContainerPadding = 'default' | 'none';
+type ContainerProps = ViewProps & {
+  /**
+   * How wide the content may run before it stops growing, in dp or as a
+   * share of the width it is given. The container stands in the middle of
+   * whatever is left over.
+   *
+   * Worth setting. The default suits a page of mixed components; prose wants
+   * a narrower measure, since what makes a line hard to read is how many
+   * characters it holds.
+   * @default 960
+   */
+  readonly maxInlineSize?: `${number}%` | number;
+  /**
+   * Horizontal padding, which is what keeps the content off the edge of the
+   * window once it is narrower than the measure: 16dp in a compact window and
+   * 24dp from medium up. `none` is for a container nested inside one that
+   * already has it.
+   * @default 'default'
+   */
+  readonly padding?: ContainerPadding;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+};
+/**
+ * A centred measure for a screen or a section of one: content grows to a
+ * width and stops, with the leftover space split evenly either side.
+ *
+ * ```tsx
+ * <Container maxInlineSize={600}>
+ *   <Text>Supporting line</Text>
+ * </Container>
+ * ```
+ *
+ * Layout only: it paints no surface and gives its children no container of
+ * their own, which is what separates it from Card. It sets no gaps either, so
+ * reach for Stack inside it for the rhythm between sections.
+ *
+ * `style`, `ref` and `testID` land on the `View`, and a `style` there applies
+ * over the container's own.
+ */
+declare function Container({ maxInlineSize, padding, style, ...props }: ContainerProps): import("react").JSX.Element;
+//#endregion
+export { Container, type ContainerPadding, type ContainerProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/container/index.js

@@ -0,0 +1,85 @@
+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 } from "react/jsx-runtime";
+//#region src/components/container/index.tsx
+const DEFAULT_MAX_INLINE_SIZE = 960;
+const styles = StyleSheet.create({ root: {
+	alignSelf: "center",
+	width: "100%"
+} });
+const stylesOf = themedStyles(({ spacing }) => StyleSheet.create({
+	compact: { paddingHorizontal: spacing.lg },
+	none: { paddingHorizontal: 0 },
+	wider: { paddingHorizontal: spacing.xl }
+}));
+/**
+* A centred measure for a screen or a section of one: content grows to a
+* width and stops, with the leftover space split evenly either side.
+*
+* ```tsx
+* <Container maxInlineSize={600}>
+*   <Text>Supporting line</Text>
+* </Container>
+* ```
+*
+* Layout only: it paints no surface and gives its children no container of
+* their own, which is what separates it from Card. It sets no gaps either, so
+* reach for Stack inside it for the rhythm between sections.
+*
+* `style`, `ref` and `testID` land on the `View`, and a `style` there applies
+* over the container's own.
+*/
+function Container(t0) {
+	const $ = c(9);
+	let props;
+	let style;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({maxInlineSize: t1, padding: t2, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = style;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		props = $[1];
+		style = $[2];
+		t1 = $[3];
+		t2 = $[4];
+	}
+	const maxInlineSize = t1 === void 0 ? DEFAULT_MAX_INLINE_SIZE : t1;
+	const padding = t2 === void 0 ? "default" : t2;
+	const own = stylesOf(useTheme());
+	const sizeClass = useWindowSizeClass();
+	const padded = padding === "none" ? own.none : sizeClass === "compact" ? own.compact : own.wider;
+	const T0 = View;
+	const t3 = composeStyles(styles.root, measureOf(maxInlineSize), padded, 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;
+}
+/**
+* The measure as a style. Built by a call rather than written inline, which
+* is what react-perf's jsx-no-new-object-as-prop is after; the React Compiler
+* memoises the result on its input.
+*/
+function measureOf(maxWidth) {
+	return { maxWidth };
+}
+//#endregion
+export { Container };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","Ref","ViewProps","ViewStyle","StyleSheet","View","useWindowSizeClass","useTheme","composeStyles","themedStyles","DEFAULT_MAX_INLINE_SIZE","styles","create","root","alignSelf","width","stylesOf","spacing","compact","paddingHorizontal","lg","none","wider","xl","ContainerPadding","ContainerProps","maxInlineSize","padding","ref","Container","t0","$","_c","props","style","t1","t2","undefined","own","sizeClass","padded","T0","t3","measureOf","t4","maxWidth","_c"],"sources":["../../../src/components/container/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 { useWindowSizeClass } from '../../hooks/useWindowSizeClass'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// The measure kanso-ui's Container takes by default, the width its own story\n// files centre their page on. A measure is a property of the content: 960dp\n// suits a page of mixed components, and prose wants something narrower. Say\n// which one you mean rather than taking this.\nconst DEFAULT_MAX_INLINE_SIZE = 960\n\n// No Material Design page draws a page container; the layout pages give the\n// margins one keeps. The gutter is the margin those pages give a window of\n// each size, 16dp while the window is compact and 24dp from medium up, read\n// off the window's size class as web reads it off a media query. The measure\n// is the call site's, since the pages leave a pane's width to its content.\n//\n// The container fills the width it is given up to its measure and stands in\n// the middle of what is left, `alignSelf` doing what web's `marginInline:\n// auto` does, so it centres in a column whatever the column aligns its other\n// children to.\nconst styles = StyleSheet.create({\n  root: {\n    alignSelf: 'center',\n    width: '100%',\n  },\n})\n\nconst stylesOf = themedStyles(({ spacing }) =>\n  StyleSheet.create({\n    compact: {\n      paddingHorizontal: spacing.lg,\n    },\n    none: {\n      paddingHorizontal: 0,\n    },\n    wider: {\n      paddingHorizontal: spacing.xl,\n    },\n  }),\n)\n\ntype ContainerPadding = 'default' | 'none'\n\ntype ContainerProps = ViewProps & {\n  /**\n   * How wide the content may run before it stops growing, in dp or as a\n   * share of the width it is given. The container stands in the middle of\n   * whatever is left over.\n   *\n   * Worth setting. The default suits a page of mixed components; prose wants\n   * a narrower measure, since what makes a line hard to read is how many\n   * characters it holds.\n   * @default 960\n   */\n  readonly maxInlineSize?: `${number}%` | number\n  /**\n   * Horizontal padding, which is what keeps the content off the edge of the\n   * window once it is narrower than the measure: 16dp in a compact window and\n   * 24dp from medium up. `none` is for a container nested inside one that\n   * already has it.\n   * @default 'default'\n   */\n  readonly padding?: ContainerPadding\n  readonly ref?: Ref<ComponentRef<typeof View>>\n}\n\n/**\n * A centred measure for a screen or a section of one: content grows to a\n * width and stops, with the leftover space split evenly either side.\n *\n * ```tsx\n * <Container maxInlineSize={600}>\n *   <Text>Supporting line</Text>\n * </Container>\n * ```\n *\n * Layout only: it paints no surface and gives its children no container of\n * their own, which is what separates it from Card. It sets no gaps either, so\n * reach for Stack inside it for the rhythm between sections.\n *\n * `style`, `ref` and `testID` land on the `View`, and a `style` there applies\n * over the container's own.\n */\nfunction Container({\n  maxInlineSize = DEFAULT_MAX_INLINE_SIZE,\n  padding = 'default',\n  style,\n  ...props\n}: ContainerProps) {\n  const own = stylesOf(useTheme())\n  const sizeClass = useWindowSizeClass()\n  const padded =\n    padding === 'none'\n      ? own.none\n      : sizeClass === 'compact'\n        ? own.compact\n        : own.wider\n\n  return (\n    <View\n      {...props}\n      style={composeStyles<ViewStyle>(\n        styles.root,\n        measureOf(maxInlineSize),\n        padded,\n        style,\n      )}\n    />\n  )\n}\n\n/**\n * The measure as a style. Built by a call rather than written inline, which\n * is what react-perf's jsx-no-new-object-as-prop is after; the React Compiler\n * memoises the result on its input.\n */\nfunction measureOf(maxWidth: ContainerProps['maxInlineSize']): ViewStyle {\n  return { maxWidth }\n}\n\nexport type { ContainerPadding, ContainerProps }\n\nexport { Container }\n"],"mappings":";;;;;;;AAaA,MAAMU,0BAA0B;AAYhC,MAAMC,SAASP,WAAWQ,OAAO,EAC/BC,MAAM;CACJC,WAAW;CACXC,OAAO;AACT,EACF,CAAC;AAED,MAAMC,WAAWP,cAAc,EAAEQ,cAC/Bb,WAAWQ,OAAO;CAChBM,SAAS,EACPC,mBAAmBF,QAAQG,GAC7B;CACAC,MAAM,EACJF,mBAAmB,EACrB;CACAG,OAAO,EACLH,mBAAmBF,QAAQM,GAC7B;AACF,CAAC,CACH;;;;;;;;;;;;;;;;;;AA4CA,SAAAM,UAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAmB,CAAA,CAAAJ,eAAAS,IAAAR,SAAAS,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,gBAAAS,OAAAE,KAAAA,IAAA3B,0BAAAyB;CACA,MAAAR,UAAAS,OAAAC,KAAAA,IAAA,YAAAD;CAIA,MAAAE,MAAYtB,SAAST,SAAS,CAAC;CAC/B,MAAAgC,YAAkBjC,mBAAmB;CACrC,MAAAkC,SACEb,YAAY,SACRW,IAAGjB,OACHkB,cAAc,YACZD,IAAGpB,UACHoB,IAAGhB;CAGR,MAAAmB,KAAApC;CAEQ,MAAAqC,KAAAlC,cACLG,OAAME,MACN8B,UAAUjB,aAAa,GACvBc,QACAN,KACF;CAAC,IAAAU;CAAA,IAAAb,EAAA,OAAAU,MAAAV,EAAA,OAAAE,SAAAF,EAAA,OAAAW,IAAA;EAPHE,KAAA,oBAAC,IAAD;GAAK,GACCX;GACG,OAAAS;EAKN,CAAA;EACDX,EAAA,KAAAU;EAAAV,EAAA,KAAAE;EAAAF,EAAA,KAAAW;EAAAX,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,OARFa;AAQE;;;;;;AASN,SAASD,UAAUE,UAAsD;CACvE,OAAO,EAAEA,SAAS;AACpB"}