@sanity/ui 3.0.0-static.18 → 3.0.0-static.19

package/src/core/primitives/popover/popover.tsx

@@ -141,7 +141,7 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
 
   const {
     __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
-    animate: _animate = true,
+    animate: _animate = false,
     arrow: arrowProp = false,
     as: as = DEFAULT_POPOVER_ELEMENT,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/src/core/primitives/popover/popoverLayer.tsx

@@ -1,11 +1,11 @@
-import {Strategy} from '@floating-ui/react-dom'
+import type {Strategy} from '@floating-ui/react-dom'
 import {popoverCard} from '@sanity/ui/css'
 import {motion} from 'framer-motion'
-import {CSSProperties, ForwardedRef, useMemo} from 'react'
+import {type CSSProperties, type ForwardedRef, useMemo} from 'react'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'
-import {Placement, PopoverMargins} from '../../types'
-import {Arrow, Layer, LayerOwnProps, LayerProps} from '../../utils'
+import type {Placement, PopoverMargins} from '../../types'
+import {Arrow, Layer, type LayerOwnProps, type LayerProps} from '../../utils'
 import {Flex} from '../flex'
 import {
   DEFAULT_POPOVER_ARROW_HEIGHT,

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

@@ -1,6 +1,7 @@
+import type {ContainerWidth} from '@sanity/ui/theme'
+
 /** @beta */
 export type PopoverUpdateCallback = () => void
 
 /** @public */
-// todo: remove `auto` from PopoverWidth
-export type PopoverWidth = number | 'auto'
+export type PopoverWidth = Exclude<ContainerWidth, 'auto'>

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

@@ -14,7 +14,7 @@ export default function ExampleStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[3, 4, 5]} sizing="border">
       <Container width={0}>
-        <Stack space={3}>
+        <Stack gap={3}>
           <Flex align="center" as="label">
             <Radio
               checked={value === 'first-option'}

package/src/core/primitives/radio/radio.tsx

@@ -1,8 +1,8 @@
-import {composeClassNames, radio} from '@sanity/ui/css'
+import {_composeClassNames, radio} from '@sanity/ui/css'
 import {useImperativeHandle, useRef} from 'react'
 
 import {useCustomValidity} from '../../hooks'
-import {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 
 /** @public */
 export const DEFAULT_RADIO_ELEMENT = 'input'
@@ -47,11 +47,11 @@ export function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>
   useCustomValidity(ref, customValidity)
 
   return (
-    <div className={composeClassNames(className, radio())} data-ui="Radio" style={style}>
+    <div className={_composeClassNames(className, radio())} data-ui="Radio" style={style}>
       <Element
-        data-read-only={!disabled && readOnly ? '' : undefined}
-        data-error={customValidity ? '' : undefined}
         {...rest}
+        data-invalid={customValidity ? '' : undefined}
+        data-read-only={!disabled && readOnly ? '' : undefined}
         disabled={disabled || readOnly}
         readOnly={readOnly}
         ref={ref}

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

@@ -1,22 +1,34 @@
 import {Card, Container, Label, Select, Stack} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_TEXT_FONT_SIZE_OPTIONS} from '../../../../../workshop/constants'
+import {
+  WORKSHOP_RADIUS_OPTIONS,
+  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
+} from '../../../../../workshop/constants'
 
 export default function PlainStory() {
+  const border = useBoolean('Border', true)
   const disabled = useBoolean('Disabled', false, 'Props')
   const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, undefined, 'Props')
   const readOnly = useBoolean('Read only', false, 'Props')
 
   return (
     <Container width={0}>
       <Card padding={4}>
-        <Stack space={3}>
+        <Stack gap={3}>
           <Label as="label" htmlFor="select">
             Select
           </Label>
 
-          <Select disabled={disabled} fontSize={fontSize} id="select-example" readOnly={readOnly}>
+          <Select
+            border={border}
+            disabled={disabled}
+            fontSize={fontSize}
+            id="select-example"
+            radius={radius}
+            readOnly={readOnly}
+          >
             <option value="a">Option A</option>
             <option value="b">Option B</option>
             <option value="c">Option C</option>

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

@@ -4,7 +4,7 @@ export default function ReadOnlyStory() {
   return (
     <Container width={0}>
       <Card padding={4}>
-        <Stack space={3}>
+        <Stack gap={3}>
           <Label as="label" htmlFor="select">
             Select
           </Label>

package/src/core/primitives/select/select.tsx

@@ -1,12 +1,12 @@
 import {ChevronDownIcon} from '@sanity/icons'
 import {
   _inputElement,
-  ResponsiveProp,
+  type ResponsiveProp,
   select,
   selectPresentation,
-  SelectStyleProps,
+  type SelectStyleProps,
 } from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
+import type {Space} from '@sanity/ui/theme'
 import {useImperativeHandle, useRef} from 'react'
 
 import {useCustomValidity} from '../../hooks'
@@ -70,13 +70,7 @@ export function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEME
       className={select({border, fontSize, padding, radius, gap: gap ?? space})}
       data-icon-right=""
     >
-      <Element
-        data-read-only={!disabled && readOnly ? '' : undefined}
-        {...rest}
-        className={_inputElement()}
-        disabled={disabled || readOnly}
-        ref={ref}
-      >
+      <Element {...rest} className={_inputElement()} disabled={disabled || readOnly} ref={ref}>
         {children}
       </Element>
       <span className={selectPresentation()}>

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

@@ -1,5 +1,4 @@
 import {Flex, Spinner} from '@sanity/ui'
-import {FontTextSize} from '@sanity/ui/theme'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
 import {WORKSHOP_TEXT_SIZE_OPTIONS} from '../../../../../workshop/constants'
@@ -10,7 +9,7 @@ export default function Props() {
 
   return (
     <Flex align="center" height="fill" justify="center">
-      <Spinner muted={muted} size={size as FontTextSize} />
+      <Spinner muted={muted} size={size} />
     </Flex>
   )
 }

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

@@ -1,6 +1,6 @@
 import {SpinnerIcon} from '@sanity/icons'
-import {animatedSpinnerIcon, composeClassNames} from '@sanity/ui/css'
-import {ReactElement, SVGProps} from 'react'
+import {_composeClassNames, animatedSpinnerIcon} from '@sanity/ui/css'
+import type {ReactElement, SVGProps} from 'react'
 
 /** @internal */
 export function AnimatedSpinnerIcon(props: SVGProps<SVGSVGElement>): ReactElement {
@@ -10,7 +10,7 @@ export function AnimatedSpinnerIcon(props: SVGProps<SVGSVGElement>): ReactElemen
     <SpinnerIcon
       {...rest}
       data-sanity-icon="animated-spinner"
-      className={composeClassNames(className, animatedSpinnerIcon())}
+      className={_composeClassNames(className, animatedSpinnerIcon())}
     />
   )
 }

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

@@ -1,7 +1,7 @@
-import {ResponsiveProp, spinner} from '@sanity/ui/css'
-import {FontTextSize} from '@sanity/ui/theme'
+import {type ResponsiveProp, spinner} from '@sanity/ui/css'
+import type {FontTextSize} from '@sanity/ui/theme'
 
-import {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 import {Text} from '../text'
 import {AnimatedSpinnerIcon} from './animatedSpinnerIcon'
 

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

@@ -7,7 +7,7 @@ export default function PlainStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Container width={0}>
-        <Stack space={useSelect('Space', WORKSHOP_SPACE_OPTIONS, 0, 'Props')}>
+        <Stack gap={useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 0, 'Props')}>
           <Card padding={[2, 3, 4]} shadow={1}>
             <Text align="center" muted>
               Stack item

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

@@ -1,8 +1,8 @@
-import {composeClassNames, ResponsiveProp, stack} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
+import {_composeClassNames, type ResponsiveProp, stack} from '@sanity/ui/css'
+import type {Space} from '@sanity/ui/theme'
 
-import {Props} from '../../types'
-import {Box, BoxElementType, BoxOwnProps} from '../box'
+import type {Props} from '../../types'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box'
 
 /** @public */
 export const DEFAULT_STACK_ELEMENT = 'div'
@@ -44,7 +44,7 @@ export function Stack<E extends StackElementType = typeof DEFAULT_STACK_ELEMENT>
       {...rest}
       as={as}
       autoRows="min"
-      className={composeClassNames(className, stack())}
+      className={_composeClassNames(className, stack())}
       display="grid"
       gap={gap ?? space}
     />

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

@@ -1,14 +1,14 @@
 import {
+  _composeClassNames,
   _switch,
   _switchElement,
   _switchPresentation,
   _switchThumb,
   _switchTrack,
-  composeClassNames,
 } from '@sanity/ui/css'
 import {useEffect, useImperativeHandle, useRef} from 'react'
 
-import {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 import {Box} from '../box'
 
 /** @public */
@@ -63,7 +63,7 @@ export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEME
 
   return (
     <Box
-      className={composeClassNames(className, _switch())}
+      className={_composeClassNames(className, _switch())}
       data-checked={checked ? '' : undefined}
       data-indeterminate={indeterminate ? '' : undefined}
       data-ui="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'
 
-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_SPOT_COLOR_OPTIONS, 'magenta') || 'magenta'
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">

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,12 +1,12 @@
 import {
-  composeClassNames,
+  _composeClassNames,
   text,
   textOverflow,
-  TextOverflowStyleProps,
-  TextStyleProps,
+  type TextOverflowStyleProps,
+  type TextStyleProps,
 } from '@sanity/ui/css'
 
-import {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 
 /** @public */
 export const DEFAULT_TEXT_ELEMENT = 'div'
@@ -48,7 +48,7 @@ export function Text<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(pr
     muted,
     size = 2,
     textOverflow: textOverflowProp,
-    weight,
+    weight = 'regular',
     ...rest
   } = props as TextProps<typeof DEFAULT_TEXT_ELEMENT>
 
@@ -56,7 +56,7 @@ export function Text<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(pr
     <Element
       data-ui="Text"
       {...rest}
-      className={composeClassNames(
+      className={_composeClassNames(
         className,
         text({
           accent,

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

@@ -1,5 +1,6 @@
-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,
@@ -17,34 +18,45 @@ export default function PlainStory() {
   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 placeholder = useText('Placeholder', '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 [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
+            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}
+            weight={weight}
+          />
+        </Stack>
       </Container>
-    </Flex>
+    </Card>
   )
 }

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

@@ -1,7 +1,7 @@
 import {
   _inputElement,
   _inputPresentation,
-  ResponsiveProp,
+  type ResponsiveProp,
   textArea,
   type TextAreaStyleProps,
 } from '@sanity/ui/css'
@@ -44,6 +44,9 @@ export function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_ARE
   props: TextAreaProps<E>,
 ) {
   const {
+    // TODO: fix this
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    __unstable_disableFocusRing,
     as: Element = DEFAULT_TEXT_AREA_ELEMENT,
     border = true,
     customValidity,
@@ -52,14 +55,12 @@ export function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_ARE
     gap,
     padding = 3,
     radius = 2,
+    readOnly,
     ref: forwardedRef,
     space = 3,
     // TODO: fix this
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     weight,
-    // TODO: fix this
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    __unstable_disableFocusRing,
     ...rest
   } = props as TextAreaProps<typeof DEFAULT_TEXT_AREA_ELEMENT>
 
@@ -75,9 +76,17 @@ export function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_ARE
   return (
     <span
       className={textArea({border, fontSize, padding, radius, gap: gap ?? space})}
+      data-invalid={customValidity ? '' : undefined}
+      data-read-only={!disabled && readOnly ? '' : undefined}
       data-ui="TextArea"
     >
-      <Element {...rest} className={_inputElement()} disabled={disabled} ref={ref} />
+      <Element
+        {...rest}
+        className={_inputElement()}
+        disabled={disabled}
+        readOnly={readOnly}
+        ref={ref}
+      />
       <span className={_inputPresentation()} />
     </span>
   )

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

@@ -7,7 +7,7 @@ export default function CustomValidityStory() {
   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 {icons} from '@sanity/icons'
 import {Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
-import {FontTextSize, Radius} from '@sanity/ui/theme'
 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'
 
@@ -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>
@@ -55,19 +54,14 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
   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 gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'search', 'Props')
+  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, 'cube', 'Props')
   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
 
@@ -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"
@@ -92,10 +87,9 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
       padding={padding}
       placeholder={placeholder}
       prefix={prefix && <Text>Prefix</Text>}
-      radius={radius as Radius}
+      radius={radius}
       readOnly={readOnly}
       ref={ref}
-      space={space}
       suffix={suffix && <Text>Suffix</Text>}
       value={value}
       weight={weight}

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

@@ -8,8 +8,8 @@ export default function StatesStory() {
   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>

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

@@ -16,7 +16,7 @@ export default function TonesStory() {
         <Container width={1}>
           <Flex>
             <Card flex={1} scheme="light">
-              <Stack padding={[3, 4, 5]} space={4}>
+              <Stack gap={4} padding={[3, 4, 5]}>
                 <Card padding={3}>
                   <TextInput
                     placeholder="default"
@@ -161,7 +161,7 @@ export default function TonesStory() {
               </Stack>
             </Card>
             <Card flex={1} scheme="dark">
-              <Stack padding={[3, 4, 5]} space={4}>
+              <Stack gap={4} padding={[3, 4, 5]}>
                 <Card padding={3}>
                   <TextInput
                     placeholder="default"

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

@@ -1,19 +1,19 @@
 import {CloseIcon} from '@sanity/icons'
 import {
+  _composeClassNames,
   _inputElement,
   _inputPresentation,
-  composeClassNames,
-  InputStyleProps,
-  ResponsiveProp,
+  type InputStyleProps,
+  type ResponsiveProp,
   textInput,
 } from '@sanity/ui/css'
-import {Space, ThemeFontWeightKey} from '@sanity/ui/theme'
+import type {Space, ThemeFontWeightKey} from '@sanity/ui/theme'
 import {
-  CSSProperties,
-  ElementType,
+  type CSSProperties,
+  type ElementType,
   isValidElement,
-  MouseEvent,
-  ReactNode,
+  type MouseEvent,
+  type ReactNode,
   useCallback,
   useImperativeHandle,
   useMemo,
@@ -24,9 +24,9 @@ import {isValidElementType} from 'react-is'
 import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp, useCustomValidity} from '../../hooks'
 import {isRecord} from '../../lib/isRecord'
-import {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 import {Box} from '../box'
-import {Button, ButtonProps} from '../button'
+import {Button, type ButtonProps} from '../button'
 import {Text} from '../text'
 
 /** @public */
@@ -177,7 +177,7 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
     <Box
       align="center"
       as="span"
-      className={composeClassNames(
+      className={_composeClassNames(
         className,
         textInput({
           border,
@@ -190,7 +190,9 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
       )}
       data-icon-left={IconComponent ? '' : undefined}
       data-icon-right={IconRightComponent ? '' : undefined}
+      data-invalid={customValidity ? '' : undefined}
       data-prefix={prefix ? '' : undefined}
+      data-read-only={!disabled && readOnly ? '' : undefined}
       data-suffix={suffix ? '' : undefined}
       data-ui="TextInput"
       display="flex"