@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.10

package/src/primitives/checkbox/__workshop__/example.tsx

@@ -1,25 +0,0 @@
-import {Box, Checkbox, Flex, Text} from '@sanity/ui'
-import {useCallback, useState} from 'react'
-
-export default function ExampleStory() {
-  const [checked, setChecked] = useState<boolean | undefined>(undefined)
-  const [indeterminate] = useState(checked === undefined)
-  const handleChange = useCallback(() => setChecked((val) => !val), [])
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Flex align="center" as="label">
-        <Checkbox
-          checked={checked || false}
-          indeterminate={indeterminate}
-          onChange={handleChange}
-        />
-        <Box marginLeft={2}>
-          <Text size={1} weight="semibold">
-            Toggle
-          </Text>
-        </Box>
-      </Flex>
-    </Flex>
-  )
-}

package/src/primitives/checkbox/__workshop__/props.tsx

@@ -1,33 +0,0 @@
-import {Box, Checkbox, Flex, Text} from '@sanity/ui'
-import {useAction, useBoolean} from '@sanity/ui-workshop'
-
-export default function PropsStory() {
-  const checked = useBoolean('Checked', false, 'Props')
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const indeterminate = useBoolean('Indeterminate', false, 'Props')
-  const onChange = useAction('onChange')
-  const onFocus = useAction('onFocus')
-  const onBlur = useAction('onBlur')
-  const readOnly = useBoolean('Read only', false, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Flex align="center" as="label">
-        <Checkbox
-          checked={checked}
-          disabled={disabled}
-          indeterminate={indeterminate}
-          onChange={onChange}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          readOnly={readOnly}
-        />
-        <Box marginLeft={2}>
-          <Text size={1} weight="semibold">
-            Toggle
-          </Text>
-        </Box>
-      </Flex>
-    </Flex>
-  )
-}

package/src/primitives/checkbox/__workshop__/readOnly.tsx

@@ -1,16 +0,0 @@
-import {Box, Checkbox, Flex, Text} from '@sanity/ui'
-
-export default function ReadOnlyStory() {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Flex align="center" as="label">
-        <Checkbox id="checkbox-example" readOnly />
-        <Box marginLeft={2}>
-          <Text size={1} weight="semibold">
-            Toggle
-          </Text>
-        </Box>
-      </Flex>
-    </Flex>
-  )
-}

package/src/primitives/checkbox/checkbox.tsx

@@ -1,64 +0,0 @@
-import {CheckmarkIcon, RemoveIcon} from '@sanity/icons'
-import {forwardRef, useEffect} from 'react'
-import styled from 'styled-components'
-import {useForwardedRef, useCustomValidity} from '../../hooks'
-import {checkboxBaseStyles, inputElementStyles} from './styles'
-
-/**
- * @public
- */
-export interface CheckboxProps {
-  indeterminate?: boolean
-  customValidity?: string
-}
-
-const Root = styled.div(checkboxBaseStyles)
-const Input = styled.input(inputElementStyles)
-
-/**
- * @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 = useForwardedRef(forwardedRef)
-
-  useCustomValidity(ref, customValidity)
-
-  useEffect(() => {
-    if (ref.current) {
-      // Set the indeterminate state
-      ref.current.indeterminate = indeterminate || false
-    }
-  }, [indeterminate, ref])
-
-  return (
-    <Root 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>
-    </Root>
-  )
-})

package/src/primitives/checkbox/styles.ts

@@ -1,127 +0,0 @@
-import {css} from 'styled-components'
-import {rem, ThemeProps} from '../../styles'
-import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
-import {cssVars} from '../../theme/lib/theme/color/cssVariables/createCssVars'
-
-export function checkboxBaseStyles(): ReturnType<typeof css> {
-  return css`
-    position: relative;
-    display: inline-block;
-  `
-}
-
-export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
-  const {theme} = props
-  const {input, radius} = theme.sanity
-  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: cssVars.default['border-base'],
-        width: input.border.width,
-      })};
-      border-radius: ${rem(radius[2])};
-      line-height: 1;
-      background-color: ${cssVars.default['bg-base']};
-
-      & > svg {
-        display: block;
-        position: absolute;
-        opacity: 0;
-        height: 100%;
-        width: 100%;
-
-        & > path {
-          vector-effect: non-scaling-stroke;
-          stroke-width: 1.2 !important;
-        }
-      }
-    }
-    &:checked + span {
-      background: ${cssVars.default['text-secondary']};
-      box-shadow: ${focusRingBorderStyle({
-        color: cssVars.default['text-secondary'],
-        width: input.border.width,
-      })};
-      color: ${cssVars.default['bg-base']};
-    }
-
-    /* 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: ${cssVars.critical['border-base']};
-      box-shadow: ${focusRingBorderStyle({
-        width: input.border.width,
-        color: cssVars.critical['text-secondary'],
-      })};
-      color: ${cssVars.default['text-secondary']};
-    }
-    &[data-error]&:checked + span {
-      background-color: ${cssVars.critical['text-secondary']};
-      color: ${cssVars.default['bg-base']};
-    }
-    &[data-error]&:checked&:not(:disabled):focus:focus-visible + span {
-      box-shadow: ${focusRingStyle({
-        border: {width: input.border.width, color: cssVars.critical['text-secondary']},
-        focusRing: {width: 1, offset: 1},
-      })};
-    }
-
-    &:disabled + span {
-      background-color: ${cssVars.default['bg-tint']};
-      box-shadow: ${focusRingBorderStyle({
-        width: input.border.width,
-        color: cssVars.default['border-base'],
-      })};
-      color: ${cssVars.default['text-secondary']};
-    }
-    &:disabled&:checked + span {
-      background-color: ${cssVars.default['border-base']};
-    }
-
-    &[data-read-only] + span {
-      background-color: ${cssVars.default['bg-tint']};
-      box-shadow: ${focusRingBorderStyle({
-        width: input.border.width,
-        color: cssVars.default['border-base'],
-      })};
-      color: ${cssVars.default['text-secondary']};
-    }
-
-    &[data-read-only]&:checked + span {
-      background-color: ${cssVars.default['border-base']};
-    }
-
-    &:checked + span > svg:first-child {
-      opacity: 1;
-    }
-    &:indeterminate + span > svg:last-child {
-      opacity: 1;
-    }
-  `
-}

package/src/primitives/code/code.tsx

@@ -1,50 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import {forwardRef} from 'react'
-import Refractor from 'react-refractor'
-import styled from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
-import {useToneContext} from '../../theme/toneContext/useToneContext'
-import {codeBaseStyle, CodeBaseStyleProps} from './styles'
-
-/**
- * @public
- */
-export interface CodeProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  language?: string
-  size?: number | number[]
-  weight?: string
-}
-
-const Root = styled.pre<CodeBaseStyleProps & ResponsiveFontStyleProps>(
-  codeBaseStyle,
-  responsiveCodeFontStyle,
-)
-
-/**
- * @public
- */
-export const Code = forwardRef(function Code(
-  props: CodeProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLElement>,
-) {
-  const {children, language: languageProp, size = 2, weight, ...restProps} = props
-  const language = typeof languageProp === 'string' ? languageProp : undefined
-  const registered = language ? Refractor.hasLanguage(language as any) : false
-  const {scheme} = useToneContext()
-
-  return (
-    <Root
-      data-ui="Code"
-      {...restProps}
-      $size={useArrayProp(size)}
-      $weight={weight}
-      ref={ref}
-      $scheme={scheme}
-    >
-      {!(language && registered) && <code>{children}</code>}
-      {language && registered && <Refractor inline language={language} value={String(children)} />}
-    </Root>
-  )
-})

package/src/primitives/code/styles.ts

@@ -1,83 +0,0 @@
-import {purple, green, yellow, orange, cyan, gray, red, blue, magenta} from '@sanity/color'
-import {css} from 'styled-components'
-import {ThemeColorSchemeKey} from '../../theme'
-import {cssVars} from '../../theme/lib/theme/color/cssVariables/createCssVars'
-
-function codeSyntaxHighlightingStyle(scheme: ThemeColorSchemeKey) {
-  const dark = scheme === 'dark'
-  const mainShade = dark ? 400 : 600
-  const secondaryShade = dark ? 600 : 400
-
-  return {
-    '&.atrule': {color: purple[mainShade].hex},
-    '&.attr-name': {color: green[mainShade].hex},
-    '&.attr-value': {color: yellow[mainShade].hex},
-    '&.attribute': {color: yellow[mainShade].hex},
-    '&.boolean': {color: purple[mainShade].hex},
-    '&.builtin': {color: purple[mainShade].hex},
-    '&.cdata': {color: yellow[mainShade].hex},
-    '&.char': {color: yellow[mainShade].hex},
-    '&.class': {color: orange[mainShade].hex},
-    '&.class-name': {color: cyan[mainShade].hex},
-    '&.comment': {color: gray[secondaryShade].hex},
-    '&.constant': {color: purple[mainShade].hex},
-    '&.deleted': {color: red[mainShade].hex},
-    '&.doctype': {color: gray[secondaryShade].hex},
-    '&.entity': {color: red[mainShade].hex},
-    '&.function': {color: green[mainShade].hex},
-    '&.hexcode': {color: blue[mainShade].hex},
-    '&.id': {color: purple[mainShade].hex},
-    '&.important': {color: purple[mainShade].hex},
-    '&.inserted': {color: yellow[mainShade].hex},
-    '&.keyword': {color: magenta[mainShade].hex},
-    '&.number': {color: purple[mainShade].hex},
-    '&.operator': {color: magenta[mainShade].hex},
-    '&.prolog': {color: gray[secondaryShade].hex},
-    '&.property': {color: blue[mainShade].hex},
-    '&.pseudo-class': {color: yellow[mainShade].hex},
-    '&.pseudo-element': {color: yellow[mainShade].hex},
-    '&.punctuation': {color: gray[mainShade].hex},
-    '&.regex': {color: blue[mainShade].hex},
-    '&.selector': {color: red[mainShade].hex},
-    '&.string': {color: yellow[mainShade].hex},
-    '&.symbol': {color: purple[mainShade].hex},
-    '&.tag': {color: red[mainShade].hex},
-    '&.unit': {color: orange[mainShade].hex},
-    '&.url': {color: red[mainShade].hex},
-    '&.variable': {color: red[mainShade].hex},
-  }
-}
-
-export interface CodeBaseStyleProps {
-  $scheme: ThemeColorSchemeKey
-}
-
-export function codeBaseStyle(props: CodeBaseStyleProps): ReturnType<typeof css> {
-  return css`
-    color: ${cssVars.default['text-code']};
-
-    & code {
-      font-family: inherit;
-
-      &.refractor .token {
-        ${codeSyntaxHighlightingStyle(props.$scheme)}
-      }
-    }
-
-    & a {
-      color: inherit;
-      text-decoration: underline;
-      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/primitives/container/container.tsx

@@ -1,37 +0,0 @@
-import {forwardRef} from 'react'
-import styled from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {Box, BoxProps} from '../box'
-import {ResponsiveWidthProps} from '../types'
-import {containerBaseStyle, responsiveContainerWidthStyle} from './styles'
-import {ResponsiveWidthStyleProps} from './types'
-
-/**
- * @public
- */
-export interface ContainerProps extends BoxProps, ResponsiveWidthProps {}
-
-const Root = styled(Box)<ResponsiveWidthStyleProps>(
-  containerBaseStyle,
-  responsiveContainerWidthStyle,
-)
-
-/**
- * @public
- */
-export const Container = forwardRef(function Container(
-  props: ContainerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {as, width = 2, ...restProps} = props
-
-  return (
-    <Root
-      data-ui="Container"
-      {...restProps}
-      $width={useArrayProp(width)}
-      forwardedAs={as}
-      ref={ref}
-    />
-  )
-})

package/src/primitives/container/styles.ts

@@ -1,23 +0,0 @@
-import {rem, _responsive, ThemeProps} from '../../styles'
-import {CSSObject} from '../../types/styled'
-import {ResponsiveWidthStyleProps} from './types'
-
-const BASE_STYLE: CSSObject = {
-  width: '100%',
-  margin: '0 auto',
-}
-
-export function containerBaseStyle(): CSSObject {
-  return BASE_STYLE
-}
-
-export function responsiveContainerWidthStyle(
-  props: ResponsiveWidthStyleProps & ThemeProps,
-): CSSObject[] {
-  const {theme} = props
-  const {container, media} = theme.sanity
-
-  return _responsive(media, props.$width, (val) => ({
-    maxWidth: val === 'auto' ? 'none' : rem(container[val]),
-  }))
-}

package/src/primitives/flex/flex.tsx

@@ -1,51 +0,0 @@
-import {forwardRef} from 'react'
-import styled from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {
-  flexItemStyle,
-  FlexItemStyleProps,
-  responsiveFlexStyle,
-  ResponsiveFlexStyleProps,
-} from '../../styles/internal'
-import {Box, BoxProps} from '../box'
-import {ResponsiveFlexProps, ResponsiveFlexItemProps} from '../types'
-
-/**
- * @public
- */
-export interface FlexProps
-  extends Omit<BoxProps, 'display'>,
-    ResponsiveFlexProps,
-    ResponsiveFlexItemProps {
-  gap?: number | number[]
-}
-
-const Root = styled(Box)<FlexItemStyleProps & ResponsiveFlexStyleProps>(
-  flexItemStyle,
-  responsiveFlexStyle,
-)
-
-/**
- * @public
- */
-export const Flex = forwardRef(function Flex(
-  props: FlexProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'wrap'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {align, as, direction = 'row', gap, justify, wrap, ...restProps} = props
-
-  return (
-    // @ts-expect-error -- some dollar prefixed typings aren't inferred correctly https://github.com/styled-components/styled-components/issues/4062
-    <Root
-      data-ui="Flex"
-      {...restProps}
-      $align={useArrayProp(align)}
-      $direction={useArrayProp(direction)}
-      $gap={useArrayProp(gap)}
-      $justify={useArrayProp(justify)}
-      $wrap={useArrayProp(wrap)}
-      forwardedAs={as}
-      ref={ref}
-    />
-  )
-})

package/src/primitives/grid/grid.tsx

@@ -1,44 +0,0 @@
-import {forwardRef} from 'react'
-import styled from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {responsiveGridStyle, ResponsiveGridStyleProps} from '../../styles/internal'
-import {Box, BoxProps} from '../box'
-import {ResponsiveGridProps} from '../types'
-
-/**
- * @public
- */
-export interface GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridProps {}
-
-const Root = styled(Box)<ResponsiveGridStyleProps>(responsiveGridStyle)
-
-/**
- * @public
- */
-export const Grid = forwardRef(function Grid(
-  props: GridProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {as, autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, children, ...restProps} =
-    props
-
-  return (
-    <Root
-      data-as={typeof as === 'string' ? as : undefined}
-      data-ui="Grid"
-      {...restProps}
-      $autoRows={useArrayProp(autoRows)}
-      $autoCols={useArrayProp(autoCols)}
-      $autoFlow={useArrayProp(autoFlow)}
-      $columns={useArrayProp(columns)}
-      $gap={useArrayProp(gap)}
-      $gapX={useArrayProp(gapX)}
-      $gapY={useArrayProp(gapY)}
-      $rows={useArrayProp(rows)}
-      forwardedAs={as}
-      ref={ref}
-    >
-      {children}
-    </Root>
-  )
-})

package/src/primitives/heading/heading.tsx

@@ -1,83 +0,0 @@
-import {forwardRef} from 'react'
-import styled from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {
-  ResponsiveFontStyleProps,
-  responsiveHeadingFont,
-  responsiveTextAlignStyle,
-  ResponsiveTextAlignStyleProps,
-} from '../../styles/internal'
-import {ThemeFontWeightKey} from '../../theme'
-import {TextAlign} from '../../types'
-import {headingBaseStyle} from './styles'
-import {HeadingStyleProps} from './types'
-
-/**
- * @public
- */
-export interface HeadingProps {
-  accent?: boolean
-  align?: TextAlign | TextAlign[]
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  muted?: boolean
-  size?: number | number[]
-  /**
-   * 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'
-  weight?: ThemeFontWeightKey
-}
-
-const Root = styled.div<
-  HeadingStyleProps & ResponsiveTextAlignStyleProps & ResponsiveFontStyleProps
->(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont)
-
-const SpanWithTextOverflow = styled.span`
-  display: block;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  overflow: clip;
-`
-
-/**
- * @public
- */
-export const Heading = forwardRef(function Heading(
-  props: HeadingProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLElement>,
-) {
-  const {
-    accent = false,
-    align,
-    children: childrenProp,
-    muted = false,
-    size = 2,
-    textOverflow,
-    weight,
-    ...restProps
-  } = props
-
-  let children = childrenProp
-
-  if (textOverflow === 'ellipsis') {
-    children = <SpanWithTextOverflow>{children}</SpanWithTextOverflow>
-  }
-
-  return (
-    <Root
-      data-ui="Heading"
-      {...restProps}
-      $accent={accent}
-      $align={useArrayProp(align)}
-      $muted={muted}
-      $size={useArrayProp(size)}
-      $weight={weight}
-      ref={ref}
-    >
-      <span>{children}</span>
-    </Root>
-  )
-})