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