@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/inputs/TextAreaInput.js

@@ -1,219 +1,313 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import { getCssSizeValue } from "../utils/linaria.js";
-import Text, { TextSize, TextVariant } from "../text/Text.js";
-import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
-import TextShimmer from "../text/TextShimmer.js";
-import { InputLabel, InputSize, InputVariant, getInputBorderColor, getInputFontSize, getInputLineHeight, getInputPadding, getInputPaddingValue, getInputSurfaceColor } from "./Input.js";
+import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
+import Skeleton, { SkeletonSize } from "../feedback/Skeleton.js";
+import { FontFamily } from "../theme/enums.js";
+import { useControlledState } from "../hooks/useControlledState.js";
+import { useDevWarning } from "./internal/devWarn.js";
+import { useFieldWiring } from "./internal/fieldWiring.js";
+import Field, { FieldSize } from "./Field.js";
+import { rootStyle, useOwnField } from "./internal/ownField.js";
 /* empty css                        */
 import { styled } from "@linaria/react";
-import { forwardRef, useState } from "react";
+import { forwardRef, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { useMergeRefs } from "@floating-ui/react";
 //#region src/inputs/TextAreaInput.tsx
 /**
-* Row count drives the height, so the box is measured rather than stepped:
-* `lines` line-boxes plus the inset above and below. Shared by the field and by
-* the loading placeholder that has to match it exactly.
+* The multi-line text field: descriptions, notes, comments, pasted JSON credentials. It holds a
+* string with `value` / `defaultValue` / `onChange` and draws the same frame as the single-line
+* inputs (surface `variant`, hairline, rung, focus, error, disabled and read-only looks), so a form
+* of TextInputs and a TextAreaInput reads as one set. Height is in rows: `minRows` sets the resting
+* height, `isAutoGrow` follows the content up to `maxRows`, and `isResizable` lets the user drag it
+* taller. `isLoading` keeps the field in place and covers its text with a two-line `Skeleton`.
+*
+* A standalone TextAreaInput with `label` or `error` renders a `Field` around itself; inside a
+* Field it reads the Field's wiring with `useField()`. It never validates: a visible counter is
+* `Field`'s `maxLength` + `count`, and the message is the app's `error`. Replaces 1.x
+* `TextAreaInput` (`InputSize` / `InputVariant` → `TextAreaInputSize` / `TextAreaInputVariant`,
+* `lines` → `minRows`, `required` / `disabled` → `isRequired` / `isDisabled`; `min` / `max`,
+* `width`, `height`, `fillHeight`, `noBorder`, `noPadding` and `labelTooltip` are gone).
 */
-function getTextAreaMinHeight(theme, size, lines, height, noPadding) {
-	if (height) return "auto";
-	const lineHeight = Number(getInputLineHeight(theme, size).replace("px", ""));
-	if (noPadding) return `${lineHeight * lines}px`;
-	return `${lineHeight * lines + 2 * getInputPaddingValue(size)}px`;
-}
-var _exp = () => ({ $lines, $size, theme, $height, $noPadding }) => getTextAreaMinHeight(theme, $size, $lines, $height, $noPadding);
-var _exp2 = () => ({ $fillWidth, $width }) => {
-	if ($fillWidth) return "100%";
-	if ($width) return getCssSizeValue($width, "0");
-	return "auto";
-};
-var _exp3 = () => ({ $height, $fillHeight }) => {
-	if ($fillHeight) return "100%";
-	if ($height) return getCssSizeValue($height);
-	return "auto";
-};
-var _exp4 = () => ({ $fillHeight }) => $fillHeight ? "1" : "none";
-var _exp5 = () => ({ theme, $variant }) => getInputSurfaceColor(theme, $variant);
-var _exp6 = () => ({ theme, $variant, $error, $noBorder }) => {
-	if ($noBorder) return "transparent";
-	if ($error) return theme.color.border.error;
-	return getInputBorderColor(theme, $variant);
-};
-var _exp7 = () => ({ theme }) => theme.color.text.primary;
-var _exp8 = () => ({ theme, $size }) => getInputFontSize(theme, $size);
-var _exp9 = () => ({ theme, $size }) => getInputLineHeight(theme, $size);
-var _exp0 = () => ({ theme }) => theme.font.sans.weight.regular;
-var _exp1 = () => ({ theme }) => theme.font.sans.family;
-var _exp10 = () => ({ $size, $noPadding }) => $noPadding ? "0" : getInputPadding($size);
-var _exp11 = () => ({ theme, $variant }) => getInputBorderColor(theme, $variant);
-var _exp12 = () => ({ theme }) => theme.color.border.selected;
-var _exp13 = () => ({ theme }) => theme.color.text.disabled;
-var StyledTextArea = withTheme(/*#__PURE__*/ styled("textarea")({
-	name: "StyledTextArea",
-	class: "s1jhbbpd",
-	propsAsIs: false,
-	vars: {
-		"s1jhbbpd-0": [_exp()],
-		"s1jhbbpd-1": [_exp2()],
-		"s1jhbbpd-2": [_exp3()],
-		"s1jhbbpd-3": [_exp4()],
-		"s1jhbbpd-4": [_exp5()],
-		"s1jhbbpd-5": [_exp6()],
-		"s1jhbbpd-6": [_exp7()],
-		"s1jhbbpd-7": [_exp8()],
-		"s1jhbbpd-8": [_exp9()],
-		"s1jhbbpd-9": [_exp0()],
-		"s1jhbbpd-10": [_exp1()],
-		"s1jhbbpd-11": [_exp10()],
-		"s1jhbbpd-12": [_exp11()],
-		"s1jhbbpd-13": [_exp12()],
-		"s1jhbbpd-14": [_exp13()]
-	}
-}));
-var _exp14 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
-var _exp15 = () => ({ $fillHeight }) => $fillHeight ? "100%" : "auto";
-var _exp16 = () => ({ $fillHeight }) => $fillHeight ? "flex: 1;" : "";
-var TextAreaWrapper = /*#__PURE__*/ styled("div")({
-	name: "TextAreaWrapper",
-	class: "tu0hnok",
-	propsAsIs: false,
-	vars: {
-		"tu0hnok-0": [_exp14()],
-		"tu0hnok-1": [_exp15()],
-		"tu0hnok-2": [_exp16()]
-	}
+/** Canonical rungs; TextAreaInput supports all five. The rung sets the text step, the padding and the height of one row. */
+var TextAreaInputSize = /* @__PURE__ */ function(TextAreaInputSize) {
+	/** Caption text, 12px rows, 20px one-row field. */
+	TextAreaInputSize["X_SMALL"] = "X_SMALL";
+	/** body_sm text, 16px rows, 24px one-row field. */
+	TextAreaInputSize["SMALL"] = "SMALL";
+	/** body_md text, 16px rows, 32px one-row field. The default. */
+	TextAreaInputSize["MEDIUM"] = "MEDIUM";
+	/** body_lg text, 20px rows, 36px one-row field. */
+	TextAreaInputSize["LARGE"] = "LARGE";
+	/** body_lg text, 20px rows, 40px one-row field. */
+	TextAreaInputSize["X_LARGE"] = "X_LARGE";
+	return TextAreaInputSize;
+}({});
+/** Resting fill of the field (Constitution V-A surface set; the 1.x `InputVariant` members, unchanged). */
+var TextAreaInputVariant = /* @__PURE__ */ function(TextAreaInputVariant) {
+	/** `background.base` fill. */
+	TextAreaInputVariant["BASE"] = "BASE";
+	/** `background.primary` fill. The default. */
+	TextAreaInputVariant["PRIMARY"] = "PRIMARY";
+	/** `background.secondary` fill. */
+	TextAreaInputVariant["SECONDARY"] = "SECONDARY";
+	/** `background.tertiary` fill. */
+	TextAreaInputVariant["TERTIARY"] = "TERTIARY";
+	return TextAreaInputVariant;
+}({});
+/** One row-height calc: `rows × line height + 2 × inset` (border-box, so it is the outer height). */
+/** Positions the measuring mirror and the loading overlay; the textarea draws the frame. */
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-TextAreaInput-r1jhbbpd",
+	propsAsIs: false
 });
-var _exp17 = () => ({ $lines, $size, theme, $height, $noPadding }) => getTextAreaMinHeight(theme, $size, $lines, $height, $noPadding);
-var _exp18 = () => ({ $fillWidth, $width }) => {
-	if ($fillWidth) return "100%";
-	if ($width) return getCssSizeValue($width, "0");
-	return "auto";
+/**
+* The field itself: the bordered element, so focus (`FIELD_FOCUS` on any focus: `border.focused` at 1px inside) and
+* the resize handle sit on the frame.
+*/
+var Control = /*#__PURE__*/ styled("textarea")({
+	name: "Control",
+	class: "gx-TextAreaInput-Control-cu0hnok",
+	propsAsIs: false
+});
+/** The hidden measuring copy: same border and padding as `Control`, zero height, never seen or read. */
+var Mirror = /*#__PURE__*/ styled("textarea")({
+	name: "Mirror",
+	class: "gx-TextAreaInput-Mirror-m48iv0n",
+	propsAsIs: false
+});
+/** Covers the first rows of text while `isLoading`. */
+var LoadingOverlay = /*#__PURE__*/ styled("span")({
+	name: "LoadingOverlay",
+	class: "gx-TextAreaInput-LoadingOverlay-l18cdt5k",
+	propsAsIs: false
+});
+/** Line height, block inset and inline padding per rung; one row = line + 2 × inset = the rung (Constitution III-A.4). */
+var TEXT_AREA_INPUT_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-TextAreaInput-X_SMALL-xl6hrmj",
+	["SMALL"]: "gx-TextAreaInput-SMALL-sayj2b7",
+	["MEDIUM"]: "gx-TextAreaInput-MEDIUM-mxy7i6q",
+	["LARGE"]: "gx-TextAreaInput-LARGE-l11gu90v",
+	["X_LARGE"]: "gx-TextAreaInput-X_LARGE-x53s0j8"
 };
-var _exp19 = () => ({ $height, $fillHeight }) => {
-	if ($fillHeight) return "100%";
-	if ($height) return getCssSizeValue($height);
-	return "auto";
+/** The value's type per family and rung (Input's family map without its fixed height; mono shares the line heights). */
+var TEXT_AREA_INPUT_FAMILY_TO_SIZE_CSS_MAP = {
+	[FontFamily.SANS]: {
+		["X_SMALL"]: "gx-TextAreaInput-X_SMALL-xcocpoc",
+		["SMALL"]: "gx-TextAreaInput-SMALL-smg30fv",
+		["MEDIUM"]: "gx-TextAreaInput-MEDIUM-m17yu174",
+		["LARGE"]: "gx-TextAreaInput-LARGE-l1lhy1ch",
+		["X_LARGE"]: "gx-TextAreaInput-X_LARGE-xt05y9q"
+	},
+	[FontFamily.MONO]: {
+		["X_SMALL"]: "gx-TextAreaInput-X_SMALL-x4gku9c",
+		["SMALL"]: "gx-TextAreaInput-SMALL-s1havzor",
+		["MEDIUM"]: "gx-TextAreaInput-MEDIUM-m1ie5pnb",
+		["LARGE"]: "gx-TextAreaInput-LARGE-l1bu2eyp",
+		["X_LARGE"]: "gx-TextAreaInput-X_LARGE-xx79smc"
+	}
 };
-var _exp20 = () => ({ $fillHeight }) => $fillHeight ? "1" : "none";
-var _exp21 = () => ({ theme, $variant }) => getInputSurfaceColor(theme, $variant);
-var _exp22 = () => ({ theme, $variant, $noBorder }) => {
-	if ($noBorder) return "transparent";
-	return getInputBorderColor(theme, $variant);
+/** Rest look per variant: fill and hairline color (the shared `FIELD_SURFACE_TO_REST_MAP` fragments). */
+var TEXT_AREA_INPUT_VARIANT_TO_CSS_MAP = {
+	["BASE"]: "gx-TextAreaInput-BASE-bb0gkbj",
+	["PRIMARY"]: "gx-TextAreaInput-PRIMARY-p1ow5tvt",
+	["SECONDARY"]: "gx-TextAreaInput-SECONDARY-s1iv3xcr",
+	["TERTIARY"]: "gx-TextAreaInput-TERTIARY-t1bpq8oq"
 };
-var _exp23 = () => ({ $size, $noPadding }) => $noPadding ? "0" : getInputPadding($size);
-var LoadingContainer = withTheme(/*#__PURE__*/ styled("div")({
-	name: "LoadingContainer",
-	class: "l48iv0n",
-	propsAsIs: false,
-	vars: {
-		"l48iv0n-0": [_exp17()],
-		"l48iv0n-1": [_exp18()],
-		"l48iv0n-2": [_exp19()],
-		"l48iv0n-3": [_exp20()],
-		"l48iv0n-4": [_exp21()],
-		"l48iv0n-5": [_exp22()],
-		"l48iv0n-6": [_exp23()]
-	}
-}));
-var DEFAULT_STATE = { error: void 0 };
-var TEXTAREA_SIZE_TO_SHIMMER_HEIGHT_MAP = {
-	[InputSize.SMALL]: 12,
-	[InputSize.MEDIUM]: 14,
-	[InputSize.LARGE]: 16
+/** `isGhost`: no fill and no hairline at rest. Declared after the variant map, which it replaces. */
+var GHOST_CSS = "gx-TextAreaInput-GHOST_CSS-gotwbad";
+/**
+* Hover on an editable field (2026-10-03 field-frame resolution): `border.hovered`. Not while
+* focused, so focus keeps `border.focused` on every variant.
+*/
+var TEXT_AREA_INPUT_VARIANT_TO_HOVER_CSS_MAP = {
+	["BASE"]: "gx-TextAreaInput-BASE-b9n23p6",
+	["PRIMARY"]: "gx-TextAreaInput-PRIMARY-p190b34w",
+	["SECONDARY"]: "gx-TextAreaInput-SECONDARY-s1qhok5h",
+	["TERTIARY"]: "gx-TextAreaInput-TERTIARY-tlw3g4y"
 };
+/** Hover on an editable ghost field: the frame appears, `border.hovered` with no fill. Not while focused. */
+var GHOST_HOVER_CSS = "gx-TextAreaInput-GHOST_HOVER_CSS-gbqdkqd";
+/** Error border at rest, on hover and with focus (the 1px inset focus line is red too). */
+var ERROR_CSS = "gx-TextAreaInput-ERROR_CSS-ed54239";
 /**
-* A multi-line text field. Not resizable by the user — size it with `lines`,
-* `height`, or `fillHeight`.
-*
-* Note this one takes `required`/`disabled` rather than the `isRequired`/
-* `isDisabled` the other inputs use.
+* Disabled: the variant's resting fill and hairline are kept (`border.disabled` is not used on
+* frames); the field reads as disabled through `text.disabled` and the cursor.
 */
-var TextAreaInput = forwardRef(({ variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, lines = 3, value, min, max, placeholder, label, labelTooltip, error, required, disabled, autoFocus, onChange, onKeyDown, onBlur, onFocus, width, height, fillWidth, fillHeight, noBorder, noPadding, isLoading }, ref) => {
-	const [state, setState] = useState(DEFAULT_STATE);
-	const handleFocus = (e) => {
-		setState({
-			...state,
-			error: void 0
-		});
-		onFocus?.(e);
+var DISABLED_CSS = "gx-TextAreaInput-DISABLED_CSS-dydj1qz";
+/** Loading: the rest look is kept (waiting, not off); the text and placeholder are hidden under the skeleton. */
+var LOADING_CSS = "gx-TextAreaInput-LOADING_CSS-lnj2bsw";
+/** Caps auto-grow and the resize drag at `maxRows`; past it the field scrolls. */
+var MAX_ROWS_CSS = "gx-TextAreaInput-MAX_ROWS_CSS-m6uahg3";
+/** The native vertical resize handle, bounded by `min-height` / `max-height`. */
+var RESIZABLE_CSS = "gx-TextAreaInput-RESIZABLE_CSS-rq3dee4";
+/** Stretch the textarea to its root's width. */
+var FILL_WIDTH_CSS = "gx-TextAreaInput-FILL_WIDTH_CSS-f1xdzkm1";
+/** Stretch the root (and a `Field` wrapper) to the parent's width. */
+var ROOT_FILL_WIDTH_CSS = "gx-TextAreaInput-ROOT_FILL_WIDTH_CSS-rtpol1z";
+/** The `Field` a TextAreaInput renders for its own `label` / `error` uses the same rung. */
+var TEXT_AREA_INPUT_SIZE_TO_FIELD_SIZE_MAP = {
+	["X_SMALL"]: FieldSize.X_SMALL,
+	["SMALL"]: FieldSize.SMALL,
+	["MEDIUM"]: FieldSize.MEDIUM,
+	["LARGE"]: FieldSize.LARGE,
+	["X_LARGE"]: FieldSize.X_LARGE
+};
+/** The loading skeleton's lines are the rung's text line height (skeleton.md host contract). */
+var TEXT_AREA_INPUT_SIZE_TO_SKELETON_SIZE_MAP = {
+	["X_SMALL"]: SkeletonSize.X_SMALL,
+	["SMALL"]: SkeletonSize.SMALL,
+	["MEDIUM"]: SkeletonSize.MEDIUM,
+	["LARGE"]: SkeletonSize.LARGE,
+	["X_LARGE"]: SkeletonSize.X_LARGE
+};
+/** A row count floored to a whole number, at least 1 (a non-finite value gives 1). */
+function toRows(rows) {
+	return Number.isFinite(rows) ? Math.max(1, Math.floor(rows)) : 1;
+}
+/** `Root`, the textarea, the mirror and the loading overlay, wired to the nearest Field. */
+function TextAreaFrame({ textAreaProps, forwardedRef, isRoot }) {
+	const { value, defaultValue = "", onChange, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, placeholder, error, isError = false, minRows = 3, maxRows, isAutoGrow = false, isResizable = false, isLoading = false, isDisabled = false, isReadOnly = false, isRequired = false, family = FontFamily.SANS, fillWidth = false, ariaLabel, autoComplete = "off", id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = textAreaProps;
+	const { controlId: textAreaId, describedBy, isInvalid, isRequired: isRequiredState, hasName } = useFieldWiring({
+		id,
+		ariaLabel,
+		ariaLabelAttribute: rest["aria-label"],
+		ariaLabelledBy: rest["aria-labelledby"],
+		ariaDescribedBy,
+		error,
+		isError,
+		isRequired
+	});
+	const rootRef = useRef(null);
+	const innerRef = useRef(null);
+	const mirrorRef = useRef(null);
+	const mergedRef = useMergeRefs([innerRef, forwardedRef]);
+	const [currentValue, setValue] = useControlledState({
+		value,
+		defaultValue,
+		onChange
+	});
+	const [measuredHeight, setMeasuredHeight] = useState(void 0);
+	const rows = toRows(minRows);
+	const resolvedMaxRows = maxRows === void 0 ? void 0 : Math.max(toRows(maxRows), rows);
+	const isEditable = !isDisabled && !isReadOnly && !isLoading;
+	const typeClassName = TEXT_AREA_INPUT_FAMILY_TO_SIZE_CSS_MAP[family][size];
+	const mirrorText = currentValue === "" ? placeholder ?? "" : currentValue;
+	useDevWarning(!hasName, "[@galaxy-io/dls] TextAreaInput has no accessible name. Pass `label`, wrap it in a labelled `Field`, or set `ariaLabel`. `placeholder` is not a name.");
+	useDevWarning(isAutoGrow && isResizable, "[@galaxy-io/dls] TextAreaInput ignores `isResizable` with `isAutoGrow`: the height follows the content.");
+	/** Reads the content height from the mirror: its scroll height plus the control's borders. */
+	const measure = () => {
+		const control = innerRef.current;
+		const mirror = mirrorRef.current;
+		if (control === null || mirror === null) return;
+		const computed = window.getComputedStyle(control);
+		const next = mirror.scrollHeight + Number.parseFloat(computed.borderTopWidth) + Number.parseFloat(computed.borderBottomWidth);
+		setMeasuredHeight((previous) => previous === next ? previous : next);
 	};
-	const handleBlur = (e) => {
-		if (value?.length && min && value.length < min) setState({
-			...state,
-			error: `Must be at least ${min} characters`
+	const measureRef = useRef(measure);
+	measureRef.current = measure;
+	useIsomorphicLayoutEffect(() => {
+		const mirror = mirrorRef.current;
+		if (!isAutoGrow || mirror === null) return;
+		if (mirror.value !== mirrorText || !mirror.classList.contains(typeClassName)) return;
+		measureRef.current();
+	}, [
+		isAutoGrow,
+		mirrorText,
+		typeClassName
+	]);
+	useEffect(() => {
+		const root = rootRef.current;
+		if (!isAutoGrow || root === null) return;
+		let isActive = true;
+		let lastWidth = root.getBoundingClientRect().width;
+		const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver((entries) => {
+			const width = entries[0]?.contentRect.width;
+			if (width === void 0 || width === lastWidth) return;
+			lastWidth = width;
+			measureRef.current();
 		});
-		if (value?.length && max && value.length > max) setState({
-			...state,
-			error: `Must be less than ${max} characters`
+		observer?.observe(root);
+		document.fonts?.ready.then(() => {
+			if (isActive) measureRef.current();
 		});
-		onBlur?.(e);
-	};
-	const handleChange = (e) => {
-		onChange(e.target.value);
-	};
-	return /* @__PURE__ */ jsx(TextAreaWrapper, {
-		$fillHeight: fillHeight,
-		$fillWidth: fillWidth,
-		children: /* @__PURE__ */ jsxs(FlexWrapper, {
-			direction: FlexDirection.COLUMN,
-			gap: 4,
-			fillWidth,
-			fillHeight,
-			children: [
-				label && /* @__PURE__ */ jsx(InputLabel, {
-					label,
-					labelTooltip,
-					isRequired: required
-				}),
-				isLoading ? /* @__PURE__ */ jsxs(LoadingContainer, {
-					$variant: variant,
-					$size: size,
-					$lines: lines,
-					$width: width,
-					$height: height,
-					$fillWidth: fillWidth,
-					$fillHeight: fillHeight,
-					$noBorder: noBorder,
-					$noPadding: noPadding,
-					children: [/* @__PURE__ */ jsx(TextShimmer, {
-						height: TEXTAREA_SIZE_TO_SHIMMER_HEIGHT_MAP[size],
-						width: "100%"
-					}), /* @__PURE__ */ jsx(TextShimmer, {
-						height: TEXTAREA_SIZE_TO_SHIMMER_HEIGHT_MAP[size],
-						width: "80%"
-					})]
-				}) : /* @__PURE__ */ jsx(StyledTextArea, {
-					ref,
-					placeholder,
-					value: value ?? "",
-					required,
-					disabled,
-					onChange: handleChange,
-					autoComplete: "off",
-					autoCorrect: "off",
-					autoFocus,
-					onFocus: handleFocus,
-					onBlur: handleBlur,
-					onKeyDown,
-					$variant: variant,
-					$size: size,
-					$width: width,
-					$height: height,
-					$fillWidth: fillWidth,
-					$fillHeight: fillHeight,
-					$error: !!(state.error || error),
-					$lines: lines,
-					$noBorder: noBorder,
-					$noPadding: noPadding
-				}),
-				(state.error || error) && /* @__PURE__ */ jsx(Text, {
-					variant: TextVariant.ERROR,
-					size: TextSize.BODY_SM,
-					children: state.error || error
-				})
-			]
+		return () => {
+			isActive = false;
+			observer?.disconnect();
+		};
+	}, [isAutoGrow]);
+	const handleChange = (event) => setValue(event.target.value);
+	const controlVariables = { "--gx-textarea-min-rows": String(rows) };
+	if (resolvedMaxRows !== void 0) controlVariables["--gx-textarea-max-rows"] = String(resolvedMaxRows);
+	if (isAutoGrow && measuredHeight !== void 0) controlVariables["--gx-textarea-height"] = `${measuredHeight}px`;
+	return /* @__PURE__ */ jsxs(Root, {
+		ref: rootRef,
+		className: cx(TEXT_AREA_INPUT_SIZE_TO_CSS_MAP[size], fillWidth && ROOT_FILL_WIDTH_CSS, isRoot ? className : void 0),
+		...rootStyle(isRoot, style),
+		children: [
+			/* @__PURE__ */ jsx(Control, {
+				ref: mergedRef,
+				id: textAreaId,
+				rows,
+				value: currentValue,
+				onChange: handleChange,
+				placeholder,
+				disabled: isDisabled || isLoading,
+				readOnly: isReadOnly,
+				autoComplete,
+				autoCorrect: "off",
+				"aria-label": ariaLabel,
+				"aria-describedby": describedBy,
+				"aria-invalid": isInvalid ? true : void 0,
+				"aria-required": isRequiredState ? true : void 0,
+				"aria-busy": isLoading ? true : void 0,
+				className: cx(typeClassName, isGhost ? GHOST_CSS : TEXT_AREA_INPUT_VARIANT_TO_CSS_MAP[variant], isEditable && !isInvalid && (isGhost ? GHOST_HOVER_CSS : TEXT_AREA_INPUT_VARIANT_TO_HOVER_CSS_MAP[variant]), isInvalid && !isDisabled && !isLoading && ERROR_CSS, isDisabled && !isLoading && DISABLED_CSS, isLoading && LOADING_CSS, resolvedMaxRows !== void 0 && MAX_ROWS_CSS, isResizable && !isAutoGrow && isEditable && RESIZABLE_CSS, fillWidth && FILL_WIDTH_CSS),
+				style: controlVariables,
+				...rest
+			}),
+			isAutoGrow && /* @__PURE__ */ jsx(Mirror, {
+				ref: mirrorRef,
+				value: mirrorText,
+				readOnly: true,
+				tabIndex: -1,
+				"aria-hidden": true,
+				className: typeClassName
+			}),
+			isLoading && /* @__PURE__ */ jsx(LoadingOverlay, { children: /* @__PURE__ */ jsx(Skeleton, {
+				lines: Math.min(2, rows),
+				size: TEXT_AREA_INPUT_SIZE_TO_SKELETON_SIZE_MAP[size]
+			}) })
+		]
+	});
+}
+/** The multi-line text field, sized in rows, with optional auto-grow and a vertical resize handle. */
+var TextAreaInput = forwardRef(function TextAreaInput(props, ref) {
+	const { label, error, isRequired = false, size = "MEDIUM", fillWidth = false, id, className, style } = props;
+	const ownField = useOwnField({
+		componentName: "TextAreaInput",
+		label,
+		error,
+		isRequired,
+		size: TEXT_AREA_INPUT_SIZE_TO_FIELD_SIZE_MAP[size],
+		id,
+		className,
+		style,
+		rootClassName: fillWidth && ROOT_FILL_WIDTH_CSS
+	});
+	if (ownField !== null) return /* @__PURE__ */ jsx(Field, {
+		...ownField,
+		children: /* @__PURE__ */ jsx(TextAreaFrame, {
+			textAreaProps: props,
+			forwardedRef: ref,
+			isRoot: false
 		})
 	});
+	return /* @__PURE__ */ jsx(TextAreaFrame, {
+		textAreaProps: props,
+		forwardedRef: ref,
+		isRoot: true
+	});
 });
 TextAreaInput.displayName = "TextAreaInput";
 //#endregion
-export { TextAreaInput as default };
+export { TextAreaInputSize, TextAreaInputVariant, TextAreaInput as default };

package/dist/inputs/TextInput.d.ts

@@ -1,15 +1,6 @@
-import { type InputProps } from "./Input";
-/**
- * Every `InputProps` field except `type` and `parse`, which are fixed to text.
- * `onFocus` is omitted because the field owns focus to clear its length error,
- * and `step` is numeric-only.
- */
-export type TextInputProps = Omit<InputProps<string>, "type" | "parse" | "onFocus" | "step">;
-/**
- * A single-line text field. The default input.
- *
- * `min`/`max` bound the *character count*, not a numeric range — the field
- * validates length on blur and shows its own error. A `error` you pass wins.
- */
+import { type InputProps } from "./Input.js";
+/** Every `Input` prop except `type`, which is fixed to `"text"`. */
+export type TextInputProps = Omit<InputProps, "type">;
+/** The default single-line text field: `Input` with `type="text"`. */
 declare const TextInput: import("react").ForwardRefExoticComponent<TextInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export default TextInput;

package/dist/inputs/TextInput.js

@@ -1,59 +1,24 @@
 import Input from "./Input.js";
-import { forwardRef, useState } from "react";
+import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/inputs/TextInput.tsx
-var DEFAULT_STATE = { error: "" };
 /**
-* A single-line text field. The default input.
+* The default single-line text field: names, hosts, titles, filters, inline renames. A thin preset
+* over `Input` with `type="text"`; every prop, look, state and accessibility rule is Input's
+* (`prefix` / `suffix`, `isClearable`, `onEnter`, `family`, the five `InputSize` rungs and the
+* surface-set `InputVariant`s, imported from `inputs/Input`).
 *
-* `min`/`max` bound the *character count*, not a numeric range — the field
-* validates length on blur and shows its own error. A `error` you pass wins.
+* TextInput never validates: the 1.x character-count checks (`min` / `max`) are gone. Validate in
+* the app and pass `error`; use the native `maxLength` for a hard cap and `<Field maxLength>` for a
+* visible counter. Passwords, search, numbers and copy-only values are PasswordInput, SearchInput,
+* NumberInput and CopyInput; multi-line text is TextAreaInput.
 */
-var TextInput = forwardRef(({ variant, size, value, min, max, placeholder, label, labelTooltip, leading, trailing, error, isError, isRequired, isDisabled, autoFocus, onChange, onKeyDown, onBlur, fillWidth, width, isMonospace }, ref) => {
-	const [state, setState] = useState(DEFAULT_STATE);
-	const handleFocus = () => {
-		setState({
-			...state,
-			error: void 0
-		});
-	};
-	const handleBlur = (e) => {
-		if (value?.length && min && value.length < min) setState({
-			...state,
-			error: `Must be at least ${min} characters`
-		});
-		if (value?.length && max && value.length > max) setState({
-			...state,
-			error: `Must be less than ${max} characters`
-		});
-		onBlur?.(e);
-	};
+/** The default single-line text field: `Input` with `type="text"`. */
+var TextInput = forwardRef(function TextInput(props, ref) {
 	return /* @__PURE__ */ jsx(Input, {
-		parse: String,
-		onChange,
-		variant,
-		size,
+		...props,
 		ref,
-		type: "text",
-		value,
-		min,
-		max,
-		placeholder,
-		label,
-		labelTooltip,
-		leading,
-		trailing,
-		autoFocus,
-		error: state.error || error,
-		isError,
-		isRequired,
-		isDisabled,
-		onKeyDown,
-		onFocus: handleFocus,
-		onBlur: handleBlur,
-		fillWidth,
-		width,
-		isMonospace
+		type: "text"
 	});
 });
 TextInput.displayName = "TextInput";