@yahoo/uds-mobile 1.0.0

package/dist/components/Button.cjs

@@ -0,0 +1,187 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_motion = require('../uds/dist/tokens/configs/motion.cjs');
+const require_motion$1 = require('../motion.cjs');
+const require_components_IconSlot = require('./IconSlot.cjs');
+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 react_native_reanimated = require("react-native-reanimated");
+react_native_reanimated = require_rolldown_runtime.__toESM(react_native_reanimated);
+let react_native_unistyles_reanimated = require("react-native-unistyles/reanimated");
+
+//#region src/components/Button.tsx
+/**
+* Interpolates a boxShadow string by scaling the alpha of all colors.
+* This allows smooth fade-in/out of shadows.
+*/
+function interpolateShadowAlpha(shadow, alpha) {
+	"worklet";
+	if (!shadow || alpha >= 1) return shadow;
+	if (alpha <= 0) return "";
+	return shadow.replace(/rgba\(([^,]+),\s*([^,]+),\s*([^,]+),\s*([^)]+)\)/g, (_, r, g, b, a) => {
+		return `rgba(${r}, ${g}, ${b}, ${(parseFloat(a) * alpha).toFixed(3)})`;
+	});
+}
+/**
+* Animated wrapper for icon/loading content.
+* Matches web Button icon animation: scale 0.7→1, opacity 0→1, width 0→auto
+* Uses staggered animation: opacity waits until halfway through width animation.
+*/
+function AnimatedIconSlot({ children, visible, iconSize, gap }) {
+	const progress = (0, react_native_reanimated.useDerivedValue)(() => (0, react_native_reanimated.withSpring)(visible ? 1 : 0, require_motion$1.BUTTON_SPRING_CONFIG), [visible]);
+	const animatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => {
+		const totalWidth = iconSize + gap;
+		return {
+			width: (0, react_native_reanimated.interpolate)(progress.value, [0, 1], [0, totalWidth]),
+			opacity: (0, react_native_reanimated.interpolate)(progress.value, [.5, 1], [0, 1], "clamp"),
+			transform: [{ scale: (0, react_native_reanimated.interpolate)(progress.value, [.5, 1], [.7, 1], "clamp") }],
+			overflow: "hidden"
+		};
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
+		style: animatedStyle,
+		children
+	});
+}
+/**
+* **🖲️ A button element that can be used to trigger an action**
+*
+* @description
+* A button is a fundamental component used to trigger an action or event.
+* Buttons are interactive elements that users can click, tap, or otherwise
+* engage with to submit forms, open dialogues, or perform any other interaction.
+*
+* Features animated scale effect on press and smooth icon transitions matching
+* the web UDS Button behavior.
+*
+* @example
+* ```tsx
+* import { Button } from '@yahoo/uds-mobile';
+*
+* <Button onPress={() => console.log('pressed')}>Save</Button>
+* <Button variant="secondary">Cancel</Button>
+* <Button startIcon="Add" variant="brand">Add Item</Button>
+* <Button loading>Saving...</Button>
+* ```
+*
+* @see The {@link https://uds.build/docs/components/button Button Docs} for more info
+*/
+const Button = (0, react.memo)(function Button$1({ variant = "primary", size = "md", iconVariant = "outline", startIcon, endIcon, loading, disabled, width, children, style, accessibilityLabel, accessibilityHint, disableEffects = false, onPressIn, onPressOut, ref, ...props }) {
+	const shouldAnimate = !disableEffects;
+	const [pressed, setPressed] = (0, react.useState)(false);
+	generated_styles.buttonStyles.useVariants({
+		size,
+		variant,
+		disabled,
+		pressed
+	});
+	const buttonGap = generated_styles.buttonStyles.root.gap;
+	const iconSize = generated_styles.buttonStyles.icon.fontSize;
+	const animatedTheme = (0, react_native_unistyles_reanimated.useAnimatedTheme)();
+	const scale = (0, react_native_reanimated.useSharedValue)(require_motion.SCALE_EFFECTS.none);
+	const handlePressIn = (0, react.useCallback)((event) => {
+		setPressed(true);
+		if (shouldAnimate) scale.value = (0, react_native_reanimated.withSpring)(require_motion.SCALE_EFFECTS.down, require_motion$1.BUTTON_SPRING_CONFIG);
+		onPressIn?.(event);
+	}, [
+		shouldAnimate,
+		scale,
+		onPressIn
+	]);
+	const handlePressOut = (0, react.useCallback)((event) => {
+		setPressed(false);
+		if (shouldAnimate) scale.value = (0, react_native_reanimated.withSpring)(require_motion.SCALE_EFFECTS.none, require_motion$1.BUTTON_SPRING_CONFIG);
+		onPressOut?.(event);
+	}, [
+		shouldAnimate,
+		scale,
+		onPressOut
+	]);
+	const childrenNode = children && ((0, react.isValidElement)(children) ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+		numberOfLines: 1,
+		textAlign: "center",
+		style: generated_styles.buttonStyles.text,
+		children
+	}));
+	const a11yState = (0, react.useMemo)(() => ({
+		disabled,
+		busy: loading
+	}), [disabled, loading]);
+	const pressProgress = (0, react_native_reanimated.useDerivedValue)(() => (0, react_native_reanimated.withTiming)(pressed ? 1 : 0, {
+		duration: 220,
+		easing: react_native_reanimated.Easing.bezier(0, 0, .2, 1)
+	}), [pressed]);
+	const animatedStyles = (0, react_native_reanimated.useAnimatedStyle)(() => {
+		const shadowPressed = animatedTheme.value.components[`button/variant/${variant}/root/pressed`].boxShadow;
+		return {
+			transform: [{ scale: scale.value }],
+			boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value)
+		};
+	});
+	const showLoading = !!loading;
+	const showStartIcon = !!startIcon && !loading;
+	const showEndIcon = !!endIcon && !loading;
+	const startContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedIconSlot, {
+		visible: showLoading || showStartIcon,
+		iconSize,
+		gap: buttonGap,
+		children: showLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.ActivityIndicator, {
+			size: generated_styles.buttonStyles.icon.fontSize,
+			color: generated_styles.buttonStyles.icon.color
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+			icon: startIcon,
+			variant: iconVariant,
+			style: generated_styles.buttonStyles.icon
+		})
+	});
+	const endContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedIconSlot, {
+		visible: showEndIcon,
+		iconSize,
+		gap: buttonGap,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+			icon: endIcon,
+			variant: iconVariant,
+			style: generated_styles.buttonStyles.icon
+		})
+	});
+	const rootStyles = (0, react.useMemo)(() => [
+		generated_styles.buttonStyles.root,
+		animatedStyles,
+		typeof style === "function" ? style({ pressed }) : style
+	], [
+		generated_styles.buttonStyles.root,
+		animatedStyles,
+		style,
+		pressed
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Pressable.AnimatedPressable, {
+		ref,
+		disabled,
+		onPressIn: handlePressIn,
+		onPressOut: handlePressOut,
+		flexDirection: "row",
+		alignItems: "center",
+		justifyContent: "center",
+		overflow: "hidden",
+		accessibilityLabel: loading ? `${accessibilityLabel ?? ""}, loading` : accessibilityLabel,
+		accessibilityHint,
+		accessibilityRole: "button",
+		accessibilityState: a11yState,
+		alignContent: "center",
+		style: rootStyles,
+		...props,
+		children: [
+			startContent,
+			childrenNode,
+			endContent
+		]
+	});
+});
+Button.displayName = "Button";
+
+//#endregion
+exports.Button = Button;

package/dist/components/Button.d.cts

@@ -0,0 +1,56 @@
+
+import { IconVariant } from "../icons/dist/types.cjs";
+import { ButtonSize, ButtonVariantFlat } from "../uds/dist/tokens/types.cjs";
+import { IconSlotType } from "./IconSlot.cjs";
+import { PressableProps as PressableProps$1 } from "./Pressable.cjs";
+import * as react13 from "react";
+import { Ref } from "react";
+import { View } from "react-native";
+
+//#region src/components/Button.d.ts
+interface ButtonProps extends Omit<PressableProps$1, 'children' | 'disabled'> {
+  /** @default 'primary' */
+  variant?: ButtonVariantFlat;
+  /** @default 'md' */
+  size?: ButtonSize;
+  /** @default 'outline' */
+  iconVariant?: IconVariant;
+  startIcon?: IconSlotType;
+  endIcon?: IconSlotType;
+  loading?: boolean;
+  disabled?: boolean;
+  children?: React.ReactNode;
+  /**
+   * Disable motion effects (scale on press, icon animations)
+   * @default false
+   */
+  disableEffects?: boolean;
+  ref?: Ref<View>;
+}
+/**
+ * **🖲️ A button element that can be used to trigger an action**
+ *
+ * @description
+ * A button is a fundamental component used to trigger an action or event.
+ * Buttons are interactive elements that users can click, tap, or otherwise
+ * engage with to submit forms, open dialogues, or perform any other interaction.
+ *
+ * Features animated scale effect on press and smooth icon transitions matching
+ * the web UDS Button behavior.
+ *
+ * @example
+ * ```tsx
+ * import { Button } from '@yahoo/uds-mobile';
+ *
+ * <Button onPress={() => console.log('pressed')}>Save</Button>
+ * <Button variant="secondary">Cancel</Button>
+ * <Button startIcon="Add" variant="brand">Add Item</Button>
+ * <Button loading>Saving...</Button>
+ * ```
+ *
+ * @see The {@link https://uds.build/docs/components/button Button Docs} for more info
+ */
+declare const Button: react13.NamedExoticComponent<ButtonProps>;
+//#endregion
+export { Button, type ButtonProps };
+//# sourceMappingURL=Button.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.cts","names":[],"sources":["../../src/components/Button.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;UA2GU,WAAA,SAAoB,KAAK;;YAEvB;;EAFF,IAAA,CAAA,EAID,UAJa;EAAa;EAEvB,WAAA,CAAA,EAII,WAJJ;EAEH,SAAA,CAAA,EAGK,YAHL;EAEO,OAAA,CAAA,EAEJ,YAFI;EACF,OAAA,CAAA,EAAA,OAAA;EACF,QAAA,CAAA,EAAA,OAAA;EAGC,QAAM,CAAA,EAAN,KAAA,CAAM,SAAA;EAMP;;;;EA8BN,cA4JJ,CAAA,EAAA,OA5JU;QA9BJ,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;cA8BN,QAAM,OAAA,CAAA,qBAAA"}

package/dist/components/Button.d.mts

@@ -0,0 +1,56 @@
+
+import { IconVariant } from "../icons/dist/types.mjs";
+import { ButtonSize, ButtonVariantFlat } from "../uds/dist/tokens/types.mjs";
+import { IconSlotType } from "./IconSlot.mjs";
+import { PressableProps as PressableProps$1 } from "./Pressable.mjs";
+import * as react17 from "react";
+import { Ref } from "react";
+import { View } from "react-native";
+
+//#region src/components/Button.d.ts
+interface ButtonProps extends Omit<PressableProps$1, 'children' | 'disabled'> {
+  /** @default 'primary' */
+  variant?: ButtonVariantFlat;
+  /** @default 'md' */
+  size?: ButtonSize;
+  /** @default 'outline' */
+  iconVariant?: IconVariant;
+  startIcon?: IconSlotType;
+  endIcon?: IconSlotType;
+  loading?: boolean;
+  disabled?: boolean;
+  children?: React.ReactNode;
+  /**
+   * Disable motion effects (scale on press, icon animations)
+   * @default false
+   */
+  disableEffects?: boolean;
+  ref?: Ref<View>;
+}
+/**
+ * **🖲️ A button element that can be used to trigger an action**
+ *
+ * @description
+ * A button is a fundamental component used to trigger an action or event.
+ * Buttons are interactive elements that users can click, tap, or otherwise
+ * engage with to submit forms, open dialogues, or perform any other interaction.
+ *
+ * Features animated scale effect on press and smooth icon transitions matching
+ * the web UDS Button behavior.
+ *
+ * @example
+ * ```tsx
+ * import { Button } from '@yahoo/uds-mobile';
+ *
+ * <Button onPress={() => console.log('pressed')}>Save</Button>
+ * <Button variant="secondary">Cancel</Button>
+ * <Button startIcon="Add" variant="brand">Add Item</Button>
+ * <Button loading>Saving...</Button>
+ * ```
+ *
+ * @see The {@link https://uds.build/docs/components/button Button Docs} for more info
+ */
+declare const Button: react17.NamedExoticComponent<ButtonProps>;
+//#endregion
+export { Button, type ButtonProps };
+//# sourceMappingURL=Button.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.mts","names":[],"sources":["../../src/components/Button.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;UA2GU,WAAA,SAAoB,KAAK;;YAEvB;;EAFF,IAAA,CAAA,EAID,UAJa;EAAa;EAEvB,WAAA,CAAA,EAII,WAJJ;EAEH,SAAA,CAAA,EAGK,YAHL;EAEO,OAAA,CAAA,EAEJ,YAFI;EACF,OAAA,CAAA,EAAA,OAAA;EACF,QAAA,CAAA,EAAA,OAAA;EAGC,QAAM,CAAA,EAAN,KAAA,CAAM,SAAA;EAMP;;;;EA8BN,cA4JJ,CAAA,EAAA,OA5JU;QA9BJ,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;cA8BN,QAAM,OAAA,CAAA,qBAAA"}

package/dist/components/Button.mjs

@@ -0,0 +1,186 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { SCALE_EFFECTS } from "../uds/dist/tokens/configs/motion.mjs";
+import { BUTTON_SPRING_CONFIG } from "../motion.mjs";
+import { IconSlot } from "./IconSlot.mjs";
+import { Text as Text$1 } from "./Text.mjs";
+import { AnimatedPressable } from "./Pressable.mjs";
+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 Animated, { Easing, interpolate, useAnimatedStyle, useDerivedValue, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
+import { useAnimatedTheme } from "react-native-unistyles/reanimated";
+
+//#region src/components/Button.tsx
+/**
+* Interpolates a boxShadow string by scaling the alpha of all colors.
+* This allows smooth fade-in/out of shadows.
+*/
+function interpolateShadowAlpha(shadow, alpha) {
+	"worklet";
+	if (!shadow || alpha >= 1) return shadow;
+	if (alpha <= 0) return "";
+	return shadow.replace(/rgba\(([^,]+),\s*([^,]+),\s*([^,]+),\s*([^)]+)\)/g, (_, r, g, b, a) => {
+		return `rgba(${r}, ${g}, ${b}, ${(parseFloat(a) * alpha).toFixed(3)})`;
+	});
+}
+/**
+* Animated wrapper for icon/loading content.
+* Matches web Button icon animation: scale 0.7→1, opacity 0→1, width 0→auto
+* Uses staggered animation: opacity waits until halfway through width animation.
+*/
+function AnimatedIconSlot({ children, visible, iconSize, gap }) {
+	const progress = useDerivedValue(() => withSpring(visible ? 1 : 0, BUTTON_SPRING_CONFIG), [visible]);
+	const animatedStyle = useAnimatedStyle(() => {
+		const totalWidth = iconSize + gap;
+		return {
+			width: interpolate(progress.value, [0, 1], [0, totalWidth]),
+			opacity: interpolate(progress.value, [.5, 1], [0, 1], "clamp"),
+			transform: [{ scale: interpolate(progress.value, [.5, 1], [.7, 1], "clamp") }],
+			overflow: "hidden"
+		};
+	});
+	return /* @__PURE__ */ jsx(Animated.View, {
+		style: animatedStyle,
+		children
+	});
+}
+/**
+* **🖲️ A button element that can be used to trigger an action**
+*
+* @description
+* A button is a fundamental component used to trigger an action or event.
+* Buttons are interactive elements that users can click, tap, or otherwise
+* engage with to submit forms, open dialogues, or perform any other interaction.
+*
+* Features animated scale effect on press and smooth icon transitions matching
+* the web UDS Button behavior.
+*
+* @example
+* ```tsx
+* import { Button } from '@yahoo/uds-mobile';
+*
+* <Button onPress={() => console.log('pressed')}>Save</Button>
+* <Button variant="secondary">Cancel</Button>
+* <Button startIcon="Add" variant="brand">Add Item</Button>
+* <Button loading>Saving...</Button>
+* ```
+*
+* @see The {@link https://uds.build/docs/components/button Button Docs} for more info
+*/
+const Button = memo(function Button$1({ variant = "primary", size = "md", iconVariant = "outline", startIcon, endIcon, loading, disabled, width, children, style, accessibilityLabel, accessibilityHint, disableEffects = false, onPressIn, onPressOut, ref, ...props }) {
+	const shouldAnimate = !disableEffects;
+	const [pressed, setPressed] = useState(false);
+	buttonStyles.useVariants({
+		size,
+		variant,
+		disabled,
+		pressed
+	});
+	const buttonGap = buttonStyles.root.gap;
+	const iconSize = buttonStyles.icon.fontSize;
+	const animatedTheme = useAnimatedTheme();
+	const scale = useSharedValue(SCALE_EFFECTS.none);
+	const handlePressIn = useCallback((event) => {
+		setPressed(true);
+		if (shouldAnimate) scale.value = withSpring(SCALE_EFFECTS.down, BUTTON_SPRING_CONFIG);
+		onPressIn?.(event);
+	}, [
+		shouldAnimate,
+		scale,
+		onPressIn
+	]);
+	const handlePressOut = useCallback((event) => {
+		setPressed(false);
+		if (shouldAnimate) scale.value = withSpring(SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG);
+		onPressOut?.(event);
+	}, [
+		shouldAnimate,
+		scale,
+		onPressOut
+	]);
+	const childrenNode = children && (isValidElement(children) ? children : /* @__PURE__ */ jsx(Text$1, {
+		numberOfLines: 1,
+		textAlign: "center",
+		style: buttonStyles.text,
+		children
+	}));
+	const a11yState = useMemo(() => ({
+		disabled,
+		busy: loading
+	}), [disabled, loading]);
+	const pressProgress = useDerivedValue(() => withTiming(pressed ? 1 : 0, {
+		duration: 220,
+		easing: Easing.bezier(0, 0, .2, 1)
+	}), [pressed]);
+	const animatedStyles = useAnimatedStyle(() => {
+		const shadowPressed = animatedTheme.value.components[`button/variant/${variant}/root/pressed`].boxShadow;
+		return {
+			transform: [{ scale: scale.value }],
+			boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value)
+		};
+	});
+	const showLoading = !!loading;
+	const showStartIcon = !!startIcon && !loading;
+	const showEndIcon = !!endIcon && !loading;
+	const startContent = /* @__PURE__ */ jsx(AnimatedIconSlot, {
+		visible: showLoading || showStartIcon,
+		iconSize,
+		gap: buttonGap,
+		children: showLoading ? /* @__PURE__ */ jsx(ActivityIndicator, {
+			size: buttonStyles.icon.fontSize,
+			color: buttonStyles.icon.color
+		}) : /* @__PURE__ */ jsx(IconSlot, {
+			icon: startIcon,
+			variant: iconVariant,
+			style: buttonStyles.icon
+		})
+	});
+	const endContent = /* @__PURE__ */ jsx(AnimatedIconSlot, {
+		visible: showEndIcon,
+		iconSize,
+		gap: buttonGap,
+		children: /* @__PURE__ */ jsx(IconSlot, {
+			icon: endIcon,
+			variant: iconVariant,
+			style: buttonStyles.icon
+		})
+	});
+	const rootStyles = useMemo(() => [
+		buttonStyles.root,
+		animatedStyles,
+		typeof style === "function" ? style({ pressed }) : style
+	], [
+		buttonStyles.root,
+		animatedStyles,
+		style,
+		pressed
+	]);
+	return /* @__PURE__ */ jsxs(AnimatedPressable, {
+		ref,
+		disabled,
+		onPressIn: handlePressIn,
+		onPressOut: handlePressOut,
+		flexDirection: "row",
+		alignItems: "center",
+		justifyContent: "center",
+		overflow: "hidden",
+		accessibilityLabel: loading ? `${accessibilityLabel ?? ""}, loading` : accessibilityLabel,
+		accessibilityHint,
+		accessibilityRole: "button",
+		accessibilityState: a11yState,
+		alignContent: "center",
+		style: rootStyles,
+		...props,
+		children: [
+			startContent,
+			childrenNode,
+			endContent
+		]
+	});
+});
+Button.displayName = "Button";
+
+//#endregion
+export { Button };
+//# sourceMappingURL=Button.mjs.map

package/dist/components/Button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.mjs","names":["Button","Text"],"sources":["../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonSize, ButtonVariantFlat, IconVariant } from '@yahoo/uds/tokens';\nimport type { Ref } from 'react';\nimport { isValidElement, memo, useCallback, useMemo, useState } from 'react';\nimport type { View } from 'react-native';\nimport { ActivityIndicator } from 'react-native';\nimport Animated, {\n  Easing,\n  interpolate,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated';\nimport { useAnimatedTheme } from 'react-native-unistyles/reanimated';\n\nimport { buttonStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport type { PressableProps } from './Pressable';\nimport { AnimatedPressable } from './Pressable';\nimport { Text } from './Text';\n\n/* -------------------------------------------------------------------------- */\n/*                              Animation Helpers                              */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Interpolates a boxShadow string by scaling the alpha of all colors.\n * This allows smooth fade-in/out of shadows.\n */\nfunction interpolateShadowAlpha(shadow: string, alpha: number): string {\n  'worklet';\n  if (!shadow || 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/*                           Animated Icon Slot                                */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Animated wrapper for icon/loading content.\n * Matches web Button icon animation: scale 0.7→1, opacity 0→1, width 0→auto\n * Uses staggered animation: opacity waits until halfway through width animation.\n */\nfunction AnimatedIconSlot({\n  children,\n  visible,\n  iconSize,\n  gap,\n}: {\n  children: React.ReactNode;\n  visible: boolean;\n  iconSize: number;\n  gap: number;\n}) {\n  // Use useDerivedValue instead of useEffect + useSharedValue\n  // This is the idiomatic Reanimated pattern for deriving animated values from React state\n  const progress = useDerivedValue(\n    () => withSpring(visible ? 1 : 0, BUTTON_SPRING_CONFIG),\n    [visible],\n  );\n\n  const animatedStyle = useAnimatedStyle(() => {\n    // Total width includes icon + gap when visible\n    const totalWidth = iconSize + gap;\n    const width = interpolate(progress.value, [0, 1], [0, totalWidth]);\n\n    // Staggered animation: opacity starts at 50% of width animation\n    // On enter: width expands first, then icon fades in\n    // On exit: icon fades out first, then width collapses\n    const opacity = interpolate(progress.value, [0.5, 1], [0, 1], 'clamp');\n    const scale = interpolate(progress.value, [0.5, 1], [0.7, 1], 'clamp');\n\n    return {\n      width,\n      opacity,\n      transform: [{ scale }],\n      overflow: 'hidden' as const,\n    };\n  });\n\n  return <Animated.View style={animatedStyle}>{children}</Animated.View>;\n}\n\n// function LoadingIcon({ size, variant }: { size: ButtonSize, variant: ButtonVariantFlat }) {\n//   const { theme } = useUnistyles();\n//   const themeKey = `buttonVariant${variantToCapitalMap[variant]}IconRest` as const;\n//   const iconSize = theme.components.buttonSizeLgIconRest.fontSize;\n//   return <ActivityIndicator size={iconSize} color={theme.colors.text.primary} />;\n// }\n\n/* -------------------------------------------------------------------------- */\n/*                              Button Props                                   */\n/* -------------------------------------------------------------------------- */\n\ninterface ButtonProps extends Omit<PressableProps, 'children' | 'disabled'> {\n  /** @default 'primary' */\n  variant?: ButtonVariantFlat;\n  /** @default 'md' */\n  size?: ButtonSize;\n  /** @default 'outline' */\n  iconVariant?: IconVariant;\n  startIcon?: IconSlotType;\n  endIcon?: IconSlotType;\n  loading?: boolean;\n  disabled?: boolean;\n  children?: React.ReactNode;\n  /**\n   * Disable motion effects (scale on press, icon animations)\n   * @default false\n   */\n  disableEffects?: boolean;\n  ref?: Ref<View>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Button Component                               */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **🖲️ A button element that can be used to trigger an action**\n *\n * @description\n * A button is a fundamental component used to trigger an action or event.\n * Buttons are interactive elements that users can click, tap, or otherwise\n * engage with to submit forms, open dialogues, or perform any other interaction.\n *\n * Features animated scale effect on press and smooth icon transitions matching\n * the web UDS Button behavior.\n *\n * @example\n * ```tsx\n * import { Button } from '@yahoo/uds-mobile';\n *\n * <Button onPress={() => console.log('pressed')}>Save</Button>\n * <Button variant=\"secondary\">Cancel</Button>\n * <Button startIcon=\"Add\" variant=\"brand\">Add Item</Button>\n * <Button loading>Saving...</Button>\n * ```\n *\n * @see The {@link https://uds.build/docs/components/button Button Docs} for more info\n */\nconst Button = memo(function Button({\n  variant = 'primary',\n  size = 'md',\n  iconVariant = 'outline',\n  startIcon,\n  endIcon,\n  loading,\n  disabled,\n  width,\n  children,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  disableEffects = false,\n  onPressIn,\n  onPressOut,\n  ref,\n  ...props\n}: ButtonProps) {\n  const shouldAnimate = !disableEffects;\n\n  /* --------------------------------- State ---------------------------------- */\n  const [pressed, setPressed] = useState(false);\n\n  buttonStyles.useVariants({ size, variant, disabled, pressed });\n\n  // Get gap and icon size from current variant styles\n  const buttonGap = buttonStyles.root.gap;\n  const iconSize = buttonStyles.icon.fontSize;\n\n  // Get animated theme for boxShadow (useAnimatedVariantColor doesn't support non-color props)\n  const animatedTheme = useAnimatedTheme();\n\n  /* ------------------------------- Animation -------------------------------- */\n  const scale = useSharedValue<number>(SCALE_EFFECTS.none);\n\n  const handlePressIn = useCallback(\n    (event: Parameters<NonNullable<PressableProps['onPressIn']>>[0]) => {\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(\n    (event: Parameters<NonNullable<PressableProps['onPressOut']>>[0]) => {\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  /* -------------------------------- Content --------------------------------- */\n  const childrenNode =\n    children &&\n    (isValidElement(children) ? (\n      children\n    ) : (\n      <Text numberOfLines={1} textAlign=\"center\" style={buttonStyles.text}>\n        {children}\n      </Text>\n    ));\n\n  const a11yState = useMemo(() => ({ disabled, busy: loading }), [disabled, loading]);\n\n  /* --------------------------------- Styles --------------------------------- */\n  // Animate pressed state for shadow (0 = rest, 1 = pressed)\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 animatedStyles = useAnimatedStyle(() => {\n    // Get boxShadow from theme using flattened path (no camelCase conversion needed!)\n    const components = animatedTheme.value.components;\n    const buttonVariantPath = `button/variant/${variant}/root/pressed` as const;\n    const shadowPressed = components[buttonVariantPath].boxShadow;\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      // Animate shadow by interpolating its color alpha\n      boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value),\n    };\n  });\n\n  // Determine what should be visible in start slot\n  const showLoading = !!loading;\n  const showStartIcon = !!startIcon && !loading;\n  const showEndIcon = !!endIcon && !loading;\n\n  // Start slot: either loading spinner or start icon\n  const startContent = (\n    <AnimatedIconSlot visible={showLoading || showStartIcon} iconSize={iconSize} gap={buttonGap}>\n      {showLoading ? (\n        <ActivityIndicator size={buttonStyles.icon.fontSize} color={buttonStyles.icon.color} />\n      ) : (\n        <IconSlot icon={startIcon} variant={iconVariant} style={buttonStyles.icon} />\n      )}\n    </AnimatedIconSlot>\n  );\n\n  // End slot: only end icon (no loading here)\n  const endContent = (\n    <AnimatedIconSlot visible={showEndIcon} iconSize={iconSize} gap={buttonGap}>\n      <IconSlot icon={endIcon} variant={iconVariant} style={buttonStyles.icon} />\n    </AnimatedIconSlot>\n  );\n\n  const rootStyles = useMemo(\n    () => [\n      buttonStyles.root,\n      animatedStyles,\n      typeof style === 'function' ? style({ pressed }) : style,\n    ],\n    [buttonStyles.root, animatedStyles, style, pressed],\n  );\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <AnimatedPressable\n      ref={ref}\n      disabled={disabled}\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      alignContent=\"center\"\n      style={rootStyles}\n      {...props}\n    >\n      {startContent}\n      {childrenNode}\n      {endContent}\n    </AnimatedPressable>\n  );\n});\n\nButton.displayName = 'Button';\n\nexport { Button, type ButtonProps };\n"],"mappings":"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"}