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

package/dist/components/checkbox/index.js

@@ -4,9 +4,10 @@ import { hitSlop, usePressFeedback } from "../../press/index.js";
 import { controlStylesOf } from "../../control/styles.js";
 import { ControlLabel, ControlMessage, describedBy, messageOf } from "../../control/index.js";
 import { CheckboxBox } from "../../control/checkbox-box.js";
+import { CheckboxGroupContext } from "../../control/group.js";
 import { c } from "react/compiler-runtime";
 import { Pressable, View } from "react-native";
-import { useId } from "react";
+import { use, useEffect, useId, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useToggleState } from "react-stately/useToggleState";
 //#region src/components/checkbox/index.tsx
@@ -45,7 +46,7 @@ const LAYERS = {
 * positions.
 */
 function Checkbox(t0) {
-	const $ = c(69);
+	const $ = c(76);
 	let ariaLabel;
 	let children;
 	let defaultSelected;
@@ -58,8 +59,9 @@ function Checkbox(t0) {
 	let t1;
 	let t2;
 	let t3;
+	let value;
 	if ($[0] !== t0) {
-		({"aria-label": ariaLabel, children, defaultSelected, description, error, isDisabled: t1, isIndeterminate: t2, isReadOnly: t3, isSelected, onChange, style, ...props} = t0);
+		({"aria-label": ariaLabel, children, defaultSelected, description, error, isDisabled: t1, isIndeterminate: t2, isReadOnly: t3, isSelected, onChange, style, value, ...props} = t0);
 		$[0] = t0;
 		$[1] = ariaLabel;
 		$[2] = children;
@@ -73,6 +75,7 @@ function Checkbox(t0) {
 		$[10] = t1;
 		$[11] = t2;
 		$[12] = t3;
+		$[13] = value;
 	} else {
 		ariaLabel = $[1];
 		children = $[2];
@@ -86,95 +89,126 @@ function Checkbox(t0) {
 		t1 = $[10];
 		t2 = $[11];
 		t3 = $[12];
+		value = $[13];
 	}
-	const isDisabled = t1 === void 0 ? false : t1;
+	const ownDisabled = t1 === void 0 ? false : t1;
 	const isIndeterminate = t2 === void 0 ? false : t2;
-	const isReadOnly = t3 === void 0 ? false : t3;
+	const ownReadOnly = t3 === void 0 ? false : t3;
 	const theme = useTheme();
+	const group = use(CheckboxGroupContext);
+	const messageId = useId();
+	const control = useRef(null);
+	const members = group?.members;
+	if (group !== null && value === void 0) throw new Error("A Checkbox inside a CheckboxGroup names the entry it stands for with `value`.");
+	const isDisabled = ownDisabled || (group?.isDisabled ?? false);
+	const isReadOnly = ownReadOnly || (group?.isReadOnly ?? false);
 	let t4;
-	if ($[13] !== defaultSelected || $[14] !== isReadOnly || $[15] !== isSelected || $[16] !== onChange) {
-		t4 = {
+	if ($[14] !== defaultSelected || $[15] !== group || $[16] !== isReadOnly || $[17] !== isSelected || $[18] !== onChange || $[19] !== value) {
+		t4 = group === null || value === void 0 ? {
 			defaultSelected,
 			isReadOnly,
 			isSelected,
 			onChange
-		};
-		$[13] = defaultSelected;
-		$[14] = isReadOnly;
-		$[15] = isSelected;
-		$[16] = onChange;
-		$[17] = t4;
-	} else t4 = $[17];
+		} : memberOf(group, value, {
+			isReadOnly,
+			onChange
+		});
+		$[14] = defaultSelected;
+		$[15] = group;
+		$[16] = isReadOnly;
+		$[17] = isSelected;
+		$[18] = onChange;
+		$[19] = value;
+		$[20] = t4;
+	} else t4 = $[20];
 	const state = useToggleState(t4);
-	const messageId = useId();
+	let t5;
+	let t6;
+	if ($[21] !== members || $[22] !== messageId) {
+		t5 = () => {
+			members?.add(messageId, control);
+			return () => {
+				members?.remove(messageId);
+			};
+		};
+		t6 = [members, messageId];
+		$[21] = members;
+		$[22] = messageId;
+		$[23] = t5;
+		$[24] = t6;
+	} else {
+		t5 = $[23];
+		t6 = $[24];
+	}
+	useEffect(t5, t6);
 	const { colors, radii } = theme;
 	const marked = state.isSelected || isIndeterminate;
 	const interactive = !isDisabled && !isReadOnly;
-	const tone = error === void 0 ? marked ? "marked" : "unmarked" : "error";
-	const t5 = colors[LAYERS[tone].hover];
-	let t6;
-	if ($[18] !== radii.circle) {
-		t6 = { borderRadius: radii.circle };
-		$[18] = radii.circle;
-		$[19] = t6;
-	} else t6 = $[19];
-	const t7 = !interactive;
-	const t8 = colors[LAYERS[tone].pressed];
-	let t9;
-	if ($[20] !== t5 || $[21] !== t6 || $[22] !== t7 || $[23] !== t8) {
-		t9 = {
-			color: t5,
-			corners: t6,
-			disabled: t7,
+	const tone = error !== void 0 || (group?.isInvalid ?? false) ? "error" : marked ? "marked" : "unmarked";
+	const t7 = colors[LAYERS[tone].hover];
+	let t8;
+	if ($[25] !== radii.circle) {
+		t8 = { borderRadius: radii.circle };
+		$[25] = radii.circle;
+		$[26] = t8;
+	} else t8 = $[26];
+	const t9 = !interactive;
+	const t10 = colors[LAYERS[tone].pressed];
+	let t11;
+	if ($[27] !== t10 || $[28] !== t7 || $[29] !== t8 || $[30] !== t9) {
+		t11 = {
+			color: t7,
+			corners: t8,
+			disabled: t9,
 			disc: 40,
-			pressedColor: t8
+			pressedColor: t10
 		};
-		$[20] = t5;
-		$[21] = t6;
-		$[22] = t7;
-		$[23] = t8;
-		$[24] = t9;
-	} else t9 = $[24];
-	const feedback = usePressFeedback(t9);
+		$[27] = t10;
+		$[28] = t7;
+		$[29] = t8;
+		$[30] = t9;
+		$[31] = t11;
+	} else t11 = $[31];
+	const feedback = usePressFeedback(t11);
 	const active = feedback.hovered || feedback.pressed || feedback.ring !== void 0;
-	const t10 = isIndeterminate ? "mixed" : state.isSelected;
-	let t11;
-	if ($[25] !== description || $[26] !== error || $[27] !== messageId) {
-		t11 = describedBy(messageId, messageOf(description, error));
-		$[25] = description;
-		$[26] = error;
-		$[27] = messageId;
-		$[28] = t11;
-	} else t11 = $[28];
-	const t12 = feedback.handlers;
+	const t12 = isIndeterminate ? "mixed" : state.isSelected;
 	let t13;
-	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
-		t13 = hitSlop(40, 40);
-		$[29] = t13;
-	} else t13 = $[29];
-	let t14;
-	if ($[30] !== state) {
-		t14 = toggleOf(state);
-		$[30] = state;
-		$[31] = t14;
-	} else t14 = $[31];
+	if ($[32] !== description || $[33] !== error || $[34] !== messageId) {
+		t13 = describedBy(messageId, messageOf(description, error));
+		$[32] = description;
+		$[33] = error;
+		$[34] = messageId;
+		$[35] = t13;
+	} else t13 = $[35];
+	const t14 = feedback.handlers;
 	let t15;
-	if ($[32] !== theme) {
-		t15 = controlStylesOf(theme);
-		$[32] = theme;
-		$[33] = t15;
-	} else t15 = $[33];
-	const t16 = t15.row;
+	if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = hitSlop(40, 40);
+		$[36] = t15;
+	} else t15 = $[36];
+	let t16;
+	if ($[37] !== state) {
+		t16 = toggleOf(state);
+		$[37] = state;
+		$[38] = t16;
+	} else t16 = $[38];
 	let t17;
-	if ($[34] !== feedback.ring || $[35] !== theme) {
-		t17 = composeStyles(controlStylesOf(theme).disc, feedback.ring);
-		$[34] = feedback.ring;
-		$[35] = theme;
-		$[36] = t17;
-	} else t17 = $[36];
-	let t18;
-	if ($[37] !== active || $[38] !== isDisabled || $[39] !== isIndeterminate || $[40] !== state.isSelected || $[41] !== tone) {
-		t18 = /* @__PURE__ */ jsx(CheckboxBox, {
+	if ($[39] !== theme) {
+		t17 = controlStylesOf(theme);
+		$[39] = theme;
+		$[40] = t17;
+	} else t17 = $[40];
+	const t18 = t17.row;
+	let t19;
+	if ($[41] !== feedback.ring || $[42] !== theme) {
+		t19 = composeStyles(controlStylesOf(theme).disc, feedback.ring);
+		$[41] = feedback.ring;
+		$[42] = theme;
+		$[43] = t19;
+	} else t19 = $[43];
+	let t20;
+	if ($[44] !== active || $[45] !== isDisabled || $[46] !== isIndeterminate || $[47] !== state.isSelected || $[48] !== tone) {
+		t20 = /* @__PURE__ */ jsx(CheckboxBox, {
 			active,
 			isDisabled,
 			isIndeterminate,
@@ -182,85 +216,96 @@ function Checkbox(t0) {
 			tone,
 			within: 40
 		});
-		$[37] = active;
-		$[38] = isDisabled;
-		$[39] = isIndeterminate;
-		$[40] = state.isSelected;
-		$[41] = tone;
-		$[42] = t18;
-	} else t18 = $[42];
-	let t19;
-	if ($[43] !== feedback.layer || $[44] !== t17 || $[45] !== t18) {
-		t19 = /* @__PURE__ */ jsxs(View, {
-			style: t17,
-			children: [feedback.layer, t18]
+		$[44] = active;
+		$[45] = isDisabled;
+		$[46] = isIndeterminate;
+		$[47] = state.isSelected;
+		$[48] = tone;
+		$[49] = t20;
+	} else t20 = $[49];
+	let t21;
+	if ($[50] !== feedback.layer || $[51] !== t19 || $[52] !== t20) {
+		t21 = /* @__PURE__ */ jsxs(View, {
+			style: t19,
+			children: [feedback.layer, t20]
 		});
-		$[43] = feedback.layer;
-		$[44] = t17;
-		$[45] = t18;
-		$[46] = t19;
-	} else t19 = $[46];
-	let t20;
-	if ($[47] !== children || $[48] !== isDisabled) {
-		t20 = /* @__PURE__ */ jsx(ControlLabel, {
+		$[50] = feedback.layer;
+		$[51] = t19;
+		$[52] = t20;
+		$[53] = t21;
+	} else t21 = $[53];
+	let t22;
+	if ($[54] !== children || $[55] !== isDisabled) {
+		t22 = /* @__PURE__ */ jsx(ControlLabel, {
 			isDisabled,
 			children
 		});
-		$[47] = children;
-		$[48] = isDisabled;
-		$[49] = t20;
-	} else t20 = $[49];
-	let t21;
-	if ($[50] !== ariaLabel || $[51] !== feedback.handlers || $[52] !== isDisabled || $[53] !== t10 || $[54] !== t11 || $[55] !== t14 || $[56] !== t15.row || $[57] !== t19 || $[58] !== t20) {
-		t21 = /* @__PURE__ */ jsxs(Pressable, {
-			"aria-checked": t10,
+		$[54] = children;
+		$[55] = isDisabled;
+		$[56] = t22;
+	} else t22 = $[56];
+	let t23;
+	if ($[57] !== ariaLabel || $[58] !== feedback.handlers || $[59] !== isDisabled || $[60] !== t12 || $[61] !== t13 || $[62] !== t16 || $[63] !== t17.row || $[64] !== t21 || $[65] !== t22) {
+		t23 = /* @__PURE__ */ jsxs(Pressable, {
+			"aria-checked": t12,
 			"aria-label": ariaLabel,
 			role: "checkbox",
-			...t11,
-			...t12,
+			...t13,
+			...t14,
 			disabled: isDisabled,
-			hitSlop: t13,
-			onPress: t14,
-			style: t16,
-			children: [t19, t20]
+			hitSlop: t15,
+			onPress: t16,
+			ref: control,
+			style: t18,
+			children: [t21, t22]
 		});
-		$[50] = ariaLabel;
-		$[51] = feedback.handlers;
-		$[52] = isDisabled;
-		$[53] = t10;
-		$[54] = t11;
-		$[55] = t14;
-		$[56] = t15.row;
-		$[57] = t19;
-		$[58] = t20;
-		$[59] = t21;
-	} else t21 = $[59];
-	let t22;
-	if ($[60] !== description || $[61] !== error || $[62] !== messageId) {
-		t22 = /* @__PURE__ */ jsx(ControlMessage, {
+		$[57] = ariaLabel;
+		$[58] = feedback.handlers;
+		$[59] = isDisabled;
+		$[60] = t12;
+		$[61] = t13;
+		$[62] = t16;
+		$[63] = t17.row;
+		$[64] = t21;
+		$[65] = t22;
+		$[66] = t23;
+	} else t23 = $[66];
+	let t24;
+	if ($[67] !== description || $[68] !== error || $[69] !== messageId) {
+		t24 = /* @__PURE__ */ jsx(ControlMessage, {
 			description,
 			error,
 			id: messageId
 		});
-		$[60] = description;
-		$[61] = error;
-		$[62] = messageId;
-		$[63] = t22;
-	} else t22 = $[63];
-	let t23;
-	if ($[64] !== props || $[65] !== style || $[66] !== t21 || $[67] !== t22) {
-		t23 = /* @__PURE__ */ jsxs(View, {
+		$[67] = description;
+		$[68] = error;
+		$[69] = messageId;
+		$[70] = t24;
+	} else t24 = $[70];
+	let t25;
+	if ($[71] !== props || $[72] !== style || $[73] !== t23 || $[74] !== t24) {
+		t25 = /* @__PURE__ */ jsxs(View, {
 			...props,
 			style,
-			children: [t21, t22]
+			children: [t23, t24]
 		});
-		$[64] = props;
-		$[65] = style;
-		$[66] = t21;
-		$[67] = t22;
-		$[68] = t23;
-	} else t23 = $[68];
-	return t23;
+		$[71] = props;
+		$[72] = style;
+		$[73] = t23;
+		$[74] = t24;
+		$[75] = t25;
+	} else t25 = $[75];
+	return t25;
+}
+function memberOf(group, value, { isReadOnly, onChange }) {
+	return {
+		isReadOnly,
+		isSelected: group.isSelected(value),
+		onChange: (isSelected) => {
+			group.set(value, isSelected);
+			onChange?.(isSelected);
+		}
+	};
 }
 function toggleOf(state) {
 	return () => {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","StyleProp","ViewProps","ViewStyle","ToggleState","useId","Pressable","View","useToggleState","CheckboxTone","ResolvedTheme","ControlLabel","ControlMessage","describedBy","LAYER_SIZE","messageOf","CheckboxBox","controlStylesOf","hitSlop","usePressFeedback","useTheme","composeStyles","CheckboxProps","Omit","children","defaultSelected","description","error","isDisabled","isIndeterminate","isReadOnly","isSelected","onChange","ref","style","LAYERS","Readonly","Record","hover","pressed","marked","unmarked","Checkbox","t0","$","_c","ariaLabel","props","t1","t2","t3","undefined","theme","t4","state","messageId","colors","radii","interactive","tone","t5","t6","circle","borderRadius","t7","t8","t9","color","corners","disabled","disc","pressedColor","feedback","active","hovered","ring","t10","t11","t12","handlers","t13","Symbol","for","t14","toggleOf","t15","t16","row","t17","t18","t19","layer","t20","t21","t22","t23","toggle","_c"],"sources":["../../../src/components/checkbox/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { StyleProp, ViewProps, ViewStyle } from 'react-native'\nimport type { ToggleState } from 'react-stately/useToggleState'\n\nimport { useId } from 'react'\nimport { Pressable, View } from 'react-native'\nimport { useToggleState } from 'react-stately/useToggleState'\n\nimport type { CheckboxTone } from '../../control/checkbox-box'\nimport type { ResolvedTheme } from '../../theme/scope'\n\nimport {\n  ControlLabel,\n  ControlMessage,\n  describedBy,\n  LAYER_SIZE,\n  messageOf,\n} from '../../control'\nimport { CheckboxBox } from '../../control/checkbox-box'\nimport { controlStylesOf } from '../../control/styles'\nimport { hitSlop, usePressFeedback } from '../../press'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles } from '../../theme/styles'\n\n// The checkbox page, as kanso-ui's Checkbox draws it: an 18dp box with a 2dp\n// corner and an 18dp glyph, inside a 40dp state layer, with a 48dp target.\n// Unselected, the box is a 2dp rule in on surface variant that turns on\n// surface while hovered, pressed or focused; selected or indeterminate, it\n// fills with primary and the glyph takes on primary. The error pair is error\n// and on error, and disabled is on surface at the disabled opacity for the\n// rule or the fill, with the glyph in surface. The state layer is on surface\n// over an unselected box and primary over a selected one while hovered, and\n// the two swap once pressed.\n//\n// The box eases between its colours over the motion tokens' short duration\n// on the standard curve, as web's transition does, and at once for a reader\n// who asks the device for reduced motion. The glyph arrives with the fill.\n//\n// The row, the label and the line under it are src/control's, which Radio\n// and Switch draw through as well. The whole row is the `Pressable`, so a\n// press on the label toggles the box, as a press on web's label does. The\n// line under it is outside the row, as web's is outside its label.\n//\n// The corner is a literal: the page's 2dp is a step the shape scale does not\n// carry.\n\ntype CheckboxProps = Omit<ViewProps, 'children' | 'style'> & {\n  /**\n   * The label, beside the box. A checkbox that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  readonly children?: ReactNode\n  /**\n   * Whether the checkbox starts selected, when it keeps its own state.\n   * @default false\n   */\n  readonly defaultSelected?: boolean\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  readonly description?: string\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the checkbox in its error state: the message and the error colours both\n   * follow from it.\n   */\n  readonly error?: string\n  /**\n   * Draws the checkbox disabled, and takes no presses.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Draws the dash for a box that stands for a partly selected set, and\n   * reports the box as mixed to a screen reader. It is the call site's to\n   * clear: a press still changes `isSelected` underneath.\n   * @default false\n   */\n  readonly isIndeterminate?: boolean\n  /**\n   * Shows the state without letting a press change it.\n   * @default false\n   */\n  readonly isReadOnly?: boolean\n  /**\n   * Whether the checkbox is selected, for a call site holding the state\n   * itself with `onChange`.\n   */\n  readonly isSelected?: boolean\n  /** Called with the new state whenever a press changes it. */\n  readonly onChange?: (isSelected: boolean) => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n}\n\n// The state layer's colour roles, hovered or focused and pressed. Error is\n// error throughout; otherwise the two swap once pressed.\nconst LAYERS: Readonly<\n  Record<\n    CheckboxTone,\n    {\n      readonly hover: keyof ResolvedTheme['colors']\n      readonly pressed: keyof ResolvedTheme['colors']\n    }\n  >\n> = {\n  error: { hover: 'error', pressed: 'error' },\n  marked: { hover: 'primary', pressed: 'onSurface' },\n  unmarked: { hover: 'onSurface', pressed: 'primary' },\n}\n\n/**\n * A checkbox with its label, and optionally a description or an error under\n * it. Its state is React Stately's, as web's is: pass `isSelected` with\n * `onChange` to control it, or `defaultSelected` to let it keep its own.\n * `isIndeterminate` draws the dash for a box that stands for a partly\n * selected set.\n *\n * ```tsx\n * <Checkbox defaultSelected description=\"Supporting line\">\n *   Label\n * </Checkbox>\n * ```\n *\n * A screen reader hears it as a checkbox named by its label, checked,\n * unchecked or mixed, followed by the line under it. A press anywhere on the\n * box or the label toggles it, and the row takes presses over the 48dp target\n * the page asks of the box. `style`, `ref` and `testID` land on the view\n * holding the row and the line under it, which is the element a layout\n * positions.\n */\nfunction Checkbox({\n  'aria-label': ariaLabel,\n  children,\n  defaultSelected,\n  description,\n  error,\n  isDisabled = false,\n  isIndeterminate = false,\n  isReadOnly = false,\n  isSelected,\n  onChange,\n  style,\n  ...props\n}: CheckboxProps) {\n  const theme = useTheme()\n  const state = useToggleState({\n    defaultSelected,\n    isReadOnly,\n    isSelected,\n    onChange,\n  })\n  const messageId = useId()\n\n  const { colors, radii } = theme\n  const marked = state.isSelected || isIndeterminate\n  const interactive = !isDisabled && !isReadOnly\n  const tone: CheckboxTone =\n    error === undefined ? (marked ? 'marked' : 'unmarked') : 'error'\n\n  const feedback = usePressFeedback({\n    color: colors[LAYERS[tone].hover],\n    corners: { borderRadius: radii.circle },\n    disabled: !interactive,\n    disc: LAYER_SIZE,\n    pressedColor: colors[LAYERS[tone].pressed],\n  })\n  const active =\n    feedback.hovered || feedback.pressed || feedback.ring !== undefined\n\n  return (\n    <View {...props} style={style}>\n      <Pressable\n        aria-checked={isIndeterminate ? 'mixed' : state.isSelected}\n        aria-label={ariaLabel}\n        role=\"checkbox\"\n        {...describedBy(messageId, messageOf(description, error))}\n        {...feedback.handlers}\n        disabled={isDisabled}\n        hitSlop={hitSlop(LAYER_SIZE, LAYER_SIZE)}\n        onPress={toggleOf(state)}\n        style={controlStylesOf(theme).row}\n      >\n        <View\n          style={composeStyles<ViewStyle>(\n            controlStylesOf(theme).disc,\n            feedback.ring,\n          )}\n        >\n          {feedback.layer}\n          <CheckboxBox\n            active={active}\n            isDisabled={isDisabled}\n            isIndeterminate={isIndeterminate}\n            isSelected={state.isSelected}\n            tone={tone}\n            within={LAYER_SIZE}\n          />\n        </View>\n        <ControlLabel isDisabled={isDisabled}>{children}</ControlLabel>\n      </Pressable>\n      <ControlMessage description={description} error={error} id={messageId} />\n    </View>\n  )\n}\n\n// A press's toggle. Built by a call rather than declared in the component,\n// which is what react-perf's jsx-no-new-function-as-prop is after; the React\n// Compiler memoises the result on its input.\nfunction toggleOf(state: ToggleState) {\n  return () => {\n    state.toggle()\n  }\n}\n\nexport { Checkbox }\nexport type { CheckboxProps }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","StyleProp","ViewProps","ViewStyle","ToggleState","ToggleStateOptions","use","useEffect","useId","useRef","Pressable","View","useToggleState","CheckboxTone","CheckboxGroupContextValue","ResolvedTheme","ControlLabel","ControlMessage","describedBy","LAYER_SIZE","messageOf","CheckboxBox","CheckboxGroupContext","controlStylesOf","hitSlop","usePressFeedback","useTheme","composeStyles","CheckboxProps","Omit","children","defaultSelected","description","error","isDisabled","isIndeterminate","isReadOnly","isSelected","onChange","ref","style","value","LAYERS","Readonly","Record","hover","pressed","marked","unmarked","Checkbox","t0","$","_c","ariaLabel","props","t1","t2","t3","ownDisabled","undefined","ownReadOnly","theme","group","messageId","control","members","Error","t4","memberOf","state","t5","t6","add","remove","colors","radii","interactive","invalid","isInvalid","tone","t7","t8","circle","borderRadius","t9","t10","t11","color","corners","disabled","disc","pressedColor","feedback","active","hovered","ring","t12","t13","t14","handlers","t15","Symbol","for","t16","toggleOf","t17","t18","row","t19","t20","t21","layer","t22","t23","t24","t25","Pick","set","toggle","_c"],"sources":["../../../src/components/checkbox/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { StyleProp, ViewProps, ViewStyle } from 'react-native'\nimport type {\n  ToggleState,\n  ToggleStateOptions,\n} from 'react-stately/useToggleState'\n\nimport { use, useEffect, useId, useRef } from 'react'\nimport { Pressable, View } from 'react-native'\nimport { useToggleState } from 'react-stately/useToggleState'\n\nimport type { CheckboxTone } from '../../control/checkbox-box'\nimport type { CheckboxGroupContextValue } from '../../control/group'\nimport type { ResolvedTheme } from '../../theme/scope'\n\nimport {\n  ControlLabel,\n  ControlMessage,\n  describedBy,\n  LAYER_SIZE,\n  messageOf,\n} from '../../control'\nimport { CheckboxBox } from '../../control/checkbox-box'\nimport { CheckboxGroupContext } from '../../control/group'\nimport { controlStylesOf } from '../../control/styles'\nimport { hitSlop, usePressFeedback } from '../../press'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles } from '../../theme/styles'\n\n// The checkbox page, as kanso-ui's Checkbox draws it: an 18dp box with a 2dp\n// corner and an 18dp glyph, inside a 40dp state layer, with a 48dp target.\n// Unselected, the box is a 2dp rule in on surface variant that turns on\n// surface while hovered, pressed or focused; selected or indeterminate, it\n// fills with primary and the glyph takes on primary. The error pair is error\n// and on error, and disabled is on surface at the disabled opacity for the\n// rule or the fill, with the glyph in surface. The state layer is on surface\n// over an unselected box and primary over a selected one while hovered, and\n// the two swap once pressed.\n//\n// The box eases between its colours over the motion tokens' short duration\n// on the standard curve, as web's transition does, and at once for a reader\n// who asks the device for reduced motion. The glyph arrives with the fill.\n//\n// The row, the label and the line under it are src/control's, which Radio\n// and Switch draw through as well. The whole row is the `Pressable`, so a\n// press on the label toggles the box, as a press on web's label does. The\n// line under it is outside the row, as web's is outside its label.\n//\n// Inside a CheckboxGroup the selection is the group's, as web's Checkbox\n// reads React Aria's group state: the box stands for the entry its `value`\n// names, a press selects or clears that entry, and the group's disabled,\n// read-only and error states reach the box as its own would.\n//\n// The corner is a literal: the page's 2dp is a step the shape scale does not\n// carry.\n\ntype CheckboxProps = Omit<ViewProps, 'children' | 'style'> & {\n  /**\n   * The label, beside the box. A checkbox that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  readonly children?: ReactNode\n  /**\n   * Whether the checkbox starts selected, when it keeps its own state.\n   * @default false\n   */\n  readonly defaultSelected?: boolean\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  readonly description?: string\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the checkbox in its error state: the message and the error colours both\n   * follow from it.\n   */\n  readonly error?: string\n  /**\n   * Draws the checkbox disabled, and takes no presses.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Draws the dash for a box that stands for a partly selected set, and\n   * reports the box as mixed to a screen reader. It is the call site's to\n   * clear: a press still changes `isSelected` underneath.\n   * @default false\n   */\n  readonly isIndeterminate?: boolean\n  /**\n   * Shows the state without letting a press change it.\n   * @default false\n   */\n  readonly isReadOnly?: boolean\n  /**\n   * Whether the checkbox is selected, for a call site holding the state\n   * itself with `onChange`.\n   */\n  readonly isSelected?: boolean\n  /** Called with the new state whenever a press changes it. */\n  readonly onChange?: (isSelected: boolean) => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * The entry this checkbox stands for inside a `CheckboxGroup`, which the\n   * group's value holds while it is selected. Required there, and unused\n   * outside one.\n   */\n  readonly value?: string\n}\n\n// The state layer's colour roles, hovered or focused and pressed. Error is\n// error throughout; otherwise the two swap once pressed.\nconst LAYERS: Readonly<\n  Record<\n    CheckboxTone,\n    {\n      readonly hover: keyof ResolvedTheme['colors']\n      readonly pressed: keyof ResolvedTheme['colors']\n    }\n  >\n> = {\n  error: { hover: 'error', pressed: 'error' },\n  marked: { hover: 'primary', pressed: 'onSurface' },\n  unmarked: { hover: 'onSurface', pressed: 'primary' },\n}\n\n/**\n * A checkbox with its label, and optionally a description or an error under\n * it. Its state is React Stately's, as web's is: pass `isSelected` with\n * `onChange` to control it, or `defaultSelected` to let it keep its own.\n * `isIndeterminate` draws the dash for a box that stands for a partly\n * selected set.\n *\n * ```tsx\n * <Checkbox defaultSelected description=\"Supporting line\">\n *   Label\n * </Checkbox>\n * ```\n *\n * A screen reader hears it as a checkbox named by its label, checked,\n * unchecked or mixed, followed by the line under it. A press anywhere on the\n * box or the label toggles it, and the row takes presses over the 48dp target\n * the page asks of the box. `style`, `ref` and `testID` land on the view\n * holding the row and the line under it, which is the element a layout\n * positions.\n */\nfunction Checkbox({\n  'aria-label': ariaLabel,\n  children,\n  defaultSelected,\n  description,\n  error,\n  isDisabled: ownDisabled = false,\n  isIndeterminate = false,\n  isReadOnly: ownReadOnly = false,\n  isSelected,\n  onChange,\n  style,\n  value,\n  ...props\n}: CheckboxProps) {\n  const theme = useTheme()\n  const group = use(CheckboxGroupContext)\n  const messageId = useId()\n  const control = useRef<ComponentRef<typeof Pressable>>(null)\n  const members = group?.members\n\n  if (group !== null && value === undefined) {\n    throw new Error(\n      'A Checkbox inside a CheckboxGroup names the entry it stands for with `value`.',\n    )\n  }\n\n  const isDisabled = ownDisabled || (group?.isDisabled ?? false)\n  const isReadOnly = ownReadOnly || (group?.isReadOnly ?? false)\n  const state = useToggleState(\n    group === null || value === undefined\n      ? { defaultSelected, isReadOnly, isSelected, onChange }\n      : memberOf(group, value, { isReadOnly, onChange }),\n  )\n\n  // Joins the group's list of checkboxes once, in the order the tree mounts\n  // them, so a native form holding the group back focuses the first.\n  useEffect(() => {\n    members?.add(messageId, control)\n    return () => {\n      members?.remove(messageId)\n    }\n  }, [members, messageId])\n\n  const { colors, radii } = theme\n  const marked = state.isSelected || isIndeterminate\n  const interactive = !isDisabled && !isReadOnly\n  const invalid = error !== undefined || (group?.isInvalid ?? false)\n  const tone: CheckboxTone = invalid ? 'error' : marked ? 'marked' : 'unmarked'\n\n  const feedback = usePressFeedback({\n    color: colors[LAYERS[tone].hover],\n    corners: { borderRadius: radii.circle },\n    disabled: !interactive,\n    disc: LAYER_SIZE,\n    pressedColor: colors[LAYERS[tone].pressed],\n  })\n  const active =\n    feedback.hovered || feedback.pressed || feedback.ring !== undefined\n\n  return (\n    <View {...props} style={style}>\n      <Pressable\n        aria-checked={isIndeterminate ? 'mixed' : state.isSelected}\n        aria-label={ariaLabel}\n        role=\"checkbox\"\n        {...describedBy(messageId, messageOf(description, error))}\n        {...feedback.handlers}\n        disabled={isDisabled}\n        hitSlop={hitSlop(LAYER_SIZE, LAYER_SIZE)}\n        onPress={toggleOf(state)}\n        ref={control}\n        style={controlStylesOf(theme).row}\n      >\n        <View\n          style={composeStyles<ViewStyle>(\n            controlStylesOf(theme).disc,\n            feedback.ring,\n          )}\n        >\n          {feedback.layer}\n          <CheckboxBox\n            active={active}\n            isDisabled={isDisabled}\n            isIndeterminate={isIndeterminate}\n            isSelected={state.isSelected}\n            tone={tone}\n            within={LAYER_SIZE}\n          />\n        </View>\n        <ControlLabel isDisabled={isDisabled}>{children}</ControlLabel>\n      </Pressable>\n      <ControlMessage description={description} error={error} id={messageId} />\n    </View>\n  )\n}\n\n// The toggle state of a checkbox in a group: selected while the group's\n// value holds its entry, and a change made to the group's value, reported to\n// the checkbox's own `onChange` as well, as React Aria's group item does.\nfunction memberOf(\n  group: CheckboxGroupContextValue,\n  value: string,\n  {\n    isReadOnly,\n    onChange,\n  }: Pick<ToggleStateOptions, 'onChange'> & { readonly isReadOnly: boolean },\n): ToggleStateOptions {\n  return {\n    isReadOnly,\n    isSelected: group.isSelected(value),\n    onChange: (isSelected) => {\n      group.set(value, isSelected)\n      onChange?.(isSelected)\n    },\n  }\n}\n\n// A press's toggle. Built by a call rather than declared in the component,\n// which is what react-perf's jsx-no-new-function-as-prop is after; the React\n// Compiler memoises the result on its input.\nfunction toggleOf(state: ToggleState) {\n  return () => {\n    state.toggle()\n  }\n}\n\nexport { Checkbox }\nexport type { CheckboxProps }\n"],"mappings":"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"}

package/dist/components/checkbox-group/index.d.ts

@@ -0,0 +1,93 @@
+import { ValidationResult } from "../../form/index.js";
+import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+//#region src/components/checkbox-group/index.d.ts
+type CheckboxGroupProps = Omit<ViewProps, 'children' | 'style'> & {
+  /** The checkboxes, each with a `value` of its own. */
+  readonly children?: ReactNode;
+  /** The entries selected at first, when the group keeps its own value. */
+  readonly defaultValue?: readonly string[];
+  /**
+   * A hint under the group. Replaced by `error` when there is one, so the
+   * two never stack.
+   */
+  readonly description?: string;
+  /**
+   * The problem with the current selection, in words. Its presence is what
+   * puts the group in its error state: the message, the label's colour and
+   * every box's error colours follow from it.
+   *
+   * Outside a `Form` the line under the group arrives with the message, so
+   * the group grows when this does and moves what is under it. A `Form`
+   * holds that space from the start; so does a permanent `description`.
+   */
+  readonly error?: string;
+  /**
+   * Draws every checkbox disabled, and takes no presses.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Shows the selection without letting a press change it.
+   * @default false
+   */
+  readonly isReadOnly?: boolean;
+  /**
+   * Marks the group's label, and has a `native` form hold submission back
+   * while nothing is selected.
+   * @default false
+   */
+  readonly isRequired?: boolean;
+  /**
+   * What the group is for. Required rather than optional: a group of
+   * checkboxes with no name is a set of boxes a screen reader cannot
+   * introduce.
+   */
+  readonly label: string;
+  /**
+   * The name the form around the group knows it by, which its
+   * `validationErrors` are keyed on. A form hands `onSubmit` one string per
+   * name, so a group's selection is not among those values: read it through
+   * `onChange`, or hold it with `value`.
+   */
+  readonly name?: string;
+  /** Called with the newly selected entries whenever a press changes them. */
+  readonly onChange?: (value: string[]) => void;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  readonly style?: StyleProp<ViewStyle>;
+  /**
+   * Checks the selection, returning its problem in words, or `true`, `null`
+   * or `undefined` when there is none. Shown as it changes, or under a
+   * `native` form once a submission is tried.
+   */
+  readonly validate?: (value: readonly string[]) => ValidationResult;
+  /**
+   * The selected entries, for a call site holding the value itself with
+   * `onChange`.
+   */
+  readonly value?: readonly string[];
+};
+/**
+ * A labelled set of checkboxes with one value between them. The value is
+ * React Stately's, as web's is React Aria's: pass `value` with `onChange` to
+ * control it, or `defaultValue` to let the group keep its own, and each
+ * `Checkbox` inside names the entry it stands for with `value`. Disabled,
+ * read-only and the error state reach every checkbox from here.
+ *
+ * ```tsx
+ * <CheckboxGroup defaultValue={['first']} label="Label">
+ *   <Checkbox value="first">First item</Checkbox>
+ *   <Checkbox value="second">Second item</Checkbox>
+ * </CheckboxGroup>
+ * ```
+ *
+ * A screen reader hears it as a group named by its label. On the web the
+ * line under it describes the group, as web's does; on iOS and Android it is
+ * read after the checkboxes, where it sits, and an error is announced as it
+ * arrives. `style`, `ref` and `testID` land on the group as a whole, which is
+ * the element a layout positions.
+ */
+declare function CheckboxGroup({ children, defaultValue, description, error, isDisabled, isReadOnly, isRequired, label, name, onChange, style, validate, value, ...props }: CheckboxGroupProps): import("react").JSX.Element;
+//#endregion
+export { CheckboxGroup, type CheckboxGroupProps };
+//# sourceMappingURL=index.d.ts.map