@dossierhq/design/lib/utils/LayoutPropsUtils.js

The design system for Dossier.

import { toClassName } from './ClassNameUtils.js';
export const SpacingValues = [0, 1, 2, 3, 4, 5, 6];
const heightToClassNameMap = {
    0: 'is-height-0',
    '100%': 'is-height-100',
    '100vh': 'is-height-100vh',
};
const widthToClassNameMap = {
    '100%': 'is-width-100',
};
const maxWidthToClassNameMap = {
    '40rem': 'is-max-width-40rem',
};
const aspectRatioClassNameMap = {
    '1/1': 'is-aspect-1',
    '16/9': 'is-aspect-16-9',
};
export function toSpacingClassName({ margin, marginLeft, marginTop, marginRight, marginBottom, marginHorizontal, marginVertical, padding, paddingLeft, paddingTop, paddingRight, paddingBottom, paddingHorizontal, paddingVertical, gap, columnGap, rowGap, }) {
    return toClassName(valueClassName('m-', margin), valueClassName('ml-', marginLeft), valueClassName('mt-', marginTop), valueClassName('mr-', marginRight), valueClassName('mb-', marginBottom), valueClassName('mx-', marginHorizontal), valueClassName('my-', marginVertical), valueClassName('p-', padding), valueClassName('pl-', paddingLeft), valueClassName('pt-', paddingTop), valueClassName('pr-', paddingRight), valueClassName('pb-', paddingBottom), valueClassName('px-', paddingHorizontal), valueClassName('py-', paddingVertical), valueClassName('g-', gap), valueClassName('gc-', columnGap), valueClassName('gr-', rowGap));
}
function valueClassName(prefix, value) {
    return typeof value === 'number' ? prefix + value : undefined;
}
export function toSizeClassName({ width, height, maxWidth, aspectRatio }) {
    return toClassName(width !== undefined && widthToClassNameMap[width], height !== undefined && heightToClassNameMap[height], maxWidth !== undefined && maxWidthToClassNameMap[maxWidth], aspectRatio !== undefined && aspectRatioClassNameMap[aspectRatio]);
}
export function extractLayoutProps(props) {
    const { margin, marginLeft, marginTop, marginRight, marginBottom, marginHorizontal, marginVertical, padding, paddingLeft, paddingTop, paddingRight, paddingBottom, paddingHorizontal, paddingVertical, gap, columnGap, rowGap, width, height, flexDirection, alignItems, justifyContent, ...otherProps } = props;
    const layoutProps = {
        margin,
        marginLeft,
        marginTop,
        marginRight,
        marginBottom,
        marginHorizontal,
        marginVertical,
        padding,
        paddingLeft,
        paddingTop,
        paddingRight,
        paddingBottom,
        paddingHorizontal,
        paddingVertical,
        gap,
        columnGap,
        rowGap,
        width,
        height,
        flexDirection,
        alignItems,
        justifyContent,
    };
    return { layoutProps, otherProps: otherProps };
}
//# sourceMappingURL=LayoutPropsUtils.js.map