@sanity/ui 3.0.0-static.10 → 3.0.0-static.2

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

@@ -1,46 +0,0 @@
-// import {type Style, type StyleRules, vars} from '@sanity/css'
-// import {SPACE} from '@sanity/theme'
-
-import {SPACE} from '@sanity/ui/theme'
-
-import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
-
-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/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/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/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/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/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/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/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(/&/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) {
-    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/components/breadcrumbs/breadcrumbs.style.ts

@@ -1,9 +0,0 @@
-import {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,79 +0,0 @@
-import {Style, StyleKeyframes, StyleRules} from '../../types'
-import {vars} from '../../vars'
-
-const keyframes: StyleKeyframes = {
-  'dialog-zoom-in': {
-    from: {
-      opacity: 0,
-      transform: 'scale(0.95)',
-    },
-    to: {
-      opacity: 1,
-      transform: 'scale(1)',
-    },
-  },
-  'dialog-fade-in': {
-    from: {
-      opacity: 0,
-    },
-    to: {
-      opacity: 1,
-    },
-  },
-}
-
-const component: StyleRules = {
-  '.dialog': {
-    // 'top': 0,
-    // 'left': 0,
-    // 'right': 0,
-    // 'bottom': 0,
-    'alignItems': 'center',
-    'justifyContent': 'center',
-    'outline': 'none',
-
-    'background': vars.color.backdrop,
-
-    '@nest': {
-      '&[data-animate]': {
-        animation: 'dialog-fade-in 200ms ease-out',
-      },
-
-      // Animates the dialog card.
-      '&[data-animate] > [data-ui="DialogCard"]': {
-        animation: '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 {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
-
-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,96 +0,0 @@
-import {FONT_CODE_SIZE, FONT_HEADING_SIZE, FONT_LABEL_SIZE, FONT_TEXT_SIZE} from '@sanity/ui/theme'
-
-import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleKeyframes, StyleRules} from '../../types'
-import {vars} from '../../vars'
-
-const keyframes: StyleKeyframes = {
-  'skeleton-pulse': {
-    '0%': {
-      backgroundPosition: '100%',
-    },
-    '100%': {
-      backgroundPosition: '-100%',
-    },
-  },
-}
-
-const component: StyleRules = {
-  '.skeleton': {
-    '--color-skeleton-from': `color-mix(in srgb, transparent, ${vars.color.muted.fg} 5%)`,
-    '--color-skeleton-to': `color-mix(in srgb, transparent, ${vars.color.muted.fg} 10%)`,
-
-    '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: 'skeleton-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(var(--font-skeleton-line-height) - var(--font-skeleton-ascender-height) - var(--font-skeleton-descender-height))`,
-  },
-}
-
-for (const size of FONT_CODE_SIZE) {
-  _responsiveRule(component, `code-skeleton-${size}`, {
-    '--font-skeleton-line-height': vars.font.code.sizes[size].lineHeight,
-    '--font-skeleton-ascender-height': vars.font.code.sizes[size].ascenderHeight,
-    '--font-skeleton-descender-height': vars.font.code.sizes[size].descenderHeight,
-  })
-}
-
-for (const size of FONT_HEADING_SIZE) {
-  _responsiveRule(component, `heading-skeleton-${size}`, {
-    '--font-skeleton-line-height': vars.font.heading.sizes[size].lineHeight,
-    '--font-skeleton-ascender-height': vars.font.heading.sizes[size].ascenderHeight,
-    '--font-skeleton-descender-height': vars.font.heading.sizes[size].descenderHeight,
-  })
-}
-
-for (const size of FONT_LABEL_SIZE) {
-  _responsiveRule(component, `label-skeleton-${size}`, {
-    '--font-skeleton-line-height': vars.font.label.sizes[size].lineHeight,
-    '--font-skeleton-ascender-height': vars.font.label.sizes[size].ascenderHeight,
-    '--font-skeleton-descender-height': vars.font.label.sizes[size].descenderHeight,
-  })
-}
-
-for (const size of FONT_TEXT_SIZE) {
-  _responsiveRule(component, `text-skeleton-${size}`, {
-    '--font-skeleton-line-height': vars.font.text.sizes[size].lineHeight,
-    '--font-skeleton-ascender-height': vars.font.text.sizes[size].ascenderHeight,
-    '--font-skeleton-descender-height': 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 {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}}

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

@@ -1,55 +0,0 @@
-import {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
-
-const component: StyleRules = {
-  '.tree-item': {
-    '@nest': {
-      '&[role="none"] > [role="treeitem"]': {
-        outline: 'none',
-        cursor: 'default',
-        borderRadius: '3px',
-
-        backgroundColor: vars.color.bg, // 'var(--card-bg-color)',
-        color: 'var(--treeitem-fg-color)',
-      },
-
-      '&[role="none"] > [role="treeitem"]:focus': {
-        position: 'relative',
-      },
-
-      '&[role="treeitem"]': {
-        outline: 'none',
-      },
-
-      '&[role="treeitem"] > div': {
-        cursor: 'default',
-        borderRadius: '3px',
-
-        backgroundColor: vars.color.bg, // 'var(--card-bg-color)',
-        color: 'var(--treeitem-fg-color)',
-      },
-
-      '&[role="treeitem"]:focus > div': {
-        position: 'relative',
-      },
-
-      // &[role='treeitem'] {
-      //   outline: none;
-
-      //   & > div {
-      //     cursor: default;
-      //     border-radius: 3px;
-
-      //     background-color: var(--card-bg-color);
-      //     color: var(--treeitem-fg-color);
-      //   }
-
-      //   &:focus > div {
-      //     position: relative;
-      //   }
-      // }
-    },
-  },
-}
-
-export const treeStyle: Style = {layers: {component}}

package/src/css/constants.ts

@@ -1 +0,0 @@
-export const PREFIX = 's-'

package/src/css/primitives/_input/__workshop__/customInput.tsx

@@ -1,16 +0,0 @@
-import {Box, Text} from '@sanity/ui'
-import {_input, _inputElement, _inputPresentation} from '@sanity/ui/css'
-
-export default function CustomInputStory() {
-  return (
-    <Box padding={4}>
-      <Box className={_input({border: true, padding: 3, radius: 2})}>
-        <button className={_inputElement()} tabIndex={0}>
-          <Text>Input text</Text>
-        </button>
-
-        <Box className={_inputPresentation()} padding={3}></Box>
-      </Box>
-    </Box>
-  )
-}

package/src/css/primitives/_input/__workshop__/index.ts

@@ -1,14 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'css/input',
-  title: 'Input',
-  stories: [
-    {
-      name: 'custom',
-      title: 'Custom',
-      component: lazy(() => import('./customInput')),
-    },
-  ],
-})