/*! © 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 };
