@tamagui/cli 3.0.0-beta.1093.1 → 3.0.0-beta.1097.1

package/src/migrate.ts

@@ -308,9 +308,19 @@ Keep importing regular Tamagui components from \`tamagui\` or
 \`@tamagui/core\`. Do not mix utility classes and Tamagui style props on the
 same component; choose the import whose styling language that component uses.
 
+### Required API follow-ups
+
+- Transition values: replace arrays with \`{ preset: 'quick', opacity: 'lazy' }\`, rename the transition object's \`default\` to \`preset\`, and place physics under \`spring\`. Move \`animateOnly\` into \`transition.properties\`. Read the upgrade guide's transition section before converting driver-specific options.
+- Groups and containers: \`group="card"\` enables \`group-hover/card:\` and other group states. Size queries require \`container="card"\` and use \`@sm/card:\`; a group alone no longer enables container measurement.
+- Control sizes: Config v6 uses \`xs | sm | md | lg | xl\` (default \`md\`). Keep numeric token keys while retaining Config v5, then map control sizes when separately adopting v6. Shape and icon geometry still uses size tokens or numbers.
+- Remove top-level \`createTamagui({ defaultProps })\`. Put default styles in \`styled()\` definitions and inherited non-style defaults in \`Component.Props\`.
+- Toast: replace \`useToastController().show(title, { message })\` with \`toast(title, { description: message })\`. Import \`Toast\` and \`toast\` from \`tamagui/toast\`; mount \`Toast.Root\` and \`Toast.List\` with the desired parts once in the app. The old provider/controller API is removed.
+- Replace \`ThemeableStack\` and \`SizableStack\` with \`YStack\` or \`XStack\` plus explicit styles; use \`elevation\` for elevation and border width/color for borders.
+- Checked/selected states: Checkbox, Switch, Tabs and ToggleGroup read \`background-press\`; customize \`activeStyle\` to override it per instance. Audit the resulting active background against the previous app and customize its theme or skin where needed.
+
 ### 15. Verification
 
-- Run \`npx tamagui check\`.
+- Run \`npx tamagui check --strict\`.
 - Run typecheck and build.
 - Start the app and manually test screens using Sheet, Dialog, Popover, Select, FocusScope, icons, and ScrollView.
 - Test Adapt breakpoints where popovers/selects/dialogs become sheets.

package/src/setup-prompt.ts

@@ -1,15 +1,68 @@
-// The agent brief for setting Tamagui up in a project that has never had it.
+// the agent brief for setting tamagui up in a project that has never had it.
 // `tamagui migrate --from v2` is the sibling for projects that already run v2.
 //
-// Both are printed by the CLI rather than kept only in docs so that whatever
+// both are printed by the cli rather than kept only in docs so that whatever
 // version a user installs describes itself, instead of an agent reading a docs
 // page written against a different release.
 
-export function printSetupPrompt() {
-  process.stdout.write(getSetupPrompt())
+import prompts from 'prompts'
+
+export async function resolveStyleValueSyntax(
+  setting?: 'string' | 'object' | 'both'
+): Promise<'string' | 'object' | 'both'> {
+  if (setting === 'string' || setting === 'object' || setting === 'both') {
+    return setting
+  }
+  if (!process.stdin.isTTY) {
+    return 'both'
+  }
+  const response = await prompts({
+    type: 'select',
+    name: 'syntax',
+    message: 'Which style value syntax would you like to document?',
+    choices: [
+      { title: 'both - document both string and object syntax', value: 'both' },
+      { title: 'string - e.g. bg="red hover:blue"', value: 'string' },
+      { title: 'object - e.g. bg={{ default: "red", hover: "blue" }}', value: 'object' },
+    ],
+    initial: 0,
+  })
+  return response.syntax || 'both'
 }
 
-export function getSetupPrompt() {
+export async function setupPrompt(options?: any) {
+  const { generatePrompt } = require('./generate-prompt')
+  return await generatePrompt(options)
+}
+
+export function printSetupPrompt(syntax?: 'string' | 'object' | 'both') {
+  if (syntax) {
+    process.stdout.write(getSetupPrompt(syntax))
+    return
+  }
+  if (!process.stdin.isTTY) {
+    process.stdout.write(getSetupPrompt('both'))
+    return
+  }
+  resolveStyleValueSyntax().then((chosen) => {
+    process.stdout.write(getSetupPrompt(chosen))
+  })
+}
+
+export function getSetupPrompt(syntax: 'string' | 'object' | 'both' = 'both') {
+  const styleExample =
+    syntax === 'string'
+      ? '```tsx\n<View bg="background hover:background-hover" p="4 sm:6" />\n```'
+      : syntax === 'object'
+        ? "```tsx\n<View bg={{ default: 'background', hover: 'background-hover' }} p={{ default: '4', sm: '6' }} />\n```"
+        : `\`\`\`tsx
+// string form
+<View bg="background hover:background-hover" p="4 sm:6" />
+
+// object form
+<View bg={{ default: 'background', hover: 'background-hover' }} p={{ default: '4', sm: '6' }} />
+\`\`\``
+
   return `You are adding Tamagui v3 to a project that does not use it yet.
 
 Work like a careful coding agent:
@@ -50,8 +103,10 @@ import { createTamagui } from 'tamagui'
 
 export const config = createTamagui(defaultConfig)
 
+type AppConfig = typeof config
+
 declare module 'tamagui' {
-  interface TamaguiCustomConfig extends typeof config {}
+  interface TamaguiCustomConfig extends AppConfig {}
 }
 \`\`\`
 
@@ -69,7 +124,7 @@ import { config } from './tamagui.config'
 export default function App() {
   return (
     <TamaguiProvider config={config} defaultTheme="light">
-      <View width={200} height={200} bg="background" />
+      <View w={200} h={200} bg="background" />
     </TamaguiProvider>
   )
 }
@@ -95,15 +150,13 @@ first.
 This is the part most likely to be written as if it were v2. In v3, token and
 theme names are bare, and conditions are flat clauses inside the value:
 
-\`\`\`tsx
-<View bg="background hover:background-hover" p="4 sm:6" />
-\`\`\`
+${styleExample}
 
 - No \`$\` sigils: \`bg="background"\`, not \`bg="$background"\`.
 - No condition objects: there is no \`hoverStyle={{ ... }}\` and no \`$sm={{ ... }}\`.
 - Modifiers chain left to right and read as prefixes: \`hover:sm:small\`.
 - Clauses work on variant props too, not just style props, so
-  \`size="large sm:small"\` selects a different variant value per condition.
+  \`size="lg sm:sm"\` selects a different variant value per condition.
 - When two clauses both apply, the winner is decided by specificity, not by
   source order: first by platform (\`ios:\` beats \`native:\` beats unprefixed),
   then by how many conditions the clause carries, then by category
@@ -114,15 +167,15 @@ theme names are bare, and conditions are flat clauses inside the value:
 ## 7. Verify before reporting success
 
 \`\`\`bash
-npx tamagui check
+npx tamagui check --strict
 \`\`\`
 
-\`tamagui check\` reports version mismatches, duplicate installs, lockfile
+\`tamagui check --strict\` reports version mismatches, duplicate installs, lockfile
 problems, a missing config, and any v2 style syntax left in source. Then run the
 project's own typecheck and build, and start the app and confirm a Tamagui
 component renders with its styles applied. A passing typecheck is not sufficient:
-flat values are strings, so a misspelled token compiles cleanly and only shows up
-at runtime.
+single-token values are checked when \`settings.allowedStyleValues\` is enabled,
+but conditional payloads also need the strict checker.
 
 ## 8. Give the agent the project's own vocabulary
 

package/src/upgrade.ts

@@ -1,5 +1,6 @@
 import chalk from 'chalk'
-import { execSync } from 'node:child_process'
+import { execFileSync } from 'node:child_process'
+import { globSync } from 'glob'
 import { existsSync, readFileSync, writeFileSync } from 'node:fs'
 import { join } from 'node:path'
 
@@ -66,38 +67,16 @@ function parseVersionSpecifier(version: string): {
   return { specifier: '', cleanVersion: version }
 }
 
-/**
- * Find all package.json files in the workspace
- */
-function findPackageJsonFiles(root: string): string[] {
-  const files: string[] = []
-
-  // Check root package.json
-  const rootPkgPath = join(root, 'package.json')
-  if (existsSync(rootPkgPath)) {
-    files.push(rootPkgPath)
-  }
-
-  // Use find command to locate all package.json files
-  try {
-    const result = execSync(
-      `find "${root}" -name "package.json" -not -path "*/node_modules/*" -not -path "*/.git/*" 2>/dev/null`,
-      { encoding: 'utf-8', maxBuffer: 10 * 1024 * 1024 }
-    )
-    const foundFiles = result.trim().split('\n').filter(Boolean)
-    files.push(...foundFiles.filter((f) => !files.includes(f)))
-  } catch {
-    // Fallback: just use root
-  }
-
-  return files
-}
-
 /**
  * Find all tamagui packages in the workspace
  */
 function findTamaguiPackages(root: string): PackageInfo[] {
-  const packageJsonFiles = findPackageJsonFiles(root)
+  const packageJsonFiles = globSync('**/package.json', {
+    cwd: root,
+    absolute: true,
+    nodir: true,
+    ignore: ['**/node_modules/**', '**/.git/**', '**/dist/**', '**/build/**'],
+  })
   const packages: PackageInfo[] = []
 
   for (const filePath of packageJsonFiles) {
@@ -141,7 +120,9 @@ function findTamaguiPackages(root: string): PackageInfo[] {
  */
 async function getLatestVersion(): Promise<string> {
   try {
-    const result = execSync('npm view tamagui version', { encoding: 'utf-8' })
+    const result = execFileSync('npm', ['view', 'tamagui', 'version'], {
+      encoding: 'utf-8',
+    })
     return result.trim()
   } catch (err) {
     throw new Error('Failed to fetch latest tamagui version from npm')
@@ -222,7 +203,7 @@ function getChangelogFromGit(
   try {
     // Try to fetch tags first
     try {
-      execSync('git fetch --tags 2>/dev/null', { encoding: 'utf-8', stdio: 'pipe' })
+      execFileSync('git', ['fetch', '--tags'], { encoding: 'utf-8', stdio: 'pipe' })
     } catch {
       // Ignore fetch errors
     }
@@ -237,8 +218,15 @@ function getChangelogFromGit(
 
     let result: string
     try {
-      result = execSync(
-        `git log ${fromTag}..${toTag} --pretty=format:"%H|%ad|%s" --date=short 2>/dev/null`,
+      result = execFileSync(
+        'git',
+        [
+          'log',
+          `${fromTag}..${toTag}`,
+          '--pretty=format:%H|%ad|%s',
+          '--date=short',
+          '--',
+        ],
         { encoding: 'utf-8', maxBuffer: 10 * 1024 * 1024 }
       )
     } catch {
@@ -530,6 +518,15 @@ export async function upgrade(options: UpgradeOptions = {}): Promise<void> {
   console.log(chalk.gray(`  Target version:  ${chalk.white(toVersion)}`))
   console.log('')
 
+  if (fromVersion.startsWith('2.') && toVersion.startsWith('3.')) {
+    console.log(
+      chalk.yellow(
+        'Run `tamagui migrate --from v2` for the required API and configuration migration.'
+      )
+    )
+    console.log('')
+  }
+
   // Show package summary (unless changelog only with no packages)
   if (packages.length > 0 && !changelogOnly) {
     displayPackageSummary(packages)

package/types/generate-prompt.d.ts

@@ -1,7 +1,11 @@
 import type { CLIResolvedOptions } from '@tamagui/types';
-interface GeneratePromptOptions extends CLIResolvedOptions {
+export interface GeneratePromptOptions extends CLIResolvedOptions {
     output?: string;
+    styleValueSyntax?: 'string' | 'object' | 'both';
 }
 export declare function generatePrompt(options: GeneratePromptOptions): Promise<void>;
-export {};
+export interface GenerateMarkdownOptions {
+    styleValueSyntax?: 'string' | 'object' | 'both';
+}
+export declare function generateMarkdown(config: any, options?: GenerateMarkdownOptions): string;
 //# sourceMappingURL=generate-prompt.d.ts.map

package/types/generate-prompt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generate-prompt.d.ts","sourceRoot":"","sources":["../src/generate-prompt.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAExD,UAAU,qBAAsB,SAAQ,kBAAkB;IACxD,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,wBAAsB,cAAc,CAAC,OAAO,EAAE,qBAAqB,iBA8BlE"}
+{"version":3,"file":"generate-prompt.d.ts","sourceRoot":"","sources":["../src/generate-prompt.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAExD,MAAM,WAAW,qBAAsB,SAAQ,kBAAkB;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,gBAAgB,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAA;CAChD;AAED,wBAAsB,cAAc,CAAC,OAAO,EAAE,qBAAqB,iBAoClE;AAED,MAAM,WAAW,uBAAuB;IACtC,gBAAgB,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAA;CAChD;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,uBAAuB,GAAG,MAAM,CAmjBvF"}

package/types/setup-prompt.d.ts

@@ -1,3 +1,5 @@
-export declare function printSetupPrompt(): void;
-export declare function getSetupPrompt(): string;
+export declare function resolveStyleValueSyntax(setting?: 'string' | 'object' | 'both'): Promise<'string' | 'object' | 'both'>;
+export declare function setupPrompt(options?: any): Promise<any>;
+export declare function printSetupPrompt(syntax?: 'string' | 'object' | 'both'): void;
+export declare function getSetupPrompt(syntax?: 'string' | 'object' | 'both'): string;
 //# sourceMappingURL=setup-prompt.d.ts.map

package/types/setup-prompt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"setup-prompt.d.ts","sourceRoot":"","sources":["../src/setup-prompt.ts"],"names":[],"mappings":"AAOA,wBAAgB,gBAAgB,SAE/B;AAED,wBAAgB,cAAc,WA+H7B"}
+{"version":3,"file":"setup-prompt.d.ts","sourceRoot":"","sources":["../src/setup-prompt.ts"],"names":[],"mappings":"AASA,wBAAsB,uBAAuB,CAC3C,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,GACrC,OAAO,CAAC,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC,CAmBvC;AAED,wBAAsB,WAAW,CAAC,OAAO,CAAC,EAAE,GAAG,gBAG9C;AAED,wBAAgB,gBAAgB,CAAC,MAAM,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,QAYrE;AAED,wBAAgB,cAAc,CAAC,MAAM,GAAE,QAAQ,GAAG,QAAQ,GAAG,MAAe,UA4I3E"}

package/types/upgrade.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"upgrade.d.ts","sourceRoot":"","sources":["../src/upgrade.ts"],"names":[],"mappings":"AAaA,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAidD;;GAEG;AACH,wBAAsB,OAAO,CAAC,OAAO,GAAE,cAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,CAoHzE"}
+{"version":3,"file":"upgrade.d.ts","sourceRoot":"","sources":["../src/upgrade.ts"],"names":[],"mappings":"AAcA,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAocD;;GAEG;AACH,wBAAsB,OAAO,CAAC,OAAO,GAAE,cAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,CA6HzE"}