@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 } 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(53);
  let children;
  let className;
  let rest;
  let t1;
  let t2;
  if ($[0] !== t0) {
    ({
      children,
      className,
      padding: t1,
      borderRadius: t2,
      ...rest
    } = t0);
    $[0] = t0;
    $[1] = children;
    $[2] = className;
    $[3] = rest;
    $[4] = t1;
    $[5] = t2;
  } else {
    children = $[1];
    className = $[2];
    rest = $[3];
    t1 = $[4];
    t2 = $[5];
  }
  const padding = t1 === undefined ? "normal" : t1;
  const borderRadius = t2 === undefined ? "large" : t2;
  let description;
  let heading;
  let menu;
  let metadata;
  let t3;
  let t4;
  let t5;
  let t6;
  let t7;
  let t8;
  let t9;
  if ($[6] !== borderRadius || $[7] !== children || $[8] !== className || $[9] !== padding || $[10] !== ref || $[11] !== rest) {
    t9 = 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 t10;
        if ($[23] !== className) {
          t10 = clsx(classes.Card, className);
          $[23] = className;
          $[24] = t10;
        } else {
          t10 = $[24];
        }
        let t11;
        if ($[25] !== borderRadius || $[26] !== children || $[27] !== padding || $[28] !== ref || $[29] !== rest || $[30] !== t10) {
          t11 = /*#__PURE__*/jsx("div", {
            ref: ref,
            className: t10,
            "data-padding": padding,
            "data-border-radius": borderRadius,
            ...rest,
            children: children
          });
          $[25] = borderRadius;
          $[26] = children;
          $[27] = padding;
          $[28] = ref;
          $[29] = rest;
          $[30] = t10;
          $[31] = t11;
        } else {
          t11 = $[31];
        }
        t9 = t11;
        break bb0;
      }
      t3 = ref;
      if ($[32] !== className) {
        t4 = clsx(classes.Card, className);
        $[32] = className;
        $[33] = t4;
      } else {
        t4 = $[33];
      }
      t5 = padding;
      t6 = borderRadius;
      t7 = rest;
      t8 = (image || icon) && /*#__PURE__*/jsx("div", {
        className: clsx(classes.CardHeader, image && classes.CardHeaderEdgeToEdge),
        children: image || icon
      });
    }
    $[6] = borderRadius;
    $[7] = children;
    $[8] = className;
    $[9] = padding;
    $[10] = ref;
    $[11] = rest;
    $[12] = description;
    $[13] = heading;
    $[14] = menu;
    $[15] = metadata;
    $[16] = t3;
    $[17] = t4;
    $[18] = t5;
    $[19] = t6;
    $[20] = t7;
    $[21] = t8;
    $[22] = t9;
  } else {
    description = $[12];
    heading = $[13];
    menu = $[14];
    metadata = $[15];
    t3 = $[16];
    t4 = $[17];
    t5 = $[18];
    t6 = $[19];
    t7 = $[20];
    t8 = $[21];
    t9 = $[22];
  }
  if (t9 !== Symbol.for("react.early_return_sentinel")) {
    return t9;
  }
  let t10;
  if ($[34] !== description || $[35] !== heading) {
    t10 = /*#__PURE__*/jsxs("div", {
      className: classes.CardContent,
      children: [heading, description]
    });
    $[34] = description;
    $[35] = heading;
    $[36] = t10;
  } else {
    t10 = $[36];
  }
  let t11;
  if ($[37] !== metadata) {
    t11 = metadata ? /*#__PURE__*/jsx("div", {
      className: classes.CardMetadataContainer,
      children: metadata
    }) : null;
    $[37] = metadata;
    $[38] = t11;
  } else {
    t11 = $[38];
  }
  let t12;
  if ($[39] !== t10 || $[40] !== t11) {
    t12 = /*#__PURE__*/jsxs("div", {
      className: classes.CardBody,
      children: [t10, t11]
    });
    $[39] = t10;
    $[40] = t11;
    $[41] = t12;
  } else {
    t12 = $[41];
  }
  let t13;
  if ($[42] !== menu) {
    t13 = menu ? /*#__PURE__*/jsx("div", {
      className: classes.CardMenu,
      children: menu
    }) : null;
    $[42] = menu;
    $[43] = t13;
  } else {
    t13 = $[43];
  }
  let t14;
  if ($[44] !== t12 || $[45] !== t13 || $[46] !== t3 || $[47] !== t4 || $[48] !== t5 || $[49] !== t6 || $[50] !== t7 || $[51] !== t8) {
    t14 = /*#__PURE__*/jsxs("div", {
      ref: t3,
      className: t4,
      "data-padding": t5,
      "data-border-radius": t6,
      ...t7,
      children: [t8, t12, t13]
    });
    $[44] = t12;
    $[45] = t13;
    $[46] = t3;
    $[47] = t4;
    $[48] = t5;
    $[49] = t6;
    $[50] = t7;
    $[51] = t8;
    $[52] = t14;
  } else {
    t14 = $[52];
  }
  return t14;
});
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 };