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

package/src/core/primitives/spinner/spinner.tsx

@@ -1,6 +1,8 @@
 import {ResponsiveProp, spinner} from '@sanity/ui/css'
 import {FontTextSize} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
+import {ForwardedRef, forwardRef} from 'react'
+
+import {Props} from '../../types'
 import {Text} from '../text'
 import {AnimatedSpinnerIcon} from './animatedSpinnerIcon'
 
@@ -18,8 +20,8 @@ export interface SpinnerProps {
  * @public
  */
 export const Spinner = forwardRef(function Spinner(
-  props: SpinnerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
+  props: Props<SpinnerProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   return (
     <Text data-ui="Spinner" {...props} className={spinner()} ref={ref}>

package/src/core/primitives/stack/__workshop__/plain.tsx

@@ -1,6 +1,7 @@
 import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
-import {WORKSHOP_SPACE_OPTIONS} from '../../../__workshop__/constants'
+
+import {WORKSHOP_SPACE_OPTIONS} from '../../../../../workshop/constants'
 
 export default function PlainStory() {
   return (

package/src/core/primitives/stack/stack.tsx

@@ -1,14 +1,15 @@
 import {ResponsiveProp} from '@sanity/ui/css'
 import {Space} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
+import {ForwardedRef, forwardRef} from 'react'
+
+import {Props} from '../../types'
 import {Box, BoxProps} from '../box'
 
 /**
  * @public
  */
-export interface StackProps
-  extends Omit<BoxProps, 'direction' | 'display' | 'gap' | 'gapX' | 'gapY'> {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+export interface StackProps extends Omit<BoxProps, 'direction' | 'display' | 'gapX' | 'gapY'> {
+  /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
 }
 
@@ -18,21 +19,19 @@ export interface StackProps
  * @public
  */
 export const Stack = forwardRef(function Stack(
-  props: StackProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref' | 'width'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
+  props: Props<StackProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
-  const {as, space, ...restProps} = props
+  const {as, gap, space, ...restProps} = props
 
   return (
     <Box
-      as={as}
-      data-as={typeof as === 'string' ? as : undefined}
       data-ui="Stack"
       {...restProps}
+      as={as}
       direction="column"
       display="flex"
-      forwardedAs={as}
-      gapY={space}
+      gap={gap ?? space}
       ref={ref}
     />
   )

package/src/core/primitives/switch/switch.tsx

@@ -1,5 +1,14 @@
-import {_switch, composeClassNames} from '@sanity/ui/css'
-import {forwardRef, useEffect, useImperativeHandle, useRef} from 'react'
+import {
+  _switch,
+  _switchElement,
+  _switchPresentation,
+  _switchThumb,
+  _switchTrack,
+  composeClassNames,
+} from '@sanity/ui/css'
+import {ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef} from 'react'
+
+import {Props} from '../../types'
 import {Box} from '../box'
 
 /**
@@ -17,8 +26,8 @@ export interface SwitchProps {
  * @public
  */
 export const Switch = forwardRef(function Switch(
-  props: Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'type'> & SwitchProps,
-  forwardedRef: React.ForwardedRef<HTMLInputElement>,
+  props: Props<SwitchProps, 'input'>,
+  forwardedRef: ForwardedRef<HTMLInputElement>,
 ) {
   const {checked, className, disabled, indeterminate, readOnly, style, ...restProps} = props
   const ref = useRef<HTMLInputElement | null>(null)
@@ -38,29 +47,29 @@ export const Switch = forwardRef(function Switch(
   return (
     <Box
       className={composeClassNames(className, _switch())}
+      data-checked={checked ? '' : undefined}
+      data-indeterminate={indeterminate ? '' : undefined}
       data-ui="Switch"
       display="inline-block"
       position="relative"
       style={style}
     >
       <input
-        data-read-only={!disabled && readOnly ? '' : undefined}
         {...restProps}
         checked={indeterminate !== true && checked}
-        className="switch-input"
+        className={_switchElement()}
+        data-disabled={disabled ? '' : undefined}
+        data-read-only={!disabled && readOnly ? '' : undefined}
         disabled={disabled || readOnly}
         type="checkbox"
         ref={ref}
       />
-      <span aria-hidden className="switch-presentation" data-name="representation">
-        <span className="switch-track" />
-        <span
-          className="switch-thumb"
-          data-checked={checked ? '' : undefined}
-          data-indeterminate={indeterminate ? '' : undefined}
-        />
+      <span aria-hidden className={_switchPresentation()}>
+        <span className={_switchTrack()} />
+        <span className={_switchThumb()} />
       </span>
     </Box>
   )
 })
+
 Switch.displayName = 'ForwardRef(Switch)'

package/src/core/primitives/text/__workshop__/colored.tsx

@@ -1,20 +1,14 @@
-import {Flex, Text, ThemeProps} from '@sanity/ui'
-import {ThemeColorAvatarColorKey, ThemeColorSpotKey, getTheme_v2} from '@sanity/ui/theme'
+import {Flex, Text} from '@sanity/ui'
+import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
 import {useSelect} from '@sanity/ui-workshop'
-import {styled, css} from 'styled-components'
-import {WORKSHOP_SPOT_COLOR_OPTIONS} from '../../../__workshop__/constants'
+import {styled} from 'styled-components'
 
-const ColoredText = styled(Text)<{$color?: ThemeColorSpotKey}>((
-  props: {
-    $color?: ThemeColorAvatarColorKey
-  } & ThemeProps,
-) => {
-  const {color} = getTheme_v2(props.theme)
+import {WORKSHOP_SPOT_COLOR_OPTIONS} from '../../../../../workshop/constants'
+import {varNames} from '../../../../css/varNames'
 
-  return css`
-    color: ${color.avatar[props.$color || 'gray'].bg};
-  `
-})
+const ColoredText = styled(Text)<{$color?: ThemeColorAvatarColorKey}>`
+  ${varNames.color.fg}: var(--color-avatar-${(props) => props.$color}-bg);
+`
 
 export default function ColoredTextStory() {
   const color = useSelect('Color', WORKSHOP_SPOT_COLOR_OPTIONS, 'gray')

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

@@ -1,17 +1,18 @@
-import {Card, Container, Text} from '@sanity/ui'
+import {Container, Flex, Text} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+
 import {
   WORKSHOP_TEXT_ALIGN_OPTIONS,
   WORKSHOP_TEXT_OVERFLOW_OPTIONS,
   WORKSHOP_TEXT_SIZE_OPTIONS,
   WORKSHOP_TEXT_WEIGHT_OPTIONS,
-} from '../../../__workshop__/constants'
+} from '../../../../../workshop/constants'
 
 export default function TextStory() {
   const accent = useBoolean('Accent', false, 'Props')
   const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS, '', 'Props') || undefined
   const muted = useBoolean('Muted', false, 'Props')
-  const size = useSelect('Size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
+  const size = useSelect('Size', WORKSHOP_TEXT_SIZE_OPTIONS, 1, 'Props')
   const text = useText('Text', 'Hello, world', 'Props')
 
   const textOverflow =
@@ -20,8 +21,8 @@ export default function TextStory() {
   const weight = useSelect('Weight', WORKSHOP_TEXT_WEIGHT_OPTIONS, '', 'Props') || undefined
 
   return (
-    <Container width={0}>
-      <Card padding={4}>
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Container width={0}>
         <Text
           accent={accent}
           align={align}
@@ -32,7 +33,7 @@ export default function TextStory() {
         >
           {text}
         </Text>
-      </Card>
-    </Container>
+      </Container>
+    </Flex>
   )
 }

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

@@ -6,47 +6,37 @@ export default function OpticalAlignment() {
     <Box padding={[4, 5, 6]}>
       <Stack space={1}>
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Text accent size={4}>
-              Hamburgefonstiv M
-            </Text>
+          <Card padding={0} tone="neutral">
+            <Text size={4}>Hamburgefonstiv M</Text>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Text accent size={3}>
-              Hamburgefonstiv M
-            </Text>
+          <Card padding={0} tone="neutral">
+            <Text size={3}>Hamburgefonstiv M</Text>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Text accent size={2}>
-              Hamburgefonstiv M
-            </Text>
+          <Card padding={0} tone="neutral">
+            <Text size={2}>Hamburgefonstiv M</Text>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Text accent size={1}>
-              Hamburgefonstiv M
-            </Text>
+          <Card padding={0} tone="neutral">
+            <Text size={1}>Hamburgefonstiv M</Text>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Text accent size={0}>
-              Hamburgefonstiv M
-            </Text>
+          <Card padding={0} tone="neutral">
+            <Text size={0}>Hamburgefonstiv M</Text>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={2} scheme="dark">
+          <Card padding={2} tone="neutral">
             <Text>
               <AddCircleIcon />
             </Text>

package/src/core/primitives/text/text.tsx

@@ -1,63 +1,44 @@
-import {composeClassNames, text, TextStyleProps} from '@sanity/ui/css'
-import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
-import {styled} from '../../lib/styled'
+import {
+  composeClassNames,
+  text,
+  textOverflow,
+  TextOverflowStyleProps,
+  TextStyleProps,
+} from '@sanity/ui/css'
+import {ForwardedRef, forwardRef} from 'react'
+
+import {Props} from '../../types'
 
 /**
  * @public
  */
-export interface TextProps extends TextStyleProps {
-  accent?: boolean
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  /** When `true` the text color will be muted. */
-  muted?: boolean
-  /**
-   * Controls how overflowing text is treated.
-   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
-   * @beta
-   */
-  textOverflow?: 'ellipsis' | 'none'
-  weight?: ThemeFontWeightKey
+export interface TextProps extends TextStyleProps, TextOverflowStyleProps {
+  htmlFor?: string
 }
 
-const SpanWithTextOverflow = styled.span`
-  display: block;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  overflow: clip;
-`
-
 /**
  * The `Text` component is an agile, themed typographic element.
  *
  * @public
  */
 export const Text = forwardRef(function Text(
-  props: TextProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
+  props: Props<TextProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {
     accent = false,
     align,
     as: As = 'div',
-    children: childrenProp,
+    children,
     className,
+    flex,
     muted = false,
-    size = 2,
-    textOverflow,
+    size = 1,
+    textOverflow: textOverflowProp,
     weight,
     ...restProps
   } = props
 
-  let children = childrenProp
-
-  if (textOverflow === 'ellipsis') {
-    children = <SpanWithTextOverflow>{children}</SpanWithTextOverflow>
-  } else {
-    children = <span>{children}</span>
-  }
-
   return (
     <As
       data-ui="Text"
@@ -68,13 +49,14 @@ export const Text = forwardRef(function Text(
         text({
           accent,
           align,
+          flex,
           muted,
           size,
           weight,
         }),
       )}
     >
-      {children}
+      <span className={textOverflow({textOverflow: textOverflowProp})}>{children}</span>
     </As>
   )
 })

package/src/core/primitives/textArea/__workshop__/plain.tsx

@@ -1,12 +1,13 @@
 import {Card, Container, Flex, Radius, Stack, Text, TextArea} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+
 import {
   WORKSHOP_CARD_TONE_OPTIONS,
   WORKSHOP_FONT_WEIGHT_OPTIONS,
   WORKSHOP_RADIUS_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
   WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
-} from '../../../__workshop__/constants'
+} from '../../../../../workshop/constants'
 
 export default function PlainStory() {
   const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
@@ -17,9 +18,9 @@ export default function PlainStory() {
   const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
   const placeholder = useText('Placeholder', '', 'Props') || undefined
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0, 'Props')
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props')
   const readOnly = useBoolean('Read only', false, 'Props')
-  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, undefined, 'Props')
+  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, undefined, 'Props') || undefined
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">

package/src/core/primitives/textArea/textArea.tsx

@@ -1,83 +1,55 @@
-import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef, useImperativeHandle, useRef} from 'react'
 import {
-  responsiveInputPaddingStyle,
-  responsiveRadiusStyle,
-  ResponsiveRadiusStyleProps,
-  TextInputResponsivePaddingStyleProps,
-  TextInputInputStyleProps,
-  TextInputRepresentationStyleProps,
-  textInputRootStyle,
-  textInputBaseStyle,
-  textInputFontSizeStyle,
-  textInputRepresentationStyle,
-} from '../../_compat/styles/internal'
-import {useCustomValidity, useArrayProp} from '../../hooks'
-import {styled} from '../../lib/styled'
-import {useRootTheme} from '../../theme'
-import {ResponsiveRadiusProps} from '../types'
+  _inputElement,
+  _inputPresentation,
+  ResponsiveProp,
+  textArea,
+  TextAreaStyleProps,
+} from '@sanity/ui/css'
+import {Space, ThemeFontWeightKey} from '@sanity/ui/theme'
+import {ForwardedRef, forwardRef, useImperativeHandle, useRef} from 'react'
+
+import {useCustomValidity} from '../../hooks'
+import {Props} from '../../types'
 
 /**
  * @public
  */
-export interface TextAreaProps extends ResponsiveRadiusProps {
+export interface TextAreaProps extends TextAreaStyleProps {
   /**
    * @beta
    */
   __unstable_disableFocusRing?: boolean
-  border?: boolean
   customValidity?: string
-  fontSize?: number | number[]
-  padding?: number | number[]
+  /** @deprecated Use `gap` instead. */
+  space?: ResponsiveProp<Space>
   weight?: ThemeFontWeightKey
 }
 
-const Root = styled.span(textInputRootStyle)
-
-const InputRoot = styled.span`
-  flex: 1;
-  min-width: 0;
-  display: block;
-  position: relative;
-`
-
-const Input = styled.textarea<TextInputResponsivePaddingStyleProps & TextInputInputStyleProps>(
-  responsiveInputPaddingStyle,
-  textInputBaseStyle,
-  textInputFontSizeStyle,
-)
-
-const Presentation = styled.div<ResponsiveRadiusStyleProps & TextInputRepresentationStyleProps>(
-  responsiveRadiusStyle,
-  textInputRepresentationStyle,
-)
-
 /**
  * A multiline text input.
  *
-
  * @public
  */
 export const TextArea = forwardRef(function TextArea(
-  props: TextAreaProps & Omit<React.HTMLProps<HTMLTextAreaElement>, 'as'>,
-  forwardedRef: React.ForwardedRef<HTMLTextAreaElement>,
+  props: Props<TextAreaProps, 'textarea'>,
+  forwardedRef: ForwardedRef<HTMLTextAreaElement>,
 ) {
   const {
     border = true,
     customValidity,
     disabled = false,
     fontSize = 2,
+    gap,
     padding = 3,
     radius = 2,
-    weight,
-    __unstable_disableFocusRing,
+    space = 3,
+    // weight,
+    // __unstable_disableFocusRing,
     ...restProps
   } = props
 
   const ref = useRef<HTMLTextAreaElement | null>(null)
 
-  const rootTheme = useRootTheme()
-
   useImperativeHandle<HTMLTextAreaElement | null, HTMLTextAreaElement | null>(
     forwardedRef,
     () => ref.current,
@@ -86,33 +58,14 @@ export const TextArea = forwardRef(function TextArea(
   useCustomValidity(ref, customValidity)
 
   return (
-    <Root data-ui="TextArea">
-      <InputRoot>
-        <Input
-          data-as="textarea"
-          data-scheme={rootTheme.scheme}
-          data-tone={rootTheme.tone}
-          {...restProps}
-          $fontSize={useArrayProp(fontSize)}
-          $padding={useArrayProp(padding)}
-          $scheme={rootTheme.scheme}
-          $space={useArrayProp(0)}
-          $tone={rootTheme.tone}
-          $weight={weight}
-          disabled={disabled}
-          ref={ref}
-        />
-        <Presentation
-          $radius={useArrayProp(radius)}
-          $unstableDisableFocusRing={__unstable_disableFocusRing}
-          $scheme={rootTheme.scheme}
-          $tone={rootTheme.tone}
-          data-border={border ? '' : undefined}
-          data-scheme={rootTheme.scheme}
-          data-tone={rootTheme.tone}
-        />
-      </InputRoot>
-    </Root>
+    <span
+      className={textArea({border, fontSize, padding, radius, gap: gap ?? space})}
+      data-ui="TextArea"
+    >
+      <textarea {...restProps} className={_inputElement()} disabled={disabled} ref={ref} />
+      <span className={_inputPresentation()} />
+    </span>
   )
 })
+
 TextArea.displayName = 'ForwardRef(TextArea)'

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

@@ -35,11 +35,6 @@ export default defineScope({
       title: 'Read only',
       component: lazy(() => import('./readOnly')),
     },
-    {
-      name: 'multiple-tones',
-      title: 'Multiple tones',
-      component: lazy(() => import('./multipleTones')),
-    },
     {
       name: 'states',
       title: 'States',

package/src/core/primitives/textInput/__workshop__/plain.tsx

@@ -5,13 +5,14 @@ import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {PerfTestProps, usePerfTest} from '@sanity/ui-workshop/plugin-perf'
 import {fireEvent} from '@testing-library/dom'
 import {useCallback, useState} from 'react'
+
 import {
-  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
   WORKSHOP_FONT_WEIGHT_OPTIONS,
   WORKSHOP_ICON_SYMBOL_OPTIONS,
   WORKSHOP_RADIUS_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
-} from '../../../__workshop__/constants'
+  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
+} from '../../../../../workshop/constants'
 
 const typingPerfTest: PerfTestProps<HTMLInputElement> = {
   name: 'typing',
@@ -58,14 +59,16 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
   const iconRight = useSelect(
     'Icon (right)',
     WORKSHOP_ICON_SYMBOL_OPTIONS,
-    'close',
+    'cube',
     'Props',
   ) as IconSymbol
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
   const placeholder = useText('Placeholder', '', 'Props') || undefined
+  const prefix = useBoolean('Prefix', false, 'Props')
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props')
   const readOnly = useBoolean('Read only', false, 'Props')
   const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+  const suffix = useBoolean('Suffix', false, 'Props')
   const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, '', 'Props') || undefined
 
   const [value, setValue] = useState('')
@@ -88,10 +91,12 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
       onChange={handleChange}
       padding={padding}
       placeholder={placeholder}
+      prefix={prefix && <Text>Prefix</Text>}
       radius={radius as Radius}
       readOnly={readOnly}
       ref={ref}
       space={space}
+      suffix={suffix && <Text>Suffix</Text>}
       value={value}
       weight={weight}
     />

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

@@ -1,5 +1,9 @@
-import {TextInput} from '@sanity/ui'
+import {Flex, TextInput} from '@sanity/ui'
 
 export default function ReadOnlyStory() {
-  return <TextInput id="text-input-example" readOnly />
+  return (
+    <Flex padding={4}>
+      <TextInput id="text-input-example" readOnly />
+    </Flex>
+  )
 }