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

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

import React, { PropsWithChildren, type JSX } from 'react';
import { HeadingProps, type ImageProps, LinkProps } from '..';
import { type IconProps } from '../Icon';
import type { BaseProps } from '../component-helpers';
export declare const defaultPillarIconColor = "green";
export declare const defaultPillarIconSize = 32;
export type PillarProps<C extends keyof JSX.IntrinsicElements = 'div'> = React.HTMLAttributes<C> & {
    /**
     * The HTML element used to render the Pillar.
     */
    as?: C | 'div' | 'article';
    /**
     * Aligns the pillar content
     */
    align?: 'start' | 'center';
    /**
     * Enables optional border around the pillar content
     */
    hasBorder?: boolean;
    /**
     * Allows the pillar to fill the width of its parent container.
     */
    fullWidth?: boolean;
} & (C extends 'article' ? PropsWithChildren<BaseProps<HTMLElement>> : PropsWithChildren<BaseProps<HTMLDivElement>>);
type PillarImageProps = ImageProps;
declare function PillarImage({ className, ...rest }: PillarImageProps): import("react/jsx-runtime").JSX.Element;
type IconComponentProps = React.SVGAttributes<SVGElement> & {
    size?: number;
};
type IconComponent = React.ComponentType<IconComponentProps> | React.ExoticComponent<IconComponentProps>;
type IconElement = React.ReactElement<IconComponentProps>;
export type PillarIconProps = Omit<IconProps, 'icon' | 'color'> & {
    icon: IconElement | IconComponent;
};
declare function PillarIcon({ icon, className, hasBackground, size, ...props }: PillarIconProps): import("react/jsx-runtime").JSX.Element;
type PillarHeadingProps = BaseProps<HTMLHeadingElement> & {
    children: React.ReactNode | React.ReactNode[];
    as?: Exclude<HeadingProps['as'], 'h1'>;
} & HeadingProps;
type PillarDescriptionProps = PropsWithChildren<BaseProps<HTMLParagraphElement>>;
type PillarLinkProps = {
    href: string;
} & Omit<LinkProps, 'size' | 'direction'> & BaseProps<HTMLAnchorElement>;
/**
 * Pillar component:
 * {@link https://primer.style/brand/components/Pillar/ See usage examples}.
 */
export declare const Pillar: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<PillarProps<"div">>, "ref"> & React.RefAttributes<HTMLDivElement>> & {
    Icon: typeof PillarIcon;
    Image: typeof PillarImage;
    Heading: React.ForwardRefExoticComponent<Omit<PillarHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
    Description: React.ForwardRefExoticComponent<Omit<PillarDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
    Link: React.ForwardRefExoticComponent<Omit<PillarLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
};
export {};