@webority/mobile-ui 0.0.39 → 0.2.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
+"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,Fragment as _Fragment}from"react/jsx-runtime";const MAX_VISIBLE=3,ToastContext=createContext(null),ToastHostContext=createContext(null);let nextId=0;const makeId=()=>(nextId+=1,`toast-${Date.now().toString(36)}-${nextId.toString(36)}`),defaultHaptic=t=>{switch(t){case"error":return"notificationError";case"success":return"notificationSuccess";case"warning":return"notificationWarning";default:return"selection"}},resolveHaptics=(t,e)=>{if(!1===t)return!1;const o=t?.[e??"default"];return void 0===o?defaultHaptic(e):o};let nextHostId=0;const makeHostId=()=>(nextHostId+=1,nextHostId);let providerCount=0,activeApi=null;const setActiveApi=t=>{activeApi=t},getActiveApi=()=>activeApi;export const ToastProvider=({children:t,maxVisible:e=3,topOffset:o,bottomOffset:s,defaultDuration:r,haptics:n})=>{const a=useRef({defaultDuration:r,haptics:n});a.current={defaultDuration:r,haptics:n};const[i,u]=useState([]),[c,l]=useState([]),d=useCallback(t=>{u(e=>e.filter(e=>e.id!==t))},[]),p=useCallback(()=>{u([])},[]),f=useCallback(t=>{const o=makeId(),{defaultDuration:s,haptics:r}=a.current,n={...t,duration:t.duration??s,id:o,shownAt:Date.now()},i=void 0!==t.haptic?t.haptic:resolveHaptics(r,t.variant);return!1!==i&&triggerHaptic(i),u(t=>{const o=[...t,n];return o.length>e?o.slice(o.length-e):o}),o},[e]),m=useMemo(()=>({show:f,hide:d,hideAll:p}),[f,d,p]);useEffect(()=>(providerCount+=1,setActiveApi(m),()=>{providerCount-=1,providerCount<=0&&(providerCount=0,setActiveApi(null))}),[m]);const h=useCallback(t=>{l(e=>[...e,t])},[]),x=useCallback(t=>{l(e=>e.filter(e=>e!==t))},[]),v=c.length>0?c[c.length-1]:null,g=useMemo(()=>({register:h,unregister:x,activeHostId:v,queue:i,hide:d,topOffset:o,bottomOffset:s}),[h,x,v,i,d,o,s]);return _jsx(ToastContext.Provider,{value:m,children:_jsxs(ToastHostContext.Provider,{value:g,children:[t,null===v?_jsx(ToastLayers,{queue:i,onDismiss:d,topOffset:o,bottomOffset:s}):null]})})};let warnedHost=!1;const warnHostWithoutProvider=()=>{warnedHost||(warnedHost=!0,"undefined"!=typeof __DEV__&&__DEV__&&console.warn("[toast] <ToastHost /> rendered outside a <ToastProvider />; it renders nothing. Mount a provider near your app root."))};export const ToastHost=()=>{const t=useContext(ToastHostContext),[e]=useState(makeHostId),o=t?.register,s=t?.unregister;return useEffect(()=>{if(o&&s)return o(e),()=>s(e);warnHostWithoutProvider()},[o,s,e]),t&&t.activeHostId===e?_jsx(ToastLayers,{queue:t.queue,onDismiss:t.hide,topOffset:t.topOffset,bottomOffset:t.bottomOffset}):null};const ToastLayers=({queue:t,onDismiss:e,topOffset:o,bottomOffset:s})=>{const r=useTheme(),n=useSafeAreaInsets(),a=useMemo(()=>buildStyles(),[]),i=t.filter(t=>"top"===(t.position??"bottom")),u=t.filter(t=>"bottom"===(t.position??"bottom"));return _jsxs(_Fragment,{children:[_jsx(View,{testID:"toast-layer-top",pointerEvents:"box-none",style:[a.layer,a.top,{top:(o??n.top)+r.spacing.sm,paddingHorizontal:r.spacing.md}],children:i.map((t,o)=>_jsx(Toast,{toast:t,index:i.length-1-o,shownAt:t.shownAt,onDismiss:e},t.id))}),_jsx(View,{testID:"toast-layer-bottom",pointerEvents:"box-none",style:[a.layer,a.bottom,{bottom:(s??n.bottom)+r.spacing.sm,paddingHorizontal:r.spacing.md}],children:u.map((t,o)=>_jsx(Toast,{toast:t,index:u.length-1-o,shownAt:t.shownAt,onDismiss:e},t.id))})]})};export const useToast=()=>{const t=useContext(ToastContext);if(!t)throw new Error("useToast must be used within a <ToastProvider>.");return t};let warned=!1;const warnNoProvider=()=>{warned||(warned=!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 e=getActiveApi();if(!e)return warnNoProvider(),"";const o=t(e);return"string"==typeof o?o:""};export const toast={show:t=>proxy(e=>e.show(t)),success:(t,e)=>proxy(o=>o.show({...e,message:t,variant:"success"})),error:(t,e)=>proxy(o=>o.show({...e,message:t,variant:"error"})),warning:(t,e)=>proxy(o=>o.show({...e,message:t,variant:"warning"})),info:(t,e)=>proxy(o=>o.show({...e,message:t,variant:"info"})),hideAll:()=>{const t=getActiveApi();t?t.hideAll():warnNoProvider()}};const buildStyles=()=>StyleSheet.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
+"use strict";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
+"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{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const DEFAULT_TOOLTIP_GAP=8,DEFAULT_SCREEN_PADDING=8,DEFAULT_PRESS_AUTO_HIDE_MS=4e3,DEFAULT_ARROW_HALF_WIDTH=4,DEFAULT_ARROW_HEIGHT=6,DEFAULT_ARROW_CORNER_PADDING=12,DEFAULT_MAX_WIDTH=240,DEFAULT_LINE_HEIGHT=18,Tooltip=e=>{const{content:t,children:o,placement:r="auto",trigger:s="longPress",visible:i,onVisibleChange:n,hideOnContentPress:a=!0,maxWidth:l,showArrow:u=!0,accessibilityLabel:c,style:m,containerStyle:h,arrowStyle:d,messageStyle:p,testID:g}=e,f=useTheme(),b=useMemo(()=>buildStyles(f),[f]),y=f.components.tooltip,w=y?.gap??8,x=y?.screenPadding??8,T=y?.pressAutoHideMs??4e3,_=y?.arrowHalfWidth??4,A=y?.arrowHeight??6,R=y?.arrowCornerPadding??12,S=y?.lineHeight??18,D=l??y?.maxWidth??240,E=y?.enableScaleAnimation??!1,v=y?.exitDurationMs??150,C="manual"===s||"boolean"==typeof i,[M,L]=useState(!1),j=C?Boolean(i):M,[H,P]=useState(null),[F,O]=useState({width:0,height:0}),V=useRef(null),W=useRef(createAnimatedValue(j?1:E?.85:1)).current,I=useRef(createAnimatedValue(j?1:0)).current,k=useRef(null),N=useRef(!1),U=useCallback(e=>{C||L(e),n?.(e)},[C,n]),z=useCallback(()=>{V.current&&V.current.measureInWindow((e,t,o,r)=>{P({x:e,y:t,width:o,height:r})})},[]),G=useCallback(e=>{z(),U(!0)},[z,U]),B=useCallback(()=>{U(!1)},[U]);useEffect(()=>{if(!N.current)return N.current=!0,j&&(z(),"press"===s&&(k.current&&clearTimeout(k.current),k.current=setTimeout(()=>{B()},T))),()=>{k.current&&(clearTimeout(k.current),k.current=null)};let e;if(j){z();const t=[Animated.timing(I,{toValue:1,duration:f.motion.duration.fast,useNativeDriver:!0})];E&&t.push(Animated.spring(W,{toValue:1,damping:f.motion.spring.snappy.damping,stiffness:f.motion.spring.snappy.stiffness,mass:f.motion.spring.snappy.mass,useNativeDriver:!0})),e=Animated.parallel(t),e.start(),"press"===s&&(k.current&&clearTimeout(k.current),k.current=setTimeout(()=>{B()},T))}else{const t=[Animated.timing(I,{toValue:0,duration:v,easing:Easing.bezier(...f.motion.easing.accelerate),useNativeDriver:!0})];E&&t.push(Animated.timing(W,{toValue:.85,duration:v,easing:Easing.bezier(...f.motion.easing.accelerate),useNativeDriver:!0})),e=Animated.parallel(t),e.start(),k.current&&(clearTimeout(k.current),k.current=null)}return()=>{e?.stop(),k.current&&(clearTimeout(k.current),k.current=null)}},[j]);const q=useMemo(()=>{const e=Dimensions.get("window");if(!H)return{top:x,left:x,placement:"bottom",arrowOffset:0};const t=F.width||Math.min(D,e.width-2*x),o=F.height||0;let s;if("auto"===r){const t={top:H.y,bottom:e.height-(H.y+H.height),left:H.x,right:e.width-(H.x+H.width)},o=Math.max(t.top,t.bottom,t.left,t.right);s=o===t.bottom?"bottom":o===t.top?"top":o===t.right?"right":"left"}else s=r;let i=0,n=0;"top"===s?(i=H.y-o-w,n=H.x+H.width/2-t/2):"bottom"===s?(i=H.y+H.height+w,n=H.x+H.width/2-t/2):"left"===s?(i=H.y+H.height/2-o/2,n=H.x-t-w):(i=H.y+H.height/2-o/2,n=H.x+H.width+w),n=Math.max(x,Math.min(n,e.width-t-x)),i=Math.max(x,Math.min(i,e.height-o-x));let a=0;if("top"===s||"bottom"===s){const e=H.x+H.width/2-n,o=R,r=Math.max(o,t-R);a=Math.max(o,Math.min(e,r))}else{const e=H.y+H.height/2-i,t=R,r=Math.max(t,o-R);a=Math.max(t,Math.min(e,r))}return{top:i,left:n,placement:s,arrowOffset:a}},[H,F,r,D,x,w,R]),X={};if("longPress"===s)X.onLongPress=G,X.accessibilityHint="Long press for more info";else if("press"===s){const e=o.props.onPress;X.onPress=t=>{e?.(t),G(t)}}const J=React.cloneElement(o,X),K=c??("string"==typeof t?t:"Tooltip"),Q=useMemo(()=>{if(!u)return null;const e=f.colors.background.inverse,t={position:"absolute",width:0,height:0,backgroundColor:"transparent",borderStyle:"solid",borderLeftWidth:_,borderRightWidth:_,borderBottomWidth:A,borderTopWidth:0,borderLeftColor:"transparent",borderRightColor:"transparent",borderTopColor:"transparent",borderBottomColor:e};return"top"===q.placement?{...t,bottom:-A,left:q.arrowOffset-_,transform:[{rotate:"180deg"}]}:"bottom"===q.placement?{...t,top:-A,left:q.arrowOffset-_}:"left"===q.placement?{...t,right:-A,top:q.arrowOffset-_,transform:[{rotate:"90deg"}]}:{...t,left:-A,top:q.arrowOffset-_,transform:[{rotate:"-90deg"}]}},[u,q,f,_,A]);return _jsxs(_Fragment,{children:[_jsx(View,{ref:V,collapsable:!1,onLayout:z,testID:g,children:J}),_jsxs(Modal,{visible:j,transparent:!0,statusBarTranslucent:!0,presentationStyle:"overFullScreen",animationType:"none",onRequestClose:B,children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:a?B:void 0,accessibilityLabel:"Close tooltip",accessibilityRole:"button",children:j?_jsxs(Animated.View,{accessibilityRole:"tooltip",accessibilityLiveRegion:"polite",accessibilityLabel:K,onLayout:e=>{const{width:t,height:o}=e.nativeEvent.layout;t===F.width&&o===F.height||O({width:t,height:o})},style:[{position:"absolute",top:q.top,left:q.left,maxWidth:D,opacity:I,transform:[{scale:W}]},m,h],children:[_jsx(View,{style:[b.tooltip,{backgroundColor:f.colors.background.inverse,borderRadius:f.radius.md,...smoothCorners,paddingHorizontal:f.spacing.md,paddingVertical:f.spacing.sm,...f.shadows.lg,shadowColor:f.shadows.lg.shadowColor}],children:"string"==typeof t?_jsx(Text,{style:[{color:f.colors.text.inverse,fontSize:f.typography.fontSize.sm,lineHeight:S},p],children:t}):t}),Q?_jsx(View,{style:[Q,d],pointerEvents:"none"}):null]}):null}),_jsx(ToastHost,{})]})]})},buildStyles=e=>StyleSheet.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
+"use strict";export{default,Tooltip}from"./Tooltip.js";