@sanity/ui 3.0.0-static.4 → 3.0.0-static.41

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

@@ -0,0 +1,55 @@
+import {Avatar, AvatarStack, Box, Button, Container, Flex, Stack, Text} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
+
+export default function WithinButtonStory(): React.JSX.Element {
+  const disabled = useBoolean('Disabled', false)
+
+  return (
+    <Container width={1}>
+      <Stack gap={1} paddingX={4} paddingY={[5, 6, 7]}>
+        <Button disabled={disabled} padding={1}>
+          <Flex align="center" flex={1} gap={3} padding={2}>
+            <Box flex={1}>
+              <Text size={1}>Default button</Text>
+            </Box>
+            <Box flex="none">
+              <AvatarStack>
+                <Avatar color="blue" initials="AB" />
+                <Avatar color="magenta" initials="CD" />
+                <Avatar color="purple" initials="EF" />
+              </AvatarStack>
+            </Box>
+          </Flex>
+        </Button>
+        <Button disabled={disabled} mode="ghost" padding={1}>
+          <Flex align="center" flex={1} gap={3} padding={2}>
+            <Box flex={1}>
+              <Text size={1}>Ghost button</Text>
+            </Box>
+            <Box flex="none">
+              <AvatarStack>
+                <Avatar color="blue" initials="AB" />
+                <Avatar color="magenta" initials="CD" />
+                <Avatar color="purple" initials="EF" />
+              </AvatarStack>
+            </Box>
+          </Flex>
+        </Button>
+        <Button disabled={disabled} mode="bleed" padding={1}>
+          <Flex align="center" flex={1} gap={3} padding={2}>
+            <Box flex={1}>
+              <Text size={1}>Bleed button</Text>
+            </Box>
+            <Box flex="none">
+              <AvatarStack>
+                <Avatar color="blue" initials="AB" />
+                <Avatar color="magenta" initials="CD" />
+                <Avatar color="purple" initials="EF" />
+              </AvatarStack>
+            </Box>
+          </Flex>
+        </Button>
+      </Stack>
+    </Container>
+  )
+}

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

@@ -0,0 +1,72 @@
+import {
+  Avatar,
+  AvatarStack,
+  Box,
+  Card,
+  Container,
+  Flex,
+  Layer,
+  Menu,
+  MenuItem,
+  Text,
+} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
+
+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 gap={1}>
+              <MenuItem disabled={disabled} padding={0}>
+                <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="purple" initials="AB" />
+                      <Avatar color="magenta" initials="CD" />
+                      <Avatar color="orange" initials="EF" />
+                    </AvatarStack>
+                  </Box>
+                </Flex>
+              </MenuItem>
+              <MenuItem disabled={disabled} padding={0}>
+                <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="purple" initials="AB" /> */}
+                      <Avatar color="magenta" initials="CD" />
+                      <Avatar color="orange" initials="EF" />
+                    </AvatarStack>
+                  </Box>
+                </Flex>
+              </MenuItem>
+              <MenuItem disabled={disabled} padding={0}>
+                <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="purple" initials="AB" />
+                      {/* <Avatar color="magenta" initials="CD" /> */}
+                      {/* <Avatar color="orange" initials="EF" /> */}
+                    </AvatarStack>
+                  </Box>
+                </Flex>
+              </MenuItem>
+            </Menu>
+          </Card>
+        </Box>
+      </Layer>
+    </Container>
+  )
+}

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

@@ -0,0 +1,147 @@
+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
+  color?: AvatarColor
+  initials?: string
+  onImageLoadError?: (event: Error) => void
+  size?: ResponsiveProp<AvatarSize>
+  src?: string
+  title?: string
+}
+
+/** @public */
+export type AvatarElementType = 'a' | 'button' | 'div' | 'span' | ComponentType
+
+/** @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 function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEMENT>(
+  props: AvatarProps<E>,
+): React.JSX.Element {
+  const {
+    __unstable_hideInnerStroke,
+    as: Element = DEFAULT_AVATAR_ELEMENT,
+    className,
+    color = 'magenta',
+    src,
+    title,
+    initials,
+    onImageLoadError,
+    arrowPosition: arrowPositionProp,
+    animateArrowFrom,
+    size: sizeProp = 1,
+    ...rest
+  } = props as AvatarProps<typeof DEFAULT_AVATAR_ELEMENT>
+
+  const size = useResponsiveProp(sizeProp)
+
+  const [arrowPosition, setArrowPosition] = useState<AvatarPosition | undefined>(
+    animateArrowFrom || arrowPositionProp || 'inside',
+  )
+
+  const [imageError, setImageError] = useState<boolean>(false)
+
+  useEffect(() => {
+    if (arrowPosition === arrowPositionProp) return undefined
+
+    // Start animation in the next frame
+    const raf = requestAnimationFrame(() => setArrowPosition(arrowPositionProp))
+
+    return () => cancelAnimationFrame(raf)
+  }, [arrowPosition, arrowPositionProp])
+
+  useEffect(() => {
+    if (src) setImageError(false)
+  }, [src])
+
+  const handleImageError = useCallback(() => {
+    setImageError(true)
+
+    if (onImageLoadError) {
+      onImageLoadError(new Error('Avatar: the image failed to load'))
+    }
+  }, [onImageLoadError])
+
+  const initialsSize = useMemo(
+    () =>
+      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 satisfies FontLabelSize
+      }) as ResponsiveProp<FontLabelSize>,
+    [size],
+  )
+
+  return (
+    <Element
+      data-hide-inner-stroke={__unstable_hideInnerStroke ? '' : undefined}
+      data-ui="Avatar"
+      {...rest}
+      aria-label={title}
+      className={avatar({className, color, size: sizeProp})}
+      data-arrow-position={arrowPosition}
+      data-image-error={imageError ? '' : undefined}
+      title={title}
+    >
+      <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>
+      </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>
+      )}
+    </Element>
+  )
+}

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

@@ -0,0 +1,69 @@
+import {avatarCounter, type ResponsiveProp} from '@sanity/ui/css'
+import type {AvatarSize, FontLabelSize} from '@sanity/ui/theme'
+import {useMemo} from 'react'
+
+import {useResponsiveProp} from '../../hooks/useResponsiveProp'
+import type {ComponentType, Props} from '../../types'
+import {Box} from '../box/box'
+import {Label} from '../label/label'
+
+/** @public */
+export const DEFAULT_AVATAR_COUNTER_ELEMENT = 'span'
+
+/** @public */
+export interface AvatarCounterOwnProps {
+  count: number
+  size?: ResponsiveProp<AvatarSize>
+}
+
+/** @public */
+export type AvatarCounterElementType = 'button' | 'div' | 'span' | ComponentType
+
+/** @public */
+export type AvatarCounterProps<E extends AvatarCounterElementType = AvatarCounterElementType> =
+  Props<AvatarCounterOwnProps, E>
+
+/** @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 labelSize = useMemo(
+    () =>
+      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 satisfies FontLabelSize
+      }) as ResponsiveProp<FontLabelSize>,
+    [size],
+  )
+
+  return (
+    <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>
+    </Box>
+  )
+}

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

@@ -0,0 +1,79 @@
+import {avatarStack, type ResponsiveProp} from '@sanity/ui/css'
+import type {AvatarSize} from '@sanity/ui/theme'
+import {Children, cloneElement, Fragment, isValidElement, type ReactElement} from 'react'
+
+import {useResponsiveProp} from '../../hooks/useResponsiveProp'
+import type {ComponentType, Props} from '../../types'
+import {Box, type BoxOwnProps} from '../box/box'
+import type {AvatarProps} from './avatar'
+import {AvatarCounter} from './avatarCounter'
+
+/** @public */
+export const DEFAULT_AVATAR_STACK_ELEMENT = 'span'
+
+/** @public */
+export type AvatarStackChild = ReactElement<AvatarProps<'div'>> | null | undefined | false
+
+/** @public */
+export type AvatarStackOwnProps = Omit<
+  BoxOwnProps,
+  'align' | 'alignItems' | 'display' | 'justify' | 'justifyContent'
+> & {
+  children: AvatarStackChild | AvatarStackChild[]
+  maxLength?: number
+  size?: ResponsiveProp<AvatarSize>
+}
+
+/** @public */
+export type AvatarStackElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export type AvatarStackProps<E extends AvatarStackElementType = AvatarStackElementType> = Props<
+  AvatarStackOwnProps,
+  E
+>
+
+/** @public */
+export function AvatarStack<E extends AvatarStackElementType = typeof DEFAULT_AVATAR_STACK_ELEMENT>(
+  props: AvatarStackProps<E>,
+): React.JSX.Element {
+  const {
+    as = DEFAULT_AVATAR_STACK_ELEMENT,
+    children: childrenProp,
+    className,
+    maxLength: maxLengthProp = 4,
+    size: sizeProp = 1,
+    ...rest
+  } = props as AvatarStackProps<typeof DEFAULT_AVATAR_STACK_ELEMENT>
+
+  const children = Children.toArray(childrenProp).filter(isValidElement) as ReactElement<
+    AvatarProps<'span'>
+  >[]
+  const maxLength = Math.max(maxLengthProp, 0)
+  const size = useResponsiveProp(sizeProp)
+
+  const len = children.length
+  const visibleCount = maxLength - 1
+  const extraCount = len - visibleCount
+  const visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children
+
+  return (
+    <Box
+      data-ui="AvatarStack"
+      {...rest}
+      alignItems="center"
+      as={as}
+      className={avatarStack({className, size})}
+      display="flex"
+      justifyContent="flex-start"
+    >
+      {len === 0 && <AvatarCounter count={len} size={size} />}
+
+      {len !== 0 && extraCount > 1 && <AvatarCounter count={extraCount} size={size} />}
+
+      {visibleChildren.map((child, childIndex) => (
+        <Fragment key={String(childIndex)}>{cloneElement(child, {size})}</Fragment>
+      ))}
+    </Box>
+  )
+}

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

@@ -0,0 +1,2 @@
+/** @public */
+export type AvatarPosition = 'top' | 'bottom' | 'inside'

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

@@ -0,0 +1,21 @@
+import type {WorkshopScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+const scope: WorkshopScope = {
+  name: 'primitives/badge',
+  title: 'Badge',
+  stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./props')),
+    },
+    {
+      name: 'tones',
+      title: 'Tones',
+      component: lazy(() => import('./tones')),
+    },
+  ],
+}
+
+export default scope

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

@@ -0,0 +1,19 @@
+import {Badge, Flex} from '@sanity/ui'
+import {useAction, useSelect, useText} from '@sanity/ui-workshop'
+
+import {WORKSHOP_BADGE_TONE_OPTIONS, WORKSHOP_SPACE_OPTIONS} from '$workshop'
+
+export default function PropsStory(): React.JSX.Element {
+  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 1)
+  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 1)
+  const tone = useSelect('Tone', WORKSHOP_BADGE_TONE_OPTIONS, 'default')
+  const textProp = useText('Text', 'Label')
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Badge onClick={useAction('onClick')} paddingX={paddingX} paddingY={paddingY} tone={tone}>
+        {textProp}
+      </Badge>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,16 @@
+import {Badge, Flex} from '@sanity/ui'
+import {ELEMENT_TONES} from '@sanity/ui/theme'
+
+export default function Tones(): React.JSX.Element {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Flex align="center" direction="column" gap={2}>
+        {ELEMENT_TONES.map((tone) => (
+          <Badge key={tone} tone={tone}>
+            {tone}
+          </Badge>
+        ))}
+      </Flex>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,16 @@
+import {describe, expect, it} from 'vitest'
+import {axe} from 'vitest-axe'
+
+import {render} from '$test/utils'
+
+import {Badge} from './badge'
+
+describe('atoms/badge', () => {
+  it('should have no violations (axe)', async () => {
+    const lightResult = render(<Badge tone="positive">Label</Badge>, {scheme: 'light'})
+    const darkResult = render(<Badge tone="positive">Label</Badge>, {scheme: 'dark'})
+
+    expect(await axe(lightResult.container.outerHTML)).toHaveNoViolations()
+    expect(await axe(darkResult.container.outerHTML)).toHaveNoViolations()
+  })
+})

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

@@ -0,0 +1,61 @@
+import {
+  badge,
+  type BadgeStyleProps,
+  type FlexStyleProps,
+  type PaddingStyleProps,
+  type RadiusStyleProps,
+} from '@sanity/ui/css'
+
+import type {ComponentType, Props} from '../../types'
+import {Box} from '../box/box'
+import {Text} from '../text/text'
+
+/** @public */
+export const DEFAULT_BADGE_ELEMENT = 'span'
+
+/** @public */
+export type BadgeOwnProps = BadgeStyleProps & FlexStyleProps & PaddingStyleProps & RadiusStyleProps
+
+/** @public */
+export type BadgeElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export type BadgeProps<E extends BadgeElementType = BadgeElementType> = Props<BadgeOwnProps, E>
+
+/**
+ * Badges are used to tag resources.
+ *
+ * @public
+ */
+export function Badge<E extends BadgeElementType = typeof DEFAULT_BADGE_ELEMENT>(
+  props: BadgeProps<E>,
+): React.JSX.Element {
+  const {
+    as = DEFAULT_BADGE_ELEMENT,
+    children,
+    className,
+    flex = 'none',
+    fontSize = 1,
+    padding = 1,
+    radius = 2,
+    tone = 'default',
+    ...rest
+  } = props as BadgeProps<typeof DEFAULT_BADGE_ELEMENT>
+
+  return (
+    <Box
+      data-ui="Badge"
+      {...rest}
+      as={as}
+      className={badge({className, tone})}
+      flex={flex}
+      display="flex"
+      maxWidth="fill"
+      padding={padding}
+      radius={radius}
+      width="min"
+    >
+      <Text size={fontSize}>{children}</Text>
+    </Box>
+  )
+}

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

@@ -0,0 +1,21 @@
+import type {WorkshopScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+const scope: WorkshopScope = {
+  name: 'primitives/box',
+  title: 'Box',
+  stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./props')),
+    },
+    {
+      name: 'responsive',
+      title: 'Responsive',
+      component: lazy(() => import('./responsive')),
+    },
+  ],
+}
+
+export default scope

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

@@ -0,0 +1,20 @@
+import {Box, Card, Text} from '@sanity/ui'
+import {useAction, useSelect} from '@sanity/ui-workshop'
+
+import {WORKSHOP_SPACE_OPTIONS} from '$workshop'
+
+export default function PropsStory(): React.JSX.Element {
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 0)
+
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Card border tone="inherit">
+        <Box onClick={useAction('onClick')} padding={padding}>
+          <Text>
+            Box with <code>padding={padding}</code>
+          </Text>
+        </Box>
+      </Card>
+    </Box>
+  )
+}

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

@@ -0,0 +1,20 @@
+import {Box, Text} from '@sanity/ui'
+import {vars} from '@sanity/ui/css'
+
+export default function ResponsiveStory(): React.JSX.Element {
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Box
+        id="responsive-box"
+        display={['none', 'block', 'none', 'block', 'none', 'block', 'none']}
+        flex={[1, 2, 3, 4, 5, 6, 7]}
+        padding={3}
+        style={{outline: `1px solid ${vars.color.border}`}}
+      >
+        <Text align="center" muted>
+          This is a box with responsive props
+        </Text>
+      </Box>
+    </Box>
+  )
+}