react-native-system-ui 1.0.1 → 1.0.3

package/dist/es/components/number-keyboard/NumberKeyboard.js

@@ -1,467 +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, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useControllableValue } from '../../hooks';
-import { nativeDriverEnabled } from '../../platform';
-import { useReducedMotion } from '../../hooks/animation';
-import { createPlatformShadow } from '../../utils/createPlatformShadow';
-import { parseNumberLike } from '../../utils/number';
-import { isRenderable, renderTextOrNode } from '../../utils';
-import Loading from '../loading';
-import Portal from '../portal/Portal';
-import { useLocale } from '../config-provider/useLocale';
-import { SafeAreaView } from '../safe-area-view';
-import { useNumberKeyboardTokens } from './tokens';
-const registry = new Set();
-const NUM_KEYS = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
-const ZERO = '0';
-const RE_NUM_LIKE = /^\d+$|^\.$|^x$/i;
-const shuffle = list => {
-  const n = [...list];
-  for (let i = n.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [n[i], n[j]] = [n[j], n[i]];
-  }
-  ;
-  return n;
-};
-const NumberKeyboard = /*#__PURE__*/React.memo(props => {
-  const {
-    visible,
-    title,
-    tokensOverride,
-    theme = 'default',
-    extraKey,
-    randomKeyOrder,
-    showDeleteKey = true,
-    closeButtonText,
-    deleteButtonText,
-    closeButtonLoading,
-    onChange,
-    onInput,
-    onDelete,
-    onClose,
-    onBlur,
-    onHide,
-    onShow,
-    value: _v,
-    defaultValue: _dv,
-    maxlength: maxlengthProp,
-    blurOnClose = true,
-    safeAreaInsetBottom = true,
-    transition = true,
-    transitionDuration = 300,
-    numberKeyRender,
-    deleteRender,
-    extraKeyRender,
-    style,
-    ...rest
-  } = props;
-  const locale = useLocale();
-  const reducedMotion = useReducedMotion();
-  const tokens = useNumberKeyboardTokens(tokensOverride);
-  const {
-    colors,
-    radii,
-    shadow,
-    sizing,
-    spacing,
-    typography
-  } = tokens;
-  const [value, setValue] = useControllableValue(props, {
-    defaultValue: '',
-    valuePropName: 'value',
-    defaultValuePropName: 'defaultValue',
-    trigger: 'onChange'
-  });
-  const curVal = value ?? '';
-  const maxLen = (() => {
-    const p = parseNumberLike(maxlengthProp, undefined);
-    return p != null && Number.isFinite(p) && p >= 0 ? Math.floor(p) : undefined;
-  })();
-  const valRef = useRef(curVal);
-  const maxRef = useRef(maxLen);
-  const onCloseRef = useRef(onClose);
-  const onBlurRef = useRef(onBlur);
-  const onShowRef = useRef(onShow);
-  const onHideRef = useRef(onHide);
-  const onDelRef = useRef(onDelete);
-  const onInpRef = useRef(onInput);
-  valRef.current = curVal;
-  maxRef.current = maxLen;
-  onCloseRef.current = onClose;
-  onBlurRef.current = onBlur;
-  onShowRef.current = onShow;
-  onHideRef.current = onHide;
-  onDelRef.current = onDelete;
-  onInpRef.current = onInput;
-  const isCustom = theme === 'custom';
-  const defClose = locale?.vanNumberKeyboard?.close ?? 'Done';
-  const closeTxt = isCustom ? closeButtonText ?? defClose : closeButtonText;
-  const handleClose = useCallback(() => {
-    onCloseRef.current?.();
-    if (blurOnClose) onBlurRef.current?.();
-  }, [blurOnClose]);
-  const prevVis = useRef(visible);
-  useEffect(() => {
-    if (visible && !prevVis.current) onShowRef.current?.();
-    if (!visible && prevVis.current) onHideRef.current?.();
-    prevVis.current = visible;
-  }, [visible]);
-  useEffect(() => {
-    if (visible) {
-      registry.add(handleClose);
-      registry.forEach(fn => {
-        if (fn !== handleClose) fn();
-      });
-    } else registry.delete(handleClose);
-    return () => {
-      registry.delete(handleClose);
-    };
-  }, [visible, handleClose]);
-  const keys = useMemo(() => {
-    const sh = randomKeyOrder && visible;
-    const nK = sh ? shuffle(NUM_KEYS) : NUM_KEYS;
-    const mat = nK.map(t => ({
-      text: t,
-      type: ''
-    }));
-    if (isCustom) {
-      const e = Array.isArray(extraKey) ? extraKey : extraKey ? [extraKey] : [];
-      if (e.length === 1) mat.push({
-        text: ZERO,
-        type: '',
-        wider: true
-      }, {
-        text: e[0],
-        type: 'extra'
-      });else if (e.length >= 2) mat.push({
-        text: e[0],
-        type: 'extra'
-      }, {
-        text: ZERO,
-        type: ''
-      }, {
-        text: e[1],
-        type: 'extra'
-      });else mat.push({
-        text: ZERO,
-        type: ''
-      });
-      return mat;
-    }
-    const nE = Array.isArray(extraKey) ? extraKey[0] ?? '' : extraKey ?? '';
-    mat.push({
-      text: nE,
-      type: 'extra'
-    }, {
-      text: ZERO,
-      type: ''
-    }, {
-      type: showDeleteKey ? 'delete' : '',
-      text: showDeleteKey ? undefined : ''
-    });
-    return mat;
-  }, [extraKey, isCustom, randomKeyOrder, showDeleteKey, visible]);
-  const handleInput = useCallback((text, type) => {
-    if (type === 'delete') {
-      const c = valRef.current;
-      if (!c) return;
-      onDelRef.current?.();
-      setValue(c.slice(0, -1));
-      return;
-    }
-    if (type === 'close' || type === 'extra' && !text) {
-      handleClose();
-      return;
-    }
-    ;
-    if (!text) return;
-    const c = valRef.current;
-    const m = maxRef.current;
-    if (m !== undefined && c.length >= m) return;
-    onInpRef.current?.(text);
-    setValue(`${c}${text}`);
-  }, [handleClose, setValue]);
-  const winShadow = useMemo(() => createPlatformShadow(shadow), [shadow.color, shadow.elevation, shadow.offsetY, shadow.opacity, shadow.radius]);
-  const renderKey = useCallback((key, index, isClose = false, fullW = false, customH) => {
-    const kt = key.type;
-    const isPh = kt === '' && !key.text;
-    const dis = isPh || isClose && closeButtonLoading;
-    const onP = dis ? undefined : () => handleInput(key.text, kt);
-    const bg = isClose ? colors.closeBackground : colors.keyBackground;
-    const aBg = isClose ? colors.closeActiveBackground : colors.keyActiveBackground;
-    const tInact = isClose ? colors.closeText : colors.keyText;
-    const tPress = isClose ? colors.closeText : colors.keyTextActive;
-    const kH = customH ?? (isClose ? sizing.closeHeight : sizing.keyHeight);
-    const auxFs = sizing.auxFontSize ?? Math.round(sizing.fontSize * 0.64);
-    const defIconFs = sizing.defaultIconFontSize ?? sizing.fontSize;
-    const kTxt = key.text ?? '';
-    const cnt = kt === 'delete' ? deleteRender?.() ?? deleteButtonText ?? '⌫' : kt === 'extra' ? extraKeyRender ? extraKeyRender(kTxt) : kTxt || '⌨︎' : kt === 'close' ? closeTxt ?? defClose : numberKeyRender ? numberKeyRender(kTxt) : kTxt;
-    const isDefIcon = kt === 'delete' && deleteRender == null && deleteButtonText == null || kt === 'extra' && !extraKeyRender && !kTxt;
-    const isNumLike = kt === 'extra' && typeof cnt === 'string' && RE_NUM_LIKE.test(cnt);
-    const tFs = kt === '' ? sizing.fontSize : isDefIcon ? defIconFs : isNumLike ? sizing.fontSize : auxFs;
-    return /*#__PURE__*/React.createElement(Pressable, {
-      key: `${kt}-${index}-${key.text ?? index}`,
-      onPress: onP,
-      disabled: dis,
-      style: [{
-        opacity: isPh ? 1 : dis ? 0.6 : 1
-      }, fullW ? {
-        width: '100%',
-        flexBasis: 'auto',
-        flexGrow: 0,
-        alignSelf: 'stretch'
-      } : {
-        flexBasis: 0,
-        flexGrow: key.wider ? 2 : 1,
-        flexShrink: 1,
-        minWidth: 0
-      }],
-      accessible: !isPh,
-      accessibilityRole: isPh ? undefined : 'button',
-      accessibilityLabel: isPh ? undefined : kt === 'delete' ? 'delete' : kt === 'close' ? closeTxt ?? 'close' : kt === 'extra' ? kTxt || 'collapse' : kTxt,
-      accessibilityState: isPh ? undefined : {
-        disabled: !!dis
-      },
-      accessibilityElementsHidden: isPh,
-      importantForAccessibility: isPh ? 'no-hide-descendants' : undefined
-    }, ({
-      pressed
-    }) => {
-      const isP = pressed && !dis;
-      const kBg = dis ? colors.keyBackground : isP ? aBg : bg;
-      const tClr = isP ? tPress : tInact;
-      return /*#__PURE__*/React.createElement(View, {
-        style: [S.k, {
-          height: kH,
-          backgroundColor: kBg,
-          borderRadius: radii.key
-        }]
-      }, isClose && closeButtonLoading ? /*#__PURE__*/React.createElement(Loading, {
-        size: 18,
-        color: tClr
-      }) : isRenderable(cnt) ? renderTextOrNode(cnt, [S.kTxt, {
-        color: tClr,
-        fontFamily: typography.fontFamily,
-        fontSize: tFs
-      }]) : null);
-    });
-  }, [closeButtonLoading, colors.closeActiveBackground, colors.closeBackground, colors.closeText, colors.keyActiveBackground, colors.keyBackground, colors.keyText, colors.keyTextActive, defClose, deleteButtonText, deleteRender, extraKeyRender, handleInput, numberKeyRender, radii.key, sizing.auxFontSize, sizing.closeHeight, sizing.defaultIconFontSize, sizing.fontSize, sizing.keyHeight, typography.fontFamily, closeTxt]);
-  const animVal = useRef(new Animated.Value(visible ? 1 : 0)).current;
-  const animRef = useRef(null);
-  const seqRef = useRef(0);
-  const [contentH, setContentH] = useState(0);
-  const [shouldRender, setShouldRender] = useState(visible);
-  const effD = reducedMotion ? 0 : transition === false ? 0 : transitionDuration;
-  useEffect(() => {
-    seqRef.current += 1;
-    const seq = seqRef.current;
-    if (visible) setShouldRender(true);
-    animRef.current?.stop();
-    const a = Animated.timing(animVal, {
-      toValue: visible ? 1 : 0,
-      duration: effD,
-      useNativeDriver: nativeDriverEnabled,
-      easing: visible ? Easing.out(Easing.cubic) : Easing.in(Easing.cubic),
-      isInteraction: false
-    });
-    animRef.current = a;
-    a.start(({
-      finished
-    }) => {
-      if (finished && !visible && seqRef.current === seq) setShouldRender(false);
-    });
-    return () => {
-      animRef.current?.stop();
-      animRef.current = null;
-    };
-  }, [animVal, visible, effD]);
-  const translateY = animVal.interpolate({
-    inputRange: [0, 1],
-    outputRange: [contentH || 320, 0]
-  });
-  const onLayout = useCallback(e => {
-    const {
-      height
-    } = e.nativeEvent.layout;
-    setContentH(prev => Math.abs(height - prev) > 0.5 ? height : prev);
-  }, []);
-  const hasHdr = !isCustom && (title || closeButtonText);
-  const dblH = sizing.keyHeight * 2 + spacing.keyGap;
-  const memoized = useMemo(() => {
-    const kg = spacing.keyGap;
-    const ph = spacing.paddingHorizontal;
-    const tp = spacing.titlePadding;
-    const hP = {
-      paddingHorizontal: tp
-    };
-    const dC = [S.dRow, {
-      flexDirection: 'column',
-      flexWrap: 'nowrap',
-      paddingHorizontal: ph,
-      paddingTop: kg,
-      paddingBottom: kg,
-      gap: kg
-    }];
-    const dL = {
-      flexDirection: 'row',
-      gap: kg
-    };
-    const cR = [S.cRow, {
-      paddingHorizontal: ph,
-      paddingTop: hasHdr ? 0 : kg,
-      paddingBottom: kg,
-      width: '100%'
-    }];
-    const cM = [S.cMat, {
-      flexDirection: 'column',
-      flexWrap: 'nowrap',
-      gap: kg
-    }];
-    const cS = [S.cSide, {
-      gap: kg,
-      marginLeft: kg
-    }];
-    const ents = keys.map((k, i) => ({
-      key: k,
-      index: i
-    }));
-    const dLns = [];
-    for (let i = 0; i < ents.length; i += 3) dLns.push(ents.slice(i, i + 3));
-    const dN = /*#__PURE__*/React.createElement(View, {
-      style: dC
-    }, dLns.map((line, li) => /*#__PURE__*/React.createElement(View, {
-      key: `l-${li}`,
-      style: dL
-    }, line.map(it => renderKey(it.key, it.index)))));
-    const cLns = [];
-    for (let i = 0; i < 9 && i < ents.length; i += 3) cLns.push(ents.slice(i, i + 3));
-    const tl = ents.slice(9);
-    if (tl.length === 1) cLns.push([{
-      key: {
-        type: ''
-      },
-      index: 1000001
-    }, tl[0], {
-      key: {
-        type: ''
-      },
-      index: 1000002
-    }]);else if (tl.length) cLns.push(tl);
-    const cMN = /*#__PURE__*/React.createElement(View, {
-      style: cM
-    }, cLns.map((line, li) => /*#__PURE__*/React.createElement(View, {
-      key: `cl-${li}`,
-      style: dL
-    }, line.map(it => renderKey(it.key, it.index)))));
-    const delN = showDeleteKey && renderKey({
-      type: 'delete'
-    }, 999, false, true, dblH);
-    const closeN = renderKey({
-      type: 'close'
-    }, 1000, true, true, dblH);
-    const tS = {
-      color: colors.title,
-      fontFamily: typography.fontFamily,
-      fontSize: sizing.titleFontSize
-    };
-    const closeStyle = {
-      color: colors.title,
-      fontFamily: typography.fontFamily,
-      fontSize: sizing.auxFontSize ?? Math.round(sizing.fontSize * 0.64)
-    };
-    const hN = hasHdr ? /*#__PURE__*/React.createElement(View, {
-      style: [S.hdr, hP]
-    }, /*#__PURE__*/React.createElement(Text, {
-      style: [S.tBold, S.tCenter, tS],
-      numberOfLines: 1
-    }, title), closeTxt && /*#__PURE__*/React.createElement(Pressable, {
-      onPress: handleClose,
-      style: S.hdrClose,
-      accessibilityRole: "button",
-      accessibilityLabel: closeTxt
-    }, /*#__PURE__*/React.createElement(Text, {
-      style: closeStyle
-    }, closeTxt))) : null;
-    const bN = isCustom ? /*#__PURE__*/React.createElement(View, {
-      style: cR
-    }, cMN, /*#__PURE__*/React.createElement(View, {
-      style: cS
-    }, delN, closeN)) : dN;
-    return {
-      headerNode: hN,
-      bodyNode: bN,
-      safeAreaNode: safeAreaInsetBottom && /*#__PURE__*/React.createElement(SafeAreaView, {
-        edge: "bottom"
-      })
-    };
-  }, [handleClose, colors.title, dblH, hasHdr, isCustom, keys, renderKey, closeTxt, safeAreaInsetBottom, sizing.auxFontSize, sizing.fontSize, sizing.titleFontSize, spacing.keyGap, spacing.paddingHorizontal, spacing.titlePadding, typography.fontFamily, title, showDeleteKey]);
-  if (!shouldRender && !visible) return null;
-  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Animated.View, _extends({}, rest, {
-    pointerEvents: visible ? 'auto' : 'none',
-    renderToHardwareTextureAndroid: true,
-    shouldRasterizeIOS: true,
-    onLayout: onLayout,
-    style: [S.wrap, winShadow, style, {
-      transform: [{
-        translateY
-      }],
-      backgroundColor: colors.background
-    }]
-  }), memoized.headerNode, memoized.bodyNode, memoized.safeAreaNode));
-});
-const S = StyleSheet.create({
-  wrap: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0
-  },
-  hdr: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    height: 44,
-    position: 'relative'
-  },
-  tBold: {
-    fontWeight: '600'
-  },
-  tCenter: {
-    position: 'absolute',
-    left: 12,
-    right: 12,
-    textAlign: 'center'
-  },
-  hdrClose: {
-    minWidth: 56,
-    alignItems: 'flex-end'
-  },
-  k: {
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  kTxt: {
-    includeFontPadding: false,
-    textAlign: 'center'
-  },
-  dRow: {
-    flexDirection: 'row',
-    flexWrap: 'wrap'
-  },
-  cRow: {
-    flexDirection: 'row'
-  },
-  cMat: {
-    flex: 3,
-    flexDirection: 'row',
-    flexWrap: 'wrap'
-  },
-  cSide: {
-    flex: 1,
-    flexDirection: 'column',
-    justifyContent: 'flex-start'
-  }
-});
-export default NumberKeyboard;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)({}).hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},_extends.apply(null,arguments)}import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,View}from"react-native";import{useControllableValue}from"../../hooks";import{nativeDriverEnabled}from"../../platform";import{useReducedMotion}from"../../hooks/animation";import{createPlatformShadow}from"../../utils/createPlatformShadow";import{parseNumberLike}from"../../utils/number";import{isRenderable,renderTextOrNode}from"../../utils";import Loading from"../loading";import Portal from"../portal/Portal";import{useLocale}from"../config-provider/useLocale";import{SafeAreaView}from"../safe-area-view";import{useNumberKeyboardTokens}from"./tokens";const registry=new Set,NUM_KEYS=["1","2","3","4","5","6","7","8","9"],ZERO="0",RE_NUM_LIKE=/^\d+$|^\.$|^x$/i,shuffle=e=>{const t=[...e];for(let e=t.length-1;e>0;e--){const r=Math.floor(Math.random()*(e+1));[t[e],t[r]]=[t[r],t[e]]}return t},NumberKeyboard=React.memo(e=>{const{visible:t,title:r,tokensOverride:o,theme:n="default",extraKey:a,randomKeyOrder:i,showDeleteKey:l=!0,closeButtonText:s,deleteButtonText:c,closeButtonLoading:u,onChange:d,onInput:f,onDelete:m,onClose:y,onBlur:p,onHide:g,onShow:x,value:h,defaultValue:b,maxlength:k,blurOnClose:R=!0,safeAreaInsetBottom:w=!0,transition:v=!0,transitionDuration:E=300,numberKeyRender:z,deleteRender:N,extraKeyRender:A,style:T,...B}=e,C=useLocale(),V=useReducedMotion(),F=useNumberKeyboardTokens(o),{colors:M,radii:P,shadow:D,sizing:K,spacing:L,typography:H}=F,[I,O]=useControllableValue(e,{defaultValue:"",valuePropName:"value",defaultValuePropName:"defaultValue",trigger:"onChange"}),_=I??"",$=(()=>{const e=parseNumberLike(k,void 0);return null!=e&&Number.isFinite(e)&&e>=0?Math.floor(e):void 0})(),W=useRef(_),j=useRef($),G=useRef(y),U=useRef(p),Y=useRef(x),Z=useRef(g),q=useRef(m),J=useRef(f);W.current=_,j.current=$,G.current=y,U.current=p,Y.current=x,Z.current=g,q.current=m,J.current=f;const Q="custom"===n,X=C?.vanNumberKeyboard?.close??"Done",ee=Q?s??X:s,te=useCallback(()=>{G.current?.(),R&&U.current?.()},[R]),re=useRef(t);useEffect(()=>{t&&!re.current&&Y.current?.(),!t&&re.current&&Z.current?.(),re.current=t},[t]),useEffect(()=>(t?(registry.add(te),registry.forEach(e=>{e!==te&&e()})):registry.delete(te),()=>{registry.delete(te)}),[t,te]);const oe=useMemo(()=>{const e=(i&&t?shuffle(NUM_KEYS):NUM_KEYS).map(e=>({text:e,type:""}));if(Q){const t=Array.isArray(a)?a:a?[a]:[];return 1===t.length?e.push({text:"0",type:"",wider:!0},{text:t[0],type:"extra"}):t.length>=2?e.push({text:t[0],type:"extra"},{text:"0",type:""},{text:t[1],type:"extra"}):e.push({text:"0",type:""}),e}const r=Array.isArray(a)?a[0]??"":a??"";return e.push({text:r,type:"extra"},{text:"0",type:""},{type:l?"delete":"",text:l?void 0:""}),e},[a,Q,i,l,t]),ne=useCallback((e,t)=>{if("delete"===t){const e=W.current;if(!e)return;return q.current?.(),void O(e.slice(0,-1))}if("close"===t||"extra"===t&&!e)return void te();if(!e)return;const r=W.current,o=j.current;void 0!==o&&r.length>=o||(J.current?.(e),O(`${r}${e}`))},[te,O]),ae=useMemo(()=>createPlatformShadow(D),[D.color,D.elevation,D.offsetY,D.opacity,D.radius]),ie=useCallback((e,t,r=!1,o=!1,n)=>{const a=e.type,i=""===a&&!e.text,l=i||r&&u,s=l?void 0:()=>ne(e.text,a),d=r?M.closeBackground:M.keyBackground,f=r?M.closeActiveBackground:M.keyActiveBackground,m=r?M.closeText:M.keyText,y=r?M.closeText:M.keyTextActive,p=n??(r?K.closeHeight:K.keyHeight),g=K.auxFontSize??Math.round(.64*K.fontSize),x=K.defaultIconFontSize??K.fontSize,h=e.text??"",b="delete"===a?N?.()??c??"⌫":"extra"===a?A?A(h):h||"⌨︎":"close"===a?ee??X:z?z(h):h,k="delete"===a&&null==N&&null==c||"extra"===a&&!A&&!h,R="extra"===a&&"string"==typeof b&&RE_NUM_LIKE.test(b),w=""===a?K.fontSize:k?x:R?K.fontSize:g;return React.createElement(Pressable,{key:`${a}-${t}-${e.text??t}`,onPress:s,disabled:l,style:[{opacity:i?1:l?.6:1},o?{width:"100%",flexBasis:"auto",flexGrow:0,alignSelf:"stretch"}:{flexBasis:0,flexGrow:e.wider?2:1,flexShrink:1,minWidth:0}],accessible:!i,accessibilityRole:i?void 0:"button",accessibilityLabel:i?void 0:"delete"===a?"delete":"close"===a?ee??"close":"extra"===a?h||"collapse":h,accessibilityState:i?void 0:{disabled:!!l},accessibilityElementsHidden:i,importantForAccessibility:i?"no-hide-descendants":void 0},({pressed:e})=>{const t=e&&!l,o=l?M.keyBackground:t?f:d,n=t?y:m;return React.createElement(View,{style:[S.k,{height:p,backgroundColor:o,borderRadius:P.key}]},r&&u?React.createElement(Loading,{size:18,color:n}):isRenderable(b)?renderTextOrNode(b,[S.kTxt,{color:n,fontFamily:H.fontFamily,fontSize:w}]):null)})},[u,M.closeActiveBackground,M.closeBackground,M.closeText,M.keyActiveBackground,M.keyBackground,M.keyText,M.keyTextActive,X,c,N,A,ne,z,P.key,K.auxFontSize,K.closeHeight,K.defaultIconFontSize,K.fontSize,K.keyHeight,H.fontFamily,ee]),le=useRef(new Animated.Value(t?1:0)).current,se=useRef(null),ce=useRef(0),[ue,de]=useState(0),[fe,me]=useState(t),ye=V||!1===v?0:E;useEffect(()=>{ce.current+=1;const e=ce.current;t&&me(!0),se.current?.stop();const r=Animated.timing(le,{toValue:t?1:0,duration:ye,useNativeDriver:nativeDriverEnabled,easing:t?Easing.out(Easing.cubic):Easing.in(Easing.cubic),isInteraction:!1});return se.current=r,r.start(({finished:r})=>{r&&!t&&ce.current===e&&me(!1)}),()=>{se.current?.stop(),se.current=null}},[le,t,ye]);const pe=le.interpolate({inputRange:[0,1],outputRange:[ue||320,0]}),ge=useCallback(e=>{const{height:t}=e.nativeEvent.layout;de(e=>Math.abs(t-e)>.5?t:e)},[]),xe=!Q&&(r||s),he=2*K.keyHeight+L.keyGap,be=useMemo(()=>{const e=L.keyGap,t=L.paddingHorizontal,o={paddingHorizontal:L.titlePadding},n=[S.dRow,{flexDirection:"column",flexWrap:"nowrap",paddingHorizontal:t,paddingTop:e,paddingBottom:e,gap:e}],a={flexDirection:"row",gap:e},i=[S.cRow,{paddingHorizontal:t,paddingTop:xe?0:e,paddingBottom:e,width:"100%"}],s=[S.cMat,{flexDirection:"column",flexWrap:"nowrap",gap:e}],c=[S.cSide,{gap:e,marginLeft:e}],u=oe.map((e,t)=>({key:e,index:t})),d=[];for(let e=0;e<u.length;e+=3)d.push(u.slice(e,e+3));const f=React.createElement(View,{style:n},d.map((e,t)=>React.createElement(View,{key:`l-${t}`,style:a},e.map(e=>ie(e.key,e.index))))),m=[];for(let e=0;e<9&&e<u.length;e+=3)m.push(u.slice(e,e+3));const y=u.slice(9);1===y.length?m.push([{key:{type:""},index:1000001},y[0],{key:{type:""},index:1000002}]):y.length&&m.push(y);const p=React.createElement(View,{style:s},m.map((e,t)=>React.createElement(View,{key:`cl-${t}`,style:a},e.map(e=>ie(e.key,e.index))))),g=l&&ie({type:"delete"},999,!1,!0,he),x=ie({type:"close"},1e3,!0,!0,he),h={color:M.title,fontFamily:H.fontFamily,fontSize:K.titleFontSize},b={color:M.title,fontFamily:H.fontFamily,fontSize:K.auxFontSize??Math.round(.64*K.fontSize)};return{headerNode:xe?React.createElement(View,{style:[S.hdr,o]},React.createElement(Text,{style:[S.tBold,S.tCenter,h],numberOfLines:1},r),ee&&React.createElement(Pressable,{onPress:te,style:S.hdrClose,accessibilityRole:"button",accessibilityLabel:ee},React.createElement(Text,{style:b},ee))):null,bodyNode:Q?React.createElement(View,{style:i},p,React.createElement(View,{style:c},g,x)):f,safeAreaNode:w&&React.createElement(SafeAreaView,{edge:"bottom"})}},[te,M.title,he,xe,Q,oe,ie,ee,w,K.auxFontSize,K.fontSize,K.titleFontSize,L.keyGap,L.paddingHorizontal,L.titlePadding,H.fontFamily,r,l]);return fe||t?React.createElement(Portal,null,React.createElement(Animated.View,_extends({},B,{pointerEvents:t?"auto":"none",renderToHardwareTextureAndroid:!0,shouldRasterizeIOS:!0,onLayout:ge,style:[S.wrap,ae,T,{transform:[{translateY:pe}],backgroundColor:M.background}]}),be.headerNode,be.bodyNode,be.safeAreaNode)):null}),S=StyleSheet.create({wrap:{position:"absolute",left:0,right:0,bottom:0},hdr:{flexDirection:"row",alignItems:"center",justifyContent:"flex-end",height:44,position:"relative"},tBold:{fontWeight:"600"},tCenter:{position:"absolute",left:12,right:12,textAlign:"center"},hdrClose:{minWidth:56,alignItems:"flex-end"},k:{justifyContent:"center",alignItems:"center"},kTxt:{includeFontPadding:!1,textAlign:"center"},dRow:{flexDirection:"row",flexWrap:"wrap"},cRow:{flexDirection:"row"},cMat:{flex:3,flexDirection:"row",flexWrap:"wrap"},cSide:{flex:1,flexDirection:"column",justifyContent:"flex-start"}});export default NumberKeyboard;

package/dist/es/components/number-keyboard/index.js

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

package/dist/es/components/number-keyboard/tokens.js

@@ -1,53 +1 @@
-import { createComponentTokensHook } from '../../design-system';
-const createTokens = foundations => {
-  const {
-    palette,
-    spacing,
-    radii,
-    fontSize,
-    typography
-  } = foundations;
-  const onPrimary = palette.primary.foreground ?? '#ffffff';
-  return {
-    colors: {
-      background: palette.default[100],
-      title: palette.default[700],
-      keyBackground: '#ffffff',
-      keyActiveBackground: palette.default[50],
-      keyText: palette.default[900],
-      keyTextActive: palette.primary[600],
-      closeBackground: palette.primary[500],
-      closeActiveBackground: palette.primary[400],
-      closeText: onPrimary,
-      border: palette.default[200]
-    },
-    spacing: {
-      paddingHorizontal: spacing.ssm,
-      paddingVertical: spacing.ssm,
-      keyGap: spacing.ssm,
-      titlePadding: spacing.md
-    },
-    sizing: {
-      keyHeight: 54,
-      closeHeight: 44,
-      fontSize: 28,
-      defaultIconFontSize: 30,
-      auxFontSize: 18,
-      titleFontSize: fontSize.md
-    },
-    typography: {
-      fontFamily: typography.fontFamily
-    },
-    radii: {
-      key: radii.xs
-    },
-    shadow: {
-      color: '#000000',
-      opacity: 0.08,
-      radius: 6,
-      offsetY: 0,
-      elevation: 6
-    }
-  };
-};
-export const useNumberKeyboardTokens = createComponentTokensHook('numberKeyboard', createTokens);
+import{createComponentTokensHook}from"../../design-system";const createTokens=e=>{const{palette:o,spacing:t,radii:a,fontSize:r,typography:i}=e,n=o.primary.foreground??"#ffffff";return{colors:{background:o.default[100],title:o.default[700],keyBackground:"#ffffff",keyActiveBackground:o.default[50],keyText:o.default[900],keyTextActive:o.primary[600],closeBackground:o.primary[500],closeActiveBackground:o.primary[400],closeText:n,border:o.default[200]},spacing:{paddingHorizontal:t.ssm,paddingVertical:t.ssm,keyGap:t.ssm,titlePadding:t.md},sizing:{keyHeight:54,closeHeight:44,fontSize:28,defaultIconFontSize:30,auxFontSize:18,titleFontSize:r.md},typography:{fontFamily:i.fontFamily},radii:{key:a.xs},shadow:{color:"#000000",opacity:.08,radius:6,offsetY:0,elevation:6}}};export const useNumberKeyboardTokens=createComponentTokensHook("numberKeyboard",createTokens);

package/dist/es/components/overlay/Overlay.js

@@ -1,50 +1 @@
-import React from 'react';
-import { Modal, Platform } from 'react-native';
-import { OverlayContainer } from '@react-native-aria/overlays';
-import { useKeyboardDismissable } from '@react-native-aria/interactions';
-import { useOverlayTokens } from './tokens';
-const IS_WEB = Platform.OS === 'web';
-const OverlayImpl = (props, ref) => {
-  const {
-    children,
-    isOpen: openP,
-    visible: visP,
-    useRNModal: useModalP,
-    useRNModalOnAndroid: useModalAndroidP = false,
-    isKeyboardDismissable: kbDismissP = true,
-    animationPreset: animP = 'fade',
-    onRequestClose,
-    style
-  } = props;
-  const tokens = useOverlayTokens();
-  const useModal = useModalP ?? !IS_WEB;
-  const webStyle = IS_WEB ? {
-    zIndex: tokens.layer.zIndex,
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
-  } : undefined;
-  const open = openP ?? visP ?? false;
-  useKeyboardDismissable({
-    enabled: !IS_WEB && open && kbDismissP,
-    callback: onRequestClose ?? (() => {})
-  });
-  if (!open) return null;
-  if (useModal || useModalAndroidP && Platform.OS === 'android') return /*#__PURE__*/React.createElement(Modal, {
-    statusBarTranslucent: true,
-    transparent: true,
-    visible: open,
-    onRequestClose: onRequestClose,
-    animationType: animP,
-    ref: ref
-  }, children);
-  return /*#__PURE__*/React.createElement(OverlayContainer, {
-    style: [style, webStyle]
-  }, children);
-};
-const OverlayForwardRef = /*#__PURE__*/React.forwardRef(OverlayImpl);
-OverlayForwardRef.displayName = 'Overlay';
-export const Overlay = /*#__PURE__*/React.memo(OverlayForwardRef);
-export default Overlay;
+import React from"react";import{Modal,Platform}from"react-native";import{OverlayContainer}from"@react-native-aria/overlays";import{useKeyboardDismissable}from"@react-native-aria/interactions";import{useOverlayTokens}from"./tokens";const IS_WEB="web"===Platform.OS,OverlayImpl=(e,a)=>{const{children:r,isOpen:t,visible:o,useRNModal:l,useRNModalOnAndroid:s=!1,isKeyboardDismissable:i=!0,animationPreset:n="fade",onRequestClose:m,style:d}=e,y=useOverlayTokens(),c=l??!IS_WEB,v=IS_WEB?{zIndex:y.layer.zIndex,position:"fixed",top:0,left:0,right:0,bottom:0}:void 0,f=t??o??!1;return useKeyboardDismissable({enabled:!IS_WEB&&f&&i,callback:m??(()=>{})}),f?c||s&&"android"===Platform.OS?React.createElement(Modal,{statusBarTranslucent:!0,transparent:!0,visible:f,onRequestClose:m,animationType:n,ref:a},r):React.createElement(OverlayContainer,{style:[d,v]},r):null},OverlayForwardRef=React.forwardRef(OverlayImpl);OverlayForwardRef.displayName="Overlay";export const Overlay=React.memo(OverlayForwardRef);export default Overlay;

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

@@ -1,4 +1 @@
-import Overlay from './Overlay';
-import { OverlayProvider } from '@react-native-aria/overlays';
-export { Overlay, OverlayProvider };
-export default Overlay;
+import Overlay from"./Overlay";import{OverlayProvider}from"@react-native-aria/overlays";export{Overlay,OverlayProvider};export default Overlay;

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

@@ -1,7 +1 @@
-import { createComponentTokensHook } from '../../design-system';
-const createOverlayTokens = _foundations => ({
-  layer: {
-    zIndex: 9999
-  }
-});
-export const useOverlayTokens = createComponentTokensHook('overlay', createOverlayTokens);
+import{createComponentTokensHook}from"../../design-system";const createOverlayTokens=e=>({layer:{zIndex:9999}});export const useOverlayTokens=createComponentTokensHook("overlay",createOverlayTokens);