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

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

@@ -1,16 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import {vars} from '../../theme'
-import type {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'max-w-0', {maxWidth: vars.container[0]})
-_responsiveRule(util, 'max-w-1', {maxWidth: vars.container[1]})
-_responsiveRule(util, 'max-w-2', {maxWidth: vars.container[2]})
-_responsiveRule(util, 'max-w-3', {maxWidth: vars.container[3]})
-_responsiveRule(util, 'max-w-4', {maxWidth: vars.container[4]})
-_responsiveRule(util, 'max-w-5', {maxWidth: vars.container[5]})
-_responsiveRule(util, 'max-w-auto', {maxWidth: 'none'})
-_responsiveRule(util, 'max-w-fill', {maxWidth: '100%'})
-
-export const maxWidthStyle: Style = {layers: {util}}

package/src/css/aspects/maxWidth/maxWidth.ts

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

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

@@ -1,9 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import type {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'min-h-0', {minHeight: '0'})
-_responsiveRule(util, 'min-h-full', {minHeight: '100%'})
-
-export const minHeightStyle: Style = {layers: {util}}

package/src/css/aspects/minHeight/minHeight.ts

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

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

@@ -1,13 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import type {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'min-w-0', {minWidth: '0'})
-_responsiveRule(util, 'min-w-auto', {minWidth: 'auto'})
-_responsiveRule(util, 'min-w-full', {minWidth: '100%'})
-_responsiveRule(util, 'min-w-min', {minWidth: 'min-content'})
-_responsiveRule(util, 'min-w-max', {minWidth: 'max-content'})
-_responsiveRule(util, 'min-w-fit', {minWidth: 'fit-content'})
-
-export const minWidthStyle: Style = {layers: {util}}

package/src/css/aspects/minWidth/minWidth.ts

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

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

@@ -1,9 +0,0 @@
-import type {Style, StyleRules} from '../../types'
-
-const rules: StyleRules = {
-  '.outline-none': {
-    outline: 'none',
-  },
-}
-
-export const outlineStyle: Style = {layers: {util: rules}}

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

@@ -1,11 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import type {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'overflow-visible', {overflow: 'visible'})
-_responsiveRule(util, 'overflow-hidden', {overflow: 'hidden'})
-_responsiveRule(util, 'overflow-scroll', {overflow: 'scroll'})
-_responsiveRule(util, 'overflow-auto', {overflow: 'auto'})
-
-export const overflowStyle: Style = {layers: {util}}

package/src/css/aspects/overflow/overflow.ts

@@ -1,12 +0,0 @@
-import {_resp} from '../../_resp'
-import {_scopeClassNames} from '../../_scopeClassNames'
-import type {OverflowStyleProps} from './types'
-
-/** @internal */
-export function overflow(props: OverflowStyleProps): string | undefined {
-  return _scopeClassNames(
-    _resp(`overflow`, props.overflow),
-    _resp(`overflow-x`, props.overflowX),
-    _resp(`overflow-y`, props.overflowY),
-  )
-}

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

@@ -1,11 +0,0 @@
-import type {ResponsiveProp} from '../../types'
-
-/** @public */
-export type BoxOverflow = 'visible' | 'hidden' | 'auto'
-
-/** @public */
-export interface OverflowStyleProps {
-  overflow?: ResponsiveProp<BoxOverflow>
-  overflowX?: ResponsiveProp<BoxOverflow>
-  overflowY?: ResponsiveProp<BoxOverflow>
-}

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

@@ -1,43 +0,0 @@
-import {SPACE} from '@sanity/ui/theme'
-
-import {_responsiveRule} from '../../_responsiveRule'
-import {vars} from '../../theme'
-import type {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-for (const space of SPACE) {
-  _responsiveRule(util, `p-${space}`, {padding: vars.space[space]})
-}
-
-for (const space of SPACE) {
-  _responsiveRule(util, `px-${space}`, {
-    paddingLeft: vars.space[space],
-    paddingRight: vars.space[space],
-  })
-}
-
-for (const space of SPACE) {
-  _responsiveRule(util, `py-${space}`, {
-    paddingTop: vars.space[space],
-    paddingBottom: vars.space[space],
-  })
-}
-
-for (const space of SPACE) {
-  _responsiveRule(util, `pt-${space}`, {paddingTop: vars.space[space]})
-}
-
-for (const space of SPACE) {
-  _responsiveRule(util, `pr-${space}`, {paddingRight: vars.space[space]})
-}
-
-for (const space of SPACE) {
-  _responsiveRule(util, `pb-${space}`, {paddingBottom: vars.space[space]})
-}
-
-for (const space of SPACE) {
-  _responsiveRule(util, `pl-${space}`, {paddingLeft: vars.space[space]})
-}
-
-export const paddingStyle: Style = {layers: {util}}

package/src/css/aspects/padding/padding.ts

@@ -1,16 +0,0 @@
-import {_resp} from '../../_resp'
-import {_scopeClassNames} from '../../_scopeClassNames'
-import type {PaddingStyleProps} from './types'
-
-/** @internal */
-export function padding(props: PaddingStyleProps): string | undefined {
-  return _scopeClassNames(
-    _resp('p', props.padding),
-    _resp('px', props.paddingX),
-    _resp('py', props.paddingY),
-    _resp('pt', props.paddingTop),
-    _resp('pr', props.paddingRight),
-    _resp('pb', props.paddingBottom),
-    _resp('pl', props.paddingLeft),
-  )
-}

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

@@ -1,14 +0,0 @@
-import type {Space} from '@sanity/ui/theme'
-
-import type {ResponsiveProp} from '../../types'
-
-/** @public */
-export interface PaddingStyleProps {
-  padding?: ResponsiveProp<Space>
-  paddingTop?: ResponsiveProp<Space>
-  paddingRight?: ResponsiveProp<Space>
-  paddingBottom?: ResponsiveProp<Space>
-  paddingLeft?: ResponsiveProp<Space>
-  paddingX?: ResponsiveProp<Space>
-  paddingY?: ResponsiveProp<Space>
-}

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

@@ -1,13 +0,0 @@
-import type {Style, StyleRules} from '../../types'
-
-const rules: StyleRules = {
-  '.pointer-events-none': {
-    pointerEvents: 'none',
-  },
-
-  '.pointer-events-auto': {
-    pointerEvents: 'auto',
-  },
-}
-
-export const pointerEventsStyle: Style = {layers: {util: rules}}

package/src/css/aspects/pointerEvents/pointerEvents.ts

@@ -1,7 +0,0 @@
-import {_scopeClassNames} from '../../_scopeClassNames'
-import type {PointerEventsStyleProps} from './types'
-
-/** @internal */
-export function pointerEvents(props: PointerEventsStyleProps): string | undefined {
-  return _scopeClassNames(props.pointerEvents && `pointer-events-${props.pointerEvents}`)
-}

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,8 +0,0 @@
-import {_resp} from '../../_resp'
-import {_scopeClassNames} from '../../_scopeClassNames'
-import type {PositionStyleProps} from './types'
-
-/** @internal */
-export function position(props: PositionStyleProps): string | undefined {
-  return _scopeClassNames(_resp('position', props.position))
-}

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

@@ -1,16 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import {vars} from '../../theme'
-import type {Style, StyleRules} from '../../types'
-
-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 {_scopeClassNames} from '../../_scopeClassNames'
-import type {RadiusStyleProps} from './types'
-
-/** @public */
-export function radius(props: RadiusStyleProps): string | undefined {
-  return _scopeClassNames(_resp('r', props.radius))
-}

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

@@ -1,24 +0,0 @@
-import {SHADOW} from '@sanity/ui/theme'
-
-import {_responsiveRule} from '../../_responsiveRule'
-import {vars} from '../../theme'
-import type {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-for (const index of SHADOW) {
-  if (index === 0) {
-    _responsiveRule(util, 'shadow-0', {boxShadow: 'none'})
-  } else {
-    _responsiveRule(util, `shadow-${index}`, {
-      boxShadow: [
-        `0 0 0 ${vars.card.shadow.outline} ${vars.color.shadow.outline}`,
-        `${vars.shadow[index].umbra} ${vars.color.shadow.umbra}`,
-        `${vars.shadow[index].penumbra} ${vars.color.shadow.penumbra}`,
-        `${vars.shadow[index].ambient} ${vars.color.shadow.ambient}`,
-      ].join(', '),
-    })
-  }
-}
-
-export const shadowStyle: Style = {layers: {util}}

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

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

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

@@ -1,26 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import type {Style, StyleRules} from '../../types'
-
-export const util: StyleRules = {}
-
-_responsiveRule(util, `text-align-initial`, {
-  textAlign: 'initial',
-})
-
-_responsiveRule(util, `text-align-left`, {
-  textAlign: 'left',
-})
-
-_responsiveRule(util, `text-align-center`, {
-  textAlign: 'center',
-})
-
-_responsiveRule(util, `text-align-right`, {
-  textAlign: 'right',
-})
-
-_responsiveRule(util, `text-align-justify`, {
-  textAlign: 'justify',
-})
-
-export const textAlignStyle: Style = {layers: {util}}

package/src/css/aspects/textAlign/textAlign.ts

@@ -1,8 +0,0 @@
-import {_resp} from '../../_resp'
-import {_scopeClassNames} from '../../_scopeClassNames'
-import type {TextAlignStyleProps} from './types'
-
-/** @public */
-export function textAlign(props: TextAlignStyleProps): string | undefined {
-  return _scopeClassNames(_resp('text-align', props.textAlign))
-}

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,7 +0,0 @@
-import {_scopeClassNames} from '../../_scopeClassNames'
-import type {TextOverflowStyleProps} from './types'
-
-/** @internal */
-export function textOverflow(props: TextOverflowStyleProps): string | undefined {
-  return _scopeClassNames(props.textOverflow && `text-overflow-${props.textOverflow}`)
-}

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

@@ -1,11 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import type {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,8 +0,0 @@
-import {_resp} from '../../_resp'
-import {_scopeClassNames} from '../../_scopeClassNames'
-import type {WidthStyleProps} from './types'
-
-/** @internal */
-export function width(props: WidthStyleProps): string | undefined {
-  return _scopeClassNames(_resp('w', props.width) ?? '')
-}

package/src/css/components/breadcrumbs/breadcrumbs.style.ts

@@ -1,9 +0,0 @@
-import type {Style, StyleRules} from '../../types'
-
-const component: StyleRules = {
-  '.breadcrumbs': {
-    lineHeight: 0,
-  },
-}
-
-export const breadcrumbsStyle: Style = {layers: {component}}

package/src/css/components/dialog/dialog.style.ts

@@ -1,77 +0,0 @@
-import {vars} from '../../theme'
-import type {Style, StyleKeyframes, StyleRules} from '../../types'
-
-const KEYFRAMES_DIALOG_ZOOM_IN = 'dialog-zoom-in'
-const KEYFRAMES_DIALOG_FADE_IN = 'dialog-fade-in'
-
-const keyframes: StyleKeyframes = {
-  [KEYFRAMES_DIALOG_ZOOM_IN]: {
-    from: {
-      opacity: 0,
-      transform: 'scale(0.95)',
-    },
-    to: {
-      opacity: 1,
-      transform: 'scale(1)',
-    },
-  },
-  [KEYFRAMES_DIALOG_FADE_IN]: {
-    from: {
-      opacity: 0,
-    },
-    to: {
-      opacity: 1,
-    },
-  },
-}
-
-const component: StyleRules = {
-  '.dialog': {
-    alignItems: 'center',
-    justifyContent: 'center',
-    outline: 'none',
-
-    background: vars.color.backdrop,
-
-    nest: {
-      '&[data-animate]': {
-        animation: `${KEYFRAMES_DIALOG_FADE_IN} 200ms ease-out`,
-      },
-
-      '&[data-animate] > [data-ui="DialogCard"]': {
-        animation: `${KEYFRAMES_DIALOG_ZOOM_IN} 200ms ease-out`,
-      },
-    },
-  },
-
-  '.dialog-container': {
-    width: '100%',
-    height: '100%',
-  },
-
-  '.dialog-card-root': {
-    width: '100%',
-    maxHeight: '100%',
-    // @ts-expect-error - TODO: fix this
-    overflow: ['hidden', 'clip'],
-  },
-
-  '.dialog-layout': {
-    width: '100%',
-  },
-
-  '.dialog-header': {
-    zIndex: 2,
-  },
-
-  '.dialog-content': {
-    zIndex: 1,
-    outline: 'none',
-  },
-
-  '.dialog-footer': {
-    zIndex: 3,
-  },
-}
-
-export const dialogStyle: Style = {keyframes, layers: {component}}

package/src/css/components/menu/menu.style.ts

@@ -1,17 +0,0 @@
-import {vars} from '../../theme'
-import type {Style, StyleRules} from '../../types'
-
-const component: StyleRules = {
-  '.menu': {
-    outline: 'none',
-  },
-
-  '.menu-divider': {
-    height: `1px`,
-    border: 0,
-    backgroundColor: vars.color.border,
-    margin: 0,
-  },
-}
-
-export const menuStyle: Style = {layers: {component}}

package/src/css/components/skeleton/skeleton.style.ts

@@ -1,104 +0,0 @@
-import {FONT_CODE_SIZE, FONT_HEADING_SIZE, FONT_LABEL_SIZE, FONT_TEXT_SIZE} from '@sanity/ui/theme'
-
-import {_responsiveRule} from '../../_responsiveRule'
-import {varNames, vars} from '../../theme'
-import type {Style, StyleKeyframes, StyleRules} from '../../types'
-
-// TODO: should keyframes be prefixed?
-const KEYFRAMES_PULSE = 'skeleton-pulse'
-
-const keyframes: StyleKeyframes = {
-  [KEYFRAMES_PULSE]: {
-    '0%': {
-      backgroundPosition: '100%',
-    },
-    '100%': {
-      backgroundPosition: '-100%',
-    },
-  },
-}
-
-const component: StyleRules = {
-  '.skeleton': {
-    'backgroundColor': vars.color.skeleton.from,
-    'backgroundPosition': '100%',
-    'backgroundSize': '200% 100%',
-    'backgroundAttachment': 'fixed',
-    'opacity': 0,
-    'transition': 'opacity 200ms ease-in',
-
-    'nest': {
-      '&[data-animated]': {
-        backgroundImage: [
-          `linear-gradient(to right,`,
-          `${vars.color.skeleton.from},`,
-          `${vars.color.skeleton.to},`,
-          `${vars.color.skeleton.from},`,
-          `${vars.color.skeleton.from},`,
-          `${vars.color.skeleton.from}`,
-          `)`,
-        ].join(''),
-        animationName: KEYFRAMES_PULSE,
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite',
-        animationDuration: '2000ms',
-      },
-
-      '&[data-visible]': {
-        opacity: 1,
-      },
-    },
-
-    '@media': {
-      'screen and (prefers-reduced-motion: no-preference)': {
-        backgroundColor: vars.color.skeleton.from,
-      },
-    },
-  },
-
-  '.font-skeleton': {
-    height: `calc(${vars.font.skeleton.lineHeight} - ${vars.font.skeleton.ascenderHeight} - ${vars.font.skeleton.descenderHeight})`,
-  },
-}
-
-for (const size of FONT_CODE_SIZE) {
-  _responsiveRule(component, `code-skeleton-${size}`, {
-    vars: {
-      [varNames.font.skeleton.lineHeight]: vars.font.code.sizes[size].lineHeight,
-      [varNames.font.skeleton.ascenderHeight]: vars.font.code.sizes[size].ascenderHeight,
-      [varNames.font.skeleton.descenderHeight]: vars.font.code.sizes[size].descenderHeight,
-    },
-  })
-}
-
-for (const size of FONT_HEADING_SIZE) {
-  _responsiveRule(component, `heading-skeleton-${size}`, {
-    vars: {
-      [varNames.font.skeleton.lineHeight]: vars.font.heading.sizes[size].lineHeight,
-      [varNames.font.skeleton.ascenderHeight]: vars.font.heading.sizes[size].ascenderHeight,
-      [varNames.font.skeleton.descenderHeight]: vars.font.heading.sizes[size].descenderHeight,
-    },
-  })
-}
-
-for (const size of FONT_LABEL_SIZE) {
-  _responsiveRule(component, `label-skeleton-${size}`, {
-    vars: {
-      [varNames.font.skeleton.lineHeight]: vars.font.label.sizes[size].lineHeight,
-      [varNames.font.skeleton.ascenderHeight]: vars.font.label.sizes[size].ascenderHeight,
-      [varNames.font.skeleton.descenderHeight]: vars.font.label.sizes[size].descenderHeight,
-    },
-  })
-}
-
-for (const size of FONT_TEXT_SIZE) {
-  _responsiveRule(component, `text-skeleton-${size}`, {
-    vars: {
-      [varNames.font.skeleton.lineHeight]: vars.font.text.sizes[size].lineHeight,
-      [varNames.font.skeleton.ascenderHeight]: vars.font.text.sizes[size].ascenderHeight,
-      [varNames.font.skeleton.descenderHeight]: vars.font.text.sizes[size].descenderHeight,
-    },
-  })
-}
-
-export const skeletonStyle: Style = {keyframes, layers: {component}}

package/src/css/components/toast/toast.style.ts

@@ -1,20 +0,0 @@
-import type {Style, StyleRules} from '../../types'
-
-const component: StyleRules = {
-  '.toast-layer': {
-    position: 'fixed',
-    right: 0,
-    bottom: 0,
-    pointerEvents: 'none',
-    maxWidth: '420px',
-    width: '100%',
-  },
-
-  '.toast': {
-    pointerEvents: 'all',
-    // @ts-expect-error - TODO: fix this
-    overflow: ['hidden', 'clip'],
-  },
-}
-
-export const toastStyle: Style = {layers: {component}}