@sanity/ui 2.9.0-corel.0 → 3.0.0-static.0

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

@@ -1,10 +1,13 @@
 import {Strategy} from '@floating-ui/react-dom'
+import {RadiusStyleProps} from '@sanity/ui/css'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {MotionProps, motion} from 'framer-motion'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
-import {styled} from 'styled-components'
-import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY, POPOVER_MOTION_PROPS} from '../../constants'
-import {BoxOverflow, CardTone, Placement, PopoverMargins, Radius} from '../../types'
+import {
+  // POPOVER_MOTION_CONTENT_OPACITY_PROPERTY,
+  POPOVER_MOTION_PROPS,
+} from '../../constants'
+import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
 import {Arrow, useLayer} from '../../utils'
 import {Card, CardProps} from '../card'
 import {Flex} from '../flex'
@@ -15,46 +18,38 @@ import {
   DEFAULT_POPOVER_MARGINS,
 } from './constants'
 
-const MotionCard = styled(motion(Card))`
-  &:not([hidden]) {
-    display: flex;
-  }
-  flex-direction: column;
-  width: max-content;
-  min-width: min-content;
-  & > * {
-    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-    will-change: opacity;
-  }
-`
+/** @internal */
+export interface PopoverCardProps extends RadiusStyleProps {
+  /** @beta*/
+  __unstable_margins?: PopoverMargins
+  animate?: boolean
+  arrow: boolean
+  arrowRef: React.Ref<HTMLDivElement>
+  arrowX?: number
+  arrowY?: number
+  originX?: number
+  originY?: number
+  overflow?: BoxOverflow
+  padding?: number | number[]
+  placement: Placement
+  scheme?: ThemeColorSchemeKey
+  shadow?: number | number[]
+  strategy: Strategy
+  tone: CardTone
+  width: number | undefined
+  x: number | null
+  y: number | null
+}
+
+const MotionCard = motion(Card)
 
 /**
  * @internal
  */
 export const PopoverCard = memo(
   forwardRef(function PopoverCard(
-    props: {
-      /** @beta*/
-      __unstable_margins?: PopoverMargins
-      animate?: boolean
-      arrow: boolean
-      arrowRef: React.Ref<HTMLDivElement>
-      arrowX?: number
-      arrowY?: number
-      originX?: number
-      originY?: number
-      overflow?: BoxOverflow
-      padding?: number | number[]
-      placement: Placement
-      radius?: Radius | Radius[]
-      scheme?: ThemeColorSchemeKey
-      shadow?: number | number[]
-      strategy: Strategy
-      tone: CardTone
-      width: number | undefined
-      x: number | null
-      y: number | null
-    } & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
+    props: PopoverCardProps &
+      Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width' | 'wrap'>,
     ref: React.ForwardedRef<HTMLDivElement>,
   ) {
     const {
@@ -121,6 +116,7 @@ export const PopoverCard = memo(
 
     return (
       <MotionCard
+        className="popover-card"
         data-ui="Popover"
         {...(restProps as CardProps & MotionProps)}
         data-placement={placement}
@@ -131,7 +127,9 @@ export const PopoverCard = memo(
         sizing="border"
         style={rootStyle}
         tone={tone}
-        {...(animate ? POPOVER_MOTION_PROPS : {})}
+        // todo
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        {...((animate ? POPOVER_MOTION_PROPS : {}) as any)}
       >
         <Flex data-ui="Popover__wrapper" direction="column" flex={1} overflow={overflow}>
           <Flex direction="column" flex={1} padding={padding}>

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

@@ -1,5 +1,5 @@
 import {forwardRef, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
+import {styled} from '../../lib/styled'
 import {useCustomValidity} from '../../hooks'
 import {radioBaseStyle, inputElementStyle} from './styles'
 

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

@@ -1,5 +1,5 @@
 import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
+import {css} from '../../lib/styled'
 import {rem, ThemeProps} from '../../styles'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
 

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

@@ -1,6 +1,6 @@
 import {ChevronDownIcon} from '@sanity/icons'
 import {forwardRef, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
+import {styled} from '../../lib/styled'
 import {useCustomValidity, useArrayProp} from '../../hooks'
 import {Radius} from '../../types'
 import {Box} from '../box'

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

@@ -1,6 +1,6 @@
 import {ThemeFontSize, getTheme_v2} from '@sanity/ui/theme'
 import {CSSObject} from '@sanity/ui/theme'
-import {css} from 'styled-components'
+import {css} from '../../lib/styled'
 import {rem, _responsive, ThemeProps} from '../../styles'
 import {
   focusRingBorderStyle,

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

@@ -1,6 +1,7 @@
 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'
 
 /**
@@ -8,25 +9,9 @@ import {Text} from '../text'
  */
 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}>
+    <Text data-ui="Spinner" {...props} className={spinner()} ref={ref}>
       <SpinnerIcon />
-    </Root>
+    </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/switch/styles.ts

@@ -1,17 +1,17 @@
 import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
+import {css} from '../../lib/styled'
 import {rem, ThemeProps} from '../../styles'
 import {focusRingStyle} from '../../styles/internal'
 
 /* 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/__workshop__/colored.tsx

@@ -1,7 +1,7 @@
 import {Flex, Text, ThemeProps} from '@sanity/ui'
 import {ThemeColorAvatarColorKey, ThemeColorSpotKey, getTheme_v2} from '@sanity/ui/theme'
 import {useSelect} from '@sanity/ui-workshop'
-import {styled, css} from 'styled-components'
+import {styled, css} from '../../../lib/styled'
 import {WORKSHOP_SPOT_COLOR_OPTIONS} from '../../../__workshop__/constants'
 
 const ColoredText = styled(Text)<{$color?: ThemeColorSpotKey}>((

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

@@ -1,5 +1,5 @@
 import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
+import {css} from '../../lib/styled'
 import {ThemeProps} from '../../styles'
 
 export function textBaseStyle(
@@ -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,19 @@
+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 {styled} from '../../lib/styled'
 import {TextAlign} from '../../types'
-import {textBaseStyle} from './styles'
 
 /**
  * @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 +23,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 +43,9 @@ export const Text = forwardRef(function Text(
   const {
     accent = false,
     align,
+    as: As = 'div',
     children: childrenProp,
+    className,
     muted = false,
     size = 2,
     textOverflow,
@@ -72,18 +62,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,
+          muted,
+          size,
+          weight,
+        }),
+      )}
     >
       {children}
-    </Root>
+    </As>
   )
 })
+
 Text.displayName = 'ForwardRef(Text)'

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

@@ -1,6 +1,6 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
+import {styled} from '../../lib/styled'
 import {useCustomValidity, useArrayProp} from '../../hooks'
 import {
   responsiveInputPaddingStyle,

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

@@ -83,7 +83,7 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
       icon={icon && icons[icon]}
       iconRight={iconRight && icons[iconRight]}
       id="text-input-example"
-      name="email"
+      name="test"
       onChange={handleChange}
       padding={padding}
       placeholder={placeholder}