@sanity/ui 3.0.2 → 4.0.0-static.2

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

@@ -1,9 +1,9 @@
 import {Card, Flex, Stack, Text} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 
-export default function InteractiveCardStory() {
-  const pressed = useBoolean('Pressed', false, 'Props')
-  const selected = useBoolean('Selected', false, 'Props')
+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">
@@ -16,12 +16,11 @@ export default function InteractiveCardStory() {
           selected={selected}
           tabIndex={0}
         >
-          <Stack space={3}>
+          <Stack gap={3}>
             <Text>
               Text <code>Code</code>
             </Text>
             <Text muted>Muted</Text>
-            <Text accent>Accent</Text>
           </Stack>
         </Card>
       </div>

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

@@ -1,8 +1,6 @@
-import {Box, Card, Flex, Skeleton, Text} from '@sanity/ui'
+import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
 
-import {Stack} from '../../stack'
-
-export default function ListNavigationStory() {
+export default function ListNavigationStory(): React.JSX.Element {
   return (
     <Box height="fill" padding={[3, 4, 5]} sizing="border">
       <Card height="fill" shadow={1}>
@@ -21,7 +19,7 @@ export default function ListNavigationStory() {
 
 function List1() {
   return (
-    <Stack space={1}>
+    <Stack gap={1}>
       <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
         <Preview />
       </Card>
@@ -43,7 +41,7 @@ function List1() {
 
 function List2() {
   return (
-    <Stack space={1}>
+    <Stack gap={1}>
       <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
         <Preview />
       </Card>
@@ -66,8 +64,8 @@ function List2() {
 function Preview() {
   return (
     <Flex align="center" gap={2}>
-      <Skeleton radius="full" style={{width: 33, height: 33}} />
-      <Stack flex={1} space={2}>
+      <Box muted radius="full" style={{width: 33, height: 33}} />
+      <Stack flex={1} gap={2}>
         <Text size={1} weight="medium">
           Preview
         </Text>

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

@@ -7,18 +7,19 @@ import {
   WORKSHOP_RADIUS_OPTIONS,
   WORKSHOP_SHADOW_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
-} from '../../../__workshop__/constants'
+} from '$workshop'
 
-export default function PropsStory() {
-  const as = useSelect('As', WORKSHOP_CARD_AS_OPTIONS, 'div', 'Props')
-  const border = useBoolean('Border', false, 'Props')
-  const checkered = useBoolean('Checkered', false, 'Props')
-  const muted = useBoolean('Muted', false, 'Props')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0, 'Props')
-  const selected = useBoolean('Selected', false, 'Props')
-  const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 0, 'Props')
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, 'default', 'Props')
+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">
@@ -29,12 +30,13 @@ export default function PropsStory() {
         muted={muted}
         onClick={useAction('onClick')}
         padding={padding}
+        pressed={pressed}
         radius={radius}
         selected={selected}
         shadow={shadow}
         tone={tone}
       >
-        <Stack space={3}>
+        <Stack gap={3}>
           <Text size={1}>
             Card with <code>padding={padding}</code>, <code>tone={tone}</code>, and{' '}
             <code>shadow={shadow}</code>.
@@ -43,9 +45,6 @@ export default function PropsStory() {
             Text with {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
             <a href="#">link</a>.
           </Text>
-          <Text accent size={1}>
-            Text with accent color.
-          </Text>
         </Stack>
       </Card>
     </Flex>

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

@@ -1,39 +1,15 @@
 import {EditIcon, PublishIcon} from '@sanity/icons'
-import {Box, Card, Container, Flex, Inline, Stack, Text, ThemeProps, useRootTheme} from '@sanity/ui'
-import {getTheme_v2, ThemeColorStateToneKey} from '@sanity/ui/theme'
+import {Box, Card, Container, Flex, Inline, Stack, Text} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
-import {css, styled} from 'styled-components'
 
-const TextWithTone = styled(Text)<{$tone: ThemeColorStateToneKey}>((
-  props: {
-    $tone: ThemeColorStateToneKey
-  } & ThemeProps,
-) => {
-  const {$tone} = props
-  const {color} = getTheme_v2(props.theme)
-  const tone = color.button.default[$tone]
-
-  return css`
-    &:not([data-selected]) {
-      --card-fg-color: ${tone.enabled.bg};
-      --card-muted-fg-color: ${tone.enabled.bg};
-    }
-
-    [data-ui='Card']:disabled & {
-      --card-fg-color: inherit;
-      --card-muted-fg-color: inherit;
-    }
-  `
-})
-
-export default function SelectedStory() {
-  const disabled = useBoolean('Disabled', false) || false
-  const selected = useBoolean('Selected', false) || false
+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 space={1}>
+        <Stack gap={1}>
           <Card
             __unstable_focusRing
             as="button"
@@ -63,31 +39,23 @@ export default function SelectedStory() {
 }
 
 function Preview({selected}: {selected: boolean}) {
-  const rootTheme = useRootTheme()
-
   return (
     <Flex>
       <Box flex={1}>
         <Text size={1}>Title</Text>
       </Box>
-      <Inline space={3}>
-        <TextWithTone
-          data-selected={selected ? '' : undefined}
-          muted
-          size={1}
-          weight="medium"
-          $tone={rootTheme.tone === 'default' ? 'caution' : 'default'}
-        >
+      <Inline gap={3}>
+        <Text data-selected={selected ? '' : undefined} muted size={1} weight="medium">
           <EditIcon />
-        </TextWithTone>
-        <TextWithTone
+        </Text>
+        <Text
           data-selected={selected ? '' : undefined}
           muted
           size={1}
-          $tone={rootTheme.tone === 'default' ? 'positive' : 'default'}
+          // $tone={rootTheme.tone === 'default' ? 'positive' : 'default'}
         >
           <PublishIcon />
-        </TextWithTone>
+        </Text>
       </Inline>
     </Flex>
   )

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

@@ -3,7 +3,7 @@ import {styled} from 'styled-components'
 
 const StyledCard = styled(Card).attrs({forwardedAs: 'ol'})``
 
-export default function StyledCardStory() {
+export default function StyledCardStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center">
       <StyledCard>

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

@@ -0,0 +1,27 @@
+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,32 +1,16 @@
-import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
-import {isValidElementType} from 'react-is'
-import {styled} from 'styled-components'
+import {card, type CardStyleProps} from '@sanity/ui/css'
+import {useContext} from 'react'
 
-import {useArrayProp} from '../../hooks'
-import {
-  responsiveBorderStyle,
-  ResponsiveBorderStyleProps,
-  responsiveRadiusStyle,
-  ResponsiveRadiusStyleProps,
-  responsiveShadowStyle,
-  ResponsiveShadowStyleProps,
-} from '../../styles/internal'
-import {ThemeColorProvider, useRootTheme} from '../../theme'
-import {CardTone} from '../../types'
-import {Box, BoxProps} from '../box'
-import {ResponsiveBorderProps, ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
-import {cardStyle} from './styles'
-import {CardStyleProps} from './types'
+import type {Props} from '../../types'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
+import {CardContext} from './cardContext'
+import {CardProvider} from './cardProvider'
 
-/**
- * @public
- */
-export interface CardProps
-  extends BoxProps,
-    ResponsiveBorderProps,
-    ResponsiveRadiusProps,
-    ResponsiveShadowProps {
+/** @public */
+export const DEFAULT_CARD_ELEMENT = 'div'
+
+/** @public */
+export interface CardOwnProps extends BoxOwnProps, CardStyleProps {
   /**
    * Do not use in production.
    * @beta
@@ -37,18 +21,17 @@ export interface CardProps
    * @beta
    */
   __unstable_focusRing?: boolean
-  muted?: boolean
+  disabled?: boolean
   pressed?: boolean
-  scheme?: ThemeColorSchemeKey
-  tone?: CardTone
+  selected?: boolean
+  target?: string
 }
 
-const StyledCard = styled(Box)<
-  CardStyleProps &
-    ResponsiveRadiusStyleProps &
-    ResponsiveBorderStyleProps &
-    ResponsiveShadowStyleProps
->(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle)
+/** @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.
@@ -56,61 +39,71 @@ const StyledCard = styled(Box)<
  *
  * @public
  */
-export const Card = forwardRef(function Card(
-  props: CardProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
+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: asProp,
-    border,
-    borderTop,
-    borderRight,
-    borderBottom,
-    borderLeft,
-    muted,
+    as = DEFAULT_CARD_ELEMENT,
+    className,
+    disabled,
     pressed,
     radius = 0,
-    scheme,
+    scheme: schemeProp,
     selected,
-    shadow,
+    style,
     tone: toneProp = 'default',
-    ...restProps
-  } = props
+    ...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
 
-  const as = isValidElementType(asProp) ? asProp : 'div'
-  const rootTheme = useRootTheme()
-  const tone = toneProp === 'inherit' ? rootTheme.tone : toneProp
+  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
+  }
 
-  // todo: Consider adding the wrapper approach for nested cards in which the tones are not changing, avoid unnecessary ThemeColorProvider
-  return (
-    <ThemeColorProvider scheme={scheme} tone={tone}>
-      <StyledCard
-        data-as={typeof as === 'string' ? as : undefined}
-        data-scheme={rootTheme.scheme}
-        data-ui="Card"
-        data-tone={tone}
-        {...restProps}
-        $border={useArrayProp(border)}
-        $borderTop={useArrayProp(borderTop)}
-        $borderRight={useArrayProp(borderRight)}
-        $borderBottom={useArrayProp(borderBottom)}
-        $borderLeft={useArrayProp(borderLeft)}
-        $checkered={checkered}
-        $focusRing={focusRing}
-        $muted={muted}
-        $radius={useArrayProp(radius)}
-        $shadow={useArrayProp(shadow)}
-        $tone={tone}
-        data-checkered={checkered ? '' : undefined}
-        data-pressed={pressed ? '' : undefined}
-        data-selected={selected ? '' : undefined}
-        forwardedAs={as}
-        ref={ref}
-        selected={selected}
-      />
-    </ThemeColorProvider>
+  node = (
+    <CardProvider
+      scheme={scheme ?? 'light'}
+      tone={tone ?? 'default'}
+      unstable_CompatProvider={parent?.unstable_CompatProvider}
+    >
+      {node}
+    </CardProvider>
   )
-})
-Card.displayName = 'ForwardRef(Card)'
+
+  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

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

@@ -0,0 +1,27 @@
+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,11 +1,17 @@
-import {ThemeColorToneKey} from '@sanity/ui/theme'
+import type {CardTone, ColorScheme} from '@sanity/ui/theme'
+import type {ComponentType, ReactNode} from 'react'
 
-/**
- * @internal
- */
-export interface CardStyleProps {
-  $checkered: boolean
-  $focusRing: boolean
-  $muted: boolean
-  $tone: ThemeColorToneKey
+/** @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

@@ -0,0 +1,15 @@
+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,7 +1,7 @@
 import {Box, Checkbox, Flex, Text} from '@sanity/ui'
 import {useCallback, useState} from 'react'
 
-export default function ExampleStory() {
+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), [])

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

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/checkbox',
   title: 'Checkbox',
   stories: [
@@ -10,4 +10,6 @@ export default defineScope({
     {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,20 +1,22 @@
 import {Box, Checkbox, Flex, Text} from '@sanity/ui'
 import {useAction, useBoolean} from '@sanity/ui-workshop'
 
-export default function PropsStory() {
-  const checked = useBoolean('Checked', false, 'Props')
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const indeterminate = useBoolean('Indeterminate', false, 'Props')
+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, 'Props')
+  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}

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

@@ -1,6 +1,6 @@
 import {Box, Checkbox, Flex, Text} from '@sanity/ui'
 
-export default function ReadOnlyStory() {
+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">

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

@@ -1,27 +1,26 @@
-import {Card, Checkbox, Flex, Stack} from '@sanity/ui'
+import {Card, Checkbox, Flex, Stack, Text} from '@sanity/ui'
+import {CARD_TONES} from '@sanity/ui/theme'
 
-export default function MultipleTonesStory() {
+export default function MultipleTonesStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Stack>
-        <Card padding={3} tone="neutral">
-          <Checkbox />
-        </Card>
-        <Card padding={3} tone="primary">
-          <Checkbox />
-        </Card>
-        <Card padding={3} tone="suggest">
-          <Checkbox />
-        </Card>
-        <Card padding={3} tone="positive">
-          <Checkbox />
-        </Card>
-        <Card padding={3} tone="caution">
-          <Checkbox />
-        </Card>
-        <Card padding={3} tone="critical">
-          <Checkbox />
-        </Card>
+      <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>
   )