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

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

@@ -1 +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","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 { 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'\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<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 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<ComponentRef<typeof 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<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\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          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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"}
+{"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","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","locale","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 { 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 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 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 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<ComponentRef<typeof 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<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          described={describedBy(id, {\n            characterLimitLabel,\n            description,\n            error: shownError,\n            locale,\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/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

package/dist/fab/index.js

@@ -0,0 +1,147 @@
+import { themedStyles } from "../theme/styles.js";
+import { palettesOf } from "../button/palettes.js";
+import { StyleSheet } from "react-native";
+//#region src/fab/index.ts
+const MEDIUM_SIZE = 80;
+const MEDIUM_CORNER = 20;
+/** The icon each size draws, from the pages' size token sets. */
+const FAB_ICON_SIZES = {
+	lg: 28,
+	md: 24,
+	xl: 36
+};
+/** The type role the extended form sets its label in at each size. */
+const EXTENDED_FAB_ROLES = {
+	lg: "titleLarge",
+	md: "titleMedium",
+	xl: "headlineSmall"
+};
+/**
+* Each size's corner, apart from its size so the press feedback can clip to
+* the same one.
+*/
+const fabCornersOf = themedStyles(({ radii }) => StyleSheet.create({
+	lg: { borderRadius: MEDIUM_CORNER },
+	md: { borderRadius: radii.lg },
+	xl: { borderRadius: radii.xl }
+}));
+/** The FAB on its own: a square of the size's edge. */
+const fabSizesOf = themedStyles(({ sizing }) => StyleSheet.create({
+	lg: {
+		height: MEDIUM_SIZE,
+		width: MEDIUM_SIZE
+	},
+	md: {
+		height: sizing.controlLg,
+		width: sizing.controlLg
+	},
+	xl: {
+		height: sizing.controlXl,
+		width: sizing.controlXl
+	}
+}));
+/**
+* The extended form: the size's height, with its padding at either end and
+* the gap before the label. The 26dp and 28dp paddings fall between steps of
+* the spacing scale and are written out, as on web.
+*
+* The height is a floor rather than a fixed size, so a label the device's
+* text size enlarges grows the button rather than spilling out of it, which
+* web's fixed height has no need to allow for.
+*/
+const extendedFabSizesOf = themedStyles(({ sizing, spacing }) => StyleSheet.create({
+	lg: {
+		columnGap: spacing.md,
+		minHeight: MEDIUM_SIZE,
+		paddingHorizontal: 26
+	},
+	md: {
+		columnGap: spacing.sm,
+		minHeight: sizing.controlLg,
+		paddingHorizontal: spacing.lg
+	},
+	xl: {
+		columnGap: spacing.lg,
+		minHeight: sizing.controlXl,
+		paddingHorizontal: 28
+	}
+}));
+/**
+* The six colour pairs, by variant and tone: each tone's container pair, and
+* the tone itself. Plain colours, for FabMenu's FAB, which eases from one
+* pair to another as its menu opens.
+*/
+const fabColorsOf = themedStyles(({ colors }) => ({
+	filled: {
+		primary: {
+			container: colors.primary,
+			content: colors.onPrimary
+		},
+		secondary: {
+			container: colors.secondary,
+			content: colors.onSecondary
+		},
+		tertiary: {
+			container: colors.tertiary,
+			content: colors.onTertiary
+		}
+	},
+	tonal: {
+		primary: {
+			container: colors.primaryContainer,
+			content: colors.onPrimaryContainer
+		},
+		secondary: {
+			container: colors.secondaryContainer,
+			content: colors.onSecondaryContainer
+		},
+		tertiary: {
+			container: colors.tertiaryContainer,
+			content: colors.onTertiaryContainer
+		}
+	}
+}));
+/**
+* The six colour pairs as the palettes a button draws, and the one disabled
+* container every button shares: on-surface at the two disabled opacities,
+* as src/button/palettes.ts draws it.
+*/
+const fabPalettesOf = themedStyles((theme) => {
+	const pairs = fabColorsOf(theme);
+	return {
+		disabled: palettesOf(theme).filledDisabled,
+		filled: palettesFor(pairs.filled),
+		tonal: palettesFor(pairs.tonal)
+	};
+});
+const fabShadowsOf = themedStyles(({ shadows }) => StyleSheet.create({
+	elevation3: { boxShadow: shadows.elevation3 },
+	elevation4: { boxShadow: shadows.elevation4 }
+}));
+/**
+* The shadow a FAB draws in its state: level 3 at rest and while pressed,
+* level 4 under a hovering pointer, and none while disabled, since a shadow
+* says a control is there to press.
+*/
+function fabShadowOf({ hovered, pressed }, isDisabled, theme) {
+	if (isDisabled) return;
+	return fabShadowsOf(theme)[hovered && !pressed ? "elevation4" : "elevation3"];
+}
+function palette({ container, content }) {
+	return {
+		container: { backgroundColor: container },
+		content,
+		label: { color: content }
+	};
+}
+function palettesFor(pairs) {
+	return {
+		primary: palette(pairs.primary),
+		secondary: palette(pairs.secondary),
+		tertiary: palette(pairs.tertiary)
+	};
+}
+//#endregion
+export { EXTENDED_FAB_ROLES, FAB_ICON_SIZES, extendedFabSizesOf, fabColorsOf, fabCornersOf, fabPalettesOf, fabShadowOf, fabSizesOf };
+
+//# sourceMappingURL=index.js.map

package/dist/fab/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ViewStyle","StyleSheet","Palette","ResolvedTheme","TypeRole","palettesOf","themedStyles","FabSize","FabTone","FabVariant","MEDIUM_SIZE","MEDIUM_CORNER","FAB_ICON_SIZES","Readonly","Record","lg","md","xl","EXTENDED_FAB_ROLES","fabCornersOf","radii","create","borderRadius","fabSizesOf","sizing","height","width","controlLg","controlXl","extendedFabSizesOf","spacing","columnGap","minHeight","paddingHorizontal","sm","FabColors","container","content","fabColorsOf","colors","filled","primary","onPrimary","secondary","onSecondary","tertiary","onTertiary","tonal","primaryContainer","onPrimaryContainer","secondaryContainer","onSecondaryContainer","tertiaryContainer","onTertiaryContainer","fabPalettesOf","theme","disabled","pairs","filledDisabled","palettesFor","fabShadowsOf","shadows","elevation3","boxShadow","elevation4","fabShadowOf","hovered","pressed","isDisabled","undefined","palette","backgroundColor","label","color"],"sources":["../../src/fab/index.ts"],"sourcesContent":["import type { ViewStyle } from 'react-native'\n\nimport { StyleSheet } from 'react-native'\n\nimport type { Palette } from '../button/palettes'\nimport type { ResolvedTheme } from '../theme/scope'\nimport type { TypeRole } from '../typography/roles'\n\nimport { palettesOf } from '../button/palettes'\nimport { themedStyles } from '../theme/styles'\n\n// The FAB's metrics and colours, shared by Fab and by the FAB that opens\n// FabMenu, which is the same button until its menu opens, as web's\n// src/fab/styles.ts is shared. Apart from either component, and outside\n// `src/components`, which holds the public components alone. Fab's header\n// gives the values and where they come from.\n\n/**\n * The pages' three sizes: `md` the FAB at 56dp, `lg` the medium FAB at 80dp\n * and `xl` the large FAB at 96dp.\n */\ntype FabSize = 'lg' | 'md' | 'xl'\n\n/** The colour role a FAB is drawn in. */\ntype FabTone = 'primary' | 'secondary' | 'tertiary'\n\n/**\n * `tonal` draws the tone's container pair, the pages' default; `filled`\n * draws the tone itself.\n */\ntype FabVariant = 'filled' | 'tonal'\n\n// The medium FAB's container and corner, between the steps of the control\n// and radius scales, so written out as web writes them.\nconst MEDIUM_SIZE = 80\nconst MEDIUM_CORNER = 20\n\n/** The icon each size draws, from the pages' size token sets. */\nconst FAB_ICON_SIZES: Readonly<Record<FabSize, number>> = {\n  lg: 28,\n  md: 24,\n  xl: 36,\n}\n\n/** The type role the extended form sets its label in at each size. */\nconst EXTENDED_FAB_ROLES: Readonly<Record<FabSize, TypeRole>> = {\n  lg: 'titleLarge',\n  md: 'titleMedium',\n  xl: 'headlineSmall',\n}\n\n/**\n * Each size's corner, apart from its size so the press feedback can clip to\n * the same one.\n */\nconst fabCornersOf = themedStyles(({ radii }) =>\n  StyleSheet.create({\n    lg: { borderRadius: MEDIUM_CORNER },\n    md: { borderRadius: radii.lg },\n    xl: { borderRadius: radii.xl },\n  }),\n)\n\n/** The FAB on its own: a square of the size's edge. */\nconst fabSizesOf = themedStyles(({ sizing }) =>\n  StyleSheet.create({\n    lg: { height: MEDIUM_SIZE, width: MEDIUM_SIZE },\n    md: { height: sizing.controlLg, width: sizing.controlLg },\n    xl: { height: sizing.controlXl, width: sizing.controlXl },\n  }),\n)\n\n/**\n * The extended form: the size's height, with its padding at either end and\n * the gap before the label. The 26dp and 28dp paddings fall between steps of\n * the spacing scale and are written out, as on web.\n *\n * The height is a floor rather than a fixed size, so a label the device's\n * text size enlarges grows the button rather than spilling out of it, which\n * web's fixed height has no need to allow for.\n */\nconst extendedFabSizesOf = themedStyles(({ sizing, spacing }) =>\n  StyleSheet.create({\n    lg: {\n      columnGap: spacing.md,\n      minHeight: MEDIUM_SIZE,\n      paddingHorizontal: 26,\n    },\n    md: {\n      columnGap: spacing.sm,\n      minHeight: sizing.controlLg,\n      paddingHorizontal: spacing.lg,\n    },\n    xl: {\n      columnGap: spacing.lg,\n      minHeight: sizing.controlXl,\n      paddingHorizontal: 28,\n    },\n  }),\n)\n\n/** A FAB's container colour and the colour drawn on it. */\ntype FabColors = { readonly container: string; readonly content: string }\n\n/**\n * The six colour pairs, by variant and tone: each tone's container pair, and\n * the tone itself. Plain colours, for FabMenu's FAB, which eases from one\n * pair to another as its menu opens.\n */\nconst fabColorsOf = themedStyles(\n  ({\n    colors,\n  }): Readonly<Record<FabVariant, Readonly<Record<FabTone, FabColors>>>> => ({\n    filled: {\n      primary: { container: colors.primary, content: colors.onPrimary },\n      secondary: { container: colors.secondary, content: colors.onSecondary },\n      tertiary: { container: colors.tertiary, content: colors.onTertiary },\n    },\n    tonal: {\n      primary: {\n        container: colors.primaryContainer,\n        content: colors.onPrimaryContainer,\n      },\n      secondary: {\n        container: colors.secondaryContainer,\n        content: colors.onSecondaryContainer,\n      },\n      tertiary: {\n        container: colors.tertiaryContainer,\n        content: colors.onTertiaryContainer,\n      },\n    },\n  }),\n)\n\n/**\n * The six colour pairs as the palettes a button draws, and the one disabled\n * container every button shares: on-surface at the two disabled opacities,\n * as src/button/palettes.ts draws it.\n */\nconst fabPalettesOf = themedStyles(\n  (\n    theme,\n  ): {\n    readonly disabled: Palette\n    readonly filled: Readonly<Record<FabTone, Palette>>\n    readonly tonal: Readonly<Record<FabTone, Palette>>\n  } => {\n    const pairs = fabColorsOf(theme)\n\n    return {\n      disabled: palettesOf(theme).filledDisabled,\n      filled: palettesFor(pairs.filled),\n      tonal: palettesFor(pairs.tonal),\n    }\n  },\n)\n\nconst fabShadowsOf = themedStyles(({ shadows }) =>\n  StyleSheet.create({\n    elevation3: { boxShadow: shadows.elevation3 },\n    elevation4: { boxShadow: shadows.elevation4 },\n  }),\n)\n\n/**\n * The shadow a FAB draws in its state: level 3 at rest and while pressed,\n * level 4 under a hovering pointer, and none while disabled, since a shadow\n * says a control is there to press.\n */\nfunction fabShadowOf(\n  {\n    hovered,\n    pressed,\n  }: { readonly hovered: boolean; readonly pressed: boolean },\n  isDisabled: boolean,\n  theme: ResolvedTheme,\n): undefined | ViewStyle {\n  if (isDisabled) {\n    return undefined\n  }\n\n  return fabShadowsOf(theme)[hovered && !pressed ? 'elevation4' : 'elevation3']\n}\n\nfunction palette({ container, content }: FabColors): Palette {\n  return {\n    container: { backgroundColor: container },\n    content,\n    label: { color: content },\n  }\n}\n\nfunction palettesFor(\n  pairs: Readonly<Record<FabTone, FabColors>>,\n): Readonly<Record<FabTone, Palette>> {\n  return {\n    primary: palette(pairs.primary),\n    secondary: palette(pairs.secondary),\n    tertiary: palette(pairs.tertiary),\n  }\n}\n\nexport {\n  EXTENDED_FAB_ROLES,\n  extendedFabSizesOf,\n  FAB_ICON_SIZES,\n  fabColorsOf,\n  fabCornersOf,\n  fabPalettesOf,\n  fabShadowOf,\n  fabSizesOf,\n}\nexport type { FabColors, FabSize, FabTone, FabVariant }\n"],"mappings":";;;;AAkCA,MAAMU,cAAc;AACpB,MAAMC,gBAAgB;;AAGtB,MAAMC,iBAAoD;CACxDG,IAAI;CACJC,IAAI;CACJC,IAAI;AACN;;AAGA,MAAMC,qBAA0D;CAC9DH,IAAI;CACJC,IAAI;CACJC,IAAI;AACN;;;;;AAMA,MAAME,eAAeb,cAAc,EAAEc,YACnCnB,WAAWoB,OAAO;CAChBN,IAAI,EAAEO,cAAcX,cAAc;CAClCK,IAAI,EAAEM,cAAcF,MAAML,GAAG;CAC7BE,IAAI,EAAEK,cAAcF,MAAMH,GAAG;AAC/B,CAAC,CACH;;AAGA,MAAMM,aAAajB,cAAc,EAAEkB,aACjCvB,WAAWoB,OAAO;CAChBN,IAAI;EAAEU,QAAQf;EAAagB,OAAOhB;CAAY;CAC9CM,IAAI;EAAES,QAAQD,OAAOG;EAAWD,OAAOF,OAAOG;CAAU;CACxDV,IAAI;EAAEQ,QAAQD,OAAOI;EAAWF,OAAOF,OAAOI;CAAU;AAC1D,CAAC,CACH;;;;;;;;;;AAWA,MAAMC,qBAAqBvB,cAAc,EAAEkB,QAAQM,cACjD7B,WAAWoB,OAAO;CAChBN,IAAI;EACFgB,WAAWD,QAAQd;EACnBgB,WAAWtB;EACXuB,mBAAmB;CACrB;CACAjB,IAAI;EACFe,WAAWD,QAAQI;EACnBF,WAAWR,OAAOG;EAClBM,mBAAmBH,QAAQf;CAC7B;CACAE,IAAI;EACFc,WAAWD,QAAQf;EACnBiB,WAAWR,OAAOI;EAClBK,mBAAmB;CACrB;AACF,CAAC,CACH;;;;;;AAUA,MAAMK,cAAchC,cACjB,EACCiC,cACyE;CACzEC,QAAQ;EACNC,SAAS;GAAEL,WAAWG,OAAOE;GAASJ,SAASE,OAAOG;EAAU;EAChEC,WAAW;GAAEP,WAAWG,OAAOI;GAAWN,SAASE,OAAOK;EAAY;EACtEC,UAAU;GAAET,WAAWG,OAAOM;GAAUR,SAASE,OAAOO;EAAW;CACrE;CACAC,OAAO;EACLN,SAAS;GACPL,WAAWG,OAAOS;GAClBX,SAASE,OAAOU;EAClB;EACAN,WAAW;GACTP,WAAWG,OAAOW;GAClBb,SAASE,OAAOY;EAClB;EACAN,UAAU;GACRT,WAAWG,OAAOa;GAClBf,SAASE,OAAOc;EAClB;CACF;AACF,EACF;;;;;;AAOA,MAAMC,gBAAgBhD,cAElBiD,UAKG;CACH,MAAME,QAAQnB,YAAYiB,KAAK;CAE/B,OAAO;EACLC,UAAUnD,WAAWkD,KAAK,CAAC,CAACG;EAC5BlB,QAAQmB,YAAYF,MAAMjB,MAAM;EAChCO,OAAOY,YAAYF,MAAMV,KAAK;CAChC;AACF,CACF;AAEA,MAAMa,eAAetD,cAAc,EAAEuD,cACnC5D,WAAWoB,OAAO;CAChByC,YAAY,EAAEC,WAAWF,QAAQC,WAAW;CAC5CE,YAAY,EAAED,WAAWF,QAAQG,WAAW;AAC9C,CAAC,CACH;;;;;;AAOA,SAASC,YACP,EACEC,SACAC,WAEFC,YACAb,OACuB;CACvB,IAAIa,YACF;CAGF,OAAOR,aAAaL,KAAK,CAAC,CAACW,WAAW,CAACC,UAAU,eAAe;AAClE;AAEA,SAASG,QAAQ,EAAElC,WAAWC,WAA+B;CAC3D,OAAO;EACLD,WAAW,EAAEmC,iBAAiBnC,UAAU;EACxCC;EACAmC,OAAO,EAAEC,OAAOpC,QAAQ;CAC1B;AACF;AAEA,SAASsB,YACPF,OACoC;CACpC,OAAO;EACLhB,SAAS6B,QAAQb,MAAMhB,OAAO;EAC9BE,WAAW2B,QAAQb,MAAMd,SAAS;EAClCE,UAAUyB,QAAQb,MAAMZ,QAAQ;CAClC;AACF"}