"use client";
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
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_Box = require('../../Box.cjs');
const require_components_HStack = require('../../HStack.cjs');
const require_components_VStack = require('../../VStack.cjs');
const require_components_IconSlot = require('../../IconSlot.cjs');
const require_components_client_AnimateHeightChange = require('../AnimateHeightChange.cjs');
const require_components_client_Input_InputHelpTextInternal = require('./InputHelpTextInternal.cjs');
let react = require("react");
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 motion_react = require("motion/react");

//#region src/components/client/Input/Input.tsx
const HelpTextContent = (0, react.memo)(function HelpTextContentOriginal({ helpText, helperTextIcon, spacingStart, spacingTop, size, isFilled, ...rest }) {
	if (!helpText) return null;
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
		spacingTop,
		spacingStart,
		...rest,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Input_InputHelpTextInternal.InputHelpTextInternal, {
			startIcon: helperTextIcon,
			size,
			isFilled,
			children: (0, lodash_isFunction_js.default)(helpText) ? helpText() : helpText
		})
	});
});
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,
		iconProps: {
			variant: "outline",
			...iconProps
		},
		className
	});
});
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,
		iconProps: {
			variant: "outline",
			...iconProps
		},
		className
	});
});
/**
* **📦 An input that allows users to enter text and collect data.**
*
* @componentType Client component
*
* @description
* An input field is a component that takes text typed into it. It can also serve as a way to display a selection and trigger a dropdown menu. Inputs are interactive elements that users can click, tap, or otherwise engage with to collect data and open dropdowns, or both.
*
* @see
* Check out the {@link https://uds.build/docs/components/input Input Docs} for more info
*
* @usage
* - Forms: For collecting data like names, emails, passwords, etc. (e.g., sign-up, login, or contact forms).
* - Search Bars: Allowing users to enter search queries to find content.
* - Filters/Settings: When users need to specify preferences, like selecting a date or adjusting a number value.
* - Feedback/Comments: Letting users leave reviews, comments, or feedback.
*
* @example
* ```tsx
* 'use client';
* import { Input } from "@yahoo/uds";
*
* <Input label="Name" placeholder="Enter your name" required />
*```
*
* @related [Checkbox](https://uds.build/docs/components/checkbox), [Radio](https://uds.build/docs/components/radio).
**/
const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, width: containerWidth = "full", defaultValue, required, readOnly, disabled, reduceMotion: forceReduceMotion, onChange, slotProps, className, ...otherProps }, forwardedRef) {
	const generatedId = (0, react.useId)();
	const uid = id ?? `uds-input-${generatedId}`;
	const helpTextId = `uds-input-${uid}-help-text`;
	const { className: inputClassName, ...inputProps } = slotProps?.input ?? {};
	const { className: inputWrapperClassName, ...inputWrapperProps } = slotProps?.inputWrapper ?? {};
	const ref = (0, react.useRef)(null);
	(0, react.useImperativeHandle)(forwardedRef, () => ref.current);
	const [value, setValue] = (0, react.useState)(defaultValue ?? "");
	const handleChange = (0, react.useCallback)((e) => {
		setValue(e.target.value);
		onChange?.(e);
	}, [onChange]);
	const layoutVariant = (0, motion_react.useReducedMotion)() ? "smooth" : "bouncy";
	const reduceMotion = forceReduceMotion ? "always" : "user";
	const isInteractive = !readOnly && !disabled;
	const classNames = {
		root: require_styles_styler.getStyles({
			inputSizeRoot: size,
			inputVariantRoot: "default",
			inputVariantValueRoot: !value ? "empty" : "filled",
			className: require_styles_styler.cx([className, disabled ? "opacity-50" : ""])
		}),
		inputWrapper: require_styles_styler.cx(require_styles_styler.getStyles({
			inputSizeInputWrapper: size,
			inputVariantInputWrapper: "default",
			inputVariantValueInputWrapper: !value ? "empty" : "filled"
		}), "min-w-[200px]", inputWrapperClassName),
		input: require_styles_styler.getStyles({
			inputSizeInput: size,
			inputVariantInput: "default",
			inputVariantValueInput: !value ? "empty" : "filled",
			inputVariantInputPlaceholder: "default",
			inputVariantValueInputPlaceholder: !value ? "empty" : "filled",
			className: require_styles_styler.cx("grow", "uds-hit-target", "bg-clip-text", "focus:outline-none", isInteractive ? "cursor-text" : "cursor-not-allowed", inputClassName)
		}),
		label: require_styles_styler.cx(require_styles_styler.getStyles({
			inputSizeLabel: size,
			inputVariantLabel: "default",
			inputVariantValueLabel: !value ? "empty" : "filled"
		})),
		labelRequired: require_styles_styler.getStyles({
			inputVariantLabelRequired: "default",
			inputVariantValueLabelRequired: !value ? "empty" : "filled"
		}),
		startIcon: require_styles_styler.getStyles({
			inputSizeStartIcon: size,
			inputVariantStartIcon: "default",
			inputVariantValueStartIcon: !value ? "empty" : "filled"
		}),
		endIcon: require_styles_styler.getStyles({
			inputSizeEndIcon: size,
			inputVariantEndIcon: "default",
			inputVariantValueEndIcon: !value ? "empty" : "filled"
		})
	};
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_VStack.VStack, {
		width: containerWidth,
		className: classNames.root,
		children: [
			label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
				spacingBottom: "2",
				columnGap: "0.5",
				alignItems: "flex-end",
				className: classNames.label,
				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
					htmlFor: uid,
					children: (0, lodash_isFunction_js.default)(label) ? label() : label
				}), required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
					className: classNames.labelRequired,
					children: "*"
				})]
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
				position: "relative",
				alignItems: "center",
				...inputWrapperProps,
				className: classNames.inputWrapper,
				children: [
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StartIcon, {
						icon: startIcon,
						className: classNames.startIcon,
						iconProps: slotProps?.startIcon
					}),
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
						ref,
						id: uid,
						type,
						value,
						required,
						readOnly,
						disabled,
						"aria-describedby": helpTextId,
						"aria-invalid": hasError,
						onChange: handleChange,
						className: classNames.input,
						...otherProps,
						...inputProps
					}),
					endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_HStack.HStack, {
						alignItems: "center",
						gap: "1",
						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndIcon, {
							icon: endIcon,
							className: classNames.endIcon,
							iconProps: slotProps?.endIcon
						})
					})
				]
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_AnimateHeightChange.AnimateHeightChange, {
				reduceMotion,
				layoutVariant,
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HelpTextContent, {
					id: helpTextId,
					helpText,
					spacingTop: "2",
					size,
					isFilled: !!value,
					helperTextIcon
				})
			})
		]
	});
});
Input.displayName = "Input";

//#endregion
exports.Input = Input;