@tamagui/core 1.0.0-beta.181 → 1.0.0-beta.193

package/dist/esm/hooks/useTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useTheme.tsx"],
-  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../conf'\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport { ThemeContext } from '../ThemeContext'\nimport { ThemeManager, ThemeManagerContext, emptyManager } from '../ThemeManager'\nimport { ThemeObject } from '../types'\nimport { useConstant } from './useConstant'\n\ntype UseThemeState = {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nexport const useTheme = (\n  themeName?: string | null,\n  componentName?: string,\n  props?: any,\n  forceUpdate?: any\n): ThemeObject => {\n  const { name, theme, themes, themeManager, className, didChangeTheme } = useChangeThemeEffect(\n    themeName,\n    componentName,\n    props,\n    forceUpdate\n  )\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props?.['debug'] === 'verbose') {\n      console.log('  \u00BB useTheme', { themeName, componentName, name, className })\n    }\n  }\n\n  const state = useRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n  state.current.isRendering = true\n\n  // track usage\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    const cur = themeManager?.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      themeManager?.track(st.uuid, st.keys)\n    }\n  })\n\n  return useMemo(() => {\n    if (!theme) {\n      if (process.env.NODE_ENV === 'development') {\n        console.warn('No theme', { themeName, theme, componentName, className })\n      }\n      return themes[getConfig().defaultTheme || 'light' || Object.keys(themes)[0]]\n    }\n    return new Proxy(theme, {\n      has(_, key) {\n        if (typeof key === 'string') {\n          if (key[0] === '$') {\n            key = key.slice(1)\n          }\n        }\n        return Reflect.has(theme, key)\n      },\n      get(_, key) {\n        if (!name || key === '__proto__' || typeof key === 'symbol') {\n          // TODO make this pattern better\n          if (key === GetThemeManager) {\n            if (process.env.NODE_ENV === 'development') {\n              if (props['debug']) {\n                // prettier-ignore\n                console.log('did change', { themeName, didChangeTheme, name, componentName }, themeManager?.parentName)\n              }\n            }\n            if (!didChangeTheme) {\n              return null\n            }\n            // TODO\n            // console.log('DID CHANGE THEME')\n            return themeManager\n          }\n          return Reflect.get(_, key)\n        }\n        if (typeof key !== 'string' || key === '$typeof') {\n          return Reflect.get(_, key)\n        }\n        if (process.env.NODE_ENV === 'development') {\n          if (key === '__state') {\n            return state.current\n          }\n        }\n        if (key === 'name') {\n          return name\n        }\n        if (key === 'className') {\n          return className\n        }\n        if (!themeManager) {\n          console.error('No themeManager')\n          return\n        }\n        if (typeof key === 'string') {\n          // auto convert variables to plain\n          if (key[0] === '$') {\n            key = key.slice(1)\n          }\n          const val = themeManager.getValue(key)\n          if (val) {\n            if (state.current.isRendering) {\n              state.current.keys.add(key)\n              if (process.env.NODE_ENV === 'development') {\n                if (props?.['debug'] === 'verbose') {\n                  console.log('  \u00BB tracking theme key', key)\n                }\n              }\n            }\n            return val\n          }\n          // react native debuger uses toJSON\n          if (process.env.NODE_ENV === 'development') {\n            console.log(`No theme value \"${String(key)}\" in ${name}`)\n          }\n        }\n        return Reflect.get(_, key)\n      },\n    })\n  }, [name, theme, className, didChangeTheme])\n}\n\nconst GetThemeManager = Symbol('GetThemeManager')\n\nexport const getThemeManagerIfChanged = (theme: any) => {\n  return theme?.[GetThemeManager]\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent?.name || '')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!parent) return\n    return parent.onChangeTheme((next, manager) => {\n      const name = opts?.parent ? manager.parentName || next : next\n      if (!name) return\n      setName(name)\n    })\n  }, [parent])\n\n  return name\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const useChangeThemeEffect = (\n  name?: string | null,\n  componentName?: string,\n  props?: any,\n  forceUpdateProp?: any\n) => {\n  const debug = props && props['debug']\n  const parentManager = useContext(ThemeManagerContext) || emptyManager\n  const { themes } = useContext(ThemeContext)!\n  const next = parentManager.getNextTheme({ name, componentName, themes }, props)\n  const forceUpdate = forceUpdateProp || useForceUpdate()\n  const themeManager = useConstant<ThemeManager | null>(() => {\n    if (!next) {\n      return null\n    }\n    return new ThemeManager(next.name, next.theme, parentManager)\n  })\n\n  if (typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      if (next?.name) {\n        themeManager.update(next)\n      }\n      return parentManager.onChangeTheme(() => {\n        const next = parentManager.getNextTheme({ name, componentName, themes }, debug)\n        if (!next) return\n        if (themeManager.update(next)) {\n          forceUpdate()\n        }\n      })\n    }, [themes, name, componentName, debug, next?.name])\n  }\n\n  const didChangeTheme = next && parentManager && next.name !== parentManager.fullName\n\n  return {\n    ...(parentManager && {\n      name: parentManager.name,\n      theme: parentManager.theme,\n    }),\n    ...next,\n    didChangeTheme,\n    themes,\n    themeManager,\n  }\n}\n"],
-  "mappings": ";;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AAQO,MAAM,WAAW,wBACtB,WACA,eACA,OACA,gBACgB;AAChB,QAAM,EAAE,MAAM,OAAO,QAAQ,cAAc,WAAW,mBAAmB,qBACvE,WACA,eACA,OACA,WACF;AAEA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,gCAAQ,cAAa,WAAW;AAClC,cAAQ,IAAI,mBAAgB,EAAE,WAAW,eAAe,MAAM,UAAU,CAAC;AAAA,IAC3E;AAAA,EACF;AAEA,QAAM,QAAQ,OAAO;AACrB,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,UAAU;AAAA,MACd,MAAM,CAAC;AAAA,MACP,MAAM,oBAAI,IAAI;AAAA,MACd,aAAa;AAAA,IACf;AAAA,EACF;AACA,QAAM,QAAQ,cAAc;AAG5B,4BAA0B,MAAM;AAC9B,UAAM,KAAK,MAAM;AACjB,OAAG,cAAc;AACjB,UAAM,MAAM,6CAAc,KAAK,IAAI,GAAG;AACtC,QAAI,CAAC,OAAO,CAAC,aAAa,GAAG,MAAM,GAAG,GAAG;AACvC,mDAAc,MAAM,GAAG,MAAM,GAAG;AAAA,IAClC;AAAA,EACF,CAAC;AAED,SAAO,QAAQ,MAAM;AACnB,QAAI,CAAC,OAAO;AACV,UAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,gBAAQ,KAAK,YAAY,EAAE,WAAW,OAAO,eAAe,UAAU,CAAC;AAAA,MACzE;AACA,aAAO,OAAO,UAAU,EAAE,gBAAgB;AAAA,IAC5C;AACA,WAAO,IAAI,MAAM,OAAO;AAAA,MACtB,IAAI,GAAG,KAAK;AACV,YAAI,OAAO,QAAQ,UAAU;AAC3B,cAAI,IAAI,OAAO,KAAK;AAClB,kBAAM,IAAI,MAAM,CAAC;AAAA,UACnB;AAAA,QACF;AACA,eAAO,QAAQ,IAAI,OAAO,GAAG;AAAA,MAC/B;AAAA,MACA,IAAI,GAAG,KAAK;AACV,YAAI,CAAC,QAAQ,QAAQ,eAAe,OAAO,QAAQ,UAAU;AAE3D,cAAI,QAAQ,iBAAiB;AAC3B,gBAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,kBAAI,MAAM,UAAU;AAElB,wBAAQ,IAAI,cAAc,EAAE,WAAW,gBAAgB,MAAM,cAAc,GAAG,6CAAc,UAAU;AAAA,cACxG;AAAA,YACF;AACA,gBAAI,CAAC,gBAAgB;AACnB,qBAAO;AAAA,YACT;AAGA,mBAAO;AAAA,UACT;AACA,iBAAO,QAAQ,IAAI,GAAG,GAAG;AAAA,QAC3B;AACA,YAAI,OAAO,QAAQ,YAAY,QAAQ,WAAW;AAChD,iBAAO,QAAQ,IAAI,GAAG,GAAG;AAAA,QAC3B;AACA,YAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,cAAI,QAAQ,WAAW;AACrB,mBAAO,MAAM;AAAA,UACf;AAAA,QACF;AACA,YAAI,QAAQ,QAAQ;AAClB,iBAAO;AAAA,QACT;AACA,YAAI,QAAQ,aAAa;AACvB,iBAAO;AAAA,QACT;AACA,YAAI,CAAC,cAAc;AACjB,kBAAQ,MAAM,iBAAiB;AAC/B;AAAA,QACF;AACA,YAAI,OAAO,QAAQ,UAAU;AAE3B,cAAI,IAAI,OAAO,KAAK;AAClB,kBAAM,IAAI,MAAM,CAAC;AAAA,UACnB;AACA,gBAAM,MAAM,aAAa,SAAS,GAAG;AACrC,cAAI,KAAK;AACP,gBAAI,MAAM,QAAQ,aAAa;AAC7B,oBAAM,QAAQ,KAAK,IAAI,GAAG;AAC1B,kBAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,oBAAI,gCAAQ,cAAa,WAAW;AAClC,0BAAQ,IAAI,6BAA0B,GAAG;AAAA,gBAC3C;AAAA,cACF;AAAA,YACF;AACA,mBAAO;AAAA,UACT;AAEA,cAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,oBAAQ,IAAI,mBAAmB,OAAO,GAAG,SAAS,MAAM;AAAA,UAC1D;AAAA,QACF;AACA,eAAO,QAAQ,IAAI,GAAG,GAAG;AAAA,MAC3B;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,OAAO,WAAW,cAAc,CAAC;AAC7C,GAtHwB;AAwHxB,MAAM,kBAAkB,OAAO,iBAAiB;AAEzC,MAAM,2BAA2B,wBAAC,UAAe;AACtD,SAAO,+BAAQ;AACjB,GAFwC;AAIjC,MAAM,eAAe,wBAAC,SAA6B;AACxD,QAAM,SAAS,WAAW,mBAAmB;AAC7C,QAAM,CAAC,MAAM,WAAW,SAAS,kCAAQ,SAAQ,EAAE;AAEnD,4BAA0B,MAAM;AAC9B,QAAI,CAAC;AAAQ;AACb,WAAO,OAAO,cAAc,CAAC,MAAM,YAAY;AAC7C,YAAM,QAAO,8BAAM,UAAS,QAAQ,cAAc,OAAO;AACzD,UAAI,CAAC;AAAM;AACX,cAAQ,KAAI;AAAA,IACd,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SAAO;AACT,GAd4B;AAgBrB,MAAM,sBAAsB,6BAAM;AA/JzC;AAgKE,SAAO,iBAAW,YAAY,MAAvB,mBAA0B;AACnC,GAFmC;AAI5B,MAAM,uBAAuB,wBAClC,MACA,eACA,OACA,oBACG;AACH,QAAM,QAAQ,SAAS,MAAM;AAC7B,QAAM,gBAAgB,WAAW,mBAAmB,KAAK;AACzD,QAAM,EAAE,WAAW,WAAW,YAAY;AAC1C,QAAM,OAAO,cAAc,aAAa,EAAE,MAAM,eAAe,OAAO,GAAG,KAAK;AAC9E,QAAM,cAAc,mBAAmB,eAAe;AACtD,QAAM,eAAe,YAAiC,MAAM;AAC1D,QAAI,CAAC,MAAM;AACT,aAAO;AAAA,IACT;AACA,WAAO,IAAI,aAAa,KAAK,MAAM,KAAK,OAAO,aAAa;AAAA,EAC9D,CAAC;AAED,MAAI,OAAO,aAAa,aAAa;AACnC,oBAAgB,MAAM;AACpB,UAAI,CAAC;AAAc;AACnB,UAAI,6BAAM,MAAM;AACd,qBAAa,OAAO,IAAI;AAAA,MAC1B;AACA,aAAO,cAAc,cAAc,MAAM;AACvC,cAAM,QAAO,cAAc,aAAa,EAAE,MAAM,eAAe,OAAO,GAAG,KAAK;AAC9E,YAAI,CAAC;AAAM;AACX,YAAI,aAAa,OAAO,KAAI,GAAG;AAC7B,sBAAY;AAAA,QACd;AAAA,MACF,CAAC;AAAA,IACH,GAAG,CAAC,QAAQ,MAAM,eAAe,OAAO,6BAAM,IAAI,CAAC;AAAA,EACrD;AAEA,QAAM,iBAAiB,QAAQ,iBAAiB,KAAK,SAAS,cAAc;AAE5E,SAAO;AAAA,OACD,iBAAiB;AAAA,MACnB,MAAM,cAAc;AAAA,MACpB,OAAO,cAAc;AAAA,IACvB;AAAA,OACG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF,GA9CoC;",
+  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../conf'\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport { ThemeContext } from '../ThemeContext'\nimport { ThemeManager, ThemeManagerContext, emptyManager } from '../ThemeManager'\nimport { ThemeObject } from '../types'\nimport { useConstant } from './useConstant'\n\ntype UseThemeState = {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nexport const useTheme = (\n  themeName?: string | null,\n  componentName?: string,\n  props?: any,\n  forceUpdate?: any\n): ThemeObject => {\n  const { name, theme, themes, themeManager, className, didChangeTheme } = useChangeThemeEffect(\n    themeName,\n    componentName,\n    props,\n    forceUpdate\n  )\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props?.['debug'] === 'verbose') {\n      console.log('  \u00BB useTheme', { themeName, componentName, name, className })\n    }\n  }\n\n  const state = useRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n  state.current.isRendering = true\n\n  // track usage\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    const cur = themeManager?.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      themeManager?.track(st.uuid, st.keys)\n    }\n  })\n\n  return useMemo(() => {\n    if (!theme) {\n      if (process.env.NODE_ENV === 'development') {\n        console.warn('No theme', { themeName, theme, componentName, className })\n      }\n      return themes[getConfig().defaultTheme || 'light' || Object.keys(themes)[0]]\n    }\n    return new Proxy(theme, {\n      has(_, key) {\n        if (typeof key === 'string') {\n          if (key[0] === '$') {\n            key = key.slice(1)\n          }\n        }\n        return Reflect.has(theme, key)\n      },\n      get(_, key) {\n        if (!name || key === '__proto__' || typeof key === 'symbol') {\n          // TODO make this pattern better\n          if (key === GetThemeManager) {\n            if (process.env.NODE_ENV === 'development') {\n              if (props['debug']) {\n                // prettier-ignore\n                console.log('did change', { themeName, didChangeTheme, name, componentName }, themeManager?.parentName)\n              }\n            }\n            if (!didChangeTheme) {\n              return null\n            }\n            // TODO\n            // console.log('DID CHANGE THEME')\n            return themeManager\n          }\n          return Reflect.get(_, key)\n        }\n        if (typeof key !== 'string' || key === '$typeof') {\n          return Reflect.get(_, key)\n        }\n        if (process.env.NODE_ENV === 'development') {\n          if (key === '__state') {\n            return state.current\n          }\n        }\n        if (key === 'name') {\n          return name\n        }\n        if (key === 'className') {\n          return className\n        }\n        if (!themeManager) {\n          console.error('No themeManager')\n          return\n        }\n        // auto convert variables to plain\n        if (key[0] === '$') {\n          key = key.slice(1)\n        }\n        const val = themeManager.getValue(key)\n        if (val) {\n          if (state.current.isRendering) {\n            state.current.keys.add(key)\n            if (process.env.NODE_ENV === 'development') {\n              if (props?.['debug'] === 'verbose') {\n                console.log('  \u00BB tracking theme key', key)\n              }\n            }\n          }\n          return val\n        }\n        // react native debuger uses toJSON\n        if (process.env.NODE_ENV === 'development') {\n          console.log(`No theme value \"${String(key)}\" in ${name}`)\n        }\n        return Reflect.get(_, key)\n      },\n    })\n  }, [name, theme, className, didChangeTheme])\n}\n\nconst GetThemeManager = Symbol('GetThemeManager')\n\nexport const getThemeManagerIfChanged = (theme: any) => {\n  return theme?.[GetThemeManager]\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent?.name || '')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!parent) return\n    return parent.onChangeTheme((next, manager) => {\n      const name = opts?.parent ? manager.parentName || next : next\n      if (!name) return\n      setName(name)\n    })\n  }, [parent])\n\n  return name\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const useChangeThemeEffect = (\n  name?: string | null,\n  componentName?: string,\n  props?: any,\n  forceUpdateProp?: any\n) => {\n  const debug = props && props['debug']\n  const parentManager = useContext(ThemeManagerContext) || emptyManager\n  const { themes } = useContext(ThemeContext)!\n  const next = parentManager.getNextTheme({ name, componentName, themes }, props)\n  const forceUpdate = forceUpdateProp || useForceUpdate()\n  const themeManager = useConstant<ThemeManager | null>(() => {\n    if (!next) {\n      return null\n    }\n    return new ThemeManager(next.name, next.theme, parentManager)\n  })\n\n  if (typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      if (next?.name) {\n        themeManager.update(next)\n      }\n      return parentManager.onChangeTheme(() => {\n        const next = parentManager.getNextTheme({ name, componentName, themes }, debug)\n        if (!next) return\n        if (themeManager.update(next)) {\n          forceUpdate()\n        }\n      })\n    }, [themes, name, componentName, debug, next?.name])\n  }\n\n  const didChangeTheme = next && parentManager && next.name !== parentManager.fullName\n\n  return {\n    ...(parentManager && {\n      name: parentManager.name,\n      theme: parentManager.theme,\n    }),\n    ...next,\n    didChangeTheme,\n    themes,\n    themeManager,\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/static.js

@@ -3,12 +3,15 @@ export * from "./createComponent";
 export * from "./createFont";
 export * from "./createTokens";
 export * from "./createTamagui";
+export * from "./createVariable";
 export * from "./constants/constants";
 export * from "./hooks/useMedia";
 export * from "./hooks/useTheme";
 export * from "./helpers/isObj";
 export * from "./helpers/getStylesAtomic";
+export * from "./helpers/proxyThemeVariables";
 export * from "./helpers/getSplitStyles";
 export * from "@tamagui/helpers";
 export * from "./constants/rnw";
+export * from "./types";
 //# sourceMappingURL=static.js.map

package/dist/esm/static.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/static.ts"],
-  "sourcesContent": ["// only stuff that gets extracted or needed by tamagui-static\n\nexport * from './styled'\nexport * from './createComponent'\nexport * from './createFont'\nexport * from './createTokens'\nexport * from './createTamagui'\nexport * from './constants/constants'\n\nexport * from './hooks/useMedia'\nexport * from './hooks/useTheme'\n\nexport * from './helpers/isObj'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/getSplitStyles'\nexport * from '@tamagui/helpers'\n\nexport * from './constants/rnw'\n"],
-  "mappings": "AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AAEA;",
+  "sourcesContent": ["// only stuff that gets extracted or needed by tamagui-static\n\nexport * from './styled'\nexport * from './createComponent'\nexport * from './createFont'\nexport * from './createTokens'\nexport * from './createTamagui'\nexport * from './createVariable'\nexport * from './constants/constants'\n\nexport * from './hooks/useMedia'\nexport * from './hooks/useTheme'\n\nexport * from './helpers/isObj'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/proxyThemeVariables'\nexport * from './helpers/getSplitStyles'\nexport * from '@tamagui/helpers'\n\nexport * from './constants/rnw'\n\nexport * from './types'\n"],
+  "mappings": "AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AAEA;",
   "names": []
 }

package/dist/esm/views/Theme.js

@@ -15,9 +15,6 @@ const Theme = memo(/* @__PURE__ */ __name(function Theme2(props) {
     return props.children;
   }
   const contents = useMemo(() => wrapThemeManagerContext(props.children, themeManager), [props.children, themeManager]);
-  if (props.componentName === "Drawer") {
-    console.log("ok?", className, themeManager);
-  }
   if (isWeb) {
     return /* @__PURE__ */ React.createElement("span", {
       className: [

package/dist/esm/views/Theme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "sourcesContent": ["import React, { memo, useMemo } from 'react'\n\nimport { isWeb } from '../constants/platform'\nimport { wrapThemeManagerContext } from '../helpers/wrapThemeManagerContext'\nimport { useChangeThemeEffect } from '../hooks/useTheme'\nimport { ThemeName } from '../types'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nexport type ThemeProps = {\n  className?: string\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  componentName?: string\n  children?: any\n  debug?: boolean\n}\n\nexport const Theme = memo(function Theme(props: ThemeProps) {\n  const { name, theme, themeManager, themes, className } = useChangeThemeEffect(\n    props.name,\n    props.componentName,\n    props\n  )\n\n  if (!themes || !name || !theme) {\n    if (name && !theme && process.env.NODE_ENV === 'development') {\n      console.warn(`No theme found by name ${name}`)\n    }\n    return props.children\n  }\n\n  // memo here, changing theme without re-rendering all children is a critical optimization\n  // may require some effort of end user to memoize but without this memo they'd have no option\n  const contents = useMemo(\n    () => wrapThemeManagerContext(props.children, themeManager),\n    [props.children, themeManager]\n  )\n\n  if (props.componentName === 'Drawer') {\n    console.log('ok?', className, themeManager)\n  }\n\n  if (isWeb) {\n    return (\n      <span\n        className={[\n          `tui_Theme`,\n          ...(!props.disableThemeClass ? [props.className, className].filter(Boolean) : []),\n        ].join(' ')}\n        style={{\n          display: 'contents',\n          // in order to provide currentColor, set color by default\n          color: themes[name]?.color?.toString(),\n        }}\n      >\n        {contents}\n      </span>\n    )\n  }\n\n  return contents\n})\n"],
-  "mappings": ";;AAAA;AAEA;AACA;AACA;AAIA,MAAM;AAWC,MAAM,QAAQ,KAAK,uCAAe,OAAmB;AAnB5D;AAoBE,QAAM,EAAE,MAAM,OAAO,cAAc,QAAQ,cAAc,qBACvD,MAAM,MACN,MAAM,eACN,KACF;AAEA,MAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO;AAC9B,QAAI,QAAQ,CAAC,SAAS,QAAQ,IAAI,aAAa,eAAe;AAC5D,cAAQ,KAAK,0BAA0B,MAAM;AAAA,IAC/C;AACA,WAAO,MAAM;AAAA,EACf;AAIA,QAAM,WAAW,QACf,MAAM,wBAAwB,MAAM,UAAU,YAAY,GAC1D,CAAC,MAAM,UAAU,YAAY,CAC/B;AAEA,MAAI,MAAM,kBAAkB,UAAU;AACpC,YAAQ,IAAI,OAAO,WAAW,YAAY;AAAA,EAC5C;AAEA,MAAI,OAAO;AACT,WACE,oCAAC;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,GAAI,CAAC,MAAM,oBAAoB,CAAC,MAAM,WAAW,SAAS,EAAE,OAAO,OAAO,IAAI,CAAC;AAAA,MACjF,EAAE,KAAK,GAAG;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,QAET,OAAO,mBAAO,UAAP,mBAAc,UAAd,mBAAqB;AAAA,MAC9B;AAAA,OAEC,QACH;AAAA,EAEJ;AAEA,SAAO;AACT,GA5C0B,QA4CzB;",
+  "sourcesContent": ["import React, { memo, useMemo } from 'react'\n\nimport { isWeb } from '../constants/platform'\nimport { wrapThemeManagerContext } from '../helpers/wrapThemeManagerContext'\nimport { useChangeThemeEffect } from '../hooks/useTheme'\nimport { ThemeName } from '../types'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nexport type ThemeProps = {\n  className?: string\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  componentName?: string\n  children?: any\n  debug?: boolean\n}\n\nexport const Theme = memo(function Theme(props: ThemeProps) {\n  const { name, theme, themeManager, themes, className } = useChangeThemeEffect(\n    props.name,\n    props.componentName,\n    props\n  )\n\n  if (!themes || !name || !theme) {\n    if (name && !theme && process.env.NODE_ENV === 'development') {\n      console.warn(`No theme found by name ${name}`)\n    }\n    return props.children\n  }\n\n  // memo here, changing theme without re-rendering all children is a critical optimization\n  // may require some effort of end user to memoize but without this memo they'd have no option\n  const contents = useMemo(\n    () => wrapThemeManagerContext(props.children, themeManager),\n    [props.children, themeManager]\n  )\n\n  if (isWeb) {\n    return (\n      <span\n        className={[\n          `tui_Theme`,\n          ...(!props.disableThemeClass ? [props.className, className].filter(Boolean) : []),\n        ].join(' ')}\n        style={{\n          display: 'contents',\n          // in order to provide currentColor, set color by default\n          color: themes[name]?.color?.toString(),\n        }}\n      >\n        {contents}\n      </span>\n    )\n  }\n\n  return contents\n})\n"],
+  "mappings": ";;AAAA;AAEA;AACA;AACA;AAIA,MAAM;AAWC,MAAM,QAAQ,KAAK,uCAAe,OAAmB;AAnB5D;AAoBE,QAAM,EAAE,MAAM,OAAO,cAAc,QAAQ,cAAc,qBACvD,MAAM,MACN,MAAM,eACN,KACF;AAEA,MAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO;AAC9B,QAAI,QAAQ,CAAC,SAAS,QAAQ,IAAI,aAAa,eAAe;AAC5D,cAAQ,KAAK,0BAA0B,MAAM;AAAA,IAC/C;AACA,WAAO,MAAM;AAAA,EACf;AAIA,QAAM,WAAW,QACf,MAAM,wBAAwB,MAAM,UAAU,YAAY,GAC1D,CAAC,MAAM,UAAU,YAAY,CAC/B;AAEA,MAAI,OAAO;AACT,WACE,oCAAC;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,GAAI,CAAC,MAAM,oBAAoB,CAAC,MAAM,WAAW,SAAS,EAAE,OAAO,OAAO,IAAI,CAAC;AAAA,MACjF,EAAE,KAAK,GAAG;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,QAET,OAAO,mBAAO,UAAP,mBAAc,UAAd,mBAAqB;AAAA,MAC9B;AAAA,OAEC,QACH;AAAA,EAEJ;AAEA,SAAO;AACT,GAxC0B,QAwCzB;",
   "names": []
 }

package/dist/jsx/constants/platform.js

@@ -5,6 +5,7 @@ const isAndroid = ((_a = Platform) == null ? void 0 : _a.OS) === "android";
 const isIOS = ((_b = Platform) == null ? void 0 : _b.OS) === "ios";
 const isWeb = process.env.TAMAGUI_TARGET !== "native" && (process.env.TAMAGUI_TARGET === "web" || ((_c = Platform) == null ? void 0 : _c.OS) === "web");
 const isSSR = isWeb && typeof window === "undefined";
+const isClient = 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;
@@ -13,6 +14,7 @@ const isWebIOS = isWeb && typeof navigator !== "undefined" && (/iPad|iPhone|iPod
 export {
   isAndroid,
   isChrome,
+  isClient,
   isIOS,
   isSSR,
   isTouchDevice,

package/dist/jsx/createComponent.js

@@ -23,6 +23,7 @@ import { createShallowUpdate } from "./helpers/createShallowUpdate";
 import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
 import { getSplitStyles } from "./helpers/getSplitStyles";
 import { getAllSelectors } from "./helpers/insertStyleRule";
+import { proxyThemeVariables } from "./helpers/proxyThemeVariables";
 import { wrapThemeManagerContext } from "./helpers/wrapThemeManagerContext";
 import { useFeatures } from "./hooks/useFeatures";
 import { usePressable } from "./hooks/usePressable";
@@ -50,6 +51,7 @@ function mergeShorthands({ defaultProps }, { shorthands }) {
   }
 }
 __name(mergeShorthands, "mergeShorthands");
+let initialTheme;
 function createComponent(configIn, ParentComponent) {
   const staticConfig = (() => {
     const config = extendStaticConfig(configIn, ParentComponent);
@@ -66,7 +68,6 @@ function createComponent(configIn, ParentComponent) {
   let avoidClasses = true;
   let defaultNativeStyle;
   let defaultNativeStyleSheet;
-  let initialTheme;
   let initialSplitStyles;
   function addPseudoToStyles(styles, name, pseudos) {
     const pseudoStyle = pseudos[name];
@@ -439,14 +440,15 @@ function createComponent(configIn, ParentComponent) {
     avoidClasses = !!((_a = tamaguiConfig.animations) == null ? void 0 : _a.avoidClasses);
     AnimatedText = (_b = tamaguiConfig.animations) == null ? void 0 : _b.Text;
     AnimatedView = (_c = tamaguiConfig == null ? void 0 : tamaguiConfig.animations) == null ? void 0 : _c.View;
-    initialTheme = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]];
+    initialTheme = initialTheme || proxyThemeVariables(conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]]);
     initialSplitStyles = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, {
       mounted: true,
       hover: false,
       press: false,
       pressIn: false,
       focus: false,
-      resolveVariablesAs: "both"
+      resolveVariablesAs: "both",
+      keepVariantsAsProps: true
     });
     const { style, viewProps } = initialSplitStyles;
     defaultNativeStyle = {};

package/dist/jsx/createTamagui.js

@@ -47,6 +47,7 @@ function createTamagui(config) {
                 addVar(val[fkey]);
               } else {
                 for (const fskey in val[fkey]) {
+                  console.log("add", fkey, fskey, val[fkey][fskey]);
                   addVar(val[fkey][fskey]);
                 }
               }
@@ -106,11 +107,35 @@ ${vars}
     };
   })();
   const tokensParsed = parseTokens(config.tokens);
+  const fontsParsed = (() => {
+    if (!config.fonts) {
+      throw new Error(`No fonts defined!`);
+    }
+    const res = {};
+    for (const familyName in config.fonts) {
+      const family = config.fonts[familyName];
+      const parsed = {};
+      for (const attrKey in family) {
+        const attr = family[attrKey];
+        if (attrKey === "family") {
+          parsed[attrKey] = attr;
+          continue;
+        }
+        parsed[attrKey] = Object.keys(attr).reduce((acc, cur) => {
+          acc[`$${cur}`] = attr[cur];
+          return acc;
+        }, {});
+      }
+      res[`$${familyName}`] = parsed;
+    }
+    return res;
+  })();
   const getCSS = /* @__PURE__ */ __name(() => {
     return `${themeConfig.css}
 ${getInsertedRules().join("\n")}`;
   }, "getCSS");
   const next = {
+    fonts: {},
     animations: {},
     shorthands: {},
     media: {},
@@ -120,6 +145,7 @@ ${getInsertedRules().join("\n")}`;
       defaultTheme: "light",
       ...config
     }),
+    fontsParsed,
     themeConfig,
     tokensParsed,
     parsed: true,
@@ -138,24 +164,6 @@ const parseTokens = /* @__PURE__ */ __name((tokens) => {
   const res = {};
   for (const key in tokens) {
     res[key] = {};
-    if (key === "font") {
-      for (const family in tokens.font) {
-        const obj = {};
-        res.font[`$${family}`] = obj;
-        for (const attrKey in tokens.font[family]) {
-          const attr = tokens.font[family][attrKey];
-          if (attrKey === "family") {
-            obj[attrKey] = attr;
-            continue;
-          }
-          obj[attrKey] = Object.keys(attr).reduce((acc, cur) => {
-            acc[`$${cur}`] = attr[cur];
-            return acc;
-          }, {});
-        }
-      }
-      continue;
-    }
     for (const skey in tokens[key]) {
       res[key][`$${skey}`] = tokens[key][skey];
     }

package/dist/jsx/createTokens.js

@@ -6,17 +6,13 @@ function createTokens(tokens) {
   if (process.env.NODE_ENV === "development") {
     validateTokens(tokens);
   }
-  return setupTokens(tokens);
-}
-__name(createTokens, "createTokens");
-function setupTokens(tokens) {
   return mapTokensToVariables(tokens);
 }
-__name(setupTokens, "setupTokens");
+__name(createTokens, "createTokens");
 const mapTokensToVariables = /* @__PURE__ */ __name((tokens, parentPath = "") => {
   const res = {};
   for (const key in tokens) {
-    const val = tokens[key];
+    let val = tokens[key];
     const name = parentPath ? `${parentPath}-${key}` : key;
     if (val && typeof val === "object") {
       res[key] = mapTokensToVariables(tokens[key], name);

package/dist/jsx/createVariable.js

@@ -22,12 +22,17 @@ function isVariable(v) {
 }
 __name(isVariable, "isVariable");
 function getVariableValue(v) {
-  if (isVariable(v)) {
+  if (isVariable(v))
     return v.val;
-  }
   return v;
 }
 __name(getVariableValue, "getVariableValue");
+function getVariableName(v) {
+  if (isVariable(v))
+    return v.name;
+  return v;
+}
+__name(getVariableName, "getVariableName");
 const createCSSVariable = /* @__PURE__ */ __name((val, includeVar = true) => {
   const name = val.replace(/[^a-z0-9\_\-]+/i, "_");
   return includeVar ? `var(--${name})` : name;
@@ -37,6 +42,7 @@ export {
   Variable,
   createCSSVariable,
   createVariable,
+  getVariableName,
   getVariableValue,
   isVariable
 };

package/dist/jsx/helpers/createPropMapper.js

@@ -43,7 +43,9 @@ const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
       let variantValue = getVariantFunction(variant, key, value);
       if (variantValue) {
         if (typeof variantValue === "function") {
-          variantValue = variantValue(value, {
+          const fn = variantValue;
+          variantValue = fn(value, {
+            fonts: conf.fontsParsed,
             tokens: conf.tokensParsed,
             theme,
             props: avoidDefaultProps ? props : new Proxy(props, {
@@ -114,25 +116,24 @@ const fontShorthand = {
   fontSize: "size",
   fontWeight: "weight"
 };
-const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed }, theme, fontFamily = "$body", resolveAs) => {
+const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed, fontsParsed }, theme, fontFamily = "$body", resolveAs) => {
   var _a, _b, _c;
   let valOrVar;
   let hasSet = false;
-  const valueName = value[0] === "$" ? value.slice(1) : value;
-  if (valueName in theme) {
-    valOrVar = theme[valueName];
+  if (value in theme) {
+    valOrVar = theme[value];
     hasSet = true;
   } else {
     switch (key) {
       case "fontFamily":
-        valOrVar = ((_a = tokensParsed.font[value]) == null ? void 0 : _a.family) || value;
+        valOrVar = ((_a = fontsParsed[value]) == null ? void 0 : _a.family) || value;
         hasSet = true;
         break;
       case "fontSize":
       case "lineHeight":
       case "letterSpacing":
       case "fontWeight":
-        valOrVar = ((_c = (_b = tokensParsed.font[fontFamily]) == null ? void 0 : _b[fontShorthand[key] || key]) == null ? void 0 : _c[value]) || value;
+        valOrVar = ((_c = (_b = fontsParsed[fontFamily]) == null ? void 0 : _b[fontShorthand[key] || key]) == null ? void 0 : _c[value]) || value;
         hasSet = true;
         break;
     }
@@ -158,7 +159,7 @@ const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed }, theme, fo
   }
   if (process.env.NODE_ENV === "development") {
     if (value && value[0] === "$") {
-      console.warn(`\u26A0\uFE0F Missing token in theme ${theme.name}:`, value);
+      console.warn(`\u26A0\uFE0F Missing token:`, key, value, fontFamily, theme, fontsParsed);
       return null;
     }
   }

package/dist/jsx/helpers/extendStaticConfig.js

@@ -35,6 +35,10 @@ function extendStaticConfig(config, parent) {
       ...parent.staticConfig.validStyles,
       ...config.validStyles
     } : parent.staticConfig.validStyles || stylePropsView,
+    defaultVariants: {
+      ...parent.staticConfig.defaultVariants,
+      ...config.defaultVariants
+    },
     defaultProps: {
       ...parent.staticConfig.defaultProps,
       ...parent.staticConfig.defaultVariants,

package/dist/jsx/helpers/getSplitStyles.js

@@ -8,7 +8,7 @@ import {
   validStyles
 } from "@tamagui/helpers";
 import { getConfig } from "../conf";
-import { isWeb } from "../constants/platform";
+import { isClient, isWeb } from "../constants/platform";
 import { mediaQueryConfig, mediaState } from "../hooks/useMedia";
 import { createMediaStyle } from "./createMediaStyle";
 import { fixNativeShadow } from "./fixNativeShadow";
@@ -37,38 +37,42 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
   let cur = null;
   let transforms = {};
   function mergeClassName(key, val) {
-    if (!val)
+    if (!val) {
       return;
+    }
     if (val.startsWith("_transform-")) {
       const isMediaOrPseudo = key !== "transform";
       const isMedia = isMediaOrPseudo && key[11] === "_";
       const isPsuedo = isMediaOrPseudo && key[11] === "0" || key.endsWith("Style");
       const namespace = isMedia ? key.split("_")[2] : isPsuedo ? key.split("-")[1] : "transform";
       let transform = insertedTransforms[val];
-      if (!transform) {
-        updateInserted();
-        transform = insertedTransforms[val];
-      }
-      if (!transform) {
-        if (isWeb && val[0] !== "_") {
-          transform = val;
-        } else {
-          console.log("?", key, val);
+      if (isClient) {
+        if (!transform) {
+          updateInserted();
+          transform = insertedTransforms[val];
         }
-      }
-      if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
-        console.log("  \xBB getSplitStyles mergeClassName transform", { key, val, namespace, transform, insertedTransforms });
-      }
-      if (process.env.NODE_ENV === "development") {
         if (!transform) {
-          console.log("NO TRANSFORM?", { key, val, transform });
+          if (isWeb && val[0] !== "_") {
+            transform = val;
+          } else {
+            console.trace("?", key, val, cur, props, state);
+          }
+        }
+        if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+          console.log("  \xBB getSplitStyles mergeClassName transform", { key, val, namespace, transform, insertedTransforms });
+        }
+        if (process.env.NODE_ENV === "development") {
+          if (!transform) {
+            console.trace("NO TRANSFORM?", { key, val, transform });
+          }
         }
       }
       transforms[namespace] = transforms[namespace] || ["", ""];
       const identifier = val.replace("_transform", "");
-      console.warn("?bug2", key, val, transform, insertedTransforms[val]);
       transforms[namespace][0] += identifier;
-      transforms[namespace][1] += transform;
+      if (transform) {
+        transforms[namespace][1] += transform;
+      }
     } else {
       classNames[key] = val;
     }
@@ -85,8 +89,8 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
       const atomic = getStylesAtomic(cur);
       for (const atomicStyle of atomic) {
         if (!state.noClassNames) {
-          mergeClassName(atomicStyle.property, atomicStyle.identifier);
           insertStyleRule(atomicStyle.identifier, atomicStyle.rules[0]);
+          mergeClassName(atomicStyle.property, atomicStyle.identifier);
         } else {
           style[atomicStyle.property] = atomicStyle.value;
         }
@@ -114,13 +118,11 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
     if (keyInit === "className" || validStyleProps[keyInit] && valInit && valInit[0] === "_") {
       push();
       mergeClassName(keyInit, valInit);
-      if (cur) {
-        if (cur[keyInit])
-          console.warn("just want to see how used");
-        delete cur[keyInit];
-      }
       continue;
     }
+    if (state.keepVariantsAsProps && staticConfig.defaultVariants && keyInit in staticConfig.defaultVariants) {
+      viewProps[keyInit] = valInit;
+    }
     if (!isMedia && !isPseudo && !((_a = staticConfig.variants) == null ? void 0 : _a[keyInit]) && !validStyleProps[keyInit] && !conf.shorthands[keyInit]) {
       viewProps[keyInit] = valInit;
       continue;
@@ -154,8 +156,8 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
         if (isWeb && !state.noClassNames) {
           const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] });
           for (const style2 of pseudoStyles) {
-            mergeClassName(`${style2.property}-${key}`, style2.identifier);
             insertStyleRule(style2.identifier, style2.rules[0]);
+            mergeClassName(`${style2.property}-${key}`, style2.identifier);
           }
         }
         continue;
@@ -176,8 +178,8 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
           const mediaStyles = getStylesAtomic(mediaStyle);
           for (const style2 of mediaStyles) {
             const out2 = createMediaStyle(style2, mediaKeyShort, mediaQueryConfig);
-            mergeClassName(`${out2.identifier}-${mediaKey}`, out2.identifier);
             insertStyleRule(out2.identifier, out2.styleRule);
+            mergeClassName(`${out2.identifier}-${mediaKey}`, out2.identifier);
           }
         } else {
           if (mediaState[mediaKey]) {
@@ -217,10 +219,11 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
     for (const namespace in transforms) {
       const [hash, val] = transforms[namespace];
       const identifier = `_transform${hash}`;
-      if (!insertedTransforms[identifier]) {
-        const rule = `.${identifier} { transform: ${val}; }`;
-        console.log("insert", rule);
-        insertStyleRule(identifier, rule);
+      if (isClient) {
+        if (!insertedTransforms[identifier]) {
+          const rule = `.${identifier} { transform: ${val}; }`;
+          insertStyleRule(identifier, rule);
+        }
       }
       classNames[namespace] = identifier;
     }

package/dist/jsx/helpers/insertStyleRule.js

@@ -15,7 +15,7 @@ function addTransform(identifier, css, rule) {
       console.trace();
       console.groupEnd();
     } else {
-      console.error(`Missing transform`, identifier);
+      console.error(`Missing transform`, identifier, css, rule);
     }
     return;
   }