@sanity/ui 2.10.0-corel.0 → 3.0.0-static.1

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

@@ -1,39 +1,25 @@
-import {ThemeFontWeightKey} from '@sanity/ui/theme'
+import {composeClassNames, FontStyleProps, heading, ResponsiveProp} from '@sanity/ui/css'
+import {FontHeadingSize} 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 {TextAlign} from '../../types'
-import {headingBaseStyle} from './styles'
-import {HeadingStyleProps} from './types'
+import {styled} from '../../lib/styled'
 
 /**
  * @public
  */
-export interface HeadingProps {
+export interface HeadingProps extends FontStyleProps {
   accent?: boolean
-  align?: TextAlign | TextAlign[]
   as?: React.ElementType | keyof JSX.IntrinsicElements
   muted?: boolean
-  size?: number | number[]
+  size?: ResponsiveProp<FontHeadingSize>
   /**
    * Controls how overflowing text is treated.
    * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
    * @beta
    */
-  textOverflow?: 'ellipsis' | 'none'
-  weight?: ThemeFontWeightKey
+  textOverflow?: 'ellipsis'
 }
 
-const Root = styled.div<
-  HeadingStyleProps & ResponsiveTextAlignStyleProps & ResponsiveFontStyleProps
->(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont)
-
+// todo
 const SpanWithTextOverflow = styled.span`
   display: block;
   white-space: nowrap;
@@ -54,7 +40,9 @@ export const Heading = forwardRef(function Heading(
   const {
     accent = false,
     align,
+    as: As = 'div',
     children: childrenProp,
+    className,
     muted = false,
     size = 2,
     textOverflow,
@@ -69,18 +57,26 @@ export const Heading = forwardRef(function Heading(
   }
 
   return (
-    <Root
+    <As
       data-ui="Heading"
       {...restProps}
-      $accent={accent}
-      $align={useArrayProp(align)}
-      $muted={muted}
-      $size={useArrayProp(size)}
-      $weight={weight}
+      // todo
+      // $align={useArrayProp(align)}
+      className={composeClassNames(
+        className,
+        heading({
+          accent,
+          align,
+          muted,
+          size,
+          weight,
+        }),
+      )}
       ref={ref}
     >
       <span>{children}</span>
-    </Root>
+    </As>
   )
 })
+
 Heading.displayName = 'ForwardRef(Heading)'

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

@@ -1,6 +1,6 @@
 import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-import {ThemeProps} from '../../styles'
+import {ThemeProps} from '../../_compat'
+import {css} from '../../lib/styled'
 import {HeadingStyleProps} from './types'
 
 export function headingBaseStyle(props: HeadingStyleProps & ThemeProps): ReturnType<typeof css> {

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

@@ -1,47 +1,47 @@
-import {forwardRef, useMemo, Children} from 'react'
-import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {ResponsiveProp} from '@sanity/ui/css'
+import {Space} from '@sanity/ui/theme'
+import {forwardRef, useMemo, Children, ForwardedRef} from 'react'
 import {Box, BoxProps} from '../box'
-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)
-
 /**
  * The `Inline` component is a layout utility for aligning and spacing items horizontally.
  *
  * @public
  */
 export const Inline = forwardRef(function Inline(
-  props: InlineProps & React.HTMLProps<HTMLDivElement>,
-  ref,
+  props: InlineProps & Omit<React.HTMLProps<HTMLDivElement>, 'wrap'>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   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}
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ref={ref as any}
+      align="center"
+      as={as}
+      display="flex"
+      gap={space}
+      ref={ref}
+      wrap="wrap"
     >
       {children}
-    </Root>
+    </Box>
   )
 })
+
 Inline.displayName = 'ForwardRef(Inline)'

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

@@ -1,5 +1,5 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {rem, _responsive, ThemeProps} from '../../styles'
+import {rem, _responsive, ThemeProps} from '../../_compat'
 import {ResponsiveInlineSpaceStyleProps} from './types'
 
 export function inlineBaseStyle(): CSSObject {

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,17 +1,16 @@
+import {composeClassNames, FontStyleProps, 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 {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'
+import {responsiveLabelFont, responsiveTextAlignStyle} from '../../_compat/styles/internal'
+import {styled} from '../../lib/styled'
 import {TextAlign} from '../../types'
 import {labelBaseStyle} from './styles'
 
 /**
  * @public
  */
-export interface LabelProps {
+export interface LabelProps extends FontStyleProps {
   accent?: boolean
-  align?: TextAlign | TextAlign[]
   as?: React.ElementType | keyof JSX.IntrinsicElements
   muted?: boolean
   size?: number | number[]
@@ -52,6 +51,7 @@ export const Label = forwardRef(function Label(
     accent,
     align,
     children: childrenProp,
+    className,
     muted = false,
     size = 2,
     textOverflow,
@@ -71,15 +71,21 @@ export const Label = forwardRef(function Label(
     <Root
       data-ui="Label"
       {...restProps}
-      $accent={accent}
-      $align={useArrayProp(align)}
-      $muted={muted}
-      $size={useArrayProp(size)}
       $weight={weight}
+      className={composeClassNames(
+        className,
+        label({
+          accent,
+          align,
+          muted,
+          size,
+        }),
+      )}
       ref={ref}
     >
       {children}
     </Root>
   )
 })
+
 Label.displayName = 'ForwardRef(Label)'

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

@@ -1,6 +1,6 @@
 import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-import {ThemeProps} from '../../styles'
+import {ThemeProps} from '../../_compat'
+import {css} from '../../lib/styled'
 
 export function labelBaseStyle(
   props: {$accent?: boolean; $muted: boolean} & ThemeProps,

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

@@ -1,4 +1,4 @@
-import {Button, Card, Popover, PortalProvider, Text} from '@sanity/ui'
+import {Button, Card, Popover, PortalProvider, Radius, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useState} from 'react'
 import {
@@ -56,7 +56,7 @@ export default function PlainStory() {
               placement={placement}
               portal={portal}
               preventOverflow={preventOverflow}
-              radius={radius}
+              radius={radius as Radius}
               width={width}
             >
               <Button text="This button is the popover reference" />

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/__workshop__/TestStory.tsx

@@ -1,3 +1,4 @@
+import {Radius} from '@sanity/ui/theme'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {ReactElement, useRef, useState} from 'react'
 import {
@@ -80,7 +81,7 @@ export default function TestStory(): ReactElement {
                   placement={placement}
                   portal={portal}
                   preventOverflow={preventOverflow}
-                  radius={radius}
+                  radius={radius as Radius}
                   updateRef={updateRef}
                   width={width}
                 >

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' | 'rows' | '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`

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

@@ -1,10 +1,13 @@
 import {Strategy} from '@floating-ui/react-dom'
+import {RadiusStyleProps} from '@sanity/ui/css'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {MotionProps, motion} from 'framer-motion'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
-import {styled} from 'styled-components'
-import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY, POPOVER_MOTION_PROPS} from '../../constants'
-import {BoxOverflow, CardTone, Placement, PopoverMargins, Radius} from '../../types'
+import {
+  // POPOVER_MOTION_CONTENT_OPACITY_PROPERTY,
+  POPOVER_MOTION_PROPS,
+} from '../../constants'
+import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
 import {Arrow, useLayer} from '../../utils'
 import {Card, CardProps} from '../card'
 import {Flex} from '../flex'
@@ -15,46 +18,38 @@ import {
   DEFAULT_POPOVER_MARGINS,
 } from './constants'
 
-const MotionCard = styled(motion(Card))`
-  &:not([hidden]) {
-    display: flex;
-  }
-  flex-direction: column;
-  width: max-content;
-  min-width: min-content;
-  & > * {
-    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-    will-change: opacity;
-  }
-`
+/** @internal */
+export interface PopoverCardProps extends RadiusStyleProps {
+  /** @beta*/
+  __unstable_margins?: PopoverMargins
+  animate?: boolean
+  arrow: boolean
+  arrowRef: React.Ref<HTMLDivElement>
+  arrowX?: number
+  arrowY?: number
+  originX?: number
+  originY?: number
+  overflow?: BoxOverflow
+  padding?: number | number[]
+  placement: Placement
+  scheme?: ThemeColorSchemeKey
+  shadow?: number | number[]
+  strategy: Strategy
+  tone: CardTone
+  width: number | undefined
+  x: number | null
+  y: number | null
+}
+
+const MotionCard = motion(Card)
 
 /**
  * @internal
  */
 export const PopoverCard = memo(
   forwardRef(function PopoverCard(
-    props: {
-      /** @beta*/
-      __unstable_margins?: PopoverMargins
-      animate?: boolean
-      arrow: boolean
-      arrowRef: React.Ref<HTMLDivElement>
-      arrowX?: number
-      arrowY?: number
-      originX?: number
-      originY?: number
-      overflow?: BoxOverflow
-      padding?: number | number[]
-      placement: Placement
-      radius?: Radius | Radius[]
-      scheme?: ThemeColorSchemeKey
-      shadow?: number | number[]
-      strategy: Strategy
-      tone: CardTone
-      width: number | undefined
-      x: number | null
-      y: number | null
-    } & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
+    props: PopoverCardProps &
+      Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows' | 'width' | 'wrap'>,
     ref: React.ForwardedRef<HTMLDivElement>,
   ) {
     const {
@@ -121,6 +116,7 @@ export const PopoverCard = memo(
 
     return (
       <MotionCard
+        className="popover-card"
         data-ui="Popover"
         {...(restProps as CardProps & MotionProps)}
         data-placement={placement}
@@ -131,7 +127,9 @@ export const PopoverCard = memo(
         sizing="border"
         style={rootStyle}
         tone={tone}
-        {...(animate ? POPOVER_MOTION_PROPS : {})}
+        // todo
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        {...((animate ? POPOVER_MOTION_PROPS : {}) as any)}
       >
         <Flex data-ui="Popover__wrapper" direction="column" flex={1} overflow={overflow}>
           <Flex direction="column" flex={1} padding={padding}>

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

@@ -1,6 +1,6 @@
 import {forwardRef, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
 import {useCustomValidity} from '../../hooks'
+import {styled} from '../../lib/styled'
 import {radioBaseStyle, inputElementStyle} from './styles'
 
 /**

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

@@ -1,7 +1,7 @@
 import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-import {rem, ThemeProps} from '../../styles'
-import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
+import {rem, ThemeProps} from '../../_compat'
+import {focusRingBorderStyle, focusRingStyle} from '../../_compat/styles/internal'
+import {css} from '../../lib/styled'
 
 export function radioBaseStyle(): ReturnType<typeof css> {
   return css`

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

@@ -1,7 +1,7 @@
 import {ChevronDownIcon} from '@sanity/icons'
 import {forwardRef, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
 import {useCustomValidity, useArrayProp} from '../../hooks'
+import {styled} from '../../lib/styled'
 import {Radius} from '../../types'
 import {Box} from '../box'
 import {Text} from '../text'

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

@@ -1,14 +1,14 @@
 import {ThemeFontSize, getTheme_v2} from '@sanity/ui/theme'
 import {CSSObject} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-import {rem, _responsive, ThemeProps} from '../../styles'
+import {rem, _responsive, ThemeProps} from '../../_compat'
 import {
   focusRingBorderStyle,
   focusRingStyle,
   responsiveInputPaddingIconRightStyle,
   responsiveRadiusStyle,
   ResponsiveRadiusStyleProps,
-} from '../../styles/internal'
+} from '../../_compat/styles/internal'
+import {css} from '../../lib/styled'
 
 function rootStyle(): ReturnType<typeof css> {
   return css`

package/src/core/primitives/spinner/__workshop__/Props.tsx

@@ -1,4 +1,5 @@
 import {Flex, Spinner} from '@sanity/ui'
+import {FontTextSize} from '@sanity/ui/theme'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {WORKSHOP_TEXT_SIZE_OPTIONS} from '../../../__workshop__/constants'
 
@@ -8,7 +9,7 @@ export default function Props() {
 
   return (
     <Flex align="center" height="fill" justify="center">
-      <Spinner muted={muted} size={size} />
+      <Spinner muted={muted} size={size as FontTextSize} />
     </Flex>
   )
 }