@withjoy/joykit/lib/packages/core/common/space/index.d.ts

UI Component Library for Joy web

/**
 * Default mapping, but can be overriden by theme.:
 * ```
 * {
 *  default: 32px,
 *  xxxs: 8px,
 *  xxs: 12px,
 *  xs: 16px,
 *  sm: 24px,
 *  md: 32px,
 *  lg: 40px,
 *  xl: 48px,
 *  xxl: 64px
 * }
 * ```
 */
export declare type SpatialOption = 'default' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
export declare const SPATIAL_OPTION_SET: Set<SpatialOption>;
/**
 * A collection of variables that will assist in maintaining consistent
 * spacing bewtween elements.
 */
export declare namespace space {
    const values: {
        toRem: {
            default: string;
            xxxs: string;
            xxs: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            xxl: string;
        };
        toPx: {
            default: number;
            xxxs: number;
            xxs: number;
            xs: number;
            sm: number;
            md: number;
            lg: number;
            xl: number;
            xxl: number;
        };
    };
    /**
     * An inset offer indents content on all four sides - like the mat of a framed photo on a wall.
     * As such, it "pads" the inside of a container.
     *
     * The default value is a useful starting point for mobile first design - expanding to large
     * at a relevant viewport like `768px`.
     *
     * *Usage*: apply an inset value as padding.
     * `padding: squareInset.default`
     */
    const squareInset: import("./spatialSquareInset").SpatialSquareInset;
    /**
     * Contrasted with a button or pill's squish, we occasionally horizontally stretch the inset of textboxes, textareas, and other form elements
     *
     * **Usage**: applied to buttons and cell-like containers like a data table or list item.
     * `padding: stretchInset.default`
     */
    const stretchInset: import("./spatialStretchInset").SpatialStretchInset;
    /**
     * Unlike it's square counterpart, a squished inset reduces space at the **top** and **bottom** by 50%.
     *
     * **Usage**: applied to buttons and cell-like containers like a data table or list item.
     * `padding: squishInset.default`
     */
    const squishInset: import("./spatialSquishInset").SpatialSquishInset;
    /**
     * The overwhelming majority of UI is scrolled vertically. To achieve vertical rhythm, we will aim to
     * uniformly space components in a vertical structure.
     *
     * **Usage**: Applied to a `columns` component in a layout, message on a heading, to whatever is stacked.
     * `margin: spatialStack.default`
     */
    const stack: import("./spatialStack").SpatialStack;
}
/**
 * `xxxs` = 8px | .05rem
 *
 * `xxs` = 12px | .75rem
 *
 * `xs` = 16px | 1rem
 *
 * `sm` = 24px | 1.5rem
 *
 * `md` = 32px | 2rem
 *
 * `lg` = 40px | 2.5rem
 *
 * `xl` = 48px | 3rem
 *
 * `xxl` = 64px | 4rem
 *
 */
export declare namespace Spacing {
    /**
     * 8px | .05rem
     */
    const xxxs = "xxxs";
    /**
     * 12px | .75rem
     */
    const xxs = "xxs";
    /**
     * 16px | 1rem
     */
    const xs = "xs";
    /**
     * 24px | 1.5rem
     */
    const sm = "sm";
    /**
     * 32px | 2rem
     */
    const md = "md";
    /**
     * 40px | 2.5rem
     */
    const lg = "lg";
    /**
     * 48px | 3rem
     */
    const xl = "xl";
    /**
     * 64px | 4 rem
     */
    const xxl = "xxl";
}