@tamagui/core 1.0.0-alpha.7 → 1.0.0-beta.0

package/dist/jsx/createTamagui.js

@@ -0,0 +1,201 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { configListeners, getHasConfigured, setConfig } from "./conf";
+import { THEME_CLASSNAME_PREFIX } from "./constants/constants";
+import { isWeb } from "./constants/platform";
+import { Variable, createCSSVariable, createVariable, isVariable } from "./createVariable";
+import { createTamaguiProvider } from "./helpers/createTamaguiProvider";
+import { getInsertedRules } from "./helpers/insertStyleRule";
+import { configureMedia } from "./hooks/useMedia";
+const createdConfigs = /* @__PURE__ */ new WeakMap();
+function createTamagui(config) {
+  if (createdConfigs.has(config)) {
+    return config;
+  }
+  if (process.env.NODE_ENV === "development") {
+    if (!config.tokens) {
+      throw new Error(`No tokens provided to Tamagui config`);
+    }
+    if (!config.themes) {
+      throw new Error(`No themes provided to Tamagui config`);
+    }
+  }
+  if (getHasConfigured()) {
+    console.warn("Called createTamagui twice! Should never do so");
+  }
+  configureMedia({
+    queries: config.media,
+    defaultActive: config.mediaQueryDefaultActive
+  });
+  const themeConfig = (() => {
+    var _a, _b, _c;
+    let cssRules = [];
+    const varsByValue = /* @__PURE__ */ new Map();
+    if (isWeb) {
+      const tokenRules = /* @__PURE__ */ new Set();
+      const addVar = /* @__PURE__ */ __name((v) => {
+        varsByValue[v.val] = v;
+        const rule = `--${createCSSVariable(v.name, false)}:${typeof v.val === "number" ? `${v.val}px` : v.val}`;
+        tokenRules.add(rule);
+      }, "addVar");
+      for (const key in config.tokens) {
+        for (const skey in config.tokens[key]) {
+          const val = config.tokens[key][skey];
+          if (key === "font") {
+            for (const fkey in val) {
+              if (fkey === "family") {
+                addVar(val[fkey]);
+              } else {
+                for (const fskey in val[fkey]) {
+                  addVar(val[fkey][fskey]);
+                }
+              }
+            }
+          } else {
+            addVar(val);
+          }
+        }
+      }
+      const sep = process.env.NODE_ENV === "development" ? config.cssStyleSeparator || " " : "";
+      cssRules.push(`:root {${sep}${[...tokenRules].join(`;${sep}`)}${sep}}`);
+    }
+    const hasDarkLight = "light" in config.themes && "dark" in config.themes;
+    const CNP = `.${THEME_CLASSNAME_PREFIX}`;
+    for (const themeName in config.themes) {
+      const theme = { ...config.themes[themeName] };
+      config.themes[themeName] = theme;
+      let vars = "";
+      for (const themeKey in theme) {
+        if (isWeb) {
+          const val = theme[themeKey];
+          const varName = val instanceof Variable ? val.name : (_a = varsByValue[val]) == null ? void 0 : _a.name;
+          vars += `--${themeKey}:${varName ? createCSSVariable(varName) : `${val}`};`;
+        }
+        ensureThemeVariable(theme, themeKey);
+      }
+      if (isWeb) {
+        const isDarkOrLightBase = themeName === "dark" || themeName === "light";
+        const isDark = themeName.startsWith("dark");
+        const selector = `${CNP}${themeName}`;
+        const selectors = [selector];
+        if (hasDarkLight) {
+          const childSelector = `${CNP}${themeName.replace("dark_", "").replace("light_", "")}`;
+          const order = isDark ? ["dark", "light"] : ["light", "dark"];
+          if (isDarkOrLightBase) {
+            order.reverse();
+          }
+          const [stronger, weaker] = order;
+          const max = (_b = config.maxDarkLightNesting) != null ? _b : 3;
+          new Array(max * 2).fill(void 0).forEach((_, pi) => {
+            if (pi % 2 === 1)
+              return;
+            const parents = new Array(pi + 1).fill(void 0).map((_2, psi) => {
+              return `${CNP}${psi % 2 === 0 ? stronger : weaker}`;
+            });
+            selectors.push(`${(parents.length > 1 ? parents.slice(1) : parents).join(" ")} ${childSelector}`);
+          });
+        }
+        const rootSep = config.themeClassNameOnRoot ? "" : " ";
+        cssRules.push(`${selectors.map((x) => `:root${rootSep}${x}`).join(", ")} {${vars}}`);
+        if ((_c = config.shouldAddPrefersColorThemes) != null ? _c : true) {
+          if (isDarkOrLightBase) {
+            cssRules.push(`@media(prefers-color-scheme: ${isDark ? "dark" : "light"}) {
+    body { background:${theme.background}; color: ${theme.color} }
+    :root {${vars} } 
+  }`);
+          }
+        }
+      }
+    }
+    varsByValue.clear();
+    Object.freeze(cssRules);
+    const css = cssRules.join("\n");
+    return {
+      cssRules,
+      css
+    };
+  })();
+  const tokensParsed = parseTokens(config.tokens);
+  const fontsParsed = (() => {
+    if (!config.fonts) {
+      throw new Error(`No fonts defined!`);
+    }
+    const res = {};
+    for (const familyName in config.fonts) {
+      const family = config.fonts[familyName];
+      const parsed = {};
+      for (const attrKey in family) {
+        const attr = family[attrKey];
+        if (attrKey === "family") {
+          parsed[attrKey] = attr;
+          continue;
+        }
+        parsed[attrKey] = Object.keys(attr).reduce((acc, cur) => {
+          acc[`$${cur}`] = attr[cur];
+          return acc;
+        }, {});
+      }
+      res[`$${familyName}`] = parsed;
+    }
+    return res;
+  })();
+  const getCSS = /* @__PURE__ */ __name(() => {
+    return `${themeConfig.css}
+${getInsertedRules().join("\n")}`;
+  }, "getCSS");
+  const next = {
+    fonts: {},
+    animations: {},
+    shorthands: {},
+    media: {},
+    ...config,
+    Provider: createTamaguiProvider({
+      getCSS,
+      defaultTheme: "light",
+      ...config
+    }),
+    fontsParsed,
+    themeConfig,
+    tokensParsed,
+    parsed: true,
+    getCSS
+  };
+  setConfig(next);
+  if (configListeners.size) {
+    configListeners.forEach((cb) => cb(next));
+    configListeners.clear();
+  }
+  createdConfigs.set(next, true);
+  return next;
+}
+__name(createTamagui, "createTamagui");
+const parseTokens = /* @__PURE__ */ __name((tokens) => {
+  const res = {};
+  for (const key in tokens) {
+    res[key] = {};
+    for (const skey in tokens[key]) {
+      res[key][`$${skey}`] = tokens[key][skey];
+    }
+  }
+  return res;
+}, "parseTokens");
+function ensureThemeVariable(theme, key) {
+  const val = theme[key];
+  if (!isVariable(val)) {
+    theme[key] = createVariable({
+      name: key,
+      val
+    });
+  } else {
+    if (val.name !== key) {
+      theme[key] = createVariable({
+        name: key,
+        val: val.val
+      });
+    }
+  }
+}
+__name(ensureThemeVariable, "ensureThemeVariable");
+export {
+  createTamagui
+};

package/dist/jsx/createTheme.js

@@ -0,0 +1,6 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const createTheme = /* @__PURE__ */ __name((theme) => theme, "createTheme");
+export {
+  createTheme
+};

package/dist/jsx/createTokens.js

@@ -0,0 +1,28 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createVariable } from "./createVariable";
+import { validateTokens } from "./helpers/validate";
+function createTokens(tokens) {
+  if (process.env.NODE_ENV === "development") {
+    validateTokens(tokens);
+  }
+  return mapTokensToVariables(tokens);
+}
+__name(createTokens, "createTokens");
+const mapTokensToVariables = /* @__PURE__ */ __name((tokens, parentPath = "") => {
+  const res = {};
+  for (const key in tokens) {
+    let val = tokens[key];
+    const name = parentPath ? `${parentPath}-${key}` : key;
+    if (val && typeof val === "object") {
+      res[key] = mapTokensToVariables(tokens[key], name);
+    } else {
+      res[key] = createVariable({ val, name });
+    }
+  }
+  return res;
+}, "mapTokensToVariables");
+export {
+  createTokens,
+  mapTokensToVariables
+};

package/dist/jsx/createVariable.js

@@ -0,0 +1,48 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var _a;
+import { isWeb } from "./constants/platform";
+const IS_VARIABLE_SYMBOL = "__isVariable__";
+class Variable {
+  constructor({ val, name }) {
+    this[_a] = true;
+    this.val = isVariable(val) ? val.val : val;
+    this.name = name;
+    this.variable = isWeb ? createCSSVariable(name) : this.val;
+  }
+  toString() {
+    return `${isWeb ? this.variable : this.val}`;
+  }
+}
+__name(Variable, "Variable");
+_a = IS_VARIABLE_SYMBOL;
+const createVariable = /* @__PURE__ */ __name((props) => new Variable(props), "createVariable");
+function isVariable(v) {
+  return v instanceof Variable || v && v[IS_VARIABLE_SYMBOL];
+}
+__name(isVariable, "isVariable");
+function getVariableValue(v) {
+  if (isVariable(v))
+    return v.val;
+  return v;
+}
+__name(getVariableValue, "getVariableValue");
+function getVariableName(v) {
+  if (isVariable(v))
+    return v.name;
+  return v;
+}
+__name(getVariableName, "getVariableName");
+const createCSSVariable = /* @__PURE__ */ __name((val, includeVar = true) => {
+  const name = val.replace(/[^a-z0-9\_\-]+/i, "_");
+  return includeVar ? `var(--${name})` : name;
+}, "createCSSVariable");
+export {
+  IS_VARIABLE_SYMBOL,
+  Variable,
+  createCSSVariable,
+  createVariable,
+  getVariableName,
+  getVariableValue,
+  isVariable
+};

package/dist/jsx/helpers/RNComponents.js

@@ -0,0 +1,11 @@
+import * as ReactNative from "react-native";
+const RNComponents = /* @__PURE__ */ new WeakMap();
+for (const key of ["Image", "TextInput", "Text", "View"]) {
+  const val = ReactNative[key];
+  if (val && typeof val === "object") {
+    RNComponents.set(val, true);
+  }
+}
+export {
+  RNComponents
+};

package/dist/jsx/helpers/addStylesUsingClassname.js

@@ -0,0 +1,63 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useInsertionEffect } from "react";
+import { getStylesAtomic } from "./getStylesAtomic";
+import { insertStyleRule, updateInsertedCache } from "./insertStyleRule";
+let added = /* @__PURE__ */ new Set();
+function useStylesAsClassname(styles, disable = false, debug = false) {
+  if (!useInsertionEffect) {
+    return addStylesUsingClassname(disable ? styles : [], debug);
+  } else {
+    const insertions = [];
+    const className = addStylesUsingClassname(disable ? [] : styles, debug, (identifier, rules) => {
+      for (const rule of rules) {
+        insertions.push({ identifier, rule });
+      }
+    });
+    for (const { identifier, rule } of insertions) {
+      updateInsertedCache(identifier, rule);
+    }
+    useInsertionEffect(() => {
+      for (const { identifier, rule } of insertions) {
+        insertStyleRule(identifier, rule);
+      }
+    });
+    return className;
+  }
+}
+__name(useStylesAsClassname, "useStylesAsClassname");
+function addStylesUsingClassname(styles, debug = false, onAdd) {
+  let className = "";
+  for (const style of styles) {
+    if (!style)
+      continue;
+    if (Array.isArray(style)) {
+      className += " " + addStylesUsingClassname(style);
+      continue;
+    }
+    const atomicStyles = getStylesAtomic(style);
+    if (process.env.NODE_ENV === "development") {
+      if (debug === "verbose") {
+        console.log(" atomicStyles ", atomicStyles);
+      }
+    }
+    for (const { identifier, rules } of atomicStyles) {
+      className += ` ${identifier}`;
+      if (added.has(identifier)) {
+        continue;
+      }
+      added.add(identifier);
+      if (onAdd) {
+        onAdd(identifier, rules);
+      } else {
+        insertStyleRule(identifier, rules[0]);
+      }
+    }
+  }
+  return className;
+}
+__name(addStylesUsingClassname, "addStylesUsingClassname");
+export {
+  addStylesUsingClassname,
+  useStylesAsClassname
+};

package/dist/jsx/helpers/areEqualSets.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const areEqualSets = /* @__PURE__ */ __name((a, b) => {
+  if (a.size !== b.size)
+    return false;
+  for (const val in a) {
+    if (!b.has(val)) {
+      return false;
+    }
+  }
+  return true;
+}, "areEqualSets");
+export {
+  areEqualSets
+};

package/dist/jsx/helpers/createMediaStyle.js

@@ -0,0 +1,30 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { mediaObjectToString } from "../hooks/useMedia";
+const MEDIA_SEP = "_";
+const createMediaStyle = /* @__PURE__ */ __name(({ identifier, rules }, mediaKey, mediaQueries, negate, importance) => {
+  const mediaKeys = Object.keys(mediaQueries);
+  const importance_ = Math.max(0, importance == void 0 ? mediaKeys.indexOf(mediaKey) : importance || 0);
+  const precendencePrefix = new Array(importance_ + 1).fill(":root").join("");
+  const negKey = negate ? "0" : "";
+  const ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1);
+  const nextIdentifier = `${identifier.replace(ogPrefix, `${ogPrefix}${MEDIA_SEP}${mediaKey}${negKey}${MEDIA_SEP}`)}`;
+  const screenStr = negate ? "not all" : "screen";
+  const mediaSelector = mediaObjectToString(mediaQueries[mediaKey]);
+  const mediaQuery = `${screenStr} and ${mediaSelector}`;
+  const styleInner = rules[0].replace(identifier, nextIdentifier);
+  let styleRule = "";
+  if (styleInner.includes("@media")) {
+    styleRule = styleInner.replace("{", ` and ${mediaQuery} {`);
+  } else {
+    styleRule = `@media ${mediaQuery} { ${precendencePrefix} ${styleInner} }`;
+  }
+  return {
+    styleRule,
+    identifier: nextIdentifier
+  };
+}, "createMediaStyle");
+export {
+  MEDIA_SEP,
+  createMediaStyle
+};

package/dist/jsx/helpers/createPropMapper.js

@@ -0,0 +1,205 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { getConfig } from "../conf";
+import { isWeb } from "../constants/platform";
+import { isVariable } from "../createVariable";
+import { isObj } from "./isObj";
+function getVariantFunction(variant, key, value) {
+  if (typeof variant === "function") {
+    return variant;
+  }
+  for (const cat in tokenCategories) {
+    if (key in tokenCategories[cat]) {
+      const spreadVariant = variant[`...${cat}`];
+      if (spreadVariant) {
+        return spreadVariant;
+      }
+    }
+  }
+  let fn;
+  if (typeof value === "number") {
+    fn = variant[":number"];
+  } else if (typeof value === "string") {
+    fn = variant[":string"];
+  } else if (value === true || value === false) {
+    fn = variant[":boolean"];
+  }
+  fn = fn || variant[value];
+  return fn || variant["..."] || variant["...size"];
+}
+__name(getVariantFunction, "getVariantFunction");
+const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
+  const variants = staticConfig.variants || {};
+  const defaultProps = staticConfig.defaultProps || {};
+  return (key, value, theme, props, returnVariablesAs = !!props.animation ? "value" : "auto", avoidDefaultProps = false) => {
+    const conf = getConfig();
+    if (!conf) {
+      console.trace("no conf! err");
+      return;
+    }
+    const fontFamily = props.fontFamily || defaultProps.fontFamily || "$body";
+    const variant = variants && variants[key];
+    if (variant && value !== void 0) {
+      let variantValue = getVariantFunction(variant, key, value);
+      if (variantValue) {
+        if (typeof variantValue === "function") {
+          const fn = variantValue;
+          variantValue = fn(value, {
+            fonts: conf.fontsParsed,
+            tokens: conf.tokensParsed,
+            theme,
+            props: avoidDefaultProps ? props : new Proxy(props, {
+              get(target, key2) {
+                if (Reflect.has(target, key2)) {
+                  return Reflect.get(target, key2);
+                }
+                if (defaultProps) {
+                  return Reflect.get(defaultProps, key2);
+                }
+              }
+            })
+          });
+        }
+        if (isObj(variantValue)) {
+          variantValue = resolveTokens(variantValue, conf, theme, fontFamily, returnVariablesAs);
+        }
+        return variantValue;
+      }
+    }
+    let shouldReturn = false;
+    if (conf.shorthands[key]) {
+      shouldReturn = true;
+      key = conf.shorthands[key];
+    }
+    if (value) {
+      shouldReturn = true;
+      if (value[0] === "$") {
+        value = getToken(key, value, conf, theme, fontFamily, returnVariablesAs);
+      } else if (isVariable(value)) {
+        value = getVariableValue(value, returnVariablesAs);
+      }
+    }
+    if (shouldReturn) {
+      return {
+        [key]: value
+      };
+    }
+  };
+}, "createPropMapper");
+const resolveTokens = /* @__PURE__ */ __name((input, conf, theme, fontFamily, resolveAs) => {
+  var _a;
+  let res = {};
+  for (const rKey in input) {
+    const fKey = conf.shorthands[rKey] || rKey;
+    const val = input[rKey];
+    if (isVariable(val)) {
+      res[fKey] = resolveAs === "variable" ? val : !isWeb || resolveAs === "value" ? val.val : val.variable;
+    } else if (typeof val === "string") {
+      const fVal = val[0] === "$" ? getToken(fKey, val, conf, theme, fontFamily, resolveAs) : val;
+      res[fKey] = fVal;
+    } else {
+      if (isObj(val)) {
+        res[fKey] = resolveTokens(val, conf, theme, fontFamily, resolveAs);
+      } else {
+        res[fKey] = input[fKey];
+      }
+    }
+    if (process.env.NODE_ENV === "development") {
+      if (((_a = res[fKey]) == null ? void 0 : _a[0]) === "$") {
+        console.warn(`\u26A0\uFE0F Missing token in theme ${theme.name}:`, fKey, res[fKey]);
+      }
+    }
+  }
+  return res;
+}, "resolveTokens");
+const fontShorthand = {
+  fontSize: "size",
+  fontWeight: "weight"
+};
+const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed, fontsParsed }, theme, fontFamily = "$body", resolveAs) => {
+  var _a, _b, _c;
+  let valOrVar;
+  let hasSet = false;
+  if (value in theme) {
+    valOrVar = theme[value];
+    hasSet = true;
+  } else {
+    switch (key) {
+      case "fontFamily":
+        valOrVar = ((_a = fontsParsed[value]) == null ? void 0 : _a.family) || value;
+        hasSet = true;
+        break;
+      case "fontSize":
+      case "lineHeight":
+      case "letterSpacing":
+      case "fontWeight":
+        valOrVar = ((_c = (_b = fontsParsed[fontFamily]) == null ? void 0 : _b[fontShorthand[key] || key]) == null ? void 0 : _c[value]) || value;
+        hasSet = true;
+        break;
+    }
+    for (const cat in tokenCategories) {
+      if (key in tokenCategories[cat]) {
+        const res = tokensParsed[cat][value];
+        if (res) {
+          valOrVar = res;
+          hasSet = true;
+        }
+      }
+    }
+    if (!hasSet) {
+      const spaceVar = tokensParsed.space[value];
+      if (spaceVar) {
+        valOrVar = spaceVar;
+        hasSet = true;
+      }
+    }
+  }
+  if (hasSet) {
+    return getVariableValue(valOrVar, resolveAs);
+  }
+  if (process.env.NODE_ENV === "development") {
+    if (value && value[0] === "$") {
+      console.warn(`\u26A0\uFE0F Missing token:`, key, value, fontFamily, theme, fontsParsed);
+      return null;
+    }
+  }
+  return value;
+}, "getToken");
+function getVariableValue(valOrVar, resolveAs = "auto") {
+  if (isVariable(valOrVar)) {
+    if (resolveAs === "variable") {
+      return valOrVar;
+    }
+    if (!isWeb || resolveAs === "value") {
+      return valOrVar.val;
+    }
+    return valOrVar.variable;
+  }
+  return valOrVar;
+}
+__name(getVariableValue, "getVariableValue");
+const tokenCategories = {
+  radius: {
+    borderRadius: true
+  },
+  size: {
+    width: true,
+    height: true,
+    minWidth: true,
+    minHeight: true,
+    maxWidth: true,
+    maxHeight: true
+  },
+  color: {
+    color: true,
+    backgroundColor: true,
+    borderColor: true,
+    borderBottomColor: true,
+    borderTopColor: true,
+    borderLeftColor: true,
+    borderRightColor: true
+  }
+};
+export {
+  createPropMapper
+};

package/dist/jsx/helpers/createShallowUpdate.js

@@ -0,0 +1,18 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function createShallowUpdate(setter) {
+  return (next) => {
+    setter((prev) => {
+      for (const key in next) {
+        if (prev[key] !== next[key]) {
+          return { ...prev, ...next };
+        }
+      }
+      return prev;
+    });
+  };
+}
+__name(createShallowUpdate, "createShallowUpdate");
+export {
+  createShallowUpdate
+};

package/dist/jsx/helpers/createTamaguiProvider.js

@@ -0,0 +1,34 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import * as React from "react";
+import { ButtonInsideButtonContext } from "../contexts/ButtonInsideButtonContext";
+import { TextAncestorProvider } from "../views/TextAncestorContext";
+import { ThemeProvider } from "../views/ThemeProvider";
+function createTamaguiProvider({
+  getCSS,
+  ...themeProps
+}) {
+  return /* @__PURE__ */ __name(function TamaguiProvider({
+    injectCSS,
+    children,
+    ...themePropsProvider
+  }) {
+    if (typeof document !== "undefined") {
+      React.useLayoutEffect(() => {
+        if (!injectCSS)
+          return;
+        const style = document.createElement("style");
+        style.appendChild(document.createTextNode(getCSS()));
+        document.head.appendChild(style);
+        return () => {
+          document.head.removeChild(style);
+        };
+      }, []);
+    }
+    return <ButtonInsideButtonContext.Provider value={false}><TextAncestorProvider><ThemeProvider {...themeProps} {...themePropsProvider}>{children}</ThemeProvider></TextAncestorProvider></ButtonInsideButtonContext.Provider>;
+  }, "TamaguiProvider");
+}
+__name(createTamaguiProvider, "createTamaguiProvider");
+export {
+  createTamaguiProvider
+};