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

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

@@ -1,16 +1,18 @@
 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;
+    clearIcon?: 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 clear button's icon. */
+    clearIcon: ReactNode;
 }>;
 /** The copy-to-clipboard button: off, or on with the copy it shows. */
 export type TextFieldCopyProps = Readonly<{
@@ -18,6 +20,9 @@ export type TextFieldCopyProps = Readonly<{
     copyLabel?: undefined;
     copiedLabel?: undefined;
     copyFailedLabel?: undefined;
+    copyIcon?: undefined;
+    copiedIcon?: undefined;
+    copyFailedIcon?: undefined;
 }> | Readonly<{
     /** Adds a copy-to-clipboard button once the field holds a value. */
     copyable: true;
@@ -27,6 +32,12 @@ export type TextFieldCopyProps = Readonly<{
     copiedLabel: string;
     /** Announced when copying failed and the text is selected instead. */
     copyFailedLabel: string;
+    /** The copy button's icon. */
+    copyIcon: ReactNode;
+    /** The copy button's icon once the value is on the clipboard. Left out, it keeps `copyIcon`. */
+    copiedIcon?: ReactNode;
+    /** The copy button's icon once copying failed. Left out, it keeps `copyIcon`. */
+    copyFailedIcon?: ReactNode;
 }>;
 /** 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<{
@@ -34,7 +45,7 @@ export type TextFieldBaseProps = FieldProps & Omit<TextInputRootProps, keyof Fie
     /** Keeps the label in the accessibility tree but out of view. */
     labelHidden?: boolean;
     /** Decorative leading icon inside the group. */
-    icon?: SvgComponent;
+    icon?: ReactNode;
     /** Static leading text, such as a currency sign. */
     prefix?: ReactNode;
     /** Static trailing text, such as a unit. */
@@ -54,4 +65,4 @@ export type TextFieldProps = TextFieldBaseProps & TextFieldClearProps & TextFiel
  * 	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;
+export declare const TextField: ({ label, labelHidden, description, errors, requiredness, optionalLabel, icon, prefix, suffix, clearable, clearLabel, clearIcon, copyable, copyLabel, copiedLabel, copyFailedLabel, copyIcon, copiedIcon, copyFailedIcon, value, onValueChange, disabled, readOnly, dirty, touched, pending, maxLength, state, className, ...inputProps }: TextFieldProps) => ReactNode;

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

@@ -1,4 +1,3 @@
-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";
@@ -18,12 +17,16 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * />
 */
 var TextField = (t0) => {
-	const $ = c(75);
+	const $ = c(83);
 	let className;
+	let clearIcon;
 	let clearLabel;
 	let clearable;
+	let copiedIcon;
 	let copiedLabel;
+	let copyFailedIcon;
 	let copyFailedLabel;
+	let copyIcon;
 	let copyLabel;
 	let copyable;
 	let description;
@@ -46,127 +49,145 @@ var TextField = (t0) => {
 	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);
+		({label, labelHidden: t1, description, errors, requiredness, optionalLabel, icon, prefix, suffix, clearable, clearLabel, clearIcon, copyable, copyLabel, copiedLabel, copyFailedLabel, copyIcon, copiedIcon, copyFailedIcon, 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;
+		$[2] = clearIcon;
+		$[3] = clearLabel;
+		$[4] = clearable;
+		$[5] = copiedIcon;
+		$[6] = copiedLabel;
+		$[7] = copyFailedIcon;
+		$[8] = copyFailedLabel;
+		$[9] = copyIcon;
+		$[10] = copyLabel;
+		$[11] = copyable;
+		$[12] = description;
+		$[13] = dirty;
+		$[14] = disabled;
+		$[15] = errors;
+		$[16] = icon;
+		$[17] = inputProps;
+		$[18] = label;
+		$[19] = maxLength;
+		$[20] = onValueChange;
+		$[21] = optionalLabel;
+		$[22] = pending;
+		$[23] = prefix;
+		$[24] = readOnly;
+		$[25] = requiredness;
+		$[26] = state;
+		$[27] = suffix;
+		$[28] = t1;
+		$[29] = touched;
+		$[30] = 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];
+		clearIcon = $[2];
+		clearLabel = $[3];
+		clearable = $[4];
+		copiedIcon = $[5];
+		copiedLabel = $[6];
+		copyFailedIcon = $[7];
+		copyFailedLabel = $[8];
+		copyIcon = $[9];
+		copyLabel = $[10];
+		copyable = $[11];
+		description = $[12];
+		dirty = $[13];
+		disabled = $[14];
+		errors = $[15];
+		icon = $[16];
+		inputProps = $[17];
+		label = $[18];
+		maxLength = $[19];
+		onValueChange = $[20];
+		optionalLabel = $[21];
+		pending = $[22];
+		prefix = $[23];
+		readOnly = $[24];
+		requiredness = $[25];
+		state = $[26];
+		suffix = $[27];
+		t1 = $[28];
+		touched = $[29];
+		value = $[30];
 	}
 	const t2 = (t1 === void 0 ? false : t1) ? text_field_module_default.visuallyHidden : void 0;
 	let t3;
-	if ($[27] !== label || $[28] !== t2) {
+	if ($[31] !== label || $[32] !== t2) {
 		t3 = /* @__PURE__ */ jsx(TextInput.Label, {
 			className: t2,
 			children: label
 		});
-		$[27] = label;
-		$[28] = t2;
-		$[29] = t3;
-	} else t3 = $[29];
+		$[31] = label;
+		$[32] = t2;
+		$[33] = t3;
+	} else t3 = $[33];
 	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];
+	if ($[34] !== icon) {
+		t4 = icon !== void 0 && /* @__PURE__ */ jsx(TextInput.Inlay, {
+			"aria-hidden": "true",
+			children: icon
+		});
+		$[34] = icon;
+		$[35] = t4;
+	} else t4 = $[35];
 	let t5;
-	if ($[32] !== prefix) {
+	if ($[36] !== prefix) {
 		t5 = prefix !== void 0 && /* @__PURE__ */ jsx(TextInput.Affix, { children: prefix });
-		$[32] = prefix;
-		$[33] = t5;
-	} else t5 = $[33];
+		$[36] = prefix;
+		$[37] = t5;
+	} else t5 = $[37];
 	let t6;
-	if ($[34] !== inputProps) {
+	if ($[38] !== inputProps) {
 		t6 = /* @__PURE__ */ jsx(TextInput.Input, { ...inputProps });
-		$[34] = inputProps;
-		$[35] = t6;
-	} else t6 = $[35];
+		$[38] = inputProps;
+		$[39] = t6;
+	} else t6 = $[39];
 	let t7;
-	if ($[36] !== suffix) {
+	if ($[40] !== suffix) {
 		t7 = suffix !== void 0 && /* @__PURE__ */ jsx(TextInput.Affix, { children: suffix });
-		$[36] = suffix;
-		$[37] = t7;
-	} else t7 = $[37];
+		$[40] = suffix;
+		$[41] = t7;
+	} else t7 = $[41];
 	let t8;
-	if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
 		t8 = /* @__PURE__ */ jsx(TextInput.Pending, {});
-		$[38] = t8;
-	} else t8 = $[38];
+		$[42] = t8;
+	} else t8 = $[42];
 	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];
+	if ($[43] !== clearIcon || $[44] !== clearLabel || $[45] !== clearable) {
+		t9 = clearable === true && /* @__PURE__ */ jsx(TextInput.Clear, {
+			label: clearLabel,
+			children: clearIcon
+		});
+		$[43] = clearIcon;
+		$[44] = clearLabel;
+		$[45] = clearable;
+		$[46] = t9;
+	} else t9 = $[46];
 	let t10;
-	if ($[42] !== copiedLabel || $[43] !== copyFailedLabel || $[44] !== copyLabel || $[45] !== copyable) {
+	if ($[47] !== copiedIcon || $[48] !== copiedLabel || $[49] !== copyFailedIcon || $[50] !== copyFailedLabel || $[51] !== copyIcon || $[52] !== copyLabel || $[53] !== copyable) {
 		t10 = copyable === true && /* @__PURE__ */ jsx(TextInput.Copy, {
 			label: copyLabel,
 			copiedLabel,
-			failedLabel: copyFailedLabel
+			failedLabel: copyFailedLabel,
+			copiedIcon,
+			failedIcon: copyFailedIcon,
+			children: copyIcon
 		});
-		$[42] = copiedLabel;
-		$[43] = copyFailedLabel;
-		$[44] = copyLabel;
-		$[45] = copyable;
-		$[46] = t10;
-	} else t10 = $[46];
+		$[47] = copiedIcon;
+		$[48] = copiedLabel;
+		$[49] = copyFailedIcon;
+		$[50] = copyFailedLabel;
+		$[51] = copyIcon;
+		$[52] = copyLabel;
+		$[53] = copyable;
+		$[54] = t10;
+	} else t10 = $[54];
 	let t11;
-	if ($[47] !== t10 || $[48] !== t4 || $[49] !== t5 || $[50] !== t6 || $[51] !== t7 || $[52] !== t9) {
+	if ($[55] !== t10 || $[56] !== t4 || $[57] !== t5 || $[58] !== t6 || $[59] !== t7 || $[60] !== t9) {
 		t11 = /* @__PURE__ */ jsxs(TextInput.Group, { children: [
 			t4,
 			t5,
@@ -176,32 +197,32 @@ var TextField = (t0) => {
 			t9,
 			t10
 		] });
-		$[47] = t10;
-		$[48] = t4;
-		$[49] = t5;
-		$[50] = t6;
-		$[51] = t7;
-		$[52] = t9;
-		$[53] = t11;
-	} else t11 = $[53];
+		$[55] = t10;
+		$[56] = t4;
+		$[57] = t5;
+		$[58] = t6;
+		$[59] = t7;
+		$[60] = t9;
+		$[61] = t11;
+	} else t11 = $[61];
 	let t12;
-	if ($[54] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[62] === Symbol.for("react.memo_cache_sentinel")) {
 		t12 = /* @__PURE__ */ jsx(TextInput.Counter, {});
-		$[54] = t12;
-	} else t12 = $[54];
+		$[62] = t12;
+	} else t12 = $[62];
 	let t13;
-	if ($[55] !== description) {
+	if ($[63] !== description) {
 		t13 = /* @__PURE__ */ jsx(TextInput.Description, { children: description });
-		$[55] = description;
-		$[56] = t13;
-	} else t13 = $[56];
+		$[63] = description;
+		$[64] = t13;
+	} else t13 = $[64];
 	let t14;
-	if ($[57] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[65] === Symbol.for("react.memo_cache_sentinel")) {
 		t14 = /* @__PURE__ */ jsx(TextInput.Error, {});
-		$[57] = t14;
-	} else t14 = $[57];
+		$[65] = t14;
+	} else t14 = $[65];
 	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) {
+	if ($[66] !== className || $[67] !== dirty || $[68] !== disabled || $[69] !== errors || $[70] !== maxLength || $[71] !== onValueChange || $[72] !== optionalLabel || $[73] !== pending || $[74] !== readOnly || $[75] !== requiredness || $[76] !== state || $[77] !== t11 || $[78] !== t13 || $[79] !== t3 || $[80] !== touched || $[81] !== value) {
 		t15 = /* @__PURE__ */ jsxs(TextInput.Root, {
 			value,
 			onValueChange,
@@ -224,24 +245,24 @@ var TextField = (t0) => {
 				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];
+		$[66] = className;
+		$[67] = dirty;
+		$[68] = disabled;
+		$[69] = errors;
+		$[70] = maxLength;
+		$[71] = onValueChange;
+		$[72] = optionalLabel;
+		$[73] = pending;
+		$[74] = readOnly;
+		$[75] = requiredness;
+		$[76] = state;
+		$[77] = t11;
+		$[78] = t13;
+		$[79] = t3;
+		$[80] = touched;
+		$[81] = value;
+		$[82] = t15;
+	} else t15 = $[82];
 	return t15;
 };
 export { TextField };

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

@@ -14,20 +14,65 @@ export type TextInputRootProps = Omit<FieldProps, "label" | "description"> & Rea
     className?: string;
     children?: ReactNode;
 }>;
+/**
+ * The field frame around a text input, holding its value and projecting its
+ * state onto every part.
+ *
+ * @example
+ * <TextInput.Root value={value} onValueChange={setValue} optionalLabel="optional">…</TextInput.Root>
+ */
 declare const TextInputRoot: ({ value, onValueChange, disabled, readOnly, requiredness, optionalLabel, errors, dirty, touched, pending, maxLength, state, className, children, }: TextInputRootProps) => ReactNode;
 export type TextInputLabelProps = InputLabelProps;
+/**
+ * The bordered box holding the control and its inlays.
+ *
+ * @example
+ * <TextInput.Group><TextInput.Input /></TextInput.Group>
+ */
 declare const TextInputGroup: ({ className, children, ...props }: ComponentProps<"div">) => ReactNode;
+/**
+ * A strip of inlays along the bottom edge of the group.
+ *
+ * @example
+ * <TextInput.Bar><TextInput.Counter /></TextInput.Bar>
+ */
 declare const TextInputBar: ({ className, ...props }: ComponentProps<"div">) => ReactNode;
+/**
+ * A slot beside the control inside the group, such as an icon.
+ *
+ * @example
+ * <TextInput.Inlay aria-hidden="true"><SearchIcon /></TextInput.Inlay>
+ */
 declare const TextInputInlay: ({ className, ...props }: ComponentProps<"span">) => ReactNode;
+/**
+ * Static text beside the control, such as a unit. Decoration only.
+ *
+ * @example
+ * <TextInput.Affix>kg</TextInput.Affix>
+ */
 declare const TextInputAffix: ({ className, ...props }: ComponentProps<"span">) => ReactNode;
 export type TextInputInputProps = Omit<BaseInputProps, "value" | "defaultValue" | "onValueChange">;
+/**
+ * The bare control, bound to `Root`'s value.
+ *
+ * @example
+ * <TextInput.Input type="email" />
+ */
 declare const TextInputInput: ({ type, className, ...props }: TextInputInputProps) => ReactNode;
 export type TextInputClearProps = Readonly<{
     /** Accessible name and tooltip hint, such as "Clear". */
     label: string;
     className?: string;
+    /** The icon the button shows. */
+    children: ReactNode;
 }>;
-declare const TextInputClear: ({ label, className, }: TextInputClearProps) => ReactNode;
+/**
+ * The icon-only button that empties the control, shown once it holds a value.
+ *
+ * @example
+ * <TextInput.Clear label="Clear"><CloseIcon /></TextInput.Clear>
+ */
+declare const TextInputClear: ({ label, className, children, }: TextInputClearProps) => ReactNode;
 export type TextInputCopyProps = Readonly<{
     /** Accessible name and tooltip hint, such as "Copy". */
     label: string;
@@ -35,9 +80,47 @@ export type TextInputCopyProps = Readonly<{
     copiedLabel: string;
     /** Accessible name and announcement once copying failed and the text is selected instead. */
     failedLabel: string;
+    /** The icon while the confirmation shows. Left out, the button keeps its own. */
+    copiedIcon?: ReactNode;
+    /** The icon once copying failed. Left out, the button keeps its own. */
+    failedIcon?: ReactNode;
     className?: string;
+    /** The icon the button shows. */
+    children: ReactNode;
 }>;
-declare const TextInputCopy: ({ label, copiedLabel, failedLabel, className, }: TextInputCopyProps) => ReactNode;
+/**
+ * The icon-only button that copies the value to the clipboard, shown once it
+ * holds one, and announces whether the copy landed.
+ *
+ * @example
+ * <TextInput.Copy label="Copy" copiedLabel="Copied" failedLabel="Copy failed, text selected"><CopyIcon /></TextInput.Copy>
+ */
+declare const TextInputCopy: ({ label, copiedLabel, failedLabel, copiedIcon, failedIcon, className, children, }: TextInputCopyProps) => ReactNode;
+export type TextInputRevealProps = Readonly<{
+    /** Whether the concealed value shows as text. */
+    revealed: boolean;
+    onRevealedChange: (revealed: boolean) => void;
+    /** Accessible name and tooltip hint, such as "Show password". */
+    label: string;
+    className?: string;
+    /** The icon the button shows. */
+    children: ReactNode;
+}>;
+/**
+ * The icon-only toggle that shows a concealed value, such as a password, as
+ * text. The caller switches the `Input`'s `type` with `revealed`.
+ *
+ * @example
+ * <TextInput.Reveal revealed={revealed} onRevealedChange={setRevealed} label="Show password"><VisibilityIcon /></TextInput.Reveal>
+ */
+declare const TextInputReveal: ({ revealed, onRevealedChange, label, className, children, }: TextInputRevealProps) => ReactNode;
+/**
+ * The value's length against `Root`'s `maxLength`, toned as it nears the limit.
+ * Renders nothing without a `maxLength`.
+ *
+ * @example
+ * <TextInput.Counter />
+ */
 declare const TextInputCounter: ({ className, ...props }: ComponentProps<"span">) => ReactNode;
 export type TextInputPendingProps = InputPendingProps;
 export type TextInputErrorProps = InputErrorProps;
@@ -52,6 +135,7 @@ export type TextInputParts = Readonly<{
     Input: typeof TextInputInput;
     Clear: typeof TextInputClear;
     Copy: typeof TextInputCopy;
+    Reveal: typeof TextInputReveal;
     Counter: typeof TextInputCounter;
     Pending: typeof InputPending;
     Description: typeof Field.Description;
@@ -70,7 +154,9 @@ export type TextInputParts = Readonly<{
  * 	<TextInput.Label>Email</TextInput.Label>
  * 	<TextInput.Group>
  * 		<TextInput.Input type="email" />
- * 		<TextInput.Clear label="Clear" />
+ * 		<TextInput.Clear label="Clear">
+ * 			<CloseIcon />
+ * 		</TextInput.Clear>
  * 	</TextInput.Group>
  * 	<TextInput.Error />
  * </TextInput.Root>