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

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

@@ -1,34 +1,34 @@
+import {buttonLoadingBox, composeClassNames, ResponsiveProp} from '@sanity/ui/css'
+import {button} from '@sanity/ui/css'
+import {PaddingStyleProps, RadiusStyleProps} from '@sanity/ui/css'
+import {Width} from '@sanity/ui/css'
+import {FontTextSize, Space} from '@sanity/ui/theme'
 import {forwardRef, isValidElement, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
-import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
-import {ThemeProps} from '../../styles'
-import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {useTheme_v2} from '../../theme'
-import {ButtonMode, ButtonTextAlign, ButtonTone, ButtonWidth, FlexJustify} from '../../types'
+import {ButtonMode, ButtonTextAlign, ButtonTone, FlexJustify} from '../../types'
 import {Box} from '../box'
 import {Flex} from '../flex'
 import {Spinner} from '../spinner'
 import {Text, TextProps} from '../text'
-import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../types'
-import {buttonBaseStyles, buttonColorStyles} from './styles'
 
 /**
  * @public
  */
-export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
+export interface ButtonProps extends PaddingStyleProps, RadiusStyleProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
-  fontSize?: number | number[]
+  fontSize?: ResponsiveProp<FontTextSize>
   mode?: ButtonMode
   icon?: React.ElementType | React.ReactNode
   iconRight?: React.ElementType | React.ReactNode
-  justify?: FlexJustify | FlexJustify[]
+  justify?: ResponsiveProp<FlexJustify>
   /**
    * @beta Do not use in production, as this might change.
    */
   loading?: boolean
   selected?: boolean
-  space?: number | number[]
+  space?: ResponsiveProp<Space>
   textAlign?: ButtonTextAlign
   muted?: boolean
   text?: React.ReactNode
@@ -36,38 +36,21 @@ export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusPro
   textWeight?: TextProps['weight']
   tone?: ButtonTone
   type?: 'button' | 'reset' | 'submit'
-  width?: ButtonWidth
+  // width?: ButtonWidth
+  width?: ResponsiveProp<Width>
 }
 
-const Root = styled.button<
-  {$mode: ButtonMode; $tone: ButtonTone; $width?: ButtonWidth} & ResponsiveRadiusStyleProps &
-    ThemeProps
->(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles)
-
-const LoadingBox = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--card-bg-color);
-  border-radius: inherit;
-  z-index: 1;
-  box-shadow: inherit;
-`
-
 /**
  * @public
  */
 export const Button = forwardRef(function Button(
-  props: ButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'width'>,
+  props: ButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'width' | 'height' | 'wrap'>,
   ref: React.ForwardedRef<HTMLButtonElement>,
 ) {
   const {
+    as: As = 'button',
     children,
+    className,
     disabled,
     fontSize = 1,
     icon: IconComponent,
@@ -95,7 +78,7 @@ export const Button = forwardRef(function Button(
     width,
     ...restProps
   } = props
-  const {button} = useTheme_v2()
+  const {button: buttonTheme} = useTheme_v2()
 
   const justify = useArrayProp(justifyProp)
   const padding = useArrayProp(paddingProp)
@@ -105,7 +88,7 @@ export const Button = forwardRef(function Button(
   const paddingBottom = useArrayProp(paddingBottomProp)
   const paddingLeft = useArrayProp(paddingLeftProp)
   const paddingRight = useArrayProp(paddingRightProp)
-  const radius = useArrayProp(radiusProp)
+  // const radius = useArrayProp(radiusProp)
   const space = useArrayProp(spaceProp)
 
   const boxProps = useMemo(
@@ -123,23 +106,32 @@ export const Button = forwardRef(function Button(
   )
 
   return (
-    <Root
+    <As
       data-ui="Button"
       {...restProps}
-      $mode={mode}
-      $radius={radius}
-      $tone={tone}
+      // $mode={mode}
+      // $radius={radius}
+      // $tone={tone}
+      className={composeClassNames(
+        className,
+        button({
+          mode,
+          radius: radiusProp,
+          tone,
+          width,
+        }),
+      )}
       data-disabled={Boolean(loading || disabled)}
       data-selected={selected ? '' : undefined}
       disabled={Boolean(loading || disabled)}
       ref={ref}
       type={type}
-      $width={width}
+      // $width={width}
     >
       {Boolean(loading) && (
-        <LoadingBox>
-          <Spinner />
-        </LoadingBox>
+        <Box align="center" className={buttonLoadingBox()} display="flex" justify="center">
+          <Spinner size={fontSize} />
+        </Box>
       )}
 
       {(IconComponent || text || IconRightComponent) && (
@@ -153,14 +145,14 @@ export const Button = forwardRef(function Button(
             )}
 
             {text && (
-              <Box as="span">
+              <Box>
                 <Text
                   as="span"
                   muted={muted}
                   align={textAlign}
                   size={fontSize}
                   textOverflow={textOverflow}
-                  weight={textWeight ?? button.textWeight}
+                  weight={textWeight ?? buttonTheme.textWeight}
                 >
                   {text}
                 </Text>
@@ -182,7 +174,8 @@ export const Button = forwardRef(function Button(
           {children}
         </Box>
       )}
-    </Root>
+    </As>
   )
 })
+
 Button.displayName = 'ForwardRef(Button)'

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

@@ -1,8 +1,8 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-import {ThemeProps} from '../../styles'
-import {_cardColorStyle} from '../../styles/card'
-import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
+import {ThemeProps} from '../../_compat'
+import {_cardColorStyle} from '../../_compat/styles/card'
+import {focusRingBorderStyle, focusRingStyle} from '../../_compat/styles/internal'
+import {css} from '../../lib/styled'
 import {ButtonMode, ButtonTone, ButtonWidth} from '../../types'
 
 /**
@@ -29,8 +29,8 @@ export function buttonBaseStyles(
     border: 0;
     box-sizing: border-box;
     padding: 0;
-    overflow: hidden;
     margin: 0;
+    white-space: nowrap;
     text-align: left;
     position: relative;
     vertical-align: top;

package/src/core/primitives/card/RootCardContext.ts

@@ -0,0 +1,3 @@
+import {createContext} from 'react'
+
+export const RootCardContext = createContext<{renderedVars: boolean} | null>(null)

package/src/core/primitives/card/__workshop__/props.tsx

@@ -1,4 +1,4 @@
-import {Card, Flex, Stack, Text} from '@sanity/ui'
+import {Card, Flex, Radius, Stack, Text} from '@sanity/ui'
 import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
 import {
   WORKSHOP_CARD_AS_OPTIONS,
@@ -28,7 +28,7 @@ export default function PropsStory() {
         muted={muted}
         onClick={useAction('onClick')}
         padding={padding}
-        radius={radius}
+        radius={radius as Radius}
         selected={selected}
         shadow={shadow}
         tone={tone}

package/src/core/primitives/card/card.tsx

@@ -1,31 +1,16 @@
+import {card, CardStyleProps, composeClassNames} from '@sanity/ui/css'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
+import {forwardRef, useContext} from 'react'
 import {isValidElementType} from 'react-is'
-import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {
-  responsiveBorderStyle,
-  ResponsiveBorderStyleProps,
-  responsiveRadiusStyle,
-  ResponsiveRadiusStyleProps,
-  responsiveShadowStyle,
-  ResponsiveShadowStyleProps,
-} from '../../styles/internal'
 import {ThemeColorProvider, useRootTheme} from '../../theme'
 import {CardTone} from '../../types'
 import {Box, BoxProps} from '../box'
-import {ResponsiveBorderProps, ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
-import {cardStyle} from './styles'
-import {CardStyleProps} from './types'
+import {RootCardContext} from './RootCardContext'
 
 /**
  * @public
  */
-export interface CardProps
-  extends BoxProps,
-    ResponsiveBorderProps,
-    ResponsiveRadiusProps,
-    ResponsiveShadowProps {
+export interface CardProps extends BoxProps, CardStyleProps {
   /**
    * Do not use in production.
    * @beta
@@ -42,13 +27,6 @@ export interface CardProps
   tone?: CardTone
 }
 
-const Root = styled(Box)<
-  CardStyleProps &
-    ResponsiveRadiusStyleProps &
-    ResponsiveBorderStyleProps &
-    ResponsiveShadowStyleProps
->(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle)
-
 /**
  * The `Card` component acts much like a `Box`, but with a background and foreground color.
  * Components within a `Card` inherit its colors.
@@ -56,7 +34,7 @@ const Root = styled(Box)<
  * @public
  */
 export const Card = forwardRef(function Card(
-  props: CardProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
+  props: CardProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width' | 'wrap'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -68,48 +46,65 @@ export const Card = forwardRef(function Card(
     borderRight,
     borderBottom,
     borderLeft,
+    className,
     muted,
     pressed,
     radius = 0,
     scheme,
     selected,
     shadow,
+    style,
     tone: toneProp = 'default',
     ...restProps
   } = props
 
   const as = isValidElementType(asProp) ? asProp : 'div'
+  const rootCard = useContext(RootCardContext)
   const rootTheme = useRootTheme()
+
   const tone = toneProp === 'inherit' ? rootTheme.tone : toneProp
 
-  // todo: Consider adding the wrapper approach for nested cards in which the tones are not changing, avoid unnecessary ThemeColorProvider
-  return (
+  // todo: Consider adding the wrapper approach for nested cards in which the tones are not
+  // changing, avoid unnecessary ThemeColorProvider
+  const node = (
     <ThemeColorProvider scheme={scheme} tone={tone}>
-      <Root
+      <Box
         data-as={typeof as === 'string' ? as : undefined}
         data-scheme={rootTheme.scheme}
         data-ui="Card"
         data-tone={tone}
         {...restProps}
-        $border={useArrayProp(border)}
-        $borderTop={useArrayProp(borderTop)}
-        $borderRight={useArrayProp(borderRight)}
-        $borderBottom={useArrayProp(borderBottom)}
-        $borderLeft={useArrayProp(borderLeft)}
-        $checkered={checkered}
-        $focusRing={focusRing}
-        $muted={muted}
-        $radius={useArrayProp(radius)}
-        $shadow={useArrayProp(shadow)}
-        $tone={tone}
+        as={as}
+        className={composeClassNames(
+          className,
+          // rootCard ? undefined : 'root',
+          card({
+            border,
+            borderTop,
+            borderRight,
+            borderBottom,
+            borderLeft,
+            radius,
+            shadow,
+          }),
+        )}
         data-checkered={checkered ? '' : undefined}
+        data-focus-ring={focusRing ? '' : undefined}
+        data-muted={muted ? '' : undefined}
         data-pressed={pressed ? '' : undefined}
         data-selected={selected ? '' : undefined}
-        forwardedAs={as}
         ref={ref}
         selected={selected}
+        style={style}
       />
     </ThemeColorProvider>
   )
+
+  if (!rootCard) {
+    return <RootCardContext.Provider value={{renderedVars: true}}>{node}</RootCardContext.Provider>
+  }
+
+  return node
 })
+
 Card.displayName = 'ForwardRef(Card)'

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,40 +1,49 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+
+import {code, composeClassNames, FontStyleProps} from '@sanity/ui/css'
 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
  */
-export interface CodeProps {
+export interface CodeProps extends Omit<FontStyleProps, 'align'> {
   as?: React.ElementType | keyof JSX.IntrinsicElements
   /** Define the language to use for syntax highlighting. */
   language?: string
   size?: number | number[]
-  weight?: string
 }
 
-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/container/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 {ResponsiveWidthStyleProps} from './types'
 
 const BASE_STYLE: CSSObject = {

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

@@ -1,31 +1,10 @@
 import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {
-  flexItemStyle,
-  FlexItemStyleProps,
-  responsiveFlexStyle,
-  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[]
-}
-
-const Root = styled(Box)<FlexItemStyleProps & ResponsiveFlexStyleProps>(
-  flexItemStyle,
-  responsiveFlexStyle,
-)
+export interface FlexProps extends Omit<BoxProps, 'display'> {}
 
 /**
  * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
@@ -36,22 +15,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
+    <Box
       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,16 +1,10 @@
 import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {responsiveGridStyle, ResponsiveGridStyleProps} from '../../styles/internal'
 import {Box, BoxProps} from '../box'
-import {ResponsiveGridProps} from '../types'
 
 /**
  * @public
  */
-export interface GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridProps {}
-
-const Root = styled(Box)<ResponsiveGridStyleProps>(responsiveGridStyle)
+export interface GridProps extends Omit<BoxProps, 'display'> {}
 
 /**
  * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
@@ -21,27 +15,20 @@ export const Grid = forwardRef(function Grid(
   props: GridProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const {as, autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, children, ...restProps} =
-    props
+  const {as, children, ...restProps} = props
 
   return (
-    <Root
+    <Box
       data-as={typeof as === 'string' ? as : undefined}
       data-ui="Grid"
       {...restProps}
-      $autoRows={useArrayProp(autoRows)}
-      $autoCols={useArrayProp(autoCols)}
-      $autoFlow={useArrayProp(autoFlow)}
-      $columns={useArrayProp(columns)}
-      $gap={useArrayProp(gap)}
-      $gapX={useArrayProp(gapX)}
-      $gapY={useArrayProp(gapY)}
-      $rows={useArrayProp(rows)}
+      display="grid"
       forwardedAs={as}
       ref={ref}
     >
       {children}
-    </Root>
+    </Box>
   )
 })
+
 Grid.displayName = 'ForwardRef(Grid)'