@yahoo/uds 3.157.1 → 3.158.0

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

@@ -0,0 +1,56 @@
+
+"use client";
+import { UniversalSelectProps } from "../../../types/dist/index.js";
+import { IconPropsWithSVGProps } from "../../../tokens/types.js";
+import { SelectTriggerProps } from "./SelectTrigger.js";
+import * as _$react from "react";
+import { SelectProviderProps } from "@ariakit/react";
+
+//#region src/components/client/Select/Select.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface SelectProps extends Pick<UniversalSelectProps, 'label' | 'disabled' | 'required' | 'helpText' | 'helperTextIcon' | 'hasError' | 'size' | 'startIcon' | 'endIcon' | 'reduceMotion' | 'readOnly' | 'width'>, Omit<SelectProviderProps, 'children' | 'setValue'> {
+  children?: React.ReactNode;
+  /** Placeholder text shown when no value is selected. */
+  placeholder?: string;
+  /** Native form field name. Renders a hidden `<select>` for form submission. */
+  name?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  /** Called when the selected value changes. Alias for Ariakit `setValue`. */
+  onChange?: (value: string) => void;
+  setValue?: SelectProviderProps['setValue'];
+  slotProps?: {
+    root?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    label?: Partial<React.LabelHTMLAttributes<HTMLLabelElement> & DataAttributes>;
+    trigger?: SelectTriggerProps['slotProps'];
+    helperText?: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>;
+    helperTextIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+  };
+}
+/**
+ * **⚙️ A composable Select component**
+ *
+ * @componentType Client component
+ *
+ * @description
+ * Select lets users pick one value from a list. Compose with `SelectContent` and
+ * `SelectItem`, similar to `Tabs` with `TabList` and `Tab`.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Select, SelectContent, 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>
+ *   </SelectContent>
+ * </Select>
+ * ```
+ */
+declare const Select: _$react.ForwardRefExoticComponent<SelectProps & _$react.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Select, type SelectProps };

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

@@ -0,0 +1,176 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+"use client";
+import { cx } from "../../../styles/styler.js";
+import { Box } from "../../Box.js";
+import { VStack } from "../../VStack.js";
+import { SpringMotionConfig } from "../SpringMotionConfig.js";
+import { SelectFieldContext } from "./selectContext.js";
+import { getSelectLabelClassName, getSelectLabelRequiredClassName, getSelectRootClassName } from "./selectFieldStyles.js";
+import { SelectHelpText } from "./SelectHelpText.js";
+import { SelectTrigger } from "./SelectTrigger.js";
+import { forwardRef, useCallback, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isFunction } from "lodash-es";
+import { SelectProvider, useSelectContext, useStoreState } from "@ariakit/react";
+//#region src/components/client/Select/Select.tsx
+const SelectRoot = forwardRef(function SelectRoot({ children, label, helpText, helperTextIcon, placeholder, name, size = "md", disabled, required, hasError, readOnly, width = "full", reduceMotion: forceReduceMotion, startIcon, endIcon, className, style, slotProps }, ref) {
+	const value = useStoreState(useSelectContext(), "value");
+	const hasValue = value != null && value !== "";
+	const hasHelpText = Boolean(helpText || helperTextIcon);
+	const uid = `uds-select-${useId()}`;
+	const helpTextId = hasHelpText ? `${uid}-help-text` : void 0;
+	const triggerWrapperRef = useRef(null);
+	const contextValue = useMemo(() => ({
+		size,
+		disabled,
+		readOnly,
+		required,
+		hasError,
+		width,
+		reduceMotion: forceReduceMotion,
+		uid,
+		helpTextId,
+		triggerWrapperRef
+	}), [
+		size,
+		disabled,
+		readOnly,
+		required,
+		hasError,
+		width,
+		forceReduceMotion,
+		uid,
+		helpTextId
+	]);
+	const { className: rootSlotClassName, ...rootSlotProps } = slotProps?.root ?? {};
+	return /* @__PURE__ */ jsx(SelectFieldContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs(VStack, {
+			width,
+			className: cx(getSelectRootClassName({
+				size,
+				hasValue,
+				disabled,
+				className
+			}), rootSlotClassName),
+			style,
+			...rootSlotProps,
+			children: [
+				label && /* @__PURE__ */ jsxs(Box, {
+					spacingBottom: "2",
+					columnGap: "0.5",
+					alignItems: "flex-end",
+					className: getSelectLabelClassName(size, hasValue),
+					children: [/* @__PURE__ */ jsx("label", {
+						htmlFor: uid,
+						...slotProps?.label,
+						children: isFunction(label) ? label() : label
+					}), required && /* @__PURE__ */ jsx("span", {
+						className: getSelectLabelRequiredClassName(hasValue),
+						children: "*"
+					})]
+				}),
+				/* @__PURE__ */ jsx(SelectTrigger, {
+					ref,
+					placeholder,
+					name,
+					startIcon,
+					endIcon,
+					disabled,
+					slotProps: slotProps?.trigger
+				}),
+				hasHelpText && /* @__PURE__ */ jsx(SelectHelpText, {
+					helpText,
+					helperTextIcon,
+					slotProps: {
+						helperText: slotProps?.helperText,
+						helperTextIcon: slotProps?.helperTextIcon
+					}
+				}),
+				children
+			]
+		})
+	});
+});
+SelectRoot.displayName = "SelectRoot";
+/**
+* **⚙️ A composable Select component**
+*
+* @componentType Client component
+*
+* @description
+* Select lets users pick one value from a list. Compose with `SelectContent` and
+* `SelectItem`, similar to `Tabs` with `TabList` and `Tab`.
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Select, SelectContent, 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>
+*   </SelectContent>
+* </Select>
+* ```
+*/
+const Select = forwardRef(function Select({ children, label, helpText, helperTextIcon, placeholder, name, size, disabled, required, hasError, readOnly, width, reduceMotion, startIcon, endIcon, className, style, slotProps, defaultValue = "", value, setValue: setValueProp, onChange, open: openProp, defaultOpen, setOpen: setOpenProp, ...providerProps }, ref) {
+	const setValue = setValueProp ?? onChange;
+	const isOpenControlled = openProp !== void 0;
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);
+	const open = isOpenControlled ? openProp : uncontrolledOpen;
+	const handleSetOpen = useCallback((nextOpen) => {
+		if (readOnly && isOpenControlled) return;
+		if (nextOpen && (readOnly || disabled)) return;
+		if (!isOpenControlled) setUncontrolledOpen(nextOpen);
+		setOpenProp?.(nextOpen);
+	}, [
+		disabled,
+		isOpenControlled,
+		readOnly,
+		setOpenProp
+	]);
+	return /* @__PURE__ */ jsx(SpringMotionConfig, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ jsx(SelectProvider, {
+			...value !== void 0 ? {
+				...providerProps,
+				value,
+				setValue,
+				open,
+				setOpen: handleSetOpen
+			} : {
+				...providerProps,
+				defaultValue,
+				open,
+				setOpen: handleSetOpen
+			},
+			children: /* @__PURE__ */ jsx(SelectRoot, {
+				ref,
+				label,
+				helpText,
+				helperTextIcon,
+				placeholder,
+				name,
+				size,
+				disabled,
+				required,
+				hasError,
+				readOnly,
+				width,
+				reduceMotion,
+				startIcon,
+				endIcon,
+				className,
+				style,
+				slotProps,
+				children
+			})
+		})
+	});
+});
+Select.displayName = "Select";
+//#endregion
+export { Select };

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

@@ -0,0 +1,75 @@
+/*! © 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_VStack = require("../../VStack.cjs");
+const require_utils_getUnscaledAnchorRect = require("../../../utils/getUnscaledAnchorRect.cjs");
+const require_components_client_Select_selectContext = require("./selectContext.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _ariakit_react = require("@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 = (0, react.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 = (0, _ariakit_react.useSelectContext)();
+	const { triggerWrapperRef } = require_components_client_Select_selectContext.useSelectFieldContext();
+	const mounted = (0, _ariakit_react.useStoreState)(select, "mounted");
+	const hasResetActiveItemRef = (0, react.useRef)(false);
+	const getAnchorRect = (0, react.useCallback)((anchor) => {
+		const wrapper = triggerWrapperRef.current;
+		if (wrapper) return require_utils_getUnscaledAnchorRect.getUnscaledAnchorRect(wrapper);
+		return require_utils_getUnscaledAnchorRect.getUnscaledAnchorRect(anchor);
+	}, [triggerWrapperRef]);
+	(0, react.useLayoutEffect)(() => {
+		if (!select) return;
+		if (mounted && !hasResetActiveItemRef.current) {
+			select.setActiveId(null);
+			hasResetActiveItemRef.current = true;
+		}
+		if (!mounted) hasResetActiveItemRef.current = false;
+	}, [mounted, select]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.SelectPopover, {
+		ref,
+		render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_VStack.VStack, {
+			elevation: "3",
+			overflow: "auto",
+			borderRadius: "md",
+			nestedBorderRadius,
+			nestedBorderRadiusSize,
+			nestedBorderRadiusSpacing,
+			nestedBorderRadiusWidth,
+			...rootSlotProps,
+			style: {
+				maxHeight: resolvedMaxHeight,
+				...rootStyle
+			},
+			className: require_styles_styler.cx(require_styles_styler.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
+exports.SelectContent = SelectContent;

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

@@ -0,0 +1,44 @@
+
+import { VStackProps } from "../../VStack.cjs";
+import * as _$react from "react";
+import { PropsWithChildren } from "react";
+import { SelectPopoverProps } from "@ariakit/react";
+
+//#region src/components/client/Select/SelectContent.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface SelectContentProps extends PropsWithChildren, Omit<SelectPopoverProps, 'render' | 'hideOnInteractOutside'>, Pick<VStackProps, 'nestedBorderRadius' | 'nestedBorderRadiusSize' | 'nestedBorderRadiusSpacing' | 'nestedBorderRadiusWidth'> {
+  size?: 'default';
+  variant?: 'default';
+  /** When true, the panel stays open when the user clicks or focuses outside. */
+  keepOpenOnInteractOutside?: boolean;
+  /**
+   * Maximum height of the options list. Accepts a number in pixels or a string in
+   * CSS units.
+   *
+   * @default 240
+   */
+  maxHeight?: string | number;
+  /** UDS handles nested border radius for the first and last item for you to prevent clipping and visual jank.
+   *  If you need to disable this, set this prop to true.
+   *
+   *  @link https://github.com/yahoo-uds/uds/blob/main/packages/uds/src/tailwind/utils/getNestedBorderRadiusUtilities.ts
+   **/
+  disableAutoBorderRadius?: boolean;
+  slotProps?: {
+    root?: Partial<VStackProps & DataAttributes>;
+  };
+}
+/**
+ * **▾ Select content panel**
+ *
+ * @componentType Client component
+ *
+ * @description
+ * The floating listbox container. Renders Ariakit `SelectPopover` with UDS
+ * styling.
+ */
+declare const SelectContent: _$react.ForwardRefExoticComponent<Omit<SelectContentProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { SelectContent, type SelectContentProps };

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

@@ -0,0 +1,45 @@
+
+"use client";
+import { VStackProps } from "../../VStack.js";
+import * as _$react from "react";
+import { PropsWithChildren } from "react";
+import { SelectPopoverProps } from "@ariakit/react";
+
+//#region src/components/client/Select/SelectContent.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface SelectContentProps extends PropsWithChildren, Omit<SelectPopoverProps, 'render' | 'hideOnInteractOutside'>, Pick<VStackProps, 'nestedBorderRadius' | 'nestedBorderRadiusSize' | 'nestedBorderRadiusSpacing' | 'nestedBorderRadiusWidth'> {
+  size?: 'default';
+  variant?: 'default';
+  /** When true, the panel stays open when the user clicks or focuses outside. */
+  keepOpenOnInteractOutside?: boolean;
+  /**
+   * Maximum height of the options list. Accepts a number in pixels or a string in
+   * CSS units.
+   *
+   * @default 240
+   */
+  maxHeight?: string | number;
+  /** UDS handles nested border radius for the first and last item for you to prevent clipping and visual jank.
+   *  If you need to disable this, set this prop to true.
+   *
+   *  @link https://github.com/yahoo-uds/uds/blob/main/packages/uds/src/tailwind/utils/getNestedBorderRadiusUtilities.ts
+   **/
+  disableAutoBorderRadius?: boolean;
+  slotProps?: {
+    root?: Partial<VStackProps & DataAttributes>;
+  };
+}
+/**
+ * **▾ Select content panel**
+ *
+ * @componentType Client component
+ *
+ * @description
+ * The floating listbox container. Renders Ariakit `SelectPopover` with UDS
+ * styling.
+ */
+declare const SelectContent: _$react.ForwardRefExoticComponent<Omit<SelectContentProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { SelectContent, type SelectContentProps };

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