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

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 { stylePropsView } from "@tamagui/helpers";
+import { createPropMapper } from "./createPropMapper";
+function extendStaticConfig(parent, config = {}) {
+  var _a;
+  if (!parent) {
+    throw new Error("no parent");
+  }
+  if (!("staticConfig" in parent)) {
+    return parseStaticConfig(config);
+  }
+  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,
+    variants,
+    isZStack: config.isZStack || parent.staticConfig.isZStack,
+    isText: config.isText || parent.staticConfig.isText || false,
+    isInput: config.isInput || parent.staticConfig.isInput || false,
+    neverFlatten: config.neverFlatten || parent.staticConfig.neverFlatten,
+    ensureOverriddenProp: (_a = config.ensureOverriddenProp) != null ? _a : parent.staticConfig.ensureOverriddenProp,
+    validStyles: config.validStyles ? {
+      ...parent.staticConfig.validStyles,
+      ...config.validStyles
+    } : parent.staticConfig.validStyles || stylePropsView,
+    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
+};

package/dist/jsx/helpers/getExpandedShorthands.js

@@ -0,0 +1,18 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { getConfig } from "../conf";
+function getExpandedShorthands(props) {
+  const shorthands = getConfig().shorthands;
+  if (!shorthands) {
+    return props;
+  }
+  let res = {};
+  for (const key in props) {
+    res[shorthands[key] || key] = props[key];
+  }
+  return res;
+}
+__name(getExpandedShorthands, "getExpandedShorthands");
+export {
+  getExpandedShorthands
+};

package/dist/jsx/helpers/getSplitStyles.js

@@ -0,0 +1,243 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import {
+  mergeTransform,
+  stylePropsText,
+  stylePropsTransform,
+  validPseudoKeys,
+  validStyles
+} from "@tamagui/helpers";
+import { isWeb } 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 } from "./insertStyleRule";
+const skipKeys = {
+  animation: true,
+  animated: true,
+  children: true,
+  key: true,
+  ref: true
+};
+function normalizeStyleObject(style) {
+  var _a, _b;
+  if (typeof style.flex === "number") {
+    const val = style.flex;
+    delete style.flex;
+    style.flexGrow = (_a = style.flexGrow) != null ? _a : val;
+    style.flexShrink = (_b = style.flexShrink) != null ? _b : 1;
+  }
+  if (!isWeb) {
+    fixNativeShadow(style);
+  }
+}
+__name(normalizeStyleObject, "normalizeStyleObject");
+const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state, defaultClassNames) => {
+  const validStyleProps = staticConfig.isText ? stylePropsText : validStyles;
+  const viewProps = {};
+  const style = {};
+  const classNames = {
+    ...defaultClassNames
+  };
+  const pseudos = {};
+  const medias = {};
+  let cur = null;
+  let transforms = {};
+  function mergeClassName(key, val) {
+    if (!val)
+      return;
+    if (val.startsWith("_transform-")) {
+      const isMediaOrPseudo = key !== "transform";
+      const isMedia = isMediaOrPseudo && key[11] === "_";
+      const isPsuedo = isMediaOrPseudo && key[11] === "0";
+      const namespace = isMedia ? key.split("_")[2] : isPsuedo ? key.split("-")[1] : "transform";
+      let transform = insertedTransforms[val];
+      if (!transform) {
+        updateInserted();
+      }
+      transform = insertedTransforms[val];
+      if (!transform || transform === "undefined") {
+        console.log("NO TRANSFORM", { key, val, transform });
+        return;
+      }
+      transforms[namespace] = transforms[namespace] || ["", ""];
+      transforms[namespace][0] += val.replace("_transform", "");
+      transforms[namespace][1] += transform;
+    } else {
+      classNames[key] = val;
+    }
+  }
+  __name(mergeClassName, "mergeClassName");
+  function push() {
+    if (!cur)
+      return;
+    normalizeStyleObject(cur);
+    if (isWeb && !state.noClassNames) {
+      const atomic = getStylesAtomic(cur);
+      for (const atomicStyle of atomic) {
+        if (!state.noClassNames) {
+          mergeClassName(atomicStyle.property, atomicStyle.identifier);
+          insertStyleRule(atomicStyle.identifier, atomicStyle.rules[0]);
+        } else {
+          style[atomicStyle.property] = atomicStyle.value;
+        }
+      }
+    }
+    if (!isWeb || state.noClassNames || state.resolveVariablesAs === "value" || state.resolveVariablesAs === "both") {
+      for (const key in cur) {
+        if (key in stylePropsTransform) {
+          mergeTransform(style, key, cur[key]);
+        } else {
+          style[key] = cur[key];
+        }
+      }
+    }
+    cur = null;
+  }
+  __name(push, "push");
+  for (const keyInit in props) {
+    const valInit = props[keyInit];
+    if (skipKeys[keyInit]) {
+      viewProps[keyInit] = valInit;
+      continue;
+    }
+    if (keyInit === "className" || validStyleProps[keyInit] && valInit && valInit[0] === "_") {
+      push();
+      mergeClassName(keyInit, valInit);
+      if (cur) {
+        if (cur[keyInit])
+          console.warn("just want to see how used");
+        delete cur[keyInit];
+      }
+      continue;
+    }
+    let isMedia = keyInit[0] === "$";
+    let isPseudo = validPseudoKeys[keyInit];
+    const out = isMedia || isPseudo ? true : staticConfig.propMapper(keyInit, valInit, theme, state.fallbackProps || props, state.resolveVariablesAs);
+    const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out);
+    if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+      console.log("split style", keyInit, expanded);
+    }
+    for (const [key, val] of expanded) {
+      if (val === void 0) {
+        continue;
+      }
+      if (key !== "target" && val && val[0] === "_") {
+        mergeClassName(key, val);
+        continue;
+      }
+      isMedia = key[0] === "$";
+      isPseudo = validPseudoKeys[key];
+      if (staticConfig.deoptProps && staticConfig.deoptProps.has(key) || staticConfig.inlineProps && staticConfig.inlineProps.has(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 (isWeb && !state.noClassNames) {
+          const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] });
+          for (const style2 of pseudoStyles) {
+            mergeClassName(`${style2.property}-${key}`, style2.identifier);
+            insertStyleRule(style2.identifier, style2.rules[0]);
+          }
+        }
+        continue;
+      }
+      if (isMedia) {
+        const mediaKey = key;
+        if (!mediaQueryConfig[mediaKey.slice(1)]) {
+          viewProps[key] = val;
+          continue;
+        }
+        const mediaStyle = getSubStyle(val, staticConfig, theme, props, state, true);
+        const shouldDoClasses = isWeb && !state.noClassNames;
+        if (shouldDoClasses) {
+          const mediaStyles = getStylesAtomic(mediaStyle);
+          for (const style2 of mediaStyles) {
+            const out2 = createMediaStyle(style2, mediaKey.slice(1), mediaQueryConfig);
+            mergeClassName(`${out2.identifier}-${mediaKey}`, out2.identifier);
+            insertStyleRule(out2.identifier, out2.styleRule);
+          }
+        } else {
+          if (mediaState[mediaKey]) {
+            push();
+            if (process.env.NODE_ENV === "development" && props["debug"]) {
+              console.log("apply media style", mediaKey, mediaState);
+            }
+            Object.assign(shouldDoClasses ? medias : style, mediaStyle);
+          }
+        }
+        continue;
+      }
+      if (key === "style" || key.startsWith("_style")) {
+        push();
+        Object.assign(style, val);
+        continue;
+      }
+      if (!isWeb && key === "pointerEvents") {
+        viewProps[key] = val;
+        continue;
+      }
+      if (validStyleProps[key]) {
+        cur = cur || {};
+        cur[key] = val;
+        continue;
+      }
+      if (!staticConfig.variants || !(key in staticConfig.variants)) {
+        if (key !== "animation" && key !== "debug") {
+          push();
+          viewProps[key] = val;
+        }
+      }
+    }
+  }
+  push();
+  if (transforms) {
+    for (const namespace in transforms) {
+      const [hash, val] = transforms[namespace];
+      const identifier = `_transform${hash}`;
+      if (!insertedTransforms[identifier]) {
+        const rule = `.${identifier} { transform: ${val}; }`;
+        insertStyleRule(identifier, rule);
+      }
+      classNames[namespace] = identifier;
+    }
+  }
+  if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+    console.log("out", { style, pseudos, medias, classNames, viewProps });
+  }
+  return {
+    viewProps,
+    style,
+    medias,
+    pseudos,
+    classNames
+  };
+}, "getSplitStyles");
+const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props, state, avoidDefaultProps) => {
+  const styleOut = {};
+  for (const key in styleIn) {
+    const val = styleIn[key];
+    const out = staticConfig.propMapper(key, val, theme, state.fallbackProps || props, state.resolveVariablesAs, avoidDefaultProps);
+    const expanded = out === true || !out ? [[key, val]] : Object.entries(out);
+    for (const [skey, sval] of expanded) {
+      if (skey in stylePropsTransform) {
+        mergeTransform(styleOut, skey, sval);
+      } else {
+        styleOut[skey] = sval;
+      }
+    }
+  }
+  normalizeStyleObject(styleOut);
+  return styleOut;
+}, "getSubStyle");
+export {
+  getSplitStyles,
+  getSubStyle
+};

package/dist/jsx/helpers/getStylesAtomic.js

@@ -0,0 +1,118 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import {
+  invertMapTransformKeys,
+  mergeTransform,
+  stylePropsTransform
+} from "@tamagui/helpers";
+import { rnw } from "../constants/rnw";
+import { isVariable } from "../createVariable";
+function getStylesAtomic(stylesIn, 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;
+}
+__name(getStylesAtomic, "getStylesAtomic");
+const generateAtomicStyles = /* @__PURE__ */ __name((style) => {
+  return rnw.atomic(rnw.createCompileableStyle(rnw.createReactDOMStyle(style)));
+}, "generateAtomicStyles");
+function getAtomicStyle(style, pseudo, options) {
+  var _a;
+  if (style == null || typeof style !== "object") {
+    throw new Error(`Wrong style type: "${typeof style}": ${style}`);
+  }
+  for (const key in borderDefaults) {
+    if (key in style) {
+      style[borderDefaults[key]] = (_a = style[borderDefaults[key]]) != null ? _a : "solid";
+    }
+  }
+  let atomicStyles = {};
+  if (options.splitTransforms && style.transform) {
+    let { transform, ...rest } = style;
+    Object.assign(atomicStyles, generateAtomicStyles(rest));
+    for (const t of transform) {
+      const tKey = Object.keys(t)[0];
+      const transformProperty = invertMapTransformKeys[tKey] || tKey;
+      const out = generateAtomicStyles({ transform: [t] });
+      const key = Object.keys(out)[0];
+      atomicStyles[key] = {
+        ...out[key],
+        transformProperty
+      };
+      console.log("got", JSON.stringify({ t, tKey, out, key, atomicStyles }, null, 2));
+    }
+  } else {
+    atomicStyles = generateAtomicStyles(style);
+  }
+  return Object.keys(atomicStyles).map((key) => {
+    const val = atomicStyles[key];
+    const [_, ogProperty, hash] = val.identifier.split("-");
+    const psuedoPrefix = pseudo ? `0${pseudo.name}-` : "";
+    const identifier = `_${ogProperty}-${psuedoPrefix}${hash}`;
+    const className = `.${identifier}`;
+    const rules = val.rules.map((rule) => {
+      if (pseudo) {
+        const psuedoPrefixSelect = [...Array(pseudo.priority)].map(() => ":root").join("") + " ";
+        let res = rule.replace(`.${val.identifier}`, `${psuedoPrefixSelect} ${className}`).replace("{", `:${pseudo.name}{`);
+        if (pseudo.name === "hover") {
+          res = `@media not all and (hover: none) { ${res} }`;
+        }
+        return res;
+      }
+      return rule.replace(`.${val.identifier}`, className).replace(importantRegex, "");
+    });
+    const result = {
+      property: val.transformProperty || val.property,
+      value: val.value,
+      identifier,
+      className,
+      rules
+    };
+    return result;
+  });
+}
+__name(getAtomicStyle, "getAtomicStyle");
+const importantRegex = /\!important*/g;
+const borderDefaults = {
+  borderWidth: "borderStyle",
+  borderBottomWidth: "borderBottomStyle",
+  borderTopWidth: "borderTopStyle",
+  borderLeftWidth: "borderLeftStyle",
+  borderRightWidth: "borderRightStyle"
+};
+const pseudos = {
+  hoverStyle: {
+    name: "hover",
+    priority: 1
+  },
+  pressStyle: {
+    name: "active",
+    priority: 2
+  },
+  focusStyle: {
+    name: "focus",
+    priority: 3
+  }
+};
+const pseudosOrdered = Object.values(pseudos);
+export {
+  getStylesAtomic,
+  pseudos
+};

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

@@ -0,0 +1,9 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function getStylesAtomic() {
+  console.warn("no-op native");
+}
+__name(getStylesAtomic, "getStylesAtomic");
+export {
+  getStylesAtomic
+};

package/dist/jsx/helpers/insertStyleRule.js

@@ -0,0 +1,89 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const allSelectors = {};
+const insertedSelectors = {};
+const insertedTransforms = {};
+const getAllSelectors = /* @__PURE__ */ __name(() => allSelectors, "getAllSelectors");
+const getInsertedRules = /* @__PURE__ */ __name(() => Object.values(insertedSelectors), "getInsertedRules");
+const getAllTransforms = /* @__PURE__ */ __name(() => insertedTransforms, "getAllTransforms");
+function addTransform(identifier, rule) {
+  const s = rule.indexOf("transform:");
+  if (s === -1) {
+    console.error(`not a transform ${identifier} ${rule}`);
+    return;
+  }
+  const startI = s + "transform:".length;
+  const endI = rule.indexOf(";");
+  const value = rule.slice(startI, endI);
+  console.log("add", identifier, value);
+  insertedTransforms[identifier] = value;
+}
+__name(addTransform, "addTransform");
+let hasInsertedSinceUpdate = true;
+const isClient = typeof document !== "undefined";
+function updateInserted() {
+  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);
+        allSelectors[identifier] = process.env.NODE_ENV === "development" ? rule.cssText : true;
+        if (identifier.startsWith("_transform")) {
+          addTransform(identifier, rule.cssText);
+        }
+      }
+    }
+  }
+  hasInsertedSinceUpdate = false;
+}
+__name(updateInserted, "updateInserted");
+updateInserted();
+const newRulesStyleTag = typeof document !== "undefined" ? document.head.appendChild(document.createElement("style")) : null;
+function insertStyleRule(identifier, rule) {
+  if (allSelectors[identifier]) {
+    return;
+  }
+  hasInsertedSinceUpdate = true;
+  if (identifier === "_transform-1abwpjw") {
+    console.trace("inserting", identifier, rule);
+  }
+  insertedSelectors[identifier] = rule;
+  allSelectors[identifier] = process.env.NODE_ENV === "development" ? rule : true;
+  if (identifier.startsWith("_transform")) {
+    addTransform(identifier, rule);
+  }
+  if (!newRulesStyleTag) {
+    return;
+  }
+  const sheet = newRulesStyleTag.sheet;
+  sheet.insertRule(rule, sheet.cssRules.length);
+  return identifier;
+}
+__name(insertStyleRule, "insertStyleRule");
+export {
+  getAllSelectors,
+  getAllTransforms,
+  getInsertedRules,
+  insertStyleRule,
+  insertedTransforms,
+  updateInserted
+};

package/dist/jsx/helpers/isObj.js

@@ -0,0 +1,6 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const isObj = /* @__PURE__ */ __name((x) => x && !Array.isArray(x) && typeof x === "object", "isObj");
+export {
+  isObj
+};

package/dist/jsx/helpers/isTamaguiElement.js

@@ -0,0 +1,10 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { isValidElement } from "react";
+const isTamaguiElement = /* @__PURE__ */ __name((child) => {
+  var _a;
+  return isValidElement(child) && !!((_a = child.type["staticConfig"]) == null ? void 0 : _a.parsed);
+}, "isTamaguiElement");
+export {
+  isTamaguiElement
+};

package/dist/jsx/helpers/matchMedia.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const matchMedia = typeof window !== "undefined" && window.matchMedia || /* @__PURE__ */ __name(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
+  };
+}, "matchMediaFallback");
+export {
+  matchMedia
+};

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

@@ -0,0 +1,8 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import MediaQueryList from "@expo/match-media/build/MediaQueryList.js";
+const matchMedia = /* @__PURE__ */ __name((media) => new MediaQueryList(media), "matchMedia");
+globalThis["matchMedia"] = matchMedia;
+export {
+  matchMedia
+};

package/dist/jsx/helpers/themeable.js

@@ -0,0 +1,24 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import React, { forwardRef } from "react";
+import { Theme } from "../views/Theme";
+import { ThemeInverse } from "../views/ThemeInverse";
+function themeable(component) {
+  const withThemeComponent = forwardRef(/* @__PURE__ */ __name(function WithTheme({ themeInverse, theme, ...rest }, ref) {
+    const element = React.createElement(component, { ...rest, ref });
+    if (themeInverse) {
+      return <ThemeInverse>{element}</ThemeInverse>;
+    }
+    if (theme) {
+      return <Theme name={theme || null}>{element}</Theme>;
+    }
+    return element;
+  }, "WithTheme"));
+  const withTheme = withThemeComponent;
+  withTheme.displayName = `Themed(${(component == null ? void 0 : component.displayName) || (component == null ? void 0 : component.name) || "Anonymous"})`;
+  return withTheme;
+}
+__name(themeable, "themeable");
+export {
+  themeable
+};