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

package/src/core/primitives/badge/badge.tsx

@@ -1,18 +1,13 @@
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
+import {badge, composeClassNames, RadiusStyleProps} from '@sanity/ui/css'
+import {ForwardedRef, forwardRef} from 'react'
 import {BadgeMode, BadgeTone} from '../../types'
 import {Box, BoxProps} from '../box'
 import {Text} from '../text'
-import {ResponsiveRadiusProps} from '../types'
-import {badgeStyle} from './styles'
-import {BadgeStyleProps} from './types'
 
 /**
  * @public
  */
-export interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
+export interface BadgeProps extends BoxProps, RadiusStyleProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
   fontSize?: number | number[]
   /** @deprecated No longer used. */
@@ -20,11 +15,6 @@ export interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
   tone?: BadgeTone
 }
 
-const Root = styled(Box)<BadgeStyleProps & ResponsiveRadiusStyleProps>(
-  responsiveRadiusStyle,
-  badgeStyle,
-)
-
 /**
  * Badges are used to tag resources.
  *
@@ -32,30 +22,38 @@ const Root = styled(Box)<BadgeStyleProps & ResponsiveRadiusStyleProps>(
  */
 export const Badge = forwardRef(function Badge(
   props: BadgeProps & React.HTMLProps<HTMLDivElement>,
-  ref,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {
     children,
+    className,
+    display = 'inline-block',
     fontSize = 1,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     mode: _deprecated_mode,
     padding = 1,
-    radius = 'full',
+    radius = 2,
     tone = 'default',
     ...restProps
   } = props
 
   return (
-    <Root
+    <Box
       data-ui="Badge"
       {...restProps}
-      $tone={tone}
-      $radius={useArrayProp(radius)}
-      padding={useArrayProp(padding)}
+      className={composeClassNames(
+        className,
+        badge({
+          radius,
+          tone,
+        }),
+      )}
+      display={display}
+      padding={padding}
       ref={ref}
     >
       <Text size={fontSize}>{children}</Text>
-    </Root>
+    </Box>
   )
 })
 Badge.displayName = 'ForwardRef(Badge)'

package/src/core/primitives/box/box.tsx

@@ -1,55 +1,15 @@
+import {box, BoxStyleProps, composeClassNames, PositionStyleProps} from '@sanity/ui/css'
+import {GapStyleProps} from '@sanity/ui/css'
 import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {
-  boxStyle,
-  flexItemStyle,
-  FlexItemStyleProps,
-  responsiveBoxStyle,
-  ResponsiveBoxStyleProps,
-  responsiveGridItemStyle,
-  ResponsiveGridItemStyleProps,
-  responsivePaddingStyle,
-  ResponsivePaddingStyleProps,
-  responsiveMarginStyle,
-  ResponsiveMarginStyleProps,
-} from '../../styles/internal'
-import {
-  ResponsiveBoxProps,
-  ResponsiveFlexItemProps,
-  ResponsiveGridItemProps,
-  ResponsiveMarginProps,
-  ResponsivePaddingProps,
-} from '../types'
 
 /**
  * @public
  */
-export interface BoxProps
-  extends ResponsiveFlexItemProps,
-    ResponsiveBoxProps,
-    ResponsiveGridItemProps,
-    ResponsiveMarginProps,
-    ResponsivePaddingProps {
+export interface BoxProps extends BoxStyleProps, GapStyleProps, PositionStyleProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
   forwardedAs?: React.ElementType | keyof JSX.IntrinsicElements
 }
 
-const Root = styled.div<
-  FlexItemStyleProps &
-    ResponsiveBoxStyleProps &
-    ResponsiveGridItemStyleProps &
-    ResponsiveMarginStyleProps &
-    ResponsivePaddingStyleProps
->(
-  boxStyle,
-  flexItemStyle,
-  responsiveBoxStyle,
-  responsiveGridItemStyle,
-  responsiveMarginStyle,
-  responsivePaddingStyle,
-)
-
 /**
  * The `Box` component is a basic layout wrapper component which provides utility properties
  * for flex, margins and padding.
@@ -57,17 +17,25 @@ const Root = styled.div<
  * @public
  */
 export const Box = forwardRef(function Box(
-  props: BoxProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
+  props: BoxProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'wrap' | 'width'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
-    as: asProp = 'div',
+    align,
+    as: As = 'div',
+    className,
     column,
     columnStart,
     columnEnd,
+    direction,
     display = 'block',
     flex,
+    gap,
+    gapX,
+    gapY,
     height,
+    inset,
+    justify,
     margin = 0,
     marginX,
     marginY,
@@ -83,48 +51,68 @@ export const Box = forwardRef(function Box(
     paddingRight,
     paddingBottom,
     paddingLeft,
+    pointerEvents,
+    position,
     row,
     rowStart,
     rowEnd,
     sizing,
+    width,
+    wrap,
     ...restProps
   } = props
 
   return (
-    <Root
-      data-as={typeof asProp === 'string' ? asProp : undefined}
+    <As
+      data-as={typeof As === 'string' ? As : undefined}
       data-ui="Box"
       {...restProps}
-      $column={useArrayProp(column)}
-      $columnStart={useArrayProp(columnStart)}
-      $columnEnd={useArrayProp(columnEnd)}
-      $display={useArrayProp(display)}
-      $flex={useArrayProp(flex)}
-      $height={useArrayProp(height)}
-      $margin={useArrayProp(margin)}
-      $marginX={useArrayProp(marginX)}
-      $marginY={useArrayProp(marginY)}
-      $marginTop={useArrayProp(marginTop)}
-      $marginRight={useArrayProp(marginRight)}
-      $marginBottom={useArrayProp(marginBottom)}
-      $marginLeft={useArrayProp(marginLeft)}
-      $overflow={useArrayProp(overflow)}
-      $padding={useArrayProp(padding)}
-      $paddingX={useArrayProp(paddingX)}
-      $paddingY={useArrayProp(paddingY)}
-      $paddingTop={useArrayProp(paddingTop)}
-      $paddingRight={useArrayProp(paddingRight)}
-      $paddingBottom={useArrayProp(paddingBottom)}
-      $paddingLeft={useArrayProp(paddingLeft)}
-      $row={useArrayProp(row)}
-      $rowStart={useArrayProp(rowStart)}
-      $rowEnd={useArrayProp(rowEnd)}
-      $sizing={useArrayProp(sizing)}
-      as={asProp}
+      className={composeClassNames(
+        className,
+        box({
+          align,
+          column,
+          columnStart,
+          columnEnd,
+          direction,
+          display,
+          flex,
+          gap,
+          gapX,
+          gapY,
+          height,
+          inset,
+          justify,
+          overflow,
+          margin,
+          marginX,
+          marginY,
+          marginTop,
+          marginRight,
+          marginBottom,
+          marginLeft,
+          padding,
+          paddingX,
+          paddingY,
+          paddingTop,
+          paddingRight,
+          paddingBottom,
+          paddingLeft,
+          pointerEvents,
+          position,
+          row,
+          rowStart,
+          rowEnd,
+          sizing,
+          width,
+          wrap,
+        }),
+      )}
       ref={ref}
     >
       {props.children}
-    </Root>
+    </As>
   )
 })
+
 Box.displayName = 'ForwardRef(Box)'

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

@@ -13,10 +13,11 @@ import {
 
 export default function ButtonStory() {
   const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 1, 'Props')
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
   const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props')
   const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, '', 'Props')
   const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center', 'Props')
+  const loading = useBoolean('Loading', false, 'Props')
   const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS, 'default', 'Props')
   const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
   const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
@@ -35,6 +36,7 @@ export default function ButtonStory() {
         icon={icon && icons[icon]}
         iconRight={iconRight && icons[iconRight]}
         justify={justify}
+        loading={loading}
         mode={mode}
         onClick={useAction('onClick')}
         paddingX={paddingX}

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

@@ -1,6 +1,6 @@
 import {UploadIcon} from '@sanity/icons'
 import {Button, Flex} from '@sanity/ui'
-import {styled} from 'styled-components'
+import {styled} from '../../../lib/styled'
 
 const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
   & input {

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

@@ -1,5 +1,5 @@
 import {Button, Flex} from '@sanity/ui'
-import {styled} from 'styled-components'
+import {styled} from '../../../lib/styled'
 
 const StyledButton1 = styled.a`
   &:hover {

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

@@ -1,5 +1,5 @@
 import {Button, Flex} from '@sanity/ui'
-import {styled} from 'styled-components'
+import {styled} from '../../../lib/styled'
 
 const StyledButton2 = styled(Button)<{$color?: boolean}>`
   &:hover {

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,5 +1,5 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
+import {css} from '../../lib/styled'
 import {ThemeProps} from '../../styles'
 import {_cardColorStyle} from '../../styles/card'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
@@ -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__/selected.tsx

@@ -2,7 +2,7 @@ import {EditIcon, PublishIcon} from '@sanity/icons'
 import {Box, Card, Container, Flex, Inline, Stack, Text, ThemeProps, useRootTheme} from '@sanity/ui'
 import {ThemeColorStateToneKey, getTheme_v2} from '@sanity/ui/theme'
 import {useBoolean} from '@sanity/ui-workshop'
-import {styled, css} from 'styled-components'
+import {styled, css} from '../../../lib/styled'
 
 const TextWithTone = styled(Text)<{$tone: ThemeColorStateToneKey}>((
   props: {

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

@@ -1,5 +1,5 @@
 import {Card, Flex, Text} from '@sanity/ui'
-import {styled} from 'styled-components'
+import {styled} from '../../../lib/styled'
 
 const StyledCard = styled(Card).attrs({forwardedAs: 'ol'})``
 

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,60 +34,80 @@ 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 {
-    __unstable_checkered: checkered = false,
-    __unstable_focusRing: focusRing = false,
+    // __unstable_checkered: checkered = false,
+    // __unstable_focusRing: focusRing = false,
     as: asProp,
     border,
     borderTop,
     borderRight,
     borderBottom,
     borderLeft,
-    muted,
+    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}
-        data-checkered={checkered ? '' : undefined}
+        as={as}
+        // $checkered={checkered}
+        // $focusRing={focusRing}
+        // $muted={muted}
+        className={composeClassNames(
+          className,
+          rootCard ? undefined : 'root',
+          card({
+            border,
+            borderTop,
+            borderRight,
+            borderBottom,
+            borderLeft,
+            radius,
+            shadow,
+          }),
+        )}
+        // data-checkered={checkered ? '' : undefined}
         data-pressed={pressed ? '' : undefined}
+        data-test={rootCard ? undefined : ''}
         data-selected={selected ? '' : undefined}
-        forwardedAs={as}
+        // 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/card/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 {_cardColorStyle} from '../../styles/card'
 import {focusRingStyle} from '../../styles/focusRing'