@sanity/ui 4.0.0-static.9 → 5.0.0-alpha.1

package/src/core/primitives/card/__workshop__/checkered.tsx

@@ -1,26 +0,0 @@
-import {Card, Flex, Stack, Text} from '@sanity/ui'
-import {CARD_TONES} from '@sanity/ui/theme'
-
-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
-            __unstable_checkered
-            border
-            key={tone}
-            padding={3}
-            sizing="border"
-            style={{width: 120, height: 60}}
-            tone={tone}
-          >
-            <Text muted size={1}>
-              {tone}
-            </Text>
-          </Card>
-        ))}
-      </Stack>
-    </Flex>
-  )
-}

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

@@ -1,20 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/card',
-  title: 'Card',
-  stories: [
-    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-    {name: 'styled', title: 'Styled', component: lazy(() => import('./styled'))},
-    {name: 'interactive', title: 'Interactive', component: lazy(() => import('./interactive'))},
-    {name: 'tones', title: 'Tones', component: lazy(() => import('./tones'))},
-    {name: 'as-button', title: 'As button', component: lazy(() => import('./asButton'))},
-    {name: 'list-nav', title: 'List navigation', component: lazy(() => import('./listNavigation'))},
-    {name: 'checkered', title: 'Checkered', component: lazy(() => import('./checkered'))},
-    {name: 'as-component', title: 'As component', component: lazy(() => import('./asComponent'))},
-    {name: 'selected', title: 'Selected', component: lazy(() => import('./selected'))},
-  ],
-}
-
-export default scope

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

@@ -1,52 +0,0 @@
-import {Card, Flex, Stack, Text} from '@sanity/ui'
-import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {
-  WORKSHOP_CARD_AS_OPTIONS,
-  WORKSHOP_CARD_TONE_OPTIONS,
-  WORKSHOP_RADIUS_OPTIONS,
-  WORKSHOP_SHADOW_OPTIONS,
-  WORKSHOP_SPACE_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 checkered = useBoolean('Checkered', false)
-  const muted = useBoolean('Muted', false)
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
-  const pressed = useBoolean('Pressed', false)
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0)
-  const selected = useBoolean('Selected', false)
-  const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 0)
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, 'default')
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Card
-        __unstable_checkered={checkered}
-        as={as}
-        border={border}
-        muted={muted}
-        onClick={useAction('onClick')}
-        padding={padding}
-        pressed={pressed}
-        radius={radius}
-        selected={selected}
-        shadow={shadow}
-        tone={tone}
-      >
-        <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/core/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}) {
-  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/core/primitives/card/__workshop__/styled.tsx

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

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

@@ -1,27 +0,0 @@
-import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
-import {CARD_TONES} from '@sanity/ui/theme'
-
-export default function TonesStory(): React.JSX.Element {
-  return (
-    <Card height="fill" tone="transparent">
-      <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-        <Container width={0}>
-          <Stack gap={3}>
-            {CARD_TONES.map((tone) => (
-              <Card
-                key={tone}
-                padding={3}
-                radius={2}
-                shadow={2}
-                style={{textAlign: 'center'}}
-                tone={tone}
-              >
-                <Text size={1}>{tone}</Text>
-              </Card>
-            ))}
-          </Stack>
-        </Container>
-      </Flex>
-    </Card>
-  )
-}

package/src/core/primitives/card/card.tsx

@@ -1,109 +0,0 @@
-import {card, type CardStyleProps} from '@sanity/ui/css'
-import {useContext} from 'react'
-
-import type {Props} from '../../types'
-import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
-import {CardContext} from './cardContext'
-import {CardProvider} from './cardProvider'
-
-/** @public */
-export const DEFAULT_CARD_ELEMENT = 'div'
-
-/** @public */
-export interface CardOwnProps extends BoxOwnProps, CardStyleProps {
-  /**
-   * Do not use in production.
-   * @beta
-   */
-  __unstable_checkered?: boolean
-  /**
-   * Do not use in production.
-   * @beta
-   */
-  __unstable_focusRing?: boolean
-  disabled?: boolean
-  pressed?: boolean
-  selected?: boolean
-  target?: string
-}
-
-/** @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 {
-    __unstable_checkered: checkered = false,
-    __unstable_focusRing: focusRing = false,
-    as = DEFAULT_CARD_ELEMENT,
-    className,
-    disabled,
-    pressed,
-    radius = 0,
-    scheme: schemeProp,
-    selected,
-    style,
-    tone: toneProp = 'default',
-    ...rest
-  } = props as CardProps<typeof DEFAULT_CARD_ELEMENT>
-
-  const parent = useContext(CardContext)
-  const tone = toneProp === 'inherit' ? parent?.tone : toneProp
-  const scheme = schemeProp === undefined ? parent?.scheme : schemeProp
-
-  let node = (
-    <Box
-      data-ui="Card"
-      {...rest}
-      as={as}
-      className={card({
-        className,
-        scheme: scheme === parent?.scheme ? undefined : scheme,
-        tone,
-      })}
-      data-checkered={checkered ? '' : undefined}
-      data-disabled={disabled ? '' : undefined}
-      data-focus-ring={focusRing ? '' : undefined}
-      data-pressed={pressed ? '' : undefined}
-      data-selected={selected ? '' : undefined}
-      radius={radius}
-      style={style}
-    />
-  )
-
-  if (scheme === parent?.scheme && tone === parent?.tone) {
-    return node
-  }
-
-  node = (
-    <CardProvider
-      scheme={scheme ?? 'light'}
-      tone={tone ?? 'default'}
-      unstable_CompatProvider={parent?.unstable_CompatProvider}
-    >
-      {node}
-    </CardProvider>
-  )
-
-  if (parent?.unstable_CompatProvider) {
-    const CompatProvider = parent.unstable_CompatProvider
-
-    return (
-      <CompatProvider scheme={scheme ?? 'light'} tone={tone ?? parent.tone}>
-        {node}
-      </CompatProvider>
-    )
-  }
-
-  return node
-}

package/src/core/primitives/card/cardContext.ts

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

package/src/core/primitives/card/cardProvider.tsx

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

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

@@ -1,17 +0,0 @@
-import type {CardTone, ColorScheme} from '@sanity/ui/theme'
-import type {ComponentType, ReactNode} from 'react'
-
-/** @internal */
-export type _CardCompatProviderComponent = ComponentType<{
-  children?: ReactNode
-  tone: CardTone | 'inherit'
-  scheme: ColorScheme
-}>
-
-/** @public */
-export interface CardContextValue {
-  tone: CardTone
-  scheme: ColorScheme
-  /** @internal */
-  unstable_CompatProvider?: _CardCompatProviderComponent
-}

package/src/core/primitives/card/useCard.ts

@@ -1,15 +0,0 @@
-import {useContext} from 'react'
-
-import {CardContext} from './cardContext'
-import type {CardContextValue} from './types'
-
-/** @public */
-export function useCard(): CardContextValue {
-  const card = useContext(CardContext)
-
-  if (!card) {
-    throw new Error('useCard(): missing context value')
-  }
-
-  return card
-}

package/src/core/primitives/checkbox/__workshop__/example.tsx

@@ -1,25 +0,0 @@
-import {Box, Checkbox, Flex, Text} from '@sanity/ui'
-import {useCallback, useState} from 'react'
-
-export default function ExampleStory(): React.JSX.Element {
-  const [checked, setChecked] = useState<boolean | undefined>(undefined)
-  const [indeterminate] = useState(checked === undefined)
-  const handleChange = useCallback(() => setChecked((val) => !val), [])
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Flex align="center" as="label">
-        <Checkbox
-          checked={checked || false}
-          indeterminate={indeterminate}
-          onChange={handleChange}
-        />
-        <Box marginLeft={2}>
-          <Text size={1} weight="medium">
-            Toggle
-          </Text>
-        </Box>
-      </Flex>
-    </Flex>
-  )
-}

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

@@ -1,15 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/checkbox',
-  title: 'Checkbox',
-  stories: [
-    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-    {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
-    {name: 'read-only', title: 'Read-only', component: lazy(() => import('./readOnly'))},
-    {name: 'multiple-tones', title: 'Multiple tones', component: lazy(() => import('./tones'))},
-  ],
-}
-
-export default scope

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

@@ -1,35 +0,0 @@
-import {Box, Checkbox, Flex, Text} from '@sanity/ui'
-import {useAction, useBoolean} from '@sanity/ui-workshop'
-
-export default function PropsStory(): React.JSX.Element {
-  const checked = useBoolean('Checked', false)
-  const disabled = useBoolean('Disabled', false)
-  const indeterminate = useBoolean('Indeterminate', false)
-  const invalid = useBoolean('Invalid', false)
-  const onChange = useAction('onChange')
-  const onFocus = useAction('onFocus')
-  const onBlur = useAction('onBlur')
-  const readOnly = useBoolean('Read only', false)
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Flex align="center" as="label">
-        <Checkbox
-          checked={checked}
-          customValidity={invalid ? 'Invalid' : undefined}
-          disabled={disabled}
-          indeterminate={indeterminate}
-          onChange={onChange}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          readOnly={readOnly}
-        />
-        <Box marginLeft={2}>
-          <Text size={1} weight="medium">
-            Toggle
-          </Text>
-        </Box>
-      </Flex>
-    </Flex>
-  )
-}

package/src/core/primitives/checkbox/__workshop__/readOnly.tsx

@@ -1,16 +0,0 @@
-import {Box, Checkbox, Flex, Text} from '@sanity/ui'
-
-export default function ReadOnlyStory(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Flex align="center" as="label">
-        <Checkbox id="checkbox-example" readOnly />
-        <Box marginLeft={2}>
-          <Text size={1} weight="medium">
-            Toggle
-          </Text>
-        </Box>
-      </Flex>
-    </Flex>
-  )
-}

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

@@ -1,27 +0,0 @@
-import {Card, Checkbox, Flex, Stack, Text} from '@sanity/ui'
-import {CARD_TONES} from '@sanity/ui/theme'
-
-export default function MultipleTonesStory(): 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
-            alignItems="center"
-            as="label"
-            display="flex"
-            gap={2}
-            padding={3}
-            radius={3}
-            tone={tone}
-          >
-            <Checkbox />
-            <Text muted size={1}>
-              {tone}
-            </Text>
-          </Card>
-        ))}
-      </Stack>
-    </Flex>
-  )
-}