@yahoo/uds 3.157.0 → 3.158.0

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

@@ -0,0 +1,73 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+"use client";
+import { cx, getStyles } from "../../../styles/styler.js";
+import { VStack } from "../../VStack.js";
+import { getUnscaledAnchorRect } from "../../../utils/getUnscaledAnchorRect.js";
+import { useSelectFieldContext } from "./selectContext.js";
+import { forwardRef, useCallback, useLayoutEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { SelectPopover, useSelectContext, useStoreState } from "@ariakit/react";
+//#region src/components/client/Select/SelectContent.tsx
+/**
+* **▾ Select content panel**
+*
+* @componentType Client component
+*
+* @description
+* The floating listbox container. Renders Ariakit `SelectPopover` with UDS
+* styling.
+*/
+const SelectContent = forwardRef(function SelectContent({ children, className, size = "default", variant = "default", slotProps, gutter = 4, sameWidth = true, portal = true, unmountOnHide = false, keepOpenOnInteractOutside = false, maxHeight = 240, disableAutoBorderRadius, nestedBorderRadius = !disableAutoBorderRadius, nestedBorderRadiusSize, nestedBorderRadiusSpacing, nestedBorderRadiusWidth, ...props }, ref) {
+	const { className: rootClassName, style: rootStyle, ...rootSlotProps } = slotProps?.root ?? {};
+	const resolvedMaxHeight = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
+	const select = useSelectContext();
+	const { triggerWrapperRef } = useSelectFieldContext();
+	const mounted = useStoreState(select, "mounted");
+	const hasResetActiveItemRef = useRef(false);
+	const getAnchorRect = useCallback((anchor) => {
+		const wrapper = triggerWrapperRef.current;
+		if (wrapper) return getUnscaledAnchorRect(wrapper);
+		return getUnscaledAnchorRect(anchor);
+	}, [triggerWrapperRef]);
+	useLayoutEffect(() => {
+		if (!select) return;
+		if (mounted && !hasResetActiveItemRef.current) {
+			select.setActiveId(null);
+			hasResetActiveItemRef.current = true;
+		}
+		if (!mounted) hasResetActiveItemRef.current = false;
+	}, [mounted, select]);
+	return /* @__PURE__ */ jsx(SelectPopover, {
+		ref,
+		render: /* @__PURE__ */ jsx(VStack, {
+			elevation: "3",
+			overflow: "auto",
+			borderRadius: "md",
+			nestedBorderRadius,
+			nestedBorderRadiusSize,
+			nestedBorderRadiusSpacing,
+			nestedBorderRadiusWidth,
+			...rootSlotProps,
+			style: {
+				maxHeight: resolvedMaxHeight,
+				...rootStyle
+			},
+			className: cx(getStyles({
+				selectcontentSizeRoot: size,
+				selectcontentVariantRoot: variant
+			}), "z-50", "focus:outline-none", className, rootClassName),
+			children
+		}),
+		...props,
+		gutter,
+		sameWidth,
+		getAnchorRect,
+		portal,
+		unmountOnHide,
+		hideOnInteractOutside: !keepOpenOnInteractOutside
+	});
+});
+SelectContent.displayName = "SelectContent";
+//#endregion
+export { SelectContent };

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

@@ -0,0 +1,63 @@
+/*! © 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_Divider_Divider = require("../../Divider/Divider.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/client/Select/SelectDivider.tsx
+/**
+* **▾ Select divider**
+*
+* @componentType Client component
+*
+* @description
+* A divider for separating groups of select options inside `SelectContent`.
+*
+* @example
+* ```tsx
+* 'use client';
+*
+* import { Select, SelectContent, SelectDivider, SelectItem } from '@yahoo/uds';
+*
+* <Select label="Country" placeholder="Select a country" defaultValue="us">
+*   <SelectContent>
+*     <SelectItem value="us">United States</SelectItem>
+*     <SelectItem value="ca">Canada</SelectItem>
+*     <SelectDivider>Other regions</SelectDivider>
+*     <SelectItem value="mx">Mexico</SelectItem>
+*   </SelectContent>
+* </Select>
+* ```
+*
+* @usage
+* Use `SelectDivider` to separate groups of select options.
+*
+* @related [Select](https://uds.build/docs/components/select), [SelectItem](https://uds.build/docs/components/select-item), [Divider](https://uds.build/docs/components/divider)
+*/
+const SelectDivider = (0, react.forwardRef)(function SelectDivider({ "aria-hidden": ariaHidden = true, contentPosition = "start", gap = "4", children, spacingVertical = children ? "2" : "0", spacingHorizontal = children ? "4" : "0", className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Divider_Divider.Divider, {
+		ref,
+		"aria-hidden": ariaHidden,
+		variant: "inherit",
+		contentPosition,
+		gap,
+		spacingVertical,
+		spacingHorizontal,
+		slotProps: {
+			root: { className: require_styles_styler.getStyles({
+				selectitemDividerVariantRoot: "default",
+				className
+			}) },
+			label: { className: require_styles_styler.getStyles({ selectitemDividerVariantText: "default" }) },
+			line: { className: require_styles_styler.getStyles({ selectitemDividerVariantLine: "default" }) }
+		},
+		...props,
+		children
+	});
+});
+SelectDivider.displayName = "SelectDivider";
+//#endregion
+exports.SelectDivider = SelectDivider;

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

@@ -0,0 +1,44 @@
+
+import { DividerProps } from "../../Divider/Divider.cjs";
+import * as _$react from "react";
+
+//#region src/components/client/Select/SelectDivider.d.ts
+interface SelectDividerProps extends Omit<DividerProps, 'variant' | 'role'> {
+  /**
+   * Select content uses `role="listbox"`, which does not allow `role="separator"`
+   * children. Dividers are visual-only and hidden from the accessibility tree.
+   */
+  'aria-hidden'?: boolean;
+}
+/**
+ * **▾ Select divider**
+ *
+ * @componentType Client component
+ *
+ * @description
+ * A divider for separating groups of select options inside `SelectContent`.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ *
+ * import { Select, SelectContent, SelectDivider, SelectItem } from '@yahoo/uds';
+ *
+ * <Select label="Country" placeholder="Select a country" defaultValue="us">
+ *   <SelectContent>
+ *     <SelectItem value="us">United States</SelectItem>
+ *     <SelectItem value="ca">Canada</SelectItem>
+ *     <SelectDivider>Other regions</SelectDivider>
+ *     <SelectItem value="mx">Mexico</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ * ```
+ *
+ * @usage
+ * Use `SelectDivider` to separate groups of select options.
+ *
+ * @related [Select](https://uds.build/docs/components/select), [SelectItem](https://uds.build/docs/components/select-item), [Divider](https://uds.build/docs/components/divider)
+ */
+declare const SelectDivider: _$react.ForwardRefExoticComponent<SelectDividerProps & _$react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { SelectDivider, type SelectDividerProps };

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

@@ -0,0 +1,45 @@
+
+"use client";
+import { DividerProps } from "../../Divider/Divider.js";
+import * as _$react from "react";
+
+//#region src/components/client/Select/SelectDivider.d.ts
+interface SelectDividerProps extends Omit<DividerProps, 'variant' | 'role'> {
+  /**
+   * Select content uses `role="listbox"`, which does not allow `role="separator"`
+   * children. Dividers are visual-only and hidden from the accessibility tree.
+   */
+  'aria-hidden'?: boolean;
+}
+/**
+ * **▾ Select divider**
+ *
+ * @componentType Client component
+ *
+ * @description
+ * A divider for separating groups of select options inside `SelectContent`.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ *
+ * import { Select, SelectContent, SelectDivider, SelectItem } from '@yahoo/uds';
+ *
+ * <Select label="Country" placeholder="Select a country" defaultValue="us">
+ *   <SelectContent>
+ *     <SelectItem value="us">United States</SelectItem>
+ *     <SelectItem value="ca">Canada</SelectItem>
+ *     <SelectDivider>Other regions</SelectDivider>
+ *     <SelectItem value="mx">Mexico</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ * ```
+ *
+ * @usage
+ * Use `SelectDivider` to separate groups of select options.
+ *
+ * @related [Select](https://uds.build/docs/components/select), [SelectItem](https://uds.build/docs/components/select-item), [Divider](https://uds.build/docs/components/divider)
+ */
+declare const SelectDivider: _$react.ForwardRefExoticComponent<SelectDividerProps & _$react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { SelectDivider, type SelectDividerProps };

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

@@ -0,0 +1,61 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+"use client";
+import { getStyles } from "../../../styles/styler.js";
+import { Divider } from "../../Divider/Divider.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/client/Select/SelectDivider.tsx
+/**
+* **▾ Select divider**
+*
+* @componentType Client component
+*
+* @description
+* A divider for separating groups of select options inside `SelectContent`.
+*
+* @example
+* ```tsx
+* 'use client';
+*
+* import { Select, SelectContent, SelectDivider, SelectItem } from '@yahoo/uds';
+*
+* <Select label="Country" placeholder="Select a country" defaultValue="us">
+*   <SelectContent>
+*     <SelectItem value="us">United States</SelectItem>
+*     <SelectItem value="ca">Canada</SelectItem>
+*     <SelectDivider>Other regions</SelectDivider>
+*     <SelectItem value="mx">Mexico</SelectItem>
+*   </SelectContent>
+* </Select>
+* ```
+*
+* @usage
+* Use `SelectDivider` to separate groups of select options.
+*
+* @related [Select](https://uds.build/docs/components/select), [SelectItem](https://uds.build/docs/components/select-item), [Divider](https://uds.build/docs/components/divider)
+*/
+const SelectDivider = forwardRef(function SelectDivider({ "aria-hidden": ariaHidden = true, contentPosition = "start", gap = "4", children, spacingVertical = children ? "2" : "0", spacingHorizontal = children ? "4" : "0", className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Divider, {
+		ref,
+		"aria-hidden": ariaHidden,
+		variant: "inherit",
+		contentPosition,
+		gap,
+		spacingVertical,
+		spacingHorizontal,
+		slotProps: {
+			root: { className: getStyles({
+				selectitemDividerVariantRoot: "default",
+				className
+			}) },
+			label: { className: getStyles({ selectitemDividerVariantText: "default" }) },
+			line: { className: getStyles({ selectitemDividerVariantLine: "default" }) }
+		},
+		...props,
+		children
+	});
+});
+SelectDivider.displayName = "SelectDivider";
+//#endregion
+export { SelectDivider };

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

@@ -0,0 +1,51 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_styles_styler = require("../../../styles/styler.cjs");
+const require_components_IconSlot = require("../../IconSlot.cjs");
+const require_components_HStack = require("../../HStack.cjs");
+const require_components_client_AnimateHeightChange = require("../AnimateHeightChange.cjs");
+const require_components_client_Select_selectContext = require("./selectContext.cjs");
+const require_components_client_Select_selectFieldStyles = require("./selectFieldStyles.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lodash_isFunction_js = require("lodash/isFunction.js");
+lodash_isFunction_js = require_runtime.__toESM(lodash_isFunction_js);
+let _ariakit_react = require("@ariakit/react");
+//#region src/components/client/Select/SelectHelpText.tsx
+function SelectHelpText({ helpText, helperTextIcon, slotProps, className }) {
+	const { size, helpTextId, reduceMotion } = require_components_client_Select_selectContext.useSelectFieldContext();
+	const value = (0, _ariakit_react.useStoreState)((0, _ariakit_react.useSelectContext)(), "value");
+	const hasValue = value != null && value !== "";
+	const content = (0, lodash_isFunction_js.default)(helpText) ? helpText() : helpText;
+	if (!content && !helperTextIcon) return null;
+	const { className: helperTextClassName, ...helperTextSlotProps } = slotProps?.helperText ?? {};
+	const { className: helperTextIconClassName, ...helperTextIconSlotProps } = slotProps?.helperTextIcon ?? {};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_AnimateHeightChange.AnimateHeightChange, {
+		reduceMotion: reduceMotion ? "always" : "user",
+		layoutVariant: "bouncy",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_HStack.HStack, {
+			id: helpTextId,
+			gap: "1",
+			alignItems: "center",
+			spacingTop: "2",
+			className,
+			children: [helperTextIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+				icon: helperTextIcon,
+				className: require_styles_styler.cx(require_components_client_Select_selectFieldStyles.getSelectHelperIconClassName(size, hasValue), helperTextIconClassName),
+				iconProps: {
+					variant: "outline",
+					...helperTextIconSlotProps
+				}
+			}), content && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: require_styles_styler.cx(require_components_client_Select_selectFieldStyles.getSelectHelpTextClassName(size, hasValue), helperTextClassName),
+				...helperTextSlotProps,
+				children: content
+			})]
+		})
+	});
+}
+SelectHelpText.displayName = "SelectHelpText";
+//#endregion
+exports.SelectHelpText = SelectHelpText;

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

@@ -0,0 +1,27 @@
+
+import { UniversalSelectProps } from "../../../types/dist/index.cjs";
+import { IconPropsWithSVGProps } from "../../../tokens/types.cjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Select/SelectHelpText.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface SelectHelpTextProps extends Pick<UniversalSelectProps, 'helpText' | 'helperTextIcon'> {
+  slotProps?: {
+    helperText?: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>;
+    helperTextIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+  };
+  className?: string;
+}
+declare function SelectHelpText({
+  helpText,
+  helperTextIcon,
+  slotProps,
+  className
+}: SelectHelpTextProps): _$react_jsx_runtime0.JSX.Element | null;
+declare namespace SelectHelpText {
+  var displayName: string;
+}
+//#endregion
+export { SelectHelpText, type SelectHelpTextProps };

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

@@ -0,0 +1,28 @@
+
+"use client";
+import { UniversalSelectProps } from "../../../types/dist/index.js";
+import { IconPropsWithSVGProps } from "../../../tokens/types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Select/SelectHelpText.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface SelectHelpTextProps extends Pick<UniversalSelectProps, 'helpText' | 'helperTextIcon'> {
+  slotProps?: {
+    helperText?: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>;
+    helperTextIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+  };
+  className?: string;
+}
+declare function SelectHelpText({
+  helpText,
+  helperTextIcon,
+  slotProps,
+  className
+}: SelectHelpTextProps): _$react_jsx_runtime0.JSX.Element | null;
+declare namespace SelectHelpText {
+  var displayName: string;
+}
+//#endregion
+export { SelectHelpText, type SelectHelpTextProps };

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

@@ -0,0 +1,48 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+"use client";
+import { cx } from "../../../styles/styler.js";
+import { IconSlot } from "../../IconSlot.js";
+import { HStack } from "../../HStack.js";
+import { AnimateHeightChange } from "../AnimateHeightChange.js";
+import { useSelectFieldContext } from "./selectContext.js";
+import { getSelectHelpTextClassName, getSelectHelperIconClassName } from "./selectFieldStyles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isFunction } from "lodash-es";
+import { useSelectContext, useStoreState } from "@ariakit/react";
+//#region src/components/client/Select/SelectHelpText.tsx
+function SelectHelpText({ helpText, helperTextIcon, slotProps, className }) {
+	const { size, helpTextId, reduceMotion } = useSelectFieldContext();
+	const value = useStoreState(useSelectContext(), "value");
+	const hasValue = value != null && value !== "";
+	const content = isFunction(helpText) ? helpText() : helpText;
+	if (!content && !helperTextIcon) return null;
+	const { className: helperTextClassName, ...helperTextSlotProps } = slotProps?.helperText ?? {};
+	const { className: helperTextIconClassName, ...helperTextIconSlotProps } = slotProps?.helperTextIcon ?? {};
+	return /* @__PURE__ */ jsx(AnimateHeightChange, {
+		reduceMotion: reduceMotion ? "always" : "user",
+		layoutVariant: "bouncy",
+		children: /* @__PURE__ */ jsxs(HStack, {
+			id: helpTextId,
+			gap: "1",
+			alignItems: "center",
+			spacingTop: "2",
+			className,
+			children: [helperTextIcon && /* @__PURE__ */ jsx(IconSlot, {
+				icon: helperTextIcon,
+				className: cx(getSelectHelperIconClassName(size, hasValue), helperTextIconClassName),
+				iconProps: {
+					variant: "outline",
+					...helperTextIconSlotProps
+				}
+			}), content && /* @__PURE__ */ jsx("span", {
+				className: cx(getSelectHelpTextClassName(size, hasValue), helperTextClassName),
+				...helperTextSlotProps,
+				children: content
+			})]
+		})
+	});
+}
+SelectHelpText.displayName = "SelectHelpText";
+//#endregion
+export { SelectHelpText };

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

@@ -0,0 +1,172 @@
+/*! © 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_HStack = require("../../HStack.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/SelectItem.tsx
+const ITEM_CLASS_NAME = "uds-select-item";
+const iconAnimationVariants = {
+	visible: {
+		scale: 1,
+		opacity: 1
+	},
+	hidden: {
+		scale: .7,
+		opacity: 0
+	}
+};
+/** Mirrors Menu.ItemBase row chrome so option rows match menu item height. */
+const buildSelectItemClasses = ({ disabled, className }) => {
+	return require_styles_styler.cx(ITEM_CLASS_NAME, "flex", "cursor-pointer", "outline-none", "data-[active-item]:z-10", "uds-ring", "!-outline-offset-2", "duration-20", "transition-[font-variation-settings]", "ease-in-out", "z-0", disabled && "opacity-50 cursor-not-allowed", className);
+};
+/**
+* **▾ Select item**
+*
+* @componentType Client component
+*/
+const SelectItem = (0, react.forwardRef)(function SelectItem({ children, className, slotProps, disabled, value, startIcon, ...props }, ref) {
+	const isSelected = (0, _ariakit_react.useStoreState)((0, _ariakit_react.useSelectContext)(), "value") === value;
+	const { className: rootClassName, ...rootSlotProps } = slotProps?.root ?? {};
+	const { className: textClassName, ...textSlotProps } = slotProps?.text ?? {};
+	const { className: startIconClassName, ...startIconSlotProps } = slotProps?.startIcon ?? {};
+	const { className: endIconClassName, ...endIconSlotProps } = slotProps?.endIcon ?? {};
+	const selectItemClassName = buildSelectItemClasses({
+		disabled,
+		className
+	});
+	const selectSlotProps = (0, react.useMemo)(() => ({
+		root: {
+			className: require_styles_styler.cx(require_styles_styler.getStyles({
+				selectitemItemVariantRoot: "default",
+				selectitemItemVariantActiveRoot: isSelected ? "on" : "off"
+			}), rootClassName),
+			...rootSlotProps
+		},
+		text: {
+			className: require_styles_styler.cx(require_styles_styler.getStyles({
+				selectitemSizeText: "default",
+				selectitemItemVariantText: "default",
+				selectitemItemVariantActiveText: isSelected ? "on" : "off"
+			}), textClassName),
+			...textSlotProps
+		},
+		startIcon: {
+			className: require_styles_styler.cx(require_styles_styler.getStyles({
+				selectitemItemVariantIcon: "default",
+				selectitemItemVariantActiveIcon: isSelected ? "on" : "off"
+			}), startIconClassName),
+			...startIconSlotProps
+		}
+	}), [
+		isSelected,
+		rootClassName,
+		rootSlotProps,
+		startIconClassName,
+		startIconSlotProps,
+		textClassName,
+		textSlotProps
+	]);
+	const contentStyles = require_styles_styler.getStyles({
+		className: require_styles_styler.cx(`${ITEM_CLASS_NAME}-content`, "truncate", selectSlotProps.text.className),
+		textAlign: "start"
+	});
+	const classNames = (0, react.useMemo)(() => ({
+		root: require_styles_styler.getStyles({
+			selectitemSizeRoot: "default",
+			flexDirection: "row",
+			spacing: "0",
+			spacingHorizontal: "4",
+			spacingVertical: "3.5",
+			columnGap: "2",
+			alignItems: "center",
+			justifyContent: "space-between",
+			width: "full",
+			className: require_styles_styler.cx(selectItemClassName, selectSlotProps.root.className)
+		}),
+		startIcon: require_styles_styler.getStyles({
+			selectitemSizeStartIcon: "default",
+			className: selectSlotProps.startIcon.className
+		}),
+		endIcon: require_styles_styler.getStyles({
+			selectitemSizeEndIcon: "default",
+			className: require_styles_styler.cx(require_styles_styler.getStyles({
+				selectitemItemVariantIcon: "default",
+				selectitemItemVariantActiveIcon: "on"
+			}), endIconClassName)
+		})
+	}), [
+		endIconClassName,
+		selectItemClassName,
+		selectSlotProps.root.className,
+		selectSlotProps.startIcon.className
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ariakit_react.SelectItem, {
+		ref,
+		autoFocus: false,
+		disabled,
+		value,
+		className: classNames.root,
+		...rootSlotProps,
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_HStack.HStack, {
+			gap: "2",
+			alignItems: "center",
+			width: "full",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
+				initial: false,
+				children: startIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
+					variants: iconAnimationVariants,
+					initial: "hidden",
+					animate: "visible",
+					exit: "hidden",
+					className: "uds-start-icon inline-flex shrink-0 items-center",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+						icon: startIcon,
+						className: classNames.startIcon,
+						iconProps: {
+							size: "sm",
+							variant: isSelected ? "fill" : "outline",
+							color: "current",
+							...startIconSlotProps
+						}
+					})
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: contentStyles,
+				...textSlotProps,
+				children
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
+			initial: false,
+			mode: "popLayout",
+			children: isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
+				variants: iconAnimationVariants,
+				initial: "hidden",
+				animate: "visible",
+				exit: "hidden",
+				className: "uds-end-icon inline-flex shrink-0 items-center",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+					icon: _yahoo_uds_icons.Check,
+					className: classNames.endIcon,
+					iconProps: {
+						size: "sm",
+						variant: "fill",
+						color: "current",
+						...endIconSlotProps
+					}
+				})
+			})
+		})]
+	});
+});
+SelectItem.displayName = "SelectItem";
+//#endregion
+exports.SelectItem = SelectItem;

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

@@ -0,0 +1,29 @@
+
+import { UniversalIconSlot } from "../../../types/dist/index.cjs";
+import { IconPropsWithSVGProps } from "../../../tokens/types.cjs";
+import * as _$react from "react";
+import { SelectItemProps as SelectItemProps$1 } from "@ariakit/react";
+
+//#region src/components/client/Select/SelectItem.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface SelectItemProps extends Omit<SelectItemProps$1, 'className'> {
+  /** Icon displayed at the start of the select item. */
+  startIcon?: UniversalIconSlot;
+  slotProps?: {
+    root?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    text?: Partial<Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> & DataAttributes>;
+    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+  };
+  className?: string;
+}
+/**
+ * **▾ Select item**
+ *
+ * @componentType Client component
+ */
+declare const SelectItem: _$react.ForwardRefExoticComponent<Omit<SelectItemProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { SelectItem, type SelectItemProps };