@yahoo/uds-mobile 2.21.2 → 2.23.0

package/dist/components/Select/SelectItem.cjs

@@ -0,0 +1,138 @@
+/*! © 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_HStack = require("../HStack.cjs");
+const require_components_IconSlot = require("../IconSlot.cjs");
+const require_components_Select_selectContext = require("./selectContext.cjs");
+const require_components_Select_selectItemTheme = require("./selectItemTheme.cjs");
+let react = require("react");
+let react_native = require("react-native");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_native_unistyles = require("react-native-unistyles");
+let react_native_reanimated = require("react-native-reanimated");
+react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
+//#region src/components/Select/SelectItem.tsx
+/**
+* **▾ Select item**
+*
+* A single selectable option inside {@link SelectContent}.
+*/
+const SelectItem = (0, react.memo)(function SelectItem({ value, disabled, children, style, testID }) {
+	const { value: selectedValue, setValue, setOpen, open, registerItem, unregisterItem, highlightedValue, setHighlightedValue, reduceMotion } = require_components_Select_selectContext.useSelectContext();
+	const { theme } = (0, react_native_unistyles.useUnistyles)();
+	const [isPressed, setIsPressed] = (0, react.useState)(false);
+	const label = (0, react.useMemo)(() => {
+		if (typeof children === "string" || typeof children === "number") return String(children);
+		return value;
+	}, [children, value]);
+	(0, react.useEffect)(() => {
+		registerItem(value, label);
+		return () => unregisterItem(value);
+	}, [
+		label,
+		registerItem,
+		unregisterItem,
+		value
+	]);
+	const isSelected = selectedValue === value;
+	const interaction = require_components_Select_selectItemTheme.resolveSelectItemInteractionState({
+		isPressed,
+		isHighlighted: highlightedValue === value
+	});
+	const rootStyle = (0, react.useMemo)(() => [
+		require_components_Select_selectItemTheme.getMergedSelectItemLayerStyle(theme, "root", interaction, isSelected),
+		{
+			flexDirection: "row",
+			alignItems: "center",
+			justifyContent: "space-between",
+			width: "100%",
+			opacity: disabled ? .5 : 1
+		},
+		style
+	], [
+		disabled,
+		interaction,
+		isSelected,
+		style,
+		theme
+	]);
+	const textStyle = (0, react.useMemo)(() => require_components_Select_selectItemTheme.getMergedSelectItemLayerStyle(theme, "text", interaction, isSelected), [
+		interaction,
+		isSelected,
+		theme
+	]);
+	const endIconStyle = (0, react.useMemo)(() => require_components_Select_selectItemTheme.getMergedSelectItemLayerStyle(theme, "endIcon", interaction, isSelected), [
+		interaction,
+		isSelected,
+		theme
+	]);
+	const checkScale = (0, react_native_reanimated.useDerivedValue)(() => (0, react_native_reanimated.withTiming)(isSelected ? 1 : 0, {
+		duration: reduceMotion ? 0 : 120,
+		easing: react_native_reanimated.Easing.out(react_native_reanimated.Easing.ease)
+	}), [isSelected, reduceMotion]);
+	const checkAnimatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({
+		opacity: checkScale.value,
+		transform: [{ scale: .7 + checkScale.value * .3 }]
+	}));
+	const handlePress = (0, react.useCallback)(() => {
+		if (disabled) return;
+		setValue(value);
+		setOpen(false);
+		setHighlightedValue(null);
+	}, [
+		disabled,
+		setHighlightedValue,
+		setOpen,
+		setValue,
+		value
+	]);
+	const handlePressIn = (0, react.useCallback)(() => {
+		if (disabled) return;
+		setIsPressed(true);
+		setHighlightedValue(value);
+	}, [
+		disabled,
+		setHighlightedValue,
+		value
+	]);
+	const handlePressOut = (0, react.useCallback)(() => {
+		setIsPressed(false);
+	}, []);
+	if (!open) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.Pressable, {
+		testID,
+		disabled,
+		onPress: handlePress,
+		onPressIn: handlePressIn,
+		onPressOut: handlePressOut,
+		style: rootStyle,
+		accessibilityRole: "menuitem",
+		accessibilityState: {
+			disabled: !!disabled,
+			selected: isSelected
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_HStack.HStack, {
+			columnGap: "2",
+			alignItems: "center",
+			justifyContent: "flex-start",
+			style: { flex: 1 },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+				style: textStyle,
+				numberOfLines: 1,
+				children
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
+			style: checkAnimatedStyle,
+			pointerEvents: "none",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+				icon: "Check",
+				size: "sm",
+				variant: "fill",
+				style: endIconStyle
+			})
+		})]
+	});
+});
+SelectItem.displayName = "SelectItem";
+//#endregion
+exports.SelectItem = SelectItem;

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

@@ -0,0 +1,24 @@
+
+import * as _$react from "react";
+import { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+
+//#region src/components/Select/SelectItem.d.ts
+interface SelectItemProps {
+  /** Value submitted when this option is selected. */
+  value: string;
+  /** Whether this option is disabled. */
+  disabled?: boolean;
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+/**
+ * **▾ Select item**
+ *
+ * A single selectable option inside {@link SelectContent}.
+ */
+declare const SelectItem: _$react.NamedExoticComponent<SelectItemProps>;
+//#endregion
+export { SelectItem, type SelectItemProps };
+//# sourceMappingURL=SelectItem.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectItem.d.cts","names":[],"sources":["../../../src/components/Select/SelectItem.tsx"],"mappings":";;;;;;UAqBU,eAAA;;EAER,KAAA;EAFQ;EAIR,QAAA;EACA,QAAA,GAAW,SAAA;EACX,KAAA,GAAQ,SAAA,CAAU,SAAA;EAClB,MAAA;AAAA;;;;;;cAQI,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}

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

@@ -0,0 +1,24 @@
+
+import * as _$react from "react";
+import { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+
+//#region src/components/Select/SelectItem.d.ts
+interface SelectItemProps {
+  /** Value submitted when this option is selected. */
+  value: string;
+  /** Whether this option is disabled. */
+  disabled?: boolean;
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+/**
+ * **▾ Select item**
+ *
+ * A single selectable option inside {@link SelectContent}.
+ */
+declare const SelectItem: _$react.NamedExoticComponent<SelectItemProps>;
+//#endregion
+export { SelectItem, type SelectItemProps };
+//# sourceMappingURL=SelectItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectItem.d.ts","names":[],"sources":["../../../src/components/Select/SelectItem.tsx"],"mappings":";;;;;;UAqBU,eAAA;;EAER,KAAA;EAFQ;EAIR,QAAA;EACA,QAAA,GAAW,SAAA;EACX,KAAA,GAAQ,SAAA,CAAU,SAAA;EAClB,MAAA;AAAA;;;;;;cAQI,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}

package/dist/components/Select/SelectItem.js

@@ -0,0 +1,137 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { HStack } from "../HStack.js";
+import { IconSlot } from "../IconSlot.js";
+import { useSelectContext } from "./selectContext.js";
+import { getMergedSelectItemLayerStyle, resolveSelectItemInteractionState } from "./selectItemTheme.js";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { Pressable, Text } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useUnistyles } from "react-native-unistyles";
+import Animated, { Easing, useAnimatedStyle, useDerivedValue, withTiming } from "react-native-reanimated";
+//#region src/components/Select/SelectItem.tsx
+/**
+* **▾ Select item**
+*
+* A single selectable option inside {@link SelectContent}.
+*/
+const SelectItem = memo(function SelectItem({ value, disabled, children, style, testID }) {
+	const { value: selectedValue, setValue, setOpen, open, registerItem, unregisterItem, highlightedValue, setHighlightedValue, reduceMotion } = useSelectContext();
+	const { theme } = useUnistyles();
+	const [isPressed, setIsPressed] = useState(false);
+	const label = useMemo(() => {
+		if (typeof children === "string" || typeof children === "number") return String(children);
+		return value;
+	}, [children, value]);
+	useEffect(() => {
+		registerItem(value, label);
+		return () => unregisterItem(value);
+	}, [
+		label,
+		registerItem,
+		unregisterItem,
+		value
+	]);
+	const isSelected = selectedValue === value;
+	const interaction = resolveSelectItemInteractionState({
+		isPressed,
+		isHighlighted: highlightedValue === value
+	});
+	const rootStyle = useMemo(() => [
+		getMergedSelectItemLayerStyle(theme, "root", interaction, isSelected),
+		{
+			flexDirection: "row",
+			alignItems: "center",
+			justifyContent: "space-between",
+			width: "100%",
+			opacity: disabled ? .5 : 1
+		},
+		style
+	], [
+		disabled,
+		interaction,
+		isSelected,
+		style,
+		theme
+	]);
+	const textStyle = useMemo(() => getMergedSelectItemLayerStyle(theme, "text", interaction, isSelected), [
+		interaction,
+		isSelected,
+		theme
+	]);
+	const endIconStyle = useMemo(() => getMergedSelectItemLayerStyle(theme, "endIcon", interaction, isSelected), [
+		interaction,
+		isSelected,
+		theme
+	]);
+	const checkScale = useDerivedValue(() => withTiming(isSelected ? 1 : 0, {
+		duration: reduceMotion ? 0 : 120,
+		easing: Easing.out(Easing.ease)
+	}), [isSelected, reduceMotion]);
+	const checkAnimatedStyle = useAnimatedStyle(() => ({
+		opacity: checkScale.value,
+		transform: [{ scale: .7 + checkScale.value * .3 }]
+	}));
+	const handlePress = useCallback(() => {
+		if (disabled) return;
+		setValue(value);
+		setOpen(false);
+		setHighlightedValue(null);
+	}, [
+		disabled,
+		setHighlightedValue,
+		setOpen,
+		setValue,
+		value
+	]);
+	const handlePressIn = useCallback(() => {
+		if (disabled) return;
+		setIsPressed(true);
+		setHighlightedValue(value);
+	}, [
+		disabled,
+		setHighlightedValue,
+		value
+	]);
+	const handlePressOut = useCallback(() => {
+		setIsPressed(false);
+	}, []);
+	if (!open) return null;
+	return /* @__PURE__ */ jsxs(Pressable, {
+		testID,
+		disabled,
+		onPress: handlePress,
+		onPressIn: handlePressIn,
+		onPressOut: handlePressOut,
+		style: rootStyle,
+		accessibilityRole: "menuitem",
+		accessibilityState: {
+			disabled: !!disabled,
+			selected: isSelected
+		},
+		children: [/* @__PURE__ */ jsx(HStack, {
+			columnGap: "2",
+			alignItems: "center",
+			justifyContent: "flex-start",
+			style: { flex: 1 },
+			children: /* @__PURE__ */ jsx(Text, {
+				style: textStyle,
+				numberOfLines: 1,
+				children
+			})
+		}), /* @__PURE__ */ jsx(Animated.View, {
+			style: checkAnimatedStyle,
+			pointerEvents: "none",
+			children: /* @__PURE__ */ jsx(IconSlot, {
+				icon: "Check",
+				size: "sm",
+				variant: "fill",
+				style: endIconStyle
+			})
+		})]
+	});
+});
+SelectItem.displayName = "SelectItem";
+//#endregion
+export { SelectItem };
+
+//# sourceMappingURL=SelectItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectItem.js","names":["RNPressable","RNText"],"sources":["../../../src/components/Select/SelectItem.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { Pressable as RNPressable, Text as RNText } from 'react-native';\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useDerivedValue,\n  withTiming,\n} from 'react-native-reanimated';\n// eslint-disable-next-line uds/no-use-unistyles -- selectItem selected state uses theme paths\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport { HStack } from '../HStack';\nimport { IconSlot } from '../IconSlot';\nimport { useSelectContext } from './selectContext';\nimport {\n  getMergedSelectItemLayerStyle,\n  resolveSelectItemInteractionState,\n} from './selectItemTheme';\n\ninterface SelectItemProps {\n  /** Value submitted when this option is selected. */\n  value: string;\n  /** Whether this option is disabled. */\n  disabled?: boolean;\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n}\n\n/**\n * **▾ Select item**\n *\n * A single selectable option inside {@link SelectContent}.\n */\nconst SelectItem = memo(function SelectItem({\n  value,\n  disabled,\n  children,\n  style,\n  testID,\n}: SelectItemProps) {\n  const {\n    value: selectedValue,\n    setValue,\n    setOpen,\n    open,\n    registerItem,\n    unregisterItem,\n    highlightedValue,\n    setHighlightedValue,\n    reduceMotion,\n  } = useSelectContext();\n  const { theme } = useUnistyles();\n  const [isPressed, setIsPressed] = useState(false);\n\n  const label = useMemo(() => {\n    if (typeof children === 'string' || typeof children === 'number') {\n      return String(children);\n    }\n\n    return value;\n  }, [children, value]);\n\n  useEffect(() => {\n    registerItem(value, label);\n    return () => unregisterItem(value);\n  }, [label, registerItem, unregisterItem, value]);\n\n  const isSelected = selectedValue === value;\n  const isHighlighted = highlightedValue === value;\n  const interaction = resolveSelectItemInteractionState({\n    isPressed,\n    isHighlighted,\n  });\n\n  const rootStyle = useMemo(\n    () =>\n      [\n        getMergedSelectItemLayerStyle(theme, 'root', interaction, isSelected),\n        {\n          flexDirection: 'row' as const,\n          alignItems: 'center' as const,\n          justifyContent: 'space-between' as const,\n          width: '100%' as const,\n          opacity: disabled ? 0.5 : 1,\n        },\n        style,\n      ] as StyleProp<ViewStyle>,\n    [disabled, interaction, isSelected, style, theme],\n  );\n\n  const textStyle = useMemo(\n    () => getMergedSelectItemLayerStyle(theme, 'text', interaction, isSelected),\n    [interaction, isSelected, theme],\n  );\n\n  const endIconStyle = useMemo(\n    () => getMergedSelectItemLayerStyle(theme, 'endIcon', interaction, isSelected),\n    [interaction, isSelected, theme],\n  );\n\n  const checkScale = useDerivedValue(\n    () =>\n      withTiming(isSelected ? 1 : 0, {\n        duration: reduceMotion ? 0 : 120,\n        easing: Easing.out(Easing.ease),\n      }),\n    [isSelected, reduceMotion],\n  );\n\n  const checkAnimatedStyle = useAnimatedStyle(() => ({\n    opacity: checkScale.value,\n    transform: [{ scale: 0.7 + checkScale.value * 0.3 }],\n  }));\n\n  const handlePress = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    setValue(value);\n    setOpen(false);\n    setHighlightedValue(null);\n  }, [disabled, setHighlightedValue, setOpen, setValue, value]);\n\n  const handlePressIn = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    setIsPressed(true);\n    setHighlightedValue(value);\n  }, [disabled, setHighlightedValue, value]);\n\n  const handlePressOut = useCallback(() => {\n    setIsPressed(false);\n  }, []);\n\n  if (!open) {\n    return null;\n  }\n\n  return (\n    <RNPressable\n      testID={testID}\n      disabled={disabled}\n      onPress={handlePress}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      style={rootStyle}\n      accessibilityRole=\"menuitem\"\n      accessibilityState={{ disabled: !!disabled, selected: isSelected }}\n    >\n      <HStack columnGap=\"2\" alignItems=\"center\" justifyContent=\"flex-start\" style={{ flex: 1 }}>\n        <RNText style={textStyle} numberOfLines={1}>\n          {children}\n        </RNText>\n      </HStack>\n\n      <Animated.View style={checkAnimatedStyle} pointerEvents=\"none\">\n        <IconSlot icon=\"Check\" size=\"sm\" variant=\"fill\" style={endIconStyle} />\n      </Animated.View>\n    </RNPressable>\n  );\n});\n\nSelectItem.displayName = 'SelectItem';\n\nexport { SelectItem, type SelectItemProps };\n"],"mappings":";;;;;;;;;;;;;;;;AAoCA,MAAM,aAAa,KAAK,SAAS,WAAW,EAC1C,OACA,UACA,UACA,OACA,UACkB;CAClB,MAAM,EACJ,OAAO,eACP,UACA,SACA,MACA,cACA,gBACA,kBACA,qBACA,iBACE,kBAAkB;CACtB,MAAM,EAAE,UAAU,cAAc;CAChC,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CAEjD,MAAM,QAAQ,cAAc;EAC1B,IAAI,OAAO,aAAa,YAAY,OAAO,aAAa,UACtD,OAAO,OAAO,SAAS;EAGzB,OAAO;IACN,CAAC,UAAU,MAAM,CAAC;CAErB,gBAAgB;EACd,aAAa,OAAO,MAAM;EAC1B,aAAa,eAAe,MAAM;IACjC;EAAC;EAAO;EAAc;EAAgB;EAAM,CAAC;CAEhD,MAAM,aAAa,kBAAkB;CAErC,MAAM,cAAc,kCAAkC;EACpD;EACA,eAHoB,qBAAqB;EAI1C,CAAC;CAEF,MAAM,YAAY,cAEd;EACE,8BAA8B,OAAO,QAAQ,aAAa,WAAW;EACrE;GACE,eAAe;GACf,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACP,SAAS,WAAW,KAAM;GAC3B;EACD;EACD,EACH;EAAC;EAAU;EAAa;EAAY;EAAO;EAAM,CAClD;CAED,MAAM,YAAY,cACV,8BAA8B,OAAO,QAAQ,aAAa,WAAW,EAC3E;EAAC;EAAa;EAAY;EAAM,CACjC;CAED,MAAM,eAAe,cACb,8BAA8B,OAAO,WAAW,aAAa,WAAW,EAC9E;EAAC;EAAa;EAAY;EAAM,CACjC;CAED,MAAM,aAAa,sBAEf,WAAW,aAAa,IAAI,GAAG;EAC7B,UAAU,eAAe,IAAI;EAC7B,QAAQ,OAAO,IAAI,OAAO,KAAK;EAChC,CAAC,EACJ,CAAC,YAAY,aAAa,CAC3B;CAED,MAAM,qBAAqB,wBAAwB;EACjD,SAAS,WAAW;EACpB,WAAW,CAAC,EAAE,OAAO,KAAM,WAAW,QAAQ,IAAK,CAAC;EACrD,EAAE;CAEH,MAAM,cAAc,kBAAkB;EACpC,IAAI,UACF;EAGF,SAAS,MAAM;EACf,QAAQ,MAAM;EACd,oBAAoB,KAAK;IACxB;EAAC;EAAU;EAAqB;EAAS;EAAU;EAAM,CAAC;CAE7D,MAAM,gBAAgB,kBAAkB;EACtC,IAAI,UACF;EAGF,aAAa,KAAK;EAClB,oBAAoB,MAAM;IACzB;EAAC;EAAU;EAAqB;EAAM,CAAC;CAE1C,MAAM,iBAAiB,kBAAkB;EACvC,aAAa,MAAM;IAClB,EAAE,CAAC;CAEN,IAAI,CAAC,MACH,OAAO;CAGT,OACE,qBAACA,WAAD;EACU;EACE;EACV,SAAS;EACT,WAAW;EACX,YAAY;EACZ,OAAO;EACP,mBAAkB;EAClB,oBAAoB;GAAE,UAAU,CAAC,CAAC;GAAU,UAAU;GAAY;YARpE,CAUE,oBAAC,QAAD;GAAQ,WAAU;GAAI,YAAW;GAAS,gBAAe;GAAa,OAAO,EAAE,MAAM,GAAG;aACtF,oBAACC,MAAD;IAAQ,OAAO;IAAW,eAAe;IACtC;IACM,CAAA;GACF,CAAA,EAET,oBAAC,SAAS,MAAV;GAAe,OAAO;GAAoB,eAAc;aACtD,oBAAC,UAAD;IAAU,MAAK;IAAQ,MAAK;IAAK,SAAQ;IAAO,OAAO;IAAgB,CAAA;GACzD,CAAA,CACJ;;EAEhB;AAEF,WAAW,cAAc"}

package/dist/components/Select/SelectTrigger.cjs

@@ -0,0 +1,140 @@
+/*! © 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_IconSlot = require("../IconSlot.cjs");
+const require_components_internal_Overlay_measureTrigger = require("../internal/Overlay/measureTrigger.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/SelectTrigger.tsx
+const SelectTrigger = (0, react.memo)(function SelectTrigger({ startIcon, endIcon }) {
+	const { value, open, setOpen, triggerRef, triggerRect, setTriggerRect, getItemLabel, setHighlightedValue, reduceMotion } = require_components_Select_selectContext.useSelectContext();
+	const { size, disabled, readOnly, hasError, placeholder, uid, width } = require_components_Select_selectContext.useSelectFieldContext();
+	const hasValue = value.length > 0;
+	const valueState = hasValue ? "filled" : "empty";
+	const isInteractive = !readOnly && !disabled;
+	const useAnimatedChevron = endIcon === void 0;
+	const displayText = hasValue ? getItemLabel(value) ?? value : placeholder ?? "";
+	generated_styles.inputStyles.useVariants({
+		size,
+		value: valueState,
+		pressed: open,
+		readonly: readOnly,
+		invalid: hasError
+	});
+	const inputWrapperStyle = (0, react.useMemo)(() => [
+		generated_styles.inputStyles.inputWrapper,
+		generated_styles.inputStyles.inputWrapperStatic,
+		generated_styles.inputStyles.inputWrapperDynamic,
+		{
+			flexDirection: "row",
+			alignItems: "center",
+			width,
+			alignSelf: "stretch"
+		}
+	], [
+		generated_styles.inputStyles.inputWrapper,
+		generated_styles.inputStyles.inputWrapperDynamic,
+		generated_styles.inputStyles.inputWrapperStatic,
+		width
+	]);
+	const textContainerStyle = (0, react.useMemo)(() => [{
+		flex: 1,
+		justifyContent: "center"
+	}, typeof generated_styles.inputStyles.input.height === "number" ? { minHeight: generated_styles.inputStyles.input.height } : null], [generated_styles.inputStyles.input]);
+	const textInputStyle = (0, react.useMemo)(() => [
+		{
+			fontFamily: generated_styles.inputStyles.inputWrapperStatic.fontFamily,
+			fontSize: generated_styles.inputStyles.inputWrapperStatic.fontSize,
+			letterSpacing: generated_styles.inputStyles.inputWrapperStatic.letterSpacing,
+			lineHeight: generated_styles.inputStyles.inputWrapperStatic.fontSize,
+			paddingVertical: 0
+		},
+		generated_styles.inputStyles.input,
+		{ height: void 0 },
+		!hasValue ? generated_styles.inputStyles.inputPlaceholder : null
+	], [
+		hasValue,
+		generated_styles.inputStyles.input,
+		generated_styles.inputStyles.inputPlaceholder,
+		generated_styles.inputStyles.inputWrapperStatic
+	]);
+	const chevronProgress = (0, react_native_reanimated.useDerivedValue)(() => (0, react_native_reanimated.withTiming)(open ? 1 : 0, {
+		duration: reduceMotion ? 0 : 200,
+		easing: react_native_reanimated.Easing.out(react_native_reanimated.Easing.ease)
+	}), [open, reduceMotion]);
+	const chevronAnimatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({ transform: [{ rotate: `${chevronProgress.value * 180}deg` }] }));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Pressable, {
+		ref: (0, react.useCallback)((node) => {
+			triggerRef.current = node;
+		}, [triggerRef]),
+		testID: "select-trigger",
+		onPress: (0, react.useCallback)(() => {
+			if (!isInteractive) return;
+			if (open) {
+				setOpen(false);
+				setHighlightedValue(null);
+				return;
+			}
+			require_components_internal_Overlay_measureTrigger.measureTrigger(triggerRef.current, triggerRect, setTriggerRect);
+			setHighlightedValue(null);
+			setOpen(true);
+		}, [
+			isInteractive,
+			open,
+			setHighlightedValue,
+			setOpen,
+			setTriggerRect,
+			triggerRect,
+			triggerRef
+		]),
+		disabled: !isInteractive,
+		style: {
+			width,
+			alignSelf: "stretch"
+		},
+		accessibilityRole: "button",
+		accessibilityLabel: displayText || uid,
+		accessibilityState: {
+			disabled: !isInteractive,
+			expanded: open,
+			selected: hasValue
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
+			style: inputWrapperStyle,
+			pointerEvents: "none",
+			children: [
+				startIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+					icon: startIcon,
+					variant: "outline",
+					style: generated_styles.inputStyles.startIcon
+				}) : null,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+					style: textContainerStyle,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+						numberOfLines: 1,
+						style: textInputStyle,
+						children: displayText
+					})
+				}),
+				useAnimatedChevron || endIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
+					style: useAnimatedChevron ? chevronAnimatedStyle : void 0,
+					testID: "select-chevron",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+						icon: useAnimatedChevron ? "ChevronDown" : endIcon,
+						size: "sm",
+						variant: "outline",
+						style: generated_styles.inputStyles.endIcon
+					})
+				}) : null
+			]
+		})
+	});
+});
+SelectTrigger.displayName = "SelectTrigger";
+//#endregion
+exports.SelectTrigger = SelectTrigger;

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

@@ -0,0 +1,13 @@
+
+import { IconSlotType } from "../IconSlot.cjs";
+import * as _$react from "react";
+
+//#region src/components/Select/SelectTrigger.d.ts
+interface SelectTriggerProps {
+  startIcon?: IconSlotType;
+  endIcon?: IconSlotType;
+}
+declare const SelectTrigger: _$react.NamedExoticComponent<SelectTriggerProps>;
+//#endregion
+export { SelectTrigger, type SelectTriggerProps };
+//# sourceMappingURL=SelectTrigger.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectTrigger.d.cts","names":[],"sources":["../../../src/components/Select/SelectTrigger.tsx"],"mappings":";;;;;UAgBU,kBAAA;EACR,SAAA,GAAY,YAAA;EACZ,OAAA,GAAU,YAAA;AAAA;AAAA,cAGN,aAAA,EAAa,OAAA,CAAA,oBAAA,CAAA,kBAAA"}

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

@@ -0,0 +1,13 @@
+
+import { IconSlotType } from "../IconSlot.js";
+import * as _$react from "react";
+
+//#region src/components/Select/SelectTrigger.d.ts
+interface SelectTriggerProps {
+  startIcon?: IconSlotType;
+  endIcon?: IconSlotType;
+}
+declare const SelectTrigger: _$react.NamedExoticComponent<SelectTriggerProps>;
+//#endregion
+export { SelectTrigger, type SelectTriggerProps };
+//# sourceMappingURL=SelectTrigger.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectTrigger.d.ts","names":[],"sources":["../../../src/components/Select/SelectTrigger.tsx"],"mappings":";;;;;UAgBU,kBAAA;EACR,SAAA,GAAY,YAAA;EACZ,OAAA,GAAU,YAAA;AAAA;AAAA,cAGN,aAAA,EAAa,OAAA,CAAA,oBAAA,CAAA,kBAAA"}

package/dist/components/Select/SelectTrigger.js

@@ -0,0 +1,139 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { IconSlot } from "../IconSlot.js";
+import { measureTrigger } from "../internal/Overlay/measureTrigger.js";
+import { useSelectContext, useSelectFieldContext } from "./selectContext.js";
+import { memo, useCallback, useMemo } from "react";
+import { Pressable, Text, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { inputStyles } from "../../../generated/styles";
+import Animated, { Easing, useAnimatedStyle, useDerivedValue, withTiming } from "react-native-reanimated";
+//#region src/components/Select/SelectTrigger.tsx
+const SelectTrigger = memo(function SelectTrigger({ startIcon, endIcon }) {
+	const { value, open, setOpen, triggerRef, triggerRect, setTriggerRect, getItemLabel, setHighlightedValue, reduceMotion } = useSelectContext();
+	const { size, disabled, readOnly, hasError, placeholder, uid, width } = useSelectFieldContext();
+	const hasValue = value.length > 0;
+	const valueState = hasValue ? "filled" : "empty";
+	const isInteractive = !readOnly && !disabled;
+	const useAnimatedChevron = endIcon === void 0;
+	const displayText = hasValue ? getItemLabel(value) ?? value : placeholder ?? "";
+	inputStyles.useVariants({
+		size,
+		value: valueState,
+		pressed: open,
+		readonly: readOnly,
+		invalid: hasError
+	});
+	const inputWrapperStyle = useMemo(() => [
+		inputStyles.inputWrapper,
+		inputStyles.inputWrapperStatic,
+		inputStyles.inputWrapperDynamic,
+		{
+			flexDirection: "row",
+			alignItems: "center",
+			width,
+			alignSelf: "stretch"
+		}
+	], [
+		inputStyles.inputWrapper,
+		inputStyles.inputWrapperDynamic,
+		inputStyles.inputWrapperStatic,
+		width
+	]);
+	const textContainerStyle = useMemo(() => [{
+		flex: 1,
+		justifyContent: "center"
+	}, typeof inputStyles.input.height === "number" ? { minHeight: inputStyles.input.height } : null], [inputStyles.input]);
+	const textInputStyle = useMemo(() => [
+		{
+			fontFamily: inputStyles.inputWrapperStatic.fontFamily,
+			fontSize: inputStyles.inputWrapperStatic.fontSize,
+			letterSpacing: inputStyles.inputWrapperStatic.letterSpacing,
+			lineHeight: inputStyles.inputWrapperStatic.fontSize,
+			paddingVertical: 0
+		},
+		inputStyles.input,
+		{ height: void 0 },
+		!hasValue ? inputStyles.inputPlaceholder : null
+	], [
+		hasValue,
+		inputStyles.input,
+		inputStyles.inputPlaceholder,
+		inputStyles.inputWrapperStatic
+	]);
+	const chevronProgress = useDerivedValue(() => withTiming(open ? 1 : 0, {
+		duration: reduceMotion ? 0 : 200,
+		easing: Easing.out(Easing.ease)
+	}), [open, reduceMotion]);
+	const chevronAnimatedStyle = useAnimatedStyle(() => ({ transform: [{ rotate: `${chevronProgress.value * 180}deg` }] }));
+	return /* @__PURE__ */ jsx(Pressable, {
+		ref: useCallback((node) => {
+			triggerRef.current = node;
+		}, [triggerRef]),
+		testID: "select-trigger",
+		onPress: useCallback(() => {
+			if (!isInteractive) return;
+			if (open) {
+				setOpen(false);
+				setHighlightedValue(null);
+				return;
+			}
+			measureTrigger(triggerRef.current, triggerRect, setTriggerRect);
+			setHighlightedValue(null);
+			setOpen(true);
+		}, [
+			isInteractive,
+			open,
+			setHighlightedValue,
+			setOpen,
+			setTriggerRect,
+			triggerRect,
+			triggerRef
+		]),
+		disabled: !isInteractive,
+		style: {
+			width,
+			alignSelf: "stretch"
+		},
+		accessibilityRole: "button",
+		accessibilityLabel: displayText || uid,
+		accessibilityState: {
+			disabled: !isInteractive,
+			expanded: open,
+			selected: hasValue
+		},
+		children: /* @__PURE__ */ jsxs(View, {
+			style: inputWrapperStyle,
+			pointerEvents: "none",
+			children: [
+				startIcon ? /* @__PURE__ */ jsx(IconSlot, {
+					icon: startIcon,
+					variant: "outline",
+					style: inputStyles.startIcon
+				}) : null,
+				/* @__PURE__ */ jsx(View, {
+					style: textContainerStyle,
+					children: /* @__PURE__ */ jsx(Text, {
+						numberOfLines: 1,
+						style: textInputStyle,
+						children: displayText
+					})
+				}),
+				useAnimatedChevron || endIcon ? /* @__PURE__ */ jsx(Animated.View, {
+					style: useAnimatedChevron ? chevronAnimatedStyle : void 0,
+					testID: "select-chevron",
+					children: /* @__PURE__ */ jsx(IconSlot, {
+						icon: useAnimatedChevron ? "ChevronDown" : endIcon,
+						size: "sm",
+						variant: "outline",
+						style: inputStyles.endIcon
+					})
+				}) : null
+			]
+		})
+	});
+});
+SelectTrigger.displayName = "SelectTrigger";
+//#endregion
+export { SelectTrigger };
+
+//# sourceMappingURL=SelectTrigger.js.map