@oxyhq/bloom 0.89.0 → 1.0.1

package/lib/module/tooltip/Tooltip.js

@@ -0,0 +1,283 @@
+"use strict";
+
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native';
+import Animated, { Easing, ZoomIn } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from "../theme/use-theme.js";
+import { bloomShadowStyle } from '../design-tokens/shadows';
+import { atoms as a } from "../styles/index.js";
+import { OverlayRoot } from "../overlay/index.js";
+import { Portal } from '../portal';
+import { ARROW_HALF_SIZE, ARROW_SIZE, BUBBLE_MAX_WIDTH, MIN_EDGE_SPACE } from "./constants.js";
+import { createTextBubble } from "./TextBubble.js";
+
+/**
+ * These are native specific values, not shared with web
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const ARROW_VISUAL_OFFSET = ARROW_SIZE / 1.25;
+const TooltipContext = /*#__PURE__*/createContext({
+  position: 'bottom',
+  visible: false,
+  onVisibleChange: () => {}
+});
+TooltipContext.displayName = 'TooltipContext';
+const TargetContext = /*#__PURE__*/createContext({
+  targetMeasurements: undefined,
+  setTargetMeasurements: () => {},
+  shouldMeasure: false
+});
+TargetContext.displayName = 'TargetContext';
+export function Tooltip({
+  children,
+  position = 'bottom',
+  visible: requestVisible,
+  onVisibleChange
+}) {
+  /**
+   * Lagging state to track the externally-controlled visibility of the
+   * tooltip, which needs to wait for the target to be measured before
+   * actually being shown.
+   */
+  const [visible, setVisible] = useState(false);
+  const [targetMeasurements, setTargetMeasurements] = useState(undefined);
+  if (requestVisible && !visible && targetMeasurements) {
+    setVisible(true);
+  } else if (!requestVisible && visible) {
+    setVisible(false);
+    setTargetMeasurements(undefined);
+  }
+  const ctx = useMemo(() => ({
+    position,
+    visible,
+    onVisibleChange
+  }), [position, visible, onVisibleChange]);
+  const targetCtx = useMemo(() => ({
+    targetMeasurements,
+    setTargetMeasurements,
+    shouldMeasure: requestVisible
+  }), [requestVisible, targetMeasurements, setTargetMeasurements]);
+  return /*#__PURE__*/_jsx(TooltipContext.Provider, {
+    value: ctx,
+    children: /*#__PURE__*/_jsx(TargetContext.Provider, {
+      value: targetCtx,
+      children: children
+    })
+  });
+}
+export function TooltipTrigger({
+  children
+}) {
+  const {
+    shouldMeasure,
+    setTargetMeasurements
+  } = useContext(TargetContext);
+  const [hasLayedOut, setHasLayedOut] = useState(false);
+  const targetRef = useRef(null);
+  useEffect(() => {
+    if (!shouldMeasure || !hasLayedOut) return;
+    targetRef.current?.measure((_x, _y, width, height, x, y) => {
+      if (x !== undefined && y !== undefined && width && height) {
+        setTargetMeasurements({
+          x,
+          y,
+          width,
+          height
+        });
+      }
+    });
+  }, [shouldMeasure, setTargetMeasurements, hasLayedOut]);
+  return /*#__PURE__*/_jsx(View, {
+    collapsable: false,
+    ref: targetRef,
+    onLayout: () => setHasLayedOut(true),
+    children: children
+  });
+}
+export function TooltipContent({
+  children,
+  label
+}) {
+  const {
+    position,
+    visible,
+    onVisibleChange
+  } = useContext(TooltipContext);
+  const {
+    targetMeasurements
+  } = useContext(TargetContext);
+  const requestClose = useCallback(() => {
+    onVisibleChange(false);
+  }, [onVisibleChange]);
+  if (!visible || !targetMeasurements) return null;
+  return /*#__PURE__*/_jsx(Portal, {
+    children: /*#__PURE__*/_jsx(OverlayRoot, {
+      children: /*#__PURE__*/_jsx(Bubble, {
+        label: label,
+        position: position,
+        targetMeasurements: targetMeasurements,
+        requestClose: requestClose,
+        children: children
+      })
+    })
+  });
+}
+function Bubble({
+  children,
+  label,
+  position,
+  requestClose,
+  targetMeasurements
+}) {
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const dimensions = useWindowDimensions();
+  const [bubbleMeasurements, setBubbleMeasurements] = useState(undefined);
+  const bubbleBg = theme.isDark ? {
+    backgroundColor: theme.colors.backgroundSecondary
+  } : {
+    backgroundColor: theme.colors.background
+  };
+  const coords = useMemo(() => {
+    if (!bubbleMeasurements) return {
+      computedPosition: position,
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      tipTop: 0,
+      tipLeft: 0
+    };
+    const {
+      width: ww,
+      height: wh
+    } = dimensions;
+    const maxTop = insets.top;
+    const maxBottom = wh - insets.bottom;
+    const {
+      width: cw,
+      height: ch
+    } = bubbleMeasurements;
+    const minLeft = MIN_EDGE_SPACE;
+    const maxLeft = ww - minLeft;
+    let computedPosition = position;
+    let top = targetMeasurements.y + targetMeasurements.height;
+    let left = Math.max(minLeft, targetMeasurements.x + targetMeasurements.width / 2 - cw / 2);
+    const tipTranslate = ARROW_HALF_SIZE * -1;
+    let tipTop = tipTranslate;
+    if (left + cw > maxLeft) {
+      left -= left + cw - maxLeft;
+    }
+    const tipLeft = targetMeasurements.x - left + targetMeasurements.width / 2 - ARROW_HALF_SIZE;
+    let bottom = top + ch;
+    function positionTop() {
+      top = top - ch - targetMeasurements.height;
+      bottom = top + ch;
+      tipTop = tipTop + ch;
+      computedPosition = 'top';
+    }
+    function positionBottom() {
+      top = targetMeasurements.y + targetMeasurements.height;
+      bottom = top + ch;
+      tipTop = tipTranslate;
+      computedPosition = 'bottom';
+    }
+    if (position === 'top') {
+      positionTop();
+      if (top < maxTop) {
+        positionBottom();
+      }
+    } else {
+      if (bottom > maxBottom) {
+        positionTop();
+      }
+    }
+    if (computedPosition === 'bottom') {
+      top += ARROW_VISUAL_OFFSET;
+      bottom += ARROW_VISUAL_OFFSET;
+    } else {
+      top -= ARROW_VISUAL_OFFSET;
+      bottom -= ARROW_VISUAL_OFFSET;
+    }
+    return {
+      computedPosition,
+      top,
+      bottom,
+      left,
+      right: left + cw,
+      tipTop,
+      tipLeft
+    };
+  }, [position, targetMeasurements, bubbleMeasurements, insets, dimensions]);
+  const requestCloseWrapped = useCallback(() => {
+    setBubbleMeasurements(undefined);
+    requestClose();
+  }, [requestClose]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      style: StyleSheet.absoluteFill,
+      onPress: requestCloseWrapped,
+      accessibilityRole: "none"
+    }), /*#__PURE__*/_jsx(View, {
+      accessible: true,
+      role: "alert",
+      accessibilityHint: "",
+      accessibilityLabel: label,
+      importantForAccessibility: "yes",
+      accessibilityViewIsModal: true,
+      style: [a.absolute, a.align_start, {
+        width: BUBBLE_MAX_WIDTH,
+        opacity: bubbleMeasurements ? 1 : 0,
+        top: coords.top,
+        left: coords.left
+      }],
+      children: /*#__PURE__*/_jsxs(Animated.View, {
+        entering: ZoomIn.easing(Easing.out(Easing.exp)),
+        style: {
+          transformOrigin: opposite(position)
+        },
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [a.absolute, a.top_0, a.z_10, bubbleBg, {
+            borderTopLeftRadius: a.rounded_2xs.borderRadius,
+            borderBottomRightRadius: a.rounded_2xs.borderRadius,
+            width: ARROW_SIZE,
+            height: ARROW_SIZE,
+            transform: [{
+              rotate: '45deg'
+            }],
+            top: coords.tipTop,
+            left: coords.tipLeft
+          }]
+        }), /*#__PURE__*/_jsx(View, {
+          style: [a.px_md, a.py_sm, a.rounded_sm, bubbleBg,
+          // `shadow-m` — the overlay role, and the token owns the platform
+          // split, which the hand-rolled version only had the native half
+          // of. The offset no longer flips with the bubble's side: one
+          // shadow vocabulary is the point, and at a 12px blur the
+          // direction was not readable anyway.
+          bloomShadowStyle('m')],
+          onLayout: e => {
+            setBubbleMeasurements({
+              width: e.nativeEvent.layout.width,
+              height: e.nativeEvent.layout.height
+            });
+          },
+          children: children
+        })]
+      })
+    })]
+  });
+}
+function opposite(position) {
+  switch (position) {
+    case 'top':
+      return 'center bottom';
+    case 'bottom':
+      return 'center top';
+    default:
+      return 'center';
+  }
+}
+export const TooltipTextBubble = createTextBubble(TooltipContent);
+//# sourceMappingURL=Tooltip.js.map

package/lib/module/tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","useCallback","useContext","useEffect","useMemo","useRef","useState","Pressable","StyleSheet","useWindowDimensions","View","Animated","Easing","ZoomIn","useSafeAreaInsets","useTheme","bloomShadowStyle","atoms","a","OverlayRoot","Portal","ARROW_HALF_SIZE","ARROW_SIZE","BUBBLE_MAX_WIDTH","MIN_EDGE_SPACE","createTextBubble","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ARROW_VISUAL_OFFSET","TooltipContext","position","visible","onVisibleChange","displayName","TargetContext","targetMeasurements","undefined","setTargetMeasurements","shouldMeasure","Tooltip","children","requestVisible","setVisible","ctx","targetCtx","Provider","value","TooltipTrigger","hasLayedOut","setHasLayedOut","targetRef","current","measure","_x","_y","width","height","x","y","collapsable","ref","onLayout","TooltipContent","label","requestClose","Bubble","theme","insets","dimensions","bubbleMeasurements","setBubbleMeasurements","bubbleBg","isDark","backgroundColor","colors","backgroundSecondary","background","coords","computedPosition","top","bottom","left","right","tipTop","tipLeft","ww","wh","maxTop","maxBottom","cw","ch","minLeft","maxLeft","Math","max","tipTranslate","positionTop","positionBottom","requestCloseWrapped","style","absoluteFill","onPress","accessibilityRole","accessible","role","accessibilityHint","accessibilityLabel","importantForAccessibility","accessibilityViewIsModal","absolute","align_start","opacity","entering","easing","out","exp","transformOrigin","opposite","top_0","z_10","borderTopLeftRadius","rounded_2xs","borderRadius","borderBottomRightRadius","transform","rotate","px_md","py_sm","rounded_sm","e","nativeEvent","layout","TooltipTextBubble"],"sourceRoot":"../../../src","sources":["tooltip/Tooltip.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/tooltip/Tooltip.web.js

@@ -0,0 +1,125 @@
+"use strict";
+
+import { createContext, useContext, useMemo } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { useTheme } from "../theme/use-theme.js";
+import { atoms as a, flatten } from "../styles/index.js";
+import { WEB_POSITION_FIXED } from "../styles/web-view-style.js";
+import { Z_INDEX } from "../styles/z-index.js";
+import { ARROW_SIZE, BUBBLE_MAX_WIDTH } from "./constants.js";
+import { createTextBubble } from "./TextBubble.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TooltipContext = /*#__PURE__*/createContext({
+  position: 'bottom',
+  visible: false,
+  onVisibleChange: () => {}
+});
+TooltipContext.displayName = 'TooltipContext';
+export function Tooltip({
+  children,
+  position = 'bottom',
+  visible,
+  onVisibleChange
+}) {
+  const ctx = useMemo(() => ({
+    position,
+    visible,
+    onVisibleChange
+  }), [position, visible, onVisibleChange]);
+  return /*#__PURE__*/_jsxs(TooltipContext.Provider, {
+    value: ctx,
+    children: [visible && /*#__PURE__*/_jsx(Pressable, {
+      style: webStyles.backdrop,
+      onPress: () => onVisibleChange(false),
+      accessibilityRole: "none"
+    }), children]
+  });
+}
+export function TooltipTrigger({
+  children
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    collapsable: false,
+    style: a.relative,
+    children: children
+  });
+}
+export function TooltipContent({
+  children,
+  label
+}) {
+  const theme = useTheme();
+  const {
+    position,
+    visible
+  } = useContext(TooltipContext);
+  if (!visible) return null;
+  const bubbleBg = theme.isDark ? theme.colors.backgroundSecondary : theme.colors.background;
+  const shadowColor = theme.isDark ? 'rgba(0, 0, 0, 0.4)' : 'rgba(0, 0, 0, 0.2)';
+  return /*#__PURE__*/_jsx(View, {
+    "aria-label": label,
+    role: "alert",
+    style: flatten([a.absolute, a.z_50, {
+      left: '50%',
+      transform: [{
+        translateX: '-50%'
+      }],
+      width: BUBBLE_MAX_WIDTH
+    }, position === 'top' ? {
+      bottom: '100%',
+      marginBottom: ARROW_SIZE / 2
+    } : {
+      top: '100%',
+      marginTop: ARROW_SIZE / 2
+    }]),
+    children: /*#__PURE__*/_jsxs(View, {
+      style: flatten([a.rounded_sm, a.overflow_hidden, {
+        backgroundColor: bubbleBg,
+        boxShadow: `0 0 24px ${shadowColor}`
+      }]),
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [a.absolute, a.z_10, {
+          backgroundColor: bubbleBg,
+          width: ARROW_SIZE,
+          height: ARROW_SIZE,
+          left: '50%',
+          transform: [{
+            translateX: '-50%'
+          }, {
+            rotate: '45deg'
+          }],
+          borderTopLeftRadius: a.rounded_2xs.borderRadius,
+          borderBottomRightRadius: a.rounded_2xs.borderRadius,
+          ...(position === 'top' ? {
+            bottom: -(ARROW_SIZE / 2)
+          } : {
+            top: -(ARROW_SIZE / 2)
+          })
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [a.px_md, a.py_sm, {
+          maxWidth: BUBBLE_MAX_WIDTH
+        }],
+        children: children
+      })]
+    })
+  });
+}
+export const TooltipTextBubble = createTextBubble(TooltipContent);
+const webStyles = StyleSheet.create({
+  backdrop: {
+    position: WEB_POSITION_FIXED,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    // In-flow depth, not an overlay-ordering one: the WEB tooltip is not
+    // portaled (unlike the native one) — the bubble is absolutely positioned
+    // against its trigger and renders inline. So this only lifts the
+    // outside-press catcher over adjacent content, and stays below the bubble's
+    // own `a.z_50`. Which SURFACE is on top is never decided here; see
+    // `src/overlay/stack.ts`.
+    zIndex: Z_INDEX.floating
+  }
+});
+//# sourceMappingURL=Tooltip.web.js.map

package/lib/module/tooltip/Tooltip.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","useContext","useMemo","Pressable","StyleSheet","View","useTheme","atoms","a","flatten","WEB_POSITION_FIXED","Z_INDEX","ARROW_SIZE","BUBBLE_MAX_WIDTH","createTextBubble","jsx","_jsx","jsxs","_jsxs","TooltipContext","position","visible","onVisibleChange","displayName","Tooltip","children","ctx","Provider","value","style","webStyles","backdrop","onPress","accessibilityRole","TooltipTrigger","collapsable","relative","TooltipContent","label","theme","bubbleBg","isDark","colors","backgroundSecondary","background","shadowColor","role","absolute","z_50","left","transform","translateX","width","bottom","marginBottom","top","marginTop","rounded_sm","overflow_hidden","backgroundColor","boxShadow","z_10","height","rotate","borderTopLeftRadius","rounded_2xs","borderRadius","borderBottomRightRadius","px_md","py_sm","maxWidth","TooltipTextBubble","create","right","zIndex","floating"],"sourceRoot":"../../../src","sources":["tooltip/Tooltip.web.tsx"],"mappings":";;AAAA,SAASA,aAAa,EAAEC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAC1D,SAASC,SAAS,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAE1D,SAASC,QAAQ,QAAQ,uBAAoB;AAC7C,SAASC,KAAK,IAAIC,CAAC,EAAEC,OAAO,QAAQ,oBAAW;AAC/C,SAASC,kBAAkB,QAAQ,6BAA0B;AAC7D,SAASC,OAAO,QAAQ,sBAAmB;AAC3C,SACEC,UAAU,EACVC,gBAAgB,QAEX,gBAAa;AACpB,SAASC,gBAAgB,QAAQ,iBAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAQhD,MAAMC,cAAc,gBAAGnB,aAAa,CAAqB;EACvDoB,QAAQ,EAAE,QAAQ;EAClBC,OAAO,EAAE,KAAK;EACdC,eAAe,EAAEA,CAAA,KAAM,CAAC;AAC1B,CAAC,CAAC;AACFH,cAAc,CAACI,WAAW,GAAG,gBAAgB;AAE7C,OAAO,SAASC,OAAOA,CAAC;EACtBC,QAAQ;EACRL,QAAQ,GAAG,QAAQ;EACnBC,OAAO;EACPC;AAMF,CAAC,EAAE;EACD,MAAMI,GAAG,GAAGxB,OAAO,CACjB,OAAO;IAAEkB,QAAQ;IAAEC,OAAO;IAAEC;EAAgB,CAAC,CAAC,EAC9C,CAACF,QAAQ,EAAEC,OAAO,EAAEC,eAAe,CACrC,CAAC;EAED,oBACEJ,KAAA,CAACC,cAAc,CAACQ,QAAQ;IAACC,KAAK,EAAEF,GAAI;IAAAD,QAAA,GACjCJ,OAAO,iBACNL,IAAA,CAACb,SAAS;MACR0B,KAAK,EAAEC,SAAS,CAACC,QAAS;MAC1BC,OAAO,EAAEA,CAAA,KAAMV,eAAe,CAAC,KAAK,CAAE;MACtCW,iBAAiB,EAAC;IAAM,CACzB,CACF,EACAR,QAAQ;EAAA,CACc,CAAC;AAE9B;AAEA,OAAO,SAASS,cAAcA,CAAC;EAAET;AAAwC,CAAC,EAAE;EAC1E,oBACET,IAAA,CAACX,IAAI;IAAC8B,WAAW,EAAE,KAAM;IAACN,KAAK,EAAErB,CAAC,CAAC4B,QAAS;IAAAX,QAAA,EACzCA;EAAQ,CACL,CAAC;AAEX;AAEA,OAAO,SAASY,cAAcA,CAAC;EAC7BZ,QAAQ;EACRa;AAIF,CAAC,EAAE;EACD,MAAMC,KAAK,GAAGjC,QAAQ,CAAC,CAAC;EACxB,MAAM;IAAEc,QAAQ;IAAEC;EAAQ,CAAC,GAAGpB,UAAU,CAACkB,cAAc,CAAC;EAExD,IAAI,CAACE,OAAO,EAAE,OAAO,IAAI;EAEzB,MAAMmB,QAAQ,GAAGD,KAAK,CAACE,MAAM,GACzBF,KAAK,CAACG,MAAM,CAACC,mBAAmB,GAChCJ,KAAK,CAACG,MAAM,CAACE,UAAU;EAE3B,MAAMC,WAAW,GAAGN,KAAK,CAACE,MAAM,GAC5B,oBAAoB,GACpB,oBAAoB;EAExB,oBACEzB,IAAA,CAACX,IAAI;IACH,cAAYiC,KAAM;IAClBQ,IAAI,EAAC,OAAO;IACZjB,KAAK,EAAEpB,OAAO,CAAC,CACbD,CAAC,CAACuC,QAAQ,EACVvC,CAAC,CAACwC,IAAI,EACN;MACEC,IAAI,EAAE,KAAK;MACXC,SAAS,EAAE,CAAC;QAAEC,UAAU,EAAE;MAAO,CAAC,CAAC;MACnCC,KAAK,EAAEvC;IACT,CAAC,EACDO,QAAQ,KAAK,KAAK,GACd;MAAEiC,MAAM,EAAE,MAAM;MAAEC,YAAY,EAAE1C,UAAU,GAAG;IAAE,CAAC,GAChD;MAAE2C,GAAG,EAAE,MAAM;MAAEC,SAAS,EAAE5C,UAAU,GAAG;IAAE,CAAC,CAC/C,CAAE;IAAAa,QAAA,eACHP,KAAA,CAACb,IAAI;MACHwB,KAAK,EAAEpB,OAAO,CAAC,CACbD,CAAC,CAACiD,UAAU,EACZjD,CAAC,CAACkD,eAAe,EACjB;QACEC,eAAe,EAAEnB,QAAQ;QACzBoB,SAAS,EAAE,YAAYf,WAAW;MACpC,CAAC,CACF,CAAE;MAAApB,QAAA,gBAEHT,IAAA,CAACX,IAAI;QACHwB,KAAK,EAAE,CACLrB,CAAC,CAACuC,QAAQ,EACVvC,CAAC,CAACqD,IAAI,EACN;UACEF,eAAe,EAAEnB,QAAQ;UACzBY,KAAK,EAAExC,UAAU;UACjBkD,MAAM,EAAElD,UAAU;UAClBqC,IAAI,EAAE,KAAK;UACXC,SAAS,EAAE,CAAC;YAAEC,UAAU,EAAE;UAAO,CAAC,EAAE;YAAEY,MAAM,EAAE;UAAQ,CAAC,CAAC;UACxDC,mBAAmB,EAAExD,CAAC,CAACyD,WAAW,CAACC,YAAY;UAC/CC,uBAAuB,EAAE3D,CAAC,CAACyD,WAAW,CAACC,YAAY;UACnD,IAAI9C,QAAQ,KAAK,KAAK,GAClB;YAAEiC,MAAM,EAAE,EAAEzC,UAAU,GAAG,CAAC;UAAE,CAAC,GAC7B;YAAE2C,GAAG,EAAE,EAAE3C,UAAU,GAAG,CAAC;UAAE,CAAC;QAChC,CAAC;MACD,CACH,CAAC,eACFI,IAAA,CAACX,IAAI;QAACwB,KAAK,EAAE,CAACrB,CAAC,CAAC4D,KAAK,EAAE5D,CAAC,CAAC6D,KAAK,EAAE;UAAEC,QAAQ,EAAEzD;QAAiB,CAAC,CAAE;QAAAY,QAAA,EAC7DA;MAAQ,CACL,CAAC;IAAA,CACH;EAAC,CACH,CAAC;AAEX;AAEA,OAAO,MAAM8C,iBAAiB,GAAGzD,gBAAgB,CAACuB,cAAc,CAAC;AAEjE,MAAMP,SAAS,GAAG1B,UAAU,CAACoE,MAAM,CAAC;EAClCzC,QAAQ,EAAE;IACRX,QAAQ,EAAEV,kBAAkB;IAC5B6C,GAAG,EAAE,CAAC;IACNN,IAAI,EAAE,CAAC;IACPwB,KAAK,EAAE,CAAC;IACRpB,MAAM,EAAE,CAAC;IACT;IACA;IACA;IACA;IACA;IACA;IACAqB,MAAM,EAAE/D,OAAO,CAACgE;EAClB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/tooltip/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+import { atoms as a } from "../styles/index.js";
+export const BUBBLE_MAX_WIDTH = 240;
+export const ARROW_SIZE = 12;
+export const ARROW_HALF_SIZE = ARROW_SIZE / 2;
+export const MIN_EDGE_SPACE = a.px_lg.paddingHorizontal;
+//# sourceMappingURL=constants.js.map

package/lib/module/tooltip/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["atoms","a","BUBBLE_MAX_WIDTH","ARROW_SIZE","ARROW_HALF_SIZE","MIN_EDGE_SPACE","px_lg","paddingHorizontal"],"sourceRoot":"../../../src","sources":["tooltip/constants.ts"],"mappings":";;AAAA,SAASA,KAAK,IAAIC,CAAC,QAAQ,oBAAW;AAEtC,OAAO,MAAMC,gBAAgB,GAAG,GAAG;AACnC,OAAO,MAAMC,UAAU,GAAG,EAAE;AAC5B,OAAO,MAAMC,eAAe,GAAGD,UAAU,GAAG,CAAC;AAC7C,OAAO,MAAME,cAAc,GAAGJ,CAAC,CAACK,KAAK,CAACC,iBAAiB","ignoreList":[]}