boxify-react/dist/index.esm.js

A lightweight, performant React component library for building responsive layouts with CSS custom properties, smart defaults, and comprehensive TypeScript support

import {jsx}from'react/jsx-runtime';var styles = {"bx_hasMirror":"Box-module_bx_hasMirror__6EVoM","bx_display":"Box-module_bx_display__EFmvs","bx_position":"Box-module_bx_position__tDgsE","bx_top":"Box-module_bx_top__lEbYZ","bx_right":"Box-module_bx_right__fPhMh","bx_bottom":"Box-module_bx_bottom__M9Ard","bx_left":"Box-module_bx_left__u1yuX","bx_zIndex":"Box-module_bx_zIndex__-VryG","bx_width":"Box-module_bx_width__69A8z","bx_height":"Box-module_bx_height__s0AsY","bx_minWidth":"Box-module_bx_minWidth__EjJKs","bx_minHeight":"Box-module_bx_minHeight__j4HvK","bx_maxWidth":"Box-module_bx_maxWidth__5BlAR","bx_maxHeight":"Box-module_bx_maxHeight__7X7Ff","bx_margin":"Box-module_bx_margin__EK6ed","bx_marginTop":"Box-module_bx_marginTop__7F-Hm","bx_marginRight":"Box-module_bx_marginRight__89aud","bx_marginBottom":"Box-module_bx_marginBottom__wIH1g","bx_marginLeft":"Box-module_bx_marginLeft__BooDL","bx_padding":"Box-module_bx_padding__qaQRn","bx_paddingTop":"Box-module_bx_paddingTop__ejrqS","bx_paddingRight":"Box-module_bx_paddingRight__2AFZH","bx_paddingBottom":"Box-module_bx_paddingBottom__XJPXT","bx_paddingLeft":"Box-module_bx_paddingLeft__2n9lQ","bx_border":"Box-module_bx_border__yzZvz","bx_borderRadius":"Box-module_bx_borderRadius__CZ7qo","bx_borderColor":"Box-module_bx_borderColor__Rql1W","bx_borderStyle":"Box-module_bx_borderStyle__E2hcx","bx_borderWidth":"Box-module_bx_borderWidth__aN89l","bx_backgroundColor":"Box-module_bx_backgroundColor__Xj-dB","bx_backgroundImage":"Box-module_bx_backgroundImage__Zb9Qs","bx_fontSize":"Box-module_bx_fontSize__fQHOR","bx_fontWeight":"Box-module_bx_fontWeight__q6gRn","bx_textAlign":"Box-module_bx_textAlign__U3Oby","bx_color":"Box-module_bx_color__IOG4o","bx_lineHeight":"Box-module_bx_lineHeight__5-vIH","bx_letterSpacing":"Box-module_bx_letterSpacing__Rb2dT","bx_textDecoration":"Box-module_bx_textDecoration__3SNVS","bx_textTransform":"Box-module_bx_textTransform__4cR8t","bx_fontFamily":"Box-module_bx_fontFamily__da7F7","bx_fontStyle":"Box-module_bx_fontStyle__Bfid2","bx_whiteSpace":"Box-module_bx_whiteSpace__oqrfF","bx_textOverflow":"Box-module_bx_textOverflow__7Al4V","bx_flexDirection":"Box-module_bx_flexDirection__tdLuL","bx_justifyContent":"Box-module_bx_justifyContent__54K3S","bx_alignItems":"Box-module_bx_alignItems__7zls-","bx_flexWrap":"Box-module_bx_flexWrap__mkq2M","bx_flex":"Box-module_bx_flex__vzgwH","bx_gridTemplateColumns":"Box-module_bx_gridTemplateColumns__Mc8YZ","bx_gridTemplateRows":"Box-module_bx_gridTemplateRows__iUpff","bx_gridTemplateAreas":"Box-module_bx_gridTemplateAreas__zRd3P","bx_gridArea":"Box-module_bx_gridArea__5TJ0S","bx_gridColumn":"Box-module_bx_gridColumn__bELVD","bx_gridRow":"Box-module_bx_gridRow__dKaSb","bx_gridColumnStart":"Box-module_bx_gridColumnStart__H9a9s","bx_gridColumnEnd":"Box-module_bx_gridColumnEnd__Iet9-","bx_gridRowStart":"Box-module_bx_gridRowStart__lSQVC","bx_gridRowEnd":"Box-module_bx_gridRowEnd__3gu17","bx_gridAutoFlow":"Box-module_bx_gridAutoFlow__3ATs7","bx_gridAutoColumns":"Box-module_bx_gridAutoColumns__a8BFY","bx_gridAutoRows":"Box-module_bx_gridAutoRows__1y8UP","bx_gap":"Box-module_bx_gap__STc4y","bx_transform":"Box-module_bx_transform__NRZXt","bx_transition":"Box-module_bx_transition__f4y4p","bx_overflow":"Box-module_bx_overflow__U0CPW","bx_overflowX":"Box-module_bx_overflowX__NlpH1","bx_overflowY":"Box-module_bx_overflowY__Tf6Le","bx_boxShadow":"Box-module_bx_boxShadow__p7SoF","bx_cursor":"Box-module_bx_cursor__fO7Rt","bx_display_tablet":"Box-module_bx_display_tablet__gGCXW","bx_position_tablet":"Box-module_bx_position_tablet__n6vZ1","bx_top_tablet":"Box-module_bx_top_tablet__EL22Q","bx_right_tablet":"Box-module_bx_right_tablet__Dv5G-","bx_bottom_tablet":"Box-module_bx_bottom_tablet__3DOD4","bx_left_tablet":"Box-module_bx_left_tablet__zPTv8","bx_zIndex_tablet":"Box-module_bx_zIndex_tablet__gtiz5","bx_width_tablet":"Box-module_bx_width_tablet__C-UDp","bx_height_tablet":"Box-module_bx_height_tablet__5et0k","bx_minWidth_tablet":"Box-module_bx_minWidth_tablet__BN0za","bx_minHeight_tablet":"Box-module_bx_minHeight_tablet__w58sh","bx_maxWidth_tablet":"Box-module_bx_maxWidth_tablet__eQulk","bx_maxHeight_tablet":"Box-module_bx_maxHeight_tablet__uz2lZ","bx_margin_tablet":"Box-module_bx_margin_tablet__AZqaT","bx_marginTop_tablet":"Box-module_bx_marginTop_tablet__MIIfU","bx_marginRight_tablet":"Box-module_bx_marginRight_tablet__h-Wub","bx_marginBottom_tablet":"Box-module_bx_marginBottom_tablet__PmkPm","bx_marginLeft_tablet":"Box-module_bx_marginLeft_tablet__kt7gd","bx_padding_tablet":"Box-module_bx_padding_tablet__DEN74","bx_paddingTop_tablet":"Box-module_bx_paddingTop_tablet__lmItm","bx_paddingRight_tablet":"Box-module_bx_paddingRight_tablet__e5xP3","bx_paddingBottom_tablet":"Box-module_bx_paddingBottom_tablet__0uN6y","bx_paddingLeft_tablet":"Box-module_bx_paddingLeft_tablet__JYd5o","bx_border_tablet":"Box-module_bx_border_tablet__FASgs","bx_borderRadius_tablet":"Box-module_bx_borderRadius_tablet__wdP9Q","bx_borderColor_tablet":"Box-module_bx_borderColor_tablet__-YMut","bx_borderStyle_tablet":"Box-module_bx_borderStyle_tablet__hiOil","bx_borderWidth_tablet":"Box-module_bx_borderWidth_tablet__617VZ","bx_backgroundColor_tablet":"Box-module_bx_backgroundColor_tablet__Xtioz","bx_backgroundImage_tablet":"Box-module_bx_backgroundImage_tablet__F-h9J","bx_fontSize_tablet":"Box-module_bx_fontSize_tablet__rEfDJ","bx_fontWeight_tablet":"Box-module_bx_fontWeight_tablet__puqC4","bx_textAlign_tablet":"Box-module_bx_textAlign_tablet__0ZXlC","bx_color_tablet":"Box-module_bx_color_tablet__HUp3c","bx_lineHeight_tablet":"Box-module_bx_lineHeight_tablet__JAQnI","bx_letterSpacing_tablet":"Box-module_bx_letterSpacing_tablet__ZLjDH","bx_textDecoration_tablet":"Box-module_bx_textDecoration_tablet__MDvjW","bx_textTransform_tablet":"Box-module_bx_textTransform_tablet__4D93-","bx_fontFamily_tablet":"Box-module_bx_fontFamily_tablet__2vx5U","bx_fontStyle_tablet":"Box-module_bx_fontStyle_tablet__mJ43d","bx_whiteSpace_tablet":"Box-module_bx_whiteSpace_tablet__6tEIW","bx_textOverflow_tablet":"Box-module_bx_textOverflow_tablet__V-J70","bx_flexDirection_tablet":"Box-module_bx_flexDirection_tablet__t-uLd","bx_justifyContent_tablet":"Box-module_bx_justifyContent_tablet__A1Y5f","bx_alignItems_tablet":"Box-module_bx_alignItems_tablet__tJWx-","bx_flexWrap_tablet":"Box-module_bx_flexWrap_tablet__o3LNi","bx_flex_tablet":"Box-module_bx_flex_tablet__-vO93","bx_gridTemplateColumns_tablet":"Box-module_bx_gridTemplateColumns_tablet__Lbfbh","bx_gridTemplateRows_tablet":"Box-module_bx_gridTemplateRows_tablet__I5R3o","bx_gridTemplateAreas_tablet":"Box-module_bx_gridTemplateAreas_tablet__dcGC9","bx_gridArea_tablet":"Box-module_bx_gridArea_tablet__tvKsV","bx_gridColumn_tablet":"Box-module_bx_gridColumn_tablet__0vBbk","bx_gridRow_tablet":"Box-module_bx_gridRow_tablet__OhbVr","bx_gridColumnStart_tablet":"Box-module_bx_gridColumnStart_tablet__5EVkf","bx_gridColumnEnd_tablet":"Box-module_bx_gridColumnEnd_tablet__nsKfl","bx_gridRowStart_tablet":"Box-module_bx_gridRowStart_tablet__eBlHZ","bx_gridRowEnd_tablet":"Box-module_bx_gridRowEnd_tablet__WDCpW","bx_gridAutoFlow_tablet":"Box-module_bx_gridAutoFlow_tablet__fT6-i","bx_gridAutoColumns_tablet":"Box-module_bx_gridAutoColumns_tablet__zNP4P","bx_gridAutoRows_tablet":"Box-module_bx_gridAutoRows_tablet__7g8Xq","bx_gap_tablet":"Box-module_bx_gap_tablet__R-rVv","bx_transform_tablet":"Box-module_bx_transform_tablet__eZVIa","bx_transition_tablet":"Box-module_bx_transition_tablet__ftHGs","bx_overflow_tablet":"Box-module_bx_overflow_tablet__4XP7c","bx_overflowX_tablet":"Box-module_bx_overflowX_tablet__YpNRL","bx_overflowY_tablet":"Box-module_bx_overflowY_tablet__zU4I-","bx_boxShadow_tablet":"Box-module_bx_boxShadow_tablet__WNzLg","bx_cursor_tablet":"Box-module_bx_cursor_tablet__kVxW1","bx_display_desktop":"Box-module_bx_display_desktop__mpCH1","bx_position_desktop":"Box-module_bx_position_desktop__wgCwf","bx_top_desktop":"Box-module_bx_top_desktop__yhMUL","bx_right_desktop":"Box-module_bx_right_desktop__C4DjI","bx_bottom_desktop":"Box-module_bx_bottom_desktop__8SG15","bx_left_desktop":"Box-module_bx_left_desktop__tnos7","bx_zIndex_desktop":"Box-module_bx_zIndex_desktop__luSWv","bx_width_desktop":"Box-module_bx_width_desktop__p-Vbv","bx_height_desktop":"Box-module_bx_height_desktop__9LMbT","bx_minWidth_desktop":"Box-module_bx_minWidth_desktop__7kiUR","bx_minHeight_desktop":"Box-module_bx_minHeight_desktop__iDALv","bx_maxWidth_desktop":"Box-module_bx_maxWidth_desktop__m7ca4","bx_maxHeight_desktop":"Box-module_bx_maxHeight_desktop__OYstS","bx_margin_desktop":"Box-module_bx_margin_desktop__7XGVM","bx_marginTop_desktop":"Box-module_bx_marginTop_desktop__laoM-","bx_marginRight_desktop":"Box-module_bx_marginRight_desktop__b84rK","bx_marginBottom_desktop":"Box-module_bx_marginBottom_desktop__IXFd7","bx_marginLeft_desktop":"Box-module_bx_marginLeft_desktop__nUtfF","bx_padding_desktop":"Box-module_bx_padding_desktop__QIPVc","bx_paddingTop_desktop":"Box-module_bx_paddingTop_desktop__tVLPM","bx_paddingRight_desktop":"Box-module_bx_paddingRight_desktop__Qi-VJ","bx_paddingBottom_desktop":"Box-module_bx_paddingBottom_desktop__2QIc-","bx_paddingLeft_desktop":"Box-module_bx_paddingLeft_desktop__dCpAh","bx_border_desktop":"Box-module_bx_border_desktop__Y9pk0","bx_borderRadius_desktop":"Box-module_bx_borderRadius_desktop__fGdNA","bx_borderColor_desktop":"Box-module_bx_borderColor_desktop__grJF-","bx_borderStyle_desktop":"Box-module_bx_borderStyle_desktop__e-5VG","bx_borderWidth_desktop":"Box-module_bx_borderWidth_desktop__HKlsS","bx_backgroundColor_desktop":"Box-module_bx_backgroundColor_desktop__XJ-A7","bx_backgroundImage_desktop":"Box-module_bx_backgroundImage_desktop__jdJBT","bx_fontSize_desktop":"Box-module_bx_fontSize_desktop__aUj1o","bx_fontWeight_desktop":"Box-module_bx_fontWeight_desktop__nkOU-","bx_textAlign_desktop":"Box-module_bx_textAlign_desktop__O3yX3","bx_color_desktop":"Box-module_bx_color_desktop__RuMen","bx_lineHeight_desktop":"Box-module_bx_lineHeight_desktop__SATO4","bx_letterSpacing_desktop":"Box-module_bx_letterSpacing_desktop__Q5LRK","bx_textDecoration_desktop":"Box-module_bx_textDecoration_desktop__4DMSv","bx_textTransform_desktop":"Box-module_bx_textTransform_desktop__SYBrr","bx_fontFamily_desktop":"Box-module_bx_fontFamily_desktop__tVV59","bx_fontStyle_desktop":"Box-module_bx_fontStyle_desktop__rHYeg","bx_whiteSpace_desktop":"Box-module_bx_whiteSpace_desktop__00VUi","bx_textOverflow_desktop":"Box-module_bx_textOverflow_desktop__vmY1a","bx_flexDirection_desktop":"Box-module_bx_flexDirection_desktop__V3Ki0","bx_justifyContent_desktop":"Box-module_bx_justifyContent_desktop__aUAmZ","bx_alignItems_desktop":"Box-module_bx_alignItems_desktop__f6ixo","bx_flexWrap_desktop":"Box-module_bx_flexWrap_desktop__G3aOa","bx_flex_desktop":"Box-module_bx_flex_desktop__eKV-u","bx_gridTemplateColumns_desktop":"Box-module_bx_gridTemplateColumns_desktop__-HYlU","bx_gridTemplateRows_desktop":"Box-module_bx_gridTemplateRows_desktop__I7jQA","bx_gridTemplateAreas_desktop":"Box-module_bx_gridTemplateAreas_desktop__TDgAU","bx_gridArea_desktop":"Box-module_bx_gridArea_desktop__gdbZ9","bx_gridColumn_desktop":"Box-module_bx_gridColumn_desktop__aslt0","bx_gridRow_desktop":"Box-module_bx_gridRow_desktop__cyJPv","bx_gridColumnStart_desktop":"Box-module_bx_gridColumnStart_desktop__3Tv2J","bx_gridColumnEnd_desktop":"Box-module_bx_gridColumnEnd_desktop__W8xef","bx_gridRowStart_desktop":"Box-module_bx_gridRowStart_desktop__33vYO","bx_gridRowEnd_desktop":"Box-module_bx_gridRowEnd_desktop__S4M4l","bx_gridAutoFlow_desktop":"Box-module_bx_gridAutoFlow_desktop__J2KoG","bx_gridAutoColumns_desktop":"Box-module_bx_gridAutoColumns_desktop__Votzh","bx_gridAutoRows_desktop":"Box-module_bx_gridAutoRows_desktop__c363J","bx_gap_desktop":"Box-module_bx_gap_desktop__piSHy","bx_transform_desktop":"Box-module_bx_transform_desktop__kgmd0","bx_transition_desktop":"Box-module_bx_transition_desktop__pGQ1O","bx_overflow_desktop":"Box-module_bx_overflow_desktop__c0fcD","bx_overflowX_desktop":"Box-module_bx_overflowX_desktop__mXqMS","bx_overflowY_desktop":"Box-module_bx_overflowY_desktop__oF6nR","bx_boxShadow_desktop":"Box-module_bx_boxShadow_desktop__boeNb","bx_cursor_desktop":"Box-module_bx_cursor_desktop__j8htf"};function cx(...args) {
    const classes = [];
    for (const arg of args) {
        if (arg === null || arg === undefined || arg === false)
            continue;
        if (typeof arg === "string" || typeof arg === "number") {
            classes.push(String(arg));
        }
        else if (Array.isArray(arg)) {
            classes.push(cx(...arg));
        }
        else if (typeof arg === "object") {
            for (const key in arg) {
                if (Object.prototype.hasOwnProperty.call(arg, key) && arg[key]) {
                    classes.push(key);
                }
            }
        }
    }
    return classes.join(" ");
}
const classNames = cx;const BOX_CSS_PROPS_KEYS = new Set([
    "display",
    "position",
    "top",
    "right",
    "bottom",
    "left",
    "zIndex",
    "width",
    "height",
    "minWidth",
    "minHeight",
    "maxWidth",
    "maxHeight",
    "margin",
    "marginTop",
    "marginRight",
    "marginBottom",
    "marginLeft",
    "padding",
    "paddingTop",
    "paddingRight",
    "paddingBottom",
    "paddingLeft",
    "border",
    "borderRadius",
    "borderColor",
    "borderStyle",
    "borderWidth",
    "backgroundColor",
    "backgroundImage",
    "fontSize",
    "fontWeight",
    "textAlign",
    "color",
    "lineHeight",
    "letterSpacing",
    "textDecoration",
    "textTransform",
    "fontFamily",
    "fontStyle",
    "whiteSpace",
    "textOverflow",
    "flexDirection",
    "justifyContent",
    "alignItems",
    "flexWrap",
    "flex",
    "gridTemplateColumns",
    "gridTemplateRows",
    "gridTemplateAreas",
    "gridArea",
    "gridColumn",
    "gridRow",
    "gridColumnStart",
    "gridColumnEnd",
    "gridRowStart",
    "gridRowEnd",
    "gridAutoFlow",
    "gridAutoColumns",
    "gridAutoRows",
    "gap",
    "transform",
    "transition",
    "overflow",
    "overflowX",
    "overflowY",
    "boxShadow",
    "cursor",
    "htmlFor",
]);const getSplittedProps = (props) => {
    let cssProps = {};
    let baseProps = {};
    const { mobile, tablet, desktop, ...restProps } = props;
    Object.keys(restProps).forEach((key) => {
        if (BOX_CSS_PROPS_KEYS.has(key)) {
            cssProps = {
                ...cssProps,
                [key]: restProps[key],
            };
        }
        else {
            baseProps = {
                ...baseProps,
                [key]: restProps[key],
            };
        }
    });
    return {
        cssProps: {
            mobile,
            tablet,
            desktop,
            ...cssProps,
        },
        baseProps,
    };
};
const generateBaseCssClasses = (classes, styles, props, layout) => {
    if (!props) {
        return;
    }
    if (layout) {
        Object.entries(props).forEach(([key, value]) => {
            if (value) {
                classes.add(styles[`bx_${key}_${layout}`]);
            }
        });
        return;
    }
    Object.entries(props).forEach(([key, value]) => {
        if (value) {
            classes.add(styles[`bx_${key}`]);
        }
    });
};
const generateBoxCssClasses = (props, styles) => {
    const availableClasses = new Set();
    Object.entries(props).forEach(([key, value]) => {
        if (value) {
            if (key === "mobile" || key === "tablet" || key === "desktop") {
                generateBaseCssClasses(availableClasses, styles, value, key);
            }
            else {
                const className = styles[`bx_${key}`];
                if (className) {
                    availableClasses.add(className);
                }
            }
        }
    });
    return [...availableClasses];
};
const getBoxCssVariables = (props, breakpoint) => {
    return [...BOX_CSS_PROPS_KEYS].reduce((a, v) => {
        if (breakpoint && !props[breakpoint]?.[v])
            return a;
        if (!breakpoint && !props?.[v])
            return a;
        if (breakpoint) {
            if (props[breakpoint]?.[v]) {
                return {
                    ...a,
                    [`--${v}-${breakpoint}`]: props[breakpoint]?.[v],
                };
            }
            return a;
        }
        else {
            if (props?.[v]) {
                return {
                    ...a,
                    [`--${v}`]: props?.[v],
                };
            }
            return a;
        }
    }, {});
};
const generateBoxStyles = (props) => {
    return {
        ...getBoxCssVariables(props),
        ...getBoxCssVariables(props, "mobile"),
        ...getBoxCssVariables(props, "tablet"),
        ...getBoxCssVariables(props, "desktop"),
    };
};const Box = ({ children, className, style, as = "div", htmlFor, hasMirror, ...props }) => {
    const { cssProps, baseProps } = getSplittedProps(props);
    const Component = as;
    const availableClasses = generateBoxCssClasses(cssProps, styles);
    const cssVariables = generateBoxStyles(cssProps);
    return (jsx(Component, { className: cx(...availableClasses, className, hasMirror && styles.bx_hasMirror), style: {
            ...style,
            ...cssVariables,
        }, htmlFor: htmlFor, ...baseProps, children: children }));
};export{Box,classNames,cx};//# sourceMappingURL=index.esm.js.map