@yahoo/uds-mobile 2.21.2 → 2.23.0

package/dist/bin/uds-mobile.mjs

@@ -97,13 +97,6 @@ async function loadConfigFromFile(configPath) {
 	const moduleUrl = pathToFileURL(absolutePath).href;
 	log(`Loading config from: ${configPath}`, "dim");
 	const configModule = await import(moduleUrl);
-	for (const key in configModule) if (key.endsWith("Config") || key === "default") {
-		const config = configModule[key];
-		if (config && typeof config === "object") {
-			logStep("Found", `config export: ${key}`);
-			return config;
-		}
-	}
 	for (const name of [
 		"config",
 		"tokens",
@@ -113,6 +106,13 @@ async function loadConfigFromFile(configPath) {
 		logStep("Found", `config export: ${name}`);
 		return configModule[name];
 	}
+	for (const key in configModule) if (key.endsWith("Config") || key === "default") {
+		const config = configModule[key];
+		if (config && typeof config === "object") {
+			logStep("Found", `config export: ${key}`);
+			return config;
+		}
+	}
 	throw new Error(`No config export found in ${configPath}. Expected an export ending with "Config" or a default export.`);
 }
 async function runSync(opts = {}) {

package/dist/components/IconButton.cjs

@@ -59,6 +59,7 @@ function interpolateShadowAlpha(shadow, alpha) {
 const IconButton = (0, react.memo)(function IconButton({ name, variant = "primary", size = "md", iconVariant = "outline", iconColor, loading, disabled, style, accessibilityLabel, accessibilityHint, disableEffects = false, onPressIn, onPressOut, ref, ...props }) {
 	const isDisabled = disabled || loading;
 	const shouldAnimate = !disableEffects && !isDisabled;
+	const shouldAnimateVariantColors = react_native.Platform.OS !== "web";
 	const { theme } = (0, react_native_unistyles.useUnistyles)();
 	const { controlHeight } = (0, react.useMemo)(() => require_components_Button_buttonTheme.getIconButtonControlMetrics(theme, size), [theme, size]);
 	const matchedControlDimensions = controlHeight > 0 ? {
@@ -66,16 +67,16 @@ const IconButton = (0, react.memo)(function IconButton({ name, variant = "primar
 		width: controlHeight
 	} : void 0;
 	const [pressed, setPressed] = (0, react.useState)(false);
-	generated_styles.iconButtonStyles.useVariants({ size });
-	generated_styles.buttonStyles.useVariants({
+	const resolvedIconButtonStyles = generated_styles.iconButtonStyles.useVariants({ size }) ?? generated_styles.iconButtonStyles;
+	const resolvedButtonStyles = generated_styles.buttonStyles.useVariants({
 		variant,
 		disabled: isDisabled,
 		pressed
-	});
-	generated_styles.styles.useVariants({ color: iconColor });
-	const resolvedIconColor = iconColor ? generated_styles.styles.foundation.color : void 0;
-	const backgroundColor = (0, react_native_unistyles_reanimated.useAnimatedVariantColor)(generated_styles.buttonStyles.root, "backgroundColor");
-	const borderColor = (0, react_native_unistyles_reanimated.useAnimatedVariantColor)(generated_styles.buttonStyles.root, "borderColor");
+	}) ?? generated_styles.buttonStyles;
+	const resolvedFoundationStyles = generated_styles.styles.useVariants({ color: iconColor }) ?? generated_styles.styles;
+	const resolvedIconColor = iconColor ? resolvedFoundationStyles.foundation.color : void 0;
+	const backgroundColor = (0, react_native_unistyles_reanimated.useAnimatedVariantColor)(resolvedButtonStyles.root, "backgroundColor");
+	const borderColor = (0, react_native_unistyles_reanimated.useAnimatedVariantColor)(resolvedButtonStyles.root, "borderColor");
 	const animatedTheme = (0, react_native_unistyles_reanimated.useAnimatedTheme)();
 	const scale = (0, react_native_reanimated.useSharedValue)(require_index.SCALE_EFFECTS.none);
 	const handlePressIn = (0, react.useCallback)((event) => {
@@ -108,14 +109,16 @@ const IconButton = (0, react.memo)(function IconButton({ name, variant = "primar
 		const shadowPressed = animatedTheme.value.components[`button/variant/${variant}/root/pressed`]?.boxShadow;
 		return {
 			transform: [{ scale: scale.value }],
-			backgroundColor: (0, react_native_reanimated.withTiming)(backgroundColor.value, {
-				duration: 220,
-				easing: react_native_reanimated.Easing.bezier(0, 0, .2, 1)
-			}),
-			borderColor: (0, react_native_reanimated.withTiming)(borderColor.value, {
-				duration: 220,
-				easing: react_native_reanimated.Easing.bezier(0, 0, .2, 1)
-			}),
+			...shouldAnimateVariantColors && {
+				backgroundColor: (0, react_native_reanimated.withTiming)(backgroundColor.value, {
+					duration: 220,
+					easing: react_native_reanimated.Easing.bezier(0, 0, .2, 1)
+				}),
+				borderColor: (0, react_native_reanimated.withTiming)(borderColor.value, {
+					duration: 220,
+					easing: react_native_reanimated.Easing.bezier(0, 0, .2, 1)
+				})
+			},
 			...shadowPressed && { boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value) }
 		};
 	});
@@ -133,21 +136,21 @@ const IconButton = (0, react.memo)(function IconButton({ name, variant = "primar
 		accessibilityRole: "button",
 		accessibilityState: a11yState,
 		style: [
-			generated_styles.iconButtonStyles.root,
-			generated_styles.buttonStyles.root,
+			resolvedIconButtonStyles.root,
+			resolvedButtonStyles.root,
 			matchedControlDimensions,
-			generated_styles.styles.foundation,
+			resolvedFoundationStyles.foundation,
 			animatedRootStyle,
 			typeof style === "function" ? style({ pressed }) : style
 		],
 		...props,
 		children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.ActivityIndicator, {
-			size: generated_styles.iconButtonStyles.icon.fontSize,
-			color: resolvedIconColor ?? generated_styles.buttonStyles.icon.color
+			size: resolvedIconButtonStyles.icon.fontSize,
+			color: resolvedIconColor ?? resolvedButtonStyles.icon.color
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
 			name,
 			variant: iconVariant,
-			style: [generated_styles.iconButtonStyles.icon, generated_styles.buttonStyles.icon],
+			style: [resolvedIconButtonStyles.icon, resolvedButtonStyles.icon],
 			dangerouslySetColor: resolvedIconColor
 		})
 	});

package/dist/components/IconButton.js

@@ -5,7 +5,7 @@ import { Icon } from "./Icon.js";
 import { getIconButtonControlMetrics } from "./Button/buttonTheme.js";
 import { AnimatedPressable } from "./Pressable.js";
 import { memo, useCallback, useMemo, useState } from "react";
-import { ActivityIndicator } from "react-native";
+import { ActivityIndicator, Platform } from "react-native";
 import { jsx } from "react/jsx-runtime";
 import { buttonStyles, iconButtonStyles, styles } from "../../generated/styles";
 import { useUnistyles } from "react-native-unistyles";
@@ -57,6 +57,7 @@ function interpolateShadowAlpha(shadow, alpha) {
 const IconButton = memo(function IconButton({ name, variant = "primary", size = "md", iconVariant = "outline", iconColor, loading, disabled, style, accessibilityLabel, accessibilityHint, disableEffects = false, onPressIn, onPressOut, ref, ...props }) {
 	const isDisabled = disabled || loading;
 	const shouldAnimate = !disableEffects && !isDisabled;
+	const shouldAnimateVariantColors = Platform.OS !== "web";
 	const { theme } = useUnistyles();
 	const { controlHeight } = useMemo(() => getIconButtonControlMetrics(theme, size), [theme, size]);
 	const matchedControlDimensions = controlHeight > 0 ? {
@@ -64,16 +65,16 @@ const IconButton = memo(function IconButton({ name, variant = "primary", size =
 		width: controlHeight
 	} : void 0;
 	const [pressed, setPressed] = useState(false);
-	iconButtonStyles.useVariants({ size });
-	buttonStyles.useVariants({
+	const resolvedIconButtonStyles = iconButtonStyles.useVariants({ size }) ?? iconButtonStyles;
+	const resolvedButtonStyles = buttonStyles.useVariants({
 		variant,
 		disabled: isDisabled,
 		pressed
-	});
-	styles.useVariants({ color: iconColor });
-	const resolvedIconColor = iconColor ? styles.foundation.color : void 0;
-	const backgroundColor = useAnimatedVariantColor(buttonStyles.root, "backgroundColor");
-	const borderColor = useAnimatedVariantColor(buttonStyles.root, "borderColor");
+	}) ?? buttonStyles;
+	const resolvedFoundationStyles = styles.useVariants({ color: iconColor }) ?? styles;
+	const resolvedIconColor = iconColor ? resolvedFoundationStyles.foundation.color : void 0;
+	const backgroundColor = useAnimatedVariantColor(resolvedButtonStyles.root, "backgroundColor");
+	const borderColor = useAnimatedVariantColor(resolvedButtonStyles.root, "borderColor");
 	const animatedTheme = useAnimatedTheme();
 	const scale = useSharedValue(SCALE_EFFECTS.none);
 	const handlePressIn = useCallback((event) => {
@@ -106,14 +107,16 @@ const IconButton = memo(function IconButton({ name, variant = "primary", size =
 		const shadowPressed = animatedTheme.value.components[`button/variant/${variant}/root/pressed`]?.boxShadow;
 		return {
 			transform: [{ scale: scale.value }],
-			backgroundColor: withTiming(backgroundColor.value, {
-				duration: 220,
-				easing: Easing.bezier(0, 0, .2, 1)
-			}),
-			borderColor: withTiming(borderColor.value, {
-				duration: 220,
-				easing: Easing.bezier(0, 0, .2, 1)
-			}),
+			...shouldAnimateVariantColors && {
+				backgroundColor: withTiming(backgroundColor.value, {
+					duration: 220,
+					easing: Easing.bezier(0, 0, .2, 1)
+				}),
+				borderColor: withTiming(borderColor.value, {
+					duration: 220,
+					easing: Easing.bezier(0, 0, .2, 1)
+				})
+			},
 			...shadowPressed && { boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value) }
 		};
 	});
@@ -131,21 +134,21 @@ const IconButton = memo(function IconButton({ name, variant = "primary", size =
 		accessibilityRole: "button",
 		accessibilityState: a11yState,
 		style: [
-			iconButtonStyles.root,
-			buttonStyles.root,
+			resolvedIconButtonStyles.root,
+			resolvedButtonStyles.root,
 			matchedControlDimensions,
-			styles.foundation,
+			resolvedFoundationStyles.foundation,
 			animatedRootStyle,
 			typeof style === "function" ? style({ pressed }) : style
 		],
 		...props,
 		children: loading ? /* @__PURE__ */ jsx(ActivityIndicator, {
-			size: iconButtonStyles.icon.fontSize,
-			color: resolvedIconColor ?? buttonStyles.icon.color
+			size: resolvedIconButtonStyles.icon.fontSize,
+			color: resolvedIconColor ?? resolvedButtonStyles.icon.color
 		}) : /* @__PURE__ */ jsx(Icon, {
 			name,
 			variant: iconVariant,
-			style: [iconButtonStyles.icon, buttonStyles.icon],
+			style: [resolvedIconButtonStyles.icon, resolvedButtonStyles.icon],
 			dangerouslySetColor: resolvedIconColor
 		})
 	});

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';\n// eslint-disable-next-line uds/no-use-unistyles -- iconbutton control height from theme size layers\nimport { useUnistyles } from 'react-native-unistyles';\nimport { useAnimatedTheme, useAnimatedVariantColor } from 'react-native-unistyles/reanimated';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { buttonStyles, iconButtonStyles, styles as foundationStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { getIconButtonControlMetrics } from './Button/buttonTheme';\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  /** Override the icon color token without changing the button variant tokens */\n  iconColor?: StyleProps['color'];\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/IconButton';\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  iconColor,\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  const { theme } = useUnistyles();\n  const { controlHeight } = useMemo(() => getIconButtonControlMetrics(theme, size), [theme, size]);\n  const matchedControlDimensions =\n    controlHeight > 0 ? ({ height: controlHeight, width: controlHeight } as const) : undefined;\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  foundationStyles.useVariants({ color: iconColor });\n\n  const resolvedIconColor = iconColor\n    ? (foundationStyles.foundation.color as string | undefined)\n    : undefined;\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        matchedControlDimensions,\n        foundationStyles.foundation,\n        animatedRootStyle,\n        typeof style === 'function' ? style({ pressed }) : style,\n      ]}\n      {...props}\n    >\n      {loading ? (\n        <ActivityIndicator\n          size={iconButtonStyles.icon.fontSize}\n          color={resolvedIconColor ?? buttonStyles.icon.color}\n        />\n      ) : (\n        <Icon\n          name={name}\n          variant={iconVariant}\n          style={[iconButtonStyles.icon, buttonStyles.icon]}\n          dangerouslySetColor={resolvedIconColor}\n        />\n      )}\n    </AnimatedPressable>\n  );\n});\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton, type IconButtonProps };\n"],"mappings":"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"}
+{"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, Platform } from 'react-native';\nimport {\n  Easing,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated';\n// eslint-disable-next-line uds/no-use-unistyles -- iconbutton control height from theme size layers\nimport { useUnistyles } from 'react-native-unistyles';\nimport { useAnimatedTheme, useAnimatedVariantColor } from 'react-native-unistyles/reanimated';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { buttonStyles, iconButtonStyles, styles as foundationStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { getIconButtonControlMetrics } from './Button/buttonTheme';\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  /** Override the icon color token without changing the button variant tokens */\n  iconColor?: StyleProps['color'];\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/IconButton';\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  iconColor,\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  const shouldAnimateVariantColors = Platform.OS !== 'web';\n\n  const { theme } = useUnistyles();\n  const { controlHeight } = useMemo(() => getIconButtonControlMetrics(theme, size), [theme, size]);\n  const matchedControlDimensions =\n    controlHeight > 0 ? ({ height: controlHeight, width: controlHeight } as const) : undefined;\n\n  /* --------------------------------- State ---------------------------------- */\n  const [pressed, setPressed] = useState(false);\n\n  // On web, useVariants returns the resolved style object instead of mutating\n  // the generated styles in place.\n  const variantIconButtonStyles = iconButtonStyles.useVariants({ size }) as unknown as\n    | typeof iconButtonStyles\n    | undefined;\n  const resolvedIconButtonStyles = variantIconButtonStyles ?? iconButtonStyles;\n\n  const variantButtonStyles = buttonStyles.useVariants({\n    variant,\n    disabled: isDisabled,\n    pressed,\n  }) as unknown as typeof buttonStyles | undefined;\n  const resolvedButtonStyles = variantButtonStyles ?? buttonStyles;\n\n  const variantFoundationStyles = foundationStyles.useVariants({ color: iconColor }) as unknown as\n    | typeof foundationStyles\n    | undefined;\n  const resolvedFoundationStyles = variantFoundationStyles ?? foundationStyles;\n\n  const resolvedIconColor = iconColor\n    ? (resolvedFoundationStyles.foundation.color as string | undefined)\n    : undefined;\n\n  // Animate colors using Unistyles' useAnimatedVariantColor\n  const backgroundColor = useAnimatedVariantColor(resolvedButtonStyles.root, 'backgroundColor');\n  const borderColor = useAnimatedVariantColor(resolvedButtonStyles.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      // On web, Unistyles already emits the resolved variant color class. The\n      // animated variant color hook can resolve to the black fallback there.\n      ...(shouldAnimateVariantColors && {\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      }),\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        resolvedIconButtonStyles.root,\n        resolvedButtonStyles.root,\n        matchedControlDimensions,\n        resolvedFoundationStyles.foundation,\n        animatedRootStyle,\n        typeof style === 'function' ? style({ pressed }) : style,\n      ]}\n      {...props}\n    >\n      {loading ? (\n        <ActivityIndicator\n          size={resolvedIconButtonStyles.icon.fontSize}\n          color={resolvedIconColor ?? resolvedButtonStyles.icon.color}\n        />\n      ) : (\n        <Icon\n          name={name}\n          variant={iconVariant}\n          style={[resolvedIconButtonStyles.icon, resolvedButtonStyles.icon]}\n          dangerouslySetColor={resolvedIconColor}\n        />\n      )}\n    </AnimatedPressable>\n  );\n});\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton, type IconButtonProps };\n"],"mappings":"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"}

package/dist/components/Select/Select.cjs

@@ -0,0 +1,194 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_components_HStack = require("../HStack.cjs");
+const require_components_Text = require("../Text.cjs");
+const require_components_InputHelpText = require("../InputHelpText.cjs");
+const require_components_VStack = require("../VStack.cjs");
+const require_components_internal_Overlay_useControllableState = require("../internal/Overlay/useControllableState.cjs");
+const require_components_Select_selectContext = require("./selectContext.cjs");
+const require_components_Select_SelectTrigger = require("./SelectTrigger.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let generated_styles = require("../../../generated/styles");
+let lodash_es = require("lodash-es");
+//#region src/components/Select/Select.tsx
+/**
+* **⚙️ A composable Select component**
+*
+* @description
+* Select lets users pick one value from a list. Compose with `SelectContent` and
+* `SelectItem`, similar to `Tabs` with `TabList` and `Tab`.
+*
+* @category Form
+* @platform mobile
+*
+* @example
+* ```tsx
+* import { Select, SelectContent, SelectItem } from '@yahoo/uds-mobile/Select';
+*
+* <Select label="Country" placeholder="Select a country" defaultValue="us">
+*   <SelectContent>
+*     <SelectItem value="us">United States</SelectItem>
+*     <SelectItem value="ca">Canada</SelectItem>
+*   </SelectContent>
+* </Select>
+* ```
+*/
+const Select = (0, react.memo)(function Select({ label, helpText, helperTextIcon, placeholder, size = "md", disabled, required, hasError, readOnly, width = "100%", reduceMotion = false, startIcon, endIcon, value: valueProp, defaultValue = "", onChange, children, testID }) {
+	const uid = `uds-select-${(0, react.useId)()}`;
+	const triggerRef = (0, react.useRef)(null);
+	const [triggerRect, setTriggerRect] = (0, react.useState)(null);
+	const [highlightedValue, setHighlightedValue] = (0, react.useState)(null);
+	const itemsRef = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const [, setItemsVersion] = (0, react.useState)(0);
+	const [value, setValue] = require_components_internal_Overlay_useControllableState.useControllableState({
+		value: valueProp,
+		defaultValue,
+		onChange
+	});
+	const [open, setOpen] = require_components_internal_Overlay_useControllableState.useControllableState({
+		defaultValue: false,
+		onChange: (nextOpen) => {
+			if (!nextOpen) setHighlightedValue(null);
+		}
+	});
+	const registerItem = (0, react.useCallback)((itemValue, itemLabel) => {
+		if (itemsRef.current.get(itemValue) === itemLabel) return;
+		itemsRef.current.set(itemValue, itemLabel);
+		setItemsVersion((version) => version + 1);
+	}, []);
+	const unregisterItem = (0, react.useCallback)((itemValue) => {
+		if (!itemsRef.current.has(itemValue)) return;
+		itemsRef.current.delete(itemValue);
+		setItemsVersion((version) => version + 1);
+	}, []);
+	const getItemLabel = (0, react.useCallback)((itemValue) => itemsRef.current.get(itemValue), []);
+	const fieldContext = (0, react.useMemo)(() => ({
+		size,
+		disabled,
+		readOnly,
+		required,
+		hasError,
+		width,
+		reduceMotion,
+		placeholder,
+		uid
+	}), [
+		disabled,
+		hasError,
+		placeholder,
+		readOnly,
+		reduceMotion,
+		required,
+		size,
+		uid,
+		width
+	]);
+	const contextValue = (0, react.useMemo)(() => ({
+		value,
+		setValue,
+		open,
+		setOpen,
+		triggerRef,
+		triggerRect,
+		setTriggerRect,
+		registerItem,
+		unregisterItem,
+		getItemLabel,
+		highlightedValue,
+		setHighlightedValue,
+		field: fieldContext,
+		reduceMotion
+	}), [
+		fieldContext,
+		getItemLabel,
+		highlightedValue,
+		open,
+		reduceMotion,
+		registerItem,
+		setOpen,
+		setValue,
+		triggerRect,
+		unregisterItem,
+		value
+	]);
+	const valueState = value.length > 0 ? "filled" : "empty";
+	generated_styles.inputStyles.useVariants({
+		size,
+		value: valueState,
+		pressed: open,
+		readonly: readOnly,
+		invalid: hasError
+	});
+	const rootStyle = (0, react.useMemo)(() => [{
+		width,
+		opacity: disabled ? .5 : 1
+	}], [disabled, width]);
+	const labelContent = (0, react.useMemo)(() => {
+		if (!label) return null;
+		const content = (0, lodash_es.isFunction)(label) ? label() : label;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_HStack.HStack, {
+			columnGap: "1",
+			alignItems: "flex-end",
+			spacingBottom: "2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+				style: generated_styles.inputStyles.label,
+				children: content
+			}), required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+				style: generated_styles.inputStyles.labelRequired,
+				children: "*"
+			})]
+		});
+	}, [
+		label,
+		required,
+		generated_styles.inputStyles.label,
+		generated_styles.inputStyles.labelRequired
+	]);
+	const helpTextContent = (0, react.useMemo)(() => {
+		if (!helpText) return null;
+		const content = (0, lodash_es.isFunction)(helpText) ? helpText() : helpText;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_InputHelpText.InputHelpText, {
+			startIcon: helperTextIcon,
+			size,
+			isFilled: valueState === "filled",
+			disabled,
+			readOnly,
+			hasError,
+			pressed: open,
+			children: content
+		});
+	}, [
+		disabled,
+		hasError,
+		helpText,
+		helperTextIcon,
+		open,
+		readOnly,
+		size,
+		valueState
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Select_selectContext.SelectContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Select_selectContext.SelectFieldContext.Provider, {
+			value: fieldContext,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_VStack.VStack, {
+				testID,
+				style: rootStyle,
+				children: [
+					labelContent,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Select_SelectTrigger.SelectTrigger, {
+						startIcon,
+						endIcon
+					}),
+					helpTextContent,
+					children
+				]
+			})
+		})
+	});
+});
+Select.displayName = "Select";
+//#endregion
+exports.Select = Select;

package/dist/components/Select/Select.d.cts

@@ -0,0 +1,47 @@
+
+import { UniversalSelectProps } from "../../types/dist/index.cjs";
+import { IconSlotType } from "../IconSlot.cjs";
+import * as _$react from "react";
+import { ReactNode } from "react";
+
+//#region src/components/Select/Select.d.ts
+interface SelectProps extends Omit<UniversalSelectProps<IconSlotType>, 'width'> {
+  /** Placeholder text shown when no value is selected. */
+  placeholder?: string;
+  /** Selected value for controlled usage. */
+  value?: string;
+  /** Initial value for uncontrolled usage. @default '' */
+  defaultValue?: string;
+  /** Called when the selected value changes. */
+  onChange?: (value: string) => void;
+  /** Container width. @default '100%' */
+  width?: number | `${number}%` | '100%';
+  children?: ReactNode;
+  testID?: string;
+}
+/**
+ * **⚙️ A composable Select component**
+ *
+ * @description
+ * Select lets users pick one value from a list. Compose with `SelectContent` and
+ * `SelectItem`, similar to `Tabs` with `TabList` and `Tab`.
+ *
+ * @category Form
+ * @platform mobile
+ *
+ * @example
+ * ```tsx
+ * import { Select, SelectContent, SelectItem } from '@yahoo/uds-mobile/Select';
+ *
+ * <Select label="Country" placeholder="Select a country" defaultValue="us">
+ *   <SelectContent>
+ *     <SelectItem value="us">United States</SelectItem>
+ *     <SelectItem value="ca">Canada</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ * ```
+ */
+declare const Select: _$react.NamedExoticComponent<SelectProps>;
+//#endregion
+export { Select, type SelectProps };
+//# sourceMappingURL=Select.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.cts","names":[],"sources":["../../../src/components/Select/Select.tsx"],"mappings":";;;;;;;UAiBU,WAAA,SAAoB,IAAA,CAAK,oBAAA,CAAqB,YAAA;;EAEtD,WAAA;EAFQ;EAIR,KAAA;;EAEA,YAAA;EANiC;EAQjC,QAAA,IAAY,KAAA;EARgB;EAU5B,KAAA;EACA,QAAA,GAAW,SAAA;EACX,MAAA;AAAA;;;;;;;;;;;;;AAAM;;;;;;;;;;cAyBF,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,47 @@
+
+import { UniversalSelectProps } from "../../types/dist/index.js";
+import { IconSlotType } from "../IconSlot.js";
+import * as _$react from "react";
+import { ReactNode } from "react";
+
+//#region src/components/Select/Select.d.ts
+interface SelectProps extends Omit<UniversalSelectProps<IconSlotType>, 'width'> {
+  /** Placeholder text shown when no value is selected. */
+  placeholder?: string;
+  /** Selected value for controlled usage. */
+  value?: string;
+  /** Initial value for uncontrolled usage. @default '' */
+  defaultValue?: string;
+  /** Called when the selected value changes. */
+  onChange?: (value: string) => void;
+  /** Container width. @default '100%' */
+  width?: number | `${number}%` | '100%';
+  children?: ReactNode;
+  testID?: string;
+}
+/**
+ * **⚙️ A composable Select component**
+ *
+ * @description
+ * Select lets users pick one value from a list. Compose with `SelectContent` and
+ * `SelectItem`, similar to `Tabs` with `TabList` and `Tab`.
+ *
+ * @category Form
+ * @platform mobile
+ *
+ * @example
+ * ```tsx
+ * import { Select, SelectContent, SelectItem } from '@yahoo/uds-mobile/Select';
+ *
+ * <Select label="Country" placeholder="Select a country" defaultValue="us">
+ *   <SelectContent>
+ *     <SelectItem value="us">United States</SelectItem>
+ *     <SelectItem value="ca">Canada</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ * ```
+ */
+declare const Select: _$react.NamedExoticComponent<SelectProps>;
+//#endregion
+export { Select, type SelectProps };
+//# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","names":[],"sources":["../../../src/components/Select/Select.tsx"],"mappings":";;;;;;;UAiBU,WAAA,SAAoB,IAAA,CAAK,oBAAA,CAAqB,YAAA;;EAEtD,WAAA;EAFQ;EAIR,KAAA;;EAEA,YAAA;EANiC;EAQjC,QAAA,IAAY,KAAA;EARgB;EAU5B,KAAA;EACA,QAAA,GAAW,SAAA;EACX,MAAA;AAAA;;;;;;;;;;;;;AAAM;;;;;;;;;;cAyBF,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}