@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 { ExpandableArrow as o } from "../ExpandableArrow/ExpandableArrow.js";
import { Image as s } from "../Image/Image.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-DgOt50dE.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 = ["default", "none"], C = t, w = C[0], T = v[0], E = x[0], D = m(({ align: t = "start", onMouseEnter: i, onMouseLeave: a, onFocus: s, onBlur: l, children: u, className: m, ctaText: _ = "Learn more", ctaVariant: v = T, disableAnimation: y = !1, fullWidth: b = !1, href: x, hasBorder: S = !1, leadingVisual: C, style: w, variant: E = "default", backgroundColor: D, ...A }, j) => {
	let M = n(j), N = D ?? (E === "minimal" || v === "arrow" ? "none" : "default"), P;
	P = u == null ? null : d(u) ? u.props.children ?? null : u;
	let { cardImage: F, cardIcon: I, cardLabel: U, cardTokensBlockStart: W, cardTokensBlockEnd: G, cardHeading: K, cardDescription: q } = p.Children.toArray(P).reduce((e, t) => (V(t) ? e.cardHeading = p.cloneElement(t, { href: x }) : L(t) ? e.cardImage = t : R(t) ? e.cardIcon = t : z(t) ? e.cardLabel = t : B(t) ? t.props.position === "block-end" ? e.cardTokensBlockEnd = t : e.cardTokensBlockStart = t : H(t) && (e.cardDescription = t), e), {});
	(process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && C && I && console.warn("Card: `leadingVisual` and `Card.Icon` cannot be used together. `Card.Icon` will not be rendered.");
	let J = k(C), Y = J ? void 0 : I, X = F ? F.props.position || "block-start" : null, Z = !(t === "center" && v === "text");
	return /* @__PURE__ */ h(O, {
		style: w,
		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: w,
			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(o, {
							className: e(c["Link-arrow"], f["Card--expandableArrow"]),
							"aria-hidden": "true"
						})
					}) : null]
				})
			]
		})
	});
});
function O({ className: t, children: n, style: r }) {
	return /* @__PURE__ */ h("div", {
		className: e(f.Card__outer, t),
		style: r,
		children: n
	});
}
function k(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 A({ className: t, position: n = "block-start", padding: r = "default", ...i }) {
	return /* @__PURE__ */ h("div", {
		className: e(f.Card__image, f[`Card__image--position-${n}`], r === "none" && f["Card__image--padding-none"]),
		children: /* @__PURE__ */ h(s, {
			className: t,
			...i
		})
	});
}
var j = ({ className: t, hasBackground: n = !0, ...r }) => /* @__PURE__ */ h(l, {
	className: e(f.Card__icon, t),
	hasBackground: n,
	...r
}), M = 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
})), N = m(({ children: t, variant: n = E, 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
})), P = 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
	})
})), F = 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
})), I = (e) => (t) => p.isValidElement(t) && t.type === e, L = I(A), R = I(j), z = I(N), B = I(M), V = I(P), H = I(F), U = Object.assign(D, {
	Image: A,
	Icon: j,
	Label: N,
	Tokens: M,
	Heading: P,
	Description: F
});
//#endregion
export { U as Card, y as CardBackgroundColors, v as CardCTAVariants, C as CardIconColors, S as CardImagePaddingOptions, x as CardLabelVariants, b as CardTokenPositions, _ as CardVariants, T as defaultCardCTAVariant, w as defaultCardIconColor, E as defaultCardLabelVariant };

//# sourceMappingURL=Card.js.map