@yahoo/uds-mobile 2.8.0 → 2.10.0

package/dist/components/Box.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.js","names":["StyleSheet"],"sources":["../../src/components/Box.tsx"],"sourcesContent":["import type { ElevationLevel } from '@yahoo/uds-types';\nimport type { ComponentType, Ref, RefObject } from 'react';\nimport { memo, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Platform, View } from 'react-native';\n// eslint-disable-next-line uds/no-use-unistyles -- blur intensity is not a style property, requires direct theme access\nimport { StyleSheet, useUnistyles } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\nimport type { SizeProps } from '../types';\n\n// Optional expo-blur dependency - loaded via dynamic import for Metro compatibility\n// Metro can statically analyze import() and will include expo-blur in the bundle if installed\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nlet BlurView: ComponentType<any> | null = null;\nlet blurLoadState: 'pending' | 'loaded' | 'failed' = 'pending';\nconst blurLoadListeners: (() => void)[] = [];\n\n// Start loading expo-blur immediately (Metro will bundle it if installed)\nimport('expo-blur')\n  .then((mod) => {\n    BlurView = mod.BlurView;\n    blurLoadState = 'loaded';\n    blurLoadListeners.forEach((cb) => cb());\n  })\n  .catch(() => {\n    blurLoadState = 'failed';\n    blurLoadListeners.forEach((cb) => cb());\n  });\n\n/** Hook to get BlurView component, re-renders when loaded */\nfunction useBlurView() {\n  const [, forceUpdate] = useState(0);\n\n  useEffect(() => {\n    if (blurLoadState === 'pending') {\n      const listener = () => forceUpdate((n) => n + 1);\n      blurLoadListeners.push(listener);\n      return () => {\n        const idx = blurLoadListeners.indexOf(listener);\n        if (idx >= 0) {\n          blurLoadListeners.splice(idx, 1);\n        }\n      };\n    }\n  }, []);\n\n  return { BlurView, isLoaded: blurLoadState !== 'pending', isFailed: blurLoadState === 'failed' };\n}\n\ninterface BoxProps extends ViewProps, SizeProps {\n  ref?: Ref<View>;\n  elevation?: ElevationLevel;\n  backgroundColor?: StyleProps['backgroundColor'];\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  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  //   flexBasis?: StyleProps['flexBasis'];\n  display?: StyleProps['display'];\n  overflow?: StyleProps['overflow'];\n  //   overflowX?: StyleProps['overflowX'];\n  //   overflowY?: StyleProps['overflowY'];\n  //   position?: StyleProps['position'];\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  dropShadow?: StyleProps['dropShadow'];\n  insetShadow?: StyleProps['insetShadow'];\n  dangerouslySetBackgroundColor?: string;\n  dangerouslySetBorderColor?: string;\n  /**\n   * Manual blur intensity (0-100). When set, renders as a BlurView.\n   * Requires `blurTarget` pointing to a BlurTarget ref wrapping the content to blur.\n   */\n  blur?: number;\n  /**\n   * Reference to a BlurTarget component wrapping the content to blur.\n   * Required when using `blur` prop or elevation with blur configured.\n   */\n  blurTarget?: RefObject<View | null>;\n}\n\n/**\n * **📦 A layout component that can be used to compose other components**\n *\n * @description\n * The most simple component we ship - a View. But with all the power of the UDS design system.\n * By default, `Box` is a flexbox container. When working with vertical or horizontal layouts,\n * consider using VStack or HStack respectively.\n *\n * @category Layout\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Box } from '@yahoo/uds-mobile';\n *\n * <Box backgroundColor=\"primary\" spacing=\"6\">\n *   Any kind of content can go here!\n * </Box>\n * ```\n *\n * @usage\n * - Use as a container to apply padding, shapes, or other styling\n * - Use for creating card components\n * - Use HStack/VStack for directional layouts\n *\n * @see {@link HStack} for horizontal layouts\n * @see {@link VStack} for vertical layouts\n */\nconst Box = memo(function Box({\n  // elevation\n  elevation,\n  // background\n  backgroundColor,\n  dangerouslySetBackgroundColor,\n  // border\n  borderRadius,\n  borderTopStartRadius,\n  borderTopEndRadius,\n  borderBottomStartRadius,\n  borderBottomEndRadius,\n  borderColor,\n  dangerouslySetBorderColor,\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  // flexBasis,\n  // layout\n  display = 'flex',\n  overflow,\n  //     overflowX,\n  //     overflowY,\n  // position,\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  // size\n  width,\n  height,\n  minWidth,\n  maxWidth,\n  minHeight,\n  maxHeight,\n  // shadow\n  dropShadow,\n  insetShadow,\n  // blur\n  blur,\n  blurTarget,\n  // // nested border radius\n  // nestedBorderRadius,\n  // nestedBorderRadiusSize = nestedBorderRadius ? borderRadius : undefined,\n  // nestedBorderRadiusSpacing = nestedBorderRadius ? spacing : undefined,\n  // nestedBorderRadiusWidth = nestedBorderRadius ? borderWidth : undefined,\n  // style - extracted to merge with variants\n  style,\n  ref,\n  // rest\n  ...props\n}: BoxProps) {\n  const { theme, rt } = useUnistyles();\n  const {\n    BlurView: BlurViewComponent,\n    isLoaded: blurIsLoaded,\n    isFailed: blurFailed,\n  } = useBlurView();\n  const elevationAlias = elevation !== undefined ? (`elevation-${elevation}` as const) : undefined;\n\n  // Track if blur prop was explicitly set (even to 0) vs derived from elevation\n  const blurExplicitlySet = blur !== undefined;\n\n  // Get blur intensity from manual blur prop or elevation config\n  const blurIntensity = useMemo(() => {\n    // Manual blur prop takes precedence (including 0)\n    if (blur !== undefined) {\n      return blur;\n    }\n    // Fall back to elevation-based blur\n    if (elevation === undefined || !theme.blur) {\n      return 0;\n    }\n    const blurKey = `elevation-${elevation}` as keyof typeof theme.blur;\n    return theme.blur[blurKey] ?? 0;\n  }, [blur, elevation, theme]);\n\n  // Warn in development about blur issues (once per mount)\n  const hasWarnedRef = useRef<'none' | 'no-expo-blur' | 'no-blur-target'>('none');\n  useEffect(() => {\n    if (!__DEV__ || blurIntensity === 0 || !blurIsLoaded) {\n      return;\n    }\n\n    // Warn if expo-blur is not installed\n    if (blurFailed && hasWarnedRef.current !== 'no-expo-blur') {\n      hasWarnedRef.current = 'no-expo-blur';\n      console.warn('[UDS Mobile] Box: Blur effect requested but expo-blur is not installed. ');\n      return;\n    }\n\n    // Warn if blur is used without blurTarget\n    if (!blurTarget && hasWarnedRef.current !== 'no-blur-target') {\n      hasWarnedRef.current = 'no-blur-target';\n      console.warn(\n        '[UDS Mobile] Box: Blur effect requires a blurTarget ref. ' +\n          'Wrap the content to blur in <BlurTarget ref={ref}> and pass the ref to blurTarget prop. ' +\n          'See BACKGROUND_BLUR.md for details.',\n      );\n    }\n  }, [blurIntensity, blurTarget, blurIsLoaded, blurFailed]);\n\n  const variants = {\n    // background\n    backgroundColor: backgroundColor ?? elevationAlias,\n    // border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    // nestedBorderRadius,\n    // nestedBorderRadiusSize,\n    // nestedBorderRadiusSpacing,\n    // nestedBorderRadiusWidth,\n    borderColor: borderColor ?? elevationAlias,\n    borderStartColor,\n    borderEndColor,\n    borderTopColor,\n    borderBottomColor,\n    borderWidth: borderWidth ?? elevationAlias,\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    // flexBasis,\n    // layout\n    display,\n    overflow,\n    // overflowX,\n    // overflowY,\n    // position,\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    // rest\n  };\n\n  styles.useVariants(variants);\n\n  const effectiveDropShadow = dropShadow ?? elevationAlias;\n  const shadowStyle =\n    effectiveDropShadow || insetShadow\n      ? shadowSheet.shadow(effectiveDropShadow, insetShadow)\n      : undefined;\n\n  // styles.foundation must be in deps - it returns a new reference when variants change\n  const boxStyles = useMemo(\n    () => [\n      dangerouslySetBackgroundColor\n        ? { backgroundColor: dangerouslySetBackgroundColor }\n        : undefined,\n      dangerouslySetBorderColor ? { borderColor: dangerouslySetBorderColor } : undefined,\n      width ? { width } : undefined,\n      height ? { height } : undefined,\n      minWidth ? { minWidth } : undefined,\n      maxWidth ? { maxWidth } : undefined,\n      minHeight ? { minHeight } : undefined,\n      maxHeight ? { maxHeight } : undefined,\n      shadowStyle,\n      styles.foundation,\n      style,\n    ],\n    [\n      dangerouslySetBackgroundColor,\n      dangerouslySetBorderColor,\n      width,\n      height,\n      minWidth,\n      maxWidth,\n      minHeight,\n      maxHeight,\n      shadowStyle,\n      styles.foundation,\n      style,\n    ],\n  );\n\n  // Merge variant styles with user-provided style prop\n  // User styles come last so they can override variant styles if needed\n\n  // If blur is configured (manual or via elevation), render BlurView instead of View\n  // Note: On Android, blur requires BlurTarget setup by the developer\n  // See BACKGROUND_BLUR.md for Android-specific instructions\n  // When blur prop is explicitly set (even to 0), use BlurView so blur=0 is transparent, not solid\n  const shouldUseBlurView = BlurViewComponent && (blurIntensity > 0 || blurExplicitlySet);\n  if (shouldUseBlurView) {\n    const isAndroid = Platform.OS === 'android';\n    // Match blur tint to the app's theme (from unistyles runtime)\n    const blurTint = rt.themeName === 'dark' ? 'dark' : 'light';\n\n    // On iOS, BlurView provides its own frosted background via the tint prop.\n    // We must NOT apply an opaque backgroundColor or it will cover the blur effect.\n    // On Android, the blur is applied to the blurTarget, so backgroundColor is fine.\n    const blurStyles = isAndroid\n      ? boxStyles\n      : [\n          // Exclude backgroundColor for iOS - the blur tint provides the visual background\n          dangerouslySetBorderColor ? { borderColor: dangerouslySetBorderColor } : undefined,\n          width ? { width } : undefined,\n          height ? { height } : undefined,\n          minWidth ? { minWidth } : undefined,\n          maxWidth ? { maxWidth } : undefined,\n          minHeight ? { minHeight } : undefined,\n          maxHeight ? { maxHeight } : undefined,\n          shadowStyle,\n          // Filter out backgroundColor from foundation styles\n          {\n            ...styles.foundation,\n            backgroundColor: undefined,\n          },\n          // Also filter backgroundColor from user style if provided (handles both object and array styles)\n          style\n            ? Array.isArray(style)\n              ? style.map((s) =>\n                  s && typeof s === 'object' ? { ...s, backgroundColor: undefined } : s,\n                )\n              : typeof style === 'object'\n                ? { ...style, backgroundColor: undefined }\n                : style\n            : undefined,\n        ];\n\n    // Scale Android intensity to keep tint overlay subtle (Android overlays become\n    // too opaque at high intensities). 0.4 scale maps intensity=100 to effective ~40.\n    const effectiveIntensity = isAndroid ? Math.min(blurIntensity * 0.4, 40) : blurIntensity;\n\n    return (\n      <BlurViewComponent\n        ref={ref}\n        intensity={effectiveIntensity}\n        tint={blurTint}\n        blurTarget={isAndroid ? blurTarget : undefined}\n        blurMethod={isAndroid ? 'dimezisBlurView' : undefined}\n        style={blurStyles}\n        {...props}\n      >\n        {props.children}\n      </BlurViewComponent>\n    );\n  }\n\n  // Fallback to regular View (blur not available or not requested)\n\n  return <View ref={ref} style={boxStyles} {...props} />;\n});\n\nBox.displayName = 'Box';\n\n/**\n * Dynamic shadow stylesheet that merges drop and inset shadows into a single\n * boxShadow CSS string. Theme-reactive so shadows update on color mode change.\n */\nconst shadowSheet = StyleSheet.create((theme) => ({\n  shadow: (drop?: string, inset?: string) => {\n    const parts = [\n      drop ? theme.boxShadow.drop[drop as keyof typeof theme.boxShadow.drop] : '',\n      inset ? theme.boxShadow.inset[inset as keyof typeof theme.boxShadow.inset] : '',\n    ].filter(Boolean);\n    return parts.length > 0 ? { boxShadow: parts.join(', ') } : {};\n  },\n}));\n\nexport { Box, type BoxProps };\n"],"mappings":"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"}
+{"version":3,"file":"Box.js","names":["StyleSheet"],"sources":["../../src/components/Box.tsx"],"sourcesContent":["import type { ElevationLevel } from '@yahoo/uds-types';\nimport type { ComponentType, Ref, RefObject } from 'react';\nimport { memo, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Platform, View } from 'react-native';\n// eslint-disable-next-line uds/no-use-unistyles -- blur intensity is not a style property, requires direct theme access\nimport { StyleSheet, useUnistyles } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\nimport type { SizeProps } from '../types';\n\n// Optional expo-blur dependency - loaded via dynamic import for Metro compatibility\n// Metro can statically analyze import() and will include expo-blur in the bundle if installed\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nlet BlurView: ComponentType<any> | null = null;\nlet blurLoadState: 'pending' | 'loaded' | 'failed' = 'pending';\nconst blurLoadListeners: (() => void)[] = [];\n\n// Start loading expo-blur immediately (Metro will bundle it if installed)\nimport('expo-blur')\n  .then((mod) => {\n    BlurView = mod.BlurView;\n    blurLoadState = 'loaded';\n    blurLoadListeners.forEach((cb) => cb());\n  })\n  .catch(() => {\n    blurLoadState = 'failed';\n    blurLoadListeners.forEach((cb) => cb());\n  });\n\n/** Hook to get BlurView component, re-renders when loaded */\nfunction useBlurView() {\n  const [, forceUpdate] = useState(0);\n\n  useEffect(() => {\n    if (blurLoadState === 'pending') {\n      const listener = () => forceUpdate((n) => n + 1);\n      blurLoadListeners.push(listener);\n      return () => {\n        const idx = blurLoadListeners.indexOf(listener);\n        if (idx >= 0) {\n          blurLoadListeners.splice(idx, 1);\n        }\n      };\n    }\n  }, []);\n\n  return { BlurView, isLoaded: blurLoadState !== 'pending', isFailed: blurLoadState === 'failed' };\n}\n\ninterface BoxProps extends ViewProps, SizeProps {\n  ref?: Ref<View>;\n  elevation?: ElevationLevel;\n  backgroundColor?: StyleProps['backgroundColor'];\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  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  //   flexBasis?: StyleProps['flexBasis'];\n  display?: StyleProps['display'];\n  overflow?: StyleProps['overflow'];\n  //   overflowX?: StyleProps['overflowX'];\n  //   overflowY?: StyleProps['overflowY'];\n  //   position?: StyleProps['position'];\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  dropShadow?: StyleProps['dropShadow'];\n  insetShadow?: StyleProps['insetShadow'];\n  dangerouslySetBackgroundColor?: string;\n  dangerouslySetBorderColor?: string;\n  /**\n   * Manual blur intensity (0-100). When set, renders as a BlurView.\n   * Requires `blurTarget` pointing to a BlurTarget ref wrapping the content to blur.\n   */\n  blur?: number;\n  /**\n   * Reference to a BlurTarget component wrapping the content to blur.\n   * Required when using `blur` prop or elevation with blur configured.\n   */\n  blurTarget?: RefObject<View | null>;\n}\n\n/**\n * **📦 A layout component that can be used to compose other components**\n *\n * @description\n * The most simple component we ship - a View. But with all the power of the UDS design system.\n * By default, `Box` is a flexbox container. When working with vertical or horizontal layouts,\n * consider using VStack or HStack respectively.\n *\n * @category Layout\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Box } from '@yahoo/uds-mobile';\n *\n * <Box backgroundColor=\"primary\" spacing=\"6\">\n *   Any kind of content can go here!\n * </Box>\n * ```\n *\n * @usage\n * - Use as a container to apply padding, shapes, or other styling\n * - Use for creating card components\n * - Use HStack/VStack for directional layouts\n *\n * @see {@link HStack} for horizontal layouts\n * @see {@link VStack} for vertical layouts\n */\nconst Box = memo(function Box({\n  // elevation\n  elevation,\n  // background\n  backgroundColor,\n  dangerouslySetBackgroundColor,\n  // border\n  borderRadius,\n  borderTopStartRadius,\n  borderTopEndRadius,\n  borderBottomStartRadius,\n  borderBottomEndRadius,\n  borderColor,\n  dangerouslySetBorderColor,\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  // flexBasis,\n  // layout\n  display = 'flex',\n  overflow,\n  //     overflowX,\n  //     overflowY,\n  // position,\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  // size\n  width,\n  height,\n  minWidth,\n  maxWidth,\n  minHeight,\n  maxHeight,\n  // shadow\n  dropShadow,\n  insetShadow,\n  // blur\n  blur,\n  blurTarget,\n  // // nested border radius\n  // nestedBorderRadius,\n  // nestedBorderRadiusSize = nestedBorderRadius ? borderRadius : undefined,\n  // nestedBorderRadiusSpacing = nestedBorderRadius ? spacing : undefined,\n  // nestedBorderRadiusWidth = nestedBorderRadius ? borderWidth : undefined,\n  // style - extracted to merge with variants\n  style,\n  ref,\n  // rest\n  ...props\n}: BoxProps) {\n  const { theme, rt } = useUnistyles();\n  const {\n    BlurView: BlurViewComponent,\n    isLoaded: blurIsLoaded,\n    isFailed: blurFailed,\n  } = useBlurView();\n  const elevationAlias = elevation !== undefined ? (`elevation-${elevation}` as const) : undefined;\n\n  // Track if blur prop was explicitly set (even to 0) vs derived from elevation\n  const blurExplicitlySet = blur !== undefined;\n\n  // Get blur intensity from manual blur prop or elevation config\n  const blurIntensity = useMemo(() => {\n    // Manual blur prop takes precedence (including 0)\n    if (blur !== undefined) {\n      return blur;\n    }\n    // Fall back to elevation-based blur\n    if (elevation === undefined || !theme.blur) {\n      return 0;\n    }\n    const blurKey = `elevation-${elevation}` as keyof typeof theme.blur;\n    return theme.blur[blurKey] ?? 0;\n  }, [blur, elevation, theme]);\n\n  // Warn in development about blur issues (once per mount)\n  const hasWarnedRef = useRef<'none' | 'no-expo-blur' | 'no-blur-target'>('none');\n  useEffect(() => {\n    if (!__DEV__ || blurIntensity === 0 || !blurIsLoaded) {\n      return;\n    }\n\n    // Warn if expo-blur is not installed\n    if (blurFailed && hasWarnedRef.current !== 'no-expo-blur') {\n      hasWarnedRef.current = 'no-expo-blur';\n      console.warn('[UDS Mobile] Box: Blur effect requested but expo-blur is not installed. ');\n      return;\n    }\n\n    // Warn if blur is used without blurTarget\n    if (!blurTarget && hasWarnedRef.current !== 'no-blur-target') {\n      hasWarnedRef.current = 'no-blur-target';\n      console.warn(\n        '[UDS Mobile] Box: Blur effect requires a blurTarget ref. ' +\n          'Wrap the content to blur in <BlurTarget ref={ref}> and pass the ref to blurTarget prop. ' +\n          'See BACKGROUND_BLUR.md for details.',\n      );\n    }\n  }, [blurIntensity, blurTarget, blurIsLoaded, blurFailed]);\n\n  const variants = {\n    // background\n    backgroundColor: backgroundColor ?? elevationAlias,\n    // border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    // nestedBorderRadius,\n    // nestedBorderRadiusSize,\n    // nestedBorderRadiusSpacing,\n    // nestedBorderRadiusWidth,\n    borderColor: borderColor ?? elevationAlias,\n    borderStartColor,\n    borderEndColor,\n    borderTopColor,\n    borderBottomColor,\n    borderWidth: borderWidth ?? elevationAlias,\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    // flexBasis,\n    // layout\n    display,\n    overflow,\n    // overflowX,\n    // overflowY,\n    // position,\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    // rest\n  };\n\n  styles.useVariants(variants);\n\n  const effectiveDropShadow = dropShadow ?? elevationAlias;\n  const shadowStyle =\n    effectiveDropShadow || insetShadow\n      ? shadowSheet.shadow(effectiveDropShadow, insetShadow)\n      : undefined;\n\n  // styles.foundation must be in deps - it returns a new reference when variants change\n  const boxStyles = useMemo(\n    () => [\n      dangerouslySetBackgroundColor\n        ? { backgroundColor: dangerouslySetBackgroundColor }\n        : undefined,\n      dangerouslySetBorderColor ? { borderColor: dangerouslySetBorderColor } : undefined,\n      width ? { width } : undefined,\n      height ? { height } : undefined,\n      minWidth ? { minWidth } : undefined,\n      maxWidth ? { maxWidth } : undefined,\n      minHeight ? { minHeight } : undefined,\n      maxHeight ? { maxHeight } : undefined,\n      shadowStyle,\n      styles.foundation,\n      style,\n    ],\n    [\n      dangerouslySetBackgroundColor,\n      dangerouslySetBorderColor,\n      width,\n      height,\n      minWidth,\n      maxWidth,\n      minHeight,\n      maxHeight,\n      shadowStyle,\n      styles.foundation,\n      style,\n    ],\n  );\n\n  // Merge variant styles with user-provided style prop\n  // User styles come last so they can override variant styles if needed\n\n  // If blur is configured (manual or via elevation), render BlurView instead of View\n  // Note: On Android, blur requires BlurTarget setup by the developer\n  // See BACKGROUND_BLUR.md for Android-specific instructions\n  // When blur prop is explicitly set (even to 0), use BlurView so blur=0 is transparent, not solid\n  const shouldUseBlurView = BlurViewComponent && (blurIntensity > 0 || blurExplicitlySet);\n  if (shouldUseBlurView) {\n    const isAndroid = Platform.OS === 'android';\n    // Match blur tint to the app's theme (from unistyles runtime)\n    const blurTint = rt.themeName === 'dark' ? 'dark' : 'light';\n\n    // On iOS, BlurView provides its own frosted background via the tint prop.\n    // We must NOT apply an opaque backgroundColor or it will cover the blur effect.\n    // On Android, the blur is applied to the blurTarget, so backgroundColor is fine.\n    const blurStyles = isAndroid\n      ? boxStyles\n      : [\n          // Exclude backgroundColor for iOS - the blur tint provides the visual background\n          dangerouslySetBorderColor ? { borderColor: dangerouslySetBorderColor } : undefined,\n          width ? { width } : undefined,\n          height ? { height } : undefined,\n          minWidth ? { minWidth } : undefined,\n          maxWidth ? { maxWidth } : undefined,\n          minHeight ? { minHeight } : undefined,\n          maxHeight ? { maxHeight } : undefined,\n          shadowStyle,\n          // Filter out backgroundColor from foundation styles\n          {\n            ...styles.foundation,\n            backgroundColor: undefined,\n          },\n          // Also filter backgroundColor from user style if provided (handles both object and array styles)\n          style\n            ? Array.isArray(style)\n              ? style.map((s) =>\n                  s && typeof s === 'object' ? { ...s, backgroundColor: undefined } : s,\n                )\n              : typeof style === 'object'\n                ? { ...style, backgroundColor: undefined }\n                : style\n            : undefined,\n        ];\n\n    // Scale Android intensity to keep tint overlay subtle (Android overlays become\n    // too opaque at high intensities). 0.4 scale maps intensity=100 to effective ~40.\n    const effectiveIntensity = isAndroid ? Math.min(blurIntensity * 0.4, 40) : blurIntensity;\n\n    return (\n      <BlurViewComponent\n        ref={ref}\n        intensity={effectiveIntensity}\n        tint={blurTint}\n        blurTarget={isAndroid ? blurTarget : undefined}\n        blurMethod={isAndroid ? 'dimezisBlurView' : undefined}\n        style={blurStyles}\n        {...props}\n      >\n        {props.children}\n      </BlurViewComponent>\n    );\n  }\n\n  // Fallback to regular View (blur not available or not requested)\n\n  return <View ref={ref} style={boxStyles} {...props} />;\n});\n\nBox.displayName = 'Box';\n\n/**\n * Dynamic shadow stylesheet that merges drop and inset shadows into a single\n * boxShadow CSS string. Theme-reactive so shadows update on color mode change.\n */\nconst shadowSheet = StyleSheet.create((theme) => ({\n  shadow: (drop?: string, inset?: string) => {\n    const parts = [\n      drop ? theme.boxShadow.drop[drop as keyof typeof theme.boxShadow.drop] : '',\n      inset ? theme.boxShadow.inset[inset as keyof typeof theme.boxShadow.inset] : '',\n    ].filter(Boolean);\n    return parts.length > 0 ? { boxShadow: parts.join(', ') } : {};\n  },\n}));\n\nexport { Box, type BoxProps };\n"],"mappings":"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"}

package/dist/components/Button.cjs

@@ -1,11 +1,11 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
-const require_index = require('../motion-tokens/dist/index.cjs');
-const require_motion = require('../motion.cjs');
-const require_components_IconSlot = require('./IconSlot.cjs');
-const require_components_Text = require('./Text.cjs');
-const require_components_Pressable = require('./Pressable.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+const require_index = require("../motion-tokens/dist/index.cjs");
+const require_motion = require("../motion.cjs");
+const require_components_IconSlot = require("./IconSlot.cjs");
+const require_components_Text = require("./Text.cjs");
+const require_components_Pressable = require("./Pressable.cjs");
 let react = require("react");
 let react_native = require("react-native");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -13,7 +13,6 @@ let generated_styles = require("../../generated/styles");
 let react_native_reanimated = require("react-native-reanimated");
 react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
 let react_native_unistyles_reanimated = require("react-native-unistyles/reanimated");
-
 //#region src/components/Button.tsx
 /**
 * Interpolates a boxShadow string by scaling the alpha of all colors.
@@ -196,6 +195,5 @@ const Button = (0, react.memo)(function Button({ variant = "primary", size = "md
 	});
 });
 Button.displayName = "Button";
-
 //#endregion
-exports.Button = Button;
+exports.Button = Button;

package/dist/components/Button.d.cts

@@ -2,7 +2,7 @@
 import { ButtonSize, ButtonVariantFlat, IconVariant } from "../types/dist/index.cjs";
 import { IconSlotType } from "./IconSlot.cjs";
 import { PressableProps as PressableProps$1 } from "./Pressable.cjs";
-import * as react from "react";
+import * as _$react from "react";
 import { Ref } from "react";
 import { View } from "react-native";
 
@@ -64,7 +64,7 @@ interface ButtonProps extends Omit<PressableProps$1, 'children' | 'disabled'> {
  * @see {@link IconButton} for icon-only buttons
  * @see {@link Link} for navigation actions
  */
-declare const Button: react.NamedExoticComponent<ButtonProps>;
+declare const Button: _$react.NamedExoticComponent<ButtonProps>;
 //#endregion
 export { Button, type ButtonProps };
 //# sourceMappingURL=Button.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.cts","names":[],"sources":["../../src/components/Button.tsx"],"mappings":";;;;;;;;;UA8GU,WAAA,SAAoB,IAAA,CAAK,gBAAA;;EAEjC,OAAA,GAAU,iBAAA;EAFF;EAIR,IAAA,GAAO,UAAA;;EAEP,WAAA,GAAc,WAAA;EAJJ;EAMV,SAAA,GAAY,YAAA;EAFE;EAId,OAAA,GAAU,YAAA;EAAA;EAEV,OAAA;EAWU;EATV,QAAA;EAd4B;EAgB5B,QAAA,GAAW,KAAA,CAAM,SAAA;EAhBe;;;;EAqBhC,cAAA;EAjBA;EAmBA,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;cAuCV,MAAA,EAAM,KAAA,CAAA,oBAAA,CAAA,WAAA"}
+{"version":3,"file":"Button.d.cts","names":[],"sources":["../../src/components/Button.tsx"],"mappings":";;;;;;;;;UA8GU,WAAA,SAAoB,IAAA,CAAK,gBAAA;;EAEjC,OAAA,GAAU,iBAAA;EAFF;EAIR,IAAA,GAAO,UAAA;;EAEP,WAAA,GAAc,WAAA;EAJJ;EAMV,SAAA,GAAY,YAAA;EAFE;EAId,OAAA,GAAU,YAAA;EAAA;EAEV,OAAA;EAWU;EATV,QAAA;EAd4B;EAgB5B,QAAA,GAAW,KAAA,CAAM,SAAA;EAhBe;;;;EAqBhC,cAAA;EAjBA;EAmBA,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;cAuCV,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}

package/dist/components/Button.d.ts

@@ -2,7 +2,7 @@
 import { ButtonSize, ButtonVariantFlat, IconVariant } from "../types/dist/index.js";
 import { IconSlotType } from "./IconSlot.js";
 import { PressableProps as PressableProps$1 } from "./Pressable.js";
-import * as react from "react";
+import * as _$react from "react";
 import { Ref } from "react";
 import { View } from "react-native";
 
@@ -64,7 +64,7 @@ interface ButtonProps extends Omit<PressableProps$1, 'children' | 'disabled'> {
  * @see {@link IconButton} for icon-only buttons
  * @see {@link Link} for navigation actions
  */
-declare const Button: react.NamedExoticComponent<ButtonProps>;
+declare const Button: _$react.NamedExoticComponent<ButtonProps>;
 //#endregion
 export { Button, type ButtonProps };
 //# sourceMappingURL=Button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","names":[],"sources":["../../src/components/Button.tsx"],"mappings":";;;;;;;;;UA8GU,WAAA,SAAoB,IAAA,CAAK,gBAAA;;EAEjC,OAAA,GAAU,iBAAA;EAFF;EAIR,IAAA,GAAO,UAAA;;EAEP,WAAA,GAAc,WAAA;EAJJ;EAMV,SAAA,GAAY,YAAA;EAFE;EAId,OAAA,GAAU,YAAA;EAAA;EAEV,OAAA;EAWU;EATV,QAAA;EAd4B;EAgB5B,QAAA,GAAW,KAAA,CAAM,SAAA;EAhBe;;;;EAqBhC,cAAA;EAjBA;EAmBA,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;cAuCV,MAAA,EAAM,KAAA,CAAA,oBAAA,CAAA,WAAA"}
+{"version":3,"file":"Button.d.ts","names":[],"sources":["../../src/components/Button.tsx"],"mappings":";;;;;;;;;UA8GU,WAAA,SAAoB,IAAA,CAAK,gBAAA;;EAEjC,OAAA,GAAU,iBAAA;EAFF;EAIR,IAAA,GAAO,UAAA;;EAEP,WAAA,GAAc,WAAA;EAJJ;EAMV,SAAA,GAAY,YAAA;EAFE;EAId,OAAA,GAAU,YAAA;EAAA;EAEV,OAAA;EAWU;EATV,QAAA;EAd4B;EAgB5B,QAAA,GAAW,KAAA,CAAM,SAAA;EAhBe;;;;EAqBhC,cAAA;EAjBA;EAmBA,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;cAuCV,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}

package/dist/components/Button.js

@@ -10,7 +10,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { buttonStyles } from "../../generated/styles";
 import Animated, { Easing, interpolate, useAnimatedStyle, useDerivedValue, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
 import { useAnimatedTheme } from "react-native-unistyles/reanimated";
-
 //#region src/components/Button.tsx
 /**
 * Interpolates a boxShadow string by scaling the alpha of all colors.
@@ -193,7 +192,7 @@ const Button = memo(function Button({ variant = "primary", size = "md", iconVari
 	});
 });
 Button.displayName = "Button";
-
 //#endregion
 export { Button };
+
 //# sourceMappingURL=Button.js.map

package/dist/components/Button.js.map

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

package/dist/components/Checkbox.cjs

@@ -1,18 +1,17 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
-const require_index = require('../motion-tokens/dist/index.cjs');
-const require_motion = require('../motion.cjs');
-const require_components_Icon = require('./Icon.cjs');
-const require_components_Text = require('./Text.cjs');
-const require_components_HStack = require('./HStack.cjs');
-const require_components_Pressable = require('./Pressable.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+const require_index = require("../motion-tokens/dist/index.cjs");
+const require_motion = require("../motion.cjs");
+const require_components_Icon = require("./Icon.cjs");
+const require_components_Text = require("./Text.cjs");
+const require_components_HStack = require("./HStack.cjs");
+const require_components_Pressable = require("./Pressable.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let generated_styles = require("../../generated/styles");
 let react_native_reanimated = require("react-native-reanimated");
 react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
-
 //#region src/components/Checkbox.tsx
 const VARIANT_ERROR_MAP = {
 	primary: "alert",
@@ -153,6 +152,5 @@ const Checkbox = (0, react.memo)(function Checkbox({ label, labelPosition = "sta
 	});
 });
 Checkbox.displayName = "Checkbox";
-
 //#endregion
-exports.Checkbox = Checkbox;
+exports.Checkbox = Checkbox;

package/dist/components/Checkbox.d.cts

@@ -1,6 +1,6 @@
 
 import { UniversalCheckboxProps } from "../types/dist/index.cjs";
-import * as react from "react";
+import * as _$react from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 
@@ -51,7 +51,7 @@ interface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps
  * @see {@link Radio} for single-select options
  * @see {@link Switch} for binary toggles
  */
-declare const Checkbox: react.NamedExoticComponent<CheckboxProps>;
+declare const Checkbox: _$react.NamedExoticComponent<CheckboxProps>;
 //#endregion
 export { Checkbox, type CheckboxProps };
 //# sourceMappingURL=Checkbox.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.cts","names":[],"sources":["../../src/components/Checkbox.tsx"],"mappings":";;;;;;;UAoBU,aAAA,SAAsB,IAAA,CAAK,SAAA,YAAqB,sBAAA;;EAExD,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,cAAA;;EAEA,QAAA;EAJU;EAMV,QAAA;EAR8B;EAU9B,QAAA,IAAY,OAAA;AAAA;;;;;;;;;;;;;;;AAAgB;;;;;;;;;;;;;;;;;;;;cAqDxB,QAAA,EAAQ,KAAA,CAAA,oBAAA,CAAA,aAAA"}
+{"version":3,"file":"Checkbox.d.cts","names":[],"sources":["../../src/components/Checkbox.tsx"],"mappings":";;;;;;;UAoBU,aAAA,SAAsB,IAAA,CAAK,SAAA,YAAqB,sBAAA;;EAExD,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,cAAA;;EAEA,QAAA;EAJU;EAMV,QAAA;EAR8B;EAU9B,QAAA,IAAY,OAAA;AAAA;;;;;;;;;;;;;;;AAAgB;;;;;;;;;;;;;;;;;;;;cAqDxB,QAAA,EAAQ,OAAA,CAAA,oBAAA,CAAA,aAAA"}

package/dist/components/Checkbox.d.ts

@@ -1,6 +1,6 @@
 
 import { UniversalCheckboxProps } from "../types/dist/index.js";
-import * as react from "react";
+import * as _$react from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 
@@ -51,7 +51,7 @@ interface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps
  * @see {@link Radio} for single-select options
  * @see {@link Switch} for binary toggles
  */
-declare const Checkbox: react.NamedExoticComponent<CheckboxProps>;
+declare const Checkbox: _$react.NamedExoticComponent<CheckboxProps>;
 //#endregion
 export { Checkbox, type CheckboxProps };
 //# sourceMappingURL=Checkbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","names":[],"sources":["../../src/components/Checkbox.tsx"],"mappings":";;;;;;;UAoBU,aAAA,SAAsB,IAAA,CAAK,SAAA,YAAqB,sBAAA;;EAExD,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,cAAA;;EAEA,QAAA;EAJU;EAMV,QAAA;EAR8B;EAU9B,QAAA,IAAY,OAAA;AAAA;;;;;;;;;;;;;;;AAAgB;;;;;;;;;;;;;;;;;;;;cAqDxB,QAAA,EAAQ,KAAA,CAAA,oBAAA,CAAA,aAAA"}
+{"version":3,"file":"Checkbox.d.ts","names":[],"sources":["../../src/components/Checkbox.tsx"],"mappings":";;;;;;;UAoBU,aAAA,SAAsB,IAAA,CAAK,SAAA,YAAqB,sBAAA;;EAExD,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,cAAA;;EAEA,QAAA;EAJU;EAMV,QAAA;EAR8B;EAU9B,QAAA,IAAY,OAAA;AAAA;;;;;;;;;;;;;;;AAAgB;;;;;;;;;;;;;;;;;;;;cAqDxB,QAAA,EAAQ,OAAA,CAAA,oBAAA,CAAA,aAAA"}

package/dist/components/Checkbox.js

@@ -9,7 +9,6 @@ import { isValidElement, memo, useCallback, useId, useMemo, useState } from "rea
 import { jsx, jsxs } from "react/jsx-runtime";
 import { checkboxStyles } from "../../generated/styles";
 import Animated, { useAnimatedStyle, useDerivedValue, withSpring } from "react-native-reanimated";
-
 //#region src/components/Checkbox.tsx
 const VARIANT_ERROR_MAP = {
 	primary: "alert",
@@ -150,7 +149,7 @@ const Checkbox = memo(function Checkbox({ label, labelPosition = "start", varian
 	});
 });
 Checkbox.displayName = "Checkbox";
-
 //#endregion
 export { Checkbox };
+
 //# sourceMappingURL=Checkbox.js.map

package/dist/components/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":[],"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":["import type { CheckboxValue, CheckboxVariant, UniversalCheckboxProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { isValidElement, memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { View, ViewProps } from 'react-native';\nimport Animated, { useAnimatedStyle, useDerivedValue, withSpring } from 'react-native-reanimated';\n\nimport { checkboxStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { HStack } from './HStack';\nimport { Icon } from './Icon';\nimport { Pressable } from './Pressable';\nimport { Text } from './Text';\n\n/* -------------------------------------------------------------------------- */\n/*                                   Types                                    */\n/* -------------------------------------------------------------------------- */\n\n/** Derived from CheckboxValue - maps boolean to 'checked'/'unchecked' string literals */\ntype CheckboxValueState = Exclude<CheckboxValue, boolean> | 'checked' | 'unchecked';\n\ninterface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps {\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n  /** Default checked state for uncontrolled mode */\n  defaultChecked?: boolean;\n  /** Whether the checkbox is disabled */\n  disabled?: boolean;\n  /** Whether the checkbox is required */\n  required?: boolean;\n  /** Callback fired when the checked state changes */\n  onChange?: (checked: boolean) => void;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Variant Mapping                                */\n/* -------------------------------------------------------------------------- */\n\n/** All style variants available in the generated styles (includes error variants) */\ntype CheckboxStyleVariant = 'primary' | 'secondary' | 'alert' | 'alert-secondary';\n\nconst VARIANT_ERROR_MAP: Record<CheckboxVariant, CheckboxStyleVariant> = {\n  primary: 'alert',\n  secondary: 'alert-secondary',\n};\n\n/* -------------------------------------------------------------------------- */\n/*                              Checkbox Component                             */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **⚙️ A checkbox component**\n *\n * @description\n * A checkbox component allows users to select one or multiple options from a set.\n * It represents a binary state, typically as checked or unchecked, and optionally\n * includes a third \"indeterminate\" state to indicate partial selection.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Checkbox } from '@yahoo/uds-mobile';\n *\n * <Checkbox label=\"Agree to terms\" />\n * <Checkbox label=\"Subscribe\" checked={true} onChange={setChecked} />\n * <Checkbox label=\"Partial\" checked=\"indeterminate\" />\n * ```\n *\n * @usage\n * - Forms: For selecting options\n * - Settings: For toggling preferences\n * - Filters: For multi-select filtering\n *\n * @accessibility\n * - Sets `accessibilityRole=\"checkbox\"` automatically\n * - Announces checked/unchecked/mixed state\n * - Label is used as accessibility label\n * - Supports `reduceMotion` for users who prefer reduced motion\n *\n * @see {@link Radio} for single-select options\n * @see {@link Switch} for binary toggles\n */\nconst Checkbox = memo(function Checkbox({\n  // Checkbox props\n  label,\n  labelPosition = 'start',\n  variant: variantProp = 'primary',\n  size = 'md',\n  checked: checkedProp,\n  hasError,\n  reduceMotion,\n  // Native props\n  defaultChecked,\n  disabled,\n  required,\n  onChange,\n  ref,\n  ...viewProps\n}: CheckboxProps) {\n  const generatedId = useId();\n  const uid = `uds-checkbox-${generatedId}`;\n\n  /* --------------------------------- State ---------------------------------- */\n  const isControlled = checkedProp !== undefined;\n  const [internalChecked, setInternalChecked] = useState<CheckboxValue>(\n    isControlled ? checkedProp : (defaultChecked ?? false),\n  );\n  const [pressed, setPressed] = useState(false);\n\n  // Use controlled value if provided, otherwise use internal state\n  const checked = isControlled ? checkedProp : internalChecked;\n\n  /* ------------------------------ Derived Values ---------------------------- */\n  const valueState: CheckboxValueState = useMemo(() => {\n    if (checked === 'indeterminate') {\n      return 'indeterminate';\n    }\n    return checked ? 'checked' : 'unchecked';\n  }, [checked]);\n\n  const iconName = valueState === 'indeterminate' ? 'Minus' : 'Check';\n  const showIcon = valueState !== 'unchecked';\n\n  /* -------------------------------- Animation ------------------------------- */\n  const shouldAnimate = !reduceMotion;\n\n  // Scale animation for press feedback (disabled when reduceMotion is true)\n  const scaleProgress = useDerivedValue(\n    () =>\n      shouldAnimate\n        ? withSpring(pressed ? SCALE_EFFECTS.down : SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG)\n        : SCALE_EFFECTS.none, // No scale effect when reduceMotion is true\n    [pressed, shouldAnimate],\n  );\n\n  const checkboxAnimatedStyle = useAnimatedStyle(() => ({\n    transform: [{ scale: scaleProgress.value }],\n  }));\n\n  /* -------------------------------- Handlers -------------------------------- */\n  const handlePress = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    const newChecked = checked === 'indeterminate' ? true : !checked;\n\n    if (!isControlled) {\n      setInternalChecked(newChecked);\n    }\n\n    onChange?.(newChecked);\n  }, [disabled, checked, isControlled, onChange]);\n\n  const handlePressIn = useCallback(() => {\n    setPressed(true);\n  }, []);\n\n  const handlePressOut = useCallback(() => {\n    setPressed(false);\n  }, []);\n\n  /* --------------------------------- Styles --------------------------------- */\n  // Compute the style variant (primary/secondary maps to alert variants when hasError)\n  const styleVariant: CheckboxStyleVariant = hasError\n    ? VARIANT_ERROR_MAP[variantProp]\n    : variantProp;\n\n  checkboxStyles.useVariants({\n    size,\n    variant: styleVariant, // primary, secondary, alert, alert-secondary\n    value: valueState, // checked, unchecked, indeterminate\n    disabled,\n    pressed,\n  });\n\n  const rootStyle = useMemo(\n    () => [checkboxStyles.root, { opacity: disabled ? 0.5 : 1 }],\n    [checkboxStyles.root, disabled],\n  );\n\n  const checkboxBoxStyle = useMemo(\n    () => [\n      checkboxStyles.checkbox,\n      { alignItems: 'center' as const, justifyContent: 'center' as const, borderRadius: 4 },\n      checkboxAnimatedStyle,\n    ],\n    [checkboxStyles.checkbox, checkboxAnimatedStyle],\n  );\n\n  /* ---------------------------- Render Helpers ------------------------------ */\n  const labelContent = useMemo(() => {\n    if (!label) {\n      return null;\n    }\n\n    const content =\n      typeof label === 'function' ? label() : isValidElement(label) ? label : String(label);\n\n    const textContent =\n      typeof content === 'string' ? <Text style={checkboxStyles.text}>{content}</Text> : content;\n\n    if (required) {\n      return (\n        <HStack columnGap=\"1\" alignItems=\"flex-start\">\n          {textContent}\n          <Text style={checkboxStyles.text}>*</Text>\n        </HStack>\n      );\n    }\n\n    return textContent;\n  }, [label, required, checkboxStyles.text]);\n\n  const a11yState = useMemo(\n    () => ({\n      disabled,\n      checked:\n        valueState === 'checked'\n          ? true\n          : valueState === 'indeterminate'\n            ? ('mixed' as const)\n            : false,\n    }),\n    [disabled, valueState],\n  );\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <Pressable\n      ref={ref}\n      nativeID={uid}\n      onPress={handlePress}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      disabled={disabled}\n      flexDirection={labelPosition === 'start' ? 'row' : 'row-reverse'}\n      alignItems=\"center\"\n      alignSelf=\"flex-start\"\n      accessibilityRole=\"checkbox\"\n      accessibilityState={a11yState}\n      accessibilityLabel={typeof label === 'string' ? label : undefined}\n      {...viewProps}\n      style={rootStyle}\n    >\n      <Animated.View style={checkboxBoxStyle}>\n        {showIcon && <Icon name={iconName} size=\"sm\" style={checkboxStyles.checkboxIcon} />}\n      </Animated.View>\n\n      {labelContent}\n    </Pressable>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox, type CheckboxProps };\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":["import type { CheckboxValue, CheckboxVariant, UniversalCheckboxProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { isValidElement, memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { View, ViewProps } from 'react-native';\nimport Animated, { useAnimatedStyle, useDerivedValue, withSpring } from 'react-native-reanimated';\n\nimport { checkboxStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { HStack } from './HStack';\nimport { Icon } from './Icon';\nimport { Pressable } from './Pressable';\nimport { Text } from './Text';\n\n/* -------------------------------------------------------------------------- */\n/*                                   Types                                    */\n/* -------------------------------------------------------------------------- */\n\n/** Derived from CheckboxValue - maps boolean to 'checked'/'unchecked' string literals */\ntype CheckboxValueState = Exclude<CheckboxValue, boolean> | 'checked' | 'unchecked';\n\ninterface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps {\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n  /** Default checked state for uncontrolled mode */\n  defaultChecked?: boolean;\n  /** Whether the checkbox is disabled */\n  disabled?: boolean;\n  /** Whether the checkbox is required */\n  required?: boolean;\n  /** Callback fired when the checked state changes */\n  onChange?: (checked: boolean) => void;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Variant Mapping                                */\n/* -------------------------------------------------------------------------- */\n\n/** All style variants available in the generated styles (includes error variants) */\ntype CheckboxStyleVariant = 'primary' | 'secondary' | 'alert' | 'alert-secondary';\n\nconst VARIANT_ERROR_MAP: Record<CheckboxVariant, CheckboxStyleVariant> = {\n  primary: 'alert',\n  secondary: 'alert-secondary',\n};\n\n/* -------------------------------------------------------------------------- */\n/*                              Checkbox Component                             */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **⚙️ A checkbox component**\n *\n * @description\n * A checkbox component allows users to select one or multiple options from a set.\n * It represents a binary state, typically as checked or unchecked, and optionally\n * includes a third \"indeterminate\" state to indicate partial selection.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Checkbox } from '@yahoo/uds-mobile';\n *\n * <Checkbox label=\"Agree to terms\" />\n * <Checkbox label=\"Subscribe\" checked={true} onChange={setChecked} />\n * <Checkbox label=\"Partial\" checked=\"indeterminate\" />\n * ```\n *\n * @usage\n * - Forms: For selecting options\n * - Settings: For toggling preferences\n * - Filters: For multi-select filtering\n *\n * @accessibility\n * - Sets `accessibilityRole=\"checkbox\"` automatically\n * - Announces checked/unchecked/mixed state\n * - Label is used as accessibility label\n * - Supports `reduceMotion` for users who prefer reduced motion\n *\n * @see {@link Radio} for single-select options\n * @see {@link Switch} for binary toggles\n */\nconst Checkbox = memo(function Checkbox({\n  // Checkbox props\n  label,\n  labelPosition = 'start',\n  variant: variantProp = 'primary',\n  size = 'md',\n  checked: checkedProp,\n  hasError,\n  reduceMotion,\n  // Native props\n  defaultChecked,\n  disabled,\n  required,\n  onChange,\n  ref,\n  ...viewProps\n}: CheckboxProps) {\n  const generatedId = useId();\n  const uid = `uds-checkbox-${generatedId}`;\n\n  /* --------------------------------- State ---------------------------------- */\n  const isControlled = checkedProp !== undefined;\n  const [internalChecked, setInternalChecked] = useState<CheckboxValue>(\n    isControlled ? checkedProp : (defaultChecked ?? false),\n  );\n  const [pressed, setPressed] = useState(false);\n\n  // Use controlled value if provided, otherwise use internal state\n  const checked = isControlled ? checkedProp : internalChecked;\n\n  /* ------------------------------ Derived Values ---------------------------- */\n  const valueState: CheckboxValueState = useMemo(() => {\n    if (checked === 'indeterminate') {\n      return 'indeterminate';\n    }\n    return checked ? 'checked' : 'unchecked';\n  }, [checked]);\n\n  const iconName = valueState === 'indeterminate' ? 'Minus' : 'Check';\n  const showIcon = valueState !== 'unchecked';\n\n  /* -------------------------------- Animation ------------------------------- */\n  const shouldAnimate = !reduceMotion;\n\n  // Scale animation for press feedback (disabled when reduceMotion is true)\n  const scaleProgress = useDerivedValue(\n    () =>\n      shouldAnimate\n        ? withSpring(pressed ? SCALE_EFFECTS.down : SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG)\n        : SCALE_EFFECTS.none, // No scale effect when reduceMotion is true\n    [pressed, shouldAnimate],\n  );\n\n  const checkboxAnimatedStyle = useAnimatedStyle(() => ({\n    transform: [{ scale: scaleProgress.value }],\n  }));\n\n  /* -------------------------------- Handlers -------------------------------- */\n  const handlePress = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    const newChecked = checked === 'indeterminate' ? true : !checked;\n\n    if (!isControlled) {\n      setInternalChecked(newChecked);\n    }\n\n    onChange?.(newChecked);\n  }, [disabled, checked, isControlled, onChange]);\n\n  const handlePressIn = useCallback(() => {\n    setPressed(true);\n  }, []);\n\n  const handlePressOut = useCallback(() => {\n    setPressed(false);\n  }, []);\n\n  /* --------------------------------- Styles --------------------------------- */\n  // Compute the style variant (primary/secondary maps to alert variants when hasError)\n  const styleVariant: CheckboxStyleVariant = hasError\n    ? VARIANT_ERROR_MAP[variantProp]\n    : variantProp;\n\n  checkboxStyles.useVariants({\n    size,\n    variant: styleVariant, // primary, secondary, alert, alert-secondary\n    value: valueState, // checked, unchecked, indeterminate\n    disabled,\n    pressed,\n  });\n\n  const rootStyle = useMemo(\n    () => [checkboxStyles.root, { opacity: disabled ? 0.5 : 1 }],\n    [checkboxStyles.root, disabled],\n  );\n\n  const checkboxBoxStyle = useMemo(\n    () => [\n      checkboxStyles.checkbox,\n      { alignItems: 'center' as const, justifyContent: 'center' as const, borderRadius: 4 },\n      checkboxAnimatedStyle,\n    ],\n    [checkboxStyles.checkbox, checkboxAnimatedStyle],\n  );\n\n  /* ---------------------------- Render Helpers ------------------------------ */\n  const labelContent = useMemo(() => {\n    if (!label) {\n      return null;\n    }\n\n    const content =\n      typeof label === 'function' ? label() : isValidElement(label) ? label : String(label);\n\n    const textContent =\n      typeof content === 'string' ? <Text style={checkboxStyles.text}>{content}</Text> : content;\n\n    if (required) {\n      return (\n        <HStack columnGap=\"1\" alignItems=\"flex-start\">\n          {textContent}\n          <Text style={checkboxStyles.text}>*</Text>\n        </HStack>\n      );\n    }\n\n    return textContent;\n  }, [label, required, checkboxStyles.text]);\n\n  const a11yState = useMemo(\n    () => ({\n      disabled,\n      checked:\n        valueState === 'checked'\n          ? true\n          : valueState === 'indeterminate'\n            ? ('mixed' as const)\n            : false,\n    }),\n    [disabled, valueState],\n  );\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <Pressable\n      ref={ref}\n      nativeID={uid}\n      onPress={handlePress}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      disabled={disabled}\n      flexDirection={labelPosition === 'start' ? 'row' : 'row-reverse'}\n      alignItems=\"center\"\n      alignSelf=\"flex-start\"\n      accessibilityRole=\"checkbox\"\n      accessibilityState={a11yState}\n      accessibilityLabel={typeof label === 'string' ? label : undefined}\n      {...viewProps}\n      style={rootStyle}\n    >\n      <Animated.View style={checkboxBoxStyle}>\n        {showIcon && <Icon name={iconName} size=\"sm\" style={checkboxStyles.checkboxIcon} />}\n      </Animated.View>\n\n      {labelContent}\n    </Pressable>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox, type CheckboxProps };\n"],"mappings":"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"}

package/dist/components/Chip.cjs

@@ -1,14 +1,13 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-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');
-const require_components_Pressable = require('./Pressable.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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");
+const require_components_Pressable = require("./Pressable.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let generated_styles = require("../../generated/styles");
-
 //#region src/components/Chip.tsx
 /**
 * **A chip component for selections, filters, or actions**
@@ -136,6 +135,5 @@ const Chip = (0, react.memo)(function Chip({ variant = "primary", size = "md", m
 	});
 });
 Chip.displayName = "Chip";
-
 //#endregion
-exports.Chip = Chip;
+exports.Chip = Chip;

package/dist/components/Chip.d.cts

@@ -1,7 +1,7 @@
 
 import { ChipSize, ChipVariant } from "../types/dist/index.cjs";
 import { IconSlotType } from "./IconSlot.cjs";
-import * as react from "react";
+import * as _$react from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 
@@ -76,7 +76,7 @@ interface ChipProps extends Omit<ViewProps, 'children'> {
  * @see {@link Badge} for non-interactive status indicators
  * @see {@link Button} for primary actions
  */
-declare const Chip: react.NamedExoticComponent<ChipProps>;
+declare const Chip: _$react.NamedExoticComponent<ChipProps>;
 //#endregion
 export { Chip, type ChipProps };
 //# sourceMappingURL=Chip.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.cts","names":[],"sources":["../../src/components/Chip.tsx"],"mappings":";;;;;;;;UAYU,SAAA,SAAkB,IAAA,CAAK,SAAA;;EAE/B,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,OAAA,GAAU,WAAA;;EAEV,IAAA,GAAO,QAAA;EAJG;EAMV,QAAA;EAJU;EAMV,QAAA;EAEY;EAAZ,SAAA,GAAY,YAAA;EAgBD;EAdX,OAAA,GAAU,YAAA;EAdoB;EAgB9B,QAAA;EAhB0B;EAkB1B,OAAA;EAhBA;EAkBA,SAAA;EAlBU;EAoBV,QAAA,IAAY,OAAA;EAlBF;EAoBV,SAAA;EAlBO;EAoBP,sBAAA;EAhBA;EAkBA,QAAA,GAAW,KAAA,CAAM,SAAA;AAAA;;;;;;;;;;;;;;;AAAS;;;;;;;;;;;;;;;;;;;;;;;;;;cA2CtB,IAAA,EAAI,KAAA,CAAA,oBAAA,CAAA,SAAA"}
+{"version":3,"file":"Chip.d.cts","names":[],"sources":["../../src/components/Chip.tsx"],"mappings":";;;;;;;;UAYU,SAAA,SAAkB,IAAA,CAAK,SAAA;;EAE/B,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,OAAA,GAAU,WAAA;;EAEV,IAAA,GAAO,QAAA;EAJG;EAMV,QAAA;EAJU;EAMV,QAAA;EAEY;EAAZ,SAAA,GAAY,YAAA;EAgBD;EAdX,OAAA,GAAU,YAAA;EAdoB;EAgB9B,QAAA;EAhB0B;EAkB1B,OAAA;EAhBA;EAkBA,SAAA;EAlBU;EAoBV,QAAA,IAAY,OAAA;EAlBF;EAoBV,SAAA;EAlBO;EAoBP,sBAAA;EAhBA;EAkBA,QAAA,GAAW,KAAA,CAAM,SAAA;AAAA;;;;;;;;;;;;;;;AAAS;;;;;;;;;;;;;;;;;;;;;;;;;;cA2CtB,IAAA,EAAI,OAAA,CAAA,oBAAA,CAAA,SAAA"}

package/dist/components/Chip.d.ts

@@ -1,7 +1,7 @@
 
 import { ChipSize, ChipVariant } from "../types/dist/index.js";
 import { IconSlotType } from "./IconSlot.js";
-import * as react from "react";
+import * as _$react from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 
@@ -76,7 +76,7 @@ interface ChipProps extends Omit<ViewProps, 'children'> {
  * @see {@link Badge} for non-interactive status indicators
  * @see {@link Button} for primary actions
  */
-declare const Chip: react.NamedExoticComponent<ChipProps>;
+declare const Chip: _$react.NamedExoticComponent<ChipProps>;
 //#endregion
 export { Chip, type ChipProps };
 //# sourceMappingURL=Chip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","names":[],"sources":["../../src/components/Chip.tsx"],"mappings":";;;;;;;;UAYU,SAAA,SAAkB,IAAA,CAAK,SAAA;;EAE/B,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,OAAA,GAAU,WAAA;;EAEV,IAAA,GAAO,QAAA;EAJG;EAMV,QAAA;EAJU;EAMV,QAAA;EAEY;EAAZ,SAAA,GAAY,YAAA;EAgBD;EAdX,OAAA,GAAU,YAAA;EAdoB;EAgB9B,QAAA;EAhB0B;EAkB1B,OAAA;EAhBA;EAkBA,SAAA;EAlBU;EAoBV,QAAA,IAAY,OAAA;EAlBF;EAoBV,SAAA;EAlBO;EAoBP,sBAAA;EAhBA;EAkBA,QAAA,GAAW,KAAA,CAAM,SAAA;AAAA;;;;;;;;;;;;;;;AAAS;;;;;;;;;;;;;;;;;;;;;;;;;;cA2CtB,IAAA,EAAI,KAAA,CAAA,oBAAA,CAAA,SAAA"}
+{"version":3,"file":"Chip.d.ts","names":[],"sources":["../../src/components/Chip.tsx"],"mappings":";;;;;;;;UAYU,SAAA,SAAkB,IAAA,CAAK,SAAA;;EAE/B,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,OAAA,GAAU,WAAA;;EAEV,IAAA,GAAO,QAAA;EAJG;EAMV,QAAA;EAJU;EAMV,QAAA;EAEY;EAAZ,SAAA,GAAY,YAAA;EAgBD;EAdX,OAAA,GAAU,YAAA;EAdoB;EAgB9B,QAAA;EAhB0B;EAkB1B,OAAA;EAhBA;EAkBA,SAAA;EAlBU;EAoBV,QAAA,IAAY,OAAA;EAlBF;EAoBV,SAAA;EAlBO;EAoBP,sBAAA;EAhBA;EAkBA,QAAA,GAAW,KAAA,CAAM,SAAA;AAAA;;;;;;;;;;;;;;;AAAS;;;;;;;;;;;;;;;;;;;;;;;;;;cA2CtB,IAAA,EAAI,OAAA,CAAA,oBAAA,CAAA,SAAA"}

package/dist/components/Chip.js

@@ -6,7 +6,6 @@ import { Pressable } from "./Pressable.js";
 import { memo, useCallback, useMemo } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { chipStyles } from "../../generated/styles";
-
 //#region src/components/Chip.tsx
 /**
 * **A chip component for selections, filters, or actions**
@@ -134,7 +133,7 @@ const Chip = memo(function Chip({ variant = "primary", size = "md", minWidth, ma
 	});
 });
 Chip.displayName = "Chip";
-
 //#endregion
 export { Chip };
+
 //# sourceMappingURL=Chip.js.map

package/dist/components/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","names":[],"sources":["../../src/components/Chip.tsx"],"sourcesContent":["import type { ChipSize, ChipVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useMemo } from 'react';\nimport type { View, ViewProps } from 'react-native';\n\nimport { chipStyles } from '../../generated/styles';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Pressable } from './Pressable';\nimport { Text } from './Text';\n\ninterface ChipProps extends Omit<ViewProps, 'children'> {\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n  /** The visual style variant @default 'primary' */\n  variant?: ChipVariant;\n  /** The size of the chip @default 'md' */\n  size?: ChipSize;\n  /** Minimum width of the chip in pixels */\n  minWidth?: number;\n  /** Maximum width of the chip in pixels @default 200 */\n  maxWidth?: number;\n  /** Icon displayed at the start of the chip */\n  startIcon?: IconSlotType;\n  /** Icon displayed at the end of the chip */\n  endIcon?: IconSlotType;\n  /** Whether the chip is disabled */\n  disabled?: boolean;\n  /** Called when the chip is pressed. Makes the chip interactive. */\n  onPress?: () => void;\n  /** Whether the chip is toggled/selected. */\n  isToggled?: boolean;\n  /** Called when the chip toggle state changes. */\n  onToggle?: (toggled: boolean) => void;\n  /** Called when the dismiss button is pressed. Shows a dismiss icon. */\n  onDismiss?: () => void;\n  /** Accessibility label for the dismiss button. */\n  dismissButtonAriaLabel?: string;\n  /** Chip label content */\n  children?: React.ReactNode;\n}\n\n/**\n * **A chip component for selections, filters, or actions**\n *\n * @description\n * Chips help people make selections, filter content, or trigger actions.\n * They can be toggleable, dismissible, or simple pressable elements.\n *\n * @category Interactive\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Chip } from '@yahoo/uds-mobile';\n *\n * // Basic chip\n * <Chip>Label</Chip>\n *\n * // Toggle chip\n * <Chip isToggled={selected} onToggle={setSelected}>Filter</Chip>\n *\n * // Dismissible chip\n * <Chip onDismiss={() => removeChip()}>Tag</Chip>\n *\n * // With icons\n * <Chip startIcon=\"Star\" variant=\"brand\">Favorite</Chip>\n * ```\n *\n * @usage\n * - Filters: For multi-select filtering options\n * - Tags: For displaying and removing tags\n * - Actions: For quick contextual actions\n *\n * @accessibility\n * - Toggle chips use `accessibilityRole=\"checkbox\"` with checked state\n * - Action chips use `accessibilityRole=\"button\"`\n * - Dismiss button has customizable `dismissButtonAriaLabel`\n *\n * @see {@link Badge} for non-interactive status indicators\n * @see {@link Button} for primary actions\n */\nconst Chip = memo(function Chip({\n  variant = 'primary',\n  size = 'md',\n  minWidth,\n  maxWidth = 200,\n  startIcon,\n  endIcon,\n  disabled = false,\n  isToggled = false,\n  onPress,\n  onToggle,\n  onDismiss,\n  dismissButtonAriaLabel = 'Dismiss',\n  children,\n  style,\n  ref,\n  ...rest\n}: ChipProps) {\n  const isInteractive = Boolean(onPress || onToggle);\n  const isDismissible = Boolean(onDismiss);\n  const isDisabled = disabled;\n  // Determine which variant type to use for styling\n  const toggleState = isToggled ? 'on' : 'off';\n\n  // Apply layer-based styles\n  // Note: Chip doesn't have disabled variants in theme - handled via opacity\n  // Note: pressed state is applied dynamically via Pressable's style callback\n  chipStyles.useVariants({\n    size,\n    link: variant,\n    dismissible: variant,\n    toggle: toggleState,\n  });\n\n  const handlePress = useCallback(() => {\n    if (isDisabled) {\n      return;\n    }\n\n    if (onToggle) {\n      onToggle(!isToggled);\n    } else if (onPress) {\n      onPress();\n    }\n  }, [isDisabled, onToggle, isToggled, onPress]);\n\n  const handleDismiss = useCallback(() => {\n    if (isDisabled) {\n      return;\n    }\n    onDismiss?.();\n  }, [isDisabled, onDismiss]);\n\n  const content = (\n    <>\n      {startIcon && <IconSlot icon={startIcon} variant=\"fill\" style={chipStyles.icon} />}\n      <Text numberOfLines={1} textAlign=\"center\" flexShrink=\"1\" style={chipStyles.text}>\n        {children}\n      </Text>\n      {isDismissible ? (\n        <Pressable\n          onPress={isDisabled ? undefined : handleDismiss}\n          disabled={isDisabled}\n          accessibilityLabel={dismissButtonAriaLabel}\n          accessibilityRole=\"button\"\n        >\n          <IconSlot icon={endIcon ?? 'Cross'} variant=\"fill\" style={chipStyles.icon} />\n        </Pressable>\n      ) : (\n        endIcon && <IconSlot icon={endIcon} variant=\"fill\" style={chipStyles.icon} />\n      )}\n    </>\n  );\n\n  const a11yState = {\n    disabled: isDisabled,\n    checked: onToggle ? isToggled : undefined,\n  };\n\n  const rootStyles = useMemo(() => [chipStyles.root, style], [chipStyles.root, style]);\n  const sharedProps = {\n    ref,\n    style: rootStyles,\n    flexDirection: 'row',\n    alignItems: 'center',\n    overflow: 'hidden',\n    alignSelf: 'flex-start',\n    maxWidth,\n    minWidth,\n    disabled: isDisabled,\n    opacity: isDisabled ? 0.5 : undefined,\n    accessibilityState: a11yState,\n    ...rest,\n  } as const;\n\n  // Interactive chip (toggle or button)\n  if (isInteractive) {\n    return (\n      <Pressable\n        onPress={handlePress}\n        accessibilityRole={onToggle ? 'checkbox' : 'button'}\n        {...sharedProps}\n      >\n        {content}\n      </Pressable>\n    );\n  }\n\n  // Non-interactive chip (display only or dismissible)\n  return (\n    <HStack accessibilityRole={isDismissible ? 'button' : undefined} {...sharedProps} {...rest}>\n      {content}\n    </HStack>\n  );\n});\n\nChip.displayName = 'Chip';\n\nexport { Chip, type ChipProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmFA,MAAM,OAAO,KAAK,SAAS,KAAK,EAC9B,UAAU,WACV,OAAO,MACP,UACA,WAAW,KACX,WACA,SACA,WAAW,OACX,YAAY,OACZ,SACA,UACA,WACA,yBAAyB,WACzB,UACA,OACA,KACA,GAAG,QACS;CACZ,MAAM,gBAAgB,QAAQ,WAAW,SAAS;CAClD,MAAM,gBAAgB,QAAQ,UAAU;CACxC,MAAM,aAAa;CAEnB,MAAM,cAAc,YAAY,OAAO;AAKvC,YAAW,YAAY;EACrB;EACA,MAAM;EACN,aAAa;EACb,QAAQ;EACT,CAAC;CAEF,MAAM,cAAc,kBAAkB;AACpC,MAAI,WACF;AAGF,MAAI,SACF,UAAS,CAAC,UAAU;WACX,QACT,UAAS;IAEV;EAAC;EAAY;EAAU;EAAW;EAAQ,CAAC;CAE9C,MAAM,gBAAgB,kBAAkB;AACtC,MAAI,WACF;AAEF,eAAa;IACZ,CAAC,YAAY,UAAU,CAAC;CAE3B,MAAM,UACJ;EACG,aAAa,oBAAC;GAAS,MAAM;GAAW,SAAQ;GAAO,OAAO,WAAW;IAAQ;EAClF,oBAAC;GAAK,eAAe;GAAG,WAAU;GAAS,YAAW;GAAI,OAAO,WAAW;GACzE;IACI;EACN,gBACC,oBAAC;GACC,SAAS,aAAa,SAAY;GAClC,UAAU;GACV,oBAAoB;GACpB,mBAAkB;aAElB,oBAAC;IAAS,MAAM,WAAW;IAAS,SAAQ;IAAO,OAAO,WAAW;KAAQ;IACnE,GAEZ,WAAW,oBAAC;GAAS,MAAM;GAAS,SAAQ;GAAO,OAAO,WAAW;IAAQ;KAE9E;CAGL,MAAM,YAAY;EAChB,UAAU;EACV,SAAS,WAAW,YAAY;EACjC;CAGD,MAAM,cAAc;EAClB;EACA,OAHiB,cAAc,CAAC,WAAW,MAAM,MAAM,EAAE,CAAC,WAAW,MAAM,MAAM,CAAC;EAIlF,eAAe;EACf,YAAY;EACZ,UAAU;EACV,WAAW;EACX;EACA;EACA,UAAU;EACV,SAAS,aAAa,KAAM;EAC5B,oBAAoB;EACpB,GAAG;EACJ;AAGD,KAAI,cACF,QACE,oBAAC;EACC,SAAS;EACT,mBAAmB,WAAW,aAAa;EAC3C,GAAI;YAEH;GACS;AAKhB,QACE,oBAAC;EAAO,mBAAmB,gBAAgB,WAAW;EAAW,GAAI;EAAa,GAAI;YACnF;GACM;EAEX;AAEF,KAAK,cAAc"}
+{"version":3,"file":"Chip.js","names":[],"sources":["../../src/components/Chip.tsx"],"sourcesContent":["import type { ChipSize, ChipVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useMemo } from 'react';\nimport type { View, ViewProps } from 'react-native';\n\nimport { chipStyles } from '../../generated/styles';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Pressable } from './Pressable';\nimport { Text } from './Text';\n\ninterface ChipProps extends Omit<ViewProps, 'children'> {\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n  /** The visual style variant @default 'primary' */\n  variant?: ChipVariant;\n  /** The size of the chip @default 'md' */\n  size?: ChipSize;\n  /** Minimum width of the chip in pixels */\n  minWidth?: number;\n  /** Maximum width of the chip in pixels @default 200 */\n  maxWidth?: number;\n  /** Icon displayed at the start of the chip */\n  startIcon?: IconSlotType;\n  /** Icon displayed at the end of the chip */\n  endIcon?: IconSlotType;\n  /** Whether the chip is disabled */\n  disabled?: boolean;\n  /** Called when the chip is pressed. Makes the chip interactive. */\n  onPress?: () => void;\n  /** Whether the chip is toggled/selected. */\n  isToggled?: boolean;\n  /** Called when the chip toggle state changes. */\n  onToggle?: (toggled: boolean) => void;\n  /** Called when the dismiss button is pressed. Shows a dismiss icon. */\n  onDismiss?: () => void;\n  /** Accessibility label for the dismiss button. */\n  dismissButtonAriaLabel?: string;\n  /** Chip label content */\n  children?: React.ReactNode;\n}\n\n/**\n * **A chip component for selections, filters, or actions**\n *\n * @description\n * Chips help people make selections, filter content, or trigger actions.\n * They can be toggleable, dismissible, or simple pressable elements.\n *\n * @category Interactive\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Chip } from '@yahoo/uds-mobile';\n *\n * // Basic chip\n * <Chip>Label</Chip>\n *\n * // Toggle chip\n * <Chip isToggled={selected} onToggle={setSelected}>Filter</Chip>\n *\n * // Dismissible chip\n * <Chip onDismiss={() => removeChip()}>Tag</Chip>\n *\n * // With icons\n * <Chip startIcon=\"Star\" variant=\"brand\">Favorite</Chip>\n * ```\n *\n * @usage\n * - Filters: For multi-select filtering options\n * - Tags: For displaying and removing tags\n * - Actions: For quick contextual actions\n *\n * @accessibility\n * - Toggle chips use `accessibilityRole=\"checkbox\"` with checked state\n * - Action chips use `accessibilityRole=\"button\"`\n * - Dismiss button has customizable `dismissButtonAriaLabel`\n *\n * @see {@link Badge} for non-interactive status indicators\n * @see {@link Button} for primary actions\n */\nconst Chip = memo(function Chip({\n  variant = 'primary',\n  size = 'md',\n  minWidth,\n  maxWidth = 200,\n  startIcon,\n  endIcon,\n  disabled = false,\n  isToggled = false,\n  onPress,\n  onToggle,\n  onDismiss,\n  dismissButtonAriaLabel = 'Dismiss',\n  children,\n  style,\n  ref,\n  ...rest\n}: ChipProps) {\n  const isInteractive = Boolean(onPress || onToggle);\n  const isDismissible = Boolean(onDismiss);\n  const isDisabled = disabled;\n  // Determine which variant type to use for styling\n  const toggleState = isToggled ? 'on' : 'off';\n\n  // Apply layer-based styles\n  // Note: Chip doesn't have disabled variants in theme - handled via opacity\n  // Note: pressed state is applied dynamically via Pressable's style callback\n  chipStyles.useVariants({\n    size,\n    link: variant,\n    dismissible: variant,\n    toggle: toggleState,\n  });\n\n  const handlePress = useCallback(() => {\n    if (isDisabled) {\n      return;\n    }\n\n    if (onToggle) {\n      onToggle(!isToggled);\n    } else if (onPress) {\n      onPress();\n    }\n  }, [isDisabled, onToggle, isToggled, onPress]);\n\n  const handleDismiss = useCallback(() => {\n    if (isDisabled) {\n      return;\n    }\n    onDismiss?.();\n  }, [isDisabled, onDismiss]);\n\n  const content = (\n    <>\n      {startIcon && <IconSlot icon={startIcon} variant=\"fill\" style={chipStyles.icon} />}\n      <Text numberOfLines={1} textAlign=\"center\" flexShrink=\"1\" style={chipStyles.text}>\n        {children}\n      </Text>\n      {isDismissible ? (\n        <Pressable\n          onPress={isDisabled ? undefined : handleDismiss}\n          disabled={isDisabled}\n          accessibilityLabel={dismissButtonAriaLabel}\n          accessibilityRole=\"button\"\n        >\n          <IconSlot icon={endIcon ?? 'Cross'} variant=\"fill\" style={chipStyles.icon} />\n        </Pressable>\n      ) : (\n        endIcon && <IconSlot icon={endIcon} variant=\"fill\" style={chipStyles.icon} />\n      )}\n    </>\n  );\n\n  const a11yState = {\n    disabled: isDisabled,\n    checked: onToggle ? isToggled : undefined,\n  };\n\n  const rootStyles = useMemo(() => [chipStyles.root, style], [chipStyles.root, style]);\n  const sharedProps = {\n    ref,\n    style: rootStyles,\n    flexDirection: 'row',\n    alignItems: 'center',\n    overflow: 'hidden',\n    alignSelf: 'flex-start',\n    maxWidth,\n    minWidth,\n    disabled: isDisabled,\n    opacity: isDisabled ? 0.5 : undefined,\n    accessibilityState: a11yState,\n    ...rest,\n  } as const;\n\n  // Interactive chip (toggle or button)\n  if (isInteractive) {\n    return (\n      <Pressable\n        onPress={handlePress}\n        accessibilityRole={onToggle ? 'checkbox' : 'button'}\n        {...sharedProps}\n      >\n        {content}\n      </Pressable>\n    );\n  }\n\n  // Non-interactive chip (display only or dismissible)\n  return (\n    <HStack accessibilityRole={isDismissible ? 'button' : undefined} {...sharedProps} {...rest}>\n      {content}\n    </HStack>\n  );\n});\n\nChip.displayName = 'Chip';\n\nexport { Chip, type ChipProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmFA,MAAM,OAAO,KAAK,SAAS,KAAK,EAC9B,UAAU,WACV,OAAO,MACP,UACA,WAAW,KACX,WACA,SACA,WAAW,OACX,YAAY,OACZ,SACA,UACA,WACA,yBAAyB,WACzB,UACA,OACA,KACA,GAAG,QACS;CACZ,MAAM,gBAAgB,QAAQ,WAAW,SAAS;CAClD,MAAM,gBAAgB,QAAQ,UAAU;CACxC,MAAM,aAAa;CAEnB,MAAM,cAAc,YAAY,OAAO;AAKvC,YAAW,YAAY;EACrB;EACA,MAAM;EACN,aAAa;EACb,QAAQ;EACT,CAAC;CAEF,MAAM,cAAc,kBAAkB;AACpC,MAAI,WACF;AAGF,MAAI,SACF,UAAS,CAAC,UAAU;WACX,QACT,UAAS;IAEV;EAAC;EAAY;EAAU;EAAW;EAAQ,CAAC;CAE9C,MAAM,gBAAgB,kBAAkB;AACtC,MAAI,WACF;AAEF,eAAa;IACZ,CAAC,YAAY,UAAU,CAAC;CAE3B,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA;EACG,aAAa,oBAAC,UAAD;GAAU,MAAM;GAAW,SAAQ;GAAO,OAAO,WAAW;GAAQ,CAAA;EAClF,oBAAC,MAAD;GAAM,eAAe;GAAG,WAAU;GAAS,YAAW;GAAI,OAAO,WAAW;GACzE;GACI,CAAA;EACN,gBACC,oBAAC,WAAD;GACE,SAAS,aAAa,KAAA,IAAY;GAClC,UAAU;GACV,oBAAoB;GACpB,mBAAkB;aAElB,oBAAC,UAAD;IAAU,MAAM,WAAW;IAAS,SAAQ;IAAO,OAAO,WAAW;IAAQ,CAAA;GACnE,CAAA,GAEZ,WAAW,oBAAC,UAAD;GAAU,MAAM;GAAS,SAAQ;GAAO,OAAO,WAAW;GAAQ,CAAA;EAE9E,EAAA,CAAA;CAGL,MAAM,YAAY;EAChB,UAAU;EACV,SAAS,WAAW,YAAY,KAAA;EACjC;CAGD,MAAM,cAAc;EAClB;EACA,OAHiB,cAAc,CAAC,WAAW,MAAM,MAAM,EAAE,CAAC,WAAW,MAAM,MAAM,CAGhE;EACjB,eAAe;EACf,YAAY;EACZ,UAAU;EACV,WAAW;EACX;EACA;EACA,UAAU;EACV,SAAS,aAAa,KAAM,KAAA;EAC5B,oBAAoB;EACpB,GAAG;EACJ;AAGD,KAAI,cACF,QACE,oBAAC,WAAD;EACE,SAAS;EACT,mBAAmB,WAAW,aAAa;EAC3C,GAAI;YAEH;EACS,CAAA;AAKhB,QACE,oBAAC,QAAD;EAAQ,mBAAmB,gBAAgB,WAAW,KAAA;EAAW,GAAI;EAAa,GAAI;YACnF;EACM,CAAA;EAEX;AAEF,KAAK,cAAc"}

package/dist/components/HStack.cjs

@@ -1,10 +1,9 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
-const require_components_Box = require('./Box.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../_virtual/_rolldown/runtime.cjs");
+const require_components_Box = require("./Box.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/components/HStack.tsx
 /**
 * **📦 A horizontal stack layout component**
@@ -44,6 +43,5 @@ const HStack = (0, react.memo)(function HStack({ gap, children, ref, ...props })
 	});
 });
 HStack.displayName = "HStack";
-
 //#endregion
-exports.HStack = HStack;
+exports.HStack = HStack;