react-native-terra-ui 0.11.1 → 0.11.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # 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

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

@@ -4,7 +4,8 @@ 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getAnchorPosition } from "./utils.js";
+
 /**
  * Overlays a count or status indicator on one corner of the element it wraps.
  *
@@ -15,14 +16,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * ```
  *
  * The child renders untouched — `Badge` contributes the positioning context and
- * the overlay, nothing else.
+ * 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,
@@ -32,8 +36,6 @@ const Badge = /*#__PURE__*/forwardRef(function Badge({
   const _styles = styles;
   {
     const styles = _styles.useVariants({
-      placement,
-      size,
       fullWidth
     });
     return (
@@ -45,7 +47,7 @@ const Badge = /*#__PURE__*/forwardRef(function Badge({
         ...rest,
         children: [children, isVisible ? /*#__PURE__*/_jsx(View, {
           pointerEvents: "box-none",
-          style: styles.anchor,
+          style: [styles.anchor, getAnchorPosition(placement, size, offset)],
           children: /*#__PURE__*/_jsx(BadgeIndicator, {
             label: label,
             color: color,
@@ -61,14 +63,10 @@ export { Badge };
 
 // ─── Styles ───────────────────────────────────────────────────────────────────
 //
-// The indicator is positioned by absolute insets picked from `size`, never by
-// measuring the child — its overhang is a function of its own size, not the
-// child's. Which edges those insets land on is `placement`, and the magnitude
-// is `size`, so the two interact and the offsets are compound variants.
-//
-// The inset equals the dot's radius, which puts a dot's centre exactly on the
-// child's corner. A pill keeps the same anchored edges and grows inward from
-// them, so a longer label extends across the child rather than away from it.
+// 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",
@@ -83,92 +81,12 @@ const styles = StyleSheet.create(() => ({
         false: {
           alignSelf: "flex-start"
         }
-      },
-      placement: {
-        "top-right": {},
-        "top-left": {},
-        "bottom-right": {},
-        "bottom-left": {}
-      },
-      size: {
-        sm: {},
-        md: {}
       }
     },
     uni__dependencies: [4]
   },
   anchor: {
-    position: "absolute",
-    variants: {
-      placement: {
-        "top-right": {},
-        "top-left": {},
-        "bottom-right": {},
-        "bottom-left": {}
-      },
-      size: {
-        sm: {},
-        md: {}
-      }
-    },
-    compoundVariants: [{
-      placement: "top-right",
-      size: "sm",
-      styles: {
-        top: -5,
-        right: -5
-      }
-    }, {
-      placement: "top-right",
-      size: "md",
-      styles: {
-        top: -6,
-        right: -6
-      }
-    }, {
-      placement: "top-left",
-      size: "sm",
-      styles: {
-        top: -5,
-        left: -5
-      }
-    }, {
-      placement: "top-left",
-      size: "md",
-      styles: {
-        top: -6,
-        left: -6
-      }
-    }, {
-      placement: "bottom-right",
-      size: "sm",
-      styles: {
-        bottom: -5,
-        right: -5
-      }
-    }, {
-      placement: "bottom-right",
-      size: "md",
-      styles: {
-        bottom: -6,
-        right: -6
-      }
-    }, {
-      placement: "bottom-left",
-      size: "sm",
-      styles: {
-        bottom: -5,
-        left: -5
-      }
-    }, {
-      placement: "bottom-left",
-      size: "md",
-      styles: {
-        bottom: -6,
-        left: -6
-      }
-    }],
-    uni__dependencies: [4]
+    position: "absolute"
   }
 }));
 //# sourceMappingURL=Badge.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","StyleSheet","BadgeIndicator","jsx","_jsx","jsxs","_jsxs","Badge","children","placement","label","color","size","isVisible","fullWidth","accessibilityLabel","style","rest","ref","_styles","styles","useVariants","View","wrapper","pointerEvents","anchor","create","position","variants","true","alignSelf","false","sm","md","uni__dependencies","compoundVariants","top","right","left","bottom"],"sourceRoot":"../../../../src","sources":["components/badge/Badge.tsx"],"mappings":"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","ignoreList":[]}
+{"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/parts/BadgeIndicator.js

@@ -18,7 +18,8 @@ const FG_TOKEN = {
 };
 const LABEL_VARIANT = {
   sm: "label-sm",
-  md: "label-md"
+  md: "label-md",
+  lg: "label-lg"
 };
 /**
  * The overlay itself: a dot, or a pill carrying the label. Owns the paint, the
@@ -109,6 +110,9 @@ const styles = StyleSheet.create(theme => {
           },
           md: {
             borderWidth: 2
+          },
+          lg: {
+            borderWidth: 2
           }
         },
         color: {
@@ -131,16 +135,23 @@ const styles = StyleSheet.create(theme => {
       },
       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: 10,
-            height: 10
-          },
-          md: {
             width: 12,
             height: 12
+          },
+          md: {
+            width: 16,
+            height: 16
+          },
+          lg: {
+            width: 20,
+            height: 20
           }
         }
       },
@@ -150,14 +161,19 @@ const styles = StyleSheet.create(theme => {
       variants: {
         size: {
           sm: {
-            height: 16,
-            minWidth: 16,
-            paddingHorizontal: 4
+            height: 18,
+            minWidth: 18,
+            paddingHorizontal: 5
           },
           md: {
-            height: 20,
-            minWidth: 20,
+            height: 22,
+            minWidth: 22,
             paddingHorizontal: 6
+          },
+          lg: {
+            height: 26,
+            minWidth: 26,
+            paddingHorizontal: 8
           }
         }
       },
@@ -181,6 +197,11 @@ const styles = StyleSheet.create(theme => {
             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/lib/module/components/badge/parts/BadgeIndicator.js.map

@@ -1 +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","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":[]}
+{"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/utils.js

@@ -22,4 +22,62 @@ export function getCustomBadgeColors(literal) {
 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

@@ -1 +1 @@
-{"version":3,"names":["readableOn","getCustomBadgeColors","literal","bg","fg","hasLabel","label","undefined"],"sourceRoot":"../../../../src","sources":["components/badge/utils.ts"],"mappings":";;AAAA,SAASA,UAAU;;AAEnB;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","ignoreList":[]}
+{"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/typescript/src/components/badge/Badge.d.ts

@@ -9,7 +9,8 @@ import type { BadgeProps } from "./types.js";
  * ```
  *
  * The child renders untouched — `Badge` contributes the positioning context and
- * the overlay, nothing else.
+ * 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 };

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

@@ -1 +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;AAE1C;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,KAAK,wLA4BT,CAAC;AAEH,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"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/parts/BadgeIndicator.d.ts.map

@@ -1 +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;AAqBtD,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"}
+{"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

@@ -3,7 +3,7 @@ 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";
+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
@@ -30,6 +30,19 @@ export interface BadgeProps extends ViewProps {
     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;
     /**

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

@@ -1 +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,CAAC;AAEpC;;;;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,+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"}
+{"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

@@ -1,3 +1,4 @@
+import type { BadgePlacement, BadgeSize } from "./types.js";
 export interface CustomBadgeColors {
     bg: string;
     fg: string;
@@ -10,4 +11,30 @@ export declare function getCustomBadgeColors(literal: string): CustomBadgeColors
  * `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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/badge/utils.ts"],"names":[],"mappings":"AAMA,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"}
+{"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-terra-ui",
-  "version": "0.11.1",
+  "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

@@ -5,6 +5,7 @@ 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.
@@ -16,7 +17,8 @@ import type { BadgeProps } from "./types";
  * ```
  *
  * The child renders untouched — `Badge` contributes the positioning context and
- * the overlay, nothing else.
+ * 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(
   {
@@ -25,6 +27,7 @@ const Badge = forwardRef<ComponentRef<typeof View>, BadgeProps>(function Badge(
     label,
     color = "danger",
     size = "md",
+    offset = 0,
     isVisible = true,
     fullWidth = false,
     accessibilityLabel,
@@ -33,14 +36,14 @@ const Badge = forwardRef<ComponentRef<typeof View>, BadgeProps>(function Badge(
   },
   ref
 ) {
-  styles.useVariants({ placement, size, fullWidth });
+  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}>
+        <View pointerEvents="box-none" style={[styles.anchor, getAnchorPosition(placement, size, offset)]}>
           <BadgeIndicator label={label} color={color} size={size} accessibilityLabel={accessibilityLabel} />
         </View>
       ) : null}
@@ -52,14 +55,10 @@ export { Badge };
 
 // ─── Styles ───────────────────────────────────────────────────────────────────
 //
-// The indicator is positioned by absolute insets picked from `size`, never by
-// measuring the child — its overhang is a function of its own size, not the
-// child's. Which edges those insets land on is `placement`, and the magnitude
-// is `size`, so the two interact and the offsets are compound variants.
-//
-// The inset equals the dot's radius, which puts a dot's centre exactly on the
-// child's corner. A pill keeps the same anchored edges and grows inward from
-// them, so a longer label extends across the child rather than away from it.
+// 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",
@@ -71,41 +70,9 @@ const styles = StyleSheet.create(() => ({
         true: { alignSelf: "stretch" },
         false: { alignSelf: "flex-start" },
       },
-      placement: {
-        "top-right": {},
-        "top-left": {},
-        "bottom-right": {},
-        "bottom-left": {},
-      },
-      size: {
-        sm: {},
-        md: {},
-      },
     },
   },
   anchor: {
     position: "absolute",
-    variants: {
-      placement: {
-        "top-right": {},
-        "top-left": {},
-        "bottom-right": {},
-        "bottom-left": {},
-      },
-      size: {
-        sm: {},
-        md: {},
-      },
-    },
-    compoundVariants: [
-      { placement: "top-right", size: "sm", styles: { top: -5, right: -5 } },
-      { placement: "top-right", size: "md", styles: { top: -6, right: -6 } },
-      { placement: "top-left", size: "sm", styles: { top: -5, left: -5 } },
-      { placement: "top-left", size: "md", styles: { top: -6, left: -6 } },
-      { placement: "bottom-right", size: "sm", styles: { bottom: -5, right: -5 } },
-      { placement: "bottom-right", size: "md", styles: { bottom: -6, right: -6 } },
-      { placement: "bottom-left", size: "sm", styles: { bottom: -5, left: -5 } },
-      { placement: "bottom-left", size: "md", styles: { bottom: -6, left: -6 } },
-    ],
   },
 }));

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

@@ -24,6 +24,7 @@ const FG_TOKEN: Record<BadgeScheme, ColorToken> = {
 const LABEL_VARIANT: Record<BadgeSize, RoleTextVariant> = {
   sm: "label-sm",
   md: "label-md",
+  lg: "label-lg",
 };
 
 export interface BadgeIndicatorProps {
@@ -114,6 +115,7 @@ const styles = StyleSheet.create((theme) => {
         size: {
           sm: { borderWidth: 1.5 },
           md: { borderWidth: 2 },
+          lg: { borderWidth: 2 },
         },
         color: {
           primary: { backgroundColor: c["accent.solid.bg"] },
@@ -124,19 +126,24 @@ const styles = StyleSheet.create((theme) => {
         },
       },
     },
+    // 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: 10, height: 10 },
-          md: { width: 12, height: 12 },
+          sm: { width: 12, height: 12 },
+          md: { width: 16, height: 16 },
+          lg: { width: 20, height: 20 },
         },
       },
     },
     pill: {
       variants: {
         size: {
-          sm: { height: 16, minWidth: 16, paddingHorizontal: 4 },
-          md: { height: 20, minWidth: 20, paddingHorizontal: 6 },
+          sm: { height: 18, minWidth: 18, paddingHorizontal: 5 },
+          md: { height: 22, minWidth: 22, paddingHorizontal: 6 },
+          lg: { height: 26, minWidth: 26, paddingHorizontal: 8 },
         },
       },
     },
@@ -159,6 +166,11 @@ const styles = StyleSheet.create((theme) => {
             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

@@ -5,7 +5,7 @@ import type { ViewProps } from "react-native";
 export type BadgePlacement = "top-right" | "top-left" | "bottom-right" | "bottom-left";
 
 /** Scale of the dot, pill, and label. */
-export type BadgeSize = "sm" | "md";
+export type BadgeSize = "sm" | "md" | "lg";
 
 /**
  * Semantic color scheme, or a raw CSS color literal (`#fff`, `rgb(...)`, `hsl(...)`).
@@ -41,6 +41,16 @@ export interface BadgeProps extends ViewProps {
   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;
   /**

package/src/components/badge/utils.ts

@@ -1,4 +1,5 @@
 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
@@ -22,3 +23,55 @@ export function getCustomBadgeColors(literal: string): CustomBadgeColors {
 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 };
+  }
+}