mainbase-ui 1.2.5 → 3.36.0

package/dist/cjs/styled-system/token-dictionary.cjs

@@ -0,0 +1,440 @@
+'use strict';
+
+var compact = require('../utils/compact.cjs');
+var createProps = require('../utils/create-props.cjs');
+var is = require('../utils/is.cjs');
+var entries = require('../utils/entries.cjs');
+var walkObject = require('../utils/walk-object.cjs');
+var memo = require('../utils/memo.cjs');
+require('react');
+require('../utils/unit.cjs');
+var cssVar = require('./css-var.cjs');
+var esc = require('./esc.cjs');
+var expandReference = require('./expand-reference.cjs');
+var mapToJson = require('./map-to-json.cjs');
+var references = require('./references.cjs');
+var resolveTokenValue = require('./resolve-token-value.cjs');
+var tokenMiddleware = require('./token-middleware.cjs');
+var tokenTransforms = require('./token-transforms.cjs');
+
+const isToken = (value) => {
+  return is.isObject(value) && Object.prototype.hasOwnProperty.call(value, "value");
+};
+function expandBreakpoints(breakpoints) {
+  if (!breakpoints) return { breakpoints: {}, sizes: {} };
+  return {
+    breakpoints: walkObject.mapObject(breakpoints, (value) => ({ value })),
+    sizes: entries.mapEntries(breakpoints, (key, value) => [
+      `breakpoint-${key}`,
+      { value }
+    ])
+  };
+}
+function createTokenDictionary(options) {
+  const {
+    prefix = "",
+    tokens = {},
+    semanticTokens = {},
+    breakpoints = {}
+  } = options;
+  const formatTokenName = (path) => path.join(".");
+  const formatCssVar = (path, prefix2) => cssVar.cssVar(path.join("-"), { prefix: prefix2 });
+  const allTokens = [];
+  const tokenNameMap = /* @__PURE__ */ new Map();
+  const conditionMap = /* @__PURE__ */ new Map();
+  const cssVarMap = /* @__PURE__ */ new Map();
+  const colorPaletteMap = /* @__PURE__ */ new Map();
+  const flatMap = /* @__PURE__ */ new Map();
+  const byCategory = /* @__PURE__ */ new Map();
+  const categoryMap = /* @__PURE__ */ new Map();
+  const transforms = /* @__PURE__ */ new Map();
+  const middlewares = [];
+  function registerToken(token, phase) {
+    allTokens.push(token);
+    if (token.extensions.condition === "base" || !tokenNameMap.has(token.name)) {
+      tokenNameMap.set(token.name, token);
+    }
+    if (phase) {
+      transforms.forEach((fn) => {
+        if (fn.enforce === phase) transformToken(fn, token);
+      });
+    }
+  }
+  const breakpointTokens = expandBreakpoints(breakpoints);
+  const computedTokens = compact.compact({
+    ...tokens,
+    breakpoints: breakpointTokens.breakpoints,
+    sizes: {
+      ...tokens.sizes,
+      ...breakpointTokens.sizes
+    }
+  });
+  function registerTokens() {
+    walkObject.walkObject(
+      computedTokens,
+      (entry, path) => {
+        const isDefault = path.includes("DEFAULT");
+        path = filterDefault(path);
+        const category = path[0];
+        const name = formatTokenName(path);
+        const t = is.isString(entry) ? { value: entry } : entry;
+        const resolved = resolveTokenValue.resolveTokenValue(category, t.value);
+        const token = {
+          value: resolved,
+          originalValue: resolved,
+          name,
+          path,
+          extensions: {
+            condition: "base",
+            originalPath: path,
+            category,
+            prop: formatTokenName(path.slice(1))
+          }
+        };
+        if (isDefault) {
+          token.extensions.default = true;
+        }
+        registerToken(token);
+      },
+      { stop: isToken }
+    );
+    walkObject.walkObject(
+      semanticTokens,
+      (entry, path) => {
+        const isDefault = path.includes("DEFAULT");
+        path = filterBaseCondition(filterDefault(path));
+        const category = path[0];
+        const name = formatTokenName(path);
+        const t = is.isString(entry.value) || Array.isArray(entry.value) ? { value: { base: entry.value } } : entry;
+        const cond = resolveTokenValue.resolveSemanticConditionValues(category, t.value);
+        const token = {
+          value: cond.base ?? "",
+          originalValue: cond.base ?? "",
+          name,
+          path,
+          extensions: {
+            originalPath: path,
+            category,
+            conditions: cond,
+            condition: "base",
+            prop: formatTokenName(path.slice(1))
+          }
+        };
+        if (isDefault) {
+          token.extensions.default = true;
+        }
+        registerToken(token);
+      },
+      { stop: isToken }
+    );
+  }
+  function getByName(name) {
+    return tokenNameMap.get(name);
+  }
+  function buildConditionMap(token) {
+    const { condition } = token.extensions;
+    if (!condition) return;
+    if (!conditionMap.has(condition)) {
+      conditionMap.set(condition, /* @__PURE__ */ new Set());
+    }
+    conditionMap.get(condition).add(token);
+  }
+  function buildCategoryMap(token) {
+    const { category, prop, condition, conditions } = token.extensions;
+    if (!category) return;
+    if (!categoryMap.has(category)) {
+      categoryMap.set(category, /* @__PURE__ */ new Map());
+    }
+    const map = categoryMap.get(category);
+    const existing = map.get(prop);
+    if (condition == null || condition === "base") {
+      map.set(prop, token);
+      return;
+    }
+    if (conditions && !existing) {
+      map.set(prop, token);
+    }
+  }
+  function buildCssVars(token) {
+    const { condition, negative, virtual, cssVar: cssVar2 } = token.extensions;
+    if (negative || virtual || !condition || !cssVar2 || token.value === "")
+      return;
+    if (!cssVarMap.has(condition)) {
+      cssVarMap.set(condition, /* @__PURE__ */ new Map());
+    }
+    cssVarMap.get(condition).set(cssVar2.var, token.value);
+  }
+  function buildFlatMap(token) {
+    const { category, prop, cssVar: cssVar2, negative } = token.extensions;
+    if (!category) return;
+    if (!byCategory.has(category)) {
+      byCategory.set(category, /* @__PURE__ */ new Map());
+    }
+    const value = negative ? token.extensions.conditions ? token.originalValue : token.value : cssVar2.ref;
+    byCategory.get(category).set(prop, value);
+    flatMap.set([category, prop].join("."), value);
+  }
+  function buildColorPalette(token) {
+    const { colorPalette, virtual, default: isDefault } = token.extensions;
+    if (!colorPalette || virtual) return;
+    colorPalette.roots.forEach((root) => {
+      const name = formatTokenName(root);
+      if (!colorPaletteMap.has(name)) {
+        colorPaletteMap.set(name, /* @__PURE__ */ new Map());
+      }
+      const virtualPath = replaceRootWithColorPalette(
+        [...token.path],
+        [...root]
+      );
+      const virtualName = formatTokenName(virtualPath);
+      const virtualToken = getByName(virtualName);
+      if (!virtualToken || !virtualToken.extensions.cssVar) return;
+      const { var: virtualVar } = virtualToken.extensions.cssVar;
+      colorPaletteMap.get(name).set(virtualVar, token.extensions.cssVar.ref);
+      if (isDefault && root.length === 1) {
+        const colorPaletteName = formatTokenName(["colors", "colorPalette"]);
+        const colorPaletteToken = getByName(colorPaletteName);
+        if (!colorPaletteToken) return;
+        const name2 = formatTokenName(token.path);
+        const virtualToken2 = getByName(name2);
+        if (!virtualToken2) return;
+        const keyPath = colorPalette.keys[0]?.filter(Boolean);
+        if (!keyPath.length) return;
+        const computedName = formatTokenName(root.concat(keyPath));
+        if (!colorPaletteMap.has(computedName)) {
+          colorPaletteMap.set(computedName, /* @__PURE__ */ new Map());
+        }
+        colorPaletteMap.get(computedName).set(
+          colorPaletteToken.extensions.cssVar.var,
+          virtualToken2.extensions.cssVar.ref
+        );
+      }
+    });
+  }
+  let byCategoryJson = {};
+  function setupViews() {
+    allTokens.forEach((token) => {
+      buildConditionMap(token);
+      buildCategoryMap(token);
+      buildCssVars(token);
+      buildFlatMap(token);
+      buildColorPalette(token);
+    });
+    byCategoryJson = mapToJson.mapToJson(byCategory);
+  }
+  const colorMix = (value, tokenFn) => {
+    if (!value || typeof value !== "string") return { invalid: true, value };
+    const [colorPath, rawOpacity] = value.split("/");
+    if (!colorPath || !rawOpacity) {
+      return { invalid: true, value: colorPath };
+    }
+    const colorToken = tokenFn(colorPath);
+    const opacityToken = getByName(`opacity.${rawOpacity}`)?.value;
+    if (!opacityToken && isNaN(Number(rawOpacity))) {
+      return { invalid: true, value: colorPath };
+    }
+    const percent = opacityToken ? Number(opacityToken) * 100 + "%" : `${rawOpacity}%`;
+    const color = colorToken ?? colorPath;
+    return {
+      invalid: false,
+      color,
+      value: `color-mix(in srgb, ${color} ${percent}, transparent)`
+    };
+  };
+  const getVar = memo.memo((value, fallback) => {
+    return flatMap.get(value) ?? fallback;
+  });
+  const getCategoryValues = memo.memo((category) => {
+    return byCategoryJson[category] || null;
+  });
+  const expandReferenceInValue = memo.memo((value) => {
+    return expandReference.expandTokenReferences(value, (path) => {
+      if (!path) return;
+      if (path.includes("/")) {
+        const mix = colorMix(path, (v) => getVar(v));
+        if (mix.invalid) {
+          throw new Error("Invalid color mix at " + path + ": " + mix.value);
+        }
+        return mix.value;
+      }
+      const resolved = getVar(path);
+      if (resolved) return resolved;
+      return references.TOKEN_PATH_REGEX.test(path) ? esc.esc(path) : path;
+    });
+  });
+  const dictionary = {
+    prefix,
+    allTokens,
+    tokenMap: tokenNameMap,
+    registerToken,
+    getByName,
+    formatTokenName,
+    formatCssVar,
+    flatMap,
+    cssVarMap,
+    categoryMap,
+    colorPaletteMap,
+    getVar,
+    getCategoryValues,
+    expandReferenceInValue
+  };
+  function registerTransform(...fns) {
+    fns.forEach((fn) => {
+      transforms.set(fn.name, fn);
+    });
+  }
+  function registerMiddleware(...fns) {
+    middlewares.push(...fns);
+  }
+  function transformToken(transform, token) {
+    if (token.extensions.references) return;
+    if (is.isFunction(transform.match) && !transform.match(token)) return;
+    const fn = (v) => transform.transform(v, dictionary);
+    const transformed = fn(token);
+    switch (true) {
+      case transform.type === "extensions":
+        Object.assign(token.extensions, transformed);
+        break;
+      case transform.type === "value":
+        token.value = transformed;
+        break;
+      default:
+        token[transform.type] = transformed;
+        break;
+    }
+  }
+  function applyMiddlewares(enforce) {
+    middlewares.forEach((middleware) => {
+      if (middleware.enforce === enforce) {
+        middleware.transform(dictionary);
+      }
+    });
+  }
+  function applyTransforms(enforce) {
+    transforms.forEach((transform) => {
+      if (transform.enforce === enforce) {
+        allTokens.forEach((token) => {
+          transformToken(transform, token);
+        });
+      }
+    });
+  }
+  function addConditionalTokens() {
+    allTokens.slice().forEach((token) => {
+      const tokens2 = getConditionalTokens(token);
+      if (!tokens2 || tokens2.length === 0) return;
+      tokens2.forEach((token2) => {
+        registerToken(token2);
+      });
+    });
+  }
+  function getTokenReferences(value) {
+    const refs = references.getReferences(value);
+    const result = [];
+    for (let i = 0; i < refs.length; i++) {
+      const token = getByName(refs[i]);
+      if (token) {
+        result.push(token);
+      }
+    }
+    return result;
+  }
+  function addReferences() {
+    allTokens.forEach((token) => {
+      if (!references.hasReference(token.value)) return;
+      const references$1 = getTokenReferences(token.value);
+      token.extensions.references = references$1.reduce((acc, ref) => {
+        acc[ref.name] = ref;
+        return acc;
+      }, {});
+    });
+  }
+  function expandTokenReferences() {
+    allTokens.forEach((token) => {
+      references.expandReferences(token);
+    });
+  }
+  function build() {
+    applyMiddlewares("pre");
+    applyTransforms("pre");
+    addConditionalTokens();
+    addReferences();
+    expandTokenReferences();
+    applyMiddlewares("post");
+    applyTransforms("post");
+    setupViews();
+  }
+  registerTokens();
+  registerTransform(...tokenTransforms.tokenTransforms);
+  registerMiddleware(...tokenMiddleware.tokenMiddlewares);
+  build();
+  return dictionary;
+}
+function filterDefault(path) {
+  if (path[0] === "DEFAULT") return path;
+  return path.filter((item) => item !== "DEFAULT");
+}
+function filterBaseCondition(path) {
+  return path.filter((item) => item !== "base");
+}
+function getConditionalTokens(token) {
+  if (!token.extensions.conditions) return;
+  const { conditions } = token.extensions;
+  const tokens = [];
+  walkObject.walkObject(conditions, (value, path) => {
+    const nextPath = filterBaseCondition(path);
+    if (!nextPath.length) return;
+    const nextToken = {
+      ...token,
+      value,
+      extensions: {
+        ...token.extensions,
+        condition: nextPath.join(":")
+      }
+    };
+    tokens.push(nextToken);
+  });
+  return tokens;
+}
+function replaceRootWithColorPalette(path, roots) {
+  const startIndex = path.findIndex(
+    (_, index) => roots.every(
+      (rootElement, rootIndex) => path[index + rootIndex] === rootElement
+    )
+  );
+  if (startIndex === -1) {
+    return path;
+  }
+  path.splice(startIndex, roots.length);
+  path.splice(startIndex, 0, "colorPalette");
+  return path;
+}
+const tokenCategories = createProps.createProps()([
+  "aspectRatios",
+  "zIndex",
+  "opacity",
+  "colors",
+  "fonts",
+  "fontSizes",
+  "fontWeights",
+  "lineHeights",
+  "letterSpacings",
+  "sizes",
+  "shadows",
+  "spacing",
+  "radii",
+  "cursor",
+  "borders",
+  "borderWidths",
+  "borderStyles",
+  "durations",
+  "easings",
+  "animations",
+  "blurs",
+  "gradients",
+  "breakpoints",
+  "assets"
+]);
+
+exports.createTokenDictionary = createTokenDictionary;
+exports.tokenCategories = tokenCategories;

package/dist/cjs/styled-system/token-middleware.cjs

@@ -0,0 +1,152 @@
+'use strict';
+
+var is = require('../utils/is.cjs');
+require('react');
+require('../utils/unit.cjs');
+var calc = require('./calc.cjs');
+var unitConversion = require('./unit-conversion.cjs');
+
+const addNegativeTokens = {
+  enforce: "pre",
+  transform(dictionary) {
+    const { prefix, allTokens, formatCssVar, formatTokenName, registerToken } = dictionary;
+    const tokens = allTokens.filter(
+      ({ extensions }) => extensions.category === "spacing"
+    );
+    tokens.forEach((token) => {
+      const originalPath = token.path.slice();
+      const originalVar = formatCssVar(originalPath, prefix);
+      if (is.isString(token.value) && token.value === "0rem") {
+        return;
+      }
+      const newPath = [...token.path];
+      const lastPath = newPath[newPath.length - 1];
+      if (lastPath != null) {
+        newPath[newPath.length - 1] = `-${lastPath}`;
+      }
+      const nextToken = {
+        ...token,
+        value: calc.calc.negate(originalVar.ref),
+        name: formatTokenName(newPath),
+        path: newPath,
+        extensions: {
+          ...token.extensions,
+          negative: true,
+          prop: `-${token.extensions.prop}`,
+          originalPath
+        }
+      };
+      registerToken(nextToken);
+    });
+  }
+};
+const units = /* @__PURE__ */ new Set([
+  "spacing",
+  "sizes",
+  "borderWidths",
+  "fontSizes",
+  "radii"
+]);
+const addPixelUnit = {
+  enforce: "post",
+  transform(dictionary) {
+    const tokens = dictionary.allTokens.filter((token) => {
+      return units.has(token.extensions.category) && !token.extensions.negative;
+    });
+    tokens.forEach((token) => {
+      Object.assign(token.extensions, {
+        pixelValue: unitConversion.toPx(token.value)
+      });
+    });
+  }
+};
+const addVirtualPalette = {
+  enforce: "post",
+  transform(dictionary) {
+    const { allTokens, registerToken, formatTokenName } = dictionary;
+    const tokens = allTokens.filter(
+      ({ extensions }) => extensions.category === "colors"
+    );
+    const keys = /* @__PURE__ */ new Map();
+    const colorPalettes = /* @__PURE__ */ new Map();
+    tokens.forEach((token) => {
+      const { colorPalette } = token.extensions;
+      if (!colorPalette) return;
+      colorPalette.keys.forEach((keyPath) => {
+        keys.set(formatTokenName(keyPath), keyPath);
+      });
+      colorPalette.roots.forEach((colorPaletteRoot) => {
+        const name = formatTokenName(colorPaletteRoot);
+        const colorPaletteList = colorPalettes.get(name) || [];
+        colorPaletteList.push(token);
+        colorPalettes.set(name, colorPaletteList);
+        if (token.extensions.default && colorPaletteRoot.length === 1) {
+          const keyPath = colorPalette.keys[0]?.filter(Boolean);
+          if (!keyPath.length) return;
+          const path = colorPaletteRoot.concat(keyPath);
+          keys.set(formatTokenName(path), []);
+        }
+      });
+    });
+    keys.forEach((segments) => {
+      const path = ["colors", "colorPalette", ...segments].filter(Boolean);
+      const name = formatTokenName(path);
+      const prop = formatTokenName(path.slice(1));
+      const token = {
+        name,
+        value: name,
+        originalValue: name,
+        path,
+        extensions: {
+          condition: "base",
+          originalPath: path,
+          category: "colors",
+          prop,
+          virtual: true
+        }
+      };
+      registerToken(token, "pre");
+    });
+  }
+};
+const removeEmptyTokens = {
+  enforce: "post",
+  transform(dictionary) {
+    const removed = [];
+    const next = [];
+    dictionary.allTokens.forEach((token) => {
+      if (token.value === "") {
+        removed.push(token);
+      } else {
+        next.push(token);
+      }
+    });
+    dictionary.allTokens.splice(0, dictionary.allTokens.length, ...next);
+    removed.forEach((token) => {
+      if (dictionary.tokenMap.get(token.name) !== token) return;
+      const replacement = dictionary.allTokens.find(
+        (t) => t.name === token.name
+      );
+      if (!replacement) {
+        dictionary.tokenMap.delete(token.name);
+        return;
+      }
+      if (token.extensions.conditions && !replacement.extensions.conditions) {
+        replacement.extensions.conditions = token.extensions.conditions;
+      }
+      dictionary.tokenMap.set(token.name, replacement);
+    });
+  }
+};
+const tokenMiddlewares = [
+  addNegativeTokens,
+  addVirtualPalette,
+  addPixelUnit,
+  removeEmptyTokens
+];
+
+exports.addNegativeTokens = addNegativeTokens;
+exports.addPixelUnit = addPixelUnit;
+exports.addVirtualPalette = addVirtualPalette;
+exports.removeEmptyTokens = removeEmptyTokens;
+exports.tokenMiddlewares = tokenMiddlewares;

package/dist/cjs/styled-system/token-transforms.cjs

@@ -0,0 +1,81 @@
+'use strict';
+
+var references = require('./references.cjs');
+
+const addCssVariables = {
+  type: "extensions",
+  enforce: "pre",
+  name: "tokens/css-var",
+  transform(token, dictionary) {
+    const { prefix, formatCssVar } = dictionary;
+    const { negative, originalPath } = token.extensions;
+    const path = negative ? originalPath : token.path;
+    return {
+      cssVar: formatCssVar(path.filter(Boolean), prefix)
+    };
+  }
+};
+const addConditionalCssVariables = {
+  enforce: "post",
+  type: "value",
+  name: "tokens/conditionals",
+  transform(token, dictionary) {
+    const { prefix, formatCssVar, getByName } = dictionary;
+    const refs = references.getReferences(token.value);
+    if (!refs.length) return token.value;
+    refs.forEach((ref) => {
+      if (!getByName(ref)) return;
+      const variable = formatCssVar(ref.split("."), prefix);
+      token.value = token.value.replaceAll(`{${ref}}`, variable.ref);
+    });
+    return token.value;
+  }
+};
+const addColorPalette = {
+  type: "extensions",
+  enforce: "pre",
+  name: "tokens/colors/colorPalette",
+  match(token) {
+    return token.extensions.category === "colors" && !token.extensions.virtual;
+  },
+  transform(token, dict) {
+    let path = token.path.slice();
+    path.pop();
+    path.shift();
+    if (path.length === 0) {
+      const newPath = [...token.path];
+      newPath.shift();
+      path = newPath;
+    }
+    if (path.length === 0) {
+      return {};
+    }
+    const roots = path.reduce((acc, _, i, arr) => {
+      const next = arr.slice(0, i + 1);
+      acc.push(next);
+      return acc;
+    }, []);
+    const root = path[0];
+    const value = dict.formatTokenName(path);
+    const keys = token.path.slice(token.path.indexOf(root) + 1).reduce((acc, _, i, arr) => {
+      acc.push(arr.slice(i));
+      return acc;
+    }, []);
+    if (keys.length === 0) {
+      keys.push([""]);
+    }
+    return {
+      colorPalette: { value, roots, keys }
+    };
+  }
+};
+const tokenTransforms = [
+  addCssVariables,
+  addConditionalCssVariables,
+  addColorPalette
+];
+
+exports.addColorPalette = addColorPalette;
+exports.addConditionalCssVariables = addConditionalCssVariables;
+exports.addCssVariables = addCssVariables;
+exports.tokenTransforms = tokenTransforms;

package/dist/cjs/styled-system/types.cjs

@@ -0,0 +1,2 @@
+'use strict';
+