@primer/react
Version:
An implementation of GitHub's Primer Design System using React
502 lines (501 loc) • 12.2 kB
JavaScript
import { useId as useId$1 } from "../hooks/useId.js";
import { fixedForwardRef } from "../utils/modern-polymorphic.js";
import Card_module_css_default from "./Card.module.css.js";
import { c } from "react-compiler-runtime";
import { clsx } from "clsx";
import { jsx, jsxs } from "react/jsx-runtime";
import React, { createContext, forwardRef, useContext } from "react";
//#region src/Card/Card.tsx
const CardContext = /*#__PURE__*/ createContext({});
function CardComponent(props, ref) {
const $ = c(71);
const { children, className, padding: t0, borderRadius: t1, layout: t2, as: t3, ...rest } = props;
const padding = t0 === void 0 ? "normal" : t0;
const borderRadius = t1 === void 0 ? "large" : t1;
const layout = t2 === void 0 ? "default" : t2;
const as = t3 === void 0 ? "div" : t3;
const Component = as;
const generatedId = useId$1();
const titleId = as === "section" ? generatedId : void 0;
if (as === "section" && !("aria-label" in props) && !("aria-labelledby" in props)) rest["aria-labelledby"] = titleId;
let T0;
let T1;
let description;
let heading;
let menu;
let metadata;
let t10;
let t11;
let t12;
let t13;
let t4;
let t5;
let t6;
let t7;
let t8;
let t9;
if ($[0] !== Component || $[1] !== borderRadius || $[2] !== children || $[3] !== className || $[4] !== layout || $[5] !== padding || $[6] !== ref || $[7] !== rest || $[8] !== titleId) {
t13 = Symbol.for("react.early_return_sentinel");
bb0: {
let icon = null;
let image = null;
heading = null;
description = null;
metadata = null;
menu = null;
const childArray = React.Children.toArray(children);
for (const child of childArray) {
if (!/*#__PURE__*/ React.isValidElement(child)) continue;
if (child.type === CardIcon) icon = child;
else if (child.type === CardImage) image = child;
else if (child.type === CardHeading) heading = child;
else if (child.type === CardDescription) description = child;
else if (child.type === CardMetadata) metadata = child;
else if (child.type === CardAction) menu = child;
}
const hasSlotChildren = icon || image || heading || description || metadata || menu;
if (!hasSlotChildren && childArray.length === 0) {
t13 = null;
break bb0;
}
if (!hasSlotChildren) {
let t14;
if ($[25] !== titleId) {
t14 = { titleId };
$[25] = titleId;
$[26] = t14;
} else t14 = $[26];
let t15;
if ($[27] !== className) {
t15 = clsx(Card_module_css_default.Card, className);
$[27] = className;
$[28] = t15;
} else t15 = $[28];
let t16;
if ($[29] !== Component || $[30] !== borderRadius || $[31] !== children || $[32] !== layout || $[33] !== padding || $[34] !== ref || $[35] !== rest || $[36] !== t15) {
t16 = /*#__PURE__*/ jsx(Component, {
ref,
className: t15,
"data-component": "Card",
"data-padding": padding,
"data-border-radius": borderRadius,
"data-layout": layout,
...rest,
children
});
$[29] = Component;
$[30] = borderRadius;
$[31] = children;
$[32] = layout;
$[33] = padding;
$[34] = ref;
$[35] = rest;
$[36] = t15;
$[37] = t16;
} else t16 = $[37];
let t17;
if ($[38] !== t14 || $[39] !== t16) {
t17 = /*#__PURE__*/ jsx(CardContext.Provider, {
value: t14,
children: t16
});
$[38] = t14;
$[39] = t16;
$[40] = t17;
} else t17 = $[40];
t13 = t17;
break bb0;
}
T1 = CardContext.Provider;
if ($[41] !== titleId) {
t12 = { titleId };
$[41] = titleId;
$[42] = t12;
} else t12 = $[42];
T0 = Component;
t4 = ref;
if ($[43] !== className) {
t5 = clsx(Card_module_css_default.Card, className);
$[43] = className;
$[44] = t5;
} else t5 = $[44];
t6 = "Card";
t7 = padding;
t8 = borderRadius;
t9 = layout;
t10 = rest;
t11 = (image || icon) && /*#__PURE__*/ jsx("div", {
className: clsx(Card_module_css_default.CardHeader, image && Card_module_css_default.CardHeaderEdgeToEdge),
children: image || icon
});
}
$[0] = Component;
$[1] = borderRadius;
$[2] = children;
$[3] = className;
$[4] = layout;
$[5] = padding;
$[6] = ref;
$[7] = rest;
$[8] = titleId;
$[9] = T0;
$[10] = T1;
$[11] = description;
$[12] = heading;
$[13] = menu;
$[14] = metadata;
$[15] = t10;
$[16] = t11;
$[17] = t12;
$[18] = t13;
$[19] = t4;
$[20] = t5;
$[21] = t6;
$[22] = t7;
$[23] = t8;
$[24] = t9;
} else {
T0 = $[9];
T1 = $[10];
description = $[11];
heading = $[12];
menu = $[13];
metadata = $[14];
t10 = $[15];
t11 = $[16];
t12 = $[17];
t13 = $[18];
t4 = $[19];
t5 = $[20];
t6 = $[21];
t7 = $[22];
t8 = $[23];
t9 = $[24];
}
if (t13 !== Symbol.for("react.early_return_sentinel")) return t13;
let t14;
if ($[45] !== description || $[46] !== heading) {
t14 = /*#__PURE__*/ jsxs("div", {
className: Card_module_css_default.CardContent,
children: [heading, description]
});
$[45] = description;
$[46] = heading;
$[47] = t14;
} else t14 = $[47];
let t15;
if ($[48] !== metadata) {
t15 = metadata ? /*#__PURE__*/ jsx("div", {
className: Card_module_css_default.CardMetadataContainer,
children: metadata
}) : null;
$[48] = metadata;
$[49] = t15;
} else t15 = $[49];
let t16;
if ($[50] !== t14 || $[51] !== t15) {
t16 = /*#__PURE__*/ jsxs("div", {
className: Card_module_css_default.CardBody,
children: [t14, t15]
});
$[50] = t14;
$[51] = t15;
$[52] = t16;
} else t16 = $[52];
let t17;
if ($[53] !== menu) {
t17 = menu ? /*#__PURE__*/ jsx("div", {
className: Card_module_css_default.CardAction,
children: menu
}) : null;
$[53] = menu;
$[54] = t17;
} else t17 = $[54];
let t18;
if ($[55] !== T0 || $[56] !== t10 || $[57] !== t11 || $[58] !== t16 || $[59] !== t17 || $[60] !== t4 || $[61] !== t5 || $[62] !== t6 || $[63] !== t7 || $[64] !== t8 || $[65] !== t9) {
t18 = /*#__PURE__*/ jsxs(T0, {
ref: t4,
className: t5,
"data-component": t6,
"data-padding": t7,
"data-border-radius": t8,
"data-layout": t9,
...t10,
children: [
t11,
t16,
t17
]
});
$[55] = T0;
$[56] = t10;
$[57] = t11;
$[58] = t16;
$[59] = t17;
$[60] = t4;
$[61] = t5;
$[62] = t6;
$[63] = t7;
$[64] = t8;
$[65] = t9;
$[66] = t18;
} else t18 = $[66];
let t19;
if ($[67] !== T1 || $[68] !== t12 || $[69] !== t18) {
t19 = /*#__PURE__*/ jsx(T1, {
value: t12,
children: t18
});
$[67] = T1;
$[68] = t12;
$[69] = t18;
$[70] = t19;
} else t19 = $[70];
return t19;
}
CardComponent.displayName = "Card";
const CardImpl = fixedForwardRef(CardComponent);
function CardIcon(t0) {
const $ = c(10);
const { icon: IconComponent, "aria-label": ariaLabel, className } = t0;
let t1;
if ($[0] !== className) {
t1 = clsx(Card_module_css_default.CardIcon, className);
$[0] = className;
$[1] = t1;
} else t1 = $[1];
const t2 = ariaLabel ? "img" : void 0;
const t3 = !ariaLabel;
let t4;
if ($[2] !== IconComponent) {
t4 = /*#__PURE__*/ jsx(IconComponent, {});
$[2] = IconComponent;
$[3] = t4;
} else t4 = $[3];
let t5;
if ($[4] !== ariaLabel || $[5] !== t1 || $[6] !== t2 || $[7] !== t3 || $[8] !== t4) {
t5 = /*#__PURE__*/ jsx("span", {
className: t1,
"data-component": "Card.Icon",
role: t2,
"aria-label": ariaLabel,
"aria-hidden": t3,
children: t4
});
$[4] = ariaLabel;
$[5] = t1;
$[6] = t2;
$[7] = t3;
$[8] = t4;
$[9] = t5;
} else t5 = $[9];
return t5;
}
CardIcon.displayName = "Card.Icon";
function CardImage(t0) {
const $ = c(12);
let className;
let rest;
let src;
let t1;
if ($[0] !== t0) {
({src, alt: t1, className, ...rest} = t0);
$[0] = t0;
$[1] = className;
$[2] = rest;
$[3] = src;
$[4] = t1;
} else {
className = $[1];
rest = $[2];
src = $[3];
t1 = $[4];
}
const alt = t1 === void 0 ? "" : t1;
let t2;
if ($[5] !== className) {
t2 = clsx(Card_module_css_default.CardImage, className);
$[5] = className;
$[6] = t2;
} else t2 = $[6];
let t3;
if ($[7] !== alt || $[8] !== rest || $[9] !== src || $[10] !== t2) {
t3 = /*#__PURE__*/ jsx("img", {
...rest,
src,
alt,
className: t2,
"data-component": "Card.Image"
});
$[7] = alt;
$[8] = rest;
$[9] = src;
$[10] = t2;
$[11] = t3;
} else t3 = $[11];
return t3;
}
CardImage.displayName = "Card.Image";
/**
* Heading shown at the top of a Card.
*
* When the parent Card uses `as="section"`, the heading's `id` is
* automatically wired to the section's `aria-labelledby`.
*/
const CardHeading = /*#__PURE__*/ forwardRef(function CardHeading(t0, ref) {
var _id;
const $ = c(15);
let children;
let className;
let id;
let rest;
let t1;
if ($[0] !== t0) {
({as: t1, children, className, id, ...rest} = t0);
$[0] = t0;
$[1] = children;
$[2] = className;
$[3] = id;
$[4] = rest;
$[5] = t1;
} else {
children = $[1];
className = $[2];
id = $[3];
rest = $[4];
t1 = $[5];
}
const Component = t1 === void 0 ? "h3" : t1;
const { titleId } = useContext(CardContext);
const t2 = (_id = id) !== null && _id !== void 0 ? _id : titleId;
let t3;
if ($[6] !== className) {
t3 = clsx(Card_module_css_default.CardHeading, className);
$[6] = className;
$[7] = t3;
} else t3 = $[7];
let t4;
if ($[8] !== Component || $[9] !== children || $[10] !== ref || $[11] !== rest || $[12] !== t2 || $[13] !== t3) {
t4 = /*#__PURE__*/ jsx(Component, {
...rest,
ref,
id: t2,
className: t3,
"data-component": "Card.Heading",
children
});
$[8] = Component;
$[9] = children;
$[10] = ref;
$[11] = rest;
$[12] = t2;
$[13] = t3;
$[14] = t4;
} else t4 = $[14];
return t4;
});
CardHeading.displayName = "Card.Heading";
const CardDescription = /*#__PURE__*/ forwardRef(function CardDescription(t0, ref) {
const $ = c(11);
let children;
let className;
let rest;
if ($[0] !== t0) {
({children, className, ...rest} = t0);
$[0] = t0;
$[1] = children;
$[2] = className;
$[3] = rest;
} else {
children = $[1];
className = $[2];
rest = $[3];
}
let t1;
if ($[4] !== className) {
t1 = clsx(Card_module_css_default.CardDescription, className);
$[4] = className;
$[5] = t1;
} else t1 = $[5];
let t2;
if ($[6] !== children || $[7] !== ref || $[8] !== rest || $[9] !== t1) {
t2 = /*#__PURE__*/ jsx("p", {
...rest,
ref,
className: t1,
"data-component": "Card.Description",
children
});
$[6] = children;
$[7] = ref;
$[8] = rest;
$[9] = t1;
$[10] = t2;
} else t2 = $[10];
return t2;
});
CardDescription.displayName = "Card.Description";
/**
* Top-right slot for a single interactive control.
*
* Give the control a label that names the card (e.g. `"More options for
* Project Alpha"`, not just `"More options"`) so users can tell which card
* the action applies to when several cards are visible.
*/
function CardAction(t0) {
const $ = c(2);
const { children } = t0;
let t1;
if ($[0] !== children) {
t1 = /*#__PURE__*/ jsx("div", {
"data-component": "Card.Action",
children
});
$[0] = children;
$[1] = t1;
} else t1 = $[1];
return t1;
}
CardAction.displayName = "Card.Action";
const CardMetadata = /*#__PURE__*/ forwardRef(function CardMetadata(t0, ref) {
const $ = c(11);
let children;
let className;
let rest;
if ($[0] !== t0) {
({children, className, ...rest} = t0);
$[0] = t0;
$[1] = children;
$[2] = className;
$[3] = rest;
} else {
children = $[1];
className = $[2];
rest = $[3];
}
let t1;
if ($[4] !== className) {
t1 = clsx(Card_module_css_default.CardMetadataItem, className);
$[4] = className;
$[5] = t1;
} else t1 = $[5];
let t2;
if ($[6] !== children || $[7] !== ref || $[8] !== rest || $[9] !== t1) {
t2 = /*#__PURE__*/ jsx("div", {
...rest,
ref,
className: t1,
"data-component": "Card.Metadata",
children
});
$[6] = children;
$[7] = ref;
$[8] = rest;
$[9] = t1;
$[10] = t2;
} else t2 = $[10];
return t2;
});
CardMetadata.displayName = "Card.Metadata";
//#endregion
export { CardAction, CardDescription, CardHeading, CardIcon, CardImage, CardImpl, CardMetadata };