@sanity/ui 3.0.0-static.25 → 3.0.0-static.27

package/exports/_visual-editing.ts

@@ -18,6 +18,7 @@ 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 {Spinner, type SpinnerProps} from '../src/core/primitives/spinner/spinner'
 export {Stack, type StackProps} from '../src/core/primitives/stack/stack'
@@ -25,6 +26,5 @@ 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 type {PopoverMargins} from '../src/core/types/popover'
-export {LayerProvider} from '../src/core/utils/layer/layerProvider'
 export {Portal, type PortalProps} from '../src/core/utils/portal/portal'
 export {PortalProvider, type PortalProviderProps} from '../src/core/utils/portal/portalProvider'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.25",
+  "version": "3.0.0-static.27",
   "keywords": [
     "react",
     "ui",
@@ -120,28 +120,14 @@
     "@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",
+    "@commitlint/cli": "19.5.0",
+    "@commitlint/config-conventional": "19.5.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.1.2",
-    "@storybook/addon-a11y": "^8.6.14",
-    "@storybook/addon-docs": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-interactions": "^8.6.12",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/addon-mdx-gfm": "^8.6.12",
-    "@storybook/addon-storysource": "^8.6.12",
-    "@storybook/addon-themes": "^8.6.14",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/manager-api": "^8.6.12",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-vite": "^8.6.14",
-    "@storybook/test": "^8.6.12",
-    "@storybook/theming": "^8.6.12",
+    "@sanity/ui-workshop": "^2.1.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -152,6 +138,7 @@
     "@types/react-is": "^19.0.0",
     "@types/refractor": "^3.4.1",
     "@vanilla-extract/rollup-plugin": "^1.3.15",
+    "@vanilla-extract/vite-plugin": "^5.0.3",
     "@vitejs/plugin-react": "^4.4.1",
     "@vitest/browser": "^3.1.4",
     "autoprefixer": "^10.4.21",
@@ -174,7 +161,7 @@
     "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",
+    "eslint-plugin-storybook": "^9.0.5",
     "globals": "^16.0.0",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
@@ -190,16 +177,15 @@
     "react-is": "^19.1.0",
     "refractor": "^4.9.0",
     "rimraf": "^5.0.10",
-    "semantic-release": "^24.2.3",
+    "semantic-release": "23.1.1",
     "start-server-and-test": "^2.0.11",
-    "storybook": "^8.6.14",
     "styled-components": "^6.1.17",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.8.3",
     "typescript-eslint": "^8.32.0",
-    "vite": "^5.4.19",
+    "vite": "^6.3.5",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.1.4",
+    "vitest": "^3.2.2",
     "vitest-axe": "1.0.0-pre.5"
   },
   "peerDependencies": {
@@ -226,14 +212,15 @@
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
     "dev": "run-p workshop:clean workshop:dev",
-    "figma:pkg:build": "cd figma && pnpm build",
+    "figma:build": "pnpm run --filter 'figma-plugin-sanity-ui' build",
     "format": "prettier --write --cache --ignore-unknown .",
     "lint": "eslint .",
     "pkg:build": "mkdirp dist && touch dist/ui.css && pkg build --strict",
     "pkg:check": "pkg --strict",
+    "pkg:watch": "mkdirp dist && touch dist/ui.css && pkg watch --strict",
     "release": "semantic-release",
-    "storybook:build": "storybook build",
-    "storybook:dev": "storybook dev -p 6006",
+    "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:start' http://localhost:1337 'run-s cypress:run'",
     "typecheck": "tsc",

package/src/core/components/dialog/dialog.tsx

@@ -10,16 +10,9 @@ import {type FocusEvent, type ForwardedRef, type ReactNode, useCallback, useRef}
 import {Z_OFFSETS} from '../../constants'
 import {focusFirstDescendant, focusLastDescendant, isHTMLElement} from '../../helpers'
 import {usePrefersReducedMotion, useResponsiveProp} from '../../hooks'
-import {Container} from '../../primitives'
+import {Container, Layer, type LayerOwnProps, type LayerProps} from '../../primitives'
 import type {CardTone, ComponentType, DialogPosition, Props, Radius} from '../../types'
-import {
-  Layer,
-  type LayerOwnProps,
-  type LayerProps,
-  Portal,
-  useBoundaryElement,
-  usePortal,
-} from '../../utils'
+import {Portal, useBoundaryElement, usePortal} from '../../utils'
 import {DialogCard} from './dialogCard'
 import {isTargetWithinScope} from './isTargetWithinScope'
 import {useDialog} from './useDialog'

package/src/core/components/dialog/dialogCard.tsx

@@ -19,9 +19,10 @@ import {
   type CardOwnProps,
   Flex,
   Text,
+  useLayer,
 } from '../../primitives'
 import type {Props} from '../../types'
-import {useBoundaryElement, useLayer, usePortal} from '../../utils'
+import {useBoundaryElement, usePortal} from '../../utils'
 import {isTargetWithinScope} from './isTargetWithinScope'
 
 /** @internal */

package/src/core/components/index.ts

@@ -7,3 +7,4 @@ export * from './skeleton'
 export * from './tab'
 export * from './toast'
 export * from './tree'
+export * from './virtualList'

package/src/core/components/menu/menu.tsx

@@ -3,9 +3,8 @@ import type {Space} from '@sanity/ui/theme'
 import {useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'react'
 
 import {useClickOutsideEvent, useGlobalKeyDown} from '../../hooks'
-import {Box, Stack} from '../../primitives'
+import {Box, Stack, useLayer} from '../../primitives'
 import type {ComponentType, Props} from '../../types'
-import {useLayer} from '../../utils'
 import {MenuContext, type MenuContextValue} from './menuContext'
 import {useMenuController} from './useMenuController'
 

package/src/core/components/toast/toastLayer.tsx

@@ -1,8 +1,7 @@
 import {type GapStyleProps, type PaddingStyleProps, toastLayer} from '@sanity/ui/css'
 
-import {Grid} from '../../primitives/grid'
+import {Grid, useLayer} from '../../primitives'
 import type {ComponentType, Props} from '../../types'
-import {useLayer} from '../../utils'
 
 /** @internal */
 export const DEFAULT_TOAST_LAYER_ELEMENT = 'ul'

package/src/core/components/toast/toastProvider.tsx

@@ -3,7 +3,7 @@ import {AnimatePresence} from 'framer-motion'
 import {startTransition, useMemo, useState} from 'react'
 
 import {useMounted} from '../../hooks/useMounted'
-import {LayerProvider} from '../../utils'
+import {LayerProvider} from '../../primitives'
 import {Toast} from './toast'
 import {ToastContext} from './toastContext'
 import {ToastLayer, type ToastLayerProps} from './toastLayer'

package/src/core/{utils → components}/virtualList/__workshop__/index.ts

@@ -2,7 +2,7 @@ import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
 export default defineScope({
-  name: 'utils/virtual-list',
+  name: 'components/virtual-list',
   title: 'VirtualList',
   stories: [
     {

package/src/core/primitives/badge/badge.tsx

@@ -47,10 +47,11 @@ export function Badge<E extends BadgeElementType = typeof DEFAULT_BADGE_ELEMENT>
       {...rest}
       as={as}
       className={badge({className, tone})}
-      display="inline-flex"
+      display="flex"
       maxWidth="fill"
       padding={padding}
       radius={radius}
+      width="min"
     >
       <Text size={fontSize}>{children}</Text>
     </Box>

package/src/core/primitives/index.ts

@@ -1,3 +1,4 @@
+export * from './arrow'
 export * from './avatar'
 export * from './badge'
 export * from './box'
@@ -12,10 +13,12 @@ export * from './heading'
 export * from './inline'
 export * from './kbd'
 export * from './label'
+export * from './layer'
 export * from './popover'
 export * from './radio'
 export * from './select'
 export * from './spinner'
+export * from './srOnly'
 export * from './stack'
 export * from './switch'
 export * from './text'

package/src/core/{utils → primitives}/layer/__workshop__/index.ts

@@ -2,7 +2,7 @@ import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
 export default defineScope({
-  name: 'utils/layer',
+  name: 'primitives/layer',
   title: 'Layer',
   stories: [
     {

package/src/core/primitives/popover/__workshop__/SidePanelStory.tsx

@@ -2,6 +2,7 @@ import {useSelect} from '@sanity/ui-workshop'
 import {useCallback, useEffect, useRef, useState} from 'react'
 
 import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
+
 import type {CardTone} from '../../../types'
 import {BoundaryElementProvider} from '../../../utils'
 import {Box} from '../../box'

package/src/core/primitives/popover/popover.tsx

@@ -28,8 +28,9 @@ import {Z_OFFSETS} from '../../constants'
 import {usePrefersReducedMotion, useResponsiveProp} from '../../hooks'
 import {origin} from '../../middleware/origin'
 import type {ComponentType, Placement, PopoverMargins, Props} from '../../types'
-import {type LayerOwnProps, Portal, useBoundaryElement, useLayer} from '../../utils'
+import {Portal, useBoundaryElement} from '../../utils'
 import {CardProvider, useCard} from '../card'
+import {type LayerOwnProps, useLayer} from '../layer'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
   DEFAULT_POPOVER_DISTANCE,

package/src/core/primitives/popover/popoverLayer.tsx

@@ -5,8 +5,9 @@ import {type CSSProperties, type ForwardedRef, useMemo} from 'react'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'
 import type {Placement, PopoverMargins} from '../../types'
-import {Arrow, Layer, type LayerOwnProps, type LayerProps} from '../../utils'
+import {Arrow} from '../arrow'
 import {Flex} from '../flex'
+import {Layer, type LayerOwnProps, type LayerProps} from '../layer'
 import {
   DEFAULT_POPOVER_ARROW_HEIGHT,
   DEFAULT_POPOVER_ARROW_RADIUS,

package/src/core/primitives/stack/stack.tsx

@@ -17,6 +17,7 @@ export type StackOwnProps = Omit<
   | 'direction'
   | 'display'
   | 'flexDirection'
+  | 'flexWrap'
   | 'gapX'
   | 'gapY'
   | 'justify'

package/src/core/primitives/switch/switch.tsx

@@ -66,7 +66,7 @@ export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEME
       data-checked={checked ? '' : undefined}
       data-indeterminate={indeterminate ? '' : undefined}
       data-ui="Switch"
-      display="inline-block"
+      display="block"
       position="relative"
       style={style}
     >

package/src/core/primitives/tooltip/tooltip.tsx

@@ -35,9 +35,10 @@ import {usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
 import {origin} from '../../middleware/origin'
 import type {ComponentType, Placement, Props} from '../../types'
-import {type LayerOwnProps, Portal, useBoundaryElement, usePortal} from '../../utils'
+import {Portal, useBoundaryElement, usePortal} from '../../utils'
 import {getElementRef} from '../../utils/getElementRef'
 import {CardProvider, useCard} from '../card'
+import type {LayerOwnProps} from '../layer'
 import type {Delay} from '../types'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,

package/src/core/primitives/tooltip/tooltipLayer.tsx

@@ -3,7 +3,8 @@ import {type CSSProperties, type ForwardedRef, useMemo} from 'react'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'
 import type {Placement} from '../../types'
-import {Arrow, Layer, type LayerOwnProps, type LayerProps} from '../../utils'
+import {Arrow} from '../arrow'
+import {Layer, type LayerOwnProps, type LayerProps} from '../layer'
 import {
   DEFAULT_TOOLTIP_ARROW_HEIGHT,
   DEFAULT_TOOLTIP_ARROW_RADIUS,

package/src/core/utils/getElementRef.ts

@@ -1,3 +1,4 @@
+/** @internal */
 // Based on https://github.com/radix-ui/primitives/blob/0bade6a704e5821b90a6da0f3d8cfa8a7711127d/packages/react/slot/src/Slot.tsx#L128-L150
 // Before React 19 accessing `element.props.ref` will throw a warning and suggest using `element.ref`
 // After React 19 accessing `element.ref` does the opposite.

package/src/core/utils/index.ts

@@ -1,8 +1,4 @@
-export * from './arrow'
 export * from './boundaryElement'
 export * from './elementQuery'
 export * from './errorBoundary'
-export * from './layer'
 export * from './portal'
-export * from './srOnly'
-export * from './virtualList'

package/src/css/primitives/avatar/avatar.css.ts

@@ -1,4 +1,5 @@
 import {AVATAR_COLORS, AVATAR_SIZE, type AvatarSize} from '@sanity/ui/theme'
+import {globalStyle} from '@vanilla-extract/css'
 
 import {_fromEntries} from '../../_fromEntries'
 import {_responsiveStyle} from '../../_responsiveStyle.css'
@@ -10,6 +11,7 @@ import {vars} from '../../vars.css'
 export const stack = _style(layers.primitives, {})
 
 export const root = _style(layers.primitives, {
+  // display: 'block',
   backgroundColor: vars.color.avatar.bg,
   position: 'relative',
   boxSizing: 'border-box',
@@ -25,6 +27,10 @@ export const root = _style(layers.primitives, {
   },
 
   selectors: {
+    '&:not([hidden])': {
+      display: 'block',
+    },
+
     [`${stack} > & + &`]: {
       marginLeft: vars.avatar.distance,
     },
@@ -113,11 +119,12 @@ export const arrowSvg = _style(layers.primitives, {
 })
 
 export const image = _style(layers.primitives, {
-  display: 'block',
   position: 'absolute',
+  top: 0,
+  left: 0,
   width: vars.avatar.size,
   height: vars.avatar.size,
-  borderRadius: vars.avatar.size,
+  borderRadius: 'inherit',
 
   selectors: {
     '[data-image-error] &': {
@@ -126,12 +133,22 @@ export const image = _style(layers.primitives, {
   },
 })
 
+globalStyle(`${image} img`, {
+  display: 'block',
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  borderRadius: 'inherit',
+})
+
 export const imageOutline = _style(layers.primitives, {
   display: 'block',
   position: 'absolute',
+  top: 0,
+  left: 0,
   width: vars.avatar.size,
   height: vars.avatar.size,
-  borderRadius: vars.avatar.size,
+  borderRadius: 'inherit',
   boxShadow: [
     `inset 0 0 0 1px ${vars.color.avatar.bg}`,
     `inset 0 0 0 1.75px ${vars.color.bg}`,
@@ -140,7 +157,7 @@ export const imageOutline = _style(layers.primitives, {
 
 export const initials = _style(layers.primitives, {
   color: vars.color.avatar.fg,
-  borderRadius: vars.avatar.size,
+  borderRadius: 'inherit',
 })
 
 export const counter = _style(layers.primitives, {

package/src/css/primitives/badge/badge.css.ts

@@ -8,7 +8,7 @@ import {vars} from '../../vars.css'
 export const root = _style(layers.primitives, {
   backgroundColor: vars.color.bg,
   color: vars.color.fg,
-  verticalAlign: 'top',
+  whiteSpace: 'nowrap',
 })
 
 export const tones = {
@@ -18,6 +18,7 @@ export const tones = {
       _style(layers.primitives, {
         vars: {
           [vars.color.bg]: vars.color.tinted[t].bg[2],
+          [vars.color.border]: vars.color.tinted[t].border[2],
           [vars.color.fg]: vars.color.tinted[t].fg[3],
         },
       }),

package/src/css/primitives/label/label.css.ts

@@ -19,6 +19,7 @@ export const root = _style(layers.primitives, {
   },
 
   color: vars.color.fg,
+  textTransform: 'uppercase',
 })
 
 globalStyle(`${root} a`, {

package/src/css/props/textOverflow/textOverflow.css.ts

@@ -5,11 +5,13 @@ import type {TextOverflow} from './types'
 
 export const options: ResponsiveRuleOptions<TextOverflow> = {
   clip: _responsiveStyle(layers.props, {
+    display: 'block',
     overflow: 'clip',
     textOverflow: 'clip',
     whiteSpace: 'nowrap',
   }),
   ellipsis: _responsiveStyle(layers.props, {
+    display: 'block',
     overflow: 'clip',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',

package/src/css/props/width/types.ts

@@ -3,7 +3,7 @@ import type {ContainerWidth} from '@sanity/ui/theme'
 import type {ResponsiveProp} from '../../types'
 
 /** @public */
-export type Width = ContainerWidth | 'auto' | 'fill' | 'stretch'
+export type Width = ContainerWidth | 'auto' | 'fill' | 'stretch' | 'min'
 
 /** @public */
 export interface WidthStyleProps {

package/src/css/props/width/width.css.ts

@@ -14,6 +14,9 @@ export const options: ResponsiveRuleOptions<Width> = {
   fill: _responsiveStyle(layers.props, {
     width: '100%',
   }),
+  min: _responsiveStyle(layers.props, {
+    width: 'min-content',
+  }),
   stretch: _responsiveStyle(layers.props, {
     width: 'stretch',
   }),

package/src/theme/v2/build/buildTheme.test.ts

@@ -59,31 +59,31 @@ test('build theme', () => {
       },
     },
   }).toEqual({
-    dark: {
-      bg: '#000000',
+    light: {
+      bg: 'rgba(255,255,255,0)',
+      fg: '#000000',
       default: {
         button: {
           ghost: {
             enabled: {
-              border: '#252837',
+              border: 'rgba(246,246,248,0)',
             },
           },
         },
       },
-      fg: '#ffffff',
     },
-    light: {
-      bg: '#ffffff',
+    dark: {
+      bg: 'rgba(0,0,0,0)',
+      fg: '#ffffff',
       default: {
         button: {
           ghost: {
             enabled: {
-              border: '#e3e4e8',
+              border: 'rgba(19,20,27,0)',
             },
           },
         },
       },
-      fg: '#000000',
     },
   })
 })

package/src/theme/v2/build/buildTheme.ts

@@ -1,12 +1,37 @@
-import {type RootTheme} from '../../types'
-import {buildTheme_v3} from '../../v3'
+import type {RootTheme} from '../../types'
 import {v2_v0} from '../../versioning/v2_v0'
-import {v3_v2} from '../../versioning/v3_v2'
-import {type ThemeConfig} from '../config'
+import type {ThemeConfig} from '../config'
+import {defaultThemeConfig} from '../defaults/config'
+import {defaultThemeFonts} from '../defaults/fonts'
+import type {RootTheme_v2} from '../theme'
+import {buildColorTheme} from './buildColorTheme'
+import {renderThemeColorSchemes} from './renderColorTheme'
 
 /** @internal */
-export function buildTheme(_config?: ThemeConfig): RootTheme {
-  const v3 = buildTheme_v3({v2: _config})
+export function buildTheme(config?: ThemeConfig): RootTheme {
+  const colorTheme = buildColorTheme(config)
 
-  return v2_v0(v3_v2(v3), v3)
+  const v2: RootTheme_v2 = {
+    _version: 2,
+    avatar: config?.avatar ?? defaultThemeConfig.avatar,
+    button: config?.button ?? defaultThemeConfig.button,
+    card: config?.card ?? defaultThemeConfig.card,
+    // How colors are generated:
+    // 1. Merge custom tokens with default tokens
+    // 2. Generate tree of color keys (gray/500, black, white, etc.)
+    // 3. Apply mixing and render to hex values
+    // render(build(mergeWithDefaults()))
+    color: renderThemeColorSchemes(colorTheme, config),
+    container: config?.container ?? defaultThemeConfig.container,
+    font: config?.font ?? defaultThemeFonts,
+    input: config?.input ?? defaultThemeConfig.input,
+    layer: config?.layer ?? defaultThemeConfig.layer,
+    media: config?.media ?? defaultThemeConfig.media,
+    radius: config?.radius ?? defaultThemeConfig.radius,
+    shadow: config?.shadow ?? defaultThemeConfig.shadow,
+    space: config?.space ?? defaultThemeConfig.space,
+    style: config?.style ?? defaultThemeConfig.style,
+  }
+
+  return v2_v0(v2)
 }