@sanity/ui 3.0.0-static.4 → 3.0.0-static.41

package/exports/_visual-editing.ts

@@ -2,30 +2,27 @@
  * 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/ui/_compat'
-export {ThemeProvider, type ThemeProviderProps} from '../src/ui/_compat/theme/themeProvider'
-export {useTheme_v2} from '../src/ui/_compat/theme/useTheme'
-export {Hotkeys, type HotkeysProps} from '../src/ui/components/hotkeys/hotkeys'
-export {Menu, type MenuProps} from '../src/ui/components/menu/menu'
-export {MenuDivider} from '../src/ui/components/menu/menuDivider'
-export {MenuGroup, type MenuGroupProps} from '../src/ui/components/menu/menuGroup'
-export {MenuItem, type MenuItemProps} from '../src/ui/components/menu/menuItem'
-export {Tab, type TabProps} from '../src/ui/components/tab/tab'
-export {TabList, type TabListProps} from '../src/ui/components/tab/tabList'
-export {isHTMLAnchorElement, isHTMLElement} from '../src/ui/helpers/element'
-export {usePrefersDark} from '../src/ui/hooks/usePrefersDark'
-export {Box, type BoxProps} from '../src/ui/primitives/box/box'
-export {Button, type ButtonProps} from '../src/ui/primitives/button/button'
-export {Card, type CardProps} from '../src/ui/primitives/card/card'
-export {Flex, type FlexProps} from '../src/ui/primitives/flex/flex'
-export {Grid, type GridProps} from '../src/ui/primitives/grid/grid'
-export {Popover, type PopoverProps} from '../src/ui/primitives/popover/popover'
-export {Spinner, type SpinnerProps} from '../src/ui/primitives/spinner/spinner'
-export {Stack, type StackProps} from '../src/ui/primitives/stack/stack'
-export {Text, type TextProps} from '../src/ui/primitives/text/text'
-export {TextInput, type TextInputProps} from '../src/ui/primitives/textInput/textInput'
-export {Tooltip, type TooltipProps} from '../src/ui/primitives/tooltip/tooltip'
-export type {PopoverMargins} from '../src/ui/types/popover'
-export {LayerProvider} from '../src/ui/utils/layer/layerProvider'
-export {Portal, type PortalProps} from '../src/ui/utils/portal/portal'
-export {PortalProvider, type PortalProviderProps} from '../src/ui/utils/portal/portalProvider'
+export {Hotkeys, type HotkeysProps} from '../src/core/components/hotkeys/hotkeys'
+export {Menu, type MenuProps} from '../src/core/components/menu/menu'
+export {MenuDivider} from '../src/core/components/menu/menuDivider'
+export {MenuGroup, type MenuGroupProps} from '../src/core/components/menu/menuGroup'
+export {MenuItem, type MenuItemProps} from '../src/core/components/menu/menuItem'
+export {Tab, type TabProps} from '../src/core/components/tab/tab'
+export {TabList, type TabListProps} from '../src/core/components/tab/tabList'
+export {isHTMLAnchorElement, isHTMLElement} from '../src/core/helpers/element'
+export {usePrefersDark} from '../src/core/hooks/usePrefersDark'
+export {Box, type BoxProps} from '../src/core/primitives/box/box'
+export {Button, type ButtonProps} from '../src/core/primitives/button/button'
+export {Card, type CardProps} from '../src/core/primitives/card/card'
+export {Flex, type FlexProps} from '../src/core/primitives/flex/flex'
+export {Grid, type GridProps} from '../src/core/primitives/grid/grid'
+export {LayerProvider} from '../src/core/primitives/layer/layerProvider'
+export {Popover, type PopoverProps} from '../src/core/primitives/popover/popover'
+export type {PopoverMargins} from '../src/core/primitives/popover/types'
+export {Spinner, type SpinnerProps} from '../src/core/primitives/spinner/spinner'
+export {Stack, type StackProps} from '../src/core/primitives/stack/stack'
+export {Text, type TextProps} from '../src/core/primitives/text/text'
+export {TextInput, type TextInputProps} from '../src/core/primitives/textInput/textInput'
+export {Tooltip, type TooltipProps} from '../src/core/primitives/tooltip/tooltip'
+export {Portal, type PortalProps} from '../src/core/utils/portal/portal'
+export {PortalProvider, type PortalProviderProps} from '../src/core/utils/portal/portalProvider'

package/exports/index.ts

@@ -1 +1 @@
-export * from '../src/ui'
+export * from '../src/core'

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.4",
+  "version": "3.0.0-static.41",
   "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",
-      "default": "./dist/css.js"
+      "import": "./dist/css/index.js",
+      "require": "./dist/css/index.cjs",
+      "default": "./dist/css/index.js"
     },
+    "./css/index.css": "./dist/css/index.css",
     "./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"
+    }
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
@@ -67,11 +66,7 @@
       ]
     }
   },
-  "bin": {
-    "ui": "./bin/ui.js"
-  },
   "files": [
-    "css.js",
     "dist",
     "exports",
     "src"
@@ -86,7 +81,7 @@
       "prettier --write --cache --ignore-unknown"
     ]
   },
-  "prettier": "@sanity/prettier-config",
+  "browserslist": "extends @sanity/browserslist-config",
   "release": {
     "branches": [
       "+([0-9])?(.{+([0-9]),x}).x",
@@ -104,104 +99,95 @@
     "extends": "@sanity/semantic-release-preset"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "^2.1.2",
+    "@floating-ui/react-dom": "^2.1.3",
     "@juggle/resize-observer": "^3.4.0",
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.7.0",
+    "@vanilla-extract/css": "^1.17.4",
+    "@vanilla-extract/dynamic": "^2.1.5",
     "csstype": "^3.1.3",
-    "framer-motion": "^12.9.7",
-    "react-compiler-runtime": "19.1.0-rc.1",
+    "framer-motion": "^12.18.1",
+    "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.27.1",
-    "@babel/preset-env": "^7.27.1",
+    "@babel/core": "^7.27.4",
+    "@babel/preset-env": "^7.27.2",
     "@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.26.0",
-    "@rollup/plugin-replace": "^6.0.2",
-    "@sanity/pkg-utils": "^7.2.2",
-    "@sanity/prettier-config": "^1.0.3",
-    "@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",
+    "@eslint/js": "^9.29.0",
+    "@sanity/browserslist-config": "^1.0.5",
+    "@sanity/pkg-utils": "^7.6.1",
+    "@sanity/prettier-config": "^1.0.4",
+    "@sanity/semantic-release-preset": "^5.0.0",
+    "@sanity/ui-workshop": "^3.0.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@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.3",
-    "@types/react-dom": "^19.1.3",
+    "@types/node": "^24.0.3",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "@types/react-is": "^19.0.0",
     "@types/refractor": "^3.4.1",
-    "@vitejs/plugin-react": "^4.4.1",
-    "babel-plugin-react-compiler": "19.1.0-rc.1",
+    "@vanilla-extract/rollup-plugin": "^1.3.17",
+    "@vanilla-extract/vite-plugin": "^5.0.6",
+    "@vitejs/plugin-react": "^4.5.2",
+    "@vitest/browser": "^3.2.3",
+    "autoprefixer": "^10.4.21",
+    "babel-plugin-react-compiler": "19.1.0-rc.2",
     "cac": "^6.7.14",
     "commitizen": "^4.3.1",
+    "cssnano": "^7.0.7",
     "cypress": "^13.17.0",
     "cypress-real-events": "^1.14.0",
     "cz-conventional-changelog": "^3.3.0",
     "dotenv-flow": "^4.1.0",
-    "esbuild-register": "^3.6.0",
-    "eslint": "^9.26.0",
-    "eslint-config-prettier": "^10.1.2",
+    "eslint": "^9.29.0",
+    "eslint-config-prettier": "^10.1.5",
     "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.5",
-    "eslint-plugin-react-hooks": "0.0.0-experimental-7a2c7045-20250506",
+    "eslint-plugin-react-hooks": "0.0.0-experimental-12bc60f5-20250613",
     "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",
+    "eslint-plugin-storybook": "^9.0.11",
+    "globals": "^16.2.0",
     "husky": "^8.0.3",
-    "jest": "^29.7.0",
-    "jest-axe": "^10.0.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "lightningcss": "^1.30.1",
     "lint-staged": "^14.0.1",
-    "magic-string": "^0.30.17",
-    "module-alias": "^2.2.3",
-    "npm-run-all2": "^5.0.2",
+    "mkdirp": "^3.0.1",
+    "npm-run-all2": "^8.0.4",
+    "postcss": "^8.5.6",
+    "postcss-preset-env": "^10.2.3",
     "prettier": "^3.5.3",
+    "prettier-plugin-packagejson": "^2.5.15",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-is": "^19.1.0",
     "refractor": "^4.9.0",
-    "rimraf": "^5.0.5",
-    "semantic-release": "^24.2.3",
+    "rimraf": "^5.0.10",
+    "semantic-release": "23.1.1",
     "start-server-and-test": "^2.0.11",
-    "storybook": "^8.6.12",
     "styled-components": "^6.1.17",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.8.3",
-    "typescript-eslint": "^8.32.0",
-    "vite": "^5.4.19",
-    "vite-tsconfig-paths": "^5.1.4"
+    "typescript-eslint": "^8.34.1",
+    "vite": "^6.3.5",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.2.3",
+    "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"
   },
   "engines": {
     "node": ">=14.0.0"
@@ -213,28 +199,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",
     "commit": "cz",
     "cypress:dev": "run-p dev cypress:open",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
-    "dev": "run-p workshop:dev",
-    "figma:pkg:build": "cd figma && pnpm build",
+    "dev": "run-p workshop:dev storybook:dev",
+    "figma:build": "pnpm run --filter 'figma-plugin-sanity-ui' build",
     "format": "prettier --write --cache --ignore-unknown .",
     "lint": "eslint .",
-    "pkg:build": "pkg build --strict",
+    "pkg:build": "mkdirp dist/css && touch dist/css/index.css && NODE_ENV=production pkg build --strict",
     "pkg:check": "pkg --strict",
+    "pkg:watch": "mkdirp dist/css && touch dist/css/index.css && NODE_ENV=production pkg watch --strict",
     "release": "semantic-release",
-    "storybook:build": "storybook build",
-    "storybook:dev": "storybook dev -p 6006",
-    "test": "jest",
-    "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",
+    "storybook:build": "pnpm run --filter 'sanity-ui-storybook' build",
+    "storybook:dev": "pnpm run --filter 'sanity-ui-storybook' dev",
+    "test": "vitest run",
+    "test:browser": "start-server-and-test 'run-s workshop:build workshop:preview' http://localhost:1337 'run-s cypress:run'",
+    "typecheck": "tsc --build",
     "watch": "pkg watch --strict",
     "workshop:build": "workshop build",
-    "workshop:dev": "workshop dev",
-    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
+    "workshop:clean": "rimraf .workshop",
+    "workshop:dev": "run-s workshop:clean && workshop dev",
+    "workshop:preview": "workshop preview"
   }
 }

package/src/core/Root.tsx

@@ -0,0 +1,88 @@
+import {box, root, type RootStyleProps} from '@sanity/ui/css'
+import {useCallback, useImperativeHandle, useRef, useState} from 'react'
+
+import {Box, type BoxOwnProps} from './primitives/box/box'
+import {RootProvider} from './RootProvider'
+import type {Props} from './types'
+
+/** @public */
+export const DEFAULT_ROOT_ELEMENT = 'html'
+
+/** @public */
+export interface RootOwnProps extends BoxOwnProps, RootStyleProps {}
+
+/** @public */
+export type RootElementType = 'html' | 'body' | 'div'
+
+/** @public */
+export type RootProps<E extends RootElementType = RootElementType> = Props<RootOwnProps, E>
+
+/**
+ * The `Root` component.
+ *
+ * @public
+ */
+export function Root<E extends RootElementType = typeof DEFAULT_ROOT_ELEMENT>(
+  props: RootProps<E>,
+): React.JSX.Element {
+  const {
+    as: as = DEFAULT_ROOT_ELEMENT,
+    children,
+    className,
+    height,
+    overflow = 'hidden',
+    ref: forwardedRef,
+    scheme = 'light',
+    tone = 'default',
+    ...rest
+  } = props as RootProps<typeof DEFAULT_ROOT_ELEMENT>
+
+  const ref = useRef<HTMLHtmlElement | null>(null)
+
+  useImperativeHandle<HTMLHtmlElement | null, HTMLHtmlElement | null>(
+    forwardedRef,
+    () => ref.current,
+  )
+
+  const [portalElement, setPortalElement] = useState<HTMLElement | null>(null)
+  const [boundaryElement, setBoundaryElement] = useState<HTMLElement | null>(null)
+
+  const handleRef = useCallback((el: HTMLHtmlElement | null) => {
+    setBoundaryElement(el)
+    ref.current = el
+  }, [])
+
+  let node = (
+    <RootProvider
+      boundaryElement={boundaryElement}
+      portalElement={portalElement}
+      scheme={scheme}
+      tone={tone}
+    >
+      {children}
+      <div data-portal="" ref={setPortalElement} />
+    </RootProvider>
+  )
+
+  if (as === 'html') {
+    node = <body className={box({height, margin: 0})}>{node}</body>
+  }
+
+  return (
+    <Box
+      as={as}
+      data-ui="Root"
+      {...rest}
+      className={root({
+        className,
+        height,
+        scheme,
+        tone,
+      })}
+      overflow={overflow}
+      ref={handleRef}
+    >
+      {node}
+    </Box>
+  )
+}

package/src/core/RootProvider.tsx

@@ -0,0 +1,40 @@
+import type {CardTone, ColorScheme} from '@sanity/ui/theme'
+import type {ReactNode} from 'react'
+
+import {ToastProvider} from './components/toast/toastProvider'
+import {CardProvider} from './primitives/card/cardProvider'
+import {LayerProvider} from './primitives/layer/layerProvider'
+import {BoundaryElementProvider} from './utils/boundaryElement/boundaryElementProvider'
+import {PortalProvider} from './utils/portal/portalProvider'
+
+/** @public */
+export interface RootProviderProps {
+  boundaryElement?: HTMLElement | null
+  children?: ReactNode
+  portalElement?: HTMLElement | null
+  scheme?: ColorScheme
+  tone?: CardTone
+}
+
+/** @public */
+export function RootProvider(props: RootProviderProps): React.JSX.Element {
+  const {
+    boundaryElement = null,
+    children,
+    portalElement = null,
+    scheme = 'light',
+    tone = 'transparent',
+  } = props
+
+  return (
+    <LayerProvider>
+      <CardProvider scheme={scheme} tone={tone}>
+        <ToastProvider>
+          <BoundaryElementProvider element={boundaryElement}>
+            <PortalProvider element={portalElement}>{children}</PortalProvider>
+          </BoundaryElementProvider>
+        </ToastProvider>
+      </CardProvider>
+    </LayerProvider>
+  )
+}

package/src/core/__workshop__/boundary.tsx

@@ -0,0 +1,28 @@
+import {Box, Button, Root, Stack, Text, useCard, useToast} from '@sanity/ui'
+
+export default function BoundaryStory(): React.JSX.Element {
+  const {scheme} = useCard()
+
+  return (
+    <Box padding={5}>
+      <Root as="div" padding={5} radius={4} scheme={scheme}>
+        <Layout />
+      </Root>
+    </Box>
+  )
+}
+
+function Layout() {
+  const toast = useToast()
+
+  return (
+    <Stack gap={4}>
+      <Text size={1}>
+        Testing the root component. Toast messages will be rendered here, and should be contained
+        within the root element.
+      </Text>
+
+      <Button onClick={() => toast.push({title: 'Hello!'})} text="Push toast message" width="min" />
+    </Stack>
+  )
+}

package/src/core/__workshop__/index.ts

@@ -0,0 +1,16 @@
+import type {WorkshopScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+const scope: WorkshopScope = {
+  name: 'root',
+  title: 'Root',
+  stories: [
+    {
+      name: 'boundary',
+      title: 'Boundary',
+      component: lazy(() => import('./boundary')),
+    },
+  ],
+}
+
+export default scope