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

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

import React, { ReactElement } from 'react';
import type { BaseProps } from '../component-helpers';
import { HeadingProps, ColorMode as FullColorMode } from '../';
import type { IconProps } from '../Icon';
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/bento/base.css';
type ColorMode = Exclude<FullColorMode, 'auto'>;
export type Size = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
export type ColumnIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
type ResponsiveColumnIndex = Partial<Record<Size, ColumnIndex>>;
type ResponsiveRowIndex = Partial<Record<Size, number>>;
type Flow = 'row' | 'column';
type ResponsiveFlow = Partial<Record<Size, Flow>>;
type Align = 'start' | 'center' | 'end';
type ResponsiveAlign = Partial<Record<Size, Align>>;
type Padding = 'condensed' | 'normal' | 'spacious';
type ResponsivePadding = Partial<Record<Size, Padding>>;
type Order = 'default' | 'reversed';
type ResponsiveOrder = Partial<Record<Size, Order>>;
type BentoProps = React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement>;
type BentoItemProps = {
    columnStart?: ColumnIndex | ResponsiveColumnIndex;
    columnSpan?: ColumnIndex | ResponsiveColumnIndex;
    rowStart?: number | ResponsiveRowIndex;
    rowSpan?: number | ResponsiveRowIndex;
    flow?: Flow | ResponsiveFlow;
    colorMode?: ColorMode;
    visualAsBackground?: boolean;
    order?: Order | ResponsiveOrder;
    bgColor?: 'default' | 'subtle';
} & React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement>;
type BentoContentProps = {
    leadingVisual?: ReactElement<IconProps>;
    padding?: Padding | ResponsivePadding;
    verticalAlign?: Align | ResponsiveAlign;
    horizontalAlign?: Exclude<Align, 'end'> | Partial<Record<Size, Exclude<Align, 'end'>>>;
} & React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement>;
type BentoHeadingProps = {
    variant?: 'default' | 'muted';
} & BaseProps<HTMLHeadingElement> & HeadingProps;
type BentoVisualProps = {
    horizontalAlign?: Align;
    verticalAlign?: Align;
    fillMedia?: boolean;
    overflow?: 'hidden' | 'initial';
    position?: string;
    padding?: Padding | ResponsivePadding;
} & React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement>;
export declare const Bento: (({ className, ...rest }: BentoProps) => import("react/jsx-runtime").JSX.Element) & {
    Item: ({ className, columnStart, columnSpan, rowStart, rowSpan, flow, colorMode, visualAsBackground, order, bgColor, children, ...rest }: BentoItemProps) => import("react/jsx-runtime").JSX.Element;
    Visual: ({ horizontalAlign, verticalAlign, fillMedia, overflow, position, padding, className, children, ...rest }: BentoVisualProps) => import("react/jsx-runtime").JSX.Element;
    Content: ({ children, leadingVisual: LeadingVisual, padding, verticalAlign, horizontalAlign, className, ...rest }: BentoContentProps) => import("react/jsx-runtime").JSX.Element;
    Heading: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<BentoHeadingProps>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
};
export {};