@primer/react 38.19.1-rc.d5c143d51 → 38.20.0-rc.6c6ee0bb1

package/CHANGELOG.md

@@ -1,11 +1,17 @@
 # @primer/react
 
-## 38.19.1
+## 38.20.0
+
+### Minor Changes
+
+- [#7723](https://github.com/primer/react/pull/7723) [`ec6c88f`](https://github.com/primer/react/commit/ec6c88fe3eb3ef349500617c90378712f802376d) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Add Card component with subcomponents: Card.Icon, Card.Image, Card.Heading, Card.Description, Card.Menu, and Card.Metadata
 
 ### Patch Changes
 
 - [#7738](https://github.com/primer/react/pull/7738) [`f5f2869`](https://github.com/primer/react/commit/f5f28691d9e5c9f8495e8c592635d2b616f7cb49) Thanks [@francinelucca](https://github.com/francinelucca)! - ActionMenu, Table: Fix component mutation issue where `Object.assign` was modifying original `@primer/react` components. Now uses wrapper components to avoid side effects.
 
+- [#7746](https://github.com/primer/react/pull/7746) [`30206c4`](https://github.com/primer/react/commit/30206c4fab92de8888f3f103f9b05bff96fdc1b9) Thanks [@jonrohan](https://github.com/jonrohan)! - Update TokenTextContainer `line-height` to use primer primitives CSS variable `var(--base-text-lineHeight-normal)`
+
 ## 38.19.0
 
 ### Minor Changes

package/dist/Card/Card-65d85331.css

@@ -0,0 +1,2 @@
+.prc-Card-Card-pYjuL{background-color:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-large,.75rem);box-shadow:var(--shadow-resting-small,var(--color-shadow-small));display:grid;gap:var(--stack-gap-normal,1rem);grid-auto-rows:max-content auto;overflow:hidden;position:relative}.prc-Card-Card-pYjuL[data-padding=normal]{padding:var(--stack-padding-spacious,1.5rem)}.prc-Card-Card-pYjuL[data-padding=condensed]{padding:var(--stack-padding-condensed,.5rem)}.prc-Card-Card-pYjuL[data-padding=none]{padding:0}.prc-Card-CardHeader-P5Qbb{display:block;height:auto;width:100%}.prc-Card-CardHeaderEdgeToEdge-3yCqT{margin-left:calc(var(--stack-padding-spacious,1.5rem)*-1);margin-right:calc(var(--stack-padding-spacious,1.5rem)*-1);margin-top:calc(var(--stack-padding-spacious,1.5rem)*-1);width:calc(100% + var(--stack-padding-spacious,1.5rem)*2)}.prc-Card-CardImage-2M8DM{display:block;height:auto;width:100%}.prc-Card-CardIcon-mIMfj{align-items:center;background-color:var(--bgColor-muted,var(--color-canvas-subtle));border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-muted,var(--color-fg-muted));display:flex;height:var(--base-size-32,2rem);justify-content:center;width:var(--base-size-32,2rem)}.prc-Card-CardBody-W1o-l{display:grid;gap:var(--stack-gap-normal,1rem)}.prc-Card-CardContent-omZDS{display:grid;gap:var(--stack-gap-condensed,.5rem)}.prc-Card-CardHeading-3HXyS{color:var(--fgColor-default,var(--color-fg-default));font:var(--text-title-shorthand-small,600 1rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");margin:0}.prc-Card-CardDescription-MnJ3F{margin:0}.prc-Card-CardDescription-MnJ3F,.prc-Card-CardMetadataContainer-K-UlH{color:var(--fgColor-muted,var(--color-fg-muted));font:var(--text-body-shorthand-medium,400 .875rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji")}.prc-Card-CardMetadataContainer-K-UlH{align-items:center;display:flex;gap:var(--stack-gap-normal,1rem)}.prc-Card-CardMetadataItem-ellY9{align-items:center;display:flex;font:var(--text-body-shorthand-small,400 .75rem/1.625 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");gap:var(--stack-gap-condensed,.5rem)}.prc-Card-CardMenu-1b3uS{position:absolute;right:var(--base-size-16,1rem);top:var(--base-size-16,1rem);z-index:1}
+/*# sourceMappingURL=Card-65d85331.css.map */

package/dist/Card/Card-65d85331.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Card/Card.module.css.js"],"names":[],"mappings":"AAAA,qBAQE,mEAAwC,CAFxC,oGAAgE,CAHhE,8CAAwC,CAIxC,gEAAuC,CANvC,YAAa,CAQb,gCAA4B,CAJ5B,+BAAgC,CADhC,eAAgB,CAFhB,iBAsBF,CAbE,0CAEE,4CACF,CAEA,6CAEE,4CACF,CAEA,wCACE,SACF,CAGF,2BACE,aAAc,CAEd,WAAY,CADZ,UAEF,CAEA,qCAIE,yDAAqD,CADrD,0DAAsD,CADtD,wDAAoD,CAGpD,yDAEF,CAEA,0BACE,aAAc,CAEd,WAAY,CADZ,UAEF,CAEA,yBAEE,kBAAmB,CAKnB,gEAAsC,CADtC,gDAAyC,CAEzC,gDAA2B,CAP3B,YAAa,CAIb,+BAA2B,CAF3B,sBAAuB,CACvB,8BAKF,CAEA,yBACE,YAAa,CACb,gCACF,CAEA,4BACE,YAAa,CACb,oCACF,CAEA,4BAEE,oDAA6B,CAD7B,2KAAuC,CAEvC,QACF,CAEA,gCAGE,QACF,CAEA,sEAJE,gDAA2B,CAD3B,8KAWF,CANA,sCAEE,kBAAmB,CADnB,YAAa,CAEb,gCAGF,CAEA,iCAEE,kBAAmB,CADnB,YAAa,CAGb,8KAAsC,CADtC,oCAEF,CAEA,yBACE,iBAAkB,CAElB,8BAA0B,CAD1B,4BAAwB,CAExB,SACF","file":"Card-65d85331.css","sourcesContent":[".Card {\n  display: grid;\n  position: relative;\n  border-radius: var(--borderRadius-large);\n  overflow: hidden;\n  grid-auto-rows: max-content auto;\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  box-shadow: var(--shadow-resting-small);\n  background-color: var(--bgColor-default);\n  gap: var(--stack-gap-normal);\n\n  &[data-padding='normal'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding: var(--stack-padding-spacious);\n  }\n\n  &[data-padding='condensed'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding: var(--stack-padding-condensed);\n  }\n\n  &[data-padding='none'] {\n    padding: 0;\n  }\n}\n\n.CardHeader {\n  display: block;\n  width: 100%;\n  height: auto;\n}\n\n.CardHeaderEdgeToEdge {\n  /* stylelint-disable primer/spacing */\n  margin-top: calc(-1 * var(--stack-padding-spacious));\n  margin-right: calc(-1 * var(--stack-padding-spacious));\n  margin-left: calc(-1 * var(--stack-padding-spacious));\n  width: calc(100% + 2 * var(--stack-padding-spacious));\n  /* stylelint-enable primer/spacing */\n}\n\n.CardImage {\n  display: block;\n  width: 100%;\n  height: auto;\n}\n\n.CardIcon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--base-size-32);\n  height: var(--base-size-32);\n  border-radius: var(--borderRadius-medium);\n  background-color: var(--bgColor-muted);\n  color: var(--fgColor-muted);\n}\n\n.CardBody {\n  display: grid;\n  gap: var(--stack-gap-normal);\n}\n\n.CardContent {\n  display: grid;\n  gap: var(--stack-gap-condensed);\n}\n\n.CardHeading {\n  font: var(--text-title-shorthand-small);\n  color: var(--fgColor-default);\n  margin: 0;\n}\n\n.CardDescription {\n  font: var(--text-body-shorthand-medium);\n  color: var(--fgColor-muted);\n  margin: 0;\n}\n\n.CardMetadataContainer {\n  display: flex;\n  align-items: center;\n  gap: var(--stack-gap-normal);\n  font: var(--text-body-shorthand-medium);\n  color: var(--fgColor-muted);\n}\n\n.CardMetadataItem {\n  display: flex;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n  font: var(--text-body-shorthand-small);\n}\n\n.CardMenu {\n  position: absolute;\n  top: var(--base-size-16);\n  right: var(--base-size-16);\n  z-index: 1;\n}\n"]}

package/dist/Card/Card.d.ts

@@ -0,0 +1,96 @@
+import React from 'react';
+export type CardProps = React.ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Provide an optional className to add to the outermost element rendered by
+     * the Card
+     */
+    className?: string;
+    /**
+     * Controls the internal padding of the Card.
+     * @default 'normal'
+     */
+    padding?: 'none' | 'condensed' | 'normal';
+};
+type HeadingLevel = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+type HeadingProps = React.ComponentPropsWithoutRef<'h3'> & {
+    /**
+     * The heading level to render. Defaults to 'h3'.
+     */
+    as?: HeadingLevel;
+    children: React.ReactNode;
+};
+type DescriptionProps = React.ComponentPropsWithoutRef<'p'> & {
+    children: React.ReactNode;
+};
+type IconProps = {
+    /**
+     * An Octicon or custom SVG icon to render
+     */
+    icon: React.ElementType;
+    /**
+     * Accessible label for the icon. When omitted, the icon is treated as decorative.
+     */
+    'aria-label'?: string;
+    className?: string;
+};
+type ImageProps = React.ComponentPropsWithoutRef<'img'> & {
+    /**
+     * The image source URL
+     */
+    src: string;
+    /**
+     * Alt text for accessibility
+     */
+    alt?: string;
+};
+type MenuProps = {
+    children: React.ReactNode;
+};
+type MetadataProps = React.ComponentPropsWithoutRef<'div'> & {
+    children: React.ReactNode;
+};
+declare const CardImpl: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * Provide an optional className to add to the outermost element rendered by
+     * the Card
+     */
+    className?: string;
+    /**
+     * Controls the internal padding of the Card.
+     * @default 'normal'
+     */
+    padding?: "none" | "condensed" | "normal";
+} & React.RefAttributes<HTMLDivElement>>;
+declare const CardIcon: {
+    ({ icon: IconComponent, "aria-label": ariaLabel, className }: IconProps): React.JSX.Element;
+    displayName: string;
+};
+declare const CardImage: {
+    ({ src, alt, className, ...rest }: ImageProps): React.JSX.Element;
+    displayName: string;
+};
+declare const CardHeading: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+    /**
+     * The heading level to render. Defaults to 'h3'.
+     */
+    as?: HeadingLevel;
+    children: React.ReactNode;
+} & React.RefAttributes<HTMLHeadingElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    children: React.ReactNode;
+} & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardMenu: {
+    ({ children }: MenuProps): React.JSX.Element;
+    displayName: string;
+};
+declare const CardMetadata: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    children: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export { CardImpl, CardIcon, CardImage, CardHeading, CardDescription, CardMenu, CardMetadata };
+export type { HeadingProps as CardHeadingProps };
+export type { DescriptionProps as CardDescriptionProps };
+export type { IconProps as CardIconProps };
+export type { ImageProps as CardImageProps };
+export type { MenuProps as CardMenuProps };
+export type { MetadataProps as CardMetadataProps };
+//# sourceMappingURL=Card.d.ts.map

package/dist/Card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAC9D;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAA;CAC1C,CAAA;AAED,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEpD,KAAK,YAAY,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,GAAG;IACzD;;OAEG;IACH,EAAE,CAAC,EAAE,YAAY,CAAA;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,GAAG;IAC5D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED,KAAK,SAAS,GAAG;IACf;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,WAAW,CAAA;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,KAAK,UAAU,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACxD;;OAEG;IACH,GAAG,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED,KAAK,aAAa,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED,QAAA,MAAM,QAAQ;IA1DZ;;;OAGG;gBACS,MAAM;IAElB;;;OAGG;cACO,MAAM,GAAG,WAAW,GAAG,QAAQ;wCAwGzC,CAAA;AAEF,QAAA,MAAM,QAAQ;kEAA+D,SAAS;;CAWrF,CAAA;AAID,QAAA,MAAM,SAAS;uCAAyC,UAAU;;CAEjE,CAAA;AAID,QAAA,MAAM,WAAW;IAzHf;;OAEG;SACE,YAAY;cACP,KAAK,CAAC,SAAS;4CA8HzB,CAAA;AAEF,QAAA,MAAM,eAAe;cA5HT,KAAK,CAAC,SAAS;8CAqIzB,CAAA;AAEF,QAAA,MAAM,QAAQ;mBAAgB,SAAS;;CAEtC,CAAA;AAID,QAAA,MAAM,YAAY;cA9GN,KAAK,CAAC,SAAS;wCAuHzB,CAAA;AAEF,OAAO,EAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,YAAY,EAAC,CAAA;AAC5F,YAAY,EAAC,YAAY,IAAI,gBAAgB,EAAC,CAAA;AAC9C,YAAY,EAAC,gBAAgB,IAAI,oBAAoB,EAAC,CAAA;AACtD,YAAY,EAAC,SAAS,IAAI,aAAa,EAAC,CAAA;AACxC,YAAY,EAAC,UAAU,IAAI,cAAc,EAAC,CAAA;AAC1C,YAAY,EAAC,SAAS,IAAI,aAAa,EAAC,CAAA;AACxC,YAAY,EAAC,aAAa,IAAI,iBAAiB,EAAC,CAAA"}

package/dist/Card/Card.js

@@ -0,0 +1,485 @@
+import { c } from 'react-compiler-runtime';
+import { clsx } from 'clsx';
+import React, { forwardRef } from 'react';
+import classes from './Card.module.css.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+const CardImpl = /*#__PURE__*/forwardRef(function Card(t0, ref) {
+  const $ = c(48);
+  let children;
+  let className;
+  let rest;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      children,
+      className,
+      padding: t1,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = rest;
+    $[4] = t1;
+  } else {
+    children = $[1];
+    className = $[2];
+    rest = $[3];
+    t1 = $[4];
+  }
+  const padding = t1 === undefined ? "normal" : t1;
+  let description;
+  let heading;
+  let menu;
+  let metadata;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  if ($[5] !== children || $[6] !== className || $[7] !== padding || $[8] !== ref || $[9] !== rest) {
+    t7 = 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 === CardMenu) {
+                    menu = child;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      const hasSlotChildren = icon || image || heading || description || metadata || menu;
+      if (!hasSlotChildren) {
+        let t8;
+        if ($[20] !== className) {
+          t8 = clsx(classes.Card, className);
+          $[20] = className;
+          $[21] = t8;
+        } else {
+          t8 = $[21];
+        }
+        let t9;
+        if ($[22] !== children || $[23] !== padding || $[24] !== ref || $[25] !== rest || $[26] !== t8) {
+          t9 = /*#__PURE__*/jsx("div", {
+            ref: ref,
+            className: t8,
+            "data-padding": padding,
+            ...rest,
+            children: children
+          });
+          $[22] = children;
+          $[23] = padding;
+          $[24] = ref;
+          $[25] = rest;
+          $[26] = t8;
+          $[27] = t9;
+        } else {
+          t9 = $[27];
+        }
+        t7 = t9;
+        break bb0;
+      }
+      t2 = ref;
+      if ($[28] !== className) {
+        t3 = clsx(classes.Card, className);
+        $[28] = className;
+        $[29] = t3;
+      } else {
+        t3 = $[29];
+      }
+      t4 = padding;
+      t5 = rest;
+      t6 = (image || icon) && /*#__PURE__*/jsx("div", {
+        className: clsx(classes.CardHeader, image && classes.CardHeaderEdgeToEdge),
+        children: image || icon
+      });
+    }
+    $[5] = children;
+    $[6] = className;
+    $[7] = padding;
+    $[8] = ref;
+    $[9] = rest;
+    $[10] = description;
+    $[11] = heading;
+    $[12] = menu;
+    $[13] = metadata;
+    $[14] = t2;
+    $[15] = t3;
+    $[16] = t4;
+    $[17] = t5;
+    $[18] = t6;
+    $[19] = t7;
+  } else {
+    description = $[10];
+    heading = $[11];
+    menu = $[12];
+    metadata = $[13];
+    t2 = $[14];
+    t3 = $[15];
+    t4 = $[16];
+    t5 = $[17];
+    t6 = $[18];
+    t7 = $[19];
+  }
+  if (t7 !== Symbol.for("react.early_return_sentinel")) {
+    return t7;
+  }
+  let t8;
+  if ($[30] !== description || $[31] !== heading) {
+    t8 = /*#__PURE__*/jsxs("div", {
+      className: classes.CardContent,
+      children: [heading, description]
+    });
+    $[30] = description;
+    $[31] = heading;
+    $[32] = t8;
+  } else {
+    t8 = $[32];
+  }
+  let t9;
+  if ($[33] !== metadata) {
+    t9 = metadata ? /*#__PURE__*/jsx("div", {
+      className: classes.CardMetadataContainer,
+      children: metadata
+    }) : null;
+    $[33] = metadata;
+    $[34] = t9;
+  } else {
+    t9 = $[34];
+  }
+  let t10;
+  if ($[35] !== t8 || $[36] !== t9) {
+    t10 = /*#__PURE__*/jsxs("div", {
+      className: classes.CardBody,
+      children: [t8, t9]
+    });
+    $[35] = t8;
+    $[36] = t9;
+    $[37] = t10;
+  } else {
+    t10 = $[37];
+  }
+  let t11;
+  if ($[38] !== menu) {
+    t11 = menu ? /*#__PURE__*/jsx("div", {
+      className: classes.CardMenu,
+      children: menu
+    }) : null;
+    $[38] = menu;
+    $[39] = t11;
+  } else {
+    t11 = $[39];
+  }
+  let t12;
+  if ($[40] !== t10 || $[41] !== t11 || $[42] !== t2 || $[43] !== t3 || $[44] !== t4 || $[45] !== t5 || $[46] !== t6) {
+    t12 = /*#__PURE__*/jsxs("div", {
+      ref: t2,
+      className: t3,
+      "data-padding": t4,
+      ...t5,
+      children: [t6, t10, t11]
+    });
+    $[40] = t10;
+    $[41] = t11;
+    $[42] = t2;
+    $[43] = t3;
+    $[44] = t4;
+    $[45] = t5;
+    $[46] = t6;
+    $[47] = t12;
+  } else {
+    t12 = $[47];
+  }
+  return t12;
+});
+const CardIcon = t0 => {
+  const $ = c(10);
+  const {
+    icon: IconComponent,
+    "aria-label": ariaLabel,
+    className
+  } = t0;
+  let t1;
+  if ($[0] !== className) {
+    t1 = clsx(classes.CardIcon, className);
+    $[0] = className;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const t2 = ariaLabel ? "img" : undefined;
+  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,
+      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';
+const 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 === undefined ? "" : t1;
+  let t2;
+  if ($[5] !== className) {
+    t2 = clsx(classes.CardImage, className);
+    $[5] = className;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== alt || $[8] !== rest || $[9] !== src || $[10] !== t2) {
+    t3 = /*#__PURE__*/jsx("img", {
+      src: src,
+      alt: alt,
+      className: t2,
+      ...rest
+    });
+    $[7] = alt;
+    $[8] = rest;
+    $[9] = src;
+    $[10] = t2;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  return t3;
+};
+CardImage.displayName = 'Card.Image';
+const CardHeading = /*#__PURE__*/forwardRef(function CardHeading(t0, ref) {
+  const $ = c(13);
+  let children;
+  let className;
+  let rest;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      as: t1,
+      children,
+      className,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = rest;
+    $[4] = t1;
+  } else {
+    children = $[1];
+    className = $[2];
+    rest = $[3];
+    t1 = $[4];
+  }
+  const Component = t1 === undefined ? "h3" : t1;
+  let t2;
+  if ($[5] !== className) {
+    t2 = clsx(classes.CardHeading, className);
+    $[5] = className;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== Component || $[8] !== children || $[9] !== ref || $[10] !== rest || $[11] !== t2) {
+    t3 = /*#__PURE__*/jsx(Component, {
+      ref: ref,
+      className: t2,
+      ...rest,
+      children: children
+    });
+    $[7] = Component;
+    $[8] = children;
+    $[9] = ref;
+    $[10] = rest;
+    $[11] = t2;
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  return t3;
+});
+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(classes.CardDescription, className);
+    $[4] = className;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[6] !== children || $[7] !== ref || $[8] !== rest || $[9] !== t1) {
+    t2 = /*#__PURE__*/jsx("p", {
+      ref: ref,
+      className: t1,
+      ...rest,
+      children: children
+    });
+    $[6] = children;
+    $[7] = ref;
+    $[8] = rest;
+    $[9] = t1;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  return t2;
+});
+const CardMenu = t0 => {
+  const $ = c(2);
+  const {
+    children
+  } = t0;
+  let t1;
+  if ($[0] !== children) {
+    t1 = /*#__PURE__*/jsx(Fragment, {
+      children: children
+    });
+    $[0] = children;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+};
+CardMenu.displayName = 'Card.Menu';
+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(classes.CardMetadataItem, className);
+    $[4] = className;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[6] !== children || $[7] !== ref || $[8] !== rest || $[9] !== t1) {
+    t2 = /*#__PURE__*/jsx("div", {
+      ref: ref,
+      className: t1,
+      ...rest,
+      children: children
+    });
+    $[6] = children;
+    $[7] = ref;
+    $[8] = rest;
+    $[9] = t1;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  return t2;
+});
+
+export { CardDescription, CardHeading, CardIcon, CardImage, CardImpl, CardMenu, CardMetadata };

package/dist/Card/Card.module.css.js

@@ -0,0 +1,5 @@
+import './Card-65d85331.css';
+
+var classes = {"Card":"prc-Card-Card-pYjuL","CardHeader":"prc-Card-CardHeader-P5Qbb","CardHeaderEdgeToEdge":"prc-Card-CardHeaderEdgeToEdge-3yCqT","CardImage":"prc-Card-CardImage-2M8DM","CardIcon":"prc-Card-CardIcon-mIMfj","CardBody":"prc-Card-CardBody-W1o-l","CardContent":"prc-Card-CardContent-omZDS","CardHeading":"prc-Card-CardHeading-3HXyS","CardDescription":"prc-Card-CardDescription-MnJ3F","CardMetadataContainer":"prc-Card-CardMetadataContainer-K-UlH","CardMetadataItem":"prc-Card-CardMetadataItem-ellY9","CardMenu":"prc-Card-CardMenu-1b3uS"};
+
+export { classes as default };

package/dist/Card/index.d.ts

@@ -0,0 +1,31 @@
+import type { CardProps, CardIconProps, CardImageProps, CardHeadingProps, CardDescriptionProps, CardMenuProps, CardMetadataProps } from './Card';
+declare const Card: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    className?: string;
+    padding?: "none" | "condensed" | "normal";
+} & import("react").RefAttributes<HTMLDivElement>> & {
+    Icon: {
+        ({ icon: IconComponent, "aria-label": ariaLabel, className }: CardIconProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Image: {
+        ({ src, alt, className, ...rest }: CardImageProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Heading: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+        as?: "h2" | "h3" | "h4" | "h5" | "h6";
+        children: React.ReactNode;
+    } & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+        children: React.ReactNode;
+    } & import("react").RefAttributes<HTMLParagraphElement>>;
+    Menu: {
+        ({ children }: CardMenuProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Metadata: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        children: React.ReactNode;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+};
+export { Card };
+export type { CardProps, CardIconProps, CardImageProps, CardHeadingProps, CardDescriptionProps, CardMenuProps, CardMetadataProps, };
+//# sourceMappingURL=index.d.ts.map

package/dist/Card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Card/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,SAAS,EACT,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,aAAa,EACb,iBAAiB,EAClB,MAAM,QAAQ,CAAA;AAEf,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;CAOR,CAAA;AAEF,OAAO,EAAC,IAAI,EAAC,CAAA;AACb,YAAY,EACV,SAAS,EACT,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,aAAa,EACb,iBAAiB,GAClB,CAAA"}

package/dist/Card/index.js

@@ -0,0 +1,12 @@
+import { CardImpl, CardMetadata, CardMenu, CardDescription, CardHeading, CardImage, CardIcon } from './Card.js';
+
+const Card = Object.assign(CardImpl, {
+  Icon: CardIcon,
+  Image: CardImage,
+  Heading: CardHeading,
+  Description: CardDescription,
+  Menu: CardMenu,
+  Metadata: CardMetadata
+});
+
+export { Card };

package/dist/Token/_TokenTextContainer-55ce2de3.css

@@ -0,0 +1,2 @@
+.prc-Token-TokenTextContainer-cOUaD{background:transparent;border:none;color:inherit;color:currentColor;flex-grow:1;font:inherit;line-height:var(--base-text-lineHeight-normal,1.5);margin:0;min-width:0;overflow:hidden;padding:0;-webkit-text-decoration:none;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;width:auto;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;appearance:none}.prc-Token-TokenTextContainer-cOUaD:is(a,button,[tabIndex="0"]){cursor:pointer}.prc-Token-TokenTextContainer-cOUaD:is(a,button,[tabIndex="0"]):after{bottom:0;content:"";left:0;position:absolute;right:0;top:0}
+/*# sourceMappingURL=_TokenTextContainer-55ce2de3.css.map */

package/dist/Token/_TokenTextContainer-55ce2de3.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Token/_TokenTextContainer.module.css.js"],"names":[],"mappings":"AAAA,oCAiBE,sBAAuB,CACvB,WAAY,CAVZ,aAAc,CAGd,kBAAmB,CAQnB,WAAY,CAbZ,YAAa,CACb,kDAA+C,CAH/C,QAAS,CAFT,WAAY,CAGZ,eAAgB,CAFhB,SAAU,CASV,4BAAqB,CAArB,oBAAqB,CACrB,sBAAuB,CACvB,kBAAmB,CAbnB,UAAW,CAmBX,8BAA+B,CAC/B,+BAAgC,CAChC,eACF,CAOA,gEACE,cACF,CAOA,sEAIE,QAAS,CAET,UAAW,CADX,MAAO,CAJP,iBAAkB,CAElB,OAAQ,CADR,KAKF","file":"_TokenTextContainer-55ce2de3.css","sourcesContent":[".TokenTextContainer {\n  width: auto;\n  min-width: 0;\n  padding: 0;\n  margin: 0;\n  overflow: hidden;\n  font: inherit;\n  line-height: var(--base-text-lineHeight-normal);\n  color: inherit;\n\n  /* reset anchor styles */\n  color: currentColor;\n  text-decoration: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  /* reset button styles, make the cursor a pointer, and add line-height */\n  background: transparent;\n  border: none;\n  flex-grow: 1;\n  -webkit-font-smoothing: inherit;\n  -moz-osx-font-smoothing: inherit;\n  appearance: none;\n}\n\n/* Position psuedo-element above text content, but below the\n  remove button.\n  This ensures the <a> or <button> receives the click no\n  matter where on the token the user clicks. */\n/* stylelint-disable-next-line selector-max-type, selector-no-qualifying-type */\n.TokenTextContainer:is(a, button, [tabIndex='0']) {\n  cursor: pointer;\n}\n\n/* Position psuedo-element above text content, but below the\n  remove button.\n  This ensures the <a> or <button> receives the click no\n  matter where on the token the user clicks. */\n/* stylelint-disable-next-line selector-max-type, selector-no-qualifying-type */\n.TokenTextContainer:is(a, button, [tabIndex='0'])::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  content: '';\n}\n"]}

package/dist/Token/_TokenTextContainer.module.css.js

@@ -1,4 +1,4 @@
-import './_TokenTextContainer-24678fbc.css';
+import './_TokenTextContainer-55ce2de3.css';
 
 var classes = {"TokenTextContainer":"prc-Token-TokenTextContainer-cOUaD"};
 

package/dist/experimental/index.d.ts

@@ -9,6 +9,8 @@ export { Blankslate } from '../Blankslate';
 export type { BlankslateProps } from '../Blankslate';
 export { ButtonBase } from '../Button';
 export type { ButtonBaseProps } from '../Button';
+export { Card } from '../Card';
+export type { CardProps, CardIconProps, CardImageProps, CardHeadingProps, CardDescriptionProps, CardMenuProps, CardMetadataProps, } from '../Card';
 export { DataTable, Table, createColumnHelper } from '../DataTable';
 export type { DataTableProps, TableProps, TableHeadProps, TableBodyProps, TableRowProps, TableHeaderProps, TableCellProps, TableContainerProps, TableTitleProps, TableSubtitleProps, TableActionsProps, Column, CellAlignment, ColumnWidth, UniqueRow, ObjectPaths, } from '../DataTable';
 export * from '../Dialog';

package/dist/experimental/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/experimental/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/experimental/index.ts"],"names":[],"mappings":"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"}

package/dist/experimental/index.js

@@ -1,5 +1,6 @@
 "use client";
 export { Blankslate } from '../Blankslate/index.js';
+export { Card } from '../Card/index.js';
 export { Table } from '../DataTable/index.js';
 export { ActionBar } from '../ActionBar/index.js';
 export { Stack } from '../Stack/index.js';

package/generated/components.json

@@ -2100,6 +2100,97 @@
       ],
       "subcomponents": []
     },
+    "card": {
+      "source": "https://github.com/primer/react/tree/main/packages/react/src/Card",
+      "id": "card",
+      "name": "Card",
+      "status": "draft",
+      "a11yReviewed": false,
+      "importPath": "@primer/react/experimental",
+      "stories": [
+        {
+          "id": "experimental-components-card--default",
+          "code": "() => {\n  return (\n    <div\n      style={{\n        maxWidth: '400px',\n      }}\n    >\n      <Card>\n        <Card.Icon icon={RocketIcon} />\n        <Card.Heading>Card Heading</Card.Heading>\n        <Card.Description>\n          This is a description of the card providing supplemental information.\n        </Card.Description>\n        <Card.Metadata>Updated 2 hours ago</Card.Metadata>\n      </Card>\n    </div>\n  )\n}"
+        },
+        {
+          "id": "experimental-components-card-features--with-image",
+          "code": "() => {\n  return (\n    <div\n      style={{\n        maxWidth: '400px',\n      }}\n    >\n      <Card>\n        <Card.Image src=\"https://github.com/octocat.png\" alt=\"Octocat\" />\n        <Card.Heading>Card with Image</Card.Heading>\n        <Card.Description>\n          This card uses an edge-to-edge image instead of an icon.\n        </Card.Description>\n      </Card>\n    </div>\n  )\n}"
+        },
+        {
+          "id": "experimental-components-card-features--with-metadata",
+          "code": "() => {\n  return (\n    <div\n      style={{\n        maxWidth: '400px',\n      }}\n    >\n      <Card>\n        <Card.Icon icon={RepoIcon} />\n        <Card.Heading>primer/react</Card.Heading>\n        <Card.Description>\n          {\n            \"GitHub's design system implemented as React components for building consistent user interfaces.\"\n          }\n        </Card.Description>\n        <Card.Metadata>\n          <StarIcon size={16} />\n          1.2k stars\n        </Card.Metadata>\n      </Card>\n    </div>\n  )\n}"
+        }
+      ],
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "description": "CSS class name(s) for custom styling."
+        },
+        {
+          "name": "padding",
+          "type": "'none' | 'condensed' | 'normal'",
+          "defaultValue": "'normal'",
+          "description": "Controls the internal padding of the Card."
+        }
+      ],
+      "subcomponents": [
+        {
+          "name": "Card.Icon",
+          "props": [
+            {
+              "name": "icon",
+              "type": "React.ElementType",
+              "description": "An Octicon or custom SVG icon to render."
+            },
+            {
+              "name": "aria-label",
+              "type": "string",
+              "description": "Accessible label for the icon. When omitted, the icon is treated as decorative."
+            }
+          ]
+        },
+        {
+          "name": "Card.Image",
+          "props": [
+            {
+              "name": "src",
+              "type": "string",
+              "description": "The image source URL."
+            },
+            {
+              "name": "alt",
+              "type": "string",
+              "defaultValue": "\"\"",
+              "description": "Alt text for accessibility. Defaults to empty string (decorative)."
+            }
+          ]
+        },
+        {
+          "name": "Card.Heading",
+          "props": [
+            {
+              "name": "as",
+              "type": "'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+              "defaultValue": "'h3'",
+              "description": "The heading level to render."
+            }
+          ]
+        },
+        {
+          "name": "Card.Description",
+          "props": []
+        },
+        {
+          "name": "Card.Menu",
+          "props": []
+        },
+        {
+          "name": "Card.Metadata",
+          "props": []
+        }
+      ]
+    },
     "checkbox": {
       "source": "https://github.com/primer/react/tree/main/packages/react/src/Checkbox",
       "id": "checkbox",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.19.1-rc.d5c143d51",
+  "version": "38.20.0-rc.6c6ee0bb1",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/dist/Token/_TokenTextContainer-24678fbc.css

@@ -1,2 +0,0 @@
-.prc-Token-TokenTextContainer-cOUaD{background:transparent;border:none;color:inherit;color:currentColor;flex-grow:1;font:inherit;line-height:normal;margin:0;min-width:0;overflow:hidden;padding:0;-webkit-text-decoration:none;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;width:auto;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;appearance:none}.prc-Token-TokenTextContainer-cOUaD:is(a,button,[tabIndex="0"]){cursor:pointer}.prc-Token-TokenTextContainer-cOUaD:is(a,button,[tabIndex="0"]):after{bottom:0;content:"";left:0;position:absolute;right:0;top:0}
-/*# sourceMappingURL=_TokenTextContainer-24678fbc.css.map */

package/dist/Token/_TokenTextContainer-24678fbc.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Token/_TokenTextContainer.module.css.js"],"names":[],"mappings":"AAAA,oCAkBE,sBAAuB,CACvB,WAAY,CAVZ,aAAc,CAGd,kBAAmB,CAQnB,WAAY,CAdZ,YAAa,CAEb,kBAAmB,CAJnB,QAAS,CAFT,WAAY,CAGZ,eAAgB,CAFhB,SAAU,CAUV,4BAAqB,CAArB,oBAAqB,CACrB,sBAAuB,CACvB,kBAAmB,CAdnB,UAAW,CAoBX,8BAA+B,CAC/B,+BAAgC,CAChC,eACF,CAOA,gEACE,cACF,CAOA,sEAIE,QAAS,CAET,UAAW,CADX,MAAO,CAJP,iBAAkB,CAElB,OAAQ,CADR,KAKF","file":"_TokenTextContainer-24678fbc.css","sourcesContent":[".TokenTextContainer {\n  width: auto;\n  min-width: 0;\n  padding: 0;\n  margin: 0;\n  overflow: hidden;\n  font: inherit;\n  /* stylelint-disable-next-line primer/typography */\n  line-height: normal;\n  color: inherit;\n\n  /* reset anchor styles */\n  color: currentColor;\n  text-decoration: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  /* reset button styles, make the cursor a pointer, and add line-height */\n  background: transparent;\n  border: none;\n  flex-grow: 1;\n  -webkit-font-smoothing: inherit;\n  -moz-osx-font-smoothing: inherit;\n  appearance: none;\n}\n\n/* Position psuedo-element above text content, but below the\n  remove button.\n  This ensures the <a> or <button> receives the click no\n  matter where on the token the user clicks. */\n/* stylelint-disable-next-line selector-max-type, selector-no-qualifying-type */\n.TokenTextContainer:is(a, button, [tabIndex='0']) {\n  cursor: pointer;\n}\n\n/* Position psuedo-element above text content, but below the\n  remove button.\n  This ensures the <a> or <button> receives the click no\n  matter where on the token the user clicks. */\n/* stylelint-disable-next-line selector-max-type, selector-no-qualifying-type */\n.TokenTextContainer:is(a, button, [tabIndex='0'])::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  content: '';\n}\n"]}