@webority/mobile-ui 0.0.39 → 0.1.0

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

@@ -1,192 +1 @@
-"use strict";
-
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useTheme } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/hapticUtils.js";
-import Toast from "./Toast.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const MAX_VISIBLE = 3;
-const ToastContext = /*#__PURE__*/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;
-export const ToastProvider = ({
-  children,
-  maxVisible = MAX_VISIBLE,
-  topOffset,
-  bottomOffset
-}) => {
-  const theme = useTheme();
-  const insets = useSafeAreaInsets();
-  const [queue, setQueue] = useState([]);
-  const queueRef = useRef([]);
-  queueRef.current = queue;
-  const hide = useCallback(id => {
-    setQueue(prev => prev.filter(t => t.id !== id));
-  }, []);
-  const hideAll = useCallback(() => {
-    setQueue([]);
-  }, []);
-  const show = useCallback(opts => {
-    const id = makeId();
-    const item = {
-      ...opts,
-      id
-    };
-    const haptic = opts.haptic === undefined ? defaultHaptic(opts.variant) : opts.haptic;
-    if (haptic !== false) {
-      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 = useMemo(() => ({
-    show,
-    hide,
-    hideAll
-  }), [show, hide, hideAll]);
-  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 = useMemo(() => buildStyles(), []);
-  return /*#__PURE__*/_jsxs(ToastContext.Provider, {
-    value: api,
-    children: [children, /*#__PURE__*/_jsx(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__*/_jsx(Toast, {
-        toast: toast,
-        index: topToasts.length - 1 - idx,
-        onDismiss: hide
-      }, toast.id))
-    }), /*#__PURE__*/_jsx(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__*/_jsx(Toast, {
-        toast: toast,
-        index: bottomToasts.length - 1 - idx,
-        onDismiss: hide
-      }, toast.id))
-    })]
-  });
-};
-export const useToast = () => {
-  const ctx = useContext(ToastContext);
-  if (!ctx) {
-    throw new Error('useToast must be used within a <ToastProvider>.');
-  }
-  return ctx;
-};
-let warned = false;
-const warnNoProvider = () => {
-  if (warned) {
-    return;
-  }
-  warned = true;
-  if (typeof __DEV__ !== 'undefined' && __DEV__) {
-    // biome-ignore lint/suspicious/noConsole: deliberate development-only warning that toast() had no provider
-    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 : '';
-};
-export const 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 = () => StyleSheet.create({
-  layer: {
-    position: 'absolute',
-    left: 0,
-    right: 0
-  },
-  top: {
-    alignItems: 'stretch'
-  },
-  bottom: {
-    alignItems: 'stretch'
-  }
-});
-//# sourceMappingURL=ToastProvider.js.map
+import t,{createContext as o,useCallback as e,useContext as s,useEffect as n,useMemo as r,useRef as i,useState as a}from"react";import{StyleSheet as l,View as c}from"react-native";import{useSafeAreaInsets as u}from"react-native-safe-area-context";import{useTheme as f}from"../../theme/index.js";import{triggerHaptic as d}from"../../utils/hapticUtils.js";import p from"./Toast.js";import{jsx as m,jsxs as h,Fragment as g}from"react/jsx-runtime";const v=o(null),w=o(null);let b=0;let D=0;const makeHostId=()=>(D+=1,D);let _=0,x=null;const setActiveApi=t=>{x=t},getActiveApi=()=>x;export const ToastProvider=({children:t,maxVisible:o=3,topOffset:s,bottomOffset:l,defaultDuration:c,haptics:u})=>{const f=i({defaultDuration:c,haptics:u});f.current={defaultDuration:c,haptics:u};const[p,g]=a([]),[D,x]=a([]),y=e(t=>{g(o=>o.filter(o=>o.id!==t))},[]),O=e(()=>{g([])},[]),T=e(t=>{const e=(b+=1,`toast-${Date.now().toString(36)}-${b.toString(36)}`),{defaultDuration:s,haptics:n}=f.current,r={...t,duration:t.duration??s,id:e,shownAt:Date.now()},i=void 0!==t.haptic?t.haptic:((t,o)=>{if(!1===t)return!1;const e=t?.[o??"default"];return void 0===e?(t=>{switch(t){case"error":return"notificationError";case"success":return"notificationSuccess";case"warning":return"notificationWarning";default:return"selection"}})(o):e})(n,t.variant);return!1!==i&&d(i),g(t=>{const e=[...t,r];return e.length>o?e.slice(e.length-o):e}),e},[o]),A=r(()=>({show:T,hide:y,hideAll:O}),[T,y,O]);n(()=>(_+=1,setActiveApi(A),()=>{_-=1,_<=0&&(_=0,setActiveApi(null))}),[A]);const E=e(t=>{x(o=>[...o,t])},[]),j=e(t=>{x(o=>o.filter(o=>o!==t))},[]),H=D.length>0?D[D.length-1]:null,I=r(()=>({register:E,unregister:j,activeHostId:H,queue:p,hide:y,topOffset:s,bottomOffset:l}),[E,j,H,p,y,s,l]);return m(v.Provider,{value:A,children:h(w.Provider,{value:I,children:[t,null===H?m(ToastLayers,{queue:p,onDismiss:y,topOffset:s,bottomOffset:l}):null]})})};let y=!1;export const ToastHost=()=>{const t=s(w),[o]=a(makeHostId),e=t?.register,r=t?.unregister;return n(()=>{if(e&&r)return e(o),()=>r(o);y||(y=!0,"undefined"!=typeof __DEV__&&__DEV__&&console.warn("[toast] <ToastHost /> rendered outside a <ToastProvider />; it renders nothing. Mount a provider near your app root."))},[e,r,o]),t&&t.activeHostId===o?m(ToastLayers,{queue:t.queue,onDismiss:t.hide,topOffset:t.topOffset,bottomOffset:t.bottomOffset}):null};const ToastLayers=({queue:t,onDismiss:o,topOffset:e,bottomOffset:s})=>{const n=f(),i=u(),a=r(()=>buildStyles(),[]),l=t.filter(t=>"top"===(t.position??"bottom")),d=t.filter(t=>"bottom"===(t.position??"bottom"));return h(g,{children:[m(c,{testID:"toast-layer-top",pointerEvents:"box-none",style:[a.layer,a.top,{top:(e??i.top)+n.spacing.sm,paddingHorizontal:n.spacing.md}],children:l.map((t,e)=>m(p,{toast:t,index:l.length-1-e,shownAt:t.shownAt,onDismiss:o},t.id))}),m(c,{testID:"toast-layer-bottom",pointerEvents:"box-none",style:[a.layer,a.bottom,{bottom:(s??i.bottom)+n.spacing.sm,paddingHorizontal:n.spacing.md}],children:d.map((t,e)=>m(p,{toast:t,index:d.length-1-e,shownAt:t.shownAt,onDismiss:o},t.id))})]})};export const useToast=()=>{const t=s(v);if(!t)throw new Error("useToast must be used within a <ToastProvider>.");return t};let O=!1;const warnNoProvider=()=>{O||(O=!0,"undefined"!=typeof __DEV__&&__DEV__&&console.warn("[toast] No <ToastProvider /> mounted; toast() calls are no-ops. Mount a provider near your app root."))},proxy=t=>{const o=getActiveApi();if(!o)return warnNoProvider(),"";const e=t(o);return"string"==typeof e?e:""};export const toast={show:t=>proxy(o=>o.show(t)),success:(t,o)=>proxy(e=>e.show({...o,message:t,variant:"success"})),error:(t,o)=>proxy(e=>e.show({...o,message:t,variant:"error"})),warning:(t,o)=>proxy(e=>e.show({...o,message:t,variant:"warning"})),info:(t,o)=>proxy(e=>e.show({...o,message:t,variant:"info"})),hideAll:()=>{const t=getActiveApi();t?t.hideAll():warnNoProvider()}};const buildStyles=()=>l.create({layer:{position:"absolute",left:0,right:0},top:{alignItems:"stretch"},bottom:{alignItems:"stretch"}});

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

@@ -1,5 +1 @@
-"use strict";
-
-export { default, Toast } from "./Toast.js";
-export { ToastProvider, toast, useToast } from "./ToastProvider.js";
-//# sourceMappingURL=index.js.map
+export{default,Toast}from"./Toast.js";export{ToastHost,ToastProvider,toast,useToast}from"./ToastProvider.js";

package/lib/module/components/Tooltip/Tooltip.js

@@ -1,407 +1 @@
-"use strict";
-
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Animated, Dimensions, Easing, Modal, Pressable, StyleSheet, Text, View } from 'react-native';
-import { createAnimatedValue, useTheme } from "../../theme/index.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-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 = useTheme();
-  const styles = 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] = useState(false);
-  const visible = isControlled ? Boolean(controlledVisible) : internalVisible;
-  const [anchor, setAnchor] = useState(null);
-  const [size, setSize] = useState({
-    width: 0,
-    height: 0
-  });
-  const wrapperRef = useRef(null);
-  const scale = useRef(createAnimatedValue(visible ? 1 : enableScaleAnimation ? 0.85 : 1)).current;
-  const opacity = useRef(createAnimatedValue(visible ? 1 : 0)).current;
-  const autoHideTimer = useRef(null);
-  const didMount = useRef(false);
-  const setVisible = useCallback(next => {
-    if (!isControlled) {
-      setInternalVisible(next);
-    }
-    onVisibleChange?.(next);
-  }, [isControlled, onVisibleChange]);
-  const measureAnchor = useCallback(() => {
-    if (!wrapperRef.current) {
-      return;
-    }
-    wrapperRef.current.measureInWindow((x, y, width, height) => {
-      setAnchor({
-        x,
-        y,
-        width,
-        height
-      });
-    });
-  }, []);
-  const handleTrigger = useCallback(_event => {
-    measureAnchor();
-    setVisible(true);
-  }, [measureAnchor, setVisible]);
-  const handleHide = 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
-  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 = [Animated.timing(opacity, {
-        toValue: 1,
-        duration: theme.motion.duration.fast,
-        useNativeDriver: true
-      })];
-      if (enableScaleAnimation) {
-        enterAnims.push(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 = 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 = [Animated.timing(opacity, {
-        toValue: 0,
-        duration: exitDurationMs,
-        easing: Easing.bezier(...theme.motion.easing.accelerate),
-        useNativeDriver: true
-      })];
-      if (enableScaleAnimation) {
-        exitAnims.push(Animated.timing(scale, {
-          toValue: 0.85,
-          duration: exitDurationMs,
-          easing: Easing.bezier(...theme.motion.easing.accelerate),
-          useNativeDriver: true
-        }));
-      }
-      anim = 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 = useMemo(() => {
-    const screen = 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.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 = 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__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(View, {
-      ref: wrapperRef,
-      collapsable: false,
-      onLayout: measureAnchor,
-      testID: testID,
-      children: clonedChild
-    }), /*#__PURE__*/_jsx(Modal, {
-      visible: visible,
-      transparent: true,
-      statusBarTranslucent: true,
-      presentationStyle: "overFullScreen",
-      animationType: "none",
-      onRequestClose: handleHide,
-      children: /*#__PURE__*/_jsx(Pressable, {
-        style: StyleSheet.absoluteFill,
-        onPress: hideOnContentPress ? handleHide : undefined,
-        accessibilityLabel: "Close tooltip",
-        accessibilityRole: "button",
-        children: visible ? /*#__PURE__*/_jsxs(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__*/_jsx(View, {
-            style: [styles.tooltip, {
-              backgroundColor: theme.colors.background.inverse,
-              borderRadius: theme.radius.md,
-              ...smoothCorners,
-              paddingHorizontal: theme.spacing.md,
-              paddingVertical: theme.spacing.sm,
-              ...theme.shadows.lg,
-              shadowColor: theme.shadows.lg.shadowColor
-            }],
-            children: typeof content === 'string' ? /*#__PURE__*/_jsx(Text, {
-              style: [{
-                color: theme.colors.text.inverse,
-                fontSize: theme.typography.fontSize.sm,
-                lineHeight: MESSAGE_LINE_HEIGHT
-              }, messageStyle],
-              children: content
-            }) : content
-          }), arrowStyle ? /*#__PURE__*/_jsx(View, {
-            style: [arrowStyle, arrowStyleOverride],
-            pointerEvents: "none"
-          }) : null]
-        }) : null
-      })
-    })]
-  });
-};
-const buildStyles = _theme => StyleSheet.create({
-  tooltip: {
-    overflow: 'hidden'
-  }
-});
-export { Tooltip };
-export default Tooltip;
-//# sourceMappingURL=Tooltip.js.map
+import t,{useCallback as e,useEffect as o,useMemo as r,useRef as i,useState as n}from"react";import{Animated as s,Dimensions as a,Easing as l,Modal as c,Pressable as h,StyleSheet as p,Text as u,View as m}from"react-native";import{createAnimatedValue as d,useTheme as g}from"../../theme/index.js";import{smoothCorners as f}from"../../utils/corners.js";import{ToastHost as b}from"../Toast/ToastProvider.js";import{jsx as y,jsxs as w,Fragment as x}from"react/jsx-runtime";const Tooltip=v=>{const{content:M,children:T,placement:C="auto",trigger:L="longPress",visible:P,onVisibleChange:S,hideOnContentPress:W=!0,maxWidth:D,showArrow:H=!0,accessibilityLabel:O,style:R,containerStyle:V,arrowStyle:j,messageStyle:z,testID:k}=v,B=g(),N=r(()=>buildStyles(B),[B]),A=B.components.tooltip,E=A?.gap??8,F=A?.screenPadding??8,I=A?.pressAutoHideMs??4e3,q=A?.arrowHalfWidth??4,G=A?.arrowHeight??6,J=A?.arrowCornerPadding??12,K=A?.lineHeight??18,Q=D??A?.maxWidth??240,U=A?.enableScaleAnimation??!1,X=A?.exitDurationMs??150,Y="manual"===L||"boolean"==typeof P,[Z,$]=n(!1),_=Y?Boolean(P):Z,[tt,et]=n(null),[ot,rt]=n({width:0,height:0}),it=i(null),nt=i(d(_?1:U?.85:1)).current,st=i(d(_?1:0)).current,at=i(null),lt=i(!1),ct=e(t=>{Y||$(t),S?.(t)},[Y,S]),ht=e(()=>{it.current&&it.current.measureInWindow((t,e,o,r)=>{et({x:t,y:e,width:o,height:r})})},[]),pt=e(t=>{ht(),ct(!0)},[ht,ct]),ut=e(()=>{ct(!1)},[ct]);o(()=>{if(!lt.current)return lt.current=!0,_&&(ht(),"press"===L&&(at.current&&clearTimeout(at.current),at.current=setTimeout(()=>{ut()},I))),()=>{at.current&&(clearTimeout(at.current),at.current=null)};let t;if(_){ht();const e=[s.timing(st,{toValue:1,duration:B.motion.duration.fast,useNativeDriver:!0})];U&&e.push(s.spring(nt,{toValue:1,damping:B.motion.spring.snappy.damping,stiffness:B.motion.spring.snappy.stiffness,mass:B.motion.spring.snappy.mass,useNativeDriver:!0})),t=s.parallel(e),t.start(),"press"===L&&(at.current&&clearTimeout(at.current),at.current=setTimeout(()=>{ut()},I))}else{const e=[s.timing(st,{toValue:0,duration:X,easing:l.bezier(...B.motion.easing.accelerate),useNativeDriver:!0})];U&&e.push(s.timing(nt,{toValue:.85,duration:X,easing:l.bezier(...B.motion.easing.accelerate),useNativeDriver:!0})),t=s.parallel(e),t.start(),at.current&&(clearTimeout(at.current),at.current=null)}return()=>{t?.stop(),at.current&&(clearTimeout(at.current),at.current=null)}},[_]);const mt=r(()=>{const t=a.get("window");if(!tt)return{top:F,left:F,placement:"bottom",arrowOffset:0};const e=ot.width||Math.min(Q,t.width-2*F),o=ot.height||0;let r;if("auto"===C){const e={top:tt.y,bottom:t.height-(tt.y+tt.height),left:tt.x,right:t.width-(tt.x+tt.width)},o=Math.max(e.top,e.bottom,e.left,e.right);r=o===e.bottom?"bottom":o===e.top?"top":o===e.right?"right":"left"}else r=C;let i=0,n=0;"top"===r?(i=tt.y-o-E,n=tt.x+tt.width/2-e/2):"bottom"===r?(i=tt.y+tt.height+E,n=tt.x+tt.width/2-e/2):"left"===r?(i=tt.y+tt.height/2-o/2,n=tt.x-e-E):(i=tt.y+tt.height/2-o/2,n=tt.x+tt.width+E),n=Math.max(F,Math.min(n,t.width-e-F)),i=Math.max(F,Math.min(i,t.height-o-F));let s=0;if("top"===r||"bottom"===r){const t=tt.x+tt.width/2-n,o=J,r=Math.max(o,e-J);s=Math.max(o,Math.min(t,r))}else{const t=tt.y+tt.height/2-i,e=J,r=Math.max(e,o-J);s=Math.max(e,Math.min(t,r))}return{top:i,left:n,placement:r,arrowOffset:s}},[tt,ot,C,Q,F,E,J]),dt={};if("longPress"===L)dt.onLongPress=pt,dt.accessibilityHint="Long press for more info";else if("press"===L){const t=T.props.onPress;dt.onPress=e=>{t?.(e),pt(e)}}const gt=t.cloneElement(T,dt),ft=O??("string"==typeof M?M:"Tooltip"),bt=r(()=>{if(!H)return null;const t=B.colors.background.inverse,e={position:"absolute",width:0,height:0,backgroundColor:"transparent",borderStyle:"solid",borderLeftWidth:q,borderRightWidth:q,borderBottomWidth:G,borderTopWidth:0,borderLeftColor:"transparent",borderRightColor:"transparent",borderTopColor:"transparent",borderBottomColor:t};return"top"===mt.placement?{...e,bottom:-G,left:mt.arrowOffset-q,transform:[{rotate:"180deg"}]}:"bottom"===mt.placement?{...e,top:-G,left:mt.arrowOffset-q}:"left"===mt.placement?{...e,right:-G,top:mt.arrowOffset-q,transform:[{rotate:"90deg"}]}:{...e,left:-G,top:mt.arrowOffset-q,transform:[{rotate:"-90deg"}]}},[H,mt,B,q,G]);return w(x,{children:[y(m,{ref:it,collapsable:!1,onLayout:ht,testID:k,children:gt}),w(c,{visible:_,transparent:!0,statusBarTranslucent:!0,presentationStyle:"overFullScreen",animationType:"none",onRequestClose:ut,children:[y(h,{style:p.absoluteFill,onPress:W?ut:void 0,accessibilityLabel:"Close tooltip",accessibilityRole:"button",children:_?w(s.View,{accessibilityRole:"tooltip",accessibilityLiveRegion:"polite",accessibilityLabel:ft,onLayout:t=>{const{width:e,height:o}=t.nativeEvent.layout;e===ot.width&&o===ot.height||rt({width:e,height:o})},style:[{position:"absolute",top:mt.top,left:mt.left,maxWidth:Q,opacity:st,transform:[{scale:nt}]},R,V],children:[y(m,{style:[N.tooltip,{backgroundColor:B.colors.background.inverse,borderRadius:B.radius.md,...f,paddingHorizontal:B.spacing.md,paddingVertical:B.spacing.sm,...B.shadows.lg,shadowColor:B.shadows.lg.shadowColor}],children:"string"==typeof M?y(u,{style:[{color:B.colors.text.inverse,fontSize:B.typography.fontSize.sm,lineHeight:K},z],children:M}):M}),bt?y(m,{style:[bt,j],pointerEvents:"none"}):null]}):null}),y(b,{})]})]})},buildStyles=t=>p.create({tooltip:{overflow:"hidden"}});export{Tooltip};export default Tooltip;

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

@@ -1,4 +1 @@
-"use strict";
-
-export { default, Tooltip } from "./Tooltip.js";
-//# sourceMappingURL=index.js.map
+export{default,Tooltip}from"./Tooltip.js";