@sanity/ui 3.0.2 → 4.0.0-static.2

package/src/core/primitives/arrow/arrow.tsx

@@ -0,0 +1,74 @@
+import {_arrow, _arrowShape, _arrowStroke, _arrowStrokeMask, _arrowSvg, vars} from '@sanity/ui/css'
+import {assignInlineVars} from '@vanilla-extract/dynamic'
+import {useMemo} from 'react'
+
+import type {ComponentType, Props} from '../../types'
+import {compileCommands, getRoundedCommands, type Point} from './cmds'
+
+/** @internal */
+export const DEFAULT_ARROW_ELEMENT = 'div'
+
+/** @internal */
+export type ArrowOwnProps = {
+  width: number
+  height: number
+  radius?: number
+}
+
+/** @internal */
+export type ArrowElementType = 'div' | 'span' | ComponentType
+
+/** @internal */
+export type ArrowProps<E extends ArrowElementType = ArrowElementType> = Props<ArrowOwnProps, E>
+
+/** @internal */
+export function Arrow<E extends ArrowElementType = typeof DEFAULT_ARROW_ELEMENT>(
+  props: ArrowProps<E>,
+): React.JSX.Element {
+  const {
+    as: Element = DEFAULT_ARROW_ELEMENT,
+    width: w,
+    height: h,
+    radius = 0,
+    style,
+    ...rest
+  } = props as ArrowProps<typeof DEFAULT_ARROW_ELEMENT>
+
+  const center = w / 2
+
+  const path = useMemo(() => {
+    const points: Point[] = [
+      {x: 0, y: 0},
+      {x: radius, y: 0, radius},
+      {x: center, y: h - 1, radius},
+      {x: w - radius, y: 0, radius},
+      {x: w, y: 0},
+    ]
+
+    const cmds = getRoundedCommands(points)
+
+    return compileCommands(cmds)
+  }, [center, h, radius, w])
+
+  const strokePath = `${path}`
+  const fillPath = `${path} M ${w} -1 M 0 -1 Z`
+
+  return (
+    <Element
+      {...rest}
+      className={_arrow()}
+      style={{
+        ...style,
+        ...assignInlineVars({[vars.arrow.size]: `${w}px`}),
+      }}
+    >
+      <svg className={_arrowSvg()} width={w} height={w} viewBox={`0 0 ${w} ${w}`}>
+        <mask id="stroke-mask">
+          <rect className={_arrowStrokeMask()} x={0} width={w} height={w} fill="white" />
+        </mask>
+        <path className={_arrowStroke()} d={strokePath} mask="url(#stroke-mask)" />
+        <path className={_arrowShape()} d={fillPath} />
+      </svg>
+    </Element>
+  )
+}

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

@@ -1,10 +1,10 @@
 import {Avatar, Flex} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../__workshop__/constants'
+import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '$workshop'
 
-export default function AsButtonStory() {
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1, 'Props')
+export default function AsButtonStory(): React.JSX.Element {
+  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1)
 
   return (
     <Flex align="center" height="fill" justify="center">

package/src/core/primitives/avatar/__workshop__/index.ts

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import {type WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/avatar',
   title: 'Avatar',
   stories: [
@@ -26,4 +26,6 @@ export default defineScope({
       component: lazy(() => import('./withinMenuItem')),
     },
   ],
-})
+}
+
+export default scope

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

@@ -1,10 +1,10 @@
 import {Avatar, AvatarCounter, AvatarStack, Flex} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../__workshop__/constants'
+import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '$workshop'
 
-export default function StackStory() {
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1, 'Props')
+export default function StackStory(): React.JSX.Element {
+  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1)
 
   return (
     <Flex align="center" height="fill" justify="center">

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

@@ -1,22 +1,14 @@
+import {Avatar, AvatarStack, Box, Button, Container, Flex, Stack, Text} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 
-import {Box} from '../../box'
-import {Button} from '../../button'
-import {Container} from '../../container'
-import {Flex} from '../../flex'
-import {Stack} from '../../stack'
-import {Text} from '../../text'
-import {Avatar} from '../avatar'
-import {AvatarStack} from '../avatarStack'
-
-export default function WithinButtonStory() {
-  const disabled = useBoolean('Disabled', false, 'Props')
+export default function WithinButtonStory(): React.JSX.Element {
+  const disabled = useBoolean('Disabled', false)
 
   return (
     <Container width={1}>
-      <Stack paddingX={4} paddingY={[5, 6, 7]} space={1}>
+      <Stack gap={1} paddingX={4} paddingY={[5, 6, 7]}>
         <Button disabled={disabled} padding={1}>
-          <Flex align="center" gap={3} padding={2}>
+          <Flex align="center" flex={1} gap={3} padding={2}>
             <Box flex={1}>
               <Text size={1}>Default button</Text>
             </Box>
@@ -30,7 +22,7 @@ export default function WithinButtonStory() {
           </Flex>
         </Button>
         <Button disabled={disabled} mode="ghost" padding={1}>
-          <Flex align="center" gap={3} padding={2}>
+          <Flex align="center" flex={1} gap={3} padding={2}>
             <Box flex={1}>
               <Text size={1}>Ghost button</Text>
             </Box>
@@ -44,7 +36,7 @@ export default function WithinButtonStory() {
           </Flex>
         </Button>
         <Button disabled={disabled} mode="bleed" padding={1}>
-          <Flex align="center" gap={3} padding={2}>
+          <Flex align="center" flex={1} gap={3} padding={2}>
             <Box flex={1}>
               <Text size={1}>Bleed button</Text>
             </Box>

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

@@ -1,62 +1,64 @@
+import {
+  Avatar,
+  AvatarStack,
+  Box,
+  Card,
+  Container,
+  Flex,
+  Layer,
+  Menu,
+  MenuItem,
+  Text,
+} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 
-import {Menu, MenuItem} from '../../../components'
-import {Layer} from '../../../utils'
-import {Box} from '../../box'
-import {Card} from '../../card'
-import {Container} from '../../container'
-import {Flex} from '../../flex'
-import {Text} from '../../text'
-import {Avatar} from '../avatar'
-import {AvatarStack} from '../avatarStack'
-
-export default function WithinMenuItemStory() {
-  const disabled = useBoolean('Disabled', false, 'Props')
+export default function WithinMenuItemStory(): React.JSX.Element {
+  const disabled = useBoolean('Disabled', false)
 
   return (
     <Container width={1}>
       <Layer>
         <Box paddingX={4} paddingY={[5, 6, 7]}>
           <Card radius={3} shadow={3}>
-            <Menu space={1}>
+            <Menu gap={1}>
               <MenuItem disabled={disabled} padding={0}>
-                <Flex align="center" gap={2} padding={2}>
-                  <Box flex={1}>
+                <Flex align="center" gap={2} padding={1}>
+                  <Box flex={1} padding={2}>
                     <Text size={1}>Menu item 1</Text>
                   </Box>
                   <Box flex="none">
                     <AvatarStack>
-                      <Avatar color="blue" initials="AB" />
+                      <Avatar color="purple" initials="AB" />
                       <Avatar color="magenta" initials="CD" />
-                      <Avatar color="purple" initials="EF" />
+                      <Avatar color="orange" initials="EF" />
                     </AvatarStack>
                   </Box>
                 </Flex>
               </MenuItem>
               <MenuItem disabled={disabled} padding={0}>
-                <Flex align="center" gap={2} padding={2}>
-                  <Box flex={1}>
+                <Flex align="center" gap={2} padding={1}>
+                  <Box flex={1} padding={2}>
                     <Text size={1}>Menu item 1</Text>
                   </Box>
                   <Box flex="none">
                     <AvatarStack>
-                      <Avatar color="blue" initials="AB" />
+                      {/* <Avatar color="purple" initials="AB" /> */}
                       <Avatar color="magenta" initials="CD" />
-                      <Avatar color="purple" initials="EF" />
+                      <Avatar color="orange" initials="EF" />
                     </AvatarStack>
                   </Box>
                 </Flex>
               </MenuItem>
               <MenuItem disabled={disabled} padding={0}>
-                <Flex align="center" gap={2} padding={2}>
-                  <Box flex={1}>
+                <Flex align="center" gap={2} padding={1}>
+                  <Box flex={1} padding={2}>
                     <Text size={1}>Menu item 1</Text>
                   </Box>
                   <Box flex="none">
                     <AvatarStack>
-                      <Avatar color="blue" initials="AB" />
-                      <Avatar color="magenta" initials="CD" />
-                      <Avatar color="purple" initials="EF" />
+                      <Avatar color="purple" initials="AB" />
+                      {/* <Avatar color="magenta" initials="CD" /> */}
+                      {/* <Avatar color="orange" initials="EF" /> */}
                     </AvatarStack>
                   </Box>
                 </Flex>

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

@@ -1,95 +1,73 @@
-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
- */
-export interface AvatarProps {
+import {
+  avatar,
+  avatarArrow,
+  avatarImage,
+  avatarImageOutline,
+  avatarInitials,
+  type ResponsiveProp,
+} from '@sanity/ui/css'
+import type {AvatarColor, AvatarSize, FontLabelSize} from '@sanity/ui/theme'
+import {useCallback, useEffect, useMemo, useState} from 'react'
+
+import {useResponsiveProp} from '../../hooks/useResponsiveProp'
+import type {ComponentType, Props} from '../../types'
+import {Box} from '../box/box'
+import {Label} from '../label/label'
+import type {AvatarPosition} from './types'
+
+/** @public */
+export const DEFAULT_AVATAR_ELEMENT = 'span'
+
+/** @public */
+export interface AvatarOwnProps {
   /** @beta */
   __unstable_hideInnerStroke?: boolean
   animateArrowFrom?: AvatarPosition
   arrowPosition?: AvatarPosition
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  color?: ThemeColorAvatarColorKey
+  color?: AvatarColor
   initials?: string
   onImageLoadError?: (event: Error) => void
-  size?: AvatarSize | AvatarSize[]
+  size?: ResponsiveProp<AvatarSize>
   src?: string
-  /**
-   * The status of the entity this Avatar represents.
-   * @alpha
-   */
-  status?: AvatarStatus
   title?: string
 }
 
-const StyledAvatar = 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)
+/** @public */
+export type AvatarElementType = 'a' | 'button' | 'div' | 'span' | ComponentType
 
-const InitialsLabel = styled(Label)({
-  color: 'inherit',
-})
-
-const AvatarImage = styled.svg(avatarStyle.image)
+/** @public */
+export type AvatarProps<E extends AvatarElementType = AvatarElementType> = Props<AvatarOwnProps, E>
 
 /**
  * Avatars are used to represent people and other agents (e.g. bots).
  *
  * @public
  */
-export const Avatar = forwardRef(function Avatar(
-  props: AvatarProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
+export function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEMENT>(
+  props: AvatarProps<E>,
+): React.JSX.Element {
   const {
     __unstable_hideInnerStroke,
-    as: asProp,
-    color = 'gray',
+    as: Element = DEFAULT_AVATAR_ELEMENT,
+    className,
+    color = 'magenta',
     src,
     title,
     initials,
     onImageLoadError,
     arrowPosition: arrowPositionProp,
     animateArrowFrom,
-    status = 'online',
     size: sizeProp = 1,
-    ...restProps
-  } = props
-  const {avatar} = 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 _sizeRem = avatarSize.size
-  const _radius = _sizeRem / 2
-
-  const elementId = useId()
+    ...rest
+  } = props as AvatarProps<typeof DEFAULT_AVATAR_ELEMENT>
+
+  const size = useResponsiveProp(sizeProp)
+
   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
@@ -101,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,79 +92,56 @@ export const Avatar = forwardRef(function Avatar(
 
   const initialsSize = useMemo(
     () =>
-      size.map((s) => {
-        if (s === 1) return 1
-        if (s === 2) return 3
-        if (s === 3) return 5
+      Object.values(size).map((s) => {
+        if (s === 1) return 1 satisfies FontLabelSize
+        if (s === 2) return 3 satisfies FontLabelSize
+        if (s === 3) return 5 satisfies FontLabelSize
 
-        return 0
-      }),
+        return 0 satisfies FontLabelSize
+      }) as ResponsiveProp<FontLabelSize>,
     [size],
   )
 
   return (
-    <StyledAvatar
-      as={as}
-      data-as={typeof as === 'string' ? as : undefined}
+    <Element
+      data-hide-inner-stroke={__unstable_hideInnerStroke ? '' : undefined}
       data-ui="Avatar"
-      {...restProps}
-      $color={color}
-      $size={size}
+      {...rest}
       aria-label={title}
+      className={avatar({className, color, size: sizeProp})}
       data-arrow-position={arrowPosition}
-      data-status={status}
-      ref={ref}
+      data-image-error={imageError ? '' : undefined}
       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>
-
-      {!imageFailed && src && (
-        <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" onError={handleImageError} />
-            </pattern>
-          </defs>
-
-          <circle cx={_radius} cy={_radius} r={_radius} fill={`url(#${imageId})`} />
-
-          {!__unstable_hideInnerStroke && (
-            <BgStroke
-              cx={_radius}
-              cy={_radius}
-              rx={_radius}
-              ry={_radius}
-              vectorEffect="non-scaling-stroke"
-            />
-          )}
-
-          <Stroke
-            cx={_radius}
-            cy={_radius}
-            rx={_radius}
-            ry={_radius}
-            vectorEffect="non-scaling-stroke"
-          />
-        </AvatarImage>
-      )}
-
-      {(imageFailed || !src) && initials && (
-        <>
-          <Initials>
-            <InitialsLabel forwardedAs="span" size={initialsSize} weight="medium">
-              {initials}
-            </InitialsLabel>
-          </Initials>
-        </>
+      </span>
+
+      <Box
+        alignItems="center"
+        as="span"
+        className={avatarInitials()}
+        display="flex"
+        justifyContent="center"
+        position="absolute"
+        inset={0}
+      >
+        <Label align="center" as="span" size={initialsSize} weight="medium">
+          {initials}
+        </Label>
+      </Box>
+
+      {src && (
+        <Box className={avatarImage()} inset={0} position="absolute">
+          <img alt={initials} onError={handleImageError} src={src} />
+          <span className={avatarImageOutline()} />
+        </Box>
       )}
-    </StyledAvatar>
+    </Element>
   )
-})
-Avatar.displayName = 'ForwardRef(Avatar)'
+}

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

@@ -1,94 +1,69 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {forwardRef, useMemo} from 'react'
-import {css, styled} from 'styled-components'
+import {avatarCounter, type ResponsiveProp} from '@sanity/ui/css'
+import type {AvatarSize, FontLabelSize} from '@sanity/ui/theme'
+import {useMemo} from 'react'
 
-import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp} from '../../hooks'
-import {_responsive, rem, ThemeProps} from '../../styles'
-import {AvatarSize} from '../../types'
-import {Label} from '../label'
+import {useResponsiveProp} from '../../hooks/useResponsiveProp'
+import type {ComponentType, Props} from '../../types'
+import {Box} from '../box/box'
+import {Label} from '../label/label'
 
-function _responsiveAvatarCounterSizeStyle(props: {$size: AvatarSize[]} & ThemeProps) {
-  const {avatar, media} = getTheme_v2(props.theme)
+/** @public */
+export const DEFAULT_AVATAR_COUNTER_ELEMENT = 'span'
 
-  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;
-    }
-  `
+/** @public */
+export interface AvatarCounterOwnProps {
+  count: number
+  size?: ResponsiveProp<AvatarSize>
 }
 
-const StyledAvatarCounter = styled.div<{$size: AvatarSize[]}>(
-  _responsiveAvatarCounterSizeStyle,
-  _avatarCounterBaseStyle,
-)
+/** @public */
+export type AvatarCounterElementType = 'button' | 'div' | 'span' | ComponentType
 
-/**
- * @public
- */
-export interface AvatarCounterProps {
-  count: number
-  size?: AvatarSize | AvatarSize[]
-  /** @deprecated No longer supported. */
-  tone?: 'navbar'
-}
+/** @public */
+export type AvatarCounterProps<E extends AvatarCounterElementType = AvatarCounterElementType> =
+  Props<AvatarCounterOwnProps, E>
 
-/**
- * @public
- */
-export const AvatarCounter = forwardRef(function AvatarCounter(
-  props: AvatarCounterProps,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const {count, size: sizeProp = 1} = props
-  const size = useArrayProp(sizeProp)
+/** @public */
+export function AvatarCounter<
+  E extends AvatarCounterElementType = typeof DEFAULT_AVATAR_COUNTER_ELEMENT,
+>(props: AvatarCounterProps<E>): React.JSX.Element {
+  const {
+    as = DEFAULT_AVATAR_COUNTER_ELEMENT,
+    className,
+    count,
+    size: sizeProp = 1,
+    ...rest
+  } = props as AvatarCounterProps<typeof DEFAULT_AVATAR_COUNTER_ELEMENT>
+  const size = useResponsiveProp(sizeProp)
 
-  const fontSize = useMemo(
+  const labelSize = useMemo(
     () =>
-      size.map((s) => {
-        if (s === 1) return 1
-        if (s === 2) return 3
-        if (s === 3) return 5
+      Object.values(size).map((s) => {
+        if (s === 1) return 1 satisfies FontLabelSize
+        if (s === 2) return 3 satisfies FontLabelSize
+        if (s === 3) return 5 satisfies FontLabelSize
 
-        return 0
-      }),
+        return 0 satisfies FontLabelSize
+      }) as ResponsiveProp<FontLabelSize>,
     [size],
   )
 
   return (
-    <StyledAvatarCounter $size={size} data-ui="AvatarCounter" ref={ref}>
-      <Label as="span" size={fontSize} weight="medium">
+    <Box
+      data-ui="AvatarCounter"
+      {...rest}
+      alignItems="center"
+      as={as}
+      className={avatarCounter({className, size})}
+      display="flex"
+      flex="none"
+      justifyContent="center"
+      paddingX={2}
+      sizing="border"
+    >
+      <Label align="center" as="span" size={labelSize} weight="medium">
         {count}
       </Label>
-    </StyledAvatarCounter>
+    </Box>
   )
-})
-AvatarCounter.displayName = 'ForwardRef(AvatarCounter)'
+}