@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/forms/TagInput/TagInput.d.ts

@@ -0,0 +1,144 @@
+import { ComponentPropsWithRef, Ref } from 'react';
+import { Size, Tone } from '../../../types/common';
+import { ChipVariant } from '../../data-display/Chip';
+/**
+ * Text used for announcements and fallbacks. Override any of them to
+ * localize the component.
+ */
+export interface TagInputMessages {
+    /** Announced after one or more tags are added. @default "Added {tag}" / "Added 3 tags: a, b, c" */
+    added: (tags: string[]) => string;
+    /** Announced after a tag is removed. @default "Removed {tag}" */
+    removed: (tag: string) => string;
+    /** Announced (and shown as a brief highlight) when a duplicate is entered. @default "{tag} is already added" */
+    duplicate: (tag: string) => string;
+    /** Error shown when `validate` returns `false`. @default "\"{tag}\" is not valid" */
+    invalid: (tag: string) => string;
+    /** Announced and added to the input's description when `maxTags` is reached. @default "Maximum of {max} tags reached" */
+    maxReached: (max: number) => string;
+    /** Native validation message when `required` and there are no tags. @default "Add at least one tag." */
+    required: string;
+    /** Shown in read-only mode when there are no tags. @default "None" */
+    empty: string;
+}
+export interface TagInputProps extends Omit<ComponentPropsWithRef<"input">, "size" | "value" | "defaultValue" | "type" | "children"> {
+    /** The tags (controlled). */
+    value?: string[];
+    /** Initial tags when uncontrolled. @default [] */
+    defaultValue?: string[];
+    /** Called with the full array of tags after any add or remove. */
+    onValueChange?: (value: string[]) => void;
+    /** The text being typed (controlled). */
+    inputValue?: string;
+    /** Initial text when uncontrolled. @default "" */
+    defaultInputValue?: string;
+    /** Called with the text in the input whenever it changes. */
+    onInputValueChange?: (inputValue: string) => void;
+    /**
+     * Strings that end a tag as they are typed, in addition to Enter. Pasted
+     * text is also split on them (and on line breaks). @default [","]
+     */
+    delimiters?: string[];
+    /**
+     * Tab adds the typed text as a tag (focus stays in the input). Tab still
+     * moves focus normally when the input is empty or the text is rejected,
+     * so it never traps the keyboard. @default false
+     */
+    addOnTab?: boolean;
+    /** Add the typed text as a tag when the input loses focus. @default false */
+    addOnBlur?: boolean;
+    /**
+     * Allow the same tag more than once. When `false`, entering an existing
+     * tag highlights it briefly and announces "{tag} is already added".
+     * Comparison is exact after `transform` (use `transform` to lowercase for
+     * case-insensitive tags). @default false
+     */
+    allowDuplicates?: boolean;
+    /**
+     * Maximum number of tags. When reached, the input becomes read-only, the
+     * placeholder hides, and "Maximum of N tags reached" is announced and
+     * added to the input's description.
+     */
+    maxTags?: number;
+    /**
+     * Checks a tag before it is added (after trimming and `transform`).
+     * Return `true` to accept, `false` to reject with a generic message, or a
+     * string to reject with that message. The message is shown under the
+     * field, linked with `aria-describedby`, and announced; the rejected text
+     * stays in the input so it can be fixed.
+     */
+    validate?: (tag: string) => boolean | string;
+    /** Normalizes a tag before validation and duplicate checks (e.g. `(t) => t.toLowerCase()`). */
+    transform?: (tag: string) => string;
+    /** Field height, padding, and chip size. Inherits from a surrounding `Field`. @default "md" */
+    size?: Size;
+    /** Disables the input and every chip (no remove buttons). Inherits from a surrounding `Field`. @default false */
+    disabled?: boolean;
+    /** Shows the tags without remove buttons or a text input. Inherits from a surrounding `Field`. @default false */
+    readOnly?: boolean;
+    /** Danger border and `aria-invalid`. Inherits from a surrounding `Field`. @default false */
+    invalid?: boolean;
+    /**
+     * Requires at least one tag. Sets `aria-required` on the input and a
+     * native validation message (`messages.required`) while there are no
+     * tags, so form submission is blocked. Inherits from a surrounding `Field`.
+     * @default false
+     */
+    required?: boolean;
+    /** Placeholder for the text input, shown only while there are no tags. */
+    placeholder?: string;
+    /**
+     * Form field name. Renders one `<input type="hidden" name={name}>` per
+     * tag, so `formData.getAll(name)` returns the tags as an array.
+     */
+    name?: string;
+    /** Chip variant for every tag. @default "soft" */
+    chipVariant?: ChipVariant;
+    /** Chip tone for every tag. @default "neutral" */
+    chipTone?: Tone;
+    /** Accessible name of each tag's remove button. @default (tag) => `Remove ${tag}` */
+    removeLabel?: (tag: string) => string;
+    /**
+     * Accessible name of the tag list. Defaults to the surrounding `Field`'s
+     * label (or the input's `aria-labelledby`), else "Tags".
+     */
+    tagListLabel?: string;
+    /**
+     * Visually hidden keyboard instructions, linked to the input with
+     * `aria-describedby`. Generated from `delimiters` and `addOnTab` by default.
+     */
+    instructions?: string;
+    /** Override announcement and fallback text (for localization). */
+    messages?: Partial<TagInputMessages>;
+    /** Class name for the `<input>` element. `className` goes to the outer wrapper. */
+    inputClassName?: string;
+    /** Ref to the text `<input>` (null in read-only mode). */
+    ref?: Ref<HTMLInputElement>;
+}
+/**
+ * A text field that turns entries into removable tags (chips). Type and
+ * press Enter (or a delimiter such as a comma) to add; paste "a, b, c" to
+ * add several at once.
+ *
+ * Keyboard:
+ * - Enter / delimiters (and Tab with `addOnTab`): add the typed text.
+ * - Backspace in an empty input, or Left Arrow with the caret at the
+ *   start: move focus to the last tag's remove button. A second Backspace
+ *   (or Delete) removes that tag and focus returns to the next tag, or the
+ *   input. This two-step pattern avoids deleting a tag by accident and
+ *   lets screen readers announce which tag is about to be removed.
+ * - On a tag: Left / Right Arrow move between tags and back to the input;
+ *   Home / End jump to the first tag / the input; Backspace or Delete removes.
+ *
+ * Inside a `Field`, the label, hint, error, required, disabled, read-only,
+ * and size are wired automatically. `ref` points at the `<input>`;
+ * native input props are spread onto it, while `className` and `style` go
+ * to the outer wrapper.
+ *
+ * ```tsx
+ * <Field label="Skills">
+ *   <TagInput defaultValue={["Defense"]} placeholder="Add a skill" />
+ * </Field>
+ * ```
+ */
+export declare const TagInput: ({ value, defaultValue, onValueChange, inputValue: inputValueProp, defaultInputValue, onInputValueChange, delimiters, addOnTab, addOnBlur, allowDuplicates, maxTags, validate, transform, size, disabled, readOnly, invalid, required, placeholder, name, chipVariant, chipTone, removeLabel: removeLabelProp, tagListLabel, instructions, messages: messagesProp, className, inputClassName, style, ref, id, onChange, onKeyDown, onPaste, onBlur, form, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, ...rest }: TagInputProps) => import("react").JSX.Element;

package/dist/components/forms/TagInput/TagInput.mjs

@@ -0,0 +1,311 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useLocale as t } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { assignRef as n } from "../../../utils/refs.mjs";
+import { cx as r } from "../../../utils/cx.mjs";
+import { VisuallyHidden as i } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { ErrorIcon as a } from "../../primitives/Icon/icons.mjs";
+import { Chip as o } from "../../data-display/Chip/Chip.mjs";
+import { useFieldContext as s, useFieldControl as c } from "../Field/FieldContext.mjs";
+import l from "./TagInput.module.css.mjs";
+import { useCallback as ee, useEffect as u, useId as te, useLayoutEffect as ne, useRef as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/forms/TagInput/TagInput.tsx
+var re = {
+	sm: "sm",
+	md: "md",
+	lg: "lg"
+}, ie = {
+	sm: l.sm,
+	md: l.md,
+	lg: l.lg
+}, h = (e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+function g(e, t) {
+	return {
+		",": t.comma,
+		";": t.semicolon,
+		" ": t.space,
+		"|": t.pipe,
+		"	": t.tab
+	}[e] ?? t.other(e);
+}
+function ae(e, t, n, r) {
+	let i = [
+		n.keys.enter,
+		...t ? [n.keys.tab] : [],
+		...e.map((e) => g(e, n.keys))
+	], a = Intl.ListFormat, o = a ? new a(r, { type: "disjunction" }).format(i) : i.join(", ");
+	return n.instructions(o);
+}
+var _ = ({ value: g, defaultValue: _, onValueChange: oe, inputValue: se, defaultInputValue: v, onInputValueChange: ce, delimiters: y = [","], addOnTab: le = !1, addOnBlur: ue = !1, allowDuplicates: de = !1, maxTags: b, validate: fe, transform: pe, size: me, disabled: he, readOnly: ge, invalid: _e, required: ve, placeholder: ye, name: be, chipVariant: xe, chipTone: Se, removeLabel: Ce, tagListLabel: x, instructions: we, messages: Te, className: Ee, inputClassName: De, style: Oe, ref: S, id: ke, onChange: Ae, onKeyDown: je, onPaste: Me, onBlur: Ne, form: C, "aria-describedby": Pe, "aria-labelledby": w, ...T }) => {
+	let { messages: E, locale: Fe } = t(), Ie = Ce ?? E.tagInput.remove, D = {
+		...E.tagInput,
+		...Te
+	}, O = te(), k = `${O}-instructions`, A = `${O}-error`, j = `${O}-max`, M = s(), [N, P] = e({
+		value: g,
+		defaultValue: _ ?? [],
+		onChange: oe
+	}), [F, I] = e({
+		value: se,
+		defaultValue: v ?? "",
+		onChange: ce
+	}), [L, R] = f(null), [Le, Re] = f(null), [z, ze] = f(null), [Be, Ve] = f({
+		text: "",
+		n: 0
+	}), B = b !== void 0 && N.length >= b, He = [
+		Pe,
+		k,
+		B ? j : void 0,
+		L ? A : void 0
+	].filter(Boolean).join(" ") || void 0, V = c({
+		id: ke,
+		invalid: _e,
+		required: ve,
+		disabled: he,
+		readOnly: ge,
+		size: me,
+		"aria-describedby": He
+	}, { nativeRequired: !1 }), H = V.size ?? "md", Ue = V.invalid || L !== null, U = !V.disabled && !V.readOnly, W = d(null), G = d(null), We = d([]), K = d(null), q = d(void 0), Ge = ee((e) => {
+		W.current = e, n(S, e);
+	}, [S]);
+	u(() => () => window.clearTimeout(q.current), []);
+	let Ke = (e) => {
+		e && Ve((t) => ({
+			text: e,
+			n: t.n + 1
+		}));
+	}, [qe, Je] = f(0), J = () => W.current?.focus(), Y = (e) => {
+		let t = We.current[e]?.querySelector("button:not(:disabled)");
+		return t ? (t.focus(), !0) : !1;
+	};
+	ne(() => {
+		let e = K.current;
+		e !== null && (K.current = null, !(e < N.length && Y(e)) && J());
+	}), u(() => {
+		let e = W.current;
+		e && e.setCustomValidity(V.required && N.length === 0 ? D.required : "");
+	});
+	let Ye = d(_ ?? []), Xe = d(v ?? "");
+	u(() => {
+		let e = W.current?.form ?? G.current?.closest("form");
+		if (!e) return;
+		let t = () => {
+			P(Ye.current), I(Xe.current), R(null);
+		};
+		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
+	}, [P, I]);
+	let X = y.length > 0 ? new RegExp(y.map(h).join("|")) : null, Ze = new RegExp([
+		...y.map(h),
+		"\\r?\\n",
+		"\\t"
+	].join("|")), Z = (e) => {
+		let t = [...N], n = [], r = [], i = [], a = null, o = !1;
+		for (let s of e) {
+			let e = s.trim();
+			if (!e) continue;
+			let c = (pe ? pe(e) : e).trim();
+			if (c) {
+				if (b !== void 0 && t.length >= b) {
+					o = !0;
+					continue;
+				}
+				if (!de && t.includes(c)) {
+					r.push(c);
+					continue;
+				}
+				if (fe) {
+					let t = fe(c);
+					if (t !== !0) {
+						a ??= typeof t == "string" && t ? t : D.invalid(c), i.push(e);
+						continue;
+					}
+				}
+				t.push(c), n.push(c);
+			}
+		}
+		n.length > 0 && P(t), R(a), r.length > 0 && (window.clearTimeout(q.current), Re(r[0]), ze(D.duplicate(r[0])), q.current = window.setTimeout(() => Re(null), 1200));
+		let s = b !== void 0 && t.length >= b && n.length > 0, c = [
+			n.length > 0 ? D.added(n) : null,
+			...r.map(D.duplicate),
+			a,
+			o || s ? D.maxReached(b) : null
+		].filter(Boolean);
+		return Ke(c.join(". ")), {
+			rejected: i,
+			added: n.length > 0
+		};
+	}, Qe = (e) => {
+		let t = N[e];
+		t !== void 0 && U && (K.current = e, P(N.filter((t, n) => n !== e)), R(null), Ke(D.removed(t)));
+	}, Q = (e, t = "") => {
+		let n = y[0], r = n === void 0 || n.trim() === "" ? " " : `${n} `;
+		return [...e, t].filter(Boolean).join(r);
+	}, $ = () => {
+		let e = Z([F]);
+		return I(e.rejected.length > 0 ? F : ""), e;
+	}, $e = (e) => {
+		Ae?.(e), z && ze(null);
+		let t = e.target.value;
+		if (X && X.test(t)) {
+			let e = t.split(X), n = e.pop() ?? "", r = Z(e);
+			I(Q(r.rejected, n));
+			return;
+		}
+		L && R(null), I(t);
+	}, et = (e) => {
+		if (Me?.(e), e.defaultPrevented) return;
+		let t = e.clipboardData.getData("text");
+		if (!Ze.test(t)) return;
+		e.preventDefault();
+		let n = e.currentTarget, r = n.selectionStart ?? F.length, i = n.selectionEnd ?? F.length, a = F.slice(0, r) + t + F.slice(i), o = Z(a.split(Ze));
+		I(Q(o.rejected));
+	}, tt = () => G.current ? getComputedStyle(G.current).direction === "rtl" : !1, nt = (e) => {
+		if (je?.(e), e.defaultPrevented || e.nativeEvent.isComposing) return;
+		let t = e.currentTarget, n = t.selectionStart === 0 && t.selectionEnd === 0, r = tt() ? "ArrowRight" : "ArrowLeft";
+		switch (e.key) {
+			case "Enter":
+				if (e.repeat) {
+					e.preventDefault();
+					return;
+				}
+				if (!F.trim()) return;
+				e.preventDefault(), $();
+				return;
+			case "Tab": {
+				if (!le || e.shiftKey || !F.trim()) return;
+				let t = $();
+				t.added && t.rejected.length === 0 && e.preventDefault();
+				return;
+			}
+			case "Backspace":
+				if (e.repeat || F !== "" || N.length === 0) return;
+				Y(N.length - 1) && e.preventDefault();
+				return;
+			case r:
+				if (!n || N.length === 0 || e.shiftKey) return;
+				Y(N.length - 1) && e.preventDefault();
+				return;
+			default: return;
+		}
+	}, rt = (e) => {
+		Ne?.(e), ue && F.trim() && $();
+	}, it = (e, t) => {
+		let n = tt(), r = n ? "ArrowRight" : "ArrowLeft", i = n ? "ArrowLeft" : "ArrowRight", a = !0;
+		switch (e.key) {
+			case r:
+				t > 0 && Y(t - 1);
+				break;
+			case i:
+				t < N.length - 1 && Y(t + 1) || J();
+				break;
+			case "Home":
+				Y(0);
+				break;
+			case "End":
+				J();
+				break;
+			default: a = !1;
+		}
+		a && e.preventDefault();
+	}, at = (e) => {
+		let t = W.current;
+		if (!t || V.disabled) return;
+		let n = e.target;
+		n === t || n.closest("button, a, input, [tabindex]") || (e.preventDefault(), t.focus());
+	}, ot = x === void 0 ? w ?? (M && !M.isGroup ? M.labelId : void 0) : void 0, st = x ?? (ot ? void 0 : E.tagInput.list), ct = we ?? ae(y, le, E.tagInput, Fe), lt = N.length === 0 && !B;
+	return /* @__PURE__ */ m("div", {
+		ref: G,
+		className: r(l.root, Ee),
+		style: Oe,
+		"data-size": H,
+		children: [
+			/* @__PURE__ */ m("div", {
+				className: r(l.box, ie[H], N.length > 0 && l.hasTags, Ue && l.invalid, V.disabled && l.disabled, V.readOnly && !V.disabled && l.readOnly),
+				onPointerDown: at,
+				children: [N.length > 0 && /* @__PURE__ */ p("ul", {
+					className: l.list,
+					"aria-labelledby": ot,
+					"aria-label": st,
+					"aria-describedby": V.readOnly ? V.ariaProps["aria-describedby"] : void 0,
+					children: N.map((e, t) => /* @__PURE__ */ p("li", {
+						ref: (e) => {
+							We.current[t] = e;
+						},
+						className: l.item,
+						"data-highlighted": Le === e || void 0,
+						onKeyDown: (e) => it(e, t),
+						onFocus: () => Je(t),
+						children: /* @__PURE__ */ p(o, {
+							size: re[H],
+							variant: xe,
+							tone: Se,
+							disabled: V.disabled,
+							onRemove: U ? () => Qe(t) : void 0,
+							removeLabel: U ? Ie(e) : void 0,
+							removeTabIndex: t === Math.min(qe, N.length - 1) ? 0 : -1,
+							children: e
+						})
+					}, `${e}-${t}`))
+				}), V.readOnly && !V.disabled ? N.length === 0 && /* @__PURE__ */ p("span", {
+					className: l.empty,
+					children: D.empty
+				}) : /* @__PURE__ */ p("input", {
+					...T,
+					ref: Ge,
+					id: V.id,
+					type: "text",
+					form: C,
+					value: F,
+					placeholder: lt ? ye : void 0,
+					disabled: V.disabled,
+					readOnly: B,
+					autoComplete: T.autoComplete ?? "off",
+					...V.ariaProps,
+					"aria-labelledby": w,
+					"aria-invalid": Ue || void 0,
+					"aria-errormessage": L ? A : V.ariaProps["aria-errormessage"],
+					className: r(l.input, De),
+					onChange: $e,
+					onKeyDown: nt,
+					onPaste: et,
+					onBlur: rt
+				})]
+			}),
+			L && /* @__PURE__ */ m("p", {
+				id: A,
+				className: l.error,
+				children: [/* @__PURE__ */ p(a, {
+					size: "sm",
+					className: l.errorIcon
+				}), /* @__PURE__ */ p("span", { children: L })]
+			}),
+			/* @__PURE__ */ p(i, {
+				id: k,
+				children: ct
+			}),
+			z && /* @__PURE__ */ p("p", {
+				className: l.limit,
+				children: z
+			}),
+			B && /* @__PURE__ */ p("p", {
+				id: j,
+				className: l.limit,
+				children: D.maxReached(b)
+			}),
+			/* @__PURE__ */ m(i, {
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: [Be.text, Be.n % 2 == 1 ? "\xA0" : ""]
+			}),
+			be !== void 0 && N.map((e, t) => /* @__PURE__ */ p("input", {
+				type: "hidden",
+				name: be,
+				value: e,
+				form: C,
+				disabled: V.disabled
+			}, `${e}-${t}`))
+		]
+	});
+};
+//#endregion
+export { _ as TagInput };

package/dist/components/forms/TagInput/TagInput.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_y83d4_15`,t=`_box_y83d4_31`,n=`_hasTags_y83d4_103`,r=`_sm_y83d4_115`,i=`_md_y83d4_131`,a=`_lg_y83d4_147`,o=`_disabled_y83d4_167`,s=`_readOnly_y83d4_167`,c=`_invalid_y83d4_167`,l=`_list_y83d4_229`,u=`_item_y83d4_255`,d=`_input_y83d4_313`,f=`_empty_y83d4_397`,p=`_error_y83d4_409`,m=`_limit_y83d4_431`,h=`_errorIcon_y83d4_445`,g={root:e,box:t,hasTags:n,sm:r,md:i,lg:a,disabled:o,readOnly:s,invalid:c,list:l,item:u,"tag-input-pulse":`_tag-input-pulse_y83d4_1`,input:d,empty:f,error:p,limit:m,errorIcon:h};exports.box=t,exports.default=g,exports.disabled=o,exports.empty=f,exports.error=p,exports.errorIcon=h,exports.hasTags=n,exports.input=d,exports.invalid=c,exports.item=u,exports.lg=a,exports.limit=m,exports.list=l,exports.md=i,exports.readOnly=s,exports.root=e,exports.sm=r;

package/dist/components/forms/TagInput/TagInput.module.css.mjs

@@ -0,0 +1,22 @@
+//#region src/components/forms/TagInput/TagInput.module.css
+var e = "_root_y83d4_15", t = "_box_y83d4_31", n = "_hasTags_y83d4_103", r = "_sm_y83d4_115", i = "_md_y83d4_131", a = "_lg_y83d4_147", o = "_disabled_y83d4_167", s = "_readOnly_y83d4_167", c = "_invalid_y83d4_167", l = "_list_y83d4_229", u = "_item_y83d4_255", d = "_input_y83d4_313", f = "_empty_y83d4_397", p = "_error_y83d4_409", m = "_limit_y83d4_431", h = "_errorIcon_y83d4_445", g = {
+	root: e,
+	box: t,
+	hasTags: n,
+	sm: r,
+	md: i,
+	lg: a,
+	disabled: o,
+	readOnly: s,
+	invalid: c,
+	list: l,
+	item: u,
+	"tag-input-pulse": "_tag-input-pulse_y83d4_1",
+	input: d,
+	empty: f,
+	error: p,
+	limit: m,
+	errorIcon: h
+};
+//#endregion
+export { t as box, g as default, o as disabled, f as empty, p as error, h as errorIcon, n as hasTags, d as input, c as invalid, u as item, a as lg, m as limit, l as list, i as md, s as readOnly, e as root, r as sm };

package/dist/components/forms/TagInput/index.d.ts

@@ -0,0 +1 @@
+export * from './TagInput';

package/dist/components/forms/Textarea/Textarea.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useFormReset.cjs.js"),n=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),r=require("../../../utils/cx.cjs.js"),i=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),a=require("../Field/FieldContext.cjs.js"),o=require("./Textarea.module.css.cjs.js");let s=require("react"),c=require("react/jsx-runtime");var l={sm:o.default.sm,md:o.default.md,lg:o.default.lg},u={outline:o.default.outline,filled:o.default.filled},d={none:o.default.radiusNone,xs:o.default.radiusXs,sm:o.default.radiusSm,md:o.default.radiusMd,lg:o.default.radiusLg,xl:o.default.radiusXl,"2xl":o.default.radius2xl},f={none:o.default.resizeNone,vertical:o.default.resizeVertical,both:o.default.resizeBoth},ee=.9,te=600,p;function m(){return p===void 0&&(p=typeof CSS<`u`&&typeof CSS.supports==`function`&&CSS.supports(`field-sizing`,`content`)),p}var h=typeof window<`u`?s.useLayoutEffect:s.useEffect,g=({size:p,variant:g=`outline`,radius:_,invalid:ne,value:v,defaultValue:y,onValueChange:b,onChange:x,rows:S=3,autoResize:C=!1,minRows:w,maxRows:T,resize:E=`vertical`,showCount:D=!1,maxLength:O,fullWidth:re=!0,className:ie,textareaClassName:ae,style:oe,cols:k,id:A,required:j,disabled:M,readOnly:N,"aria-describedby":P,ref:F,...I})=>{let L=n.useMessages(),R=(0,s.useId)(),z=D&&O!==void 0&&O>0,B=a.useFieldControl({id:A,invalid:ne,required:j,disabled:M,readOnly:N,size:p,"aria-describedby":[P,z?R:void 0].filter(Boolean).join(` `)||void 0}),V=B.size??`md`,H=v!==void 0,[U,W]=e.useControllableState({value:v,defaultValue:y??``,onChange:b});t.useFormReset(()=>B.id?document.getElementById(B.id):null,()=>W(y??``),v===void 0);let G=e=>{x?.(e),W(e.target.value)},K=(0,s.useRef)(null),se=(0,s.useCallback)(e=>{K.current=e;let t;return typeof F==`function`?t=F(e):F&&(F.current=e),()=>{K.current=null,typeof F==`function`?typeof t==`function`?t():F(null):F&&(F.current=null)}},[F]),q=Math.max(1,w??S),J=T===void 0?void 0:Math.max(q,T),Y=(0,s.useCallback)(()=>{let e=K.current;if(!e)return;e.style.height=`auto`;let t=window.getComputedStyle(e),n=parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth);e.style.height=`${e.scrollHeight+n}px`},[]);h(()=>{C&&!m()&&Y()},[C,Y,U,q,J,V]),(0,s.useEffect)(()=>{let e=K.current;if(!C||m()||!e||typeof ResizeObserver>`u`)return;let t=e.offsetWidth,n=new ResizeObserver(()=>{e.offsetWidth!==t&&(t=e.offsetWidth,Y())});return n.observe(e),()=>{n.disconnect(),e.style.height=``}},[C,Y]);let X=U.length,ce=z?X/O:0,Z=z&&ce>=ee,le=z&&X>=O,Q=z?Math.max(0,O-X):0,[ue,$]=(0,s.useState)(``);(0,s.useEffect)(()=>{if(!z)return;if(!Z){$(``);return}let e=window.setTimeout(()=>{$(Q===0?L.textarea.limitReached:L.textarea.remaining(Q))},te);return()=>window.clearTimeout(e)},[z,Z,Q,L]);let de={...C?{"--textarea-min-rows":q,"--textarea-max-rows":J,"--textarea-cols":k}:null};return(0,c.jsxs)(`div`,{className:r.cx(o.default.root,re?o.default.fullWidth:o.default.inline,ie),style:oe,children:[(0,c.jsx)(`textarea`,{...I,...B.ariaProps,ref:se,id:B.id,required:B.required,disabled:B.disabled,readOnly:B.readOnly,maxLength:O,cols:k,rows:C?q:S,...H?{value:U}:{defaultValue:y??``},onChange:G,style:de,className:r.cx(o.default.textarea,l[V],u[g],_&&d[_],f[C?`none`:E],C&&o.default.autoResize,C&&J!==void 0&&o.default.hasMaxRows,B.invalid&&o.default.invalid,ae)}),z&&(0,c.jsxs)(`div`,{id:R,className:r.cx(o.default.counter,l[V],Z&&o.default.counterNear,le&&o.default.counterAtLimit),children:[(0,c.jsxs)(`span`,{"aria-hidden":`true`,children:[X,` / `,O]}),(0,c.jsxs)(i.VisuallyHidden,{children:[X,` of `,O,` characters used`]})]}),z&&(0,c.jsx)(i.VisuallyHidden,{"aria-live":`polite`,"aria-atomic":`true`,children:ue})]})};exports.Textarea=g;

package/dist/components/forms/Textarea/Textarea.d.ts

@@ -0,0 +1,62 @@
+import { ComponentPropsWithRef, Ref } from 'react';
+import { Radius, Size } from '../../../types/common';
+/** Visual style of a Textarea. */
+export type TextareaVariant = "outline" | "filled";
+/** Which directions the user may drag-resize the Textarea. */
+export type TextareaResize = "none" | "vertical" | "both";
+/** Corner rounding for a Textarea. Pill is not offered for multi-line fields. */
+export type TextareaRadius = Exclude<Radius, "pill">;
+export interface TextareaProps extends Omit<ComponentPropsWithRef<"textarea">, "size" | "value" | "defaultValue"> {
+    /** Control size: scales font size and padding. Defaults to the surrounding Field's size, then `md`. */
+    size?: Size;
+    /** Visual style. `filled` uses a sunken background with a border that appears on hover and focus. */
+    variant?: TextareaVariant;
+    /** Corner rounding. Defaults to `--field-radius`. */
+    radius?: TextareaRadius;
+    /** Marks the value invalid: sets `aria-invalid` and uses danger styling. Inherits from a surrounding Field. */
+    invalid?: boolean;
+    /** Controlled value. */
+    value?: string;
+    /** Initial value when uncontrolled. */
+    defaultValue?: string;
+    /** Called with the new value on every edit, controlled or not. */
+    onValueChange?: (value: string) => void;
+    /** Visible number of text lines. With `autoResize`, this is the default for `minRows`. */
+    rows?: number;
+    /**
+     * Grow and shrink with the content between `minRows` and `maxRows`, then
+     * scroll. Uses CSS `field-sizing: content` where supported and measures
+     * `scrollHeight` otherwise. Forces `resize="none"`.
+     */
+    autoResize?: boolean;
+    /** Minimum visible rows when `autoResize` is on. Defaults to `rows`. */
+    minRows?: number;
+    /** Maximum visible rows when `autoResize` is on; beyond this the field scrolls. Unlimited when omitted. */
+    maxRows?: number;
+    /** Drag-resize handle direction. Defaults to `vertical`; always `none` with `autoResize`. */
+    resize?: TextareaResize;
+    /**
+     * Show an "n / max" character counter under the field. Requires `maxLength`.
+     * The counter is linked with `aria-describedby`; remaining characters are
+     * announced politely only once 90% of the limit is used.
+     */
+    showCount?: boolean;
+    /** Stretch to the full inline size of the container. */
+    fullWidth?: boolean;
+    /** Class name for the wrapper element. */
+    className?: string;
+    /** Class name for the `<textarea>` element itself. */
+    textareaClassName?: string;
+    /** Ref to the `<textarea>` element. */
+    ref?: Ref<HTMLTextAreaElement>;
+}
+/**
+ * Multi-line text field. Works standalone or inside a `Field`, which wires
+ * the id, label, hint, error, required, disabled, and size automatically.
+ *
+ * ```tsx
+ * <label htmlFor="bio">Bio</label>
+ * <Textarea id="bio" autoResize maxRows={8} maxLength={280} showCount />
+ * ```
+ */
+export declare const Textarea: ({ size: sizeProp, variant, radius, invalid: invalidProp, value: valueProp, defaultValue, onValueChange, onChange, rows, autoResize, minRows, maxRows, resize, showCount, maxLength, fullWidth, className, textareaClassName, style, cols, id: idProp, required: requiredProp, disabled: disabledProp, readOnly: readOnlyProp, "aria-describedby": ariaDescribedBy, ref, ...rest }: TextareaProps) => import("react").JSX.Element;