@primer/react-brand/lib/Hero/Hero.d.ts

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import React, { PropsWithChildren } from 'react';
import { ButtonBaseProps } from '../Button';
import { HeadingProps } from '../Heading';
import { TextSizes, TextWeightVariants, ResponsiveWeightMap } from '../Text';
import { LabelProps } from '../Label';
import type { BaseProps } from '../component-helpers';
/**
 * Design tokens
 */
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/hero/base.css';
export type HeroProps = BaseProps<HTMLElement> & {
    align?: 'start' | 'center';
    imageContainerClassName?: string;
    imageContainerStyle?: React.CSSProperties;
    /**
     * Escape-hatch for inserting custom React components.
     * Warning:
     *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.
     *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.
     */
    trailingComponent?: React.FunctionComponent;
    'data-testid'?: string;
};
type HeroHeadingProps = Omit<HeadingProps, 'as'> & {
    fullWidth?: boolean;
};
type HeroVideoProps = {
    position?: 'inline-end' | 'block-end';
    'data-testid'?: string;
} & PropsWithChildren<BaseProps<HTMLDivElement>>;
type HeroEyebrowProps = PropsWithChildren<BaseProps<HTMLDivElement>>;
type HeroLabelProps = LabelProps & BaseProps<HTMLSpanElement>;
export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<HeroProps>, "ref"> & React.RefAttributes<HTMLElement>> & {
    Heading: React.ForwardRefExoticComponent<Omit<HeroHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
    Description: React.ForwardRefExoticComponent<(Omit<{
        size?: (typeof TextSizes)[number];
        weight?: TextWeightVariants | ResponsiveWeightMap;
    } & BaseProps<HTMLParagraphElement> & {
        font?: import("../Text").TextFontVariants;
        size?: (typeof TextSizes)[number];
        variant?: typeof import("../Text").TextVariants[number];
        weight?: TextWeightVariants | ResponsiveWeightMap;
        align?: "start" | "center" | "end";
        hasAntiAliasing?: boolean;
    } & {
        as?: typeof import("../Text").TextTags[number];
    } & React.HTMLAttributes<HTMLParagraphElement> & {
        as?: "p";
    } & {
        children?: React.ReactNode | undefined;
    }, "ref"> | Omit<{
        size?: (typeof TextSizes)[number];
        weight?: TextWeightVariants | ResponsiveWeightMap;
    } & BaseProps<HTMLParagraphElement> & {
        font?: import("../Text").TextFontVariants;
        size?: (typeof TextSizes)[number];
        variant?: typeof import("../Text").TextVariants[number];
        weight?: TextWeightVariants | ResponsiveWeightMap;
        align?: "start" | "center" | "end";
        hasAntiAliasing?: boolean;
    } & {
        as?: typeof import("../Text").TextTags[number];
    } & React.HTMLAttributes<HTMLSpanElement> & BaseProps<HTMLSpanElement> & {
        as?: "span";
    } & {
        children?: React.ReactNode | undefined;
    }, "ref"> | Omit<{
        size?: (typeof TextSizes)[number];
        weight?: TextWeightVariants | ResponsiveWeightMap;
    } & BaseProps<HTMLParagraphElement> & {
        font?: import("../Text").TextFontVariants;
        size?: (typeof TextSizes)[number];
        variant?: typeof import("../Text").TextVariants[number];
        weight?: TextWeightVariants | ResponsiveWeightMap;
        align?: "start" | "center" | "end";
        hasAntiAliasing?: boolean;
    } & {
        as?: typeof import("../Text").TextTags[number];
    } & React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement> & {
        as?: "div";
    } & {
        children?: React.ReactNode | undefined;
    }, "ref"> | Omit<{
        size?: (typeof TextSizes)[number];
        weight?: TextWeightVariants | ResponsiveWeightMap;
    } & BaseProps<HTMLParagraphElement> & {
        font?: import("../Text").TextFontVariants;
        size?: (typeof TextSizes)[number];
        variant?: typeof import("../Text").TextVariants[number];
        weight?: TextWeightVariants | ResponsiveWeightMap;
        align?: "start" | "center" | "end";
        hasAntiAliasing?: boolean;
    } & {
        as?: typeof import("../Text").TextTags[number];
    } & React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement> & {
        as?: "strong";
    } & {
        children?: React.ReactNode | undefined;
    }, "ref"> | Omit<{
        size?: (typeof TextSizes)[number];
        weight?: TextWeightVariants | ResponsiveWeightMap;
    } & BaseProps<HTMLParagraphElement> & {
        font?: import("../Text").TextFontVariants;
        size?: (typeof TextSizes)[number];
        variant?: typeof import("../Text").TextVariants[number];
        weight?: TextWeightVariants | ResponsiveWeightMap;
        align?: "start" | "center" | "end";
        hasAntiAliasing?: boolean;
    } & {
        as?: typeof import("../Text").TextTags[number];
    } & React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement> & {
        as?: "em";
    } & {
        children?: React.ReactNode | undefined;
    }, "ref">) & React.RefAttributes<HTMLParagraphElement>>;
    PrimaryAction: React.ForwardRefExoticComponent<(Omit<{
        as?: "a" | "button";
        href: string;
    } & ButtonBaseProps & BaseProps<HTMLAnchorElement> & {
        as?: "a";
    } & {
        children?: React.ReactNode | undefined;
    }, "ref"> | Omit<{
        as?: "a" | "button";
        href: string;
    } & ButtonBaseProps & BaseProps<HTMLButtonElement> & {
        as?: "button";
    } & {
        children?: React.ReactNode | undefined;
    }, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
    SecondaryAction: React.ForwardRefExoticComponent<(Omit<{
        as?: "a" | "button";
        href: string;
    } & ButtonBaseProps & BaseProps<HTMLAnchorElement> & {
        as?: "a";
    } & {
        children?: React.ReactNode | undefined;
    }, "ref"> | Omit<{
        as?: "a" | "button";
        href: string;
    } & ButtonBaseProps & BaseProps<HTMLButtonElement> & {
        as?: "button";
    } & {
        children?: React.ReactNode | undefined;
    }, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
    Image: React.ForwardRefExoticComponent<(Omit<{
        position?: "inline-end" | "block-end";
    } & React.ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
        src: string;
        alt: string;
        aspectRatio?: import("../Image").ImageAspectRatio;
        media?: string;
        borderRadius?: import("../Image").ImageBorderRadiusOptions;
        srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, "srcSet">;
    } & {
        as?: "img";
        srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, "srcSet">;
    }, "ref"> | Omit<{
        position?: "inline-end" | "block-end";
    } & React.ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
        src: string;
        alt: string;
        aspectRatio?: import("../Image").ImageAspectRatio;
        media?: string;
        borderRadius?: import("../Image").ImageBorderRadiusOptions;
        srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, "srcSet">;
    } & {
        as: "picture";
        sources?: {
            srcset: string;
            media: string;
        }[];
        srcSet?: undefined;
    }, "ref">) & React.RefAttributes<HTMLImageElement>>;
    Video: React.ForwardRefExoticComponent<Omit<HeroVideoProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
    Label: React.ForwardRefExoticComponent<Omit<HeroLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
    Eyebrow: React.ForwardRefExoticComponent<Omit<HeroEyebrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
    testIds: {
        root: string;
        readonly video: string;
    };
};
export {};