@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 { BaseProps } from '../component-helpers';
/**
 * Design tokens
 */
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/pillar/colors-with-modes.css';
export declare const PillarIconColors: readonly ["default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow"];
export declare const defaultPillarIconColor: "default";
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;
} & (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 IconComponent = React.ComponentType<{
    size?: number;
}>;
type PillarIconProps = BaseProps<HTMLSpanElement> & {
    icon: React.ReactNode | IconComponent;
    color?: (typeof PillarIconColors)[number];
};
declare function PillarIcon({ icon: Icon, className, color, ...rest }: 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 {};