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

package/dist/cjs/notice-bar/NoticeBar.js

@@ -0,0 +1,390 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NoticeBar = 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;
+}
+function _reactNativeSystemIcon() {
+  const data = require("react-native-system-icon");
+  _reactNativeSystemIcon = function () {
+    return data;
+  };
+  return data;
+}
+var _hooks = require("../../hooks");
+var _number = require("../../utils/number");
+var _validate = require("../../utils/validate");
+var _platform = require("../../platform");
+var _tokens = require("./tokens");
+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 AnimatedText = _reactNative().Animated.createAnimatedComponent(_reactNative().Text);
+const IS_WEB = _reactNative().Platform.OS === 'web';
+if (IS_WEB) {
+  const globalObj = typeof globalThis !== 'undefined' ? globalThis : window;
+  if (globalObj.global === undefined) {
+    globalObj.global = globalObj;
+  }
+}
+const NoticeBar = props => {
+  const {
+    text,
+    children,
+    color,
+    background,
+    leftIcon,
+    rightIcon,
+    mode,
+    tokensOverride,
+    delay = 1,
+    speed = 60,
+    scrollable,
+    wrapable = false,
+    direction = 'horizontal',
+    items,
+    verticalInterval = 3000,
+    verticalDuration = 300,
+    onPress,
+    onClose,
+    onReplay,
+    textProps,
+    style,
+    ...rest
+  } = props;
+  const tokens = (0, _tokens.useNoticeBarTokens)(tokensOverride);
+  const resolvedColor = color ?? tokens.colors.text;
+  const resolvedBackground = background ?? tokens.colors.background;
+  const content = text ?? children;
+  const isTextContent = (0, _validate.isText)(content);
+  const isVertical = direction === 'vertical';
+  const [visible, setVisible] = (0, _react().useState)(true);
+  const {
+    onLayout: textOnLayout,
+    ...restTextProps
+  } = textProps ?? {};
+  const [contentWidth, setContentWidth] = (0, _react().useState)(0);
+  const [containerWidth, setContainerWidth] = (0, _react().useState)(0);
+  const translateX = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
+  const resolvedDelay = Math.max(0, (0, _number.parseNumber)(delay, 1));
+  const resolvedSpeed = (0, _number.parseNumber)(speed, 60);
+  const resolvedVerticalInterval = Math.max(0, (0, _number.parseNumber)(verticalInterval, 3000));
+  const resolvedVerticalDuration = Math.max(0, (0, _number.parseNumber)(verticalDuration, 300));
+  const verticalItems = (0, _react().useMemo)(() => {
+    if (!isVertical) return [];
+    if (items && items.length) return items;
+    const childArray = _react().default.Children.toArray(children);
+    if (childArray.length) return childArray;
+    return text !== undefined ? [text] : [];
+  }, [children, isVertical, items, text]);
+  const hasVerticalLoop = isVertical && verticalItems.length > 1;
+  const verticalTrackItems = (0, _react().useMemo)(() => hasVerticalLoop ? [...verticalItems, verticalItems[0]] : verticalItems, [hasVerticalLoop, verticalItems]);
+  const verticalTranslateY = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
+  const [itemHeight, setItemHeight] = (0, _react().useState)(0);
+  const setContentWidthSafe = (0, _react().useCallback)(next => {
+    setContentWidth(prev => Math.abs(prev - next) < 0.5 ? prev : next);
+  }, []);
+  const setContainerWidthSafe = (0, _react().useCallback)(next => {
+    setContainerWidth(prev => Math.abs(prev - next) < 0.5 ? prev : next);
+  }, []);
+  const handleClose = (0, _react().useCallback)(() => {
+    setVisible(false);
+    onClose?.();
+  }, [onClose]);
+  const closePress = (0, _hooks.useAriaPress)({
+    disabled: mode !== 'closeable' || !visible,
+    onPress: handleClose,
+    extraProps: {
+      accessibilityRole: 'button',
+      accessibilityLabel: '关闭'
+    }
+  });
+  const barPress = (0, _hooks.useAriaPress)({
+    disabled: !onPress || !visible,
+    onPress,
+    extraProps: onPress ? {
+      accessibilityRole: 'button'
+    } : undefined
+  });
+  const rightNode = (0, _react().useMemo)(() => {
+    if (mode === 'closeable') {
+      return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
+        hitSlop: 8
+      }, closePress.interactionProps), /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Close, {
+        size: 16,
+        fill: resolvedColor,
+        color: resolvedColor
+      }));
+    }
+    if (mode === 'link') {
+      return /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Arrow, {
+        size: 16,
+        fill: resolvedColor,
+        color: resolvedColor
+      });
+    }
+    return rightIcon || null;
+  }, [closePress.interactionProps, mode, resolvedColor, rightIcon]);
+  const hasLeft = (0, _validate.isRenderable)(leftIcon);
+  const hasRight = Boolean(rightNode);
+  const effectiveContainerWidth = (0, _react().useMemo)(() => Math.max(0, containerWidth - (hasLeft ? tokens.spacing.sidePadding : 0) - (hasRight ? tokens.spacing.sidePadding : 0)), [containerWidth, hasLeft, hasRight, tokens.spacing.sidePadding]);
+  const shouldScroll = (0, _react().useMemo)(() => !isVertical && !wrapable && (scrollable ?? contentWidth > effectiveContainerWidth), [contentWidth, effectiveContainerWidth, isVertical, scrollable, wrapable]);
+  (0, _react().useEffect)(() => {
+    if (!visible) {
+      translateX.stopAnimation();
+      return;
+    }
+    if (isVertical) {
+      translateX.stopAnimation();
+      return;
+    }
+    if (!shouldScroll || contentWidth === 0 || containerWidth === 0) {
+      translateX.setValue(0);
+      return;
+    }
+    if (resolvedSpeed <= 0 || !Number.isFinite(resolvedSpeed)) {
+      translateX.setValue(0);
+      return;
+    }
+    let cancelled = false;
+    const duration = (contentWidth + containerWidth) / resolvedSpeed * 1000;
+    const run = initial => {
+      translateX.setValue(initial ? 0 : containerWidth);
+      _reactNative().Animated.sequence([_reactNative().Animated.delay(resolvedDelay * 1000), _reactNative().Animated.timing(translateX, {
+        toValue: -contentWidth,
+        duration,
+        easing: _reactNative().Easing.linear,
+        useNativeDriver: _platform.nativeDriverEnabled
+      })]).start(({
+        finished
+      }) => {
+        if (finished && !cancelled) {
+          onReplay?.();
+          run(false);
+        }
+      });
+    };
+    run(true);
+    return () => {
+      cancelled = true;
+      translateX.stopAnimation();
+    };
+  }, [shouldScroll, translateX, visible, resolvedDelay, resolvedSpeed, contentWidth, containerWidth, onReplay, isVertical]);
+  (0, _react().useEffect)(() => {
+    if (!visible) {
+      verticalTranslateY.stopAnimation();
+      return;
+    }
+    if (!hasVerticalLoop || itemHeight === 0) {
+      verticalTranslateY.setValue(0);
+      return;
+    }
+    let cancelled = false;
+    let timeout = null;
+    let nextIndex = 1;
+    const schedule = () => {
+      timeout = setTimeout(() => {
+        _reactNative().Animated.timing(verticalTranslateY, {
+          toValue: -itemHeight * nextIndex,
+          duration: resolvedVerticalDuration,
+          easing: _reactNative().Easing.linear,
+          useNativeDriver: _platform.nativeDriverEnabled
+        }).start(({
+          finished
+        }) => {
+          if (cancelled || !finished) {
+            return;
+          }
+          nextIndex += 1;
+          if (nextIndex > verticalItems.length) {
+            verticalTranslateY.setValue(0);
+            nextIndex = 1;
+          }
+          schedule();
+        });
+      }, resolvedVerticalInterval);
+    };
+    schedule();
+    return () => {
+      cancelled = true;
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+      verticalTranslateY.stopAnimation();
+    };
+  }, [visible, hasVerticalLoop, itemHeight, resolvedVerticalDuration, resolvedVerticalInterval, verticalItems, verticalTranslateY]);
+  const handleItemLayout = (0, _react().useCallback)(event => {
+    const height = event?.nativeEvent?.layout?.height;
+    if (!height) return;
+    setItemHeight(prev => prev === 0 || Math.abs(prev - height) >= 0.5 ? height : prev);
+  }, []);
+  const verticalContentNode = (0, _react().useMemo)(() => {
+    if (!isVertical) return null;
+    if (verticalTrackItems.length === 0) return null;
+    if (!hasVerticalLoop) {
+      const single = verticalTrackItems[0];
+      if ((0, _validate.isText)(single)) {
+        return /*#__PURE__*/_react().default.createElement(_reactNative().Text, _extends({
+          onLayout: textOnLayout,
+          style: [styles.text, {
+            color: resolvedColor,
+            fontSize: tokens.typography.fontSize
+          }],
+          numberOfLines: 1,
+          ellipsizeMode: "tail"
+        }, restTextProps), single);
+      }
+      return single;
+    }
+    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: [styles.verticalViewport, itemHeight ? {
+        height: itemHeight
+      } : undefined],
+      pointerEvents: "none"
+    }, /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
+      style: [styles.verticalTrack, {
+        transform: [{
+          translateY: verticalTranslateY
+        }]
+      }]
+    }, verticalTrackItems.map((item, index) => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      key: index,
+      onLayout: index === 0 ? handleItemLayout : undefined,
+      style: styles.verticalItem
+    }, (0, _validate.isText)(item) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, _extends({
+      onLayout: textOnLayout,
+      style: [styles.text, {
+        color: resolvedColor,
+        fontSize: tokens.typography.fontSize
+      }],
+      numberOfLines: 1,
+      ellipsizeMode: "tail"
+    }, restTextProps), item) : item))));
+  }, [handleItemLayout, hasVerticalLoop, isVertical, itemHeight, resolvedColor, restTextProps, textOnLayout, tokens.typography.fontSize, verticalTrackItems, verticalTranslateY]);
+  const handleContainerLayout = (0, _react().useCallback)(event => {
+    setContainerWidthSafe(event.nativeEvent.layout.width);
+  }, [setContainerWidthSafe]);
+  const handleTextLayout = (0, _react().useCallback)(event => {
+    setContentWidthSafe(event.nativeEvent.layout.width);
+    textOnLayout?.(event);
+  }, [setContentWidthSafe, textOnLayout]);
+  const handleNodeLayout = (0, _react().useCallback)(event => setContentWidthSafe(event.nativeEvent.layout.width), [setContentWidthSafe]);
+  if (!visible) {
+    return null;
+  }
+  return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
+    style: [styles.container, {
+      backgroundColor: resolvedBackground,
+      paddingHorizontal: tokens.spacing.paddingHorizontal,
+      paddingVertical: wrapable ? tokens.spacing.wrapPaddingVertical : tokens.spacing.paddingVertical,
+      minHeight: tokens.layout.minHeight,
+      borderRadius: tokens.layout.radius
+    }, style],
+    disabled: barPress.states.disabled
+  }, barPress.interactionProps, rest), hasLeft ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [styles.sideSection, {
+      minWidth: tokens.layout.sideMinWidth
+    }]
+  }, leftIcon) : null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    onLayout: handleContainerLayout,
+    style: [styles.content, wrapable && styles.contentWrap, hasLeft && {
+      paddingLeft: tokens.spacing.sidePadding
+    }, hasRight && {
+      paddingRight: tokens.spacing.sidePadding
+    }],
+    pointerEvents: "none"
+  }, isVertical ? verticalContentNode : shouldScroll ? isTextContent ? /*#__PURE__*/_react().default.createElement(AnimatedText, _extends({
+    onLayout: handleTextLayout,
+    style: [styles.text, styles.scrollText, {
+      color: resolvedColor,
+      fontSize: tokens.typography.fontSize,
+      transform: [{
+        translateX
+      }]
+    }]
+  }, IS_WEB ? {} : {
+    numberOfLines: 1,
+    ellipsizeMode: 'clip'
+  }, restTextProps), content) : /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
+    onLayout: handleNodeLayout,
+    style: [styles.text, {
+      transform: [{
+        translateX
+      }]
+    }]
+  }, content) : isTextContent ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, _extends({
+    onLayout: handleTextLayout,
+    style: [styles.text, {
+      color: resolvedColor,
+      fontSize: tokens.typography.fontSize
+    }, wrapable && styles.wrapText],
+    numberOfLines: wrapable ? undefined : 1,
+    ellipsizeMode: wrapable ? 'tail' : 'clip'
+  }, restTextProps), content) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    onLayout: handleNodeLayout,
+    style: [styles.text, wrapable && styles.wrapText]
+  }, content)), rightNode ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [styles.sideSection, {
+      minWidth: tokens.layout.sideMinWidth
+    }]
+  }, rightNode) : null);
+};
+exports.NoticeBar = NoticeBar;
+const styles = _reactNative().StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  sideSection: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    overflow: 'hidden'
+  },
+  text: {
+    flexShrink: 0
+  },
+  scrollText: _reactNative().Platform.select({
+    web: {
+      whiteSpace: 'nowrap',
+      textOverflow: 'clip'
+    },
+    default: {}
+  }),
+  wrapText: {
+    flexWrap: 'wrap',
+    flexShrink: 1
+  },
+  contentWrap: {
+    flexDirection: 'column'
+  },
+  verticalViewport: {
+    width: '100%',
+    overflow: 'hidden'
+  },
+  verticalTrack: {
+    flexDirection: 'column',
+    width: '100%'
+  },
+  verticalItem: {
+    width: '100%',
+    justifyContent: 'center'
+  }
+});
+NoticeBar.displayName = 'NoticeBar';

package/dist/cjs/notice-bar/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _NoticeBar = require("./NoticeBar");
+var _default = exports.default = _NoticeBar.NoticeBar;

package/dist/cjs/notice-bar/tokens.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNoticeBarTokens = exports.createNoticeBarTokens = void 0;
+var _designSystem = require("../../design-system");
+const createNoticeBarTokens = foundations => {
+  const {
+    palette,
+    fontSize,
+    spacing,
+    radii
+  } = foundations;
+  return {
+    colors: {
+      text: palette.warning[600],
+      background: palette.warning[50]
+    },
+    typography: {
+      fontSize: fontSize.sm
+    },
+    layout: {
+      minHeight: 40,
+      radius: radii.lg,
+      sideMinWidth: 24
+    },
+    spacing: {
+      paddingHorizontal: spacing.lg,
+      paddingVertical: spacing.sm,
+      wrapPaddingVertical: spacing.md,
+      sidePadding: spacing.sm
+    }
+  };
+};
+exports.createNoticeBarTokens = createNoticeBarTokens;
+const useNoticeBarTokens = exports.useNoticeBarTokens = (0, _designSystem.createComponentTokensHook)('noticeBar', createNoticeBarTokens);

package/dist/cjs/notify/Notify.js

@@ -0,0 +1,199 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Notify = 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 _utils = require("../../utils");
+var _hooks = require("../../hooks");
+var _usePresenceAnimation = require("../../hooks/usePresenceAnimation");
+var _Portal = _interopRequireDefault(require("../portal/Portal"));
+var _overlay = require("../overlay");
+var _safeArea = require("../safe-area");
+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 Notify = props => {
+  const {
+    visible,
+    message,
+    type: typeProp,
+    duration: durationProp,
+    position: positionProp,
+    color,
+    background,
+    zIndex,
+    closeOnClick: closeOnClickProp,
+    style,
+    textStyle,
+    tokensOverride,
+    onClick,
+    onClose,
+    onOpen,
+    onOpened,
+    onClosed
+  } = props;
+  const tokens = (0, _tokens.useNotifyTokens)(tokensOverride);
+  const type = typeProp ?? tokens.defaults.type;
+  const position = positionProp ?? tokens.defaults.position;
+  const closeOnClick = closeOnClickProp ?? tokens.defaults.closeOnClick;
+  const safeAreaInsetTop = props.safeAreaInsetTop ?? (position === 'top' ? tokens.defaults.safeAreaInsetTop : false);
+  const safeAreaInsetBottom = props.safeAreaInsetBottom ?? (position === 'bottom' ? tokens.defaults.safeAreaInsetBottom : false);
+  const variant = tokens.colors.variants[type];
+  const resolvedBackground = background ?? variant.background;
+  const resolvedTextColor = color ?? variant.text;
+  const resolvedDuration = durationProp ?? tokens.defaults.duration;
+  const topInsetStyle = (0, _react().useMemo)(() => ({
+    backgroundColor: resolvedBackground
+  }), [resolvedBackground]);
+  const {
+    mounted,
+    animated
+  } = (0, _usePresenceAnimation.usePresenceAnimation)(visible, {
+    duration: tokens.defaults.animationDuration,
+    appear: true
+  });
+  const {
+    zIndex: stackZIndex
+  } = (0, _overlay.useOverlayStack)({
+    visible: mounted,
+    type: 'notify',
+    zIndex
+  });
+  const prevVisibleRef = (0, _react().useRef)(visible);
+  const closingRef = (0, _react().useRef)(false);
+  (0, _react().useEffect)(() => {
+    let openedTimer = null;
+    if (visible) {
+      closingRef.current = false;
+      if (!prevVisibleRef.current) {
+        onOpen?.();
+        if (onOpened) openedTimer = setTimeout(onOpened, tokens.defaults.animationDuration);
+      }
+    } else if (prevVisibleRef.current) {
+      closingRef.current = true;
+    }
+    prevVisibleRef.current = visible;
+    return () => {
+      if (openedTimer) clearTimeout(openedTimer);
+    };
+  }, [onOpen, onOpened, tokens.defaults.animationDuration, visible]);
+  (0, _react().useEffect)(() => {
+    if (!mounted && closingRef.current) {
+      closingRef.current = false;
+      onClosed?.();
+    }
+  }, [mounted, onClosed]);
+  (0, _react().useEffect)(() => {
+    let timer = null;
+    if (visible && resolvedDuration > 0) {
+      timer = setTimeout(() => {
+        onClose?.();
+      }, resolvedDuration);
+    }
+    return () => {
+      if (timer) clearTimeout(timer);
+    };
+  }, [onClose, resolvedDuration, visible]);
+  const interactive = closeOnClick || (0, _utils.isFunction)(onClick);
+  const handlePress = (0, _react().useCallback)(() => {
+    onClick?.();
+    if (closeOnClick) onClose?.();
+  }, [closeOnClick, onClick, onClose]);
+  const accessibilityRole = interactive ? 'button' : 'alert';
+  const press = (0, _hooks.useAriaPress)({
+    disabled: !interactive,
+    onPress: handlePress,
+    extraProps: {
+      accessibilityRole,
+      accessibilityLiveRegion: 'assertive'
+    }
+  });
+  const [barHeight, setBarHeight] = (0, _react().useState)(0);
+  const handleLayout = (0, _react().useCallback)(event => {
+    const height = event.nativeEvent.layout.height;
+    if (!height) return;
+    setBarHeight(prev => prev === height ? prev : height);
+  }, []);
+  const translateDistance = Math.max(barHeight, tokens.sizing.minHeight);
+  const translateY = position === 'bottom' ? animated.interpolate({
+    inputRange: [0, 1],
+    outputRange: [translateDistance, 0]
+  }) : animated.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-translateDistance, 0]
+  });
+  const hasMessage = message !== undefined && message !== null && message !== false && message !== '';
+  if (!mounted) return null;
+  const resolvedZIndex = stackZIndex ?? zIndex;
+  const renderBar = topInsetNode => /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
+    testID: "rv-notify-bar",
+    accessibilityRole: !interactive ? accessibilityRole : undefined,
+    accessibilityLiveRegion: !interactive ? 'assertive' : undefined,
+    onLayout: handleLayout,
+    style: [tokens.layout.container, {
+      backgroundColor: resolvedBackground,
+      opacity: animated,
+      transform: [{
+        translateY
+      }]
+    }, style]
+  }, topInsetNode, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.content, {
+      paddingHorizontal: tokens.spacing.paddingHorizontal,
+      paddingVertical: tokens.spacing.paddingVertical,
+      minHeight: tokens.sizing.minHeight
+    }]
+  }, hasMessage ? (0, _utils.isText)(message) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: [tokens.layout.text, {
+      color: resolvedTextColor,
+      fontSize: tokens.typography.fontSize,
+      lineHeight: tokens.typography.lineHeight
+    }, textStyle]
+  }, message) : message : null), safeAreaInsetBottom && /*#__PURE__*/_react().default.createElement(_reactNative().SafeAreaView, {
+    style: tokens.layout.safeArea
+  }));
+  return /*#__PURE__*/_react().default.createElement(_Portal.default, null, /*#__PURE__*/_react().default.createElement(_safeArea.SafeAreaClipProvider, {
+    enabled: safeAreaInsetTop,
+    position: position,
+    topInsetStyle: topInsetStyle,
+    style: [tokens.layout.portal, position === 'bottom' ? {
+      bottom: 0
+    } : {
+      top: 0
+    }, resolvedZIndex !== undefined && resolvedZIndex !== null ? {
+      zIndex: resolvedZIndex
+    } : null]
+  }, ({
+    clipTop,
+    topInset
+  }) => {
+    const topInsetNode = clipTop ? null : safeAreaInsetTop ? /*#__PURE__*/_react().default.createElement(_reactNative().SafeAreaView, {
+      style: tokens.layout.safeArea
+    }) : topInset;
+    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      testID: "rv-notify",
+      pointerEvents: interactive ? 'box-none' : 'none'
+    }, interactive ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, press.interactionProps, {
+      disabled: !interactive
+    }), renderBar(topInsetNode)) : renderBar(topInsetNode));
+  }));
+};
+exports.Notify = Notify;
+Notify.displayName = 'Notify';
+var _default = exports.default = Notify;

package/dist/cjs/notify/defaults.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.notifyDefaults = void 0;
+const notifyDefaults = exports.notifyDefaults = {
+  type: 'primary',
+  position: 'top',
+  duration: 3000,
+  closeOnClick: false,
+  animationDuration: 220,
+  safeAreaInsetTop: false,
+  safeAreaInsetBottom: false
+};