@primer/react/dist/Card/Card.js

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import { clsx } from 'clsx';
import React, { forwardRef, useContext, createContext } from 'react';
import classes from './Card.module.css.js';
import { fixedForwardRef } from '../utils/modern-polymorphic.js';
import { useId } from '../hooks/useId.js';
import { jsx, jsxs } from 'react/jsx-runtime';

const CardContext = /*#__PURE__*/createContext({});
function CardComponent(props, ref) {
  const $ = c(67);
  const {
    children,
    className,
    padding: t0,
    borderRadius: t1,
    as: t2,
    ...rest
  } = props;
  const padding = t0 === undefined ? "normal" : t0;
  const borderRadius = t1 === undefined ? "large" : t1;
  const as = t2 === undefined ? "div" : t2;
  const Component = as;
  const generatedId = useId();
  const titleId = as === "section" ? generatedId : undefined;
  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 t3;
  let t4;
  let t5;
  let t6;
  let t7;
  let t8;
  let t9;
  if ($[0] !== Component || $[1] !== borderRadius || $[2] !== children || $[3] !== className || $[4] !== padding || $[5] !== ref || $[6] !== rest || $[7] !== titleId) {
    t11 = 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;
      const isEmpty = !hasSlotChildren && childArray.length === 0;
      if (isEmpty) {
        t11 = null;
        break bb0;
      }
      if (!hasSlotChildren) {
        let t12;
        if ($[23] !== titleId) {
          t12 = {
            titleId
          };
          $[23] = titleId;
          $[24] = t12;
        } else {
          t12 = $[24];
        }
        let t13;
        if ($[25] !== className) {
          t13 = clsx(classes.Card, className);
          $[25] = className;
          $[26] = t13;
        } else {
          t13 = $[26];
        }
        let t14;
        if ($[27] !== Component || $[28] !== borderRadius || $[29] !== children || $[30] !== padding || $[31] !== ref || $[32] !== rest || $[33] !== t13) {
          t14 = /*#__PURE__*/jsx(Component, {
            ref: ref,
            className: t13,
            "data-component": "Card",
            "data-padding": padding,
            "data-border-radius": borderRadius,
            ...rest,
            children: children
          });
          $[27] = Component;
          $[28] = borderRadius;
          $[29] = children;
          $[30] = padding;
          $[31] = ref;
          $[32] = rest;
          $[33] = t13;
          $[34] = t14;
        } else {
          t14 = $[34];
        }
        let t15;
        if ($[35] !== t12 || $[36] !== t14) {
          t15 = /*#__PURE__*/jsx(CardContext.Provider, {
            value: t12,
            children: t14
          });
          $[35] = t12;
          $[36] = t14;
          $[37] = t15;
        } else {
          t15 = $[37];
        }
        t11 = t15;
        break bb0;
      }
      T1 = CardContext.Provider;
      if ($[38] !== titleId) {
        t10 = {
          titleId
        };
        $[38] = titleId;
        $[39] = t10;
      } else {
        t10 = $[39];
      }
      T0 = Component;
      t3 = ref;
      if ($[40] !== className) {
        t4 = clsx(classes.Card, className);
        $[40] = className;
        $[41] = t4;
      } else {
        t4 = $[41];
      }
      t5 = "Card";
      t6 = padding;
      t7 = borderRadius;
      t8 = rest;
      t9 = (image || icon) && /*#__PURE__*/jsx("div", {
        className: clsx(classes.CardHeader, image && classes.CardHeaderEdgeToEdge),
        children: image || icon
      });
    }
    $[0] = Component;
    $[1] = borderRadius;
    $[2] = children;
    $[3] = className;
    $[4] = padding;
    $[5] = ref;
    $[6] = rest;
    $[7] = titleId;
    $[8] = T0;
    $[9] = T1;
    $[10] = description;
    $[11] = heading;
    $[12] = menu;
    $[13] = metadata;
    $[14] = t10;
    $[15] = t11;
    $[16] = t3;
    $[17] = t4;
    $[18] = t5;
    $[19] = t6;
    $[20] = t7;
    $[21] = t8;
    $[22] = t9;
  } else {
    T0 = $[8];
    T1 = $[9];
    description = $[10];
    heading = $[11];
    menu = $[12];
    metadata = $[13];
    t10 = $[14];
    t11 = $[15];
    t3 = $[16];
    t4 = $[17];
    t5 = $[18];
    t6 = $[19];
    t7 = $[20];
    t8 = $[21];
    t9 = $[22];
  }
  if (t11 !== Symbol.for("react.early_return_sentinel")) {
    return t11;
  }
  let t12;
  if ($[42] !== description || $[43] !== heading) {
    t12 = /*#__PURE__*/jsxs("div", {
      className: classes.CardContent,
      children: [heading, description]
    });
    $[42] = description;
    $[43] = heading;
    $[44] = t12;
  } else {
    t12 = $[44];
  }
  let t13;
  if ($[45] !== metadata) {
    t13 = metadata ? /*#__PURE__*/jsx("div", {
      className: classes.CardMetadataContainer,
      children: metadata
    }) : null;
    $[45] = metadata;
    $[46] = t13;
  } else {
    t13 = $[46];
  }
  let t14;
  if ($[47] !== t12 || $[48] !== t13) {
    t14 = /*#__PURE__*/jsxs("div", {
      className: classes.CardBody,
      children: [t12, t13]
    });
    $[47] = t12;
    $[48] = t13;
    $[49] = t14;
  } else {
    t14 = $[49];
  }
  let t15;
  if ($[50] !== menu) {
    t15 = menu ? /*#__PURE__*/jsx("div", {
      className: classes.CardAction,
      children: menu
    }) : null;
    $[50] = menu;
    $[51] = t15;
  } else {
    t15 = $[51];
  }
  let t16;
  if ($[52] !== T0 || $[53] !== t14 || $[54] !== t15 || $[55] !== t3 || $[56] !== t4 || $[57] !== t5 || $[58] !== t6 || $[59] !== t7 || $[60] !== t8 || $[61] !== t9) {
    t16 = /*#__PURE__*/jsxs(T0, {
      ref: t3,
      className: t4,
      "data-component": t5,
      "data-padding": t6,
      "data-border-radius": t7,
      ...t8,
      children: [t9, t14, t15]
    });
    $[52] = T0;
    $[53] = t14;
    $[54] = t15;
    $[55] = t3;
    $[56] = t4;
    $[57] = t5;
    $[58] = t6;
    $[59] = t7;
    $[60] = t8;
    $[61] = t9;
    $[62] = t16;
  } else {
    t16 = $[62];
  }
  let t17;
  if ($[63] !== T1 || $[64] !== t10 || $[65] !== t16) {
    t17 = /*#__PURE__*/jsx(T1, {
      value: t10,
      children: t16
    });
    $[63] = T1;
    $[64] = t10;
    $[65] = t16;
    $[66] = t17;
  } else {
    t17 = $[66];
  }
  return t17;
}
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(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,
      "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 === 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", {
      ...rest,
      src: src,
      alt: 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 === undefined ? "h3" : t1;
  const {
    titleId
  } = useContext(CardContext);
  const t2 = (_id = id) !== null && _id !== void 0 ? _id : titleId;
  let t3;
  if ($[6] !== className) {
    t3 = clsx(classes.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: ref,
      id: t2,
      className: t3,
      "data-component": "Card.Heading",
      children: 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(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", {
      ...rest,
      ref: ref,
      className: t1,
      "data-component": "Card.Description",
      children: 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: 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(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", {
      ...rest,
      ref: ref,
      className: t1,
      "data-component": "Card.Metadata",
      children: children
    });
    $[6] = children;
    $[7] = ref;
    $[8] = rest;
    $[9] = t1;
    $[10] = t2;
  } else {
    t2 = $[10];
  }
  return t2;
});
CardMetadata.displayName = 'Card.Metadata';

export { CardAction, CardDescription, CardHeading, CardIcon, CardImage, CardImpl, CardMetadata };