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

An implementation of GitHub's Primer Design System using React

import React from 'react';
import { type PolymorphicProps } from '../utils/modern-polymorphic';
type CardAs = 'div' | 'section';
export 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';
    /**
     * 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 const CardImpl: <As extends CardAs>(props: (React.ComponentPropsWithRef<React.ElementType extends As ? "div" : As> & {
    /** Optional className for the root element. */
    className?: string;
    /** Internal padding. @default 'normal' */
    padding?: "none" | "condensed" | "normal";
    /** Border radius. @default 'large' */
    borderRadius?: "medium" | "large";
    /**
     * Card contents. Provide either `Card.*` subcomponents (e.g. `Card.Heading`,
     * `Card.Description`, `Card.Metadata`) or custom content.
     */
    children: React.ReactNode;
} extends infer T ? T extends React.ComponentPropsWithRef<React.ElementType extends As ? "div" : As> & {
    /** Optional className for the root element. */
    className?: string;
    /** Internal padding. @default 'normal' */
    padding?: "none" | "condensed" | "normal";
    /** Border radius. @default 'large' */
    borderRadius?: "medium" | "large";
    /**
     * Card contents. Provide either `Card.*` subcomponents (e.g. `Card.Heading`,
     * `Card.Description`, `Card.Metadata`) or custom content.
     */
    children: React.ReactNode;
} ? T extends unknown ? Omit<T, "as"> : never : never : never) & {
    as?: As | undefined;
} & React.RefAttributes<any>) => 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`.
 */
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"> & {
    /**
     * Card description. Rendered as a `<p>`, so keep it to flowing text.
     */
    children: React.ReactNode;
} & React.RefAttributes<HTMLParagraphElement>>;
/**
 * 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;
}
declare const CardMetadata: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
    /**
     * Metadata row at the bottom of the card. Any content works: text, icons,
     * a `Label`, an `Octicon`.
     */
    children: React.ReactNode;
} & React.RefAttributes<HTMLDivElement>>;
export { CardImpl, CardIcon, CardImage, CardHeading, CardDescription, CardAction, CardMetadata };
export type { HeadingProps as CardHeadingProps };
export type { DescriptionProps as CardDescriptionProps };
export type { IconProps as CardIconProps };
export type { ImageProps as CardImageProps };
export type { ActionProps as CardActionProps };
export type { MetadataProps as CardMetadataProps };
//# sourceMappingURL=Card.d.ts.map