@yahoo/uds 3.157.1 → 3.158.0

package/dist/components/client/Select/SelectTrigger.cjs

@@ -0,0 +1,138 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_styles_styler = require("../../../styles/styler.cjs");
+const require_components_IconSlot = require("../../IconSlot.cjs");
+const require_components_Box = require("../../Box.cjs");
+const require_components_HStack = require("../../HStack.cjs");
+const require_components_client_Select_selectContext = require("./selectContext.cjs");
+const require_components_client_Select_selectFieldStyles = require("./selectFieldStyles.cjs");
+const require_components_client_Select_SelectValue = require("./SelectValue.cjs");
+let _yahoo_uds_icons = require("@yahoo/uds-icons");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _ariakit_react = require("@ariakit/react");
+let motion_react = require("motion/react");
+//#region src/components/client/Select/SelectTrigger.tsx
+const StartIcon = (0, react.memo)(function StartIcon({ icon, className, iconProps }) {
+	if (!icon) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+		icon,
+		className,
+		iconProps: {
+			variant: "outline",
+			...iconProps
+		}
+	});
+});
+StartIcon.displayName = "StartIcon";
+const EndIcon = (0, react.memo)(function EndIcon({ icon, className, iconProps }) {
+	if (!icon) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+		icon,
+		className,
+		iconProps: {
+			variant: "outline",
+			...iconProps
+		}
+	});
+});
+EndIcon.displayName = "EndIcon";
+const SelectTrigger = (0, react.forwardRef)(function SelectTrigger({ placeholder, startIcon, endIcon, slotProps, className, disabled: disabledProp, name, onClick: triggerPassthroughOnClick, onPointerDown: triggerPassthroughOnPointerDown, ...triggerPassthroughProps }, ref) {
+	const { size, disabled, readOnly, required, hasError, uid, helpTextId, reduceMotion, triggerWrapperRef } = require_components_client_Select_selectContext.useSelectFieldContext();
+	const select = (0, _ariakit_react.useSelectContext)();
+	const value = (0, _ariakit_react.useStoreState)(select, "value");
+	const open = (0, _ariakit_react.useStoreState)(select, "open");
+	const useAnimatedChevron = endIcon === void 0;
+	const hasValue = value != null && value !== "";
+	const isDisabled = disabledProp ?? disabled;
+	const { className: triggerWrapperClassName, ...triggerWrapperProps } = slotProps?.triggerWrapper ?? {};
+	const { className: triggerClassName, onClick, ...triggerProps } = slotProps?.trigger ?? {};
+	const handlePointerDown = (event) => {
+		if (readOnly) {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		triggerPassthroughOnPointerDown?.(event);
+	};
+	const handleClick = (event) => {
+		if (readOnly) {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		triggerPassthroughOnClick?.(event);
+		onClick?.(event);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+		ref: triggerWrapperRef,
+		position: "relative",
+		display: "flex",
+		alignItems: "center",
+		width: "full",
+		...triggerWrapperProps,
+		className: require_components_client_Select_selectFieldStyles.getSelectTriggerWrapperClassName(size, hasValue, triggerWrapperClassName),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ariakit_react.Select, {
+			ref,
+			id: uid,
+			name,
+			disabled: isDisabled,
+			required,
+			"aria-describedby": helpTextId,
+			"aria-invalid": hasError,
+			"aria-readonly": readOnly || void 0,
+			...triggerPassthroughProps,
+			...triggerProps,
+			onPointerDown: handlePointerDown,
+			onClick: handleClick,
+			className: require_styles_styler.cx("flex", "w-full", "min-w-0", "items-center", "border-0", "bg-transparent", "rounded-[inherit]", "outline-none", "shadow-none", "uds-hit-target", isDisabled ? "cursor-not-allowed" : "cursor-pointer"),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StartIcon, {
+					icon: startIcon,
+					className: require_components_client_Select_selectFieldStyles.getSelectStartIconClassName(size, hasValue),
+					iconProps: slotProps?.startIcon
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: require_components_client_Select_selectFieldStyles.getSelectTriggerClassName({
+						size,
+						hasValue,
+						disabled: isDisabled,
+						className: require_styles_styler.cx("flex", "min-w-0", "items-center", "self-stretch", className, triggerClassName)
+					}),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "w-full truncate text-left",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Select_SelectValue.SelectValue, { fallback: placeholder })
+					})
+				}),
+				(useAnimatedChevron || endIcon) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_HStack.HStack, {
+					alignItems: "center",
+					gap: "1",
+					className: "shrink-0",
+					children: useAnimatedChevron ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.div, {
+						animate: { rotate: open ? 180 : 0 },
+						transition: reduceMotion ? { duration: 0 } : {
+							duration: .2,
+							ease: "easeInOut"
+						},
+						"data-testid": "select-chevron",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndIcon, {
+							icon: _yahoo_uds_icons.ChevronDown,
+							className: require_components_client_Select_selectFieldStyles.getSelectEndIconClassName(size, hasValue),
+							iconProps: slotProps?.endIcon
+						})
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndIcon, {
+						icon: endIcon,
+						className: require_components_client_Select_selectFieldStyles.getSelectEndIconClassName(size, hasValue),
+						iconProps: slotProps?.endIcon
+					})
+				})
+			]
+		})
+	});
+});
+SelectTrigger.displayName = "SelectTrigger";
+//#endregion
+exports.SelectTrigger = SelectTrigger;

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

@@ -0,0 +1,27 @@
+
+import { UniversalIconSlot } from "../../../types/dist/index.cjs";
+import { IconPropsWithSVGProps } from "../../../tokens/types.cjs";
+import { BoxProps } from "../../Box.cjs";
+import * as _$react from "react";
+
+//#region src/components/client/Select/SelectTrigger.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+type NativeSelectTriggerProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size' | 'value' | 'defaultValue' | 'onChange' | 'name' | 'color' | 'children'>;
+interface SelectTriggerProps extends NativeSelectTriggerProps {
+  placeholder?: string;
+  /** Native form field name. Renders a hidden `<select>` for form submission. */
+  name?: string;
+  startIcon?: UniversalIconSlot;
+  endIcon?: UniversalIconSlot;
+  slotProps?: {
+    trigger?: Partial<React.ButtonHTMLAttributes<HTMLButtonElement> & DataAttributes>;
+    triggerWrapper?: Partial<BoxProps & DataAttributes>;
+    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+  };
+}
+declare const SelectTrigger: _$react.ForwardRefExoticComponent<SelectTriggerProps & _$react.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { SelectTrigger, type SelectTriggerProps };

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

@@ -0,0 +1,28 @@
+
+"use client";
+import { UniversalIconSlot } from "../../../types/dist/index.js";
+import { IconPropsWithSVGProps } from "../../../tokens/types.js";
+import { BoxProps } from "../../Box.js";
+import * as _$react from "react";
+
+//#region src/components/client/Select/SelectTrigger.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+type NativeSelectTriggerProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size' | 'value' | 'defaultValue' | 'onChange' | 'name' | 'color' | 'children'>;
+interface SelectTriggerProps extends NativeSelectTriggerProps {
+  placeholder?: string;
+  /** Native form field name. Renders a hidden `<select>` for form submission. */
+  name?: string;
+  startIcon?: UniversalIconSlot;
+  endIcon?: UniversalIconSlot;
+  slotProps?: {
+    trigger?: Partial<React.ButtonHTMLAttributes<HTMLButtonElement> & DataAttributes>;
+    triggerWrapper?: Partial<BoxProps & DataAttributes>;
+    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+  };
+}
+declare const SelectTrigger: _$react.ForwardRefExoticComponent<SelectTriggerProps & _$react.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { SelectTrigger, type SelectTriggerProps };

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

@@ -0,0 +1,136 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+"use client";
+import { cx } from "../../../styles/styler.js";
+import { IconSlot } from "../../IconSlot.js";
+import { Box } from "../../Box.js";
+import { HStack } from "../../HStack.js";
+import { useSelectFieldContext } from "./selectContext.js";
+import { getSelectEndIconClassName, getSelectStartIconClassName, getSelectTriggerClassName, getSelectTriggerWrapperClassName } from "./selectFieldStyles.js";
+import { SelectValue as SelectValue$1 } from "./SelectValue.js";
+import { ChevronDown } from "@yahoo/uds-icons";
+import { forwardRef, memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select, useSelectContext, useStoreState } from "@ariakit/react";
+import { m } from "motion/react";
+//#region src/components/client/Select/SelectTrigger.tsx
+const StartIcon = memo(function StartIcon({ icon, className, iconProps }) {
+	if (!icon) return null;
+	return /* @__PURE__ */ jsx(IconSlot, {
+		icon,
+		className,
+		iconProps: {
+			variant: "outline",
+			...iconProps
+		}
+	});
+});
+StartIcon.displayName = "StartIcon";
+const EndIcon = memo(function EndIcon({ icon, className, iconProps }) {
+	if (!icon) return null;
+	return /* @__PURE__ */ jsx(IconSlot, {
+		icon,
+		className,
+		iconProps: {
+			variant: "outline",
+			...iconProps
+		}
+	});
+});
+EndIcon.displayName = "EndIcon";
+const SelectTrigger = forwardRef(function SelectTrigger({ placeholder, startIcon, endIcon, slotProps, className, disabled: disabledProp, name, onClick: triggerPassthroughOnClick, onPointerDown: triggerPassthroughOnPointerDown, ...triggerPassthroughProps }, ref) {
+	const { size, disabled, readOnly, required, hasError, uid, helpTextId, reduceMotion, triggerWrapperRef } = useSelectFieldContext();
+	const select = useSelectContext();
+	const value = useStoreState(select, "value");
+	const open = useStoreState(select, "open");
+	const useAnimatedChevron = endIcon === void 0;
+	const hasValue = value != null && value !== "";
+	const isDisabled = disabledProp ?? disabled;
+	const { className: triggerWrapperClassName, ...triggerWrapperProps } = slotProps?.triggerWrapper ?? {};
+	const { className: triggerClassName, onClick, ...triggerProps } = slotProps?.trigger ?? {};
+	const handlePointerDown = (event) => {
+		if (readOnly) {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		triggerPassthroughOnPointerDown?.(event);
+	};
+	const handleClick = (event) => {
+		if (readOnly) {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		triggerPassthroughOnClick?.(event);
+		onClick?.(event);
+	};
+	return /* @__PURE__ */ jsx(Box, {
+		ref: triggerWrapperRef,
+		position: "relative",
+		display: "flex",
+		alignItems: "center",
+		width: "full",
+		...triggerWrapperProps,
+		className: getSelectTriggerWrapperClassName(size, hasValue, triggerWrapperClassName),
+		children: /* @__PURE__ */ jsxs(Select, {
+			ref,
+			id: uid,
+			name,
+			disabled: isDisabled,
+			required,
+			"aria-describedby": helpTextId,
+			"aria-invalid": hasError,
+			"aria-readonly": readOnly || void 0,
+			...triggerPassthroughProps,
+			...triggerProps,
+			onPointerDown: handlePointerDown,
+			onClick: handleClick,
+			className: cx("flex", "w-full", "min-w-0", "items-center", "border-0", "bg-transparent", "rounded-[inherit]", "outline-none", "shadow-none", "uds-hit-target", isDisabled ? "cursor-not-allowed" : "cursor-pointer"),
+			children: [
+				/* @__PURE__ */ jsx(StartIcon, {
+					icon: startIcon,
+					className: getSelectStartIconClassName(size, hasValue),
+					iconProps: slotProps?.startIcon
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: getSelectTriggerClassName({
+						size,
+						hasValue,
+						disabled: isDisabled,
+						className: cx("flex", "min-w-0", "items-center", "self-stretch", className, triggerClassName)
+					}),
+					children: /* @__PURE__ */ jsx("span", {
+						className: "w-full truncate text-left",
+						children: /* @__PURE__ */ jsx(SelectValue$1, { fallback: placeholder })
+					})
+				}),
+				(useAnimatedChevron || endIcon) && /* @__PURE__ */ jsx(HStack, {
+					alignItems: "center",
+					gap: "1",
+					className: "shrink-0",
+					children: useAnimatedChevron ? /* @__PURE__ */ jsx(m.div, {
+						animate: { rotate: open ? 180 : 0 },
+						transition: reduceMotion ? { duration: 0 } : {
+							duration: .2,
+							ease: "easeInOut"
+						},
+						"data-testid": "select-chevron",
+						children: /* @__PURE__ */ jsx(EndIcon, {
+							icon: ChevronDown,
+							className: getSelectEndIconClassName(size, hasValue),
+							iconProps: slotProps?.endIcon
+						})
+					}) : /* @__PURE__ */ jsx(EndIcon, {
+						icon: endIcon,
+						className: getSelectEndIconClassName(size, hasValue),
+						iconProps: slotProps?.endIcon
+					})
+				})
+			]
+		})
+	});
+});
+SelectTrigger.displayName = "SelectTrigger";
+//#endregion
+export { SelectTrigger };

package/dist/components/client/Select/SelectValue.cjs

@@ -0,0 +1,28 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../_virtual/_rolldown/runtime.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _ariakit_react = require("@ariakit/react");
+//#region src/components/client/Select/SelectValue.tsx
+function normalizeSelectValue(value) {
+	if (typeof value === "string") return value;
+	return value.join(", ");
+}
+function SelectValue({ fallback, children, ...props }) {
+	const select = (0, _ariakit_react.useSelectContext)();
+	const storeValue = (0, _ariakit_react.useStoreState)(select, "value");
+	const items = (0, _ariakit_react.useStoreState)(select, "items");
+	const hasValue = storeValue != null && storeValue !== "";
+	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.SelectValue, {
+		fallback,
+		...props,
+		children: (value) => children(normalizeSelectValue(value))
+	});
+	if (!hasValue) return fallback ?? null;
+	return (items?.find((item) => item.value === storeValue))?.element?.textContent ?? storeValue;
+}
+SelectValue.displayName = "SelectValue";
+//#endregion
+exports.SelectValue = SelectValue;

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

@@ -0,0 +1,19 @@
+
+import { ReactNode } from "react";
+import { SelectValueProps } from "@ariakit/react";
+
+//#region src/components/client/Select/SelectValue.d.ts
+interface SelectValueProps$1 extends Omit<SelectValueProps, 'children'> {
+  fallback?: string;
+  children?: (value: string) => ReactNode;
+}
+declare function SelectValue({
+  fallback,
+  children,
+  ...props
+}: SelectValueProps$1): ReactNode;
+declare namespace SelectValue {
+  var displayName: string;
+}
+//#endregion
+export { SelectValue };

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

@@ -0,0 +1,20 @@
+
+"use client";
+import { ReactNode } from "react";
+import { SelectValueProps } from "@ariakit/react";
+
+//#region src/components/client/Select/SelectValue.d.ts
+interface SelectValueProps$1 extends Omit<SelectValueProps, 'children'> {
+  fallback?: string;
+  children?: (value: string) => ReactNode;
+}
+declare function SelectValue({
+  fallback,
+  children,
+  ...props
+}: SelectValueProps$1): ReactNode;
+declare namespace SelectValue {
+  var displayName: string;
+}
+//#endregion
+export { SelectValue };

package/dist/components/client/Select/SelectValue.js

@@ -0,0 +1,26 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { SelectValue as SelectValue$1, useSelectContext, useStoreState } from "@ariakit/react";
+//#region src/components/client/Select/SelectValue.tsx
+function normalizeSelectValue(value) {
+	if (typeof value === "string") return value;
+	return value.join(", ");
+}
+function SelectValue({ fallback, children, ...props }) {
+	const select = useSelectContext();
+	const storeValue = useStoreState(select, "value");
+	const items = useStoreState(select, "items");
+	const hasValue = storeValue != null && storeValue !== "";
+	if (children) return /* @__PURE__ */ jsx(SelectValue$1, {
+		fallback,
+		...props,
+		children: (value) => children(normalizeSelectValue(value))
+	});
+	if (!hasValue) return fallback ?? null;
+	return (items?.find((item) => item.value === storeValue))?.element?.textContent ?? storeValue;
+}
+SelectValue.displayName = "SelectValue";
+//#endregion
+export { SelectValue };

package/dist/components/client/Select/index.cjs

@@ -0,0 +1,11 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_components_client_Select_Select = require("./Select.cjs");
+const require_components_client_Select_SelectContent = require("./SelectContent.cjs");
+const require_components_client_Select_SelectDivider = require("./SelectDivider.cjs");
+const require_components_client_Select_SelectItem = require("./SelectItem.cjs");
+exports.Select = require_components_client_Select_Select.Select;
+exports.SelectContent = require_components_client_Select_SelectContent.SelectContent;
+exports.SelectDivider = require_components_client_Select_SelectDivider.SelectDivider;
+exports.SelectItem = require_components_client_Select_SelectItem.SelectItem;

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

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

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

@@ -0,0 +1,7 @@
+
+"use client";
+import { Select, SelectProps } from "./Select.js";
+import { SelectContent, SelectContentProps } from "./SelectContent.js";
+import { SelectDivider, SelectDividerProps } from "./SelectDivider.js";
+import { SelectItem, SelectItemProps } from "./SelectItem.js";
+export { Select, SelectContent, SelectContentProps, SelectDivider, SelectDividerProps, SelectItem, SelectItemProps, SelectProps };

package/dist/components/client/Select/index.js

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

package/dist/components/client/Select/selectContext.cjs

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

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

@@ -0,0 +1,23 @@
+
+import { SelectSize, UniversalBoxProps } from "../../../types/dist/index.cjs";
+import * as _$react from "react";
+import { RefObject } from "react";
+
+//#region src/components/client/Select/selectContext.d.ts
+type SelectFieldContextValue = {
+  size: SelectSize;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  hasError?: boolean;
+  width?: UniversalBoxProps['width'];
+  reduceMotion?: boolean;
+  uid: string;
+  helpTextId?: string; /** Outer field wrapper; used to anchor SelectContent width and gutter. */
+  triggerWrapperRef: RefObject<HTMLDivElement | null>;
+};
+declare const SelectFieldContext: _$react.Context<SelectFieldContextValue | null>;
+declare function useSelectFieldContext(): SelectFieldContextValue;
+declare function useOptionalSelectFieldContext(): SelectFieldContextValue | null;
+//#endregion
+export { SelectFieldContext, type SelectFieldContextValue, useOptionalSelectFieldContext, useSelectFieldContext };

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

@@ -0,0 +1,24 @@
+
+"use client";
+import { SelectSize, UniversalBoxProps } from "../../../types/dist/index.js";
+import * as _$react from "react";
+import { RefObject } from "react";
+
+//#region src/components/client/Select/selectContext.d.ts
+type SelectFieldContextValue = {
+  size: SelectSize;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  hasError?: boolean;
+  width?: UniversalBoxProps['width'];
+  reduceMotion?: boolean;
+  uid: string;
+  helpTextId?: string; /** Outer field wrapper; used to anchor SelectContent width and gutter. */
+  triggerWrapperRef: RefObject<HTMLDivElement | null>;
+};
+declare const SelectFieldContext: _$react.Context<SelectFieldContextValue | null>;
+declare function useSelectFieldContext(): SelectFieldContextValue;
+declare function useOptionalSelectFieldContext(): SelectFieldContextValue | null;
+//#endregion
+export { SelectFieldContext, type SelectFieldContextValue, useOptionalSelectFieldContext, useSelectFieldContext };

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

@@ -0,0 +1,16 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+"use client";
+import { createContext, useContext } from "react";
+//#region src/components/client/Select/selectContext.tsx
+const SelectFieldContext = createContext(null);
+function useSelectFieldContext() {
+	const context = useContext(SelectFieldContext);
+	if (!context) throw new Error("Select subcomponents must be used within Select");
+	return context;
+}
+function useOptionalSelectFieldContext() {
+	return useContext(SelectFieldContext);
+}
+//#endregion
+export { SelectFieldContext, useOptionalSelectFieldContext, useSelectFieldContext };

package/dist/components/client/Select/selectFieldStyles.cjs

@@ -0,0 +1,85 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_styles_styler = require("../../../styles/styler.cjs");
+//#region src/components/client/Select/selectFieldStyles.ts
+function getSelectRootClassName({ size, hasValue, disabled, className }) {
+	return require_styles_styler.getStyles({
+		inputSizeRoot: size,
+		inputVariantRoot: "default",
+		inputVariantValueRoot: !hasValue ? "empty" : "filled",
+		className: require_styles_styler.cx([className, disabled ? "opacity-50" : ""])
+	});
+}
+function getSelectLabelClassName(size, hasValue) {
+	return require_styles_styler.cx(require_styles_styler.getStyles({
+		inputSizeLabel: size,
+		inputVariantLabel: "default",
+		inputVariantValueLabel: !hasValue ? "empty" : "filled"
+	}));
+}
+function getSelectLabelRequiredClassName(hasValue) {
+	return require_styles_styler.getStyles({
+		inputVariantLabelRequired: "default",
+		inputVariantValueLabelRequired: !hasValue ? "empty" : "filled"
+	});
+}
+/** Marks Select field triggers so Input `focus-within` wrapper rules skip them. */
+const SELECT_FIELD_TRIGGER_CLASS = "uds-select-field-trigger";
+function getSelectTriggerWrapperClassName(size, hasValue, className) {
+	return require_styles_styler.cx(require_styles_styler.getStyles({
+		inputSizeInputWrapperStatic: size,
+		inputSizeInputWrapperDynamic: size,
+		inputVariantInputWrapper: "default",
+		inputVariantValueInputWrapper: !hasValue ? "empty" : "filled"
+	}), "flex", "w-full", "items-center", "min-w-[200px]", "uds-ring-shadow", "uds-ring-within", SELECT_FIELD_TRIGGER_CLASS, className);
+}
+function getSelectTriggerClassName({ size, hasValue, disabled, className }) {
+	return require_styles_styler.getStyles({
+		inputSizeInput: size,
+		inputVariantInput: "default",
+		inputVariantValueInput: !hasValue ? "empty" : "filled",
+		inputVariantInputPlaceholder: "default",
+		inputVariantValueInputPlaceholder: !hasValue ? "empty" : "filled",
+		className: require_styles_styler.cx("grow", "bg-transparent", "bg-clip-text", "text-left", "focus-visible:outline-none", disabled ? "cursor-not-allowed" : "cursor-pointer", !hasValue && "text-muted", className)
+	});
+}
+function getSelectStartIconClassName(size, hasValue) {
+	return require_styles_styler.getStyles({
+		inputSizeStartIcon: size,
+		inputVariantStartIcon: "default",
+		inputVariantValueStartIcon: !hasValue ? "empty" : "filled"
+	});
+}
+function getSelectEndIconClassName(size, hasValue) {
+	return require_styles_styler.getStyles({
+		inputSizeEndIcon: size,
+		inputVariantEndIcon: "default",
+		inputVariantValueEndIcon: !hasValue ? "empty" : "filled"
+	});
+}
+function getSelectHelpTextClassName(size, hasValue) {
+	return require_styles_styler.cx(require_styles_styler.getStyles({
+		inputSizeHelperText: size,
+		inputVariantHelperText: "default",
+		inputVariantValueHelperText: !hasValue ? "empty" : "filled"
+	}));
+}
+function getSelectHelperIconClassName(size, hasValue) {
+	return require_styles_styler.getStyles({
+		inputSizeHelperIcon: size,
+		inputVariantHelperIcon: "default",
+		inputVariantValueHelperIcon: !hasValue ? "empty" : "filled"
+	});
+}
+//#endregion
+exports.SELECT_FIELD_TRIGGER_CLASS = SELECT_FIELD_TRIGGER_CLASS;
+exports.getSelectEndIconClassName = getSelectEndIconClassName;
+exports.getSelectHelpTextClassName = getSelectHelpTextClassName;
+exports.getSelectHelperIconClassName = getSelectHelperIconClassName;
+exports.getSelectLabelClassName = getSelectLabelClassName;
+exports.getSelectLabelRequiredClassName = getSelectLabelRequiredClassName;
+exports.getSelectRootClassName = getSelectRootClassName;
+exports.getSelectStartIconClassName = getSelectStartIconClassName;
+exports.getSelectTriggerClassName = getSelectTriggerClassName;
+exports.getSelectTriggerWrapperClassName = getSelectTriggerWrapperClassName;