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

package/src/core/primitives/types.ts

@@ -1,27 +1,37 @@
 import {
-  BoxDisplay,
-  BoxHeight,
-  BoxOverflow,
-  BoxSizing,
-  FlexAlign,
-  FlexDirection,
-  FlexJustify,
-  FlexValue,
-  FlexWrap,
-  GridAutoCols,
-  GridAutoFlow,
-  GridAutoRows,
   GridItemColumn,
   GridItemColumnEnd,
   GridItemColumnStart,
   GridItemRow,
   GridItemRowEnd,
   GridItemRowStart,
-  Radius,
+  type FlexAlign,
+  type FlexDirection,
+  type FlexJustify,
+  type FlexValue,
+  type FlexWrap,
+} from '@sanity/ui/css'
+
+import {
+  type BoxDisplay,
+  type BoxHeight,
+  type BoxOverflow,
+  type BoxSizing,
+  type GridAutoCols,
+  type GridAutoFlow,
+  type GridAutoRows,
+  // type GridItemColumn,
+  // type GridItemColumnEnd,
+  // type GridItemColumnStart,
+  // type GridItemRow,
+  // type GridItemRowEnd,
+  // type GridItemRowStart,
+  type Radius,
 } from '../types'
 
 /**
  * @public
+ * @deprecated
  */
 export interface ResponsiveBorderProps {
   border?: boolean | boolean[]
@@ -33,6 +43,7 @@ export interface ResponsiveBorderProps {
 
 /**
  * @public
+ * @deprecated
  */
 export interface ResponsiveBoxProps {
   display?: BoxDisplay | BoxDisplay[]
@@ -43,6 +54,7 @@ export interface ResponsiveBoxProps {
 
 /**
  * @public
+ * @deprecated
  */
 export interface ResponsiveFlexProps {
   align?: FlexAlign | FlexAlign[]
@@ -53,6 +65,7 @@ export interface ResponsiveFlexProps {
 
 /**
  * @public
+ * @deprecated
  */
 export interface ResponsiveFlexItemProps {
   /** Sets the flex CSS attribute. The property is responsive. */
@@ -67,14 +80,15 @@ export interface ResponsiveGridProps {
   autoCols?: GridAutoCols | GridAutoCols[]
   autoFlow?: GridAutoFlow | GridAutoFlow[]
   columns?: number | number[]
-  gap?: number | number[]
-  gapX?: number | number[]
-  gapY?: number | number[]
+  // gap?: number | number[]
+  // gapX?: number | number[]
+  // gapY?: number | number[]
   rows?: number | number[]
 }
 
 /**
  * @public
+ * @deprecated
  */
 export interface ResponsiveGridItemProps {
   column?: GridItemColumn | GridItemColumn[]
@@ -87,6 +101,7 @@ export interface ResponsiveGridItemProps {
 
 /**
  * @public
+ * @deprecated
  */
 export interface ResponsiveMarginProps {
   /** Applies margins to all sides. The property is responsive. */
@@ -103,6 +118,7 @@ export interface ResponsiveMarginProps {
 
 /**
  * @public
+ * @deprecated
  */
 export interface ResponsivePaddingProps {
   padding?: number | number[]
@@ -116,6 +132,7 @@ export interface ResponsivePaddingProps {
 
 /**
  * @public
+ * @deprecated
  */
 export interface ResponsiveRadiusProps {
   radius?: Radius | Radius[]
@@ -123,6 +140,7 @@ export interface ResponsiveRadiusProps {
 
 /**
  * @public
+ * @deprecated
  */
 export interface ResponsiveShadowProps {
   shadow?: number | number[]
@@ -130,6 +148,7 @@ export interface ResponsiveShadowProps {
 
 /**
  * @public
+ * @deprecated
  */
 export interface ResponsiveWidthProps {
   width?: number | 'auto' | (number | 'auto')[]

package/src/core/styles/border/borderStyle.ts

@@ -3,12 +3,14 @@ import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveBorderStyleProps} from './types'
 
+/** @deprecated */
 export function responsiveBorderStyle(): Array<
   (props: ResponsiveBorderStyleProps & ThemeProps) => CSSObject[]
 > {
   return [border, borderTop, borderRight, borderBottom, borderLeft]
 }
 
+/** @deprecated */
 function border(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {card, media} = getTheme_v2(props.theme)
   const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
@@ -18,6 +20,7 @@ function border(props: ResponsiveBorderStyleProps & ThemeProps) {
   )
 }
 
+/** @deprecated */
 function borderTop(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {card, media} = getTheme_v2(props.theme)
   const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
@@ -27,6 +30,7 @@ function borderTop(props: ResponsiveBorderStyleProps & ThemeProps) {
   )
 }
 
+/** @deprecated */
 function borderRight(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {card, media} = getTheme_v2(props.theme)
   const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
@@ -36,6 +40,7 @@ function borderRight(props: ResponsiveBorderStyleProps & ThemeProps) {
   )
 }
 
+/** @deprecated */
 function borderBottom(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {card, media} = getTheme_v2(props.theme)
   const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
@@ -45,6 +50,7 @@ function borderBottom(props: ResponsiveBorderStyleProps & ThemeProps) {
   )
 }
 
+/** @deprecated */
 function borderLeft(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {card, media} = getTheme_v2(props.theme)
   const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`

package/src/core/styles/border/types.ts

@@ -1,5 +1,6 @@
 /**
  * @internal
+ * @deprecated
  */
 export interface ResponsiveBorderStyleProps {
   $border: boolean[]

package/src/core/styles/box/boxStyle.ts

@@ -20,10 +20,12 @@ const BOX_HEIGHT = {
   fill: '100%',
 }
 
+/** @deprecated */
 export function boxStyle(): CSSObject {
   return BASE_STYLE
 }
 
+/** @deprecated */
 export function responsiveBoxStyle(): Array<
   (props: ResponsiveBoxStyleProps & ThemeProps) => CSSObject[]
 > {
@@ -35,6 +37,7 @@ export function responsiveBoxStyle(): Array<
   ]
 }
 
+/** @deprecated */
 function responsiveBoxDisplayStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
   const {media} = getTheme_v2(props.theme)
 
@@ -43,6 +46,7 @@ function responsiveBoxDisplayStyle(props: ResponsiveBoxStyleProps & ThemeProps)
   }))
 }
 
+/** @deprecated */
 function responsiveBoxSizingStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
   const {media} = getTheme_v2(props.theme)
 
@@ -51,6 +55,7 @@ function responsiveBoxSizingStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
   }))
 }
 
+/** @deprecated */
 function responsiveBoxHeightStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
   const {media} = getTheme_v2(props.theme)
 
@@ -59,6 +64,7 @@ function responsiveBoxHeightStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
   }))
 }
 
+/** @deprecated */
 function responsiveBoxOverflowStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
   const {media} = getTheme_v2(props.theme)
 

package/src/core/styles/card/_cardColorStyle.ts

@@ -71,14 +71,6 @@ export function _cardColorStyle(
     '--card-badge-critical-dot-color': color.badge.critical.dot,
     '--card-badge-critical-fg-color': color.badge.critical.fg,
     '--card-badge-critical-icon-color': color.badge.critical.icon,
-    '--card-badge-prospect-bg-color': color.badge.prospect.bg,
-    '--card-badge-prospect-dot-color': color.badge.prospect.dot,
-    '--card-badge-prospect-fg-color': color.badge.prospect.fg,
-    '--card-badge-prospect-icon-color': color.badge.prospect.icon,
-    '--card-badge-explore-bg-color': color.badge.explore.bg,
-    '--card-badge-explore-dot-color': color.badge.explore.dot,
-    '--card-badge-explore-fg-color': color.badge.explore.fg,
-    '--card-badge-explore-icon-color': color.badge.explore.icon,
 
     '--card-code-bg-color': color.code.bg,
     '--card-code-fg-color': color.code.fg,

package/src/core/styles/flex/flexStyle.ts

@@ -16,8 +16,6 @@ export function responsiveFlexStyle(): Array<
     BASE_STYLE,
     responsiveFlexAlignStyle,
     responsiveFlexGapStyle,
-    responsiveFlexGapXStyle,
-    responsiveFlexGapYStyle,
     responsiveFlexWrapStyle,
     responsiveFlexJustifyStyle,
     responsiveFlexDirectionStyle,
@@ -42,22 +40,6 @@ function responsiveFlexGapStyle(props: ResponsiveFlexStyleProps & ThemeProps) {
   }))
 }
 
-function responsiveFlexGapXStyle(props: ResponsiveFlexStyleProps & ThemeProps) {
-  const {media, space} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$gapX, (gapX) => ({
-    columnGap: gapX ? rem(space[gapX]) : undefined,
-  }))
-}
-
-function responsiveFlexGapYStyle(props: ResponsiveFlexStyleProps & ThemeProps) {
-  const {media, space} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$gapY, (gapY) => ({
-    rowGap: gapY ? rem(space[gapY]) : undefined,
-  }))
-}
-
 export function responsiveFlexWrapStyle(props: ResponsiveFlexStyleProps & ThemeProps): CSSObject[] {
   const {media} = getTheme_v2(props.theme)
 

package/src/core/styles/flex/types.ts

@@ -1,4 +1,4 @@
-import {FlexAlign, FlexDirection, FlexJustify, FlexValue, FlexWrap} from '../../types'
+import {FlexAlign, FlexDirection, FlexJustify, FlexValue, FlexWrap} from '@sanity/ui/css'
 
 /**
  * @internal
@@ -7,8 +7,6 @@ export interface ResponsiveFlexStyleProps {
   $align: FlexAlign[]
   $direction: FlexDirection[]
   $gap: number[]
-  $gapX: number[]
-  $gapY: number[]
   $justify: FlexJustify[]
   $wrap: FlexWrap[]
 }

package/src/core/styles/grid/gridStyle.ts

@@ -3,15 +3,6 @@ import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveGridStyleProps} from './types'
 
-const GRID_CSS = {
-  '&&:not([hidden])': {
-    display: 'grid',
-  },
-  '&[data-as="ul"],&[data-as="ol"]': {
-    listStyle: 'none',
-  },
-}
-
 const GRID_AUTO_COLUMS = {
   auto: 'auto',
   min: 'min-content',
@@ -30,7 +21,6 @@ export function responsiveGridStyle(): Array<
   CSSObject | ((props: ResponsiveGridStyleProps & ThemeProps) => CSSObject[])
 > {
   return [
-    GRID_CSS,
     responsiveGridAutoFlowStyle,
     responsiveGridAutoRowsStyle,
     responsiveGridAutoColsStyle,

package/src/core/styles/helpers.ts

@@ -13,6 +13,15 @@ export function _fillCSSObject(keys: string[], value: string | number | CSSObjec
   }, {})
 }
 
+/**
+ * @public
+ */
+export function px(pixelValue: number): string | 0 {
+  if (pixelValue === 0) return 0
+
+  return `${pixelValue}px`
+}
+
 /**
  * @public
  */

package/src/core/styles/input/textInputStyle.ts

@@ -1,6 +1,6 @@
 import {ThemeColorSchemeKey, ThemeFontWeightKey, getTheme_v2} from '@sanity/ui/theme'
 import {CSSObject} from '@sanity/ui/theme'
-import {css} from 'styled-components'
+import {css} from '../../lib/styled'
 import {CardTone} from '../../types'
 import {focusRingBorderStyle, focusRingStyle} from '../focusRing'
 import {rem, _responsive} from '../helpers'

package/src/core/theme/__workshop__/build/Root.tsx

@@ -1,4 +1,4 @@
-import {css, styled} from 'styled-components'
+import {css, styled} from '../../../lib/styled'
 import {getTheme_v2} from '../../../../theme'
 
 export const Root = styled.div((props) => {

package/src/core/theme/themeProvider.tsx

@@ -6,7 +6,7 @@ import {
   getScopedTheme,
 } from '@sanity/ui/theme'
 import {useContext, useMemo} from 'react'
-import {ThemeProvider as StyledThemeProvider} from 'styled-components'
+import {ThemeProvider as StyledThemeProvider} from '../lib/styled'
 import {ThemeContext} from './themeContext'
 import {ThemeContextValue} from './types'
 

package/src/core/theme/useTheme.ts

@@ -1,5 +1,5 @@
 import {Theme, Theme_v2, getTheme_v2} from '@sanity/ui/theme'
-import {useTheme as useStyledTheme} from 'styled-components'
+import {useTheme as useStyledTheme} from '../lib/styled'
 
 /**
  * @public

package/src/core/types/avatar.ts

@@ -1,3 +1,8 @@
+export {
+  /** @deprecated Use `AvatarSize` from `@sanity/ui/theme' instead. */
+  type AvatarSize,
+} from '@sanity/ui/theme'
+
 /**
  * @public
  */
@@ -6,7 +11,7 @@ export type AvatarPosition = 'top' | 'bottom' | 'inside'
 /**
  * @public
  */
-export type AvatarSize = 0 | 1 | 2 | 3
+// export type AvatarSize = 0 | 1 | 2 | 3
 
 /**
  * @public

package/src/core/types/button.ts

@@ -17,5 +17,6 @@ export type ButtonTone = ThemeColorStateToneKey
 
 /**
  * @public
+ * @deprecated Use `Width` from `@sanity/ui/css` instead.
  */
 export type ButtonWidth = 'fill'

package/src/core/types/flex.ts

@@ -1,30 +1,31 @@
-/**
- * @public
- */
-export type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
+export {
+  /**
+   * @public
+   * @deprecated
+   */
+  type FlexAlign,
 
-/**
- * @public
- */
-export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
+  /**
+   * @public
+   * @deprecated
+   */
+  type FlexDirection,
 
-/**
- * @public
- */
-export type FlexJustify =
-  | 'flex-start'
-  | 'flex-end'
-  | 'center'
-  | 'space-between'
-  | 'space-around'
-  | 'space-evenly'
+  /**
+   * @public
+   * @deprecated
+   */
+  type FlexJustify,
 
-/**
- * @public
- */
-export type FlexValue = number | 'none' | 'auto' | 'initial'
+  /**
+   * @public
+   * @deprecated
+   */
+  type FlexValue,
 
-/**
- * @public
- */
-export type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'
+  /**
+   * @public
+   * @deprecated
+   */
+  type FlexWrap,
+} from '@sanity/ui/css'

package/src/core/types/gridItem.ts

@@ -1,29 +1,37 @@
-/**
- * @public
- */
-export type GridItemColumn = 'auto' | 'full' | number
+export {
+  /**
+   * @public
+   * @deprecated
+   */
+  type GridItemColumn,
 
-/**
- * @public
- */
-export type GridItemColumnStart = 'auto' | number
+  /**
+   * @public
+   * @deprecated
+   */
+  type GridItemColumnStart,
 
-/**
- * @public
- */
-export type GridItemColumnEnd = 'auto' | number
+  /**
+   * @public
+   * @deprecated
+   */
+  type GridItemColumnEnd,
 
-/**
- * @public
- */
-export type GridItemRow = 'auto' | 'full' | number
+  /**
+   * @public
+   * @deprecated
+   */
+  type GridItemRow,
 
-/**
- * @public
- */
-export type GridItemRowStart = 'auto' | number
+  /**
+   * @public
+   * @deprecated
+   */
+  type GridItemRowStart,
 
-/**
- * @public
- */
-export type GridItemRowEnd = 'auto' | number
+  /**
+   * @public
+   * @deprecated
+   */
+  type GridItemRowEnd,
+} from '@sanity/ui/css'

package/src/core/types/radius.ts

@@ -1,4 +1,7 @@
-/**
- * @public
- */
-export type Radius = number | 'full'
+export {
+  /**
+   * @public
+   * @deprecated
+   */
+  type Radius,
+} from '@sanity/ui/theme'

package/src/core/utils/arrow/arrow.tsx

@@ -1,5 +1,5 @@
 import {ForwardedRef, HTMLProps, ReactElement, forwardRef} from 'react'
-import {styled, css} from 'styled-components'
+import {styled, css} from '../../lib/styled'
 import {useTheme_v2} from '../../theme'
 import {Point, compileCommands, getRoundedCommands} from './cmds'
 

package/src/core/utils/elementQuery/__workshop__/customMedia.tsx

@@ -1,5 +1,5 @@
 import {Box, Card, ElementQuery, Text} from '@sanity/ui'
-import {styled} from 'styled-components'
+import {styled} from '../../../lib/styled'
 
 const TestCard = styled(Card)`
   --card-fg-color: orange;

package/src/core/utils/layer/layer.tsx

@@ -1,32 +1,41 @@
 import {FocusEvent, forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {containsOrEqualsElement, isHTMLElement} from '../../helpers'
+// import {styled} from '../../lib/styled'
+import {Box, BoxProps} from '../../primitives'
 import {LayerProvider} from './layerProvider'
 import {useLayer} from './useLayer'
 
 /**
  * @public
  */
-export interface LayerProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+export interface LayerProps extends BoxProps {
+  // as?: React.ElementType | keyof JSX.IntrinsicElements
   /** A callback that fires when the layer becomes the top layer when it was not the top layer before. */
   onActivate?: (props: {activeElement: HTMLElement | null}) => void
   zOffset?: number | number[]
 }
 
-interface LayerChildrenProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+interface LayerChildrenProps extends BoxProps {
+  // as?: React.ElementType | keyof JSX.IntrinsicElements
   onActivate?: LayerProps['onActivate']
 }
 
-const Root = styled.div({position: 'relative'})
+// const Root = styled.div({position: 'relative'})
 
 const LayerChildren = forwardRef(function LayerChildren(
-  props: LayerChildrenProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
+  props: LayerChildrenProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width' | 'wrap'>,
   forwardedRef: React.Ref<HTMLDivElement>,
 ) {
-  const {children, onActivate, onFocus, style = EMPTY_RECORD, ...restProps} = props
+  const {
+    children,
+    onActivate,
+    onFocus,
+    position = 'relative',
+    style = EMPTY_RECORD,
+    ...restProps
+  } = props
   const {zIndex, isTopLayer} = useLayer()
   const lastFocusedRef = useRef<HTMLElement | null>(null)
   const ref = useRef<HTMLDivElement | null>(null)
@@ -65,9 +74,16 @@ const LayerChildren = forwardRef(function LayerChildren(
   )
 
   return (
-    <Root {...restProps} data-ui="Layer" onFocus={handleFocus} ref={ref} style={{...style, zIndex}}>
+    <Box
+      data-ui="Layer"
+      {...restProps}
+      onFocus={handleFocus}
+      position={position}
+      ref={ref}
+      style={{...style, zIndex}}
+    >
       {children}
-    </Root>
+    </Box>
   )
 })
 
@@ -75,7 +91,7 @@ const LayerChildren = forwardRef(function LayerChildren(
  * @public
  */
 export const Layer = forwardRef(function Layer(
-  props: LayerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
+  props: LayerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'width' | 'wrap'>,
   ref: React.Ref<HTMLDivElement>,
 ) {
   const {children, zOffset = 1, ...restProps} = props
@@ -88,4 +104,5 @@ export const Layer = forwardRef(function Layer(
     </LayerProvider>
   )
 })
+
 Layer.displayName = 'ForwardRef(Layer)'

package/src/core/utils/srOnly/srOnly.tsx

@@ -1,5 +1,5 @@
 import {forwardRef} from 'react'
-import {styled} from 'styled-components'
+import {styled} from '../../lib/styled'
 
 /**
  * @public

package/src/core/utils/virtualList/virtualList.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'
-import {styled} from 'styled-components'
+import {styled} from '../../lib/styled'
 import {_isScrollable} from '../../helpers'
 import {_ResizeObserver} from '../../observers'
 import {StackProps} from '../../primitives'

package/src/css/_resp.ts

@@ -0,0 +1,28 @@
+import {ResponsiveProp} from './types'
+
+export function _resp<T>(
+  prefix: string | undefined,
+  prop: ResponsiveProp<T> | undefined,
+): string | undefined {
+  if (prop === undefined) {
+    return undefined
+  }
+
+  if (Array.isArray(prop)) {
+    return prop
+      .map((value, index) => {
+        const className = (typeof value === 'boolean' ? [prefix] : [prefix, value])
+          .filter((s) => s === 0 || Boolean(s))
+          .join('-')
+          .replace(/\./g, '_')
+
+        return index === 0 ? `${className}` : `_${index}:${className}`
+      })
+      .join(' ')
+  }
+
+  return (typeof prop === 'boolean' ? [prefix] : [prefix, prop])
+    .filter((s) => s === 0 || Boolean(s))
+    .join('-')
+    .replace(/\./g, '_')
+}