@wix/design-system/dist/esm/utils/defineClassNames.js

@wix/design-system

import { versionedNamespace } from './versionedNamespace';
export const NAMESPACE = 'wds';
const kebab = (value) => value.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
const join = (...classes) => classes.filter(Boolean).join(' ');
export const createClassNames = (blockName, config = {}, versionedNs = versionedNamespace) => {
    const namespaces = versionedNs ? [NAMESPACE, versionedNs] : [NAMESPACE];
    const block = `${NAMESPACE}-${blockName}`;
    const slot = (name) => `${block}__${kebab(name)}`;
    const variant = (name, value) => `${block}--${kebab(String(name))}-${kebab(value)}`;
    const state = (name) => `${block}--${kebab(name)}`;
    const blockClasses = (props) => {
        const variants = Object.entries(config.variants ?? {})
            .map(([name, values]) => {
            const value = props[name];
            if (!value || !values.includes(value))
                return null;
            return `--${kebab(name)}-${kebab(value)}`;
        })
            .filter(Boolean);
        const states = (config.states ?? [])
            .filter(name => props[name])
            .map(name => `--${kebab(name)}`);
        const tails = ['', ...variants, ...states];
        return namespaces.flatMap(ns => tails.map(tail => `${ns}-${blockName}${tail}`));
    };
    const root = (props = {}, ...classes) => join(...blockClasses(props), ...classes);
    const element = (name, ...classes) => join(...namespaces.map(ns => `${ns}-${blockName}__${kebab(name)}`), ...classes);
    return { root, element, slot, variant, state, block };
};
export const defineClassNames = (blockName, config = {}) => createClassNames(blockName, config);
//# sourceMappingURL=defineClassNames.js.map