@kanso-labs/react-native-kanso-ui 0.0.0-stage → 0.1.0

package/dist/components/checkbox/index.js

@@ -0,0 +1,360 @@
+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 { 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 { 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",
+		pressed: "error"
+	},
+	marked: {
+		hover: "primary",
+		pressed: "onSurface"
+	},
+	unmarked: {
+		hover: "onSurface",
+		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
+* `onChange` to control it, or `defaultSelected` to let it keep its own.
+* `isIndeterminate` draws the dash for a box that stands for a partly
+* selected set.
+*
+* ```tsx
+* <Checkbox defaultSelected description="Supporting line">
+*   Label
+* </Checkbox>
+* ```
+*
+* A screen reader hears it as a checkbox named by its label, checked,
+* unchecked or mixed, followed by the line under it. A press anywhere on the
+* box or the label toggles it, and the row takes presses over the 48dp target
+* the page asks of the box. `style`, `ref` and `testID` land on the view
+* holding the row and the line under it, which is the element a layout
+* positions.
+*/
+function Checkbox(t0) {
+	const $ = c(77);
+	let ariaLabel;
+	let children;
+	let defaultSelected;
+	let description;
+	let error;
+	let isSelected;
+	let onChange;
+	let props;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		({"aria-label": ariaLabel, children, defaultSelected, description, error, isDisabled: t1, isIndeterminate: t2, isReadOnly: t3, isSelected, onChange, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = ariaLabel;
+		$[2] = children;
+		$[3] = defaultSelected;
+		$[4] = description;
+		$[5] = error;
+		$[6] = isSelected;
+		$[7] = onChange;
+		$[8] = props;
+		$[9] = style;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+	} else {
+		ariaLabel = $[1];
+		children = $[2];
+		defaultSelected = $[3];
+		description = $[4];
+		error = $[5];
+		isSelected = $[6];
+		onChange = $[7];
+		props = $[8];
+		style = $[9];
+		t1 = $[10];
+		t2 = $[11];
+		t3 = $[12];
+	}
+	const isDisabled = t1 === void 0 ? false : t1;
+	const isIndeterminate = t2 === void 0 ? false : t2;
+	const isReadOnly = t3 === void 0 ? false : t3;
+	const theme = useTheme();
+	let t4;
+	if ($[13] !== defaultSelected || $[14] !== isReadOnly || $[15] !== isSelected || $[16] !== onChange) {
+		t4 = {
+			defaultSelected,
+			isReadOnly,
+			isSelected,
+			onChange
+		};
+		$[13] = defaultSelected;
+		$[14] = isReadOnly;
+		$[15] = isSelected;
+		$[16] = onChange;
+		$[17] = t4;
+	} else t4 = $[17];
+	const state = useToggleState(t4);
+	const messageId = useId();
+	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,
+			disc: 40,
+			pressedColor: t8
+		};
+		$[20] = t5;
+		$[21] = t6;
+		$[22] = t7;
+		$[23] = t8;
+		$[24] = t9;
+	} 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;
+	let t14;
+	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = hitSlop(40, 40);
+		$[35] = t14;
+	} else t14 = $[35];
+	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;
+	let t18;
+	if ($[40] !== feedback.ring || $[41] !== theme) {
+		t18 = composeStyles(controlStylesOf(theme).disc, feedback.ring);
+		$[40] = feedback.ring;
+		$[41] = theme;
+		$[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
+			]
+		});
+		$[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, {
+			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,
+			"aria-label": ariaLabel,
+			role: "checkbox",
+			...t12,
+			...t13,
+			disabled: isDisabled,
+			hitSlop: t14,
+			onPress: t15,
+			style: t17,
+			children: [t23, t24]
+		});
+		$[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, {
+			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, {
+			...props,
+			style,
+			children: [t25, t26]
+		});
+		$[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
+	};
+}
+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 };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["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 { 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<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":";;;;;;;;;;;;;;AA2GA,MAAM6C,WAAW;AACjB,MAAMC,aAAa;AACnB,MAAMC,WAAW;AAIjB,MAAMC,SAQF;CACFZ,OAAO;EAAEe,OAAO;EAASC,SAAS;CAAQ;CAC1CC,QAAQ;EAAEF,OAAO;EAAWC,SAAS;CAAY;CACjDE,UAAU;EAAEH,OAAO;EAAaC,SAAS;CAAU;AACrD;AAEA,MAAMG,SAAS9C,WAAW+C,OAAO;CAC/BC,KAAK;EACHC,cAAcZ;EACda,aAAaZ;EACba,QAAQf;EACRgB,OAAOhB;CACT;CAGAiB,OAAO;EACLC,MAAAA;EACAC,UAAU;EACVC,KAAAA;CACF;AACF,CAAC;;;;;;;;;;;;;;;;;;;;;AAsBD,SAAAC,SAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAArC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAI;CAAA,IAAAC;CAAA,IAAA8B;CAAA,IAAA5B;CAAA,IAAA6B;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAN,EAAA,OAAAD,IAAA;EAAkB,CAAA,CAAA,cAAAG,WAAArC,UAAAC,iBAAAC,aAAAC,OAAAC,YAAAmC,IAAAlC,iBAAAmC,IAAAlC,YAAAmC,IAAAlC,YAAAC,UAAAE,OAAA,GAAA4B,SAAAJ;EAaFC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAnC;EAAAmC,EAAA,KAAAlC;EAAAkC,EAAA,KAAAjC;EAAAiC,EAAA,KAAAhC;EAAAgC,EAAA,KAAA5B;EAAA4B,EAAA,KAAA3B;EAAA2B,EAAA,KAAAG;EAAAH,EAAA,KAAAzB;EAAAyB,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;CAAA,OAAA;EAAAJ,YAAAF,EAAA;EAAAnC,WAAAmC,EAAA;EAAAlC,kBAAAkC,EAAA;EAAAjC,cAAAiC,EAAA;EAAAhC,QAAAgC,EAAA;EAAA5B,aAAA4B,EAAA;EAAA3B,WAAA2B,EAAA;EAAAG,QAAAH,EAAA;EAAAzB,QAAAyB,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;CAAA;CAPd,MAAA/B,aAAAmC,OAAAG,KAAAA,IAAA,QAAAH;CACA,MAAAlC,kBAAAmC,OAAAE,KAAAA,IAAA,QAAAF;CACA,MAAAlC,aAAAmC,OAAAC,KAAAA,IAAA,QAAAD;CAMA,MAAAE,QAAc/C,SAAS;CAAC,IAAAgD;CAAA,IAAAT,EAAA,QAAAlC,mBAAAkC,EAAA,QAAA7B,cAAA6B,EAAA,QAAA5B,cAAA4B,EAAA,QAAA3B,UAAA;EACKoC,KAAA;GAAA3C;GAAAK;GAAAC;GAAAC;EAK7B;EAAC2B,EAAA,MAAAlC;EAAAkC,EAAA,MAAA7B;EAAA6B,EAAA,MAAA5B;EAAA4B,EAAA,MAAA3B;EAAA2B,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CALD,MAAAU,QAAc9D,eAAe6D,EAK5B;CACD,MAAAE,YAAkBxE,MAAM;CAExB,MAAA,EAAAyE,QAAAC,UAA0BL;CAC1B,MAAAvB,SAAeyB,MAAKtC,cAALF;CACf,MAAA4C,cAAoB,CAAC7C,cAAD,CAAgBE;CACpC,MAAA4C,OACE/C,UAAUuC,KAAAA,IAAatB,SAAA,WAAA,aAAvB;CAGO,MAAA+B,KAAAJ,OAAOhC,OAAOmC,KAAK,CAAAhC;CAAO,IAAAkC;CAAA,IAAAjB,EAAA,QAAAa,MAAAK,QAAA;EACxBD,KAAA,EAAA3B,cAAgBuB,MAAKK,OAAQ;EAAClB,EAAA,MAAAa,MAAAK;EAAAlB,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAC7B,MAAAmB,KAAA,CAACL;CAEG,MAAAM,KAAAR,OAAOhC,OAAOmC,KAAK,CAAA/B;CAAS,IAAAqC;CAAA,IAAArB,EAAA,QAAAgB,MAAAhB,EAAA,QAAAiB,MAAAjB,EAAA,QAAAmB,MAAAnB,EAAA,QAAAoB,IAAA;EALVC,KAAA;GAAAC,OACzBN;GAA0BO,SACxBN;GAA8BO,UAC7BL;GAAYM,MAAAA;GACNC,cACFN;EAChB;EAACpB,EAAA,MAAAgB;EAAAhB,EAAA,MAAAiB;EAAAjB,EAAA,MAAAmB;EAAAnB,EAAA,MAAAoB;EAAApB,EAAA,MAAAqB;CAAA,OAAAA,KAAArB,EAAA;CAND,MAAA2B,WAAiBpE,iBAAiB8D,EAMjC;CACD,MAAAO,SACED,SAAQE,WAAYF,SAAQ3C,WAAY2C,SAAQG,SAAUvB,KAAAA;CAAS,IAAAwB;CAAA,IAAA/B,EAAA,QAAA4B,UAAA5B,EAAA,QAAA/B,cAAA+B,EAAA,QAAAf,UAAAe,EAAA,QAAAQ,SAAAR,EAAA,QAAAe,MAAA;EACvDgB,MAAAC,QAAQxB,OAAO;GAAAoB;GAAA3D;GAAAgB;GAAA8B;EAAmC,CAAC;EAACf,EAAA,MAAA4B;EAAA5B,EAAA,MAAA/B;EAAA+B,EAAA,MAAAf;EAAAe,EAAA,MAAAQ;EAAAR,EAAA,MAAAe;EAAAf,EAAA,MAAA+B;CAAA,OAAAA,MAAA/B,EAAA;CAAlE,MAAAiC,QAAcF;CACd,MAAA1C,MAAY6C,aAAaD,KAAK;CAC9B,MAAAE,QAAcjE,kBAAAb,qBAEVqD,MAAKtC,aAALhB,aAAA;CAOgB,MAAAgF,MAAAlE,kBAAA,UAA4BwC,MAAKtC;CAAW,IAAAiE;CAAA,IAAArC,EAAA,QAAAjC,eAAAiC,EAAA,QAAAhC,SAAAgC,EAAA,QAAAW,WAAA;EAGtD0B,MAAArF,YAAY2D,WAAWzD,UAAUa,aAAaC,KAAK,CAAC;EAACgC,EAAA,MAAAjC;EAAAiC,EAAA,MAAAhC;EAAAgC,EAAA,MAAAW;EAAAX,EAAA,MAAAqC;CAAA,OAAAA,MAAArC,EAAA;CACrD,MAAAsC,MAAAX,SAAQY;CAAS,IAAAC;CAAA,IAAAxC,EAAA,QAAAyC,OAAAC,IAAA,2BAAA,GAAA;EAEZF,MAAAlF,QAAAA,IAAAA,EAA8B;EAAC0C,EAAA,MAAAwC;CAAA,OAAAA,MAAAxC,EAAA;CAAA,IAAA2C;CAAA,IAAA3C,EAAA,QAAAU,OAAA;EAC/BiC,MAAAC,SAASlC,KAAK;EAACV,EAAA,MAAAU;EAAAV,EAAA,MAAA2C;CAAA,OAAAA,MAAA3C,EAAA;CAAA,IAAA6C;CAAA,IAAA7C,EAAA,QAAAQ,OAAA;EACjBqC,MAAA1F,gBAAgBqD,KAAK;EAACR,EAAA,MAAAQ;EAAAR,EAAA,MAAA6C;CAAA,OAAAA,MAAA7C,EAAA;CAAtB,MAAA8C,MAAAD,IAAsBE;CAAI,IAAAC;CAAA,IAAAhD,EAAA,QAAA2B,SAAAG,QAAA9B,EAAA,QAAAQ,OAAA;EAGxBwC,MAAAtF,cACLP,gBAAgBqD,KAAK,CAAC,CAAAiB,MACtBE,SAAQG,IACV;EAAC9B,EAAA,MAAA2B,SAAAG;EAAA9B,EAAA,MAAAQ;EAAAR,EAAA,MAAAgD;CAAA,OAAAA,MAAAhD,EAAA;CAEA,MAAAiD,MAAAtB,SAAQuB;CAAM,IAAAC;CAAA,IAAAnD,EAAA,QAAAX,KAAA;EAEN8D,MAAAzF,cAAwCyB,OAAME,KAAMA,GAAG;EAACW,EAAA,MAAAX;EAAAW,EAAA,MAAAmD;CAAA,OAAAA,MAAAnD,EAAA;CAAA,IAAAoD;CAAA,IAAApD,EAAA,QAAAmD,KAAA;EADjEC,MAAA,oBAAA,SAAA,MAAA,EACS,OAAAD,IAAwD,CAAA;EAC/DnD,EAAA,MAAAmD;EAAAnD,EAAA,MAAAoD;CAAA,OAAAA,MAAApD,EAAA;CAAA,IAAAqD;CAAA,IAAArD,EAAA,QAAAmC,SAAAnC,EAAA,QAAAiC,OAAA;EACDoB,MAAAlB,UAAU,OAAV,OACC,oBAAC,OAAD;GAAc,OAAAF,MAAKvC;GAAcjB,MAAAA;GAAiB,OAAAU,OAAMO;EAAM,CAAA;EAC/DM,EAAA,MAAAmC;EAAAnC,EAAA,MAAAiC;EAAAjC,EAAA,MAAAqD;CAAA,OAAAA,MAAArD,EAAA;CAAA,IAAAsD;CAAA,IAAAtD,EAAA,QAAA2B,SAAAuB,SAAAlD,EAAA,QAAAgD,OAAAhD,EAAA,QAAAoD,OAAApD,EAAA,QAAAqD,KAAA;EAZHC,MAAA,qBAAC,MAAD;GACS,OAAAN;GADT,UAAA;IAMGC;IACDG;IAGCC;GAVE;;EAaErD,EAAA,MAAA2B,SAAAuB;EAAAlD,EAAA,MAAAgD;EAAAhD,EAAA,MAAAoD;EAAApD,EAAA,MAAAqD;EAAArD,EAAA,MAAAsD;CAAA,OAAAA,MAAAtD,EAAA;CAAA,IAAAuD;CAAA,IAAAvD,EAAA,QAAAnC,YAAAmC,EAAA,QAAA/B,YAAA;EACPsF,MAAA,oBAAC,cAAD;GAA0BtF;GAAaJ;EAA1B,CAAA;EAAkDmC,EAAA,MAAAnC;EAAAmC,EAAA,MAAA/B;EAAA+B,EAAA,MAAAuD;CAAA,OAAAA,MAAAvD,EAAA;CAAA,IAAAwD;CAAA,IAAAxD,EAAA,QAAAE,aAAAF,EAAA,QAAA2B,SAAAY,YAAAvC,EAAA,QAAA/B,cAAA+B,EAAA,QAAAoC,OAAApC,EAAA,QAAAqC,OAAArC,EAAA,QAAA2C,OAAA3C,EAAA,QAAA6C,IAAAE,OAAA/C,EAAA,QAAAsD,OAAAtD,EAAA,QAAAuD,KAAA;EAzBjEC,MAAA,qBAAC,WAAD;GACgB,gBAAApB;GACFlC,cAAAA;GACP,MAAA;GAAU,GACXmC;GAAqD,GACrDC;GACMrE,UAAAA;GACD,SAAAuE;GACA,SAAAG;GACF,OAAAG;GATT,UAAA,CAWEQ,KAcAC,GAzBQ;;EA0BEvD,EAAA,MAAAE;EAAAF,EAAA,MAAA2B,SAAAY;EAAAvC,EAAA,MAAA/B;EAAA+B,EAAA,MAAAoC;EAAApC,EAAA,MAAAqC;EAAArC,EAAA,MAAA2C;EAAA3C,EAAA,MAAA6C,IAAAE;EAAA/C,EAAA,MAAAsD;EAAAtD,EAAA,MAAAuD;EAAAvD,EAAA,MAAAwD;CAAA,OAAAA,MAAAxD,EAAA;CAAA,IAAAyD;CAAA,IAAAzD,EAAA,QAAAjC,eAAAiC,EAAA,QAAAhC,SAAAgC,EAAA,QAAAW,WAAA;EACZ8C,MAAA,oBAAC,gBAAD;GAA6B1F;GAAoBC;GAAW2C,IAAAA;EAAS,CAAA;EAAIX,EAAA,MAAAjC;EAAAiC,EAAA,MAAAhC;EAAAgC,EAAA,MAAAW;EAAAX,EAAA,MAAAyD;CAAA,OAAAA,MAAAzD,EAAA;CAAA,IAAA0D;CAAA,IAAA1D,EAAA,QAAAG,SAAAH,EAAA,QAAAzB,SAAAyB,EAAA,QAAAwD,OAAAxD,EAAA,QAAAyD,KAAA;EA5B3EC,MAAA,qBAAC,MAAD;GAAK,GAAKvD;GAAc5B;GAAxB,UAAA,CACEiF,KA2BAC,GA5BG;;EA6BEzD,EAAA,MAAAG;EAAAH,EAAA,MAAAzB;EAAAyB,EAAA,MAAAwD;EAAAxD,EAAA,MAAAyD;EAAAzD,EAAA,MAAA0D;CAAA,OAAAA,MAAA1D,EAAA;CAAA,OA7BP0D;AA6BO;;;;;;;AAUX,SAAS1B,QACP,EAAEpB,QAAQ+C,qBACV,EACE/B,QACA3D,YACAgB,QACA8B,QAOF;CACA,MAAMS,WAAWhE,YACfoD,OAAOgD,WACPD,kBAAkBE,eACpB;CAEA,IAAI5E,QAAQ;EACV,MAAM6E,OAAO7F,aACTuD,WACAT,SAAS,UACPH,OAAO5C,QACP4C,OAAOmD;EAOb,OAAO;GAAED;GAAMpE,OANDzB,aACV2C,OAAOoD,UACPjD,SAAS,UACPH,OAAOqD,UACPrD,OAAOsD;GAESC,MAAM3G,YAAYsG,MAAM,CAAC;EAAE;CACnD;CAEA,MAAMK,OAAOlG,aACTuD,WACAT,SAAS,UACPH,OAAO5C,QACP4D,SACEhB,OAAOgD,YACPhD,OAAOwD;CAEf,OAAO;EAAEN,MAAMtG,YAAY2G,MAAM,CAAC;EAAGzE,OAAOkB,OAAOsD;EAAWC;CAAK;AACrE;AAKA,SAASvB,SAASlC,OAAoB;CACpC,aAAa;EACXA,MAAM2D,OAAO;CACf;AACF;AAGA,SAAAnC,aAAAnC,IAAA;CAAsB,MAAA,EAAA+D,MAAAK,SAAApE;CACpB,MAAA,EAAAuE,WAAmB7G,SAAS;CAC5B,MAAA8G,eAAqB7H,iBAAiB;CACtC,MAAA8H,SAAe;EAAAC,UACHH,OAAMI;EAAeC,QACvBnI,OAAMoI,OAAO,GAAIN,OAAMO,cAAe;CAChD;CAAC,OAEMpI,uBAAiB;EAAA;EAAA,OAEf;GAAAqI,iBACYP,eAAAT,OAAsBnH,WAAWmH,MAAMU,MAAM;GAACO,aAClDR,eAAAJ,OAAsBxH,WAAWwH,MAAMK,MAAM;EAC5D;CAAC,CACF;AAAC"}

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

@@ -0,0 +1,84 @@
+import { PressableProps, StyleProp, View, ViewStyle } from "react-native";
+import { ReactNode, Ref } from "react";
+//#region src/components/chip/index.d.ts
+/** An assist or suggestion chip: an action, drawn as a plain button. */
+type ChipActionProps = ChipBaseProps & {
+  readonly defaultSelected?: never;
+  readonly isSelected?: never;
+  readonly onChange?: never;
+  /**
+   * `assist` for an action the chip's context suggests, and `suggestion`
+   * for one the product generates. Either is an action rather than a
+   * selection, so neither is ever selected.
+   */
+  readonly variant: 'assist' | 'suggestion';
+};
+type ChipBaseProps = Omit<PressableProps, 'children' | 'disabled' | 'style'> & {
+  /**
+   * The chip's label. Required: the page draws no chip without one, and a
+   * chip with none is an empty button to a screen reader.
+   */
+  readonly children: ReactNode;
+  /**
+   * Raises the chip off the page on a container of its own, at the page's
+   * elevation 1, in place of the outline. A selected filter chip keeps the
+   * secondary container.
+   * @default false
+   */
+  readonly elevated?: boolean;
+  /**
+   * An icon before the label, in the page's 18dp slot and the primary role,
+   * which the slot hands it through `useIconStyle()`. A filter chip's check
+   * takes its place while the chip is selected, so the chip keeps its width.
+   */
+  readonly icon?: ReactNode;
+  /**
+   * Draws the chip disabled, and takes no presses.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  readonly ref?: Ref<View>;
+  readonly style?: StyleProp<ViewStyle>;
+};
+/** A filter chip: a two-state button, the default. */
+type ChipFilterProps = ChipBaseProps & {
+  /**
+   * Whether the chip starts selected, when it keeps its own state.
+   * @default false
+   */
+  readonly defaultSelected?: boolean;
+  /**
+   * Whether the chip is selected, when the call site holds the state. Pass
+   * it with `onChange`.
+   */
+  readonly isSelected?: boolean;
+  /** Called with the new state when the chip is pressed, after `onPress`. */
+  readonly onChange?: (isSelected: boolean) => void;
+  /**
+   * A filter chip, a two-state button.
+   * @default 'filter'
+   */
+  readonly variant?: 'filter';
+};
+type ChipProps = ChipActionProps | ChipFilterProps;
+/** Which of the chips page's chips a Chip is. */
+type ChipVariant = 'assist' | 'filter' | 'suggestion';
+/**
+ * A chip. By default a filter chip, which is a two-state button reporting
+ * its state as a toggle Button does: pass `isSelected` with `onChange` to
+ * control it, or `defaultSelected` to let it keep its own state.
+ *
+ * ```tsx
+ * <Chip defaultSelected>Label</Chip>
+ * ```
+ *
+ * `variant="assist"` and `variant="suggestion"` draw the page's two action
+ * chips instead: plain buttons, pressed with `onPress`, never selected.
+ *
+ * A column stretches a chip across it, as it does any view; a row of chips is
+ * a row that wraps. `style`, `ref` and `testID` land on the `Pressable`.
+ */
+declare function Chip({ children, defaultSelected, elevated, hitSlop, icon, isDisabled, isSelected, onBlur, onChange, onFocus, onHoverIn, onHoverOut, onLayout, onPress, onPressIn, onPressOut, style, variant, ...props }: ChipProps): import("react").JSX.Element;
+//#endregion
+export { Chip, type ChipActionProps, type ChipFilterProps, type ChipProps, type ChipVariant };
+//# sourceMappingURL=index.d.ts.map