@yahoo/uds 3.58.2-beta.1 → 3.59.0-beta.2

package/dist/components/client/Input/Input.cjs

@@ -0,0 +1,209 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_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_rolldown_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$1({ 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$1({ 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$1({ 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;

package/dist/components/client/Input/Input.d.cts

@@ -0,0 +1,57 @@
+import { IconPropsWithSVGProps, UniversalInputProps } from "../../../tokens/types.cjs";
+import "../../../tokens/index.cjs";
+import { BoxProps } from "../../Box.cjs";
+import * as react40 from "react";
+import { InputHTMLAttributes } from "react";
+import { HTMLMotionProps } from "motion/react";
+
+//#region src/components/client/Input/Input.d.ts
+type HtmlInputProps = React.InputHTMLAttributes<HTMLInputElement> & HTMLMotionProps<'input'>;
+type NativeInputProps = Omit<HtmlInputProps, 'height' | 'size' | 'width' | 'color' | 'required'>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface InputProps extends NativeInputProps, UniversalInputProps {
+  /** The type of the input element. Reduced set of options from the HTML input type attribute.
+   * @default 'text'
+   */
+  type?: Exclude<NativeInputProps['type'], 'button' | 'checkbox' | 'color' | 'file' | 'radio' | 'range' | 'reset' | 'submit' | 'search'>;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    input?: Partial<InputHTMLAttributes<HTMLInputElement> & DataAttributes>;
+    inputWrapper?: Partial<BoxProps & DataAttributes>;
+    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+  };
+}
+/**
+ * **📦 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).
+ **/
+declare const Input: react40.ForwardRefExoticComponent<Omit<InputProps, "ref"> & react40.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { Input, type InputProps };
+//# sourceMappingURL=Input.d.cts.map

package/dist/components/client/Input/Input.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.cts","names":[],"sources":["../../../../src/components/client/Input/Input.tsx"],"sourcesContent":[],"mappings":";;;;;;;;KAsBK,cAAA,CAAA,CAAA,CAAiB,KAAA,CAAM,oBAAoB,oBAAoB;KAE/D,gBAAA,CAAA,CAAA,CAAmB,KAAK;KAGxB,cAAA,CAAA,CAAA;;AAbqC,CAAA;UAiBhC,UAAA,CAAA,OAAA,CAAmB,gBATmB,CAAA,CASD,mBATC,CAAA;EAA1B,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,KAAA,CAAA,OAAA,CAAA,CAAA,OAAA,CAAA,GAAA,CAAA,EAAA,CAAA,OAAA,CAAA,IAAA,CAAA,GAAA,CAAA,IAAA,CAAA,KAAA,CAAA,IAAA,CAAA,SAAA;;;EAEjB,IAAA,CAAA,CAAA,CAWI,OAXJ,CAYD,gBAZiB,CAAQ,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAL,CAAA,CAAA,CAAA,CAAA,QAAA,CAAI,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA;EAGvB,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,EAAA,CAAA,EAAA,CAAA,MAAA,CAAA,IAAA,CAAA,OAAA,CAAA,KAAA,CAAA,MAAA,CAAA,GAAA,CAAA,SAAA,CAAA,CAAA,CAAA;EAIK,SAAA,CAAA,CAAA,CAAA;IAKN,KAAA,CAAA,CAAA,CAMQ,OANR,CAMgB,mBANhB,CAMoC,gBANpC,CAAA,CAAA,CAAA,CAMwD,cANxD,CAAA;IADK,YAAA,CAAA,CAAA,CAQU,OARV,CAQkB,QARlB,CAAA,CAAA,CAQ6B,cAR7B,CAAA;IAO+B,SAAA,CAAA,CAAA,CAExB,OAFwB,CAEhB,qBAFgB,CAAA,CAAA,CAEQ,cAFR,CAAA;IAApB,OAAA,CAAA,CAAA,CAGN,OAHM,CAGE,qBAHF,CAAA,CAAA,CAG0B,cAH1B,CAAA;EAAwC,CAAA;;;;;;;;;;;;;;AAXM,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,GAAA,CAAA,UAAA,CAAA,IAAA,CAAA,IAAA,CAAA,KAAA,CAAA,CAAA,MAAA,CAAA,CAAA,SAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,EAAA,CAAA,CAAA,KAAA,CAAA,CAAA,EAAA,CAAA,OAAA,CAAA,KAAA,CAAA;;;;;;;;;;;;;;;cAqH5D,OAAK,OAAA,CAAA,0BAAA,KAAA,qBAAA,OAAA,CAAA,cAAA"}

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

@@ -0,0 +1,57 @@
+import { IconPropsWithSVGProps, UniversalInputProps } from "../../../tokens/types.js";
+import "../../../tokens/index.js";
+import { BoxProps } from "../../Box.js";
+import * as react51 from "react";
+import { InputHTMLAttributes } from "react";
+import { HTMLMotionProps } from "motion/react";
+
+//#region src/components/client/Input/Input.d.ts
+type HtmlInputProps = React.InputHTMLAttributes<HTMLInputElement> & HTMLMotionProps<'input'>;
+type NativeInputProps = Omit<HtmlInputProps, 'height' | 'size' | 'width' | 'color' | 'required'>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface InputProps extends NativeInputProps, UniversalInputProps {
+  /** The type of the input element. Reduced set of options from the HTML input type attribute.
+   * @default 'text'
+   */
+  type?: Exclude<NativeInputProps['type'], 'button' | 'checkbox' | 'color' | 'file' | 'radio' | 'range' | 'reset' | 'submit' | 'search'>;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    input?: Partial<InputHTMLAttributes<HTMLInputElement> & DataAttributes>;
+    inputWrapper?: Partial<BoxProps & DataAttributes>;
+    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+  };
+}
+/**
+ * **📦 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).
+ **/
+declare const Input: react51.ForwardRefExoticComponent<Omit<InputProps, "ref"> & react51.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { Input, type InputProps };
+//# sourceMappingURL=Input.d.ts.map

package/dist/components/client/Input/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","names":[],"sources":["../../../../src/components/client/Input/Input.tsx"],"sourcesContent":[],"mappings":";;;;;;;;KAsBK,cAAA,CAAA,CAAA,CAAiB,KAAA,CAAM,oBAAoB,oBAAoB;KAE/D,gBAAA,CAAA,CAAA,CAAmB,KAAK;KAGxB,cAAA,CAAA,CAAA;;AAbqC,CAAA;UAiBhC,UAAA,CAAA,OAAA,CAAmB,gBATmB,CAAA,CASD,mBATC,CAAA;EAA1B,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,KAAA,CAAA,OAAA,CAAA,CAAA,OAAA,CAAA,GAAA,CAAA,EAAA,CAAA,OAAA,CAAA,IAAA,CAAA,GAAA,CAAA,IAAA,CAAA,KAAA,CAAA,IAAA,CAAA,SAAA;;;EAEjB,IAAA,CAAA,CAAA,CAWI,OAXJ,CAYD,gBAZiB,CAAQ,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAL,CAAA,CAAA,CAAA,CAAA,QAAA,CAAI,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA;EAGvB,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,EAAA,CAAA,EAAA,CAAA,MAAA,CAAA,IAAA,CAAA,OAAA,CAAA,KAAA,CAAA,MAAA,CAAA,GAAA,CAAA,SAAA,CAAA,CAAA,CAAA;EAIK,SAAA,CAAA,CAAA,CAAA;IAKN,KAAA,CAAA,CAAA,CAMQ,OANR,CAMgB,mBANhB,CAMoC,gBANpC,CAAA,CAAA,CAAA,CAMwD,cANxD,CAAA;IADK,YAAA,CAAA,CAAA,CAQU,OARV,CAQkB,QARlB,CAAA,CAAA,CAQ6B,cAR7B,CAAA;IAO+B,SAAA,CAAA,CAAA,CAExB,OAFwB,CAEhB,qBAFgB,CAAA,CAAA,CAEQ,cAFR,CAAA;IAApB,OAAA,CAAA,CAAA,CAGN,OAHM,CAGE,qBAHF,CAAA,CAAA,CAG0B,cAH1B,CAAA;EAAwC,CAAA;;;;;;;;;;;;;;AAXM,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,GAAA,CAAA,UAAA,CAAA,IAAA,CAAA,IAAA,CAAA,KAAA,CAAA,CAAA,MAAA,CAAA,CAAA,SAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,EAAA,CAAA,CAAA,KAAA,CAAA,CAAA,EAAA,CAAA,OAAA,CAAA,KAAA,CAAA;;;;;;;;;;;;;;;cAqH5D,OAAK,OAAA,CAAA,0BAAA,KAAA,qBAAA,OAAA,CAAA,cAAA"}

package/dist/components/client/Input/Input.js

@@ -0,0 +1,208 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { cx, getStyles } from "../../../styles/styler.js";
+import { Box } from "../../Box.js";
+import { HStack } from "../../HStack.js";
+import { VStack } from "../../VStack.js";
+import { IconSlot } from "../../IconSlot.js";
+import { AnimateHeightChange } from "../AnimateHeightChange.js";
+import { InputHelpTextInternal as InputHelpTextInternalMemo } from "./InputHelpTextInternal.js";
+import { forwardRef, memo, useCallback, useId, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isFunction } from "lodash-es";
+import { useReducedMotion } from "motion/react";
+
+//#region src/components/client/Input/Input.tsx
+const HelpTextContent = memo(function HelpTextContentOriginal({ helpText, helperTextIcon, spacingStart, spacingTop, size, isFilled,...rest }) {
+	if (!helpText) return null;
+	return /* @__PURE__ */ jsx(Box, {
+		spacingTop,
+		spacingStart,
+		...rest,
+		children: /* @__PURE__ */ jsx(InputHelpTextInternalMemo, {
+			startIcon: helperTextIcon,
+			size,
+			isFilled,
+			children: isFunction(helpText) ? helpText() : helpText
+		})
+	});
+});
+const StartIcon = memo(function StartIcon$1({ icon, className, iconProps }) {
+	if (!icon) return null;
+	return /* @__PURE__ */ jsx(IconSlot, {
+		icon,
+		iconProps: {
+			variant: "outline",
+			...iconProps
+		},
+		className
+	});
+});
+const EndIcon = memo(function EndIcon$1({ icon, className, iconProps }) {
+	if (!icon) return null;
+	return /* @__PURE__ */ jsx(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 = forwardRef(function Input$1({ 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 = 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 = useRef(null);
+	useImperativeHandle(forwardedRef, () => ref.current);
+	const [value, setValue] = useState(defaultValue ?? "");
+	const handleChange = useCallback((e) => {
+		setValue(e.target.value);
+		onChange?.(e);
+	}, [onChange]);
+	const layoutVariant = useReducedMotion() ? "smooth" : "bouncy";
+	const reduceMotion = forceReduceMotion ? "always" : "user";
+	const isInteractive = !readOnly && !disabled;
+	const classNames = {
+		root: getStyles({
+			inputSizeRoot: size,
+			inputVariantRoot: "default",
+			inputVariantValueRoot: !value ? "empty" : "filled",
+			className: cx([className, disabled ? "opacity-50" : ""])
+		}),
+		inputWrapper: cx(getStyles({
+			inputSizeInputWrapper: size,
+			inputVariantInputWrapper: "default",
+			inputVariantValueInputWrapper: !value ? "empty" : "filled"
+		}), "min-w-[200px]", inputWrapperClassName),
+		input: getStyles({
+			inputSizeInput: size,
+			inputVariantInput: "default",
+			inputVariantValueInput: !value ? "empty" : "filled",
+			inputVariantInputPlaceholder: "default",
+			inputVariantValueInputPlaceholder: !value ? "empty" : "filled",
+			className: cx("grow", "uds-hit-target", "bg-clip-text", "focus:outline-none", isInteractive ? "cursor-text" : "cursor-not-allowed", inputClassName)
+		}),
+		label: cx(getStyles({
+			inputSizeLabel: size,
+			inputVariantLabel: "default",
+			inputVariantValueLabel: !value ? "empty" : "filled"
+		})),
+		labelRequired: getStyles({
+			inputVariantLabelRequired: "default",
+			inputVariantValueLabelRequired: !value ? "empty" : "filled"
+		}),
+		startIcon: getStyles({
+			inputSizeStartIcon: size,
+			inputVariantStartIcon: "default",
+			inputVariantValueStartIcon: !value ? "empty" : "filled"
+		}),
+		endIcon: getStyles({
+			inputSizeEndIcon: size,
+			inputVariantEndIcon: "default",
+			inputVariantValueEndIcon: !value ? "empty" : "filled"
+		})
+	};
+	return /* @__PURE__ */ jsxs(VStack, {
+		width: containerWidth,
+		className: classNames.root,
+		children: [
+			label && /* @__PURE__ */ jsxs(Box, {
+				spacingBottom: "2",
+				columnGap: "0.5",
+				alignItems: "flex-end",
+				className: classNames.label,
+				children: [/* @__PURE__ */ jsx("label", {
+					htmlFor: uid,
+					children: isFunction(label) ? label() : label
+				}), required && /* @__PURE__ */ jsx("span", {
+					className: classNames.labelRequired,
+					children: "*"
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				position: "relative",
+				alignItems: "center",
+				...inputWrapperProps,
+				className: classNames.inputWrapper,
+				children: [
+					/* @__PURE__ */ jsx(StartIcon, {
+						icon: startIcon,
+						className: classNames.startIcon,
+						iconProps: slotProps?.startIcon
+					}),
+					/* @__PURE__ */ 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__ */ jsx(HStack, {
+						alignItems: "center",
+						gap: "1",
+						children: /* @__PURE__ */ jsx(EndIcon, {
+							icon: endIcon,
+							className: classNames.endIcon,
+							iconProps: slotProps?.endIcon
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(AnimateHeightChange, {
+				reduceMotion,
+				layoutVariant,
+				children: /* @__PURE__ */ jsx(HelpTextContent, {
+					id: helpTextId,
+					helpText,
+					spacingTop: "2",
+					size,
+					isFilled: !!value,
+					helperTextIcon
+				})
+			})
+		]
+	});
+});
+Input.displayName = "Input";
+
+//#endregion
+export { Input };
+//# sourceMappingURL=Input.js.map

package/dist/components/client/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","names":[],"sources":["../../../../src/components/client/Input/Input.tsx"],"sourcesContent":["/* eslint-disable react/no-multi-comp */\nimport type {\n  IconPropsWithSVGProps,\n  MotionVariant,\n  UniversalIconProps,\n  UniversalInputProps,\n} from '@yahoo/uds/tokens';\nimport { isFunction } from 'lodash';\nimport type { HTMLMotionProps } from 'motion/react';\nimport { useReducedMotion } from 'motion/react';\nimport type { ChangeEvent, InputHTMLAttributes } from 'react';\nimport { forwardRef, memo, useCallback, useId, useImperativeHandle, useRef, useState } from 'react';\n\nimport { cx, getStyles } from '../../../styles/styler';\nimport type { BoxProps } from '../../Box';\nimport { Box } from '../../Box';\nimport { HStack } from '../../HStack';\nimport { IconSlot } from '../../IconSlot';\nimport { VStack } from '../../VStack';\nimport { AnimateHeightChange } from '../AnimateHeightChange';\nimport { InputHelpTextInternal } from './InputHelpTextInternal';\n\ntype HtmlInputProps = React.InputHTMLAttributes<HTMLInputElement> & HTMLMotionProps<'input'>;\n\ntype NativeInputProps = Omit<HtmlInputProps, 'height' | 'size' | 'width' | 'color' | 'required'>;\n\n// Required because of: https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/69864\ntype DataAttributes = {\n  [name: `data-${string}`]: string;\n};\n\ninterface InputProps extends NativeInputProps, UniversalInputProps {\n  /** The type of the input element. Reduced set of options from the HTML input type attribute.\n   * @default 'text'\n   */\n  type?: Exclude<\n    NativeInputProps['type'],\n    'button' | 'checkbox' | 'color' | 'file' | 'radio' | 'range' | 'reset' | 'submit' | 'search'\n  >;\n\n  /** Props to be passed into various slots within the component. */\n  slotProps?: {\n    input?: Partial<InputHTMLAttributes<HTMLInputElement> & DataAttributes>;\n    inputWrapper?: Partial<BoxProps & DataAttributes>;\n    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;\n    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;\n  };\n}\n\ntype InputChangeEvent = ChangeEvent<HTMLInputElement>;\n\ntype HelpTextContentProps = Pick<InputProps, 'helpText' | 'helperTextIcon'> &\n  BoxProps & {\n    size?: InputProps['size'];\n    isFilled?: boolean;\n  };\n\n// eslint-disable-next-line react/display-name\nconst HelpTextContent = memo(function HelpTextContentOriginal({\n  helpText,\n  helperTextIcon,\n  spacingStart,\n  spacingTop,\n  size,\n  isFilled,\n  ...rest\n}: HelpTextContentProps) {\n  if (!helpText) {\n    return null;\n  }\n\n  return (\n    <Box spacingTop={spacingTop} spacingStart={spacingStart} {...rest}>\n      <InputHelpTextInternal startIcon={helperTextIcon} size={size} isFilled={isFilled}>\n        {isFunction(helpText) ? helpText() : helpText}\n      </InputHelpTextInternal>\n    </Box>\n  );\n});\n\ninterface StartIconProps {\n  icon: InputProps['startIcon'];\n  className?: string;\n  iconProps?: Partial<UniversalIconProps>;\n}\n\n// eslint-disable-next-line react/display-name\nconst StartIcon = memo(function StartIcon({ icon, className, iconProps }: StartIconProps) {\n  if (!icon) {\n    return null;\n  }\n\n  return (\n    <IconSlot icon={icon} iconProps={{ variant: 'outline', ...iconProps }} className={className} />\n  );\n});\n\ninterface EndIconProps {\n  icon: InputProps['endIcon'];\n  className?: string;\n  iconProps?: Partial<UniversalIconProps>;\n}\n\n// eslint-disable-next-line react/display-name\nconst EndIcon = memo(function EndIcon({ icon, className, iconProps }: EndIconProps) {\n  if (!icon) {\n    return null;\n  }\n\n  return (\n    <IconSlot\n      icon={icon}\n      iconProps={{\n        variant: 'outline',\n        ...iconProps,\n      }}\n      className={className}\n    />\n  );\n});\n\n/**\n * **📦 An input that allows users to enter text and collect data.**\n *\n * @componentType Client component\n *\n * @description\n * 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.\n *\n * @see\n * Check out the {@link https://uds.build/docs/components/input Input Docs} for more info\n *\n * @usage\n * - Forms: For collecting data like names, emails, passwords, etc. (e.g., sign-up, login, or contact forms).\n * - Search Bars: Allowing users to enter search queries to find content.\n * - Filters/Settings: When users need to specify preferences, like selecting a date or adjusting a number value.\n * - Feedback/Comments: Letting users leave reviews, comments, or feedback.\n *\n * @example\n * ```tsx\n * 'use client';\n * import { Input } from \"@yahoo/uds\";\n *\n * <Input label=\"Name\" placeholder=\"Enter your name\" required />\n *```\n *\n * @related [Checkbox](https://uds.build/docs/components/checkbox), [Radio](https://uds.build/docs/components/radio).\n **/\nconst Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  {\n    id,\n    label,\n    type = 'text',\n    size = 'md',\n    startIcon,\n    endIcon,\n    helpText,\n    helperTextIcon,\n    hasError,\n    width: containerWidth = 'full',\n    defaultValue,\n    required,\n    readOnly,\n    disabled,\n    reduceMotion: forceReduceMotion,\n    onChange,\n    slotProps,\n    className, // extract it from otherProps\n    ...otherProps\n  }: InputProps,\n  forwardedRef,\n) {\n  const generatedId = useId();\n  const uid = id ?? `uds-input-${generatedId}`;\n  const helpTextId = `uds-input-${uid}-help-text`;\n\n  const { className: inputClassName, ...inputProps } = slotProps?.input ?? {};\n  const { className: inputWrapperClassName, ...inputWrapperProps } = slotProps?.inputWrapper ?? {};\n\n  const ref = useRef<HTMLInputElement>(null);\n  useImperativeHandle(forwardedRef, () => ref.current as HTMLInputElement);\n\n  const [value, setValue] = useState(defaultValue ?? '');\n\n  const handleChange = useCallback(\n    (e: InputChangeEvent) => {\n      setValue(e.target.value);\n      onChange?.(e);\n    },\n    [onChange],\n  );\n\n  // Motion\n  const prefersReducedMotion = useReducedMotion();\n  const layoutVariant: MotionVariant = prefersReducedMotion ? 'smooth' : 'bouncy';\n  const reduceMotion = forceReduceMotion ? 'always' : 'user';\n\n  // Internal \"states\".\n  const isInteractive = !readOnly && !disabled;\n\n  const classNames = {\n    root: getStyles({\n      inputSizeRoot: size,\n      inputVariantRoot: 'default',\n      inputVariantValueRoot: !value ? 'empty' : 'filled',\n      className: cx([className, disabled ? 'opacity-50' : '']),\n    }),\n\n    inputWrapper: cx(\n      getStyles({\n        inputSizeInputWrapper: size,\n        inputVariantInputWrapper: 'default',\n        inputVariantValueInputWrapper: !value ? 'empty' : 'filled',\n      }),\n      'min-w-[200px]',\n      inputWrapperClassName,\n    ),\n\n    input: getStyles({\n      inputSizeInput: size,\n      inputVariantInput: 'default',\n      inputVariantValueInput: !value ? 'empty' : 'filled',\n      inputVariantInputPlaceholder: 'default',\n      inputVariantValueInputPlaceholder: !value ? 'empty' : 'filled',\n\n      className: cx(\n        'grow',\n        'uds-hit-target', // Minimum hit target of 44px\n        'bg-clip-text', // Remove auto-fill background color\n        'focus:outline-none',\n        // Readonly & disabled styles.\n        isInteractive ? 'cursor-text' : 'cursor-not-allowed',\n        // User overrides\n        inputClassName,\n      ),\n    }),\n    label: cx(\n      getStyles({\n        inputSizeLabel: size,\n        inputVariantLabel: 'default',\n        inputVariantValueLabel: !value ? 'empty' : 'filled',\n      }),\n    ),\n    labelRequired: getStyles({\n      inputVariantLabelRequired: 'default',\n      inputVariantValueLabelRequired: !value ? 'empty' : 'filled',\n    }),\n    startIcon: getStyles({\n      inputSizeStartIcon: size,\n      inputVariantStartIcon: 'default',\n      inputVariantValueStartIcon: !value ? 'empty' : 'filled',\n    }),\n    endIcon: getStyles({\n      inputSizeEndIcon: size,\n      inputVariantEndIcon: 'default',\n      inputVariantValueEndIcon: !value ? 'empty' : 'filled',\n    }),\n  };\n\n  return (\n    <VStack width={containerWidth} className={classNames.root}>\n      {label && (\n        <Box spacingBottom=\"2\" columnGap=\"0.5\" alignItems=\"flex-end\" className={classNames.label}>\n          <label htmlFor={uid}>{isFunction(label) ? label() : label}</label>\n          {required && <span className={classNames.labelRequired}>*</span>}\n        </Box>\n      )}\n\n      <Box\n        position=\"relative\"\n        alignItems=\"center\"\n        {...inputWrapperProps}\n        className={classNames.inputWrapper}\n      >\n        <StartIcon\n          icon={startIcon}\n          className={classNames.startIcon}\n          iconProps={slotProps?.startIcon}\n        />\n\n        <input\n          ref={ref}\n          id={uid}\n          type={type}\n          value={value}\n          required={required}\n          readOnly={readOnly}\n          disabled={disabled}\n          aria-describedby={helpTextId}\n          aria-invalid={hasError}\n          onChange={handleChange}\n          className={classNames.input}\n          {...otherProps}\n          {...inputProps}\n        />\n\n        {/* Do not render the root element if endIcon is not present.\n        https://ouryahoo.atlassian.net/browse/UD-1447 */}\n        {endIcon && (\n          <HStack alignItems=\"center\" gap=\"1\">\n            <EndIcon icon={endIcon} className={classNames.endIcon} iconProps={slotProps?.endIcon} />\n          </HStack>\n        )}\n      </Box>\n\n      <AnimateHeightChange reduceMotion={reduceMotion} layoutVariant={layoutVariant}>\n        <HelpTextContent\n          id={helpTextId}\n          helpText={helpText}\n          spacingTop=\"2\"\n          size={size}\n          isFilled={!!value}\n          helperTextIcon={helperTextIcon}\n        />\n      </AnimateHeightChange>\n    </VStack>\n  );\n});\n\n// Need to re-set this because of the forwardRef wrapper\nInput.displayName = 'Input';\n\nexport { Input, type InputProps };\n"],"mappings":"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"}

package/dist/components/client/Input/InputHelpText.cjs

@@ -0,0 +1,55 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_styles_styler = require('../../../styles/styler.cjs');
+const require_components_Box = require('../../Box.cjs');
+const require_components_client_Input_InputHelpTextInternal = require('./InputHelpTextInternal.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/client/Input/InputHelpText.tsx
+/**
+* **📦 A component that displays helper text for input fields.**
+*
+* @componentType Client component
+*
+* @description
+* A component that displays helper text for input fields.
+*
+* @see
+* Check out the {@link https://uds.build/docs/components/input Input Docs} for more info
+*
+* @usage
+* - Help text that isn't tied to a specific Input.
+*
+* @example
+* ```tsx
+* 'use client';
+* import { InputHelpText } from "@yahoo/uds";
+*
+* <InputHelpText>
+*   This is some helper text for the input field.
+* </InputHelpText>
+*```
+*
+* @related [Input](https://uds.build/docs/components/input).
+**/
+const InputHelpText = ({ size = "md", isFilled,...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+		asChild: true,
+		spacingTop: "2",
+		className: { root: require_styles_styler.getStyles({
+			inputSizeRoot: size,
+			inputVariantRoot: "default",
+			inputVariantValueRoot: !isFilled ? "empty" : "filled"
+		}) }.root,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Input_InputHelpTextInternal.InputHelpTextInternal, {
+			size,
+			isFilled,
+			...props
+		})
+	});
+};
+InputHelpText.displayName = "InputHelpText";
+
+//#endregion
+exports.InputHelpText = InputHelpText;