react-native-system-ui 1.0.0 → 1.0.2

package/README.md

@@ -119,13 +119,13 @@ export const AuroraBranding = () => (
 
 | 分类 | 组件 |
 | --- | --- |
-| **设计系统** | ConfigProvider、ThemeProvider、createTokens、themePresets（light / dark / aurora） |
+| **设计系统** | ConfigProvider、ThemeProvider、Text、createTokens、themePresets（light / dark / aurora） |
 | **基础展示** | Button、Badge、Cell、Collapse、Divider、Empty、Flex、Grid、Space、Tag、Typography、Loading、Avatar |
 | **反馈交互** | Toast、Dialog、ActionSheet、Notify、Overlay、Popup、Portal、NoticeBar、ShareSheet |
 | **表单输入** | Form、Field、Input、PasswordInput、Checkbox、Radio、Switch、Stepper、Rate、Picker、DatetimePicker、Calendar、Search、NumberKeyboard、Area、Cascader、Selector |
 | **导航布局** | Tabs、NavBar、Tabbar、Sidebar、Swiper（三端手势 + 桌面鼠标拖拽） |
 | **数据展示** | Image、ImagePreview、Skeleton、Progress、Circle、Slider、CountDown、WaterMark |
-| **基础设施** | SafeAreaView、PortalHost、OverlayProvider、locale（zhCN / enUS） |
+| **基础设施** | SafeAreaView、ErrorBoundary、PortalHost、OverlayProvider、locale（zhCN / enUS） |
 
 详细组件列表与开发状态见 [路线图](./docs/guide/roadmap.md)。
 
@@ -156,4 +156,4 @@ export const AuroraBranding = () => (
 
 ## 版本与反馈
 
-当前为 v0.0.7，欢迎 issue / PR。
+当前为 v1.0.2，欢迎 issue / PR。

package/dist/cjs/components/action-sheet/ActionSheet.js

@@ -66,7 +66,9 @@ const ActionSheetHeader = /*#__PURE__*/_react().default.memo(({
   }, closePress.interactionProps), /*#__PURE__*/_react().default.isValidElement(closeIcon) ? /*#__PURE__*/_react().default.cloneElement(closeIcon, {
     fill: colors.description,
     color: colors.description
-  }) : closeIcon));
+  }) : (0, _utils.renderTextOrNode)(closeIcon, [{
+    color: colors.description
+  }])));
 });
 const ActionSheetItem = /*#__PURE__*/_react().default.memo(({
   action,
@@ -109,7 +111,9 @@ const ActionSheetItem = /*#__PURE__*/_react().default.memo(({
     }, action.style]
   }, actionPress.interactionProps), !!icon && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.icon
-  }, icon), loading ? /*#__PURE__*/_react().default.createElement(_loading.default, {
+  }, (0, _utils.isText)(icon) ? (0, _utils.renderTextOrNode)(icon, [{
+    color: colors.item
+  }]) : icon), loading ? /*#__PURE__*/_react().default.createElement(_loading.default, {
     size: 20
   }) : (0, _utils.isRenderable)(name) ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.itemTextWrapper
@@ -163,33 +167,33 @@ const ActionSheetImpl = props => {
     description,
     cancelText,
     actions = [],
-    closeOnClickAction: closeOnClickActionProp,
+    closeOnClickAction: closeOnActP,
     closeOnSelect,
-    closeable: closeableProp,
+    closeable: closeableP,
     closeIcon = defaultCloseIcon,
     beforeClose,
     onSelect,
     onCancel,
     onClose,
     children,
-    round: roundProp,
-    safeAreaInsetBottom: safeAreaInsetBottomProp,
-    overlay: overlayProp,
-    lockScroll: lockScrollProp,
-    style: popupStyle,
-    ...popupProps
+    round: roundP,
+    safeAreaInsetBottom: safeP,
+    overlay: ovP,
+    lockScroll: lockP,
+    style: popStyle,
+    ...popProps
   } = props;
   const tokens = (0, _tokens.useActionSheetTokens)(tokensOverride);
-  const closeable = closeableProp ?? tokens.defaults.closeable;
-  const round = roundProp ?? tokens.defaults.round;
-  const safeAreaInsetBottom = safeAreaInsetBottomProp ?? tokens.defaults.safeAreaInsetBottom;
-  const overlay = overlayProp ?? tokens.defaults.overlay;
-  const lockScroll = lockScrollProp ?? tokens.defaults.lockScroll;
-  const shouldCloseOnClickAction = closeOnClickActionProp ?? closeOnSelect ?? tokens.defaults.closeOnClickAction;
-  const hasTitle = (0, _utils.isRenderable)(title);
-  const hasDescription = (0, _utils.isRenderable)(description);
-  const hasCancelText = (0, _utils.isRenderable)(cancelText);
-  const lastPopupCloseReasonRef = (0, _react().useRef)('close');
+  const closeable = closeableP ?? tokens.defaults.closeable;
+  const round = roundP ?? tokens.defaults.round;
+  const safeBottom = safeP ?? tokens.defaults.safeAreaInsetBottom;
+  const overlay = ovP ?? tokens.defaults.overlay;
+  const lockScroll = lockP ?? tokens.defaults.lockScroll;
+  const closeOnAct = closeOnActP ?? closeOnSelect ?? tokens.defaults.closeOnClickAction;
+  const hasT = (0, _utils.isRenderable)(title);
+  const hasD = (0, _utils.isRenderable)(description);
+  const hasC = (0, _utils.isRenderable)(cancelText);
+  const lastReasonRef = (0, _react().useRef)('close');
   const closingRef = (0, _react().useRef)(false);
   const beforeCloseRef = (0, _react().useRef)(beforeClose);
   beforeCloseRef.current = beforeClose;
@@ -199,7 +203,7 @@ const ActionSheetImpl = props => {
   onCancelRef.current = onCancel;
   const onSelectRef = (0, _react().useRef)(onSelect);
   onSelectRef.current = onSelect;
-  const runBeforeClose = (0, _react().useCallback)(async action => {
+  const runBefore = (0, _react().useCallback)(async action => {
     if (!beforeCloseRef.current) return true;
     try {
       return (await beforeCloseRef.current(action)) !== false;
@@ -216,61 +220,55 @@ const ActionSheetImpl = props => {
     ;
     onCancelRef.current?.();
   }, []);
-  const requestClose = (0, _react().useCallback)(async action => {
+  const reqClose = (0, _react().useCallback)(async action => {
     if (closingRef.current) return;
     closingRef.current = true;
     try {
-      const allowed = await runBeforeClose(action);
-      if (!allowed) return;
+      const ok = await runBefore(action);
+      if (!ok) return;
       emitClose(action);
     } finally {
       closingRef.current = false;
     }
-  }, [emitClose, runBeforeClose]);
-  const handlePopupBeforeClose = (0, _react().useCallback)(reason => {
-    lastPopupCloseReasonRef.current = reason;
-    return runBeforeClose(reason);
-  }, [runBeforeClose]);
-  const handlePopupClose = (0, _react().useCallback)(() => {
-    emitClose(lastPopupCloseReasonRef.current);
+  }, [emitClose, runBefore]);
+  const onPopupBefore = (0, _react().useCallback)(reason => {
+    lastReasonRef.current = reason;
+    return runBefore(reason);
+  }, [runBefore]);
+  const onPopupClose = (0, _react().useCallback)(() => {
+    emitClose(lastReasonRef.current);
   }, [emitClose]);
-  const handleCancel = (0, _react().useCallback)(() => {
-    void requestClose('cancel');
-  }, [requestClose]);
-  const handleCloseIcon = (0, _react().useCallback)(() => {
-    void requestClose('close-icon');
-  }, [requestClose]);
-  const handleActionPress = (0, _react().useCallback)((action, index) => {
+  const onActPress = (0, _react().useCallback)((action, index) => {
     if (action.disabled || action.loading) return;
     action.onPress?.(action);
     action.callback?.(action);
     onSelectRef.current?.(action, index);
-    if (shouldCloseOnClickAction) void requestClose('action');
-  }, [requestClose, shouldCloseOnClickAction]);
-  const popupStyleMemo = (0, _react().useMemo)(() => [tokens.layout.popup, popupStyle], [tokens.layout.popup, popupStyle]);
+    if (closeOnAct) void reqClose('action');
+  }, [reqClose, closeOnAct]);
+  const popStyleMemo = (0, _react().useMemo)(() => [tokens.layout.popup, popStyle], [tokens.layout.popup, popStyle]);
   return /*#__PURE__*/_react().default.createElement(_popup.default, _extends({
     visible: visible,
     placement: "bottom",
     round: round,
-    safeAreaInsetTop: hasTitle && closeable,
-    safeAreaInsetBottom: safeAreaInsetBottom,
+    safeAreaInsetTop: hasT && closeable,
+    safeAreaInsetBottom: safeBottom,
     overlay: overlay,
     lockScroll: lockScroll,
-    beforeClose: handlePopupBeforeClose,
-    onClose: handlePopupClose,
-    style: popupStyleMemo
-  }, popupProps), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    beforeClose: onPopupBefore,
+    onClose: onPopupClose,
+    style: popStyleMemo
+  }, popProps), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     accessibilityRole: "menu",
     style: [tokens.layout.panel, {
       backgroundColor: tokens.colors.background
     }]
-  }, hasTitle && /*#__PURE__*/_react().default.createElement(ActionSheetHeader, {
+  }, hasT && /*#__PURE__*/_react().default.createElement(ActionSheetHeader, {
     title: title,
     closeable: closeable,
     closeIcon: closeIcon,
     tokens: tokens,
-    onClose: handleCloseIcon
-  }), hasDescription && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    onClose: () => void reqClose('close-icon')
+  }), hasD && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.descriptionContainer
   }, (0, _utils.isText)(description) ? (0, _utils.renderTextOrNode)(description, [tokens.layout.description, {
     color: tokens.colors.description,
@@ -291,11 +289,11 @@ const ActionSheetImpl = props => {
     action: action,
     index: index,
     tokens: tokens,
-    onActionPress: handleActionPress
-  }))), children, hasCancelText && /*#__PURE__*/_react().default.createElement(ActionSheetCancel, {
+    onActionPress: onActPress
+  }))), children, hasC && /*#__PURE__*/_react().default.createElement(ActionSheetCancel, {
     cancelText: cancelText,
     tokens: tokens,
-    onPress: handleCancel
+    onPress: () => void reqClose('cancel')
   })));
 };
 const ActionSheet = /*#__PURE__*/_react().default.memo(ActionSheetImpl);

package/dist/cjs/components/area/Area.js

@@ -20,19 +20,19 @@ const sortEntries = record => record ? Object.entries(record).sort(([a], [b]) =>
 const getProvinceCode = code => code.slice(0, 2);
 const getCityCode = code => code.slice(0, 4);
 const groupBy = (list, getKey) => {
-  const map = new Map();
+  const m = new Map();
   sortEntries(list).forEach(([code, name]) => {
-    const key = getKey(code);
-    const array = map.get(key);
-    if (array) array.push({
+    const k = getKey(code);
+    const arr = m.get(k);
+    if (arr) arr.push({
       label: name,
       value: code
-    });else map.set(key, [{
+    });else m.set(k, [{
       label: name,
       value: code
     }]);
   });
-  return map;
+  return m;
 };
 const buildAreaColumns = (areaList, columnsNum = 3) => {
   const provinces = sortEntries(areaList.province_list);
@@ -81,15 +81,15 @@ const AreaImpl = props => {
   const tokens = (0, _tokens.useAreaTokens)();
   const {
     areaList,
-    columnsNum: columnsNumProp = tokens.defaults.columnsNum,
+    columnsNum: colP = tokens.defaults.columnsNum,
     value,
     defaultValue,
     onChange,
     onConfirm,
-    interactionMode: interactionModeProp = tokens.defaults.interactionMode,
+    interactionMode: modeP = tokens.defaults.interactionMode,
     ...rest
   } = props;
-  const resolvedColumnsNum = (0, _react().useMemo)(() => columnsNumProp >= 1 && columnsNumProp <= 3 ? columnsNumProp : tokens.defaults.columnsNum, [columnsNumProp]);
+  const cols = (0, _react().useMemo)(() => colP >= 1 && colP <= 3 ? colP : tokens.defaults.columnsNum, [colP]);
   const {
     province_list,
     city_list,
@@ -99,27 +99,27 @@ const AreaImpl = props => {
     province_list,
     city_list,
     county_list
-  }, resolvedColumnsNum), [city_list, county_list, province_list, resolvedColumnsNum]);
-  const normalize = (0, _react().useCallback)(val => val === undefined ? undefined : normalizeCascadeValue(columns, val, resolvedColumnsNum), [columns, resolvedColumnsNum]);
-  const normalizedValue = (0, _react().useMemo)(() => normalize(value), [normalize, value]);
-  const normalizedDefaultValue = (0, _react().useMemo)(() => normalize(defaultValue), [normalize, defaultValue]);
+  }, cols), [city_list, county_list, province_list, cols]);
+  const norm = (0, _react().useCallback)(val => val === undefined ? undefined : normalizeCascadeValue(columns, val, cols), [columns, cols]);
+  const normVal = (0, _react().useMemo)(() => norm(value), [norm, value]);
+  const normDef = (0, _react().useMemo)(() => norm(defaultValue), [norm, defaultValue]);
   const onChangeRef = (0, _react().useRef)(onChange);
   onChangeRef.current = onChange;
   const onConfirmRef = (0, _react().useRef)(onConfirm);
   onConfirmRef.current = onConfirm;
-  const wrappedOnChange = (0, _react().useCallback)((values, options) => {
-    onChangeRef.current?.(values.map(String), options);
+  const onCh = (0, _react().useCallback)((values, opts) => {
+    onChangeRef.current?.(values.map(String), opts);
   }, []);
-  const wrappedOnConfirm = (0, _react().useCallback)((values, options) => {
-    onConfirmRef.current?.(values.map(String), options);
+  const onConf = (0, _react().useCallback)((values, opts) => {
+    onConfirmRef.current?.(values.map(String), opts);
   }, []);
   return /*#__PURE__*/_react().default.createElement(_picker.default, _extends({}, rest, {
     columns: columns,
-    interactionMode: interactionModeProp,
-    value: normalizedValue,
-    defaultValue: normalizedDefaultValue,
-    onChange: onChange ? wrappedOnChange : undefined,
-    onConfirm: onConfirm ? wrappedOnConfirm : undefined
+    interactionMode: modeP,
+    value: normVal,
+    defaultValue: normDef,
+    onChange: onChange ? onCh : undefined,
+    onConfirm: onConfirm ? onConf : undefined
   }));
 };
 const Area = /*#__PURE__*/_react().default.memo(AreaImpl);

package/dist/cjs/components/avatar/Avatar.js

@@ -61,11 +61,11 @@ const AvatarImpl = (props, ref) => {
     source,
     icon,
     text,
-    size: sizeProp,
-    width: widthProp,
-    height: heightProp,
-    shape: shapeProp,
-    fit: fitProp,
+    size: szP,
+    width: wP,
+    height: hP,
+    shape: shapeP,
+    fit: fitP,
     color,
     backgroundColor,
     style,
@@ -76,45 +76,45 @@ const AvatarImpl = (props, ref) => {
     ...rest
   } = props;
   const tokens = (0, _tokens.useAvatarTokens)(tokensOverride);
-  const resolvedSize = sizeProp ?? tokens.defaults.size;
-  const resolvedShape = shapeProp ?? tokens.defaults.shape;
-  const baseSize = (0, _utils.isNumber)(resolvedSize) ? resolvedSize : tokens.sizing.sizes[resolvedSize];
-  const avatarWidth = widthProp ?? baseSize;
-  const avatarHeight = heightProp ?? baseSize;
-  const borderRadius = resolvedShape === 'circle' ? Math.min(avatarWidth, avatarHeight) / 2 : Math.max(tokens.radii.squareMin, Math.min(avatarWidth, avatarHeight) / tokens.radii.squareDivisor);
-  const transparentContainerStyle = {
+  const rSz = szP ?? tokens.defaults.size;
+  const rShape = shapeP ?? tokens.defaults.shape;
+  const base = (0, _utils.isNumber)(rSz) ? rSz : tokens.sizing.sizes[rSz];
+  const w = wP ?? base;
+  const h = hP ?? base;
+  const radius = rShape === 'circle' ? Math.min(w, h) / 2 : Math.max(tokens.radii.squareMin, Math.min(w, h) / tokens.radii.squareDivisor);
+  const transStyle = {
     backgroundColor: tokens.colors.transparent
   };
-  const fallbackContent = icon ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  const fallback = icon ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [tokens.layout.iconWrapper, {
-      width: Math.min(avatarWidth, tokens.sizing.iconMaxSize),
-      height: Math.min(avatarHeight, tokens.sizing.iconMaxSize)
+      width: Math.min(w, tokens.sizing.iconMaxSize),
+      height: Math.min(h, tokens.sizing.iconMaxSize)
     }, contentStyle]
   }, icon) : text && /*#__PURE__*/_react().default.createElement(AvatarFallbackText, {
     color: color,
     style: [{
-      fontSize: Math.min(avatarWidth, avatarHeight) * tokens.typography.fallbackTextScale
+      fontSize: Math.min(w, h) * tokens.typography.fallbackTextScale
     }, textStyle]
   }, text.trim().slice(0, 2).toUpperCase());
   const content = children ?? (src || source ? /*#__PURE__*/_react().default.createElement(AvatarImage, {
     src: src,
     source: source,
-    containerStyle: transparentContainerStyle,
+    containerStyle: transStyle,
     style: tokens.layout.image,
-    fit: fitProp ?? 'cover',
+    fit: fitP ?? 'cover',
     loadingText: null,
     loadingSize: tokens.sizing.loadingSize,
     showError: true,
-    fallback: fallbackContent
-  }) : fallbackContent);
+    fallback: fallback
+  }) : fallback);
   return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
     ref: ref,
     accessibilityRole: "image",
     accessibilityLabel: text ?? (src ? 'avatar' : undefined),
     style: [tokens.layout.container, {
-      width: avatarWidth,
-      height: avatarHeight,
-      borderRadius,
+      width: w,
+      height: h,
+      borderRadius: radius,
       backgroundColor: backgroundColor ?? tokens.colors.background
     }, style]
   }, rest), content);

package/dist/cjs/components/badge/Badge.js

@@ -28,10 +28,10 @@ const BadgeImpl = (props, ref) => {
     content,
     color,
     textColor,
-    dot: dotProp,
+    dot: dotP,
     max,
     offset,
-    showZero: showZeroProp,
+    showZero: showZeroP,
     badgeStyle,
     textStyle,
     onPress,
@@ -40,65 +40,66 @@ const BadgeImpl = (props, ref) => {
     ...rest
   } = props;
   const tokens = (0, _tokens.useBadgeTokens)(tokensOverride);
-  const dot = dotProp ?? tokens.defaults.dot;
-  const showZero = showZeroProp ?? tokens.defaults.showZero;
-  const hasChildren = _react().default.Children.count(children) > 0;
+  const dot = dotP ?? tokens.defaults.dot;
+  const showZero = showZeroP ?? tokens.defaults.showZero;
+  const hasCh = _react().default.Children.count(children) > 0;
   const {
     visible,
     formattedContent
   } = (0, _react().useMemo)(() => {
-    const numericContent = (0, _utils.isNumericLike)(content) ? Number(content) : null;
-    const shouldHide = numericContent === 0 && !showZero;
-    const isVisible = dot || (0, _utils.isRenderable)(content) && !shouldHide;
-    if (!isVisible || dot) return {
-      visible: isVisible,
+    const num = (0, _utils.isNumericLike)(content) ? Number(content) : null;
+    const hide = num === 0 && !showZero;
+    const vis = dot || (0, _utils.isRenderable)(content) && !hide;
+    if (!vis || dot) return {
+      visible: vis,
       formattedContent: null
     };
-    const numericMax = (0, _utils.isNumericLike)(max) ? Number(max) : null;
-    const formatted = numericContent !== null && numericMax !== null && numericContent > numericMax ? `${numericMax}+` : content;
+    const numMax = (0, _utils.isNumericLike)(max) ? Number(max) : null;
+    const fmt = num !== null && numMax !== null && num > numMax ? `${numMax}+` : content;
     return {
       visible: true,
-      formattedContent: formatted
+      formattedContent: fmt
     };
   }, [content, dot, max, showZero]);
-  const [size, setSize] = (0, _react().useState)({
+  const [sz, setSz] = (0, _react().useState)({
     width: 0,
     height: 0
   });
-  const handleLayout = (0, _react().useCallback)(event => {
+  const onLay = (0, _react().useCallback)(e => {
     const {
       width,
       height
-    } = event.nativeEvent.layout;
-    setSize(prev => prev.width === width && prev.height === height ? prev : {
+    } = e.nativeEvent.layout;
+    setSz(prev => prev.width === width && prev.height === height ? prev : {
       width,
       height
     });
   }, []);
-  const transformStyle = (0, _react().useMemo)(() => {
-    if (!hasChildren) return undefined;
+  const transStyle = (0, _react().useMemo)(() => {
+    if (!hasCh) return undefined;
     if (dot) {
-      const halfSize = tokens.sizing.dotSize / 2;
+      const h = tokens.sizing.dotSize / 2;
       return {
         transform: [{
-          translateX: halfSize
+          translateX: h
         }, {
-          translateY: -halfSize
+          translateY: -h
         }]
       };
     }
-    if (size.width === 0) return {
+    ;
+    if (sz.width === 0) return {
       opacity: 0
     };
     return {
       transform: [{
-        translateX: size.width / 2
+        translateX: sz.width / 2
       }, {
-        translateY: -size.height / 2
+        translateY: -sz.height / 2
       }]
     };
-  }, [dot, hasChildren, size.height, size.width, tokens.sizing.dotSize]);
-  const badgeBoxStyle = (0, _react().useMemo)(() => dot ? {
+  }, [dot, hasCh, sz.height, sz.width, tokens.sizing.dotSize]);
+  const boxStyle = (0, _react().useMemo)(() => dot ? {
     width: tokens.sizing.dotSize,
     height: tokens.sizing.dotSize,
     borderRadius: tokens.radii.dot,
@@ -113,45 +114,39 @@ const BadgeImpl = (props, ref) => {
     borderColor: tokens.colors.border,
     backgroundColor: color ?? tokens.colors.background
   }, [color, dot, tokens.borders.width, tokens.colors.background, tokens.colors.border, tokens.colors.dot, tokens.radii.badge, tokens.radii.dot, tokens.sizing.dotSize, tokens.sizing.height, tokens.sizing.minWidth, tokens.sizing.paddingHorizontal, tokens.sizing.paddingVertical]);
-  const mergedTextStyle = [tokens.layout.text, {
+  const txtStyle = [tokens.layout.text, {
     color: textColor ?? tokens.colors.text,
     fontSize: tokens.typography.fontSize,
     lineHeight: tokens.typography.lineHeight,
     fontFamily: tokens.typography.fontFamily,
     fontWeight: tokens.typography.fontWeight
   }, textStyle];
-  const offsetStyle = (0, _react().useMemo)(() => {
-    if (!offset) return undefined;
-    const [x, y] = offset;
-    return hasChildren ? {
-      right: x,
-      top: y
-    } : {
-      marginLeft: x,
-      marginTop: y
-    };
-  }, [hasChildren, offset]);
-  const badgeElement = !visible ? null : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    pointerEvents: hasChildren ? 'none' : 'auto',
-    onLayout: hasChildren && !dot ? handleLayout : undefined,
-    style: [hasChildren ? tokens.layout.badgeAbsolute : tokens.layout.badgeStandalone, badgeBoxStyle, transformStyle, offsetStyle, badgeStyle, !hasChildren ? style : undefined]
-  }, !dot && (0, _utils.renderTextOrNode)(formattedContent, mergedTextStyle));
-  const accessibilityLabel = visible ? dot ? 'has new content' : `${formattedContent}` : undefined;
-  if (hasChildren) {
-    return onPress ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
-      ref: ref,
-      onPress: onPress,
-      accessibilityLabel: accessibilityLabel,
-      style: ({
-        pressed
-      }) => [tokens.layout.wrapper, style, pressed && {
-        opacity: tokens.defaults.pressedOpacity
-      }]
-    }, rest), children, badgeElement) : /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
-      ref: ref,
-      style: [tokens.layout.wrapper, style]
-    }, rest), children, badgeElement);
-  }
+  const offStyle = (0, _react().useMemo)(() => !offset ? undefined : hasCh ? {
+    right: offset[0],
+    top: offset[1]
+  } : {
+    marginLeft: offset[0],
+    marginTop: offset[1]
+  }, [hasCh, offset]);
+  const badgeEl = !visible ? null : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    pointerEvents: hasCh ? 'none' : 'auto',
+    onLayout: hasCh && !dot ? onLay : undefined,
+    style: [hasCh ? tokens.layout.badgeAbsolute : tokens.layout.badgeStandalone, boxStyle, transStyle, offStyle, badgeStyle, !hasCh ? style : undefined]
+  }, !dot && (0, _utils.renderTextOrNode)(formattedContent, txtStyle));
+  const accLabel = visible ? dot ? 'has new content' : `${formattedContent}` : undefined;
+  if (hasCh) return onPress ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
+    ref: ref,
+    onPress: onPress,
+    accessibilityLabel: accLabel,
+    style: ({
+      pressed
+    }) => [tokens.layout.wrapper, style, pressed && {
+      opacity: tokens.defaults.pressedOpacity
+    }]
+  }, rest), children, badgeEl) : /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
+    ref: ref,
+    style: [tokens.layout.wrapper, style]
+  }, rest), children, badgeEl);
   if (!visible) return null;
   return onPress ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
     ref: ref,
@@ -161,7 +156,7 @@ const BadgeImpl = (props, ref) => {
     }) => [tokens.layout.pressableStandalone, pressed && {
       opacity: tokens.defaults.pressedOpacity
     }]
-  }, rest), badgeElement) : /*#__PURE__*/_react().default.cloneElement(badgeElement, {
+  }, rest), badgeEl) : /*#__PURE__*/_react().default.cloneElement(badgeEl, {
     ref,
     ...rest
   });