@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.10

package/src/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx

@@ -1,61 +0,0 @@
-import {useMemo} from 'react'
-import {useDelayedState} from '../../../hooks/useDelayedState'
-import {Delay} from '../../types'
-import {TooltipDelayGroupContext} from './tooltipDelayGroupContext'
-import {TooltipDelayGroupContextValue} from './types'
-import {useTooltipDelayGroup} from './useTooltipDelayGroup'
-/**
- * @public
- * */
-export interface TooltipDelayGroupProviderProps {
-  children?: React.ReactNode
-  /**
-   * @public Handles the delays to open or close a tooltip inside a group
-   *
-   * If only a `number` is passed, it will be used for both opening and closing.
-   *
-   * If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
-   */
-  delay: Delay
-}
-
-/**
- * @public
- * Provides context for a group of tooltip elements that should share a delay
- * which temporarily becomes 1 ms after the first floating element of the group opens.
- */
-export function TooltipDelayGroupProvider(
-  props: TooltipDelayGroupProviderProps,
-): React.ReactElement {
-  const {children, delay} = props
-  const [isGroupActive, setIsGroupActive] = useDelayedState(false)
-  const [openTooltipId, setOpenTooltipId] = useDelayedState<string | null>(null)
-
-  const isInsideContext = useTooltipDelayGroup()
-
-  if (isInsideContext) {
-    throw new Error(
-      'TooltipDelayGroupProvider cannot be nested inside another TooltipDelayGroupProvider',
-    )
-  }
-
-  const openDelay = typeof delay === 'number' ? delay : delay?.open || 0
-  const closeDelay = typeof delay === 'number' ? delay : delay?.close || 0
-
-  const value: TooltipDelayGroupContextValue = useMemo(
-    () => ({
-      isGroupActive: isGroupActive,
-      setIsGroupActive: setIsGroupActive,
-      openTooltipId: openTooltipId,
-      setOpenTooltipId: setOpenTooltipId,
-      // When the group is active, we want the next tooltip to open immediately.
-      openDelay: isGroupActive ? 1 : openDelay,
-      closeDelay: closeDelay,
-    }),
-    [closeDelay, isGroupActive, openDelay, openTooltipId, setIsGroupActive, setOpenTooltipId],
-  )
-
-  return (
-    <TooltipDelayGroupContext.Provider value={value}>{children}</TooltipDelayGroupContext.Provider>
-  )
-}

package/src/primitives/types.ts

@@ -1,142 +0,0 @@
-import {
-  BoxDisplay,
-  BoxHeight,
-  BoxOverflow,
-  BoxSizing,
-  FlexAlign,
-  FlexDirection,
-  FlexJustify,
-  FlexValue,
-  FlexWrap,
-  GridAutoCols,
-  GridAutoFlow,
-  GridAutoRows,
-  GridItemColumn,
-  GridItemColumnEnd,
-  GridItemColumnStart,
-  GridItemRow,
-  GridItemRowEnd,
-  GridItemRowStart,
-  Radius,
-} from '../types'
-
-/**
- * @public
- */
-export interface ResponsiveBorderProps {
-  border?: boolean | boolean[]
-  borderTop?: boolean | boolean[]
-  borderRight?: boolean | boolean[]
-  borderBottom?: boolean | boolean[]
-  borderLeft?: boolean | boolean[]
-}
-
-/**
- * @public
- */
-export interface ResponsiveBoxProps {
-  display?: BoxDisplay | BoxDisplay[]
-  height?: BoxHeight | BoxHeight[]
-  overflow?: BoxOverflow | BoxOverflow[]
-  sizing?: BoxSizing | BoxSizing[]
-}
-
-/**
- * @public
- */
-export interface ResponsiveFlexProps {
-  align?: FlexAlign | FlexAlign[]
-  direction?: FlexDirection | FlexDirection[]
-  justify?: FlexJustify | FlexJustify[]
-  wrap?: FlexWrap | FlexWrap[]
-}
-
-/**
- * @public
- */
-export interface ResponsiveFlexItemProps {
-  flex?: FlexValue | FlexValue[]
-}
-
-/**
- * @public
- */
-export interface ResponsiveGridProps {
-  autoRows?: GridAutoRows | GridAutoRows[]
-  autoCols?: GridAutoCols | GridAutoCols[]
-  autoFlow?: GridAutoFlow | GridAutoFlow[]
-  columns?: number | number[]
-  gap?: number | number[]
-  gapX?: number | number[]
-  gapY?: number | number[]
-  rows?: number | number[]
-}
-
-/**
- * @public
- */
-export interface ResponsiveGridItemProps {
-  column?: GridItemColumn | GridItemColumn[]
-  columnStart?: GridItemColumnStart | GridItemColumnStart[]
-  columnEnd?: GridItemColumnEnd | GridItemColumnEnd[]
-  row?: GridItemRow | GridItemRow[]
-  rowStart?: GridItemRowStart | GridItemRowStart[]
-  rowEnd?: GridItemRowEnd | GridItemRowEnd[]
-}
-
-/**
- * @public
- */
-export interface ResponsiveMarginProps {
-  margin?: number | number[]
-  marginX?: number | number[]
-  marginY?: number | number[]
-  marginTop?: number | number[]
-  marginRight?: number | number[]
-  marginBottom?: number | number[]
-  marginLeft?: number | number[]
-}
-
-/**
- * @public
- */
-export interface ResponsivePaddingProps {
-  padding?: number | number[]
-  paddingX?: number | number[]
-  paddingY?: number | number[]
-  paddingTop?: number | number[]
-  paddingRight?: number | number[]
-  paddingBottom?: number | number[]
-  paddingLeft?: number | number[]
-}
-
-/**
- * @public
- */
-export interface ResponsiveRadiusProps {
-  radius?: Radius | Radius[]
-}
-
-/**
- * @public
- */
-export interface ResponsiveShadowProps {
-  shadow?: number | number[]
-}
-
-/**
- * @public
- */
-export interface ResponsiveWidthProps {
-  width?: number | 'auto' | (number | 'auto')[]
-}
-
-/**
- * @public
- */
-export type Delay =
-  | number
-  | Partial<{
-      open: number
-      close: number
-    }>

package/src/styles/border/borderStyle.ts

@@ -1,58 +0,0 @@
-import {cssVars} from '../../theme'
-import {CSSObject} from '../../types/styled'
-import {_responsive} from '../helpers'
-import {ThemeProps} from '../types'
-import {ResponsiveBorderStyleProps} from './types'
-
-const BORDER_VALUE = `1px solid ${cssVars.default['border-base']}`
-
-export function responsiveBorderStyle(): Array<
-  (props: ResponsiveBorderStyleProps & ThemeProps) => CSSObject[]
-> {
-  return [border, borderTop, borderRight, borderBottom, borderLeft]
-}
-
-function border(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
-
-  return _responsive(media, props.$border, (value) =>
-    value ? {'&&': {border: BORDER_VALUE}} : {'&&': {border: 0}},
-  )
-}
-
-function borderTop(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
-
-  return _responsive(media, props.$borderTop, (value) =>
-    value ? {'&&': {borderTop: BORDER_VALUE}} : {'&&': {borderTop: 0}},
-  )
-}
-
-function borderRight(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
-
-  return _responsive(media, props.$borderRight, (value) =>
-    value ? {'&&': {borderRight: BORDER_VALUE}} : {'&&': {borderRight: 0}},
-  )
-}
-
-function borderBottom(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
-
-  return _responsive(media, props.$borderBottom, (value) =>
-    value ? {'&&': {borderBottom: BORDER_VALUE}} : {'&&': {borderBottom: 0}},
-  )
-}
-
-function borderLeft(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
-
-  return _responsive(media, props.$borderLeft, (value) =>
-    value ? {'&&': {borderLeft: BORDER_VALUE}} : {'&&': {borderLeft: 0}},
-  )
-}

package/src/styles/box/boxStyle.ts

@@ -1,72 +0,0 @@
-import {Property} from 'csstype'
-import {CSSObject} from '../../types/styled'
-import {_responsive} from '../helpers'
-import {ThemeProps} from '../types'
-import {ResponsiveBoxStyleProps} from './types'
-
-const BASE_STYLE: CSSObject = {
-  '&[data-as="ul"],&[data-as="ol"]': {
-    listStyle: 'none',
-  },
-}
-
-const BOX_SIZING: {[key: string]: Property.BoxSizing} = {
-  content: 'content-box',
-  border: 'border-box',
-}
-
-const BOX_HEIGHT = {
-  stretch: 'stretch',
-  fill: '100%',
-}
-
-export function boxStyle(): CSSObject {
-  return BASE_STYLE
-}
-
-export function responsiveBoxStyle(): Array<
-  (props: ResponsiveBoxStyleProps & ThemeProps) => CSSObject[]
-> {
-  return [
-    responsiveBoxSizingStyle,
-    responsiveBoxHeightStyle,
-    responsiveBoxOverflowStyle,
-    responsiveBoxDisplayStyle,
-  ]
-}
-
-function responsiveBoxDisplayStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
-
-  return _responsive(media, props.$display, (display) => ({
-    '&:not([hidden])': {display},
-  }))
-}
-
-function responsiveBoxSizingStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
-
-  return _responsive(media, props.$sizing, (sizing) => ({
-    boxSizing: BOX_SIZING[sizing],
-  }))
-}
-
-function responsiveBoxHeightStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
-
-  return _responsive(media, props.$height, (height) => ({
-    height: BOX_HEIGHT[height],
-  }))
-}
-
-function responsiveBoxOverflowStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
-
-  return _responsive(media, props.$overflow, (overflow) => ({
-    overflow,
-  }))
-}

package/src/styles/colorVars/colorVarsStyle.ts

@@ -1,84 +0,0 @@
-import {ThemeColorToneKey, cssVars} from '../../theme'
-import {mutableCardVariables} from '../../theme/lib/theme/color/cssVariables/cardVariables'
-import {getToneCssVar} from '../../theme/lib/theme/color/cssVariables/tones'
-import {CSSObject} from '../../types/styled'
-
-/**
- * @internal
- * Card overrides in disabled states
- */
-export function _colorVarStyleDisabled(checkered = false): CSSObject {
-  return {
-    [getToneCssVar('default', 'text-link')]: cssVars.default['text-secondary'],
-    [getToneCssVar('default', 'text-accent')]: cssVars.default['text-secondary'],
-    [getToneCssVar('default', 'text-code')]: cssVars.default['text-secondary'],
-    [getToneCssVar('default', 'text-primary')]: cssVars.default['text-secondary'],
-
-    [mutableCardVariables['fg-color']]: cssVars.primary['text-secondary'],
-    [mutableCardVariables['muted-fg-color']]: cssVars.primary['text-secondary'],
-    [mutableCardVariables['icon-color']]: cssVars.primary['border-base'],
-    [mutableCardVariables['accent-color']]: cssVars.primary['base-bg-card'],
-    [mutableCardVariables['bg-color']]: cssVars.primary['bg-tint'],
-    [mutableCardVariables['bg-image']]: checkered
-      ? `repeating-conic-gradient(${cssVars.default['base-bg-card']} 0% 25%, ${cssVars.default['bg-tint']} 0% 50%)`
-      : undefined,
-  }
-}
-
-/**
- * @internal
- * Card overrides in selected states
- */
-export function _colorVarStyleSelected(): CSSObject {
-  return {
-    [mutableCardVariables['bg-color']]: cssVars.default['bg-accent'],
-    [mutableCardVariables['fg-color']]: cssVars.default['bg-base'],
-    [mutableCardVariables['muted-fg-color']]: cssVars.default['base-bg-card'],
-    [mutableCardVariables['accent-color']]: cssVars.default['base-bg-card'],
-    [mutableCardVariables['icon-color']]: cssVars.primary['bg-base'],
-  }
-}
-
-/**
- * @internal
- * Card overrides in hover
- */
-export function _colorVarStyleHover(): CSSObject {
-  return {
-    [mutableCardVariables['bg-color']]: cssVars.default['bg-base-hover'],
-    [getToneCssVar('default', 'bg-tint')]: cssVars.default['bg-base-active'],
-  }
-}
-
-/**
- * @internal
- * Card overrides in active / pressed states
- */
-export function _colorVarStyleActive(): CSSObject {
-  return {
-    [mutableCardVariables['bg-color']]: cssVars.default['bg-base-active'],
-  }
-}
-
-/**
- * @internal
- * Selectable needs to redefine bg-color and fg-color
- */
-export function _selectableVarStyle(tone: ThemeColorToneKey): CSSObject {
-  return {
-    [mutableCardVariables['bg-color']]: 'inherit',
-    [mutableCardVariables['fg-color']]:
-      tone === 'default' ? cssVars.default['text-primary'] : cssVars.default['text-secondary'],
-  }
-}
-
-/**
- * @internal
- * Selectable overrides in disabled states, same as card but with different bg-color
- */
-export function _selectableVarStyleDisabled(): CSSObject {
-  return {
-    ..._colorVarStyleDisabled(),
-    [mutableCardVariables['bg-color']]: undefined,
-  }
-}

package/src/styles/colorVars/index.ts

@@ -1 +0,0 @@
-export * from './colorVarsStyle'

package/src/styles/flex/flexItemStyle.ts

@@ -1,27 +0,0 @@
-import {EMPTY_ARRAY} from '../../constants'
-import {CSSObject} from '../../types/styled'
-import {_responsive} from '../helpers'
-import {ThemeProps} from '../types'
-import {ResponsiveFlexItemStyleProps} from './types'
-
-const BASE_STYLE: CSSObject = {
-  minWidth: 0,
-  minHeight: 0,
-}
-
-export function flexItemStyle(): Array<
-  CSSObject | ((props: ResponsiveFlexItemStyleProps & ThemeProps) => CSSObject[])
-> {
-  return [BASE_STYLE, responsiveFlexItemStyle]
-}
-
-export function responsiveFlexItemStyle(
-  props: ResponsiveFlexItemStyleProps & ThemeProps,
-): CSSObject[] {
-  const {theme} = props
-  const {media} = theme.sanity
-
-  if (!props.$flex) return EMPTY_ARRAY
-
-  return _responsive(media, props.$flex, (flex) => ({flex}))
-}

package/src/styles/flex/flexStyle.ts

@@ -1,74 +0,0 @@
-import {CSSObject} from '../../types/styled'
-import {rem, _responsive} from '../helpers'
-import {ThemeProps} from '../types'
-import {ResponsiveFlexStyleProps} from './types'
-
-const BASE_STYLE: CSSObject = {
-  '&&:not([hidden])': {
-    display: 'flex',
-  },
-}
-
-export function responsiveFlexStyle(): Array<
-  CSSObject | ((props: ResponsiveFlexStyleProps & ThemeProps) => CSSObject[])
-> {
-  return [
-    BASE_STYLE,
-    responsiveFlexAlignStyle,
-    responsiveFlexGapStyle,
-    responsiveFlexWrapStyle,
-    responsiveFlexJustifyStyle,
-    responsiveFlexDirectionStyle,
-  ]
-}
-
-export function responsiveFlexAlignStyle(
-  props: ResponsiveFlexStyleProps & ThemeProps,
-): CSSObject[] {
-  const {theme} = props
-  const {media} = theme.sanity
-
-  return _responsive(media, props.$align, (align) => {
-    return {alignItems: align}
-  })
-}
-
-function responsiveFlexGapStyle(props: ResponsiveFlexStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media, space} = theme.sanity
-
-  return _responsive(media, props.$gap, (gap) => ({
-    gap: gap ? rem(space[gap]) : undefined,
-  }))
-}
-
-export function responsiveFlexWrapStyle(props: ResponsiveFlexStyleProps & ThemeProps): CSSObject[] {
-  const {theme} = props
-  const {media} = theme.sanity
-
-  return _responsive(media, props.$wrap, (wrap) => {
-    return {flexWrap: wrap}
-  })
-}
-
-export function responsiveFlexJustifyStyle(
-  props: ResponsiveFlexStyleProps & ThemeProps,
-): CSSObject[] {
-  const {theme} = props
-  const {media} = theme.sanity
-
-  return _responsive(media, props.$justify, (justify) => {
-    return {justifyContent: justify}
-  })
-}
-
-export function responsiveFlexDirectionStyle(
-  props: ResponsiveFlexStyleProps & ThemeProps,
-): CSSObject[] {
-  const {theme} = props
-  const {media} = theme.sanity
-
-  return _responsive(media, props.$direction, (direction) => {
-    return {flexDirection: direction}
-  })
-}

package/src/styles/focusRing/index.ts

@@ -1,27 +0,0 @@
-import {FocusRing, cssVars} from '../../theme'
-
-export function focusRingBorderStyle(border: {color: string; width: number}): string {
-  return `inset 0 0 0 ${border.width}px ${border.color}`
-}
-
-export function focusRingStyle(opts: {
-  base?: {bg: string}
-  border?: {color: string; width: number}
-  focusRing: FocusRing
-}): string {
-  const {base, border, focusRing} = opts
-  const focusRingOutsetWidth = focusRing.offset + focusRing.width
-  const focusRingInsetWidth = 0 - focusRing.offset
-  const bgColor = base ? base.bg : cssVars.mutable['bg-color']
-
-  return [
-    focusRingInsetWidth > 0 &&
-      `inset 0 0 0 ${focusRingInsetWidth}px ${cssVars.positive['border-accent']}`,
-    border && focusRingBorderStyle(border),
-    focusRingInsetWidth < 0 && `0 0 0 ${0 - focusRingInsetWidth}px ${bgColor}`,
-    focusRingOutsetWidth > 0 &&
-      `0 0 0 ${focusRingOutsetWidth}px ${cssVars.positive['border-accent']}`,
-  ]
-    .filter(Boolean)
-    .join(',')
-}

package/src/styles/font/codeFontStyle.ts

@@ -1,12 +0,0 @@
-import {CSSObject} from '../../types/styled'
-import {ThemeProps} from '../types'
-import {responsiveFont} from './responsiveFont'
-import {ResponsiveFontStyleProps} from './types'
-
-/**
- * Get responsive CSS for the `code` font style.
- * @internal
- */
-export function responsiveCodeFontStyle(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[] {
-  return responsiveFont('code', props)
-}

package/src/styles/font/headingFontStyle.ts

@@ -1,12 +0,0 @@
-import {CSSObject} from '../../types/styled'
-import {ThemeProps} from '../types'
-import {responsiveFont} from './responsiveFont'
-import {ResponsiveFontStyleProps} from './types'
-
-/**
- * Get responsive CSS for the `heading` font style.
- * @internal
- */
-export function responsiveHeadingFont(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[] {
-  return responsiveFont('heading', props)
-}

package/src/styles/font/labelFontStyle.ts

@@ -1,12 +0,0 @@
-import {CSSObject} from '../../types/styled'
-import {ThemeProps} from '../types'
-import {responsiveFont} from './responsiveFont'
-import {ResponsiveFontStyleProps} from './types'
-
-/**
- * Get responsive CSS for the `label` font style.
- * @internal
- */
-export function responsiveLabelFont(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[] {
-  return responsiveFont('label', props)
-}

package/src/styles/font/responsiveFont.ts

@@ -1,101 +0,0 @@
-import {ThemeFontSize, ThemeFontKey} from '../../theme'
-import {CSSObject} from '../../types/styled'
-import {rem, _responsive} from '../helpers'
-import {ThemeProps} from '../types'
-import {ResponsiveFontStyleProps} from './types'
-
-/**
- * A utility function getting responsive font styles.
- * @internal
- */
-export function responsiveFont(
-  fontKey: ThemeFontKey,
-  props: ResponsiveFontStyleProps & ThemeProps,
-): CSSObject[] {
-  const {$size, $weight, theme} = props
-  const {fonts, media} = theme.sanity
-  const {family, sizes, weights} = fonts[fontKey]
-  const fontWeight = ($weight && weights[$weight]) || weights.regular
-
-  // @todo: make this configurable
-  const defaultSize = sizes[2]
-
-  const base: CSSObject = {
-    position: 'relative',
-    fontFamily: family,
-    fontWeight,
-    padding: '1px 0',
-    margin: 0,
-
-    '&:before': {
-      content: '""',
-      display: 'block',
-      height: 0,
-    },
-
-    '&:after': {
-      content: '""',
-      display: 'block',
-      height: 0,
-    },
-
-    '& > code, & > span': {
-      display: 'block',
-    },
-
-    '&:not([hidden])': {
-      display: 'block',
-    },
-  }
-
-  // @TODO fix the real condition that is causing $size to be undefined sometimes
-  if (!$size) {
-    // @ts-expect-error: `warned` isn't typed, the underlying issue should be solved rather than typing it
-    if (!responsiveFont.warned) {
-      // eslint-disable-next-line no-console
-      console.warn('No size specified for responsive font', {fontKey, $size, props, base})
-      // @ts-expect-error: `warned` isn't typed, the underlying issue should be solved rather than typing it
-      responsiveFont.warned = true
-    }
-
-    return [base]
-  }
-
-  const resp = _responsive(media, $size, (sizeIndex) => fontSize(sizes[sizeIndex] || defaultSize))
-
-  return [base, ...resp]
-}
-
-export function fontSize(size: ThemeFontSize): CSSObject {
-  const {ascenderHeight, descenderHeight, fontSize, iconSize, letterSpacing, lineHeight} = size
-  const negHeight = ascenderHeight + descenderHeight
-  const capHeight = lineHeight - negHeight
-  const iconOffset = (capHeight - iconSize) / 2
-  const customIconSize = Math.floor((fontSize * 1.125) / 2) * 2 + 1
-  const customIconOffset = (capHeight - customIconSize) / 2
-
-  return {
-    fontSize: rem(fontSize),
-    lineHeight: `calc(${lineHeight} / ${fontSize})`,
-    letterSpacing: rem(letterSpacing),
-    transform: `translateY(${rem(descenderHeight)})`,
-
-    '&:before': {
-      marginTop: `calc(${rem(0 - negHeight)} - 1px)`,
-    },
-
-    '&:after': {
-      marginBottom: '-1px',
-    },
-
-    '& svg:not([data-sanity-icon])': {
-      fontSize: `calc(${customIconSize} / 16 * 1rem)`,
-      margin: rem(customIconOffset),
-    },
-
-    '& [data-sanity-icon]': {
-      fontSize: `calc(${iconSize} / 16 * 1rem)`,
-      margin: rem(iconOffset),
-    },
-  }
-}