@sanity/ui 3.0.0-static.2 → 3.0.0-static.20

package/exports/_visual-editing.ts

@@ -2,7 +2,6 @@
  * These are internal exports for usage in `@sanity/visual-editing` and `@sanity/insert-menu`,
  * which are used in environments where the regular `@sanity/ui` export is far too heavy due to imports from refractor and more.
  */
-export {studioTheme} from '../src/core/_compat'
 export {ThemeProvider, type ThemeProviderProps} from '../src/core/_compat/theme/themeProvider'
 export {useTheme_v2} from '../src/core/_compat/theme/useTheme'
 export {Hotkeys, type HotkeysProps} from '../src/core/components/hotkeys/hotkeys'

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.2",
+  "version": "3.0.0-static.20",
   "keywords": [
-    "sanity",
+    "react",
     "ui",
+    "kit",
+    "library",
     "primitives",
-    "react",
     "components",
-    "design-system"
+    "utils"
   ],
   "homepage": "https://www.sanity.io/",
   "bugs": {
@@ -20,39 +21,39 @@
   "license": "MIT",
   "author": "Sanity.io <hello@sanity.io>",
   "sideEffects": false,
-  "type": "commonjs",
+  "type": "module",
   "exports": {
     ".": {
       "source": "./exports/index.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
       "default": "./dist/index.js"
     },
     "./_visual-editing": {
       "source": "./exports/_visual-editing.ts",
-      "import": "./dist/_visual-editing.mjs",
-      "require": "./dist/_visual-editing.js",
+      "import": "./dist/_visual-editing.js",
+      "require": "./dist/_visual-editing.cjs",
       "default": "./dist/_visual-editing.js"
     },
     "./css": {
       "source": "./exports/css.ts",
-      "import": "./dist/css.mjs",
-      "require": "./dist/css.js",
+      "import": "./dist/css.js",
+      "require": "./dist/css.cjs",
       "default": "./dist/css.js"
     },
     "./package.json": "./package.json",
     "./theme": {
       "source": "./exports/theme.ts",
-      "import": "./dist/theme.mjs",
-      "require": "./dist/theme.js",
+      "import": "./dist/theme.js",
+      "require": "./dist/theme.cjs",
       "default": "./dist/theme.js"
     },
-    "./sanity-palette.css": "./dist/sanity-palette.css",
-    "./sanity-theme.css": "./dist/sanity-theme.css",
-    "./system.css": "./dist/system.css"
+    "./ui-theme.css": "./dist/ui-theme.css",
+    "./ui-system.css": "./dist/ui-system.css",
+    "./ui.css": "./dist/ui.css"
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
@@ -68,10 +69,9 @@
     }
   },
   "bin": {
-    "ui": "./bin/ui.js"
+    "sanity-ui": "./bin/sanity-ui.cjs"
   },
   "files": [
-    "css.js",
     "dist",
     "exports",
     "src"
@@ -108,51 +108,54 @@
     "@juggle/resize-observer": "^3.4.0",
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.7.0",
+    "cssnano": "^7.0.7",
     "csstype": "^3.1.3",
-    "framer-motion": "^12.6.3",
-    "react-compiler-runtime": "19.0.0-beta-e993439-20250405",
+    "framer-motion": "^12.9.7",
+    "gzip-size": "^7.0.0",
+    "postcss": "^8.5.3",
+    "prettier": "^3.5.3",
+    "pretty-bytes": "^7.0.0",
+    "react-compiler-runtime": "19.1.0-rc.2",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.10",
-    "@babel/preset-env": "^7.26.9",
-    "@babel/preset-react": "^7.26.3",
-    "@babel/preset-typescript": "^7.27.0",
+    "@babel/core": "^7.27.1",
+    "@babel/preset-env": "^7.27.1",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
-    "@eslint/js": "^9.23.0",
+    "@eslint/js": "^9.26.0",
     "@sanity/pkg-utils": "^7.2.2",
     "@sanity/prettier-config": "^1.0.3",
-    "@sanity/semantic-release-preset": "^5.0.0",
-    "@sanity/ui-workshop": "^2.0.34",
-    "@storybook/addon-a11y": "^8.6.11",
-    "@storybook/addon-docs": "^8.6.11",
-    "@storybook/addon-essentials": "^8.6.11",
-    "@storybook/addon-interactions": "^8.6.11",
-    "@storybook/addon-links": "^8.6.11",
-    "@storybook/addon-mdx-gfm": "^8.6.11",
-    "@storybook/addon-storysource": "^8.6.11",
-    "@storybook/addon-themes": "^8.6.11",
-    "@storybook/blocks": "^8.6.11",
-    "@storybook/manager-api": "^8.6.11",
-    "@storybook/react": "^8.6.11",
-    "@storybook/react-vite": "^8.6.11",
-    "@storybook/test": "^8.6.11",
-    "@storybook/theming": "^8.6.11",
+    "@sanity/ui-workshop": "^2.1.2",
+    "@storybook/addon-a11y": "^8.6.12",
+    "@storybook/addon-docs": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/addon-mdx-gfm": "^8.6.12",
+    "@storybook/addon-storysource": "^8.6.12",
+    "@storybook/addon-themes": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/manager-api": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@storybook/theming": "^8.6.12",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^29.5.14",
-    "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.12.7",
-    "@types/react": "^19.1.0",
-    "@types/react-dom": "^19.1.2",
+    "@types/react": "^19.1.3",
+    "@types/react-dom": "^19.1.3",
     "@types/react-is": "^19.0.0",
     "@types/refractor": "^3.4.1",
-    "@vitejs/plugin-react": "^4.3.4",
-    "babel-plugin-react-compiler": "19.0.0-beta-e993439-20250405",
+    "@vitejs/plugin-react": "^4.4.1",
+    "@vitest/browser": "^3.1.4",
+    "babel-plugin-react-compiler": "19.1.0-rc.2",
     "cac": "^6.7.14",
     "commitizen": "^4.3.1",
     "cypress": "^13.17.0",
@@ -160,28 +163,22 @@
     "cz-conventional-changelog": "^3.3.0",
     "dotenv-flow": "^4.1.0",
     "esbuild-register": "^3.6.0",
-    "eslint": "^9.23.0",
-    "eslint-config-prettier": "^10.1.1",
+    "eslint": "^9.26.0",
+    "eslint-config-prettier": "^10.1.2",
     "eslint-formatter-compact": "^8.40.0",
     "eslint-plugin-boundaries": "^5.0.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-compiler": "19.0.0-beta-e993439-20250405",
-    "eslint-plugin-react-hooks": "experimental",
-    "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "0.0.0-experimental-4448b187-20250515",
+    "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-storybook": "^0.12.0",
     "globals": "^16.0.0",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
-    "jest": "^29.7.0",
-    "jest-axe": "^10.0.0",
-    "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^14.0.1",
-    "module-alias": "^2.2.3",
     "npm-run-all2": "^5.0.2",
-    "prettier": "^3.5.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-is": "^19.1.0",
@@ -189,19 +186,21 @@
     "rimraf": "^5.0.5",
     "semantic-release": "^24.2.3",
     "start-server-and-test": "^2.0.11",
-    "storybook": "^8.6.11",
-    "styled-components": "^6.1.16",
+    "storybook": "^8.6.12",
+    "styled-components": "^6.1.17",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "5.8.2",
-    "typescript-eslint": "^8.29.0",
-    "vite": "^5.4.16",
-    "vite-tsconfig-paths": "^5.1.4"
+    "typescript": "5.8.3",
+    "typescript-eslint": "^8.32.0",
+    "vite": "^5.4.19",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.1.4",
+    "vitest-axe": "1.0.0-pre.5"
   },
   "peerDependencies": {
-    "react": "^18 || >=19.0.0-0",
-    "react-dom": "^18 || >=19.0.0-0",
-    "react-is": "^18 || >=19.0.0-0",
-    "styled-components": "^5.2 || ^6"
+    "react": "^19",
+    "react-dom": "^19",
+    "react-is": "^19",
+    "styled-components": "^6"
   },
   "engines": {
     "node": ">=14.0.0"
@@ -213,13 +212,14 @@
     "bundle": false
   },
   "scripts": {
-    "build": "run-s clean ui:build pkg:build pkg:check figma:pkg:build",
-    "clean": "rimraf .workshop css.js dist theme.js",
+    "build": "run-s clean css:build pkg:build pkg:check figma:pkg:build",
+    "clean": "rimraf dist",
+    "css:build": "node -r esbuild-register scripts/build",
     "commit": "cz",
     "cypress:dev": "run-p dev cypress:open",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
-    "dev": "run-p workshop:dev",
+    "dev": "run-p workshop:clean workshop:dev",
     "figma:pkg:build": "cd figma && pnpm build",
     "format": "prettier --write --cache --ignore-unknown .",
     "lint": "eslint .",
@@ -228,13 +228,13 @@
     "release": "semantic-release",
     "storybook:build": "storybook build",
     "storybook:dev": "storybook dev -p 6006",
-    "test": "jest",
+    "test": "vitest run",
     "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
-    "ts:check": "tsc",
-    "ui:build": "node -r esbuild-register scripts/build",
+    "typecheck": "tsc",
     "watch": "pkg watch --strict",
     "workshop:build": "workshop build",
-    "workshop:dev": "workshop dev",
+    "workshop:clean": "rimraf .workshop",
+    "workshop:dev": "node -r esbuild-register ../ui-workshop/scripts/dev",
     "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
   }
 }

package/src/cli/buildCommand.ts

@@ -1,48 +1,100 @@
-import {compilePalette, compileSystem, compileTheme} from '@sanity/ui/css'
-import {buildTheme_v3, defaultPalette, RootTheme} from '@sanity/ui/theme'
+/* eslint-disable no-console */
+
+import {_compileSystem, _compileTheme} from '@sanity/ui/css'
+import cssnano from 'cssnano'
 import fs from 'fs/promises'
+import {gzipSizeSync} from 'gzip-size'
 import path from 'path'
+import postcss from 'postcss'
+import {format, resolveConfig} from 'prettier'
+import prettyBytes from 'pretty-bytes'
+
+export async function buildCommand(options: {cwd?: string; outDir?: string}): Promise<void> {
+  const cwd = options.cwd ?? process.cwd()
+  const outDir = options.outDir ?? path.resolve(cwd, 'dist')
+
+  await buildTheme({cwd, outDir})
+  await buildSystem({cwd, outDir})
+  await buildAll({cwd, outDir})
+}
 
-async function buildPalette(outDir: string) {
-  const css = compilePalette(defaultPalette)
+// @sanity/ui/ui-theme.css
+async function buildTheme(options: {cwd: string; outDir: string}) {
+  const {cwd, outDir} = options
+  const css = await prettify(_compileTheme())
+  const minified = await minify(css)
+  const prettified = await prettify(css)
 
-  await fs.mkdir(outDir, {recursive: true})
+  const cssFile = path.resolve(outDir, 'ui-theme.css')
+  const minCssFile = path.resolve(outDir, 'ui-theme.min.css')
 
-  await fs.writeFile(path.resolve(outDir, 'sanity-palette.css'), css, 'utf-8')
+  await fs.mkdir(outDir, {recursive: true})
+  await fs.writeFile(cssFile, prettified, 'utf-8')
+  await fs.writeFile(minCssFile, minified.css, 'utf-8')
 
-  // eslint-disable-next-line no-console
-  console.log('- sanity-palette.css')
+  console.log(`- built ${path.relative(cwd, cssFile)} (${prettySize(prettified)})`)
+  console.log(`- built ${path.relative(cwd, minCssFile)} (${prettySize(minified.css)})`)
 }
 
-async function buildTheme(outDir: string) {
-  const css = compileTheme({v3: buildTheme_v3()} as RootTheme)
+// @sanity/ui/ui-system.css
+async function buildSystem(options: {cwd: string; outDir: string}) {
+  const {cwd, outDir} = options
+  const css = await prettify(_compileSystem())
+  const minified = await minify(css)
+  const prettified = await prettify(css)
 
-  await fs.mkdir(outDir, {recursive: true})
+  const cssFile = path.resolve(outDir, 'ui-system.css')
+  const minCssFile = path.resolve(outDir, 'ui-system.min.css')
 
-  await fs.writeFile(path.resolve(outDir, 'sanity-theme.css'), css, 'utf-8')
+  await fs.mkdir(outDir, {recursive: true})
+  await fs.writeFile(cssFile, prettified, 'utf-8')
+  await fs.writeFile(minCssFile, minified.css, 'utf-8')
 
-  // eslint-disable-next-line no-console
-  console.log('- sanity-theme.css')
+  console.log(`- built ${path.relative(cwd, cssFile)} (${prettySize(prettified)})`)
+  console.log(`- built ${path.relative(cwd, minCssFile)} (${prettySize(minified.css)})`)
 }
 
-async function buildSystem(outDir: string) {
-  const css = compileSystem()
+// @sanity/ui/ui.css
+async function buildAll(options: {cwd: string; outDir: string}) {
+  const {cwd, outDir} = options
+  const css = await prettify(
+    [
+      `/* @sanity/ui/ui-theme.css */\n`,
+      _compileTheme(),
+      `\n\n/* @sanity/ui/ui-system.css */\n`,
+      _compileSystem(),
+      `\n`,
+    ].join(''),
+  )
+
+  const minified = await minify(css)
+  const prettified = await prettify(css)
+
+  const cssFile = path.resolve(outDir, 'ui.css')
+  const minCssFile = path.resolve(outDir, 'ui.min.css')
 
   await fs.mkdir(outDir, {recursive: true})
+  await fs.writeFile(cssFile, prettified, 'utf-8')
+  await fs.writeFile(minCssFile, minified.css, 'utf-8')
 
-  await fs.writeFile(path.resolve(outDir, 'system.css'), css, 'utf-8')
+  console.log(`- built ${path.relative(cwd, cssFile)} (${prettySize(prettified)})`)
+  console.log(`- built ${path.relative(cwd, minCssFile)} (${prettySize(minified.css)})`)
+}
 
-  // eslint-disable-next-line no-console
-  console.log('- system.css')
+async function minify(css: string) {
+  return postcss([cssnano()]).process(css, {from: undefined})
 }
 
-export async function buildCommand(options: {cwd?: string; outDir?: string}): Promise<void> {
-  const cwd = options.cwd ?? process.cwd()
-  const outDir = options.outDir ?? path.resolve(cwd, 'dist')
+async function prettify(css: string) {
+  const options = await resolveConfig(__dirname)
 
-  await buildPalette(outDir)
+  if (!options) {
+    throw new Error('Prettier config not found')
+  }
 
-  await buildTheme(outDir)
+  return format(css, {...options, filepath: 'index.css', printWidth: 9999})
+}
 
-  await buildSystem(outDir)
+function prettySize(str: string) {
+  return `${prettyBytes(str.length)} / ${prettyBytes(gzipSizeSync(str))}`
 }

package/src/cli/index.ts

@@ -1,20 +1,8 @@
-import cac from 'cac'
+import {cac} from 'cac'
 
 import {version} from '../../package.json'
 
-const cli = cac('ui')
-
-// cli
-//   .command('dev')
-//   .option('--cwd [cwd]', 'Output directory')
-//   .action(async (options) => {
-//     const {devCommand} = await import('./devCommand')
-
-//     await devCommand({
-//       ...options,
-//       cwd: options.cwd || process.cwd(),
-//     })
-//   })
+const cli = cac('sanity-ui')
 
 cli
   .command('build')

package/src/core/StyleTags.tsx

@@ -1,24 +1,18 @@
-import {compilePalette, compileSystem, compileTheme} from '@sanity/ui/css'
-import {buildTheme_v3, RootTheme, Theme_v3} from '@sanity/ui/theme'
-import {ReactNode} from 'react'
-
-/* @beta */
-export function StyleTags(props: {theme?: Theme_v3}): ReactNode {
-  const {theme: themeProp} = props
-
-  const theme = themeProp ?? buildTheme_v3()
+import {_compileSystem, _compileTheme} from '@sanity/ui/css'
+import type {ReactNode} from 'react'
 
+/** @beta */
+export function StyleTags(): ReactNode {
   return (
     <>
-      <style href="sanity-palette" precedence="palette">
-        {compilePalette(theme._palette)}
-      </style>
       <style href="sanity-theme" precedence="theme">
-        {compileTheme({v3: theme} as RootTheme)}
+        {_compileTheme()}
       </style>
       <style href="sanity-system" precedence="system">
-        {compileSystem()}
+        {_compileSystem()}
       </style>
     </>
   )
 }
+
+StyleTags.displayName = 'StyleTags'

package/src/core/_compat/helpers.ts

@@ -0,0 +1,72 @@
+import {
+  createColorTheme as _createColorTheme,
+  hexToRgb as _hexToRgb,
+  hslToRgb as _hslToRgb,
+  multiply as _multiply,
+  parseColor as _parseColor,
+  rgba as _rgba,
+  rgbToHex as _rgbToHex,
+  rgbToHsl as _rgbToHsl,
+  screen as _screen,
+} from '@sanity/ui/theme'
+
+export {
+  /** @deprecated use `px` from `@sanity/ui/css` */
+  px,
+  /** @deprecated use `rem` from `@sanity/ui/css` */
+  rem,
+} from '@sanity/ui/css'
+
+/**
+ * @public
+ * @deprecated Use `createColorTheme` from `@sanity/ui/theme` instead.
+ */
+export const createColorTheme = _createColorTheme
+
+/**
+ * @public
+ * @deprecated Use `hexToRgb` from `@sanity/ui/theme` instead.
+ */
+export const hexToRgb = _hexToRgb
+
+/**
+ * @public
+ * @deprecated Use `hslToRgb` from `@sanity/ui/theme` instead.
+ */
+export const hslToRgb = _hslToRgb
+
+/**
+ * @public
+ * @deprecated Use `multiply` from `@sanity/ui/theme` instead.
+ */
+export const multiply = _multiply
+
+/**
+ * @public
+ * @deprecated Use `parseColor` from `@sanity/ui/theme` instead.
+ */
+export const parseColor = _parseColor
+
+/**
+ * @public
+ * @deprecated Use `rgbToHex` from `@sanity/ui/theme` instead.
+ */
+export const rgbToHex = _rgbToHex
+
+/**
+ * @public
+ * @deprecated Use `rgbToHsl` from `@sanity/ui/theme` instead.
+ */
+export const rgbToHsl = _rgbToHsl
+
+/**
+ * @public
+ * @deprecated Use `rgba` from `@sanity/ui/theme` instead.
+ */
+export const rgba = _rgba
+
+/**
+ * @public
+ * @deprecated Use `screen` from `@sanity/ui/theme` instead.
+ */
+export const screen = _screen

package/src/core/_compat/index.ts

@@ -1,9 +1,4 @@
+export * from './helpers'
 export * from './styles'
 export * from './theme'
 export * from './types'
-export {
-  /** @deprecated use `px` from `@sanity/ui/css` */
-  px,
-  /** @deprecated use `rem` from `@sanity/ui/css` */
-  rem,
-} from '@sanity/ui/css'

package/src/core/_compat/styles/_responsive.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '@sanity/ui/theme'
+import type {CSSObject} from '@sanity/ui/theme'
 
 /**
  * @internal

package/src/core/_compat/theme/theme.test.tsx

@@ -1,16 +1,15 @@
-/** @jest-environment jsdom */
-
 import {buildTheme} from '@sanity/ui/theme'
+import {describe, expect, it, vi} from 'vitest'
 
 import {render} from '../../../../test'
 import {ThemeContext} from './themeContext'
-import {ThemeContextValue} from './types'
+import type {ThemeContextValue} from './types'
 import {useRootTheme} from './useRootTheme'
 
 describe('theme', () => {
   describe('useRootTheme', () => {
     it('should get context value', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootTheme = useRootTheme()
@@ -43,7 +42,7 @@ describe('theme', () => {
     })
 
     it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {

package/src/core/_compat/theme/themeColorProvider.tsx

@@ -1,21 +1,17 @@
-import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {ReactElement, ReactNode} from 'react'
+import type {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import type {ReactElement, ReactNode} from 'react'
 
 import {ThemeProvider} from './themeProvider'
 import {useRootTheme} from './useRootTheme'
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeColorProviderProps {
   children?: ReactNode
   scheme?: ThemeColorSchemeKey
   tone?: ThemeColorCardToneKey
 }
 
-/**
- * @public
- */
+/** @public */
 export function ThemeColorProvider(props: ThemeColorProviderProps): ReactElement {
   const {children, scheme, tone} = props
   const root = useRootTheme()

package/src/core/_compat/theme/themeContext.ts

@@ -1,10 +1,10 @@
+import type {Context} from 'react'
+
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {ThemeContextValue} from './types'
+import type {ThemeContextValue} from './types'
 
 /**
  * @internal
  */
-export const ThemeContext = createGlobalScopedContext<ThemeContextValue | null>(
-  '@sanity/ui/context/theme',
-  null,
-)
+export const ThemeContext: Context<ThemeContextValue | null> =
+  createGlobalScopedContext<ThemeContextValue | null>('@sanity/ui/context/theme', null)