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

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

@@ -2,6 +2,7 @@ import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
 import { usePressFeedback } from "../../press/index.js";
 import { useTypeRole } from "../../typography/roles.js";
+import { useMessages } from "../../i18n/provider.js";
 import { CloseGlyph } from "../../glyphs/index.js";
 import { AnimatedPressable, toggleState } from "../../button/index.js";
 import { stylesOf } from "../../chip/styles.js";
@@ -98,14 +99,14 @@ function ChipGroup(t0) {
 	let label;
 	let onRemove;
 	let onSelectionChange;
+	let ownRemoveLabel;
 	let props;
 	let renderEmptyState;
 	let selectedKeys;
 	let style;
 	let t1;
-	let t2;
 	if ($[0] !== t0) {
-		({children, defaultSelectedKeys, description, disabledKeys, disallowEmptySelection, error, items, label, onRemove, onSelectionChange, removeLabel: t1, renderEmptyState, selectedKeys, selectionMode: t2, style, ...props} = t0);
+		({children, defaultSelectedKeys, description, disabledKeys, disallowEmptySelection, error, items, label, onRemove, onSelectionChange, removeLabel: ownRemoveLabel, renderEmptyState, selectedKeys, selectionMode: t1, style, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = defaultSelectedKeys;
@@ -117,12 +118,12 @@ function ChipGroup(t0) {
 		$[8] = label;
 		$[9] = onRemove;
 		$[10] = onSelectionChange;
-		$[11] = props;
-		$[12] = renderEmptyState;
-		$[13] = selectedKeys;
-		$[14] = style;
-		$[15] = t1;
-		$[16] = t2;
+		$[11] = ownRemoveLabel;
+		$[12] = props;
+		$[13] = renderEmptyState;
+		$[14] = selectedKeys;
+		$[15] = style;
+		$[16] = t1;
 	} else {
 		children = $[1];
 		defaultSelectedKeys = $[2];
@@ -134,21 +135,22 @@ function ChipGroup(t0) {
 		label = $[8];
 		onRemove = $[9];
 		onSelectionChange = $[10];
-		props = $[11];
-		renderEmptyState = $[12];
-		selectedKeys = $[13];
-		style = $[14];
-		t1 = $[15];
-		t2 = $[16];
+		ownRemoveLabel = $[11];
+		props = $[12];
+		renderEmptyState = $[13];
+		selectedKeys = $[14];
+		style = $[15];
+		t1 = $[16];
 	}
-	const removeLabel = t1 === void 0 ? "Remove" : t1;
-	const selectionMode = t2 === void 0 ? "none" : t2;
+	const selectionMode = t1 === void 0 ? "none" : t1;
+	const messages = useMessages();
+	const removeLabel = ownRemoveLabel ?? messages.remove;
 	const theme = useTheme();
-	const t3 = children;
-	let t4;
-	if ($[17] !== defaultSelectedKeys || $[18] !== disabledKeys || $[19] !== disallowEmptySelection || $[20] !== items || $[21] !== onSelectionChange || $[22] !== selectedKeys || $[23] !== selectionMode || $[24] !== t3) {
-		t4 = {
-			children: t3,
+	const t2 = children;
+	let t3;
+	if ($[17] !== defaultSelectedKeys || $[18] !== disabledKeys || $[19] !== disallowEmptySelection || $[20] !== items || $[21] !== onSelectionChange || $[22] !== selectedKeys || $[23] !== selectionMode || $[24] !== t2) {
+		t3 = {
+			children: t2,
 			defaultSelectedKeys,
 			disabledKeys,
 			disallowEmptySelection,
@@ -164,36 +166,36 @@ function ChipGroup(t0) {
 		$[21] = onSelectionChange;
 		$[22] = selectedKeys;
 		$[23] = selectionMode;
-		$[24] = t3;
-		$[25] = t4;
-	} else t4 = $[25];
-	const state = useListState(t4);
+		$[24] = t2;
+		$[25] = t3;
+	} else t3 = $[25];
+	const state = useListState(t3);
 	const labelId = useId();
 	const messageId = useId();
 	const labelRole = useTypeRole("labelLarge");
 	const messageRole = useTypeRole("bodySmall");
-	let t5;
+	let t4;
 	if ($[26] !== description || $[27] !== error || $[28] !== label || $[29] !== labelId || $[30] !== labelRole || $[31] !== messageId || $[32] !== messageRole || $[33] !== onRemove || $[34] !== props || $[35] !== removeLabel || $[36] !== renderEmptyState || $[37] !== state || $[38] !== style || $[39] !== theme) {
 		const own = groupStylesOf(theme);
 		const invalid = error !== void 0;
 		const message = error ?? description;
-		let t6;
+		let t5;
 		if ($[41] !== state.collection) {
-			t6 = [...state.collection];
+			t5 = [...state.collection];
 			$[41] = state.collection;
-			$[42] = t6;
-		} else t6 = $[42];
-		const nodes = t6;
-		let t7;
+			$[42] = t5;
+		} else t5 = $[42];
+		const nodes = t5;
+		let t6;
 		if ($[43] !== message || $[44] !== messageId) {
-			t7 = lineOf(messageId, message);
+			t6 = lineOf(messageId, message);
 			$[43] = message;
 			$[44] = messageId;
-			$[45] = t7;
-		} else t7 = $[45];
-		let t8;
+			$[45] = t6;
+		} else t6 = $[45];
+		let t7;
 		if ($[46] !== nodes || $[47] !== onRemove || $[48] !== removeLabel || $[49] !== renderEmptyState || $[50] !== state) {
-			t8 = nodes.length === 0 ? renderEmptyState?.() : nodes.map((node) => /* @__PURE__ */ jsx(GroupChip, {
+			t7 = nodes.length === 0 ? renderEmptyState?.() : nodes.map((node) => /* @__PURE__ */ jsx(GroupChip, {
 				node,
 				onRemove,
 				removeLabel,
@@ -204,13 +206,13 @@ function ChipGroup(t0) {
 			$[48] = removeLabel;
 			$[49] = renderEmptyState;
 			$[50] = state;
-			$[51] = t8;
-		} else t8 = $[51];
-		t5 = /* @__PURE__ */ jsxs(View, {
+			$[51] = t7;
+		} else t7 = $[51];
+		t4 = /* @__PURE__ */ jsxs(View, {
 			...props,
 			"aria-labelledby": labelId,
 			role: "group",
-			...t7,
+			...t6,
 			style: composeStyles(own.root, style),
 			children: [
 				/* @__PURE__ */ jsx(Text, {
@@ -220,7 +222,7 @@ function ChipGroup(t0) {
 				}),
 				/* @__PURE__ */ jsx(View, {
 					style: own.list,
-					children: t8
+					children: t7
 				}),
 				message === void 0 ? null : /* @__PURE__ */ jsx(View, {
 					style: own.messageLine,
@@ -246,9 +248,9 @@ function ChipGroup(t0) {
 		$[37] = state;
 		$[38] = style;
 		$[39] = theme;
-		$[40] = t5;
-	} else t5 = $[40];
-	return t5;
+		$[40] = t4;
+	} else t4 = $[40];
+	return t4;
 }
 /**
 * One chip of a `ChipGroup`, which draws it: the group builds its set from

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ComponentRef","ReactElement","ReactNode","Ref","GestureResponderEvent","Insets","PressableProps","StyleProp","TextStyle","ViewProps","ViewStyle","AnimatedStyle","Key","Node","Selection","SelectionMode","ListProps","ListState","useId","useState","Text","NativeText","Platform","Pressable","StyleSheet","View","Animated","useListState","AnimatedPressable","toggleState","ChipGlyph","ChipLabel","measureThen","paintOf","targetOf","useEasedColors","GLYPH_SIZE","RULE_WIDTH","stylesOf","CloseGlyph","TARGET_SIZE","usePressFeedback","useTheme","composeStyles","themedStyles","useTypeRole","ChipGroupChipProps","Omit","children","icon","id","isDisabled","ref","style","textValue","ChipGroupProps","item","T","defaultSelectedKeys","Iterable","description","disabledKeys","disallowEmptySelection","error","items","label","onRemove","keys","Set","onSelectionChange","removeLabel","renderEmptyState","selectedKeys","selectionMode","REMOVE_REACH","bottom","left","right","top","styles","create","chip","maxWidth","layer","position","groupStylesOf","colors","radii","sizing","spacing","stateLayerOpacity","color","onSurfaceVariant","labelError","list","alignItems","flexDirection","flexWrap","gap","sm","minHeight","controlXs","message","messageError","messageLine","marginTop","xs","removable","paddingEnd","lg","remove","borderRadius","circle","end","height","justifyContent","width","removeHovered","opacity","hover","removeLayer","removePressed","pressed","root","rowGap","ChipGroup","t0","$","_c","props","t1","t2","undefined","theme","t3","t4","state","labelId","messageId","labelRole","messageRole","t5","own","invalid","t6","collection","nodes","t7","lineOf","t8","length","map","node","key","ChipGroupChip","_props","getCollectionNode","hasChildNodes","rendered","type","GroupChip","hitSlop","onBlur","onFocus","onHoverIn","onHoverOut","onLayout","onPress","onPressIn","onPressOut","_id","_isDisabled","t9","t10","t11","t12","_textValue","t13","setWidth","selectionManager","selectable","selected","isSelected","assist","disabled","elevated","paint","eased","corners","feedback","container","ring","pill","glyph","content","target","handlers","selectThen","removeThen","OS","RemoveButton","disableRipple","T0","T1","hovered","ringOf","backgroundColor","outlineColor","outlineOffset","outlineStyle","outlineWidth","event","select","Chip","_c","NativeText"],"sources":["../../../src/components/chip-group/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactElement, ReactNode, Ref } from 'react'\nimport type {\n  GestureResponderEvent,\n  Insets,\n  PressableProps,\n  StyleProp,\n  TextStyle,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\nimport type { Key, Node, Selection, SelectionMode } from 'react-stately'\nimport type { ListProps, ListState } from 'react-stately/useListState'\n\nimport { useId, useState } from 'react'\nimport {\n  Text as NativeText,\n  Platform,\n  Pressable,\n  StyleSheet,\n  View,\n} from 'react-native'\nimport Animated from 'react-native-reanimated'\nimport { useListState } from 'react-stately/useListState'\n\nimport { AnimatedPressable, toggleState } from '../../button'\nimport {\n  ChipGlyph,\n  ChipLabel,\n  measureThen,\n  paintOf,\n  targetOf,\n  useEasedColors,\n} from '../../chip'\nimport { GLYPH_SIZE, RULE_WIDTH, stylesOf } from '../../chip/styles'\nimport { CloseGlyph } from '../../glyphs'\nimport { TARGET_SIZE, usePressFeedback } from '../../press'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useTypeRole } from '../../typography/roles'\n\n// The chips page's filter and input chips as a set, as kanso-ui's ChipGroup\n// draws them: one or more chosen from a row that wraps, each one removable.\n// The pill is src/chip's, shared with Chip, so the two cannot drift; what is\n// here is the group around them.\n//\n// **Selection is the group's, not each chip's.** It is React Stately's\n// `useListState`, as web's is React Aria's, so `selectionMode`,\n// `selectedKeys`, `defaultSelectedKeys`, `onSelectionChange` and\n// `disabledKeys` behave as they do there. A press on a chip selects it, or\n// clears it if it was selected; in a group that selects one, a press on\n// another moves the selection there. A chip in a group that selects nothing is\n// not a button at all, since a press there would change nothing.\n//\n// **A chip can be removed.** Give the group `onRemove` and each chip draws the\n// page's trailing close glyph, an 18dp glyph in the label's colour, in a\n// target of its own so a press there removes rather than selects. It is a\n// sibling of the chip's own button rather than a child, laid over the pill's\n// end: VoiceOver reaches nothing inside a button, so a close target inside one\n// could never be focused. Its target is WCAG's 24dp, as on web, since the chip\n// around it is no spacing to lean on when the group selects. It draws its\n// hover and pressed layers in the label's colour, and on focus from a key a\n// 2dp ring in the same colour, 1dp out, as web's does: a second ring in the\n// focus role inside a chip would read as two focus treatments for one focus.\n//\n// The label, the line under the chips and the gaps between them are the\n// field chrome's, as RadioGroup draws them: the label in label large and on\n// surface variant, or error while the group has one; the chips 8dp apart and\n// wrapping, from the start edge, so from the right under a right-to-left\n// layout; and the line under them in body small, 4dp further down. The row\n// keeps a chip's height while it is empty, so removing the last chip leaves\n// what sits under the group where it was.\n//\n// Three departures from web. Arrow keys do not move between the chips, and\n// Backspace and Delete do not remove one: each chip and each close target is\n// a stop of its own for a hardware keyboard. The close target is named\n// `Remove` and the chip's text in English unless `removeLabel` says\n// otherwise, where web's follows the reader's locale. And the close glyph\n// takes the label's colour at once rather than easing with it, as the check\n// does.\n\ntype ChipGroupChipProps = Omit<\n  PressableProps,\n  'children' | 'disabled' | 'id' | 'style'\n> & {\n  /** The chip's label. */\n  readonly children: ReactNode\n  /**\n   * An icon before the label, in the page's 18dp slot and the primary role,\n   * which the slot hands it through `useIconStyle()`. The check takes its\n   * place while the chip is chosen, so the chip keeps its width.\n   */\n  readonly icon?: ReactNode\n  /**\n   * The key selection and removal report the chip by. Without one, a chip\n   * drawn from `items` takes its item's `id` or `key`.\n   */\n  readonly id?: Key\n  /**\n   * Draws the chip disabled, and takes no presses on it or on its close\n   * target, as a key in the group's `disabledKeys` does.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * The chip's text, which names its close target. Read off `children` when\n   * they are a plain string, so a chip whose label is an element passes it.\n   */\n  readonly textValue?: string\n}\n\ntype ChipGroupProps<T extends object = object> = Omit<\n  ViewProps,\n  'children' | 'style'\n> & {\n  /**\n   * The chips, each a `ChipGroup.Chip` with an `id` of its own. With\n   * `items`, a function from an item to its chip, called for each item in\n   * turn.\n   */\n  readonly children?: ((item: T) => ReactElement) | ReactNode\n  /** The keys selected at first, when the group keeps its own selection. */\n  readonly defaultSelectedKeys?: 'all' | Iterable<Key>\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  readonly description?: string\n  /** The keys of the chips drawn disabled, which take no presses. */\n  readonly disabledKeys?: Iterable<Key>\n  /**\n   * Keeps the last selected chip selected, so a press on it changes\n   * nothing.\n   * @default false\n   */\n  readonly disallowEmptySelection?: boolean\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state: the message and the label's colour\n   * both follow from it.\n   */\n  readonly error?: string\n  /** The entries `children` draws a chip for, when it is a function. */\n  readonly items?: Iterable<T>\n  /**\n   * What the group is for. Required rather than optional: a set of chips\n   * with no name is a row a screen reader cannot introduce.\n   */\n  readonly label: string\n  /**\n   * Called with the key of the chip whose close target was pressed. Given\n   * this, every chip draws one; the call site removes the chip from what it\n   * renders.\n   */\n  readonly onRemove?: (keys: Set<Key>) => void\n  /** Called with the selected keys whenever a press changes them. */\n  readonly onSelectionChange?: (keys: Selection) => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * What the close target on each chip is called, for a screen reader. The\n   * chip's own text follows it, so this is the verb rather than the whole\n   * phrase: \"Remove\" becomes \"Remove First item\".\n   * @default 'Remove'\n   */\n  readonly removeLabel?: string\n  /** What the row draws once it holds no chips. */\n  readonly renderEmptyState?: () => ReactNode\n  /**\n   * The selected keys, for a call site holding the selection itself with\n   * `onSelectionChange`.\n   */\n  readonly selectedKeys?: 'all' | Iterable<Key>\n  /**\n   * Whether a press selects a chip: one at a time, several, or none, in\n   * which case the chips are not buttons.\n   * @default 'none'\n   */\n  readonly selectionMode?: SelectionMode\n  readonly style?: StyleProp<ViewStyle>\n}\n\n// The close target reaches 3dp past its 18dp glyph on every side, which is\n// WCAG's 24dp.\nconst REMOVE_REACH: Insets = { bottom: 3, left: 3, right: 3, top: 3 }\n\nconst styles = StyleSheet.create({\n  // Holds the pill and the close target laid over it, and is never wider\n  // than the row, so the pill inside has a width to cut its label at.\n  chip: {\n    maxWidth: '100%',\n  },\n  layer: {\n    bottom: 0,\n    left: 0,\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n})\n\nconst groupStylesOf = themedStyles(\n  ({ colors, radii, sizing, spacing, stateLayerOpacity }) =>\n    StyleSheet.create({\n      label: {\n        color: colors.onSurfaceVariant,\n      },\n      labelError: {\n        color: colors.error,\n      },\n      // The chips, 8dp apart and wrapping rather than running off the end,\n      // since a set is read all at once. A chip's height while empty.\n      list: {\n        alignItems: 'center',\n        flexDirection: 'row',\n        flexWrap: 'wrap',\n        gap: spacing.sm,\n        minHeight: sizing.controlXs,\n      },\n      message: {\n        color: colors.onSurfaceVariant,\n      },\n      messageError: {\n        color: colors.error,\n      },\n      messageLine: {\n        marginTop: spacing.xs,\n      },\n      // A removable pill leaves room at its end for the close target, its 8dp\n      // gap before it and the 8dp the page pads after it.\n      removable: {\n        paddingEnd: spacing.lg + GLYPH_SIZE,\n      },\n      // The close target, over the pill's end, where the pill's own padding\n      // would end: the page pads 8dp on the side the glyph is on, and the\n      // label keeps the chip's 8dp gap before it.\n      remove: {\n        alignItems: 'center',\n        borderRadius: radii.circle,\n        end: RULE_WIDTH + spacing.lg - spacing.sm,\n        height: GLYPH_SIZE,\n        justifyContent: 'center',\n        marginTop: -GLYPH_SIZE / 2,\n        position: 'absolute',\n        top: '50%',\n        width: GLYPH_SIZE,\n      },\n      removeHovered: {\n        opacity: stateLayerOpacity.hover,\n      },\n      removeLayer: {\n        borderRadius: radii.circle,\n        opacity: 0,\n      },\n      removePressed: {\n        opacity: stateLayerOpacity.pressed,\n      },\n      root: {\n        flexDirection: 'column',\n        rowGap: spacing.xs,\n      },\n    }),\n)\n\n/**\n * A labelled set of chips, one or more of which can be chosen, each of which\n * can be removed. Selection is React Stately's: set `selectionMode` to\n * `single` or `multiple`, and pass `selectedKeys` with `onSelectionChange` to\n * control it, or `defaultSelectedKeys` to let the group keep its own.\n *\n * ```tsx\n * <ChipGroup label=\"Label\" onRemove={remove} selectionMode=\"multiple\">\n *   <ChipGroup.Chip id=\"first\">First item</ChipGroup.Chip>\n * </ChipGroup>\n * ```\n *\n * Give the group `onRemove` and each chip draws a close target. A chip that\n * toggles nothing else is Chip; this is for a set that shares a value.\n *\n * A screen reader hears a group named by its label, and each chip as a button\n * named by its label, selected or not. On the web the line under the group\n * describes it, as web's does; on iOS and Android it is read after the chips,\n * where it sits. `style`, `ref` and `testID` land on the group as a whole,\n * which is the element a layout positions.\n */\nfunction ChipGroup<T extends object = object>({\n  children,\n  defaultSelectedKeys,\n  description,\n  disabledKeys,\n  disallowEmptySelection,\n  error,\n  items,\n  label,\n  onRemove,\n  onSelectionChange,\n  removeLabel = 'Remove',\n  renderEmptyState,\n  selectedKeys,\n  selectionMode = 'none',\n  style,\n  ...props\n}: ChipGroupProps<T>) {\n  const theme = useTheme()\n  const state = useListState<T>({\n    // Each chip builds its own entry in the collection; see\n    // `ChipGroupChip.getCollectionNode`. The collection skips what is not an\n    // element, as a ReactNode may be, and asks any element for its entry.\n    // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- see above\n    children: children as ListProps<T>['children'],\n    defaultSelectedKeys,\n    disabledKeys,\n    disallowEmptySelection,\n    items,\n    onSelectionChange,\n    selectedKeys,\n    selectionMode,\n  })\n  const labelId = useId()\n  const messageId = useId()\n  const labelRole = useTypeRole('labelLarge')\n  const messageRole = useTypeRole('bodySmall')\n\n  const own = groupStylesOf(theme)\n  const invalid = error !== undefined\n  const message = error ?? description\n  const nodes = [...state.collection]\n\n  return (\n    <View\n      {...props}\n      aria-labelledby={labelId}\n      role=\"group\"\n      {...lineOf(messageId, message)}\n      style={composeStyles<ViewStyle>(own.root, style)}\n    >\n      <NativeText\n        id={labelId}\n        style={composeStyles<TextStyle>(\n          labelRole,\n          own.label,\n          invalid ? own.labelError : undefined,\n        )}\n      >\n        {label}\n      </NativeText>\n      <View style={own.list}>\n        {nodes.length === 0\n          ? renderEmptyState?.()\n          : nodes.map((node) => (\n              <GroupChip\n                key={node.key}\n                node={node}\n                onRemove={onRemove}\n                removeLabel={removeLabel}\n                state={state}\n              />\n            ))}\n      </View>\n      {message === undefined ? null : (\n        <View style={own.messageLine}>\n          <NativeText\n            id={messageId}\n            style={composeStyles<TextStyle>(\n              messageRole,\n              own.message,\n              invalid ? own.messageError : undefined,\n            )}\n          >\n            {message}\n          </NativeText>\n        </View>\n      )}\n    </View>\n  )\n}\n\n/**\n * One chip of a `ChipGroup`, which draws it: the group builds its set from\n * these, so one renders nothing on its own. Give every chip an `id`, which is\n * the key selection and removal report it by.\n */\nfunction ChipGroupChip(_props: ChipGroupChipProps): null {\n  return null\n}\n\n// The entry the group's collection holds for a chip, as React Stately's own\n// `Item` gives one: keyed by the chip's `id`, and carrying the props the group\n// draws it from.\nChipGroupChip.getCollectionNode = function* getCollectionNode(\n  props: ChipGroupChipProps,\n) {\n  yield {\n    'aria-label': props['aria-label'],\n    hasChildNodes: false,\n    key: props.id,\n    props,\n    rendered: props.children,\n    textValue:\n      props.textValue ??\n      (typeof props.children === 'string' ? props.children : ''),\n    type: 'item',\n  }\n}\n\n/**\n * A chip as the group draws it, from its entry in the collection: the pill,\n * which is a button while the group selects, and the close target over its\n * end while the group removes.\n */\nfunction GroupChip<T>({\n  node,\n  onRemove,\n  removeLabel,\n  state,\n}: {\n  readonly node: Node<T>\n  readonly onRemove: ((keys: Set<Key>) => void) | undefined\n  readonly removeLabel: string\n  readonly state: ListState<T>\n}) {\n  const theme = useTheme()\n  // A node carries the props its chip was written with, which\n  // `getCollectionNode` puts there and React Stately types as `any`.\n  // oxlint-disable-next-line typescript/no-unsafe-assignment -- see above\n  const {\n    children,\n    hitSlop,\n    icon,\n    id: _id,\n    isDisabled: _isDisabled,\n    onBlur,\n    onFocus,\n    onHoverIn,\n    onHoverOut,\n    onLayout,\n    onPress,\n    onPressIn,\n    onPressOut,\n    style,\n    textValue: _textValue,\n    ...props\n  }: ChipGroupChipProps = node.props\n  // Until the chip is measured it takes no reach across, rather than one\n  // sized for a chip of no width.\n  const [width, setWidth] = useState(TARGET_SIZE)\n\n  const { selectionManager } = state\n  // The selection manager reads a chip's own `isDisabled` off its node, beside\n  // the group's `disabledKeys`, so it answers for both.\n  const isDisabled = selectionManager.isDisabled(node.key)\n  const selectable = selectionManager.selectionMode !== 'none'\n  const selected = selectionManager.isSelected(node.key)\n  const paint = paintOf(theme, {\n    assist: false,\n    disabled: isDisabled,\n    elevated: false,\n    selected,\n  })\n  const eased = useEasedColors(paint)\n\n  const feedback = usePressFeedback({\n    color: paint.layer,\n    corners: { borderRadius: theme.radii.sm },\n    disabled: isDisabled,\n    onBlur,\n    onFocus,\n    onHoverIn,\n    onHoverOut,\n    onPressIn,\n    onPressOut,\n  })\n\n  const pill = composeStyles<AnimatedStyle<ViewStyle>>(\n    stylesOf(theme).pill,\n    eased.container,\n    onRemove === undefined ? undefined : groupStylesOf(theme).removable,\n    feedback.ring,\n    style,\n  )\n  const content = (\n    <>\n      {selectable ? feedback.layer : null}\n      <ChipGlyph color={paint.glyph} icon={icon} selected={selected} />\n      <ChipLabel color={eased.label}>{children}</ChipLabel>\n    </>\n  )\n  const target = hitSlop ?? targetOf(width, theme)\n\n  return (\n    // The view holding the two takes the chip's target too: iOS and Android\n    // hand a touch to a view only once its parent has taken it.\n    <View hitSlop={selectable ? target : undefined} style={styles.chip}>\n      {selectable ? (\n        <AnimatedPressable\n          role=\"button\"\n          {...toggleState(selected)}\n          {...props}\n          {...feedback.handlers}\n          disabled={isDisabled}\n          hitSlop={target}\n          onLayout={measureThen(setWidth, onLayout)}\n          onPress={selectThen(state, node.key, onPress)}\n          style={pill}\n        >\n          {content}\n        </AnimatedPressable>\n      ) : (\n        // A press here changes nothing, so the chip is a view, and takes the\n        // props a view has; a press handler among them is never called.\n        <Animated.View\n          {...props}\n          aria-disabled={isDisabled}\n          onLayout={onLayout ?? undefined}\n          style={pill}\n        >\n          {content}\n        </Animated.View>\n      )}\n      {onRemove === undefined ? null : (\n        <RemoveButton\n          color={paint.content}\n          isDisabled={isDisabled}\n          label={\n            node.textValue === ''\n              ? removeLabel\n              : `${removeLabel} ${node.textValue}`\n          }\n          onPress={removeThen(onRemove, node.key)}\n        />\n      )}\n    </View>\n  )\n}\n\n/**\n * How the group is described by the line under it. On the web it points at\n * the line with `aria-describedby`, as web's group does. iOS and Android\n * focus the chips rather than the group, so there the line is left where a\n * screen reader reaches it in order, after the last chip.\n */\nfunction lineOf(id: string, message: string | undefined) {\n  return Platform.OS === 'web' && message !== undefined\n    ? { 'aria-describedby': id }\n    : undefined\n}\n\n/**\n * A chip's close target: the close glyph in the label's colour, with a hover\n * and a pressed layer of its own and a ring for focus from a key, as the\n * header sets out.\n */\nfunction RemoveButton({\n  color,\n  isDisabled,\n  label,\n  onPress,\n}: {\n  readonly color: string\n  readonly isDisabled: boolean\n  readonly label: string\n  readonly onPress: () => void\n}) {\n  const theme = useTheme()\n  const feedback = usePressFeedback({\n    color,\n    disabled: isDisabled,\n    disableRipple: true,\n  })\n  const own = groupStylesOf(theme)\n\n  return (\n    <Pressable\n      aria-label={label}\n      role=\"button\"\n      {...feedback.handlers}\n      disabled={isDisabled}\n      hitSlop={REMOVE_REACH}\n      onPress={onPress}\n      style={composeStyles<ViewStyle>(\n        own.remove,\n        feedback.ring === undefined ? undefined : ringOf(color),\n      )}\n    >\n      <View\n        style={composeStyles<ViewStyle>(\n          styles.layer,\n          own.removeLayer,\n          { backgroundColor: color },\n          feedback.hovered ? own.removeHovered : undefined,\n          feedback.pressed ? own.removePressed : undefined,\n        )}\n      />\n      <CloseGlyph color={color} size={GLYPH_SIZE} />\n    </Pressable>\n  )\n}\n\n// What a press on a chip's close target reports. Built by a call rather than\n// declared in the component, which is what react-perf's\n// jsx-no-new-function-as-prop is after; the React Compiler memoises the\n// result on its inputs.\nfunction removeThen(onRemove: (keys: Set<Key>) => void, key: Key) {\n  return () => {\n    onRemove(new Set([key]))\n  }\n}\n\n// The close target's ring: 2dp in the label's colour, 1dp out, as web's.\nfunction ringOf(color: string): ViewStyle {\n  return {\n    outlineColor: color,\n    outlineOffset: 1,\n    outlineStyle: 'solid',\n    outlineWidth: 2,\n  }\n}\n\n// A press on a chip: the call site's own `onPress`, then the selection,\n// which selects the chip, or clears it if it was selected and the group\n// allows that.\nfunction selectThen<T>(\n  state: ListState<T>,\n  key: Key,\n  onPress: ((event: GestureResponderEvent) => void) | null | undefined,\n) {\n  return (event: GestureResponderEvent) => {\n    onPress?.(event)\n    state.selectionManager.select(key)\n  }\n}\n\nChipGroup.Chip = ChipGroupChip\n\nexport { ChipGroup, ChipGroupChip }\nexport type { ChipGroupChipProps, ChipGroupProps }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ComponentRef","ReactElement","ReactNode","Ref","GestureResponderEvent","Insets","PressableProps","StyleProp","TextStyle","ViewProps","ViewStyle","AnimatedStyle","Key","Node","Selection","SelectionMode","ListProps","ListState","useId","useState","Text","NativeText","Platform","Pressable","StyleSheet","View","Animated","useListState","AnimatedPressable","toggleState","ChipGlyph","ChipLabel","measureThen","paintOf","targetOf","useEasedColors","GLYPH_SIZE","RULE_WIDTH","stylesOf","CloseGlyph","useMessages","TARGET_SIZE","usePressFeedback","useTheme","composeStyles","themedStyles","useTypeRole","ChipGroupChipProps","Omit","children","icon","id","isDisabled","ref","style","textValue","ChipGroupProps","item","T","defaultSelectedKeys","Iterable","description","disabledKeys","disallowEmptySelection","error","items","label","onRemove","keys","Set","onSelectionChange","removeLabel","renderEmptyState","selectedKeys","selectionMode","REMOVE_REACH","bottom","left","right","top","styles","create","chip","maxWidth","layer","position","groupStylesOf","colors","radii","sizing","spacing","stateLayerOpacity","color","onSurfaceVariant","labelError","list","alignItems","flexDirection","flexWrap","gap","sm","minHeight","controlXs","message","messageError","messageLine","marginTop","xs","removable","paddingEnd","lg","remove","borderRadius","circle","end","height","justifyContent","width","removeHovered","opacity","hover","removeLayer","removePressed","pressed","root","rowGap","ChipGroup","t0","$","_c","ownRemoveLabel","props","t1","undefined","messages","theme","t2","t3","state","labelId","messageId","labelRole","messageRole","t4","own","invalid","t5","collection","nodes","t6","lineOf","t7","length","map","node","key","ChipGroupChip","_props","getCollectionNode","hasChildNodes","rendered","type","GroupChip","hitSlop","onBlur","onFocus","onHoverIn","onHoverOut","onLayout","onPress","onPressIn","onPressOut","_id","_isDisabled","t8","t9","t10","t11","t12","_textValue","t13","setWidth","selectionManager","selectable","selected","isSelected","assist","disabled","elevated","paint","eased","corners","feedback","container","ring","pill","glyph","content","target","handlers","selectThen","removeThen","OS","RemoveButton","disableRipple","T0","T1","hovered","ringOf","backgroundColor","outlineColor","outlineOffset","outlineStyle","outlineWidth","event","select","Chip","_c","NativeText"],"sources":["../../../src/components/chip-group/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactElement, ReactNode, Ref } from 'react'\nimport type {\n  GestureResponderEvent,\n  Insets,\n  PressableProps,\n  StyleProp,\n  TextStyle,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\nimport type { Key, Node, Selection, SelectionMode } from 'react-stately'\nimport type { ListProps, ListState } from 'react-stately/useListState'\n\nimport { useId, useState } from 'react'\nimport {\n  Text as NativeText,\n  Platform,\n  Pressable,\n  StyleSheet,\n  View,\n} from 'react-native'\nimport Animated from 'react-native-reanimated'\nimport { useListState } from 'react-stately/useListState'\n\nimport { AnimatedPressable, toggleState } from '../../button'\nimport {\n  ChipGlyph,\n  ChipLabel,\n  measureThen,\n  paintOf,\n  targetOf,\n  useEasedColors,\n} from '../../chip'\nimport { GLYPH_SIZE, RULE_WIDTH, stylesOf } from '../../chip/styles'\nimport { CloseGlyph } from '../../glyphs'\nimport { useMessages } from '../../i18n/provider'\nimport { TARGET_SIZE, usePressFeedback } from '../../press'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useTypeRole } from '../../typography/roles'\n\n// The chips page's filter and input chips as a set, as kanso-ui's ChipGroup\n// draws them: one or more chosen from a row that wraps, each one removable.\n// The pill is src/chip's, shared with Chip, so the two cannot drift; what is\n// here is the group around them.\n//\n// **Selection is the group's, not each chip's.** It is React Stately's\n// `useListState`, as web's is React Aria's, so `selectionMode`,\n// `selectedKeys`, `defaultSelectedKeys`, `onSelectionChange` and\n// `disabledKeys` behave as they do there. A press on a chip selects it, or\n// clears it if it was selected; in a group that selects one, a press on\n// another moves the selection there. A chip in a group that selects nothing is\n// not a button at all, since a press there would change nothing.\n//\n// **A chip can be removed.** Give the group `onRemove` and each chip draws the\n// page's trailing close glyph, an 18dp glyph in the label's colour, in a\n// target of its own so a press there removes rather than selects. It is a\n// sibling of the chip's own button rather than a child, laid over the pill's\n// end: VoiceOver reaches nothing inside a button, so a close target inside one\n// could never be focused. Its target is WCAG's 24dp, as on web, since the chip\n// around it is no spacing to lean on when the group selects. It draws its\n// hover and pressed layers in the label's colour, and on focus from a key a\n// 2dp ring in the same colour, 1dp out, as web's does: a second ring in the\n// focus role inside a chip would read as two focus treatments for one focus.\n//\n// The label, the line under the chips and the gaps between them are the\n// field chrome's, as RadioGroup draws them: the label in label large and on\n// surface variant, or error while the group has one; the chips 8dp apart and\n// wrapping, from the start edge, so from the right under a right-to-left\n// layout; and the line under them in body small, 4dp further down. The row\n// keeps a chip's height while it is empty, so removing the last chip leaves\n// what sits under the group where it was.\n//\n// Two departures from web. Arrow keys do not move between the chips, and\n// Backspace and Delete do not remove one: each chip and each close target is\n// a stop of its own for a hardware keyboard. And the close glyph takes the\n// label's colour at once rather than easing with it, as the check does.\n\ntype ChipGroupChipProps = Omit<\n  PressableProps,\n  'children' | 'disabled' | 'id' | 'style'\n> & {\n  /** The chip's label. */\n  readonly children: ReactNode\n  /**\n   * An icon before the label, in the page's 18dp slot and the primary role,\n   * which the slot hands it through `useIconStyle()`. The check takes its\n   * place while the chip is chosen, so the chip keeps its width.\n   */\n  readonly icon?: ReactNode\n  /**\n   * The key selection and removal report the chip by. Without one, a chip\n   * drawn from `items` takes its item's `id` or `key`.\n   */\n  readonly id?: Key\n  /**\n   * Draws the chip disabled, and takes no presses on it or on its close\n   * target, as a key in the group's `disabledKeys` does.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * The chip's text, which names its close target. Read off `children` when\n   * they are a plain string, so a chip whose label is an element passes it.\n   */\n  readonly textValue?: string\n}\n\ntype ChipGroupProps<T extends object = object> = Omit<\n  ViewProps,\n  'children' | 'style'\n> & {\n  /**\n   * The chips, each a `ChipGroup.Chip` with an `id` of its own. With\n   * `items`, a function from an item to its chip, called for each item in\n   * turn.\n   */\n  readonly children?: ((item: T) => ReactElement) | ReactNode\n  /** The keys selected at first, when the group keeps its own selection. */\n  readonly defaultSelectedKeys?: 'all' | Iterable<Key>\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  readonly description?: string\n  /** The keys of the chips drawn disabled, which take no presses. */\n  readonly disabledKeys?: Iterable<Key>\n  /**\n   * Keeps the last selected chip selected, so a press on it changes\n   * nothing.\n   * @default false\n   */\n  readonly disallowEmptySelection?: boolean\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state: the message and the label's colour\n   * both follow from it.\n   */\n  readonly error?: string\n  /** The entries `children` draws a chip for, when it is a function. */\n  readonly items?: Iterable<T>\n  /**\n   * What the group is for. Required rather than optional: a set of chips\n   * with no name is a row a screen reader cannot introduce.\n   */\n  readonly label: string\n  /**\n   * Called with the key of the chip whose close target was pressed. Given\n   * this, every chip draws one; the call site removes the chip from what it\n   * renders.\n   */\n  readonly onRemove?: (keys: Set<Key>) => void\n  /** Called with the selected keys whenever a press changes them. */\n  readonly onSelectionChange?: (keys: Selection) => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * What the close target on each chip is called, for a screen reader. The\n   * chip's own text follows it, so this is the verb rather than the whole\n   * phrase: \"Remove\" becomes \"Remove First item\". Left out, it is the word\n   * React Aria gives web's in the `I18nProvider`'s locale, or the device's\n   * outside one, \"Remove\" in English.\n   */\n  readonly removeLabel?: string\n  /** What the row draws once it holds no chips. */\n  readonly renderEmptyState?: () => ReactNode\n  /**\n   * The selected keys, for a call site holding the selection itself with\n   * `onSelectionChange`.\n   */\n  readonly selectedKeys?: 'all' | Iterable<Key>\n  /**\n   * Whether a press selects a chip: one at a time, several, or none, in\n   * which case the chips are not buttons.\n   * @default 'none'\n   */\n  readonly selectionMode?: SelectionMode\n  readonly style?: StyleProp<ViewStyle>\n}\n\n// The close target reaches 3dp past its 18dp glyph on every side, which is\n// WCAG's 24dp.\nconst REMOVE_REACH: Insets = { bottom: 3, left: 3, right: 3, top: 3 }\n\nconst styles = StyleSheet.create({\n  // Holds the pill and the close target laid over it, and is never wider\n  // than the row, so the pill inside has a width to cut its label at.\n  chip: {\n    maxWidth: '100%',\n  },\n  layer: {\n    bottom: 0,\n    left: 0,\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n})\n\nconst groupStylesOf = themedStyles(\n  ({ colors, radii, sizing, spacing, stateLayerOpacity }) =>\n    StyleSheet.create({\n      label: {\n        color: colors.onSurfaceVariant,\n      },\n      labelError: {\n        color: colors.error,\n      },\n      // The chips, 8dp apart and wrapping rather than running off the end,\n      // since a set is read all at once. A chip's height while empty.\n      list: {\n        alignItems: 'center',\n        flexDirection: 'row',\n        flexWrap: 'wrap',\n        gap: spacing.sm,\n        minHeight: sizing.controlXs,\n      },\n      message: {\n        color: colors.onSurfaceVariant,\n      },\n      messageError: {\n        color: colors.error,\n      },\n      messageLine: {\n        marginTop: spacing.xs,\n      },\n      // A removable pill leaves room at its end for the close target, its 8dp\n      // gap before it and the 8dp the page pads after it.\n      removable: {\n        paddingEnd: spacing.lg + GLYPH_SIZE,\n      },\n      // The close target, over the pill's end, where the pill's own padding\n      // would end: the page pads 8dp on the side the glyph is on, and the\n      // label keeps the chip's 8dp gap before it.\n      remove: {\n        alignItems: 'center',\n        borderRadius: radii.circle,\n        end: RULE_WIDTH + spacing.lg - spacing.sm,\n        height: GLYPH_SIZE,\n        justifyContent: 'center',\n        marginTop: -GLYPH_SIZE / 2,\n        position: 'absolute',\n        top: '50%',\n        width: GLYPH_SIZE,\n      },\n      removeHovered: {\n        opacity: stateLayerOpacity.hover,\n      },\n      removeLayer: {\n        borderRadius: radii.circle,\n        opacity: 0,\n      },\n      removePressed: {\n        opacity: stateLayerOpacity.pressed,\n      },\n      root: {\n        flexDirection: 'column',\n        rowGap: spacing.xs,\n      },\n    }),\n)\n\n/**\n * A labelled set of chips, one or more of which can be chosen, each of which\n * can be removed. Selection is React Stately's: set `selectionMode` to\n * `single` or `multiple`, and pass `selectedKeys` with `onSelectionChange` to\n * control it, or `defaultSelectedKeys` to let the group keep its own.\n *\n * ```tsx\n * <ChipGroup label=\"Label\" onRemove={remove} selectionMode=\"multiple\">\n *   <ChipGroup.Chip id=\"first\">First item</ChipGroup.Chip>\n * </ChipGroup>\n * ```\n *\n * Give the group `onRemove` and each chip draws a close target. A chip that\n * toggles nothing else is Chip; this is for a set that shares a value.\n *\n * A screen reader hears a group named by its label, and each chip as a button\n * named by its label, selected or not. On the web the line under the group\n * describes it, as web's does; on iOS and Android it is read after the chips,\n * where it sits. `style`, `ref` and `testID` land on the group as a whole,\n * which is the element a layout positions.\n */\nfunction ChipGroup<T extends object = object>({\n  children,\n  defaultSelectedKeys,\n  description,\n  disabledKeys,\n  disallowEmptySelection,\n  error,\n  items,\n  label,\n  onRemove,\n  onSelectionChange,\n  removeLabel: ownRemoveLabel,\n  renderEmptyState,\n  selectedKeys,\n  selectionMode = 'none',\n  style,\n  ...props\n}: ChipGroupProps<T>) {\n  const messages = useMessages()\n  const removeLabel = ownRemoveLabel ?? messages.remove\n  const theme = useTheme()\n  const state = useListState<T>({\n    // Each chip builds its own entry in the collection; see\n    // `ChipGroupChip.getCollectionNode`. The collection skips what is not an\n    // element, as a ReactNode may be, and asks any element for its entry.\n    // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- see above\n    children: children as ListProps<T>['children'],\n    defaultSelectedKeys,\n    disabledKeys,\n    disallowEmptySelection,\n    items,\n    onSelectionChange,\n    selectedKeys,\n    selectionMode,\n  })\n  const labelId = useId()\n  const messageId = useId()\n  const labelRole = useTypeRole('labelLarge')\n  const messageRole = useTypeRole('bodySmall')\n\n  const own = groupStylesOf(theme)\n  const invalid = error !== undefined\n  const message = error ?? description\n  const nodes = [...state.collection]\n\n  return (\n    <View\n      {...props}\n      aria-labelledby={labelId}\n      role=\"group\"\n      {...lineOf(messageId, message)}\n      style={composeStyles<ViewStyle>(own.root, style)}\n    >\n      <NativeText\n        id={labelId}\n        style={composeStyles<TextStyle>(\n          labelRole,\n          own.label,\n          invalid ? own.labelError : undefined,\n        )}\n      >\n        {label}\n      </NativeText>\n      <View style={own.list}>\n        {nodes.length === 0\n          ? renderEmptyState?.()\n          : nodes.map((node) => (\n              <GroupChip\n                key={node.key}\n                node={node}\n                onRemove={onRemove}\n                removeLabel={removeLabel}\n                state={state}\n              />\n            ))}\n      </View>\n      {message === undefined ? null : (\n        <View style={own.messageLine}>\n          <NativeText\n            id={messageId}\n            style={composeStyles<TextStyle>(\n              messageRole,\n              own.message,\n              invalid ? own.messageError : undefined,\n            )}\n          >\n            {message}\n          </NativeText>\n        </View>\n      )}\n    </View>\n  )\n}\n\n/**\n * One chip of a `ChipGroup`, which draws it: the group builds its set from\n * these, so one renders nothing on its own. Give every chip an `id`, which is\n * the key selection and removal report it by.\n */\nfunction ChipGroupChip(_props: ChipGroupChipProps): null {\n  return null\n}\n\n// The entry the group's collection holds for a chip, as React Stately's own\n// `Item` gives one: keyed by the chip's `id`, and carrying the props the group\n// draws it from.\nChipGroupChip.getCollectionNode = function* getCollectionNode(\n  props: ChipGroupChipProps,\n) {\n  yield {\n    'aria-label': props['aria-label'],\n    hasChildNodes: false,\n    key: props.id,\n    props,\n    rendered: props.children,\n    textValue:\n      props.textValue ??\n      (typeof props.children === 'string' ? props.children : ''),\n    type: 'item',\n  }\n}\n\n/**\n * A chip as the group draws it, from its entry in the collection: the pill,\n * which is a button while the group selects, and the close target over its\n * end while the group removes.\n */\nfunction GroupChip<T>({\n  node,\n  onRemove,\n  removeLabel,\n  state,\n}: {\n  readonly node: Node<T>\n  readonly onRemove: ((keys: Set<Key>) => void) | undefined\n  readonly removeLabel: string\n  readonly state: ListState<T>\n}) {\n  const theme = useTheme()\n  // A node carries the props its chip was written with, which\n  // `getCollectionNode` puts there and React Stately types as `any`.\n  // oxlint-disable-next-line typescript/no-unsafe-assignment -- see above\n  const {\n    children,\n    hitSlop,\n    icon,\n    id: _id,\n    isDisabled: _isDisabled,\n    onBlur,\n    onFocus,\n    onHoverIn,\n    onHoverOut,\n    onLayout,\n    onPress,\n    onPressIn,\n    onPressOut,\n    style,\n    textValue: _textValue,\n    ...props\n  }: ChipGroupChipProps = node.props\n  // Until the chip is measured it takes no reach across, rather than one\n  // sized for a chip of no width.\n  const [width, setWidth] = useState(TARGET_SIZE)\n\n  const { selectionManager } = state\n  // The selection manager reads a chip's own `isDisabled` off its node, beside\n  // the group's `disabledKeys`, so it answers for both.\n  const isDisabled = selectionManager.isDisabled(node.key)\n  const selectable = selectionManager.selectionMode !== 'none'\n  const selected = selectionManager.isSelected(node.key)\n  const paint = paintOf(theme, {\n    assist: false,\n    disabled: isDisabled,\n    elevated: false,\n    selected,\n  })\n  const eased = useEasedColors(paint)\n\n  const feedback = usePressFeedback({\n    color: paint.layer,\n    corners: { borderRadius: theme.radii.sm },\n    disabled: isDisabled,\n    onBlur,\n    onFocus,\n    onHoverIn,\n    onHoverOut,\n    onPressIn,\n    onPressOut,\n  })\n\n  const pill = composeStyles<AnimatedStyle<ViewStyle>>(\n    stylesOf(theme).pill,\n    eased.container,\n    onRemove === undefined ? undefined : groupStylesOf(theme).removable,\n    feedback.ring,\n    style,\n  )\n  const content = (\n    <>\n      {selectable ? feedback.layer : null}\n      <ChipGlyph color={paint.glyph} icon={icon} selected={selected} />\n      <ChipLabel color={eased.label}>{children}</ChipLabel>\n    </>\n  )\n  const target = hitSlop ?? targetOf(width, theme)\n\n  return (\n    // The view holding the two takes the chip's target too: iOS and Android\n    // hand a touch to a view only once its parent has taken it.\n    <View hitSlop={selectable ? target : undefined} style={styles.chip}>\n      {selectable ? (\n        <AnimatedPressable\n          role=\"button\"\n          {...toggleState(selected)}\n          {...props}\n          {...feedback.handlers}\n          disabled={isDisabled}\n          hitSlop={target}\n          onLayout={measureThen(setWidth, onLayout)}\n          onPress={selectThen(state, node.key, onPress)}\n          style={pill}\n        >\n          {content}\n        </AnimatedPressable>\n      ) : (\n        // A press here changes nothing, so the chip is a view, and takes the\n        // props a view has; a press handler among them is never called.\n        <Animated.View\n          {...props}\n          aria-disabled={isDisabled}\n          onLayout={onLayout ?? undefined}\n          style={pill}\n        >\n          {content}\n        </Animated.View>\n      )}\n      {onRemove === undefined ? null : (\n        <RemoveButton\n          color={paint.content}\n          isDisabled={isDisabled}\n          label={\n            node.textValue === ''\n              ? removeLabel\n              : `${removeLabel} ${node.textValue}`\n          }\n          onPress={removeThen(onRemove, node.key)}\n        />\n      )}\n    </View>\n  )\n}\n\n/**\n * How the group is described by the line under it. On the web it points at\n * the line with `aria-describedby`, as web's group does. iOS and Android\n * focus the chips rather than the group, so there the line is left where a\n * screen reader reaches it in order, after the last chip.\n */\nfunction lineOf(id: string, message: string | undefined) {\n  return Platform.OS === 'web' && message !== undefined\n    ? { 'aria-describedby': id }\n    : undefined\n}\n\n/**\n * A chip's close target: the close glyph in the label's colour, with a hover\n * and a pressed layer of its own and a ring for focus from a key, as the\n * header sets out.\n */\nfunction RemoveButton({\n  color,\n  isDisabled,\n  label,\n  onPress,\n}: {\n  readonly color: string\n  readonly isDisabled: boolean\n  readonly label: string\n  readonly onPress: () => void\n}) {\n  const theme = useTheme()\n  const feedback = usePressFeedback({\n    color,\n    disabled: isDisabled,\n    disableRipple: true,\n  })\n  const own = groupStylesOf(theme)\n\n  return (\n    <Pressable\n      aria-label={label}\n      role=\"button\"\n      {...feedback.handlers}\n      disabled={isDisabled}\n      hitSlop={REMOVE_REACH}\n      onPress={onPress}\n      style={composeStyles<ViewStyle>(\n        own.remove,\n        feedback.ring === undefined ? undefined : ringOf(color),\n      )}\n    >\n      <View\n        style={composeStyles<ViewStyle>(\n          styles.layer,\n          own.removeLayer,\n          { backgroundColor: color },\n          feedback.hovered ? own.removeHovered : undefined,\n          feedback.pressed ? own.removePressed : undefined,\n        )}\n      />\n      <CloseGlyph color={color} size={GLYPH_SIZE} />\n    </Pressable>\n  )\n}\n\n// What a press on a chip's close target reports. Built by a call rather than\n// declared in the component, which is what react-perf's\n// jsx-no-new-function-as-prop is after; the React Compiler memoises the\n// result on its inputs.\nfunction removeThen(onRemove: (keys: Set<Key>) => void, key: Key) {\n  return () => {\n    onRemove(new Set([key]))\n  }\n}\n\n// The close target's ring: 2dp in the label's colour, 1dp out, as web's.\nfunction ringOf(color: string): ViewStyle {\n  return {\n    outlineColor: color,\n    outlineOffset: 1,\n    outlineStyle: 'solid',\n    outlineWidth: 2,\n  }\n}\n\n// A press on a chip: the call site's own `onPress`, then the selection,\n// which selects the chip, or clears it if it was selected and the group\n// allows that.\nfunction selectThen<T>(\n  state: ListState<T>,\n  key: Key,\n  onPress: ((event: GestureResponderEvent) => void) | null | undefined,\n) {\n  return (event: GestureResponderEvent) => {\n    onPress?.(event)\n    state.selectionManager.select(key)\n  }\n}\n\nChipGroup.Chip = ChipGroupChip\n\nexport { ChipGroup, ChipGroupChip }\nexport type { ChipGroupChipProps, ChipGroupProps }\n"],"mappings":"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"}

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

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

package/dist/components/code/index.js

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

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

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

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

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

package/dist/components/container/index.js

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

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

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