@thewhatmatters/wmds 0.2.0

package/dist/components/molecules/HeroIntro/HeroIntro.js

@@ -0,0 +1,24 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { heroIntroCopyClasses as t, heroIntroDisplayCopyClasses as n, heroIntroDisplayLeadClasses as r, heroIntroLeadClasses as i, heroIntroPageClasses as a, heroIntroRestClasses as o } from "./heroIntroStyles.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/molecules/HeroIntro/HeroIntro.tsx
+var l = ["large", "display"];
+function u({ lead: l, children: u, step: d = "large", className: f }) {
+	let p = d === "display", m = u != null && u !== !1;
+	return /* @__PURE__ */ s("div", {
+		className: e(a, f),
+		children: /* @__PURE__ */ c("h1", {
+			className: p ? n : t,
+			children: [/* @__PURE__ */ s("span", {
+				className: p ? r : i,
+				children: l
+			}), m ? /* @__PURE__ */ s("span", {
+				className: o,
+				children: u
+			}) : null]
+		})
+	});
+}
+//#endregion
+export { u as HeroIntro, l as heroIntroSteps };

package/dist/components/molecules/HeroIntro/heroIntroStyles.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Marketing hero intro — two lines on the page grid.
+ * Line recipes live here so Show code passes `lead` and children, not a break.
+ */
+/** `grid-page` with the page block pad removed so it does not stack on the hero gap. */
+export declare const heroIntroPageClasses = "grid-page w-full !py-0";
+/**
+ * Centered `h1` on `type-display-2` at normal weight — the same size and
+ * leading as **ScrollHorizontal.Intro** and the sequenced hero. `!font-normal`
+ * beats the display token's semibold. `text-balance` evens wrapped lines so a
+ * last line is not a single word.
+ * Columns 4–9 from `lg` (6 of 12). Full width of the page grid below `lg`.
+ * The lead wraps inside that measure.
+ */
+export declare const heroIntroCopyClasses: string;
+/** First sentence. Wraps at every width, including the display-2 measure from `md`. */
+export declare const heroIntroLeadClasses = "block min-w-0";
+/** Rest of the intro. Always the next line, same type step and leading. */
+export declare const heroIntroRestClasses = "block";
+/**
+ * Sequenced hero subtext. Same `type-display-2` size and normal weight as the
+ * default intro and **ScrollHorizontal.Intro**. Full width of the page grid —
+ * columns 4–9 are the default measure and are too narrow for this longer sentence.
+ * `!font-normal` wins over the display token's semibold.
+ * `text-balance` evens wrapped lines so a last line is not a single word.
+ */
+export declare const heroIntroDisplayCopyClasses: string;
+/** Display step lead. Wraps when the measure is short (390). No nowrap. */
+export declare const heroIntroDisplayLeadClasses = "block min-w-0";
+//# sourceMappingURL=heroIntroStyles.d.ts.map

package/dist/components/molecules/HeroIntro/heroIntroStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heroIntroStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/HeroIntro/heroIntroStyles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,wFAAwF;AACxF,eAAO,MAAM,oBAAoB,2BAA2B,CAAC;AAE7D;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,QAGtB,CAAC;AAEZ,uFAAuF;AACvF,eAAO,MAAM,oBAAoB,kBAAkB,CAAC;AAEpD,2EAA2E;AAC3E,eAAO,MAAM,oBAAoB,UAAU,CAAC;AAE5C;;;;;;GAMG;AACH,eAAO,MAAM,2BAA2B,QAG7B,CAAC;AAEZ,2EAA2E;AAC3E,eAAO,MAAM,2BAA2B,kBAAkB,CAAC"}

package/dist/components/molecules/HeroIntro/heroIntroStyles.js

@@ -0,0 +1,5 @@
+"use client";
+//#region src/components/molecules/HeroIntro/heroIntroStyles.ts
+var e = "grid-page w-full !py-0", t = ["type-display-2 !font-normal text-balance", "col-span-full min-w-0 text-center text-muted lg:col-start-4 lg:col-end-10"].join(" "), n = "block min-w-0", r = "block", i = ["type-display-2 !font-normal text-balance", "col-span-full min-w-0 text-center text-muted"].join(" "), a = "block min-w-0";
+//#endregion
+export { t as heroIntroCopyClasses, i as heroIntroDisplayCopyClasses, a as heroIntroDisplayLeadClasses, n as heroIntroLeadClasses, e as heroIntroPageClasses, r as heroIntroRestClasses };

package/dist/components/molecules/IntakeForm/IntakeForm.d.ts

@@ -0,0 +1,30 @@
+export { intakeDetailsMax } from "./intakeFormStyles";
+/** Layout-only — width or margin. */
+export type IntakeFormLayoutClassName = string;
+export interface IntakeAboutValues {
+    name: string;
+    email: string;
+    company: string;
+    /** Optional project or site URL. */
+    url: string;
+    details: string;
+}
+export declare const intakeAboutEmpty: IntakeAboutValues;
+export interface IntakeFormProps {
+    values: IntakeAboutValues;
+    onChange: (values: IntakeAboutValues) => void;
+    /** Character ceiling for project details. Default 400. */
+    detailsMax?: number;
+    className?: IntakeFormLayoutClassName;
+}
+/** Empty link is fine. A filled value must be an http(s) URL. */
+export declare function isIntakeUrlValid(value: string | null | undefined): boolean;
+/** Name, a real email, and details within the counter. Company and link stay optional. */
+export declare function isIntakeAboutValid(values: IntakeAboutValues, detailsMax?: number): boolean;
+/**
+ * About-you step — **Field** rows for name, email, company, link, and project details.
+ * Required fields show **Input** / **TextArea** `status` + `message` on blur when invalid.
+ * Company and link stay optional. The details description is the character counter.
+ */
+export declare function IntakeForm({ values, onChange, detailsMax, className, }: IntakeFormProps): import("react").JSX.Element;
+//# sourceMappingURL=IntakeForm.d.ts.map

package/dist/components/molecules/IntakeForm/IntakeForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntakeForm.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/IntakeForm/IntakeForm.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,qCAAqC;AACrC,MAAM,MAAM,yBAAyB,GAAG,MAAM,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,EAAE,iBAM9B,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC9C,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,yBAAyB,CAAC;CACvC;AAMD,iEAAiE;AACjE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAW1E;AAED,0FAA0F;AAC1F,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,iBAAiB,EACzB,UAAU,GAAE,MAAyB,GACpC,OAAO,CAQT;AA8BD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,QAAQ,EACR,UAA6B,EAC7B,SAAS,GACV,EAAE,eAAe,+BAoFjB"}

package/dist/components/molecules/IntakeForm/IntakeForm.js

@@ -0,0 +1,137 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { Input as t } from "../../atoms/Input/Input.js";
+import { TextArea as n } from "../../atoms/TextArea/TextArea.js";
+import { Field as r } from "../Field/Field.js";
+import { intakeDetailsMax as i, intakeFormClasses as a } from "./intakeFormStyles.js";
+import { useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/molecules/IntakeForm/IntakeForm.tsx
+var l = {
+	name: "",
+	email: "",
+	company: "",
+	url: "",
+	details: ""
+}, u = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function d(e) {
+	let t = (e ?? "").trim();
+	if (t.length === 0) return !0;
+	try {
+		let e = new URL(t);
+		return e.protocol === "http:" || e.protocol === "https:";
+	} catch {
+		return !1;
+	}
+}
+function f(e, t = 400) {
+	return e.name.trim().length > 0 && u.test(e.email.trim()) && d(e.url) && e.details.trim().length > 0 && e.details.length <= t;
+}
+function p(e, t, n) {
+	if (e === "name") return t.name.trim().length === 0 ? "Enter your name." : void 0;
+	if (e === "email") return t.email.trim().length === 0 ? "Please enter a valid email address." : u.test(t.email.trim()) ? void 0 : "Please enter a valid email address.";
+	if (e === "url") return d(t.url) ? void 0 : "Please enter a valid URL.";
+	if (t.details.trim().length === 0) return "Tell us a bit about the project.";
+	if (t.details.length > n) return `Keep project details to ${n} characters.`;
+}
+function m({ values: i, onChange: l, detailsMax: u = 400, className: d }) {
+	let [f, m] = o({});
+	function h(e) {
+		m((t) => t[e] ? t : {
+			...t,
+			[e]: !0
+		});
+	}
+	function g(e) {
+		if (f[e]) return p(e, i, u);
+	}
+	let _ = g("name"), v = g("email"), y = g("url"), b = g("details");
+	return /* @__PURE__ */ c("div", {
+		className: e(a, d),
+		children: [
+			/* @__PURE__ */ s(r, {
+				label: "Name",
+				children: /* @__PURE__ */ s(t, {
+					"aria-label": "Name",
+					autoComplete: "name",
+					value: i.name,
+					status: _ == null ? void 0 : "error",
+					message: _,
+					onBlur: () => h("name"),
+					onChange: (e) => l({
+						...i,
+						name: e.target.value
+					})
+				})
+			}),
+			/* @__PURE__ */ s(r, {
+				label: "Email",
+				children: /* @__PURE__ */ s(t, {
+					"aria-label": "Email",
+					type: "email",
+					autoComplete: "email",
+					value: i.email,
+					status: v == null ? void 0 : "error",
+					message: v,
+					onBlur: () => h("email"),
+					onChange: (e) => l({
+						...i,
+						email: e.target.value
+					})
+				})
+			}),
+			/* @__PURE__ */ s(r, {
+				label: "Company",
+				description: "Optional",
+				children: /* @__PURE__ */ s(t, {
+					"aria-label": "Company",
+					autoComplete: "organization",
+					value: i.company,
+					onChange: (e) => l({
+						...i,
+						company: e.target.value
+					})
+				})
+			}),
+			/* @__PURE__ */ s(r, {
+				label: "Link",
+				description: "Optional",
+				children: /* @__PURE__ */ s(t, {
+					"aria-label": "Link",
+					type: "url",
+					inputMode: "url",
+					autoComplete: "url",
+					placeholder: "https://",
+					value: i.url,
+					status: y == null ? void 0 : "error",
+					message: y,
+					onBlur: () => h("url"),
+					onChange: (e) => l({
+						...i,
+						url: e.target.value
+					})
+				})
+			}),
+			/* @__PURE__ */ s(r, {
+				label: "Project details",
+				description: b == null ? `${i.details.length} / ${u}` : void 0,
+				children: /* @__PURE__ */ s(n, {
+					"aria-label": "Project details",
+					rows: 5,
+					maxLength: u,
+					value: i.details,
+					placeholder: "What should feel different when this work is done?",
+					status: b == null ? void 0 : "error",
+					message: b,
+					onBlur: () => h("details"),
+					onChange: (e) => l({
+						...i,
+						details: e.target.value
+					})
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { m as IntakeForm, l as intakeAboutEmpty, i as intakeDetailsMax, f as isIntakeAboutValid, d as isIntakeUrlValid };

package/dist/components/molecules/IntakeForm/intakeFormStyles.d.ts

@@ -0,0 +1,3 @@
+export declare const intakeFormClasses = "flex w-full flex-col gap-5";
+export declare const intakeDetailsMax = 400;
+//# sourceMappingURL=intakeFormStyles.d.ts.map

package/dist/components/molecules/IntakeForm/intakeFormStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"intakeFormStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/IntakeForm/intakeFormStyles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,+BAA+B,CAAC;AAE9D,eAAO,MAAM,gBAAgB,MAAM,CAAC"}

package/dist/components/molecules/IntakeForm/intakeFormStyles.js

@@ -0,0 +1,5 @@
+"use client";
+//#region src/components/molecules/IntakeForm/intakeFormStyles.ts
+var e = "flex w-full flex-col gap-5", t = 400;
+//#endregion
+export { t as intakeDetailsMax, e as intakeFormClasses };

package/dist/components/molecules/NavList/NavList.d.ts

@@ -0,0 +1,55 @@
+import { type ReactElement, type ReactNode, type SVGProps } from "react";
+import { type NavListLabelAlignment } from "./navListStyles";
+export type { NavListLabelAlignment } from "./navListStyles";
+export { navListLabelAlignments } from "./navListStyles";
+/** Layout-only — width override; default shell is `w-52`. */
+export type NavListLayoutClassName = string;
+export type NavListIcon = ReactElement<SVGProps<SVGSVGElement>>;
+export interface NavListItemDef {
+    id: string;
+    label: string;
+    icon?: NavListIcon;
+    count?: number;
+}
+export interface NavListSectionDef {
+    label?: string;
+    /** `brand` aligns the first section overline to an adjacent 56px header band. */
+    labelAlign?: NavListLabelAlignment;
+    items: NavListItemDef[];
+}
+export interface NavListProps {
+    /** Data-driven sections — or compose **NavList.Section** / **NavList.Item** as children. */
+    sections?: NavListSectionDef[];
+    activeId?: string;
+    onSelect?: (id: string) => void;
+    children?: ReactNode;
+    "aria-label"?: string;
+    className?: NavListLayoutClassName;
+}
+export interface NavListSectionProps {
+    label?: string;
+    labelAlign?: NavListLabelAlignment;
+    children: ReactNode;
+    className?: NavListLayoutClassName;
+}
+export interface NavListItemProps {
+    id: string;
+    label: string;
+    icon?: NavListIcon;
+    count?: number;
+    selected?: boolean;
+    onSelect?: (id: string) => void;
+    className?: NavListLayoutClassName;
+}
+declare function NavListSectionRoot({ label, labelAlign, children, className, }: NavListSectionProps): import("react").JSX.Element;
+declare function NavListItemRoot({ id, label, icon, count, selected: selectedProp, onSelect, className, }: NavListItemProps): import("react").JSX.Element;
+declare function NavListRoot({ sections, activeId, onSelect, children, "aria-label": ariaLabel, className, }: NavListProps): import("react").JSX.Element;
+/**
+ * Sectioned secondary navigation — inset pills with optional icons and counts.
+ * Compose **NavList.Item** with **Button** `layout="nav"` or pass a `sections` array.
+ */
+export declare const NavList: typeof NavListRoot & {
+    Section: typeof NavListSectionRoot;
+    Item: typeof NavListItemRoot;
+};
+//# sourceMappingURL=NavList.d.ts.map

package/dist/components/molecules/NavList/NavList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavList.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/NavList/NavList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,QAAQ,EACd,MAAM,OAAO,CAAC;AAIf,OAAO,EAUL,KAAK,qBAAqB,EAC3B,MAAM,iBAAiB,CAAC;AAEzB,YAAY,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,6DAA6D;AAC7D,MAAM,MAAM,sBAAsB,GAAG,MAAM,CAAC;AAE5C,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAEhE,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED,MAAM,WAAW,YAAY;IAC3B,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,sBAAsB,CAAC;CACpC;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,sBAAsB,CAAC;CACpC;AAED,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,sBAAsB,CAAC;CACpC;AA0CD,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,UAAsB,EACtB,QAAQ,EACR,SAAS,GACV,EAAE,mBAAmB,+BAOrB;AAED,iBAAS,eAAe,CAAC,EACvB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,KAAK,EACL,QAAQ,EAAE,YAAY,EACtB,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,+BAqBlB;AAED,iBAAS,WAAW,CAAC,EACnB,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,YAAY,EAAE,SAAqB,EACnC,SAAS,GACV,EAAE,YAAY,+BA8Bd;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO;;;CAGlB,CAAC"}

package/dist/components/molecules/NavList/NavList.js

@@ -0,0 +1,103 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { ButtonIcon as t } from "../../atoms/Button/ButtonIcon.js";
+import { Button as n } from "../../atoms/Button/Button.js";
+import { navListItemCountClasses as r, navListItemIconClasses as i, navListItemLabelClasses as a, navListItemWrapClasses as o, navListLabelAlignments as s, navListSectionBrandBandClasses as c, navListSectionClasses as l, navListSectionLabelBrandClasses as u, navListSectionLabelDefaultClasses as d, navListShellClasses as f } from "./navListStyles.js";
+import { cloneElement as p, createContext as m, isValidElement as h, useContext as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/components/molecules/NavList/NavList.tsx
+var y = m({});
+function b({ icon: n, selected: r }) {
+	let a = h(n) ? p(n, {
+		strokeWidth: r ? 2.25 : 1.75,
+		...r ? {
+			fill: "currentColor",
+			fillOpacity: .12
+		} : { fill: "none" }
+	}) : n;
+	return /* @__PURE__ */ _("span", {
+		className: e("inline-flex shrink-0", i(r)),
+		children: /* @__PURE__ */ _(t, {
+			size: "sm",
+			children: a
+		})
+	});
+}
+function x({ label: e, labelAlign: t = "section" }) {
+	return t === "brand" ? /* @__PURE__ */ _("div", {
+		className: c,
+		children: /* @__PURE__ */ _("p", {
+			className: u,
+			children: e
+		})
+	}) : /* @__PURE__ */ _("p", {
+		className: d,
+		children: e
+	});
+}
+function S({ label: t, labelAlign: n = "section", children: r, className: i }) {
+	return /* @__PURE__ */ v("div", {
+		className: e(l, i),
+		children: [t == null ? null : /* @__PURE__ */ _(x, {
+			label: t,
+			labelAlign: n
+		}), r]
+	});
+}
+function C({ id: t, label: i, icon: s, count: c, selected: l, onSelect: u, className: d }) {
+	let f = g(y), p = l ?? f.activeId === t, m = u ?? f.onSelect;
+	return /* @__PURE__ */ _("div", {
+		className: e(o, d),
+		children: /* @__PURE__ */ v(n, {
+			layout: "nav",
+			type: "button",
+			selected: p,
+			onClick: m == null ? void 0 : () => m(t),
+			children: [
+				s == null ? null : /* @__PURE__ */ _(b, {
+					icon: s,
+					selected: p
+				}),
+				/* @__PURE__ */ _("span", {
+					className: a,
+					children: i
+				}),
+				c == null ? null : /* @__PURE__ */ _("span", {
+					className: r,
+					children: c.toLocaleString()
+				})
+			]
+		})
+	});
+}
+function w({ sections: t, activeId: n, onSelect: r, children: i, "aria-label": a = "Section", className: o }) {
+	let s = {
+		activeId: n,
+		onSelect: r
+	};
+	return t == null ? /* @__PURE__ */ _("nav", {
+		"aria-label": a,
+		className: e(f, o),
+		children: /* @__PURE__ */ _(y.Provider, {
+			value: s,
+			children: i
+		})
+	}) : /* @__PURE__ */ _("nav", {
+		"aria-label": a,
+		className: e(f, o),
+		children: /* @__PURE__ */ _(y.Provider, {
+			value: s,
+			children: t.map((e, t) => /* @__PURE__ */ _(S, {
+				label: e.label,
+				labelAlign: e.labelAlign ?? (t === 0 && e.label != null ? "brand" : "section"),
+				children: e.items.map((e) => /* @__PURE__ */ _(C, { ...e }, e.id))
+			}, e.label ?? t))
+		})
+	});
+}
+var T = Object.assign(w, {
+	Section: S,
+	Item: C
+});
+//#endregion
+export { T as NavList, s as navListLabelAlignments };

package/dist/components/molecules/NavList/navListStyles.d.ts

@@ -0,0 +1,15 @@
+export declare const navListLabelAlignments: readonly ["brand", "section"];
+export type NavListLabelAlignment = (typeof navListLabelAlignments)[number];
+/** Secondary nav column — default width matches shell **SideNav** host (`w-52`). */
+export declare const navListShellClasses = "flex h-full min-h-0 w-52 flex-col";
+export declare const navListSectionClasses = "flex flex-col gap-1";
+/** 56px band — first section label aligns with **PageHeader** `variant="app"`. */
+export declare const navListSectionBrandBandClasses: string;
+export declare const navListSectionLabelClasses: string;
+export declare const navListSectionLabelBrandClasses: string;
+export declare const navListSectionLabelDefaultClasses: string;
+export declare const navListItemWrapClasses = "relative w-full px-2";
+export declare const navListItemLabelClasses = "min-w-0 flex-1 truncate text-left";
+export declare const navListItemCountClasses: string;
+export declare function navListItemIconClasses(selected: boolean): "text-muted" | "text-fg";
+//# sourceMappingURL=navListStyles.d.ts.map

package/dist/components/molecules/NavList/navListStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navListStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/NavList/navListStyles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,sBAAsB,+BAAgC,CAAC;AAEpE,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5E,oFAAoF;AACpF,eAAO,MAAM,mBAAmB,sCAAsC,CAAC;AAEvE,eAAO,MAAM,qBAAqB,wBAAwB,CAAC;AAE3D,kFAAkF;AAClF,eAAO,MAAM,8BAA8B,QAG1C,CAAC;AAEF,eAAO,MAAM,0BAA0B,QAAgD,CAAC;AAExF,eAAO,MAAM,+BAA+B,QAA6B,CAAC;AAE1E,eAAO,MAAM,iCAAiC,QAG7C,CAAC;AAEF,eAAO,MAAM,sBAAsB,yBAAyB,CAAC;AAE7D,eAAO,MAAM,uBAAuB,sCAAsC,CAAC;AAE3E,eAAO,MAAM,uBAAuB,QAInC,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,OAAO,4BAEvD"}

package/dist/components/molecules/NavList/navListStyles.js

@@ -0,0 +1,11 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { typographyClass as t } from "../../../lib/typography.js";
+import { pageHeaderAppBandHeightClasses as n } from "../PageHeader/pageHeaderStyles.js";
+//#region src/components/molecules/NavList/navListStyles.ts
+var r = ["brand", "section"], i = "flex h-full min-h-0 w-52 flex-col", a = "flex flex-col gap-1", o = e("box-border flex shrink-0 items-center px-4", n), s = e(t("overline"), "text-muted"), c = s, l = e(s, "px-4 pb-1 pt-3"), u = "relative w-full px-2", d = "min-w-0 flex-1 truncate text-left", f = e("ml-auto tabular-nums", t("caption"), "text-muted");
+function p(e) {
+	return e ? "text-fg" : "text-muted";
+}
+//#endregion
+export { f as navListItemCountClasses, p as navListItemIconClasses, d as navListItemLabelClasses, u as navListItemWrapClasses, r as navListLabelAlignments, o as navListSectionBrandBandClasses, a as navListSectionClasses, c as navListSectionLabelBrandClasses, s as navListSectionLabelClasses, l as navListSectionLabelDefaultClasses, i as navListShellClasses };

package/dist/components/molecules/PageHeader/PageHeader.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+import { type PageHeaderVariant } from "./pageHeaderStyles";
+export type { PageHeaderVariant } from "./pageHeaderStyles";
+export { pageHeaderAppBandHeightClasses, pageHeaderVariants, } from "./pageHeaderStyles";
+/** Layout-only — width, margin; not for re-theming the header shell. */
+export type PageHeaderLayoutClassName = string;
+export interface PageHeaderProps {
+    /**
+     * Visible heading — omit on toolbar-only rows.
+     * When omitted, pass `aria-label` (toolbar) or rely on `start` copy (app/page).
+     */
+    title?: string;
+    /** App canvas band, in-page section title, or compact toolbar row. */
+    variant?: PageHeaderVariant;
+    /** Leading slot — breadcrumb, back, **Badge**, filter **Chip** rail. */
+    start?: ReactNode;
+    /** Trailing slot — cluster controls (**SegmentedControl**, **Button**, **Avatar**, **MoreMenu**). */
+    end?: ReactNode;
+    /** Accessible name when `title` is omitted — required for toolbar-only rows. */
+    "aria-label"?: string;
+    className?: PageHeaderLayoutClassName;
+}
+export declare function PageHeader({ title, variant, start, end, "aria-label": ariaLabel, className, }: PageHeaderProps): import("react").JSX.Element;
+//# sourceMappingURL=PageHeader.d.ts.map

package/dist/components/molecules/PageHeader/PageHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/PageHeader/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAKL,KAAK,iBAAiB,EACvB,MAAM,oBAAoB,CAAC;AAE5B,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EACL,8BAA8B,EAC9B,kBAAkB,GACnB,MAAM,oBAAoB,CAAC;AAE5B,wEAAwE;AACxE,MAAM,MAAM,yBAAyB,GAAG,MAAM,CAAC;AAE/C,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,wEAAwE;IACxE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qGAAqG;IACrG,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,gFAAgF;IAChF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,yBAAyB,CAAC;CACvC;AAQD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAgB,EAChB,KAAK,EACL,GAAG,EACH,YAAY,EAAE,SAAS,EACvB,SAAS,GACV,EAAE,eAAe,+BAsCjB"}

package/dist/components/molecules/PageHeader/PageHeader.js

@@ -0,0 +1,43 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { pageHeaderAppBandHeightClasses as t, pageHeaderEndClasses as n, pageHeaderShellClasses as r, pageHeaderStartClasses as i, pageHeaderTitleClasses as a, pageHeaderVariants as o } from "./pageHeaderStyles.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/molecules/PageHeader/PageHeader.tsx
+var l = {
+	app: "h1",
+	page: "h2",
+	toolbar: "span"
+};
+function u({ title: t, variant: o = "page", start: u, end: d, "aria-label": f, className: p }) {
+	let m = l[o], h = t != null && t.length > 0, g = h ? void 0 : f;
+	return o === "toolbar" ? /* @__PURE__ */ c("div", {
+		role: "toolbar",
+		"aria-label": g,
+		className: e(r.toolbar, p),
+		children: [u != null || h ? /* @__PURE__ */ c("div", {
+			className: i,
+			children: [u, h ? /* @__PURE__ */ s(m, {
+				className: a.toolbar,
+				children: t
+			}) : null]
+		}) : /* @__PURE__ */ s("span", { className: "min-w-0 flex-1" }), d == null ? null : /* @__PURE__ */ s("div", {
+			className: n,
+			children: d
+		})]
+	}) : /* @__PURE__ */ c("header", {
+		"aria-label": g,
+		className: e(r[o], p),
+		children: [/* @__PURE__ */ c("div", {
+			className: i,
+			children: [u, h ? /* @__PURE__ */ s(m, {
+				className: a[o],
+				children: t
+			}) : null]
+		}), d == null ? null : /* @__PURE__ */ s("div", {
+			className: n,
+			children: d
+		})]
+	});
+}
+//#endregion
+export { u as PageHeader, t as pageHeaderAppBandHeightClasses, o as pageHeaderVariants };

package/dist/components/molecules/PageHeader/pageHeaderStyles.d.ts

@@ -0,0 +1,9 @@
+export declare const pageHeaderVariants: readonly ["app", "page", "toolbar"];
+export type PageHeaderVariant = (typeof pageHeaderVariants)[number];
+/** 56px — app canvas band; shared by **NavList** `labelAlign="brand"` in shell examples. */
+export declare const pageHeaderAppBandHeightClasses = "h-[56px] min-h-[56px] max-h-[56px]";
+export declare const pageHeaderShellClasses: Record<PageHeaderVariant, string>;
+export declare const pageHeaderStartClasses = "flex min-w-0 items-center gap-3";
+export declare const pageHeaderEndClasses = "flex shrink-0 items-center gap-2";
+export declare const pageHeaderTitleClasses: Record<PageHeaderVariant, string>;
+//# sourceMappingURL=pageHeaderStyles.d.ts.map

package/dist/components/molecules/PageHeader/pageHeaderStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pageHeaderStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/PageHeader/pageHeaderStyles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,qCAAsC,CAAC;AAEtE,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpE,4FAA4F;AAC5F,eAAO,MAAM,8BAA8B,uCAAuC,CAAC;AAEnF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAWpE,CAAC;AAEF,eAAO,MAAM,sBAAsB,oCAAoC,CAAC;AAExE,eAAO,MAAM,oBAAoB,qCAAqC,CAAC;AAEvE,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAIpE,CAAC"}

package/dist/components/molecules/PageHeader/pageHeaderStyles.js

@@ -0,0 +1,20 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { typographyClass as t } from "../../../lib/typography.js";
+import { clusterMinHeightClasses as n } from "../../../lib/clusterScale.js";
+//#region src/components/molecules/PageHeader/pageHeaderStyles.ts
+var r = [
+	"app",
+	"page",
+	"toolbar"
+], i = "h-[56px] min-h-[56px] max-h-[56px]", a = {
+	app: e("box-border flex shrink-0 items-center justify-between gap-4", i, "px-[var(--grid-margin)] shadow-[inset_0_-1px_0_0_var(--color-border)]"),
+	page: "flex items-center justify-between gap-4",
+	toolbar: e("flex items-center justify-between gap-2", n.md)
+}, o = "flex min-w-0 items-center gap-3", s = "flex shrink-0 items-center gap-2", c = {
+	app: e(t("section-heading"), "text-fg"),
+	page: e(t("section-heading"), "text-fg"),
+	toolbar: e(t("ui-label"), "font-medium text-fg")
+};
+//#endregion
+export { i as pageHeaderAppBandHeightClasses, s as pageHeaderEndClasses, a as pageHeaderShellClasses, o as pageHeaderStartClasses, c as pageHeaderTitleClasses, r as pageHeaderVariants };

package/dist/components/molecules/PillGroup/PillGroup.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from "react";
+/** Layout-only — width or margin. */
+export type PillGroupLayoutClassName = string;
+export declare const pillGroupEmphases: readonly ["solid", "muted"];
+export type PillGroupEmphasis = (typeof pillGroupEmphases)[number];
+export interface PillGroupProps {
+    /** Accessible name for the radio group. */
+    "aria-label": string;
+    value: string | null;
+    onValueChange: (value: string) => void;
+    children: ReactNode;
+    className?: PillGroupLayoutClassName;
+}
+export interface PillGroupItemProps {
+    value: string;
+    children: ReactNode;
+    /**
+     * `muted` uses the existing Badge neutral muted surface for a softer idle pill.
+     * Selected pills share the brand fill.
+     */
+    emphasis?: PillGroupEmphasis;
+    className?: PillGroupLayoutClassName;
+}
+declare function PillGroupRoot({ "aria-label": ariaLabel, value, onValueChange, children, className, }: PillGroupProps): import("react").JSX.Element;
+/** One radio pill. Wraps with its siblings. */
+declare function PillGroupItem({ value, children, emphasis, className, }: PillGroupItemProps): import("react").JSX.Element;
+export declare const PillGroup: typeof PillGroupRoot & {
+    Item: typeof PillGroupItem;
+};
+export {};
+//# sourceMappingURL=PillGroup.d.ts.map

package/dist/components/molecules/PillGroup/PillGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/PillGroup/PillGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,qCAAqC;AACrC,MAAM,MAAM,wBAAwB,GAAG,MAAM,CAAC;AAE9C,eAAO,MAAM,iBAAiB,6BAA8B,CAAC;AAE7D,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAkBnE,MAAM,WAAW,cAAc;IAC7B,2CAA2C;IAC3C,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,wBAAwB,CAAC;CACtC;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,SAAS,CAAC,EAAE,wBAAwB,CAAC;CACtC;AASD,iBAAS,aAAa,CAAC,EACrB,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,aAAa,EACb,QAAQ,EACR,SAAS,GACV,EAAE,cAAc,+BAchB;AAED,+CAA+C;AAC/C,iBAAS,aAAa,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,QAAkB,EAClB,SAAS,GACV,EAAE,kBAAkB,+BAiBpB;AAED,eAAO,MAAM,SAAS;;CAEpB,CAAC"}