@sanity/ui 3.3.1 → 3.3.3

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

@@ -1,17 +0,0 @@
-import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
-
-import {AvatarSize} from '../../types'
-
-/**
- * @internal
- */
-export interface AvatarRootStyleProps {
-  $color: ThemeColorAvatarColorKey
-}
-
-/**
- * @internal
- */
-export interface ResponsiveAvatarSizeStyleProps {
-  $size: AvatarSize[]
-}

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

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

package/src/core/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/core/primitives/badge/__workshop__/tones.tsx

@@ -1,21 +0,0 @@
-import {Badge, Flex, Inline} 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">
-      <Inline space={2}>
-        {THEME_COLOR_STATE_TONES.map((tone) => (
-          <Badge key={tone} mode={mode} tone={tone}>
-            {tone}
-          </Badge>
-        ))}
-      </Inline>
-    </Flex>
-  )
-}

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

@@ -1,16 +0,0 @@
-/** @jest-environment jsdom */
-
-import {axe} from 'jest-axe'
-
-import {render} from '../../../../test'
-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,70 +0,0 @@
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-
-import {_getArrayProp} from '../../styles'
-import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {BadgeMode, BadgeTone, ElementType, Props} from '../../types'
-import {Box, BoxOwnProps} from '../box'
-import {Text} from '../text'
-import {ResponsiveRadiusProps} from '../types'
-import {badgeStyle} from './styles'
-import {BadgeStyleProps} from './types'
-
-/**
- * @public
- */
-export interface BadgeOwnProps extends BoxOwnProps, ResponsiveRadiusProps {
-  fontSize?: number | number[]
-  /** @deprecated No longer used. */
-  mode?: BadgeMode
-  tone?: BadgeTone
-}
-
-/**
- * @public
- */
-export type BadgeProps<E extends ElementType = 'div'> = Props<BadgeOwnProps, E>
-
-const StyledBadge = styled(Box)<BadgeStyleProps & ResponsiveRadiusStyleProps>(
-  responsiveRadiusStyle,
-  badgeStyle,
-)
-
-const BadgeComponent = forwardRef(function Badge(
-  props: BadgeOwnProps & {as?: ElementType} & React.HTMLProps<HTMLDivElement>,
-  ref,
-) {
-  const {
-    children,
-    fontSize = 1,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    mode: _deprecated_mode,
-    padding = 1,
-    radius = 'full',
-    tone = 'default',
-    ...restProps
-  } = props
-
-  return (
-    <StyledBadge
-      data-ui="Badge"
-      {...restProps}
-      $tone={tone}
-      $radius={_getArrayProp(radius)}
-      padding={_getArrayProp(padding)}
-      ref={ref}
-    >
-      <Text size={fontSize}>{children}</Text>
-    </StyledBadge>
-  )
-})
-BadgeComponent.displayName = 'ForwardRef(Badge)'
-
-/**
- * Badges are used to tag resources.
- *
- * @public
- */
-export const Badge = BadgeComponent as unknown as <E extends ElementType = 'div'>(
-  props: BadgeProps<E>,
-) => React.JSX.Element

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

@@ -1 +0,0 @@
-export * from './badge'

package/src/core/primitives/badge/styles.ts

@@ -1,20 +0,0 @@
-import {CSSObject} from '@sanity/ui/theme'
-
-import {BadgeStyleProps} from './types'
-
-export function badgeStyle(props: BadgeStyleProps): CSSObject {
-  const {$tone} = props
-
-  return {
-    '--card-bg-color': `var(--card-badge-${$tone}-bg-color)`,
-    '--card-fg-color': `var(--card-badge-${$tone}-fg-color)`,
-
-    'backgroundColor': 'var(--card-bg-color)',
-    'cursor': 'default',
-
-    '&:not([hidden])': {
-      display: 'inline-block',
-      verticalAlign: 'top',
-    },
-  }
-}

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

@@ -1,8 +0,0 @@
-import {BadgeTone} from '../../types'
-
-/**
- * @internal
- */
-export interface BadgeStyleProps {
-  $tone: BadgeTone
-}

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

@@ -1,31 +0,0 @@
-import {Box, Flex, Text} from '@sanity/ui'
-import {forwardRef} from 'react'
-
-// A custom component with its own props. When passed to `Box`'s `as` prop, these props are
-// inferred on `Box` itself: `href` is required and `target` is optional, and unknown props
-// are rejected by the type checker.
-const Link = forwardRef(function Link(
-  props: {href: string; target?: string} & Omit<
-    React.HTMLProps<HTMLAnchorElement>,
-    'as' | 'href' | 'target'
-  >,
-  ref: React.ForwardedRef<HTMLAnchorElement>,
-): React.JSX.Element {
-  const {children, ...restProps} = props
-
-  return (
-    <a {...restProps} ref={ref}>
-      {children}
-    </a>
-  )
-})
-
-export default function AsComponentStory() {
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Box as={Link} href="/" padding={4} target="_new">
-        <Text size={1}>As component</Text>
-      </Box>
-    </Flex>
-  )
-}

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

@@ -1,24 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/box',
-  title: 'Box',
-  stories: [
-    {
-      name: 'props',
-      title: 'Props',
-      component: lazy(() => import('./props')),
-    },
-    {
-      name: 'responsive',
-      title: 'Responsive',
-      component: lazy(() => import('./responsive')),
-    },
-    {
-      name: 'as-component',
-      title: 'As component',
-      component: lazy(() => import('./asComponent')),
-    },
-  ],
-})

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__/constants'
-
-export default function PropsStory() {
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 0, 'Props')
-
-  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'
-
-export default function ResponsiveStory() {
-  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}
-        sizing={['content', 'border', 'content', 'border', 'content', 'border', 'content']}
-        style={{outline: '1px solid var(--card-border-color)'}}
-      >
-        <Text align="center" muted>
-          This is a box with responsive props
-        </Text>
-      </Box>
-    </Box>
-  )
-}

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

@@ -1,142 +0,0 @@
-/** @jest-environment jsdom */
-
-import {type ComponentProps} from 'react'
-
-import {render} from '../../../../test'
-import {responsiveGridItemStyle} from '../../styles/internal'
-import {Box} from './box'
-
-jest.mock('../../styles/internal', () => {
-  const actual = jest.requireActual('../../styles/internal')
-
-  return {
-    ...actual,
-    responsiveGridItemStyle: jest.fn(actual.responsiveGridItemStyle),
-  }
-})
-
-describe('<Box />', () => {
-  const mockedResponsiveGridItemStyle = jest.mocked(responsiveGridItemStyle)
-
-  beforeEach(() => {
-    mockedResponsiveGridItemStyle.mockClear()
-  })
-
-  it('uses column when gridColumn is not provided', () => {
-    render(<Box column={3} />)
-
-    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
-      expect.objectContaining({$column: [3]}),
-    )
-  })
-
-  it('uses gridColumn when provided', () => {
-    render(<Box gridColumn={4} />)
-
-    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
-      expect.objectContaining({$column: [4]}),
-    )
-  })
-
-  it('prefers gridColumn over column when both are provided', () => {
-    render(<Box column={3} gridColumn={5} />)
-
-    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
-      expect.objectContaining({$column: [5]}),
-    )
-    expect(mockedResponsiveGridItemStyle).not.toHaveBeenCalledWith(
-      expect.objectContaining({$column: [3]}),
-    )
-  })
-
-  it('supports responsive arrays with gridColumn', () => {
-    const gridColumn: ComponentProps<typeof Box>['gridColumn'] = [2, 'full']
-
-    render(<Box gridColumn={gridColumn} />)
-
-    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
-      expect.objectContaining({$column: [2, 'full']}),
-    )
-  })
-
-  it('uses columnStart when gridColumnStart is not provided', () => {
-    render(<Box columnStart={2} />)
-    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
-      expect.objectContaining({$columnStart: [2]}),
-    )
-  })
-
-  it('prefers gridColumnStart over columnStart when both are provided', () => {
-    render(<Box columnStart={2} gridColumnStart={4} />)
-    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
-      expect.objectContaining({$columnStart: [4]}),
-    )
-    expect(mockedResponsiveGridItemStyle).not.toHaveBeenCalledWith(
-      expect.objectContaining({$columnStart: [2]}),
-    )
-  })
-
-  it('uses columnEnd when gridColumnEnd is not provided', () => {
-    render(<Box columnEnd={3} />)
-    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
-      expect.objectContaining({$columnEnd: [3]}),
-    )
-  })
-
-  it('prefers gridColumnEnd over columnEnd when both are provided', () => {
-    render(<Box columnEnd={3} gridColumnEnd={5} />)
-    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
-      expect.objectContaining({$columnEnd: [5]}),
-    )
-    expect(mockedResponsiveGridItemStyle).not.toHaveBeenCalledWith(
-      expect.objectContaining({$columnEnd: [3]}),
-    )
-  })
-
-  it('uses row when gridRow is not provided', () => {
-    render(<Box row={1} />)
-    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(expect.objectContaining({$row: [1]}))
-  })
-
-  it('prefers gridRow over row when both are provided', () => {
-    render(<Box row={1} gridRow={2} />)
-    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(expect.objectContaining({$row: [2]}))
-    expect(mockedResponsiveGridItemStyle).not.toHaveBeenCalledWith(
-      expect.objectContaining({$row: [1]}),
-    )
-  })
-
-  it('uses rowStart when gridRowStart is not provided', () => {
-    render(<Box rowStart={2} />)
-    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
-      expect.objectContaining({$rowStart: [2]}),
-    )
-  })
-
-  it('prefers gridRowStart over rowStart when both are provided', () => {
-    render(<Box rowStart={2} gridRowStart={4} />)
-    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
-      expect.objectContaining({$rowStart: [4]}),
-    )
-    expect(mockedResponsiveGridItemStyle).not.toHaveBeenCalledWith(
-      expect.objectContaining({$rowStart: [2]}),
-    )
-  })
-
-  it('uses rowEnd when gridRowEnd is not provided', () => {
-    render(<Box rowEnd={3} />)
-    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
-      expect.objectContaining({$rowEnd: [3]}),
-    )
-  })
-
-  it('prefers gridRowEnd over rowEnd when both are provided', () => {
-    render(<Box rowEnd={3} gridRowEnd={5} />)
-    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
-      expect.objectContaining({$rowEnd: [5]}),
-    )
-    expect(mockedResponsiveGridItemStyle).not.toHaveBeenCalledWith(
-      expect.objectContaining({$rowEnd: [3]}),
-    )
-  })
-})

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

@@ -1,154 +0,0 @@
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-
-import {_getArrayProp} from '../../styles'
-import {
-  boxStyle,
-  flexItemStyle,
-  FlexItemStyleProps,
-  responsiveBoxStyle,
-  ResponsiveBoxStyleProps,
-  responsiveGridItemStyle,
-  ResponsiveGridItemStyleProps,
-  responsiveMarginStyle,
-  ResponsiveMarginStyleProps,
-  responsivePaddingStyle,
-  ResponsivePaddingStyleProps,
-} from '../../styles/internal'
-import {ElementType, Props} from '../../types'
-import {
-  ResponsiveBoxProps,
-  ResponsiveFlexItemProps,
-  ResponsiveGridItemProps,
-  ResponsiveMarginProps,
-  ResponsivePaddingProps,
-} from '../types'
-
-/**
- * The props that `Box` adds on top of the element it renders as.
- *
- * @public
- */
-export interface BoxOwnProps
-  extends ResponsiveFlexItemProps,
-    ResponsiveBoxProps,
-    ResponsiveGridItemProps,
-    ResponsiveMarginProps,
-    ResponsivePaddingProps {
-  forwardedAs?: ElementType
-}
-
-/**
- * @public
- */
-export type BoxProps<E extends ElementType = 'div'> = Props<BoxOwnProps, E>
-
-const StyledBox = styled.div<
-  FlexItemStyleProps &
-    ResponsiveBoxStyleProps &
-    ResponsiveGridItemStyleProps &
-    ResponsiveMarginStyleProps &
-    ResponsivePaddingStyleProps
->(
-  boxStyle,
-  flexItemStyle,
-  responsiveBoxStyle,
-  responsiveGridItemStyle,
-  responsiveMarginStyle,
-  responsivePaddingStyle,
-)
-
-const BoxComponent = forwardRef(function Box(
-  props: BoxOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    as: asProp = 'div',
-    gridColumn,
-    column: deprecated_column,
-    gridColumnStart,
-    columnStart: deprecated_columnStart,
-    gridColumnEnd,
-    columnEnd: deprecated_columnEnd,
-    display = 'block',
-    flex,
-    height,
-    margin = 0,
-    marginX,
-    marginY,
-    marginTop,
-    marginRight,
-    marginBottom,
-    marginLeft,
-    overflow,
-    padding = 0,
-    paddingX,
-    paddingY,
-    paddingTop,
-    paddingRight,
-    paddingBottom,
-    paddingLeft,
-    gridRow,
-    row: deprecated_row,
-    gridRowStart,
-    rowStart: deprecated_rowStart,
-    gridRowEnd,
-    rowEnd: deprecated_rowEnd,
-    sizing,
-    ...restProps
-  } = props
-  const column = gridColumn === undefined ? deprecated_column : gridColumn
-  const columnStart = gridColumnStart === undefined ? deprecated_columnStart : gridColumnStart
-  const columnEnd = gridColumnEnd === undefined ? deprecated_columnEnd : gridColumnEnd
-  const row = gridRow === undefined ? deprecated_row : gridRow
-  const rowStart = gridRowStart === undefined ? deprecated_rowStart : gridRowStart
-  const rowEnd = gridRowEnd === undefined ? deprecated_rowEnd : gridRowEnd
-
-  return (
-    <StyledBox
-      data-as={typeof asProp === 'string' ? asProp : undefined}
-      data-ui="Box"
-      {...restProps}
-      $column={_getArrayProp(column)}
-      $columnStart={_getArrayProp(columnStart)}
-      $columnEnd={_getArrayProp(columnEnd)}
-      $display={_getArrayProp(display)}
-      $flex={_getArrayProp(flex)}
-      $height={_getArrayProp(height)}
-      $margin={_getArrayProp(margin)}
-      $marginX={_getArrayProp(marginX)}
-      $marginY={_getArrayProp(marginY)}
-      $marginTop={_getArrayProp(marginTop)}
-      $marginRight={_getArrayProp(marginRight)}
-      $marginBottom={_getArrayProp(marginBottom)}
-      $marginLeft={_getArrayProp(marginLeft)}
-      $overflow={_getArrayProp(overflow)}
-      $padding={_getArrayProp(padding)}
-      $paddingX={_getArrayProp(paddingX)}
-      $paddingY={_getArrayProp(paddingY)}
-      $paddingTop={_getArrayProp(paddingTop)}
-      $paddingRight={_getArrayProp(paddingRight)}
-      $paddingBottom={_getArrayProp(paddingBottom)}
-      $paddingLeft={_getArrayProp(paddingLeft)}
-      $row={_getArrayProp(row)}
-      $rowStart={_getArrayProp(rowStart)}
-      $rowEnd={_getArrayProp(rowEnd)}
-      $sizing={_getArrayProp(sizing)}
-      as={asProp}
-      ref={ref}
-    >
-      {props.children}
-    </StyledBox>
-  )
-})
-BoxComponent.displayName = 'ForwardRef(Box)'
-
-/**
- * The `Box` component is a basic layout wrapper component which provides utility properties
- * for flex, margins and padding.
- *
- * @public
- */
-export const Box = BoxComponent as unknown as <E extends ElementType = 'div'>(
-  props: BoxProps<E>,
-) => React.JSX.Element

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

@@ -1 +0,0 @@
-export * from './box'

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

@@ -1,51 +0,0 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-
-import {Button, Flex, Grid, Stack, Text} from '@sanity/ui'
-
-import {WORKSHOP_BUTTON_TONE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function CustomStory() {
-  const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
-  const len = tones.length
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Stack space={2}>
-        <Grid columns={len} gap={1}>
-          {tones.map(([title, tone]) => (
-            <Button key={tone} mode="ghost" padding={3} tone={tone}>
-              <Stack space={2}>
-                <Text>{title}</Text>
-                <Text muted>Muted</Text>
-                <Text muted>
-                  <a href="#">Link</a>
-                </Text>
-                <Text>
-                  <code>Code</code>
-                </Text>
-                <Text accent>Accent</Text>
-              </Stack>
-            </Button>
-          ))}
-        </Grid>
-        <Grid columns={len} gap={1}>
-          {tones.map(([title, tone]) => (
-            <Button key={tone} mode="default" padding={3} tone={tone}>
-              <Stack space={2}>
-                <Text>{title}</Text>
-                <Text muted>Muted</Text>
-                <Text muted>
-                  <a href="#">Link</a>
-                </Text>
-                <Text>
-                  <code>Code</code>
-                </Text>
-                <Text accent>Accent</Text>
-              </Stack>
-            </Button>
-          ))}
-        </Grid>
-      </Stack>
-    </Flex>
-  )
-}