@tamagui/core 1.0.0-alpha.0 → 1.0.0-alpha.12

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,
@@ -104,7 +104,6 @@ __export(exports, {
   themeable: () => themeable,
   useConstant: () => useConstant,
   useDefaultThemeName: () => useDefaultThemeName,
-  useForceUpdate: () => useForceUpdate,
   useIsomorphicLayoutEffect: () => useIsomorphicLayoutEffect,
   useMedia: () => useMedia,
   useTheme: () => useTheme,
@@ -113,14 +112,15 @@ __export(exports, {
 
 // src/createComponent.tsx
 var import_helpers4 = __toModule(require("@tamagui/helpers"));
-var import_react12 = __toModule(require("react"));
+var import_use_force_update2 = __toModule(require("@tamagui/use-force-update"));
+var import_react11 = __toModule(require("react"));
 var import_react_native3 = __toModule(require("react-native"));
 
 // src/constants/platform.ts
 var import_react = __toModule(require("react"));
 var import_react_native = __toModule(require("react-native"));
 var _a;
-var isWeb = process.env.TAMAGUI_TARGET !== "web" ? false : ((_a = import_react_native.Platform) == null ? void 0 : _a.OS) === "web";
+var isWeb = process.env.TAMAGUI_TARGET === "web" ? true : ((_a = import_react_native.Platform) == null ? void 0 : _a.OS) === "web";
 var isSSR = isWeb && typeof window === "undefined";
 var useIsomorphicLayoutEffect = isSSR ? import_react.useEffect : import_react.useLayoutEffect;
 var isChrome = typeof navigator !== "undefined" && /Chrome/.test(navigator.userAgent || "");
@@ -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,13 +381,71 @@ 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_react9 = __toModule(require("react"));
+var import_use_force_update = __toModule(require("@tamagui/use-force-update"));
+var import_react8 = __toModule(require("react"));
 
 // src/helpers/matchMedia.ts
 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() {
     },
@@ -377,30 +453,6 @@ var matchMedia = typeof window !== "undefined" && window.matchMedia || /* @__PUR
   };
 }, "matchMediaFallback");
 
-// src/hooks/useForceUpdate.tsx
-var import_react8 = __toModule(require("react"));
-function useForceUpdate() {
-  const setState = (0, import_react8.useState)(0)[1];
-  const internal = (0, import_react8.useRef)();
-  if (!internal.current) {
-    internal.current = {
-      isMounted: true,
-      update: () => {
-        if (internal.current.isMounted) {
-          setState(Math.random());
-        }
-      }
-    };
-  }
-  (0, import_react8.useEffect)(() => {
-    return () => {
-      internal.current.isMounted = false;
-    };
-  }, []);
-  return internal.current.update;
-}
-__name(useForceUpdate, "useForceUpdate");
-
 // src/hooks/useMedia.tsx
 var mediaState = {};
 var mediaQueryListeners = {};
@@ -477,8 +529,8 @@ var configureMedia = /* @__PURE__ */ __name(({
   }
 }, "configureMedia");
 var useMedia = /* @__PURE__ */ __name(() => {
-  const forceUpdate = useForceUpdate();
-  const state = (0, import_react9.useRef)();
+  const forceUpdate = (0, import_use_force_update.useForceUpdate)();
+  const state = (0, import_react8.useRef)();
   if (!state.current) {
     state.current = {
       selections: {},
@@ -567,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");
   }
@@ -653,6 +710,7 @@ ${vars}
     themeConfig,
     themeParsed,
     tokensParsed,
+    parsed: true,
     getCSS() {
       return `${themeConfig.css}
 ${[...(0, import_helpers.getStyleRules)()].join("\n")}`;
@@ -700,7 +758,7 @@ var parseTokens = /* @__PURE__ */ __name((tokens) => {
 }, "parseTokens");
 
 // src/helpers/addStylesUsingClassname.tsx
-var import_react10 = __toModule(require("react"));
+var import_react9 = __toModule(require("react"));
 
 // src/helpers/getStylesAtomic.ts
 var import_helpers2 = __toModule(require("@tamagui/helpers"));
@@ -817,7 +875,7 @@ __name(insertStyleRule, "insertStyleRule");
 // src/helpers/addStylesUsingClassname.tsx
 var added = new Set();
 function useStylesAsClassname(styles) {
-  if (!import_react10.useInsertionEffect) {
+  if (!import_react9.useInsertionEffect) {
     return addStylesUsingClassname(styles);
   } else {
     const insertions = [];
@@ -826,7 +884,7 @@ function useStylesAsClassname(styles) {
         insertions.push(rule);
       }
     });
-    (0, import_react10.useInsertionEffect)(() => {
+    (0, import_react9.useInsertionEffect)(() => {
       for (const ruleset of insertions) {
         insertStyleRule(ruleset);
       }
@@ -1090,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;
@@ -1104,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);
@@ -1120,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;
@@ -1169,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;
       }
     }
@@ -1207,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"
@@ -1225,41 +1277,43 @@ var mergeTransform = /* @__PURE__ */ __name((obj, key, val) => {
 }, "mergeTransform");
 
 // src/hooks/useFeatures.tsx
-var import_react11 = __toModule(require("react"));
-var createDefinition = /* @__PURE__ */ __name(({ Component, propNames }) => ({
+var import_react10 = __toModule(require("react"));
+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({
+var featureDefinitions = null;
+var useFeatures = /* @__PURE__ */ __name((props, utils) => {
+  if (!featureDefinitions) {
+    featureDefinitions = loadFeatures();
+  }
+  const features = [];
+  for (const name in featureDefinitions) {
+    const { isEnabled, Component } = featureDefinitions[name];
+    if (isEnabled(props) && Component) {
+      features.push(/* @__PURE__ */ import_react10.default.createElement(Component, __spreadProps(__spreadValues({
+        key: name
+      }, props), {
+        _utils: 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) => {
-      if (isWeb) {
-        return;
-      }
-      const keys = mediaQueryPropNames.flatMap((x) => x in props ? x.slice(1) : []);
+      const keys = mediaPropNames.flatMap((x) => x in props ? x.slice(1) : []);
       useIsomorphicLayoutEffect(() => {
         for (const key of keys) {
           addMediaQueryListener(key, props._utils.forceUpdate);
@@ -1272,26 +1326,10 @@ var featureDefinitions = {
       }, [keys.join(",")]);
       return null;
     },
-    propNames: mediaQueryPropNames
-  })
-};
-var featureNames = Object.keys(featureDefinitions);
-var numFeatures = featureNames.length;
-var useFeatures = /* @__PURE__ */ __name((props, utils) => {
-  const features = [];
-  for (let i = 0; i < numFeatures; i++) {
-    const name = featureNames[i];
-    const { isEnabled, Component } = featureDefinitions[name];
-    if (isEnabled(props) && Component) {
-      features.push(/* @__PURE__ */ import_react11.default.createElement(Component, __spreadProps(__spreadValues({
-        key: name
-      }, props), {
-        _utils: utils
-      })));
-    }
-  }
-  return features;
-}, "useFeatures");
+    propNames: mediaPropNames
+  });
+}
+__name(loadMediaQueryFeature, "loadMediaQueryFeature");
 
 // src/hooks/usePressable.tsx
 var import_react_native2 = __toModule(require("react-native"));
@@ -1325,9 +1363,41 @@ function createComponent(configIn) {
   let defaultsStyle;
   let defaultsClassName = "";
   let initialTheme;
-  const component = (0, import_react12.forwardRef)((props, forwardedRef) => {
-    var _a4;
+  const component = (0, import_react11.forwardRef)((props, forwardedRef) => {
+    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,
@@ -1360,34 +1430,52 @@ function createComponent(configIn) {
       onStartShouldSetResponderCapture,
       onMouseDown,
       onClick,
+      accessible,
+      accessibilityRole,
       onLayout
-    } = props;
-    const forceUpdate = useForceUpdate();
-    const features = useFeatures(props, { forceUpdate });
-    const manager = (0, import_react12.useContext)(ThemeManagerContext);
-    const [state, set_] = (0, import_react12.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_react12.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_react12.useContext)(TextAncestorContext) : false;
-    const hostRef = (0, import_react12.useRef)(null);
     if (isWeb) {
       rnw.useResponderEvents(hostRef, {
         onMoveShouldSetResponder,
@@ -1408,15 +1496,14 @@ function createComponent(configIn) {
         onStartShouldSetResponderCapture
       });
     }
-    const isTracking = (0, import_react12.useRef)(false);
-    const { viewProps, pseudos: pseudos2, style, classNames } = getSplitStyles(props, staticConfig, manager.theme || initialTheme);
-    const internal = (0, import_react12.useRef)();
+    const isTracking = (0, import_react11.useRef)(false);
+    const internal = (0, import_react11.useRef)();
     if (!internal.current) {
       internal.current = {
         isMounted: true
       };
     }
-    (0, import_react12.useEffect)(() => {
+    (0, import_react11.useEffect)(() => {
       internal.current.isMounted = true;
       const dispose = manager == null ? void 0 : manager.onChangeTheme((name) => {
         if (isTracking.current) {
@@ -1489,7 +1576,7 @@ function createComponent(configIn) {
     if (shouldAttach) {
       internal.current.hasEverHadEvents = true;
     }
-    const unPress = (0, import_react12.useCallback)(() => {
+    const unPress = (0, import_react11.useCallback)(() => {
       if (!internal.current.isMounted)
         return;
       set({
@@ -1575,27 +1662,27 @@ 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 = (0, import_react12.createElement)(ViewComponent, viewProps, childEls);
+      content = (0, import_react11.createElement)(ViewComponent, viewProps, childEls);
     } else {
-      content = (0, import_react12.createElement)(ViewComponent, viewProps, childEls);
+      content = (0, import_react11.createElement)(ViewComponent, viewProps, childEls);
     }
     const shouldWrapTextAncestor = isWeb && isText && !hasTextAncestor;
     if (shouldWrapTextAncestor) {
-      content = (0, import_react12.createElement)(TextAncestorContext.Provider, { value: true }, content);
+      content = (0, import_react11.createElement)(TextAncestorContext.Provider, { value: true }, content);
     }
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
         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 });
         }
       }
     }
-    return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, features, content);
+    return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, features, content);
   });
   onConfiguredOnce((conf3) => {
     var _a4;
@@ -1610,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);
@@ -1669,7 +1756,7 @@ function spacedChildren({
   if (!space && !isZStack) {
     return children;
   }
-  const childrenList = import_react12.Children.toArray(children);
+  const childrenList = import_react11.Children.toArray(children);
   const len = childrenList.length;
   if (len === 1) {
     return children;
@@ -1680,15 +1767,15 @@ function spacedChildren({
       continue;
     }
     const key = `${(child == null ? void 0 : child["key"]) ?? index}`;
-    next.push(/* @__PURE__ */ import_react12.default.createElement(import_react12.Fragment, {
+    next.push(/* @__PURE__ */ import_react11.default.createElement(import_react11.Fragment, {
       key
-    }, isZStack ? /* @__PURE__ */ import_react12.default.createElement(Absolute, null, child) : child));
+    }, isZStack ? /* @__PURE__ */ import_react11.default.createElement(Absolute, null, child) : child));
     if ((_a4 = child == null ? void 0 : child["type"]) == null ? void 0 : _a4["isVisuallyHidden"]) {
       continue;
     }
     if (index !== len - 1) {
       if (space) {
-        next.push(/* @__PURE__ */ import_react12.default.createElement(Spacer, {
+        next.push(/* @__PURE__ */ import_react11.default.createElement(Spacer, {
           key: `${key}_spacer`,
           direction: flexDirection === "row" || flexDirection === "row-reverse" ? "horizontal" : "vertical",
           size: space
@@ -1699,7 +1786,7 @@ function spacedChildren({
   return next;
 }
 __name(spacedChildren, "spacedChildren");
-var Absolute = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ import_react12.default.createElement(import_react_native3.View, {
+var Absolute = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ import_react11.default.createElement(import_react_native3.View, {
   style: sheet.fullscreen
 }, children), "Absolute");
 var sheet = import_react_native3.StyleSheet.create({
@@ -1735,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")
@@ -1755,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");
@@ -1792,13 +1885,14 @@ function styled(Component, options, staticExtractionOptions) {
 __name(styled, "styled");
 
 // src/helpers/themeable.tsx
-var import_react15 = __toModule(require("react"));
+var import_react14 = __toModule(require("react"));
 
 // src/views/ThemeInverse.tsx
-var import_react14 = __toModule(require("react"));
+var import_react13 = __toModule(require("react"));
 
 // src/hooks/useTheme.tsx
-var import_react13 = __toModule(require("react"));
+var import_use_force_update3 = __toModule(require("@tamagui/use-force-update"));
+var import_react12 = __toModule(require("react"));
 var areEqualSets = /* @__PURE__ */ __name((a, b) => {
   if (a.size !== b.size)
     return false;
@@ -1810,9 +1904,9 @@ var areEqualSets = /* @__PURE__ */ __name((a, b) => {
   return true;
 }, "areEqualSets");
 var useThemeName = /* @__PURE__ */ __name(() => {
-  const parent = (0, import_react13.useContext)(ThemeManagerContext);
-  const [name, setName] = (0, import_react13.useState)(parent.name);
-  (0, import_react13.useEffect)(() => {
+  const parent = (0, import_react12.useContext)(ThemeManagerContext);
+  const [name, setName] = (0, import_react12.useState)(parent.name);
+  (0, import_react12.useEffect)(() => {
     return parent.onChangeTheme((next) => {
       setName((prev) => {
         if (prev === next)
@@ -1824,13 +1918,13 @@ var useThemeName = /* @__PURE__ */ __name(() => {
   return name || "light";
 }, "useThemeName");
 var useDefaultThemeName = /* @__PURE__ */ __name(() => {
-  return (0, import_react13.useContext)(ThemeContext)[GET_DEFAULT_THEME];
+  return (0, import_react12.useContext)(ThemeContext)[GET_DEFAULT_THEME];
 }, "useDefaultThemeName");
 var useTheme = /* @__PURE__ */ __name(() => {
-  const forceUpdate = useForceUpdate();
-  const manager = (0, import_react13.useContext)(ThemeManagerContext);
-  const themes = (0, import_react13.useContext)(ThemeContext);
-  const state = (0, import_react13.useRef)();
+  const forceUpdate = (0, import_use_force_update3.useForceUpdate)();
+  const manager = (0, import_react12.useContext)(ThemeManagerContext);
+  const themes = (0, import_react12.useContext)(ThemeContext);
+  const state = (0, import_react12.useRef)();
   if (!state.current) {
     state.current = {
       uuid: {},
@@ -1847,11 +1941,11 @@ var useTheme = /* @__PURE__ */ __name(() => {
       manager.track(st.uuid, st.keys);
     }
   });
-  (0, import_react13.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     return manager.onUpdate(state.current.uuid, forceUpdate);
   }, []);
   const theme = (manager.name ? themes[manager.name] : themes.light) ?? themes.light;
-  return (0, import_react13.useMemo)(() => {
+  return (0, import_react12.useMemo)(() => {
     return new Proxy(theme, {
       get(_, key) {
         const name = manager.name;
@@ -1891,22 +1985,21 @@ 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_react14.default.createElement(Theme, {
+  return /* @__PURE__ */ import_react13.default.createElement(Theme, {
     name
   }, props.children);
 }, "ThemeInverse");
 
 // src/helpers/themeable.tsx
 var themeable = /* @__PURE__ */ __name(function graphql(component) {
-  const withThemeComponent = (0, import_react15.forwardRef)(/* @__PURE__ */ __name(function WithTheme(_a4, ref) {
+  const withThemeComponent = (0, import_react14.forwardRef)(/* @__PURE__ */ __name(function WithTheme(_a4, ref) {
     var _b2 = _a4, { themeInverse } = _b2, rest = __objRest(_b2, ["themeInverse"]);
-    const el = import_react15.default.createElement(component, __spreadProps(__spreadValues({}, rest), { ref }));
+    const el = import_react14.default.createElement(component, __spreadProps(__spreadValues({}, rest), { ref }));
     if (themeInverse) {
-      return /* @__PURE__ */ import_react15.default.createElement(ThemeInverse, null, el);
+      return /* @__PURE__ */ import_react14.default.createElement(ThemeInverse, null, el);
     }
     if (rest.theme) {
-      return /* @__PURE__ */ import_react15.default.createElement(Theme, {
+      return /* @__PURE__ */ import_react14.default.createElement(Theme, {
         name: rest.theme || null
       }, el);
     }
@@ -1917,6 +2010,13 @@ var themeable = /* @__PURE__ */ __name(function graphql(component) {
   return withTheme;
 }, "graphql");
 
+// 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"));
@@ -2099,27 +2199,4 @@ var Text2 = createComponent({
     cursor: true
   })
 });
-
-// src/views/SafeAreaProvider.tsx
-var import_react17 = __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_react17.default.createElement(import_react_native_safe_area_context.SafeAreaProvider, {
-    initialMetrics: initialWindowMetrics ?? defaultMetrics
-  }, children);
-}, "SafeAreaProvider");
 //# sourceMappingURL=index.cjs.map