@sanity/ui 3.3.2 → 3.3.4

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

@@ -1,118 +0,0 @@
-import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-
-import {ThemeProps} from '../../styles'
-import {_cardColorStyle} from '../../styles/card'
-import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
-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
-
-  // oxlint-disable-next-line no-unsafe-type-assertion
-  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/card.tsx

@@ -1,125 +0,0 @@
-import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
-import {isValidElementType} from 'react-is'
-import {styled} from 'styled-components'
-
-import {_getArrayProp} from '../../styles'
-import {
-  responsiveBorderStyle,
-  ResponsiveBorderStyleProps,
-  responsiveRadiusStyle,
-  ResponsiveRadiusStyleProps,
-  responsiveShadowStyle,
-  ResponsiveShadowStyleProps,
-} from '../../styles/internal'
-import {ThemeColorProvider, useRootTheme} from '../../theme'
-import {CardTone, ElementType, Props} from '../../types'
-import {Box, BoxOwnProps} from '../box'
-import {ResponsiveBorderProps, ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
-import {cardStyle} from './styles'
-import {CardStyleProps} from './types'
-
-/**
- * @public
- */
-export interface CardOwnProps
-  extends BoxOwnProps, ResponsiveBorderProps, ResponsiveRadiusProps, ResponsiveShadowProps {
-  /**
-   * Do not use in production.
-   * @beta
-   */
-  __unstable_checkered?: boolean
-  /**
-   * Do not use in production.
-   * @beta
-   */
-  __unstable_focusRing?: boolean
-  disabled?: boolean
-  muted?: boolean
-  pressed?: boolean
-  scheme?: ThemeColorSchemeKey
-  selected?: boolean
-  tone?: CardTone
-}
-
-/**
- * @public
- */
-export type CardProps<E extends ElementType = 'div'> = Props<CardOwnProps, E>
-
-const StyledCard = styled(Box)<
-  CardStyleProps &
-    ResponsiveRadiusStyleProps &
-    ResponsiveBorderStyleProps &
-    ResponsiveShadowStyleProps
->(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle)
-
-const CardComponent = forwardRef(function Card(
-  props: CardOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    __unstable_checkered: checkered = false,
-    __unstable_focusRing: focusRing = false,
-    as: asProp,
-    border,
-    borderTop,
-    borderRight,
-    borderBottom,
-    borderLeft,
-    muted,
-    pressed,
-    radius = 0,
-    scheme,
-    selected,
-    shadow,
-    tone: toneProp = 'default',
-    ...restProps
-  } = props
-
-  const as = isValidElementType(asProp) ? asProp : 'div'
-  const rootTheme = useRootTheme()
-  const tone = toneProp === 'inherit' ? rootTheme.tone : toneProp
-
-  // todo: Consider adding the wrapper approach for nested cards in which the tones are not changing, avoid unnecessary ThemeColorProvider
-  return (
-    <ThemeColorProvider scheme={scheme} tone={tone}>
-      <StyledCard
-        data-as={typeof as === 'string' ? as : undefined}
-        data-scheme={rootTheme.scheme}
-        data-ui="Card"
-        data-tone={tone}
-        {...restProps}
-        $border={_getArrayProp(border)}
-        $borderTop={_getArrayProp(borderTop)}
-        $borderRight={_getArrayProp(borderRight)}
-        $borderBottom={_getArrayProp(borderBottom)}
-        $borderLeft={_getArrayProp(borderLeft)}
-        $checkered={checkered}
-        $focusRing={focusRing}
-        $muted={muted}
-        $radius={_getArrayProp(radius)}
-        $shadow={_getArrayProp(shadow)}
-        $tone={tone}
-        data-checkered={checkered ? '' : undefined}
-        data-pressed={pressed ? '' : undefined}
-        data-selected={selected ? '' : undefined}
-        forwardedAs={as}
-        ref={ref}
-        selected={selected}
-      />
-    </ThemeColorProvider>
-  )
-})
-CardComponent.displayName = 'ForwardRef(Card)'
-
-/**
- * The `Card` component acts much like a `Box`, but with a background and foreground color.
- * Components within a `Card` inherit its colors.
- *
- * @public
- */
-// oxlint-disable-next-line no-unsafe-type-assertion
-export const Card = CardComponent as unknown as <E extends ElementType = 'div'>(
-  props: CardProps<E>,
-) => React.JSX.Element

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

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

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

@@ -1,147 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-
-import {ThemeProps} from '../../styles'
-import {_cardColorStyle} from '../../styles/card'
-import {focusRingStyle} from '../../styles/focusRing'
-import {CardStyleProps} from './types'
-
-export function cardStyle(
-  props: CardStyleProps & ThemeProps,
-): Array<ReturnType<typeof css> | (() => ReturnType<typeof css>)> {
-  return [cardBaseStyle(props), cardColorStyle(props)]
-}
-
-export function cardBaseStyle(props: CardStyleProps & ThemeProps): ReturnType<typeof css> {
-  const {$checkered} = props
-  const {space} = getTheme_v2(props.theme)
-
-  return css`
-    ${$checkered &&
-    css`
-      background-size: ${space[3]}px ${space[3]}px;
-      background-position: 50% 50%;
-      background-image: var(--card-bg-image);
-    `}
-
-    &[data-as='button'] {
-      -webkit-font-smoothing: inherit;
-      appearance: none;
-      outline: none;
-      font: inherit;
-      text-align: inherit;
-      border: 0;
-      width: -moz-available;
-      width: -webkit-fill-available;
-      width: stretch;
-    }
-
-    /* &:is(a) */
-    &[data-as='a'] {
-      outline: none;
-      text-decoration: none;
-    }
-
-    /* &:is(pre) */
-    &[data-as='pre'] {
-      font: inherit;
-    }
-  `
-}
-
-export function cardColorStyle(props: CardStyleProps & ThemeProps): ReturnType<typeof css> {
-  const {$checkered, $focusRing, $muted} = props
-  const {card, color, style} = getTheme_v2(props.theme)
-  const border = {width: card.border.width, color: 'var(--card-border-color)'}
-
-  return css`
-    color-scheme: ${color._dark ? 'dark' : 'light'};
-
-    ${_cardColorStyle(color, color, $checkered)}
-
-    background-color: ${$muted ? 'var(--card-muted-bg-color)' : 'var(--card-bg-color)'};
-    color: var(--card-fg-color);
-
-    /* &:is(button) */
-    &[data-as='button'] {
-      --card-focus-ring-box-shadow: none;
-
-      cursor: default;
-      box-shadow: var(--card-focus-ring-box-shadow);
-
-      &:disabled {
-        ${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}
-      }
-
-      &:not(:disabled) {
-        &[data-pressed] {
-          ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
-        }
-
-        &[data-selected] {
-          ${_cardColorStyle(color, color.selectable.default.selected, $checkered)}
-        }
-
-        @media (hover: hover) {
-          &:not([data-pressed]):not([data-selected]) {
-            &[data-hovered],
-            &:hover {
-              ${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}
-            }
-
-            &:active {
-              ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
-            }
-          }
-        }
-
-        &:focus-visible {
-          --card-focus-ring-box-shadow: ${$focusRing
-            ? focusRingStyle({base: color, border, focusRing: card.focusRing})
-            : undefined};
-        }
-      }
-    }
-
-    /* &:is(a) */
-    &[data-as='a'] {
-      cursor: pointer;
-      box-shadow: var(--card-focus-ring-box-shadow);
-
-      &[data-disabled] {
-        ${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}
-      }
-
-      &:not([data-disabled]) {
-        &[data-pressed] {
-          ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
-        }
-
-        &[data-selected] {
-          ${_cardColorStyle(color, color.selectable.default.selected, $checkered)}
-        }
-
-        @media (hover: hover) {
-          &:not([data-pressed]):not([data-selected]) {
-            &[data-hovered],
-            &:hover {
-              ${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}
-            }
-
-            &:active {
-              ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
-            }
-          }
-        }
-
-        &:focus-visible {
-          --card-focus-ring-box-shadow: ${$focusRing
-            ? focusRingStyle({base: color, border, focusRing: card.focusRing})
-            : undefined};
-        }
-      }
-    }
-
-    ${style?.card?.root}
-  `
-}

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

@@ -1,12 +0,0 @@
-import {ThemeColorToneKey} from '@sanity/ui/theme'
-
-/**
- * @internal
- */
-export interface CardStyleProps {
-  $checkered: boolean
-  $focusRing: boolean
-  $muted: boolean
-  // oxlint-disable-next-line no-deprecated
-  $tone: ThemeColorToneKey
-}

package/src/core/primitives/checkbox/checkbox.tsx

@@ -1,73 +0,0 @@
-import {CheckmarkIcon, RemoveIcon} from '@sanity/icons'
-import {forwardRef, useEffect, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
-
-import {useCustomValidity} from '../../hooks'
-import {checkboxBaseStyles, inputElementStyles} from './styles'
-
-/**
- * @public
- */
-export interface CheckboxProps {
-  indeterminate?: boolean
-  customValidity?: string
-}
-
-const StyledCheckbox = styled.div(checkboxBaseStyles)
-const Input = styled.input(inputElementStyles)
-
-/**
- * Checkboxes allow the user to select one or more items from a set.
- *
- * @public
- */
-export const Checkbox = forwardRef(function Checkbox(
-  props: Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'type'> & CheckboxProps,
-  forwardedRef: React.ForwardedRef<HTMLInputElement>,
-) {
-  const {
-    checked,
-    className,
-    disabled,
-    indeterminate,
-    customValidity,
-    readOnly,
-    style,
-    ...restProps
-  } = props
-  const ref = useRef<HTMLInputElement | null>(null)
-
-  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
-  useEffect(() => {
-    if (ref.current) {
-      // Set the indeterminate state
-      ref.current.indeterminate = indeterminate || false
-    }
-  }, [indeterminate])
-
-  useCustomValidity(ref, customValidity)
-
-  return (
-    <StyledCheckbox className={className} data-ui="Checkbox" style={style}>
-      <Input
-        data-read-only={!disabled && readOnly ? '' : undefined}
-        data-error={customValidity ? '' : undefined}
-        {...restProps}
-        checked={checked}
-        disabled={disabled || readOnly}
-        type="checkbox"
-        readOnly={readOnly}
-        ref={ref}
-      />
-      <span>
-        <CheckmarkIcon />
-        <RemoveIcon />
-      </span>
-    </StyledCheckbox>
-  )
-})
-Checkbox.displayName = 'ForwardRef(Checkbox)'

package/src/core/primitives/checkbox/index.ts

@@ -1 +0,0 @@
-export * from './checkbox'

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

@@ -1,128 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-
-import {rem, ThemeProps} from '../../styles'
-import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
-
-export function checkboxBaseStyles(): ReturnType<typeof css> {
-  return css`
-    position: relative;
-    display: inline-block;
-  `
-}
-
-export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
-  const {color, input, radius} = getTheme_v2(props.theme)
-  const {focusRing} = input.checkbox
-
-  return css`
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    outline: none;
-    opacity: 0;
-    z-index: 1;
-    padding: 0;
-    margin: 0;
-
-    & + span {
-      position: relative;
-      display: block;
-      height: ${rem(input.checkbox.size)};
-      width: ${rem(input.checkbox.size)};
-      box-sizing: border-box;
-      box-shadow: ${focusRingBorderStyle({
-        color: color.input.default.enabled.border,
-        width: input.border.width,
-      })};
-      border-radius: ${rem(radius[2])};
-      line-height: 1;
-      background-color: ${color.input.default.enabled.bg};
-
-      & > svg {
-        display: block;
-        position: absolute;
-        opacity: 0;
-        height: 100%;
-        width: 100%;
-
-        & > path {
-          vector-effect: non-scaling-stroke;
-          stroke-width: 1.5px !important;
-        }
-      }
-    }
-
-    &:checked + span {
-      background: ${color.input.default.enabled.fg};
-      box-shadow: ${focusRingBorderStyle({
-        color: color.input.default.enabled.fg,
-        width: input.border.width,
-      })};
-      color: ${color.input.default.enabled.bg};
-    }
-
-    /* focus */
-    &:not(:disabled):focus:focus-visible + span {
-      box-shadow: ${focusRingStyle({focusRing})};
-    }
-
-    /* focus when checked - uses a different offset */
-    &:not(:disabled):focus:focus-visible&:checked + span {
-      box-shadow: ${focusRingStyle({focusRing: {width: 1, offset: 1}})};
-    }
-
-    &[data-error] + span {
-      background-color: ${color.input.invalid.enabled.border};
-      box-shadow: ${focusRingBorderStyle({
-        width: input.border.width,
-        color: color.input.invalid.enabled.muted.bg,
-      })};
-      color: ${color.input.default.disabled.fg};
-    }
-    &[data-error]&:checked + span {
-      background-color: ${color.input.invalid.enabled.muted.bg};
-      color: ${color.input.default.enabled.bg};
-    }
-    &[data-error]&:checked&:not(:disabled):focus:focus-visible + span {
-      box-shadow: ${focusRingStyle({
-        border: {width: input.border.width, color: color.input.invalid.readOnly.muted.bg},
-        focusRing: {width: 1, offset: 1},
-      })};
-    }
-
-    &:disabled + span {
-      background-color: ${color.input.default.disabled.bg};
-      box-shadow: ${focusRingBorderStyle({
-        width: input.border.width,
-        color: color.input.default.disabled.border,
-      })};
-      color: ${color.input.default.disabled.fg};
-    }
-    &:disabled&:checked + span {
-      background-color: ${color.input.default.disabled.muted.bg};
-    }
-
-    &[data-read-only] + span {
-      background-color: ${color.input.default.readOnly.bg};
-      box-shadow: ${focusRingBorderStyle({
-        width: input.border.width,
-        color: color.input.default.readOnly.border,
-      })};
-      color: ${color.input.default.readOnly.fg};
-    }
-
-    &[data-read-only]&:checked + span {
-      background-color: ${color.input.default.readOnly.muted.bg};
-    }
-
-    &:checked + span > svg:first-child {
-      opacity: 1;
-    }
-    &:indeterminate + span > svg:last-child {
-      opacity: 1;
-    }
-  `
-}

package/src/core/primitives/code/code.tsx

@@ -1,56 +0,0 @@
-import {forwardRef, lazy, Suspense} from 'react'
-import {styled} from 'styled-components'
-
-import {_getArrayProp} from '../../styles'
-import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
-import {ElementType, Props} from '../../types'
-import {codeBaseStyle} from './styles'
-
-const LazyRefractor = lazy(() => import('./refractor'))
-
-/**
- * @public
- */
-export interface CodeOwnProps {
-  /** Define the language to use for syntax highlighting. */
-  language?: string
-  size?: number | number[]
-  weight?: string
-}
-
-/**
- * @public
- */
-export type CodeProps<E extends ElementType = 'pre'> = Props<CodeOwnProps, E>
-
-const StyledCode = styled.pre<ResponsiveFontStyleProps>(codeBaseStyle, responsiveCodeFontStyle)
-
-const CodeComponent = forwardRef(function Code(
-  props: CodeOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLElement>,
-) {
-  const {children, language, size = 2, weight, ...restProps} = props
-
-  return (
-    <StyledCode
-      data-ui="Code"
-      {...restProps}
-      $size={_getArrayProp(size)}
-      $weight={weight}
-      ref={ref}
-    >
-      <Suspense fallback={<code>{children}</code>}>
-        <LazyRefractor language={language} value={children} />
-      </Suspense>
-    </StyledCode>
-  )
-})
-CodeComponent.displayName = 'ForwardRef(Code)'
-
-/**
- * @public
- */
-// oxlint-disable-next-line no-unsafe-type-assertion
-export const Code = CodeComponent as unknown as <E extends ElementType = 'pre'>(
-  props: CodeProps<E>,
-) => React.JSX.Element

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

@@ -1 +0,0 @@
-export * from './code'

package/src/core/primitives/code/refractor.tsx

@@ -1,22 +0,0 @@
-import {hasLanguage, Refractor} from 'react-refractor'
-
-export default function LazyRefractor(
-  props: Partial<Pick<React.ComponentProps<typeof Refractor>, 'language'>> & {
-    value: React.ReactNode
-  },
-) {
-  const {language: languageProp, value} = props
-  const language = typeof languageProp === 'string' ? languageProp : undefined
-  // oxlint-disable-next-line no-unnecessary-type-assertion, no-unsafe-type-assertion
-  const registered = language ? hasLanguage(language as any) : false
-
-  return (
-    <>
-      {!(language && registered) && <code>{value}</code>}
-      {/* oxlint-disable-next-line no-base-to-string */}
-      {language && registered && <Refractor inline language={language} value={String(value)} />}
-    </>
-  )
-}
-
-LazyRefractor.displayName = 'LazyRefractor'