@tamagui/core 1.0.0-alpha.4 → 1.0.0-alpha.43

package/{_ → dist/jsx}/createComponent.js

@@ -1,7 +1,8 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { concatClassName, stylePropsView } from "@tamagui/helpers";
-import React, {
+import { useForceUpdate } from "@tamagui/use-force-update";
+import {
   Children,
   Fragment,
   createElement,
@@ -12,26 +13,43 @@ import React, {
   useRef,
   useState
 } from "react";
-import { Text, View } from "react-native";
+import { StyleSheet, Text, View } from "react-native";
+import { onConfiguredOnce } from "./conf";
 import { stackDefaultStyles } from "./constants/constants";
 import { isTouchDevice, isWeb } from "./constants/platform";
 import { rnw } from "./constants/rnw";
-import { onConfiguredOnce } from "./createTamagui";
-import { addStylesUsingClassname } from "./helpers/addStylesUsingClassname";
+import { addStylesUsingClassname, useStylesAsClassname } from "./helpers/addStylesUsingClassname";
 import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
 import { getSplitStyles } from "./helpers/getSplitStyles";
 import { useFeatures } from "./hooks/useFeatures";
-import { useForceUpdate } from "./hooks/useForceUpdate";
 import { usePressable } from "./hooks/usePressable";
+import { useTheme } from "./hooks/useTheme";
 import { TextAncestorContext } from "./views/TextAncestorContext";
-import { ThemeManagerContext } from "./views/ThemeManagerContext";
-const mouseUps = new Set();
+const mouseUps = /* @__PURE__ */ new Set();
 if (typeof document !== "undefined") {
   document.addEventListener("mouseup", () => {
     mouseUps.forEach((x) => x());
     mouseUps.clear();
   });
 }
+const defaultComponentState = {
+  hover: false,
+  press: false,
+  pressIn: false
+};
+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");
 function createComponent(configIn) {
   let staticConfig;
   if ("parsed" in configIn) {
@@ -39,15 +57,35 @@ function createComponent(configIn) {
   } else {
     staticConfig = parseStaticConfig(configIn);
   }
-  const { Component, validStyles, isText } = staticConfig;
+  const { Component, validStyles, isText, isZStack } = staticConfig;
   const validStyleProps = validStyles != null ? validStyles : stylePropsView;
   let defaultProps = null;
   let tamaguiConfig;
-  let defaultsStyle;
+  let defaultNativeStyle = null;
   let defaultsClassName = "";
   let initialTheme;
   const component = forwardRef((props, forwardedRef) => {
     var _a;
+    const forceUpdate = useForceUpdate();
+    const features = useFeatures(props, { forceUpdate });
+    const theme = useTheme();
+    const [state, set_] = useState(defaultComponentState);
+    const set = createShallowUpdate(set_);
+    if (process.env.NODE_ENV === "development" && !isText && isWeb) {
+      Children.toArray(props.children).forEach((item) => {
+        if (typeof item === "string") {
+          console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`);
+        }
+      });
+    }
+    const hasTextAncestor = isWeb ? useContext(TextAncestorContext) : false;
+    const hostRef = useRef(null);
+    const {
+      viewProps: viewPropsIn,
+      pseudos,
+      style,
+      classNames
+    } = getSplitStyles(props, staticConfig, theme);
     const {
       tag,
       hitSlop,
@@ -81,34 +119,17 @@ function createComponent(configIn) {
       onStartShouldSetResponderCapture,
       onMouseDown,
       onClick,
-      onLayout
-    } = props;
-    const forceUpdate = useForceUpdate();
-    const features = useFeatures(props, { forceUpdate });
-    const manager = useContext(ThemeManagerContext);
-    const [state, set_] = useState(() => ({
-      hover: false,
-      press: false,
-      pressIn: false,
-      theme: manager.name
-    }));
-    const set = /* @__PURE__ */ __name((next) => set_((prev) => {
-      for (const key in next) {
-        if (prev[key] !== next[key]) {
-          return { ...prev, ...next };
-        }
-      }
-      return prev;
-    }), "set");
-    if (process.env.NODE_ENV === "development" && !isText && isWeb) {
-      Children.toArray(props.children).forEach((item) => {
-        if (typeof item === "string") {
-          console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`);
-        }
-      });
+      accessible,
+      accessibilityRole,
+      onLayout,
+      ...viewProps
+    } = viewPropsIn;
+    if (!isWeb) {
+      if (accessible)
+        viewProps.accessible = accessible;
+      if (accessibilityRole)
+        viewProps.accessibilityRole = accessibilityRole;
     }
-    const hasTextAncestor = isWeb ? useContext(TextAncestorContext) : false;
-    const hostRef = useRef(null);
     if (isWeb) {
       rnw.useResponderEvents(hostRef, {
         onMoveShouldSetResponder,
@@ -129,8 +150,6 @@ function createComponent(configIn) {
         onStartShouldSetResponderCapture
       });
     }
-    const isTracking = useRef(false);
-    const { viewProps, pseudos, style, classNames } = getSplitStyles(props, staticConfig, manager.theme || initialTheme);
     const internal = useRef();
     if (!internal.current) {
       internal.current = {
@@ -139,18 +158,11 @@ function createComponent(configIn) {
     }
     useEffect(() => {
       internal.current.isMounted = true;
-      const dispose = manager == null ? void 0 : manager.onChangeTheme((name) => {
-        if (isTracking.current) {
-          set({ theme: name });
-        }
-      });
       return () => {
-        dispose();
         mouseUps.delete(unPress);
-        isTracking.current = false;
         internal.current.isMounted = false;
       };
-    }, [manager]);
+    }, []);
     const element = isWeb ? !Component || typeof Component === "string" ? tag || Component : Component : Component;
     const ReactView = !isWeb ? View : element || (hasTextAncestor ? "span" : "div");
     const ReactText = !isWeb ? Text : element || "span";
@@ -158,23 +170,23 @@ function createComponent(configIn) {
     const isHovering = !isTouchDevice && !disabled && pseudos && state.hover;
     const isPressing = !disabled && pseudos && state.press;
     const styles = [
+      defaultNativeStyle ? defaultNativeStyle.base : null,
       style,
       isHovering ? pseudos.hoverStyle || null : null,
       isPressing ? pseudos.pressStyle || null : null
     ];
     if (isWeb) {
-      const stylesClassNames = addStylesUsingClassname(styles);
-      const classList = staticConfig.isText ? [
+      const stylesClassNames = useStylesAsClassname(styles);
+      const classList = isText ? [
         defaultsClassName,
         classNames,
         stylesClassNames,
         props.className
       ] : [defaultsClassName, props.className, classNames, stylesClassNames];
-      const classListFlat = classList.flat(1).filter(Boolean).join(" ");
-      const className = concatClassName(classListFlat);
+      const className = concatClassName(...classList);
       if (process.env.NODE_ENV === "development") {
         if (props["debug"]) {
-          console.log("\u{1F95A} className", { style, styles, stylesClassNames, classListFlat: classListFlat.split(" "), className });
+          console.log("\u{1F95A} className", { style, styles, classList, stylesClassNames, className });
         }
       }
       viewProps.className = className;
@@ -287,10 +299,11 @@ function createComponent(configIn) {
         Object.assign(viewProps, events);
       }
     }
-    const spacedChildrenEl = spacedChildren({
+    const childEls = spacedChildren({
       children,
       space,
-      flexDirection: props.flexDirection || (defaultProps == null ? void 0 : defaultProps.flexDirection)
+      flexDirection: props.flexDirection || (defaultProps == null ? void 0 : defaultProps.flexDirection),
+      isZStack
     });
     let content;
     if (isWeb && rnw) {
@@ -298,11 +311,11 @@ function createComponent(configIn) {
       const className = domProps.className && domProps.className !== viewProps.className ? `${domProps.className} ${viewProps.className}` : viewProps.className;
       Object.assign(viewProps, domProps);
       viewProps.className = className;
-      content = createElement(ViewComponent, viewProps, spacedChildrenEl);
+      content = createElement(ViewComponent, viewProps, childEls);
     } else {
-      content = createElement(ViewComponent, viewProps, spacedChildrenEl);
+      content = createElement(ViewComponent, viewProps, childEls);
     }
-    const shouldWrapTextAncestor = isWeb && staticConfig.isText && !hasTextAncestor;
+    const shouldWrapTextAncestor = isWeb && isText && !hasTextAncestor;
     if (shouldWrapTextAncestor) {
       content = createElement(TextAncestorContext.Provider, { value: true }, content);
     }
@@ -312,13 +325,16 @@ function createComponent(configIn) {
         console.log("\u{1F95A} props in:", props);
         console.log("\u{1F95A} props out:", viewProps);
         console.log((_a = props.onClick) == null ? void 0 : _a.toString());
-        console.log("\u{1F95A} etc:", { shouldAttach, ViewComponent, viewProps, styles, pseudos, content, spacedChildrenEl });
+        console.log("\u{1F95A} etc:", { shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls });
         if (isWeb) {
           console.log("\u{1F95A} component info", { staticConfig, tamaguiConfig });
         }
       }
     }
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, features, content);
+    return <>
+      {features}
+      {content}
+    </>;
   });
   onConfiguredOnce((conf) => {
     var _a;
@@ -331,7 +347,13 @@ function createComponent(configIn) {
       }
       defaultsClassName += addStylesUsingClassname([next.style, next.pseudos]);
     } else {
-      console.log("we need to account for default styles for media queries", next);
+      const sheetStyles = {};
+      for (const style of next.style) {
+        Object.assign(sheetStyles, style);
+      }
+      defaultNativeStyle = StyleSheet.create({
+        base: sheetStyles
+      });
     }
     component.defaultProps = {
       ...next.viewProps,
@@ -348,22 +370,31 @@ function createComponent(configIn) {
     ...staticConfig
   };
   const res = component;
-  res["extractable"] = (Component2) => {
+  res["extractable"] = (Component2, conf) => {
     Component2["staticConfig"] = extendStaticConfig(res, {
+      ...conf,
       neverFlatten: true,
-      defaultProps: Component2.defaultProps
+      defaultProps: {
+        ...Component2.defaultProps,
+        ...conf == null ? void 0 : conf.defaultProps
+      }
     });
     return Component2;
   };
   return res;
 }
 __name(createComponent, "createComponent");
+let hasWarnedOnce = false;
 const Spacer = createComponent({
-  defaultProps: stackDefaultStyles,
+  defaultProps: {
+    ...stackDefaultStyles,
+    size: true
+  },
   variants: {
     size: {
       "...size": (size, { tokens }) => {
         var _a, _b;
+        size = size == true ? "$true" : size;
         return {
           width: (_a = tokens.size[size]) != null ? _a : size,
           height: (_b = tokens.size[size]) != null ? _b : size
@@ -381,12 +412,13 @@ const Spacer = createComponent({
   }
 });
 function spacedChildren({
+  isZStack,
   children,
   space,
   flexDirection
 }) {
   var _a, _b;
-  if (!space) {
+  if (!space && !isZStack) {
     return children;
   }
   const childrenList = Children.toArray(children);
@@ -400,28 +432,32 @@ function spacedChildren({
       continue;
     }
     const key = `${(_a = child == null ? void 0 : child["key"]) != null ? _a : index}`;
-    next.push(/* @__PURE__ */ React.createElement(Fragment, {
-      key
-    }, child));
+    next.push(<Fragment key={key}>{isZStack ? <Absolute>{child}</Absolute> : child}</Fragment>);
     if ((_b = child == null ? void 0 : child["type"]) == null ? void 0 : _b["isVisuallyHidden"]) {
       continue;
     }
-    if (index === len - 1) {
-      break;
+    if (index !== len - 1) {
+      if (space) {
+        next.push(<Spacer key={`${key}_spacer`} direction={flexDirection === "row" || flexDirection === "row-reverse" ? "horizontal" : "vertical"} size={space} />);
+      }
     }
-    next.push(/* @__PURE__ */ React.createElement(Spacer, {
-      key: `${key}_spacer`,
-      direction: flexDirection === "row" || flexDirection === "row-reverse" ? "horizontal" : "vertical",
-      size: space
-    }));
   }
   return next;
 }
 __name(spacedChildren, "spacedChildren");
+const Absolute = /* @__PURE__ */ __name(({ children }) => <View style={sheet.fullscreen}>{children}</View>, "Absolute");
+const sheet = StyleSheet.create({
+  fullscreen: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  }
+});
 export {
   Spacer,
   createComponent,
   mouseUps,
   spacedChildren
 };
-//# sourceMappingURL=createComponent.js.map

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/{createShorthands.js → jsx/createShorthands.js}

@@ -7,4 +7,3 @@ __name(createShorthands, "createShorthands");
 export {
   createShorthands
 };
-//# sourceMappingURL=createShorthands.js.map

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 } 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 (!(val instanceof Variable)) {
+    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

@@ -1,7 +1,11 @@
 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");
@@ -26,4 +30,3 @@ export {
   createTokens,
   mapTokensToVariables
 };
-//# sourceMappingURL=createTokens.js.map

package/{_ → dist/jsx}/createVariable.js

@@ -7,6 +7,9 @@ class Variable {
     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");
@@ -19,4 +22,3 @@ export {
   createVariable,
   isVariable
 };
-//# sourceMappingURL=createVariable.js.map

package/dist/jsx/getThemeParentClassName.js

@@ -0,0 +1,10 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { PREFIX } from "./constants/constants";
+function getThemeParentClassName(themeName) {
+  return `theme-parent ${themeName ? `${PREFIX}${themeName}` : ""}`;
+}
+__name(getThemeParentClassName, "getThemeParentClassName");
+export {
+  getThemeParentClassName
+};

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/{helpers → jsx/helpers}/createMediaStyle.js

@@ -31,4 +31,3 @@ export {
   MEDIA_SEP,
   createMediaStyle
 };
-//# sourceMappingURL=createMediaStyle.js.map