@sanity/ui 0.37.2 → 0.37.3

package/src/primitives/select/select.tsx

@@ -1,77 +0,0 @@
-import {SelectIcon} from '@sanity/icons'
-import React, {forwardRef} from 'react'
-import styled from 'styled-components'
-import {useForwardedRef, useCustomValidity} from '../../hooks'
-import {Box} from '../box'
-import {Text} from '../text'
-import {selectStyle} from './styles'
-
-/**
- * @public
- */
-export interface SelectProps {
-  fontSize?: number | number[]
-  padding?: number | number[]
-  radius?: number | number[]
-  space?: number | number[]
-  customValidity?: string
-}
-
-const Root = styled.div(selectStyle.root)
-
-const Input = styled.select<{
-  $fontSize?: number | number[]
-  $padding?: number | number[]
-  $radius?: number | number[]
-  $space?: number | number[]
-}>(selectStyle.input)
-
-const IconBox = styled(Box)(selectStyle.iconBox)
-
-/**
- * @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 = 1,
-    readOnly,
-    space = 3,
-    ...restProps
-  } = props
-
-  const ref = useForwardedRef(forwardedRef)
-
-  useCustomValidity(ref, customValidity)
-
-  return (
-    <Root data-ui="Select">
-      <Input
-        data-read-only={!disabled && readOnly ? '' : undefined}
-        data-ui="Select"
-        {...restProps}
-        $fontSize={fontSize}
-        $padding={padding}
-        $radius={radius}
-        $space={space}
-        disabled={disabled || readOnly}
-        ref={ref}
-      >
-        {children}
-      </Input>
-
-      <IconBox padding={padding}>
-        <Text size={fontSize}>
-          <SelectIcon />
-        </Text>
-      </IconBox>
-    </Root>
-  )
-})

package/src/primitives/select/styles.ts

@@ -1,161 +0,0 @@
-import {css, CSSObject, FlattenSimpleInterpolation} from 'styled-components'
-import {getResponsiveProp, rem, responsive, ThemeProps} from '../../styles'
-import {
-  focusRingBorderStyle,
-  focusRingStyle,
-  responsiveInputPaddingIconRightStyle,
-  responsiveRadiusStyle,
-  ResponsiveRadiusStyleProps,
-} from '../../styles/internal'
-import {ThemeFontSize} from '../../theme'
-
-function rootStyle(): FlattenSimpleInterpolation {
-  return css`
-    position: relative;
-    width: stretch;
-
-    &:not([hidden]) {
-      display: inline-block;
-    }
-  `
-}
-
-function inputBaseStyle(props: ThemeProps): FlattenSimpleInterpolation {
-  const {theme} = props
-  const font = theme.sanity.fonts.text
-
-  return css`
-    -webkit-font-smoothing: antialiased;
-    appearance: none;
-    border: 0;
-    font-family: ${font.family};
-    color: inherit;
-    width: 100%;
-    outline: none;
-    margin: 0;
-
-    &:disabled {
-      opacity: 1;
-    }
-  `
-}
-
-function inputColorStyle(props: ThemeProps) {
-  const {theme} = props
-  const {focusRing, input} = theme.sanity
-  const color = theme.sanity.color.input
-
-  return css`
-    /* enabled */
-    background-color: ${color.default.enabled.bg};
-    color: ${color.default.enabled.fg};
-    box-shadow: ${focusRingBorderStyle({
-      color: color.default.enabled.border,
-      width: input.border.width,
-    })};
-
-    /* hovered */
-    @media (hover: hover) {
-      &:not(:disabled):hover {
-        background-color: ${color.default.hovered.bg};
-        color: ${color.default.hovered.fg};
-        box-shadow: ${focusRingBorderStyle({
-          color: color.default.hovered.border,
-          width: input.border.width,
-        })};
-      }
-    }
-
-    /* focused */
-    &:not(:disabled):focus {
-      box-shadow: ${focusRingStyle({
-        border: {width: input.border.width, color: color.default.enabled.border},
-        focusRing,
-      })};
-    }
-
-    /* read-only */
-    &[data-read-only] {
-      background-color: ${color.default.readOnly.bg};
-      color: ${color.default.readOnly.fg};
-      box-shadow: ${focusRingBorderStyle({
-        color: color.default.readOnly.border,
-        width: input.border.width,
-      })};
-    }
-
-    /* disabled */
-    &:not([data-read-only]):disabled {
-      background-color: ${color.default.disabled.bg};
-      color: ${color.default.disabled.fg};
-      box-shadow: ${focusRingBorderStyle({
-        color: color.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 | number[]} & ThemeProps) {
-  const {theme, $fontSize} = props
-  const {sizes} = theme.sanity.fonts.text
-
-  return responsive(theme.sanity.media, getResponsiveProp($fontSize), (sizeIndex) =>
-    textSize(sizes[sizeIndex] || sizes[2])
-  )
-}
-
-function inputStyle(): Array<
-  | ((props: ResponsiveRadiusStyleProps & ThemeProps) => CSSObject[])
-  | ((props: ThemeProps) => FlattenSimpleInterpolation)
-> {
-  return [
-    responsiveRadiusStyle,
-    inputBaseStyle,
-    inputColorStyle,
-    inputTextSizeStyle,
-    responsiveInputPaddingIconRightStyle,
-  ]
-}
-
-function iconBoxStyle(props: ThemeProps): FlattenSimpleInterpolation {
-  const {theme} = props
-  const color = theme.sanity.color.input
-
-  return css`
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-    right: 0;
-
-    /* enabled */
-    --card-fg-color: ${color.default.enabled.fg};
-
-    /* hover */
-    @media (hover: hover) {
-      select:not(disabled):not(:read-only):hover + && {
-        --card-fg-color: ${color.default.hovered.fg};
-      }
-    }
-
-    /* disabled */
-    select:disabled + && {
-      --card-fg-color: ${color.default.disabled.fg};
-    }
-
-    /* read-only */
-    select[data-read-only] + && {
-      --card-fg-color: ${color.default.readOnly.fg};
-    }
-  `
-}
-
-export const selectStyle = {
-  root: rootStyle,
-  input: inputStyle,
-  iconBox: iconBoxStyle,
-}

package/src/primitives/spinner/__workshop__/.eslintrc

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

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

@@ -1,15 +0,0 @@
-import {Flex, Spinner} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import React from 'react'
-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>
-  )
-}

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

@@ -1,10 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope('primitives/spinner', 'Spinner', [
-  {
-    name: 'props',
-    title: 'Props',
-    component: lazy(() => import('./Props')),
-  },
-])

package/src/primitives/spinner/index.ts

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

package/src/primitives/spinner/spinner.tsx

@@ -1,42 +0,0 @@
-import {SpinnerIcon} from '@sanity/icons'
-import React, {forwardRef} from 'react'
-import styled, {keyframes} 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 Root = styled(Text)`
-  & > span > svg {
-    animation: ${rotate} 500ms linear infinite;
-  }
-`
-
-/**
- * @public
- */
-export const Spinner = forwardRef(function Spinner(
-  props: SpinnerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLDivElement>
-) {
-  return (
-    <Root data-ui="Spinner" {...props} ref={ref}>
-      <SpinnerIcon />
-    </Root>
-  )
-})

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

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

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

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

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

@@ -1,32 +0,0 @@
-import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-import React from 'react'
-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/primitives/stack/index.ts

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

package/src/primitives/stack/stack.tsx

@@ -1,35 +0,0 @@
-import React, {forwardRef} from 'react'
-import styled from 'styled-components'
-import {Box, BoxProps} from '../box'
-import {stackBaseStyle, responsiveStackSpaceStyle, ResponsiveStackSpaceStyleProps} from './styles'
-
-/**
- * @public
- */
-export interface StackProps extends BoxProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  space?: number | number[]
-}
-
-const Root = styled(Box)<ResponsiveStackSpaceStyleProps>(stackBaseStyle, responsiveStackSpaceStyle)
-
-/**
- * @public
- */
-export const Stack = forwardRef(function Stack(
-  props: StackProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
-  ref: React.ForwardedRef<HTMLDivElement>
-) {
-  const {as, space, ...restProps} = props
-
-  return (
-    <Root
-      data-as={typeof as === 'string' ? as : undefined}
-      data-ui="Stack"
-      {...restProps}
-      $space={space}
-      forwardedAs={as}
-      ref={ref}
-    />
-  )
-})

package/src/primitives/stack/styles.ts

@@ -1,32 +0,0 @@
-import {CSSObject} from 'styled-components'
-import {getResponsiveProp, rem, responsive, ThemeProps} from '../../styles'
-
-export interface ResponsiveStackSpaceStyleProps {
-  $space?: number | 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 {theme} = props
-  const {media, space} = theme.sanity
-
-  return responsive(media, getResponsiveProp(props.$space), (spaceIndex) => ({
-    gridGap: rem(space[spaceIndex]),
-  }))
-}

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

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

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

@@ -1,23 +0,0 @@
-import {Box, Flex, Switch, Text} from '@sanity/ui'
-import React, {useCallback, useState} from 'react'
-
-export default function ExampleStory() {
-  const [checked, setChecked] = useState<boolean | undefined>(undefined)
-  const indeterminate = checked === undefined
-  const handleChange = useCallback((event: React.FormEvent<HTMLInputElement>) => {
-    setChecked(event.currentTarget.checked)
-  }, [])
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Flex align="center" as="label">
-        <Switch checked={checked || false} indeterminate={indeterminate} onChange={handleChange} />
-        <Box marginLeft={3}>
-          <Text size={1} weight="semibold">
-            Label
-          </Text>
-        </Box>
-      </Flex>
-    </Flex>
-  )
-}

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

@@ -1,7 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope('primitives/switch', 'Switch', [
-  {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-  {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
-])

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

@@ -1,41 +0,0 @@
-import {Flex, Switch, useTheme} from '@sanity/ui'
-import {useBoolean, useNumber} from '@sanity/ui-workshop'
-import React, {useCallback, useMemo} from 'react'
-import {ThemeProvider} from 'styled-components'
-
-export default function PropsStory() {
-  const checked = useBoolean('Checked', false)
-  const indeterminate = useBoolean('Indeterminate', false)
-  const readOnly = useBoolean('Read only', false)
-  const theme = useTheme()
-  const focusRingOffset = useNumber('Focus ring offset', theme.sanity.focusRing.offset)
-  const focusRingWidth = useNumber('Focus ring width', theme.sanity.focusRing.width)
-  const handleChange = useCallback(() => undefined, [])
-
-  const customTheme = useMemo(
-    () => ({
-      ...theme,
-      sanity: {
-        ...theme.sanity,
-        focusRing: {
-          offset: focusRingOffset || theme.sanity.focusRing.offset,
-          width: focusRingWidth || theme.sanity.focusRing.width,
-        },
-      },
-    }),
-    [focusRingOffset, focusRingWidth, theme]
-  )
-
-  return (
-    <ThemeProvider theme={customTheme}>
-      <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-        <Switch
-          checked={checked}
-          indeterminate={indeterminate}
-          onChange={handleChange}
-          readOnly={readOnly}
-        />
-      </Flex>
-    </ThemeProvider>
-  )
-}

package/src/primitives/switch/index.ts

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

package/src/primitives/switch/styles.ts

@@ -1,163 +0,0 @@
-import {css, FlattenSimpleInterpolation} from 'styled-components'
-import {rem, ThemeProps} from '../../styles'
-import {focusRingStyle} from '../../styles/internal'
-
-/* Root */
-export function switchBaseStyles(): FlattenSimpleInterpolation {
-  return css`
-    position: relative;
-    &:not([hidden]) {
-      display: inline-block;
-    }
-  `
-}
-
-/* Input */
-export function switchInputStyles(): FlattenSimpleInterpolation {
-  // 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): FlattenSimpleInterpolation {
-  const {theme} = props
-  const {focusRing, input} = theme.sanity
-  const color = theme.sanity.color.button.default
-
-  return css`
-    --switch-bg-color: ${color.default.enabled.bg};
-    --switch-fg-color: ${color.default.enabled.fg};
-    --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:focus:not(:focus-visible) + && {
-      --switch-box-shadow: none;
-    }
-
-    input:checked + && {
-      --switch-bg-color: ${color.positive.enabled.bg};
-      --switch-fg-color: ${color.positive.enabled.fg};
-    }
-
-    @media (hover: hover) {
-      input:not(:disabled):hover + && {
-        --switch-bg-color: ${color.default.hovered.bg};
-        --switch-fg-color: ${color.default.hovered.fg};
-      }
-
-      input:not(:disabled):checked:hover + && {
-        --switch-bg-color: ${color.positive.hovered.bg};
-        --switch-fg-color: ${color.positive.hovered.fg};
-      }
-    }
-
-    input:not([data-read-only]):disabled + && {
-      --switch-bg-color: ${color.default.disabled.bg};
-      --switch-fg-color: ${color.default.disabled.fg};
-    }
-  `
-}
-
-/* Track */
-export function switchTrackStyles(props: ThemeProps): FlattenSimpleInterpolation {
-  const {theme} = props
-  const {input} = theme.sanity
-
-  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
-): FlattenSimpleInterpolation {
-  const {$indeterminate, theme} = props
-  const {input} = theme.sanity
-  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);
-
-    ${checked &&
-    css`
-      transform: translate3d(${checkedOffset}px, 0, 0);
-    `}
-
-    ${$indeterminate &&
-    css`
-      transform: translate3d(${indeterminateOffset}px, 0, 0);
-    `}
-  `
-}