@kanso-labs/react-native-kanso-ui 0.3.1 → 0.5.0

package/dist/components/checkbox/index.js

@@ -1,20 +1,15 @@
-import { CheckGlyph, IndeterminateGlyph } from "../../glyphs/index.js";
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles } from "../../theme/styles.js";
-import { withOpacity } from "../../theme/color.js";
 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 { c } from "react/compiler-runtime";
-import { Pressable, StyleSheet, View } from "react-native";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import Animated, { Easing, useAnimatedStyle, useReducedMotion, withTiming } from "react-native-reanimated";
+import { Pressable, View } from "react-native";
 import { useToggleState } from "react-stately/useToggleState";
 //#region src/components/checkbox/index.tsx
-const BOX_SIZE = 18;
-const BOX_CORNER = 2;
-const BOX_RULE = 2;
 const LAYERS = {
 	error: {
 		hover: "error",
@@ -29,19 +24,6 @@ const LAYERS = {
 		pressed: "primary"
 	}
 };
-const styles = StyleSheet.create({
-	box: {
-		borderRadius: BOX_CORNER,
-		borderWidth: BOX_RULE,
-		height: BOX_SIZE,
-		width: BOX_SIZE
-	},
-	glyph: {
-		left: 11,
-		position: "absolute",
-		top: 11
-	}
-});
 /**
 * A checkbox with its label, and optionally a description or an error under
 * it. Its state is React Stately's, as web's is: pass `isSelected` with
@@ -63,7 +45,7 @@ const styles = StyleSheet.create({
 * positions.
 */
 function Checkbox(t0) {
-	const $ = c(77);
+	const $ = c(69);
 	let ariaLabel;
 	let children;
 	let defaultSelected;
@@ -155,205 +137,136 @@ function Checkbox(t0) {
 	} else t9 = $[24];
 	const feedback = usePressFeedback(t9);
 	const active = feedback.hovered || feedback.pressed || feedback.ring !== void 0;
-	let t10;
-	if ($[25] !== active || $[26] !== isDisabled || $[27] !== marked || $[28] !== theme || $[29] !== tone) {
-		t10 = paintOf(theme, {
-			active,
-			isDisabled,
-			marked,
-			tone
-		});
-		$[25] = active;
-		$[26] = isDisabled;
-		$[27] = marked;
-		$[28] = theme;
-		$[29] = tone;
-		$[30] = t10;
-	} else t10 = $[30];
-	const paint = t10;
-	const box = useBoxColors(paint);
-	const Glyph = isIndeterminate ? IndeterminateGlyph : state.isSelected ? CheckGlyph : null;
-	const t11 = isIndeterminate ? "mixed" : state.isSelected;
-	let t12;
-	if ($[31] !== description || $[32] !== error || $[33] !== messageId) {
-		t12 = describedBy(messageId, messageOf(description, error));
-		$[31] = description;
-		$[32] = error;
-		$[33] = messageId;
-		$[34] = t12;
-	} else t12 = $[34];
-	const t13 = feedback.handlers;
+	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;
+	let t13;
+	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = hitSlop(40, 40);
+		$[29] = t13;
+	} else t13 = $[29];
 	let t14;
-	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
-		t14 = hitSlop(40, 40);
-		$[35] = t14;
-	} else t14 = $[35];
+	if ($[30] !== state) {
+		t14 = toggleOf(state);
+		$[30] = state;
+		$[31] = t14;
+	} else t14 = $[31];
 	let t15;
-	if ($[36] !== state) {
-		t15 = toggleOf(state);
-		$[36] = state;
-		$[37] = t15;
-	} else t15 = $[37];
-	let t16;
-	if ($[38] !== theme) {
-		t16 = controlStylesOf(theme);
-		$[38] = theme;
-		$[39] = t16;
-	} else t16 = $[39];
-	const t17 = t16.row;
+	if ($[32] !== theme) {
+		t15 = controlStylesOf(theme);
+		$[32] = theme;
+		$[33] = t15;
+	} else t15 = $[33];
+	const t16 = t15.row;
+	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 ($[40] !== feedback.ring || $[41] !== theme) {
-		t18 = composeStyles(controlStylesOf(theme).disc, feedback.ring);
-		$[40] = feedback.ring;
-		$[41] = theme;
+	if ($[37] !== active || $[38] !== isDisabled || $[39] !== isIndeterminate || $[40] !== state.isSelected || $[41] !== tone) {
+		t18 = /* @__PURE__ */ jsx(CheckboxBox, {
+			active,
+			isDisabled,
+			isIndeterminate,
+			isSelected: state.isSelected,
+			tone,
+			within: 40
+		});
+		$[37] = active;
+		$[38] = isDisabled;
+		$[39] = isIndeterminate;
+		$[40] = state.isSelected;
+		$[41] = tone;
 		$[42] = t18;
 	} else t18 = $[42];
-	const t19 = feedback.layer;
-	let t20;
-	if ($[43] !== box) {
-		t20 = composeStyles(styles.box, box);
-		$[43] = box;
-		$[44] = t20;
-	} else t20 = $[44];
-	let t21;
-	if ($[45] !== t20) {
-		t21 = /* @__PURE__ */ jsx(Animated.View, { style: t20 });
-		$[45] = t20;
-		$[46] = t21;
-	} else t21 = $[46];
-	let t22;
-	if ($[47] !== Glyph || $[48] !== paint) {
-		t22 = Glyph === null ? null : /* @__PURE__ */ jsx(Glyph, {
-			color: paint.glyph,
-			size: BOX_SIZE,
-			style: styles.glyph
-		});
-		$[47] = Glyph;
-		$[48] = paint;
-		$[49] = t22;
-	} else t22 = $[49];
-	let t23;
-	if ($[50] !== feedback.layer || $[51] !== t18 || $[52] !== t21 || $[53] !== t22) {
-		t23 = /* @__PURE__ */ jsxs(View, {
-			style: t18,
-			children: [
-				t19,
-				t21,
-				t22
-			]
+	let t19;
+	if ($[43] !== feedback.layer || $[44] !== t17 || $[45] !== t18) {
+		t19 = /* @__PURE__ */ jsxs(View, {
+			style: t17,
+			children: [feedback.layer, t18]
 		});
-		$[50] = feedback.layer;
-		$[51] = t18;
-		$[52] = t21;
-		$[53] = t22;
-		$[54] = t23;
-	} else t23 = $[54];
-	let t24;
-	if ($[55] !== children || $[56] !== isDisabled) {
-		t24 = /* @__PURE__ */ jsx(ControlLabel, {
+		$[43] = feedback.layer;
+		$[44] = t17;
+		$[45] = t18;
+		$[46] = t19;
+	} else t19 = $[46];
+	let t20;
+	if ($[47] !== children || $[48] !== isDisabled) {
+		t20 = /* @__PURE__ */ jsx(ControlLabel, {
 			isDisabled,
 			children
 		});
-		$[55] = children;
-		$[56] = isDisabled;
-		$[57] = t24;
-	} else t24 = $[57];
-	let t25;
-	if ($[58] !== ariaLabel || $[59] !== feedback.handlers || $[60] !== isDisabled || $[61] !== t11 || $[62] !== t12 || $[63] !== t15 || $[64] !== t16.row || $[65] !== t23 || $[66] !== t24) {
-		t25 = /* @__PURE__ */ jsxs(Pressable, {
-			"aria-checked": t11,
+		$[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,
 			"aria-label": ariaLabel,
 			role: "checkbox",
+			...t11,
 			...t12,
-			...t13,
 			disabled: isDisabled,
-			hitSlop: t14,
-			onPress: t15,
-			style: t17,
-			children: [t23, t24]
+			hitSlop: t13,
+			onPress: t14,
+			style: t16,
+			children: [t19, t20]
 		});
-		$[58] = ariaLabel;
-		$[59] = feedback.handlers;
-		$[60] = isDisabled;
-		$[61] = t11;
-		$[62] = t12;
-		$[63] = t15;
-		$[64] = t16.row;
-		$[65] = t23;
-		$[66] = t24;
-		$[67] = t25;
-	} else t25 = $[67];
-	let t26;
-	if ($[68] !== description || $[69] !== error || $[70] !== messageId) {
-		t26 = /* @__PURE__ */ jsx(ControlMessage, {
+		$[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, {
 			description,
 			error,
 			id: messageId
 		});
-		$[68] = description;
-		$[69] = error;
-		$[70] = messageId;
-		$[71] = t26;
-	} else t26 = $[71];
-	let t27;
-	if ($[72] !== props || $[73] !== style || $[74] !== t25 || $[75] !== t26) {
-		t27 = /* @__PURE__ */ jsxs(View, {
+		$[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, {
 			...props,
 			style,
-			children: [t25, t26]
+			children: [t21, t22]
 		});
-		$[72] = props;
-		$[73] = style;
-		$[74] = t25;
-		$[75] = t26;
-		$[76] = t27;
-	} else t27 = $[76];
-	return t27;
-}
-/**
-* What the box is painted in: its fill, its rule and the glyph's colour.
-* Where the page draws no fill or no rule it is the colour beside it made
-* clear rather than plain transparent black, so the box eases through its
-* own colour rather than through grey.
-*/
-function paintOf({ colors, stateLayerOpacity }, { active, isDisabled, marked, tone }) {
-	const disabled = withOpacity(colors.onSurface, stateLayerOpacity.disabledContent);
-	if (marked) {
-		const fill = isDisabled ? disabled : tone === "error" ? colors.error : colors.primary;
-		return {
-			fill,
-			glyph: isDisabled ? colors.surface : tone === "error" ? colors.onError : colors.onPrimary,
-			rule: withOpacity(fill, 0)
-		};
-	}
-	const rule = isDisabled ? disabled : tone === "error" ? colors.error : active ? colors.onSurface : colors.onSurfaceVariant;
-	return {
-		fill: withOpacity(rule, 0),
-		glyph: colors.onPrimary,
-		rule
-	};
+		$[64] = props;
+		$[65] = style;
+		$[66] = t21;
+		$[67] = t22;
+		$[68] = t23;
+	} else t23 = $[68];
+	return t23;
 }
 function toggleOf(state) {
 	return () => {
 		state.toggle();
 	};
 }
-function useBoxColors(t0) {
-	const { fill, rule } = t0;
-	const { motion } = useTheme();
-	const reduceMotion = useReducedMotion();
-	const timing = {
-		duration: motion.durationShort2,
-		easing: Easing.bezier(...motion.easingStandard)
-	};
-	return useAnimatedStyle(() => {
-		"worklet";
-		return {
-			backgroundColor: reduceMotion ? fill : withTiming(fill, timing),
-			borderColor: reduceMotion ? rule : withTiming(rule, timing)
-		};
-	});
-}
 //#endregion
 export { Checkbox };
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","StyleProp","ViewProps","ViewStyle","AnimatedStyle","ToggleState","useId","Pressable","StyleSheet","View","Animated","Easing","useAnimatedStyle","useReducedMotion","withTiming","useToggleState","ResolvedTheme","ControlLabel","ControlMessage","describedBy","LAYER_SIZE","messageOf","controlStylesOf","CheckGlyph","IndeterminateGlyph","hitSlop","usePressFeedback","withOpacity","useTheme","composeStyles","CheckboxProps","Omit","children","defaultSelected","description","error","isDisabled","isIndeterminate","isReadOnly","isSelected","onChange","ref","style","Tone","BOX_SIZE","BOX_CORNER","BOX_RULE","LAYERS","Readonly","Record","hover","pressed","marked","unmarked","styles","create","box","borderRadius","borderWidth","height","width","glyph","left","position","top","Checkbox","t0","$","_c","ariaLabel","props","t1","t2","t3","undefined","theme","t4","state","messageId","colors","radii","interactive","tone","t5","t6","circle","t7","t8","t9","color","corners","disabled","disc","pressedColor","feedback","active","hovered","ring","t10","paintOf","paint","useBoxColors","Glyph","t11","t12","t13","handlers","t14","Symbol","for","t15","toggleOf","t16","t17","row","t18","t19","layer","t20","t21","t22","t23","t24","t25","t26","t27","stateLayerOpacity","onSurface","disabledContent","fill","primary","surface","onError","onPrimary","rule","onSurfaceVariant","toggle","motion","reduceMotion","timing","duration","durationShort2","easing","bezier","easingStandard","backgroundColor","borderColor","_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 { AnimatedStyle } from 'react-native-reanimated'\nimport type { ToggleState } from 'react-stately/useToggleState'\n\nimport { useId } from 'react'\nimport { Pressable, StyleSheet, View } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  withTiming,\n} from 'react-native-reanimated'\nimport { useToggleState } from 'react-stately/useToggleState'\n\nimport type { ResolvedTheme } from '../../theme/scope'\n\nimport {\n  ControlLabel,\n  ControlMessage,\n  describedBy,\n  LAYER_SIZE,\n  messageOf,\n} from '../../control'\nimport { controlStylesOf } from '../../control/styles'\nimport { CheckGlyph, IndeterminateGlyph } from '../../glyphs'\nimport { hitSlop, usePressFeedback } from '../../press'\nimport { withOpacity } from '../../theme/color'\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\ntype Tone = 'error' | 'marked' | 'unmarked'\n\n// The box's side, its rule and its corner, from the page. The glyph is the\n// box's size and sits over the whole of it, rule included.\nconst BOX_SIZE = 18\nconst BOX_CORNER = 2\nconst BOX_RULE = 2\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    Tone,\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\nconst styles = StyleSheet.create({\n  box: {\n    borderRadius: BOX_CORNER,\n    borderWidth: BOX_RULE,\n    height: BOX_SIZE,\n    width: BOX_SIZE,\n  },\n  // Over the box rather than inside it, since a box's children are laid out\n  // inside its rule and the glyph covers the rule as well.\n  glyph: {\n    left: (LAYER_SIZE - BOX_SIZE) / 2,\n    position: 'absolute',\n    top: (LAYER_SIZE - BOX_SIZE) / 2,\n  },\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: Tone =\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  const paint = paintOf(theme, { active, isDisabled, marked, tone })\n  const box = useBoxColors(paint)\n  const Glyph = isIndeterminate\n    ? IndeterminateGlyph\n    : state.isSelected\n      ? CheckGlyph\n      : null\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          <Animated.View\n            style={composeStyles<AnimatedStyle<ViewStyle>>(styles.box, box)}\n          />\n          {Glyph === null ? null : (\n            <Glyph color={paint.glyph} size={BOX_SIZE} style={styles.glyph} />\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/**\n * What the box is painted in: its fill, its rule and the glyph's colour.\n * Where the page draws no fill or no rule it is the colour beside it made\n * clear rather than plain transparent black, so the box eases through its\n * own colour rather than through grey.\n */\nfunction paintOf(\n  { colors, stateLayerOpacity }: ResolvedTheme,\n  {\n    active,\n    isDisabled,\n    marked,\n    tone,\n  }: {\n    readonly active: boolean\n    readonly isDisabled: boolean\n    readonly marked: boolean\n    readonly tone: Tone\n  },\n) {\n  const disabled = withOpacity(\n    colors.onSurface,\n    stateLayerOpacity.disabledContent,\n  )\n\n  if (marked) {\n    const fill = isDisabled\n      ? disabled\n      : tone === 'error'\n        ? colors.error\n        : colors.primary\n    const glyph = isDisabled\n      ? colors.surface\n      : tone === 'error'\n        ? colors.onError\n        : colors.onPrimary\n\n    return { fill, glyph, rule: withOpacity(fill, 0) }\n  }\n\n  const rule = isDisabled\n    ? disabled\n    : tone === 'error'\n      ? colors.error\n      : active\n        ? colors.onSurface\n        : colors.onSurfaceVariant\n\n  return { fill: withOpacity(rule, 0), glyph: colors.onPrimary, rule }\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\n// The box's fill and rule, eased to as the state changes.\nfunction useBoxColors({ fill, rule }: { fill: string; rule: string }) {\n  const { motion } = useTheme()\n  const reduceMotion = useReducedMotion()\n  const timing = {\n    duration: motion.durationShort2,\n    easing: Easing.bezier(...motion.easingStandard),\n  }\n\n  return useAnimatedStyle(() => {\n    'worklet'\n    return {\n      backgroundColor: reduceMotion ? fill : withTiming(fill, timing),\n      borderColor: reduceMotion ? rule : withTiming(rule, timing),\n    }\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","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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"}

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

@@ -1,5 +1,5 @@
-import { PressableProps, StyleProp, View, ViewStyle } from "react-native";
 import { ComponentRef, ReactNode, Ref } from "react";
+import { PressableProps, StyleProp, View, ViewStyle } from "react-native";
 //#region src/components/chip/index.d.ts
 /** An assist or suggestion chip: an action, drawn as a plain button. */
 type ChipActionProps = ChipBaseProps & {

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

@@ -1,5 +1,5 @@
-import { PressableProps, StyleProp, View, ViewProps, ViewStyle } from "react-native";
 import { ComponentRef, ReactElement, ReactNode, Ref } from "react";
+import { PressableProps, StyleProp, View, ViewProps, ViewStyle } from "react-native";
 import { Key, Selection, SelectionMode } from "react-stately";
 //#region src/components/chip-group/index.d.ts
 type ChipGroupChipProps = Omit<PressableProps, 'children' | 'disabled' | 'id' | 'style'> & {

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

@@ -7,9 +7,9 @@ import { usePressFeedback } from "../../press/index.js";
 import { stylesOf } from "../../chip/styles.js";
 import { ChipGlyph, ChipLabel, measureThen, paintOf, targetOf, useEasedColors } from "../../chip/index.js";
 import { c } from "react/compiler-runtime";
-import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
 import { useId, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
 import Animated from "react-native-reanimated";
 import { useListState } from "react-stately/useListState";
 //#region src/components/chip-group/index.tsx

package/dist/components/copy-field/index.d.ts

@@ -1,5 +1,5 @@
-import { View, ViewProps } from "react-native";
 import { ComponentRef, Ref } from "react";
+import { View, ViewProps } from "react-native";
 //#region src/components/copy-field/index.d.ts
 type CopyFieldProps = Omit<ViewProps, 'children'> & {
   /**

package/dist/components/copy-field/index.js

@@ -5,9 +5,9 @@ import { useTypeRole } from "../../typography/roles.js";
 import { Button } from "../button/index.js";
 import { useClipboardAvailable, writeClipboard } from "../../clipboard/index.js";
 import { c } from "react/compiler-runtime";
-import { AccessibilityInfo, Platform, StyleSheet, Text, View } from "react-native";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { AccessibilityInfo, Platform, StyleSheet, Text, View } from "react-native";
 //#region src/components/copy-field/index.tsx
 const COPIED_RESET_MS = 2e3;
 const RESERVE = {

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

@@ -1,5 +1,5 @@
-import { Text, TextProps } from "react-native";
 import { ComponentRef, Ref } from "react";
+import { Text, TextProps } from "react-native";
 //#region src/components/currency/index.d.ts
 type CurrencyProps = Omit<TextProps, 'children'> & {
   /**

package/dist/components/currency/index.js

@@ -3,8 +3,8 @@ import { composeStyles, themedStyles } from "../../theme/styles.js";
 import { useFontFamily } from "../../typography/fonts.js";
 import { familyStyle, nativeWeight } from "../../typography/roles.js";
 import { c } from "react/compiler-runtime";
-import { StyleSheet, Text } from "react-native";
 import { jsx } from "react/jsx-runtime";
+import { StyleSheet, Text } from "react-native";
 //#region src/components/currency/index.tsx
 const stylesOf = themedStyles(({ colors, typography }) => StyleSheet.create({
 	base: {

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

@@ -1,5 +1,6 @@
-import { HostInstance, ScrollView, ScrollViewProps, StyleProp, TextProps, View, ViewProps, ViewStyle } from "react-native";
+import { ModalOpenProps } from "../../modal/index.js";
 import { ComponentRef, ReactNode, Ref } from "react";
+import { HostInstance, ScrollView, ScrollViewProps, StyleProp, TextProps, View, ViewProps, ViewStyle } from "react-native";
 //#region src/components/dialog/index.d.ts
 type DialogBodyProps = ScrollViewProps & {
   readonly ref?: Ref<ComponentRef<typeof ScrollView>>;
@@ -31,7 +32,7 @@ type DialogContentProps = DialogOpenProps & Omit<ViewProps, 'children' | 'role'
   readonly role?: 'alertdialog' | 'dialog';
   readonly style?: StyleProp<ViewStyle>;
 };
-type DialogOpenProps = {
+type DialogOpenProps = ModalOpenProps & {
   /** Whether the dialog starts open, when it keeps its own state. */
   readonly defaultOpen?: boolean;
   /** Whether the dialog is open, when the call site holds the state. */