@multiplatform.one/components 6.7.0 → 7.1.0

package/dist/cjs/Avatar/index.native.js

@@ -25,39 +25,69 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 var Avatar_exports = {};
 __export(Avatar_exports, {
   Avatar: () => Avatar,
+  FALLBACK_TONES: () => import_getInitials2.FALLBACK_TONES,
+  fallbackTone: () => import_getInitials2.fallbackTone,
+  fallbackToneIndex: () => import_getInitials2.fallbackToneIndex,
   getInitials: () => import_getInitials2.getInitials
 });
 module.exports = __toCommonJS(Avatar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react2 = require("@phosphor-icons/react");
 var import_theme = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
+var import_get_token = require("@tamagui/get-token");
 var import_componentColors = require("../componentColors.native.js");
 var import_getInitials = require("./getInitials.native.js");
 var import_getInitials2 = require("./getInitials.native.js");
-var avatarSizeMap = {
-  $3: "$2",
-  $4: "$3",
-  $5: "$4"
-};
+var GroupCtx = /* @__PURE__ */(0, import_react.createContext)(null);
 var identityShapeProps = (0, import_theme.radiusClassProps)("R-IDENTITY", "Avatar");
-function initialsFontSize(size) {
-  if (typeof size === "number") {
-    if (size <= 24) return "$1";
-    if (size <= 40) return "$2";
-    return "$3";
-  }
-  switch (size) {
-    case "$0.5":
-    case "$1":
-    case "$1.5":
-      return "$1";
-    case "$2":
-    case "$2.5":
-    case "$3":
-      return "$2";
-    default:
-      return "$3";
-  }
+var pipShapeProps = (0, import_theme.radiusClassProps)("R-PILL", "Avatar status");
+var AVATAR_MIN_PX = 16;
+var AVATAR_KNOB_TOKEN = {
+  small: "$2",
+  medium: "$3",
+  large: "$4"
+};
+function avatarTokenPx(token) {
+  var resolved = (0, import_tamagui.getVariableValue)((0, import_get_token.getSize)(token));
+  return typeof resolved === "number" && Number.isFinite(resolved) ? Math.max(AVATAR_MIN_PX, resolved) : void 0;
+}
+var STATUS_COLOR = {
+  online: "$green10",
+  busy: "$red10",
+  away: "$yellow10",
+  offline: "$color8"
+};
+var CUTOUT_BORDER = 2;
+function sizeToPx(size) {
+  if (typeof size === "number") return size;
+  return avatarTokenPx(String(size));
+}
+function resolveVisualPx(sizeProp, nested, sizeKnob, nestedPx) {
+  var _avatarTokenPx, _sizeToPx, _ref;
+  var mediumPx = (_avatarTokenPx = avatarTokenPx(AVATAR_KNOB_TOKEN.medium)) !== null && _avatarTokenPx !== void 0 ? _avatarTokenPx : 36;
+  if (sizeProp != null) return (_sizeToPx = sizeToPx(sizeProp)) !== null && _sizeToPx !== void 0 ? _sizeToPx : mediumPx;
+  if (nested) return nestedPx;
+  var knobToken = AVATAR_KNOB_TOKEN[sizeKnob];
+  return (_ref = knobToken ? avatarTokenPx(knobToken) : void 0) !== null && _ref !== void 0 ? _ref : mediumPx;
+}
+function opticalFont(px) {
+  if (px <= 20) return "$1";
+  if (px <= 32) return "$2";
+  return "$3";
+}
+function activateOnEnterSpace(onPress) {
+  if (!onPress) return void 0;
+  return {
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === "Enter" || e.key === " ") {
+        var _e_preventDefault;
+        (_e_preventDefault = e.preventDefault) === null || _e_preventDefault === void 0 ? void 0 : _e_preventDefault.call(e);
+        onPress();
+      }
+    }
+  };
 }
 function AvatarRoot(param) {
   var {
@@ -65,69 +95,223 @@ function AvatarRoot(param) {
     name,
     alt,
     initials,
-    fallbackBackgroundColor = "$accentBackground",
+    fallbackBackgroundColor,
     fallbackColor,
     fallback,
     size: sizeProp,
-    circular = true,
+    circular: circularProp,
+    nested: nestedProp = false,
+    compact,
+    status,
     children,
     backgroundColor,
+    onPress,
+    focusStyle,
+    focusVisibleStyle,
+    hitSlop: hitSlopProp,
     ...props
   } = param;
-  var _ref, _ref1;
+  var _ref, _ref1, _ref2, _ref3;
+  var group = (0, import_react.useContext)(GroupCtx);
+  var circular = group ? group.circular : circularProp !== null && circularProp !== void 0 ? circularProp : true;
+  var nested = nestedProp || Boolean(group === null || group === void 0 ? void 0 : group.nested);
+  var densityCompact = compact !== null && compact !== void 0 ? compact : group === null || group === void 0 ? void 0 : group.compact;
+  var resolvedSizeProp = sizeProp !== null && sizeProp !== void 0 ? sizeProp : group === null || group === void 0 ? void 0 : group.size;
   var {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+  } = (0, import_theme.useResolvedKnobs)({
+    compact: densityCompact
+  });
+  var visualPx = resolveVisualPx(resolvedSizeProp, nested, knobProps.size, knobProps.nestedControl.px);
+  var interactive = typeof onPress === "function";
+  var pressSlop = interactive && visualPx < import_theme.MIN_PRESS_TARGET ? (0, import_theme.pressTargetHitSlop)(visualPx) : void 0;
   var onAccentInitials = (0, import_theme.useReadableTextOn)("$accentBackground");
-  var size = (_ref = sizeProp !== null && sizeProp !== void 0 ? sizeProp : avatarSizeMap[knobProps.sizeToken]) !== null && _ref !== void 0 ? _ref : "$3";
+  var tone = fallbackBackgroundColor || backgroundColor ? void 0 : (0, import_getInitials.fallbackTone)(name);
+  var fallbackBg = (_ref = (_ref1 = backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : fallbackBackgroundColor) !== null && _ref1 !== void 0 ? _ref1 : tone === null || tone === void 0 ? void 0 : tone.bg) !== null && _ref !== void 0 ? _ref : "$color4";
+  var onAccent = fallbackBg === "$accentBackground";
+  var fallbackFg = fallbackColor !== null && fallbackColor !== void 0 ? fallbackColor : onAccent ? onAccentInitials !== null && onAccentInitials !== void 0 ? onAccentInitials : "$color" : (_ref2 = tone === null || tone === void 0 ? void 0 : tone.fg) !== null && _ref2 !== void 0 ? _ref2 : import_componentColors.componentColors.text.primary;
   var identityProps = circular ? identityShapeProps : null;
-  if (children != null) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Avatar, {
-      circular,
-      size,
-      backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : fallbackBackgroundColor,
-      ...identityProps,
-      ...props,
-      children
-    });
-  }
-  var label = (_ref1 = alt !== null && alt !== void 0 ? alt : name) !== null && _ref1 !== void 0 ? _ref1 : "Avatar";
+  var position = group ? (0, import_theme.getGroupPosition)(group.index, group.count) : void 0;
+  var squareFlush = Boolean(group && !group.overlap && !circular && position);
+  var stackCorners = squareFlush ? (0, import_theme.stackRadiusProps)(position, knobProps.borderRadius.borderRadius, "horizontal") : void 0;
+  var cutout = Boolean(group === null || group === void 0 ? void 0 : group.overlap);
+  var labeled = Boolean(alt || name);
+  var decorative = !labeled && !interactive;
+  var label = (_ref3 = alt !== null && alt !== void 0 ? alt : name) !== null && _ref3 !== void 0 ? _ref3 : interactive ? "Avatar" : void 0;
   var initialsText = initials !== null && initials !== void 0 ? initials : name ? (0, import_getInitials.getInitials)(name) : "?";
-  var onAccent = fallbackBackgroundColor === "$accentBackground";
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Avatar, {
-    circular,
-    size,
-    backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : fallbackBackgroundColor,
-    "aria-label": label,
+  var pipPx = Math.max(8, Math.round(visualPx * 0.28));
+  var frame = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Avatar, {
+    circular: circular && !stackCorners,
+    size: visualPx,
+    width: visualPx,
+    height: visualPx,
+    minWidth: visualPx,
+    minHeight: visualPx,
+    maxWidth: visualPx,
+    maxHeight: visualPx,
+    backgroundColor: fallbackBg,
+    overflow: "hidden",
+    flexShrink: 0,
+    outlineWidth: 0,
+    onPress,
+    ...(!circular && !stackCorners ? knobProps.borderRadius : void 0),
+    ...stackCorners,
+    ...(cutout ? {
+      borderWidth: CUTOUT_BORDER,
+      borderColor: "$background"
+    } : squareFlush && position !== "first" && position !== "only" ? {
+      borderStartWidth: 1,
+      borderColor: knobProps.borderRadius.borderColor
+    } : void 0),
     ...identityProps,
     ...props,
-    children: [src ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Avatar.Image, {
-      src,
-      alt: label
-    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Avatar.Fallback, {
-      backgroundColor: fallbackBackgroundColor,
-      alignItems: "center",
-      justifyContent: "center",
-      // Omit delayMs so Fallback mounts immediately (tamagui treats
-      // delayMs=0 as "wait for timeout" and starts canRender=false).
-      ...(src ? {
-        delayMs: 600
-      } : {}),
-      children: fallback !== null && fallback !== void 0 ? fallback : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
-        fontSize: initialsFontSize(size),
-        // Luminance-computed on-fill foreground (Axiom 15): the paper/ink
-        // anchor that reads best on the resolved accent tint, not the
-        // accent theme's fixed near-white.
-        color: fallbackColor !== null && fallbackColor !== void 0 ? fallbackColor : onAccent ? onAccentInitials !== null && onAccentInitials !== void 0 ? onAccentInitials : "$color" : import_componentColors.componentColors.text.primary,
-        fontWeight: "600",
-        textAlign: "center",
-        children: initialsText
-      })
+    "aria-hidden": decorative || void 0,
+    "aria-label": decorative ? void 0 : label,
+    role: interactive ? "button" : props.role,
+    tabIndex: interactive ? 0 : void 0,
+    cursor: interactive ? "pointer" : void 0,
+    ...activateOnEnterSpace(onPress),
+    "data-avatar-px": visualPx,
+    "data-avatar-nested": nested ? "true" : void 0,
+    "data-avatar-interactive": interactive ? "true" : void 0,
+    "data-avatar-hitslop": pressSlop ? String(pressSlop.top) : void 0,
+    focusStyle: {
+      outlineWidth: 0,
+      ...focusStyle
+    },
+    focusVisibleStyle: interactive ? (0, import_theme.ensureFocusVisibleRing)({
+      outlineOffset: -2,
+      ...focusVisibleStyle
+    }) : focusVisibleStyle,
+    hitSlop: pressSlop !== null && pressSlop !== void 0 ? pressSlop : hitSlopProp,
+    children: children != null ? children : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [src ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Avatar.Image, {
+        src,
+        alt: label !== null && label !== void 0 ? label : ""
+      }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Avatar.Fallback, {
+        backgroundColor: fallbackBg,
+        alignItems: "center",
+        justifyContent: "center",
+        ...(src ? {
+          delayMs: 600
+        } : {}),
+        children: fallback !== null && fallback !== void 0 ? fallback : initialsText === "?" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          ...{
+            color: fallbackFg
+          },
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.UserIcon, {
+            size: Math.round(visualPx * 0.42),
+            color: "currentColor"
+          })
+        }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+          ...knobProps.label,
+          fontSize: opticalFont(visualPx),
+          fontWeight: "600",
+          color: fallbackFg,
+          textAlign: "center",
+          userSelect: "none",
+          children: initialsText
+        })
+      })]
+    })
+  });
+  if (!status) return frame;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+    position: "relative",
+    width: visualPx,
+    height: visualPx,
+    flexShrink: 0,
+    children: [frame, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      ...pipShapeProps,
+      position: "absolute",
+      bottom: -1,
+      right: -1,
+      width: pipPx,
+      height: pipPx,
+      borderRadius: 1e3,
+      backgroundColor: STATUS_COLOR[status],
+      borderWidth: 2,
+      borderColor: "$background",
+      pointerEvents: "none"
     })]
   });
 }
+function AvatarGroup(param) {
+  var {
+    children,
+    max = 4,
+    size,
+    circular = true,
+    nested = false,
+    compact,
+    overlap = true
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    compact
+  });
+  var visualPx = resolveVisualPx(size, nested, knobProps.size, knobProps.nestedControl.px);
+  var overlapPx = overlap ? Math.round(visualPx * 0.32) : 0;
+  var items = import_react.Children.toArray(children).filter(import_react.isValidElement);
+  var shown = items.slice(0, Math.max(1, max));
+  var extra = items.length - shown.length;
+  var total = shown.length + (extra > 0 ? 1 : 0);
+  var overflowLabel = extra > 9 ? "9+" : `+${extra}`;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    alignItems: "center",
+    flexShrink: 0,
+    gap: 0,
+    "data-avatar-group": "",
+    "data-avatar-overlap": overlap ? "true" : "false",
+    children: [shown.map(function (child, index) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupCtx.Provider, {
+        value: {
+          size,
+          circular,
+          nested,
+          compact,
+          overlap,
+          index,
+          count: total
+        },
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          zIndex: index,
+          marginStart: index > 0 ? -overlapPx : 0,
+          flexShrink: 0,
+          children: child
+        })
+      }, index);
+    }), extra > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupCtx.Provider, {
+      value: {
+        size,
+        circular,
+        nested,
+        compact,
+        overlap,
+        index: shown.length,
+        count: total
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        zIndex: shown.length,
+        marginStart: -overlapPx,
+        flexShrink: 0,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AvatarRoot, {
+          initials: overflowLabel,
+          fallbackBackgroundColor: "$color4",
+          fallbackColor: "$color12",
+          circular,
+          nested,
+          compact,
+          size
+        })
+      })
+    }) : null]
+  });
+}
 var Avatar = (0, import_tamagui.withStaticProperties)(AvatarRoot, {
   Image: import_tamagui.Avatar.Image,
-  Fallback: import_tamagui.Avatar.Fallback
+  Fallback: import_tamagui.Avatar.Fallback,
+  Group: AvatarGroup
 });
 //# sourceMappingURL=index.native.js.map

package/dist/cjs/Avatar/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","Avatar_exports","__export","Avatar","getInitials","import_getInitials2","module","exports","import_jsx_runtime","require","import_theme","import_tamagui","import_componentColors","import_getInitials","avatarSizeMap","$3","$4","$5","identityShapeProps","radiusClassProps","initialsFontSize","size","AvatarRoot","param","src","name","alt","initials","fallbackBackgroundColor","fallbackColor","fallback","sizeProp","circular","children","backgroundColor","props","_ref","_ref1","knobProps","useResolvedKnobs","onAccentInitials","useReadableTextOn","sizeToken","identityProps","jsx","label","initialsText","onAccent","jsxs","Image","Fallback","alignItems","justifyContent","delayMs","SizableText","fontSize","color","componentColors","text","primary","fontWeight","textAlign","withStaticProperties"],"sources":["../../../src/Avatar/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","Avatar_exports","__export","Avatar","FALLBACK_TONES","import_getInitials2","fallbackTone","fallbackToneIndex","getInitials","module","exports","import_jsx_runtime","require","import_react","import_react2","import_theme","import_tamagui","import_get_token","import_componentColors","import_getInitials","GroupCtx","createContext","identityShapeProps","radiusClassProps","pipShapeProps","AVATAR_MIN_PX","AVATAR_KNOB_TOKEN","small","medium","large","avatarTokenPx","token","resolved","getVariableValue","getSize","Number","isFinite","Math","max","STATUS_COLOR","online","busy","away","offline","CUTOUT_BORDER","sizeToPx","size","String","resolveVisualPx","sizeProp","nested","sizeKnob","nestedPx","_avatarTokenPx","_sizeToPx","_ref","mediumPx","knobToken","opticalFont","px","activateOnEnterSpace","onPress","onKeyDown","e","key","_e_preventDefault","preventDefault","call","AvatarRoot","param","src","name","alt","initials","fallbackBackgroundColor","fallbackColor","fallback","circular","circularProp","nestedProp","compact","status","children","backgroundColor","focusStyle","focusVisibleStyle","hitSlop","hitSlopProp","props","_ref1","_ref2","_ref3","group","useContext","Boolean","densityCompact","resolvedSizeProp","knobProps","useResolvedKnobs","visualPx","nestedControl","interactive","pressSlop","MIN_PRESS_TARGET","pressTargetHitSlop","onAccentInitials","useReadableTextOn","tone","fallbackBg","bg","onAccent","fallbackFg","fg","componentColors","text","primary","identityProps","position","getGroupPosition","index","count","squareFlush","overlap","stackCorners","stackRadiusProps","borderRadius","cutout","labeled","decorative","label","initialsText","pipPx","round","frame","jsx","width","height","minWidth","minHeight","maxWidth","maxHeight","overflow","flexShrink","outlineWidth","borderWidth","borderColor","borderStartWidth","role","tabIndex","cursor","top","ensureFocusVisibleRing","outlineOffset","jsxs","Fragment","Image","Fallback","alignItems","justifyContent","delayMs","View","color","UserIcon","SizableText","fontSize","fontWeight","textAlign","userSelect","bottom","right","pointerEvents","AvatarGroup","overlapPx","items","Children","toArray","filter","isValidElement","shown","slice","extra","length","total","overflowLabel","XStack","gap","map","child","Provider","zIndex","marginStart"],"sources":["../../../src/Avatar/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/Badge/index.cjs

@@ -25,10 +25,13 @@ __export(Badge_exports, {
   Badge: () => Badge
 });
 module.exports = __toCommonJS(Badge_exports);
+var import_react_i18next = require("react-i18next");
 var import_theme = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
 var import_componentColors = require("../componentColors.cjs");
+var import_useDirection = require("../hooks/useDirection.cjs");
 var import_AsyncBoundary = require("../layouts/AsyncBoundary.cjs");
+var import_t = require("../shared/t.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const colorMap = {
   red: {
@@ -55,74 +58,78 @@ const colorMap = {
 const badgeGeometryMap = {
   $3: {
     capsule: 16,
-    font: 10,
+    font: "$1",
+    pad: 4,
     dot: 6
   },
   $4: {
     capsule: 18,
-    font: 11,
+    font: "$1",
+    pad: 5,
     dot: 8
   },
   $5: {
     capsule: 22,
-    font: 13,
+    font: "$2",
+    pad: 6,
     dot: 10
   }
 };
-const positionMap = {
-  "top-right": {
-    top: 0,
-    right: 0
-  },
-  "top-left": {
-    top: 0,
-    left: 0
-  },
-  "bottom-right": {
-    bottom: 0,
-    right: 0
-  },
-  "bottom-left": {
-    bottom: 0,
-    left: 0
-  }
-};
+const CONTRAST_RING = 2;
 const BadgeWrapper = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "BadgeWrapper",
   position: "relative",
-  display: "inline-flex"
+  display: "inline-flex",
+  alignSelf: "flex-start",
+  overflow: "visible"
 });
 const BadgeIndicator = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "BadgeIndicator",
-  // R-PILL (D-09 / LC-60): the count/dot indicator is a pill at every radius
-  // value; the knob moves its size and padding, never its shape.
+  // R-PILL (D-09 / LC-60): the count/dot is a pill at every radius value;
+  // the knob moves its size and padding, never its shape.
   ...(0, import_theme.radiusClassProps)("R-PILL", "Badge count/dot"),
-  position: "absolute",
   alignItems: "center",
   justifyContent: "center",
   borderRadius: 1e3,
-  minWidth: 18,
-  height: 18,
-  paddingHorizontal: "$1",
+  borderWidth: CONTRAST_RING,
+  borderColor: "$color1",
+  borderStyle: "solid",
   zIndex: 1,
-  variants: {
-    dot: {
-      true: {
-        minWidth: 8,
-        width: 8,
-        height: 8,
-        paddingHorizontal: 0
-      }
-    }
-  }
+  // Orbit/Primer: badges are not actionable — clicks hit the host.
+  pointerEvents: "none"
 });
 const BadgeText = (0, import_tamagui.styled)(import_tamagui.Text, {
   name: "BadgeText",
-  fontSize: 11,
   fontWeight: "600",
-  lineHeight: 18,
-  textAlign: "center"
+  textAlign: "center",
+  pointerEvents: "none"
 });
+function normalizeCount(count) {
+  if (count === void 0 || !Number.isFinite(count)) return void 0;
+  return Math.max(0, Math.floor(count));
+}
+function normalizeMax(max) {
+  if (!Number.isFinite(max) || max < 0) return 99;
+  return Math.floor(max);
+}
+function indicatorPlacement(position, isRTL, overlap, offset) {
+  const atEnd = position.includes("right");
+  const atTop = position.includes("top");
+  const [ox, oy] = offset;
+  const inlineProp = atEnd === !isRTL ? "right" : "left";
+  const dirX = inlineProp === "right" ? 1 : -1;
+  const dirY = atTop ? -1 : 1;
+  return {
+    position: "absolute",
+    [atTop ? "top" : "bottom"]: 0,
+    [inlineProp]: 0,
+    transform: [{
+      translateX: dirX * (overlap + ox)
+    }, {
+      translateY: dirY * (overlap + oy)
+    }]
+  };
+}
 function Badge({
   children,
   count,
@@ -132,48 +139,75 @@ function Badge({
   color = "red",
   position = "top-right",
   offset = [0, 0],
-  visible = true
+  visible = true,
+  compact,
+  accessibilityLabel
 }) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  const isRTL = (0, import_useDirection.useDirection)() === "rtl";
   const {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "Badge",
+    compact
+  });
   const colors = colorMap[color];
   const geometry = badgeGeometryMap[knobProps.sizeToken] ?? badgeGeometryMap.$4;
-  const posStyles = positionMap[position];
   const asyncCtx = (0, import_AsyncBoundary.useAsyncBoundary)();
   const effectiveVisible = visible && !asyncCtx?.hideBadges;
-  const effectiveCount = asyncCtx?.hideBadges ? void 0 : count;
+  const effectiveCount = asyncCtx?.hideBadges ? void 0 : normalizeCount(count);
+  const cap = normalizeMax(max);
+  const standalone = children == null;
   const shouldShow = effectiveVisible && (dot || effectiveCount !== void 0 && (effectiveCount > 0 || showZero));
-  const displayValue = effectiveCount !== void 0 && effectiveCount > max ? `${max}+` : effectiveCount;
-  const [offsetX, offsetY] = offset;
+  const overflowed = effectiveCount !== void 0 && effectiveCount > cap;
+  const displayValue = overflowed ? `${cap}+` : effectiveCount;
+  const painted = dot ? geometry.dot : geometry.capsule;
+  const overlap = standalone ? 0 : painted / 2;
+  const a11yLabel = accessibilityLabel ?? (dot ? t("New activity") : overflowed && effectiveCount !== void 0 ? String(effectiveCount) : void 0);
+  if (!shouldShow) {
+    return standalone ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(BadgeWrapper, {
+      children
+    });
+  }
+  const indicator = /* @__PURE__ */(0, import_jsx_runtime.jsx)(BadgeIndicator, {
+    backgroundColor: colors.bg,
+    minWidth: painted,
+    height: painted,
+    ...(dot ? {
+      width: painted,
+      paddingHorizontal: 0
+    } : {
+      paddingHorizontal: geometry.pad
+    }),
+    ...(standalone ? void 0 : indicatorPlacement(position, isRTL, overlap, offset)),
+    role: "status",
+    "aria-live": "polite",
+    "aria-atomic": "true",
+    "aria-label": a11yLabel,
+    ...(import_tamagui.isWeb && overflowed && effectiveCount !== void 0 ? {
+      title: String(effectiveCount)
+    } : void 0),
+    ...{
+      "data-badge": dot ? "dot" : "count",
+      ...(overflowed ? {
+        "data-overflow": "true"
+      } : {})
+    },
+    children: !dot && effectiveCount !== void 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(BadgeText, {
+      ...knobProps.body,
+      fontWeight: "600",
+      fontSize: geometry.font,
+      lineHeight: Math.max(1, painted - CONTRAST_RING * 2),
+      color: colors.text,
+      children: (0, import_t.bidiIsolate)(String(displayValue))
+    })
+  });
+  if (standalone) {
+    return indicator;
+  }
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(BadgeWrapper, {
-    children: [children, shouldShow && /* @__PURE__ */(0, import_jsx_runtime.jsx)(BadgeIndicator, {
-      dot,
-      backgroundColor: colors.bg,
-      ...(dot ? {
-        minWidth: geometry.dot,
-        width: geometry.dot,
-        height: geometry.dot
-      } : {
-        minWidth: geometry.capsule,
-        height: geometry.capsule
-      }),
-      style: {
-        ...posStyles,
-        transform: [{
-          translateX: position.includes("right") ? offsetX : -offsetX
-        }, {
-          translateY: position.includes("top") ? -offsetY : offsetY
-        }]
-      },
-      children: !dot && effectiveCount !== void 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(BadgeText, {
-        ...knobProps.body,
-        fontWeight: "600",
-        fontSize: geometry.font,
-        lineHeight: geometry.capsule,
-        color: colors.text,
-        children: displayValue
-      })
-    })]
+    children: [children, indicator]
   });
 }