@yahoo/uds-mobile 2.1.0 → 2.3.0

package/README.md

@@ -9,6 +9,7 @@
 - [Icons](#icons)
 - [Fonts](#fonts)
 - [CLI](#cli)
+- [Testing](#testing)
 - [Contributing](#contributing)
 - [API Reference](#api-reference)
 
@@ -553,6 +554,97 @@ export const breakpoints = {
 };
 ```
 
+## Testing
+
+### Jest Setup
+
+UDS Mobile ships Jest mocks for native dependencies that don't work in Jest/JSDOM, allowing **real UDS components** to be tested without native module errors. This approach ensures your tests validate actual component behavior.
+
+#### Quick Start
+
+Add the setup file to your Jest config:
+
+```js
+// jest.config.js
+module.exports = {
+  preset: 'react-native',
+  setupFilesAfterEnv: ['@yahoo/uds-mobile/jest'],
+  transformIgnorePatterns: [
+    'node_modules/(?!(@yahoo/uds-mobile|@yahoo/uds-icons|react-native|@react-native)/)',
+  ],
+};
+```
+
+Or import manually in your setup file:
+
+```js
+// jest.setup.js
+import '@yahoo/uds-mobile/jest';
+```
+
+#### What Gets Mocked
+
+The setup automatically mocks these native dependencies:
+
+| Package                   | What's Mocked                                                                       |
+| ------------------------- | ----------------------------------------------------------------------------------- |
+| `react-native-unistyles`  | `useUnistyles()`, `StyleSheet.create()`, `UnistylesRuntime`                         |
+| `react-native-reanimated` | Animated components, hooks (`useSharedValue`, `useAnimatedStyle`), timing functions |
+| `react-native-svg`        | `SvgXml`, SVG shape components                                                      |
+| `@yahoo/uds-icons`        | `glyphMap`, `svgMap`, `ICON_SIZE_MAP`                                               |
+
+#### Example Test
+
+```tsx
+import { render, fireEvent } from '@testing-library/react-native';
+import { Button } from '@yahoo/uds-mobile/Button';
+import { Text } from '@yahoo/uds-mobile/Text';
+import { VStack } from '@yahoo/uds-mobile/VStack';
+
+test('renders button with text and handles press', () => {
+  const onPress = jest.fn();
+
+  const { getByRole, getByText } = render(
+    <VStack>
+      <Button variant="primary" onPress={onPress}>
+        Save
+      </Button>
+    </VStack>,
+  );
+
+  expect(getByText('Save')).toBeTruthy();
+
+  fireEvent.press(getByRole('button'));
+  expect(onPress).toHaveBeenCalled();
+});
+```
+
+#### Benefits
+
+- **Real component testing**: Tests validate actual component behavior, not stubs
+- **No native module errors**: Required native dependencies are properly mocked
+- **Zero configuration**: Just add the setup file and transformIgnorePatterns
+- **Catches regressions**: Tests break when component behavior changes
+
+#### Manual Mock Access
+
+If you need to customize mocks, individual modules are exported:
+
+```js
+import { mocks } from '@yahoo/uds-mobile/jest';
+
+// Override a specific mock
+jest.mock('react-native-unistyles', () => ({
+  ...mocks.unistyles,
+  useUnistyles: () => ({
+    theme: {
+      /* custom theme */
+    },
+    rt: { themeName: 'dark' },
+  }),
+}));
+```
+
 ## Contributing
 
 See [CONTRIBUTING.md](./CONTRIBUTING.md) for the development workflow, architecture details, and internal documentation.

package/dist/_virtual/_rolldown/runtime.cjs

@@ -6,6 +6,19 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (!no_symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
+	return target;
+};
 var __copyProps = (to, from, except, desc) => {
 	if (from && typeof from === "object" || typeof from === "function") {
 		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
@@ -27,4 +40,5 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 
 //#endregion
 
+exports.__exportAll = __exportAll;
 exports.__toESM = __toESM;

package/dist/_virtual/_rolldown/runtime.js

@@ -0,0 +1,19 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (!no_symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
+	return target;
+};
+
+//#endregion
+export { __exportAll };

package/dist/bin/generateTheme.mjs

@@ -252,6 +252,19 @@ function generateShadows(config) {
 	});
 	return result;
 }
+/**
+* Generates blur values from elevation presets.
+* Maps elevation levels to their backgroundBlurRadius values.
+* These can be used with BlurView intensity prop.
+*/
+function generateBlur(config, colorMode) {
+	const result = { none: 0 };
+	for (const [level, modePresets] of Object.entries(config.elevation)) {
+		const blurRadius = modePresets[colorMode].backgroundBlurRadius ?? 0;
+		result[`elevation-${level}`] = blurRadius;
+	}
+	return result;
+}
 function isElevationCustomShadows(value) {
 	return Array.isArray(value);
 }
@@ -578,6 +591,7 @@ function generateTheme(config, colorMode) {
 			drop: sortKeys(boxShadows.drop),
 			inset: sortKeys(boxShadows.inset)
 		},
+		blur: sortKeys(generateBlur(config, colorMode)),
 		components: generateComponents(config, colorMode)
 	};
 }

package/dist/components/{Avatar.d.mts → Avatar.d.ts}

@@ -1,5 +1,5 @@
 
-import { IconSlotType } from "./IconSlot.mjs";
+import { IconSlotType } from "./IconSlot.js";
 import * as react from "react";
 import { View, ViewProps } from "react-native";
 
@@ -65,4 +65,4 @@ interface AvatarProps extends ViewProps {
 declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<View>>;
 //#endregion
 export { Avatar, type AvatarProps };
-//# sourceMappingURL=Avatar.d.mts.map
+//# sourceMappingURL=Avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","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 → Avatar.js}

@@ -1,7 +1,7 @@
 /*! © 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 { Box } from "./Box.js";
+import { IconSlot } from "./IconSlot.js";
+import { Text as Text$1 } from "./Text.js";
 import { forwardRef, useState } from "react";
 import { Image } from "react-native";
 import { avatarStyles } from "../../generated/styles";
@@ -114,4 +114,4 @@ Avatar.displayName = "Avatar";
 
 //#endregion
 export { Avatar };
-//# sourceMappingURL=Avatar.mjs.map
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","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    ...(showImage && { image: variant }),\n    ...(showText && { text: variant }),\n    ...(showIcon && { 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,GAAI,aAAa,EAAE,OAAO,SAAS;EACnC,GAAI,YAAY,EAAE,MAAM,SAAS;EACjC,GAAI,YAAY,EAAE,MAAM,SAAS;EAClC,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.d.mts → Badge.d.ts}

@@ -1,6 +1,6 @@
 
-import { BadgeSize, BadgeVariant } from "../types/dist/index.mjs";
-import { IconSlotType } from "./IconSlot.mjs";
+import { BadgeSize, BadgeVariant } from "../types/dist/index.js";
+import { IconSlotType } from "./IconSlot.js";
 import * as react from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
@@ -58,4 +58,4 @@ interface BadgeProps extends ViewProps {
 declare const Badge: react.NamedExoticComponent<BadgeProps>;
 //#endregion
 export { Badge, type BadgeProps };
-//# sourceMappingURL=Badge.d.mts.map
+//# sourceMappingURL=Badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","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 → Badge.js}

@@ -1,7 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-import { IconSlot } from "./IconSlot.mjs";
-import { Text } from "./Text.mjs";
-import { HStack } from "./HStack.mjs";
+import { IconSlot } from "./IconSlot.js";
+import { Text } from "./Text.js";
+import { HStack } from "./HStack.js";
 import { memo, useMemo } from "react";
 import { badgeStyles } from "../../generated/styles";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -75,4 +75,4 @@ Badge.displayName = "Badge";
 
 //#endregion
 export { Badge };
-//# sourceMappingURL=Badge.mjs.map
+//# sourceMappingURL=Badge.js.map

package/dist/components/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","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/BlurTarget.cjs

@@ -0,0 +1,89 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+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 react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/BlurTarget.tsx
+let BlurTargetView = null;
+let blurTargetLoadState = "pending";
+const blurTargetLoadListeners = [];
+import("expo-blur").then((mod) => {
+	BlurTargetView = mod.BlurTargetView;
+	blurTargetLoadState = "loaded";
+	blurTargetLoadListeners.forEach((cb) => cb());
+}).catch(() => {
+	blurTargetLoadState = "failed";
+	blurTargetLoadListeners.forEach((cb) => cb());
+});
+/** Hook to get BlurTargetView component, re-renders when loaded */
+function useBlurTargetView() {
+	const [, forceUpdate] = (0, react.useState)(0);
+	(0, react.useEffect)(() => {
+		if (blurTargetLoadState === "pending") {
+			const listener = () => forceUpdate((n) => n + 1);
+			blurTargetLoadListeners.push(listener);
+			return () => {
+				const idx = blurTargetLoadListeners.indexOf(listener);
+				if (idx >= 0) blurTargetLoadListeners.splice(idx, 1);
+			};
+		}
+	}, []);
+	return BlurTargetView;
+}
+/**
+* **🔲 Wrapper for content that can be blurred**
+*
+* @description
+* When using blur effects (via the `blur` prop or elevation with blur configured),
+* wrap the content you want to blur in this component and pass its ref to Box's `blurTarget` prop.
+*
+* BlurTarget handles platform differences internally - on iOS it renders children directly,
+* on Android it wraps them in the native view required for blur to work.
+*
+* @example
+* ```tsx
+* import { BlurTarget } from '@yahoo/uds-mobile/BlurTarget';
+* import { Box, Text } from '@yahoo/uds-mobile';
+* import { useRef } from 'react';
+* import type { View } from 'react-native';
+*
+* function MyComponent() {
+*   const blurTargetRef = useRef<View>(null);
+*
+*   return (
+*     <Box flex="1">
+*       <BlurTarget ref={blurTargetRef} fill>
+*         <Image source={backgroundImage} />
+*       </BlurTarget>
+*
+*       <Box blur={50} blurTarget={blurTargetRef} borderRadius="lg" spacing="4">
+*         <Text>Overlay content</Text>
+*       </Box>
+*     </Box>
+*   );
+* }
+* ```
+*
+* @see {@link https://docs.expo.dev/versions/latest/sdk/blur-view/} expo-blur documentation
+*/
+const BlurTarget = (0, react.forwardRef)(function BlurTarget({ children, fill, style }, ref) {
+	const BlurTargetViewComponent = useBlurTargetView();
+	const resolvedStyle = fill ? [react_native.StyleSheet.absoluteFill, style] : style;
+	if (react_native.Platform.OS === "android" && BlurTargetViewComponent) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BlurTargetViewComponent, {
+		ref,
+		style: resolvedStyle,
+		children
+	});
+	if (resolvedStyle || ref) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+		ref,
+		style: resolvedStyle,
+		children
+	});
+	return children;
+});
+BlurTarget.displayName = "BlurTarget";
+
+//#endregion
+exports.BlurTarget = BlurTarget;

package/dist/components/BlurTarget.d.cts

@@ -0,0 +1,52 @@
+
+import * as react from "react";
+import { ReactNode } from "react";
+import { View, ViewStyle } from "react-native";
+
+//#region src/components/BlurTarget.d.ts
+interface BlurTargetProps {
+  children: ReactNode;
+  /** Fill the parent container (applies absoluteFill positioning) */
+  fill?: boolean;
+  style?: ViewStyle;
+}
+/**
+ * **🔲 Wrapper for content that can be blurred**
+ *
+ * @description
+ * When using blur effects (via the `blur` prop or elevation with blur configured),
+ * wrap the content you want to blur in this component and pass its ref to Box's `blurTarget` prop.
+ *
+ * BlurTarget handles platform differences internally - on iOS it renders children directly,
+ * on Android it wraps them in the native view required for blur to work.
+ *
+ * @example
+ * ```tsx
+ * import { BlurTarget } from '@yahoo/uds-mobile/BlurTarget';
+ * import { Box, Text } from '@yahoo/uds-mobile';
+ * import { useRef } from 'react';
+ * import type { View } from 'react-native';
+ *
+ * function MyComponent() {
+ *   const blurTargetRef = useRef<View>(null);
+ *
+ *   return (
+ *     <Box flex="1">
+ *       <BlurTarget ref={blurTargetRef} fill>
+ *         <Image source={backgroundImage} />
+ *       </BlurTarget>
+ *
+ *       <Box blur={50} blurTarget={blurTargetRef} borderRadius="lg" spacing="4">
+ *         <Text>Overlay content</Text>
+ *       </Box>
+ *     </Box>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link https://docs.expo.dev/versions/latest/sdk/blur-view/} expo-blur documentation
+ */
+declare const BlurTarget: react.ForwardRefExoticComponent<BlurTargetProps & react.RefAttributes<View | null>>;
+//#endregion
+export { BlurTarget, type BlurTargetProps };
+//# sourceMappingURL=BlurTarget.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlurTarget.d.cts","names":[],"sources":["../../src/components/BlurTarget.tsx"],"mappings":";;;;;;UAkDU,eAAA;EACR,QAAA,EAAU,SAAA;EADF;EAGR,IAAA;EACA,KAAA,GAAQ,SAAA;AAAA;;;;;;;;AAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAuCb,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,KAAA,CAAA,aAAA,CAAA,IAAA"}

package/dist/components/BlurTarget.d.ts

@@ -0,0 +1,52 @@
+
+import * as react from "react";
+import { ReactNode } from "react";
+import { View, ViewStyle } from "react-native";
+
+//#region src/components/BlurTarget.d.ts
+interface BlurTargetProps {
+  children: ReactNode;
+  /** Fill the parent container (applies absoluteFill positioning) */
+  fill?: boolean;
+  style?: ViewStyle;
+}
+/**
+ * **🔲 Wrapper for content that can be blurred**
+ *
+ * @description
+ * When using blur effects (via the `blur` prop or elevation with blur configured),
+ * wrap the content you want to blur in this component and pass its ref to Box's `blurTarget` prop.
+ *
+ * BlurTarget handles platform differences internally - on iOS it renders children directly,
+ * on Android it wraps them in the native view required for blur to work.
+ *
+ * @example
+ * ```tsx
+ * import { BlurTarget } from '@yahoo/uds-mobile/BlurTarget';
+ * import { Box, Text } from '@yahoo/uds-mobile';
+ * import { useRef } from 'react';
+ * import type { View } from 'react-native';
+ *
+ * function MyComponent() {
+ *   const blurTargetRef = useRef<View>(null);
+ *
+ *   return (
+ *     <Box flex="1">
+ *       <BlurTarget ref={blurTargetRef} fill>
+ *         <Image source={backgroundImage} />
+ *       </BlurTarget>
+ *
+ *       <Box blur={50} blurTarget={blurTargetRef} borderRadius="lg" spacing="4">
+ *         <Text>Overlay content</Text>
+ *       </Box>
+ *     </Box>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link https://docs.expo.dev/versions/latest/sdk/blur-view/} expo-blur documentation
+ */
+declare const BlurTarget: react.ForwardRefExoticComponent<BlurTargetProps & react.RefAttributes<View | null>>;
+//#endregion
+export { BlurTarget, type BlurTargetProps };
+//# sourceMappingURL=BlurTarget.d.ts.map

package/dist/components/BlurTarget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlurTarget.d.ts","names":[],"sources":["../../src/components/BlurTarget.tsx"],"mappings":";;;;;;UAkDU,eAAA;EACR,QAAA,EAAU,SAAA;EADF;EAGR,IAAA;EACA,KAAA,GAAQ,SAAA;AAAA;;;;;;;;AAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAuCb,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,KAAA,CAAA,aAAA,CAAA,IAAA"}

package/dist/components/BlurTarget.js

@@ -0,0 +1,88 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { forwardRef, useEffect, useState } from "react";
+import { Platform, StyleSheet, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/BlurTarget.tsx
+let BlurTargetView = null;
+let blurTargetLoadState = "pending";
+const blurTargetLoadListeners = [];
+import("expo-blur").then((mod) => {
+	BlurTargetView = mod.BlurTargetView;
+	blurTargetLoadState = "loaded";
+	blurTargetLoadListeners.forEach((cb) => cb());
+}).catch(() => {
+	blurTargetLoadState = "failed";
+	blurTargetLoadListeners.forEach((cb) => cb());
+});
+/** Hook to get BlurTargetView component, re-renders when loaded */
+function useBlurTargetView() {
+	const [, forceUpdate] = useState(0);
+	useEffect(() => {
+		if (blurTargetLoadState === "pending") {
+			const listener = () => forceUpdate((n) => n + 1);
+			blurTargetLoadListeners.push(listener);
+			return () => {
+				const idx = blurTargetLoadListeners.indexOf(listener);
+				if (idx >= 0) blurTargetLoadListeners.splice(idx, 1);
+			};
+		}
+	}, []);
+	return BlurTargetView;
+}
+/**
+* **🔲 Wrapper for content that can be blurred**
+*
+* @description
+* When using blur effects (via the `blur` prop or elevation with blur configured),
+* wrap the content you want to blur in this component and pass its ref to Box's `blurTarget` prop.
+*
+* BlurTarget handles platform differences internally - on iOS it renders children directly,
+* on Android it wraps them in the native view required for blur to work.
+*
+* @example
+* ```tsx
+* import { BlurTarget } from '@yahoo/uds-mobile/BlurTarget';
+* import { Box, Text } from '@yahoo/uds-mobile';
+* import { useRef } from 'react';
+* import type { View } from 'react-native';
+*
+* function MyComponent() {
+*   const blurTargetRef = useRef<View>(null);
+*
+*   return (
+*     <Box flex="1">
+*       <BlurTarget ref={blurTargetRef} fill>
+*         <Image source={backgroundImage} />
+*       </BlurTarget>
+*
+*       <Box blur={50} blurTarget={blurTargetRef} borderRadius="lg" spacing="4">
+*         <Text>Overlay content</Text>
+*       </Box>
+*     </Box>
+*   );
+* }
+* ```
+*
+* @see {@link https://docs.expo.dev/versions/latest/sdk/blur-view/} expo-blur documentation
+*/
+const BlurTarget = forwardRef(function BlurTarget({ children, fill, style }, ref) {
+	const BlurTargetViewComponent = useBlurTargetView();
+	const resolvedStyle = fill ? [StyleSheet.absoluteFill, style] : style;
+	if (Platform.OS === "android" && BlurTargetViewComponent) return /* @__PURE__ */ jsx(BlurTargetViewComponent, {
+		ref,
+		style: resolvedStyle,
+		children
+	});
+	if (resolvedStyle || ref) return /* @__PURE__ */ jsx(View, {
+		ref,
+		style: resolvedStyle,
+		children
+	});
+	return children;
+});
+BlurTarget.displayName = "BlurTarget";
+
+//#endregion
+export { BlurTarget };
+//# sourceMappingURL=BlurTarget.js.map

package/dist/components/BlurTarget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlurTarget.js","names":[],"sources":["../../src/components/BlurTarget.tsx"],"sourcesContent":["import type { ComponentType, ReactNode, RefObject } from 'react';\nimport { forwardRef, useEffect, useState } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { Platform, StyleSheet, View } from 'react-native';\n\n/** Props for expo-blur's BlurTargetView component */\ninterface BlurTargetViewProps {\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n  ref?: RefObject<View | null>;\n}\n\n// Optional expo-blur dependency - loaded via dynamic import for Metro compatibility\n// Metro can statically analyze import() and will include expo-blur in the bundle if installed\nlet BlurTargetView: ComponentType<BlurTargetViewProps> | null = null;\nlet blurTargetLoadState: 'pending' | 'loaded' | 'failed' = 'pending';\nconst blurTargetLoadListeners: (() => void)[] = [];\n\n// Start loading expo-blur immediately (Metro will bundle it if installed)\nimport('expo-blur')\n  .then((mod) => {\n    BlurTargetView = mod.BlurTargetView;\n    blurTargetLoadState = 'loaded';\n    blurTargetLoadListeners.forEach((cb) => cb());\n  })\n  .catch(() => {\n    blurTargetLoadState = 'failed';\n    blurTargetLoadListeners.forEach((cb) => cb());\n  });\n\n/** Hook to get BlurTargetView component, re-renders when loaded */\nfunction useBlurTargetView() {\n  const [, forceUpdate] = useState(0);\n\n  useEffect(() => {\n    if (blurTargetLoadState === 'pending') {\n      const listener = () => forceUpdate((n) => n + 1);\n      blurTargetLoadListeners.push(listener);\n      return () => {\n        const idx = blurTargetLoadListeners.indexOf(listener);\n        if (idx >= 0) {\n          blurTargetLoadListeners.splice(idx, 1);\n        }\n      };\n    }\n  }, []);\n\n  return BlurTargetView;\n}\n\ninterface BlurTargetProps {\n  children: ReactNode;\n  /** Fill the parent container (applies absoluteFill positioning) */\n  fill?: boolean;\n  style?: ViewStyle;\n}\n\n/**\n * **🔲 Wrapper for content that can be blurred**\n *\n * @description\n * When using blur effects (via the `blur` prop or elevation with blur configured),\n * wrap the content you want to blur in this component and pass its ref to Box's `blurTarget` prop.\n *\n * BlurTarget handles platform differences internally - on iOS it renders children directly,\n * on Android it wraps them in the native view required for blur to work.\n *\n * @example\n * ```tsx\n * import { BlurTarget } from '@yahoo/uds-mobile/BlurTarget';\n * import { Box, Text } from '@yahoo/uds-mobile';\n * import { useRef } from 'react';\n * import type { View } from 'react-native';\n *\n * function MyComponent() {\n *   const blurTargetRef = useRef<View>(null);\n *\n *   return (\n *     <Box flex=\"1\">\n *       <BlurTarget ref={blurTargetRef} fill>\n *         <Image source={backgroundImage} />\n *       </BlurTarget>\n *\n *       <Box blur={50} blurTarget={blurTargetRef} borderRadius=\"lg\" spacing=\"4\">\n *         <Text>Overlay content</Text>\n *       </Box>\n *     </Box>\n *   );\n * }\n * ```\n *\n * @see {@link https://docs.expo.dev/versions/latest/sdk/blur-view/} expo-blur documentation\n */\nconst BlurTarget = forwardRef<View | null, BlurTargetProps>(function BlurTarget(\n  { children, fill, style },\n  ref,\n) {\n  const BlurTargetViewComponent = useBlurTargetView();\n  const resolvedStyle = fill ? [StyleSheet.absoluteFill, style] : style;\n\n  // On Android with expo-blur, wrap in BlurTargetView for blur to work\n  if (Platform.OS === 'android' && BlurTargetViewComponent) {\n    return (\n      <BlurTargetViewComponent ref={ref as RefObject<View | null>} style={resolvedStyle}>\n        {children}\n      </BlurTargetViewComponent>\n    );\n  }\n\n  // On iOS (or if expo-blur not installed), wrap in View if style/ref is provided\n  // No special BlurTargetView needed - blur works automatically on iOS\n  if (resolvedStyle || ref) {\n    return (\n      <View ref={ref} style={resolvedStyle}>\n        {children}\n      </View>\n    );\n  }\n\n  // No wrapper needed if no style/ref\n  return children;\n});\n\nBlurTarget.displayName = 'BlurTarget';\n\nexport { BlurTarget, type BlurTargetProps };\n"],"mappings":";;;;;;AAcA,IAAI,iBAA4D;AAChE,IAAI,sBAAuD;AAC3D,MAAM,0BAA0C,EAAE;AAGlD,OAAO,aACJ,MAAM,QAAQ;AACb,kBAAiB,IAAI;AACrB,uBAAsB;AACtB,yBAAwB,SAAS,OAAO,IAAI,CAAC;EAC7C,CACD,YAAY;AACX,uBAAsB;AACtB,yBAAwB,SAAS,OAAO,IAAI,CAAC;EAC7C;;AAGJ,SAAS,oBAAoB;CAC3B,MAAM,GAAG,eAAe,SAAS,EAAE;AAEnC,iBAAgB;AACd,MAAI,wBAAwB,WAAW;GACrC,MAAM,iBAAiB,aAAa,MAAM,IAAI,EAAE;AAChD,2BAAwB,KAAK,SAAS;AACtC,gBAAa;IACX,MAAM,MAAM,wBAAwB,QAAQ,SAAS;AACrD,QAAI,OAAO,EACT,yBAAwB,OAAO,KAAK,EAAE;;;IAI3C,EAAE,CAAC;AAEN,QAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CT,MAAM,aAAa,WAAyC,SAAS,WACnE,EAAE,UAAU,MAAM,SAClB,KACA;CACA,MAAM,0BAA0B,mBAAmB;CACnD,MAAM,gBAAgB,OAAO,CAAC,WAAW,cAAc,MAAM,GAAG;AAGhE,KAAI,SAAS,OAAO,aAAa,wBAC/B,QACE,oBAAC;EAA6B;EAA+B,OAAO;EACjE;GACuB;AAM9B,KAAI,iBAAiB,IACnB,QACE,oBAAC;EAAU;EAAK,OAAO;EACpB;GACI;AAKX,QAAO;EACP;AAEF,WAAW,cAAc"}