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

package/src/core/primitives/popover/popoverCard.tsx

@@ -1,153 +0,0 @@
-import {Strategy} from '@floating-ui/react-dom'
-import {RadiusStyleProps} from '@sanity/ui/css'
-import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {MotionProps, motion} from 'framer-motion'
-import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
-import {
-  // POPOVER_MOTION_CONTENT_OPACITY_PROPERTY,
-  POPOVER_MOTION_PROPS,
-} from '../../constants'
-import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
-import {Arrow, useLayer} from '../../utils'
-import {Card, CardProps} from '../card'
-import {Flex} from '../flex'
-import {
-  DEFAULT_POPOVER_ARROW_HEIGHT,
-  DEFAULT_POPOVER_ARROW_RADIUS,
-  DEFAULT_POPOVER_ARROW_WIDTH,
-  DEFAULT_POPOVER_MARGINS,
-} from './constants'
-
-/** @internal */
-export interface PopoverCardProps extends RadiusStyleProps {
-  /** @beta*/
-  __unstable_margins?: PopoverMargins
-  animate?: boolean
-  arrow: boolean
-  arrowRef: React.Ref<HTMLDivElement>
-  arrowX?: number
-  arrowY?: number
-  originX?: number
-  originY?: number
-  overflow?: BoxOverflow
-  padding?: number | number[]
-  placement: Placement
-  scheme?: ThemeColorSchemeKey
-  shadow?: number | number[]
-  strategy: Strategy
-  tone: CardTone
-  width: number | undefined
-  x: number | null
-  y: number | null
-}
-
-const MotionCard = motion(Card)
-
-/**
- * @internal
- */
-export const PopoverCard = memo(
-  forwardRef(function PopoverCard(
-    props: PopoverCardProps &
-      Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width' | 'wrap'>,
-    ref: React.ForwardedRef<HTMLDivElement>,
-  ) {
-    const {
-      __unstable_margins: marginsProp,
-      animate,
-      arrow,
-      arrowRef,
-      arrowX,
-      arrowY,
-      children,
-      padding,
-      placement,
-      originX,
-      originY,
-      overflow,
-      radius,
-      scheme,
-      shadow,
-      strategy,
-      style,
-      tone,
-      width,
-      x: xProp,
-      y: yProp,
-      ...restProps
-    } = props
-
-    const {zIndex} = useLayer()
-
-    // Get margins: [top, right, bottom, left]
-    const margins: PopoverMargins = useMemo(
-      () => marginsProp || DEFAULT_POPOVER_MARGINS,
-      [marginsProp],
-    )
-
-    // Translate according to margins
-    const x = (xProp ?? 0) + margins[3]
-    const y = (yProp ?? 0) + margins[0]
-
-    const rootStyle: CSSProperties = useMemo(
-      () => ({
-        left: x,
-        originX,
-        originY,
-        position: strategy,
-        top: y,
-        width,
-        zIndex,
-        willChange: animate ? 'transform' : undefined,
-        ...style,
-      }),
-      [animate, originX, originY, strategy, style, width, x, y, zIndex],
-    )
-
-    const arrowStyle: CSSProperties = useMemo(
-      () => ({
-        left: arrowX !== null ? arrowX : undefined,
-        top: arrowY !== null ? arrowY : undefined,
-        right: undefined,
-        bottom: undefined,
-      }),
-      [arrowX, arrowY],
-    )
-
-    return (
-      <MotionCard
-        className="popover-card"
-        data-ui="Popover"
-        {...(restProps as CardProps & MotionProps)}
-        data-placement={placement}
-        radius={radius}
-        ref={ref}
-        scheme={scheme}
-        shadow={shadow}
-        sizing="border"
-        style={rootStyle}
-        tone={tone}
-        // todo
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        {...((animate ? POPOVER_MOTION_PROPS : {}) as any)}
-      >
-        <Flex data-ui="Popover__wrapper" direction="column" flex={1} overflow={overflow}>
-          <Flex direction="column" flex={1} padding={padding}>
-            {children}
-          </Flex>
-        </Flex>
-
-        {arrow && (
-          <Arrow
-            ref={arrowRef}
-            style={arrowStyle}
-            width={DEFAULT_POPOVER_ARROW_WIDTH}
-            height={DEFAULT_POPOVER_ARROW_HEIGHT}
-            radius={DEFAULT_POPOVER_ARROW_RADIUS}
-          />
-        )}
-      </MotionCard>
-    )
-  }),
-)
-PopoverCard.displayName = 'Memo(ForwardRef(PopoverCard))'

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

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

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

@@ -1,28 +0,0 @@
-import {Flex, Radio} from '@sanity/ui'
-import {useAction, useBoolean} from '@sanity/ui-workshop'
-
-export default function PlainStory() {
-  const checked = useBoolean('Checked?', false, 'Props')
-  const disabled = useBoolean('Disabled?', false, 'Props')
-  const id = 'radioStory'
-  const name = 'radioStory'
-  const onBlur = useAction('onBlur')
-  const onChange = useAction('onChange')
-  const onFocus = useAction('onFocus')
-  const readOnly = useBoolean('Read only', false, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[3, 4, 5]} sizing="border">
-      <Radio
-        checked={checked}
-        disabled={disabled}
-        id={id}
-        name={name}
-        onBlur={onBlur}
-        onChange={onChange}
-        onFocus={onFocus}
-        readOnly={readOnly}
-      />
-    </Flex>
-  )
-}

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

@@ -1,50 +0,0 @@
-import {forwardRef, useImperativeHandle, useRef} from 'react'
-import {styled} from '../../lib/styled'
-import {useCustomValidity} from '../../hooks'
-import {radioBaseStyle, inputElementStyle} from './styles'
-
-/**
- * @public
- */
-export interface RadioProps {
-  customValidity?: string
-}
-
-const Root = 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 (
-    <Root 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 />
-    </Root>
-  )
-})
-Radio.displayName = 'ForwardRef(Radio)'

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

@@ -1,116 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from '../../lib/styled'
-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/__workshop__/.eslintrc

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

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

@@ -1,27 +0,0 @@
-import {Card, Container, Label, Select, Stack} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-
-export default function PlainStory() {
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const readOnly = useBoolean('Read only', false, 'Props')
-
-  return (
-    <Container width={0}>
-      <Card padding={4}>
-        <Stack space={3}>
-          <Label as="label" htmlFor="select">
-            Select
-          </Label>
-
-          <Select disabled={disabled} id="select-example" readOnly={readOnly}>
-            <option value="a">Option A</option>
-            <option value="b">Option B</option>
-            <option value="c">Option C</option>
-            <option value="d">Option D</option>
-            <option value="e">Option E</option>
-          </Select>
-        </Stack>
-      </Card>
-    </Container>
-  )
-}

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

@@ -1,23 +0,0 @@
-import {Card, Container, Label, Select, Stack} from '@sanity/ui'
-
-export default function ReadOnlyStory() {
-  return (
-    <Container width={0}>
-      <Card padding={4}>
-        <Stack space={3}>
-          <Label as="label" htmlFor="select">
-            Select
-          </Label>
-
-          <Select id="select-example" radius={3} readOnly>
-            <option value="a">Option A</option>
-            <option value="b">Option B</option>
-            <option value="c">Option C</option>
-            <option value="d">Option D</option>
-            <option value="e">Option E</option>
-          </Select>
-        </Stack>
-      </Card>
-    </Container>
-  )
-}

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

@@ -1,86 +0,0 @@
-import {ChevronDownIcon} from '@sanity/icons'
-import {forwardRef, useImperativeHandle, useRef} from 'react'
-import {styled} from '../../lib/styled'
-import {useCustomValidity, useArrayProp} from '../../hooks'
-import {Radius} from '../../types'
-import {Box} from '../box'
-import {Text} from '../text'
-import {selectStyle} from './styles'
-
-/**
- * @public
- */
-export interface SelectProps {
-  fontSize?: number | number[]
-  padding?: number | number[]
-  radius?: Radius | Radius[]
-  space?: number | number[]
-  customValidity?: string
-}
-
-const Root = 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,
-    padding = 3,
-    radius = 2,
-    readOnly,
-    space = 3,
-    ...restProps
-  } = props
-
-  const ref = useRef<HTMLSelectElement | null>(null)
-
-  useImperativeHandle<HTMLSelectElement | null, HTMLSelectElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
-  useCustomValidity(ref, customValidity)
-
-  return (
-    <Root data-ui="Select">
-      <Input
-        data-read-only={!disabled && readOnly ? '' : undefined}
-        data-ui="Select"
-        {...restProps}
-        $fontSize={useArrayProp(fontSize)}
-        $padding={useArrayProp(padding)}
-        $radius={useArrayProp(radius)}
-        $space={useArrayProp(space)}
-        disabled={disabled || readOnly}
-        ref={ref}
-      >
-        {children}
-      </Input>
-
-      <IconBox padding={padding}>
-        <Text size={fontSize}>
-          <ChevronDownIcon />
-        </Text>
-      </IconBox>
-    </Root>
-  )
-})
-Select.displayName = 'ForwardRef(Select)'

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 {css} from '../../lib/styled'
-import {rem, _responsive, 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/__workshop__/.eslintrc

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

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

@@ -1,14 +0,0 @@
-import {Flex, Spinner} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import {WORKSHOP_TEXT_SIZE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function Props() {
-  const muted = useBoolean('Muted', false, 'Props')
-  const size = useSelect('Size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Spinner muted={muted} size={size} />
-    </Flex>
-  )
-}