@tamagui/core 1.0.0-alpha.1 → 1.0.0-alpha.6

package/dist/index.js

@@ -15,8 +15,8 @@ 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";
@@ -26,7 +26,6 @@ export * from "./views/Theme";
 export * from "./views/ThemeInverse";
 export * from "./views/ThemeProvider";
 export * from "./views/TextAncestorContext";
-export * from "./views/SafeAreaProvider";
 export {
   createTokens
 };

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["export * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport * from './createFont'\nexport { createTokens } from './createTokens'\nexport * from './createVariable'\nexport * from './styled'\nexport * from './types'\n\nexport * from './constants/pseudos'\nexport * from './constants/constants'\nexport * from './constants/platform'\nexport * from './constants/rnw'\n\nexport * from './helpers/isObj'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/matchMedia'\nexport * from './helpers/themeable'\n\nexport * from './hooks/useConstant'\nexport * from './hooks/useForceUpdate'\nexport * from './hooks/useMedia'\nexport * from './hooks/useTheme'\n\nexport * from './views/Animated'\nexport * from './views/Stack'\nexport * from './views/Text'\nexport * from './views/Theme'\nexport * from './views/ThemeInverse'\nexport * from './views/ThemeProvider'\nexport * from './views/TextAncestorContext'\nexport * from './views/SafeAreaProvider'\n"],
-  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;",
+  "sourcesContent": ["export * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport * from './createFont'\nexport { createTokens } from './createTokens'\nexport * from './createVariable'\nexport * from './styled'\nexport * from './types'\n\nexport * from './constants/pseudos'\nexport * from './constants/constants'\nexport * from './constants/platform'\nexport * from './constants/rnw'\n\nexport * from './helpers/isObj'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/matchMedia'\nexport * from './helpers/themeable'\nexport * from './helpers/isTamaguiElement'\n\nexport * from './hooks/useConstant'\nexport * from './hooks/useMedia'\nexport * from './hooks/useTheme'\n\nexport * from './views/Animated'\nexport * from './views/Stack'\nexport * from './views/Text'\nexport * from './views/Theme'\nexport * from './views/ThemeInverse'\nexport * from './views/ThemeProvider'\nexport * from './views/TextAncestorContext'\n"],
+  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;",
   "names": []
 }

package/dist/views/Theme.js

@@ -15,8 +15,12 @@ const Theme = /* @__PURE__ */ __name((props) => {
     return props.children;
   }
   const name = props.name;
-  const theme = themes[name] || themes[`${name}-${parentName}`];
+  const activeName = !name ? null : name in themes ? name : `${name}-${parentName}`;
+  const theme = activeName ? themes[activeName] : null;
   const themeManager = useConstant(() => {
+    if (!theme) {
+      return null;
+    }
     const manager = new ThemeManager();
     if (name) {
       manager.setActiveTheme(name, themes[name]);
@@ -24,15 +28,18 @@ const Theme = /* @__PURE__ */ __name((props) => {
     return manager;
   });
   useIsomorphicLayoutEffect(() => {
-    themeManager.setActiveTheme(name, theme);
+    if (!themeManager) {
+      return;
+    }
+    themeManager.setActiveTheme(activeName, theme);
     return parent.onChangeTheme((next) => {
       if (next) {
         themeManager.setActiveTheme(next, themes[next]);
         setParentName(next);
       }
     });
-  }, [themes, name]);
-  if (!name) {
+  }, [themes, activeName]);
+  if (!name || !theme) {
     return props.children;
   }
   const contents = themeManager ? /* @__PURE__ */ React.createElement(ThemeManagerContext.Provider, {

package/dist/views/Theme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/views/Theme.tsx"],
-  "sourcesContent": ["import React, { useContext, useState } from 'react'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getThemeParentClassName } from '../createTamagui'\nimport { useConstant } from '../hooks/useConstant'\nimport { ThemeName, Themes } from '../types'\nimport { ThemeContext } from './ThemeContext'\nimport { ThemeManager, ThemeManagerContext } from './ThemeManagerContext'\n\nexport type ThemeProps = {\n  disableThemeClass?: boolean\n  name: ThemeName | null\n  children?: any\n}\n\nexport const Theme = (props: ThemeProps) => {\n  const parent = useContext(ThemeManagerContext)\n  const themes = useContext(ThemeContext)\n  const [parentName, setParentName] = useState(parent.name || 'light')\n  if (!themes) {\n    console.warn('no themes???', props)\n    return props.children\n  }\n  const name = props.name as string\n  const theme = themes[name] || themes[`${name}-${parentName}`]\n  const themeManager = useConstant<ThemeManager>(() => {\n    const manager = new ThemeManager()\n    if (name) {\n      manager.setActiveTheme(name, themes[name])\n    }\n    return manager\n  })\n\n  useIsomorphicLayoutEffect(() => {\n    themeManager.setActiveTheme(name, theme)\n    return parent.onChangeTheme((next) => {\n      if (next) {\n        themeManager.setActiveTheme(next, themes[next])\n        setParentName(next)\n      }\n    })\n  }, [themes, name])\n\n  if (!name) {\n    return props.children\n  }\n\n  const contents = themeManager ? (\n    <ThemeManagerContext.Provider value={themeManager}>\n      {props.children}\n    </ThemeManagerContext.Provider>\n  ) : (\n    props.children\n  )\n\n  if (isWeb) {\n    if (props.disableThemeClass) {\n      return contents\n    }\n    const color = themes[name]?.['color']?.['variable']\n    return (\n      <div\n        className={getThemeParentClassName(name)}\n        // in order to provide currentColor, set color by default\n        style={{ display: 'contents', color }}\n      >\n        {contents}\n      </div>\n    )\n  }\n\n  return contents\n}\n"],
-  "mappings": ";;AAAA;AAEA;AACA;AACA;AAEA;AACA;AAQO,MAAM,QAAQ,wBAAC,UAAsB;AAC1C,QAAM,SAAS,WAAW;AAC1B,QAAM,SAAS,WAAW;AAC1B,QAAM,CAAC,YAAY,iBAAiB,SAAS,OAAO,QAAQ;AAC5D,MAAI,CAAC,QAAQ;AACX,YAAQ,KAAK,gBAAgB;AAC7B,WAAO,MAAM;AAAA;AAEf,QAAM,OAAO,MAAM;AACnB,QAAM,QAAQ,OAAO,SAAS,OAAO,GAAG,QAAQ;AAChD,QAAM,eAAe,YAA0B,MAAM;AACnD,UAAM,UAAU,IAAI;AACpB,QAAI,MAAM;AACR,cAAQ,eAAe,MAAM,OAAO;AAAA;AAEtC,WAAO;AAAA;AAGT,4BAA0B,MAAM;AAC9B,iBAAa,eAAe,MAAM;AAClC,WAAO,OAAO,cAAc,CAAC,SAAS;AACpC,UAAI,MAAM;AACR,qBAAa,eAAe,MAAM,OAAO;AACzC,sBAAc;AAAA;AAAA;AAAA,KAGjB,CAAC,QAAQ;AAEZ,MAAI,CAAC,MAAM;AACT,WAAO,MAAM;AAAA;AAGf,QAAM,WAAW,eACf,oCAAC,oBAAoB,UAArB;AAAA,IAA8B,OAAO;AAAA,KAClC,MAAM,YAGT,MAAM;AAGR,MAAI,OAAO;AACT,QAAI,MAAM,mBAAmB;AAC3B,aAAO;AAAA;AAET,UAAM,QAAQ,OAAO,QAAQ,WAAW;AACxC,WACE,oCAAC,OAAD;AAAA,MACE,WAAW,wBAAwB;AAAA,MAEnC,OAAO,EAAE,SAAS,YAAY;AAAA,OAE7B;AAAA;AAKP,SAAO;AAAA,GAxDY;",
+  "sourcesContent": ["import React, { useContext, useState } from 'react'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getThemeParentClassName } from '../createTamagui'\nimport { useConstant } from '../hooks/useConstant'\nimport { ThemeName, Themes } from '../types'\nimport { ThemeContext } from './ThemeContext'\nimport { ThemeManager, ThemeManagerContext } from './ThemeManagerContext'\n\nexport type ThemeProps = {\n  disableThemeClass?: boolean\n  name: ThemeName | null\n  children?: any\n}\n\nexport const Theme = (props: ThemeProps) => {\n  const parent = useContext(ThemeManagerContext)\n  const themes = useContext(ThemeContext)\n  const [parentName, setParentName] = useState(parent.name || 'light')\n  if (!themes) {\n    console.warn('no themes???', props)\n    return props.children\n  }\n  const name = props.name as string\n  const activeName = !name ? null : name in themes ? name : `${name}-${parentName}`\n  const theme = activeName ? themes[activeName] : null\n  const themeManager = useConstant<ThemeManager | null>(() => {\n    if (!theme) {\n      return null\n    }\n    const manager = new ThemeManager()\n    if (name) {\n      manager.setActiveTheme(name, themes[name])\n    }\n    return manager\n  })\n\n  useIsomorphicLayoutEffect(() => {\n    if (!themeManager) {\n      return\n    }\n    themeManager.setActiveTheme(activeName, theme)\n    return parent.onChangeTheme((next) => {\n      if (next) {\n        themeManager.setActiveTheme(next, themes[next])\n        setParentName(next)\n      }\n    })\n  }, [themes, activeName])\n\n  if (!name || !theme) {\n    return props.children\n  }\n\n  const contents = themeManager ? (\n    <ThemeManagerContext.Provider value={themeManager}>\n      {props.children}\n    </ThemeManagerContext.Provider>\n  ) : (\n    props.children\n  )\n\n  if (isWeb) {\n    if (props.disableThemeClass) {\n      return contents\n    }\n    const color = themes[name]?.['color']?.['variable']\n    return (\n      <div\n        className={getThemeParentClassName(name)}\n        // in order to provide currentColor, set color by default\n        style={{ display: 'contents', color }}\n      >\n        {contents}\n      </div>\n    )\n  }\n\n  return contents\n}\n"],
+  "mappings": ";;AAAA;AAEA;AACA;AACA;AAEA;AACA;AAQO,MAAM,QAAQ,wBAAC,UAAsB;AAC1C,QAAM,SAAS,WAAW;AAC1B,QAAM,SAAS,WAAW;AAC1B,QAAM,CAAC,YAAY,iBAAiB,SAAS,OAAO,QAAQ;AAC5D,MAAI,CAAC,QAAQ;AACX,YAAQ,KAAK,gBAAgB;AAC7B,WAAO,MAAM;AAAA;AAEf,QAAM,OAAO,MAAM;AACnB,QAAM,aAAa,CAAC,OAAO,OAAO,QAAQ,SAAS,OAAO,GAAG,QAAQ;AACrE,QAAM,QAAQ,aAAa,OAAO,cAAc;AAChD,QAAM,eAAe,YAAiC,MAAM;AAC1D,QAAI,CAAC,OAAO;AACV,aAAO;AAAA;AAET,UAAM,UAAU,IAAI;AACpB,QAAI,MAAM;AACR,cAAQ,eAAe,MAAM,OAAO;AAAA;AAEtC,WAAO;AAAA;AAGT,4BAA0B,MAAM;AAC9B,QAAI,CAAC,cAAc;AACjB;AAAA;AAEF,iBAAa,eAAe,YAAY;AACxC,WAAO,OAAO,cAAc,CAAC,SAAS;AACpC,UAAI,MAAM;AACR,qBAAa,eAAe,MAAM,OAAO;AACzC,sBAAc;AAAA;AAAA;AAAA,KAGjB,CAAC,QAAQ;AAEZ,MAAI,CAAC,QAAQ,CAAC,OAAO;AACnB,WAAO,MAAM;AAAA;AAGf,QAAM,WAAW,eACf,oCAAC,oBAAoB,UAArB;AAAA,IAA8B,OAAO;AAAA,KAClC,MAAM,YAGT,MAAM;AAGR,MAAI,OAAO;AACT,QAAI,MAAM,mBAAmB;AAC3B,aAAO;AAAA;AAET,UAAM,QAAQ,OAAO,QAAQ,WAAW;AACxC,WACE,oCAAC,OAAD;AAAA,MACE,WAAW,wBAAwB;AAAA,MAEnC,OAAO,EAAE,SAAS,YAAY;AAAA,OAE7B;AAAA;AAKP,SAAO;AAAA,GA/DY;",
   "names": []
 }

package/dist/views/ThemeInverse.js

@@ -15,7 +15,6 @@ 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);

package/dist/views/ThemeInverse.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/views/ThemeInverse.tsx"],
-  "sourcesContent": ["import React from 'react'\n\nimport { useDefaultThemeName, useThemeName } from '../hooks/useTheme'\nimport { Theme } from './Theme'\n\ntype StringRecord = { [key: string]: string }\n\nlet inversions: StringRecord = {\n  light: 'dark',\n  dark: 'light',\n}\n\nexport function setThemeInversions(next: StringRecord) {\n  inversions = next\n}\n\nexport const ThemeInverse = (props: { children: any }) => {\n  const themeName = useThemeName()\n  const defaultTheme = useDefaultThemeName()\n  const name = inversions[themeName] || inversions[defaultTheme] || null\n  console.log('todo fixme invert', { themeName, defaultTheme, next: name })\n  return <Theme name={name}>{props.children}</Theme>\n}\n"],
-  "mappings": ";;AAAA;AAEA;AACA;AAIA,IAAI,aAA2B;AAAA,EAC7B,OAAO;AAAA,EACP,MAAM;AAAA;AAGD,4BAA4B,MAAoB;AACrD,eAAa;AAAA;AADC;AAIT,MAAM,eAAe,wBAAC,UAA6B;AACxD,QAAM,YAAY;AAClB,QAAM,eAAe;AACrB,QAAM,OAAO,WAAW,cAAc,WAAW,iBAAiB;AAClE,UAAQ,IAAI,qBAAqB,EAAE,WAAW,cAAc,MAAM;AAClE,SAAO,oCAAC,OAAD;AAAA,IAAO;AAAA,KAAa,MAAM;AAAA,GALP;",
+  "sourcesContent": ["import React from 'react'\n\nimport { useDefaultThemeName, useThemeName } from '../hooks/useTheme'\nimport { Theme } from './Theme'\n\ntype StringRecord = { [key: string]: string }\n\nlet inversions: StringRecord = {\n  light: 'dark',\n  dark: 'light',\n}\n\nexport function setThemeInversions(next: StringRecord) {\n  inversions = next\n}\n\nexport const ThemeInverse = (props: { children: any }) => {\n  const themeName = useThemeName()\n  const defaultTheme = useDefaultThemeName()\n  const name = inversions[themeName] || inversions[defaultTheme] || null\n  return <Theme name={name}>{props.children}</Theme>\n}\n"],
+  "mappings": ";;AAAA;AAEA;AACA;AAIA,IAAI,aAA2B;AAAA,EAC7B,OAAO;AAAA,EACP,MAAM;AAAA;AAGD,4BAA4B,MAAoB;AACrD,eAAa;AAAA;AADC;AAIT,MAAM,eAAe,wBAAC,UAA6B;AACxD,QAAM,YAAY;AAClB,QAAM,eAAe;AACrB,QAAM,OAAO,WAAW,cAAc,WAAW,iBAAiB;AAClE,SAAO,oCAAC,OAAD;AAAA,IAAO;AAAA,KAAa,MAAM;AAAA,GAJP;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.6",
   "source": "src/index.ts",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -9,17 +9,23 @@
     "build": "tamagui-build",
     "watch": "tamagui-build --watch"
   },
+  "files": [
+    "types.d.ts",
+    "dist",
+    "src"
+  ],
   "dependencies": {
-    "@tamagui/helpers": "^1.0.0-alpha.1",
+    "@tamagui/helpers": "^1.0.0-alpha.5",
+    "@tamagui/use-debounce": "^1.0.0-alpha.6",
+    "@tamagui/use-force-update": "^1.0.0-alpha.5",
     "react": "*",
-    "react-dom": "*",
-    "react-native-safe-area-context": "^3.3.0"
+    "react-dom": "*"
   },
   "peerDependencies": {
     "react-native-web": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.0-alpha.1",
+    "@tamagui/build": "^1.0.0-alpha.2",
     "@types/react": "^17.0.35",
     "esbuild": "^0.11.20",
     "typescript": "^4.4.4"
@@ -29,5 +35,6 @@
   },
   "engines": {
     "node": ">=16"
-  }
+  },
+  "gitHead": "18a942d7a08109c8f5b8692a2adb20c69d56a7e1"
 }

package/src/createComponent.tsx

@@ -1,4 +1,5 @@
 import { concatClassName, stylePropsView } from '@tamagui/helpers'
+import { useForceUpdate } from '@tamagui/use-force-update'
 import React, {
   Children,
   Fragment,
@@ -20,7 +21,6 @@ import { addStylesUsingClassname, useStylesAsClassname } from './helpers/addStyl
 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 {
   SpaceTokens,
@@ -68,6 +68,44 @@ export function createComponent<A extends Object = DefaultProps>(
   // see onConfiguredOnce below which attaches a name then to this component
 
   const component = forwardRef<View, A>((props: any, forwardedRef) => {
+    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 = (next: Partial<typeof state>) =>
+      set_((prev) => {
+        for (const key in next) {
+          if (prev[key] !== next[key]) {
+            return { ...prev, ...next }
+          }
+        }
+        return prev
+      })
+
+    // from react-native-web
+    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, (manager.theme as any) || initialTheme)
+
     const {
       tag,
       hitSlop,
@@ -101,40 +139,19 @@ export function createComponent<A extends Object = DefaultProps>(
       onStartShouldSetResponderCapture,
       onMouseDown,
       onClick,
-      // TODO feature load layou hook
-      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 = (next: Partial<typeof state>) =>
-      set_((prev) => {
-        for (const key in next) {
-          if (prev[key] !== next[key]) {
-            return { ...prev, ...next }
-          }
-        }
-        return prev
-      })
+      accessible,
+      accessibilityRole,
 
-    // from react-native-web
-    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>.`)
-        }
-      })
-    }
+      // TODO feature load layout hook
+      onLayout,
+      ...viewProps
+    } = viewPropsIn
 
-    const hasTextAncestor = isWeb ? useContext(TextAncestorContext) : false
-    const hostRef = useRef(null)
+    if (!isWeb) {
+      if (accessible) viewProps.accessible = accessible
+      if (accessibilityRole) viewProps.accessibilityRole = accessibilityRole
+    }
 
     if (isWeb) {
       // from react-native-web
@@ -160,12 +177,6 @@ export function createComponent<A extends Object = DefaultProps>(
 
     const isTracking = useRef(false)
 
-    const { viewProps, pseudos, style, classNames } = getSplitStyles(
-      props,
-      staticConfig,
-      (manager.theme as any) || initialTheme
-    )
-
     // hasEverHadEvents prevents repareting if you remove onPress or similar...
     const internal = useRef<{ isMounted: boolean; hasEverHadEvents?: boolean }>()
     if (!internal.current) {
@@ -228,6 +239,7 @@ export function createComponent<A extends Object = DefaultProps>(
           ]
         : [defaultsClassName, props.className, classNames, stylesClassNames]
 
+      // @ts-expect-error
       const className = concatClassName(...classList)
       if (process.env.NODE_ENV === 'development') {
         if (props['debug']) {

package/src/createVariable.ts

@@ -11,6 +11,10 @@ export class Variable {
     this.name = name
     this.variable = isWeb ? `var(--${name})` : this.val
   }
+
+  toString() {
+    return isWeb ? this.variable : this.val
+  }
 }
 
 type VariableIn = { val: string | number; name: string }

package/src/helpers/getSplitStyles.tsx

@@ -28,7 +28,6 @@ export const getSplitStyles = (
   const validStyleProps = staticConfig.isText ? stylePropsText : validStyles
   const viewProps: Record<string, any> = {}
   const style: any[] = []
-  const blacklistProps = isSplittingDefaultProps ? blacklistDefaultProps : blacklistFinalProps
 
   let pseudos: { hoverStyle?: ViewStyle; pressStyle?: ViewStyle } | null = null
   let cur: ViewStyle | null = null
@@ -130,8 +129,9 @@ export const getSplitStyles = (
         cur[key] = val
         continue
       }
-      // TODO this blacklist should be configurable + better set up
-      if (!blacklistProps[key]) {
+
+      // pass to view props
+      if (!staticConfig.variants || !(key in staticConfig.variants)) {
         viewProps[key] = val
       }
     }
@@ -181,19 +181,6 @@ const getSubStyle = (
   return styleOut
 }
 
-const blacklistDefaultProps = {
-  ...validStyles,
-  ...stylePropsText,
-}
-
-const blacklistFinalProps = {
-  ...blacklistDefaultProps,
-  tag: true,
-  debug: true,
-  space: true,
-  hitSlop: true,
-}
-
 const mapTransformKeys = {
   x: 'translateX',
   y: 'translateY',

package/src/helpers/isTamaguiElement.tsx

@@ -0,0 +1,5 @@
+import React, { isValidElement } from 'react'
+
+export const isTamaguiElement = (child: any): child is React.ReactElement => {
+  return isValidElement(child) && !!child.type['staticConfig']?.parsed
+}

package/src/hooks/useMedia.tsx

@@ -1,3 +1,4 @@
+import { useForceUpdate } from '@tamagui/use-force-update'
 import { useRef } from 'react'
 
 import { useIsomorphicLayoutEffect } from '../constants/platform'
@@ -9,7 +10,6 @@ import {
   MediaQueryState,
 } from '../types'
 import { useConstant } from './useConstant'
-import { useForceUpdate } from './useForceUpdate'
 
 export const mediaState: { [key in keyof MediaQueryState]: boolean } = {} as any
 const mediaQueryListeners: { [key: string]: Set<Function> } = {}

package/src/hooks/useTheme.tsx

@@ -1,3 +1,4 @@
+import { useForceUpdate } from '@tamagui/use-force-update'
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
 
 import { useIsomorphicLayoutEffect } from '../constants/platform'
@@ -6,7 +7,6 @@ import { ThemeName } from '../types'
 import { ThemeContext } from '../views/ThemeContext'
 import { ThemeManagerContext } from '../views/ThemeManagerContext'
 import { GET_DEFAULT_THEME } from '../views/ThemeProvider'
-import { useForceUpdate } from './useForceUpdate'
 
 type UseThemeState = {
   uuid: Object

package/src/index.ts

@@ -17,9 +17,9 @@ 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'
 
@@ -30,4 +30,3 @@ export * from './views/Theme'
 export * from './views/ThemeInverse'
 export * from './views/ThemeProvider'
 export * from './views/TextAncestorContext'
-export * from './views/SafeAreaProvider'

package/src/views/Theme.tsx

@@ -22,8 +22,12 @@ export const Theme = (props: ThemeProps) => {
     return props.children
   }
   const name = props.name as string
-  const theme = themes[name] || themes[`${name}-${parentName}`]
-  const themeManager = useConstant<ThemeManager>(() => {
+  const activeName = !name ? null : name in themes ? name : `${name}-${parentName}`
+  const theme = activeName ? themes[activeName] : null
+  const themeManager = useConstant<ThemeManager | null>(() => {
+    if (!theme) {
+      return null
+    }
     const manager = new ThemeManager()
     if (name) {
       manager.setActiveTheme(name, themes[name])
@@ -32,16 +36,19 @@ export const Theme = (props: ThemeProps) => {
   })
 
   useIsomorphicLayoutEffect(() => {
-    themeManager.setActiveTheme(name, theme)
+    if (!themeManager) {
+      return
+    }
+    themeManager.setActiveTheme(activeName, theme)
     return parent.onChangeTheme((next) => {
       if (next) {
         themeManager.setActiveTheme(next, themes[next])
         setParentName(next)
       }
     })
-  }, [themes, name])
+  }, [themes, activeName])
 
-  if (!name) {
+  if (!name || !theme) {
     return props.children
   }
 

package/src/views/ThemeInverse.tsx

@@ -18,6 +18,5 @@ export const ThemeInverse = (props: { children: any }) => {
   const themeName = useThemeName()
   const defaultTheme = useDefaultThemeName()
   const name = inversions[themeName] || inversions[defaultTheme] || null
-  console.log('todo fixme invert', { themeName, defaultTheme, next: name })
   return <Theme name={name}>{props.children}</Theme>
 }

package/types.d.ts

@@ -11,6 +11,7 @@ export declare class Variable {
 	val: string | number;
 	variable: string | number;
 	constructor({ val, name }: VariableIn);
+	toString(): string | number;
 }
 export declare type VariableIn = {
 	val: string | number;
@@ -491,8 +492,8 @@ export declare const themeable: ThemeableHOC;
 export interface ThemeableHOC {
 	<R extends ReactElement<any, any> | null, P extends ThemeableProps = {}>(component: (props: P) => R): (props: P) => R;
 }
+export declare const isTamaguiElement: (child: any) => child is React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export declare function useConstant<T>(fn: () => T): T;
-export declare function useForceUpdate(): Function;
 export declare const mediaState: {
 	[key in keyof MediaQueryState]: boolean;
 };
@@ -550,9 +551,5 @@ export declare const ThemeInverse: (props: {
 }) => JSX.Element;
 export declare const TextAncestorContext: any;
 export declare const TextAncestorProvider: (props: any) => any;
-export declare const SafeAreaProvider: ({ initialWindowMetrics, children, }: {
-	children?: any;
-	initialWindowMetrics?: any;
-}) => JSX.Element;
 
 export {};

package/.ultra.cache.json

@@ -1 +0,0 @@
-{"files":{"_":"1637340237894.082","dist":"1637479554052.672",".npmignore":"e69de29bb2d1d6434b8b29ae775ad8c2e48c5391","package.json":"adf7cec75fc901122883d8d6a4cd32b04d410467","src/constants/constants.ts":"557e9930ddfa8fad6d74219ae7245c80551b8794","src/constants/platform.ts":"f6c5d92ce473942bb07bd3e799255dacbf88fe04","src/constants/pseudos.ts":"52c7655f92eaa265601eaf4a31b6db1688875321","src/constants/rnw.tsx":"ebc4ce292c30d344945b75e151a272023461f784","src/createComponent.tsx":"cccfd41966f4dde4e4c62e7b7d38f658088b7f01","src/createFont.ts":"819966bc37e24da3fe2d8c06a68520f0fe5d125e","src/createShorthands.ts":"7b5ce250bc5d049fcf9f5898efc60fdc91f2988d","src/createTamagui.ts":"6e79d67d36eac7a4f5edc8b97e3914eea89ee593","src/createTheme.ts":"aa9b7c08901c1dff621a371912f3cbf1c2507301","src/createTokens.ts":"e5b1ac5cc0a68ca0ec3753a1a0bd5a4af9b825b3","src/createVariable.ts":"da248891d943b04d940205762b1239751af6c7cc","src/helpers/addStylesUsingClassname.tsx":"eab83e8172210b5cea57a408f13cd20e6152d752","src/helpers/createMediaStyle.ts":"3c5ff33628b5cc8de55bdcedc3133b968b5fb210","src/helpers/createPropMapper.ts":"8c4cad2720fd04054a1bea055b674017ba4b0a22","src/helpers/createTamaguiProvider.tsx":"2b6006e2bf3140184789a8f13d3e138ebc22d7b7","src/helpers/extendStaticConfig.ts":"7402dca37f1de440471e3ac83ca6ab8eb4373dc3","src/helpers/fixNativeShadow.native.tsx":"ff1ed30ed9ace81433046e719939a04190b477cc","src/helpers/fixNativeShadow.tsx":"7fb6e7d9604025d2023469f23aab7280244bbb03","src/helpers/getSplitStyles.tsx":"fa6ce2cb0449918a575f02ac179d83de3637c0c6","src/helpers/getStylesAtomic.native.ts":"9054085df65d873432d974b369ac9dcb80f387ff","src/helpers/getStylesAtomic.ts":"e85e8ae07227d5b05f0f1aad7fae77b40e30c09d","src/helpers/insertStyleRule.tsx":"2fe177cb7efe1b2fb5b38c57835a6a3ea5e35443","src/helpers/isObj.ts":"8243865ff1705b549e1a10b398f45048709e2360","src/helpers/matchMedia.native.ts":"7e28a480a564ba5d341d5d559cf1ddcaf5f0b76b","src/helpers/matchMedia.ts":"071b4358b4a141c8f55645e478af1e2527e88b67","src/helpers/themeable.tsx":"16e605a7ae27cec3e4d725817370ac3c250c52a4","src/hooks/useConstant.tsx":"f23ca6031dd13f73f4c5eb7089b5745dc2cdaedd","src/hooks/useFeatures.tsx":"3b917df55d6478ef6f3b9c21d7bef3e5bdcefe1b","src/hooks/useForceUpdate.tsx":"bd991b41de300151e93b2d7e8cdca6a0accefacc","src/hooks/useMedia.tsx":"c50e9180f17ef1839875869eef071bf8a7965dae","src/hooks/usePressable.tsx":"4f55bdca7250e2d22d88f3578d8c8e62ce5c8453","src/hooks/useTheme.tsx":"9c11c3a5da0844cfb93ccbbfa861aedbe10b2552","src/index.ts":"9799059148a6bf1c14fd61120145f10cc40b1fcd","src/static.ts":"8023a4f2d9ee432df4084cc69260c01892f6dff8","src/static/postProcessStyles.tsx":"5e5579249eb99caab9f406af6ec801b7ff1db830","src/styled.ts":"6ccd48505b8118ac393344f475084c528ab83c94","src/types.tsx":"a80d45d21a1b69e54d00226b8f9f1f5de945f1cd","src/views/Animated.tsx":"eac498149091b087c84a5d92c4a9b57bafd6c149","src/views/SafeAreaProvider.tsx":"501c04bc1cb00c2a70ab4f13c5d9510b1f9245b8","src/views/Stack.tsx":"62ef6b9307bb434ad08f4ab7f3f6d0ccb975a359","src/views/Text.tsx":"476bdde93a89840681bf981cfc06e10fc0bc837d","src/views/TextAncestorContext.tsx":"73b13b84778bddb2b4198d32daf1de668132b0bb","src/views/Theme.tsx":"4e9357aac5fc201f2dc359a8f6fd4a8581ceb9bf","src/views/ThemeContext.tsx":"788e2d26d8727dd9493944b5ae9c7ea241fd7ed4","src/views/ThemeInverse.tsx":"614b626451a57955e896cc709d28043bc9bbf391","src/views/ThemeManagerContext.tsx":"30f5f195c2d4b326c5b44f587ff88a1dd1a848ff","src/views/ThemeProvider.tsx":"dcdd80d625e61e9598baf4cb10fc7921962efb50","tsconfig.json":"d3effa0a1380f9664793b92aefd77a1bc96ce071","types.d.ts":"ae74d3379aca7fc09fafc830bdbbc644fb099553"},"deps":{"@tamagui/helpers":1637643436658.3892,"@tamagui/build":1637643433595.8828}}

package/_/constants/constants.js

@@ -1,14 +0,0 @@
-import { isWeb } from "./platform";
-const stackDefaultStyles = {
-  alignItems: "stretch",
-  flexShrink: 0,
-  ...isWeb && {
-    display: "flex",
-    flexBasis: "auto",
-    boxSizing: "border-box"
-  }
-};
-export {
-  stackDefaultStyles
-};
-//# sourceMappingURL=constants.js.map

package/_/constants/constants.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/constants/constants.ts"],
-  "sourcesContent": ["import { isWeb } from './platform'\n\nexport const stackDefaultStyles = {\n  alignItems: 'stretch',\n  flexShrink: 0,\n  // more accurately match react-native defaults on web\n  ...(isWeb && {\n    display: 'flex',\n    flexBasis: 'auto',\n    boxSizing: 'border-box',\n  }),\n}\n"],
-  "mappings": "AAAA;AAEO,MAAM,qBAAqB;AAAA,EAChC,YAAY;AAAA,EACZ,YAAY;AAAA,KAER,SAAS;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA;AAAA;",
-  "names": []
-}

package/_/constants/platform.js

@@ -1,20 +0,0 @@
-var _a;
-import { useEffect, useLayoutEffect } from "react";
-import { Platform } from "react-native";
-const isWeb = process.env.TAMAGUI_TARGET === "web" || ((_a = Platform) == null ? void 0 : _a.OS) === "web";
-const isSSR = isWeb && typeof window === "undefined";
-const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;
-const isChrome = typeof navigator !== "undefined" && /Chrome/.test(navigator.userAgent || "");
-const supportsTouchWeb = typeof window !== "undefined" && "ontouchstart" in window;
-const isTouchDevice = !isWeb || supportsTouchWeb;
-const isWebIOS = isWeb && typeof navigator !== "undefined" && (/iPad|iPhone|iPod/.test(navigator.platform) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) && !window["MSStream"];
-export {
-  isChrome,
-  isSSR,
-  isTouchDevice,
-  isWeb,
-  isWebIOS,
-  supportsTouchWeb,
-  useIsomorphicLayoutEffect
-};
-//# sourceMappingURL=platform.js.map

package/_/constants/platform.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/constants/platform.ts"],
-  "sourcesContent": ["import { useEffect, useLayoutEffect } from 'react'\nimport { Platform } from 'react-native'\n\nexport const isWeb = process.env.TAMAGUI_TARGET === 'web' || Platform?.OS === 'web'\nexport const isSSR = isWeb && typeof window === 'undefined'\nexport const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect\nexport const isChrome = typeof navigator !== 'undefined' && /Chrome/.test(navigator.userAgent || '')\nexport const supportsTouchWeb = typeof window !== 'undefined' && 'ontouchstart' in window\nexport const isTouchDevice = !isWeb || supportsTouchWeb\nexport const isWebIOS =\n  isWeb &&\n  typeof navigator !== 'undefined' &&\n  (/iPad|iPhone|iPod/.test(navigator.platform) ||\n    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&\n  !window['MSStream']\n"],
-  "mappings": "AAAA;AAAA;AACA;AAEO,MAAM,QAAQ,QAAQ,IAAI,mBAAmB,SAAS,uCAAU,QAAO;AACvE,MAAM,QAAQ,SAAS,OAAO,WAAW;AACzC,MAAM,4BAA4B,QAAQ,YAAY;AACtD,MAAM,WAAW,OAAO,cAAc,eAAe,SAAS,KAAK,UAAU,aAAa;AAC1F,MAAM,mBAAmB,OAAO,WAAW,eAAe,kBAAkB;AAC5E,MAAM,gBAAgB,CAAC,SAAS;AAChC,MAAM,WACX,SACA,OAAO,cAAc,eACpB,oBAAmB,KAAK,UAAU,aAChC,UAAU,aAAa,cAAc,UAAU,iBAAiB,MACnE,CAAC,OAAO;",
-  "names": []
-}

package/_/constants/pseudos.js

@@ -1,18 +0,0 @@
-const pseudos = {
-  focusStyle: {
-    name: "focus",
-    priority: 3
-  },
-  pressStyle: {
-    name: "active",
-    priority: 2
-  },
-  hoverStyle: {
-    name: "hover",
-    priority: 1
-  }
-};
-export {
-  pseudos
-};
-//# sourceMappingURL=pseudos.js.map

package/_/constants/pseudos.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/constants/pseudos.ts"],
-  "sourcesContent": ["export const pseudos = {\n  focusStyle: {\n    name: 'focus',\n    priority: 3,\n  },\n  pressStyle: {\n    name: 'active',\n    priority: 2,\n  },\n  hoverStyle: {\n    name: 'hover',\n    priority: 1,\n  },\n}\n"],
-  "mappings": "AAAO,MAAM,UAAU;AAAA,EACrB,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA;AAAA,EAEZ,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA;AAAA,EAEZ,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA;AAAA;",
-  "names": []
-}

package/_/constants/rnw.js

@@ -1,22 +0,0 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-const interopRequire = /* @__PURE__ */ __name((src) => "default" in src ? src.default : src, "interopRequire");
-const rnw = {};
-if (process.env.IS_STATIC === "is_static") {
-  const createCompileableStyle = require("react-native-web/dist/cjs/exports/StyleSheet/createCompileableStyle");
-  const createReactDOMStyle = require("react-native-web/dist/cjs/exports/StyleSheet/createReactDOMStyle");
-  const i18Style = require("react-native-web/dist/cjs/exports/StyleSheet/i18nStyle");
-  const atomic = require("react-native-web/dist/cjs/exports/StyleSheet/compile").atomic;
-  Object.assign(rnw, {
-    createCompileableStyle,
-    createReactDOMStyle,
-    i18Style,
-    atomic
-  });
-} else if (process.env.TAMAGUI_TARGET === "web") {
-  Object.assign(rnw, interopRequire(require("react-native-web").TamaguiExports));
-}
-export {
-  rnw
-};
-//# sourceMappingURL=rnw.js.map

package/_/constants/rnw.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/constants/rnw.tsx"],
-  "sourcesContent": ["const interopRequire = (src: any) => ('default' in src ? src.default : src)\n\nexport const rnw: Record<string, any> = {}\n\n// in static mode, require them directly since we can't import react-native-web at all (it has flow stuff in it)\nif (process.env.IS_STATIC === 'is_static') {\n  const createCompileableStyle = require('react-native-web/dist/cjs/exports/StyleSheet/createCompileableStyle')\n  const createReactDOMStyle = require('react-native-web/dist/cjs/exports/StyleSheet/createReactDOMStyle')\n  const i18Style = require('react-native-web/dist/cjs/exports/StyleSheet/i18nStyle')\n  const atomic = require('react-native-web/dist/cjs/exports/StyleSheet/compile').atomic\n  Object.assign(rnw, {\n    createCompileableStyle,\n    createReactDOMStyle,\n    i18Style,\n    atomic,\n  })\n} else if (process.env.TAMAGUI_TARGET === 'web') {\n  // when targeting web (client) import it like so\n  Object.assign(rnw, interopRequire(require('react-native-web').TamaguiExports))\n}\n"],
-  "mappings": ";;AAAA,MAAM,iBAAiB,wBAAC,QAAc,aAAa,MAAM,IAAI,UAAU,KAAhD;AAEhB,MAAM,MAA2B;AAGxC,IAAI,QAAQ,IAAI,cAAc,aAAa;AACzC,QAAM,yBAAyB,QAAQ;AACvC,QAAM,sBAAsB,QAAQ;AACpC,QAAM,WAAW,QAAQ;AACzB,QAAM,SAAS,QAAQ,wDAAwD;AAC/E,SAAO,OAAO,KAAK;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,WAEO,QAAQ,IAAI,mBAAmB,OAAO;AAE/C,SAAO,OAAO,KAAK,eAAe,QAAQ,oBAAoB;AAAA;",
-  "names": []
-}