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

package/src/core/components/hotkeys/hotkeys.tsx

@@ -1,43 +1,31 @@
+import {RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
+import {FontTextSize, Space} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
-import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
-import {Inline, KBD} from '../../primitives'
-import {Radius} from '../../types'
+import {Box, Inline, KBD} from '../../primitives'
 
 /**
  * @public
  */
-export interface HotkeysProps {
-  fontSize?: number | number[]
-  padding?: number | number[]
-  radius?: Radius | Radius[]
-  space?: number | number[]
+export interface HotkeysProps extends RadiusStyleProps {
+  fontSize?: ResponsiveProp<FontTextSize>
+  padding?: ResponsiveProp<Space>
+  space?: ResponsiveProp<Space>
   keys?: string[]
 }
 
-const Root = styled.kbd`
-  font: inherit;
-  padding: 1px;
-
-  &:not([hidden]) {
-    display: block;
-  }
-`
-
-const Key = styled(KBD)`
-  &:not([hidden]) {
-    display: block;
-  }
-`
-
 /**
  * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
  *
  * @public
  */
 export const Hotkeys = forwardRef(function Hotkeys(
-  props: HotkeysProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
-  ref: React.Ref<HTMLElement>,
+  props: HotkeysProps &
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'display' | 'height' | 'ref' | 'size' | 'width' | 'wrap'
+    >,
+  ref: React.Ref<HTMLDivElement>,
 ) {
   const {fontSize, keys, padding, radius, space: spaceProp = 0.5, ...restProps} = props
   const space = useArrayProp(spaceProp)
@@ -47,15 +35,16 @@ export const Hotkeys = forwardRef(function Hotkeys(
   }
 
   return (
-    <Root data-ui="Hotkeys" {...restProps} ref={ref}>
+    <Box as="kbd" data-ui="Hotkeys" {...restProps} display="flex" gap={spaceProp} ref={ref}>
       <Inline as="span" space={space}>
         {keys.map((key, i) => (
-          <Key fontSize={fontSize} key={i} padding={padding} radius={radius}>
+          <KBD display="block" fontSize={fontSize} key={i} padding={padding} radius={radius}>
             {key}
-          </Key>
+          </KBD>
         ))}
       </Inline>
-    </Root>
+    </Box>
   )
 })
+
 Hotkeys.displayName = 'ForwardRef(Hotkeys)'

package/src/core/components/menu/menu.tsx

@@ -1,8 +1,9 @@
+import {PaddingStyleProps, ResponsiveProp} from '@sanity/ui/css'
+import {Space} from '@sanity/ui/theme'
 import {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'react'
-import {styled} from 'styled-components'
 import {useClickOutsideEvent, useGlobalKeyDown} from '../../hooks'
+import {styled} from '../../lib/styled'
 import {Box, Stack} from '../../primitives'
-import {ResponsivePaddingProps} from '../../primitives/types'
 import {useLayer} from '../../utils'
 import {MenuContext, MenuContextValue} from './menuContext'
 import {useMenuController} from './useMenuController'
@@ -10,7 +11,7 @@ import {useMenuController} from './useMenuController'
 /**
  * @public
  */
-export interface MenuProps extends ResponsivePaddingProps {
+export interface MenuProps extends PaddingStyleProps {
   /**
    * @deprecated Use `shouldFocus="first"` instead.
    */
@@ -26,7 +27,8 @@ export interface MenuProps extends ResponsivePaddingProps {
   originElement?: HTMLElement | null
   registerElement?: (el: HTMLElement) => () => void
   shouldFocus?: 'first' | 'last' | null
-  space?: number | number[]
+  // space?: number | number[]
+  space?: ResponsiveProp<Space>
 }
 
 const Root = styled(Box)`
@@ -40,7 +42,8 @@ const Root = styled(Box)`
  * @public
  */
 export const Menu = forwardRef(function Menu(
-  props: MenuProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'role' | 'tabIndex'>,
+  props: MenuProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'role' | 'tabIndex' | 'width' | 'wrap'>,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {

package/src/core/components/menu/menuDivider.ts

@@ -1,4 +1,4 @@
-import {styled} from 'styled-components'
+import {styled} from '../../lib/styled'
 
 /**
  * @public
@@ -9,4 +9,5 @@ export const MenuDivider = styled.hr`
   background: var(--card-hairline-soft-color);
   margin: 0;
 `
+
 MenuDivider.displayName = 'MenuDivider'

package/src/core/components/menu/menuGroup.tsx

@@ -1,10 +1,12 @@
 import {ChevronRightIcon} from '@sanity/icons'
+import {ResponsiveProp} from '@sanity/ui/css'
+import {Space} from '@sanity/ui/theme'
 import {isValidElement, useCallback, useEffect, useState} from 'react'
 import {isValidElementType} from 'react-is'
-import {useArrayProp} from '../../hooks'
+// import {useArrayProp} from '../../hooks'
 import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
-import {useRootTheme} from '../../theme'
+// import {useRootTheme} from '../../theme'
 import {Radius, SelectableTone} from '../../types'
 import {Menu} from './menu'
 import {useMenu} from './useMenu'
@@ -19,7 +21,8 @@ export interface MenuGroupProps {
   padding?: number | number[]
   popover?: Omit<PopoverProps, 'content' | 'open'>
   radius?: Radius | Radius[]
-  space?: number | number[]
+  space?: ResponsiveProp<Space>
+  // space?: number | number[]
   text: React.ReactNode
   tone?: SelectableTone
 }
@@ -28,7 +31,10 @@ export interface MenuGroupProps {
  * @public
  */
 export function MenuGroup(
-  props: Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'popover' | 'ref' | 'tabIndex'> &
+  props: Omit<
+    React.HTMLProps<HTMLDivElement>,
+    'as' | 'height' | 'popover' | 'ref' | 'tabIndex' | 'width' | 'wrap'
+  > &
     MenuGroupProps,
 ): React.ReactElement {
   const {
@@ -46,7 +52,7 @@ export function MenuGroup(
     ...restProps
   } = props
   const menu = useMenu()
-  const {scheme} = useRootTheme()
+  // const {scheme} = useRootTheme()
   const {
     activeElement,
     mount,
@@ -166,14 +172,16 @@ export function MenuGroup(
         aria-pressed={as === 'button' ? withinMenu : undefined}
         data-pressed={as !== 'button' ? withinMenu : undefined}
         data-selected={!withinMenu && active ? '' : undefined}
-        $radius={useArrayProp(radius)}
-        $tone={tone}
-        $scheme={scheme}
+        // $radius={useArrayProp(radius)}
+        // $tone={tone}
+        // $scheme={scheme}
         onClick={handleClick}
         onKeyDown={handleKeyDown}
         onMouseEnter={handleMouseEnter}
+        radius={radius}
         ref={setRootElement}
         tabIndex={-1}
+        tone={tone}
         type={as === 'button' ? 'button' : undefined}
       >
         <Flex gap={space} padding={padding}>

package/src/core/components/menu/menuItem.tsx

@@ -1,3 +1,5 @@
+import {PaddingStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
+import {Space} from '@sanity/ui/theme'
 import {
   forwardRef,
   isValidElement,
@@ -9,11 +11,10 @@ import {
   useState,
 } from 'react'
 import {isValidElementType} from 'react-is'
-import {useArrayProp} from '../../hooks'
+// import {useArrayProp} from '../../hooks'
 import {Box, Flex, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
-import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../../primitives/types'
-import {useRootTheme} from '../../theme'
+// import {useRootTheme} from '../../theme'
 import {SelectableTone} from '../../types/selectable'
 import {Hotkeys} from '../hotkeys'
 import {useMenu} from './useMenu'
@@ -21,7 +22,7 @@ import {useMenu} from './useMenu'
 /**
  * @public
  */
-export interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
+export interface MenuItemProps extends PaddingStyleProps, RadiusStyleProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
   fontSize?: number | number[]
   hotkeys?: string[]
@@ -29,7 +30,8 @@ export interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusP
   iconRight?: React.ElementType | React.ReactNode
   pressed?: boolean
   selected?: boolean
-  space?: number | number[]
+  // space?: number | number[]
+  space?: ResponsiveProp<Space>
   text?: React.ReactNode
   tone?: SelectableTone
 }
@@ -39,7 +41,10 @@ export interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusP
  */
 export const MenuItem = forwardRef(function MenuItem(
   props: MenuItemProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'selected' | 'tabIndex'>,
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'height' | 'ref' | 'selected' | 'tabIndex' | 'width' | 'wrap'
+    >,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -66,7 +71,7 @@ export const MenuItem = forwardRef(function MenuItem(
     tone = 'default',
     ...restProps
   } = props
-  const {scheme} = useRootTheme()
+  // const {scheme} = useRootTheme()
   const menu = useMenu()
   const {
     activeElement,
@@ -105,7 +110,7 @@ export const MenuItem = forwardRef(function MenuItem(
     [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft],
   )
 
-  const hotkeysFontSize = useArrayProp(fontSize).map((s) => s - 1)
+  // const hotkeysFontSize = useArrayProp(fontSize).map((s) => s - 1)
 
   const setRef = useCallback((el: HTMLDivElement | null) => {
     ref.current = el
@@ -117,14 +122,16 @@ export const MenuItem = forwardRef(function MenuItem(
       data-ui="MenuItem"
       {...restProps}
       aria-pressed={as === 'button' && pressed}
+      as={as}
       data-pressed={as !== 'button' && pressed ? '' : undefined}
       data-selected={active ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
-      forwardedAs={as}
-      $radius={useArrayProp(radius)}
-      $padding={useArrayProp(0)}
-      $tone={disabled ? 'default' : tone}
-      $scheme={scheme}
+      // forwardedAs={as}
+      radius={radius}
+      // $radius={useArrayProp(radius)}
+      // $padding={useArrayProp(0)}
+      // $tone={disabled ? 'default' : tone}
+      // $scheme={scheme}
       disabled={disabled}
       onClick={handleClick}
       onMouseEnter={onItemMouseEnter}
@@ -132,6 +139,7 @@ export const MenuItem = forwardRef(function MenuItem(
       ref={setRef}
       role="menuitem"
       tabIndex={-1}
+      tone={tone}
       type={as === 'button' ? 'button' : undefined}
     >
       {(IconComponent || text || IconRightComponent) && (
@@ -153,7 +161,7 @@ export const MenuItem = forwardRef(function MenuItem(
 
           {hotkeys && (
             <Hotkeys
-              fontSize={hotkeysFontSize}
+              // fontSize={hotkeysFontSize}
               keys={hotkeys}
               style={{marginTop: -4, marginBottom: -4}}
             />
@@ -175,4 +183,5 @@ export const MenuItem = forwardRef(function MenuItem(
     </Selectable>
   )
 })
+
 MenuItem.displayName = 'ForwardRef(MenuItem)'

package/src/core/components/skeleton/skeleton.tsx

@@ -1,5 +1,5 @@
 import {forwardRef, useEffect, useState} from 'react'
-import {styled} from 'styled-components'
+import {styled} from '../../lib/styled'
 import {useArrayProp} from '../../hooks'
 import {Box} from '../../primitives'
 import {BoxProps, ResponsiveRadiusProps} from '../../primitives'

package/src/core/components/skeleton/styles.ts

@@ -1,4 +1,4 @@
-import {css, keyframes} from 'styled-components'
+import {css, keyframes} from '../../lib/styled'
 
 const keyframe = keyframes`
   0% {

package/src/core/components/skeleton/textSkeleton.tsx

@@ -1,6 +1,6 @@
 import {ThemeFontKey, getTheme_v2} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
-import {styled} from 'styled-components'
+import {styled} from '../../lib/styled'
 import {useArrayProp} from '../../hooks'
 import {ThemeProps, _responsive} from '../../styles'
 import {Skeleton, SkeletonProps} from './skeleton'

package/src/core/components/tab/tab.tsx

@@ -1,5 +1,6 @@
+import {ResponsiveProp} from '@sanity/ui/css'
+import {FontTextSize} from '@sanity/ui/theme'
 import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
 import {Button} from '../../primitives'
 import {ButtonTone} from '../../types'
 
@@ -14,17 +15,14 @@ export interface TabProps {
   'id': string
   'icon'?: React.ElementType | React.ReactNode
   'focused'?: boolean
-  'fontSize'?: number | number[]
+  'fontSize'?: ResponsiveProp<FontTextSize>
+  // 'fontSize'?: number | number[]
   'label'?: React.ReactNode
   'padding'?: number | number[]
   'selected'?: boolean
   'tone'?: ButtonTone
 }
 
-const CustomButton = styled(Button)`
-  max-width: 100%;
-`
-
 /**
  * @public
  */
@@ -76,7 +74,7 @@ export const Tab = forwardRef(function Tab(
   }, [focused])
 
   return (
-    <CustomButton
+    <Button
       data-ui="Tab"
       {...restProps}
       aria-selected={selected ? 'true' : 'false'}
@@ -97,4 +95,5 @@ export const Tab = forwardRef(function Tab(
     />
   )
 })
+
 Tab.displayName = 'ForwardRef(Tab)'

package/src/core/components/tab/tabList.tsx

@@ -1,5 +1,5 @@
 import {cloneElement, forwardRef, useCallback, useMemo, useState} from 'react'
-import {styled} from 'styled-components'
+import {styled} from '../../lib/styled'
 import {Inline, InlineProps} from '../../primitives'
 
 /**
@@ -13,7 +13,7 @@ function _isReactElement(node: unknown): node is React.ReactElement {
   return Boolean(node)
 }
 
-//Limits the width of tabs in tablist
+// Limits the width of tabs in tablist
 const CustomInline = styled(Inline)`
   & > div {
     display: inline-block;
@@ -74,4 +74,5 @@ export const TabList = forwardRef(function TabList(
     </CustomInline>
   )
 })
+
 TabList.displayName = 'ForwardRef(TabList)'

package/src/core/components/toast/styles.ts

@@ -1,6 +1,6 @@
-import {styled, keyframes, css} from 'styled-components'
 import {ThemeColorStateToneKey, getTheme_v2} from '../../../theme'
 import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY} from '../../constants'
+import {styled, keyframes, css} from '../../lib/styled'
 import {Flex} from '../../primitives'
 import {ThemeProps} from '../../styles'
 

package/src/core/components/toast/toast.tsx

@@ -1,6 +1,7 @@
 import {CloseIcon} from '@sanity/icons'
+import {RadiusStyleProps} from '@sanity/ui/css'
 import {ThemeColorStateToneKey} from '@sanity/ui/theme'
-import {styled} from 'styled-components'
+import {styled} from '../../lib/styled'
 import {Box, Button, Flex, Stack, Text, Card} from '../../primitives'
 import {ThemeProps} from '../../styles'
 import type {ButtonTone} from '../../types'
@@ -9,11 +10,10 @@ import {rootStyles, TextBox} from './styles'
 /**
  * @public
  */
-export interface ToastProps {
+export interface ToastProps extends RadiusStyleProps {
   closable?: boolean
   description?: React.ReactNode
   onClose?: () => void
-  radius?: number | number[]
   title?: React.ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
   duration?: number
@@ -52,7 +52,8 @@ const Root = styled(Card)<{$duration?: number; tone: ThemeColorStateToneKey} & T
  * @public
  */
 export function Toast(
-  props: ToastProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'title'>,
+  props: ToastProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'title' | 'width' | 'wrap'>,
 ): React.ReactElement {
   const {closable, description, duration, onClose, radius = 3, title, status, ...restProps} = props
   const cardTone = status ? STATUS_CARD_TONE[status] : 'default'
@@ -65,6 +66,7 @@ export function Toast(
       role={role}
       {...restProps}
       marginTop={3}
+      pointerEvents="auto"
       radius={radius}
       shadow={2}
       tone={cardTone}

package/src/core/components/toast/toastProvider.tsx

@@ -1,9 +1,9 @@
 import {AnimatePresence, motion, type Variants} from 'framer-motion'
 import {useMemo, useRef, useState, startTransition, useEffect} from 'react'
-import {styled} from 'styled-components'
 import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY} from '../../constants'
 import {useMounted} from '../../hooks/useMounted'
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
+// import {styled} from '../../lib/styled'
 import {Box} from '../../primitives'
 import {Layer} from '../../utils'
 import {Toast} from './toast'
@@ -27,23 +27,14 @@ export interface ToastProviderProps {
   zOffset?: number | number[]
 }
 
-const Root = styled(Layer)`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-`
-
-const ToastContainer = styled.div`
-  box-sizing: border-box;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  max-width: 420px;
-  width: 100%;
-`
+// const ToastContainer = styled.div`
+//   box-sizing: border-box;
+//   position: absolute;
+//   right: 0;
+//   bottom: 0;
+//   max-width: 420px;
+//   width: 100%;
+// `
 
 let toastId = 0
 
@@ -153,8 +144,26 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
     <ToastContext.Provider value={value}>
       {children}
       {mounted && (
-        <Root data-ui="ToastProvider" zOffset={zOffset}>
-          <ToastContainer>
+        <Layer
+          className={undefined /* root */}
+          data-ui="ToastProvider"
+          inset={0}
+          pointerEvents="none"
+          position="fixed"
+          zOffset={zOffset}
+          width="fill"
+        >
+          <Box
+            className={undefined /* container */}
+            position="absolute"
+            sizing="border"
+            style={{
+              // todo: move to css
+              right: 0,
+              bottom: 0,
+              maxWidth: 420,
+            }}
+          >
             <Box padding={padding} paddingX={paddingX} paddingY={paddingY}>
               <AnimatePresence initial={false}>
                 {state.map(({dismiss, id, params}) => (
@@ -183,8 +192,8 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
                 ))}
               </AnimatePresence>
             </Box>
-          </ToastContainer>
-        </Root>
+          </Box>
+        </Layer>
       )}
     </ToastContext.Provider>
   )

package/src/core/components/tree/style.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 {_cardColorStyle} from '../../styles/card'
 

package/src/core/components/tree/tree.tsx

@@ -1,3 +1,5 @@
+import {ResponsiveProp} from '@sanity/ui/css'
+import {Space} from '@sanity/ui/theme'
 import {
   forwardRef,
   memo,
@@ -18,7 +20,8 @@ import {TreeContextValue, TreeState} from './types'
  * @beta
  */
 export interface TreeProps {
-  space?: number | number[]
+  // space?: number | number[]
+  space?: ResponsiveProp<Space>
 }
 
 /**
@@ -28,7 +31,10 @@ export interface TreeProps {
 export const Tree = memo(
   forwardRef(function Tree(
     props: TreeProps &
-      Omit<React.HTMLProps<HTMLDivElement>, 'align' | 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
+      Omit<
+        React.HTMLProps<HTMLDivElement>,
+        'align' | 'as' | 'height' | 'ref' | 'role' | 'width' | 'wrap'
+      >,
     forwardedRef: React.ForwardedRef<HTMLDivElement>,
   ): React.ReactElement {
     const {children, space = 1, onFocus, ...restProps} = props

package/src/core/components/tree/treeGroup.tsx

@@ -8,7 +8,7 @@ export interface TreeGroupProps {
 
 export const TreeGroup = memo(function TreeGroup(
   props: TreeGroupProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'role' | 'width' | 'wrap'>,
 ): React.ReactElement {
   const {children, expanded = false, ...restProps} = props
   const tree = useTree()