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

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/mark/index.d.ts

@@ -1,6 +1,6 @@
 import "./styles.js";
 import { ImageProps, StyleProp, View, ViewProps, ViewStyle } from "react-native";
-import { Ref } from "react";
+import { ComponentRef, Ref } from "react";
 //#region src/mark/index.d.ts
 /** The native props a picture's own `Image` takes, as Avatar and ProductIcon take them. */
 type MarkImageProps = Pick<ImageProps, 'crossOrigin' | 'fadeDuration' | 'progressiveRenderingEnabled' | 'referrerPolicy' | 'resizeMethod'>;

package/dist/mark/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Ref","ImageProps","ImageSourcePropType","ImageStyle","StyleProp","TextStyle","ViewProps","ViewStyle","Image","Text","NativeText","View","ResolvedTheme","MarkSize","MarkTone","PersonGlyph","useTheme","composeStyles","useTypeRole","useImageLoadingStatus","initialOfThing","initialsOfPerson","DIAMETERS","GLYPH_SHARE","initialsStylesOf","markStyles","markStylesOf","MarkImageProps","Pick","MarkProps","Omit","decorative","imgProps","kind","KINDS","name","ref","showPersonIcon","size","src","style","tone","person","initials","resizeMode","shape","tintsFallback","thing","const","CONTENT","Readonly","Record","negative","positive","primary","secondary","tertiary","Mark","t0","$","_c","props","t1","t2","undefined","theme","label","handlersFor","previous","status","T0","initialsNode","t3","t4","t5","t6","t7","t8","own","text","t9","fallback","named","trim","showsPicture","t10","colors","initialsText","base","sourceOf","image","imagePending","t11","uri","_c","NativeText"],"sources":["../../src/mark/index.tsx"],"sourcesContent":["import type { Ref } from 'react'\nimport type {\n  ImageProps,\n  ImageSourcePropType,\n  ImageStyle,\n  StyleProp,\n  TextStyle,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\n\nimport { Image, Text as NativeText, View } from 'react-native'\n\nimport type { ResolvedTheme } from '../theme/scope'\nimport type { MarkSize, MarkTone } from './styles'\n\nimport { PersonGlyph } from '../glyphs'\nimport { useTheme } from '../theme/scope'\nimport { composeStyles } from '../theme/styles'\nimport { useTypeRole } from '../typography/roles'\nimport { useImageLoadingStatus } from './image'\nimport { initialOfThing, initialsOfPerson } from './initials'\nimport {\n  DIAMETERS,\n  GLYPH_SHARE,\n  initialsStylesOf,\n  markStyles,\n  markStylesOf,\n} from './styles'\n\n/** The native props a picture's own `Image` takes, as Avatar and ProductIcon take them. */\ntype MarkImageProps = Pick<\n  ImageProps,\n  | 'crossOrigin'\n  | 'fadeDuration'\n  | 'progressiveRenderingEnabled'\n  | 'referrerPolicy'\n  | 'resizeMethod'\n>\n\ntype MarkProps = Omit<ViewProps, 'children' | 'style'> & {\n  /**\n   * Hides the mark from screen readers, for one beside the name it stands\n   * for, which would otherwise be announced twice.\n   */\n  readonly decorative?: boolean\n  /** Props for the picture's own `Image`. */\n  readonly imgProps?: MarkImageProps\n  /** A person, which Avatar draws, or anything else, which ProductIcon does. */\n  readonly kind: keyof typeof KINDS\n  /** Supplies the fallback's initials, and the accessible name unless decorative. */\n  readonly name: string\n  readonly ref?: Ref<View>\n  /**\n   * Whether a person with no initials to take, a blank name, draws the\n   * anonymous person, or an empty disc, as a loading skeleton wants.\n   */\n  readonly showPersonIcon?: boolean\n  readonly size: MarkSize\n  /** A picture to show in place of the initials once it has loaded. */\n  readonly src?: string\n  readonly style?: StyleProp<ViewStyle>\n  readonly tone: MarkTone\n}\n\n// What each kind of mark is drawn as. The header of `./styles` says why the\n// two differ where they do; everything not in this table is the same for\n// both.\nconst KINDS = {\n  person: {\n    initials: initialsOfPerson,\n    resizeMode: 'cover',\n    shape: 'circle',\n    tintsFallback: false,\n  },\n  thing: {\n    initials: initialOfThing,\n    resizeMode: 'contain',\n    shape: 'square',\n    tintsFallback: true,\n  },\n} as const\n\n// The role each tone draws the anonymous person in.\nconst CONTENT: Readonly<Record<MarkTone, keyof ResolvedTheme['colors']>> = {\n  negative: 'onNegativeContainer',\n  positive: 'onPositiveContainer',\n  primary: 'onPrimaryContainer',\n  secondary: 'onSecondaryContainer',\n  tertiary: 'onTertiaryContainer',\n}\n\n/**\n * The small identity mark Avatar and ProductIcon both render: a picture once\n * it has loaded, initials until then or if it fails, named for whoever or\n * whatever it stands for. Shared rather than written into each, so a fix to\n * one reaches both, as on web. Not a component of the library's own, and not\n * exported from the package.\n */\nfunction Mark({\n  decorative = false,\n  imgProps,\n  kind,\n  name,\n  showPersonIcon = true,\n  size,\n  src,\n  style,\n  tone,\n  ...props\n}: MarkProps) {\n  const { initials, resizeMode, shape, tintsFallback } = KINDS[kind]\n  const theme = useTheme()\n  const label = useTypeRole('labelLarge')\n  const { handlersFor, previous, status } = useImageLoadingStatus(src)\n\n  const own = markStylesOf(theme)\n  const text = initialsStylesOf(theme)\n  const fallback = initials(name)\n\n  // Announced as an image named for whoever or whatever it stands for,\n  // rather than letting the initials be read: \"AL\" is not what anyone means\n  // to announce. A blank name names nothing, so the mark is then a plain\n  // view, which a screen reader passes over rather than reading as an image\n  // with no name. A decorative mark is hidden outright, its initials with it.\n  const named = !decorative && name.trim() !== ''\n\n  // The initials while no picture shows: before the first loads, and once\n  // one fails. They are left out under a picture rather than kept beneath\n  // it, since a letterboxed logo would show them through its transparent\n  // parts.\n  const showsPicture = status === 'loaded' || previous !== undefined\n  let initialsNode = null\n  if (!showsPicture && kind === 'person' && fallback === '') {\n    // A person with no initials to take, a blank name or one still loading,\n    // draws Material Design's anonymous person in the tone's on-container\n    // colour. The glyph hides itself from screen readers.\n    initialsNode = showPersonIcon ? (\n      <PersonGlyph\n        color={theme.colors[CONTENT[tone]]}\n        size={DIAMETERS[size] * GLYPH_SHARE}\n      />\n    ) : null\n  } else if (!showsPicture) {\n    // The initials keep their size whatever the device's text size asks\n    // for: the mark is a fixed size and clips what runs past it, and the\n    // name a screen reader reads is what they stand for.\n    const initialsText = (\n      <NativeText\n        allowFontScaling={false}\n        style={composeStyles<TextStyle>(label, text[size], text[tone])}\n      >\n        {fallback}\n      </NativeText>\n    )\n    initialsNode = tintsFallback ? (\n      <View style={composeStyles<ViewStyle>(markStyles.fallback, own[tone])}>\n        {initialsText}\n      </View>\n    ) : (\n      initialsText\n    )\n  }\n\n  return (\n    <View\n      accessible={named ? true : undefined}\n      aria-hidden={decorative ? true : undefined}\n      aria-label={named ? name : undefined}\n      role={named ? 'img' : undefined}\n      {...props}\n      style={composeStyles<ViewStyle>(\n        own.base,\n        own[shape],\n        markStyles[size],\n        tintsFallback ? undefined : own[tone],\n        style,\n      )}\n    >\n      {initialsNode}\n      {/* Two pictures at most, laid over the initials. The one last loaded\n          stays while a new `src` loads, and the new one is drawn on top of\n          it from the start, hidden until it has loaded. Neither is inverted\n          by the iOS Smart Invert setting, which is meant for interface\n          colours rather than pictures. */}\n      {previous === undefined ? null : (\n        <Image\n          accessibilityIgnoresInvertColors\n          key={previous}\n          resizeMode={resizeMode}\n          source={sourceOf(previous)}\n          style={markStyles.image}\n        />\n      )}\n      {src === undefined || status === 'error' ? null : (\n        <Image\n          accessibilityIgnoresInvertColors\n          key={src}\n          {...imgProps}\n          {...handlersFor(src)}\n          resizeMode={resizeMode}\n          source={sourceOf(src)}\n          style={composeStyles<ImageStyle>(\n            markStyles.image,\n            status === 'loaded' ? undefined : markStyles.imagePending,\n          )}\n        />\n      )}\n    </View>\n  )\n}\n\n// An address as the source `Image` takes. The compiler keeps the one it made\n// for as long as the address is the same, so a re-render hands the image the\n// object it already had.\nfunction sourceOf(uri: string): ImageSourcePropType {\n  return { uri }\n}\n\nexport type { MarkImageProps, MarkProps }\n\nexport { Mark }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ComponentRef","Ref","ImageProps","ImageSourcePropType","ImageStyle","StyleProp","TextStyle","ViewProps","ViewStyle","Image","Text","NativeText","View","ResolvedTheme","MarkSize","MarkTone","PersonGlyph","useTheme","composeStyles","useTypeRole","useImageLoadingStatus","initialOfThing","initialsOfPerson","DIAMETERS","GLYPH_SHARE","initialsStylesOf","markStyles","markStylesOf","MarkImageProps","Pick","MarkProps","Omit","decorative","imgProps","kind","KINDS","name","ref","showPersonIcon","size","src","style","tone","person","initials","resizeMode","shape","tintsFallback","thing","const","CONTENT","Readonly","Record","negative","positive","primary","secondary","tertiary","Mark","t0","$","_c","props","t1","t2","undefined","theme","label","handlersFor","previous","status","T0","initialsNode","t3","t4","t5","t6","t7","t8","own","text","t9","fallback","named","trim","showsPicture","t10","colors","initialsText","base","sourceOf","image","imagePending","t11","uri","_c","NativeText"],"sources":["../../src/mark/index.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type {\n  ImageProps,\n  ImageSourcePropType,\n  ImageStyle,\n  StyleProp,\n  TextStyle,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\n\nimport { Image, Text as NativeText, View } from 'react-native'\n\nimport type { ResolvedTheme } from '../theme/scope'\nimport type { MarkSize, MarkTone } from './styles'\n\nimport { PersonGlyph } from '../glyphs'\nimport { useTheme } from '../theme/scope'\nimport { composeStyles } from '../theme/styles'\nimport { useTypeRole } from '../typography/roles'\nimport { useImageLoadingStatus } from './image'\nimport { initialOfThing, initialsOfPerson } from './initials'\nimport {\n  DIAMETERS,\n  GLYPH_SHARE,\n  initialsStylesOf,\n  markStyles,\n  markStylesOf,\n} from './styles'\n\n/** The native props a picture's own `Image` takes, as Avatar and ProductIcon take them. */\ntype MarkImageProps = Pick<\n  ImageProps,\n  | 'crossOrigin'\n  | 'fadeDuration'\n  | 'progressiveRenderingEnabled'\n  | 'referrerPolicy'\n  | 'resizeMethod'\n>\n\ntype MarkProps = Omit<ViewProps, 'children' | 'style'> & {\n  /**\n   * Hides the mark from screen readers, for one beside the name it stands\n   * for, which would otherwise be announced twice.\n   */\n  readonly decorative?: boolean\n  /** Props for the picture's own `Image`. */\n  readonly imgProps?: MarkImageProps\n  /** A person, which Avatar draws, or anything else, which ProductIcon does. */\n  readonly kind: keyof typeof KINDS\n  /** Supplies the fallback's initials, and the accessible name unless decorative. */\n  readonly name: string\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * Whether a person with no initials to take, a blank name, draws the\n   * anonymous person, or an empty disc, as a loading skeleton wants.\n   */\n  readonly showPersonIcon?: boolean\n  readonly size: MarkSize\n  /** A picture to show in place of the initials once it has loaded. */\n  readonly src?: string\n  readonly style?: StyleProp<ViewStyle>\n  readonly tone: MarkTone\n}\n\n// What each kind of mark is drawn as. The header of `./styles` says why the\n// two differ where they do; everything not in this table is the same for\n// both.\nconst KINDS = {\n  person: {\n    initials: initialsOfPerson,\n    resizeMode: 'cover',\n    shape: 'circle',\n    tintsFallback: false,\n  },\n  thing: {\n    initials: initialOfThing,\n    resizeMode: 'contain',\n    shape: 'square',\n    tintsFallback: true,\n  },\n} as const\n\n// The role each tone draws the anonymous person in.\nconst CONTENT: Readonly<Record<MarkTone, keyof ResolvedTheme['colors']>> = {\n  negative: 'onNegativeContainer',\n  positive: 'onPositiveContainer',\n  primary: 'onPrimaryContainer',\n  secondary: 'onSecondaryContainer',\n  tertiary: 'onTertiaryContainer',\n}\n\n/**\n * The small identity mark Avatar and ProductIcon both render: a picture once\n * it has loaded, initials until then or if it fails, named for whoever or\n * whatever it stands for. Shared rather than written into each, so a fix to\n * one reaches both, as on web. Not a component of the library's own, and not\n * exported from the package.\n */\nfunction Mark({\n  decorative = false,\n  imgProps,\n  kind,\n  name,\n  showPersonIcon = true,\n  size,\n  src,\n  style,\n  tone,\n  ...props\n}: MarkProps) {\n  const { initials, resizeMode, shape, tintsFallback } = KINDS[kind]\n  const theme = useTheme()\n  const label = useTypeRole('labelLarge')\n  const { handlersFor, previous, status } = useImageLoadingStatus(src)\n\n  const own = markStylesOf(theme)\n  const text = initialsStylesOf(theme)\n  const fallback = initials(name)\n\n  // Announced as an image named for whoever or whatever it stands for,\n  // rather than letting the initials be read: \"AL\" is not what anyone means\n  // to announce. A blank name names nothing, so the mark is then a plain\n  // view, which a screen reader passes over rather than reading as an image\n  // with no name. A decorative mark is hidden outright, its initials with it.\n  const named = !decorative && name.trim() !== ''\n\n  // The initials while no picture shows: before the first loads, and once\n  // one fails. They are left out under a picture rather than kept beneath\n  // it, since a letterboxed logo would show them through its transparent\n  // parts.\n  const showsPicture = status === 'loaded' || previous !== undefined\n  let initialsNode = null\n  if (!showsPicture && kind === 'person' && fallback === '') {\n    // A person with no initials to take, a blank name or one still loading,\n    // draws Material Design's anonymous person in the tone's on-container\n    // colour. The glyph hides itself from screen readers.\n    initialsNode = showPersonIcon ? (\n      <PersonGlyph\n        color={theme.colors[CONTENT[tone]]}\n        size={DIAMETERS[size] * GLYPH_SHARE}\n      />\n    ) : null\n  } else if (!showsPicture) {\n    // The initials keep their size whatever the device's text size asks\n    // for: the mark is a fixed size and clips what runs past it, and the\n    // name a screen reader reads is what they stand for.\n    const initialsText = (\n      <NativeText\n        allowFontScaling={false}\n        style={composeStyles<TextStyle>(label, text[size], text[tone])}\n      >\n        {fallback}\n      </NativeText>\n    )\n    initialsNode = tintsFallback ? (\n      <View style={composeStyles<ViewStyle>(markStyles.fallback, own[tone])}>\n        {initialsText}\n      </View>\n    ) : (\n      initialsText\n    )\n  }\n\n  return (\n    <View\n      accessible={named ? true : undefined}\n      aria-hidden={decorative ? true : undefined}\n      aria-label={named ? name : undefined}\n      role={named ? 'img' : undefined}\n      {...props}\n      style={composeStyles<ViewStyle>(\n        own.base,\n        own[shape],\n        markStyles[size],\n        tintsFallback ? undefined : own[tone],\n        style,\n      )}\n    >\n      {initialsNode}\n      {/* Two pictures at most, laid over the initials. The one last loaded\n          stays while a new `src` loads, and the new one is drawn on top of\n          it from the start, hidden until it has loaded. Neither is inverted\n          by the iOS Smart Invert setting, which is meant for interface\n          colours rather than pictures. */}\n      {previous === undefined ? null : (\n        <Image\n          accessibilityIgnoresInvertColors\n          key={previous}\n          resizeMode={resizeMode}\n          source={sourceOf(previous)}\n          style={markStyles.image}\n        />\n      )}\n      {src === undefined || status === 'error' ? null : (\n        <Image\n          accessibilityIgnoresInvertColors\n          key={src}\n          {...imgProps}\n          {...handlersFor(src)}\n          resizeMode={resizeMode}\n          source={sourceOf(src)}\n          style={composeStyles<ImageStyle>(\n            markStyles.image,\n            status === 'loaded' ? undefined : markStyles.imagePending,\n          )}\n        />\n      )}\n    </View>\n  )\n}\n\n// An address as the source `Image` takes. The compiler keeps the one it made\n// for as long as the address is the same, so a re-render hands the image the\n// object it already had.\nfunction sourceOf(uri: string): ImageSourcePropType {\n  return { uri }\n}\n\nexport type { MarkImageProps, MarkProps }\n\nexport { Mark }\n"],"mappings":"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"}

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":["ComponentRef","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 { ComponentRef, 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: ComponentRef<typeof View> | null) => void\n  readonly entries: () => readonly Entry[]\n  /** The layer the host draws its overlays in, for placing one in it. */\n  readonly layer: () => ComponentRef<typeof View> | null\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: ComponentRef<typeof View> | null = 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

@@ -1,7 +1,8 @@
 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 { StyleSheet, View } from "react-native";
+import { View } from "react-native";
 import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withDelay, withTiming } from "react-native-reanimated";
@@ -74,8 +75,8 @@ 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 $ = c(58);
+	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 +93,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();
@@ -213,7 +215,7 @@ function usePressFeedback(t0) {
 					y: disc / 2
 				});
 				phase.current = "shown";
-			} else if (rippled) {
+			} else if (rippled && typeof event_3.currentTarget !== "number") {
 				const { pageX, pageY } = event_3.nativeEvent;
 				phase.current = "measuring";
 				event_3.currentTarget.measure((_x, _y, width_0, height_0, left, top) => {
@@ -268,81 +270,79 @@ 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);
+		t12 = composeStyles(styles.surface, corners);
 		$[34] = corners;
 		$[35] = t12;
 	} else t12 = $[35];
 	const surface = t12;
-	let t13;
-	if ($[36] !== active || $[37] !== color || $[38] !== layerOpacity || $[39] !== pressed || $[40] !== pressedColor) {
-		t13 = StyleSheet.compose(styles.layer, {
-			backgroundColor: active && pressed ? pressedColor : color,
+	const t13 = interactive && pressed ? pressedColor : color;
+	let t14;
+	if ($[36] !== layerOpacity || $[37] !== t13) {
+		t14 = composeStyles(styles.layer, {
+			backgroundColor: t13,
 			opacity: layerOpacity
 		});
-		$[36] = active;
-		$[37] = color;
-		$[38] = layerOpacity;
-		$[39] = pressed;
-		$[40] = pressedColor;
-		$[41] = t13;
-	} else t13 = $[41];
-	const state = t13;
-	const t14 = active && hovered;
-	let t15;
-	if ($[42] !== state) {
-		t15 = /* @__PURE__ */ jsx(View, { style: state });
-		$[42] = state;
-		$[43] = t15;
-	} else t15 = $[43];
+		$[36] = layerOpacity;
+		$[37] = t13;
+		$[38] = t14;
+	} else t14 = $[38];
+	const state = t14;
+	const t15 = interactive && hovered;
 	let t16;
-	if ($[44] !== rippleMotion || $[45] !== rippled) {
-		t16 = rippled ? /* @__PURE__ */ jsx(Animated.View, { style: rippleMotion }) : null;
-		$[44] = rippleMotion;
-		$[45] = rippled;
-		$[46] = t16;
-	} else t16 = $[46];
+	if ($[39] !== state) {
+		t16 = /* @__PURE__ */ jsx(View, { style: state });
+		$[39] = state;
+		$[40] = t16;
+	} else t16 = $[40];
 	let t17;
-	if ($[47] !== surface || $[48] !== t15 || $[49] !== t16) {
-		t17 = /* @__PURE__ */ jsxs(View, {
+	if ($[41] !== rippleMotion || $[42] !== rippled) {
+		t17 = rippled ? /* @__PURE__ */ jsx(Animated.View, { style: rippleMotion }) : null;
+		$[41] = rippleMotion;
+		$[42] = rippled;
+		$[43] = t17;
+	} else t17 = $[43];
+	let t18;
+	if ($[44] !== surface || $[45] !== t16 || $[46] !== t17) {
+		t18 = /* @__PURE__ */ jsxs(View, {
 			accessibilityElementsHidden: true,
 			importantForAccessibility: "no-hide-descendants",
 			style: surface,
-			children: [t15, t16]
+			children: [t16, t17]
 		});
-		$[47] = surface;
-		$[48] = t15;
-		$[49] = t16;
-		$[50] = t17;
-	} else t17 = $[50];
-	const t18 = active && pressed;
-	let t19;
-	if ($[51] !== active || $[52] !== ringShown || $[53] !== theme) {
-		t19 = active && ringShown ? stylesOf(theme).ring : void 0;
-		$[51] = active;
-		$[52] = ringShown;
-		$[53] = theme;
-		$[54] = t19;
-	} else t19 = $[54];
+		$[44] = surface;
+		$[45] = t16;
+		$[46] = t17;
+		$[47] = t18;
+	} else t18 = $[47];
+	const t19 = interactive && pressed;
 	let t20;
-	if ($[55] !== handlers || $[56] !== t14 || $[57] !== t17 || $[58] !== t18 || $[59] !== t19) {
-		t20 = {
+	if ($[48] !== active || $[49] !== ringShown || $[50] !== theme) {
+		t20 = active && ringShown ? stylesOf(theme).ring : void 0;
+		$[48] = active;
+		$[49] = ringShown;
+		$[50] = theme;
+		$[51] = t20;
+	} else t20 = $[51];
+	let t21;
+	if ($[52] !== handlers || $[53] !== t15 || $[54] !== t18 || $[55] !== t19 || $[56] !== t20) {
+		t21 = {
 			handlers,
-			hovered: t14,
-			layer: t17,
-			pressed: t18,
-			ring: t19
+			hovered: t15,
+			layer: t18,
+			pressed: t19,
+			ring: t20
 		};
-		$[55] = handlers;
-		$[56] = t14;
-		$[57] = t17;
-		$[58] = t18;
-		$[59] = t19;
-		$[60] = t20;
-	} else t20 = $[60];
-	return t20;
+		$[52] = handlers;
+		$[53] = t15;
+		$[54] = t18;
+		$[55] = t19;
+		$[56] = t20;
+		$[57] = t21;
+	} else t21 = $[57];
+	return t21;
 }
 //#endregion
 export { hitSlop, usePressFeedback };

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","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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"}

package/dist/theme/resolve.js

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