@sanity/ui 3.0.0-static.20 → 3.0.0-static.21

package/src/core/StyleTags.tsx

@@ -1,18 +0,0 @@
-import {_compileSystem, _compileTheme} from '@sanity/ui/css'
-import type {ReactNode} from 'react'
-
-/** @beta */
-export function StyleTags(): ReactNode {
-  return (
-    <>
-      <style href="sanity-theme" precedence="theme">
-        {_compileTheme()}
-      </style>
-      <style href="sanity-system" precedence="system">
-        {_compileSystem()}
-      </style>
-    </>
-  )
-}
-
-StyleTags.displayName = 'StyleTags'

package/src/css/_compileStyle.ts

@@ -1,156 +0,0 @@
-import {PREFIX} from './prefix'
-import type {Properties, PropertiesWithVarsAndNested, Style, StyleRules} from './types'
-import {isArray} from './util'
-
-/** @internal */
-export function _compileStyle(style: Style): string {
-  let css = ''
-
-  if (style.rules) {
-    css += compileStyleRules(style.rules)
-  }
-
-  if (style.keyframes && Object.keys(style.keyframes).length > 0) {
-    for (const [name, value] of Object.entries(style.keyframes)) {
-      let keyframesCss = `@keyframes ${name} {\n`
-
-      for (const [key, props] of Object.entries(value)) {
-        keyframesCss += `  ${key} {\n`
-        keyframesCss += compileProperties(props)
-        keyframesCss += `}\n`
-      }
-
-      keyframesCss += `\n}\n\n`
-
-      css += keyframesCss
-    }
-  }
-
-  if (style.layers && Object.keys(style.layers).length > 0) {
-    for (const [layerName, layerRules] of Object.entries(style.layers)) {
-      if (Object.keys(layerRules).length > 0) {
-        css += `@layer ${layerName} {\n`
-        css += compileStyleRules(layerRules)
-        css += '}\n\n'
-      }
-    }
-  }
-
-  return css
-}
-
-export function compileStyleRules(rules: StyleRules) {
-  let css = ''
-
-  const mediaMap = new Map<
-    string,
-    {
-      selector: string
-      props: PropertiesWithVarsAndNested
-    }[]
-  >()
-
-  for (const [selector, properties] of Object.entries(rules)) {
-    if (!properties) {
-      continue
-    }
-
-    if (properties['@media']) {
-      for (const [mediaQuery, mediaProps] of Object.entries(properties['@media'])) {
-        const arr = mediaMap.get(mediaQuery) ?? []
-
-        arr.push({
-          selector,
-          props: mediaProps,
-        })
-
-        mediaMap.set(mediaQuery, arr)
-      }
-    }
-
-    css += compileStyleRule(selector, properties)
-  }
-
-  for (const [mediaQuery, mediaRules] of mediaMap) {
-    css += `@media ${mediaQuery} {\n`
-
-    for (const rule of mediaRules) {
-      css += compileStyleRule(rule.selector, rule.props)
-    }
-
-    css += `}\n\n`
-  }
-
-  return css
-}
-
-function compileStyleRule(_selector: string, properties: Properties): string {
-  let css = ''
-
-  const {
-    _prefix = true,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    '@media': _mediaProps,
-    'nest': nestedProps,
-    ...restProperties
-  } = properties
-
-  const selector = _prefix ? `${_selector.replace(/\./g, `.${PREFIX}`)}` : _selector
-
-  const propEntries = Object.entries(restProperties)
-
-  if (propEntries.length) {
-    css += `${selector} {\n`
-    css += compileProperties(restProperties)
-    css += '}\n\n'
-  }
-
-  if (nestedProps) {
-    for (const [_nestedSelector, nestedProperties] of Object.entries(nestedProps)) {
-      const nestedPrefix = _prefix && (nestedProperties._prefix ?? true)
-      const nestedSelector = nestedPrefix
-        ? _nestedSelector.replace(/\./g, `.${PREFIX}`)
-        : _nestedSelector
-
-      css += `${nestedSelector.replace(/&/g, selector)} {\n`
-      css += compileProperties(nestedProperties)
-      css += '}\n\n'
-    }
-  }
-
-  return css
-}
-
-function compileProperties(props: Properties) {
-  let css = ''
-
-  const propEntries = Object.entries(props)
-
-  for (const [key, value] of propEntries) {
-    // custom properties (vars)
-    if (key === 'vars') {
-      for (const [k, v] of Object.entries(value)) {
-        css += `  ${k}: ${v};\n`
-      }
-      continue
-    }
-
-    if (key.startsWith('@')) {
-      continue
-    }
-
-    if (isArray(value)) {
-      for (const item of value) {
-        css += `  ${toSnakeCase(key)}: ${item};\n`
-      }
-    } else {
-      css += `  ${toSnakeCase(key)}: ${value};\n`
-    }
-  }
-
-  return css
-}
-
-function toSnakeCase(str: string): string {
-  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)
-}

package/src/css/_compileSystem.ts

@@ -1,7 +0,0 @@
-import {_compileStyle} from './_compileStyle'
-import {_systemStyle} from './_system.style'
-
-/** @internal */
-export function _compileSystem(): string {
-  return _compileStyle(_systemStyle)
-}

package/src/css/_compileTheme.ts

@@ -1,13 +0,0 @@
-import {_compileStyle} from './_compileStyle'
-import {properties} from './theme'
-
-/** @internal */
-export function _compileTheme(): string {
-  return _compileStyle({
-    layers: {
-      theme: {
-        ':root': properties,
-      },
-    },
-  })
-}

package/src/css/_hash.ts

@@ -1,9 +0,0 @@
-/** Hash a string using the djb2 algorithm. */
-// from: https://github.com/souporserious/restyle/blob/4e71e9aa295803dd3cb47a47e3600a52b68bac38/src/utils.ts#L70C1-L77C2
-export function _hash(value: string): string {
-  let h = 5381
-  for (let index = 0, len = value.length; index < len; index++) {
-    h = ((h << 5) + h + value.charCodeAt(index)) >>> 0
-  }
-  return h.toString(36)
-}

package/src/css/_mergeStyles.ts

@@ -1,24 +0,0 @@
-import type {Style, StyleKeyframes, StyleLayers, StyleRules} from './types'
-
-/** @internal */
-export function _mergeStyles(styles: Style[]): Style {
-  const keyframes: StyleKeyframes = {}
-  const layers: StyleLayers = {}
-  const rules: StyleRules = {}
-
-  for (const s of styles) {
-    Object.assign(keyframes, s.keyframes)
-
-    for (const layerName in s.layers) {
-      if (!layers[layerName]) {
-        layers[layerName] = {}
-      }
-
-      Object.assign(layers[layerName], s.layers[layerName])
-    }
-
-    Object.assign(rules, s.rules)
-  }
-
-  return {keyframes, layers, rules}
-}

package/src/css/_resp.ts

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

package/src/css/_responsiveRule.ts

@@ -1,38 +0,0 @@
-import type {Properties, StyleRules} from './types'
-
-/** @internal */
-export function _responsiveRule(rules: StyleRules, _name: string, properties: Properties): void {
-  const name = _name.replace(/\./g, '_')
-
-  rules[`.${name}`] = properties
-  rules[`.1\\:${name}`] = {
-    '@media': {
-      'screen and (min-width: 360px)': properties,
-    },
-  }
-  rules[`.2\\:${name}`] = {
-    '@media': {
-      'screen and (min-width: 600px)': properties,
-    },
-  }
-  rules[`.3\\:${name}`] = {
-    '@media': {
-      'screen and (min-width: 900px)': properties,
-    },
-  }
-  rules[`.4\\:${name}`] = {
-    '@media': {
-      'screen and (min-width: 1200px)': properties,
-    },
-  }
-  rules[`.5\\:${name}`] = {
-    '@media': {
-      'screen and (min-width: 1800px)': properties,
-    },
-  }
-  rules[`.6\\:${name}`] = {
-    '@media': {
-      'screen and (min-width: 2400px)': properties,
-    },
-  }
-}

package/src/css/_scopeClassName.ts

@@ -1,9 +0,0 @@
-import {PREFIX} from './prefix'
-
-const p = (PREFIX as string) === '__PREFIX__' ? 's-' : PREFIX
-
-/** @internal */
-export function _scopeClassName(className: string | undefined) {
-  if (className === undefined) return undefined
-  return `${p}${className.trim()}`
-}

package/src/css/_scopeClassNames.ts

@@ -1,12 +0,0 @@
-import {_getClassNames} from './_getClassNames'
-import {_scopeClassName} from './_scopeClassName'
-
-export function _scopeClassNames(
-  ...classNames: Array<string | false | undefined>
-): string | undefined {
-  return (
-    _getClassNames(...classNames)
-      .map(_scopeClassName)
-      .join(' ') || undefined
-  )
-}

package/src/css/_system.style.ts

@@ -1,166 +0,0 @@
-import {_mergeStyles} from './_mergeStyles'
-import {borderStyle} from './aspects/border/border.style'
-import {boxSizingStyle} from './aspects/boxSizing/boxSizing.style'
-import {displayStyle} from './aspects/display/display.style'
-import {flexAlignStyle} from './aspects/flex/flexAlign.style'
-import {flexDirectionStyle} from './aspects/flex/flexDirection.style'
-import {flexJustifyStyle} from './aspects/flex/flexJustify.style'
-import {flexWrapStyle} from './aspects/flex/flexWrap.style'
-import {flexStyle} from './aspects/flexItem/flex.style'
-import {fontStyle} from './aspects/font/font.style'
-import {gapStyle} from './aspects/gap/gap.style'
-import {gridAutoColumnsStyle} from './aspects/grid/gridAutoColumns.style'
-import {gridAutoFlowStyle} from './aspects/grid/gridAutoFlow.style'
-import {gridAutoRowsStyle} from './aspects/grid/gridAutoRows.style'
-import {gridColumnsStyle} from './aspects/grid/gridColumns.style'
-import {gridRowsStyle} from './aspects/grid/gridRows.style'
-import {gridColumnStyle} from './aspects/gridItem/gridColumn.style'
-import {gridColumnEndStyle} from './aspects/gridItem/gridColumnEnd.style'
-import {gridColumnStartStyle} from './aspects/gridItem/gridColumnStart.style'
-import {gridRowStyle} from './aspects/gridItem/gridRow.style'
-import {gridRowEndStyle} from './aspects/gridItem/gridRowEnd.style'
-import {gridRowStartStyle} from './aspects/gridItem/gridRowStart.style'
-import {heightStyle} from './aspects/height/height.style'
-import {insetStyle} from './aspects/inset/inset.style'
-import {marginStyle} from './aspects/margin/margin.style'
-import {maxWidthStyle} from './aspects/maxWidth/maxWidth.style'
-import {minHeightStyle} from './aspects/minHeight/minHeight.style'
-import {minWidthStyle} from './aspects/minWidth/minWidth.style'
-import {outlineStyle} from './aspects/outline/outline.style'
-import {overflowStyle} from './aspects/overflow/overflow.style'
-import {paddingStyle} from './aspects/padding/padding.style'
-import {pointerEventsStyle} from './aspects/pointerEvents/pointerEvents.style'
-import {positionStyle} from './aspects/position/position.style'
-import {radiusStyle} from './aspects/radius/radius.style'
-import {shadowStyle} from './aspects/shadow/shadow.style'
-import {textAlignStyle} from './aspects/textAlign/textAlign.style'
-import {textOverflowStyle} from './aspects/textOverflow/textOverflow.style'
-import {widthStyle} from './aspects/width/width.style'
-import {breadcrumbsStyle} from './components/breadcrumbs/breadcrumbs.style'
-import {dialogStyle} from './components/dialog/dialog.style'
-import {menuStyle} from './components/menu/menu.style'
-import {skeletonStyle} from './components/skeleton/skeleton.style'
-import {toastStyle} from './components/toast/toast.style'
-import {treeStyle} from './components/tree/tree.style'
-import {_arrowStyle} from './primitives/_arrow/_arrow.style'
-import {_inputStyle} from './primitives/_input/_input.style'
-import {_selectableStyle} from './primitives/_selectable/_selectable.style'
-import {avatarStyle} from './primitives/avatar/avatar.style'
-import {badgeStyle} from './primitives/badge/badge.style'
-import {boxStyle} from './primitives/box/box.style'
-import {buttonStyle} from './primitives/button/button.style'
-import {cardStyle} from './primitives/card/card.style'
-import {checkboxStyle} from './primitives/checkbox/checkbox.style'
-import {codeStyle} from './primitives/code/code.style'
-import {containerStyle} from './primitives/container/container.style'
-import {headingStyle} from './primitives/heading/heading.style'
-import {kbdStyle} from './primitives/kbd/kbd.style'
-import {labelStyle} from './primitives/label/label.style'
-import {popoverStyle} from './primitives/popover/popover.style'
-import {radioStyle} from './primitives/radio/radio.style'
-import {selectStyle} from './primitives/select/select.style'
-import {spinnerStyle} from './primitives/spinner/spinner.style'
-import {stackStyle} from './primitives/stack/stack.style'
-import {switchStyle} from './primitives/switch/switch.style'
-import {textStyle} from './primitives/text/text.style'
-import {textAreaStyle} from './primitives/textArea/textArea.style'
-import {textInputStyle} from './primitives/textInput/textInput.style'
-import {tokenStyle} from './primitives/token/token.style'
-import {tooltipStyle} from './primitives/tooltip/tooltip.style'
-import {type Style} from './types'
-import {srOnlyStyle} from './utils/srOnly/srOnly.style'
-
-/** @internal */
-export const _systemStyle: Style = _mergeStyles([
-  // NOTE: Order matters in CSS!
-
-  {
-    // define order of layers
-    layers: {
-      palette: {},
-      theme: {},
-      base: {},
-      util: {},
-      primitive: {},
-    },
-  },
-
-  // aspects
-  borderStyle,
-  boxSizingStyle,
-  displayStyle,
-  flexStyle,
-  flexAlignStyle,
-  flexDirectionStyle,
-  flexJustifyStyle,
-  flexWrapStyle,
-  fontStyle,
-  gapStyle,
-  gridAutoColumnsStyle,
-  gridAutoFlowStyle,
-  gridAutoRowsStyle,
-  gridColumnsStyle,
-  gridRowsStyle,
-  gridColumnStyle,
-  gridColumnStartStyle,
-  gridColumnEndStyle,
-  gridRowStyle,
-  gridRowStartStyle,
-  gridRowEndStyle,
-  heightStyle,
-  insetStyle,
-  marginStyle,
-  maxWidthStyle,
-  minHeightStyle,
-  minWidthStyle,
-  outlineStyle,
-  overflowStyle,
-  paddingStyle,
-  pointerEventsStyle,
-  positionStyle,
-  radiusStyle,
-  shadowStyle,
-  textAlignStyle,
-  textOverflowStyle,
-  widthStyle,
-
-  // utils
-  srOnlyStyle,
-
-  // primitives
-  _arrowStyle,
-  _inputStyle,
-  _selectableStyle,
-  avatarStyle,
-  badgeStyle,
-  boxStyle,
-  buttonStyle,
-  cardStyle,
-  checkboxStyle,
-  codeStyle,
-  containerStyle,
-  headingStyle,
-  kbdStyle,
-  labelStyle,
-  maxWidthStyle,
-  popoverStyle,
-  radioStyle,
-  selectStyle,
-  spinnerStyle,
-  stackStyle,
-  switchStyle,
-  textAreaStyle,
-  textInputStyle,
-  textOverflowStyle,
-  textStyle,
-  tokenStyle,
-  tooltipStyle,
-
-  // components
-  breadcrumbsStyle,
-  dialogStyle,
-  menuStyle,
-  skeletonStyle,
-  toastStyle,
-  treeStyle,
-])

package/src/css/aspects/border/border.style.ts

@@ -1,13 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import {vars} from '../../theme'
-import type {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'border', {border: `1px solid ${vars.color.border}`})
-_responsiveRule(util, 'border-t', {borderTop: `1px solid ${vars.color.border}`})
-_responsiveRule(util, 'border-r', {borderRight: `1px solid ${vars.color.border}`})
-_responsiveRule(util, 'border-b', {borderBottom: `1px solid ${vars.color.border}`})
-_responsiveRule(util, 'border-l', {borderLeft: `1px solid ${vars.color.border}`})
-
-export const borderStyle: Style = {layers: {util}}

package/src/css/aspects/border/border.ts

@@ -1,14 +0,0 @@
-import {_resp} from '../../_resp'
-import {_scopeClassNames} from '../../_scopeClassNames'
-import type {BorderStyleProps} from './types'
-
-/** @public */
-export function border(props: BorderStyleProps): string | undefined {
-  return _scopeClassNames(
-    _resp('border', props.border),
-    _resp('border-t', props.borderTop),
-    _resp('border-r', props.borderRight),
-    _resp('border-b', props.borderBottom),
-    _resp('border-l', props.borderLeft),
-  )
-}

package/src/css/aspects/border/types.ts

@@ -1,10 +0,0 @@
-import type {ResponsiveProp} from '../../types'
-
-/** @public */
-export interface BorderStyleProps {
-  border?: ResponsiveProp<boolean>
-  borderTop?: ResponsiveProp<boolean>
-  borderRight?: ResponsiveProp<boolean>
-  borderBottom?: ResponsiveProp<boolean>
-  borderLeft?: ResponsiveProp<boolean>
-}

package/src/css/aspects/boxSizing/boxSizing.style.ts

@@ -1,10 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import type {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'box-border', {boxSizing: 'border-box'})
-
-_responsiveRule(util, 'box-content', {boxSizing: 'content-box'})
-
-export const boxSizingStyle: Style = {layers: {util}}

package/src/css/aspects/boxSizing/boxSizing.ts

@@ -1,8 +0,0 @@
-import {_resp} from '../../_resp'
-import {_scopeClassNames} from '../../_scopeClassNames'
-import type {BoxSizingStyleProps} from './types'
-
-/** @internal */
-export function boxSizing(props: BoxSizingStyleProps): string | undefined {
-  return _scopeClassNames(_resp('box', props.boxSizing))
-}

package/src/css/aspects/display/display.style.ts

@@ -1,34 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import type {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'block', {
-  nest: {'&:not([hidden])': {display: 'block'}},
-})
-
-_responsiveRule(util, 'flex', {
-  nest: {'&:not([hidden])': {display: 'flex'}},
-})
-
-_responsiveRule(util, 'grid', {
-  nest: {'&:not([hidden])': {display: 'grid'}},
-})
-
-_responsiveRule(util, 'inline-block', {
-  nest: {'&:not([hidden])': {display: 'inline-block'}},
-})
-
-_responsiveRule(util, 'inline-flex', {
-  nest: {'&:not([hidden])': {display: 'inline-flex'}},
-})
-
-_responsiveRule(util, 'inline-grid', {
-  nest: {'&:not([hidden])': {display: 'inline-grid'}},
-})
-
-_responsiveRule(util, 'none', {
-  nest: {'&:not([hidden])': {display: 'none'}},
-})
-
-export const displayStyle: Style = {layers: {util}}

package/src/css/aspects/display/display.ts

@@ -1,8 +0,0 @@
-import {_resp} from '../../_resp'
-import {_scopeClassNames} from '../../_scopeClassNames'
-import type {DisplayStyleProps} from './types'
-
-/** @internal */
-export function display(props: DisplayStyleProps): string | undefined {
-  return _scopeClassNames(_resp(undefined, props.display))
-}

package/src/css/aspects/flex/flex.ts

@@ -1,13 +0,0 @@
-import {_resp} from '../../_resp'
-import {_scopeClassNames} from '../../_scopeClassNames'
-import type {FlexStyleProps} from './types'
-
-/** @public */
-export function flex(props: FlexStyleProps): string | undefined {
-  return _scopeClassNames(
-    _resp('flex-align', props.align),
-    _resp('f', props.direction),
-    _resp('flex-justify', props.justify),
-    _resp('flex', props.wrap),
-  )
-}

package/src/css/aspects/flex/flexAlign.style.ts

@@ -1,12 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import type {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'flex-align-flex-start', {alignItems: 'flex-start'})
-_responsiveRule(util, 'flex-align-flex-end', {alignItems: 'flex-end'})
-_responsiveRule(util, 'flex-align-center', {alignItems: 'center'})
-_responsiveRule(util, 'flex-align-stretch', {alignItems: 'stretch'})
-_responsiveRule(util, 'flex-align-baseline', {alignItems: 'baseline'})
-
-export const flexAlignStyle: Style = {layers: {util}}

package/src/css/aspects/flex/flexDirection.style.ts

@@ -1,11 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import type {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'f-row', {flexDirection: 'row'})
-_responsiveRule(util, 'f-column', {flexDirection: 'column'})
-// _responsiveRule(util, 'f-row-reverse', {flexDirection: 'row-reverse'})
-// _responsiveRule(util, 'f-column-reverse', {flexDirection: 'column-reverse'})
-
-export const flexDirectionStyle: Style = {layers: {util}}

package/src/css/aspects/flex/flexJustify.style.ts

@@ -1,13 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import type {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'flex-justify-flex-start', {justifyContent: 'flex-start'})
-_responsiveRule(util, 'flex-justify-flex-end', {justifyContent: 'flex-end'})
-_responsiveRule(util, 'flex-justify-center', {justifyContent: 'center'})
-_responsiveRule(util, 'flex-justify-space-between', {justifyContent: 'space-between'})
-_responsiveRule(util, 'flex-justify-space-around', {justifyContent: 'space-around'})
-_responsiveRule(util, 'flex-justify-space-evenly', {justifyContent: 'space-evenly'})
-
-export const flexJustifyStyle: Style = {layers: {util}}

package/src/css/aspects/flex/flexWrap.style.ts

@@ -1,10 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import type {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'flex-nowrap', {flexWrap: 'nowrap'})
-_responsiveRule(util, 'flex-wrap', {flexWrap: 'wrap'})
-_responsiveRule(util, 'flex-wrap-reverse', {flexWrap: 'wrap-reverse'})
-
-export const flexWrapStyle: Style = {layers: {util}}