@yahoo/uds-mobile 1.0.0

package/dist/bin/uds-mobile.mjs

@@ -0,0 +1,256 @@
+#!/usr/bin/env node
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { pathToFileURL } from "node:url";
+
+//#region bin/uds-mobile.ts
+/**
+* @yahoo/uds-mobile CLI
+*
+* Commands:
+*   sync  - Generate/update theme files from UDS tokens
+*/
+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];
+		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);
+	}
+	return {
+		positional: positional$1,
+		options: options$1
+	};
+}
+const { positional, options } = parseArgs(args);
+const colors = {
+	reset: "\x1B[0m",
+	green: "\x1B[32m",
+	yellow: "\x1B[33m",
+	blue: "\x1B[34m",
+	red: "\x1B[31m",
+	dim: "\x1B[2m"
+};
+function log(message, color = "reset") {
+	console.log(`${colors[color]}${message}${colors.reset}`);
+}
+function logStep(step, description) {
+	console.log(`${colors.green}✓${colors.reset} ${step}: ${colors.dim}${description}${colors.reset}`);
+}
+function logWarning(message) {
+	console.log(`${colors.yellow}⚠${colors.reset} ${message}`);
+}
+function logError(message) {
+	console.log(`${colors.red}✗${colors.reset} ${message}`);
+}
+/**
+* Formats code using Prettier if available.
+*/
+async function formatWithPrettier(content, prettierConfigPath) {
+	try {
+		const prettier = await import("prettier");
+		let prettierConfig = {};
+		if (prettierConfigPath) {
+			const configPath = resolve(process.cwd(), prettierConfigPath);
+			if (existsSync(configPath)) {
+				const configContent = readFileSync(configPath, "utf-8");
+				prettierConfig = JSON.parse(configContent);
+				logStep("Using", `Prettier config: ${prettierConfigPath}`);
+			} else logWarning(`Prettier config not found: ${prettierConfigPath}`);
+		} else {
+			const resolvedConfig = await prettier.resolveConfig(process.cwd());
+			if (resolvedConfig) {
+				prettierConfig = resolvedConfig;
+				logStep("Found", "Prettier config in project");
+			}
+		}
+		return await prettier.format(content, {
+			parser: "typescript",
+			...prettierConfig
+		});
+	} catch {
+		return content;
+	}
+}
+/**
+* Fetches a config from the UDS config API by ID.
+*/
+async function fetchConfigById(configId) {
+	log(`Fetching config: ${configId}`, "dim");
+	const response = await fetch(`https://config.uds.build/api/config?id=${configId}`);
+	if (!response.ok) throw new Error(`Failed to fetch config: ${response.status} ${response.statusText}`);
+	const data = await response.json();
+	if (!data.config) throw new Error(`No config found for ID: ${configId}`);
+	logStep("Fetched", `config from UDS API`);
+	return data.config;
+}
+/**
+* Dynamically imports a config file and finds an export ending with "Config".
+* Similar to how generateConfigs.ts works in @yahoo/uds.
+*/
+async function loadConfigFromFile(configPath) {
+	const absolutePath = resolve(process.cwd(), configPath);
+	if (!existsSync(absolutePath)) throw new Error(`Config file not found: ${configPath}`);
+	const moduleUrl = pathToFileURL(absolutePath).href;
+	log(`Loading config from: ${configPath}`, "dim");
+	const configModule = await import(moduleUrl);
+	for (const key in configModule) if (key.endsWith("Config") || key === "default") {
+		const config = configModule[key];
+		if (config && typeof config === "object") {
+			logStep("Found", `config export: ${key}`);
+			return config;
+		}
+	}
+	for (const name of [
+		"config",
+		"tokens",
+		"theme",
+		"udsConfig"
+	]) if (configModule[name] && typeof configModule[name] === "object") {
+		logStep("Found", `config export: ${name}`);
+		return configModule[name];
+	}
+	throw new Error(`No config export found in ${configPath}. Expected an export ending with "Config" or a default export.`);
+}
+async function runSync(opts = {}) {
+	const cwd = process.cwd();
+	const configId = opts.configId;
+	const configPath = opts.configPath;
+	try {
+		let tokensConfig;
+		let configSource;
+		if (configId) {
+			tokensConfig = await fetchConfigById(configId);
+			configSource = `UDS API (${configId})`;
+		} else if (configPath) {
+			tokensConfig = await loadConfigFromFile(configPath);
+			configSource = configPath;
+		} else {
+			const configLocations = [
+				"uds.config.ts",
+				"uds.config.js",
+				"src/uds.config.ts",
+				"src/uds.config.js"
+			];
+			let foundConfigPath = null;
+			for (const loc of configLocations) if (existsSync(resolve(cwd, loc))) {
+				foundConfigPath = loc;
+				break;
+			}
+			if (foundConfigPath) {
+				tokensConfig = await loadConfigFromFile(foundConfigPath);
+				configSource = foundConfigPath;
+			} else return false;
+		}
+		const outputDir = opts.outputPath ? resolve(cwd, opts.outputPath).replace(/\/[^/]+$/, "") : resolve(cwd, "src/lib");
+		const outputFile = opts.outputPath ? resolve(cwd, opts.outputPath) : resolve(outputDir, "unistyles.uds.ts");
+		if (!existsSync(outputDir)) mkdirSync(outputDir, { recursive: true });
+		const { generateBreakpoints, generateTheme } = await import("./generateTheme.mjs");
+		const config = tokensConfig;
+		const lightTheme = generateTheme(config, "light");
+		const darkTheme = generateTheme(config, "dark");
+		const breakpoints = generateBreakpoints(config);
+		let themeContent = `// AUTO-GENERATED FILE. DO NOT EDIT.
+// Generated by @yahoo/uds-mobile CLI
+// Source: ${configSource}
+// Run "npx uds-mobile sync" to regenerate
+
+export const themes = {
+  light: ${JSON.stringify(lightTheme, null, 2)},
+  dark: ${JSON.stringify(darkTheme, null, 2)},
+};
+
+export const breakpoints = ${JSON.stringify(breakpoints, null, 2)};
+`;
+		themeContent = await formatWithPrettier(themeContent, opts.prettierConfigPath);
+		writeFileSync(outputFile, themeContent);
+		const relativePath = outputFile.replace(cwd + "/", "");
+		if (!opts.silent) logStep("Generated", relativePath);
+		return true;
+	} catch (error) {
+		if (!opts.silent) logError(`Failed to generate theme: ${error}`);
+		throw error;
+	}
+}
+async function syncCommand() {
+	log("\n🎨 Syncing UDS Theme\n", "blue");
+	const configId = options.id;
+	const configPath = positional[0] || options.config;
+	const outputPath = options.output;
+	const prettierConfigPath = options.prettier || options.prettierConfig;
+	try {
+		if (!await runSync({
+			configId,
+			configPath,
+			outputPath,
+			prettierConfigPath
+		})) {
+			logError("No uds.config.ts found in project root.");
+			log("\nPlease provide a config using one of these options:", "yellow");
+			log("  npx uds-mobile sync --id <config-id>   # Fetch config from UDS API");
+			log("  npx uds-mobile sync ./path/to/config   # Use local config file\n");
+			process.exit(1);
+		}
+		log("\n✨ Theme sync complete!\n", "green");
+		log("Restart Metro with: npx expo start --clear\n");
+	} catch (error) {
+		if (String(error).includes("@yahoo/uds")) {
+			log("\nMake sure @yahoo/uds is installed:", "yellow");
+			log("  npm install @yahoo/uds\n");
+		}
+		if (String(error).includes("Config file not found")) {
+			log("\nPlease provide a valid config path:", "yellow");
+			log("  npx uds-mobile sync ./path/to/config.ts\n");
+		}
+		if (String(error).includes("Failed to fetch config")) log("\nCheck that the config ID is valid and you have network access.", "yellow");
+		process.exit(1);
+	}
+}
+function showHelp() {
+	log("\n📦 @yahoo/uds-mobile CLI\n", "blue");
+	log("Usage: npx uds-mobile <command> [options]\n");
+	log("Commands:");
+	log("  sync                        Generate/update theme files from UDS tokens");
+	log("  help                        Show this help message\n");
+	log("Options for sync:");
+	log("  --id <config-id>            Fetch config by ID from UDS API");
+	log("  [config]                    Path to config file (auto-detects uds.config.ts)");
+	log("  --config <path>             Explicit path to config file");
+	log("  --output <path>             Output file path (default: src/lib/unistyles.uds.ts)");
+	log("  --prettier=<path>           Path to Prettier config (auto-detects if not specified)\n");
+	log("Examples:");
+	log("  npx uds-mobile sync --id abc123              # Fetch config from UDS API");
+	log("  npx uds-mobile sync ./uds.config.ts          # Use specific config file");
+	log("  npx uds-mobile sync --output ./src/theme.ts  # Custom output location\n");
+}
+async function main() {
+	switch (command) {
+		case "sync":
+			await syncCommand();
+			break;
+		case "help":
+		case "--help":
+		case "-h":
+		case void 0:
+			showHelp();
+			break;
+		default:
+			logError(`Unknown command: ${command}`);
+			showHelp();
+			process.exit(1);
+	}
+}
+main().catch((error) => {
+	logError(`Error: ${error.message}`);
+	process.exit(1);
+});
+
+//#endregion
+export {  };

package/dist/components/Avatar.cjs

@@ -0,0 +1,109 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+const require_rolldown_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');
+let react = require("react");
+let react_native = require("react-native");
+let generated_styles = require("../../generated/styles");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Avatar.tsx
+const abbreviationStrategies = {
+	first: (initials) => initials[0] ?? "",
+	last: (initials) => initials[initials.length - 1] ?? "",
+	firstAndLast: (initials) => initials.length === 1 ? initials[0] ?? "" : `${initials[0]}${initials[initials.length - 1]}`,
+	firstTwo: (initials) => initials.slice(0, 2).join(""),
+	firstThree: (initials) => initials.slice(0, 3).join(""),
+	firstOfEach: (initials) => initials.join("")
+};
+/** Generate initials from a name */
+function generateInitials(name, strategy = "firstAndLast") {
+	if (!name) return "";
+	if (typeof strategy === "function") return strategy(name);
+	const initials = name.trim().split(/\s+/).map((word) => word[0]?.toUpperCase() ?? "");
+	return abbreviationStrategies[strategy](initials);
+}
+/**
+* **Avatar component for user representation**
+*
+* @description
+* Displays a user avatar with image, initials fallback, or icon fallback.
+*
+* @example
+* ```tsx
+* import { Avatar } from '@yahoo/uds-mobile';
+*
+* // With image
+* <Avatar
+*   src="https://example.com/photo.jpg"
+*   alt="Jane Doe"
+* />
+*
+* // With initials fallback
+* <Avatar alt="Jane Doe" />
+*
+* // With explicit initials
+* <Avatar fallback="JD" />
+*
+* // With custom icon
+* <Avatar icon="Person" variant="secondary" />
+* ```
+*
+* @see The {@link https://uds.build/docs/components/avatar Avatar Docs} for more info
+*/
+const Avatar = (0, react.forwardRef)(function Avatar$1({ 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;
+	const hasText = initials.length > 0;
+	const showImage = hasImage;
+	const showText = !hasImage && hasText;
+	const showIcon = !hasImage && !hasText;
+	generated_styles.avatarStyles.useVariants({
+		size,
+		image: variant,
+		text: variant,
+		icon: variant
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
+		ref,
+		style: [
+			generated_styles.avatarStyles.root,
+			{
+				alignItems: "center",
+				justifyContent: "center",
+				overflow: "hidden"
+			},
+			style
+		],
+		accessibilityRole: "image",
+		accessibilityLabel: alt,
+		...props,
+		children: [
+			showImage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Image, {
+				source: { uri: src },
+				style: {
+					width: "100%",
+					height: "100%"
+				},
+				onError: () => setImageError(true),
+				accessibilityLabel: alt
+			}),
+			showText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+				style: generated_styles.avatarStyles.text,
+				numberOfLines: 1,
+				children: initials
+			}),
+			showIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+				icon: icon ?? "Person",
+				variant: "fill",
+				style: generated_styles.avatarStyles.icon
+			})
+		]
+	});
+});
+Avatar.displayName = "Avatar";
+
+//#endregion
+exports.Avatar = Avatar;

package/dist/components/Avatar.d.cts

@@ -0,0 +1,60 @@
+
+import { IconSlotType } from "./IconSlot.cjs";
+import * as react11 from "react";
+import { View, ViewProps } from "react-native";
+
+//#region src/components/Avatar.d.ts
+/** Avatar size options */
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Avatar variant options */
+type AvatarVariant = 'primary' | 'secondary';
+/** Abbreviation strategy for generating initials */
+type AbbreviationStrategy = 'first' | 'last' | 'firstAndLast' | 'firstTwo' | 'firstThree' | 'firstOfEach' | ((name: string) => string);
+interface AvatarProps extends ViewProps {
+  /** Image source URL */
+  src?: string;
+  /** Alt text for the image, also used for generating initials */
+  alt?: string;
+  /** Explicit initials to display (overrides auto-generated from alt) */
+  fallback?: string;
+  /** Size of the avatar @default 'md' */
+  size?: AvatarSize;
+  /** Variant style @default 'primary' */
+  variant?: AvatarVariant;
+  /** Custom icon to display when no image or text fallback */
+  icon?: IconSlotType;
+  /** Strategy for generating initials from name @default 'firstAndLast' */
+  abbreviationStrategy?: AbbreviationStrategy;
+}
+/**
+ * **Avatar component for user representation**
+ *
+ * @description
+ * Displays a user avatar with image, initials fallback, or icon fallback.
+ *
+ * @example
+ * ```tsx
+ * import { Avatar } from '@yahoo/uds-mobile';
+ *
+ * // With image
+ * <Avatar
+ *   src="https://example.com/photo.jpg"
+ *   alt="Jane Doe"
+ * />
+ *
+ * // With initials fallback
+ * <Avatar alt="Jane Doe" />
+ *
+ * // With explicit initials
+ * <Avatar fallback="JD" />
+ *
+ * // With custom icon
+ * <Avatar icon="Person" variant="secondary" />
+ * ```
+ *
+ * @see The {@link https://uds.build/docs/components/avatar Avatar Docs} for more info
+ */
+declare const Avatar: react11.ForwardRefExoticComponent<AvatarProps & react11.RefAttributes<View>>;
+//#endregion
+export { Avatar, type AvatarProps };
+//# sourceMappingURL=Avatar.d.cts.map

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

@@ -0,0 +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,OAAA,CAAA,0BAAA,cAAA,OAAA,CAAA,cAAA"}

package/dist/components/Avatar.d.mts

@@ -0,0 +1,60 @@
+
+import { IconSlotType } from "./IconSlot.mjs";
+import * as react0 from "react";
+import { View, ViewProps } from "react-native";
+
+//#region src/components/Avatar.d.ts
+/** Avatar size options */
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Avatar variant options */
+type AvatarVariant = 'primary' | 'secondary';
+/** Abbreviation strategy for generating initials */
+type AbbreviationStrategy = 'first' | 'last' | 'firstAndLast' | 'firstTwo' | 'firstThree' | 'firstOfEach' | ((name: string) => string);
+interface AvatarProps extends ViewProps {
+  /** Image source URL */
+  src?: string;
+  /** Alt text for the image, also used for generating initials */
+  alt?: string;
+  /** Explicit initials to display (overrides auto-generated from alt) */
+  fallback?: string;
+  /** Size of the avatar @default 'md' */
+  size?: AvatarSize;
+  /** Variant style @default 'primary' */
+  variant?: AvatarVariant;
+  /** Custom icon to display when no image or text fallback */
+  icon?: IconSlotType;
+  /** Strategy for generating initials from name @default 'firstAndLast' */
+  abbreviationStrategy?: AbbreviationStrategy;
+}
+/**
+ * **Avatar component for user representation**
+ *
+ * @description
+ * Displays a user avatar with image, initials fallback, or icon fallback.
+ *
+ * @example
+ * ```tsx
+ * import { Avatar } from '@yahoo/uds-mobile';
+ *
+ * // With image
+ * <Avatar
+ *   src="https://example.com/photo.jpg"
+ *   alt="Jane Doe"
+ * />
+ *
+ * // With initials fallback
+ * <Avatar alt="Jane Doe" />
+ *
+ * // With explicit initials
+ * <Avatar fallback="JD" />
+ *
+ * // With custom icon
+ * <Avatar icon="Person" variant="secondary" />
+ * ```
+ *
+ * @see The {@link https://uds.build/docs/components/avatar Avatar Docs} for more info
+ */
+declare const Avatar: react0.ForwardRefExoticComponent<AvatarProps & react0.RefAttributes<View>>;
+//#endregion
+export { Avatar, type AvatarProps };
+//# sourceMappingURL=Avatar.d.mts.map

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

@@ -0,0 +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"}

package/dist/components/Avatar.mjs

@@ -0,0 +1,109 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { Box } from "./Box.mjs";
+import { IconSlot } from "./IconSlot.mjs";
+import { Text as Text$1 } from "./Text.mjs";
+import { forwardRef, useState } from "react";
+import { Image } from "react-native";
+import { avatarStyles } from "../../generated/styles";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Avatar.tsx
+const abbreviationStrategies = {
+	first: (initials) => initials[0] ?? "",
+	last: (initials) => initials[initials.length - 1] ?? "",
+	firstAndLast: (initials) => initials.length === 1 ? initials[0] ?? "" : `${initials[0]}${initials[initials.length - 1]}`,
+	firstTwo: (initials) => initials.slice(0, 2).join(""),
+	firstThree: (initials) => initials.slice(0, 3).join(""),
+	firstOfEach: (initials) => initials.join("")
+};
+/** Generate initials from a name */
+function generateInitials(name, strategy = "firstAndLast") {
+	if (!name) return "";
+	if (typeof strategy === "function") return strategy(name);
+	const initials = name.trim().split(/\s+/).map((word) => word[0]?.toUpperCase() ?? "");
+	return abbreviationStrategies[strategy](initials);
+}
+/**
+* **Avatar component for user representation**
+*
+* @description
+* Displays a user avatar with image, initials fallback, or icon fallback.
+*
+* @example
+* ```tsx
+* import { Avatar } from '@yahoo/uds-mobile';
+*
+* // With image
+* <Avatar
+*   src="https://example.com/photo.jpg"
+*   alt="Jane Doe"
+* />
+*
+* // With initials fallback
+* <Avatar alt="Jane Doe" />
+*
+* // With explicit initials
+* <Avatar fallback="JD" />
+*
+* // With custom icon
+* <Avatar icon="Person" variant="secondary" />
+* ```
+*
+* @see The {@link https://uds.build/docs/components/avatar Avatar Docs} for more info
+*/
+const Avatar = forwardRef(function Avatar$1({ 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;
+	const hasText = initials.length > 0;
+	const showImage = hasImage;
+	const showText = !hasImage && hasText;
+	const showIcon = !hasImage && !hasText;
+	avatarStyles.useVariants({
+		size,
+		image: variant,
+		text: variant,
+		icon: variant
+	});
+	return /* @__PURE__ */ jsxs(Box, {
+		ref,
+		style: [
+			avatarStyles.root,
+			{
+				alignItems: "center",
+				justifyContent: "center",
+				overflow: "hidden"
+			},
+			style
+		],
+		accessibilityRole: "image",
+		accessibilityLabel: alt,
+		...props,
+		children: [
+			showImage && /* @__PURE__ */ jsx(Image, {
+				source: { uri: src },
+				style: {
+					width: "100%",
+					height: "100%"
+				},
+				onError: () => setImageError(true),
+				accessibilityLabel: alt
+			}),
+			showText && /* @__PURE__ */ jsx(Text$1, {
+				style: avatarStyles.text,
+				numberOfLines: 1,
+				children: initials
+			}),
+			showIcon && /* @__PURE__ */ jsx(IconSlot, {
+				icon: icon ?? "Person",
+				variant: "fill",
+				style: avatarStyles.icon
+			})
+		]
+	});
+});
+Avatar.displayName = "Avatar";
+
+//#endregion
+export { Avatar };
+//# sourceMappingURL=Avatar.mjs.map

package/dist/components/Avatar.mjs.map

@@ -0,0 +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"}

package/dist/components/Badge.cjs

@@ -0,0 +1,68 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+const require_rolldown_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');
+let react = require("react");
+let generated_styles = require("../../generated/styles");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Badge.tsx
+/**
+* **A badge component for status indicators**
+*
+* @description
+* Badges show notifications, counts, or status information on navigation items and icons.
+*
+* @example
+* ```tsx
+* import { Badge } from '~/components/ui/Badge';
+*
+* <Badge>Label</Badge>
+* <Badge variant="brand" size="sm">New</Badge>
+* <Badge variant="alert" startIcon="Warning">Error</Badge>
+* ```
+*/
+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 }) {
+	generated_styles.badgeStyles.useVariants({
+		size,
+		variant
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_HStack.HStack, {
+		ref,
+		alignItems: "center",
+		overflow: "hidden",
+		alignSelf: "flex-start",
+		maxWidth,
+		minWidth,
+		dangerouslySetBackgroundColor,
+		dangerouslySetBorderColor,
+		style: (0, react.useMemo)(() => [generated_styles.badgeStyles.root, style], [style, generated_styles.badgeStyles.root]),
+		...rest,
+		children: [
+			startIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+				icon: startIcon,
+				variant: "fill",
+				dangerouslySetColor: dangerouslySetIconColor,
+				style: generated_styles.badgeStyles.icon
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+				numberOfLines: 1,
+				flexShrink: "1",
+				dangerouslySetColor,
+				style: generated_styles.badgeStyles.text,
+				children
+			}),
+			endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+				icon: endIcon,
+				variant: "fill",
+				dangerouslySetColor: dangerouslySetIconColor,
+				style: generated_styles.badgeStyles.icon
+			})
+		]
+	});
+});
+Badge.displayName = "Badge";
+
+//#endregion
+exports.Badge = Badge;