@yahoo/uds-mobile 2.9.0 → 2.11.0

package/dist/components/Pressable.d.cts

@@ -71,7 +71,7 @@ interface PressableProps extends PressableProps$1, SizeProps {
  *
  * @example
  * ```tsx
- * import { Pressable } from '@yahoo/uds-mobile';
+ * import { Pressable } from '@yahoo/uds-mobile/Pressable';
  *
  * <Pressable
  *   backgroundColor="primary"

package/dist/components/Pressable.d.ts

@@ -71,7 +71,7 @@ interface PressableProps extends PressableProps$1, SizeProps {
  *
  * @example
  * ```tsx
- * import { Pressable } from '@yahoo/uds-mobile';
+ * import { Pressable } from '@yahoo/uds-mobile/Pressable';
  *
  * <Pressable
  *   backgroundColor="primary"

package/dist/components/Pressable.js

@@ -18,7 +18,7 @@ import Animated from "react-native-reanimated";
 *
 * @example
 * ```tsx
-* import { Pressable } from '@yahoo/uds-mobile';
+* import { Pressable } from '@yahoo/uds-mobile/Pressable';
 *
 * <Pressable
 *   backgroundColor="primary"

package/dist/components/Pressable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pressable.js","names":["RNPressable"],"sources":["../../src/components/Pressable.tsx"],"sourcesContent":["import type { Ref } from 'react';\nimport { memo, useCallback } from 'react';\nimport type {\n  PressableProps as RNPressableProps,\n  PressableStateCallbackType,\n  StyleProp,\n  View,\n  ViewStyle,\n} from 'react-native';\nimport { Pressable as RNPressable } from 'react-native';\nimport Animated from 'react-native-reanimated';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\nimport type { SizeProps } from '../types';\n\ninterface PressableProps extends RNPressableProps, SizeProps {\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n  /** Background color */\n  backgroundColor?: StyleProps['backgroundColor'];\n  // Border\n  borderRadius?: StyleProps['borderRadius'];\n  borderTopStartRadius?: StyleProps['borderTopStartRadius'];\n  borderTopEndRadius?: StyleProps['borderTopEndRadius'];\n  borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];\n  borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];\n  borderColor?: StyleProps['borderColor'];\n  borderStartColor?: StyleProps['borderStartColor'];\n  borderEndColor?: StyleProps['borderEndColor'];\n  borderTopColor?: StyleProps['borderTopColor'];\n  borderBottomColor?: StyleProps['borderBottomColor'];\n  borderWidth?: StyleProps['borderWidth'];\n  borderVerticalWidth?: StyleProps['borderVerticalWidth'];\n  borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];\n  borderStartWidth?: StyleProps['borderStartWidth'];\n  borderEndWidth?: StyleProps['borderEndWidth'];\n  borderTopWidth?: StyleProps['borderTopWidth'];\n  borderBottomWidth?: StyleProps['borderBottomWidth'];\n  // Flex\n  alignContent?: StyleProps['alignContent'];\n  alignItems?: StyleProps['alignItems'];\n  alignSelf?: StyleProps['alignSelf'];\n  flex?: StyleProps['flex'];\n  flexDirection?: StyleProps['flexDirection'];\n  flexGrow?: StyleProps['flexGrow'];\n  flexShrink?: StyleProps['flexShrink'];\n  flexWrap?: StyleProps['flexWrap'];\n  justifyContent?: StyleProps['justifyContent'];\n  // Layout\n  display?: StyleProps['display'];\n  overflow?: StyleProps['overflow'];\n  // Spacing\n  spacing?: StyleProps['spacing'];\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  spacingVertical?: StyleProps['spacingVertical'];\n  spacingBottom?: StyleProps['spacingBottom'];\n  spacingEnd?: StyleProps['spacingEnd'];\n  spacingStart?: StyleProps['spacingStart'];\n  spacingTop?: StyleProps['spacingTop'];\n  // Offset\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  // Gap\n  columnGap?: StyleProps['columnGap'];\n  rowGap?: StyleProps['rowGap'];\n  // Opacity\n  opacity?: number;\n}\n\n/**\n * **👆 A pressable component with UDS styling**\n *\n * @description\n * A styled pressable component that wraps React Native's Pressable with\n * UDS styling support. Use this as a building block for custom interactive\n * components.\n *\n * @category Interactive\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Pressable } from '@yahoo/uds-mobile';\n *\n * <Pressable\n *   backgroundColor=\"primary\"\n *   spacing=\"4\"\n *   borderRadius=\"md\"\n *   onPress={() => console.log('Pressed!')}\n * >\n *   <Text>Press me</Text>\n * </Pressable>\n * ```\n *\n * @usage\n * - Use for interactive elements that need press feedback\n * - Use for custom button-like components\n * - Supports all Box styling props\n *\n * @accessibility\n * - Set `accessibilityRole` appropriate to the component's purpose\n * - Provide `accessibilityLabel` for screen readers\n * - Use `accessibilityState` to communicate state changes\n *\n * @see {@link Button} for standard button actions\n * @see {@link Box} for non-interactive containers\n */\nconst Pressable = memo(function Pressable({\n  // Background\n  backgroundColor,\n  // Border\n  borderRadius,\n  borderTopStartRadius,\n  borderTopEndRadius,\n  borderBottomStartRadius,\n  borderBottomEndRadius,\n  borderColor,\n  borderStartColor,\n  borderEndColor,\n  borderTopColor,\n  borderBottomColor,\n  borderWidth,\n  borderVerticalWidth,\n  borderHorizontalWidth,\n  borderStartWidth,\n  borderEndWidth,\n  borderTopWidth,\n  borderBottomWidth,\n  // Flex\n  alignContent,\n  alignItems,\n  alignSelf,\n  flex,\n  flexDirection,\n  flexGrow,\n  flexShrink,\n  flexWrap,\n  justifyContent,\n  // Layout\n  display = 'flex',\n  overflow,\n  // Spacing\n  spacing,\n  spacingHorizontal,\n  spacingVertical,\n  spacingBottom,\n  spacingEnd,\n  spacingStart,\n  spacingTop,\n  // Offset\n  offset,\n  offsetVertical,\n  offsetHorizontal,\n  offsetBottom,\n  offsetEnd,\n  offsetStart,\n  offsetTop,\n  // Gap\n  columnGap,\n  rowGap,\n  // Size\n  width,\n  height,\n  minWidth,\n  maxWidth,\n  minHeight,\n  maxHeight,\n  // Opacity\n  opacity,\n  // Style - extracted to merge with variants\n  style,\n  ref,\n  // Rest\n  ...props\n}: PressableProps) {\n  styles.useVariants({\n    // Background\n    backgroundColor,\n    // Border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    borderColor,\n    borderStartColor,\n    borderEndColor,\n    borderTopColor,\n    borderBottomColor,\n    borderWidth,\n    borderVerticalWidth,\n    borderHorizontalWidth,\n    borderStartWidth,\n    borderEndWidth,\n    borderTopWidth,\n    borderBottomWidth,\n    // Flex\n    alignContent,\n    alignItems,\n    alignSelf,\n    flex,\n    flexDirection,\n    flexGrow,\n    flexShrink,\n    flexWrap,\n    justifyContent,\n    // Layout\n    display,\n    overflow,\n    // Spacing\n    spacing,\n    spacingHorizontal,\n    spacingVertical,\n    spacingBottom,\n    spacingEnd,\n    spacingStart,\n    spacingTop,\n    // Offset\n    offset,\n    offsetVertical,\n    offsetHorizontal,\n    offsetBottom,\n    offsetEnd,\n    offsetStart,\n    offsetTop,\n    // Gap\n    columnGap,\n    rowGap,\n  });\n\n  // Merge variant styles with user-provided style prop\n  // Handle the case where style can be a function (for press states)\n  const pressableStyles = useCallback(\n    (state: PressableStateCallbackType) => {\n      const userStyle = typeof style === 'function' ? style(state) : style;\n      return [\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        opacity ? { opacity } : undefined,\n        styles.foundation as StyleProp<ViewStyle>,\n        userStyle,\n      ];\n    },\n    [width, height, minWidth, maxWidth, minHeight, maxHeight, opacity, style, styles.foundation],\n  );\n\n  return <RNPressable ref={ref} style={pressableStyles} {...props} />;\n});\n\nPressable.displayName = 'Pressable';\n\nconst AnimatedPressable = Animated.createAnimatedComponent(Pressable);\n\nexport { AnimatedPressable, Pressable, type PressableProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiHA,MAAM,YAAY,KAAK,SAAS,UAAU,EAExC,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,cACA,YACA,WACA,MACA,eACA,UACA,YACA,UACA,gBAEA,UAAU,QACV,UAEA,SACA,mBACA,iBACA,eACA,YACA,cACA,YAEA,QACA,gBACA,kBACA,cACA,WACA,aACA,WAEA,WACA,QAEA,OACA,QACA,UACA,UACA,WACA,WAEA,SAEA,OACA,KAEA,GAAG,SACc;AACjB,QAAO,YAAY;EAEjB;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACD,CAAC;AAsBF,QAAO,oBAACA,aAAD;EAAkB;EAAK,OAlBN,aACrB,UAAsC;GACrC,MAAM,YAAY,OAAO,UAAU,aAAa,MAAM,MAAM,GAAG;AAC/D,UAAO;IACL,QAAQ,EAAE,OAAO,GAAG,KAAA;IACpB,SAAS,EAAE,QAAQ,GAAG,KAAA;IACtB,WAAW,EAAE,UAAU,GAAG,KAAA;IAC1B,WAAW,EAAE,UAAU,GAAG,KAAA;IAC1B,YAAY,EAAE,WAAW,GAAG,KAAA;IAC5B,YAAY,EAAE,WAAW,GAAG,KAAA;IAC5B,UAAU,EAAE,SAAS,GAAG,KAAA;IACxB,OAAO;IACP;IACD;KAEH;GAAC;GAAO;GAAQ;GAAU;GAAU;GAAW;GAAW;GAAS;GAAO,OAAO;GAAW,CAG1C;EAAE,GAAI;EAAS,CAAA;EACnE;AAEF,UAAU,cAAc;AAExB,MAAM,oBAAoB,SAAS,wBAAwB,UAAU"}
+{"version":3,"file":"Pressable.js","names":["RNPressable"],"sources":["../../src/components/Pressable.tsx"],"sourcesContent":["import type { Ref } from 'react';\nimport { memo, useCallback } from 'react';\nimport type {\n  PressableProps as RNPressableProps,\n  PressableStateCallbackType,\n  StyleProp,\n  View,\n  ViewStyle,\n} from 'react-native';\nimport { Pressable as RNPressable } from 'react-native';\nimport Animated from 'react-native-reanimated';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\nimport type { SizeProps } from '../types';\n\ninterface PressableProps extends RNPressableProps, SizeProps {\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n  /** Background color */\n  backgroundColor?: StyleProps['backgroundColor'];\n  // Border\n  borderRadius?: StyleProps['borderRadius'];\n  borderTopStartRadius?: StyleProps['borderTopStartRadius'];\n  borderTopEndRadius?: StyleProps['borderTopEndRadius'];\n  borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];\n  borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];\n  borderColor?: StyleProps['borderColor'];\n  borderStartColor?: StyleProps['borderStartColor'];\n  borderEndColor?: StyleProps['borderEndColor'];\n  borderTopColor?: StyleProps['borderTopColor'];\n  borderBottomColor?: StyleProps['borderBottomColor'];\n  borderWidth?: StyleProps['borderWidth'];\n  borderVerticalWidth?: StyleProps['borderVerticalWidth'];\n  borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];\n  borderStartWidth?: StyleProps['borderStartWidth'];\n  borderEndWidth?: StyleProps['borderEndWidth'];\n  borderTopWidth?: StyleProps['borderTopWidth'];\n  borderBottomWidth?: StyleProps['borderBottomWidth'];\n  // Flex\n  alignContent?: StyleProps['alignContent'];\n  alignItems?: StyleProps['alignItems'];\n  alignSelf?: StyleProps['alignSelf'];\n  flex?: StyleProps['flex'];\n  flexDirection?: StyleProps['flexDirection'];\n  flexGrow?: StyleProps['flexGrow'];\n  flexShrink?: StyleProps['flexShrink'];\n  flexWrap?: StyleProps['flexWrap'];\n  justifyContent?: StyleProps['justifyContent'];\n  // Layout\n  display?: StyleProps['display'];\n  overflow?: StyleProps['overflow'];\n  // Spacing\n  spacing?: StyleProps['spacing'];\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  spacingVertical?: StyleProps['spacingVertical'];\n  spacingBottom?: StyleProps['spacingBottom'];\n  spacingEnd?: StyleProps['spacingEnd'];\n  spacingStart?: StyleProps['spacingStart'];\n  spacingTop?: StyleProps['spacingTop'];\n  // Offset\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  // Gap\n  columnGap?: StyleProps['columnGap'];\n  rowGap?: StyleProps['rowGap'];\n  // Opacity\n  opacity?: number;\n}\n\n/**\n * **👆 A pressable component with UDS styling**\n *\n * @description\n * A styled pressable component that wraps React Native's Pressable with\n * UDS styling support. Use this as a building block for custom interactive\n * components.\n *\n * @category Interactive\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Pressable } from '@yahoo/uds-mobile/Pressable';\n *\n * <Pressable\n *   backgroundColor=\"primary\"\n *   spacing=\"4\"\n *   borderRadius=\"md\"\n *   onPress={() => console.log('Pressed!')}\n * >\n *   <Text>Press me</Text>\n * </Pressable>\n * ```\n *\n * @usage\n * - Use for interactive elements that need press feedback\n * - Use for custom button-like components\n * - Supports all Box styling props\n *\n * @accessibility\n * - Set `accessibilityRole` appropriate to the component's purpose\n * - Provide `accessibilityLabel` for screen readers\n * - Use `accessibilityState` to communicate state changes\n *\n * @see {@link Button} for standard button actions\n * @see {@link Box} for non-interactive containers\n */\nconst Pressable = memo(function Pressable({\n  // Background\n  backgroundColor,\n  // Border\n  borderRadius,\n  borderTopStartRadius,\n  borderTopEndRadius,\n  borderBottomStartRadius,\n  borderBottomEndRadius,\n  borderColor,\n  borderStartColor,\n  borderEndColor,\n  borderTopColor,\n  borderBottomColor,\n  borderWidth,\n  borderVerticalWidth,\n  borderHorizontalWidth,\n  borderStartWidth,\n  borderEndWidth,\n  borderTopWidth,\n  borderBottomWidth,\n  // Flex\n  alignContent,\n  alignItems,\n  alignSelf,\n  flex,\n  flexDirection,\n  flexGrow,\n  flexShrink,\n  flexWrap,\n  justifyContent,\n  // Layout\n  display = 'flex',\n  overflow,\n  // Spacing\n  spacing,\n  spacingHorizontal,\n  spacingVertical,\n  spacingBottom,\n  spacingEnd,\n  spacingStart,\n  spacingTop,\n  // Offset\n  offset,\n  offsetVertical,\n  offsetHorizontal,\n  offsetBottom,\n  offsetEnd,\n  offsetStart,\n  offsetTop,\n  // Gap\n  columnGap,\n  rowGap,\n  // Size\n  width,\n  height,\n  minWidth,\n  maxWidth,\n  minHeight,\n  maxHeight,\n  // Opacity\n  opacity,\n  // Style - extracted to merge with variants\n  style,\n  ref,\n  // Rest\n  ...props\n}: PressableProps) {\n  styles.useVariants({\n    // Background\n    backgroundColor,\n    // Border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    borderColor,\n    borderStartColor,\n    borderEndColor,\n    borderTopColor,\n    borderBottomColor,\n    borderWidth,\n    borderVerticalWidth,\n    borderHorizontalWidth,\n    borderStartWidth,\n    borderEndWidth,\n    borderTopWidth,\n    borderBottomWidth,\n    // Flex\n    alignContent,\n    alignItems,\n    alignSelf,\n    flex,\n    flexDirection,\n    flexGrow,\n    flexShrink,\n    flexWrap,\n    justifyContent,\n    // Layout\n    display,\n    overflow,\n    // Spacing\n    spacing,\n    spacingHorizontal,\n    spacingVertical,\n    spacingBottom,\n    spacingEnd,\n    spacingStart,\n    spacingTop,\n    // Offset\n    offset,\n    offsetVertical,\n    offsetHorizontal,\n    offsetBottom,\n    offsetEnd,\n    offsetStart,\n    offsetTop,\n    // Gap\n    columnGap,\n    rowGap,\n  });\n\n  // Merge variant styles with user-provided style prop\n  // Handle the case where style can be a function (for press states)\n  const pressableStyles = useCallback(\n    (state: PressableStateCallbackType) => {\n      const userStyle = typeof style === 'function' ? style(state) : style;\n      return [\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        opacity ? { opacity } : undefined,\n        styles.foundation as StyleProp<ViewStyle>,\n        userStyle,\n      ];\n    },\n    [width, height, minWidth, maxWidth, minHeight, maxHeight, opacity, style, styles.foundation],\n  );\n\n  return <RNPressable ref={ref} style={pressableStyles} {...props} />;\n});\n\nPressable.displayName = 'Pressable';\n\nconst AnimatedPressable = Animated.createAnimatedComponent(Pressable);\n\nexport { AnimatedPressable, Pressable, type PressableProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiHA,MAAM,YAAY,KAAK,SAAS,UAAU,EAExC,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,cACA,YACA,WACA,MACA,eACA,UACA,YACA,UACA,gBAEA,UAAU,QACV,UAEA,SACA,mBACA,iBACA,eACA,YACA,cACA,YAEA,QACA,gBACA,kBACA,cACA,WACA,aACA,WAEA,WACA,QAEA,OACA,QACA,UACA,UACA,WACA,WAEA,SAEA,OACA,KAEA,GAAG,SACc;AACjB,QAAO,YAAY;EAEjB;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACD,CAAC;AAsBF,QAAO,oBAACA,aAAD;EAAkB;EAAK,OAlBN,aACrB,UAAsC;GACrC,MAAM,YAAY,OAAO,UAAU,aAAa,MAAM,MAAM,GAAG;AAC/D,UAAO;IACL,QAAQ,EAAE,OAAO,GAAG,KAAA;IACpB,SAAS,EAAE,QAAQ,GAAG,KAAA;IACtB,WAAW,EAAE,UAAU,GAAG,KAAA;IAC1B,WAAW,EAAE,UAAU,GAAG,KAAA;IAC1B,YAAY,EAAE,WAAW,GAAG,KAAA;IAC5B,YAAY,EAAE,WAAW,GAAG,KAAA;IAC5B,UAAU,EAAE,SAAS,GAAG,KAAA;IACxB,OAAO;IACP;IACD;KAEH;GAAC;GAAO;GAAQ;GAAU;GAAU;GAAW;GAAW;GAAS;GAAO,OAAO;GAAW,CAG1C;EAAE,GAAI;EAAS,CAAA;EACnE;AAEF,UAAU,cAAc;AAExB,MAAM,oBAAoB,SAAS,wBAAwB,UAAU"}

package/dist/components/Radio.cjs

@@ -30,7 +30,7 @@ const VARIANT_ERROR_MAP = {
 *
 * @example
 * ```tsx
-* import { Radio } from '@yahoo/uds-mobile';
+* import { Radio } from '@yahoo/uds-mobile/Radio';
 *
 * <Radio label="Option A" />
 * <Radio label="Option B" checked={true} onChange={setChecked} />

package/dist/components/Radio.d.cts

@@ -30,7 +30,7 @@ interface RadioProps extends Omit<ViewProps, 'style'>, UniversalRadioProps {
  *
  * @example
  * ```tsx
- * import { Radio } from '@yahoo/uds-mobile';
+ * import { Radio } from '@yahoo/uds-mobile/Radio';
  *
  * <Radio label="Option A" />
  * <Radio label="Option B" checked={true} onChange={setChecked} />

package/dist/components/Radio.d.ts

@@ -30,7 +30,7 @@ interface RadioProps extends Omit<ViewProps, 'style'>, UniversalRadioProps {
  *
  * @example
  * ```tsx
- * import { Radio } from '@yahoo/uds-mobile';
+ * import { Radio } from '@yahoo/uds-mobile/Radio';
  *
  * <Radio label="Option A" />
  * <Radio label="Option B" checked={true} onChange={setChecked} />

package/dist/components/Radio.js

@@ -27,7 +27,7 @@ const VARIANT_ERROR_MAP = {
 *
 * @example
 * ```tsx
-* import { Radio } from '@yahoo/uds-mobile';
+* import { Radio } from '@yahoo/uds-mobile/Radio';
 *
 * <Radio label="Option A" />
 * <Radio label="Option B" checked={true} onChange={setChecked} />

package/dist/components/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["Text","Pressable"],"sources":["../../src/components/Radio.tsx"],"sourcesContent":["import type { RadioVariant, UniversalRadioProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { isValidElement, memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { View } from 'react-native';\nimport Animated, { useAnimatedStyle, useDerivedValue, withSpring } from 'react-native-reanimated';\n\nimport { radioStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { HStack } from './HStack';\nimport { Pressable } from './Pressable';\nimport { Text } from './Text';\n\n/* -------------------------------------------------------------------------- */\n/*                                   Types                                    */\n/* -------------------------------------------------------------------------- */\n\n/** Derived from RadioValue - maps boolean to 'checked'/'unchecked' string literals */\ntype RadioValueState = 'checked' | 'unchecked';\n\ninterface RadioProps extends Omit<ViewProps, 'style'>, UniversalRadioProps {\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n  /** Default checked state for uncontrolled mode */\n  defaultChecked?: boolean;\n  /** Whether the radio is disabled */\n  disabled?: boolean;\n  /** Whether the radio 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 RadioStyleVariant = 'primary' | 'secondary' | 'alert' | 'alert-secondary';\n\nconst VARIANT_ERROR_MAP: Record<RadioVariant, RadioStyleVariant> = {\n  primary: 'alert',\n  secondary: 'alert-secondary',\n};\n\n/* -------------------------------------------------------------------------- */\n/*                              Radio Component                                */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **⚙️ A radio component**\n *\n * @description\n * A radio component allows users to select one option from a set.\n * Unlike checkbox, radio buttons cannot have multiple selected in a group,\n * allowing only one selection at a time.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Radio } from '@yahoo/uds-mobile';\n *\n * <Radio label=\"Option A\" />\n * <Radio label=\"Option B\" checked={true} onChange={setChecked} />\n * ```\n *\n * @usage\n * - Forms: For selecting a single option from multiple choices\n * - Settings: For toggling between mutually exclusive preferences\n *\n * @accessibility\n * - Sets `accessibilityRole=\"radio\"` automatically\n * - Announces checked/unchecked state\n * - Label is used as accessibility label\n * - Supports `reduceMotion` for users who prefer reduced motion\n *\n * @see {@link Checkbox} for multi-select options\n * @see {@link Switch} for binary toggles\n */\nconst Radio = memo(function Radio({\n  // Radio 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}: RadioProps) {\n  const generatedId = useId();\n  const uid = `uds-radio-${generatedId}`;\n\n  /* --------------------------------- State ---------------------------------- */\n  const isControlled = checkedProp !== undefined;\n  const [internalChecked, setInternalChecked] = useState<boolean>(\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: RadioValueState = useMemo(() => {\n    return checked ? 'checked' : 'unchecked';\n  }, [checked]);\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 radioAnimatedStyle = 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;\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: RadioStyleVariant = hasError ? VARIANT_ERROR_MAP[variantProp] : variantProp;\n\n  radioStyles.useVariants({\n    size,\n    variant: styleVariant, // primary, secondary, alert, alert-secondary\n    value: valueState, // checked, unchecked\n    pressed,\n  });\n\n  const rootStyle = useMemo(\n    () => [radioStyles.root, { opacity: disabled ? 0.5 : 1 }],\n    [radioStyles.root, disabled],\n  );\n\n  const radioBoxStyle = useMemo(\n    () => [\n      radioStyles.radio,\n      {\n        alignItems: 'center' as const,\n        justifyContent: 'center' as const,\n        borderRadius: 9999,\n      },\n      radioAnimatedStyle,\n    ],\n    [radioStyles.radio, radioAnimatedStyle],\n  );\n\n  // Inner circle size: fixed 8x8px to match web implementation\n  const INNER_CIRCLE_SIZE = 8;\n\n  const circleStyle = useMemo(\n    () => [\n      radioStyles.radioCircle,\n      {\n        width: INNER_CIRCLE_SIZE,\n        height: INNER_CIRCLE_SIZE,\n        borderRadius: 9999,\n      },\n    ],\n    [radioStyles.radioCircle],\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={radioStyles.text}>{content}</Text> : content;\n\n    if (required) {\n      return (\n        <HStack columnGap=\"1\" alignItems=\"flex-start\">\n          {textContent}\n          <Text style={radioStyles.text}>*</Text>\n        </HStack>\n      );\n    }\n\n    return textContent;\n  }, [label, required, radioStyles.text]);\n\n  const a11yState = useMemo(\n    () => ({\n      disabled,\n      checked,\n    }),\n    [disabled, checked],\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=\"radio\"\n      accessibilityState={a11yState}\n      accessibilityLabel={typeof label === 'string' ? label : undefined}\n      {...viewProps}\n      style={rootStyle}\n    >\n      <Animated.View style={radioBoxStyle}>{checked && <View style={circleStyle} />}</Animated.View>\n\n      {labelContent}\n    </Pressable>\n  );\n});\n\nRadio.displayName = 'Radio';\n\nexport { Radio, type RadioProps };\n"],"mappings":"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"}
+{"version":3,"file":"Radio.js","names":["Text","Pressable"],"sources":["../../src/components/Radio.tsx"],"sourcesContent":["import type { RadioVariant, UniversalRadioProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { isValidElement, memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { View } from 'react-native';\nimport Animated, { useAnimatedStyle, useDerivedValue, withSpring } from 'react-native-reanimated';\n\nimport { radioStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { HStack } from './HStack';\nimport { Pressable } from './Pressable';\nimport { Text } from './Text';\n\n/* -------------------------------------------------------------------------- */\n/*                                   Types                                    */\n/* -------------------------------------------------------------------------- */\n\n/** Derived from RadioValue - maps boolean to 'checked'/'unchecked' string literals */\ntype RadioValueState = 'checked' | 'unchecked';\n\ninterface RadioProps extends Omit<ViewProps, 'style'>, UniversalRadioProps {\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n  /** Default checked state for uncontrolled mode */\n  defaultChecked?: boolean;\n  /** Whether the radio is disabled */\n  disabled?: boolean;\n  /** Whether the radio 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 RadioStyleVariant = 'primary' | 'secondary' | 'alert' | 'alert-secondary';\n\nconst VARIANT_ERROR_MAP: Record<RadioVariant, RadioStyleVariant> = {\n  primary: 'alert',\n  secondary: 'alert-secondary',\n};\n\n/* -------------------------------------------------------------------------- */\n/*                              Radio Component                                */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **⚙️ A radio component**\n *\n * @description\n * A radio component allows users to select one option from a set.\n * Unlike checkbox, radio buttons cannot have multiple selected in a group,\n * allowing only one selection at a time.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Radio } from '@yahoo/uds-mobile/Radio';\n *\n * <Radio label=\"Option A\" />\n * <Radio label=\"Option B\" checked={true} onChange={setChecked} />\n * ```\n *\n * @usage\n * - Forms: For selecting a single option from multiple choices\n * - Settings: For toggling between mutually exclusive preferences\n *\n * @accessibility\n * - Sets `accessibilityRole=\"radio\"` automatically\n * - Announces checked/unchecked state\n * - Label is used as accessibility label\n * - Supports `reduceMotion` for users who prefer reduced motion\n *\n * @see {@link Checkbox} for multi-select options\n * @see {@link Switch} for binary toggles\n */\nconst Radio = memo(function Radio({\n  // Radio 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}: RadioProps) {\n  const generatedId = useId();\n  const uid = `uds-radio-${generatedId}`;\n\n  /* --------------------------------- State ---------------------------------- */\n  const isControlled = checkedProp !== undefined;\n  const [internalChecked, setInternalChecked] = useState<boolean>(\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: RadioValueState = useMemo(() => {\n    return checked ? 'checked' : 'unchecked';\n  }, [checked]);\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 radioAnimatedStyle = 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;\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: RadioStyleVariant = hasError ? VARIANT_ERROR_MAP[variantProp] : variantProp;\n\n  radioStyles.useVariants({\n    size,\n    variant: styleVariant, // primary, secondary, alert, alert-secondary\n    value: valueState, // checked, unchecked\n    pressed,\n  });\n\n  const rootStyle = useMemo(\n    () => [radioStyles.root, { opacity: disabled ? 0.5 : 1 }],\n    [radioStyles.root, disabled],\n  );\n\n  const radioBoxStyle = useMemo(\n    () => [\n      radioStyles.radio,\n      {\n        alignItems: 'center' as const,\n        justifyContent: 'center' as const,\n        borderRadius: 9999,\n      },\n      radioAnimatedStyle,\n    ],\n    [radioStyles.radio, radioAnimatedStyle],\n  );\n\n  // Inner circle size: fixed 8x8px to match web implementation\n  const INNER_CIRCLE_SIZE = 8;\n\n  const circleStyle = useMemo(\n    () => [\n      radioStyles.radioCircle,\n      {\n        width: INNER_CIRCLE_SIZE,\n        height: INNER_CIRCLE_SIZE,\n        borderRadius: 9999,\n      },\n    ],\n    [radioStyles.radioCircle],\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={radioStyles.text}>{content}</Text> : content;\n\n    if (required) {\n      return (\n        <HStack columnGap=\"1\" alignItems=\"flex-start\">\n          {textContent}\n          <Text style={radioStyles.text}>*</Text>\n        </HStack>\n      );\n    }\n\n    return textContent;\n  }, [label, required, radioStyles.text]);\n\n  const a11yState = useMemo(\n    () => ({\n      disabled,\n      checked,\n    }),\n    [disabled, checked],\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=\"radio\"\n      accessibilityState={a11yState}\n      accessibilityLabel={typeof label === 'string' ? label : undefined}\n      {...viewProps}\n      style={rootStyle}\n    >\n      <Animated.View style={radioBoxStyle}>{checked && <View style={circleStyle} />}</Animated.View>\n\n      {labelContent}\n    </Pressable>\n  );\n});\n\nRadio.displayName = 'Radio';\n\nexport { Radio, type RadioProps };\n"],"mappings":"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"}

package/dist/components/Screen.cjs

@@ -22,7 +22,7 @@ let react_native_unistyles = require("react-native-unistyles");
 *
 * @example
 * ```tsx
-* import { Screen } from '@yahoo/uds-mobile';
+* import { Screen } from '@yahoo/uds-mobile/Screen';
 *
 * <Screen backgroundColor="primary" spacingHorizontal="6">
 *   <Text>Screen content</Text>

package/dist/components/Screen.d.cts

@@ -35,7 +35,7 @@ interface ScreenProps extends ScrollViewProps {
  *
  * @example
  * ```tsx
- * import { Screen } from '@yahoo/uds-mobile';
+ * import { Screen } from '@yahoo/uds-mobile/Screen';
  *
  * <Screen backgroundColor="primary" spacingHorizontal="6">
  *   <Text>Screen content</Text>

package/dist/components/Screen.d.ts

@@ -35,7 +35,7 @@ interface ScreenProps extends ScrollViewProps {
  *
  * @example
  * ```tsx
- * import { Screen } from '@yahoo/uds-mobile';
+ * import { Screen } from '@yahoo/uds-mobile/Screen';
  *
  * <Screen backgroundColor="primary" spacingHorizontal="6">
  *   <Text>Screen content</Text>

package/dist/components/Screen.js

@@ -20,7 +20,7 @@ import { StyleSheet as StyleSheet$1 } from "react-native-unistyles";
 *
 * @example
 * ```tsx
-* import { Screen } from '@yahoo/uds-mobile';
+* import { Screen } from '@yahoo/uds-mobile/Screen';
 *
 * <Screen backgroundColor="primary" spacingHorizontal="6">
 *   <Text>Screen content</Text>

package/dist/components/Screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"Screen.js","names":["StyleSheet"],"sources":["../../src/components/Screen.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { ScrollViewProps, ViewProps } from 'react-native';\nimport { ScrollView } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\nimport type { HStackProps } from './HStack';\nimport { HStack } from './HStack';\nimport { VStack } from './VStack';\n\ninterface ScreenProps extends ScrollViewProps {\n  /** Ref to the underlying ScrollView */\n  ref?: Ref<ScrollView>;\n  /** Background color of the screen */\n  backgroundColor?: StyleProps['backgroundColor'];\n  /** Horizontal padding for screen content */\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  /** Top padding for screen content */\n  spacingTop?: StyleProps['spacingTop'];\n  /** Gap between child elements */\n  gap?: StyleProps['columnGap'];\n  /** Content that sticks to the top of the screen when scrolling */\n  stickyHeader?: ReactNode;\n  /** Props passed to the sticky header container */\n  stickyHeaderProps?: HStackProps;\n}\n\n/**\n * **📱 A screen container with safe area handling**\n *\n * @description\n * A scrollable screen component that handles safe area insets and provides\n * consistent padding and background styling. Uses Unistyles' built-in\n * safe area insets via the `rt` runtime object.\n *\n * @category Layout\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Screen } from '@yahoo/uds-mobile';\n *\n * <Screen backgroundColor=\"primary\" spacingHorizontal=\"6\">\n *   <Text>Screen content</Text>\n * </Screen>\n *\n * // With sticky header\n * <Screen\n *   stickyHeader={<Text>Header</Text>}\n *   stickyHeaderProps={{ backgroundColor: 'secondary' }}\n * >\n *   <Text>Content</Text>\n * </Screen>\n * ```\n *\n * @usage\n * - Use as the root component for screens\n * - Use stickyHeader for persistent header content\n * - Content is automatically scrollable\n * - Safe area insets are handled automatically\n *\n * @see {@link VStack} for non-scrollable vertical layouts\n * @see {@link Box} for custom containers\n */\nconst Screen = memo(function Screen({\n  children,\n  // Background\n  backgroundColor = 'primary',\n  // Spacing\n  spacingHorizontal = '6',\n  spacingTop = '6',\n  gap,\n  // Header\n  stickyHeader,\n  stickyHeaderProps,\n  style,\n  ref,\n  ...props\n}: ScreenProps) {\n  const { style: stickyHeaderStyle, ...stickyHeaderPropsWithoutStyle } = stickyHeaderProps ?? {};\n\n  styles.useVariants({\n    backgroundColor,\n    flex: '1',\n    flexDirection: 'column',\n    columnGap: gap,\n  });\n\n  // styles.foundation must be in deps - it returns a new reference when variants change\n  const scrollStyles = useMemo(\n    () => [styles.foundation as ViewProps['style'], style],\n    [styles.foundation, style],\n  );\n\n  return (\n    <VStack backgroundColor=\"primary\" style={screenStyles.wrapper}>\n      <ScrollView\n        ref={ref}\n        style={scrollStyles}\n        stickyHeaderIndices={stickyHeader ? [0] : undefined}\n        {...props}\n      >\n        {stickyHeader && (\n          <HStack\n            spacingHorizontal=\"6\"\n            spacingBottom=\"4\"\n            backgroundColor=\"primary\"\n            justifyContent=\"flex-end\"\n            style={stickyHeaderStyle}\n            {...stickyHeaderPropsWithoutStyle}\n          >\n            {stickyHeader}\n          </HStack>\n        )}\n        <VStack flex=\"1\" spacingHorizontal={spacingHorizontal} spacingTop={spacingTop} gap={gap}>\n          {children}\n        </VStack>\n      </ScrollView>\n    </VStack>\n  );\n});\n\nScreen.displayName = 'Screen';\n\nconst screenStyles = StyleSheet.create((_theme, rt) => ({\n  wrapper: {\n    flex: 1, // apply insets to the container,\n    // so it will add required paddings\n    paddingTop: rt.insets.top,\n    paddingBottom: rt.insets.bottom,\n    paddingLeft: rt.insets.left,\n    paddingRight: rt.insets.right,\n  },\n}));\n\nexport { Screen, type ScreenProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,MAAM,SAAS,KAAK,SAAS,OAAO,EAClC,UAEA,kBAAkB,WAElB,oBAAoB,KACpB,aAAa,KACb,KAEA,cACA,mBACA,OACA,KACA,GAAG,SACW;CACd,MAAM,EAAE,OAAO,mBAAmB,GAAG,kCAAkC,qBAAqB,EAAE;AAE9F,QAAO,YAAY;EACjB;EACA,MAAM;EACN,eAAe;EACf,WAAW;EACZ,CAAC;CAGF,MAAM,eAAe,cACb,CAAC,OAAO,YAAkC,MAAM,EACtD,CAAC,OAAO,YAAY,MAAM,CAC3B;AAED,QACE,oBAAC,QAAD;EAAQ,iBAAgB;EAAU,OAAO,aAAa;YACpD,qBAAC,YAAD;GACO;GACL,OAAO;GACP,qBAAqB,eAAe,CAAC,EAAE,GAAG,KAAA;GAC1C,GAAI;aAJN,CAMG,gBACC,oBAAC,QAAD;IACE,mBAAkB;IAClB,eAAc;IACd,iBAAgB;IAChB,gBAAe;IACf,OAAO;IACP,GAAI;cAEH;IACM,CAAA,EAEX,oBAAC,QAAD;IAAQ,MAAK;IAAuB;IAA+B;IAAiB;IACjF;IACM,CAAA,CACE;;EACN,CAAA;EAEX;AAEF,OAAO,cAAc;AAErB,MAAM,eAAeA,aAAW,QAAQ,QAAQ,QAAQ,EACtD,SAAS;CACP,MAAM;CAEN,YAAY,GAAG,OAAO;CACtB,eAAe,GAAG,OAAO;CACzB,aAAa,GAAG,OAAO;CACvB,cAAc,GAAG,OAAO;CACzB,EACF,EAAE"}
+{"version":3,"file":"Screen.js","names":["StyleSheet"],"sources":["../../src/components/Screen.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { ScrollViewProps, ViewProps } from 'react-native';\nimport { ScrollView } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\nimport type { HStackProps } from './HStack';\nimport { HStack } from './HStack';\nimport { VStack } from './VStack';\n\ninterface ScreenProps extends ScrollViewProps {\n  /** Ref to the underlying ScrollView */\n  ref?: Ref<ScrollView>;\n  /** Background color of the screen */\n  backgroundColor?: StyleProps['backgroundColor'];\n  /** Horizontal padding for screen content */\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  /** Top padding for screen content */\n  spacingTop?: StyleProps['spacingTop'];\n  /** Gap between child elements */\n  gap?: StyleProps['columnGap'];\n  /** Content that sticks to the top of the screen when scrolling */\n  stickyHeader?: ReactNode;\n  /** Props passed to the sticky header container */\n  stickyHeaderProps?: HStackProps;\n}\n\n/**\n * **📱 A screen container with safe area handling**\n *\n * @description\n * A scrollable screen component that handles safe area insets and provides\n * consistent padding and background styling. Uses Unistyles' built-in\n * safe area insets via the `rt` runtime object.\n *\n * @category Layout\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Screen } from '@yahoo/uds-mobile/Screen';\n *\n * <Screen backgroundColor=\"primary\" spacingHorizontal=\"6\">\n *   <Text>Screen content</Text>\n * </Screen>\n *\n * // With sticky header\n * <Screen\n *   stickyHeader={<Text>Header</Text>}\n *   stickyHeaderProps={{ backgroundColor: 'secondary' }}\n * >\n *   <Text>Content</Text>\n * </Screen>\n * ```\n *\n * @usage\n * - Use as the root component for screens\n * - Use stickyHeader for persistent header content\n * - Content is automatically scrollable\n * - Safe area insets are handled automatically\n *\n * @see {@link VStack} for non-scrollable vertical layouts\n * @see {@link Box} for custom containers\n */\nconst Screen = memo(function Screen({\n  children,\n  // Background\n  backgroundColor = 'primary',\n  // Spacing\n  spacingHorizontal = '6',\n  spacingTop = '6',\n  gap,\n  // Header\n  stickyHeader,\n  stickyHeaderProps,\n  style,\n  ref,\n  ...props\n}: ScreenProps) {\n  const { style: stickyHeaderStyle, ...stickyHeaderPropsWithoutStyle } = stickyHeaderProps ?? {};\n\n  styles.useVariants({\n    backgroundColor,\n    flex: '1',\n    flexDirection: 'column',\n    columnGap: gap,\n  });\n\n  // styles.foundation must be in deps - it returns a new reference when variants change\n  const scrollStyles = useMemo(\n    () => [styles.foundation as ViewProps['style'], style],\n    [styles.foundation, style],\n  );\n\n  return (\n    <VStack backgroundColor=\"primary\" style={screenStyles.wrapper}>\n      <ScrollView\n        ref={ref}\n        style={scrollStyles}\n        stickyHeaderIndices={stickyHeader ? [0] : undefined}\n        {...props}\n      >\n        {stickyHeader && (\n          <HStack\n            spacingHorizontal=\"6\"\n            spacingBottom=\"4\"\n            backgroundColor=\"primary\"\n            justifyContent=\"flex-end\"\n            style={stickyHeaderStyle}\n            {...stickyHeaderPropsWithoutStyle}\n          >\n            {stickyHeader}\n          </HStack>\n        )}\n        <VStack flex=\"1\" spacingHorizontal={spacingHorizontal} spacingTop={spacingTop} gap={gap}>\n          {children}\n        </VStack>\n      </ScrollView>\n    </VStack>\n  );\n});\n\nScreen.displayName = 'Screen';\n\nconst screenStyles = StyleSheet.create((_theme, rt) => ({\n  wrapper: {\n    flex: 1, // apply insets to the container,\n    // so it will add required paddings\n    paddingTop: rt.insets.top,\n    paddingBottom: rt.insets.bottom,\n    paddingLeft: rt.insets.left,\n    paddingRight: rt.insets.right,\n  },\n}));\n\nexport { Screen, type ScreenProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,MAAM,SAAS,KAAK,SAAS,OAAO,EAClC,UAEA,kBAAkB,WAElB,oBAAoB,KACpB,aAAa,KACb,KAEA,cACA,mBACA,OACA,KACA,GAAG,SACW;CACd,MAAM,EAAE,OAAO,mBAAmB,GAAG,kCAAkC,qBAAqB,EAAE;AAE9F,QAAO,YAAY;EACjB;EACA,MAAM;EACN,eAAe;EACf,WAAW;EACZ,CAAC;CAGF,MAAM,eAAe,cACb,CAAC,OAAO,YAAkC,MAAM,EACtD,CAAC,OAAO,YAAY,MAAM,CAC3B;AAED,QACE,oBAAC,QAAD;EAAQ,iBAAgB;EAAU,OAAO,aAAa;YACpD,qBAAC,YAAD;GACO;GACL,OAAO;GACP,qBAAqB,eAAe,CAAC,EAAE,GAAG,KAAA;GAC1C,GAAI;aAJN,CAMG,gBACC,oBAAC,QAAD;IACE,mBAAkB;IAClB,eAAc;IACd,iBAAgB;IAChB,gBAAe;IACf,OAAO;IACP,GAAI;cAEH;IACM,CAAA,EAEX,oBAAC,QAAD;IAAQ,MAAK;IAAuB;IAA+B;IAAiB;IACjF;IACM,CAAA,CACE;;EACN,CAAA;EAEX;AAEF,OAAO,cAAc;AAErB,MAAM,eAAeA,aAAW,QAAQ,QAAQ,QAAQ,EACtD,SAAS;CACP,MAAM;CAEN,YAAY,GAAG,OAAO;CACtB,eAAe,GAAG,OAAO;CACzB,aAAa,GAAG,OAAO;CACvB,cAAc,GAAG,OAAO;CACzB,EACF,EAAE"}

package/dist/components/Switch.cjs

@@ -30,7 +30,7 @@ const ANIMATION_DURATION = 120;
 *
 * @example
 * ```tsx
-* import { Switch } from '@yahoo/uds-mobile';
+* import { Switch } from '@yahoo/uds-mobile/Switch';
 *
 * <Switch label="Notifications" />
 * <Switch isOn={enabled} onChange={setEnabled} label="Dark mode" />

package/dist/components/Switch.d.cts

@@ -30,7 +30,7 @@ interface SwitchProps extends Omit<ViewProps, 'style'>, UniversalSwitchProps<Ico
  *
  * @example
  * ```tsx
- * import { Switch } from '@yahoo/uds-mobile';
+ * import { Switch } from '@yahoo/uds-mobile/Switch';
  *
  * <Switch label="Notifications" />
  * <Switch isOn={enabled} onChange={setEnabled} label="Dark mode" />

package/dist/components/Switch.d.ts

@@ -30,7 +30,7 @@ interface SwitchProps extends Omit<ViewProps, 'style'>, UniversalSwitchProps<Ico
  *
  * @example
  * ```tsx
- * import { Switch } from '@yahoo/uds-mobile';
+ * import { Switch } from '@yahoo/uds-mobile/Switch';
  *
  * <Switch label="Notifications" />
  * <Switch isOn={enabled} onChange={setEnabled} label="Dark mode" />

package/dist/components/Switch.js

@@ -27,7 +27,7 @@ const ANIMATION_DURATION = 120;
 *
 * @example
 * ```tsx
-* import { Switch } from '@yahoo/uds-mobile';
+* import { Switch } from '@yahoo/uds-mobile/Switch';
 *
 * <Switch label="Notifications" />
 * <Switch isOn={enabled} onChange={setEnabled} label="Dark mode" />

package/dist/components/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["Text","StyleSheet"],"sources":["../../src/components/Switch.tsx"],"sourcesContent":["import type { SwitchSize, UniversalSwitchProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { AccessibilityProps, StyleProp, View, ViewProps, ViewStyle } from 'react-native';\nimport { AccessibilityInfo, Pressable } from 'react-native';\nimport Animated, { useAnimatedStyle, useDerivedValue, withTiming } from 'react-native-reanimated';\nimport { StyleSheet } from 'react-native-unistyles';\nimport { useAnimatedVariantColor } from 'react-native-unistyles/reanimated';\n\nimport { switchStyles } from '../../generated/styles';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Text } from './Text';\n\ninterface SwitchProps extends Omit<ViewProps, 'style'>, UniversalSwitchProps<IconSlotType> {\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n  /** Callback when the switch value changes */\n  onChange?: (value: boolean) => void;\n  /** Whether the switch is disabled */\n  disabled?: boolean;\n  /** Whether the switch is required (shows asterisk with label) */\n  required?: boolean;\n  /** Accessibility hint describing what happens when activated */\n  accessibilityHint?: AccessibilityProps['accessibilityHint'];\n}\n\nconst HANDLE_TRAVEL: Record<SwitchSize, number> = {\n  md: 20,\n  sm: 12,\n};\n\nconst ANIMATION_DURATION = 120;\n\n/**\n * **Switch component for toggling options**\n *\n * @description\n * A switch (also called a toggle) is a binary on/off input control.\n * It allows users to pick between two clearly opposite choices.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Switch } from '@yahoo/uds-mobile';\n *\n * <Switch label=\"Notifications\" />\n * <Switch isOn={enabled} onChange={setEnabled} label=\"Dark mode\" />\n * <Switch onIcon=\"Check\" offIcon=\"Cross\" label=\"Sync\" />\n * ```\n *\n * @usage\n * - Settings: For toggling preferences on/off\n * - Feature flags: For enabling/disabling features\n * - Immediate effect toggles (no submit button needed)\n *\n * @accessibility\n * - Sets `accessibilityRole=\"switch\"` automatically\n * - Announces on/off state to screen readers\n * - Respects system reduce motion preference\n * - Supports `reduceMotion` prop to disable animations\n *\n * @see {@link Checkbox} for forms with submit actions\n * @see {@link Radio} for single-select options\n */\nconst Switch = memo(function Switch({\n  isOn: isOnProp,\n  defaultIsOn = false,\n  onChange,\n  label,\n  labelPosition = 'start',\n  size = 'md',\n  onIcon,\n  offIcon,\n  disabled = false,\n  required,\n  accessibilityHint,\n  reduceMotion = false,\n  ref,\n  ...viewProps\n}: SwitchProps) {\n  const isControlled = isOnProp !== undefined;\n  const [internalIsOn, setInternalIsOn] = useState(defaultIsOn);\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n  const isOn = isControlled ? isOnProp : internalIsOn;\n\n  // Check system reduced motion preference\n  useEffect(() => {\n    const checkReducedMotion = async () => {\n      const isReduceMotionEnabled = await AccessibilityInfo.isReduceMotionEnabled();\n      setPrefersReducedMotion(isReduceMotionEnabled);\n    };\n    checkReducedMotion();\n\n    const subscription = AccessibilityInfo.addEventListener(\n      'reduceMotionChanged',\n      setPrefersReducedMotion,\n    );\n    return () => subscription.remove();\n  }, []);\n\n  const shouldReduceMotion = reduceMotion || prefersReducedMotion;\n  const animationDuration = shouldReduceMotion ? 0 : ANIMATION_DURATION;\n\n  const progress = useDerivedValue(\n    () => withTiming(isOn ? 1 : 0, { duration: animationDuration }),\n    [isOn, animationDuration],\n  );\n\n  const travelDistance = HANDLE_TRAVEL[size];\n\n  const handlePress = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    const newValue = !isOn;\n\n    if (!isControlled) {\n      setInternalIsOn(newValue);\n    }\n\n    onChange?.(newValue);\n  }, [disabled, isOn, isControlled, onChange]);\n\n  switchStyles.useVariants({\n    size,\n    variant: isOn ? 'on' : 'off',\n  });\n\n  // Get animated track color from design tokens (changes when variant changes)\n  const trackBackgroundColor = useAnimatedVariantColor(switchStyles.switch, 'backgroundColor');\n\n  const animatedTrackStyle = useAnimatedStyle(() => {\n    'worklet';\n    return {\n      backgroundColor: withTiming(trackBackgroundColor.value, { duration: animationDuration }),\n    };\n  });\n\n  const animatedHandleStyle = useAnimatedStyle(() => {\n    'worklet';\n    return {\n      transform: [{ translateX: progress.value * travelDistance }],\n    };\n  });\n\n  const rootStyle: StyleProp<ViewStyle> = useMemo(\n    () => [switchStyles.root, switchStaticStyles.root({ disabled })],\n    [switchStyles.root, disabled],\n  );\n\n  const trackStyle: StyleProp<ViewStyle> = useMemo(\n    () => [switchStyles.switch, switchStaticStyles.track, animatedTrackStyle],\n    [switchStyles.switch, animatedTrackStyle],\n  );\n\n  const handleStyle: StyleProp<ViewStyle> = useMemo(\n    () => [switchStyles.handle, switchStaticStyles.handle, animatedHandleStyle],\n    [switchStyles.handle, animatedHandleStyle],\n  );\n\n  const accessibilityLabel = typeof label === 'string' ? label : undefined;\n  const resolvedAccessibilityHint = accessibilityHint ?? 'Double tap to toggle';\n\n  const resolvedLabel = typeof label === 'function' ? label() : label;\n  const labelContent = resolvedLabel && (\n    <HStack gap=\"2\" alignItems=\"center\">\n      <Text style={switchStyles.text}>{resolvedLabel}</Text>\n      {required && <Text color=\"alert\">*</Text>}\n    </HStack>\n  );\n\n  const a11yValue = useMemo(() => ({ text: isOn ? 'On' : 'Off' }), [isOn]);\n\n  return (\n    <Pressable\n      ref={ref}\n      onPress={handlePress}\n      disabled={disabled}\n      accessible\n      accessibilityRole=\"switch\"\n      accessibilityState={{ checked: isOn, disabled }}\n      accessibilityLabel={accessibilityLabel}\n      accessibilityHint={resolvedAccessibilityHint}\n      accessibilityValue={a11yValue}\n      {...viewProps}\n      style={rootStyle}\n    >\n      {labelPosition === 'start' && labelContent}\n\n      <Animated.View style={trackStyle} importantForAccessibility=\"no-hide-descendants\">\n        <Animated.View style={handleStyle}>\n          {onIcon && isOn && (\n            <Animated.View style={switchStaticStyles.iconContainer}>\n              <IconSlot icon={onIcon} variant=\"fill\" style={switchStyles.handleIcon} />\n            </Animated.View>\n          )}\n          {offIcon && !isOn && (\n            <Animated.View style={switchStaticStyles.iconContainer}>\n              <IconSlot icon={offIcon} variant=\"fill\" style={switchStyles.handleIcon} />\n            </Animated.View>\n          )}\n        </Animated.View>\n      </Animated.View>\n\n      {labelPosition === 'end' && labelContent}\n    </Pressable>\n  );\n});\n\nSwitch.displayName = 'Switch';\n\nconst switchStaticStyles = StyleSheet.create((theme) => ({\n  handle: {\n    borderRadius: theme.borderRadius.full,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  iconContainer: {\n    position: 'absolute',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  track: {\n    justifyContent: 'center',\n    borderRadius: theme.borderRadius.full,\n  },\n  root: ({ disabled }: { disabled: boolean }) => ({\n    flexDirection: 'row',\n    alignItems: 'center',\n    alignSelf: 'flex-start',\n    opacity: disabled ? 0.5 : 1,\n  }),\n}));\n\nexport { Switch, type SwitchProps };\n"],"mappings":"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"}
+{"version":3,"file":"Switch.js","names":["Text","StyleSheet"],"sources":["../../src/components/Switch.tsx"],"sourcesContent":["import type { SwitchSize, UniversalSwitchProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { AccessibilityProps, StyleProp, View, ViewProps, ViewStyle } from 'react-native';\nimport { AccessibilityInfo, Pressable } from 'react-native';\nimport Animated, { useAnimatedStyle, useDerivedValue, withTiming } from 'react-native-reanimated';\nimport { StyleSheet } from 'react-native-unistyles';\nimport { useAnimatedVariantColor } from 'react-native-unistyles/reanimated';\n\nimport { switchStyles } from '../../generated/styles';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Text } from './Text';\n\ninterface SwitchProps extends Omit<ViewProps, 'style'>, UniversalSwitchProps<IconSlotType> {\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n  /** Callback when the switch value changes */\n  onChange?: (value: boolean) => void;\n  /** Whether the switch is disabled */\n  disabled?: boolean;\n  /** Whether the switch is required (shows asterisk with label) */\n  required?: boolean;\n  /** Accessibility hint describing what happens when activated */\n  accessibilityHint?: AccessibilityProps['accessibilityHint'];\n}\n\nconst HANDLE_TRAVEL: Record<SwitchSize, number> = {\n  md: 20,\n  sm: 12,\n};\n\nconst ANIMATION_DURATION = 120;\n\n/**\n * **Switch component for toggling options**\n *\n * @description\n * A switch (also called a toggle) is a binary on/off input control.\n * It allows users to pick between two clearly opposite choices.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Switch } from '@yahoo/uds-mobile/Switch';\n *\n * <Switch label=\"Notifications\" />\n * <Switch isOn={enabled} onChange={setEnabled} label=\"Dark mode\" />\n * <Switch onIcon=\"Check\" offIcon=\"Cross\" label=\"Sync\" />\n * ```\n *\n * @usage\n * - Settings: For toggling preferences on/off\n * - Feature flags: For enabling/disabling features\n * - Immediate effect toggles (no submit button needed)\n *\n * @accessibility\n * - Sets `accessibilityRole=\"switch\"` automatically\n * - Announces on/off state to screen readers\n * - Respects system reduce motion preference\n * - Supports `reduceMotion` prop to disable animations\n *\n * @see {@link Checkbox} for forms with submit actions\n * @see {@link Radio} for single-select options\n */\nconst Switch = memo(function Switch({\n  isOn: isOnProp,\n  defaultIsOn = false,\n  onChange,\n  label,\n  labelPosition = 'start',\n  size = 'md',\n  onIcon,\n  offIcon,\n  disabled = false,\n  required,\n  accessibilityHint,\n  reduceMotion = false,\n  ref,\n  ...viewProps\n}: SwitchProps) {\n  const isControlled = isOnProp !== undefined;\n  const [internalIsOn, setInternalIsOn] = useState(defaultIsOn);\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n  const isOn = isControlled ? isOnProp : internalIsOn;\n\n  // Check system reduced motion preference\n  useEffect(() => {\n    const checkReducedMotion = async () => {\n      const isReduceMotionEnabled = await AccessibilityInfo.isReduceMotionEnabled();\n      setPrefersReducedMotion(isReduceMotionEnabled);\n    };\n    checkReducedMotion();\n\n    const subscription = AccessibilityInfo.addEventListener(\n      'reduceMotionChanged',\n      setPrefersReducedMotion,\n    );\n    return () => subscription.remove();\n  }, []);\n\n  const shouldReduceMotion = reduceMotion || prefersReducedMotion;\n  const animationDuration = shouldReduceMotion ? 0 : ANIMATION_DURATION;\n\n  const progress = useDerivedValue(\n    () => withTiming(isOn ? 1 : 0, { duration: animationDuration }),\n    [isOn, animationDuration],\n  );\n\n  const travelDistance = HANDLE_TRAVEL[size];\n\n  const handlePress = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    const newValue = !isOn;\n\n    if (!isControlled) {\n      setInternalIsOn(newValue);\n    }\n\n    onChange?.(newValue);\n  }, [disabled, isOn, isControlled, onChange]);\n\n  switchStyles.useVariants({\n    size,\n    variant: isOn ? 'on' : 'off',\n  });\n\n  // Get animated track color from design tokens (changes when variant changes)\n  const trackBackgroundColor = useAnimatedVariantColor(switchStyles.switch, 'backgroundColor');\n\n  const animatedTrackStyle = useAnimatedStyle(() => {\n    'worklet';\n    return {\n      backgroundColor: withTiming(trackBackgroundColor.value, { duration: animationDuration }),\n    };\n  });\n\n  const animatedHandleStyle = useAnimatedStyle(() => {\n    'worklet';\n    return {\n      transform: [{ translateX: progress.value * travelDistance }],\n    };\n  });\n\n  const rootStyle: StyleProp<ViewStyle> = useMemo(\n    () => [switchStyles.root, switchStaticStyles.root({ disabled })],\n    [switchStyles.root, disabled],\n  );\n\n  const trackStyle: StyleProp<ViewStyle> = useMemo(\n    () => [switchStyles.switch, switchStaticStyles.track, animatedTrackStyle],\n    [switchStyles.switch, animatedTrackStyle],\n  );\n\n  const handleStyle: StyleProp<ViewStyle> = useMemo(\n    () => [switchStyles.handle, switchStaticStyles.handle, animatedHandleStyle],\n    [switchStyles.handle, animatedHandleStyle],\n  );\n\n  const accessibilityLabel = typeof label === 'string' ? label : undefined;\n  const resolvedAccessibilityHint = accessibilityHint ?? 'Double tap to toggle';\n\n  const resolvedLabel = typeof label === 'function' ? label() : label;\n  const labelContent = resolvedLabel && (\n    <HStack gap=\"2\" alignItems=\"center\">\n      <Text style={switchStyles.text}>{resolvedLabel}</Text>\n      {required && <Text color=\"alert\">*</Text>}\n    </HStack>\n  );\n\n  const a11yValue = useMemo(() => ({ text: isOn ? 'On' : 'Off' }), [isOn]);\n\n  return (\n    <Pressable\n      ref={ref}\n      onPress={handlePress}\n      disabled={disabled}\n      accessible\n      accessibilityRole=\"switch\"\n      accessibilityState={{ checked: isOn, disabled }}\n      accessibilityLabel={accessibilityLabel}\n      accessibilityHint={resolvedAccessibilityHint}\n      accessibilityValue={a11yValue}\n      {...viewProps}\n      style={rootStyle}\n    >\n      {labelPosition === 'start' && labelContent}\n\n      <Animated.View style={trackStyle} importantForAccessibility=\"no-hide-descendants\">\n        <Animated.View style={handleStyle}>\n          {onIcon && isOn && (\n            <Animated.View style={switchStaticStyles.iconContainer}>\n              <IconSlot icon={onIcon} variant=\"fill\" style={switchStyles.handleIcon} />\n            </Animated.View>\n          )}\n          {offIcon && !isOn && (\n            <Animated.View style={switchStaticStyles.iconContainer}>\n              <IconSlot icon={offIcon} variant=\"fill\" style={switchStyles.handleIcon} />\n            </Animated.View>\n          )}\n        </Animated.View>\n      </Animated.View>\n\n      {labelPosition === 'end' && labelContent}\n    </Pressable>\n  );\n});\n\nSwitch.displayName = 'Switch';\n\nconst switchStaticStyles = StyleSheet.create((theme) => ({\n  handle: {\n    borderRadius: theme.borderRadius.full,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  iconContainer: {\n    position: 'absolute',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  track: {\n    justifyContent: 'center',\n    borderRadius: theme.borderRadius.full,\n  },\n  root: ({ disabled }: { disabled: boolean }) => ({\n    flexDirection: 'row',\n    alignItems: 'center',\n    alignSelf: 'flex-start',\n    opacity: disabled ? 0.5 : 1,\n  }),\n}));\n\nexport { Switch, type SwitchProps };\n"],"mappings":"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"}

package/dist/components/Tabs/Tab.cjs

@@ -0,0 +1,174 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_components_IconSlot = require("../IconSlot.cjs");
+const require_components_Pressable = require("../Pressable.cjs");
+const require_components_Tabs_tabsContexts = require("./tabsContexts.cjs");
+const require_components_Tabs_tabTheme = require("./tabTheme.cjs");
+let react = require("react");
+let react_native = require("react-native");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_native_unistyles = require("react-native-unistyles");
+//#region src/components/Tabs/Tab.tsx
+const PRIMARY_TAB_UNDERLINE_HEIGHT = 2;
+const CLEAR_SELECTION_CHROME = {
+	backgroundColor: "transparent",
+	borderWidth: 0,
+	borderColor: "transparent",
+	shadowOpacity: 0,
+	elevation: 0,
+	boxShadow: []
+};
+function TabLabel({ style, children }) {
+	if (typeof children === "string" || typeof children === "number") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+		style,
+		children
+	});
+	return children;
+}
+/**
+* **⚙️ Tab**
+*
+* @description
+* A single selectable tab. Must be used inside {@link TabList} within {@link Tabs}.
+*
+* @category Navigation
+* @platform mobile
+*/
+const Tab = (0, react.memo)(function Tab({ value, children, startIcon, endIcon, disabled, style, ...pressableRest }) {
+	const generatedId = (0, react.useId)();
+	const uid = value ?? `uds-tab-${generatedId}`;
+	const { variant: visualVariant, reduceMotion } = require_components_Tabs_tabsContexts.useTabsVisualContext();
+	const { selectedId, setSelectedId, registerTab, unregisterTab, setTabLayout } = require_components_Tabs_tabsContexts.useTabSelectionContext();
+	const { theme } = (0, react_native_unistyles.useUnistyles)();
+	const [pressed, setPressed] = (0, react.useState)(false);
+	const selected = !disabled && selectedId === uid;
+	const active = selected ? "on" : "off";
+	const interaction = pressed ? "pressed" : "rest";
+	(0, react.useEffect)(() => {
+		registerTab(uid);
+		return () => {
+			unregisterTab(uid);
+		};
+	}, [
+		uid,
+		registerTab,
+		unregisterTab
+	]);
+	const rootBase = (0, react.useMemo)(() => require_components_Tabs_tabTheme.getMergedTabLayerStyle(theme, visualVariant, active, "root", interaction), [
+		theme,
+		visualVariant,
+		active,
+		interaction
+	]);
+	const textStyle = (0, react.useMemo)(() => require_components_Tabs_tabTheme.getMergedTabLayerStyle(theme, visualVariant, active, "rootText", interaction), [
+		theme,
+		visualVariant,
+		active,
+		interaction
+	]);
+	const iconStyle = (0, react.useMemo)(() => require_components_Tabs_tabTheme.getMergedTabLayerStyle(theme, visualVariant, active, "icon", interaction), [
+		theme,
+		visualVariant,
+		active,
+		interaction
+	]);
+	const iconColor = (() => {
+		const c = iconStyle?.color;
+		if (c === void 0 || c === null) return;
+		return c;
+	})();
+	/** Inactive primary tabs use transparent underline tokens on web; RN has no CSS vars for that layer. */
+	const showPrimaryPerTabUnderline = visualVariant === "primary" && !(selected && !reduceMotion);
+	const primaryUnderlineColor = (0, react.useMemo)(() => {
+		if (visualVariant !== "primary") return;
+		if (selected && reduceMotion) {
+			const c = require_components_Tabs_tabTheme.getTabLayerStyle(theme, "primary", "on", "rootText", "rest").color;
+			if (typeof c === "string") return c;
+		}
+		return "transparent";
+	}, [
+		visualVariant,
+		selected,
+		reduceMotion,
+		theme
+	]);
+	const rootStyle = (0, react.useMemo)(() => {
+		const base = {
+			...rootBase,
+			flexDirection: "row",
+			alignItems: "center",
+			flexShrink: 0,
+			zIndex: 1,
+			position: "relative"
+		};
+		if (selected && !reduceMotion) return {
+			...base,
+			...CLEAR_SELECTION_CHROME
+		};
+		return base;
+	}, [
+		rootBase,
+		selected,
+		reduceMotion
+	]);
+	const onLayout = (0, react.useCallback)((e) => {
+		setTabLayout(uid, e.nativeEvent.layout);
+	}, [uid, setTabLayout]);
+	const onPress = (0, react.useCallback)(() => {
+		if (disabled) return;
+		setSelectedId(uid);
+	}, [
+		disabled,
+		setSelectedId,
+		uid
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Pressable.Pressable, {
+		accessibilityRole: "tab",
+		accessibilityState: {
+			selected,
+			disabled: !!disabled
+		},
+		disabled,
+		onPress,
+		onPressIn: () => setPressed(true),
+		onPressOut: () => setPressed(false),
+		onLayout,
+		style: [rootStyle, style],
+		...pressableRest,
+		children: [
+			startIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+				icon: startIcon,
+				size: "sm",
+				style: iconStyle,
+				...iconColor !== void 0 ? { color: iconColor } : {}
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabLabel, {
+				style: textStyle,
+				children
+			}),
+			endIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+				icon: endIcon,
+				size: "sm",
+				style: iconStyle,
+				...iconColor !== void 0 ? { color: iconColor } : {}
+			}) : null,
+			showPrimaryPerTabUnderline && primaryUnderlineColor && primaryUnderlineColor !== "transparent" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+				accessibilityElementsHidden: true,
+				importantForAccessibility: "no-hide-descendants",
+				pointerEvents: "none",
+				style: {
+					position: "absolute",
+					left: 0,
+					right: 0,
+					bottom: 0,
+					height: PRIMARY_TAB_UNDERLINE_HEIGHT,
+					backgroundColor: primaryUnderlineColor
+				}
+			}) : null
+		]
+	});
+});
+Tab.displayName = "Tab";
+//#endregion
+exports.Tab = Tab;

package/dist/components/Tabs/Tab.d.cts

@@ -0,0 +1,26 @@
+
+import { UniversalTabProps } from "../../types/dist/index.cjs";
+import { IconSlotType } from "../IconSlot.cjs";
+import * as _$react from "react";
+import { PressableProps, ViewStyle } from "react-native";
+
+//#region src/components/Tabs/Tab.d.ts
+interface TabProps extends Omit<PressableProps, 'children' | 'style' | 'disabled' | 'onPress'>, Omit<UniversalTabProps, 'asChild' | 'className' | 'startIcon' | 'endIcon'> {
+  children: UniversalTabProps['children'];
+  startIcon?: IconSlotType;
+  endIcon?: IconSlotType;
+  style?: ViewStyle;
+}
+/**
+ * **⚙️ Tab**
+ *
+ * @description
+ * A single selectable tab. Must be used inside {@link TabList} within {@link Tabs}.
+ *
+ * @category Navigation
+ * @platform mobile
+ */
+declare const Tab: _$react.NamedExoticComponent<TabProps>;
+//#endregion
+export { Tab, type TabProps };
+//# sourceMappingURL=Tab.d.cts.map

package/dist/components/Tabs/Tab.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.cts","names":[],"sources":["../../../src/components/Tabs/Tab.tsx"],"mappings":";;;;;;;UAiBU,QAAA,SAEN,IAAA,CAAK,cAAA,kDACL,IAAA,CAAK,iBAAA;EACP,QAAA,EAAU,iBAAA;EACV,SAAA,GAAY,YAAA;EACZ,OAAA,GAAU,YAAA;EACV,KAAA,GAAQ,SAAA;AAAA;;;;;;;;;;cA4BJ,GAAA,EAAG,OAAA,CAAA,oBAAA,CAAA,QAAA"}

package/dist/components/Tabs/Tab.d.ts

@@ -0,0 +1,26 @@
+
+import { UniversalTabProps } from "../../types/dist/index.js";
+import { IconSlotType } from "../IconSlot.js";
+import * as _$react from "react";
+import { PressableProps, ViewStyle } from "react-native";
+
+//#region src/components/Tabs/Tab.d.ts
+interface TabProps extends Omit<PressableProps, 'children' | 'style' | 'disabled' | 'onPress'>, Omit<UniversalTabProps, 'asChild' | 'className' | 'startIcon' | 'endIcon'> {
+  children: UniversalTabProps['children'];
+  startIcon?: IconSlotType;
+  endIcon?: IconSlotType;
+  style?: ViewStyle;
+}
+/**
+ * **⚙️ Tab**
+ *
+ * @description
+ * A single selectable tab. Must be used inside {@link TabList} within {@link Tabs}.
+ *
+ * @category Navigation
+ * @platform mobile
+ */
+declare const Tab: _$react.NamedExoticComponent<TabProps>;
+//#endregion
+export { Tab, type TabProps };
+//# sourceMappingURL=Tab.d.ts.map

package/dist/components/Tabs/Tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","names":[],"sources":["../../../src/components/Tabs/Tab.tsx"],"mappings":";;;;;;;UAiBU,QAAA,SAEN,IAAA,CAAK,cAAA,kDACL,IAAA,CAAK,iBAAA;EACP,QAAA,EAAU,iBAAA;EACV,SAAA,GAAY,YAAA;EACZ,OAAA,GAAU,YAAA;EACV,KAAA,GAAQ,SAAA;AAAA;;;;;;;;;;cA4BJ,GAAA,EAAG,OAAA,CAAA,oBAAA,CAAA,QAAA"}