dripsy-variants/dist/src/index.js

Utility to create style variants and compound variants for Dripsy.

export function createDripsyVariants(config) {
    return (props = {}) => {
        const { base = {}, variants = {}, compoundVariants = [], defaultVariants = {}, } = config;
        const resolved = [base];
        Object.keys(variants).forEach((key) => {
            const selected = props[key] ?? defaultVariants[key];
            if (selected && variants[key]?.[selected]) {
                resolved.push(variants[key][selected]);
            }
        });
        for (const cv of compoundVariants) {
            const match = Object.entries(cv).every(([key, value]) => {
                if (key === "sx")
                    return true;
                const propKey = key;
                const propValue = props[propKey] ?? defaultVariants[propKey];
                return Array.isArray(value)
                    ? value.includes(propValue)
                    : propValue === value;
            });
            if (match) {
                resolved.push(cv.sx);
            }
        }
        return Object.assign({}, ...resolved);
    };
}