@indoqa/style-system/lib/components/Box.js

A style system for React with Typescript typed theme support and several base components.

import * as React from 'react';
import { FelaComponent } from 'react-fela';
import { createBoxModelCSSProps, createFlexChildCSSProps, createFontCSSProps, createMarginCSSProps, createPaddingCSSProps, createStylingCSSProps, } from './base';
import { createResponsiveStyles, mergeThemedStyles } from './utils';
export function createBoxCSSStyle(props, theme, outsideMediaQuery) {
    return {
        ...createBoxModelCSSProps(props),
        ...createMarginCSSProps(props, theme),
        ...createPaddingCSSProps(props, theme),
        ...createFlexChildCSSProps(props, theme, outsideMediaQuery),
        ...createStylingCSSProps(props, theme),
        ...createFontCSSProps(props, theme),
    };
}
function themedBoxStyles(props) {
    return {
        ...createResponsiveStyles(props, createBoxCSSStyle),
    };
}
function renderBox(props, as) {
    const { children, style, onClick, onMouseDown, onMouseOut, onMouseOver, onScroll, htmlAttrs, testId, innerRef, ...rest } = props;
    const styles = mergeThemedStyles(themedBoxStyles, style);
    return (React.createElement(FelaComponent, { style: styles, ...rest }, ({ className }) => React.createElement(as, {
        className,
        'data-testid': testId,
        onClick,
        onMouseDown,
        onMouseOut,
        onMouseOver,
        onScroll,
        ...htmlAttrs,
        ref: innerRef,
    }, children)));
}
export function Box(props) {
    return renderBox(props, 'div');
}
export function HeaderBox(props) {
    return renderBox(props, 'header');
}
export function NavBox(props) {
    return renderBox(props, 'nav');
}
export function SectionBox(props) {
    return renderBox(props, 'section');
}
export function ArticleBox(props) {
    return renderBox(props, 'article');
}
export function AsideBox(props) {
    return renderBox(props, 'aside');
}
export function FooterBox(props) {
    return renderBox(props, 'footer');
}
export function FigCaptionBox(props) {
    return renderBox(props, 'figcaption');
}
export function FigureBox(props) {
    return renderBox(props, 'figure');
}
//# sourceMappingURL=Box.js.map