@tamagui/web 1.114.4 → 1.115.0

package/dist/cjs/helpers/getStylesAtomic.cjs

@@ -0,0 +1,176 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var getStylesAtomic_exports = {};
+__export(getStylesAtomic_exports, {
+  getStyleAtomic: () => getStyleAtomic,
+  getStylesAtomic: () => getStylesAtomic,
+  styleToCSS: () => styleToCSS
+});
+module.exports = __toCommonJS(getStylesAtomic_exports);
+var import_helpers = require("@tamagui/helpers"),
+  import_config = require("../config.cjs"),
+  import_defaultOffset = require("./defaultOffset.cjs"),
+  import_normalizeColor = require("./normalizeColor.cjs"),
+  import_normalizeValueWithProperty = require("./normalizeValueWithProperty.cjs"),
+  import_pseudoDescriptors = require("./pseudoDescriptors.cjs"),
+  import_transformsToString = require("./transformsToString.cjs"),
+  import_useMedia = require("../hooks/useMedia.cjs");
+function getStylesAtomic(style) {
+  styleToCSS(style);
+  const out = [];
+  for (const key in style) {
+    if (key === "$$css") continue;
+    const val = style[key];
+    if (key in import_pseudoDescriptors.pseudoDescriptors) val && out.push(...getStyleAtomic(val, import_pseudoDescriptors.pseudoDescriptors[key]));else if ((0, import_useMedia.isMediaKey)(key)) for (const subKey in val) {
+      const so = getStyleObject(val, subKey);
+      so && (so[0] = key, out.push(so));
+    } else {
+      const so = getStyleObject(style, key);
+      so && out.push(so);
+    }
+  }
+  return out;
+}
+const getStyleAtomic = (style, pseudo) => {
+  styleToCSS(style);
+  const out = [];
+  for (const key in style) {
+    const so = getStyleObject(style, key, pseudo);
+    so && out.push(so);
+  }
+  return out;
+};
+let conf = null;
+const getStyleObject = (style, key, pseudo) => {
+  let val = style[key];
+  if (val == null) return;
+  key === "transform" && Array.isArray(style.transform) && (val = (0, import_transformsToString.transformsToString)(val));
+  const value = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key),
+    hash = (0, import_helpers.simpleHash)(typeof value == "string" ? value : `${value}`),
+    pseudoPrefix = pseudo ? `0${pseudo.name}-` : "";
+  conf ||= (0, import_config.getConfigMaybe)();
+  const identifier = `_${conf?.inverseShorthands[key] || key}-${pseudoPrefix}${hash}`,
+    rules = createAtomicRules(identifier, key, value, pseudo);
+  return [
+  // array for performance
+  key, value, identifier, pseudo?.name, rules];
+};
+function styleToCSS(style) {
+  const {
+    shadowOffset,
+    shadowRadius,
+    shadowColor,
+    shadowOpacity
+  } = style;
+  if (shadowRadius || shadowColor) {
+    const offset = shadowOffset || import_defaultOffset.defaultOffset,
+      width = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(offset.width),
+      height = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(offset.height),
+      radius = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(shadowRadius),
+      color = (0, import_normalizeColor.normalizeColor)(shadowColor, shadowOpacity),
+      shadow = `${width} ${height} ${radius} ${color}`;
+    style.boxShadow = style.boxShadow ? `${style.boxShadow}, ${shadow}` : shadow, delete style.shadowOffset, delete style.shadowRadius, delete style.shadowColor, delete style.shadowOpacity;
+  }
+  const {
+    textShadowColor,
+    textShadowOffset,
+    textShadowRadius
+  } = style;
+  if (textShadowColor || textShadowOffset || textShadowRadius) {
+    const {
+        height,
+        width
+      } = textShadowOffset || import_defaultOffset.defaultOffset,
+      radius = textShadowRadius || 0,
+      color = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(textShadowColor, "textShadowColor");
+    if (color && (height !== 0 || width !== 0 || radius !== 0)) {
+      const blurRadius = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(radius),
+        offsetX = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(width),
+        offsetY = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(height);
+      style.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`;
+    }
+    delete style.textShadowColor, delete style.textShadowOffset, delete style.textShadowRadius;
+  }
+}
+function createDeclarationBlock(style, important = !1) {
+  let next = "";
+  for (const [key, value] of style) next += `${hyphenateStyleName(key)}:${value}${important ? " !important" : ""};`;
+  return `{${next}}`;
+}
+const hcache = {},
+  toHyphenLower = match => `-${match.toLowerCase()}`,
+  hyphenateStyleName = key => {
+    if (key in hcache) return hcache[key];
+    const val = key.replace(/[A-Z]/g, toHyphenLower);
+    return hcache[key] = val, val;
+  },
+  selectorPriority = (() => {
+    const res = {};
+    for (const key in import_pseudoDescriptors.pseudoDescriptors) {
+      const pseudo = import_pseudoDescriptors.pseudoDescriptors[key];
+      res[pseudo.name] = `${[...Array(pseudo.priority)].map(() => ":root").join("")} `;
+    }
+    return res;
+  })();
+function createAtomicRules(identifier, property, value, pseudo) {
+  const pseudoIdPostfix = pseudo ? pseudo.name === "disabled" ? "[aria-disabled]" : `:${pseudo.name}` : "",
+    pseudoSelector = pseudo?.selector;
+  let selector = pseudo ? pseudoSelector ? `${pseudoSelector} .${identifier}` : `${selectorPriority[pseudo.name]} .${identifier}${pseudoIdPostfix}` : `:root .${identifier}`;
+  pseudoSelector === import_pseudoDescriptors.pseudoDescriptors.enterStyle.selector && (selector = `${selector}, .${identifier}${pseudoSelector}`);
+  const important = !!pseudo;
+  let rules = [];
+  switch (property) {
+    // Equivalent to using '::placeholder'
+    case "placeholderTextColor":
+      {
+        const block = createDeclarationBlock([["color", value], ["opacity", 1]], important);
+        rules.push(`${selector}::placeholder${block}`);
+        break;
+      }
+    // all webkit prefixed rules
+    case "backgroundClip":
+    case "userSelect":
+      {
+        const webkitProperty = `Webkit${`${property[0].toUpperCase()}${property.slice(1)}`}`,
+          block = createDeclarationBlock([[property, value], [webkitProperty, value]], important);
+        rules.push(`${selector}${block}`);
+        break;
+      }
+    // Polyfill for additional 'pointer-events' values
+    case "pointerEvents":
+      {
+        let finalValue = value;
+        value === "auto" || value === "box-only" ? (finalValue = "auto", value === "box-only" && rules.push(`${selector}>*${boxOnly}`)) : (value === "none" || value === "box-none") && (finalValue = "none", value === "box-none" && rules.push(`${selector}>*${boxNone}`));
+        const block = createDeclarationBlock([["pointerEvents", finalValue]], !0);
+        rules.push(`${selector}${block}`);
+        break;
+      }
+    default:
+      {
+        const block = createDeclarationBlock([[property, value]], important);
+        rules.push(`${selector}${block}`);
+        break;
+      }
+  }
+  return pseudo?.name === "hover" && (rules = rules.map(r => `@media (hover) {${r}}`)), rules;
+}
+const boxNone = createDeclarationBlock([["pointerEvents", "auto"]], !0),
+  boxOnly = createDeclarationBlock([["pointerEvents", "none"]], !0);

package/dist/cjs/helpers/getStylesAtomic.native.cjs

@@ -0,0 +1,33 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var getStylesAtomic_native_exports = {};
+__export(getStylesAtomic_native_exports, {
+  getStyleAtomic: () => getStyleAtomic,
+  getStylesAtomic: () => getStylesAtomic,
+  styleToCSS: () => styleToCSS
+});
+module.exports = __toCommonJS(getStylesAtomic_native_exports);
+const empty = () => {
+    console.warn("no-op native");
+  },
+  getStylesAtomic = empty,
+  getStyleAtomic = empty,
+  styleToCSS = empty;

package/dist/cjs/helpers/getStylesAtomic.native.cjs.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/getStylesAtomic.native.ts"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAM,QAAQ,MAAM;AAClB,UAAQ,KAAK,cAAc;AAC7B,GAEa,kBAAkB,OAClB,iBAAiB,OACjB,aAAa;",
+  "names": []
+}

package/dist/cjs/helpers/getThemeCSSRules.cjs

@@ -0,0 +1,119 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var getThemeCSSRules_exports = {};
+__export(getThemeCSSRules_exports, {
+  getThemeCSSRules: () => getThemeCSSRules
+});
+module.exports = __toCommonJS(getThemeCSSRules_exports);
+var import_helpers = require("@tamagui/helpers"),
+  import_constants = require("../constants/constants.cjs"),
+  import_createVariable = require("../createVariable.cjs"),
+  import_registerCSSVariable = require("./registerCSSVariable.cjs"),
+  import_config = require("../config.cjs"),
+  import_sortString = require("./sortString.cjs");
+const darkLight = ["dark", "light"],
+  lightDark = ["light", "dark"];
+function getThemeCSSRules(props) {
+  const cssRuleSets = [];
+  if (!process.env.TAMAGUI_DOES_SSR_CSS || process.env.TAMAGUI_DOES_SSR_CSS === "mutates-themes" || process.env.TAMAGUI_DOES_SSR_CSS === "false") {
+    const {
+        config,
+        themeName,
+        theme,
+        names
+      } = props,
+      hasDarkLight = props.hasDarkLight ?? (config.themes && ("light" in config.themes || "dark" in config.themes)),
+      CNP = `.${import_constants.THEME_CLASSNAME_PREFIX}`;
+    let vars = "";
+    for (const themeKey in theme) {
+      const variable = theme[themeKey];
+      let value = null;
+      import_registerCSSVariable.tokensValueToVariable.has(variable.val) ? value = import_registerCSSVariable.tokensValueToVariable.get(variable.val).variable : value = variable.val, vars += `--${process.env.TAMAGUI_CSS_VARIABLE_PREFIX || ""}${(0, import_helpers.simpleHash)(themeKey, 40)}:${value};`;
+    }
+    const isDarkBase = themeName === "dark",
+      isLightBase = themeName === "light",
+      baseSelectors = names.map(name => `${CNP}${name}`),
+      selectorsSet = new Set(isDarkBase || isLightBase ? baseSelectors : []);
+    if (hasDarkLight) {
+      const maxDepth = (0, import_config.getSetting)("maxDarkLightNesting") ?? 3;
+      for (const subName of names) {
+        const isDark = isDarkBase || subName.startsWith("dark_"),
+          isLight = !isDark && (isLightBase || subName.startsWith("light_"));
+        if (!(isDark || isLight)) {
+          selectorsSet.add(`${CNP}${subName}`);
+          continue;
+        }
+        const childSelector = `${CNP}${subName.replace(/^(dark|light)_/, "")}`,
+          order = isDark ? darkLight : lightDark,
+          [stronger, weaker] = order,
+          numSelectors = Math.round(maxDepth * 1.5);
+        for (let depth = 0; depth < numSelectors; depth++) {
+          const isOdd = depth % 2 === 1;
+          if (isOdd && depth < 3) continue;
+          const parents = new Array(depth + 1).fill(0).map((_, idx) => `${CNP}${idx % 2 === 0 ? stronger : weaker}`);
+          let parentSelectors = parents.length > 1 ? parents.slice(1) : parents;
+          if (isOdd) {
+            const [_first, second, ...rest] = parentSelectors;
+            parentSelectors = [second, ...rest, second];
+          }
+          const lastParentSelector = parentSelectors[parentSelectors.length - 1],
+            nextChildSelector = childSelector === lastParentSelector ? "" : childSelector,
+            parentSelectorString = parentSelectors.join(" ");
+          selectorsSet.add(`${parentSelectorString} ${nextChildSelector}`);
+        }
+      }
+    }
+    const selectors = [...selectorsSet].sort(import_sortString.sortString),
+      css = `${selectors.map(x => `:root${isBaseTheme(x) && (0, import_config.getSetting)("themeClassNameOnRoot") ? "" : " "}${x}`).join(", ")} {${vars}}`;
+    if (cssRuleSets.push(css), (0, import_config.getSetting)("shouldAddPrefersColorThemes")) {
+      const bgString = theme.background ? `background:${(0, import_createVariable.variableToString)(theme.background)};` : "",
+        fgString = theme.color ? `color:${(0, import_createVariable.variableToString)(theme.color)}` : "",
+        bodyRules = `body{${bgString}${fgString}}`,
+        isDark = themeName.startsWith("dark"),
+        baseName = isDark ? "dark" : "light",
+        themeRules = `${selectors.map(x => {
+          if (x == darkSelector || x === lightSelector) return ":root";
+          if (!(isDark && x.startsWith(lightSelector) || !isDark && x.startsWith(darkSelector))) return x.replace(/^\.t_(dark|light) /, "").trim();
+        }).filter(Boolean).join(", ")} {${vars}}`,
+        prefersMediaSelectors = `@media(prefers-color-scheme:${baseName}){
+    ${bodyRules}
+    ${themeRules}
+  }`;
+      cssRuleSets.push(prefersMediaSelectors);
+    }
+    const selectionStyles = (0, import_config.getSetting)("selectionStyles");
+    if (selectionStyles) {
+      const rules = selectionStyles(theme);
+      if (rules) {
+        const selectionSelectors = baseSelectors.map(s => `${s} ::selection`).join(", "),
+          styles = Object.entries(rules).flatMap(([k, v]) => v ? `${k === "backgroundColor" ? "background" : k}:${(0, import_createVariable.variableToString)(v)}` : []).join(";");
+        if (styles) {
+          const css2 = `${selectionSelectors}{${styles}}`;
+          cssRuleSets.push(css2);
+        }
+      }
+    }
+  }
+  return cssRuleSets;
+}
+const darkSelector = ".t_dark",
+  lightSelector = ".t_light",
+  isBaseTheme = x => x === darkSelector || x === lightSelector || x.startsWith(".t_dark ") || x.startsWith(".t_light ");

package/dist/cjs/helpers/getThemeCSSRules.native.cjs

@@ -0,0 +1,28 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var getThemeCSSRules_native_exports = {};
+__export(getThemeCSSRules_native_exports, {
+  getThemeCSSRules: () => getThemeCSSRules
+});
+module.exports = __toCommonJS(getThemeCSSRules_native_exports);
+function getThemeCSSRules() {
+  return [];
+}

package/dist/cjs/helpers/getThemeCSSRules.native.cjs.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/getThemeCSSRules.native.ts"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,SAAS,mBAAmB;AACjC,SAAO,CAAC;AACV;",
+  "names": []
+}

package/dist/cjs/helpers/getVariantExtras.cjs

@@ -0,0 +1,65 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var getVariantExtras_exports = {};
+__export(getVariantExtras_exports, {
+  getFontsForLanguage: () => getFontsForLanguage,
+  getVariantExtras: () => getVariantExtras
+});
+module.exports = __toCommonJS(getVariantExtras_exports);
+var import_createVariable = require("../createVariable.cjs");
+const cache = /* @__PURE__ */new WeakMap(),
+  getVariantExtras = styleState => {
+    if (cache.has(styleState)) return cache.get(styleState);
+    const {
+      props,
+      conf,
+      context,
+      theme
+    } = styleState;
+    let fonts = conf.fontsParsed;
+    context?.language && (fonts = getFontsForLanguage(conf.fontsParsed, context.language));
+    const next = {
+      fonts,
+      tokens: conf.tokensParsed,
+      theme,
+      get fontFamily() {
+        return (0, import_createVariable.getVariableValue)(styleState.fontFamily || styleState.props.fontFamily) || props.fontFamily || (0, import_createVariable.getVariableValue)(styleState.conf.defaultFont);
+      },
+      get font() {
+        return fonts[this.fontFamily] || (!props.fontFamily || props.fontFamily[0] === "$" ? fonts[styleState.conf.defaultFont] : void 0);
+      },
+      props
+    };
+    return cache.set(styleState, next), next;
+  },
+  fontLanguageCache = /* @__PURE__ */new WeakMap();
+function getFontsForLanguage(fonts, language) {
+  if (fontLanguageCache.has(language)) return fontLanguageCache.get(language);
+  const next = {
+    ...fonts,
+    ...Object.fromEntries(Object.entries(language).map(([name, lang]) => {
+      if (lang === "default") return [];
+      const langKey = `$${name}_${lang}`;
+      return [`$${name}`, fonts[langKey]];
+    }))
+  };
+  return fontLanguageCache.set(language, next), next;
+}