@thewhatmatters/wmds 0.2.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,2BAA2B,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxG,OAAO,EAAE,YAAY,EAAE,KAAK,2BAA2B,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExG,+EAA+E;AAC/E,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,KAAK,2BAA2B,EAChC,KAAK,iBAAiB,EACtB,KAAK,2BAA2B,EAChC,KAAK,iBAAiB,GACvB,CAAC"}

package/dist/components/molecules/Dropdown/Dropdown.js

@@ -0,0 +1,10 @@
+"use client";
+import { DropdownItem as e } from "./DropdownItem.js";
+import { DropdownMenu as t } from "./DropdownMenu.js";
+//#region src/components/molecules/Dropdown/Dropdown.tsx
+var n = {
+	Menu: t,
+	Item: e
+};
+//#endregion
+export { n as Dropdown, e as DropdownItem, t as DropdownMenu };

package/dist/components/molecules/Dropdown/DropdownItem.d.ts

@@ -0,0 +1,23 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+/** Layout-only — not for row colors or typography overrides. */
+export type DropdownItemLayoutClassName = string;
+export interface DropdownItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** Primary row label. */
+    children: ReactNode;
+    /** Leading affordance — icon, checkbox, swatch (from stories / app). */
+    start?: ReactNode;
+    /** Trailing meta — shortcut or count. Omitted when `selected` (check fills end). */
+    end?: ReactNode;
+    /** Committed selection — renders a check in the end slot, not a row fill. */
+    selected?: boolean;
+    /** Keyboard / hover highlight — transient row fill. */
+    active?: boolean;
+    /** When false, label stays full width — **Select** listbox. Default true for action menus. */
+    truncate?: boolean;
+    className?: DropdownItemLayoutClassName;
+}
+/**
+ * Dropdown row — start | label | end. Used by **Select** listbox options and future menu patterns.
+ */
+export declare function DropdownItem({ children, start, end, selected, active, truncate, disabled, className, type, ...props }: DropdownItemProps): import("react").JSX.Element;
+//# sourceMappingURL=DropdownItem.d.ts.map

package/dist/components/molecules/Dropdown/DropdownItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownItem.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Dropdown/DropdownItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAc7D,gEAAgE;AAChE,MAAM,MAAM,2BAA2B,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE,yBAAyB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,wEAAwE;IACxE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oFAAoF;IACpF,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,2BAA2B,CAAC;CACzC;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,GAAG,EACH,QAAgB,EAChB,MAAc,EACd,QAAe,EACf,QAAQ,EACR,SAAS,EACT,IAAe,EACf,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAmCnB"}

package/dist/components/molecules/Dropdown/DropdownItem.js

@@ -0,0 +1,36 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { dropdownItemButtonClasses as t, dropdownItemEndClasses as n, dropdownItemLabelClasses as r, dropdownItemLabelFullClasses as i, dropdownItemSelectedCheckClasses as a, dropdownItemStartClasses as o } from "./dropdownStyles.js";
+import { Check as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/molecules/Dropdown/DropdownItem.tsx
+function u({ children: u, start: d, end: f, selected: p = !1, active: m = !1, truncate: h = !0, disabled: g, className: _, type: v = "button", ...y }) {
+	let b = p ? /* @__PURE__ */ c("span", {
+		className: a,
+		"aria-hidden": !0,
+		children: /* @__PURE__ */ c(s, { strokeWidth: 2 })
+	}) : f == null ? null : /* @__PURE__ */ c("span", {
+		className: n,
+		children: f
+	});
+	return /* @__PURE__ */ l("button", {
+		...y,
+		type: v,
+		disabled: g,
+		className: e(t, p && "hover:bg-transparent focus-visible:bg-transparent", m && !p && "bg-accent-muted", g && "pointer-events-none opacity-50", _),
+		children: [
+			d == null ? null : /* @__PURE__ */ c("span", {
+				className: o,
+				"aria-hidden": !0,
+				children: d
+			}),
+			/* @__PURE__ */ c("span", {
+				className: h ? r : i,
+				children: u
+			}),
+			b
+		]
+	});
+}
+//#endregion
+export { u as DropdownItem };

package/dist/components/molecules/Dropdown/DropdownMenu.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/** Layout-only — width and positioning come from the anchor or inline style. */
+export type DropdownMenuLayoutClassName = string;
+export interface DropdownMenuProps extends HTMLAttributes<HTMLUListElement> {
+    children: ReactNode;
+    className?: DropdownMenuLayoutClassName;
+}
+/** Floating list shell — compose **Dropdown.Item** rows inside. */
+export declare function DropdownMenu({ children, className, ...props }: DropdownMenuProps): import("react").JSX.Element;
+//# sourceMappingURL=DropdownMenu.d.ts.map

package/dist/components/molecules/Dropdown/DropdownMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Dropdown/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,gFAAgF;AAChF,MAAM,MAAM,2BAA2B,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,gBAAgB,CAAC;IACzE,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,2BAA2B,CAAC;CACzC;AAED,mEAAmE;AACnE,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,+BAMhF"}

package/dist/components/molecules/Dropdown/DropdownMenu.js

@@ -0,0 +1,14 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { dropdownMenuClasses as t, dropdownMenuListClasses as n } from "./dropdownStyles.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/molecules/Dropdown/DropdownMenu.tsx
+function i({ children: i, className: a, ...o }) {
+	return /* @__PURE__ */ r("ul", {
+		...o,
+		className: e(t, n, a),
+		children: i
+	});
+}
+//#endregion
+export { i as DropdownMenu };

package/dist/components/molecules/Dropdown/dropdownMenuPosition.d.ts

@@ -0,0 +1,25 @@
+import type { CSSProperties, ReactNode } from "react";
+/** Max fraction of menu width that may extend outside the boundary shell. */
+export declare const dropdownMenuMaxOutsideFraction = 0.5;
+export type DropdownMenuMeasureRow = {
+    label: string;
+    start?: ReactNode;
+    end?: ReactNode;
+    /** Reserve end slot for listbox check — **Select** options without custom `end`. */
+    selectionCheck?: boolean;
+};
+export type DropdownMenuAlign = "start" | "end";
+/** `content` — menu width from widest row (**MoreMenu**). `at-least-trigger` — never narrower than anchor (**Select**). */
+export type DropdownMenuWidthMode = "content" | "at-least-trigger";
+export type DropdownMenuMeasureOptions = {
+    align?: DropdownMenuAlign;
+    widthMode?: DropdownMenuWidthMode;
+};
+/**
+ * Nearest layout shell — **Card** `data-layout="shell"`, else the viewport.
+ */
+export declare function findDropdownMenuBoundary(trigger: HTMLElement): DOMRect;
+/** Widest row — labels, optional start, check or end meta. Includes menu shell inset (p-0.5 × 2). */
+export declare function measureDropdownMenuContentWidth(rows: DropdownMenuMeasureRow[]): number;
+export declare function measureDropdownMenuStyle(trigger: HTMLElement, rows: DropdownMenuMeasureRow[], alignOrOptions?: DropdownMenuAlign | DropdownMenuMeasureOptions): CSSProperties;
+//# sourceMappingURL=dropdownMenuPosition.d.ts.map

package/dist/components/molecules/Dropdown/dropdownMenuPosition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdownMenuPosition.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Dropdown/dropdownMenuPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUtD,6EAA6E;AAC7E,eAAO,MAAM,8BAA8B,MAAM,CAAC;AAElD,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,oFAAoF;IACpF,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,KAAK,CAAC;AAEhD,2HAA2H;AAC3H,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,kBAAkB,CAAC;AAEnE,MAAM,MAAM,0BAA0B,GAAG;IACvC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,SAAS,CAAC,EAAE,qBAAqB,CAAC;CACnC,CAAC;AAcF;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAStE;AAsDD,qGAAqG;AACrG,wBAAgB,+BAA+B,CAAC,IAAI,EAAE,sBAAsB,EAAE,GAAG,MAAM,CAYtF;AAED,wBAAgB,wBAAwB,CACtC,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,sBAAsB,EAAE,EAC9B,cAAc,GAAE,iBAAiB,GAAG,0BAAoC,GACvE,aAAa,CAiCf"}

package/dist/components/molecules/Dropdown/dropdownMenuPosition.js

@@ -0,0 +1,56 @@
+"use client";
+import { dropdownItemEndClasses as e, dropdownItemMeasureButtonClasses as t, dropdownItemMeasureLabelClasses as n, dropdownItemSelectedCheckClasses as r, dropdownItemStartClasses as i } from "./dropdownStyles.js";
+//#region src/components/molecules/Dropdown/dropdownMenuPosition.ts
+var a = .5, o = null;
+function s() {
+	return o ?? (o = document.createElement("div"), o.style.cssText = "position:fixed;left:-10000px;top:0;visibility:hidden;pointer-events:none", document.body.appendChild(o)), o;
+}
+function c(e) {
+	let t = e.parentElement;
+	for (; t != null && t !== document.documentElement;) {
+		if (t.dataset.layout === "shell") return t.getBoundingClientRect();
+		t = t.parentElement;
+	}
+	return document.documentElement.getBoundingClientRect();
+}
+function l(e, t, n) {
+	let r = t * a, i = n.left - r, o = n.right + r - t;
+	return i > o ? i : Math.min(Math.max(e, i), o);
+}
+function u(e) {
+	let t = document.createElement("span");
+	t.className = i;
+	let n = document.createElement("span");
+	n.className = "size-4 shrink-0", n.setAttribute("aria-hidden", "true"), t.appendChild(n), e.appendChild(t);
+}
+function d(i) {
+	let a = s(), o = document.createElement("button");
+	o.type = "button", o.className = t, i.start != null && u(o);
+	let c = document.createElement("span");
+	if (c.className = n, c.textContent = i.label, o.appendChild(c), i.end != null) {
+		let t = document.createElement("span");
+		t.className = e, t.textContent = typeof i.end == "string" ? i.end : "⌘K", o.appendChild(t);
+	} else if (i.selectionCheck) {
+		let e = document.createElement("span");
+		e.className = r, e.setAttribute("aria-hidden", "true"), e.textContent = "✓", o.appendChild(e);
+	}
+	return a.replaceChildren(o), Math.ceil(o.getBoundingClientRect().width);
+}
+function f(e) {
+	if (e.length === 0) return 0;
+	let t = 0;
+	for (let n of e) t = Math.max(t, d(n));
+	return t + 4;
+}
+function p(e, t, n = "start") {
+	let r = typeof n == "string" ? { align: n } : n, i = r.align ?? "start", a = r.widthMode ?? "at-least-trigger", o = e.getBoundingClientRect(), s = c(e), u = o.width, d = f(t), p = a === "content" ? d : Math.max(d, u), m = o.left;
+	return (i === "end" || p > u && o.left + u / 2 > s.left + s.width / 2) && (m = o.right - p), m = l(m, p, s), {
+		position: "fixed",
+		top: o.bottom + 4,
+		left: m,
+		width: p,
+		minWidth: a === "content" ? d : u
+	};
+}
+//#endregion
+export { a as dropdownMenuMaxOutsideFraction, c as findDropdownMenuBoundary, f as measureDropdownMenuContentWidth, p as measureDropdownMenuStyle };

package/dist/components/molecules/Dropdown/dropdownStyles.d.ts

@@ -0,0 +1,31 @@
+/** Floating panel — fixed positioning applied by parent (Select, MoreMenu). */
+export declare const dropdownMenuClasses: string;
+/** Vertical stack — 2px gap; item radius 14px = shell 16px − inset 2px. */
+export declare const dropdownMenuListClasses = "m-0 flex list-none flex-col gap-0.5 p-0";
+/** Gap between anchor shell and menu when positioned with getBoundingClientRect. */
+export declare const dropdownMenuOffsetPx = 4;
+/** Shared row chrome. Display and width stay on the button or the measure row, not both. */
+export declare const dropdownItemRowClasses: string;
+export declare const dropdownItemButtonClasses: string;
+/**
+ * Off-DOM row measure — intrinsic width from longest label + slots (not trigger width).
+ * `inline-flex` and `w-max` replace the button's `flex` and `w-full`. Both pairs on one
+ * element follow stylesheet order, so a consuming app had to re-emit `w-max`.
+ */
+export declare const dropdownItemMeasureButtonClasses: string;
+/** Keyboard / pointer highlight — not used for the committed selection. */
+export declare const dropdownItemActiveClasses = "bg-accent-muted";
+export declare const dropdownItemDisabledClasses = "pointer-events-none opacity-50";
+/** Leading icon, avatar, checkbox, or color swatch. */
+export declare const dropdownItemStartClasses = "flex shrink-0 items-center text-muted [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-current";
+/** Primary row copy — truncates when start/end are present. */
+export declare const dropdownItemLabelClasses = "min-w-0 flex-1 truncate text-left";
+/** Listbox labels — full copy; width comes from menu measurement (**Select**, **MoreMenu**). */
+export declare const dropdownItemLabelFullClasses = "min-w-0 flex-1 whitespace-nowrap text-left";
+/** Off-DOM menu measure — no flex shrink so labels size to full copy. */
+export declare const dropdownItemMeasureLabelClasses: string;
+/** Shortcut hint, count, or meta — mono tabular for key caps. */
+export declare const dropdownItemEndClasses: string;
+/** Selected check — end slot; selection is not a row fill. */
+export declare const dropdownItemSelectedCheckClasses = "flex shrink-0 items-center text-fg [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-current";
+//# sourceMappingURL=dropdownStyles.d.ts.map

package/dist/components/molecules/Dropdown/dropdownStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdownStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Dropdown/dropdownStyles.ts"],"names":[],"mappings":"AAIA,+EAA+E;AAC/E,eAAO,MAAM,mBAAmB,QAG/B,CAAC;AAEF,2EAA2E;AAC3E,eAAO,MAAM,uBAAuB,4CAA4C,CAAC;AAEjF,oFAAoF;AACpF,eAAO,MAAM,oBAAoB,IAAI,CAAC;AAEtC,4FAA4F;AAC5F,eAAO,MAAM,sBAAsB,QAKlC,CAAC;AAEF,eAAO,MAAM,yBAAyB,QAA4C,CAAC;AAEnF;;;;GAIG;AACH,eAAO,MAAM,gCAAgC,QAG5C,CAAC;AAEF,2EAA2E;AAC3E,eAAO,MAAM,yBAAyB,oBAAoB,CAAC;AAE3D,eAAO,MAAM,2BAA2B,mCAAmC,CAAC;AAE5E,uDAAuD;AACvD,eAAO,MAAM,wBAAwB,iGAC2D,CAAC;AAEjG,+DAA+D;AAC/D,eAAO,MAAM,wBAAwB,sCAAsC,CAAC;AAE5E,gGAAgG;AAChG,eAAO,MAAM,4BAA4B,+CAA+C,CAAC;AAEzF,yEAAyE;AACzE,eAAO,MAAM,+BAA+B,QAA6D,CAAC;AAE1G,iEAAiE;AACjE,eAAO,MAAM,sBAAsB,QAGlC,CAAC;AAEF,8DAA8D;AAC9D,eAAO,MAAM,gCAAgC,8FACgD,CAAC"}

package/dist/components/molecules/Dropdown/dropdownStyles.js

@@ -0,0 +1,8 @@
+"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";
+//#region src/components/molecules/Dropdown/dropdownStyles.ts
+var r = e("z-50 max-h-60 overflow-y-auto rounded-2xl border border-elevation-edge bg-surface p-0.5 shadow-soft-sm", n("fast")), i = "m-0 flex list-none flex-col gap-0.5 p-0", a = e(t("body"), "cursor-pointer items-center gap-2 rounded-[14px] px-3.5 py-2 text-left text-fg", "transition-[color,background-color] hover:bg-accent-muted focus-visible:outline-none focus-visible:bg-accent-muted", n("fast")), o = e(a, "flex w-full"), s = e(a, "inline-flex w-max max-w-none"), c = "bg-accent-muted", l = "pointer-events-none opacity-50", u = "flex shrink-0 items-center text-muted [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-current", d = "min-w-0 flex-1 truncate text-left", f = "min-w-0 flex-1 whitespace-nowrap text-left", p = e(t("body"), "whitespace-nowrap text-left"), m = e(t("caption"), "shrink-0 font-mono tabular-nums text-muted"), h = "flex shrink-0 items-center text-fg [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-current";
+//#endregion
+export { c as dropdownItemActiveClasses, o as dropdownItemButtonClasses, l as dropdownItemDisabledClasses, m as dropdownItemEndClasses, d as dropdownItemLabelClasses, f as dropdownItemLabelFullClasses, s as dropdownItemMeasureButtonClasses, p as dropdownItemMeasureLabelClasses, a as dropdownItemRowClasses, h as dropdownItemSelectedCheckClasses, u as dropdownItemStartClasses, r as dropdownMenuClasses, i as dropdownMenuListClasses };

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

@@ -0,0 +1,25 @@
+import { type ReactNode } from "react";
+import { type FieldOrientation } from "./fieldStyles";
+export { fieldOrientations, type FieldOrientation } from "./fieldStyles";
+/** Layout-only — not for colors, borders, or typography overrides. */
+export type FieldLayoutClassName = string;
+export interface FieldProps {
+    /** Visible label — omit when children are self-labeled. */
+    label?: string;
+    /** Neutral helper below the control(s). */
+    description?: string;
+    /** Stack (default) or label beside control. */
+    orientation?: FieldOrientation;
+    /** Explicit control id — auto-wired for a single child when omitted. */
+    htmlFor?: string;
+    disabled?: boolean;
+    /** One or more form controls — **Input**, **TextArea**, **Select**, **Search**, etc. */
+    children: ReactNode;
+    className?: FieldLayoutClassName;
+}
+/**
+ * Label/layout wrapper for form controls (ADR-0006) — never required.
+ * Validation stays on **Input** / **TextArea** (`status` + `message`); **Field** owns spacing and orientation only.
+ */
+export declare function Field({ label, description, orientation, htmlFor, disabled, children, className, }: FieldProps): import("react").JSX.Element;
+//# sourceMappingURL=Field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Field/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAQL,KAAK,gBAAgB,EACtB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,iBAAiB,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEzE,sEAAsE;AACtE,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAE1C,MAAM,WAAW,UAAU;IACzB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wFAAwF;IACxF,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AA8BD;;;GAGG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,WAAW,EACX,WAAwB,EACxB,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,SAAS,GACV,EAAE,UAAU,+BAwFZ"}

package/dist/components/molecules/Field/Field.js

@@ -0,0 +1,80 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { fieldDescriptionClasses as t, fieldHorizontalControlColumnClasses as n, fieldHorizontalLabelColumnClasses as r, fieldHorizontalStackClasses as i, fieldLabelClassesFor as a, fieldMultiControlStackClasses as o, fieldOrientations as s, fieldVerticalStackClasses as c } from "./fieldStyles.js";
+import { Children as l, cloneElement as u, isValidElement as d, useId as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/molecules/Field/Field.tsx
+function h(e) {
+	return l.toArray(e).filter(d).length;
+}
+function g(e) {
+	let t = l.toArray(e).filter(d);
+	return t.length === 1 ? t[0] : null;
+}
+function _(e) {
+	if (e.label == null) return;
+	let t = g(e.children);
+	t != null && t.props.label != null && console.warn("[WMDS Field] Child has its own `label` — omit one label source (Field or control).");
+}
+function v({ label: s, description: l, orientation: d = "vertical", htmlFor: v, disabled: y = !1, children: b, className: x }) {
+	let S = f();
+	_({
+		label: s,
+		children: b
+	});
+	let C = h(b), w = g(b), T = v ?? w?.props.id ?? (w == null ? void 0 : `${S}-control`), E = l == null ? void 0 : `${S}-description`, D = s == null ? void 0 : `${S}-legend`, O = w != null && T != null && w.props.id == null ? u(w, { id: T }) : w, k = C > 1 ? /* @__PURE__ */ p("div", {
+		className: o,
+		children: b
+	}) : O ?? b, A = l == null ? null : /* @__PURE__ */ p("p", {
+		id: E,
+		className: t,
+		children: l
+	});
+	return s == null && l == null ? /* @__PURE__ */ p("div", {
+		className: e("w-full", x),
+		children: b
+	}) : s == null ? /* @__PURE__ */ m("div", {
+		className: e(c, x),
+		"aria-describedby": E,
+		children: [b, A]
+	}) : C > 1 ? /* @__PURE__ */ m("div", {
+		role: "group",
+		"aria-labelledby": D,
+		"aria-describedby": E,
+		className: e(c, x),
+		children: [
+			/* @__PURE__ */ p("span", {
+				id: D,
+				className: a(y),
+				children: s
+			}),
+			k,
+			A
+		]
+	}) : d === "horizontal" ? /* @__PURE__ */ m("div", {
+		className: e(i, x),
+		"aria-describedby": E,
+		children: [/* @__PURE__ */ p("label", {
+			htmlFor: T,
+			className: e(r, a(y)),
+			children: s
+		}), /* @__PURE__ */ m("div", {
+			className: n,
+			children: [k, A]
+		})]
+	}) : /* @__PURE__ */ m("div", {
+		className: e(c, x),
+		"aria-describedby": E,
+		children: [
+			/* @__PURE__ */ p("label", {
+				htmlFor: T,
+				className: a(y),
+				children: s
+			}),
+			k,
+			A
+		]
+	});
+}
+//#endregion
+export { v as Field, s as fieldOrientations };

package/dist/components/molecules/Field/fieldStyles.d.ts

@@ -0,0 +1,16 @@
+export declare const fieldOrientations: readonly ["vertical", "horizontal"];
+export type FieldOrientation = (typeof fieldOrientations)[number];
+/** Vertical label → control → description — matches Input field stack rhythm. */
+export declare const fieldVerticalStackClasses = "flex w-full flex-col gap-1.5";
+/** Label beside control — Stripe-style two-column row. */
+export declare const fieldHorizontalStackClasses = "flex w-full items-start gap-4";
+/** Left label column — fixed band; control column flexes. */
+export declare const fieldHorizontalLabelColumnClasses = "w-[7.5rem] shrink-0 pt-2.5 sm:w-32";
+/** Right control column in horizontal layout. */
+export declare const fieldHorizontalControlColumnClasses = "flex min-w-0 flex-1 flex-col gap-1.5";
+/** Gap between multiple controls under one label. */
+export declare const fieldMultiControlStackClasses = "flex w-full flex-col gap-2";
+export declare const fieldLabelClasses: string;
+export declare const fieldDescriptionClasses: string;
+export declare function fieldLabelClassesFor(disabled?: boolean): string;
+//# sourceMappingURL=fieldStyles.d.ts.map

package/dist/components/molecules/Field/fieldStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Field/fieldStyles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB,qCAAsC,CAAC;AAErE,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAElE,iFAAiF;AACjF,eAAO,MAAM,yBAAyB,iCAAiC,CAAC;AAExE,0DAA0D;AAC1D,eAAO,MAAM,2BAA2B,kCAAkC,CAAC;AAE3E,6DAA6D;AAC7D,eAAO,MAAM,iCAAiC,uCACR,CAAC;AAEvC,iDAAiD;AACjD,eAAO,MAAM,mCAAmC,yCACR,CAAC;AAEzC,qDAAqD;AACrD,eAAO,MAAM,6BAA6B,+BAA+B,CAAC;AAE1E,eAAO,MAAM,iBAAiB,QAA8B,CAAC;AAE7D,eAAO,MAAM,uBAAuB,QAA6B,CAAC;AAElE,wBAAgB,oBAAoB,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAE/D"}

package/dist/components/molecules/Field/fieldStyles.js

@@ -0,0 +1,11 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { typographyClass as t } from "../../../lib/typography.js";
+import "../../atoms/Input/inputShellStyles.js";
+//#region src/components/molecules/Field/fieldStyles.ts
+var n = ["vertical", "horizontal"], r = "flex w-full flex-col gap-1.5", i = "flex w-full items-start gap-4", a = "w-[7.5rem] shrink-0 pt-2.5 sm:w-32", o = "flex min-w-0 flex-1 flex-col gap-1.5", s = "flex w-full flex-col gap-2", c = t("ui-label"), l = t("caption");
+function u(t) {
+	return e(c, t && "opacity-50");
+}
+//#endregion
+export { l as fieldDescriptionClasses, o as fieldHorizontalControlColumnClasses, a as fieldHorizontalLabelColumnClasses, i as fieldHorizontalStackClasses, c as fieldLabelClasses, u as fieldLabelClassesFor, s as fieldMultiControlStackClasses, n as fieldOrientations, r as fieldVerticalStackClasses };

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

@@ -0,0 +1,22 @@
+import { type ReactElement } from "react";
+export interface FloatingActionButtonItem {
+    id: string;
+    label: string;
+    icon: ReactElement;
+    disabled?: boolean;
+}
+export type FloatingActionButtonLayoutClassName = string;
+export interface FloatingActionButtonProps {
+    items: FloatingActionButtonItem[];
+    onAction: (id: string) => void;
+    triggerIcon?: ReactElement;
+    openIcon?: ReactElement;
+    triggerLabel?: string;
+    closeLabel?: string;
+    /** Adds a dismissible semantic overlay behind the expanded actions. */
+    backdrop?: boolean;
+    /** Layout only — use for fixed placement or margins. */
+    className?: FloatingActionButtonLayoutClassName;
+}
+export declare function FloatingActionButton({ items, onAction, triggerIcon, openIcon, triggerLabel, closeLabel, backdrop, className, }: FloatingActionButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=FloatingActionButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingActionButton.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/FloatingActionButton/FloatingActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AAiBf,MAAM,WAAW,wBAAwB;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,mCAAmC,GAAG,MAAM,CAAC;AAEzD,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,wBAAwB,EAAE,CAAC;IAClC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,SAAS,CAAC,EAAE,mCAAmC,CAAC;CACjD;AAMD,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,QAAQ,EACR,WAAsC,EACtC,QAAgC,EAChC,YAA6B,EAC7B,UAA4B,EAC5B,QAAgB,EAChB,SAAS,GACV,EAAE,yBAAyB,+BAqJ3B"}

package/dist/components/molecules/FloatingActionButton/FloatingActionButton.js

@@ -0,0 +1,135 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { motionTransitionProp as t } from "../../../lib/motion.js";
+import { IconButton as n } from "../../atoms/IconButton/IconButton.js";
+import { floatingActionButtonBackdropClasses as r, floatingActionButtonInnerClasses as i, floatingActionButtonItemClasses as a, floatingActionButtonLabelClasses as o, floatingActionButtonPathOriginClasses as s, floatingActionButtonRootClasses as c, floatingActionButtonTriggerClasses as l, floatingActionButtonVerticalPath as u } from "./floatingActionButtonStyles.js";
+import { useEffect as d, useId as f, useRef as p, useState as m } from "react";
+import { Plus as h, X as g } from "lucide-react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { AnimatePresence as y, motion as b } from "motion/react";
+//#region src/components/molecules/FloatingActionButton/FloatingActionButton.tsx
+var x = .05, S = 84, C = 4;
+function w({ items: w, onAction: T, triggerIcon: E = /* @__PURE__ */ _(h, { strokeWidth: 2 }), openIcon: D = /* @__PURE__ */ _(g, { strokeWidth: 2 }), triggerLabel: O = "Open actions", closeLabel: k = "Close actions", backdrop: A = !1, className: j }) {
+	let [M, N] = m(!1), P = f(), F = p(null), I = p(null);
+	d(() => {
+		if (!M) return;
+		function e(e) {
+			e.key === "Escape" && (N(!1), I.current?.querySelector("button")?.focus());
+		}
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [M]);
+	function L(e) {
+		T(e), N(!1);
+	}
+	function R(e) {
+		if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+		let t = Array.from(F.current?.querySelectorAll("[data-fab-action] button") ?? []), n = t.indexOf(document.activeElement);
+		n < 0 || (e.preventDefault(), t[(n + (e.key === "ArrowUp" ? 1 : -1) + t.length) % t.length]?.focus());
+	}
+	return /* @__PURE__ */ _("div", {
+		ref: F,
+		className: e(c, j),
+		onKeyDown: R,
+		children: /* @__PURE__ */ v("div", {
+			className: i,
+			children: [
+				/* @__PURE__ */ _(y, { children: M && A ? /* @__PURE__ */ _(b.button, {
+					type: "button",
+					"aria-label": "Dismiss actions",
+					className: r,
+					initial: { opacity: 0 },
+					animate: { opacity: 1 },
+					exit: { opacity: 0 },
+					transition: t("medium-min"),
+					onClick: () => N(!1)
+				}, "fab-backdrop") : null }),
+				/* @__PURE__ */ _(b.div, {
+					ref: I,
+					className: l,
+					animate: { rotate: M ? 90 : 0 },
+					transition: t("medium-min"),
+					children: /* @__PURE__ */ _(n, {
+						icon: M ? D : E,
+						"aria-label": M ? k : O,
+						"aria-expanded": M,
+						"aria-controls": P,
+						fab: !0,
+						size: "lg",
+						onClick: () => N((e) => !e)
+					})
+				}),
+				/* @__PURE__ */ _("div", {
+					id: P,
+					role: "group",
+					"aria-label": "Actions",
+					"aria-hidden": !M,
+					className: s,
+					children: /* @__PURE__ */ _(y, { children: M ? w.map((e, r) => {
+						let i = (r + 1) / C * S, s = r * x, c = (w.length - r - 1) * (x / 2);
+						return /* @__PURE__ */ v(b.div, {
+							"data-fab-action": "",
+							className: a,
+							style: {
+								offsetPath: `path("${u}")`,
+								offsetRotate: "0deg"
+							},
+							initial: {
+								offsetDistance: "0%",
+								opacity: 0,
+								scale: .3
+							},
+							animate: {
+								offsetDistance: `${i}%`,
+								opacity: 1,
+								scale: 1
+							},
+							exit: {
+								offsetDistance: "0%",
+								opacity: 0,
+								scale: .3,
+								transition: {
+									...t("fast"),
+									delay: c
+								}
+							},
+							transition: {
+								...t("medium-min"),
+								delay: s
+							},
+							children: [/* @__PURE__ */ _(n, {
+								icon: e.icon,
+								"aria-label": e.label,
+								title: e.label,
+								role: "secondary",
+								size: "md",
+								disabled: e.disabled,
+								onClick: () => L(e.id)
+							}), /* @__PURE__ */ _(b.span, {
+								className: o,
+								initial: {
+									opacity: 0,
+									x: 8
+								},
+								animate: {
+									opacity: 1,
+									x: 0
+								},
+								exit: {
+									opacity: 0,
+									x: 8
+								},
+								transition: {
+									...t("fast-min"),
+									delay: s + .08
+								},
+								children: e.label
+							})]
+						}, e.id);
+					}) : null })
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { w as FloatingActionButton };

package/dist/components/molecules/FloatingActionButton/floatingActionButtonStyles.d.ts

@@ -0,0 +1,9 @@
+export declare const floatingActionButtonVerticalPath = "M 0 0 L 0 -286";
+export declare const floatingActionButtonRootClasses = "pointer-events-none z-50 size-12";
+export declare const floatingActionButtonInnerClasses = "relative size-full";
+export declare const floatingActionButtonBackdropClasses = "pointer-events-auto fixed inset-0 bg-overlay";
+export declare const floatingActionButtonPathOriginClasses = "pointer-events-none absolute left-1/2 top-1/2 size-0";
+export declare const floatingActionButtonItemClasses = "pointer-events-auto absolute left-0 top-0 z-10 will-change-[offset-distance,opacity,transform] [offset-anchor:center] [offset-rotate:0deg]";
+export declare const floatingActionButtonLabelClasses: string;
+export declare const floatingActionButtonTriggerClasses = "pointer-events-auto relative z-20 will-change-transform";
+//# sourceMappingURL=floatingActionButtonStyles.d.ts.map

package/dist/components/molecules/FloatingActionButton/floatingActionButtonStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"floatingActionButtonStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/FloatingActionButton/floatingActionButtonStyles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gCAAgC,mBAAmB,CAAC;AAEjE,eAAO,MAAM,+BAA+B,qCACR,CAAC;AAErC,eAAO,MAAM,gCAAgC,uBAAuB,CAAC;AAErE,eAAO,MAAM,mCAAmC,iDACA,CAAC;AAEjD,eAAO,MAAM,qCAAqC,yDACM,CAAC;AAEzD,eAAO,MAAM,+BAA+B,+IACkG,CAAC;AAE/I,eAAO,MAAM,gCAAgC,QAG5C,CAAC;AAEF,eAAO,MAAM,kCAAkC,4DACY,CAAC"}

package/dist/components/molecules/FloatingActionButton/floatingActionButtonStyles.js

@@ -0,0 +1,7 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { typographyClass as t } from "../../../lib/typography.js";
+//#region src/components/molecules/FloatingActionButton/floatingActionButtonStyles.ts
+var n = "M 0 0 L 0 -286", r = "pointer-events-none z-50 size-12", i = "relative size-full", a = "pointer-events-auto fixed inset-0 bg-overlay", o = "pointer-events-none absolute left-1/2 top-1/2 size-0", s = "pointer-events-auto absolute left-0 top-0 z-10 will-change-[offset-distance,opacity,transform] [offset-anchor:center] [offset-rotate:0deg]", c = e(t("ui-label"), "pointer-events-none absolute right-[calc(100%+12px)] top-1/2 -translate-y-1/2 whitespace-nowrap rounded-lg border border-border bg-surface px-2.5 py-1 text-fg shadow-raised"), l = "pointer-events-auto relative z-20 will-change-transform";
+//#endregion
+export { a as floatingActionButtonBackdropClasses, i as floatingActionButtonInnerClasses, s as floatingActionButtonItemClasses, c as floatingActionButtonLabelClasses, o as floatingActionButtonPathOriginClasses, r as floatingActionButtonRootClasses, l as floatingActionButtonTriggerClasses, n as floatingActionButtonVerticalPath };

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

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+/** Layout-only — width and margin. Not for re-theming or forcing a line break. */
+export type HeroIntroLayoutClassName = string;
+/** `large` is the default marketing intro. `display` is the full-width sequenced hero. Both are `type-display-2`. */
+export declare const heroIntroSteps: readonly ["large", "display"];
+export type HeroIntroStep = (typeof heroIntroSteps)[number];
+export interface HeroIntroProps {
+    /**
+     * First sentence. Wraps when the measure is shorter than the line, including from `md`.
+     * When `children` is passed, the rest of the intro starts on the next line.
+     */
+    lead: ReactNode;
+    /**
+     * Rest of the intro. When present, starts on a new line, on the same type step and leading.
+     * Omit it when the heading is only the lead, as on the sequenced hero.
+     */
+    children?: ReactNode;
+    /**
+     * `large` — `type-display-2` at normal weight, columns 4–9 from `lg`. The default hero.
+     * `display` — the same size, full width of the page grid. The sequenced hero.
+     * Both match the computed font-size and line-height of **ScrollHorizontal.Intro**.
+     */
+    step?: HeroIntroStep;
+    /** Layout only — width and margin. */
+    className?: HeroIntroLayoutClassName;
+}
+/**
+ * Marketing hero heading. `lead` is the first line. `children`, when passed, is the next line.
+ * The component owns the break. This is the page `h1`.
+ */
+export declare function HeroIntro({ lead, children, step, className }: HeroIntroProps): import("react").JSX.Element;
+//# sourceMappingURL=HeroIntro.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeroIntro.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/HeroIntro/HeroIntro.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvC,kFAAkF;AAClF,MAAM,MAAM,wBAAwB,GAAG,MAAM,CAAC;AAE9C,qHAAqH;AACrH,eAAO,MAAM,cAAc,+BAAgC,CAAC;AAC5D,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5D,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,IAAI,EAAE,SAAS,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,sCAAsC;IACtC,SAAS,CAAC,EAAE,wBAAwB,CAAC;CACtC;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAc,EAAE,SAAS,EAAE,EAAE,cAAc,+BAWtF"}