react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/es/notify/imperative.js

@@ -0,0 +1,154 @@
+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, { useEffect, useState } from 'react';
+import Portal from '../portal/Portal';
+import { isFunction, isString, isText } from '../../utils';
+import Notify from './Notify';
+const activeKeys = new Set();
+const notifyOptions = new Map();
+const notifyControllers = new Map();
+let allowMultiple = false;
+const baseOptions = {
+  type: 'primary',
+  position: 'top',
+  duration: 3000,
+  safeAreaInsetTop: true,
+  safeAreaInsetBottom: false
+};
+let currentOptions = {
+  ...baseOptions
+};
+const typeDefaults = new Map();
+const parseOptions = input => {
+  if (/*#__PURE__*/React.isValidElement(input) || isText(input)) {
+    return {
+      message: input
+    };
+  }
+  return input ?? {};
+};
+const mergeOptions = (input, fallbackType) => {
+  const type = input.type ?? fallbackType;
+  const base = {
+    ...currentOptions,
+    ...typeDefaults.get(type)
+  };
+  const merged = {
+    ...base,
+    ...input,
+    type
+  };
+  merged.duration = merged.duration ?? base.duration ?? 3000;
+  return merged;
+};
+const removeNotify = key => {
+  Portal.remove(key);
+  activeKeys.delete(key);
+  notifyOptions.delete(key);
+  notifyControllers.delete(key);
+};
+const closeNotify = key => {
+  const controller = notifyControllers.get(key);
+  if (controller) {
+    controller.close();
+  } else {
+    removeNotify(key);
+  }
+};
+const NotifyPortal = ({
+  id,
+  options
+}) => {
+  const [visible, setVisible] = useState(true);
+  useEffect(() => {
+    notifyControllers.set(id, {
+      close: () => setVisible(false)
+    });
+    return () => {
+      notifyControllers.delete(id);
+    };
+  }, [id]);
+  const handleClose = () => {
+    options.onClose?.();
+    setVisible(false);
+  };
+  const handleClosed = () => {
+    options.onClosed?.();
+    removeNotify(id);
+  };
+  return /*#__PURE__*/React.createElement(Notify, _extends({}, options, {
+    visible: visible,
+    onClose: handleClose,
+    onClosed: handleClosed
+  }));
+};
+const showNotify = (input, fallbackType = 'primary') => {
+  const opts = mergeOptions(parseOptions(input), fallbackType);
+  if (!allowMultiple) {
+    activeKeys.forEach(key => closeNotify(key));
+  }
+  const key = Portal.add(null);
+  notifyOptions.set(key, opts);
+  Portal.update(key, /*#__PURE__*/React.createElement(NotifyPortal, {
+    id: key,
+    options: opts
+  }));
+  activeKeys.add(key);
+  const config = next => {
+    const prev = notifyOptions.get(key);
+    if (!prev) return;
+    const nextInput = isFunction(next) ? next(prev) : next;
+    const parsed = parseOptions(nextInput);
+    const nextType = parsed.type ?? prev.type ?? fallbackType;
+    const merged = {
+      ...prev,
+      ...parsed,
+      type: nextType
+    };
+    if ('duration' in parsed && parsed.duration == null) {
+      merged.duration = baseOptions.duration ?? 3000;
+    }
+    notifyOptions.set(key, merged);
+    Portal.update(key, /*#__PURE__*/React.createElement(NotifyPortal, {
+      id: key,
+      options: merged
+    }));
+  };
+  return {
+    clear: () => closeNotify(key),
+    update: next => config(next),
+    config
+  };
+};
+export const NotifyImperative = {
+  show: options => showNotify(options),
+  primary: options => showNotify(options, 'primary'),
+  success: options => showNotify(options, 'success'),
+  danger: options => showNotify(options, 'danger'),
+  warning: options => showNotify(options, 'warning'),
+  clear: () => {
+    activeKeys.forEach(key => closeNotify(key));
+  },
+  allowMultiple: (value = true) => {
+    allowMultiple = value;
+  },
+  setDefaultOptions: (typeOrOptions, options) => {
+    if (isString(typeOrOptions)) {
+      typeDefaults.set(typeOrOptions, options ?? {});
+    } else {
+      currentOptions = {
+        ...currentOptions,
+        ...typeOrOptions
+      };
+    }
+  },
+  resetDefaultOptions: type => {
+    if (type) {
+      typeDefaults.delete(type);
+    } else {
+      currentOptions = {
+        ...baseOptions
+      };
+      typeDefaults.clear();
+    }
+  }
+};

package/dist/es/notify/index.js

@@ -0,0 +1,5 @@
+import { Notify as NotifyComponent } from './Notify';
+import { NotifyImperative } from './imperative';
+const Notify = Object.assign(NotifyComponent, NotifyImperative);
+export default Notify;
+export { Notify };

package/dist/es/notify/tokens.js

@@ -0,0 +1,65 @@
+import { createComponentTokensHook } from '../../design-system';
+export const createNotifyTokens = foundations => ({
+  defaults: {
+    type: 'primary',
+    position: 'top',
+    duration: 3000,
+    closeOnClick: false,
+    animationDuration: 180,
+    safeAreaInsetTop: true,
+    safeAreaInsetBottom: false
+  },
+  layout: {
+    portal: {
+      position: 'absolute',
+      left: 0,
+      right: 0
+    },
+    container: {
+      width: '100%'
+    },
+    safeArea: {
+      width: '100%'
+    },
+    content: {
+      width: '100%',
+      justifyContent: 'center'
+    },
+    text: {
+      textAlign: 'center',
+      includeFontPadding: false
+    }
+  },
+  colors: {
+    variants: {
+      primary: {
+        background: foundations.palette.primary[500],
+        text: foundations.palette.primary.foreground ?? '#ffffff'
+      },
+      success: {
+        background: foundations.palette.success[500],
+        text: foundations.palette.success.foreground ?? '#ffffff'
+      },
+      danger: {
+        background: foundations.palette.danger[500],
+        text: foundations.palette.danger.foreground ?? '#ffffff'
+      },
+      warning: {
+        background: foundations.palette.warning[500],
+        text: foundations.palette.warning.foreground ?? '#261400'
+      }
+    }
+  },
+  typography: {
+    fontSize: foundations.fontSize.sm,
+    lineHeight: Math.round(foundations.fontSize.sm * foundations.typography.lineHeightMultiplier)
+  },
+  sizing: {
+    minHeight: 40
+  },
+  spacing: {
+    paddingVertical: foundations.spacing.sm,
+    paddingHorizontal: foundations.spacing.md
+  }
+});
+export const useNotifyTokens = createComponentTokensHook('notify', createNotifyTokens);

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

@@ -0,0 +1,474 @@
+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, SafeAreaView, StyleSheet, Text, View } from 'react-native';
+import { useControllableValue } from '../../hooks';
+import { nativeDriverEnabled } from '../../platform';
+import { createPlatformShadow } from '../../utils/createPlatformShadow';
+import { parseNumberLike } from '../../utils/number';
+import Loading from '../loading';
+import Portal from '../portal/Portal';
+import { useNumberKeyboardTokens } from './tokens';
+const keyboardRegistry = new Set();
+const NUMBER_KEYS = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
+const ZERO_KEY = '0';
+const shuffle = list => {
+  const next = [...list];
+  for (let i = next.length - 1; i > 0; i -= 1) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [next[i], next[j]] = [next[j], next[i]];
+  }
+  return next;
+};
+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: _value,
+    defaultValue: _defaultValue,
+    maxlength: maxlengthProp,
+    blurOnClose = true,
+    safeAreaInsetBottom = true,
+    transition = true,
+    transitionDuration = 300,
+    numberKeyRender,
+    deleteRender,
+    extraKeyRender,
+    style,
+    ...rest
+  } = props;
+  const tokens = useNumberKeyboardTokens(tokensOverride);
+  const {
+    colors,
+    radii,
+    shadow,
+    sizing,
+    spacing
+  } = tokens;
+  const [mergedValue, setMergedValue] = useControllableValue(props, {
+    defaultValue: '',
+    valuePropName: 'value',
+    defaultValuePropName: 'defaultValue',
+    trigger: 'onChange'
+  });
+  const value = mergedValue ?? '';
+  const maxlength = useMemo(() => {
+    const parsed = parseNumberLike(maxlengthProp, undefined);
+    if (parsed === undefined || !Number.isFinite(parsed) || parsed < 0) return undefined;
+    return Math.floor(parsed);
+  }, [maxlengthProp]);
+  const valueRef = useRef(value);
+  const maxlengthRef = useRef(maxlength);
+  valueRef.current = value;
+  maxlengthRef.current = maxlength;
+  const isCustomTheme = theme === 'custom';
+  const resolvedCloseText = isCustomTheme ? closeButtonText ?? '完成' : closeButtonText;
+  const closeSelf = useCallback(() => {
+    onClose?.();
+    if (blurOnClose) {
+      onBlur?.();
+    }
+  }, [blurOnClose, onBlur, onClose]);
+  const prevVisible = useRef(visible);
+  useEffect(() => {
+    if (visible && !prevVisible.current) {
+      onShow?.();
+    }
+    if (!visible && prevVisible.current) {
+      onHide?.();
+    }
+    prevVisible.current = visible;
+  }, [visible, onShow, onHide]);
+  useEffect(() => {
+    if (visible) {
+      keyboardRegistry.add(closeSelf);
+      keyboardRegistry.forEach(fn => {
+        if (fn !== closeSelf) {
+          fn();
+        }
+      });
+    } else {
+      keyboardRegistry.delete(closeSelf);
+    }
+    return () => {
+      keyboardRegistry.delete(closeSelf);
+    };
+  }, [visible, closeSelf]);
+  const keys = useMemo(() => {
+    const shouldShuffle = randomKeyOrder && visible;
+    const numbers = shouldShuffle ? shuffle(NUMBER_KEYS) : NUMBER_KEYS;
+    const main = numbers.map(text => ({
+      text,
+      type: ''
+    }));
+    if (isCustomTheme) {
+      const extras = Array.isArray(extraKey) ? extraKey : extraKey ? [extraKey] : [];
+      if (extras.length === 1) {
+        main.push({
+          text: ZERO_KEY,
+          type: '',
+          wider: true
+        }, {
+          text: extras[0],
+          type: 'extra'
+        });
+      } else if (extras.length >= 2) {
+        main.push({
+          text: extras[0],
+          type: 'extra'
+        }, {
+          text: ZERO_KEY,
+          type: ''
+        }, {
+          text: extras[1],
+          type: 'extra'
+        });
+      } else {
+        main.push({
+          text: ZERO_KEY,
+          type: ''
+        });
+      }
+      return main;
+    }
+    const normalizedExtra = Array.isArray(extraKey) ? extraKey[0] ?? '' : extraKey ?? '';
+    main.push({
+      text: normalizedExtra,
+      type: 'extra'
+    });
+    main.push({
+      text: ZERO_KEY,
+      type: ''
+    });
+    main.push({
+      type: showDeleteKey ? 'delete' : '',
+      text: showDeleteKey ? undefined : ''
+    });
+    return main;
+  }, [extraKey, isCustomTheme, randomKeyOrder, showDeleteKey, visible]);
+  const handleInput = useCallback((text, type) => {
+    if (type === 'delete') {
+      const currentValue = valueRef.current;
+      if (!currentValue) return;
+      onDelete?.();
+      setMergedValue(currentValue.slice(0, -1));
+      return;
+    }
+    if (type === 'close' || type === 'extra' && !text) {
+      closeSelf();
+      return;
+    }
+    if (!text) return;
+    const currentValue = valueRef.current;
+    const currentMaxlength = maxlengthRef.current;
+    if (currentMaxlength !== undefined && currentValue.length >= currentMaxlength) return;
+    onInput?.(text);
+    setMergedValue(`${currentValue}${text}`);
+  }, [closeSelf, onDelete, onInput, setMergedValue]);
+  const wrapperShadow = useMemo(() => createPlatformShadow({
+    color: shadow.color,
+    opacity: shadow.opacity,
+    radius: shadow.radius,
+    offsetY: shadow.offsetY,
+    elevation: shadow.elevation
+  }), [shadow.color, shadow.opacity, shadow.radius, shadow.offsetY, shadow.elevation]);
+  const keyGap = spacing.keyGap;
+  const renderKey = useCallback((key, index, isClose = false, fullWidth = false, customHeight) => {
+    const isPlaceholder = key.type === '' && !key.text;
+    const disabled = isPlaceholder || isClose && closeButtonLoading;
+    const onPress = disabled ? undefined : () => handleInput(key.text, key.type);
+    const backgroundColor = isClose ? colors.closeBackground : colors.keyBackground;
+    const activeBackground = isClose ? colors.closeActiveBackground : colors.keyActiveBackground;
+    const inactiveTextColor = isClose ? colors.closeText : colors.keyText;
+    const pressedTextColor = isClose ? colors.closeText : colors.keyTextActive;
+    const keyHeight = customHeight ?? (isClose ? sizing.closeHeight : sizing.keyHeight);
+    const actionFontSize = Math.round(sizing.fontSize * 0.64);
+    const textFontSize = key.type === 'close' || key.type === 'extra' || key.type === 'delete' ? actionFontSize : sizing.fontSize;
+    const keyText = key.text ?? '';
+    const contentNode = key.type === 'delete' ? deleteRender?.() ?? deleteButtonText ?? '⌫' : key.type === 'extra' ? extraKeyRender ? extraKeyRender(keyText) : keyText || '⌨︎' : key.type === 'close' ? resolvedCloseText ?? '完成' : numberKeyRender ? numberKeyRender(keyText) : keyText;
+    return /*#__PURE__*/React.createElement(Pressable, {
+      key: `${key.type}-${index}-${key.text ?? index}`,
+      onPress: onPress,
+      disabled: disabled,
+      style: [{
+        opacity: isPlaceholder ? 1 : disabled ? 0.6 : 1
+      }, fullWidth ? {
+        width: '100%',
+        flexBasis: 'auto',
+        flexGrow: 0,
+        alignSelf: 'stretch'
+      } : {
+        flexBasis: 0,
+        flexGrow: key.wider ? 2 : 1,
+        flexShrink: 1,
+        minWidth: 0
+      }],
+      accessible: !isPlaceholder,
+      accessibilityRole: isPlaceholder ? undefined : 'button',
+      accessibilityLabel: isPlaceholder ? undefined : key.type === 'delete' ? 'delete' : key.type === 'close' ? resolvedCloseText ?? 'close' : key.type === 'extra' ? keyText || 'collapse' : keyText,
+      accessibilityState: isPlaceholder ? undefined : {
+        disabled: !!disabled
+      },
+      accessibilityElementsHidden: isPlaceholder,
+      importantForAccessibility: isPlaceholder ? 'no-hide-descendants' : undefined
+    }, ({
+      pressed
+    }) => {
+      const isPressed = pressed && !disabled;
+      const keyBackground = disabled ? colors.keyBackground : isPressed ? activeBackground : backgroundColor;
+      const textColor = isPressed ? pressedTextColor : inactiveTextColor;
+      return /*#__PURE__*/React.createElement(View, {
+        style: [styles.key, {
+          height: keyHeight,
+          backgroundColor: keyBackground,
+          borderRadius: radii.key
+        }]
+      }, isClose && closeButtonLoading ? /*#__PURE__*/React.createElement(Loading, {
+        size: 18,
+        color: textColor
+      }) : typeof contentNode === 'string' || typeof contentNode === 'number' ? /*#__PURE__*/React.createElement(Text, {
+        style: [styles.keyText, {
+          color: textColor,
+          fontSize: textFontSize
+        }]
+      }, contentNode) : contentNode == null || contentNode === false ? null : contentNode);
+    });
+  }, [closeButtonLoading, colors.closeActiveBackground, colors.closeBackground, colors.closeText, colors.keyActiveBackground, colors.keyBackground, colors.keyText, colors.keyTextActive, deleteButtonText, deleteRender, extraKeyRender, handleInput, numberKeyRender, radii.key, sizing.closeHeight, sizing.fontSize, sizing.keyHeight, resolvedCloseText]);
+  const animated = useRef(new Animated.Value(visible ? 1 : 0)).current;
+  const animationRef = useRef(null);
+  const animationSeqRef = useRef(0);
+  const [contentHeight, setContentHeight] = useState(0);
+  const [shouldRender, setShouldRender] = useState(visible);
+  const effectiveDuration = transition === false ? 0 : transitionDuration;
+  useEffect(() => {
+    animationSeqRef.current += 1;
+    const currentSeq = animationSeqRef.current;
+    if (visible) {
+      setShouldRender(true);
+    }
+    animationRef.current?.stop();
+    const animation = Animated.timing(animated, {
+      toValue: visible ? 1 : 0,
+      duration: effectiveDuration,
+      useNativeDriver: nativeDriverEnabled,
+      easing: visible ? Easing.out(Easing.cubic) : Easing.in(Easing.cubic)
+    });
+    animationRef.current = animation;
+    animation.start(({
+      finished
+    }) => {
+      if (finished && !visible && animationSeqRef.current === currentSeq) {
+        setShouldRender(false);
+      }
+    });
+    return () => {
+      animationRef.current?.stop();
+      animationRef.current = null;
+    };
+  }, [animated, visible, effectiveDuration]);
+  const translateY = useMemo(() => animated.interpolate({
+    inputRange: [0, 1],
+    outputRange: [contentHeight || 320, 0]
+  }), [animated, contentHeight]);
+  const handleLayout = useCallback(e => {
+    const {
+      height
+    } = e.nativeEvent.layout;
+    setContentHeight(prev => Math.abs(height - prev) > 0.5 ? height : prev);
+  }, []);
+  const hasHeader = !isCustomTheme && (title || closeButtonText);
+  const doubleKeyHeight = sizing.keyHeight * 2 + keyGap;
+  const memo = useMemo(() => {
+    const headerPaddingStyle = {
+      paddingHorizontal: spacing.titlePadding
+    };
+    const defaultContainerStyle = [styles.defaultRow, {
+      flexDirection: 'column',
+      flexWrap: 'nowrap',
+      paddingHorizontal: spacing.paddingHorizontal,
+      paddingTop: keyGap,
+      paddingBottom: keyGap,
+      gap: keyGap
+    }];
+    const defaultLineStyle = {
+      flexDirection: 'row',
+      gap: keyGap
+    };
+    const customRowStyle = [styles.customRow, {
+      paddingHorizontal: spacing.paddingHorizontal,
+      paddingTop: hasHeader ? 0 : keyGap,
+      paddingBottom: keyGap,
+      width: '100%'
+    }];
+    const customMainStyle = [styles.customMain, {
+      flexDirection: 'column',
+      flexWrap: 'nowrap',
+      gap: keyGap
+    }];
+    const customSidebarStyle = [styles.customSidebar, {
+      gap: keyGap,
+      marginLeft: keyGap
+    }];
+    const entries = keys.map((key, index) => ({
+      key,
+      index
+    }));
+    const defaultLines = [];
+    for (let i = 0; i < entries.length; i += 3) {
+      defaultLines.push(entries.slice(i, i + 3));
+    }
+    const defaultNode = /*#__PURE__*/React.createElement(View, {
+      style: defaultContainerStyle
+    }, defaultLines.map((line, lineIndex) => /*#__PURE__*/React.createElement(View, {
+      key: `l-${lineIndex}`,
+      style: defaultLineStyle
+    }, line.map(item => renderKey(item.key, item.index)))));
+    const customLines = [];
+    for (let i = 0; i < 9 && i < entries.length; i += 3) {
+      customLines.push(entries.slice(i, i + 3));
+    }
+    const tail = entries.slice(9);
+    if (tail.length === 1) {
+      customLines.push([{
+        key: {
+          type: ''
+        },
+        index: 1000001
+      }, tail[0], {
+        key: {
+          type: ''
+        },
+        index: 1000002
+      }]);
+    } else if (tail.length) {
+      customLines.push(tail);
+    }
+    const customMainNode = /*#__PURE__*/React.createElement(View, {
+      style: customMainStyle
+    }, customLines.map((line, lineIndex) => /*#__PURE__*/React.createElement(View, {
+      key: `cl-${lineIndex}`,
+      style: defaultLineStyle
+    }, line.map(item => renderKey(item.key, item.index)))));
+    const deleteNode = showDeleteKey ? renderKey({
+      type: 'delete'
+    }, 999, false, true, doubleKeyHeight) : null;
+    const closeNode = renderKey({
+      type: 'close'
+    }, 1000, true, true, doubleKeyHeight);
+    const headerNode = hasHeader ? /*#__PURE__*/React.createElement(View, {
+      style: [styles.header, headerPaddingStyle]
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: [styles.title, styles.titleOverlay, {
+        color: colors.title
+      }],
+      numberOfLines: 1
+    }, title), resolvedCloseText ? /*#__PURE__*/React.createElement(Pressable, {
+      onPress: closeSelf,
+      style: styles.headerClose,
+      accessibilityRole: "button",
+      accessibilityLabel: resolvedCloseText
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: {
+        color: colors.title
+      }
+    }, resolvedCloseText)) : null) : null;
+    const bodyNode = isCustomTheme ? /*#__PURE__*/React.createElement(View, {
+      style: customRowStyle
+    }, customMainNode, /*#__PURE__*/React.createElement(View, {
+      style: customSidebarStyle
+    }, deleteNode, closeNode)) : defaultNode;
+    const safeAreaNode = safeAreaInsetBottom && /*#__PURE__*/React.createElement(SafeAreaView, {
+      style: {
+        width: '100%'
+      }
+    });
+    return {
+      headerNode,
+      bodyNode,
+      safeAreaNode
+    };
+  }, [colors.title, doubleKeyHeight, hasHeader, isCustomTheme, keyGap, keys, renderKey, resolvedCloseText, safeAreaInsetBottom, showDeleteKey, closeSelf, spacing.paddingHorizontal, spacing.titlePadding, title]);
+  if (!shouldRender && !visible) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Animated.View, _extends({}, rest, {
+    pointerEvents: visible ? 'auto' : 'none',
+    onLayout: handleLayout,
+    style: [styles.wrapper, wrapperShadow, style, {
+      transform: [{
+        translateY
+      }],
+      backgroundColor: colors.background
+    }]
+  }), memo.headerNode, memo.bodyNode, memo.safeAreaNode));
+});
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    height: 44,
+    position: 'relative'
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600'
+  },
+  titleOverlay: {
+    position: 'absolute',
+    left: 12,
+    right: 12,
+    textAlign: 'center'
+  },
+  headerClose: {
+    minWidth: 56,
+    alignItems: 'flex-end'
+  },
+  key: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  keyText: {
+    includeFontPadding: false,
+    textAlign: 'center'
+  },
+  defaultRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap'
+  },
+  customRow: {
+    flexDirection: 'row'
+  },
+  customMain: {
+    flex: 3,
+    flexDirection: 'row',
+    flexWrap: 'wrap'
+  },
+  customSidebar: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'flex-start'
+  }
+});
+NumberKeyboard.displayName = 'NumberKeyboard';
+export default NumberKeyboard;

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

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