@sanity/ui 4.0.0-static.9 → 4.0.0

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

@@ -1,69 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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

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

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

@@ -1,21 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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>
-  )
-}

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

@@ -1,222 +0,0 @@
-import {box, type BoxStyleProps} from '@sanity/ui/css'
-
-import type {ComponentType, Props} from '../../types'
-
-/** @public */
-export const DEFAULT_BOX_ELEMENT = 'div'
-
-/** @public */
-export type BoxOwnProps = BoxStyleProps
-
-/** @public */
-export type BoxElementType =
-  | 'a'
-  | 'article'
-  | 'aside'
-  | 'blockquote'
-  | 'body'
-  | 'button'
-  | 'details'
-  | 'div'
-  | 'header'
-  | 'fieldset'
-  | 'figure'
-  | 'figcaption'
-  | 'footer'
-  | 'form'
-  | 'html'
-  | 'iframe'
-  | 'kbd'
-  | 'label'
-  | 'legend'
-  | 'li'
-  | 'main'
-  | 'nav'
-  | 'ol'
-  | 'pre'
-  | 'section'
-  | 'span'
-  | 'summary'
-  | 'table'
-  | 'tbody'
-  | 'td'
-  | 'tfoot'
-  | 'th'
-  | 'thead'
-  | 'tr'
-  | 'ul'
-  | ComponentType
-
-/** @public */
-export type BoxProps<E extends BoxElementType = BoxElementType> = Props<BoxOwnProps, E>
-
-/**
- * The `Box` component is a basic layout wrapper component which provides utility properties
- * for flex, margins and padding.
- *
- * @public
- */
-export function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(
-  props: BoxProps<E>,
-): React.JSX.Element {
-  const {
-    alignItems,
-    as: Element = DEFAULT_BOX_ELEMENT,
-    // autoCols,
-    // autoFlow,
-    // autoRows,
-    border = false,
-    borderTop,
-    borderRight,
-    borderBottom,
-    borderLeft,
-    className,
-    children,
-    // column,
-    // columnStart,
-    // columnEnd,
-    // columns,
-    display = 'block',
-    flex,
-    flexDirection,
-    flexWrap,
-    gap,
-    gapX,
-    gapY,
-    gridAutoColumns,
-    gridAutoFlow,
-    gridAutoRows,
-    gridColumn,
-    gridColumnEnd,
-    gridColumnStart,
-    gridRow,
-    gridRowEnd,
-    gridRowStart,
-    gridTemplateColumns,
-    gridTemplateRows,
-    height,
-    inset,
-    insetBottom,
-    insetLeft,
-    insetRight,
-    insetTop,
-    justifyContent,
-    margin = 0,
-    marginX,
-    marginY,
-    marginTop,
-    marginRight,
-    marginBottom,
-    marginLeft,
-    maxWidth,
-    minHeight = 0,
-    minWidth = 0,
-    muted,
-    outline,
-    overflow,
-    overflowX,
-    overflowY,
-    padding = 0,
-    paddingX,
-    paddingY,
-    paddingTop,
-    paddingRight,
-    paddingBottom,
-    paddingLeft,
-    pointerEvents,
-    position,
-    radius,
-    // row,
-    // rows,
-    // rowStart,
-    // rowEnd,
-    shadow,
-    sizing = 'border',
-    textAlign,
-    width,
-    ...rest
-  } = props as BoxProps<typeof DEFAULT_BOX_ELEMENT>
-
-  return (
-    <Element
-      data-ui="Box"
-      {...rest}
-      className={box({
-        className,
-        alignItems,
-        // autoCols,
-        // autoFlow,
-        // autoRows,
-        border,
-        borderTop,
-        borderRight,
-        borderBottom,
-        borderLeft,
-        // column,
-        // columnStart,
-        // columnEnd,
-        // columns,
-        display,
-        flex,
-        flexDirection,
-        flexWrap,
-        gap,
-        gapX,
-        gapY,
-        gridAutoColumns,
-        gridAutoFlow,
-        gridAutoRows,
-        gridColumn,
-        gridColumnEnd,
-        gridColumnStart,
-        gridRow,
-        gridRowEnd,
-        gridRowStart,
-        gridTemplateColumns,
-        gridTemplateRows,
-        height,
-        inset,
-        insetBottom,
-        insetLeft,
-        insetRight,
-        insetTop,
-        justifyContent,
-        margin,
-        marginX,
-        marginY,
-        marginTop,
-        marginRight,
-        marginBottom,
-        marginLeft,
-        maxWidth,
-        minHeight,
-        minWidth,
-        muted,
-        outline,
-        overflow,
-        overflowX,
-        overflowY,
-        padding,
-        paddingX,
-        paddingY,
-        paddingTop,
-        paddingRight,
-        paddingBottom,
-        paddingLeft,
-        pointerEvents,
-        position,
-        radius,
-        // row,
-        // rows,
-        // rowStart,
-        // rowEnd,
-        shadow,
-        sizing,
-        textAlign,
-        width,
-      })}
-    >
-      {children}
-    </Element>
-  )
-}

package/src/core/primitives/button/__workshop__/custom.tsx

@@ -1,27 +0,0 @@
-import {Button, Flex, Grid, Hotkeys, Stack, Text} from '@sanity/ui'
-import {BUTTON_MODES, ELEMENT_TONES} from '@sanity/ui/theme'
-
-export default function CustomStory(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Stack gap={2}>
-        {BUTTON_MODES.map((mode) => (
-          <Grid gridTemplateColumns={7} gap={1} key={mode}>
-            {ELEMENT_TONES.map((tone) => (
-              <Button key={tone} mode={mode} padding={3} tone={tone}>
-                <Stack gap={2}>
-                  <Text>Text</Text>
-                  <Text muted>Muted</Text>
-                  <Text>
-                    <code>Code</code>
-                  </Text>
-                  <Hotkeys keys={['Cmd', 'C']} />
-                </Stack>
-              </Button>
-            ))}
-          </Grid>
-        ))}
-      </Stack>
-    </Flex>
-  )
-}

package/src/core/primitives/button/__workshop__/customIcons.tsx

@@ -1,30 +0,0 @@
-import {RocketIcon} from '@sanity/icons'
-import {Button, Flex, Inline} from '@sanity/ui'
-
-export default function CustomIconsStory(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Inline gap={1}>
-        <Button fontSize={1} gap={2} icon={RocketIcon} padding={2} text="Rocket" />
-        <Button fontSize={1} gap={2} icon={CustomIcon} padding={2} text="Heart" />
-      </Inline>
-    </Flex>
-  )
-}
-
-function CustomIcon() {
-  return (
-    <svg
-      stroke="currentColor"
-      fill="currentColor"
-      strokeWidth="0"
-      viewBox="0 0 24 24"
-      height="1em"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path fill="none" d="M0 0h24v24H0z"></path>
-      <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"></path>
-    </svg>
-  )
-}

package/src/core/primitives/button/__workshop__/disabled.tsx

@@ -1,54 +0,0 @@
-import {SquareIcon} from '@sanity/icons'
-import {Button, Card, Container, Grid, Stack, Text} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-
-const GAP = 4
-const COLUMNS = 3
-
-const DEFAULT_PROPS = {
-  icon: SquareIcon,
-  iconRight: SquareIcon,
-} as const
-
-export default function DisabledButtonStory(): React.JSX.Element {
-  const muted = useBoolean('Muted', false)
-
-  return (
-    <Card padding={5}>
-      <Container width={2}>
-        <Stack gap={4}>
-          <Grid gridTemplateColumns={COLUMNS} gap={GAP}>
-            <Text size={1} weight="semibold">
-              Default
-            </Text>
-            <Text size={1} weight="semibold">
-              Ghost
-            </Text>
-            <Text size={1} weight="semibold">
-              Bleed
-            </Text>
-          </Grid>
-
-          <Stack gap={2}>
-            <Grid gridTemplateColumns={COLUMNS} gap={GAP}>
-              <Stack gap={2}>
-                <Button {...DEFAULT_PROPS} mode="default" muted={muted} text="Enabled" />
-                <Button {...DEFAULT_PROPS} disabled mode="default" muted={muted} text="Disabled" />
-              </Stack>
-
-              <Stack gap={2}>
-                <Button {...DEFAULT_PROPS} mode="ghost" muted={muted} text="Enabled" />
-                <Button {...DEFAULT_PROPS} disabled mode="ghost" muted={muted} text="Disabled" />
-              </Stack>
-
-              <Stack gap={2}>
-                <Button {...DEFAULT_PROPS} mode="bleed" muted={muted} text="Enabled" />
-                <Button {...DEFAULT_PROPS} mode="bleed" disabled muted={muted} text="Disabled" />
-              </Stack>
-            </Grid>
-          </Stack>
-        </Stack>
-      </Container>
-    </Card>
-  )
-}