@galaxy-io/dls 1.6.1 → 2.0.1

package/dist/inputs/TagInput.js

@@ -0,0 +1,408 @@
+import VisuallyHidden from "../a11y/VisuallyHidden.js";
+import { useControlledState } from "../hooks/useControlledState.js";
+import Chip, { ChipSize, ChipVariant } from "../chips/Chip.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, 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/TagInput.tsx
+/**
+* The field for a free-form list of short strings: tags, email recipients, allowed domains, label
+* keys. The user types an entry and presses Enter or a separator (a comma by default) and the
+* entry becomes a chip; pasting a list adds every entry at once. Each chip has a × to remove it,
+* and Backspace in the empty field removes the last one. The value is the list of strings, with
+* `value` / `defaultValue` / `onChange`; the text being typed is not part of it until committed.
+* Entries are trimmed and duplicates are dropped. The field draws Input's frame and grows to new
+* lines as chips wrap.
+*
+* The app can mark entries invalid with `isTagInvalid`; TagInput shows them as error chips but
+* never decides validity itself. A standalone TagInput with `label` or `error` renders a `Field`
+* around itself; inside a Field it reads the Field's wiring with `useField()`. Replaces 1.x
+* `MultiTextInput` (`InputSize` / `InputVariant` → `TagInputSize` / `TagInputVariant`,
+* `separator` → `separators`, `width` removed).
+*
+* SSR: ids come from `useId`; nothing touches `window` or `document` at module scope or during
+* render.
+*/
+/** Canonical rungs; TagInput supports all five. One line of the field is the rung height. */
+var TagInputSize = /* @__PURE__ */ function(TagInputSize) {
+	/** 20px line, 16px chips, caption text. */
+	TagInputSize["X_SMALL"] = "X_SMALL";
+	/** 24px line, 16px chips, body_sm text. */
+	TagInputSize["SMALL"] = "SMALL";
+	/** 32px line, 20px chips, body_md text. The default. */
+	TagInputSize["MEDIUM"] = "MEDIUM";
+	/** 36px line, 24px chips, body_lg text. */
+	TagInputSize["LARGE"] = "LARGE";
+	/** 40px line, 28px chips, body_lg text. */
+	TagInputSize["X_LARGE"] = "X_LARGE";
+	return TagInputSize;
+}({});
+/** Resting fill of the field (Constitution V-A surface set; the 1.x `InputVariant` members, unchanged). */
+var TagInputVariant = /* @__PURE__ */ function(TagInputVariant) {
+	/** `background.base` fill. */
+	TagInputVariant["BASE"] = "BASE";
+	/** `background.primary` fill. The default. */
+	TagInputVariant["PRIMARY"] = "PRIMARY";
+	/** `background.secondary` fill. */
+	TagInputVariant["SECONDARY"] = "SECONDARY";
+	/** `background.tertiary` fill. */
+	TagInputVariant["TERTIARY"] = "TERTIARY";
+	return TagInputVariant;
+}({});
+/** The field's width without `fillWidth` (the SelectInput default). */
+/** The narrowest the text input gets before it wraps to a new line (the 1.x `min-width`). */
+/** Default separators: a comma. */
+var TAG_INPUT_DEFAULT_SEPARATORS = [","];
+/** A paste also splits on these, so a column copied from a spreadsheet or a file splits by line. */
+var TAG_INPUT_PASTE_SEPARATORS = [
+	"\n",
+	"\r",
+	"	"
+];
+/**
+* The visual box: the chips, then the text input. One line of chips is exactly the rung height;
+* each wrapped line adds a chip and a 4px gap. Focus is drawn here as `border.focused` on the
+* hairline plus a 1px inset (`FIELD_FOCUS`), whenever the text input has focus. The hairline is drawn by `::before`
+* over the frame's edge, in the frame's own `border-color` (which the variant, hover, focus and
+* error rules set on a zero-width border), so the height is `chip + 2 × inset` at every device
+* pixel ratio: a 0.5px border in the box would round up to 1px on 1x screens and add a pixel to
+* the line.
+*/
+var Frame = /*#__PURE__*/ styled("div")({
+	name: "Frame",
+	class: "gx-TagInput-Frame-f1wkm731",
+	propsAsIs: false
+});
+/** One tag's chip; it may shrink to the line, so a long tag truncates inside the chip. */
+var TagItem = /*#__PURE__*/ styled("span")({
+	name: "TagItem",
+	class: "gx-TagInput-TagItem-t17uxts3",
+	propsAsIs: false
+});
+/** The text being typed: no chrome of its own; it takes the rest of the line, at least 80px. */
+var Draft = /*#__PURE__*/ styled("input")({
+	name: "Draft",
+	class: "gx-TagInput-Draft-d1nfwt42",
+	propsAsIs: false
+});
+/** The polite live region for added, removed and duplicate tags (`VisuallyHidden` takes no `role`). */
+var StatusRegion = /*#__PURE__*/ styled("span")({
+	name: "StatusRegion",
+	class: "gx-TagInput-StatusRegion-s1c7eovr",
+	propsAsIs: false
+});
+/** While there are no tags, the text starts where a TextInput's text does at the same rung. */
+var EMPTY_DRAFT_CSS = "gx-TagInput-EMPTY_DRAFT_CSS-eq5t364";
+/**
+* Line height, chip height, inset and text offset per rung, plus the text input's type. One line
+* is `chip + 2 × inset` in border-box: 16 + 2×2, 16 + 2×4, 20 + 2×6, 24 + 2×6, 28 + 2×6.
+*/
+var TAG_INPUT_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-TagInput-X_SMALL-x8akds0",
+	["SMALL"]: "gx-TagInput-SMALL-sq012y8",
+	["MEDIUM"]: "gx-TagInput-MEDIUM-m1fsqjlf",
+	["LARGE"]: "gx-TagInput-LARGE-l10yf1a",
+	["X_LARGE"]: "gx-TagInput-X_LARGE-xxkesin"
+};
+/** Rest look per variant: fill and hairline color (the shared `FIELD_SURFACE_TO_REST_MAP` fragments). */
+var TAG_INPUT_VARIANT_TO_CSS_MAP = {
+	["BASE"]: "gx-TagInput-BASE-b1mm0zeo",
+	["PRIMARY"]: "gx-TagInput-PRIMARY-p1cnbmmu",
+	["SECONDARY"]: "gx-TagInput-SECONDARY-s8g5ipk",
+	["TERTIARY"]: "gx-TagInput-TERTIARY-t1sqgv1g"
+};
+/** `isGhost`: no fill and no hairline at rest. Declared after the variant map, which it replaces. */
+var GHOST_CSS = "gx-TagInput-GHOST_CSS-g1bbep7t";
+/**
+* Hover on an editable field (2026-10-03 field-frame resolution): `border.hovered`. Focus keeps
+* `border.focused`.
+*/
+var TAG_INPUT_VARIANT_TO_HOVER_CSS_MAP = {
+	["BASE"]: "gx-TagInput-BASE-bu44p55",
+	["PRIMARY"]: "gx-TagInput-PRIMARY-p15utnv6",
+	["SECONDARY"]: "gx-TagInput-SECONDARY-s1dgogmr",
+	["TERTIARY"]: "gx-TagInput-TERTIARY-t1chy3wt"
+};
+/** Hover on an editable ghost field: the frame appears, `border.hovered` with no fill. */
+var GHOST_HOVER_CSS = "gx-TagInput-GHOST_HOVER_CSS-gvbd3pq";
+/** Error border at rest, on hover and with focus (the 1px inset focus line is red too). */
+var ERROR_CSS = "gx-TagInput-ERROR_CSS-e1xtw92t";
+/**
+* Disabled: the variant's resting fill and hairline are kept (`border.disabled` is not used on
+* frames); the field reads as disabled through the chips, `text.disabled` and the cursor.
+*/
+var DISABLED_CSS = "gx-TagInput-DISABLED_CSS-dnya61k";
+/** Stretch to the parent's width (frame, and the `Field` wrapper when there is one). */
+var FILL_WIDTH_CSS = "gx-TagInput-FILL_WIDTH_CSS-frlh1fb";
+/** Chip rung per field rung (MultiSelectInput's): 2 to 6px inside the line. */
+var TAG_INPUT_SIZE_TO_CHIP_SIZE_MAP = {
+	["X_SMALL"]: ChipSize.X_SMALL,
+	["SMALL"]: ChipSize.X_SMALL,
+	["MEDIUM"]: ChipSize.SMALL,
+	["LARGE"]: ChipSize.MEDIUM,
+	["X_LARGE"]: ChipSize.LARGE
+};
+/** A chip is always one fill step away from the field behind it (the 1.x map; a ghost field's chips are `SECONDARY`). */
+var TAG_INPUT_VARIANT_TO_CHIP_VARIANT_MAP = {
+	["BASE"]: ChipVariant.SECONDARY,
+	["PRIMARY"]: ChipVariant.SECONDARY,
+	["SECONDARY"]: ChipVariant.PRIMARY,
+	["TERTIARY"]: ChipVariant.SECONDARY
+};
+/** The `Field` a TagInput renders for its own `label` / `error` uses the same rung. */
+var TAG_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
+};
+/** Splits `text` at every character in `separators`. */
+function splitOn(text, separators) {
+	const segments = [];
+	let current = "";
+	for (const character of text) if (separators.includes(character)) {
+		segments.push(current);
+		current = "";
+	} else current += character;
+	segments.push(current);
+	return segments;
+}
+/** "No tags", "1 tag", "3 tags", "3 tags, 1 invalid". */
+function countText(count, invalidCount) {
+	const tags = count === 0 ? "No tags" : count === 1 ? "1 tag" : `${count} tags`;
+	return invalidCount > 0 ? `${tags}, ${invalidCount} invalid` : tags;
+}
+/** The frame, its chips and the text input, wired to the nearest Field (the input's own or the app's). */
+function TagFrame({ tagProps, forwardedRef, isRoot }) {
+	const { value, defaultValue = [], onChange, separators = TAG_INPUT_DEFAULT_SEPARATORS, isTagInvalid, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, placeholder, error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, onBlur, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = tagProps;
+	const wiring = useFieldWiring({
+		id,
+		ariaLabel,
+		ariaLabelAttribute: rest["aria-label"],
+		ariaLabelledBy: rest["aria-labelledby"],
+		ariaDescribedBy,
+		describedByIds: (controlId) => [`${controlId}-count`],
+		error,
+		isError,
+		isRequired
+	});
+	const { controlId: inputId, describedBy, isRequired: isRequiredState, hasName } = wiring;
+	const countId = `${inputId}-count`;
+	const innerRef = useRef(null);
+	const mergedRef = useMergeRefs([innerRef, forwardedRef]);
+	const [tags, setTags] = useControlledState({
+		value,
+		defaultValue,
+		onChange
+	});
+	const tagsRef = useRef(tags);
+	tagsRef.current = tags;
+	const [draft, setDraft] = useState("");
+	const [announcement, setAnnouncement] = useState("");
+	const canEdit = !isDisabled && !isReadOnly;
+	const invalidCount = isTagInvalid === void 0 ? 0 : tags.filter(isTagInvalid).length;
+	const isInvalid = wiring.isInvalid || invalidCount > 0;
+	const chipSize = TAG_INPUT_SIZE_TO_CHIP_SIZE_MAP[size];
+	const chipVariant = isGhost ? ChipVariant.SECONDARY : TAG_INPUT_VARIANT_TO_CHIP_VARIANT_MAP[variant];
+	/** Sets the live region; a repeat of the same message is made distinct so it is read again. */
+	const announce = (message) => {
+		setAnnouncement((previous) => previous === message ? `${message} ` : message);
+	};
+	/** Trims, drops empty entries and duplicates, appends the rest, and calls `onChange` once. */
+	const commit = (entries) => {
+		const next = [...tagsRef.current];
+		const added = [];
+		const duplicates = [];
+		for (const entry of entries) {
+			const tag = entry.trim();
+			if (tag === "") continue;
+			if (next.includes(tag)) {
+				duplicates.push(tag);
+				continue;
+			}
+			next.push(tag);
+			added.push(tag);
+		}
+		const messages = [];
+		if (added.length === 1) messages.push(`Added ${added[0]}`);
+		else if (added.length > 1) messages.push(`Added ${added.length} tags`);
+		if (duplicates.length > 0) messages.push(`${duplicates[0]} is already added`);
+		if (messages.length > 0) announce(messages.join(". "));
+		if (added.length === 0) return;
+		tagsRef.current = next;
+		setTags(next);
+	};
+	/** Removes the tag at `index` and announces it. */
+	const remove = (index) => {
+		const current = tagsRef.current;
+		const tag = current[index];
+		if (tag === void 0) return;
+		const next = current.filter((_, position) => position !== index);
+		tagsRef.current = next;
+		setTags(next);
+		announce(`Removed ${tag}`);
+	};
+	/** New draft text: every complete segment before the last separator commits; the rest stays. */
+	const applyDraft = (text) => {
+		const segments = splitOn(text, separators);
+		if (segments.length === 1) {
+			setDraft(text);
+			return;
+		}
+		const rest = segments.pop() ?? "";
+		commit(segments);
+		setDraft(rest);
+	};
+	const handleChange = (event) => {
+		if (!canEdit) return;
+		if (event.nativeEvent.isComposing) {
+			setDraft(event.target.value);
+			return;
+		}
+		applyDraft(event.target.value);
+	};
+	const handleCompositionEnd = (event) => {
+		if (!canEdit) return;
+		applyDraft(event.currentTarget.value);
+	};
+	const handleKeyDown = (event) => {
+		if (event.nativeEvent.isComposing || !canEdit) return;
+		if (event.key === "Enter") {
+			if (draft.trim() === "") return;
+			event.preventDefault();
+			commit([draft]);
+			setDraft("");
+			return;
+		}
+		if (event.key === "Backspace") {
+			const input = event.currentTarget;
+			const isAtStart = input.selectionStart === 0 && input.selectionEnd === 0;
+			if (draft !== "" || !isAtStart || tagsRef.current.length === 0) return;
+			event.preventDefault();
+			remove(tagsRef.current.length - 1);
+		}
+	};
+	const handlePaste = (event) => {
+		if (!canEdit) return;
+		const pasted = event.clipboardData.getData("text");
+		const splitters = [...separators, ...TAG_INPUT_PASTE_SEPARATORS];
+		if (![...pasted].some((character) => splitters.includes(character))) return;
+		event.preventDefault();
+		const input = event.currentTarget;
+		const start = input.selectionStart ?? draft.length;
+		const end = input.selectionEnd ?? start;
+		commit(splitOn(draft.slice(0, start) + pasted + draft.slice(end), splitters));
+		setDraft("");
+	};
+	const handleBlur = (event) => {
+		if (canEdit && draft !== "") {
+			commit([draft]);
+			setDraft("");
+		}
+		onBlur?.(event);
+	};
+	/** A press on empty space or a chip's label focuses the text input; × buttons keep their press. */
+	const handleMouseDown = (event) => {
+		if (isDisabled || event.button !== 0) return;
+		const target = event.target;
+		if (target === innerRef.current || target.closest("button") !== null) return;
+		event.preventDefault();
+		innerRef.current?.focus();
+	};
+	useDevWarning(!hasName, "[@galaxy-io/dls] TagInput has no accessible name. Pass `label`, wrap it in a labelled `Field`, or set `ariaLabel`. `placeholder` is not a name.");
+	const isEmpty = tags.length === 0;
+	const showsPlaceholder = isEmpty && !isReadOnly;
+	return /* @__PURE__ */ jsxs(Frame, {
+		onMouseDown: handleMouseDown,
+		className: cx(TAG_INPUT_SIZE_TO_CSS_MAP[size], isGhost ? GHOST_CSS : TAG_INPUT_VARIANT_TO_CSS_MAP[variant], canEdit && !isInvalid && (isGhost ? GHOST_HOVER_CSS : TAG_INPUT_VARIANT_TO_HOVER_CSS_MAP[variant]), isInvalid && !isDisabled && ERROR_CSS, isDisabled && DISABLED_CSS, fillWidth && FILL_WIDTH_CSS, isRoot ? className : void 0),
+		...rootStyle(isRoot, style),
+		children: [
+			tags.map((tag, index) => {
+				const isTagInError = isTagInvalid?.(tag) === true;
+				return /* @__PURE__ */ jsx(TagItem, { children: /* @__PURE__ */ jsx(Chip, {
+					label: tag,
+					size: chipSize,
+					variant: isTagInError ? ChipVariant.ERROR : chipVariant,
+					isDisabled,
+					...canEdit ? { onDismiss: () => {
+						remove(index);
+						innerRef.current?.focus();
+					} } : {},
+					...isTagInError ? { ariaLabel: `${tag} (invalid)` } : {}
+				}) }, tag);
+			}),
+			/* @__PURE__ */ jsx(Draft, {
+				...rest,
+				ref: mergedRef,
+				id: inputId,
+				type: "text",
+				value: draft,
+				onChange: handleChange,
+				onCompositionEnd: handleCompositionEnd,
+				onKeyDown: handleKeyDown,
+				onPaste: handlePaste,
+				onBlur: handleBlur,
+				placeholder: showsPlaceholder ? placeholder : void 0,
+				disabled: isDisabled,
+				readOnly: isReadOnly,
+				autoComplete: "off",
+				autoCorrect: "off",
+				autoCapitalize: "off",
+				spellCheck: false,
+				"aria-label": ariaLabel ?? rest["aria-label"],
+				"aria-describedby": describedBy,
+				"aria-invalid": isInvalid ? true : void 0,
+				"aria-required": isRequiredState ? true : void 0,
+				className: cx(isEmpty && EMPTY_DRAFT_CSS)
+			}),
+			/* @__PURE__ */ jsx(VisuallyHidden, {
+				id: countId,
+				children: countText(tags.length, invalidCount)
+			}),
+			/* @__PURE__ */ jsx(StatusRegion, {
+				role: "status",
+				"aria-live": "polite",
+				children: announcement
+			})
+		]
+	});
+}
+/** A field of free-form tags: type and press Enter or a separator, paste a list, remove with × or Backspace. */
+var TagInput = forwardRef(function TagInput(props, ref) {
+	const { label, error, isRequired = false, size = "MEDIUM", fillWidth = false, id, className, style } = props;
+	const ownField = useOwnField({
+		componentName: "TagInput",
+		label,
+		error,
+		isRequired,
+		size: TAG_INPUT_SIZE_TO_FIELD_SIZE_MAP[size],
+		id,
+		className,
+		style,
+		rootClassName: fillWidth && FILL_WIDTH_CSS
+	});
+	if (ownField !== null) return /* @__PURE__ */ jsx(Field, {
+		...ownField,
+		children: /* @__PURE__ */ jsx(TagFrame, {
+			tagProps: props,
+			forwardedRef: ref,
+			isRoot: false
+		})
+	});
+	return /* @__PURE__ */ jsx(TagFrame, {
+		tagProps: props,
+		forwardedRef: ref,
+		isRoot: true
+	});
+});
+TagInput.displayName = "TagInput";
+//#endregion
+export { TagInputSize, TagInputVariant, TagInput as default };

package/dist/inputs/TextAreaInput.d.ts

@@ -1,51 +1,153 @@
-import { InputSize, InputVariant } from "./Input";
-export interface TextAreaInputProps {
-    /** Controlled value. */
+import { type AriaAttributes, type CSSProperties, type TextareaHTMLAttributes } from "react";
+import { FontFamily } from "../theme/enums.js";
+/** Canonical rungs; TextAreaInput supports all five. The rung sets the text step, the padding and the height of one row. */
+export declare enum TextAreaInputSize {
+    /** Caption text, 12px rows, 20px one-row field. */
+    X_SMALL = "X_SMALL",
+    /** body_sm text, 16px rows, 24px one-row field. */
+    SMALL = "SMALL",
+    /** body_md text, 16px rows, 32px one-row field. The default. */
+    MEDIUM = "MEDIUM",
+    /** body_lg text, 20px rows, 36px one-row field. */
+    LARGE = "LARGE",
+    /** body_lg text, 20px rows, 40px one-row field. */
+    X_LARGE = "X_LARGE"
+}
+/** Resting fill of the field (Constitution V-A surface set; the 1.x `InputVariant` members, unchanged). */
+export declare enum TextAreaInputVariant {
+    /** `background.base` fill. */
+    BASE = "BASE",
+    /** `background.primary` fill. The default. */
+    PRIMARY = "PRIMARY",
+    /** `background.secondary` fill. */
+    SECONDARY = "SECONDARY",
+    /** `background.tertiary` fill. */
+    TERTIARY = "TERTIARY"
+}
+/** The families a field's value may use (serif has no UI steps). */
+type TextAreaInputFamily = FontFamily.SANS | FontFamily.MONO;
+/** Native `<textarea>` attributes, typed as React types them. */
+type NativeTextAreaAttributes = TextareaHTMLAttributes<HTMLTextAreaElement>;
+/** The native passthrough allowlist, each documented. */
+interface TextAreaInputNativeProps {
+    /** Form field name, passed to the `<textarea>`. */
+    name?: NativeTextAreaAttributes["name"];
+    /**
+     * Browser autofill hint.
+     * @default "off"
+     */
+    autoComplete?: NativeTextAreaAttributes["autoComplete"];
+    /** Focus the textarea on mount. */
+    autoFocus?: NativeTextAreaAttributes["autoFocus"];
+    /** Hard cap on the value's length. Shows no message; for a counter, use `Field`. */
+    maxLength?: NativeTextAreaAttributes["maxLength"];
+    /** Browser spell checking. Left to the browser unless set. */
+    spellCheck?: NativeTextAreaAttributes["spellCheck"];
+    /** Focus handler on the `<textarea>`. */
+    onFocus?: NativeTextAreaAttributes["onFocus"];
+    /** Blur handler on the `<textarea>`. */
+    onBlur?: NativeTextAreaAttributes["onBlur"];
+    /** Key-down handler on the `<textarea>`. Use it for ⌘/Ctrl+Enter submit. */
+    onKeyDown?: NativeTextAreaAttributes["onKeyDown"];
+}
+export interface TextAreaInputProps extends AriaAttributes, TextAreaInputNativeProps {
+    /** Controlled value. Pass it with `onChange`. */
     value?: string;
-    onChange: (value: string) => void;
-    /** Field surface color. @default InputVariant.PRIMARY */
-    variant?: InputVariant;
-    /** @default InputSize.MEDIUM */
-    size?: InputSize;
-    /** Visible rows before scrolling. @default 3 */
-    lines?: number;
-    placeholder?: string;
+    /**
+     * Initial value while uncontrolled.
+     * @default ""
+     */
+    defaultValue?: string;
+    /** Called with the new string on every edit. */
+    onChange?: (value: string) => void;
+    /**
+     * Control rung. Sets the text step and padding; one row is exactly 20 / 24 / 32 / 36 / 40px tall.
+     * @default TextAreaInputSize.MEDIUM
+     */
+    size?: TextAreaInputSize;
+    /**
+     * Resting fill, from the surface set. Ignored with `isGhost`.
+     * @default TextAreaInputVariant.PRIMARY
+     */
+    variant?: TextAreaInputVariant;
+    /**
+     * Ghost field: no fill and no hairline at rest; the frame appears on hover and focus (1.x
+     * `noBorder`). For inline editing (a comment, a description) inside a surface that frames it.
+     * @default false
+     */
+    isGhost?: boolean;
+    /** Label above the field, rendered through `Field`. For a description, a label tooltip, a counter or a horizontal layout, wrap the field in `Field` instead. */
     label?: string;
-    /** Adds an info icon beside the label with this content on hover. */
-    labelTooltip?: string | React.ReactNode;
-    /** Message under the field; also switches the border to the error color. */
+    /** Hint shown while the value is empty. It is never the label. */
+    placeholder?: string;
+    /** Message from the app, shown under the field through `Field`. It also turns the border red and sets `aria-invalid`. */
     error?: string;
-    /** Appends the red required asterisk. Note: `required`, not `isRequired`. */
-    required?: boolean;
-    /** Note: `disabled`, not `isDisabled` — this input predates the `is` convention. */
-    disabled?: boolean;
-    autoFocus?: boolean;
-    /** Character-count bounds, validated on blur. Not a numeric range. */
-    min?: number;
-    max?: number;
-    onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
-    onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
-    onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
-    /** A number is px. */
-    width?: number | string;
-    /** A number is px. Overrides the height implied by `lines`. */
-    height?: number | string;
-    fillWidth?: boolean;
-    /** Grow to the parent's height. Pairs with a flex parent. */
-    fillHeight?: boolean;
-    /** Drop the hairline border. */
-    noBorder?: boolean;
-    /** Collapse the inset to 0. */
-    noPadding?: boolean;
-    /** Swap the field for a shimmer placeholder. */
+    /**
+     * Error border and `aria-invalid` without a message. `error` implies it.
+     * @default false
+     */
+    isError?: boolean;
+    /**
+     * Rows of text the field shows when empty, and its minimum height. Floored; values below 1 render 1.
+     * @default 3
+     */
+    minRows?: number;
+    /** With `isAutoGrow` or `isResizable`: the most rows the field grows to before it scrolls. Values below `minRows` are raised to `minRows`. No limit when unset. */
+    maxRows?: number;
+    /**
+     * The height follows the content, from `minRows` up to `maxRows`, then the field scrolls.
+     * @default false
+     */
+    isAutoGrow?: boolean;
+    /**
+     * The user can drag the bottom edge to change the height, between `minRows` and `maxRows`. Ignored with `isAutoGrow`.
+     * @default false
+     */
+    isResizable?: boolean;
+    /**
+     * The content is not ready: the field keeps its size, hides its text, shows a two-line skeleton and cannot be edited.
+     * @default false
+     */
     isLoading?: boolean;
+    /**
+     * Not focusable or editable. Shows the disabled look.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Focusable, selectable and scrollable, but not editable. No hover change and no resize handle.
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /**
+     * Required marker on the `label` (via `Field`) and `aria-required`. It does no validation.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Type family of the value and the placeholder. Use mono for pasted keys, JSON or SQL snippets that are not edited as code.
+     * @default FontFamily.SANS
+     */
+    family?: TextAreaInputFamily;
+    /**
+     * Stretch to the parent's width. Without it, the field is about 20 characters wide.
+     * @default false
+     */
+    fillWidth?: boolean;
+    /** Accessible name when there is no visible label (no `label` and no wrapping `Field`). */
+    ariaLabel?: string;
+    /**
+     * DOM id of the `<textarea>`. A wrapping `Field`'s id wins.
+     * @default useId()
+     */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the `<textarea>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root: the `Field` wrapper when TextAreaInput renders one, otherwise the field's own root. */
+    className?: string;
+    /** Inline style on the root; only for setting CSS custom properties. */
+    style?: CSSProperties;
 }
-/**
- * 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.
- */
+/** The multi-line text field, sized in rows, with optional auto-grow and a vertical resize handle. */
 declare const TextAreaInput: import("react").ForwardRefExoticComponent<TextAreaInputProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export default TextAreaInput;