@yahoo/uds-mobile 1.0.0

package/dist/components/Image.mjs

@@ -0,0 +1,104 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { memo, useMemo } from "react";
+import { Image as Image$1 } from "react-native";
+import { styles } from "../../generated/styles";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Image.tsx
+const CONTENT_FIT_TO_RESIZE_MODE = {
+	cover: "cover",
+	contain: "contain",
+	fill: "stretch",
+	none: "center",
+	"scale-down": "contain"
+};
+/**
+* **A component for displaying images**
+*
+* @description
+* Wrapper for the React Native Image component with UDS styling props.
+*
+* @example
+* ```tsx
+* import { Image } from '~/components/ui/Image';
+*
+* <Image src="https://example.com/image.png" width={200} height={150} />
+* <Image src={require('./local-image.png')} contentFit="cover" borderRadius="md" />
+* ```
+*/
+const Image = memo(function Image$2({ src, alt, width, height, contentFit = "cover", style, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, display, overflow, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, ref, ...props }) {
+	styles.useVariants({
+		backgroundColor,
+		borderRadius,
+		borderTopStartRadius,
+		borderTopEndRadius,
+		borderBottomStartRadius,
+		borderBottomEndRadius,
+		borderColor,
+		borderStartColor,
+		borderEndColor,
+		borderTopColor,
+		borderBottomColor,
+		borderWidth,
+		borderVerticalWidth,
+		borderHorizontalWidth,
+		borderStartWidth,
+		borderEndWidth,
+		borderTopWidth,
+		borderBottomWidth,
+		alignContent,
+		alignItems,
+		alignSelf,
+		flex,
+		flexDirection,
+		flexGrow,
+		flexShrink,
+		flexWrap,
+		justifyContent,
+		display,
+		overflow,
+		spacing,
+		spacingHorizontal,
+		spacingVertical,
+		spacingBottom,
+		spacingEnd,
+		spacingStart,
+		spacingTop,
+		offset,
+		offsetVertical,
+		offsetHorizontal,
+		offsetBottom,
+		offsetEnd,
+		offsetStart,
+		offsetTop,
+		columnGap,
+		rowGap
+	});
+	const source = useMemo(() => typeof src === "string" ? { uri: src } : src, [src]);
+	const imageStyles = useMemo(() => [
+		styles.foundation,
+		{
+			width,
+			height
+		},
+		style
+	], [
+		styles.foundation,
+		width,
+		height,
+		style
+	]);
+	return /* @__PURE__ */ jsx(Image$1, {
+		ref,
+		source,
+		accessibilityLabel: alt,
+		resizeMode: CONTENT_FIT_TO_RESIZE_MODE[contentFit],
+		style: imageStyles,
+		...props
+	});
+});
+Image.displayName = "Image";
+
+//#endregion
+export { Image };
+//# sourceMappingURL=Image.mjs.map

package/dist/components/Image.mjs.map

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

package/dist/components/Input.cjs

@@ -0,0 +1,174 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_components_IconSlot = require('./IconSlot.cjs');
+const require_components_Text = require('./Text.cjs');
+const require_components_HStack = require('./HStack.cjs');
+const require_components_VStack = require('./VStack.cjs');
+let react = require("react");
+let react_native = require("react-native");
+let generated_styles = require("../../generated/styles");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lodash_es = require("lodash-es");
+
+//#region src/components/Input.tsx
+/**
+* **📦 An input that allows users to enter text and collect data.**
+*
+* @description
+* An input field is a component that takes text typed into it. It can also serve
+* as a way to display a selection and trigger a dropdown menu. Inputs are interactive
+* elements that users can click, tap, or otherwise engage with to collect data.
+*
+* @example
+* ```tsx
+* import { Input } from '@yahoo/uds-mobile';
+*
+* <Input label="Name" placeholder="Enter your name" required />
+* ```
+*
+* @usage
+* - Forms: For collecting data like names, emails, passwords, etc.
+* - Search Bars: Allowing users to enter search queries.
+* - Filters/Settings: When users need to specify preferences.
+* - Feedback/Comments: Letting users leave reviews or comments.
+*
+* @see The {@link https://uds.build/docs/components/input Input Docs} for more info
+*/
+const Input = (0, react.memo)(function Input$1({ label, size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, disabled, readOnly, required, width = "100%", defaultValue, value: controlledValue, onChangeText, onFocus, onBlur, placeholder, placeholderTextColor, ref, ...textInputProps }) {
+	const uid = `uds-input-${(0, react.useId)()}`;
+	const [internalValue, setInternalValue] = (0, react.useState)(defaultValue ?? "");
+	const [isFocused, setIsFocused] = (0, react.useState)(false);
+	const isControlled = controlledValue !== void 0;
+	const value = isControlled ? controlledValue : internalValue;
+	const valueState = value ? "filled" : "empty";
+	const handleChangeText = (0, react.useCallback)((text) => {
+		if (!isControlled) setInternalValue(text);
+		onChangeText?.(text);
+	}, [isControlled, onChangeText]);
+	const handleFocus = (0, react.useCallback)((e) => {
+		setIsFocused(true);
+		onFocus?.(e);
+	}, [onFocus]);
+	const handleBlur = (0, react.useCallback)((e) => {
+		setIsFocused(false);
+		onBlur?.(e);
+	}, [onBlur]);
+	generated_styles.inputStyles.useVariants({
+		size,
+		value: valueState,
+		disabled,
+		pressed: isFocused,
+		readonly: readOnly,
+		invalid: hasError
+	});
+	const computedPlaceholderColor = placeholderTextColor ?? generated_styles.inputStyles.inputPlaceholder.color;
+	const rootStyle = (0, react.useMemo)(() => [{
+		width,
+		opacity: disabled ? .5 : 1
+	}], [width, disabled]);
+	const inputWrapperStyle = (0, react.useMemo)(() => [generated_styles.inputStyles.inputWrapper, {
+		flexDirection: "row",
+		alignItems: "center"
+	}], [generated_styles.inputStyles.inputWrapper]);
+	const textInputStyle = (0, react.useMemo)(() => [generated_styles.inputStyles.input, {
+		flex: 1,
+		includeFontPadding: false,
+		textAlignVertical: "center",
+		paddingVertical: 0
+	}], [generated_styles.inputStyles.input]);
+	const labelContent = (0, react.useMemo)(() => {
+		if (!label) return null;
+		const content = (0, lodash_es.isFunction)(label) ? label() : label;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_HStack.HStack, {
+			columnGap: "1",
+			alignItems: "flex-end",
+			spacingBottom: "2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+				style: generated_styles.inputStyles.label,
+				children: content
+			}), required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+				style: generated_styles.inputStyles.labelRequired,
+				children: "*"
+			})]
+		});
+	}, [
+		label,
+		required,
+		generated_styles.inputStyles.label,
+		generated_styles.inputStyles.labelRequired
+	]);
+	const startIconContent = (0, react.useMemo)(() => {
+		if (!startIcon) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+			icon: startIcon,
+			variant: "outline",
+			style: generated_styles.inputStyles.startIcon
+		});
+	}, [startIcon, generated_styles.inputStyles.startIcon]);
+	const endIconContent = (0, react.useMemo)(() => {
+		if (!endIcon) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+			icon: endIcon,
+			variant: "outline",
+			style: generated_styles.inputStyles.endIcon
+		});
+	}, [endIcon, generated_styles.inputStyles.endIcon]);
+	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
+			})]
+		});
+	}, [
+		helpText,
+		helperTextIcon,
+		generated_styles.inputStyles.helperIcon,
+		generated_styles.inputStyles.helperText
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_VStack.VStack, {
+		style: rootStyle,
+		children: [
+			labelContent,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
+				style: inputWrapperStyle,
+				accessible: true,
+				accessibilityRole: "none",
+				accessibilityLabel: typeof label === "string" ? label : void 0,
+				children: [
+					startIconContent,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.TextInput, {
+						ref,
+						nativeID: uid,
+						value,
+						onChangeText: handleChangeText,
+						onFocus: handleFocus,
+						onBlur: handleBlur,
+						placeholder,
+						placeholderTextColor: computedPlaceholderColor,
+						editable: !disabled && !readOnly,
+						style: textInputStyle,
+						accessibilityLabel: typeof label === "string" ? label : void 0,
+						accessibilityHint: typeof helpText === "string" ? helpText : void 0,
+						accessibilityState: { disabled },
+						...textInputProps
+					}),
+					endIconContent
+				]
+			}),
+			helpTextContent
+		]
+	});
+});
+Input.displayName = "Input";
+
+//#endregion
+exports.Input = Input;

package/dist/components/Input.d.cts

@@ -0,0 +1,39 @@
+
+import { UniversalInputProps } from "../uds/dist/tokens/types.cjs";
+import { IconSlotType } from "./IconSlot.cjs";
+import { SizeProps } from "../types.cjs";
+import * as react16 from "react";
+import { Ref } from "react";
+import { TextInput, TextInputProps } from "react-native";
+
+//#region src/components/Input.d.ts
+interface InputProps extends Omit<UniversalInputProps<IconSlotType>, 'width'>, Omit<TextInputProps, 'style' | 'editable'>, Pick<SizeProps, 'width'> {
+  ref?: Ref<TextInput>;
+}
+/**
+ * **📦 An input that allows users to enter text and collect data.**
+ *
+ * @description
+ * An input field is a component that takes text typed into it. It can also serve
+ * as a way to display a selection and trigger a dropdown menu. Inputs are interactive
+ * elements that users can click, tap, or otherwise engage with to collect data.
+ *
+ * @example
+ * ```tsx
+ * import { Input } from '@yahoo/uds-mobile';
+ *
+ * <Input label="Name" placeholder="Enter your name" required />
+ * ```
+ *
+ * @usage
+ * - Forms: For collecting data like names, emails, passwords, etc.
+ * - Search Bars: Allowing users to enter search queries.
+ * - Filters/Settings: When users need to specify preferences.
+ * - Feedback/Comments: Letting users leave reviews or comments.
+ *
+ * @see The {@link https://uds.build/docs/components/input Input Docs} for more info
+ */
+declare const Input: react16.NamedExoticComponent<InputProps>;
+//#endregion
+export { Input, type InputProps };
+//# sourceMappingURL=Input.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.cts","names":[],"sources":["../../src/components/Input.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;UAmBU,UAAA,SAEN,KAAK,oBAAoB,yBACzB,KAAK,uCACL,KAAK;QACD,IAAI;AAdmC;;;;;;;;;;;AAavC;;;;;;;;;;;;;cA+BF,OAAK,OAAA,CAAA,qBAAA"}

package/dist/components/Input.d.mts

@@ -0,0 +1,39 @@
+
+import { UniversalInputProps } from "../uds/dist/tokens/types.mjs";
+import { IconSlotType } from "./IconSlot.mjs";
+import { SizeProps } from "../types.mjs";
+import * as react15 from "react";
+import { Ref } from "react";
+import { TextInput, TextInputProps } from "react-native";
+
+//#region src/components/Input.d.ts
+interface InputProps extends Omit<UniversalInputProps<IconSlotType>, 'width'>, Omit<TextInputProps, 'style' | 'editable'>, Pick<SizeProps, 'width'> {
+  ref?: Ref<TextInput>;
+}
+/**
+ * **📦 An input that allows users to enter text and collect data.**
+ *
+ * @description
+ * An input field is a component that takes text typed into it. It can also serve
+ * as a way to display a selection and trigger a dropdown menu. Inputs are interactive
+ * elements that users can click, tap, or otherwise engage with to collect data.
+ *
+ * @example
+ * ```tsx
+ * import { Input } from '@yahoo/uds-mobile';
+ *
+ * <Input label="Name" placeholder="Enter your name" required />
+ * ```
+ *
+ * @usage
+ * - Forms: For collecting data like names, emails, passwords, etc.
+ * - Search Bars: Allowing users to enter search queries.
+ * - Filters/Settings: When users need to specify preferences.
+ * - Feedback/Comments: Letting users leave reviews or comments.
+ *
+ * @see The {@link https://uds.build/docs/components/input Input Docs} for more info
+ */
+declare const Input: react15.NamedExoticComponent<InputProps>;
+//#endregion
+export { Input, type InputProps };
+//# sourceMappingURL=Input.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.mts","names":[],"sources":["../../src/components/Input.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;UAmBU,UAAA,SAEN,KAAK,oBAAoB,yBACzB,KAAK,uCACL,KAAK;QACD,IAAI;AAdmC;;;;;;;;;;;AAavC;;;;;;;;;;;;;cA+BF,OAAK,OAAA,CAAA,qBAAA"}

package/dist/components/Input.mjs

@@ -0,0 +1,174 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { IconSlot } from "./IconSlot.mjs";
+import { Text as Text$1 } from "./Text.mjs";
+import { HStack } from "./HStack.mjs";
+import { VStack } from "./VStack.mjs";
+import { memo, useCallback, useId, useMemo, useState } from "react";
+import { TextInput, View } from "react-native";
+import { inputStyles } from "../../generated/styles";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isFunction } from "lodash-es";
+
+//#region src/components/Input.tsx
+/**
+* **📦 An input that allows users to enter text and collect data.**
+*
+* @description
+* An input field is a component that takes text typed into it. It can also serve
+* as a way to display a selection and trigger a dropdown menu. Inputs are interactive
+* elements that users can click, tap, or otherwise engage with to collect data.
+*
+* @example
+* ```tsx
+* import { Input } from '@yahoo/uds-mobile';
+*
+* <Input label="Name" placeholder="Enter your name" required />
+* ```
+*
+* @usage
+* - Forms: For collecting data like names, emails, passwords, etc.
+* - Search Bars: Allowing users to enter search queries.
+* - Filters/Settings: When users need to specify preferences.
+* - Feedback/Comments: Letting users leave reviews or comments.
+*
+* @see The {@link https://uds.build/docs/components/input Input Docs} for more info
+*/
+const Input = memo(function Input$1({ label, size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, disabled, readOnly, required, width = "100%", defaultValue, value: controlledValue, onChangeText, onFocus, onBlur, placeholder, placeholderTextColor, ref, ...textInputProps }) {
+	const uid = `uds-input-${useId()}`;
+	const [internalValue, setInternalValue] = useState(defaultValue ?? "");
+	const [isFocused, setIsFocused] = useState(false);
+	const isControlled = controlledValue !== void 0;
+	const value = isControlled ? controlledValue : internalValue;
+	const valueState = value ? "filled" : "empty";
+	const handleChangeText = useCallback((text) => {
+		if (!isControlled) setInternalValue(text);
+		onChangeText?.(text);
+	}, [isControlled, onChangeText]);
+	const handleFocus = useCallback((e) => {
+		setIsFocused(true);
+		onFocus?.(e);
+	}, [onFocus]);
+	const handleBlur = useCallback((e) => {
+		setIsFocused(false);
+		onBlur?.(e);
+	}, [onBlur]);
+	inputStyles.useVariants({
+		size,
+		value: valueState,
+		disabled,
+		pressed: isFocused,
+		readonly: readOnly,
+		invalid: hasError
+	});
+	const computedPlaceholderColor = placeholderTextColor ?? inputStyles.inputPlaceholder.color;
+	const rootStyle = useMemo(() => [{
+		width,
+		opacity: disabled ? .5 : 1
+	}], [width, disabled]);
+	const inputWrapperStyle = useMemo(() => [inputStyles.inputWrapper, {
+		flexDirection: "row",
+		alignItems: "center"
+	}], [inputStyles.inputWrapper]);
+	const textInputStyle = useMemo(() => [inputStyles.input, {
+		flex: 1,
+		includeFontPadding: false,
+		textAlignVertical: "center",
+		paddingVertical: 0
+	}], [inputStyles.input]);
+	const labelContent = useMemo(() => {
+		if (!label) return null;
+		const content = isFunction(label) ? label() : label;
+		return /* @__PURE__ */ jsxs(HStack, {
+			columnGap: "1",
+			alignItems: "flex-end",
+			spacingBottom: "2",
+			children: [/* @__PURE__ */ jsx(Text$1, {
+				style: inputStyles.label,
+				children: content
+			}), required && /* @__PURE__ */ jsx(Text$1, {
+				style: inputStyles.labelRequired,
+				children: "*"
+			})]
+		});
+	}, [
+		label,
+		required,
+		inputStyles.label,
+		inputStyles.labelRequired
+	]);
+	const startIconContent = useMemo(() => {
+		if (!startIcon) return null;
+		return /* @__PURE__ */ jsx(IconSlot, {
+			icon: startIcon,
+			variant: "outline",
+			style: inputStyles.startIcon
+		});
+	}, [startIcon, inputStyles.startIcon]);
+	const endIconContent = useMemo(() => {
+		if (!endIcon) return null;
+		return /* @__PURE__ */ jsx(IconSlot, {
+			icon: endIcon,
+			variant: "outline",
+			style: inputStyles.endIcon
+		});
+	}, [endIcon, inputStyles.endIcon]);
+	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
+			})]
+		});
+	}, [
+		helpText,
+		helperTextIcon,
+		inputStyles.helperIcon,
+		inputStyles.helperText
+	]);
+	return /* @__PURE__ */ jsxs(VStack, {
+		style: rootStyle,
+		children: [
+			labelContent,
+			/* @__PURE__ */ jsxs(View, {
+				style: inputWrapperStyle,
+				accessible: true,
+				accessibilityRole: "none",
+				accessibilityLabel: typeof label === "string" ? label : void 0,
+				children: [
+					startIconContent,
+					/* @__PURE__ */ jsx(TextInput, {
+						ref,
+						nativeID: uid,
+						value,
+						onChangeText: handleChangeText,
+						onFocus: handleFocus,
+						onBlur: handleBlur,
+						placeholder,
+						placeholderTextColor: computedPlaceholderColor,
+						editable: !disabled && !readOnly,
+						style: textInputStyle,
+						accessibilityLabel: typeof label === "string" ? label : void 0,
+						accessibilityHint: typeof helpText === "string" ? helpText : void 0,
+						accessibilityState: { disabled },
+						...textInputProps
+					}),
+					endIconContent
+				]
+			}),
+			helpTextContent
+		]
+	});
+});
+Input.displayName = "Input";
+
+//#endregion
+export { Input };
+//# sourceMappingURL=Input.mjs.map

package/dist/components/Input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.mjs","names":["Input","Text"],"sources":["../../src/components/Input.tsx"],"sourcesContent":["import type { UniversalInputProps } from '@yahoo/uds/tokens';\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?: 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 * @example\n * ```tsx\n * import { Input } from '@yahoo/uds-mobile';\n *\n * <Input label=\"Name\" placeholder=\"Enter your name\" 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 * @see The {@link https://uds.build/docs/components/input Input Docs} for more info\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,MAAM,QAAQ,KAAK,SAASA,QAAM,EAEhC,OACA,OAAO,MACP,WACA,SACA,UACA,gBACA,UACA,UACA,UACA,UAEA,QAAQ,QAER,cACA,OAAO,iBACP,cACA,SACA,QACA,aACA,sBACA,KACA,GAAG,kBACU;CAEb,MAAM,MAAM,aADQ,OAAO;CAI3B,MAAM,CAAC,eAAe,oBAAoB,SAAS,gBAAgB,GAAG;CACtE,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CAGjD,MAAM,eAAe,oBAAoB;CACzC,MAAM,QAAQ,eAAe,kBAAkB;CAC/C,MAAM,aAAa,QAAQ,WAAW;CAGtC,MAAM,mBAAmB,aACtB,SAAiB;AAChB,MAAI,CAAC,aACH,kBAAiB,KAAK;AAExB,iBAAe,KAAK;IAEtB,CAAC,cAAc,aAAa,CAC7B;CAED,MAAM,cAAc,aACjB,MAAM;AACL,eAAa,KAAK;AAClB,YAAU,EAAE;IAEd,CAAC,QAAQ,CACV;CAED,MAAM,aAAa,aAChB,MAAM;AACL,eAAa,MAAM;AACnB,WAAS,EAAE;IAEb,CAAC,OAAO,CACT;AAGD,aAAY,YAAY;EACtB;EACA,OAAO;EACP;EACA,SAAS;EACT,UAAU;EACV,SAAS;EACV,CAAC;CAGF,MAAM,2BAA2B,wBAAwB,YAAY,iBAAiB;CAEtF,MAAM,YAAY,cAAc,CAAC;EAAE;EAAO,SAAS,WAAW,KAAM;EAAG,CAAC,EAAE,CAAC,OAAO,SAAS,CAAC;CAE5F,MAAM,oBAAoB,cAClB,CACJ,YAAY,cACZ;EAAE,eAAe;EAAgB,YAAY;EAAmB,CACjE,EACD,CAAC,YAAY,aAAa,CAC3B;CAMD,MAAM,iBAAiB,cACf,CACJ,YAAY,OACZ;EACE,MAAM;EACN,oBAAoB;EACpB,mBAAmB;EACnB,iBAAiB;EAClB,CACF,EACD,CAAC,YAAY,MAAM,CACpB;CAGD,MAAM,eAAe,cAAc;AACjC,MAAI,CAAC,MACH,QAAO;EAET,MAAM,UAAU,WAAW,MAAM,GAAG,OAAO,GAAG;AAC9C,SACE,qBAAC;GAAO,WAAU;GAAI,YAAW;GAAW,eAAc;cACxD,oBAACC;IAAK,OAAO,YAAY;cAAQ;KAAe,EAC/C,YAAY,oBAACA;IAAK,OAAO,YAAY;cAAe;KAAQ;IACtD;IAEV;EAAC;EAAO;EAAU,YAAY;EAAO,YAAY;EAAc,CAAC;CAEnE,MAAM,mBAAmB,cAAc;AACrC,MAAI,CAAC,UACH,QAAO;AAET,SAAO,oBAAC;GAAS,MAAM;GAAW,SAAQ;GAAU,OAAO,YAAY;IAAa;IACnF,CAAC,WAAW,YAAY,UAAU,CAAC;CAEtC,MAAM,iBAAiB,cAAc;AACnC,MAAI,CAAC,QACH,QAAO;AAET,SAAO,oBAAC;GAAS,MAAM;GAAS,SAAQ;GAAU,OAAO,YAAY;IAAW;IAC/E,CAAC,SAAS,YAAY,QAAQ,CAAC;CAElC,MAAM,kBAAkB,cAAc;AACpC,MAAI,CAAC,SACH,QAAO;EAET,MAAM,UAAU,WAAW,SAAS,GAAG,UAAU,GAAG;AACpD,SACE,qBAAC;GAAO,WAAU;GAAI,YAAW;GAAS,YAAW;cAClD,kBAAkB,oBAAC;IAAS,MAAM;IAAgB,OAAO,YAAY;KAAc,EACpF,oBAACA;IAAK,OAAO,YAAY;cAAa;KAAe;IAC9C;IAEV;EAAC;EAAU;EAAgB,YAAY;EAAY,YAAY;EAAW,CAAC;AAG9E,QACE,qBAAC;EAAO,OAAO;;GACZ;GAED,qBAAC;IACC,OAAO;IACP;IACA,mBAAkB;IAClB,oBAAoB,OAAO,UAAU,WAAW,QAAQ;;KAEvD;KAED,oBAAC;MACM;MACL,UAAU;MACH;MACP,cAAc;MACd,SAAS;MACT,QAAQ;MACK;MACb,sBAAsB;MACtB,UAAU,CAAC,YAAY,CAAC;MACxB,OAAO;MACP,oBAAoB,OAAO,UAAU,WAAW,QAAQ;MACxD,mBAAmB,OAAO,aAAa,WAAW,WAAW;MAC7D,oBAAoB,EAAE,UAAU;MAChC,GAAI;OACJ;KAED;;KACI;GAEN;;GACM;EAEX;AAEF,MAAM,cAAc"}