@sanity/ui 3.0.2 → 4.0.0-static.2

package/exports/css.ts

@@ -0,0 +1 @@
+export * from '../src/css'

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.2",
+  "version": "4.0.0-static.2",
   "keywords": [
-    "sanity",
+    "react",
     "ui",
+    "kit",
+    "library",
     "primitives",
-    "react",
     "components",
-    "design-system"
+    "utils"
   ],
   "homepage": "https://www.sanity.io/",
   "bugs": {
@@ -20,35 +21,36 @@
   "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",
-      "default": "./dist/_visual-editing.js"
+    "./css": {
+      "source": "./exports/css.ts",
+      "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"
-    },
-    "./package.json": "./package.json"
+    }
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
-      "_visual-editing": [
-        "./dist/_visual-editing.d.ts"
+      "css": [
+        "./dist/css.d.ts"
       ],
       "theme": [
         "./dist/theme.d.ts"
@@ -61,30 +63,32 @@
     "src"
   ],
   "scripts": {
-    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
-    "clean": "rimraf .workshop dist",
+    "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 storybook:dev 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 .",
     "prepack": "pnpm build",
-    "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",
     "prepare": "husky install",
     "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",
+    "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"
   },
   "commitlint": {
     "extends": [
@@ -96,7 +100,7 @@
       "prettier --write --cache --ignore-unknown"
     ]
   },
-  "prettier": "@sanity/prettier-config",
+  "browserslist": "extends @sanity/browserslist-config",
   "release": {
     "branches": [
       {
@@ -118,8 +122,10 @@
     "@juggle/resize-observer": "^3.4.0",
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.7.4",
+    "@vanilla-extract/css": "^1.17.4",
+    "@vanilla-extract/dynamic": "^2.1.5",
     "csstype": "^3.1.3",
-    "framer-motion": "^12.23.11",
+    "framer-motion": "^12.23.9",
     "react-compiler-runtime": "19.1.0-rc.2",
     "react-refractor": "^4.0.0",
     "use-effect-event": "^2.0.3"
@@ -132,41 +138,32 @@
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
     "@eslint/js": "^9.31.0",
-    "@sanity/pkg-utils": "^7.9.11",
+    "@sanity/browserslist-config": "^1.0.5",
+    "@sanity/pkg-utils": "^7.9.10",
     "@sanity/prettier-config": "^2.0.1",
     "@sanity/semantic-release-preset": "^5.0.0",
-    "@sanity/ui-workshop": "^3.1.2",
-    "@storybook/addon-a11y": "^8.6.14",
-    "@storybook/addon-docs": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/addon-mdx-gfm": "^8.6.14",
-    "@storybook/addon-storysource": "^8.6.14",
-    "@storybook/addon-themes": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/manager-api": "^8.6.14",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-vite": "^8.6.14",
-    "@storybook/test": "^8.6.14",
-    "@storybook/theming": "^8.6.14",
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.6.4",
+    "@sanity/ui-workshop": "^2.1.6",
+    "@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": "^30.0.0",
-    "@types/jest-axe": "^3.5.9",
-    "@types/node": "^20.12.7",
+    "@types/node": "^24.0.3",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@types/react-is": "^19.0.0",
+    "@vanilla-extract/rollup-plugin": "^1.3.17",
+    "@vanilla-extract/vite-plugin": "^5.1.0",
     "@vitejs/plugin-react": "^4.7.0",
+    "@vitest/browser": "^3.2.3",
+    "autoprefixer": "^10.4.21",
     "babel-plugin-react-compiler": "19.1.0-rc.2",
-    "babel-plugin-styled-components": "^2.1.4",
+    "cac": "^6.7.14",
     "commitizen": "^4.3.1",
+    "cssnano": "^7.1.0",
     "cypress": "^13.17.0",
     "cypress-real-events": "^1.14.0",
     "cz-conventional-changelog": "^3.3.0",
+    "dotenv-flow": "^4.1.0",
     "eslint": "^9.31.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-formatter-compact": "^8.40.0",
@@ -177,39 +174,39 @@
     "eslint-plugin-react-hooks": "0.0.0-experimental-edac0dde-20250723",
     "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-storybook": "^0.12.0",
-    "globals": "^16.3.0",
-    "http-server": "^14.1.1",
+    "eslint-plugin-storybook": "^9.0.11",
+    "globals": "^16.2.0",
     "husky": "^8.0.3",
-    "jest": "^30.0.5",
-    "jest-axe": "^10.0.0",
-    "jest-environment-jsdom": "^30.0.5",
+    "lightningcss": "^1.30.1",
     "lint-staged": "^14.0.1",
-    "module-alias": "^2.2.3",
+    "mkdirp": "^3.0.1",
     "npm-run-all2": "^8.0.4",
-    "prettier": "^3.6.2",
+    "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": "^5.0.0",
-    "rimraf": "^5.0.5",
-    "semantic-release": "^24.2.7",
-    "start-server-and-test": "^2.0.12",
-    "storybook": "^8.6.14",
-    "styled-components": "^6.1.19",
+    "rimraf": "^5.0.10",
+    "semantic-release": "24.2.7",
+    "start-server-and-test": "^2.0.11",
+    "styled-components": "^6.1.17",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.8.3",
     "typescript-eslint": "^8.38.0",
-    "vite": "^7.0.6",
-    "vite-tsconfig-paths": "^5.1.4"
+    "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"
   },
-  "packageManager": "pnpm@9.15.9",
+  "packageManager": "pnpm@10.12.1",
   "engines": {
     "node": ">=20.19"
   },
@@ -217,7 +214,11 @@
     "access": "public"
   },
   "pnpm": {
+    "onlyBuiltDependencies": [
+      "cypress"
+    ],
     "overrides": {
+      "@sanity/ui-workshop": "file:registry/sanity-ui-workshop-3.0.0-local.12.tgz",
       "@types/react": "$@types/react",
       "@types/react-dom": "$@types/react-dom",
       "@types/react-is": "$@types/react-is",

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

package/src/core/components/autocomplete/__workshop__/async.tsx

@@ -1,7 +1,7 @@
 import {EarthAmericasIcon, SearchIcon} from '@sanity/icons'
 import {
   Autocomplete,
-  BaseAutocompleteOption,
+  type BaseAutocompleteOption,
   Box,
   Card,
   Code,
@@ -12,9 +12,9 @@ import {
 } from '@sanity/ui'
 import {useCallback, useEffect, useRef, useState} from 'react'
 
-import {countriesStore} from '../__mocks__/apiStore'
+import {countriesStore} from './mock/apiStore'
 
-export default function AsyncStory() {
+export default function AsyncStory(): React.JSX.Element {
   const [options, setOptions] = useState<BaseAutocompleteOption[]>([])
   const [loading, setLoading] = useState(false)
   const searchRef = useRef<{cancel: () => void} | null>(null)
@@ -81,7 +81,7 @@ export default function AsyncStory() {
 
   return (
     <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
-      <Stack space={[3, 3, 4]}>
+      <Stack gap={[3, 3, 4]}>
         <Text as="label" htmlFor="async" size={[1, 1, 2]} weight="medium">
           Country
         </Text>
@@ -103,11 +103,11 @@ export default function AsyncStory() {
           />
         </LayerProvider>
 
-        <Card overflow="auto" padding={3} radius={2} tone="transparent">
+        <Box muted overflow="auto" padding={3} radius={2}>
           <Code language="json" size={1}>
             {JSON.stringify({loading, options, query, value}, null, 2)}
           </Code>
-        </Card>
+        </Box>
       </Stack>
     </Box>
   )
@@ -131,7 +131,7 @@ function AsyncOption(props: {
 
   return (
     <Card
-      data-as="button"
+      as="button"
       disabled={disabled}
       padding={3}
       radius={1}

package/src/core/components/autocomplete/__workshop__/constrainedHeight.tsx

@@ -1,36 +1,29 @@
 import {
   Autocomplete,
+  type AutocompleteProps,
   BoundaryElementProvider,
   Box,
   Card,
   Container,
   LayerProvider,
+  Popover,
   Stack,
   Text,
 } from '@sanity/ui'
 import {useCallback, useState} from 'react'
 
-import {Popover} from '../../../primitives'
-import countries from '../__mocks__/countries'
-import {AutocompleteProps} from '../autocomplete'
-import {ExampleOption} from './types'
+import {countries} from './mock/countries'
+import type {ExampleOption} from './types'
 
-export default function ConstrainedHeightStory() {
+export default function ConstrainedHeightStory(): React.JSX.Element {
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
 
   return (
     <Card height="fill" tone="transparent">
       <Container height="fill" padding={3} sizing="border" width={1}>
-        <Card
-          height="fill"
-          ref={setBoundaryElement}
-          radius={3}
-          shadow={3}
-          style={{position: 'relative'}}
-          // style={{position: 'absolute', top: 12, right: 12, bottom: 12, left: 12}}
-        >
+        <Card height="fill" ref={setBoundaryElement} radius={4} shadow={3} tone="default">
           <Box height="fill" overflow="auto" padding={[4, 4, 5]} sizing="border">
-            <Stack space={5}>
+            <Stack gap={5}>
               <BoundaryElementProvider element={boundaryElement}>
                 <ConstrainedHeightExampleField id="example-1" label="Example 1" />
                 <ConstrainedHeightExampleField id="example-2" label="Example 2" />
@@ -90,20 +83,21 @@ function ConstrainedHeightExampleField({id, label}: {id: string; label: string})
       },
       popoverRef: React.Ref<HTMLDivElement>,
     ) => {
-      const {hidden, inputElement, ...restProps} = popoverProps
+      const {hidden, inputElement, ...rest} = popoverProps
 
       if (hidden) return null
 
       return (
         <Popover
-          {...restProps}
+          {...rest}
           arrow={false}
           constrainSize
           matchReferenceWidth
           open
           overflow="auto"
           placement="bottom-start"
-          radius={1}
+          portal
+          radius={3}
           ref={popoverRef}
           referenceElement={inputElement}
         />
@@ -113,7 +107,7 @@ function ConstrainedHeightExampleField({id, label}: {id: string; label: string})
   )
 
   return (
-    <Stack space={3}>
+    <Stack gap={3}>
       <Text size={1} weight="medium">
         {label}
       </Text>
@@ -125,7 +119,7 @@ function ConstrainedHeightExampleField({id, label}: {id: string; label: string})
           openButton
           options={options}
           placeholder="Search"
-          radius={1}
+          radius={2}
           renderOption={renderOption}
           renderPopover={renderPopover}
           renderValue={renderValue}

package/src/core/components/autocomplete/__workshop__/custom.tsx

@@ -1,24 +1,26 @@
 import {Autocomplete, Box, Button, Card, Code, Container, Stack, Text} from '@sanity/ui'
+import type {Radius} from '@sanity/ui/theme'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useCallback, useState} from 'react'
 
 import {
   WORKSHOP_RADIUS_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
-  WORKSHOP_TEXT_SIZE_OPTIONS,
-} from '../../../__workshop__/constants'
-import countries from '../__mocks__/countries'
-import {ExampleOption} from './types'
+  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
+} from '$workshop'
 
-export default function CustomStory() {
+import {countries} from './mock/countries'
+import type {ExampleOption} from './types'
+
+export default function CustomStory(): React.JSX.Element {
   const data: ExampleOption[] = countries.map((d) => ({value: d.code, title: d.name}))
-  const border = useBoolean('Border', true, 'Props')
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = Number(useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props'))
-  const openButton = useBoolean('Open button', true, 'Props')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const radius = Number(useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props'))
-  const readOnly = useBoolean('Read only', false, 'Props')
+  const border = useBoolean('Border', true)
+  const disabled = useBoolean('Disabled', false)
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
+  const openButton = useBoolean('Open button', true)
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
+  const readOnly = useBoolean('Read only', false)
   const [value, setValue] = useState('')
 
   const renderOption = useCallback(
@@ -30,7 +32,7 @@ export default function CustomStory() {
         key={option.value}
         onClick={(event) => event.preventDefault()}
         padding={padding}
-        radius={radius - 1}
+        radius={Math.max((radius ?? 0) - 1, 0) as Radius}
       >
         <Text size={fontSize}>{option.title}</Text>
       </Card>
@@ -51,8 +53,8 @@ export default function CustomStory() {
   return (
     <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
       <Container width={0}>
-        <Stack space={5}>
-          <Stack space={3}>
+        <Stack gap={5}>
+          <Stack gap={3}>
             <Text as="label" htmlFor="custom" id="custom-label" size={1} weight="medium">
               Country
             </Text>
@@ -76,9 +78,9 @@ export default function CustomStory() {
             />
           </Stack>
 
-          <Card padding={3} radius={2} tone="transparent">
+          <Box muted padding={3} radius={2}>
             <Code size={1}>{JSON.stringify(value)}</Code>
-          </Card>
+          </Box>
           <Box>
             <Button id="set-value-btn" onClick={() => setValue('NO')} text="Set to NO" />
           </Box>