@yahoo/uds-mobile 2.14.0 → 2.16.0

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

@@ -0,0 +1,76 @@
+
+import { ChipSize, ChipVariant } from "../../types/dist/index.cjs";
+import { IconSlotType } from "../IconSlot.cjs";
+import { ReactNode, Ref } from "react";
+import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+
+//#region src/components/Chip/types.d.ts
+type ChipInteractionState = 'rest' | 'pressed';
+type ChipKind = 'dismissible' | 'link' | 'toggle';
+type ChipToggleState = 'off' | 'on';
+interface ChipSharedProps extends Omit<ViewProps, 'children' | 'style'> {
+  /** Ref to the underlying View. */
+  ref?: Ref<View>;
+  /** The visual style variant. @default 'primary' */
+  variant?: ChipVariant;
+  /** The size of the chip. @default 'md' */
+  size?: ChipSize;
+  /** Minimum width of the chip in pixels. */
+  minWidth?: number;
+  /** Maximum width of the chip in pixels. @default 200 */
+  maxWidth?: number;
+  /** Icon displayed at the start of the chip. */
+  startIcon?: IconSlotType;
+  /** Icon displayed at the end of the chip. */
+  endIcon?: IconSlotType;
+  /** Whether the chip is disabled. */
+  disabled?: boolean;
+  /** Chip label content. */
+  children?: ReactNode;
+  /** Style override for the chip root. */
+  style?: StyleProp<ViewStyle>;
+}
+interface ChipButtonProps extends ChipSharedProps {
+  /** Called when the chip is pressed. */
+  onPress?: () => void;
+}
+interface ChipDismissibleProps extends Omit<ChipSharedProps, 'endIcon'> {
+  /** Called when the dismiss button is pressed. */
+  onDismiss?: () => void;
+  /** Accessibility label for the dismiss button. */
+  dismissButtonAriaLabel?: string;
+  /** Custom icon for the dismiss button. */
+  dismissIcon?: IconSlotType;
+}
+interface ChipToggleProps extends ChipSharedProps {
+  /** Whether the chip is toggled/selected. */
+  isToggled?: boolean;
+  /** Called when the chip toggle state changes. */
+  onToggle?: (isToggled: boolean) => void;
+}
+interface ChipProps extends ChipSharedProps {
+  /** Called when the chip is pressed. Makes the chip interactive. */
+  onPress?: () => void;
+  /** Whether the chip is toggled/selected. */
+  isToggled?: boolean;
+  /** Called when the chip toggle state changes. */
+  onToggle?: (isToggled: boolean) => void;
+  /** Called when the dismiss button is pressed. Shows a dismiss icon. */
+  onDismiss?: () => void;
+  /** Accessibility label for the dismiss button. */
+  dismissButtonAriaLabel?: string;
+  /** Custom icon for the dismiss button. */
+  dismissIcon?: IconSlotType;
+}
+interface ChipBaseProps extends ChipSharedProps {
+  kind: ChipKind;
+  toggleState?: ChipToggleState;
+  interactionState?: ChipInteractionState;
+  pressable?: boolean;
+  accessibilityRole?: ViewProps['accessibilityRole'];
+  onPress?: () => void;
+  endContent?: ReactNode;
+}
+//#endregion
+export { type ChipBaseProps, type ChipButtonProps, type ChipDismissibleProps, type ChipInteractionState, type ChipKind, type ChipProps, type ChipSharedProps, type ChipSize, type ChipToggleProps, type ChipToggleState, type ChipVariant };
+//# sourceMappingURL=types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.cts","names":[],"sources":["../../../src/components/Chip/types.ts"],"mappings":";;;;;;;KAMK,oBAAA;AAAA,KACA,QAAA;AAAA,KACA,eAAA;AAAA,UAEK,eAAA,SAAwB,IAAA,CAAK,SAAA;;EAErC,GAAA,GAAM,GAAA,CAAI,IAAA;EANa;EAQvB,OAAA,GAAU,WAAA;EAPC;EASX,IAAA,GAAO,QAAA;EATI;EAWX,QAAA;EAVG;EAYH,QAAA;;EAEA,SAAA,GAAY,YAAA;EAdM;EAgBlB,OAAA,GAAU,YAAA;EAdc;EAgBxB,QAAA;EAhBqC;EAkBrC,QAAA,GAAW,SAAA;EAhBL;EAkBN,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;AAAA,UAGV,eAAA,SAAwB,eAAA;EATtB;EAWV,OAAA;AAAA;AAAA,UAGQ,oBAAA,SAA6B,IAAA,CAAK,eAAA;EA5BV;EA8BhC,SAAA;EA9BoC;EAgCpC,sBAAA;EAhCqC;EAkCrC,WAAA,GAAc,YAAA;AAAA;AAAA,UAGN,eAAA,SAAwB,eAAA;EAjChC;EAmCA,SAAA;EAjCA;EAmCA,QAAA,IAAY,SAAA;AAAA;AAAA,UAGJ,SAAA,SAAkB,eAAA;EAhC1B;EAkCA,OAAA;EAhCA;EAkCA,SAAA;EAhCA;EAkCA,QAAA,IAAY,SAAA;EAhCD;EAkCX,SAAA;EAhCQ;EAkCR,sBAAA;EAlC2B;EAoC3B,WAAA,GAAc,YAAA;AAAA;AAAA,UAGN,aAAA,SAAsB,eAAA;EAC9B,IAAA,EAAM,QAAA;EACN,WAAA,GAAc,eAAA;EACd,gBAAA,GAAmB,oBAAA;EACnB,SAAA;EACA,iBAAA,GAAoB,SAAA;EACpB,OAAA;EACA,UAAA,GAAa,SAAA;AAAA"}

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

@@ -0,0 +1,76 @@
+
+import { ChipSize, ChipVariant } from "../../types/dist/index.js";
+import { IconSlotType } from "../IconSlot.js";
+import { ReactNode, Ref } from "react";
+import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+
+//#region src/components/Chip/types.d.ts
+type ChipInteractionState = 'rest' | 'pressed';
+type ChipKind = 'dismissible' | 'link' | 'toggle';
+type ChipToggleState = 'off' | 'on';
+interface ChipSharedProps extends Omit<ViewProps, 'children' | 'style'> {
+  /** Ref to the underlying View. */
+  ref?: Ref<View>;
+  /** The visual style variant. @default 'primary' */
+  variant?: ChipVariant;
+  /** The size of the chip. @default 'md' */
+  size?: ChipSize;
+  /** Minimum width of the chip in pixels. */
+  minWidth?: number;
+  /** Maximum width of the chip in pixels. @default 200 */
+  maxWidth?: number;
+  /** Icon displayed at the start of the chip. */
+  startIcon?: IconSlotType;
+  /** Icon displayed at the end of the chip. */
+  endIcon?: IconSlotType;
+  /** Whether the chip is disabled. */
+  disabled?: boolean;
+  /** Chip label content. */
+  children?: ReactNode;
+  /** Style override for the chip root. */
+  style?: StyleProp<ViewStyle>;
+}
+interface ChipButtonProps extends ChipSharedProps {
+  /** Called when the chip is pressed. */
+  onPress?: () => void;
+}
+interface ChipDismissibleProps extends Omit<ChipSharedProps, 'endIcon'> {
+  /** Called when the dismiss button is pressed. */
+  onDismiss?: () => void;
+  /** Accessibility label for the dismiss button. */
+  dismissButtonAriaLabel?: string;
+  /** Custom icon for the dismiss button. */
+  dismissIcon?: IconSlotType;
+}
+interface ChipToggleProps extends ChipSharedProps {
+  /** Whether the chip is toggled/selected. */
+  isToggled?: boolean;
+  /** Called when the chip toggle state changes. */
+  onToggle?: (isToggled: boolean) => void;
+}
+interface ChipProps extends ChipSharedProps {
+  /** Called when the chip is pressed. Makes the chip interactive. */
+  onPress?: () => void;
+  /** Whether the chip is toggled/selected. */
+  isToggled?: boolean;
+  /** Called when the chip toggle state changes. */
+  onToggle?: (isToggled: boolean) => void;
+  /** Called when the dismiss button is pressed. Shows a dismiss icon. */
+  onDismiss?: () => void;
+  /** Accessibility label for the dismiss button. */
+  dismissButtonAriaLabel?: string;
+  /** Custom icon for the dismiss button. */
+  dismissIcon?: IconSlotType;
+}
+interface ChipBaseProps extends ChipSharedProps {
+  kind: ChipKind;
+  toggleState?: ChipToggleState;
+  interactionState?: ChipInteractionState;
+  pressable?: boolean;
+  accessibilityRole?: ViewProps['accessibilityRole'];
+  onPress?: () => void;
+  endContent?: ReactNode;
+}
+//#endregion
+export { type ChipBaseProps, type ChipButtonProps, type ChipDismissibleProps, type ChipInteractionState, type ChipKind, type ChipProps, type ChipSharedProps, type ChipSize, type ChipToggleProps, type ChipToggleState, type ChipVariant };
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/components/Chip/types.ts"],"mappings":";;;;;;;KAMK,oBAAA;AAAA,KACA,QAAA;AAAA,KACA,eAAA;AAAA,UAEK,eAAA,SAAwB,IAAA,CAAK,SAAA;;EAErC,GAAA,GAAM,GAAA,CAAI,IAAA;EANa;EAQvB,OAAA,GAAU,WAAA;EAPC;EASX,IAAA,GAAO,QAAA;EATI;EAWX,QAAA;EAVG;EAYH,QAAA;;EAEA,SAAA,GAAY,YAAA;EAdM;EAgBlB,OAAA,GAAU,YAAA;EAdc;EAgBxB,QAAA;EAhBqC;EAkBrC,QAAA,GAAW,SAAA;EAhBL;EAkBN,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;AAAA,UAGV,eAAA,SAAwB,eAAA;EATtB;EAWV,OAAA;AAAA;AAAA,UAGQ,oBAAA,SAA6B,IAAA,CAAK,eAAA;EA5BV;EA8BhC,SAAA;EA9BoC;EAgCpC,sBAAA;EAhCqC;EAkCrC,WAAA,GAAc,YAAA;AAAA;AAAA,UAGN,eAAA,SAAwB,eAAA;EAjChC;EAmCA,SAAA;EAjCA;EAmCA,QAAA,IAAY,SAAA;AAAA;AAAA,UAGJ,SAAA,SAAkB,eAAA;EAhC1B;EAkCA,OAAA;EAhCA;EAkCA,SAAA;EAhCA;EAkCA,QAAA,IAAY,SAAA;EAhCD;EAkCX,SAAA;EAhCQ;EAkCR,sBAAA;EAlC2B;EAoC3B,WAAA,GAAc,YAAA;AAAA;AAAA,UAGN,aAAA,SAAsB,eAAA;EAC9B,IAAA,EAAM,QAAA;EACN,WAAA,GAAc,eAAA;EACd,gBAAA,GAAmB,oBAAA;EACnB,SAAA;EACA,iBAAA,GAAoB,SAAA;EACpB,OAAA;EACA,UAAA,GAAa,SAAA;AAAA"}

package/dist/components/Chip/types.js

@@ -0,0 +1 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */

package/dist/components/Input.cjs

@@ -1,9 +1,10 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../_virtual/_rolldown/runtime.cjs");
+const require_components_HStack = require("./HStack.cjs");
 const require_components_IconSlot = require("./IconSlot.cjs");
 const require_components_Text = require("./Text.cjs");
-const require_components_HStack = require("./HStack.cjs");
+const require_components_InputHelpText = require("./InputHelpText.cjs");
 const require_components_VStack = require("./VStack.cjs");
 let react = require("react");
 let react_native = require("react-native");
@@ -128,23 +129,25 @@ const Input = (0, react.memo)(function Input({ label, size = "md", startIcon, en
 	const helpTextContent = (0, react.useMemo)(() => {
 		if (!helpText) return null;
 		const content = (0, lodash_es.isFunction)(helpText) ? helpText() : helpText;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_HStack.HStack, {
-			columnGap: "1",
-			alignItems: "center",
-			spacingTop: "2",
-			children: [helperTextIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
-				icon: helperTextIcon,
-				style: generated_styles.inputStyles.helperIcon
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
-				style: generated_styles.inputStyles.helperText,
-				children: content
-			})]
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_InputHelpText.InputHelpText, {
+			startIcon: helperTextIcon,
+			size,
+			isFilled: valueState === "filled",
+			disabled,
+			readOnly,
+			hasError,
+			pressed: isFocused,
+			children: content
 		});
 	}, [
+		disabled,
+		hasError,
 		helpText,
 		helperTextIcon,
-		generated_styles.inputStyles.helperIcon,
-		generated_styles.inputStyles.helperText
+		isFocused,
+		readOnly,
+		size,
+		valueState
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_VStack.VStack, {
 		style: rootStyle,

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

@@ -1 +1 @@
-{"version":3,"file":"Input.d.cts","names":[],"sources":["../../src/components/Input.tsx"],"mappings":";;;;;;;;;UAmBU,UAAA,SAEN,IAAA,CAAK,mBAAA,CAAoB,YAAA,aACzB,IAAA,CAAK,cAAA,yBACL,IAAA,CAAK,SAAA;;EAEP,GAAA,GAAM,GAAA,CAAI,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAAS;;;;;;;;;;;cA0Cf,KAAA,EAAK,OAAA,CAAA,oBAAA,CAAA,UAAA"}
+{"version":3,"file":"Input.d.cts","names":[],"sources":["../../src/components/Input.tsx"],"mappings":";;;;;;;;;UAoBU,UAAA,SAEN,IAAA,CAAK,mBAAA,CAAoB,YAAA,aACzB,IAAA,CAAK,cAAA,yBACL,IAAA,CAAK,SAAA;;EAEP,GAAA,GAAM,GAAA,CAAI,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAAS;;;;;;;;;;;cA0Cf,KAAA,EAAK,OAAA,CAAA,oBAAA,CAAA,UAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","names":[],"sources":["../../src/components/Input.tsx"],"mappings":";;;;;;;;;UAmBU,UAAA,SAEN,IAAA,CAAK,mBAAA,CAAoB,YAAA,aACzB,IAAA,CAAK,cAAA,yBACL,IAAA,CAAK,SAAA;;EAEP,GAAA,GAAM,GAAA,CAAI,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAAS;;;;;;;;;;;cA0Cf,KAAA,EAAK,OAAA,CAAA,oBAAA,CAAA,UAAA"}
+{"version":3,"file":"Input.d.ts","names":[],"sources":["../../src/components/Input.tsx"],"mappings":";;;;;;;;;UAoBU,UAAA,SAEN,IAAA,CAAK,mBAAA,CAAoB,YAAA,aACzB,IAAA,CAAK,cAAA,yBACL,IAAA,CAAK,SAAA;;EAEP,GAAA,GAAM,GAAA,CAAI,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAAS;;;;;;;;;;;cA0Cf,KAAA,EAAK,OAAA,CAAA,oBAAA,CAAA,UAAA"}

package/dist/components/Input.js

@@ -1,7 +1,8 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { HStack } from "./HStack.js";
 import { IconSlot } from "./IconSlot.js";
 import { Text as Text$1 } from "./Text.js";
-import { HStack } from "./HStack.js";
+import { InputHelpText } from "./InputHelpText.js";
 import { VStack } from "./VStack.js";
 import { memo, useCallback, useId, useMemo, useState } from "react";
 import { TextInput, View } from "react-native";
@@ -126,23 +127,25 @@ const Input = memo(function Input({ label, size = "md", startIcon, endIcon, help
 	const helpTextContent = useMemo(() => {
 		if (!helpText) return null;
 		const content = isFunction(helpText) ? helpText() : helpText;
-		return /* @__PURE__ */ jsxs(HStack, {
-			columnGap: "1",
-			alignItems: "center",
-			spacingTop: "2",
-			children: [helperTextIcon && /* @__PURE__ */ jsx(IconSlot, {
-				icon: helperTextIcon,
-				style: inputStyles.helperIcon
-			}), /* @__PURE__ */ jsx(Text$1, {
-				style: inputStyles.helperText,
-				children: content
-			})]
+		return /* @__PURE__ */ jsx(InputHelpText, {
+			startIcon: helperTextIcon,
+			size,
+			isFilled: valueState === "filled",
+			disabled,
+			readOnly,
+			hasError,
+			pressed: isFocused,
+			children: content
 		});
 	}, [
+		disabled,
+		hasError,
 		helpText,
 		helperTextIcon,
-		inputStyles.helperIcon,
-		inputStyles.helperText
+		isFocused,
+		readOnly,
+		size,
+		valueState
 	]);
 	return /* @__PURE__ */ jsxs(VStack, {
 		style: rootStyle,

package/dist/components/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["Text"],"sources":["../../src/components/Input.tsx"],"sourcesContent":["import type { UniversalInputProps } from '@yahoo/uds-types';\nimport { isFunction } from 'lodash-es';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { TextInputProps } from 'react-native';\nimport { TextInput, View } from 'react-native';\n\nimport { inputStyles } from '../../generated/styles';\nimport type { SizeProps } from '../types';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Text } from './Text';\nimport { VStack } from './VStack';\n\n/* -------------------------------------------------------------------------- */\n/*                                   Types                                    */\n/* -------------------------------------------------------------------------- */\n\ninterface InputProps\n  extends\n    Omit<UniversalInputProps<IconSlotType>, 'width'>,\n    Omit<TextInputProps, 'style' | 'editable'>,\n    Pick<SizeProps, 'width'> {\n  /** Ref to the underlying TextInput element */\n  ref?: Ref<TextInput>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Input Component                                */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **📦 An input that allows users to enter text and collect data.**\n *\n * @description\n * An input field is a component that takes text typed into it. It can also serve\n * as a way to display a selection and trigger a dropdown menu. Inputs are interactive\n * elements that users can click, tap, or otherwise engage with to collect data.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Input } from '@yahoo/uds-mobile/Input';\n *\n * <Input label=\"Name\" placeholder=\"Enter your name\" required />\n * <Input label=\"Email\" startIcon=\"Mail\" helpText=\"We'll never share your email\" />\n * <Input label=\"Password\" secureTextEntry hasError helpText=\"Password is required\" />\n * ```\n *\n * @usage\n * - Forms: For collecting data like names, emails, passwords, etc.\n * - Search Bars: Allowing users to enter search queries\n * - Filters/Settings: When users need to specify preferences\n * - Feedback/Comments: Letting users leave reviews or comments\n *\n * @accessibility\n * - Label is automatically associated with the input\n * - Help text is announced as accessibility hint\n * - Error state is communicated to screen readers\n * - Disabled state prevents interaction\n *\n * @see {@link Checkbox} for boolean selections\n * @see {@link Radio} for single-select options\n */\nconst Input = memo(function Input({\n  // Input props\n  label,\n  size = 'md',\n  startIcon,\n  endIcon,\n  helpText,\n  helperTextIcon,\n  hasError,\n  disabled,\n  readOnly,\n  required,\n  // Size props\n  width = '100%',\n  // TextInput props\n  defaultValue,\n  value: controlledValue,\n  onChangeText,\n  onFocus,\n  onBlur,\n  placeholder,\n  placeholderTextColor,\n  ref,\n  ...textInputProps\n}: InputProps) {\n  const generatedId = useId();\n  const uid = `uds-input-${generatedId}`;\n\n  /* --------------------------------- State ---------------------------------- */\n  const [internalValue, setInternalValue] = useState(defaultValue ?? '');\n  const [isFocused, setIsFocused] = useState(false);\n\n  // Support both controlled and uncontrolled modes\n  const isControlled = controlledValue !== undefined;\n  const value = isControlled ? controlledValue : internalValue;\n  const valueState = value ? 'filled' : 'empty';\n\n  /* -------------------------------- Handlers -------------------------------- */\n  const handleChangeText = useCallback(\n    (text: string) => {\n      if (!isControlled) {\n        setInternalValue(text);\n      }\n      onChangeText?.(text);\n    },\n    [isControlled, onChangeText],\n  );\n\n  const handleFocus = useCallback<NonNullable<TextInputProps['onFocus']>>(\n    (e) => {\n      setIsFocused(true);\n      onFocus?.(e);\n    },\n    [onFocus],\n  );\n\n  const handleBlur = useCallback<NonNullable<TextInputProps['onBlur']>>(\n    (e) => {\n      setIsFocused(false);\n      onBlur?.(e);\n    },\n    [onBlur],\n  );\n\n  /* --------------------------------- Styles --------------------------------- */\n  inputStyles.useVariants({\n    size,\n    value: valueState,\n    disabled,\n    pressed: isFocused,\n    readonly: readOnly,\n    invalid: hasError,\n  });\n\n  // Get placeholder color from theme styles\n  const computedPlaceholderColor = placeholderTextColor ?? inputStyles.inputPlaceholder.color;\n\n  const rootStyle = useMemo(() => [{ width, opacity: disabled ? 0.5 : 1 }], [width, disabled]);\n\n  const inputWrapperStyle = useMemo(\n    () => [\n      inputStyles.inputWrapper,\n      { flexDirection: 'row' as const, alignItems: 'center' as const },\n    ],\n    [inputStyles.inputWrapper],\n  );\n\n  // Android-specific fixes: TextInput on Android has rendering issues with text visibility\n  // - includeFontPadding: false removes Android's extra font padding that can clip text\n  // - textAlignVertical: 'center' ensures text is vertically centered in the input\n  // - paddingVertical: 0 removes default padding that interferes with flex layout\n  const textInputStyle = useMemo(\n    () => [\n      inputStyles.input,\n      {\n        flex: 1,\n        includeFontPadding: false,\n        textAlignVertical: 'center' as const,\n        paddingVertical: 0,\n      },\n    ],\n    [inputStyles.input],\n  );\n\n  /* ---------------------------- Render Helpers ------------------------------ */\n  const labelContent = useMemo(() => {\n    if (!label) {\n      return null;\n    }\n    const content = isFunction(label) ? label() : label;\n    return (\n      <HStack columnGap=\"1\" alignItems=\"flex-end\" spacingBottom=\"2\">\n        <Text style={inputStyles.label}>{content}</Text>\n        {required && <Text style={inputStyles.labelRequired}>*</Text>}\n      </HStack>\n    );\n  }, [label, required, inputStyles.label, inputStyles.labelRequired]);\n\n  const startIconContent = useMemo(() => {\n    if (!startIcon) {\n      return null;\n    }\n    return <IconSlot icon={startIcon} variant=\"outline\" style={inputStyles.startIcon} />;\n  }, [startIcon, inputStyles.startIcon]);\n\n  const endIconContent = useMemo(() => {\n    if (!endIcon) {\n      return null;\n    }\n    return <IconSlot icon={endIcon} variant=\"outline\" style={inputStyles.endIcon} />;\n  }, [endIcon, inputStyles.endIcon]);\n\n  const helpTextContent = useMemo(() => {\n    if (!helpText) {\n      return null;\n    }\n    const content = isFunction(helpText) ? helpText() : helpText;\n    return (\n      <HStack columnGap=\"1\" alignItems=\"center\" spacingTop=\"2\">\n        {helperTextIcon && <IconSlot icon={helperTextIcon} style={inputStyles.helperIcon} />}\n        <Text style={inputStyles.helperText}>{content}</Text>\n      </HStack>\n    );\n  }, [helpText, helperTextIcon, inputStyles.helperIcon, inputStyles.helperText]);\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <VStack style={rootStyle}>\n      {labelContent}\n\n      <View\n        style={inputWrapperStyle}\n        accessible\n        accessibilityRole=\"none\"\n        accessibilityLabel={typeof label === 'string' ? label : undefined}\n      >\n        {startIconContent}\n\n        <TextInput\n          ref={ref}\n          nativeID={uid}\n          value={value}\n          onChangeText={handleChangeText}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          placeholder={placeholder}\n          placeholderTextColor={computedPlaceholderColor}\n          editable={!disabled && !readOnly}\n          style={textInputStyle}\n          accessibilityLabel={typeof label === 'string' ? label : undefined}\n          accessibilityHint={typeof helpText === 'string' ? helpText : undefined}\n          accessibilityState={{ disabled }}\n          {...textInputProps}\n        />\n\n        {endIconContent}\n      </View>\n\n      {helpTextContent}\n    </VStack>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport { Input, type InputProps };\n"],"mappings":"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"}
+{"version":3,"file":"Input.js","names":["Text"],"sources":["../../src/components/Input.tsx"],"sourcesContent":["import type { UniversalInputProps } from '@yahoo/uds-types';\nimport { isFunction } from 'lodash-es';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { TextInputProps } from 'react-native';\nimport { TextInput, View } from 'react-native';\n\nimport { inputStyles } from '../../generated/styles';\nimport type { SizeProps } from '../types';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { InputHelpText } from './InputHelpText';\nimport { Text } from './Text';\nimport { VStack } from './VStack';\n\n/* -------------------------------------------------------------------------- */\n/*                                   Types                                    */\n/* -------------------------------------------------------------------------- */\n\ninterface InputProps\n  extends\n    Omit<UniversalInputProps<IconSlotType>, 'width'>,\n    Omit<TextInputProps, 'style' | 'editable'>,\n    Pick<SizeProps, 'width'> {\n  /** Ref to the underlying TextInput element */\n  ref?: Ref<TextInput>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Input Component                                */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **📦 An input that allows users to enter text and collect data.**\n *\n * @description\n * An input field is a component that takes text typed into it. It can also serve\n * as a way to display a selection and trigger a dropdown menu. Inputs are interactive\n * elements that users can click, tap, or otherwise engage with to collect data.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Input } from '@yahoo/uds-mobile/Input';\n *\n * <Input label=\"Name\" placeholder=\"Enter your name\" required />\n * <Input label=\"Email\" startIcon=\"Mail\" helpText=\"We'll never share your email\" />\n * <Input label=\"Password\" secureTextEntry hasError helpText=\"Password is required\" />\n * ```\n *\n * @usage\n * - Forms: For collecting data like names, emails, passwords, etc.\n * - Search Bars: Allowing users to enter search queries\n * - Filters/Settings: When users need to specify preferences\n * - Feedback/Comments: Letting users leave reviews or comments\n *\n * @accessibility\n * - Label is automatically associated with the input\n * - Help text is announced as accessibility hint\n * - Error state is communicated to screen readers\n * - Disabled state prevents interaction\n *\n * @see {@link Checkbox} for boolean selections\n * @see {@link Radio} for single-select options\n */\nconst Input = memo(function Input({\n  // Input props\n  label,\n  size = 'md',\n  startIcon,\n  endIcon,\n  helpText,\n  helperTextIcon,\n  hasError,\n  disabled,\n  readOnly,\n  required,\n  // Size props\n  width = '100%',\n  // TextInput props\n  defaultValue,\n  value: controlledValue,\n  onChangeText,\n  onFocus,\n  onBlur,\n  placeholder,\n  placeholderTextColor,\n  ref,\n  ...textInputProps\n}: InputProps) {\n  const generatedId = useId();\n  const uid = `uds-input-${generatedId}`;\n\n  /* --------------------------------- State ---------------------------------- */\n  const [internalValue, setInternalValue] = useState(defaultValue ?? '');\n  const [isFocused, setIsFocused] = useState(false);\n\n  // Support both controlled and uncontrolled modes\n  const isControlled = controlledValue !== undefined;\n  const value = isControlled ? controlledValue : internalValue;\n  const valueState = value ? 'filled' : 'empty';\n\n  /* -------------------------------- Handlers -------------------------------- */\n  const handleChangeText = useCallback(\n    (text: string) => {\n      if (!isControlled) {\n        setInternalValue(text);\n      }\n      onChangeText?.(text);\n    },\n    [isControlled, onChangeText],\n  );\n\n  const handleFocus = useCallback<NonNullable<TextInputProps['onFocus']>>(\n    (e) => {\n      setIsFocused(true);\n      onFocus?.(e);\n    },\n    [onFocus],\n  );\n\n  const handleBlur = useCallback<NonNullable<TextInputProps['onBlur']>>(\n    (e) => {\n      setIsFocused(false);\n      onBlur?.(e);\n    },\n    [onBlur],\n  );\n\n  /* --------------------------------- Styles --------------------------------- */\n  inputStyles.useVariants({\n    size,\n    value: valueState,\n    disabled,\n    pressed: isFocused,\n    readonly: readOnly,\n    invalid: hasError,\n  });\n\n  // Get placeholder color from theme styles\n  const computedPlaceholderColor = placeholderTextColor ?? inputStyles.inputPlaceholder.color;\n\n  const rootStyle = useMemo(() => [{ width, opacity: disabled ? 0.5 : 1 }], [width, disabled]);\n\n  const inputWrapperStyle = useMemo(\n    () => [\n      inputStyles.inputWrapper,\n      { flexDirection: 'row' as const, alignItems: 'center' as const },\n    ],\n    [inputStyles.inputWrapper],\n  );\n\n  // Android-specific fixes: TextInput on Android has rendering issues with text visibility\n  // - includeFontPadding: false removes Android's extra font padding that can clip text\n  // - textAlignVertical: 'center' ensures text is vertically centered in the input\n  // - paddingVertical: 0 removes default padding that interferes with flex layout\n  const textInputStyle = useMemo(\n    () => [\n      inputStyles.input,\n      {\n        flex: 1,\n        includeFontPadding: false,\n        textAlignVertical: 'center' as const,\n        paddingVertical: 0,\n      },\n    ],\n    [inputStyles.input],\n  );\n\n  /* ---------------------------- Render Helpers ------------------------------ */\n  const labelContent = useMemo(() => {\n    if (!label) {\n      return null;\n    }\n    const content = isFunction(label) ? label() : label;\n    return (\n      <HStack columnGap=\"1\" alignItems=\"flex-end\" spacingBottom=\"2\">\n        <Text style={inputStyles.label}>{content}</Text>\n        {required && <Text style={inputStyles.labelRequired}>*</Text>}\n      </HStack>\n    );\n  }, [label, required, inputStyles.label, inputStyles.labelRequired]);\n\n  const startIconContent = useMemo(() => {\n    if (!startIcon) {\n      return null;\n    }\n    return <IconSlot icon={startIcon} variant=\"outline\" style={inputStyles.startIcon} />;\n  }, [startIcon, inputStyles.startIcon]);\n\n  const endIconContent = useMemo(() => {\n    if (!endIcon) {\n      return null;\n    }\n    return <IconSlot icon={endIcon} variant=\"outline\" style={inputStyles.endIcon} />;\n  }, [endIcon, inputStyles.endIcon]);\n\n  const helpTextContent = useMemo(() => {\n    if (!helpText) {\n      return null;\n    }\n    const content = isFunction(helpText) ? helpText() : helpText;\n    return (\n      <InputHelpText\n        startIcon={helperTextIcon}\n        size={size}\n        isFilled={valueState === 'filled'}\n        disabled={disabled}\n        readOnly={readOnly}\n        hasError={hasError}\n        pressed={isFocused}\n      >\n        {content}\n      </InputHelpText>\n    );\n  }, [disabled, hasError, helpText, helperTextIcon, isFocused, readOnly, size, valueState]);\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <VStack style={rootStyle}>\n      {labelContent}\n\n      <View\n        style={inputWrapperStyle}\n        accessible\n        accessibilityRole=\"none\"\n        accessibilityLabel={typeof label === 'string' ? label : undefined}\n      >\n        {startIconContent}\n\n        <TextInput\n          ref={ref}\n          nativeID={uid}\n          value={value}\n          onChangeText={handleChangeText}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          placeholder={placeholder}\n          placeholderTextColor={computedPlaceholderColor}\n          editable={!disabled && !readOnly}\n          style={textInputStyle}\n          accessibilityLabel={typeof label === 'string' ? label : undefined}\n          accessibilityHint={typeof helpText === 'string' ? helpText : undefined}\n          accessibilityState={{ disabled }}\n          {...textInputProps}\n        />\n\n        {endIconContent}\n      </View>\n\n      {helpTextContent}\n    </VStack>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport { Input, type InputProps };\n"],"mappings":"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"}

package/dist/components/InputHelpText.cjs

@@ -0,0 +1,52 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../_virtual/_rolldown/runtime.cjs");
+const require_components_HStack = require("./HStack.cjs");
+const require_components_IconSlot = require("./IconSlot.cjs");
+const require_components_Text = require("./Text.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let generated_styles = require("../../generated/styles");
+//#region src/components/InputHelpText.tsx
+const InputHelpText = (0, react.memo)(function InputHelpText({ children, startIcon, endIcon, iconProps, size = "md", isFilled = false, disabled, readOnly, hasError, pressed, ref, ...hStackProps }) {
+	const { style: iconStyle, variant = "outline", ...resolvedIconProps } = iconProps ?? {};
+	const value = isFilled ? "filled" : "empty";
+	generated_styles.inputStyles.useVariants({
+		size,
+		value,
+		disabled,
+		pressed,
+		readonly: readOnly,
+		invalid: hasError
+	});
+	const resolvedIconStyle = (0, react.useMemo)(() => [generated_styles.inputStyles.helperIcon, iconStyle], [iconStyle, generated_styles.inputStyles.helperIcon]);
+	if (children === null || children === void 0 || children === false) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_HStack.HStack, {
+		ref,
+		columnGap: "1",
+		alignItems: "center",
+		spacingTop: "2",
+		...hStackProps,
+		children: [
+			startIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+				icon: startIcon,
+				variant,
+				style: resolvedIconStyle,
+				...resolvedIconProps
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+				style: generated_styles.inputStyles.helperText,
+				children
+			}),
+			endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+				icon: endIcon,
+				variant,
+				style: resolvedIconStyle,
+				...resolvedIconProps
+			})
+		]
+	});
+});
+InputHelpText.displayName = "InputHelpText";
+//#endregion
+exports.InputHelpText = InputHelpText;

package/dist/components/InputHelpText.d.cts

@@ -0,0 +1,37 @@
+
+import { InputSize } from "../types/dist/index.cjs";
+import { IconSlotProps, IconSlotType } from "./IconSlot.cjs";
+import { HStackProps } from "./HStack.cjs";
+import * as _$react from "react";
+import { ReactNode, Ref } from "react";
+import { View } from "react-native";
+
+//#region src/components/InputHelpText.d.ts
+interface InputHelpTextProps extends Omit<HStackProps, 'children' | 'ref'> {
+  /** Ref to the underlying root View. */
+  ref?: Ref<View>;
+  /** Helper text content. */
+  children?: ReactNode;
+  /** Icon to render before the help text. */
+  startIcon?: IconSlotType;
+  /** Icon to render after the help text. */
+  endIcon?: IconSlotType;
+  /** Props to apply to both helper icons. */
+  iconProps?: Omit<IconSlotProps, 'icon' | 'ref'>;
+  /** Input size used to resolve configured helper text styles. */
+  size?: InputSize;
+  /** Whether the associated input has a value. */
+  isFilled?: boolean;
+  /** Whether the associated input is disabled. */
+  disabled?: boolean;
+  /** Whether the associated input is read-only. */
+  readOnly?: boolean;
+  /** Whether the associated input has a validation error. */
+  hasError?: boolean;
+  /** Whether the associated input is focused or pressed. */
+  pressed?: boolean;
+}
+declare const InputHelpText: _$react.NamedExoticComponent<InputHelpTextProps>;
+//#endregion
+export { InputHelpText, type InputHelpTextProps };
+//# sourceMappingURL=InputHelpText.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputHelpText.d.cts","names":[],"sources":["../../src/components/InputHelpText.tsx"],"mappings":";;;;;;;;;UAaU,kBAAA,SAA2B,IAAA,CAAK,WAAA;;EAExC,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,QAAA,GAAW,SAAA;;EAEX,SAAA,GAAY,YAAA;EAJF;EAMV,OAAA,GAAU,YAAA;EAJC;EAMX,SAAA,GAAY,IAAA,CAAK,aAAA;EAFP;EAIV,IAAA,GAAO,SAAA;EAFK;EAIZ,QAAA;EAdmC;EAgBnC,QAAA;EAhBuC;EAkBvC,QAAA;EAlBwC;EAoBxC,QAAA;EAlBM;EAoBN,OAAA;AAAA;AAAA,cAGI,aAAA,EAAa,OAAA,CAAA,oBAAA,CAAA,kBAAA"}

package/dist/components/InputHelpText.d.ts

@@ -0,0 +1,37 @@
+
+import { InputSize } from "../types/dist/index.js";
+import { IconSlotProps, IconSlotType } from "./IconSlot.js";
+import { HStackProps } from "./HStack.js";
+import * as _$react from "react";
+import { ReactNode, Ref } from "react";
+import { View } from "react-native";
+
+//#region src/components/InputHelpText.d.ts
+interface InputHelpTextProps extends Omit<HStackProps, 'children' | 'ref'> {
+  /** Ref to the underlying root View. */
+  ref?: Ref<View>;
+  /** Helper text content. */
+  children?: ReactNode;
+  /** Icon to render before the help text. */
+  startIcon?: IconSlotType;
+  /** Icon to render after the help text. */
+  endIcon?: IconSlotType;
+  /** Props to apply to both helper icons. */
+  iconProps?: Omit<IconSlotProps, 'icon' | 'ref'>;
+  /** Input size used to resolve configured helper text styles. */
+  size?: InputSize;
+  /** Whether the associated input has a value. */
+  isFilled?: boolean;
+  /** Whether the associated input is disabled. */
+  disabled?: boolean;
+  /** Whether the associated input is read-only. */
+  readOnly?: boolean;
+  /** Whether the associated input has a validation error. */
+  hasError?: boolean;
+  /** Whether the associated input is focused or pressed. */
+  pressed?: boolean;
+}
+declare const InputHelpText: _$react.NamedExoticComponent<InputHelpTextProps>;
+//#endregion
+export { InputHelpText, type InputHelpTextProps };
+//# sourceMappingURL=InputHelpText.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputHelpText.d.ts","names":[],"sources":["../../src/components/InputHelpText.tsx"],"mappings":";;;;;;;;;UAaU,kBAAA,SAA2B,IAAA,CAAK,WAAA;;EAExC,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,QAAA,GAAW,SAAA;;EAEX,SAAA,GAAY,YAAA;EAJF;EAMV,OAAA,GAAU,YAAA;EAJC;EAMX,SAAA,GAAY,IAAA,CAAK,aAAA;EAFP;EAIV,IAAA,GAAO,SAAA;EAFK;EAIZ,QAAA;EAdmC;EAgBnC,QAAA;EAhBuC;EAkBvC,QAAA;EAlBwC;EAoBxC,QAAA;EAlBM;EAoBN,OAAA;AAAA;AAAA,cAGI,aAAA,EAAa,OAAA,CAAA,oBAAA,CAAA,kBAAA"}

package/dist/components/InputHelpText.js

@@ -0,0 +1,52 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { HStack } from "./HStack.js";
+import { IconSlot } from "./IconSlot.js";
+import { Text } from "./Text.js";
+import { memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { inputStyles } from "../../generated/styles";
+//#region src/components/InputHelpText.tsx
+const InputHelpText = memo(function InputHelpText({ children, startIcon, endIcon, iconProps, size = "md", isFilled = false, disabled, readOnly, hasError, pressed, ref, ...hStackProps }) {
+	const { style: iconStyle, variant = "outline", ...resolvedIconProps } = iconProps ?? {};
+	const value = isFilled ? "filled" : "empty";
+	inputStyles.useVariants({
+		size,
+		value,
+		disabled,
+		pressed,
+		readonly: readOnly,
+		invalid: hasError
+	});
+	const resolvedIconStyle = useMemo(() => [inputStyles.helperIcon, iconStyle], [iconStyle, inputStyles.helperIcon]);
+	if (children === null || children === void 0 || children === false) return null;
+	return /* @__PURE__ */ jsxs(HStack, {
+		ref,
+		columnGap: "1",
+		alignItems: "center",
+		spacingTop: "2",
+		...hStackProps,
+		children: [
+			startIcon && /* @__PURE__ */ jsx(IconSlot, {
+				icon: startIcon,
+				variant,
+				style: resolvedIconStyle,
+				...resolvedIconProps
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				style: inputStyles.helperText,
+				children
+			}),
+			endIcon && /* @__PURE__ */ jsx(IconSlot, {
+				icon: endIcon,
+				variant,
+				style: resolvedIconStyle,
+				...resolvedIconProps
+			})
+		]
+	});
+});
+InputHelpText.displayName = "InputHelpText";
+//#endregion
+export { InputHelpText };
+
+//# sourceMappingURL=InputHelpText.js.map

package/dist/components/InputHelpText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputHelpText.js","names":[],"sources":["../../src/components/InputHelpText.tsx"],"sourcesContent":["import type { InputSize } from '@yahoo/uds-types';\nimport type { ReactNode, Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { View } from 'react-native';\n\nimport { inputStyles } from '../../generated/styles';\nimport type { HStackProps } from './HStack';\nimport { HStack } from './HStack';\nimport type { IconSlotProps, IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport type { TextProps } from './Text';\nimport { Text } from './Text';\n\ninterface InputHelpTextProps extends Omit<HStackProps, 'children' | 'ref'> {\n  /** Ref to the underlying root View. */\n  ref?: Ref<View>;\n  /** Helper text content. */\n  children?: ReactNode;\n  /** Icon to render before the help text. */\n  startIcon?: IconSlotType;\n  /** Icon to render after the help text. */\n  endIcon?: IconSlotType;\n  /** Props to apply to both helper icons. */\n  iconProps?: Omit<IconSlotProps, 'icon' | 'ref'>;\n  /** Input size used to resolve configured helper text styles. */\n  size?: InputSize;\n  /** Whether the associated input has a value. */\n  isFilled?: boolean;\n  /** Whether the associated input is disabled. */\n  disabled?: boolean;\n  /** Whether the associated input is read-only. */\n  readOnly?: boolean;\n  /** Whether the associated input has a validation error. */\n  hasError?: boolean;\n  /** Whether the associated input is focused or pressed. */\n  pressed?: boolean;\n}\n\nconst InputHelpText = memo(function InputHelpText({\n  children,\n  startIcon,\n  endIcon,\n  iconProps,\n  size = 'md',\n  isFilled = false,\n  disabled,\n  readOnly,\n  hasError,\n  pressed,\n  ref,\n  ...hStackProps\n}: InputHelpTextProps) {\n  const { style: iconStyle, variant = 'outline', ...resolvedIconProps } = iconProps ?? {};\n  const value = isFilled ? 'filled' : 'empty';\n\n  inputStyles.useVariants({\n    size,\n    value,\n    disabled,\n    pressed,\n    readonly: readOnly,\n    invalid: hasError,\n  });\n\n  const resolvedIconStyle = useMemo(\n    () => [inputStyles.helperIcon, iconStyle],\n    [iconStyle, inputStyles.helperIcon],\n  );\n\n  if (children === null || children === undefined || children === false) {\n    return null;\n  }\n\n  return (\n    <HStack ref={ref} columnGap=\"1\" alignItems=\"center\" spacingTop=\"2\" {...hStackProps}>\n      {startIcon && (\n        <IconSlot\n          icon={startIcon}\n          variant={variant}\n          style={resolvedIconStyle}\n          {...resolvedIconProps}\n        />\n      )}\n\n      <Text style={inputStyles.helperText as TextProps['style']}>{children}</Text>\n\n      {endIcon && (\n        <IconSlot\n          icon={endIcon}\n          variant={variant}\n          style={resolvedIconStyle}\n          {...resolvedIconProps}\n        />\n      )}\n    </HStack>\n  );\n});\n\nInputHelpText.displayName = 'InputHelpText';\n\nexport { InputHelpText, type InputHelpTextProps };\n"],"mappings":";;;;;;;;AAsCA,MAAM,gBAAgB,KAAK,SAAS,cAAc,EAChD,UACA,WACA,SACA,WACA,OAAO,MACP,WAAW,OACX,UACA,UACA,UACA,SACA,KACA,GAAG,eACkB;CACrB,MAAM,EAAE,OAAO,WAAW,UAAU,WAAW,GAAG,sBAAsB,aAAa,EAAE;CACvF,MAAM,QAAQ,WAAW,WAAW;CAEpC,YAAY,YAAY;EACtB;EACA;EACA;EACA;EACA,UAAU;EACV,SAAS;EACV,CAAC;CAEF,MAAM,oBAAoB,cAClB,CAAC,YAAY,YAAY,UAAU,EACzC,CAAC,WAAW,YAAY,WAAW,CACpC;CAED,IAAI,aAAa,QAAQ,aAAa,KAAA,KAAa,aAAa,OAC9D,OAAO;CAGT,OACE,qBAAC,QAAD;EAAa;EAAK,WAAU;EAAI,YAAW;EAAS,YAAW;EAAI,GAAI;YAAvE;GACG,aACC,oBAAC,UAAD;IACE,MAAM;IACG;IACT,OAAO;IACP,GAAI;IACJ,CAAA;GAGJ,oBAAC,MAAD;IAAM,OAAO,YAAY;IAAmC;IAAgB,CAAA;GAE3E,WACC,oBAAC,UAAD;IACE,MAAM;IACG;IACT,OAAO;IACP,GAAI;IACJ,CAAA;GAEG;;EAEX;AAEF,cAAc,cAAc"}

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

@@ -0,0 +1,20 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_portal = require("../../../portal.cjs");
+let react_native = require("react-native");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_native_screens = require("react-native-screens");
+//#region src/components/internal/Overlay/OverlayPortal.tsx
+/**
+* Internal portal wrapper for mobile overlays.
+*
+* Uses `FullWindowOverlay` on iOS when requested, otherwise renders through the UDS portal host.
+*/
+function OverlayPortal({ children, useFullWindowOverlay = true }) {
+	require_portal.usePortalContext();
+	if (react_native.Platform.OS === "ios" && useFullWindowOverlay) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_screens.FullWindowOverlay, { children });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_portal.Portal, { children });
+}
+//#endregion
+exports.OverlayPortal = OverlayPortal;

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

@@ -0,0 +1,17 @@
+
+import { OverlayPortalProps } from "./types.cjs";
+import * as _$react from "react";
+
+//#region src/components/internal/Overlay/OverlayPortal.d.ts
+/**
+ * Internal portal wrapper for mobile overlays.
+ *
+ * Uses `FullWindowOverlay` on iOS when requested, otherwise renders through the UDS portal host.
+ */
+declare function OverlayPortal({
+  children,
+  useFullWindowOverlay
+}: OverlayPortalProps): _$react.JSX.Element;
+//#endregion
+export { OverlayPortal };
+//# sourceMappingURL=OverlayPortal.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayPortal.d.cts","names":[],"sources":["../../../../src/components/internal/Overlay/OverlayPortal.tsx"],"mappings":";;;;;;;;AAIkD;;iBAOzC,aAAA,CAAA;EAAgB,QAAA;EAAU;AAAA,GAA+B,kBAAA,GAAkB,OAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,17 @@
+
+import { OverlayPortalProps } from "./types.js";
+import * as _$react from "react";
+
+//#region src/components/internal/Overlay/OverlayPortal.d.ts
+/**
+ * Internal portal wrapper for mobile overlays.
+ *
+ * Uses `FullWindowOverlay` on iOS when requested, otherwise renders through the UDS portal host.
+ */
+declare function OverlayPortal({
+  children,
+  useFullWindowOverlay
+}: OverlayPortalProps): _$react.JSX.Element;
+//#endregion
+export { OverlayPortal };
+//# sourceMappingURL=OverlayPortal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayPortal.d.ts","names":[],"sources":["../../../../src/components/internal/Overlay/OverlayPortal.tsx"],"mappings":";;;;;;;;AAIkD;;iBAOzC,aAAA,CAAA;EAAgB,QAAA;EAAU;AAAA,GAA+B,kBAAA,GAAkB,OAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,20 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { Portal, usePortalContext } from "../../../portal.js";
+import { Platform } from "react-native";
+import { jsx } from "react/jsx-runtime";
+import { FullWindowOverlay } from "react-native-screens";
+//#region src/components/internal/Overlay/OverlayPortal.tsx
+/**
+* Internal portal wrapper for mobile overlays.
+*
+* Uses `FullWindowOverlay` on iOS when requested, otherwise renders through the UDS portal host.
+*/
+function OverlayPortal({ children, useFullWindowOverlay = true }) {
+	usePortalContext();
+	if (Platform.OS === "ios" && useFullWindowOverlay) return /* @__PURE__ */ jsx(FullWindowOverlay, { children });
+	return /* @__PURE__ */ jsx(Portal, { children });
+}
+//#endregion
+export { OverlayPortal };
+
+//# sourceMappingURL=OverlayPortal.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,6 @@
+/*! © 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_useControllableState = require("./useControllableState.cjs");
+exports.OverlayPortal = require_components_internal_Overlay_OverlayPortal.OverlayPortal;
+exports.useControllableState = require_components_internal_Overlay_useControllableState.useControllableState;