@arwes/theme/build/cjs/createThemeBreakpoints/createThemeBreakpoints.js

Futuristic Sci-Fi UI Web Framework

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createThemeBreakpoints = void 0;
const createThemeBreakpoints = (settings = []) => {
    const breakpoints = settings.filter((item) => typeof item !== 'string').map((item) => item.key);
    const getBreakpointValue = (key) => {
        if (typeof key === 'string') {
            for (const item of settings) {
                if (typeof item !== 'string' && item.key === key) {
                    return item.value;
                }
            }
            return key;
        }
        const item = settings[key > settings.length - 1 ? settings.length - 1 : key];
        return typeof item === 'string' ? item : item.value;
    };
    const up = (key, opts) => {
        const media = opts?.strip ? '' : '@media ';
        return `${media}(min-width: ${getBreakpointValue(key)})`;
    };
    const down = (key, opts) => {
        const media = opts?.strip ? '' : '@media ';
        return `${media}(max-width: calc(${getBreakpointValue(key)} - 1px))`;
    };
    const between = (startKey, endKey, opts) => {
        const media = opts?.strip ? '' : '@media ';
        const min = getBreakpointValue(startKey);
        const max = getBreakpointValue(endKey);
        return `${media}(min-width: ${min}) and (max-width: calc(${max} - 1px))`;
    };
    return Object.freeze({
        breakpoints,
        settings,
        up,
        down,
        between
    });
};
exports.createThemeBreakpoints = createThemeBreakpoints;