@tamagui/core 2.7.7 → 3.0.0-beta.1097.1

package/internal-runtime/index.cjs

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

package/internal-runtime/index.js

@@ -0,0 +1,4 @@
+// compat with bundlers that resolve this directory instead of the package `exports`
+// map (metro without package exports). ESM so the resolved graph matches what the
+// exports map hands a modern bundler, instead of downgrading it to the CJS build.
+export * from '../dist/esm/internal-runtime.mjs'

package/internal-runtime/index.native.js

@@ -0,0 +1,2 @@
+// metro without package exports, native: the react-native artifact
+export * from '../dist/esm/internal-runtime.native.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "2.7.7",
+  "version": "3.0.0-beta.1097.1",
   "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14",
   "license": "MIT",
   "author": {
@@ -14,7 +14,26 @@
   "source": "src/index.tsx",
   "type": "module",
   "sideEffects": [
-    "*.css"
+    "*.css",
+    "**/runtime.*"
+  ],
+  "files": [
+    "src",
+    "types",
+    "dist",
+    "inject-styles",
+    "inject-styles.cjs",
+    "internal-runtime",
+    "static-resolve",
+    "native",
+    "native.cjs",
+    "native.d.ts",
+    "native-test",
+    "native-test.cjs",
+    "native-test.d.ts",
+    "reactNativeTypes",
+    "reactNativeTypes.cjs",
+    "reset.css"
   ],
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -31,6 +50,15 @@
       "require": "./dist/cjs/index.cjs",
       "default": "./dist/esm/index.mjs"
     },
+    "./theme-update": {
+      "types": "./types/theme-update.d.ts",
+      "react-native": "./dist/esm/theme-update.native.js",
+      "browser": "./dist/esm/theme-update.mjs",
+      "module": "./dist/esm/theme-update.mjs",
+      "import": "./dist/esm/theme-update.mjs",
+      "require": "./dist/cjs/theme-update.cjs",
+      "default": "./dist/esm/theme-update.mjs"
+    },
     "./native": {
       "types": "./types/index.d.ts",
       "react-native": "./dist/native.cjs",
@@ -49,6 +77,36 @@
       "require": "./dist/test.native.cjs",
       "default": "./dist/test.native.cjs"
     },
+    "./dom": {
+      "react-native": {
+        "types": "./types/dom.native.d.ts",
+        "default": "./dist/esm/dom.native.js"
+      },
+      "types": "./types/dom.d.ts",
+      "browser": "./dist/esm/dom.mjs",
+      "module": "./dist/esm/dom.mjs",
+      "import": "./dist/esm/dom.mjs",
+      "require": "./dist/cjs/dom.cjs",
+      "default": "./dist/esm/dom.mjs"
+    },
+    "./internal-runtime": {
+      "types": "./types/internal-runtime.d.ts",
+      "react-native": "./dist/esm/internal-runtime.native.js",
+      "browser": "./dist/esm/internal-runtime.mjs",
+      "module": "./dist/esm/internal-runtime.mjs",
+      "import": "./dist/esm/internal-runtime.mjs",
+      "require": "./dist/cjs/internal-runtime.cjs",
+      "default": "./dist/esm/internal-runtime.mjs"
+    },
+    "./static-resolve": {
+      "types": "./types/static-resolve.d.ts",
+      "react-native": "./dist/esm/static-resolve.native.js",
+      "browser": "./dist/esm/static-resolve.mjs",
+      "module": "./dist/esm/static-resolve.mjs",
+      "import": "./dist/esm/static-resolve.mjs",
+      "require": "./dist/cjs/static-resolve.cjs",
+      "default": "./dist/esm/static-resolve.mjs"
+    },
     "./inject-styles": {
       "types": "./types/inject-styles.d.ts",
       "react-native": "./dist/esm/inject-styles.mjs",
@@ -79,23 +137,26 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/helpers": "2.7.7",
-    "@tamagui/react-native-media-driver": "2.7.7",
-    "@tamagui/react-native-use-pressable": "2.7.7",
-    "@tamagui/use-element-layout": "2.7.7",
-    "@tamagui/use-event": "2.7.7",
-    "@tamagui/web": "2.7.7"
+    "@tamagui/compose-refs": "3.0.0-beta.1097.1",
+    "@tamagui/constants": "3.0.0-beta.1097.1",
+    "@tamagui/helpers": "3.0.0-beta.1097.1",
+    "@tamagui/react-native-media-driver": "3.0.0-beta.1097.1",
+    "@tamagui/react-native-use-pressable": "3.0.0-beta.1097.1",
+    "@tamagui/size": "3.0.0-beta.1097.1",
+    "@tamagui/use-element-layout": "3.0.0-beta.1097.1",
+    "@tamagui/use-event": "3.0.0-beta.1097.1",
+    "@tamagui/web": "3.0.0-beta.1097.1"
   },
   "devDependencies": {
-    "@tamagui/build": "2.7.7",
-    "@tamagui/native-bundle": "2.7.7",
-    "@tamagui/react-native-web-lite": "2.7.7",
+    "@tamagui/build": "3.0.0-beta.1097.1",
+    "@tamagui/native-bundle": "3.0.0-beta.1097.1",
+    "@tamagui/react-native-web-lite": "3.0.0-beta.1097.1",
     "@testing-library/react": "^16.1.0",
     "csstype": "^3.0.10",
-    "react": ">=19",
-    "react-native": "0.83.2",
-    "typescript": "~5.9.2",
-    "vitest": "4.0.4"
+    "react": "19.2.3",
+    "react-native": "0.86.2",
+    "typescript": "~6.0.3",
+    "vitest": "4.1.0"
   },
   "peerDependencies": {
     "react": ">=19"

package/reset.css

@@ -36,24 +36,27 @@ button,
   outline: none;
 }
 
-.is_Fieldset {
+.tm-fieldset {
   all: unset;
 }
 
-p,
-input,
-textarea,
-button,
-ul,
-ol,
-li,
-pre,
-dialog {
+:where(p, input, textarea, button, ul, ol, li, pre, dialog) {
   all: unset;
   box-sizing: border-box;
 }
 
-a.is_Button,
-.is_Anchor:has(.is_Button) {
+/* `all: unset` above also unsets display, and this rule and the design
+   system's `:where(.is_View)` base are both zero specificity, so whichever
+   sheet loads last wins. Restate the base display so a tamagui-rendered
+   <button> or <p> keeps its layout however the sheets are ordered. */
+:where(.is_View) {
+  display: flex;
+}
+:where(.is_Text) {
+  display: inline;
+}
+
+a.tm-button,
+.tm-anchor:has(.tm-button) {
   text-decoration: none;
 }

package/src/createOptimizedView.native.tsx

@@ -13,7 +13,10 @@ import React, { Context } from 'react' // native only, taken from react-native
 export function createOptimizedView(
   children: any,
   viewProps: Record<string, any>,
-  baseViews: { TextAncestor: Context<any> }
+  baseViews: { TextAncestor: Context<any> },
+  // context value read by the caller (useChildren) — reading it here would put
+  // a hook behind per-render branches and break hook-order stability
+  isInText: boolean
 ) {
   const TextAncestor = baseViews.TextAncestor
 
@@ -37,7 +40,6 @@ export function createOptimizedView(
     'aria-valuemin': ariaValueMin,
     'aria-valuenow': ariaValueNow,
     'aria-valuetext': ariaValueText,
-    focusable,
     id,
     role,
     tabIndex,
@@ -114,9 +116,10 @@ export function createOptimizedView(
     viewProps.accessibilityLabel = al
   }
 
-  const f = tabIndex !== undefined ? !tabIndex : focusable
-  if (f != null) {
-    viewProps.focusable = f
+  delete viewProps.focusable
+
+  if (tabIndex !== undefined) {
+    viewProps.focusable = Number(tabIndex) >= 0
   }
 
   if (_accessibilityState != null) {
@@ -133,7 +136,6 @@ export function createOptimizedView(
   }
 
   // isInText is significantly faster than just providing it each time
-  const isInText = React.useContext(TextAncestor)
   const finalElement = React.createElement('RCTView', viewProps, children)
 
   if (!isInText) {

package/src/createOptimizedView.tsx

@@ -1,5 +1,6 @@
 export function createOptimizedView(
   children: any,
   viewProps: Record<string, any>,
-  baseViews: any
+  baseViews: any,
+  isInText: boolean
 ) {}

package/src/dom.native.ts

@@ -0,0 +1,2 @@
+/** Native type/runtime forwarding for the standalone Tamagui DOM entry. */
+export * from '@tamagui/web/dom'

package/src/dom.ts

@@ -0,0 +1,9 @@
+/**
+ * `@tamagui/core/dom` — standalone Tamagui DOM.
+ *
+ * `html.*`, `style()`, and on native the DOM primitives the compiler injects.
+ * The entry is compile-only on both platforms; see `standalone.ts` in
+ * `@tamagui/web` for what that means and why.
+ */
+
+export * from '@tamagui/web/dom'

package/src/getBaseViews.native.ts

@@ -1,11 +1,18 @@
+// a namespace import rather than `require('react-native')`: the ESM native artifact
+// (`dist/esm/*.native.js`) is real ESM, where a bare `require` is not defined, and
+// `runtime.tsx` calls this at module scope. The `.default?.` reads keep the same
+// interop the require form relied on, and the CJS builds compile it back to a
+// require, so nothing changes for metro.
+import * as native from 'react-native'
+
 export function getBaseViews() {
-  const native = require('react-native')
+  const rn = native as any
 
   return {
-    View: native.View || native.default?.View,
-    Text: native.Text || native.default?.Text,
-    TextAncestor: native.unstable_TextAncestorContext,
-    StyleSheet: native.StyleSheet || native.default?.StyleSheet,
-    Pressable: native.Pressable || native.default?.Pressable,
+    View: rn.View || rn.default?.View,
+    Text: rn.Text || rn.default?.Text,
+    TextAncestor: rn.unstable_TextAncestorContext,
+    StyleSheet: rn.StyleSheet || rn.default?.StyleSheet,
+    Pressable: rn.Pressable || rn.default?.Pressable,
   }
 }

package/src/index.tsx

@@ -1,74 +1,32 @@
 // re-exports all of @tamagui/web just adds hooks
+export { createRefComponent, type RefProp } from '@tamagui/compose-refs'
+export type * from '@tamagui/size'
+export {
+  createSizeContext,
+  oneSizeSmaller,
+  resolveSize,
+  SizeContext,
+} from '@tamagui/size'
 export * from '@tamagui/web'
 
-import { createMedia } from '@tamagui/react-native-media-driver'
-import { isWeb } from '@tamagui/constants'
-import {
-  createMeasure,
-  createMeasureInWindow,
-  createMeasureLayout,
-  enable,
-  useElementLayout,
-} from '@tamagui/use-element-layout'
 import type {
   StackNonStyleProps,
   StackStyleBase,
   TamaDefer,
   TamaguiComponent,
   TamaguiElement,
-  TamaguiProviderProps,
   TamaguiTextElement,
   TextNonStyleProps,
   TextProps,
   TextStylePropsBase,
 } from '@tamagui/web'
-import {
-  TamaguiProvider as WebTamaguiProvider,
-  Text as WebText,
-  View as WebView,
-  createTamagui as createTamaguiWeb,
-  setupHooks,
-  useIsomorphicLayoutEffect,
-} from '@tamagui/web'
-import { createOptimizedView } from './createOptimizedView'
-import { getBaseViews } from './getBaseViews'
+import { Text as WebText, View as WebView } from '@tamagui/web'
 import type { RNTextProps, RNViewProps } from './reactNativeTypes'
 
-type GestureEnabledFreezeState = {
-  frozen: boolean
-  enabled: boolean
-  warned: boolean
-}
-
-const GESTURE_STATE_KEY = '__tamagui_gesture__'
-const GESTURE_ENABLED_FREEZE_KEY = '__tamagui_gesture_enabled_freeze__'
-
-function freezeGestureHandlerEnabledMode() {
-  const g = globalThis as typeof globalThis & {
-    [GESTURE_STATE_KEY]?: { enabled?: boolean }
-    [GESTURE_ENABLED_FREEZE_KEY]?: GestureEnabledFreezeState
-  }
-
-  const freezeState = (g[GESTURE_ENABLED_FREEZE_KEY] ??= {
-    frozen: false,
-    enabled: false,
-    warned: false,
-  })
-
-  if (freezeState.frozen) {
-    return
-  }
-
-  freezeState.frozen = true
-  freezeState.enabled = Boolean(g[GESTURE_STATE_KEY]?.enabled)
-  freezeState.warned = false
-}
-
 // helpful for usage outside of tamagui
 export {
   LayoutMeasurementController,
   registerLayoutNode,
-  setOnLayoutStrategy,
   type LayoutEvent,
 } from '@tamagui/use-element-layout'
 
@@ -102,125 +60,8 @@ type RNTamaguiText = TamaguiComponent<
 // see https://discord.com/channels/909986013848412191/1146150253490348112/1146150253490348112
 export * from './reactNativeTypes'
 
-// adds useElementLayout enable
-export const TamaguiProvider = (props: TamaguiProviderProps) => {
-  if (process.env.TAMAGUI_TARGET === 'native') {
-    freezeGestureHandlerEnabledMode()
-  }
-
-  useIsomorphicLayoutEffect(() => {
-    enable()
-  }, [])
-
-  return <WebTamaguiProvider {...props} />
-}
-
-// automate using the react native media driver
-export const createTamagui: typeof createTamaguiWeb = (conf) => {
-  if (!isWeb) {
-    if (conf.media) {
-      conf.media = createMedia(conf.media)
-    }
-  }
-  return createTamaguiWeb(conf)
-}
-
-const baseViews = getBaseViews()
-
-// setup internal hooks:
-
-setupHooks({
-  getBaseViews,
-
-  setElementProps: (node) => {
-    if (process.env.TAMAGUI_TARGET === 'web') {
-      // web only
-      if (node && !node['measure']) {
-        node.measure ||= createMeasure(node)
-        node.measureInWindow ||= createMeasureInWindow(node)
-        node.measureLayout ||= createMeasureLayout(node)
-      }
-    }
-  },
-
-  usePropsTransform(elementType, propsIn, stateRef, willHydrate) {
-    if (process.env.TAMAGUI_TARGET === 'web') {
-      const isDOM = typeof elementType === 'string'
-
-      // replicate react-native-web functionality
-      const {
-        // remove event props handles by useResponderEvents
-        onMoveShouldSetResponder,
-        onMoveShouldSetResponderCapture,
-        onResponderEnd,
-        onResponderGrant,
-        onResponderMove,
-        onResponderReject,
-        onResponderRelease,
-        onResponderStart,
-        onResponderTerminate,
-        onResponderTerminationRequest,
-        onScrollShouldSetResponder,
-        onScrollShouldSetResponderCapture,
-        onSelectionChangeShouldSetResponder,
-        onSelectionChangeShouldSetResponderCapture,
-        onStartShouldSetResponder,
-        onStartShouldSetResponderCapture,
-
-        // android
-        collapsable,
-        focusable,
-
-        // deprecated,
-        accessible,
-        accessibilityDisabled,
-
-        onLayout,
-        hrefAttrs,
-
-        ...plainDOMProps
-      } = propsIn
-
-      if (willHydrate || isDOM) {
-        useElementLayout(stateRef, !isDOM ? undefined : (onLayout as any))
-        // responder events removed for web - use native pointer/touch events instead
-        // the onResponder* props are stripped above and not passed to DOM
-      }
-
-      if (isDOM) {
-        // TODO move into getSplitStyles
-        if (plainDOMProps.href && hrefAttrs) {
-          const { download, rel, target } = hrefAttrs
-          if (download != null) {
-            plainDOMProps.download = download
-          }
-          if (rel) {
-            plainDOMProps.rel = rel
-          }
-          if (typeof target === 'string') {
-            plainDOMProps.target = target.charAt(0) !== '_' ? `_${target}` : target
-          }
-        }
-        return plainDOMProps
-      }
-    }
-  },
-
-  // attempt at properly fixing RN input, but <Pressable><TextInput /> just doesnt work on RN
-  ...(process.env.TAMAGUI_TARGET === 'native' && {
-    useChildren(elementType, children, viewProps) {
-      if (process.env.NODE_ENV === 'test') {
-        // test mode - just use regular views since optimizations cause weirdness
-        return
-      }
-
-      if (elementType === baseViews.View && baseViews.TextAncestor) {
-        // optimize view
-        return createOptimizedView(children, viewProps, baseViews)
-      }
-    },
-  }),
-})
+// the one platform setup path, shared with `@tamagui/core/internal-runtime`
+export { createTamagui, TamaguiProvider } from './runtime'
 
 // overwrite web versions:
 // putting at the end ensures it overwrites in dist/cjs/index.js
@@ -259,115 +100,23 @@ export const Text = WebText as any as RNTamaguiText
 
 // const zz = <A />
 
-// const variants = {
-//   fullscreen: {
-//     true: {},
-//   },
-//   elevation: {
-//     '...size': () => ({}),
-//     ':number': () => ({}),
-//   },
-// } as const
-
-// export const YStack = styled(View, {
-//   flexDirection: 'column',
-//   variants,
-// })
-
 // import { TextInput } from 'react-native'
 // export const InputFrame = styled(
 //   TextInput,
 //   {
-//     name: 'Input',
+//     displayName: 'Input',
 //     backgroundColor: 'green',
 
 //     variants: {
-//       // unstyled: {
-//       //   false: {},
-//       // },
-
-//       size: {
-//         '...size': () => ({}),
-//       },
+//       size: styled.dynamic(() => ({})),
 
 //       // disabled: {
-//       //   ':boolean': () => ({})
+//       //   boolean: () => ({})
 //       // },
 //     } as const,
-
-//     // defaultVariants: {
-//     //   unstyled: process.env.TAMAGUI_HEADLESS === '1' ? true : false,
-//     // },
 //   },
 //   {
 //     isText: true,
-//     accept: {
-//       placeholderTextColor: 'color',
-//     },
-//   }
-// )
-
-// export const StyledInputFrame = styled(InputFrame, {
-//   fontSize: 16,
-//   fontFamily: '$silkscreen',
-//   color: '$color5',
-//   minWidth: 0,
-//   borderWidth: 0,
-//   borderColor: 'transparent',
-
-//   variants: {
-//     unset: {
-//       false: {
-//         borderWidth: 2,
-//         py: 12,
-//         px: 14,
-//         borderRadius: 6,
-//         bg: '$color3',
-//         focusStyle: {
-//           bg: '$color4',
-//           margin: 0,
-//         },
-//       },
 //     },
-//   } as const,
-
-//   defaultVariants: {
-//     unset: false,
-//   },
-// })
-
-// export const StyledStyledInputFrame = styled(
-//   StyledInputFrame,
-//   {
-//     fontSize: 16,
-//     fontFamily: '$silkscreen',
-//     color: '$color5',
-//     minWidth: 0,
-//     borderWidth: 0,
-//     borderColor: 'transparent',
-
-//     variants: {
-//       unset: {
-//         false: {
-//           borderWidth: 2,
-//           py: 12,
-//           px: 14,
-//           borderRadius: 6,
-//           bg: '$color3',
-//           focusStyle: {
-//             bg: '$color4',
-//             margin: 0,
-//           },
-//         },
-//       },
-//     } as const,
-
-//     defaultVariants: {
-//       unset: false,
-//     },
-//   },
-//   {
-//     inlineProps: new Set(['id', 'testID']),
 //   }
 // )
-// export const DepthTest = () => <StyledStyledInputFrame placeholder="" />

package/src/internal-runtime.tsx

@@ -0,0 +1,34 @@
+/**
+ * Private implementation boundary: what another style frontend package needs to
+ * build components on the shared Tamagui runtime, with the platform setup already
+ * applied. Not public API — never reexport it from `@tamagui/core`, `tamagui`, or
+ * `@tamagui/tailwind` roots.
+ *
+ * Reading a real binding from `./runtime` keeps the one platform setup module in
+ * the built artifact. A bare side-effect import was pruned from ESM while CJS kept
+ * it. `runtime.*` is also declared side-effectful so downstream bundlers retain it.
+ * The binding stays private so this declaration entry does not pull the regular
+ * provider/config type graph into another frontend.
+ */
+import { createTamagui as platformSetup } from './runtime'
+
+void platformSetup
+
+export {
+  createFrontendHTML,
+  createFrontendStyled,
+  createFrontendViews,
+  mergeFrontendCondition,
+  plainValueToPayload,
+  regularStyleFrontend,
+} from '@tamagui/web/internal-runtime'
+export type {
+  FrontendComponent,
+  FrontendHTMLTag,
+  FrontendClassPlan,
+  FrontendClassPlanEntry,
+  FrontendClassSink,
+  FrontendStaticConfig,
+  StyleFrontend,
+  StyleFrontendConfig,
+} from '@tamagui/web/internal-runtime'