@tamagui/core 1.0.0-alpha.2 → 1.0.0-alpha.20

package/{_ → dist/jsx}/helpers/themeable.js

@@ -7,20 +7,17 @@ const themeable = /* @__PURE__ */ __name(function graphql(component) {
   const withThemeComponent = forwardRef(/* @__PURE__ */ __name(function WithTheme({ themeInverse, ...rest }, ref) {
     const el = React.createElement(component, { ...rest, ref });
     if (themeInverse) {
-      return /* @__PURE__ */ React.createElement(ThemeInverse, null, el);
+      return <ThemeInverse>{el}</ThemeInverse>;
     }
     if (rest.theme) {
-      return /* @__PURE__ */ React.createElement(Theme, {
-        name: rest.theme || null
-      }, el);
+      return <Theme name={rest.theme || null}>{el}</Theme>;
     }
     return el;
   }, "WithTheme"));
   const withTheme = withThemeComponent;
-  withTheme.displayName = `Themed(${(component == null ? void 0 : component.displayName) || (component == null ? void 0 : component.name) || "Anonymous"})`;
+  withTheme.displayName = `Themed(${component?.displayName || component?.name || "Anonymous"})`;
   return withTheme;
 }, "graphql");
 export {
   themeable
 };
-//# sourceMappingURL=themeable.js.map

package/dist/jsx/helpers/validate.js

@@ -0,0 +1,59 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import ow from "@tamagui/ow";
+const validateConfig = /* @__PURE__ */ __name((conf) => {
+  if (!conf) {
+    console.warn("no conf?");
+    return;
+  }
+  try {
+    ow(conf, validConfig);
+  } catch (err) {
+    console.log("Given config:\n", JSON.stringify(conf, null, 2));
+    throw err;
+  }
+}, "validateConfig");
+const validConfig = ow.object.exactShape({
+  defaultTheme: ow.optional.string,
+  disableRootThemeClass: ow.optional.boolean,
+  shorthands: ow.optional.object.valuesOfType(ow.string),
+  themes: ow.object.valuesOfType(ow.object),
+  tokens: ow.object.valuesOfType(ow.object),
+  media: ow.object.valuesOfType(ow.object)
+});
+const validFont = ow.object.exactShape({
+  family: ow.string,
+  size: ow.object.nonEmpty.valuesOfType(ow.number),
+  lineHeight: ow.object.nonEmpty.valuesOfType(ow.number),
+  weight: ow.object.nonEmpty.valuesOfType(ow.string),
+  letterSpacing: ow.object.nonEmpty.valuesOfType(ow.number)
+});
+const validTokens = ow.object.exactShape({
+  font: ow.object.valuesOfType(validFont),
+  size: ow.object.nonEmpty.valuesOfType(ow.number),
+  space: ow.object.nonEmpty.valuesOfType(ow.number),
+  zIndex: ow.object.nonEmpty.valuesOfType(ow.number),
+  radius: ow.object.nonEmpty.valuesOfType(ow.number),
+  color: ow.object.nonEmpty.valuesOfType(ow.string)
+});
+const validateTokens = /* @__PURE__ */ __name((tokens) => {
+  try {
+    ow(tokens, validTokens);
+  } catch (err) {
+    console.log("Given tokens:\n", JSON.stringify(tokens, null, 2));
+    throw err;
+  }
+}, "validateTokens");
+const validateFont = /* @__PURE__ */ __name((font) => {
+  try {
+    ow(font, validFont);
+  } catch (err) {
+    console.log("Given font:\n", JSON.stringify(font, null, 2));
+    throw err;
+  }
+}, "validateFont");
+export {
+  validateConfig,
+  validateFont,
+  validateTokens
+};

package/dist/{hooks → jsx/hooks}/useConstant.js

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

package/dist/jsx/hooks/useFeatures.js

@@ -0,0 +1,57 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { isWeb, useIsomorphicLayoutEffect } from "../constants/platform";
+import { addMediaQueryListener, mediaState, removeMediaQueryListener } from "./useMedia";
+const createDefinition = /* @__PURE__ */ __name(({
+  Component,
+  propNames
+}) => ({
+  isEnabled: (props) => propNames.some((name) => !!props[name]),
+  Component
+}), "createDefinition");
+let featureDefinitions = null;
+const 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(<Component key={name} {...props} _utils={utils} />);
+    }
+  }
+  return features;
+}, "useFeatures");
+function loadFeatures() {
+  return {
+    ...!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");
+export {
+  useFeatures
+};

package/{_ → dist/jsx}/hooks/useMedia.js

@@ -1,10 +1,10 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useForceUpdate } from "@tamagui/use-force-update";
 import { useRef } from "react";
 import { useIsomorphicLayoutEffect } from "../constants/platform";
 import { matchMedia } from "../helpers/matchMedia";
 import { useConstant } from "./useConstant";
-import { useForceUpdate } from "./useForceUpdate";
 const mediaState = {};
 const mediaQueryListeners = {};
 const addMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
@@ -12,19 +12,21 @@ const addMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
   mediaQueryListeners[key].add(cb);
 }, "addMediaQueryListener");
 const removeMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
-  mediaQueryListeners[key].delete(cb);
+  mediaQueryListeners[key]?.delete(cb);
 }, "removeMediaQueryListener");
 let conf = null;
 const mediaQueryConfig = new Proxy({}, {
   get(target, key) {
     if (!conf) {
-      throw new Error(`Be sure to run configureMedia before accessing mediaQueryConfig`);
+      console.warn("Warning: accessing media query before init");
+      return null;
     }
     return Reflect.get(conf, key);
   },
   ownKeys() {
     if (!conf) {
-      throw new Error(`Be sure to run configureMedia before accessing mediaQueryConfig`);
+      console.warn("Warning: accessing media query before init");
+      return [];
     }
     return Object.keys(conf);
   },
@@ -45,10 +47,8 @@ const configureMedia = /* @__PURE__ */ __name(({
   queries,
   defaultActive = ["sm", "xs"]
 } = {}) => {
-  var _a;
   if (conf) {
     console.warn(`Already configured mediaQueries once (you may have called getMedia() before configureMedia())`);
-    return;
   }
   if (queries) {
     conf = queries;
@@ -68,7 +68,7 @@ const configureMedia = /* @__PURE__ */ __name(({
           return;
         mediaState[key] = next;
         const listeners = mediaQueryListeners[key];
-        if (listeners == null ? void 0 : listeners.size) {
+        if (listeners?.size) {
           for (const cb of [...listeners]) {
             cb();
           }
@@ -76,7 +76,7 @@ const configureMedia = /* @__PURE__ */ __name(({
       });
     } catch (err) {
       console.error("Error running media query", str, err.message, err.stack);
-      const isDefaultActive = (_a = defaultActive == null ? void 0 : defaultActive.includes(key)) != null ? _a : true;
+      const isDefaultActive = defaultActive?.includes(key) ?? true;
       mediaState[key] = isDefaultActive;
     }
   }
@@ -170,4 +170,3 @@ export {
   removeMediaQueryListener,
   useMedia
 };
-//# sourceMappingURL=useMedia.js.map

package/{_ → dist/jsx}/hooks/usePressable.js

@@ -1,8 +1,7 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-var _a, _b;
 import { Pressable } from "react-native";
-const getPressable = (_b = (_a = Pressable) == null ? void 0 : _a["type"]) == null ? void 0 : _b["render"];
+const getPressable = Pressable?.["type"]?.["render"];
 const usePressable = /* @__PURE__ */ __name((props) => {
   const out = getPressable(props);
   const { children, style, ...pressableProps } = out.props;
@@ -11,4 +10,3 @@ const usePressable = /* @__PURE__ */ __name((props) => {
 export {
   usePressable
 };
-//# sourceMappingURL=usePressable.js.map

package/{_ → dist/jsx}/hooks/useTheme.js

@@ -1,12 +1,12 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useForceUpdate } from "@tamagui/use-force-update";
 import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useIsomorphicLayoutEffect } from "../constants/platform";
 import { Variable } from "../createVariable";
 import { ThemeContext } from "../views/ThemeContext";
 import { ThemeManagerContext } from "../views/ThemeManagerContext";
 import { GET_DEFAULT_THEME } from "../views/ThemeProvider";
-import { useForceUpdate } from "./useForceUpdate";
 const areEqualSets = /* @__PURE__ */ __name((a, b) => {
   if (a.size !== b.size)
     return false;
@@ -17,16 +17,12 @@ const areEqualSets = /* @__PURE__ */ __name((a, b) => {
   }
   return true;
 }, "areEqualSets");
-const useThemeName = /* @__PURE__ */ __name(() => {
+const useThemeName = /* @__PURE__ */ __name((opts) => {
   const parent = useContext(ThemeManagerContext);
   const [name, setName] = useState(parent.name);
-  useEffect(() => {
-    return parent.onChangeTheme((next) => {
-      setName((prev) => {
-        if (prev === next)
-          return prev;
-        return next;
-      });
+  useIsomorphicLayoutEffect(() => {
+    return parent.onChangeTheme((next, manager) => {
+      setName(opts?.parent ? manager.parentName : next);
     });
   }, [parent]);
   return name || "light";
@@ -35,7 +31,6 @@ const useDefaultThemeName = /* @__PURE__ */ __name(() => {
   return useContext(ThemeContext)[GET_DEFAULT_THEME];
 }, "useDefaultThemeName");
 const useTheme = /* @__PURE__ */ __name(() => {
-  var _a;
   const forceUpdate = useForceUpdate();
   const manager = useContext(ThemeManagerContext);
   const themes = useContext(ThemeContext);
@@ -59,7 +54,7 @@ const useTheme = /* @__PURE__ */ __name(() => {
   useEffect(() => {
     return manager.onUpdate(state.current.uuid, forceUpdate);
   }, []);
-  const theme = (_a = manager.name ? themes[manager.name] : themes.light) != null ? _a : themes.light;
+  const theme = (manager.name ? themes[manager.name] : themes.light) ?? themes.light;
   return useMemo(() => {
     return new Proxy(theme, {
       get(_, key) {
@@ -75,7 +70,8 @@ const useTheme = /* @__PURE__ */ __name(() => {
         const val = activeTheme[key];
         if (process.env.NODE_ENV === "development") {
           if (typeof val === "undefined") {
-            throw new Error(`No theme value "${String(key)}" in: ${Object.keys(activeTheme)}`);
+            console.warn(`No theme value "${String(key)}" in: ${Object.keys(activeTheme)}`);
+            return null;
           }
         }
         if (state.current.isRendering) {
@@ -91,4 +87,3 @@ export {
   useTheme,
   useThemeName
 };
-//# sourceMappingURL=useTheme.js.map

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

@@ -2,6 +2,7 @@ export * from "./createComponent";
 export * from "./createShorthands";
 export * from "./createTheme";
 export * from "./createTamagui";
+export * from "./createFont";
 import { createTokens } from "./createTokens";
 export * from "./createVariable";
 export * from "./styled";
@@ -10,11 +11,12 @@ export * from "./constants/pseudos";
 export * from "./constants/constants";
 export * from "./constants/platform";
 export * from "./constants/rnw";
+export * from "./helpers/isObj";
 export * from "./helpers/getStylesAtomic";
 export * from "./helpers/matchMedia";
 export * from "./helpers/themeable";
+export * from "./helpers/isTamaguiElement";
 export * from "./hooks/useConstant";
-export * from "./hooks/useForceUpdate";
 export * from "./hooks/useMedia";
 export * from "./hooks/useTheme";
 export * from "./views/Animated";
@@ -27,4 +29,3 @@ export * from "./views/TextAncestorContext";
 export {
   createTokens
 };
-//# sourceMappingURL=index.js.map

package/dist/{static → jsx/static}/postProcessStyles.js

@@ -15,4 +15,3 @@ const postProcessStyles = /* @__PURE__ */ __name((inStyles, staticConfig, theme)
 export {
   postProcessStyles
 };
-//# sourceMappingURL=postProcessStyles.js.map

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

@@ -1,12 +1,14 @@
 export * from "./styled";
 export * from "./createComponent";
+export * from "./createFont";
+export * from "./createTokens";
 export * from "./createTamagui";
 export * from "./constants/constants";
 export * from "./hooks/useMedia";
 export * from "./hooks/useTheme";
+export * from "./helpers/isObj";
 export * from "./helpers/getStylesAtomic";
 export * from "./helpers/getSplitStyles";
 export * from "@tamagui/helpers";
 export * from "./constants/pseudos";
 export * from "./static/postProcessStyles";
-//# sourceMappingURL=static.js.map

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

@@ -2,11 +2,11 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { createComponent } from "./createComponent";
 import { extendStaticConfig } from "./helpers/extendStaticConfig";
-function styled(Component, options) {
+function styled(Component, options, staticExtractionOptions) {
   const staticConfigProps = (() => {
     if (options) {
       const { variants, ...defaultProps } = options;
-      return { variants, defaultProps };
+      return { ...staticExtractionOptions, variants, defaultProps };
     }
     return {};
   })();
@@ -18,4 +18,3 @@ __name(styled, "styled");
 export {
   styled
 };
-//# sourceMappingURL=styled.js.map

package/dist/{views → jsx/views}/Animated.js

@@ -1,6 +1,6 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import {
   Animated
 } from "react-native";
@@ -67,13 +67,8 @@ const AnimatedStack = /* @__PURE__ */ __name(({
     }).start();
   }, [animated, animateState]);
   const childrenMemo = useMemo(() => children, [children]);
-  return /* @__PURE__ */ React.createElement(Stack, {
-    animated,
-    ...props,
-    ...animatedProps
-  }, childrenMemo);
+  return <Stack animated={animated} {...props} {...animatedProps}>{childrenMemo}</Stack>;
 }, "AnimatedStack");
 export {
   AnimatedStack
 };
-//# sourceMappingURL=Animated.js.map

package/dist/{views → jsx/views}/Stack.js

@@ -9,4 +9,3 @@ const Stack = createComponent({
 export {
   Stack
 };
-//# sourceMappingURL=Stack.js.map

package/{_ → dist/jsx}/views/Text.js

@@ -1,6 +1,6 @@
+import { stylePropsTextOnly, validStyles } from "@tamagui/helpers";
 import { isWeb } from "../constants/platform";
 import { createComponent } from "../createComponent";
-import { stylePropsTextOnly, validStyles } from "../static";
 const ellipseStyle = {
   maxWidth: "100%",
   overflow: "hidden",
@@ -57,4 +57,3 @@ const Text = createComponent({
 export {
   Text
 };
-//# sourceMappingURL=Text.js.map

package/dist/{views → jsx/views}/TextAncestorContext.js

@@ -1,18 +1,14 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import React from "react";
+import { createContext } from "react";
 import { rnw } from "../constants/rnw";
-const TextAncestorContext = rnw?.TextAncestorContext;
+const FallbackNativeContext = createContext(false);
+const TextAncestorContext = rnw?.TextAncestorContext ?? FallbackNativeContext;
 const TextAncestorProvider = /* @__PURE__ */ __name((props) => {
-  if (TextAncestorContext) {
-    return /* @__PURE__ */ React.createElement(TextAncestorContext.Provider, {
-      value: false
-    }, props.children);
-  }
-  return props.children;
+  return <TextAncestorContext.Provider value={false}>{props.children}</TextAncestorContext.Provider>;
 }, "TextAncestorProvider");
 export {
+  FallbackNativeContext,
   TextAncestorContext,
   TextAncestorProvider
 };
-//# sourceMappingURL=TextAncestorContext.js.map

package/dist/jsx/views/Theme.js

@@ -0,0 +1,62 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useContext, useState } from "react";
+import { isWeb, useIsomorphicLayoutEffect } from "../constants/platform";
+import { getThemeParentClassName } from "../createTamagui";
+import { useConstant } from "../hooks/useConstant";
+import { ThemeContext } from "./ThemeContext";
+import { ThemeManager, ThemeManagerContext } from "./ThemeManagerContext";
+const Theme = /* @__PURE__ */ __name((props) => {
+  const parent = useContext(ThemeManagerContext);
+  const themes = useContext(ThemeContext);
+  const [parentName, setParentName] = useState(parent.name || "light");
+  if (!themes) {
+    console.warn("Error, no themes in context", props);
+    return props.children;
+  }
+  const nextNameParent = `${props.name}-${parentName}`;
+  const nextNameParentParent = `${props.name}-${parent.parentName}`;
+  const name = !props.name ? null : props.name in themes ? props.name : nextNameParent in themes ? nextNameParent : nextNameParentParent in themes ? nextNameParentParent : null;
+  const theme = name ? themes[name] : null;
+  const themeManager = useConstant(() => {
+    if (!theme) {
+      return null;
+    }
+    const manager = new ThemeManager();
+    if (name) {
+      manager.setActiveTheme({ name, theme: themes[name], parentName });
+    }
+    return manager;
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (!themeManager) {
+      return;
+    }
+    if (name) {
+      themeManager.setActiveTheme({ name, theme, parentName });
+    }
+    return parent.onChangeTheme((next) => {
+      if (next) {
+        themeManager.setActiveTheme({ name: next, theme: themes[next], parentName });
+        setParentName(next);
+      }
+    });
+  }, [themes, name, parentName]);
+  if (!name || !theme) {
+    return props.children;
+  }
+  const contents = themeManager ? <ThemeManagerContext.Provider value={themeManager}>{props.children}</ThemeManagerContext.Provider> : props.children;
+  if (isWeb) {
+    if (props.disableThemeClass) {
+      return contents;
+    }
+    if (name) {
+      const color = themes[name]?.["color"]?.["variable"];
+      return <div className={getThemeParentClassName(props.name)} style={{ display: "contents", color }}>{contents}</div>;
+    }
+  }
+  return contents;
+}, "Theme");
+export {
+  Theme
+};

package/dist/{views → jsx/views}/ThemeContext.js

@@ -3,4 +3,3 @@ const ThemeContext = createContext(null);
 export {
   ThemeContext
 };
-//# sourceMappingURL=ThemeContext.js.map

package/dist/{views → jsx/views}/ThemeInverse.js

@@ -1,6 +1,5 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import React from "react";
 import { useDefaultThemeName, useThemeName } from "../hooks/useTheme";
 import { Theme } from "./Theme";
 let inversions = {
@@ -15,13 +14,9 @@ const 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__ */ React.createElement(Theme, {
-    name
-  }, props.children);
+  return <Theme name={name}>{props.children}</Theme>;
 }, "ThemeInverse");
 export {
   ThemeInverse,
   setThemeInversions
 };
-//# sourceMappingURL=ThemeInverse.js.map

package/{_ → dist/jsx}/views/ThemeManagerContext.js

@@ -4,16 +4,22 @@ import { createContext } from "react";
 class ThemeManager {
   constructor() {
     this.name = "light";
+    this.parentName = null;
     this.keys = new Map();
     this.listeners = new Map();
-    this.callbacks = new Set();
+    this.themeListeners = 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) {
@@ -22,21 +28,20 @@ class ThemeManager {
     this.keys.set(uuid, keys);
   }
   update() {
-    var _a;
     if (!this.name) {
       this.keys.clear();
     }
     for (const [uuid, keys] of this.keys.entries()) {
       if (keys.size) {
-        (_a = this.listeners.get(uuid)) == null ? void 0 : _a();
+        this.listeners.get(uuid)?.();
       }
     }
-    this.callbacks.forEach((cb) => cb(this.name));
+    this.themeListeners.forEach((cb) => cb(this.name, this));
   }
   onChangeTheme(cb) {
-    this.callbacks.add(cb);
+    this.themeListeners.add(cb);
     return () => {
-      this.callbacks.delete(cb);
+      this.themeListeners.delete(cb);
     };
   }
   onUpdate(uuid, cb) {
@@ -53,4 +58,3 @@ export {
   ThemeManager,
   ThemeManagerContext
 };
-//# sourceMappingURL=ThemeManagerContext.js.map

package/dist/{views → jsx/views}/ThemeProvider.js

@@ -1,6 +1,6 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { useIsomorphicLayoutEffect } from "../constants/platform";
 import { getHasConfigured, getThemeParentClassName } from "../createTamagui";
 import { Theme } from "./Theme";
@@ -31,15 +31,9 @@ const ThemeProvider = /* @__PURE__ */ __name((props) => {
       }
     });
   }, [props.themes]);
-  return /* @__PURE__ */ React.createElement(ThemeContext.Provider, {
-    value: themeContext
-  }, /* @__PURE__ */ React.createElement(Theme, {
-    name: props.defaultTheme,
-    disableThemeClass: props.disableRootThemeClass
-  }, props.children));
+  return <ThemeContext.Provider value={themeContext}><Theme name={props.defaultTheme} disableThemeClass={props.disableRootThemeClass}>{props.children}</Theme></ThemeContext.Provider>;
 }, "ThemeProvider");
 export {
   GET_DEFAULT_THEME,
   ThemeProvider
 };
-//# sourceMappingURL=ThemeProvider.js.map

package/package.json

@@ -1,27 +1,35 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.20",
   "source": "src/index.ts",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "typings": "types.d.ts",
+  "main": "dist/cjs",
+  "module": "dist",
+  "typings": "types",
   "scripts": {
     "build": "tamagui-build",
     "watch": "tamagui-build --watch"
   },
+  "files": [
+    "types",
+    "dist",
+    "src"
+  ],
   "dependencies": {
-    "@tamagui/helpers": "^1.0.0-alpha.2",
+    "@tamagui/helpers": "^1.0.0-alpha.17",
+    "@tamagui/ow": "^0.28.1",
+    "@tamagui/use-debounce": "^1.0.0-alpha.18",
+    "@tamagui/use-force-update": "^1.0.0-alpha.18",
     "react": "*",
-    "react-dom": "*",
-    "react-native-safe-area-context": "^3.3.0"
+    "react-dom": "*"
   },
   "peerDependencies": {
     "react-native-web": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.0-alpha.2",
+    "@tamagui/build": "^1.0.0-alpha.17",
     "@types/react": "^17.0.35",
-    "esbuild": "^0.11.20",
+    "esbuild": "^0.13.12",
+    "react-native-web": "^0.17.5",
     "typescript": "^4.4.4"
   },
   "publishConfig": {
@@ -30,5 +38,5 @@
   "engines": {
     "node": ">=16"
   },
-  "gitHead": "a9f30fdf4ebd448961a6e133741cd4b903185559"
+  "gitHead": "ddc994b04b098548fc81daf8933aea60de20101c"
 }