@thewhatmatters/wmds 0.2.0

package/dist/components/atoms/Switch/Switch.js

@@ -0,0 +1,109 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { motionTransitionProp as t } from "../../../lib/motion.js";
+import "../Input/inputShellStyles.js";
+import { InputStatusBanner as ee } from "../inputShared/InputStatusBanner.js";
+import { switchDescriptionClasses as n, switchDescriptionRowClasses as te, switchHiddenInputClasses as ne, switchHitTargetDescriptionAlignClasses as r, switchHitTargetSizeClasses as i, switchLabelClassesFor as a, switchLayouts as o, switchRowBaseClasses as re, switchRowLabelOnlyClasses as ie, switchRowSizeClasses as s, switchSettingsRowClasses as c, switchSizes as l, switchStatusBannerClassesFor as u, switchTextColumnClasses as d, switchThumbClasses as f, switchThumbOffsetPx as p, switchThumbSizeClasses as m, switchTrackClassesFor as ae } from "./switchStyles.js";
+import { forwardRef as h, useId as oe, useState as g } from "react";
+import { Loader2 as _ } from "lucide-react";
+import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { motion as x } from "motion/react";
+//#region src/components/atoms/Switch/Switch.tsx
+var S = {
+	sm: "sm",
+	md: "md"
+};
+function se(e) {
+	e.message != null && e.status == null && console.warn("[WMDS Switch] `message` requires `status`.");
+}
+var C = h(function({ size: o = "md", layout: l = "inline", label: h, labelHidden: C = !1, description: w, status: T, message: E, loading: D = !1, className: O, disabled: k, readOnly: A, checked: j, defaultChecked: M, id: N, onChange: P, ...F }, I) {
+	let L = oe(), R = N ?? L;
+	se({
+		status: T,
+		message: E
+	});
+	let z = j !== void 0, [B, V] = g(M ?? !1), H = z ? !!j : B, U = k || D, W = E != null && E.length > 0 && T != null, G = W ? `${R}-message` : void 0, K = w != null && !C ? `${R}-description` : void 0, ce = [
+		F["aria-describedby"],
+		K,
+		G
+	].filter(Boolean).join(" ") || void 0, le = (e) => {
+		if (A) {
+			e.preventDefault();
+			return;
+		}
+		z || V(e.target.checked), P?.(e);
+	}, q = ae(o, H, U, W ? void 0 : T), J = w != null && !C, Y = t("fast"), X = p[o], Z = (t) => /* @__PURE__ */ b("span", {
+		className: e("relative flex shrink-0 items-center justify-center", i[o], t),
+		children: [/* @__PURE__ */ y("input", {
+			...F,
+			ref: I,
+			id: R,
+			type: "checkbox",
+			role: "switch",
+			checked: z ? j : void 0,
+			defaultChecked: z ? void 0 : M,
+			disabled: U,
+			readOnly: A,
+			"aria-invalid": T === "error" || void 0,
+			"aria-describedby": ce,
+			"aria-busy": D || void 0,
+			onChange: le,
+			className: ne
+		}), /* @__PURE__ */ y("span", {
+			className: q,
+			"aria-hidden": !0,
+			children: D ? /* @__PURE__ */ y(x.span, {
+				className: e(m[o], "flex items-center justify-center"),
+				animate: { x: H ? X : 0 },
+				transition: Y,
+				children: /* @__PURE__ */ y(_, {
+					className: "size-full animate-spin text-fg",
+					strokeWidth: 2
+				})
+			}) : /* @__PURE__ */ y(x.span, {
+				className: e(f, m[o]),
+				animate: { x: H ? X : 0 },
+				transition: Y
+			})
+		})]
+	}), Q = C ? /* @__PURE__ */ y("span", {
+		className: "sr-only",
+		children: h
+	}) : /* @__PURE__ */ b("span", {
+		className: d,
+		children: [/* @__PURE__ */ y("span", {
+			className: a(U, J),
+			children: h
+		}), J ? /* @__PURE__ */ y("span", {
+			id: K,
+			className: n,
+			children: w
+		}) : null]
+	}), $ = /* @__PURE__ */ y("label", {
+		htmlFor: R,
+		className: e(re, l === "settings" ? c : ie, l === "inline" && !J && s[o], l === "inline" && J && void 0, U && "cursor-not-allowed", O),
+		children: C ? /* @__PURE__ */ b(v, { children: [Z(), /* @__PURE__ */ y("span", {
+			className: "sr-only",
+			children: h
+		})] }) : l === "settings" ? /* @__PURE__ */ b(v, { children: [Q, Z()] }) : J ? /* @__PURE__ */ b("span", {
+			className: te[o],
+			children: [Z(r[o]), Q]
+		}) : /* @__PURE__ */ b(v, { children: [Z(), C ? null : /* @__PURE__ */ y("span", {
+			className: a(U),
+			children: h
+		})] })
+	});
+	return !W || T == null || G == null ? $ : /* @__PURE__ */ b("div", {
+		className: "flex w-full flex-col gap-1.5",
+		children: [$, /* @__PURE__ */ y(ee, {
+			status: T,
+			message: E,
+			messageId: G,
+			size: S[o],
+			messagePosition: "bottom",
+			bannerClassName: u(T)
+		})]
+	});
+});
+//#endregion
+export { C as Switch, o as switchLayouts, l as switchSizes };

package/dist/components/atoms/Switch/switchStyles.d.ts

@@ -0,0 +1,36 @@
+import { type InputStatus } from "../Input/inputShellStyles";
+export declare const switchSizes: readonly ["sm", "md"];
+export type SwitchSize = (typeof switchSizes)[number];
+export declare const switchLayouts: readonly ["inline", "settings"];
+export type SwitchLayout = (typeof switchLayouts)[number];
+/** Row rhythm — aligns with cluster sm (28px) / md (36px) tiers. */
+export declare const switchRowSizeClasses: Record<SwitchSize, string>;
+export declare const switchHitTargetSizeClasses: Record<SwitchSize, string>;
+/** Pill track — [Astryx Switch](https://astryx.atmeta.com/components/Switch). */
+export declare const switchTrackSizeClasses: Record<SwitchSize, string>;
+export declare const switchThumbSizeClasses: Record<SwitchSize, string>;
+export declare const switchThumbOffsetPx: Record<SwitchSize, number>;
+export declare const switchTrackBaseClasses: string;
+/** Off — recessed body well (SegmentedControl track family). */
+export declare const switchTrackUncheckedClasses = "bg-body shadow-hairline";
+/** On — filled primary track so state reads at a glance (reference switch pattern). */
+export declare const switchTrackCheckedClasses = "border-primary bg-primary shadow-none";
+/** Raised knob — surface + shadow; position animated via Motion (same tier as **SegmentedControl** thumb). */
+export declare const switchThumbClasses = "block rounded-full bg-surface shadow-raised";
+export declare const switchTrackDisabledClasses = "opacity-50";
+export declare const switchLabelClasses: string;
+export declare const switchDescriptionClasses: string;
+export declare const switchTextColumnClasses = "flex min-w-0 flex-col gap-px";
+export declare const switchLabelWithDescriptionClasses: string;
+export declare const switchDescriptionRowClasses: Record<SwitchSize, string>;
+export declare const switchHitTargetDescriptionAlignClasses: Record<SwitchSize, string>;
+export declare const switchRowBaseClasses = "group/switch relative flex w-full cursor-pointer";
+export declare const switchRowLabelOnlyClasses = "items-center";
+export declare const switchSettingsRowClasses = "items-center justify-between gap-4";
+export declare const switchRowDisabledClasses = "cursor-not-allowed";
+export declare const switchHiddenInputClasses = "peer absolute inset-0 z-10 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed";
+export declare const switchFocusRingClasses = "peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-focus-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-body";
+export declare function switchTrackClassesFor(size: SwitchSize, checked: boolean, disabled?: boolean, status?: InputStatus): string;
+export declare function switchLabelClassesFor(disabled?: boolean, withDescription?: boolean): string;
+export declare function switchStatusBannerClassesFor(status: InputStatus): string;
+//# sourceMappingURL=switchStyles.d.ts.map

package/dist/components/atoms/Switch/switchStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switchStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Switch/switchStyles.ts"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,2BAA2B,CAAC;AAEnC,eAAO,MAAM,WAAW,uBAAwB,CAAC;AAEjD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD,eAAO,MAAM,aAAa,iCAAkC,CAAC;AAE7D,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1D,oEAAoE;AACpE,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAG3D,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAGjE,CAAC;AAEF,iFAAiF;AACjF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAG7D,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAG7D,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAG1D,CAAC;AAEF,eAAO,MAAM,sBAAsB,QAIlC,CAAC;AAEF,gEAAgE;AAChE,eAAO,MAAM,2BAA2B,4BAA4B,CAAC;AAErE,uFAAuF;AACvF,eAAO,MAAM,yBAAyB,0CAA0C,CAAC;AAEjF,8GAA8G;AAC9G,eAAO,MAAM,kBAAkB,gDAAgD,CAAC;AAEhF,eAAO,MAAM,0BAA0B,eAAe,CAAC;AAEvD,eAAO,MAAM,kBAAkB,QAA8B,CAAC;AAE9D,eAAO,MAAM,wBAAwB,QAAiD,CAAC;AAEvF,eAAO,MAAM,uBAAuB,iCAAiC,CAAC;AAEtE,eAAO,MAAM,iCAAiC,QAA0C,CAAC;AAEzF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAGlE,CAAC;AAEF,eAAO,MAAM,sCAAsC,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAG7E,CAAC;AAEF,eAAO,MAAM,oBAAoB,qDAAqD,CAAC;AAEvF,eAAO,MAAM,yBAAyB,iBAAiB,CAAC;AAExD,eAAO,MAAM,wBAAwB,uCAAuC,CAAC;AAE7E,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAE7D,eAAO,MAAM,wBAAwB,8FACwD,CAAC;AAE9F,eAAO,MAAM,sBAAsB,sKACkI,CAAC;AAEtK,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,CAAC,EAAE,OAAO,EAClB,MAAM,CAAC,EAAE,WAAW,GACnB,MAAM,CASR;AAED,wBAAgB,qBAAqB,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,CAK3F;AAED,wBAAgB,4BAA4B,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAKxE"}

package/dist/components/atoms/Switch/switchStyles.js

@@ -0,0 +1,39 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { typographyClass as t } from "../../../lib/typography.js";
+import { motionTransition as n } from "../../../lib/motion.js";
+import { inputStatusBannerSurfaceClasses as r, inputStatusShellClasses as i } from "../Input/inputShellStyles.js";
+//#region src/components/atoms/Switch/switchStyles.ts
+var a = ["sm", "md"], o = ["inline", "settings"], s = {
+	sm: "min-h-7 gap-2",
+	md: "min-h-9 gap-2.5"
+}, c = {
+	sm: "size-7",
+	md: "size-9"
+}, l = {
+	sm: "h-[18px] w-8 rounded-full p-0.5",
+	md: "h-[22px] w-10 rounded-full p-0.5"
+}, u = {
+	sm: "size-3.5",
+	md: "size-[18px]"
+}, d = {
+	sm: 14,
+	md: 18
+}, f = e("pointer-events-none relative flex shrink-0 items-center border border-transparent", "transition-[background-color,border-color,box-shadow]", n("fast")), p = "bg-body shadow-hairline", m = "border-primary bg-primary shadow-none", h = "block rounded-full bg-surface shadow-raised", g = "opacity-50", _ = t("ui-label"), v = e(t("caption"), "leading-snug"), y = "flex min-w-0 flex-col gap-px", b = e(_, "leading-tight"), x = {
+	sm: "flex min-w-0 items-start gap-2",
+	md: "flex min-w-0 items-start gap-2.5"
+}, S = {
+	sm: "mt-px",
+	md: "mt-0.5"
+}, C = "group/switch relative flex w-full cursor-pointer", w = "items-center", T = "items-center justify-between gap-4", E = "cursor-not-allowed", D = "peer absolute inset-0 z-10 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed", O = "peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-focus-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-body";
+function k(t, n, r, a) {
+	return e(f, l[t], O, n ? m : p, a != null && i[a], r && "opacity-50");
+}
+function A(t, n) {
+	return e(n ? b : _, t && "opacity-50");
+}
+function j(t) {
+	return e("flex w-full items-start gap-2 rounded-lg px-2.5 py-2 leading-snug", r[t]);
+}
+//#endregion
+export { v as switchDescriptionClasses, x as switchDescriptionRowClasses, O as switchFocusRingClasses, D as switchHiddenInputClasses, S as switchHitTargetDescriptionAlignClasses, c as switchHitTargetSizeClasses, _ as switchLabelClasses, A as switchLabelClassesFor, b as switchLabelWithDescriptionClasses, o as switchLayouts, C as switchRowBaseClasses, E as switchRowDisabledClasses, w as switchRowLabelOnlyClasses, s as switchRowSizeClasses, T as switchSettingsRowClasses, a as switchSizes, j as switchStatusBannerClassesFor, y as switchTextColumnClasses, h as switchThumbClasses, d as switchThumbOffsetPx, u as switchThumbSizeClasses, f as switchTrackBaseClasses, m as switchTrackCheckedClasses, k as switchTrackClassesFor, g as switchTrackDisabledClasses, l as switchTrackSizeClasses, p as switchTrackUncheckedClasses };

package/dist/components/atoms/TextArea/TextArea.d.ts

@@ -0,0 +1,37 @@
+import { type TextareaHTMLAttributes } from "react";
+import { type InputMessagePosition, type InputSize, type InputStatus, type TextAreaResize } from "./textareaShellStyles";
+export type { InputMessagePosition, InputSize, InputStatus, TextAreaResize } from "./textareaShellStyles";
+export { inputMessagePositions, inputSizes, inputStatuses, textareaResizes } from "./textareaShellStyles";
+/** Layout-only — not for colors, borders, or typography overrides. */
+export type TextAreaLayoutClassName = string;
+export interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> {
+    size?: InputSize;
+    /** Optional visible label — omit for bare controls. */
+    label?: string;
+    /** Neutral helper below the control — hidden when validation `message` is shown. */
+    description?: string;
+    /** Validation status — border + trailing icon. */
+    status?: InputStatus;
+    /** Validation copy in integrated status band — requires `status`. */
+    message?: string;
+    /** Status band placement when `message` is set — default `bottom`. */
+    messagePosition?: InputMessagePosition;
+    /** Trailing spinner — async validation. */
+    loading?: boolean;
+    /** Visible row count — default **4**. */
+    rows?: number;
+    /** Native resize — default **`vertical`**. */
+    resize?: TextAreaResize;
+    /**
+     * Inside **PromptBar** — no outer shell. The parent pill owns border, radius, and focus.
+     * Not for standalone forms.
+     */
+    inline?: boolean;
+    className?: TextAreaLayoutClassName;
+}
+/**
+ * Multiline text control — same optional label / validation chrome as **Input** (ADR-0006).
+ * Element-radius shell (not pill); status band + trailing icon match Input patterns.
+ */
+export declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=TextArea.d.ts.map

package/dist/components/atoms/TextArea/TextArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAKvE,OAAO,EAoBL,KAAK,oBAAoB,EACzB,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAE/B,YAAY,EAAE,oBAAoB,EAAE,SAAS,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC1G,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE1G,sEAAsE;AACtE,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IACjE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sEAAsE;IACtE,eAAe,CAAC,EAAE,oBAAoB,CAAC;IACvC,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAqBD;;;GAGG;AACH,eAAO,MAAM,QAAQ,+GAuJnB,CAAC"}

package/dist/components/atoms/TextArea/TextArea.js

@@ -0,0 +1,115 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { typographyClass as t } from "../../../lib/typography.js";
+import { inputAttachedFieldClasses as n, inputCompoundShellClassesFor as r, inputControlStackClasses as i, inputDisabledClasses as a, inputFieldStackClasses as o, inputStatusGapClasses as s } from "../Input/inputShellStyles.js";
+import { InputStatusBanner as c } from "../inputShared/InputStatusBanner.js";
+import { InputTrailingAffordance as l } from "../inputShared/InputTrailingAffordance.js";
+import { textareaBaseClasses as u, textareaCompoundFieldPaddingClasses as d, textareaCompoundInnerFieldClassesFor as f, textareaFixedPaddingClasses as ee, textareaInlineClasses as p, textareaMinHeightClasses as m, textareaResizeClasses as h, textareaResizes as g, textareaSoloShellClassesFor as _, textareaStatusBannerClassesFor as v, textareaTrailingInsetClasses as y, textareaTrailingInsetPositionClasses as b } from "./textareaShellStyles.js";
+import { forwardRef as x, useId as S } from "react";
+import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
+//#region src/components/atoms/TextArea/TextArea.tsx
+function E(e) {
+	e.label == null && e["aria-label"] == null && e["aria-labelledby"] == null && console.warn("[WMDS TextArea] Provide `label`, `aria-label`, or `aria-labelledby`.");
+}
+function D(e) {
+	e.message != null && e.status == null && console.warn("[WMDS TextArea] `message` requires `status`."), e.inline && (e.label != null || e.description != null || e.status != null || e.message != null) && console.warn("[WMDS TextArea] `inline` is for PromptBar only — omit label, description, and validation.");
+}
+var O = x(function({ size: c = "md", label: g, description: v, status: x, message: O, messagePosition: k = "bottom", loading: A = !1, rows: j = 4, resize: M = "vertical", inline: N = !1, className: P, disabled: F, id: I, "aria-describedby": L, ...R }, z) {
+	let B = S(), V = I ?? B;
+	E({
+		label: g,
+		"aria-label": R["aria-label"],
+		"aria-labelledby": R["aria-labelledby"]
+	}), D({
+		status: x,
+		message: O,
+		inline: N,
+		label: g,
+		description: v
+	});
+	let H = O != null && O.length > 0 && x != null, U = !H && (A || x != null), W = v != null && !H ? `${V}-description` : void 0, G = H ? `${V}-message` : void 0, K = [
+		L,
+		W,
+		G
+	].filter(Boolean).join(" ") || void 0;
+	if (N) return /* @__PURE__ */ w("textarea", {
+		...R,
+		ref: z,
+		id: V,
+		rows: j,
+		disabled: F,
+		"aria-invalid": x === "error" || void 0,
+		"aria-describedby": K,
+		className: e(a, p, P)
+	});
+	let q = /* @__PURE__ */ w("textarea", {
+		...R,
+		ref: z,
+		id: V,
+		rows: j,
+		disabled: F,
+		"aria-invalid": x === "error" || void 0,
+		"aria-describedby": K,
+		className: e(a, h[M], u, ee[c], m[c], "w-full border-0 bg-transparent shadow-none", U && s[c], H && e(n, "rounded-none border-0 shadow-none focus-visible:outline-none focus-visible:ring-0", "rounded-none"))
+	}), J = U ? /* @__PURE__ */ w("span", {
+		className: e(y, b[c]),
+		children: /* @__PURE__ */ w(l, {
+			size: c,
+			status: A ? void 0 : x,
+			loading: A
+		})
+	}) : null, Y = /* @__PURE__ */ T(C, { children: [q, J] }), X = /* @__PURE__ */ w("div", {
+		className: e(_(c, x, M), P),
+		children: Y
+	}), Z = /* @__PURE__ */ w("div", {
+		className: e("relative w-full", d(M, c)),
+		children: Y
+	}), Q = H && x != null && G != null ? /* @__PURE__ */ w(te, {
+		status: x,
+		message: O,
+		messageId: G,
+		size: c,
+		messagePosition: k
+	}) : null, $ = H && x != null ? /* @__PURE__ */ T("div", {
+		className: r(c, x),
+		children: [
+			k === "top" ? Q : null,
+			/* @__PURE__ */ w("div", {
+				className: f(c, x, k),
+				children: Z
+			}),
+			k === "bottom" ? Q : null
+		]
+	}) : /* @__PURE__ */ w("div", {
+		className: i,
+		children: X
+	});
+	return g == null && v == null ? $ : /* @__PURE__ */ T("div", {
+		className: o,
+		children: [
+			g == null ? null : /* @__PURE__ */ w("label", {
+				htmlFor: V,
+				className: e(t("ui-label"), F && "opacity-50"),
+				children: g
+			}),
+			$,
+			W == null ? null : /* @__PURE__ */ w("p", {
+				id: W,
+				className: t("caption"),
+				children: v
+			})
+		]
+	});
+});
+function te({ status: e, message: t, messageId: n, size: r, messagePosition: i }) {
+	return /* @__PURE__ */ w(c, {
+		status: e,
+		message: t,
+		messageId: n,
+		size: r,
+		messagePosition: i,
+		bannerClassName: v(e, r, i)
+	});
+}
+//#endregion
+export { O as TextArea, g as textareaResizes };

package/dist/components/atoms/TextArea/textareaShellStyles.d.ts

@@ -0,0 +1,41 @@
+import { inputAttachedFieldClasses, inputAttachedInputClasses, inputCompoundShellClassesFor, inputControlStackClasses, inputDisabledClasses, inputDisabledLabelClasses, inputFieldStackClasses, inputSoloFocusRingBaseClasses, inputSoloFocusRingColorClasses, inputStatusGapClasses, inputStatusShellClasses, type InputMessagePosition, type InputSize, type InputStatus } from "../Input/inputShellStyles";
+export type { InputMessagePosition, InputSize, InputStatus } from "../Input/inputShellStyles";
+export { inputMessagePositions, inputSizes, inputStatuses } from "../Input/inputShellStyles";
+export declare const textareaResizes: readonly ["none", "vertical", "both"];
+export type TextAreaResize = (typeof textareaResizes)[number];
+/** Multiline shell — element radius (Astryx `--radius-element` / 12px), not pill. */
+export declare const textareaSoloRadiusClasses: Record<InputSize, string>;
+export declare const textareaResizeClasses: Record<TextAreaResize, string>;
+export declare const textareaMinHeightClasses: Record<InputSize, string>;
+export declare const textareaFixedPaddingClasses: Record<InputSize, string>;
+/**
+ * Bottom-right padding on the **shell wrapper** — native resize grip tracks the
+ * textarea box corner; inset the field inside the bordered shell so the grip
+ * clears the rounded corner (content padding alone does not move the grip).
+ */
+export declare const textareaShellResizePaddingClasses: Record<InputSize, string>;
+export declare const textareaShellFocusRingBaseClasses = "focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-body";
+export declare const textareaShellFocusRingColorClasses: {
+    readonly default: "focus-within:ring-focus-ring";
+    readonly error: "focus-within:ring-error-focus-ring";
+    readonly warning: "focus-within:ring-warning-focus-ring";
+    readonly success: "focus-within:ring-success-focus-ring";
+};
+export declare function textareaSoloShellClassesFor(size: InputSize, status: InputStatus | undefined, resize: TextAreaResize): string;
+export declare function textareaCompoundFieldPaddingClasses(resize: TextAreaResize, size: InputSize): string | undefined;
+export declare const textareaShellClasses: Record<InputSize, string>;
+export declare const textareaCompoundBannerOverlapBottomClasses: Record<InputSize, string>;
+export declare const textareaCompoundBannerOverlapTopPadClasses: Record<InputSize, string>;
+export declare const textareaCompoundFieldOverlapTopClasses: Record<InputSize, string>;
+export declare const textareaTrailingInsetPositionClasses: Record<InputSize, string>;
+export declare const textareaTrailingInsetClasses = "pointer-events-none absolute flex items-center gap-1.5";
+export declare function textareaCompoundInnerFieldClassesFor(size: InputSize, status: InputStatus, messagePosition: InputMessagePosition): string;
+export declare function textareaStatusBannerClassesFor(status: InputStatus, size: InputSize, messagePosition: InputMessagePosition): string;
+export declare const textareaBaseClasses: string;
+/**
+ * Inside **PromptBar** — the parent pill owns border, radius, and focus ring.
+ * No element shell, no min-height, no resize grip.
+ */
+export declare const textareaInlineClasses: string;
+export { inputAttachedFieldClasses, inputAttachedInputClasses, inputCompoundShellClassesFor, inputControlStackClasses, inputDisabledClasses, inputDisabledLabelClasses, inputFieldStackClasses, inputSoloFocusRingBaseClasses, inputSoloFocusRingColorClasses, inputStatusGapClasses, inputStatusShellClasses, };
+//# sourceMappingURL=textareaShellStyles.d.ts.map

package/dist/components/atoms/TextArea/textareaShellStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textareaShellStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/TextArea/textareaShellStyles.ts"],"names":[],"mappings":"AACA,OAAO,EACL,yBAAyB,EACzB,yBAAyB,EAEzB,4BAA4B,EAE5B,wBAAwB,EACxB,oBAAoB,EACpB,yBAAyB,EACzB,sBAAsB,EAItB,6BAA6B,EAC7B,8BAA8B,EAE9B,qBAAqB,EACrB,uBAAuB,EACvB,KAAK,oBAAoB,EACzB,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,2BAA2B,CAAC;AAEnC,YAAY,EAAE,oBAAoB,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAC9F,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE7F,eAAO,MAAM,eAAe,uCAAwC,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9D,qFAAqF;AACrF,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI/D,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAIhE,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI9D,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAIjE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iCAAiC,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAIvE,CAAC;AAEF,eAAO,MAAM,iCAAiC,2GAC4D,CAAC;AAE3G,eAAO,MAAM,kCAAkC;;;;;CAKrC,CAAC;AAEX,wBAAgB,2BAA2B,CACzC,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,WAAW,GAAG,SAAS,EAC/B,MAAM,EAAE,cAAc,GACrB,MAAM,CAgBR;AAED,wBAAgB,mCAAmC,CACjD,MAAM,EAAE,cAAc,EACtB,IAAI,EAAE,SAAS,GACd,MAAM,GAAG,SAAS,CAEpB;AAED,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI1D,CAAC;AAEF,eAAO,MAAM,0CAA0C,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAIhF,CAAC;AAEF,eAAO,MAAM,0CAA0C,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAIhF,CAAC;AAEF,eAAO,MAAM,sCAAsC,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI5E,CAAC;AAEF,eAAO,MAAM,oCAAoC,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI1E,CAAC;AAEF,eAAO,MAAM,4BAA4B,2DACiB,CAAC;AAE3D,wBAAgB,oCAAoC,CAClD,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,WAAW,EACnB,eAAe,EAAE,oBAAoB,GACpC,MAAM,CASR;AAED,wBAAgB,8BAA8B,CAC5C,MAAM,EAAE,WAAW,EACnB,IAAI,EAAE,SAAS,EACf,eAAe,EAAE,oBAAoB,GACpC,MAAM,CAgBR;AAED,eAAO,MAAM,mBAAmB,QAA+C,CAAC;AAEhF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,QAE2C,CAAC;AAE9E,OAAO,EACL,yBAAyB,EACzB,yBAAyB,EACzB,4BAA4B,EAC5B,wBAAwB,EACxB,oBAAoB,EACpB,yBAAyB,EACzB,sBAAsB,EACtB,6BAA6B,EAC7B,8BAA8B,EAC9B,qBAAqB,EACrB,uBAAuB,GACxB,CAAC"}

package/dist/components/atoms/TextArea/textareaShellStyles.js

@@ -0,0 +1,71 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { inputAttachedFieldClasses as t, inputAttachedInputClasses as n, inputBaseClasses as r, inputCompoundShellClassesFor as i, inputCompoundShellFocusRingClasses as a, inputControlStackClasses as o, inputDisabledClasses as s, inputDisabledLabelClasses as c, inputFieldStackClasses as l, inputShellBorderClasses as u, inputShellElevationClasses as d, inputShellTransitionClasses as f, inputStatusBannerSurfaceClasses as p, inputStatusGapClasses as m, inputStatusShellClasses as h } from "../Input/inputShellStyles.js";
+//#region src/components/atoms/TextArea/textareaShellStyles.ts
+var g = [
+	"none",
+	"vertical",
+	"both"
+], _ = {
+	sm: "rounded-xl",
+	md: "rounded-xl",
+	lg: "rounded-xl"
+}, v = {
+	none: "resize-none",
+	vertical: "resize-y",
+	both: "resize"
+}, y = {
+	sm: "min-h-20",
+	md: "min-h-24",
+	lg: "min-h-28"
+}, b = {
+	sm: "px-2.5 py-2 text-xs leading-normal",
+	md: "px-3 py-2.5 text-sm leading-normal",
+	lg: "px-4 py-3 text-base leading-normal"
+}, x = {
+	sm: "pr-2.5 pb-2.5",
+	md: "pr-3 pb-3",
+	lg: "pr-3.5 pb-3.5"
+}, S = "focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-body", C = {
+	default: "focus-within:ring-focus-ring",
+	error: "focus-within:ring-error-focus-ring",
+	warning: "focus-within:ring-warning-focus-ring",
+	success: "focus-within:ring-success-focus-ring"
+};
+function w(t, n, r) {
+	let i = n == null ? C.default : C[n];
+	return e("relative w-full", E[t], _[t], S, i, n != null && e("border", h[n]), r !== "none" && x[t], f);
+}
+function T(e, t) {
+	return e === "none" ? void 0 : x[t];
+}
+var E = {
+	sm: e(u, d),
+	md: e(u, d),
+	lg: e(u, d)
+}, D = {
+	sm: "-mt-5 pt-7",
+	md: "-mt-6 pt-8",
+	lg: "-mt-7 pt-9"
+}, O = {
+	sm: "pb-7",
+	md: "pb-8",
+	lg: "pb-9"
+}, k = {
+	sm: "-mt-5",
+	md: "-mt-6",
+	lg: "-mt-7"
+}, A = {
+	sm: "right-2.5 top-2",
+	md: "right-3 top-2.5",
+	lg: "right-3.5 top-3"
+}, j = "pointer-events-none absolute flex items-center gap-1.5";
+function M(t, n, r) {
+	return e("relative z-10 flex w-full border bg-surface shadow-sm", _[t], h[n], a[n], r === "top" && k[t], f);
+}
+function N(t, n, r) {
+	return r === "bottom" ? e("relative z-0 flex w-full items-center gap-2 px-3 pb-3 leading-snug", D[n], "rounded-b-[1.375rem]", p[t]) : e("relative z-0 flex w-full items-center gap-2 px-3 pt-2.5 leading-snug", O[n], "rounded-t-[1.375rem]", p[t]);
+}
+var P = e(r, "block leading-normal"), F = "block w-full min-w-0 resize-none rounded-none border-0 bg-transparent font-sans font-normal tracking-normal text-fg shadow-none placeholder:text-disabled focus-visible:outline-none focus-visible:ring-0";
+//#endregion
+export { t as inputAttachedFieldClasses, n as inputAttachedInputClasses, i as inputCompoundShellClassesFor, o as inputControlStackClasses, s as inputDisabledClasses, c as inputDisabledLabelClasses, l as inputFieldStackClasses, m as inputStatusGapClasses, h as inputStatusShellClasses, P as textareaBaseClasses, D as textareaCompoundBannerOverlapBottomClasses, O as textareaCompoundBannerOverlapTopPadClasses, k as textareaCompoundFieldOverlapTopClasses, T as textareaCompoundFieldPaddingClasses, M as textareaCompoundInnerFieldClassesFor, b as textareaFixedPaddingClasses, F as textareaInlineClasses, y as textareaMinHeightClasses, v as textareaResizeClasses, g as textareaResizes, E as textareaShellClasses, S as textareaShellFocusRingBaseClasses, C as textareaShellFocusRingColorClasses, x as textareaShellResizePaddingClasses, _ as textareaSoloRadiusClasses, w as textareaSoloShellClassesFor, N as textareaStatusBannerClassesFor, j as textareaTrailingInsetClasses, A as textareaTrailingInsetPositionClasses };

package/dist/components/atoms/TextLink/TextLink.d.ts

@@ -0,0 +1,14 @@
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+/** Layout-only — margin or placement; not for changing the link treatment. */
+export type TextLinkLayoutClassName = string;
+export interface TextLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "className" | "href" | "target"> {
+    href: string;
+    children: ReactNode;
+    /** Opens in a new tab and appends the external-destination icon. */
+    external?: boolean;
+    /** Layout-only: margin or placement. */
+    className?: TextLinkLayoutClassName;
+}
+/** Inline text navigation with the canonical solid underline treatment. */
+export declare function TextLink({ href, children, external, className, rel, ...anchorProps }: TextLinkProps): import("react").JSX.Element;
+//# sourceMappingURL=TextLink.d.ts.map

package/dist/components/atoms/TextLink/TextLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextLink.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/TextLink/TextLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQ7D,8EAA8E;AAC9E,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,CAC7C;IACD,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;IACpB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAED,2EAA2E;AAC3E,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,QAAQ,EACR,QAAgB,EAChB,SAAS,EACT,GAAG,EACH,GAAG,WAAW,EACf,EAAE,aAAa,+BAwBf"}

package/dist/components/atoms/TextLink/TextLink.js

@@ -0,0 +1,26 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { textLinkClasses as t, textLinkExternalIconClasses as n } from "./textLinkStyles.js";
+import { SquareArrowOutUpRight as r } from "lucide-react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/atoms/TextLink/TextLink.tsx
+function s({ href: s, children: c, external: l = !1, className: u, rel: d, ...f }) {
+	let p = l && d == null ? "noopener noreferrer" : d;
+	return /* @__PURE__ */ o("a", {
+		...f,
+		href: s,
+		target: l ? "_blank" : void 0,
+		rel: p,
+		className: e(t, u),
+		children: [c, l ? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(r, {
+			className: n,
+			strokeWidth: 2,
+			"aria-hidden": !0
+		}), /* @__PURE__ */ a("span", {
+			className: "sr-only",
+			children: " (opens in a new tab)"
+		})] }) : null]
+	});
+}
+//#endregion
+export { s as TextLink };

package/dist/components/atoms/TextLink/textLinkStyles.d.ts

@@ -0,0 +1,3 @@
+export declare const textLinkClasses: string;
+export declare const textLinkExternalIconClasses = "ml-0.5 inline-block size-[0.85em] align-[0.05em] stroke-current";
+//# sourceMappingURL=textLinkStyles.d.ts.map

package/dist/components/atoms/TextLink/textLinkStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textLinkStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/TextLink/textLinkStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,QAKqF,CAAC;AAElH,eAAO,MAAM,2BAA2B,oEAC2B,CAAC"}

package/dist/components/atoms/TextLink/textLinkStyles.js

@@ -0,0 +1,6 @@
+"use client";
+import { motionTransition as e } from "../../../lib/motion.js";
+//#region src/components/atoms/TextLink/textLinkStyles.ts
+var t = "font-medium text-fg underline decoration-solid decoration-border-emphasized underline-offset-4 transition-[color,text-decoration-color] " + e("fast") + " hover:decoration-fg focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-body", n = "ml-0.5 inline-block size-[0.85em] align-[0.05em] stroke-current";
+//#endregion
+export { t as textLinkClasses, n as textLinkExternalIconClasses };

package/dist/components/atoms/TextSequenceShape/TextSequenceShape.d.ts

@@ -0,0 +1,21 @@
+import { textSequenceShapeTones, textSequenceShapeVariants, type TextSequenceShapeTone, type TextSequenceShapeVariant } from "./textSequenceShapeStyles";
+export { textSequenceShapeTones, textSequenceShapeVariants, type TextSequenceShapeTone, type TextSequenceShapeVariant, };
+/** Layout only — margin. Not for recoloring or resizing. */
+export type TextSequenceShapeLayoutClassName = string;
+export interface TextSequenceShapeProps {
+    variant: TextSequenceShapeVariant;
+    /**
+     * Token fill. Default `brand` (`--color-brand`).
+     * `brand-soft` and `info-muted` paint a two-stop gradient between tokens.
+     */
+    tone?: TextSequenceShapeTone;
+    /** Layout only. */
+    className?: TextSequenceShapeLayoutClassName;
+}
+/**
+ * Inline decorative mark that wraps with the surrounding text.
+ * Decorative — always `aria-hidden`. The sentence lives on TextSequence.
+ * The layout gap is zero-height so the line box stays the type leading.
+ */
+export declare function TextSequenceShape({ variant, tone, className }: TextSequenceShapeProps): import("react").JSX.Element;
+//# sourceMappingURL=TextSequenceShape.d.ts.map

package/dist/components/atoms/TextSequenceShape/TextSequenceShape.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextSequenceShape.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/TextSequenceShape/TextSequenceShape.tsx"],"names":[],"mappings":"AAEA,OAAO,EAML,sBAAsB,EACtB,yBAAyB,EACzB,KAAK,qBAAqB,EAC1B,KAAK,wBAAwB,EAC9B,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EACL,sBAAsB,EACtB,yBAAyB,EACzB,KAAK,qBAAqB,EAC1B,KAAK,wBAAwB,GAC9B,CAAC;AAEF,4DAA4D;AAC5D,MAAM,MAAM,gCAAgC,GAAG,MAAM,CAAC;AAEtD,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,wBAAwB,CAAC;IAClC;;;OAGG;IACH,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B,mBAAmB;IACnB,SAAS,CAAC,EAAE,gCAAgC,CAAC;CAC9C;AAqHD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,IAAc,EAAE,SAAS,EAAE,EAAE,sBAAsB,+BAkB/F"}