@tamagui/core 1.0.0-alpha.6 → 1.0.0-alpha.66

package/dist/jsx/createFont.js

@@ -0,0 +1,27 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { validateFont } from "./helpers/validate";
+const createFont = /* @__PURE__ */ __name((font) => {
+  if (process.env.NODE_ENV === "development") {
+    validateFont(font);
+  }
+  const sizeKeys = Object.keys(font.size);
+  for (const key in font) {
+    if (key === "size" || key === "family")
+      continue;
+    const section = font[key];
+    const keys = Object.keys(section);
+    let fillVal = section[keys[0]];
+    for (const sKey of sizeKeys) {
+      if (!(sKey in section)) {
+        section[sKey] = fillVal;
+      } else {
+        fillVal = section[sKey];
+      }
+    }
+  }
+  return Object.freeze(font);
+}, "createFont");
+export {
+  createFont
+};

package/dist/jsx/createShorthands.js

@@ -0,0 +1,9 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function createShorthands(shorthands) {
+  return Object.freeze(shorthands);
+}
+__name(createShorthands, "createShorthands");
+export {
+  createShorthands
+};

package/dist/jsx/createTamagui.js

@@ -0,0 +1,165 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { getStyleRules } from "@tamagui/helpers";
+import { configListeners, getHasConfigured, setConfig } from "./conf";
+import { PREFIX } from "./constants/constants";
+import { isWeb } from "./constants/platform";
+import { Variable, createVariable, isVariable } from "./createVariable";
+import { createTamaguiProvider } from "./helpers/createTamaguiProvider";
+import { configureMedia } from "./hooks/useMedia";
+const createdConfigs = /* @__PURE__ */ new WeakMap();
+function createTamagui(config) {
+  if (createdConfigs.has(config)) {
+    return config;
+  }
+  if (getHasConfigured()) {
+    console.warn("Called createTamagui twice! Should never do so");
+  }
+  configureMedia({
+    queries: config.media,
+    defaultActive: config.mediaQueryDefaultActive
+  });
+  const themeConfig = (() => {
+    var _a;
+    let cssRules = [];
+    const varsByValue = /* @__PURE__ */ new Map();
+    if (isWeb) {
+      let tokenRule = `:root {`;
+      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) {
+      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 ? `var(--${varName});` : `${val}`};`;
+        }
+        ensureThemeVariable(theme, themeKey);
+      }
+      if (isWeb) {
+        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);
+      }
+    }
+    varsByValue.clear();
+    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: {},
+    media: {},
+    ...config,
+    Provider: createTamaguiProvider({
+      defaultTheme: "light",
+      ...config
+    }),
+    themeConfig,
+    themeParsed,
+    tokensParsed,
+    parsed: true,
+    getCSS() {
+      return `${themeConfig.css}
+${[...getStyleRules()].join("\n")}`;
+    }
+  };
+  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] = {};
+    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");
+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,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,29 @@
+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 ? `var(--${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");
+export {
+  IS_VARIABLE_SYMBOL,
+  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 = /* @__PURE__ */ 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,176 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { getTamagui } from "../conf";
+import { isWeb } from "../constants/platform";
+import { isVariable } 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) => {
+    var _a, _b;
+    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 == null ? void 0 : variantsParsed[key];
+    if (variant && typeof value !== "undefined") {
+      const val = value === true ? variant["$true"] || variant["true"] : (_b = (_a = variant[value]) != null ? _a : variant["..."]) != null ? _b : value;
+      let res = val;
+      if (typeof res === "function") {
+        res = res(value, { tokens: conf.tokensParsed, theme, props });
+      }
+      if (isObj(res)) {
+        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 (isVariable(value)) {
+      shouldReturn = true;
+      value = value.variable;
+    }
+    if (shouldReturn) {
+      return {
+        [key]: value
+      };
+    }
+  };
+}, "createPropMapper");
+const resolveTokens = /* @__PURE__ */ __name((input, conf, theme, fontFamily) => {
+  var _a;
+  let res = {};
+  for (const rKey in input) {
+    const fKey = conf.shorthands[rKey] || rKey;
+    const val = input[rKey];
+    if (isVariable(val)) {
+      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)) {
+        res[fKey] = resolveTokens(val, conf, theme, fontFamily);
+      } 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 getToken = /* @__PURE__ */ __name((key, value, { tokensParsed, themeParsed }, theme, fontFamily = "$body") => {
+  var _a, _b, _c, _d, _e;
+  const tokenVal = themeParsed[value];
+  if (tokenVal) {
+    return isWeb && tokenVal.variable ? tokenVal.variable : tokenVal.val;
+  }
+  let valOrVar;
+  if (key === "fontFamily") {
+    valOrVar = ((_a = tokensParsed.font[value]) == null ? void 0 : _a.family) || value;
+  }
+  if (key === "fontSize") {
+    valOrVar = ((_b = tokensParsed.font[fontFamily]) == null ? void 0 : _b.size[value]) || value;
+  }
+  if (key === "lineHeight") {
+    valOrVar = ((_c = tokensParsed.font[fontFamily]) == null ? void 0 : _c.lineHeight[value]) || value;
+  }
+  if (key === "letterSpacing") {
+    valOrVar = ((_d = tokensParsed.font[fontFamily]) == null ? void 0 : _d.letterSpacing[value]) || value;
+  }
+  if (key === "fontWeight") {
+    valOrVar = ((_e = tokensParsed.font[fontFamily]) == null ? void 0 : _e.weight[value]) || value;
+  }
+  if (typeof valOrVar !== "undefined") {
+    if (isVariable(valOrVar)) {
+      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;
+  }
+  if (value && value[0] === "$") {
+    console.warn(`\u26A0\uFE0F Missing token in theme ${theme.name}:`, value);
+    return null;
+  }
+  return value;
+}, "getToken");
+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
+  }
+};
+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,60 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createPropMapper } from "./createPropMapper";
+function extendStaticConfig(Component, config = {}) {
+  var _a, _b;
+  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,
+    ...config,
+    isZStack: config.isZStack || parent.staticConfig.isZStack,
+    variants,
+    isText: config.isText || parent.staticConfig.isText || false,
+    neverFlatten: (_a = config.neverFlatten) != null ? _a : parent.staticConfig.neverFlatten,
+    ensureOverriddenProp: (_b = config.ensureOverriddenProp) != null ? _b : 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,33 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const matchRgbaHsla = /(rgba|hsla)\(\s*([\d\.]{1,}%?)\s*,\s*([\d\.]{1,}%?)\s*,\s*([\d\.]{1,}%?)\s*,\s*([\d\.]{1,})\s*\)$/;
+function fixNativeShadow(props) {
+  if (!props.shadowColor) {
+    return;
+  }
+  if (!props.shadowOffset) {
+    props.shadowOffset = {
+      width: 0,
+      height: 0
+    };
+  }
+  if ("shadowOpacity" in props) {
+    return;
+  }
+  const c = `${props.shadowColor}`;
+  if ((c[0] === "r" || c[0] === "h") && c[3] === "a") {
+    const [_, type, _1, _2, _3, a] = c.match(matchRgbaHsla) || [];
+    if (typeof a !== "string") {
+      console.warn("invalid", c, type);
+      return;
+    }
+    props.shadowColor = `${type.replace("a", "")}(${_1},${_2},${_3})`;
+    props.shadowOpacity = +a;
+  } else {
+    props.shadowOpacity = 1;
+  }
+}
+__name(fixNativeShadow, "fixNativeShadow");
+export {
+  fixNativeShadow
+};