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

package/src/core/primitives/avatar/avatar.tsx

@@ -1,12 +1,19 @@
+import {
+  avatar,
+  avatarArrow,
+  avatarBgStroke,
+  avatarImage,
+  avatarInitials,
+  avatarStroke,
+  composeClassNames,
+} from '@sanity/ui/css'
 import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
 import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'react'
 import ReactIs from 'react-is'
-import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {useTheme_v2} from '../../theme'
 import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'
 import {Label} from '../label'
-import {avatarStyle, responsiveAvatarSizeStyle} from './styles'
 
 /**
  * @public
@@ -30,25 +37,6 @@ export interface AvatarProps {
   title?: string
 }
 
-const Root = styled.div<{$color: ThemeColorAvatarColorKey; $size: AvatarSize[]}>(
-  responsiveAvatarSizeStyle,
-  avatarStyle.root,
-)
-
-const Arrow = styled.div(avatarStyle.arrow)
-
-const BgStroke = styled.ellipse(avatarStyle.bgStroke)
-
-const Stroke = styled.ellipse(avatarStyle.stroke)
-
-const Initials = styled.div(avatarStyle.initials)
-
-const InitialsLabel = styled(Label)({
-  color: 'inherit',
-})
-
-const Image = styled.svg(avatarStyle.image)
-
 /**
  * Avatars are used to represent people and other agents (e.g. bots).
  *
@@ -61,6 +49,7 @@ export const Avatar = forwardRef(function Avatar(
   const {
     __unstable_hideInnerStroke,
     as: asProp,
+    className,
     color = 'gray',
     src,
     title,
@@ -72,12 +61,12 @@ export const Avatar = forwardRef(function Avatar(
     size: sizeProp = 1,
     ...restProps
   } = props
-  const {avatar} = useTheme_v2()
-  const as = ReactIs.isValidElementType(asProp) ? asProp : 'div'
+  const {avatar: avatarTheme} = useTheme_v2()
+  const As = ReactIs.isValidElementType(asProp) ? asProp : 'div'
   const size = useArrayProp(sizeProp)
 
   // @todo: remove this
-  const avatarSize = avatar.sizes[size[0]] || avatar.sizes[0]
+  const avatarSize = avatarTheme.sizes[size[0]] || avatarTheme.sizes[0]
   const _sizeRem = avatarSize.size
   const _radius = _sizeRem / 2
 
@@ -124,30 +113,37 @@ export const Avatar = forwardRef(function Avatar(
   )
 
   return (
-    <Root
-      as={as}
-      data-as={typeof as === 'string' ? as : undefined}
+    <As
+      data-as={typeof As === 'string' ? As : undefined}
       data-ui="Avatar"
       {...restProps}
       $color={color}
       $size={size}
       aria-label={title}
-      data-arrow-position={arrowPosition}
+      className={composeClassNames(
+        className,
+        avatar({
+          arrowPosition,
+          color,
+          size: sizeProp,
+        }),
+      )}
+      // data-arrow-position={arrowPosition}
       data-status={status}
       ref={ref}
       title={title}
     >
-      <Arrow>
+      <span className={avatarArrow()}>
         <svg width="11" height="7" viewBox="0 0 11 7" fill="none">
           <path
             d="M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z"
             fill={color}
           />
         </svg>
-      </Arrow>
+      </span>
 
       {!imageFailed && src && (
-        <Image viewBox={`0 0 ${_sizeRem} ${_sizeRem}`} fill="none">
+        <svg className={avatarImage()} viewBox={`0 0 ${_sizeRem} ${_sizeRem}`} fill="none">
           <defs>
             <pattern id={imageId} patternContentUnits="objectBoundingBox" width="1" height="1">
               <image
@@ -163,7 +159,8 @@ export const Avatar = forwardRef(function Avatar(
           <circle cx={_radius} cy={_radius} r={_radius} fill={`url(#${imageId})`} />
 
           {!__unstable_hideInnerStroke && (
-            <BgStroke
+            <ellipse
+              className={avatarBgStroke()}
               cx={_radius}
               cy={_radius}
               rx={_radius}
@@ -172,26 +169,28 @@ export const Avatar = forwardRef(function Avatar(
             />
           )}
 
-          <Stroke
+          <ellipse
+            className={avatarStroke()}
             cx={_radius}
             cy={_radius}
             rx={_radius}
             ry={_radius}
             vectorEffect="non-scaling-stroke"
           />
-        </Image>
+        </svg>
       )}
 
       {(imageFailed || !src) && initials && (
         <>
-          <Initials>
-            <InitialsLabel forwardedAs="span" size={initialsSize} weight="medium">
+          <span className={avatarInitials()}>
+            <Label as="span" size={initialsSize} style={{color: 'inherit'}} weight="medium">
               {initials}
-            </InitialsLabel>
-          </Initials>
+            </Label>
+          </span>
         </>
       )}
-    </Root>
+    </As>
   )
 })
+
 Avatar.displayName = 'ForwardRef(Avatar)'

package/src/core/primitives/avatar/avatarCounter.tsx

@@ -1,9 +1,9 @@
 import {getTheme_v2} from '@sanity/ui/theme'
 import {forwardRef, useMemo} from 'react'
-import {styled, css} from 'styled-components'
+import {rem, _responsive, ThemeProps} from '../../_compat'
 import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp} from '../../hooks'
-import {rem, _responsive, ThemeProps} from '../../styles'
+import {styled, css} from '../../lib/styled'
 import {AvatarSize} from '../../types'
 import {Label} from '../label'
 

package/src/core/primitives/avatar/avatarStack.tsx

@@ -1,9 +1,9 @@
 import {getTheme_v2} from '@sanity/ui/theme'
 import {Children, cloneElement, forwardRef, isValidElement, useMemo} from 'react'
-import {styled, css} from 'styled-components'
+import {rem, _responsive, ThemeProps} from '../../_compat'
 import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp} from '../../hooks'
-import {rem, _responsive, ThemeProps} from '../../styles'
+import {styled, css} from '../../lib/styled'
 import {AvatarSize} from '../../types'
 import {AvatarCounter} from './avatarCounter'
 

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

@@ -1,6 +1,6 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {rem, _responsive, ThemeProps} from '../../styles'
-import {focusRingStyle} from '../../styles/internal'
+import {rem, _responsive, ThemeProps} from '../../_compat'
+import {focusRingStyle} from '../../_compat/styles/internal'
 import {AvatarRootStyleProps, ResponsiveAvatarSizeStyleProps} from './types'
 
 export const avatarStyle = {

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

@@ -1,4 +1,5 @@
-import {Badge, Flex, Inline} from '@sanity/ui'
+import {Badge, Flex} from '@sanity/ui'
+import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
 import {useSelect} from '@sanity/ui-workshop'
 import {WORKSHOP_BADGE_MODE_OPTIONS} from '../../../__workshop__/constants'
 
@@ -7,21 +8,13 @@ export default function Tones() {
 
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Inline space={2}>
-        <Badge mode={mode}>Default</Badge>
-        <Badge mode={mode} tone="primary">
-          Primary
-        </Badge>
-        <Badge mode={mode} tone="positive">
-          Positive
-        </Badge>
-        <Badge mode={mode} tone="caution">
-          Caution
-        </Badge>
-        <Badge mode={mode} tone="critical">
-          Critical
-        </Badge>
-      </Inline>
+      <Flex align="center" direction="column" gap={2}>
+        {THEME_COLOR_STATE_TONES.map((tone) => (
+          <Badge key={tone} mode={mode} tone={tone}>
+            {tone}
+          </Badge>
+        ))}
+      </Flex>
     </Flex>
   )
 }

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,26 @@ 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' | 'rows' | '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,
@@ -75,6 +44,7 @@ export const Box = forwardRef(function Box(
     marginRight,
     marginBottom,
     marginLeft,
+    maxWidth,
     overflow,
     padding = 0,
     paddingX,
@@ -83,48 +53,69 @@ 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,
+          maxWidth,
+          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

@@ -1,5 +1,6 @@
 import {icons} from '@sanity/icons'
 import {Button, Flex} from '@sanity/ui'
+import {FontTextSize} from '@sanity/ui/theme'
 import {useAction, useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {
   WORKSHOP_BUTTON_MODE_OPTIONS,
@@ -13,10 +14,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')
@@ -31,10 +33,11 @@ export default function ButtonStory() {
     <Flex align="center" height="fill" justify="center">
       <Button
         disabled={disabled}
-        fontSize={fontSize}
+        fontSize={fontSize as FontTextSize}
         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__/stacked.tsx

@@ -1,5 +1,6 @@
 import {icons} from '@sanity/icons'
 import {Box, Button, Card, Container, Flex, Stack} from '@sanity/ui'
+import {FontTextSize} from '@sanity/ui/theme'
 import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
 import {
   WORKSHOP_BUTTON_MODE_OPTIONS,
@@ -33,7 +34,7 @@ export default function StackedStory() {
               {tones.map(([title, tone]) => (
                 <Button
                   disabled={disabled}
-                  fontSize={fontSize}
+                  fontSize={fontSize as FontTextSize}
                   icon={icon && icons[icon]}
                   iconRight={iconRight && icons[iconRight]}
                   justify={justify}