@thewhatmatters/wmds 0.4.7 → 0.4.9

package/dist/components/molecules/TileGrid/TileGrid.js

@@ -0,0 +1,94 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { motionTransitionProp as t } from "../../../lib/motion.js";
+import { tileGridBreakpoints as n, tileGridDefaultColumns as r, tileGridEmptyClasses as i, tileGridItemClasses as a, tileGridItemInnerClasses as o, tileGridLayouts as s, tileGridListClasses as c, tileGridRootClasses as l } from "./tileGridStyles.js";
+import { tileGridColumnCount as u, tileGridResolveColumns as d, tileGridRowSpan as f } from "./tileGridMath.js";
+import { Children as p, forwardRef as m, isValidElement as h, useLayoutEffect as g, useMemo as _, useRef as v } from "react";
+import { jsx as y } from "react/jsx-runtime";
+import { AnimatePresence as b, motion as x, useReducedMotion as S } from "motion/react";
+//#region src/components/molecules/TileGrid/TileGrid.tsx
+function C({ layout: t = "masonry", columns: n, empty: r, busy: a = !1, "aria-label": o, "aria-labelledby": s, children: m, className: x }) {
+	let S = v(null), C = p.toArray(m), w = C.length > 0, T = C.map((e) => h(e) ? e.key : "").join("|"), E = d(n), D = _(() => ({
+		"--tile-grid-cols": E.base,
+		"--tile-grid-cols-sm": E.sm,
+		"--tile-grid-cols-md": E.md,
+		"--tile-grid-cols-lg": E.lg,
+		"--tile-grid-cols-xl": E.xl
+	}), [
+		E.base,
+		E.sm,
+		E.md,
+		E.lg,
+		E.xl
+	]);
+	return g(() => {
+		let e = S.current;
+		if (e == null) return;
+		let n = () => [...e.children].filter((e) => e instanceof HTMLElement);
+		if (t !== "masonry" || typeof ResizeObserver > "u") {
+			e.removeAttribute("data-packed");
+			for (let e of n()) e.style.removeProperty("grid-row-end");
+			return;
+		}
+		let r = () => {
+			let t = u(getComputedStyle(e).gridTemplateColumns) > 1;
+			for (let e of n()) {
+				let n = e.firstElementChild;
+				if (t && n != null) {
+					let t = n instanceof HTMLElement ? n.offsetHeight : n.getBoundingClientRect().height;
+					e.style.gridRowEnd = `span ${f(t, 4)}`;
+				} else e.style.removeProperty("grid-row-end");
+			}
+			e.toggleAttribute("data-packed", t);
+		};
+		r();
+		let i = 0, a = new ResizeObserver(() => {
+			cancelAnimationFrame(i), i = requestAnimationFrame(r);
+		});
+		a.observe(e);
+		for (let e of n()) e.firstElementChild != null && a.observe(e.firstElementChild);
+		return () => {
+			cancelAnimationFrame(i), a.disconnect();
+		};
+	}, [t, T]), /* @__PURE__ */ y("div", {
+		className: e(l, x),
+		"data-tile-grid": "",
+		"data-layout": t,
+		children: w ? /* @__PURE__ */ y("ul", {
+			ref: S,
+			role: "list",
+			"aria-label": o,
+			"aria-labelledby": s,
+			"aria-busy": a || void 0,
+			className: c,
+			style: D,
+			children: /* @__PURE__ */ y(b, {
+				initial: !1,
+				mode: "popLayout",
+				children: m
+			})
+		}) : r == null ? null : /* @__PURE__ */ y("div", {
+			className: i,
+			"data-tile-grid-empty": "",
+			children: r
+		})
+	});
+}
+var w = m(function({ children: n, className: r }, i) {
+	let s = S() ?? !1;
+	return /* @__PURE__ */ y(x.li, {
+		ref: i,
+		layout: !s && "position",
+		initial: !s && { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: s ? void 0 : { opacity: 0 },
+		transition: t("medium"),
+		className: e(a, r),
+		children: /* @__PURE__ */ y("div", {
+			className: o,
+			children: n
+		})
+	});
+}), T = Object.assign(C, { Item: w });
+//#endregion
+export { T as TileGrid, n as tileGridBreakpoints, r as tileGridDefaultColumns, s as tileGridLayouts };

package/dist/components/molecules/TileGrid/tileGridMath.d.ts

@@ -0,0 +1,8 @@
+import { type TileGridBreakpoint, type TileGridColumns } from "./tileGridStyles";
+/** Columns at every breakpoint — each one left out takes the one below it; at least 1, whole. */
+export declare function tileGridResolveColumns(columns?: TileGridColumns): Record<TileGridBreakpoint, number>;
+/** How many row tracks an item of this height takes in a packed grid. */
+export declare function tileGridRowSpan(heightPx: number, unitPx: number): number;
+/** The column count a computed `grid-template-columns` describes ("285px 285px 285px" → 3). */
+export declare function tileGridColumnCount(template: string): number;
+//# sourceMappingURL=tileGridMath.d.ts.map

package/dist/components/molecules/TileGrid/tileGridMath.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tileGridMath.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/TileGrid/tileGridMath.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,kBAAkB,EACvB,KAAK,eAAe,EACrB,MAAM,kBAAkB,CAAC;AAE1B,iGAAiG;AACjG,wBAAgB,sBAAsB,CACpC,OAAO,GAAE,eAAwC,GAChD,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAWpC;AAED,yEAAyE;AACzE,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAExE;AAED,+FAA+F;AAC/F,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAG5D"}

package/dist/components/molecules/TileGrid/tileGridMath.js

@@ -0,0 +1,20 @@
+"use client";
+import { tileGridBreakpoints as e, tileGridDefaultColumns as t } from "./tileGridStyles.js";
+//#region src/components/molecules/TileGrid/tileGridMath.ts
+function n(n = t) {
+	let r = typeof n == "number" ? { base: n } : n, i = 1, a = {};
+	for (let t of e) {
+		let e = r[t];
+		e != null && Number.isFinite(e) && (i = Math.max(1, Math.round(e))), a[t] = i;
+	}
+	return a;
+}
+function r(e, t) {
+	return Math.max(1, Math.ceil(e / t));
+}
+function i(e) {
+	let t = e.trim().split(/\s+/).filter((e) => e !== "" && e !== "none");
+	return Math.max(1, t.length);
+}
+//#endregion
+export { i as tileGridColumnCount, n as tileGridResolveColumns, r as tileGridRowSpan };

package/dist/components/molecules/TileGrid/tileGridStyles.d.ts

@@ -0,0 +1,33 @@
+export declare const tileGridLayouts: readonly ["masonry", "uniform"];
+/**
+ * `masonry` (default) — tiles keep their heights and pack upward. `uniform` — rows of equal
+ * height; pair it with a fixed `ratio` on the tiles.
+ */
+export type TileGridLayout = (typeof tileGridLayouts)[number];
+export declare const tileGridBreakpoints: readonly ["base", "sm", "md", "lg", "xl"];
+export type TileGridBreakpoint = (typeof tileGridBreakpoints)[number];
+/** Columns per breakpoint. A breakpoint left out keeps the one below it. */
+export type TileGridColumns = number | Partial<Record<TileGridBreakpoint, number>>;
+/** One column on phones, two from `sm`, three from `lg` — for a 9-column main area beside a rail. */
+export declare const tileGridDefaultColumns: {
+    readonly base: 1;
+    readonly sm: 2;
+    readonly lg: 3;
+};
+/**
+ * A packed grid's row track, in px (`--spacing`). A tile spans as many as its height needs, rounded
+ * up, so the space under a tile is the row gap plus less than this much (32px to just under 36px).
+ */
+export declare const tileGridRowUnitPx = 4;
+export declare const tileGridRootClasses = "w-full min-w-0";
+/**
+ * Columns on the page grid's gutter. The row gap is padding under each item, not a grid gap: a
+ * packed grid has 4px row tracks and no gap between them. The margin takes the last row's back.
+ */
+export declare const tileGridListClasses: string;
+export declare const tileGridItemClasses = "min-w-0";
+/** What is measured: the tile and the row gap under it. */
+export declare const tileGridItemInnerClasses = "flex min-w-0 flex-col pb-[var(--tile-grid-row-gap)]";
+/** Empty state — in the tiles' place. */
+export declare const tileGridEmptyClasses = "py-8";
+//# sourceMappingURL=tileGridStyles.d.ts.map

package/dist/components/molecules/TileGrid/tileGridStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tileGridStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/TileGrid/tileGridStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,iCAAkC,CAAC;AAE/D;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9D,eAAO,MAAM,mBAAmB,2CAA4C,CAAC;AAE7E,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtE,4EAA4E;AAC5E,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC,CAAC;AAEnF,qGAAqG;AACrG,eAAO,MAAM,sBAAsB;;;;CAA+D,CAAC;AAEnG;;;GAGG;AACH,eAAO,MAAM,iBAAiB,IAAI,CAAC;AAEnC,eAAO,MAAM,mBAAmB,mBAAmB,CAAC;AAEpD;;;GAGG;AACH,eAAO,MAAM,mBAAmB,QAQ/B,CAAC;AAEF,eAAO,MAAM,mBAAmB,YAAY,CAAC;AAE7C,2DAA2D;AAC3D,eAAO,MAAM,wBAAwB,wDAAwD,CAAC;AAE9F,yCAAyC;AACzC,eAAO,MAAM,oBAAoB,SAAS,CAAC"}

package/dist/components/molecules/TileGrid/tileGridStyles.js

@@ -0,0 +1,16 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+//#region src/components/molecules/TileGrid/tileGridStyles.ts
+var t = ["masonry", "uniform"], n = [
+	"base",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+], r = {
+	base: 1,
+	sm: 2,
+	lg: 3
+}, i = "w-full min-w-0", a = e("relative m-0 -mb-[var(--tile-grid-row-gap)] grid list-none items-start p-0 [--tile-grid-row-gap:2rem]", "gap-x-[var(--grid-column-gap,1.5rem)] gap-y-0", "grid-cols-[repeat(var(--tile-grid-cols),minmax(0,1fr))] sm:grid-cols-[repeat(var(--tile-grid-cols-sm),minmax(0,1fr))]", "md:grid-cols-[repeat(var(--tile-grid-cols-md),minmax(0,1fr))] lg:grid-cols-[repeat(var(--tile-grid-cols-lg),minmax(0,1fr))]", "xl:grid-cols-[repeat(var(--tile-grid-cols-xl),minmax(0,1fr))]", "data-[packed]:auto-rows-[4px]"), o = "min-w-0", s = "flex min-w-0 flex-col pb-[var(--tile-grid-row-gap)]", c = "py-8";
+//#endregion
+export { n as tileGridBreakpoints, r as tileGridDefaultColumns, c as tileGridEmptyClasses, o as tileGridItemClasses, s as tileGridItemInnerClasses, t as tileGridLayouts, a as tileGridListClasses, i as tileGridRootClasses };

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

@@ -20,11 +20,19 @@ export interface DialogContentProps {
     description?: ReactNode;
     /** Leading header slot — icon, **Badge**, **Status** (**Card.Header** `start`). */
     headerStart?: ReactNode;
+    /** Actions before the close — **IconButton** `size="sm"`, for example previous and next. */
+    headerEnd?: ReactNode;
     /** Header dismiss — default `true` for generic dialogs. */
     showClose?: boolean;
     /** Footer action cluster — compose **Button** roles. */
     footer?: ReactNode;
+    /**
+     * `sm` / `md` (default) / `lg` — a centered panel of that width. `full` — the window less a
+     * margin (up to 90rem × 60rem), and the whole screen on phones: media viewers and detail views.
+     */
     size?: DialogSize;
+    /** Names the dialog when there is no `title` — the id of a heading inside the body. */
+    "aria-labelledby"?: string;
     className?: DialogLayoutClassName;
     children?: ReactNode;
 }
@@ -33,16 +41,18 @@ export interface DialogPortalProps {
     "aria-labelledby"?: string;
     "aria-describedby"?: string;
     initialFocusSelector?: string;
+    /** Fill the window (the whole screen on phones) — **Dialog.Content** `size="full"`. */
+    fill?: boolean;
     children: ReactNode;
 }
 /** Portal + scrim + focus trap — shared by **Dialog.Content** and **AlertDialog**. */
-export declare function DialogPortal({ role, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, initialFocusSelector, children, }: DialogPortalProps): import("react").ReactPortal | null;
+export declare function DialogPortal({ role, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, initialFocusSelector, fill, children, }: DialogPortalProps): import("react").ReactPortal | null;
 declare function DialogRoot({ open, onOpenChange, dismissOnBackdrop, dismissOnEscape, children, }: DialogProps): import("react").JSX.Element;
 declare function DialogTrigger({ children, className, }: {
     children: ReactNode;
     className?: DialogLayoutClassName;
 }): import("react").JSX.Element;
-declare function DialogContent({ title, description, headerStart, showClose, footer, size, className, children, }: DialogContentProps): import("react").JSX.Element;
+declare function DialogContent({ title, description, headerStart, showClose, headerEnd, footer, size, "aria-labelledby": ariaLabelledBy, className, children, }: DialogContentProps): import("react").JSX.Element;
 /**
  * Modal overlay — portal scrim, focus trap, scroll lock; composes **Card** shell.
  * Composes **Card** shell + portal scrim; use **AlertDialog** for blocking confirms.

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAef,OAAO,EAIL,WAAW,EAMX,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AAExB,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,0EAA0E;AAC1E,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAE3C,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,kFAAkF;IAClF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,wCAAwC;IACxC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,mDAAmD;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,mFAAmF;IACnF,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wDAAwD;IACxD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,QAAQ,GAAG,aAAa,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,sFAAsF;AACtF,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,oBAAoB,EACpB,QAAQ,GACT,EAAE,iBAAiB,sCA6GnB;AAED,iBAAS,UAAU,CAAC,EAClB,IAAI,EACJ,YAAY,EACZ,iBAAwB,EACxB,eAAsB,EACtB,QAAQ,GACT,EAAE,WAAW,+BAmBb;AAED,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,qBAAqB,CAAC;CACnC,+BAmBA;AAED,iBAAS,aAAa,CAAC,EACrB,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAAgB,EAChB,MAAM,EACN,IAAW,EACX,SAAS,EACT,QAAQ,GACT,EAAE,kBAAkB,+BAsDpB;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM;;;CAGjB,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAef,OAAO,EAML,WAAW,EAMX,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AAExB,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,0EAA0E;AAC1E,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAE3C,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,kFAAkF;IAClF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,wCAAwC;IACxC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,mDAAmD;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,mFAAmF;IACnF,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wDAAwD;IACxD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uFAAuF;IACvF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,QAAQ,GAAG,aAAa,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uFAAuF;IACvF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,sFAAsF;AACtF,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,oBAAoB,EACpB,IAAY,EACZ,QAAQ,GACT,EAAE,iBAAiB,sCA6GnB;AAED,iBAAS,UAAU,CAAC,EAClB,IAAI,EACJ,YAAY,EACZ,iBAAwB,EACxB,eAAsB,EACtB,QAAQ,GACT,EAAE,WAAW,+BAmBb;AAED,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,qBAAqB,CAAC;CACnC,+BAmBA;AAED,iBAAS,aAAa,CAAC,EACrB,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAAgB,EAChB,SAAS,EACT,MAAM,EACN,IAAW,EACX,iBAAiB,EAAE,cAAc,EACjC,SAAS,EACT,QAAQ,GACT,EAAE,kBAAkB,+BAwDpB;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM;;;CAGjB,CAAC"}

package/dist/components/organisms/Dialog/Dialog.js

@@ -11,58 +11,58 @@ import { jsx as S, jsxs as C } from "react/jsx-runtime";
 import { AnimatePresence as w, motion as T } from "motion/react";
 import { createPortal as E } from "react-dom";
 //#region src/components/organisms/Dialog/Dialog.tsx
-function D({ role: e, "aria-labelledby": n, "aria-describedby": a, initialFocusSelector: o, children: s }) {
-	let { open: c, onOpenChange: l, dismissOnBackdrop: u, dismissOnEscape: d, triggerRef: f } = _("DialogPortal"), g = x(null), v = x(null), D = y(() => {
-		l(!1);
-	}, [l]);
+function D({ role: n, "aria-labelledby": a, "aria-describedby": o, initialFocusSelector: s, fill: c = !1, children: l }) {
+	let { open: u, onOpenChange: d, dismissOnBackdrop: f, dismissOnEscape: g, triggerRef: v } = _("DialogPortal"), D = x(null), O = x(null), k = y(() => {
+		d(!1);
+	}, [d]);
 	b(() => {
-		if (!c) return;
-		v.current = f.current ?? document.activeElement;
-		let e = m(), t = g.current, n = () => {};
+		if (!u) return;
+		O.current = v.current ?? document.activeElement;
+		let e = m(), t = D.current, n = () => {};
 		return t != null && (n = h(t), window.requestAnimationFrame(() => {
-			p(t, o);
+			p(t, s);
 		})), () => {
-			n(), e(), v.current?.focus?.();
+			n(), e(), O.current?.focus?.();
 		};
 	}, [
-		o,
-		c,
-		f
+		s,
+		u,
+		v
 	]), b(() => {
-		if (!c || !d) return;
+		if (!u || !g) return;
 		function e(e) {
-			e.key === "Escape" && (e.preventDefault(), D());
+			e.key === "Escape" && (e.preventDefault(), k());
 		}
 		return document.addEventListener("keydown", e), () => {
 			document.removeEventListener("keydown", e);
 		};
 	}, [
-		D,
-		d,
-		c
+		k,
+		g,
+		u
 	]);
-	function O(e) {
-		if (!u) return;
+	function A(e) {
+		if (!f) return;
 		let t = e.target;
-		g.current?.contains(t) || D();
+		D.current?.contains(t) || k();
 	}
-	return typeof document > "u" ? null : E(/* @__PURE__ */ S(w, { children: c ? /* @__PURE__ */ C(T.div, {
-		className: i,
+	return typeof document > "u" ? null : E(/* @__PURE__ */ S(w, { children: u ? /* @__PURE__ */ C(T.div, {
+		className: e(i, c && "max-md:p-0 md:p-6"),
 		initial: { opacity: 0 },
 		animate: { opacity: 1 },
 		exit: { opacity: 0 },
 		transition: t("medium"),
-		onMouseDown: O,
+		onMouseDown: A,
 		children: [/* @__PURE__ */ S("div", {
 			className: r,
 			"aria-hidden": "true"
 		}), /* @__PURE__ */ S(T.div, {
-			ref: g,
-			className: "relative z-[1] flex w-full justify-center",
-			role: e,
+			ref: D,
+			className: e("relative z-[1] flex w-full justify-center", c && "h-full items-center"),
+			role: n,
 			"aria-modal": "true",
-			"aria-labelledby": n,
-			"aria-describedby": a,
+			"aria-labelledby": a,
+			"aria-describedby": o,
 			initial: {
 				opacity: 0,
 				scale: .96,
@@ -82,7 +82,7 @@ function D({ role: e, "aria-labelledby": n, "aria-describedby": a, initialFocusS
 			onMouseDown: (e) => {
 				e.stopPropagation();
 			},
-			children: s
+			children: l
 		})]
 	}) : null }), document.body);
 }
@@ -113,38 +113,40 @@ function k({ children: e, className: t }) {
 		children: e
 	});
 }
-function A({ title: t, description: r, headerStart: i, showClose: s = !0, footer: p, size: m = "md", className: h, children: g }) {
-	let { titleId: v, descriptionId: y, onOpenChange: b } = _("Dialog.Content"), x = t != null, w = r != null, T = g != null || !x && w, E = p != null, O = T || E;
+function A({ title: t, description: r, headerStart: i, showClose: s = !0, headerEnd: p, footer: m, size: h = "md", "aria-labelledby": g, className: v, children: y }) {
+	let { titleId: b, descriptionId: x, onOpenChange: w } = _("Dialog.Content"), T = t != null, E = r != null, O = y != null || !T && E, k = m != null, A = O || k;
 	return /* @__PURE__ */ S(D, {
 		role: "dialog",
-		"aria-labelledby": x ? v : void 0,
-		"aria-describedby": w ? y : void 0,
+		"aria-labelledby": T ? b : g,
+		"aria-describedby": E ? x : void 0,
+		fill: h === "full",
 		children: /* @__PURE__ */ C(n, {
 			padding: "none",
-			bodyTerminal: p == null,
-			className: e(o[m], c, d, a, h),
+			bodyTerminal: m == null,
+			className: e(o[h], c, h === "full" ? void 0 : d, a, v),
 			children: [
 				/* @__PURE__ */ S(f, {
-					titleId: v,
-					descriptionId: y,
+					titleId: b,
+					descriptionId: x,
 					title: t,
 					description: r,
 					headerStart: i,
+					headerEnd: p,
 					showClose: s,
 					closeLabel: "Close dialog",
-					onClose: () => b(!1)
+					onClose: () => w(!1)
 				}),
-				O ? /* @__PURE__ */ C("div", {
+				A ? /* @__PURE__ */ C("div", {
 					className: l,
-					children: [!x && w ? /* @__PURE__ */ S("p", {
-						id: y,
+					children: [!T && E ? /* @__PURE__ */ S("p", {
+						id: x,
 						className: "text-muted",
 						children: r
-					}) : null, g]
+					}) : null, y]
 				}) : null,
-				E ? /* @__PURE__ */ S("footer", {
+				k ? /* @__PURE__ */ S("footer", {
 					className: u,
-					children: p
+					children: m
 				}) : null
 			]
 		})

package/dist/components/organisms/Dialog/OverlayPanelHeader.d.ts

@@ -10,6 +10,8 @@ export interface OverlayPanelHeaderProps {
     descriptionClassName?: string;
     /** Leading slot — Lucide glyph, **Badge**, **Status**; same role as **Card.Header** `start`. */
     headerStart?: ReactNode;
+    /** Actions before the close — **IconButton** `size="sm"`, for example previous and next. */
+    headerEnd?: ReactNode;
     showClose?: boolean;
     closeLabel?: string;
     onClose?: () => void;
@@ -17,5 +19,5 @@ export interface OverlayPanelHeaderProps {
     delineated?: boolean;
     className?: string;
 }
-export declare function OverlayPanelHeader({ titleId, descriptionId, title, description, titleClassName, descriptionClassName, headerStart, showClose, closeLabel, onClose, delineated, className, }: OverlayPanelHeaderProps): import("react").JSX.Element | null;
+export declare function OverlayPanelHeader({ titleId, descriptionId, title, description, titleClassName, descriptionClassName, headerStart, headerEnd, showClose, closeLabel, onClose, delineated, className, }: OverlayPanelHeaderProps): import("react").JSX.Element | null;
 //# sourceMappingURL=OverlayPanelHeader.d.ts.map

package/dist/components/organisms/Dialog/OverlayPanelHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayPanelHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Dialog/OverlayPanelHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAiBvC,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,4FAA4F;IAC5F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4DAA4D;IAC5D,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gGAAgG;IAChG,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mFAAmF;IACnF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,aAAa,EACb,KAAK,EACL,WAAW,EACX,cAAiC,EACjC,oBAA0C,EAC1C,WAAW,EACX,SAAgB,EAChB,UAAoB,EACpB,OAAO,EACP,UAAkB,EAClB,SAAS,GACV,EAAE,uBAAuB,sCA4DzB"}
+{"version":3,"file":"OverlayPanelHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Dialog/OverlayPanelHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAiBvC,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,4FAA4F;IAC5F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4DAA4D;IAC5D,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gGAAgG;IAChG,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mFAAmF;IACnF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,aAAa,EACb,KAAK,EACL,WAAW,EACX,cAAiC,EACjC,oBAA0C,EAC1C,WAAW,EACX,SAAS,EACT,SAAgB,EAChB,UAAoB,EACpB,OAAO,EACP,UAAkB,EAClB,SAAS,GACV,EAAE,uBAAuB,sCAiEzB"}

package/dist/components/organisms/Dialog/OverlayPanelHeader.js

@@ -7,44 +7,47 @@ import { overlayPanelHeaderClasses as a, overlayPanelHeaderDelineatedInnerClasse
 import { X as u } from "lucide-react";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/organisms/Dialog/OverlayPanelHeader.tsx
-function p({ titleId: p, descriptionId: m, title: h, description: g, titleClassName: _ = r, descriptionClassName: v = n, headerStart: y, showClose: b = !0, closeLabel: x = "Close", onClose: S, delineated: C = !1, className: w }) {
-	let T = h != null, E = g != null;
-	if (!T && !b && y == null) return null;
-	let D = /* @__PURE__ */ d(i.Header, {
-		className: e(a, C ? o : void 0, w),
-		start: y != null || T ? /* @__PURE__ */ f("div", {
+function p({ titleId: p, descriptionId: m, title: h, description: g, titleClassName: _ = r, descriptionClassName: v = n, headerStart: y, headerEnd: b, showClose: x = !0, closeLabel: S = "Close", onClose: C, delineated: w = !1, className: T }) {
+	let E = h != null, D = g != null;
+	if (!E && !x && y == null && b == null) return null;
+	let O = /* @__PURE__ */ d(i.Header, {
+		className: e(a, w ? o : void 0, T),
+		start: y != null || E ? /* @__PURE__ */ f("div", {
 			className: c,
 			children: [y == null ? null : /* @__PURE__ */ d("div", {
 				className: l,
 				children: y
-			}), T ? /* @__PURE__ */ f("div", {
+			}), E ? /* @__PURE__ */ f("div", {
 				className: "flex min-w-0 flex-col gap-0",
 				children: [/* @__PURE__ */ d("h2", {
 					id: p,
 					className: _,
 					children: h
-				}), E ? /* @__PURE__ */ d("p", {
+				}), D ? /* @__PURE__ */ d("p", {
 					id: m,
 					className: v,
 					children: g
 				}) : null]
 			}) : null]
 		}) : null,
-		end: b ? /* @__PURE__ */ d(t, {
-			size: "sm",
-			role: "ghost",
-			icon: /* @__PURE__ */ d(u, { strokeWidth: 2 }),
-			"aria-label": x,
-			onClick: () => S?.()
+		end: x || b != null ? /* @__PURE__ */ f("div", {
+			className: "flex items-center gap-1",
+			children: [b, x ? /* @__PURE__ */ d(t, {
+				size: "sm",
+				role: "ghost",
+				icon: /* @__PURE__ */ d(u, { strokeWidth: 2 }),
+				"aria-label": S,
+				onClick: () => C?.()
+			}) : null]
 		}) : null
 	});
-	return C ? /* @__PURE__ */ f("div", {
+	return w ? /* @__PURE__ */ f("div", {
 		className: e(a, "w-full"),
-		children: [D, /* @__PURE__ */ d("hr", {
+		children: [O, /* @__PURE__ */ d("hr", {
 			className: s,
 			"aria-hidden": "true"
 		})]
-	}) : D;
+	}) : O;
 }
 //#endregion
 export { p as OverlayPanelHeader };

package/dist/components/organisms/Dialog/dialogStyles.d.ts

@@ -1,4 +1,4 @@
-export declare const dialogSizes: readonly ["sm", "md", "lg"];
+export declare const dialogSizes: readonly ["sm", "md", "lg", "full"];
 export type DialogSize = (typeof dialogSizes)[number];
 /** Full-viewport stack — backdrop + centered panel. */
 export declare const dialogOverlayRootClasses = "fixed inset-0 z-[100] flex items-center justify-center p-4";
@@ -6,6 +6,10 @@ export declare const dialogOverlayRootClasses = "fixed inset-0 z-[100] flex item
 export declare const dialogBackdropClasses: string;
 /** Centered panel width — layout-only on the Card shell. */
 export declare const dialogPanelSizeClasses: Record<DialogSize, string>;
+/** `size="full"` — no margin around the panel on phones, a wider one from tablet up. */
+export declare const dialogOverlayRootFullClasses = "max-md:p-0 md:p-6";
+/** `size="full"` — the panel's box fills the overlay, so the Card inside can take its height. */
+export declare const dialogPanelBoxFullClasses = "h-full items-center";
 /** Dialog body copy — typography only; horizontal inset comes from section stack / header. */
 export declare const dialogBodyCopyClasses: string;
 /** Muted copy in the dialog body slot — shared by **Dialog** and **AlertDialog**. */

package/dist/components/organisms/Dialog/dialogStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialogStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Dialog/dialogStyles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,WAAW,6BAA8B,CAAC;AAEvD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD,uDAAuD;AACvD,eAAO,MAAM,wBAAwB,+DAA+D,CAAC;AAErG,uCAAuC;AACvC,eAAO,MAAM,qBAAqB,QAIjC,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAI7D,CAAC;AAEF,8FAA8F;AAC9F,eAAO,MAAM,qBAAqB,QAAyC,CAAC;AAE5E,qFAAqF;AACrF,eAAO,MAAM,sBAAsB,QAA0C,CAAC;AAE9E,sFAAsF;AACtF,eAAO,MAAM,uBAAuB,QAAmB,CAAC;AAExD,qGAAqG;AACrG,eAAO,MAAM,iBAAiB,QAAoC,CAAC;AAEnE,yEAAyE;AACzE,eAAO,MAAM,mBAAmB,QAG/B,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,wBAAwB,QAAsB,CAAC;AAE5D,4CAA4C;AAC5C,eAAO,MAAM,0BAA0B,iDAAiD,CAAC;AAEzF;;;GAGG;AACH,eAAO,MAAM,yBAAyB,0CAA0C,CAAC;AAEjF,qEAAqE;AACrE,eAAO,MAAM,4BAA4B,2BAA2B,CAAC;AAErE,eAAO,MAAM,yBAAyB,aAAa,CAAC;AAEpD,iGAAiG;AACjG,eAAO,MAAM,2BAA2B,mDAAmD,CAAC;AAE5F,eAAO,MAAM,iCAAiC,QAA8C,CAAC;AAE7F,eAAO,MAAM,iCAAiC,QAA8C,CAAC;AAE7F,iGAAiG;AACjG,eAAO,MAAM,wCAAwC,QAGpD,CAAC;AAEF,6DAA6D;AAC7D,eAAO,MAAM,wCAAwC,SAAS,CAAC;AAE/D,uGAAuG;AACvG,eAAO,MAAM,mCAAmC,QAG/C,CAAC;AAEF,mFAAmF;AACnF,eAAO,MAAM,qCAAqC,0CACT,CAAC;AAE1C,qDAAqD;AACrD,eAAO,MAAM,kCAAkC,wGACwD,CAAC;AAExG,qDAAqD;AACrD,eAAO,MAAM,wBAAwB,QAA+C,CAAC;AAErF,sEAAsE;AACtE,eAAO,MAAM,wBAAwB,gCAAgC,CAAC;AAEtE,eAAO,MAAM,+BAA+B,QAAyC,CAAC;AAEtF,eAAO,MAAM,6BAA6B,QAIzC,CAAC;AAEF,eAAO,MAAM,yBAAyB,QAAsC,CAAC;AAE7E,2GAA2G;AAC3G,eAAO,MAAM,uBAAuB,UAAU,CAAC;AAE/C,kFAAkF;AAClF,eAAO,MAAM,mCAAmC,QAG/C,CAAC;AAEF,mDAAmD;AACnD,eAAO,MAAM,+BAA+B,QAAwC,CAAC;AAErF,2DAA2D;AAC3D,eAAO,MAAM,wCAAwC,oBAAoB,CAAC;AAE1E,+DAA+D;AAC/D,eAAO,MAAM,wCAAwC,QAGpD,CAAC;AAEF,6EAA6E;AAC7E,eAAO,MAAM,mCAAmC,QAG/C,CAAC;AAEF,yFAAyF;AACzF,eAAO,MAAM,8BAA8B,QAG1C,CAAC"}
+{"version":3,"file":"dialogStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Dialog/dialogStyles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,WAAW,qCAAsC,CAAC;AAE/D,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD,uDAAuD;AACvD,eAAO,MAAM,wBAAwB,+DAA+D,CAAC;AAErG,uCAAuC;AACvC,eAAO,MAAM,qBAAqB,QAIjC,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAM7D,CAAC;AAEF,wFAAwF;AACxF,eAAO,MAAM,4BAA4B,sBAAsB,CAAC;AAEhE,iGAAiG;AACjG,eAAO,MAAM,yBAAyB,wBAAwB,CAAC;AAE/D,8FAA8F;AAC9F,eAAO,MAAM,qBAAqB,QAAyC,CAAC;AAE5E,qFAAqF;AACrF,eAAO,MAAM,sBAAsB,QAA0C,CAAC;AAE9E,sFAAsF;AACtF,eAAO,MAAM,uBAAuB,QAAmB,CAAC;AAExD,qGAAqG;AACrG,eAAO,MAAM,iBAAiB,QAAoC,CAAC;AAEnE,yEAAyE;AACzE,eAAO,MAAM,mBAAmB,QAG/B,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,wBAAwB,QAAsB,CAAC;AAE5D,4CAA4C;AAC5C,eAAO,MAAM,0BAA0B,iDAAiD,CAAC;AAEzF;;;GAGG;AACH,eAAO,MAAM,yBAAyB,0CAA0C,CAAC;AAEjF,qEAAqE;AACrE,eAAO,MAAM,4BAA4B,2BAA2B,CAAC;AAErE,eAAO,MAAM,yBAAyB,aAAa,CAAC;AAEpD,iGAAiG;AACjG,eAAO,MAAM,2BAA2B,mDAAmD,CAAC;AAE5F,eAAO,MAAM,iCAAiC,QAA8C,CAAC;AAE7F,eAAO,MAAM,iCAAiC,QAA8C,CAAC;AAE7F,iGAAiG;AACjG,eAAO,MAAM,wCAAwC,QAGpD,CAAC;AAEF,6DAA6D;AAC7D,eAAO,MAAM,wCAAwC,SAAS,CAAC;AAE/D,uGAAuG;AACvG,eAAO,MAAM,mCAAmC,QAG/C,CAAC;AAEF,mFAAmF;AACnF,eAAO,MAAM,qCAAqC,0CACT,CAAC;AAE1C,qDAAqD;AACrD,eAAO,MAAM,kCAAkC,wGACwD,CAAC;AAExG,qDAAqD;AACrD,eAAO,MAAM,wBAAwB,QAA+C,CAAC;AAErF,sEAAsE;AACtE,eAAO,MAAM,wBAAwB,gCAAgC,CAAC;AAEtE,eAAO,MAAM,+BAA+B,QAAyC,CAAC;AAEtF,eAAO,MAAM,6BAA6B,QAIzC,CAAC;AAEF,eAAO,MAAM,yBAAyB,QAAsC,CAAC;AAE7E,2GAA2G;AAC3G,eAAO,MAAM,uBAAuB,UAAU,CAAC;AAE/C,kFAAkF;AAClF,eAAO,MAAM,mCAAmC,QAG/C,CAAC;AAEF,mDAAmD;AACnD,eAAO,MAAM,+BAA+B,QAAwC,CAAC;AAErF,2DAA2D;AAC3D,eAAO,MAAM,wCAAwC,oBAAoB,CAAC;AAE1E,+DAA+D;AAC/D,eAAO,MAAM,wCAAwC,QAGpD,CAAC;AAEF,6EAA6E;AAC7E,eAAO,MAAM,mCAAmC,QAG/C,CAAC;AAEF,yFAAyF;AACzF,eAAO,MAAM,8BAA8B,QAG1C,CAAC"}

package/dist/components/organisms/Dialog/dialogStyles.js

@@ -7,18 +7,20 @@ import { cardLayoutSectionInsetXClasses as r, cardTitleClasses as i } from "../.
 var a = [
 	"sm",
 	"md",
-	"lg"
+	"lg",
+	"full"
 ], o = "fixed inset-0 z-[100] flex items-center justify-center p-4", s = e("absolute inset-0 bg-overlay", "transition-opacity", n("medium")), c = {
 	sm: "w-full max-w-sm",
 	md: "w-full max-w-lg",
-	lg: "w-full max-w-2xl"
-}, l = e(t("body"), "text-fg"), u = e(l, "text-muted"), d = i;
-e(l, "px-4");
-var f = e(r, "flex w-full items-center justify-end gap-2"), p = "flex shrink-0 items-center justify-end gap-2", m = "flex min-h-0 flex-col overflow-hidden", h = "max-h-[min(85vh,100%)]", g = "shrink-0", _ = "m-0 w-full shrink-0 border-0 border-border p-0", v = e(_, "border-b"), y = e(_, "border-t"), b = e(g, "border-b border-border"), x = "pb-3";
-e(b, x);
-var S = "flex min-w-0 flex-1 items-start gap-3", C = "flex shrink-0 items-center pt-0.5 text-muted [&>svg]:size-5 [&>svg]:shrink-0 [&>svg]:stroke-current";
-e(l, "pt-1 text-muted");
-var w = "flex min-h-0 flex-col gap-3", T = e(w, "h-full"), E = e(l, r, "min-h-0 flex-1 overflow-y-auto overscroll-contain"), D = e(f, "shrink-0"), O = "gap-4", k = e(E, "py-1"), A = e(D, "pt-2"), j = "shrink-0 w-full", M = e(f, "pt-3 pb-4"), N = e(j, "border-t border-border pt-3");
-e(N, "pb-4");
+	lg: "w-full max-w-2xl",
+	full: "h-full w-full max-w-[90rem] max-md:rounded-none md:max-h-[60rem]"
+}, l = "max-md:p-0 md:p-6", u = "h-full items-center", d = e(t("body"), "text-fg"), f = e(d, "text-muted"), p = i;
+e(d, "px-4");
+var m = e(r, "flex w-full items-center justify-end gap-2"), h = "flex shrink-0 items-center justify-end gap-2", g = "flex min-h-0 flex-col overflow-hidden", _ = "max-h-[min(85vh,100%)]", v = "shrink-0", y = "m-0 w-full shrink-0 border-0 border-border p-0", b = e(y, "border-b"), x = e(y, "border-t"), S = e(v, "border-b border-border"), C = "pb-3";
+e(S, C);
+var w = "flex min-w-0 flex-1 items-start gap-3", T = "flex shrink-0 items-center pt-0.5 text-muted [&>svg]:size-5 [&>svg]:shrink-0 [&>svg]:stroke-current";
+e(d, "pt-1 text-muted");
+var E = "flex min-h-0 flex-col gap-3", D = e(E, "h-full"), O = e(d, r, "min-h-0 flex-1 overflow-y-auto overscroll-contain"), k = e(m, "shrink-0"), A = "gap-4", j = e(O, "py-1"), M = e(k, "pt-2"), N = "shrink-0 w-full", P = e(m, "pt-3 pb-4"), F = e(N, "border-t border-border pt-3");
+e(F, "pb-4");
 //#endregion
-export { d as alertDialogTitleClasses, s as dialogBackdropClasses, l as dialogBodyCopyClasses, u as dialogBodyMutedClasses, p as dialogFooterActionsClasses, f as dialogFooterClasses, o as dialogOverlayRootClasses, O as dialogPanelShellClasses, c as dialogPanelSizeClasses, a as dialogSizes, E as overlayPanelBodyScrollClasses, m as overlayPanelChromeClasses, k as overlayPanelDialogBodyScrollClasses, A as overlayPanelDialogFooterClasses, D as overlayPanelFooterClasses, N as overlayPanelFooterDelineatedClasses, M as overlayPanelFooterDelineatedInnerClasses, j as overlayPanelFooterDelineatedShellClasses, y as overlayPanelFooterHairlineClasses, _ as overlayPanelHairlineClasses, g as overlayPanelHeaderClasses, x as overlayPanelHeaderDelineatedInnerClasses, b as overlayPanelHeaderDelineatedShellClasses, v as overlayPanelHeaderHairlineClasses, S as overlayPanelHeaderStartClusterClasses, C as overlayPanelHeaderStartSlotClasses, h as overlayPanelMaxHeightClasses, T as overlayPanelSectionStackClasses, w as overlayPanelStackClasses };
+export { p as alertDialogTitleClasses, s as dialogBackdropClasses, d as dialogBodyCopyClasses, f as dialogBodyMutedClasses, h as dialogFooterActionsClasses, m as dialogFooterClasses, o as dialogOverlayRootClasses, l as dialogOverlayRootFullClasses, u as dialogPanelBoxFullClasses, A as dialogPanelShellClasses, c as dialogPanelSizeClasses, a as dialogSizes, O as overlayPanelBodyScrollClasses, g as overlayPanelChromeClasses, j as overlayPanelDialogBodyScrollClasses, M as overlayPanelDialogFooterClasses, k as overlayPanelFooterClasses, F as overlayPanelFooterDelineatedClasses, P as overlayPanelFooterDelineatedInnerClasses, N as overlayPanelFooterDelineatedShellClasses, x as overlayPanelFooterHairlineClasses, y as overlayPanelHairlineClasses, v as overlayPanelHeaderClasses, C as overlayPanelHeaderDelineatedInnerClasses, S as overlayPanelHeaderDelineatedShellClasses, b as overlayPanelHeaderHairlineClasses, w as overlayPanelHeaderStartClusterClasses, T as overlayPanelHeaderStartSlotClasses, _ as overlayPanelMaxHeightClasses, D as overlayPanelSectionStackClasses, E as overlayPanelStackClasses };

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

@@ -0,0 +1,54 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type FilterPanelGroup, type FilterSelection } from "./filterSelection";
+export { countFilterOptions, filterFacetValues, filterSelectionCount, matchesFilterSelection, useFilterSelection, type FilterFacets, type FilterPanelGroup, type FilterPanelOption, type FilterSelection, type UseFilterSelectionOptions, } from "./filterSelection";
+/** Layout-only — grid placement and which breakpoints show the part. */
+export type FilterPanelLayoutClassName = string;
+export interface FilterPanelLabels {
+    /** The panel's caption, the Sheet's title, and the trigger's label. Default: "Filters". */
+    title: string;
+    /** Default: "Clear all". */
+    clear: string;
+    /** The Sheet's closing button, from `resultsLabel`. Default: "Show 3 posts". */
+    show: (resultsLabel: string) => string;
+}
+export interface FilterPanelProps {
+    /** The filter groups, each with its options. `countFilterOptions` adds the counts. */
+    groups: FilterPanelGroup[];
+    /** The options on in each group. Hold it with `useFilterSelection`. */
+    selection: FilterSelection;
+    /** Every change: an option on or off, or Clear all (an empty selection). */
+    onSelectionChange: (selection: FilterSelection) => void;
+    /** What is showing, for the Sheet's closing button — "3 posts" reads "Show 3 posts". */
+    resultsLabel: string;
+    labels?: Partial<FilterPanelLabels>;
+    /** The page: **FilterPanel.Trigger**, **FilterPanel.Rail**, and **FilterPanel.Sheet** go anywhere inside. */
+    children?: ReactNode;
+}
+export interface FilterPanelRailProps {
+    /** Placement, and where it shows — for example `"hidden md:col-span-3 md:block"`. */
+    className?: FilterPanelLayoutClassName;
+}
+export interface FilterPanelTriggerProps {
+    /** Replaces the leading icon. */
+    icon?: ReactElement;
+    /** Placement, and where it shows — for example `"md:hidden"`. */
+    className?: FilterPanelLayoutClassName;
+}
+/**
+ * Checkbox filters for an index page — a side rail from tablet up and the same groups in a bottom
+ * **Sheet** on phones, over one selection. It renders no element of its own: place its parts on
+ * the page grid.
+ */
+declare function FilterPanelRoot({ groups, selection, onSelectionChange, resultsLabel, labels, children }: FilterPanelProps): import("react").JSX.Element;
+/** The side rail: the caption with Clear all at its end, over the groups. */
+declare function FilterPanelRail({ className }: FilterPanelRailProps): import("react").JSX.Element;
+/** Opens the Sheet. Its count is how many options are on. */
+declare function FilterPanelTrigger({ icon, className }: FilterPanelTriggerProps): import("react").JSX.Element;
+/** The same groups in a bottom Sheet, with Clear all and a button that closes it on the results. */
+declare function FilterPanelSheet(): import("react").JSX.Element;
+export declare const FilterPanel: typeof FilterPanelRoot & {
+    Rail: typeof FilterPanelRail;
+    Trigger: typeof FilterPanelTrigger;
+    Sheet: typeof FilterPanelSheet;
+};
+//# sourceMappingURL=FilterPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/FilterPanel/FilterPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuD,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAO/G,OAAO,EAAwB,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEtG,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,oBAAoB,EACpB,sBAAsB,EACtB,kBAAkB,EAClB,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACpB,KAAK,yBAAyB,GAC/B,MAAM,mBAAmB,CAAC;AAE3B,wEAAwE;AACxE,MAAM,MAAM,0BAA0B,GAAG,MAAM,CAAC;AAEhD,MAAM,WAAW,iBAAiB;IAChC,2FAA2F;IAC3F,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,IAAI,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC;CACxC;AAED,MAAM,WAAW,gBAAgB;IAC/B,sFAAsF;IACtF,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,uEAAuE;IACvE,SAAS,EAAE,eAAe,CAAC;IAC3B,4EAA4E;IAC5E,iBAAiB,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACxD,wFAAwF;IACxF,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,6GAA6G;IAC7G,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,oBAAoB;IACnC,qFAAqF;IACrF,SAAS,CAAC,EAAE,0BAA0B,CAAC;CACxC;AAED,MAAM,WAAW,uBAAuB;IACtC,iCAAiC;IACjC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,iEAAiE;IACjE,SAAS,CAAC,EAAE,0BAA0B,CAAC;CACxC;AA2BD;;;;GAIG;AACH,iBAAS,eAAe,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,gBAAgB,+BAiBlH;AAiCD,6EAA6E;AAC7E,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,EAAE,oBAAoB,+BAmB3D;AAED,6DAA6D;AAC7D,iBAAS,kBAAkB,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,uBAAuB,+BAcvE;AAED,oGAAoG;AACpG,iBAAS,gBAAgB,gCAuBxB;AAED,eAAO,MAAM,WAAW;;;;CAItB,CAAC"}