@tamagui/web 1.122.7 → 1.123.0

package/src/hooks/useTheme.tsx

@@ -3,7 +3,6 @@ import {
   useContext,
   useEffect,
   useLayoutEffect,
-  useMemo,
   useRef,
   useState,
   type MutableRefObject,
@@ -16,7 +15,6 @@ import { ThemeManager, getHasThemeUpdatingProps } from '../helpers/ThemeManager'
 import { ThemeManagerContext } from '../helpers/ThemeManagerContext'
 import { isEqualShallow } from '../helpers/createShallowSetState'
 import type {
-  DebugProp,
   ThemeParsed,
   ThemeProps,
   Tokens,
@@ -72,16 +70,6 @@ export type UseThemeResult = {
   [Key in string & {}]?: ThemeGettable<Variable<any>>
 }
 
-// not used by anything but its technically more correct type, but its annoying to have in intellisense so leaving it
-// type SimpleTokens = NonSpecificTokens extends `$${infer Token}` ? Token : never
-// export type UseThemeWithTokens = {
-//   [Key in keyof ThemeParsed | keyof SimpleTokens]: ThemeGettable<
-//     Key extends keyof ThemeParsed
-//       ? ThemeParsed[Key]
-//       : Variable<ThemeValueGet<`$${Key}`> extends never ? any : ThemeValueGet<`$${Key}`>>
-//   >
-// }
-
 export const useTheme = (props: ThemeProps = emptyProps) => {
   const [_, theme] = useThemeWithState(props)
   const res = theme
@@ -92,7 +80,6 @@ export const useThemeWithState = (
   props: UseThemeWithStateProps
 ): [ChangedThemeResponse, ThemeParsed] => {
   const keys = useRef<string[] | null>(null)
-
   const changedThemeState = useChangeThemeEffect(props, false, keys)
 
   // @ts-expect-error
@@ -112,18 +99,7 @@ export const useThemeWithState = (
     }
   }
 
-  const themeProxied = useMemo(() => {
-    // reset keys on new theme
-    if (keys.current) {
-      keys.current = null
-    }
-
-    if (!themeManager || !state?.theme) {
-      return {}
-    }
-
-    return getThemeProxied(state, props.deopt, keys, themeManager, props.debug)
-  }, [state?.theme, themeManager, props.deopt, props.debug])
+  const themeProxied = getThemeProxied(props, state, keys, themeManager)
 
   if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') {
     console.groupCollapsed(`  🔹 [${themeManager?.id}] useTheme =>`, state?.name)
@@ -140,141 +116,130 @@ export const useThemeWithState = (
   return [changedThemeState, themeProxied]
 }
 
+const emptyObject = {}
+
+// only proxy each theme one time, after that we know that renders are sync,
+// so we can just change the focus of the proxied theme and it can be re-used
+const ProxiedThemes: Map<ThemeParsed, UseThemeResult> = new Map()
+
+let curKeys: MutableRefObject<string[] | null>
+let curProps: UseThemeWithStateProps
+let curThemeManger: ThemeManager
+
 function getThemeProxied(
-  { theme, name, scheme }: ThemeManagerState,
-  deopt = false,
-  keys: MutableRefObject<string[] | null>,
-  themeManager: ThemeManager,
-  debug?: DebugProp
+  // underscore to prevent accidental usage below
+  _props: UseThemeWithStateProps,
+  state: ThemeManagerState | undefined,
+  _keys: MutableRefObject<string[] | null>,
+  _themeManager?: ThemeManager | null
 ): UseThemeResult {
-  if (!theme) return {}
+  const theme = state?.theme
+
+  if (!theme || !_themeManager) {
+    return emptyObject
+  }
+
+  curKeys = _keys
+  curProps = _props
+  curThemeManger = _themeManager
+
+  if (ProxiedThemes.has(theme)) {
+    const proxied = ProxiedThemes.get(theme)!
+    return proxied
+  }
+
+  // first time running on this theme, create:
+  // from here on only use current*
+
+  const { name, scheme } = state
 
   const config = getConfig()
 
   function track(key: string) {
-    if (!keys.current) {
-      keys.current = []
-
+    if (!curKeys) return
+    if (!curKeys.current) {
+      curKeys.current = []
       // tracking new key for first time, do an update check
-      setTimeout(() => {
-        themeManager?.selfUpdate()
-      })
+      // console.log('check')
+      // setTimeout(() => {
+      //   curThemeManger?.selfUpdate()
+      // })
     }
-    keys.current.push(key)
-    if (process.env.NODE_ENV === 'development' && debug) {
+    curKeys.current.push(key)
+    if (process.env.NODE_ENV === 'development' && curProps.debug) {
       console.info(` 🎨 useTheme() tracking new key: ${key}`)
     }
   }
 
-  return new Proxy(theme, {
-    has(_, key) {
-      if (Reflect.has(theme, key)) {
-        return true
-      }
-      if (typeof key === 'string') {
-        if (key[0] === '$') key = key.slice(1)
-        return themeManager?.allKeys.has(key)
-      }
-    },
-    get(_, key) {
-      if (
-        // dont ask me, idk why but on hermes you can see that useTheme()[undefined] passes in STRING undefined to proxy
-        // if someone is crazy enough to use "undefined" as a theme key then this not working is on them
-        key !== 'undefined' &&
-        typeof key === 'string'
-      ) {
-        // auto convert variables to plain
-        const keyString = key[0] === '$' ? key.slice(1) : key
-        const val = theme[keyString]
-
-        if (val && typeof val === 'object') {
-          // TODO this could definitely be done better by at the very minimum
-          // proxying it up front and just having a listener here
-          return new Proxy(val as any, {
-            // when they touch the actual value we only track it
-            // if its a variable (web), its ignored!
-            get(_, subkey) {
-              if (subkey === 'val') {
-                if (!globalThis.tamaguiAvoidTracking) {
-                  if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-                    console.info(
-                      ` 🎨 useTheme() tracking new key because of .val access`,
-                      new Error().stack
-                    )
-                  }
-                  // always track .val
-                  track(keyString)
-                }
-              } else if (subkey === 'get') {
-                return (platform?: 'web') => {
-                  const outVal = getVariable(val)
-
-                  if (process.env.TAMAGUI_TARGET === 'native') {
-                    // ios can avoid re-rendering in some cases when we are using a root light/dark
-                    // disabled in cases where we have animations
-                    if (
-                      platform !== 'web' &&
-                      isIos &&
-                      !deopt &&
-                      getSetting('fastSchemeChange') &&
-                      !shouldDeoptDueToParentScheme(themeManager)
-                    ) {
-                      if (scheme) {
-                        const oppositeScheme = scheme === 'dark' ? 'light' : 'dark'
-                        const oppositeName = name.replace(scheme, oppositeScheme)
-                        const color = getVariable(config.themes[name]?.[keyString])
-                        const oppositeColor = getVariable(
-                          config.themes[oppositeName]?.[keyString]
-                        )
-
-                        const dynamicVal = {
-                          dynamic: {
-                            [scheme]: color,
-                            [oppositeScheme]: oppositeColor,
-                          },
-                        }
-
-                        return dynamicVal
-                      }
-                    }
-
-                    if (process.env.NODE_ENV === 'development' && debug) {
-                      console.info(` 🎨 useTheme() tracking new key because of: 
-                        not web: ${platform !== 'web'}
-                        isIOS: ${isIos}
-                        deopt: ${deopt}
-                        fastScheme: ${getSetting('fastSchemeChange')}
-                        inversed: ${getIsInversed(themeManager)}
-                      `)
-                    }
-
-                    track(keyString)
-                  }
-
-                  return outVal
+  const proxied = Object.fromEntries(
+    Object.entries(theme).flatMap(([key, value]) => {
+      const proxied = {
+        ...value,
+        get val() {
+          // when they touch the actual value we only track it if its a variable (web), its ignored!
+          if (!globalThis.tamaguiAvoidTracking) {
+            // always track .val
+            track(key)
+          }
+          return value.val
+        },
+        get(platform?: 'web') {
+          const outVal = getVariable(value)
+
+          if (process.env.TAMAGUI_TARGET === 'native') {
+            // ios can avoid re-rendering in some cases when we are using a root light/dark
+            // disabled in cases where we have animations
+            if (
+              platform !== 'web' &&
+              isIos &&
+              !curProps.deopt &&
+              getSetting('fastSchemeChange') &&
+              !shouldDeoptDueToParentScheme(curThemeManger)
+            ) {
+              if (scheme) {
+                const oppositeScheme = scheme === 'dark' ? 'light' : 'dark'
+                const oppositeName = name.replace(scheme, oppositeScheme)
+                const color = getVariable(config.themes[name]?.[key])
+                const oppositeColor = getVariable(config.themes[oppositeName]?.[key])
+
+                const dynamicVal = {
+                  dynamic: {
+                    [scheme]: color,
+                    [oppositeScheme]: oppositeColor,
+                  },
                 }
+
+                return dynamicVal
               }
+            }
 
-              return Reflect.get(val as any, subkey)
-            },
-          })
-        }
+            if (process.env.NODE_ENV === 'development' && curProps.debug) {
+              console.info(` 🎨 useTheme() tracking new key because of: 
+                not web: ${platform !== 'web'}
+                isIOS: ${isIos}
+                deopt: ${curProps.deopt}
+                fastScheme: ${getSetting('fastSchemeChange')}
+                inversed: ${getIsInversed(curThemeManger)}
+              `)
+            }
 
-        if (
-          process.env.NODE_ENV === 'development' &&
-          process.env.TAMAGUI_FEAT_THROW_ON_MISSING_THEME_VALUE === '1'
-        ) {
-          throw new Error(
-            `[tamagui] No theme key "${key}" found in theme ${name}. \n  Keys in theme: ${Object.keys(
-              theme
-            ).join(', ')}`
-          )
-        }
+            track(key)
+          }
+
+          return outVal
+        },
       }
 
-      return Reflect.get(_, key)
-    },
-  }) as UseThemeResult
+      return [
+        [key, proxied],
+        [`$${key}`, proxied],
+      ]
+    })
+  ) as UseThemeResult
+
+  ProxiedThemes.set(theme, proxied)
+
+  return proxied
 }
 
 // to tell if we are inversing the scheme anywhere in the tree, if so we need to de-opt

package/src/types.tsx

@@ -12,25 +12,22 @@ import type {
 } from 'react'
 import type {
   Text as RNText,
-  TextProps as ReactTextProps,
   TextStyle as RNTextStyle,
+  TextProps as ReactTextProps,
   View,
   ViewProps,
   ViewStyle,
 } from 'react-native'
-
 import type { Variable } from './createVariable'
 import type { StyledContext } from './helpers/createStyledContext'
 import type { CSSColorNames } from './interfaces/CSSColorNames'
+import type { ColorKeys, SizeKeys, SpaceKeys } from './interfaces/KeyTypes'
 import type { RNOnlyProps } from './interfaces/RNExclusiveTypes'
-import type { LanguageContextType } from './views/FontLanguage.types'
-import type { ThemeProviderProps } from './views/ThemeProvider'
+import type { TamaguiComponentPropsBaseBase } from './interfaces/TamaguiComponentPropsBaseBase'
 import type { TamaguiComponentState } from './interfaces/TamaguiComponentState'
 import type { WebOnlyPressEvents } from './interfaces/WebOnlyPressEvents'
-import type { TamaguiComponentPropsBaseBase } from './interfaces/TamaguiComponentPropsBaseBase'
-import type { SizeKeys, SpaceKeys, ColorKeys } from './interfaces/KeyTypes'
-import { styled } from './styled'
-import { Text } from './views/Text'
+import type { LanguageContextType } from './views/FontLanguage.types'
+import type { ThemeProviderProps } from './views/ThemeProvider'
 
 export * from './interfaces/KeyTypes'
 export * from './interfaces/TamaguiComponentState'

package/src/views/ThemeProvider.tsx

@@ -17,20 +17,22 @@ export type ThemeProviderProps = {
 }
 
 export const ThemeProvider = (props: ThemeProviderProps) => {
+  const disableRootThemeClass =
+    props.disableRootThemeClass ?? getSetting('disableRootThemeClass')
+  const themeClassNameOnRoot =
+    props.themeClassNameOnRoot ?? getSetting('themeClassNameOnRoot')
+
   // ensure theme is attached to root body node as well to work with modals by default
   if (isClient) {
     React.useLayoutEffect(() => {
-      if (props.disableRootThemeClass) return
+      if (disableRootThemeClass) return
       const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`
-      const target =
-        (props.themeClassNameOnRoot ?? getSetting('themeClassNameOnRoot'))
-          ? document.documentElement
-          : document.body
+      const target = themeClassNameOnRoot ? document.documentElement : document.body
       target.classList.add(cn)
       return () => {
         target.classList.remove(cn)
       }
-    }, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot])
+    }, [props.defaultTheme, disableRootThemeClass, themeClassNameOnRoot])
   }
 
   return (
@@ -38,7 +40,7 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
       className={props.className}
       name={props.defaultTheme}
       // if root class disabled, force class here
-      forceClassName={!props.disableRootThemeClass}
+      forceClassName={!disableRootThemeClass && !themeClassNameOnRoot}
       // @ts-expect-error
       _isRoot
     >

package/types/helpers/proxyThemeToParents.d.ts

@@ -1,4 +1,4 @@
 import type { DedupedThemes, ThemeParsed } from '../types';
 export declare function proxyThemesToParents(dedupedThemes: DedupedThemes): Record<string, ThemeParsed>;
-export declare function proxyThemeToParents(themeName: string, theme: ThemeParsed): ThemeParsed;
+export declare function proxyThemeToParents(themeName: string, theme: ThemeParsed): {};
 //# sourceMappingURL=proxyThemeToParents.d.ts.map

package/types/helpers/proxyThemeToParents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"proxyThemeToParents.d.ts","sourceRoot":"","sources":["../../src/helpers/proxyThemeToParents.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAM1D,wBAAgB,oBAAoB,CAClC,aAAa,EAAE,aAAa,GAC3B,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAsB7B;AAED,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,eAqCxE"}
+{"version":3,"file":"proxyThemeToParents.d.ts","sourceRoot":"","sources":["../../src/helpers/proxyThemeToParents.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAM1D,wBAAgB,oBAAoB,CAClC,aAAa,EAAE,aAAa,GAC3B,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAsB7B;AAED,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,MAmBxE"}

package/types/helpers/sortString.d.ts

@@ -1,2 +1,2 @@
-export declare const sortString: (a: string, b: string) => 0 | 1 | -1;
+export declare const sortString: (a: string, b: string) => 1 | 0 | -1;
 //# sourceMappingURL=sortString.d.ts.map

package/types/hooks/useConfiguration.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useConfiguration.d.ts","sourceRoot":"","sources":["../../src/hooks/useConfiguration.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,gBAAgB;;;;;;;+BAUitE,CAAC;;;;;uBAAipjB,CAAC;aAAe,CAAC;;;;aAAo+B,CAAC;YAAqB,CAAC;cAAsB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CADl6pB,CAAA"}
+{"version":3,"file":"useConfiguration.d.ts","sourceRoot":"","sources":["../../src/hooks/useConfiguration.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,gBAAgB;;;;;;;+BAU0oE,CAAC;;;;;uBAAipjB,CAAC;aAAe,CAAC;;;;aAAo+B,CAAC;YAAqB,CAAC;cAAsB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAD31pB,CAAA"}

package/types/hooks/useTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.tsx"],"names":[],"mappings":"AACA,OAAO,EAOL,KAAK,gBAAgB,EACtB,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAChE,OAAO,EAAE,YAAY,EAA4B,MAAM,yBAAyB,CAAA;AAGhF,OAAO,KAAK,EAEV,WAAW,EACX,UAAU,EACV,MAAM,EACN,sBAAsB,EACtB,WAAW,EACX,kBAAkB,EACnB,MAAM,UAAU,CAAA;AAGjB,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,CAAC,EAAE,iBAAiB,CAAA;IACzB,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,YAAY,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IAClC,UAAU,EAAE,OAAO,CAAA;IAGnB,QAAQ,CAAC,EAAE,IAAI,GAAG,OAAO,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAID,MAAM,MAAM,aAAa,CAAC,GAAG,IAAI,GAAG,GAAG;IACrC;;;;;;;;;OASG;IACH,GAAG,EAAE,CACH,QAAQ,CAAC,EAAE,KAAK,KAEd,MAAM,GACN,CAAC,GAAG,SAAS,QAAQ,CAAC,MAAM,CAAC,CAAC,GAC1B,CAAC,SAAS,kBAAkB,GAC1B,GAAG,GACH,OAAO,CAAC,CAAC,EAAE,QAAQ,CAAC,GACtB,GAAG,SAAS,WAAW,GACrB,MAAM,GAAG,MAAM,GACf,OAAO,CAAC,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;KAC1B,GAAG,IAAI,MAAM,WAAW,GAAG,MAAM,MAAM,CAAC,OAAO,CAAC,GAAG,aAAa,CAC/D,GAAG,SAAS,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CACjE;CACF,GAAG;KAED,GAAG,IAAI,MAAM,GAAG,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;CACpD,CAAA;AAYD,eAAO,MAAM,QAAQ,WAAW,UAAU,KAG1B,cACf,CAAA;AAED,eAAO,MAAM,iBAAiB,UACrB,sBAAsB,KAC5B,CAAC,oBAAoB,EAAE,WAAW,CAgDpC,CAAA;AA8JD,eAAO,MAAM,mBAAmB,mBAA0B,CAAA;AAO1D,eAAO,MAAM,eAAe,OAAQ,MAAM,6BAEzC,CAAA;AAiDD,eAAO,MAAM,oBAAoB,UACxB,sBAAsB,2BAEtB,gBAAgB,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,KACvC,oBAqUF,CAAA"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,gBAAgB,EACtB,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAChE,OAAO,EAAE,YAAY,EAA4B,MAAM,yBAAyB,CAAA;AAGhF,OAAO,KAAK,EACV,WAAW,EACX,UAAU,EACV,MAAM,EACN,sBAAsB,EACtB,WAAW,EACX,kBAAkB,EACnB,MAAM,UAAU,CAAA;AAGjB,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,CAAC,EAAE,iBAAiB,CAAA;IACzB,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,YAAY,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IAClC,UAAU,EAAE,OAAO,CAAA;IAGnB,QAAQ,CAAC,EAAE,IAAI,GAAG,OAAO,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAID,MAAM,MAAM,aAAa,CAAC,GAAG,IAAI,GAAG,GAAG;IACrC;;;;;;;;;OASG;IACH,GAAG,EAAE,CACH,QAAQ,CAAC,EAAE,KAAK,KAEd,MAAM,GACN,CAAC,GAAG,SAAS,QAAQ,CAAC,MAAM,CAAC,CAAC,GAC1B,CAAC,SAAS,kBAAkB,GAC1B,GAAG,GACH,OAAO,CAAC,CAAC,EAAE,QAAQ,CAAC,GACtB,GAAG,SAAS,WAAW,GACrB,MAAM,GAAG,MAAM,GACf,OAAO,CAAC,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;KAC1B,GAAG,IAAI,MAAM,WAAW,GAAG,MAAM,MAAM,CAAC,OAAO,CAAC,GAAG,aAAa,CAC/D,GAAG,SAAS,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CACjE;CACF,GAAG;KAED,GAAG,IAAI,MAAM,GAAG,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;CACpD,CAAA;AAED,eAAO,MAAM,QAAQ,WAAW,UAAU,KAG1B,cACf,CAAA;AAED,eAAO,MAAM,iBAAiB,UACrB,sBAAsB,KAC5B,CAAC,oBAAoB,EAAE,WAAW,CAoCpC,CAAA;AAmJD,eAAO,MAAM,mBAAmB,mBAA0B,CAAA;AAO1D,eAAO,MAAM,eAAe,OAAQ,MAAM,6BAEzC,CAAA;AAiDD,eAAO,MAAM,oBAAoB,UACxB,sBAAsB,2BAEtB,gBAAgB,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,KACvC,oBAqUF,CAAA"}

package/types/types.d.ts

@@ -1,17 +1,17 @@
 import type { StyleObject } from '@tamagui/helpers';
 import type { Properties } from 'csstype';
 import type { CSSProperties, ComponentType, ForwardRefExoticComponent, FunctionComponent, HTMLAttributes, ReactNode, RefAttributes, RefObject } from 'react';
-import type { Text as RNText, TextProps as ReactTextProps, TextStyle as RNTextStyle, View, ViewProps, ViewStyle } from 'react-native';
+import type { Text as RNText, TextStyle as RNTextStyle, TextProps as ReactTextProps, View, ViewProps, ViewStyle } from 'react-native';
 import type { Variable } from './createVariable';
 import type { StyledContext } from './helpers/createStyledContext';
 import type { CSSColorNames } from './interfaces/CSSColorNames';
+import type { ColorKeys, SizeKeys, SpaceKeys } from './interfaces/KeyTypes';
 import type { RNOnlyProps } from './interfaces/RNExclusiveTypes';
-import type { LanguageContextType } from './views/FontLanguage.types';
-import type { ThemeProviderProps } from './views/ThemeProvider';
+import type { TamaguiComponentPropsBaseBase } from './interfaces/TamaguiComponentPropsBaseBase';
 import type { TamaguiComponentState } from './interfaces/TamaguiComponentState';
 import type { WebOnlyPressEvents } from './interfaces/WebOnlyPressEvents';
-import type { TamaguiComponentPropsBaseBase } from './interfaces/TamaguiComponentPropsBaseBase';
-import type { SizeKeys, SpaceKeys, ColorKeys } from './interfaces/KeyTypes';
+import type { LanguageContextType } from './views/FontLanguage.types';
+import type { ThemeProviderProps } from './views/ThemeProvider';
 export * from './interfaces/KeyTypes';
 export * from './interfaces/TamaguiComponentState';
 export type { MediaStyleObject, StyleObject } from '@tamagui/helpers';