@tamagui/core 1.0.0-alpha.11 → 1.0.0-alpha.12

package/dist/jsx/createTamagui.js

@@ -0,0 +1,167 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { getStyleRules } from "@tamagui/helpers";
+import { Variable, createVariable, isVariable } from "./createVariable";
+import { createTamaguiProvider } from "./helpers/createTamaguiProvider";
+import { validateConfig } from "./helpers/validate";
+import { configureMedia } from "./hooks/useMedia";
+let conf;
+const getHasConfigured = /* @__PURE__ */ __name(() => !!conf, "getHasConfigured");
+const getTamagui = /* @__PURE__ */ __name(() => conf, "getTamagui");
+const getTokens = /* @__PURE__ */ __name(() => conf.tokensParsed, "getTokens");
+const configListeners = new Set();
+const onConfiguredOnce = /* @__PURE__ */ __name((cb) => {
+  if (conf) {
+    cb(conf);
+  } else {
+    configListeners.add(cb);
+  }
+}, "onConfiguredOnce");
+const PREFIX = `theme--`;
+function createTamagui(config) {
+  if (process.env.NODE_ENV === "development") {
+    if (!config["parsed"]) {
+      validateConfig(config);
+    }
+  }
+  if (conf) {
+    console.warn("Called createTamagui twice! Should never do so");
+  }
+  configureMedia({
+    queries: config.media,
+    defaultActive: config.mediaQueryDefaultActive
+  });
+  const themeConfig = (() => {
+    let cssRules = [];
+    let tokenRule = `:root {`;
+    const varsByValue = new Map();
+    const addVar = /* @__PURE__ */ __name((v) => {
+      varsByValue[v.val] = v;
+      const rule = `--${v.name}:${typeof v.val === "number" ? `${v.val}px` : v.val};`;
+      tokenRule += 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);
+        }
+      }
+    }
+    cssRules.push(`${tokenRule}
+}`);
+    for (const themeName in config.themes) {
+      config.themes[themeName] = { ...config.themes[themeName] };
+      const theme = config.themes[themeName];
+      let vars = "";
+      for (const themeKey in theme) {
+        const val = theme[themeKey];
+        const getVariableCSS = /* @__PURE__ */ __name((inv) => {
+          const v = varsByValue[inv] ?? inv;
+          return isVariable(v) ? `--${themeKey}:var(--${v.name});` : `--${themeKey}:${v};`;
+        }, "getVariableCSS");
+        vars += getVariableCSS(val);
+        if (!isVariable(val)) {
+          theme[themeKey] = createVariable({
+            name: themeKey,
+            val
+          });
+        }
+      }
+      const [themeClassName, parentName] = themeName.includes("-") ? themeName.split("-") : [themeName, ""];
+      const oppositeName = parentName === "dark" ? "light" : "dark";
+      const cssParentSel = parentName ? `.${PREFIX}${parentName}` : "";
+      const cssChildSel = `.${PREFIX}${themeClassName}`;
+      const cssSel = `${cssParentSel} ${cssChildSel}`;
+      const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} {
+${vars}
+}`;
+      cssRules.push(cssRule);
+    }
+    Object.freeze(cssRules);
+    return {
+      cssRules,
+      css: cssRules.join("\n")
+    };
+  })();
+  const tokensParsed = parseTokens(config.tokens);
+  const themeParsed = {};
+  const firstKey = Object.keys(config.themes)[0];
+  for (const key in config.themes[firstKey]) {
+    const val = config.themes[firstKey][key].val;
+    themeParsed[`$${key}`] = new Variable({ val, name: key });
+  }
+  const next = {
+    shorthands: {},
+    ...config,
+    Provider: createTamaguiProvider({
+      defaultTheme: "light",
+      ...config
+    }),
+    themeConfig,
+    themeParsed,
+    tokensParsed,
+    parsed: true,
+    getCSS() {
+      return `${themeConfig.css}
+${[...getStyleRules()].join("\n")}`;
+    }
+  };
+  conf = next;
+  if (configListeners.size) {
+    configListeners.forEach((cb) => cb(next));
+    configListeners.clear();
+  }
+  return next;
+}
+__name(createTamagui, "createTamagui");
+function getThemeParentClassName(themeName) {
+  return `theme-parent ${themeName ? `${PREFIX}${themeName}` : ""}`;
+}
+__name(getThemeParentClassName, "getThemeParentClassName");
+const parseTokens = /* @__PURE__ */ __name((tokens) => {
+  const res = {};
+  for (const key in tokens) {
+    res[key] = {};
+    if (key === "font") {
+      for (const family in tokens.font) {
+        const obj = {};
+        res.font[`$${family}`] = obj;
+        for (const attrKey in tokens.font[family]) {
+          const attr = tokens.font[family][attrKey];
+          if (attrKey === "family") {
+            obj[attrKey] = attr;
+            continue;
+          }
+          obj[attrKey] = Object.keys(attr).reduce((acc, cur) => {
+            acc[`$${cur}`] = attr[cur];
+            return acc;
+          }, {});
+        }
+      }
+      continue;
+    }
+    for (const skey in tokens[key]) {
+      res[key][`$${skey}`] = tokens[key][skey];
+    }
+  }
+  return res;
+}, "parseTokens");
+export {
+  createTamagui,
+  getHasConfigured,
+  getTamagui,
+  getThemeParentClassName,
+  getTokens,
+  onConfiguredOnce
+};

package/dist/jsx/createTheme.js

@@ -0,0 +1,19 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { Variable, createVariable } from "./createVariable";
+const createTheme = /* @__PURE__ */ __name((theme) => {
+  const res = {};
+  for (const key in theme) {
+    const val = theme[key];
+    if (!(val instanceof Variable)) {
+      res[key] = createVariable({
+        name: key,
+        val
+      });
+    }
+  }
+  return res;
+}, "createTheme");
+export {
+  createTheme
+};

package/dist/jsx/createTokens.js

@@ -0,0 +1,32 @@
+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 setupTokens(tokens);
+}
+__name(createTokens, "createTokens");
+function setupTokens(tokens) {
+  return mapTokensToVariables(tokens);
+}
+__name(setupTokens, "setupTokens");
+const mapTokensToVariables = /* @__PURE__ */ __name((tokens, parentPath = "") => {
+  const res = {};
+  for (const key in tokens) {
+    const 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,24 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { isWeb } from "./constants/platform";
+class Variable {
+  constructor({ val, name }) {
+    this.val = val;
+    this.name = name;
+    this.variable = isWeb ? `var(--${name})` : this.val;
+  }
+  toString() {
+    return isWeb ? this.variable : this.val;
+  }
+}
+__name(Variable, "Variable");
+const createVariable = /* @__PURE__ */ __name((props) => new Variable(props), "createVariable");
+function isVariable(v) {
+  return v instanceof Variable;
+}
+__name(isVariable, "isVariable");
+export {
+  Variable,
+  createVariable,
+  isVariable
+};

package/dist/jsx/helpers/addStylesUsingClassname.js

@@ -0,0 +1,56 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useInsertionEffect } from "react";
+import { getStylesAtomic } from "./getStylesAtomic";
+import { insertStyleRule } from "./insertStyleRule";
+let added = new Set();
+function useStylesAsClassname(styles) {
+  if (!useInsertionEffect) {
+    return addStylesUsingClassname(styles);
+  } else {
+    const insertions = [];
+    const className = addStylesUsingClassname(styles, (_, rules) => {
+      for (const rule of rules) {
+        insertions.push(rule);
+      }
+    });
+    useInsertionEffect(() => {
+      for (const ruleset of insertions) {
+        insertStyleRule(ruleset);
+      }
+    });
+    return className;
+  }
+}
+__name(useStylesAsClassname, "useStylesAsClassname");
+function addStylesUsingClassname(styles, onAdd) {
+  let className = "";
+  for (const style of styles) {
+    if (!style)
+      continue;
+    if (Array.isArray(style)) {
+      className += " " + addStylesUsingClassname(style);
+      continue;
+    }
+    for (const { identifier, rules } of getStylesAtomic(style)) {
+      className += ` ${identifier}`;
+      if (added.has(identifier)) {
+        continue;
+      }
+      added.add(identifier);
+      if (onAdd) {
+        onAdd(identifier, rules);
+      } else {
+        for (const rule of rules) {
+          insertStyleRule(rule);
+        }
+      }
+    }
+  }
+  return className;
+}
+__name(addStylesUsingClassname, "addStylesUsingClassname");
+export {
+  addStylesUsingClassname,
+  useStylesAsClassname
+};

package/dist/jsx/helpers/createMediaStyle.js

@@ -0,0 +1,33 @@
+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 = 0) => {
+  const mediaKeys = Object.keys(mediaQueries);
+  const mediaKeyPrecendence = mediaKeys.reduce((acc, cur, i) => {
+    acc[cur] = new Array(importance + 1).fill(":root").join("");
+    return acc;
+  }, {});
+  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 precendencePrefix = mediaKeyPrecendence[mediaKey];
+  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,159 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { isWeb } from "../constants/platform";
+import { getTamagui } from "../createTamagui";
+import { Variable } from "../createVariable";
+import { isObj } from "./isObj";
+const createPropMapper = /* @__PURE__ */ __name((c) => {
+  const variants = c.variants;
+  let variantsParsed;
+  const defaultProps = c.defaultProps || {};
+  return (key, value, theme, props) => {
+    const conf = getTamagui();
+    if (!conf) {
+      console.trace("no conf! err");
+      return;
+    }
+    if (variants && !variantsParsed) {
+      variantsParsed = parseVariants(variants, conf);
+    }
+    let fontFamily = props.fontFamily || defaultProps.fontFamily || "$body";
+    const variant = variantsParsed?.[key];
+    if (variant && typeof value !== "undefined") {
+      const val = value === true ? variant["$true"] || variant["true"] : variant[value] ?? variant["..."] ?? value;
+      const res = typeof val === "function" ? val(value, { tokens: conf.tokensParsed, theme, props }) : isObj(val) ? { ...val } : val;
+      if (isObj(res)) {
+        resolveTokens(res, conf, theme, fontFamily);
+      }
+      return res;
+    }
+    let shouldReturn = false;
+    if (conf.shorthands[key]) {
+      shouldReturn = true;
+      key = conf.shorthands[key];
+    }
+    if (value && value[0] === "$") {
+      shouldReturn = true;
+      value = getToken(key, value, conf, theme, fontFamily);
+    }
+    if (value instanceof Variable) {
+      shouldReturn = true;
+      value = value.variable;
+    }
+    if (shouldReturn) {
+      return {
+        [key]: value
+      };
+    }
+  };
+}, "createPropMapper");
+const resolveTokens = /* @__PURE__ */ __name((res, conf, theme, fontFamily) => {
+  for (const rKey in res) {
+    const fKey = conf.shorthands[rKey] || rKey;
+    const val = res[rKey];
+    if (val instanceof Variable) {
+      res[fKey] = val.variable;
+    } else if (typeof val === "string") {
+      const fVal = val[0] === "$" ? getToken(fKey, val, conf, theme, fontFamily) : val;
+      res[fKey] = fVal;
+    } else {
+      if (isObj(val)) {
+        resolveTokens(val, conf, theme, fontFamily);
+      }
+    }
+  }
+}, "resolveTokens");
+const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed, themeParsed }, theme, fontFamily = "$body") => {
+  if (themeParsed[value]) {
+    if (isWeb && themeParsed[value].variable) {
+      return themeParsed[value].variable;
+    } else {
+      if (value && value[0] === "$") {
+        return theme[`${value.slice(1)}`]?.val || themeParsed[value]?.val;
+      }
+    }
+  }
+  let valOrVar;
+  if (key === "fontFamily") {
+    valOrVar = tokensParsed.font[value]?.family || value;
+  }
+  if (key === "fontSize") {
+    valOrVar = tokensParsed.font[fontFamily]?.size[value] || value;
+  }
+  if (key === "lineHeight") {
+    valOrVar = tokensParsed.font[fontFamily]?.lineHeight[value] || value;
+  }
+  if (key === "letterSpacing") {
+    valOrVar = tokensParsed.font[fontFamily]?.letterSpacing[value] || value;
+  }
+  if (key === "fontWeight") {
+    valOrVar = tokensParsed.font[fontFamily]?.weight[value] || value;
+  }
+  if (typeof valOrVar !== "undefined") {
+    if (valOrVar instanceof Variable) {
+      return valOrVar.variable;
+    } else {
+      return valOrVar;
+    }
+  }
+  for (const cat in tokenCategories) {
+    if (tokenCategories[cat][key]) {
+      const res = tokensParsed[cat][value];
+      if (res) {
+        return res.variable;
+      } else {
+        const themeVar = themeParsed[value];
+        if (themeVar) {
+          return themeVar.variable;
+        }
+      }
+    }
+  }
+  const spaceVar = tokensParsed.space[value];
+  if (spaceVar) {
+    return spaceVar.variable;
+  }
+  return value;
+}, "getToken");
+const tokenCategories = {
+  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
+  }
+};
+function parseVariants(variants, conf) {
+  return Object.keys(variants).reduce((acc, key) => {
+    acc[key] = Object.keys(variants[key]).reduce((vacc, vkey) => {
+      const variantVal = variants[key][vkey];
+      if (vkey.startsWith("...")) {
+        vacc["..."] = variantVal;
+        const tokenKey = vkey.slice(3);
+        const tokens = conf.tokens[tokenKey];
+        for (const tkey in tokens) {
+          vacc[`$${tkey}`] = variantVal;
+        }
+      } else {
+        vacc[vkey] = variantVal;
+      }
+      return vacc;
+    }, {});
+    return acc;
+  }, {});
+}
+__name(parseVariants, "parseVariants");
+export {
+  createPropMapper
+};

package/dist/jsx/helpers/createTamaguiProvider.js

@@ -0,0 +1,19 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import * as React from "react";
+import { TextAncestorProvider } from "../views/TextAncestorContext";
+import { ThemeProvider } from "../views/ThemeProvider";
+function createTamaguiProvider(themeProps) {
+  return /* @__PURE__ */ __name(function TamaguiProvider({
+    initialWindowMetrics,
+    fallback,
+    children,
+    ...themePropsProvider
+  }) {
+    return <TextAncestorProvider><ThemeProvider {...themeProps} {...themePropsProvider}><React.Suspense fallback={fallback || null}>{children}</React.Suspense></ThemeProvider></TextAncestorProvider>;
+  }, "TamaguiProvider");
+}
+__name(createTamaguiProvider, "createTamaguiProvider");
+export {
+  createTamaguiProvider
+};

package/dist/jsx/helpers/extendStaticConfig.js

@@ -0,0 +1,58 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createPropMapper } from "./createPropMapper";
+function extendStaticConfig(Component, config = {}) {
+  const parent = Component || {};
+  if (!parent.staticConfig) {
+    parent.staticConfig = {
+      Component
+    };
+  }
+  const variants = {
+    ...parent.staticConfig.variants
+  };
+  if (config.variants) {
+    for (const key in config.variants) {
+      if (variants[key]) {
+        variants[key] = {
+          ...variants[key],
+          ...config.variants[key]
+        };
+      } else {
+        variants[key] = config.variants[key];
+      }
+    }
+  }
+  return parseStaticConfig({
+    ...parent.staticConfig,
+    isZStack: config.isZStack || parent.staticConfig.isZStack,
+    variants,
+    isText: config.isText || parent.staticConfig.isText || false,
+    neverFlatten: config.neverFlatten ?? parent.staticConfig.neverFlatten,
+    ensureOverriddenProp: config.ensureOverriddenProp ?? parent.staticConfig.ensureOverriddenProp,
+    validStyles: config.validStyles ? {
+      ...parent.staticConfig.validStyles,
+      ...config.validStyles
+    } : parent.staticConfig.validStyles,
+    validPropsExtra: {
+      ...parent.staticConfig.validPropsExtra,
+      ...config.validPropsExtra
+    },
+    defaultProps: {
+      ...parent.staticConfig.defaultProps,
+      ...config.defaultProps
+    }
+  });
+}
+__name(extendStaticConfig, "extendStaticConfig");
+const parseStaticConfig = /* @__PURE__ */ __name((config) => {
+  return {
+    ...config,
+    parsed: true,
+    propMapper: createPropMapper(config)
+  };
+}, "parseStaticConfig");
+export {
+  extendStaticConfig,
+  parseStaticConfig
+};

package/dist/jsx/helpers/fixNativeShadow.js

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

package/dist/jsx/helpers/fixNativeShadow.native.js

@@ -0,0 +1,29 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const matchRgba = /rgba\(\s*([\d\.]{1,})\s*,\s*([\d\.]{1,})\s*,\s*([\d\.]{1,})\s*,\s*([\d\.]{1,})\s*\)$/;
+function fixNativeShadow(props) {
+  if (props.shadowColor) {
+    if (!!!("shadowOffset" in props)) {
+      props.shadowOffset = {
+        width: 0,
+        height: 0
+      };
+    }
+    if (!!!("shadowOpacity" in props)) {
+      const c = `${props.shadowColor}`;
+      if (c[0] === "r" && c[3] === "a") {
+        const [_, r, g, b, a] = c.match(matchRgba) || [];
+        if (typeof a !== "string") {
+          console.warn("non valid rgba", c);
+          return props;
+        }
+        props.shadowColor = `rgb(${r},${g},${b})`;
+        props.shadowOpacity = +a;
+      }
+    }
+  }
+}
+__name(fixNativeShadow, "fixNativeShadow");
+export {
+  fixNativeShadow
+};