@tamagui/web 1.88.13 → 1.88.15

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "mappings": "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",
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/esm/views/ThemeDebug.mjs

@@ -0,0 +1,57 @@
+import { useDidFinishSSR } from "@tamagui/use-did-finish-ssr";
+import { useForceUpdate } from "@tamagui/use-force-update";
+import { useEffect, useId, useState } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+let node;
+function ThemeDebug({
+  themeState,
+  themeProps,
+  children
+}) {
+  if (process.env.NODE_ENV === "development") {
+    const isHydrated = useDidFinishSSR(),
+      [onChangeCount, setOnChangeCount] = useState(0),
+      rerender = useForceUpdate(),
+      id = useId();
+    return process.env.NODE_ENV === "development" && typeof document < "u" && (node || (node = document.createElement("div"), node.style.height = "200px", node.style.overflowY = "scroll", node.style.position = "fixed", node.style.zIndex = 1e7, node.style.bottom = "30px", node.style.left = "30px", node.style.right = "30px", node.style.display = "flex", node.style.border = "1px solid #888", node.style.flexDirection = "row", node.style.background = "var(--background)", document.body.appendChild(node))), useEffect(() => {
+      themeState.themeManager?.parentManager?.onChangeTheme((name, manager) => {
+        setOnChangeCount(p => ++p), console.warn(`theme changed for ${themeState.themeManager?.id} from parent ${themeState.themeManager?.parentManager?.id} to new name`, name);
+      });
+    }, [themeState.themeManager]), useEffect(() => {
+      const tm = setInterval(rerender, 1e3);
+      return () => clearTimeout(tm);
+    }, []), themeProps["disable-child-theme"] || !isHydrated ? children : /* @__PURE__ */jsxs(Fragment, {
+      children: [createPortal( /* @__PURE__ */jsxs("code", {
+        style: {
+          whiteSpace: "pre",
+          maxWidth: 250,
+          overflow: "auto",
+          padding: 5
+        },
+        children: ["<Theme ", id, " />\xA0", JSON.stringify({
+          propsName: themeProps.name,
+          name: themeState?.state?.name,
+          className: themeState?.state?.className,
+          inverse: themeProps.inverse,
+          forceClassName: themeProps.forceClassName,
+          parent: themeState.themeManager?.state.parentName,
+          id: themeState.themeManager?.id,
+          parentId: themeState.themeManager?.parentManager?.id,
+          isNew: themeState.isNewTheme,
+          onChangeCount,
+          listening: [...(themeState.themeManager?._listeningIds || [])].join(","),
+          _numChangeEventsSent: themeState.themeManager?._numChangeEventsSent
+        }, null, 2)]
+      }), node), /* @__PURE__ */jsx("div", {
+        style: {
+          color: "red"
+        },
+        children: id
+      }), children]
+    });
+  }
+  return children;
+}
+ThemeDebug.displayName = "ThemeDebug";
+export { ThemeDebug };

package/dist/esm/views/ThemeProvider.mjs

@@ -0,0 +1,20 @@
+import { isClient } from "@tamagui/constants";
+import { useLayoutEffect } from "react";
+import { THEME_CLASSNAME_PREFIX } from "../constants/constants.mjs";
+import { Theme } from "./Theme.mjs";
+import { jsx } from "react/jsx-runtime";
+const ThemeProvider = props => (isClient && useLayoutEffect(() => {
+  if (props.disableRootThemeClass) return;
+  const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`,
+    target = props.themeClassNameOnRoot ? document.documentElement : document.body;
+  return target.classList.add(cn), () => {
+    target.classList.remove(cn);
+  };
+}, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot]), /* @__PURE__ */jsx(Theme, {
+  className: props.className,
+  name: props.defaultTheme,
+  forceClassName: !props.disableRootThemeClass,
+  _isRoot: !0,
+  children: props.children
+}));
+export { ThemeProvider };

package/dist/esm/views/View.mjs

@@ -0,0 +1,9 @@
+import { validStyles } from "@tamagui/helpers";
+import { stackDefaultStyles } from "../constants/constants.mjs";
+import { createComponent } from "../createComponent.mjs";
+const View = createComponent({
+  acceptsClassName: !0,
+  defaultProps: stackDefaultStyles,
+  validStyles
+});
+export { View };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.88.13",
+  "version": "1.88.15",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,19 +27,19 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "1.88.13",
-    "@tamagui/constants": "1.88.13",
-    "@tamagui/helpers": "1.88.13",
-    "@tamagui/normalize-css-color": "1.88.13",
-    "@tamagui/timer": "1.88.13",
-    "@tamagui/use-did-finish-ssr": "1.88.13",
-    "@tamagui/use-event": "1.88.13",
-    "@tamagui/use-force-update": "1.88.13",
+    "@tamagui/compose-refs": "1.88.15",
+    "@tamagui/constants": "1.88.15",
+    "@tamagui/helpers": "1.88.15",
+    "@tamagui/normalize-css-color": "1.88.15",
+    "@tamagui/timer": "1.88.15",
+    "@tamagui/use-did-finish-ssr": "1.88.15",
+    "@tamagui/use-event": "1.88.15",
+    "@tamagui/use-force-update": "1.88.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@tamagui/build": "1.88.13",
+    "@tamagui/build": "1.88.15",
     "@testing-library/react": "^14.0.0",
     "csstype": "^3.0.10",
     "typescript": "^5.3.3",
@@ -57,7 +57,7 @@
     "./native": {
       "import": "./dist/esm/index.native.js",
       "require": "./dist/cjs/index.native.js",
-      "react-native": "./dist/cjs/index.native.native.js"
+      "react-native": "./dist/cjs/index.native.js"
     },
     "./inject-styles": {
       "types": "./types/inject-styles.d.ts",

package/src/config.ts

@@ -1,6 +1,6 @@
 import { isWeb } from '@tamagui/constants'
 
-import {
+import type {
   ConfigListener,
   TamaguiInternalConfig,
   Token,

package/src/contexts/ComponentContext.tsx

@@ -1,5 +1,5 @@
 import { createStyledContext } from '../helpers/createStyledContext'
-import { ComponentContextI, GroupStateListener } from '../types'
+import type { ComponentContextI, GroupStateListener } from '../types'
 
 export const ComponentContext = createStyledContext<ComponentContextI>({
   disableSSR: undefined,

package/src/createComponent.tsx

@@ -37,7 +37,7 @@ import { themeable } from './helpers/themeable'
 import { mediaKeyMatch, setMediaShouldUpdate, useMedia } from './hooks/useMedia'
 import { useThemeWithState } from './hooks/useTheme'
 import { hooks } from './setupHooks'
-import {
+import type {
   ComponentContextI,
   DebugProp,
   DisposeFn,
@@ -62,9 +62,9 @@ import {
   UseAnimationProps,
   UseThemeWithStateProps,
 } from './types'
-import { WebOnlyPressEvents } from './interfaces/WebOnlyPressEvents'
-import { TamaguiComponentState } from './interfaces/TamaguiComponentState'
-import { TamaguiComponentEvents } from './interfaces/TamaguiComponentEvents'
+import type { WebOnlyPressEvents } from './interfaces/WebOnlyPressEvents'
+import type { TamaguiComponentState } from './interfaces/TamaguiComponentState'
+import type { TamaguiComponentEvents } from './interfaces/TamaguiComponentEvents'
 import { Slot } from './views/Slot'
 import { getThemedChildren } from './views/Theme'
 import { ThemeDebug } from './views/ThemeDebug'
@@ -925,6 +925,8 @@ export function createComponent<
         onPress ||
         onPressOut ||
         onPressIn ||
+        onMouseDown ||
+        onMouseUp ||
         onLongPress ||
         onClick
     )
@@ -1192,7 +1194,7 @@ export function createComponent<
     }
 
     if (process.env.TAMAGUI_TARGET === 'web') {
-      if (isReactNative && !asChild && !isHOC) {
+      if (isReactNative && !asChild) {
         content = (
           <span
             {...(!isHydrated

package/src/createFont.ts

@@ -1,4 +1,4 @@
-import { FontWeightValues, GenericFont } from './types'
+import type { FontWeightValues, GenericFont } from './types'
 
 const fontWeights: FontWeightValues[] = [
   '100',

package/src/createShorthands.ts

@@ -1,4 +1,4 @@
-import { CreateShorthands } from './types'
+import type { CreateShorthands } from './types'
 
 // just a type helper util
 

package/src/createTamagui.ts

@@ -1,8 +1,9 @@
 import { isWeb } from '@tamagui/constants'
 
 import { configListeners, setConfig, setTokens } from './config'
-import { Variable } from './createVariable'
-import { DeepVariableObject, createVariables } from './createVariables'
+import type { Variable } from './createVariable'
+import type { DeepVariableObject } from './createVariables'
+import { createVariables } from './createVariables'
 import { getThemeCSSRules } from './helpers/getThemeCSSRules'
 import {
   getAllRules,
@@ -15,7 +16,7 @@ import { ensureThemeVariable } from './helpers/themes'
 import { configureMedia } from './hooks/useMedia'
 import { parseFont, registerFontVariables } from './insertFont'
 import { Tamagui } from './Tamagui'
-import {
+import type {
   CreateTamaguiProps,
   DedupedTheme,
   DedupedThemes,

package/src/createTokens.ts

@@ -1,6 +1,6 @@
-import { Variable } from './createVariable'
+import type { Variable } from './createVariable'
 import { createVariables } from './createVariables'
-import { CreateTokens } from './types'
+import type { CreateTokens } from './types'
 
 // tokens.color.dark.red ===> { var: `color-dark-red`, val: '' }
 export function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {

package/src/createVariables.ts

@@ -1,6 +1,7 @@
 import { simpleHash } from '@tamagui/helpers'
 
-import { Variable, createVariable, isVariable } from './createVariable'
+import type { Variable } from './createVariable'
+import { createVariable, isVariable } from './createVariable'
 
 type DeepTokenObject<Val extends string | number = any> = {
   [key: string]: Val | DeepTokenObject<Val>

package/src/defaultComponentState.tsx

@@ -1,4 +1,4 @@
-import { TamaguiComponentState } from './interfaces/TamaguiComponentState'
+import type { TamaguiComponentState } from './interfaces/TamaguiComponentState'
 
 export const defaultComponentState: TamaguiComponentState = {
   hover: false,

package/src/helpers/ThemeManager.tsx

@@ -2,7 +2,7 @@ import { isWeb } from '@tamagui/constants'
 
 import { getThemes } from '../config'
 import { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from '../constants/constants'
-import { ColorScheme, ThemeParsed, ThemeProps } from '../types'
+import type { ColorScheme, ThemeParsed, ThemeProps } from '../types'
 
 type ThemeListener = (
   name: string | null,

package/src/helpers/createShallowSetState.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { DebugProp } from '../types'
+import type React from 'react'
+import type { DebugProp } from '../types'
 
 export function createShallowSetState<State extends Object>(
   setter: React.Dispatch<React.SetStateAction<State>>,

package/src/helpers/expandStyle.ts

@@ -5,7 +5,7 @@
 
 import { isAndroid, isWeb } from '@tamagui/constants'
 
-import { PropMappedValue } from '../types'
+import type { PropMappedValue } from '../types'
 
 export function expandStyle(key: string, value: any): PropMappedValue {
   if (process.env.TAMAGUI_TARGET === 'web') {

package/src/helpers/getExpandedShorthands.ts

@@ -1,5 +1,5 @@
 import { getConfig } from '../config'
-import { Shorthands } from '../types'
+import type { Shorthands } from '../types'
 
 /**
  * @deprecated use useProps instead

package/src/helpers/getSplitStyles.tsx

@@ -77,6 +77,7 @@ import {
 } from './normalizeValueWithProperty'
 import { getPropMappedFontFamily, propMapper } from './propMapper'
 import { pseudoDescriptors, pseudoPriorities } from './pseudoDescriptors'
+import { isObj } from './isObj'
 
 // bugfix for some reason it gets reset
 const IS_STATIC = process.env.IS_STATIC === 'is_static'
@@ -363,8 +364,8 @@ export const getSplitStyles: StyleSplitter = (
       continue
     }
 
-    if (keyInit[0] === '_' && keyInit.startsWith('_style')) {
-      mergeStylePropIntoStyle(styleState, valInit)
+    if (keyInit.startsWith('_style') && isObj(valInit)) {
+      Object.assign(styleState.style, valInit)
       continue
     }
 
@@ -530,6 +531,11 @@ export const getSplitStyles: StyleSplitter = (
     const shouldPassThrough = shouldPassProp || isHOCShouldPassThrough
 
     if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+      // fix native group nesting issues
+      console.groupEnd()
+      console.groupEnd()
+      // fix native group nesting issues
+
       console.groupCollapsed(
         `  🔑 ${keyOg}${keyInit !== keyOg ? ` (shorthand for ${keyInit})` : ''} ${
           shouldPassThrough ? '(pass)' : ''
@@ -1037,7 +1043,19 @@ export const getSplitStyles: StyleSplitter = (
   // also it makes sense that props.style is basically the last to apply,
   // at least more sense than "it applies at the position its defined in the prop loop"
   if (props.style) {
-    mergeStylePropIntoStyle(styleState, props.style)
+    if (isHOC) {
+      viewProps.style = props.style
+    } else {
+      for (const style of [].concat(props.style)) {
+        if (style) {
+          if (style['$$css']) {
+            Object.assign(styleState.classNames, style)
+          } else {
+            Object.assign(styleState.style, style)
+          }
+        }
+      }
+    }
   }
 
   const avoidNormalize = styleProps.noNormalize === false
@@ -1069,16 +1087,17 @@ export const getSplitStyles: StyleSplitter = (
         .forEach(([key, val]) => {
           mergeTransform(style, key, val, true)
         })
+    }
 
-      // Button for example uses disableClassName: true but renders to a 'button' element, so needs this
-      if (process.env.TAMAGUI_TARGET === 'web') {
-        if (
-          !staticConfig.isReactNative &&
-          !styleProps.isAnimated &&
-          Array.isArray(style.transform)
-        ) {
-          style.transform = transformsToString(style.transform) as any
-        }
+    // Button for example uses disableClassName: true but renders to a 'button' element, so needs this
+    if (process.env.TAMAGUI_TARGET === 'web') {
+      if (
+        !staticConfig.isReactNative &&
+        !staticConfig.isHOC &&
+        (styleProps.isAnimated && !conf.animations.supportsCSSVars ? false : true) &&
+        Array.isArray(style.transform)
+      ) {
+        style.transform = transformsToString(style.transform) as any
       }
     }
 
@@ -1385,20 +1404,6 @@ export const getSubStyle = (
   return styleOut
 }
 
-function mergeStylePropIntoStyle(styleState: GetStyleState, cur: Object[] | Object) {
-  if (!cur) return
-  const styles = Array.isArray(cur) ? cur : [cur]
-  for (const style of styles) {
-    if (!style) continue
-    const isRNW = style['$$css']
-    if (isRNW) {
-      Object.assign(styleState.classNames, style)
-    } else {
-      Object.assign(styleState.style, style)
-    }
-  }
-}
-
 // on native no need to insert any css
 const useInsertEffectCompat = isWeb
   ? useInsertionEffect || useIsomorphicLayoutEffect
@@ -1508,8 +1513,10 @@ if (process.env.TAMAGUI_TARGET === 'native') {
       dataDetectorType: 1,
       dynamicTypeRamp: 1,
       elevationAndroid: 1,
+      hapticFeedback: 1,
       importantForAccessibility: 1,
       lineBreakStrategyIOS: 1,
+      maxFontSizeMultiplier: 1,
       minimumFontScale: 1,
       needsOffscreenAlphaCompositing: 1,
       nextFocusDown: 1,

package/src/helpers/getStylesAtomic.ts

@@ -3,17 +3,15 @@
  * Copyright (c) Nicolas Gallagher licensed under the MIT license.
  */
 
-import { StyleObject, simpleHash } from '@tamagui/helpers'
+import type { StyleObject } from '@tamagui/helpers'
+import { simpleHash } from '@tamagui/helpers'
 
 import { getConfig } from '../config'
 import type { DebugProp, TamaguiInternalConfig, ViewStyleWithPseudos } from '../types'
 import { defaultOffset } from './defaultOffset'
 import { normalizeValueWithProperty } from './normalizeValueWithProperty'
-import {
-  PseudoDescriptor,
-  pseudoDescriptors,
-  pseudoDescriptorsBase,
-} from './pseudoDescriptors'
+import type { PseudoDescriptor } from './pseudoDescriptors'
+import { pseudoDescriptors, pseudoDescriptorsBase } from './pseudoDescriptors'
 import { normalizeColor } from './normalizeColor'
 
 // refactor this file away next...

package/src/helpers/getThemeCSSRules.ts

@@ -1,7 +1,8 @@
 import { simpleHash } from '@tamagui/helpers'
 
 import { THEME_CLASSNAME_PREFIX } from '../constants/constants'
-import { Variable, variableToString } from '../createVariable'
+import type { Variable } from '../createVariable'
+import { variableToString } from '../createVariable'
 import type { CreateTamaguiProps, ThemeParsed } from '../types'
 import { tokensValueToVariable } from './registerCSSVariable'
 

package/src/helpers/getVariantExtras.tsx

@@ -1,6 +1,6 @@
 import { getVariableValue } from '../createVariable'
-import { GenericFonts, GetStyleState } from '../types'
-import { LanguageContextType } from '../views/FontLanguage.types'
+import type { GenericFonts, GetStyleState } from '../types'
+import type { LanguageContextType } from '../views/FontLanguage.types'
 
 export function getVariantExtras(styleState: GetStyleState) {
   const { curProps, conf, context, theme } = styleState

package/src/helpers/insertStyleRule.tsx

@@ -186,7 +186,7 @@ function updateSheetStyles(
         delete allSelectors[identifier]
       }
     } else if (!(identifier in allSelectors)) {
-      const isTransform = identifier.startsWith('_transform')
+      const isTransform = identifier.startsWith('_transform-')
       const shouldInsert = isTransform
         ? addTransform(identifier, cssRule.cssText, cssRule)
         : true
@@ -269,7 +269,12 @@ function addThemesFromCSS(cssStyleRule: CSSStyleRule, tokens?: TokensParsed) {
     const [_0, _1, scheme, _2, name] = matches
     const themeName =
       name && scheme && scheme !== name ? `${scheme}_${name}` : name || scheme
-    if (dedupedEntry.names.includes(themeName) || themeName === 'light_dark') {
+    if (
+      !themeName ||
+      dedupedEntry.names.includes(themeName) ||
+      themeName === 'light_dark' ||
+      themeName === 'dark_light'
+    ) {
       continue
     }
     dedupedEntry.names.push(themeName)
@@ -322,7 +327,7 @@ export function updateRules(identifier: string, rules: string[]) {
     return false
   }
   allRules[identifier] = rules.join(' ')
-  if (identifier.startsWith('_transform')) {
+  if (identifier.startsWith('_transform-')) {
     return addTransform(identifier, rules[0])
   }
   return true

package/src/helpers/isTamaguiComponent.tsx

@@ -1,4 +1,4 @@
-import { StaticConfig } from '../types'
+import type { StaticConfig } from '../types'
 
 export function isTamaguiComponent<A>(
   comp: A,

package/src/helpers/isTamaguiElement.tsx

@@ -1,6 +1,6 @@
 import { isValidElement } from 'react'
 
-import { StaticConfig } from '../types'
+import type { StaticConfig } from '../types'
 import { isTamaguiComponent } from './isTamaguiComponent'
 
 export const isTamaguiElement = (

package/src/helpers/matchMedia.native.ts

@@ -1,4 +1,4 @@
-import { MatchMedia, MediaQueryList } from '../types'
+import type { MatchMedia, MediaQueryList } from '../types'
 
 let matchMediaImpl: MatchMedia = matchMediaFallback
 

package/src/helpers/matchMedia.ts

@@ -1,4 +1,4 @@
-import { MatchMedia, MediaQueryList } from '../types'
+import type { MatchMedia, MediaQueryList } from '../types'
 
 export const matchMedia =
   (typeof window !== 'undefined' && window.matchMedia) || matchMediaFallback

package/src/helpers/propMapper.ts

@@ -3,7 +3,8 @@ import { tokenCategories } from '@tamagui/helpers'
 
 import { getConfig } from '../config'
 import { isDevTools } from '../constants/isDevTools'
-import { Variable, getVariableValue, isVariable } from '../createVariable'
+import type { Variable } from '../createVariable'
+import { getVariableValue, isVariable } from '../createVariable'
 import type {
   GetStyleState,
   PropMapper,

package/src/helpers/proxyThemeToParents.ts

@@ -1,5 +1,5 @@
 import { getTokenObject } from '../config'
-import { DedupedThemes, ThemeParsed } from '../types'
+import type { DedupedThemes, ThemeParsed } from '../types'
 
 const themesRaw: Record<string, ThemeParsed> = {}
 

package/src/helpers/registerCSSVariable.ts

@@ -1,5 +1,6 @@
-import { Variable, createCSSVariable, getVariableValue } from '../createVariable'
-import { VariableVal } from '../types'
+import type { Variable } from '../createVariable'
+import { createCSSVariable, getVariableValue } from '../createVariable'
+import type { VariableVal } from '../types'
 
 export const registerCSSVariable = (v: Variable | VariableVal) => {
   tokensValueToVariable.set(getVariableValue(v), v)

package/src/helpers/themeable.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react'
 
-import { StaticConfig, ThemeableProps } from '../types'
+import type { StaticConfig, ThemeableProps } from '../types'
 import { Theme } from '../views/Theme'
 
 export function themeable<ComponentType extends (props: any) => any>(

package/src/hooks/useDisableSSR.tsx

@@ -1,5 +1,5 @@
 import { getConfig } from '../config'
-import { ComponentContextI } from '../types'
+import type { ComponentContextI } from '../types'
 
 export function getDisableSSR(componentContext?: ComponentContextI) {
   return componentContext?.disableSSR ?? getConfig().disableSSR

package/src/hooks/useProps.tsx

@@ -3,7 +3,7 @@ import { useContext } from 'react'
 import { ComponentContext } from '../contexts/ComponentContext'
 import { defaultComponentStateMounted } from '../defaultComponentState'
 import { useSplitStyles } from '../helpers/getSplitStyles'
-import {
+import type {
   SplitStyleProps,
   StackStyle,
   StaticConfig,

package/src/hooks/useTheme.tsx

@@ -2,13 +2,11 @@ import { isClient, isIos, isServer } from '@tamagui/constants'
 import { useContext, useEffect, useMemo, useRef, useState } from 'react'
 
 import { getConfig } from '../config'
-import { Variable, getVariable } from '../createVariable'
+import type { Variable } from '../createVariable'
+import { getVariable } from '../createVariable'
 import { isEqualShallow } from '../helpers/createShallowSetState'
-import {
-  ThemeManager,
-  ThemeManagerState,
-  getHasThemeUpdatingProps,
-} from '../helpers/ThemeManager'
+import type { ThemeManagerState } from '../helpers/ThemeManager'
+import { ThemeManager, getHasThemeUpdatingProps } from '../helpers/ThemeManager'
 import { ThemeManagerIDContext } from '../helpers/ThemeManagerContext'
 import type {
   DebugProp,

package/src/hooks/useThemeName.tsx

@@ -2,7 +2,7 @@ import { useIsomorphicLayoutEffect } from '@tamagui/constants'
 import { useContext, useState } from 'react'
 
 import { ThemeManagerIDContext } from '../helpers/ThemeManagerContext'
-import { ThemeName } from '../types'
+import type { ThemeName } from '../types'
 import { getThemeManager } from './useTheme'
 
 export function useThemeName(opts?: { parent?: true }): ThemeName {

package/src/insertFont.ts

@@ -1,9 +1,10 @@
 import { setConfigFont } from './config'
 import { createFont } from './createFont'
-import { Variable } from './createVariable'
-import { DeepVariableObject, createVariables } from './createVariables'
+import type { Variable } from './createVariable'
+import type { DeepVariableObject } from './createVariables'
+import { createVariables } from './createVariables'
 import { registerCSSVariable, variableToCSS } from './helpers/registerCSSVariable'
-import { GenericFont } from './types'
+import type { GenericFont } from './types'
 
 /**
  * Runtime dynamic insert font

package/src/interfaces/GetRef.tsx

@@ -1,6 +1,6 @@
-import { Component, JSXElementConstructor, Ref } from 'react'
+import type { Component, JSXElementConstructor, Ref } from 'react'
 
-import { TamaguiComponent } from '../types'
+import type { TamaguiComponent } from '../types'
 
 // gets the ref type of any type of react component