@sanity/ui 3.0.0-static.32 → 3.0.0-static.34

package/src/core/utils/elementQuery/__workshop__/index.ts

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'utils/elementQuery',
   title: 'ElementQuery',
   stories: [
@@ -11,4 +11,6 @@ export default defineScope({
       component: lazy(() => import('./customMedia')),
     },
   ],
-})
+}
+
+export default scope

package/src/core/utils/elementQuery/elementQuery.tsx

@@ -2,7 +2,7 @@ import {BREAKPOINTS} from '@sanity/ui/css'
 import {useImperativeHandle, useMemo, useState} from 'react'
 
 import {useElementSize} from '../../hooks/useElementSize'
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
 
 /** @beta */
@@ -36,7 +36,7 @@ const DEFAULT_BREAKPOINTS = Object.values(BREAKPOINTS)
  */
 export function ElementQuery<
   E extends ElementQueryElementType = typeof DEFAULT_ELEMENT_QUERY_ELEMENT,
->(props: ElementQueryProps<E>) {
+>(props: ElementQueryProps<E>): React.JSX.Element {
   const {
     as: Element = DEFAULT_ELEMENT_QUERY_ELEMENT,
     children,

package/src/core/utils/getElementRef.ts

@@ -7,7 +7,7 @@
 // https://github.com/facebook/react/pull/28348
 //
 // Access the ref using the method that doesn't yield a warning.
-export function getElementRef(element: React.ReactElement) {
+export function getElementRef(element: React.ReactElement): React.Ref<unknown> | undefined {
   // React <=18 in DEV
   let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get
   let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning

package/src/core/utils/portal/__workshop__/index.ts

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'utils/portal',
   title: 'Portal',
   stories: [
@@ -11,4 +11,6 @@ export default defineScope({
       component: lazy(() => import('./named')),
     },
   ],
-})
+}
+
+export default scope

package/src/core/utils/portal/__workshop__/named.tsx

@@ -1,7 +1,7 @@
 import {Card, Container, Portal, PortalProvider, Stack, Text} from '@sanity/ui'
 import {useMemo, useState} from 'react'
 
-export default function NamedStory() {
+export default function NamedStory(): React.JSX.Element {
   const [portal1Element, setPortal1Element] = useState<HTMLDivElement | null>(null)
   const [portal2Element, setPortal2Element] = useState<HTMLDivElement | null>(null)
   const [portal3Element, setPortal3Element] = useState<HTMLDivElement | null>(null)

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

@@ -1,6 +1,7 @@
 import {describe, expect, it, vi} from 'vitest'
 
-import {render} from '../../../../test'
+import {render} from '$test/utils'
+
 import {PortalContext} from './portalContext'
 import type {PortalContextValue} from './types'
 import {usePortal} from './usePortal'

package/src/core/utils/portal/portalContext.ts

@@ -1,8 +1,10 @@
+import type {Context} from 'react'
+
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 import {globalScope} from '../../lib/globalScope'
 import type {PortalContextValue} from './types'
 
-const key = '@sanity/ui/context/portal'
+const key = '@sanity/ui/v3/portal'
 const elementKey = Symbol.for(`${key}/element`)
 
 // Use the global scope as a map of symbols to elements
@@ -31,4 +33,5 @@ export const defaultContextValue: PortalContextValue = {
   },
 }
 
-export const PortalContext = createGlobalScopedContext<PortalContextValue>(key, defaultContextValue)
+export const PortalContext: Context<PortalContextValue> =
+  createGlobalScopedContext<PortalContextValue>(key, defaultContextValue)

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

@@ -1,14 +1,10 @@
-import {type ReactElement, type ReactNode, useMemo, useRef, useSyncExternalStore} from 'react'
+import {type ReactNode, useMemo, useRef, useSyncExternalStore} from 'react'
 
 import {PortalContext} from './portalContext'
 import type {PortalContextValue} from './types'
 
 /** @public */
 export interface PortalProviderProps {
-  /**
-   * @deprecated Use `<BoundaryElementProvider element={...} />` instead
-   */
-  boundaryElement?: HTMLElement | null
   children: ReactNode
   element?: HTMLElement | null
   /**
@@ -18,8 +14,8 @@ export interface PortalProviderProps {
 }
 
 /** @public */
-export function PortalProvider(props: PortalProviderProps): ReactElement {
-  const {boundaryElement, children, element, __unstable_elements: elementsProp} = props
+export function PortalProvider(props: PortalProviderProps): React.JSX.Element {
+  const {children, element, __unstable_elements: elementsProp} = props
   const elements = useUnique(elementsProp)
   const fallbackElement = useSyncExternalStore(
     emptySubscribe,
@@ -30,11 +26,11 @@ export function PortalProvider(props: PortalProviderProps): ReactElement {
   const value: PortalContextValue = useMemo(() => {
     return {
       version: 0.0,
-      boundaryElement: boundaryElement || null,
+      boundaryElement: null,
       element: element || fallbackElement,
       elements,
     }
-  }, [boundaryElement, element, elements, fallbackElement])
+  }, [element, elements, fallbackElement])
 
   return <PortalContext.Provider value={value}>{children}</PortalContext.Provider>
 }

package/src/css/_responsiveClassName.ts

@@ -4,11 +4,11 @@ import type {ResponsiveProp, ResponsiveRuleOptions} from './types'
 
 export function _responsiveClassName<T extends string | number>(
   rules: ResponsiveRuleOptions<T>,
-  _value: ResponsiveProp<T | boolean> | undefined,
+  _value: ResponsiveProp<T | boolean> | T | undefined,
   options?: {
     valueWhenTrue: T
   },
-) {
+): string | undefined {
   let value = _value
 
   if (value === undefined) {

package/src/css/_style.css.ts

@@ -1,6 +1,6 @@
 import {style, type StyleRule} from '@vanilla-extract/css'
 
-export function _style(layer: string, rule: StyleRule) {
+export function _style(layer: string, rule: StyleRule): string {
   return style({
     '@layer': {
       [layer]: rule,

package/src/css/components/breadcrumbs/breadcrumbs.css.ts

@@ -1,6 +1,6 @@
 import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 
-export const root = _style(layers.components, {
+export const root: string = _style(layers.components, {
   lineHeight: 0,
 })

package/src/css/components/dialog/dialog.css.ts

@@ -5,8 +5,6 @@ import {layers} from '../../layers.css'
 import {vars} from '../../vars.css'
 
 const zoomIn = keyframes({
-  // '@layer': {
-  //   [layers.components]: {
   from: {
     opacity: 0,
     transform: 'scale(0.95)',
@@ -15,24 +13,18 @@ const zoomIn = keyframes({
     opacity: 1,
     transform: 'scale(1)',
   },
-  //   },
-  // },
 })
 
 const fadeIn = keyframes({
-  // '@layer': {
-  //   [layers.components]: {
   from: {
     opacity: 0,
   },
   to: {
     opacity: 1,
   },
-  //   },
-  // },
 })
 
-export const root = _style(layers.components, {
+export const root: string = _style(layers.components, {
   alignItems: 'center',
   justifyContent: 'center',
   outline: 'none',
@@ -46,7 +38,7 @@ export const root = _style(layers.components, {
   },
 })
 
-export const card = _style(layers.components, {
+export const card: string = _style(layers.components, {
   width: '100%',
   maxHeight: '100%',
   overflow: ['hidden', 'clip'],
@@ -58,19 +50,19 @@ export const card = _style(layers.components, {
   },
 })
 
-export const container = _style(layers.components, {
+export const container: string = _style(layers.components, {
   width: '100%',
   height: '100%',
 })
 
-export const scroller = _style(layers.components, {
+export const scroller: string = _style(layers.components, {
   width: '100%',
   height: '100%',
   // overflow: 'auto',
   outline: 'none',
 })
 
-export const scrollerShadowTop = _style(layers.components, {
+export const scrollerShadowTop: string = _style(layers.components, {
   position: 'absolute',
   top: 0,
   left: 0,
@@ -81,7 +73,7 @@ export const scrollerShadowTop = _style(layers.components, {
   pointerEvents: 'none',
 })
 
-export const scrollerShadowBottom = _style(layers.components, {
+export const scrollerShadowBottom: string = _style(layers.components, {
   position: 'absolute',
   bottom: 0,
   left: 0,
@@ -92,15 +84,15 @@ export const scrollerShadowBottom = _style(layers.components, {
   pointerEvents: 'none',
 })
 
-export const header = _style(layers.components, {
+export const header: string = _style(layers.components, {
   zIndex: 2,
 })
 
-export const content = _style(layers.components, {
+export const content: string = _style(layers.components, {
   zIndex: 1,
   outline: 'none',
 })
 
-export const footer = _style(layers.components, {
+export const footer: string = _style(layers.components, {
   zIndex: 3,
 })

package/src/css/components/menu/menu.css.ts

@@ -2,11 +2,11 @@ import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 import {vars} from '../../vars.css'
 
-export const root = _style(layers.components, {
+export const root: string = _style(layers.components, {
   outline: 'none',
 })
 
-export const divider = _style(layers.components, {
+export const divider: string = _style(layers.components, {
   height: `1px`,
   border: 0,
   backgroundColor: vars.color.border,

package/src/css/components/menu/menu.ts

@@ -2,11 +2,11 @@ import {_composeClassNames} from '../../_composeClassNames'
 import {divider, root} from './menu.css'
 
 /** @public */
-export function menu(props: {className?: string}) {
+export function menu(props: {className?: string}): string | undefined {
   return _composeClassNames(props.className, root)
 }
 
 /** @public */
-export function menuDivider(props: {className?: string}) {
+export function menuDivider(props: {className?: string}): string | undefined {
   return _composeClassNames(props.className, divider)
 }

package/src/css/components/skeleton/skeleton.css.ts

@@ -18,19 +18,15 @@ import type {ResponsiveRuleOptions} from '../../types'
 import {vars} from '../../vars.css'
 
 const pulse = keyframes({
-  // '@layer': {
-  //   [layers.components]: {
   '0%': {
     backgroundPosition: '100%',
   },
   '100%': {
     backgroundPosition: '-100%',
   },
-  //   },
-  // },
 })
 
-export const root = _style(layers.components, {
+export const root: string = _style(layers.components, {
   'backgroundColor': vars.color.skeleton.from,
   'backgroundPosition': '100%',
   'backgroundSize': '200% 100%',
@@ -67,7 +63,7 @@ export const root = _style(layers.components, {
   },
 })
 
-export const font = _style(layers.components, {
+export const font: string = _style(layers.components, {
   height: `calc(${vars.font.skeleton.lineHeight} - ${vars.font.skeleton.ascenderHeight} - ${vars.font.skeleton.descenderHeight})`,
 })
 

package/src/css/components/toast/toast.css.ts

@@ -1,7 +1,7 @@
 import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 
-export const layer = _style(layers.components, {
+export const layer: string = _style(layers.components, {
   position: 'absolute',
   right: 0,
   bottom: 0,
@@ -11,7 +11,7 @@ export const layer = _style(layers.components, {
   width: '100%',
 })
 
-export const root = _style(layers.components, {
+export const root: string = _style(layers.components, {
   pointerEvents: 'all',
   overflow: ['hidden', 'clip'],
 })

package/src/css/components/toast/toast.ts

@@ -1,11 +1,11 @@
 import {layer, root} from './toast.css'
 
 /** @public */
-export function toastLayer() {
+export function toastLayer(): string {
   return layer
 }
 
 /** @public */
-export function toast() {
+export function toast(): string {
   return root
 }

package/src/css/components/tree/tree.css.ts

@@ -4,7 +4,7 @@ import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 import {vars} from '../../vars.css'
 
-export const item = _style(layers.components, {
+export const item: string = _style(layers.components, {
   selectors: {
     '&[role="treeitem"]': {
       outline: 'none',

package/src/css/components/tree/tree.ts

@@ -2,6 +2,6 @@ import {_composeClassNames} from '../../_composeClassNames'
 import {item} from './tree.css'
 
 /** @beta */
-export function treeItem(props: {className?: string}) {
+export function treeItem(props: {className?: string}): string | undefined {
   return _composeClassNames(props.className, item)
 }

package/src/css/defaultTheme.css.ts

@@ -3,10 +3,17 @@ import {
   _parseColorToken,
   AVATAR_COLORS,
   AVATAR_SIZE,
-  buildTheme_v3,
+  buildTheme,
+  CARD_TONES,
+  type CardColorTokens,
+  type CardTone,
   COLOR_VARIANTS,
+  type ColorScheme,
   type ColorValue,
+  type ColorVariant,
   CONTAINER_SCALE,
+  ELEMENT_TONES,
+  type ElementTone,
   FONT_CODE_SIZE,
   FONT_HEADING_SIZE,
   FONT_LABEL_SIZE,
@@ -16,20 +23,19 @@ import {
   RADIUS,
   SHADOW,
   SPACE,
-  THEME_COLOR_CARD_TONES,
-  THEME_COLOR_STATE_TONES,
-  type ThemeColorCard_v3,
-  type ThemeColorCardToneKey,
-  type ThemeColorSchemeKey,
-  type ThemeColorStateToneKey,
-  type ThemeColorVariantKey,
   TINTS,
 } from '@sanity/ui/theme'
 import {createTheme, globalFontFace} from '@vanilla-extract/css'
 
 import {_fromEntries} from './_fromEntries'
 import {layers} from './layers.css'
-import type {CSSTheme, CSSThemeColorCard} from './types'
+import type {
+  CSSCardColorTokens,
+  ElementColorTokens,
+  RootThemeTokens,
+  SchemeColorTokens,
+  VariantColorTokens,
+} from './types'
 import {px, toBoxShadow} from './util'
 import {paletteVars, themeVars} from './vars.css'
 
@@ -86,11 +92,10 @@ globalFontFace('Inter', [
   },
 ])
 
-const theme = buildTheme_v3()
+const theme = buildTheme()
 
-const themeValue: CSSTheme = {
-  '@layer': layers.theme,
-  'avatar': {
+const themeValue: RootThemeTokens = {
+  avatar: {
     focusRing: {
       offset: px(theme.avatar.focusRing.offset),
       width: px(theme.avatar.focusRing.width),
@@ -107,7 +112,7 @@ const themeValue: CSSTheme = {
       ),
     },
   },
-  'button': {
+  button: {
     border: {
       width: px(theme.button.border.width),
     },
@@ -116,15 +121,15 @@ const themeValue: CSSTheme = {
       width: px(theme.button.focusRing.width),
     },
   },
-  'card': {
+  card: {
     shadow: {
       outline: px(theme.card.shadow.outline),
     },
   },
-  'container': {
+  container: {
     ..._fromEntries(CONTAINER_SCALE.map((s) => [s, rem(theme.container[s])])),
   },
-  'color': {
+  color: {
     palette: {
       black: black.hex,
       white: white.hex,
@@ -136,7 +141,7 @@ const themeValue: CSSTheme = {
     light: renderColorScheme({scheme: 'light'}),
     dark: renderColorScheme({scheme: 'dark'}),
   },
-  'font': {
+  font: {
     code: {
       family: theme.font.code.family,
       featureSettings: theme.font.code.featureSettings || 'normal',
@@ -245,7 +250,7 @@ const themeValue: CSSTheme = {
       },
     },
   },
-  'input': {
+  input: {
     border: {
       width: px(theme.input.border.width),
     },
@@ -288,10 +293,8 @@ const themeValue: CSSTheme = {
       },
     },
   },
-
-  'radius': _fromEntries(RADIUS.map((key) => [key, `${theme.radius[key]}px`])),
-
-  'shadow': _fromEntries(
+  radius: _fromEntries(RADIUS.map((key) => [key, `${theme.radius[key]}px`])),
+  shadow: _fromEntries(
     SHADOW.map((s) => [
       s,
       {
@@ -301,14 +304,16 @@ const themeValue: CSSTheme = {
       },
     ]),
   ),
-
-  'space': _fromEntries(SPACE.map((key) => [key, `${theme.space[key]}px`])),
+  space: _fromEntries(SPACE.map((key) => [key, `${theme.space[key]}px`])),
 } as const
 
 /** @public */
-export const themeClassName = createTheme(themeVars, themeValue)
+export const themeClassName: string = createTheme(themeVars, {
+  '@layer': layers.theme,
+  ...themeValue,
+})
 
-function renderColorScheme(options: {scheme: ThemeColorSchemeKey}) {
+function renderColorScheme(options: {scheme: ColorScheme}): SchemeColorTokens {
   const {scheme} = options
 
   const defaultCardColor = renderCardColor({
@@ -318,7 +323,7 @@ function renderColorScheme(options: {scheme: ThemeColorSchemeKey}) {
 
   return {
     ..._fromEntries(
-      THEME_COLOR_CARD_TONES.map((key) => {
+      CARD_TONES.map((key) => {
         if (key === 'default') {
           return [key, defaultCardColor]
         }
@@ -338,14 +343,14 @@ function renderColorScheme(options: {scheme: ThemeColorSchemeKey}) {
 
 function renderCardColor(options: {
   bgValue?: string
-  tone: ThemeColorCardToneKey
+  tone: CardTone
   scheme: 'light' | 'dark'
-}): CSSThemeColorCard {
+}): CSSCardColorTokens {
   const {bgValue, tone: t, scheme} = options
 
   const tokens = theme.color[t]
 
-  const tintedDefaultVariant = renderColorVariant(tokens, {
+  const tintedDefaultVariant = renderColorElement(tokens, {
     bgValue,
     variant: 'tinted',
     scheme,
@@ -358,25 +363,6 @@ function renderCardColor(options: {
     scheme,
   } as const
 
-  const variants = {
-    ..._fromEntries(
-      COLOR_VARIANTS.map((v) => [
-        v,
-        {
-          ..._fromEntries(
-            THEME_COLOR_STATE_TONES.map((t) => {
-              if (v === 'tinted' && t === 'default') {
-                return [t, tintedDefaultVariant]
-              }
-
-              return [t, renderColorVariant(tokens, {scheme, variant: v, tone: t})]
-            }),
-          ),
-        },
-      ]),
-    ),
-  }
-
   return {
     avatar: {
       ..._fromEntries(
@@ -433,7 +419,6 @@ function renderCardColor(options: {
         variable: renderColor(tokens.code.token.variable, colorOptions),
       },
     },
-
     focusRing: renderColor(tokens.focusRing, colorOptions),
     link: {
       fg: renderColor(tokens.link.fg, colorOptions),
@@ -444,25 +429,39 @@ function renderCardColor(options: {
       penumbra: renderColor(tokens.shadow.penumbra, colorOptions),
       ambient: renderColor(tokens.shadow.ambient, colorOptions),
     },
-
     skeleton: {
       from: renderColor(tokens.skeleton.from, colorOptions),
       to: renderColor(tokens.skeleton.to, colorOptions),
     },
+    // variants
+    ..._fromEntries(
+      COLOR_VARIANTS.map((v) => [
+        v,
+        {
+          ..._fromEntries(
+            ELEMENT_TONES.map((t) => {
+              if (v === 'tinted' && t === 'default') {
+                return [t, tintedDefaultVariant]
+              }
 
-    ...variants,
+              return [t, renderColorElement(tokens, {scheme, variant: v, tone: t})]
+            }),
+          ),
+        } satisfies VariantColorTokens,
+      ]),
+    ),
   }
 }
 
-function renderColorVariant(
-  tokens: ThemeColorCard_v3,
+function renderColorElement(
+  tokens: CardColorTokens,
   options: {
     bgValue?: string
-    scheme: ThemeColorSchemeKey
-    variant: ThemeColorVariantKey
-    tone: ThemeColorStateToneKey
+    scheme: ColorScheme
+    variant: ColorVariant
+    tone: ElementTone
   },
-) {
+): ElementColorTokens {
   const {bgValue, scheme, variant: v, tone: t} = options
 
   const elementColorOptions = {bgValue, defaultHue: tokens.variant[v][t]._hue, scheme}
@@ -486,7 +485,7 @@ function renderColorVariant(
 function renderColor(
   value: ColorValue,
   context: {bgValue?: string; defaultHue: Hue; scheme: 'light' | 'dark'},
-) {
+): string {
   const {bgValue = 'transparent', defaultHue, scheme} = context
 
   const expr = _parseColorToken(value[scheme === 'light' ? 0 : 1], {defaultHue})

package/src/css/layers.css.ts

@@ -1,7 +1,10 @@
 import {layer} from '@vanilla-extract/css'
 
 /** @public */
-export const layers = {
+export type CSSLayer = 'theme' | 'props' | 'primitives' | 'components'
+
+/** @public */
+export const layers: Record<CSSLayer, string> = {
   theme: layer('theme'),
   props: layer('props'),
   primitives: layer('primitives'),