@tamagui/config 3.0.0-beta.924.1 → 3.0.1

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@tamagui/config",
-  "version": "3.0.0-beta.924.1",
+  "version": "3.0.1",
+  "license": "MIT",
   "type": "module",
   "sideEffects": false,
   "files": [
@@ -80,6 +81,15 @@
       "require": "./dist/cjs/v6-builder.cjs",
       "default": "./dist/esm/v6-builder.mjs"
     },
+    "./settings": {
+      "types": "./types/settings.d.ts",
+      "react-native": "./dist/esm/settings.native.js",
+      "browser": "./dist/esm/settings.mjs",
+      "module": "./dist/esm/settings.mjs",
+      "import": "./dist/esm/settings.mjs",
+      "require": "./dist/cjs/settings.cjs",
+      "default": "./dist/esm/settings.mjs"
+    },
     "./animations-css": {
       "types": "./types/animations-css.d.ts",
       "react-native": "./dist/esm/animations-css.native.js",
@@ -167,25 +177,27 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/animations-css": "3.0.0-beta.924.1",
-    "@tamagui/animations-motion": "3.0.0-beta.924.1",
-    "@tamagui/animations-react-native": "3.0.0-beta.924.1",
-    "@tamagui/animations-reanimated": "3.0.0-beta.924.1",
-    "@tamagui/create-system-font": "3.0.0-beta.924.1",
-    "@tamagui/shorthands": "3.0.0-beta.924.1",
-    "@tamagui/style-grammar": "3.0.0-beta.924.1",
-    "@tamagui/themes": "3.0.0-beta.924.1",
-    "@tamagui/web": "3.0.0-beta.924.1"
+    "@tamagui/animation-helpers": "3.0.1",
+    "@tamagui/animations-css": "3.0.1",
+    "@tamagui/animations-motion": "3.0.1",
+    "@tamagui/animations-react-native": "3.0.1",
+    "@tamagui/animations-reanimated": "3.0.1",
+    "@tamagui/create-system-font": "3.0.1",
+    "@tamagui/shorthands": "3.0.1",
+    "@tamagui/style-grammar": "3.0.1",
+    "@tamagui/themes": "3.0.1",
+    "@tamagui/web": "3.0.1"
   },
   "devDependencies": {
     "@csstools/color-helpers": "6.1.0",
-    "@tamagui/build": "3.0.0-beta.924.1",
-    "@tamagui/cli": "3.0.0-beta.924.1",
+    "@tamagui/build": "3.0.1",
+    "@tamagui/cli": "3.0.1",
     "tailwindcss": "4.3.0"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tamagui/tamagui.git",
     "directory": "code/core/config"
-  }
+  },
+  "releaseSourceCommit": "c156b7cc55e5a6cc5883ebc8189720850ac32dbd"
 }

package/src/animations-css.ts

@@ -1,31 +1,6 @@
 import { createAnimations } from '@tamagui/animations-css/extras'
+import { animationPresets } from '@tamagui/animation-helpers'
 
-const easeOut = 'cubic-bezier(0.25, 0.1, 0.25, 1)'
-const bouncy = 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
-
-export const animationsCSS = createAnimations({
-  '0ms': '0ms linear',
-  '50ms': '50ms linear',
-  '75ms': '75ms linear',
-  '100ms': '100ms ease-out',
-  '200ms': '200ms ease-out',
-  '250ms': '250ms ease-out',
-  '300ms': '300ms ease-out',
-  '400ms': '400ms ease-out',
-  '500ms': '500ms ease-out',
-  superBouncy: `300ms cubic-bezier(0.175, 0.885, 0.32, 1.5)`,
-  bouncy: `350ms ${bouncy}`,
-  superLazy: `600ms ${easeOut}`,
-  lazy: `500ms ${easeOut}`,
-  medium: `300ms ${easeOut}`,
-  slowest: `800ms ${easeOut}`,
-  slow: `450ms ${easeOut}`,
-  quick: `150ms ${easeOut}`,
-  quickLessBouncy: `180ms ${easeOut}`,
-  quicker: `120ms ${easeOut}`,
-  quickerLessBouncy: `100ms ${easeOut}`,
-  quickest: `80ms ${easeOut}`,
-  quickestLessBouncy: `60ms ${easeOut}`,
-})
+export const animationsCSS = createAnimations(animationPresets)
 
 export const animations = animationsCSS

package/src/animations-motion.ts

@@ -1,109 +1,6 @@
 import { createAnimations } from '@tamagui/animations-motion'
+import { animationPresets } from '@tamagui/animation-helpers'
 
-export const animationsMotion = createAnimations({
-  '0ms': {
-    duration: 0,
-  },
-  '50ms': {
-    duration: 50,
-  },
-  '75ms': {
-    duration: 75,
-  },
-  '100ms': {
-    duration: 100,
-  },
-  '200ms': {
-    duration: 200,
-  },
-  '250ms': {
-    duration: 250,
-  },
-  '300ms': {
-    duration: 300,
-  },
-  '400ms': {
-    duration: 400,
-  },
-  '500ms': {
-    duration: 500,
-  },
-  superLazy: {
-    type: 'spring',
-    damping: 15,
-    mass: 2,
-    stiffness: 20,
-  },
-  lazy: {
-    type: 'spring',
-    damping: 11,
-    mass: 0.25,
-    stiffness: 12,
-  },
-  slowest: {
-    type: 'spring',
-    damping: 9,
-    stiffness: 7.5,
-  },
-  slow: {
-    type: 'spring',
-    damping: 27,
-    stiffness: 45,
-  },
-  medium: {
-    damping: 12,
-    stiffness: 100,
-    mass: 0.85,
-  },
-  superBouncy: {
-    type: 'spring',
-    damping: 3,
-    mass: 0.7,
-    stiffness: 135,
-  },
-  bouncy: {
-    type: 'spring',
-    damping: 5.4,
-    mass: 0.9,
-    stiffness: 90,
-  },
-  quick: {
-    type: 'spring',
-    damping: 17,
-    mass: 0.5,
-    stiffness: 410,
-  },
-  quickLessBouncy: {
-    type: 'spring',
-    damping: 40,
-    mass: 1,
-    stiffness: 400,
-    velocity: 5,
-  },
-  quicker: {
-    type: 'spring',
-    damping: 20,
-    mass: 0.35,
-    stiffness: 450,
-  },
-  quickerLessBouncy: {
-    type: 'spring',
-    damping: 26,
-    mass: 0.5,
-    stiffness: 500,
-  },
-  quickest: {
-    type: 'spring',
-    damping: 22,
-    mass: 0.3,
-    stiffness: 550,
-  },
-  quickestLessBouncy: {
-    type: 'spring',
-    damping: 28,
-    mass: 0.4,
-    stiffness: 600,
-  },
-})
+export const animationsMotion = createAnimations(animationPresets)
 
 export const animations = animationsMotion

package/src/animations-reanimated.ts

@@ -1,105 +1,6 @@
 import { createAnimations } from '@tamagui/animations-reanimated'
+import { animationPresets } from '@tamagui/animation-helpers'
 
-export const animationsReanimated = createAnimations({
-  '0ms': {
-    type: 'timing',
-    duration: 0,
-  },
-  '50ms': {
-    type: 'timing',
-    duration: 50,
-  },
-  '75ms': {
-    type: 'timing',
-    duration: 75,
-  },
-  '100ms': {
-    type: 'timing',
-    duration: 100,
-  },
-  '200ms': {
-    type: 'timing',
-    duration: 200,
-  },
-  '250ms': {
-    type: 'timing',
-    duration: 250,
-  },
-  '300ms': {
-    type: 'timing',
-    duration: 300,
-  },
-  '400ms': {
-    type: 'timing',
-    duration: 400,
-  },
-  '500ms': {
-    type: 'timing',
-    duration: 500,
-  },
-  superBouncy: {
-    damping: 5,
-    mass: 0.7,
-    stiffness: 180,
-  },
-  bouncy: {
-    damping: 9,
-    mass: 0.9,
-    stiffness: 120,
-  },
-  superLazy: {
-    damping: 25,
-    mass: 2,
-    stiffness: 25,
-  },
-  medium: {
-    damping: 16,
-    stiffness: 90,
-    mass: 0.8,
-  },
-  lazy: {
-    damping: 18,
-    mass: 0.2,
-    stiffness: 10,
-  },
-  slowest: {
-    damping: 15,
-    stiffness: 10,
-  },
-  slow: {
-    damping: 45,
-    stiffness: 60,
-  },
-  quick: {
-    damping: 25,
-    mass: 1,
-    stiffness: 550,
-  },
-  quickLessBouncy: {
-    damping: 40,
-    mass: 2,
-    stiffness: 400,
-  },
-  quicker: {
-    damping: 16,
-    mass: 0.6,
-    stiffness: 700,
-  },
-  quickerLessBouncy: {
-    damping: 27,
-    mass: 0.45,
-    stiffness: 750,
-  },
-  quickest: {
-    damping: 15,
-    mass: 0.6,
-    stiffness: 400,
-  },
-  quickestLessBouncy: {
-    damping: 24,
-    mass: 0.35,
-    stiffness: 750,
-  },
-})
+export const animationsReanimated = createAnimations(animationPresets)
 
 export const animations = animationsReanimated

package/src/animations-rn.ts

@@ -1,115 +1,6 @@
 import { createAnimations } from '@tamagui/animations-react-native'
+import { animationPresets } from '@tamagui/animation-helpers'
 
-export const animationsReactNative = createAnimations({
-  '0ms': {
-    type: 'timing',
-    duration: 0,
-  },
-  '50ms': {
-    type: 'timing',
-    duration: 50,
-  },
-  '75ms': {
-    type: 'timing',
-    duration: 75,
-  },
-  '100ms': {
-    type: 'timing',
-    duration: 100,
-  },
-  '200ms': {
-    type: 'timing',
-    duration: 200,
-  },
-  '250ms': {
-    type: 'timing',
-    duration: 250,
-  },
-  '300ms': {
-    type: 'timing',
-    duration: 300,
-  },
-  '400ms': {
-    type: 'timing',
-    duration: 400,
-  },
-  '500ms': {
-    type: 'timing',
-    duration: 500,
-  },
-  superBouncy: {
-    type: 'spring',
-    damping: 5,
-    mass: 0.7,
-    stiffness: 180,
-  },
-  bouncy: {
-    type: 'spring',
-    damping: 9,
-    mass: 0.9,
-    stiffness: 120,
-  },
-  superLazy: {
-    type: 'spring',
-    damping: 25,
-    mass: 2,
-    stiffness: 25,
-  },
-  lazy: {
-    type: 'spring',
-    damping: 18,
-    mass: 0.2,
-    stiffness: 10,
-  },
-  medium: {
-    damping: 16,
-    stiffness: 90,
-    mass: 0.8,
-  },
-  slowest: {
-    type: 'spring',
-    damping: 15,
-    stiffness: 10,
-  },
-  slow: {
-    type: 'spring',
-    damping: 45,
-    stiffness: 60,
-  },
-  quick: {
-    type: 'spring',
-    damping: 25,
-    mass: 1,
-    stiffness: 550,
-  },
-  quickLessBouncy: {
-    type: 'spring',
-    damping: 40,
-    mass: 2,
-    stiffness: 400,
-  },
-  quicker: {
-    type: 'spring',
-    damping: 16,
-    mass: 0.6,
-    stiffness: 700,
-  },
-  quickerLessBouncy: {
-    type: 'spring',
-    damping: 27,
-    mass: 0.45,
-    stiffness: 750,
-  },
-  quickest: {
-    damping: 15,
-    mass: 0.6,
-    stiffness: 400,
-  },
-  quickestLessBouncy: {
-    damping: 24,
-    mass: 0.35,
-    stiffness: 750,
-  },
-})
+export const animationsReactNative = createAnimations(animationPresets)
 
 export const animations = animationsReactNative

package/src/settings.ts

@@ -11,6 +11,7 @@ export const selectionStyles = (theme) =>
 
 export const settings = {
   mediaQueryDefaultActive,
+  selectionStyles,
   defaultFont: 'body',
   fastSchemeChange: true,
   shouldAddPrefersColorThemes: true,

package/src/v5-base.ts

@@ -2,6 +2,7 @@ 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 { GenericSizing } from '@tamagui/web'
 import { fonts } from './v5-fonts'
 import type { V5Fonts } from './v5-fonts'
 import { media } from './media'
@@ -32,10 +33,64 @@ export type V5DefaultConfig = {
   themes: V5Themes
   tokens: V5Tokens
   fonts: V5Fonts
-  selectionStyles: typeof selectionStyles
   settings: V5Settings
+  sizing: GenericSizing
 }
 
+// v5's numeric scales cannot derive the ladder, so each rung points text,
+// padding and radius at v5 keys and pins the frozen geometry: v5 buttons
+// keep their heights while their text and spacing go v5-native
+export const defaultSizing = {
+  default: 'md',
+  sizes: {
+    xs: {
+      fontSize: '1',
+      controlFontSize: '1',
+      paddingInline: '2',
+      paddingBlock: '1-5',
+      gap: '1-5',
+      radius: '1',
+      px: { height: 24, icon: 12, square: 17 },
+    },
+    sm: {
+      fontSize: '3',
+      controlFontSize: '3',
+      paddingInline: '3',
+      paddingBlock: '2',
+      gap: '2',
+      radius: '2',
+      px: { height: 32, icon: 16, square: 20 },
+    },
+    md: {
+      fontSize: '3',
+      controlFontSize: '3',
+      paddingInline: '3-5',
+      paddingBlock: '2',
+      gap: '2',
+      radius: '2',
+      px: { height: 36, icon: 16, square: 22 },
+    },
+    lg: {
+      fontSize: '5',
+      controlFontSize: '5',
+      paddingInline: '5',
+      paddingBlock: '2',
+      gap: '2',
+      radius: '2',
+      px: { height: 40, icon: 16, square: 25 },
+    },
+    xl: {
+      fontSize: '6',
+      controlFontSize: '6',
+      paddingInline: '6',
+      paddingBlock: '2-5',
+      gap: '2-5',
+      radius: '3',
+      px: { height: 48, icon: 20, square: 28 },
+    },
+  },
+} as const satisfies GenericSizing
+
 // base config without animations - users must provide their own
 export const defaultConfig: V5DefaultConfig = {
   media,
@@ -43,6 +98,6 @@ export const defaultConfig: V5DefaultConfig = {
   themes,
   tokens,
   fonts,
-  selectionStyles,
   settings,
+  sizing: defaultSizing,
 }

package/src/v5-fonts.ts

@@ -1,4 +1,8 @@
-import { createSystemFont } from '@tamagui/create-system-font'
+import {
+  createSystemFont,
+  v5SystemFontLineHeight,
+  v5SystemFontSizes,
+} from '@tamagui/create-system-font'
 const isNative = process.env.TAMAGUI_TARGET === 'native'
 
 export { createSystemFont }
@@ -7,11 +11,13 @@ export { createSystemFont }
 const headingLineHeight = (size: number) =>
   Math.round(isNative ? size * 1.2 : size * 1.12 + 5)
 
-// pin the v5 font size + lineHeight scales to exact "Npx" strings. numbers are
-// reserved for the v6 multiplier semantics; px strings mean "exact pixels" and
-// are normalized back to numbers (with a needsPx flag) at token creation, so
-// rendering is identical to the previous numeric config. the numeric type is
-// preserved via cast to avoid widening every font-size consumer.
+// v5 pins its own size and line height scales. the package defaults moved to a
+// smooth curve for v6, and a v5 app must not resize when it takes the update
+const v5Scale = { sizes: v5SystemFontSizes, sizeLineHeight: v5SystemFontLineHeight }
+
+// keep v5 font scales explicitly absolute. numeric font definitions also retain
+// pixel units in v3; only authored numeric styles and numeric-string font values
+// express line-height ratios. token creation preserves numeric values for arithmetic.
 const toPxScale = <T extends Record<string, number>>(obj: T): T =>
   Object.fromEntries(
     Object.entries(obj).map(([k, v]) => [k, typeof v === 'number' ? `${v}px` : v])
@@ -24,9 +30,10 @@ const pinFontToPx = <F extends { size: any; lineHeight?: any }>(font: F): F => (
 })
 
 export const fonts = {
-  body: pinFontToPx(createSystemFont()),
+  body: pinFontToPx(createSystemFont(v5Scale)),
   heading: pinFontToPx(
     createSystemFont({
+      ...v5Scale,
       font: {
         weight: {
           0: '600',