@tamagui/core 1.0.1-beta.76 → 1.0.1-beta.77

package/dist/jsx/helpers/getSplitStyles.js

@@ -1,380 +0,0 @@
-import { stylePropsText, stylePropsTransform, validPseudoKeys, validStyles } from "@tamagui/helpers";
-import { useInsertionEffect } from "react";
-import { getConfig } from "../conf";
-import { isClient, isWeb, useIsomorphicLayoutEffect } from "../constants/platform";
-import { mediaQueryConfig, mediaState } from "../hooks/useMedia";
-import { createMediaStyle } from "./createMediaStyle";
-import { fixNativeShadow } from "./fixNativeShadow";
-import { getStylesAtomic } from "./getStylesAtomic";
-import {
-  insertStyleRule,
-  insertedTransforms,
-  updateInserted,
-  updateInsertedCache
-} from "./insertStyleRule";
-import { mergeTransform } from "./mergeTransform";
-import { pseudos as pseudoAttrs } from "./pseudos";
-const skipProps = {
-  animation: true,
-  animateOnly: true,
-  debug: true,
-  componentName: true,
-  ...!isWeb && {
-    tag: true,
-    whiteSpace: true,
-    wordWrap: true,
-    textOverflow: true,
-    textDecorationDistance: true,
-    userSelect: true,
-    selectable: true,
-    cursor: true,
-    contain: true,
-    boxSizing: true,
-    boxShadow: true
-  }
-};
-let conf;
-const pseudoCNInverse = {
-  hover: "hoverStyle",
-  focus: "focusStyle",
-  press: "pressStyle"
-};
-const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, debug) => {
-  var _a, _b;
-  conf = conf || getConfig();
-  const validStyleProps = staticConfig.isText ? stylePropsText : validStyles;
-  const viewProps = {};
-  const pseudos = {};
-  const medias = {};
-  const usedKeys = /* @__PURE__ */ new Set();
-  let style = {};
-  if (state.hasTextAncestor) {
-    style.display = "inline-flex";
-  }
-  let classNames = {};
-  let transforms = null;
-  const rulesToInsert = [];
-  function addStyle(prop, rule) {
-    rulesToInsert.push([prop, rule]);
-    updateInsertedCache(prop, rule);
-  }
-  function mergeClassName(key, val, isMediaOrPseudo = false) {
-    if (!val)
-      return;
-    if (val.startsWith("_transform-")) {
-      const namespace = isMediaOrPseudo ? key : "transform";
-      let transform = insertedTransforms[val];
-      if (isClient) {
-        if (!transform) {
-          updateInserted();
-          transform = insertedTransforms[val];
-          if (process.env.NODE_ENV === "development") {
-            if (!transform) {
-              console.warn("no transform, error", { insertedTransforms, val });
-            }
-          }
-        }
-        if (!transform) {
-          if (isWeb && val[0] !== "_") {
-            transform = val;
-          }
-        }
-        if (process.env.NODE_ENV === "development" && debug === "verbose") {
-          console.log("  \xBB getSplitStyles mergeClassName transform", { key, val, namespace, transform, insertedTransforms });
-        }
-      }
-      transforms = transforms || {};
-      transforms[namespace] = transforms[namespace] || ["", ""];
-      const identifier = val.replace("_transform", "");
-      transforms[namespace][0] += identifier;
-      if (transform) {
-        transforms[namespace][1] += transform;
-      }
-    } else {
-      classNames[key] = val;
-    }
-  }
-  const propKeys = Object.keys(props);
-  const shouldDoClasses = isWeb && !state.noClassNames;
-  if (process.env.NODE_ENV === "development" && debug === "verbose") {
-    console.log("propKeys", propKeys);
-  }
-  for (let i = propKeys.length - 1; i >= 0; i--) {
-    const keyInit = propKeys[i];
-    if (usedKeys.has(keyInit))
-      continue;
-    if (skipProps[keyInit])
-      continue;
-    if (!isWeb && keyInit.startsWith("data-"))
-      continue;
-    const valInit = props[keyInit];
-    if (keyInit === "style" || keyInit.startsWith("_style")) {
-      if (!valInit)
-        continue;
-      for (const key in valInit) {
-        if (usedKeys.has(key))
-          continue;
-        if (valInit && typeof valInit === "object") {
-          for (const skey in valInit) {
-            if (usedKeys.has(skey))
-              continue;
-            usedKeys.add(skey);
-            style[skey] = valInit[skey];
-          }
-        } else {
-          usedKeys.add(key);
-          style[key] = valInit;
-        }
-      }
-      continue;
-    }
-    if (keyInit === "className") {
-      let nonTamaguis = "";
-      if (!valInit) {
-        continue;
-      }
-      for (const cn of valInit.split(" ")) {
-        if (cn[0] === "_") {
-          const [shorthand, mediaOrPseudo] = cn.slice(1).split("-");
-          const isMedia2 = mediaOrPseudo[0] === "_";
-          const isPseudo2 = mediaOrPseudo[0] === "0";
-          const isMediaOrPseudo2 = isMedia2 || isPseudo2;
-          let fullKey = conf.shorthands[shorthand];
-          if (isMedia2) {
-            let mediaShortKey = mediaOrPseudo.slice(1);
-            mediaShortKey = mediaShortKey.slice(0, mediaShortKey.indexOf("_"));
-            fullKey += `_${mediaShortKey}`;
-          } else if (isPseudo2) {
-            const pseudoShortKey = mediaOrPseudo.slice(1);
-            fullKey += `_${pseudoShortKey}`;
-          }
-          usedKeys.add(fullKey);
-          mergeClassName(fullKey, cn, isMediaOrPseudo2);
-        } else {
-          nonTamaguis += " " + cn;
-        }
-      }
-      if (nonTamaguis) {
-        usedKeys.add(keyInit);
-        mergeClassName(keyInit, nonTamaguis);
-      }
-      continue;
-    }
-    if (valInit && valInit[0] === "_") {
-      usedKeys.add(keyInit);
-      mergeClassName(keyInit, valInit);
-      continue;
-    }
-    if (state.keepVariantsAsProps && staticConfig.defaultVariants && keyInit in staticConfig.defaultVariants) {
-      viewProps[keyInit] = valInit;
-    }
-    let isMedia = keyInit[0] === "$";
-    let isPseudo = validPseudoKeys[keyInit];
-    if (!isMedia && !isPseudo && !((_a = staticConfig.variants) == null ? void 0 : _a[keyInit]) && !validStyleProps[keyInit] && !conf.shorthands[keyInit]) {
-      usedKeys.add(keyInit);
-      viewProps[keyInit] = valInit;
-      continue;
-    }
-    const expanded = isMedia || isPseudo ? [[keyInit, valInit]] : staticConfig.propMapper(keyInit, valInit, theme, props, state, void 0, debug);
-    let isMediaOrPseudo = isMedia || isPseudo;
-    if (process.env.NODE_ENV === "development" && debug === "verbose") {
-      console.log("  \xBB getSplitStyles", keyInit, expanded);
-    }
-    if (!expanded) {
-      continue;
-    }
-    for (const [key, val] of expanded) {
-      if (val === void 0)
-        continue;
-      if (key !== "target" && val && val[0] === "_") {
-        usedKeys.add(key);
-        mergeClassName(key, val, isMediaOrPseudo);
-        continue;
-      }
-      isMedia = key[0] === "$";
-      isPseudo = validPseudoKeys[key];
-      isMediaOrPseudo = isMedia || isPseudo;
-      if (!isMediaOrPseudo) {
-        if (usedKeys.has(key))
-          continue;
-      }
-      if (staticConfig.deoptProps && staticConfig.deoptProps.has(key) || staticConfig.inlineProps && staticConfig.inlineProps.has(key)) {
-        usedKeys.add(key);
-        viewProps[key] = val;
-      }
-      if (isPseudo) {
-        if (!val)
-          continue;
-        if (key === "enterStyle" && state.mounted) {
-          continue;
-        }
-        pseudos[key] = pseudos[key] || {};
-        pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, true);
-        if (shouldDoClasses) {
-          const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] });
-          for (const style2 of pseudoStyles) {
-            const postfix = ((_b = pseudoAttrs[key]) == null ? void 0 : _b.name) || key;
-            const fullKey = `${style2.property}_${postfix}`;
-            if (!usedKeys.has(fullKey)) {
-              usedKeys.add(fullKey);
-              addStyle(style2.identifier, style2.rules.join(";"));
-              mergeClassName(fullKey, style2.identifier, isMediaOrPseudo);
-            }
-          }
-        }
-        continue;
-      }
-      if (isMedia) {
-        const mediaKey = key;
-        const mediaKeyShort = mediaKey.slice(1);
-        if (!mediaQueryConfig[mediaKeyShort]) {
-          if (!usedKeys.has(key)) {
-            viewProps[key] = val;
-          }
-          continue;
-        }
-        const mediaStyle = getSubStyle(val, staticConfig, theme, props, state);
-        if (process.env.NODE_ENV === "development" && debug === "verbose") {
-          console.log("  \xBB getSplitStyles mediaStyle", { mediaKey, mediaStyle, props, shouldDoClasses });
-        }
-        if (shouldDoClasses) {
-          const mediaStyles = getStylesAtomic(mediaStyle);
-          for (const style2 of mediaStyles) {
-            const out = createMediaStyle(style2, mediaKeyShort, mediaQueryConfig);
-            const fullKey = `${style2.property}_${mediaKeyShort}`;
-            if (!usedKeys.has(fullKey)) {
-              usedKeys.add(fullKey);
-              addStyle(out.identifier, out.styleRule);
-              mergeClassName(fullKey, out.identifier, true);
-            }
-          }
-        } else {
-          if (mediaState[mediaKey]) {
-            if (process.env.NODE_ENV === "development" && debug) {
-              console.log("apply media style", mediaKey, mediaState);
-            }
-            Object.assign(shouldDoClasses ? medias : style, mediaStyle);
-          }
-        }
-        continue;
-      }
-      if (!isWeb && key === "pointerEvents") {
-        usedKeys.add(key);
-        viewProps[key] = val;
-        continue;
-      }
-      if (validStyleProps[key]) {
-        usedKeys.add(key);
-        if (val && val[0] === "_") {
-          classNames[key] = val;
-        } else if (key in stylePropsTransform) {
-          mergeTransform(style, key, val, true);
-        } else {
-          style[key] = val;
-        }
-        continue;
-      }
-      if (!staticConfig.variants || !(key in staticConfig.variants)) {
-        if (!skipProps[key]) {
-          viewProps[key] = val;
-          usedKeys.add(key);
-        }
-      }
-    }
-  }
-  if (defaultClassNames) {
-    classNames = {
-      ...defaultClassNames,
-      ...classNames
-    };
-  }
-  if (shouldDoClasses) {
-    const atomic = getStylesAtomic(style);
-    for (const atomicStyle of atomic) {
-      const key = atomicStyle.property;
-      if (!state.dynamicStylesInline) {
-        addStyle(atomicStyle.identifier, atomicStyle.rules.join(";"));
-        mergeClassName(key, atomicStyle.identifier);
-      } else {
-        style[key] = atomicStyle.value;
-      }
-    }
-  }
-  if (transforms) {
-    for (const namespace in transforms) {
-      if (!transforms[namespace]) {
-        console.warn("Error no transform");
-        continue;
-      }
-      const [hash, val] = transforms[namespace];
-      const identifier = `_transform${hash}`;
-      if (isClient) {
-        if (!insertedTransforms[identifier]) {
-          const rule = `.${identifier} { transform: ${val}; }`;
-          addStyle(identifier, rule);
-        }
-      }
-      classNames[namespace] = identifier;
-    }
-  }
-  if (process.env.NODE_ENV === "development" && debug === "verbose") {
-    if (typeof document !== "undefined") {
-      console.log("  \xBB getSplitStyles out", { style, pseudos, medias, classNames, viewProps, state });
-    }
-  }
-  return {
-    viewProps,
-    style,
-    medias,
-    pseudos,
-    classNames,
-    rulesToInsert
-  };
-};
-const insertSplitStyles = (...args) => {
-  const res = getSplitStyles(...args);
-  for (const [prop, rule] of res.rulesToInsert) {
-    insertStyleRule(prop, rule);
-  }
-  return res;
-};
-const effect = isWeb ? useInsertionEffect || useIsomorphicLayoutEffect : useIsomorphicLayoutEffect;
-const useSplitStyles = (...args) => {
-  const res = getSplitStyles(...args);
-  effect(() => {
-    for (const [prop, rule] of res.rulesToInsert) {
-      insertStyleRule(prop, rule);
-    }
-  });
-  return res;
-};
-const getSubStyle = (styleIn, staticConfig, theme, props, state, avoidDefaultProps) => {
-  const styleOut = {};
-  for (const key in styleIn) {
-    const val = styleIn[key];
-    const expanded = staticConfig.propMapper(key, val, theme, props, state, avoidDefaultProps);
-    if (!expanded)
-      continue;
-    for (const [skey, sval] of expanded) {
-      if (skey in stylePropsTransform) {
-        mergeTransform(styleOut, skey, sval);
-      } else {
-        styleOut[skey] = sval;
-      }
-    }
-  }
-  return styleOut;
-};
-function normalizeStyleObject(style) {
-  if (!isWeb) {
-    fixNativeShadow(style);
-  }
-}
-export {
-  getSplitStyles,
-  getSubStyle,
-  insertSplitStyles,
-  normalizeStyleObject,
-  pseudoCNInverse,
-  useSplitStyles
-};

package/dist/jsx/helpers/getStackSize.js

@@ -1,15 +0,0 @@
-import { getSize, stepTokenUpOrDown } from "./getSize";
-const getButtonSize = (val, { tokens }) => {
-  var _a;
-  const ySize = getSize(val, 0);
-  const xSize = stepTokenUpOrDown(tokens.space, val);
-  const radiusToken = (_a = tokens.radius[val]) != null ? _a : tokens.radius["$4"];
-  return {
-    paddingHorizontal: xSize,
-    height: ySize,
-    borderRadius: radiusToken
-  };
-};
-export {
-  getButtonSize
-};

package/dist/jsx/helpers/getStylesAtomic.js

@@ -1,61 +0,0 @@
-import { stylePropsTransform } from "@tamagui/helpers";
-import { isVariable } from "../createVariable";
-import { generateAtomicStyles } from "./generateAtomicStyles";
-import { invertMapTransformKeys, mergeTransform } from "./mergeTransform";
-import { pseudos } from "./pseudos";
-const pseudosOrdered = Object.values(pseudos);
-function getStylesAtomic(stylesIn, options) {
-  if (!stylesIn.hoverStyle && !stylesIn.pressStyle && !stylesIn.focusStyle) {
-    return getAtomicStyle(stylesIn, void 0, options);
-  }
-  const { hoverStyle, pressStyle, focusStyle, ...base } = stylesIn;
-  let res = [];
-  for (const [index, style] of [hoverStyle, pressStyle, focusStyle, base].entries()) {
-    if (!style || !Object.keys(style).length) {
-      continue;
-    }
-    const pseudo = pseudosOrdered[index];
-    for (const skey in style) {
-      const val = style[skey];
-      if (isVariable(val)) {
-        style[skey] = val.toString();
-      }
-      if (stylePropsTransform[skey]) {
-        delete style[skey];
-        mergeTransform(style, skey, val);
-      }
-    }
-    res = [...res, ...getAtomicStyle(style, pseudo, options)];
-  }
-  return res;
-}
-function getAtomicStyle(style, pseudo, options) {
-  if (process.env.NODE_ENV === "development") {
-    if (!style || typeof style !== "object") {
-      throw new Error(`Wrong style type: "${typeof style}": ${style}`);
-    }
-  } else {
-    if (!style) {
-      console.warn(`Invalid style`);
-      return [];
-    }
-  }
-  if (options && options.splitTransforms && style.transform) {
-    let atomicStyles = [];
-    let { transform, ...rest } = style;
-    for (const t of transform) {
-      const tKey = Object.keys(t)[0];
-      const transformProperty = invertMapTransformKeys[tKey] || tKey;
-      const out = generateAtomicStyles({ transform: [t] }, pseudo)[0];
-      atomicStyles.push({
-        ...out,
-        property: transformProperty
-      });
-    }
-    return [...atomicStyles, ...generateAtomicStyles(rest, pseudo)];
-  }
-  return generateAtomicStyles(style, pseudo);
-}
-export {
-  getStylesAtomic
-};

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

@@ -1,6 +0,0 @@
-function getStylesAtomic() {
-  console.warn("no-op native");
-}
-export {
-  getStylesAtomic
-};

package/dist/jsx/helpers/getTextSize.js

@@ -1,31 +0,0 @@
-import { getVariableValue } from "../createVariable";
-const getTextSize = (val = "$4", { fonts, theme, props }) => {
-  var _a, _b, _c;
-  const family = getVariableValue(props.fontFamily) || "$body";
-  const font = fonts[family] || fonts["$body"];
-  if (!font) {
-    console.warn("\u26A0\uFE0F no font found", { family, fontTokens: Object.keys(fonts), val });
-    return {};
-  }
-  const fontFamily = font.family;
-  const fontSize = props.fontSize || font.size[val];
-  const lineHeight = props.lineHeight || font.lineHeight[val];
-  const fontWeight = props.fontWeight || font.weight[val];
-  const letterSpacing = props.letterSpacing || font.letterSpacing[val];
-  const fontStyle = props.fontStyle || ((_a = font.style) == null ? void 0 : _a[val]);
-  const textTransform = props.textTransform || ((_b = font.transform) == null ? void 0 : _b[val]);
-  const color = props.color || ((_c = font.color) == null ? void 0 : _c[val]) || theme.color;
-  return {
-    color,
-    fontStyle,
-    textTransform,
-    fontFamily,
-    fontWeight,
-    letterSpacing,
-    fontSize,
-    lineHeight
-  };
-};
-export {
-  getTextSize
-};

package/dist/jsx/helpers/getVariantExtras.js

@@ -1,22 +0,0 @@
-import { getConfig } from "../conf";
-function getVariantExtras(props, theme, defaultProps, avoidDefaultProps = false) {
-  const conf = getConfig();
-  return {
-    fonts: conf.fontsParsed,
-    tokens: conf.tokensParsed,
-    theme,
-    props: avoidDefaultProps ? props : new Proxy(props, {
-      get(target, key) {
-        if (Reflect.has(target, key)) {
-          return Reflect.get(target, key);
-        }
-        if (defaultProps) {
-          return Reflect.get(defaultProps, key);
-        }
-      }
-    })
-  };
-}
-export {
-  getVariantExtras
-};

package/dist/jsx/helpers/insertStyleRule.js

@@ -1,91 +0,0 @@
-const allSelectors = {};
-const insertedSelectors = {};
-const insertedTransforms = {};
-const getAllSelectors = () => allSelectors;
-const getInsertedRules = () => Object.values(insertedSelectors);
-const getAllTransforms = () => insertedTransforms;
-function addTransform(identifier, css, rule) {
-  const s = css.indexOf("transform:");
-  if (s === -1) {
-    if (process.env.NODE_ENV === "development") {
-      console.groupCollapsed(`\u274C Invalid transform, likely used deg/% improperly ${identifier}`);
-      console.log("rule:", rule);
-      console.trace();
-      console.groupEnd();
-    } else {
-      console.error(`Missing transform`, identifier, css, rule);
-    }
-    return;
-  }
-  const startI = s + "transform:".length;
-  const endI = css.indexOf(";");
-  const value = css.slice(startI, endI);
-  insertedTransforms[identifier] = value;
-}
-const isClient = typeof document !== "undefined";
-let hasInsertedSinceUpdate = true;
-function updateInserted() {
-  if (process.env.NODE_ENV === "test")
-    return;
-  if (!isClient)
-    return;
-  if (!hasInsertedSinceUpdate) {
-    console.warn("hasnt inserted since");
-    return;
-  }
-  const sheets = document.styleSheets;
-  if (!sheets)
-    return;
-  for (let i = 0; i < sheets.length; i++) {
-    const rules = sheets[i].cssRules;
-    const firstRule = rules[0];
-    if (!(firstRule instanceof CSSStyleRule))
-      continue;
-    const firstSelector = firstRule.selectorText;
-    if (!firstSelector)
-      continue;
-    if (firstSelector === ":root" || firstSelector.startsWith("._")) {
-      for (let i2 = 0; i2 < rules.length; i2++) {
-        const rule = rules.item(i2);
-        if (!(rule instanceof CSSStyleRule))
-          continue;
-        const identifier = rule.selectorText.slice(1);
-        if (!allSelectors[identifier]) {
-          allSelectors[identifier] = process.env.NODE_ENV === "development" ? rule.cssText : true;
-          if (identifier.startsWith("_transform")) {
-            addTransform(identifier, rule.cssText, rule);
-          }
-        }
-      }
-    }
-  }
-  hasInsertedSinceUpdate = false;
-}
-updateInserted();
-const sheet = isClient ? document.head.appendChild(document.createElement("style")).sheet : null;
-function updateInsertedCache(identifier, rule) {
-  if (insertedSelectors[identifier])
-    return;
-  insertedSelectors[identifier] = rule;
-  const isTransform = identifier.startsWith("_transform");
-  if (isTransform) {
-    addTransform(identifier, rule);
-  }
-}
-function insertStyleRule(identifier, rule) {
-  if (allSelectors[identifier])
-    return;
-  hasInsertedSinceUpdate = true;
-  updateInsertedCache(identifier, rule);
-  allSelectors[identifier] = process.env.NODE_ENV === "development" ? rule : true;
-  sheet == null ? void 0 : sheet.insertRule(rule, sheet.cssRules.length);
-}
-export {
-  getAllSelectors,
-  getAllTransforms,
-  getInsertedRules,
-  insertStyleRule,
-  insertedTransforms,
-  updateInserted,
-  updateInsertedCache
-};

package/dist/jsx/helpers/isObj.js

@@ -1,4 +0,0 @@
-const isObj = (x) => x && !Array.isArray(x) && typeof x === "object";
-export {
-  isObj
-};

package/dist/jsx/helpers/isTamaguiComponent.js

@@ -1,12 +0,0 @@
-function isTamaguiComponent(comp, name) {
-  const config = comp && comp["staticConfig"];
-  if (!config || !config.parsed)
-    return false;
-  if (name) {
-    return name === config.componentName;
-  }
-  return true;
-}
-export {
-  isTamaguiComponent
-};

package/dist/jsx/helpers/isTamaguiElement.js

@@ -1,8 +0,0 @@
-import { isValidElement } from "react";
-import { isTamaguiComponent } from "./isTamaguiComponent";
-const isTamaguiElement = (child, name) => {
-  return isValidElement(child) && isTamaguiComponent(child.type, name);
-};
-export {
-  isTamaguiElement
-};

package/dist/jsx/helpers/matchMedia.js

@@ -1,15 +0,0 @@
-const matchMedia = typeof window !== "undefined" && window.matchMedia || function matchMediaFallback(query) {
-  return {
-    addListener() {
-      if (process.env.NODE_ENV === "development" && !process.env.IS_STATIC && process.env.TAMAGUI_TARGET !== "web") {
-        console.log("warning: matchMedia not loading! Is native picking up .native.js files?");
-      }
-    },
-    removeListener() {
-    },
-    matches: false
-  };
-};
-export {
-  matchMedia
-};

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

@@ -1,6 +0,0 @@
-import MediaQueryList from "@expo/match-media/build/MediaQueryList.js";
-const matchMedia = (media) => new MediaQueryList(media);
-globalThis["matchMedia"] = matchMedia;
-export {
-  matchMedia
-};

package/dist/jsx/helpers/mergeProps.js

@@ -1,15 +0,0 @@
-const mergeProps = (a, b) => {
-  const out = {};
-  for (const key in a) {
-    if (!(key in b)) {
-      out[key] = a[key];
-    }
-  }
-  for (const key in b) {
-    out[key] = b[key];
-  }
-  return out;
-};
-export {
-  mergeProps
-};

package/dist/jsx/helpers/mergeTransform.js

@@ -1,16 +0,0 @@
-const mergeTransform = (obj, key, val, backwards = false) => {
-  obj.transform || (obj.transform = []);
-  obj.transform[backwards ? "unshift" : "push"]({ [mapTransformKeys[key] || key]: val });
-};
-const mapTransformKeys = {
-  x: "translateX",
-  y: "translateY"
-};
-const invertMapTransformKeys = {
-  translateX: "x",
-  translateY: "y"
-};
-export {
-  invertMapTransformKeys,
-  mergeTransform
-};