@yahoo/uds-mobile 2.21.2 → 2.23.0

package/dist/components/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["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 { FormLabel } from './FormLabel';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\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 labelContent = label && (\n    <FormLabel\n      color=\"inherit\"\n      variant=\"inherit\"\n      label={label}\n      required={required}\n      showRequiredAsterisk={required}\n      style={switchStyles.text}\n    />\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":["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 {\n  AccessibilityProps,\n  StyleProp,\n  TextStyle,\n  View,\n  ViewProps,\n  ViewStyle,\n} from 'react-native';\nimport { AccessibilityInfo, Platform, Pressable } from 'react-native';\nimport Animated, { useAnimatedStyle, useDerivedValue, withTiming } from 'react-native-reanimated';\n// eslint-disable-next-line uds/no-use-unistyles -- switch variant layers need concrete web styles\nimport { StyleSheet, useUnistyles } from 'react-native-unistyles';\nimport { useAnimatedVariantColor } from 'react-native-unistyles/reanimated';\n\nimport { switchStyles } from '../../generated/styles';\nimport { FormLabel } from './FormLabel';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\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  const activeVariant = isOn ? 'on' : 'off';\n  const { theme } = useUnistyles();\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  // On web, useVariants returns the resolved style object instead of mutating\n  // switchStyles in place.\n  const variantSwitchStyles = switchStyles.useVariants({\n    size,\n    variant: activeVariant,\n  }) as unknown as typeof switchStyles | undefined;\n  const resolvedSwitchStyles = variantSwitchStyles ?? switchStyles;\n\n  const variantLayerStyles = useMemo(() => {\n    const components = theme.components as unknown as Record<string, Record<string, unknown>>;\n    const getLayerStyle = <TStyle,>(layer: string) =>\n      components[`switch/variant/default/active/${activeVariant}/${layer}/rest`] as\n        | TStyle\n        | undefined;\n\n    return {\n      handle: getLayerStyle<ViewStyle>('handle'),\n      handleIcon: getLayerStyle<TextStyle>('handleIcon'),\n      switch: getLayerStyle<ViewStyle>('switch'),\n      text: getLayerStyle<TextStyle>('rootText'),\n    };\n  }, [activeVariant, theme]);\n\n  // Get animated track color from design tokens (changes when variant changes)\n  const trackBackgroundColor = useAnimatedVariantColor(\n    resolvedSwitchStyles.switch,\n    'backgroundColor',\n  );\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    () => [resolvedSwitchStyles.root, switchStaticStyles.root({ disabled })],\n    [resolvedSwitchStyles.root, disabled],\n  );\n\n  const trackStyle: StyleProp<ViewStyle> = useMemo(\n    () => [\n      resolvedSwitchStyles.switch,\n      switchStaticStyles.track,\n      variantLayerStyles.switch,\n      // On web, the animated variant color hook currently resolves to Unistyles'\n      // black fallback, so the concrete variant layer provides the track color.\n      Platform.OS !== 'web' && animatedTrackStyle,\n    ],\n    [resolvedSwitchStyles.switch, variantLayerStyles.switch, animatedTrackStyle],\n  );\n\n  const handleStyle: StyleProp<ViewStyle> = useMemo(\n    () => [\n      resolvedSwitchStyles.handle,\n      switchStaticStyles.handle,\n      variantLayerStyles.handle,\n      animatedHandleStyle,\n    ],\n    [resolvedSwitchStyles.handle, variantLayerStyles.handle, animatedHandleStyle],\n  );\n\n  const accessibilityLabel = typeof label === 'string' ? label : undefined;\n  const resolvedAccessibilityHint = accessibilityHint ?? 'Double tap to toggle';\n\n  const labelContent = label && (\n    <FormLabel\n      color=\"inherit\"\n      variant=\"inherit\"\n      label={label}\n      required={required}\n      showRequiredAsterisk={required}\n      style={[resolvedSwitchStyles.text, variantLayerStyles.text]}\n    />\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\n                icon={onIcon}\n                variant=\"fill\"\n                style={[resolvedSwitchStyles.handleIcon, variantLayerStyles.handleIcon]}\n              />\n            </Animated.View>\n          )}\n          {offIcon && !isOn && (\n            <Animated.View style={switchStaticStyles.iconContainer}>\n              <IconSlot\n                icon={offIcon}\n                variant=\"fill\"\n                style={[resolvedSwitchStyles.handleIcon, variantLayerStyles.handleIcon]}\n              />\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":";;;;;;;;;;;AAmCA,MAAM,gBAA4C;CAChD,IAAI;CACJ,IAAI;CACL;AAED,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmC3B,MAAM,SAAS,KAAK,SAAS,OAAO,EAClC,MAAM,UACN,cAAc,OACd,UACA,OACA,gBAAgB,SAChB,OAAO,MACP,QACA,SACA,WAAW,OACX,UACA,mBACA,eAAe,OACf,KACA,GAAG,aACW;CACd,MAAM,eAAe,aAAa,KAAA;CAClC,MAAM,CAAC,cAAc,mBAAmB,SAAS,YAAY;CAC7D,MAAM,CAAC,sBAAsB,2BAA2B,SAAS,MAAM;CACvE,MAAM,OAAO,eAAe,WAAW;CACvC,MAAM,gBAAgB,OAAO,OAAO;CACpC,MAAM,EAAE,UAAU,cAAc;CAGhC,gBAAgB;EACd,MAAM,qBAAqB,YAAY;GAErC,wBAAwB,MADY,kBAAkB,uBAAuB,CAC/B;;EAEhD,oBAAoB;EAEpB,MAAM,eAAe,kBAAkB,iBACrC,uBACA,wBACD;EACD,aAAa,aAAa,QAAQ;IACjC,EAAE,CAAC;CAGN,MAAM,oBADqB,gBAAgB,uBACI,IAAI;CAEnD,MAAM,WAAW,sBACT,WAAW,OAAO,IAAI,GAAG,EAAE,UAAU,mBAAmB,CAAC,EAC/D,CAAC,MAAM,kBAAkB,CAC1B;CAED,MAAM,iBAAiB,cAAc;CAErC,MAAM,cAAc,kBAAkB;EACpC,IAAI,UACF;EAGF,MAAM,WAAW,CAAC;EAElB,IAAI,CAAC,cACH,gBAAgB,SAAS;EAG3B,WAAW,SAAS;IACnB;EAAC;EAAU;EAAM;EAAc;EAAS,CAAC;CAQ5C,MAAM,uBAJsB,aAAa,YAAY;EACnD;EACA,SAAS;EACV,CAC+C,IAAI;CAEpD,MAAM,qBAAqB,cAAc;EACvC,MAAM,aAAa,MAAM;EACzB,MAAM,iBAA0B,UAC9B,WAAW,iCAAiC,cAAc,GAAG,MAAM;EAIrE,OAAO;GACL,QAAQ,cAAyB,SAAS;GAC1C,YAAY,cAAyB,aAAa;GAClD,QAAQ,cAAyB,SAAS;GAC1C,MAAM,cAAyB,WAAW;GAC3C;IACA,CAAC,eAAe,MAAM,CAAC;CAG1B,MAAM,uBAAuB,wBAC3B,qBAAqB,QACrB,kBACD;CAED,MAAM,qBAAqB,uBAAuB;AAChD;EACA,OAAO,EACL,iBAAiB,WAAW,qBAAqB,OAAO,EAAE,UAAU,mBAAmB,CAAC,EACzF;GACD;CAEF,MAAM,sBAAsB,uBAAuB;AACjD;EACA,OAAO,EACL,WAAW,CAAC,EAAE,YAAY,SAAS,QAAQ,gBAAgB,CAAC,EAC7D;GACD;CAEF,MAAM,YAAkC,cAChC,CAAC,qBAAqB,MAAM,mBAAmB,KAAK,EAAE,UAAU,CAAC,CAAC,EACxE,CAAC,qBAAqB,MAAM,SAAS,CACtC;CAED,MAAM,aAAmC,cACjC;EACJ,qBAAqB;EACrB,mBAAmB;EACnB,mBAAmB;EAGnB,SAAS,OAAO,SAAS;EAC1B,EACD;EAAC,qBAAqB;EAAQ,mBAAmB;EAAQ;EAAmB,CAC7E;CAED,MAAM,cAAoC,cAClC;EACJ,qBAAqB;EACrB,mBAAmB;EACnB,mBAAmB;EACnB;EACD,EACD;EAAC,qBAAqB;EAAQ,mBAAmB;EAAQ;EAAoB,CAC9E;CAED,MAAM,qBAAqB,OAAO,UAAU,WAAW,QAAQ,KAAA;CAC/D,MAAM,4BAA4B,qBAAqB;CAEvD,MAAM,eAAe,SACnB,oBAAC,WAAD;EACE,OAAM;EACN,SAAQ;EACD;EACG;EACV,sBAAsB;EACtB,OAAO,CAAC,qBAAqB,MAAM,mBAAmB,KAAK;EAC3D,CAAA;CAGJ,MAAM,YAAY,eAAe,EAAE,MAAM,OAAO,OAAO,OAAO,GAAG,CAAC,KAAK,CAAC;CAExE,OACE,qBAAC,WAAD;EACO;EACL,SAAS;EACC;EACV,YAAA;EACA,mBAAkB;EAClB,oBAAoB;GAAE,SAAS;GAAM;GAAU;EAC3B;EACpB,mBAAmB;EACnB,oBAAoB;EACpB,GAAI;EACJ,OAAO;YAXT;GAaG,kBAAkB,WAAW;GAE9B,oBAAC,SAAS,MAAV;IAAe,OAAO;IAAY,2BAA0B;cAC1D,qBAAC,SAAS,MAAV;KAAe,OAAO;eAAtB,CACG,UAAU,QACT,oBAAC,SAAS,MAAV;MAAe,OAAO,mBAAmB;gBACvC,oBAAC,UAAD;OACE,MAAM;OACN,SAAQ;OACR,OAAO,CAAC,qBAAqB,YAAY,mBAAmB,WAAW;OACvE,CAAA;MACY,CAAA,EAEjB,WAAW,CAAC,QACX,oBAAC,SAAS,MAAV;MAAe,OAAO,mBAAmB;gBACvC,oBAAC,UAAD;OACE,MAAM;OACN,SAAQ;OACR,OAAO,CAAC,qBAAqB,YAAY,mBAAmB,WAAW;OACvE,CAAA;MACY,CAAA,CAEJ;;IACF,CAAA;GAEf,kBAAkB,SAAS;GAClB;;EAEd;AAEF,OAAO,cAAc;AAErB,MAAM,qBAAqBA,aAAW,QAAQ,WAAW;CACvD,QAAQ;EACN,cAAc,MAAM,aAAa;EACjC,YAAY;EACZ,gBAAgB;EACjB;CACD,eAAe;EACb,UAAU;EACV,YAAY;EACZ,gBAAgB;EACjB;CACD,OAAO;EACL,gBAAgB;EAChB,cAAc,MAAM,aAAa;EAClC;CACD,OAAO,EAAE,gBAAuC;EAC9C,eAAe;EACf,YAAY;EACZ,WAAW;EACX,SAAS,WAAW,KAAM;EAC3B;CACF,EAAE"}

package/dist/components/UDSGestureProvider.cjs

@@ -0,0 +1,4 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_components_UDSProvider = require("./UDSProvider.cjs");
+exports.UDSGestureProvider = require_components_UDSProvider.UDSGestureProvider;

package/dist/components/UDSGestureProvider.d.cts

@@ -0,0 +1,3 @@
+
+import { UDSGestureProvider, UDSGestureProviderProps } from "./UDSProvider.cjs";
+export { UDSGestureProvider, type UDSGestureProviderProps };

package/dist/components/UDSGestureProvider.d.ts

@@ -0,0 +1,3 @@
+
+import { UDSGestureProvider, UDSGestureProviderProps } from "./UDSProvider.js";
+export { UDSGestureProvider, type UDSGestureProviderProps };

package/dist/components/UDSGestureProvider.js

@@ -0,0 +1,3 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { UDSGestureProvider } from "./UDSProvider.js";
+export { UDSGestureProvider };

package/dist/components/UDSProvider.cjs

@@ -8,29 +8,34 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let react_native_gesture_handler = require("react-native-gesture-handler");
 //#region src/components/UDSProvider.tsx
 /**
-* Root provider for UDS Mobile.
+* Root gesture and portal provider for UDS Mobile overlays.
 *
 * Place this at the top of your app layout:
 *
 * @example
 * ```tsx
-* import { UDSProvider } from '@yahoo/uds-mobile/UDSProvider';
+* import { UDSGestureProvider } from '@yahoo/uds-mobile/UDSGestureProvider';
 *
 * export default function RootLayout() {
 *   return (
-*     <UDSProvider>
+*     <UDSGestureProvider>
 *       <Stack />
-*     </UDSProvider>
+*     </UDSGestureProvider>
 *   );
 * }
 * ```
 */
-const UDSProvider = (0, react.memo)(function UDSProvider({ children }) {
+const UDSGestureProvider = (0, react.memo)(function UDSGestureProvider({ children }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_gesture_handler.GestureHandlerRootView, {
 		style: styles.root,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_portal.PortalProvider, { children })
 	});
 });
+/**
+* @deprecated Use {@link UDSGestureProvider} from `@yahoo/uds-mobile/UDSGestureProvider`.
+*/
+const UDSProvider = UDSGestureProvider;
 const styles = react_native.StyleSheet.create({ root: { flex: 1 } });
 //#endregion
+exports.UDSGestureProvider = UDSGestureProvider;
 exports.UDSProvider = UDSProvider;

package/dist/components/UDSProvider.d.cts

@@ -3,28 +3,36 @@ import * as _$react from "react";
 import { ReactNode } from "react";
 
 //#region src/components/UDSProvider.d.ts
-interface UDSProviderProps {
+interface UDSGestureProviderProps {
   children: ReactNode;
 }
 /**
- * Root provider for UDS Mobile.
+ * Root gesture and portal provider for UDS Mobile overlays.
  *
  * Place this at the top of your app layout:
  *
  * @example
  * ```tsx
- * import { UDSProvider } from '@yahoo/uds-mobile/UDSProvider';
+ * import { UDSGestureProvider } from '@yahoo/uds-mobile/UDSGestureProvider';
  *
  * export default function RootLayout() {
  *   return (
- *     <UDSProvider>
+ *     <UDSGestureProvider>
  *       <Stack />
- *     </UDSProvider>
+ *     </UDSGestureProvider>
  *   );
  * }
  * ```
  */
-declare const UDSProvider: _$react.NamedExoticComponent<UDSProviderProps>;
+declare const UDSGestureProvider: _$react.NamedExoticComponent<UDSGestureProviderProps>;
+/**
+ * @deprecated Use {@link UDSGestureProvider} from `@yahoo/uds-mobile/UDSGestureProvider`.
+ */
+declare const UDSProvider: _$react.NamedExoticComponent<UDSGestureProviderProps>;
+/**
+ * @deprecated Use {@link UDSGestureProviderProps}.
+ */
+type UDSProviderProps = UDSGestureProviderProps;
 //#endregion
-export { UDSProvider, type UDSProviderProps };
+export { UDSGestureProvider, type UDSGestureProviderProps, UDSProvider, UDSProviderProps };
 //# sourceMappingURL=UDSProvider.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"UDSProvider.d.cts","names":[],"sources":["../../src/components/UDSProvider.tsx"],"mappings":";;;;;UAOU,gBAAA;EACR,QAAA,EAAU,SAAA;AAAA;AAR2B;;;;;AAQlB;;;;;;;;;;;;;AARkB,cA6BjC,WAAA,EAAW,OAAA,CAAA,oBAAA,CAAA,gBAAA"}
+{"version":3,"file":"UDSProvider.d.cts","names":[],"sources":["../../src/components/UDSProvider.tsx"],"mappings":";;;;;UAOU,uBAAA;EACR,QAAA,EAAU,SAAA;AAAA;AAR2B;;;;;AAQlB;;;;;AAqBG;;;;;AAwBxB;;;AArDuC,cA6BjC,kBAAA,EAAkB,OAAA,CAAA,oBAAA,CAAA,uBAAA;;;;cAWlB,WAAA,EAAW,OAAA,CAAA,oBAAA,CAAA,uBAAA;;;;KAaL,gBAAA,GAAmB,uBAAA"}

package/dist/components/UDSProvider.d.ts

@@ -3,28 +3,36 @@ import * as _$react from "react";
 import { ReactNode } from "react";
 
 //#region src/components/UDSProvider.d.ts
-interface UDSProviderProps {
+interface UDSGestureProviderProps {
   children: ReactNode;
 }
 /**
- * Root provider for UDS Mobile.
+ * Root gesture and portal provider for UDS Mobile overlays.
  *
  * Place this at the top of your app layout:
  *
  * @example
  * ```tsx
- * import { UDSProvider } from '@yahoo/uds-mobile/UDSProvider';
+ * import { UDSGestureProvider } from '@yahoo/uds-mobile/UDSGestureProvider';
  *
  * export default function RootLayout() {
  *   return (
- *     <UDSProvider>
+ *     <UDSGestureProvider>
  *       <Stack />
- *     </UDSProvider>
+ *     </UDSGestureProvider>
  *   );
  * }
  * ```
  */
-declare const UDSProvider: _$react.NamedExoticComponent<UDSProviderProps>;
+declare const UDSGestureProvider: _$react.NamedExoticComponent<UDSGestureProviderProps>;
+/**
+ * @deprecated Use {@link UDSGestureProvider} from `@yahoo/uds-mobile/UDSGestureProvider`.
+ */
+declare const UDSProvider: _$react.NamedExoticComponent<UDSGestureProviderProps>;
+/**
+ * @deprecated Use {@link UDSGestureProviderProps}.
+ */
+type UDSProviderProps = UDSGestureProviderProps;
 //#endregion
-export { UDSProvider, type UDSProviderProps };
+export { UDSGestureProvider, type UDSGestureProviderProps, UDSProvider, UDSProviderProps };
 //# sourceMappingURL=UDSProvider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"UDSProvider.d.ts","names":[],"sources":["../../src/components/UDSProvider.tsx"],"mappings":";;;;;UAOU,gBAAA;EACR,QAAA,EAAU,SAAA;AAAA;AAR2B;;;;;AAQlB;;;;;;;;;;;;;AARkB,cA6BjC,WAAA,EAAW,OAAA,CAAA,oBAAA,CAAA,gBAAA"}
+{"version":3,"file":"UDSProvider.d.ts","names":[],"sources":["../../src/components/UDSProvider.tsx"],"mappings":";;;;;UAOU,uBAAA;EACR,QAAA,EAAU,SAAA;AAAA;AAR2B;;;;;AAQlB;;;;;AAqBG;;;;;AAwBxB;;;AArDuC,cA6BjC,kBAAA,EAAkB,OAAA,CAAA,oBAAA,CAAA,uBAAA;;;;cAWlB,WAAA,EAAW,OAAA,CAAA,oBAAA,CAAA,uBAAA;;;;KAaL,gBAAA,GAAmB,uBAAA"}

package/dist/components/UDSProvider.js

@@ -6,31 +6,35 @@ import { jsx } from "react/jsx-runtime";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 //#region src/components/UDSProvider.tsx
 /**
-* Root provider for UDS Mobile.
+* Root gesture and portal provider for UDS Mobile overlays.
 *
 * Place this at the top of your app layout:
 *
 * @example
 * ```tsx
-* import { UDSProvider } from '@yahoo/uds-mobile/UDSProvider';
+* import { UDSGestureProvider } from '@yahoo/uds-mobile/UDSGestureProvider';
 *
 * export default function RootLayout() {
 *   return (
-*     <UDSProvider>
+*     <UDSGestureProvider>
 *       <Stack />
-*     </UDSProvider>
+*     </UDSGestureProvider>
 *   );
 * }
 * ```
 */
-const UDSProvider = memo(function UDSProvider({ children }) {
+const UDSGestureProvider = memo(function UDSGestureProvider({ children }) {
 	return /* @__PURE__ */ jsx(GestureHandlerRootView, {
 		style: styles.root,
 		children: /* @__PURE__ */ jsx(PortalProvider, { children })
 	});
 });
+/**
+* @deprecated Use {@link UDSGestureProvider} from `@yahoo/uds-mobile/UDSGestureProvider`.
+*/
+const UDSProvider = UDSGestureProvider;
 const styles = StyleSheet.create({ root: { flex: 1 } });
 //#endregion
-export { UDSProvider };
+export { UDSGestureProvider, UDSProvider };
 
 //# sourceMappingURL=UDSProvider.js.map

package/dist/components/UDSProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"UDSProvider.js","names":[],"sources":["../../src/components/UDSProvider.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { memo } from 'react';\nimport { StyleSheet } from 'react-native';\nimport { GestureHandlerRootView } from 'react-native-gesture-handler';\n\nimport { PortalProvider } from '../portal';\n\ninterface UDSProviderProps {\n  children: ReactNode;\n}\n\n/**\n * Root provider for UDS Mobile.\n *\n * Place this at the top of your app layout:\n *\n * @example\n * ```tsx\n * import { UDSProvider } from '@yahoo/uds-mobile/UDSProvider';\n *\n * export default function RootLayout() {\n *   return (\n *     <UDSProvider>\n *       <Stack />\n *     </UDSProvider>\n *   );\n * }\n * ```\n */\nconst UDSProvider = memo(function UDSProvider({ children }: UDSProviderProps) {\n  return (\n    <GestureHandlerRootView style={styles.root}>\n      <PortalProvider>{children}</PortalProvider>\n    </GestureHandlerRootView>\n  );\n});\n\nconst styles = StyleSheet.create({\n  root: {\n    flex: 1,\n  },\n});\n\nexport { UDSProvider };\nexport type { UDSProviderProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAM,cAAc,KAAK,SAAS,YAAY,EAAE,YAA8B;CAC5E,OACE,oBAAC,wBAAD;EAAwB,OAAO,OAAO;YACpC,oBAAC,gBAAD,EAAiB,UAA0B,CAAA;EACpB,CAAA;EAE3B;AAEF,MAAM,SAAS,WAAW,OAAO,EAC/B,MAAM,EACJ,MAAM,GACP,EACF,CAAC"}
+{"version":3,"file":"UDSProvider.js","names":[],"sources":["../../src/components/UDSProvider.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { memo } from 'react';\nimport { StyleSheet } from 'react-native';\nimport { GestureHandlerRootView } from 'react-native-gesture-handler';\n\nimport { PortalProvider } from '../portal';\n\ninterface UDSGestureProviderProps {\n  children: ReactNode;\n}\n\n/**\n * Root gesture and portal provider for UDS Mobile overlays.\n *\n * Place this at the top of your app layout:\n *\n * @example\n * ```tsx\n * import { UDSGestureProvider } from '@yahoo/uds-mobile/UDSGestureProvider';\n *\n * export default function RootLayout() {\n *   return (\n *     <UDSGestureProvider>\n *       <Stack />\n *     </UDSGestureProvider>\n *   );\n * }\n * ```\n */\nconst UDSGestureProvider = memo(function UDSGestureProvider({ children }: UDSGestureProviderProps) {\n  return (\n    <GestureHandlerRootView style={styles.root}>\n      <PortalProvider>{children}</PortalProvider>\n    </GestureHandlerRootView>\n  );\n});\n\n/**\n * @deprecated Use {@link UDSGestureProvider} from `@yahoo/uds-mobile/UDSGestureProvider`.\n */\nconst UDSProvider = UDSGestureProvider;\n\nconst styles = StyleSheet.create({\n  root: {\n    flex: 1,\n  },\n});\n\nexport { UDSGestureProvider, UDSProvider };\nexport type { UDSGestureProviderProps };\n/**\n * @deprecated Use {@link UDSGestureProviderProps}.\n */\nexport type UDSProviderProps = UDSGestureProviderProps;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAM,qBAAqB,KAAK,SAAS,mBAAmB,EAAE,YAAqC;CACjG,OACE,oBAAC,wBAAD;EAAwB,OAAO,OAAO;YACpC,oBAAC,gBAAD,EAAiB,UAA0B,CAAA;EACpB,CAAA;EAE3B;;;;AAKF,MAAM,cAAc;AAEpB,MAAM,SAAS,WAAW,OAAO,EAC/B,MAAM,EACJ,MAAM,GACP,EACF,CAAC"}

package/dist/components/internal/Overlay/OverlayPortal.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayPortal.js","names":[],"sources":["../../../../src/components/internal/Overlay/OverlayPortal.tsx"],"sourcesContent":["import { Platform } from 'react-native';\nimport { FullWindowOverlay } from 'react-native-screens';\n\nimport { Portal, usePortalContext } from '../../../portal';\nimport type { OverlayPortalProps } from './types';\n\n/**\n * Internal portal wrapper for mobile overlays.\n *\n * Uses `FullWindowOverlay` on iOS when requested, otherwise renders through the UDS portal host.\n */\nfunction OverlayPortal({ children, useFullWindowOverlay = true }: OverlayPortalProps) {\n  // Always assert UDSProvider presence, even when iOS renders through FullWindowOverlay.\n  usePortalContext();\n\n  if (Platform.OS === 'ios' && useFullWindowOverlay) {\n    return <FullWindowOverlay>{children}</FullWindowOverlay>;\n  }\n\n  return <Portal>{children}</Portal>;\n}\n\nexport { OverlayPortal };\n"],"mappings":";;;;;;;;;;;AAWA,SAAS,cAAc,EAAE,UAAU,uBAAuB,QAA4B;CAEpF,kBAAkB;CAElB,IAAI,SAAS,OAAO,SAAS,sBAC3B,OAAO,oBAAC,mBAAD,EAAoB,UAA6B,CAAA;CAG1D,OAAO,oBAAC,QAAD,EAAS,UAAkB,CAAA"}
+{"version":3,"file":"OverlayPortal.js","names":[],"sources":["../../../../src/components/internal/Overlay/OverlayPortal.tsx"],"sourcesContent":["import { Platform } from 'react-native';\nimport { FullWindowOverlay } from 'react-native-screens';\n\nimport { Portal, usePortalContext } from '../../../portal';\nimport type { OverlayPortalProps } from './types';\n\n/**\n * Internal portal wrapper for mobile overlays.\n *\n * Uses `FullWindowOverlay` on iOS when requested, otherwise renders through the UDS portal host.\n */\nfunction OverlayPortal({ children, useFullWindowOverlay = true }: OverlayPortalProps) {\n  // Always assert UDSGestureProvider presence, even when iOS renders through FullWindowOverlay.\n  usePortalContext();\n\n  if (Platform.OS === 'ios' && useFullWindowOverlay) {\n    return <FullWindowOverlay>{children}</FullWindowOverlay>;\n  }\n\n  return <Portal>{children}</Portal>;\n}\n\nexport { OverlayPortal };\n"],"mappings":";;;;;;;;;;;AAWA,SAAS,cAAc,EAAE,UAAU,uBAAuB,QAA4B;CAEpF,kBAAkB;CAElB,IAAI,SAAS,OAAO,SAAS,sBAC3B,OAAO,oBAAC,mBAAD,EAAoB,UAA6B,CAAA;CAG1D,OAAO,oBAAC,QAAD,EAAS,UAAkB,CAAA"}

package/dist/components/internal/Overlay/index.cjs

@@ -1,10 +1,12 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_components_internal_Overlay_OverlayPortal = require("./OverlayPortal.cjs");
+const require_components_internal_Overlay_measureTrigger = require("./measureTrigger.cjs");
 const require_components_internal_Overlay_useAnchoredPosition = require("./useAnchoredPosition.cjs");
 const require_components_internal_Overlay_useControllableState = require("./useControllableState.cjs");
 const require_components_internal_Overlay_useOverlayDismiss = require("./useOverlayDismiss.cjs");
 exports.OverlayPortal = require_components_internal_Overlay_OverlayPortal.OverlayPortal;
+exports.measureTrigger = require_components_internal_Overlay_measureTrigger.measureTrigger;
 exports.useAnchoredPosition = require_components_internal_Overlay_useAnchoredPosition.useAnchoredPosition;
 exports.useControllableState = require_components_internal_Overlay_useControllableState.useControllableState;
 exports.useOverlayDismiss = require_components_internal_Overlay_useOverlayDismiss.useOverlayDismiss;

package/dist/components/internal/Overlay/index.d.cts

@@ -1,7 +1,8 @@
 
 import { AnchoredAlign, AnchoredPlacement, AnchoredRect, AnchoredWidth, OverlayInsets, OverlayPortalProps, UseAnchoredPositionProps, UseAnchoredPositionResult, UseControllableStateProps, UseControllableStateResult, UseOverlayDismissProps } from "./types.cjs";
+import { measureTrigger } from "./measureTrigger.cjs";
 import { OverlayPortal } from "./OverlayPortal.cjs";
 import { useAnchoredPosition } from "./useAnchoredPosition.cjs";
 import { useControllableState } from "./useControllableState.cjs";
 import { useOverlayDismiss } from "./useOverlayDismiss.cjs";
-export { type AnchoredAlign, type AnchoredPlacement, type AnchoredRect, type AnchoredWidth, type OverlayInsets, OverlayPortal, type OverlayPortalProps, type UseAnchoredPositionProps, type UseAnchoredPositionResult, type UseControllableStateProps, type UseControllableStateResult, type UseOverlayDismissProps, useAnchoredPosition, useControllableState, useOverlayDismiss };
+export { type AnchoredAlign, type AnchoredPlacement, type AnchoredRect, type AnchoredWidth, type OverlayInsets, OverlayPortal, type OverlayPortalProps, type UseAnchoredPositionProps, type UseAnchoredPositionResult, type UseControllableStateProps, type UseControllableStateResult, type UseOverlayDismissProps, measureTrigger, useAnchoredPosition, useControllableState, useOverlayDismiss };

package/dist/components/internal/Overlay/index.d.ts

@@ -1,7 +1,8 @@
 
 import { AnchoredAlign, AnchoredPlacement, AnchoredRect, AnchoredWidth, OverlayInsets, OverlayPortalProps, UseAnchoredPositionProps, UseAnchoredPositionResult, UseControllableStateProps, UseControllableStateResult, UseOverlayDismissProps } from "./types.js";
+import { measureTrigger } from "./measureTrigger.js";
 import { OverlayPortal } from "./OverlayPortal.js";
 import { useAnchoredPosition } from "./useAnchoredPosition.js";
 import { useControllableState } from "./useControllableState.js";
 import { useOverlayDismiss } from "./useOverlayDismiss.js";
-export { type AnchoredAlign, type AnchoredPlacement, type AnchoredRect, type AnchoredWidth, type OverlayInsets, OverlayPortal, type OverlayPortalProps, type UseAnchoredPositionProps, type UseAnchoredPositionResult, type UseControllableStateProps, type UseControllableStateResult, type UseOverlayDismissProps, useAnchoredPosition, useControllableState, useOverlayDismiss };
+export { type AnchoredAlign, type AnchoredPlacement, type AnchoredRect, type AnchoredWidth, type OverlayInsets, OverlayPortal, type OverlayPortalProps, type UseAnchoredPositionProps, type UseAnchoredPositionResult, type UseControllableStateProps, type UseControllableStateResult, type UseOverlayDismissProps, measureTrigger, useAnchoredPosition, useControllableState, useOverlayDismiss };

package/dist/components/internal/Overlay/index.js

@@ -1,6 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 import { OverlayPortal } from "./OverlayPortal.js";
+import { measureTrigger } from "./measureTrigger.js";
 import { useAnchoredPosition } from "./useAnchoredPosition.js";
 import { useControllableState } from "./useControllableState.js";
 import { useOverlayDismiss } from "./useOverlayDismiss.js";
-export { OverlayPortal, useAnchoredPosition, useControllableState, useOverlayDismiss };
+export { OverlayPortal, measureTrigger, useAnchoredPosition, useControllableState, useOverlayDismiss };

package/dist/components/internal/Overlay/measureTrigger.cjs

@@ -0,0 +1,35 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/components/internal/Overlay/measureTrigger.ts
+function measureInRoot(measurable, onMeasure) {
+	if (!measurable?.measure) return false;
+	measurable.measure((x, y, width, height, pageX, pageY) => {
+		onMeasure({
+			x: typeof pageX === "number" ? pageX : x,
+			y: typeof pageY === "number" ? pageY : y,
+			width,
+			height
+		});
+	});
+	return true;
+}
+function measureInWindow(measurable, onMeasure) {
+	if (!measurable?.measureInWindow) return false;
+	measurable.measureInWindow((x, y, width, height) => {
+		onMeasure({
+			x,
+			y,
+			width,
+			height
+		});
+	});
+	return true;
+}
+function measureTrigger(node, fallbackRect, onMeasure) {
+	const measurable = node;
+	if (measureInRoot(measurable, onMeasure)) return;
+	if (measureInWindow(measurable, onMeasure)) return;
+	if (fallbackRect) onMeasure(fallbackRect);
+}
+//#endregion
+exports.measureTrigger = measureTrigger;

package/dist/components/internal/Overlay/measureTrigger.d.cts

@@ -0,0 +1,9 @@
+
+import { AnchoredRect } from "./types.cjs";
+import { View } from "react-native";
+
+//#region src/components/internal/Overlay/measureTrigger.d.ts
+declare function measureTrigger(node: View | null, fallbackRect: AnchoredRect | null, onMeasure: (rect: AnchoredRect) => void): void;
+//#endregion
+export { measureTrigger };
+//# sourceMappingURL=measureTrigger.d.cts.map

package/dist/components/internal/Overlay/measureTrigger.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"measureTrigger.d.cts","names":[],"sources":["../../../../src/components/internal/Overlay/measureTrigger.ts"],"mappings":";;;;;iBAqDS,cAAA,CACP,IAAA,EAAM,IAAA,SACN,YAAA,EAAc,YAAA,SACd,SAAA,GAAY,IAAA,EAAM,YAAA"}

package/dist/components/internal/Overlay/measureTrigger.d.ts

@@ -0,0 +1,9 @@
+
+import { AnchoredRect } from "./types.js";
+import { View } from "react-native";
+
+//#region src/components/internal/Overlay/measureTrigger.d.ts
+declare function measureTrigger(node: View | null, fallbackRect: AnchoredRect | null, onMeasure: (rect: AnchoredRect) => void): void;
+//#endregion
+export { measureTrigger };
+//# sourceMappingURL=measureTrigger.d.ts.map

package/dist/components/internal/Overlay/measureTrigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"measureTrigger.d.ts","names":[],"sources":["../../../../src/components/internal/Overlay/measureTrigger.ts"],"mappings":";;;;;iBAqDS,cAAA,CACP,IAAA,EAAM,IAAA,SACN,YAAA,EAAc,YAAA,SACd,SAAA,GAAY,IAAA,EAAM,YAAA"}

package/dist/components/internal/Overlay/measureTrigger.js

@@ -0,0 +1,36 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+//#region src/components/internal/Overlay/measureTrigger.ts
+function measureInRoot(measurable, onMeasure) {
+	if (!measurable?.measure) return false;
+	measurable.measure((x, y, width, height, pageX, pageY) => {
+		onMeasure({
+			x: typeof pageX === "number" ? pageX : x,
+			y: typeof pageY === "number" ? pageY : y,
+			width,
+			height
+		});
+	});
+	return true;
+}
+function measureInWindow(measurable, onMeasure) {
+	if (!measurable?.measureInWindow) return false;
+	measurable.measureInWindow((x, y, width, height) => {
+		onMeasure({
+			x,
+			y,
+			width,
+			height
+		});
+	});
+	return true;
+}
+function measureTrigger(node, fallbackRect, onMeasure) {
+	const measurable = node;
+	if (measureInRoot(measurable, onMeasure)) return;
+	if (measureInWindow(measurable, onMeasure)) return;
+	if (fallbackRect) onMeasure(fallbackRect);
+}
+//#endregion
+export { measureTrigger };
+
+//# sourceMappingURL=measureTrigger.js.map

package/dist/components/internal/Overlay/measureTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"measureTrigger.js","names":[],"sources":["../../../../src/components/internal/Overlay/measureTrigger.ts"],"sourcesContent":["import type { View } from 'react-native';\n\nimport type { AnchoredRect } from './types';\n\ntype MeasurableView = View & {\n  measureInWindow?: (\n    callback: (x: number, y: number, width: number, height: number) => void,\n  ) => void;\n  measure?: (\n    callback: (\n      x: number,\n      y: number,\n      width: number,\n      height: number,\n      pageX: number,\n      pageY: number,\n    ) => void,\n  ) => void;\n};\n\nfunction measureInRoot(\n  measurable: MeasurableView | null,\n  onMeasure: (rect: AnchoredRect) => void,\n): boolean {\n  if (!measurable?.measure) {\n    return false;\n  }\n\n  measurable.measure((x, y, width, height, pageX, pageY) => {\n    onMeasure({\n      x: typeof pageX === 'number' ? pageX : x,\n      y: typeof pageY === 'number' ? pageY : y,\n      width,\n      height,\n    });\n  });\n  return true;\n}\n\nfunction measureInWindow(\n  measurable: MeasurableView | null,\n  onMeasure: (rect: AnchoredRect) => void,\n): boolean {\n  if (!measurable?.measureInWindow) {\n    return false;\n  }\n\n  measurable.measureInWindow((x, y, width, height) => {\n    onMeasure({ x, y, width, height });\n  });\n  return true;\n}\n\nfunction measureTrigger(\n  node: View | null,\n  fallbackRect: AnchoredRect | null,\n  onMeasure: (rect: AnchoredRect) => void,\n): void {\n  const measurable = node as MeasurableView | null;\n\n  if (measureInRoot(measurable, onMeasure)) {\n    return;\n  }\n\n  if (measureInWindow(measurable, onMeasure)) {\n    return;\n  }\n\n  if (fallbackRect) {\n    onMeasure(fallbackRect);\n  }\n}\n\nexport { measureTrigger };\n"],"mappings":";;AAoBA,SAAS,cACP,YACA,WACS;CACT,IAAI,CAAC,YAAY,SACf,OAAO;CAGT,WAAW,SAAS,GAAG,GAAG,OAAO,QAAQ,OAAO,UAAU;EACxD,UAAU;GACR,GAAG,OAAO,UAAU,WAAW,QAAQ;GACvC,GAAG,OAAO,UAAU,WAAW,QAAQ;GACvC;GACA;GACD,CAAC;GACF;CACF,OAAO;;AAGT,SAAS,gBACP,YACA,WACS;CACT,IAAI,CAAC,YAAY,iBACf,OAAO;CAGT,WAAW,iBAAiB,GAAG,GAAG,OAAO,WAAW;EAClD,UAAU;GAAE;GAAG;GAAG;GAAO;GAAQ,CAAC;GAClC;CACF,OAAO;;AAGT,SAAS,eACP,MACA,cACA,WACM;CACN,MAAM,aAAa;CAEnB,IAAI,cAAc,YAAY,UAAU,EACtC;CAGF,IAAI,gBAAgB,YAAY,UAAU,EACxC;CAGF,IAAI,cACF,UAAU,aAAa"}

package/dist/jest/mocks/styles.cjs

@@ -17,6 +17,9 @@ var styles_exports = /* @__PURE__ */ require("../../_virtual/_rolldown/runtime.c
 	popoverStyles: () => popoverStyles,
 	radioStyles: () => radioStyles,
 	scrimStyles: () => scrimStyles,
+	selectContentStyles: () => selectContentStyles,
+	selectItemStyles: () => selectItemStyles,
+	selectStyles: () => selectStyles,
 	styles: () => styles,
 	switchStyles: () => switchStyles,
 	tabsStyles: () => tabsStyles,
@@ -52,12 +55,13 @@ const defaultFoundation = {
 	boxShadow: ""
 };
 function createStyleObject(baseStyles = {}) {
-	return new Proxy({
+	const useVariants = jest.fn();
+	const proxy = new Proxy({
 		...defaultFoundation,
 		...baseStyles,
-		useVariants: jest.fn()
+		useVariants
 	}, { get(target, prop) {
-		if (prop === "useVariants") return jest.fn();
+		if (prop === "useVariants") return useVariants;
 		if (prop in target) return target[prop];
 		if (typeof prop === "string") {
 			if (prop.includes("color") || prop.includes("Color")) return "#000000";
@@ -68,15 +72,20 @@ function createStyleObject(baseStyles = {}) {
 			if (prop.includes("gap") || prop.includes("Gap")) return 0;
 		}
 	} });
+	useVariants.mockReturnValue(proxy);
+	return proxy;
 }
 function createComponentStyles(styleKeys) {
-	const result = { useVariants: jest.fn() };
+	const useVariants = jest.fn();
+	const result = { useVariants };
 	for (const [key, baseStyles] of Object.entries(styleKeys)) result[key] = createStyleObject(baseStyles);
-	return new Proxy(result, { get(target, prop) {
-		if (prop === "useVariants") return jest.fn();
+	const proxy = new Proxy(result, { get(target, prop) {
+		if (prop === "useVariants") return useVariants;
 		if (prop in target) return target[prop];
 		if (typeof prop === "string") return createStyleObject();
 	} });
+	useVariants.mockReturnValue(proxy);
+	return proxy;
 }
 const styles = createComponentStyles({ foundation: defaultFoundation });
 const buttonStyles = createComponentStyles({
@@ -150,7 +159,24 @@ const inputStyles = createComponentStyles({
 		fontSize: 12,
 		lineHeight: 16,
 		color: "#666666"
-	}
+	},
+	labelRequired: { color: "#6001D2" },
+	inputWrapper: {
+		backgroundColor: "#FFFFFF",
+		borderColor: "#E0E0E0"
+	},
+	inputWrapperStatic: {
+		paddingHorizontal: 12,
+		gap: 8
+	},
+	inputWrapperDynamic: {
+		borderWidth: 1,
+		borderRadius: 8
+	},
+	inputPlaceholder: { color: "#666666" },
+	startIcon: { color: "#666666" },
+	endIcon: { color: "#666666" },
+	helperIcon: { color: "#666666" }
 });
 const checkboxStyles = createComponentStyles({
 	root: {
@@ -182,19 +208,25 @@ const switchStyles = createComponentStyles({
 		alignItems: "center",
 		gap: 8
 	},
-	track: {
+	switch: {
 		width: 48,
 		height: 28,
 		borderRadius: 14,
 		backgroundColor: "#E0E0E0"
 	},
-	thumb: {
+	handle: {
 		width: 24,
 		height: 24,
 		borderRadius: 12,
 		backgroundColor: "#FFFFFF"
 	},
-	label: {
+	handleIcon: {
+		fontSize: 16,
+		iconSizeToken: "sm",
+		lineHeight: 16,
+		color: "#000000"
+	},
+	text: {
 		fontFamily: "YahooProductSans-Regular",
 		fontSize: 14,
 		lineHeight: 20,
@@ -477,6 +509,29 @@ const modalStyles = createComponentStyles({
 	},
 	titleDescriptionWrapper: { gap: 8 }
 });
+const selectStyles = createComponentStyles({
+	startIcon: { color: "#666666" },
+	endIcon: { color: "#666666" }
+});
+const selectContentStyles = createComponentStyles({ root: {
+	backgroundColor: "#FFFFFF",
+	borderColor: "#E0E0E0",
+	borderWidth: 1,
+	borderRadius: 8,
+	boxShadow: "",
+	gap: 0,
+	paddingHorizontal: 0,
+	paddingVertical: 0
+} });
+const selectItemStyles = createComponentStyles({
+	root: {
+		backgroundColor: "#FFFFFF",
+		paddingHorizontal: 16,
+		paddingVertical: 8
+	},
+	text: { color: "#000000" },
+	endIcon: { color: "#6001D2" }
+});
 //#endregion
 exports.avatarStyles = avatarStyles;
 exports.badgeStyles = badgeStyles;
@@ -493,6 +548,9 @@ exports.paginationStyles = paginationStyles;
 exports.popoverStyles = popoverStyles;
 exports.radioStyles = radioStyles;
 exports.scrimStyles = scrimStyles;
+exports.selectContentStyles = selectContentStyles;
+exports.selectItemStyles = selectItemStyles;
+exports.selectStyles = selectStyles;
 exports.styles = styles;
 Object.defineProperty(exports, "styles_exports", {
 	enumerable: true,

package/dist/jest/mocks/styles.d.cts

@@ -1,6 +1,6 @@
 
 declare namespace styles_d_exports {
-  export { StyleProps, avatarStyles, badgeStyles, bottomSheetStyles, buttonStyles, checkboxStyles, chipStyles, dividerStyles, iconButtonStyles, inputStyles, linkStyles, modalStyles, paginationStyles, popoverStyles, radioStyles, scrimStyles, styles, switchStyles, tabsStyles, textStyles, toastStyles };
+  export { StyleProps, avatarStyles, badgeStyles, bottomSheetStyles, buttonStyles, checkboxStyles, chipStyles, dividerStyles, iconButtonStyles, inputStyles, linkStyles, modalStyles, paginationStyles, popoverStyles, radioStyles, scrimStyles, selectContentStyles, selectItemStyles, selectStyles, styles, switchStyles, tabsStyles, textStyles, toastStyles };
 }
 /**
  * Jest mock for generated/styles.
@@ -28,6 +28,9 @@ declare const tabsStyles: Record<string, unknown>;
 declare const paginationStyles: Record<string, unknown>;
 declare const toastStyles: Record<string, unknown>;
 declare const modalStyles: Record<string, unknown>;
+declare const selectStyles: Record<string, unknown>;
+declare const selectContentStyles: Record<string, unknown>;
+declare const selectItemStyles: Record<string, unknown>;
 interface StyleProps {
   color?: string;
   backgroundColor?: string;
@@ -37,5 +40,5 @@ interface StyleProps {
   [key: string]: unknown;
 }
 //#endregion
-export { StyleProps, avatarStyles, badgeStyles, bottomSheetStyles, buttonStyles, checkboxStyles, chipStyles, dividerStyles, iconButtonStyles, inputStyles, linkStyles, modalStyles, paginationStyles, popoverStyles, radioStyles, scrimStyles, styles, styles_d_exports, switchStyles, tabsStyles, textStyles, toastStyles };
+export { StyleProps, avatarStyles, badgeStyles, bottomSheetStyles, buttonStyles, checkboxStyles, chipStyles, dividerStyles, iconButtonStyles, inputStyles, linkStyles, modalStyles, paginationStyles, popoverStyles, radioStyles, scrimStyles, selectContentStyles, selectItemStyles, selectStyles, styles, styles_d_exports, switchStyles, tabsStyles, textStyles, toastStyles };
 //# sourceMappingURL=styles.d.cts.map

package/dist/jest/mocks/styles.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.cts","names":[],"sources":["../../../src/jest/mocks/styles.ts"],"mappings":";;;;;;;;;;cAyGa,MAAA,EAAM,MAAA;AAAA,cAKN,YAAA,EAAY,MAAA;AAAA,cAgCZ,UAAA,EAAU,MAAA;AAAA,cAUV,WAAA,EAAW,MAAA;AAAA,cAuCX,cAAA,EAAc,MAAA;AAAA,cA2Bd,YAAA,EAAY,MAAA;AAAA,cA4BZ,YAAA,EAAY,MAAA;AAAA,cAqBZ,WAAA,EAAW,MAAA;AAAA,cAmBX,UAAA,EAAU,MAAA;AAAA,cAsBV,aAAA,EAAa,MAAA;AAAA,cAiBb,UAAA,EAAU,MAAA;AAAA,cAgBV,WAAA,EAAW,MAAA;AAAA,cA8BX,gBAAA,EAAgB,MAAA;AAAA,cAehB,iBAAA,EAAiB,MAAA;AAAA,cA0BjB,WAAA,EAAW,MAAA;AAAA,cASX,aAAA,EAAa,MAAA;AAAA,cAmCb,UAAA,EAAU,MAAA;AAAA,cASV,gBAAA,EAAgB,MAAA;AAAA,cAuBhB,WAAA,EAAW,MAAA;AAAA,cAuCX,WAAA,EAAW,MAAA;AAAA,UAiDP,UAAA;EACf,KAAA;EACA,eAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EAAA,CACC,GAAA;AAAA"}
+{"version":3,"file":"styles.d.cts","names":[],"sources":["../../../src/jest/mocks/styles.ts"],"mappings":";;;;;;;;;;cA8Ga,MAAA,EAAM,MAAA;AAAA,cAKN,YAAA,EAAY,MAAA;AAAA,cAgCZ,UAAA,EAAU,MAAA;AAAA,cAUV,WAAA,EAAW,MAAA;AAAA,cAkEX,cAAA,EAAc,MAAA;AAAA,cA2Bd,YAAA,EAAY,MAAA;AAAA,cAkCZ,YAAA,EAAY,MAAA;AAAA,cAqBZ,WAAA,EAAW,MAAA;AAAA,cAmBX,UAAA,EAAU,MAAA;AAAA,cAsBV,aAAA,EAAa,MAAA;AAAA,cAiBb,UAAA,EAAU,MAAA;AAAA,cAgBV,WAAA,EAAW,MAAA;AAAA,cA8BX,gBAAA,EAAgB,MAAA;AAAA,cAehB,iBAAA,EAAiB,MAAA;AAAA,cA0BjB,WAAA,EAAW,MAAA;AAAA,cASX,aAAA,EAAa,MAAA;AAAA,cAmCb,UAAA,EAAU,MAAA;AAAA,cASV,gBAAA,EAAgB,MAAA;AAAA,cAuBhB,WAAA,EAAW,MAAA;AAAA,cAuCX,WAAA,EAAW,MAAA;AAAA,cAiDX,YAAA,EAAY,MAAA;AAAA,cASZ,mBAAA,EAAmB,MAAA;AAAA,cAanB,gBAAA,EAAgB,MAAA;AAAA,UAeZ,UAAA;EACf,KAAA;EACA,eAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EAAA,CACC,GAAA;AAAA"}