@sanity/ui 4.0.0-static.24 → 4.0.0-static.26

package/exports/css/index.css

@@ -0,0 +1 @@
+/* this file is used to support importing `@sanity/ui/css/index.css` in dev mode */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "4.0.0-static.24",
+  "version": "4.0.0-static.26",
   "keywords": [
     "react",
     "ui",
@@ -119,20 +119,20 @@
     "@sanity/icons": "^3.7.4",
     "@vanilla-extract/dynamic": "^2.1.5",
     "csstype": "^3.1.3",
-    "framer-motion": "^12.23.12",
+    "framer-motion": "^12.23.15",
     "react-refractor": "^4.0.0",
     "use-effect-event": "^2.0.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.3",
+    "@babel/core": "^7.28.4",
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
-    "@eslint/js": "^9.34.0",
+    "@eslint/js": "^9.35.0",
     "@sanity/browserslist-config": "^1.0.5",
-    "@sanity/pkg-utils": "^8.1.1",
+    "@sanity/pkg-utils": "^8.1.12",
     "@sanity/prettier-config": "^2.0.1",
     "@sanity/semantic-release-preset": "^5.0.0",
     "@sanity/ui-workshop": "4.0.0-static.11",
@@ -141,14 +141,14 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^24.3.0",
-    "@types/react": "^19.1.11",
-    "@types/react-dom": "^19.1.8",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
     "@types/react-is": "^19.0.0",
     "@vanilla-extract/css": "^1.17.4",
     "@vanilla-extract/vite-plugin": "^5.1.1",
     "@vitejs/plugin-react": "^5.0.1",
     "@vitest/browser": "^3.2.4",
-    "babel-plugin-react-compiler": "19.1.0-rc.2",
+    "babel-plugin-react-compiler": "19.1.0-rc.3",
     "browserslist-config-baseline": "^0.5.0",
     "cac": "^6.7.14",
     "commitizen": "^4.3.1",
@@ -156,7 +156,7 @@
     "cypress-real-events": "^1.14.0",
     "cz-conventional-changelog": "^3.3.0",
     "dotenv-flow": "^4.1.0",
-    "eslint": "^9.34.0",
+    "eslint": "^9.35.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-formatter-compact": "^8.40.0",
     "eslint-plugin-boundaries": "^5.0.1",
@@ -167,7 +167,7 @@
     "eslint-plugin-react-hooks": "0.0.0-experimental-66f09bd0-20250806",
     "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-storybook": "^9.1.3",
+    "eslint-plugin-storybook": "^9.1.7",
     "globals": "^16.3.0",
     "husky": "^8.0.3",
     "jsdom": "^26.1.0",
@@ -186,7 +186,7 @@
     "styled-components": "^6.1.19",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.9.2",
-    "typescript-eslint": "^8.41.0",
+    "typescript-eslint": "^8.44.0",
     "vite": "^7.1.3",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4",
@@ -197,7 +197,7 @@
     "react-dom": "^19",
     "react-is": "^19"
   },
-  "packageManager": "pnpm@10.14.0",
+  "packageManager": "pnpm@10.17.0",
   "engines": {
     "node": ">=20.19 <22 || >=22.12"
   },

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

@@ -79,6 +79,10 @@ function Pane(props: {borderLeft?: boolean; id: string}) {
                     <MenuItem text="Item 3" />
                   </Menu>
                 }
+                popover={{
+                  modal: true,
+                  portal: true,
+                }}
               />
             </Box>
           </Dialog>

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

@@ -139,10 +139,6 @@ export function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(
       onItemMouseEnter: handleItemMouseEnter,
       onItemMouseLeave: handleItemMouseLeave,
       registerElement,
-
-      // deprecated
-      onMouseEnter: handleItemMouseEnter,
-      onMouseLeave: handleItemMouseLeave,
     }),
     [
       activeElement,

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

@@ -133,7 +133,6 @@ export function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITE
       {...rest}
       as={as}
       data-pressed={pressed ? '' : undefined}
-      data-selected={active ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
       radius={radius}
       disabled={disabled}
@@ -142,6 +141,7 @@ export function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITE
       onMouseLeave={onItemMouseLeave}
       ref={setRef}
       role={role}
+      selected={active}
       tabIndex={-1}
       tone={tone}
       type={as === 'button' ? 'button' : undefined}

package/src/core/components/toast/useToast.ts

@@ -1,4 +1,4 @@
-import {useContext} from 'react'
+import {use} from 'react'
 
 import {isRecord} from '../../lib/isRecord'
 import {ToastContext} from './ToastContext'
@@ -6,7 +6,7 @@ import type {ToastContextValue} from './types'
 
 /** @public */
 export function useToast(): ToastContextValue {
-  const value = useContext(ToastContext)
+  const value = use(ToastContext)
 
   if (!value) {
     throw new Error('useToast(): missing context value')

package/src/core/primitives/avatar/Avatar.tsx

@@ -47,7 +47,7 @@ export function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEME
   props: AvatarProps<E>,
 ): React.JSX.Element {
   const {
-    __unstable_hideInnerStroke,
+    __unstable_hideInnerStroke: hideInnerStroke,
     as: Element = DEFAULT_AVATAR_ELEMENT,
     className,
     color = 'magenta',
@@ -104,7 +104,7 @@ export function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEME
 
   return (
     <Element
-      data-hide-inner-stroke={__unstable_hideInnerStroke ? '' : undefined}
+      data-hide-inner-stroke={hideInnerStroke ? '' : undefined}
       data-ui="Avatar"
       {...rest}
       aria-label={title}

package/src/core/primitives/avatar/__workshop__/PropsStory.tsx

@@ -0,0 +1,22 @@
+import {Avatar, Box} from '@sanity/ui'
+import type {AvatarSize} from '@sanity/ui/theme'
+import {useBoolean, useSelect} from '@sanity/ui-workshop'
+
+import {WORKSHOP_AVATAR_SIZE_OPTIONS, WORKSHOP_AVATAR_SRC} from '$workshop'
+
+export default function PropsStory() {
+  const hideInnerStroke = useBoolean('Hide inner stroke', false)
+  const src = useBoolean('With image source (src)', false)
+  // @ts-expect-error - TODO: fix this
+  const size = useSelect<AvatarSize>('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1)
+
+  return (
+    <Box alignItems="center" display="flex" height="fill" justifyContent="center">
+      <Avatar
+        __unstable_hideInnerStroke={hideInnerStroke}
+        size={size}
+        src={src ? WORKSHOP_AVATAR_SRC : undefined}
+      />
+    </Box>
+  )
+}

package/src/core/primitives/avatar/__workshop__/index.ts

@@ -5,6 +5,11 @@ const scope: WorkshopScope = {
   name: 'primitives/avatar',
   title: 'Avatar',
   stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./PropsStory')),
+    },
     {
       name: 'as-button',
       title: 'As button',

package/src/core/primitives/button/Button.tsx

@@ -9,7 +9,7 @@ import type {
 } from '@sanity/ui/css'
 import {button, buttonLoadingBox} from '@sanity/ui/css'
 import type {FontTextSize} from '@sanity/ui/theme'
-import {type ElementType as ReactElementType, isValidElement, type ReactNode} from 'react'
+import {isValidElement} from 'react'
 import {isValidElementType} from 'react-is'
 
 import type {ComponentType, Props} from '../../types'
@@ -30,8 +30,8 @@ export type ButtonOwnProps = ButtonStyleProps &
     'data-ui'?: string
     'disabled'?: boolean
     'fontSize'?: ResponsiveProp<FontTextSize>
-    'icon'?: ReactElementType | ReactNode
-    'iconRight'?: ReactElementType | ReactNode
+    'icon'?: React.ElementType | React.ReactNode
+    'iconRight'?: React.ElementType | React.ReactNode
     'justify'?: BoxStyleProps['justifyContent']
     /** @beta Do not use in production, as this might change.*/
     'loading'?: boolean
@@ -39,7 +39,7 @@ export type ButtonOwnProps = ButtonStyleProps &
     'textAlign'?: ButtonTextAlign
     'muted'?: boolean
     'target'?: string
-    'text'?: ReactNode
+    'text'?: React.ReactNode
     'textOverflow'?: TextOwnProps['textOverflow']
     'textWeight'?: TextOwnProps['weight']
     'width'?: ResponsiveProp<Width>
@@ -71,6 +71,7 @@ export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEME
     justify = 'center',
     loading,
     mode = 'default',
+    muted = false,
     padding = 3,
     paddingX,
     paddingY,
@@ -86,7 +87,6 @@ export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEME
     textWeight = 'medium',
     tone = 'default',
     type = 'button',
-    muted = false,
     width,
     ...rest
   } = props as ButtonProps<typeof DEFAULT_BUTTON_ELEMENT>

package/src/core/primitives/code/Code.tsx

@@ -31,6 +31,14 @@ export function Code<E extends CodeElementType = typeof DEFAULT_CODE_ELEMENT>(
     children,
     className,
     language: languageProp,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    maxWidth,
     size = 2,
     weight = 'regular',
     ...rest
@@ -39,7 +47,23 @@ export function Code<E extends CodeElementType = typeof DEFAULT_CODE_ELEMENT>(
   const language = typeof languageProp === 'string' ? languageProp : undefined
 
   return (
-    <Element data-ui="Code" {...rest} className={code({className, size, weight})}>
+    <Element
+      data-ui="Code"
+      {...rest}
+      className={code({
+        className,
+        margin,
+        marginX,
+        marginY,
+        marginTop,
+        marginRight,
+        marginBottom,
+        marginLeft,
+        maxWidth,
+        size,
+        weight,
+      })}
+    >
       <Suspense fallback={<code>{children}</code>}>
         <LazyRefractor language={language} value={children} />
       </Suspense>

package/src/core/primitives/heading/Heading.tsx

@@ -46,6 +46,14 @@ export function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_EL
     children,
     className,
     flex,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    maxWidth,
     muted = false,
     size = 2,
     textOverflow: textOverflowProp,
@@ -61,6 +69,14 @@ export function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_EL
         className,
         align,
         flex,
+        margin,
+        marginX,
+        marginY,
+        marginTop,
+        marginRight,
+        marginBottom,
+        marginLeft,
+        maxWidth,
         muted,
         size,
         weight,

package/src/core/primitives/label/Label.tsx

@@ -44,6 +44,14 @@ export function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>
     as: Element = DEFAULT_LABEL_ELEMENT,
     children,
     className,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    maxWidth,
     muted = false,
     size = 1,
     textOverflow: textOverflowProp,
@@ -58,6 +66,14 @@ export function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>
       className={label({
         className,
         align,
+        margin,
+        marginX,
+        marginY,
+        marginTop,
+        marginRight,
+        marginBottom,
+        marginLeft,
+        maxWidth,
         muted,
         size,
         weight,

package/src/core/primitives/radio/Radio.tsx

@@ -47,7 +47,7 @@ export function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>
   useCustomValidity(ref, customValidity)
 
   return (
-    <div className={radio({className})} data-ui="Radio" style={style}>
+    <span className={radio({className})} data-ui="Radio" style={style}>
       <Element
         {...rest}
         className={radioInput()}
@@ -59,6 +59,6 @@ export function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>
         type="radio"
       />
       <span className={radioPresentation()} />
-    </div>
+    </span>
   )
 }

package/src/core/primitives/select/Select.tsx

@@ -36,12 +36,14 @@ export function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEME
     children,
     customValidity,
     disabled,
+    flex,
     fontSize = 2,
     gap = 2,
     padding = 3,
     radius = 1,
     readOnly,
     ref: forwardedRef,
+    width = 'fill',
     ...rest
   } = props as SelectProps<typeof DEFAULT_SELECT_ELEMENT>
 
@@ -55,9 +57,9 @@ export function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEME
   useCustomValidity(ref, customValidity)
 
   return (
-    <div
+    <span
       data-ui="Select"
-      className={select({border, fontSize, gap, padding, radius})}
+      className={select({border, fontSize, flex, gap, padding, radius, width})}
       data-icon-right=""
     >
       <Element {...rest} className={_inputElement()} disabled={disabled || readOnly} ref={ref}>
@@ -70,6 +72,6 @@ export function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEME
           </Text>
         </Box>
       </span>
-    </div>
+    </span>
   )
 }

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

@@ -8,7 +8,6 @@ import {
 import {useEffect, useImperativeHandle, useRef} from 'react'
 
 import type {ComponentType, Props} from '../../types'
-import {Box} from '../box/Box'
 
 /** @public */
 export const DEFAULT_SWITCH_ELEMENT = 'input'
@@ -41,7 +40,6 @@ export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEME
     indeterminate,
     readOnly,
     ref: forwardedRef,
-    style,
     ...rest
   } = props as SwitchProps<typeof DEFAULT_SWITCH_ELEMENT>
 
@@ -60,13 +58,7 @@ export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEME
   }, [indeterminate])
 
   return (
-    <Box
-      className={_switch({className})}
-      data-ui="Switch"
-      display="block"
-      position="relative"
-      style={style}
-    >
+    <span className={_switch({className})} data-ui="Switch">
       <Element
         {...rest}
         className={_switchElement()}
@@ -79,6 +71,6 @@ export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEME
         <span className={_switchTrack()} />
         <span className={_switchThumb()} />
       </span>
-    </Box>
+    </span>
   )
 }

package/src/core/primitives/text/Text.tsx

@@ -42,6 +42,13 @@ export function Text<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(
     children,
     className,
     flex,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
     maxWidth = 'fill',
     muted,
     size = 2,
@@ -58,6 +65,13 @@ export function Text<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(
         className,
         align,
         flex,
+        margin,
+        marginX,
+        marginY,
+        marginTop,
+        marginRight,
+        marginBottom,
+        marginLeft,
         maxWidth,
         muted,
         size,

package/src/core/primitives/textArea/TextArea.tsx

@@ -37,14 +37,17 @@ export function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_ARE
     __unstable_disableFocusRing,
     as: Element = DEFAULT_TEXT_AREA_ELEMENT,
     border = true,
+    className,
     customValidity,
     disabled = false,
+    flex,
     fontSize = 2,
     gap = 3,
     padding = 3,
     radius = 2,
     readOnly,
     ref: forwardedRef,
+    width,
     ...rest
   } = props as TextAreaProps<typeof DEFAULT_TEXT_AREA_ELEMENT>
 
@@ -60,11 +63,14 @@ export function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_ARE
   return (
     <span
       className={textArea({
+        className,
         border,
+        flex,
         fontSize,
+        gap,
         padding,
         radius,
-        gap,
+        width,
       })}
       data-invalid={customValidity ? '' : undefined}
       data-read-only={!disabled && readOnly ? '' : undefined}

package/src/core/primitives/textInput/TextInput.tsx

@@ -86,6 +86,7 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
     className,
     clearButton,
     disabled = false,
+    flex,
     fontSize = 2,
     gap = 3,
     icon: IconComponent,
@@ -166,15 +167,15 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
   )
 
   return (
-    <Box
-      alignItems="center"
+    <span
       className={textInput({
         className,
         border,
+        flex,
         fontSize,
         padding,
         radius,
-        gap: gap,
+        gap,
         width,
       })}
       data-icon-left={IconComponent ? '' : undefined}
@@ -184,15 +185,14 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
       data-read-only={!disabled && readOnly ? '' : undefined}
       data-suffix={suffix ? '' : undefined}
       data-ui="TextInput"
-      display="flex"
     >
       {prefix && (
-        <Box className={textInputPrefix()} sizing="border">
+        <span className={textInputPrefix()}>
           <span>{prefix}</span>
-        </Box>
+        </span>
       )}
 
-      <Box className={textInputElement()} flex={1} position="relative">
+      <span className={textInputElement()}>
         <Element
           {...rest}
           className={_inputElement()}
@@ -203,10 +203,10 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
           type={type}
         />
 
-        <Box className={_inputPresentation()} position="absolute">
+        <span className={_inputPresentation()}>
           {IconComponent && (
-            <Box padding={padding} position="absolute" insetTop={0} insetLeft={0}>
-              <Text size={fontSize}>
+            <Box as="span" padding={padding} position="absolute" insetTop={0} insetLeft={0}>
+              <Text as="span" size={fontSize}>
                 {isValidElement(IconComponent) && IconComponent}
                 {isValidElementType(IconComponent) && <IconComponent />}
               </Text>
@@ -214,17 +214,18 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
           )}
 
           {!withClearButton && IconRightComponent && (
-            <Box padding={padding} position="absolute" insetTop={0} insetRight={0}>
-              <Text size={fontSize}>
+            <Box as="span" padding={padding} position="absolute" insetTop={0} insetRight={0}>
+              <Text as="span" size={fontSize}>
                 {isValidElement(IconRightComponent) && IconRightComponent}
                 {isValidElementType(IconRightComponent) && <IconRightComponent />}
               </Text>
             </Box>
           )}
-        </Box>
+        </span>
 
         {!disabled && !readOnly && clearButton && (
           <Box
+            as="span"
             insetTop={0}
             insetRight={0}
             padding={clearButtonBoxPadding}
@@ -246,13 +247,13 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
             />
           </Box>
         )}
-      </Box>
+      </span>
 
       {suffix && (
-        <Box className={textInputSuffix()} sizing="border">
+        <span className={textInputSuffix()}>
           <span>{suffix}</span>
-        </Box>
+        </span>
       )}
-    </Box>
+    </span>
   )
 }

package/src/core/types.ts

@@ -1,8 +1,6 @@
 /* eslint-disable @typescript-eslint/no-empty-object-type */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import type {ComponentClass, ComponentProps, ExoticComponent, FunctionComponent, JSX} from 'react'
-
 /**
  * Assign properties from `U` to `T`, excluding properties that already exist in `T`.
  *
@@ -14,17 +12,20 @@ export type Assign<T extends {}, U extends {}> = Omit<T, keyof U> & U
 export type EmptyProps = {}
 
 /** @public */
-export type TagType = keyof JSX.IntrinsicElements
+export type TagType = keyof React.JSX.IntrinsicElements
 
 /** @public */
-export type ComponentType<P = any> = FunctionComponent<P> | ComponentClass<P> | ExoticComponent<P>
+export type ComponentType<P = any> =
+  | React.FunctionComponent<P>
+  | React.ComponentClass<P>
+  | React.ExoticComponent<P>
 
 /** @public */
 export type ElementType<P> = TagType | ComponentType<P>
 
 /** @public */
 export type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<
-  E extends TagType ? JSX.IntrinsicElements[E] : ComponentProps<E>,
+  E extends TagType ? React.JSX.IntrinsicElements[E] : React.ComponentProps<E>,
   P & {as?: E}
 >
 

package/src/core/utils/portal/PortalProvider.tsx

@@ -1,4 +1,4 @@
-import {type ReactNode, useContext, useMemo, useRef, useSyncExternalStore} from 'react'
+import {type ReactNode, use, useMemo, useRef, useSyncExternalStore} from 'react'
 
 import {PortalContext} from './PortalContext'
 import type {PortalContextValue} from './types'
@@ -17,7 +17,7 @@ export interface PortalProviderProps {
 export function PortalProvider(props: PortalProviderProps): React.JSX.Element {
   const {children, element, __unstable_elements: elementsProp} = props
   const elements = useUnique(elementsProp)
-  const parentPortal = useContext(PortalContext)
+  const parentPortal = use(PortalContext)
   const fallbackElement = useSyncExternalStore(
     emptySubscribe,
     () => elements?.['default'] ?? (parentPortal.element || document.body),

package/src/css/primitives/_input/_input.css.ts

@@ -37,8 +37,7 @@ export const element: string = _style(layers.primitives, {
   display: 'block',
   boxSizing: 'border-box',
   resize: 'none',
-  // See https://caniuse.com/?search=width%3A%20stretch
-  width: ['-moz-available', '-webkit-fill-available', 'stretch'],
+  inlineSize: 'stretch',
 
   selectors: {
     '&::placeholder': {
@@ -112,12 +111,12 @@ export const presentation: string = _style(layers.primitives, {
   backgroundColor: vars.color.input.text.bg,
   borderRadius: 'inherit',
   boxShadow: `inset 0 0 0 ${vars.input.border.width} ${vars.color.input.text.border}`,
+  display: 'block',
   position: 'absolute',
   top: 0,
   left: 0,
   right: 0,
   bottom: 0,
-  display: 'block',
   pointerEvents: 'none',
   zIndex: 0,