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

package/dist/press/index.js

@@ -0,0 +1,350 @@
+import { useTheme } from "../theme/scope.js";
+import { styles, stylesOf } from "./styles.js";
+import { c } from "react/compiler-runtime";
+import { StyleSheet, View } from "react-native";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withDelay, withTiming } from "react-native-reanimated";
+const INITIAL_ORIGIN_SCALE = .2;
+const FADE_IN = 105;
+const FADE_OUT = 375;
+const NO_RIPPLE = {
+	end: {
+		x: 0,
+		y: 0
+	},
+	scale: 1,
+	size: 0,
+	start: {
+		x: 0,
+		y: 0
+	}
+};
+/**
+* The `hitSlop` that brings a control smaller than 48dp up to a 48dp target,
+* centred on it, as web's controls draw their target with a `::before`.
+* Nothing for a control already that big. A width left out is taken to be
+* wide enough, as a labelled button's is.
+*/
+function hitSlop(height, width = 48) {
+	const vertical = Math.max(0, (48 - height) / 2);
+	const horizontal = Math.max(0, (48 - width) / 2);
+	if (vertical === 0 && horizontal === 0) return;
+	return {
+		bottom: vertical,
+		left: horizontal,
+		right: horizontal,
+		top: vertical
+	};
+}
+/**
+* The press feedback every interactive control draws: the state layer, the
+* ripple and the focus ring, as Material Design's state layers page sets them
+* out.
+*
+* The state layer is the control's content colour at the state's opacity
+* token, over the whole control: hover for an iPad pointer or an Android
+* mouse, focus while the ring shows, pressed while pressed. React Native has
+* no `color-mix()`, so it is a view of its own rather than a blended
+* background.
+*
+* The ripple grows from the press point to cover the control and fades out
+* once the press ends, held at least `durationMedium1` so a tap reads, and is
+* drawn the same on iOS and Android rather than through Android's own
+* `android_ripple`. It is a solid disc where web's has a soft edge, since
+* React Native draws a gradient only through an experimental style that React
+* Native Web ignores. It is not drawn while the device asks for reduced
+* motion, where the pressed layer alone marks the press.
+*
+* A control whose layer is a disc of its own beside its label, as a
+* checkbox's is, passes the disc's side as `disc`, and its ripple grows from
+* the disc's centre instead. One whose pressed layer takes another colour
+* passes it as `pressedColor`.
+*
+* The ring shows when focus arrives from a keyboard, and not when it arrives
+* with a press, which on web is a click focusing what it presses.
+*
+* ```tsx
+* const feedback = usePressFeedback({ color: colors.onPrimary, corners, onPressIn })
+*
+* <Pressable {...feedback.handlers} style={[styles.button, feedback.ring]}>
+*   {feedback.layer}
+*   <Text>Label</Text>
+* </Pressable>
+* ```
+*/
+function usePressFeedback(t0) {
+	const $ = c(61);
+	const { color, corners, disabled, disableRipple: t1, disc, onBlur, onFocus, onHoverIn, onHoverOut, onPressIn, onPressOut, pressedColor: t2 } = t0;
+	const disableRipple = t1 === void 0 ? false : t1;
+	const pressedColor = t2 === void 0 ? color : t2;
+	const theme = useTheme();
+	const reduceMotion = useReducedMotion();
+	const [hovered, setHovered] = useState(false);
+	const [pressed, setPressed] = useState(false);
+	const [ringShown, setRingShown] = useState(false);
+	const focused = useRef(false);
+	const pressedUnfocused = useRef(false);
+	const pressStarted = useRef(0);
+	const phase = useRef("idle");
+	const geometry = useSharedValue(NO_RIPPLE);
+	const grow = useSharedValue(0);
+	const fade = useSharedValue(0);
+	const { motion, spacing, stateLayerOpacity } = theme;
+	const active = disabled !== true;
+	const rippled = active && !disableRipple && !reduceMotion;
+	const rippleMotion = useAnimatedStyle(() => {
+		"worklet";
+		const { end, scale, size, start } = geometry.get();
+		const progress = grow.get();
+		return {
+			backgroundColor: pressedColor,
+			borderRadius: size / 2,
+			height: size,
+			left: 0,
+			opacity: fade.get(),
+			position: "absolute",
+			top: 0,
+			transform: [
+				{ translateX: start.x + (end.x - start.x) * progress },
+				{ translateY: start.y + (end.y - start.y) * progress },
+				{ scale: 1 + (scale - 1) * progress }
+			],
+			width: size
+		};
+	});
+	let t3;
+	if ($[0] !== fade || $[1] !== geometry || $[2] !== grow || $[3] !== motion || $[4] !== spacing || $[5] !== stateLayerOpacity) {
+		t3 = function ripple(width, height, origin) {
+			const size_0 = Math.max(1, Math.floor(Math.max(width, height) * INITIAL_ORIGIN_SCALE));
+			geometry.set({
+				end: {
+					x: (width - size_0) / 2,
+					y: (height - size_0) / 2
+				},
+				scale: (Math.hypot(width, height) + spacing.sm) / size_0,
+				size: size_0,
+				start: {
+					x: origin.x - size_0 / 2,
+					y: origin.y - size_0 / 2
+				}
+			});
+			grow.set(0);
+			grow.set(withTiming(1, {
+				duration: motion.durationLong1,
+				easing: Easing.bezier(...motion.easingStandard)
+			}));
+			fade.set(withTiming(stateLayerOpacity.pressed, {
+				duration: FADE_IN,
+				easing: Easing.linear
+			}));
+			pressStarted.current = Date.now();
+		};
+		$[0] = fade;
+		$[1] = geometry;
+		$[2] = grow;
+		$[3] = motion;
+		$[4] = spacing;
+		$[5] = stateLayerOpacity;
+		$[6] = t3;
+	} else t3 = $[6];
+	const ripple = t3;
+	let t4;
+	if ($[7] !== fade || $[8] !== motion) {
+		t4 = function release() {
+			const shown = Date.now() - pressStarted.current;
+			fade.set(withDelay(Math.max(0, motion.durationMedium1 - shown), withTiming(0, {
+				duration: FADE_OUT,
+				easing: Easing.linear
+			})));
+		};
+		$[7] = fade;
+		$[8] = motion;
+		$[9] = t4;
+	} else t4 = $[9];
+	const release = t4;
+	let t5;
+	if ($[10] !== onBlur) {
+		t5 = (event) => {
+			focused.current = false;
+			setRingShown(false);
+			onBlur?.(event);
+		};
+		$[10] = onBlur;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== onFocus) {
+		t6 = (event_0) => {
+			focused.current = true;
+			setRingShown(!pressedUnfocused.current);
+			pressedUnfocused.current = false;
+			onFocus?.(event_0);
+		};
+		$[12] = onFocus;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== onHoverIn) {
+		t7 = (event_1) => {
+			setHovered(true);
+			onHoverIn?.(event_1);
+		};
+		$[14] = onHoverIn;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== onHoverOut) {
+		t8 = (event_2) => {
+			setHovered(false);
+			onHoverOut?.(event_2);
+		};
+		$[16] = onHoverOut;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== disc || $[19] !== onPressIn || $[20] !== release || $[21] !== ripple || $[22] !== rippled) {
+		t9 = (event_3) => {
+			pressedUnfocused.current = !focused.current;
+			setPressed(true);
+			if (rippled && disc !== void 0) {
+				ripple(disc, disc, {
+					x: disc / 2,
+					y: disc / 2
+				});
+				phase.current = "shown";
+			} else if (rippled) {
+				const { pageX, pageY } = event_3.nativeEvent;
+				phase.current = "measuring";
+				event_3.currentTarget.measure((_x, _y, width_0, height_0, left, top) => {
+					ripple(width_0, height_0, {
+						x: Number.isFinite(pageX - left) ? pageX - left : width_0 / 2,
+						y: Number.isFinite(pageY - top) ? pageY - top : height_0 / 2
+					});
+					if (phase.current === "released") {
+						release();
+						phase.current = "idle";
+					} else phase.current = "shown";
+				});
+			}
+			onPressIn?.(event_3);
+		};
+		$[18] = disc;
+		$[19] = onPressIn;
+		$[20] = release;
+		$[21] = ripple;
+		$[22] = rippled;
+		$[23] = t9;
+	} else t9 = $[23];
+	let t10;
+	if ($[24] !== onPressOut || $[25] !== release) {
+		t10 = (event_4) => {
+			pressedUnfocused.current = false;
+			setPressed(false);
+			if (phase.current === "shown") release();
+			phase.current = phase.current === "measuring" ? "released" : "idle";
+			onPressOut?.(event_4);
+		};
+		$[24] = onPressOut;
+		$[25] = release;
+		$[26] = t10;
+	} else t10 = $[26];
+	let t11;
+	if ($[27] !== t10 || $[28] !== t5 || $[29] !== t6 || $[30] !== t7 || $[31] !== t8 || $[32] !== t9) {
+		t11 = {
+			onBlur: t5,
+			onFocus: t6,
+			onHoverIn: t7,
+			onHoverOut: t8,
+			onPressIn: t9,
+			onPressOut: t10
+		};
+		$[27] = t10;
+		$[28] = t5;
+		$[29] = t6;
+		$[30] = t7;
+		$[31] = t8;
+		$[32] = t9;
+		$[33] = t11;
+	} else t11 = $[33];
+	const handlers = t11;
+	const layerOpacity = !active ? 0 : pressed ? stateLayerOpacity.pressed : ringShown ? stateLayerOpacity.focus : hovered ? stateLayerOpacity.hover : 0;
+	let t12;
+	if ($[34] !== corners) {
+		t12 = StyleSheet.compose(styles.surface, corners);
+		$[34] = corners;
+		$[35] = t12;
+	} else t12 = $[35];
+	const surface = t12;
+	let t13;
+	if ($[36] !== active || $[37] !== color || $[38] !== layerOpacity || $[39] !== pressed || $[40] !== pressedColor) {
+		t13 = StyleSheet.compose(styles.layer, {
+			backgroundColor: active && pressed ? pressedColor : color,
+			opacity: layerOpacity
+		});
+		$[36] = active;
+		$[37] = color;
+		$[38] = layerOpacity;
+		$[39] = pressed;
+		$[40] = pressedColor;
+		$[41] = t13;
+	} else t13 = $[41];
+	const state = t13;
+	const t14 = active && hovered;
+	let t15;
+	if ($[42] !== state) {
+		t15 = /* @__PURE__ */ jsx(View, { style: state });
+		$[42] = state;
+		$[43] = t15;
+	} else t15 = $[43];
+	let t16;
+	if ($[44] !== rippleMotion || $[45] !== rippled) {
+		t16 = rippled ? /* @__PURE__ */ jsx(Animated.View, { style: rippleMotion }) : null;
+		$[44] = rippleMotion;
+		$[45] = rippled;
+		$[46] = t16;
+	} else t16 = $[46];
+	let t17;
+	if ($[47] !== surface || $[48] !== t15 || $[49] !== t16) {
+		t17 = /* @__PURE__ */ jsxs(View, {
+			accessibilityElementsHidden: true,
+			importantForAccessibility: "no-hide-descendants",
+			style: surface,
+			children: [t15, t16]
+		});
+		$[47] = surface;
+		$[48] = t15;
+		$[49] = t16;
+		$[50] = t17;
+	} else t17 = $[50];
+	const t18 = active && pressed;
+	let t19;
+	if ($[51] !== active || $[52] !== ringShown || $[53] !== theme) {
+		t19 = active && ringShown ? stylesOf(theme).ring : void 0;
+		$[51] = active;
+		$[52] = ringShown;
+		$[53] = theme;
+		$[54] = t19;
+	} else t19 = $[54];
+	let t20;
+	if ($[55] !== handlers || $[56] !== t14 || $[57] !== t17 || $[58] !== t18 || $[59] !== t19) {
+		t20 = {
+			handlers,
+			hovered: t14,
+			layer: t17,
+			pressed: t18,
+			ring: t19
+		};
+		$[55] = handlers;
+		$[56] = t14;
+		$[57] = t17;
+		$[58] = t18;
+		$[59] = t19;
+		$[60] = t20;
+	} else t20 = $[60];
+	return t20;
+}
+//#endregion
+export { hitSlop, usePressFeedback };
+
+//# sourceMappingURL=index.js.map

package/dist/press/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ReactNode","Insets","PressableProps","ViewStyle","useRef","useState","StyleSheet","View","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withDelay","withTiming","useTheme","styles","stylesOf","Corners","Pick","Handlers","Point","x","y","PressFeedback","handlers","NonNullable","Name","hovered","layer","pressed","ring","PressFeedbackOptions","color","corners","disabled","disableRipple","disc","pressedColor","RippleGeometry","end","scale","size","start","RipplePhase","TARGET_SIZE","INITIAL_ORIGIN_SCALE","FADE_IN","FADE_OUT","NO_RIPPLE","hitSlop","height","width","vertical","Math","max","horizontal","undefined","bottom","left","right","top","usePressFeedback","t0","$","_c","t1","onBlur","onFocus","onHoverIn","onHoverOut","onPressIn","onPressOut","t2","theme","reduceMotion","setHovered","setPressed","ringShown","setRingShown","focused","pressedUnfocused","pressStarted","phase","geometry","grow","fade","motion","spacing","stateLayerOpacity","active","rippled","rippleMotion","get","progress","backgroundColor","borderRadius","opacity","position","transform","translateX","translateY","t3","ripple","origin","size_0","floor","set","hypot","sm","duration","durationLong1","easing","bezier","easingStandard","linear","current","Date","now","t4","release","shown","durationMedium1","t5","event","t6","event_0","t7","event_1","t8","event_2","t9","event_3","pageX","pageY","nativeEvent","currentTarget","measure","_x","_y","width_0","height_0","Number","isFinite","t10","event_4","t11","layerOpacity","focus","hover","t12","compose","surface","t13","state","t14","t15","t16","t17","t18","t19","t20","_c"],"sources":["../../src/press/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { Insets, PressableProps, ViewStyle } from 'react-native'\n\nimport { useRef, useState } from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withDelay,\n  withTiming,\n} from 'react-native-reanimated'\n\nimport { useTheme } from '../theme/scope'\nimport { styles, stylesOf } from './styles'\n\n/** The corners a control is drawn with, which its feedback clips to. */\ntype Corners = Pick<\n  ViewStyle,\n  | 'borderBottomEndRadius'\n  | 'borderBottomStartRadius'\n  | 'borderRadius'\n  | 'borderTopEndRadius'\n  | 'borderTopStartRadius'\n>\n\n/** The handlers the feedback reads its states from. */\ntype Handlers = Pick<\n  PressableProps,\n  'onBlur' | 'onFocus' | 'onHoverIn' | 'onHoverOut' | 'onPressIn' | 'onPressOut'\n>\n\ntype Point = { readonly x: number; readonly y: number }\n\ntype PressFeedback = {\n  /**\n   * The handlers to hand the control's `Pressable`. Each calls the one of\n   * the same name it was given after its own.\n   */\n  readonly handlers: {\n    readonly [Name in keyof Handlers]-?: NonNullable<Handlers[Name]>\n  }\n  /**\n   * Whether a pointer is over the control, for a control that draws more\n   * than the layer while hovered. Never while disabled.\n   */\n  readonly hovered: boolean\n  /** The state layer and the ripple, to render as the `Pressable`'s first child. */\n  readonly layer: ReactNode\n  /**\n   * Whether the control is pressed, for a control that draws more than the\n   * layer while pressed. Never while disabled.\n   */\n  readonly pressed: boolean\n  /** The focus ring while it shows, to compose into the control's style. */\n  readonly ring: undefined | ViewStyle\n}\n\ntype PressFeedbackOptions = Handlers & {\n  /**\n   * The colour the layer and the ripple are drawn in: the theme's value for\n   * the control's content colour role.\n   */\n  readonly color: string\n  /** The control's corners, which the layer and the ripple clip to. */\n  readonly corners?: Corners | undefined\n  readonly disabled?: boolean | null | undefined\n  /**\n   * Draws no ripple and leaves the state layer, as `disableRipple` does on\n   * web's Button.\n   */\n  readonly disableRipple?: boolean | undefined\n  /**\n   * The side of a round layer of a fixed size, for a control whose state\n   * layer is a disc beside its label rather than the whole control: a\n   * checkbox's. The ripple then grows from the disc's centre wherever the\n   * press lands, and nothing is measured. Left out, the ripple grows from\n   * the press point across the control.\n   */\n  readonly disc?: number | undefined\n  /**\n   * The colour the pressed layer and the ripple are drawn in, where it\n   * differs from the hover and focus layers': a checkbox's swaps between\n   * primary and on surface once pressed. Defaults to `color`.\n   */\n  readonly pressedColor?: string | undefined\n}\n\n/** Where the ripple starts and ends, and how far it grows, for one press. */\ntype RippleGeometry = {\n  readonly end: Point\n  readonly scale: number\n  readonly size: number\n  readonly start: Point\n}\n\n// Where the ripple of the latest press is: waiting on the control's\n// measurement, shown, or released before the measurement arrived.\ntype RipplePhase = 'idle' | 'measuring' | 'released' | 'shown'\n\n/**\n * The least a touch target measures each way, from Material Design's\n * accessibility guidance. A floor rather than a token, as web's `TARGET_SIZE`\n * is: a theme changes how big a control is drawn, never how small a target\n * may be.\n */\nconst TARGET_SIZE = 48\n\n// The ripple starts as a disc a fifth of the control's longer side, as on web.\nconst INITIAL_ORIGIN_SCALE = 0.2\n\n// The fade, in milliseconds: quick in and slow out, so a tap reads as a ripple\n// rather than a flicker. These are web's, and deliberately not motion tokens:\n// the two are tuned as a ratio to each other, which snapping either to the\n// scale would undo. Linear for the same reason, since a fade to and from a\n// state layer wants no acceleration.\nconst FADE_IN = 105\nconst FADE_OUT = 375\n\nconst NO_RIPPLE: RippleGeometry = {\n  end: { x: 0, y: 0 },\n  scale: 1,\n  size: 0,\n  start: { x: 0, y: 0 },\n}\n\n/**\n * The `hitSlop` that brings a control smaller than 48dp up to a 48dp target,\n * centred on it, as web's controls draw their target with a `::before`.\n * Nothing for a control already that big. A width left out is taken to be\n * wide enough, as a labelled button's is.\n */\nfunction hitSlop(height: number, width = TARGET_SIZE): Insets | undefined {\n  const vertical = Math.max(0, (TARGET_SIZE - height) / 2)\n  const horizontal = Math.max(0, (TARGET_SIZE - width) / 2)\n\n  if (vertical === 0 && horizontal === 0) {\n    return undefined\n  }\n\n  return {\n    bottom: vertical,\n    left: horizontal,\n    right: horizontal,\n    top: vertical,\n  }\n}\n\n/**\n * The press feedback every interactive control draws: the state layer, the\n * ripple and the focus ring, as Material Design's state layers page sets them\n * out.\n *\n * The state layer is the control's content colour at the state's opacity\n * token, over the whole control: hover for an iPad pointer or an Android\n * mouse, focus while the ring shows, pressed while pressed. React Native has\n * no `color-mix()`, so it is a view of its own rather than a blended\n * background.\n *\n * The ripple grows from the press point to cover the control and fades out\n * once the press ends, held at least `durationMedium1` so a tap reads, and is\n * drawn the same on iOS and Android rather than through Android's own\n * `android_ripple`. It is a solid disc where web's has a soft edge, since\n * React Native draws a gradient only through an experimental style that React\n * Native Web ignores. It is not drawn while the device asks for reduced\n * motion, where the pressed layer alone marks the press.\n *\n * A control whose layer is a disc of its own beside its label, as a\n * checkbox's is, passes the disc's side as `disc`, and its ripple grows from\n * the disc's centre instead. One whose pressed layer takes another colour\n * passes it as `pressedColor`.\n *\n * The ring shows when focus arrives from a keyboard, and not when it arrives\n * with a press, which on web is a click focusing what it presses.\n *\n * ```tsx\n * const feedback = usePressFeedback({ color: colors.onPrimary, corners, onPressIn })\n *\n * <Pressable {...feedback.handlers} style={[styles.button, feedback.ring]}>\n *   {feedback.layer}\n *   <Text>Label</Text>\n * </Pressable>\n * ```\n */\nfunction usePressFeedback({\n  color,\n  corners,\n  disabled,\n  disableRipple = false,\n  disc,\n  onBlur,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onPressIn,\n  onPressOut,\n  pressedColor = color,\n}: PressFeedbackOptions): PressFeedback {\n  const theme = useTheme()\n  const reduceMotion = useReducedMotion()\n  const [hovered, setHovered] = useState(false)\n  const [pressed, setPressed] = useState(false)\n  const [ringShown, setRingShown] = useState(false)\n  const focused = useRef(false)\n  // Whether the press in flight began while the control had no focus, which\n  // makes the focus that follows it a pointer's.\n  const pressedUnfocused = useRef(false)\n  const pressStarted = useRef(0)\n  const phase = useRef<RipplePhase>('idle')\n  const geometry = useSharedValue(NO_RIPPLE)\n  const grow = useSharedValue(0)\n  const fade = useSharedValue(0)\n\n  const { motion, spacing, stateLayerOpacity } = theme\n  const active = disabled !== true\n  const rippled = active && !disableRipple && !reduceMotion\n\n  const rippleMotion = useAnimatedStyle(() => {\n    'worklet'\n    const { end, scale, size, start } = geometry.get()\n    const progress = grow.get()\n\n    // The whole style is the animation's, so the view takes the one object it\n    // hands back.\n    return {\n      backgroundColor: pressedColor,\n      borderRadius: size / 2,\n      height: size,\n      left: 0,\n      opacity: fade.get(),\n      position: 'absolute',\n      top: 0,\n      transform: [\n        { translateX: start.x + (end.x - start.x) * progress },\n        { translateY: start.y + (end.y - start.y) * progress },\n        { scale: 1 + (scale - 1) * progress },\n      ],\n      width: size,\n    }\n  })\n\n  // Grows a disc a fifth of the control's longer side from the press point\n  // to the centre, until it covers the control and `spacing.sm` beyond its\n  // corners, as web's does.\n  function ripple(width: number, height: number, origin: Point) {\n    const size = Math.max(\n      1,\n      Math.floor(Math.max(width, height) * INITIAL_ORIGIN_SCALE),\n    )\n\n    geometry.set({\n      end: { x: (width - size) / 2, y: (height - size) / 2 },\n      scale: (Math.hypot(width, height) + spacing.sm) / size,\n      size,\n      start: { x: origin.x - size / 2, y: origin.y - size / 2 },\n    })\n    grow.set(0)\n    grow.set(\n      withTiming(1, {\n        duration: motion.durationLong1,\n        easing: Easing.bezier(...motion.easingStandard),\n      }),\n    )\n    fade.set(\n      withTiming(stateLayerOpacity.pressed, {\n        duration: FADE_IN,\n        easing: Easing.linear,\n      }),\n    )\n    pressStarted.current = Date.now()\n  }\n\n  // Fades the ripple out, once it has been shown for `durationMedium1`.\n  function release() {\n    const shown = Date.now() - pressStarted.current\n\n    fade.set(\n      withDelay(\n        Math.max(0, motion.durationMedium1 - shown),\n        withTiming(0, { duration: FADE_OUT, easing: Easing.linear }),\n      ),\n    )\n  }\n\n  const handlers: PressFeedback['handlers'] = {\n    onBlur: (event) => {\n      focused.current = false\n      setRingShown(false)\n      onBlur?.(event)\n    },\n    onFocus: (event) => {\n      focused.current = true\n      setRingShown(!pressedUnfocused.current)\n      pressedUnfocused.current = false\n      onFocus?.(event)\n    },\n    onHoverIn: (event) => {\n      setHovered(true)\n      onHoverIn?.(event)\n    },\n    onHoverOut: (event) => {\n      setHovered(false)\n      onHoverOut?.(event)\n    },\n    onPressIn: (event) => {\n      pressedUnfocused.current = !focused.current\n      setPressed(true)\n\n      if (rippled && disc !== undefined) {\n        ripple(disc, disc, { x: disc / 2, y: disc / 2 })\n        phase.current = 'shown'\n      } else if (rippled) {\n        const { pageX, pageY } = event.nativeEvent\n\n        // A touch's own location is measured from whichever child it landed\n        // on, so the point is taken from the page and the control measured\n        // there. A press from a key carries no point, and ripples from the\n        // centre. React Native Web measures a frame later, so a press can end\n        // first, and its ripple is then drawn whole.\n        phase.current = 'measuring'\n        event.currentTarget.measure((_x, _y, width, height, left, top) => {\n          ripple(width, height, {\n            x: Number.isFinite(pageX - left) ? pageX - left : width / 2,\n            y: Number.isFinite(pageY - top) ? pageY - top : height / 2,\n          })\n\n          if (phase.current === 'released') {\n            release()\n            phase.current = 'idle'\n          } else {\n            phase.current = 'shown'\n          }\n        })\n      }\n\n      onPressIn?.(event)\n    },\n    onPressOut: (event) => {\n      pressedUnfocused.current = false\n      setPressed(false)\n\n      if (phase.current === 'shown') {\n        release()\n      }\n      phase.current = phase.current === 'measuring' ? 'released' : 'idle'\n\n      onPressOut?.(event)\n    },\n  }\n\n  const layerOpacity = !active\n    ? 0\n    : pressed\n      ? stateLayerOpacity.pressed\n      : ringShown\n        ? stateLayerOpacity.focus\n        : hovered\n          ? stateLayerOpacity.hover\n          : 0\n  const surface = StyleSheet.compose(styles.surface, corners)\n  const state = StyleSheet.compose(styles.layer, {\n    backgroundColor: active && pressed ? pressedColor : color,\n    opacity: layerOpacity,\n  })\n\n  return {\n    handlers,\n    hovered: active && hovered,\n    layer: (\n      <View\n        accessibilityElementsHidden\n        importantForAccessibility=\"no-hide-descendants\"\n        style={surface}\n      >\n        <View style={state} />\n        {rippled ? <Animated.View style={rippleMotion} /> : null}\n      </View>\n    ),\n    pressed: active && pressed,\n    ring: active && ringShown ? stylesOf(theme).ring : undefined,\n  }\n}\n\nexport { hitSlop, TARGET_SIZE, usePressFeedback }\nexport type { Corners, PressFeedback, PressFeedbackOptions }\n"],"mappings":"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"}

package/dist/press/styles.js

@@ -0,0 +1,31 @@
+import { themedStyles } from "../theme/styles.js";
+import { StyleSheet } from "react-native";
+//#region src/press/styles.ts
+const stylesOf = themedStyles(({ colors }) => StyleSheet.create({ ring: {
+	outlineColor: colors.primary,
+	outlineOffset: 2,
+	outlineStyle: "solid",
+	outlineWidth: 2
+} }));
+const styles = StyleSheet.create({
+	layer: {
+		bottom: 0,
+		left: 0,
+		position: "absolute",
+		right: 0,
+		top: 0
+	},
+	surface: {
+		bottom: 0,
+		left: 0,
+		overflow: "hidden",
+		pointerEvents: "none",
+		position: "absolute",
+		right: 0,
+		top: 0
+	}
+});
+//#endregion
+export { styles, stylesOf };
+
+//# sourceMappingURL=styles.js.map

package/dist/press/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["StyleSheet","themedStyles","stylesOf","colors","create","ring","outlineColor","primary","outlineOffset","outlineStyle","outlineWidth","styles","layer","bottom","left","position","right","top","surface","overflow","pointerEvents"],"sources":["../../src/press/styles.ts"],"sourcesContent":["import { StyleSheet } from 'react-native'\n\nimport { themedStyles } from '../theme/styles'\n\n// The ring is web's `focus.ring`: 2dp wide, 2dp outside the control, in\n// primary. An outline rather than a border, so showing it moves nothing, and\n// rather than a shadow, which a high-contrast mode drops.\nconst stylesOf = themedStyles(({ colors }) =>\n  StyleSheet.create({\n    ring: {\n      outlineColor: colors.primary,\n      outlineOffset: 2,\n      outlineStyle: 'solid',\n      outlineWidth: 2,\n    },\n  }),\n)\n\nconst styles = StyleSheet.create({\n  // The state layer fills the surface. Its colour and opacity are the\n  // control's and the state's, so they are set where it renders.\n  layer: {\n    bottom: 0,\n    left: 0,\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n  // Fills the control, clips to the corners it is given, and takes no\n  // touches, so a press lands on the control under it.\n  surface: {\n    bottom: 0,\n    left: 0,\n    overflow: 'hidden',\n    pointerEvents: 'none',\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n})\n\nexport { styles, stylesOf }\n"],"mappings":";;;AAOA,MAAME,WAAWD,cAAc,EAAEE,aAC/BH,WAAWI,OAAO,EAChBC,MAAM;CACJC,cAAcH,OAAOI;CACrBC,eAAe;CACfC,cAAc;CACdC,cAAc;AAChB,EACF,CAAC,CACH;AAEA,MAAMC,SAASX,WAAWI,OAAO;CAG/BQ,OAAO;EACLC,QAAQ;EACRC,MAAM;EACNC,UAAU;EACVC,OAAO;EACPC,KAAK;CACP;CAGAC,SAAS;EACPL,QAAQ;EACRC,MAAM;EACNK,UAAU;EACVC,eAAe;EACfL,UAAU;EACVC,OAAO;EACPC,KAAK;CACP;AACF,CAAC"}

package/dist/router/index.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+//#region src/router/index.d.ts
+type Navigate = (href: string) => void;
+type RouterProviderProps = {
+  readonly children?: ReactNode;
+  /** Takes the app to the screen a pressed link's `href` names. */
+  readonly navigate: Navigate;
+};
+/**
+ * Sends the `href` of every link the components draw through the app's own
+ * router, as React Aria's `RouterProvider` does for kanso-ui on web, so a
+ * component with an `href` moves between screens rather than leaving the app.
+ *
+ * It takes `navigate` alone. React Aria's also takes `useHref`, which turns an
+ * `href` into the one a rendered `<a>` carries, and native renders no anchor.
+ *
+ * ```tsx
+ * const router = useRouter()
+ *
+ * <RouterProvider navigate={(href) => router.push(href)}>
+ *   <Stack />
+ * </RouterProvider>
+ * ```
+ */
+declare function RouterProvider({ children, navigate }: RouterProviderProps): import("react").JSX.Element;
+//#endregion
+export { RouterProvider, type RouterProviderProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/router/index.js

@@ -0,0 +1,82 @@
+import { c } from "react/compiler-runtime";
+import { Linking } from "react-native";
+import { createContext, use } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/router/index.tsx
+const SCHEME = /^[a-z][\d+.a-z-]*:/iu;
+const RouterContext = createContext(null);
+async function openExternally(href) {
+	try {
+		await Linking.openURL(href);
+	} catch (error) {
+		console.warn(`Could not open ${href}`, error);
+	}
+}
+/**
+* Sends the `href` of every link the components draw through the app's own
+* router, as React Aria's `RouterProvider` does for kanso-ui on web, so a
+* component with an `href` moves between screens rather than leaving the app.
+*
+* It takes `navigate` alone. React Aria's also takes `useHref`, which turns an
+* `href` into the one a rendered `<a>` carries, and native renders no anchor.
+*
+* ```tsx
+* const router = useRouter()
+*
+* <RouterProvider navigate={(href) => router.push(href)}>
+*   <Stack />
+* </RouterProvider>
+* ```
+*/
+function RouterProvider(t0) {
+	const $ = c(3);
+	const { children, navigate } = t0;
+	let t1;
+	if ($[0] !== children || $[1] !== navigate) {
+		t1 = /* @__PURE__ */ jsx(RouterContext, {
+			value: navigate,
+			children
+		});
+		$[0] = children;
+		$[1] = navigate;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+/**
+* The press handler of a component that leads somewhere: the call site's own
+* `onPress`, then the `href` through `useOpenLink`, which is the order web
+* reports them in. Without an `href` it calls `onPress` alone.
+*/
+function useLinkPress(href, onPress) {
+	const $ = c(4);
+	const openLink = useOpenLink();
+	let t0;
+	if ($[0] !== href || $[1] !== onPress || $[2] !== openLink) {
+		t0 = (event) => {
+			onPress?.(event);
+			if (href !== void 0) openLink(href);
+		};
+		$[0] = href;
+		$[1] = onPress;
+		$[2] = openLink;
+		$[3] = t0;
+	} else t0 = $[3];
+	return t0;
+}
+/**
+* The handler every component with an `href` presses through. Under a
+* `RouterProvider` it hands the `href` to `navigate`; without one, or for a
+* URL with a scheme of its own, it asks the platform to open it.
+*/
+function useOpenLink() {
+	const navigate = use(RouterContext);
+	return (href) => {
+		if (navigate === null || SCHEME.test(href)) openExternally(href);
+		else navigate(href);
+	};
+}
+//#endregion
+export { RouterProvider, useLinkPress, useOpenLink };
+
+//# sourceMappingURL=index.js.map

package/dist/router/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ReactNode","createContext","use","Linking","SCHEME","Navigate","href","RouterContext","RouterProviderProps","children","navigate","openExternally","openURL","error","console","warn","RouterProvider","t0","$","_c","t1","useLinkPress","onPress","openLink","useOpenLink","event","undefined","test","_c"],"sources":["../../src/router/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport { createContext, use } from 'react'\nimport { Linking } from 'react-native'\n\n// A URL with a scheme of its own, such as `https:`, `mailto:`, `tel:` or an\n// app's deep link, is the platform's to open rather than the app router's.\nconst SCHEME = /^[a-z][\\d+.a-z-]*:/iu\n\ntype Navigate = (href: string) => void\n\nconst RouterContext = createContext<Navigate | null>(null)\n\ntype RouterProviderProps = {\n  readonly children?: ReactNode\n  /** Takes the app to the screen a pressed link's `href` names. */\n  readonly navigate: Navigate\n}\n\n// `openURL` rejects when nothing on the device handles the URL, and a press\n// has nobody to hand that to, so it is reported here rather than left\n// unhandled.\nasync function openExternally(href: string) {\n  try {\n    await Linking.openURL(href)\n  } catch (error: unknown) {\n    console.warn(`Could not open ${href}`, error)\n  }\n}\n\n/**\n * Sends the `href` of every link the components draw through the app's own\n * router, as React Aria's `RouterProvider` does for kanso-ui on web, so a\n * component with an `href` moves between screens rather than leaving the app.\n *\n * It takes `navigate` alone. React Aria's also takes `useHref`, which turns an\n * `href` into the one a rendered `<a>` carries, and native renders no anchor.\n *\n * ```tsx\n * const router = useRouter()\n *\n * <RouterProvider navigate={(href) => router.push(href)}>\n *   <Stack />\n * </RouterProvider>\n * ```\n */\nfunction RouterProvider({ children, navigate }: RouterProviderProps) {\n  return <RouterContext value={navigate}>{children}</RouterContext>\n}\n\n/**\n * The press handler of a component that leads somewhere: the call site's own\n * `onPress`, then the `href` through `useOpenLink`, which is the order web\n * reports them in. Without an `href` it calls `onPress` alone.\n */\nfunction useLinkPress<Event>(\n  href: string | undefined,\n  onPress: ((event: Event) => void) | null | undefined,\n): (event: Event) => void {\n  const openLink = useOpenLink()\n  return (event) => {\n    onPress?.(event)\n\n    if (href !== undefined) {\n      openLink(href)\n    }\n  }\n}\n\n/**\n * The handler every component with an `href` presses through. Under a\n * `RouterProvider` it hands the `href` to `navigate`; without one, or for a\n * URL with a scheme of its own, it asks the platform to open it.\n */\nfunction useOpenLink(): Navigate {\n  const navigate = use(RouterContext)\n  return (href) => {\n    if (navigate === null || SCHEME.test(href)) {\n      void openExternally(href)\n    } else {\n      navigate(href)\n    }\n  }\n}\n\nexport { RouterProvider, useLinkPress, useOpenLink }\nexport type { RouterProviderProps }\n"],"mappings":";;;;;AAOA,MAAMI,SAAS;AAIf,MAAMG,gBAAgBN,cAA+B,IAAI;AAWzD,eAAeU,eAAeL,MAAc;CAC1C,IAAI;EACF,MAAMH,QAAQS,QAAQN,IAAI;CAC5B,SAASO,OAAgB;EACvBC,QAAQC,KAAK,kBAAkBT,QAAQO,KAAK;CAC9C;AACF;;;;;;;;;;;;;;;;;AAkBA,SAAAG,eAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAwB,MAAA,EAAAV,UAAAC,aAAAO;CAA2C,IAAAG;CAAA,IAAAF,EAAA,OAAAT,YAAAS,EAAA,OAAAR,UAAA;EAC1DU,KAAA,oBAAC,eAAD;GAAsBV,OAAAA;GAAWD;EAAnB,CAAA;EAA4CS,EAAA,KAAAT;EAAAS,EAAA,KAAAR;EAAAQ,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,OAA1DE;AAA0D;;;;;;AAQnE,SAAAC,aAAAf,MAAAgB,SAAA;CAAA,MAAAJ,IAAAC,EAAA,CAAA;CAIE,MAAAI,WAAiBC,YAAY;CAAC,IAAAP;CAAA,IAAAC,EAAA,OAAAZ,QAAAY,EAAA,OAAAI,WAAAJ,EAAA,OAAAK,UAAA;EACvBN,MAAAQ,UAAA;GACLH,UAAUG,KAAK;GAEf,IAAInB,SAASoB,KAAAA,GACXH,SAASjB,IAAI;EACd;EACFY,EAAA,KAAAZ;EAAAY,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAD;CAAA,OAAAA,KAAAC,EAAA;CAAA,OANMD;AAMN;;;;;;AAQH,SAASO,cAAwB;CAC/B,MAAMd,WAAWR,IAAIK,aAAa;CAClC,QAAQD,SAAS;EACf,IAAII,aAAa,QAAQN,OAAOuB,KAAKrB,IAAI,GACvC,eAAoBA,IAAI;OAExBI,SAASJ,IAAI;CAEjB;AACF"}

package/dist/theme/color.js

@@ -0,0 +1,25 @@
+import { processColor } from "react-native";
+//#region src/theme/color.ts
+/**
+* A colour at a fraction of its own opacity, for the roles Material Design
+* gives as a colour at an opacity: a disabled container is on-surface at the
+* `disabledContainer` opacity, and its label on-surface at `disabledContent`.
+* Web reaches those through `color-mix()`, which React Native has no
+* counterpart of, so the colour is read into its channels here and written
+* back as `rgba()` with the alpha scaled.
+*
+* Any colour React Native reads is taken, a hex, a function or a name, and
+* one with an alpha of its own keeps it, scaled. A colour React Native cannot
+* read is handed back as it was.
+*/
+function withOpacity(color, opacity) {
+	const processed = processColor(color);
+	if (typeof processed !== "number") return color;
+	const argb = processed >>> 0;
+	const alpha = (argb >>> 24) / 255 * opacity;
+	return `rgba(${String(argb >>> 16 & 255)}, ${String(argb >>> 8 & 255)}, ${String(argb & 255)}, ${String(Math.round(alpha * 1e3) / 1e3)})`;
+}
+//#endregion
+export { withOpacity };
+
+//# sourceMappingURL=color.js.map

package/dist/theme/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","names":["processColor","withOpacity","color","opacity","processed","argb","alpha","String","Math","round"],"sources":["../../src/theme/color.ts"],"sourcesContent":["import { processColor } from 'react-native'\n\n/**\n * A colour at a fraction of its own opacity, for the roles Material Design\n * gives as a colour at an opacity: a disabled container is on-surface at the\n * `disabledContainer` opacity, and its label on-surface at `disabledContent`.\n * Web reaches those through `color-mix()`, which React Native has no\n * counterpart of, so the colour is read into its channels here and written\n * back as `rgba()` with the alpha scaled.\n *\n * Any colour React Native reads is taken, a hex, a function or a name, and\n * one with an alpha of its own keeps it, scaled. A colour React Native cannot\n * read is handed back as it was.\n */\nfunction withOpacity(color: string, opacity: number): string {\n  const processed = processColor(color)\n\n  if (typeof processed !== 'number') {\n    return color\n  }\n\n  // `processColor` hands back the channels as ARGB, unsigned on iOS and on\n  // the web and signed on Android, which the shift makes unsigned.\n  const argb = processed >>> 0\n  const alpha = ((argb >>> 24) / 255) * opacity\n\n  return `rgba(${String((argb >>> 16) & 255)}, ${String((argb >>> 8) & 255)}, ${String(argb & 255)}, ${String(Math.round(alpha * 1000) / 1000)})`\n}\n\nexport { withOpacity }\n"],"mappings":";;;;;;;;;;;;;;AAcA,SAASC,YAAYC,OAAeC,SAAyB;CAC3D,MAAMC,YAAYJ,aAAaE,KAAK;CAEpC,IAAI,OAAOE,cAAc,UACvB,OAAOF;CAKT,MAAMG,OAAOD,cAAc;CAC3B,MAAME,SAAUD,SAAS,MAAM,MAAOF;CAEtC,OAAO,QAAQI,OAAQF,SAAS,KAAM,GAAG,EAAC,IAAKE,OAAQF,SAAS,IAAK,GAAG,EAAC,IAAKE,OAAOF,OAAO,GAAG,EAAC,IAAKE,OAAOC,KAAKC,MAAMH,QAAQ,GAAI,IAAI,GAAI,EAAC;AAC9I"}

package/dist/theme/resolve.d.ts

@@ -0,0 +1,6 @@
+//#region src/theme/resolve.d.ts
+/** A cubic Bézier curve's control points, as `cubic-bezier()` lists them. */
+type Easing = readonly [x1: number, y1: number, x2: number, y2: number];
+//#endregion
+export type { Easing };
+//# sourceMappingURL=resolve.d.ts.map