@yahoo/uds 3.157.0 → 3.158.0

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

@@ -0,0 +1,30 @@
+
+"use client";
+import { UniversalIconSlot } from "../../../types/dist/index.js";
+import { IconPropsWithSVGProps } from "../../../tokens/types.js";
+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 };

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

@@ -0,0 +1,170 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+"use client";
+import { cx, getStyles } from "../../../styles/styler.js";
+import { IconSlot } from "../../IconSlot.js";
+import { HStack } from "../../HStack.js";
+import { Check } from "@yahoo/uds-icons";
+import { forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SelectItem as SelectItem$1, useSelectContext, useStoreState } from "@ariakit/react";
+import { AnimatePresence, m } from "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 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 = forwardRef(function SelectItem({ children, className, slotProps, disabled, value, startIcon, ...props }, ref) {
+	const isSelected = useStoreState(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 = useMemo(() => ({
+		root: {
+			className: cx(getStyles({
+				selectitemItemVariantRoot: "default",
+				selectitemItemVariantActiveRoot: isSelected ? "on" : "off"
+			}), rootClassName),
+			...rootSlotProps
+		},
+		text: {
+			className: cx(getStyles({
+				selectitemSizeText: "default",
+				selectitemItemVariantText: "default",
+				selectitemItemVariantActiveText: isSelected ? "on" : "off"
+			}), textClassName),
+			...textSlotProps
+		},
+		startIcon: {
+			className: cx(getStyles({
+				selectitemItemVariantIcon: "default",
+				selectitemItemVariantActiveIcon: isSelected ? "on" : "off"
+			}), startIconClassName),
+			...startIconSlotProps
+		}
+	}), [
+		isSelected,
+		rootClassName,
+		rootSlotProps,
+		startIconClassName,
+		startIconSlotProps,
+		textClassName,
+		textSlotProps
+	]);
+	const contentStyles = getStyles({
+		className: cx(`${ITEM_CLASS_NAME}-content`, "truncate", selectSlotProps.text.className),
+		textAlign: "start"
+	});
+	const classNames = useMemo(() => ({
+		root: getStyles({
+			selectitemSizeRoot: "default",
+			flexDirection: "row",
+			spacing: "0",
+			spacingHorizontal: "4",
+			spacingVertical: "3.5",
+			columnGap: "2",
+			alignItems: "center",
+			justifyContent: "space-between",
+			width: "full",
+			className: cx(selectItemClassName, selectSlotProps.root.className)
+		}),
+		startIcon: getStyles({
+			selectitemSizeStartIcon: "default",
+			className: selectSlotProps.startIcon.className
+		}),
+		endIcon: getStyles({
+			selectitemSizeEndIcon: "default",
+			className: cx(getStyles({
+				selectitemItemVariantIcon: "default",
+				selectitemItemVariantActiveIcon: "on"
+			}), endIconClassName)
+		})
+	}), [
+		endIconClassName,
+		selectItemClassName,
+		selectSlotProps.root.className,
+		selectSlotProps.startIcon.className
+	]);
+	return /* @__PURE__ */ jsxs(SelectItem$1, {
+		ref,
+		autoFocus: false,
+		disabled,
+		value,
+		className: classNames.root,
+		...rootSlotProps,
+		...props,
+		children: [/* @__PURE__ */ jsxs(HStack, {
+			gap: "2",
+			alignItems: "center",
+			width: "full",
+			children: [/* @__PURE__ */ jsx(AnimatePresence, {
+				initial: false,
+				children: startIcon && /* @__PURE__ */ jsx(m.span, {
+					variants: iconAnimationVariants,
+					initial: "hidden",
+					animate: "visible",
+					exit: "hidden",
+					className: "uds-start-icon inline-flex shrink-0 items-center",
+					children: /* @__PURE__ */ jsx(IconSlot, {
+						icon: startIcon,
+						className: classNames.startIcon,
+						iconProps: {
+							size: "sm",
+							variant: isSelected ? "fill" : "outline",
+							color: "current",
+							...startIconSlotProps
+						}
+					})
+				})
+			}), /* @__PURE__ */ jsx("span", {
+				className: contentStyles,
+				...textSlotProps,
+				children
+			})]
+		}), /* @__PURE__ */ jsx(AnimatePresence, {
+			initial: false,
+			mode: "popLayout",
+			children: isSelected && /* @__PURE__ */ jsx(m.span, {
+				variants: iconAnimationVariants,
+				initial: "hidden",
+				animate: "visible",
+				exit: "hidden",
+				className: "uds-end-icon inline-flex shrink-0 items-center",
+				children: /* @__PURE__ */ jsx(IconSlot, {
+					icon: Check,
+					className: classNames.endIcon,
+					iconProps: {
+						size: "sm",
+						variant: "fill",
+						color: "current",
+						...endIconSlotProps
+					}
+				})
+			})
+		})]
+	});
+});
+SelectItem.displayName = "SelectItem";
+//#endregion
+export { SelectItem };

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 };