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

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

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

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

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

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

@@ -0,0 +1,53 @@
+import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+//#region src/components/toolbar/index.d.ts
+type ToolbarProps = Omit<ViewProps, 'children' | 'style'> & {
+  /** The controls, and any rule between them. */
+  readonly children?: ReactNode;
+  /**
+   * Which way the bar runs. A `Separator` among its controls runs across it.
+   * @default 'horizontal'
+   */
+  readonly orientation?: 'horizontal' | 'vertical';
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  readonly style?: StyleProp<ViewStyle>;
+  /**
+   * Which of the page's two colour schemes the bar takes. `neutral` is the
+   * page's standard scheme, the surface container it draws by default;
+   * `vibrant` moves it to primary container, for a bar meant to carry the
+   * screen's accent.
+   * @default 'neutral'
+   */
+  readonly tone?: ToolbarTone;
+};
+type ToolbarTone = 'neutral' | 'vibrant';
+/**
+ * A container for a set of controls, announced as a toolbar so a screen
+ * reader reads them as one group.
+ *
+ * ```tsx
+ * <Toolbar aria-label="Label">
+ *   <IconButton aria-label="First item">
+ *     <FirstIcon />
+ *   </IconButton>
+ *   <Separator />
+ *   <IconButton aria-label="Second item">
+ *     <SecondIcon />
+ *   </IconButton>
+ * </Toolbar>
+ * ```
+ *
+ * Name it with `aria-label` or `aria-labelledby`: nothing here labels it for
+ * you, and a toolbar with no name is a group a screen reader cannot
+ * announce.
+ *
+ * `orientation` decides which way the bar runs, and a `Separator` among its
+ * controls draws across that direction without being told; one inside an
+ * overlay opened from the bar draws as it would anywhere else. `style`,
+ * `ref` and `testID` land on the bar, which is the element a layout
+ * positions.
+ */
+declare function Toolbar({ children, orientation, style, tone, ...props }: ToolbarProps): import("react").JSX.Element;
+//#endregion
+export { Toolbar, type ToolbarProps, type ToolbarTone };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/toolbar/index.js

@@ -0,0 +1,185 @@
+import { IconStyleContext } from "../../glyphs/icon-style.js";
+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 { Platform, StyleSheet, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/toolbar/index.tsx
+const ICON_SIZE = 24;
+const VERTICAL = { "aria-orientation": "vertical" };
+const stylesOf = themedStyles(({ colors, radii, spacing }) => StyleSheet.create({
+	base: {
+		alignItems: "center",
+		alignSelf: "flex-start",
+		borderRadius: radii.pill,
+		gap: spacing.sm,
+		justifyContent: "center"
+	},
+	horizontal: {
+		flexDirection: "row",
+		minHeight: 64,
+		paddingHorizontal: spacing.lg,
+		paddingVertical: spacing.sm
+	},
+	neutral: { backgroundColor: colors.surfaceContainer },
+	vertical: {
+		flexDirection: "column",
+		minWidth: 64,
+		paddingHorizontal: spacing.sm,
+		paddingVertical: spacing.lg
+	},
+	vibrant: { backgroundColor: colors.primaryContainer }
+}));
+function iconStyleOf(color) {
+	return {
+		color,
+		size: ICON_SIZE
+	};
+}
+/**
+* A container for a set of controls, announced as a toolbar so a screen
+* reader reads them as one group.
+*
+* ```tsx
+* <Toolbar aria-label="Label">
+*   <IconButton aria-label="First item">
+*     <FirstIcon />
+*   </IconButton>
+*   <Separator />
+*   <IconButton aria-label="Second item">
+*     <SecondIcon />
+*   </IconButton>
+* </Toolbar>
+* ```
+*
+* Name it with `aria-label` or `aria-labelledby`: nothing here labels it for
+* you, and a toolbar with no name is a group a screen reader cannot
+* announce.
+*
+* `orientation` decides which way the bar runs, and a `Separator` among its
+* controls draws across that direction without being told; one inside an
+* overlay opened from the bar draws as it would anywhere else. `style`,
+* `ref` and `testID` land on the bar, which is the element a layout
+* positions.
+*/
+function Toolbar(t0) {
+	const $ = c(37);
+	let children;
+	let props;
+	let style;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({children, orientation: t1, style, tone: t2, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		children = $[1];
+		props = $[2];
+		style = $[3];
+		t1 = $[4];
+		t2 = $[5];
+	}
+	const orientation = t1 === void 0 ? "horizontal" : t1;
+	const tone = t2 === void 0 ? "neutral" : t2;
+	const theme = useTheme();
+	let T0;
+	let T1;
+	let T2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	if ($[6] !== orientation || $[7] !== props || $[8] !== style || $[9] !== theme || $[10] !== tone) {
+		const own = stylesOf(theme);
+		const content = tone === "vibrant" ? theme.colors.onPrimaryContainer : theme.colors.onSurfaceVariant;
+		T2 = SeparatorOrientationContext;
+		t8 = orientation === "horizontal" ? "vertical" : "horizontal";
+		T1 = IconStyleContext;
+		if ($[20] !== content) {
+			t7 = iconStyleOf(content);
+			$[20] = content;
+			$[21] = t7;
+		} else t7 = $[21];
+		T0 = View;
+		t3 = "toolbar";
+		t4 = Platform.OS === "web" && orientation === "vertical" ? VERTICAL : void 0;
+		t5 = props;
+		t6 = composeStyles(own.base, own[orientation], own[tone], style);
+		$[6] = orientation;
+		$[7] = props;
+		$[8] = style;
+		$[9] = theme;
+		$[10] = tone;
+		$[11] = T0;
+		$[12] = T1;
+		$[13] = T2;
+		$[14] = t3;
+		$[15] = t4;
+		$[16] = t5;
+		$[17] = t6;
+		$[18] = t7;
+		$[19] = t8;
+	} else {
+		T0 = $[11];
+		T1 = $[12];
+		T2 = $[13];
+		t3 = $[14];
+		t4 = $[15];
+		t5 = $[16];
+		t6 = $[17];
+		t7 = $[18];
+		t8 = $[19];
+	}
+	let t9;
+	if ($[22] !== T0 || $[23] !== children || $[24] !== t3 || $[25] !== t4 || $[26] !== t5 || $[27] !== t6) {
+		t9 = /* @__PURE__ */ jsx(T0, {
+			role: t3,
+			...t4,
+			...t5,
+			style: t6,
+			children
+		});
+		$[22] = T0;
+		$[23] = children;
+		$[24] = t3;
+		$[25] = t4;
+		$[26] = t5;
+		$[27] = t6;
+		$[28] = t9;
+	} else t9 = $[28];
+	let t10;
+	if ($[29] !== T1 || $[30] !== t7 || $[31] !== t9) {
+		t10 = /* @__PURE__ */ jsx(T1, {
+			value: t7,
+			children: t9
+		});
+		$[29] = T1;
+		$[30] = t7;
+		$[31] = t9;
+		$[32] = t10;
+	} else t10 = $[32];
+	let t11;
+	if ($[33] !== T2 || $[34] !== t10 || $[35] !== t8) {
+		t11 = /* @__PURE__ */ jsx(T2, {
+			value: t8,
+			children: t10
+		});
+		$[33] = T2;
+		$[34] = t10;
+		$[35] = t8;
+		$[36] = t11;
+	} else t11 = $[36];
+	return t11;
+}
+//#endregion
+export { Toolbar };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","ColorValue","StyleProp","ViewProps","ViewStyle","Platform","StyleSheet","View","IconStyle","IconStyleContext","SeparatorOrientationContext","useTheme","composeStyles","themedStyles","ToolbarProps","Omit","children","orientation","ref","style","tone","ToolbarTone","ICON_SIZE","VERTICAL","const","stylesOf","colors","radii","spacing","create","base","alignItems","alignSelf","borderRadius","pill","gap","sm","justifyContent","horizontal","flexDirection","minHeight","paddingHorizontal","lg","paddingVertical","neutral","backgroundColor","surfaceContainer","vertical","minWidth","vibrant","primaryContainer","iconStyleOf","color","size","Toolbar","t0","$","_c","props","t1","t2","undefined","theme","T0","T1","T2","t3","t4","t5","t6","t7","t8","own","content","onPrimaryContainer","onSurfaceVariant","OS","t9","t10","t11","_c"],"sources":["../../../src/components/toolbar/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { ColorValue, StyleProp, ViewProps, ViewStyle } from 'react-native'\n\nimport { Platform, StyleSheet, View } from 'react-native'\n\nimport type { IconStyle } from '../../glyphs/icon-style'\n\nimport { IconStyleContext } from '../../glyphs/icon-style'\nimport { SeparatorOrientationContext } from '../../separator'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// kanso-ui's Toolbar: the toolbars page's container, a row of frequently used\n// controls on a surface of its own. The page calls it \"a container with\n// configurable slots\", so nothing here says what goes in one: an icon\n// button, a button, a field or a rule are all the call site's to place.\n//\n// The measurements are the page's, stated there in words: 64dp across the\n// bar, its contents centred, 8dp between items and 16dp of padding at the two\n// ends. The two colour schemes are its own too, standard on surface container\n// and vibrant on primary container, each with its content role on what the\n// bar holds: on-surface variant, and on-primary container. `tone` spells the\n// standard one `neutral`, the word every `tone` in the library uses for its\n// neutral role. That role reaches a bare icon placed in the bar through\n// `useIconStyle()`, while a control keeps its own colours.\n//\n// **A rule inside it runs across the bar, not along it.** The bar tells a\n// `Separator` among its controls to run the other way, so a rule between two\n// controls is correct without the call site saying which way it runs. A modal\n// window opened from the bar clears that, and an overlay never sees it, so a\n// rule in a dialog, sheet or popover draws as it does anywhere else.\n//\n// It is announced as a toolbar, which tells a screen reader its controls\n// belong together. Web's arrow keys between the controls are React Aria's and\n// have no counterpart on a touch screen, so each control is reached as any\n// other is.\n//\n// One departure, about the shape, and it is web's. The page gives the\n// container's corner as a token its widget draws rather than writes, so there\n// is no value to read. The fully rounded corner here, and the bar hugging its\n// controls rather than spanning its parent, are the library's choice for a\n// bar that floats over a screen; a docked one spans its container and squares\n// its corner, both from the call site's `style`.\n\ntype ToolbarProps = Omit<ViewProps, 'children' | 'style'> & {\n  /** The controls, and any rule between them. */\n  readonly children?: ReactNode\n  /**\n   * Which way the bar runs. A `Separator` among its controls runs across it.\n   * @default 'horizontal'\n   */\n  readonly orientation?: 'horizontal' | 'vertical'\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * Which of the page's two colour schemes the bar takes. `neutral` is the\n   * page's standard scheme, the surface container it draws by default;\n   * `vibrant` moves it to primary container, for a bar meant to carry the\n   * screen's accent.\n   * @default 'neutral'\n   */\n  readonly tone?: ToolbarTone\n}\n\ntype ToolbarTone = 'neutral' | 'vibrant'\n\n// The icon a bare glyph in the bar draws at, the 24dp grid Material Symbols\n// are drawn on.\nconst ICON_SIZE = 24\n\n// React Native Web writes `aria-orientation` onto the element, which React\n// Native's types do not name. A horizontal bar needs none, since that is the\n// toolbar role's own default.\nconst VERTICAL = { 'aria-orientation': 'vertical' } as const\n\nconst stylesOf = themedStyles(({ colors, radii, spacing }) =>\n  StyleSheet.create({\n    base: {\n      alignItems: 'center',\n      alignSelf: 'flex-start',\n      borderRadius: radii.pill,\n      gap: spacing.sm,\n      justifyContent: 'center',\n    },\n    // The page's 64dp across the bar, and its 16dp of padding at the two\n    // ends. A minimum rather than a fixed size, since a field or a button\n    // taller than 64dp should make the bar taller rather than overflow it.\n    //\n    // The cross axis takes the 8dp the page puts between items rather than\n    // nothing. A `Separator` takes its length from the bar, so with no\n    // padding there a rule would run the full 64dp and cut the container in\n    // two instead of dividing what is inside it.\n    horizontal: {\n      flexDirection: 'row',\n      minHeight: 64,\n      paddingHorizontal: spacing.lg,\n      paddingVertical: spacing.sm,\n    },\n    neutral: {\n      backgroundColor: colors.surfaceContainer,\n    },\n    vertical: {\n      flexDirection: 'column',\n      minWidth: 64,\n      paddingHorizontal: spacing.sm,\n      paddingVertical: spacing.lg,\n    },\n    vibrant: {\n      backgroundColor: colors.primaryContainer,\n    },\n  }),\n)\n\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's jsx-no-new-object-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction iconStyleOf(color: ColorValue): IconStyle {\n  return { color, size: ICON_SIZE }\n}\n\n/**\n * A container for a set of controls, announced as a toolbar so a screen\n * reader reads them as one group.\n *\n * ```tsx\n * <Toolbar aria-label=\"Label\">\n *   <IconButton aria-label=\"First item\">\n *     <FirstIcon />\n *   </IconButton>\n *   <Separator />\n *   <IconButton aria-label=\"Second item\">\n *     <SecondIcon />\n *   </IconButton>\n * </Toolbar>\n * ```\n *\n * Name it with `aria-label` or `aria-labelledby`: nothing here labels it for\n * you, and a toolbar with no name is a group a screen reader cannot\n * announce.\n *\n * `orientation` decides which way the bar runs, and a `Separator` among its\n * controls draws across that direction without being told; one inside an\n * overlay opened from the bar draws as it would anywhere else. `style`,\n * `ref` and `testID` land on the bar, which is the element a layout\n * positions.\n */\nfunction Toolbar({\n  children,\n  orientation = 'horizontal',\n  style,\n  tone = 'neutral',\n  ...props\n}: ToolbarProps) {\n  const theme = useTheme()\n  const own = stylesOf(theme)\n  const content =\n    tone === 'vibrant'\n      ? theme.colors.onPrimaryContainer\n      : theme.colors.onSurfaceVariant\n\n  return (\n    <SeparatorOrientationContext\n      value={orientation === 'horizontal' ? 'vertical' : 'horizontal'}\n    >\n      <IconStyleContext value={iconStyleOf(content)}>\n        <View\n          role=\"toolbar\"\n          {...(Platform.OS === 'web' && orientation === 'vertical'\n            ? VERTICAL\n            : undefined)}\n          {...props}\n          style={composeStyles<ViewStyle>(\n            own.base,\n            own[orientation],\n            own[tone],\n            style,\n          )}\n        >\n          {children}\n        </View>\n      </IconStyleContext>\n    </SeparatorOrientationContext>\n  )\n}\n\nexport { Toolbar }\nexport type { ToolbarProps, ToolbarTone }\n"],"mappings":";;;;;;;;AAoEA,MAAMwB,YAAY;AAKlB,MAAMC,WAAW,EAAE,oBAAoB,WAAW;AAElD,MAAME,WAAWZ,cAAc,EAAEa,QAAQC,OAAOC,cAC9CtB,WAAWuB,OAAO;CAChBC,MAAM;EACJC,YAAY;EACZC,WAAW;EACXC,cAAcN,MAAMO;EACpBC,KAAKP,QAAQQ;EACbC,gBAAgB;CAClB;CASAC,YAAY;EACVC,eAAe;EACfC,WAAW;EACXC,mBAAmBb,QAAQc;EAC3BC,iBAAiBf,QAAQQ;CAC3B;CACAQ,SAAS,EACPC,iBAAiBnB,OAAOoB,iBAC1B;CACAC,UAAU;EACRR,eAAe;EACfS,UAAU;EACVP,mBAAmBb,QAAQQ;EAC3BO,iBAAiBf,QAAQc;CAC3B;CACAO,SAAS,EACPJ,iBAAiBnB,OAAOwB,iBAC1B;AACF,CAAC,CACH;AAKA,SAASC,YAAYC,OAA8B;CACjD,OAAO;EAAEA;EAAOC,MAAM/B;CAAU;AAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,SAAAgC,QAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAzC;CAAA,IAAA0C;CAAA,IAAAvC;CAAA,IAAAwC;CAAA,IAAAC;CAAA,IAAAJ,EAAA,OAAAD,IAAA;EAAiB,CAAA,CAAAvC,UAAAC,aAAA0C,IAAAxC,OAAAC,MAAAwC,IAAA,GAAAF,SAAAH;EAMFC,EAAA,KAAAD;EAAAC,EAAA,KAAAxC;EAAAwC,EAAA,KAAAE;EAAAF,EAAA,KAAArC;EAAAqC,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAA;EAAA5C,WAAAwC,EAAA;EAAAE,QAAAF,EAAA;EAAArC,QAAAqC,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAJb,MAAAvC,cAAA0C,OAAAE,KAAAA,IAAA,eAAAF;CAEA,MAAAvC,OAAAwC,OAAAC,KAAAA,IAAA,YAAAD;CAGA,MAAAE,QAAcnD,SAAS;CAAC,IAAAoD;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAf,EAAA,OAAAvC,eAAAuC,EAAA,OAAAE,SAAAF,EAAA,OAAArC,SAAAqC,EAAA,OAAAM,SAAAN,EAAA,QAAApC,MAAA;EACxB,MAAAoD,MAAY/C,SAASqC,KAAK;EAC1B,MAAAW,UACErD,SAAS,YACL0C,MAAKpC,OAAOgD,qBACZZ,MAAKpC,OAAOiD;EAGfV,KAAAvD;EACQ6D,KAAAtD,gBAAgB,eAAhB,aAAA;EAEN+C,KAAAvD;EAAgB,IAAA+C,EAAA,QAAAiB,SAAA;GAAQH,KAAAnB,YAAYsB,OAAO;GAACjB,EAAA,MAAAiB;GAAAjB,EAAA,MAAAc;EAAA,OAAAA,KAAAd,EAAA;EAC1CO,KAAAxD;EACM2D,KAAA;EACAC,KAAA9D,SAAQuE,OAAQ,SAAS3D,gBAAgB,aAAzCM,WAAAsC,KAAAA;EAGDH,KAAAA;EACGW,KAAAzD,cACL4D,IAAG1C,MACH0C,IAAIvD,cACJuD,IAAIpD,OACJD,KACF;EAACqC,EAAA,KAAAvC;EAAAuC,EAAA,KAAAE;EAAAF,EAAA,KAAArC;EAAAqC,EAAA,KAAAM;EAAAN,EAAA,MAAApC;EAAAoC,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;EAAAT,EAAA,MAAAU;EAAAV,EAAA,MAAAW;EAAAX,EAAA,MAAAY;EAAAZ,EAAA,MAAAa;EAAAb,EAAA,MAAAc;EAAAd,EAAA,MAAAe;CAAA,OAAA;EAAAR,KAAAP,EAAA;EAAAQ,KAAAR,EAAA;EAAAS,KAAAT,EAAA;EAAAU,KAAAV,EAAA;EAAAW,KAAAX,EAAA;EAAAY,KAAAZ,EAAA;EAAAa,KAAAb,EAAA;EAAAc,KAAAd,EAAA;EAAAe,KAAAf,EAAA;CAAA;CAAA,IAAAqB;CAAA,IAAArB,EAAA,QAAAO,MAAAP,EAAA,QAAAxC,YAAAwC,EAAA,QAAAU,MAAAV,EAAA,QAAAW,MAAAX,EAAA,QAAAY,MAAAZ,EAAA,QAAAa,IAAA;EAXHQ,KAAA,oBAAC,IAAD;GACO,MAAAX;GAAS,GACTC;GAEQ,GACTT;GACG,OAAAW;GAONrD;EAbE,CAAA;EAcEwC,EAAA,MAAAO;EAAAP,EAAA,MAAAxC;EAAAwC,EAAA,MAAAU;EAAAV,EAAA,MAAAW;EAAAX,EAAA,MAAAY;EAAAZ,EAAA,MAAAa;EAAAb,EAAA,MAAAqB;CAAA,OAAAA,KAAArB,EAAA;CAAA,IAAAsB;CAAA,IAAAtB,EAAA,QAAAQ,MAAAR,EAAA,QAAAc,MAAAd,EAAA,QAAAqB,IAAA;EAfTC,MAAA,oBAAC,IAAD;GAAyB,OAAAR;GACvBO,UAAAA;EADe,CAAA;EAgBErB,EAAA,MAAAQ;EAAAR,EAAA,MAAAc;EAAAd,EAAA,MAAAqB;EAAArB,EAAA,MAAAsB;CAAA,OAAAA,MAAAtB,EAAA;CAAA,IAAAuB;CAAA,IAAAvB,EAAA,QAAAS,MAAAT,EAAA,QAAAsB,OAAAtB,EAAA,QAAAe,IAAA;EAnBrBQ,MAAA,oBAAC,IAAD;GACS,OAAAR;GAEPO,UAAAA;EAH0B,CAAA;EAoBEtB,EAAA,MAAAS;EAAAT,EAAA,MAAAsB;EAAAtB,EAAA,MAAAe;EAAAf,EAAA,MAAAuB;CAAA,OAAAA,MAAAvB,EAAA;CAAA,OApB9BuB;AAoB8B"}

package/dist/control/group.js

@@ -0,0 +1,23 @@
+import { createContext } from "react";
+//#region src/control/group.ts
+const CheckboxGroupContext = createContext(null);
+/** An empty list of a group's checkboxes, made once per group. */
+function createMembers() {
+	const controls = /* @__PURE__ */ new Map();
+	return {
+		add: (id, control) => {
+			controls.set(id, control);
+		},
+		get current() {
+			for (const control of controls.values()) if (control.current !== null) return control.current;
+			return null;
+		},
+		remove: (id) => {
+			controls.delete(id);
+		}
+	};
+}
+//#endregion
+export { CheckboxGroupContext, createMembers };
+
+//# sourceMappingURL=group.js.map

package/dist/control/group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","names":["RefObject","createContext","Focusable","CheckboxGroupContextValue","isDisabled","isInvalid","isReadOnly","isSelected","value","members","CheckboxGroupMembers","set","add","id","control","remove","CheckboxGroupContext","createMembers","controls","Map","current","values","delete"],"sources":["../../src/control/group.ts"],"sourcesContent":["import type { RefObject } from 'react'\n\nimport { createContext } from 'react'\n\nimport type { Focusable } from '../form'\n\n// What a CheckboxGroup tells the checkboxes inside it, as React Aria's group\n// state does on web: which entries are selected, how to change one, and the\n// states that reach every box from the group. Beside src/control's row\n// rather than in the group's own module, so Checkbox reads it without\n// importing the group.\n\ntype CheckboxGroupContextValue = {\n  readonly isDisabled: boolean\n  readonly isInvalid: boolean\n  readonly isReadOnly: boolean\n  readonly isSelected: (value: string) => boolean\n  readonly members: CheckboxGroupMembers\n  /** Selects or clears one entry, as a press on its checkbox does. */\n  readonly set: (value: string, isSelected: boolean) => void\n}\n\n/**\n * A group's checkboxes, in the order they mounted, which is the order they\n * are drawn in. As a ref it holds the first of them that has a control, which\n * is what the form around the group focuses when the group holds a native\n * submission back.\n */\ntype CheckboxGroupMembers = RefObject<Focusable | null> & {\n  /** Adds a checkbox's control, keeping its place if it is already there. */\n  readonly add: (id: string, control: RefObject<Focusable | null>) => void\n  readonly remove: (id: string) => void\n}\n\nconst CheckboxGroupContext = createContext<CheckboxGroupContextValue | null>(\n  null,\n)\n\n/** An empty list of a group's checkboxes, made once per group. */\nfunction createMembers(): CheckboxGroupMembers {\n  const controls = new Map<string, RefObject<Focusable | null>>()\n\n  return {\n    add: (id, control) => {\n      controls.set(id, control)\n    },\n    get current() {\n      for (const control of controls.values()) {\n        if (control.current !== null) {\n          return control.current\n        }\n      }\n      return null\n    },\n    remove: (id) => {\n      controls.delete(id)\n    },\n  }\n}\n\nexport { CheckboxGroupContext, createMembers }\nexport type { CheckboxGroupContextValue, CheckboxGroupMembers }\n"],"mappings":";;AAkCA,MAAMgB,uBAAuBf,cAC3B,IACF;;AAGA,SAASgB,gBAAsC;CAC7C,MAAMC,2BAAW,IAAIC,IAAyC;CAE9D,OAAO;EACLP,MAAMC,IAAIC,YAAY;GACpBI,SAASP,IAAIE,IAAIC,OAAO;EAC1B;EACA,IAAIM,UAAU;GACZ,KAAK,MAAMN,WAAWI,SAASG,OAAO,GACpC,IAAIP,QAAQM,YAAY,MACtB,OAAON,QAAQM;GAGnB,OAAO;EACT;EACAL,SAASF,OAAO;GACdK,SAASI,OAAOT,EAAE;EACpB;CACF;AACF"}

package/dist/fab/index.d.ts

@@ -0,0 +1,19 @@
+import "../button/palettes.js";
+import "../typography/roles.js";
+import { ViewStyle } from "react-native";
+//#region src/fab/index.d.ts
+/**
+ * The pages' three sizes: `md` the FAB at 56dp, `lg` the medium FAB at 80dp
+ * and `xl` the large FAB at 96dp.
+ */
+type FabSize = 'lg' | 'md' | 'xl';
+/** The colour role a FAB is drawn in. */
+type FabTone = 'primary' | 'secondary' | 'tertiary';
+/**
+ * `tonal` draws the tone's container pair, the pages' default; `filled`
+ * draws the tone itself.
+ */
+type FabVariant = 'filled' | 'tonal';
+//#endregion
+export type { FabSize, FabTone, FabVariant };
+//# sourceMappingURL=index.d.ts.map