@thewhatmatters/wmds 0.2.0

package/dist/components/organisms/MoreMenu/MoreMenu.js

@@ -0,0 +1,133 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { IconButton as t } from "../../atoms/IconButton/IconButton.js";
+import { Dropdown as n } from "../../molecules/Dropdown/Dropdown.js";
+import { measureDropdownMenuStyle as r } from "../../molecules/Dropdown/dropdownMenuPosition.js";
+import { moreMenuRootClasses as i } from "./moreMenuStyles.js";
+import { useCallback as a, useEffect as o, useId as s, useLayoutEffect as c, useRef as l, useState as u } from "react";
+import { EllipsisVertical as d } from "lucide-react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/organisms/MoreMenu/MoreMenu.tsx
+function m(e) {
+	e.items.length === 0 && console.warn("[WMDS MoreMenu] `items` must not be empty.");
+}
+function h(e) {
+	return e.map((e) => ({
+		label: e.label,
+		start: e.start,
+		end: e.end
+	}));
+}
+function g({ "aria-label": g, items: _, onAction: v, size: y = "sm", disabled: b = !1, className: x }) {
+	let S = s(), C = l(null), w = l(null), [T, E] = u(!1), [D, O] = u(null), [k, A] = u(0);
+	m({
+		"aria-label": g,
+		items: _
+	});
+	let j = a(() => {
+		E(!1), O(null);
+	}, []), M = a(() => {
+		let e = w.current;
+		e != null && O(r(e, h(_), {
+			align: "end",
+			widthMode: "content"
+		})), E(!0);
+	}, [_]), N = a((e) => {
+		v?.(e), j();
+	}, [j, v]), P = a(() => {
+		let e = w.current;
+		e != null && O(r(e, h(_), {
+			align: "end",
+			widthMode: "content"
+		}));
+	}, [_]);
+	c(() => {
+		if (T) return P(), window.addEventListener("resize", P), window.addEventListener("scroll", P, !0), () => {
+			window.removeEventListener("resize", P), window.removeEventListener("scroll", P, !0);
+		};
+	}, [T, P]), o(() => {
+		if (!T) return;
+		function e(e) {
+			C.current != null && !C.current.contains(e.target) && j();
+		}
+		return document.addEventListener("mousedown", e), () => {
+			document.removeEventListener("mousedown", e);
+		};
+	}, [j, T]), o(() => {
+		T && A((e) => Math.min(e, Math.max(_.length - 1, 0)));
+	}, [_.length, T]);
+	function F(e) {
+		A((t) => {
+			if (_.length === 0) return 0;
+			let n = t;
+			for (let t = 0; t < _.length; t += 1) if (n = (n + e + _.length) % _.length, !_[n]?.disabled) return n;
+			return t;
+		});
+	}
+	function I(e) {
+		if (!b) switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), T ? F(1) : M();
+				break;
+			case "ArrowUp":
+				e.preventDefault(), T ? F(-1) : M();
+				break;
+			case "Enter":
+			case " ":
+				if (e.preventDefault(), T) {
+					let e = _[k];
+					e != null && !e.disabled && N(e.id);
+				} else M();
+				break;
+			case "Escape": e.preventDefault(), j();
+		}
+	}
+	return /* @__PURE__ */ p("div", {
+		ref: C,
+		className: e(i, x),
+		children: [/* @__PURE__ */ f("div", {
+			ref: w,
+			className: "inline-flex",
+			children: /* @__PURE__ */ f(t, {
+				size: y,
+				role: "ghost",
+				icon: /* @__PURE__ */ f(d, { strokeWidth: 2 }),
+				"aria-label": g,
+				"aria-haspopup": "menu",
+				"aria-expanded": T,
+				"aria-controls": T ? S : void 0,
+				disabled: b,
+				onClick: () => {
+					b || (T ? j() : M());
+				},
+				onKeyDown: I
+			})
+		}), T && D != null ? /* @__PURE__ */ f(n.Menu, {
+			id: S,
+			role: "menu",
+			"aria-label": g,
+			style: D,
+			children: _.map((e, t) => /* @__PURE__ */ f("li", {
+				role: "presentation",
+				children: /* @__PURE__ */ f(n.Item, {
+					role: "menuitem",
+					tabIndex: -1,
+					truncate: !1,
+					active: t === k,
+					disabled: e.disabled,
+					start: e.start,
+					end: e.end,
+					onMouseEnter: () => {
+						e.disabled || A(t);
+					},
+					onClick: () => {
+						e.disabled || N(e.id);
+					},
+					children: e.label
+				})
+			}, e.id))
+		}) : null]
+	});
+}
+//#endregion
+export { g as MoreMenu };

package/dist/components/organisms/MoreMenu/moreMenuStyles.d.ts

@@ -0,0 +1,3 @@
+/** MoreMenu root — inline with header clusters; menu positions via fixed coords. */
+export declare const moreMenuRootClasses = "relative inline-flex shrink-0";
+//# sourceMappingURL=moreMenuStyles.d.ts.map

package/dist/components/organisms/MoreMenu/moreMenuStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"moreMenuStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/MoreMenu/moreMenuStyles.ts"],"names":[],"mappings":"AAAA,oFAAoF;AACpF,eAAO,MAAM,mBAAmB,kCAAkC,CAAC"}

package/dist/components/organisms/MoreMenu/moreMenuStyles.js

@@ -0,0 +1,5 @@
+"use client";
+//#region src/components/organisms/MoreMenu/moreMenuStyles.ts
+var e = "relative inline-flex shrink-0";
+//#endregion
+export { e as moreMenuRootClasses };

package/dist/components/organisms/Panel/Panel.d.ts

@@ -0,0 +1,40 @@
+import { type ReactNode } from "react";
+import { panelSides, panelSizes, type PanelSide, type PanelSize } from "./panelStyles";
+export type { PanelSide, PanelSize } from "./panelStyles";
+export { panelSides, panelSizes };
+/** Layout-only — placement and size own dimensions. */
+export type PanelLayoutClassName = string;
+export interface PanelProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Close on Escape — default `true`. */
+    dismissOnEscape?: boolean;
+    children: ReactNode;
+}
+export interface PanelContentProps {
+    /** Edge attachment — default `end`. Side rails only (no `bottom` — use **Sheet**). */
+    side?: PanelSide;
+    size?: PanelSize;
+    title?: ReactNode;
+    description?: ReactNode;
+    headerStart?: ReactNode;
+    showClose?: boolean;
+    footer?: ReactNode;
+    className?: PanelLayoutClassName;
+    children?: ReactNode;
+}
+declare function PanelRoot({ open, onOpenChange, dismissOnEscape, children, }: PanelProps): import("react").JSX.Element;
+declare function PanelTrigger({ children, className, }: {
+    children: ReactNode;
+    className?: PanelLayoutClassName;
+}): import("react").JSX.Element;
+declare function PanelContent({ side, size, title, description, headerStart, showClose, footer, className, children, }: PanelContentProps): import("react").JSX.Element;
+/**
+ * Persistent edge flyover — non-blocking visual scrim, no scroll lock, no focus trap.
+ * Page stays interactive; use **Sheet** when the flow should block the canvas.
+ */
+export declare const Panel: typeof PanelRoot & {
+    Trigger: typeof PanelTrigger;
+    Content: typeof PanelContent;
+};
+//# sourceMappingURL=Panel.d.ts.map

package/dist/components/organisms/Panel/Panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Panel/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAef,OAAO,EAOL,UAAU,EAEV,UAAU,EACV,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,eAAe,CAAC;AAEvB,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC;AAElC,uDAAuD;AACvD,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAE1C,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,wCAAwC;IACxC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,sFAAsF;IACtF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAiGD,iBAAS,SAAS,CAAC,EACjB,IAAI,EACJ,YAAY,EACZ,eAAsB,EACtB,QAAQ,GACT,EAAE,UAAU,+BAkBZ;AAED,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC,+BAmBA;AAED,iBAAS,YAAY,CAAC,EACpB,IAAY,EACZ,IAAW,EACX,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAAgB,EAChB,MAAM,EACN,SAAS,EACT,QAAQ,GACT,EAAE,iBAAiB,+BAyDnB;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK;;;CAGhB,CAAC"}

package/dist/components/organisms/Panel/Panel.js

@@ -0,0 +1,135 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { overlayPanelBodyScrollClasses as t, overlayPanelChromeClasses as n, overlayPanelFooterClasses as r, overlayPanelFooterDelineatedInnerClasses as i, overlayPanelFooterDelineatedShellClasses as a, overlayPanelFooterHairlineClasses as o, overlayPanelSectionStackClasses as s } from "../Dialog/dialogStyles.js";
+import { OverlayPanelHeader as c } from "../Dialog/OverlayPanelHeader.js";
+import { PanelProvider as l, usePanelContext as u, usePanelLabelIds as d } from "./PanelContext.js";
+import { sheetPanelPlacementClasses as f } from "../Sheet/sheetStyles.js";
+import { panelBackdropClasses as p, panelMotionTransition as m, panelMotionVariants as h, panelOverlayRootClasses as g, panelShellClasses as _, panelSides as v, panelSizeClasses as y, panelSizes as b } from "./panelStyles.js";
+import { useCallback as x, useEffect as S, useRef as C } from "react";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import { AnimatePresence as E, motion as D } from "motion/react";
+import { createPortal as O } from "react-dom";
+//#region src/components/organisms/Panel/Panel.tsx
+function k({ side: t, size: r, "aria-labelledby": i, "aria-describedby": a, children: o }) {
+	let { open: s, onOpenChange: c, dismissOnEscape: l, triggerRef: d } = u("PanelPortal"), v = C(null), b = C(null), k = x(() => {
+		c(!1);
+	}, [c]);
+	return S(() => {
+		if (s) return b.current = d.current ?? document.activeElement, () => {
+			b.current?.focus?.();
+		};
+	}, [s, d]), S(() => {
+		if (!s || !l) return;
+		function e(e) {
+			e.key === "Escape" && (e.preventDefault(), k());
+		}
+		return document.addEventListener("keydown", e), () => {
+			document.removeEventListener("keydown", e);
+		};
+	}, [
+		k,
+		l,
+		s
+	]), typeof document > "u" ? null : O(/* @__PURE__ */ w(E, { children: s ? /* @__PURE__ */ T(D.div, {
+		className: g[t],
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 },
+		transition: m(t),
+		children: [/* @__PURE__ */ w("div", {
+			className: p,
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ w(D.div, {
+			ref: v,
+			className: e(_, f[t], y(t, r), n),
+			role: "dialog",
+			"aria-modal": "false",
+			"aria-labelledby": i,
+			"aria-describedby": a,
+			variants: h(t),
+			initial: "hidden",
+			animate: "visible",
+			exit: "exit",
+			transition: m(t),
+			children: o
+		})]
+	}) : null }), document.body);
+}
+function A({ open: e, onOpenChange: t, dismissOnEscape: n = !0, children: r }) {
+	let { titleId: i, descriptionId: a } = d("panel"), o = C(null);
+	return /* @__PURE__ */ w(l, {
+		value: {
+			open: e,
+			onOpenChange: t,
+			titleId: i,
+			descriptionId: a,
+			dismissOnEscape: n,
+			triggerRef: o
+		},
+		children: r
+	});
+}
+function j({ children: e, className: t }) {
+	let { onOpenChange: n, triggerRef: r } = u("Panel.Trigger");
+	return /* @__PURE__ */ w("span", {
+		ref: r,
+		className: t,
+		onClick: (e) => {
+			let t = e.target.closest("button, a[href]");
+			t instanceof HTMLElement && (r.current = t), n(!0);
+		},
+		children: e
+	});
+}
+function M({ side: n = "end", size: l = "md", title: d, description: f, headerStart: p, showClose: m = !0, footer: h, className: g, children: _ }) {
+	let { titleId: v, descriptionId: y, onOpenChange: b } = u("Panel.Content"), x = d != null, S = f != null, C = _ != null || !x && S, E = h != null;
+	return /* @__PURE__ */ w(k, {
+		side: n,
+		size: l,
+		"aria-labelledby": x ? v : void 0,
+		"aria-describedby": S ? y : void 0,
+		children: /* @__PURE__ */ T("div", {
+			className: e(s, h == null ? "pb-4" : void 0, g),
+			children: [
+				/* @__PURE__ */ w(c, {
+					titleId: v,
+					descriptionId: y,
+					title: d,
+					description: f,
+					headerStart: p,
+					showClose: m,
+					closeLabel: "Close panel",
+					onClose: () => b(!1),
+					delineated: C || E
+				}),
+				C ? /* @__PURE__ */ T("div", {
+					className: t,
+					children: [!x && S ? /* @__PURE__ */ w("p", {
+						id: y,
+						className: "text-muted",
+						children: f
+					}) : null, _]
+				}) : null,
+				E ? C ? /* @__PURE__ */ T("footer", {
+					className: a,
+					children: [/* @__PURE__ */ w("hr", {
+						className: o,
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ w("div", {
+						className: i,
+						children: h
+					})]
+				}) : /* @__PURE__ */ w("footer", {
+					className: e(r, "pb-4"),
+					children: h
+				}) : null
+			]
+		})
+	});
+}
+var N = Object.assign(A, {
+	Trigger: j,
+	Content: M
+});
+//#endregion
+export { N as Panel, v as panelSides, b as panelSizes };

package/dist/components/organisms/Panel/PanelContext.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from "react";
+export interface PanelContextValue {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    titleId: string;
+    descriptionId: string;
+    dismissOnEscape: boolean;
+    triggerRef: React.RefObject<HTMLElement | null>;
+}
+export declare function PanelProvider({ value, children, }: {
+    value: PanelContextValue;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function usePanelContext(component: string): PanelContextValue;
+export declare function usePanelLabelIds(prefix: string): {
+    titleId: string;
+    descriptionId: string;
+};
+//# sourceMappingURL=PanelContext.d.ts.map

package/dist/components/organisms/Panel/PanelContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelContext.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Panel/PanelContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzE,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,OAAO,CAAC;IACzB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACjD;AAID,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,iBAAiB,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAEA;AAED,wBAAgB,eAAe,CAAC,SAAS,EAAE,MAAM,GAAG,iBAAiB,CAMpE;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,MAAM;;;EAM9C"}

package/dist/components/organisms/Panel/PanelContext.js

@@ -0,0 +1,25 @@
+"use client";
+import { createContext as e, useContext as t, useId as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/organisms/Panel/PanelContext.tsx
+var i = e(null);
+function a({ value: e, children: t }) {
+	return /* @__PURE__ */ r(i.Provider, {
+		value: e,
+		children: t
+	});
+}
+function o(e) {
+	let n = t(i);
+	if (n == null) throw Error(`[WMDS ${e}] must be used within \`Panel\`.`);
+	return n;
+}
+function s(e) {
+	let t = n();
+	return {
+		titleId: `${e}-title${t}`,
+		descriptionId: `${e}-description${t}`
+	};
+}
+//#endregion
+export { a as PanelProvider, o as usePanelContext, s as usePanelLabelIds };

package/dist/components/organisms/Panel/panelStyles.d.ts

@@ -0,0 +1,17 @@
+import { sheetPanelPlacementClasses } from "../Sheet/sheetStyles";
+export declare const panelSides: readonly ["end", "start"];
+export type PanelSide = (typeof panelSides)[number];
+export declare const panelSizes: readonly ["sm", "md", "lg"];
+export type PanelSize = (typeof panelSizes)[number];
+/** Full-viewport stack — visual scrim + edge panel; outside clicks pass through. */
+export declare const panelOverlayRootClasses: Record<PanelSide, string>;
+/** Non-blocking dim — inherits pointer-events-none from root; page stays interactive. */
+export declare const panelBackdropClasses: string;
+export declare const panelShellClasses: string;
+/** Cross-axis size — width on side panels (same tokens as **Sheet** `end` / `start`). */
+export declare function panelSizeClasses(side: PanelSide, size: PanelSize): string;
+export { sheetPanelPlacementClasses as panelPlacementClasses };
+export { overlayPanelBodyScrollClasses as panelBodyScrollClasses } from "../Dialog/dialogStyles";
+export declare function panelMotionVariants(side: PanelSide): import("motion-dom").Variants;
+export declare function panelMotionTransition(side: PanelSide): import("motion-dom").Transition;
+//# sourceMappingURL=panelStyles.d.ts.map

package/dist/components/organisms/Panel/panelStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panelStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Panel/panelStyles.ts"],"names":[],"mappings":"AAOA,OAAO,EAGL,0BAA0B,EAE3B,MAAM,sBAAsB,CAAC;AAE9B,eAAO,MAAM,UAAU,2BAA4B,CAAC;AAEpD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpD,eAAO,MAAM,UAAU,6BAA8B,CAAC;AAEtD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpD,oFAAoF;AACpF,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAG7D,CAAC;AAEF,yFAAyF;AACzF,eAAO,MAAM,oBAAoB,QAAmD,CAAC;AAErF,eAAO,MAAM,iBAAiB,QAK7B,CAAC;AAEF,yFAAyF;AACzF,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,GAAG,MAAM,CAEzE;AAED,OAAO,EAAE,0BAA0B,IAAI,qBAAqB,EAAE,CAAC;AAE/D,OAAO,EAAE,6BAA6B,IAAI,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAEjG,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,SAAS,iCAElD;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,SAAS,mCAEpD"}

package/dist/components/organisms/Panel/panelStyles.js

@@ -0,0 +1,25 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { cardBaseClasses as t, cardLayoutShellClasses as n, cardLayoutShellTopClasses as r } from "../../molecules/Card/cardStyles.js";
+import { dialogBackdropClasses as i } from "../Dialog/dialogStyles.js";
+import { sheetPanelMotionTransition as a, sheetPanelMotionVariants as o, sheetPanelPlacementClasses as s, sheetPanelSizeClasses as c } from "../Sheet/sheetStyles.js";
+//#region src/components/organisms/Panel/panelStyles.ts
+var l = ["end", "start"], u = [
+	"sm",
+	"md",
+	"lg"
+], d = {
+	end: "fixed inset-0 z-[100] flex flex-row justify-end pointer-events-none",
+	start: "fixed inset-0 z-[100] flex flex-row justify-start pointer-events-none"
+}, f = e(i, "pointer-events-none"), p = e(t, n, r(), "pointer-events-auto relative z-[1] h-full max-h-full min-h-0 bg-surface shadow-soft-card");
+function m(e, t) {
+	return c[e][t];
+}
+function h(e) {
+	return o(e);
+}
+function g(e) {
+	return a(e);
+}
+//#endregion
+export { f as panelBackdropClasses, g as panelMotionTransition, h as panelMotionVariants, d as panelOverlayRootClasses, s as panelPlacementClasses, p as panelShellClasses, l as panelSides, m as panelSizeClasses, u as panelSizes };

package/dist/components/organisms/ScrollHorizontal/ScrollHorizontal.d.ts

@@ -0,0 +1,74 @@
+import { type ReactNode } from "react";
+import { ScrollHorizontalIntro } from "./ScrollHorizontalIntro";
+/** Layout-only — width and margin. Do not restyle the cards here. */
+export type ScrollHorizontalLayoutClassName = string;
+export interface ScrollHorizontalItem {
+    id: string;
+    /** Accessible name. Rendered for assistive tech only (`sr-only`). */
+    label: string;
+    /**
+     * CSS color for the solid tile. Pass a semantic token, for example
+     * `var(--color-brand)`. Omit to cycle the placeholder palette.
+     */
+    color?: string;
+}
+export interface ScrollHorizontalProps {
+    items: ScrollHorizontalItem[];
+    /**
+     * Optional section name. `sr-only` while the window is pinned (it stays the
+     * accessible name). Visible above the row when motion is reduced.
+     * Ignored when `intro` is set — the intro badge names the section instead.
+     */
+    heading?: ReactNode;
+    /**
+     * First panel of the track: a left-aligned statement, then the tiles.
+     * Pass **ScrollHorizontal.Intro**. Scroll translates the panel off to the left.
+     * Reduced motion renders it as a block above the native row. Replaces `heading`.
+     */
+    intro?: ReactNode;
+    /**
+     * After the last card is centered, keep the window pinned and grow that card
+     * until it fills the viewport. Default off — the track releases on the last card.
+     */
+    expandLast?: boolean;
+    /**
+     * Content for the full-bleed last tile. Mounted on the motion layer and, for
+     * reduced motion, in the static section. One of those hosts is hidden.
+     */
+    expanded?: ReactNode;
+    className?: ScrollHorizontalLayoutClassName;
+}
+/**
+ * Horizontal gallery driven by vertical scroll. The track is 300svh. A sticky
+ * svh window, one card wide and centered, holds the row. Scroll progress maps
+ * to translateX from the first card centered to the last.
+ *
+ * `expandLast` lengthens the track to 400svh. The horizontal travel still uses
+ * the first two pinned viewports. The third grows the last tile with a
+ * clip-path on a full-viewport layer, from the centered card to inset 0, and
+ * takes the radius to 0. The window then releases, so that tile scrolls away.
+ * The section box ends on that tile. Block padding after the section paints
+ * the page background between the tile and a following footer.
+ *
+ * `prefers-reduced-motion` and `MotionConfig` `reducedMotion="always"` skip
+ * the transform: the track height is auto, the window is not sticky, and the
+ * row scrolls natively on the inline axis. With `expandLast`, the last tile
+ * follows as a static `h-svh` section. `heading` is `sr-only` on the pinned
+ * window and visible above that scroller.
+ *
+ * `intro` (**ScrollHorizontal.Intro**) is the first panel. Its left edge is the
+ * page-grid content start (the same inset as `grid-page`), clear of the site
+ * nav, with the tiles to its right. Vertical scroll carries that panel off the
+ * left edge with the tiles. The badge names the section. Reduced motion
+ * stacks the same panel above the native row and keeps the inset.
+ *
+ * The server render and the hydration render both use the motion shell
+ * (`data-reduce="false"`). The OS query is read in `useLayoutEffect`, before
+ * paint. `motion-reduce:` classes cover that first paint without a markup mismatch.
+ */
+declare function ScrollHorizontalRoot({ items, heading, intro, expandLast, expanded, className, }: ScrollHorizontalProps): import("react").JSX.Element;
+export declare const ScrollHorizontal: typeof ScrollHorizontalRoot & {
+    Intro: typeof ScrollHorizontalIntro;
+};
+export type { ScrollHorizontalIntroAction, ScrollHorizontalIntroProps } from "./ScrollHorizontalIntro";
+//# sourceMappingURL=ScrollHorizontal.d.ts.map

package/dist/components/organisms/ScrollHorizontal/ScrollHorizontal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollHorizontal.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/ScrollHorizontal/ScrollHorizontal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAqBf,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAqBhE,qEAAqE;AACrE,MAAM,MAAM,+BAA+B,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,oBAAoB,EAAE,CAAC;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,+BAA+B,CAAC;CAC7C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,iBAAS,oBAAoB,CAAC,EAC5B,KAAK,EACL,OAAO,EACP,KAAK,EACL,UAAkB,EAClB,QAAQ,EACR,SAAS,GACV,EAAE,qBAAqB,+BAyQvB;AAED,eAAO,MAAM,gBAAgB;;CAE3B,CAAC;AAEH,YAAY,EAAE,2BAA2B,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/components/organisms/ScrollHorizontal/ScrollHorizontal.js

@@ -0,0 +1,163 @@
+"use client";
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { scrollHorizontalDistance as t, scrollHorizontalExpandAmount as n, scrollHorizontalExpandClip as r, scrollHorizontalExpandedOpacity as i, scrollHorizontalHorizontalEnd as a, scrollHorizontalItemColor as o, scrollHorizontalLeadFrame as ee, scrollHorizontalNominalExpandMetrics as s, scrollHorizontalNominalMetrics as c, scrollHorizontalParseGap as te, scrollHorizontalPeerOpacity as l, scrollHorizontalPhaseProgress as u, scrollHorizontalReadFrame as d, scrollHorizontalReadMetrics as f, scrollHorizontalReadTranslateX as ne, scrollHorizontalRestLeft as re, scrollHorizontalTranslateX as p } from "./scrollHorizontalMath.js";
+import { ScrollHorizontalIntroContext as m } from "./scrollHorizontalIntroContext.js";
+import { scrollHorizontalExpandFillClasses as ie, scrollHorizontalExpandLayerClasses as ae, scrollHorizontalExpandedSectionClasses as oe, scrollHorizontalExpandedSlotClasses as se, scrollHorizontalHeadingClasses as ce, scrollHorizontalIntroPanelClasses as le, scrollHorizontalIntroTrackClasses as ue, scrollHorizontalIntroWindowClasses as de, scrollHorizontalItemClasses as h, scrollHorizontalLabelClasses as g, scrollHorizontalRootClasses as fe, scrollHorizontalRootExpandClasses as pe, scrollHorizontalRowClasses as _, scrollHorizontalStickyClasses as me, scrollHorizontalWindowClasses as he } from "./scrollHorizontalStyles.js";
+import { ScrollHorizontalIntro as v } from "./ScrollHorizontalIntro.js";
+import { useContext as y, useId as b, useLayoutEffect as x, useRef as S, useState as ge } from "react";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
+import { MotionConfigContext as _e, motion as T, useMotionValue as E, useScroll as ve, useTransform as D } from "motion/react";
+//#region src/components/organisms/ScrollHorizontal/ScrollHorizontal.tsx
+function O({ items: v, heading: O, intro: k, expandLast: A = !1, expanded: j, className: ye }) {
+	let M = b(), N = b(), P = k != null && k !== !1, F = S(null), I = S(null), L = S(null), R = S(null), z = S(null), B = E(0), V = E(s(1440, 900)), [be, xe] = ge(!1), { reducedMotion: Se } = y(_e), H = be || Se === "always", U = a(A), W = Math.max(0, v.length - 1), G = v[W], K = G ? o(G.color, W) : "transparent", { scrollYProgress: q } = ve({
+		target: F,
+		offset: ["start start", "end end"]
+	}), J = D(() => p(u(q.get(), U), B.get(), !1)), Ce = D(() => {
+		if (!A) return "inset(0px)";
+		let e = q.get();
+		return r(u(e, U), n(e, U), V.get(), v.length);
+	}), Y = D(() => l(A ? n(q.get(), U) : 0)), X = D(() => i(A ? n(q.get(), U) : 0)), we = D(X, (e) => e > .9 ? "auto" : "none");
+	x(() => {
+		if (typeof window.matchMedia != "function") return;
+		let e = window.matchMedia("(prefers-reduced-motion: reduce)"), t = () => xe(e.matches);
+		return t(), e.addEventListener("change", t), () => e.removeEventListener("change", t);
+	}, []), x(() => {
+		let e = z.current, n = L.current, r = I.current;
+		if (!e || !n) {
+			B.set(0);
+			return;
+		}
+		let i = () => {
+			let i = R.current;
+			if (P && i && r) {
+				let t = d(r, e, n, window.innerWidth, window.innerHeight), a = ne(getComputedStyle(i).transform), o = r.getBoundingClientRect(), s = e.getBoundingClientRect().left - a - o.left, c = te(getComputedStyle(n).columnGap), l = t.cardWidth + (c > 0 ? c : t.pitch - t.cardWidth), u = n.querySelector("li:last-child"), f = Math.max(0, v.length - 1), p = u instanceof HTMLElement ? re(u, r, i) : s + f * l, m = ee({
+					...t,
+					cardLeft: s,
+					pitch: l
+				}, p, v.length);
+				B.set(m.distance), V.set(m.frame);
+				return;
+			}
+			let a = f(e, n), o = c(window.innerWidth), s = a.itemWidth > 0 ? a.itemWidth : o.itemWidth, l = a.itemWidth > 0 ? a.gap : o.gap;
+			B.set(t(v.length, s, l)), r && V.set(d(r, e, n, window.innerWidth, window.innerHeight));
+		};
+		if (i(), typeof ResizeObserver > "u") return;
+		let a = new ResizeObserver(i);
+		return a.observe(e), a.observe(n), r && a.observe(r), R.current && a.observe(R.current), () => a.disconnect();
+	}, [
+		B,
+		V,
+		P,
+		v.length
+	]);
+	let Z = A && !H, Q = P ? N : O ? M : void 0, $ = v.map((e, t) => {
+		let n = o(e.color, t);
+		return Z && t !== W ? /* @__PURE__ */ C(T.li, {
+			ref: t === 0 ? z : void 0,
+			className: h,
+			style: {
+				"--scroll-horizontal-color": n,
+				opacity: Y
+			},
+			children: /* @__PURE__ */ C("span", {
+				className: g,
+				children: e.label
+			})
+		}, e.id) : /* @__PURE__ */ C("li", {
+			ref: t === 0 ? z : void 0,
+			className: h,
+			style: { "--scroll-horizontal-color": n },
+			children: /* @__PURE__ */ C("span", {
+				className: g,
+				children: e.label
+			})
+		}, e.id);
+	});
+	return /* @__PURE__ */ w("section", {
+		ref: F,
+		"data-scroll-horizontal": "",
+		"data-expand-last": A ? "true" : "false",
+		"data-reduce": H ? "true" : "false",
+		"data-has-intro": P ? "true" : "false",
+		"aria-labelledby": Q,
+		"aria-label": Q ? void 0 : "Projects",
+		className: e(A ? pe : fe, ye),
+		children: [/* @__PURE__ */ w("div", {
+			ref: I,
+			className: e(me, P && "[container-type:inline-size]"),
+			children: [
+				O && !P ? /* @__PURE__ */ C("div", {
+					id: M,
+					className: ce,
+					children: O
+				}) : null,
+				P ? /* @__PURE__ */ w(T.div, {
+					ref: R,
+					"data-scroll-horizontal-track": "",
+					className: ue,
+					style: H ? void 0 : { x: J },
+					children: [/* @__PURE__ */ C(T.div, {
+						"data-scroll-horizontal-intro": "",
+						className: le,
+						style: Z ? { opacity: Y } : void 0,
+						children: /* @__PURE__ */ C(m.Provider, {
+							value: N,
+							children: k
+						})
+					}), /* @__PURE__ */ C("div", {
+						className: de,
+						children: /* @__PURE__ */ C("ul", {
+							ref: L,
+							className: _,
+							children: $
+						})
+					})]
+				}) : /* @__PURE__ */ C("div", {
+					className: he,
+					children: /* @__PURE__ */ C(T.ul, {
+						ref: L,
+						className: _,
+						style: H ? void 0 : { x: J },
+						children: $
+					})
+				}),
+				A && G ? /* @__PURE__ */ C(T.div, {
+					"aria-hidden": "true",
+					"data-scroll-horizontal-expanded": "",
+					className: ae,
+					style: {
+						backgroundColor: K,
+						clipPath: H ? "none" : Ce
+					}
+				}) : null,
+				A && j ? /* @__PURE__ */ C(T.div, {
+					"data-scroll-horizontal-slot": "",
+					className: se,
+					style: H ? void 0 : {
+						opacity: X,
+						pointerEvents: we
+					},
+					children: j
+				}) : null
+			]
+		}), A && G ? /* @__PURE__ */ w("div", {
+			"data-scroll-horizontal-expanded": "",
+			className: oe,
+			style: {
+				"--scroll-horizontal-color": K,
+				backgroundColor: "var(--scroll-horizontal-color)"
+			},
+			children: [/* @__PURE__ */ C("span", {
+				className: g,
+				children: G.label
+			}), j ? /* @__PURE__ */ C("div", {
+				className: e(ie, "z-10"),
+				children: j
+			}) : null]
+		}) : null]
+	});
+}
+var k = Object.assign(O, { Intro: v });
+//#endregion
+export { k as ScrollHorizontal };