@webority-technologies/mobile-ui 0.0.1

package/lib/commonjs/components/Toast/ToastProvider.js

@@ -0,0 +1,199 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useToast = exports.toast = exports.ToastProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+var _index = require("../../theme/index.js");
+var _hapticUtils = require("../../utils/hapticUtils.js");
+var _Toast = _interopRequireDefault(require("./Toast.js"));
+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 MAX_VISIBLE = 3;
+const ToastContext = /*#__PURE__*/(0, _react.createContext)(null);
+let nextId = 0;
+const makeId = () => {
+  nextId += 1;
+  return `toast-${Date.now().toString(36)}-${nextId.toString(36)}`;
+};
+const defaultHaptic = variant => {
+  switch (variant) {
+    case 'error':
+      return 'notificationError';
+    case 'success':
+      return 'notificationSuccess';
+    case 'warning':
+      return 'notificationWarning';
+    case 'info':
+      return 'selection';
+    case 'default':
+    default:
+      return 'selection';
+  }
+};
+let providerCount = 0;
+let activeApi = null;
+const setActiveApi = api => {
+  activeApi = api;
+};
+const getActiveApi = () => activeApi;
+const ToastProvider = ({
+  children,
+  maxVisible = MAX_VISIBLE,
+  topOffset,
+  bottomOffset
+}) => {
+  const theme = (0, _index.useTheme)();
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const [queue, setQueue] = (0, _react.useState)([]);
+  const queueRef = (0, _react.useRef)([]);
+  queueRef.current = queue;
+  const hide = (0, _react.useCallback)(id => {
+    setQueue(prev => prev.filter(t => t.id !== id));
+  }, []);
+  const hideAll = (0, _react.useCallback)(() => {
+    setQueue([]);
+  }, []);
+  const show = (0, _react.useCallback)(opts => {
+    const id = makeId();
+    const item = {
+      ...opts,
+      id
+    };
+    const haptic = opts.haptic === undefined ? defaultHaptic(opts.variant) : opts.haptic;
+    if (haptic !== false) {
+      (0, _hapticUtils.triggerHaptic)(haptic);
+    }
+    setQueue(prev => {
+      const next = [...prev, item];
+      // FIFO trim if exceeding maxVisible
+      if (next.length > maxVisible) {
+        return next.slice(next.length - maxVisible);
+      }
+      return next;
+    });
+    return id;
+  }, [maxVisible]);
+  const api = (0, _react.useMemo)(() => ({
+    show,
+    hide,
+    hideAll
+  }), [show, hide, hideAll]);
+  (0, _react.useEffect)(() => {
+    providerCount += 1;
+    setActiveApi(api);
+    return () => {
+      providerCount -= 1;
+      if (providerCount <= 0) {
+        providerCount = 0;
+        setActiveApi(null);
+      }
+    };
+  }, [api]);
+  const topToasts = queue.filter(t => (t.position ?? 'bottom') === 'top');
+  const bottomToasts = queue.filter(t => (t.position ?? 'bottom') === 'bottom');
+  const styles = (0, _react.useMemo)(() => buildStyles(), []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ToastContext.Provider, {
+    value: api,
+    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      pointerEvents: "box-none",
+      style: [styles.layer, styles.top, {
+        top: (topOffset ?? insets.top) + theme.spacing.sm,
+        paddingHorizontal: theme.spacing.md
+      }],
+      children: topToasts.map((toast, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toast.default, {
+        toast: toast,
+        index: topToasts.length - 1 - idx,
+        onDismiss: hide
+      }, toast.id))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      pointerEvents: "box-none",
+      style: [styles.layer, styles.bottom, {
+        bottom: (bottomOffset ?? insets.bottom) + theme.spacing.sm,
+        paddingHorizontal: theme.spacing.md
+      }],
+      children: bottomToasts.map((toast, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toast.default, {
+        toast: toast,
+        index: bottomToasts.length - 1 - idx,
+        onDismiss: hide
+      }, toast.id))
+    })]
+  });
+};
+exports.ToastProvider = ToastProvider;
+const useToast = () => {
+  const ctx = (0, _react.useContext)(ToastContext);
+  if (!ctx) {
+    throw new Error('useToast must be used within a <ToastProvider>.');
+  }
+  return ctx;
+};
+exports.useToast = useToast;
+let warned = false;
+const warnNoProvider = () => {
+  if (warned) {
+    return;
+  }
+  warned = true;
+  if (typeof __DEV__ !== 'undefined' && __DEV__) {
+    console.warn('[toast] No <ToastProvider /> mounted; toast() calls are no-ops. Mount a provider near your app root.');
+  }
+};
+const proxy = fn => {
+  const api = getActiveApi();
+  if (!api) {
+    warnNoProvider();
+    return '';
+  }
+  const result = fn(api);
+  return typeof result === 'string' ? result : '';
+};
+const toast = exports.toast = {
+  show: opts => proxy(api => api.show(opts)),
+  success: (message, opts) => proxy(api => api.show({
+    ...opts,
+    message,
+    variant: 'success'
+  })),
+  error: (message, opts) => proxy(api => api.show({
+    ...opts,
+    message,
+    variant: 'error'
+  })),
+  warning: (message, opts) => proxy(api => api.show({
+    ...opts,
+    message,
+    variant: 'warning'
+  })),
+  info: (message, opts) => proxy(api => api.show({
+    ...opts,
+    message,
+    variant: 'info'
+  })),
+  hideAll: () => {
+    const api = getActiveApi();
+    if (!api) {
+      warnNoProvider();
+      return;
+    }
+    api.hideAll();
+  }
+};
+const buildStyles = () => _reactNative.StyleSheet.create({
+  layer: {
+    position: 'absolute',
+    left: 0,
+    right: 0
+  },
+  top: {
+    alignItems: 'stretch'
+  },
+  bottom: {
+    alignItems: 'stretch'
+  }
+});
+//# sourceMappingURL=ToastProvider.js.map

package/lib/commonjs/components/Toast/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Toast", {
+  enumerable: true,
+  get: function () {
+    return _Toast.Toast;
+  }
+});
+Object.defineProperty(exports, "ToastProvider", {
+  enumerable: true,
+  get: function () {
+    return _ToastProvider.ToastProvider;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Toast.default;
+  }
+});
+Object.defineProperty(exports, "toast", {
+  enumerable: true,
+  get: function () {
+    return _ToastProvider.toast;
+  }
+});
+Object.defineProperty(exports, "useToast", {
+  enumerable: true,
+  get: function () {
+    return _ToastProvider.useToast;
+  }
+});
+var _Toast = _interopRequireWildcard(require("./Toast.js"));
+var _ToastProvider = require("./ToastProvider.js");
+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); }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/Tooltip/Tooltip.js

@@ -0,0 +1,410 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Tooltip = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.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 DEFAULT_TOOLTIP_GAP = 8;
+const DEFAULT_SCREEN_PADDING = 8;
+const DEFAULT_PRESS_AUTO_HIDE_MS = 4000;
+const DEFAULT_ARROW_HALF_WIDTH = 4; // half of 8px arrow base
+const DEFAULT_ARROW_HEIGHT = 6;
+const DEFAULT_ARROW_CORNER_PADDING = 12;
+const DEFAULT_MAX_WIDTH = 240;
+const DEFAULT_LINE_HEIGHT = 18;
+const Tooltip = props => {
+  const {
+    content,
+    children,
+    placement = 'auto',
+    trigger = 'longPress',
+    visible: controlledVisible,
+    onVisibleChange,
+    hideOnContentPress = true,
+    maxWidth,
+    showArrow = true,
+    accessibilityLabel,
+    style,
+    containerStyle,
+    arrowStyle: arrowStyleOverride,
+    messageStyle,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const tooltipTokens = theme.components.tooltip;
+  const TOOLTIP_GAP = tooltipTokens?.gap ?? DEFAULT_TOOLTIP_GAP;
+  const SCREEN_PADDING = tooltipTokens?.screenPadding ?? DEFAULT_SCREEN_PADDING;
+  const PRESS_AUTO_HIDE_MS = tooltipTokens?.pressAutoHideMs ?? DEFAULT_PRESS_AUTO_HIDE_MS;
+  const ARROW_HALF_WIDTH = tooltipTokens?.arrowHalfWidth ?? DEFAULT_ARROW_HALF_WIDTH;
+  const ARROW_HEIGHT = tooltipTokens?.arrowHeight ?? DEFAULT_ARROW_HEIGHT;
+  const ARROW_CORNER_PADDING = tooltipTokens?.arrowCornerPadding ?? DEFAULT_ARROW_CORNER_PADDING;
+  const MESSAGE_LINE_HEIGHT = tooltipTokens?.lineHeight ?? DEFAULT_LINE_HEIGHT;
+  const resolvedMaxWidth = maxWidth ?? tooltipTokens?.maxWidth ?? DEFAULT_MAX_WIDTH;
+  const enableScaleAnimation = tooltipTokens?.enableScaleAnimation ?? false;
+  const exitDurationMs = tooltipTokens?.exitDurationMs ?? 150;
+  const isControlled = trigger === 'manual' || typeof controlledVisible === 'boolean';
+  const [internalVisible, setInternalVisible] = (0, _react.useState)(false);
+  const visible = isControlled ? Boolean(controlledVisible) : internalVisible;
+  const [anchor, setAnchor] = (0, _react.useState)(null);
+  const [size, setSize] = (0, _react.useState)({
+    width: 0,
+    height: 0
+  });
+  const wrapperRef = (0, _react.useRef)(null);
+  const scale = (0, _react.useRef)((0, _index.createAnimatedValue)(visible ? 1 : enableScaleAnimation ? 0.85 : 1)).current;
+  const opacity = (0, _react.useRef)((0, _index.createAnimatedValue)(visible ? 1 : 0)).current;
+  const autoHideTimer = (0, _react.useRef)(null);
+  const didMount = (0, _react.useRef)(false);
+  const setVisible = (0, _react.useCallback)(next => {
+    if (!isControlled) {
+      setInternalVisible(next);
+    }
+    onVisibleChange?.(next);
+  }, [isControlled, onVisibleChange]);
+  const measureAnchor = (0, _react.useCallback)(() => {
+    if (!wrapperRef.current) {
+      return;
+    }
+    wrapperRef.current.measureInWindow((x, y, width, height) => {
+      setAnchor({
+        x,
+        y,
+        width,
+        height
+      });
+    });
+  }, []);
+  const handleTrigger = (0, _react.useCallback)(_event => {
+    measureAnchor();
+    setVisible(true);
+  }, [measureAnchor, setVisible]);
+  const handleHide = (0, _react.useCallback)(() => {
+    setVisible(false);
+  }, [setVisible]);
+
+  // Animations + auto-hide
+  // biome-ignore lint/correctness/useExhaustiveDependencies: entry/exit is driven by `visible` alone; `handleHide`/`measureAnchor` are re-created per render and declaring them would re-run the mount branch and re-arm the auto-hide timer continuously
+  (0, _react.useEffect)(() => {
+    // On first mount, skip the entry animation if we're already visible
+    // (avoids native-driver bootstrap issues during render).
+    if (!didMount.current) {
+      didMount.current = true;
+      if (visible) {
+        measureAnchor();
+        if (trigger === 'press') {
+          if (autoHideTimer.current) {
+            clearTimeout(autoHideTimer.current);
+          }
+          autoHideTimer.current = setTimeout(() => {
+            handleHide();
+          }, PRESS_AUTO_HIDE_MS);
+        }
+      }
+      return () => {
+        if (autoHideTimer.current) {
+          clearTimeout(autoHideTimer.current);
+          autoHideTimer.current = null;
+        }
+      };
+    }
+    let anim;
+    if (visible) {
+      measureAnchor();
+      const enterAnims = [_reactNative.Animated.timing(opacity, {
+        toValue: 1,
+        duration: theme.motion.duration.fast,
+        useNativeDriver: true
+      })];
+      if (enableScaleAnimation) {
+        enterAnims.push(_reactNative.Animated.spring(scale, {
+          toValue: 1,
+          damping: theme.motion.spring.snappy.damping,
+          stiffness: theme.motion.spring.snappy.stiffness,
+          mass: theme.motion.spring.snappy.mass,
+          useNativeDriver: true
+        }));
+      }
+      anim = _reactNative.Animated.parallel(enterAnims);
+      anim.start();
+      if (trigger === 'press') {
+        if (autoHideTimer.current) {
+          clearTimeout(autoHideTimer.current);
+        }
+        autoHideTimer.current = setTimeout(() => {
+          handleHide();
+        }, PRESS_AUTO_HIDE_MS);
+      }
+    } else {
+      const exitAnims = [_reactNative.Animated.timing(opacity, {
+        toValue: 0,
+        duration: exitDurationMs,
+        easing: _reactNative.Easing.bezier(...theme.motion.easing.accelerate),
+        useNativeDriver: true
+      })];
+      if (enableScaleAnimation) {
+        exitAnims.push(_reactNative.Animated.timing(scale, {
+          toValue: 0.85,
+          duration: exitDurationMs,
+          easing: _reactNative.Easing.bezier(...theme.motion.easing.accelerate),
+          useNativeDriver: true
+        }));
+      }
+      anim = _reactNative.Animated.parallel(exitAnims);
+      anim.start();
+      if (autoHideTimer.current) {
+        clearTimeout(autoHideTimer.current);
+        autoHideTimer.current = null;
+      }
+    }
+    return () => {
+      anim?.stop();
+      if (autoHideTimer.current) {
+        clearTimeout(autoHideTimer.current);
+        autoHideTimer.current = null;
+      }
+    };
+  }, [visible]);
+  const handleContentLayout = e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    if (width !== size.width || height !== size.height) {
+      setSize({
+        width,
+        height
+      });
+    }
+  };
+  const position = (0, _react.useMemo)(() => {
+    const screen = _reactNative.Dimensions.get('window');
+    if (!anchor) {
+      // Fallback before measurement: render off-screen-ish at top-left, will reposition on layout.
+      return {
+        top: SCREEN_PADDING,
+        left: SCREEN_PADDING,
+        placement: 'bottom',
+        arrowOffset: 0
+      };
+    }
+    const tooltipWidth = size.width || Math.min(resolvedMaxWidth, screen.width - SCREEN_PADDING * 2);
+    const tooltipHeight = size.height || 0;
+
+    // Choose placement.
+    let resolved;
+    if (placement === 'auto') {
+      const space = {
+        top: anchor.y,
+        bottom: screen.height - (anchor.y + anchor.height),
+        left: anchor.x,
+        right: screen.width - (anchor.x + anchor.width)
+      };
+      const max = Math.max(space.top, space.bottom, space.left, space.right);
+      if (max === space.bottom) {
+        resolved = 'bottom';
+      } else if (max === space.top) {
+        resolved = 'top';
+      } else if (max === space.right) {
+        resolved = 'right';
+      } else {
+        resolved = 'left';
+      }
+    } else {
+      resolved = placement;
+    }
+    let top = 0;
+    let left = 0;
+    if (resolved === 'top') {
+      top = anchor.y - tooltipHeight - TOOLTIP_GAP;
+      left = anchor.x + anchor.width / 2 - tooltipWidth / 2;
+    } else if (resolved === 'bottom') {
+      top = anchor.y + anchor.height + TOOLTIP_GAP;
+      left = anchor.x + anchor.width / 2 - tooltipWidth / 2;
+    } else if (resolved === 'left') {
+      top = anchor.y + anchor.height / 2 - tooltipHeight / 2;
+      left = anchor.x - tooltipWidth - TOOLTIP_GAP;
+    } else {
+      top = anchor.y + anchor.height / 2 - tooltipHeight / 2;
+      left = anchor.x + anchor.width + TOOLTIP_GAP;
+    }
+
+    // Clamp to screen.
+    left = Math.max(SCREEN_PADDING, Math.min(left, screen.width - tooltipWidth - SCREEN_PADDING));
+    top = Math.max(SCREEN_PADDING, Math.min(top, screen.height - tooltipHeight - SCREEN_PADDING));
+
+    // Compute arrow offset along the card's trigger-facing edge so the caret stays
+    // pointing at the trigger even after the card is clamped to the viewport.
+    let arrowOffset = 0;
+    if (resolved === 'top' || resolved === 'bottom') {
+      const triggerCenterX = anchor.x + anchor.width / 2;
+      const desired = triggerCenterX - left; // x-offset from card's left edge
+      const min = ARROW_CORNER_PADDING;
+      const max = Math.max(min, tooltipWidth - ARROW_CORNER_PADDING);
+      arrowOffset = Math.max(min, Math.min(desired, max));
+    } else {
+      const triggerCenterY = anchor.y + anchor.height / 2;
+      const desired = triggerCenterY - top;
+      const min = ARROW_CORNER_PADDING;
+      const max = Math.max(min, tooltipHeight - ARROW_CORNER_PADDING);
+      arrowOffset = Math.max(min, Math.min(desired, max));
+    }
+    return {
+      top,
+      left,
+      placement: resolved,
+      arrowOffset
+    };
+  }, [anchor, size, placement, resolvedMaxWidth, SCREEN_PADDING, TOOLTIP_GAP, ARROW_CORNER_PADDING]);
+
+  // Build the cloned trigger.
+  const triggerProps = {};
+  if (trigger === 'longPress') {
+    triggerProps.onLongPress = handleTrigger;
+    triggerProps.accessibilityHint = 'Long press for more info';
+  } else if (trigger === 'press') {
+    const childOnPress = children.props.onPress;
+    triggerProps.onPress = e => {
+      childOnPress?.(e);
+      handleTrigger(e);
+    };
+  }
+  const clonedChild = /*#__PURE__*/_react.default.cloneElement(children, triggerProps);
+  const a11yLabel = accessibilityLabel ?? (typeof content === 'string' ? content : 'Tooltip');
+
+  // Arrow style: a CSS-triangle implemented via 0-width view with transparent
+  // borders. We rotate the base (placement='top' = arrow on bottom-edge pointing
+  // down) into the four cardinal orientations.
+  const arrowStyle = (0, _react.useMemo)(() => {
+    if (!showArrow) {
+      return null;
+    }
+    const arrowColor = theme.colors.background.inverse;
+    const base = {
+      position: 'absolute',
+      width: 0,
+      height: 0,
+      backgroundColor: 'transparent',
+      borderStyle: 'solid',
+      borderLeftWidth: ARROW_HALF_WIDTH,
+      borderRightWidth: ARROW_HALF_WIDTH,
+      borderBottomWidth: ARROW_HEIGHT,
+      borderTopWidth: 0,
+      borderLeftColor: 'transparent',
+      borderRightColor: 'transparent',
+      borderTopColor: 'transparent',
+      borderBottomColor: arrowColor
+    };
+    if (position.placement === 'top') {
+      // Card is above trigger; arrow on bottom edge, pointing down.
+      return {
+        ...base,
+        bottom: -ARROW_HEIGHT,
+        left: position.arrowOffset - ARROW_HALF_WIDTH,
+        transform: [{
+          rotate: '180deg'
+        }]
+      };
+    }
+    if (position.placement === 'bottom') {
+      // Card below trigger; arrow on top edge, pointing up.
+      return {
+        ...base,
+        top: -ARROW_HEIGHT,
+        left: position.arrowOffset - ARROW_HALF_WIDTH
+      };
+    }
+    if (position.placement === 'left') {
+      // Card left of trigger; arrow on right edge, pointing right.
+      return {
+        ...base,
+        right: -ARROW_HEIGHT,
+        top: position.arrowOffset - ARROW_HALF_WIDTH,
+        transform: [{
+          rotate: '90deg'
+        }]
+      };
+    }
+    // 'right': card right of trigger; arrow on left edge, pointing left.
+    return {
+      ...base,
+      left: -ARROW_HEIGHT,
+      top: position.arrowOffset - ARROW_HALF_WIDTH,
+      transform: [{
+        rotate: '-90deg'
+      }]
+    };
+  }, [showArrow, position, theme, ARROW_HALF_WIDTH, ARROW_HEIGHT]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      ref: wrapperRef,
+      collapsable: false,
+      onLayout: measureAnchor,
+      testID: testID,
+      children: clonedChild
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+      visible: visible,
+      transparent: true,
+      statusBarTranslucent: true,
+      presentationStyle: "overFullScreen",
+      animationType: "none",
+      onRequestClose: handleHide,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        style: _reactNative.StyleSheet.absoluteFill,
+        onPress: hideOnContentPress ? handleHide : undefined,
+        accessibilityLabel: "Close tooltip",
+        accessibilityRole: "button",
+        children: visible ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+          accessibilityRole: 'tooltip',
+          accessibilityLiveRegion: "polite",
+          accessibilityLabel: a11yLabel,
+          onLayout: handleContentLayout,
+          style: [{
+            position: 'absolute',
+            top: position.top,
+            left: position.left,
+            maxWidth: resolvedMaxWidth,
+            opacity,
+            transform: [{
+              scale
+            }]
+          }, style, containerStyle],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.tooltip, {
+              backgroundColor: theme.colors.background.inverse,
+              borderRadius: theme.radius.md,
+              paddingHorizontal: theme.spacing.md,
+              paddingVertical: theme.spacing.sm,
+              ...theme.shadows.lg,
+              shadowColor: theme.shadows.lg.shadowColor
+            }],
+            children: typeof content === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [{
+                color: theme.colors.text.inverse,
+                fontSize: theme.typography.fontSize.sm,
+                lineHeight: MESSAGE_LINE_HEIGHT
+              }, messageStyle],
+              children: content
+            }) : content
+          }), arrowStyle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [arrowStyle, arrowStyleOverride],
+            pointerEvents: "none"
+          }) : null]
+        }) : null
+      })
+    })]
+  });
+};
+exports.Tooltip = Tooltip;
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  tooltip: {
+    overflow: 'hidden'
+  }
+});
+var _default = exports.default = Tooltip;
+//# sourceMappingURL=Tooltip.js.map

package/lib/commonjs/components/Tooltip/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Tooltip", {
+  enumerable: true,
+  get: function () {
+    return _Tooltip.Tooltip;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Tooltip.default;
+  }
+});
+var _Tooltip = _interopRequireWildcard(require("./Tooltip.js"));
+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); }
+//# sourceMappingURL=index.js.map