@tamagui/web 2.0.0-rc.9 → 2.0.0

package/dist/esm/views/ThemeProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["useIsomorphicLayoutEffect","useId","getSetting","THEME_CLASSNAME_PREFIX","Theme","jsx","ThemeProvider","props","addThemeClassName","cn","defaultTheme","target","document","documentElement","body","classList","add","remove","forceClassName","className","name","_isRoot","children"],"sources":["../../../src/views/ThemeProvider.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,yBAAA,QAAiC;AAC1C,SAASC,KAAA,QAAa;AACtB,SAASC,UAAA,QAAkB;AAC3B,SAASC,sBAAA,QAA8B;AAEvC,SAASC,KAAA,QAAa;AA2BlB,SAAAC,GAAA;AAzBG,MAAMC,aAAA,GAAiBC,KAAA,IAA8B;EAC1D,MAAMC,iBAAA,GAAoBN,UAAA,CAAW,mBAAmB;EAItDF,yBAAA,CAA0B,MAAM;IAC9B,IAAIQ,iBAAA,KAAsB,IAAO;IACjC,MAAMC,EAAA,GAAK,GAAGN,sBAAsB,GAAGI,KAAA,CAAMG,YAAY;MACnDC,MAAA,GACJT,UAAA,CAAW,mBAAmB,MAAM,SAChCU,QAAA,CAASC,eAAA,GACTD,QAAA,CAASE,IAAA;IACf,OAAAH,MAAA,CAAOI,SAAA,CAAUC,GAAA,CAAIP,EAAE,GAChB,MAAM;MACXE,MAAA,CAAOI,SAAA,CAAUE,MAAA,CAAOR,EAAE;IAC5B;EACF,GAAG,CAACF,KAAA,CAAMG,YAAA,EAAcF,iBAAiB,CAAC;EAM5C,MAAMU,cAAA,GAAiBV,iBAAA,KAAsB;EAE7C,OACE,eAAAH,GAAA,CAACD,KAAA;IACCe,SAAA,EAAWZ,KAAA,CAAMY,SAAA;IACjBC,IAAA,EAAMb,KAAA,CAAMG,YAAA;IACZQ,cAAA;IAEAG,OAAA,EAASpB,KAAA;IAERqB,QAAA,EAAAf,KAAA,CAAMe;EAAA,CACT;AAEJ","ignoreList":[]}
+{"version":3,"names":["useIsomorphicLayoutEffect","useId","getSetting","THEME_CLASSNAME_PREFIX","Theme","jsx","ThemeProvider","props","addThemeClassName","cn","defaultTheme","target","document","documentElement","body","classList","add","remove","forceClassName","className","name","_isRoot","children"],"sources":["../../../src/views/ThemeProvider.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,yBAAA,QAAiC;AAC1C,SAASC,KAAA,QAAa;AACtB,SAASC,UAAA,QAAkB;AAC3B,SAASC,sBAAA,QAA8B;AAEvC,SAASC,KAAA,QAAa;AA6BlB,SAAAC,GAAA;AA3BG,MAAMC,aAAA,GAAiBC,KAAA,IAA8B;EAC1D;;EAEA,MAAAC,iBAAM,GAAAN,UAAoB,oBAAW,CAAmB;EAGxDF,yBAAgB;IACd,IAAAQ,iBAAA,UAA0B;IACxB,MAAAC,EAAI,MAAAN,sBAA6B,GAAAI,KAAA,CAAAG,YAAA;IACjC,MAAAC,MAAM,GAAKT,UAAG,oBAAyB,MAAM,SAAAU,QAAY,CAAAC,eAAA,GAAAD,QAAA,CAAAE,IAAA;IACzDH,MAAA,CAAAI,SAAM,CAAAC,GACJ,CAAAP,EAAA;IAGF,aAAO;MACPE,MAAA,CAAAI,SAAa,CAAAE,MAAA,CAAAR,EAAA;IACX;EAA0B,IAAAF,KAC5B,CAAAG,YAAA,EAAAF,iBAAA;EAAA,MACCU,cAAO,GAAAV,iBAAc,KAAkB;EAAA,OAC5C,eAAAH,GAAA,CAAAD,KAAA;IAKAe,SAAM,EAAAZ,KAAA,CAAAY,SAAiB;IAEvBC,IAAA,EAAAb,KACE,CAAAG,YAAA;IAAAQ,cAAC;IAAAG,OAAA,EAAApB,KAAA;IAAAqB,QACC,EAAAf,KAAW,CAAAe;EAAM;AACL;AACZ,SAEAhB,aAAS","ignoreList":[]}

package/dist/esm/views/ThemeProvider.native.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@tamagui/constants";
+import { useIsomorphicLayoutEffect } from "@tamagui/constants";
 import { useId } from "react";
 import { getSetting } from "../config.native.js";
-import "../constants/constants.native.js";
+import { THEME_CLASSNAME_PREFIX } from "../constants/constants.native.js";
 import { Theme } from "./Theme.native.js";
 var ThemeProvider = function (props) {
-  var addThemeClassName = getSetting("addThemeClassName"),
-    forceClassName = addThemeClassName === void 0;
+  "use no memo";
+
+  var forceClassName = getSetting("addThemeClassName") === void 0;
   return /* @__PURE__ */_jsx(Theme, {
     className: props.className,
     name: props.defaultTheme,
     forceClassName,
-    // @ts-expect-error
     _isRoot: useId,
     children: props.children
   });

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

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","useId","getSetting","Theme","ThemeProvider","props","addThemeClassName","forceClassName","className","name","defaultTheme","_isRoot","children"],"sources":["../../../src/views/ThemeProvider.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,2BAAiC;AAC1C,2BAAsB;AACtB,SAASC,KAAA,eAAkB;AAC3B,SAASC,UAAA;AAET,yCAAsB;AA2BlB,SAAAC,KAAA;AAzBG,IAAAC,aAAM,YAAAA,CAAiBC,KAA8B;EAC1D,IAAAC,iBAAM,GAAAJ,UAAoB,oBAAW;IAAmBK,cAAA,GAAAD,iBAAA;EAItD,sBAAAN,IAA0B,CAAAG,KAAM;IAC9BK,SAAI,EAAAH,KAAA,CAAAG,SAAsB;IAC1BC,IAAA,EAAMJ,KAAK,CAAAK,YAAG;IAKdH,cAAO;IAEL;IACFI,OAAA,EAAAV,KAAA;IACFW,QAAU,EAAAP,KAAA,CAAAO;EAMZ;AAEA;AACE,SAACR,aAAA","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","useIsomorphicLayoutEffect","useId","getSetting","THEME_CLASSNAME_PREFIX","Theme","ThemeProvider","props","forceClassName","className","name","defaultTheme","_isRoot","children"],"sources":["../../../src/views/ThemeProvider.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,2BAAiC;AAC1C,SAASC,yBAAa;AACtB,SAASC,KAAA,eAAkB;AAC3B,SAASC,UAAA;AAET,SAASC,sBAAa;AA6BlB,SAAAC,KAAA;AA3BG,IAAAC,aAAM,YAAAA,CAAiBC,KAA8B;EAC1D;;EAEA,IAAAC,cAAM,GAAAL,UAAoB,oBAAW,MAAmB;EAGxD,OAAI,eAAYH,IAAA,CAAAK,KAAA;IACdI,SAAA,EAAAF,KAAA,CAAAE,SAAA;IACEC,IAAA,EAAAH,KAAI,CAAAI,YAAA;IACJH,cAAM;IACNI,OAAA,EAAAV,KAAM;IAINW,QAAA,EAAAN,KAAO,CAAAM;EACP;AACE;AAA0B,SAC5BP,aAAA","ignoreList":[]}

package/dist/esm/views/View.mjs

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

package/dist/esm/views/View.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["validStyles","viewDefaultStyles","createComponent","View","acceptsClassName","defaultProps"],"sources":["../../../src/views/View.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,WAAA,QAAmB;AAE5B,SAASC,iBAAA,QAAyB;AAClC,SAASC,eAAA,QAAuB;AAczB,MAAMC,IAAA,GAAOD,eAAA,CAKlB;EACAE,gBAAA,EAAkB;EAClBC,YAAA,EAAcJ,iBAAA;EACdD;AACF,CAAC","ignoreList":[]}
+{"version":3,"names":["validStyles","createComponent","View","acceptsClassName"],"sources":["../../../src/views/View.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,WAAA,QAAmB;AAE5B,SAASC,eAAA,QAAuB;AAczB,MAAMC,IAAA,GAAOD,eAAA,CAKlB;EACAE,gBAAA,EAAkB;EAClBH;AACF,CAAC","ignoreList":[]}

package/dist/esm/views/View.native.js

@@ -1,9 +1,7 @@
 import { validStyles } from "@tamagui/helpers";
-import { viewDefaultStyles } from "../constants/constants.native.js";
 import { createComponent } from "../createComponent.native.js";
 var View = createComponent({
-  acceptsClassName: !0,
-  defaultProps: viewDefaultStyles,
+  acceptsClassName: true,
   validStyles
 });
 export { View };

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

@@ -1 +1 @@
-{"version":3,"names":["validStyles","viewDefaultStyles","createComponent","View","acceptsClassName","defaultProps"],"sources":["../../../src/views/View.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,WAAA,QAAmB;AAE5B,SAASC,iBAAA,QAAyB;AAClC,SAASC,eAAA,QAAuB;AAczB,IAAAC,IAAM,GAAAD,eAAO;EAMlBE,gBAAA,EAAkB;EAClBC,YAAA,EAAcJ,iBAAA;EACdD;AACF,CAAC","ignoreList":[]}
+{"version":3,"names":["validStyles","createComponent","View","acceptsClassName"],"sources":["../../../src/views/View.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,WAAA,QAAmB;AAE5B,SAASC,eAAA,QAAuB;AAczB,IAAAC,IAAM,GAAAD,eAAO;EAMlBE,gBAAA,EAAkB;EAClBH;AACF,CAAC","ignoreList":[]}

package/inject-styles/index.cjs

@@ -0,0 +1,2 @@
+// compat with tamagui static compiler
+Object.assign(module.exports, require('../dist/cjs/inject-styles.cjs'))

package/inject-styles/index.js

@@ -0,0 +1,2 @@
+// compat with metro without package exports
+Object.assign(module.exports, require('../dist/cjs/inject-styles.cjs'))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "2.0.0-rc.9",
+  "version": "2.0.0",
   "license": "MIT",
   "author": {
     "name": "Nate Wienert"
@@ -11,13 +11,6 @@
     "directory": "packages/web"
   },
   "source": "src/index.ts",
-  "files": [
-    "types",
-    "dist",
-    "src",
-    "reset.css",
-    "inject-styles.cjs"
-  ],
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -31,13 +24,16 @@
     ".": {
       "types": "./types/index.d.ts",
       "react-native": "./dist/esm/index.native.js",
+      "browser": "./dist/esm/index.mjs",
       "module": "./dist/esm/index.mjs",
       "import": "./dist/esm/index.mjs",
       "require": "./dist/cjs/index.cjs",
-      "default": "./dist/cjs/index.native.js"
+      "default": "./dist/esm/index.mjs"
     },
     "./inject-styles": {
       "types": "./types/inject-styles.d.ts",
+      "react-native": "./dist/esm/inject-styles.mjs",
+      "browser": "./dist/esm/inject-styles.mjs",
       "module": "./dist/esm/inject-styles.mjs",
       "import": "./dist/esm/inject-styles.mjs",
       "require": "./dist/cjs/inject-styles.cjs",
@@ -51,34 +47,34 @@
     "build": "tamagui-build",
     "watch": "tamagui-build --watch",
     "clean": "tamagui-build clean",
-    "clean:build": "tamagui-build clean:build"
+    "clean:build": "tamagui-build clean:build",
+    "test:web": "vitest --typecheck --run"
   },
   "dependencies": {
-    "@tamagui/compose-refs": "2.0.0-rc.9",
-    "@tamagui/constants": "2.0.0-rc.9",
-    "@tamagui/helpers": "2.0.0-rc.9",
-    "@tamagui/is-equal-shallow": "2.0.0-rc.9",
-    "@tamagui/native": "2.0.0-rc.9",
-    "@tamagui/normalize-css-color": "2.0.0-rc.9",
-    "@tamagui/timer": "2.0.0-rc.9",
-    "@tamagui/types": "2.0.0-rc.9",
-    "@tamagui/use-did-finish-ssr": "2.0.0-rc.9",
-    "@tamagui/use-event": "2.0.0-rc.9",
-    "@tamagui/use-force-update": "2.0.0-rc.9"
+    "@tamagui/compose-refs": "2.0.0",
+    "@tamagui/constants": "2.0.0",
+    "@tamagui/helpers": "2.0.0",
+    "@tamagui/is-equal-shallow": "2.0.0",
+    "@tamagui/native": "2.0.0",
+    "@tamagui/normalize-css-color": "2.0.0",
+    "@tamagui/timer": "2.0.0",
+    "@tamagui/types": "2.0.0",
+    "@tamagui/use-did-finish-ssr": "2.0.0",
+    "@tamagui/use-event": "2.0.0",
+    "@tamagui/use-force-update": "2.0.0"
   },
   "devDependencies": {
-    "@tamagui/build": "2.0.0-rc.9",
+    "@tamagui/build": "2.0.0",
     "@testing-library/react": "^16.1.0",
     "csstype": "^3.0.10",
     "react": ">=19",
     "react-dom": "*",
-    "react-native": "0.81.5",
+    "react-native": "0.83.2",
     "typescript": "~5.9.2",
     "vitest": "4.0.4"
   },
   "peerDependencies": {
     "react": ">=19",
-    "react-dom": "*",
-    "react-native": "*"
+    "react-dom": "*"
   }
 }

package/src/_withStableStyle.tsx

@@ -1,27 +1,62 @@
-import React from 'react'
+import React, { useContext } from 'react'
+import { getConfigMaybe } from './config'
 import { useMedia } from './hooks/useMedia'
 import { useTheme } from './hooks/useTheme'
+import { ThemeStateContext } from './hooks/useThemeState'
 
 /** internal: this is for tamagui babel plugin usage only */
 
+const EMPTY_EXPRESSIONS: any[] = []
+const EMPTY_THEME = {}
+
 export const _withStableStyle = (
   Component: any,
-  styleProvider: (theme: any, expressions: any[]) => object
+  createStyle: (theme: any, expressions: any[]) => object,
+  hasThemeKeys?: boolean,
+  hasMediaKeys?: boolean
 ) =>
-  React.forwardRef((props: any, ref) => {
-    const { _expressions = [], ...rest } = props
-    const theme = useTheme()
-
-    // Only call useMedia if there are string media keys to resolve
-    // This is safe because expressions are compile-time stable
-    const hasMediaKeys = _expressions.some((expr: any) => typeof expr === 'string')
-    const media = hasMediaKeys ? useMedia() : null
-
-    const resolvedExpressions = media
-      ? _expressions.map((expr: any) => (typeof expr === 'string' ? media[expr] : expr))
-      : _expressions
-
-    return (
-      <Component ref={ref} style={styleProvider(theme, resolvedExpressions)} {...rest} />
-    )
-  })
+  React.memo(
+    React.forwardRef((props: any, ref) => {
+      const { _expressions = EMPTY_EXPRESSIONS, ...rest } = props
+
+      const parentId = useContext(ThemeStateContext)
+
+      // compile-time constants per wrapper, so conditional hooks are stable
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const theme = hasThemeKeys && parentId ? useTheme() : null
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const media = hasMediaKeys ? useMedia() : null
+
+      const resolvedExpressions = media
+        ? _expressions.map((expr: any) => (typeof expr === 'string' ? media[expr] : expr))
+        : _expressions
+
+      let resolvedTheme: any = theme || EMPTY_THEME
+      if (hasThemeKeys && !parentId) {
+        // monorepo edge case: ThemeStateContext is from a different instance
+        const config = getConfigMaybe()
+        const themes = config?.themes
+        if (themes) {
+          for (const k in themes) {
+            resolvedTheme = themes.light || themes.dark || themes[k]
+            break
+          }
+        }
+        if (process.env.NODE_ENV === 'development') {
+          console.warn(
+            '[@tamagui] _withStableStyle: no ThemeStateContext found. ' +
+              'This usually means duplicate tamagui instances in a monorepo. ' +
+              'Falling back to default theme from config.'
+          )
+        }
+      }
+
+      return (
+        <Component
+          ref={ref}
+          style={createStyle(resolvedTheme, resolvedExpressions)}
+          {...rest}
+        />
+      )
+    })
+  )

package/src/animationDriverTypes.test-d.ts

@@ -156,6 +156,43 @@ describe('animatedBy prop', () => {
     type AnimatedBy = NonNullable<Props['animatedBy']>
     expectTypeOf<'default'>().toMatchTypeOf<AnimatedBy>()
   })
+
+  /**
+   * IMPORTANT: This test verifies the full type inference chain for multi-driver configs.
+   *
+   * When user configures: animations: { default: motionDriver, css: cssDriver }
+   * The animatedBy prop should accept: 'default' | 'css' | null
+   *
+   * The type flow is:
+   * 1. CreateTamaguiProps.animations accepts multi-driver object
+   * 2. InferTamaguiConfig extracts driver keys via ExtractAnimationDriverKeys
+   * 3. TamaguiInternalConfig stores keys in AnimDriverKeys generic param
+   * 4. TamaguiCustomConfig extends the inferred config type
+   * 5. TamaguiConfig merges with TamaguiCustomConfig
+   * 6. InferredAnimationDriverKeys reads from TamaguiConfig['animationDriverKeys']
+   * 7. AnimationDriverKeys combines inferred + TypeOverride
+   * 8. animatedBy uses AnimationDriverKeys
+   */
+  test('multi-driver config type flow preserves all driver keys', () => {
+    // internal helper mirrors the one in types.tsx
+    type ExtractAnimationDriverKeys<E> =
+      E extends AnimationDriver<any>
+        ? 'default'
+        : E extends { default: AnimationDriver<any> }
+          ? Extract<keyof E, string>
+          : 'default'
+
+    // simulate multi-driver config
+    type MultiDriverConfig = {
+      default: MockCSSDriver
+      css: MockSpringDriver
+    }
+
+    // should extract both keys
+    type ExtractedKeys = ExtractAnimationDriverKeys<MultiDriverConfig>
+    expectTypeOf<'default'>().toMatchTypeOf<ExtractedKeys>()
+    expectTypeOf<'css'>().toMatchTypeOf<ExtractedKeys>()
+  })
 })
 
 // =============================================================================
@@ -230,6 +267,45 @@ describe('Type regression scenarios', () => {
 // Documentation: Applied fixes
 // =============================================================================
 
+// =============================================================================
+// Test: ExtractAnimationDriverKeys helper
+// =============================================================================
+
+describe('ExtractAnimationDriverKeys helper', () => {
+  // Internal helper type for testing - mirrors the one in types.tsx
+  type ExtractAnimationDriverKeys<E> =
+    E extends AnimationDriver<any>
+      ? 'default'
+      : E extends { default: AnimationDriver<any> }
+        ? Extract<keyof E, string>
+        : 'default'
+
+  test('single driver returns "default"', () => {
+    type Result = ExtractAnimationDriverKeys<MockCSSDriver>
+    expectTypeOf<Result>().toEqualTypeOf<'default'>()
+  })
+
+  test('multi-driver returns all keys', () => {
+    type MultiDriverConfig = {
+      default: MockCSSDriver
+      spring: MockSpringDriver
+    }
+    type Result = ExtractAnimationDriverKeys<MultiDriverConfig>
+    expectTypeOf<'default'>().toMatchTypeOf<Result>()
+    expectTypeOf<'spring'>().toMatchTypeOf<Result>()
+  })
+
+  test('multi-driver with css key returns all keys', () => {
+    type MultiDriverConfig = {
+      default: MockCSSDriver
+      css: MockSpringDriver
+    }
+    type Result = ExtractAnimationDriverKeys<MultiDriverConfig>
+    expectTypeOf<'default'>().toMatchTypeOf<Result>()
+    expectTypeOf<'css'>().toMatchTypeOf<Result>()
+  })
+})
+
 /**
  * SUMMARY OF APPLIED TYPE FIXES:
  *

package/src/config.ts

@@ -10,6 +10,8 @@ import type {
   TokensMerged,
 } from './types'
 
+export type StyleCompat = 'legacy' | 'react-native' | 'web'
+
 let conf: TamaguiInternalConfig | null
 let setConfigCalledByThisInstance = false
 
@@ -44,7 +46,11 @@ const getConfigFromGlobalOrLocal = (): TamaguiInternalConfig | null => {
         ) {
           globalThis.__tamaguiHasWarnedGlobalFallback = true
           console.warn(
-            `Tamagui: Using global config fallback. This may indicate duplicate tamagui instances (e.g., from Vite SSR bundling). This is handled automatically, but may cause issues.`
+            `⚠️⚠️⚠️⚠️⚠️
+
+Tamagui: Using global config fallback. This may indicate duplicate tamagui instances (e.g., from Vite SSR bundling). This is handled automatically, but likely causes issues!
+
+⚠️⚠️⚠️⚠️⚠️`
           )
         }
         globalThis.__tamaguiPendingCheck = false
@@ -70,6 +76,11 @@ export const getSetting = <Key extends keyof GenericTamaguiSettings>(
   )
 }
 
+export function getStyleCompat(): StyleCompat {
+  const config = getConfigFromGlobalOrLocal()
+  return (config?.settings.styleCompat ?? (config as any)?.styleCompat) || 'web'
+}
+
 export const setConfig = (next: TamaguiInternalConfig) => {
   setConfigCalledByThisInstance = true
   conf = next

package/src/constants/constants.ts

@@ -4,23 +4,6 @@ export const THEME_NAME_SEPARATOR = '_'
 export const THEME_CLASSNAME_PREFIX = 't_'
 export const FONT_DATA_ATTRIBUTE_NAME = 'data-tamagui-font'
 
-export const viewDefaultStyles: StackStyle = {}
-
-export const webViewFlexCompatStyles: StackStyle = {
-  display: 'flex',
-  alignItems: 'stretch',
-  flexDirection: 'column',
-  flexBasis: 'auto',
-  boxSizing: 'border-box',
-  minHeight: 0,
-  minWidth: 0,
-  flexShrink: 0,
-}
-
-if (process.env.TAMAGUI_TARGET === 'web') {
-  Object.assign(viewDefaultStyles, webViewFlexCompatStyles)
-}
-
 export const MISSING_THEME_MESSAGE =
   process.env.NODE_ENV === 'development'
     ? `Can't find Tamagui configuration.