@tamagui/config 2.7.6 → 3.0.0-beta.637.1

package/package.json

@@ -1,49 +1,40 @@
 {
   "name": "@tamagui/config",
-  "version": "2.7.6",
+  "version": "3.0.0-beta.637.1",
   "type": "module",
   "sideEffects": false,
-  "main": "dist/cjs",
-  "module": "dist/esm",
-  "types": "./types/index.d.ts",
+  "files": [
+    "src",
+    "types",
+    "dist",
+    "animations-css",
+    "animations-motion",
+    "animations-reanimated",
+    "animations-rn",
+    "animations-css.cjs",
+    "animations-css.d.ts",
+    "animations-motion.cjs",
+    "animations-motion.d.ts",
+    "animations-reanimated.cjs",
+    "animations-reanimated.d.ts",
+    "animations-rn.cjs",
+    "animations-rn.d.ts",
+    "v6.cjs",
+    "v6.d.ts",
+    "v6-base.cjs",
+    "v6-base.d.ts",
+    "v6-builder.cjs",
+    "v6-builder.d.ts"
+  ],
+  "tamagui-build": {
+    "outputs": [
+      "cjs",
+      "esm",
+      "types"
+    ]
+  },
   "exports": {
     "./package.json": "./package.json",
-    ".": {
-      "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/esm/index.mjs"
-    },
-    "./reanimated": {
-      "types": "./types/index.reanimated.d.ts",
-      "react-native": "./dist/esm/index.reanimated.native.js",
-      "browser": "./dist/esm/index.reanimated.mjs",
-      "module": "./dist/esm/index.reanimated.mjs",
-      "import": "./dist/esm/index.reanimated.mjs",
-      "require": "./dist/cjs/index.reanimated.cjs",
-      "default": "./dist/esm/index.reanimated.mjs"
-    },
-    "./v3": {
-      "types": "./types/v3.d.ts",
-      "react-native": "./dist/esm/v3.native.js",
-      "browser": "./dist/esm/v3.mjs",
-      "module": "./dist/esm/v3.mjs",
-      "import": "./dist/esm/v3.mjs",
-      "require": "./dist/cjs/v3.cjs",
-      "default": "./dist/esm/v3.mjs"
-    },
-    "./v4": {
-      "types": "./types/v4.d.ts",
-      "react-native": "./dist/esm/v4.native.js",
-      "browser": "./dist/esm/v4.mjs",
-      "module": "./dist/esm/v4.mjs",
-      "import": "./dist/esm/v4.mjs",
-      "require": "./dist/cjs/v4.cjs",
-      "default": "./dist/esm/v4.mjs"
-    },
     "./v5": {
       "types": "./types/v5.d.ts",
       "react-native": "./dist/esm/v5.native.js",
@@ -53,42 +44,6 @@
       "require": "./dist/cjs/v5.cjs",
       "default": "./dist/esm/v5.mjs"
     },
-    "./v5-css": {
-      "types": "./types/v5-css.d.ts",
-      "react-native": "./dist/esm/v5-css.native.js",
-      "browser": "./dist/esm/v5-css.mjs",
-      "module": "./dist/esm/v5-css.mjs",
-      "import": "./dist/esm/v5-css.mjs",
-      "require": "./dist/cjs/v5-css.cjs",
-      "default": "./dist/esm/v5-css.mjs"
-    },
-    "./v5-rn": {
-      "types": "./types/v5-rn.d.ts",
-      "react-native": "./dist/esm/v5-rn.native.js",
-      "browser": "./dist/esm/v5-rn.mjs",
-      "module": "./dist/esm/v5-rn.mjs",
-      "import": "./dist/esm/v5-rn.mjs",
-      "require": "./dist/cjs/v5-rn.cjs",
-      "default": "./dist/esm/v5-rn.mjs"
-    },
-    "./v5-reanimated": {
-      "types": "./types/v5-reanimated.d.ts",
-      "react-native": "./dist/esm/v5-reanimated.native.js",
-      "browser": "./dist/esm/v5-reanimated.mjs",
-      "module": "./dist/esm/v5-reanimated.mjs",
-      "import": "./dist/esm/v5-reanimated.mjs",
-      "require": "./dist/cjs/v5-reanimated.cjs",
-      "default": "./dist/esm/v5-reanimated.mjs"
-    },
-    "./v5-motion": {
-      "types": "./types/v5-motion.d.ts",
-      "react-native": "./dist/esm/v5-motion.native.js",
-      "browser": "./dist/esm/v5-motion.mjs",
-      "module": "./dist/esm/v5-motion.mjs",
-      "import": "./dist/esm/v5-motion.mjs",
-      "require": "./dist/cjs/v5-motion.cjs",
-      "default": "./dist/esm/v5-motion.mjs"
-    },
     "./v5-subtle": {
       "types": "./types/v5-subtle.d.ts",
       "react-native": "./dist/esm/v5-subtle.native.js",
@@ -97,6 +52,105 @@
       "import": "./dist/esm/v5-subtle.mjs",
       "require": "./dist/cjs/v5-subtle.cjs",
       "default": "./dist/esm/v5-subtle.mjs"
+    },
+    "./v6": {
+      "types": "./types/v6.d.ts",
+      "react-native": "./dist/esm/v6.native.js",
+      "browser": "./dist/esm/v6.mjs",
+      "module": "./dist/esm/v6.mjs",
+      "import": "./dist/esm/v6.mjs",
+      "require": "./dist/cjs/v6.cjs",
+      "default": "./dist/esm/v6.mjs"
+    },
+    "./v6-base": {
+      "types": "./types/v6-base.d.ts",
+      "react-native": "./dist/esm/v6-base.native.js",
+      "browser": "./dist/esm/v6-base.mjs",
+      "module": "./dist/esm/v6-base.mjs",
+      "import": "./dist/esm/v6-base.mjs",
+      "require": "./dist/cjs/v6-base.cjs",
+      "default": "./dist/esm/v6-base.mjs"
+    },
+    "./v6-builder": {
+      "types": "./types/v6-builder.d.ts",
+      "react-native": "./dist/esm/v6-builder.native.js",
+      "browser": "./dist/esm/v6-builder.mjs",
+      "module": "./dist/esm/v6-builder.mjs",
+      "import": "./dist/esm/v6-builder.mjs",
+      "require": "./dist/cjs/v6-builder.cjs",
+      "default": "./dist/esm/v6-builder.mjs"
+    },
+    "./animations-css": {
+      "types": "./types/animations-css.d.ts",
+      "react-native": "./dist/esm/animations-css.native.js",
+      "browser": "./dist/esm/animations-css.mjs",
+      "module": "./dist/esm/animations-css.mjs",
+      "import": "./dist/esm/animations-css.mjs",
+      "require": "./dist/cjs/animations-css.cjs",
+      "default": "./dist/esm/animations-css.mjs"
+    },
+    "./animations-rn": {
+      "types": "./types/animations-rn.d.ts",
+      "react-native": "./dist/esm/animations-rn.native.js",
+      "browser": "./dist/esm/animations-rn.mjs",
+      "module": "./dist/esm/animations-rn.mjs",
+      "import": "./dist/esm/animations-rn.mjs",
+      "require": "./dist/cjs/animations-rn.cjs",
+      "default": "./dist/esm/animations-rn.mjs"
+    },
+    "./animations-reanimated": {
+      "types": "./types/animations-reanimated.d.ts",
+      "react-native": "./dist/esm/animations-reanimated.native.js",
+      "browser": "./dist/esm/animations-reanimated.mjs",
+      "module": "./dist/esm/animations-reanimated.mjs",
+      "import": "./dist/esm/animations-reanimated.mjs",
+      "require": "./dist/cjs/animations-reanimated.cjs",
+      "default": "./dist/esm/animations-reanimated.mjs"
+    },
+    "./animations-motion": {
+      "types": "./types/animations-motion.d.ts",
+      "react-native": "./dist/esm/animations-motion.native.js",
+      "browser": "./dist/esm/animations-motion.mjs",
+      "module": "./dist/esm/animations-motion.mjs",
+      "import": "./dist/esm/animations-motion.mjs",
+      "require": "./dist/cjs/animations-motion.cjs",
+      "default": "./dist/esm/animations-motion.mjs"
+    },
+    "./v5-css": {
+      "types": "./types/animations-css.d.ts",
+      "react-native": "./dist/esm/animations-css.native.js",
+      "browser": "./dist/esm/animations-css.mjs",
+      "module": "./dist/esm/animations-css.mjs",
+      "import": "./dist/esm/animations-css.mjs",
+      "require": "./dist/cjs/animations-css.cjs",
+      "default": "./dist/esm/animations-css.mjs"
+    },
+    "./v5-rn": {
+      "types": "./types/animations-rn.d.ts",
+      "react-native": "./dist/esm/animations-rn.native.js",
+      "browser": "./dist/esm/animations-rn.mjs",
+      "module": "./dist/esm/animations-rn.mjs",
+      "import": "./dist/esm/animations-rn.mjs",
+      "require": "./dist/cjs/animations-rn.cjs",
+      "default": "./dist/esm/animations-rn.mjs"
+    },
+    "./v5-reanimated": {
+      "types": "./types/animations-reanimated.d.ts",
+      "react-native": "./dist/esm/animations-reanimated.native.js",
+      "browser": "./dist/esm/animations-reanimated.mjs",
+      "module": "./dist/esm/animations-reanimated.mjs",
+      "import": "./dist/esm/animations-reanimated.mjs",
+      "require": "./dist/cjs/animations-reanimated.cjs",
+      "default": "./dist/esm/animations-reanimated.mjs"
+    },
+    "./v5-motion": {
+      "types": "./types/animations-motion.d.ts",
+      "react-native": "./dist/esm/animations-motion.native.js",
+      "browser": "./dist/esm/animations-motion.mjs",
+      "module": "./dist/esm/animations-motion.mjs",
+      "import": "./dist/esm/animations-motion.mjs",
+      "require": "./dist/cjs/animations-motion.cjs",
+      "default": "./dist/esm/animations-motion.mjs"
     }
   },
   "publishConfig": {
@@ -104,35 +158,30 @@
   },
   "scripts": {
     "build": "tamagui-build",
+    "check:v6-tailwind-defaults": "bun ./scripts/generate-v6-tailwind-defaults.ts --check",
+    "test:v5-entries": "bun test ./scripts/v5-entries.test.ts",
+    "test:v6-tailwind-defaults": "bun test ./scripts/v6-tailwind-defaults.test.ts",
+    "test:v6-entries": "bun test ./scripts/v6-entries.test.ts",
     "watch": "tamagui-build --watch",
     "clean": "tamagui-build clean",
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/animations-css": "2.7.6",
-    "@tamagui/animations-motion": "2.7.6",
-    "@tamagui/animations-react-native": "2.7.6",
-    "@tamagui/animations-reanimated": "2.7.6",
-    "@tamagui/colors": "2.7.6",
-    "@tamagui/core": "2.7.6",
-    "@tamagui/font-inter": "2.7.6",
-    "@tamagui/font-silkscreen": "2.7.6",
-    "@tamagui/react-native-media-driver": "2.7.6",
-    "@tamagui/shorthands": "2.7.6",
-    "@tamagui/theme-builder": "2.7.6",
-    "@tamagui/themes": "2.7.6",
-    "@tamagui/web": "2.7.6"
+    "@tamagui/animations-css": "3.0.0-beta.637.1",
+    "@tamagui/animations-motion": "3.0.0-beta.637.1",
+    "@tamagui/animations-react-native": "3.0.0-beta.637.1",
+    "@tamagui/animations-reanimated": "3.0.0-beta.637.1",
+    "@tamagui/create-system-font": "3.0.0-beta.637.1",
+    "@tamagui/shorthands": "3.0.0-beta.637.1",
+    "@tamagui/style-grammar": "3.0.0-beta.637.1",
+    "@tamagui/themes": "3.0.0-beta.637.1",
+    "@tamagui/web": "3.0.0-beta.637.1"
   },
   "devDependencies": {
-    "@tamagui/build": "2.7.6"
-  },
-  "peerDependencies": {
-    "@tamagui/animations-moti": "*"
-  },
-  "peerDependenciesMeta": {
-    "@tamagui/animations-moti": {
-      "optional": true
-    }
+    "@csstools/color-helpers": "6.1.0",
+    "@tamagui/build": "3.0.0-beta.637.1",
+    "@tamagui/cli": "3.0.0-beta.637.1",
+    "tailwindcss": "4.3.0"
   },
   "repository": {
     "type": "git",

package/src/{v5-css.native.ts → animations-css.native.ts}

@@ -1,2 +1,2 @@
 // css animations don't work on native, fall back to react-native
-export { animationsReactNative as animations } from './animationsReactNative'
+export { animationsReactNative as animations } from './animations-rn'

package/src/fonts.ts

@@ -1,96 +1,24 @@
-import { createInterFont } from '@tamagui/font-inter'
-import { createSilkscreenFont } from '@tamagui/font-silkscreen'
+import { createSystemFont } from '@tamagui/create-system-font'
+const isNative = process.env.TAMAGUI_TARGET === 'native'
 
-import { createGenericFont } from './createGenericFont'
+export { createSystemFont }
 
-const silkscreenFont = createSilkscreenFont()
-
-const headingFont = createInterFont(
-  {
-    size: {
-      5: 13,
-      6: 15,
-      9: 32,
-      10: 44,
-    },
-    transform: {
-      6: 'uppercase',
-      7: 'none',
-    },
-    weight: {
-      6: '400',
-      7: '700',
-    },
-    color: {
-      6: '$colorFocus',
-      7: '$color',
-    },
-    letterSpacing: {
-      5: 2,
-      6: 1,
-      7: 0,
-      8: 0,
-      9: -1,
-      10: -1.5,
-      12: -2,
-      14: -3,
-      15: -4,
-    },
-    // for native
-    face: {
-      700: { normal: 'InterBold' },
-      800: { normal: 'InterBold' },
-      900: { normal: 'InterBold' },
-    },
-  },
-  { sizeLineHeight: (size) => Math.round(size * 1.1 + (size < 30 ? 10 : 5)) }
-)
-
-const bodyFont = createInterFont(
-  {
-    weight: {
-      1: '400',
-    },
-  },
-  {
-    sizeSize: (size) => Math.round(size),
-    sizeLineHeight: (size) => Math.round(size * 1.1 + (size >= 12 ? 8 : 4)),
-  }
-)
-
-const monoFont = createGenericFont(
-  `"ui-monospace", "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`,
-  {
-    weight: {
-      1: '500',
-    },
-    size: {
-      1: 11,
-      2: 12,
-      3: 13,
-      4: 14,
-      5: 16,
-      6: 18,
-      7: 20,
-      8: 22,
-      9: 30,
-      10: 42,
-      11: 52,
-      12: 62,
-      13: 72,
-      14: 92,
-      15: 114,
-      16: 124,
-    },
-  },
-  {
-    sizeLineHeight: (x) => x * 1.5,
-  }
-)
+// heading line height: native ~120%, web original
+const headingLineHeight = (size: number) =>
+  Math.round(isNative ? size * 1.2 : size * 1.12 + 5)
 
 export const fonts = {
-  heading: headingFont,
-  body: bodyFont,
-  mono: monoFont,
-  silkscreen: silkscreenFont,
+  body: createSystemFont(),
+  heading: createSystemFont({
+    font: {
+      weight: {
+        0: '600',
+        6: '700',
+        9: '800',
+      },
+    },
+    sizeLineHeight: headingLineHeight,
+  }),
 }
+
+export type Fonts = typeof fonts

package/src/media.ts

@@ -1,32 +1,107 @@
-export const demoMedia = [500, 620, 780, 900]
-export const widths = [660, 800, 1020, 1280]
-
 // note order is important!
 // earlier defined = less important
 
-export const media = {
-  // for site
-  xl: { maxWidth: 1650 },
-  lg: { maxWidth: 1280 },
-  md: { maxWidth: 1020 },
-  sm: { maxWidth: 800 },
-  xs: { maxWidth: 660 },
-  xxs: { maxWidth: 390 },
-  gtXs: { minWidth: 660 + 1 },
-  gtSm: { minWidth: 800 + 1 },
-  gtMd: { minWidth: 1020 + 1 },
-  gtLg: { minWidth: 1280 + 1 },
-  gtXl: { minWidth: 1650 + 1 },
+export const breakpoints = {
+  // for container queries its really helpful to have small sizes
+  100: 100,
+  200: 200,
+
+  xxxs: 260,
+  xxs: 340,
+  xs: 460,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  xxl: 1536,
 }
 
-// note all the non "gt" ones should be true to start to match mobile-first
-// were aiming for "xs" to be the default to "gtXs" true too
+const mediaQueryForceNonOverlap = process.env.TAMAGUI_TARGET === 'native' ? 1 : 0.02
+
+export const media = {
+  // always true on native
+  touchable:
+    process.env.TAMAGUI_TARGET === 'native'
+      ? ({ minWidth: 0 } as never)
+      : { pointer: 'coarse' },
+
+  // always false on native (can't hover on touch)
+  hoverable:
+    process.env.TAMAGUI_TARGET === 'native'
+      ? ({ maxWidth: 0 } as never)
+      : { hover: 'hover' },
+
+  // Max-width queries (desktop-first, ordered large-to-small so smaller wins)
+  'max-xxl': { maxWidth: breakpoints.xxl - mediaQueryForceNonOverlap },
+  'max-xl': { maxWidth: breakpoints.xl - mediaQueryForceNonOverlap },
+  'max-lg': { maxWidth: breakpoints.lg - mediaQueryForceNonOverlap },
+  'max-md': { maxWidth: breakpoints.md - mediaQueryForceNonOverlap },
+  'max-sm': { maxWidth: breakpoints.sm - mediaQueryForceNonOverlap },
+  'max-xs': { maxWidth: breakpoints.xs - mediaQueryForceNonOverlap },
+  'max-xxs': { maxWidth: breakpoints.xxs - mediaQueryForceNonOverlap },
+  'max-xxxs': { maxWidth: breakpoints.xxxs - mediaQueryForceNonOverlap },
+
+  // for container queries its really helpful to have small sizes
+  'max-200': { maxWidth: breakpoints['200'] - mediaQueryForceNonOverlap },
+  'max-100': { maxWidth: breakpoints['100'] - mediaQueryForceNonOverlap },
+
+  // Min-width queries (mobile-first)
+  // non-max wins over max though tbh it could go either way
+  xxxs: { minWidth: breakpoints.xxxs },
+  xxs: { minWidth: breakpoints.xxs },
+  xs: { minWidth: breakpoints.xs },
+  sm: { minWidth: breakpoints.sm },
+  md: { minWidth: breakpoints.md },
+  lg: { minWidth: breakpoints.lg },
+  xl: { minWidth: breakpoints.xl },
+  xxl: { minWidth: breakpoints.xxl },
+
+  // Height-based queries LAST so they override width queries when both match
+  // (later in object = higher CSS specificity)
+  // max-height ordered large-to-small so smaller wins (like max-width)
+  'max-height-lg': { maxHeight: breakpoints.lg - mediaQueryForceNonOverlap },
+  'max-height-md': { maxHeight: breakpoints.md - mediaQueryForceNonOverlap },
+  'max-height-sm': { maxHeight: breakpoints.sm - mediaQueryForceNonOverlap },
+  'max-height-xs': { maxHeight: breakpoints.xs - mediaQueryForceNonOverlap },
+  'max-height-xxs': { maxHeight: breakpoints.xxs - mediaQueryForceNonOverlap },
+  'max-height-xxxs': { maxHeight: breakpoints.xxxs - mediaQueryForceNonOverlap },
+
+  'max-height-200': { maxHeight: breakpoints['200'] - mediaQueryForceNonOverlap },
+  'max-height-100': { maxHeight: breakpoints['100'] - mediaQueryForceNonOverlap },
+
+  'height-sm': { minHeight: breakpoints.sm },
+  'height-md': { minHeight: breakpoints.md },
+  'height-lg': { minHeight: breakpoints.lg },
+} as const
+
+export type Media = typeof media
+
 export const mediaQueryDefaultActive = {
-  xl: true,
-  lg: true,
-  md: true,
-  sm: true,
+  touchable: process.env.TAMAGUI_TARGET === 'native',
+  hoverable: process.env.TAMAGUI_TARGET !== 'native',
+  // Max queries
+  'max-xxl': true,
+  'max-xl': true,
+  'max-lg': true,
+  'max-md': true,
+  'max-sm': true,
+  'max-xs': true,
+  'max-xxs': false,
+  'max-xxxs': false,
+  // Min queries
+  xxxs: true,
+  xxs: true,
   xs: true,
-  // false
-  xxs: false,
+  sm: false,
+  md: false,
+  lg: false,
+  xl: false,
+  xxl: false,
+  // Height queries (default: iPhone non-max ~844pt)
+  'max-height-sm': false,
+  'max-height-md': false,
+  'max-height-lg': true,
+  'height-sm': true,
+  'height-md': true,
+  'height-lg': false,
 }

package/src/settings.ts

@@ -0,0 +1,23 @@
+import type { CreateTamaguiProps } from '@tamagui/web'
+import { mediaQueryDefaultActive } from './media'
+
+export const selectionStyles = (theme) =>
+  theme.color5
+    ? {
+        backgroundColor: theme.color5,
+        color: theme.color11,
+      }
+    : null
+
+export const settings = {
+  mediaQueryDefaultActive,
+  defaultFont: 'body',
+  fastSchemeChange: true,
+  shouldAddPrefersColorThemes: true,
+  allowedStyleValues: 'somewhat-strict-web',
+  addThemeClassName: 'html',
+  onlyAllowShorthands: true,
+  styleCompat: 'web',
+} satisfies CreateTamaguiProps['settings']
+
+export type Settings = typeof settings

package/src/v5-base.ts

@@ -2,31 +2,18 @@ import { shorthands } from '@tamagui/shorthands/v4' // v4 same as v5
 import type { Shorthands } from '@tamagui/shorthands/v4'
 import { themes, tokens } from '@tamagui/themes/v5'
 import type { V5Themes, V5Tokens } from '@tamagui/themes/v5'
-import type { CreateTamaguiProps } from '@tamagui/web'
 import { fonts } from './v5-fonts'
 import type { V5Fonts } from './v5-fonts'
-import { media, mediaQueryDefaultActive } from './v5-media'
-import type { V5Media } from './v5-media'
+import { media } from './media'
+import type { Media as V5Media } from './media'
+import { selectionStyles, settings } from './settings'
+import type { Settings as V5Settings } from './settings'
 
 export { shorthands } from '@tamagui/shorthands/v4'
-export { createThemes } from '@tamagui/theme-builder'
+// static re-exports only, so this compatibility config stays free of the
+// retired v5 theme builder on native.
 export {
-  adjustPalette,
-  adjustPalettes,
-  createV5Theme,
-  defaultChildrenThemes,
-  defaultDarkPalette,
-  defaultLightPalette,
-  hslToString,
-  // helpers
-  interpolateColor,
-  opacify,
-  parseHSL,
   tokens,
-  type AdjustFn,
-  // types
-  type HSL,
-  type PaletteAdjustments,
   type V5Theme,
   type V5ThemeNames,
   type V5Themes,
@@ -34,29 +21,10 @@ export {
 } from '@tamagui/themes/v5'
 export { createSystemFont, fonts } from './v5-fonts'
 export type { V5Fonts } from './v5-fonts'
-export { breakpoints, media, mediaQueryDefaultActive } from './v5-media'
-export type { V5Media } from './v5-media'
-
-export const selectionStyles = (theme) =>
-  theme.color5
-    ? {
-        backgroundColor: theme.color5,
-        color: theme.color11,
-      }
-    : null
-
-export const settings = {
-  mediaQueryDefaultActive,
-  defaultFont: 'body',
-  fastSchemeChange: true,
-  shouldAddPrefersColorThemes: true,
-  allowedStyleValues: 'somewhat-strict-web',
-  addThemeClassName: 'html',
-  onlyAllowShorthands: true,
-  styleCompat: 'web',
-} satisfies CreateTamaguiProps['settings']
-
-export type V5Settings = typeof settings
+export { breakpoints, media, mediaQueryDefaultActive } from './media'
+export type { Media as V5Media } from './media'
+export { selectionStyles, settings } from './settings'
+export type { Settings as V5Settings } from './settings'
 
 export type V5DefaultConfig = {
   media: V5Media