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

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.21",
   "keywords": [
-    "sanity",
+    "react",
     "ui",
+    "kit",
+    "library",
     "primitives",
-    "react",
     "components",
-    "design-system"
+    "utils"
   ],
   "homepage": "https://www.sanity.io/",
   "bugs": {
@@ -20,39 +21,37 @@
   "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.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 +67,9 @@
     }
   },
   "bin": {
-    "ui": "./bin/ui.js"
+    "sanity-ui": "./bin/sanity-ui.cjs"
   },
   "files": [
-    "css.js",
     "dist",
     "exports",
     "src"
@@ -86,7 +84,7 @@
       "prettier --write --cache --ignore-unknown"
     ]
   },
-  "prettier": "@sanity/prettier-config",
+  "browserslist": "extends @sanity/browserslist-config",
   "release": {
     "branches": [
       "+([0-9])?(.{+([0-9]),x}).x",
@@ -108,51 +106,56 @@
     "@juggle/resize-observer": "^3.4.0",
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.7.0",
+    "@vanilla-extract/css": "^1.17.2",
+    "@vanilla-extract/dynamic": "^2.1.3",
     "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",
+    "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/browserslist-config": "^1.0.5",
     "@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",
+    "@vanilla-extract/rollup-plugin": "^1.3.15",
+    "@vitejs/plugin-react": "^4.4.1",
+    "@vitest/browser": "^3.1.4",
+    "autoprefixer": "^10.4.21",
+    "babel-plugin-react-compiler": "19.1.0-rc.2",
     "cac": "^6.7.14",
     "commitizen": "^4.3.1",
     "cypress": "^13.17.0",
@@ -160,27 +163,26 @@
     "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",
+    "mkdirp": "^3.0.1",
+    "npm-run-all2": "^8.0.4",
+    "postcss": "^8.5.3",
+    "postcss-merge-at-rules": "^1.2.0",
+    "postcss-preset-env": "^10.2.0",
     "prettier": "^3.5.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
@@ -189,19 +191,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,28 +217,29 @@
     "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 pkg:build pkg:check",
+    "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 .",
-    "pkg:build": "pkg build --strict",
+    "pkg:build": "mkdirp dist && touch dist/ui.css && pkg build --strict",
     "pkg:check": "pkg --strict",
     "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,10 @@
-import {compilePalette, compileSystem, compileTheme} from '@sanity/ui/css'
-import {buildTheme_v3, defaultPalette, RootTheme} from '@sanity/ui/theme'
-import fs from 'fs/promises'
-import path from 'path'
-
-async function buildPalette(outDir: string) {
-  const css = compilePalette(defaultPalette)
-
-  await fs.mkdir(outDir, {recursive: true})
-
-  await fs.writeFile(path.resolve(outDir, 'sanity-palette.css'), css, 'utf-8')
-
-  // eslint-disable-next-line no-console
-  console.log('- sanity-palette.css')
-}
-
-async function buildTheme(outDir: string) {
-  const css = compileTheme({v3: buildTheme_v3()} as RootTheme)
-
-  await fs.mkdir(outDir, {recursive: true})
-
-  await fs.writeFile(path.resolve(outDir, 'sanity-theme.css'), css, 'utf-8')
+/* eslint-disable no-console */
 
-  // eslint-disable-next-line no-console
-  console.log('- sanity-theme.css')
-}
-
-async function buildSystem(outDir: string) {
-  const css = compileSystem()
-
-  await fs.mkdir(outDir, {recursive: true})
-
-  await fs.writeFile(path.resolve(outDir, 'system.css'), css, 'utf-8')
-
-  // eslint-disable-next-line no-console
-  console.log('- system.css')
-}
+import path from 'path'
 
 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 buildPalette(outDir)
-
-  await buildTheme(outDir)
-
-  await buildSystem(outDir)
+  console.log('TODO: buildCommand', {cwd, outDir})
 }

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/_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()
@@ -26,5 +22,3 @@ export function ThemeColorProvider(props: ThemeColorProviderProps): ReactElement
     </ThemeProvider>
   )
 }
-
-ThemeColorProvider.displayName = 'ThemeColorProvider'

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)

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

@@ -5,15 +5,15 @@ import {
   type ThemeColorCardToneKey,
   type ThemeColorSchemeKey,
 } from '@sanity/ui/theme'
-import {ReactElement, ReactNode, useContext, useMemo} from 'react'
+import {type ReactElement, type ReactNode, useContext, useMemo} from 'react'
 import {ThemeProvider as StyledThemeProvider} from 'styled-components'
 
+import {CardProvider} from '../../primitives/card/cardProvider'
+import {ThemeColorProvider} from './themeColorProvider'
 import {ThemeContext} from './themeContext'
-import {ThemeContextValue} from './types'
+import type {ThemeContextValue} from './types'
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeProviderProps {
   children?: ReactNode
   scheme?: ThemeColorSchemeKey
@@ -21,9 +21,7 @@ export interface ThemeProviderProps {
   tone?: ThemeColorCardToneKey
 }
 
-/**
- * @public
- */
+/** @public */
 export function ThemeProvider(props: ThemeProviderProps): ReactElement {
   const parentTheme = useContext(ThemeContext)
   const {children} = props
@@ -53,10 +51,18 @@ export function ThemeProvider(props: ThemeProviderProps): ReactElement {
   }
 
   return (
-    <ThemeContext.Provider value={themeContext}>
-      <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>
-    </ThemeContext.Provider>
+    <CardProvider
+      scheme={scheme}
+      tone={tone}
+      unstable_CompatProvider={
+        // Render a theme provider around the card if the scheme or tone differs from the root theme.
+        // This is needed for backwards compatibility with the legacy theme API.
+        ThemeColorProvider
+      }
+    >
+      <ThemeContext.Provider value={themeContext}>
+        <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>
+      </ThemeContext.Provider>
+    </CardProvider>
   )
 }
-
-ThemeProvider.displayName = 'ThemeProvider'

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

@@ -1,8 +1,6 @@
-import {RootTheme, ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import type {RootTheme, ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeContextValue {
   /** @deprecated No longer used */
   version: 0.0

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

@@ -1,11 +1,9 @@
 import {useContext} from 'react'
 
 import {ThemeContext} from './themeContext'
-import {ThemeContextValue} from './types'
+import type {ThemeContextValue} from './types'
 
-/**
- * @public
- */
+/** @public */
 export function useRootTheme(): ThemeContextValue {
   const value = useContext(ThemeContext)
 

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

@@ -1,16 +1,12 @@
-import {getTheme_v2, Theme, Theme_v2} from '@sanity/ui/theme'
+import {getTheme_v2, type Theme, type Theme_v2} from '@sanity/ui/theme'
 import {useTheme as useStyledTheme} from 'styled-components'
 
-/**
- * @public
- */
+/** @public */
 export function useTheme(): Theme {
   return useStyledTheme() as Theme
 }
 
-/**
- * @public
- */
+/** @public */
 export function useTheme_v2(): Theme_v2 {
   return getTheme_v2(useStyledTheme() as Theme)
 }