@userflow-tech/react-native 0.1.1 → 0.3.0

package/lib/module/authoring/capturePickerScreenshot.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Dimensions","MAX_CAPTURE_WIDTH","MISSING_VIEW_SHOT_WARNING","didWarnMissingViewShot","warnMissingViewShot","__DEV__","console","warn","loadViewShot","require","capturePickerScreenshot","rect","viewShot","captureScreen","window","get","winW","width","winH","height","captureWidth","Math","min","round","captureHeight","max","dataUrl","format","quality","result","length","sx","sy","targetX1","x","targetY1","y","targetX2","targetY2","resetViewShotWarningForTests"],"sourceRoot":"../../../src","sources":["authoring/capturePickerScreenshot.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AAKzC,MAAMC,iBAAiB,GAAG,GAAG;AAE7B,MAAMC,yBAAyB,GAC7B,oEAAoE,GACpE,0FAA0F;AAY5F,IAAIC,sBAAsB,GAAG,KAAK;AAElC,SAASC,mBAAmBA,CAAA,EAAS;EACnC,IAAID,sBAAsB,EAAE;EAC5BA,sBAAsB,GAAG,IAAI;EAC7B,IAAIE,OAAO,EAAE;IACX;IACAC,OAAO,CAACC,IAAI,CAACL,yBAAyB,CAAC;EACzC;AACF;AAEA,SAASM,YAAYA,CAAA,EAA0B;EAC7C,IAAI;IACF;IACA;IACA,OAAOC,OAAO,CAAC,wBAAwB,CAAC;EAC1C,CAAC,CAAC,MAAM;IACNL,mBAAmB,CAAC,CAAC;IACrB,OAAO,IAAI;EACb;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,eAAeM,uBAAuBA,CAC3CC,IAAa,EAC4B;EACzC,MAAMC,QAAQ,GAAGJ,YAAY,CAAC,CAAC;EAC/B,IAAI,CAACI,QAAQ,EAAEC,aAAa,EAAE,OAAO,IAAI;EAEzC,IAAI;IACF,MAAMC,MAAM,GAAGd,UAAU,CAACe,GAAG,CAAC,QAAQ,CAAC;IACvC,MAAMC,IAAI,GAAGF,MAAM,CAACG,KAAK,IAAI,CAAC;IAC9B,MAAMC,IAAI,GAAGJ,MAAM,CAACK,MAAM,IAAI,CAAC;IAC/B,MAAMC,YAAY,GAAGC,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,KAAK,CAACP,IAAI,CAAC,EAAEf,iBAAiB,CAAC;IAClE,MAAMuB,aAAa,GAAGH,IAAI,CAACI,GAAG,CAAC,CAAC,EAAEJ,IAAI,CAACE,KAAK,CAACL,IAAI,IAAIE,YAAY,GAAGJ,IAAI,CAAC,CAAC,CAAC;IAE3E,MAAMU,OAAO,GAAG,MAAMd,QAAQ,CAACC,aAAa,CAAC;MAC3Cc,MAAM,EAAE,KAAK;MACbC,OAAO,EAAE,IAAI;MACbC,MAAM,EAAE,UAAU;MAClBZ,KAAK,EAAEG,YAAY;MACnBD,MAAM,EAAEK;IACV,CAAC,CAAC;IACF,IAAI,OAAOE,OAAO,KAAK,QAAQ,IAAIA,OAAO,CAACI,MAAM,KAAK,CAAC,EAAE,OAAO,IAAI;IAEpE,MAAMC,EAAE,GAAGX,YAAY,GAAGJ,IAAI;IAC9B,MAAMgB,EAAE,GAAGR,aAAa,GAAGN,IAAI;IAC/B,OAAO;MACLQ,OAAO;MACPT,KAAK,EAAEG,YAAY;MACnBD,MAAM,EAAEK,aAAa;MACrBS,QAAQ,EAAEZ,IAAI,CAACE,KAAK,CAACZ,IAAI,CAACuB,CAAC,GAAGH,EAAE,CAAC;MACjCI,QAAQ,EAAEd,IAAI,CAACE,KAAK,CAACZ,IAAI,CAACyB,CAAC,GAAGJ,EAAE,CAAC;MACjCK,QAAQ,EAAEhB,IAAI,CAACE,KAAK,CAAC,CAACZ,IAAI,CAACuB,CAAC,GAAGvB,IAAI,CAACM,KAAK,IAAIc,EAAE,CAAC;MAChDO,QAAQ,EAAEjB,IAAI,CAACE,KAAK,CAAC,CAACZ,IAAI,CAACyB,CAAC,GAAGzB,IAAI,CAACQ,MAAM,IAAIa,EAAE;IAClD,CAAC;EACH,CAAC,CAAC,MAAM;IACN,OAAO,IAAI;EACb;AACF;;AAEA;AACA,OAAO,SAASO,4BAA4BA,CAAA,EAAS;EACnDpC,sBAAsB,GAAG,KAAK;AAChC","ignoreList":[]}

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

@@ -0,0 +1,88 @@
+"use strict";
+
+import * as React from 'react';
+import { Animated } from 'react-native';
+
+/** Bars enter with web's `250ms` feel and leave a touch faster. */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CHROME_BAR_ENTER_MS = 220;
+export const 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.
+ */
+export function ChromeBarTransition({
+  visible,
+  edge,
+  style,
+  pointerEvents,
+  children,
+  testID
+}) {
+  const progress = React.useRef(new 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 = 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__*/_jsx(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.
+ */
+export 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/module/authoring/chrome/ChromeBarTransition.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Animated","jsx","_jsx","CHROME_BAR_ENTER_MS","CHROME_BAR_EXIT_MS","ChromeBarTransition","visible","edge","style","pointerEvents","children","testID","progress","useRef","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","View","opacity","useChromeBarMounted","mounted","setMounted","timer","setTimeout","clearTimeout"],"sourceRoot":"../../../../src","sources":["authoring/chrome/ChromeBarTransition.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,81 @@
+"use strict";
+
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useUserflowSafeAreaInsets } from "../../surfaces/safeArea.js";
+import { ChromeIcon } from "./ChromeIcon.js";
+import { chromeColors, chromeShadows, chromeSpace, chromeText } from "./tokens.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Full-bleed authoring bottom bar. Content is top-aligned.
+ *
+ * On the Pro Max reference the actions end 48pt above the screen edge: 14pt
+ * above the 34pt home indicator. Without a bottom inset (iPhone 8, Android
+ * button nav) the bar falls back to its 24pt top padding so it stays balanced.
+ */
+export function ChromeBottomSheet({
+  children,
+  helperText,
+  helperIcon,
+  tone = 'default',
+  onMeasureHeight,
+  testID = 'userflow-chrome-bottom-sheet'
+}) {
+  const insets = useUserflowSafeAreaInsets();
+  const onLayout = React.useCallback(event => {
+    onMeasureHeight?.(event.nativeEvent.layout.height);
+  }, [onMeasureHeight]);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    onLayout: onLayout,
+    style: [styles.bar, chromeShadows.card, {
+      backgroundColor: tone === 'error' ? chromeColors.danger : chromeColors.primaryText,
+      paddingBottom: Math.max(chromeSpace[24], insets.bottom + GAP_ABOVE_HOME_INDICATOR)
+    }],
+    children: [helperText ? /*#__PURE__*/_jsxs(View, {
+      style: styles.helperRow,
+      children: [helperIcon ? /*#__PURE__*/_jsx(ChromeIcon, {
+        name: helperIcon.name,
+        size: 16,
+        testID: "userflow-chrome-bottom-sheet-icon",
+        tintColor: helperIcon.tintColor
+      }) : null, /*#__PURE__*/_jsx(Text, {
+        style: [chromeText.labelSmBold, styles.helper, {
+          color: chromeColors.invertedText
+        }],
+        children: helperText
+      })]
+    }) : null, /*#__PURE__*/_jsx(View, {
+      style: styles.row,
+      children: children
+    })]
+  });
+}
+const GAP_ABOVE_HOME_INDICATOR = 14;
+const styles = StyleSheet.create({
+  bar: {
+    paddingTop: chromeSpace[24],
+    paddingHorizontal: chromeSpace[24],
+    gap: chromeSpace[16]
+  },
+  helperRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    alignSelf: 'stretch',
+    gap: chromeSpace[8]
+  },
+  helper: {
+    flex: 1,
+    flexShrink: 1,
+    textAlign: 'center'
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    justifyContent: 'center',
+    gap: chromeSpace[8]
+  }
+});
+//# sourceMappingURL=ChromeBottomSheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","Text","View","useUserflowSafeAreaInsets","ChromeIcon","chromeColors","chromeShadows","chromeSpace","chromeText","jsx","_jsx","jsxs","_jsxs","ChromeBottomSheet","children","helperText","helperIcon","tone","onMeasureHeight","testID","insets","onLayout","useCallback","event","nativeEvent","layout","height","style","styles","bar","card","backgroundColor","danger","primaryText","paddingBottom","Math","max","bottom","GAP_ABOVE_HOME_INDICATOR","helperRow","name","size","tintColor","labelSmBold","helper","color","invertedText","row","create","paddingTop","paddingHorizontal","gap","flexDirection","alignItems","alignSelf","flex","flexShrink","textAlign","flexWrap","justifyContent"],"sourceRoot":"../../../../src","sources":["authoring/chrome/ChromeBottomSheet.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,94 @@
+"use strict";
+
+import * as React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { ChromeIcon } from "./ChromeIcon.js";
+import { chromeColors, chromeRadius, chromeShadows, chromeSpace, chromeText } from "./tokens.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Pill button. `primary` / `secondary` take an optional leading icon;
+ * `icon` is the 40×40 circular control used in the preview top bar.
+ */
+export function ChromeButton({
+  variant = 'primary',
+  label,
+  icon,
+  onPress,
+  disabled = false,
+  accessibilityLabel,
+  testID,
+  flex = false
+}) {
+  const iconOnly = variant === 'icon';
+  const primary = variant === 'primary';
+  const disabledPrimary = disabled && primary;
+  const tint = primary ? chromeColors.invertedText : chromeColors.blue500;
+  return /*#__PURE__*/_jsxs(Pressable, {
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel,
+    disabled: disabled,
+    onPress: onPress,
+    testID: testID,
+    style: ({
+      pressed
+    }) => [iconOnly ? styles.icon : styles.pill, disabledPrimary ? styles.disabled : primary ? styles.primary : styles.secondary, disabledPrimary ? null : primary ? chromeShadows.button : chromeShadows.buttonSubtle, flex ? styles.flex : null, {
+      opacity: disabledPrimary ? 1 : disabled ? 0.5 : pressed ? 0.75 : 1
+    }],
+    children: [icon ? /*#__PURE__*/_jsx(View, {
+      style: styles.iconWrap,
+      pointerEvents: "none",
+      children: /*#__PURE__*/_jsx(ChromeIcon, {
+        name: icon,
+        tintColor: tint,
+        size: 16
+      })
+    }) : null, label && !iconOnly ? /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      style: [chromeText.buttonLabel, styles.label, {
+        color: tint
+      }],
+      children: label
+    }) : null]
+  });
+}
+const styles = StyleSheet.create({
+  pill: {
+    flexDirection: 'row',
+    flexShrink: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: chromeSpace[8],
+    paddingHorizontal: chromeSpace[24],
+    paddingVertical: chromeSpace[12],
+    borderRadius: chromeRadius.fullyRounded
+  },
+  label: {
+    flexShrink: 1
+  },
+  icon: {
+    width: 40,
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: chromeRadius.fullyRounded
+  },
+  primary: {
+    backgroundColor: chromeColors.blue500
+  },
+  disabled: {
+    backgroundColor: chromeColors.disabledFill
+  },
+  secondary: {
+    backgroundColor: chromeColors.white,
+    borderWidth: 1,
+    borderColor: chromeColors.blue500
+  },
+  flex: {
+    flex: 1
+  },
+  iconWrap: {
+    width: 16,
+    height: 16
+  }
+});
+//# sourceMappingURL=ChromeButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Pressable","StyleSheet","Text","View","ChromeIcon","chromeColors","chromeRadius","chromeShadows","chromeSpace","chromeText","jsx","_jsx","jsxs","_jsxs","ChromeButton","variant","label","icon","onPress","disabled","accessibilityLabel","testID","flex","iconOnly","primary","disabledPrimary","tint","invertedText","blue500","accessibilityRole","style","pressed","styles","pill","secondary","button","buttonSubtle","opacity","children","iconWrap","pointerEvents","name","tintColor","size","numberOfLines","buttonLabel","color","create","flexDirection","flexShrink","alignItems","justifyContent","gap","paddingHorizontal","paddingVertical","borderRadius","fullyRounded","width","height","backgroundColor","disabledFill","white","borderWidth","borderColor"],"sourceRoot":"../../../../src","sources":["authoring/chrome/ChromeButton.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,126 @@
+"use strict";
+
+import * as React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { ABSOLUTE_FILL } from "../../surfaces/absoluteFill.js";
+import { ChromeIcon } from "./ChromeIcon.js";
+import { chromeColors, chromeRadius, chromeShadows, chromeSpace, chromeText } from "./tokens.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Centered authoring dialog with scrim, header, body, footer slot, and close.
+ * Footer `children` are typically a pair of `ChromeButton`s with `flex`.
+ */
+export function ChromeDialog({
+  title,
+  body,
+  onClose,
+  children,
+  testID = 'userflow-chrome-dialog'
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    accessibilityViewIsModal: true,
+    pointerEvents: "auto",
+    style: styles.root,
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: "Dismiss",
+      onPress: onClose,
+      style: styles.scrim,
+      testID: "userflow-chrome-dialog-scrim"
+    }), /*#__PURE__*/_jsx(View, {
+      pointerEvents: "box-none",
+      style: styles.cardSlot,
+      testID: "userflow-chrome-dialog-card-slot",
+      children: /*#__PURE__*/_jsxs(View, {
+        style: [styles.card, chromeShadows.dialog],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.header,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [chromeText.dialogTitle, {
+              color: chromeColors.primaryText
+            }],
+            children: title
+          })
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.body,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [chromeText.dialogBody, {
+              color: chromeColors.primaryText
+            }],
+            children: body
+          })
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.footer,
+          children: children
+        }), /*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "button",
+          accessibilityLabel: "Close",
+          hitSlop: 8,
+          onPress: onClose,
+          style: styles.close,
+          testID: "userflow-chrome-dialog-close",
+          children: /*#__PURE__*/_jsx(ChromeIcon, {
+            name: "xmark",
+            size: 14,
+            tintColor: chromeColors.primaryText
+          })
+        })]
+      })
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  root: {
+    ...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: {
+    ...ABSOLUTE_FILL,
+    backgroundColor: chromeColors.overlay
+  },
+  cardSlot: {
+    alignSelf: 'stretch',
+    paddingHorizontal: chromeSpace[24]
+  },
+  card: {
+    width: '100%',
+    maxWidth: 382,
+    alignSelf: 'center',
+    backgroundColor: chromeColors.bgMiddle,
+    borderRadius: chromeRadius.lg
+  },
+  header: {
+    paddingTop: chromeSpace[24],
+    paddingHorizontal: chromeSpace[24],
+    paddingBottom: chromeSpace[16],
+    paddingRight: chromeSpace[24] + 16
+  },
+  body: {
+    paddingHorizontal: chromeSpace[24],
+    paddingVertical: chromeSpace[8]
+  },
+  footer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: chromeSpace[8],
+    paddingTop: chromeSpace[16],
+    paddingHorizontal: chromeSpace[24],
+    paddingBottom: chromeSpace[24]
+  },
+  close: {
+    position: 'absolute',
+    top: chromeSpace[8],
+    right: chromeSpace[8],
+    width: 32,
+    height: 32,
+    borderRadius: chromeRadius.md,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+//# sourceMappingURL=ChromeDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Pressable","StyleSheet","Text","View","ABSOLUTE_FILL","ChromeIcon","chromeColors","chromeRadius","chromeShadows","chromeSpace","chromeText","jsx","_jsx","jsxs","_jsxs","ChromeDialog","title","body","onClose","children","testID","accessibilityViewIsModal","pointerEvents","style","styles","root","accessibilityRole","accessibilityLabel","onPress","scrim","cardSlot","card","dialog","header","dialogTitle","color","primaryText","dialogBody","footer","hitSlop","close","name","size","tintColor","create","alignItems","justifyContent","backgroundColor","overlay","alignSelf","paddingHorizontal","width","maxWidth","bgMiddle","borderRadius","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/module/authoring/chrome/ChromeIcon.js

@@ -0,0 +1,37 @@
+"use strict";
+
+import * as React from 'react';
+import { Image } from 'react-native';
+import arrowLeftFromBracket from './icons/arrow-left-from-bracket.png';
+import arrowRotateLeft from './icons/arrow-rotate-left.png';
+import circleExclamation from './icons/circle-exclamation.png';
+import triangleExclamation from './icons/triangle-exclamation.png';
+import xmark from './icons/xmark.png';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SOURCES = {
+  'arrow-left-from-bracket': arrowLeftFromBracket,
+  'arrow-rotate-left': arrowRotateLeft,
+  'circle-exclamation': circleExclamation,
+  'triangle-exclamation': triangleExclamation,
+  xmark
+};
+/** Monochrome PNG glyph tinted via `tintColor` (white source assets). */
+export function ChromeIcon({
+  name,
+  tintColor,
+  size = 16,
+  style,
+  testID
+}) {
+  return /*#__PURE__*/_jsx(Image, {
+    accessibilityIgnoresInvertColors: true,
+    source: SOURCES[name],
+    style: [{
+      width: size,
+      height: size,
+      tintColor
+    }, style],
+    testID: testID
+  });
+}
+//# sourceMappingURL=ChromeIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Image","arrowLeftFromBracket","arrowRotateLeft","circleExclamation","triangleExclamation","xmark","jsx","_jsx","SOURCES","ChromeIcon","name","tintColor","size","style","testID","accessibilityIgnoresInvertColors","source","width","height"],"sourceRoot":"../../../../src","sources":["authoring/chrome/ChromeIcon.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,KAAK,QAAyC,cAAc;AAErE,OAAOC,oBAAoB,MAAM,qCAAqC;AACtE,OAAOC,eAAe,MAAM,+BAA+B;AAC3D,OAAOC,iBAAiB,MAAM,gCAAgC;AAC9D,OAAOC,mBAAmB,MAAM,kCAAkC;AAClE,OAAOC,KAAK,MAAM,mBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAStC,MAAMC,OAAuC,GAAG;EAC9C,yBAAyB,EAAEP,oBAAoB;EAC/C,mBAAmB,EAAEC,eAAe;EACpC,oBAAoB,EAAEC,iBAAiB;EACvC,sBAAsB,EAAEC,mBAAmB;EAC3CC;AACF,CAAC;AAUD;AACA,OAAO,SAASI,UAAUA,CAAC;EACzBC,IAAI;EACJC,SAAS;EACTC,IAAI,GAAG,EAAE;EACTC,KAAK;EACLC;AACe,CAAC,EAAsB;EACtC,oBACEP,IAAA,CAACP,KAAK;IACJe,gCAAgC;IAChCC,MAAM,EAAER,OAAO,CAACE,IAAI,CAAE;IACtBG,KAAK,EAAE,CAAC;MAAEI,KAAK,EAAEL,IAAI;MAAEM,MAAM,EAAEN,IAAI;MAAED;IAAU,CAAC,EAAEE,KAAK,CAAE;IACzDC,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN","ignoreList":[]}

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

@@ -0,0 +1,82 @@
+"use strict";
+
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { TooltipNotch, tooltipNotchDiamondSide } from "../../surfaces/tooltip/TooltipNotch.js";
+import { chromeColors, chromeRadius, chromeShadows, chromeSpace, chromeText } from "./tokens.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CHROME_TOOLTIP_NOTCH_SIZE = 8;
+export const 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.
+ */
+export 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 = tooltipNotchDiamondSide(CHROME_TOOLTIP_NOTCH_SIZE);
+  return /*#__PURE__*/_jsxs(View, {
+    pointerEvents: "none",
+    style: styles.root,
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.notchClip,
+      children: /*#__PURE__*/_jsx(TooltipNotch, {
+        left: (16 - diamond) / 2,
+        notchColor: chromeColors.primaryText,
+        notchSize: CHROME_TOOLTIP_NOTCH_SIZE,
+        top: CHROME_TOOLTIP_NOTCH_SIZE - diamond / 2
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.bubble, chromeShadows.tooltip],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [chromeText.tooltip, {
+          color: chromeColors.invertedText
+        }],
+        children: children
+      })
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  root: {
+    alignItems: 'center',
+    maxWidth: 300
+  },
+  notchClip: {
+    width: 16,
+    height: CHROME_TOOLTIP_NOTCH_SIZE,
+    overflow: 'hidden',
+    marginBottom: -1,
+    position: 'relative'
+  },
+  bubble: {
+    backgroundColor: chromeColors.primaryText,
+    borderRadius: chromeRadius.lg,
+    padding: chromeSpace[12],
+    maxWidth: 300
+  }
+});
+//# sourceMappingURL=ChromeTooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","Text","View","TooltipNotch","tooltipNotchDiamondSide","chromeColors","chromeRadius","chromeShadows","chromeSpace","chromeText","jsx","_jsx","jsxs","_jsxs","CHROME_TOOLTIP_NOTCH_SIZE","CHROME_TOOLTIP_DEFAULT_DURATION_MS","ChromeTooltip","children","visible","durationMs","onDismiss","testID","dismissed","setDismissed","useState","onDismissRef","useRef","current","useEffect","id","setTimeout","clearTimeout","diamond","pointerEvents","style","styles","root","notchClip","left","notchColor","primaryText","notchSize","top","bubble","tooltip","color","invertedText","create","alignItems","maxWidth","width","height","overflow","marginBottom","position","backgroundColor","borderRadius","lg","padding"],"sourceRoot":"../../../../src","sources":["authoring/chrome/ChromeTooltip.tsx"],"mappings":"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","ignoreList":[]}