@igne-agency/react-web-ui 0.0.0-stage → 0.3.0

package/dist/components/text-field/connect-text-preset.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentType, ReactNode } from "react";
+import { type ConnectedFieldProps } from "../../lib/forms/use-connected-field.ts";
+import type { TextPresetProps } from "./text-preset.ts";
+/** The props a text preset's bridge takes: the preset's own, less what the form supplies. */
+export type TSFTextPresetProps<TExtra extends object> = Omit<TextPresetProps, keyof ConnectedFieldProps | "value" | "onValueChange"> & TExtra;
+/**
+ * Wraps a text preset as a TanStack Form bridge. The format is the preset's;
+ * the rule behind it belongs to the form's schema.
+ *
+ * @example
+ * export const TSFEmailField = connectTextPreset(EmailField);
+ */
+export declare const connectTextPreset: <TExtra extends object>(Preset: ComponentType<TextPresetProps & TExtra>) => ((props: TSFTextPresetProps<TExtra>) => ReactNode);

package/dist/components/text-field/connect-text-preset.js

@@ -0,0 +1,34 @@
+import { useConnectedField } from "../../lib/forms/use-connected-field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/text-field/connect-text-preset.tsx
+/**
+* Wraps a text preset as a TanStack Form bridge. The format is the preset's;
+* the rule behind it belongs to the form's schema.
+*
+* @example
+* export const TSFEmailField = connectTextPreset(EmailField);
+*/
+var connectTextPreset = (Preset) => {
+	const Connected = (props) => {
+		const $ = c(5);
+		const { field, props: connected } = useConnectedField(props.label);
+		let t0;
+		if ($[0] !== connected || $[1] !== field.handleChange || $[2] !== field.state.value || $[3] !== props) {
+			t0 = /* @__PURE__ */ jsx(Preset, {
+				...props,
+				...connected,
+				value: field.state.value,
+				onValueChange: field.handleChange
+			});
+			$[0] = connected;
+			$[1] = field.handleChange;
+			$[2] = field.state.value;
+			$[3] = props;
+			$[4] = t0;
+		} else t0 = $[4];
+		return t0;
+	};
+	return Connected;
+};
+export { connectTextPreset };

package/dist/components/text-field/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./connect-text-preset.tsx";
+export * from "./text-field.tsx";
+export * from "./text-input.tsx";
+export * from "./text-preset.ts";
+export * from "./tsf-text-field.tsx";

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

@@ -0,0 +1,5 @@
+import { connectTextPreset } from "./connect-text-preset.js";
+import { TextField } from "./text-field.js";
+import { TextInput } from "./text-input.js";
+import { TSFTextField } from "./tsf-text-field.js";
+export { TSFTextField, TextField, TextInput, connectTextPreset };

package/dist/components/text-field/text-field.css

@@ -0,0 +1,171 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._root_1kpis_3 {
+    min-inline-size: 0;
+  }
+  ._group_1kpis_6 {
+    --field-fg: var(--sys-color-text);
+    --field-muted-fg: var(--sys-color-text-muted);
+    --field-placeholder-fg: var(--sys-color-text-placeholder);
+    align-items: center;
+    box-sizing: border-box;
+    min-block-size: calc(1lh + 2 * var(--sys-unit-6) + 2 * 1px);
+    border: 1px solid var(--sys-color-border);
+    border-radius: var(--sys-radius-sm);
+    background: var(--sys-color-surface);
+    padding: var(--sys-unit-6);
+    color: var(--field-fg);
+    font: var(--sys-font-body-medium);
+  }
+  ._group_1kpis_6 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._group_1kpis_6[data-focus-visible] {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  @media not (prefers-reduced-motion) {
+    ._group_1kpis_6 {
+      transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._group_1kpis_6:hover:not([data-disabled], [data-readonly]), ._group_1kpis_6[data-focused], ._group_1kpis_6[data-popup-open] {
+    border-color: var(--sys-color-primary);
+  }
+  ._group_1kpis_6[data-readonly] {
+    --field-fg: var(--sys-color-text);
+    border-style: dashed;
+    border-color: var(--sys-color-outline);
+    background: var(--sys-color-surface-high);
+    color: var(--field-fg);
+  }
+  ._group_1kpis_6[data-pending] {
+    cursor: progress;
+    caret-color: var(--sys-color-text-muted);
+  }
+  ._group_1kpis_6[data-invalid] {
+    --field-fg: var(--sys-color-error-fg);
+    --field-muted-fg: var(--sys-color-error-fg);
+    --field-placeholder-fg: var(--sys-color-error-fg);
+    border-color: var(--sys-color-error-fg);
+    background-color: var(--sys-color-error-bg);
+    color: var(--field-fg);
+  }
+  ._group_1kpis_6[data-disabled] {
+    --field-fg: var(--sys-color-disabled-fg);
+    --field-muted-fg: var(--sys-color-disabled-fg);
+    --field-placeholder-fg: var(--sys-color-disabled-fg);
+    color: var(--sys-color-disabled-fg);
+    cursor: not-allowed;
+    background: var(--sys-color-disabled-bg);
+  }
+  ._group_1kpis_6 {
+    position: relative;
+    display: flex;
+    gap: var(--sys-unit-4);
+  }
+  ._group_1kpis_6 {
+    inline-size: 100%;
+    cursor: text;
+  }
+  ._control_1kpis_71 {
+    flex: 1;
+    min-inline-size: 0;
+    border: none;
+    background: none;
+    padding: 0;
+    color: inherit;
+    font: inherit;
+  }
+  ._control_1kpis_71::-webkit-search-cancel-button {
+    display: none;
+    appearance: none;
+  }
+  ._control_1kpis_71::-webkit-search-decoration {
+    display: none;
+    appearance: none;
+  }
+  ._control_1kpis_71 {
+    line-height: normal;
+  }
+  ._control_1kpis_71::placeholder {
+    color: var(--field-placeholder-fg);
+  }
+  ._bar_1kpis_94 {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--sys-unit-4);
+    pointer-events: none;
+  }
+  ._bar_1kpis_94:empty {
+    display: none;
+  }
+  ._inlay_1kpis_104 {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: var(--sys-unit-2);
+    color: var(--field-muted-fg);
+    font: var(--sys-font-body-medium);
+    cursor: default;
+    pointer-events: none;
+    line-height: normal;
+  }
+  ._action_1kpis_115 {
+    position: relative;
+    flex: none;
+    margin-block: calc(-1 * var(--sys-unit-6));
+    cursor: pointer;
+  }
+  @media (any-pointer: coarse) {
+    ._action_1kpis_115::before {
+      content: "";
+      position: absolute;
+      inset: 50%;
+      translate: -50% -50%;
+      inline-size: max(100%, var(--sys-unit-22));
+      block-size: var(--sys-unit-22);
+    }
+  }
+  ._copyStatus_1kpis_131 {
+    position: absolute;
+    overflow: hidden;
+    clip-path: inset(50%);
+    inline-size: 1px;
+    block-size: 1px;
+    white-space: nowrap;
+  }
+  ._counter_1kpis_139 {
+    --counter-fg: var(
+    	--text-field-counter-fg,
+    	var(--sys-color-text-muted)
+    );
+    align-self: flex-end;
+    justify-self: end;
+    color: var(--counter-fg);
+    font: var(--text-field-counter-font, var(--sys-font-body-small));
+    font-variant-numeric: tabular-nums;
+    cursor: default;
+  }
+  ._counter_1kpis_139[data-tone=warning] {
+    --counter-fg: var(
+    	--text-field-counter-warning-fg,
+    	var(--sys-color-warning-fg)
+    );
+  }
+  ._counter_1kpis_139[data-tone=error] {
+    --counter-fg: var(
+    	--text-field-counter-error-fg,
+    	var(--sys-color-error-fg)
+    );
+  }
+  ._visuallyHidden_1kpis_163 {
+    position: absolute;
+    overflow: hidden;
+    clip-path: inset(50%);
+    inline-size: 1px;
+    block-size: 1px;
+    white-space: nowrap;
+  }
+}

package/dist/components/text-field/text-field.d.ts

@@ -0,0 +1,57 @@
+import type { ReactNode } from "react";
+import type { FieldBlurHandler, FieldProps } from "../field/index.ts";
+import { type SvgComponent } from "../icon/index.ts";
+import { type TextInputInputProps, type TextInputRootProps } from "./text-input.tsx";
+/** The clear button: off, or on with its accessible name. */
+export type TextFieldClearProps = Readonly<{
+    clearable?: false;
+    clearLabel?: undefined;
+}> | Readonly<{
+    /** Adds the clear button once the field holds a value. */
+    clearable: true;
+    /** The clear button's accessible name and tooltip, such as "Clear". */
+    clearLabel: string;
+}>;
+/** The copy-to-clipboard button: off, or on with the copy it shows. */
+export type TextFieldCopyProps = Readonly<{
+    copyable?: false;
+    copyLabel?: undefined;
+    copiedLabel?: undefined;
+    copyFailedLabel?: undefined;
+}> | Readonly<{
+    /** Adds a copy-to-clipboard button once the field holds a value. */
+    copyable: true;
+    /** The copy button's accessible name and tooltip, such as "Copy". */
+    copyLabel: string;
+    /** Announced once the value is on the clipboard, such as "Copied". */
+    copiedLabel: string;
+    /** Announced when copying failed and the text is selected instead. */
+    copyFailedLabel: string;
+}>;
+/** Every `TextField` prop but the optional clear and copy buttons. */
+export type TextFieldBaseProps = FieldProps & Omit<TextInputRootProps, keyof FieldProps | "children"> & Pick<TextInputInputProps, "type" | "placeholder" | "name" | "id" | "autoComplete" | "autoCapitalize" | "inputMode" | "enterKeyHint" | "spellCheck" | "onFocus"> & Readonly<{
+    onBlur?: FieldBlurHandler;
+    /** Keeps the label in the accessibility tree but out of view. */
+    labelHidden?: boolean;
+    /** Decorative leading icon inside the group. */
+    icon?: SvgComponent;
+    /** Static leading text, such as a currency sign. */
+    prefix?: ReactNode;
+    /** Static trailing text, such as a unit. */
+    suffix?: ReactNode;
+}>;
+export type TextFieldProps = TextFieldBaseProps & TextFieldClearProps & TextFieldCopyProps;
+/**
+ * A labelled text field: label, a bordered group holding the control with its
+ * optional icon, affixes, pending spinner, clear and copy buttons, then the
+ * counter, description and error. Assembled from `TextInput`'s parts.
+ *
+ * @example
+ * <TextField
+ * 	label="Name"
+ * 	optionalLabel="optional"
+ * 	value={name}
+ * 	onValueChange={setName}
+ * />
+ */
+export declare const TextField: ({ label, labelHidden, description, errors, requiredness, optionalLabel, icon, prefix, suffix, clearable, clearLabel, copyable, copyLabel, copiedLabel, copyFailedLabel, value, onValueChange, disabled, readOnly, dirty, touched, pending, maxLength, state, className, ...inputProps }: TextFieldProps) => ReactNode;

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

@@ -0,0 +1,247 @@
+import { Icon } from "../icon/icon.js";
+import { TextInput } from "./text-input.js";
+import text_field_module_default from "./text-field.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/text-field/text-field.tsx
+/**
+* A labelled text field: label, a bordered group holding the control with its
+* optional icon, affixes, pending spinner, clear and copy buttons, then the
+* counter, description and error. Assembled from `TextInput`'s parts.
+*
+* @example
+* <TextField
+* 	label="Name"
+* 	optionalLabel="optional"
+* 	value={name}
+* 	onValueChange={setName}
+* />
+*/
+var TextField = (t0) => {
+	const $ = c(75);
+	let className;
+	let clearLabel;
+	let clearable;
+	let copiedLabel;
+	let copyFailedLabel;
+	let copyLabel;
+	let copyable;
+	let description;
+	let dirty;
+	let disabled;
+	let errors;
+	let icon;
+	let inputProps;
+	let label;
+	let maxLength;
+	let onValueChange;
+	let optionalLabel;
+	let pending;
+	let prefix;
+	let readOnly;
+	let requiredness;
+	let state;
+	let suffix;
+	let t1;
+	let touched;
+	let value;
+	if ($[0] !== t0) {
+		({label, labelHidden: t1, description, errors, requiredness, optionalLabel, icon, prefix, suffix, clearable, clearLabel, copyable, copyLabel, copiedLabel, copyFailedLabel, value, onValueChange, disabled, readOnly, dirty, touched, pending, maxLength, state, className, ...inputProps} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = clearLabel;
+		$[3] = clearable;
+		$[4] = copiedLabel;
+		$[5] = copyFailedLabel;
+		$[6] = copyLabel;
+		$[7] = copyable;
+		$[8] = description;
+		$[9] = dirty;
+		$[10] = disabled;
+		$[11] = errors;
+		$[12] = icon;
+		$[13] = inputProps;
+		$[14] = label;
+		$[15] = maxLength;
+		$[16] = onValueChange;
+		$[17] = optionalLabel;
+		$[18] = pending;
+		$[19] = prefix;
+		$[20] = readOnly;
+		$[21] = requiredness;
+		$[22] = state;
+		$[23] = suffix;
+		$[24] = t1;
+		$[25] = touched;
+		$[26] = value;
+	} else {
+		className = $[1];
+		clearLabel = $[2];
+		clearable = $[3];
+		copiedLabel = $[4];
+		copyFailedLabel = $[5];
+		copyLabel = $[6];
+		copyable = $[7];
+		description = $[8];
+		dirty = $[9];
+		disabled = $[10];
+		errors = $[11];
+		icon = $[12];
+		inputProps = $[13];
+		label = $[14];
+		maxLength = $[15];
+		onValueChange = $[16];
+		optionalLabel = $[17];
+		pending = $[18];
+		prefix = $[19];
+		readOnly = $[20];
+		requiredness = $[21];
+		state = $[22];
+		suffix = $[23];
+		t1 = $[24];
+		touched = $[25];
+		value = $[26];
+	}
+	const t2 = (t1 === void 0 ? false : t1) ? text_field_module_default.visuallyHidden : void 0;
+	let t3;
+	if ($[27] !== label || $[28] !== t2) {
+		t3 = /* @__PURE__ */ jsx(TextInput.Label, {
+			className: t2,
+			children: label
+		});
+		$[27] = label;
+		$[28] = t2;
+		$[29] = t3;
+	} else t3 = $[29];
+	let t4;
+	if ($[30] !== icon) {
+		t4 = icon !== void 0 && /* @__PURE__ */ jsx(TextInput.Inlay, { children: /* @__PURE__ */ jsx(Icon, {
+			svg: icon,
+			label: ""
+		}) });
+		$[30] = icon;
+		$[31] = t4;
+	} else t4 = $[31];
+	let t5;
+	if ($[32] !== prefix) {
+		t5 = prefix !== void 0 && /* @__PURE__ */ jsx(TextInput.Affix, { children: prefix });
+		$[32] = prefix;
+		$[33] = t5;
+	} else t5 = $[33];
+	let t6;
+	if ($[34] !== inputProps) {
+		t6 = /* @__PURE__ */ jsx(TextInput.Input, { ...inputProps });
+		$[34] = inputProps;
+		$[35] = t6;
+	} else t6 = $[35];
+	let t7;
+	if ($[36] !== suffix) {
+		t7 = suffix !== void 0 && /* @__PURE__ */ jsx(TextInput.Affix, { children: suffix });
+		$[36] = suffix;
+		$[37] = t7;
+	} else t7 = $[37];
+	let t8;
+	if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(TextInput.Pending, {});
+		$[38] = t8;
+	} else t8 = $[38];
+	let t9;
+	if ($[39] !== clearLabel || $[40] !== clearable) {
+		t9 = clearable === true && /* @__PURE__ */ jsx(TextInput.Clear, { label: clearLabel });
+		$[39] = clearLabel;
+		$[40] = clearable;
+		$[41] = t9;
+	} else t9 = $[41];
+	let t10;
+	if ($[42] !== copiedLabel || $[43] !== copyFailedLabel || $[44] !== copyLabel || $[45] !== copyable) {
+		t10 = copyable === true && /* @__PURE__ */ jsx(TextInput.Copy, {
+			label: copyLabel,
+			copiedLabel,
+			failedLabel: copyFailedLabel
+		});
+		$[42] = copiedLabel;
+		$[43] = copyFailedLabel;
+		$[44] = copyLabel;
+		$[45] = copyable;
+		$[46] = t10;
+	} else t10 = $[46];
+	let t11;
+	if ($[47] !== t10 || $[48] !== t4 || $[49] !== t5 || $[50] !== t6 || $[51] !== t7 || $[52] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(TextInput.Group, { children: [
+			t4,
+			t5,
+			t6,
+			t7,
+			t8,
+			t9,
+			t10
+		] });
+		$[47] = t10;
+		$[48] = t4;
+		$[49] = t5;
+		$[50] = t6;
+		$[51] = t7;
+		$[52] = t9;
+		$[53] = t11;
+	} else t11 = $[53];
+	let t12;
+	if ($[54] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(TextInput.Counter, {});
+		$[54] = t12;
+	} else t12 = $[54];
+	let t13;
+	if ($[55] !== description) {
+		t13 = /* @__PURE__ */ jsx(TextInput.Description, { children: description });
+		$[55] = description;
+		$[56] = t13;
+	} else t13 = $[56];
+	let t14;
+	if ($[57] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx(TextInput.Error, {});
+		$[57] = t14;
+	} else t14 = $[57];
+	let t15;
+	if ($[58] !== className || $[59] !== dirty || $[60] !== disabled || $[61] !== errors || $[62] !== maxLength || $[63] !== onValueChange || $[64] !== optionalLabel || $[65] !== pending || $[66] !== readOnly || $[67] !== requiredness || $[68] !== state || $[69] !== t11 || $[70] !== t13 || $[71] !== t3 || $[72] !== touched || $[73] !== value) {
+		t15 = /* @__PURE__ */ jsxs(TextInput.Root, {
+			value,
+			onValueChange,
+			disabled,
+			readOnly,
+			requiredness,
+			optionalLabel,
+			errors,
+			dirty,
+			touched,
+			pending,
+			maxLength,
+			state,
+			className,
+			children: [
+				t3,
+				t11,
+				t12,
+				t13,
+				t14
+			]
+		});
+		$[58] = className;
+		$[59] = dirty;
+		$[60] = disabled;
+		$[61] = errors;
+		$[62] = maxLength;
+		$[63] = onValueChange;
+		$[64] = optionalLabel;
+		$[65] = pending;
+		$[66] = readOnly;
+		$[67] = requiredness;
+		$[68] = state;
+		$[69] = t11;
+		$[70] = t13;
+		$[71] = t3;
+		$[72] = touched;
+		$[73] = value;
+		$[74] = t15;
+	} else t15 = $[74];
+	return t15;
+};
+export { TextField };

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

@@ -0,0 +1,22 @@
+import './text-field.css';// src/components/text-field/text-field.module.scss
+var root = "_root_1kpis_3";
+var group = "_group_1kpis_6";
+var control = "_control_1kpis_71";
+var bar = "_bar_1kpis_94";
+var inlay = "_inlay_1kpis_104";
+var action = "_action_1kpis_115";
+var copyStatus = "_copyStatus_1kpis_131";
+var counter = "_counter_1kpis_139";
+var visuallyHidden = "_visuallyHidden_1kpis_163";
+var text_field_module_default = {
+	root,
+	group,
+	control,
+	bar,
+	inlay,
+	action,
+	copyStatus,
+	counter,
+	visuallyHidden
+};
+export { action, bar, control, copyStatus, counter, text_field_module_default as default, group, inlay, root, visuallyHidden };

package/dist/components/text-field/text-input-context.d.ts

@@ -0,0 +1,28 @@
+import { type Context } from "react";
+import type { FieldState } from "../field/index.ts";
+/** The element a text input's parts read from and return focus to. */
+export type TextInputControl = HTMLInputElement | HTMLTextAreaElement;
+/** What a text input's `Root` hands its parts. */
+export type TextInputContextValue = Readonly<{
+    /** Projected by `Root`; every part reads it, none of them own it. */
+    state: FieldState;
+    value: string;
+    setValue: (value: string) => void;
+    /** Ref callback the control part hands its element to. */
+    setControl: (control: TextInputControl | null) => void;
+    /** Returns focus to the control, after a part such as `Clear` acts. */
+    focusControl: () => void;
+    /** Focuses the control and selects its text, for the user to copy by hand. */
+    selectControl: () => void;
+    maxLength: number | undefined;
+}>;
+/** The context a text input's `Root` provides. */
+export declare const TextInputContext: Context<TextInputContextValue | null>;
+/**
+ * The surrounding text input's projected state and value, for a part of its own
+ * such as `Textarea`.
+ *
+ * @example
+ * const { value, setValue } = useTextInputContext();
+ */
+export declare const useTextInputContext: () => TextInputContextValue;

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

@@ -0,0 +1,16 @@
+import { useRequiredContext } from "../../lib/use-required-context.js";
+import { createContext } from "react";
+// src/components/text-field/text-input-context.ts
+/** The context a text input's `Root` provides. */
+var TextInputContext = createContext(null);
+/**
+* The surrounding text input's projected state and value, for a part of its own
+* such as `Textarea`.
+*
+* @example
+* const { value, setValue } = useTextInputContext();
+*/
+var useTextInputContext = () => {
+	return useRequiredContext(TextInputContext, "Text input parts must be rendered within <TextInput.Root>.");
+};
+export { TextInputContext, useTextInputContext };

package/dist/components/text-field/text-input.d.ts

@@ -0,0 +1,79 @@
+import { type InputProps as BaseInputProps } from "@base-ui/react/input";
+import { type ComponentProps, type ReactNode } from "react";
+import { Field, type FieldProps, type FieldState } from "../field/index.ts";
+import { InputError, type InputErrorProps, InputLabel, type InputLabelProps, InputPending, type InputPendingProps } from "../field/input-parts.tsx";
+export type TextInputRootProps = Omit<FieldProps, "label" | "description"> & Readonly<{
+    value: string;
+    onValueChange: (value: string) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** Advisory maximum, shown by `Counter`. The control does not truncate. */
+    maxLength?: number;
+    /** States no prop here owns, projected over the ones that do. */
+    state?: FieldState;
+    className?: string;
+    children?: ReactNode;
+}>;
+declare const TextInputRoot: ({ value, onValueChange, disabled, readOnly, requiredness, optionalLabel, errors, dirty, touched, pending, maxLength, state, className, children, }: TextInputRootProps) => ReactNode;
+export type TextInputLabelProps = InputLabelProps;
+declare const TextInputGroup: ({ className, children, ...props }: ComponentProps<"div">) => ReactNode;
+declare const TextInputBar: ({ className, ...props }: ComponentProps<"div">) => ReactNode;
+declare const TextInputInlay: ({ className, ...props }: ComponentProps<"span">) => ReactNode;
+declare const TextInputAffix: ({ className, ...props }: ComponentProps<"span">) => ReactNode;
+export type TextInputInputProps = Omit<BaseInputProps, "value" | "defaultValue" | "onValueChange">;
+declare const TextInputInput: ({ type, className, ...props }: TextInputInputProps) => ReactNode;
+export type TextInputClearProps = Readonly<{
+    /** Accessible name and tooltip hint, such as "Clear". */
+    label: string;
+    className?: string;
+}>;
+declare const TextInputClear: ({ label, className, }: TextInputClearProps) => ReactNode;
+export type TextInputCopyProps = Readonly<{
+    /** Accessible name and tooltip hint, such as "Copy". */
+    label: string;
+    /** Accessible name and announcement while the confirmation shows, such as "Copied". */
+    copiedLabel: string;
+    /** Accessible name and announcement once copying failed and the text is selected instead. */
+    failedLabel: string;
+    className?: string;
+}>;
+declare const TextInputCopy: ({ label, copiedLabel, failedLabel, className, }: TextInputCopyProps) => ReactNode;
+declare const TextInputCounter: ({ className, ...props }: ComponentProps<"span">) => ReactNode;
+export type TextInputPendingProps = InputPendingProps;
+export type TextInputErrorProps = InputErrorProps;
+/** The parts of a text input. */
+export type TextInputParts = Readonly<{
+    Root: typeof TextInputRoot;
+    Label: typeof InputLabel;
+    Group: typeof TextInputGroup;
+    Bar: typeof TextInputBar;
+    Inlay: typeof TextInputInlay;
+    Affix: typeof TextInputAffix;
+    Input: typeof TextInputInput;
+    Clear: typeof TextInputClear;
+    Copy: typeof TextInputCopy;
+    Counter: typeof TextInputCounter;
+    Pending: typeof InputPending;
+    Description: typeof Field.Description;
+    Error: typeof InputError;
+}>;
+/**
+ * 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 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.Group>
+ * 		<TextInput.Input type="email" />
+ * 		<TextInput.Clear label="Clear" />
+ * 	</TextInput.Group>
+ * 	<TextInput.Error />
+ * </TextInput.Root>
+ */
+export declare const TextInput: TextInputParts;
+export {};