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

package/src/core/lib/styled/elements.ts

@@ -1,135 +0,0 @@
-export const elements = [
-  'a',
-  'abbr',
-  'address',
-  'area',
-  'article',
-  'aside',
-  'audio',
-  'b',
-  'base',
-  'bdi',
-  'bdo',
-  'big',
-  'blockquote',
-  'body',
-  'br',
-  'button',
-  'canvas',
-  'caption',
-  'cite',
-  'code',
-  'col',
-  'colgroup',
-  'data',
-  'datalist',
-  'dd',
-  'del',
-  'details',
-  'dfn',
-  'dialog',
-  'div',
-  'dl',
-  'dt',
-  'em',
-  'embed',
-  'fieldset',
-  'figcaption',
-  'figure',
-  'footer',
-  'form',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'header',
-  'hgroup',
-  'hr',
-  'html',
-  'i',
-  'iframe',
-  'img',
-  'input',
-  'ins',
-  'kbd',
-  'keygen',
-  'label',
-  'legend',
-  'li',
-  'link',
-  'main',
-  'map',
-  'mark',
-  'menu',
-  'menuitem',
-  'meta',
-  'meter',
-  'nav',
-  'noscript',
-  'object',
-  'ol',
-  'optgroup',
-  'option',
-  'output',
-  'p',
-  'param',
-  'picture',
-  'pre',
-  'progress',
-  'q',
-  'rp',
-  'rt',
-  'ruby',
-  's',
-  'samp',
-  'script',
-  'section',
-  'select',
-  'small',
-  'source',
-  'span',
-  'strong',
-  'style',
-  'sub',
-  'summary',
-  'sup',
-  'table',
-  'tbody',
-  'td',
-  'textarea',
-  'tfoot',
-  'th',
-  'thead',
-  'time',
-  'tr',
-  'track',
-  'u',
-  'ul',
-  'use',
-  'var',
-  'video',
-  'wbr', // SVG
-  'circle',
-  'clipPath',
-  'defs',
-  'ellipse',
-  'foreignObject',
-  'g',
-  'image',
-  'line',
-  'linearGradient',
-  'marker',
-  'mask',
-  'path',
-  'pattern',
-  'polygon',
-  'polyline',
-  'radialGradient',
-  'rect',
-  'stop',
-  'svg',
-  'text',
-  'tspan',
-] as const

package/src/core/lib/styled/index.ts

@@ -1,2 +0,0 @@
-export * from './members'
-export * from './styled'

package/src/core/lib/styled/members.ts

@@ -1,15 +0,0 @@
-import {
-  css as _css,
-  createGlobalStyle as _createGlobalStyle,
-  type ExecutionContext as _ExecutionContext,
-  keyframes as _keyframes,
-  // ThemeProvider as _ThemeProvider,
-  useTheme as _useTheme,
-} from 'styled-components'
-
-export const createGlobalStyle = _createGlobalStyle
-export const css = _css
-export type ExecutionContext = _ExecutionContext
-export const keyframes = _keyframes
-// export const ThemeProvider = _ThemeProvider
-export const useTheme = _useTheme

package/src/core/lib/styled/styled.ts

@@ -1,79 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
-import {createElement, forwardRef} from 'react'
-import {styled as _styled} from 'styled-components'
-import {elements} from './elements'
-
-const baseStyled = (tagName: string): any => {
-  const m = (_strings: TemplateStringsArray, ..._interpolations: any[]) => {
-    const Styled = forwardRef(function Styled(props: any, ref: any) {
-      const {as, forwardedAs, ...rest} = props
-
-      const sanitizedProps = Object.fromEntries(
-        Object.entries(rest)
-          .filter(([, val]) => Boolean(val) && (!isArray(val) || val.length > 0))
-          .map(([key, val]) => {
-            if (key.startsWith('$')) {
-              return [`data-${toSnakeCase(key.slice(1))}`, val]
-            }
-
-            return [key, val]
-          }),
-      )
-
-      const t = as ?? tagName
-
-      return createElement(t, {...sanitizedProps, as: forwardedAs, ref})
-    })
-
-    Styled.displayName = `Styled(${typeof tagName === 'function' ? (tagName as any).displayName : tagName})`
-
-    return Styled
-  }
-
-  m['attrs'] = (attrs: any) => {
-    return (_strings: TemplateStringsArray, ..._interpolations: any[]) => {
-      const StyledAttrs = forwardRef(function StyledAttrs(_props: any, ref: any) {
-        const props = {...attrs, ..._props}
-        const {as, forwardedAs, ...rest} = props
-
-        const sanitizedProps = Object.fromEntries(
-          Object.entries(rest)
-            .filter(([, val]) => Boolean(val) && (!isArray(val) || val.length > 0))
-            .map(([key, val]) => {
-              if (key.startsWith('$')) {
-                return [`data-${toSnakeCase(key.slice(1))}`, val]
-              }
-
-              return [key, val]
-            }),
-        )
-
-        const t = as ?? tagName
-
-        return createElement(t, {...sanitizedProps, as: forwardedAs, ref})
-      })
-
-      StyledAttrs.displayName = `StyledAttrs(${typeof tagName === 'function' ? (tagName as any).displayName : tagName})`
-
-      return StyledAttrs
-    }
-  }
-
-  return m
-}
-
-export const styled = baseStyled as typeof _styled
-
-for (const tagName of elements) {
-  ;(styled as any)[tagName] = baseStyled(tagName)
-}
-
-function toSnakeCase(str: string): string {
-  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)
-}
-
-function isArray(value: unknown): value is unknown[] {
-  return Array.isArray(value)
-}

package/src/core/primitives/avatar/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}

package/src/core/primitives/avatar/styles.ts

@@ -1,166 +0,0 @@
-import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {rem, _responsive, ThemeProps} from '../../_compat'
-import {focusRingStyle} from '../../_compat/styles/internal'
-import {AvatarRootStyleProps, ResponsiveAvatarSizeStyleProps} from './types'
-
-export const avatarStyle = {
-  root: avatarRootStyle,
-  arrow: avatarArrowStyle,
-  bgStroke: avatarBgStrokeStyle,
-  stroke: avatarStrokeStyle,
-  initials: avatarInitialsStyle,
-  image: avatarImageStyle,
-}
-
-function avatarArrowStyle(): CSSObject {
-  return {
-    'position': 'absolute',
-    'boxSizing': 'border-box',
-    'zIndex': 0,
-    'opacity': 0,
-    'transition': 'all 0.2s linear',
-    'transform': 'rotate(-90deg) translate3d(0, 6px, 0)',
-    'left': 0,
-    'right': 0,
-    'top': 0,
-    'bottom': 0,
-
-    '& > svg': {
-      'width': '11px',
-      'height': '7px',
-      'position': 'absolute',
-      'top': '-5px',
-      'left': '50%',
-      'transform': 'translateX(-6px)',
-
-      '&:not([hidden])': {
-        display: 'block',
-      },
-    },
-
-    "[data-arrow-position='inside'] > &": {
-      transform: 'rotate(-90deg) translate3d(0, 6px, 0)',
-      opacity: 0,
-    },
-
-    "[data-arrow-position='top'] > &": {
-      opacity: 1,
-      transform: 'rotate(0deg)',
-    },
-
-    "[data-arrow-position='bottom'] > &": {
-      opacity: 1,
-      transform: 'rotate(-180deg)',
-    },
-  }
-}
-
-export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSObject {
-  const {$color} = props
-  const {avatar} = getTheme_v2(props.theme)
-
-  return {
-    '--avatar-bg-color': `var(--card-avatar-${$color}-bg-color)`,
-    '--avatar-fg-color': `var(--card-avatar-${$color}-fg-color)`,
-
-    'backgroundColor': 'var(--avatar-bg-color)',
-    'position': 'relative',
-    'boxSizing': 'border-box',
-    'userSelect': 'none',
-    'boxShadow': '0 0 0 1px var(--card-bg-color)',
-
-    '&[data-status="inactive"]': {
-      opacity: 0.5,
-    },
-
-    '&>svg': {
-      '&:not([hidden])': {
-        display: 'block',
-      },
-    },
-
-    /* &:is(button) */
-    '&[data-as="button"]': {
-      'WebkitFontSmoothing': 'inherit',
-      'appearance': 'none',
-      'margin': 0,
-      'padding': 0,
-      'border': 0,
-      'font': 'inherit',
-      'color': 'inherit',
-      'outline': 'none',
-
-      '&:focus': {
-        boxShadow: focusRingStyle({focusRing: avatar.focusRing}),
-      },
-
-      '&:focus:not(:focus-visible)': {
-        boxShadow: 'none',
-      },
-    },
-  }
-}
-
-export function responsiveAvatarSizeStyle(
-  props: ResponsiveAvatarSizeStyleProps & ThemeProps,
-): CSSObject[] {
-  const {avatar, media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$size, (size) => {
-    const avatarSize = avatar.sizes[size] || avatar.sizes[0]
-
-    return {
-      'width': rem(avatarSize.size),
-      'height': rem(avatarSize.size),
-      'borderRadius': rem(avatarSize.size / 2),
-
-      '&>svg': {
-        width: rem(avatarSize.size),
-        height: rem(avatarSize.size),
-        borderRadius: rem(avatarSize.size / 2),
-      },
-    }
-  })
-}
-
-export function avatarImageStyle(): CSSObject {
-  return {
-    position: 'relative',
-  }
-}
-
-export function avatarInitialsStyle(): CSSObject {
-  return {
-    'width': '100%',
-    'height': '100%',
-    'color': 'var(--avatar-fg-color)',
-    'alignItems': 'center',
-    'justifyContent': 'center',
-    'textTransform': 'uppercase',
-    'textAlign': 'center',
-    'borderRadius': '50%',
-
-    '&:not([hidden])': {
-      display: 'flex',
-    },
-  }
-}
-
-function avatarBgStrokeStyle(): CSSObject {
-  return {
-    strokeWidth: '4px',
-    stroke: 'var(--card-bg-color)',
-  }
-}
-
-function avatarStrokeStyle(): CSSObject {
-  return {
-    'strokeWidth': '2px',
-    'stroke': 'var(--avatar-bg-color)',
-
-    '[data-status="editing"] &': {
-      strokeDasharray: '2 4',
-      strokeLinecap: 'round',
-    },
-  }
-}

package/src/core/primitives/badge/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}

package/src/core/primitives/badge/styles.ts

@@ -1,19 +0,0 @@
-import {CSSObject} from '@sanity/ui/theme'
-import {BadgeStyleProps} from './types'
-
-export function badgeStyle(props: BadgeStyleProps): CSSObject {
-  const {$tone} = props
-
-  return {
-    '--card-bg-color': `var(--card-badge-${$tone}-bg-color)`,
-    '--card-fg-color': `var(--card-badge-${$tone}-fg-color)`,
-
-    'backgroundColor': 'var(--card-bg-color)',
-    'cursor': 'default',
-
-    '&:not([hidden])': {
-      display: 'inline-block',
-      verticalAlign: 'top',
-    },
-  }
-}

package/src/core/primitives/box/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}

package/src/core/primitives/button/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}

package/src/core/primitives/button/styles.ts

@@ -1,116 +0,0 @@
-import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {ThemeProps} from '../../_compat'
-import {_cardColorStyle} from '../../_compat/styles/card'
-import {focusRingBorderStyle, focusRingStyle} from '../../_compat/styles/internal'
-import {css} from '../../lib/styled'
-import {ButtonMode, ButtonTone, ButtonWidth} from '../../types'
-
-/**
- * @internal
- */
-export function buttonBaseStyles(
-  props: {$width?: ButtonWidth} & ThemeProps,
-): ReturnType<typeof css> {
-  const {$width} = props
-  const {style} = getTheme_v2(props.theme)
-
-  return css`
-    ${style?.button};
-
-    -webkit-font-smoothing: inherit;
-    appearance: none;
-    display: inline-flex;
-    align-items: center;
-    font: inherit;
-    border: 0;
-    outline: none;
-    user-select: none;
-    text-decoration: none;
-    border: 0;
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    white-space: nowrap;
-    text-align: left;
-    position: relative;
-    vertical-align: top;
-
-    ${$width === 'fill' &&
-    css`
-      width: -moz-available;
-      width: -webkit-fill-available;
-      width: stretch;
-    `}
-
-    & > span {
-      display: block;
-      flex: 1;
-      min-width: 0;
-      border-radius: inherit;
-    }
-
-    &::-moz-focus-inner {
-      border: 0;
-      padding: 0;
-    }
-  `
-}
-
-function combineBoxShadow(...boxShadows: (string | undefined)[]): string {
-  return boxShadows.filter(Boolean).join(',')
-}
-
-/**
- * @internal
- */
-export function buttonColorStyles(
-  props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps,
-): CSSObject[] {
-  const {$mode} = props
-  const {button, color: baseColor, style} = getTheme_v2(props.theme)
-  const shadow = props.$mode === 'ghost'
-  const mode = baseColor.button[$mode] || baseColor.button.default
-  const color = mode[props.$tone] || mode.default
-  const border = {
-    width: button.border.width,
-    color: 'var(--card-border-color)',
-  }
-  // const defaultBoxShadow = `inset 0px -1.5px 0px ${buttonTheme.border.width}px color-mix(in srgb, var(--card-border-color) 25%, var(--card-bg-color))`
-  const defaultBoxShadow = undefined
-
-  return [
-    _cardColorStyle(baseColor, color.enabled),
-    {
-      'backgroundColor': 'var(--card-bg-color)',
-      'color': 'var(--card-fg-color)',
-      'boxShadow': focusRingBorderStyle(border),
-      '&:disabled, &[data-disabled="true"]': _cardColorStyle(baseColor, color.disabled),
-      "&:not([data-disabled='true'])": {
-        'boxShadow': combineBoxShadow(
-          focusRingBorderStyle(border),
-          shadow ? defaultBoxShadow : undefined,
-        ),
-        '&:focus': {
-          boxShadow: focusRingStyle({
-            base: baseColor,
-            border: {width: 2, color: baseColor.bg},
-            focusRing: button.focusRing,
-          }),
-        },
-        '&:focus:not(:focus-visible)': {
-          boxShadow: combineBoxShadow(
-            focusRingBorderStyle(border),
-            shadow ? defaultBoxShadow : undefined,
-          ),
-        },
-        '@media (hover: hover)': {
-          '&:hover': _cardColorStyle(baseColor, color.hovered),
-          '&:active': _cardColorStyle(baseColor, color.pressed),
-          '&[data-hovered]': _cardColorStyle(baseColor, color.hovered),
-        },
-        '&[data-selected]': _cardColorStyle(baseColor, color.pressed),
-      },
-    },
-    style?.button?.root,
-  ].filter(Boolean) as CSSObject[]
-}

package/src/core/primitives/card/RootCardContext.ts

@@ -1,3 +0,0 @@
-import {createContext} from 'react'
-
-export const RootCardContext = createContext<{renderedVars: boolean} | null>(null)

package/src/core/primitives/card/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}

package/src/core/primitives/checkbox/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}

package/src/core/primitives/code/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}

package/src/core/primitives/code/styles.ts

@@ -1,77 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css, type ExecutionContext} from '../../lib/styled'
-
-function codeSyntaxHighlightingStyle({theme}: ExecutionContext) {
-  const {
-    color: {syntax: color},
-  } = getTheme_v2(theme)
-
-  return {
-    '&.atrule': {color: color.atrule},
-    '&.attr-name': {color: color.attrName},
-    '&.attr-value': {color: color.attrValue},
-    '&.attribute': {color: color.attribute},
-    '&.boolean': {color: color.boolean},
-    '&.builtin': {color: color.builtin},
-    '&.cdata': {color: color.cdata},
-    '&.char': {color: color.char},
-    '&.class': {color: color.class},
-    '&.class-name': {color: color.className},
-    '&.comment': {color: color.comment},
-    '&.constant': {color: color.constant},
-    '&.deleted': {color: color.deleted},
-    '&.doctype': {color: color.doctype},
-    '&.entity': {color: color.entity},
-    '&.function': {color: color.function},
-    '&.hexcode': {color: color.hexcode},
-    '&.id': {color: color.id},
-    '&.important': {color: color.important},
-    '&.inserted': {color: color.inserted},
-    '&.keyword': {color: color.keyword},
-    '&.number': {color: color.number},
-    '&.operator': {color: color.operator},
-    '&.prolog': {color: color.prolog},
-    '&.property': {color: color.property},
-    '&.pseudo-class': {color: color.pseudoClass},
-    '&.pseudo-element': {color: color.pseudoElement},
-    '&.punctuation': {color: color.punctuation},
-    '&.regex': {color: color.regex},
-    '&.selector': {color: color.selector},
-    '&.string': {color: color.string},
-    '&.symbol': {color: color.symbol},
-    '&.tag': {color: color.tag},
-    '&.unit': {color: color.unit},
-    '&.url': {color: color.url},
-    '&.variable': {color: color.variable},
-  }
-}
-
-export function codeBaseStyle(): ReturnType<typeof css> {
-  return css`
-    color: var(--card-code-fg-color);
-
-    & code {
-      font-family: inherit;
-
-      &.refractor .token {
-        ${codeSyntaxHighlightingStyle}
-      }
-    }
-
-    & a {
-      color: inherit;
-      text-decoration: underline;
-      border-radius: 1px;
-    }
-
-    & svg {
-      /* Certain popular CSS libraries changes the defaults for SVG display */
-      /* Make sure SVGs are rendered as inline elements */
-      display: inline;
-    }
-
-    & [data-sanity-icon] {
-      vertical-align: baseline;
-    }
-  `
-}

package/src/core/primitives/container/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}

package/src/core/primitives/container/styles.ts

@@ -1,22 +0,0 @@
-import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {rem, _responsive, ThemeProps} from '../../_compat'
-import {ResponsiveWidthStyleProps} from './types'
-
-const BASE_STYLE: CSSObject = {
-  width: '100%',
-  margin: '0 auto',
-}
-
-export function containerBaseStyle(): CSSObject {
-  return BASE_STYLE
-}
-
-export function responsiveContainerWidthStyle(
-  props: ResponsiveWidthStyleProps & ThemeProps,
-): CSSObject[] {
-  const {container, media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$width, (val) => ({
-    maxWidth: val === 'auto' ? 'none' : rem(container[val]),
-  }))
-}