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

package/dist/press/index.js

@@ -2,10 +2,10 @@ import { useTheme } from "../theme/scope.js";
 import { composeStyles } from "../theme/styles.js";
 import { styles, stylesOf } from "./styles.js";
 import { c } from "react/compiler-runtime";
-import { useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { View } from "react-native";
 import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withDelay, withTiming } from "react-native-reanimated";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 const INITIAL_ORIGIN_SCALE = .2;
 const FADE_IN = 105;
 const FADE_OUT = 375;
@@ -59,7 +59,8 @@ function hitSlop(height, width = 48) {
 *
 * 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
+* the disc's centre instead. One whose layer is drawn on a part of it of a
+* fixed size passes that size as `area`, with the same effect. 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
@@ -75,8 +76,8 @@ function hitSlop(height, width = 48) {
 * ```
 */
 function usePressFeedback(t0) {
-	const $ = c(58);
-	const { color, corners, disabled, disableRipple: t1, disc, onBlur, onFocus, onHoverIn, onHoverOut, onPressIn, onPressOut, pending, pressedColor: t2 } = t0;
+	const $ = c(59);
+	const { area, color, corners, disabled, disableRipple: t1, disc, onBlur, onFocus, onHoverIn, onHoverOut, onPressIn, onPressOut, pending, pressedColor: t2 } = t0;
 	const disableRipple = t1 === void 0 ? false : t1;
 	const pressedColor = t2 === void 0 ? color : t2;
 	const theme = useTheme();
@@ -205,14 +206,18 @@ function usePressFeedback(t0) {
 		$[17] = t8;
 	} else t8 = $[17];
 	let t9;
-	if ($[18] !== disc || $[19] !== onPressIn || $[20] !== release || $[21] !== ripple || $[22] !== rippled) {
+	if ($[18] !== area || $[19] !== disc || $[20] !== onPressIn || $[21] !== release || $[22] !== ripple || $[23] !== rippled) {
 		t9 = (event_3) => {
 			pressedUnfocused.current = !focused.current;
 			setPressed(true);
-			if (rippled && disc !== void 0) {
-				ripple(disc, disc, {
-					x: disc / 2,
-					y: disc / 2
+			const fixed = disc === void 0 ? area : {
+				height: disc,
+				width: disc
+			};
+			if (rippled && fixed !== void 0) {
+				ripple(fixed.width, fixed.height, {
+					x: fixed.width / 2,
+					y: fixed.height / 2
 				});
 				phase.current = "shown";
 			} else if (rippled && typeof event_3.currentTarget !== "number") {
@@ -231,15 +236,16 @@ function usePressFeedback(t0) {
 			}
 			onPressIn?.(event_3);
 		};
-		$[18] = disc;
-		$[19] = onPressIn;
-		$[20] = release;
-		$[21] = ripple;
-		$[22] = rippled;
-		$[23] = t9;
-	} else t9 = $[23];
+		$[18] = area;
+		$[19] = disc;
+		$[20] = onPressIn;
+		$[21] = release;
+		$[22] = ripple;
+		$[23] = rippled;
+		$[24] = t9;
+	} else t9 = $[24];
 	let t10;
-	if ($[24] !== onPressOut || $[25] !== release) {
+	if ($[25] !== onPressOut || $[26] !== release) {
 		t10 = (event_4) => {
 			pressedUnfocused.current = false;
 			setPressed(false);
@@ -247,12 +253,12 @@ function usePressFeedback(t0) {
 			phase.current = phase.current === "measuring" ? "released" : "idle";
 			onPressOut?.(event_4);
 		};
-		$[24] = onPressOut;
-		$[25] = release;
-		$[26] = t10;
-	} else t10 = $[26];
+		$[25] = onPressOut;
+		$[26] = release;
+		$[27] = t10;
+	} else t10 = $[27];
 	let t11;
-	if ($[27] !== t10 || $[28] !== t5 || $[29] !== t6 || $[30] !== t7 || $[31] !== t8 || $[32] !== t9) {
+	if ($[28] !== t10 || $[29] !== t5 || $[30] !== t6 || $[31] !== t7 || $[32] !== t8 || $[33] !== t9) {
 		t11 = {
 			onBlur: t5,
 			onFocus: t6,
@@ -261,73 +267,73 @@ function usePressFeedback(t0) {
 			onPressIn: t9,
 			onPressOut: t10
 		};
-		$[27] = t10;
-		$[28] = t5;
-		$[29] = t6;
-		$[30] = t7;
-		$[31] = t8;
-		$[32] = t9;
-		$[33] = t11;
-	} else t11 = $[33];
+		$[28] = t10;
+		$[29] = t5;
+		$[30] = t6;
+		$[31] = t7;
+		$[32] = t8;
+		$[33] = t9;
+		$[34] = t11;
+	} else t11 = $[34];
 	const handlers = t11;
 	const layerOpacity = !active ? 0 : interactive && pressed ? stateLayerOpacity.pressed : ringShown ? stateLayerOpacity.focus : interactive && hovered ? stateLayerOpacity.hover : 0;
 	let t12;
-	if ($[34] !== corners) {
+	if ($[35] !== corners) {
 		t12 = composeStyles(styles.surface, corners);
-		$[34] = corners;
-		$[35] = t12;
-	} else t12 = $[35];
+		$[35] = corners;
+		$[36] = t12;
+	} else t12 = $[36];
 	const surface = t12;
 	const t13 = interactive && pressed ? pressedColor : color;
 	let t14;
-	if ($[36] !== layerOpacity || $[37] !== t13) {
+	if ($[37] !== layerOpacity || $[38] !== t13) {
 		t14 = composeStyles(styles.layer, {
 			backgroundColor: t13,
 			opacity: layerOpacity
 		});
-		$[36] = layerOpacity;
-		$[37] = t13;
-		$[38] = t14;
-	} else t14 = $[38];
+		$[37] = layerOpacity;
+		$[38] = t13;
+		$[39] = t14;
+	} else t14 = $[39];
 	const state = t14;
 	const t15 = interactive && hovered;
 	let t16;
-	if ($[39] !== state) {
+	if ($[40] !== state) {
 		t16 = /* @__PURE__ */ jsx(View, { style: state });
-		$[39] = state;
-		$[40] = t16;
-	} else t16 = $[40];
+		$[40] = state;
+		$[41] = t16;
+	} else t16 = $[41];
 	let t17;
-	if ($[41] !== rippleMotion || $[42] !== rippled) {
+	if ($[42] !== rippleMotion || $[43] !== rippled) {
 		t17 = rippled ? /* @__PURE__ */ jsx(Animated.View, { style: rippleMotion }) : null;
-		$[41] = rippleMotion;
-		$[42] = rippled;
-		$[43] = t17;
-	} else t17 = $[43];
+		$[42] = rippleMotion;
+		$[43] = rippled;
+		$[44] = t17;
+	} else t17 = $[44];
 	let t18;
-	if ($[44] !== surface || $[45] !== t16 || $[46] !== t17) {
+	if ($[45] !== surface || $[46] !== t16 || $[47] !== t17) {
 		t18 = /* @__PURE__ */ jsxs(View, {
 			accessibilityElementsHidden: true,
 			importantForAccessibility: "no-hide-descendants",
 			style: surface,
 			children: [t16, t17]
 		});
-		$[44] = surface;
-		$[45] = t16;
-		$[46] = t17;
-		$[47] = t18;
-	} else t18 = $[47];
+		$[45] = surface;
+		$[46] = t16;
+		$[47] = t17;
+		$[48] = t18;
+	} else t18 = $[48];
 	const t19 = interactive && pressed;
 	let t20;
-	if ($[48] !== active || $[49] !== ringShown || $[50] !== theme) {
+	if ($[49] !== active || $[50] !== ringShown || $[51] !== theme) {
 		t20 = active && ringShown ? stylesOf(theme).ring : void 0;
-		$[48] = active;
-		$[49] = ringShown;
-		$[50] = theme;
-		$[51] = t20;
-	} else t20 = $[51];
+		$[49] = active;
+		$[50] = ringShown;
+		$[51] = theme;
+		$[52] = t20;
+	} else t20 = $[52];
 	let t21;
-	if ($[52] !== handlers || $[53] !== t15 || $[54] !== t18 || $[55] !== t19 || $[56] !== t20) {
+	if ($[53] !== handlers || $[54] !== t15 || $[55] !== t18 || $[56] !== t19 || $[57] !== t20) {
 		t21 = {
 			handlers,
 			hovered: t15,
@@ -335,13 +341,13 @@ function usePressFeedback(t0) {
 			pressed: t19,
 			ring: t20
 		};
-		$[52] = handlers;
-		$[53] = t15;
-		$[54] = t18;
-		$[55] = t19;
-		$[56] = t20;
-		$[57] = t21;
-	} else t21 = $[57];
+		$[53] = handlers;
+		$[54] = t15;
+		$[55] = t18;
+		$[56] = t19;
+		$[57] = t20;
+		$[58] = t21;
+	} else t21 = $[58];
 	return t21;
 }
 //#endregion

package/dist/press/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","Insets","PressableProps","ViewStyle","useRef","useState","View","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withDelay","withTiming","useTheme","composeStyles","styles","stylesOf","Corners","Pick","Handlers","Point","x","y","PressFeedback","handlers","NonNullable","Name","hovered","layer","pressed","ring","PressFeedbackOptions","color","corners","disabled","disableRipple","disc","pending","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","interactive","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","currentTarget","pageX","pageY","nativeEvent","measure","_x","_y","width_0","height_0","Number","isFinite","t10","event_4","t11","layerOpacity","focus","hover","t12","surface","t13","t14","state","t15","t16","t17","t18","t19","t20","t21","_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 { 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 { composeStyles } from '../theme/styles'\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 or pending.\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 or pending.\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   * Takes no press or hover while true, with no layer and no ripple for\n   * either, and keeps the focus and its ring, as a pending button does.\n   */\n  readonly pending?: boolean | 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  pending,\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 interactive = active && pending !== true\n  const rippled = interactive && !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 && typeof event.currentTarget !== 'number') {\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. React Native types the\n        // target as a bare view tag too, which has nothing to measure.\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    : interactive && pressed\n      ? stateLayerOpacity.pressed\n      : ringShown\n        ? stateLayerOpacity.focus\n        : interactive && hovered\n          ? stateLayerOpacity.hover\n          : 0\n  const surface = composeStyles<ViewStyle>(styles.surface, corners)\n  const state = composeStyles<ViewStyle>(styles.layer, {\n    backgroundColor: interactive && pressed ? pressedColor : color,\n    opacity: layerOpacity,\n  })\n\n  return {\n    handlers,\n    hovered: interactive && 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: interactive && 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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"}
+{"version":3,"file":"index.js","names":["ReactNode","Insets","PressableProps","ViewStyle","useRef","useState","View","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withDelay","withTiming","useTheme","composeStyles","styles","stylesOf","Corners","Pick","Handlers","Point","x","y","PressFeedback","handlers","NonNullable","Name","hovered","layer","pressed","ring","PressFeedbackOptions","area","Size","color","corners","disabled","disableRipple","disc","pending","pressedColor","RippleGeometry","end","scale","size","start","RipplePhase","height","width","TARGET_SIZE","INITIAL_ORIGIN_SCALE","FADE_IN","FADE_OUT","NO_RIPPLE","hitSlop","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","interactive","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","fixed","currentTarget","pageX","pageY","nativeEvent","measure","_x","_y","width_0","height_0","Number","isFinite","t10","event_4","t11","layerOpacity","focus","hover","t12","surface","t13","t14","state","t15","t16","t17","t18","t19","t20","t21","_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 { 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 { composeStyles } from '../theme/styles'\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 or pending.\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 or pending.\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 size of a layer drawn on a part of the control rather than across\n   * it, as a navigation destination draws its layer on the indicator behind\n   * its icon. The ripple then grows from that part's centre wherever the\n   * press lands, and nothing is measured, as for `disc`.\n   */\n  readonly area?: Size | undefined\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   * Takes no press or hover while true, with no layer and no ripple for\n   * either, and keeps the focus and its ring, as a pending button does.\n   */\n  readonly pending?: boolean | 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\ntype Size = { readonly height: number; readonly width: number }\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 layer is drawn on a part of it of a\n * fixed size passes that size as `area`, with the same effect. 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  area,\n  color,\n  corners,\n  disabled,\n  disableRipple = false,\n  disc,\n  onBlur,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onPressIn,\n  onPressOut,\n  pending,\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 interactive = active && pending !== true\n  const rippled = interactive && !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      const fixed = disc === undefined ? area : { height: disc, width: disc }\n\n      if (rippled && fixed !== undefined) {\n        ripple(fixed.width, fixed.height, {\n          x: fixed.width / 2,\n          y: fixed.height / 2,\n        })\n        phase.current = 'shown'\n      } else if (rippled && typeof event.currentTarget !== 'number') {\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. React Native types the\n        // target as a bare view tag too, which has nothing to measure.\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    : interactive && pressed\n      ? stateLayerOpacity.pressed\n      : ringShown\n        ? stateLayerOpacity.focus\n        : interactive && hovered\n          ? stateLayerOpacity.hover\n          : 0\n  const surface = composeStyles<ViewStyle>(styles.surface, corners)\n  const state = composeStyles<ViewStyle>(styles.layer, {\n    backgroundColor: interactive && pressed ? pressedColor : color,\n    opacity: layerOpacity,\n  })\n\n  return {\n    handlers,\n    hovered: interactive && 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: interactive && 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/router/index.js

@@ -1,7 +1,7 @@
 import { c } from "react/compiler-runtime";
+import { Linking } from "react-native";
 import { createContext, use } from "react";
 import { jsx } from "react/jsx-runtime";
-import { Linking } from "react-native";
 //#region src/router/index.tsx
 const SCHEME = /^[a-z][\d+.a-z-]*:/iu;
 const RouterContext = createContext(null);

package/dist/row/index.js

@@ -4,9 +4,9 @@ import { composeStyles } from "../theme/styles.js";
 import { useTypeRole } from "../typography/roles.js";
 import { rowContentColor, rowStyles, rowStylesOf } from "./styles.js";
 import { c } from "react/compiler-runtime";
+import { Text, View } from "react-native";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Text, View } from "react-native";
 //#region src/row/index.tsx
 const ICON_SIZE = 24;
 /** Whether a slot was given something to draw. */

package/dist/theme/scope.js

@@ -1,8 +1,8 @@
 import { dark, light } from "../tokens/defaults.js";
 import { resolveTheme } from "./resolve.js";
 import { c } from "react/compiler-runtime";
-import { createContext, use } from "react";
 import { useColorScheme } from "react-native";
+import { createContext, use } from "react";
 //#region src/theme/scope.ts
 const DEFAULTS = {
 	dark,

package/dist/theme-scope.d.ts

@@ -1,6 +1,6 @@
 import { KuiTheme } from "./tokens/defaults.js";
-import { ComponentRef, Ref } from "react";
 import { View, ViewProps } from "react-native";
+import { ComponentRef, Ref } from "react";
 //#region src/theme-scope.d.ts
 type ThemeScopeProps = ViewProps & {
   readonly ref?: Ref<ComponentRef<typeof View>>;

package/dist/theme-scope.js

@@ -2,9 +2,9 @@ import { ScopeContext, merged, scopeFor, useScope } from "./theme/scope.js";
 import { themedStyles } from "./theme/styles.js";
 import { OverlayHost, OverlayHostContext } from "./overlay/host.js";
 import { c } from "react/compiler-runtime";
+import { StyleSheet, View } from "react-native";
 import { use } from "react";
 import { jsx } from "react/jsx-runtime";
-import { StyleSheet, View } from "react-native";
 //#region src/theme-scope.tsx
 const stylesOf = themedStyles(({ colors }) => StyleSheet.create({ pinned: { backgroundColor: colors.surface } }));
 /**

package/dist/typography/fonts.js

@@ -1,6 +1,6 @@
 import { c } from "react/compiler-runtime";
-import { useSyncExternalStore } from "react";
 import { Platform } from "react-native";
+import { useSyncExternalStore } from "react";
 //#region src/typography/fonts.ts
 let registry;
 let loading;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/react-native-kanso-ui",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Kanso UI's Material Design components for React Native, themed through the same --kui-* design tokens as the web library",
   "keywords": [
     "react-native",
@@ -49,6 +49,7 @@
   },
   "author": "Kanso Labs <kanso.labs.org@gmail.com>",
   "dependencies": {
+    "@internationalized/date": "3.12.4",
     "@internationalized/number": "3.6.9",
     "react-stately": "3.51.0"
   },
@@ -61,8 +62,8 @@
     "@commitlint/config-conventional": "21.2.3",
     "@eslint/js": "10.0.1",
     "@jest/globals": "29.7.0",
-    "@kanso-labs/kanso-ui": "0.43.5",
-    "@kanso-labs/unplugin-style-dictionary": "0.10.33",
+    "@kanso-labs/kanso-ui": "0.43.6",
+    "@kanso-labs/unplugin-style-dictionary": "0.10.34",
     "@react-native/babel-preset": "0.88.0",
     "@react-native/jest-preset": "0.88.0",
     "@rolldown/plugin-babel": "0.2.4",