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

package/dist/index.js

@@ -15,6 +15,7 @@ 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/useMedia";
 export * from "./hooks/useTheme";
@@ -25,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/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;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

@@ -11,28 +11,37 @@ const Theme = /* @__PURE__ */ __name((props) => {
   const themes = useContext(ThemeContext);
   const [parentName, setParentName] = 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__ */ 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 } 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('Error, no themes in context', props)\n    return props.children\n  }\n  const name = props.name as string\n  const nextNameParent = `${name}-${parentName}`\n  const nextNameParentParent = `${name}-${parent.parentName}`\n  const activeName = !name\n    ? null\n    : name in themes\n    ? name\n    : nextNameParent in themes\n    ? nextNameParent\n    : nextNameParentParent in themes\n    ? nextNameParentParent\n    : null\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, theme: themes[name], parentName })\n    }\n    return manager\n  })\n\n  useIsomorphicLayoutEffect(() => {\n    if (!themeManager) {\n      return\n    }\n    themeManager.setActiveTheme({ name: activeName, theme, parentName })\n    return parent.onChangeTheme((next) => {\n      if (next) {\n        themeManager.setActiveTheme({ name: next, theme: themes[next], parentName })\n        setParentName(next)\n      }\n    })\n  }, [themes, activeName, parentName])\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,+BAA+B;AAC5C,WAAO,MAAM;AAAA;AAEf,QAAM,OAAO,MAAM;AACnB,QAAM,iBAAiB,GAAG,QAAQ;AAClC,QAAM,uBAAuB,GAAG,QAAQ,OAAO;AAC/C,QAAM,aAAa,CAAC,OAChB,OACA,QAAQ,SACR,OACA,kBAAkB,SAClB,iBACA,wBAAwB,SACxB,uBACA;AACJ,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,EAAE,MAAM,OAAO,OAAO,OAAO;AAAA;AAEtD,WAAO;AAAA;AAGT,4BAA0B,MAAM;AAC9B,QAAI,CAAC,cAAc;AACjB;AAAA;AAEF,iBAAa,eAAe,EAAE,MAAM,YAAY,OAAO;AACvD,WAAO,OAAO,cAAc,CAAC,SAAS;AACpC,UAAI,MAAM;AACR,qBAAa,eAAe,EAAE,MAAM,MAAM,OAAO,OAAO,OAAO;AAC/D,sBAAc;AAAA;AAAA;AAAA,KAGjB,CAAC,QAAQ,YAAY;AAExB,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,GAzEY;",
   "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/dist/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) {
@@ -30,12 +36,12 @@ class ThemeManager {
         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) {

package/dist/views/ThemeManagerContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/views/ThemeManagerContext.tsx"],
-  "sourcesContent": ["import { createContext } from 'react'\n\nexport class ThemeManager {\n  name: string | null = 'light'\n  keys = new Map<any, Set<string>>()\n  listeners = new Map<any, Function>()\n  callbacks = new Set<Function>()\n  theme = null\n\n  setActiveTheme(name: string | null, theme?: any) {\n    if (name === this.name) return\n    this.name = name\n    this.theme = theme\n    this.update()\n  }\n\n  track(uuid: any, keys: Set<string>) {\n    if (!this.name) return\n    this.keys.set(uuid, keys)\n  }\n\n  update() {\n    if (!this.name) {\n      this.keys.clear()\n    }\n    for (const [uuid, keys] of this.keys.entries()) {\n      if (keys.size) {\n        this.listeners.get(uuid)?.()\n      }\n    }\n    this.callbacks.forEach((cb) => cb(this.name))\n  }\n\n  onChangeTheme(cb: (name: string | null) => void) {\n    this.callbacks.add(cb)\n    return () => {\n      this.callbacks.delete(cb)\n    }\n  }\n\n  onUpdate(uuid: any, cb: Function) {\n    this.listeners.set(uuid, cb)\n    return () => {\n      this.listeners.delete(uuid)\n      this.keys.delete(uuid)\n    }\n  }\n}\n\nexport const ThemeManagerContext = createContext<ThemeManager>(new ThemeManager())\n"],
-  "mappings": ";;AAAA;AAEO,mBAAmB;AAAA,EAAnB,cAFP;AAGE,gBAAsB;AACtB,gBAAO,IAAI;AACX,qBAAY,IAAI;AAChB,qBAAY,IAAI;AAChB,iBAAQ;AAAA;AAAA,EAER,eAAe,MAAqB,OAAa;AAC/C,QAAI,SAAS,KAAK;AAAM;AACxB,SAAK,OAAO;AACZ,SAAK,QAAQ;AACb,SAAK;AAAA;AAAA,EAGP,MAAM,MAAW,MAAmB;AAClC,QAAI,CAAC,KAAK;AAAM;AAChB,SAAK,KAAK,IAAI,MAAM;AAAA;AAAA,EAGtB,SAAS;AACP,QAAI,CAAC,KAAK,MAAM;AACd,WAAK,KAAK;AAAA;AAEZ,eAAW,CAAC,MAAM,SAAS,KAAK,KAAK,WAAW;AAC9C,UAAI,KAAK,MAAM;AACb,aAAK,UAAU,IAAI;AAAA;AAAA;AAGvB,SAAK,UAAU,QAAQ,CAAC,OAAO,GAAG,KAAK;AAAA;AAAA,EAGzC,cAAc,IAAmC;AAC/C,SAAK,UAAU,IAAI;AACnB,WAAO,MAAM;AACX,WAAK,UAAU,OAAO;AAAA;AAAA;AAAA,EAI1B,SAAS,MAAW,IAAc;AAChC,SAAK,UAAU,IAAI,MAAM;AACzB,WAAO,MAAM;AACX,WAAK,UAAU,OAAO;AACtB,WAAK,KAAK,OAAO;AAAA;AAAA;AAAA;AA1ChB;AA+CA,MAAM,sBAAsB,cAA4B,IAAI;",
+  "sourcesContent": ["import { createContext } from 'react'\n\ntype ThemeListener = (name: string | null, themeManager: ThemeManager) => void\n\nexport class ThemeManager {\n  name: string | null = 'light'\n  parentName: string | null = null\n  keys = new Map<any, Set<string>>()\n  listeners = new Map<any, Function>()\n  themeListeners = new Set<ThemeListener>()\n  theme = null\n\n  setActiveTheme({\n    name,\n    theme,\n    parentName,\n  }: {\n    parentName?: string | null\n    name: string | null\n    theme?: any\n  }) {\n    if (name === this.name) return\n    this.name = name\n    this.theme = theme\n    this.parentName = parentName || null\n    this.update()\n  }\n\n  track(uuid: any, keys: Set<string>) {\n    if (!this.name) return\n    this.keys.set(uuid, keys)\n  }\n\n  update() {\n    if (!this.name) {\n      this.keys.clear()\n    }\n    for (const [uuid, keys] of this.keys.entries()) {\n      if (keys.size) {\n        this.listeners.get(uuid)?.()\n      }\n    }\n    this.themeListeners.forEach((cb) => cb(this.name, this))\n  }\n\n  onChangeTheme(cb: ThemeListener) {\n    this.themeListeners.add(cb)\n    return () => {\n      this.themeListeners.delete(cb)\n    }\n  }\n\n  onUpdate(uuid: any, cb: Function) {\n    this.listeners.set(uuid, cb)\n    return () => {\n      this.listeners.delete(uuid)\n      this.keys.delete(uuid)\n    }\n  }\n}\n\nexport const ThemeManagerContext = createContext<ThemeManager>(new ThemeManager())\n"],
+  "mappings": ";;AAAA;AAIO,mBAAmB;AAAA,EAAnB,cAJP;AAKE,gBAAsB;AACtB,sBAA4B;AAC5B,gBAAO,IAAI;AACX,qBAAY,IAAI;AAChB,0BAAiB,IAAI;AACrB,iBAAQ;AAAA;AAAA,EAER,eAAe;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,KAKC;AACD,QAAI,SAAS,KAAK;AAAM;AACxB,SAAK,OAAO;AACZ,SAAK,QAAQ;AACb,SAAK,aAAa,cAAc;AAChC,SAAK;AAAA;AAAA,EAGP,MAAM,MAAW,MAAmB;AAClC,QAAI,CAAC,KAAK;AAAM;AAChB,SAAK,KAAK,IAAI,MAAM;AAAA;AAAA,EAGtB,SAAS;AACP,QAAI,CAAC,KAAK,MAAM;AACd,WAAK,KAAK;AAAA;AAEZ,eAAW,CAAC,MAAM,SAAS,KAAK,KAAK,WAAW;AAC9C,UAAI,KAAK,MAAM;AACb,aAAK,UAAU,IAAI;AAAA;AAAA;AAGvB,SAAK,eAAe,QAAQ,CAAC,OAAO,GAAG,KAAK,MAAM;AAAA;AAAA,EAGpD,cAAc,IAAmB;AAC/B,SAAK,eAAe,IAAI;AACxB,WAAO,MAAM;AACX,WAAK,eAAe,OAAO;AAAA;AAAA;AAAA,EAI/B,SAAS,MAAW,IAAc;AAChC,SAAK,UAAU,IAAI,MAAM;AACzB,WAAO,MAAM;AACX,WAAK,UAAU,OAAO;AACtB,WAAK,KAAK,OAAO;AAAA;AAAA;AAAA;AApDhB;AAyDA,MAAM,sBAAsB,cAA4B,IAAI;",
   "names": []
 }

package/package.json

@@ -1,27 +1,33 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.8",
   "source": "src/index.ts",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
+  "main": "dist/cjs",
+  "module": "dist",
   "typings": "types.d.ts",
   "scripts": {
-    "build": "tamagui-build",
-    "watch": "tamagui-build --watch"
+    "build": "tamagui-build --separate",
+    "watch": "tamagui-build --separate --watch"
   },
+  "files": [
+    "_",
+    "types.d.ts",
+    "dist",
+    "src"
+  ],
   "dependencies": {
-    "@tamagui/helpers": "^1.0.0-alpha.2",
-    "@tamagui/use-debounce": "^1.0.0-alpha.4",
-    "@tamagui/use-force-update": "^1.0.0-alpha.4",
+    "@tamagui/helpers": "^1.0.0-alpha.8",
+    "@tamagui/use-debounce": "^1.0.0-alpha.8",
+    "@tamagui/use-force-update": "^1.0.0-alpha.8",
     "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.8",
+    "@tamagui/ow": "^0.28.1",
     "@types/react": "^17.0.35",
     "esbuild": "^0.11.20",
     "typescript": "^4.4.4"
@@ -32,5 +38,5 @@
   "engines": {
     "node": ">=16"
   },
-  "gitHead": "3e3b5401f9daea70cf9a99782d325f58357ca681"
+  "gitHead": "ecb0afe6782276b1f2ece90320fd2748f2f05c93"
 }

package/src/createComponent.tsx

@@ -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) {
@@ -466,7 +477,7 @@ export function createComponent<A extends Object = DefaultProps>(
     } else {
       if (!hasWarnedOnce) {
         hasWarnedOnce = true
-        console.log('⚠️ we need to account for default styles for media queries')
+        console.log('⚠️ TODO account for default styles for media queries')
       }
     }
     // @ts-ignore
@@ -489,10 +500,14 @@ export function createComponent<A extends Object = DefaultProps>(
   const res = component as any as StaticComponent<A, void>
 
   // add extractable HoC
-  res['extractable'] = (Component: any) => {
+  res['extractable'] = (Component: any, conf?: StaticConfig) => {
     Component['staticConfig'] = extendStaticConfig(res, {
+      ...conf,
       neverFlatten: true,
-      defaultProps: Component.defaultProps,
+      defaultProps: {
+        ...Component.defaultProps,
+        ...conf?.defaultProps,
+      },
     })
     return Component
   }

package/src/createFont.ts

@@ -1,6 +1,11 @@
+import { validateFont } from './helpers/validate'
 import { GenericFont } from './types'
 
 export const createFont = <A extends GenericFont>(font: A): A => {
+  if (process.env.NODE_ENV === 'development') {
+    validateFont(font)
+  }
+
   // fills in any missing values based on size keys being standard
   const sizeKeys = Object.keys(font.size)
 

package/src/createTamagui.ts

@@ -2,6 +2,7 @@ import { getStyleRules } from '@tamagui/helpers'
 
 import { Variable, createVariable, isVariable } from './createVariable'
 import { createTamaguiProvider } from './helpers/createTamaguiProvider'
+import { validateConfig } from './helpers/validate'
 import { configureMedia } from './hooks/useMedia'
 import {
   CreateTamaguiConfig,
@@ -27,7 +28,9 @@ export type CreateTamaguiProps = TamaguiProviderProps &
 let conf: TamaguiInternalConfig | null
 
 export const getHasConfigured = () => !!conf
-export const getTamaguiConfig = () => conf!
+
+export const getTamagui = () => conf!
+export const getTokens = () => conf!.tokensParsed
 
 type ConfigListener = (conf: TamaguiInternalConfig) => void
 const configListeners = new Set<ConfigListener>()
@@ -46,6 +49,12 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
 ): Conf extends CreateTamaguiConfig<infer A, infer B, infer C, infer D>
   ? TamaguiInternalConfig<A, B, C, D>
   : unknown {
+  if (process.env.NODE_ENV === 'development') {
+    // config is re-run by the @tamagui/static, dont double validate
+    if (!config['parsed']) {
+      validateConfig(config)
+    }
+  }
   // test env loads a few times as it runs diff tests
   if (conf) {
     console.warn('Called createTamagui twice! Should never do so')
@@ -157,6 +166,7 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     themeConfig,
     themeParsed,
     tokensParsed,
+    parsed: true,
     getCSS() {
       return `${themeConfig.css}\n${[...getStyleRules()].join('\n')}`
     },

package/src/createTokens.ts

@@ -1,9 +1,14 @@
 import { Variable, createVariable } from './createVariable'
+import { validateTokens } from './helpers/validate'
 import { CreateTokens } from './types'
 
-// tokens.color.dark.red ===>{ var: `color-dark-red`, val: '' }
+// tokens.color.dark.red ===> { var: `color-dark-red`, val: '' }
 
 export function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {
+  if (process.env.NODE_ENV === 'development') {
+    validateTokens(tokens)
+  }
+
   return setupTokens(tokens) as any
 }
 

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/createPropMapper.ts

@@ -1,4 +1,4 @@
-import { getTamaguiConfig } from '../createTamagui'
+import { getTamagui } from '../createTamagui'
 import { Variable } from '../createVariable'
 import { StaticConfig, TamaguiInternalConfig } from '../types'
 import { isObj } from './isObj'
@@ -9,7 +9,7 @@ export const createPropMapper = (c: StaticConfig) => {
   const defaultProps = c.defaultProps || {}
 
   return (key: string, value: any, theme: any, props: any) => {
-    const conf = getTamaguiConfig()
+    const conf = getTamagui()
     if (!conf) {
       console.trace('no conf! err')
       return

package/src/helpers/getSplitStyles.tsx

@@ -8,7 +8,7 @@ import {
 import { ViewStyle } from 'react-native'
 
 import { isWeb } from '../constants/platform'
-import { mediaQueryConfig } from '../hooks/useMedia'
+import { mediaQueryConfig, mediaState } from '../hooks/useMedia'
 import { StaticConfigParsed, ThemeObject } from '../types'
 import { createMediaStyle } from './createMediaStyle'
 import { fixNativeShadow } from './fixNativeShadow'
@@ -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
@@ -54,14 +53,15 @@ export const getSplitStyles = (
       const mediaProps = { ...props, ...valInit }
       // TODO media + hover
       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 style of mediaStyles) {
-        if (isWeb) {
+        for (const style of mediaStyles) {
           const out = createMediaStyle(style, mediaKey, mediaQueryConfig)
           classNames = classNames || []
           classNames.push(out.identifier)
@@ -70,8 +70,10 @@ export const getSplitStyles = (
           if (process.env.NODE_ENV === 'development' && props['debug']) {
             console.log('mediaProp', style.identifier, out, mediaProps, mediaStyle, mediaStyles)
           }
-        } else {
-          console.log('TODO native media style logic')
+        }
+      } else {
+        if (mediaState[mediaKey]) {
+          style.push(mediaStyle)
         }
       }
       continue
@@ -130,8 +132,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 +184,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/helpers/matchMedia.native.ts

@@ -1,3 +1,6 @@
 import MediaQueryList from '@expo/match-media/build/MediaQueryList.js'
 
 export const matchMedia = (media: string) => new MediaQueryList(media)
+
+// @ts-ignore
+globalThis['matchMedia'] = matchMedia

package/src/helpers/matchMedia.ts

@@ -2,7 +2,15 @@ export const matchMedia =
   (typeof window !== 'undefined' && window.matchMedia) ||
   (function matchMediaFallback(query: string) {
     return {
-      addListener() {},
+      addListener() {
+        if (
+          process.env.NODE_ENV === 'development' &&
+          !process.env.IS_STATIC &&
+          process.env.TAMAGUI_TARGET !== 'web'
+        ) {
+          console.log('warning: matchMedia not loading! Is native picking up .native.js files?')
+        }
+      },
       removeListener() {},
       matches: false,
     }

package/src/helpers/validate.ts

@@ -0,0 +1,59 @@
+// published a patched version that works on native
+import ow from '@tamagui/ow'
+
+export const validateConfig = (conf: any) => {
+  if (!conf) {
+    console.warn('no conf?')
+    return
+  }
+  try {
+    ow(conf, validConfig)
+  } catch (err: any) {
+    console.log('Given config:\n', JSON.stringify(conf, null, 2))
+    throw err
+  }
+}
+
+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),
+})
+
+export const validateTokens = (tokens: any) => {
+  try {
+    ow(tokens, validTokens)
+  } catch (err: any) {
+    console.log('Given tokens:\n', JSON.stringify(tokens, null, 2))
+    throw err
+  }
+}
+
+export const validateFont = (font: any) => {
+  try {
+    ow(font, validFont)
+  } catch (err: any) {
+    console.log('Given font:\n', JSON.stringify(font, null, 2))
+    throw err
+  }
+}