@sanity/ui 0.36.17 → 0.37.3

package/src/primitives/switch/switch.tsx

@@ -1,58 +0,0 @@
-import React, {forwardRef, useEffect} from 'react'
-import styled from 'styled-components'
-import {useForwardedRef} from '../../hooks'
-import {
-  switchBaseStyles,
-  switchRepresentationStyles,
-  switchThumbStyles,
-  switchTrackStyles,
-  switchInputStyles,
-} from './styles'
-
-/**
- * @public
- */
-export interface SwitchProps {
-  indeterminate?: boolean
-}
-
-const Root = styled.span(switchBaseStyles)
-const Input = styled.input(switchInputStyles)
-const Representation = styled.span(switchRepresentationStyles)
-const Track = styled.span(switchTrackStyles)
-const Thumb = styled.span<{$checked?: boolean; $indeterminate?: boolean}>(switchThumbStyles)
-
-/**
- * @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 = useForwardedRef(forwardedRef)
-
-  useEffect(() => {
-    if (ref.current) {
-      // Set the indeterminate state
-      ref.current.indeterminate = indeterminate || false
-    }
-  }, [indeterminate, ref])
-
-  return (
-    <Root className={className} data-ui="Switch" style={style}>
-      <Input
-        data-read-only={!disabled && readOnly ? '' : undefined}
-        {...restProps}
-        checked={indeterminate !== true && checked}
-        disabled={disabled || readOnly}
-        type="checkbox"
-        ref={ref}
-      />
-      <Representation aria-hidden data-name="representation">
-        <Track />
-        <Thumb $checked={checked} $indeterminate={indeterminate} />
-      </Representation>
-    </Root>
-  )
-})

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

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

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

@@ -1,28 +0,0 @@
-import {Flex, Text, Theme, ThemeColorSpotKey, useTheme} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-import React from 'react'
-import styled, {css} from 'styled-components'
-import {WORKSHOP_SPOT_COLOR_OPTIONS} from '../../../__workshop__/constants'
-
-const ColoredText = styled(Text)<{color?: ThemeColorSpotKey}>(
-  (props: {color?: ThemeColorSpotKey; theme: Theme}) => {
-    const {spot} = props.theme.sanity.color
-
-    return css`
-      color: ${spot[props.color || 'gray']};
-    `
-  }
-)
-
-export default function ColoredTextStory() {
-  const theme = useTheme()
-  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} theme={theme} weight="bold">
-        {color}
-      </ColoredText>
-    </Flex>
-  )
-}

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

@@ -1,39 +0,0 @@
-import {Card, Container, Text} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import React from 'react'
-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/primitives/text/__workshop__/index.ts

@@ -1,20 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope('primitives/text', 'Text', [
-  {
-    name: 'default',
-    title: 'Text',
-    component: lazy(() => import('./example')),
-  },
-  {
-    name: 'colored',
-    title: 'Colored text',
-    component: lazy(() => import('./colored')),
-  },
-  {
-    name: 'optical-alignment',
-    title: 'Optical alignment',
-    component: lazy(() => import('./opticalAlignment')),
-  },
-])

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

@@ -1,49 +0,0 @@
-import {AddCircleIcon} from '@sanity/icons'
-import {Box, Card, Flex, Stack, Text} 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">
-            <Text size={4}>Hamburgefonstiv M</Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} scheme="dark">
-            <Text size={3}>Hamburgefonstiv M</Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} scheme="dark">
-            <Text size={2}>Hamburgefonstiv M</Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} scheme="dark">
-            <Text size={1}>Hamburgefonstiv M</Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} scheme="dark">
-            <Text size={0}>Hamburgefonstiv M</Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={2} scheme="dark">
-            <Text>
-              <AddCircleIcon />
-            </Text>
-          </Card>
-        </Flex>
-      </Stack>
-    </Box>
-  )
-}

package/src/primitives/text/index.ts

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

package/src/primitives/text/styles.ts

@@ -1,59 +0,0 @@
-import {css, FlattenSimpleInterpolation} from 'styled-components'
-import {ThemeProps} from '../../styles'
-
-export function textBaseStyle(
-  props: {$accent?: boolean; $muted?: boolean} & ThemeProps
-): FlattenSimpleInterpolation {
-  const {$accent, $muted, theme} = props
-  const {weights} = theme.sanity.fonts.text
-
-  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: ${theme.sanity.fonts.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: ${weights.bold};
-    }
-
-    & [data-sanity-icon] {
-      vertical-align: baseline;
-    }
-  `
-}

package/src/primitives/text/text.tsx

@@ -1,81 +0,0 @@
-import React, {forwardRef} from 'react'
-import styled from 'styled-components'
-import {
-  ResponsiveFontStyleProps,
-  responsiveTextAlignStyle,
-  responsiveTextFont,
-} from '../../styles/internal'
-import {ThemeFontWeightKey} from '../../theme'
-import {TextAlign} from '../../types'
-import {textBaseStyle} from './styles'
-
-/**
- * @public
- */
-export interface TextProps {
-  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<ResponsiveFontStyleProps>(
-  responsiveTextFont,
-  responsiveTextAlignStyle,
-  textBaseStyle
-)
-
-const SpanWithTextOverflow = styled.span`
-  display: block;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-`
-
-/**
- * @public
- */
-export const Text = forwardRef(function Text(
-  props: TextProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLDivElement>
-) {
-  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="Text"
-      {...restProps}
-      $accent={accent}
-      $align={align}
-      $muted={muted}
-      ref={ref}
-      $size={size}
-      $weight={weight}
-    >
-      <span>{children}</span>
-    </Root>
-  )
-})

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

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

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

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

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

@@ -1,45 +0,0 @@
-import {Container, Flex, Stack, Text, TextArea} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import React from 'react'
-import {
-  WORKSHOP_FONT_WEIGHT_OPTIONS,
-  WORKSHOP_RADIUS_OPTIONS,
-  WORKSHOP_SPACE_OPTIONS,
-  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
-} from '../../../__workshop__/constants'
-
-export default function PlainStory() {
-  const border = useBoolean('Border', true, 'Props')
-  const customValidity = useText('Custom validity', '', 'Props') || undefined
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const placeholder = useText('Placeholder', '', 'Props') || undefined
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0, 'Props')
-  const readOnly = useBoolean('Read only', false, 'Props')
-  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, undefined, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container width={0}>
-        <Stack space={3}>
-          <Text as="label" htmlFor="text-area-example" size={1} weight="semibold">
-            TextArea
-          </Text>
-          <TextArea
-            border={border}
-            customValidity={customValidity}
-            disabled={disabled}
-            fontSize={fontSize}
-            id="text-area-example"
-            padding={padding}
-            placeholder={placeholder}
-            radius={radius}
-            readOnly={readOnly}
-            weight={weight}
-          />
-        </Stack>
-      </Container>
-    </Flex>
-  )
-}

package/src/primitives/textArea/index.ts

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

package/src/primitives/textArea/textArea.tsx

@@ -1,86 +0,0 @@
-import React, {forwardRef} from 'react'
-import styled from 'styled-components'
-import {useForwardedRef, useCustomValidity} from '../../hooks'
-import {
-  responsiveInputPaddingStyle,
-  responsiveRadiusStyle,
-  ResponsiveRadiusStyleProps,
-  TextInputResponsivePaddingStyleProps,
-  TextInputInputStyleProps,
-  TextInputRepresentationStyleProps,
-  textInputRootStyle,
-  textInputBaseStyle,
-  textInputFontSizeStyle,
-  textInputRepresentationStyle,
-} from '../../styles/internal'
-import {ThemeFontWeightKey} from '../../theme'
-import {ResponsiveRadiusProps} from '../types'
-
-/**
- * @public
- */
-export interface TextAreaProps extends ResponsiveRadiusProps {
-  border?: boolean
-  customValidity?: string
-  fontSize?: number | number[]
-  padding?: number | number[]
-  weight?: ThemeFontWeightKey
-}
-
-const Root = styled.span(textInputRootStyle)
-
-const InputRoot = styled.span`
-  flex: 1;
-  min-width: 0;
-  display: block;
-  position: relative;
-`
-
-const Input = styled.textarea<TextInputResponsivePaddingStyleProps & TextInputInputStyleProps>(
-  responsiveInputPaddingStyle,
-  textInputBaseStyle,
-  textInputFontSizeStyle
-)
-
-const Presentation = styled.div<ResponsiveRadiusStyleProps & TextInputRepresentationStyleProps>(
-  responsiveRadiusStyle,
-  textInputRepresentationStyle
-)
-
-/**
- * @public
- */
-export const TextArea = forwardRef(function TextArea(
-  props: TextAreaProps & Omit<React.HTMLProps<HTMLTextAreaElement>, 'as'>,
-  forwardedRef: React.ForwardedRef<HTMLTextAreaElement>
-) {
-  const {
-    border = true,
-    customValidity,
-    disabled = false,
-    fontSize = 2,
-    padding = 3,
-    radius = 1,
-    ...restProps
-  } = props
-
-  const ref = useForwardedRef(forwardedRef)
-
-  useCustomValidity(ref, customValidity)
-
-  return (
-    <Root data-ui="TextArea">
-      <InputRoot>
-        <Input
-          data-as="textarea"
-          {...restProps}
-          $fontSize={fontSize}
-          $padding={padding}
-          disabled={disabled}
-          ref={ref}
-        />
-        <Presentation $border={border} $radius={radius} />
-      </InputRoot>
-    </Root>
-  )
-})

package/src/primitives/textInput/__workshop__/.eslintrc

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

package/src/primitives/textInput/__workshop__/clearButton.tsx

@@ -1,24 +0,0 @@
-import {TextInput} from '@sanity/ui'
-import React, {useCallback, useState} from 'react'
-
-export default function ClearButtonStory() {
-  const [value, setValue] = useState('')
-
-  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.currentTarget.value)
-  }, [])
-
-  const handleClear = useCallback(() => {
-    setValue('')
-  }, [])
-
-  return (
-    <TextInput
-      clearButton
-      onChange={handleChange}
-      onClear={handleClear}
-      placeholder="Enter text"
-      value={value}
-    />
-  )
-}

package/src/primitives/textInput/__workshop__/customValidity.tsx

@@ -1,18 +0,0 @@
-import {Button, Card, Container, Stack, TextInput} from '@sanity/ui'
-import {useText} from '@sanity/ui-workshop'
-import React from 'react'
-
-export default function CustomValidityStory() {
-  const customValidity = useText('Custom validity', 'Invalid value', 'Props') || undefined
-
-  return (
-    <Container as="form" onSubmit={(event) => event.preventDefault()} width={0}>
-      <Card padding={4}>
-        <Stack space={4}>
-          <TextInput customValidity={customValidity} />
-          <Button text="Submit" type="submit" />
-        </Stack>
-      </Card>
-    </Container>
-  )
-}

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

@@ -1,45 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope('primitives/text-input', 'TextInput', [
-  {
-    name: 'plain',
-    title: 'Plain',
-    component: lazy(() => import('./plain')),
-  },
-  {
-    name: 'custom-validity',
-    title: 'Custom validity',
-    component: lazy(() => import('./customValidity')),
-  },
-  {
-    name: 'types',
-    title: 'Types',
-    component: lazy(() => import('./typed')),
-  },
-  {
-    name: 'tones',
-    title: 'Tones',
-    component: lazy(() => import('./tones')),
-  },
-  {
-    name: 'clear-button',
-    title: 'Clear button',
-    component: lazy(() => import('./clearButton')),
-  },
-  {
-    name: 'read-only',
-    title: 'Read only',
-    component: lazy(() => import('./readOnly')),
-  },
-  {
-    name: 'multiple-tones',
-    title: 'Multiple tones',
-    component: lazy(() => import('./multipleTones')),
-  },
-  {
-    name: 'states',
-    title: 'States',
-    component: lazy(() => import('./states')),
-  },
-])

package/src/primitives/textInput/__workshop__/multipleTones.tsx

@@ -1,21 +0,0 @@
-import {Card, Stack, TextInput} from '@sanity/ui'
-import React from 'react'
-
-export default function MultipleTonesStory() {
-  return (
-    <Stack>
-      <Card padding={3} tone="primary">
-        <TextInput />
-      </Card>
-      <Card padding={3} tone="positive">
-        <TextInput />
-      </Card>
-      <Card padding={3} tone="caution">
-        <TextInput />
-      </Card>
-      <Card padding={3} tone="critical">
-        <TextInput />
-      </Card>
-    </Stack>
-  )
-}

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

@@ -1,59 +0,0 @@
-import {icons, IconSymbol} from '@sanity/icons'
-import {Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import React from 'react'
-import {
-  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
-  WORKSHOP_FONT_WEIGHT_OPTIONS,
-  WORKSHOP_ICON_SYMBOL_OPTIONS,
-  WORKSHOP_RADIUS_OPTIONS,
-  WORKSHOP_SPACE_OPTIONS,
-} from '../../../__workshop__/constants'
-
-export default function PlainStory() {
-  const border = useBoolean('Border', true, 'Props')
-  const customValidity = useText('Custom validity', '', 'Props') || undefined
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
-  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props') as IconSymbol
-  const iconRight = useSelect(
-    'Icon (right)',
-    WORKSHOP_ICON_SYMBOL_OPTIONS,
-    'add-circle',
-    'Props'
-  ) as IconSymbol
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const placeholder = useText('Placeholder', '', 'Props') || undefined
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0, 'Props')
-  const readOnly = useBoolean('Read only', false, 'Props')
-  const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, '', 'Props') || undefined
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container width={0}>
-        <Stack space={3}>
-          <Text as="label" htmlFor="text-input-example" size={1} weight="semibold">
-            TextInput
-          </Text>
-          <TextInput
-            border={border}
-            customValidity={customValidity}
-            disabled={disabled}
-            fontSize={fontSize}
-            icon={icon && icons[icon]}
-            iconRight={iconRight && icons[iconRight]}
-            id="text-input-example"
-            name="email"
-            padding={padding}
-            placeholder={placeholder}
-            radius={radius}
-            readOnly={readOnly}
-            space={space}
-            weight={weight}
-          />
-        </Stack>
-      </Container>
-    </Flex>
-  )
-}