react-native-system-ui 1.0.1 → 1.0.3

package/dist/cjs/components/picker/index.js

@@ -1,15 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Picker", {
-  enumerable: true,
-  get: function () {
-    return _Picker.default;
-  }
-});
-exports.default = void 0;
-var _Picker = _interopRequireDefault(require("./Picker"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = _Picker.default;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Picker",{enumerable:!0,get:function(){return _Picker.default}}),exports.default=void 0;var _Picker=_interopRequireDefault(require("./Picker"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=_Picker.default;

package/dist/cjs/components/picker/tokens.js

@@ -1,53 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.usePickerTokens = void 0;
-var _designSystem = require("../../design-system");
-const createPickerTokens = foundations => {
-  const {
-    palette,
-    spacing,
-    fontSize,
-    typography,
-    radii
-  } = foundations;
-  return {
-    defaults: {
-      itemHeight: 44,
-      visibleItemCount: 5,
-      showToolbar: true,
-      toolbarPosition: 'top',
-      swipeDuration: 700,
-      maskType: 'gradient'
-    },
-    colors: {
-      background: '#ffffff',
-      indicator: palette.default[200] ?? '#ebedf0',
-      text: palette.default[900],
-      textMuted: palette.default[900],
-      textDisabled: palette.default[400],
-      confirm: palette.primary[600],
-      cancel: palette.default[600],
-      mask: '#ffffff',
-      loadingMask: 'rgba(255,255,255,0.65)'
-    },
-    spacing: {
-      toolbarHeight: 44,
-      actionPadding: spacing.lg
-    },
-    typography: {
-      optionSize: fontSize.md,
-      toolbarSize: fontSize.md,
-      fontFamily: typography.fontFamily,
-      optionWeight: typography.weight.regular,
-      toolbarWeight: typography.weight.medium
-    },
-    radius: {
-      toolbar: radii.none,
-      container: radii.xs
-    }
-  };
-};
-const usePickerTokens = exports.usePickerTokens = (0, _designSystem.createComponentTokensHook)('picker', createPickerTokens);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.usePickerTokens=void 0;var _designSystem=require("../../design-system");const createPickerTokens=e=>{const{palette:t,spacing:o,fontSize:i,typography:a,radii:r}=e;return{defaults:{itemHeight:44,visibleItemCount:5,showToolbar:!0,toolbarPosition:"top",swipeDuration:700,maskType:"gradient"},colors:{background:"#ffffff",indicator:t.default[200]??"#ebedf0",text:t.default[900],textMuted:t.default[900],textDisabled:t.default[400],confirm:t.primary[600],cancel:t.default[600],mask:"#ffffff",loadingMask:"rgba(255,255,255,0.65)"},spacing:{toolbarHeight:44,actionPadding:o.lg},typography:{optionSize:i.md,toolbarSize:i.md,fontFamily:a.fontFamily,optionWeight:a.weight.regular,toolbarWeight:a.weight.medium},radius:{toolbar:r.none,container:r.xs}}},usePickerTokens=exports.usePickerTokens=(0,_designSystem.createComponentTokensHook)("picker",createPickerTokens);

package/dist/cjs/components/popup/Popup.js

@@ -1,518 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Popup = void 0;
-function _react() {
-  const data = _interopRequireWildcard(require("react"));
-  _react = function () {
-    return data;
-  };
-  return data;
-}
-function _reactNative() {
-  const data = require("react-native");
-  _reactNative = function () {
-    return data;
-  };
-  return data;
-}
-var _safeAreaView = require("../safe-area-view");
-var _platform = require("../../platform");
-var _animation = require("../../hooks/animation");
-var _createPlatformShadow = require("../../utils/createPlatformShadow");
-var _validate = require("../../utils/validate");
-function _reactNativeSystemIcon() {
-  const data = require("react-native-system-icon");
-  _reactNativeSystemIcon = function () {
-    return data;
-  };
-  return data;
-}
-var _Portal = _interopRequireDefault(require("../portal/Portal"));
-var _hooks = require("../../hooks");
-var _useLocale = require("../config-provider/useLocale");
-var _useDirection = require("../config-provider/useDirection");
-var _tokens = require("./tokens");
-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); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const AnimatedPressable = _reactNative().Animated.createAnimatedComponent(_reactNative().Pressable);
-const EASE_OUT = _reactNative().Easing.bezier(0.075, 0.82, 0.165, 1.0);
-const EASE_IN = _reactNative().Easing.bezier(0.55, 0.055, 0.675, 0.19);
-const CAPTURE = () => true;
-const placementConfig = {
-  top: {
-    container: {
-      justifyContent: 'flex-start',
-      alignItems: 'center'
-    },
-    axis: 'y'
-  },
-  bottom: {
-    container: {
-      justifyContent: 'flex-end',
-      alignItems: 'center'
-    },
-    axis: 'y'
-  },
-  left: {
-    container: {
-      justifyContent: 'center',
-      alignItems: 'flex-start'
-    },
-    axis: 'x'
-  },
-  right: {
-    container: {
-      justifyContent: 'center',
-      alignItems: 'flex-end'
-    },
-    axis: 'x'
-  },
-  center: {
-    container: {
-      justifyContent: 'center',
-      alignItems: 'center'
-    },
-    axis: 'y'
-  }
-};
-const buildRadius = (round, p, r) => {
-  if (!round) return;
-  if (p === 'top') return {
-    borderBottomLeftRadius: r,
-    borderBottomRightRadius: r
-  };
-  if (p === 'bottom') return {
-    borderTopLeftRadius: r,
-    borderTopRightRadius: r
-  };
-  if (p === 'left') return {
-    borderTopRightRadius: r,
-    borderBottomRightRadius: r
-  };
-  if (p === 'right') return {
-    borderTopLeftRadius: r,
-    borderBottomLeftRadius: r
-  };
-  return {
-    borderRadius: r
-  };
-};
-const hiddenStyle = {
-  opacity: 0,
-  shadowOpacity: 0,
-  shadowRadius: 0,
-  elevation: 0
-};
-const PopupImpl = props => {
-  const locale = (0, _useLocale.useLocale)();
-  const layoutDir = (0, _useDirection.useDirection)();
-  const {
-    visible,
-    placement: placementProp,
-    position,
-    title,
-    description,
-    tokensOverride,
-    overlay = true,
-    overlayStyle,
-    overlayAccessibilityLabel = locale?.vanPopup?.closeOverlay ?? 'Close overlay',
-    closeOnOverlayPress,
-    closeOnClickOverlay,
-    overlayTestID = 'popup-overlay',
-    closeable = false,
-    closeIcon,
-    closeIconPosition = 'top-right',
-    round,
-    safeArea = false,
-    safeAreaInsetTop = false,
-    safeAreaInsetBottom: safeBottomP,
-    lockScroll = true,
-    destroyOnClose = true,
-    duration = 300,
-    zIndex,
-    closeOnBackPress = false,
-    closeOnPopstate = false,
-    children,
-    beforeClose,
-    onClickOverlay,
-    onClose,
-    onOpen,
-    onOpened,
-    onClosed,
-    stopPropagation = true,
-    style,
-    contentAnimationStyle,
-    ...rest
-  } = props;
-  const placement = placementProp ?? position ?? 'center';
-  const closeOvl = closeOnClickOverlay ?? closeOnOverlayPress ?? true;
-  const isCenter = placement === 'center';
-  const safeAreaInsetBottom = safeBottomP ?? false;
-  const tokens = (0, _tokens.usePopupTokens)(tokensOverride);
-  const reducedMotion = (0, _animation.useReducedMotion)();
-  const cbRef = (0, _react().useRef)({
-    onOpened,
-    onClosed,
-    onOpen,
-    onClose,
-    beforeClose,
-    onClickOverlay
-  });
-  cbRef.current = {
-    onOpened,
-    onClosed,
-    onOpen,
-    onClose,
-    beforeClose,
-    onClickOverlay
-  };
-  const ds = (0, _react().useMemo)(() => {
-    const shadow = (0, _createPlatformShadow.createPlatformShadow)(tokens.shadow);
-    const {
-      colors: c,
-      spacing: s,
-      typography: t,
-      layout: l
-    } = tokens;
-    return {
-      popup: {
-        backgroundColor: c.background,
-        padding: s.padding,
-        ...shadow
-      },
-      title: {
-        color: c.title,
-        fontFamily: t.fontFamily,
-        fontSize: t.titleSize,
-        fontWeight: t.titleWeight,
-        marginHorizontal: s.descriptionHorizontal,
-        textAlign: 'center'
-      },
-      titleWrap: {
-        marginTop: s.titleTop,
-        marginBottom: s.titleBottom,
-        marginHorizontal: s.descriptionHorizontal,
-        alignItems: 'center'
-      },
-      desc: {
-        color: c.description,
-        fontFamily: t.fontFamily,
-        fontSize: t.descriptionSize,
-        lineHeight: t.descriptionLineHeight
-      },
-      descWrap: {
-        marginHorizontal: s.descriptionHorizontal,
-        marginBottom: s.descriptionBottom
-      },
-      closeBase: {
-        minWidth: s.closeIconSize,
-        minHeight: s.closeIconSize,
-        padding: s.closeIconPadding
-      },
-      closeDef: {
-        width: s.closeIconSize,
-        height: s.closeIconSize
-      },
-      side: {
-        width: l.sideWidth,
-        maxWidth: l.maxWidth
-      },
-      center: {
-        minWidth: l.minWidth,
-        maxWidth: l.centerMaxWidth
-      }
-    };
-  }, [tokens]);
-  const [mounted, setMounted] = (0, _react().useState)(visible);
-  const [interVis, setInterVis] = (0, _react().useState)(visible);
-  const isOpen = visible || interVis;
-  const canCloseOvl = closeOvl && (onClose || beforeClose);
-  const progress = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
-  const animRef = (0, _react().useRef)(null);
-  const seqRef = (0, _react().useRef)(0);
-  const prevVis = (0, _react().useRef)(visible);
-  const closingRef = (0, _react().useRef)(false);
-  const isV = placement === 'top' || placement === 'bottom';
-  const isH = placement === 'left' || placement === 'right';
-  const dir = placement === 'top' || placement === 'left' ? -1 : 1;
-  const runAnim = (0, _react().useCallback)((show, rm) => {
-    seqRef.current += 1;
-    const seq = seqRef.current;
-    animRef.current?.stop();
-    const d = rm ? 0 : duration;
-    const a = _reactNative().Animated.timing(progress, {
-      toValue: show ? 1 : 0,
-      duration: d,
-      easing: show ? EASE_OUT : EASE_IN,
-      useNativeDriver: _platform.nativeDriverEnabled,
-      isInteraction: false
-    });
-    animRef.current = a;
-    a.start(({
-      finished
-    }) => {
-      if (!finished || seq !== seqRef.current) return;
-      if (show) cbRef.current.onOpened?.();else {
-        setInterVis(false);
-        if (destroyOnClose) setMounted(false);
-        cbRef.current.onClosed?.();
-      }
-    });
-  }, [destroyOnClose, duration, progress]);
-  (0, _react().useEffect)(() => {
-    if (visible) {
-      setMounted(true);
-      setInterVis(true);
-      runAnim(true, reducedMotion);
-    } else {
-      if (prevVis.current) runAnim(false, reducedMotion);
-    }
-  }, [runAnim, visible, reducedMotion]);
-  (0, _react().useEffect)(() => {
-    if (visible && !prevVis.current) cbRef.current.onOpen?.();
-    prevVis.current = visible;
-  }, [visible]);
-  (0, _react().useEffect)(() => () => {
-    animRef.current?.stop();
-  }, []);
-  const requestClose = (0, _react().useCallback)(async reason => {
-    if (closingRef.current) return;
-    closingRef.current = true;
-    try {
-      if (cbRef.current.beforeClose) {
-        const r = await cbRef.current.beforeClose(reason);
-        if (r === false) return;
-      }
-      ;
-      cbRef.current.onClose?.();
-    } finally {
-      closingRef.current = false;
-    }
-  }, []);
-  (0, _react().useEffect)(() => {
-    if (!closeOnPopstate) return;
-    return (0, _platform.addPopStateListener)(() => {
-      if (visible) requestClose('close');
-    });
-  }, [closeOnPopstate, requestClose, visible]);
-  const handleOvlPress = (0, _react().useCallback)(() => {
-    cbRef.current.onClickOverlay?.();
-    if (closeOvl) requestClose('overlay');
-  }, [requestClose, closeOvl]);
-  const handleClosePress = (0, _react().useCallback)(() => requestClose('close-icon'), [requestClose]);
-  const handleEscape = (0, _react().useCallback)(() => requestClose('close'), [requestClose]);
-  const {
-    zIndex: stackZ
-  } = (0, _hooks.useOverlayStack)({
-    visible: isOpen,
-    onClose: handleEscape,
-    closeOnBack: closeOnBackPress,
-    lockScroll,
-    zIndex,
-    type: 'popup'
-  });
-  const {
-    overlayRef,
-    overlayProps
-  } = (0, _hooks.useAriaOverlay)({
-    isOpen,
-    onClose: () => requestClose('overlay'),
-    isDismissable: closeOvl,
-    overlayProps: {
-      ...(_reactNative().Platform.OS === 'android' ? {} : {
-        accessibilityRole: 'dialog'
-      }),
-      accessibilityLiveRegion: 'polite'
-    }
-  });
-  const {
-    onLayout: ovlOnLayout,
-    ...ovlRest
-  } = overlayProps;
-  const contentProps = (0, _react().useMemo)(() => stopPropagation ? {
-    ...ovlRest,
-    onStartShouldSetResponder: CAPTURE
-  } : ovlRest, [ovlRest, stopPropagation]);
-  const cfg = placementConfig[placement];
-  const radiusStyle = buildRadius(round, placement, tokens.radius.round);
-  const {
-    width: wW,
-    height: wH
-  } = (0, _reactNative().useWindowDimensions)();
-  const dist = isH ? wW : isV ? wH : 0;
-  const translateT = (0, _react().useMemo)(() => {
-    if (isCenter) return null;
-    const out = [dist * dir, 0];
-    return cfg.axis === 'y' ? {
-      translateY: progress.interpolate({
-        inputRange: [0, 1],
-        outputRange: out
-      })
-    } : {
-      translateX: progress.interpolate({
-        inputRange: [0, 1],
-        outputRange: out
-      })
-    };
-  }, [cfg.axis, dir, dist, isCenter, progress]);
-  const baseT = (0, _react().useMemo)(() => translateT ? [translateT] : [], [translateT]);
-  const animStyle = (0, _react().useMemo)(() => {
-    const et = contentAnimationStyle?.transform;
-    const t = Array.isArray(et) ? [...baseT, ...et] : baseT;
-    const s = {
-      ...contentAnimationStyle,
-      transform: t
-    };
-    if (isCenter) return {
-      ...s,
-      opacity: progress
-    };
-    if (contentAnimationStyle?.opacity == null) return {
-      ...s,
-      opacity: 1
-    };
-    return s;
-  }, [baseT, contentAnimationStyle, isCenter, progress]);
-  const [saTopH, setSaTopH] = (0, _react().useState)(0);
-  const onSaTop = (0, _react().useCallback)(e => setSaTopH(e.nativeEvent.layout.height), []);
-  const shouldRender = mounted || visible;
-  const hidden = !isOpen;
-  const hasHeader = (0, _validate.isRenderable)(title) || (0, _validate.isRenderable)(description);
-  const headerNode = (0, _react().useMemo)(() => {
-    if (!hasHeader) return null;
-    const pad = tokens.spacing.closeIconRight + tokens.spacing.closeIconSize;
-    const ps = closeable && closeIconPosition.startsWith('top-') ? closeIconPosition.endsWith('right') ? {
-      paddingRight: pad
-    } : {
-      paddingLeft: pad
-    } : undefined;
-    const renderH = (n, ts, ws) => !(0, _validate.isRenderable)(n) ? null : (0, _validate.isText)(n) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-      style: ts
-    }, n) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: ws
-    }, n);
-    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: [S.header, ps]
-    }, renderH(title, [S.title, ds.title], ds.titleWrap), renderH(description, [S.desc, ds.desc], ds.descWrap));
-  }, [closeable, closeIconPosition, description, ds, hasHeader, title, tokens.spacing.closeIconRight, tokens.spacing.closeIconSize]);
-  const closeNode = (0, _react().useMemo)(() => {
-    if (!closeable) return null;
-    const custom = closeIcon != null;
-    const v = closeIconPosition.includes('bottom') ? {
-      bottom: tokens.spacing.closeIconTop
-    } : {
-      top: tokens.spacing.closeIconTop + saTopH
-    };
-    const isRtl = layoutDir === 'rtl';
-    const h = closeIconPosition.endsWith('left') ? isRtl ? {
-      right: tokens.spacing.closeIconRight
-    } : {
-      left: tokens.spacing.closeIconRight
-    } : isRtl ? {
-      left: tokens.spacing.closeIconRight
-    } : {
-      right: tokens.spacing.closeIconRight
-    };
-    return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
-      style: [S.closeBase, ds.closeBase, v, h, !custom && ds.closeDef],
-      hitSlop: 8,
-      onPress: handleClosePress
-    }, custom ? closeIcon : /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Cross, {
-      size: 22,
-      fill: tokens.colors.closeIcon,
-      color: tokens.colors.closeIcon
-    }));
-  }, [closeIcon, closeIconPosition, closeable, ds, handleClosePress, saTopH, tokens.colors.closeIcon, tokens.spacing.closeIconRight, tokens.spacing.closeIconTop]);
-  const body = hasHeader ? /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, headerNode, children) : children;
-  if (!shouldRender) return null;
-  const rz = stackZ ?? zIndex;
-  const safeContent = safeArea ? /*#__PURE__*/_react().default.createElement(_safeAreaView.SafeAreaView, null, body) : /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, safeAreaInsetTop && /*#__PURE__*/_react().default.createElement(_safeAreaView.SafeAreaView, {
-    edge: "top",
-    onLayout: onSaTop,
-    pointerEvents: "none"
-  }), body, safeAreaInsetBottom && /*#__PURE__*/_react().default.createElement(_safeAreaView.SafeAreaView, {
-    edge: "bottom",
-    pointerEvents: "none"
-  }));
-  return /*#__PURE__*/_react().default.createElement(_Portal.default, null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [S.root, rz ? {
-      zIndex: rz
-    } : undefined],
-    pointerEvents: "box-none"
-  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [S.ctr, cfg.container],
-    pointerEvents: isOpen ? 'auto' : 'none',
-    accessibilityViewIsModal: isOpen,
-    accessibilityLiveRegion: "polite",
-    onAccessibilityEscape: handleEscape
-  }, overlay && isOpen ? /*#__PURE__*/_react().default.createElement(AnimatedPressable, _extends({
-    testID: overlayTestID,
-    style: [S.ovl, {
-      backgroundColor: tokens.colors.overlay,
-      opacity: progress
-    }, overlayStyle],
-    renderToHardwareTextureAndroid: _reactNative().Platform.OS === 'android',
-    shouldRasterizeIOS: _reactNative().Platform.OS === 'ios',
-    pointerEvents: isOpen ? 'auto' : 'none'
-  }, canCloseOvl ? {
-    accessibilityRole: 'button',
-    accessibilityLabel: overlayAccessibilityLabel,
-    accessibilityHint: locale?.vanPopup?.closeHint ?? 'Double-tap to close'
-  } : {
-    accessible: false
-  }, {
-    onPress: handleOvlPress
-  })) : null, !overlay && lockScroll && isOpen ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: S.lock,
-    pointerEvents: "auto",
-    onStartShouldSetResponder: CAPTURE,
-    onMoveShouldSetResponder: CAPTURE
-  }) : null, /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, _extends({
-    ref: overlayRef
-  }, contentProps, {
-    onLayout: ovlOnLayout,
-    renderToHardwareTextureAndroid: _reactNative().Platform.OS === 'android',
-    shouldRasterizeIOS: _reactNative().Platform.OS === 'ios',
-    style: [ds.popup, isCenter && ds.center, isV && S.popV, isH && ds.side, radiusStyle, animStyle, style, hidden && hiddenStyle]
-  }, rest), closeNode, safeContent))));
-};
-const S = _reactNative().StyleSheet.create({
-  root: {
-    ..._reactNative().StyleSheet.absoluteFillObject,
-    justifyContent: 'center'
-  },
-  ctr: {
-    flex: 1
-  },
-  ovl: {
-    ..._reactNative().StyleSheet.absoluteFillObject,
-    opacity: 0
-  },
-  header: {
-    width: '100%'
-  },
-  title: {
-    includeFontPadding: false
-  },
-  desc: {
-    includeFontPadding: false
-  },
-  popV: {
-    alignSelf: 'stretch'
-  },
-  closeBase: {
-    position: 'absolute',
-    zIndex: 999,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  lock: {
-    ..._reactNative().StyleSheet.absoluteFillObject
-  }
-});
-const Popup = exports.Popup = /*#__PURE__*/_react().default.memo(PopupImpl);
-var _default = exports.default = Popup;
+"use strict";function _react(){const e=_interopRequireWildcard(require("react"));return _react=function(){return e},e}function _reactNative(){const e=require("react-native");return _reactNative=function(){return e},e}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Popup=void 0;var _safeAreaView=require("../safe-area-view"),_platform=require("../../platform"),_animation=require("../../hooks/animation"),_createPlatformShadow=require("../../utils/createPlatformShadow"),_validate=require("../../utils/validate");function _reactNativeSystemIcon(){const e=require("react-native-system-icon");return _reactNativeSystemIcon=function(){return e},e}var _Portal=_interopRequireDefault(require("../portal/Portal")),_hooks=require("../../hooks"),_useLocale=require("../config-provider/useLocale"),_useDirection=require("../config-provider/useDirection"),_tokens=require("./tokens");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var o=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var a,n,i={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return i;if(a=t?r:o){if(a.has(e))return a.get(e);a.set(e,i)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((n=(a=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(n.get||n.set)?a(i,t,n):i[t]=e[t]);return i})(e,t)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)({}).hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e},_extends.apply(null,arguments)}const AnimatedPressable=_reactNative().Animated.createAnimatedComponent(_reactNative().Pressable),EASE_OUT=_reactNative().Easing.bezier(.075,.82,.165,1),EASE_IN=_reactNative().Easing.bezier(.55,.055,.675,.19),CAPTURE=()=>!0,placementConfig={top:{container:{justifyContent:"flex-start",alignItems:"center"},axis:"y"},bottom:{container:{justifyContent:"flex-end",alignItems:"center"},axis:"y"},left:{container:{justifyContent:"center",alignItems:"flex-start"},axis:"x"},right:{container:{justifyContent:"center",alignItems:"flex-end"},axis:"x"},center:{container:{justifyContent:"center",alignItems:"center"},axis:"y"}},buildRadius=(e,t,o)=>{if(e)return"top"===t?{borderBottomLeftRadius:o,borderBottomRightRadius:o}:"bottom"===t?{borderTopLeftRadius:o,borderTopRightRadius:o}:"left"===t?{borderTopRightRadius:o,borderBottomRightRadius:o}:"right"===t?{borderTopLeftRadius:o,borderBottomLeftRadius:o}:{borderRadius:o}},hiddenStyle={opacity:0,shadowOpacity:0,shadowRadius:0,elevation:0},PopupImpl=e=>{const t=(0,_useLocale.useLocale)(),o=(0,_useDirection.useDirection)(),{visible:r,placement:a,position:n,title:i,description:c,tokensOverride:l,overlay:s=!0,overlayStyle:u,overlayAccessibilityLabel:d=t?.vanPopup?.closeOverlay??"Close overlay",closeOnOverlayPress:p,closeOnClickOverlay:f,overlayTestID:_="popup-overlay",closeable:m=!1,closeIcon:y,closeIconPosition:v="top-right",round:g,safeArea:h=!1,safeAreaInsetTop:b=!1,safeAreaInsetBottom:R,lockScroll:I=!0,destroyOnClose:P=!0,duration:O=300,zIndex:C,closeOnBackPress:E=!1,closeOnPopstate:x=!1,children:w,beforeClose:k,onClickOverlay:A,onClose:N,onOpen:z,onOpened:T,onClosed:W,stopPropagation:q=!0,style:L,contentAnimationStyle:V,...M}=e,j=a??n??"center",D=f??p??!0,B="center"===j,H=R??!1,F=(0,_tokens.usePopupTokens)(l),U=(0,_animation.useReducedMotion)(),X=(0,_react().useRef)({onOpened:T,onClosed:W,onOpen:z,onClose:N,beforeClose:k,onClickOverlay:A});X.current={onOpened:T,onClosed:W,onOpen:z,onClose:N,beforeClose:k,onClickOverlay:A};const Y=(0,_react().useMemo)(()=>{const e=(0,_createPlatformShadow.createPlatformShadow)(F.shadow),{colors:t,spacing:o,typography:r,layout:a}=F;return{popup:{backgroundColor:t.background,padding:o.padding,...e},title:{color:t.title,fontFamily:r.fontFamily,fontSize:r.titleSize,fontWeight:r.titleWeight,marginHorizontal:o.descriptionHorizontal,textAlign:"center"},titleWrap:{marginTop:o.titleTop,marginBottom:o.titleBottom,marginHorizontal:o.descriptionHorizontal,alignItems:"center"},desc:{color:t.description,fontFamily:r.fontFamily,fontSize:r.descriptionSize,lineHeight:r.descriptionLineHeight},descWrap:{marginHorizontal:o.descriptionHorizontal,marginBottom:o.descriptionBottom},closeBase:{minWidth:o.closeIconSize,minHeight:o.closeIconSize,padding:o.closeIconPadding},closeDef:{width:o.closeIconSize,height:o.closeIconSize},side:{width:a.sideWidth,maxWidth:a.maxWidth},center:{minWidth:a.minWidth,maxWidth:a.centerMaxWidth}}},[F]),[G,J]=(0,_react().useState)(r),[K,Q]=(0,_react().useState)(r),Z=r||K,$=D&&(N||k),ee=(0,_react().useRef)(new(_reactNative().Animated.Value)(0)).current,te=(0,_react().useRef)(null),oe=(0,_react().useRef)(0),re=(0,_react().useRef)(r),ae=(0,_react().useRef)(!1),ne="top"===j||"bottom"===j,ie="left"===j||"right"===j,ce="top"===j||"left"===j?-1:1,le=(0,_react().useCallback)((e,t)=>{oe.current+=1;const o=oe.current;te.current?.stop();const r=t?0:O,a=_reactNative().Animated.timing(ee,{toValue:e?1:0,duration:r,easing:e?EASE_OUT:EASE_IN,useNativeDriver:_platform.nativeDriverEnabled,isInteraction:!1});te.current=a,a.start(({finished:t})=>{t&&o===oe.current&&(e?X.current.onOpened?.():(Q(!1),P&&J(!1),X.current.onClosed?.()))})},[P,O,ee]);(0,_react().useEffect)(()=>{r?(J(!0),Q(!0),le(!0,U)):re.current&&le(!1,U)},[le,r,U]),(0,_react().useEffect)(()=>{r&&!re.current&&X.current.onOpen?.(),re.current=r},[r]),(0,_react().useEffect)(()=>()=>{te.current?.stop()},[]);const se=(0,_react().useCallback)(async e=>{if(!ae.current){ae.current=!0;try{if(X.current.beforeClose){if(!1===await X.current.beforeClose(e))return}X.current.onClose?.()}finally{ae.current=!1}}},[]);(0,_react().useEffect)(()=>{if(x)return(0,_platform.addPopStateListener)(()=>{r&&se("close")})},[x,se,r]);const ue=(0,_react().useCallback)(()=>{X.current.onClickOverlay?.(),D&&se("overlay")},[se,D]),de=(0,_react().useCallback)(()=>se("close-icon"),[se]),pe=(0,_react().useCallback)(()=>se("close"),[se]),{zIndex:fe}=(0,_hooks.useOverlayStack)({visible:Z,onClose:pe,closeOnBack:E,lockScroll:I,zIndex:C,type:"popup"}),{overlayRef:_e,overlayProps:me}=(0,_hooks.useAriaOverlay)({isOpen:Z,onClose:()=>se("overlay"),isDismissable:D,overlayProps:{..."android"===_reactNative().Platform.OS?{}:{accessibilityRole:"dialog"},accessibilityLiveRegion:"polite"}}),{onLayout:ye,...ve}=me,ge=(0,_react().useMemo)(()=>q?{...ve,onStartShouldSetResponder:CAPTURE}:ve,[ve,q]),he=placementConfig[j],be=buildRadius(g,j,F.radius.round),{width:Se,height:Re}=(0,_reactNative().useWindowDimensions)(),Ie=ie?Se:ne?Re:0,Pe=(0,_react().useMemo)(()=>{if(B)return null;const e=[Ie*ce,0];return"y"===he.axis?{translateY:ee.interpolate({inputRange:[0,1],outputRange:e})}:{translateX:ee.interpolate({inputRange:[0,1],outputRange:e})}},[he.axis,ce,Ie,B,ee]),Oe=(0,_react().useMemo)(()=>Pe?[Pe]:[],[Pe]),Ce=(0,_react().useMemo)(()=>{const e=V?.transform,t=Array.isArray(e)?[...Oe,...e]:Oe,o={...V,transform:t};return B?{...o,opacity:ee}:null==V?.opacity?{...o,opacity:1}:o},[Oe,V,B,ee]),[Ee,xe]=(0,_react().useState)(0),we=(0,_react().useCallback)(e=>xe(e.nativeEvent.layout.height),[]),ke=G||r,Ae=!Z,Ne=(0,_validate.isRenderable)(i)||(0,_validate.isRenderable)(c),ze=(0,_react().useMemo)(()=>{if(!Ne)return null;const e=F.spacing.closeIconRight+F.spacing.closeIconSize,t=m&&v.startsWith("top-")?v.endsWith("right")?{paddingRight:e}:{paddingLeft:e}:void 0,o=(e,t,o)=>(0,_validate.isRenderable)(e)?(0,_validate.isText)(e)?_react().default.createElement(_reactNative().Text,{style:t},e):_react().default.createElement(_reactNative().View,{style:o},e):null;return _react().default.createElement(_reactNative().View,{style:[S.header,t]},o(i,[S.title,Y.title],Y.titleWrap),o(c,[S.desc,Y.desc],Y.descWrap))},[m,v,c,Y,Ne,i,F.spacing.closeIconRight,F.spacing.closeIconSize]),Te=(0,_react().useMemo)(()=>{if(!m)return null;const e=null!=y,t=v.includes("bottom")?{bottom:F.spacing.closeIconTop}:{top:F.spacing.closeIconTop+Ee},r="rtl"===o,a=v.endsWith("left")?r?{right:F.spacing.closeIconRight}:{left:F.spacing.closeIconRight}:r?{left:F.spacing.closeIconRight}:{right:F.spacing.closeIconRight};return _react().default.createElement(_reactNative().Pressable,{style:[S.closeBase,Y.closeBase,t,a,!e&&Y.closeDef],hitSlop:8,onPress:de},e?y:_react().default.createElement(_reactNativeSystemIcon().Cross,{size:22,fill:F.colors.closeIcon,color:F.colors.closeIcon}))},[y,v,m,Y,de,Ee,F.colors.closeIcon,F.spacing.closeIconRight,F.spacing.closeIconTop]),We=Ne?_react().default.createElement(_react().default.Fragment,null,ze,w):w;if(!ke)return null;const qe=fe??C,Le=h?_react().default.createElement(_safeAreaView.SafeAreaView,null,We):_react().default.createElement(_react().default.Fragment,null,b&&_react().default.createElement(_safeAreaView.SafeAreaView,{edge:"top",onLayout:we,pointerEvents:"none"}),We,H&&_react().default.createElement(_safeAreaView.SafeAreaView,{edge:"bottom",pointerEvents:"none"}));return _react().default.createElement(_Portal.default,null,_react().default.createElement(_reactNative().View,{style:[S.root,qe?{zIndex:qe}:void 0],pointerEvents:"box-none"},_react().default.createElement(_reactNative().View,{style:[S.ctr,he.container],pointerEvents:Z?"auto":"none",accessibilityViewIsModal:Z,accessibilityLiveRegion:"polite",onAccessibilityEscape:pe},s&&Z?_react().default.createElement(AnimatedPressable,_extends({testID:_,style:[S.ovl,{backgroundColor:F.colors.overlay,opacity:ee},u],renderToHardwareTextureAndroid:"android"===_reactNative().Platform.OS,shouldRasterizeIOS:"ios"===_reactNative().Platform.OS,pointerEvents:Z?"auto":"none"},$?{accessibilityRole:"button",accessibilityLabel:d,accessibilityHint:t?.vanPopup?.closeHint??"Double-tap to close"}:{accessible:!1},{onPress:ue})):null,!s&&I&&Z?_react().default.createElement(_reactNative().View,{style:S.lock,pointerEvents:"auto",onStartShouldSetResponder:CAPTURE,onMoveShouldSetResponder:CAPTURE}):null,_react().default.createElement(_reactNative().Animated.View,_extends({ref:_e},ge,{onLayout:ye,renderToHardwareTextureAndroid:"android"===_reactNative().Platform.OS,shouldRasterizeIOS:"ios"===_reactNative().Platform.OS,style:[Y.popup,B&&Y.center,ne&&S.popV,ie&&Y.side,be,Ce,L,Ae&&hiddenStyle]},M),Te,Le))))},S=_reactNative().StyleSheet.create({root:{..._reactNative().StyleSheet.absoluteFillObject,justifyContent:"center"},ctr:{flex:1},ovl:{..._reactNative().StyleSheet.absoluteFillObject,opacity:0},header:{width:"100%"},title:{includeFontPadding:!1},desc:{includeFontPadding:!1},popV:{alignSelf:"stretch"},closeBase:{position:"absolute",zIndex:999,alignItems:"center",justifyContent:"center"},lock:{..._reactNative().StyleSheet.absoluteFillObject}}),Popup=exports.Popup=_react().default.memo(PopupImpl);var _default=exports.default=Popup;

package/dist/cjs/components/popup/index.js

@@ -1,15 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Popup", {
-  enumerable: true,
-  get: function () {
-    return _Popup.default;
-  }
-});
-exports.default = void 0;
-var _Popup = _interopRequireDefault(require("./Popup"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = _Popup.default;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Popup",{enumerable:!0,get:function(){return _Popup.default}}),exports.default=void 0;var _Popup=_interopRequireDefault(require("./Popup"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=_Popup.default;