@primer/react-brand/esm/CTABanner/CTABanner.d.ts

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

import React from 'react';
import type { BaseProps } from '../component-helpers';
import { HeadingProps } from '../Heading';
import { TextProps } from '../Text';
/**
 * Design tokens
 */
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css';
import { type LinkProps } from '../Link';
export declare const CTABannerBackgroundColors: readonly ["default", "subtle"];
type ResponsiveMap<T> = {
    narrow?: T;
    regular?: T;
    wide?: T;
};
type ResponsiveBackgroundImageSrcMap = ResponsiveMap<string | string[]>;
type BackgroundColors = (typeof CTABannerBackgroundColors)[number] | AnyString;
type ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>;
type ResponsiveBackgroundImagePositionMap = ResponsiveMap<string | string[]>;
type ResponsiveBackgroundImageSizeMap = ResponsiveMap<string | string[]>;
export type CTABannerProps = BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement> & {
    /**
     * Alternative presentations
     */
    variant?: 'default' | 'balanced' | 'minimal';
    /**
     * The alignment of the content within the banner.
     */
    align?: 'start' | 'center';
    /**
     * A flag to add a border to the banner.
     */
    hasBorder?: boolean;
    /**
     * Enable optional grid lines
     */
    hasGridLines?: boolean;
    /**
     * A flag to remove the shadow from the banner.
     * @deprecated - hasShadow will be removed in a future release.
     */
    hasShadow?: boolean;
    /**
     * A flag to remove the background from the banner.
     */
    hasBackground?: boolean;
    /**
     * Optional, custom background color.
     */
    backgroundColor?: BackgroundColors | ResponsiveBackgroundColorMap;
    /**
     * Optional, custom background image.
     */
    backgroundImageSrc?: string | ResponsiveBackgroundImageSrcMap;
    /**
     * Optional, custom background position.
     */
    backgroundImagePosition?: string | ResponsiveBackgroundImagePositionMap;
    /**
     * Optional, custom background size.
     */
    backgroundImageSize?: string | ResponsiveBackgroundImageSizeMap;
    /**
     * 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.
     */
    leadingComponent?: React.FunctionComponent;
    /**
     * 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;
};
type CTABannerHeadingProps = BaseProps<HTMLHeadingElement> & {
    children: React.ReactNode | React.ReactNode[];
} & HeadingProps;
type CTABannerDescriptionProps = React.HtmlHTMLAttributes<HTMLParagraphElement> & BaseProps<HTMLParagraphElement> & {
    variant?: TextProps['variant'];
};
type CTABannerImageProps = BaseProps<HTMLImageElement> & Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt'> & {
    src: string;
    alt: string;
};
type CTABannerLogoProps = BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
    children: React.ReactNode;
};
export declare const CTABanner: React.ForwardRefExoticComponent<Omit<CTABannerProps, "ref"> & React.RefAttributes<HTMLElement>> & {
    Heading: React.ForwardRefExoticComponent<Omit<CTABannerHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
    Description: React.ForwardRefExoticComponent<Omit<CTABannerDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
    ButtonGroup: React.ForwardRefExoticComponent<Omit<Omit<import("..").ButtonGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
    Image: React.ForwardRefExoticComponent<Omit<CTABannerImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
    Logo: React.ForwardRefExoticComponent<Omit<CTABannerLogoProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
    Link: ({ className, children, variant, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;
};
export {};
//# sourceMappingURL=CTABanner.d.ts.map