@bison-lab/payload-blocks 3.1.0 → 3.3.0

package/dist/react.mjs

@@ -1,7 +1,7 @@
 "use client";
-import { t as cx } from "./cx-BKHSv3xT.mjs";
+import { a as overlapsSeam, i as SEAM_PULL_UP, n as OVERLAP_BELOW_CLEARANCE, o as seamClasses, r as SEAM_PULL_DOWN, s as cx, t as OVERLAP_ABOVE_CLEARANCE } from "./seam-BDFZlV3F.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Button, FAQColumnsBlock, JsonLd, NapBlock, ProcessStepsBlock, ShowcasePanelsBlock, TestimonialMasonry } from "@bison-lab/ui";
+import { Button, FAQColumnsBlock, JsonLd, MegaMenuPanel, NapBlock, ProcessStepsBlock, ShowcasePanelsBlock, StatsBandBlock, TestimonialMasonry, megaMenuToFloatingNavItems } from "@bison-lab/ui";
 //#region src/image.tsx
 /**
 * The fallback when no `imageComponent` is supplied: a plain `<img>`. Correct
@@ -21,6 +21,42 @@ function DefaultBlockImage({ src, alt, width, height, className, sizes, priority
 	});
 }
 //#endregion
+//#region src/link.tsx
+/** `target` and `rel` together, or neither: a bare `target` is a tabnabbing hole. */
+function newTabAttributes(newTab) {
+	return newTab ? {
+		target: "_blank",
+		rel: "noopener noreferrer"
+	} : {};
+}
+/**
+* The fallback when no `linkComponent` is supplied: a plain `<a>`. Correct
+* everywhere and client-side nowhere, which is the right default for a package
+* that cannot know what router it landed in.
+*/
+function DefaultBlockLink({ href, newTab, children, ...rest }) {
+	return /* @__PURE__ */ jsx("a", {
+		href,
+		...rest,
+		...newTabAttributes(newTab),
+		children
+	});
+}
+DefaultBlockLink.displayName = "DefaultBlockLink";
+/**
+* Adapts the seam to the `renderLink` prop every `@bison-lab/ui` block takes.
+* The ui blocks hand over `target`/`rel` already expanded, so `newTab` is
+* read back off `target` to keep the flag and the attributes in step.
+*/
+function renderLinkWith(Link) {
+	return ({ href, children, ...rest }) => /* @__PURE__ */ jsx(Link, {
+		href,
+		newTab: rest.target === "_blank",
+		...rest,
+		children
+	});
+}
+//#endregion
 //#region src/render-blocks.tsx
 /** Fallback page measure for a site that does not pass its own. */
 const DEFAULT_CONTAINER = "mx-auto w-full max-w-7xl px-6";
@@ -50,17 +86,21 @@ function runIndexes(blocks) {
 * Renders a page's blocks in order through the registry. A Server Component:
 * it only maps and looks up, and each renderer decides its own nature.
 */
-function RenderBlocks({ blocks, registry, containerClassName = DEFAULT_CONTAINER, imageComponent = DefaultBlockImage }) {
+function RenderBlocks({ blocks, registry, containerClassName = DEFAULT_CONTAINER, imageComponent = DefaultBlockImage, linkComponent = DefaultBlockLink, floats = overlapsSeam }) {
 	const rows = renderable(blocks, registry);
 	const runs = runIndexes(rows.map((row) => row.block));
+	const floating = rows.map((row) => floats(row.block));
 	return /* @__PURE__ */ jsx(Fragment, { children: rows.map(({ block, Renderer }, index) => /* @__PURE__ */ jsx(Renderer, {
 		block,
 		index,
 		prevType: index > 0 ? rows[index - 1].block.blockType : void 0,
 		runIndex: runs[index],
 		isLast: index === rows.length - 1,
+		overlapAbove: index > 0 && floating[index - 1],
+		overlapBelow: index < rows.length - 1 && floating[index + 1],
 		containerClassName,
-		imageComponent
+		imageComponent,
+		linkComponent
 	}, block.id ?? index)) });
 }
 //#endregion
@@ -109,12 +149,15 @@ const TONES = {
 * render at all, not to be the final answer. A site overrides this one registry
 * entry with its own and keeps every other block.
 */
-function HeroBlockRenderer({ block, index, containerClassName, imageComponent: Image }) {
+function HeroBlockRenderer({ block, index, overlapAbove, overlapBelow, containerClassName, imageComponent: Image, linkComponent: Link }) {
 	const image = resolveMedia(block.image);
 	const links = (block.links ?? []).filter((link) => link.href && link.label);
 	const tone = TONES[block.tone ?? "sweep"];
 	return /* @__PURE__ */ jsxs("section", {
-		className: cx("relative isolate overflow-hidden", tone),
+		className: cx("relative isolate overflow-hidden", tone, seamClasses({
+			overlapAbove,
+			overlapBelow
+		})),
 		children: [image ? /* @__PURE__ */ jsx("div", {
 			className: "absolute inset-0 -z-10 opacity-25",
 			children: /* @__PURE__ */ jsx(Image, {
@@ -148,12 +191,10 @@ function HeroBlockRenderer({ block, index, containerClassName, imageComponent: I
 						children: links.map((link, i) => /* @__PURE__ */ jsx(Button, {
 							asChild: true,
 							variant: i === 0 ? "default" : "outline",
-							children: /* @__PURE__ */ jsx("a", {
+							children: /* @__PURE__ */ jsx(Link, {
 								href: link.href,
-								...link.newTab ? {
-									target: "_blank",
-									rel: "noreferrer noopener"
-								} : {},
+								newTab: link.newTab ?? false,
+								...newTabAttributes(link.newTab),
 								children: link.label
 							})
 						}, `${link.href}-${i}`))
@@ -165,7 +206,7 @@ function HeroBlockRenderer({ block, index, containerClassName, imageComponent: I
 }
 //#endregion
 //#region src/blocks/showcase-panels/component.tsx
-function ShowcasePanelsBlockRenderer({ block, containerClassName, imageComponent: Image }) {
+function ShowcasePanelsBlockRenderer({ block, overlapAbove, overlapBelow, containerClassName, imageComponent: Image, linkComponent }) {
 	const dims = [];
 	const items = [];
 	for (const [i, row] of (block.items ?? []).entries()) {
@@ -186,26 +227,33 @@ function ShowcasePanelsBlockRenderer({ block, containerClassName, imageComponent
 	}
 	if (items.length === 0) return null;
 	return /* @__PURE__ */ jsx("section", {
-		className: cx(containerClassName, "py-16 lg:py-24"),
-		children: /* @__PURE__ */ jsx(ShowcasePanelsBlock, {
-			items,
-			spineVariant: block.spineVariant ?? "numbered",
-			defaultActiveIndex: Math.min(Math.max(block.defaultActiveIndex ?? 0, 0), items.length - 1),
-			...block.watermark ? { watermark: block.watermark } : {},
-			renderImage: (item, i) => /* @__PURE__ */ jsx(Image, {
-				src: item.image.src,
-				alt: item.image.alt ?? "",
-				width: dims[i]?.width,
-				height: dims[i]?.height,
-				className: "absolute inset-0 h-full w-full object-cover",
-				sizes: "(min-width: 1024px) 50vw, 100vw"
+		className: seamClasses({
+			overlapAbove,
+			overlapBelow
+		}),
+		children: /* @__PURE__ */ jsx("div", {
+			className: cx(containerClassName, "py-16 lg:py-24"),
+			children: /* @__PURE__ */ jsx(ShowcasePanelsBlock, {
+				items,
+				spineVariant: block.spineVariant ?? "numbered",
+				defaultActiveIndex: Math.min(Math.max(block.defaultActiveIndex ?? 0, 0), items.length - 1),
+				...block.watermark ? { watermark: block.watermark } : {},
+				renderLink: renderLinkWith(linkComponent),
+				renderImage: (item, i) => /* @__PURE__ */ jsx(Image, {
+					src: item.image.src,
+					alt: item.image.alt ?? "",
+					width: dims[i]?.width,
+					height: dims[i]?.height,
+					className: "absolute inset-0 h-full w-full object-cover",
+					sizes: "(min-width: 1024px) 50vw, 100vw"
+				})
 			})
 		})
 	});
 }
 //#endregion
 //#region src/blocks/process-steps/component.tsx
-function ProcessStepsBlockRenderer({ block, containerClassName, imageComponent: Image }) {
+function ProcessStepsBlockRenderer({ block, overlapAbove, overlapBelow, containerClassName, imageComponent: Image }) {
 	const dims = [];
 	const items = [];
 	for (const [i, row] of (block.items ?? []).entries()) {
@@ -224,27 +272,33 @@ function ProcessStepsBlockRenderer({ block, containerClassName, imageComponent:
 	}
 	if (items.length === 0) return null;
 	return /* @__PURE__ */ jsx("section", {
-		className: cx(containerClassName, "py-16 lg:py-24"),
-		children: /* @__PURE__ */ jsx(ProcessStepsBlock, {
-			items,
-			autoAdvance: block.autoAdvance ?? true,
-			autoAdvanceDuration: block.autoAdvanceDuration ?? 6e3,
-			pauseOnHover: block.pauseOnHover ?? true,
-			defaultActiveIndex: Math.min(Math.max(block.defaultActiveIndex ?? 0, 0), items.length - 1),
-			renderImage: (item, i) => /* @__PURE__ */ jsx(Image, {
-				src: item.image.src,
-				alt: item.image.alt ?? "",
-				width: dims[i]?.width,
-				height: dims[i]?.height,
-				className: "size-full object-cover",
-				sizes: "(min-width: 768px) 66vw, 100vw"
+		className: seamClasses({
+			overlapAbove,
+			overlapBelow
+		}),
+		children: /* @__PURE__ */ jsx("div", {
+			className: cx(containerClassName, "py-16 lg:py-24"),
+			children: /* @__PURE__ */ jsx(ProcessStepsBlock, {
+				items,
+				autoAdvance: block.autoAdvance ?? true,
+				autoAdvanceDuration: block.autoAdvanceDuration ?? 6e3,
+				pauseOnHover: block.pauseOnHover ?? true,
+				defaultActiveIndex: Math.min(Math.max(block.defaultActiveIndex ?? 0, 0), items.length - 1),
+				renderImage: (item, i) => /* @__PURE__ */ jsx(Image, {
+					src: item.image.src,
+					alt: item.image.alt ?? "",
+					width: dims[i]?.width,
+					height: dims[i]?.height,
+					className: "size-full object-cover",
+					sizes: "(min-width: 768px) 66vw, 100vw"
+				})
 			})
 		})
 	});
 }
 //#endregion
 //#region src/blocks/faq-columns/component.tsx
-function FaqColumnsBlockRenderer({ block, containerClassName }) {
+function FaqColumnsBlockRenderer({ block, overlapAbove, overlapBelow, containerClassName, linkComponent }) {
 	const items = (block.items ?? []).filter((row) => row.question && row.answer).map((row, i) => ({
 		id: row.id ?? String(i),
 		question: row.question,
@@ -256,30 +310,37 @@ function FaqColumnsBlockRenderer({ block, containerClassName }) {
 	if (items.length === 0) return null;
 	const cta = block.cta;
 	const hasCta = Boolean(cta?.href && cta?.linkText);
-	return /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsx("div", {
-		className: cx(containerClassName, "py-16 lg:py-24"),
-		children: /* @__PURE__ */ jsx(FAQColumnsBlock, {
-			className: "py-0 md:py-0",
-			containerClassName: "max-w-none px-0 sm:px-0",
-			items,
-			title: block.title ?? "",
-			...block.eyebrow ? { eyebrow: block.eyebrow } : {},
-			...block.description ? { description: block.description } : {},
-			sticky: block.sticky ?? true,
-			type: block.type ?? "single",
-			collapsible: block.collapsible ?? true,
-			...hasCta && cta ? { cta: {
-				title: cta.title ?? "",
-				linkText: cta.linkText,
-				href: cta.href,
-				newTab: cta.newTab ?? false
-			} } : {}
+	return /* @__PURE__ */ jsx("section", {
+		className: seamClasses({
+			overlapAbove,
+			overlapBelow
+		}),
+		children: /* @__PURE__ */ jsx("div", {
+			className: cx(containerClassName, "py-16 lg:py-24"),
+			children: /* @__PURE__ */ jsx(FAQColumnsBlock, {
+				className: "py-0 md:py-0",
+				containerClassName: "max-w-none px-0 sm:px-0",
+				items,
+				title: block.title ?? "",
+				...block.eyebrow ? { eyebrow: block.eyebrow } : {},
+				...block.description ? { description: block.description } : {},
+				sticky: block.sticky ?? true,
+				type: block.type ?? "single",
+				collapsible: block.collapsible ?? true,
+				renderLink: renderLinkWith(linkComponent),
+				...hasCta && cta ? { cta: {
+					title: cta.title ?? "",
+					linkText: cta.linkText,
+					href: cta.href,
+					newTab: cta.newTab ?? false
+				} } : {}
+			})
 		})
-	}) });
+	});
 }
 //#endregion
 //#region src/blocks/testimonial-masonry/component.tsx
-function TestimonialMasonryBlockRenderer({ block, containerClassName }) {
+function TestimonialMasonryBlockRenderer({ block, overlapAbove, overlapBelow, containerClassName, linkComponent }) {
 	const items = (block.items ?? []).filter((row) => row.content && row.author?.name).map((row, i) => {
 		const avatar = resolveMedia(row.author?.avatar);
 		return {
@@ -296,7 +357,10 @@ function TestimonialMasonryBlockRenderer({ block, containerClassName }) {
 	const link = block.link;
 	const hasLink = Boolean(link?.href && link?.label);
 	return /* @__PURE__ */ jsx("section", {
-		className: "bg-accent",
+		className: cx("bg-accent", seamClasses({
+			overlapAbove,
+			overlapBelow
+		})),
 		children: /* @__PURE__ */ jsx("div", {
 			className: cx(containerClassName, "py-16 lg:py-24"),
 			children: /* @__PURE__ */ jsx(TestimonialMasonry, {
@@ -304,6 +368,7 @@ function TestimonialMasonryBlockRenderer({ block, containerClassName }) {
 				containerClassName: "max-w-none px-0 py-0 sm:py-0 md:px-0 md:py-0",
 				items,
 				title: block.title ?? "",
+				renderLink: renderLinkWith(linkComponent),
 				...block.eyebrow ? { eyebrow: block.eyebrow } : {},
 				...block.description ? { description: block.description } : {},
 				...typeof block.minItemsForFade === "number" ? { minItemsForFade: block.minItemsForFade } : {},
@@ -319,7 +384,7 @@ function TestimonialMasonryBlockRenderer({ block, containerClassName }) {
 }
 //#endregion
 //#region src/blocks/nap/component.tsx
-function NapBlockRenderer({ block, containerClassName }) {
+function NapBlockRenderer({ block, overlapAbove, overlapBelow, containerClassName, linkComponent }) {
 	const address = block.address;
 	const departments = (block.departments ?? []).filter((row) => row.name && row.phoneE164).map((row, i) => ({
 		id: row.id ?? String(i),
@@ -344,16 +409,191 @@ function NapBlockRenderer({ block, containerClassName }) {
 		departments,
 		...block.url ? { url: block.url } : {}
 	};
-	return /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsxs("div", {
-		className: cx(containerClassName, "py-16 lg:py-24"),
-		children: [/* @__PURE__ */ jsx(NapBlock, {
-			record,
-			showName: block.showName ?? true,
-			headingLevel: block.headingLevel ?? "h2"
-		}), block.emitJsonLd === false ? null : /* @__PURE__ */ jsx(JsonLd, { data: record })]
-	}) });
+	return /* @__PURE__ */ jsx("section", {
+		className: seamClasses({
+			overlapAbove,
+			overlapBelow
+		}),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cx(containerClassName, "py-16 lg:py-24"),
+			children: [/* @__PURE__ */ jsx(NapBlock, {
+				record,
+				showName: block.showName ?? true,
+				headingLevel: block.headingLevel ?? "h2",
+				renderLink: renderLinkWith(linkComponent)
+			}), block.emitJsonLd === false ? null : /* @__PURE__ */ jsx(JsonLd, { data: record })]
+		})
+	});
+}
+//#endregion
+//#region src/blocks/stats-band/component.tsx
+/** The select only offers 2–6, but a site can edit the config; fall back to the design's four. */
+function columnsFrom(value) {
+	const n = Number(value ?? 4);
+	return Number.isInteger(n) && n >= 2 && n <= 6 ? n : 4;
+}
+function StatsBandBlockRenderer({ block, index, isLast, overlapAbove, overlapBelow, containerClassName, linkComponent }) {
+	const items = (block.items ?? []).flatMap((row, i) => row.value ? [{
+		id: row.id ?? String(i),
+		value: row.value,
+		label: row.label ?? "",
+		...row.href ? { href: row.href } : {},
+		...row.wide ? { wide: true } : {}
+	}] : []);
+	if (items.length < 2) return null;
+	const floats = Boolean(block.overlap);
+	const overAbove = floats && index > 0 && !overlapAbove;
+	const overBelow = floats && !isLast && !overlapBelow;
+	return /* @__PURE__ */ jsx("section", {
+		className: cx("relative", floats && "z-10", seamClasses({
+			overlapAbove,
+			overlapBelow
+		})),
+		children: /* @__PURE__ */ jsx("div", {
+			className: cx(containerClassName, overAbove ? SEAM_PULL_UP : "pt-16 lg:pt-24", overBelow ? SEAM_PULL_DOWN : "pb-16 lg:pb-24"),
+			children: /* @__PURE__ */ jsx(StatsBandBlock, {
+				items,
+				columns: columnsFrom(block.columns),
+				tone: block.tone ?? "card",
+				align: block.align ?? "start",
+				eyebrow: !floats && block.eyebrow || void 0,
+				title: !floats && block.title || void 0,
+				description: !floats && block.description || void 0,
+				containerClassName: "max-w-none px-0 sm:px-0",
+				renderLink: renderLinkWith(linkComponent)
+			})
+		})
+	});
+}
+//#endregion
+//#region src/blocks/mega-menu/rem-width.ts
+/**
+* The one rule for a typed panel width, shared by the config's validator and
+* the renderer's reader so the two cannot drift: if the validator accepted a
+* value the renderer dropped, the editor would be back to a width that
+* silently does nothing. React-free, because `config.ts` ships from the Node
+* entry.
+*/
+const REM_WIDTH = /^\s*(\d+(?:\.\d+)?)\s*(rem)?\s*$/;
+/** "30" and "30rem" both mean 30rem; anything else is not a width. */
+function remWidth(value) {
+	const match = REM_WIDTH.exec(value ?? "");
+	return match ? `${Number(match[1])}rem` : null;
+}
+//#endregion
+//#region src/blocks/mega-menu/component.tsx
+function completeLink(row) {
+	if (!row.label || !row.href) return null;
+	return {
+		label: row.label,
+		href: row.href,
+		...row.description ? { description: row.description } : {},
+		...row.variant ? { variant: row.variant } : {},
+		...row.icon ? { icon: row.icon } : {},
+		...row.newTab ? { newTab: true } : {}
+	};
+}
+/**
+* The row as `MegaMenuPanel` data, or `null` when there is nothing to open:
+* no columns, or columns whose links are not yet complete. Draft saves skip
+* validation, so a live preview genuinely hands this half-built rows.
+*/
+function megaMenuPanelFromRow(row) {
+	const panel = row.panel;
+	if (!panel?.columns?.length) return null;
+	const custom = Boolean(panel.customWidths);
+	const columns = [];
+	for (const column of panel.columns) {
+		const sections = [];
+		for (const section of column.sections ?? []) {
+			const links = (section.links ?? []).map(completeLink).filter((link) => link !== null);
+			if (!links.length) continue;
+			sections.push({
+				...section.eyebrow ? { eyebrow: section.eyebrow } : {},
+				display: section.display ?? "list",
+				hideDescriptionsOnMobile: section.hideDescriptionsOnMobile ?? true,
+				links
+			});
+		}
+		columns.push({
+			...custom && column.customWidth ? { customWidth: column.customWidth } : { width: Number(column.width ?? "100") },
+			...column.divider ? { divider: true } : {},
+			sections
+		});
+	}
+	if (!columns.some((column) => column.sections.length)) return null;
+	const overview = panel.footer?.overview;
+	const cta = panel.footer?.cta;
+	return {
+		maxWidth: remWidth(panel.customMaxWidth) ?? panel.maxWidth ?? "standard",
+		columns,
+		footer: {
+			...overview?.label && overview.href ? { overview: {
+				label: overview.label,
+				href: overview.href,
+				...overview.newTab ? { newTab: true } : {}
+			} } : {},
+			...cta?.label && cta.href ? { cta: {
+				label: cta.label,
+				href: cta.href,
+				...cta.newTab ? { newTab: true } : {}
+			} } : {}
+		}
+	};
+}
+/**
+* One panel, standing alone: what a live preview shows while the row is being
+* edited. A whole header goes through `headerItemsFromBlocks` instead.
+*/
+function MegaMenuBlockRenderer({ block, linkComponent, variants, icons }) {
+	const panel = megaMenuPanelFromRow(block);
+	if (!panel) return null;
+	return /* @__PURE__ */ jsx(MegaMenuPanel, {
+		...panel,
+		variants,
+		icons,
+		renderLink: renderLinkWith(linkComponent)
+	});
+}
+//#endregion
+//#region src/blocks/mega-menu/header.tsx
+/**
+* A global's `items` as `FloatingNavBlock` items, so a site's header is one
+* call. Rows the bar cannot show are dropped rather than rendered broken: a
+* row with no label, a mega menu with nothing to open, and any block type a
+* site added that this package does not know.
+*
+* A `navLink` row's `newTab` is not carried: `FloatingNavItem` has no such
+* field, because the bar renders its own links.
+*/
+function headerItemsFromBlocks(blocks, { variants, icons, isActive, linkComponent } = {}) {
+	const items = [];
+	for (const row of blocks) {
+		if (!row.label) continue;
+		if (row.blockType === "navLink") {
+			if (!row.href) continue;
+			items.push({
+				label: row.label,
+				href: row.href
+			});
+		} else if (row.blockType === "megaMenu") {
+			const panel = megaMenuPanelFromRow(row);
+			if (!panel) continue;
+			items.push({
+				label: row.label,
+				...row.href ? { href: row.href } : {},
+				panel
+			});
+		}
+	}
+	return megaMenuToFloatingNavItems({ items }, {
+		isActive,
+		variants,
+		icons,
+		...linkComponent ? { renderLink: renderLinkWith(linkComponent) } : {}
+	});
 }
 //#endregion
-export { DEFAULT_CONTAINER, DefaultBlockImage, FaqColumnsBlockRenderer, HeroBlockRenderer, NapBlockRenderer, ProcessStepsBlockRenderer, RenderBlocks, ShowcasePanelsBlockRenderer, TestimonialMasonryBlockRenderer };
+export { DEFAULT_CONTAINER, DefaultBlockImage, DefaultBlockLink, FaqColumnsBlockRenderer, HeroBlockRenderer, MegaMenuBlockRenderer, NapBlockRenderer, OVERLAP_ABOVE_CLEARANCE, OVERLAP_BELOW_CLEARANCE, ProcessStepsBlockRenderer, RenderBlocks, SEAM_PULL_DOWN, SEAM_PULL_UP, ShowcasePanelsBlockRenderer, StatsBandBlockRenderer, TestimonialMasonryBlockRenderer, headerItemsFromBlocks, megaMenuPanelFromRow, newTabAttributes, overlapsSeam, renderLinkWith, seamClasses };
 
 //# sourceMappingURL=react.mjs.map