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

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

@@ -1,31 +0,0 @@
-import {SpinnerIcon} from '@sanity/icons'
-import {ResponsiveProp, spinner} from '@sanity/ui/css'
-import {FontTextSize} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
-import {Text} from '../text'
-
-/**
- * @public
- */
-export interface SpinnerProps {
-  muted?: boolean
-  size?: ResponsiveProp<FontTextSize>
-}
-
-/**
- * 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 (
-    <Text data-ui="Spinner" {...props} className={spinner()} ref={ref}>
-      <SpinnerIcon />
-    </Text>
-  )
-})
-
-Spinner.displayName = 'ForwardRef(Spinner)'

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

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

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

@@ -1,31 +0,0 @@
-import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-import {WORKSHOP_SPACE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function PlainStory() {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container width={0}>
-        <Stack space={useSelect('Space', WORKSHOP_SPACE_OPTIONS, 0, 'Props')}>
-          <Card padding={[2, 3, 4]} shadow={1}>
-            <Text align="center" muted>
-              Stack item
-            </Text>
-          </Card>
-
-          <Card padding={[2, 3, 4]} shadow={1}>
-            <Text align="center" muted>
-              Stack item
-            </Text>
-          </Card>
-
-          <Card padding={[2, 3, 4]} shadow={1}>
-            <Text align="center" muted>
-              Stack item
-            </Text>
-          </Card>
-        </Stack>
-      </Container>
-    </Flex>
-  )
-}

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

@@ -1,41 +0,0 @@
-import {ResponsiveProp} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
-import {Box, BoxProps} from '../box'
-
-/**
- * @public
- */
-export interface StackProps
-  extends Omit<BoxProps, 'direction' | 'display' | 'gap' | 'gapX' | 'gapY'> {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  space?: ResponsiveProp<Space>
-}
-
-/**
- * The `Stack` component is used to place elements on top of each other.
- *
- * @public
- */
-export const Stack = forwardRef(function Stack(
-  props: StackProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref' | 'width'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {as, space, ...restProps} = props
-
-  return (
-    <Box
-      as={as}
-      data-as={typeof as === 'string' ? as : undefined}
-      data-ui="Stack"
-      {...restProps}
-      direction="column"
-      display="flex"
-      forwardedAs={as}
-      gapY={space}
-      ref={ref}
-    />
-  )
-})
-
-Stack.displayName = 'ForwardRef(Stack)'

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

@@ -1,31 +0,0 @@
-import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {rem, _responsive, 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) => ({
-    gridGap: rem(space[spaceIndex]),
-  }))
-}

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

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

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

@@ -1,172 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from '../../lib/styled'
-import {rem, ThemeProps} from '../../styles'
-import {focusRingStyle} from '../../styles/internal'
-
-/* Root */
-// export function switchBaseStyles(): ReturnType<typeof css> {
-//   return css`
-//     position: relative;
-//     &:not([hidden]) {
-//       display: inline-block;
-//     }
-//   `
-// }
-
-/* Input */
-export function switchInputStyles(): ReturnType<typeof css> {
-  // Visually hide the input element while keeping it interactive
-  return css`
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    opacity: 0;
-    height: 100%;
-    width: 100%;
-    outline: none;
-    padding: 0;
-    margin: 0;
-
-    /* Place the input element above the representation element */
-    z-index: 1;
-  `
-}
-
-/* Representation */
-export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof css> {
-  const {color, input} = getTheme_v2(props.theme)
-
-  return css`
-    --switch-bg-color: ${color.input.default.enabled.border};
-    --switch-fg-color: ${color.input.default.enabled.bg};
-    --switch-box-shadow: none;
-
-    &:not([hidden]) {
-      display: block;
-    }
-    position: relative;
-    width: ${rem(input.switch.width)};
-    height: ${rem(input.switch.height)};
-    border-radius: ${rem(input.switch.height / 2)};
-
-    /* Make sure it’s not possible to interact with the wrapper element */
-    pointer-events: none;
-
-    &:after {
-      content: '';
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: 1;
-      box-shadow: var(--switch-box-shadow);
-      border-radius: inherit;
-    }
-
-    /* Focus styles */
-    input:focus + && {
-      --switch-box-shadow: ${focusRingStyle({focusRing: input.switch.focusRing})};
-    }
-
-    input:focus:not(:focus-visible) + && {
-      --switch-box-shadow: none;
-    }
-
-    input:checked + && {
-      --switch-bg-color: ${color.input.default.enabled.fg};
-      --switch-fg-color: ${color.input.default.enabled.bg};
-    }
-
-    @media (hover: hover) {
-      input:not(:disabled):hover + && {
-        --switch-bg-color: ${color.input.default.hovered.border};
-        --switch-fg-color: ${color.input.default.hovered.bg};
-      }
-
-      input:not(:disabled):checked:hover + && {
-        --switch-bg-color: ${color.input.default.enabled.fg};
-        --switch-fg-color: ${color.input.default.enabled.bg};
-      }
-    }
-
-    input:not([data-read-only]):disabled + && {
-      --switch-bg-color: ${color.input.default.disabled.border};
-      --switch-fg-color: ${color.input.default.disabled.bg};
-    }
-
-    input[data-read-only]:disabled + && {
-      --switch-bg-color: ${color.input.default.readOnly.border};
-      --switch-fg-color: ${color.input.default.readOnly.bg};
-    }
-
-    input:checked[data-read-only]:disabled + && {
-      --switch-bg-color: ${color.input.default.readOnly.fg};
-      --switch-fg-color: ${color.input.default.readOnly.bg};
-    }
-  `
-}
-
-/* Track */
-export function switchTrackStyles(props: ThemeProps): ReturnType<typeof css> {
-  const {input} = getTheme_v2(props.theme)
-
-  return css`
-    &:not([hidden]) {
-      display: block;
-    }
-    background-color: var(--switch-bg-color);
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: ${rem(input.switch.width)};
-    height: ${rem(input.switch.height)};
-    border-radius: ${rem(input.switch.height / 2)};
-  `
-}
-
-/* Thumb */
-export function switchThumbStyles(
-  props: {$checked?: boolean; $indeterminate?: boolean} & ThemeProps,
-): ReturnType<typeof css> {
-  const {$indeterminate} = props
-  const {input} = getTheme_v2(props.theme)
-  const trackWidth = input.switch.width
-  const trackHeight = input.switch.height
-  const trackPadding = input.switch.padding
-  const size = trackHeight - input.switch.padding * 2
-  const checkedOffset = trackWidth - trackPadding * 2 - size
-  const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding
-  const checked = $indeterminate !== true && props.$checked === true
-
-  return css`
-    &:not([hidden]) {
-      display: block;
-    }
-    position: absolute;
-    left: ${rem(trackPadding)};
-    top: ${rem(trackPadding)};
-    height: ${rem(size)};
-    width: ${rem(size)};
-    border-radius: ${rem(size / 2)};
-    transition-property: transform;
-    transition-duration: ${input.switch.transitionDurationMs}ms;
-    transition-timing-function: ${input.switch.transitionTimingFunction};
-    background: var(--switch-fg-color);
-    transform: translate3d(0, 0, 0);
-    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
-
-    ${checked &&
-    css`
-      transform: translate3d(${checkedOffset}px, 0, 0);
-    `}
-
-    ${$indeterminate &&
-    css`
-      transform: translate3d(${indeterminateOffset}px, 0, 0);
-    `}
-  `
-}

package/src/core/primitives/switch/switch.tsx

@@ -1,66 +0,0 @@
-import {_switch, composeClassNames} from '@sanity/ui/css'
-import {forwardRef, useEffect, useImperativeHandle, useRef} from 'react'
-import {Box} from '../box'
-
-/**
- * @public
- */
-export interface SwitchProps {
-  indeterminate?: boolean
-}
-
-/**
- * The `Switch` component allows the user to toggle a setting on and off.
- *
- * Extends all properties of an `<input type="checkbox" />` element, except type.
- *
- * @public
- */
-export const Switch = forwardRef(function Switch(
-  props: Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'type'> & SwitchProps,
-  forwardedRef: React.ForwardedRef<HTMLInputElement>,
-) {
-  const {checked, className, disabled, indeterminate, 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])
-
-  return (
-    <Box
-      className={composeClassNames(className, _switch())}
-      data-ui="Switch"
-      display="inline-block"
-      position="relative"
-      style={style}
-    >
-      <input
-        data-read-only={!disabled && readOnly ? '' : undefined}
-        {...restProps}
-        checked={indeterminate !== true && checked}
-        className="switch-input"
-        disabled={disabled || readOnly}
-        type="checkbox"
-        ref={ref}
-      />
-      <span aria-hidden className="switch-presentation" data-name="representation">
-        <span className="switch-track" />
-        <span
-          className="switch-thumb"
-          data-checked={checked ? '' : undefined}
-          data-indeterminate={indeterminate ? '' : undefined}
-        />
-      </span>
-    </Box>
-  )
-})
-Switch.displayName = 'ForwardRef(Switch)'

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

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

package/src/core/primitives/text/__workshop__/colored.tsx

@@ -1,29 +0,0 @@
-import {Flex, Text, ThemeProps} from '@sanity/ui'
-import {ThemeColorAvatarColorKey, ThemeColorSpotKey, getTheme_v2} from '@sanity/ui/theme'
-import {useSelect} from '@sanity/ui-workshop'
-import {styled, css} from '../../../lib/styled'
-import {WORKSHOP_SPOT_COLOR_OPTIONS} from '../../../__workshop__/constants'
-
-const ColoredText = styled(Text)<{$color?: ThemeColorSpotKey}>((
-  props: {
-    $color?: ThemeColorAvatarColorKey
-  } & ThemeProps,
-) => {
-  const {color} = getTheme_v2(props.theme)
-
-  return css`
-    color: ${color.avatar[props.$color || 'gray'].bg};
-  `
-})
-
-export default function ColoredTextStory() {
-  const color = useSelect('Color', WORKSHOP_SPOT_COLOR_OPTIONS, 'gray')
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <ColoredText align="center" $color={color} size={4} weight="bold">
-        {color}
-      </ColoredText>
-    </Flex>
-  )
-}

package/src/core/primitives/text/__workshop__/example.tsx

@@ -1,38 +0,0 @@
-import {Card, Container, Text} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {
-  WORKSHOP_TEXT_ALIGN_OPTIONS,
-  WORKSHOP_TEXT_OVERFLOW_OPTIONS,
-  WORKSHOP_TEXT_SIZE_OPTIONS,
-  WORKSHOP_TEXT_WEIGHT_OPTIONS,
-} from '../../../__workshop__/constants'
-
-export default function TextStory() {
-  const accent = useBoolean('Accent', false, 'Props')
-  const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS, '', 'Props') || undefined
-  const muted = useBoolean('Muted', false, 'Props')
-  const size = useSelect('Size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
-  const text = useText('Text', 'Hello, world', 'Props')
-
-  const textOverflow =
-    useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS, undefined, 'Props') || undefined
-
-  const weight = useSelect('Weight', WORKSHOP_TEXT_WEIGHT_OPTIONS, '', 'Props') || undefined
-
-  return (
-    <Container width={0}>
-      <Card padding={4}>
-        <Text
-          accent={accent}
-          align={align}
-          muted={muted}
-          size={size}
-          textOverflow={textOverflow}
-          weight={weight}
-        >
-          {text}
-        </Text>
-      </Card>
-    </Container>
-  )
-}

package/src/core/primitives/text/__workshop__/opticalAlignment.tsx

@@ -1,58 +0,0 @@
-import {AddCircleIcon} from '@sanity/icons'
-import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
-
-export default function OpticalAlignment() {
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Stack space={1}>
-        <Flex>
-          <Card padding={0} scheme="dark">
-            <Text accent size={4}>
-              Hamburgefonstiv M
-            </Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} scheme="dark">
-            <Text accent size={3}>
-              Hamburgefonstiv M
-            </Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} scheme="dark">
-            <Text accent size={2}>
-              Hamburgefonstiv M
-            </Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} scheme="dark">
-            <Text accent size={1}>
-              Hamburgefonstiv M
-            </Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} scheme="dark">
-            <Text accent size={0}>
-              Hamburgefonstiv M
-            </Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={2} scheme="dark">
-            <Text>
-              <AddCircleIcon />
-            </Text>
-          </Card>
-        </Flex>
-      </Stack>
-    </Box>
-  )
-}

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

@@ -1,73 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from '../../lib/styled'
-import {ThemeProps} from '../../styles'
-
-export function textBaseStyle(
-  props: {$accent?: boolean; $muted?: boolean} & ThemeProps,
-): ReturnType<typeof css> {
-  const {$accent, $muted} = props
-  const {font} = getTheme_v2(props.theme)
-
-  return css`
-    color: var(--card-fg-color);
-
-    ${$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;
-      background-color: var(--card-code-bg-color);
-      color: var(--card-code-fg-color);
-    }
-
-    & 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.text.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;
-      color: var(--card-icon-color);
-
-      & path {
-        vector-effect: non-scaling-stroke !important;
-      }
-    }
-  `
-}

package/src/core/primitives/text/text.tsx

@@ -1,85 +0,0 @@
-import {composeClassNames, text, TextStyleProps} from '@sanity/ui/css'
-import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
-import {useArrayProp} from '../../hooks'
-import {styled} from '../../lib/styled'
-import {TextAlign} from '../../types'
-
-/**
- * @public
- */
-export interface TextProps extends TextStyleProps {
-  accent?: boolean
-  align?: TextAlign | TextAlign[]
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  /** When `true` the text color will be muted. */
-  muted?: boolean
-  /**
-   * Controls how overflowing text is treated.
-   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
-   * @beta
-   */
-  textOverflow?: 'ellipsis' | 'none'
-  weight?: ThemeFontWeightKey
-}
-
-const SpanWithTextOverflow = styled.span`
-  display: block;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  overflow: clip;
-`
-
-/**
- * The `Text` component is an agile, themed typographic element.
- *
- * @public
- */
-export const Text = forwardRef(function Text(
-  props: TextProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    accent = false,
-    align,
-    as: As = 'div',
-    children: childrenProp,
-    className,
-    muted = false,
-    size = 2,
-    textOverflow,
-    weight,
-    ...restProps
-  } = props
-
-  let children = childrenProp
-
-  if (textOverflow === 'ellipsis') {
-    children = <SpanWithTextOverflow>{children}</SpanWithTextOverflow>
-  } else {
-    children = <span>{children}</span>
-  }
-
-  return (
-    <As
-      data-ui="Text"
-      {...restProps}
-      $align={useArrayProp(align)}
-      ref={ref}
-      className={composeClassNames(
-        className,
-        text({
-          accent,
-          muted,
-          size,
-          weight,
-        }),
-      )}
-    >
-      {children}
-    </As>
-  )
-})
-
-Text.displayName = 'ForwardRef(Text)'

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

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