@sanity/ui 4.2.0 → 5.0.0-alpha.10

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@sanity/ui",
-  "version": "4.2.0",
+  "version": "5.0.0-alpha.10",
+  "description": "Sanity UI Library",
   "keywords": [
     "components",
     "design-system",
@@ -9,94 +10,92 @@
     "sanity",
     "ui"
   ],
-  "homepage": "https://www.sanity.io/",
+  "homepage": "https://github.com/sanity-io/ui#readme",
   "bugs": {
     "url": "https://github.com/sanity-io/ui/issues"
   },
-  "license": "MIT",
-  "author": "Sanity.io <hello@sanity.io>",
+  "license": "ISC",
+  "author": "Sanity",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/sanity-io/ui.git",
-    "directory": "packages/ui"
+    "url": "git+https://github.com/sanity-io/ui.git"
+  },
+  "bin": {
+    "sanity-ui": "./bin/sanity-ui.js"
   },
   "files": [
-    "dist"
+    "bin",
+    "dist",
+    "src"
   ],
   "type": "module",
   "sideEffects": [
-    "*.css"
+    "*.css",
+    "./src/polyfills.ts",
+    "./dist/polyfills.js"
   ],
   "types": "./dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
-    "./autocomplete": "./dist/autocomplete.js",
-    "./breadcrumbs": "./dist/breadcrumbs.js",
-    "./code": "./dist/code.js",
-    "./menu": "./dist/menu.js",
-    "./popover": "./dist/popover.js",
-    "./theme": "./dist/theme.js",
-    "./toast": "./dist/toast.js",
-    "./tooltip": "./dist/tooltip.js",
+    "./polyfills": "./dist/polyfills.js",
+    "./package.json": "./package.json",
     "./styles.css": {
-      "types": "./dist/styles-css.d.ts",
+      "types": "./src/styles.css.d.ts",
       "browser": "./dist/styles.css",
       "style": "./dist/styles.css",
-      "node": "./dist/styles-css.js",
-      "default": "./dist/styles-css.js"
-    },
-    "./package.json": "./package.json"
+      "node": "./src/styles.css.node.js",
+      "default": "./src/styles.css.node.js"
+    }
   },
   "dependencies": {
-    "@floating-ui/react-dom": "^2.1.9",
-    "@sanity/color": "^3.0.8",
+    "@sanity-labs/design-tokens": "0.0.2-alpha.4",
     "@sanity/icons": "^5.2.1",
-    "@vanilla-extract/dynamic": "^2.1.5",
     "clsx": "^2.1.1",
-    "csstype": "^3.2.3",
-    "motion": "^13.2.0",
-    "react-is": "^19.2.8",
-    "react-refractor": "^4.0.0",
-    "use-effect-event": "^2.0.4"
+    "comment-json": "^5.0.0",
+    "dialog-closedby-polyfill": "^1.3.0",
+    "interestfor": "^1.0.8",
+    "react-refractor": "^4.0.0"
   },
   "devDependencies": {
-    "@sanity/tsdown-config": "^0.28.0",
-    "@sanity/vanilla-extract-vite-plugin": "^0.2.18",
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^7.0.1",
-    "@testing-library/react": "^16.3.3",
-    "@testing-library/user-event": "^14.6.7",
-    "@types/node": "^24.13.3",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.7",
-    "@types/react-is": "^19.2.0",
-    "@vanilla-extract/css": "^1.21.2",
-    "jsdom": "^30.0.1",
-    "oxc-transform-react": "^0.149.0",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "rimraf": "^5.0.5",
-    "styled-components": "^6.5.3",
-    "tsdown": "^0.23.0",
-    "typescript": "7.0.2",
-    "unrun": "^0.3.1",
-    "vite": "^8.2.2",
-    "vitest": "^5.0.0",
-    "vitest-axe": "^1.0.0-pre.5"
+    "@sanity/browserslist-config": "^1.0.5",
+    "@sanity/pkg-utils": "^10.8.2",
+    "@sanity/tsconfig": "^1.0.0",
+    "@types/node": "^25.5.2",
+    "@types/postcss-import": "^14.0.3",
+    "@types/postcss-prefix-selector": "^1.16.3",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "autoprefixer": "^10.4.27",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "concurrently": "^9.2.1",
+    "cssnano": "^8.0.0",
+    "postcss": "^8.5.14",
+    "postcss-cli": "^11.0.1",
+    "postcss-import": "^16.1.1",
+    "postcss-prefix-selector": "^2.1.1",
+    "postcss-selector-parser": "^7.1.1",
+    "rimraf": "^6.1.3",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.1"
   },
   "peerDependencies": {
     "react": "^19.2",
-    "react-dom": "^19.2",
-    "styled-components": "^6.1"
+    "react-dom": "^19.2"
   },
   "engines": {
-    "node": ">=22.12"
+    "node": ">=20.19 <22 || >=22.12"
   },
   "scripts": {
-    "build": "tsdown",
+    "build": "pnpm run sync-version && pnpm run clean && pnpm run build:css && pnpm run build:js && pnpm run build:cli",
+    "build:cli": "tsc -p tsconfig.cli.json",
+    "build:css": "NODE_ENV=production postcss src/index.css -o dist/styles.css",
+    "build:js": "pkg build --strict --check",
     "clean": "rimraf dist",
+    "dev": "concurrently -n css,js \"pnpm run dev:css\" \"pnpm run dev:js\"",
+    "dev:css": "postcss src/index.css -o dist/styles.css --watch",
+    "dev:js": "pkg watch",
+    "sync-version": "node scripts/write-version.js",
     "test": "vitest run",
-    "test:watch": "vitest",
-    "watch": "tsdown --watch"
+    "ts:check": "tsc --noEmit"
   }
 }

package/src/cli/checks.test.ts

@@ -0,0 +1,38 @@
+import {mkdtempSync, rmSync, writeFileSync} from 'node:fs'
+import {tmpdir} from 'node:os'
+import {join} from 'node:path'
+
+import {afterEach, beforeEach, describe, expect, it} from 'vitest'
+
+import {collectChecks} from './checks.js'
+import {writeInstalledUiVersion} from './test-utils.js'
+
+describe('collectChecks tsconfig', () => {
+  let dir: string
+  beforeEach(() => {
+    dir = mkdtempSync(join(tmpdir(), 'sui-checks-'))
+  })
+  afterEach(() => {
+    rmSync(dir, {recursive: true, force: true})
+  })
+
+  it('fails (not passes) when tsconfig.json cannot be parsed', () => {
+    // Genuinely unparseable (unterminated object), not just JSONC that
+    // comment-json would tolerate.
+    writeFileSync(join(dir, 'tsconfig.json'), '{ "compilerOptions": { "jsx": "react-jsx"')
+    const {checks} = collectChecks(dir)
+    const tsconfig = checks.find((c) => c.id === 'tsconfig')
+    expect(tsconfig?.status).toBe('fail')
+    expect(tsconfig?.detail).toMatch(/could not be parsed/)
+  })
+
+  it('fails the version check when @sanity/ui is pre-v5', () => {
+    writeFileSync(join(dir, 'package.json'), JSON.stringify({dependencies: {}}))
+    writeInstalledUiVersion(dir, '3.5.1')
+    const {checks} = collectChecks(dir)
+    expect(checks.find((c) => c.id === 'install')?.status).toBe('pass')
+    const version = checks.find((c) => c.id === 'version')
+    expect(version?.status).toBe('fail')
+    expect(version?.detail).toMatch(/pre-v5 \(expected v5\)/)
+  })
+})

package/src/cli/checks.ts

@@ -0,0 +1,200 @@
+import {existsSync, readFileSync} from 'node:fs'
+import {createRequire} from 'node:module'
+import {dirname, join} from 'node:path'
+import process from 'node:process'
+
+import {
+  detect,
+  isPackageInstalled,
+  isLegacyUiVersion,
+  PACKAGE_NAME,
+  readInstalledPackageVersion,
+} from './detect.js'
+import {inspectStylesheet, STYLES_SPECIFIER} from './styles.js'
+import {inspectTsconfig} from './tsconfig.js'
+import type {Check, CheckStatus, Detected} from './types.js'
+import {meetsNode, meetsReact, NODE_REQUIREMENT, REACT_MIN} from './versions.js'
+
+const ICONS = '@sanity/icons'
+
+/** Resolves the built stylesheet on disk (not the Node no-op shim). */
+function resolveStylesheet(cwd: string): string | null {
+  try {
+    const require = createRequire(join(cwd, 'noop.js'))
+    const pkgJsonPath = require.resolve(`${PACKAGE_NAME}/package.json`)
+    const path = join(dirname(pkgJsonPath), 'dist/styles.css')
+    return existsSync(path) ? path : null
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Without a browser, "a component renders with a computed background" is
+ * verified by confirming the resolved stylesheet ships the component class and
+ * a background declaration for it. If both are present and the import is wired,
+ * the component renders styled.
+ */
+function stylesheetHasComponentStyles(path: string): boolean {
+  try {
+    const css = readFileSync(path, 'utf8')
+    return /\.sui-Card\b/.test(css) && /background/.test(css)
+  } catch {
+    return false
+  }
+}
+
+interface CheckMeta {
+  title: string
+  detail?: string
+  fix?: string
+  status?: CheckStatus
+}
+
+function check(id: string, ok: boolean, meta: CheckMeta): Check {
+  return {
+    id,
+    title: meta.title,
+    ok,
+    status: meta.status ?? (ok ? 'pass' : 'fail'),
+    detail: meta.detail,
+    fix: meta.fix,
+  }
+}
+
+export interface CheckReport {
+  detected: Detected
+  checks: Check[]
+  stylesheetPath: string | null
+}
+
+/**
+ * Runs every verification and returns structured results. `doctor` prints them
+ * all; `init` reuses a subset on exit. Pure read-only.
+ */
+export function collectChecks(cwd: string): CheckReport {
+  const detected = detect(cwd)
+  const checks: Check[] = []
+
+  const installedVersion = readInstalledPackageVersion(cwd, PACKAGE_NAME)
+  checks.push(
+    check('install', Boolean(installedVersion), {
+      title: 'Package installed',
+      detail: installedVersion ? `${PACKAGE_NAME}@${installedVersion}` : 'not installed',
+      fix: `Run \`npx ${PACKAGE_NAME}@alpha init\` or install it with your package manager`,
+    }),
+  )
+
+  if (installedVersion) {
+    const legacyInstalled = isLegacyUiVersion(installedVersion)
+    checks.push(
+      check('version', !legacyInstalled, {
+        title: 'Package version',
+        detail: legacyInstalled
+          ? `${PACKAGE_NAME}@${installedVersion} is pre-v5 (expected v5)`
+          : `${PACKAGE_NAME}@${installedVersion}`,
+        fix: `Remove the existing @sanity/ui version, or install v5 with a package alias — see README "For apps using Sanity UI v3"`,
+      }),
+    )
+  }
+
+  const iconsInstalled = isPackageInstalled(cwd, ICONS)
+  checks.push(
+    check('icons', iconsInstalled, {
+      title: 'Icons installed',
+      detail: iconsInstalled ? `${ICONS} present` : `${ICONS} missing`,
+      fix: `Install it: add ${ICONS}`,
+    }),
+  )
+
+  const stylesheetPath = resolveStylesheet(cwd)
+  const stylesheetResolves = Boolean(stylesheetPath)
+  checks.push(
+    check('stylesheet-resolves', stylesheetResolves, {
+      title: 'Stylesheet resolves',
+      detail: stylesheetResolves ? `${PACKAGE_NAME}/styles.css` : 'cannot resolve styles.css',
+      fix: 'Reinstall the package, or build it if working inside this monorepo',
+    }),
+  )
+
+  const stylesheet = inspectStylesheet(cwd, detected.entry)
+  checks.push(
+    check('stylesheet-wired', stylesheet.imported, {
+      title: 'Stylesheet imported',
+      detail: stylesheet.imported
+        ? `imported in ${stylesheet.importedIn ?? detected.entry}`
+        : stylesheet.exists
+          ? `missing from ${detected.entry}`
+          : `entry file ${detected.entry} not found`,
+      fix: `Add \`import '${STYLES_SPECIFIER}'\` to ${detected.entry}`,
+    }),
+  )
+
+  if (detected.typescript) {
+    const tsconfig = inspectTsconfig(cwd)
+    const loadBearing = tsconfig.changes.filter((c) => c.load)
+    // An unreadable file has no changes to report, so guard against it explicitly
+    // rather than letting an empty change list read as "all good".
+    const ok = tsconfig.exists && !tsconfig.unreadable && loadBearing.length === 0
+    checks.push(
+      check('tsconfig', ok, {
+        title: 'tsconfig options',
+        detail: !tsconfig.exists
+          ? 'tsconfig.json not found'
+          : tsconfig.unreadable
+            ? 'tsconfig.json could not be parsed'
+            : loadBearing.length === 0
+              ? tsconfig.changes.length === 0
+                ? 'all required options set'
+                : 'required options set (some optional additions available)'
+              : `needs: ${loadBearing.map((c) => `${c.key}: ${String(c.to)}`).join(', ')}`,
+        fix: tsconfig.unreadable
+          ? 'Fix the JSON syntax in tsconfig.json'
+          : `Run \`npx ${PACKAGE_NAME}@alpha init\` to reconcile tsconfig.json`,
+      }),
+    )
+  }
+
+  const reactVersion = detected.react.version
+  const reactOk = reactVersion ? meetsReact(reactVersion) : false
+  checks.push(
+    check('react', reactOk, {
+      title: 'React version',
+      status: reactVersion ? (reactOk ? 'pass' : 'fail') : 'warn',
+      detail: reactVersion ? `react ${reactVersion}` : 'react not detected',
+      fix: `Upgrade React to >= ${REACT_MIN}`,
+    }),
+  )
+
+  const nodeVersion = process.versions.node
+  checks.push(
+    check('node', meetsNode(nodeVersion), {
+      title: 'Node version',
+      detail: `node ${nodeVersion} (requires ${NODE_REQUIREMENT})`,
+      fix: `Use Node ${NODE_REQUIREMENT}`,
+    }),
+  )
+
+  return {detected, checks, stylesheetPath}
+}
+
+/** The subset `init` verifies on exit, plus the render probe. */
+export function verifyAfterInit(cwd: string): Check[] {
+  const {checks, stylesheetPath} = collectChecks(cwd)
+  const ids = new Set(['stylesheet-resolves', 'stylesheet-wired', 'tsconfig'])
+  const subset = checks.filter((c) => ids.has(c.id))
+
+  const probeOk = stylesheetPath ? stylesheetHasComponentStyles(stylesheetPath) : false
+  subset.push({
+    id: 'probe',
+    title: 'Probe renders with background',
+    ok: probeOk,
+    status: probeOk ? 'pass' : 'fail',
+    detail: stylesheetPath
+      ? 'Card ships a background declaration'
+      : 'stylesheet not resolved, cannot probe',
+    fix: 'Ensure the package is installed and built',
+  })
+
+  return subset
+}

package/src/cli/config.ts

@@ -0,0 +1,44 @@
+import {existsSync, writeFileSync} from 'node:fs'
+import {join} from 'node:path'
+
+import type {Framework} from './types.js'
+
+export const CONFIG_FILE = 'sanity-ui.json'
+
+export interface SanityUiConfig {
+  $schema: string
+  framework: Framework
+  entry: string
+}
+
+/**
+ * Builds the sanity-ui.json contents: a small record of the detected setup
+ * (framework, entry) written to the project root for tooling to read.
+ */
+export function buildConfig({
+  framework,
+  entry,
+}: {
+  framework: Framework
+  entry: string
+}): SanityUiConfig {
+  return {
+    $schema: 'https://sanity-ui.sanity.dev/schema.json',
+    framework,
+    entry,
+  }
+}
+
+export function configExists(cwd: string): boolean {
+  return existsSync(join(cwd, CONFIG_FILE))
+}
+
+export function writeConfig(
+  cwd: string,
+  config: SanityUiConfig,
+  {dryRun = false} = {},
+): {file: string; wrote: boolean} {
+  const file = join(cwd, CONFIG_FILE)
+  if (!dryRun) writeFileSync(file, `${JSON.stringify(config, null, 2)}\n`)
+  return {file, wrote: !dryRun}
+}

package/src/cli/detect.test.ts

@@ -0,0 +1,191 @@
+import {mkdirSync, mkdtempSync, rmSync, writeFileSync} from 'node:fs'
+import {tmpdir} from 'node:os'
+import {join} from 'node:path'
+
+import {afterEach, beforeEach, describe, expect, it} from 'vitest'
+
+import {
+  detect,
+  detectEntry,
+  detectFramework,
+  detectPackageManager,
+  isLegacyUiVersion,
+} from './detect.js'
+import {writeInstalledUiVersion} from './test-utils.js'
+
+describe('detectPackageManager', () => {
+  let dir: string
+  beforeEach(() => {
+    dir = mkdtempSync(join(tmpdir(), 'sui-pm-'))
+  })
+  afterEach(() => {
+    rmSync(dir, {recursive: true, force: true})
+  })
+
+  it('reads lockfiles', () => {
+    writeFileSync(join(dir, 'pnpm-lock.yaml'), '')
+    expect(detectPackageManager(dir)).toBe('pnpm')
+  })
+
+  it('falls back to the packageManager field, then npm', () => {
+    writeFileSync(join(dir, 'package.json'), JSON.stringify({packageManager: 'yarn@4.0.0'}))
+    expect(detectPackageManager(dir)).toBe('yarn')
+    writeFileSync(join(dir, 'package.json'), JSON.stringify({}))
+    expect(detectPackageManager(dir)).toBe('npm')
+  })
+})
+
+describe('detectFramework', () => {
+  let dir: string
+  beforeEach(() => {
+    dir = mkdtempSync(join(tmpdir(), 'sui-fw-'))
+  })
+  afterEach(() => {
+    rmSync(dir, {recursive: true, force: true})
+  })
+
+  function pkg(deps: Record<string, string>): void {
+    writeFileSync(join(dir, 'package.json'), JSON.stringify({dependencies: deps}))
+  }
+
+  it('distinguishes Next App Router from Pages', () => {
+    pkg({next: '16.0.0'})
+    mkdirSync(join(dir, 'app'))
+    expect(detectFramework(dir)).toBe('next-app')
+
+    rmSync(join(dir, 'app'), {recursive: true})
+    mkdirSync(join(dir, 'pages'))
+    expect(detectFramework(dir)).toBe('next-pages')
+  })
+
+  it('detects react-router, remix, astro, vite, and the react fallback', () => {
+    pkg({'@react-router/dev': '7.0.0', 'react-router': '7.0.0'})
+    expect(detectFramework(dir)).toBe('react-router')
+
+    pkg({'@remix-run/react': '2.0.0'})
+    expect(detectFramework(dir)).toBe('remix')
+
+    pkg({astro: '4.0.0'})
+    expect(detectFramework(dir)).toBe('astro')
+
+    pkg({vite: '8.0.0'})
+    expect(detectFramework(dir)).toBe('vite')
+
+    pkg({react: '19.2.0'})
+    expect(detectFramework(dir)).toBe('react')
+  })
+})
+
+describe('detectEntry', () => {
+  let dir: string
+  beforeEach(() => {
+    dir = mkdtempSync(join(tmpdir(), 'sui-entry-'))
+  })
+  afterEach(() => {
+    rmSync(dir, {recursive: true, force: true})
+  })
+
+  it('returns the existing entry when present', () => {
+    mkdirSync(join(dir, 'src'))
+    writeFileSync(join(dir, 'src/main.tsx'), '')
+    expect(detectEntry(dir, 'vite')).toEqual({entry: 'src/main.tsx', exists: true})
+  })
+
+  it('returns the canonical default when absent', () => {
+    expect(detectEntry(dir, 'next-app')).toEqual({entry: 'app/layout.tsx', exists: false})
+  })
+})
+
+describe('detect typescript flag', () => {
+  let dir: string
+  beforeEach(() => {
+    dir = mkdtempSync(join(tmpdir(), 'sui-ts-'))
+  })
+  afterEach(() => {
+    rmSync(dir, {recursive: true, force: true})
+  })
+
+  it('does not infer TypeScript from a guessed entry that does not exist', () => {
+    writeFileSync(join(dir, 'package.json'), JSON.stringify({dependencies: {react: '19.2.0'}}))
+    // No tsconfig, no typescript dep, and the .tsx entry is only a fallback guess.
+    expect(detect(dir).typescript).toBe(false)
+  })
+
+  it('infers TypeScript when the resolved entry file actually exists', () => {
+    mkdirSync(join(dir, 'src'))
+    writeFileSync(join(dir, 'src/main.tsx'), '')
+    writeFileSync(join(dir, 'package.json'), JSON.stringify({devDependencies: {vite: '8.0.0'}}))
+    expect(detect(dir).typescript).toBe(true)
+  })
+})
+
+describe('isLegacyUiVersion', () => {
+  it('treats majors 1–4 as legacy and 5+ as v5', () => {
+    expect(isLegacyUiVersion('3.5.1')).toBe(true)
+    expect(isLegacyUiVersion('5.0.0-alpha.1')).toBe(false)
+    expect(isLegacyUiVersion('5.0.0')).toBe(false)
+  })
+})
+
+describe('detect ui install', () => {
+  let dir: string
+  beforeEach(() => {
+    dir = mkdtempSync(join(tmpdir(), 'sui-ui-install-'))
+  })
+  afterEach(() => {
+    rmSync(dir, {recursive: true, force: true})
+  })
+
+  it('detects a declared pre-v5 range', () => {
+    writeFileSync(
+      join(dir, 'package.json'),
+      JSON.stringify({dependencies: {'@sanity/ui': '^3.5.1'}}),
+    )
+    expect(detect(dir).legacyInstall).toBe('^3.5.1')
+  })
+
+  it('detects an installed pre-v5 version', () => {
+    writeFileSync(join(dir, 'package.json'), JSON.stringify({dependencies: {}}))
+    writeInstalledUiVersion(dir, '3.5.1')
+    expect(detect(dir).legacyInstall).toBe('3.5.1')
+  })
+
+  it('detects a v5 npm alias alongside legacy @sanity/ui', () => {
+    writeFileSync(
+      join(dir, 'package.json'),
+      JSON.stringify({dependencies: {'ui5': 'npm:@sanity/ui@5', '@sanity/ui': '^3.5.1'}}),
+    )
+    const result = detect(dir)
+    expect(result.aliasedInstall).toBe('ui5')
+    expect(result.legacyInstall).toBe('^3.5.1')
+  })
+
+  it('detects a versioned v5 npm alias', () => {
+    writeFileSync(
+      join(dir, 'package.json'),
+      JSON.stringify({dependencies: {ui5: 'npm:@sanity/ui@5.0.0-alpha.1'}}),
+    )
+    expect(detect(dir).aliasedInstall).toBe('ui5')
+  })
+
+  it('detects the alpha dist-tag npm alias', () => {
+    writeFileSync(
+      join(dir, 'package.json'),
+      JSON.stringify({dependencies: {ui5: 'npm:@sanity/ui@alpha'}}),
+    )
+    expect(detect(dir).aliasedInstall).toBe('ui5')
+  })
+
+  it('does not detect uninstalled ui as legacy or alias', () => {
+    writeFileSync(join(dir, 'package.json'), JSON.stringify({dependencies: {react: '19.2.0'}}))
+    expect(detect(dir).legacyInstall).toBeNull()
+    expect(detect(dir).aliasedInstall).toBeNull()
+  })
+
+  it('does not detect installed v5 as legacy or alias', () => {
+    writeFileSync(join(dir, 'package.json'), JSON.stringify({dependencies: {}}))
+    writeInstalledUiVersion(dir, '5.0.0-alpha.1')
+    expect(detect(dir).legacyInstall).toBeNull()
+    expect(detect(dir).aliasedInstall).toBeNull()
+  })
+})