@sanity/ui 2.9.0-corel.0 → 3.0.0-static.0

package/src/core/primitives/checkbox/checkbox.tsx

@@ -1,8 +1,7 @@
 import {CheckmarkIcon, RemoveIcon} from '@sanity/icons'
+import {checkbox, checkboxInput, composeClassNames} from '@sanity/ui/css'
 import {forwardRef, useEffect, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
 import {useCustomValidity} from '../../hooks'
-import {checkboxBaseStyles, inputElementStyles} from './styles'
 
 /**
  * @public
@@ -12,9 +11,6 @@ export interface CheckboxProps {
   customValidity?: string
 }
 
-const Root = styled.div(checkboxBaseStyles)
-const Input = styled.input(inputElementStyles)
-
 /**
  * Checkboxes allow the user to select one or more items from a set.
  *
@@ -51,12 +47,13 @@ export const Checkbox = forwardRef(function Checkbox(
   useCustomValidity(ref, customValidity)
 
   return (
-    <Root className={className} data-ui="Checkbox" style={style}>
-      <Input
+    <span className={composeClassNames(className, checkbox())} data-ui="Checkbox" style={style}>
+      <input
         data-read-only={!disabled && readOnly ? '' : undefined}
         data-error={customValidity ? '' : undefined}
         {...restProps}
         checked={checked}
+        className={composeClassNames(className, checkboxInput())}
         disabled={disabled || readOnly}
         type="checkbox"
         readOnly={readOnly}
@@ -66,7 +63,8 @@ export const Checkbox = forwardRef(function Checkbox(
         <CheckmarkIcon />
         <RemoveIcon />
       </span>
-    </Root>
+    </span>
   )
 })
+
 Checkbox.displayName = 'ForwardRef(Checkbox)'

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

@@ -1,10 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+
+import {code, composeClassNames} from '@sanity/ui/css'
+import {FontWeight} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import Refractor from 'react-refractor'
-import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
-import {codeBaseStyle} from './styles'
 
 /**
  * @public
@@ -14,27 +13,39 @@ export interface CodeProps {
   /** Define the language to use for syntax highlighting. */
   language?: string
   size?: number | number[]
-  weight?: string
+  weight?: FontWeight
 }
 
-const Root = styled.pre<ResponsiveFontStyleProps>(codeBaseStyle, responsiveCodeFontStyle)
-
 /**
  * @public
  */
 export const Code = forwardRef(function Code(
-  props: CodeProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLElement>,
+  props: CodeProps & Omit<React.HTMLProps<HTMLPreElement>, 'as' | 'size'>,
+  ref: React.ForwardedRef<HTMLPreElement>,
 ) {
-  const {children, language: languageProp, size = 2, weight, ...restProps} = props
+  const {
+    as: As = 'pre',
+    children,
+    className,
+    language: languageProp,
+    size = 2,
+    weight,
+    ...restProps
+  } = props
   const language = typeof languageProp === 'string' ? languageProp : undefined
   const registered = language ? Refractor.hasLanguage(language as any) : false
 
   return (
-    <Root data-ui="Code" {...restProps} $size={useArrayProp(size)} $weight={weight} ref={ref}>
+    <As
+      data-ui="Code"
+      {...restProps}
+      className={composeClassNames(className, code({size, weight}))}
+      ref={ref}
+    >
       {!(language && registered) && <code>{children}</code>}
       {language && registered && <Refractor inline language={language} value={String(children)} />}
-    </Root>
+    </As>
   )
 })
+
 Code.displayName = 'ForwardRef(Code)'

package/src/core/primitives/code/styles.ts

@@ -1,5 +1,5 @@
 import {getTheme_v2} from '@sanity/ui/theme'
-import {css, ExecutionContext} from 'styled-components'
+import {css, type ExecutionContext} from '../../lib/styled'
 
 function codeSyntaxHighlightingStyle({theme}: ExecutionContext) {
   const {

package/src/core/primitives/container/container.tsx

@@ -1,20 +1,11 @@
+import {composeClassNames, container, ContainerStyleProps} from '@sanity/ui/css'
 import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'
-import {ResponsiveWidthProps} from '../types'
-import {containerBaseStyle, responsiveContainerWidthStyle} from './styles'
-import {ResponsiveWidthStyleProps} from './types'
 
 /**
  * @public
  */
-export interface ContainerProps extends BoxProps, ResponsiveWidthProps {}
-
-const Root = styled(Box)<ResponsiveWidthStyleProps>(
-  containerBaseStyle,
-  responsiveContainerWidthStyle,
-)
+export interface ContainerProps extends Omit<BoxProps, 'width'>, ContainerStyleProps {}
 
 /**
  * The `Container` component wraps content layout in a defined set of widths.
@@ -25,16 +16,17 @@ export const Container = forwardRef(function Container(
   props: ContainerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const {as, width = 2, ...restProps} = props
+  const {as, className, width = 2, ...restProps} = props
 
   return (
-    <Root
+    <Box
       data-ui="Container"
       {...restProps}
-      $width={useArrayProp(width)}
-      forwardedAs={as}
+      as={as}
+      className={composeClassNames(className, container({width}))}
       ref={ref}
     />
   )
 })
+
 Container.displayName = 'ForwardRef(Container)'

package/src/core/primitives/flex/__workshop__/example.tsx

@@ -1,6 +1,6 @@
 import {Card, Code, Flex} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
-import {styled} from 'styled-components'
+import {styled} from '../../../lib/styled'
 import {WORKSHOP_FLEX_DIRECTION_OPTIONS} from '../../../__workshop__/constants'
 
 const DebugCard = styled(Card)`

package/src/core/primitives/flex/flex.tsx

@@ -1,6 +1,5 @@
 import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {styled} from '../../lib/styled'
 import {
   flexItemStyle,
   FlexItemStyleProps,
@@ -8,19 +7,11 @@ import {
   ResponsiveFlexStyleProps,
 } from '../../styles/internal'
 import {Box, BoxProps} from '../box'
-import {ResponsiveFlexProps, ResponsiveFlexItemProps} from '../types'
 
 /**
  * @public
  */
-export interface FlexProps
-  extends Omit<BoxProps, 'display'>,
-    ResponsiveFlexProps,
-    ResponsiveFlexItemProps {
-  gap?: number | number[]
-  gapX?: number | number[]
-  gapY?: number | number[]
-}
+export interface FlexProps extends Omit<BoxProps, 'display'> {}
 
 const Root = styled(Box)<FlexItemStyleProps & ResponsiveFlexStyleProps>(
   flexItemStyle,
@@ -36,22 +27,18 @@ export const Flex = forwardRef(function Flex(
   props: FlexProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'wrap'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const {align, as, direction = 'row', gap, gapX, gapY, justify, wrap, ...restProps} = props
+  const {as, direction = 'row', ...restProps} = props
 
   return (
     <Root
       data-ui="Flex"
       {...restProps}
-      $align={useArrayProp(align)}
-      $direction={useArrayProp(direction)}
-      $gap={useArrayProp(gap)}
-      $gapX={useArrayProp(gapX)}
-      $gapY={useArrayProp(gapY)}
-      $justify={useArrayProp(justify)}
-      $wrap={useArrayProp(wrap)}
+      direction={direction}
+      display="flex"
       forwardedAs={as}
       ref={ref}
     />
   )
 })
+
 Flex.displayName = 'ForwardRef(Flex)'

package/src/core/primitives/grid/grid.tsx

@@ -1,6 +1,6 @@
 import {forwardRef} from 'react'
-import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
+import {styled} from '../../lib/styled'
 import {responsiveGridStyle, ResponsiveGridStyleProps} from '../../styles/internal'
 import {Box, BoxProps} from '../box'
 import {ResponsiveGridProps} from '../types'
@@ -37,6 +37,7 @@ export const Grid = forwardRef(function Grid(
       $gapX={useArrayProp(gapX)}
       $gapY={useArrayProp(gapY)}
       $rows={useArrayProp(rows)}
+      display="grid"
       forwardedAs={as}
       ref={ref}
     >

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

@@ -1,16 +1,17 @@
+import {composeClassNames, heading} from '@sanity/ui/css'
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
-import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
-import {
-  ResponsiveFontStyleProps,
-  responsiveHeadingFont,
-  responsiveTextAlignStyle,
-  ResponsiveTextAlignStyleProps,
-} from '../../styles/internal'
+import {styled} from '../../lib/styled'
+// import {
+//   ResponsiveFontStyleProps,
+//   responsiveHeadingFont,
+//   responsiveTextAlignStyle,
+//   ResponsiveTextAlignStyleProps,
+// } from '../../styles/internal'
 import {TextAlign} from '../../types'
-import {headingBaseStyle} from './styles'
-import {HeadingStyleProps} from './types'
+// import {headingBaseStyle} from './styles'
+// import {HeadingStyleProps} from './types'
 
 /**
  * @public
@@ -26,13 +27,13 @@ export interface HeadingProps {
    * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
    * @beta
    */
-  textOverflow?: 'ellipsis' | 'none'
+  textOverflow?: 'ellipsis'
   weight?: ThemeFontWeightKey
 }
 
-const Root = styled.div<
-  HeadingStyleProps & ResponsiveTextAlignStyleProps & ResponsiveFontStyleProps
->(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont)
+// const Root = styled.div<
+//   HeadingStyleProps & ResponsiveTextAlignStyleProps & ResponsiveFontStyleProps
+// >(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont)
 
 const SpanWithTextOverflow = styled.span`
   display: block;
@@ -54,7 +55,9 @@ export const Heading = forwardRef(function Heading(
   const {
     accent = false,
     align,
+    as: As = 'div',
     children: childrenProp,
+    className,
     muted = false,
     size = 2,
     textOverflow,
@@ -69,18 +72,28 @@ export const Heading = forwardRef(function Heading(
   }
 
   return (
-    <Root
+    <As
       data-ui="Heading"
       {...restProps}
-      $accent={accent}
+      // $accent={accent}
       $align={useArrayProp(align)}
-      $muted={muted}
-      $size={useArrayProp(size)}
-      $weight={weight}
+      // $muted={muted}
+      // $size={useArrayProp(size)}
+      // $weight={weight}
+      className={composeClassNames(
+        className,
+        heading({
+          accent,
+          muted,
+          size,
+          weight,
+        }),
+      )}
       ref={ref}
     >
       <span>{children}</span>
-    </Root>
+    </As>
   )
 })
+
 Heading.displayName = 'ForwardRef(Heading)'

package/src/core/primitives/heading/styles.ts

@@ -1,5 +1,5 @@
 import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
+import {css} from '../../lib/styled'
 import {ThemeProps} from '../../styles'
 import {HeadingStyleProps} from './types'
 

package/src/core/primitives/inline/inline.tsx

@@ -1,19 +1,22 @@
+import {ResponsiveProp} from '@sanity/ui/css'
+import {Space} from '@sanity/ui/theme'
 import {forwardRef, useMemo, Children} from 'react'
-import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+// import {useArrayProp} from '../../hooks'
+// import {styled} from '../../lib/styled'
 import {Box, BoxProps} from '../box'
-import {inlineBaseStyle, inlineSpaceStyle} from './styles'
-import {ResponsiveInlineSpaceStyleProps} from './types'
+// import {inlineBaseStyle, inlineSpaceStyle} from './styles'
+// import {ResponsiveInlineSpaceStyleProps} from './types'
 
 /**
  * @public
  */
-export interface InlineProps extends Omit<BoxProps, 'display'> {
+export interface InlineProps
+  extends Omit<BoxProps, 'align' | 'display' | 'gap' | 'gapX' | 'gapY' | 'justify'> {
   /** The spacing between children. */
-  space?: number | number[]
+  space?: ResponsiveProp<Space>
 }
 
-const Root = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlineSpaceStyle)
+// const Root = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlineSpaceStyle)
 
 /**
  * The `Inline` component is a layout utility for aligning and spacing items horizontally.
@@ -21,27 +24,33 @@ const Root = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlin
  * @public
  */
 export const Inline = forwardRef(function Inline(
-  props: InlineProps & React.HTMLProps<HTMLDivElement>,
+  props: InlineProps & Omit<React.HTMLProps<HTMLDivElement>, 'wrap'>,
   ref,
 ) {
   const {as, children: childrenProp, space, ...restProps} = props
 
   const children = useMemo(
-    () => Children.map(childrenProp, (child) => child && <div>{child}</div>),
+    () => Children.map(childrenProp, (child) => child && <Box maxWidth="fill">{child}</Box>),
     [childrenProp],
   )
 
   return (
-    <Root
+    <Box
       data-ui="Inline"
       {...restProps}
-      $space={useArrayProp(space)}
-      forwardedAs={as}
+      // $space={useArrayProp(space)}
+      align="center"
+      as={as}
+      display="flex"
+      // forwardedAs={as}
+      gap={space}
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ref={ref as any}
+      wrap="wrap"
     >
       {children}
-    </Root>
+    </Box>
   )
 })
+
 Inline.displayName = 'ForwardRef(Inline)'

package/src/core/primitives/kbd/kbd.tsx

@@ -1,41 +1,18 @@
+import {composeClassNames, kbd, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
+import {FontTextSize, Space} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
-import {styled, css} from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {Radius} from '../../types'
-import {Box} from '../box'
+import {Box, BoxProps} from '../box'
 import {Text} from '../text'
 
 /**
  * @public
  */
-export interface KBDProps {
+export interface KBDProps extends BoxProps, RadiusStyleProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
-  fontSize?: number | number[]
-  padding?: number | number[]
-  radius?: Radius | Radius[]
+  fontSize?: ResponsiveProp<FontTextSize>
+  padding?: ResponsiveProp<Space>
 }
 
-function kbdStyle() {
-  return css`
-    --card-bg-color: var(--card-kbd-bg-color);
-    --card-border-color: var(--card-kbd-border-color);
-    --card-fg-color: var(--card-kbd-fg-color);
-
-    box-shadow: inset 0 0 0 1px var(--card-border-color);
-    background: var(--card-bg-color);
-    font: inherit;
-
-    vertical-align: top;
-
-    &:not([hidden]) {
-      display: inline-block;
-    }
-  `
-}
-
-const Root = styled.kbd<ResponsiveRadiusStyleProps>(responsiveRadiusStyle, kbdStyle)
-
 /**
  * Used to define some text as keyboard input.
  *
@@ -45,16 +22,32 @@ export const KBD = forwardRef(function KBD(
   props: KBDProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const {children, fontSize = 0, padding = 1, radius = 2, ...restProps} = props
+  const {
+    as = 'kbd',
+    children,
+    className,
+    display = 'inline-block',
+    fontSize = 0,
+    padding = 1,
+    radius = 2,
+    ...restProps
+  } = props
 
   return (
-    <Root data-ui="KBD" {...restProps} $radius={useArrayProp(radius)} ref={ref}>
-      <Box as="span" padding={padding}>
-        <Text as="span" size={fontSize} weight="semibold">
-          {children}
-        </Text>
-      </Box>
-    </Root>
+    <Box
+      data-ui="KBD"
+      {...restProps}
+      as={as}
+      className={composeClassNames(className, kbd({radius}))}
+      display={display}
+      padding={padding}
+      ref={ref}
+    >
+      <Text as="span" size={fontSize} weight="semibold">
+        {children}
+      </Text>
+    </Box>
   )
 })
+
 KBD.displayName = 'ForwardRef(KBD)'

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

@@ -1,7 +1,8 @@
+import {composeClassNames, label} from '@sanity/ui/css'
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
-import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
+import {styled} from '../../lib/styled'
 import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'
 import {TextAlign} from '../../types'
 import {labelBaseStyle} from './styles'
@@ -52,6 +53,7 @@ export const Label = forwardRef(function Label(
     accent,
     align,
     children: childrenProp,
+    className,
     muted = false,
     size = 2,
     textOverflow,
@@ -71,15 +73,24 @@ export const Label = forwardRef(function Label(
     <Root
       data-ui="Label"
       {...restProps}
-      $accent={accent}
+      // $accent={accent}
       $align={useArrayProp(align)}
-      $muted={muted}
-      $size={useArrayProp(size)}
+      // $muted={muted}
+      // $size={useArrayProp(size)}
       $weight={weight}
+      className={composeClassNames(
+        className,
+        label({
+          accent,
+          muted,
+          size,
+        }),
+      )}
       ref={ref}
     >
       {children}
     </Root>
   )
 })
+
 Label.displayName = 'ForwardRef(Label)'

package/src/core/primitives/label/styles.ts

@@ -1,5 +1,5 @@
 import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
+import {css} from '../../lib/styled'
 import {ThemeProps} from '../../styles'
 
 export function labelBaseStyle(

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

@@ -62,7 +62,6 @@ function RecursiveExample({onClose}: {onClose?: () => void}) {
         mode="bleed"
         onKeyDown={handleKeyDown}
         onClick={handleOpen}
-        radius={3}
         ref={buttonRef}
         text="Open"
       />

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

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+
 import {
   Middleware,
   RootBoundary,
@@ -10,6 +11,7 @@ import {
   shift,
   useFloating,
 } from '@floating-ui/react-dom'
+import {RadiusStyleProps} from '@sanity/ui/css'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {AnimatePresence} from 'framer-motion'
 import {
@@ -29,7 +31,7 @@ import {origin} from '../../middleware/origin'
 import {useTheme_v2} from '../../theme'
 import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
 import {LayerProps, LayerProvider, Portal, useBoundaryElement} from '../../utils'
-import {ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
+import {ResponsiveShadowProps} from '../types'
 import {
   DEFAULT_POPOVER_DISTANCE,
   DEFAULT_POPOVER_MARGINS,
@@ -45,8 +47,8 @@ export type {PopoverUpdateCallback}
 
 /** @public */
 export interface PopoverProps
-  extends Omit<LayerProps, 'as'>,
-    ResponsiveRadiusProps,
+  extends Omit<LayerProps, 'width'>,
+    RadiusStyleProps,
     ResponsiveShadowProps {
   /** @beta */
   __unstable_margins?: PopoverMargins
@@ -116,7 +118,10 @@ export interface PopoverProps
 export const Popover = memo(
   forwardRef(function Popover(
     props: PopoverProps &
-      Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'width'>,
+      Omit<
+        React.HTMLProps<HTMLDivElement>,
+        'as' | 'children' | 'content' | 'height' | 'width' | 'wrap'
+      >,
     forwardedRef: React.ForwardedRef<HTMLDivElement>,
   ): React.ReactElement {
     const {container, layer} = useTheme_v2()
@@ -139,15 +144,15 @@ export const Popover = memo(
       onActivate,
       open,
       overflow = 'hidden',
-      padding: paddingProp,
+      padding,
       placement: placementProp = 'bottom',
       portal,
       preventOverflow = true,
-      radius: radiusProp = 3,
+      radius = 3,
       referenceBoundary = props.boundaryElement ?? boundaryElementContext.element,
       referenceElement,
       scheme,
-      shadow: shadowProp = 3,
+      shadow = 3,
       tone = 'inherit',
       width: widthProp = 'auto',
       zOffset: zOffsetProp = layer.popover.zOffset,
@@ -157,9 +162,9 @@ export const Popover = memo(
     const prefersReducedMotion = usePrefersReducedMotion()
     const animate = prefersReducedMotion ? false : _animate
     const boundarySize = useElementSize(boundaryElement)?.border
-    const padding = useArrayProp(paddingProp)
-    const radius = useArrayProp(radiusProp)
-    const shadow = useArrayProp(shadowProp)
+    // const padding = useArrayProp(paddingProp)
+    // const radius = useArrayProp(radiusProp)
+    // const shadow = useArrayProp(shadowProp)
     const widthArrayProp = useArrayProp(widthProp)
     const zOffset = useArrayProp(zOffsetProp)
     const ref = useRef<HTMLDivElement | null>(null)
@@ -354,6 +359,7 @@ export const Popover = memo(
       (node: HTMLElement | null) => {
         refs.setReference(node)
 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const childRef = getElementRef(childProp as any)
 
         if (typeof childRef === 'function') {
@@ -366,9 +372,9 @@ export const Popover = memo(
     )
 
     const child = useMemo(() => {
-      if (!childProp) return null
+      if (!childProp || referenceElement) return null
 
-      return cloneElement(childProp, {ref: referenceElement ? undefined : setReference})
+      return cloneElement(childProp, {ref: setReference})
     }, [childProp, referenceElement, setReference])
 
     useEffect(() => {
@@ -382,9 +388,8 @@ export const Popover = memo(
     }, [update, updateRef])
 
     useEffect(() => {
-      if (referenceElement) {
-        refs.setReference(referenceElement)
-      }
+      if (child) return
+      refs.setReference(referenceElement || null)
     }, [referenceElement, refs, child])
 
     if (disabled) {
@@ -441,6 +446,7 @@ export const Popover = memo(
     )
   }),
 )
+
 Popover.displayName = 'Memo(ForwardRef(Popover))'
 
 // Before React 19 accessing `element.props.ref` will throw a warning and suggest using `element.ref`