@userflow-tech/react-native 0.1.1 → 0.2.0

package/lib/commonjs/authoring/chrome/ChromeBarTransition.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CHROME_BAR_EXIT_MS = exports.CHROME_BAR_ENTER_MS = void 0;
+exports.ChromeBarTransition = ChromeBarTransition;
+exports.useChromeBarMounted = useChromeBarMounted;
+var React = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/** Bars enter with web's `250ms` feel and leave a touch faster. */
+const CHROME_BAR_ENTER_MS = exports.CHROME_BAR_ENTER_MS = 220;
+const CHROME_BAR_EXIT_MS = exports.CHROME_BAR_EXIT_MS = 160;
+/**
+ * Slides + fades an authoring chrome bar on and off screen. The bar translates
+ * by its own measured height toward {@link ChromeBarTransitionProps.edge}, so it
+ * leaves fully off-screen instead of shrinking in place.
+ *
+ * This only drives the animation; the parent keeps the bar mounted across the
+ * exit with {@link useChromeBarMounted} and drops it once the exit has run.
+ */
+function ChromeBarTransition({
+  visible,
+  edge,
+  style,
+  pointerEvents,
+  children,
+  testID
+}) {
+  const progress = React.useRef(new _reactNative.Animated.Value(0)).current;
+  const [height, setHeight] = React.useState(0);
+  React.useEffect(() => {
+    // Pin the start point: a native-driven ramp is computed from the JS value,
+    // which the previous native animation left behind.
+    progress.setValue(visible ? 0 : 1);
+    const animation = _reactNative.Animated.timing(progress, {
+      toValue: visible ? 1 : 0,
+      duration: visible ? CHROME_BAR_ENTER_MS : CHROME_BAR_EXIT_MS,
+      useNativeDriver: true
+    });
+    animation.start();
+    return () => {
+      animation.stop();
+    };
+  }, [progress, visible]);
+  const onLayout = React.useCallback(event => {
+    const next = event.nativeEvent.layout.height;
+    setHeight(prev => Math.abs(prev - next) < 0.5 ? prev : next);
+  }, []);
+
+  // Until the bar is measured, fade only — the slide engages on the next frame
+  // once the height is known, while opacity is still near zero.
+  const transform = height > 0 ? [{
+    translateY: progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [edge === 'top' ? -height : height, 0]
+    })
+  }] : undefined;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    testID: testID,
+    pointerEvents: visible ? pointerEvents : 'none',
+    onLayout: onLayout,
+    style: [style, transform ? {
+      opacity: progress,
+      transform
+    } : {
+      opacity: progress
+    }],
+    children: children
+  });
+}
+
+/**
+ * Keeps a bar mounted while `visible` and for {@link CHROME_BAR_EXIT_MS} after
+ * it flips false, so {@link ChromeBarTransition} can run its exit before the
+ * parent drops it.
+ */
+function useChromeBarMounted(visible) {
+  const [mounted, setMounted] = React.useState(visible);
+  React.useEffect(() => {
+    if (visible) {
+      setMounted(true);
+      return;
+    }
+    const timer = setTimeout(() => setMounted(false), CHROME_BAR_EXIT_MS);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [visible]);
+  return mounted;
+}
+//# sourceMappingURL=ChromeBarTransition.js.map

package/lib/commonjs/authoring/chrome/ChromeBarTransition.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","CHROME_BAR_ENTER_MS","exports","CHROME_BAR_EXIT_MS","ChromeBarTransition","visible","edge","style","pointerEvents","children","testID","progress","useRef","Animated","Value","current","height","setHeight","useState","useEffect","setValue","animation","timing","toValue","duration","useNativeDriver","start","stop","onLayout","useCallback","event","next","nativeEvent","layout","prev","Math","abs","transform","translateY","interpolate","inputRange","outputRange","undefined","jsx","View","opacity","useChromeBarMounted","mounted","setMounted","timer","setTimeout","clearTimeout"],"sourceRoot":"../../../../src","sources":["authoring/chrome/ChromeBarTransition.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/authoring/chrome/ChromeBottomSheet.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChromeBottomSheet = ChromeBottomSheet;
+var React = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _safeArea = require("../../surfaces/safeArea.js");
+var _tokens = require("./tokens.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Full-bleed authoring bottom bar. Content is top-aligned; bottom padding
+ * includes the home-indicator inset.
+ */
+function ChromeBottomSheet({
+  children,
+  helperText,
+  onMeasureHeight,
+  testID = 'userflow-chrome-bottom-sheet'
+}) {
+  const insets = (0, _safeArea.useUserflowSafeAreaInsets)();
+  const onLayout = React.useCallback(event => {
+    onMeasureHeight?.(event.nativeEvent.layout.height);
+  }, [onMeasureHeight]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    testID: testID,
+    onLayout: onLayout,
+    style: [styles.bar, _tokens.chromeShadows.card, {
+      paddingBottom: _tokens.chromeSpace[24] + insets.bottom
+    }],
+    children: [helperText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [_tokens.chromeText.labelSmBold, styles.helper, {
+        color: _tokens.chromeColors.invertedText
+      }],
+      children: helperText
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.row,
+      children: children
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  bar: {
+    backgroundColor: _tokens.chromeColors.primaryText,
+    paddingTop: _tokens.chromeSpace[24],
+    paddingHorizontal: _tokens.chromeSpace[24],
+    gap: _tokens.chromeSpace[16]
+  },
+  helper: {
+    alignSelf: 'stretch',
+    textAlign: 'center'
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    justifyContent: 'center',
+    gap: _tokens.chromeSpace[8]
+  }
+});
+//# sourceMappingURL=ChromeBottomSheet.js.map

package/lib/commonjs/authoring/chrome/ChromeBottomSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_safeArea","_tokens","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ChromeBottomSheet","children","helperText","onMeasureHeight","testID","insets","useUserflowSafeAreaInsets","onLayout","useCallback","event","nativeEvent","layout","height","jsxs","View","style","styles","bar","chromeShadows","card","paddingBottom","chromeSpace","bottom","jsx","Text","chromeText","labelSmBold","helper","color","chromeColors","invertedText","row","StyleSheet","create","backgroundColor","primaryText","paddingTop","paddingHorizontal","gap","alignSelf","textAlign","flexDirection","flexWrap","alignItems","justifyContent"],"sourceRoot":"../../../../src","sources":["authoring/chrome/ChromeBottomSheet.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/authoring/chrome/ChromeButton.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChromeButton = ChromeButton;
+var React = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _ChromeIcon = require("./ChromeIcon.js");
+var _tokens = require("./tokens.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Pill button. `primary` / `secondary` take an optional leading icon;
+ * `icon` is the 40×40 circular control used in the preview top bar.
+ */
+function ChromeButton({
+  variant = 'primary',
+  label,
+  icon,
+  onPress,
+  disabled = false,
+  accessibilityLabel,
+  testID,
+  flex = false
+}) {
+  const iconOnly = variant === 'icon';
+  const tint = variant === 'primary' ? _tokens.chromeColors.invertedText : _tokens.chromeColors.blue500;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel,
+    disabled: disabled,
+    onPress: onPress,
+    testID: testID,
+    style: ({
+      pressed
+    }) => [iconOnly ? styles.icon : styles.pill, variant === 'primary' ? styles.primary : styles.secondary, variant === 'primary' ? _tokens.chromeShadows.button : _tokens.chromeShadows.buttonSubtle, flex ? styles.flex : null, {
+      opacity: disabled ? 0.5 : pressed ? 0.75 : 1
+    }],
+    children: [icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.iconWrap,
+      pointerEvents: "none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChromeIcon.ChromeIcon, {
+        name: icon,
+        tintColor: tint,
+        size: 16
+      })
+    }) : null, label && !iconOnly ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      numberOfLines: 1,
+      style: [_tokens.chromeText.buttonLabel, styles.label, {
+        color: tint
+      }],
+      children: label
+    }) : null]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  pill: {
+    flexDirection: 'row',
+    flexShrink: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: _tokens.chromeSpace[8],
+    paddingHorizontal: _tokens.chromeSpace[24],
+    paddingVertical: _tokens.chromeSpace[12],
+    borderRadius: _tokens.chromeRadius.fullyRounded
+  },
+  label: {
+    flexShrink: 1
+  },
+  icon: {
+    width: 40,
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: _tokens.chromeRadius.fullyRounded
+  },
+  primary: {
+    backgroundColor: _tokens.chromeColors.blue500
+  },
+  secondary: {
+    backgroundColor: _tokens.chromeColors.white,
+    borderWidth: 1,
+    borderColor: _tokens.chromeColors.blue500
+  },
+  flex: {
+    flex: 1
+  },
+  iconWrap: {
+    width: 16,
+    height: 16
+  }
+});
+//# sourceMappingURL=ChromeButton.js.map

package/lib/commonjs/authoring/chrome/ChromeButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_ChromeIcon","_tokens","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ChromeButton","variant","label","icon","onPress","disabled","accessibilityLabel","testID","flex","iconOnly","tint","chromeColors","invertedText","blue500","jsxs","Pressable","accessibilityRole","style","pressed","styles","pill","primary","secondary","chromeShadows","button","buttonSubtle","opacity","children","jsx","View","iconWrap","pointerEvents","ChromeIcon","name","tintColor","size","Text","numberOfLines","chromeText","buttonLabel","color","StyleSheet","create","flexDirection","flexShrink","alignItems","justifyContent","gap","chromeSpace","paddingHorizontal","paddingVertical","borderRadius","chromeRadius","fullyRounded","width","height","backgroundColor","white","borderWidth","borderColor"],"sourceRoot":"../../../../src","sources":["authoring/chrome/ChromeButton.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/authoring/chrome/ChromeDialog.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChromeDialog = ChromeDialog;
+var React = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _absoluteFill = require("../../surfaces/absoluteFill.js");
+var _ChromeIcon = require("./ChromeIcon.js");
+var _tokens = require("./tokens.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Centered authoring dialog with scrim, header, body, footer slot, and close.
+ * Footer `children` are typically a pair of `ChromeButton`s with `flex`.
+ */
+function ChromeDialog({
+  title,
+  body,
+  onClose,
+  children,
+  testID = 'userflow-chrome-dialog'
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    accessibilityViewIsModal: true,
+    pointerEvents: "auto",
+    style: styles.root,
+    testID: testID,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: "Dismiss",
+      onPress: onClose,
+      style: styles.scrim,
+      testID: "userflow-chrome-dialog-scrim"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      pointerEvents: "box-none",
+      style: styles.cardSlot,
+      testID: "userflow-chrome-dialog-card-slot",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [styles.card, _tokens.chromeShadows.dialog],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.header,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [_tokens.chromeText.dialogTitle, {
+              color: _tokens.chromeColors.primaryText
+            }],
+            children: title
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.body,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [_tokens.chromeText.dialogBody, {
+              color: _tokens.chromeColors.primaryText
+            }],
+            children: body
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.footer,
+          children: children
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          accessibilityRole: "button",
+          accessibilityLabel: "Close",
+          hitSlop: 8,
+          onPress: onClose,
+          style: styles.close,
+          testID: "userflow-chrome-dialog-close",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChromeIcon.ChromeIcon, {
+            name: "xmark",
+            size: 14,
+            tintColor: _tokens.chromeColors.primaryText
+          })
+        })]
+      })
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  root: {
+    ..._absoluteFill.ABSOLUTE_FILL,
+    alignItems: 'center',
+    // Vertically centered — Figma's y:444 on the Pro Max frame is a snap to the
+    // example element, not a placement spec.
+    justifyContent: 'center'
+  },
+  scrim: {
+    ..._absoluteFill.ABSOLUTE_FILL,
+    backgroundColor: _tokens.chromeColors.overlay
+  },
+  cardSlot: {
+    alignSelf: 'stretch',
+    paddingHorizontal: _tokens.chromeSpace[24]
+  },
+  card: {
+    width: '100%',
+    maxWidth: 382,
+    alignSelf: 'center',
+    backgroundColor: _tokens.chromeColors.bgMiddle,
+    borderRadius: _tokens.chromeRadius.lg
+  },
+  header: {
+    paddingTop: _tokens.chromeSpace[24],
+    paddingHorizontal: _tokens.chromeSpace[24],
+    paddingBottom: _tokens.chromeSpace[16],
+    paddingRight: _tokens.chromeSpace[24] + 16
+  },
+  body: {
+    paddingHorizontal: _tokens.chromeSpace[24],
+    paddingVertical: _tokens.chromeSpace[8]
+  },
+  footer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: _tokens.chromeSpace[8],
+    paddingTop: _tokens.chromeSpace[16],
+    paddingHorizontal: _tokens.chromeSpace[24],
+    paddingBottom: _tokens.chromeSpace[24]
+  },
+  close: {
+    position: 'absolute',
+    top: _tokens.chromeSpace[8],
+    right: _tokens.chromeSpace[8],
+    width: 32,
+    height: 32,
+    borderRadius: _tokens.chromeRadius.md,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+//# sourceMappingURL=ChromeDialog.js.map

package/lib/commonjs/authoring/chrome/ChromeDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_absoluteFill","_ChromeIcon","_tokens","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ChromeDialog","title","body","onClose","children","testID","jsxs","View","accessibilityViewIsModal","pointerEvents","style","styles","root","jsx","Pressable","accessibilityRole","accessibilityLabel","onPress","scrim","cardSlot","card","chromeShadows","dialog","header","Text","chromeText","dialogTitle","color","chromeColors","primaryText","dialogBody","footer","hitSlop","close","ChromeIcon","name","size","tintColor","StyleSheet","create","ABSOLUTE_FILL","alignItems","justifyContent","backgroundColor","overlay","alignSelf","paddingHorizontal","chromeSpace","width","maxWidth","bgMiddle","borderRadius","chromeRadius","lg","paddingTop","paddingBottom","paddingRight","paddingVertical","flexDirection","gap","position","top","right","height","md"],"sourceRoot":"../../../../src","sources":["authoring/chrome/ChromeDialog.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/authoring/chrome/ChromeIcon.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChromeIcon = ChromeIcon;
+var React = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _arrowLeftFromBracket = _interopRequireDefault(require("./icons/arrow-left-from-bracket.png"));
+var _arrowRotateLeft = _interopRequireDefault(require("./icons/arrow-rotate-left.png"));
+var _xmark = _interopRequireDefault(require("./icons/xmark.png"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const SOURCES = {
+  'arrow-left-from-bracket': _arrowLeftFromBracket.default,
+  'arrow-rotate-left': _arrowRotateLeft.default,
+  xmark: _xmark.default
+};
+/** Monochrome PNG glyph tinted via `tintColor` (white source assets). */
+function ChromeIcon({
+  name,
+  tintColor,
+  size = 16,
+  style,
+  testID
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+    accessibilityIgnoresInvertColors: true,
+    source: SOURCES[name],
+    style: [{
+      width: size,
+      height: size,
+      tintColor
+    }, style],
+    testID: testID
+  });
+}
+//# sourceMappingURL=ChromeIcon.js.map

package/lib/commonjs/authoring/chrome/ChromeIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_arrowLeftFromBracket","_interopRequireDefault","_arrowRotateLeft","_xmark","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SOURCES","arrowLeftFromBracket","arrowRotateLeft","xmark","ChromeIcon","name","tintColor","size","style","testID","jsx","Image","accessibilityIgnoresInvertColors","source","width","height"],"sourceRoot":"../../../../src","sources":["authoring/chrome/ChromeIcon.tsx"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,qBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,gBAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,MAAA,GAAAF,sBAAA,CAAAH,OAAA;AAAsC,IAAAM,WAAA,GAAAN,OAAA;AAAA,SAAAG,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAR,wBAAAQ,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAZ,uBAAA,YAAAA,CAAAQ,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAItC,MAAMgB,OAAuC,GAAG;EAC9C,yBAAyB,EAAEC,6BAAoB;EAC/C,mBAAmB,EAAEC,wBAAe;EACpCC,KAAK,EAALA;AACF,CAAC;AAUD;AACO,SAASC,UAAUA,CAAC;EACzBC,IAAI;EACJC,SAAS;EACTC,IAAI,GAAG,EAAE;EACTC,KAAK;EACLC;AACe,CAAC,EAAsB;EACtC,oBACE,IAAA7B,WAAA,CAAA8B,GAAA,EAACnC,YAAA,CAAAoC,KAAK;IACJC,gCAAgC;IAChCC,MAAM,EAAEb,OAAO,CAACK,IAAI,CAAE;IACtBG,KAAK,EAAE,CAAC;MAAEM,KAAK,EAAEP,IAAI;MAAEQ,MAAM,EAAER,IAAI;MAAED;IAAU,CAAC,EAAEE,KAAK,CAAE;IACzDC,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN","ignoreList":[]}

package/lib/commonjs/authoring/chrome/ChromeTooltip.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CHROME_TOOLTIP_NOTCH_SIZE = exports.CHROME_TOOLTIP_DEFAULT_DURATION_MS = void 0;
+exports.ChromeTooltip = ChromeTooltip;
+var React = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _TooltipNotch = require("../../surfaces/tooltip/TooltipNotch.js");
+var _tokens = require("./tokens.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const CHROME_TOOLTIP_NOTCH_SIZE = exports.CHROME_TOOLTIP_NOTCH_SIZE = 8;
+const CHROME_TOOLTIP_DEFAULT_DURATION_MS = exports.CHROME_TOOLTIP_DEFAULT_DURATION_MS = 5000;
+/**
+ * Onboarding bubble with an upward notch. Pointer-events none so it does not
+ * steal the double-tap that shows/hides authoring chrome.
+ */
+function ChromeTooltip({
+  children,
+  visible = true,
+  durationMs = CHROME_TOOLTIP_DEFAULT_DURATION_MS,
+  onDismiss,
+  testID = 'userflow-chrome-tooltip'
+}) {
+  const [dismissed, setDismissed] = React.useState(false);
+  const onDismissRef = React.useRef(onDismiss);
+  onDismissRef.current = onDismiss;
+  React.useEffect(() => {
+    if (!visible) {
+      setDismissed(false);
+      return;
+    }
+    if (durationMs <= 0) return;
+    const id = setTimeout(() => {
+      setDismissed(true);
+      onDismissRef.current?.();
+    }, durationMs);
+    return () => {
+      clearTimeout(id);
+    };
+  }, [visible, durationMs]);
+  if (!visible || dismissed) return null;
+  const diamond = (0, _TooltipNotch.tooltipNotchDiamondSide)(CHROME_TOOLTIP_NOTCH_SIZE);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    pointerEvents: "none",
+    style: styles.root,
+    testID: testID,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.notchClip,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipNotch.TooltipNotch, {
+        left: (16 - diamond) / 2,
+        notchColor: _tokens.chromeColors.primaryText,
+        notchSize: CHROME_TOOLTIP_NOTCH_SIZE,
+        top: CHROME_TOOLTIP_NOTCH_SIZE - diamond / 2
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.bubble, _tokens.chromeShadows.tooltip],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [_tokens.chromeText.tooltip, {
+          color: _tokens.chromeColors.invertedText
+        }],
+        children: children
+      })
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  root: {
+    alignItems: 'center',
+    maxWidth: 300
+  },
+  notchClip: {
+    width: 16,
+    height: CHROME_TOOLTIP_NOTCH_SIZE,
+    overflow: 'hidden',
+    marginBottom: -1,
+    position: 'relative'
+  },
+  bubble: {
+    backgroundColor: _tokens.chromeColors.primaryText,
+    borderRadius: _tokens.chromeRadius.lg,
+    padding: _tokens.chromeSpace[12],
+    maxWidth: 300
+  }
+});
+//# sourceMappingURL=ChromeTooltip.js.map

package/lib/commonjs/authoring/chrome/ChromeTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_TooltipNotch","_tokens","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","CHROME_TOOLTIP_NOTCH_SIZE","exports","CHROME_TOOLTIP_DEFAULT_DURATION_MS","ChromeTooltip","children","visible","durationMs","onDismiss","testID","dismissed","setDismissed","useState","onDismissRef","useRef","current","useEffect","id","setTimeout","clearTimeout","diamond","tooltipNotchDiamondSide","jsxs","View","pointerEvents","style","styles","root","jsx","notchClip","TooltipNotch","left","notchColor","chromeColors","primaryText","notchSize","top","bubble","chromeShadows","tooltip","Text","chromeText","color","invertedText","StyleSheet","create","alignItems","maxWidth","width","height","overflow","marginBottom","position","backgroundColor","borderRadius","chromeRadius","lg","padding","chromeSpace"],"sourceRoot":"../../../../src","sources":["authoring/chrome/ChromeTooltip.tsx"],"mappings":";;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,aAAA,GAAAF,OAAA;AAEA,IAAAG,OAAA,GAAAH,OAAA;AAA8F,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,wBAAAM,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAR,uBAAA,YAAAA,CAAAM,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAEvF,MAAMkB,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAG,CAAC;AACnC,MAAME,kCAAkC,GAAAD,OAAA,CAAAC,kCAAA,GAAG,IAAI;AAWtD;AACA;AACA;AACA;AACO,SAASC,aAAaA,CAAC;EAC5BC,QAAQ;EACRC,OAAO,GAAG,IAAI;EACdC,UAAU,GAAGJ,kCAAkC;EAC/CK,SAAS;EACTC,MAAM,GAAG;AACS,CAAC,EAA6B;EAChD,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGpC,KAAK,CAACqC,QAAQ,CAAC,KAAK,CAAC;EACvD,MAAMC,YAAY,GAAGtC,KAAK,CAACuC,MAAM,CAACN,SAAS,CAAC;EAC5CK,YAAY,CAACE,OAAO,GAAGP,SAAS;EAEhCjC,KAAK,CAACyC,SAAS,CAAC,MAAM;IACpB,IAAI,CAACV,OAAO,EAAE;MACZK,YAAY,CAAC,KAAK,CAAC;MACnB;IACF;IACA,IAAIJ,UAAU,IAAI,CAAC,EAAE;IACrB,MAAMU,EAAE,GAAGC,UAAU,CAAC,MAAM;MAC1BP,YAAY,CAAC,IAAI,CAAC;MAClBE,YAAY,CAACE,OAAO,GAAG,CAAC;IAC1B,CAAC,EAAER,UAAU,CAAC;IACd,OAAO,MAAM;MACXY,YAAY,CAACF,EAAE,CAAC;IAClB,CAAC;EACH,CAAC,EAAE,CAACX,OAAO,EAAEC,UAAU,CAAC,CAAC;EAEzB,IAAI,CAACD,OAAO,IAAII,SAAS,EAAE,OAAO,IAAI;EAEtC,MAAMU,OAAO,GAAG,IAAAC,qCAAuB,EAACpB,yBAAyB,CAAC;EAElE,oBACE,IAAApB,WAAA,CAAAyC,IAAA,EAAC5C,YAAA,CAAA6C,IAAI;IAACC,aAAa,EAAC,MAAM;IAACC,KAAK,EAAEC,MAAM,CAACC,IAAK;IAAClB,MAAM,EAAEA,MAAO;IAAAJ,QAAA,gBAC5D,IAAAxB,WAAA,CAAA+C,GAAA,EAAClD,YAAA,CAAA6C,IAAI;MAACE,KAAK,EAAEC,MAAM,CAACG,SAAU;MAAAxB,QAAA,eAC5B,IAAAxB,WAAA,CAAA+C,GAAA,EAACjD,aAAA,CAAAmD,YAAY;QACXC,IAAI,EAAE,CAAC,EAAE,GAAGX,OAAO,IAAI,CAAE;QACzBY,UAAU,EAAEC,oBAAY,CAACC,WAAY;QACrCC,SAAS,EAAElC,yBAA0B;QACrCmC,GAAG,EAAEnC,yBAAyB,GAAGmB,OAAO,GAAG;MAAE,CAC9C;IAAC,CACE,CAAC,eACP,IAAAvC,WAAA,CAAA+C,GAAA,EAAClD,YAAA,CAAA6C,IAAI;MAACE,KAAK,EAAE,CAACC,MAAM,CAACW,MAAM,EAAEC,qBAAa,CAACC,OAAO,CAAE;MAAAlC,QAAA,eAClD,IAAAxB,WAAA,CAAA+C,GAAA,EAAClD,YAAA,CAAA8D,IAAI;QAACf,KAAK,EAAE,CAACgB,kBAAU,CAACF,OAAO,EAAE;UAAEG,KAAK,EAAET,oBAAY,CAACU;QAAa,CAAC,CAAE;QAAAtC,QAAA,EAAEA;MAAQ,CAAO;IAAC,CACtF,CAAC;EAAA,CACH,CAAC;AAEX;AAEA,MAAMqB,MAAM,GAAGkB,uBAAU,CAACC,MAAM,CAAC;EAC/BlB,IAAI,EAAE;IACJmB,UAAU,EAAE,QAAQ;IACpBC,QAAQ,EAAE;EACZ,CAAC;EACDlB,SAAS,EAAE;IACTmB,KAAK,EAAE,EAAE;IACTC,MAAM,EAAEhD,yBAAyB;IACjCiD,QAAQ,EAAE,QAAQ;IAClBC,YAAY,EAAE,CAAC,CAAC;IAChBC,QAAQ,EAAE;EACZ,CAAC;EACDf,MAAM,EAAE;IACNgB,eAAe,EAAEpB,oBAAY,CAACC,WAAW;IACzCoB,YAAY,EAAEC,oBAAY,CAACC,EAAE;IAC7BC,OAAO,EAAEC,mBAAW,CAAC,EAAE,CAAC;IACxBX,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC","ignoreList":[]}