@dash-ui/compound/dist/esm/index.dev.mjs

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;
    }

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

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

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

        var _key = mapKeys[i];
        if (_key === "default") continue;
        var value = compoundMap[_key];
        if (value === void 0 || value === null) continue;
        output.push((_key2 = styleMap[_key]) === null || _key2 === void 0 ? void 0 : _key2.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) {
        var _css = atomicCss(compoundMap);

        var classes = "";

        for (var 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
    });
  };
}

var emptyObj = {};

export { compound as default };
//# sourceMappingURL=index.dev.mjs.map