@igne-agency/react-web-ui 0.4.0 → 0.6.0

package/dist/components/text-field/text-input.js

@@ -1,5 +1,4 @@
 import { lengthTone } from "../../lib/text-length.js";
-import { Button } from "../button/button.js";
 import { Field } from "../field/field.js";
 import { fieldStateAttributes } from "../field/field-state.js";
 import { useFieldFocus, withFieldFocus } from "../field/use-field-focus.js";
@@ -9,6 +8,7 @@ import { focusControlOnRim } from "../field/rim-focus.js";
 import { TextInputContext, useTextInputContext } from "./text-input-context.js";
 import text_field_module_default from "./text-field.module.js";
 import { c } from "react/compiler-runtime";
+import { useRender } from "@base-ui/react/use-render";
 import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
@@ -20,11 +20,11 @@ var COPIED_FEEDBACK_MS = 2e3;
 * state onto every part.
 *
 * @example
-* <TextInput.Root value={value} onValueChange={setValue} optionalLabel="optional">…</TextInput.Root>
+* <TextInput.Root value={value} onValueChange={setValue}>…</TextInput.Root>
 */
 var TextInputRoot = (t0) => {
 	const $ = c(41);
-	const { value, onValueChange, disabled, readOnly, requiredness, optionalLabel, errors, dirty, touched, pending: t1, maxLength, state, className, children } = t0;
+	const { value, onValueChange, disabled, readOnly, requiredness, errors, dirty, touched, pending: t1, maxLength, state, className, children } = t0;
 	const pending = t1 === void 0 ? false : t1;
 	const controlRef = useRef(null);
 	const t2 = value !== "";
@@ -54,23 +54,21 @@ var TextInputRoot = (t0) => {
 	} else t3 = $[9];
 	const field = useFieldState(t3);
 	let t4;
-	if ($[10] !== errors || $[11] !== field.phase || $[12] !== field.state || $[13] !== optionalLabel) {
+	if ($[10] !== errors || $[11] !== field.phase || $[12] !== field.state) {
 		t4 = {
 			state: field.state,
 			errors,
-			optionalLabel,
 			phase: field.phase
 		};
 		$[10] = errors;
 		$[11] = field.phase;
 		$[12] = field.state;
-		$[13] = optionalLabel;
-		$[14] = t4;
-	} else t4 = $[14];
+		$[13] = t4;
+	} else t4 = $[13];
 	let t5;
 	let t6;
 	let t7;
-	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
 		t5 = (control) => {
 			controlRef.current = control;
 		};
@@ -79,16 +77,16 @@ var TextInputRoot = (t0) => {
 			controlRef.current?.focus();
 			controlRef.current?.select();
 		};
-		$[15] = t5;
-		$[16] = t6;
-		$[17] = t7;
+		$[14] = t5;
+		$[15] = t6;
+		$[16] = t7;
 	} else {
-		t5 = $[15];
-		t6 = $[16];
-		t7 = $[17];
+		t5 = $[14];
+		t6 = $[15];
+		t7 = $[16];
 	}
 	let t8;
-	if ($[18] !== field.state || $[19] !== maxLength || $[20] !== onValueChange || $[21] !== value) {
+	if ($[17] !== field.state || $[18] !== maxLength || $[19] !== onValueChange || $[20] !== value) {
 		t8 = {
 			state: field.state,
 			value,
@@ -98,67 +96,70 @@ var TextInputRoot = (t0) => {
 			selectControl: t7,
 			maxLength
 		};
-		$[18] = field.state;
-		$[19] = maxLength;
-		$[20] = onValueChange;
-		$[21] = value;
-		$[22] = t8;
-	} else t8 = $[22];
+		$[17] = field.state;
+		$[18] = maxLength;
+		$[19] = onValueChange;
+		$[20] = value;
+		$[21] = t8;
+	} else t8 = $[21];
 	const t9 = field.disabled;
 	const t10 = field.invalid;
-	let t11;
-	if ($[23] !== className) {
-		t11 = clsx(text_field_module_default.root, className);
-		$[23] = className;
-		$[24] = t11;
-	} else t11 = $[24];
+	const t11 = field.state.requiredness;
 	let t12;
-	if ($[25] !== field.state) {
-		t12 = fieldStateAttributes(field.state);
-		$[25] = field.state;
-		$[26] = t12;
-	} else t12 = $[26];
+	if ($[22] !== className) {
+		t12 = clsx(text_field_module_default.root, className);
+		$[22] = className;
+		$[23] = t12;
+	} else t12 = $[23];
 	let t13;
-	if ($[27] !== children || $[28] !== dirty || $[29] !== field.disabled || $[30] !== field.invalid || $[31] !== t11 || $[32] !== t12 || $[33] !== touched) {
-		t13 = /* @__PURE__ */ jsx(Field.Root, {
+	if ($[24] !== field.state) {
+		t13 = fieldStateAttributes(field.state);
+		$[24] = field.state;
+		$[25] = t13;
+	} else t13 = $[25];
+	let t14;
+	if ($[26] !== children || $[27] !== dirty || $[28] !== field.disabled || $[29] !== field.invalid || $[30] !== field.state.requiredness || $[31] !== t12 || $[32] !== t13 || $[33] !== touched) {
+		t14 = /* @__PURE__ */ jsx(Field.Root, {
 			disabled: t9,
 			invalid: t10,
+			requiredness: t11,
 			dirty,
 			touched,
-			className: t11,
-			...t12,
+			className: t12,
+			...t13,
 			children
 		});
-		$[27] = children;
-		$[28] = dirty;
-		$[29] = field.disabled;
-		$[30] = field.invalid;
-		$[31] = t11;
-		$[32] = t12;
+		$[26] = children;
+		$[27] = dirty;
+		$[28] = field.disabled;
+		$[29] = field.invalid;
+		$[30] = field.state.requiredness;
+		$[31] = t12;
+		$[32] = t13;
 		$[33] = touched;
-		$[34] = t13;
-	} else t13 = $[34];
-	let t14;
-	if ($[35] !== t13 || $[36] !== t8) {
-		t14 = /* @__PURE__ */ jsx(TextInputContext, {
+		$[34] = t14;
+	} else t14 = $[34];
+	let t15;
+	if ($[35] !== t14 || $[36] !== t8) {
+		t15 = /* @__PURE__ */ jsx(TextInputContext, {
 			value: t8,
-			children: t13
+			children: t14
 		});
-		$[35] = t13;
+		$[35] = t14;
 		$[36] = t8;
-		$[37] = t14;
-	} else t14 = $[37];
-	let t15;
-	if ($[38] !== t14 || $[39] !== t4) {
-		t15 = /* @__PURE__ */ jsx(InputPartsContext, {
+		$[37] = t15;
+	} else t15 = $[37];
+	let t16;
+	if ($[38] !== t15 || $[39] !== t4) {
+		t16 = /* @__PURE__ */ jsx(InputPartsContext, {
 			value: t4,
-			children: t14
+			children: t15
 		});
-		$[38] = t14;
+		$[38] = t15;
 		$[39] = t4;
-		$[40] = t15;
-	} else t15 = $[40];
-	return t15;
+		$[40] = t16;
+	} else t16 = $[40];
+	return t16;
 };
 /**
 * The bordered box holding the control and its inlays.
@@ -396,50 +397,129 @@ var TextInputInput = (t0) => {
 	return t7;
 };
 /**
-* The icon-only button that empties the control, shown once it holds a value.
+* The button that empties the control, shown once it holds a value. It renders
+* whichever button it is given.
 *
 * @example
-* <TextInput.Clear label="Clear"><CloseIcon /></TextInput.Clear>
+* <TextInput.Clear render={<IconButton label="Clear" variant="tertiary" size="sm"><CloseIcon /></IconButton>} />
 */
 var TextInputClear = (t0) => {
-	const $ = c(10);
-	const { label, className, children } = t0;
+	const $ = c(17);
+	let className;
+	let props;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		render = $[3];
+	}
 	const { value, setValue, state, focusControl } = useTextInputContext();
-	if (value === "" || state.disabled === true || state.readonly === true) return null;
-	let t1;
-	if ($[0] !== className) {
-		t1 = clsx(text_field_module_default.action, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
+	const t1 = value !== "" && state.disabled !== true && state.readonly !== true;
 	let t2;
-	if ($[2] !== focusControl || $[3] !== setValue) {
-		t2 = () => {
+	if ($[4] !== className) {
+		t2 = clsx(text_field_module_default.action, className);
+		$[4] = className;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== focusControl || $[7] !== setValue) {
+		t3 = () => {
 			setValue("");
 			focusControl();
 		};
-		$[2] = focusControl;
-		$[3] = setValue;
-		$[4] = t2;
-	} else t2 = $[4];
+		$[6] = focusControl;
+		$[7] = setValue;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== props || $[10] !== t2 || $[11] !== t3) {
+		t4 = {
+			...props,
+			type: "button",
+			className: t2,
+			onClick: t3
+		};
+		$[9] = props;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== render || $[14] !== t1 || $[15] !== t4) {
+		t5 = {
+			render,
+			enabled: t1,
+			props: t4
+		};
+		$[13] = render;
+		$[14] = t1;
+		$[15] = t4;
+		$[16] = t5;
+	} else t5 = $[16];
+	return useRender(t5);
+};
+/**
+* Any button inside the group, in the place an inlay that acts takes, such as
+* a search field's trailing "Search" button. It renders whichever button it is
+* given, disabled while the field is.
+*
+* @example
+* <TextInput.Action render={<Button variant="tertiary" size="sm" type="submit">Search</Button>} />
+*/
+var TextInputAction = (t0) => {
+	const $ = c(13);
+	let className;
+	let props;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		render = $[3];
+	}
+	const { state } = useTextInputContext();
+	const t1 = state.disabled;
+	let t2;
+	if ($[4] !== className) {
+		t2 = clsx(text_field_module_default.action, className);
+		$[4] = className;
+		$[5] = t2;
+	} else t2 = $[5];
 	let t3;
-	if ($[5] !== children || $[6] !== label || $[7] !== t1 || $[8] !== t2) {
-		t3 = /* @__PURE__ */ jsx(Button, {
-			iconOnly: true,
-			icon: children,
-			label,
-			variant: "tertiary",
-			size: "sm",
-			className: t1,
-			onClick: t2
-		});
-		$[5] = children;
-		$[6] = label;
-		$[7] = t1;
+	if ($[6] !== props || $[7] !== state.disabled || $[8] !== t2) {
+		t3 = {
+			type: "button",
+			disabled: t1,
+			...props,
+			className: t2
+		};
+		$[6] = props;
+		$[7] = state.disabled;
 		$[8] = t2;
 		$[9] = t3;
 	} else t3 = $[9];
-	return t3;
+	let t4;
+	if ($[10] !== render || $[11] !== t3) {
+		t4 = {
+			render,
+			props: t3
+		};
+		$[10] = render;
+		$[11] = t3;
+		$[12] = t4;
+	} else t4 = $[12];
+	return useRender(t4);
 };
 /**
 * Writes text to the clipboard, rejecting where there is no clipboard as well
@@ -450,66 +530,70 @@ var TextInputClear = (t0) => {
 */
 var writeClipboard = async (text) => navigator.clipboard.writeText(text);
 /**
-* The icon-only button that copies the value to the clipboard, shown once it
-* holds one, and announces whether the copy landed.
+* The button that copies the value to the clipboard, shown once it holds one,
+* and announces whether the copy landed. It renders whichever button it is
+* given, and a render function can follow the outcome.
 *
 * @example
-* <TextInput.Copy label="Copy" copiedLabel="Copied" failedLabel="Copy failed, text selected"><CopyIcon /></TextInput.Copy>
+* <TextInput.Copy
+* 	copiedLabel="Copied"
+* 	failedLabel="Copy failed, text selected"
+* 	render={(props, { outcome }) => (
+* 		<IconButton {...props} label="Copy" variant="tertiary" size="sm">
+* 			{outcome === "copied" ? <CheckIcon /> : <CopyIcon />}
+* 		</IconButton>
+* 	)}
+* />
 */
 var TextInputCopy = (t0) => {
-	const $ = c(25);
-	const { label, copiedLabel, failedLabel, copiedIcon, failedIcon, className, children } = t0;
+	const $ = c(31);
+	let className;
+	let copiedLabel;
+	let failedLabel;
+	let props;
+	let render;
+	if ($[0] !== t0) {
+		({copiedLabel, failedLabel, render, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = copiedLabel;
+		$[3] = failedLabel;
+		$[4] = props;
+		$[5] = render;
+	} else {
+		className = $[1];
+		copiedLabel = $[2];
+		failedLabel = $[3];
+		props = $[4];
+		render = $[5];
+	}
 	const { value, state, selectControl } = useTextInputContext();
 	const [outcome, setOutcome] = useState("idle");
-	if (value === "" || state.disabled === true) return null;
+	const shown = value !== "" && state.disabled !== true;
 	let t1;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = (next) => {
 			setOutcome(next);
 			setTimeout(() => setOutcome("idle"), COPIED_FEEDBACK_MS);
 		};
-		$[0] = t1;
-	} else t1 = $[0];
+		$[6] = t1;
+	} else t1 = $[6];
 	const settle = t1;
 	let t2;
-	if ($[1] !== copiedLabel || $[2] !== failedLabel || $[3] !== label) {
-		t2 = {
-			idle: label,
-			copied: copiedLabel,
-			failed: failedLabel
-		};
-		$[1] = copiedLabel;
-		$[2] = failedLabel;
-		$[3] = label;
-		$[4] = t2;
-	} else t2 = $[4];
-	const labels = t2;
-	const t3 = copiedIcon ?? children;
-	const t4 = failedIcon ?? children;
-	let t5;
-	if ($[5] !== children || $[6] !== t3 || $[7] !== t4) {
-		t5 = {
-			idle: children,
-			copied: t3,
-			failed: t4
-		};
-		$[5] = children;
-		$[6] = t3;
-		$[7] = t4;
-		$[8] = t5;
-	} else t5 = $[8];
-	const t6 = t5[outcome];
-	const t7 = labels[outcome];
-	const t8 = outcome === "failed" ? "danger" : "brand";
-	let t9;
+	if ($[7] !== outcome) {
+		t2 = { outcome };
+		$[7] = outcome;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
 	if ($[9] !== className) {
-		t9 = clsx(text_field_module_default.action, className);
+		t3 = clsx(text_field_module_default.action, className);
 		$[9] = className;
-		$[10] = t9;
-	} else t9 = $[10];
-	let t10;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
 	if ($[11] !== selectControl || $[12] !== value) {
-		t10 = () => {
+		t4 = () => {
 			writeClipboard(value).then(() => settle("copied"), () => {
 				selectControl();
 				settle("failed");
@@ -517,94 +601,153 @@ var TextInputCopy = (t0) => {
 		};
 		$[11] = selectControl;
 		$[12] = value;
-		$[13] = t10;
-	} else t10 = $[13];
-	let t11;
-	if ($[14] !== t10 || $[15] !== t6 || $[16] !== t7 || $[17] !== t8 || $[18] !== t9) {
-		t11 = /* @__PURE__ */ jsx(Button, {
-			iconOnly: true,
-			icon: t6,
-			label: t7,
-			tone: t8,
-			variant: "tertiary",
-			size: "sm",
-			className: t9,
-			onClick: t10
-		});
-		$[14] = t10;
-		$[15] = t6;
-		$[16] = t7;
-		$[17] = t8;
-		$[18] = t9;
-		$[19] = t11;
-	} else t11 = $[19];
-	const t12 = outcome === "idle" ? "" : labels[outcome];
-	let t13;
-	if ($[20] !== t12) {
-		t13 = /* @__PURE__ */ jsx("span", {
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== props || $[15] !== t3 || $[16] !== t4) {
+		t5 = {
+			...props,
+			type: "button",
+			className: t3,
+			onClick: t4
+		};
+		$[14] = props;
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
+	if ($[18] !== render || $[19] !== shown || $[20] !== t2 || $[21] !== t5) {
+		t6 = {
+			render,
+			enabled: shown,
+			state: t2,
+			props: t5
+		};
+		$[18] = render;
+		$[19] = shown;
+		$[20] = t2;
+		$[21] = t5;
+		$[22] = t6;
+	} else t6 = $[22];
+	const button = useRender(t6);
+	if (!shown) return null;
+	let t7;
+	if ($[23] !== copiedLabel || $[24] !== failedLabel) {
+		t7 = {
+			idle: "",
+			copied: copiedLabel,
+			failed: failedLabel
+		};
+		$[23] = copiedLabel;
+		$[24] = failedLabel;
+		$[25] = t7;
+	} else t7 = $[25];
+	const t8 = t7[outcome];
+	let t9;
+	if ($[26] !== t8) {
+		t9 = /* @__PURE__ */ jsx("span", {
 			role: "status",
 			className: text_field_module_default.copyStatus,
-			children: t12
+			children: t8
 		});
-		$[20] = t12;
-		$[21] = t13;
-	} else t13 = $[21];
-	let t14;
-	if ($[22] !== t11 || $[23] !== t13) {
-		t14 = /* @__PURE__ */ jsxs(Fragment, { children: [t11, t13] });
-		$[22] = t11;
-		$[23] = t13;
-		$[24] = t14;
-	} else t14 = $[24];
-	return t14;
+		$[26] = t8;
+		$[27] = t9;
+	} else t9 = $[27];
+	let t10;
+	if ($[28] !== button || $[29] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Fragment, { children: [button, t9] });
+		$[28] = button;
+		$[29] = t9;
+		$[30] = t10;
+	} else t10 = $[30];
+	return t10;
 };
 /**
-* The icon-only toggle that shows a concealed value, such as a password, as
-* text. The caller switches the `Input`'s `type` with `revealed`.
+* The toggle that shows a concealed value, such as a password, as text. The
+* caller switches the `Input`'s `type` with `revealed`, and names the button for
+* what a press will do.
 *
 * @example
-* <TextInput.Reveal revealed={revealed} onRevealedChange={setRevealed} label="Show password"><VisibilityIcon /></TextInput.Reveal>
+* <TextInput.Reveal
+* 	revealed={revealed}
+* 	onRevealedChange={setRevealed}
+* 	render={
+* 		<Button variant="tertiary" size="sm">{revealed ? "Hide" : "Show"}</Button>
+* 	}
+* />
 */
 var TextInputReveal = (t0) => {
-	const $ = c(12);
-	const { revealed, onRevealedChange, label, className, children } = t0;
+	const $ = c(22);
+	let className;
+	let onRevealedChange;
+	let props;
+	let render;
+	let revealed;
+	if ($[0] !== t0) {
+		({revealed, onRevealedChange, render, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = onRevealedChange;
+		$[3] = props;
+		$[4] = render;
+		$[5] = revealed;
+	} else {
+		className = $[1];
+		onRevealedChange = $[2];
+		props = $[3];
+		render = $[4];
+		revealed = $[5];
+	}
 	const { state } = useTextInputContext();
-	const t1 = state.disabled;
-	let t2;
-	if ($[0] !== className) {
-		t2 = clsx(text_field_module_default.action, className);
-		$[0] = className;
-		$[1] = t2;
-	} else t2 = $[1];
+	let t1;
+	if ($[6] !== revealed) {
+		t1 = { revealed };
+		$[6] = revealed;
+		$[7] = t1;
+	} else t1 = $[7];
+	const t2 = state.disabled;
 	let t3;
-	if ($[2] !== onRevealedChange || $[3] !== revealed) {
-		t3 = () => onRevealedChange(!revealed);
-		$[2] = onRevealedChange;
-		$[3] = revealed;
-		$[4] = t3;
-	} else t3 = $[4];
+	if ($[8] !== className) {
+		t3 = clsx(text_field_module_default.action, className);
+		$[8] = className;
+		$[9] = t3;
+	} else t3 = $[9];
 	let t4;
-	if ($[5] !== children || $[6] !== label || $[7] !== revealed || $[8] !== state.disabled || $[9] !== t2 || $[10] !== t3) {
-		t4 = /* @__PURE__ */ jsx(Button, {
-			iconOnly: true,
-			icon: children,
-			label,
-			variant: "tertiary",
-			size: "sm",
-			"aria-pressed": revealed,
-			disabled: t1,
-			className: t2,
-			onClick: t3
-		});
-		$[5] = children;
-		$[6] = label;
-		$[7] = revealed;
-		$[8] = state.disabled;
-		$[9] = t2;
-		$[10] = t3;
-		$[11] = t4;
-	} else t4 = $[11];
-	return t4;
+	if ($[10] !== onRevealedChange || $[11] !== revealed) {
+		t4 = () => onRevealedChange(!revealed);
+		$[10] = onRevealedChange;
+		$[11] = revealed;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== props || $[14] !== state.disabled || $[15] !== t3 || $[16] !== t4) {
+		t5 = {
+			...props,
+			type: "button",
+			disabled: t2,
+			className: t3,
+			onClick: t4
+		};
+		$[13] = props;
+		$[14] = state.disabled;
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
+	if ($[18] !== render || $[19] !== t1 || $[20] !== t5) {
+		t6 = {
+			render,
+			state: t1,
+			props: t5
+		};
+		$[18] = render;
+		$[19] = t1;
+		$[20] = t5;
+		$[21] = t6;
+	} else t6 = $[21];
+	return useRender(t6);
 };
 /**
 * The value's length against `Root`'s `maxLength`, toned as it nears the limit.
@@ -666,19 +809,24 @@ var TextInputCounter = (t0) => {
 /**
 * The parts of a text input: the field frame, a group carrying the border and
 * its inlays, and the bare control inside it. A `Bar` is a strip of inlays along
-* the bottom edge of the group, for a control the inlays cannot sit beside. For
+* the bottom edge of the group, for a control the inlays cannot sit beside, and
+* an `Action` is any button placed in the group. For
 * the ordinary case, use the `TextField` shorthand, which is assembled from
 * exactly these parts. An `Affix` is decoration, so its meaning belongs in the
 * label or description too. `Error` renders the errors `Root` was given.
 *
 * @example
-* <TextInput.Root value={value} onValueChange={setValue} errors={errors} optionalLabel="optional">
-* 	<TextInput.Label>Email</TextInput.Label>
+* <TextInput.Root value={value} onValueChange={setValue} errors={errors} requiredness="optional">
+* 	<TextInput.Label>Email <Field.Requiredness optionalLabel="optional" /></TextInput.Label>
 * 	<TextInput.Group>
 * 		<TextInput.Input type="email" />
-* 		<TextInput.Clear label="Clear">
-* 			<CloseIcon />
-* 		</TextInput.Clear>
+* 		<TextInput.Clear
+* 			render={
+* 				<IconButton label="Clear" variant="tertiary" size="sm">
+* 					<CloseIcon />
+* 				</IconButton>
+* 			}
+* 		/>
 * 	</TextInput.Group>
 * 	<TextInput.Error />
 * </TextInput.Root>
@@ -691,6 +839,7 @@ var TextInput = {
 	Inlay: TextInputInlay,
 	Affix: TextInputAffix,
 	Input: TextInputInput,
+	Action: TextInputAction,
 	Clear: TextInputClear,
 	Copy: TextInputCopy,
 	Reveal: TextInputReveal,