@sanity/ui 3.3.2 → 3.3.4

package/src/core/primitives/radio/radio.tsx

@@ -1,51 +0,0 @@
-import {forwardRef, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
-
-import {useCustomValidity} from '../../hooks'
-import {inputElementStyle, radioBaseStyle} from './styles'
-
-/**
- * @public
- */
-export interface RadioProps {
-  customValidity?: string
-}
-
-const StyledRadio = styled.div(radioBaseStyle)
-const Input = styled.input(inputElementStyle)
-
-/**
- * The `Radio` component allows the user to select one option from a set.
- *
- * @public
- */
-export const Radio = forwardRef(function Radio(
-  props: Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'type'> & RadioProps,
-  forwardedRef: React.ForwardedRef<HTMLInputElement>,
-) {
-  const {className, disabled, style, customValidity, readOnly, ...restProps} = props
-  const ref = useRef<HTMLInputElement | null>(null)
-
-  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
-  useCustomValidity(ref, customValidity)
-
-  return (
-    <StyledRadio className={className} data-ui="Radio" style={style}>
-      <Input
-        data-read-only={!disabled && readOnly ? '' : undefined}
-        data-error={customValidity ? '' : undefined}
-        {...restProps}
-        disabled={disabled || readOnly}
-        readOnly={readOnly}
-        ref={ref}
-        type="radio"
-      />
-      <span />
-    </StyledRadio>
-  )
-})
-Radio.displayName = 'ForwardRef(Radio)'

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

@@ -1,117 +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 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/index.ts

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

package/src/core/primitives/select/select.test.tsx

@@ -1,56 +0,0 @@
-/** @vitest-environment jsdom */
-
-import {beforeEach, describe, expect, it, vi} from 'vitest'
-
-import {render} from '../../../../test'
-import {Select} from './select'
-import {selectStyle} from './styles'
-
-vi.mock('./styles', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('./styles')>()
-
-  return {
-    ...actual,
-    selectStyle: {
-      ...actual.selectStyle,
-      input: vi.fn(actual.selectStyle.input),
-    },
-  }
-})
-
-describe('primitives/select spacing', () => {
-  const mockedSelectInputStyle = vi.mocked(selectStyle.input)
-
-  beforeEach(() => {
-    mockedSelectInputStyle.mockClear()
-  })
-
-  it('should support `space` and `gap` with the same behavior', () => {
-    render(
-      // oxlint-disable-next-line no-deprecated
-      <Select space={2}>
-        <option>Option A</option>
-      </Select>,
-    )
-    expect(mockedSelectInputStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [2]}))
-
-    mockedSelectInputStyle.mockClear()
-    render(
-      <Select gap={2}>
-        <option>Option A</option>
-      </Select>,
-    )
-    expect(mockedSelectInputStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [2]}))
-  })
-
-  it('should prefer `gap` over `space` when both are provided', () => {
-    render(
-      // oxlint-disable-next-line no-deprecated
-      <Select gap={3} space={1}>
-        <option>Option A</option>
-      </Select>,
-    )
-    expect(mockedSelectInputStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [3]}))
-    expect(mockedSelectInputStyle).not.toHaveBeenCalledWith(expect.objectContaining({$space: [1]}))
-  })
-})

package/src/core/primitives/select/select.tsx

@@ -1,95 +0,0 @@
-import {ChevronDownIcon} from '@sanity/icons'
-import {forwardRef, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
-
-import {useCustomValidity} from '../../hooks'
-import {_getArrayProp} from '../../styles'
-import {Radius} from '../../types'
-import {Box} from '../box'
-import {Text} from '../text'
-import {selectStyle} from './styles'
-
-/**
- * @public
- */
-export interface SelectProps {
-  fontSize?: number | number[]
-  gap?: number | number[]
-  padding?: number | number[]
-  radius?: Radius | Radius[]
-  /**
-   * @deprecated Use `gap` instead. `space` will be removed in v4.
-   */
-  space?: number | number[]
-  customValidity?: string
-}
-
-const StyledSelect = styled.div(selectStyle.root)
-
-const Input = styled.select<{
-  $fontSize: number[]
-  $padding: number[]
-  $radius: Radius[]
-  $space: number[]
-}>(selectStyle.input)
-
-const IconBox = styled(Box)(selectStyle.iconBox)
-
-/**
- * The `Select` component provides control of options.
- *
- * @public
- */
-export const Select = forwardRef(function Select(
-  props: SelectProps & Omit<React.HTMLProps<HTMLSelectElement>, 'as'>,
-  forwardedRef: React.ForwardedRef<HTMLSelectElement>,
-) {
-  const {
-    children,
-    customValidity,
-    disabled,
-    fontSize = 2,
-    gap,
-    padding = 3,
-    radius = 2,
-    readOnly,
-    // oxlint-disable-next-line no-deprecated
-    space: deprecated_space = 3,
-    ...restProps
-  } = props
-  const spacing = gap === undefined ? deprecated_space : gap
-
-  const ref = useRef<HTMLSelectElement | null>(null)
-
-  useImperativeHandle<HTMLSelectElement | null, HTMLSelectElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
-  useCustomValidity(ref, customValidity)
-
-  return (
-    <StyledSelect data-ui="Select">
-      <Input
-        data-read-only={!disabled && readOnly ? '' : undefined}
-        data-ui="Select"
-        {...restProps}
-        $fontSize={_getArrayProp(fontSize)}
-        $padding={_getArrayProp(padding)}
-        $radius={_getArrayProp(radius)}
-        $space={_getArrayProp(spacing)}
-        disabled={disabled || readOnly}
-        ref={ref}
-      >
-        {children}
-      </Input>
-
-      <IconBox padding={padding}>
-        <Text size={fontSize}>
-          <ChevronDownIcon />
-        </Text>
-      </IconBox>
-    </StyledSelect>
-  )
-})
-Select.displayName = 'ForwardRef(Select)'

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

@@ -1,166 +0,0 @@
-import {CSSObject, getTheme_v2, ThemeFontSize} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-
-import {_responsive, rem, ThemeProps} from '../../styles'
-import {
-  focusRingBorderStyle,
-  focusRingStyle,
-  responsiveInputPaddingIconRightStyle,
-  responsiveRadiusStyle,
-  ResponsiveRadiusStyleProps,
-} from '../../styles/internal'
-
-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/index.ts

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

package/src/core/primitives/spinner/spinner.tsx

@@ -1,46 +0,0 @@
-import {SpinnerIcon} from '@sanity/icons'
-import {forwardRef} from 'react'
-import {keyframes, styled} from 'styled-components'
-
-import {Text} from '../text'
-
-/**
- * @public
- */
-export interface SpinnerProps {
-  muted?: boolean
-  size?: number | number[]
-}
-
-const rotate = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-`
-
-const StyledSpinner = styled(Text)`
-  & > span > svg {
-    animation: ${rotate} 500ms linear infinite;
-  }
-`
-
-/**
- * Indicate that something is loading for an indeterminate amount of time.
- *
- * @public
- */
-export const Spinner = forwardRef(function Spinner(
-  props: SpinnerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  return (
-    <StyledSpinner data-ui="Spinner" {...props} ref={ref}>
-      <SpinnerIcon />
-    </StyledSpinner>
-  )
-})
-Spinner.displayName = 'ForwardRef(Spinner)'

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

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

package/src/core/primitives/stack/stack.test.tsx

@@ -1,61 +0,0 @@
-/** @vitest-environment jsdom */
-
-import {beforeEach, describe, expect, it, vi} from 'vitest'
-
-import {render} from '../../../../test'
-import {Stack} from './stack'
-import {responsiveStackSpaceStyle} from './styles'
-
-vi.mock('./styles', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('./styles')>()
-
-  return {
-    ...actual,
-    responsiveStackSpaceStyle: vi.fn(actual.responsiveStackSpaceStyle),
-  }
-})
-
-describe('primitives/stack', () => {
-  const mockedResponsiveStackSpaceStyle = vi.mocked(responsiveStackSpaceStyle)
-  beforeEach(() => {
-    mockedResponsiveStackSpaceStyle.mockClear()
-  })
-
-  it('should support `space` and `gap` with the same behavior', () => {
-    render(
-      // oxlint-disable-next-line no-deprecated
-      <Stack space={2}>
-        <span>One</span>
-        <span>Two</span>
-      </Stack>,
-    )
-
-    expect(mockedResponsiveStackSpaceStyle).toHaveBeenCalledWith(
-      expect.objectContaining({$space: [2]}),
-    )
-    mockedResponsiveStackSpaceStyle.mockClear()
-    render(
-      <Stack gap={2}>
-        <span>One</span>
-        <span>Two</span>
-      </Stack>,
-    )
-
-    expect(mockedResponsiveStackSpaceStyle).toHaveBeenCalledWith(
-      expect.objectContaining({$space: [2]}),
-    )
-  })
-
-  it('should prefer `gap` over `space` when both are provided', () => {
-    render(
-      // oxlint-disable-next-line no-deprecated
-      <Stack gap={3} space={1}>
-        <span>One</span>
-        <span>Two</span>
-      </Stack>,
-    )
-    expect(mockedResponsiveStackSpaceStyle).toHaveBeenCalledWith(
-      expect.objectContaining({$space: [3]}),
-    )
-  })
-})

package/src/core/primitives/stack/stack.tsx

@@ -1,59 +0,0 @@
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-
-import {_getArrayProp} from '../../styles'
-import {ElementType, Props} from '../../types'
-import {Box, BoxOwnProps} from '../box'
-import {responsiveStackSpaceStyle, ResponsiveStackSpaceStyleProps, stackBaseStyle} from './styles'
-
-/**
- * @public
- */
-export interface StackOwnProps extends BoxOwnProps {
-  gap?: number | number[]
-  /**
-   * @deprecated Use `gap` instead. `space` will be removed in v4.
-   */
-  space?: number | number[]
-}
-
-/**
- * @public
- */
-export type StackProps<E extends ElementType = 'div'> = Props<StackOwnProps, E>
-
-const StyledStack = styled(Box)<ResponsiveStackSpaceStyleProps>(
-  stackBaseStyle,
-  responsiveStackSpaceStyle,
-)
-
-const StackComponent = forwardRef(function Stack(
-  props: StackOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  // oxlint-disable-next-line no-deprecated
-  const {as, gap, space: deprecated_space, ...restProps} = props
-  const spacing = gap === undefined ? deprecated_space : gap
-
-  return (
-    <StyledStack
-      data-as={typeof as === 'string' ? as : undefined}
-      data-ui="Stack"
-      {...restProps}
-      $space={_getArrayProp(spacing)}
-      forwardedAs={as}
-      ref={ref}
-    />
-  )
-})
-StackComponent.displayName = 'ForwardRef(Stack)'
-
-/**
- * The `Stack` component is used to place elements on top of each other.
- *
- * @public
- */
-// oxlint-disable-next-line no-unsafe-type-assertion
-export const Stack = StackComponent as unknown as <E extends ElementType = 'div'>(
-  props: StackProps<E>,
-) => React.JSX.Element

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

@@ -1,33 +0,0 @@
-import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-
-import {_responsive, rem, ThemeProps} from '../../styles'
-
-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) => ({
-    // oxlint-disable-next-line no-deprecated
-    gridGap: rem(space[spaceIndex]),
-  }))
-}

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

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