@yahoo/uds-mobile 2.22.0 → 2.23.1

package/dist/bin/uds-mobile.mjs

@@ -97,13 +97,6 @@ async function loadConfigFromFile(configPath) {
 	const moduleUrl = pathToFileURL(absolutePath).href;
 	log(`Loading config from: ${configPath}`, "dim");
 	const configModule = await import(moduleUrl);
-	for (const key in configModule) if (key.endsWith("Config") || key === "default") {
-		const config = configModule[key];
-		if (config && typeof config === "object") {
-			logStep("Found", `config export: ${key}`);
-			return config;
-		}
-	}
 	for (const name of [
 		"config",
 		"tokens",
@@ -113,6 +106,13 @@ async function loadConfigFromFile(configPath) {
 		logStep("Found", `config export: ${name}`);
 		return configModule[name];
 	}
+	for (const key in configModule) if (key.endsWith("Config") || key === "default") {
+		const config = configModule[key];
+		if (config && typeof config === "object") {
+			logStep("Found", `config export: ${key}`);
+			return config;
+		}
+	}
 	throw new Error(`No config export found in ${configPath}. Expected an export ending with "Config" or a default export.`);
 }
 async function runSync(opts = {}) {

package/dist/components/Select/Select.cjs

@@ -0,0 +1,194 @@
+/*! © 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_Text = require("../Text.cjs");
+const require_components_InputHelpText = require("../InputHelpText.cjs");
+const require_components_VStack = require("../VStack.cjs");
+const require_components_internal_Overlay_useControllableState = require("../internal/Overlay/useControllableState.cjs");
+const require_components_Select_selectContext = require("./selectContext.cjs");
+const require_components_Select_SelectTrigger = require("./SelectTrigger.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let generated_styles = require("../../../generated/styles");
+let lodash_es = require("lodash-es");
+//#region src/components/Select/Select.tsx
+/**
+* **⚙️ A composable Select component**
+*
+* @description
+* Select lets users pick one value from a list. Compose with `SelectContent` and
+* `SelectItem`, similar to `Tabs` with `TabList` and `Tab`.
+*
+* @category Form
+* @platform mobile
+*
+* @example
+* ```tsx
+* import { Select, SelectContent, SelectItem } from '@yahoo/uds-mobile/Select';
+*
+* <Select label="Country" placeholder="Select a country" defaultValue="us">
+*   <SelectContent>
+*     <SelectItem value="us">United States</SelectItem>
+*     <SelectItem value="ca">Canada</SelectItem>
+*   </SelectContent>
+* </Select>
+* ```
+*/
+const Select = (0, react.memo)(function Select({ label, helpText, helperTextIcon, placeholder, size = "md", disabled, required, hasError, readOnly, width = "100%", reduceMotion = false, startIcon, endIcon, value: valueProp, defaultValue = "", onChange, children, testID }) {
+	const uid = `uds-select-${(0, react.useId)()}`;
+	const triggerRef = (0, react.useRef)(null);
+	const [triggerRect, setTriggerRect] = (0, react.useState)(null);
+	const [highlightedValue, setHighlightedValue] = (0, react.useState)(null);
+	const itemsRef = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const [, setItemsVersion] = (0, react.useState)(0);
+	const [value, setValue] = require_components_internal_Overlay_useControllableState.useControllableState({
+		value: valueProp,
+		defaultValue,
+		onChange
+	});
+	const [open, setOpen] = require_components_internal_Overlay_useControllableState.useControllableState({
+		defaultValue: false,
+		onChange: (nextOpen) => {
+			if (!nextOpen) setHighlightedValue(null);
+		}
+	});
+	const registerItem = (0, react.useCallback)((itemValue, itemLabel) => {
+		if (itemsRef.current.get(itemValue) === itemLabel) return;
+		itemsRef.current.set(itemValue, itemLabel);
+		setItemsVersion((version) => version + 1);
+	}, []);
+	const unregisterItem = (0, react.useCallback)((itemValue) => {
+		if (!itemsRef.current.has(itemValue)) return;
+		itemsRef.current.delete(itemValue);
+		setItemsVersion((version) => version + 1);
+	}, []);
+	const getItemLabel = (0, react.useCallback)((itemValue) => itemsRef.current.get(itemValue), []);
+	const fieldContext = (0, react.useMemo)(() => ({
+		size,
+		disabled,
+		readOnly,
+		required,
+		hasError,
+		width,
+		reduceMotion,
+		placeholder,
+		uid
+	}), [
+		disabled,
+		hasError,
+		placeholder,
+		readOnly,
+		reduceMotion,
+		required,
+		size,
+		uid,
+		width
+	]);
+	const contextValue = (0, react.useMemo)(() => ({
+		value,
+		setValue,
+		open,
+		setOpen,
+		triggerRef,
+		triggerRect,
+		setTriggerRect,
+		registerItem,
+		unregisterItem,
+		getItemLabel,
+		highlightedValue,
+		setHighlightedValue,
+		field: fieldContext,
+		reduceMotion
+	}), [
+		fieldContext,
+		getItemLabel,
+		highlightedValue,
+		open,
+		reduceMotion,
+		registerItem,
+		setOpen,
+		setValue,
+		triggerRect,
+		unregisterItem,
+		value
+	]);
+	const valueState = value.length > 0 ? "filled" : "empty";
+	generated_styles.inputStyles.useVariants({
+		size,
+		value: valueState,
+		pressed: open,
+		readonly: readOnly,
+		invalid: hasError
+	});
+	const rootStyle = (0, react.useMemo)(() => [{
+		width,
+		opacity: disabled ? .5 : 1
+	}], [disabled, width]);
+	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 helpTextContent = (0, react.useMemo)(() => {
+		if (!helpText) return null;
+		const content = (0, lodash_es.isFunction)(helpText) ? helpText() : helpText;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_InputHelpText.InputHelpText, {
+			startIcon: helperTextIcon,
+			size,
+			isFilled: valueState === "filled",
+			disabled,
+			readOnly,
+			hasError,
+			pressed: open,
+			children: content
+		});
+	}, [
+		disabled,
+		hasError,
+		helpText,
+		helperTextIcon,
+		open,
+		readOnly,
+		size,
+		valueState
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Select_selectContext.SelectContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Select_selectContext.SelectFieldContext.Provider, {
+			value: fieldContext,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_VStack.VStack, {
+				testID,
+				style: rootStyle,
+				children: [
+					labelContent,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Select_SelectTrigger.SelectTrigger, {
+						startIcon,
+						endIcon
+					}),
+					helpTextContent,
+					children
+				]
+			})
+		})
+	});
+});
+Select.displayName = "Select";
+//#endregion
+exports.Select = Select;

package/dist/components/Select/Select.d.cts

@@ -0,0 +1,47 @@
+
+import { UniversalSelectProps } from "../../types/dist/index.cjs";
+import { IconSlotType } from "../IconSlot.cjs";
+import * as _$react from "react";
+import { ReactNode } from "react";
+
+//#region src/components/Select/Select.d.ts
+interface SelectProps extends Omit<UniversalSelectProps<IconSlotType>, 'width'> {
+  /** Placeholder text shown when no value is selected. */
+  placeholder?: string;
+  /** Selected value for controlled usage. */
+  value?: string;
+  /** Initial value for uncontrolled usage. @default '' */
+  defaultValue?: string;
+  /** Called when the selected value changes. */
+  onChange?: (value: string) => void;
+  /** Container width. @default '100%' */
+  width?: number | `${number}%` | '100%';
+  children?: ReactNode;
+  testID?: string;
+}
+/**
+ * **⚙️ A composable Select component**
+ *
+ * @description
+ * Select lets users pick one value from a list. Compose with `SelectContent` and
+ * `SelectItem`, similar to `Tabs` with `TabList` and `Tab`.
+ *
+ * @category Form
+ * @platform mobile
+ *
+ * @example
+ * ```tsx
+ * import { Select, SelectContent, SelectItem } from '@yahoo/uds-mobile/Select';
+ *
+ * <Select label="Country" placeholder="Select a country" defaultValue="us">
+ *   <SelectContent>
+ *     <SelectItem value="us">United States</SelectItem>
+ *     <SelectItem value="ca">Canada</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ * ```
+ */
+declare const Select: _$react.NamedExoticComponent<SelectProps>;
+//#endregion
+export { Select, type SelectProps };
+//# sourceMappingURL=Select.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.cts","names":[],"sources":["../../../src/components/Select/Select.tsx"],"mappings":";;;;;;;UAiBU,WAAA,SAAoB,IAAA,CAAK,oBAAA,CAAqB,YAAA;;EAEtD,WAAA;EAFQ;EAIR,KAAA;;EAEA,YAAA;EANiC;EAQjC,QAAA,IAAY,KAAA;EARgB;EAU5B,KAAA;EACA,QAAA,GAAW,SAAA;EACX,MAAA;AAAA;;;;;;;;;;;;;AAAM;;;;;;;;;;cAyBF,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,47 @@
+
+import { UniversalSelectProps } from "../../types/dist/index.js";
+import { IconSlotType } from "../IconSlot.js";
+import * as _$react from "react";
+import { ReactNode } from "react";
+
+//#region src/components/Select/Select.d.ts
+interface SelectProps extends Omit<UniversalSelectProps<IconSlotType>, 'width'> {
+  /** Placeholder text shown when no value is selected. */
+  placeholder?: string;
+  /** Selected value for controlled usage. */
+  value?: string;
+  /** Initial value for uncontrolled usage. @default '' */
+  defaultValue?: string;
+  /** Called when the selected value changes. */
+  onChange?: (value: string) => void;
+  /** Container width. @default '100%' */
+  width?: number | `${number}%` | '100%';
+  children?: ReactNode;
+  testID?: string;
+}
+/**
+ * **⚙️ A composable Select component**
+ *
+ * @description
+ * Select lets users pick one value from a list. Compose with `SelectContent` and
+ * `SelectItem`, similar to `Tabs` with `TabList` and `Tab`.
+ *
+ * @category Form
+ * @platform mobile
+ *
+ * @example
+ * ```tsx
+ * import { Select, SelectContent, SelectItem } from '@yahoo/uds-mobile/Select';
+ *
+ * <Select label="Country" placeholder="Select a country" defaultValue="us">
+ *   <SelectContent>
+ *     <SelectItem value="us">United States</SelectItem>
+ *     <SelectItem value="ca">Canada</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ * ```
+ */
+declare const Select: _$react.NamedExoticComponent<SelectProps>;
+//#endregion
+export { Select, type SelectProps };
+//# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","names":[],"sources":["../../../src/components/Select/Select.tsx"],"mappings":";;;;;;;UAiBU,WAAA,SAAoB,IAAA,CAAK,oBAAA,CAAqB,YAAA;;EAEtD,WAAA;EAFQ;EAIR,KAAA;;EAEA,YAAA;EANiC;EAQjC,QAAA,IAAY,KAAA;EARgB;EAU5B,KAAA;EACA,QAAA,GAAW,SAAA;EACX,MAAA;AAAA;;;;;;;;;;;;;AAAM;;;;;;;;;;cAyBF,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}

package/dist/components/Select/Select.js

@@ -0,0 +1,194 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { HStack } from "../HStack.js";
+import { Text } from "../Text.js";
+import { InputHelpText } from "../InputHelpText.js";
+import { VStack } from "../VStack.js";
+import { useControllableState } from "../internal/Overlay/useControllableState.js";
+import { SelectContext, SelectFieldContext } from "./selectContext.js";
+import { SelectTrigger } from "./SelectTrigger.js";
+import { memo, useCallback, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { inputStyles } from "../../../generated/styles";
+import { isFunction } from "lodash-es";
+//#region src/components/Select/Select.tsx
+/**
+* **⚙️ A composable Select component**
+*
+* @description
+* Select lets users pick one value from a list. Compose with `SelectContent` and
+* `SelectItem`, similar to `Tabs` with `TabList` and `Tab`.
+*
+* @category Form
+* @platform mobile
+*
+* @example
+* ```tsx
+* import { Select, SelectContent, SelectItem } from '@yahoo/uds-mobile/Select';
+*
+* <Select label="Country" placeholder="Select a country" defaultValue="us">
+*   <SelectContent>
+*     <SelectItem value="us">United States</SelectItem>
+*     <SelectItem value="ca">Canada</SelectItem>
+*   </SelectContent>
+* </Select>
+* ```
+*/
+const Select = memo(function Select({ label, helpText, helperTextIcon, placeholder, size = "md", disabled, required, hasError, readOnly, width = "100%", reduceMotion = false, startIcon, endIcon, value: valueProp, defaultValue = "", onChange, children, testID }) {
+	const uid = `uds-select-${useId()}`;
+	const triggerRef = useRef(null);
+	const [triggerRect, setTriggerRect] = useState(null);
+	const [highlightedValue, setHighlightedValue] = useState(null);
+	const itemsRef = useRef(/* @__PURE__ */ new Map());
+	const [, setItemsVersion] = useState(0);
+	const [value, setValue] = useControllableState({
+		value: valueProp,
+		defaultValue,
+		onChange
+	});
+	const [open, setOpen] = useControllableState({
+		defaultValue: false,
+		onChange: (nextOpen) => {
+			if (!nextOpen) setHighlightedValue(null);
+		}
+	});
+	const registerItem = useCallback((itemValue, itemLabel) => {
+		if (itemsRef.current.get(itemValue) === itemLabel) return;
+		itemsRef.current.set(itemValue, itemLabel);
+		setItemsVersion((version) => version + 1);
+	}, []);
+	const unregisterItem = useCallback((itemValue) => {
+		if (!itemsRef.current.has(itemValue)) return;
+		itemsRef.current.delete(itemValue);
+		setItemsVersion((version) => version + 1);
+	}, []);
+	const getItemLabel = useCallback((itemValue) => itemsRef.current.get(itemValue), []);
+	const fieldContext = useMemo(() => ({
+		size,
+		disabled,
+		readOnly,
+		required,
+		hasError,
+		width,
+		reduceMotion,
+		placeholder,
+		uid
+	}), [
+		disabled,
+		hasError,
+		placeholder,
+		readOnly,
+		reduceMotion,
+		required,
+		size,
+		uid,
+		width
+	]);
+	const contextValue = useMemo(() => ({
+		value,
+		setValue,
+		open,
+		setOpen,
+		triggerRef,
+		triggerRect,
+		setTriggerRect,
+		registerItem,
+		unregisterItem,
+		getItemLabel,
+		highlightedValue,
+		setHighlightedValue,
+		field: fieldContext,
+		reduceMotion
+	}), [
+		fieldContext,
+		getItemLabel,
+		highlightedValue,
+		open,
+		reduceMotion,
+		registerItem,
+		setOpen,
+		setValue,
+		triggerRect,
+		unregisterItem,
+		value
+	]);
+	const valueState = value.length > 0 ? "filled" : "empty";
+	inputStyles.useVariants({
+		size,
+		value: valueState,
+		pressed: open,
+		readonly: readOnly,
+		invalid: hasError
+	});
+	const rootStyle = useMemo(() => [{
+		width,
+		opacity: disabled ? .5 : 1
+	}], [disabled, width]);
+	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, {
+				style: inputStyles.label,
+				children: content
+			}), required && /* @__PURE__ */ jsx(Text, {
+				style: inputStyles.labelRequired,
+				children: "*"
+			})]
+		});
+	}, [
+		label,
+		required,
+		inputStyles.label,
+		inputStyles.labelRequired
+	]);
+	const helpTextContent = useMemo(() => {
+		if (!helpText) return null;
+		const content = isFunction(helpText) ? helpText() : helpText;
+		return /* @__PURE__ */ jsx(InputHelpText, {
+			startIcon: helperTextIcon,
+			size,
+			isFilled: valueState === "filled",
+			disabled,
+			readOnly,
+			hasError,
+			pressed: open,
+			children: content
+		});
+	}, [
+		disabled,
+		hasError,
+		helpText,
+		helperTextIcon,
+		open,
+		readOnly,
+		size,
+		valueState
+	]);
+	return /* @__PURE__ */ jsx(SelectContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(SelectFieldContext.Provider, {
+			value: fieldContext,
+			children: /* @__PURE__ */ jsxs(VStack, {
+				testID,
+				style: rootStyle,
+				children: [
+					labelContent,
+					/* @__PURE__ */ jsx(SelectTrigger, {
+						startIcon,
+						endIcon
+					}),
+					helpTextContent,
+					children
+				]
+			})
+		})
+	});
+});
+Select.displayName = "Select";
+//#endregion
+export { Select };
+
+//# sourceMappingURL=Select.js.map

package/dist/components/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import type { UniversalSelectProps } from '@yahoo/uds-types';\nimport { isFunction } from 'lodash-es';\nimport type { ReactNode } from 'react';\nimport { memo, useCallback, useId, useMemo, useRef, useState } from 'react';\nimport type { View } from 'react-native';\n\nimport { inputStyles } from '../../../generated/styles';\nimport { HStack } from '../HStack';\nimport type { IconSlotType } from '../IconSlot';\nimport { InputHelpText } from '../InputHelpText';\nimport { useControllableState } from '../internal/Overlay';\nimport { Text } from '../Text';\nimport { VStack } from '../VStack';\nimport { SelectContext, SelectFieldContext } from './selectContext';\nimport { SelectTrigger } from './SelectTrigger';\nimport type { SelectContextValue, SelectFieldContextValue } from './types';\n\ninterface SelectProps extends Omit<UniversalSelectProps<IconSlotType>, 'width'> {\n  /** Placeholder text shown when no value is selected. */\n  placeholder?: string;\n  /** Selected value for controlled usage. */\n  value?: string;\n  /** Initial value for uncontrolled usage. @default '' */\n  defaultValue?: string;\n  /** Called when the selected value changes. */\n  onChange?: (value: string) => void;\n  /** Container width. @default '100%' */\n  width?: number | `${number}%` | '100%';\n  children?: ReactNode;\n  testID?: string;\n}\n\n/**\n * **⚙️ A composable Select component**\n *\n * @description\n * Select lets users pick one value from a list. Compose with `SelectContent` and\n * `SelectItem`, similar to `Tabs` with `TabList` and `Tab`.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Select, SelectContent, SelectItem } from '@yahoo/uds-mobile/Select';\n *\n * <Select label=\"Country\" placeholder=\"Select a country\" defaultValue=\"us\">\n *   <SelectContent>\n *     <SelectItem value=\"us\">United States</SelectItem>\n *     <SelectItem value=\"ca\">Canada</SelectItem>\n *   </SelectContent>\n * </Select>\n * ```\n */\nconst Select = memo(function Select({\n  label,\n  helpText,\n  helperTextIcon,\n  placeholder,\n  size = 'md',\n  disabled,\n  required,\n  hasError,\n  readOnly,\n  width = '100%',\n  reduceMotion = false,\n  startIcon,\n  endIcon,\n  value: valueProp,\n  defaultValue = '',\n  onChange,\n  children,\n  testID,\n}: SelectProps) {\n  const generatedId = useId();\n  const uid = `uds-select-${generatedId}`;\n  const triggerRef = useRef<View | null>(null);\n  const [triggerRect, setTriggerRect] = useState<SelectContextValue['triggerRect']>(null);\n  const [highlightedValue, setHighlightedValue] = useState<string | null>(null);\n  const itemsRef = useRef(new Map<string, string>());\n  const [, setItemsVersion] = useState(0);\n\n  const [value, setValue] = useControllableState({\n    value: valueProp,\n    defaultValue,\n    onChange,\n  });\n\n  const [open, setOpen] = useControllableState({\n    defaultValue: false,\n    onChange: (nextOpen) => {\n      if (!nextOpen) {\n        setHighlightedValue(null);\n      }\n    },\n  });\n\n  const registerItem = useCallback((itemValue: string, itemLabel: string) => {\n    if (itemsRef.current.get(itemValue) === itemLabel) {\n      return;\n    }\n\n    itemsRef.current.set(itemValue, itemLabel);\n    setItemsVersion((version) => version + 1);\n  }, []);\n\n  const unregisterItem = useCallback((itemValue: string) => {\n    if (!itemsRef.current.has(itemValue)) {\n      return;\n    }\n\n    itemsRef.current.delete(itemValue);\n    setItemsVersion((version) => version + 1);\n  }, []);\n\n  const getItemLabel = useCallback((itemValue: string) => itemsRef.current.get(itemValue), []);\n\n  const fieldContext = useMemo<SelectFieldContextValue>(\n    () => ({\n      size,\n      disabled,\n      readOnly,\n      required,\n      hasError,\n      width,\n      reduceMotion,\n      placeholder,\n      uid,\n    }),\n    [disabled, hasError, placeholder, readOnly, reduceMotion, required, size, uid, width],\n  );\n\n  const contextValue = useMemo<SelectContextValue>(\n    () => ({\n      value,\n      setValue,\n      open,\n      setOpen,\n      triggerRef,\n      triggerRect,\n      setTriggerRect,\n      registerItem,\n      unregisterItem,\n      getItemLabel,\n      highlightedValue,\n      setHighlightedValue,\n      field: fieldContext,\n      reduceMotion,\n    }),\n    [\n      fieldContext,\n      getItemLabel,\n      highlightedValue,\n      open,\n      reduceMotion,\n      registerItem,\n      setOpen,\n      setValue,\n      triggerRect,\n      unregisterItem,\n      value,\n    ],\n  );\n\n  const hasValue = value.length > 0;\n  const valueState = hasValue ? 'filled' : 'empty';\n\n  inputStyles.useVariants({\n    size,\n    value: valueState,\n    pressed: open,\n    readonly: readOnly,\n    invalid: hasError,\n  });\n\n  const rootStyle = useMemo(() => [{ width, opacity: disabled ? 0.5 : 1 }], [disabled, width]);\n\n  const labelContent = useMemo(() => {\n    if (!label) {\n      return null;\n    }\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 helpTextContent = useMemo(() => {\n    if (!helpText) {\n      return null;\n    }\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={open}\n      >\n        {content}\n      </InputHelpText>\n    );\n  }, [disabled, hasError, helpText, helperTextIcon, open, readOnly, size, valueState]);\n\n  return (\n    <SelectContext.Provider value={contextValue}>\n      <SelectFieldContext.Provider value={fieldContext}>\n        <VStack testID={testID} style={rootStyle}>\n          {labelContent}\n\n          <SelectTrigger startIcon={startIcon} endIcon={endIcon} />\n\n          {helpTextContent}\n\n          {children}\n        </VStack>\n      </SelectFieldContext.Provider>\n    </SelectContext.Provider>\n  );\n});\n\nSelect.displayName = 'Select';\n\nexport { Select, type SelectProps };\n"],"mappings":"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"}

package/dist/components/Select/SelectContent.cjs

@@ -0,0 +1,148 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_components_VStack = require("../VStack.cjs");
+const require_components_internal_Overlay_useAnchoredPosition = require("../internal/Overlay/useAnchoredPosition.cjs");
+const require_components_Popover_PopoverPortalLayer = require("../Popover/PopoverPortalLayer.cjs");
+const require_components_Select_selectContext = require("./selectContext.cjs");
+let react = require("react");
+let react_native = require("react-native");
+let react_jsx_runtime = require("react/jsx-runtime");
+let generated_styles = require("../../../generated/styles");
+let react_native_reanimated = require("react-native-reanimated");
+react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
+//#region src/components/Select/SelectContent.tsx
+const DEFAULT_OFFSET = 4;
+const DEFAULT_MAX_HEIGHT = 240;
+const ANIMATION_DURATION = 200;
+const OFFSCREEN_REGISTRY_STYLE = react_native.StyleSheet.create({ registry: {
+	position: "absolute",
+	top: 0,
+	left: 0,
+	width: 1,
+	height: 1,
+	opacity: 0,
+	overflow: "hidden",
+	zIndex: -1
+} });
+/**
+* **▾ Select content panel**
+*
+* Floating listbox container for {@link SelectItem} options.
+*/
+const SelectContent = (0, react.memo)(function SelectContent({ children, size: _size = "default", variant: _variant = "default", keepOpenOnInteractOutside = false, maxHeight = DEFAULT_MAX_HEIGHT, gutter = DEFAULT_OFFSET, sameWidth = true, style, testID }) {
+	const { open, setOpen, triggerRect, reduceMotion } = require_components_Select_selectContext.useSelectContext();
+	const [contentSize, setContentSize] = (0, react.useState)({
+		width: 0,
+		height: 0
+	});
+	const [shouldRender, setShouldRender] = (0, react.useState)(open);
+	const dismiss = (0, react.useCallback)(() => {
+		if (keepOpenOnInteractOutside) return;
+		setOpen(false);
+	}, [keepOpenOnInteractOutside, setOpen]);
+	const { contentStyle, anchorReady, maxWidth: positionedMaxWidth } = require_components_internal_Overlay_useAnchoredPosition.useAnchoredPosition({
+		triggerRect,
+		contentSize,
+		placement: "bottom",
+		offset: gutter,
+		sameWidth,
+		width: sameWidth ? "trigger" : "content",
+		avoidCollisions: true,
+		collisionPadding: 12
+	});
+	const isPositionedOpen = open && anchorReady && contentSize.height > 0;
+	const progress = (0, react_native_reanimated.useDerivedValue)(() => (0, react_native_reanimated.withTiming)(isPositionedOpen ? 1 : 0, {
+		duration: reduceMotion ? 0 : ANIMATION_DURATION,
+		easing: react_native_reanimated.Easing.out(react_native_reanimated.Easing.ease)
+	}), [isPositionedOpen, reduceMotion]);
+	const animatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({
+		opacity: progress.value,
+		transform: [{ scale: .97 + progress.value * .03 }, { translateY: (1 - progress.value) * 8 }]
+	}));
+	const handleLayout = (0, react.useCallback)((event) => {
+		const { width, height } = event.nativeEvent.layout;
+		setContentSize({
+			width,
+			height
+		});
+	}, []);
+	(0, react.useEffect)(() => {
+		if (open) {
+			setShouldRender(true);
+			return;
+		}
+		if (reduceMotion) {
+			setShouldRender(false);
+			setContentSize({
+				width: 0,
+				height: 0
+			});
+			return;
+		}
+		const timeout = setTimeout(() => {
+			setShouldRender(false);
+			setContentSize({
+				width: 0,
+				height: 0
+			});
+		}, ANIMATION_DURATION);
+		return () => clearTimeout(timeout);
+	}, [open, reduceMotion]);
+	generated_styles.selectContentStyles.useVariants({});
+	const panelStyle = (0, react.useMemo)(() => react_native.StyleSheet.flatten([
+		generated_styles.selectContentStyles.root,
+		{
+			maxHeight,
+			maxWidth: positionedMaxWidth > 0 ? positionedMaxWidth : void 0,
+			overflow: "hidden",
+			zIndex: 1
+		},
+		style
+	]), [
+		maxHeight,
+		positionedMaxWidth,
+		generated_styles.selectContentStyles.root,
+		style
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [!open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+		accessibilityElementsHidden: true,
+		importantForAccessibility: "no-hide-descendants",
+		pointerEvents: "none",
+		style: OFFSCREEN_REGISTRY_STYLE.registry,
+		children
+	}) : null, open && shouldRender ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Popover_PopoverPortalLayer.PopoverPortalLayer, {
+		open,
+		dismissible: !keepOpenOnInteractOutside,
+		onDismiss: dismiss,
+		children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
+			testID,
+			style: [
+				contentStyle,
+				animatedStyle,
+				{
+					overflow: "visible",
+					zIndex: 1e3
+				}
+			],
+			onLayout: handleLayout,
+			accessibilityRole: "menu",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+				style: panelStyle,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.ScrollView, {
+					keyboardShouldPersistTaps: "handled",
+					nestedScrollEnabled: true,
+					style: { maxHeight },
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_VStack.VStack, {
+						alignItems: "stretch",
+						justifyContent: "flex-start",
+						children
+					})
+				})
+			})
+		})
+	}) : null] });
+});
+SelectContent.displayName = "SelectContent";
+//#endregion
+exports.SelectContent = SelectContent;