@sanity/ui 2.10.0-corel.0 → 3.0.0-static.1

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

@@ -0,0 +1,16 @@
+import {SpinnerIcon} from '@sanity/icons'
+import {animatedSpinnerIcon, composeClassNames} from '@sanity/ui/css'
+import {ReactElement, SVGProps} from 'react'
+
+/** @internal */
+export function AnimatedSpinnerIcon(props: SVGProps<SVGSVGElement>): ReactElement {
+  const {className, ...restProps} = props
+
+  return (
+    <SpinnerIcon
+      {...restProps}
+      data-sanity-icon="animated-spinner"
+      className={composeClassNames(className, animatedSpinnerIcon())}
+    />
+  )
+}

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

@@ -1,32 +1,17 @@
-import {SpinnerIcon} from '@sanity/icons'
+import {ResponsiveProp, spinner} from '@sanity/ui/css'
+import {FontTextSize} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
-import {styled, keyframes} from 'styled-components'
 import {Text} from '../text'
+import {AnimatedSpinnerIcon} from './animatedSpinnerIcon'
 
 /**
  * @public
  */
 export interface SpinnerProps {
   muted?: boolean
-  size?: number | number[]
+  size?: ResponsiveProp<FontTextSize>
 }
 
-const rotate = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-`
-
-const Root = styled(Text)`
-  & > span > svg {
-    animation: ${rotate} 500ms linear infinite;
-  }
-`
-
 /**
  * Indicate that something is loading for an indeterminate amount of time.
  *
@@ -37,9 +22,10 @@ export const Spinner = forwardRef(function Spinner(
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   return (
-    <Root data-ui="Spinner" {...props} ref={ref}>
-      <SpinnerIcon />
-    </Root>
+    <Text data-ui="Spinner" {...props} className={spinner()} ref={ref}>
+      <AnimatedSpinnerIcon />
+    </Text>
   )
 })
+
 Spinner.displayName = 'ForwardRef(Spinner)'

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

@@ -1,39 +1,41 @@
+import {ResponsiveProp} from '@sanity/ui/css'
+import {Space} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'
-import {stackBaseStyle, responsiveStackSpaceStyle, ResponsiveStackSpaceStyleProps} from './styles'
 
 /**
  * @public
  */
-export interface StackProps extends BoxProps {
+export interface StackProps
+  extends Omit<BoxProps, 'direction' | 'display' | 'gap' | 'gapX' | 'gapY'> {
   as?: React.ElementType | keyof JSX.IntrinsicElements
-  space?: number | number[]
+  space?: ResponsiveProp<Space>
 }
 
-const Root = styled(Box)<ResponsiveStackSpaceStyleProps>(stackBaseStyle, responsiveStackSpaceStyle)
-
 /**
  * The `Stack` component is used to place elements on top of each other.
  *
  * @public
  */
 export const Stack = forwardRef(function Stack(
-  props: StackProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
+  props: StackProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref' | 'width'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {as, space, ...restProps} = props
 
   return (
-    <Root
+    <Box
+      as={as}
       data-as={typeof as === 'string' ? as : undefined}
       data-ui="Stack"
       {...restProps}
-      $space={useArrayProp(space)}
+      direction="column"
+      display="flex"
       forwardedAs={as}
+      gapY={space}
       ref={ref}
     />
   )
 })
+
 Stack.displayName = 'ForwardRef(Stack)'

package/src/core/primitives/stack/styles.ts

@@ -1,5 +1,5 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {rem, _responsive, ThemeProps} from '../../styles'
+import {rem, _responsive, ThemeProps} from '../../_compat'
 
 export interface ResponsiveStackSpaceStyleProps {
   $space: number[]

package/src/core/primitives/switch/styles.ts

@@ -1,17 +1,17 @@
 import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-import {rem, ThemeProps} from '../../styles'
-import {focusRingStyle} from '../../styles/internal'
+import {rem, ThemeProps} from '../../_compat'
+import {focusRingStyle} from '../../_compat/styles/internal'
+import {css} from '../../lib/styled'
 
 /* Root */
-export function switchBaseStyles(): ReturnType<typeof css> {
-  return css`
-    position: relative;
-    &:not([hidden]) {
-      display: inline-block;
-    }
-  `
-}
+// export function switchBaseStyles(): ReturnType<typeof css> {
+//   return css`
+//     position: relative;
+//     &:not([hidden]) {
+//       display: inline-block;
+//     }
+//   `
+// }
 
 /* Input */
 export function switchInputStyles(): ReturnType<typeof css> {

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

@@ -1,12 +1,6 @@
+import {_switch, composeClassNames} from '@sanity/ui/css'
 import {forwardRef, useEffect, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
-import {
-  switchBaseStyles,
-  switchRepresentationStyles,
-  switchThumbStyles,
-  switchTrackStyles,
-  switchInputStyles,
-} from './styles'
+import {Box} from '../box'
 
 /**
  * @public
@@ -15,12 +9,6 @@ export interface SwitchProps {
   indeterminate?: boolean
 }
 
-const Root = styled.span(switchBaseStyles)
-const Input = styled.input(switchInputStyles)
-const Representation = styled.span(switchRepresentationStyles)
-const Track = styled.span(switchTrackStyles)
-const Thumb = styled.span<{$checked?: boolean; $indeterminate?: boolean}>(switchThumbStyles)
-
 /**
  * The `Switch` component allows the user to toggle a setting on and off.
  *
@@ -48,20 +36,31 @@ export const Switch = forwardRef(function Switch(
   }, [indeterminate])
 
   return (
-    <Root className={className} data-ui="Switch" style={style}>
-      <Input
+    <Box
+      className={composeClassNames(className, _switch())}
+      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"
         disabled={disabled || readOnly}
         type="checkbox"
         ref={ref}
       />
-      <Representation aria-hidden data-name="representation">
-        <Track />
-        <Thumb $checked={checked} $indeterminate={indeterminate} />
-      </Representation>
-    </Root>
+      <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>
+    </Box>
   )
 })
 Switch.displayName = 'ForwardRef(Switch)'

package/src/core/primitives/text/styles.ts

@@ -1,6 +1,6 @@
 import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-import {ThemeProps} from '../../styles'
+import {ThemeProps} from '../../_compat'
+import {css} from '../../lib/styled'
 
 export function textBaseStyle(
   props: {$accent?: boolean; $muted?: boolean} & ThemeProps,
@@ -9,7 +9,6 @@ export function textBaseStyle(
   const {font} = getTheme_v2(props.theme)
 
   return css`
-    min-width: 0;
     color: var(--card-fg-color);
 
     ${$accent &&

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

@@ -1,25 +1,16 @@
+import {composeClassNames, text, TextStyleProps} from '@sanity/ui/css'
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {
-  ResponsiveFontStyleProps,
-  responsiveTextAlignStyle,
-  responsiveTextFont,
-} from '../../styles/internal'
-import {TextAlign} from '../../types'
-import {textBaseStyle} from './styles'
+import {styled} from '../../lib/styled'
 
 /**
  * @public
  */
-export interface TextProps {
+export interface TextProps extends TextStyleProps {
   accent?: boolean
-  align?: TextAlign | TextAlign[]
   as?: React.ElementType | keyof JSX.IntrinsicElements
   /** When `true` the text color will be muted. */
   muted?: boolean
-  size?: number | number[]
   /**
    * Controls how overflowing text is treated.
    * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
@@ -29,12 +20,6 @@ export interface TextProps {
   weight?: ThemeFontWeightKey
 }
 
-const Root = styled.div<ResponsiveFontStyleProps>(
-  responsiveTextFont,
-  responsiveTextAlignStyle,
-  textBaseStyle,
-)
-
 const SpanWithTextOverflow = styled.span`
   display: block;
   white-space: nowrap;
@@ -55,7 +40,9 @@ export const Text = forwardRef(function Text(
   const {
     accent = false,
     align,
+    as: As = 'div',
     children: childrenProp,
+    className,
     muted = false,
     size = 2,
     textOverflow,
@@ -72,18 +59,24 @@ export const Text = forwardRef(function Text(
   }
 
   return (
-    <Root
+    <As
       data-ui="Text"
       {...restProps}
-      $accent={accent}
-      $align={useArrayProp(align)}
-      $muted={muted}
       ref={ref}
-      $size={useArrayProp(size)}
-      $weight={weight}
+      className={composeClassNames(
+        className,
+        text({
+          accent,
+          align,
+          muted,
+          size,
+          weight,
+        }),
+      )}
     >
       {children}
-    </Root>
+    </As>
   )
 })
+
 Text.displayName = 'ForwardRef(Text)'

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

@@ -1,4 +1,4 @@
-import {Card, Container, Flex, Stack, Text, TextArea} from '@sanity/ui'
+import {Card, Container, Flex, Radius, Stack, Text, TextArea} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {
   WORKSHOP_CARD_TONE_OPTIONS,
@@ -37,7 +37,7 @@ export default function PlainStory() {
               id="text-area-example"
               padding={padding}
               placeholder={placeholder}
-              radius={radius}
+              radius={radius as Radius}
               readOnly={readOnly}
               weight={weight}
             />

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

@@ -1,7 +1,5 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
-import {useCustomValidity, useArrayProp} from '../../hooks'
 import {
   responsiveInputPaddingStyle,
   responsiveRadiusStyle,
@@ -13,7 +11,9 @@ import {
   textInputBaseStyle,
   textInputFontSizeStyle,
   textInputRepresentationStyle,
-} from '../../styles/internal'
+} from '../../_compat/styles/internal'
+import {useCustomValidity, useArrayProp} from '../../hooks'
+import {styled} from '../../lib/styled'
 import {useRootTheme} from '../../theme'
 import {ResponsiveRadiusProps} from '../types'
 

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

@@ -1,5 +1,6 @@
 import {icons, IconSymbol} 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 {fireEvent} from '@testing-library/dom'
@@ -79,15 +80,15 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
       border={border}
       customValidity={customValidity}
       disabled={disabled}
-      fontSize={fontSize}
+      fontSize={fontSize as FontTextSize}
       icon={icon && icons[icon]}
       iconRight={iconRight && icons[iconRight]}
       id="text-input-example"
-      name="email"
+      name="test"
       onChange={handleChange}
       padding={padding}
       placeholder={placeholder}
-      radius={radius}
+      radius={radius as Radius}
       readOnly={readOnly}
       ref={ref}
       space={space}