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

package/dist/index.cjs

@@ -56,7 +56,6 @@ var __toModule = (module2) => {
 __export(exports, {
   AnimatedStack: () => AnimatedStack,
   GET_DEFAULT_THEME: () => GET_DEFAULT_THEME,
-  SafeAreaProvider: () => SafeAreaProvider,
   Spacer: () => Spacer,
   Stack: () => Stack,
   Text: () => Text2,
@@ -83,6 +82,7 @@ __export(exports, {
   isChrome: () => isChrome,
   isObj: () => isObj,
   isSSR: () => isSSR,
+  isTamaguiElement: () => isTamaguiElement,
   isTouchDevice: () => isTouchDevice,
   isVariable: () => isVariable,
   isWeb: () => isWeb,
@@ -166,6 +166,9 @@ var Variable = class {
     this.name = name;
     this.variable = isWeb ? `var(--${name})` : this.val;
   }
+  toString() {
+    return isWeb ? this.variable : this.val;
+  }
 };
 __name(Variable, "Variable");
 var createVariable = /* @__PURE__ */ __name((props) => new Variable(props), "createVariable");
@@ -216,16 +219,22 @@ var import_react5 = __toModule(require("react"));
 var ThemeManager = class {
   constructor() {
     this.name = "light";
+    this.parentName = null;
     this.keys = new Map();
     this.listeners = new Map();
     this.callbacks = new Set();
     this.theme = null;
   }
-  setActiveTheme(name, theme) {
+  setActiveTheme({
+    name,
+    theme,
+    parentName
+  }) {
     if (name === this.name)
       return;
     this.name = name;
     this.theme = theme;
+    this.parentName = parentName || null;
     this.update();
   }
   track(uuid, keys) {
@@ -269,28 +278,37 @@ var Theme = /* @__PURE__ */ __name((props) => {
   const themes = (0, import_react6.useContext)(ThemeContext);
   const [parentName, setParentName] = (0, import_react6.useState)(parent.name || "light");
   if (!themes) {
-    console.warn("no themes???", props);
+    console.warn("Error, no themes in context", props);
     return props.children;
   }
   const name = props.name;
-  const theme = themes[name] || themes[`${name}-${parentName}`];
+  const nextNameParent = `${name}-${parentName}`;
+  const nextNameParentParent = `${name}-${parent.parentName}`;
+  const activeName = !name ? null : name in themes ? name : nextNameParent in themes ? nextNameParent : nextNameParentParent in themes ? nextNameParentParent : null;
+  const theme = activeName ? themes[activeName] : null;
   const themeManager = useConstant(() => {
+    if (!theme) {
+      return null;
+    }
     const manager = new ThemeManager();
     if (name) {
-      manager.setActiveTheme(name, themes[name]);
+      manager.setActiveTheme({ name, theme: themes[name], parentName });
     }
     return manager;
   });
   useIsomorphicLayoutEffect(() => {
-    themeManager.setActiveTheme(name, theme);
+    if (!themeManager) {
+      return;
+    }
+    themeManager.setActiveTheme({ name: activeName, theme, parentName });
     return parent.onChangeTheme((next) => {
       if (next) {
-        themeManager.setActiveTheme(next, themes[next]);
+        themeManager.setActiveTheme({ name: next, theme: themes[next], parentName });
         setParentName(next);
       }
     });
-  }, [themes, name]);
-  if (!name) {
+  }, [themes, activeName, parentName]);
+  if (!name || !theme) {
     return props.children;
   }
   const contents = themeManager ? /* @__PURE__ */ import_react6.default.createElement(ThemeManagerContext.Provider, {
@@ -363,6 +381,60 @@ function createTamaguiProvider(themeProps) {
 }
 __name(createTamaguiProvider, "createTamaguiProvider");
 
+// src/helpers/validate.ts
+var import_ow = __toModule(require("@tamagui/ow"));
+var validateConfig = /* @__PURE__ */ __name((conf3) => {
+  if (!conf3) {
+    console.warn("no conf?");
+    return;
+  }
+  try {
+    (0, import_ow.default)(conf3, validConfig);
+  } catch (err) {
+    console.log("Given config:\n", JSON.stringify(conf3, null, 2));
+    throw err;
+  }
+}, "validateConfig");
+var validConfig = import_ow.default.object.exactShape({
+  defaultTheme: import_ow.default.optional.string,
+  disableRootThemeClass: import_ow.default.optional.boolean,
+  shorthands: import_ow.default.optional.object.valuesOfType(import_ow.default.string),
+  themes: import_ow.default.object.valuesOfType(import_ow.default.object),
+  tokens: import_ow.default.object.valuesOfType(import_ow.default.object),
+  media: import_ow.default.object.valuesOfType(import_ow.default.object)
+});
+var validFont = import_ow.default.object.exactShape({
+  family: import_ow.default.string,
+  size: import_ow.default.object.nonEmpty.valuesOfType(import_ow.default.number),
+  lineHeight: import_ow.default.object.nonEmpty.valuesOfType(import_ow.default.number),
+  weight: import_ow.default.object.nonEmpty.valuesOfType(import_ow.default.string),
+  letterSpacing: import_ow.default.object.nonEmpty.valuesOfType(import_ow.default.number)
+});
+var validTokens = import_ow.default.object.exactShape({
+  font: import_ow.default.object.valuesOfType(validFont),
+  size: import_ow.default.object.nonEmpty.valuesOfType(import_ow.default.number),
+  space: import_ow.default.object.nonEmpty.valuesOfType(import_ow.default.number),
+  zIndex: import_ow.default.object.nonEmpty.valuesOfType(import_ow.default.number),
+  radius: import_ow.default.object.nonEmpty.valuesOfType(import_ow.default.number),
+  color: import_ow.default.object.nonEmpty.valuesOfType(import_ow.default.string)
+});
+var validateTokens = /* @__PURE__ */ __name((tokens) => {
+  try {
+    (0, import_ow.default)(tokens, validTokens);
+  } catch (err) {
+    console.log("Given tokens:\n", JSON.stringify(tokens, null, 2));
+    throw err;
+  }
+}, "validateTokens");
+var validateFont = /* @__PURE__ */ __name((font) => {
+  try {
+    (0, import_ow.default)(font, validFont);
+  } catch (err) {
+    console.log("Given font:\n", JSON.stringify(font, null, 2));
+    throw err;
+  }
+}, "validateFont");
+
 // src/hooks/useMedia.tsx
 var import_use_force_update = __toModule(require("@tamagui/use-force-update"));
 var import_react8 = __toModule(require("react"));
@@ -371,6 +443,9 @@ var import_react8 = __toModule(require("react"));
 var matchMedia = typeof window !== "undefined" && window.matchMedia || /* @__PURE__ */ __name(function matchMediaFallback(query) {
   return {
     addListener() {
+      if (process.env.NODE_ENV === "development") {
+        console.log("warning: matchMedia not loading! Is native picking up .native.js files?");
+      }
     },
     removeListener() {
     },
@@ -544,6 +619,11 @@ var onConfiguredOnce = /* @__PURE__ */ __name((cb) => {
 }, "onConfiguredOnce");
 var PREFIX = `theme--`;
 function createTamagui(config) {
+  if (process.env.NODE_ENV === "development") {
+    if (!config["parsed"]) {
+      validateConfig(config);
+    }
+  }
   if (conf2) {
     console.warn("Called createTamagui twice! Should never do so");
   }
@@ -630,6 +710,7 @@ ${vars}
     themeConfig,
     themeParsed,
     tokensParsed,
+    parsed: true,
     getCSS() {
       return `${themeConfig.css}
 ${[...(0, import_helpers.getStyleRules)()].join("\n")}`;
@@ -1067,7 +1148,6 @@ var getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, isSplit
   const validStyleProps = staticConfig.isText ? import_helpers3.stylePropsText : import_helpers3.validStyles;
   const viewProps = {};
   const style = [];
-  const blacklistProps = isSplittingDefaultProps ? blacklistDefaultProps : blacklistFinalProps;
   let pseudos2 = null;
   let cur = null;
   let classNames = null;
@@ -1081,14 +1161,14 @@ var getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, isSplit
       }
       const mediaProps = __spreadValues(__spreadValues({}, props), valInit);
       const mediaStyle = getSubStyle(valInit, staticConfig, theme, props);
-      const mediaStyles = getStylesAtomic(mediaStyle);
-      if (process.env.NODE_ENV === "development") {
-        if (props["debug"]) {
-          console.log("mediaStyles", keyInit, { mediaProps, mediaStyle, mediaStyles });
+      if (isWeb) {
+        const mediaStyles = getStylesAtomic(mediaStyle);
+        if (process.env.NODE_ENV === "development") {
+          if (props["debug"]) {
+            console.log("mediaStyles", keyInit, { mediaProps, mediaStyle, mediaStyles });
+          }
         }
-      }
-      for (const style2 of mediaStyles) {
-        if (isWeb) {
+        for (const style2 of mediaStyles) {
           const out2 = createMediaStyle(style2, mediaKey, mediaQueryConfig);
           classNames = classNames || [];
           classNames.push(out2.identifier);
@@ -1097,8 +1177,10 @@ var getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, isSplit
           if (process.env.NODE_ENV === "development" && props["debug"]) {
             console.log("mediaProp", style2.identifier, out2, mediaProps, mediaStyle, mediaStyles);
           }
-        } else {
-          console.log("TODO native media style logic");
+        }
+      } else {
+        if (mediaState[mediaKey]) {
+          style.push(mediaStyle);
         }
       }
       continue;
@@ -1146,7 +1228,7 @@ var getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, isSplit
         cur[key] = val;
         continue;
       }
-      if (!blacklistProps[key]) {
+      if (!staticConfig.variants || !(key in staticConfig.variants)) {
         viewProps[key] = val;
       }
     }
@@ -1184,13 +1266,6 @@ var getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props) =
   fixNativeShadow(styleOut);
   return styleOut;
 }, "getSubStyle");
-var blacklistDefaultProps = __spreadValues(__spreadValues({}, import_helpers3.validStyles), import_helpers3.stylePropsText);
-var blacklistFinalProps = __spreadProps(__spreadValues({}, blacklistDefaultProps), {
-  tag: true,
-  debug: true,
-  space: true,
-  hitSlop: true
-});
 var mapTransformKeys = {
   x: "translateX",
   y: "translateY"
@@ -1203,61 +1278,20 @@ var mergeTransform = /* @__PURE__ */ __name((obj, key, val) => {
 
 // src/hooks/useFeatures.tsx
 var import_react10 = __toModule(require("react"));
-var createDefinition = /* @__PURE__ */ __name(({ Component, propNames }) => ({
+var createDefinition = /* @__PURE__ */ __name(({
+  Component,
+  propNames
+}) => ({
   isEnabled: (props) => propNames.some((name) => !!props[name]),
   Component
 }), "createDefinition");
-var mediaQueryPropNames = [
-  "$xs",
-  "$sm",
-  "$md",
-  "$lg",
-  "$xl",
-  "$xxl",
-  "$pointerCoarse",
-  "$hoverNone",
-  "$tall",
-  "$short",
-  "$gtSm",
-  "$notXs",
-  "$gtMd",
-  "$gtLg"
-];
-var featureDefinitions = {
-  measureLayout: createDefinition({
-    Component: (props) => {
-      console.log("measure", props);
-      return null;
-    },
-    propNames: ["onLayout"]
-  }),
-  mediaQuery: createDefinition({
-    Component: (props) => {
-      if (isWeb) {
-        return;
-      }
-      const keys = mediaQueryPropNames.flatMap((x) => x in props ? x.slice(1) : []);
-      useIsomorphicLayoutEffect(() => {
-        for (const key of keys) {
-          addMediaQueryListener(key, props._utils.forceUpdate);
-        }
-        return () => {
-          for (const key of keys) {
-            removeMediaQueryListener(key, props._utils.forceUpdate);
-          }
-        };
-      }, [keys.join(",")]);
-      return null;
-    },
-    propNames: mediaQueryPropNames
-  })
-};
-var featureNames = Object.keys(featureDefinitions);
-var numFeatures = featureNames.length;
+var featureDefinitions = null;
 var useFeatures = /* @__PURE__ */ __name((props, utils) => {
+  if (!featureDefinitions) {
+    featureDefinitions = loadFeatures();
+  }
   const features = [];
-  for (let i = 0; i < numFeatures; i++) {
-    const name = featureNames[i];
+  for (const name in featureDefinitions) {
     const { isEnabled, Component } = featureDefinitions[name];
     if (isEnabled(props) && Component) {
       features.push(/* @__PURE__ */ import_react10.default.createElement(Component, __spreadProps(__spreadValues({
@@ -1269,6 +1303,33 @@ var useFeatures = /* @__PURE__ */ __name((props, utils) => {
   }
   return features;
 }, "useFeatures");
+function loadFeatures() {
+  return __spreadValues({}, !isWeb && {
+    mediaQuery: loadMediaQueryFeature()
+  });
+}
+__name(loadFeatures, "loadFeatures");
+function loadMediaQueryFeature() {
+  const mediaPropNames = Object.keys(mediaState);
+  return createDefinition({
+    Component: (props) => {
+      const keys = mediaPropNames.flatMap((x) => x in props ? x.slice(1) : []);
+      useIsomorphicLayoutEffect(() => {
+        for (const key of keys) {
+          addMediaQueryListener(key, props._utils.forceUpdate);
+        }
+        return () => {
+          for (const key of keys) {
+            removeMediaQueryListener(key, props._utils.forceUpdate);
+          }
+        };
+      }, [keys.join(",")]);
+      return null;
+    },
+    propNames: mediaPropNames
+  });
+}
+__name(loadMediaQueryFeature, "loadMediaQueryFeature");
 
 // src/hooks/usePressable.tsx
 var import_react_native2 = __toModule(require("react-native"));
@@ -1303,8 +1364,40 @@ function createComponent(configIn) {
   let defaultsClassName = "";
   let initialTheme;
   const component = (0, import_react11.forwardRef)((props, forwardedRef) => {
-    var _a4;
+    var _b2;
+    const forceUpdate = (0, import_use_force_update2.useForceUpdate)();
+    const features = useFeatures(props, { forceUpdate });
+    const manager = (0, import_react11.useContext)(ThemeManagerContext);
+    const [state, set_] = (0, import_react11.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 __spreadValues(__spreadValues({}, prev), next);
+        }
+      }
+      return prev;
+    }), "set");
+    if (process.env.NODE_ENV === "development" && !isText && isWeb) {
+      import_react11.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 ? (0, import_react11.useContext)(TextAncestorContext) : false;
+    const hostRef = (0, import_react11.useRef)(null);
     const {
+      viewProps: viewPropsIn,
+      pseudos: pseudos2,
+      style,
+      classNames
+    } = getSplitStyles(props, staticConfig, manager.theme || initialTheme);
+    const _a4 = viewPropsIn, {
       tag,
       hitSlop,
       children,
@@ -1337,34 +1430,52 @@ function createComponent(configIn) {
       onStartShouldSetResponderCapture,
       onMouseDown,
       onClick,
+      accessible,
+      accessibilityRole,
       onLayout
-    } = props;
-    const forceUpdate = (0, import_use_force_update2.useForceUpdate)();
-    const features = useFeatures(props, { forceUpdate });
-    const manager = (0, import_react11.useContext)(ThemeManagerContext);
-    const [state, set_] = (0, import_react11.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 __spreadValues(__spreadValues({}, prev), next);
-        }
-      }
-      return prev;
-    }), "set");
-    if (process.env.NODE_ENV === "development" && !isText && isWeb) {
-      import_react11.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>.`);
-        }
-      });
+    } = _a4, viewProps = __objRest(_a4, [
+      "tag",
+      "hitSlop",
+      "children",
+      "pointerEvents",
+      "onPress",
+      "onPressIn",
+      "onPressOut",
+      "onHoverIn",
+      "onHoverOut",
+      "space",
+      "disabled",
+      "onMouseEnter",
+      "onMouseLeave",
+      "hrefAttrs",
+      "onMoveShouldSetResponder",
+      "onMoveShouldSetResponderCapture",
+      "onResponderEnd",
+      "onResponderGrant",
+      "onResponderMove",
+      "onResponderReject",
+      "onResponderRelease",
+      "onResponderStart",
+      "onResponderTerminate",
+      "onResponderTerminationRequest",
+      "onScrollShouldSetResponder",
+      "onScrollShouldSetResponderCapture",
+      "onSelectionChangeShouldSetResponder",
+      "onSelectionChangeShouldSetResponderCapture",
+      "onStartShouldSetResponder",
+      "onStartShouldSetResponderCapture",
+      "onMouseDown",
+      "onClick",
+      "accessible",
+      "accessibilityRole",
+      "onLayout"
+    ]);
+    if (!isWeb) {
+      if (accessible)
+        viewProps.accessible = accessible;
+      if (accessibilityRole)
+        viewProps.accessibilityRole = accessibilityRole;
     }
-    const hasTextAncestor = isWeb ? (0, import_react11.useContext)(TextAncestorContext) : false;
-    const hostRef = (0, import_react11.useRef)(null);
     if (isWeb) {
       rnw.useResponderEvents(hostRef, {
         onMoveShouldSetResponder,
@@ -1386,7 +1497,6 @@ function createComponent(configIn) {
       });
     }
     const isTracking = (0, import_react11.useRef)(false);
-    const { viewProps, pseudos: pseudos2, style, classNames } = getSplitStyles(props, staticConfig, manager.theme || initialTheme);
     const internal = (0, import_react11.useRef)();
     if (!internal.current) {
       internal.current = {
@@ -1565,7 +1675,7 @@ function createComponent(configIn) {
         viewProps["debug"] = true;
         console.log("\u{1F95A} props in:", props);
         console.log("\u{1F95A} props out:", viewProps);
-        console.log((_a4 = props.onClick) == null ? void 0 : _a4.toString());
+        console.log((_b2 = props.onClick) == null ? void 0 : _b2.toString());
         console.log("\u{1F95A} etc:", { shouldAttach, ViewComponent, viewProps, styles, pseudos: pseudos2, content, childEls });
         if (isWeb) {
           console.log("\u{1F95A} component info", { staticConfig, tamaguiConfig });
@@ -1587,7 +1697,7 @@ function createComponent(configIn) {
     } else {
       if (!hasWarnedOnce) {
         hasWarnedOnce = true;
-        console.log("\u26A0\uFE0F we need to account for default styles for media queries");
+        console.log("\u26A0\uFE0F TODO account for default styles for media queries");
       }
     }
     component.defaultProps = __spreadValues(__spreadValues({}, next.viewProps), component.defaultProps);
@@ -1712,6 +1822,9 @@ var createTheme = /* @__PURE__ */ __name((theme) => {
 
 // src/createFont.ts
 var 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")
@@ -1732,6 +1845,9 @@ var createFont = /* @__PURE__ */ __name((font) => {
 
 // src/createTokens.ts
 function createTokens(tokens) {
+  if (process.env.NODE_ENV === "development") {
+    validateTokens(tokens);
+  }
   return setupTokens(tokens);
 }
 __name(createTokens, "createTokens");
@@ -1869,7 +1985,6 @@ var ThemeInverse = /* @__PURE__ */ __name((props) => {
   const themeName = useThemeName();
   const defaultTheme = useDefaultThemeName();
   const name = inversions[themeName] || inversions[defaultTheme] || null;
-  console.log("todo fixme invert", { themeName, defaultTheme, next: name });
   return /* @__PURE__ */ import_react13.default.createElement(Theme, {
     name
   }, props.children);
@@ -1895,8 +2010,15 @@ var themeable = /* @__PURE__ */ __name(function graphql(component) {
   return withTheme;
 }, "graphql");
 
-// src/views/Animated.tsx
+// src/helpers/isTamaguiElement.tsx
 var import_react15 = __toModule(require("react"));
+var isTamaguiElement = /* @__PURE__ */ __name((child) => {
+  var _a4;
+  return (0, import_react15.isValidElement)(child) && !!((_a4 = child.type["staticConfig"]) == null ? void 0 : _a4.parsed);
+}, "isTamaguiElement");
+
+// src/views/Animated.tsx
+var import_react16 = __toModule(require("react"));
 var import_react_native4 = __toModule(require("react-native"));
 
 // src/views/Stack.tsx
@@ -1939,7 +2061,7 @@ var AnimatedStack = /* @__PURE__ */ __name((_a4) => {
   const driver = useConstant(() => {
     return new import_react_native4.Animated.Value(0);
   });
-  const animatedProps = (0, import_react15.useMemo)(() => {
+  const animatedProps = (0, import_react16.useMemo)(() => {
     if (!animated) {
       return null;
     }
@@ -1972,8 +2094,8 @@ var AnimatedStack = /* @__PURE__ */ __name((_a4) => {
       toValue: animateState === "in" ? 1 : 0
     }).start();
   }, [animated, animateState]);
-  const childrenMemo = (0, import_react15.useMemo)(() => children, [children]);
-  return /* @__PURE__ */ import_react15.default.createElement(Stack, __spreadValues(__spreadValues({
+  const childrenMemo = (0, import_react16.useMemo)(() => children, [children]);
+  return /* @__PURE__ */ import_react16.default.createElement(Stack, __spreadValues(__spreadValues({
     animated
   }, props), animatedProps), childrenMemo);
 }, "AnimatedStack");
@@ -2077,27 +2199,4 @@ var Text2 = createComponent({
     cursor: true
   })
 });
-
-// src/views/SafeAreaProvider.tsx
-var import_react16 = __toModule(require("react"));
-var import_react_native5 = __toModule(require("react-native"));
-var import_react_native_safe_area_context = __toModule(require("react-native-safe-area-context"));
-var defaultMetrics = null;
-var SafeAreaProvider = /* @__PURE__ */ __name(({
-  initialWindowMetrics,
-  children
-}) => {
-  if (!initialWindowMetrics && !defaultMetrics) {
-    defaultMetrics = import_react_native5.Platform.select({
-      web: {
-        frame: { x: 0, y: 0, width: 0, height: 0 },
-        insets: { top: 0, left: 0, right: 0, bottom: 0 }
-      },
-      default: import_react_native_safe_area_context.initialWindowMetrics
-    });
-  }
-  return /* @__PURE__ */ import_react16.default.createElement(import_react_native_safe_area_context.SafeAreaProvider, {
-    initialMetrics: initialWindowMetrics ?? defaultMetrics
-  }, children);
-}, "SafeAreaProvider");
 //# sourceMappingURL=index.cjs.map