react-native-system-ui 1.0.2 → 1.0.3

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

@@ -1,3 +1 @@
-import Picker from './Picker';
-export default Picker;
-export { Picker };
+import Picker from"./Picker";export default Picker;export{Picker};

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

@@ -1,47 +1 @@
-import { createComponentTokensHook } from '../../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
-    }
-  };
-};
-export const usePickerTokens = createComponentTokensHook('picker', createPickerTokens);
+import{createComponentTokensHook}from"../../design-system";const createPickerTokens=e=>{const{palette:t,spacing:o,fontSize:i,typography:a,radii:n}=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:n.none,container:n.xs}}};export const usePickerTokens=createComponentTokensHook("picker",createPickerTokens);

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

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

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

@@ -1,3 +1 @@
-import Popup from './Popup';
-export default Popup;
-export { Popup };
+import Popup from"./Popup";export default Popup;export{Popup};

package/dist/es/components/popup/tokens.js

@@ -1,55 +1 @@
-import { createComponentTokensHook } from '../../design-system';
-export const createPopupTokens = foundations => {
-  const {
-    palette,
-    spacing,
-    radii,
-    fontSize,
-    typography
-  } = foundations;
-  return {
-    colors: {
-      overlay: 'rgba(0,0,0,0.5)',
-      background: '#ffffff',
-      title: palette.default[900],
-      description: palette.default[500],
-      closeIcon: palette.default[300]
-    },
-    radius: {
-      round: radii.lg,
-      shadow: 18
-    },
-    spacing: {
-      padding: spacing.lg,
-      titleTop: spacing.xl,
-      titleBottom: spacing.md,
-      descriptionHorizontal: spacing.xl,
-      descriptionBottom: spacing.md,
-      closeIconTop: spacing.md,
-      closeIconRight: spacing.md,
-      closeIconSize: 36,
-      closeIconPadding: spacing.ssm
-    },
-    typography: {
-      fontFamily: typography.fontFamily,
-      titleSize: fontSize.md,
-      titleWeight: typography.weight.medium,
-      descriptionSize: fontSize.sm,
-      descriptionLineHeight: 20
-    },
-    shadow: {
-      color: 'rgba(0,0,0,0.25)',
-      opacity: 0.35,
-      radius: 18,
-      offsetY: 8,
-      elevation: 24
-    },
-    layout: {
-      maxWidth: 420,
-      minWidth: 260,
-      centerMaxWidth: 360,
-      sideWidth: '80%'
-    }
-  };
-};
-export const usePopupTokens = createComponentTokensHook('popup', createPopupTokens);
+import{createComponentTokensHook}from"../../design-system";export const createPopupTokens=o=>{const{palette:e,spacing:t,radii:i,fontSize:n,typography:s}=o;return{colors:{overlay:"rgba(0,0,0,0.5)",background:"#ffffff",title:e.default[900],description:e.default[500],closeIcon:e.default[300]},radius:{round:i.lg,shadow:18},spacing:{padding:t.lg,titleTop:t.xl,titleBottom:t.md,descriptionHorizontal:t.xl,descriptionBottom:t.md,closeIconTop:t.md,closeIconRight:t.md,closeIconSize:36,closeIconPadding:t.ssm},typography:{fontFamily:s.fontFamily,titleSize:n.md,titleWeight:s.weight.medium,descriptionSize:n.sm,descriptionLineHeight:20},shadow:{color:"rgba(0,0,0,0.25)",opacity:.35,radius:18,offsetY:8,elevation:24},layout:{maxWidth:420,minWidth:260,centerMaxWidth:360,sideWidth:"80%"}}};export const usePopupTokens=createComponentTokensHook("popup",createPopupTokens);

package/dist/es/components/portal/Portal.js

@@ -1,37 +1 @@
-import React, { useContext, useLayoutEffect, useRef } from 'react';
-import { PortalHost, portalManager as globalManager, portalStore } from './PortalHost';
-import { PortalContext } from './PortalContext';
-const PortalComponentImpl = ({
-  children,
-  isOpen,
-  visible
-}, _ref) => {
-  const manager = useContext(PortalContext) ?? globalManager;
-  const keyRef = useRef(null);
-  const content = isOpen ?? visible ?? true ? children : null;
-  useLayoutEffect(() => {
-    keyRef.current === null ? keyRef.current = manager.mount(content) : manager.update(keyRef.current, content);
-  }, [manager, content]);
-  useLayoutEffect(() => () => {
-    if (keyRef.current != null) {
-      manager.unmount(keyRef.current);
-      keyRef.current = null;
-    }
-  }, [manager]);
-  return null;
-};
-const PortalComponentRef = /*#__PURE__*/React.forwardRef(PortalComponentImpl);
-PortalComponentRef.displayName = 'Portal';
-const PortalComponent = /*#__PURE__*/React.memo(PortalComponentRef);
-const add = (content, key) => globalManager.mount(content, key);
-const remove = key => globalManager.unmount(key);
-const update = (key, content) => globalManager.update(key, content);
-const clear = () => portalStore.clear();
-export const Portal = Object.assign(PortalComponent, {
-  Host: PortalHost,
-  add,
-  remove,
-  update,
-  clear
-});
-export default Portal;
+import React,{useContext,useLayoutEffect,useRef}from"react";import{PortalHost,portalManager as globalManager,portalStore}from"./PortalHost";import{PortalContext}from"./PortalContext";const PortalComponentImpl=({children:t,isOpen:o,visible:e},a)=>{const r=useContext(PortalContext)??globalManager,l=useRef(null),n=o??e??1?t:null;return useLayoutEffect(()=>{null===l.current?l.current=r.mount(n):r.update(l.current,n)},[r,n]),useLayoutEffect(()=>()=>{null!=l.current&&(r.unmount(l.current),l.current=null)},[r]),null},PortalComponentRef=React.forwardRef(PortalComponentImpl);PortalComponentRef.displayName="Portal";const PortalComponent=React.memo(PortalComponentRef),add=(t,o)=>globalManager.mount(t,o),remove=t=>globalManager.unmount(t),update=(t,o)=>globalManager.update(t,o),clear=()=>portalStore.clear();export const Portal=Object.assign(PortalComponent,{Host:PortalHost,add:add,remove:remove,update:update,clear:clear});export default Portal;

package/dist/es/components/portal/PortalContext.js

@@ -1,2 +1 @@
-import React from 'react';
-export const PortalContext = /*#__PURE__*/React.createContext(null);
+import React from"react";export const PortalContext=React.createContext(null);