@primer/react/dist/Card/Card.d.ts

An implementation of GitHub's Primer Design System using React

import { PolymorphicProps } from "../utils/modern-polymorphic.js";
import React from "react";

//#region src/Card/Card.d.ts
type CardAs = 'div' | 'section';
type CardProps<As extends CardAs = 'div'> = PolymorphicProps<As, 'div', {
  /** Optional className for the root element. */className?: string; /** Internal padding. @default 'normal' */
  padding?: 'none' | 'condensed' | 'normal'; /** Border radius. @default 'large' */
  borderRadius?: 'medium' | 'large';
  /**
   * Layout of the card. `compact` uses tighter spacing, removes the icon
   * background container, and renders a smaller title.
   * @default 'default'
   */
  layout?: 'default' | 'compact';
  /**
   * Card contents. Provide either `Card.*` subcomponents (e.g. `Card.Heading`,
   * `Card.Description`, `Card.Metadata`) or custom content.
   */
  children: React.ReactNode;
}>;
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'> & {
  /**
   * Card description. Rendered as a `<p>`, so keep it to flowing text.
   */
  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 ActionProps = {
  /** Interactive control for the top-right corner of the card. */children: React.ReactNode;
};
type MetadataProps = React.ComponentPropsWithoutRef<'div'> & {
  /**
   * Metadata row at the bottom of the card. Any content works: text, icons,
   * a `Label`, an `Octicon`.
   */
  children: React.ReactNode;
};
declare function CardIcon({
  icon: IconComponent,
  'aria-label': ariaLabel,
  className
}: IconProps): React.JSX.Element;
declare namespace CardIcon {
  var displayName: string;
}
declare function CardImage({
  src,
  alt,
  className,
  ...rest
}: ImageProps): React.JSX.Element;
declare namespace CardImage {
  var displayName: string;
}
/**
 * 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`.
 */
/**
 * 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.
 */
declare function CardAction({
  children
}: ActionProps): React.JSX.Element;
declare namespace CardAction {
  var displayName: string;
}
//#endregion
export { CardAction, type ActionProps as CardActionProps, type DescriptionProps as CardDescriptionProps, type HeadingProps as CardHeadingProps, CardIcon, type IconProps as CardIconProps, CardImage, type ImageProps as CardImageProps, type MetadataProps as CardMetadataProps, CardProps };