@thewhatmatters/wmds 0.2.0

package/dist/components/atoms/Button/ButtonStatusContent.d.ts

@@ -0,0 +1,10 @@
+import { type ButtonSize } from "./buttonStyles";
+import type { ButtonStatus } from "./buttonStatusStyles";
+export declare function ButtonStatusIcon({ status, size }: {
+    status: ButtonStatus;
+    size: ButtonSize;
+}): import("react").JSX.Element | null;
+export declare function ButtonStatusLabel({ label }: {
+    label: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ButtonStatusContent.d.ts.map

package/dist/components/atoms/Button/ButtonStatusContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonStatusContent.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/ButtonStatusContent.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAyB,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAKxE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAwCzD,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE;IAAE,MAAM,EAAE,YAAY,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,sCAsB5F;AAED,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,+BAkB7D"}

package/dist/components/atoms/Button/ButtonStatusContent.js

@@ -0,0 +1,92 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { buttonIconSizeClasses as t } from "./buttonStyles.js";
+import { statusIconSpring as n, statusLabelSpring as r } from "./buttonStatusMotion.js";
+import { Check as i, Loader2 as a, X as o } from "lucide-react";
+import { jsx as s } from "react/jsx-runtime";
+import { AnimatePresence as c, motion as l, useTime as u, useTransform as d } from "motion/react";
+//#region src/components/atoms/Button/ButtonStatusContent.tsx
+function f({ size: n }) {
+	let r = u(), i = d(r, [0, 1e3], [0, 360], { clamp: !1 });
+	return /* @__PURE__ */ s(l.span, {
+		className: "inline-flex shrink-0",
+		style: { rotate: i },
+		"aria-hidden": !0,
+		children: /* @__PURE__ */ s(a, {
+			className: e("stroke-current", t[n]),
+			strokeWidth: 2
+		})
+	});
+}
+function p({ status: n, size: r }) {
+	let a = e("shrink-0 stroke-current", t[r]);
+	return n === "loading" ? /* @__PURE__ */ s(f, { size: r }) : s(n === "success" ? i : o, {
+		className: a,
+		strokeWidth: 2.5,
+		"aria-hidden": !0
+	});
+}
+function m({ status: e, size: t }) {
+	return e === "idle" ? null : /* @__PURE__ */ s(c, {
+		mode: "popLayout",
+		initial: !1,
+		children: /* @__PURE__ */ s(l.span, {
+			layout: !0,
+			layoutId: "status-icon",
+			className: "inline-flex shrink-0 items-center justify-center",
+			initial: {
+				opacity: 0,
+				scale: .5,
+				filter: "blur(4px)"
+			},
+			animate: {
+				opacity: 1,
+				scale: 1,
+				filter: "blur(0px)"
+			},
+			exit: {
+				opacity: 0,
+				scale: .5,
+				filter: "blur(4px)"
+			},
+			transition: n,
+			"aria-hidden": !0,
+			children: /* @__PURE__ */ s(p, {
+				status: e,
+				size: t
+			})
+		}, e)
+	});
+}
+function h({ label: e }) {
+	return /* @__PURE__ */ s("span", {
+		className: "relative inline-flex items-center justify-center overflow-hidden",
+		children: /* @__PURE__ */ s(c, {
+			mode: "popLayout",
+			initial: !1,
+			children: /* @__PURE__ */ s(l.span, {
+				layout: !0,
+				className: "inline-block whitespace-nowrap",
+				initial: {
+					opacity: 0,
+					y: 8,
+					filter: "blur(6px)"
+				},
+				animate: {
+					opacity: 1,
+					y: 0,
+					filter: "blur(0px)"
+				},
+				exit: {
+					opacity: 0,
+					y: -8,
+					filter: "blur(6px)"
+				},
+				transition: r,
+				children: e
+			}, e)
+		})
+	});
+}
+//#endregion
+export { m as ButtonStatusIcon, h as ButtonStatusLabel };

package/dist/components/atoms/Button/buttonStatusMotion.d.ts

@@ -0,0 +1,40 @@
+import type { ButtonRole } from "./buttonStyles";
+import type { ButtonStatus } from "./buttonStatusStyles";
+/** Motion `animate` targets — CSS vars resolve at runtime for smooth crossfades. */
+export type StatusPaint = {
+    backgroundColor: string;
+    color: string;
+};
+/** Non-animated shell utilities paired with `animate` paint. */
+export declare const statusShellClasses: Record<ButtonStatus, string>;
+export declare const roleIdleShellClasses: Record<ButtonRole, string>;
+export declare function getStatusPaint(status: ButtonStatus, role: ButtonRole): StatusPaint;
+export declare function getStatusShellClass(status: ButtonStatus, role: ButtonRole): string;
+/** Shared layout transition for pill width + paint — matches Motion example feel. */
+export declare const statusMorphTransition: {
+    layout: {
+        duration: number;
+        ease: readonly [0.16, 1, 0.3, 1];
+    };
+    backgroundColor: {
+        duration: number;
+        ease: readonly [0.16, 1, 0.3, 1];
+    };
+    color: {
+        duration: number;
+        ease: readonly [0.16, 1, 0.3, 1];
+    };
+};
+export declare const statusIconSpring: {
+    type: "spring";
+    stiffness: number;
+    damping: number;
+    mass: number;
+};
+export declare const statusLabelSpring: {
+    type: "spring";
+    stiffness: number;
+    damping: number;
+    mass: number;
+};
+//# sourceMappingURL=buttonStatusMotion.d.ts.map

package/dist/components/atoms/Button/buttonStatusMotion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonStatusMotion.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/buttonStatusMotion.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,oFAAoF;AACpF,MAAM,MAAM,WAAW,GAAG;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AA4CF,gEAAgE;AAChE,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAK3D,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAO3D,CAAC;AAEF,wBAAgB,cAAc,CAAC,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,UAAU,GAAG,WAAW,CAElF;AAED,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,UAAU,GAAG,MAAM,CAElF;AAED,qFAAqF;AACrF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;CAIjC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;CAK5B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;CAK7B,CAAC"}

package/dist/components/atoms/Button/buttonStatusMotion.js

@@ -0,0 +1,100 @@
+"use client";
+//#region src/components/atoms/Button/buttonStatusMotion.ts
+var e = {
+	primary: {
+		backgroundColor: "var(--color-primary)",
+		color: "var(--color-on-primary)"
+	},
+	secondary: {
+		backgroundColor: "var(--color-secondary)",
+		color: "var(--color-secondary-foreground)"
+	},
+	ghost: {
+		backgroundColor: "transparent",
+		color: "var(--color-ghost-foreground)"
+	},
+	destructive: {
+		backgroundColor: "var(--color-error)",
+		color: "var(--color-on-error)"
+	},
+	inverse: {
+		backgroundColor: "var(--color-on-brand)",
+		color: "var(--color-brand)"
+	},
+	outline: {
+		backgroundColor: "transparent",
+		color: "var(--color-fg)"
+	}
+}, t = {
+	loading: {
+		backgroundColor: "var(--color-secondary)",
+		color: "var(--color-secondary-foreground)"
+	},
+	success: {
+		backgroundColor: "var(--color-success)",
+		color: "var(--color-on-success)"
+	},
+	error: {
+		backgroundColor: "var(--color-error)",
+		color: "var(--color-on-error)"
+	}
+}, n = {
+	idle: "",
+	loading: "shadow-raised",
+	success: "shadow-inset-highlight",
+	error: ""
+}, r = {
+	primary: "",
+	secondary: "shadow-raised",
+	ghost: "",
+	destructive: "",
+	inverse: "shadow-raised",
+	outline: ""
+};
+function i(n, r) {
+	return n === "idle" ? e[r] : t[n];
+}
+function a(e, t) {
+	return e === "idle" ? r[t] : n[e];
+}
+var o = {
+	layout: {
+		duration: .28,
+		ease: [
+			.16,
+			1,
+			.3,
+			1
+		]
+	},
+	backgroundColor: {
+		duration: .2,
+		ease: [
+			.16,
+			1,
+			.3,
+			1
+		]
+	},
+	color: {
+		duration: .2,
+		ease: [
+			.16,
+			1,
+			.3,
+			1
+		]
+	}
+}, s = {
+	type: "spring",
+	stiffness: 520,
+	damping: 32,
+	mass: .85
+}, c = {
+	type: "spring",
+	stiffness: 480,
+	damping: 34,
+	mass: .9
+};
+//#endregion
+export { i as getStatusPaint, a as getStatusShellClass, r as roleIdleShellClasses, s as statusIconSpring, c as statusLabelSpring, o as statusMorphTransition, n as statusShellClasses };

package/dist/components/atoms/Button/buttonStatusStyles.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+/** Multi-state pill cycle — inspired by [Motion multi-state badge](https://motion.dev/examples/react-multi-state-badge). */
+export type ButtonStatus = "idle" | "loading" | "success" | "error";
+export declare const buttonStatusCycle: ButtonStatus[];
+export declare const defaultStatusLabels: Record<ButtonStatus, string>;
+export declare function getNextButtonStatus(current: ButtonStatus): ButtonStatus;
+export declare function resolveStatusLabels(children: ReactNode, overrides?: Partial<Record<ButtonStatus, string>>): Record<ButtonStatus, string>;
+/** Status morph sizing — aligns with cluster scale for xs/sm/md (ADR-0011). */
+export declare const buttonStatusSizeClasses: {
+    readonly xs: `${string} ${string} py-1 text-sm leading-none`;
+    readonly sm: `${string} ${string} py-1.5 text-sm leading-none`;
+    readonly md: `${string} ${string} py-2.5 text-sm leading-none`;
+    readonly lg: `min-h-12 ${string} py-3 text-base leading-none`;
+};
+export declare const buttonStatusIconGapClasses: {
+    readonly xs: "gap-1.5";
+    readonly sm: "gap-1.5";
+    readonly md: "gap-2";
+    readonly lg: "gap-2";
+};
+//# sourceMappingURL=buttonStatusStyles.d.ts.map

package/dist/components/atoms/Button/buttonStatusStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonStatusStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/buttonStatusStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,4HAA4H;AAC5H,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEpE,eAAO,MAAM,iBAAiB,EAAE,YAAY,EAA4C,CAAC;AAEzF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAK5D,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,YAAY,GAAG,YAAY,CAGvE;AAED,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,SAAS,EACnB,SAAS,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,GAChD,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAW9B;AAED,+EAA+E;AAC/E,eAAO,MAAM,uBAAuB;;;;;CAKW,CAAC;AAEhD,eAAO,MAAM,0BAA0B;;;;;CAKQ,CAAC"}

package/dist/components/atoms/Button/buttonStatusStyles.js

@@ -0,0 +1,39 @@
+"use client";
+import { clusterHeightClasses as e } from "../../../lib/clusterScale.js";
+import { buttonHorizontalPadding as t } from "./buttonStyles.js";
+//#region src/components/atoms/Button/buttonStatusStyles.ts
+var n = [
+	"idle",
+	"loading",
+	"success",
+	"error"
+], r = {
+	idle: "Start",
+	loading: "Processing",
+	success: "Success",
+	error: "Error"
+};
+function i(e) {
+	return n[(n.indexOf(e) + 1) % n.length];
+}
+function a(e, t) {
+	return {
+		idle: t?.idle ?? (typeof e == "string" || typeof e == "number" ? String(e) : r.idle),
+		loading: t?.loading ?? r.loading,
+		success: t?.success ?? r.success,
+		error: t?.error ?? r.error
+	};
+}
+var o = {
+	xs: `${e.sm} ${t.xs} py-1 text-sm leading-none`,
+	sm: `${e.md} ${t.sm} py-1.5 text-sm leading-none`,
+	md: `${e.lg} ${t.md} py-2.5 text-sm leading-none`,
+	lg: `min-h-12 ${t.lg} py-3 text-base leading-none`
+}, s = {
+	xs: "gap-1.5",
+	sm: "gap-1.5",
+	md: "gap-2",
+	lg: "gap-2"
+};
+//#endregion
+export { n as buttonStatusCycle, s as buttonStatusIconGapClasses, o as buttonStatusSizeClasses, r as defaultStatusLabels, i as getNextButtonStatus, a as resolveStatusLabels };

package/dist/components/atoms/Button/buttonStyles.d.ts

@@ -0,0 +1,47 @@
+/** Prescribed action roles — not a semantic color picker. ADR-0004. */
+export declare const buttonRoles: readonly ["primary", "secondary", "ghost", "destructive", "inverse", "outline"];
+export type ButtonRole = (typeof buttonRoles)[number];
+export type ButtonSize = "xs" | "sm" | "md" | "lg";
+export type IconButtonSize = ButtonSize;
+/** All action buttons are pills by default — `layout="row"` for flat full-width detail lines. */
+export declare const buttonPillClass = "rounded-full";
+export declare const buttonLayouts: readonly ["pill", "row", "nav"];
+export type ButtonLayout = (typeof buttonLayouts)[number];
+/** `layout="row"` width: `fill` (default) spans the container; `hug` sizes to its content. */
+export declare const buttonWidths: readonly ["fill", "hug"];
+export type ButtonWidth = (typeof buttonWidths)[number];
+/** Pill content alignment: `center` (default) or `start` for full-width suggestion and choice rows. */
+export declare const buttonAligns: readonly ["center", "start"];
+export type ButtonAlign = (typeof buttonAligns)[number];
+/** `role="outline"` border: `strong` (default, `border-fg`) or `quiet` (`border-border` hairline). */
+export declare const buttonEmphases: readonly ["strong", "quiet"];
+export type ButtonEmphasis = (typeof buttonEmphases)[number];
+export declare const buttonBaseClasses: string;
+export declare const buttonRoleClasses: Record<ButtonRole, string>;
+/** `role="outline"` with `emphasis="quiet"` — the same outline on the quiet `border-border` hairline. */
+export declare const buttonOutlineQuietClasses = "border border-border bg-transparent text-fg hover:bg-ghost-hover active:bg-ghost-active";
+/** Content alignment inside a pill (and IconButton / status pills, which stay centered). */
+export declare const buttonAlignClasses: Record<ButtonAlign, string>;
+/**
+ * Mono uppercase label. `!` beats the sans medium shell.
+ * Size is `--font-size-sm` (12px) — small, still a control label.
+ */
+export declare const buttonMonoLabelClasses = "!font-mono !text-[length:var(--font-size-sm)] !font-normal !uppercase !leading-none !tracking-[0.14em]";
+/** Trailing accent square for a Lucide glyph (`endIcon`). */
+export declare const buttonEndIconSquareClasses = "inline-flex size-5 shrink-0 items-center justify-center rounded-none bg-accent text-on-accent";
+/** Horizontal padding per size — md = 20px (`px-5`). Shared by action and status modes. */
+export declare const buttonHorizontalPadding: Record<ButtonSize, string>;
+/** Touch-friendly heights — xs/sm/md align to cluster sm/md/lg (ADR-0011); lg is extended. */
+export declare const buttonSizeClasses: Record<ButtonSize, string>;
+export declare const buttonIconSizeClasses: Record<ButtonSize, string>;
+/** Square hit targets — xs/sm/md align to cluster sm/md/lg; lg is FAB extended (48px). */
+export declare const iconButtonSizeClasses: Record<IconButtonSize, string>;
+/** Flat row — TaskRows detail lines, settings rows (not a pill CTA). Width comes from `buttonRowWidthClasses`. */
+export declare const buttonRowBaseClasses: string;
+export declare const buttonRowLayoutClasses: string;
+/** `fill` — label and value pushed apart across the row. `hug` — content width, label and value close together. */
+export declare const buttonRowWidthClasses: Record<ButtonWidth, string>;
+/** Inset nav row — **NavList** rows (icon + label + optional count as children). */
+export declare const buttonNavLayoutClasses: string;
+export declare function buttonNavStateClasses(selected: boolean): string;
+//# sourceMappingURL=buttonStyles.d.ts.map

package/dist/components/atoms/Button/buttonStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/buttonStyles.ts"],"names":[],"mappings":"AAMA,uEAAuE;AACvE,eAAO,MAAM,WAAW,iFAAkF,CAAC;AAE3G,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC;AAExC,iGAAiG;AACjG,eAAO,MAAM,eAAe,iBAAiB,CAAC;AAE9C,eAAO,MAAM,aAAa,iCAAkC,CAAC;AAE7D,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1D,8FAA8F;AAC9F,eAAO,MAAM,YAAY,0BAA2B,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD,uGAAuG;AACvG,eAAO,MAAM,YAAY,8BAA+B,CAAC;AAEzD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD,sGAAsG;AACtG,eAAO,MAAM,cAAc,8BAA+B,CAAC;AAE3D,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,eAAO,MAAM,iBAAiB,QAUd,CAAC;AAEjB,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAaxD,CAAC;AAEF,yGAAyG;AACzG,eAAO,MAAM,yBAAyB,4FACqD,CAAC;AAE5F,4FAA4F;AAC5F,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAG1D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,sBAAsB,2GACuE,CAAC;AAE3G,6DAA6D;AAC7D,eAAO,MAAM,0BAA0B,kGAC0D,CAAC;AAElG,2FAA2F;AAC3F,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAK9D,CAAC;AAEF,8FAA8F;AAC9F,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAKxD,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAK5D,CAAC;AAEF,0FAA0F;AAC1F,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAKhE,CAAC;AAEF,kHAAkH;AAClH,eAAO,MAAM,oBAAoB,QAK+C,CAAC;AAEjF,eAAO,MAAM,sBAAsB,QAEqB,CAAC;AAEzD,mHAAmH;AACnH,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAG7D,CAAC;AAEF,oFAAoF;AACpF,eAAO,MAAM,sBAAsB,QAGqB,CAAC;AAEzD,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,CAI/D"}

package/dist/components/atoms/Button/buttonStyles.js

@@ -0,0 +1,54 @@
+"use client";
+import { motionTransition as e, pressScaleClass as t } from "../../../lib/motion.js";
+import { clusterHeightClasses as n, clusterSquareClasses as r } from "../../../lib/clusterScale.js";
+//#region src/components/atoms/Button/buttonStyles.ts
+var i = [
+	"primary",
+	"secondary",
+	"ghost",
+	"destructive",
+	"inverse",
+	"outline"
+], a = "rounded-full", o = [
+	"pill",
+	"row",
+	"nav"
+], s = ["fill", "hug"], c = ["center", "start"], l = ["strong", "quiet"], u = "inline-flex cursor-pointer items-center font-sans font-medium tracking-normal transition-[color,transform,box-shadow,border-color,outline-color,background-color] " + e("fast") + " " + t + " focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-body disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:pointer-events-none aria-disabled:opacity-50 no-underline", d = {
+	primary: "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active",
+	secondary: "bg-secondary text-secondary-foreground shadow-raised hover:bg-secondary-hover active:bg-secondary-active",
+	ghost: "bg-transparent text-ghost-foreground hover:bg-ghost-hover active:bg-ghost-active",
+	destructive: "bg-error text-on-error hover:bg-error-hover active:bg-error-active",
+	inverse: "bg-on-brand text-brand shadow-raised hover:bg-on-brand-hover active:bg-on-brand-hover",
+	outline: "border border-fg bg-transparent text-fg hover:bg-ghost-hover active:bg-ghost-active"
+}, f = "border border-border bg-transparent text-fg hover:bg-ghost-hover active:bg-ghost-active", p = {
+	center: "justify-center",
+	start: "justify-start text-left"
+}, m = "!font-mono !text-[length:var(--font-size-sm)] !font-normal !uppercase !leading-none !tracking-[0.14em]", h = "inline-flex size-5 shrink-0 items-center justify-center rounded-none bg-accent text-on-accent", g = {
+	xs: "px-3.5",
+	sm: "px-4",
+	md: "px-5",
+	lg: "px-7"
+}, _ = {
+	xs: `${n.sm} ${g.xs} py-1 text-sm leading-none`,
+	sm: `${n.md} ${g.sm} py-1.5 text-sm leading-none`,
+	md: `${n.lg} ${g.md} py-2.5 text-sm leading-none`,
+	lg: `min-h-12 ${g.lg} py-3 text-base leading-none`
+}, v = {
+	xs: "size-3.5",
+	sm: "size-4",
+	md: "size-4",
+	lg: "size-[1.125rem]"
+}, y = {
+	xs: r.sm,
+	sm: r.md,
+	md: r.lg,
+	lg: "size-12 shrink-0"
+}, b = "flex cursor-pointer items-center font-sans tracking-normal transition-[color,background-color,outline-color] " + e("fast") + " focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50", x = "h-auto min-h-0 rounded-md px-1.5 py-1 text-left font-normal focus-visible:ring-inset focus-visible:ring-offset-0", S = {
+	fill: "w-full justify-between gap-3",
+	hug: "w-auto justify-start gap-1.5"
+}, C = "h-auto min-h-0 w-full justify-start gap-2.5 rounded-xl px-2.5 py-2 text-left text-sm font-normal leading-[var(--line-height-sm)] focus-visible:ring-inset focus-visible:ring-offset-0";
+function w(e) {
+	return e ? "bg-secondary text-secondary-foreground" : "bg-transparent text-muted hover:bg-ghost-hover hover:text-fg";
+}
+//#endregion
+export { p as buttonAlignClasses, c as buttonAligns, u as buttonBaseClasses, l as buttonEmphases, h as buttonEndIconSquareClasses, g as buttonHorizontalPadding, v as buttonIconSizeClasses, o as buttonLayouts, m as buttonMonoLabelClasses, C as buttonNavLayoutClasses, w as buttonNavStateClasses, f as buttonOutlineQuietClasses, a as buttonPillClass, d as buttonRoleClasses, i as buttonRoles, b as buttonRowBaseClasses, x as buttonRowLayoutClasses, S as buttonRowWidthClasses, _ as buttonSizeClasses, s as buttonWidths, y as iconButtonSizeClasses };

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

@@ -0,0 +1,31 @@
+import { type InputHTMLAttributes } from "react";
+import { type CheckboxSize } from "./checkboxStyles";
+import type { InputStatus } from "../Input/inputShellStyles";
+export { checkboxSizes, type CheckboxSize } from "./checkboxStyles";
+export { inputStatuses, type InputStatus } from "../Input/inputShellStyles";
+/** Layout-only — width/margin on the row wrapper. */
+export type CheckboxLayoutClassName = string;
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    size?: CheckboxSize;
+    /** Visible label — always rendered; use `labelHidden` to visually hide. */
+    label: string;
+    /** Visually hide label — still available to assistive tech. */
+    labelHidden?: boolean;
+    /** Neutral helper below the label. */
+    description?: string;
+    /** Mixed selection — sets native `indeterminate` on the input. */
+    indeterminate?: boolean;
+    /** Validation status — tints box border; pair with `message`. */
+    status?: InputStatus;
+    /** Validation copy below the row — requires `status`. */
+    message?: string;
+    /** Spinner inside the box — async validation. */
+    loading?: boolean;
+    className?: CheckboxLayoutClassName;
+}
+/**
+ * Boolean toggle — box + label row.
+ * Label + optional description beside the box; validation message below the row.
+ */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,mBAAmB,EACzB,MAAM,OAAO,CAAC;AAIf,OAAO,EAiBL,KAAK,YAAY,EAClB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAa,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExE,OAAO,EAAE,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,KAAK,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE5E,qDAAqD;AACrD,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kEAAkE;IAClE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAcD;;;GAGG;AACH,eAAO,MAAM,QAAQ,4GAgLnB,CAAC"}

package/dist/components/atoms/Checkbox/Checkbox.js

@@ -0,0 +1,101 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import "../Input/inputShellStyles.js";
+import { InputStatusBanner as t } from "../inputShared/InputStatusBanner.js";
+import { checkboxBoxClassesFor as n, checkboxCheckIconSizeClasses as r, checkboxDescriptionClasses as i, checkboxDescriptionRowClasses as ee, checkboxHiddenInputClasses as a, checkboxHitTargetDescriptionAlignClasses as o, checkboxHitTargetSizeClasses as s, checkboxIndeterminateBarSizeClasses as c, checkboxLabelClassesFor as l, checkboxMarkClasses as u, checkboxRowBaseClasses as d, checkboxRowSizeClasses as f, checkboxSizes as p, checkboxStatusBannerClassesFor as m, checkboxTextColumnClasses as h } from "./checkboxStyles.js";
+import { forwardRef as g, useCallback as _, useId as v, useState as y } from "react";
+import { Check as te, Loader2 as ne } from "lucide-react";
+import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
+//#region src/components/atoms/Checkbox/Checkbox.tsx
+var C = {
+	sm: "sm",
+	md: "md"
+};
+function w(e) {
+	e.message != null && e.status == null && console.warn("[WMDS Checkbox] `message` requires `status`.");
+}
+var T = g(function({ size: p = "md", label: g, labelHidden: T = !1, description: E, indeterminate: D = !1, status: O, message: k, loading: A = !1, className: j, disabled: M, readOnly: N, checked: P, defaultChecked: F, id: I, onChange: L, ...R }, z) {
+	let B = v(), V = I ?? B;
+	w({
+		status: O,
+		message: k
+	});
+	let H = P !== void 0, [U, W] = y(F ?? !1), G = H ? !!P : U, K = M || A, q = k != null && k.length > 0 && O != null, J = q ? `${V}-message` : void 0, Y = E != null && !T ? `${V}-description` : void 0, X = [
+		R["aria-describedby"],
+		Y,
+		J
+	].filter(Boolean).join(" ") || void 0, re = _((e) => {
+		e && (e.indeterminate = D), typeof z == "function" ? z(e) : z != null && (z.current = e);
+	}, [D, z]), ie = (e) => {
+		if (N) {
+			e.preventDefault();
+			return;
+		}
+		H || W(e.target.checked), L?.(e);
+	}, ae = n(p, G, D, K, q ? void 0 : O), Z = E != null && !T, Q = (t) => /* @__PURE__ */ S("span", {
+		className: e("relative flex shrink-0 items-center justify-center", s[p], t),
+		children: [/* @__PURE__ */ x("input", {
+			...R,
+			ref: re,
+			id: V,
+			type: "checkbox",
+			checked: H ? P : void 0,
+			defaultChecked: H ? void 0 : F,
+			disabled: K,
+			readOnly: N,
+			"aria-invalid": O === "error" || void 0,
+			"aria-describedby": X,
+			"aria-checked": D ? "mixed" : void 0,
+			"aria-busy": A || void 0,
+			onChange: ie,
+			className: a
+		}), /* @__PURE__ */ x("span", {
+			className: ae,
+			"aria-hidden": !0,
+			children: A ? /* @__PURE__ */ x(ne, {
+				className: e(r[p], u, "animate-spin"),
+				strokeWidth: 2
+			}) : D ? /* @__PURE__ */ x("span", { className: e(c[p], u, "rounded-full bg-current") }) : G ? /* @__PURE__ */ x(te, {
+				className: e(r[p], u),
+				strokeWidth: 3,
+				"aria-hidden": !0
+			}) : null
+		})]
+	}), $ = /* @__PURE__ */ x("label", {
+		htmlFor: V,
+		className: e(d, !Z && "items-center", !Z && f[p], K && "cursor-not-allowed", j),
+		children: T ? /* @__PURE__ */ S(b, { children: [Q(), /* @__PURE__ */ x("span", {
+			className: "sr-only",
+			children: g
+		})] }) : Z ? /* @__PURE__ */ S("span", {
+			className: ee[p],
+			children: [Q(o[p]), /* @__PURE__ */ S("span", {
+				className: h,
+				children: [/* @__PURE__ */ x("span", {
+					className: l(K, !0),
+					children: g
+				}), /* @__PURE__ */ x("span", {
+					id: Y,
+					className: i,
+					children: E
+				})]
+			})]
+		}) : /* @__PURE__ */ S(b, { children: [Q(), /* @__PURE__ */ x("span", {
+			className: l(K),
+			children: g
+		})] })
+	});
+	return !q || O == null || J == null ? $ : /* @__PURE__ */ S("div", {
+		className: "flex w-full flex-col gap-1.5",
+		children: [$, /* @__PURE__ */ x(t, {
+			status: O,
+			message: k,
+			messageId: J,
+			size: C[p],
+			messagePosition: "bottom",
+			bannerClassName: m(O)
+		})]
+	});
+});
+//#endregion
+export { T as Checkbox, p as checkboxSizes };

package/dist/components/atoms/Checkbox/checkboxStyles.d.ts

@@ -0,0 +1,37 @@
+import { type InputStatus } from "../Input/inputShellStyles";
+export declare const checkboxSizes: readonly ["sm", "md"];
+export type CheckboxSize = (typeof checkboxSizes)[number];
+/** Row rhythm — aligns with cluster sm (28px) / md (36px) tiers. */
+export declare const checkboxRowSizeClasses: Record<CheckboxSize, string>;
+/** Touch target wrapper — centers the visual box ([Astryx CheckboxInput](https://astryx.atmeta.com/components/CheckboxInput)). */
+export declare const checkboxHitTargetSizeClasses: Record<CheckboxSize, string>;
+export declare const checkboxBoxSizeClasses: Record<CheckboxSize, string>;
+export declare const checkboxCheckIconSizeClasses: Record<CheckboxSize, string>;
+export declare const checkboxIndeterminateBarSizeClasses: Record<CheckboxSize, string>;
+export declare const checkboxBoxBaseClasses: string;
+export declare const checkboxBoxUncheckedClasses = "border-border-emphasized bg-surface group-hover/checkbox:border-border-emphasized group-hover/checkbox:bg-body";
+export declare const checkboxBoxCheckedClasses = "border-primary bg-primary text-primary-foreground group-hover/checkbox:border-primary group-hover/checkbox:bg-primary";
+/** Check / indeterminate / spinner marks on the filled box. */
+export declare const checkboxMarkClasses = "stroke-current text-inherit";
+export declare const checkboxBoxDisabledClasses = "opacity-50";
+export declare const checkboxLabelClasses: string;
+/** Tighter than global `type-supporting` leading — checkbox description only. */
+export declare const checkboxDescriptionClasses: string;
+/** Label + description column beside the box — tight title/subtitle rhythm. */
+export declare const checkboxTextColumnClasses = "flex min-w-0 flex-col gap-px";
+export declare const checkboxLabelWithDescriptionClasses: string;
+export declare const checkboxDescriptionRowClasses: Record<CheckboxSize, string>;
+/** Optical center — box with single-line title cap (not full text column). */
+export declare const checkboxHitTargetDescriptionAlignClasses: Record<CheckboxSize, string>;
+export declare const checkboxRowBaseClasses = "group/checkbox relative flex w-full cursor-pointer";
+/** Single-line label — vertically center with the box. */
+export declare const checkboxRowLabelOnlyClasses = "items-center";
+export declare const checkboxRowClasses: string;
+export declare const checkboxRowDisabledClasses = "cursor-not-allowed";
+export declare const checkboxHiddenInputClasses = "peer absolute inset-0 z-10 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed";
+export declare const checkboxFocusRingClasses = "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 checkboxBoxClassesFor(size: CheckboxSize, checked: boolean, indeterminate: boolean, disabled?: boolean, status?: InputStatus): string;
+export declare function checkboxLabelClassesFor(disabled?: boolean, withDescription?: boolean): string;
+/** Flat status row below the checkbox — no pill overlap band. */
+export declare function checkboxStatusBannerClassesFor(status: InputStatus): string;
+//# sourceMappingURL=checkboxStyles.d.ts.map

package/dist/components/atoms/Checkbox/checkboxStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkboxStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Checkbox/checkboxStyles.ts"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,2BAA2B,CAAC;AAEnC,eAAO,MAAM,aAAa,uBAAwB,CAAC;AAEnD,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1D,oEAAoE;AACpE,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAG/D,CAAC;AAEF,kIAAkI;AAClI,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAGrE,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAG/D,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAGrE,CAAC;AAEF,eAAO,MAAM,mCAAmC,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAG5E,CAAC;AAEF,eAAO,MAAM,sBAAsB,QAIlC,CAAC;AAEF,eAAO,MAAM,2BAA2B,mHAC0E,CAAC;AAEnH,eAAO,MAAM,yBAAyB,0HACmF,CAAC;AAE1H,+DAA+D;AAC/D,eAAO,MAAM,mBAAmB,gCAAgC,CAAC;AAEjE,eAAO,MAAM,0BAA0B,eAAe,CAAC;AAEvD,eAAO,MAAM,oBAAoB,QAA8B,CAAC;AAEhE,iFAAiF;AACjF,eAAO,MAAM,0BAA0B,QAAiD,CAAC;AAEzF,+EAA+E;AAC/E,eAAO,MAAM,yBAAyB,iCAAiC,CAAC;AAExE,eAAO,MAAM,mCAAmC,QAA4C,CAAC;AAE7F,eAAO,MAAM,6BAA6B,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAGtE,CAAC;AAEF,8EAA8E;AAC9E,eAAO,MAAM,wCAAwC,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAGjF,CAAC;AAEF,eAAO,MAAM,sBAAsB,uDACmB,CAAC;AAEvD,0DAA0D;AAC1D,eAAO,MAAM,2BAA2B,iBAAiB,CAAC;AAE1D,eAAO,MAAM,kBAAkB,QAA0D,CAAC;AAE1F,eAAO,MAAM,0BAA0B,uBAAuB,CAAC;AAE/D,eAAO,MAAM,0BAA0B,8FACsD,CAAC;AAE9F,eAAO,MAAM,wBAAwB,sKACgI,CAAC;AAEtK,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,YAAY,EAClB,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,OAAO,EACtB,QAAQ,CAAC,EAAE,OAAO,EAClB,MAAM,CAAC,EAAE,WAAW,GACnB,MAAM,CAWR;AAED,wBAAgB,uBAAuB,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,CAK7F;AAED,iEAAiE;AACjE,wBAAgB,8BAA8B,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAK1E"}

package/dist/components/atoms/Checkbox/checkboxStyles.js

@@ -0,0 +1,42 @@
+"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/Checkbox/checkboxStyles.ts
+var a = ["sm", "md"], o = {
+	sm: "min-h-7 gap-2",
+	md: "min-h-9 gap-2.5"
+}, s = {
+	sm: "size-7",
+	md: "size-9"
+}, c = {
+	sm: "size-[18px] rounded",
+	md: "size-[22px] rounded-md"
+}, l = {
+	sm: "size-3",
+	md: "size-3.5"
+}, u = {
+	sm: "h-0.5 w-2.5",
+	md: "h-0.5 w-3"
+}, d = e("pointer-events-none flex items-center justify-center border shadow-none", "transition-[background-color,border-color,color]", n("fast")), f = "border-border-emphasized bg-surface group-hover/checkbox:border-border-emphasized group-hover/checkbox:bg-body", p = "border-primary bg-primary text-primary-foreground group-hover/checkbox:border-primary group-hover/checkbox:bg-primary", m = "stroke-current text-inherit", h = "opacity-50", g = t("ui-label"), _ = e(t("caption"), "leading-snug"), v = "flex min-w-0 flex-col gap-px", y = e(g, "leading-tight"), b = {
+	sm: "flex min-w-0 items-start gap-2",
+	md: "flex min-w-0 items-start gap-2.5"
+}, x = {
+	sm: "mt-px",
+	md: "mt-0.5"
+}, S = "group/checkbox relative flex w-full cursor-pointer", C = "items-center";
+e(S, C);
+var w = "cursor-not-allowed", T = "peer absolute inset-0 z-10 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed", E = "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 D(t, n, r, a, o) {
+	let s = n || r;
+	return e(d, c[t], E, s ? p : f, o != null && i[o], a && "opacity-50");
+}
+function O(t, n) {
+	return e(n ? y : g, t && "opacity-50");
+}
+function k(t) {
+	return e("flex w-full items-start gap-2 rounded-lg px-2.5 py-2 leading-snug", r[t]);
+}
+//#endregion
+export { d as checkboxBoxBaseClasses, p as checkboxBoxCheckedClasses, D as checkboxBoxClassesFor, h as checkboxBoxDisabledClasses, c as checkboxBoxSizeClasses, f as checkboxBoxUncheckedClasses, l as checkboxCheckIconSizeClasses, _ as checkboxDescriptionClasses, b as checkboxDescriptionRowClasses, E as checkboxFocusRingClasses, T as checkboxHiddenInputClasses, x as checkboxHitTargetDescriptionAlignClasses, s as checkboxHitTargetSizeClasses, u as checkboxIndeterminateBarSizeClasses, g as checkboxLabelClasses, O as checkboxLabelClassesFor, y as checkboxLabelWithDescriptionClasses, m as checkboxMarkClasses, S as checkboxRowBaseClasses, w as checkboxRowDisabledClasses, C as checkboxRowLabelOnlyClasses, o as checkboxRowSizeClasses, a as checkboxSizes, k as checkboxStatusBannerClassesFor, v as checkboxTextColumnClasses };