@primer/react-brand/esm/river/River/River.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 { useAnimation as t } from "../../animation/useAnimation.js";
import { Text as n } from "../../Text/Text.js";
import { EyebrowText as r } from "../../EyebrowText/EyebrowText.js";
import { Heading as i } from "../../Heading/Heading.js";
import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/river-DHn1_SEa.css';import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/base-Ue-p74RC.css';/* empty css                                                                                          */
import a from "../../component-helpers/shared.module.js";
import { Link as o } from "../../Link/Link.js";
import { Label as s } from "../../Label/Label.js";
/* empty css                                                                                         */
import c from "../river-shared.module.js";
import l, { forwardRef as u, useMemo as d } from "react";
import { jsx as f, jsxs as p } from "react/jsx-runtime";
//#region src/river/River/River.tsx
var m = "50:50", h = "start", g = "default", _ = u(({ animate: n, imageTextRatio: r = m, align: i = h, variant: o = g, className: s, children: u, style: d, ...f }, _) => {
	let { classes: y, styles: b } = t(n), { Visual: x, Content: C } = l.Children.toArray(u).reduce((e, t) => (l.isValidElement(t) && typeof t.type != "string" && (t.type === S && (e.Visual = t), t.type === v && (e.Content = t)), e), {
		Visual: null,
		Content: null
	}), w = x?.props.position ?? "default", T = x?.props.padding ?? "default";
	(w !== "default" || T !== "default") && o !== "gridline" && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn(`River: River.Visual position and padding are only supported when River uses variant="gridline"; ignoring position="${w}" and padding="${T}".`);
	let E = x ? l.cloneElement(x, { className: e(x.props.className, o === "gridline" && c["River__visual--has-background"]) }) : null;
	return /* @__PURE__ */ p("section", {
		ref: _,
		className: e(c.River, c[`River--${r.replace(":", "-")}`], c[`River--align-${i}`], c[`River--variant-${o}`], o === "gridline" && a.gridline, y, s),
		style: {
			...b,
			...d
		},
		...f,
		children: [C, E]
	});
}), v = u(({ align: a = "center", animate: u, children: m, className: h, leadingComponent: g, trailingComponent: _, trailingComponentDivider: v = !1, style: y, ...b }, x) => {
	let { classes: S, styles: C } = t(u), w = d(() => l.Children.toArray(m), [m]), T = w.find((e) => l.isValidElement(e) && e.type === i), E = w.find((e) => l.isValidElement(e) && e.type === n), D = w.find((e) => l.isValidElement(e) && e.type === o), O = w.find((e) => l.isValidElement(e) && e.type === s), k = w.find((e) => l.isValidElement(e) && e.type === r);
	return /* @__PURE__ */ p("div", {
		ref: x,
		className: e(S, c.River__content, c[`River__content--align-${a}`], h),
		style: {
			...C,
			...y
		},
		...b,
		children: [
			l.isValidElement(O) && !g && /* @__PURE__ */ f("div", {
				className: c.River__label,
				children: l.cloneElement(O, {})
			}),
			!O && l.isValidElement(k) && !g && /* @__PURE__ */ f("div", {
				className: c.River__label,
				children: k
			}),
			!O && !k && g && /* @__PURE__ */ f("div", {
				className: c.River__leadingComponent,
				children: /* @__PURE__ */ f(g, {})
			}),
			l.isValidElement(T) && /* @__PURE__ */ f("div", {
				className: c.River__heading,
				children: l.cloneElement(T, {
					as: T.props.as || "h3",
					size: T.props.size || "5",
					weight: T.props.weight,
					className: e(T.props.className, c["River__heading-inner"])
				})
			}),
			l.isValidElement(E) && /* @__PURE__ */ f("div", {
				className: c["River__body-text"],
				children: l.cloneElement(E, {
					variant: "muted",
					as: "p",
					className: e(c.River__text, E.props.className)
				})
			}),
			l.isValidElement(D) && /* @__PURE__ */ f("div", {
				className: c["River__call-to-action"],
				children: l.cloneElement(D, {
					size: "medium",
					variant: D.props.variant || "accent"
				})
			}),
			_ && /* @__PURE__ */ f("div", {
				className: e(c.River__trailingComponent, v && c["River__trailingComponent--divider"]),
				children: /* @__PURE__ */ f(_, {})
			})
		]
	});
}), y = [
	"default",
	"center",
	"block-end",
	"block-end-inline-start",
	"block-end-inline-end"
], b = [
	"default",
	"none",
	"all"
], x = u(({ fillMedia: t = !0, children: n, className: r, hasShadow: i = !1, rounded: a = !0, ...o }, s) => /* @__PURE__ */ f("div", {
	ref: s,
	className: e(c.River__visual, i && c["River__visual--has-shadow"], t && c["River__visual--fill-media"], a && c["River__visual--rounded"], r),
	...o,
	children: n
})), S = u(({ className: t, position: n = "default", padding: r = "default", ...i }, a) => /* @__PURE__ */ f(x, {
	ref: a,
	className: e(n !== "default" && c[`River__visual--position-${n}`], r !== "default" && c[`River__visual--padding-${r}`], t),
	...i
})), C = Object.assign(_, {
	Visual: S,
	Content: v
});
//#endregion
export { C as River, v as RiverContent, x as RiverVisualBase, b as RiverVisualPaddingOptions, y as RiverVisualPositionOptions, h as defaultRiverAlign, m as defaultRiverImageTextRatio, g as defaultRiverVariant };

//# sourceMappingURL=River.js.map