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

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 {_composeClassNames, 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,92 @@ 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
-
-  const as = isValidElementType(asProp) ? asProp : 'div'
+    tone: toneProp = 'default',
+    ...rest
+  } = props as CardProps<typeof DEFAULT_CARD_ELEMENT>
 
-  const rootTheme = useRootTheme()
+  const parent = useCard()
+  const tone = toneProp === 'inherit' ? parent?.tone : toneProp
+  const scheme = schemeProp === undefined ? parent?.scheme : schemeProp
 
-  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={_composeClassNames(
         className,
         card({
-          scheme: scheme === rootTheme.scheme ? undefined : scheme,
+          scheme: scheme === parent?.scheme ? undefined : scheme,
           shadow,
-          tone: tone === rootTheme.tone ? undefined : tone,
+          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
+}
+
+Card.displayName = 'Card'

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'
+
+export function CardProvider(props: {
+  children?: ReactNode
+  tone: ThemeColorCardToneKey
+  scheme: ThemeColorSchemeKey
+  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>
+  )
+}
+
+CardProvider.displayName = 'CardProvider'

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,8 @@
+import {useContext} from 'react'
+
+import {CardContext} from './cardContext'
+import type {CardContextValue} from './types'
+
+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 {_composeClassNames, checkbox, checkboxInput} 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,14 +61,12 @@ export const Checkbox = forwardRef(function Checkbox(
   useCustomValidity(ref, customValidity)
 
   return (
-    <span className={composeClassNames(className, checkbox())} data-ui="Checkbox" style={style}>
-      <input
-        {...restProps}
+    <span className={_composeClassNames(className, checkbox())} 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={_composeClassNames(className, checkboxInput())}
+        data-invalid={customValidity ? '' : undefined}
         disabled={disabled || readOnly}
         type="checkbox"
         readOnly={readOnly}
@@ -69,6 +78,6 @@ export const Checkbox = forwardRef(function Checkbox(
       </span>
     </span>
   )
-})
+}
 
-Checkbox.displayName = 'ForwardRef(Checkbox)'
+Checkbox.displayName = '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,51 @@
-import {code, composeClassNames, FontStyleProps} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef, lazy, Suspense} from 'react'
+import {_composeClassNames, code, type FontStyleProps} from '@sanity/ui/css'
+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 = Omit<FontStyleProps, 'align'> & {
   /** Define the language to use for syntax highlighting. */
   language?: string
   size?: number | number[]
 }
 
-/**
- * @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
+    <Element
       data-ui="Code"
-      {...restProps}
-      className={composeClassNames(className, code({size, weight}))}
-      ref={ref}
+      {...rest}
+      className={_composeClassNames(className, code({size, weight}))}
     >
       <Suspense fallback={<code>{children}</code>}>
         <LazyRefractor language={language} value={children} />
       </Suspense>
-    </As>
+    </Element>
   )
-})
+}
 
-Code.displayName = 'ForwardRef(Code)'
+Code.displayName = 'Code'

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">

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

@@ -1,35 +1,46 @@
-import {composeClassNames, container, ContainerStyleProps} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
+import {_composeClassNames, container, type ContainerStyleProps} from '@sanity/ui/css'
 
-import {Props} from '../../types'
-import {Box, BoxProps} from '../box'
+import type {Props} from '../../types'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box'
 
-/**
- * @public
- */
-export interface ContainerProps extends Omit<BoxProps, 'width'>, ContainerStyleProps {}
+/** @public */
+export const DEFAULT_CONTAINER_ELEMENT = 'div'
+
+/** @public */
+export type ContainerOwnProps = Omit<BoxOwnProps, 'width'> & ContainerStyleProps
+
+/** @public */
+export type ContainerElementType = BoxElementType
+
+/** @public */
+export type ContainerProps<E extends ContainerElementType = ContainerElementType> = Props<
+  ContainerOwnProps,
+  E
+>
 
 /**
  * The `Container` component wraps content layout in a defined set of widths.
  *
  * @public
  */
-export const Container = forwardRef(function Container(
-  props: Props<ContainerProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
+export function Container<E extends ContainerElementType = typeof DEFAULT_CONTAINER_ELEMENT>(
+  props: ContainerProps<E>,
 ) {
-  const {as, className, sizing = 'border', width = 2, ...restProps} = props
+  const {
+    as = DEFAULT_CONTAINER_ELEMENT,
+    className,
+    width = 2,
+    ...rest
+  } = props as ContainerProps<typeof DEFAULT_CONTAINER_ELEMENT>
 
   return (
     <Box
       data-ui="Container"
-      {...restProps}
+      {...rest}
       as={as}
-      className={composeClassNames(className, container({width}))}
-      ref={ref}
-      sizing={sizing}
+      className={_composeClassNames(className, container({width}))}
     />
   )
-})
+}
 
-Container.displayName = 'ForwardRef(Container)'
+Container.displayName = 'Container'

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

@@ -2,7 +2,7 @@ import {Card, Code, Flex} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 import {styled} from 'styled-components'
 
-import {WORKSHOP_FLEX_DIRECTION_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_FLEX_DIRECTION_OPTIONS} from '$workshop'
 
 const DebugCard = styled(Card)`
   outline: 1px solid red;
@@ -14,7 +14,7 @@ const DebugCard = styled(Card)`
 `
 
 export default function ExampleStory() {
-  const direction = useSelect('Direction', WORKSHOP_FLEX_DIRECTION_OPTIONS, 'row', 'Props')
+  const direction = useSelect('Direction', WORKSHOP_FLEX_DIRECTION_OPTIONS, 'row')
 
   return (
     <Flex direction={direction} height="fill" style={{width: '100%'}}>

package/src/core/primitives/flex/flex.tsx

@@ -1,29 +1,31 @@
-import {ForwardedRef, forwardRef} from 'react'
+import type {Props} from '../../types'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box'
 
-import {Props} from '../../types'
-import {Box, BoxProps} from '../box'
+/** @public */
+export const DEFAULT_FLEX_ELEMENT = 'div'
 
-/**
- * @public
- */
-export interface FlexProps extends Omit<BoxProps, 'display'> {
-  htmlFor?: string
-}
+/** @public */
+export type FlexOwnProps = Omit<BoxOwnProps, 'display'>
+
+/** @public */
+export type FlexElementType = BoxElementType
+
+/** @public */
+export type FlexProps<E extends FlexElementType = FlexElementType> = Props<FlexOwnProps, E>
 
 /**
  * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
  *
  * @public
  */
-export const Flex = forwardRef(function Flex(
-  props: Props<FlexProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {as, direction = 'row', ...restProps} = props
+export function Flex<E extends FlexElementType = typeof DEFAULT_FLEX_ELEMENT>(props: FlexProps<E>) {
+  const {
+    as = DEFAULT_FLEX_ELEMENT,
+    direction = 'row',
+    ...rest
+  } = props as FlexProps<typeof DEFAULT_FLEX_ELEMENT>
 
-  return (
-    <Box data-ui="Flex" {...restProps} as={as} direction={direction} display="flex" ref={ref} />
-  )
-})
+  return <Box data-ui="Flex" {...rest} as={as} direction={direction} display="flex" />
+}
 
-Flex.displayName = 'ForwardRef(Flex)'
+Flex.displayName = 'Flex'