@sanity/ui 3.0.0-static.1 → 3.0.0-static.2

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

@@ -1,18 +1,18 @@
 import {
   avatar,
   avatarArrow,
-  avatarBgStroke,
   avatarImage,
   avatarInitials,
-  avatarStroke,
   composeClassNames,
+  ResponsiveProp,
 } from '@sanity/ui/css'
-import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
-import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'react'
+import {AvatarSize, ThemeColorAvatarColorKey} from '@sanity/ui/theme'
+import {ForwardedRef, forwardRef, useCallback, useEffect, useMemo, useState} from 'react'
 import ReactIs from 'react-is'
+
 import {useArrayProp} from '../../hooks'
-import {useTheme_v2} from '../../theme'
-import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'
+import {AvatarPosition, AvatarStatus, Props} from '../../types'
+import {Box} from '../box'
 import {Label} from '../label'
 
 /**
@@ -23,11 +23,10 @@ export interface AvatarProps {
   __unstable_hideInnerStroke?: boolean
   animateArrowFrom?: AvatarPosition
   arrowPosition?: AvatarPosition
-  as?: React.ElementType | keyof JSX.IntrinsicElements
   color?: ThemeColorAvatarColorKey
   initials?: string
   onImageLoadError?: (event: Error) => void
-  size?: AvatarSize | AvatarSize[]
+  size?: ResponsiveProp<AvatarSize>
   src?: string
   /**
    * The status of the entity this Avatar represents.
@@ -43,8 +42,8 @@ export interface AvatarProps {
  * @public
  */
 export const Avatar = forwardRef(function Avatar(
-  props: AvatarProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
+  props: Props<AvatarProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {
     __unstable_hideInnerStroke,
@@ -61,23 +60,14 @@ export const Avatar = forwardRef(function Avatar(
     size: sizeProp = 1,
     ...restProps
   } = props
-  const {avatar: avatarTheme} = useTheme_v2()
   const As = ReactIs.isValidElementType(asProp) ? asProp : 'div'
   const size = useArrayProp(sizeProp)
 
-  // @todo: remove this
-  const avatarSize = avatarTheme.sizes[size[0]] || avatarTheme.sizes[0]
-  const _sizeRem = avatarSize.size
-  const _radius = _sizeRem / 2
-
-  const elementId = useId()
   const [arrowPosition, setArrowPosition] = useState<AvatarPosition | undefined>(
     animateArrowFrom || arrowPositionProp || 'inside',
   )
 
-  const [imageFailed, setImageFailed] = useState<boolean>(false)
-
-  const imageId = `avatar-image-${elementId}`
+  const [imageError, setImageError] = useState<boolean>(false)
 
   useEffect(() => {
     if (arrowPosition === arrowPositionProp) return undefined
@@ -89,11 +79,11 @@ export const Avatar = forwardRef(function Avatar(
   }, [arrowPosition, arrowPositionProp])
 
   useEffect(() => {
-    if (src) setImageFailed(false)
+    if (src) setImageError(false)
   }, [src])
 
   const handleImageError = useCallback(() => {
-    setImageFailed(true)
+    setImageError(true)
 
     if (onImageLoadError) {
       onImageLoadError(new Error('Avatar: the image failed to load'))
@@ -114,21 +104,14 @@ export const Avatar = forwardRef(function Avatar(
 
   return (
     <As
-      data-as={typeof As === 'string' ? As : undefined}
+      // data-as={typeof As === 'string' ? As : undefined}
+      data-hide-inner-stroke={__unstable_hideInnerStroke ? '' : undefined}
       data-ui="Avatar"
       {...restProps}
-      $color={color}
-      $size={size}
       aria-label={title}
-      className={composeClassNames(
-        className,
-        avatar({
-          arrowPosition,
-          color,
-          size: sizeProp,
-        }),
-      )}
-      // data-arrow-position={arrowPosition}
+      className={composeClassNames(className, avatar({color, size: sizeProp}))}
+      data-arrow-position={arrowPosition}
+      data-image-error={imageError ? '' : undefined}
       data-status={status}
       ref={ref}
       title={title}
@@ -142,52 +125,31 @@ export const Avatar = forwardRef(function Avatar(
         </svg>
       </span>
 
-      {!imageFailed && src && (
-        <svg className={avatarImage()} viewBox={`0 0 ${_sizeRem} ${_sizeRem}`} fill="none">
-          <defs>
-            <pattern id={imageId} patternContentUnits="objectBoundingBox" width="1" height="1">
-              <image
-                href={src}
-                width="1"
-                height="1"
-                // eslint-disable-next-line react/no-unknown-property
-                onError={handleImageError}
-              />
-            </pattern>
-          </defs>
-
-          <circle cx={_radius} cy={_radius} r={_radius} fill={`url(#${imageId})`} />
-
-          {!__unstable_hideInnerStroke && (
-            <ellipse
-              className={avatarBgStroke()}
-              cx={_radius}
-              cy={_radius}
-              rx={_radius}
-              ry={_radius}
-              vectorEffect="non-scaling-stroke"
-            />
-          )}
-
-          <ellipse
-            className={avatarStroke()}
-            cx={_radius}
-            cy={_radius}
-            rx={_radius}
-            ry={_radius}
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
-      )}
-
-      {(imageFailed || !src) && initials && (
-        <>
-          <span className={avatarInitials()}>
-            <Label as="span" size={initialsSize} style={{color: 'inherit'}} weight="medium">
-              {initials}
-            </Label>
-          </span>
-        </>
+      <Box
+        align="center"
+        as="span"
+        className={avatarInitials()}
+        display="flex"
+        justify="center"
+        position="absolute"
+        inset={0}
+      >
+        <Label
+          align="center"
+          as="span"
+          size={initialsSize}
+          style={{color: 'inherit'}}
+          weight="medium"
+        >
+          {initials}
+        </Label>
+      </Box>
+
+      {src && (
+        <Box className={avatarImage()} inset={0} position="absolute">
+          <img alt={initials} onError={handleImageError} src={src} />
+          <span />
+        </Box>
       )}
     </As>
   )

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

@@ -1,61 +1,19 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {forwardRef, useMemo} from 'react'
-import {rem, _responsive, ThemeProps} from '../../_compat'
-import {EMPTY_RECORD} from '../../constants'
+import {avatarCounter, composeClassNames, ResponsiveProp} from '@sanity/ui/css'
+import {AvatarSize} from '@sanity/ui/theme'
+import {ForwardedRef, forwardRef, useMemo} from 'react'
+
 import {useArrayProp} from '../../hooks'
-import {styled, css} from '../../lib/styled'
-import {AvatarSize} from '../../types'
+import {Props} from '../../types'
+import {Box, BoxProps} from '../box'
 import {Label} from '../label'
 
-function _responsiveAvatarCounterSizeStyle(props: {$size: AvatarSize[]} & ThemeProps) {
-  const {avatar, media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$size, (size) => {
-    const avatarSize = avatar.sizes[size]
-
-    if (!avatarSize) return EMPTY_RECORD
-
-    return {
-      borderRadius: rem(avatarSize.size / 2),
-      minWidth: rem(avatarSize.size),
-      height: rem(avatarSize.size),
-    }
-  })
-}
-
-function _avatarCounterBaseStyle(props: ThemeProps) {
-  const {space} = getTheme_v2(props.theme)
-
-  return css`
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    user-select: none;
-    color: inherit;
-    color: var(--card-fg-color);
-    background: var(--card-bg-color);
-    box-shadow:
-      0 0 0 1px var(--card-bg-color),
-      inset 0 0 0 1px var(--card-hairline-hard-color);
-    padding: 0 ${rem(space[2])};
-
-    &:not([hidden]) {
-      display: flex;
-    }
-  `
-}
-
-const Root = styled.div<{$size: AvatarSize[]}>(
-  _responsiveAvatarCounterSizeStyle,
-  _avatarCounterBaseStyle,
-)
-
 /**
  * @public
  */
-export interface AvatarCounterProps {
+export interface AvatarCounterProps
+  extends Omit<BoxProps, 'align' | 'className' | 'display' | 'justify' | 'paddingX' | 'sizing'> {
   count: number
-  size?: AvatarSize | AvatarSize[]
+  size?: ResponsiveProp<AvatarSize>
   /** @deprecated No longer supported. */
   tone?: 'navbar'
 }
@@ -64,10 +22,10 @@ export interface AvatarCounterProps {
  * @public
  */
 export const AvatarCounter = forwardRef(function AvatarCounter(
-  props: AvatarCounterProps,
-  ref: React.Ref<HTMLDivElement>,
+  props: Props<AvatarCounterProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
-  const {count, size: sizeProp = 1} = props
+  const {className, count, size: sizeProp = 1, ...restProps} = props
   const size = useArrayProp(sizeProp)
 
   const fontSize = useMemo(
@@ -83,11 +41,22 @@ export const AvatarCounter = forwardRef(function AvatarCounter(
   )
 
   return (
-    <Root $size={size} data-ui="AvatarCounter" ref={ref}>
-      <Label as="span" size={fontSize} weight="medium">
+    <Box
+      data-ui="AvatarCounter"
+      {...restProps}
+      align="center"
+      className={composeClassNames(className, avatarCounter({size}))}
+      display="flex"
+      justify="center"
+      paddingX={2}
+      ref={ref}
+      sizing="border"
+    >
+      <Label align="center" as="span" size={fontSize} weight="medium">
         {count}
       </Label>
-    </Root>
+    </Box>
   )
 })
+
 AvatarCounter.displayName = 'ForwardRef(AvatarCounter)'

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

@@ -1,53 +1,25 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {Children, cloneElement, forwardRef, isValidElement, useMemo} from 'react'
-import {rem, _responsive, ThemeProps} from '../../_compat'
-import {EMPTY_RECORD} from '../../constants'
+import {avatarStack, composeClassNames, ResponsiveProp} from '@sanity/ui/css'
+import {AvatarSize} from '@sanity/ui/theme'
+import {Children, cloneElement, ForwardedRef, forwardRef, isValidElement, ReactElement} from 'react'
+
 import {useArrayProp} from '../../hooks'
-import {styled, css} from '../../lib/styled'
-import {AvatarSize} from '../../types'
+import {Props} from '../../types'
+import {Box, BoxProps} from '../box'
+import {AvatarProps} from './avatar'
 import {AvatarCounter} from './avatarCounter'
 
-const BASE_STYLES = css`
-  white-space: nowrap;
-
-  & > div {
-    vertical-align: top;
-
-    &:not([hidden]) {
-      display: inline-block;
-    }
-  }
-`
-
-function avatarStackStyle() {
-  return BASE_STYLES
-}
-
-function responsiveAvatarStackSizeStyle(props: {$size: AvatarSize[]} & ThemeProps) {
-  const {avatar, media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$size, (size) => {
-    const avatarSize = avatar.sizes[size]
-
-    if (!avatarSize) return EMPTY_RECORD
-
-    return {
-      '& > div + div': {
-        marginLeft: rem(avatarSize.distance),
-      },
-    }
-  })
-}
-
-const Root = styled.div<{$size: AvatarSize[]}>(responsiveAvatarStackSizeStyle, avatarStackStyle)
+/**
+ * @public
+ */
+export type AvatarStackChild = ReactElement<Props<AvatarProps, 'div'>> | null | undefined | false
 
 /**
  * @public
  */
-export interface AvatarStackProps {
-  children: React.ReactNode
+export interface AvatarStackProps extends Omit<BoxProps, 'align' | 'className' | 'display'> {
+  children: AvatarStackChild | AvatarStackChild[]
   maxLength?: number
-  size?: AvatarSize | AvatarSize[]
+  size?: ResponsiveProp<AvatarSize>
   /** @deprecated No longer supported. */
   tone?: 'navbar'
 }
@@ -56,19 +28,19 @@ export interface AvatarStackProps {
  * @public
  */
 export const AvatarStack = forwardRef(function AvatarStack(
-  props: AvatarStackProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
+  props: Props<AvatarStackProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {
     children: childrenProp,
+    className,
     maxLength: maxLengthProp = 4,
     size: sizeProp = 1,
     ...restProps
   } = props
-  const children = useMemo<React.ReactElement[]>(
-    () => Children.toArray(childrenProp).filter(isValidElement),
-    [childrenProp],
-  )
+  const children = Children.toArray(childrenProp).filter(isValidElement) as ReactElement<
+    Props<AvatarProps, 'div'>
+  >[]
   const maxLength = Math.max(maxLengthProp, 0)
   const size = useArrayProp(sizeProp)
 
@@ -78,23 +50,33 @@ export const AvatarStack = forwardRef(function AvatarStack(
   const visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children
 
   return (
-    <Root data-ui="AvatarStack" {...restProps} ref={ref} $size={size}>
+    <Box
+      data-ui="AvatarStack"
+      {...restProps}
+      align="center"
+      className={composeClassNames(className, avatarStack({size}))}
+      display="flex"
+      ref={ref}
+    >
       {len === 0 && (
-        <div>
+        <Box flex="none">
           <AvatarCounter count={len} size={size} />
-        </div>
+        </Box>
       )}
 
       {len !== 0 && extraCount > 1 && (
-        <div>
+        <Box flex="none">
           <AvatarCounter count={extraCount} size={size} />
-        </div>
+        </Box>
       )}
 
       {visibleChildren.map((child, childIndex) => (
-        <div key={String(childIndex)}>{cloneElement(child, {size})}</div>
+        <Box flex="none" key={String(childIndex)}>
+          {cloneElement(child, {size})}
+        </Box>
       ))}
-    </Root>
+    </Box>
   )
 })
+
 AvatarStack.displayName = 'ForwardRef(AvatarStack)'

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

@@ -1,4 +1,5 @@
 import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
+
 import {AvatarSize} from '../../types'
 
 /**

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

@@ -1,10 +1,11 @@
 import {Badge, Flex} from '@sanity/ui'
 import {useAction, useSelect, useText} from '@sanity/ui-workshop'
+
 import {
   WORKSHOP_BADGE_MODE_OPTIONS,
   WORKSHOP_BADGE_TONE_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
-} from '../../../__workshop__/constants'
+} from '../../../../../workshop/constants'
 
 export default function PropsStory() {
   const mode = useSelect('Mode (deprecated)', WORKSHOP_BADGE_MODE_OPTIONS, 'default', 'Props')

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

@@ -1,7 +1,8 @@
 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'
+
+import {WORKSHOP_BADGE_MODE_OPTIONS} from '../../../../../workshop/constants'
 
 export default function Tones() {
   const mode = useSelect('Mode (deprecated)', WORKSHOP_BADGE_MODE_OPTIONS, 'default', 'Props')

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

@@ -1,6 +1,7 @@
 /** @jest-environment jsdom */
 
 import {axe} from 'jest-axe'
+
 import {render} from '../../../../test'
 import {Badge} from './badge'
 

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

@@ -1,17 +1,18 @@
 import {badge, composeClassNames, RadiusStyleProps} from '@sanity/ui/css'
 import {ForwardedRef, forwardRef} from 'react'
-import {BadgeMode, BadgeTone} from '../../types'
+
+import {BadgeMode, BadgeTone, Props} from '../../types'
 import {Box, BoxProps} from '../box'
-import {Text} from '../text'
+import {Text, TextProps} from '../text'
 
 /**
  * @public
  */
 export interface BadgeProps extends BoxProps, RadiusStyleProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
   fontSize?: number | number[]
   /** @deprecated No longer used. */
   mode?: BadgeMode
+  textAlign?: TextProps['align']
   tone?: BadgeTone
 }
 
@@ -21,7 +22,7 @@ export interface BadgeProps extends BoxProps, RadiusStyleProps {
  * @public
  */
 export const Badge = forwardRef(function Badge(
-  props: BadgeProps & React.HTMLProps<HTMLDivElement>,
+  props: Props<BadgeProps, 'div'>,
   ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -33,6 +34,7 @@ export const Badge = forwardRef(function Badge(
     mode: _deprecated_mode,
     padding = 1,
     radius = 2,
+    textAlign,
     tone = 'default',
     ...restProps
   } = props
@@ -52,8 +54,11 @@ export const Badge = forwardRef(function Badge(
       padding={padding}
       ref={ref}
     >
-      <Text size={fontSize}>{children}</Text>
+      <Text align={textAlign} size={fontSize}>
+        {children}
+      </Text>
     </Box>
   )
 })
+
 Badge.displayName = 'ForwardRef(Badge)'

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

@@ -1,6 +1,7 @@
 import {Box, Card, Text} from '@sanity/ui'
 import {useAction, useSelect} from '@sanity/ui-workshop'
-import {WORKSHOP_SPACE_OPTIONS} from '../../../__workshop__/constants'
+
+import {WORKSHOP_SPACE_OPTIONS} from '../../../../../workshop/constants'
 
 export default function PropsStory() {
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 0, 'Props')

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

@@ -1,14 +1,23 @@
-import {box, BoxStyleProps, composeClassNames, PositionStyleProps} from '@sanity/ui/css'
-import {GapStyleProps} from '@sanity/ui/css'
-import {forwardRef} from 'react'
+import {
+  box,
+  BoxStyleProps,
+  composeClassNames,
+  GapStyleProps,
+  InsetStyleProps,
+  PositionStyleProps,
+} from '@sanity/ui/css'
+import {ForwardedRef, forwardRef} from 'react'
+
+import {Props} from '../../types'
 
 /**
  * @public
  */
-export interface BoxProps extends BoxStyleProps, GapStyleProps, PositionStyleProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  forwardedAs?: React.ElementType | keyof JSX.IntrinsicElements
-}
+export interface BoxProps
+  extends BoxStyleProps,
+    GapStyleProps,
+    InsetStyleProps,
+    PositionStyleProps {}
 
 /**
  * The `Box` component is a basic layout wrapper component which provides utility properties
@@ -17,17 +26,22 @@ export interface BoxProps extends BoxStyleProps, GapStyleProps, PositionStylePro
  * @public
  */
 export const Box = forwardRef(function Box(
-  props: BoxProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows' | 'wrap' | 'width'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
+  props: Props<BoxProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {
     align,
     as: As = 'div',
+    border,
+    borderTop,
+    borderRight,
+    borderBottom,
+    borderLeft,
     className,
     column,
     columnStart,
     columnEnd,
+    columns,
     direction,
     display = 'block',
     flex,
@@ -36,6 +50,10 @@ export const Box = forwardRef(function Box(
     gapY,
     height,
     inset,
+    insetBottom,
+    insetLeft,
+    insetRight,
+    insetTop,
     justify,
     margin = 0,
     marginX,
@@ -55,10 +73,13 @@ export const Box = forwardRef(function Box(
     paddingLeft,
     pointerEvents,
     position,
+    muted,
+    radius,
     row,
+    rows,
     rowStart,
     rowEnd,
-    sizing,
+    sizing = 'border',
     width,
     wrap,
     ...restProps
@@ -66,16 +87,21 @@ export const Box = forwardRef(function Box(
 
   return (
     <As
-      data-as={typeof As === 'string' ? As : undefined}
       data-ui="Box"
       {...restProps}
       className={composeClassNames(
         className,
         box({
           align,
+          border,
+          borderTop,
+          borderRight,
+          borderBottom,
+          borderLeft,
           column,
           columnStart,
           columnEnd,
+          columns,
           direction,
           display,
           flex,
@@ -84,6 +110,10 @@ export const Box = forwardRef(function Box(
           gapY,
           height,
           inset,
+          insetBottom,
+          insetLeft,
+          insetRight,
+          insetTop,
           justify,
           overflow,
           margin,
@@ -94,6 +124,7 @@ export const Box = forwardRef(function Box(
           marginBottom,
           marginLeft,
           maxWidth,
+          muted,
           padding,
           paddingX,
           paddingY,
@@ -103,7 +134,9 @@ export const Box = forwardRef(function Box(
           paddingLeft,
           pointerEvents,
           position,
+          radius,
           row,
+          rows,
           rowStart,
           rowEnd,
           sizing,