@intility/bifrost-react/dist/components/Box/Box.d.ts

React library for Intility's design system, Bifrost.

import type { PropsFor } from "../../types.js";
export type BoxRadius = BoxProps["radius"];
export type BackgroundValue = BoxProps["background"];
export type BoxProps = PropsFor<"div", {
    /** Render a bifrost default drop shadow */
    shadow?: boolean;
    /** Apply border on all edges */
    border?: boolean;
    /** Apply border on top edge */
    borderTop?: boolean;
    /** Apply border on right edge */
    borderRight?: boolean;
    /** Apply border on bottom edge */
    borderBottom?: boolean;
    /** Apply border on left edge */
    borderLeft?: boolean;
    /**
     * Render a bifrost default border-radius on all corners
     * @example
     * `false` or `undefined` (default) = no border radius
     * `"xs"` = `4px`
     * `"s"` = `8px`
     * `true` or "m" = `12px`
     * `"l"` = `16px`
     * `"xl"` = `24px`
     * `"full"` = `9999px`
     * */
    radius?: boolean | "xs" | "s" | "m" | "l" | "xl" | "full";
    /**
     * Render a bifrost default border-radius on top left corner
     * @example
     * `false` or `undefined` (default) = no border radius
     * `"xs"` = `4px`
     * `"s"` = `8px`
     * `true` or "m" = `12px`
     * `"l"` = `16px`
     * `"xl"` = `24px`
     * `"full"` = `9999px`
     * */
    radiusTopLeft?: boolean | "xs" | "s" | "m" | "l" | "xl" | "full";
    /**
     * Render a bifrost default border-radius on top right corner
     * @example
     * `false` or `undefined` (default) = no border radius
     * `"xs"` = `4px`
     * `"s"` = `8px`
     * `true` or "m" = `12px`
     * `"l"` = `16px`
     * `"xl"` = `24px`
     * `"full"` = `9999px`
     * */
    radiusTopRight?: boolean | "xs" | "s" | "m" | "l" | "xl" | "full";
    /**
     * Render a bifrost default border-radius on bottom right corner
     * @example
     * `false` or `undefined` (default) = no border radius
     * `"xs"` = `4px`
     * `"s"` = `8px`
     * `true` or "m" = `12px`
     * `"l"` = `16px`
     * `"xl"` = `24px`
     * `"full"` = `9999px`
     * */
    radiusBottomRight?: boolean | "xs" | "s" | "m" | "l" | "xl" | "full";
    /**
     * Render a bifrost default border-radius on bottom left corner
     * @example
     * `false` or `undefined` (default) = no border radius
     * `"xs"` = `4px`
     * `"s"` = `8px`
     * `true` or "m" = `12px`
     * `"l"` = `16px`
     * `"xl"` = `24px`
     * `"full"` = `9999px`
     * */
    radiusBottomLeft?: boolean | "xs" | "s" | "m" | "l" | "xl" | "full";
    /**
     * Apply padding on all edges as a `number` in px, or `true` for responsive
     * bifrost-default (`16px` up to 1280 viewport and `24px` for larger)
     */
    padding?: boolean | number;
    /**
     * Apply padding on left and right edges as a `number` in px, or `true` for
     * responsive bifrost-default (`16px` up to 1280 viewport and `24px` for
     * larger)
     */
    paddingInline?: boolean | number;
    /**
     * Apply padding on top and bottom edges as a `number` in px, or `true` for
     * responsive bifrost-default (`16px` up to 1280 viewport and `24px` for
     * larger)
     */
    paddingBlock?: boolean | number;
    /**
     * Apply a bifrost background-color CSS class.
     * @example
     * `false` or `undefined` = no background (default)
     * `true` or `"base-3"` = `.bfc-base-3-bg`
     * `"warning"` = `.bfc-warning-bg`
     * `"theme-fade"` = `.bfc-theme-fade-bg`
     */
    background?: boolean | "base" | "base-2" | "base-3" | "dimmed" | "inverted" | "inverted-2" | "theme" | "theme-fade" | "success" | "success-fade" | "warning" | "warning-fade" | "alert" | "alert-fade" | "attn" | "chill";
    /**
     * Apply a color theme to the box element and its descendant elements.
     * Available values: "inherit" (default), "teal", "purple", "pink", or "yellow".
     */
    theme?: "inherit" | "teal" | "purple" | "pink" | "yellow" | "gray";
}>;
declare const Box: import("react").ForwardRefExoticComponent<BoxProps & import("react").RefAttributes<HTMLDivElement>>;
export default Box;