@primer/react-brand/lib/Box/Box.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 { AnimateProps } from '../animation';
import type { BaseProps } from '../component-helpers';
export declare const BoxSpacingValues: readonly ["none", "condensed", "normal", "spacious", 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 64, 80, 96, 112, 128];
type SpacingValues = (typeof BoxSpacingValues)[number];
type ResponsiveSpacingMap = {
    narrow?: SpacingValues;
    regular?: SpacingValues;
    wide?: SpacingValues;
};
export declare const BoxBackgroundColors: readonly ["default", "inset", "subtle", "overlay"];
type BackgroundColors = (typeof BoxBackgroundColors)[number];
export declare const BoxBorderRadiusOptions: readonly ["small", "medium", "large", "xlarge", "full"];
type BorderRadiusOptions = (typeof BoxBorderRadiusOptions)[number];
export declare const BoxBorderWidthOptions: readonly ["thin", "thick", "thicker"];
type BorderWidthOptions = (typeof BoxBorderWidthOptions)[number];
export declare const BoxBorderColorOptions: readonly ["default", "muted", "subtle"];
type BorderColorOptions = (typeof BoxBorderColorOptions)[number];
type BorderStyleOptions = Extract<React.CSSProperties['borderStyle'], 'solid' | 'none'>;
type BoxProps = {
    /**
     * Adding padding all internal sides of the Box
     */
    padding?: SpacingValues | ResponsiveSpacingMap;
    /**
     * Adding padding on the internal top side of the Box
     */
    paddingBlockStart?: SpacingValues | ResponsiveSpacingMap;
    /**
     * Adding padding on the internal right side of the Box
     */
    paddingInlineEnd?: SpacingValues | ResponsiveSpacingMap;
    /**
     * Adding padding on the internal bottom side of the Box
     */
    paddingBlockEnd?: SpacingValues | ResponsiveSpacingMap;
    /**
     * Adding padding on the internal left side of the Box
     */
    paddingInlineStart?: SpacingValues | ResponsiveSpacingMap;
    margin?: SpacingValues | ResponsiveSpacingMap;
    /**
     * Adding margin on the external top side of the Box
     */
    marginBlockStart?: SpacingValues | ResponsiveSpacingMap;
    /**
     * Adding margin on the external right side of the Box
     */
    marginInlineEnd?: SpacingValues | ResponsiveSpacingMap;
    /**
     * Adding margin on the external bottom side of the Box
     */
    marginBlockEnd?: SpacingValues | ResponsiveSpacingMap;
    /**
     * Adding margin on the external left side of the Box
     */
    marginInlineStart?: SpacingValues | ResponsiveSpacingMap;
    backgroundColor?: BackgroundColors;
    borderRadius?: BorderRadiusOptions;
    borderWidth?: BorderWidthOptions;
    borderBlockStartWidth?: BorderWidthOptions;
    borderInlineEndWidth?: BorderWidthOptions;
    borderBlockEndWidth?: BorderWidthOptions;
    borderInlineStartWidth?: BorderWidthOptions;
    borderColor?: BorderColorOptions;
    borderStyle?: BorderStyleOptions;
    /**
     * Apply one-off animations to direct children of the Box
     */
    animate?: AnimateProps;
    /**
     * Test id for the Box
     */
    'data-testid'?: string;
} & BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>;
/**
 * Use Box to apply fine-grained styling to content.
 * @see https://primer.style/brand/components/Box
 */
export declare const Box: ({ animate, children, className, "data-testid": testId, style, padding, paddingBlockStart, paddingInlineEnd, paddingBlockEnd, paddingInlineStart, margin, marginBlockStart, marginInlineEnd, marginBlockEnd, marginInlineStart, backgroundColor, borderRadius, borderWidth, borderBlockStartWidth, borderInlineEndWidth, borderBlockEndWidth, borderInlineStartWidth, borderColor, borderStyle, ...rest }: PropsWithChildren<BoxProps>) => import("react/jsx-runtime").JSX.Element;
export {};