@yahoo/uds-mobile 2.3.3 → 2.4.0

package/dist/components/BottomSheet/useKeyboardAvoidance.js

@@ -0,0 +1,52 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { useEffect } from "react";
+import { Keyboard, Platform } from "react-native";
+import { withTiming } from "react-native-reanimated";
+
+//#region src/components/BottomSheet/useKeyboardAvoidance.ts
+/** Duration (ms) for the keyboard offset animation. */
+const KEYBOARD_ANIMATION_DURATION = 250;
+/**
+* Offsets the sheet's `translateY` when the software keyboard opens or closes.
+*
+* - **iOS**: Listens to `keyboardWillShow` / `keyboardWillHide` for smoother,
+*   synchronous animation with the keyboard.
+* - **Android**: Listens to `keyboardDidShow` / `keyboardDidHide` (will-events
+*   are not available on Android).
+*
+* Captures `translateY` before the offset and restores it when the keyboard hides.
+*/
+function useKeyboardAvoidance({ isOpen, translateY, isAnimating }) {
+	useEffect(() => {
+		if (!isOpen) return;
+		let preKeyboardTranslateY = null;
+		const showEvent = Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
+		const hideEvent = Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
+		const showSub = Keyboard.addListener(showEvent, (event) => {
+			const keyboardHeight = event.endCoordinates.height;
+			if (keyboardHeight <= 0) return;
+			if (preKeyboardTranslateY === null) preKeyboardTranslateY = translateY.value;
+			isAnimating.value = false;
+			const target = preKeyboardTranslateY - keyboardHeight;
+			translateY.value = withTiming(Math.max(0, target), { duration: KEYBOARD_ANIMATION_DURATION });
+		});
+		const hideSub = Keyboard.addListener(hideEvent, () => {
+			if (preKeyboardTranslateY !== null) {
+				translateY.value = withTiming(preKeyboardTranslateY, { duration: KEYBOARD_ANIMATION_DURATION });
+				preKeyboardTranslateY = null;
+			}
+		});
+		return () => {
+			showSub.remove();
+			hideSub.remove();
+		};
+	}, [
+		isOpen,
+		translateY,
+		isAnimating
+	]);
+}
+
+//#endregion
+export { useKeyboardAvoidance };
+//# sourceMappingURL=useKeyboardAvoidance.js.map

package/dist/components/BottomSheet/useKeyboardAvoidance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardAvoidance.js","names":[],"sources":["../../../src/components/BottomSheet/useKeyboardAvoidance.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { Keyboard, Platform } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport { withTiming } from 'react-native-reanimated';\n\n/** Duration (ms) for the keyboard offset animation. */\nconst KEYBOARD_ANIMATION_DURATION = 250;\n\n/** @internal */\ninterface UseKeyboardAvoidanceParams {\n  /** Whether the sheet is currently open. */\n  isOpen: boolean;\n  /** The sheet's animated translateY shared value. */\n  translateY: SharedValue<number>;\n  /** Whether the sheet is currently animating (snap/close spring). */\n  isAnimating: SharedValue<boolean>;\n}\n\n/**\n * Offsets the sheet's `translateY` when the software keyboard opens or closes.\n *\n * - **iOS**: Listens to `keyboardWillShow` / `keyboardWillHide` for smoother,\n *   synchronous animation with the keyboard.\n * - **Android**: Listens to `keyboardDidShow` / `keyboardDidHide` (will-events\n *   are not available on Android).\n *\n * Captures `translateY` before the offset and restores it when the keyboard hides.\n */\nfunction useKeyboardAvoidance({ isOpen, translateY, isAnimating }: UseKeyboardAvoidanceParams) {\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n\n    // Store the translateY before keyboard offset so we can restore it.\n    let preKeyboardTranslateY: number | null = null;\n\n    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';\n    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';\n\n    const showSub = Keyboard.addListener(showEvent, (event) => {\n      const keyboardHeight = event.endCoordinates.height;\n      if (keyboardHeight <= 0) {\n        return;\n      }\n\n      // Capture current position before offsetting.\n      if (preKeyboardTranslateY === null) {\n        preKeyboardTranslateY = translateY.value;\n      }\n\n      // Clear isAnimating so a cancelled snap/close spring doesn't leave\n      // drag permanently blocked. The keyboard animation takes over translateY.\n      isAnimating.value = false;\n\n      // Move sheet up by keyboard height.\n      const target = preKeyboardTranslateY - keyboardHeight;\n      // Clamp to 0 so the sheet doesn't go above the screen.\n      const clamped = Math.max(0, target);\n      translateY.value = withTiming(clamped, { duration: KEYBOARD_ANIMATION_DURATION });\n    });\n\n    const hideSub = Keyboard.addListener(hideEvent, () => {\n      if (preKeyboardTranslateY !== null) {\n        translateY.value = withTiming(preKeyboardTranslateY, {\n          duration: KEYBOARD_ANIMATION_DURATION,\n        });\n        preKeyboardTranslateY = null;\n      }\n    });\n\n    return () => {\n      showSub.remove();\n      hideSub.remove();\n    };\n  }, [isOpen, translateY, isAnimating]);\n}\n\nexport { useKeyboardAvoidance };\n"],"mappings":";;;;;;;AAMA,MAAM,8BAA8B;;;;;;;;;;;AAsBpC,SAAS,qBAAqB,EAAE,QAAQ,YAAY,eAA2C;AAC7F,iBAAgB;AACd,MAAI,CAAC,OACH;EAIF,IAAI,wBAAuC;EAE3C,MAAM,YAAY,SAAS,OAAO,QAAQ,qBAAqB;EAC/D,MAAM,YAAY,SAAS,OAAO,QAAQ,qBAAqB;EAE/D,MAAM,UAAU,SAAS,YAAY,YAAY,UAAU;GACzD,MAAM,iBAAiB,MAAM,eAAe;AAC5C,OAAI,kBAAkB,EACpB;AAIF,OAAI,0BAA0B,KAC5B,yBAAwB,WAAW;AAKrC,eAAY,QAAQ;GAGpB,MAAM,SAAS,wBAAwB;AAGvC,cAAW,QAAQ,WADH,KAAK,IAAI,GAAG,OAAO,EACI,EAAE,UAAU,6BAA6B,CAAC;IACjF;EAEF,MAAM,UAAU,SAAS,YAAY,iBAAiB;AACpD,OAAI,0BAA0B,MAAM;AAClC,eAAW,QAAQ,WAAW,uBAAuB,EACnD,UAAU,6BACX,CAAC;AACF,4BAAwB;;IAE1B;AAEF,eAAa;AACX,WAAQ,QAAQ;AAChB,WAAQ,QAAQ;;IAEjB;EAAC;EAAQ;EAAY;EAAY,CAAC"}

package/dist/components/BottomSheet/utils.cjs

@@ -0,0 +1,77 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+//#region src/components/BottomSheet/utils.ts
+/** Default snap point used when neither `snapPoints` nor `height` is specified. */
+const DEFAULT_SNAP_POINT = "40%";
+/**
+* Resolves a {@link BottomSheetHeight} string to a pixel value.
+*
+* @param height - A percentage (`'50%'`) or pixel (`'300px'`) string.
+* @param containerHeightPx - The container height in pixels (used for `%` values).
+* @returns The resolved height in pixels, or `0` if the format is invalid.
+*/
+function resolveHeightToPx(height, containerHeightPx) {
+	"worklet";
+	const trimmed = height.trim();
+	if (trimmed.endsWith("%")) {
+		const pct = Number.parseFloat(trimmed.slice(0, -1));
+		if (Number.isFinite(pct)) return pct / 100 * containerHeightPx;
+	}
+	if (trimmed.endsWith("px")) {
+		const px = Number.parseFloat(trimmed.slice(0, -2));
+		if (Number.isFinite(px)) return px;
+	}
+	return 0;
+}
+/**
+* Clamps an index into the valid range `[0, length - 1]`.
+*
+* @param index - The index to clamp.
+* @param length - The length of the array.
+* @returns The clamped index.
+*/
+function clampIndex(index, length) {
+	"worklet";
+	if (length <= 0) return 0;
+	return Math.max(0, Math.min(index, length - 1));
+}
+/**
+* Clamps a numeric value to `[min, max]`.
+*
+* @param value - The value to clamp.
+* @param min - Lower bound.
+* @param max - Upper bound.
+* @returns The clamped value.
+*/
+function clamp(value, min, max) {
+	"worklet";
+	return Math.max(min, Math.min(max, value));
+}
+/**
+* Resolves an array of snap points into pixel heights and translateY positions.
+*
+* Position model: `translateY = containerHeight - snapHeightPx - bottomInsetPx`
+*
+* @param snapPoints - Array of snap point height strings.
+* @param containerHeightPx - Container height in pixels.
+* @param bottomInsetPx - Bottom inset (margin + safe area) in pixels.
+* @param maxHeightPx - Maximum allowed sheet height in pixels.
+* @returns Object containing `heightsPx`, `translateYs`, and `closedTranslateY`.
+*/
+function resolveSnapPositions(snapPoints, containerHeightPx, bottomInsetPx, maxHeightPx) {
+	"worklet";
+	const heightsPx = snapPoints.map((sp) => clamp(resolveHeightToPx(sp, containerHeightPx), 0, maxHeightPx));
+	return {
+		heightsPx,
+		translateYs: heightsPx.map((h) => containerHeightPx - h - bottomInsetPx),
+		closedTranslateY: containerHeightPx + bottomInsetPx
+	};
+}
+
+//#endregion
+exports.DEFAULT_SNAP_POINT = DEFAULT_SNAP_POINT;
+exports.clamp = clamp;
+exports.clampIndex = clampIndex;
+exports.resolveHeightToPx = resolveHeightToPx;
+exports.resolveSnapPositions = resolveSnapPositions;

package/dist/components/BottomSheet/utils.d.cts

@@ -0,0 +1,50 @@
+
+import { BottomSheetHeight } from "./types.cjs";
+
+//#region src/components/BottomSheet/utils.d.ts
+/** Default snap point used when neither `snapPoints` nor `height` is specified. */
+declare const DEFAULT_SNAP_POINT: BottomSheetHeight;
+/**
+ * Resolves a {@link BottomSheetHeight} string to a pixel value.
+ *
+ * @param height - A percentage (`'50%'`) or pixel (`'300px'`) string.
+ * @param containerHeightPx - The container height in pixels (used for `%` values).
+ * @returns The resolved height in pixels, or `0` if the format is invalid.
+ */
+declare function resolveHeightToPx(height: BottomSheetHeight, containerHeightPx: number): number;
+/**
+ * Clamps an index into the valid range `[0, length - 1]`.
+ *
+ * @param index - The index to clamp.
+ * @param length - The length of the array.
+ * @returns The clamped index.
+ */
+declare function clampIndex(index: number, length: number): number;
+/**
+ * Clamps a numeric value to `[min, max]`.
+ *
+ * @param value - The value to clamp.
+ * @param min - Lower bound.
+ * @param max - Upper bound.
+ * @returns The clamped value.
+ */
+declare function clamp(value: number, min: number, max: number): number;
+/**
+ * Resolves an array of snap points into pixel heights and translateY positions.
+ *
+ * Position model: `translateY = containerHeight - snapHeightPx - bottomInsetPx`
+ *
+ * @param snapPoints - Array of snap point height strings.
+ * @param containerHeightPx - Container height in pixels.
+ * @param bottomInsetPx - Bottom inset (margin + safe area) in pixels.
+ * @param maxHeightPx - Maximum allowed sheet height in pixels.
+ * @returns Object containing `heightsPx`, `translateYs`, and `closedTranslateY`.
+ */
+declare function resolveSnapPositions(snapPoints: BottomSheetHeight[], containerHeightPx: number, bottomInsetPx: number, maxHeightPx: number): {
+  heightsPx: number[];
+  translateYs: number[];
+  closedTranslateY: number;
+};
+//#endregion
+export { DEFAULT_SNAP_POINT, clamp, clampIndex, resolveHeightToPx, resolveSnapPositions };
+//# sourceMappingURL=utils.d.cts.map

package/dist/components/BottomSheet/utils.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.cts","names":[],"sources":["../../../src/components/BottomSheet/utils.ts"],"mappings":";;;;;cAGM,kBAAA,EAAoB,iBAAA;AAHuB;;;;;AAGE;;AAHF,iBAYxC,iBAAA,CAAkB,MAAA,EAAQ,iBAAA,EAAmB,iBAAA;;;;;;;AAAyB;iBA4BtE,UAAA,CAAW,KAAA,UAAe,MAAA;;;;AAAc;;;;;iBAgBxC,KAAA,CAAM,KAAA,UAAe,GAAA,UAAa,GAAA;;;;AAAW;;;;;;;;iBAgB7C,oBAAA,CACP,UAAA,EAAY,iBAAA,IACZ,iBAAA,UACA,aAAA,UACA,WAAA"}

package/dist/components/BottomSheet/utils.d.ts

@@ -0,0 +1,50 @@
+
+import { BottomSheetHeight } from "./types.js";
+
+//#region src/components/BottomSheet/utils.d.ts
+/** Default snap point used when neither `snapPoints` nor `height` is specified. */
+declare const DEFAULT_SNAP_POINT: BottomSheetHeight;
+/**
+ * Resolves a {@link BottomSheetHeight} string to a pixel value.
+ *
+ * @param height - A percentage (`'50%'`) or pixel (`'300px'`) string.
+ * @param containerHeightPx - The container height in pixels (used for `%` values).
+ * @returns The resolved height in pixels, or `0` if the format is invalid.
+ */
+declare function resolveHeightToPx(height: BottomSheetHeight, containerHeightPx: number): number;
+/**
+ * Clamps an index into the valid range `[0, length - 1]`.
+ *
+ * @param index - The index to clamp.
+ * @param length - The length of the array.
+ * @returns The clamped index.
+ */
+declare function clampIndex(index: number, length: number): number;
+/**
+ * Clamps a numeric value to `[min, max]`.
+ *
+ * @param value - The value to clamp.
+ * @param min - Lower bound.
+ * @param max - Upper bound.
+ * @returns The clamped value.
+ */
+declare function clamp(value: number, min: number, max: number): number;
+/**
+ * Resolves an array of snap points into pixel heights and translateY positions.
+ *
+ * Position model: `translateY = containerHeight - snapHeightPx - bottomInsetPx`
+ *
+ * @param snapPoints - Array of snap point height strings.
+ * @param containerHeightPx - Container height in pixels.
+ * @param bottomInsetPx - Bottom inset (margin + safe area) in pixels.
+ * @param maxHeightPx - Maximum allowed sheet height in pixels.
+ * @returns Object containing `heightsPx`, `translateYs`, and `closedTranslateY`.
+ */
+declare function resolveSnapPositions(snapPoints: BottomSheetHeight[], containerHeightPx: number, bottomInsetPx: number, maxHeightPx: number): {
+  heightsPx: number[];
+  translateYs: number[];
+  closedTranslateY: number;
+};
+//#endregion
+export { DEFAULT_SNAP_POINT, clamp, clampIndex, resolveHeightToPx, resolveSnapPositions };
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/BottomSheet/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","names":[],"sources":["../../../src/components/BottomSheet/utils.ts"],"mappings":";;;;;cAGM,kBAAA,EAAoB,iBAAA;AAHuB;;;;;AAGE;;AAHF,iBAYxC,iBAAA,CAAkB,MAAA,EAAQ,iBAAA,EAAmB,iBAAA;;;;;;;AAAyB;iBA4BtE,UAAA,CAAW,KAAA,UAAe,MAAA;;;;AAAc;;;;;iBAgBxC,KAAA,CAAM,KAAA,UAAe,GAAA,UAAa,GAAA;;;;AAAW;;;;;;;;iBAgB7C,oBAAA,CACP,UAAA,EAAY,iBAAA,IACZ,iBAAA,UACA,aAAA,UACA,WAAA"}

package/dist/components/BottomSheet/utils.js

@@ -0,0 +1,72 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+//#region src/components/BottomSheet/utils.ts
+/** Default snap point used when neither `snapPoints` nor `height` is specified. */
+const DEFAULT_SNAP_POINT = "40%";
+/**
+* Resolves a {@link BottomSheetHeight} string to a pixel value.
+*
+* @param height - A percentage (`'50%'`) or pixel (`'300px'`) string.
+* @param containerHeightPx - The container height in pixels (used for `%` values).
+* @returns The resolved height in pixels, or `0` if the format is invalid.
+*/
+function resolveHeightToPx(height, containerHeightPx) {
+	"worklet";
+	const trimmed = height.trim();
+	if (trimmed.endsWith("%")) {
+		const pct = Number.parseFloat(trimmed.slice(0, -1));
+		if (Number.isFinite(pct)) return pct / 100 * containerHeightPx;
+	}
+	if (trimmed.endsWith("px")) {
+		const px = Number.parseFloat(trimmed.slice(0, -2));
+		if (Number.isFinite(px)) return px;
+	}
+	return 0;
+}
+/**
+* Clamps an index into the valid range `[0, length - 1]`.
+*
+* @param index - The index to clamp.
+* @param length - The length of the array.
+* @returns The clamped index.
+*/
+function clampIndex(index, length) {
+	"worklet";
+	if (length <= 0) return 0;
+	return Math.max(0, Math.min(index, length - 1));
+}
+/**
+* Clamps a numeric value to `[min, max]`.
+*
+* @param value - The value to clamp.
+* @param min - Lower bound.
+* @param max - Upper bound.
+* @returns The clamped value.
+*/
+function clamp(value, min, max) {
+	"worklet";
+	return Math.max(min, Math.min(max, value));
+}
+/**
+* Resolves an array of snap points into pixel heights and translateY positions.
+*
+* Position model: `translateY = containerHeight - snapHeightPx - bottomInsetPx`
+*
+* @param snapPoints - Array of snap point height strings.
+* @param containerHeightPx - Container height in pixels.
+* @param bottomInsetPx - Bottom inset (margin + safe area) in pixels.
+* @param maxHeightPx - Maximum allowed sheet height in pixels.
+* @returns Object containing `heightsPx`, `translateYs`, and `closedTranslateY`.
+*/
+function resolveSnapPositions(snapPoints, containerHeightPx, bottomInsetPx, maxHeightPx) {
+	"worklet";
+	const heightsPx = snapPoints.map((sp) => clamp(resolveHeightToPx(sp, containerHeightPx), 0, maxHeightPx));
+	return {
+		heightsPx,
+		translateYs: heightsPx.map((h) => containerHeightPx - h - bottomInsetPx),
+		closedTranslateY: containerHeightPx + bottomInsetPx
+	};
+}
+
+//#endregion
+export { DEFAULT_SNAP_POINT, clamp, clampIndex, resolveHeightToPx, resolveSnapPositions };
+//# sourceMappingURL=utils.js.map

package/dist/components/BottomSheet/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/BottomSheet/utils.ts"],"sourcesContent":["import type { BottomSheetHeight } from './types';\n\n/** Default snap point used when neither `snapPoints` nor `height` is specified. */\nconst DEFAULT_SNAP_POINT: BottomSheetHeight = '40%';\n\n/**\n * Resolves a {@link BottomSheetHeight} string to a pixel value.\n *\n * @param height - A percentage (`'50%'`) or pixel (`'300px'`) string.\n * @param containerHeightPx - The container height in pixels (used for `%` values).\n * @returns The resolved height in pixels, or `0` if the format is invalid.\n */\nfunction resolveHeightToPx(height: BottomSheetHeight, containerHeightPx: number): number {\n  'worklet';\n  const trimmed = (height as string).trim();\n\n  if (trimmed.endsWith('%')) {\n    const pct = Number.parseFloat(trimmed.slice(0, -1));\n    if (Number.isFinite(pct)) {\n      return (pct / 100) * containerHeightPx;\n    }\n  }\n\n  if (trimmed.endsWith('px')) {\n    const px = Number.parseFloat(trimmed.slice(0, -2));\n    if (Number.isFinite(px)) {\n      return px;\n    }\n  }\n\n  return 0;\n}\n\n/**\n * Clamps an index into the valid range `[0, length - 1]`.\n *\n * @param index - The index to clamp.\n * @param length - The length of the array.\n * @returns The clamped index.\n */\nfunction clampIndex(index: number, length: number): number {\n  'worklet';\n  if (length <= 0) {\n    return 0;\n  }\n  return Math.max(0, Math.min(index, length - 1));\n}\n\n/**\n * Clamps a numeric value to `[min, max]`.\n *\n * @param value - The value to clamp.\n * @param min - Lower bound.\n * @param max - Upper bound.\n * @returns The clamped value.\n */\nfunction clamp(value: number, min: number, max: number): number {\n  'worklet';\n  return Math.max(min, Math.min(max, value));\n}\n\n/**\n * Resolves an array of snap points into pixel heights and translateY positions.\n *\n * Position model: `translateY = containerHeight - snapHeightPx - bottomInsetPx`\n *\n * @param snapPoints - Array of snap point height strings.\n * @param containerHeightPx - Container height in pixels.\n * @param bottomInsetPx - Bottom inset (margin + safe area) in pixels.\n * @param maxHeightPx - Maximum allowed sheet height in pixels.\n * @returns Object containing `heightsPx`, `translateYs`, and `closedTranslateY`.\n */\nfunction resolveSnapPositions(\n  snapPoints: BottomSheetHeight[],\n  containerHeightPx: number,\n  bottomInsetPx: number,\n  maxHeightPx: number,\n) {\n  'worklet';\n  const heightsPx = snapPoints.map((sp) =>\n    clamp(resolveHeightToPx(sp, containerHeightPx), 0, maxHeightPx),\n  );\n  const translateYs = heightsPx.map((h) => containerHeightPx - h - bottomInsetPx);\n  const closedTranslateY = containerHeightPx + bottomInsetPx;\n\n  return { heightsPx, translateYs, closedTranslateY };\n}\n\nexport { clamp, clampIndex, DEFAULT_SNAP_POINT, resolveHeightToPx, resolveSnapPositions };\n"],"mappings":";;;AAGA,MAAM,qBAAwC;;;;;;;;AAS9C,SAAS,kBAAkB,QAA2B,mBAAmC;AACvF;CACA,MAAM,UAAW,OAAkB,MAAM;AAEzC,KAAI,QAAQ,SAAS,IAAI,EAAE;EACzB,MAAM,MAAM,OAAO,WAAW,QAAQ,MAAM,GAAG,GAAG,CAAC;AACnD,MAAI,OAAO,SAAS,IAAI,CACtB,QAAQ,MAAM,MAAO;;AAIzB,KAAI,QAAQ,SAAS,KAAK,EAAE;EAC1B,MAAM,KAAK,OAAO,WAAW,QAAQ,MAAM,GAAG,GAAG,CAAC;AAClD,MAAI,OAAO,SAAS,GAAG,CACrB,QAAO;;AAIX,QAAO;;;;;;;;;AAUT,SAAS,WAAW,OAAe,QAAwB;AACzD;AACA,KAAI,UAAU,EACZ,QAAO;AAET,QAAO,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,SAAS,EAAE,CAAC;;;;;;;;;;AAWjD,SAAS,MAAM,OAAe,KAAa,KAAqB;AAC9D;AACA,QAAO,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,MAAM,CAAC;;;;;;;;;;;;;AAc5C,SAAS,qBACP,YACA,mBACA,eACA,aACA;AACA;CACA,MAAM,YAAY,WAAW,KAAK,OAChC,MAAM,kBAAkB,IAAI,kBAAkB,EAAE,GAAG,YAAY,CAChE;AAID,QAAO;EAAE;EAAW,aAHA,UAAU,KAAK,MAAM,oBAAoB,IAAI,cAAc;EAG9C,kBAFR,oBAAoB;EAEM"}

package/dist/components/Box.cjs

@@ -3,9 +3,9 @@ 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");
 let generated_styles = require("../../generated/styles");
 let react_native_unistyles = require("react-native-unistyles");
-let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/Box.tsx
 let BlurView = null;

package/dist/components/Box.js

@@ -1,9 +1,9 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { Platform, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
 import { styles } from "../../generated/styles";
 import { StyleSheet as StyleSheet$1, useUnistyles } from "react-native-unistyles";
-import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Box.tsx
 let BlurView = null;

package/dist/components/Button.cjs

@@ -8,8 +8,8 @@ const require_components_Text = require('./Text.cjs');
 const require_components_Pressable = require('./Pressable.cjs');
 let react = require("react");
 let react_native = require("react-native");
-let generated_styles = require("../../generated/styles");
 let react_jsx_runtime = require("react/jsx-runtime");
+let generated_styles = require("../../generated/styles");
 let react_native_reanimated = require("react-native-reanimated");
 react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
 let react_native_unistyles_reanimated = require("react-native-unistyles/reanimated");

package/dist/components/Button.js

@@ -6,8 +6,8 @@ import { Text as Text$1 } from "./Text.js";
 import { AnimatedPressable } from "./Pressable.js";
 import { isValidElement, memo, useCallback, useMemo, useState } from "react";
 import { ActivityIndicator } from "react-native";
-import { buttonStyles } from "../../generated/styles";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { buttonStyles } from "../../generated/styles";
 import Animated, { Easing, interpolate, useAnimatedStyle, useDerivedValue, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
 import { useAnimatedTheme } from "react-native-unistyles/reanimated";
 

package/dist/components/Checkbox.cjs

@@ -8,8 +8,8 @@ const require_components_Text = require('./Text.cjs');
 const require_components_HStack = require('./HStack.cjs');
 const require_components_Pressable = require('./Pressable.cjs');
 let react = require("react");
-let generated_styles = require("../../generated/styles");
 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);
 

package/dist/components/Checkbox.js

@@ -6,8 +6,8 @@ import { Text } from "./Text.js";
 import { HStack } from "./HStack.js";
 import { Pressable } from "./Pressable.js";
 import { isValidElement, memo, useCallback, useId, useMemo, useState } from "react";
-import { checkboxStyles } from "../../generated/styles";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { checkboxStyles } from "../../generated/styles";
 import Animated, { useAnimatedStyle, useDerivedValue, withSpring } from "react-native-reanimated";
 
 //#region src/components/Checkbox.tsx

package/dist/components/Chip.cjs

@@ -6,8 +6,8 @@ const require_components_Text = require('./Text.cjs');
 const require_components_HStack = require('./HStack.cjs');
 const require_components_Pressable = require('./Pressable.cjs');
 let react = require("react");
-let generated_styles = require("../../generated/styles");
 let react_jsx_runtime = require("react/jsx-runtime");
+let generated_styles = require("../../generated/styles");
 
 //#region src/components/Chip.tsx
 /**

package/dist/components/Chip.js

@@ -4,8 +4,8 @@ import { Text } from "./Text.js";
 import { HStack } from "./HStack.js";
 import { Pressable } from "./Pressable.js";
 import { memo, useCallback, useMemo } from "react";
-import { chipStyles } from "../../generated/styles";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { chipStyles } from "../../generated/styles";
 
 //#region src/components/Chip.tsx
 /**

package/dist/components/Icon.cjs

@@ -3,9 +3,9 @@ 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");
 let generated_styles = require("../../generated/styles");
 let react_native_unistyles = require("react-native-unistyles");
-let react_jsx_runtime = require("react/jsx-runtime");
 let _yahoo_uds_icons_glyphMap = require("@yahoo/uds-icons/glyphMap");
 let _yahoo_uds_icons_svgMap = require("@yahoo/uds-icons/svgMap");
 let _yahoo_uds_icons_tokens = require("@yahoo/uds-icons/tokens");

package/dist/components/Icon.js

@@ -1,9 +1,9 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 import { memo, useMemo } from "react";
 import { Text, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
 import { styles } from "../../generated/styles";
 import { useUnistyles } from "react-native-unistyles";
-import { jsx } from "react/jsx-runtime";
 import { glyphMap, glyphNames } from "@yahoo/uds-icons/glyphMap";
 import { svgGlyphNames, svgMap } from "@yahoo/uds-icons/svgMap";
 import { ICON_SIZE_MAP } from "@yahoo/uds-icons/tokens";

package/dist/components/IconButton.cjs

@@ -7,8 +7,8 @@ const require_components_Icon = require('./Icon.cjs');
 const require_components_Pressable = require('./Pressable.cjs');
 let react = require("react");
 let react_native = require("react-native");
-let generated_styles = require("../../generated/styles");
 let react_jsx_runtime = require("react/jsx-runtime");
+let generated_styles = require("../../generated/styles");
 let react_native_reanimated = require("react-native-reanimated");
 let react_native_unistyles_reanimated = require("react-native-unistyles/reanimated");
 
@@ -132,12 +132,12 @@ const IconButton = (0, react.memo)(function IconButton({ name, variant = "primar
 		],
 		...props,
 		children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.ActivityIndicator, {
-			size: generated_styles.buttonStyles.icon.fontSize,
+			size: generated_styles.iconButtonStyles.icon.fontSize,
 			color: generated_styles.buttonStyles.icon.color
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
 			name,
 			variant: iconVariant,
-			style: generated_styles.buttonStyles.icon
+			style: [generated_styles.iconButtonStyles.icon, generated_styles.buttonStyles.icon]
 		})
 	});
 });

package/dist/components/IconButton.js

@@ -5,8 +5,8 @@ import { Icon } from "./Icon.js";
 import { AnimatedPressable } from "./Pressable.js";
 import { memo, useCallback, useMemo, useState } from "react";
 import { ActivityIndicator } from "react-native";
-import { buttonStyles, iconButtonStyles, styles } from "../../generated/styles";
 import { jsx } from "react/jsx-runtime";
+import { buttonStyles, iconButtonStyles, styles } from "../../generated/styles";
 import { Easing, useAnimatedStyle, useDerivedValue, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
 import { useAnimatedTheme, useAnimatedVariantColor } from "react-native-unistyles/reanimated";
 
@@ -130,12 +130,12 @@ const IconButton = memo(function IconButton({ name, variant = "primary", size =
 		],
 		...props,
 		children: loading ? /* @__PURE__ */ jsx(ActivityIndicator, {
-			size: buttonStyles.icon.fontSize,
+			size: iconButtonStyles.icon.fontSize,
 			color: buttonStyles.icon.color
 		}) : /* @__PURE__ */ jsx(Icon, {
 			name,
 			variant: iconVariant,
-			style: buttonStyles.icon
+			style: [iconButtonStyles.icon, buttonStyles.icon]
 		})
 	});
 });

package/dist/components/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","names":["foundationStyles"],"sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonVariantFlat, IconButtonSize, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useMemo, useState } from 'react';\nimport type { View } from 'react-native';\nimport { ActivityIndicator } from 'react-native';\nimport {\n  Easing,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated';\nimport { useAnimatedTheme, useAnimatedVariantColor } from 'react-native-unistyles/reanimated';\n\nimport { buttonStyles, iconButtonStyles, styles as foundationStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport type { IconName } from './Icon';\nimport { Icon } from './Icon';\nimport type { PressableProps } from './Pressable';\nimport { AnimatedPressable } from './Pressable';\n\n/* -------------------------------------------------------------------------- */\n/*                              Animation Helpers                              */\n/* -------------------------------------------------------------------------- */\n\nfunction interpolateShadowAlpha(shadow: string | undefined, alpha: number): string {\n  'worklet';\n  if (!shadow) {\n    return '';\n  }\n  if (alpha >= 1) {\n    return shadow;\n  }\n  if (alpha <= 0) {\n    return '';\n  }\n\n  return shadow.replace(/rgba\\(([^,]+),\\s*([^,]+),\\s*([^,]+),\\s*([^)]+)\\)/g, (_, r, g, b, a) => {\n    const newAlpha = parseFloat(a) * alpha;\n    return `rgba(${r}, ${g}, ${b}, ${newAlpha.toFixed(3)})`;\n  });\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            IconButton Props                                 */\n/* -------------------------------------------------------------------------- */\n\ninterface IconButtonProps extends Omit<PressableProps, 'children'> {\n  /** Icon to render from the icons package */\n  name: IconName;\n  /** The visual style variant @default 'primary' */\n  variant?: ButtonVariantFlat;\n  /** The size of the button @default 'md' */\n  size?: IconButtonSize;\n  /** The icon style variant @default 'outline' */\n  iconVariant?: IconVariant;\n  /** Shows a loading spinner and disables the button */\n  loading?: boolean;\n  /**\n   * Disable motion effects (scale on press, icon animations)\n   * @default false\n   */\n  disableEffects?: boolean;\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            IconButton Component                             */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **An icon button element that can be used to trigger an action**\n *\n * @description\n * An icon-only button for actions where space is limited. Features animated\n * scale effect on press and smooth color transitions matching the web UDS\n * IconButton behavior.\n *\n * @category Interactive\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { IconButton } from '@yahoo/uds-mobile';\n *\n * <IconButton name=\"Add\" onPress={() => console.log('pressed')} />\n * <IconButton name=\"Close\" variant=\"secondary\" size=\"sm\" />\n * <IconButton name=\"Settings\" loading />\n * ```\n *\n * @usage\n * - Use for toolbar actions\n * - Use for closing modals/dialogs\n * - Always provide accessibilityLabel for screen readers\n *\n * @accessibility\n * - Sets `accessibilityRole=\"button\"` automatically\n * - Announces loading state to screen readers\n * - **Always** provide `accessibilityLabel` since there's no visible text\n *\n * @see {@link Button} for buttons with text labels\n * @see {@link Icon} for non-interactive icons\n */\nconst IconButton = memo(function IconButton({\n  name,\n  variant = 'primary',\n  size = 'md',\n  iconVariant = 'outline',\n  loading,\n  disabled,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  disableEffects = false,\n  onPressIn,\n  onPressOut,\n  ref,\n  ...props\n}: IconButtonProps) {\n  const isDisabled = disabled || loading;\n  const shouldAnimate = !disableEffects && !isDisabled;\n\n  /* --------------------------------- State ---------------------------------- */\n  const [pressed, setPressed] = useState(false);\n\n  // Apply layer-based styles with compound variant support\n  iconButtonStyles.useVariants({ size });\n  buttonStyles.useVariants({ variant, disabled: isDisabled, pressed });\n\n  // Animate colors using Unistyles' useAnimatedVariantColor\n  const backgroundColor = useAnimatedVariantColor(buttonStyles.root, 'backgroundColor');\n  const borderColor = useAnimatedVariantColor(buttonStyles.root, 'borderColor');\n\n  // Get animated theme for boxShadow\n  const animatedTheme = useAnimatedTheme();\n\n  /* ------------------------------- Animation -------------------------------- */\n  const scale = useSharedValue<number>(SCALE_EFFECTS.none);\n\n  const handlePressIn = useCallback<NonNullable<PressableProps['onPressIn']>>(\n    (event) => {\n      setPressed(true);\n      if (shouldAnimate) {\n        scale.value = withSpring(SCALE_EFFECTS.down, BUTTON_SPRING_CONFIG);\n      }\n      onPressIn?.(event);\n    },\n    [shouldAnimate, scale, onPressIn],\n  );\n\n  const handlePressOut = useCallback<NonNullable<PressableProps['onPressOut']>>(\n    (event) => {\n      setPressed(false);\n      if (shouldAnimate) {\n        scale.value = withSpring(SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG);\n      }\n      onPressOut?.(event);\n    },\n    [shouldAnimate, scale, onPressOut],\n  );\n\n  const a11yState = useMemo(() => ({ disabled: isDisabled, busy: loading }), [isDisabled, loading]);\n\n  /* --------------------------------- Styles --------------------------------- */\n  // Animate pressed state for shadow\n  const pressProgress = useDerivedValue(\n    () => withTiming(pressed ? 1 : 0, { duration: 220, easing: Easing.bezier(0, 0, 0.2, 1) }),\n    [pressed],\n  );\n\n  // Animate using Unistyles' variant color system + boxShadow from theme\n  const animatedRootStyle = useAnimatedStyle(() => {\n    // Get boxShadow from theme using flattened path (no camelCase conversion needed!)\n    const components = animatedTheme.value.components as unknown as Record<\n      string,\n      Record<string, unknown>\n    >;\n    const shadowPressed = components[`button/variant/${variant}/root/pressed`]?.boxShadow as\n      | string\n      | undefined;\n\n    return {\n      transform: [{ scale: scale.value }],\n      backgroundColor: withTiming(backgroundColor.value, {\n        duration: 220,\n        easing: Easing.bezier(0, 0, 0.2, 1),\n      }),\n      borderColor: withTiming(borderColor.value, {\n        duration: 220,\n        easing: Easing.bezier(0, 0, 0.2, 1),\n      }),\n      // Only animate shadow if the theme defines one for this variant\n      ...(shadowPressed && {\n        boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value),\n      }),\n    };\n  });\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <AnimatedPressable\n      ref={ref}\n      disabled={isDisabled}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      overflow=\"hidden\"\n      accessibilityLabel={loading ? `${accessibilityLabel ?? ''}, loading` : accessibilityLabel}\n      accessibilityHint={accessibilityHint}\n      accessibilityRole=\"button\"\n      accessibilityState={a11yState}\n      style={[\n        iconButtonStyles.root,\n        buttonStyles.root,\n        foundationStyles.foundation,\n        animatedRootStyle,\n        typeof style === 'function' ? style({ pressed }) : style,\n      ]}\n      {...props}\n    >\n      {loading ? (\n        <ActivityIndicator size={buttonStyles.icon.fontSize} color={buttonStyles.icon.color} />\n      ) : (\n        <Icon name={name} variant={iconVariant} style={buttonStyles.icon} />\n      )}\n    </AnimatedPressable>\n  );\n});\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton, type IconButtonProps };\n"],"mappings":";;;;;;;;;;;;;AA0BA,SAAS,uBAAuB,QAA4B,OAAuB;AACjF;AACA,KAAI,CAAC,OACH,QAAO;AAET,KAAI,SAAS,EACX,QAAO;AAET,KAAI,SAAS,EACX,QAAO;AAGT,QAAO,OAAO,QAAQ,sDAAsD,GAAG,GAAG,GAAG,GAAG,MAAM;AAE5F,SAAO,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,KADZ,WAAW,EAAE,GAAG,OACS,QAAQ,EAAE,CAAC;GACrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEJ,MAAM,aAAa,KAAK,SAAS,WAAW,EAC1C,MACA,UAAU,WACV,OAAO,MACP,cAAc,WACd,SACA,UACA,OACA,oBACA,mBACA,iBAAiB,OACjB,WACA,YACA,KACA,GAAG,SACe;CAClB,MAAM,aAAa,YAAY;CAC/B,MAAM,gBAAgB,CAAC,kBAAkB,CAAC;CAG1C,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;AAG7C,kBAAiB,YAAY,EAAE,MAAM,CAAC;AACtC,cAAa,YAAY;EAAE;EAAS,UAAU;EAAY;EAAS,CAAC;CAGpE,MAAM,kBAAkB,wBAAwB,aAAa,MAAM,kBAAkB;CACrF,MAAM,cAAc,wBAAwB,aAAa,MAAM,cAAc;CAG7E,MAAM,gBAAgB,kBAAkB;CAGxC,MAAM,QAAQ,eAAuB,cAAc,KAAK;CAExD,MAAM,gBAAgB,aACnB,UAAU;AACT,aAAW,KAAK;AAChB,MAAI,cACF,OAAM,QAAQ,WAAW,cAAc,MAAM,qBAAqB;AAEpE,cAAY,MAAM;IAEpB;EAAC;EAAe;EAAO;EAAU,CAClC;CAED,MAAM,iBAAiB,aACpB,UAAU;AACT,aAAW,MAAM;AACjB,MAAI,cACF,OAAM,QAAQ,WAAW,cAAc,MAAM,qBAAqB;AAEpE,eAAa,MAAM;IAErB;EAAC;EAAe;EAAO;EAAW,CACnC;CAED,MAAM,YAAY,eAAe;EAAE,UAAU;EAAY,MAAM;EAAS,GAAG,CAAC,YAAY,QAAQ,CAAC;CAIjG,MAAM,gBAAgB,sBACd,WAAW,UAAU,IAAI,GAAG;EAAE,UAAU;EAAK,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;EAAE,CAAC,EACzF,CAAC,QAAQ,CACV;CAGD,MAAM,oBAAoB,uBAAuB;EAM/C,MAAM,gBAJa,cAAc,MAAM,WAIN,kBAAkB,QAAQ,iBAAiB;AAI5E,SAAO;GACL,WAAW,CAAC,EAAE,OAAO,MAAM,OAAO,CAAC;GACnC,iBAAiB,WAAW,gBAAgB,OAAO;IACjD,UAAU;IACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;IACpC,CAAC;GACF,aAAa,WAAW,YAAY,OAAO;IACzC,UAAU;IACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;IACpC,CAAC;GAEF,GAAI,iBAAiB,EACnB,WAAW,uBAAuB,eAAe,cAAc,MAAM,EACtE;GACF;GACD;AAGF,QACE,oBAAC;EACM;EACL,UAAU;EACV,WAAW;EACX,YAAY;EACZ,eAAc;EACd,YAAW;EACX,gBAAe;EACf,UAAS;EACT,oBAAoB,UAAU,GAAG,sBAAsB,GAAG,aAAa;EACpD;EACnB,mBAAkB;EAClB,oBAAoB;EACpB,OAAO;GACL,iBAAiB;GACjB,aAAa;GACbA,OAAiB;GACjB;GACA,OAAO,UAAU,aAAa,MAAM,EAAE,SAAS,CAAC,GAAG;GACpD;EACD,GAAI;YAEH,UACC,oBAAC;GAAkB,MAAM,aAAa,KAAK;GAAU,OAAO,aAAa,KAAK;IAAS,GAEvF,oBAAC;GAAW;GAAM,SAAS;GAAa,OAAO,aAAa;IAAQ;GAEpD;EAEtB;AAEF,WAAW,cAAc"}
+{"version":3,"file":"IconButton.js","names":["foundationStyles"],"sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonVariantFlat, IconButtonSize, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useMemo, useState } from 'react';\nimport type { View } from 'react-native';\nimport { ActivityIndicator } from 'react-native';\nimport {\n  Easing,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated';\nimport { useAnimatedTheme, useAnimatedVariantColor } from 'react-native-unistyles/reanimated';\n\nimport { buttonStyles, iconButtonStyles, styles as foundationStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport type { IconName } from './Icon';\nimport { Icon } from './Icon';\nimport type { PressableProps } from './Pressable';\nimport { AnimatedPressable } from './Pressable';\n\n/* -------------------------------------------------------------------------- */\n/*                              Animation Helpers                              */\n/* -------------------------------------------------------------------------- */\n\nfunction interpolateShadowAlpha(shadow: string | undefined, alpha: number): string {\n  'worklet';\n  if (!shadow) {\n    return '';\n  }\n  if (alpha >= 1) {\n    return shadow;\n  }\n  if (alpha <= 0) {\n    return '';\n  }\n\n  return shadow.replace(/rgba\\(([^,]+),\\s*([^,]+),\\s*([^,]+),\\s*([^)]+)\\)/g, (_, r, g, b, a) => {\n    const newAlpha = parseFloat(a) * alpha;\n    return `rgba(${r}, ${g}, ${b}, ${newAlpha.toFixed(3)})`;\n  });\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            IconButton Props                                 */\n/* -------------------------------------------------------------------------- */\n\ninterface IconButtonProps extends Omit<PressableProps, 'children'> {\n  /** Icon to render from the icons package */\n  name: IconName;\n  /** The visual style variant @default 'primary' */\n  variant?: ButtonVariantFlat;\n  /** The size of the button @default 'md' */\n  size?: IconButtonSize;\n  /** The icon style variant @default 'outline' */\n  iconVariant?: IconVariant;\n  /** Shows a loading spinner and disables the button */\n  loading?: boolean;\n  /**\n   * Disable motion effects (scale on press, icon animations)\n   * @default false\n   */\n  disableEffects?: boolean;\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            IconButton Component                             */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **An icon button element that can be used to trigger an action**\n *\n * @description\n * An icon-only button for actions where space is limited. Features animated\n * scale effect on press and smooth color transitions matching the web UDS\n * IconButton behavior.\n *\n * @category Interactive\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { IconButton } from '@yahoo/uds-mobile';\n *\n * <IconButton name=\"Add\" onPress={() => console.log('pressed')} />\n * <IconButton name=\"Close\" variant=\"secondary\" size=\"sm\" />\n * <IconButton name=\"Settings\" loading />\n * ```\n *\n * @usage\n * - Use for toolbar actions\n * - Use for closing modals/dialogs\n * - Always provide accessibilityLabel for screen readers\n *\n * @accessibility\n * - Sets `accessibilityRole=\"button\"` automatically\n * - Announces loading state to screen readers\n * - **Always** provide `accessibilityLabel` since there's no visible text\n *\n * @see {@link Button} for buttons with text labels\n * @see {@link Icon} for non-interactive icons\n */\nconst IconButton = memo(function IconButton({\n  name,\n  variant = 'primary',\n  size = 'md',\n  iconVariant = 'outline',\n  loading,\n  disabled,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  disableEffects = false,\n  onPressIn,\n  onPressOut,\n  ref,\n  ...props\n}: IconButtonProps) {\n  const isDisabled = disabled || loading;\n  const shouldAnimate = !disableEffects && !isDisabled;\n\n  /* --------------------------------- State ---------------------------------- */\n  const [pressed, setPressed] = useState(false);\n\n  // Apply layer-based styles with compound variant support\n  iconButtonStyles.useVariants({ size });\n  buttonStyles.useVariants({ variant, disabled: isDisabled, pressed });\n\n  // Animate colors using Unistyles' useAnimatedVariantColor\n  const backgroundColor = useAnimatedVariantColor(buttonStyles.root, 'backgroundColor');\n  const borderColor = useAnimatedVariantColor(buttonStyles.root, 'borderColor');\n\n  // Get animated theme for boxShadow\n  const animatedTheme = useAnimatedTheme();\n\n  /* ------------------------------- Animation -------------------------------- */\n  const scale = useSharedValue<number>(SCALE_EFFECTS.none);\n\n  const handlePressIn = useCallback<NonNullable<PressableProps['onPressIn']>>(\n    (event) => {\n      setPressed(true);\n      if (shouldAnimate) {\n        scale.value = withSpring(SCALE_EFFECTS.down, BUTTON_SPRING_CONFIG);\n      }\n      onPressIn?.(event);\n    },\n    [shouldAnimate, scale, onPressIn],\n  );\n\n  const handlePressOut = useCallback<NonNullable<PressableProps['onPressOut']>>(\n    (event) => {\n      setPressed(false);\n      if (shouldAnimate) {\n        scale.value = withSpring(SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG);\n      }\n      onPressOut?.(event);\n    },\n    [shouldAnimate, scale, onPressOut],\n  );\n\n  const a11yState = useMemo(() => ({ disabled: isDisabled, busy: loading }), [isDisabled, loading]);\n\n  /* --------------------------------- Styles --------------------------------- */\n  // Animate pressed state for shadow\n  const pressProgress = useDerivedValue(\n    () => withTiming(pressed ? 1 : 0, { duration: 220, easing: Easing.bezier(0, 0, 0.2, 1) }),\n    [pressed],\n  );\n\n  // Animate using Unistyles' variant color system + boxShadow from theme\n  const animatedRootStyle = useAnimatedStyle(() => {\n    // Get boxShadow from theme using flattened path (no camelCase conversion needed!)\n    const components = animatedTheme.value.components as unknown as Record<\n      string,\n      Record<string, unknown>\n    >;\n    const shadowPressed = components[`button/variant/${variant}/root/pressed`]?.boxShadow as\n      | string\n      | undefined;\n\n    return {\n      transform: [{ scale: scale.value }],\n      backgroundColor: withTiming(backgroundColor.value, {\n        duration: 220,\n        easing: Easing.bezier(0, 0, 0.2, 1),\n      }),\n      borderColor: withTiming(borderColor.value, {\n        duration: 220,\n        easing: Easing.bezier(0, 0, 0.2, 1),\n      }),\n      // Only animate shadow if the theme defines one for this variant\n      ...(shadowPressed && {\n        boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value),\n      }),\n    };\n  });\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <AnimatedPressable\n      ref={ref}\n      disabled={isDisabled}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      overflow=\"hidden\"\n      accessibilityLabel={loading ? `${accessibilityLabel ?? ''}, loading` : accessibilityLabel}\n      accessibilityHint={accessibilityHint}\n      accessibilityRole=\"button\"\n      accessibilityState={a11yState}\n      style={[\n        iconButtonStyles.root,\n        buttonStyles.root,\n        foundationStyles.foundation,\n        animatedRootStyle,\n        typeof style === 'function' ? style({ pressed }) : style,\n      ]}\n      {...props}\n    >\n      {loading ? (\n        <ActivityIndicator size={iconButtonStyles.icon.fontSize} color={buttonStyles.icon.color} />\n      ) : (\n        <Icon\n          name={name}\n          variant={iconVariant}\n          style={[iconButtonStyles.icon, buttonStyles.icon]}\n        />\n      )}\n    </AnimatedPressable>\n  );\n});\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton, type IconButtonProps };\n"],"mappings":";;;;;;;;;;;;;AA0BA,SAAS,uBAAuB,QAA4B,OAAuB;AACjF;AACA,KAAI,CAAC,OACH,QAAO;AAET,KAAI,SAAS,EACX,QAAO;AAET,KAAI,SAAS,EACX,QAAO;AAGT,QAAO,OAAO,QAAQ,sDAAsD,GAAG,GAAG,GAAG,GAAG,MAAM;AAE5F,SAAO,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,KADZ,WAAW,EAAE,GAAG,OACS,QAAQ,EAAE,CAAC;GACrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEJ,MAAM,aAAa,KAAK,SAAS,WAAW,EAC1C,MACA,UAAU,WACV,OAAO,MACP,cAAc,WACd,SACA,UACA,OACA,oBACA,mBACA,iBAAiB,OACjB,WACA,YACA,KACA,GAAG,SACe;CAClB,MAAM,aAAa,YAAY;CAC/B,MAAM,gBAAgB,CAAC,kBAAkB,CAAC;CAG1C,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;AAG7C,kBAAiB,YAAY,EAAE,MAAM,CAAC;AACtC,cAAa,YAAY;EAAE;EAAS,UAAU;EAAY;EAAS,CAAC;CAGpE,MAAM,kBAAkB,wBAAwB,aAAa,MAAM,kBAAkB;CACrF,MAAM,cAAc,wBAAwB,aAAa,MAAM,cAAc;CAG7E,MAAM,gBAAgB,kBAAkB;CAGxC,MAAM,QAAQ,eAAuB,cAAc,KAAK;CAExD,MAAM,gBAAgB,aACnB,UAAU;AACT,aAAW,KAAK;AAChB,MAAI,cACF,OAAM,QAAQ,WAAW,cAAc,MAAM,qBAAqB;AAEpE,cAAY,MAAM;IAEpB;EAAC;EAAe;EAAO;EAAU,CAClC;CAED,MAAM,iBAAiB,aACpB,UAAU;AACT,aAAW,MAAM;AACjB,MAAI,cACF,OAAM,QAAQ,WAAW,cAAc,MAAM,qBAAqB;AAEpE,eAAa,MAAM;IAErB;EAAC;EAAe;EAAO;EAAW,CACnC;CAED,MAAM,YAAY,eAAe;EAAE,UAAU;EAAY,MAAM;EAAS,GAAG,CAAC,YAAY,QAAQ,CAAC;CAIjG,MAAM,gBAAgB,sBACd,WAAW,UAAU,IAAI,GAAG;EAAE,UAAU;EAAK,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;EAAE,CAAC,EACzF,CAAC,QAAQ,CACV;CAGD,MAAM,oBAAoB,uBAAuB;EAM/C,MAAM,gBAJa,cAAc,MAAM,WAIN,kBAAkB,QAAQ,iBAAiB;AAI5E,SAAO;GACL,WAAW,CAAC,EAAE,OAAO,MAAM,OAAO,CAAC;GACnC,iBAAiB,WAAW,gBAAgB,OAAO;IACjD,UAAU;IACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;IACpC,CAAC;GACF,aAAa,WAAW,YAAY,OAAO;IACzC,UAAU;IACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;IACpC,CAAC;GAEF,GAAI,iBAAiB,EACnB,WAAW,uBAAuB,eAAe,cAAc,MAAM,EACtE;GACF;GACD;AAGF,QACE,oBAAC;EACM;EACL,UAAU;EACV,WAAW;EACX,YAAY;EACZ,eAAc;EACd,YAAW;EACX,gBAAe;EACf,UAAS;EACT,oBAAoB,UAAU,GAAG,sBAAsB,GAAG,aAAa;EACpD;EACnB,mBAAkB;EAClB,oBAAoB;EACpB,OAAO;GACL,iBAAiB;GACjB,aAAa;GACbA,OAAiB;GACjB;GACA,OAAO,UAAU,aAAa,MAAM,EAAE,SAAS,CAAC,GAAG;GACpD;EACD,GAAI;YAEH,UACC,oBAAC;GAAkB,MAAM,iBAAiB,KAAK;GAAU,OAAO,aAAa,KAAK;IAAS,GAE3F,oBAAC;GACO;GACN,SAAS;GACT,OAAO,CAAC,iBAAiB,MAAM,aAAa,KAAK;IACjD;GAEc;EAEtB;AAEF,WAAW,cAAc"}

package/dist/components/Image.cjs

@@ -3,8 +3,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
 let react = require("react");
 let react_native = require("react-native");
-let generated_styles = require("../../generated/styles");
 let react_jsx_runtime = require("react/jsx-runtime");
+let generated_styles = require("../../generated/styles");
 
 //#region src/components/Image.tsx
 const CONTENT_FIT_TO_RESIZE_MODE = {

package/dist/components/Image.js

@@ -1,8 +1,8 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 import { memo, useMemo } from "react";
 import { Image as Image$1 } from "react-native";
-import { styles } from "../../generated/styles";
 import { jsx } from "react/jsx-runtime";
+import { styles } from "../../generated/styles";
 
 //#region src/components/Image.tsx
 const CONTENT_FIT_TO_RESIZE_MODE = {

package/dist/components/Input.cjs

@@ -7,8 +7,8 @@ const require_components_HStack = require('./HStack.cjs');
 const require_components_VStack = require('./VStack.cjs');
 let react = require("react");
 let react_native = require("react-native");
-let generated_styles = require("../../generated/styles");
 let react_jsx_runtime = require("react/jsx-runtime");
+let generated_styles = require("../../generated/styles");
 let lodash_es = require("lodash-es");
 
 //#region src/components/Input.tsx

package/dist/components/Input.js

@@ -5,8 +5,8 @@ import { HStack } from "./HStack.js";
 import { VStack } from "./VStack.js";
 import { memo, useCallback, useId, useMemo, useState } from "react";
 import { TextInput, View } from "react-native";
-import { inputStyles } from "../../generated/styles";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { inputStyles } from "../../generated/styles";
 import { isFunction } from "lodash-es";
 
 //#region src/components/Input.tsx

package/dist/components/Link.cjs

@@ -4,8 +4,8 @@ const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
 const require_components_IconSlot = require('./IconSlot.cjs');
 let react = require("react");
 let react_native = require("react-native");
-let generated_styles = require("../../generated/styles");
 let react_jsx_runtime = require("react/jsx-runtime");
+let generated_styles = require("../../generated/styles");
 let react_native_reanimated = require("react-native-reanimated");
 react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
 let react_native_unistyles_reanimated = require("react-native-unistyles/reanimated");

package/dist/components/Link.js

@@ -2,8 +2,8 @@
 import { IconSlot } from "./IconSlot.js";
 import { memo, useCallback, useMemo, useState } from "react";
 import { Text } from "react-native";
-import { linkStyles } from "../../generated/styles";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { linkStyles } from "../../generated/styles";
 import Animated, { Easing, interpolateColor, useAnimatedStyle, useDerivedValue, withTiming } from "react-native-reanimated";
 import { useAnimatedTheme } from "react-native-unistyles/reanimated";
 

package/dist/components/Pressable.cjs

@@ -3,8 +3,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
 let react = require("react");
 let react_native = require("react-native");
-let generated_styles = require("../../generated/styles");
 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);