@sanity/ui 3.0.0-static.8 → 3.0.0

package/src/ui/hooks/usePrefersDark.ts

@@ -1,16 +0,0 @@
-import {useMatchMedia} from './useMatchMedia'
-
-/**
- * Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
- *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
- *
- * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
- * Chrome supports reading the `prefers-color-scheme` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme
- * @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df
- *
- * @public
- */
-export function usePrefersDark(getServerSnapshot = () => false): boolean {
-  return useMatchMedia('(prefers-color-scheme: dark)', getServerSnapshot)
-}

package/src/ui/hooks/usePrefersReducedMotion.ts

@@ -1,16 +0,0 @@
-import {useMatchMedia} from './useMatchMedia'
-
-/**
- * Returns true if motion should be reduced
- *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
- *
- * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
- * Chrome supports reading the `prefers-reduced-motion` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion
- * @example https://gist.github.com/stipsan/0c0f839a27842249cada893e9fb7767b
- *
- * @public
- */
-export function usePrefersReducedMotion(getServerSnapshot = () => false): boolean {
-  return useMatchMedia('(prefers-reduced-motion: reduce)', getServerSnapshot)
-}

package/src/ui/index.ts

@@ -1,9 +0,0 @@
-export * from './_compat'
-export * from './components'
-export * from './helpers'
-export * from './hooks'
-export * from './observers'
-export * from './primitives'
-export * from './StyleTags'
-export * from './types'
-export * from './utils'

package/src/ui/primitives/_selectable/selectable.tsx

@@ -1,31 +0,0 @@
-import {_selectable, composeClassNames, SelectableStyleProps} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
-
-import {Props, SelectableTone} from '../../types'
-import {Box, BoxProps} from '../box'
-
-/** @internal */
-export interface SelectableProps extends BoxProps, SelectableStyleProps {
-  disabled?: boolean
-  href?: string
-  tone?: SelectableTone
-  type?: 'button'
-}
-
-/** @internal */
-export const Selectable = forwardRef(function Selectable(
-  props: Props<SelectableProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {className, radius, tone, ...restProps} = props
-
-  return (
-    <Box
-      {...restProps}
-      className={composeClassNames(className, _selectable({radius, tone}))}
-      ref={ref}
-    />
-  )
-})
-
-Selectable.displayName = 'ForwardRef(Selectable)'

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

@@ -1,14 +0,0 @@
-import {Avatar, Flex} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../../../workshop/constants'
-
-export default function AsButtonStory() {
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Avatar as="button" color="purple" initials="uq" size={size} />
-    </Flex>
-  )
-}

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

@@ -1,25 +0,0 @@
-import {Avatar, AvatarCounter, AvatarStack, Flex} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../../../workshop/constants'
-
-export default function StackStory() {
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <AvatarStack size={size}>
-        <AvatarCounter count={2} />
-        <Avatar color="magenta" initials="uq" />
-        <Avatar
-          color="purple"
-          src="https://avatars3.githubusercontent.com/u/406933?s=400&u=af898b0a50ef2ef1248be32dfa1410ccb55f6f65&v=4"
-        />
-        <Avatar
-          color="blue"
-          src="https://avatars3.githubusercontent.com/u/406933?s=400&u=af898b0a50ef2ef1248be32dfa1410ccb55f6f65&v=4"
-        />
-      </AvatarStack>
-    </Flex>
-  )
-}

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

@@ -1,63 +0,0 @@
-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')
-
-  return (
-    <Container width={1}>
-      <Stack paddingX={4} paddingY={[5, 6, 7]} space={1}>
-        <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/ui/primitives/avatar/__workshop__/withinMenuItem.tsx

@@ -1,72 +0,0 @@
-import {
-  Avatar,
-  AvatarStack,
-  Box,
-  Card,
-  Container,
-  Flex,
-  Layer,
-  Menu,
-  MenuItem,
-  Text,
-} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-
-export default function WithinMenuItemStory() {
-  const disabled = useBoolean('Disabled', false, 'Props')
-
-  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/ui/primitives/avatar/avatar.tsx

@@ -1,158 +0,0 @@
-import {
-  avatar,
-  avatarArrow,
-  avatarImage,
-  avatarInitials,
-  composeClassNames,
-  ResponsiveProp,
-} from '@sanity/ui/css'
-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 {AvatarPosition, AvatarStatus, Props} from '../../types'
-import {Box} from '../box'
-import {Label} from '../label'
-
-/**
- * @public
- */
-export interface AvatarProps {
-  /** @beta */
-  __unstable_hideInnerStroke?: boolean
-  animateArrowFrom?: AvatarPosition
-  arrowPosition?: AvatarPosition
-  color?: ThemeColorAvatarColorKey
-  initials?: string
-  onImageLoadError?: (event: Error) => void
-  size?: ResponsiveProp<AvatarSize>
-  src?: string
-  /**
-   * The status of the entity this Avatar represents.
-   * @alpha
-   */
-  status?: AvatarStatus
-  title?: string
-}
-
-/**
- * Avatars are used to represent people and other agents (e.g. bots).
- *
- * @public
- */
-export const Avatar = forwardRef(function Avatar(
-  props: Props<AvatarProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    __unstable_hideInnerStroke,
-    as: asProp,
-    className,
-    color = 'gray',
-    src,
-    title,
-    initials,
-    onImageLoadError,
-    arrowPosition: arrowPositionProp,
-    animateArrowFrom,
-    status = 'online',
-    size: sizeProp = 1,
-    ...restProps
-  } = props
-  const As = ReactIs.isValidElementType(asProp) ? asProp : 'div'
-  const size = useArrayProp(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(
-    () =>
-      size.map((s) => {
-        if (s === 1) return 1
-        if (s === 2) return 3
-        if (s === 3) return 5
-
-        return 0
-      }),
-    [size],
-  )
-
-  return (
-    <As
-      // data-as={typeof As === 'string' ? As : undefined}
-      data-hide-inner-stroke={__unstable_hideInnerStroke ? '' : undefined}
-      data-ui="Avatar"
-      {...restProps}
-      aria-label={title}
-      className={composeClassNames(className, avatar({color, size: sizeProp}))}
-      data-arrow-position={arrowPosition}
-      data-image-error={imageError ? '' : undefined}
-      data-status={status}
-      ref={ref}
-      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
-        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>
-  )
-})
-
-Avatar.displayName = 'ForwardRef(Avatar)'

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

@@ -1,62 +0,0 @@
-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 {Props} from '../../types'
-import {Box, BoxProps} from '../box'
-import {Label} from '../label'
-
-/**
- * @public
- */
-export interface AvatarCounterProps
-  extends Omit<BoxProps, 'align' | 'className' | 'display' | 'justify' | 'paddingX' | 'sizing'> {
-  count: number
-  size?: ResponsiveProp<AvatarSize>
-  /** @deprecated No longer supported. */
-  tone?: 'navbar'
-}
-
-/**
- * @public
- */
-export const AvatarCounter = forwardRef(function AvatarCounter(
-  props: Props<AvatarCounterProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {className, count, size: sizeProp = 1, ...restProps} = props
-  const size = useArrayProp(sizeProp)
-
-  const fontSize = useMemo(
-    () =>
-      size.map((s) => {
-        if (s === 1) return 1
-        if (s === 2) return 3
-        if (s === 3) return 5
-
-        return 0
-      }),
-    [size],
-  )
-
-  return (
-    <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>
-    </Box>
-  )
-})
-
-AvatarCounter.displayName = 'ForwardRef(AvatarCounter)'

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

@@ -1,82 +0,0 @@
-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 {Props} from '../../types'
-import {Box, BoxProps} from '../box'
-import {AvatarProps} from './avatar'
-import {AvatarCounter} from './avatarCounter'
-
-/**
- * @public
- */
-export type AvatarStackChild = ReactElement<Props<AvatarProps, 'div'>> | null | undefined | false
-
-/**
- * @public
- */
-export interface AvatarStackProps extends Omit<BoxProps, 'align' | 'className' | 'display'> {
-  children: AvatarStackChild | AvatarStackChild[]
-  maxLength?: number
-  size?: ResponsiveProp<AvatarSize>
-  /** @deprecated No longer supported. */
-  tone?: 'navbar'
-}
-
-/**
- * @public
- */
-export const AvatarStack = forwardRef(function AvatarStack(
-  props: Props<AvatarStackProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    children: childrenProp,
-    className,
-    maxLength: maxLengthProp = 4,
-    size: sizeProp = 1,
-    ...restProps
-  } = props
-  const children = Children.toArray(childrenProp).filter(isValidElement) as ReactElement<
-    Props<AvatarProps, 'div'>
-  >[]
-  const maxLength = Math.max(maxLengthProp, 0)
-  const size = useArrayProp(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"
-      {...restProps}
-      align="center"
-      className={composeClassNames(className, avatarStack({size}))}
-      display="flex"
-      ref={ref}
-    >
-      {len === 0 && (
-        <Box flex="none">
-          <AvatarCounter count={len} size={size} />
-        </Box>
-      )}
-
-      {len !== 0 && extraCount > 1 && (
-        <Box flex="none">
-          <AvatarCounter count={extraCount} size={size} />
-        </Box>
-      )}
-
-      {visibleChildren.map((child, childIndex) => (
-        <Box flex="none" key={String(childIndex)}>
-          {cloneElement(child, {size})}
-        </Box>
-      ))}
-    </Box>
-  )
-})
-
-AvatarStack.displayName = 'ForwardRef(AvatarStack)'

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

@@ -1,30 +0,0 @@
-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'
-
-export default function PropsStory() {
-  const mode = useSelect('Mode (deprecated)', WORKSHOP_BADGE_MODE_OPTIONS, 'default', 'Props')
-  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 1, 'Props')
-  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 1, 'Props')
-  const tone = useSelect('Tone', WORKSHOP_BADGE_TONE_OPTIONS, 'default', 'Props')
-  const textProp = useText('Text', 'Label', 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Badge
-        mode={mode}
-        onClick={useAction('onClick')}
-        paddingX={paddingX}
-        paddingY={paddingY}
-        tone={tone}
-      >
-        {textProp}
-      </Badge>
-    </Flex>
-  )
-}

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

@@ -1,21 +0,0 @@
-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'
-
-export default function Tones() {
-  const mode = useSelect('Mode (deprecated)', WORKSHOP_BADGE_MODE_OPTIONS, 'default', 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <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/ui/primitives/badge/badge.tsx

@@ -1,64 +0,0 @@
-import {badge, composeClassNames, RadiusStyleProps} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
-
-import {BadgeMode, BadgeTone, Props} from '../../types'
-import {Box, BoxProps} from '../box'
-import {Text, TextProps} from '../text'
-
-/**
- * @public
- */
-export interface BadgeProps extends BoxProps, RadiusStyleProps {
-  fontSize?: number | number[]
-  /** @deprecated No longer used. */
-  mode?: BadgeMode
-  textAlign?: TextProps['align']
-  tone?: BadgeTone
-}
-
-/**
- * Badges are used to tag resources.
- *
- * @public
- */
-export const Badge = forwardRef(function Badge(
-  props: Props<BadgeProps, 'div'>,
-  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 = 2,
-    textAlign,
-    tone = 'default',
-    ...restProps
-  } = props
-
-  return (
-    <Box
-      data-ui="Badge"
-      {...restProps}
-      className={composeClassNames(
-        className,
-        badge({
-          radius,
-          tone,
-        }),
-      )}
-      display={display}
-      padding={padding}
-      ref={ref}
-    >
-      <Text align={textAlign} size={fontSize}>
-        {children}
-      </Text>
-    </Box>
-  )
-})
-
-Badge.displayName = 'ForwardRef(Badge)'