@yahoo/uds-mobile 1.3.0-beta.9 → 1.3.0

package/dist/_virtual/{rolldown_runtime.cjs → _rolldown/runtime.cjs}

@@ -1,5 +1,5 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-//#region rolldown:runtime
+//#region \0rolldown/runtime.js
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/bin/fixtures/dist/index.mjs

@@ -182,12 +182,36 @@ var lineColors = [
 	...alwaysPaletteAliases,
 	...elevationAliases
 ];
+var borderRadiiSort = {
+	none: 0,
+	xs: 1,
+	sm: 2,
+	md: 3,
+	lg: 4,
+	xl: 5,
+	full: 6
+};
+var borderRadii = [
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"none",
+	"xs",
+	"full"
+].sort((a, b) => borderRadiiSort[a] - borderRadiiSort[b]);
+var borderWidthSort = {
+	none: 0,
+	thin: 1,
+	medium: 2,
+	thick: 3
+};
 var borderWidths = [
 	"medium",
 	"none",
 	"thin",
 	"thick"
-];
+].sort((a, b) => borderWidthSort[a] - borderWidthSort[b]);
 var borderWidthsWithElevation = [...borderWidths, ...elevationAliases.map((alias) => `width-${alias}`)];
 var iconSizeSort = {
 	xs: 0,

package/dist/bin/generateTheme.mjs

@@ -283,12 +283,12 @@ function generateComponents(config, colorMode) {
 				const shadowValues = [];
 				for (const [propName, states] of Object.entries(properties)) {
 					if (propName === "textVariant") {
-						const stateValue$1 = states[state];
-						if (stateValue$1 && stateValue$1.type === "textVariants") {
-							const variantName = stateValue$1.value;
+						const stateValue = states[state];
+						if (stateValue && stateValue.type === "textVariants") {
+							const variantName = stateValue.value;
 							const typographyStyles = resolveTypographyStyles(variantName, typography, config);
-							const targetObj$1 = isRootLayer ? textStyleObj : viewStyleObj;
-							Object.assign(targetObj$1, typographyStyles);
+							const targetObj = isRootLayer ? textStyleObj : viewStyleObj;
+							Object.assign(targetObj, typographyStyles);
 						}
 						continue;
 					}

package/dist/bin/uds-mobile.mjs

@@ -13,20 +13,20 @@ import { pathToFileURL } from "node:url";
 const args = process.argv.slice(2);
 const command = args[0];
 function parseArgs(argv) {
-	const positional$1 = [];
-	const options$1 = {};
-	const args$1 = argv.slice(1);
-	for (let i = 0; i < args$1.length; i++) {
-		const arg = args$1[i];
+	const positional = [];
+	const options = {};
+	const args = argv.slice(1);
+	for (let i = 0; i < args.length; i++) {
+		const arg = args[i];
 		if (arg.startsWith("--")) {
 			const key = arg.slice(2);
-			const next = args$1[i + 1];
-			options$1[key] = next && !next.startsWith("-") ? (i++, next) : "true";
-		} else positional$1.push(arg);
+			const next = args[i + 1];
+			options[key] = next && !next.startsWith("-") ? (i++, next) : "true";
+		} else positional.push(arg);
 	}
 	return {
-		positional: positional$1,
-		options: options$1
+		positional,
+		options
 	};
 }
 const { positional, options } = parseArgs(args);

package/dist/components/Avatar.cjs

@@ -1,5 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
 const require_components_Box = require('./Box.cjs');
 const require_components_IconSlot = require('./IconSlot.cjs');
 const require_components_Text = require('./Text.cjs');
@@ -30,6 +31,9 @@ function generateInitials(name, strategy = "firstAndLast") {
 * @description
 * Displays a user avatar with image, initials fallback, or icon fallback.
 *
+* @category Display
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { Avatar } from '@yahoo/uds-mobile';
@@ -50,9 +54,14 @@ function generateInitials(name, strategy = "firstAndLast") {
 * <Avatar icon="Person" variant="secondary" />
 * ```
 *
-* @see The {@link https://uds.build/docs/components/avatar Avatar Docs} for more info
+* @accessibility
+* - Sets `accessibilityRole="image"` automatically
+* - Uses `alt` prop as accessibility label
+* - Always provide meaningful `alt` text for user identification
+*
+* @see {@link Image} for general image display
 */
-const Avatar = (0, react.forwardRef)(function Avatar$1({ src, alt, fallback, size = "md", variant = "primary", icon, abbreviationStrategy = "firstAndLast", style, ...props }, ref) {
+const Avatar = (0, react.forwardRef)(function Avatar({ src, alt, fallback, size = "md", variant = "primary", icon, abbreviationStrategy = "firstAndLast", style, ...props }, ref) {
 	const [imageError, setImageError] = (0, react.useState)(false);
 	const initials = fallback || generateInitials(alt, abbreviationStrategy);
 	const hasImage = src && !imageError;

package/dist/components/Avatar.d.cts

@@ -1,6 +1,6 @@
 
 import { IconSlotType } from "./IconSlot.cjs";
-import * as react0 from "react";
+import * as react from "react";
 import { View, ViewProps } from "react-native";
 
 //#region src/components/Avatar.d.ts
@@ -32,6 +32,9 @@ interface AvatarProps extends ViewProps {
  * @description
  * Displays a user avatar with image, initials fallback, or icon fallback.
  *
+ * @category Display
+ * @platform mobile
+ *
  * @example
  * ```tsx
  * import { Avatar } from '@yahoo/uds-mobile';
@@ -52,9 +55,14 @@ interface AvatarProps extends ViewProps {
  * <Avatar icon="Person" variant="secondary" />
  * ```
  *
- * @see The {@link https://uds.build/docs/components/avatar Avatar Docs} for more info
+ * @accessibility
+ * - Sets `accessibilityRole="image"` automatically
+ * - Uses `alt` prop as accessibility label
+ * - Always provide meaningful `alt` text for user identification
+ *
+ * @see {@link Image} for general image display
  */
-declare const Avatar: react0.ForwardRefExoticComponent<AvatarProps & react0.RefAttributes<View>>;
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<View>>;
 //#endregion
 export { Avatar, type AvatarProps };
 //# sourceMappingURL=Avatar.d.cts.map

package/dist/components/Avatar.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.cts","names":[],"sources":["../../src/components/Avatar.tsx"],"sourcesContent":[],"mappings":";;;;;;;KAWK,UAAA;;AAL0C,KAQ1C,aAAA,GAHU,SAAA,GAAA,WAAA;AAAA;AAGG,KAGb,oBAAA,GAAoB,OAAA,GAAA,MAAA,GAAA,cAAA,GAAA,UAAA,GAAA,YAAA,GAAA,aAAA,GAAA,CAAA,CAAA,IAAA,EAAA,MAAA,EAAA,GAAA,MAAA,CAAA;AAAA,UASf,WAAA,SAAoB,SAAR,CAAA;EAQb;EAEG,GAAA,CAAA,EAAA,MAAA;EAEH;EAEgB,GAAA,CAAA,EAAA,MAAA;EAdK;EAAS,QAAA,CAAA,EAAA,MAAA;EA0EjC;EAAM,IAAA,CAAA,EAlEH,UAkEG;EAAA;EAAA,OAAA,CAAA,EAhEA,aAgEA;EAAA;EAAA,IAAA,CAAA,EA9DH,YA8DG;;yBA5Da;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA4DnB,QAAM,MAAA,CAAA,0BAAA,cAAA,MAAA,CAAA,cAAA"}
+{"version":3,"file":"Avatar.d.cts","names":[],"sources":["../../src/components/Avatar.tsx"],"mappings":";;;;;;;KAWK,UAAA;;KAGA,aAAA;;KAGA,oBAAA,qFAOC,IAAA;AAAA,UAEI,WAAA,SAAoB,SAAA;EAff;EAiBb,GAAA;EAdgB;EAgBhB,GAAA;EAhBgB;EAkBhB,QAAA;EAfG;EAiBH,IAAA,GAAO,UAAA;;EAEP,OAAA,GAAU,aAAA;EAZM;EAchB,IAAA,GAAO,YAAA;EAZa;EAcpB,oBAAA,GAAuB,oBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;AAAoB;;;;;;;;;;;;;;;;cAoEvC,MAAA,EAAM,KAAA,CAAA,yBAAA,CAAA,WAAA,GAAA,KAAA,CAAA,aAAA,CAAA,IAAA"}

package/dist/components/Avatar.d.mts

@@ -1,6 +1,6 @@
 
 import { IconSlotType } from "./IconSlot.mjs";
-import * as react6 from "react";
+import * as react from "react";
 import { View, ViewProps } from "react-native";
 
 //#region src/components/Avatar.d.ts
@@ -32,6 +32,9 @@ interface AvatarProps extends ViewProps {
  * @description
  * Displays a user avatar with image, initials fallback, or icon fallback.
  *
+ * @category Display
+ * @platform mobile
+ *
  * @example
  * ```tsx
  * import { Avatar } from '@yahoo/uds-mobile';
@@ -52,9 +55,14 @@ interface AvatarProps extends ViewProps {
  * <Avatar icon="Person" variant="secondary" />
  * ```
  *
- * @see The {@link https://uds.build/docs/components/avatar Avatar Docs} for more info
+ * @accessibility
+ * - Sets `accessibilityRole="image"` automatically
+ * - Uses `alt` prop as accessibility label
+ * - Always provide meaningful `alt` text for user identification
+ *
+ * @see {@link Image} for general image display
  */
-declare const Avatar: react6.ForwardRefExoticComponent<AvatarProps & react6.RefAttributes<View>>;
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<View>>;
 //#endregion
 export { Avatar, type AvatarProps };
 //# sourceMappingURL=Avatar.d.mts.map

package/dist/components/Avatar.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.mts","names":[],"sources":["../../src/components/Avatar.tsx"],"sourcesContent":[],"mappings":";;;;;;;KAWK,UAAA;;AAL0C,KAQ1C,aAAA,GAHU,SAAA,GAAA,WAAA;AAAA;AAGG,KAGb,oBAAA,GAAoB,OAAA,GAAA,MAAA,GAAA,cAAA,GAAA,UAAA,GAAA,YAAA,GAAA,aAAA,GAAA,CAAA,CAAA,IAAA,EAAA,MAAA,EAAA,GAAA,MAAA,CAAA;AAAA,UASf,WAAA,SAAoB,SAAR,CAAA;EAQb;EAEG,GAAA,CAAA,EAAA,MAAA;EAEH;EAEgB,GAAA,CAAA,EAAA,MAAA;EAdK;EAAS,QAAA,CAAA,EAAA,MAAA;EA0EjC;EAAM,IAAA,CAAA,EAlEH,UAkEG;EAAA;EAAA,OAAA,CAAA,EAhEA,aAgEA;EAAA;EAAA,IAAA,CAAA,EA9DH,YA8DG;;yBA5Da;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA4DnB,QAAM,MAAA,CAAA,0BAAA,cAAA,MAAA,CAAA,cAAA"}
+{"version":3,"file":"Avatar.d.mts","names":[],"sources":["../../src/components/Avatar.tsx"],"mappings":";;;;;;;KAWK,UAAA;;KAGA,aAAA;;KAGA,oBAAA,qFAOC,IAAA;AAAA,UAEI,WAAA,SAAoB,SAAA;EAff;EAiBb,GAAA;EAdgB;EAgBhB,GAAA;EAhBgB;EAkBhB,QAAA;EAfG;EAiBH,IAAA,GAAO,UAAA;;EAEP,OAAA,GAAU,aAAA;EAZM;EAchB,IAAA,GAAO,YAAA;EAZa;EAcpB,oBAAA,GAAuB,oBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;AAAoB;;;;;;;;;;;;;;;;cAoEvC,MAAA,EAAM,KAAA,CAAA,yBAAA,CAAA,WAAA,GAAA,KAAA,CAAA,aAAA,CAAA,IAAA"}

package/dist/components/Avatar.mjs

@@ -29,6 +29,9 @@ function generateInitials(name, strategy = "firstAndLast") {
 * @description
 * Displays a user avatar with image, initials fallback, or icon fallback.
 *
+* @category Display
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { Avatar } from '@yahoo/uds-mobile';
@@ -49,9 +52,14 @@ function generateInitials(name, strategy = "firstAndLast") {
 * <Avatar icon="Person" variant="secondary" />
 * ```
 *
-* @see The {@link https://uds.build/docs/components/avatar Avatar Docs} for more info
+* @accessibility
+* - Sets `accessibilityRole="image"` automatically
+* - Uses `alt` prop as accessibility label
+* - Always provide meaningful `alt` text for user identification
+*
+* @see {@link Image} for general image display
 */
-const Avatar = forwardRef(function Avatar$1({ src, alt, fallback, size = "md", variant = "primary", icon, abbreviationStrategy = "firstAndLast", style, ...props }, ref) {
+const Avatar = forwardRef(function Avatar({ src, alt, fallback, size = "md", variant = "primary", icon, abbreviationStrategy = "firstAndLast", style, ...props }, ref) {
 	const [imageError, setImageError] = useState(false);
 	const initials = fallback || generateInitials(alt, abbreviationStrategy);
 	const hasImage = src && !imageError;

package/dist/components/Avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.mjs","names":["abbreviationStrategies: Record<\n  Exclude<AbbreviationStrategy, (name: string) => string>,\n  (initials: string[]) => string\n>","Avatar","RNImage","Text"],"sources":["../../src/components/Avatar.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react';\nimport type { View, ViewProps } from 'react-native';\nimport { Image as RNImage } from 'react-native';\n\nimport { avatarStyles } from '../../generated/styles';\nimport { Box } from './Box';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Text } from './Text';\n\n/** Avatar size options */\ntype AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Avatar variant options */\ntype AvatarVariant = 'primary' | 'secondary';\n\n/** Abbreviation strategy for generating initials */\ntype AbbreviationStrategy =\n  | 'first'\n  | 'last'\n  | 'firstAndLast'\n  | 'firstTwo'\n  | 'firstThree'\n  | 'firstOfEach'\n  | ((name: string) => string);\n\ninterface AvatarProps extends ViewProps {\n  /** Image source URL */\n  src?: string;\n  /** Alt text for the image, also used for generating initials */\n  alt?: string;\n  /** Explicit initials to display (overrides auto-generated from alt) */\n  fallback?: string;\n  /** Size of the avatar @default 'md' */\n  size?: AvatarSize;\n  /** Variant style @default 'primary' */\n  variant?: AvatarVariant;\n  /** Custom icon to display when no image or text fallback */\n  icon?: IconSlotType;\n  /** Strategy for generating initials from name @default 'firstAndLast' */\n  abbreviationStrategy?: AbbreviationStrategy;\n}\n\nconst abbreviationStrategies: Record<\n  Exclude<AbbreviationStrategy, (name: string) => string>,\n  (initials: string[]) => string\n> = {\n  first: (initials) => initials[0] ?? '',\n  last: (initials) => initials[initials.length - 1] ?? '',\n  firstAndLast: (initials) =>\n    initials.length === 1 ? (initials[0] ?? '') : `${initials[0]}${initials[initials.length - 1]}`,\n  firstTwo: (initials) => initials.slice(0, 2).join(''),\n  firstThree: (initials) => initials.slice(0, 3).join(''),\n  firstOfEach: (initials) => initials.join(''),\n};\n\n/** Generate initials from a name */\nfunction generateInitials(name?: string, strategy: AbbreviationStrategy = 'firstAndLast'): string {\n  if (!name) {\n    return '';\n  }\n\n  if (typeof strategy === 'function') {\n    return strategy(name);\n  }\n\n  const words = name.trim().split(/\\s+/);\n  const initials = words.map((word) => word[0]?.toUpperCase() ?? '');\n\n  return abbreviationStrategies[strategy](initials);\n}\n\n/**\n * **Avatar component for user representation**\n *\n * @description\n * Displays a user avatar with image, initials fallback, or icon fallback.\n *\n * @example\n * ```tsx\n * import { Avatar } from '@yahoo/uds-mobile';\n *\n * // With image\n * <Avatar\n *   src=\"https://example.com/photo.jpg\"\n *   alt=\"Jane Doe\"\n * />\n *\n * // With initials fallback\n * <Avatar alt=\"Jane Doe\" />\n *\n * // With explicit initials\n * <Avatar fallback=\"JD\" />\n *\n * // With custom icon\n * <Avatar icon=\"Person\" variant=\"secondary\" />\n * ```\n *\n * @see The {@link https://uds.build/docs/components/avatar Avatar Docs} for more info\n */\nconst Avatar = forwardRef<View, AvatarProps>(function Avatar(\n  {\n    src,\n    alt,\n    fallback,\n    size = 'md',\n    variant = 'primary',\n    icon,\n    abbreviationStrategy = 'firstAndLast',\n    style,\n    ...props\n  },\n  ref,\n) {\n  const [imageError, setImageError] = useState(false);\n\n  const initials = fallback || generateInitials(alt, abbreviationStrategy);\n\n  const hasImage = src && !imageError;\n  const hasText = initials.length > 0;\n  const showImage = hasImage;\n  const showText = !hasImage && hasText;\n  const showIcon = !hasImage && !hasText;\n\n  avatarStyles.useVariants({\n    size,\n    image: variant,\n    text: variant,\n    icon: variant,\n  });\n\n  return (\n    <Box\n      ref={ref}\n      style={[\n        avatarStyles.root,\n        { alignItems: 'center', justifyContent: 'center', overflow: 'hidden' },\n        style,\n      ]}\n      accessibilityRole=\"image\"\n      accessibilityLabel={alt}\n      {...props}\n    >\n      {showImage && (\n        <RNImage\n          source={{ uri: src }}\n          style={{ width: '100%', height: '100%' }}\n          onError={() => setImageError(true)}\n          accessibilityLabel={alt}\n        />\n      )}\n\n      {showText && (\n        <Text style={avatarStyles.text} numberOfLines={1}>\n          {initials}\n        </Text>\n      )}\n\n      {showIcon && <IconSlot icon={icon ?? 'Person'} variant=\"fill\" style={avatarStyles.icon} />}\n    </Box>\n  );\n});\n\nAvatar.displayName = 'Avatar';\n\nexport { Avatar, type AvatarProps };\n"],"mappings":";;;;;;;;;;AA2CA,MAAMA,yBAGF;CACF,QAAQ,aAAa,SAAS,MAAM;CACpC,OAAO,aAAa,SAAS,SAAS,SAAS,MAAM;CACrD,eAAe,aACb,SAAS,WAAW,IAAK,SAAS,MAAM,KAAM,GAAG,SAAS,KAAK,SAAS,SAAS,SAAS;CAC5F,WAAW,aAAa,SAAS,MAAM,GAAG,EAAE,CAAC,KAAK,GAAG;CACrD,aAAa,aAAa,SAAS,MAAM,GAAG,EAAE,CAAC,KAAK,GAAG;CACvD,cAAc,aAAa,SAAS,KAAK,GAAG;CAC7C;;AAGD,SAAS,iBAAiB,MAAe,WAAiC,gBAAwB;AAChG,KAAI,CAAC,KACH,QAAO;AAGT,KAAI,OAAO,aAAa,WACtB,QAAO,SAAS,KAAK;CAIvB,MAAM,WADQ,KAAK,MAAM,CAAC,MAAM,MAAM,CACf,KAAK,SAAS,KAAK,IAAI,aAAa,IAAI,GAAG;AAElE,QAAO,uBAAuB,UAAU,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BnD,MAAM,SAAS,WAA8B,SAASC,SACpD,EACE,KACA,KACA,UACA,OAAO,MACP,UAAU,WACV,MACA,uBAAuB,gBACvB,OACA,GAAG,SAEL,KACA;CACA,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAEnD,MAAM,WAAW,YAAY,iBAAiB,KAAK,qBAAqB;CAExE,MAAM,WAAW,OAAO,CAAC;CACzB,MAAM,UAAU,SAAS,SAAS;CAClC,MAAM,YAAY;CAClB,MAAM,WAAW,CAAC,YAAY;CAC9B,MAAM,WAAW,CAAC,YAAY,CAAC;AAE/B,cAAa,YAAY;EACvB;EACA,OAAO;EACP,MAAM;EACN,MAAM;EACP,CAAC;AAEF,QACE,qBAAC;EACM;EACL,OAAO;GACL,aAAa;GACb;IAAE,YAAY;IAAU,gBAAgB;IAAU,UAAU;IAAU;GACtE;GACD;EACD,mBAAkB;EAClB,oBAAoB;EACpB,GAAI;;GAEH,aACC,oBAACC;IACC,QAAQ,EAAE,KAAK,KAAK;IACpB,OAAO;KAAE,OAAO;KAAQ,QAAQ;KAAQ;IACxC,eAAe,cAAc,KAAK;IAClC,oBAAoB;KACpB;GAGH,YACC,oBAACC;IAAK,OAAO,aAAa;IAAM,eAAe;cAC5C;KACI;GAGR,YAAY,oBAAC;IAAS,MAAM,QAAQ;IAAU,SAAQ;IAAO,OAAO,aAAa;KAAQ;;GACtF;EAER;AAEF,OAAO,cAAc"}
+{"version":3,"file":"Avatar.mjs","names":["RNImage","Text"],"sources":["../../src/components/Avatar.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react';\nimport type { View, ViewProps } from 'react-native';\nimport { Image as RNImage } from 'react-native';\n\nimport { avatarStyles } from '../../generated/styles';\nimport { Box } from './Box';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Text } from './Text';\n\n/** Avatar size options */\ntype AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Avatar variant options */\ntype AvatarVariant = 'primary' | 'secondary';\n\n/** Abbreviation strategy for generating initials */\ntype AbbreviationStrategy =\n  | 'first'\n  | 'last'\n  | 'firstAndLast'\n  | 'firstTwo'\n  | 'firstThree'\n  | 'firstOfEach'\n  | ((name: string) => string);\n\ninterface AvatarProps extends ViewProps {\n  /** Image source URL */\n  src?: string;\n  /** Alt text for the image, also used for generating initials */\n  alt?: string;\n  /** Explicit initials to display (overrides auto-generated from alt) */\n  fallback?: string;\n  /** Size of the avatar @default 'md' */\n  size?: AvatarSize;\n  /** Variant style @default 'primary' */\n  variant?: AvatarVariant;\n  /** Custom icon to display when no image or text fallback */\n  icon?: IconSlotType;\n  /** Strategy for generating initials from name @default 'firstAndLast' */\n  abbreviationStrategy?: AbbreviationStrategy;\n}\n\nconst abbreviationStrategies: Record<\n  Exclude<AbbreviationStrategy, (name: string) => string>,\n  (initials: string[]) => string\n> = {\n  first: (initials) => initials[0] ?? '',\n  last: (initials) => initials[initials.length - 1] ?? '',\n  firstAndLast: (initials) =>\n    initials.length === 1 ? (initials[0] ?? '') : `${initials[0]}${initials[initials.length - 1]}`,\n  firstTwo: (initials) => initials.slice(0, 2).join(''),\n  firstThree: (initials) => initials.slice(0, 3).join(''),\n  firstOfEach: (initials) => initials.join(''),\n};\n\n/** Generate initials from a name */\nfunction generateInitials(name?: string, strategy: AbbreviationStrategy = 'firstAndLast'): string {\n  if (!name) {\n    return '';\n  }\n\n  if (typeof strategy === 'function') {\n    return strategy(name);\n  }\n\n  const words = name.trim().split(/\\s+/);\n  const initials = words.map((word) => word[0]?.toUpperCase() ?? '');\n\n  return abbreviationStrategies[strategy](initials);\n}\n\n/**\n * **Avatar component for user representation**\n *\n * @description\n * Displays a user avatar with image, initials fallback, or icon fallback.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Avatar } from '@yahoo/uds-mobile';\n *\n * // With image\n * <Avatar\n *   src=\"https://example.com/photo.jpg\"\n *   alt=\"Jane Doe\"\n * />\n *\n * // With initials fallback\n * <Avatar alt=\"Jane Doe\" />\n *\n * // With explicit initials\n * <Avatar fallback=\"JD\" />\n *\n * // With custom icon\n * <Avatar icon=\"Person\" variant=\"secondary\" />\n * ```\n *\n * @accessibility\n * - Sets `accessibilityRole=\"image\"` automatically\n * - Uses `alt` prop as accessibility label\n * - Always provide meaningful `alt` text for user identification\n *\n * @see {@link Image} for general image display\n */\nconst Avatar = forwardRef<View, AvatarProps>(function Avatar(\n  {\n    src,\n    alt,\n    fallback,\n    size = 'md',\n    variant = 'primary',\n    icon,\n    abbreviationStrategy = 'firstAndLast',\n    style,\n    ...props\n  },\n  ref,\n) {\n  const [imageError, setImageError] = useState(false);\n\n  const initials = fallback || generateInitials(alt, abbreviationStrategy);\n\n  const hasImage = src && !imageError;\n  const hasText = initials.length > 0;\n  const showImage = hasImage;\n  const showText = !hasImage && hasText;\n  const showIcon = !hasImage && !hasText;\n\n  avatarStyles.useVariants({\n    size,\n    image: variant,\n    text: variant,\n    icon: variant,\n  });\n\n  return (\n    <Box\n      ref={ref}\n      style={[\n        avatarStyles.root,\n        { alignItems: 'center', justifyContent: 'center', overflow: 'hidden' },\n        style,\n      ]}\n      accessibilityRole=\"image\"\n      accessibilityLabel={alt}\n      {...props}\n    >\n      {showImage && (\n        <RNImage\n          source={{ uri: src }}\n          style={{ width: '100%', height: '100%' }}\n          onError={() => setImageError(true)}\n          accessibilityLabel={alt}\n        />\n      )}\n\n      {showText && (\n        <Text style={avatarStyles.text} numberOfLines={1}>\n          {initials}\n        </Text>\n      )}\n\n      {showIcon && <IconSlot icon={icon ?? 'Person'} variant=\"fill\" style={avatarStyles.icon} />}\n    </Box>\n  );\n});\n\nAvatar.displayName = 'Avatar';\n\nexport { Avatar, type AvatarProps };\n"],"mappings":";;;;;;;;;;AA2CA,MAAM,yBAGF;CACF,QAAQ,aAAa,SAAS,MAAM;CACpC,OAAO,aAAa,SAAS,SAAS,SAAS,MAAM;CACrD,eAAe,aACb,SAAS,WAAW,IAAK,SAAS,MAAM,KAAM,GAAG,SAAS,KAAK,SAAS,SAAS,SAAS;CAC5F,WAAW,aAAa,SAAS,MAAM,GAAG,EAAE,CAAC,KAAK,GAAG;CACrD,aAAa,aAAa,SAAS,MAAM,GAAG,EAAE,CAAC,KAAK,GAAG;CACvD,cAAc,aAAa,SAAS,KAAK,GAAG;CAC7C;;AAGD,SAAS,iBAAiB,MAAe,WAAiC,gBAAwB;AAChG,KAAI,CAAC,KACH,QAAO;AAGT,KAAI,OAAO,aAAa,WACtB,QAAO,SAAS,KAAK;CAIvB,MAAM,WADQ,KAAK,MAAM,CAAC,MAAM,MAAM,CACf,KAAK,SAAS,KAAK,IAAI,aAAa,IAAI,GAAG;AAElE,QAAO,uBAAuB,UAAU,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCnD,MAAM,SAAS,WAA8B,SAAS,OACpD,EACE,KACA,KACA,UACA,OAAO,MACP,UAAU,WACV,MACA,uBAAuB,gBACvB,OACA,GAAG,SAEL,KACA;CACA,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAEnD,MAAM,WAAW,YAAY,iBAAiB,KAAK,qBAAqB;CAExE,MAAM,WAAW,OAAO,CAAC;CACzB,MAAM,UAAU,SAAS,SAAS;CAClC,MAAM,YAAY;CAClB,MAAM,WAAW,CAAC,YAAY;CAC9B,MAAM,WAAW,CAAC,YAAY,CAAC;AAE/B,cAAa,YAAY;EACvB;EACA,OAAO;EACP,MAAM;EACN,MAAM;EACP,CAAC;AAEF,QACE,qBAAC;EACM;EACL,OAAO;GACL,aAAa;GACb;IAAE,YAAY;IAAU,gBAAgB;IAAU,UAAU;IAAU;GACtE;GACD;EACD,mBAAkB;EAClB,oBAAoB;EACpB,GAAI;;GAEH,aACC,oBAACA;IACC,QAAQ,EAAE,KAAK,KAAK;IACpB,OAAO;KAAE,OAAO;KAAQ,QAAQ;KAAQ;IACxC,eAAe,cAAc,KAAK;IAClC,oBAAoB;KACpB;GAGH,YACC,oBAACC;IAAK,OAAO,aAAa;IAAM,eAAe;cAC5C;KACI;GAGR,YAAY,oBAAC;IAAS,MAAM,QAAQ;IAAU,SAAQ;IAAO,OAAO,aAAa;KAAQ;;GACtF;EAER;AAEF,OAAO,cAAc"}

package/dist/components/Badge.cjs

@@ -1,5 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
 const require_components_IconSlot = require('./IconSlot.cjs');
 const require_components_Text = require('./Text.cjs');
 const require_components_HStack = require('./HStack.cjs');
@@ -14,16 +15,26 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * @description
 * Badges show notifications, counts, or status information on navigation items and icons.
 *
+* @category Display
+* @platform mobile
+*
 * @example
 * ```tsx
-* import { Badge } from '~/components/ui/Badge';
+* import { Badge } from '@yahoo/uds-mobile';
 *
 * <Badge>Label</Badge>
 * <Badge variant="brand" size="sm">New</Badge>
 * <Badge variant="alert" startIcon="Warning">Error</Badge>
 * ```
+*
+* @accessibility
+* - Badge content is read by screen readers
+* - Use descriptive text for status indicators
+* - Consider `accessibilityLabel` for icon-only badges
+*
+* @see {@link Chip} for interactive tag-like elements
 */
-const Badge = (0, react.memo)(function Badge$1({ variant = "primary", size = "md", minWidth, maxWidth = 200, startIcon, endIcon, dangerouslySetBackgroundColor, dangerouslySetColor, dangerouslySetIconColor, dangerouslySetBorderColor, children, style, ref, ...rest }) {
+const Badge = (0, react.memo)(function Badge({ variant = "primary", size = "md", minWidth, maxWidth = 200, startIcon, endIcon, dangerouslySetBackgroundColor, dangerouslySetColor, dangerouslySetIconColor, dangerouslySetBorderColor, children, style, ref, ...rest }) {
 	generated_styles.badgeStyles.useVariants({
 		size,
 		variant

package/dist/components/Badge.d.cts

@@ -1,25 +1,33 @@
 
 import { BadgeSize, BadgeVariant } from "../types/dist/index.cjs";
 import { IconSlotType } from "./IconSlot.cjs";
-import * as react1 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 
 //#region src/components/Badge.d.ts
 interface BadgeProps extends ViewProps {
-  /** @default 'primary' */
+  /** The visual style variant of the badge. @default 'primary' */
   variant?: BadgeVariant;
-  /** @default 'md' */
+  /** The size of the badge. @default 'md' */
   size?: BadgeSize;
+  /** Minimum width of the badge in pixels. */
   minWidth?: number;
-  /** @default 200 */
+  /** Maximum width of the badge in pixels. @default 200 */
   maxWidth?: number;
+  /** Icon to display at the start of the badge. */
   startIcon?: IconSlotType;
+  /** Icon to display at the end of the badge. */
   endIcon?: IconSlotType;
+  /** Override the background color. Use sparingly. */
   dangerouslySetBackgroundColor?: string;
+  /** Override the text color. Use sparingly. */
   dangerouslySetColor?: string;
+  /** Override the border color. Use sparingly. */
   dangerouslySetBorderColor?: string;
+  /** Override the icon color. Use sparingly. */
   dangerouslySetIconColor?: string;
+  /** Ref to the underlying View component. */
   ref?: Ref<View>;
 }
 /**
@@ -28,16 +36,26 @@ interface BadgeProps extends ViewProps {
  * @description
  * Badges show notifications, counts, or status information on navigation items and icons.
  *
+ * @category Display
+ * @platform mobile
+ *
  * @example
  * ```tsx
- * import { Badge } from '~/components/ui/Badge';
+ * import { Badge } from '@yahoo/uds-mobile';
  *
  * <Badge>Label</Badge>
  * <Badge variant="brand" size="sm">New</Badge>
  * <Badge variant="alert" startIcon="Warning">Error</Badge>
  * ```
+ *
+ * @accessibility
+ * - Badge content is read by screen readers
+ * - Use descriptive text for status indicators
+ * - Consider `accessibilityLabel` for icon-only badges
+ *
+ * @see {@link Chip} for interactive tag-like elements
  */
-declare const Badge: react1.NamedExoticComponent<BadgeProps>;
+declare const Badge: react.NamedExoticComponent<BadgeProps>;
 //#endregion
 export { Badge, type BadgeProps };
 //# sourceMappingURL=Badge.d.cts.map

package/dist/components/Badge.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.cts","names":[],"sources":["../../src/components/Badge.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UAWU,UAAA,SAAmB;;YAEjB;EAFF;EAEE,IAAA,CAAA,EAEH,SAFG;EAEH,QAAA,CAAA,EAAA,MAAA;EAIK;EACF,QAAA,CAAA,EAAA,MAAA;EAKA,SAAA,CAAA,EANE,YAMF;EAAJ,OAAA,CAAA,EALI,YAKJ;EAdqB,6BAAA,CAAA,EAAA,MAAA;EAAS,mBAAA,CAAA,EAAA,MAAA;EAgChC,yBAAK,CAAA,EAAA,MAAA;;QAlBH,IAAI;;;;;;;;;;;;;;;;;cAkBN,OAAK,MAAA,CAAA,qBAAA"}
+{"version":3,"file":"Badge.d.cts","names":[],"sources":["../../src/components/Badge.tsx"],"mappings":";;;;;;;;UAWU,UAAA,SAAmB,SAAA;;EAE3B,OAAA,GAAU,YAAA;EAFF;EAIR,IAAA,GAAO,SAAA;;EAEP,QAAA;EAFO;EAIP,QAAA;EAIU;EAFV,SAAA,GAAY,YAAA;EAYN;EAVN,OAAA,GAAU,YAAA;EAZ0B;EAcpC,6BAAA;EAd2B;EAgB3B,mBAAA;EAdU;EAgBV,yBAAA;EAdO;EAgBP,uBAAA;EAZA;EAcA,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;AAAI;;;;;;;;;;;;;;cA4BV,KAAA,EAAK,KAAA,CAAA,oBAAA,CAAA,UAAA"}

package/dist/components/Badge.d.mts

@@ -1,25 +1,33 @@
 
 import { BadgeSize, BadgeVariant } from "../types/dist/index.mjs";
 import { IconSlotType } from "./IconSlot.mjs";
-import * as react17 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 
 //#region src/components/Badge.d.ts
 interface BadgeProps extends ViewProps {
-  /** @default 'primary' */
+  /** The visual style variant of the badge. @default 'primary' */
   variant?: BadgeVariant;
-  /** @default 'md' */
+  /** The size of the badge. @default 'md' */
   size?: BadgeSize;
+  /** Minimum width of the badge in pixels. */
   minWidth?: number;
-  /** @default 200 */
+  /** Maximum width of the badge in pixels. @default 200 */
   maxWidth?: number;
+  /** Icon to display at the start of the badge. */
   startIcon?: IconSlotType;
+  /** Icon to display at the end of the badge. */
   endIcon?: IconSlotType;
+  /** Override the background color. Use sparingly. */
   dangerouslySetBackgroundColor?: string;
+  /** Override the text color. Use sparingly. */
   dangerouslySetColor?: string;
+  /** Override the border color. Use sparingly. */
   dangerouslySetBorderColor?: string;
+  /** Override the icon color. Use sparingly. */
   dangerouslySetIconColor?: string;
+  /** Ref to the underlying View component. */
   ref?: Ref<View>;
 }
 /**
@@ -28,16 +36,26 @@ interface BadgeProps extends ViewProps {
  * @description
  * Badges show notifications, counts, or status information on navigation items and icons.
  *
+ * @category Display
+ * @platform mobile
+ *
  * @example
  * ```tsx
- * import { Badge } from '~/components/ui/Badge';
+ * import { Badge } from '@yahoo/uds-mobile';
  *
  * <Badge>Label</Badge>
  * <Badge variant="brand" size="sm">New</Badge>
  * <Badge variant="alert" startIcon="Warning">Error</Badge>
  * ```
+ *
+ * @accessibility
+ * - Badge content is read by screen readers
+ * - Use descriptive text for status indicators
+ * - Consider `accessibilityLabel` for icon-only badges
+ *
+ * @see {@link Chip} for interactive tag-like elements
  */
-declare const Badge: react17.NamedExoticComponent<BadgeProps>;
+declare const Badge: react.NamedExoticComponent<BadgeProps>;
 //#endregion
 export { Badge, type BadgeProps };
 //# sourceMappingURL=Badge.d.mts.map

package/dist/components/Badge.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.mts","names":[],"sources":["../../src/components/Badge.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UAWU,UAAA,SAAmB;;YAEjB;EAFF;EAEE,IAAA,CAAA,EAEH,SAFG;EAEH,QAAA,CAAA,EAAA,MAAA;EAIK;EACF,QAAA,CAAA,EAAA,MAAA;EAKA,SAAA,CAAA,EANE,YAMF;EAAJ,OAAA,CAAA,EALI,YAKJ;EAdqB,6BAAA,CAAA,EAAA,MAAA;EAAS,mBAAA,CAAA,EAAA,MAAA;EAgChC,yBAAK,CAAA,EAAA,MAAA;;QAlBH,IAAI;;;;;;;;;;;;;;;;;cAkBN,OAAK,OAAA,CAAA,qBAAA"}
+{"version":3,"file":"Badge.d.mts","names":[],"sources":["../../src/components/Badge.tsx"],"mappings":";;;;;;;;UAWU,UAAA,SAAmB,SAAA;;EAE3B,OAAA,GAAU,YAAA;EAFF;EAIR,IAAA,GAAO,SAAA;;EAEP,QAAA;EAFO;EAIP,QAAA;EAIU;EAFV,SAAA,GAAY,YAAA;EAYN;EAVN,OAAA,GAAU,YAAA;EAZ0B;EAcpC,6BAAA;EAd2B;EAgB3B,mBAAA;EAdU;EAgBV,yBAAA;EAdO;EAgBP,uBAAA;EAZA;EAcA,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;AAAI;;;;;;;;;;;;;;cA4BV,KAAA,EAAK,KAAA,CAAA,oBAAA,CAAA,UAAA"}

package/dist/components/Badge.mjs

@@ -13,16 +13,26 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * @description
 * Badges show notifications, counts, or status information on navigation items and icons.
 *
+* @category Display
+* @platform mobile
+*
 * @example
 * ```tsx
-* import { Badge } from '~/components/ui/Badge';
+* import { Badge } from '@yahoo/uds-mobile';
 *
 * <Badge>Label</Badge>
 * <Badge variant="brand" size="sm">New</Badge>
 * <Badge variant="alert" startIcon="Warning">Error</Badge>
 * ```
+*
+* @accessibility
+* - Badge content is read by screen readers
+* - Use descriptive text for status indicators
+* - Consider `accessibilityLabel` for icon-only badges
+*
+* @see {@link Chip} for interactive tag-like elements
 */
-const Badge = memo(function Badge$1({ variant = "primary", size = "md", minWidth, maxWidth = 200, startIcon, endIcon, dangerouslySetBackgroundColor, dangerouslySetColor, dangerouslySetIconColor, dangerouslySetBorderColor, children, style, ref, ...rest }) {
+const Badge = memo(function Badge({ variant = "primary", size = "md", minWidth, maxWidth = 200, startIcon, endIcon, dangerouslySetBackgroundColor, dangerouslySetColor, dangerouslySetIconColor, dangerouslySetBorderColor, children, style, ref, ...rest }) {
 	badgeStyles.useVariants({
 		size,
 		variant

package/dist/components/Badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.mjs","names":["Badge"],"sources":["../../src/components/Badge.tsx"],"sourcesContent":["import type { BadgeSize, BadgeVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { View, ViewProps } from 'react-native';\n\nimport { badgeStyles } from '../../generated/styles';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Text } from './Text';\n\ninterface BadgeProps extends ViewProps {\n  /** @default 'primary' */\n  variant?: BadgeVariant;\n  /** @default 'md' */\n  size?: BadgeSize;\n  minWidth?: number;\n  /** @default 200 */\n  maxWidth?: number;\n  startIcon?: IconSlotType;\n  endIcon?: IconSlotType;\n  dangerouslySetBackgroundColor?: string;\n  dangerouslySetColor?: string;\n  dangerouslySetBorderColor?: string;\n  dangerouslySetIconColor?: string;\n  ref?: Ref<View>;\n}\n\n/**\n * **A badge component for status indicators**\n *\n * @description\n * Badges show notifications, counts, or status information on navigation items and icons.\n *\n * @example\n * ```tsx\n * import { Badge } from '~/components/ui/Badge';\n *\n * <Badge>Label</Badge>\n * <Badge variant=\"brand\" size=\"sm\">New</Badge>\n * <Badge variant=\"alert\" startIcon=\"Warning\">Error</Badge>\n * ```\n */\nconst Badge = memo(function Badge({\n  variant = 'primary',\n  size = 'md',\n  minWidth,\n  maxWidth = 200,\n  startIcon,\n  endIcon,\n  dangerouslySetBackgroundColor,\n  dangerouslySetColor,\n  dangerouslySetIconColor,\n  dangerouslySetBorderColor,\n  children,\n  style,\n  ref,\n  ...rest\n}: BadgeProps) {\n  badgeStyles.useVariants({ size, variant });\n  const rootStyles = useMemo(() => [badgeStyles.root, style], [style, badgeStyles.root]);\n\n  return (\n    <HStack\n      ref={ref}\n      alignItems=\"center\"\n      overflow=\"hidden\"\n      alignSelf=\"flex-start\"\n      maxWidth={maxWidth}\n      minWidth={minWidth}\n      dangerouslySetBackgroundColor={dangerouslySetBackgroundColor}\n      dangerouslySetBorderColor={dangerouslySetBorderColor}\n      // Cannot memoize - styles contain theme-reactive values\n      style={rootStyles}\n      {...rest}\n    >\n      {startIcon && (\n        <IconSlot\n          icon={startIcon}\n          variant=\"fill\"\n          dangerouslySetColor={dangerouslySetIconColor}\n          style={badgeStyles.icon}\n        />\n      )}\n      <Text\n        numberOfLines={1}\n        flexShrink=\"1\"\n        dangerouslySetColor={dangerouslySetColor}\n        style={badgeStyles.text}\n      >\n        {children}\n      </Text>\n      {endIcon && (\n        <IconSlot\n          icon={endIcon}\n          variant=\"fill\"\n          dangerouslySetColor={dangerouslySetIconColor}\n          style={badgeStyles.icon}\n        />\n      )}\n    </HStack>\n  );\n});\n\nBadge.displayName = 'Badge';\n\nexport { Badge, type BadgeProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,QAAQ,KAAK,SAASA,QAAM,EAChC,UAAU,WACV,OAAO,MACP,UACA,WAAW,KACX,WACA,SACA,+BACA,qBACA,yBACA,2BACA,UACA,OACA,KACA,GAAG,QACU;AACb,aAAY,YAAY;EAAE;EAAM;EAAS,CAAC;AAG1C,QACE,qBAAC;EACM;EACL,YAAW;EACX,UAAS;EACT,WAAU;EACA;EACA;EACqB;EACJ;EAE3B,OAbe,cAAc,CAAC,YAAY,MAAM,MAAM,EAAE,CAAC,OAAO,YAAY,KAAK,CAAC;EAclF,GAAI;;GAEH,aACC,oBAAC;IACC,MAAM;IACN,SAAQ;IACR,qBAAqB;IACrB,OAAO,YAAY;KACnB;GAEJ,oBAAC;IACC,eAAe;IACf,YAAW;IACU;IACrB,OAAO,YAAY;IAElB;KACI;GACN,WACC,oBAAC;IACC,MAAM;IACN,SAAQ;IACR,qBAAqB;IACrB,OAAO,YAAY;KACnB;;GAEG;EAEX;AAEF,MAAM,cAAc"}
+{"version":3,"file":"Badge.mjs","names":[],"sources":["../../src/components/Badge.tsx"],"sourcesContent":["import type { BadgeSize, BadgeVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { View, ViewProps } from 'react-native';\n\nimport { badgeStyles } from '../../generated/styles';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Text } from './Text';\n\ninterface BadgeProps extends ViewProps {\n  /** The visual style variant of the badge. @default 'primary' */\n  variant?: BadgeVariant;\n  /** The size of the badge. @default 'md' */\n  size?: BadgeSize;\n  /** Minimum width of the badge in pixels. */\n  minWidth?: number;\n  /** Maximum width of the badge in pixels. @default 200 */\n  maxWidth?: number;\n  /** Icon to display at the start of the badge. */\n  startIcon?: IconSlotType;\n  /** Icon to display at the end of the badge. */\n  endIcon?: IconSlotType;\n  /** Override the background color. Use sparingly. */\n  dangerouslySetBackgroundColor?: string;\n  /** Override the text color. Use sparingly. */\n  dangerouslySetColor?: string;\n  /** Override the border color. Use sparingly. */\n  dangerouslySetBorderColor?: string;\n  /** Override the icon color. Use sparingly. */\n  dangerouslySetIconColor?: string;\n  /** Ref to the underlying View component. */\n  ref?: Ref<View>;\n}\n\n/**\n * **A badge component for status indicators**\n *\n * @description\n * Badges show notifications, counts, or status information on navigation items and icons.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Badge } from '@yahoo/uds-mobile';\n *\n * <Badge>Label</Badge>\n * <Badge variant=\"brand\" size=\"sm\">New</Badge>\n * <Badge variant=\"alert\" startIcon=\"Warning\">Error</Badge>\n * ```\n *\n * @accessibility\n * - Badge content is read by screen readers\n * - Use descriptive text for status indicators\n * - Consider `accessibilityLabel` for icon-only badges\n *\n * @see {@link Chip} for interactive tag-like elements\n */\nconst Badge = memo(function Badge({\n  variant = 'primary',\n  size = 'md',\n  minWidth,\n  maxWidth = 200,\n  startIcon,\n  endIcon,\n  dangerouslySetBackgroundColor,\n  dangerouslySetColor,\n  dangerouslySetIconColor,\n  dangerouslySetBorderColor,\n  children,\n  style,\n  ref,\n  ...rest\n}: BadgeProps) {\n  badgeStyles.useVariants({ size, variant });\n  const rootStyles = useMemo(() => [badgeStyles.root, style], [style, badgeStyles.root]);\n\n  return (\n    <HStack\n      ref={ref}\n      alignItems=\"center\"\n      overflow=\"hidden\"\n      alignSelf=\"flex-start\"\n      maxWidth={maxWidth}\n      minWidth={minWidth}\n      dangerouslySetBackgroundColor={dangerouslySetBackgroundColor}\n      dangerouslySetBorderColor={dangerouslySetBorderColor}\n      // Cannot memoize - styles contain theme-reactive values\n      style={rootStyles}\n      {...rest}\n    >\n      {startIcon && (\n        <IconSlot\n          icon={startIcon}\n          variant=\"fill\"\n          dangerouslySetColor={dangerouslySetIconColor}\n          style={badgeStyles.icon}\n        />\n      )}\n      <Text\n        numberOfLines={1}\n        flexShrink=\"1\"\n        dangerouslySetColor={dangerouslySetColor}\n        style={badgeStyles.text}\n      >\n        {children}\n      </Text>\n      {endIcon && (\n        <IconSlot\n          icon={endIcon}\n          variant=\"fill\"\n          dangerouslySetColor={dangerouslySetIconColor}\n          style={badgeStyles.icon}\n        />\n      )}\n    </HStack>\n  );\n});\n\nBadge.displayName = 'Badge';\n\nexport { Badge, type BadgeProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,MAAM,QAAQ,KAAK,SAAS,MAAM,EAChC,UAAU,WACV,OAAO,MACP,UACA,WAAW,KACX,WACA,SACA,+BACA,qBACA,yBACA,2BACA,UACA,OACA,KACA,GAAG,QACU;AACb,aAAY,YAAY;EAAE;EAAM;EAAS,CAAC;AAG1C,QACE,qBAAC;EACM;EACL,YAAW;EACX,UAAS;EACT,WAAU;EACA;EACA;EACqB;EACJ;EAE3B,OAbe,cAAc,CAAC,YAAY,MAAM,MAAM,EAAE,CAAC,OAAO,YAAY,KAAK,CAAC;EAclF,GAAI;;GAEH,aACC,oBAAC;IACC,MAAM;IACN,SAAQ;IACR,qBAAqB;IACrB,OAAO,YAAY;KACnB;GAEJ,oBAAC;IACC,eAAe;IACf,YAAW;IACU;IACrB,OAAO,YAAY;IAElB;KACI;GACN,WACC,oBAAC;IACC,MAAM;IACN,SAAQ;IACR,qBAAqB;IACrB,OAAO,YAAY;KACnB;;GAEG;EAEX;AAEF,MAAM,cAAc"}

package/dist/components/Box.cjs

@@ -1,5 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
 let react = require("react");
 let react_native = require("react-native");
 let generated_styles = require("../../generated/styles");
@@ -10,13 +11,16 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * **📦 A layout component that can be used to compose other components**
 *
 * @description
-* The most simple component we ship - a div. But with all the power of the UDS design system.
+* The most simple component we ship - a View. But with all the power of the UDS design system.
 * By default, `Box` is a flexbox container. When working with vertical or horizontal layouts,
-* consider using [VStack](./v-stack) or [HStack](./h-stack) respectively.
+* consider using VStack or HStack respectively.
+*
+* @category Layout
+* @platform mobile
 *
 * @example
 * ```tsx
-* import { Box } from '@yahoo/uds-mobile/Box';
+* import { Box } from '@yahoo/uds-mobile';
 *
 * <Box backgroundColor="primary" spacing="6">
 *   Any kind of content can go here!
@@ -24,14 +28,14 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * ```
 *
 * @usage
-* - If you need to div-like container to apply padding, shapes, or other styling.
-* - If you're creating card components.
-*
-* @see The {@link https://uds.build/docs/components/box Box Docs} for more info
+* - Use as a container to apply padding, shapes, or other styling
+* - Use for creating card components
+* - Use HStack/VStack for directional layouts
 *
-* @related [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
+* @see {@link HStack} for horizontal layouts
+* @see {@link VStack} for vertical layouts
 */
-const Box = (0, react.memo)(function Box$1({ backgroundColor, dangerouslySetBackgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, dangerouslySetBorderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, display = "flex", overflow, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, width, height, minWidth, maxWidth, minHeight, maxHeight, style, ref, ...props }) {
+const Box = (0, react.memo)(function Box({ backgroundColor, dangerouslySetBackgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, dangerouslySetBorderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, display = "flex", overflow, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, width, height, minWidth, maxWidth, minHeight, maxHeight, style, ref, ...props }) {
 	const variants = {
 		backgroundColor,
 		borderRadius,

package/dist/components/Box.d.cts

@@ -1,13 +1,15 @@
 
 import { SizeProps } from "../types.cjs";
-import * as react2 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 import { StyleProps } from "../../generated/styles";
 
 //#region src/components/Box.d.ts
 interface BoxProps extends ViewProps, SizeProps {
+  /** Ref to the underlying View */
   ref?: Ref<View>;
+  /** Background color from the theme palette */
   backgroundColor?: StyleProps['backgroundColor'];
   borderRadius?: StyleProps['borderRadius'];
   borderTopStartRadius?: StyleProps['borderTopStartRadius'];
@@ -60,13 +62,16 @@ interface BoxProps extends ViewProps, SizeProps {
  * **📦 A layout component that can be used to compose other components**
  *
  * @description
- * The most simple component we ship - a div. But with all the power of the UDS design system.
+ * The most simple component we ship - a View. But with all the power of the UDS design system.
  * By default, `Box` is a flexbox container. When working with vertical or horizontal layouts,
- * consider using [VStack](./v-stack) or [HStack](./h-stack) respectively.
+ * consider using VStack or HStack respectively.
+ *
+ * @category Layout
+ * @platform mobile
  *
  * @example
  * ```tsx
- * import { Box } from '@yahoo/uds-mobile/Box';
+ * import { Box } from '@yahoo/uds-mobile';
  *
  * <Box backgroundColor="primary" spacing="6">
  *   Any kind of content can go here!
@@ -74,14 +79,14 @@ interface BoxProps extends ViewProps, SizeProps {
  * ```
  *
  * @usage
- * - If you need to div-like container to apply padding, shapes, or other styling.
- * - If you're creating card components.
- *
- * @see The {@link https://uds.build/docs/components/box Box Docs} for more info
+ * - Use as a container to apply padding, shapes, or other styling
+ * - Use for creating card components
+ * - Use HStack/VStack for directional layouts
  *
- * @related [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
+ * @see {@link HStack} for horizontal layouts
+ * @see {@link VStack} for vertical layouts
  */
-declare const Box: react2.NamedExoticComponent<BoxProps>;
+declare const Box: react.NamedExoticComponent<BoxProps>;
 //#endregion
 export { Box, type BoxProps };
 //# sourceMappingURL=Box.d.cts.map