@primer/react-brand/esm/Bento/Bento.js

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import e from "../node_modules/clsx/dist/clsx.js";
import { Text as t } from "../Text/Text.js";
import { Heading as n } from "../Heading/Heading.js";
import { Image as r } from "../Image/Image.js";
import { Link as i } from "../Link/Link.js";
import { Label as a } from "../Label/Label.js";
import o from "../findElementInChildren.js";
import { BreakpointSize as s, useWindowSize as c } from "../hooks/useWindowSize.js";
import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/bento/base-BRft1s9J.css';/* empty css                                                                                      */
import l from "./Bento.module.js";
import u, { forwardRef as d, useCallback as f, useMemo as p } from "react";
import { jsx as m, jsxs as h } from "react/jsx-runtime";
//#region src/Bento/Bento.tsx
var g = ({ className: t, ...n }) => /* @__PURE__ */ m("section", {
	className: e(l.Bento, t),
	...n
}), _ = (e, t, n) => {
	let r = [];
	if (typeof n == "number" || typeof n == "string") r.push(l[`${e}--${t}-${n}`]);
	else if (typeof n == "object") for (let [i, a] of Object.entries(n)) r.push(l[`${e}--${i}-${t}-${a}`]);
	return r;
}, v = ({ order: e, children: t, currentBreakpointSize: n }) => {
	if (typeof e == "string") return e === "default" ? t : u.Children.toArray(t).reverse();
	if (typeof e == "object" && n) {
		let r = {}, i = "default";
		for (let t of Object.keys(s)) {
			let n = t.toLocaleLowerCase();
			e[n] && (i = e[n]), r[n] = e[n] || i;
		}
		return r[n] === "default" ? t : u.Children.toArray(t).reverse();
	} else return t;
}, y = ({ className: t, columnStart: n, columnSpan: r = 12, rowStart: i, rowSpan: a = 2, flow: o = "row", colorMode: s, visualAsBackground: d = !1, order: f = "default", bgColor: p = "subtle", children: h, ...g }) => {
	let { currentBreakpointSize: y } = c(), x = u.Children.toArray(h).reduce((e, t) => (u.isValidElement(t) && t.type === S && e.push(t), u.isValidElement(t) && t.type === b && e.push(t), e), []), C = x.find((e) => u.isValidElement(e) && e.type === b)?.props.padding || "spacious", w = [l.Bento__Item, l[`Bento__Item--bgColor-${p}`]];
	w.push(..._("Bento__Item", "column-span", r), ..._("Bento__Item", "row-span", a), ..._("Bento__Item", "column-start", n), ..._("Bento__Item", "row-start", i), ..._("Bento__Item", "flow", o), ..._("Bento__Item", "gap", C)), !d && u.Children.toArray(h).length >= 1 && (o === "column" && w.push(l["Bento-column-padding-override"]), o === "row" && w.push(l["Bento-row-padding-override"]));
	let T = s ? { "data-color-mode": s } : {}, E = v({
		order: f,
		children: x,
		currentBreakpointSize: y
	});
	return /* @__PURE__ */ m("div", {
		...T,
		className: e(...w, (d || u.Children.toArray(h).length === 1) && l["Bento__Item--visual-as-background"], t),
		...g,
		children: E
	});
}, b = ({ children: n, leadingVisual: r, padding: o = "spacious", verticalAlign: s, horizontalAlign: c = "start", className: d, ...f }) => {
	let m = [l.Bento__Content];
	m.push(..._("Bento__Item", "verticalAlign", s), ..._("Bento__Item", "horizontalAlign", c), ..._("Bento", "padding", o));
	let g = p(() => u.Children.toArray(n), [n]), v = g.filter((e) => u.isValidElement(e) && e.type === x), y = g.find((e) => u.isValidElement(e) && e.type === a), b = g.find((e) => u.isValidElement(e) && e.type === t), S = g.find((e) => u.isValidElement(e) && e.type === i);
	return /* @__PURE__ */ h("div", {
		className: e(l[`Bento-padding--${o}`], ...m, d),
		...f,
		children: [
			u.isValidElement(r) && u.cloneElement(r, {
				className: l["Bento__Content-icon"],
				size: r.props.size || 44
			}),
			u.isValidElement(y) && u.cloneElement(y, { className: e(l["Bento__Content-label"], y.props.className) }),
			v.map((t) => u.cloneElement(t, { className: e(!u.isValidElement(b) && l["Bento__heading--no-text"], c === "center" && l["Bento__heading--with-max-width"], t.props.className) })),
			u.isValidElement(b) && u.cloneElement(b, {
				variant: b.props.variant || "muted",
				as: b.props.as || "p",
				size: b.props.size || "300",
				className: e(l["Bento__Content-text"], b.props.className)
			}),
			u.isValidElement(S) && u.cloneElement(S, {
				variant: S.props.variant || "accent",
				className: e(l["Bento__call-to-action"], S.props.className)
			})
		]
	});
}, x = d(({ as: t = "h3", size: r = "5", weight: i = "medium", variant: a = "default", className: s, children: c, ...d }, h) => {
	let g = p(() => u.Children.toArray(c), [c]), _ = f(() => o(c, "b") || o(c, "em") ? "muted" : "default", [c]);
	return /* @__PURE__ */ m(n, {
		ref: h,
		className: e((g.length === 1 ? "default" : _()) === "muted" && l["Bento__heading--muted"], a === "muted" && l["Bento__heading--muted"], s),
		size: r,
		as: t,
		weight: i,
		...d,
		children: c
	});
}), S = ({ horizontalAlign: t, verticalAlign: n, fillMedia: i = !0, overflow: a = "hidden", position: o = "50% 50%", padding: s, className: c, children: d, ...f }) => {
	let p = [
		l.Bento__Visual,
		t && l[`Bento__Visual--horizontalAlign-${t}`],
		n && l[`Bento__Visual--verticalAlign-${n}`],
		l[`Bento__Visual--overflow-${a}`]
	];
	p.push(..._("Bento", "padding", s));
	let h = u.Children.map(d, (e) => u.isValidElement(e) ? u.isValidElement(e) && e.type === "img" || u.isValidElement(e) && e.type === r ? u.cloneElement(e, { style: {
		...e.props.style,
		objectPosition: o
	} }) : e : null);
	return /* @__PURE__ */ m("div", {
		className: e(...p, i && l["Bento__Visual--fill"], !i && l["Bento__Visual--no-fill"], c),
		...f,
		children: h
	});
}, C = Object.assign(g, {
	Item: y,
	Visual: S,
	Content: b,
	Heading: x
});
//#endregion
export { C as Bento };

//# sourceMappingURL=Bento.js.map