react-native-terra-ui 0.11.0 → 0.11.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [0.11.2](https://github.com/earthlin9/react-native-terra-ui/compare/v0.11.1...v0.11.2) (2026-09-12)
+
+### Features
+
+* **ui:** [badge] add offset prop and enlarge the indicator ([da293fa](https://github.com/earthlin9/react-native-terra-ui/commit/da293fa887d81cfeaf45f19067734e05ac4c6320))
+
+## [0.11.1](https://github.com/earthlin9/react-native-terra-ui/compare/v0.11.0...v0.11.1) (2026-09-12)
+
+### Features
+
+* **ui:** [badge] add Badge wrapper component ([4c3f49c](https://github.com/earthlin9/react-native-terra-ui/commit/4c3f49c9725f77bf4cbd479094335d710190d978))
+
 ## [0.11.0](https://github.com/earthlin9/react-native-terra-ui/compare/v0.10.2...v0.11.0) (2026-09-12)
 
 ### ⚠ BREAKING CHANGES

package/lib/module/components/badge/Badge.js

@@ -0,0 +1,92 @@
+"use strict";
+
+import { View } from "react-native-unistyles/components/native/View";
+import { forwardRef } from "react";
+import { StyleSheet } from "react-native-unistyles";
+import { BadgeIndicator } from "./parts/BadgeIndicator.js";
+import { getAnchorPosition } from "./utils.js";
+
+/**
+ * Overlays a count or status indicator on one corner of the element it wraps.
+ *
+ * ```tsx
+ * <Badge placement="top-right" color="danger" label={3}>
+ *   <Toolbar.Button icon="bell" accessibilityLabel="Notifications" />
+ * </Badge>
+ * ```
+ *
+ * The child renders untouched — `Badge` contributes the positioning context and
+ * the overlay, nothing else. A round child usually wants a negative `offset`,
+ * since the corner being anchored to is the bounding box's, not the circle's.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Badge = /*#__PURE__*/forwardRef(function Badge({
+  children,
+  placement = "top-right",
+  label,
+  color = "danger",
+  size = "md",
+  offset = 0,
+  isVisible = true,
+  fullWidth = false,
+  accessibilityLabel,
+  style,
+  ...rest
+}, ref) {
+  const _styles = styles;
+  {
+    const styles = _styles.useVariants({
+      fullWidth
+    });
+    return (
+      /*#__PURE__*/
+      // `style` last so an explicit `alignSelf` beats `fullWidth`.
+      _jsxs(View, {
+        ref: ref,
+        style: [styles.wrapper, style],
+        ...rest,
+        children: [children, isVisible ? /*#__PURE__*/_jsx(View, {
+          pointerEvents: "box-none",
+          style: [styles.anchor, getAnchorPosition(placement, size, offset)],
+          children: /*#__PURE__*/_jsx(BadgeIndicator, {
+            label: label,
+            color: color,
+            size: size,
+            accessibilityLabel: accessibilityLabel
+          })
+        }) : null]
+      })
+    );
+  }
+});
+export { Badge };
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+//
+// The indicator's insets are computed in `getAnchorPosition`, not declared here:
+// `offset` is an open-ended number, so it could never be a variant condition,
+// and the position involves no theme tokens at all. That leaves this stylesheet
+// with only what genuinely varies declaratively.
+const styles = StyleSheet.create(() => ({
+  wrapper: {
+    position: "relative",
+    variants: {
+      // `alignSelf: 'flex-start'` hugs the child, so the indicator anchors to
+      // the child's bounds rather than the surrounding container's. A child
+      // that was stretching needs `fullWidth` to go on doing so.
+      fullWidth: {
+        true: {
+          alignSelf: "stretch"
+        },
+        false: {
+          alignSelf: "flex-start"
+        }
+      }
+    },
+    uni__dependencies: [4]
+  },
+  anchor: {
+    position: "absolute"
+  }
+}));
+//# sourceMappingURL=Badge.js.map

package/lib/module/components/badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","StyleSheet","BadgeIndicator","getAnchorPosition","jsx","_jsx","jsxs","_jsxs","Badge","children","placement","label","color","size","offset","isVisible","fullWidth","accessibilityLabel","style","rest","ref","_styles","styles","useVariants","View","wrapper","pointerEvents","anchor","create","position","variants","true","alignSelf","false","uni__dependencies"],"sourceRoot":"../../../../src","sources":["components/badge/Badge.tsx"],"mappings":";;;AAAA,SAA4BA,UAAU,QAAQ,OAAO;AAGrD,SAASC,UAAU,QAAQ,wBAAwB;AAEnD,SAASC,cAAc;AAEvB,SAASC,iBAAiB;;AAE1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAZA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAaA,MAAMC,KAAK,gBAAGR,UAAU,CAAwC,SAASQ,KAAKA,CAC5E;EACEC,QAAQ;EACRC,SAAS,GAAG,WAAW;EACvBC,KAAK;EACLC,KAAK,GAAG,QAAQ;EAChBC,IAAI,GAAG,IAAI;EACXC,MAAM,GAAG,CAAC;EACVC,SAAS,GAAG,IAAI;EAChBC,SAAS,GAAG,KAAK;EACjBC,kBAAkB;EAClBC,KAAK;EACL,GAAGC;AACL,CAAC,EACDC,GAAG,EACH;EAAA,MAAAC,OAAA,GAAAC,MAAA;EAAA;IAAA,MAAAA,MAAA,GAAAD,OAAA,CAAAE,WAAA,CACmB;MAAEP;IAAU,CAAC;IAEhC;MAAA;MACE;MACAT,KAAA,CAACiB,IAAI;QAACJ,GAAG,EAAEA,GAAI;QAACF,KAAK,EAAE,CAACI,MAAM,CAACG,OAAO,EAAEP,KAAK,CAAE;QAAA,GAAKC,IAAI;QAAAV,QAAA,GACrDA,QAAQ,EACRM,SAAS,gBACRV,IAAA,CAACmB,IAAI;UAACE,aAAa,EAAC,UAAU;UAACR,KAAK,EAAE,CAACI,MAAM,CAACK,MAAM,EAAExB,iBAAiB,CAACO,SAAS,EAAEG,IAAI,EAAEC,MAAM,CAAC,CAAE;UAAAL,QAAA,eAChGJ,IAAA,CAACH,cAAc;YAACS,KAAK,EAAEA,KAAM;YAACC,KAAK,EAAEA,KAAM;YAACC,IAAI,EAAEA,IAAK;YAACI,kBAAkB,EAAEA;UAAmB,CAAE;QAAC,CAC9F,CAAC,GACL,IAAI;MAAA,CACJ;IAAC;EACP;AACJ,CAAC,CAAC;AAEF,SAAST,KAAK;;AAEd;AACA;AACA;AACA;AACA;AACA;AACA,MAAMc,MAAM,GAAGrB,UAAU,CAAC2B,MAAM,CAAC,OAAO;EACtCH,OAAO,EAAE;IACPI,QAAQ,EAAE,UAAU;IACpBC,QAAQ,EAAE;MACR;MACA;MACA;MACAd,SAAS,EAAE;QACTe,IAAI,EAAE;UAAEC,SAAS,EAAE;QAAU,CAAC;QAC9BC,KAAK,EAAE;UAAED,SAAS,EAAE;QAAa;MACnC;IACF,CAAC;IAAAE,iBAAA;EACH,CAAC;EACDP,MAAM,EAAE;IACNE,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/badge/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Badge } from "./Badge.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Badge"],"sourceRoot":"../../../../src","sources":["components/badge/index.ts"],"mappings":";;AAAA,SAASA,KAAK","ignoreList":[]}

package/lib/module/components/badge/parts/BadgeIndicator.js

@@ -0,0 +1,212 @@
+"use strict";
+
+import { View } from "react-native-unistyles/components/native/View";
+import { Text as RNText } from "react-native-unistyles/components/native/Text";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { resolveThemeColor } from "../../../utils/resolve-theme-color.js";
+import { FONT_WEIGHT_VALUE, SYSTEM_FONT } from "../../../utils/typography.js";
+import { getCustomBadgeColors, hasLabel } from "../utils.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SCHEME_NAMES = new Set(["primary", "secondary", "success", "warning", "danger"]);
+/** Label foreground per scheme — mirrors the spec's token table. */
+const FG_TOKEN = {
+  primary: "accent.solid.fg",
+  secondary: "neutral.solid.fg",
+  success: "success.solid.fg",
+  warning: "warning.solid.fg",
+  danger: "danger.solid.fg"
+};
+const LABEL_VARIANT = {
+  sm: "label-sm",
+  md: "label-md",
+  lg: "label-lg"
+};
+/**
+ * The overlay itself: a dot, or a pill carrying the label. Owns the paint, the
+ * legibility ring, and the accessibility node — the wrapper owns only position.
+ *
+ * `useUnistyles` is called unconditionally, which is what subscribes this
+ * component to theme changes. The background below comes from a variant, which
+ * unistyles applies straight to the native node on a theme switch; without a
+ * re-render React would go on believing the node holds the previous theme's
+ * value. `Chip` documents the same hazard on its root.
+ */
+export const BadgeIndicator = ({
+  label,
+  color,
+  size,
+  accessibilityLabel
+}) => {
+  const {
+    theme
+  } = useUnistyles();
+  // A literal never matches one of the five variant options, so it's cast to
+  // satisfy `useVariants`'s literal-union type while still being compared
+  // against the real value below.
+  const _styles = styles;
+  {
+    const styles = _styles.useVariants({
+      color: color,
+      size
+    });
+    const custom = SCHEME_NAMES.has(color) ? null : getCustomBadgeColors(color);
+    const labelled = hasLabel(label);
+    const foreground = custom ? custom.fg : FG_TOKEN[color];
+
+    // An explicit label wins even on a dot; a dot with nothing to announce is
+    // decorative and hidden rather than read out as an unlabelled element.
+    const announced = accessibilityLabel ?? (labelled ? String(label) : undefined);
+    const accessibility = announced ? {
+      accessible: true,
+      accessibilityLabel: announced
+    } : {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      "aria-hidden": true
+    };
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.indicator, labelled ? styles.pill : styles.dot, custom ? {
+        backgroundColor: custom.bg
+      } : null],
+      ...accessibility,
+      children: labelled ? /*#__PURE__*/_jsx(RNText, {
+        style: [styles.label, {
+          color: resolveThemeColor(foreground, theme)
+        }],
+        maxFontSizeMultiplier: theme.typography.variants[LABEL_VARIANT[size]].maxFontSizeMultiplier,
+        numberOfLines: 1,
+        children: label
+      }) : null
+    });
+  }
+};
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+//
+// `color` is a plain variant rather than a compound one: `Badge` renders solid
+// only, so there is no second paint axis for it to interact with.
+//
+// React Native's box model is border-box, so the ring below eats into the
+// indicator rather than growing it — the dot's outer diameter stays exactly
+// what `size` declares, with no compensation arithmetic.
+const styles = StyleSheet.create(theme => {
+  const c = theme.color;
+  // A custom font encodes its weight in the family name, so only the system
+  // font takes a numeric `fontWeight` — the same branch `Chip` makes. Inlined
+  // rather than extracted: the unistyles Babel plugin rewrites this factory,
+  // and an imported function called from inside it is not in scope at runtime.
+  const labelFont = theme.typography.fonts.semibold;
+  const isSystemLabelFont = labelFont === SYSTEM_FONT;
+  return {
+    indicator: {
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: theme.radius.full,
+      borderColor: c["surface.canvas"],
+      variants: {
+        size: {
+          sm: {
+            borderWidth: 1.5
+          },
+          md: {
+            borderWidth: 2
+          },
+          lg: {
+            borderWidth: 2
+          }
+        },
+        color: {
+          primary: {
+            backgroundColor: c["accent.solid.bg"]
+          },
+          secondary: {
+            backgroundColor: c["neutral.solid.bg"]
+          },
+          success: {
+            backgroundColor: c["success.solid.bg"]
+          },
+          warning: {
+            backgroundColor: c["warning.solid.bg"]
+          },
+          danger: {
+            backgroundColor: c["danger.solid.bg"]
+          }
+        }
+      },
+      uni__dependencies: [0, 4]
+    },
+    // These diameters are mirrored by `DOT_SIZE` in `../utils.ts`, which the
+    // anchor arithmetic reads. The Babel plugin needs them literal here, so a
+    // test asserts the two stay equal.
+    dot: {
+      variants: {
+        size: {
+          sm: {
+            width: 12,
+            height: 12
+          },
+          md: {
+            width: 16,
+            height: 16
+          },
+          lg: {
+            width: 20,
+            height: 20
+          }
+        }
+      },
+      uni__dependencies: [4]
+    },
+    pill: {
+      variants: {
+        size: {
+          sm: {
+            height: 18,
+            minWidth: 18,
+            paddingHorizontal: 5
+          },
+          md: {
+            height: 22,
+            minWidth: 22,
+            paddingHorizontal: 6
+          },
+          lg: {
+            height: 26,
+            minWidth: 26,
+            paddingHorizontal: 8
+          }
+        }
+      },
+      uni__dependencies: [4]
+    },
+    // Spelled out rather than derived from `LABEL_VARIANT`: the unistyles Babel
+    // plugin reads this object statically, so computed variant keys are not
+    // safe here even though they would resolve correctly under test.
+    label: {
+      textAlign: "center",
+      fontFamily: isSystemLabelFont ? undefined : labelFont,
+      fontWeight: isSystemLabelFont ? FONT_WEIGHT_VALUE.semibold : undefined,
+      variants: {
+        size: {
+          sm: {
+            fontSize: theme.typography.variants["label-sm"].fontSize,
+            lineHeight: theme.typography.variants["label-sm"].lineHeight,
+            letterSpacing: theme.typography.variants["label-sm"].letterSpacing
+          },
+          md: {
+            fontSize: theme.typography.variants["label-md"].fontSize,
+            lineHeight: theme.typography.variants["label-md"].lineHeight,
+            letterSpacing: theme.typography.variants["label-md"].letterSpacing
+          },
+          lg: {
+            fontSize: theme.typography.variants["label-lg"].fontSize,
+            lineHeight: theme.typography.variants["label-lg"].lineHeight,
+            letterSpacing: theme.typography.variants["label-lg"].letterSpacing
+          }
+        }
+      },
+      uni__dependencies: [0, 4]
+    }
+  };
+});
+//# sourceMappingURL=BadgeIndicator.js.map

package/lib/module/components/badge/parts/BadgeIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useUnistyles","resolveThemeColor","FONT_WEIGHT_VALUE","SYSTEM_FONT","getCustomBadgeColors","hasLabel","jsx","_jsx","SCHEME_NAMES","Set","FG_TOKEN","primary","secondary","success","warning","danger","LABEL_VARIANT","sm","md","lg","BadgeIndicator","label","color","size","accessibilityLabel","theme","_styles","styles","useVariants","custom","has","labelled","foreground","fg","announced","String","undefined","accessibility","accessible","accessibilityElementsHidden","importantForAccessibility","View","style","indicator","pill","dot","backgroundColor","bg","children","RNText","maxFontSizeMultiplier","typography","variants","numberOfLines","create","c","labelFont","fonts","semibold","isSystemLabelFont","alignItems","justifyContent","borderRadius","radius","full","borderColor","borderWidth","uni__dependencies","width","height","minWidth","paddingHorizontal","textAlign","fontFamily","fontWeight","fontSize","lineHeight","letterSpacing"],"sourceRoot":"../../../../../src","sources":["components/badge/parts/BadgeIndicator.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/badge/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/components/badge/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/badge/types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/components/badge/utils.js

@@ -0,0 +1,83 @@
+"use strict";
+
+import { readableOn } from "../../utils/color-utils.js";
+
+// A custom color literal (hex/rgb/hsl) isn't a bounded set of options, so it
+// can't be a unistyles variant condition — it's derived here instead, the same
+// way `chip/utils.ts` handles the equivalent case on `Chip`.
+
+/** The indicator's paint for a raw literal: the literal itself, plus a readable label. */
+export function getCustomBadgeColors(literal) {
+  return {
+    bg: literal,
+    fg: readableOn(literal)
+  };
+}
+
+/**
+ * `true` when `label` should render as a pill. An empty string and `undefined`
+ * are a dot; `0` is a label, since a caller suppressing a zero count uses
+ * `isVisible` rather than relying on falsiness.
+ */
+export function hasLabel(label) {
+  return label !== undefined && label !== "";
+}
+
+/**
+ * Outer diameter of the dot per size. The indicator's own stylesheet repeats
+ * these as literals — the unistyles Babel plugin reads that object statically,
+ * so it cannot reference this table — and `anchorOffsetsMatchDotRadius` in the
+ * test suite is what keeps the two in step.
+ */
+export const DOT_SIZE = {
+  sm: 12,
+  md: 16,
+  lg: 20
+};
+/**
+ * Absolute insets for the indicator, in pure arithmetic rather than one
+ * compound variant per (placement, size) cell: `offset` is an open-ended number
+ * and could never be a variant condition, and nothing here touches the theme.
+ *
+ * The base inset is the dot's radius, which puts a dot's centre exactly on the
+ * child's bounding-box corner. `offset` moves it from there — positive away
+ * from the child's centre, negative toward it.
+ */
+export function getAnchorPosition(placement, size, offset = 0) {
+  const base = DOT_SIZE[size] / 2;
+  const {
+    x,
+    y
+  } = typeof offset === "number" ? {
+    x: offset,
+    y: offset
+  } : {
+    x: offset.x ?? 0,
+    y: offset.y ?? 0
+  };
+  const insetX = -(base + x);
+  const insetY = -(base + y);
+  switch (placement) {
+    case "top-left":
+      return {
+        top: insetY,
+        left: insetX
+      };
+    case "bottom-right":
+      return {
+        bottom: insetY,
+        right: insetX
+      };
+    case "bottom-left":
+      return {
+        bottom: insetY,
+        left: insetX
+      };
+    default:
+      return {
+        top: insetY,
+        right: insetX
+      };
+  }
+}
+//# sourceMappingURL=utils.js.map

package/lib/module/components/badge/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["readableOn","getCustomBadgeColors","literal","bg","fg","hasLabel","label","undefined","DOT_SIZE","sm","md","lg","getAnchorPosition","placement","size","offset","base","x","y","insetX","insetY","top","left","bottom","right"],"sourceRoot":"../../../../src","sources":["components/badge/utils.ts"],"mappings":";;AAAA,SAASA,UAAU;;AAGnB;AACA;AACA;;AAOA;AACA,OAAO,SAASC,oBAAoBA,CAACC,OAAe,EAAqB;EACvE,OAAO;IAAEC,EAAE,EAAED,OAAO;IAAEE,EAAE,EAAEJ,UAAU,CAACE,OAAO;EAAE,CAAC;AACjD;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASG,QAAQA,CAACC,KAAkC,EAA4B;EACrF,OAAOA,KAAK,KAAKC,SAAS,IAAID,KAAK,KAAK,EAAE;AAC5C;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAME,QAAmC,GAAG;EACjDC,EAAE,EAAE,EAAE;EACNC,EAAE,EAAE,EAAE;EACNC,EAAE,EAAE;AACN,CAAC;AASD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,iBAAiBA,CAC/BC,SAAyB,EACzBC,IAAe,EACfC,MAA2C,GAAG,CAAC,EAC/B;EAChB,MAAMC,IAAI,GAAGR,QAAQ,CAACM,IAAI,CAAC,GAAG,CAAC;EAC/B,MAAM;IAAEG,CAAC;IAAEC;EAAE,CAAC,GACZ,OAAOH,MAAM,KAAK,QAAQ,GAAG;IAAEE,CAAC,EAAEF,MAAM;IAAEG,CAAC,EAAEH;EAAO,CAAC,GAAG;IAAEE,CAAC,EAAEF,MAAM,CAACE,CAAC,IAAI,CAAC;IAAEC,CAAC,EAAEH,MAAM,CAACG,CAAC,IAAI;EAAE,CAAC;EAEhG,MAAMC,MAAM,GAAG,EAAEH,IAAI,GAAGC,CAAC,CAAC;EAC1B,MAAMG,MAAM,GAAG,EAAEJ,IAAI,GAAGE,CAAC,CAAC;EAE1B,QAAQL,SAAS;IACf,KAAK,UAAU;MACb,OAAO;QAAEQ,GAAG,EAAED,MAAM;QAAEE,IAAI,EAAEH;MAAO,CAAC;IACtC,KAAK,cAAc;MACjB,OAAO;QAAEI,MAAM,EAAEH,MAAM;QAAEI,KAAK,EAAEL;MAAO,CAAC;IAC1C,KAAK,aAAa;MAChB,OAAO;QAAEI,MAAM,EAAEH,MAAM;QAAEE,IAAI,EAAEH;MAAO,CAAC;IACzC;MACE,OAAO;QAAEE,GAAG,EAAED,MAAM;QAAEI,KAAK,EAAEL;MAAO,CAAC;EACzC;AACF","ignoreList":[]}

package/lib/module/components/index.js

@@ -1,6 +1,7 @@
 "use strict";
 
 export * from "./avatar/index.js";
+export * from "./badge/index.js";
 export * from "./box/index.js";
 export * from "./button/index.js";
 export * from "./chip/index.js";

package/lib/module/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}

package/lib/typescript/src/components/badge/Badge.d.ts

@@ -0,0 +1,17 @@
+import type { BadgeProps } from "./types.js";
+/**
+ * Overlays a count or status indicator on one corner of the element it wraps.
+ *
+ * ```tsx
+ * <Badge placement="top-right" color="danger" label={3}>
+ *   <Toolbar.Button icon="bell" accessibilityLabel="Notifications" />
+ * </Badge>
+ * ```
+ *
+ * The child renders untouched — `Badge` contributes the positioning context and
+ * the overlay, nothing else. A round child usually wants a negative `offset`,
+ * since the corner being anchored to is the bounding box's, not the circle's.
+ */
+declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<import("react-native/types_generated/src/private/webapis/dom/nodes/ReactNativeElement").default>>;
+export { Badge };
+//# sourceMappingURL=Badge.d.ts.map

package/lib/typescript/src/components/badge/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../../src/components/badge/Badge.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAS,CAAC;AAG1C;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,KAAK,wLA6BT,CAAC;AAEH,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/lib/typescript/src/components/badge/index.d.ts

@@ -0,0 +1,3 @@
+export { Badge } from "./Badge.js";
+export type { BadgeColor, BadgePlacement, BadgeProps, BadgeSize } from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,YAAS,CAAC"}

package/lib/typescript/src/components/badge/parts/BadgeIndicator.d.ts

@@ -0,0 +1,19 @@
+import type { BadgeColor, BadgeSize } from "../types.js";
+export interface BadgeIndicatorProps {
+    label?: string | number;
+    color: BadgeColor;
+    size: BadgeSize;
+    accessibilityLabel?: string;
+}
+/**
+ * The overlay itself: a dot, or a pill carrying the label. Owns the paint, the
+ * legibility ring, and the accessibility node — the wrapper owns only position.
+ *
+ * `useUnistyles` is called unconditionally, which is what subscribes this
+ * component to theme changes. The background below comes from a variant, which
+ * unistyles applies straight to the native node on a theme switch; without a
+ * re-render React would go on believing the node holds the previous theme's
+ * value. `Chip` documents the same hazard on its root.
+ */
+export declare const BadgeIndicator: ({ label, color, size, accessibilityLabel }: BadgeIndicatorProps) => import("react").JSX.Element;
+//# sourceMappingURL=BadgeIndicator.d.ts.map

package/lib/typescript/src/components/badge/parts/BadgeIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeIndicator.d.ts","sourceRoot":"","sources":["../../../../../../src/components/badge/parts/BadgeIndicator.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,aAAU,CAAC;AAsBtD,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,EAAE,UAAU,CAAC;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,GAAI,4CAA4C,mBAAmB,gCA0C7F,CAAC"}

package/lib/typescript/src/components/badge/types.d.ts

@@ -0,0 +1,61 @@
+import type { ReactNode } from "react";
+import type { ViewProps } from "react-native";
+/** Corner of the wrapped child the indicator is anchored to. */
+export type BadgePlacement = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+/** Scale of the dot, pill, and label. */
+export type BadgeSize = "sm" | "md" | "lg";
+/**
+ * Semantic color scheme, or a raw CSS color literal (`#fff`, `rgb(...)`, `hsl(...)`).
+ * A literal paints the indicator with that exact value and derives a readable
+ * foreground for the label.
+ */
+export type BadgeColor = "primary" | "secondary" | "success" | "warning" | "danger" | (string & {});
+export interface BadgeProps extends ViewProps {
+    /** The element being badged. Rendered untouched; `Badge` only adds the overlay. */
+    children: ReactNode;
+    /**
+     * Corner the indicator sits on. Defaults to `'top-right'`.
+     *
+     * The indicator overhangs the child, so an ancestor that clips — a `Surface`
+     * with a radius, or a `Screen` list row — will cut it off. Pad that container
+     * by the overhang, or lift the `Badge` outside it.
+     */
+    placement?: BadgePlacement;
+    /**
+     * Text in the indicator. Omit it (or pass an empty string) for a dot.
+     * `0` renders as a label — use `isVisible` to suppress a zero count.
+     */
+    label?: string | number;
+    /** Semantic scheme or raw color literal. Defaults to `'danger'`. */
+    color?: BadgeColor;
+    /** Scale of the indicator. Defaults to `'md'`. */
+    size?: BadgeSize;
+    /**
+     * Nudges the indicator along both axes from the corner `placement` picked.
+     * Positive moves it away from the child's centre, negative pulls it in.
+     * A number applies to both axes; `{ x, y }` sets them separately.
+     *
+     * The corner it anchors to is the child's **bounding box**, so a round child
+     * needs a negative offset to bring the indicator onto the visible edge — a
+     * circle only meets its box at 45°, about `0.21 × width` away. Defaults to `0`.
+     */
+    offset?: number | {
+        x?: number;
+        y?: number;
+    };
+    /** Renders the indicator. The child renders either way. Defaults to `true`. */
+    isVisible?: boolean;
+    /**
+     * Stretches the wrapper along its parent's cross axis, so a child that
+     * stretches unwrapped keeps stretching. Defaults to `false`, which hugs the
+     * child — what an icon, avatar, or toolbar button needs. An explicit
+     * `alignSelf` in `style` beats both.
+     */
+    fullWidth?: boolean;
+    /**
+     * Announced in place of the label. Defaults to the label's own text; an
+     * unlabelled dot is hidden from assistive technology.
+     */
+    accessibilityLabel?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/components/badge/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/badge/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,gEAAgE;AAChE,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,CAAC;AAEvF,yCAAyC;AACzC,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,GACT,QAAQ,GAER,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAElB,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,mFAAmF;IACnF,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,oEAAoE;IACpE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,kDAAkD;IAClD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,+EAA+E;IAC/E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B"}

package/lib/typescript/src/components/badge/utils.d.ts

@@ -0,0 +1,40 @@
+import type { BadgePlacement, BadgeSize } from "./types.js";
+export interface CustomBadgeColors {
+    bg: string;
+    fg: string;
+}
+/** The indicator's paint for a raw literal: the literal itself, plus a readable label. */
+export declare function getCustomBadgeColors(literal: string): CustomBadgeColors;
+/**
+ * `true` when `label` should render as a pill. An empty string and `undefined`
+ * are a dot; `0` is a label, since a caller suppressing a zero count uses
+ * `isVisible` rather than relying on falsiness.
+ */
+export declare function hasLabel(label: string | number | undefined): label is string | number;
+/**
+ * Outer diameter of the dot per size. The indicator's own stylesheet repeats
+ * these as literals — the unistyles Babel plugin reads that object statically,
+ * so it cannot reference this table — and `anchorOffsetsMatchDotRadius` in the
+ * test suite is what keeps the two in step.
+ */
+export declare const DOT_SIZE: Record<BadgeSize, number>;
+export interface AnchorPosition {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}
+/**
+ * Absolute insets for the indicator, in pure arithmetic rather than one
+ * compound variant per (placement, size) cell: `offset` is an open-ended number
+ * and could never be a variant condition, and nothing here touches the theme.
+ *
+ * The base inset is the dot's radius, which puts a dot's centre exactly on the
+ * child's bounding-box corner. `offset` moves it from there — positive away
+ * from the child's centre, negative toward it.
+ */
+export declare function getAnchorPosition(placement: BadgePlacement, size: BadgeSize, offset?: number | {
+    x?: number;
+    y?: number;
+}): AnchorPosition;
+//# sourceMappingURL=utils.d.ts.map

package/lib/typescript/src/components/badge/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/badge/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,YAAS,CAAC;AAMzD,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,0FAA0F;AAC1F,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,MAAM,GAAG,iBAAiB,CAEvE;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,CAErF;AAED;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI9C,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,cAAc,EACzB,IAAI,EAAE,SAAS,EACf,MAAM,GAAE,MAAM,GAAG;IAAE,CAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,CAAC,EAAE,MAAM,CAAA;CAAM,GAC9C,cAAc,CAkBhB"}

package/lib/typescript/src/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./avatar/index.js";
+export * from "./badge/index.js";
 export * from "./box/index.js";
 export * from "./button/index.js";
 export * from "./chip/index.js";

package/lib/typescript/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAU,CAAC;AACzB,cAAc,gBAAO,CAAC;AACtB,cAAc,mBAAU,CAAC;AACzB,cAAc,iBAAQ,CAAC;AACvB,cAAc,oBAAW,CAAC;AAC1B,cAAc,wBAAe,CAAC;AAC9B,cAAc,mBAAU,CAAC;AACzB,cAAc,iBAAQ,CAAC;AACvB,cAAc,kBAAS,CAAC;AACxB,cAAc,2BAAkB,CAAC;AACjC,cAAc,mBAAU,CAAC;AACzB,cAAc,sBAAa,CAAC;AAC5B,cAAc,mBAAU,CAAC;AACzB,cAAc,iBAAQ,CAAC;AACvB,cAAc,oBAAW,CAAC;AAC1B,cAAc,oBAAW,CAAC;AAC1B,cAAc,iBAAQ,CAAC;AACvB,cAAc,kBAAS,CAAC;AACxB,cAAc,oBAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAU,CAAC;AACzB,cAAc,kBAAS,CAAC;AACxB,cAAc,gBAAO,CAAC;AACtB,cAAc,mBAAU,CAAC;AACzB,cAAc,iBAAQ,CAAC;AACvB,cAAc,oBAAW,CAAC;AAC1B,cAAc,wBAAe,CAAC;AAC9B,cAAc,mBAAU,CAAC;AACzB,cAAc,iBAAQ,CAAC;AACvB,cAAc,kBAAS,CAAC;AACxB,cAAc,2BAAkB,CAAC;AACjC,cAAc,mBAAU,CAAC;AACzB,cAAc,sBAAa,CAAC;AAC5B,cAAc,mBAAU,CAAC;AACzB,cAAc,iBAAQ,CAAC;AACvB,cAAc,oBAAW,CAAC;AAC1B,cAAc,oBAAW,CAAC;AAC1B,cAAc,iBAAQ,CAAC;AACvB,cAAc,kBAAS,CAAC;AACxB,cAAc,oBAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-terra-ui",
-  "version": "0.11.0",
+  "version": "0.11.2",
   "description": "Themeable React Native UI components built on react-native-unistyles",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/badge/Badge.tsx

@@ -0,0 +1,78 @@
+import { type ComponentRef, forwardRef } from "react";
+import { View } from "react-native";
+
+import { StyleSheet } from "react-native-unistyles";
+
+import { BadgeIndicator } from "./parts/BadgeIndicator";
+import type { BadgeProps } from "./types";
+import { getAnchorPosition } from "./utils";
+
+/**
+ * Overlays a count or status indicator on one corner of the element it wraps.
+ *
+ * ```tsx
+ * <Badge placement="top-right" color="danger" label={3}>
+ *   <Toolbar.Button icon="bell" accessibilityLabel="Notifications" />
+ * </Badge>
+ * ```
+ *
+ * The child renders untouched — `Badge` contributes the positioning context and
+ * the overlay, nothing else. A round child usually wants a negative `offset`,
+ * since the corner being anchored to is the bounding box's, not the circle's.
+ */
+const Badge = forwardRef<ComponentRef<typeof View>, BadgeProps>(function Badge(
+  {
+    children,
+    placement = "top-right",
+    label,
+    color = "danger",
+    size = "md",
+    offset = 0,
+    isVisible = true,
+    fullWidth = false,
+    accessibilityLabel,
+    style,
+    ...rest
+  },
+  ref
+) {
+  styles.useVariants({ fullWidth });
+
+  return (
+    // `style` last so an explicit `alignSelf` beats `fullWidth`.
+    <View ref={ref} style={[styles.wrapper, style]} {...rest}>
+      {children}
+      {isVisible ? (
+        <View pointerEvents="box-none" style={[styles.anchor, getAnchorPosition(placement, size, offset)]}>
+          <BadgeIndicator label={label} color={color} size={size} accessibilityLabel={accessibilityLabel} />
+        </View>
+      ) : null}
+    </View>
+  );
+});
+
+export { Badge };
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+//
+// The indicator's insets are computed in `getAnchorPosition`, not declared here:
+// `offset` is an open-ended number, so it could never be a variant condition,
+// and the position involves no theme tokens at all. That leaves this stylesheet
+// with only what genuinely varies declaratively.
+const styles = StyleSheet.create(() => ({
+  wrapper: {
+    position: "relative",
+    variants: {
+      // `alignSelf: 'flex-start'` hugs the child, so the indicator anchors to
+      // the child's bounds rather than the surrounding container's. A child
+      // that was stretching needs `fullWidth` to go on doing so.
+      fullWidth: {
+        true: { alignSelf: "stretch" },
+        false: { alignSelf: "flex-start" },
+      },
+    },
+  },
+  anchor: {
+    position: "absolute",
+  },
+}));

package/src/components/badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge } from "./Badge";
+export type { BadgeColor, BadgePlacement, BadgeProps, BadgeSize } from "./types";

package/src/components/badge/parts/BadgeIndicator.tsx

@@ -0,0 +1,178 @@
+import { Text as RNText, View } from "react-native";
+
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+
+import type { ColorToken, RoleTextVariant } from "#theme/types";
+import { resolveThemeColor } from "#utils/resolve-theme-color";
+import { FONT_WEIGHT_VALUE, SYSTEM_FONT } from "#utils/typography";
+import type { BadgeColor, BadgeSize } from "../types";
+import { getCustomBadgeColors, hasLabel } from "../utils";
+
+const SCHEME_NAMES = new Set(["primary", "secondary", "success", "warning", "danger"]);
+
+type BadgeScheme = "primary" | "secondary" | "success" | "warning" | "danger";
+
+/** Label foreground per scheme — mirrors the spec's token table. */
+const FG_TOKEN: Record<BadgeScheme, ColorToken> = {
+  primary: "accent.solid.fg",
+  secondary: "neutral.solid.fg",
+  success: "success.solid.fg",
+  warning: "warning.solid.fg",
+  danger: "danger.solid.fg",
+};
+
+const LABEL_VARIANT: Record<BadgeSize, RoleTextVariant> = {
+  sm: "label-sm",
+  md: "label-md",
+  lg: "label-lg",
+};
+
+export interface BadgeIndicatorProps {
+  label?: string | number;
+  color: BadgeColor;
+  size: BadgeSize;
+  accessibilityLabel?: string;
+}
+
+/**
+ * The overlay itself: a dot, or a pill carrying the label. Owns the paint, the
+ * legibility ring, and the accessibility node — the wrapper owns only position.
+ *
+ * `useUnistyles` is called unconditionally, which is what subscribes this
+ * component to theme changes. The background below comes from a variant, which
+ * unistyles applies straight to the native node on a theme switch; without a
+ * re-render React would go on believing the node holds the previous theme's
+ * value. `Chip` documents the same hazard on its root.
+ */
+export const BadgeIndicator = ({ label, color, size, accessibilityLabel }: BadgeIndicatorProps) => {
+  const { theme } = useUnistyles();
+  // A literal never matches one of the five variant options, so it's cast to
+  // satisfy `useVariants`'s literal-union type while still being compared
+  // against the real value below.
+  styles.useVariants({ color: color as BadgeScheme, size });
+
+  const custom = SCHEME_NAMES.has(color) ? null : getCustomBadgeColors(color);
+  const labelled = hasLabel(label);
+  const foreground = custom ? custom.fg : FG_TOKEN[color as BadgeScheme];
+
+  // An explicit label wins even on a dot; a dot with nothing to announce is
+  // decorative and hidden rather than read out as an unlabelled element.
+  const announced = accessibilityLabel ?? (labelled ? String(label) : undefined);
+  const accessibility = announced
+    ? { accessible: true, accessibilityLabel: announced }
+    : {
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants" as const,
+        "aria-hidden": true,
+      };
+
+  return (
+    <View
+      style={[
+        styles.indicator,
+        labelled ? styles.pill : styles.dot,
+        custom ? { backgroundColor: custom.bg } : null,
+      ]}
+      {...accessibility}
+    >
+      {labelled ? (
+        <RNText
+          style={[styles.label, { color: resolveThemeColor(foreground, theme) }]}
+          maxFontSizeMultiplier={theme.typography.variants[LABEL_VARIANT[size]].maxFontSizeMultiplier}
+          numberOfLines={1}
+        >
+          {label}
+        </RNText>
+      ) : null}
+    </View>
+  );
+};
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+//
+// `color` is a plain variant rather than a compound one: `Badge` renders solid
+// only, so there is no second paint axis for it to interact with.
+//
+// React Native's box model is border-box, so the ring below eats into the
+// indicator rather than growing it — the dot's outer diameter stays exactly
+// what `size` declares, with no compensation arithmetic.
+const styles = StyleSheet.create((theme) => {
+  const c = theme.color;
+  // A custom font encodes its weight in the family name, so only the system
+  // font takes a numeric `fontWeight` — the same branch `Chip` makes. Inlined
+  // rather than extracted: the unistyles Babel plugin rewrites this factory,
+  // and an imported function called from inside it is not in scope at runtime.
+  const labelFont = theme.typography.fonts.semibold;
+  const isSystemLabelFont = labelFont === SYSTEM_FONT;
+
+  return {
+    indicator: {
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: theme.radius.full,
+      borderColor: c["surface.canvas"],
+      variants: {
+        size: {
+          sm: { borderWidth: 1.5 },
+          md: { borderWidth: 2 },
+          lg: { borderWidth: 2 },
+        },
+        color: {
+          primary: { backgroundColor: c["accent.solid.bg"] },
+          secondary: { backgroundColor: c["neutral.solid.bg"] },
+          success: { backgroundColor: c["success.solid.bg"] },
+          warning: { backgroundColor: c["warning.solid.bg"] },
+          danger: { backgroundColor: c["danger.solid.bg"] },
+        },
+      },
+    },
+    // These diameters are mirrored by `DOT_SIZE` in `../utils.ts`, which the
+    // anchor arithmetic reads. The Babel plugin needs them literal here, so a
+    // test asserts the two stay equal.
+    dot: {
+      variants: {
+        size: {
+          sm: { width: 12, height: 12 },
+          md: { width: 16, height: 16 },
+          lg: { width: 20, height: 20 },
+        },
+      },
+    },
+    pill: {
+      variants: {
+        size: {
+          sm: { height: 18, minWidth: 18, paddingHorizontal: 5 },
+          md: { height: 22, minWidth: 22, paddingHorizontal: 6 },
+          lg: { height: 26, minWidth: 26, paddingHorizontal: 8 },
+        },
+      },
+    },
+    // Spelled out rather than derived from `LABEL_VARIANT`: the unistyles Babel
+    // plugin reads this object statically, so computed variant keys are not
+    // safe here even though they would resolve correctly under test.
+    label: {
+      textAlign: "center",
+      fontFamily: isSystemLabelFont ? undefined : labelFont,
+      fontWeight: isSystemLabelFont ? FONT_WEIGHT_VALUE.semibold : undefined,
+      variants: {
+        size: {
+          sm: {
+            fontSize: theme.typography.variants["label-sm"].fontSize,
+            lineHeight: theme.typography.variants["label-sm"].lineHeight,
+            letterSpacing: theme.typography.variants["label-sm"].letterSpacing,
+          },
+          md: {
+            fontSize: theme.typography.variants["label-md"].fontSize,
+            lineHeight: theme.typography.variants["label-md"].lineHeight,
+            letterSpacing: theme.typography.variants["label-md"].letterSpacing,
+          },
+          lg: {
+            fontSize: theme.typography.variants["label-lg"].fontSize,
+            lineHeight: theme.typography.variants["label-lg"].lineHeight,
+            letterSpacing: theme.typography.variants["label-lg"].letterSpacing,
+          },
+        },
+      },
+    },
+  };
+});

package/src/components/badge/types.ts

@@ -0,0 +1,68 @@
+import type { ReactNode } from "react";
+import type { ViewProps } from "react-native";
+
+/** Corner of the wrapped child the indicator is anchored to. */
+export type BadgePlacement = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+
+/** Scale of the dot, pill, and label. */
+export type BadgeSize = "sm" | "md" | "lg";
+
+/**
+ * Semantic color scheme, or a raw CSS color literal (`#fff`, `rgb(...)`, `hsl(...)`).
+ * A literal paints the indicator with that exact value and derives a readable
+ * foreground for the label.
+ */
+export type BadgeColor =
+  | "primary"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "danger"
+  // literals last so scheme-name autocomplete still surfaces
+  | (string & {});
+
+export interface BadgeProps extends ViewProps {
+  /** The element being badged. Rendered untouched; `Badge` only adds the overlay. */
+  children: ReactNode;
+  /**
+   * Corner the indicator sits on. Defaults to `'top-right'`.
+   *
+   * The indicator overhangs the child, so an ancestor that clips — a `Surface`
+   * with a radius, or a `Screen` list row — will cut it off. Pad that container
+   * by the overhang, or lift the `Badge` outside it.
+   */
+  placement?: BadgePlacement;
+  /**
+   * Text in the indicator. Omit it (or pass an empty string) for a dot.
+   * `0` renders as a label — use `isVisible` to suppress a zero count.
+   */
+  label?: string | number;
+  /** Semantic scheme or raw color literal. Defaults to `'danger'`. */
+  color?: BadgeColor;
+  /** Scale of the indicator. Defaults to `'md'`. */
+  size?: BadgeSize;
+  /**
+   * Nudges the indicator along both axes from the corner `placement` picked.
+   * Positive moves it away from the child's centre, negative pulls it in.
+   * A number applies to both axes; `{ x, y }` sets them separately.
+   *
+   * The corner it anchors to is the child's **bounding box**, so a round child
+   * needs a negative offset to bring the indicator onto the visible edge — a
+   * circle only meets its box at 45°, about `0.21 × width` away. Defaults to `0`.
+   */
+  offset?: number | { x?: number; y?: number };
+  /** Renders the indicator. The child renders either way. Defaults to `true`. */
+  isVisible?: boolean;
+  /**
+   * Stretches the wrapper along its parent's cross axis, so a child that
+   * stretches unwrapped keeps stretching. Defaults to `false`, which hugs the
+   * child — what an icon, avatar, or toolbar button needs. An explicit
+   * `alignSelf` in `style` beats both.
+   */
+  fullWidth?: boolean;
+  /**
+   * Announced in place of the label. Defaults to the label's own text; an
+   * unlabelled dot is hidden from assistive technology.
+   */
+  accessibilityLabel?: string;
+}

package/src/components/badge/utils.ts

@@ -0,0 +1,77 @@
+import { readableOn } from "#utils/color-utils";
+import type { BadgePlacement, BadgeSize } from "./types";
+
+// A custom color literal (hex/rgb/hsl) isn't a bounded set of options, so it
+// can't be a unistyles variant condition — it's derived here instead, the same
+// way `chip/utils.ts` handles the equivalent case on `Chip`.
+
+export interface CustomBadgeColors {
+  bg: string;
+  fg: string;
+}
+
+/** The indicator's paint for a raw literal: the literal itself, plus a readable label. */
+export function getCustomBadgeColors(literal: string): CustomBadgeColors {
+  return { bg: literal, fg: readableOn(literal) };
+}
+
+/**
+ * `true` when `label` should render as a pill. An empty string and `undefined`
+ * are a dot; `0` is a label, since a caller suppressing a zero count uses
+ * `isVisible` rather than relying on falsiness.
+ */
+export function hasLabel(label: string | number | undefined): label is string | number {
+  return label !== undefined && label !== "";
+}
+
+/**
+ * Outer diameter of the dot per size. The indicator's own stylesheet repeats
+ * these as literals — the unistyles Babel plugin reads that object statically,
+ * so it cannot reference this table — and `anchorOffsetsMatchDotRadius` in the
+ * test suite is what keeps the two in step.
+ */
+export const DOT_SIZE: Record<BadgeSize, number> = {
+  sm: 12,
+  md: 16,
+  lg: 20,
+};
+
+export interface AnchorPosition {
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+}
+
+/**
+ * Absolute insets for the indicator, in pure arithmetic rather than one
+ * compound variant per (placement, size) cell: `offset` is an open-ended number
+ * and could never be a variant condition, and nothing here touches the theme.
+ *
+ * The base inset is the dot's radius, which puts a dot's centre exactly on the
+ * child's bounding-box corner. `offset` moves it from there — positive away
+ * from the child's centre, negative toward it.
+ */
+export function getAnchorPosition(
+  placement: BadgePlacement,
+  size: BadgeSize,
+  offset: number | { x?: number; y?: number } = 0
+): AnchorPosition {
+  const base = DOT_SIZE[size] / 2;
+  const { x, y } =
+    typeof offset === "number" ? { x: offset, y: offset } : { x: offset.x ?? 0, y: offset.y ?? 0 };
+
+  const insetX = -(base + x);
+  const insetY = -(base + y);
+
+  switch (placement) {
+    case "top-left":
+      return { top: insetY, left: insetX };
+    case "bottom-right":
+      return { bottom: insetY, right: insetX };
+    case "bottom-left":
+      return { bottom: insetY, left: insetX };
+    default:
+      return { top: insetY, right: insetX };
+  }
+}

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from "./avatar";
+export * from "./badge";
 export * from "./box";
 export * from "./button";
 export * from "./chip";