@yahoo/uds-mobile 2.17.0 → 2.18.0

package/dist/bin/generateTheme.mjs

@@ -414,7 +414,12 @@ function resolveValue(variable, config, colorMode, propName) {
 			}
 			return "transparent";
 		}
-		if (propName === "borderColor") {
+		if (propName === "blurBackgroundColorFallback") {
+			const fbv = preset.fallbackBlurredBackgroundValue ?? preset.finalBackgroundValue;
+			if (fbv) return `rgb(${fbv.r}, ${fbv.g}, ${fbv.b})`;
+			return "transparent";
+		}
+		if (propName === "borderColor" || propName === "stroke") {
 			const borderColorDef = preset.borderColor;
 			if (borderColorDef.type === "line") {
 				const colorDef = palette.line?.[borderColorDef.value];
@@ -434,7 +439,7 @@ function resolveValue(variable, config, colorMode, propName) {
 			}
 			return "transparent";
 		}
-		if (propName === "borderWidth") {
+		if (propName === "borderWidth" || propName === "strokeWidth") {
 			const borderWidthKey = preset.borderWidth;
 			return scaleConfig.borderWidth[borderWidthKey] ?? 0;
 		}

package/dist/bin/mobile/scripts/utils/configToRNMappings.mjs

@@ -12,11 +12,13 @@ const PROPERTY_TO_RN_PROPS = {
 	height: ["height"],
 	width: ["width"],
 	backgroundColor: ["backgroundColor"],
+	blurBackgroundColorFallback: ["backgroundBlurFallbackColor"],
 	color: ["color"],
 	labelColor: ["color"],
 	borderColor: ["borderColor"],
 	borderWidth: ["borderWidth"],
 	borderRadius: ["borderRadius"],
+	fillOpacity: ["backgroundOpacity"],
 	iconSize: ["fontSize", "lineHeight"],
 	opacity: ["opacity"],
 	horizontalMargin: ["marginHorizontal"],
@@ -25,6 +27,8 @@ const PROPERTY_TO_RN_PROPS = {
 	shadow: ["boxShadow"],
 	insetShadow: ["boxShadow"],
 	bannerInnerShadow: ["boxShadow"],
+	stroke: ["borderColor"],
+	strokeWidth: ["borderWidth"],
 	textDecorationLine: ["textDecorationLine"],
 	textVariant: [
 		"fontFamily",

package/dist/components/Popover/Popover.cjs

@@ -0,0 +1,92 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_components_internal_Overlay_useControllableState = require("../internal/Overlay/useControllableState.cjs");
+const require_components_Popover_PopoverContext = require("./PopoverContext.cjs");
+const require_components_Popover_popoverLayer = require("./popoverLayer.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Popover/Popover.tsx
+const DEFAULT_PLACEMENT = "bottom";
+const DEFAULT_OFFSET = 9;
+const DEFAULT_COLLISION_PADDING = 12;
+/**
+* The root popover component for React Native.
+*
+* Manages open state, trigger measurement, and anchored positioning for a
+* floating surface. Use with {@link PopoverTrigger} and {@link PopoverContent}.
+*
+* @example
+* ```tsx
+* <Popover>
+*   <PopoverTrigger render={<Button>Open popover</Button>} />
+*   <PopoverContent>
+*     <PopoverTitle>Storage almost full</PopoverTitle>
+*     <PopoverDescription>Review large files or upgrade your plan.</PopoverDescription>
+*   </PopoverContent>
+* </Popover>
+* ```
+*/
+const Popover = (0, react.memo)(function Popover({ children, open: openProp, defaultOpen = false, onOpenChange, onOpen, onClose, placement = DEFAULT_PLACEMENT, align, offset = DEFAULT_OFFSET, alignOffset = 0, avoidCollisions = true, collisionPadding = DEFAULT_COLLISION_PADDING, width = "content", sameWidth = false, hideArrow = false, hideDismissButton = false, dismissible = true, closeAccessibilityLabel = "Close popover", reduceMotion = false, insets, blurTarget }) {
+	const id = (0, react.useId)();
+	const triggerRef = (0, react.useRef)(null);
+	const [triggerRect, setTriggerRect] = (0, react.useState)(null);
+	const [open, setOpenState] = require_components_internal_Overlay_useControllableState.useControllableState({
+		value: openProp,
+		defaultValue: defaultOpen,
+		onChange: onOpenChange
+	});
+	const previousOpenRef = (0, react.useRef)(open);
+	const setOpen = setOpenState;
+	(0, react.useEffect)(() => {
+		if (previousOpenRef.current === open) return;
+		previousOpenRef.current = open;
+		if (open) onOpen?.();
+		else onClose?.();
+	}, [
+		onClose,
+		onOpen,
+		open
+	]);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		require_components_Popover_popoverLayer.notifyPopoverOpened(id);
+	}, [id, open]);
+	(0, react.useEffect)(() => require_components_Popover_popoverLayer.subscribeToPopoverLayer((openedId) => {
+		if (openedId !== id && open) setOpen(false);
+	}), [
+		id,
+		open,
+		setOpen
+	]);
+	const contextValue = {
+		id,
+		open,
+		setOpen,
+		triggerRef,
+		triggerRect,
+		setTriggerRect,
+		placement,
+		align,
+		offset,
+		alignOffset,
+		avoidCollisions,
+		collisionPadding,
+		width,
+		sameWidth,
+		hideArrow,
+		hideDismissButton,
+		dismissible,
+		closeAccessibilityLabel,
+		reduceMotion,
+		insets,
+		blurTarget
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Popover_PopoverContext.PopoverContext.Provider, {
+		value: contextValue,
+		children
+	});
+});
+Popover.displayName = "Popover";
+//#endregion
+exports.Popover = Popover;

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

@@ -0,0 +1,26 @@
+
+import { PopoverProps } from "./types.cjs";
+import * as _$react from "react";
+
+//#region src/components/Popover/Popover.d.ts
+/**
+ * The root popover component for React Native.
+ *
+ * Manages open state, trigger measurement, and anchored positioning for a
+ * floating surface. Use with {@link PopoverTrigger} and {@link PopoverContent}.
+ *
+ * @example
+ * ```tsx
+ * <Popover>
+ *   <PopoverTrigger render={<Button>Open popover</Button>} />
+ *   <PopoverContent>
+ *     <PopoverTitle>Storage almost full</PopoverTitle>
+ *     <PopoverDescription>Review large files or upgrade your plan.</PopoverDescription>
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ */
+declare const Popover: _$react.NamedExoticComponent<PopoverProps>;
+//#endregion
+export { Popover };
+//# sourceMappingURL=Popover.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.cts","names":[],"sources":["../../../src/components/Popover/Popover.tsx"],"mappings":";;;;;;;;AAMiE;;;;;;;;;;;;;;cAuB3D,OAAA,EAAO,OAAA,CAAA,oBAAA,CAAA,YAAA"}

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

@@ -0,0 +1,26 @@
+
+import { PopoverProps } from "./types.js";
+import * as _$react from "react";
+
+//#region src/components/Popover/Popover.d.ts
+/**
+ * The root popover component for React Native.
+ *
+ * Manages open state, trigger measurement, and anchored positioning for a
+ * floating surface. Use with {@link PopoverTrigger} and {@link PopoverContent}.
+ *
+ * @example
+ * ```tsx
+ * <Popover>
+ *   <PopoverTrigger render={<Button>Open popover</Button>} />
+ *   <PopoverContent>
+ *     <PopoverTitle>Storage almost full</PopoverTitle>
+ *     <PopoverDescription>Review large files or upgrade your plan.</PopoverDescription>
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ */
+declare const Popover: _$react.NamedExoticComponent<PopoverProps>;
+//#endregion
+export { Popover };
+//# sourceMappingURL=Popover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","names":[],"sources":["../../../src/components/Popover/Popover.tsx"],"mappings":";;;;;;;;AAMiE;;;;;;;;;;;;;;cAuB3D,OAAA,EAAO,OAAA,CAAA,oBAAA,CAAA,YAAA"}

package/dist/components/Popover/Popover.js

@@ -0,0 +1,92 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { useControllableState } from "../internal/Overlay/useControllableState.js";
+import { PopoverContext } from "./PopoverContext.js";
+import { notifyPopoverOpened, subscribeToPopoverLayer } from "./popoverLayer.js";
+import { memo, useEffect, useId, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Popover/Popover.tsx
+const DEFAULT_PLACEMENT = "bottom";
+const DEFAULT_OFFSET = 9;
+const DEFAULT_COLLISION_PADDING = 12;
+/**
+* The root popover component for React Native.
+*
+* Manages open state, trigger measurement, and anchored positioning for a
+* floating surface. Use with {@link PopoverTrigger} and {@link PopoverContent}.
+*
+* @example
+* ```tsx
+* <Popover>
+*   <PopoverTrigger render={<Button>Open popover</Button>} />
+*   <PopoverContent>
+*     <PopoverTitle>Storage almost full</PopoverTitle>
+*     <PopoverDescription>Review large files or upgrade your plan.</PopoverDescription>
+*   </PopoverContent>
+* </Popover>
+* ```
+*/
+const Popover = memo(function Popover({ children, open: openProp, defaultOpen = false, onOpenChange, onOpen, onClose, placement = DEFAULT_PLACEMENT, align, offset = DEFAULT_OFFSET, alignOffset = 0, avoidCollisions = true, collisionPadding = DEFAULT_COLLISION_PADDING, width = "content", sameWidth = false, hideArrow = false, hideDismissButton = false, dismissible = true, closeAccessibilityLabel = "Close popover", reduceMotion = false, insets, blurTarget }) {
+	const id = useId();
+	const triggerRef = useRef(null);
+	const [triggerRect, setTriggerRect] = useState(null);
+	const [open, setOpenState] = useControllableState({
+		value: openProp,
+		defaultValue: defaultOpen,
+		onChange: onOpenChange
+	});
+	const previousOpenRef = useRef(open);
+	const setOpen = setOpenState;
+	useEffect(() => {
+		if (previousOpenRef.current === open) return;
+		previousOpenRef.current = open;
+		if (open) onOpen?.();
+		else onClose?.();
+	}, [
+		onClose,
+		onOpen,
+		open
+	]);
+	useEffect(() => {
+		if (!open) return;
+		notifyPopoverOpened(id);
+	}, [id, open]);
+	useEffect(() => subscribeToPopoverLayer((openedId) => {
+		if (openedId !== id && open) setOpen(false);
+	}), [
+		id,
+		open,
+		setOpen
+	]);
+	const contextValue = {
+		id,
+		open,
+		setOpen,
+		triggerRef,
+		triggerRect,
+		setTriggerRect,
+		placement,
+		align,
+		offset,
+		alignOffset,
+		avoidCollisions,
+		collisionPadding,
+		width,
+		sameWidth,
+		hideArrow,
+		hideDismissButton,
+		dismissible,
+		closeAccessibilityLabel,
+		reduceMotion,
+		insets,
+		blurTarget
+	};
+	return /* @__PURE__ */ jsx(PopoverContext.Provider, {
+		value: contextValue,
+		children
+	});
+});
+Popover.displayName = "Popover";
+//#endregion
+export { Popover };
+
+//# sourceMappingURL=Popover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","names":[],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import { memo, useEffect, useId, useRef, useState } from 'react';\nimport type { View } from 'react-native';\n\nimport { useControllableState } from '../internal/Overlay';\nimport { PopoverContext } from './PopoverContext';\nimport { notifyPopoverOpened, subscribeToPopoverLayer } from './popoverLayer';\nimport type { PopoverContextValue, PopoverProps } from './types';\n\nconst DEFAULT_PLACEMENT = 'bottom';\nconst DEFAULT_OFFSET = 9;\nconst DEFAULT_COLLISION_PADDING = 12;\n\n/**\n * The root popover component for React Native.\n *\n * Manages open state, trigger measurement, and anchored positioning for a\n * floating surface. Use with {@link PopoverTrigger} and {@link PopoverContent}.\n *\n * @example\n * ```tsx\n * <Popover>\n *   <PopoverTrigger render={<Button>Open popover</Button>} />\n *   <PopoverContent>\n *     <PopoverTitle>Storage almost full</PopoverTitle>\n *     <PopoverDescription>Review large files or upgrade your plan.</PopoverDescription>\n *   </PopoverContent>\n * </Popover>\n * ```\n */\nconst Popover = memo(function Popover({\n  children,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  onOpen,\n  onClose,\n  placement = DEFAULT_PLACEMENT,\n  align,\n  offset = DEFAULT_OFFSET,\n  alignOffset = 0,\n  avoidCollisions = true,\n  collisionPadding = DEFAULT_COLLISION_PADDING,\n  width = 'content',\n  sameWidth = false,\n  hideArrow = false,\n  hideDismissButton = false,\n  dismissible = true,\n  closeAccessibilityLabel = 'Close popover',\n  reduceMotion = false,\n  insets,\n  blurTarget,\n}: PopoverProps) {\n  const id = useId();\n  const triggerRef = useRef<View | null>(null);\n  const [triggerRect, setTriggerRect] = useState<PopoverContextValue['triggerRect']>(null);\n  const [open, setOpenState] = useControllableState({\n    value: openProp,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  });\n  const previousOpenRef = useRef(open);\n  const setOpen = setOpenState;\n\n  useEffect(() => {\n    if (previousOpenRef.current === open) {\n      return;\n    }\n\n    previousOpenRef.current = open;\n\n    if (open) {\n      onOpen?.();\n    } else {\n      onClose?.();\n    }\n  }, [onClose, onOpen, open]);\n\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    notifyPopoverOpened(id);\n  }, [id, open]);\n\n  useEffect(\n    () =>\n      subscribeToPopoverLayer((openedId) => {\n        if (openedId !== id && open) {\n          setOpen(false);\n        }\n      }),\n    [id, open, setOpen],\n  );\n\n  const contextValue: PopoverContextValue = {\n    id,\n    open,\n    setOpen,\n    triggerRef,\n    triggerRect,\n    setTriggerRect,\n    placement,\n    align,\n    offset,\n    alignOffset,\n    avoidCollisions,\n    collisionPadding,\n    width,\n    sameWidth,\n    hideArrow,\n    hideDismissButton,\n    dismissible,\n    closeAccessibilityLabel,\n    reduceMotion,\n    insets,\n    blurTarget,\n  };\n\n  return <PopoverContext.Provider value={contextValue}>{children}</PopoverContext.Provider>;\n});\n\nPopover.displayName = 'Popover';\n\nexport { Popover };\n"],"mappings":";;;;;;;AAQA,MAAM,oBAAoB;AAC1B,MAAM,iBAAiB;AACvB,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;AAmBlC,MAAM,UAAU,KAAK,SAAS,QAAQ,EACpC,UACA,MAAM,UACN,cAAc,OACd,cACA,QACA,SACA,YAAY,mBACZ,OACA,SAAS,gBACT,cAAc,GACd,kBAAkB,MAClB,mBAAmB,2BACnB,QAAQ,WACR,YAAY,OACZ,YAAY,OACZ,oBAAoB,OACpB,cAAc,MACd,0BAA0B,iBAC1B,eAAe,OACf,QACA,cACe;CACf,MAAM,KAAK,OAAO;CAClB,MAAM,aAAa,OAAoB,KAAK;CAC5C,MAAM,CAAC,aAAa,kBAAkB,SAA6C,KAAK;CACxF,MAAM,CAAC,MAAM,gBAAgB,qBAAqB;EAChD,OAAO;EACP,cAAc;EACd,UAAU;EACX,CAAC;CACF,MAAM,kBAAkB,OAAO,KAAK;CACpC,MAAM,UAAU;CAEhB,gBAAgB;EACd,IAAI,gBAAgB,YAAY,MAC9B;EAGF,gBAAgB,UAAU;EAE1B,IAAI,MACF,UAAU;OAEV,WAAW;IAEZ;EAAC;EAAS;EAAQ;EAAK,CAAC;CAE3B,gBAAgB;EACd,IAAI,CAAC,MACH;EAGF,oBAAoB,GAAG;IACtB,CAAC,IAAI,KAAK,CAAC;CAEd,gBAEI,yBAAyB,aAAa;EACpC,IAAI,aAAa,MAAM,MACrB,QAAQ,MAAM;GAEhB,EACJ;EAAC;EAAI;EAAM;EAAQ,CACpB;CAED,MAAM,eAAoC;EACxC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CAED,OAAO,oBAAC,eAAe,UAAhB;EAAyB,OAAO;EAAe;EAAmC,CAAA;EACzF;AAEF,QAAQ,cAAc"}

package/dist/components/Popover/PopoverContent.cjs

@@ -0,0 +1,124 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_components_internal_Overlay_useAnchoredPosition = require("../internal/Overlay/useAnchoredPosition.cjs");
+const require_components_Popover_PopoverContext = require("./PopoverContext.cjs");
+const require_components_Popover_PopoverPortalLayer = require("./PopoverPortalLayer.cjs");
+const require_components_Popover_PopoverSurface = require("./PopoverSurface.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let generated_styles = require("../../../generated/styles");
+let react_native_reanimated = require("react-native-reanimated");
+//#region src/components/Popover/PopoverContent.tsx
+const ARROW_HEIGHT = 12;
+const ARROW_WIDTH = 22;
+const ANIMATION_DURATION = 200;
+/**
+* Floating content surface for {@link Popover}.
+*
+* Renders the anchored surface, arrow, optional dismiss button, blur/elevation
+* background, and open/close transition in a full-window portal layer.
+*/
+const PopoverContent = (0, react.memo)(function PopoverContent({ children, maxWidth, maxHeight, style, onLayout, ...props }) {
+	const context = require_components_Popover_PopoverContext.usePopoverContext();
+	const { align, alignOffset, avoidCollisions, collisionPadding, dismissible, hideArrow, insets, offset, open, placement, reduceMotion, sameWidth, setOpen, triggerRect, width } = context;
+	const [contentSize, setContentSize] = (0, react.useState)({
+		width: 0,
+		height: 0
+	});
+	const [shouldRender, setShouldRender] = (0, react.useState)(open);
+	const dismiss = (0, react.useCallback)(() => setOpen(false), [setOpen]);
+	const { contentStyle, arrowStyle, anchorReady, resolvedPlacement, maxWidth: positionedMaxWidth } = require_components_internal_Overlay_useAnchoredPosition.useAnchoredPosition({
+		triggerRect,
+		contentSize,
+		placement,
+		align,
+		offset: offset + (hideArrow ? 0 : ARROW_HEIGHT),
+		alignOffset,
+		avoidCollisions,
+		collisionPadding,
+		width,
+		sameWidth,
+		insets,
+		arrowHeight: ARROW_HEIGHT,
+		arrowWidth: ARROW_WIDTH
+	});
+	const isPositionedOpen = open && anchorReady && contentSize.height > 0;
+	const animationDistance = Math.min(offset, 12);
+	const animationSide = resolvedPlacement.split("-")[0];
+	const shouldAnimateVertically = animationSide === "top" || animationSide === "bottom";
+	const animationTranslate = (animationSide === "top" || animationSide === "start" ? 1 : -1) * animationDistance;
+	const progress = (0, react_native_reanimated.useDerivedValue)(() => (0, react_native_reanimated.withTiming)(isPositionedOpen ? 1 : 0, {
+		duration: reduceMotion ? 0 : ANIMATION_DURATION,
+		easing: react_native_reanimated.Easing.out(react_native_reanimated.Easing.ease)
+	}), [isPositionedOpen, reduceMotion]);
+	const animatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => {
+		return {
+			opacity: progress.value,
+			transform: [{ scale: .97 + progress.value * .03 }, shouldAnimateVertically ? { translateY: animationTranslate * (1 - progress.value) } : { translateX: animationTranslate * (1 - progress.value) }]
+		};
+	});
+	const handleLayout = (0, react.useCallback)((event) => {
+		const { width: layoutWidth, height: layoutHeight } = event.nativeEvent.layout;
+		setContentSize({
+			width: layoutWidth,
+			height: layoutHeight
+		});
+		onLayout?.(event);
+	}, [onLayout]);
+	(0, react.useEffect)(() => {
+		if (open) {
+			setShouldRender(true);
+			return;
+		}
+		if (reduceMotion) {
+			setShouldRender(false);
+			setContentSize({
+				width: 0,
+				height: 0
+			});
+			return;
+		}
+		const timeout = setTimeout(() => {
+			setShouldRender(false);
+			setContentSize({
+				width: 0,
+				height: 0
+			});
+		}, ANIMATION_DURATION);
+		return () => clearTimeout(timeout);
+	}, [open, reduceMotion]);
+	generated_styles.popoverStyles.useVariants({});
+	if (!shouldRender) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Popover_PopoverPortalLayer.PopoverPortalLayer, {
+		open,
+		dismissible,
+		onDismiss: dismiss,
+		children: (layerDismiss) => {
+			const surface = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Popover_PopoverSurface.PopoverSurface, {
+				animatedStyle,
+				arrowHeight: ARROW_HEIGHT,
+				arrowStyle,
+				arrowWidth: ARROW_WIDTH,
+				contentSize,
+				contentStyle,
+				maxHeight,
+				maxWidth,
+				onDismiss: layerDismiss,
+				onLayout: handleLayout,
+				positionedMaxWidth,
+				resolvedPlacement,
+				style,
+				...props,
+				children
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Popover_PopoverContext.PopoverContext.Provider, {
+				value: context,
+				children: surface
+			});
+		}
+	});
+});
+PopoverContent.displayName = "PopoverContent";
+//#endregion
+exports.PopoverContent = PopoverContent;

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

@@ -0,0 +1,15 @@
+
+import { PopoverContentProps } from "./types.cjs";
+import * as _$react from "react";
+
+//#region src/components/Popover/PopoverContent.d.ts
+/**
+ * Floating content surface for {@link Popover}.
+ *
+ * Renders the anchored surface, arrow, optional dismiss button, blur/elevation
+ * background, and open/close transition in a full-window portal layer.
+ */
+declare const PopoverContent: _$react.NamedExoticComponent<PopoverContentProps>;
+//#endregion
+export { PopoverContent };
+//# sourceMappingURL=PopoverContent.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverContent.d.cts","names":[],"sources":["../../../src/components/Popover/PopoverContent.tsx"],"mappings":";;;;;;;;AASmD;;;cAY7C,cAAA,EAAc,OAAA,CAAA,oBAAA,CAAA,mBAAA"}

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

@@ -0,0 +1,15 @@
+
+import { PopoverContentProps } from "./types.js";
+import * as _$react from "react";
+
+//#region src/components/Popover/PopoverContent.d.ts
+/**
+ * Floating content surface for {@link Popover}.
+ *
+ * Renders the anchored surface, arrow, optional dismiss button, blur/elevation
+ * background, and open/close transition in a full-window portal layer.
+ */
+declare const PopoverContent: _$react.NamedExoticComponent<PopoverContentProps>;
+//#endregion
+export { PopoverContent };
+//# sourceMappingURL=PopoverContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverContent.d.ts","names":[],"sources":["../../../src/components/Popover/PopoverContent.tsx"],"mappings":";;;;;;;;AASmD;;;cAY7C,cAAA,EAAc,OAAA,CAAA,oBAAA,CAAA,mBAAA"}

package/dist/components/Popover/PopoverContent.js

@@ -0,0 +1,124 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { useAnchoredPosition } from "../internal/Overlay/useAnchoredPosition.js";
+import { PopoverContext, usePopoverContext } from "./PopoverContext.js";
+import { PopoverPortalLayer } from "./PopoverPortalLayer.js";
+import { PopoverSurface } from "./PopoverSurface.js";
+import { memo, useCallback, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { popoverStyles } from "../../../generated/styles";
+import { Easing, useAnimatedStyle, useDerivedValue, withTiming } from "react-native-reanimated";
+//#region src/components/Popover/PopoverContent.tsx
+const ARROW_HEIGHT = 12;
+const ARROW_WIDTH = 22;
+const ANIMATION_DURATION = 200;
+/**
+* Floating content surface for {@link Popover}.
+*
+* Renders the anchored surface, arrow, optional dismiss button, blur/elevation
+* background, and open/close transition in a full-window portal layer.
+*/
+const PopoverContent = memo(function PopoverContent({ children, maxWidth, maxHeight, style, onLayout, ...props }) {
+	const context = usePopoverContext();
+	const { align, alignOffset, avoidCollisions, collisionPadding, dismissible, hideArrow, insets, offset, open, placement, reduceMotion, sameWidth, setOpen, triggerRect, width } = context;
+	const [contentSize, setContentSize] = useState({
+		width: 0,
+		height: 0
+	});
+	const [shouldRender, setShouldRender] = useState(open);
+	const dismiss = useCallback(() => setOpen(false), [setOpen]);
+	const { contentStyle, arrowStyle, anchorReady, resolvedPlacement, maxWidth: positionedMaxWidth } = useAnchoredPosition({
+		triggerRect,
+		contentSize,
+		placement,
+		align,
+		offset: offset + (hideArrow ? 0 : ARROW_HEIGHT),
+		alignOffset,
+		avoidCollisions,
+		collisionPadding,
+		width,
+		sameWidth,
+		insets,
+		arrowHeight: ARROW_HEIGHT,
+		arrowWidth: ARROW_WIDTH
+	});
+	const isPositionedOpen = open && anchorReady && contentSize.height > 0;
+	const animationDistance = Math.min(offset, 12);
+	const animationSide = resolvedPlacement.split("-")[0];
+	const shouldAnimateVertically = animationSide === "top" || animationSide === "bottom";
+	const animationTranslate = (animationSide === "top" || animationSide === "start" ? 1 : -1) * animationDistance;
+	const progress = useDerivedValue(() => withTiming(isPositionedOpen ? 1 : 0, {
+		duration: reduceMotion ? 0 : ANIMATION_DURATION,
+		easing: Easing.out(Easing.ease)
+	}), [isPositionedOpen, reduceMotion]);
+	const animatedStyle = useAnimatedStyle(() => {
+		return {
+			opacity: progress.value,
+			transform: [{ scale: .97 + progress.value * .03 }, shouldAnimateVertically ? { translateY: animationTranslate * (1 - progress.value) } : { translateX: animationTranslate * (1 - progress.value) }]
+		};
+	});
+	const handleLayout = useCallback((event) => {
+		const { width: layoutWidth, height: layoutHeight } = event.nativeEvent.layout;
+		setContentSize({
+			width: layoutWidth,
+			height: layoutHeight
+		});
+		onLayout?.(event);
+	}, [onLayout]);
+	useEffect(() => {
+		if (open) {
+			setShouldRender(true);
+			return;
+		}
+		if (reduceMotion) {
+			setShouldRender(false);
+			setContentSize({
+				width: 0,
+				height: 0
+			});
+			return;
+		}
+		const timeout = setTimeout(() => {
+			setShouldRender(false);
+			setContentSize({
+				width: 0,
+				height: 0
+			});
+		}, ANIMATION_DURATION);
+		return () => clearTimeout(timeout);
+	}, [open, reduceMotion]);
+	popoverStyles.useVariants({});
+	if (!shouldRender) return null;
+	return /* @__PURE__ */ jsx(PopoverPortalLayer, {
+		open,
+		dismissible,
+		onDismiss: dismiss,
+		children: (layerDismiss) => {
+			const surface = /* @__PURE__ */ jsx(PopoverSurface, {
+				animatedStyle,
+				arrowHeight: ARROW_HEIGHT,
+				arrowStyle,
+				arrowWidth: ARROW_WIDTH,
+				contentSize,
+				contentStyle,
+				maxHeight,
+				maxWidth,
+				onDismiss: layerDismiss,
+				onLayout: handleLayout,
+				positionedMaxWidth,
+				resolvedPlacement,
+				style,
+				...props,
+				children
+			});
+			return /* @__PURE__ */ jsx(PopoverContext.Provider, {
+				value: context,
+				children: surface
+			});
+		}
+	});
+});
+PopoverContent.displayName = "PopoverContent";
+//#endregion
+export { PopoverContent };
+
+//# sourceMappingURL=PopoverContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverContent.js","names":[],"sources":["../../../src/components/Popover/PopoverContent.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useState } from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport { Easing, useAnimatedStyle, useDerivedValue, withTiming } from 'react-native-reanimated';\n\nimport { popoverStyles } from '../../../generated/styles';\nimport { useAnchoredPosition } from '../internal/Overlay';\nimport { PopoverContext, usePopoverContext } from './PopoverContext';\nimport { PopoverPortalLayer } from './PopoverPortalLayer';\nimport { PopoverSurface } from './PopoverSurface';\nimport type { PopoverContentProps } from './types';\n\nconst ARROW_HEIGHT = 12;\nconst ARROW_WIDTH = 22;\nconst ANIMATION_DURATION = 200;\n\n/**\n * Floating content surface for {@link Popover}.\n *\n * Renders the anchored surface, arrow, optional dismiss button, blur/elevation\n * background, and open/close transition in a full-window portal layer.\n */\nconst PopoverContent = memo(function PopoverContent({\n  children,\n  maxWidth,\n  maxHeight,\n  style,\n  onLayout,\n  ...props\n}: PopoverContentProps) {\n  const context = usePopoverContext();\n  const {\n    align,\n    alignOffset,\n    avoidCollisions,\n    collisionPadding,\n    dismissible,\n    hideArrow,\n    insets,\n    offset,\n    open,\n    placement,\n    reduceMotion,\n    sameWidth,\n    setOpen,\n    triggerRect,\n    width,\n  } = context;\n  const [contentSize, setContentSize] = useState({ width: 0, height: 0 });\n  const [shouldRender, setShouldRender] = useState(open);\n  const dismiss = useCallback(() => setOpen(false), [setOpen]);\n\n  const {\n    contentStyle,\n    arrowStyle,\n    anchorReady,\n    resolvedPlacement,\n    maxWidth: positionedMaxWidth,\n  } = useAnchoredPosition({\n    triggerRect,\n    contentSize,\n    placement,\n    align,\n    offset: offset + (hideArrow ? 0 : ARROW_HEIGHT),\n    alignOffset,\n    avoidCollisions,\n    collisionPadding,\n    width,\n    sameWidth,\n    insets,\n    arrowHeight: ARROW_HEIGHT,\n    arrowWidth: ARROW_WIDTH,\n  });\n\n  const isPositionedOpen = open && anchorReady && contentSize.height > 0;\n  const animationDistance = Math.min(offset, 12);\n  const animationSide = resolvedPlacement.split('-')[0] as 'top' | 'bottom' | 'start' | 'end';\n  const shouldAnimateVertically = animationSide === 'top' || animationSide === 'bottom';\n  const animationDirection = animationSide === 'top' || animationSide === 'start' ? 1 : -1;\n  const animationTranslate = animationDirection * animationDistance;\n\n  const progress = useDerivedValue(\n    () =>\n      withTiming(isPositionedOpen ? 1 : 0, {\n        duration: reduceMotion ? 0 : ANIMATION_DURATION,\n        easing: Easing.out(Easing.ease),\n      }),\n    [isPositionedOpen, reduceMotion],\n  );\n\n  const animatedStyle = useAnimatedStyle(() => {\n    return {\n      opacity: progress.value,\n      transform: [\n        {\n          scale: 0.97 + progress.value * 0.03,\n        },\n        shouldAnimateVertically\n          ? { translateY: animationTranslate * (1 - progress.value) }\n          : { translateX: animationTranslate * (1 - progress.value) },\n      ],\n    };\n  });\n\n  const handleLayout = useCallback(\n    (event: LayoutChangeEvent) => {\n      const { width: layoutWidth, height: layoutHeight } = event.nativeEvent.layout;\n      setContentSize({ width: layoutWidth, height: layoutHeight });\n      onLayout?.(event);\n    },\n    [onLayout],\n  );\n\n  useEffect(() => {\n    if (open) {\n      setShouldRender(true);\n      return;\n    }\n\n    if (reduceMotion) {\n      setShouldRender(false);\n      setContentSize({ width: 0, height: 0 });\n      return;\n    }\n\n    const timeout = setTimeout(() => {\n      setShouldRender(false);\n      setContentSize({ width: 0, height: 0 });\n    }, ANIMATION_DURATION);\n\n    return () => clearTimeout(timeout);\n  }, [open, reduceMotion]);\n\n  popoverStyles.useVariants({});\n\n  if (!shouldRender) {\n    return null;\n  }\n\n  return (\n    <PopoverPortalLayer open={open} dismissible={dismissible} onDismiss={dismiss}>\n      {(layerDismiss) => {\n        const surface = (\n          <PopoverSurface\n            animatedStyle={animatedStyle}\n            arrowHeight={ARROW_HEIGHT}\n            arrowStyle={arrowStyle}\n            arrowWidth={ARROW_WIDTH}\n            contentSize={contentSize}\n            contentStyle={contentStyle}\n            maxHeight={maxHeight}\n            maxWidth={maxWidth}\n            onDismiss={layerDismiss}\n            onLayout={handleLayout}\n            positionedMaxWidth={positionedMaxWidth}\n            resolvedPlacement={resolvedPlacement}\n            style={style}\n            {...props}\n          >\n            {children}\n          </PopoverSurface>\n        );\n\n        return <PopoverContext.Provider value={context}>{surface}</PopoverContext.Provider>;\n      }}\n    </PopoverPortalLayer>\n  );\n});\n\nPopoverContent.displayName = 'PopoverContent';\n\nexport { PopoverContent };\n"],"mappings":";;;;;;;;;;AAWA,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,qBAAqB;;;;;;;AAQ3B,MAAM,iBAAiB,KAAK,SAAS,eAAe,EAClD,UACA,UACA,WACA,OACA,UACA,GAAG,SACmB;CACtB,MAAM,UAAU,mBAAmB;CACnC,MAAM,EACJ,OACA,aACA,iBACA,kBACA,aACA,WACA,QACA,QACA,MACA,WACA,cACA,WACA,SACA,aACA,UACE;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS;EAAE,OAAO;EAAG,QAAQ;EAAG,CAAC;CACvE,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CACtD,MAAM,UAAU,kBAAkB,QAAQ,MAAM,EAAE,CAAC,QAAQ,CAAC;CAE5D,MAAM,EACJ,cACA,YACA,aACA,mBACA,UAAU,uBACR,oBAAoB;EACtB;EACA;EACA;EACA;EACA,QAAQ,UAAU,YAAY,IAAI;EAClC;EACA;EACA;EACA;EACA;EACA;EACA,aAAa;EACb,YAAY;EACb,CAAC;CAEF,MAAM,mBAAmB,QAAQ,eAAe,YAAY,SAAS;CACrE,MAAM,oBAAoB,KAAK,IAAI,QAAQ,GAAG;CAC9C,MAAM,gBAAgB,kBAAkB,MAAM,IAAI,CAAC;CACnD,MAAM,0BAA0B,kBAAkB,SAAS,kBAAkB;CAE7E,MAAM,sBADqB,kBAAkB,SAAS,kBAAkB,UAAU,IAAI,MACtC;CAEhD,MAAM,WAAW,sBAEb,WAAW,mBAAmB,IAAI,GAAG;EACnC,UAAU,eAAe,IAAI;EAC7B,QAAQ,OAAO,IAAI,OAAO,KAAK;EAChC,CAAC,EACJ,CAAC,kBAAkB,aAAa,CACjC;CAED,MAAM,gBAAgB,uBAAuB;EAC3C,OAAO;GACL,SAAS,SAAS;GAClB,WAAW,CACT,EACE,OAAO,MAAO,SAAS,QAAQ,KAChC,EACD,0BACI,EAAE,YAAY,sBAAsB,IAAI,SAAS,QAAQ,GACzD,EAAE,YAAY,sBAAsB,IAAI,SAAS,QAAQ,CAC9D;GACF;GACD;CAEF,MAAM,eAAe,aAClB,UAA6B;EAC5B,MAAM,EAAE,OAAO,aAAa,QAAQ,iBAAiB,MAAM,YAAY;EACvE,eAAe;GAAE,OAAO;GAAa,QAAQ;GAAc,CAAC;EAC5D,WAAW,MAAM;IAEnB,CAAC,SAAS,CACX;CAED,gBAAgB;EACd,IAAI,MAAM;GACR,gBAAgB,KAAK;GACrB;;EAGF,IAAI,cAAc;GAChB,gBAAgB,MAAM;GACtB,eAAe;IAAE,OAAO;IAAG,QAAQ;IAAG,CAAC;GACvC;;EAGF,MAAM,UAAU,iBAAiB;GAC/B,gBAAgB,MAAM;GACtB,eAAe;IAAE,OAAO;IAAG,QAAQ;IAAG,CAAC;KACtC,mBAAmB;EAEtB,aAAa,aAAa,QAAQ;IACjC,CAAC,MAAM,aAAa,CAAC;CAExB,cAAc,YAAY,EAAE,CAAC;CAE7B,IAAI,CAAC,cACH,OAAO;CAGT,OACE,oBAAC,oBAAD;EAA0B;EAAmB;EAAa,WAAW;aACjE,iBAAiB;GACjB,MAAM,UACJ,oBAAC,gBAAD;IACiB;IACf,aAAa;IACD;IACZ,YAAY;IACC;IACC;IACH;IACD;IACV,WAAW;IACX,UAAU;IACU;IACD;IACZ;IACP,GAAI;IAEH;IACc,CAAA;GAGnB,OAAO,oBAAC,eAAe,UAAhB;IAAyB,OAAO;cAAU;IAAkC,CAAA;;EAElE,CAAA;EAEvB;AAEF,eAAe,cAAc"}

package/dist/components/Popover/PopoverContext.cjs

@@ -0,0 +1,14 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.cjs");
+let react = require("react");
+//#region src/components/Popover/PopoverContext.tsx
+const PopoverContext = (0, react.createContext)(null);
+function usePopoverContext() {
+	const context = (0, react.useContext)(PopoverContext);
+	if (!context) throw new Error("Popover components must be used inside a Popover.");
+	return context;
+}
+//#endregion
+exports.PopoverContext = PopoverContext;
+exports.usePopoverContext = usePopoverContext;

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

@@ -0,0 +1,10 @@
+
+import { PopoverContextValue } from "./types.cjs";
+import * as _$react from "react";
+
+//#region src/components/Popover/PopoverContext.d.ts
+declare const PopoverContext: _$react.Context<PopoverContextValue | null>;
+declare function usePopoverContext(): PopoverContextValue;
+//#endregion
+export { PopoverContext, usePopoverContext };
+//# sourceMappingURL=PopoverContext.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverContext.d.cts","names":[],"sources":["../../../src/components/Popover/PopoverContext.tsx"],"mappings":";;;;;cAIM,cAAA,EAAc,OAAA,CAAA,OAAA,CAAA,mBAAA;AAAA,iBAEX,iBAAA,CAAA,GAAqB,mBAAA"}

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

@@ -0,0 +1,10 @@
+
+import { PopoverContextValue } from "./types.js";
+import * as _$react from "react";
+
+//#region src/components/Popover/PopoverContext.d.ts
+declare const PopoverContext: _$react.Context<PopoverContextValue | null>;
+declare function usePopoverContext(): PopoverContextValue;
+//#endregion
+export { PopoverContext, usePopoverContext };
+//# sourceMappingURL=PopoverContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverContext.d.ts","names":[],"sources":["../../../src/components/Popover/PopoverContext.tsx"],"mappings":";;;;;cAIM,cAAA,EAAc,OAAA,CAAA,OAAA,CAAA,mBAAA;AAAA,iBAEX,iBAAA,CAAA,GAAqB,mBAAA"}