@yahoo/uds-mobile 2.21.2 → 2.23.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectTrigger.js","names":["RNPressable","RNView","RNText"],"sources":["../../../src/components/Select/SelectTrigger.tsx"],"sourcesContent":["import { memo, useCallback, useMemo } from 'react';\nimport type { View } from 'react-native';\nimport { Pressable as RNPressable, Text as RNText, View as RNView } from 'react-native';\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useDerivedValue,\n  withTiming,\n} from 'react-native-reanimated';\n\nimport { inputStyles } from '../../../generated/styles';\nimport type { IconSlotType } from '../IconSlot';\nimport { IconSlot } from '../IconSlot';\nimport { measureTrigger } from '../internal/Overlay';\nimport { useSelectContext, useSelectFieldContext } from './selectContext';\n\ninterface SelectTriggerProps {\n  startIcon?: IconSlotType;\n  endIcon?: IconSlotType;\n}\n\nconst SelectTrigger = memo(function SelectTrigger({ startIcon, endIcon }: SelectTriggerProps) {\n  const {\n    value,\n    open,\n    setOpen,\n    triggerRef,\n    triggerRect,\n    setTriggerRect,\n    getItemLabel,\n    setHighlightedValue,\n    reduceMotion,\n  } = useSelectContext();\n  const { size, disabled, readOnly, hasError, placeholder, uid, width } = useSelectFieldContext();\n\n  const hasValue = value.length > 0;\n  const valueState = hasValue ? 'filled' : 'empty';\n  const isInteractive = !readOnly && !disabled;\n  const useAnimatedChevron = endIcon === undefined;\n  const displayText = hasValue ? (getItemLabel(value) ?? value) : (placeholder ?? '');\n\n  inputStyles.useVariants({\n    size,\n    value: valueState,\n    pressed: open,\n    readonly: readOnly,\n    invalid: hasError,\n  });\n\n  const inputWrapperStyle = useMemo(\n    () => [\n      inputStyles.inputWrapper,\n      inputStyles.inputWrapperStatic,\n      inputStyles.inputWrapperDynamic,\n      {\n        flexDirection: 'row' as const,\n        alignItems: 'center' as const,\n        width,\n        alignSelf: 'stretch' as const,\n      },\n    ],\n    [\n      inputStyles.inputWrapper,\n      inputStyles.inputWrapperDynamic,\n      inputStyles.inputWrapperStatic,\n      width,\n    ],\n  );\n\n  const textContainerStyle = useMemo(\n    () => [\n      {\n        flex: 1,\n        justifyContent: 'center' as const,\n      },\n      typeof inputStyles.input.height === 'number' ? { minHeight: inputStyles.input.height } : null,\n    ],\n    [inputStyles.input],\n  );\n\n  const textInputStyle = useMemo(\n    () => [\n      {\n        fontFamily: inputStyles.inputWrapperStatic.fontFamily,\n        fontSize: inputStyles.inputWrapperStatic.fontSize,\n        letterSpacing: inputStyles.inputWrapperStatic.letterSpacing,\n        // Match TextInput vertical centering: wrapper lineHeight is for layout, not single-line text.\n        lineHeight: inputStyles.inputWrapperStatic.fontSize,\n        paddingVertical: 0,\n      },\n      inputStyles.input,\n      { height: undefined },\n      !hasValue ? inputStyles.inputPlaceholder : null,\n    ],\n    [hasValue, inputStyles.input, inputStyles.inputPlaceholder, inputStyles.inputWrapperStatic],\n  );\n\n  const chevronProgress = useDerivedValue(\n    () =>\n      withTiming(open ? 1 : 0, {\n        duration: reduceMotion ? 0 : 200,\n        easing: Easing.out(Easing.ease),\n      }),\n    [open, reduceMotion],\n  );\n\n  const chevronAnimatedStyle = useAnimatedStyle(() => ({\n    transform: [{ rotate: `${chevronProgress.value * 180}deg` }],\n  }));\n\n  const handleRef = useCallback(\n    (node: View | null) => {\n      triggerRef.current = node;\n    },\n    [triggerRef],\n  );\n\n  const handlePress = useCallback(() => {\n    if (!isInteractive) {\n      return;\n    }\n\n    if (open) {\n      setOpen(false);\n      setHighlightedValue(null);\n      return;\n    }\n\n    measureTrigger(triggerRef.current, triggerRect, setTriggerRect);\n    setHighlightedValue(null);\n    setOpen(true);\n  }, [isInteractive, open, setHighlightedValue, setOpen, setTriggerRect, triggerRect, triggerRef]);\n\n  return (\n    <RNPressable\n      ref={handleRef}\n      testID=\"select-trigger\"\n      onPress={handlePress}\n      disabled={!isInteractive}\n      style={{ width, alignSelf: 'stretch' }}\n      accessibilityRole=\"button\"\n      accessibilityLabel={displayText || uid}\n      accessibilityState={{\n        disabled: !isInteractive,\n        expanded: open,\n        selected: hasValue,\n      }}\n    >\n      <RNView style={inputWrapperStyle} pointerEvents=\"none\">\n        {startIcon ? (\n          <IconSlot icon={startIcon} variant=\"outline\" style={inputStyles.startIcon} />\n        ) : null}\n\n        <RNView style={textContainerStyle}>\n          <RNText numberOfLines={1} style={textInputStyle}>\n            {displayText}\n          </RNText>\n        </RNView>\n\n        {useAnimatedChevron || endIcon ? (\n          <Animated.View\n            style={useAnimatedChevron ? chevronAnimatedStyle : undefined}\n            testID=\"select-chevron\"\n          >\n            <IconSlot\n              icon={useAnimatedChevron ? 'ChevronDown' : endIcon!}\n              size=\"sm\"\n              variant=\"outline\"\n              style={inputStyles.endIcon}\n            />\n          </Animated.View>\n        ) : null}\n      </RNView>\n    </RNPressable>\n  );\n});\n\nSelectTrigger.displayName = 'SelectTrigger';\n\nexport { SelectTrigger, type SelectTriggerProps };\n"],"mappings":"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"}

package/dist/components/Select/index.cjs

@@ -0,0 +1,8 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_components_Select_Select = require("./Select.cjs");
+const require_components_Select_SelectContent = require("./SelectContent.cjs");
+const require_components_Select_SelectItem = require("./SelectItem.cjs");
+exports.Select = require_components_Select_Select.Select;
+exports.SelectContent = require_components_Select_SelectContent.SelectContent;
+exports.SelectItem = require_components_Select_SelectItem.SelectItem;

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

@@ -0,0 +1,5 @@
+
+import { Select, SelectProps } from "./Select.cjs";
+import { SelectContent, SelectContentProps } from "./SelectContent.cjs";
+import { SelectItem, SelectItemProps } from "./SelectItem.cjs";
+export { Select, SelectContent, type SelectContentProps, SelectItem, type SelectItemProps, type SelectProps };

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

@@ -0,0 +1,5 @@
+
+import { Select, SelectProps } from "./Select.js";
+import { SelectContent, SelectContentProps } from "./SelectContent.js";
+import { SelectItem, SelectItemProps } from "./SelectItem.js";
+export { Select, SelectContent, type SelectContentProps, SelectItem, type SelectItemProps, type SelectProps };

package/dist/components/Select/index.js

@@ -0,0 +1,5 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { Select } from "./Select.js";
+import { SelectContent } from "./SelectContent.js";
+import { SelectItem } from "./SelectItem.js";
+export { Select, SelectContent, SelectItem };

package/dist/components/Select/selectContext.cjs

@@ -0,0 +1,22 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.cjs");
+let react = require("react");
+//#region src/components/Select/selectContext.tsx
+const SelectContext = (0, react.createContext)(null);
+const SelectFieldContext = (0, react.createContext)(null);
+function useSelectContext() {
+	const context = (0, react.useContext)(SelectContext);
+	if (!context) throw new Error("Select compound components must be used within Select");
+	return context;
+}
+function useSelectFieldContext() {
+	const context = (0, react.useContext)(SelectFieldContext);
+	if (!context) throw new Error("Select field components must be used within Select");
+	return context;
+}
+//#endregion
+exports.SelectContext = SelectContext;
+exports.SelectFieldContext = SelectFieldContext;
+exports.useSelectContext = useSelectContext;
+exports.useSelectFieldContext = useSelectFieldContext;

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

@@ -0,0 +1,12 @@
+
+import { SelectContextValue, SelectFieldContextValue } from "./types.cjs";
+import * as _$react from "react";
+
+//#region src/components/Select/selectContext.d.ts
+declare const SelectContext: _$react.Context<SelectContextValue | null>;
+declare const SelectFieldContext: _$react.Context<SelectFieldContextValue | null>;
+declare function useSelectContext(): SelectContextValue;
+declare function useSelectFieldContext(): SelectFieldContextValue;
+//#endregion
+export { SelectContext, SelectFieldContext, useSelectContext, useSelectFieldContext };
+//# sourceMappingURL=selectContext.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selectContext.d.cts","names":[],"sources":["../../../src/components/Select/selectContext.tsx"],"mappings":";;;;;cAIa,aAAA,EAAa,OAAA,CAAA,OAAA,CAAA,kBAAA;AAAA,cACb,kBAAA,EAAkB,OAAA,CAAA,OAAA,CAAA,uBAAA;AAAA,iBAEf,gBAAA,CAAA,GAAoB,kBAAA;AAAA,iBASpB,qBAAA,CAAA,GAAyB,uBAAA"}

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

@@ -0,0 +1,12 @@
+
+import { SelectContextValue, SelectFieldContextValue } from "./types.js";
+import * as _$react from "react";
+
+//#region src/components/Select/selectContext.d.ts
+declare const SelectContext: _$react.Context<SelectContextValue | null>;
+declare const SelectFieldContext: _$react.Context<SelectFieldContextValue | null>;
+declare function useSelectContext(): SelectContextValue;
+declare function useSelectFieldContext(): SelectFieldContextValue;
+//#endregion
+export { SelectContext, SelectFieldContext, useSelectContext, useSelectFieldContext };
+//# sourceMappingURL=selectContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selectContext.d.ts","names":[],"sources":["../../../src/components/Select/selectContext.tsx"],"mappings":";;;;;cAIa,aAAA,EAAa,OAAA,CAAA,OAAA,CAAA,kBAAA;AAAA,cACb,kBAAA,EAAkB,OAAA,CAAA,OAAA,CAAA,uBAAA;AAAA,iBAEf,gBAAA,CAAA,GAAoB,kBAAA;AAAA,iBASpB,qBAAA,CAAA,GAAyB,uBAAA"}

package/dist/components/Select/selectContext.js

@@ -0,0 +1,19 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { createContext, useContext } from "react";
+//#region src/components/Select/selectContext.tsx
+const SelectContext = createContext(null);
+const SelectFieldContext = createContext(null);
+function useSelectContext() {
+	const context = useContext(SelectContext);
+	if (!context) throw new Error("Select compound components must be used within Select");
+	return context;
+}
+function useSelectFieldContext() {
+	const context = useContext(SelectFieldContext);
+	if (!context) throw new Error("Select field components must be used within Select");
+	return context;
+}
+//#endregion
+export { SelectContext, SelectFieldContext, useSelectContext, useSelectFieldContext };
+
+//# sourceMappingURL=selectContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selectContext.js","names":[],"sources":["../../../src/components/Select/selectContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport type { SelectContextValue, SelectFieldContextValue } from './types';\n\nexport const SelectContext = createContext<SelectContextValue | null>(null);\nexport const SelectFieldContext = createContext<SelectFieldContextValue | null>(null);\n\nexport function useSelectContext(): SelectContextValue {\n  const context = useContext(SelectContext);\n  if (!context) {\n    throw new Error('Select compound components must be used within Select');\n  }\n\n  return context;\n}\n\nexport function useSelectFieldContext(): SelectFieldContextValue {\n  const context = useContext(SelectFieldContext);\n  if (!context) {\n    throw new Error('Select field components must be used within Select');\n  }\n\n  return context;\n}\n"],"mappings":";;;AAIA,MAAa,gBAAgB,cAAyC,KAAK;AAC3E,MAAa,qBAAqB,cAA8C,KAAK;AAErF,SAAgB,mBAAuC;CACrD,MAAM,UAAU,WAAW,cAAc;CACzC,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,wDAAwD;CAG1E,OAAO;;AAGT,SAAgB,wBAAiD;CAC/D,MAAM,UAAU,WAAW,mBAAmB;CAC9C,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,qDAAqD;CAGvE,OAAO"}

package/dist/components/Select/selectItemTheme.cjs

@@ -0,0 +1,39 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/components/Select/selectItemTheme.ts
+function getSelectItemLayerPath(layer, active, state) {
+	return `selectItem/item/variant/default/active/${active}/${layer}/${state}`;
+}
+function getSelectItemSizeLayerPath(layer) {
+	return `selectItem/size/default/${layer}/rest`;
+}
+function mapInteractionToMobileState(state) {
+	if (state === "pressed" || state === "focused") return "pressed";
+	return "rest";
+}
+function getSelectItemLayerStyle(theme, layer, active, state) {
+	const style = theme.components[getSelectItemLayerPath(layer, active, state)];
+	return style && typeof style === "object" ? style : {};
+}
+function getSelectItemSizeLayerStyle(theme, layer) {
+	const style = theme.components[getSelectItemSizeLayerPath(layer)];
+	return style && typeof style === "object" ? style : {};
+}
+function resolveSelectItemInteractionState({ isPressed, isHighlighted }) {
+	if (isPressed) return "pressed";
+	if (isHighlighted) return "focused";
+	return "rest";
+}
+function getMergedSelectItemLayerStyle(theme, layer, interaction, isSelected) {
+	if (layer === "endIcon" && !isSelected) return {};
+	const active = isSelected ? "on" : "off";
+	const mobileState = mapInteractionToMobileState(interaction);
+	return {
+		...layer === "root" ? getSelectItemSizeLayerStyle(theme, "root") : {},
+		...layer === "text" ? getSelectItemSizeLayerStyle(theme, "text") : {},
+		...getSelectItemLayerStyle(theme, layer, active, mobileState)
+	};
+}
+//#endregion
+exports.getMergedSelectItemLayerStyle = getMergedSelectItemLayerStyle;
+exports.resolveSelectItemInteractionState = resolveSelectItemInteractionState;

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

@@ -0,0 +1,19 @@
+
+import { SelectItemInteractionState, SelectItemLayer } from "./types.cjs";
+import { TextStyle, ViewStyle } from "react-native";
+
+//#region src/components/Select/selectItemTheme.d.ts
+type SelectItemTheme = {
+  components: Record<string, any>;
+};
+declare function resolveSelectItemInteractionState({
+  isPressed,
+  isHighlighted
+}: {
+  isPressed: boolean;
+  isHighlighted: boolean;
+}): SelectItemInteractionState;
+declare function getMergedSelectItemLayerStyle(theme: SelectItemTheme, layer: SelectItemLayer, interaction: SelectItemInteractionState, isSelected: boolean): ViewStyle | TextStyle;
+//#endregion
+export { getMergedSelectItemLayerStyle, resolveSelectItemInteractionState };
+//# sourceMappingURL=selectItemTheme.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selectItemTheme.d.cts","names":[],"sources":["../../../src/components/Select/selectItemTheme.ts"],"mappings":";;;;;KAIK,eAAA;EAEH,UAAA,EAAY,MAAA;AAAA;AAAA,iBAyCL,iCAAA,CAAA;EACP,SAAA;EACA;AAAA;EAEA,SAAA;EACA,aAAA;AAAA,IACE,0BAAA;AAAA,iBAYK,6BAAA,CACP,KAAA,EAAO,eAAA,EACP,KAAA,EAAO,eAAA,EACP,WAAA,EAAa,0BAAA,EACb,UAAA,YACC,SAAA,GAAY,SAAA"}

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

@@ -0,0 +1,19 @@
+
+import { SelectItemInteractionState, SelectItemLayer } from "./types.js";
+import { TextStyle, ViewStyle } from "react-native";
+
+//#region src/components/Select/selectItemTheme.d.ts
+type SelectItemTheme = {
+  components: Record<string, any>;
+};
+declare function resolveSelectItemInteractionState({
+  isPressed,
+  isHighlighted
+}: {
+  isPressed: boolean;
+  isHighlighted: boolean;
+}): SelectItemInteractionState;
+declare function getMergedSelectItemLayerStyle(theme: SelectItemTheme, layer: SelectItemLayer, interaction: SelectItemInteractionState, isSelected: boolean): ViewStyle | TextStyle;
+//#endregion
+export { getMergedSelectItemLayerStyle, resolveSelectItemInteractionState };
+//# sourceMappingURL=selectItemTheme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selectItemTheme.d.ts","names":[],"sources":["../../../src/components/Select/selectItemTheme.ts"],"mappings":";;;;;KAIK,eAAA;EAEH,UAAA,EAAY,MAAA;AAAA;AAAA,iBAyCL,iCAAA,CAAA;EACP,SAAA;EACA;AAAA;EAEA,SAAA;EACA,aAAA;AAAA,IACE,0BAAA;AAAA,iBAYK,6BAAA,CACP,KAAA,EAAO,eAAA,EACP,KAAA,EAAO,eAAA,EACP,WAAA,EAAa,0BAAA,EACb,UAAA,YACC,SAAA,GAAY,SAAA"}

package/dist/components/Select/selectItemTheme.js

@@ -0,0 +1,39 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+//#region src/components/Select/selectItemTheme.ts
+function getSelectItemLayerPath(layer, active, state) {
+	return `selectItem/item/variant/default/active/${active}/${layer}/${state}`;
+}
+function getSelectItemSizeLayerPath(layer) {
+	return `selectItem/size/default/${layer}/rest`;
+}
+function mapInteractionToMobileState(state) {
+	if (state === "pressed" || state === "focused") return "pressed";
+	return "rest";
+}
+function getSelectItemLayerStyle(theme, layer, active, state) {
+	const style = theme.components[getSelectItemLayerPath(layer, active, state)];
+	return style && typeof style === "object" ? style : {};
+}
+function getSelectItemSizeLayerStyle(theme, layer) {
+	const style = theme.components[getSelectItemSizeLayerPath(layer)];
+	return style && typeof style === "object" ? style : {};
+}
+function resolveSelectItemInteractionState({ isPressed, isHighlighted }) {
+	if (isPressed) return "pressed";
+	if (isHighlighted) return "focused";
+	return "rest";
+}
+function getMergedSelectItemLayerStyle(theme, layer, interaction, isSelected) {
+	if (layer === "endIcon" && !isSelected) return {};
+	const active = isSelected ? "on" : "off";
+	const mobileState = mapInteractionToMobileState(interaction);
+	return {
+		...layer === "root" ? getSelectItemSizeLayerStyle(theme, "root") : {},
+		...layer === "text" ? getSelectItemSizeLayerStyle(theme, "text") : {},
+		...getSelectItemLayerStyle(theme, layer, active, mobileState)
+	};
+}
+//#endregion
+export { getMergedSelectItemLayerStyle, resolveSelectItemInteractionState };
+
+//# sourceMappingURL=selectItemTheme.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selectItemTheme.js","names":[],"sources":["../../../src/components/Select/selectItemTheme.ts"],"sourcesContent":["import type { TextStyle, ViewStyle } from 'react-native';\n\nimport type { SelectItemInteractionState, SelectItemLayer } from './types';\n\ntype SelectItemTheme = {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  components: Record<string, any>;\n};\n\nfunction getSelectItemLayerPath(\n  layer: SelectItemLayer,\n  active: 'on' | 'off',\n  state: 'rest' | 'pressed',\n): string {\n  return `selectItem/item/variant/default/active/${active}/${layer}/${state}`;\n}\n\nfunction getSelectItemSizeLayerPath(layer: 'root' | 'text'): string {\n  return `selectItem/size/default/${layer}/rest`;\n}\n\nfunction mapInteractionToMobileState(state: SelectItemInteractionState): 'rest' | 'pressed' {\n  if (state === 'pressed' || state === 'focused') {\n    return 'pressed';\n  }\n\n  return 'rest';\n}\n\nfunction getSelectItemLayerStyle(\n  theme: SelectItemTheme,\n  layer: SelectItemLayer,\n  active: 'on' | 'off',\n  state: 'rest' | 'pressed',\n): ViewStyle | TextStyle {\n  const style = theme.components[getSelectItemLayerPath(layer, active, state)];\n  return style && typeof style === 'object' ? style : {};\n}\n\nfunction getSelectItemSizeLayerStyle(\n  theme: SelectItemTheme,\n  layer: 'root' | 'text',\n): ViewStyle | TextStyle {\n  const style = theme.components[getSelectItemSizeLayerPath(layer)];\n  return style && typeof style === 'object' ? style : {};\n}\n\nfunction resolveSelectItemInteractionState({\n  isPressed,\n  isHighlighted,\n}: {\n  isPressed: boolean;\n  isHighlighted: boolean;\n}): SelectItemInteractionState {\n  if (isPressed) {\n    return 'pressed';\n  }\n\n  if (isHighlighted) {\n    return 'focused';\n  }\n\n  return 'rest';\n}\n\nfunction getMergedSelectItemLayerStyle(\n  theme: SelectItemTheme,\n  layer: SelectItemLayer,\n  interaction: SelectItemInteractionState,\n  isSelected: boolean,\n): ViewStyle | TextStyle {\n  if (layer === 'endIcon' && !isSelected) {\n    return {};\n  }\n\n  const active = isSelected ? 'on' : 'off';\n  const mobileState = mapInteractionToMobileState(interaction);\n\n  return {\n    ...(layer === 'root' ? (getSelectItemSizeLayerStyle(theme, 'root') as object) : {}),\n    ...(layer === 'text' ? (getSelectItemSizeLayerStyle(theme, 'text') as object) : {}),\n    ...(getSelectItemLayerStyle(theme, layer, active, mobileState) as object),\n  } as ViewStyle | TextStyle;\n}\n\nexport { getMergedSelectItemLayerStyle, resolveSelectItemInteractionState };\n"],"mappings":";;AASA,SAAS,uBACP,OACA,QACA,OACQ;CACR,OAAO,0CAA0C,OAAO,GAAG,MAAM,GAAG;;AAGtE,SAAS,2BAA2B,OAAgC;CAClE,OAAO,2BAA2B,MAAM;;AAG1C,SAAS,4BAA4B,OAAuD;CAC1F,IAAI,UAAU,aAAa,UAAU,WACnC,OAAO;CAGT,OAAO;;AAGT,SAAS,wBACP,OACA,OACA,QACA,OACuB;CACvB,MAAM,QAAQ,MAAM,WAAW,uBAAuB,OAAO,QAAQ,MAAM;CAC3E,OAAO,SAAS,OAAO,UAAU,WAAW,QAAQ,EAAE;;AAGxD,SAAS,4BACP,OACA,OACuB;CACvB,MAAM,QAAQ,MAAM,WAAW,2BAA2B,MAAM;CAChE,OAAO,SAAS,OAAO,UAAU,WAAW,QAAQ,EAAE;;AAGxD,SAAS,kCAAkC,EACzC,WACA,iBAI6B;CAC7B,IAAI,WACF,OAAO;CAGT,IAAI,eACF,OAAO;CAGT,OAAO;;AAGT,SAAS,8BACP,OACA,OACA,aACA,YACuB;CACvB,IAAI,UAAU,aAAa,CAAC,YAC1B,OAAO,EAAE;CAGX,MAAM,SAAS,aAAa,OAAO;CACnC,MAAM,cAAc,4BAA4B,YAAY;CAE5D,OAAO;EACL,GAAI,UAAU,SAAU,4BAA4B,OAAO,OAAO,GAAc,EAAE;EAClF,GAAI,UAAU,SAAU,4BAA4B,OAAO,OAAO,GAAc,EAAE;EAClF,GAAI,wBAAwB,OAAO,OAAO,QAAQ,YAAY;EAC/D"}

package/dist/components/Select/types.cjs

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

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

@@ -0,0 +1,43 @@
+
+import { InputSize } from "../../types/dist/index.cjs";
+import { AnchoredRect } from "../internal/Overlay/types.cjs";
+import { RefObject } from "react";
+import { View } from "react-native";
+
+//#region src/components/Select/types.d.ts
+type SelectContentSize = 'default';
+type SelectContentVariant = 'default';
+type SelectItemSize = 'default';
+type SelectItemVariant = 'default';
+interface SelectFieldContextValue {
+  size: InputSize;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  hasError?: boolean;
+  width: number | `${number}%` | '100%';
+  reduceMotion?: boolean;
+  placeholder?: string;
+  uid: string;
+}
+interface SelectContextValue {
+  value: string;
+  setValue: (value: string) => void;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  triggerRef: RefObject<View | null>;
+  triggerRect: AnchoredRect | null;
+  setTriggerRect: (rect: AnchoredRect | null) => void;
+  registerItem: (value: string, label: string) => void;
+  unregisterItem: (value: string) => void;
+  getItemLabel: (value: string) => string | undefined;
+  highlightedValue: string | null;
+  setHighlightedValue: (value: string | null) => void;
+  field: SelectFieldContextValue;
+  reduceMotion: boolean;
+}
+type SelectItemInteractionState = 'rest' | 'pressed' | 'focused';
+type SelectItemLayer = 'root' | 'text' | 'endIcon';
+//#endregion
+export { SelectContentSize, SelectContentVariant, SelectContextValue, SelectFieldContextValue, SelectItemInteractionState, SelectItemLayer, SelectItemSize, SelectItemVariant };
+//# sourceMappingURL=types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.cts","names":[],"sources":["../../../src/components/Select/types.ts"],"mappings":";;;;;;;KAMY,iBAAA;AAAA,KACA,oBAAA;AAAA,KACA,cAAA;AAAA,KACA,iBAAA;AAAA,UAEK,uBAAA;EACf,IAAA,EAAM,SAAA;EACN,QAAA;EACA,QAAA;EACA,QAAA;EACA,QAAA;EACA,KAAA;EACA,YAAA;EACA,WAAA;EACA,GAAA;AAAA;AAAA,UAGe,kBAAA;EACf,KAAA;EACA,QAAA,GAAW,KAAA;EACX,IAAA;EACA,OAAA,GAAU,IAAA;EACV,UAAA,EAAY,SAAA,CAAU,IAAA;EACtB,WAAA,EAAa,YAAA;EACb,cAAA,GAAiB,IAAA,EAAM,YAAA;EACvB,YAAA,GAAe,KAAA,UAAe,KAAA;EAC9B,cAAA,GAAiB,KAAA;EACjB,YAAA,GAAe,KAAA;EACf,gBAAA;EACA,mBAAA,GAAsB,KAAA;EACtB,KAAA,EAAO,uBAAA;EACP,YAAA;AAAA;AAAA,KAGU,0BAAA;AAAA,KAEA,eAAA"}

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

@@ -0,0 +1,43 @@
+
+import { InputSize } from "../../types/dist/index.js";
+import { AnchoredRect } from "../internal/Overlay/types.js";
+import { RefObject } from "react";
+import { View } from "react-native";
+
+//#region src/components/Select/types.d.ts
+type SelectContentSize = 'default';
+type SelectContentVariant = 'default';
+type SelectItemSize = 'default';
+type SelectItemVariant = 'default';
+interface SelectFieldContextValue {
+  size: InputSize;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  hasError?: boolean;
+  width: number | `${number}%` | '100%';
+  reduceMotion?: boolean;
+  placeholder?: string;
+  uid: string;
+}
+interface SelectContextValue {
+  value: string;
+  setValue: (value: string) => void;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  triggerRef: RefObject<View | null>;
+  triggerRect: AnchoredRect | null;
+  setTriggerRect: (rect: AnchoredRect | null) => void;
+  registerItem: (value: string, label: string) => void;
+  unregisterItem: (value: string) => void;
+  getItemLabel: (value: string) => string | undefined;
+  highlightedValue: string | null;
+  setHighlightedValue: (value: string | null) => void;
+  field: SelectFieldContextValue;
+  reduceMotion: boolean;
+}
+type SelectItemInteractionState = 'rest' | 'pressed' | 'focused';
+type SelectItemLayer = 'root' | 'text' | 'endIcon';
+//#endregion
+export { SelectContentSize, SelectContentVariant, SelectContextValue, SelectFieldContextValue, SelectItemInteractionState, SelectItemLayer, SelectItemSize, SelectItemVariant };
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/components/Select/types.ts"],"mappings":";;;;;;;KAMY,iBAAA;AAAA,KACA,oBAAA;AAAA,KACA,cAAA;AAAA,KACA,iBAAA;AAAA,UAEK,uBAAA;EACf,IAAA,EAAM,SAAA;EACN,QAAA;EACA,QAAA;EACA,QAAA;EACA,QAAA;EACA,KAAA;EACA,YAAA;EACA,WAAA;EACA,GAAA;AAAA;AAAA,UAGe,kBAAA;EACf,KAAA;EACA,QAAA,GAAW,KAAA;EACX,IAAA;EACA,OAAA,GAAU,IAAA;EACV,UAAA,EAAY,SAAA,CAAU,IAAA;EACtB,WAAA,EAAa,YAAA;EACb,cAAA,GAAiB,IAAA,EAAM,YAAA;EACvB,YAAA,GAAe,KAAA,UAAe,KAAA;EAC9B,cAAA,GAAiB,KAAA;EACjB,YAAA,GAAe,KAAA;EACf,gBAAA;EACA,mBAAA,GAAsB,KAAA;EACtB,KAAA,EAAO,uBAAA;EACP,YAAA;AAAA;AAAA,KAGU,0BAAA;AAAA,KAEA,eAAA"}

package/dist/components/Select/types.js

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

package/dist/components/Switch.cjs

@@ -55,6 +55,8 @@ const Switch = (0, react.memo)(function Switch({ isOn: isOnProp, defaultIsOn = f
 	const [internalIsOn, setInternalIsOn] = (0, react.useState)(defaultIsOn);
 	const [prefersReducedMotion, setPrefersReducedMotion] = (0, react.useState)(false);
 	const isOn = isControlled ? isOnProp : internalIsOn;
+	const activeVariant = isOn ? "on" : "off";
+	const { theme } = (0, react_native_unistyles.useUnistyles)();
 	(0, react.useEffect)(() => {
 		const checkReducedMotion = async () => {
 			setPrefersReducedMotion(await react_native.AccessibilityInfo.isReduceMotionEnabled());
@@ -77,11 +79,21 @@ const Switch = (0, react.memo)(function Switch({ isOn: isOnProp, defaultIsOn = f
 		isControlled,
 		onChange
 	]);
-	generated_styles.switchStyles.useVariants({
+	const resolvedSwitchStyles = generated_styles.switchStyles.useVariants({
 		size,
-		variant: isOn ? "on" : "off"
-	});
-	const trackBackgroundColor = (0, react_native_unistyles_reanimated.useAnimatedVariantColor)(generated_styles.switchStyles.switch, "backgroundColor");
+		variant: activeVariant
+	}) ?? generated_styles.switchStyles;
+	const variantLayerStyles = (0, react.useMemo)(() => {
+		const components = theme.components;
+		const getLayerStyle = (layer) => components[`switch/variant/default/active/${activeVariant}/${layer}/rest`];
+		return {
+			handle: getLayerStyle("handle"),
+			handleIcon: getLayerStyle("handleIcon"),
+			switch: getLayerStyle("switch"),
+			text: getLayerStyle("rootText")
+		};
+	}, [activeVariant, theme]);
+	const trackBackgroundColor = (0, react_native_unistyles_reanimated.useAnimatedVariantColor)(resolvedSwitchStyles.switch, "backgroundColor");
 	const animatedTrackStyle = (0, react_native_reanimated.useAnimatedStyle)(() => {
 		"worklet";
 		return { backgroundColor: (0, react_native_reanimated.withTiming)(trackBackgroundColor.value, { duration: animationDuration }) };
@@ -90,17 +102,27 @@ const Switch = (0, react.memo)(function Switch({ isOn: isOnProp, defaultIsOn = f
 		"worklet";
 		return { transform: [{ translateX: progress.value * travelDistance }] };
 	});
-	const rootStyle = (0, react.useMemo)(() => [generated_styles.switchStyles.root, switchStaticStyles.root({ disabled })], [generated_styles.switchStyles.root, disabled]);
+	const rootStyle = (0, react.useMemo)(() => [resolvedSwitchStyles.root, switchStaticStyles.root({ disabled })], [resolvedSwitchStyles.root, disabled]);
 	const trackStyle = (0, react.useMemo)(() => [
-		generated_styles.switchStyles.switch,
+		resolvedSwitchStyles.switch,
 		switchStaticStyles.track,
+		variantLayerStyles.switch,
+		react_native.Platform.OS !== "web" && animatedTrackStyle
+	], [
+		resolvedSwitchStyles.switch,
+		variantLayerStyles.switch,
 		animatedTrackStyle
-	], [generated_styles.switchStyles.switch, animatedTrackStyle]);
+	]);
 	const handleStyle = (0, react.useMemo)(() => [
-		generated_styles.switchStyles.handle,
+		resolvedSwitchStyles.handle,
 		switchStaticStyles.handle,
+		variantLayerStyles.handle,
 		animatedHandleStyle
-	], [generated_styles.switchStyles.handle, animatedHandleStyle]);
+	], [
+		resolvedSwitchStyles.handle,
+		variantLayerStyles.handle,
+		animatedHandleStyle
+	]);
 	const accessibilityLabel = typeof label === "string" ? label : void 0;
 	const resolvedAccessibilityHint = accessibilityHint ?? "Double tap to toggle";
 	const labelContent = label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_FormLabel.FormLabel, {
@@ -109,7 +131,7 @@ const Switch = (0, react.memo)(function Switch({ isOn: isOnProp, defaultIsOn = f
 		label,
 		required,
 		showRequiredAsterisk: required,
-		style: generated_styles.switchStyles.text
+		style: [resolvedSwitchStyles.text, variantLayerStyles.text]
 	});
 	const a11yValue = (0, react.useMemo)(() => ({ text: isOn ? "On" : "Off" }), [isOn]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.Pressable, {
@@ -139,14 +161,14 @@ const Switch = (0, react.memo)(function Switch({ isOn: isOnProp, defaultIsOn = f
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
 							icon: onIcon,
 							variant: "fill",
-							style: generated_styles.switchStyles.handleIcon
+							style: [resolvedSwitchStyles.handleIcon, variantLayerStyles.handleIcon]
 						})
 					}), offIcon && !isOn && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
 						style: switchStaticStyles.iconContainer,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
 							icon: offIcon,
 							variant: "fill",
-							style: generated_styles.switchStyles.handleIcon
+							style: [resolvedSwitchStyles.handleIcon, variantLayerStyles.handleIcon]
 						})
 					})]
 				})

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.cts","names":[],"sources":["../../src/components/Switch.tsx"],"mappings":";;;;;;;;UAcU,WAAA,SAAoB,IAAA,CAAK,SAAA,YAAqB,oBAAA,CAAqB,YAAA;;EAE3E,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,QAAA,IAAY,KAAA;;EAEZ,QAAA;EAN2E;EAQ3E,QAAA;EANM;EAQN,iBAAA,GAAoB,kBAAA;AAAA;;;;;;;;;;;;;;;;;;;AAAkB;;;;;;;;;;;;;;;cA2ClC,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}
+{"version":3,"file":"Switch.d.cts","names":[],"sources":["../../src/components/Switch.tsx"],"mappings":";;;;;;;;UAsBU,WAAA,SAAoB,IAAA,CAAK,SAAA,YAAqB,oBAAA,CAAqB,YAAA;;EAE3E,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,QAAA,IAAY,KAAA;;EAEZ,QAAA;EAN2E;EAQ3E,QAAA;EANM;EAQN,iBAAA,GAAoB,kBAAA;AAAA;;;;;;;;;;;;;;;;;;;AAAkB;;;;;;;;;;;;;;;cA2ClC,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","names":[],"sources":["../../src/components/Switch.tsx"],"mappings":";;;;;;;;UAcU,WAAA,SAAoB,IAAA,CAAK,SAAA,YAAqB,oBAAA,CAAqB,YAAA;;EAE3E,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,QAAA,IAAY,KAAA;;EAEZ,QAAA;EAN2E;EAQ3E,QAAA;EANM;EAQN,iBAAA,GAAoB,kBAAA;AAAA;;;;;;;;;;;;;;;;;;;AAAkB;;;;;;;;;;;;;;;cA2ClC,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}
+{"version":3,"file":"Switch.d.ts","names":[],"sources":["../../src/components/Switch.tsx"],"mappings":";;;;;;;;UAsBU,WAAA,SAAoB,IAAA,CAAK,SAAA,YAAqB,oBAAA,CAAqB,YAAA;;EAE3E,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,QAAA,IAAY,KAAA;;EAEZ,QAAA;EAN2E;EAQ3E,QAAA;EANM;EAQN,iBAAA,GAAoB,kBAAA;AAAA;;;;;;;;;;;;;;;;;;;AAAkB;;;;;;;;;;;;;;;cA2ClC,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}

package/dist/components/Switch.js

@@ -2,10 +2,10 @@
 import { IconSlot } from "./IconSlot.js";
 import { FormLabel } from "./FormLabel.js";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
-import { AccessibilityInfo, Pressable } from "react-native";
+import { AccessibilityInfo, Platform, Pressable } from "react-native";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { switchStyles } from "../../generated/styles";
-import { StyleSheet as StyleSheet$1 } from "react-native-unistyles";
+import { StyleSheet as StyleSheet$1, useUnistyles } from "react-native-unistyles";
 import Animated, { useAnimatedStyle, useDerivedValue, withTiming } from "react-native-reanimated";
 import { useAnimatedVariantColor } from "react-native-unistyles/reanimated";
 //#region src/components/Switch.tsx
@@ -52,6 +52,8 @@ const Switch = memo(function Switch({ isOn: isOnProp, defaultIsOn = false, onCha
 	const [internalIsOn, setInternalIsOn] = useState(defaultIsOn);
 	const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
 	const isOn = isControlled ? isOnProp : internalIsOn;
+	const activeVariant = isOn ? "on" : "off";
+	const { theme } = useUnistyles();
 	useEffect(() => {
 		const checkReducedMotion = async () => {
 			setPrefersReducedMotion(await AccessibilityInfo.isReduceMotionEnabled());
@@ -74,11 +76,21 @@ const Switch = memo(function Switch({ isOn: isOnProp, defaultIsOn = false, onCha
 		isControlled,
 		onChange
 	]);
-	switchStyles.useVariants({
+	const resolvedSwitchStyles = switchStyles.useVariants({
 		size,
-		variant: isOn ? "on" : "off"
-	});
-	const trackBackgroundColor = useAnimatedVariantColor(switchStyles.switch, "backgroundColor");
+		variant: activeVariant
+	}) ?? switchStyles;
+	const variantLayerStyles = useMemo(() => {
+		const components = theme.components;
+		const getLayerStyle = (layer) => components[`switch/variant/default/active/${activeVariant}/${layer}/rest`];
+		return {
+			handle: getLayerStyle("handle"),
+			handleIcon: getLayerStyle("handleIcon"),
+			switch: getLayerStyle("switch"),
+			text: getLayerStyle("rootText")
+		};
+	}, [activeVariant, theme]);
+	const trackBackgroundColor = useAnimatedVariantColor(resolvedSwitchStyles.switch, "backgroundColor");
 	const animatedTrackStyle = useAnimatedStyle(() => {
 		"worklet";
 		return { backgroundColor: withTiming(trackBackgroundColor.value, { duration: animationDuration }) };
@@ -87,17 +99,27 @@ const Switch = memo(function Switch({ isOn: isOnProp, defaultIsOn = false, onCha
 		"worklet";
 		return { transform: [{ translateX: progress.value * travelDistance }] };
 	});
-	const rootStyle = useMemo(() => [switchStyles.root, switchStaticStyles.root({ disabled })], [switchStyles.root, disabled]);
+	const rootStyle = useMemo(() => [resolvedSwitchStyles.root, switchStaticStyles.root({ disabled })], [resolvedSwitchStyles.root, disabled]);
 	const trackStyle = useMemo(() => [
-		switchStyles.switch,
+		resolvedSwitchStyles.switch,
 		switchStaticStyles.track,
+		variantLayerStyles.switch,
+		Platform.OS !== "web" && animatedTrackStyle
+	], [
+		resolvedSwitchStyles.switch,
+		variantLayerStyles.switch,
 		animatedTrackStyle
-	], [switchStyles.switch, animatedTrackStyle]);
+	]);
 	const handleStyle = useMemo(() => [
-		switchStyles.handle,
+		resolvedSwitchStyles.handle,
 		switchStaticStyles.handle,
+		variantLayerStyles.handle,
 		animatedHandleStyle
-	], [switchStyles.handle, animatedHandleStyle]);
+	], [
+		resolvedSwitchStyles.handle,
+		variantLayerStyles.handle,
+		animatedHandleStyle
+	]);
 	const accessibilityLabel = typeof label === "string" ? label : void 0;
 	const resolvedAccessibilityHint = accessibilityHint ?? "Double tap to toggle";
 	const labelContent = label && /* @__PURE__ */ jsx(FormLabel, {
@@ -106,7 +128,7 @@ const Switch = memo(function Switch({ isOn: isOnProp, defaultIsOn = false, onCha
 		label,
 		required,
 		showRequiredAsterisk: required,
-		style: switchStyles.text
+		style: [resolvedSwitchStyles.text, variantLayerStyles.text]
 	});
 	const a11yValue = useMemo(() => ({ text: isOn ? "On" : "Off" }), [isOn]);
 	return /* @__PURE__ */ jsxs(Pressable, {
@@ -136,14 +158,14 @@ const Switch = memo(function Switch({ isOn: isOnProp, defaultIsOn = false, onCha
 						children: /* @__PURE__ */ jsx(IconSlot, {
 							icon: onIcon,
 							variant: "fill",
-							style: switchStyles.handleIcon
+							style: [resolvedSwitchStyles.handleIcon, variantLayerStyles.handleIcon]
 						})
 					}), offIcon && !isOn && /* @__PURE__ */ jsx(Animated.View, {
 						style: switchStaticStyles.iconContainer,
 						children: /* @__PURE__ */ jsx(IconSlot, {
 							icon: offIcon,
 							variant: "fill",
-							style: switchStyles.handleIcon
+							style: [resolvedSwitchStyles.handleIcon, variantLayerStyles.handleIcon]
 						})
 					})]
 				})