@dash-ui/compound/dist/module/index.js

A utility for creating compound styles with dash-ui

/**
 * A factory function that creates a compound styles utility
 *
 * @param styles
 */
function compound(styles) {
  /**
   * A function for creating compound/multi-variant styles
   *
   * @param styleMap
   * @param options
   */
  return function compoundStyles(styleMap, options) {
    if (options === void 0) {
      options = emptyObj;
    }

    const cache = {};
    const mapKeys = Object.keys(styleMap);

    function atomicCss(compoundMap) {
      const key = JSON.stringify(compoundMap);
      const cached = cache[key];
      if (cached) return cached;
      const output = // @ts-expect-error
      typeof styleMap.default === "function" ? [// @ts-expect-error
      styleMap.default.css()] : [];

      for (let i = 0; i < mapKeys.length; i++) {
        var _key;

        const key = mapKeys[i];
        if (key === "default") continue;
        const value = compoundMap[key];
        if (value === void 0 || value === null) continue;
        output.push((_key = styleMap[key]) === null || _key === void 0 ? void 0 : _key.css(value));
      }

      return cache[key] = output;
    }

    function css(compoundMap) {
      return "".concat(...atomicCss(compoundMap));
    }

    function compoundStyle(compoundMap, compoundOptions) {
      var _compoundOptions$atom;

      if (compoundMap === void 0) {
        compoundMap = {};
      }

      if (compoundOptions === void 0) {
        compoundOptions = emptyObj;
      }

      if ((_compoundOptions$atom = compoundOptions.atomic) !== null && _compoundOptions$atom !== void 0 ? _compoundOptions$atom : options.atomic) {
        const css = atomicCss(compoundMap);
        let classes = "";

        for (let i = 0; i < css.length; i++) {
          classes += styles.cls(css[i]) + (i === css.length - 1 ? "" : " ");
        }

        return classes;
      }

      return styles.cls(css(compoundMap));
    }

    return Object.assign(compoundStyle, {
      css,
      atomicCss,
      styles: styleMap
    });
  };
}

const emptyObj = {};
export default compound;