@sanity/ui 0.37.2 → 0.37.3

package/src/primitives/checkbox/checkbox.tsx

@@ -1,63 +0,0 @@
-import {CheckmarkIcon, RemoveIcon} from '@sanity/icons'
-import React, {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}
-        {...restProps}
-        checked={checked}
-        disabled={disabled || readOnly}
-        type="checkbox"
-        readOnly={readOnly}
-        ref={ref}
-      />
-      <span>
-        <CheckmarkIcon />
-        <RemoveIcon />
-      </span>
-    </Root>
-  )
-})

package/src/primitives/checkbox/index.ts

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

package/src/primitives/checkbox/styles.ts

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

package/src/primitives/code/__workshop__/.eslintrc

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

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

@@ -1,15 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope('primitives/code', 'Code', [
-  {
-    name: 'props',
-    title: 'Props',
-    component: lazy(() => import('./props')),
-  },
-  {
-    name: 'optical-alignment',
-    title: 'Optical alignment',
-    component: lazy(() => import('./opticalAlignment')),
-  },
-])

package/src/primitives/code/__workshop__/opticalAlignment.tsx

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

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

@@ -1,21 +0,0 @@
-import {Box, Code} from '@sanity/ui'
-import {useSelect, useText} from '@sanity/ui-workshop'
-import React from 'react'
-import {
-  WORKSHOP_CODE_LANGUAGE_OPTIONS,
-  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
-} from '../../../__workshop__/constants'
-
-export default function PropsStory() {
-  const code = useText('Code', `console.log('Hello, world')`, 'Props')
-  const language = useSelect('Language', WORKSHOP_CODE_LANGUAGE_OPTIONS, 'typescript', 'Props')
-  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, undefined, 'Props')
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Code language={language} size={size}>
-        {code}
-      </Code>
-    </Box>
-  )
-}

package/src/primitives/code/code.tsx

@@ -1,36 +0,0 @@
-import React, {forwardRef} from 'react'
-import Refractor from 'react-refractor'
-import styled from 'styled-components'
-import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
-import {codeBaseStyle} from './styles'
-
-/**
- * @public
- */
-export interface CodeProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  language?: string
-  size?: number | number[]
-  weight?: string
-}
-
-const Root = styled.pre<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
-
-  return (
-    <Root data-ui="Code" {...restProps} $size={size} $weight={weight} ref={ref}>
-      {!(language && registered) && <code>{children}</code>}
-      {language && registered && <Refractor inline language={language} value={String(children)} />}
-    </Root>
-  )
-})

package/src/primitives/code/index.ts

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

package/src/primitives/code/styles.ts

@@ -1,70 +0,0 @@
-import {css, FlattenInterpolation, ThemeProps as StyledThemeProps} from 'styled-components'
-import {ThemeProps} from '../../styles'
-import {Theme} from '../../theme'
-
-function codeSyntaxHighlightingStyle({theme}: ThemeProps) {
-  const color = theme.sanity.color.syntax
-
-  return {
-    '&.atrule': {color: color.atrule},
-    '&.attr-name': {color: color.attrName},
-    '&.attr-value': {color: color.attrValue},
-    '&.attribute': {color: color.attribute},
-    '&.boolean': {color: color.boolean},
-    '&.builtin': {color: color.builtin},
-    '&.cdata': {color: color.cdata},
-    '&.char': {color: color.char},
-    '&.class': {color: color.class},
-    '&.class-name': {color: color.className},
-    '&.comment': {color: color.comment},
-    '&.constant': {color: color.constant},
-    '&.deleted': {color: color.deleted},
-    '&.doctype': {color: color.doctype},
-    '&.entity': {color: color.entity},
-    '&.function': {color: color.function},
-    '&.hexcode': {color: color.hexcode},
-    '&.id': {color: color.id},
-    '&.important': {color: color.important},
-    '&.inserted': {color: color.inserted},
-    '&.keyword': {color: color.keyword},
-    '&.number': {color: color.number},
-    '&.operator': {color: color.operator},
-    '&.prolog': {color: color.prolog},
-    '&.property': {color: color.property},
-    '&.pseudo-class': {color: color.pseudoClass},
-    '&.pseudo-element': {color: color.pseudoElement},
-    '&.punctuation': {color: color.punctuation},
-    '&.regex': {color: color.regex},
-    '&.selector': {color: color.selector},
-    '&.string': {color: color.string},
-    '&.symbol': {color: color.symbol},
-    '&.tag': {color: color.tag},
-    '&.unit': {color: color.unit},
-    '&.url': {color: color.url},
-    '&.variable': {color: color.variable},
-  }
-}
-
-export function codeBaseStyle(): FlattenInterpolation<StyledThemeProps<Theme>> {
-  return css`
-    color: var(--card-code-fg-color);
-
-    & code {
-      font-family: inherit;
-
-      &.refractor .token {
-        ${codeSyntaxHighlightingStyle}
-      }
-    }
-
-    & a {
-      color: inherit;
-      text-decoration: underline;
-      border-radius: 1px;
-    }
-
-    & [data-sanity-icon] {
-      vertical-align: baseline;
-    }
-  `
-}

package/src/primitives/container/__workshop__/.eslintrc

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

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

@@ -1,20 +0,0 @@
-import {Card, Container, Flex, Text} from '@sanity/ui'
-import {useAction, useSelect} from '@sanity/ui-workshop'
-import React from 'react'
-import {WORKSHOP_CONTAINER_WIDTH_OPTIONS} from '../../../__workshop__/constants'
-
-export default function PlainStory() {
-  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 0, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container onClick={useAction('onClick')} width={width}>
-        <Card padding={4} shadow={1}>
-          <Text>
-            Container with <code>max-width={width}</code>
-          </Text>
-        </Card>
-      </Container>
-    </Flex>
-  )
-}

package/src/primitives/container/__workshop__/index.ts

@@ -1,6 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope('primitives/container', 'Container', [
-  {name: 'plain', title: 'Plain', component: lazy(() => import('./example'))},
-])

package/src/primitives/container/container.tsx

@@ -1,28 +0,0 @@
-import React, {forwardRef} from 'react'
-import styled from 'styled-components'
-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={width} forwardedAs={as} ref={ref} />
-})

package/src/primitives/container/index.ts

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

package/src/primitives/container/styles.ts

@@ -1,23 +0,0 @@
-import {CSSObject} from 'styled-components'
-import {getResponsiveProp, rem, responsive, ThemeProps} from '../../styles'
-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, getResponsiveProp(props.$width), (val) => ({
-    maxWidth: val === 'auto' ? 'none' : rem(container[val]),
-  }))
-}

package/src/primitives/container/types.ts

@@ -1,6 +0,0 @@
-/**
- * @internal
- */
-export interface ResponsiveWidthStyleProps {
-  $width?: number | number[] | 'auto'
-}

package/src/primitives/flex/__workshop__/.eslintrc

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

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

@@ -1,34 +0,0 @@
-import {Card, Code, Flex} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-import React from 'react'
-import styled from 'styled-components'
-import {WORKSHOP_FLEX_DIRECTION_OPTIONS} from '../../../__workshop__/constants'
-
-const DebugCard = styled(Card)`
-  outline: 1px solid red;
-  &:not([hidden]) {
-    display: flex;
-  }
-  align-items: center;
-  justify-content: center;
-`
-
-export default function PlainStory() {
-  const direction = useSelect('Direction', WORKSHOP_FLEX_DIRECTION_OPTIONS, 'row', 'Props')
-
-  return (
-    <Flex direction={direction} height="fill" style={{width: '100%'}}>
-      <DebugCard flex={1}>
-        <Code>1</Code>
-      </DebugCard>
-
-      <DebugCard flex={[1, 2, 3]}>
-        <Code>[1,2,3]</Code>
-      </DebugCard>
-
-      <DebugCard flex={1}>
-        <Code>1</Code>
-      </DebugCard>
-    </Flex>
-  )
-}

package/src/primitives/flex/__workshop__/gap.tsx

@@ -1,26 +0,0 @@
-import {Card, Flex, Text} from '@sanity/ui'
-import React from 'react'
-
-export default function GapStory() {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Flex align="center" gap={[2, 3, 4]} justify="center" wrap="wrap">
-        <Card padding={3} scheme="dark">
-          <Text size={0}>Card 0</Text>
-        </Card>
-        <Card padding={3} scheme="dark">
-          <Text size={1}>Card 1</Text>
-        </Card>
-        <Card padding={3} scheme="dark">
-          <Text size={2}>Card 2</Text>
-        </Card>
-        <Card padding={3} scheme="dark">
-          <Text size={3}>Card 3</Text>
-        </Card>
-        <Card padding={3} scheme="dark">
-          <Text size={4}>Card 4</Text>
-        </Card>
-      </Flex>
-    </Flex>
-  )
-}

package/src/primitives/flex/__workshop__/index.ts

@@ -1,7 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope('primitives/flex', 'Flex', [
-  {name: 'plain', title: 'Plain', component: lazy(() => import('./example'))},
-  {name: 'gap', title: 'Gap', component: lazy(() => import('./gap'))},
-])

package/src/primitives/flex/flex.tsx

@@ -1,49 +0,0 @@
-import React, {forwardRef} from 'react'
-import styled from 'styled-components'
-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 (
-    <Root
-      data-ui="Flex"
-      {...restProps}
-      $align={align}
-      $direction={direction}
-      $gap={gap}
-      $justify={justify}
-      $wrap={wrap}
-      forwardedAs={as}
-      ref={ref}
-    />
-  )
-})

package/src/primitives/flex/index.ts

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

package/src/primitives/grid/__workshop__/.eslintrc

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

package/src/primitives/grid/__workshop__/index.ts

@@ -1,6 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope('primitives/grid', 'Grid', [
-  {name: 'responsive', title: 'Responsive', component: lazy(() => import('./responsive'))},
-])

package/src/primitives/grid/__workshop__/responsive.tsx

@@ -1,54 +0,0 @@
-import {Card, Code, Container, Flex, Grid} from '@sanity/ui'
-import React from 'react'
-
-export default function ResponsiveStory() {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container width="auto">
-        <Grid
-          id="responsive-grid"
-          columns={[1, 2, 3, 4, 5, 6, 7]}
-          gap={[0, 1, 2, 3, 4, 5, 6]}
-          rows={[1, 2, 3, 4, 5, 6, 7]}
-        >
-          <Card tone="transparent">
-            <Code>1</Code>
-          </Card>
-          <Card tone="transparent">
-            <Code>2</Code>
-          </Card>
-          <Card tone="transparent">
-            <Code>3</Code>
-          </Card>
-          <Card tone="transparent">
-            <Code>4</Code>
-          </Card>
-          <Card tone="transparent">
-            <Code>5</Code>
-          </Card>
-          <Card tone="transparent">
-            <Code>6</Code>
-          </Card>
-          <Card tone="transparent">
-            <Code>7</Code>
-          </Card>
-          <Card tone="transparent">
-            <Code>8</Code>
-          </Card>
-          <Card tone="transparent">
-            <Code>9</Code>
-          </Card>
-          <Card tone="transparent">
-            <Code>10</Code>
-          </Card>
-          <Card tone="transparent">
-            <Code>11</Code>
-          </Card>
-          <Card tone="transparent">
-            <Code>12</Code>
-          </Card>
-        </Grid>
-      </Container>
-    </Flex>
-  )
-}