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

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

@@ -4,20 +4,26 @@ import {
   _switchPresentation,
   _switchThumb,
   _switchTrack,
-  composeClassNames,
 } from '@sanity/ui/css'
-import {ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef} from 'react'
+import {useEffect, useImperativeHandle, useRef} from 'react'
 
-import {Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 import {Box} from '../box'
 
-/**
- * @public
- */
-export interface SwitchProps {
+/** @public */
+export const DEFAULT_SWITCH_ELEMENT = 'input'
+
+/** @public */
+export type SwitchOwnProps = {
   indeterminate?: boolean
 }
 
+/** @public */
+export type SwitchElementType = 'input' | ComponentType
+
+/** @public */
+export type SwitchProps<E extends SwitchElementType = SwitchElementType> = Props<SwitchOwnProps, E>
+
 /**
  * The `Switch` component allows the user to toggle a setting on and off.
  *
@@ -25,11 +31,21 @@ export interface SwitchProps {
  *
  * @public
  */
-export const Switch = forwardRef(function Switch(
-  props: Props<SwitchProps, 'input'>,
-  forwardedRef: ForwardedRef<HTMLInputElement>,
+export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEMENT>(
+  props: SwitchProps<E>,
 ) {
-  const {checked, className, disabled, indeterminate, readOnly, style, ...restProps} = props
+  const {
+    as: Element = DEFAULT_SWITCH_ELEMENT,
+    checked,
+    className,
+    disabled,
+    indeterminate,
+    readOnly,
+    ref: forwardedRef,
+    style,
+    ...rest
+  } = props as SwitchProps<typeof DEFAULT_SWITCH_ELEMENT>
+
   const ref = useRef<HTMLInputElement | null>(null)
 
   useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
@@ -46,7 +62,7 @@ export const Switch = forwardRef(function Switch(
 
   return (
     <Box
-      className={composeClassNames(className, _switch())}
+      className={_switch({className})}
       data-checked={checked ? '' : undefined}
       data-indeterminate={indeterminate ? '' : undefined}
       data-ui="Switch"
@@ -54,8 +70,8 @@ export const Switch = forwardRef(function Switch(
       position="relative"
       style={style}
     >
-      <input
-        {...restProps}
+      <Element
+        {...rest}
         checked={indeterminate !== true && checked}
         className={_switchElement()}
         data-disabled={disabled ? '' : undefined}
@@ -70,6 +86,4 @@ export const Switch = forwardRef(function Switch(
       </span>
     </Box>
   )
-})
-
-Switch.displayName = 'ForwardRef(Switch)'
+}

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

@@ -1,17 +1,17 @@
 import {Flex, Text} from '@sanity/ui'
-import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
+import {varNames, vars} from '@sanity/ui/css'
+import type {AvatarColor} from '@sanity/ui/theme'
 import {useSelect} from '@sanity/ui-workshop'
 import {styled} from 'styled-components'
 
-import {WORKSHOP_SPOT_COLOR_OPTIONS} from '../../../../../workshop/constants'
-import {varNames} from '../../../../css/varNames'
+import {WORKSHOP_AVATAR_COLOR_OPTIONS} from '$workshop'
 
-const ColoredText = styled(Text)<{$color?: ThemeColorAvatarColorKey}>`
-  ${varNames.color.fg}: var(--color-avatar-${(props) => props.$color}-bg);
+const ColoredText = styled(Text)<{$color: AvatarColor}>`
+  ${varNames.color.fg}: ${({$color}) => vars.color.avatar[$color].bg};
 `
 
 export default function ColoredTextStory() {
-  const color = useSelect('Color', WORKSHOP_SPOT_COLOR_OPTIONS, 'gray')
+  const color = useSelect('Color', WORKSHOP_AVATAR_COLOR_OPTIONS, 'gray') ?? 'gray'
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">

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

@@ -3,34 +3,23 @@ import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 
 import {
   WORKSHOP_TEXT_ALIGN_OPTIONS,
+  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
   WORKSHOP_TEXT_OVERFLOW_OPTIONS,
-  WORKSHOP_TEXT_SIZE_OPTIONS,
   WORKSHOP_TEXT_WEIGHT_OPTIONS,
-} from '../../../../../workshop/constants'
+} from '$workshop'
 
 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, 1, 'Props')
-  const text = useText('Text', 'Hello, world', 'Props')
-
-  const textOverflow =
-    useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS, undefined, 'Props') || undefined
-
-  const weight = useSelect('Weight', WORKSHOP_TEXT_WEIGHT_OPTIONS, '', 'Props') || undefined
+  const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS)
+  const muted = useBoolean('Muted', false)
+  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 1)
+  const text = useText('Text', 'Hello, world')
+  const textOverflow = useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS)
+  const weight = useSelect('Weight', WORKSHOP_TEXT_WEIGHT_OPTIONS)
 
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Container width={0}>
-        <Text
-          accent={accent}
-          align={align}
-          muted={muted}
-          size={size}
-          textOverflow={textOverflow}
-          weight={weight}
-        >
+        <Text align={align} muted={muted} size={size} textOverflow={textOverflow} weight={weight}>
           {text}
         </Text>
       </Container>

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

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

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

@@ -1,64 +1,72 @@
-import {
-  composeClassNames,
-  text,
-  textOverflow,
-  TextOverflowStyleProps,
-  TextStyleProps,
-} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
+import {text, textOverflow, type TextOverflowStyleProps, type TextStyleProps} from '@sanity/ui/css'
 
-import {Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface TextProps extends TextStyleProps, TextOverflowStyleProps {
-  htmlFor?: string
-}
+/** @public */
+export const DEFAULT_TEXT_ELEMENT = 'div'
+
+/** @public */
+export type TextOwnProps = TextStyleProps & TextOverflowStyleProps
+
+/** @public */
+export type TextElementType =
+  | 'div'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'label'
+  | 'li'
+  | 'p'
+  | 'span'
+  | ComponentType
+
+/** @public */
+export type TextProps<E extends TextElementType = TextElementType> = Props<TextOwnProps, E>
 
 /**
  * The `Text` component is an agile, themed typographic element.
  *
  * @public
  */
-export const Text = forwardRef(function Text(
-  props: Props<TextProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
+export function Text<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(props: TextProps<E>) {
   const {
-    accent = false,
+    accent,
     align,
-    as: As = 'div',
+    as: Element = DEFAULT_TEXT_ELEMENT,
     children,
     className,
     flex,
-    muted = false,
-    size = 1,
+    muted,
+    size = 2,
     textOverflow: textOverflowProp,
-    weight,
-    ...restProps
-  } = props
+    weight = 'regular',
+    ...rest
+  } = props as TextProps<typeof DEFAULT_TEXT_ELEMENT>
 
   return (
-    <As
+    <Element
       data-ui="Text"
-      {...restProps}
-      ref={ref}
-      className={composeClassNames(
+      {...rest}
+      className={text({
         className,
-        text({
-          accent,
-          align,
-          flex,
-          muted,
-          size,
-          weight,
-        }),
-      )}
+        accent,
+        align,
+        flex,
+        muted,
+        size,
+        weight,
+      })}
     >
-      <span className={textOverflow({textOverflow: textOverflowProp})}>{children}</span>
-    </As>
+      <span
+        className={textOverflow({
+          textOverflow: textOverflowProp,
+        })}
+      >
+        {children}
+      </span>
+    </Element>
   )
-})
-
-Text.displayName = 'ForwardRef(Text)'
+}

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

@@ -1,50 +1,61 @@
-import {Card, Container, Flex, Radius, Stack, Text, TextArea} from '@sanity/ui'
+import {Card, Container, Stack, Text, TextArea} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {useState} from 'react'
 
 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'
 
 export default function PlainStory() {
   const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
 
-  const border = useBoolean('Border', true, 'Props')
-  const customValidity = useText('Custom validity', '', 'Props') || undefined
-  const disabled = useBoolean('Disabled', false, 'Props')
-  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, 2, 'Props')
-  const readOnly = useBoolean('Read only', false, 'Props')
-  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, undefined, 'Props') || undefined
+  const border = useBoolean('Border', true)
+  const customValidity = useText('Custom validity')
+  const disableFocusRing = useBoolean('Disable focus ring (unstable)', false)
+  const disabled = useBoolean('Disabled', false)
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
+  const placeholder = useText('Placeholder', 'Placeholder')
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
+  const readOnly = useBoolean('Read only', false)
+
+  const [value, setValue] = useState('')
 
   return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+    <Card
+      align="center"
+      display="flex"
+      height="fill"
+      justify="center"
+      padding={[4, 5, 6]}
+      sizing="border"
+      tone={tone}
+    >
       <Container width={0}>
-        <Card padding={3} tone={tone}>
-          <Stack space={3}>
-            <Text as="label" htmlFor="text-area-example" size={1} weight="medium">
-              TextArea
-            </Text>
-            <TextArea
-              border={border}
-              customValidity={customValidity}
-              disabled={disabled}
-              fontSize={fontSize}
-              id="text-area-example"
-              padding={padding}
-              placeholder={placeholder}
-              radius={radius as Radius}
-              readOnly={readOnly}
-              weight={weight}
-            />
-          </Stack>
-        </Card>
+        <Stack gap={3}>
+          <Text as="label" hidden htmlFor="text-area-example" size={1} weight="medium">
+            TextArea
+          </Text>
+          <TextArea
+            __unstable_disableFocusRing={disableFocusRing}
+            border={border}
+            customValidity={customValidity}
+            disabled={disabled}
+            fontSize={fontSize}
+            id="text-area-example"
+            onChange={(e) => setValue(e.target.value)}
+            padding={padding}
+            placeholder={placeholder}
+            radius={radius}
+            readOnly={readOnly}
+            rows={10}
+            value={value}
+          />
+        </Stack>
       </Container>
-    </Flex>
+    </Card>
   )
 }

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

@@ -1,20 +1,21 @@
 import {
   _inputElement,
   _inputPresentation,
-  ResponsiveProp,
+  type ResponsiveProp,
   textArea,
-  TextAreaStyleProps,
+  type TextAreaStyleProps,
 } from '@sanity/ui/css'
-import {Space, ThemeFontWeightKey} from '@sanity/ui/theme'
-import {ForwardedRef, forwardRef, useImperativeHandle, useRef} from 'react'
+import type {Space} from '@sanity/ui/theme'
+import {useImperativeHandle, useRef} from 'react'
 
 import {useCustomValidity} from '../../hooks'
-import {Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface TextAreaProps extends TextAreaStyleProps {
+/** @public */
+export const DEFAULT_TEXT_AREA_ELEMENT = 'textarea'
+
+/** @public */
+export type TextAreaOwnProps = TextAreaStyleProps & {
   /**
    * @beta
    */
@@ -22,19 +23,30 @@ export interface TextAreaProps extends TextAreaStyleProps {
   customValidity?: string
   /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
-  weight?: ThemeFontWeightKey
 }
 
+/** @public */
+export type TextAreaElementType = 'textarea' | ComponentType
+
+/** @public */
+export type TextAreaProps<E extends TextAreaElementType = TextAreaElementType> = Props<
+  TextAreaOwnProps,
+  E
+>
+
 /**
  * A multiline text input.
  *
  * @public
  */
-export const TextArea = forwardRef(function TextArea(
-  props: Props<TextAreaProps, 'textarea'>,
-  forwardedRef: ForwardedRef<HTMLTextAreaElement>,
+export function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_AREA_ELEMENT>(
+  props: TextAreaProps<E>,
 ) {
   const {
+    // TODO: fix this
+
+    __unstable_disableFocusRing,
+    as: Element = DEFAULT_TEXT_AREA_ELEMENT,
     border = true,
     customValidity,
     disabled = false,
@@ -42,11 +54,11 @@ export const TextArea = forwardRef(function TextArea(
     gap,
     padding = 3,
     radius = 2,
+    readOnly,
+    ref: forwardedRef,
     space = 3,
-    // weight,
-    // __unstable_disableFocusRing,
-    ...restProps
-  } = props
+    ...rest
+  } = props as TextAreaProps<typeof DEFAULT_TEXT_AREA_ELEMENT>
 
   const ref = useRef<HTMLTextAreaElement | null>(null)
 
@@ -59,13 +71,26 @@ export const TextArea = forwardRef(function TextArea(
 
   return (
     <span
-      className={textArea({border, fontSize, padding, radius, gap: gap ?? space})}
+      className={textArea({
+        border,
+        fontSize,
+        padding,
+        radius,
+        gap: gap ?? space,
+      })}
+      data-invalid={customValidity ? '' : undefined}
+      data-read-only={!disabled && readOnly ? '' : undefined}
       data-ui="TextArea"
     >
-      <textarea {...restProps} className={_inputElement()} disabled={disabled} ref={ref} />
+      <Element
+        {...rest}
+        className={_inputElement()}
+        data-no-focus-ring={__unstable_disableFocusRing ? '' : undefined}
+        disabled={disabled}
+        readOnly={readOnly}
+        ref={ref}
+      />
       <span className={_inputPresentation()} />
     </span>
   )
-})
-
-TextArea.displayName = 'ForwardRef(TextArea)'
+}

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

@@ -2,12 +2,12 @@ import {Button, Card, Container, Stack, TextInput} from '@sanity/ui'
 import {useText} from '@sanity/ui-workshop'
 
 export default function CustomValidityStory() {
-  const customValidity = useText('Custom validity', 'Invalid value', 'Props') || undefined
+  const customValidity = useText('Custom validity', 'Invalid value') || undefined
 
   return (
     <Container as="form" onSubmit={(event) => event.preventDefault()} width={0}>
       <Card padding={4}>
-        <Stack space={4}>
+        <Stack gap={4}>
           <TextInput customValidity={customValidity} />
           <Button text="Submit" type="submit" />
         </Stack>

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

@@ -1,8 +1,7 @@
-import {icons, IconSymbol} from '@sanity/icons'
-import {Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
-import {FontTextSize, Radius} from '@sanity/ui/theme'
+import {icons} from '@sanity/icons'
+import {Box, Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {PerfTestProps, usePerfTest} from '@sanity/ui-workshop/plugin-perf'
+import {type PerfTestProps, usePerfTest} from '@sanity/ui-workshop/plugin-perf'
 import {fireEvent} from '@testing-library/dom'
 import {useCallback, useState} from 'react'
 
@@ -12,7 +11,7 @@ import {
   WORKSHOP_RADIUS_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
   WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
-} from '../../../../../workshop/constants'
+} from '$workshop'
 
 const typingPerfTest: PerfTestProps<HTMLInputElement> = {
   name: 'typing',
@@ -36,7 +35,7 @@ export default function PlainStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Container width={0}>
-        <Stack space={3}>
+        <Stack gap={3}>
           <Text as="label" htmlFor="text-input-example" size={1} weight="medium">
             TextInput
           </Text>
@@ -51,25 +50,20 @@ export default function PlainStory() {
 
 function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
   const {inputRef: ref} = props
-  const border = useBoolean('Border', true, 'Props')
-  const customValidity = useText('Custom validity', '', 'Props') || undefined
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
-  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'search', 'Props') as IconSymbol
-  const iconRight = useSelect(
-    'Icon (right)',
-    WORKSHOP_ICON_SYMBOL_OPTIONS,
-    '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 border = useBoolean('Border', true)
+  const customValidity = useText('Custom validity')
+  const disabled = useBoolean('Disabled', false)
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
+  const gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 3)
+  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'search')
+  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, 'cube')
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
+  const placeholder = useText('Placeholder')
+  const prefix = useBoolean('Prefix', false)
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
+  const readOnly = useBoolean('Read only', false)
+  const suffix = useBoolean('Suffix', false)
+  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS)
 
   const [value, setValue] = useState('')
 
@@ -83,7 +77,8 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
       border={border}
       customValidity={customValidity}
       disabled={disabled}
-      fontSize={fontSize as FontTextSize}
+      fontSize={fontSize}
+      gap={gap}
       icon={icon && icons[icon]}
       iconRight={iconRight && icons[iconRight]}
       id="text-input-example"
@@ -91,12 +86,23 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
       onChange={handleChange}
       padding={padding}
       placeholder={placeholder}
-      prefix={prefix && <Text>Prefix</Text>}
-      radius={radius as Radius}
+      prefix={
+        prefix && (
+          <Box padding={padding}>
+            <Text size={fontSize}>Prefix</Text>
+          </Box>
+        )
+      }
+      radius={radius}
       readOnly={readOnly}
       ref={ref}
-      space={space}
-      suffix={suffix && <Text>Suffix</Text>}
+      suffix={
+        suffix && (
+          <Box padding={padding}>
+            <Text size={fontSize}>Suffix</Text>
+          </Box>
+        )
+      }
       value={value}
       weight={weight}
     />

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

@@ -2,14 +2,14 @@ import {Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
 import {useAction, useBoolean} from '@sanity/ui-workshop'
 
 export default function StatesStory() {
-  const invalid = useBoolean('Invalid', false, 'Props')
+  const invalid = useBoolean('Invalid', false)
   const onChange = useAction('onChange')
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Container width={1}>
-        <Stack space={5}>
-          <Stack space={3}>
+        <Stack gap={5}>
+          <Stack gap={3}>
             <Text size={1} weight="medium">
               <label htmlFor="enabled-example">Enabled (default)</label>
             </Text>
@@ -21,7 +21,7 @@ export default function StatesStory() {
             />
           </Stack>
 
-          <Stack space={3}>
+          <Stack gap={3}>
             <Text size={1} weight="medium">
               <label htmlFor="disabled-example">Disabled</label>
             </Text>
@@ -34,7 +34,7 @@ export default function StatesStory() {
             />
           </Stack>
 
-          <Stack space={3}>
+          <Stack gap={3}>
             <Text size={1} weight="medium">
               <label htmlFor="read-only-example">Read-only</label>
             </Text>