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

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

@@ -1,14 +1,9 @@
 import {ToggleArrowRightIcon} from '@sanity/icons'
-import {ThemeFontWeightKey} from '@sanity/ui/theme'
+import {composeClassNames, ResponsiveProp, treeItem} from '@sanity/ui/css'
+import {Space, ThemeFontWeightKey} from '@sanity/ui/theme'
 import {memo, useCallback, useEffect, useId, useMemo, useRef} from 'react'
-import {styled} from 'styled-components'
+import {styled} from '../../lib/styled'
 import {Box, BoxProps, Flex, Text} from '../../primitives'
-import {
-  treeItemRootStyle,
-  treeItemRootColorStyle,
-  treeItemBoxStyle,
-  TreeItemBoxStyleProps,
-} from './style'
 import {TreeContext} from './treeContext'
 import {TreeGroup} from './treeGroup'
 import {useTree} from './useTree'
@@ -25,14 +20,15 @@ export interface TreeItemProps {
    */
   linkAs?: BoxProps['as']
   padding?: number | number[]
-  space?: number | number[]
+  space?: ResponsiveProp<Space>
+  // space?: number | number[]
   text?: React.ReactNode
   weight?: ThemeFontWeightKey
 }
 
-const Root = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle))
+// const Root = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle))
 
-const TreeItemBox = styled(Box).attrs({forwardedAs: 'a'})<TreeItemBoxStyleProps>(treeItemBoxStyle)
+// const TreeItemBox = styled(Box).attrs({forwardedAs: 'a'})<TreeItemBoxStyleProps>(treeItemBoxStyle)
 
 const ToggleArrowText = styled(Text)`
   & > svg {
@@ -45,10 +41,12 @@ const ToggleArrowText = styled(Text)`
  * @beta
  */
 export const TreeItem = memo(function TreeItem(
-  props: TreeItemProps & Omit<React.HTMLProps<HTMLLIElement>, 'as' | 'ref' | 'role'>,
+  props: TreeItemProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'role' | 'width' | 'wrap'>,
 ): React.ReactElement {
   const {
     children,
+    className,
     expanded: expandedProp = false,
     fontSize = 1,
     href,
@@ -64,7 +62,7 @@ export const TreeItem = memo(function TreeItem(
     weight,
     ...restProps
   } = props
-  const rootRef = useRef<HTMLLIElement | null>(null)
+  const rootRef = useRef<HTMLDivElement | null>(null)
   const treeitemRef = useRef<HTMLDivElement | null>(null)
   const tree = useTree()
   const {path, registerItem, setExpanded, setFocusedElement} = tree
@@ -82,7 +80,7 @@ export const TreeItem = memo(function TreeItem(
   )
 
   const handleClick = useCallback(
-    (event: React.MouseEvent<HTMLLIElement>) => {
+    (event: React.MouseEvent<HTMLDivElement>) => {
       if (onClick) onClick(event)
 
       const target = event.target
@@ -118,9 +116,9 @@ export const TreeItem = memo(function TreeItem(
   }, [expanded, itemPath, registerItem, selected])
 
   const content = (
-    <Flex padding={padding}>
+    <Flex gap={space} padding={padding}>
       <Box
-        marginRight={space}
+        // marginRight={space}
         style={{
           visibility: IconComponent || children ? 'visible' : 'hidden',
           pointerEvents: 'none',
@@ -147,18 +145,20 @@ export const TreeItem = memo(function TreeItem(
 
   if (href) {
     return (
-      <Root
+      <Box
         data-selected={selected ? '' : undefined}
         data-tree-id={id}
         data-tree-key={itemKey}
         data-ui="TreeItem"
         {...restProps}
+        as="li"
+        className={composeClassNames(className, treeItem())}
         onClick={handleClick}
         ref={rootRef}
         role="none"
       >
-        <TreeItemBox
-          $level={tree.level}
+        <Box
+          // $level={tree.level}
           aria-expanded={expanded}
           as={linkAs}
           data-ui="TreeItem__box"
@@ -166,19 +166,23 @@ export const TreeItem = memo(function TreeItem(
           ref={treeitemRef}
           role="treeitem"
           tabIndex={tabIndex}
+          // todo
+          style={{
+            paddingLeft: `calc(var(--space-2) * ${tree.level})`,
+          }}
         >
           {content}
-        </TreeItemBox>
+        </Box>
 
         <TreeContext.Provider value={contextValue}>
           {children && <TreeGroup hidden={!expanded}>{children}</TreeGroup>}
         </TreeContext.Provider>
-      </Root>
+      </Box>
     )
   }
 
   return (
-    <Root
+    <Box
       data-selected={selected ? '' : undefined}
       data-ui="TreeItem"
       data-tree-id={id}
@@ -191,14 +195,23 @@ export const TreeItem = memo(function TreeItem(
       role="treeitem"
       tabIndex={tabIndex}
     >
-      <TreeItemBox $level={tree.level} as="div" data-ui="TreeItem__box">
+      <Box
+        // $level={tree.level}
+        as="div"
+        data-ui="TreeItem__box"
+        // todo
+        style={{
+          paddingLeft: `calc(var(--space-2) * ${tree.level})`,
+        }}
+      >
         {content}
-      </TreeItemBox>
+      </Box>
 
       <TreeContext.Provider value={contextValue}>
         {children && <TreeGroup expanded={expanded}>{children}</TreeGroup>}
       </TreeContext.Provider>
-    </Root>
+    </Box>
   )
 })
+
 TreeItem.displayName = 'Memo(TreeItem)'

package/src/core/components/tree/types.ts

@@ -1,3 +1,6 @@
+import {ResponsiveProp} from '@sanity/ui/css'
+import {Space} from '@sanity/ui/theme'
+
 /**
  * @beta
  */
@@ -16,6 +19,7 @@ export interface TreeContextValue {
   registerItem: (element: HTMLElement, path: string, expanded: boolean, selected: boolean) => void
   setExpanded: (path: string, expanded: boolean) => void
   setFocusedElement: (focusedElement: HTMLElement | null) => void
-  space: number | number[]
+  // space: number | number[]
+  space: ResponsiveProp<Space>
   state: TreeState
 }

package/src/core/lib/styled/elements.ts

@@ -0,0 +1,135 @@
+export const elements = [
+  'a',
+  'abbr',
+  'address',
+  'area',
+  'article',
+  'aside',
+  'audio',
+  'b',
+  'base',
+  'bdi',
+  'bdo',
+  'big',
+  'blockquote',
+  'body',
+  'br',
+  'button',
+  'canvas',
+  'caption',
+  'cite',
+  'code',
+  'col',
+  'colgroup',
+  'data',
+  'datalist',
+  'dd',
+  'del',
+  'details',
+  'dfn',
+  'dialog',
+  'div',
+  'dl',
+  'dt',
+  'em',
+  'embed',
+  'fieldset',
+  'figcaption',
+  'figure',
+  'footer',
+  'form',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'header',
+  'hgroup',
+  'hr',
+  'html',
+  'i',
+  'iframe',
+  'img',
+  'input',
+  'ins',
+  'kbd',
+  'keygen',
+  'label',
+  'legend',
+  'li',
+  'link',
+  'main',
+  'map',
+  'mark',
+  'menu',
+  'menuitem',
+  'meta',
+  'meter',
+  'nav',
+  'noscript',
+  'object',
+  'ol',
+  'optgroup',
+  'option',
+  'output',
+  'p',
+  'param',
+  'picture',
+  'pre',
+  'progress',
+  'q',
+  'rp',
+  'rt',
+  'ruby',
+  's',
+  'samp',
+  'script',
+  'section',
+  'select',
+  'small',
+  'source',
+  'span',
+  'strong',
+  'style',
+  'sub',
+  'summary',
+  'sup',
+  'table',
+  'tbody',
+  'td',
+  'textarea',
+  'tfoot',
+  'th',
+  'thead',
+  'time',
+  'tr',
+  'track',
+  'u',
+  'ul',
+  'use',
+  'var',
+  'video',
+  'wbr', // SVG
+  'circle',
+  'clipPath',
+  'defs',
+  'ellipse',
+  'foreignObject',
+  'g',
+  'image',
+  'line',
+  'linearGradient',
+  'marker',
+  'mask',
+  'path',
+  'pattern',
+  'polygon',
+  'polyline',
+  'radialGradient',
+  'rect',
+  'stop',
+  'svg',
+  'text',
+  'tspan',
+] as const

package/src/core/lib/styled/index.ts

@@ -0,0 +1,2 @@
+export * from './members'
+export * from './styled'

package/src/core/lib/styled/members.ts

@@ -0,0 +1,15 @@
+import {
+  css as _css,
+  createGlobalStyle as _createGlobalStyle,
+  type ExecutionContext as _ExecutionContext,
+  keyframes as _keyframes,
+  ThemeProvider as _ThemeProvider,
+  useTheme as _useTheme,
+} from 'styled-components'
+
+export const createGlobalStyle = _createGlobalStyle
+export const css = _css
+export type ExecutionContext = _ExecutionContext
+export const keyframes = _keyframes
+export const ThemeProvider = _ThemeProvider
+export const useTheme = _useTheme

package/src/core/lib/styled/styled.ts

@@ -0,0 +1,79 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+import {createElement, forwardRef} from 'react'
+import {styled as _styled} from 'styled-components'
+import {elements} from './elements'
+
+const baseStyled = (tagName: string): any => {
+  const m = (_strings: TemplateStringsArray, ..._interpolations: any[]) => {
+    const Styled = forwardRef(function Styled(props: any, ref: any) {
+      const {as, forwardedAs, ...rest} = props
+
+      const sanitizedProps = Object.fromEntries(
+        Object.entries(rest)
+          .filter(([, val]) => Boolean(val) && (!isArray(val) || val.length > 0))
+          .map(([key, val]) => {
+            if (key.startsWith('$')) {
+              return [`data-${toSnakeCase(key.slice(1))}`, val]
+            }
+
+            return [key, val]
+          }),
+      )
+
+      const t = as ?? tagName
+
+      return createElement(t, {...sanitizedProps, as: forwardedAs, ref})
+    })
+
+    Styled.displayName = `Styled(${typeof tagName === 'function' ? (tagName as any).displayName : tagName})`
+
+    return Styled
+  }
+
+  m['attrs'] = (attrs: any) => {
+    return (_strings: TemplateStringsArray, ..._interpolations: any[]) => {
+      const StyledAttrs = forwardRef(function StyledAttrs(_props: any, ref: any) {
+        const props = {...attrs, ..._props}
+        const {as, forwardedAs, ...rest} = props
+
+        const sanitizedProps = Object.fromEntries(
+          Object.entries(rest)
+            .filter(([, val]) => Boolean(val) && (!isArray(val) || val.length > 0))
+            .map(([key, val]) => {
+              if (key.startsWith('$')) {
+                return [`data-${toSnakeCase(key.slice(1))}`, val]
+              }
+
+              return [key, val]
+            }),
+        )
+
+        const t = as ?? tagName
+
+        return createElement(t, {...sanitizedProps, as: forwardedAs, ref})
+      })
+
+      StyledAttrs.displayName = `StyledAttrs(${typeof tagName === 'function' ? (tagName as any).displayName : tagName})`
+
+      return StyledAttrs
+    }
+  }
+
+  return m
+}
+
+export const styled = baseStyled as typeof _styled
+
+for (const tagName of elements) {
+  ;(styled as any)[tagName] = baseStyled(tagName)
+}
+
+function toSnakeCase(str: string): string {
+  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)
+}
+
+function isArray(value: unknown): value is unknown[] {
+  return Array.isArray(value)
+}

package/src/core/primitives/_selectable/selectable.tsx

@@ -1,14 +1,27 @@
-import {styled} from 'styled-components'
-import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/radius'
-import {Box} from '../box'
-import {selectableBaseStyle, selectableColorStyle, SelectableStyleProps} from './style'
-
-/**
- * @internal
- */
-export const Selectable = styled(Box)<SelectableStyleProps & ResponsiveRadiusStyleProps>(
-  responsiveRadiusStyle,
-  selectableBaseStyle,
-  selectableColorStyle,
-)
-Selectable.displayName = 'Selectable'
+import {composeClassNames, selectable, SelectableStyleProps} from '@sanity/ui/css'
+import {ForwardedRef, forwardRef, HTMLProps} from 'react'
+import {SelectableTone} from '../../types'
+import {Box, BoxProps} from '../box'
+
+/** @internal */
+export interface SelectableProps extends BoxProps, SelectableStyleProps {
+  tone?: SelectableTone
+}
+
+/** @internal */
+export const Selectable = forwardRef(function Selectable(
+  props: SelectableProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height' | 'wrap' | 'width'>,
+  ref: ForwardedRef<HTMLDivElement>,
+) {
+  const {className, radius, tone, ...restProps} = props
+
+  return (
+    <Box
+      {...restProps}
+      className={composeClassNames(className, selectable({radius, tone}))}
+      ref={ref}
+    />
+  )
+})
+
+Selectable.displayName = 'ForwardRef(Selectable)'

package/src/core/primitives/avatar/avatar.tsx

@@ -1,12 +1,21 @@
+import {
+  avatar,
+  avatarArrow,
+  avatarBgStroke,
+  avatarImage,
+  avatarInitials,
+  avatarStroke,
+  composeClassNames,
+} from '@sanity/ui/css'
 import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
 import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'react'
 import ReactIs from 'react-is'
-import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
+// import {styled} from '../../lib/styled'
 import {useTheme_v2} from '../../theme'
 import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'
 import {Label} from '../label'
-import {avatarStyle, responsiveAvatarSizeStyle} from './styles'
+// import {avatarStyle, responsiveAvatarSizeStyle} from './styles'
 
 /**
  * @public
@@ -30,24 +39,24 @@ export interface AvatarProps {
   title?: string
 }
 
-const Root = styled.div<{$color: ThemeColorAvatarColorKey; $size: AvatarSize[]}>(
-  responsiveAvatarSizeStyle,
-  avatarStyle.root,
-)
+// const Root = styled.div<{$color: ThemeColorAvatarColorKey; $size: AvatarSize[]}>(
+//   responsiveAvatarSizeStyle,
+//   avatarStyle.root,
+// )
 
-const Arrow = styled.div(avatarStyle.arrow)
+// const Arrow = styled.div(avatarStyle.arrow)
 
-const BgStroke = styled.ellipse(avatarStyle.bgStroke)
+// const BgStroke = styled.ellipse(avatarStyle.bgStroke)
 
-const Stroke = styled.ellipse(avatarStyle.stroke)
+// const Stroke = styled.ellipse(avatarStyle.stroke)
 
-const Initials = styled.div(avatarStyle.initials)
+// const Initials = styled.div(avatarStyle.initials)
 
-const InitialsLabel = styled(Label)({
-  color: 'inherit',
-})
+// const InitialsLabel = styled(Label)({
+//   color: 'inherit',
+// })
 
-const Image = styled.svg(avatarStyle.image)
+// const Image = styled.svg(avatarStyle.image)
 
 /**
  * Avatars are used to represent people and other agents (e.g. bots).
@@ -61,6 +70,7 @@ export const Avatar = forwardRef(function Avatar(
   const {
     __unstable_hideInnerStroke,
     as: asProp,
+    className,
     color = 'gray',
     src,
     title,
@@ -72,12 +82,12 @@ export const Avatar = forwardRef(function Avatar(
     size: sizeProp = 1,
     ...restProps
   } = props
-  const {avatar} = useTheme_v2()
-  const as = ReactIs.isValidElementType(asProp) ? asProp : 'div'
+  const {avatar: avatarTheme} = useTheme_v2()
+  const As = ReactIs.isValidElementType(asProp) ? asProp : 'div'
   const size = useArrayProp(sizeProp)
 
   // @todo: remove this
-  const avatarSize = avatar.sizes[size[0]] || avatar.sizes[0]
+  const avatarSize = avatarTheme.sizes[size[0]] || avatarTheme.sizes[0]
   const _sizeRem = avatarSize.size
   const _radius = _sizeRem / 2
 
@@ -124,30 +134,37 @@ export const Avatar = forwardRef(function Avatar(
   )
 
   return (
-    <Root
-      as={as}
-      data-as={typeof as === 'string' ? as : undefined}
+    <As
+      data-as={typeof As === 'string' ? As : undefined}
       data-ui="Avatar"
       {...restProps}
       $color={color}
       $size={size}
       aria-label={title}
-      data-arrow-position={arrowPosition}
+      className={composeClassNames(
+        className,
+        avatar({
+          arrowPosition,
+          color,
+          size: sizeProp,
+        }),
+      )}
+      // data-arrow-position={arrowPosition}
       data-status={status}
       ref={ref}
       title={title}
     >
-      <Arrow>
+      <span className={avatarArrow()}>
         <svg width="11" height="7" viewBox="0 0 11 7" fill="none">
           <path
             d="M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z"
             fill={color}
           />
         </svg>
-      </Arrow>
+      </span>
 
       {!imageFailed && src && (
-        <Image viewBox={`0 0 ${_sizeRem} ${_sizeRem}`} fill="none">
+        <svg className={avatarImage()} viewBox={`0 0 ${_sizeRem} ${_sizeRem}`} fill="none">
           <defs>
             <pattern id={imageId} patternContentUnits="objectBoundingBox" width="1" height="1">
               <image
@@ -163,7 +180,8 @@ export const Avatar = forwardRef(function Avatar(
           <circle cx={_radius} cy={_radius} r={_radius} fill={`url(#${imageId})`} />
 
           {!__unstable_hideInnerStroke && (
-            <BgStroke
+            <ellipse
+              className={avatarBgStroke()}
               cx={_radius}
               cy={_radius}
               rx={_radius}
@@ -172,26 +190,28 @@ export const Avatar = forwardRef(function Avatar(
             />
           )}
 
-          <Stroke
+          <ellipse
+            className={avatarStroke()}
             cx={_radius}
             cy={_radius}
             rx={_radius}
             ry={_radius}
             vectorEffect="non-scaling-stroke"
           />
-        </Image>
+        </svg>
       )}
 
       {(imageFailed || !src) && initials && (
         <>
-          <Initials>
-            <InitialsLabel forwardedAs="span" size={initialsSize} weight="medium">
+          <span className={avatarInitials()}>
+            <Label as="span" size={initialsSize} style={{color: 'inherit'}} weight="medium">
               {initials}
-            </InitialsLabel>
-          </Initials>
+            </Label>
+          </span>
         </>
       )}
-    </Root>
+    </As>
   )
 })
+
 Avatar.displayName = 'ForwardRef(Avatar)'

package/src/core/primitives/avatar/avatarCounter.tsx

@@ -1,8 +1,8 @@
 import {getTheme_v2} from '@sanity/ui/theme'
 import {forwardRef, useMemo} from 'react'
-import {styled, css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp} from '../../hooks'
+import {styled, css} from '../../lib/styled'
 import {rem, _responsive, ThemeProps} from '../../styles'
 import {AvatarSize} from '../../types'
 import {Label} from '../label'

package/src/core/primitives/avatar/avatarStack.tsx

@@ -1,8 +1,8 @@
 import {getTheme_v2} from '@sanity/ui/theme'
 import {Children, cloneElement, forwardRef, isValidElement, useMemo} from 'react'
-import {styled, css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp} from '../../hooks'
+import {styled, css} from '../../lib/styled'
 import {rem, _responsive, ThemeProps} from '../../styles'
 import {AvatarSize} from '../../types'
 import {AvatarCounter} from './avatarCounter'

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

@@ -1,4 +1,5 @@
-import {Badge, Flex, Inline} from '@sanity/ui'
+import {Badge, Flex} from '@sanity/ui'
+import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
 import {useSelect} from '@sanity/ui-workshop'
 import {WORKSHOP_BADGE_MODE_OPTIONS} from '../../../__workshop__/constants'
 
@@ -7,21 +8,13 @@ export default function Tones() {
 
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Inline space={2}>
-        <Badge mode={mode}>Default</Badge>
-        <Badge mode={mode} tone="primary">
-          Primary
-        </Badge>
-        <Badge mode={mode} tone="positive">
-          Positive
-        </Badge>
-        <Badge mode={mode} tone="caution">
-          Caution
-        </Badge>
-        <Badge mode={mode} tone="critical">
-          Critical
-        </Badge>
-      </Inline>
+      <Flex align="center" direction="column" gap={2}>
+        {THEME_COLOR_STATE_TONES.map((tone) => (
+          <Badge key={tone} mode={mode} tone={tone}>
+            {tone}
+          </Badge>
+        ))}
+      </Flex>
     </Flex>
   )
 }