@sanity/ui 3.0.0-static.4 → 3.0.0-static.41

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

@@ -1,12 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import type {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'position-absolute', {position: 'absolute'})
-_responsiveRule(util, 'position-fixed', {position: 'fixed'})
-_responsiveRule(util, 'position-relative', {position: 'relative'})
-_responsiveRule(util, 'position-static', {position: 'static'})
-_responsiveRule(util, 'position-sticky', {position: 'sticky'})
-
-export const positionStyle: Style = {layers: {util}}

package/src/css/aspects/position/position.ts

@@ -1,7 +0,0 @@
-import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {PositionStyleProps} from './types'
-
-export function position(props: PositionStyleProps): string | undefined {
-  return composeClassNames(_resp('position', props.position))
-}

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

@@ -1,9 +0,0 @@
-import {ResponsiveProp} from '../../types'
-
-/** @public */
-export type Position = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'
-
-/** @public */
-export interface PositionStyleProps {
-  position?: ResponsiveProp<Position>
-}

package/src/css/aspects/radius/index.ts

@@ -1,2 +0,0 @@
-export * from './radius'
-export * from './types'

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

@@ -1,16 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import type {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'r-0', {borderRadius: vars.radius[0]})
-_responsiveRule(util, 'r-1', {borderRadius: vars.radius[1]})
-_responsiveRule(util, 'r-2', {borderRadius: vars.radius[2]})
-_responsiveRule(util, 'r-3', {borderRadius: vars.radius[3]})
-_responsiveRule(util, 'r-4', {borderRadius: vars.radius[4]})
-_responsiveRule(util, 'r-5', {borderRadius: vars.radius[5]})
-_responsiveRule(util, 'r-6', {borderRadius: vars.radius[6]})
-_responsiveRule(util, 'r-full', {borderRadius: '9999px'})
-
-export const radiusStyle: Style = {layers: {util}}

package/src/css/aspects/radius/radius.ts

@@ -1,8 +0,0 @@
-import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {RadiusStyleProps} from './types'
-
-/** @public */
-export function radius(props: RadiusStyleProps): string | undefined {
-  return composeClassNames(_resp('r', props.radius))
-}

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

@@ -1,8 +0,0 @@
-import {Radius} from '@sanity/ui/theme'
-
-import {ResponsiveProp} from '../../types'
-
-/** @public */
-export interface RadiusStyleProps {
-  radius?: ResponsiveProp<Radius | 'full'>
-}

package/src/css/aspects/shadow/index.ts

@@ -1,2 +0,0 @@
-export * from './shadow'
-export * from './types'

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

@@ -1,49 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import type {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'shadow-0', {boxShadow: 'none'})
-_responsiveRule(util, 'shadow-1', {
-  boxShadow: [
-    `var(--shadow-outline) ${vars.color.shadow.outline}`,
-    `var(--shadow-1-umbra) ${vars.color.shadow.umbra}`,
-    `var(--shadow-1-penumbra) ${vars.color.shadow.penumbra}`,
-    `var(--shadow-1-ambient) ${vars.color.shadow.ambient}`,
-  ].join(', '),
-})
-_responsiveRule(util, 'shadow-2', {
-  boxShadow: [
-    `var(--shadow-outline) ${vars.color.shadow.outline}`,
-    `var(--shadow-2-umbra) ${vars.color.shadow.umbra}`,
-    `var(--shadow-2-penumbra) ${vars.color.shadow.penumbra}`,
-    `var(--shadow-2-ambient) ${vars.color.shadow.ambient}`,
-  ].join(', '),
-})
-_responsiveRule(util, 'shadow-3', {
-  boxShadow: [
-    `var(--shadow-outline) ${vars.color.shadow.outline}`,
-    `var(--shadow-3-umbra) ${vars.color.shadow.umbra}`,
-    `var(--shadow-3-penumbra) ${vars.color.shadow.penumbra}`,
-    `var(--shadow-3-ambient) ${vars.color.shadow.ambient}`,
-  ].join(', '),
-})
-_responsiveRule(util, 'shadow-4', {
-  boxShadow: [
-    `var(--shadow-outline) ${vars.color.shadow.outline}`,
-    `var(--shadow-4-umbra) ${vars.color.shadow.umbra}`,
-    `var(--shadow-4-penumbra) ${vars.color.shadow.penumbra}`,
-    `var(--shadow-4-ambient) ${vars.color.shadow.ambient}`,
-  ].join(', '),
-})
-_responsiveRule(util, 'shadow-5', {
-  boxShadow: [
-    `var(--shadow-outline) ${vars.color.shadow.outline}`,
-    `var(--shadow-5-umbra) ${vars.color.shadow.umbra}`,
-    `var(--shadow-5-penumbra) ${vars.color.shadow.penumbra}`,
-    `var(--shadow-5-ambient) ${vars.color.shadow.ambient}`,
-  ].join(', '),
-})
-
-export const shadowStyle: Style = {layers: {util}}

package/src/css/aspects/shadow/shadow.ts

@@ -1,7 +0,0 @@
-import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {ShadowStyleProps} from './types'
-
-export function shadow(props: ShadowStyleProps): string | undefined {
-  return composeClassNames(_resp('shadow', props.shadow))
-}

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

@@ -1,8 +0,0 @@
-import {Shadow} from '@sanity/ui/theme'
-
-import {ResponsiveProp} from '../../types'
-
-/** @public */
-export interface ShadowStyleProps {
-  shadow?: ResponsiveProp<Shadow>
-}

package/src/css/aspects/textOverflow/index.ts

@@ -1,2 +0,0 @@
-export * from './textOverflow'
-export * from './types'

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

@@ -1,21 +0,0 @@
-import type {Style, StyleRules} from '../../types'
-
-const rules: StyleRules = {
-  '.text-overflow-ellipsis': {
-    display: 'block',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    // @ts-expect-error - TODO: fix this
-    overflow: ['hidden', 'clip'],
-  },
-
-  '.text-overflow-clip': {
-    display: 'block',
-    whiteSpace: 'nowrap',
-    textOverflow: 'clip',
-    // @ts-expect-error - TODO: fix this
-    overflow: ['hidden', 'clip'],
-  },
-}
-
-export const textOverflowStyle: Style = {layers: {util: rules}}

package/src/css/aspects/textOverflow/textOverflow.ts

@@ -1,6 +0,0 @@
-import {_comp} from '../../_comp'
-import {TextOverflowStyleProps} from './types'
-
-export function textOverflow(props: TextOverflowStyleProps): string | undefined {
-  return _comp(props.textOverflow && `text-overflow-${props.textOverflow}`)
-}

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

@@ -1,8 +0,0 @@
-export interface TextOverflowStyleProps {
-  /**
-   * Controls how overflowing text is treated.
-   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
-   * @beta
-   */
-  textOverflow?: 'ellipsis' | 'clip'
-}

package/src/css/aspects/width/index.ts

@@ -1,2 +0,0 @@
-export * from './types'
-export * from './width'

package/src/css/aspects/width/rules.ts

@@ -1,8 +0,0 @@
-import {Rules} from '../../types'
-
-export const widthRules: Rules = {
-  'w-fill': {
-    // @ts-expect-error - TODO: fix this
-    width: ['-moz-available', '-webkit-fill-available', 'stretch'],
-  },
-}

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

@@ -1,9 +0,0 @@
-import {ContainerWidth} from '@sanity/ui/theme'
-
-import {ResponsiveProp} from '../../types'
-
-export type Width = ContainerWidth | 'fill'
-
-export interface WidthStyleProps {
-  width?: ResponsiveProp<Width>
-}

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

@@ -1,11 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, `w-fill`, {
-  // @ts-expect-error - TODO: fix this
-  width: ['-moz-available', '-webkit-fill-available', 'stretch'],
-})
-
-export const widthStyle: Style = {layers: {util}}

package/src/css/aspects/width/width.ts

@@ -1,6 +0,0 @@
-import {_resp} from '../../_resp'
-import {WidthStyleProps} from './types'
-
-export function width(props: WidthStyleProps): string {
-  return _resp('w', props.width) ?? ''
-}

package/src/css/compile/compilePalette.ts

@@ -1,27 +0,0 @@
-import {color} from '@sanity/color'
-import {HUES, TINTS} from '@sanity/ui/theme'
-
-import {compileRule} from './compileRule'
-
-export function compilePalette(): string {
-  const props: Record<string, string> = {
-    ...compileHues(),
-
-    '--black': color.black.hex,
-    '--white': color.white.hex,
-  }
-
-  return compileRule(':root', props, {keyframes: {}, media: {}})
-}
-
-function compileHues() {
-  const rules: Record<string, string> = {}
-
-  for (const hue of HUES) {
-    for (const tint of TINTS) {
-      rules[`--${hue}-${tint}`] = color[hue][tint].hex
-    }
-  }
-
-  return rules
-}

package/src/css/compile/compileRule.ts

@@ -1,96 +0,0 @@
-import {PREFIX} from '../constants'
-import {type Properties} from '../types'
-import {CompileRulesContext} from './types'
-
-export function compileRule(
-  selector: string,
-  props: Properties,
-  context: CompileRulesContext,
-): string {
-  let css = compileProperties(selector, props)
-
-  if (props['@nest']) {
-    css += compileNestedRules(selector, props['@nest'], context)
-  }
-
-  // @ts-expect-error - TODO: fix this
-  if (props['@keyframes']) {
-    // @ts-expect-error - TODO: fix this
-    for (const name in props['@keyframes']) {
-      // @ts-expect-error - TODO: fix this
-      context.keyframes[name] = props['@keyframes'][name]
-    }
-  }
-
-  if (props['@media']) {
-    for (const key in props['@media']) {
-      if (!context.media[key]) {
-        context.media[key] = {}
-      }
-
-      context.media[key][selector] = props['@media'][key]
-    }
-  }
-
-  return css
-}
-
-function compileProperties(selector: string, props: Properties) {
-  let css = '{'
-
-  for (const key in props) {
-    if (key === '@keyframes') continue // ignore
-    if (key === '@media') continue // ignore
-    if (key === '@nest') continue // ignore
-
-    const value = (props as Record<string, string>)[key]
-
-    const valueArr = Array.isArray(value) ? value : [value]
-
-    for (const v of valueArr) {
-      css += toSnakeCase(key) + ':' + v + ';'
-    }
-  }
-
-  if (css === '{') return ''
-
-  return selector + css + '}'
-}
-
-function compileNestedRules(
-  selector: string,
-  props: Record<string, Properties>,
-  context: CompileRulesContext,
-) {
-  if (!props) return ''
-
-  let css = ''
-
-  for (const [_selector, _props] of Object.entries(props)) {
-    css +=
-      '\n' +
-      compileRule(_selector.replace(/\./g, `.${PREFIX}`).replace(/&/g, selector), _props, context)
-  }
-
-  return css
-}
-
-export function compileMediaQueryRule(query: string, rules: Record<string, Properties>): string {
-  let css = `@media ${query}{`
-
-  for (const [selector, props] of Object.entries(rules)) {
-    // console.log('compileMediaQueryRule', {selector, props})
-
-    css += '\n  ' + compileProperties(selector, props)
-
-    if (props['@nest']) {
-      css += compileNestedRules(selector, props['@nest'], {keyframes: {}, media: {}})
-    }
-  }
-
-  return css + '\n}'
-}
-
-function toSnakeCase(value: string) {
-  return value.replace(/[A-Z]/g, (match) => '-' + match.toLowerCase())
-}

package/src/css/compile/compileRules.test.ts

@@ -1,36 +0,0 @@
-import {responsiveRules} from '../responsiveRules'
-import {Rules} from '../types'
-import {compileRules} from './compileRules'
-
-it('should compile deeply nested rules', () => {
-  const rules: Rules = {
-    card: {
-      '@nest': {
-        '&:is(a)': {
-          // @ts-expect-error - TODO: fix this
-          '@media': {
-            '(hover: hover)': {
-              background: 'red',
-            },
-          },
-        },
-      },
-    },
-  }
-
-  // eslint-disable-next-line no-console
-  console.log(compileRules(rules))
-})
-
-it.only('should compile responsive rules', () => {
-  const rules = responsiveRules('block', {
-    '@nest': {
-      '&:not([hidden])': {
-        display: 'block',
-      },
-    },
-  })
-
-  // eslint-disable-next-line no-console
-  console.log(compileRules(rules))
-})

package/src/css/compile/compileRules.ts

@@ -1,43 +0,0 @@
-import {scopeClassName} from '../scopeClassName'
-import {type Rules} from '../types'
-import {compileMediaQueryRule, compileRule} from './compileRule'
-import {CompileRulesContext} from './types'
-
-/** @public */
-export function compileRules(rules: Rules): string {
-  let css = ''
-
-  const context: CompileRulesContext = {
-    keyframes: {},
-    media: {},
-  }
-
-  for (const [className, props] of Object.entries(rules)) {
-    const ruleCss = compileRule(
-      `.${scopeClassName(className)}`.replace(/:/g, '\\:'),
-      props,
-      context,
-    )
-
-    css += ruleCss ? `${ruleCss}\n` : ''
-  }
-
-  for (const [name, value] of Object.entries(context.keyframes)) {
-    let keyframesCss = `@keyframes ${name} {\n`
-
-    for (const [key, props] of Object.entries(value)) {
-      keyframesCss += `  ${key}`
-      keyframesCss += compileRule('', props, context).replace(/\n/g, '\n    ') + '\n'
-    }
-
-    keyframesCss += `\n}\n`
-
-    css += keyframesCss
-  }
-
-  for (const [query, queryRules] of Object.entries(context.media)) {
-    css += compileMediaQueryRule(query, queryRules) + '\n'
-  }
-
-  return css.replace(/\n{2,}/g, '\n').trimStart()
-}

package/src/css/compile/compileStyle.ts

@@ -1,148 +0,0 @@
-import {PREFIX} from '../constants'
-import {Properties, PropertiesWithVarsAndNested, Style, StyleRules} from '../types'
-import {isArray} from '../util'
-
-/** @public */
-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`
-
-      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 ${PREFIX}${layerName} {\n`
-        css += compileStyleRules(layerRules)
-        css += '}\n\n'
-      }
-    }
-  }
-
-  return css
-}
-
-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('&', 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) {
-    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/compile/compileSystem.ts

@@ -1,10 +0,0 @@
-// import {rules} from '../rules'
-import {systemStyle} from '../system.style'
-import {compileStyle} from './compileStyle'
-// import {compileRules} from './compileRules'
-
-/** @public */
-export function compileSystem(): string {
-  // return compileRules(rules)
-  return compileStyle(systemStyle)
-}

package/src/css/compile/compileTheme.ts

@@ -1,15 +0,0 @@
-import {type RootTheme} from '@sanity/ui/theme'
-
-import {compileTheme_v3} from './compileTheme_v3'
-
-export function compileTheme(theme: RootTheme): string {
-  if (theme.v3) {
-    return compileTheme_v3(theme.v3)
-  }
-
-  if (theme.v2) {
-    return `/* v2 - not supported */\n`
-  }
-
-  return `/* v0 - not supported */\n`
-}