@sanity/ui 4.0.0-beta.7 → 4.0.0-next.0

package/src/primitives/button/__workshop__/index.ts

@@ -1,61 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/button',
-  title: 'Button',
-  stories: [
-    {
-      name: 'props',
-      title: 'Props',
-      component: lazy(() => import('./Props')),
-    },
-    {
-      name: 'styled-1',
-      title: 'Styled #1',
-      component: lazy(() => import('./Styled1')),
-    },
-    {
-      name: 'stacked',
-      title: 'Stacked',
-      component: lazy(() => import('./Stacked')),
-    },
-    {
-      name: 'custom',
-      title: 'Custom',
-      component: lazy(() => import('./Custom')),
-    },
-    {
-      name: 'mixed-children',
-      title: 'Mixed children',
-      component: lazy(() => import('./MixedChildren')),
-    },
-    {
-      name: 'upload-button',
-      title: 'Upload button',
-      component: lazy(() => import('./UploadButton')),
-    },
-    {
-      name: 'custom-icons',
-      title: 'Custom icons',
-      component: lazy(() => import('./CustomIcons')),
-    },
-    {
-      name: 'disabled',
-      title: 'Disabled',
-      component: lazy(() => import('./Disabled')),
-    },
-    {
-      name: 'text-overflow',
-      title: 'Text overflow',
-      component: lazy(() => import('./TextOverflow')),
-    },
-    {
-      name: 'data-props',
-      title: 'Data props',
-      component: lazy(() => import('./DataProps')),
-    },
-  ],
-}
-
-export default scope

package/src/primitives/button/types.ts

@@ -1,2 +0,0 @@
-/** @public */
-export type ButtonTextAlign = 'left' | 'right' | 'center'

package/src/primitives/card/Card.tsx

@@ -1,124 +0,0 @@
-import {card, CARD_STYLE_PROP_KEYS, type CardStyleProps} from '@sanity/ui-css'
-import type {CardTone} from '@sanity/ui-tokens'
-import {use} from 'react'
-
-import {_splitKeys} from '../../core/_keys'
-import type {Props} from '../../core/types'
-import type {BoxElementType} from '../box/Box'
-import {CardInternalContext} from './CardInternalContext'
-import {CardInternalProvider} from './CardInternalProvider'
-import {CardProvider} from './CardProvider'
-import {useCard} from './useCard'
-
-/** @public */
-export const DEFAULT_CARD_ELEMENT = 'div'
-
-/** @public */
-export interface CardOwnProps extends Omit<CardStyleProps, 'tone'> {
-  /**
-   * Do not use in production.
-   * @beta
-   * @deprecated Use `__unstable_pattern` instead.
-   */
-  __unstable_checkered?: boolean
-  /**
-   * Do not use in production.
-   * @beta
-   */
-  __unstable_focusRing?: boolean
-  disabled?: boolean
-  pressed?: boolean
-  selected?: boolean
-  target?: string
-  tone?: CardTone | 'inherit'
-}
-
-/** @public */
-export type CardElementType = BoxElementType
-
-/** @public */
-export type CardProps<E extends CardElementType = CardElementType> = Props<CardOwnProps, E>
-
-/**
- * The `Card` component acts much like a `Box`, but with a background and foreground color.
- * Components within a `Card` inherit its colors.
- *
- * @public
- */
-export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(
-  props: CardProps<E>,
-): React.JSX.Element {
-  const [
-    {
-      scheme: schemeProp,
-      tone: toneProp = 'inherit',
-      // split style props
-      ...styleProps
-    },
-    // split DOM props
-    domProps,
-  ] = _splitKeys(props as CardProps<typeof DEFAULT_CARD_ELEMENT>, CARD_STYLE_PROP_KEYS)
-
-  const {
-    __unstable_checkered: checkered = false,
-    __unstable_focusRing: focusRing = false,
-    as: As = DEFAULT_CARD_ELEMENT,
-
-    pressed,
-
-    selected,
-    ...restDomProps
-  } = domProps
-
-  const context = useCard()
-  const internalContext = use(CardInternalContext)
-  const tone = toneProp === 'inherit' ? context?.tone : toneProp
-  const scheme = schemeProp ?? context?.scheme
-
-  const styleTone = tone === context.tone && !internalContext?.root ? undefined : tone
-  const styleScheme = scheme === context.scheme && !internalContext?.root ? undefined : scheme
-
-  let node = (
-    <As
-      data-ui="Card"
-      {...restDomProps}
-      className={card({
-        ...styleProps,
-        __unstable_pattern: styleProps.__unstable_pattern ?? (checkered ? 'checkered' : undefined),
-        // If the style scheme is different from the context scheme, then set the tone
-        tone: styleScheme ? tone : styleTone,
-        scheme: styleScheme,
-      })}
-      // Extract the disabled prop without removing it from `...rest` so that the underlying
-      // <button> or <a> has `[data-disabled]` when needed
-      data-disabled={props.disabled ? '' : props['data-disabled']}
-      data-focus-ring={focusRing ? '' : props['data-focus-ring']}
-      data-pressed={pressed ? '' : props['data-pressed']}
-      data-selected={selected ? '' : props['data-selected']}
-    />
-  )
-
-  if (scheme === context.scheme && tone === context.tone) {
-    return node
-  }
-
-  node = (
-    <CardInternalProvider CompatProvider={internalContext?.CompatProvider}>
-      <CardProvider scheme={scheme ?? 'light'} tone={tone ?? 'default'}>
-        {node}
-      </CardProvider>
-    </CardInternalProvider>
-  )
-
-  if (internalContext?.CompatProvider) {
-    const CompatProvider = internalContext.CompatProvider
-
-    return (
-      <CompatProvider scheme={scheme ?? 'light'} tone={tone ?? context.tone}>
-        {node}
-      </CompatProvider>
-    )
-  }
-
-  return node
-}

package/src/primitives/card/CardContext.ts

@@ -1,10 +0,0 @@
-import type {Context} from 'react'
-
-import {createGlobalScopedContext} from '../../core/lib/createGlobalScopedContext'
-import type {CardContextValue} from './types'
-
-/**
- * @internal
- */
-export const CardContext: Context<CardContextValue | null> =
-  createGlobalScopedContext<CardContextValue | null>('@sanity/ui/v4/card', null)

package/src/primitives/card/CardInternalContext.ts

@@ -1,10 +0,0 @@
-import type {Context} from 'react'
-
-import {createGlobalScopedContext} from '../../core/lib/createGlobalScopedContext'
-import type {_CardInternalContextValue} from './types'
-
-/**
- * @internal
- */
-export const CardInternalContext: Context<_CardInternalContextValue | null> =
-  createGlobalScopedContext<_CardInternalContextValue | null>('@sanity/ui/v4/card-internal', null)

package/src/primitives/card/CardInternalProvider.tsx

@@ -1,15 +0,0 @@
-import {type ReactNode} from 'react'
-
-import {CardInternalContext} from './CardInternalContext'
-import type {_CardCompatProviderComponent} from './types'
-
-/** @internal */
-export function CardInternalProvider(props: {
-  children?: ReactNode
-  CompatProvider?: _CardCompatProviderComponent
-  root?: boolean
-}): React.JSX.Element {
-  const {children, root = false, CompatProvider} = props
-
-  return <CardInternalContext value={{root, CompatProvider}}>{children}</CardInternalContext>
-}

package/src/primitives/card/CardProvider.tsx

@@ -1,16 +0,0 @@
-import type {CardTone, ColorScheme} from '@sanity/ui-tokens'
-import {type ReactNode} from 'react'
-
-import {CardContext} from './CardContext'
-import type {_CardCompatProviderComponent} from './types'
-
-/** @public */
-export function CardProvider(props: {
-  children?: ReactNode
-  tone: CardTone
-  scheme: ColorScheme
-}): React.JSX.Element {
-  const {children, tone, scheme} = props
-
-  return <CardContext value={{tone, scheme}}>{children}</CardContext>
-}

package/src/primitives/card/__workshop__/AsButton.tsx

@@ -1,103 +0,0 @@
-import {Box, Card, CARD_TONES, Container, Flex, Grid, Stack, Text} from '@sanity/ui'
-
-export default function AsButtonStory(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Container>
-        <Grid gap={1} gridTemplateColumns={3}>
-          <Box>
-            <Text align="center" size={1} weight="medium">
-              Enabled
-            </Text>
-            <Stack gap={1} marginTop={3}>
-              {CARD_TONES.map((tone) => (
-                <Card
-                  key={tone}
-                  __unstable_focusRing
-                  as="button"
-                  padding={3}
-                  style={{textAlign: 'center'}}
-                  tone={tone}
-                >
-                  <Stack gap={3}>
-                    <Text size={1} weight="medium">
-                      {tone}
-                    </Text>
-                    <Text muted size={1}>
-                      Muted
-                    </Text>
-                    <Text size={1}>
-                      <code>Code</code>
-                    </Text>
-                  </Stack>
-                </Card>
-              ))}
-            </Stack>
-          </Box>
-
-          <Box>
-            <Text align="center" size={1} weight="medium">
-              Disabled
-            </Text>
-            <Stack gap={1} marginTop={3}>
-              {CARD_TONES.map((tone) => (
-                <Card
-                  key={tone}
-                  __unstable_focusRing
-                  as="button"
-                  disabled
-                  padding={3}
-                  style={{textAlign: 'center'}}
-                  tone={tone}
-                >
-                  <Stack gap={3}>
-                    <Text size={1} weight="medium">
-                      {tone}
-                    </Text>
-                    <Text muted size={1}>
-                      Muted
-                    </Text>
-                    <Text size={1}>
-                      <code>Code</code>
-                    </Text>
-                  </Stack>
-                </Card>
-              ))}
-            </Stack>
-          </Box>
-
-          <Box>
-            <Text align="center" size={1} weight="medium">
-              Selected
-            </Text>
-            <Stack gap={1} marginTop={3}>
-              {CARD_TONES.map((tone) => (
-                <Card
-                  key={tone}
-                  __unstable_focusRing
-                  as="button"
-                  padding={3}
-                  selected
-                  style={{textAlign: 'center'}}
-                  tone={tone}
-                >
-                  <Stack gap={3}>
-                    <Text size={1} weight="medium">
-                      {tone}
-                    </Text>
-                    <Text muted size={1}>
-                      Muted
-                    </Text>
-                    <Text size={1}>
-                      <code>Code</code>
-                    </Text>
-                  </Stack>
-                </Card>
-              ))}
-            </Stack>
-          </Box>
-        </Grid>
-      </Container>
-    </Flex>
-  )
-}

package/src/primitives/card/__workshop__/AsComponent.tsx

@@ -1,25 +0,0 @@
-import {Card, Flex, Text} from '@sanity/ui'
-
-function CustomLink(
-  props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
-): React.JSX.Element {
-  const {children, req, ...rest} = props
-
-  return (
-    <a data-required={req} {...rest}>
-      {children}
-    </a>
-  )
-}
-
-export default function AsComponentStory(): React.JSX.Element {
-  const props = {href: '#'}
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Card as={CustomLink} data-as="a" {...props} padding={3} req="1">
-        <Text size={1}>As component</Text>
-      </Card>
-    </Flex>
-  )
-}

package/src/primitives/card/__workshop__/Checkered.tsx

@@ -1,25 +0,0 @@
-import {Card, CARD_TONES, Flex, Stack, Text} from '@sanity/ui'
-
-export default function CheckeredStory(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Stack gap={1}>
-        {CARD_TONES.map((tone) => (
-          <Card
-            key={tone}
-            __unstable_checkered
-            border
-            padding={3}
-            sizing="border"
-            style={{width: 120, height: 60}}
-            tone={tone}
-          >
-            <Text muted size={1}>
-              {tone}
-            </Text>
-          </Card>
-        ))}
-      </Stack>
-    </Flex>
-  )
-}

package/src/primitives/card/__workshop__/DataProps.tsx

@@ -1,25 +0,0 @@
-import {Card, Text} from '@sanity/ui'
-
-import {CardWrapper} from '$workshop'
-
-export default function DataPropsStory(): React.JSX.Element {
-  return (
-    <CardWrapper gap={1}>
-      <Card as="button" data-enabled="" padding={3} radius={4}>
-        <Text size={1}>Card</Text>
-      </Card>
-      <Card as="button" data-hovered="" padding={3} radius={4}>
-        <Text size={1}>Card</Text>
-      </Card>
-      <Card as="button" data-pressed="" padding={3} radius={4}>
-        <Text size={1}>Card</Text>
-      </Card>
-      <Card as="button" data-selected="" padding={3} radius={4}>
-        <Text size={1}>Card</Text>
-      </Card>
-      <Card as="button" data-disabled="" padding={3} radius={4}>
-        <Text size={1}>Card</Text>
-      </Card>
-    </CardWrapper>
-  )
-}

package/src/primitives/card/__workshop__/Interactive.tsx

@@ -1,29 +0,0 @@
-import {Card, Flex, Stack, Text} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-
-export default function InteractiveCardStory(): React.JSX.Element {
-  const pressed = useBoolean('Pressed', false)
-  const selected = useBoolean('Selected', false)
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <div>
-        <Card
-          __unstable_focusRing
-          as="button"
-          padding={3}
-          pressed={pressed}
-          selected={selected}
-          tabIndex={0}
-        >
-          <Stack gap={3}>
-            <Text>
-              Text <code>Code</code>
-            </Text>
-            <Text muted>Muted</Text>
-          </Stack>
-        </Card>
-      </div>
-    </Flex>
-  )
-}

package/src/primitives/card/__workshop__/ListNavigation.tsx

@@ -1,78 +0,0 @@
-import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
-
-export default function ListNavigationStory(): React.JSX.Element {
-  return (
-    <Box height="fill" padding={[3, 4, 5]} sizing="border">
-      <Card height="fill" shadow={1}>
-        <Flex height="fill">
-          <Card flex={1} padding={2}>
-            <List1 />
-          </Card>
-          <Card borderLeft flex={1} padding={2}>
-            <List2 />
-          </Card>
-        </Flex>
-      </Card>
-    </Box>
-  )
-}
-
-function List1() {
-  return (
-    <Stack gap={1}>
-      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
-        <Preview />
-      </Card>
-      <Card __unstable_focusRing as="a" href="#" padding={2} pressed radius={2}>
-        <Preview />
-      </Card>
-      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
-        <Preview />
-      </Card>
-      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
-        <Preview />
-      </Card>
-      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
-        <Preview />
-      </Card>
-    </Stack>
-  )
-}
-
-function List2() {
-  return (
-    <Stack gap={1}>
-      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
-        <Preview />
-      </Card>
-      <Card __unstable_focusRing as="a" href="#" padding={2} pressed radius={2} selected>
-        <Preview />
-      </Card>
-      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
-        <Preview />
-      </Card>
-      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
-        <Preview />
-      </Card>
-      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
-        <Preview />
-      </Card>
-    </Stack>
-  )
-}
-
-function Preview() {
-  return (
-    <Flex align="center" gap={2}>
-      <Box muted radius="full" style={{width: 33, height: 33}} />
-      <Stack flex={1} gap={2}>
-        <Text size={1} weight="medium">
-          Preview
-        </Text>
-        <Text muted size={1}>
-          Preview
-        </Text>
-      </Stack>
-    </Flex>
-  )
-}

package/src/primitives/card/__workshop__/Props.tsx

@@ -1,59 +0,0 @@
-import {
-  BG_PATTERNS,
-  BORDER_WIDTH,
-  Card,
-  CARD_TONES,
-  Flex,
-  RADIUS,
-  SHADOW,
-  SPACE,
-  Stack,
-  Text,
-} from '@sanity/ui'
-import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_CARD_AS_OPTIONS} from '$workshop'
-
-export default function PropsStory(): React.JSX.Element {
-  const as = useSelect('As', WORKSHOP_CARD_AS_OPTIONS, 'div')
-  const border = useBoolean('Border', false)
-  const borderWidth = useSelect('Border Width', BORDER_WIDTH, 0)
-  const muted = useBoolean('Muted', false)
-  const padding = useSelect('Padding', SPACE, 3)
-  const pattern = useSelect('Pattern', BG_PATTERNS, undefined)
-  const pressed = useBoolean('Pressed', false)
-  const radius = useSelect('Radius', RADIUS, 0)
-  const selected = useBoolean('Selected', false)
-  const shadow = useSelect('Shadow', SHADOW, 0)
-  const tone = useSelect('Tone', CARD_TONES, 'default')
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Card
-        __unstable_pattern={pattern}
-        as={as}
-        border={border}
-        borderWidth={borderWidth}
-        muted={muted}
-        padding={padding}
-        pressed={pressed}
-        radius={radius}
-        selected={selected}
-        shadow={shadow}
-        tone={tone}
-        onClick={useAction('onClick')}
-      >
-        <Stack gap={3}>
-          <Text size={1}>
-            Card with <code>padding={padding}</code>, <code>tone={tone}</code>, and{' '}
-            <code>shadow={shadow}</code>.
-          </Text>
-          <Text size={1}>
-            Text with {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-            <a href="#">link</a>.
-          </Text>
-        </Stack>
-      </Card>
-    </Flex>
-  )
-}

package/src/primitives/card/__workshop__/Selected.tsx

@@ -1,62 +0,0 @@
-import {EditIcon, PublishIcon} from '@sanity/icons'
-import {Box, Card, Container, Flex, Inline, Stack, Text} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-
-export default function SelectedStory(): React.JSX.Element {
-  const disabled = useBoolean('Disabled', false)
-  const selected = useBoolean('Selected', false)
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Container width={0}>
-        <Stack gap={1}>
-          <Card
-            __unstable_focusRing
-            as="button"
-            disabled={disabled}
-            padding={3}
-            radius={2}
-            selected={selected}
-          >
-            <Preview selected={selected} />
-          </Card>
-
-          <Card
-            __unstable_focusRing
-            as="button"
-            disabled={disabled}
-            padding={3}
-            radius={2}
-            selected={selected}
-            tone="critical"
-          >
-            <Preview selected={selected} />
-          </Card>
-        </Stack>
-      </Container>
-    </Flex>
-  )
-}
-
-function Preview({selected}: {selected: boolean | undefined}) {
-  return (
-    <Flex>
-      <Box flex={1}>
-        <Text size={1}>Title</Text>
-      </Box>
-      <Inline gap={3}>
-        <Text data-selected={selected ? '' : undefined} muted size={1} weight="medium">
-          <EditIcon />
-        </Text>
-        <Text
-          data-selected={selected ? '' : undefined}
-          muted
-          size={1}
-          // $tone={rootTheme.tone === 'default' ? 'positive' : 'default'}
-        >
-          <PublishIcon />
-        </Text>
-      </Inline>
-    </Flex>
-  )
-}

package/src/primitives/card/__workshop__/Styled.tsx

@@ -1,11 +0,0 @@
-import {Card, Flex, Text} from '@sanity/ui'
-
-export default function StyledCardStory(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Card as="ol">
-        <Text as="li">Styled</Text>
-      </Card>
-    </Flex>
-  )
-}