@sanity/ui 3.0.0-static.2 → 3.0.0-static.21

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

@@ -1,38 +1,15 @@
 import {EditIcon, PublishIcon} from '@sanity/icons'
-import {Box, Card, Container, Flex, Inline, Stack, Text, useRootTheme} from '@sanity/ui'
-import {getTheme_v2, Theme, 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
-  theme: Theme
-}) => {
-  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
+  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"
@@ -62,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__/{allTones.tsx → tones.tsx}

@@ -1,13 +1,13 @@
 import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
 import {THEME_COLOR_CARD_TONES} from '@sanity/ui/theme'
 
-export default function AllTonesStory() {
+export default function TonesStory() {
   return (
     <Card height="fill" tone="transparent">
       <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
         <Container width={0}>
-          <Stack space={3}>
-            {THEME_COLOR_CARD_TONES.filter((tone) => tone !== 'transparent').map((tone) => (
+          <Stack gap={3}>
+            {THEME_COLOR_CARD_TONES.map((tone) => (
               <Card
                 key={tone}
                 padding={3}

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

@@ -1,15 +1,15 @@
-import {card, CardStyleProps, composeClassNames} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
-import {isValidElementType} from 'react-is'
+import {card, type CardStyleProps} from '@sanity/ui/css'
 
-import {ThemeColorProvider, useRootTheme} from '../../_compat'
-import {Props} from '../../types'
-import {Box, BoxProps} from '../box'
+import type {Props} from '../../types'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box'
+import {CardProvider} from './cardProvider'
+import {useCard} from './useCard'
 
-/**
- * @public
- */
-export interface CardProps extends BoxProps, CardStyleProps {
+/** @public */
+export const DEFAULT_CARD_ELEMENT = 'div'
+
+/** @public */
+export interface CardOwnProps extends BoxOwnProps, CardStyleProps {
   /**
    * Do not use in production.
    * @beta
@@ -21,82 +21,86 @@ export interface CardProps extends BoxProps, CardStyleProps {
    */
   __unstable_focusRing?: boolean
   disabled?: boolean
-  href?: string
   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 const Card = forwardRef(function Card(
-  props: Props<CardProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
+export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(props: CardProps<E>) {
   const {
     __unstable_checkered: checkered = false,
     __unstable_focusRing: focusRing = false,
-    as: asProp,
+    as = DEFAULT_CARD_ELEMENT,
     className,
+    disabled,
     pressed,
     radius = 0,
     scheme: schemeProp,
-    selectable,
     selected,
-    shadow,
     style,
-    tone: toneProp,
-    ...restProps
-  } = props
+    tone: toneProp = 'default',
+    ...rest
+  } = props as CardProps<typeof DEFAULT_CARD_ELEMENT>
 
-  const as = isValidElementType(asProp) ? asProp : 'div'
+  const parent = useCard()
+  const tone = toneProp === 'inherit' ? parent?.tone : toneProp
+  const scheme = schemeProp === undefined ? parent?.scheme : schemeProp
 
-  const rootTheme = useRootTheme()
-
-  const tone = toneProp === 'inherit' ? rootTheme.tone : toneProp
-  const scheme = schemeProp === undefined ? rootTheme.scheme : schemeProp
-
-  const node = (
+  let node = (
     <Box
-      // data-as={typeof as === 'string' ? as : undefined}
       data-ui="Card"
-      {...restProps}
+      {...rest}
       as={as}
-      className={composeClassNames(
+      className={card({
         className,
-        card({
-          scheme: scheme === rootTheme.scheme ? undefined : scheme,
-          shadow,
-          tone: tone === rootTheme.tone ? undefined : tone,
-        }),
-      )}
+        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-selectable={selectable ? '' : undefined}
       data-selected={selected ? '' : undefined}
       radius={radius}
-      ref={ref}
-      // selected={selected}
       style={style}
     />
   )
 
-  if (scheme === rootTheme.scheme && tone === rootTheme.tone) {
+  if (scheme === parent?.scheme && tone === parent?.tone) {
     return node
   }
 
-  return (
-    // Render a theme provider around the card if the scheme or tone differs from the root theme.
-    // This is needed for backwards compatibility with the legacy theme API.
-    <ThemeColorProvider scheme={scheme} tone={tone ?? rootTheme.tone}>
+  node = (
+    <CardProvider
+      scheme={scheme ?? 'light'}
+      tone={tone ?? 'default'}
+      unstable_CompatProvider={parent?.unstable_CompatProvider}
+    >
       {node}
-    </ThemeColorProvider>
+    </CardProvider>
   )
-})
 
-Card.displayName = 'ForwardRef(Card)'
+  if (parent?.unstable_CompatProvider) {
+    const CompatProvider = parent.unstable_CompatProvider
+
+    return (
+      <CompatProvider scheme={scheme ?? 'light'} tone={tone ?? parent?.tone ?? 'default'}>
+        {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/context/card', null)

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

@@ -0,0 +1,27 @@
+import type {ThemeColorCardToneKey, ThemeColorSchemeKey} 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: ThemeColorCardToneKey
+  scheme: ThemeColorSchemeKey
+  /** @internal */
+  unstable_CompatProvider?: _CardCompatProviderComponent
+}) {
+  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/index.ts

@@ -1,2 +1,4 @@
 export * from './card'
+export * from './cardProvider'
 export * from './types'
+export * from './useCard'

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

@@ -1,12 +1,28 @@
-import {ThemeColorToneKey} from '@sanity/ui/theme'
+import type {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import type {ComponentType, ReactNode} from 'react'
 
 /**
  * @internal
- * @deprecated
+ * @deprecated Use `CardStyleProps` from `@sanity/ui/css` instead.
  */
 export interface CardStyleProps {
   $checkered: boolean
   $focusRing: boolean
   $muted: boolean
-  $tone: ThemeColorToneKey
+  $tone: ThemeColorCardToneKey
+}
+
+/** @internal */
+export type _CardCompatProviderComponent = ComponentType<{
+  children?: ReactNode
+  tone: ThemeColorCardToneKey
+  scheme: ThemeColorSchemeKey
+}>
+
+/** @public */
+export interface CardContextValue {
+  tone: ThemeColorCardToneKey
+  scheme: ThemeColorSchemeKey
+  /** @internal */
+  unstable_CompatProvider?: _CardCompatProviderComponent
 }

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

@@ -0,0 +1,9 @@
+import {useContext} from 'react'
+
+import {CardContext} from './cardContext'
+import type {CardContextValue} from './types'
+
+/** @public */
+export function useCard(): CardContextValue | null {
+  return useContext(CardContext)
+}

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

@@ -2,19 +2,21 @@ 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')
+  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__/tones.tsx

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

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

@@ -1,37 +1,48 @@
 import {CheckmarkIcon, RemoveIcon} from '@sanity/icons'
-import {checkbox, checkboxInput, composeClassNames} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef} from 'react'
+import {checkbox, checkboxInput, checkboxPresentation} from '@sanity/ui/css'
+import {useEffect, useImperativeHandle, useRef} from 'react'
 
 import {useCustomValidity} from '../../hooks'
-import {Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface CheckboxProps {
+/** @public */
+export const DEFAULT_CHECKBOX_ELEMENT = 'input'
+
+/** @public */
+export type CheckboxOwnProps = {
   indeterminate?: boolean
   customValidity?: string
 }
 
+/** @public */
+export type CheckboxElementType = 'input' | ComponentType
+
+/** @public */
+export type CheckboxProps<E extends CheckboxElementType = CheckboxElementType> = Props<
+  CheckboxOwnProps,
+  E
+>
+
 /**
  * Checkboxes allow the user to select one or more items from a set.
  *
  * @public
  */
-export const Checkbox = forwardRef(function Checkbox(
-  props: Props<CheckboxProps, 'input'>,
-  forwardedRef: ForwardedRef<HTMLInputElement>,
+export function Checkbox<E extends CheckboxElementType = typeof DEFAULT_CHECKBOX_ELEMENT>(
+  props: CheckboxProps<E>,
 ) {
   const {
+    as: Element = DEFAULT_CHECKBOX_ELEMENT,
     checked,
     className,
     disabled,
     indeterminate,
     customValidity,
     readOnly,
+    ref: forwardedRef,
     style,
-    ...restProps
-  } = props
+    ...rest
+  } = props as CheckboxProps<typeof DEFAULT_CHECKBOX_ELEMENT>
 
   const ref = useRef<HTMLInputElement | null>(null)
 
@@ -50,25 +61,21 @@ export const Checkbox = forwardRef(function Checkbox(
   useCustomValidity(ref, customValidity)
 
   return (
-    <span className={composeClassNames(className, checkbox())} data-ui="Checkbox" style={style}>
-      <input
-        {...restProps}
+    <span className={checkbox({className})} data-ui="Checkbox" style={style}>
+      <Element
+        {...rest}
         checked={checked}
-        className={composeClassNames(className, checkboxInput())}
-        data-disabled={disabled ? '' : undefined}
-        data-read-only={!disabled && readOnly ? '' : undefined}
-        data-error={customValidity ? '' : undefined}
+        className={checkboxInput()}
+        data-invalid={customValidity ? '' : undefined}
         disabled={disabled || readOnly}
         type="checkbox"
         readOnly={readOnly}
         ref={ref}
       />
-      <span>
+      <span className={checkboxPresentation()}>
         <CheckmarkIcon />
         <RemoveIcon />
       </span>
     </span>
   )
-})
-
-Checkbox.displayName = 'ForwardRef(Checkbox)'
+}

package/src/core/primitives/code/__workshop__/opticalAlignment.tsx

@@ -4,7 +4,7 @@ import {Box, Card, Code, Flex, Stack} from '@sanity/ui'
 export default function OpticalAlignment() {
   return (
     <Box padding={[4, 5, 6]}>
-      <Stack space={1}>
+      <Stack gap={1}>
         <Flex>
           <Card padding={0} scheme="dark">
             <Code size={4}>Hamburgefonstiv M</Code>

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

@@ -1,15 +1,12 @@
 import {Box, Code} from '@sanity/ui'
 import {useSelect, useText} from '@sanity/ui-workshop'
 
-import {
-  WORKSHOP_CODE_LANGUAGE_OPTIONS,
-  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
-} from '../../../../../workshop/constants'
+import {WORKSHOP_CODE_LANGUAGE_OPTIONS, WORKSHOP_TEXT_FONT_SIZE_OPTIONS} from '$workshop'
 
 export default function PropsStory() {
-  const code = useText('Code', `console.log('Hello, world')`, 'Props')
-  const language = useSelect('Language', WORKSHOP_CODE_LANGUAGE_OPTIONS, 'typescript', 'Props')
-  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 1, 'Props')
+  const code = useText('Code', `console.log('Hello, world')`)
+  const language = useSelect('Language', WORKSHOP_CODE_LANGUAGE_OPTIONS, 'typescript')
+  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 1)
 
   return (
     <Box padding={[4, 5, 6]}>

package/src/core/primitives/code/code.tsx

@@ -1,49 +1,46 @@
-import {code, composeClassNames, FontStyleProps} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef, lazy, Suspense} from 'react'
+import {code, type CodeStyleProps, type ResponsiveProp} from '@sanity/ui/css'
+import type {FontCodeSize} from '@sanity/ui/theme'
+import {lazy, Suspense} from 'react'
 
-import {Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 
 const LazyRefractor = lazy(() => import('./refractor'))
 
-/**
- * @public
- */
-export interface CodeProps extends Omit<FontStyleProps, 'align'> {
+/** @public */
+export const DEFAULT_CODE_ELEMENT = 'pre'
+
+/** @public */
+export type CodeOwnProps = CodeStyleProps & {
   /** Define the language to use for syntax highlighting. */
   language?: string
-  size?: number | number[]
+  size?: ResponsiveProp<FontCodeSize>
 }
 
-/**
- * @public
- */
-export const Code = forwardRef(function Code(
-  props: Props<CodeProps, 'pre'>,
-  ref: ForwardedRef<HTMLPreElement>,
-) {
+/** @public */
+export type CodeElementType = 'div' | 'pre' | ComponentType
+
+/** @public */
+export type CodeProps<E extends CodeElementType = CodeElementType> = Props<CodeOwnProps, E>
+
+/** @public */
+export function Code<E extends CodeElementType = typeof DEFAULT_CODE_ELEMENT>(props: CodeProps<E>) {
   const {
-    as: As = 'pre',
+    as: Element = DEFAULT_CODE_ELEMENT,
     children,
     className,
     language: languageProp,
-    size = 1,
-    weight,
-    ...restProps
-  } = props
+    size = 2,
+    weight = 'regular',
+    ...rest
+  } = props as CodeProps<typeof DEFAULT_CODE_ELEMENT>
+
   const language = typeof languageProp === 'string' ? languageProp : undefined
 
   return (
-    <As
-      data-ui="Code"
-      {...restProps}
-      className={composeClassNames(className, code({size, weight}))}
-      ref={ref}
-    >
+    <Element data-ui="Code" {...rest} className={code({className, size, weight})}>
       <Suspense fallback={<code>{children}</code>}>
         <LazyRefractor language={language} value={children} />
       </Suspense>
-    </As>
+    </Element>
   )
-})
-
-Code.displayName = 'ForwardRef(Code)'
+}

package/src/core/primitives/code/refractor.tsx

@@ -16,5 +16,3 @@ export default function LazyRefractor(
     </>
   )
 }
-
-LazyRefractor.displayName = 'LazyRefractor'

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

@@ -1,10 +1,10 @@
 import {Card, Container, Flex, Text} from '@sanity/ui'
 import {useAction, useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_CONTAINER_WIDTH_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_CONTAINER_WIDTH_OPTIONS} from '$workshop'
 
 export default function PlainStory() {
-  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 0, 'Props')
+  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 0)
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">