@kanso-labs/react-native-kanso-ui 0.1.1 → 0.2.0

package/dist/indicator/paths.js

@@ -0,0 +1,72 @@
+//#region src/indicator/paths.ts
+const PLACES = 3;
+/** A full turn, in radians. */
+const TURN = 2 * Math.PI;
+const DOT = .001;
+const WAVE_AMPLITUDE = 3;
+const WAVE_HEIGHT = 10;
+const WAVE_ORIGIN = 2;
+const POINTS_PER_WAVELENGTH = 16;
+const POINTS_PER_RING_WAVE = 20;
+/**
+* An arc of the circle about (`centre`, `centre`), clockwise from `from` for
+* `sweep` radians, both measured from the top. A sweep of nothing draws a dot,
+* as web's zero-length dash does, and a full turn stops short of closing by
+* a hair the round caps cover, since an arc that ends where it starts is no
+* arc at all.
+*/
+function arcPath(centre, radius, from, sweep) {
+	"worklet";
+	const span = Math.min(Math.max(sweep, DOT), TURN - DOT);
+	const large = span > Math.PI ? 1 : 0;
+	function point(angle) {
+		const x = centre + radius * Math.sin(angle);
+		const y = centre - radius * Math.cos(angle);
+		return `${x.toFixed(PLACES)} ${y.toFixed(PLACES)}`;
+	}
+	return `M${point(from)}A${radius} ${radius} 0 ${large} 1 ${point(from + span)}`;
+}
+/**
+* A stretch of the wave along a line, from `from` to `to` across its row, on a
+* wave `wavelength` long that rises first from `WAVE_ORIGIN`, as web's does.
+* Nothing when the stretch is empty, which is how a bar that has not yet
+* reached the row, or has left it, draws nothing.
+*/
+function wavePath(wavelength, from, to) {
+	"worklet";
+	if (to <= from) return "";
+	function point(x) {
+		const crest = Math.sin(TURN * (x - WAVE_ORIGIN) / wavelength);
+		const y = WAVE_HEIGHT / 2 - WAVE_AMPLITUDE * crest;
+		return `${x.toFixed(PLACES)} ${y.toFixed(PLACES)}`;
+	}
+	const step = wavelength / POINTS_PER_WAVELENGTH;
+	let path = `M${point(from)}`;
+	for (let index = Math.floor((from - WAVE_ORIGIN) / step) + 1; WAVE_ORIGIN + index * step < to; index++) path += `L${point(WAVE_ORIGIN + index * step)}`;
+	return `${path}L${point(to)}`;
+}
+/**
+* A stretch of a ring's wave, clockwise from `from` for `sweep` radians, both
+* measured from the top, as `arcPath` takes them. `phase` is the angle the
+* wave rises from, which turns with a spinning ring so its crests turn with
+* it. A sweep of nothing draws a dot, as an arc's does.
+*/
+function wavyArcPath(wave, phase, from, sweep) {
+	"worklet";
+	const { amplitude, centre, radius, waves } = wave;
+	function point(angle) {
+		const reach = radius + amplitude * Math.sin(waves * (angle - phase));
+		const x = centre + reach * Math.sin(angle);
+		const y = centre - reach * Math.cos(angle);
+		return `${x.toFixed(PLACES)} ${y.toFixed(PLACES)}`;
+	}
+	const step = TURN / (waves * POINTS_PER_RING_WAVE);
+	const to = from + Math.min(Math.max(sweep, DOT), TURN);
+	let path = `M${point(from)}`;
+	for (let index = Math.floor(from / step) + 1; index * step < to; index++) path += `L${point(index * step)}`;
+	return `${path}L${point(to)}`;
+}
+//#endregion
+export { TURN, WAVE_HEIGHT, WAVE_ORIGIN, arcPath, wavePath, wavyArcPath };
+
+//# sourceMappingURL=paths.js.map

package/dist/indicator/paths.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paths.js","names":["THICKNESS","PLACES","TURN","Math","PI","DOT","WAVE_AMPLITUDE","WAVE_HEIGHT","WAVE_ORIGIN","POINTS_PER_WAVELENGTH","POINTS_PER_RING_WAVE","RingWave","amplitude","centre","radius","waves","arcPath","from","sweep","span","min","max","large","point","angle","x","sin","y","cos","toFixed","wavePath","wavelength","to","crest","step","path","index","floor","wavyArcPath","wave","phase","reach"],"sources":["../../src/indicator/paths.ts"],"sourcesContent":["import { THICKNESS } from './styles'\n\n// The paths a progress indicator draws its curves along: an arc of a circle,\n// an arc of a circle with a wave round it, and a wave along a line. Each is\n// built from where it starts and how far it runs, so a curve that moves is a\n// new path each frame rather than a dash pattern that moves.\n//\n// Web cuts its arcs and waves out of whole curves with `stroke-dasharray`,\n// normalised by `pathLength` so a dash reads as a share of the way round.\n// react-native-svg has no `pathLength`, and a dash pattern Reanimated moves\n// frame by frame is the least reliable of an svg's props across iOS, Android\n// and the web, so here the cut is made in the path itself, which every\n// platform redraws alike. The geometry is web's: the same circles, the same\n// waves, and the same lengths along them.\n//\n// Every builder is a worklet, so it runs on the UI thread with the animation\n// that moves it, and a test can call it as it stands. Each is whole on its\n// own, its helpers nested inside it: a worklet captures what it calls when the\n// module is evaluated, so one calling another declared below it would be\n// handed nothing, and the linter orders declarations by name, not by use.\n\n// Three decimal places, which keeps a path short without moving a point by\n// anything a screen could show, as web rounds its own.\nconst PLACES = 3\n\n/** A full turn, in radians. */\nconst TURN = 2 * Math.PI\n\n// The least an arc runs. Web's zero-length dash still draws, as a dot the\n// size of the stroke, since a round cap is drawn at either end of a dash of\n// any length; an svg path of no length draws nothing at all, so the arc is\n// given this much instead, which is the same dot.\nconst DOT = 0.001\n\n// The wave along the line: its amplitude either side of the middle, and the\n// row it is drawn in, which is the amplitude either side plus the stroke.\n// It starts half a stroke in, so its round cap starts at the row's edge.\nconst WAVE_AMPLITUDE = 3\nconst WAVE_HEIGHT = WAVE_AMPLITUDE * 2 + THICKNESS\nconst WAVE_ORIGIN = THICKNESS / 2\n\n// How many points a wavelength is drawn through: web draws a line's wave as\n// cubic half waves and a ring's as twenty points to a wave. A wave cut short\n// partway through a cubic would need it split, so both are drawn as points\n// here, finely enough that the joins are below what the 4dp stroke shows.\nconst POINTS_PER_WAVELENGTH = 16\nconst POINTS_PER_RING_WAVE = 20\n\n/** A circle a ring's wave runs round, and the wave. */\ntype RingWave = {\n  /** How far the wave rises either side of the circle. */\n  readonly amplitude: number\n  /** The centre, on both axes. */\n  readonly centre: number\n  /** The circle's radius. */\n  readonly radius: number\n  /** How many crests the wave has round the whole circle. */\n  readonly waves: number\n}\n\n/**\n * An arc of the circle about (`centre`, `centre`), clockwise from `from` for\n * `sweep` radians, both measured from the top. A sweep of nothing draws a dot,\n * as web's zero-length dash does, and a full turn stops short of closing by\n * a hair the round caps cover, since an arc that ends where it starts is no\n * arc at all.\n */\nfunction arcPath(centre: number, radius: number, from: number, sweep: number) {\n  'worklet'\n  const span = Math.min(Math.max(sweep, DOT), TURN - DOT)\n  const large = span > Math.PI ? 1 : 0\n\n  // A point on the circle, `angle` radians clockwise from the top.\n  function point(angle: number) {\n    const x = centre + radius * Math.sin(angle)\n    const y = centre - radius * Math.cos(angle)\n    return `${x.toFixed(PLACES)} ${y.toFixed(PLACES)}`\n  }\n\n  return `M${point(from)}A${radius} ${radius} 0 ${large} 1 ${point(from + span)}`\n}\n\n/**\n * A stretch of the wave along a line, from `from` to `to` across its row, on a\n * wave `wavelength` long that rises first from `WAVE_ORIGIN`, as web's does.\n * Nothing when the stretch is empty, which is how a bar that has not yet\n * reached the row, or has left it, draws nothing.\n */\nfunction wavePath(wavelength: number, from: number, to: number) {\n  'worklet'\n  if (to <= from) {\n    return ''\n  }\n\n  // The point on the wave above `x`.\n  function point(x: number) {\n    const crest = Math.sin((TURN * (x - WAVE_ORIGIN)) / wavelength)\n    const y = WAVE_HEIGHT / 2 - WAVE_AMPLITUDE * crest\n    return `${x.toFixed(PLACES)} ${y.toFixed(PLACES)}`\n  }\n\n  const step = wavelength / POINTS_PER_WAVELENGTH\n  let path = `M${point(from)}`\n  for (\n    let index = Math.floor((from - WAVE_ORIGIN) / step) + 1;\n    WAVE_ORIGIN + index * step < to;\n    index++\n  ) {\n    path += `L${point(WAVE_ORIGIN + index * step)}`\n  }\n\n  return `${path}L${point(to)}`\n}\n\n/**\n * A stretch of a ring's wave, clockwise from `from` for `sweep` radians, both\n * measured from the top, as `arcPath` takes them. `phase` is the angle the\n * wave rises from, which turns with a spinning ring so its crests turn with\n * it. A sweep of nothing draws a dot, as an arc's does.\n */\nfunction wavyArcPath(\n  wave: RingWave,\n  phase: number,\n  from: number,\n  sweep: number,\n) {\n  'worklet'\n  const { amplitude, centre, radius, waves } = wave\n\n  // The point on the wave at `angle`, clockwise from the top.\n  function point(angle: number) {\n    const reach = radius + amplitude * Math.sin(waves * (angle - phase))\n    const x = centre + reach * Math.sin(angle)\n    const y = centre - reach * Math.cos(angle)\n    return `${x.toFixed(PLACES)} ${y.toFixed(PLACES)}`\n  }\n\n  const step = TURN / (waves * POINTS_PER_RING_WAVE)\n  const to = from + Math.min(Math.max(sweep, DOT), TURN)\n  let path = `M${point(from)}`\n  for (let index = Math.floor(from / step) + 1; index * step < to; index++) {\n    path += `L${point(index * step)}`\n  }\n\n  return `${path}L${point(to)}`\n}\n\nexport { arcPath, TURN, WAVE_HEIGHT, WAVE_ORIGIN, wavePath, wavyArcPath }\nexport type { RingWave }\n"],"mappings":";AAuBA,MAAMC,SAAS;;AAGf,MAAMC,OAAO,IAAIC,KAAKC;AAMtB,MAAMC,MAAM;AAKZ,MAAMC,iBAAiB;AACvB,MAAMC,cAAcD;AACpB,MAAME,cAAAA;AAMN,MAAMC,wBAAwB;AAC9B,MAAMC,uBAAuB;;;;;;;;AAqB7B,SAASM,QAAQH,QAAgBC,QAAgBG,MAAcC,OAAe;CAC5E;CACA,MAAMC,OAAOhB,KAAKiB,IAAIjB,KAAKkB,IAAIH,OAAOb,GAAG,GAAGH,OAAOG,GAAG;CACtD,MAAMiB,QAAQH,OAAOhB,KAAKC,KAAK,IAAI;CAGnC,SAASmB,MAAMC,OAAe;EAC5B,MAAMC,IAAIZ,SAASC,SAASX,KAAKuB,IAAIF,KAAK;EAC1C,MAAMG,IAAId,SAASC,SAASX,KAAKyB,IAAIJ,KAAK;EAC1C,OAAO,GAAGC,EAAEI,QAAQ5B,MAAM,EAAC,GAAI0B,EAAEE,QAAQ5B,MAAM;CACjD;CAEA,OAAO,IAAIsB,MAAMN,IAAI,EAAC,GAAIH,OAAM,GAAIA,OAAM,KAAMQ,MAAK,KAAMC,MAAMN,OAAOE,IAAI;AAC9E;;;;;;;AAQA,SAASW,SAASC,YAAoBd,MAAce,IAAY;CAC9D;CACA,IAAIA,MAAMf,MACR,OAAO;CAIT,SAASM,MAAME,GAAW;EACxB,MAAMQ,QAAQ9B,KAAKuB,IAAKxB,QAAQuB,IAAIjB,eAAgBuB,UAAU;EAC9D,MAAMJ,IAAIpB,cAAc,IAAID,iBAAiB2B;EAC7C,OAAO,GAAGR,EAAEI,QAAQ5B,MAAM,EAAC,GAAI0B,EAAEE,QAAQ5B,MAAM;CACjD;CAEA,MAAMiC,OAAOH,aAAatB;CAC1B,IAAI0B,OAAO,IAAIZ,MAAMN,IAAI;CACzB,KACE,IAAImB,QAAQjC,KAAKkC,OAAOpB,OAAOT,eAAe0B,IAAI,IAAI,GACtD1B,cAAc4B,QAAQF,OAAOF,IAC7BI,SAEAD,QAAQ,IAAIZ,MAAMf,cAAc4B,QAAQF,IAAI;CAG9C,OAAO,GAAGC,KAAI,GAAIZ,MAAMS,EAAE;AAC5B;;;;;;;AAQA,SAASM,YACPC,MACAC,OACAvB,MACAC,OACA;CACA;CACA,MAAM,EAAEN,WAAWC,QAAQC,QAAQC,UAAUwB;CAG7C,SAAShB,MAAMC,OAAe;EAC5B,MAAMiB,QAAQ3B,SAASF,YAAYT,KAAKuB,IAAIX,SAASS,QAAQgB,MAAM;EACnE,MAAMf,IAAIZ,SAAS4B,QAAQtC,KAAKuB,IAAIF,KAAK;EACzC,MAAMG,IAAId,SAAS4B,QAAQtC,KAAKyB,IAAIJ,KAAK;EACzC,OAAO,GAAGC,EAAEI,QAAQ5B,MAAM,EAAC,GAAI0B,EAAEE,QAAQ5B,MAAM;CACjD;CAEA,MAAMiC,OAAOhC,QAAQa,QAAQL;CAC7B,MAAMsB,KAAKf,OAAOd,KAAKiB,IAAIjB,KAAKkB,IAAIH,OAAOb,GAAG,GAAGH,IAAI;CACrD,IAAIiC,OAAO,IAAIZ,MAAMN,IAAI;CACzB,KAAK,IAAImB,QAAQjC,KAAKkC,MAAMpB,OAAOiB,IAAI,IAAI,GAAGE,QAAQF,OAAOF,IAAII,SAC/DD,QAAQ,IAAIZ,MAAMa,QAAQF,IAAI;CAGhC,OAAO,GAAGC,KAAI,GAAIZ,MAAMS,EAAE;AAC5B"}

package/dist/indicator/styles.js

@@ -0,0 +1,62 @@
+import { themedStyles } from "../theme/styles.js";
+import { StyleSheet } from "react-native";
+/**
+* The curve a determinate value moves along, Material's own, over the motion
+* scale's `durationMedium1`.
+*/
+const DETERMINATE_EASING = [
+	.4,
+	0,
+	.6,
+	1
+];
+const styles = StyleSheet.create({
+	active: {
+		flexShrink: 0,
+		height: 4
+	},
+	label: {
+		flexShrink: 1,
+		minWidth: 0
+	},
+	line: {
+		alignItems: "center",
+		alignSelf: "stretch",
+		flexDirection: "row",
+		gap: 4,
+		height: 4
+	},
+	stop: {
+		flexShrink: 0,
+		height: 4,
+		width: 4
+	},
+	track: {
+		flexDirection: "row",
+		flexGrow: 1,
+		flexShrink: 1,
+		height: 4,
+		minWidth: 0,
+		overflow: "hidden"
+	},
+	value: {
+		flexShrink: 0,
+		marginStart: "auto"
+	}
+});
+const stylesOf = themedStyles(({ radii, spacing }) => StyleSheet.create({
+	active: { borderRadius: radii.pill },
+	labels: {
+		alignItems: "baseline",
+		flexDirection: "row",
+		gap: spacing.sm,
+		justifyContent: "space-between"
+	},
+	root: { gap: spacing.xs },
+	stop: { borderRadius: radii.circle },
+	track: { borderRadius: radii.pill }
+}));
+//#endregion
+export { DETERMINATE_EASING, styles, stylesOf };
+
+//# sourceMappingURL=styles.js.map

package/dist/indicator/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["StyleSheet","themedStyles","THICKNESS","GAP","RESERVED","DETERMINATE_EASING","const","styles","create","active","flexShrink","height","label","minWidth","line","alignItems","alignSelf","flexDirection","gap","stop","width","track","flexGrow","overflow","value","marginStart","stylesOf","radii","spacing","borderRadius","pill","labels","sm","justifyContent","root","xs","circle"],"sources":["../../src/indicator/styles.ts"],"sourcesContent":["import { StyleSheet } from 'react-native'\n\nimport { themedStyles } from '../theme/styles'\n\n// The line the progress indicators page draws, and the label row above it,\n// shared by the two components that draw one, as web's src/indicator is:\n// ProgressIndicator, which adds the ring and the two indeterminate\n// presentations on top, and Meter, which is this and nothing else.\n//\n// The page's anatomy names three parts, the active indicator, the track and\n// the stop indicator at the end, at 4dp thick with 4dp between them. The row\n// is a flex row and the two gaps are its `gap`. The active indicator takes the\n// value's share of what the two gaps and the stop leave, and the track takes\n// the rest, so the stop ends the row at every value.\n\n/** The thickness of every part, and the room the page leaves between them. */\nconst THICKNESS = 4\nconst GAP = 4\n\n/** What the two gaps and the stop indicator take from the row. */\nconst RESERVED = GAP * 2 + THICKNESS\n\n/**\n * The curve a determinate value moves along, Material's own, over the motion\n * scale's `durationMedium1`.\n */\nconst DETERMINATE_EASING = [0.4, 0, 0.6, 1] as const\n\nconst styles = StyleSheet.create({\n  // The active indicator. Its width is the value's, and is set where it\n  // renders.\n  active: {\n    flexShrink: 0,\n    height: THICKNESS,\n  },\n  // The label's own part of the row. It gives way to the value, and breaks a\n  // word wider than the room rather than widening the row: a file name or a\n  // compound otherwise pushed the value off the end. The browser keeps a flex\n  // item as wide as its longest word unless told it may be narrower.\n  label: {\n    flexShrink: 1,\n    minWidth: 0,\n  },\n  // The three parts, with the page's 4dp between them.\n  line: {\n    alignItems: 'center',\n    alignSelf: 'stretch',\n    flexDirection: 'row',\n    gap: GAP,\n    height: THICKNESS,\n  },\n  stop: {\n    flexShrink: 0,\n    height: THICKNESS,\n    width: THICKNESS,\n  },\n  // The track: whatever the active indicator and the gaps leave. Given\n  // something to hold it becomes a row of its own, clipped to its corners.\n  track: {\n    flexDirection: 'row',\n    flexGrow: 1,\n    flexShrink: 1,\n    height: THICKNESS,\n    minWidth: 0,\n    overflow: 'hidden',\n  },\n  // The value: whole, on one line, and at the end of the row whether or not a\n  // label is beside it.\n  value: {\n    flexShrink: 0,\n    marginStart: 'auto',\n  },\n})\n\nconst stylesOf = themedStyles(({ radii, spacing }) =>\n  StyleSheet.create({\n    // The active indicator and the track are pills, and the stop a dot.\n    active: { borderRadius: radii.pill },\n    // The label and the value either end of a row above the indicator.\n    labels: {\n      alignItems: 'baseline',\n      flexDirection: 'row',\n      gap: spacing.sm,\n      justifyContent: 'space-between',\n    },\n    // The label row and the line, stacked.\n    root: { gap: spacing.xs },\n    stop: { borderRadius: radii.circle },\n    track: { borderRadius: radii.pill },\n  }),\n)\n\nexport { DETERMINATE_EASING, GAP, RESERVED, styles, stylesOf, THICKNESS }\n"],"mappings":";;;;;;AA0BA,MAAMK,qBAAqB;CAAC;CAAK;CAAG;CAAK;AAAC;AAE1C,MAAME,SAASP,WAAWQ,OAAO;CAG/BC,QAAQ;EACNC,YAAY;EACZC,QAAAA;CACF;CAKAC,OAAO;EACLF,YAAY;EACZG,UAAU;CACZ;CAEAC,MAAM;EACJC,YAAY;EACZC,WAAW;EACXC,eAAe;EACfC,KAAAA;EACAP,QAAAA;CACF;CACAQ,MAAM;EACJT,YAAY;EACZC,QAAAA;EACAS,OAAAA;CACF;CAGAC,OAAO;EACLJ,eAAe;EACfK,UAAU;EACVZ,YAAY;EACZC,QAAAA;EACAE,UAAU;EACVU,UAAU;CACZ;CAGAC,OAAO;EACLd,YAAY;EACZe,aAAa;CACf;AACF,CAAC;AAED,MAAMC,WAAWzB,cAAc,EAAE0B,OAAOC,cACtC5B,WAAWQ,OAAO;CAEhBC,QAAQ,EAAEoB,cAAcF,MAAMG,KAAK;CAEnCC,QAAQ;EACNhB,YAAY;EACZE,eAAe;EACfC,KAAKU,QAAQI;EACbC,gBAAgB;CAClB;CAEAC,MAAM,EAAEhB,KAAKU,QAAQO,GAAG;CACxBhB,MAAM,EAAEU,cAAcF,MAAMS,OAAO;CACnCf,OAAO,EAAEQ,cAAcF,MAAMG,KAAK;AACpC,CAAC,CACH"}

package/dist/number/locale.js

@@ -0,0 +1,14 @@
+//#region src/number/locale.ts
+let deviceLocale;
+function localeOf(locale) {
+	if (locale !== void 0) try {
+		Intl.NumberFormat.supportedLocalesOf(locale);
+		return locale;
+	} catch {}
+	deviceLocale ??= new Intl.NumberFormat().resolvedOptions().locale;
+	return deviceLocale;
+}
+//#endregion
+export { localeOf };
+
+//# sourceMappingURL=locale.js.map

package/dist/number/locale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"locale.js","names":["deviceLocale","localeOf","locale","undefined","Intl","NumberFormat","supportedLocalesOf","resolvedOptions"],"sources":["../../src/number/locale.ts"],"sourcesContent":["// The locale a component writes its numbers in, and src/i18n its words: the\n// one given, where the runtime takes it as a locale at all, or the device's.\n// Web reads the page's from React Aria's `I18nProvider`; React Native has no\n// such context, so a component that formats a number takes the locale as a\n// prop and falls back to this.\n\nlet deviceLocale: string | undefined\n\nfunction localeOf(locale: string | undefined) {\n  if (locale !== undefined) {\n    try {\n      Intl.NumberFormat.supportedLocalesOf(locale)\n      return locale\n    } catch {\n      // A malformed tag, which falls back to the device's.\n    }\n  }\n\n  deviceLocale ??= new Intl.NumberFormat().resolvedOptions().locale\n  return deviceLocale\n}\n\nexport { localeOf }\n"],"mappings":";AAMA,IAAIA;AAEJ,SAASC,SAASC,QAA4B;CAC5C,IAAIA,WAAWC,KAAAA,GACb,IAAI;EACFC,KAAKC,aAAaC,mBAAmBJ,MAAM;EAC3C,OAAOA;CACT,QAAQ,CACN;CAIJF,iBAAiB,IAAII,KAAKC,aAAa,CAAC,CAACE,gBAAgB,CAAC,CAACL;CAC3D,OAAOF;AACT"}

package/dist/overlay/host.js

@@ -1,6 +1,7 @@
+import { ScopeContext, useScope } from "../theme/scope.js";
 import { c } from "react/compiler-runtime";
 import { StyleSheet, View } from "react-native";
-import { createContext, useState, useSyncExternalStore } from "react";
+import { createContext, use, useId, useLayoutEffect, useState, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/overlay/host.tsx
 const OverlayHostContext = createContext(null);
@@ -13,6 +14,68 @@ const styles = StyleSheet.create({ fill: {
 	top: 0
 } });
 /**
+* Draws its content above the screen, in the overlay host of the app's
+* outermost `ThemeScope`, for as long as it is mounted. A later overlay draws
+* above an earlier one.
+*
+* The content reads the `ThemeScope` around the `Overlay`, as anything else
+* there would. Other context set between the host and the `Overlay` does not
+* reach it: an overlay is a surface of its own, as web's `OverlayScope` makes
+* one, so it starts from what is around the app rather than from what is
+* around the control that opened it.
+*/
+function Overlay(t0) {
+	const $ = c(10);
+	const { children } = t0;
+	const store = use(OverlayHostContext);
+	const scope = useScope();
+	const key = useId();
+	if (store === null) throw new Error("An overlay draws in the host of the outermost ThemeScope, and there is no ThemeScope around this one. Wrap the app in a ThemeScope.");
+	let t1;
+	let t2;
+	if ($[0] !== children || $[1] !== key || $[2] !== scope || $[3] !== store) {
+		t1 = () => {
+			store.set(key, /* @__PURE__ */ jsx(ScopeContext, {
+				value: scope,
+				children
+			}));
+		};
+		t2 = [
+			children,
+			key,
+			scope,
+			store
+		];
+		$[0] = children;
+		$[1] = key;
+		$[2] = scope;
+		$[3] = store;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		t1 = $[4];
+		t2 = $[5];
+	}
+	useLayoutEffect(t1, t2);
+	let t3;
+	let t4;
+	if ($[6] !== key || $[7] !== store) {
+		t3 = () => () => {
+			store.remove(key);
+		};
+		t4 = [key, store];
+		$[6] = key;
+		$[7] = store;
+		$[8] = t3;
+		$[9] = t4;
+	} else {
+		t3 = $[8];
+		t4 = $[9];
+	}
+	useLayoutEffect(t3, t4);
+	return null;
+}
+/**
 * Hosts the overlays drawn inside it: its children, then a layer over them
 * that fills the view around the host. Mounting or unmounting an overlay
 * renders the layer alone, so the screen under it keeps its state.
@@ -106,6 +169,6 @@ function storeFor() {
 	};
 }
 //#endregion
-export { OverlayHost, OverlayHostContext };
+export { Overlay, OverlayHost, OverlayHostContext };
 
 //# sourceMappingURL=host.js.map

package/dist/overlay/host.js.map

@@ -1 +1 @@
-{"version":3,"file":"host.js","names":["ReactNode","createContext","use","useId","useLayoutEffect","useState","useSyncExternalStore","StyleSheet","View","ScopeContext","useScope","Entry","key","content","OverlayStore","attach","layer","entries","remove","set","subscribe","listener","OverlayHostContext","styles","create","fill","bottom","left","pointerEvents","position","right","top","Overlay","t0","$","_c","children","store","scope","Error","t1","t2","t3","t4","OverlayHost","storeFor","OverlayLayer","map","_temp","Map","listeners","Set","changed","view","delete","node","add","_c"],"sources":["../../src/overlay/host.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport {\n  createContext,\n  use,\n  useId,\n  useLayoutEffect,\n  useState,\n  useSyncExternalStore,\n} from 'react'\nimport { StyleSheet, View } from 'react-native'\n\nimport { ScopeContext, useScope } from '../theme/scope'\n\ntype Entry = readonly [key: string, content: ReactNode]\n\n/** What an overlay reaches its host through. */\ntype OverlayStore = {\n  /** Takes the layer the host draws its overlays in, as its ref. */\n  readonly attach: (layer: null | View) => void\n  readonly entries: () => readonly Entry[]\n  /** The layer the host draws its overlays in, for placing one in it. */\n  readonly layer: () => null | View\n  readonly remove: (key: string) => void\n  readonly set: (key: string, content: ReactNode) => void\n  readonly subscribe: (listener: () => void) => () => void\n}\n\nconst OverlayHostContext = createContext<null | OverlayStore>(null)\n\nconst styles = StyleSheet.create({\n  // Each overlay fills the layer on a box of its own, so one laid out in the\n  // flow, as a bar along an edge is, is laid out against the screen rather\n  // than after the overlay before it.\n  fill: {\n    bottom: 0,\n    left: 0,\n    pointerEvents: 'box-none',\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n})\n\n/**\n * Draws its content above the screen, in the overlay host of the app's\n * outermost `ThemeScope`, for as long as it is mounted. A later overlay draws\n * above an earlier one.\n *\n * The content reads the `ThemeScope` around the `Overlay`, as anything else\n * there would. Other context set between the host and the `Overlay` does not\n * reach it: an overlay is a surface of its own, as web's `OverlayScope` makes\n * one, so it starts from what is around the app rather than from what is\n * around the control that opened it.\n */\nfunction Overlay({ children }: { readonly children?: ReactNode }) {\n  const store = use(OverlayHostContext)\n  const scope = useScope()\n  const key = useId()\n\n  if (store === null) {\n    throw new Error(\n      'An overlay draws in the host of the outermost ThemeScope, and there is no ThemeScope around this one. Wrap the app in a ThemeScope.',\n    )\n  }\n\n  // Set before paint, so an overlay opening never draws a frame without it,\n  // and replaced in place on an update, so it keeps its place in the stack.\n  useLayoutEffect(() => {\n    store.set(key, <ScopeContext value={scope}>{children}</ScopeContext>)\n  }, [children, key, scope, store])\n\n  useLayoutEffect(\n    () => () => {\n      store.remove(key)\n    },\n    [key, store],\n  )\n\n  return null\n}\n\n/**\n * Hosts the overlays drawn inside it: its children, then a layer over them\n * that fills the view around the host. Mounting or unmounting an overlay\n * renders the layer alone, so the screen under it keeps its state.\n *\n * The outermost `ThemeScope` renders one, so an app has one at its root.\n */\nfunction OverlayHost({ children }: { readonly children?: ReactNode }) {\n  const [store] = useState(storeFor)\n\n  return (\n    <OverlayHostContext value={store}>\n      {children}\n      <OverlayLayer attach={store.attach} store={store} />\n    </OverlayHostContext>\n  )\n}\n\n// The layer passes a touch through to the screen wherever no overlay is\n// drawn, so an open overlay leaves the screen around it usable. It takes its\n// ref apart from the store, since the compiler reads an object a ref is taken\n// from as a ref itself, and the store is read during render.\nfunction OverlayLayer({\n  attach,\n  store,\n}: {\n  readonly attach: OverlayStore['attach']\n  readonly store: OverlayStore\n}) {\n  const entries = useSyncExternalStore(store.subscribe, store.entries)\n\n  return (\n    <View ref={attach} style={styles.fill}>\n      {entries.map(([key, content]) => (\n        <View key={key} style={styles.fill}>\n          {content}\n        </View>\n      ))}\n    </View>\n  )\n}\n\nfunction storeFor(): OverlayStore {\n  const content = new Map<string, ReactNode>()\n  const listeners = new Set<() => void>()\n  let entries: readonly Entry[] = []\n  let layer: null | View = null\n\n  const changed = () => {\n    entries = [...content]\n    for (const listener of listeners) {\n      listener()\n    }\n  }\n\n  return {\n    attach: (view) => {\n      layer = view\n    },\n    entries: () => entries,\n    layer: () => layer,\n    remove: (key) => {\n      if (content.delete(key)) {\n        changed()\n      }\n    },\n    set: (key, node) => {\n      content.set(key, node)\n      changed()\n    },\n    subscribe: (listener) => {\n      listeners.add(listener)\n      return () => {\n        listeners.delete(listener)\n      }\n    },\n  }\n}\n\nexport type { OverlayStore }\n\nexport { Overlay, OverlayHost, OverlayHostContext }\n"],"mappings":";;;;;AA4BA,MAAMsB,qBAAqBrB,cAAmC,IAAI;AAElE,MAAMsB,SAAShB,WAAWiB,OAAO,EAI/BC,MAAM;CACJC,QAAQ;CACRC,MAAM;CACNC,eAAe;CACfC,UAAU;CACVC,OAAO;CACPC,KAAK;AACP,EACF,CAAC;;;;;;;;AA+CD,SAAAa,YAAAX,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAqB,MAAA,EAAAC,aAAAH;CACnB,MAAA,CAAAI,SAAgBhC,SAASwC,QAAQ;CAAC,IAAAL;CAAA,IAAAN,EAAA,OAAAG,OAAA;EAK9BG,KAAA,oBAAC,cAAD;GAAsB,QAAAH,MAAKtB;GAAgBsB;EAAK,CAAA;EAAIH,EAAA,KAAAG;EAAAH,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAE,YAAAF,EAAA,OAAAG,SAAAH,EAAA,OAAAM,IAAA;EAFtDC,KAAA,qBAAC,oBAAD;GAA2BJ,OAAAA;GAA3B,UAAA,CACGD,UACDI,EAFiB;;EAGEN,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,OAHrBO;AAGqB;AAQzB,SAAAK,aAAAb,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAsB,MAAA,EAAApB,QAAAsB,UAAAJ;CAOpB,MAAAhB,UAAgBX,qBAAqB+B,MAAKjB,WAAYiB,MAAKpB,OAAQ;CAAC,IAAAuB;CAAA,IAAAN,EAAA,OAAAjB,SAAA;EAI/DuB,KAAAvB,QAAO8B,IAAKC,KAIZ;EAACd,EAAA,KAAAjB;EAAAiB,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAnB,UAAAmB,EAAA,OAAAM,IAAA;EALJC,KAAA,oBAAC,MAAD;GAAW1B,KAAAA;GAAe,OAAAQ,OAAME;GAC7Be,UAAAA;EADE,CAAA;EAMEN,EAAA,KAAAnB;EAAAmB,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,OANPO;AAMO;AAhBX,SAAAO,MAAAf,IAAA;CAWoB,MAAA,CAAArB,KAAAC,WAAAoB;CAAc,OAC1B,oBAAC,MAAD;EAAuB,OAAAV,OAAME;EAC1BZ,UAAAA;CADE,GAAMD,GAAN;AAEE;AAMf,SAASiC,WAAyB;CAChC,MAAMhC,0BAAU,IAAIoC,IAAuB;CAC3C,MAAMC,4BAAY,IAAIC,IAAgB;CACtC,IAAIlC,UAA4B,CAAA;CAChC,IAAID,QAAqB;CAEzB,MAAMoC,gBAAgB;EACpBnC,UAAU,CAAC,GAAGJ,OAAO;EACrB,KAAK,MAAMQ,YAAY6B,WACrB7B,SAAS;CAEb;CAEA,OAAO;EACLN,SAASsC,SAAS;GAChBrC,QAAQqC;EACV;EACApC,eAAeA;EACfD,aAAaA;EACbE,SAASN,QAAQ;GACf,IAAIC,QAAQyC,OAAO1C,GAAG,GACpBwC,QAAQ;EAEZ;EACAjC,MAAMP,KAAK2C,SAAS;GAClB1C,QAAQM,IAAIP,KAAK2C,IAAI;GACrBH,QAAQ;EACV;EACAhC,YAAYC,aAAa;GACvB6B,UAAUM,IAAInC,QAAQ;GACtB,aAAa;IACX6B,UAAUI,OAAOjC,QAAQ;GAC3B;EACF;CACF;AACF"}
+{"version":3,"file":"host.js","names":["ReactNode","createContext","use","useId","useLayoutEffect","useState","useSyncExternalStore","StyleSheet","View","ScopeContext","useScope","Entry","key","content","OverlayStore","attach","layer","entries","remove","set","subscribe","listener","OverlayHostContext","styles","create","fill","bottom","left","pointerEvents","position","right","top","Overlay","t0","$","_c","children","store","scope","Error","t1","t2","t3","t4","OverlayHost","storeFor","OverlayLayer","map","_temp","Map","listeners","Set","changed","view","delete","node","add","_c"],"sources":["../../src/overlay/host.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport {\n  createContext,\n  use,\n  useId,\n  useLayoutEffect,\n  useState,\n  useSyncExternalStore,\n} from 'react'\nimport { StyleSheet, View } from 'react-native'\n\nimport { ScopeContext, useScope } from '../theme/scope'\n\ntype Entry = readonly [key: string, content: ReactNode]\n\n/** What an overlay reaches its host through. */\ntype OverlayStore = {\n  /** Takes the layer the host draws its overlays in, as its ref. */\n  readonly attach: (layer: null | View) => void\n  readonly entries: () => readonly Entry[]\n  /** The layer the host draws its overlays in, for placing one in it. */\n  readonly layer: () => null | View\n  readonly remove: (key: string) => void\n  readonly set: (key: string, content: ReactNode) => void\n  readonly subscribe: (listener: () => void) => () => void\n}\n\nconst OverlayHostContext = createContext<null | OverlayStore>(null)\n\nconst styles = StyleSheet.create({\n  // Each overlay fills the layer on a box of its own, so one laid out in the\n  // flow, as a bar along an edge is, is laid out against the screen rather\n  // than after the overlay before it.\n  fill: {\n    bottom: 0,\n    left: 0,\n    pointerEvents: 'box-none',\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n})\n\n/**\n * Draws its content above the screen, in the overlay host of the app's\n * outermost `ThemeScope`, for as long as it is mounted. A later overlay draws\n * above an earlier one.\n *\n * The content reads the `ThemeScope` around the `Overlay`, as anything else\n * there would. Other context set between the host and the `Overlay` does not\n * reach it: an overlay is a surface of its own, as web's `OverlayScope` makes\n * one, so it starts from what is around the app rather than from what is\n * around the control that opened it.\n */\nfunction Overlay({ children }: { readonly children?: ReactNode }) {\n  const store = use(OverlayHostContext)\n  const scope = useScope()\n  const key = useId()\n\n  if (store === null) {\n    throw new Error(\n      'An overlay draws in the host of the outermost ThemeScope, and there is no ThemeScope around this one. Wrap the app in a ThemeScope.',\n    )\n  }\n\n  // Set before paint, so an overlay opening never draws a frame without it,\n  // and replaced in place on an update, so it keeps its place in the stack.\n  useLayoutEffect(() => {\n    store.set(key, <ScopeContext value={scope}>{children}</ScopeContext>)\n  }, [children, key, scope, store])\n\n  useLayoutEffect(\n    () => () => {\n      store.remove(key)\n    },\n    [key, store],\n  )\n\n  return null\n}\n\n/**\n * Hosts the overlays drawn inside it: its children, then a layer over them\n * that fills the view around the host. Mounting or unmounting an overlay\n * renders the layer alone, so the screen under it keeps its state.\n *\n * The outermost `ThemeScope` renders one, so an app has one at its root.\n */\nfunction OverlayHost({ children }: { readonly children?: ReactNode }) {\n  const [store] = useState(storeFor)\n\n  return (\n    <OverlayHostContext value={store}>\n      {children}\n      <OverlayLayer attach={store.attach} store={store} />\n    </OverlayHostContext>\n  )\n}\n\n// The layer passes a touch through to the screen wherever no overlay is\n// drawn, so an open overlay leaves the screen around it usable. It takes its\n// ref apart from the store, since the compiler reads an object a ref is taken\n// from as a ref itself, and the store is read during render.\nfunction OverlayLayer({\n  attach,\n  store,\n}: {\n  readonly attach: OverlayStore['attach']\n  readonly store: OverlayStore\n}) {\n  const entries = useSyncExternalStore(store.subscribe, store.entries)\n\n  return (\n    <View ref={attach} style={styles.fill}>\n      {entries.map(([key, content]) => (\n        <View key={key} style={styles.fill}>\n          {content}\n        </View>\n      ))}\n    </View>\n  )\n}\n\nfunction storeFor(): OverlayStore {\n  const content = new Map<string, ReactNode>()\n  const listeners = new Set<() => void>()\n  let entries: readonly Entry[] = []\n  let layer: null | View = null\n\n  const changed = () => {\n    entries = [...content]\n    for (const listener of listeners) {\n      listener()\n    }\n  }\n\n  return {\n    attach: (view) => {\n      layer = view\n    },\n    entries: () => entries,\n    layer: () => layer,\n    remove: (key) => {\n      if (content.delete(key)) {\n        changed()\n      }\n    },\n    set: (key, node) => {\n      content.set(key, node)\n      changed()\n    },\n    subscribe: (listener) => {\n      listeners.add(listener)\n      return () => {\n        listeners.delete(listener)\n      }\n    },\n  }\n}\n\nexport type { OverlayStore }\n\nexport { Overlay, OverlayHost, OverlayHostContext }\n"],"mappings":"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"}

package/dist/press/index.js

@@ -75,7 +75,7 @@ function hitSlop(height, width = 48) {
 */
 function usePressFeedback(t0) {
 	const $ = c(61);
-	const { color, corners, disabled, disableRipple: t1, disc, onBlur, onFocus, onHoverIn, onHoverOut, onPressIn, onPressOut, pressedColor: t2 } = t0;
+	const { 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();
@@ -92,7 +92,8 @@ function usePressFeedback(t0) {
 	const fade = useSharedValue(0);
 	const { motion, spacing, stateLayerOpacity } = theme;
 	const active = disabled !== true;
-	const rippled = active && !disableRipple && !reduceMotion;
+	const interactive = active && pending !== true;
+	const rippled = interactive && !disableRipple && !reduceMotion;
 	const rippleMotion = useAnimatedStyle(() => {
 		"worklet";
 		const { end, scale, size, start } = geometry.get();
@@ -268,7 +269,7 @@ function usePressFeedback(t0) {
 		$[33] = t11;
 	} else t11 = $[33];
 	const handlers = t11;
-	const layerOpacity = !active ? 0 : pressed ? stateLayerOpacity.pressed : ringShown ? stateLayerOpacity.focus : hovered ? stateLayerOpacity.hover : 0;
+	const layerOpacity = !active ? 0 : interactive && pressed ? stateLayerOpacity.pressed : ringShown ? stateLayerOpacity.focus : interactive && hovered ? stateLayerOpacity.hover : 0;
 	let t12;
 	if ($[34] !== corners) {
 		t12 = StyleSheet.compose(styles.surface, corners);
@@ -277,20 +278,20 @@ function usePressFeedback(t0) {
 	} else t12 = $[35];
 	const surface = t12;
 	let t13;
-	if ($[36] !== active || $[37] !== color || $[38] !== layerOpacity || $[39] !== pressed || $[40] !== pressedColor) {
+	if ($[36] !== color || $[37] !== interactive || $[38] !== layerOpacity || $[39] !== pressed || $[40] !== pressedColor) {
 		t13 = StyleSheet.compose(styles.layer, {
-			backgroundColor: active && pressed ? pressedColor : color,
+			backgroundColor: interactive && pressed ? pressedColor : color,
 			opacity: layerOpacity
 		});
-		$[36] = active;
-		$[37] = color;
+		$[36] = color;
+		$[37] = interactive;
 		$[38] = layerOpacity;
 		$[39] = pressed;
 		$[40] = pressedColor;
 		$[41] = t13;
 	} else t13 = $[41];
 	const state = t13;
-	const t14 = active && hovered;
+	const t14 = interactive && hovered;
 	let t15;
 	if ($[42] !== state) {
 		t15 = /* @__PURE__ */ jsx(View, { style: state });
@@ -317,7 +318,7 @@ function usePressFeedback(t0) {
 		$[49] = t16;
 		$[50] = t17;
 	} else t17 = $[50];
-	const t18 = active && pressed;
+	const t18 = interactive && pressed;
 	let t19;
 	if ($[51] !== active || $[52] !== ringShown || $[53] !== theme) {
 		t19 = active && ringShown ? stylesOf(theme).ring : void 0;

package/dist/press/index.js.map

@@ -1 +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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"}
+{"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","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","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 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) {\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    : interactive && pressed\n      ? stateLayerOpacity.pressed\n      : ringShown\n        ? stateLayerOpacity.focus\n        : interactive && hovered\n          ? stateLayerOpacity.hover\n          : 0\n  const surface = StyleSheet.compose(styles.surface, corners)\n  const state = StyleSheet.compose(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/theme/resolve.js

@@ -305,6 +305,6 @@ function resolveTheme(defaults, overrides = {}) {
 	};
 }
 //#endregion
-export { resolveTheme };
+export { parseLength, resolveTheme };
 
 //# sourceMappingURL=resolve.js.map