@primer/react-brand/esm/Card/Card.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 { Colors as t } from "../constants.js";
import { useProvidedRefOrCreate as n } from "../hooks/useRef.js";
import { Text as r } from "../Text/Text.js";
import { EyebrowText as i } from "../EyebrowText/EyebrowText.js";
import { Heading as a } from "../Heading/Heading.js";
import { Image as o } from "../Image/Image.js";
import { ExpandableArrow as s } from "../ExpandableArrow/ExpandableArrow.js";
import c from "../Link/Link.module.js";
import { Icon as l } from "../Icon/Icon.js";
import { Token as u } from "../Token/Token.js";
import { isFragmentElement as d } from "../utils/isFragmentElement.js";
import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes-C43pQ5wc.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/card/base-BRKNIzyd.css';/* empty css                                                                                     */
/* empty css                                                                                                  */
import f from "./Card.module.js";
import p, { forwardRef as m } from "react";
import { jsx as h, jsxs as g } from "react/jsx-runtime";
//#region src/Card/Card.tsx
var _ = ["default", "minimal"], v = [
	"text",
	"arrow",
	"none"
], y = [
	"default",
	"subtle",
	"none"
], b = ["block-start", "block-end"], x = ["token", "accent-text"], S = t, C = S[0], w = v[0], T = x[0], E = m(({ align: t = "start", onMouseEnter: i, onMouseLeave: a, onFocus: o, onBlur: l, children: u, className: m, ctaText: _ = "Learn more", ctaVariant: v = w, disableAnimation: y = !1, fullWidth: b = !1, href: x, hasBorder: S = !1, leadingVisual: C, style: T, variant: E = "default", backgroundColor: k, ...A }, j) => {
	let M = n(j), N = k ?? (E === "minimal" || v === "arrow" ? "none" : "default"), P;
	P = u == null ? null : d(u) ? u.props.children ?? null : u;
	let { cardImage: F, cardIcon: H, cardLabel: U, cardTokensBlockStart: W, cardTokensBlockEnd: G, cardHeading: K, cardDescription: q } = p.Children.toArray(P).reduce((e, t) => (B(t) ? e.cardHeading = p.cloneElement(t, { href: x }) : I(t) ? e.cardImage = t : L(t) ? e.cardIcon = t : R(t) ? e.cardLabel = t : z(t) ? t.props.position === "block-end" ? e.cardTokensBlockEnd = t : e.cardTokensBlockStart = t : V(t) && (e.cardDescription = t), e), {});
	(process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && C && H && console.warn("Card: `leadingVisual` and `Card.Icon` cannot be used together. `Card.Icon` will not be rendered.");
	let J = O(C), Y = J ? void 0 : H, X = F ? F.props.position || "block-start" : null, Z = !(t === "center" && v === "text");
	return /* @__PURE__ */ h(D, {
		style: T,
		className: e(b ? f["Card--fullWidth"] : f["Card--maxWidth"], f[`Card--align-${t}`]),
		children: /* @__PURE__ */ g("div", {
			className: e(f.Card, y && f["Card--disableAnimation"], J && f["Card--hasLeadingVisual"], v === "arrow" && f["Card--ctaVariant-arrow"], G && f["Card--tokensPosition-block-end"], E === "minimal" && f["Card--variant-minimal"], S && f["Card--border"], f[`Card--backgroundColor-${N}`], X && f[`Card--imagePos-${X}`], m),
			style: T,
			ref: M,
			...A,
			children: [
				X === "block-start" ? F : null,
				J ? /* @__PURE__ */ h("div", {
					className: f.Card__leadingVisual,
					children: J
				}) : null,
				Y,
				W,
				U,
				K,
				q,
				G,
				X === "block-end" ? F : null,
				v === "none" ? null : /* @__PURE__ */ g("div", {
					className: e(f.Card__action, v === "arrow" && f["Card__action--arrowOnly"]),
					"aria-hidden": v === "arrow" ? !0 : void 0,
					children: [/* @__PURE__ */ h("span", {
						className: e(v === "arrow" && f.Card__actionLabelClip),
						children: /* @__PURE__ */ h(r, {
							as: "span",
							size: "200",
							className: e(c["Link--label"], f.Card__actionLabel),
							children: _
						})
					}), Z ? /* @__PURE__ */ h("span", {
						className: e(f.Card__actionIcon, v === "arrow" && f["Card__actionIcon--arrowOnly"]),
						children: /* @__PURE__ */ h(s, {
							className: e(c["Link-arrow"], f["Card--expandableArrow"]),
							"aria-hidden": "true"
						})
					}) : null]
				})
			]
		})
	});
});
function D({ className: t, children: n, style: r }) {
	return /* @__PURE__ */ h("div", {
		className: e(f.Card__outer, t),
		style: r,
		children: n
	});
}
function O(t) {
	return t ? typeof t == "function" ? p.createElement(t, { className: f.Card__leadingVisualItem }) : p.isValidElement(t) ? p.cloneElement(t, { className: e(f.Card__leadingVisualItem, t.props.className) }) : null : null;
}
function k({ className: e, ...t }) {
	return /* @__PURE__ */ h("div", {
		className: f.Card__image,
		children: /* @__PURE__ */ h(o, {
			className: e,
			...t
		})
	});
}
var A = ({ className: t, hasBackground: n = !0, ...r }) => /* @__PURE__ */ h(l, {
	className: e(f.Card__icon, t),
	hasBackground: n,
	...r
}), j = m(({ children: t, className: n, position: r = "block-start", ...i }, a) => /* @__PURE__ */ h("div", {
	className: e(f.Card__tokens, r === "block-end" && f["Card__tokens--position-block-end"], n),
	ref: a,
	...i,
	children: t
})), M = m(({ children: t, variant: n = T, className: r, ...a }, o) => n === "accent-text" ? /* @__PURE__ */ h(i, {
	ref: o,
	className: e(f.Card__label, r),
	variant: "accent",
	...a,
	children: t
}) : /* @__PURE__ */ h(u, {
	ref: o,
	className: e(f.Card__label, r),
	...a,
	children: t
})), N = m(({ children: t, as: n = "h3", className: r, href: i, onMouseEnter: o, onMouseLeave: s, onBlur: c, onFocus: l, ...u }, d) => /* @__PURE__ */ h(a, {
	size: "6",
	className: e(f.Card__heading, r),
	ref: d,
	as: n,
	...u,
	children: /* @__PURE__ */ h("a", {
		href: i,
		className: e(f.Card__link),
		onMouseEnter: o,
		onMouseLeave: s,
		onBlur: c,
		onFocus: l,
		children: t
	})
})), P = m(({ children: t, className: n, ...i }, a) => /* @__PURE__ */ h(r, {
	variant: "muted",
	ref: a,
	size: "200",
	as: "p",
	className: e(f.Card__description, n),
	...i,
	children: t
})), F = (e) => (t) => p.isValidElement(t) && t.type === e, I = F(k), L = F(A), R = F(M), z = F(j), B = F(N), V = F(P), H = Object.assign(E, {
	Image: k,
	Icon: A,
	Label: M,
	Tokens: j,
	Heading: N,
	Description: P
});
//#endregion
export { H as Card, y as CardBackgroundColors, v as CardCTAVariants, S as CardIconColors, x as CardLabelVariants, b as CardTokenPositions, _ as CardVariants, w as defaultCardCTAVariant, C as defaultCardIconColor, T as defaultCardLabelVariant };

//# sourceMappingURL=Card.js.map