@yahoo/uds-mobile 1.3.0-beta.9 → 1.4.0-beta.1

package/dist/components/IconButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.mjs","names":["IconButton","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, 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/*                            IconButton Props                                 */\n/* -------------------------------------------------------------------------- */\n\ninterface IconButtonProps extends Omit<PressableProps, 'children'> {\n  /** Icon to render from the icons package. */\n  name: IconName;\n  /** @default 'primary' */\n  variant?: ButtonVariantFlat;\n  /** @default 'md' */\n  size?: IconButtonSize;\n  /** @default 'outline' */\n  iconVariant?: IconVariant;\n  loading?: boolean;\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/*                            IconButton Component                             */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **An icon button element that can be used to trigger an action**\n *\n * Features animated scale effect on press and smooth color transitions\n * matching the web UDS IconButton behavior.\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 */\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 =\n      (components[`button/variant/${variant}/root/pressed`]?.boxShadow as string) ?? '';\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      boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value),\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,QAAgB,OAAuB;AACrE;AACA,KAAI,CAAC,UAAU,SAAS,EACtB,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;;;;;;;;;;;;;;;;;AA4CJ,MAAM,aAAa,KAAK,SAASA,aAAW,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,WAKzB,kBAAkB,QAAQ,iBAAiB,aAAwB;AAEjF,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;GACF,WAAW,uBAAuB,eAAe,cAAc,MAAM;GACtE;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;GACbC,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.mjs","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, 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/*                            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 =\n      (components[`button/variant/${variant}/root/pressed`]?.boxShadow as string) ?? '';\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      boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value),\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,QAAgB,OAAuB;AACrE;AACA,KAAI,CAAC,UAAU,SAAS,EACtB,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,WAKzB,kBAAkB,QAAQ,iBAAiB,aAAwB;AAEjF,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;GACF,WAAW,uBAAuB,eAAe,cAAc,MAAM;GACtE;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"}

package/dist/components/IconSlot.cjs

@@ -1,5 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
 const require_components_Icon = require('./Icon.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -14,6 +15,9 @@ let lodash_es = require("lodash-es");
 * consumers to pass in a standard UDS icon name, an Icon component, or a render function
 * for custom rendering.
 *
+* @category Utility
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { IconSlot } from '@yahoo/uds-mobile';
@@ -32,8 +36,10 @@ let lodash_es = require("lodash-es");
 * - Pass icon name for simple usage
 * - Pass Icon component for custom props
 * - Pass function for dynamic rendering
+*
+* @see {@link Icon} for direct icon rendering
 */
-const IconSlot = (0, react.memo)(function IconSlot$1({ icon, ref, ...props }) {
+const IconSlot = (0, react.memo)(function IconSlot({ icon, ref, ...props }) {
 	if (!icon) return null;
 	if (typeof icon === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
 		ref,

package/dist/components/IconSlot.d.cts

@@ -1,6 +1,6 @@
 
 import { IconName, IconProps } from "./Icon.cjs";
-import * as react8 from "react";
+import * as react from "react";
 import { ReactElement, Ref } from "react";
 import { Text } from "react-native";
 
@@ -20,6 +20,9 @@ interface IconSlotProps extends IconPropsWithoutName {
  * consumers to pass in a standard UDS icon name, an Icon component, or a render function
  * for custom rendering.
  *
+ * @category Utility
+ * @platform mobile
+ *
  * @example
  * ```tsx
  * import { IconSlot } from '@yahoo/uds-mobile';
@@ -38,8 +41,10 @@ interface IconSlotProps extends IconPropsWithoutName {
  * - Pass icon name for simple usage
  * - Pass Icon component for custom props
  * - Pass function for dynamic rendering
+ *
+ * @see {@link Icon} for direct icon rendering
  */
-declare const IconSlot: react8.NamedExoticComponent<IconSlotProps>;
+declare const IconSlot: react.NamedExoticComponent<IconSlotProps>;
 //#endregion
 export { IconSlot, type IconSlotProps, type IconSlotType };
 //# sourceMappingURL=IconSlot.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconSlot.d.cts","names":[],"sources":["../../src/components/IconSlot.tsx"],"sourcesContent":[],"mappings":";;;;;;;KAOK,oBAAA,GAAuB,KAAK;KAE5B,YAAA,GACD,WACA,aAAa,0BACA,yBAAyB,aAAa;UAE7C,aAAA,SAAsB;EAP3B,GAAA,CAAA,EAQG,GARH,CAQO,IARP,CAAA;EAEA;EACD,IAAA,CAAA,EAOK,YAPL;;;;;;;AAEkD;;;;;;AAEF;;;;;;;;;;;;;;;;cAkC9C,UAAQ,MAAA,CAAA,qBAAA"}
+{"version":3,"file":"IconSlot.d.cts","names":[],"sources":["../../src/components/IconSlot.tsx"],"mappings":";;;;;;;KAOK,oBAAA,GAAuB,IAAA,CAAK,SAAA;AAAA,KAE5B,YAAA,GACD,QAAA,GACA,YAAA,CAAa,SAAA,MACX,SAAA,EAAW,oBAAA,KAAyB,YAAA,CAAa,SAAA;AAAA,UAE7C,aAAA,SAAsB,oBAAA;EAC9B,GAAA,GAAM,GAAA,CAAI,IAAA;EARa;EAUvB,IAAA,GAAO,YAAA;AAAA;;AAViC;;;;;;;;;;;;;;;;;;;;AAKsB;;;;;;;;;;;cAyC1D,QAAA,EAAQ,KAAA,CAAA,oBAAA,CAAA,aAAA"}

package/dist/components/IconSlot.d.mts

@@ -1,6 +1,6 @@
 
 import { IconName, IconProps } from "./Icon.mjs";
-import * as react16 from "react";
+import * as react from "react";
 import { ReactElement, Ref } from "react";
 import { Text } from "react-native";
 
@@ -20,6 +20,9 @@ interface IconSlotProps extends IconPropsWithoutName {
  * consumers to pass in a standard UDS icon name, an Icon component, or a render function
  * for custom rendering.
  *
+ * @category Utility
+ * @platform mobile
+ *
  * @example
  * ```tsx
  * import { IconSlot } from '@yahoo/uds-mobile';
@@ -38,8 +41,10 @@ interface IconSlotProps extends IconPropsWithoutName {
  * - Pass icon name for simple usage
  * - Pass Icon component for custom props
  * - Pass function for dynamic rendering
+ *
+ * @see {@link Icon} for direct icon rendering
  */
-declare const IconSlot: react16.NamedExoticComponent<IconSlotProps>;
+declare const IconSlot: react.NamedExoticComponent<IconSlotProps>;
 //#endregion
 export { IconSlot, type IconSlotProps, type IconSlotType };
 //# sourceMappingURL=IconSlot.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconSlot.d.mts","names":[],"sources":["../../src/components/IconSlot.tsx"],"sourcesContent":[],"mappings":";;;;;;;KAOK,oBAAA,GAAuB,KAAK;KAE5B,YAAA,GACD,WACA,aAAa,0BACA,yBAAyB,aAAa;UAE7C,aAAA,SAAsB;EAP3B,GAAA,CAAA,EAQG,GARH,CAQO,IARP,CAAA;EAEA;EACD,IAAA,CAAA,EAOK,YAPL;;;;;;;AAEkD;;;;;;AAEF;;;;;;;;;;;;;;;;cAkC9C,UAAQ,OAAA,CAAA,qBAAA"}
+{"version":3,"file":"IconSlot.d.mts","names":[],"sources":["../../src/components/IconSlot.tsx"],"mappings":";;;;;;;KAOK,oBAAA,GAAuB,IAAA,CAAK,SAAA;AAAA,KAE5B,YAAA,GACD,QAAA,GACA,YAAA,CAAa,SAAA,MACX,SAAA,EAAW,oBAAA,KAAyB,YAAA,CAAa,SAAA;AAAA,UAE7C,aAAA,SAAsB,oBAAA;EAC9B,GAAA,GAAM,GAAA,CAAI,IAAA;EARa;EAUvB,IAAA,GAAO,YAAA;AAAA;;AAViC;;;;;;;;;;;;;;;;;;;;AAKsB;;;;;;;;;;;cAyC1D,QAAA,EAAQ,KAAA,CAAA,oBAAA,CAAA,aAAA"}

package/dist/components/IconSlot.mjs

@@ -13,6 +13,9 @@ import { isFunction } from "lodash-es";
 * consumers to pass in a standard UDS icon name, an Icon component, or a render function
 * for custom rendering.
 *
+* @category Utility
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { IconSlot } from '@yahoo/uds-mobile';
@@ -31,8 +34,10 @@ import { isFunction } from "lodash-es";
 * - Pass icon name for simple usage
 * - Pass Icon component for custom props
 * - Pass function for dynamic rendering
+*
+* @see {@link Icon} for direct icon rendering
 */
-const IconSlot = memo(function IconSlot$1({ icon, ref, ...props }) {
+const IconSlot = memo(function IconSlot({ icon, ref, ...props }) {
 	if (!icon) return null;
 	if (typeof icon === "string") return /* @__PURE__ */ jsx(Icon, {
 		ref,

package/dist/components/IconSlot.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconSlot.mjs","names":["IconSlot"],"sources":["../../src/components/IconSlot.tsx"],"sourcesContent":["import { isFunction } from 'lodash-es';\nimport type { ReactElement, Ref } from 'react';\nimport { cloneElement, isValidElement, memo } from 'react';\nimport type { Text as RNText } from 'react-native';\n\nimport type { IconName, IconProps } from './Icon';\nimport { Icon } from './Icon';\ntype IconPropsWithoutName = Omit<IconProps, 'name'>;\n\ntype IconSlotType =\n  | IconName\n  | ReactElement<IconProps>\n  | ((iconProps: IconPropsWithoutName) => ReactElement<IconProps>);\n\ninterface IconSlotProps extends IconPropsWithoutName {\n  ref?: Ref<RNText>;\n  /** The icon to render. Can be a UDS icon, an Icon component, ReactNode, or a function that returns a ReactNode. */\n  icon?: IconSlotType;\n  /** Props to spread onto the icon. */\n}\n\n/**\n * **🔌 A helper container to render icons flexibly**\n *\n * @description\n * Useful in components that use icons and have a startIcon and endIcon. It allows\n * consumers to pass in a standard UDS icon name, an Icon component, or a render function\n * for custom rendering.\n *\n * @example\n * ```tsx\n * import { IconSlot } from '@yahoo/uds-mobile';\n *\n * // Using icon name (preferred - stable reference, no useMemo needed)\n * <IconSlot icon=\"Info\" size=\"md\" variant=\"fill\" />\n *\n * // Using Icon component\n * <IconSlot icon={<Icon name=\"Info\" variant=\"fill\" />} />\n *\n * // Using render function\n * <IconSlot icon={(props) => <Icon name=\"Info\" {...props} variant=\"fill\" />} />\n * ```\n *\n * @usage\n * - Pass icon name for simple usage\n * - Pass Icon component for custom props\n * - Pass function for dynamic rendering\n */\nconst IconSlot = memo(function IconSlot({ icon, ref, ...props }: IconSlotProps) {\n  if (!icon) {\n    return null;\n  }\n\n  if (typeof icon === 'string') {\n    return <Icon ref={ref} name={icon} {...props} />;\n  }\n\n  if (isFunction(icon)) {\n    const iconEl = icon(props);\n    return isValidElement(iconEl) ? cloneElement(iconEl, { ...props } as Partial<IconProps>) : null;\n  }\n\n  return isValidElement(icon)\n    ? cloneElement(icon, {\n        ...props,\n        ...icon.props, // user's props on <Icon>\n      } as Partial<IconProps>)\n    : null;\n});\n\nIconSlot.displayName = 'IconSlot';\n\nexport { IconSlot, type IconSlotProps, type IconSlotType };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA,MAAM,WAAW,KAAK,SAASA,WAAS,EAAE,MAAM,KAAK,GAAG,SAAwB;AAC9E,KAAI,CAAC,KACH,QAAO;AAGT,KAAI,OAAO,SAAS,SAClB,QAAO,oBAAC;EAAU;EAAK,MAAM;EAAM,GAAI;GAAS;AAGlD,KAAI,WAAW,KAAK,EAAE;EACpB,MAAM,SAAS,KAAK,MAAM;AAC1B,SAAO,eAAe,OAAO,GAAG,aAAa,QAAQ,EAAE,GAAG,OAAO,CAAuB,GAAG;;AAG7F,QAAO,eAAe,KAAK,GACvB,aAAa,MAAM;EACjB,GAAG;EACH,GAAG,KAAK;EACT,CAAuB,GACxB;EACJ;AAEF,SAAS,cAAc"}
+{"version":3,"file":"IconSlot.mjs","names":[],"sources":["../../src/components/IconSlot.tsx"],"sourcesContent":["import { isFunction } from 'lodash-es';\nimport type { ReactElement, Ref } from 'react';\nimport { cloneElement, isValidElement, memo } from 'react';\nimport type { Text as RNText } from 'react-native';\n\nimport type { IconName, IconProps } from './Icon';\nimport { Icon } from './Icon';\ntype IconPropsWithoutName = Omit<IconProps, 'name'>;\n\ntype IconSlotType =\n  | IconName\n  | ReactElement<IconProps>\n  | ((iconProps: IconPropsWithoutName) => ReactElement<IconProps>);\n\ninterface IconSlotProps extends IconPropsWithoutName {\n  ref?: Ref<RNText>;\n  /** The icon to render. Can be a UDS icon, an Icon component, ReactNode, or a function that returns a ReactNode. */\n  icon?: IconSlotType;\n  /** Props to spread onto the icon. */\n}\n\n/**\n * **🔌 A helper container to render icons flexibly**\n *\n * @description\n * Useful in components that use icons and have a startIcon and endIcon. It allows\n * consumers to pass in a standard UDS icon name, an Icon component, or a render function\n * for custom rendering.\n *\n * @category Utility\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { IconSlot } from '@yahoo/uds-mobile';\n *\n * // Using icon name (preferred - stable reference, no useMemo needed)\n * <IconSlot icon=\"Info\" size=\"md\" variant=\"fill\" />\n *\n * // Using Icon component\n * <IconSlot icon={<Icon name=\"Info\" variant=\"fill\" />} />\n *\n * // Using render function\n * <IconSlot icon={(props) => <Icon name=\"Info\" {...props} variant=\"fill\" />} />\n * ```\n *\n * @usage\n * - Pass icon name for simple usage\n * - Pass Icon component for custom props\n * - Pass function for dynamic rendering\n *\n * @see {@link Icon} for direct icon rendering\n */\nconst IconSlot = memo(function IconSlot({ icon, ref, ...props }: IconSlotProps) {\n  if (!icon) {\n    return null;\n  }\n\n  if (typeof icon === 'string') {\n    return <Icon ref={ref} name={icon} {...props} />;\n  }\n\n  if (isFunction(icon)) {\n    const iconEl = icon(props);\n    return isValidElement(iconEl) ? cloneElement(iconEl, { ...props } as Partial<IconProps>) : null;\n  }\n\n  return isValidElement(icon)\n    ? cloneElement(icon, {\n        ...props,\n        ...icon.props, // user's props on <Icon>\n      } as Partial<IconProps>)\n    : null;\n});\n\nIconSlot.displayName = 'IconSlot';\n\nexport { IconSlot, type IconSlotProps, type IconSlotType };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,MAAM,WAAW,KAAK,SAAS,SAAS,EAAE,MAAM,KAAK,GAAG,SAAwB;AAC9E,KAAI,CAAC,KACH,QAAO;AAGT,KAAI,OAAO,SAAS,SAClB,QAAO,oBAAC;EAAU;EAAK,MAAM;EAAM,GAAI;GAAS;AAGlD,KAAI,WAAW,KAAK,EAAE;EACpB,MAAM,SAAS,KAAK,MAAM;AAC1B,SAAO,eAAe,OAAO,GAAG,aAAa,QAAQ,EAAE,GAAG,OAAO,CAAuB,GAAG;;AAG7F,QAAO,eAAe,KAAK,GACvB,aAAa,MAAM;EACjB,GAAG;EACH,GAAG,KAAK;EACT,CAAuB,GACxB;EACJ;AAEF,SAAS,cAAc"}

package/dist/components/Image.cjs

@@ -1,5 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+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");
@@ -19,15 +20,29 @@ const CONTENT_FIT_TO_RESIZE_MODE = {
 * @description
 * Wrapper for the React Native Image component with UDS styling props.
 *
+* @category Display
+* @platform mobile
+*
 * @example
 * ```tsx
-* import { Image } from '~/components/ui/Image';
+* import { Image } from '@yahoo/uds-mobile';
 *
 * <Image src="https://example.com/image.png" width={200} height={150} />
 * <Image src={require('./local-image.png')} contentFit="cover" borderRadius="md" />
 * ```
+*
+* @usage
+* - Use for displaying remote or local images
+* - Use contentFit to control how the image fills its container
+* - All Box styling props are supported
+*
+* @accessibility
+* - Always provide `alt` prop for screen reader description
+* - Alt text should describe the image content meaningfully
+*
+* @see {@link Avatar} for user profile images
 */
-const Image = (0, react.memo)(function Image$1({ src, alt, width, height, contentFit = "cover", style, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, display, overflow, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, ref, ...props }) {
+const Image = (0, react.memo)(function Image({ src, alt, width, height, contentFit = "cover", style, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, display, overflow, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, ref, ...props }) {
 	generated_styles.styles.useVariants({
 		backgroundColor,
 		borderRadius,

package/dist/components/Image.d.cts

@@ -1,6 +1,6 @@
 
 import { UniversalImageProps } from "../types/dist/index.cjs";
-import * as react10 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { Image as Image$1, ImageProps as ImageProps$1 } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -8,6 +8,7 @@ import { StyleProps } from "../../generated/styles";
 //#region src/components/Image.d.ts
 type ContentFit = NonNullable<UniversalImageProps['contentFit']>;
 interface ImageProps extends Omit<ImageProps$1, 'source' | 'src' | 'width' | 'height' | 'borderRadius'> {
+  /** Ref to the underlying Image element */
   ref?: Ref<Image$1>;
   /** Image source URL or require() */
   src: UniversalImageProps['src'];
@@ -71,15 +72,29 @@ interface ImageProps extends Omit<ImageProps$1, 'source' | 'src' | 'width' | 'he
  * @description
  * Wrapper for the React Native Image component with UDS styling props.
  *
+ * @category Display
+ * @platform mobile
+ *
  * @example
  * ```tsx
- * import { Image } from '~/components/ui/Image';
+ * import { Image } from '@yahoo/uds-mobile';
  *
  * <Image src="https://example.com/image.png" width={200} height={150} />
  * <Image src={require('./local-image.png')} contentFit="cover" borderRadius="md" />
  * ```
+ *
+ * @usage
+ * - Use for displaying remote or local images
+ * - Use contentFit to control how the image fills its container
+ * - All Box styling props are supported
+ *
+ * @accessibility
+ * - Always provide `alt` prop for screen reader description
+ * - Alt text should describe the image content meaningfully
+ *
+ * @see {@link Avatar} for user profile images
  */
-declare const Image: react10.NamedExoticComponent<ImageProps>;
+declare const Image: react.NamedExoticComponent<ImageProps>;
 //#endregion
 export { Image, type ImageProps };
 //# sourceMappingURL=Image.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Image.d.cts","names":[],"sources":["../../src/components/Image.tsx"],"sourcesContent":[],"mappings":"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"}
+{"version":3,"file":"Image.d.cts","names":[],"sources":["../../src/components/Image.tsx"],"mappings":";;;;;;;;KASK,UAAA,GAAa,WAAA,CAAY,mBAAA;AAAA,UAUpB,UAAA,SAAmB,IAAA,CAC3B,YAAA;EAXG;EAeH,GAAA,GAAM,GAAA,CAAI,OAAA;;EAEV,GAAA,EAAK,mBAAA;EAjB0C;EAmB/C,GAAA;EATmB;EAWnB,KAAA;EAVA;EAYA,MAAA;EARM;EAUN,UAAA,GAAa,UAAA;EAEb,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,SAAA,GAAY,UAAA;EACZ,IAAA,GAAO,UAAA;EACP,aAAA,GAAgB,UAAA;EAChB,QAAA,GAAW,UAAA;EACX,UAAA,GAAa,UAAA;EACb,QAAA,GAAW,UAAA;EACX,cAAA,GAAiB,UAAA;EAEjB,OAAA,GAAU,UAAA;EACV,QAAA,GAAW,UAAA;EAEX,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,MAAA,GAAS,UAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA+BL,KAAA,EAAK,KAAA,CAAA,oBAAA,CAAA,UAAA"}

package/dist/components/Image.d.mts

@@ -1,6 +1,6 @@
 
 import { UniversalImageProps } from "../types/dist/index.mjs";
-import * as react1 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { Image as Image$1, ImageProps as ImageProps$1 } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -8,6 +8,7 @@ import { StyleProps } from "../../generated/styles";
 //#region src/components/Image.d.ts
 type ContentFit = NonNullable<UniversalImageProps['contentFit']>;
 interface ImageProps extends Omit<ImageProps$1, 'source' | 'src' | 'width' | 'height' | 'borderRadius'> {
+  /** Ref to the underlying Image element */
   ref?: Ref<Image$1>;
   /** Image source URL or require() */
   src: UniversalImageProps['src'];
@@ -71,15 +72,29 @@ interface ImageProps extends Omit<ImageProps$1, 'source' | 'src' | 'width' | 'he
  * @description
  * Wrapper for the React Native Image component with UDS styling props.
  *
+ * @category Display
+ * @platform mobile
+ *
  * @example
  * ```tsx
- * import { Image } from '~/components/ui/Image';
+ * import { Image } from '@yahoo/uds-mobile';
  *
  * <Image src="https://example.com/image.png" width={200} height={150} />
  * <Image src={require('./local-image.png')} contentFit="cover" borderRadius="md" />
  * ```
+ *
+ * @usage
+ * - Use for displaying remote or local images
+ * - Use contentFit to control how the image fills its container
+ * - All Box styling props are supported
+ *
+ * @accessibility
+ * - Always provide `alt` prop for screen reader description
+ * - Alt text should describe the image content meaningfully
+ *
+ * @see {@link Avatar} for user profile images
  */
-declare const Image: react1.NamedExoticComponent<ImageProps>;
+declare const Image: react.NamedExoticComponent<ImageProps>;
 //#endregion
 export { Image, type ImageProps };
 //# sourceMappingURL=Image.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Image.d.mts","names":[],"sources":["../../src/components/Image.tsx"],"sourcesContent":[],"mappings":"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"}
+{"version":3,"file":"Image.d.mts","names":[],"sources":["../../src/components/Image.tsx"],"mappings":";;;;;;;;KASK,UAAA,GAAa,WAAA,CAAY,mBAAA;AAAA,UAUpB,UAAA,SAAmB,IAAA,CAC3B,YAAA;EAXG;EAeH,GAAA,GAAM,GAAA,CAAI,OAAA;;EAEV,GAAA,EAAK,mBAAA;EAjB0C;EAmB/C,GAAA;EATmB;EAWnB,KAAA;EAVA;EAYA,MAAA;EARM;EAUN,UAAA,GAAa,UAAA;EAEb,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,SAAA,GAAY,UAAA;EACZ,IAAA,GAAO,UAAA;EACP,aAAA,GAAgB,UAAA;EAChB,QAAA,GAAW,UAAA;EACX,UAAA,GAAa,UAAA;EACb,QAAA,GAAW,UAAA;EACX,cAAA,GAAiB,UAAA;EAEjB,OAAA,GAAU,UAAA;EACV,QAAA,GAAW,UAAA;EAEX,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,MAAA,GAAS,UAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA+BL,KAAA,EAAK,KAAA,CAAA,oBAAA,CAAA,UAAA"}

package/dist/components/Image.mjs

@@ -18,15 +18,29 @@ const CONTENT_FIT_TO_RESIZE_MODE = {
 * @description
 * Wrapper for the React Native Image component with UDS styling props.
 *
+* @category Display
+* @platform mobile
+*
 * @example
 * ```tsx
-* import { Image } from '~/components/ui/Image';
+* import { Image } from '@yahoo/uds-mobile';
 *
 * <Image src="https://example.com/image.png" width={200} height={150} />
 * <Image src={require('./local-image.png')} contentFit="cover" borderRadius="md" />
 * ```
+*
+* @usage
+* - Use for displaying remote or local images
+* - Use contentFit to control how the image fills its container
+* - All Box styling props are supported
+*
+* @accessibility
+* - Always provide `alt` prop for screen reader description
+* - Alt text should describe the image content meaningfully
+*
+* @see {@link Avatar} for user profile images
 */
-const Image = memo(function Image$2({ src, alt, width, height, contentFit = "cover", style, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, display, overflow, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, ref, ...props }) {
+const Image = memo(function Image({ src, alt, width, height, contentFit = "cover", style, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, display, overflow, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, ref, ...props }) {
 	styles.useVariants({
 		backgroundColor,
 		borderRadius,

package/dist/components/Image.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Image.mjs","names":["CONTENT_FIT_TO_RESIZE_MODE: Record<ContentFit, ImageStyle['resizeMode']>","Image","RNImage"],"sources":["../../src/components/Image.tsx"],"sourcesContent":["import type { UniversalImageProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { ImageProps as RNImageProps, ImageStyle } from 'react-native';\nimport { Image as RNImage } from 'react-native';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\n\ntype ContentFit = NonNullable<UniversalImageProps['contentFit']>;\n\nconst CONTENT_FIT_TO_RESIZE_MODE: Record<ContentFit, ImageStyle['resizeMode']> = {\n  cover: 'cover',\n  contain: 'contain',\n  fill: 'stretch',\n  none: 'center',\n  'scale-down': 'contain',\n};\n\ninterface ImageProps extends Omit<\n  RNImageProps,\n  'source' | 'src' | 'width' | 'height' | 'borderRadius'\n> {\n  ref?: Ref<RNImage>;\n  /** Image source URL or require() */\n  src: UniversalImageProps['src'];\n  /** Alt text for accessibility */\n  alt?: string;\n  /** Image width */\n  width?: number;\n  /** Image height */\n  height?: number;\n  /** How to fit the image within its container */\n  contentFit?: ContentFit;\n  // Background\n  backgroundColor?: StyleProps['backgroundColor'];\n  // Border\n  borderRadius?: StyleProps['borderRadius'];\n  borderTopStartRadius?: StyleProps['borderTopStartRadius'];\n  borderTopEndRadius?: StyleProps['borderTopEndRadius'];\n  borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];\n  borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];\n  borderColor?: StyleProps['borderColor'];\n  borderStartColor?: StyleProps['borderStartColor'];\n  borderEndColor?: StyleProps['borderEndColor'];\n  borderTopColor?: StyleProps['borderTopColor'];\n  borderBottomColor?: StyleProps['borderBottomColor'];\n  borderWidth?: StyleProps['borderWidth'];\n  borderVerticalWidth?: StyleProps['borderVerticalWidth'];\n  borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];\n  borderStartWidth?: StyleProps['borderStartWidth'];\n  borderEndWidth?: StyleProps['borderEndWidth'];\n  borderTopWidth?: StyleProps['borderTopWidth'];\n  borderBottomWidth?: StyleProps['borderBottomWidth'];\n  // Flex\n  alignContent?: StyleProps['alignContent'];\n  alignItems?: StyleProps['alignItems'];\n  alignSelf?: StyleProps['alignSelf'];\n  flex?: StyleProps['flex'];\n  flexDirection?: StyleProps['flexDirection'];\n  flexGrow?: StyleProps['flexGrow'];\n  flexShrink?: StyleProps['flexShrink'];\n  flexWrap?: StyleProps['flexWrap'];\n  justifyContent?: StyleProps['justifyContent'];\n  // Layout\n  display?: StyleProps['display'];\n  overflow?: StyleProps['overflow'];\n  // Spacing\n  spacing?: StyleProps['spacing'];\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  spacingVertical?: StyleProps['spacingVertical'];\n  spacingBottom?: StyleProps['spacingBottom'];\n  spacingEnd?: StyleProps['spacingEnd'];\n  spacingStart?: StyleProps['spacingStart'];\n  spacingTop?: StyleProps['spacingTop'];\n  offset?: StyleProps['offset'];\n  offsetVertical?: StyleProps['offsetVertical'];\n  offsetHorizontal?: StyleProps['offsetHorizontal'];\n  offsetBottom?: StyleProps['offsetBottom'];\n  offsetEnd?: StyleProps['offsetEnd'];\n  offsetStart?: StyleProps['offsetStart'];\n  offsetTop?: StyleProps['offsetTop'];\n  columnGap?: StyleProps['columnGap'];\n  rowGap?: StyleProps['rowGap'];\n}\n\n/**\n * **A component for displaying images**\n *\n * @description\n * Wrapper for the React Native Image component with UDS styling props.\n *\n * @example\n * ```tsx\n * import { Image } from '~/components/ui/Image';\n *\n * <Image src=\"https://example.com/image.png\" width={200} height={150} />\n * <Image src={require('./local-image.png')} contentFit=\"cover\" borderRadius=\"md\" />\n * ```\n */\nconst Image = memo(function Image({\n  src,\n  alt,\n  width,\n  height,\n  contentFit = 'cover',\n  style,\n  // background\n  backgroundColor,\n  // border\n  borderRadius,\n  borderTopStartRadius,\n  borderTopEndRadius,\n  borderBottomStartRadius,\n  borderBottomEndRadius,\n  borderColor,\n  borderStartColor,\n  borderEndColor,\n  borderTopColor,\n  borderBottomColor,\n  borderWidth,\n  borderVerticalWidth,\n  borderHorizontalWidth,\n  borderStartWidth,\n  borderEndWidth,\n  borderTopWidth,\n  borderBottomWidth,\n  // flex\n  alignContent,\n  alignItems,\n  alignSelf,\n  flex,\n  flexDirection,\n  flexGrow,\n  flexShrink,\n  flexWrap,\n  justifyContent,\n  // layout\n  display,\n  overflow,\n  // spacing\n  spacing,\n  spacingHorizontal,\n  spacingVertical,\n  spacingBottom,\n  spacingEnd,\n  spacingStart,\n  spacingTop,\n  offset,\n  offsetVertical,\n  offsetHorizontal,\n  offsetBottom,\n  offsetEnd,\n  offsetStart,\n  offsetTop,\n  columnGap,\n  rowGap,\n  ref,\n  ...props\n}: ImageProps) {\n  // Apply styles using useVariants\n  styles.useVariants({\n    backgroundColor,\n    // border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    borderColor,\n    borderStartColor,\n    borderEndColor,\n    borderTopColor,\n    borderBottomColor,\n    borderWidth,\n    borderVerticalWidth,\n    borderHorizontalWidth,\n    borderStartWidth,\n    borderEndWidth,\n    borderTopWidth,\n    borderBottomWidth,\n    // flex\n    alignContent,\n    alignItems,\n    alignSelf,\n    flex,\n    flexDirection,\n    flexGrow,\n    flexShrink,\n    flexWrap,\n    justifyContent,\n    // layout\n    display,\n    overflow,\n    // spacing\n    spacing,\n    spacingHorizontal,\n    spacingVertical,\n    spacingBottom,\n    spacingEnd,\n    spacingStart,\n    spacingTop,\n    offset,\n    offsetVertical,\n    offsetHorizontal,\n    offsetBottom,\n    offsetEnd,\n    offsetStart,\n    offsetTop,\n    columnGap,\n    rowGap,\n  });\n\n  const source = useMemo(() => (typeof src === 'string' ? { uri: src } : src), [src]);\n\n  // styles.foundation must be in deps - it returns a new reference when variants change\n  const imageStyles = useMemo(\n    () => [styles.foundation as ImageStyle, { width, height }, style],\n    [styles.foundation, width, height, style],\n  );\n\n  return (\n    <RNImage\n      ref={ref}\n      source={source}\n      accessibilityLabel={alt}\n      resizeMode={CONTENT_FIT_TO_RESIZE_MODE[contentFit]}\n      style={imageStyles}\n      {...props}\n    />\n  );\n});\n\nImage.displayName = 'Image';\n\nexport { Image, type ImageProps };\n"],"mappings":";;;;;;;AAWA,MAAMA,6BAA2E;CAC/E,OAAO;CACP,SAAS;CACT,MAAM;CACN,MAAM;CACN,cAAc;CACf;;;;;;;;;;;;;;;AAmFD,MAAM,QAAQ,KAAK,SAASC,QAAM,EAChC,KACA,KACA,OACA,QACA,aAAa,SACb,OAEA,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,cACA,YACA,WACA,MACA,eACA,UACA,YACA,UACA,gBAEA,SACA,UAEA,SACA,mBACA,iBACA,eACA,YACA,cACA,YACA,QACA,gBACA,kBACA,cACA,WACA,aACA,WACA,WACA,QACA,KACA,GAAG,SACU;AAEb,QAAO,YAAY;EACjB;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,SAAS,cAAe,OAAO,QAAQ,WAAW,EAAE,KAAK,KAAK,GAAG,KAAM,CAAC,IAAI,CAAC;CAGnF,MAAM,cAAc,cACZ;EAAC,OAAO;EAA0B;GAAE;GAAO;GAAQ;EAAE;EAAM,EACjE;EAAC,OAAO;EAAY;EAAO;EAAQ;EAAM,CAC1C;AAED,QACE,oBAACC;EACM;EACG;EACR,oBAAoB;EACpB,YAAY,2BAA2B;EACvC,OAAO;EACP,GAAI;GACJ;EAEJ;AAEF,MAAM,cAAc"}
+{"version":3,"file":"Image.mjs","names":["RNImage"],"sources":["../../src/components/Image.tsx"],"sourcesContent":["import type { UniversalImageProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { ImageProps as RNImageProps, ImageStyle } from 'react-native';\nimport { Image as RNImage } from 'react-native';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\n\ntype ContentFit = NonNullable<UniversalImageProps['contentFit']>;\n\nconst CONTENT_FIT_TO_RESIZE_MODE: Record<ContentFit, ImageStyle['resizeMode']> = {\n  cover: 'cover',\n  contain: 'contain',\n  fill: 'stretch',\n  none: 'center',\n  'scale-down': 'contain',\n};\n\ninterface ImageProps extends Omit<\n  RNImageProps,\n  'source' | 'src' | 'width' | 'height' | 'borderRadius'\n> {\n  /** Ref to the underlying Image element */\n  ref?: Ref<RNImage>;\n  /** Image source URL or require() */\n  src: UniversalImageProps['src'];\n  /** Alt text for accessibility */\n  alt?: string;\n  /** Image width */\n  width?: number;\n  /** Image height */\n  height?: number;\n  /** How to fit the image within its container */\n  contentFit?: ContentFit;\n  // Background\n  backgroundColor?: StyleProps['backgroundColor'];\n  // Border\n  borderRadius?: StyleProps['borderRadius'];\n  borderTopStartRadius?: StyleProps['borderTopStartRadius'];\n  borderTopEndRadius?: StyleProps['borderTopEndRadius'];\n  borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];\n  borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];\n  borderColor?: StyleProps['borderColor'];\n  borderStartColor?: StyleProps['borderStartColor'];\n  borderEndColor?: StyleProps['borderEndColor'];\n  borderTopColor?: StyleProps['borderTopColor'];\n  borderBottomColor?: StyleProps['borderBottomColor'];\n  borderWidth?: StyleProps['borderWidth'];\n  borderVerticalWidth?: StyleProps['borderVerticalWidth'];\n  borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];\n  borderStartWidth?: StyleProps['borderStartWidth'];\n  borderEndWidth?: StyleProps['borderEndWidth'];\n  borderTopWidth?: StyleProps['borderTopWidth'];\n  borderBottomWidth?: StyleProps['borderBottomWidth'];\n  // Flex\n  alignContent?: StyleProps['alignContent'];\n  alignItems?: StyleProps['alignItems'];\n  alignSelf?: StyleProps['alignSelf'];\n  flex?: StyleProps['flex'];\n  flexDirection?: StyleProps['flexDirection'];\n  flexGrow?: StyleProps['flexGrow'];\n  flexShrink?: StyleProps['flexShrink'];\n  flexWrap?: StyleProps['flexWrap'];\n  justifyContent?: StyleProps['justifyContent'];\n  // Layout\n  display?: StyleProps['display'];\n  overflow?: StyleProps['overflow'];\n  // Spacing\n  spacing?: StyleProps['spacing'];\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  spacingVertical?: StyleProps['spacingVertical'];\n  spacingBottom?: StyleProps['spacingBottom'];\n  spacingEnd?: StyleProps['spacingEnd'];\n  spacingStart?: StyleProps['spacingStart'];\n  spacingTop?: StyleProps['spacingTop'];\n  offset?: StyleProps['offset'];\n  offsetVertical?: StyleProps['offsetVertical'];\n  offsetHorizontal?: StyleProps['offsetHorizontal'];\n  offsetBottom?: StyleProps['offsetBottom'];\n  offsetEnd?: StyleProps['offsetEnd'];\n  offsetStart?: StyleProps['offsetStart'];\n  offsetTop?: StyleProps['offsetTop'];\n  columnGap?: StyleProps['columnGap'];\n  rowGap?: StyleProps['rowGap'];\n}\n\n/**\n * **A component for displaying images**\n *\n * @description\n * Wrapper for the React Native Image component with UDS styling props.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Image } from '@yahoo/uds-mobile';\n *\n * <Image src=\"https://example.com/image.png\" width={200} height={150} />\n * <Image src={require('./local-image.png')} contentFit=\"cover\" borderRadius=\"md\" />\n * ```\n *\n * @usage\n * - Use for displaying remote or local images\n * - Use contentFit to control how the image fills its container\n * - All Box styling props are supported\n *\n * @accessibility\n * - Always provide `alt` prop for screen reader description\n * - Alt text should describe the image content meaningfully\n *\n * @see {@link Avatar} for user profile images\n */\nconst Image = memo(function Image({\n  src,\n  alt,\n  width,\n  height,\n  contentFit = 'cover',\n  style,\n  // background\n  backgroundColor,\n  // border\n  borderRadius,\n  borderTopStartRadius,\n  borderTopEndRadius,\n  borderBottomStartRadius,\n  borderBottomEndRadius,\n  borderColor,\n  borderStartColor,\n  borderEndColor,\n  borderTopColor,\n  borderBottomColor,\n  borderWidth,\n  borderVerticalWidth,\n  borderHorizontalWidth,\n  borderStartWidth,\n  borderEndWidth,\n  borderTopWidth,\n  borderBottomWidth,\n  // flex\n  alignContent,\n  alignItems,\n  alignSelf,\n  flex,\n  flexDirection,\n  flexGrow,\n  flexShrink,\n  flexWrap,\n  justifyContent,\n  // layout\n  display,\n  overflow,\n  // spacing\n  spacing,\n  spacingHorizontal,\n  spacingVertical,\n  spacingBottom,\n  spacingEnd,\n  spacingStart,\n  spacingTop,\n  offset,\n  offsetVertical,\n  offsetHorizontal,\n  offsetBottom,\n  offsetEnd,\n  offsetStart,\n  offsetTop,\n  columnGap,\n  rowGap,\n  ref,\n  ...props\n}: ImageProps) {\n  // Apply styles using useVariants\n  styles.useVariants({\n    backgroundColor,\n    // border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    borderColor,\n    borderStartColor,\n    borderEndColor,\n    borderTopColor,\n    borderBottomColor,\n    borderWidth,\n    borderVerticalWidth,\n    borderHorizontalWidth,\n    borderStartWidth,\n    borderEndWidth,\n    borderTopWidth,\n    borderBottomWidth,\n    // flex\n    alignContent,\n    alignItems,\n    alignSelf,\n    flex,\n    flexDirection,\n    flexGrow,\n    flexShrink,\n    flexWrap,\n    justifyContent,\n    // layout\n    display,\n    overflow,\n    // spacing\n    spacing,\n    spacingHorizontal,\n    spacingVertical,\n    spacingBottom,\n    spacingEnd,\n    spacingStart,\n    spacingTop,\n    offset,\n    offsetVertical,\n    offsetHorizontal,\n    offsetBottom,\n    offsetEnd,\n    offsetStart,\n    offsetTop,\n    columnGap,\n    rowGap,\n  });\n\n  const source = useMemo(() => (typeof src === 'string' ? { uri: src } : src), [src]);\n\n  // styles.foundation must be in deps - it returns a new reference when variants change\n  const imageStyles = useMemo(\n    () => [styles.foundation as ImageStyle, { width, height }, style],\n    [styles.foundation, width, height, style],\n  );\n\n  return (\n    <RNImage\n      ref={ref}\n      source={source}\n      accessibilityLabel={alt}\n      resizeMode={CONTENT_FIT_TO_RESIZE_MODE[contentFit]}\n      style={imageStyles}\n      {...props}\n    />\n  );\n});\n\nImage.displayName = 'Image';\n\nexport { Image, type ImageProps };\n"],"mappings":";;;;;;;AAWA,MAAM,6BAA2E;CAC/E,OAAO;CACP,SAAS;CACT,MAAM;CACN,MAAM;CACN,cAAc;CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkGD,MAAM,QAAQ,KAAK,SAAS,MAAM,EAChC,KACA,KACA,OACA,QACA,aAAa,SACb,OAEA,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,cACA,YACA,WACA,MACA,eACA,UACA,YACA,UACA,gBAEA,SACA,UAEA,SACA,mBACA,iBACA,eACA,YACA,cACA,YACA,QACA,gBACA,kBACA,cACA,WACA,aACA,WACA,WACA,QACA,KACA,GAAG,SACU;AAEb,QAAO,YAAY;EACjB;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,SAAS,cAAe,OAAO,QAAQ,WAAW,EAAE,KAAK,KAAK,GAAG,KAAM,CAAC,IAAI,CAAC;CAGnF,MAAM,cAAc,cACZ;EAAC,OAAO;EAA0B;GAAE;GAAO;GAAQ;EAAE;EAAM,EACjE;EAAC,OAAO;EAAY;EAAO;EAAQ;EAAM,CAC1C;AAED,QACE,oBAACA;EACM;EACG;EACR,oBAAoB;EACpB,YAAY,2BAA2B;EACvC,OAAO;EACP,GAAI;GACJ;EAEJ;AAEF,MAAM,cAAc"}

package/dist/components/Input.cjs

@@ -1,5 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
 const require_components_IconSlot = require('./IconSlot.cjs');
 const require_components_Text = require('./Text.cjs');
 const require_components_HStack = require('./HStack.cjs');
@@ -19,22 +20,34 @@ let lodash_es = require("lodash-es");
 * as a way to display a selection and trigger a dropdown menu. Inputs are interactive
 * elements that users can click, tap, or otherwise engage with to collect data.
 *
+* @category Form
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { Input } from '@yahoo/uds-mobile';
 *
 * <Input label="Name" placeholder="Enter your name" required />
+* <Input label="Email" startIcon="Mail" helpText="We'll never share your email" />
+* <Input label="Password" secureTextEntry hasError helpText="Password is required" />
 * ```
 *
 * @usage
 * - Forms: For collecting data like names, emails, passwords, etc.
-* - Search Bars: Allowing users to enter search queries.
-* - Filters/Settings: When users need to specify preferences.
-* - Feedback/Comments: Letting users leave reviews or comments.
+* - Search Bars: Allowing users to enter search queries
+* - Filters/Settings: When users need to specify preferences
+* - Feedback/Comments: Letting users leave reviews or comments
+*
+* @accessibility
+* - Label is automatically associated with the input
+* - Help text is announced as accessibility hint
+* - Error state is communicated to screen readers
+* - Disabled state prevents interaction
 *
-* @see The {@link https://uds.build/docs/components/input Input Docs} for more info
+* @see {@link Checkbox} for boolean selections
+* @see {@link Radio} for single-select options
 */
-const Input = (0, react.memo)(function Input$1({ label, size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, disabled, readOnly, required, width = "100%", defaultValue, value: controlledValue, onChangeText, onFocus, onBlur, placeholder, placeholderTextColor, ref, ...textInputProps }) {
+const Input = (0, react.memo)(function Input({ label, size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, disabled, readOnly, required, width = "100%", defaultValue, value: controlledValue, onChangeText, onFocus, onBlur, placeholder, placeholderTextColor, ref, ...textInputProps }) {
 	const uid = `uds-input-${(0, react.useId)()}`;
 	const [internalValue, setInternalValue] = (0, react.useState)(defaultValue ?? "");
 	const [isFocused, setIsFocused] = (0, react.useState)(false);

package/dist/components/Input.d.cts

@@ -2,12 +2,13 @@
 import { UniversalInputProps } from "../types/dist/index.cjs";
 import { IconSlotType } from "./IconSlot.cjs";
 import { SizeProps } from "../types.cjs";
-import * as react11 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { TextInput, TextInputProps } from "react-native";
 
 //#region src/components/Input.d.ts
 interface InputProps extends Omit<UniversalInputProps<IconSlotType>, 'width'>, Omit<TextInputProps, 'style' | 'editable'>, Pick<SizeProps, 'width'> {
+  /** Ref to the underlying TextInput element */
   ref?: Ref<TextInput>;
 }
 /**
@@ -18,22 +19,34 @@ interface InputProps extends Omit<UniversalInputProps<IconSlotType>, 'width'>, O
  * as a way to display a selection and trigger a dropdown menu. Inputs are interactive
  * elements that users can click, tap, or otherwise engage with to collect data.
  *
+ * @category Form
+ * @platform mobile
+ *
  * @example
  * ```tsx
  * import { Input } from '@yahoo/uds-mobile';
  *
  * <Input label="Name" placeholder="Enter your name" required />
+ * <Input label="Email" startIcon="Mail" helpText="We'll never share your email" />
+ * <Input label="Password" secureTextEntry hasError helpText="Password is required" />
  * ```
  *
  * @usage
  * - Forms: For collecting data like names, emails, passwords, etc.
- * - Search Bars: Allowing users to enter search queries.
- * - Filters/Settings: When users need to specify preferences.
- * - Feedback/Comments: Letting users leave reviews or comments.
+ * - Search Bars: Allowing users to enter search queries
+ * - Filters/Settings: When users need to specify preferences
+ * - Feedback/Comments: Letting users leave reviews or comments
+ *
+ * @accessibility
+ * - Label is automatically associated with the input
+ * - Help text is announced as accessibility hint
+ * - Error state is communicated to screen readers
+ * - Disabled state prevents interaction
  *
- * @see The {@link https://uds.build/docs/components/input Input Docs} for more info
+ * @see {@link Checkbox} for boolean selections
+ * @see {@link Radio} for single-select options
  */
-declare const Input: react11.NamedExoticComponent<InputProps>;
+declare const Input: react.NamedExoticComponent<InputProps>;
 //#endregion
 export { Input, type InputProps };
 //# sourceMappingURL=Input.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Input.d.cts","names":[],"sources":["../../src/components/Input.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;UAmBU,UAAA,SAEN,KAAK,oBAAoB,yBACzB,KAAK,uCACL,KAAK;QACD,IAAI;AAdmC;;;;;;;;;;;AAavC;;;;;;;;;;;;;cA+BF,OAAK,OAAA,CAAA,qBAAA"}
+{"version":3,"file":"Input.d.cts","names":[],"sources":["../../src/components/Input.tsx"],"mappings":";;;;;;;;;UAmBU,UAAA,SAEN,IAAA,CAAK,mBAAA,CAAoB,YAAA,aACzB,IAAA,CAAK,cAAA,yBACL,IAAA,CAAK,SAAA;;EAEP,GAAA,GAAM,GAAA,CAAI,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAAS;;;;;;;;;;;cA0Cf,KAAA,EAAK,KAAA,CAAA,oBAAA,CAAA,UAAA"}

package/dist/components/Input.d.mts

@@ -2,12 +2,13 @@
 import { UniversalInputProps } from "../types/dist/index.mjs";
 import { IconSlotType } from "./IconSlot.mjs";
 import { SizeProps } from "../types.mjs";
-import * as react2 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { TextInput, TextInputProps } from "react-native";
 
 //#region src/components/Input.d.ts
 interface InputProps extends Omit<UniversalInputProps<IconSlotType>, 'width'>, Omit<TextInputProps, 'style' | 'editable'>, Pick<SizeProps, 'width'> {
+  /** Ref to the underlying TextInput element */
   ref?: Ref<TextInput>;
 }
 /**
@@ -18,22 +19,34 @@ interface InputProps extends Omit<UniversalInputProps<IconSlotType>, 'width'>, O
  * as a way to display a selection and trigger a dropdown menu. Inputs are interactive
  * elements that users can click, tap, or otherwise engage with to collect data.
  *
+ * @category Form
+ * @platform mobile
+ *
  * @example
  * ```tsx
  * import { Input } from '@yahoo/uds-mobile';
  *
  * <Input label="Name" placeholder="Enter your name" required />
+ * <Input label="Email" startIcon="Mail" helpText="We'll never share your email" />
+ * <Input label="Password" secureTextEntry hasError helpText="Password is required" />
  * ```
  *
  * @usage
  * - Forms: For collecting data like names, emails, passwords, etc.
- * - Search Bars: Allowing users to enter search queries.
- * - Filters/Settings: When users need to specify preferences.
- * - Feedback/Comments: Letting users leave reviews or comments.
+ * - Search Bars: Allowing users to enter search queries
+ * - Filters/Settings: When users need to specify preferences
+ * - Feedback/Comments: Letting users leave reviews or comments
+ *
+ * @accessibility
+ * - Label is automatically associated with the input
+ * - Help text is announced as accessibility hint
+ * - Error state is communicated to screen readers
+ * - Disabled state prevents interaction
  *
- * @see The {@link https://uds.build/docs/components/input Input Docs} for more info
+ * @see {@link Checkbox} for boolean selections
+ * @see {@link Radio} for single-select options
  */
-declare const Input: react2.NamedExoticComponent<InputProps>;
+declare const Input: react.NamedExoticComponent<InputProps>;
 //#endregion
 export { Input, type InputProps };
 //# sourceMappingURL=Input.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Input.d.mts","names":[],"sources":["../../src/components/Input.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;UAmBU,UAAA,SAEN,KAAK,oBAAoB,yBACzB,KAAK,uCACL,KAAK;QACD,IAAI;AAdmC;;;;;;;;;;;AAavC;;;;;;;;;;;;;cA+BF,OAAK,MAAA,CAAA,qBAAA"}
+{"version":3,"file":"Input.d.mts","names":[],"sources":["../../src/components/Input.tsx"],"mappings":";;;;;;;;;UAmBU,UAAA,SAEN,IAAA,CAAK,mBAAA,CAAoB,YAAA,aACzB,IAAA,CAAK,cAAA,yBACL,IAAA,CAAK,SAAA;;EAEP,GAAA,GAAM,GAAA,CAAI,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAAS;;;;;;;;;;;cA0Cf,KAAA,EAAK,KAAA,CAAA,oBAAA,CAAA,UAAA"}