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

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

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

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

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

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

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

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

@@ -1,63 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {ThemeProps} from '../../_compat'
-import {css} from '../../lib/styled'
-import {HeadingStyleProps} from './types'
-
-export function headingBaseStyle(props: HeadingStyleProps & ThemeProps): ReturnType<typeof css> {
-  const {$accent, $muted} = props
-  const {font} = getTheme_v2(props.theme)
-
-  return css`
-    ${$accent &&
-    css`
-      color: var(--card-accent-fg-color);
-    `}
-
-    ${$muted &&
-    css`
-      color: var(--card-muted-fg-color);
-    `}
-
-    & code {
-      font-family: ${font.code.family};
-      border-radius: 1px;
-    }
-
-    & a {
-      text-decoration: none;
-      border-radius: 1px;
-      color: var(--card-link-color);
-      outline: none;
-
-      @media (hover: hover) {
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-
-      &:focus {
-        box-shadow:
-          0 0 0 1px var(--card-bg-color),
-          0 0 0 3px var(--card-focus-ring-color);
-      }
-
-      &:focus:not(:focus-visible) {
-        box-shadow: none;
-      }
-    }
-
-    & strong {
-      font-weight: ${font.heading.weights.bold};
-    }
-
-    & 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/heading/types.ts

@@ -1,7 +0,0 @@
-/**
- * @internal
- */
-export interface HeadingStyleProps {
-  $accent: boolean
-  $muted: boolean
-}

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

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

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

@@ -1,31 +0,0 @@
-import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {rem, _responsive, ThemeProps} from '../../_compat'
-import {ResponsiveInlineSpaceStyleProps} from './types'
-
-export function inlineBaseStyle(): CSSObject {
-  return {
-    'lineHeight': 0,
-
-    '&&:not([hidden])': {
-      display: 'block',
-    },
-
-    '& > div': {
-      display: 'inline-block',
-      verticalAlign: 'middle',
-    },
-  }
-}
-
-export function inlineSpaceStyle(props: ResponsiveInlineSpaceStyleProps & ThemeProps): CSSObject[] {
-  const {media, space} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$space, (spaceIndex) => {
-    const _space = rem(spaceIndex === 0.5 ? space[1] / 2 : space[spaceIndex])
-
-    return {
-      'margin': `-${_space} 0 0 -${_space}`,
-      '& > div': {padding: `${_space} 0 0 ${_space}`},
-    }
-  })
-}

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

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

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

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

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

@@ -1,44 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {ThemeProps} from '../../_compat'
-import {css} from '../../lib/styled'
-
-export function labelBaseStyle(
-  props: {$accent?: boolean; $muted: boolean} & ThemeProps,
-): ReturnType<typeof css> {
-  const {$accent, $muted} = props
-  const {font} = getTheme_v2(props.theme)
-
-  return css`
-    text-transform: uppercase;
-
-    ${$accent &&
-    css`
-      color: var(--card-accent-fg-color);
-    `}
-
-    ${$muted &&
-    css`
-      color: var(--card-muted-fg-color);
-    `}
-
-    & code {
-      font-family: ${font.code.family};
-      border-radius: 1px;
-    }
-
-    & a {
-      text-decoration: none;
-      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/popover/__workshop__/.eslintrc

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

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

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

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

@@ -1,116 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {rem, ThemeProps} from '../../_compat'
-import {focusRingBorderStyle, focusRingStyle} from '../../_compat/styles/internal'
-import {css} from '../../lib/styled'
-
-export function radioBaseStyle(): ReturnType<typeof css> {
-  return css`
-    position: relative;
-
-    &:not([hidden]) {
-      display: inline-block;
-    }
-
-    &[data-read-only] {
-      outline: 1px solid red;
-    }
-  `
-}
-
-export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
-  const {color, input} = getTheme_v2(props.theme)
-  const dist = (input.radio.size - input.radio.markSize) / 2
-
-  return css`
-    appearance: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    height: 100%;
-    width: 100%;
-    outline: none;
-    z-index: 1;
-    padding: 0;
-    margin: 0;
-    border-radius: ${rem(input.radio.size / 2)};
-    border: none;
-
-    /* enabled */
-    & + span {
-      display: block;
-      position: relative;
-      height: ${rem(input.radio.size)};
-      width: ${rem(input.radio.size)};
-      border-radius: ${rem(input.radio.size / 2)};
-      background: ${color.input.default.enabled.bg};
-      box-shadow: ${focusRingBorderStyle({
-        color: color.input.default.enabled.border,
-        width: input.border.width,
-      })};
-
-      &::after {
-        content: '';
-        position: absolute;
-        top: ${rem(dist)};
-        left: ${rem(dist)};
-        height: ${rem(input.radio.markSize)};
-        width: ${rem(input.radio.markSize)};
-        border-radius: ${rem(input.radio.markSize / 2)};
-        background: ${color.input.default.enabled.fg};
-        opacity: 0;
-      }
-    }
-
-    /* focused */
-    &:not(:disabled):focus + span {
-      box-shadow: ${focusRingStyle({
-        border: {width: input.border.width, color: color.input.default.enabled.border},
-        focusRing: input.radio.focusRing,
-      })};
-    }
-
-    &:not(:disabled):focus:not(:focus-visible) + span {
-      box-shadow: ${focusRingBorderStyle({
-        color: color.input.default.enabled.border,
-        width: input.border.width,
-      })};
-    }
-
-    &:checked + span::after {
-      opacity: 1;
-    }
-
-    /* customValidity */
-    &[data-error] + span {
-      background-color: ${color.input.invalid.enabled.border};
-      box-shadow: ${focusRingBorderStyle({
-        width: input.border.width,
-        color: color.input.invalid.enabled.muted.bg,
-      })};
-      &::after {
-        background: ${color.input.invalid.enabled.muted.bg};
-      }
-    }
-
-    /* read only */
-    &[data-read-only] + span {
-      box-shadow: 0 0 0 1px ${color.input.default.readOnly.border};
-      background: ${color.input.default.readOnly.bg};
-
-      &::after {
-        background: ${color.input.default.readOnly.border};
-      }
-    }
-
-    /* disabled */
-    &:not([data-read-only]):disabled + span {
-      box-shadow: 0 0 0 1px ${color.input.default.disabled.border};
-      background: ${color.input.default.disabled.bg};
-
-      &::after {
-        background: ${color.input.default.disabled.border};
-      }
-    }
-  `
-}

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

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

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

@@ -1,166 +0,0 @@
-import {ThemeFontSize, getTheme_v2} from '@sanity/ui/theme'
-import {CSSObject} from '@sanity/ui/theme'
-import {rem, _responsive, ThemeProps} from '../../_compat'
-import {
-  focusRingBorderStyle,
-  focusRingStyle,
-  responsiveInputPaddingIconRightStyle,
-  responsiveRadiusStyle,
-  ResponsiveRadiusStyleProps,
-} from '../../_compat/styles/internal'
-import {css} from '../../lib/styled'
-
-function rootStyle(): ReturnType<typeof css> {
-  return css`
-    position: relative;
-    width: -moz-available;
-    width: -webkit-fill-available;
-    width: stretch;
-
-    &:not([hidden]) {
-      display: inline-block;
-    }
-  `
-}
-
-function inputBaseStyle(props: ThemeProps): ReturnType<typeof css> {
-  const {font} = getTheme_v2(props.theme)
-
-  return css`
-    -webkit-font-smoothing: antialiased;
-    appearance: none;
-    border: 0;
-    font-family: ${font.text.family};
-    color: inherit;
-    width: 100%;
-    outline: none;
-    margin: 0;
-
-    &:disabled {
-      opacity: 1;
-    }
-  `
-}
-
-function inputColorStyle(props: ThemeProps) {
-  const {color, input} = getTheme_v2(props.theme)
-
-  return css`
-    /* enabled */
-    background-color: ${color.input.default.enabled.bg};
-    color: ${color.input.default.enabled.fg};
-    box-shadow: ${focusRingBorderStyle({
-      color: color.input.default.enabled.border,
-      width: input.border.width,
-    })};
-
-    /* hovered */
-    @media (hover: hover) {
-      &:not(:disabled):hover {
-        background-color: ${color.input.default.hovered.bg};
-        color: ${color.input.default.hovered.fg};
-        box-shadow: ${focusRingBorderStyle({
-          color: color.input.default.hovered.border,
-          width: input.border.width,
-        })};
-      }
-    }
-
-    /* focused */
-    &:not(:disabled):focus {
-      box-shadow: ${focusRingStyle({
-        border: {width: input.border.width, color: color.input.default.enabled.border},
-        focusRing: input.select.focusRing,
-      })};
-    }
-
-    /* read-only */
-    &[data-read-only] {
-      background-color: ${color.input.default.readOnly.bg};
-      color: ${color.input.default.readOnly.fg};
-      box-shadow: ${focusRingBorderStyle({
-        color: color.input.default.readOnly.border,
-        width: input.border.width,
-      })};
-    }
-
-    /* disabled */
-    &:not([data-read-only]):disabled {
-      background-color: ${color.input.default.disabled.bg};
-      color: ${color.input.default.disabled.fg};
-      box-shadow: ${focusRingBorderStyle({
-        color: color.input.default.disabled.border,
-        width: input.border.width,
-      })};
-    }
-  `
-}
-
-function textSize(size: ThemeFontSize) {
-  return {fontSize: rem(size.fontSize), lineHeight: rem(size.lineHeight)}
-}
-
-function inputTextSizeStyle(props: {$fontSize: number[]} & ThemeProps) {
-  const {$fontSize} = props
-  const {font, media} = getTheme_v2(props.theme)
-
-  return _responsive(media, $fontSize, (sizeIndex) =>
-    textSize(font.text.sizes[sizeIndex] || font.text.sizes[2]),
-  )
-}
-
-function inputStyle(): Array<
-  | ((
-      props: ResponsiveRadiusStyleProps & {
-        $fontSize: number[]
-        $padding: number[]
-        $space: number[]
-      } & ThemeProps,
-    ) => CSSObject[])
-  | ((props: ThemeProps) => ReturnType<typeof css>)
-> {
-  return [
-    responsiveRadiusStyle,
-    inputBaseStyle,
-    inputColorStyle,
-    inputTextSizeStyle,
-    responsiveInputPaddingIconRightStyle,
-  ]
-}
-
-function iconBoxStyle(props: ThemeProps): ReturnType<typeof css> {
-  const {color} = getTheme_v2(props.theme)
-
-  return css`
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-    right: 0;
-
-    /* enabled */
-    --card-fg-color: ${color.input.default.enabled.fg};
-
-    /* hover */
-    @media (hover: hover) {
-      select:not(disabled):not(:read-only):hover + && {
-        --card-fg-color: ${color.input.default.hovered.fg};
-      }
-    }
-
-    /* disabled */
-    select:disabled + && {
-      --card-fg-color: ${color.input.default.disabled.fg};
-    }
-
-    /* read-only */
-    select[data-read-only] + && {
-      --card-fg-color: ${color.input.default.readOnly.fg};
-    }
-  `
-}
-
-export const selectStyle = {
-  root: rootStyle,
-  input: inputStyle,
-  iconBox: iconBoxStyle,
-}

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

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

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

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

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

@@ -1,31 +0,0 @@
-import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {rem, _responsive, ThemeProps} from '../../_compat'
-
-export interface ResponsiveStackSpaceStyleProps {
-  $space: number[]
-}
-
-const BASE_STYLE: CSSObject = {
-  '&&:not([hidden])': {
-    display: 'grid',
-  },
-  '&[data-as="ul"],&[data-as="ol"]': {
-    listStyle: 'none',
-  },
-  'gridTemplateColumns': 'minmax(0, 1fr)',
-  'gridAutoRows': 'min-content',
-}
-
-export function stackBaseStyle(): CSSObject {
-  return BASE_STYLE
-}
-
-export function responsiveStackSpaceStyle(
-  props: ResponsiveStackSpaceStyleProps & ThemeProps,
-): CSSObject[] {
-  const {media, space} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$space, (spaceIndex) => ({
-    gridGap: rem(space[spaceIndex]),
-  }))
-}

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

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