@yahoo/uds-mobile 2.16.0 → 2.18.0

package/dist/components/Popover/PopoverSurface.cjs

@@ -0,0 +1,228 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+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_Icon = require("../Icon.cjs");
+const require_components_Pressable = require("../Pressable.cjs");
+const require_components_Popover_PopoverContext = require("./PopoverContext.cjs");
+const require_components_Popover_PopoverFrame = require("./PopoverFrame.cjs");
+let react = require("react");
+let react_native = require("react-native");
+let react_jsx_runtime = require("react/jsx-runtime");
+let generated_styles = require("../../../generated/styles");
+let react_native_reanimated = require("react-native-reanimated");
+react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
+//#region src/components/Popover/PopoverSurface.tsx
+const DEFAULT_CLOSE_ICON_SIZE = 16;
+const DEFAULT_TRANSLUCENT_SURFACE_OPACITY = .5;
+const AnimatedBox = react_native_reanimated.default.createAnimatedComponent(require_components_Box.Box);
+function getColorWithOpacity(color, opacity) {
+	if (!color || opacity === void 0) return color;
+	const normalized = color.trim();
+	const rgbMatch = normalized.match(/^rgb\(([^)]+)\)$/i);
+	if (rgbMatch) {
+		const channels = rgbMatch[1].split(",").map((part) => part.trim());
+		if (channels.length === 3) return `rgba(${channels.join(", ")}, ${opacity})`;
+	}
+	const rgbaMatch = normalized.match(/^rgba\(([^)]+)\)$/i);
+	if (rgbaMatch) {
+		const channels = rgbaMatch[1].split(",").map((part) => part.trim());
+		if (channels.length === 4) return `rgba(${channels.slice(0, 3).join(", ")}, ${opacity})`;
+	}
+	const hexMatch = normalized.match(/^#([\da-f]{3}|[\da-f]{6})$/i);
+	if (hexMatch) {
+		const value = hexMatch[1];
+		const [r, g, b] = value.length === 3 ? value.split("").map((char) => parseInt(`${char}${char}`, 16)) : [
+			parseInt(value.slice(0, 2), 16),
+			parseInt(value.slice(2, 4), 16),
+			parseInt(value.slice(4, 6), 16)
+		];
+		return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+	}
+	return color;
+}
+function hasColorOpacity(color) {
+	if (!color) return false;
+	const normalized = color.trim().toLowerCase();
+	if (normalized === "transparent") return true;
+	const rgbaMatch = normalized.match(/^rgba\(([^)]+)\)$/);
+	if (rgbaMatch) {
+		const channels = rgbaMatch[1].split(",").map((part) => part.trim());
+		const alpha = Number(channels[3]);
+		return channels.length === 4 && Number.isFinite(alpha) && alpha < 1;
+	}
+	return /^#[\da-f]{4}$|^#[\da-f]{8}$/.test(normalized);
+}
+function getPositiveNumber(...values) {
+	return values.find((value) => typeof value === "number" && value > 0) ?? 0;
+}
+const PopoverSurface = (0, react.memo)(function PopoverSurface({ animatedStyle, arrowHeight, arrowStyle, arrowWidth, children, contentSize, contentStyle, maxHeight, maxWidth, onDismiss, positionedMaxWidth, resolvedPlacement, style, ...props }) {
+	const { blurTarget, closeAccessibilityLabel, hideArrow, hideDismissButton, open } = require_components_Popover_PopoverContext.usePopoverContext();
+	generated_styles.popoverStyles.useVariants({});
+	const svgBaseTokens = react_native.StyleSheet.flatten(generated_styles.popoverStyles.svgBase);
+	const svgBorderTokens = react_native.StyleSheet.flatten(generated_styles.popoverStyles.svgBorder);
+	const configuredBlurRadius = Math.max(svgBaseTokens.backgroundBlurRadius ?? 0, generated_styles.popoverStyles.blur.backgroundBlurRadius ?? 0);
+	const blurIntensity = configuredBlurRadius > 0 ? configuredBlurRadius : 0;
+	const showBlurBox = blurIntensity > 0 && (react_native.Platform.OS === "ios" || blurTarget != null);
+	const opaqueBackground = svgBaseTokens.backgroundColor ?? "#fff";
+	const fallbackOpacity = blurIntensity > 0 && !svgBaseTokens.backgroundBlurColor && !hasColorOpacity(opaqueBackground) ? DEFAULT_TRANSLUCENT_SURFACE_OPACITY : void 0;
+	const surfaceFillColor = getColorWithOpacity(opaqueBackground, svgBaseTokens.backgroundOpacity ?? fallbackOpacity) ?? opaqueBackground;
+	const surfaceBlurColor = svgBaseTokens.backgroundBlurColor ?? surfaceFillColor;
+	const surfaceFallbackColor = svgBaseTokens.backgroundBlurFallbackColor ?? surfaceBlurColor;
+	const surfaceBackgroundColor = showBlurBox ? "transparent" : blurIntensity > 0 ? surfaceFallbackColor : surfaceFillColor;
+	const surfaceBorderColor = svgBorderTokens?.borderColor ?? svgBaseTokens.borderColor;
+	const surfaceBorderWidth = svgBorderTokens?.borderWidth ?? svgBaseTokens.borderWidth ?? 0;
+	const surfaceBorderRadius = svgBaseTokens.borderRadius ?? 0;
+	const shouldDrawFrame = !hideArrow && contentSize.width > 0 && contentSize.height > 0;
+	const frameBorderInset = shouldDrawFrame ? surfaceBorderWidth : 0;
+	const contentWrapperTokens = react_native.StyleSheet.flatten(generated_styles.popoverStyles.contentWrapper);
+	const closeIconContainerTokens = react_native.StyleSheet.flatten(generated_styles.popoverStyles.closeIconContainer);
+	const closeIconTokens = react_native.StyleSheet.flatten(generated_styles.popoverStyles.closeIcon);
+	const contentWrapperPaddingHorizontal = contentWrapperTokens.paddingHorizontal ?? 0;
+	const contentWrapperPaddingVertical = contentWrapperTokens.paddingVertical ?? 0;
+	const closeButtonPaddingHorizontal = getPositiveNumber(closeIconContainerTokens.paddingHorizontal, closeIconContainerTokens.padding);
+	const closeButtonPaddingVertical = getPositiveNumber(closeIconContainerTokens.paddingVertical, closeIconContainerTokens.padding);
+	const closeIconSize = getPositiveNumber(generated_styles.popoverStyles.closeIcon.fontSize, closeIconTokens.fontSize, closeIconTokens.lineHeight, DEFAULT_CLOSE_ICON_SIZE);
+	const closeButtonSize = closeIconSize + closeButtonPaddingHorizontal * 2;
+	const closeButtonHeight = closeIconSize + closeButtonPaddingVertical * 2;
+	const surfaceStyle = (0, react.useMemo)(() => [{
+		borderRadius: surfaceBorderRadius,
+		maxWidth: maxWidth ?? positionedMaxWidth,
+		maxHeight,
+		overflow: "visible"
+	}, style], [
+		maxHeight,
+		maxWidth,
+		positionedMaxWidth,
+		style,
+		surfaceBorderRadius
+	]);
+	const shadowStyle = (0, react.useMemo)(() => [
+		generated_styles.popoverStyles.root,
+		internalStyles.shadow,
+		{ borderRadius: surfaceBorderRadius }
+	], [generated_styles.popoverStyles.root, surfaceBorderRadius]);
+	const visualSurfaceStyle = (0, react.useMemo)(() => [
+		generated_styles.popoverStyles.svgBase,
+		internalStyles.surface,
+		{
+			backgroundColor: surfaceBackgroundColor,
+			borderColor: surfaceBorderColor,
+			borderRadius: surfaceBorderRadius,
+			borderWidth: shouldDrawFrame ? 0 : surfaceBorderWidth,
+			maxWidth: maxWidth ?? positionedMaxWidth,
+			maxHeight,
+			padding: frameBorderInset
+		}
+	], [
+		frameBorderInset,
+		maxHeight,
+		maxWidth,
+		generated_styles.popoverStyles.svgBase,
+		positionedMaxWidth,
+		surfaceBackgroundColor,
+		surfaceBorderColor,
+		surfaceBorderRadius,
+		surfaceBorderWidth,
+		shouldDrawFrame
+	]);
+	const closeButtonStyle = (0, react.useMemo)(() => [
+		internalStyles.closeButton,
+		{
+			top: frameBorderInset + contentWrapperPaddingVertical,
+			right: frameBorderInset + contentWrapperPaddingHorizontal,
+			width: closeButtonSize,
+			height: closeButtonHeight
+		},
+		generated_styles.popoverStyles.closeIconContainer
+	], [
+		closeButtonHeight,
+		closeButtonSize,
+		contentWrapperPaddingHorizontal,
+		contentWrapperPaddingVertical,
+		frameBorderInset,
+		generated_styles.popoverStyles.closeIconContainer
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AnimatedBox, {
+		role: "dialog",
+		accessibilityViewIsModal: true,
+		pointerEvents: open ? "auto" : "none",
+		style: [
+			contentStyle,
+			...surfaceStyle,
+			animatedStyle
+		],
+		...props,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+				pointerEvents: "none",
+				style: shadowStyle,
+				testID: "uds-popover-shadow"
+			}),
+			shouldDrawFrame && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Popover_PopoverFrame.PopoverFrame, {
+				arrowHeight,
+				arrowStyle,
+				arrowWidth,
+				borderRadius: surfaceBorderRadius,
+				fill: surfaceFillColor,
+				placement: resolvedPlacement,
+				stroke: surfaceBorderColor,
+				strokeWidth: surfaceBorderWidth,
+				surfaceHeight: contentSize.height,
+				surfaceWidth: contentSize.width
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
+				style: visualSurfaceStyle,
+				testID: "uds-popover-surface",
+				children: [
+					showBlurBox && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+						style: react_native.StyleSheet.absoluteFill,
+						blur: blurIntensity,
+						blurTarget
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+						pointerEvents: "none",
+						style: [react_native.StyleSheet.absoluteFill, { backgroundColor: surfaceFillColor }]
+					})] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+						style: generated_styles.popoverStyles.contentWrapper,
+						testID: "uds-popover-content-wrapper",
+						children
+					}),
+					!hideDismissButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Pressable.Pressable, {
+						testID: "uds-popover-close",
+						accessibilityRole: "button",
+						accessibilityLabel: closeAccessibilityLabel,
+						onPress: onDismiss,
+						style: closeButtonStyle,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
+							name: "Cross",
+							variant: "outline",
+							style: generated_styles.popoverStyles.closeIcon,
+							dangerouslySetColor: generated_styles.popoverStyles.closeIcon.color,
+							dangerouslySetSize: generated_styles.popoverStyles.closeIcon.fontSize
+						})
+					})
+				]
+			})
+		]
+	});
+});
+const internalStyles = react_native.StyleSheet.create({
+	shadow: {
+		...react_native.StyleSheet.absoluteFillObject,
+		zIndex: 0
+	},
+	surface: {
+		overflow: "hidden",
+		position: "relative",
+		zIndex: 1
+	},
+	closeButton: {
+		position: "absolute",
+		alignItems: "center",
+		justifyContent: "center"
+	}
+});
+PopoverSurface.displayName = "PopoverSurface";
+//#endregion
+exports.PopoverSurface = PopoverSurface;

package/dist/components/Popover/PopoverSurface.d.cts

@@ -0,0 +1,26 @@
+
+import { AnchoredPlacement } from "../internal/Overlay/types.cjs";
+import { PopoverContentProps } from "./types.cjs";
+import * as _$react from "react";
+import { StyleProp, ViewStyle } from "react-native";
+
+//#region src/components/Popover/PopoverSurface.d.ts
+interface PopoverSurfaceProps extends Omit<PopoverContentProps, 'children'> {
+  animatedStyle: StyleProp<ViewStyle>;
+  arrowHeight: number;
+  arrowStyle: StyleProp<ViewStyle>;
+  arrowWidth: number;
+  children?: PopoverContentProps['children'];
+  contentSize: {
+    width: number;
+    height: number;
+  };
+  contentStyle: StyleProp<ViewStyle>;
+  onDismiss: () => void;
+  positionedMaxWidth: number;
+  resolvedPlacement: AnchoredPlacement;
+}
+declare const PopoverSurface: _$react.NamedExoticComponent<PopoverSurfaceProps>;
+//#endregion
+export { PopoverSurface };
+//# sourceMappingURL=PopoverSurface.d.cts.map

package/dist/components/Popover/PopoverSurface.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverSurface.d.cts","names":[],"sources":["../../../src/components/Popover/PopoverSurface.tsx"],"mappings":";;;;;;;UAkDU,mBAAA,SAA4B,IAAA,CAAK,mBAAA;EACzC,aAAA,EAAe,SAAA,CAAU,SAAA;EACzB,WAAA;EACA,UAAA,EAAY,SAAA,CAAU,SAAA;EACtB,UAAA;EACA,QAAA,GAAW,mBAAA;EACX,WAAA;IAAe,KAAA;IAAe,MAAA;EAAA;EAC9B,YAAA,EAAc,SAAA,CAAU,SAAA;EACxB,SAAA;EACA,kBAAA;EACA,iBAAA,EAAmB,iBAAA;AAAA;AAAA,cAoEf,cAAA,EAAc,OAAA,CAAA,oBAAA,CAAA,mBAAA"}

package/dist/components/Popover/PopoverSurface.d.ts

@@ -0,0 +1,26 @@
+
+import { AnchoredPlacement } from "../internal/Overlay/types.js";
+import { PopoverContentProps } from "./types.js";
+import * as _$react from "react";
+import { StyleProp, ViewStyle } from "react-native";
+
+//#region src/components/Popover/PopoverSurface.d.ts
+interface PopoverSurfaceProps extends Omit<PopoverContentProps, 'children'> {
+  animatedStyle: StyleProp<ViewStyle>;
+  arrowHeight: number;
+  arrowStyle: StyleProp<ViewStyle>;
+  arrowWidth: number;
+  children?: PopoverContentProps['children'];
+  contentSize: {
+    width: number;
+    height: number;
+  };
+  contentStyle: StyleProp<ViewStyle>;
+  onDismiss: () => void;
+  positionedMaxWidth: number;
+  resolvedPlacement: AnchoredPlacement;
+}
+declare const PopoverSurface: _$react.NamedExoticComponent<PopoverSurfaceProps>;
+//#endregion
+export { PopoverSurface };
+//# sourceMappingURL=PopoverSurface.d.ts.map

package/dist/components/Popover/PopoverSurface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverSurface.d.ts","names":[],"sources":["../../../src/components/Popover/PopoverSurface.tsx"],"mappings":";;;;;;;UAkDU,mBAAA,SAA4B,IAAA,CAAK,mBAAA;EACzC,aAAA,EAAe,SAAA,CAAU,SAAA;EACzB,WAAA;EACA,UAAA,EAAY,SAAA,CAAU,SAAA;EACtB,UAAA;EACA,QAAA,GAAW,mBAAA;EACX,WAAA;IAAe,KAAA;IAAe,MAAA;EAAA;EAC9B,YAAA,EAAc,SAAA,CAAU,SAAA;EACxB,SAAA;EACA,kBAAA;EACA,iBAAA,EAAmB,iBAAA;AAAA;AAAA,cAoEf,cAAA,EAAc,OAAA,CAAA,oBAAA,CAAA,mBAAA"}

package/dist/components/Popover/PopoverSurface.js

@@ -0,0 +1,227 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { Box } from "../Box.js";
+import { Icon } from "../Icon.js";
+import { Pressable as Pressable$1 } from "../Pressable.js";
+import { usePopoverContext } from "./PopoverContext.js";
+import { PopoverFrame } from "./PopoverFrame.js";
+import { memo, useMemo } from "react";
+import { Platform, StyleSheet, View } from "react-native";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { popoverStyles } from "../../../generated/styles";
+import Animated from "react-native-reanimated";
+//#region src/components/Popover/PopoverSurface.tsx
+const DEFAULT_CLOSE_ICON_SIZE = 16;
+const DEFAULT_TRANSLUCENT_SURFACE_OPACITY = .5;
+const AnimatedBox = Animated.createAnimatedComponent(Box);
+function getColorWithOpacity(color, opacity) {
+	if (!color || opacity === void 0) return color;
+	const normalized = color.trim();
+	const rgbMatch = normalized.match(/^rgb\(([^)]+)\)$/i);
+	if (rgbMatch) {
+		const channels = rgbMatch[1].split(",").map((part) => part.trim());
+		if (channels.length === 3) return `rgba(${channels.join(", ")}, ${opacity})`;
+	}
+	const rgbaMatch = normalized.match(/^rgba\(([^)]+)\)$/i);
+	if (rgbaMatch) {
+		const channels = rgbaMatch[1].split(",").map((part) => part.trim());
+		if (channels.length === 4) return `rgba(${channels.slice(0, 3).join(", ")}, ${opacity})`;
+	}
+	const hexMatch = normalized.match(/^#([\da-f]{3}|[\da-f]{6})$/i);
+	if (hexMatch) {
+		const value = hexMatch[1];
+		const [r, g, b] = value.length === 3 ? value.split("").map((char) => parseInt(`${char}${char}`, 16)) : [
+			parseInt(value.slice(0, 2), 16),
+			parseInt(value.slice(2, 4), 16),
+			parseInt(value.slice(4, 6), 16)
+		];
+		return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+	}
+	return color;
+}
+function hasColorOpacity(color) {
+	if (!color) return false;
+	const normalized = color.trim().toLowerCase();
+	if (normalized === "transparent") return true;
+	const rgbaMatch = normalized.match(/^rgba\(([^)]+)\)$/);
+	if (rgbaMatch) {
+		const channels = rgbaMatch[1].split(",").map((part) => part.trim());
+		const alpha = Number(channels[3]);
+		return channels.length === 4 && Number.isFinite(alpha) && alpha < 1;
+	}
+	return /^#[\da-f]{4}$|^#[\da-f]{8}$/.test(normalized);
+}
+function getPositiveNumber(...values) {
+	return values.find((value) => typeof value === "number" && value > 0) ?? 0;
+}
+const PopoverSurface = memo(function PopoverSurface({ animatedStyle, arrowHeight, arrowStyle, arrowWidth, children, contentSize, contentStyle, maxHeight, maxWidth, onDismiss, positionedMaxWidth, resolvedPlacement, style, ...props }) {
+	const { blurTarget, closeAccessibilityLabel, hideArrow, hideDismissButton, open } = usePopoverContext();
+	popoverStyles.useVariants({});
+	const svgBaseTokens = StyleSheet.flatten(popoverStyles.svgBase);
+	const svgBorderTokens = StyleSheet.flatten(popoverStyles.svgBorder);
+	const configuredBlurRadius = Math.max(svgBaseTokens.backgroundBlurRadius ?? 0, popoverStyles.blur.backgroundBlurRadius ?? 0);
+	const blurIntensity = configuredBlurRadius > 0 ? configuredBlurRadius : 0;
+	const showBlurBox = blurIntensity > 0 && (Platform.OS === "ios" || blurTarget != null);
+	const opaqueBackground = svgBaseTokens.backgroundColor ?? "#fff";
+	const fallbackOpacity = blurIntensity > 0 && !svgBaseTokens.backgroundBlurColor && !hasColorOpacity(opaqueBackground) ? DEFAULT_TRANSLUCENT_SURFACE_OPACITY : void 0;
+	const surfaceFillColor = getColorWithOpacity(opaqueBackground, svgBaseTokens.backgroundOpacity ?? fallbackOpacity) ?? opaqueBackground;
+	const surfaceBlurColor = svgBaseTokens.backgroundBlurColor ?? surfaceFillColor;
+	const surfaceFallbackColor = svgBaseTokens.backgroundBlurFallbackColor ?? surfaceBlurColor;
+	const surfaceBackgroundColor = showBlurBox ? "transparent" : blurIntensity > 0 ? surfaceFallbackColor : surfaceFillColor;
+	const surfaceBorderColor = svgBorderTokens?.borderColor ?? svgBaseTokens.borderColor;
+	const surfaceBorderWidth = svgBorderTokens?.borderWidth ?? svgBaseTokens.borderWidth ?? 0;
+	const surfaceBorderRadius = svgBaseTokens.borderRadius ?? 0;
+	const shouldDrawFrame = !hideArrow && contentSize.width > 0 && contentSize.height > 0;
+	const frameBorderInset = shouldDrawFrame ? surfaceBorderWidth : 0;
+	const contentWrapperTokens = StyleSheet.flatten(popoverStyles.contentWrapper);
+	const closeIconContainerTokens = StyleSheet.flatten(popoverStyles.closeIconContainer);
+	const closeIconTokens = StyleSheet.flatten(popoverStyles.closeIcon);
+	const contentWrapperPaddingHorizontal = contentWrapperTokens.paddingHorizontal ?? 0;
+	const contentWrapperPaddingVertical = contentWrapperTokens.paddingVertical ?? 0;
+	const closeButtonPaddingHorizontal = getPositiveNumber(closeIconContainerTokens.paddingHorizontal, closeIconContainerTokens.padding);
+	const closeButtonPaddingVertical = getPositiveNumber(closeIconContainerTokens.paddingVertical, closeIconContainerTokens.padding);
+	const closeIconSize = getPositiveNumber(popoverStyles.closeIcon.fontSize, closeIconTokens.fontSize, closeIconTokens.lineHeight, DEFAULT_CLOSE_ICON_SIZE);
+	const closeButtonSize = closeIconSize + closeButtonPaddingHorizontal * 2;
+	const closeButtonHeight = closeIconSize + closeButtonPaddingVertical * 2;
+	const surfaceStyle = useMemo(() => [{
+		borderRadius: surfaceBorderRadius,
+		maxWidth: maxWidth ?? positionedMaxWidth,
+		maxHeight,
+		overflow: "visible"
+	}, style], [
+		maxHeight,
+		maxWidth,
+		positionedMaxWidth,
+		style,
+		surfaceBorderRadius
+	]);
+	const shadowStyle = useMemo(() => [
+		popoverStyles.root,
+		internalStyles.shadow,
+		{ borderRadius: surfaceBorderRadius }
+	], [popoverStyles.root, surfaceBorderRadius]);
+	const visualSurfaceStyle = useMemo(() => [
+		popoverStyles.svgBase,
+		internalStyles.surface,
+		{
+			backgroundColor: surfaceBackgroundColor,
+			borderColor: surfaceBorderColor,
+			borderRadius: surfaceBorderRadius,
+			borderWidth: shouldDrawFrame ? 0 : surfaceBorderWidth,
+			maxWidth: maxWidth ?? positionedMaxWidth,
+			maxHeight,
+			padding: frameBorderInset
+		}
+	], [
+		frameBorderInset,
+		maxHeight,
+		maxWidth,
+		popoverStyles.svgBase,
+		positionedMaxWidth,
+		surfaceBackgroundColor,
+		surfaceBorderColor,
+		surfaceBorderRadius,
+		surfaceBorderWidth,
+		shouldDrawFrame
+	]);
+	const closeButtonStyle = useMemo(() => [
+		internalStyles.closeButton,
+		{
+			top: frameBorderInset + contentWrapperPaddingVertical,
+			right: frameBorderInset + contentWrapperPaddingHorizontal,
+			width: closeButtonSize,
+			height: closeButtonHeight
+		},
+		popoverStyles.closeIconContainer
+	], [
+		closeButtonHeight,
+		closeButtonSize,
+		contentWrapperPaddingHorizontal,
+		contentWrapperPaddingVertical,
+		frameBorderInset,
+		popoverStyles.closeIconContainer
+	]);
+	return /* @__PURE__ */ jsxs(AnimatedBox, {
+		role: "dialog",
+		accessibilityViewIsModal: true,
+		pointerEvents: open ? "auto" : "none",
+		style: [
+			contentStyle,
+			...surfaceStyle,
+			animatedStyle
+		],
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(View, {
+				pointerEvents: "none",
+				style: shadowStyle,
+				testID: "uds-popover-shadow"
+			}),
+			shouldDrawFrame && /* @__PURE__ */ jsx(PopoverFrame, {
+				arrowHeight,
+				arrowStyle,
+				arrowWidth,
+				borderRadius: surfaceBorderRadius,
+				fill: surfaceFillColor,
+				placement: resolvedPlacement,
+				stroke: surfaceBorderColor,
+				strokeWidth: surfaceBorderWidth,
+				surfaceHeight: contentSize.height,
+				surfaceWidth: contentSize.width
+			}),
+			/* @__PURE__ */ jsxs(View, {
+				style: visualSurfaceStyle,
+				testID: "uds-popover-surface",
+				children: [
+					showBlurBox && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Box, {
+						style: StyleSheet.absoluteFill,
+						blur: blurIntensity,
+						blurTarget
+					}), /* @__PURE__ */ jsx(View, {
+						pointerEvents: "none",
+						style: [StyleSheet.absoluteFill, { backgroundColor: surfaceFillColor }]
+					})] }),
+					/* @__PURE__ */ jsx(View, {
+						style: popoverStyles.contentWrapper,
+						testID: "uds-popover-content-wrapper",
+						children
+					}),
+					!hideDismissButton && /* @__PURE__ */ jsx(Pressable$1, {
+						testID: "uds-popover-close",
+						accessibilityRole: "button",
+						accessibilityLabel: closeAccessibilityLabel,
+						onPress: onDismiss,
+						style: closeButtonStyle,
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "Cross",
+							variant: "outline",
+							style: popoverStyles.closeIcon,
+							dangerouslySetColor: popoverStyles.closeIcon.color,
+							dangerouslySetSize: popoverStyles.closeIcon.fontSize
+						})
+					})
+				]
+			})
+		]
+	});
+});
+const internalStyles = StyleSheet.create({
+	shadow: {
+		...StyleSheet.absoluteFillObject,
+		zIndex: 0
+	},
+	surface: {
+		overflow: "hidden",
+		position: "relative",
+		zIndex: 1
+	},
+	closeButton: {
+		position: "absolute",
+		alignItems: "center",
+		justifyContent: "center"
+	}
+});
+PopoverSurface.displayName = "PopoverSurface";
+//#endregion
+export { PopoverSurface };
+
+//# sourceMappingURL=PopoverSurface.js.map

package/dist/components/Popover/PopoverSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverSurface.js","names":["UDSPressable"],"sources":["../../../src/components/Popover/PopoverSurface.tsx"],"sourcesContent":["import { memo, useMemo } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { Platform, StyleSheet, View } from 'react-native';\nimport Animated from 'react-native-reanimated';\n\nimport { popoverStyles } from '../../../generated/styles';\nimport { Box } from '../Box';\nimport { Icon } from '../Icon';\nimport type { AnchoredPlacement } from '../internal/Overlay';\nimport { Pressable as UDSPressable } from '../Pressable';\nimport { usePopoverContext } from './PopoverContext';\nimport { PopoverFrame } from './PopoverFrame';\nimport type { PopoverContentProps } from './types';\n\nconst DEFAULT_CLOSE_ICON_SIZE = 16;\nconst DEFAULT_TRANSLUCENT_SURFACE_OPACITY = 0.5;\n\nconst AnimatedBox = Animated.createAnimatedComponent(Box);\n\ninterface PopoverSurfaceTokens {\n  backgroundBlurColor?: string;\n  backgroundBlurFallbackColor?: string;\n  backgroundBlurRadius?: number;\n  backgroundColor?: string;\n  backgroundOpacity?: number;\n  borderColor?: string;\n  borderRadius?: number;\n  borderWidth?: number;\n}\n\ninterface PopoverStylesWithSvgBorder {\n  svgBorder?: unknown;\n}\n\ninterface PopoverContentWrapperTokens {\n  paddingHorizontal?: number;\n  paddingVertical?: number;\n}\n\ninterface PopoverCloseIconContainerTokens {\n  padding?: number;\n  paddingHorizontal?: number;\n  paddingVertical?: number;\n}\n\ninterface PopoverCloseIconTokens {\n  fontSize?: number;\n  lineHeight?: number;\n}\n\ninterface PopoverSurfaceProps extends Omit<PopoverContentProps, 'children'> {\n  animatedStyle: StyleProp<ViewStyle>;\n  arrowHeight: number;\n  arrowStyle: StyleProp<ViewStyle>;\n  arrowWidth: number;\n  children?: PopoverContentProps['children'];\n  contentSize: { width: number; height: number };\n  contentStyle: StyleProp<ViewStyle>;\n  onDismiss: () => void;\n  positionedMaxWidth: number;\n  resolvedPlacement: AnchoredPlacement;\n}\n\nfunction getColorWithOpacity(color: string | undefined, opacity: number | undefined) {\n  if (!color || opacity === undefined) {\n    return color;\n  }\n\n  const normalized = color.trim();\n  const rgbMatch = normalized.match(/^rgb\\(([^)]+)\\)$/i);\n  if (rgbMatch) {\n    const channels = rgbMatch[1].split(',').map((part) => part.trim());\n    if (channels.length === 3) {\n      return `rgba(${channels.join(', ')}, ${opacity})`;\n    }\n  }\n\n  const rgbaMatch = normalized.match(/^rgba\\(([^)]+)\\)$/i);\n  if (rgbaMatch) {\n    const channels = rgbaMatch[1].split(',').map((part) => part.trim());\n    if (channels.length === 4) {\n      return `rgba(${channels.slice(0, 3).join(', ')}, ${opacity})`;\n    }\n  }\n\n  const hexMatch = normalized.match(/^#([\\da-f]{3}|[\\da-f]{6})$/i);\n  if (hexMatch) {\n    const value = hexMatch[1];\n    const [r, g, b] =\n      value.length === 3\n        ? value.split('').map((char) => parseInt(`${char}${char}`, 16))\n        : [\n            parseInt(value.slice(0, 2), 16),\n            parseInt(value.slice(2, 4), 16),\n            parseInt(value.slice(4, 6), 16),\n          ];\n\n    return `rgba(${r}, ${g}, ${b}, ${opacity})`;\n  }\n\n  return color;\n}\n\nfunction hasColorOpacity(color: string | undefined) {\n  if (!color) {\n    return false;\n  }\n\n  const normalized = color.trim().toLowerCase();\n  if (normalized === 'transparent') {\n    return true;\n  }\n\n  const rgbaMatch = normalized.match(/^rgba\\(([^)]+)\\)$/);\n  if (rgbaMatch) {\n    const channels = rgbaMatch[1].split(',').map((part) => part.trim());\n    const alpha = Number(channels[3]);\n\n    return channels.length === 4 && Number.isFinite(alpha) && alpha < 1;\n  }\n\n  return /^#[\\da-f]{4}$|^#[\\da-f]{8}$/.test(normalized);\n}\n\nfunction getPositiveNumber(...values: (number | undefined)[]) {\n  return values.find((value) => typeof value === 'number' && value > 0) ?? 0;\n}\n\nconst PopoverSurface = memo(function PopoverSurface({\n  animatedStyle,\n  arrowHeight,\n  arrowStyle,\n  arrowWidth,\n  children,\n  contentSize,\n  contentStyle,\n  maxHeight,\n  maxWidth,\n  onDismiss,\n  positionedMaxWidth,\n  resolvedPlacement,\n  style,\n  ...props\n}: PopoverSurfaceProps) {\n  const { blurTarget, closeAccessibilityLabel, hideArrow, hideDismissButton, open } =\n    usePopoverContext();\n\n  popoverStyles.useVariants({});\n\n  const svgBaseTokens = StyleSheet.flatten(popoverStyles.svgBase) as PopoverSurfaceTokens;\n  const svgBorderTokens = StyleSheet.flatten(\n    (popoverStyles as typeof popoverStyles & PopoverStylesWithSvgBorder).svgBorder,\n  ) as PopoverSurfaceTokens | undefined;\n  const configuredBlurRadius = Math.max(\n    svgBaseTokens.backgroundBlurRadius ?? 0,\n    popoverStyles.blur.backgroundBlurRadius ?? 0,\n  );\n  const blurIntensity = configuredBlurRadius > 0 ? configuredBlurRadius : 0;\n  const showBlurBox = blurIntensity > 0 && (Platform.OS === 'ios' || blurTarget != null);\n  const opaqueBackground = svgBaseTokens.backgroundColor ?? '#fff';\n  const fallbackOpacity =\n    blurIntensity > 0 && !svgBaseTokens.backgroundBlurColor && !hasColorOpacity(opaqueBackground)\n      ? DEFAULT_TRANSLUCENT_SURFACE_OPACITY\n      : undefined;\n  const surfaceFillColor =\n    getColorWithOpacity(opaqueBackground, svgBaseTokens.backgroundOpacity ?? fallbackOpacity) ??\n    opaqueBackground;\n  const surfaceBlurColor = svgBaseTokens.backgroundBlurColor ?? surfaceFillColor;\n  const surfaceFallbackColor = svgBaseTokens.backgroundBlurFallbackColor ?? surfaceBlurColor;\n  const surfaceBackgroundColor = showBlurBox\n    ? 'transparent'\n    : blurIntensity > 0\n      ? surfaceFallbackColor\n      : surfaceFillColor;\n  const surfaceBorderColor = svgBorderTokens?.borderColor ?? svgBaseTokens.borderColor;\n  const surfaceBorderWidth = svgBorderTokens?.borderWidth ?? svgBaseTokens.borderWidth ?? 0;\n  const surfaceBorderRadius = svgBaseTokens.borderRadius ?? 0;\n  const shouldDrawFrame = !hideArrow && contentSize.width > 0 && contentSize.height > 0;\n  // When the SVG frame draws the border, inset the visual surface by the same stroke width so\n  // content and blur do not paint over the continuous surface-plus-arrow border.\n  const frameBorderInset = shouldDrawFrame ? surfaceBorderWidth : 0;\n  const contentWrapperTokens = StyleSheet.flatten(\n    popoverStyles.contentWrapper,\n  ) as PopoverContentWrapperTokens;\n  const closeIconContainerTokens = StyleSheet.flatten(\n    popoverStyles.closeIconContainer,\n  ) as PopoverCloseIconContainerTokens;\n  const closeIconTokens = StyleSheet.flatten(popoverStyles.closeIcon) as PopoverCloseIconTokens;\n  const contentWrapperPaddingHorizontal = contentWrapperTokens.paddingHorizontal ?? 0;\n  const contentWrapperPaddingVertical = contentWrapperTokens.paddingVertical ?? 0;\n  const closeButtonPaddingHorizontal = getPositiveNumber(\n    closeIconContainerTokens.paddingHorizontal,\n    closeIconContainerTokens.padding,\n  );\n  const closeButtonPaddingVertical = getPositiveNumber(\n    closeIconContainerTokens.paddingVertical,\n    closeIconContainerTokens.padding,\n  );\n  const closeIconSize = getPositiveNumber(\n    popoverStyles.closeIcon.fontSize,\n    closeIconTokens.fontSize,\n    closeIconTokens.lineHeight,\n    DEFAULT_CLOSE_ICON_SIZE,\n  );\n  const closeButtonSize = closeIconSize + closeButtonPaddingHorizontal * 2;\n  const closeButtonHeight = closeIconSize + closeButtonPaddingVertical * 2;\n\n  const surfaceStyle = useMemo(\n    () => [\n      {\n        borderRadius: surfaceBorderRadius,\n        maxWidth: maxWidth ?? positionedMaxWidth,\n        maxHeight,\n        overflow: 'visible' as const,\n      },\n      style,\n    ],\n    [maxHeight, maxWidth, positionedMaxWidth, style, surfaceBorderRadius],\n  );\n\n  const shadowStyle = useMemo(\n    () => [\n      popoverStyles.root,\n      internalStyles.shadow,\n      {\n        borderRadius: surfaceBorderRadius,\n      },\n    ],\n    [popoverStyles.root, surfaceBorderRadius],\n  );\n\n  const visualSurfaceStyle = useMemo(\n    () => [\n      popoverStyles.svgBase,\n      internalStyles.surface,\n      {\n        backgroundColor: surfaceBackgroundColor,\n        borderColor: surfaceBorderColor,\n        borderRadius: surfaceBorderRadius,\n        borderWidth: shouldDrawFrame ? 0 : surfaceBorderWidth,\n        maxWidth: maxWidth ?? positionedMaxWidth,\n        maxHeight,\n        padding: frameBorderInset,\n      },\n    ],\n    [\n      frameBorderInset,\n      maxHeight,\n      maxWidth,\n      popoverStyles.svgBase,\n      positionedMaxWidth,\n      surfaceBackgroundColor,\n      surfaceBorderColor,\n      surfaceBorderRadius,\n      surfaceBorderWidth,\n      shouldDrawFrame,\n    ],\n  );\n\n  const closeButtonStyle = useMemo(\n    () => [\n      internalStyles.closeButton,\n      {\n        top: frameBorderInset + contentWrapperPaddingVertical,\n        right: frameBorderInset + contentWrapperPaddingHorizontal,\n        width: closeButtonSize,\n        height: closeButtonHeight,\n      },\n      popoverStyles.closeIconContainer,\n    ],\n    [\n      closeButtonHeight,\n      closeButtonSize,\n      contentWrapperPaddingHorizontal,\n      contentWrapperPaddingVertical,\n      frameBorderInset,\n      popoverStyles.closeIconContainer,\n    ],\n  );\n\n  return (\n    <AnimatedBox\n      role=\"dialog\"\n      accessibilityViewIsModal\n      pointerEvents={open ? 'auto' : 'none'}\n      style={[contentStyle, ...surfaceStyle, animatedStyle]}\n      {...props}\n    >\n      <View pointerEvents=\"none\" style={shadowStyle} testID=\"uds-popover-shadow\" />\n      {shouldDrawFrame && (\n        <PopoverFrame\n          arrowHeight={arrowHeight}\n          arrowStyle={arrowStyle}\n          arrowWidth={arrowWidth}\n          borderRadius={surfaceBorderRadius}\n          fill={surfaceFillColor}\n          placement={resolvedPlacement}\n          stroke={surfaceBorderColor}\n          strokeWidth={surfaceBorderWidth}\n          surfaceHeight={contentSize.height}\n          surfaceWidth={contentSize.width}\n        />\n      )}\n      <View style={visualSurfaceStyle} testID=\"uds-popover-surface\">\n        {showBlurBox && (\n          <>\n            <Box style={StyleSheet.absoluteFill} blur={blurIntensity} blurTarget={blurTarget} />\n            <View\n              pointerEvents=\"none\"\n              style={[StyleSheet.absoluteFill, { backgroundColor: surfaceFillColor }]}\n            />\n          </>\n        )}\n        <View style={popoverStyles.contentWrapper} testID=\"uds-popover-content-wrapper\">\n          {children}\n        </View>\n        {!hideDismissButton && (\n          <UDSPressable\n            testID=\"uds-popover-close\"\n            accessibilityRole=\"button\"\n            accessibilityLabel={closeAccessibilityLabel}\n            onPress={onDismiss}\n            style={closeButtonStyle}\n          >\n            <Icon\n              name=\"Cross\"\n              variant=\"outline\"\n              style={popoverStyles.closeIcon}\n              dangerouslySetColor={popoverStyles.closeIcon.color}\n              dangerouslySetSize={popoverStyles.closeIcon.fontSize}\n            />\n          </UDSPressable>\n        )}\n      </View>\n    </AnimatedBox>\n  );\n});\n\nconst internalStyles = StyleSheet.create({\n  shadow: {\n    ...StyleSheet.absoluteFillObject,\n    zIndex: 0,\n  },\n  surface: {\n    overflow: 'hidden',\n    position: 'relative',\n    zIndex: 1,\n  },\n  closeButton: {\n    position: 'absolute',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n\nPopoverSurface.displayName = 'PopoverSurface';\n\nexport { PopoverSurface };\n"],"mappings":"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"}

package/dist/components/Popover/PopoverTitle.cjs

@@ -0,0 +1,23 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_components_Text = require("../Text.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Popover/PopoverTitle.tsx
+/**
+* Title text for {@link PopoverContent}.
+*
+* Provides the default popover title typography while accepting the standard
+* mobile {@link Text} props.
+*/
+const PopoverTitle = (0, react.memo)(function PopoverTitle({ variant = "label1/emphasized", color = "primary", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+		variant,
+		color,
+		...props
+	});
+});
+PopoverTitle.displayName = "PopoverTitle";
+//#endregion
+exports.PopoverTitle = PopoverTitle;

package/dist/components/Popover/PopoverTitle.d.cts

@@ -0,0 +1,15 @@
+
+import { TextProps } from "../Text.cjs";
+import * as _$react from "react";
+
+//#region src/components/Popover/PopoverTitle.d.ts
+/**
+ * Title text for {@link PopoverContent}.
+ *
+ * Provides the default popover title typography while accepting the standard
+ * mobile {@link Text} props.
+ */
+declare const PopoverTitle: _$react.NamedExoticComponent<TextProps>;
+//#endregion
+export { PopoverTitle };
+//# sourceMappingURL=PopoverTitle.d.cts.map

package/dist/components/Popover/PopoverTitle.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverTitle.d.cts","names":[],"sources":["../../../src/components/Popover/PopoverTitle.tsx"],"mappings":";;;;;;;;;AAWkB;;cAAZ,YAAA,EAAY,OAAA,CAAA,oBAAA,CAMhB,SAAA"}

package/dist/components/Popover/PopoverTitle.d.ts

@@ -0,0 +1,15 @@
+
+import { TextProps } from "../Text.js";
+import * as _$react from "react";
+
+//#region src/components/Popover/PopoverTitle.d.ts
+/**
+ * Title text for {@link PopoverContent}.
+ *
+ * Provides the default popover title typography while accepting the standard
+ * mobile {@link Text} props.
+ */
+declare const PopoverTitle: _$react.NamedExoticComponent<TextProps>;
+//#endregion
+export { PopoverTitle };
+//# sourceMappingURL=PopoverTitle.d.ts.map

package/dist/components/Popover/PopoverTitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverTitle.d.ts","names":[],"sources":["../../../src/components/Popover/PopoverTitle.tsx"],"mappings":";;;;;;;;;AAWkB;;cAAZ,YAAA,EAAY,OAAA,CAAA,oBAAA,CAMhB,SAAA"}

package/dist/components/Popover/PopoverTitle.js

@@ -0,0 +1,23 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { Text } from "../Text.js";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Popover/PopoverTitle.tsx
+/**
+* Title text for {@link PopoverContent}.
+*
+* Provides the default popover title typography while accepting the standard
+* mobile {@link Text} props.
+*/
+const PopoverTitle = memo(function PopoverTitle({ variant = "label1/emphasized", color = "primary", ...props }) {
+	return /* @__PURE__ */ jsx(Text, {
+		variant,
+		color,
+		...props
+	});
+});
+PopoverTitle.displayName = "PopoverTitle";
+//#endregion
+export { PopoverTitle };
+
+//# sourceMappingURL=PopoverTitle.js.map

package/dist/components/Popover/PopoverTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverTitle.js","names":[],"sources":["../../../src/components/Popover/PopoverTitle.tsx"],"sourcesContent":["import { memo } from 'react';\n\nimport { Text } from '../Text';\nimport type { PopoverTitleProps } from './types';\n\n/**\n * Title text for {@link PopoverContent}.\n *\n * Provides the default popover title typography while accepting the standard\n * mobile {@link Text} props.\n */\nconst PopoverTitle = memo(function PopoverTitle({\n  variant = 'label1/emphasized',\n  color = 'primary',\n  ...props\n}: PopoverTitleProps) {\n  return <Text variant={variant} color={color} {...props} />;\n});\n\nPopoverTitle.displayName = 'PopoverTitle';\n\nexport { PopoverTitle };\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,eAAe,KAAK,SAAS,aAAa,EAC9C,UAAU,qBACV,QAAQ,WACR,GAAG,SACiB;CACpB,OAAO,oBAAC,MAAD;EAAe;EAAgB;EAAO,GAAI;EAAS,CAAA;EAC1D;AAEF,aAAa,cAAc"}