@sanity/ui 0.36.17 → 0.37.3

package/src/primitives/card/__workshop__/checkered.tsx

@@ -1,17 +0,0 @@
-import {Card, Flex, Stack} from '@sanity/ui'
-import React from 'react'
-
-export default function CheckeredStory() {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Stack space={1}>
-        <Card __unstable_checkered border style={{width: 120, height: 60}} />
-        <Card __unstable_checkered border style={{width: 120, height: 60}} tone="transparent" />
-        <Card __unstable_checkered border style={{width: 120, height: 60}} tone="primary" />
-        <Card __unstable_checkered border style={{width: 120, height: 60}} tone="positive" />
-        <Card __unstable_checkered border style={{width: 120, height: 60}} tone="caution" />
-        <Card __unstable_checkered border style={{width: 120, height: 60}} tone="critical" />
-      </Stack>
-    </Flex>
-  )
-}

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

@@ -1,14 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope('primitives/card', 'Card', [
-  {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-  {name: 'styled', title: 'Styled', component: lazy(() => import('./styled'))},
-  {name: 'interactive', title: 'Interactive', component: lazy(() => import('./interactive'))},
-  {name: 'tones', title: 'Tones', component: lazy(() => import('./allTones'))},
-  {name: 'as-button', title: 'As button', component: lazy(() => import('./asButton'))},
-  {name: 'list-nav', title: 'List navigation', component: lazy(() => import('./listNavigation'))},
-  {name: 'checkered', title: 'Checkered', component: lazy(() => import('./checkered'))},
-  {name: 'as-component', title: 'As component', component: lazy(() => import('./asComponent'))},
-  {name: 'selected', title: 'Selected', component: lazy(() => import('./selected'))},
-])

package/src/primitives/card/__workshop__/interactive.tsx

@@ -1,24 +0,0 @@
-import {Card, Flex, Stack, Text} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-import React from 'react'
-
-export default function InteractiveCardStory() {
-  const selected = useBoolean('Selected', false, 'Props')
-  const pressed = useBoolean('Pressed', false, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <div aria-selected={selected}>
-        <Card __unstable_focusRing aria-pressed={pressed} as="button" padding={3} tabIndex={0}>
-          <Stack space={3}>
-            <Text>
-              Text <code>Code</code>
-            </Text>
-            <Text muted>Muted</Text>
-            <Text accent>Accent</Text>
-          </Stack>
-        </Card>
-      </div>
-    </Flex>
-  )
-}

package/src/primitives/card/__workshop__/listNavigation.tsx

@@ -1,78 +0,0 @@
-import {Box, Card, Flex, Skeleton, Text} from '@sanity/ui'
-import React from 'react'
-import {Stack} from '../../stack'
-
-export default function ListNavigationStory() {
-  return (
-    <Box height="fill" padding={[3, 4, 5]} sizing="border">
-      <Card height="fill" shadow={1}>
-        <Flex height="fill">
-          <Card flex={1} padding={2}>
-            <List1 />
-          </Card>
-          <Card borderLeft flex={1} padding={2}>
-            <List2 />
-          </Card>
-        </Flex>
-      </Card>
-    </Box>
-  )
-}
-
-function List1() {
-  return (
-    <Stack space={1}>
-      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
-        <Preview />
-      </Card>
-      <Card __unstable_focusRing as="a" href="#" padding={2} pressed radius={2}>
-        <Preview />
-      </Card>
-      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
-        <Preview />
-      </Card>
-      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
-        <Preview />
-      </Card>
-      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
-        <Preview />
-      </Card>
-    </Stack>
-  )
-}
-
-function List2() {
-  return (
-    <Stack space={1}>
-      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
-        <Preview />
-      </Card>
-      <Card __unstable_focusRing as="a" href="#" padding={2} pressed radius={2} selected>
-        <Preview />
-      </Card>
-      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
-        <Preview />
-      </Card>
-      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
-        <Preview />
-      </Card>
-      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
-        <Preview />
-      </Card>
-    </Stack>
-  )
-}
-
-function Preview() {
-  return (
-    <Flex align="center">
-      <Skeleton marginRight={2} radius={2} style={{width: 35, height: 35}} />
-      <Stack flex={1} space={2}>
-        <Text>Preview</Text>
-        <Text muted size={1}>
-          Preview
-        </Text>
-      </Stack>
-    </Flex>
-  )
-}

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

@@ -1,48 +0,0 @@
-import {Card, Flex, Stack, Text} from '@sanity/ui'
-import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
-import React from 'react'
-import {
-  WORKSHOP_CARD_AS_OPTIONS,
-  WORKSHOP_CARD_TONE_OPTIONS,
-  WORKSHOP_RADIUS_OPTIONS,
-  WORKSHOP_SHADOW_OPTIONS,
-  WORKSHOP_SPACE_OPTIONS,
-} from '../../../__workshop__/constants'
-
-export default function PropsStory() {
-  const as = useSelect('As', WORKSHOP_CARD_AS_OPTIONS, 'div', 'Props')
-  const border = useBoolean('Border', false, 'Props')
-  const checkered = useBoolean('Checkered', false, 'Props')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 0, 'Props')
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0, 'Props')
-  const selected = useBoolean('Selected', false, 'Props')
-  const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 0, 'Props')
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, 'default', 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Card
-        __unstable_checkered={checkered}
-        as={as}
-        border={border}
-        onClick={useAction('onClick')}
-        padding={padding}
-        radius={radius}
-        selected={selected}
-        shadow={shadow}
-        tone={tone}
-      >
-        <Stack space={3}>
-          <Text>
-            Card with <code>padding={padding}</code>, <code>tone={tone}</code>, and{' '}
-            <code>shadow={shadow}</code>.
-          </Text>
-          <Text>
-            Text with <a>link</a>.
-          </Text>
-          <Text accent>Accented text.</Text>
-        </Stack>
-      </Card>
-    </Flex>
-  )
-}

package/src/primitives/card/__workshop__/selected.tsx

@@ -1,98 +0,0 @@
-import {EditIcon, PublishIcon} from '@sanity/icons'
-import {
-  Box,
-  Card,
-  Container,
-  Flex,
-  Inline,
-  Stack,
-  Text,
-  Theme,
-  ThemeColorToneKey,
-  useRootTheme,
-} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-import React from 'react'
-import styled, {css} from 'styled-components'
-
-const TextWithTone = styled(Text)<{$tone: ThemeColorToneKey}>(
-  ({$tone, theme}: {$tone: ThemeColorToneKey; theme: Theme}) => {
-    const tone = theme.sanity.color.solid[$tone]
-
-    return css`
-      &:not([data-selected]) {
-        --card-fg-color: ${tone ? tone.enabled.bg : undefined};
-        --card-muted-fg-color: ${tone ? tone.enabled.bg : undefined};
-      }
-
-      [data-ui='Card']:disabled & {
-        --card-fg-color: inherit;
-        --card-muted-fg-color: inherit;
-      }
-    `
-  }
-)
-
-export default function SelectedStory() {
-  const disabled = useBoolean('Disabled', false) || false
-  const selected = useBoolean('Selected', false) || false
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Container width={0}>
-        <Stack space={1}>
-          <Card
-            __unstable_focusRing
-            as="button"
-            disabled={disabled}
-            padding={3}
-            radius={2}
-            selected={selected}
-          >
-            <Preview selected={selected} />
-          </Card>
-
-          <Card
-            __unstable_focusRing
-            as="button"
-            disabled={disabled}
-            padding={3}
-            radius={2}
-            selected={selected}
-            tone="critical"
-          >
-            <Preview selected={selected} />
-          </Card>
-        </Stack>
-      </Container>
-    </Flex>
-  )
-}
-
-function Preview({selected}: {selected: boolean}) {
-  const theme = useRootTheme()
-
-  return (
-    <Flex>
-      <Box flex={1}>
-        <Text>Title</Text>
-      </Box>
-      <Inline space={3}>
-        <TextWithTone
-          data-selected={selected ? '' : undefined}
-          muted
-          $tone={theme.tone === 'default' ? 'caution' : 'default'}
-        >
-          <EditIcon />
-        </TextWithTone>
-        <TextWithTone
-          data-selected={selected ? '' : undefined}
-          muted
-          $tone={theme.tone === 'default' ? 'positive' : 'default'}
-        >
-          <PublishIcon />
-        </TextWithTone>
-      </Inline>
-    </Flex>
-  )
-}

package/src/primitives/card/__workshop__/styled.tsx

@@ -1,15 +0,0 @@
-import {Card, Flex, Text} from '@sanity/ui'
-import React from 'react'
-import styled from 'styled-components'
-
-const StyledCard = styled(Card).attrs({forwardedAs: 'ol'})``
-
-export default function StyledCardStory() {
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <StyledCard>
-        <Text as="li">Styled</Text>
-      </StyledCard>
-    </Flex>
-  )
-}

package/src/primitives/card/card.tsx

@@ -1,104 +0,0 @@
-import React, {forwardRef} from 'react'
-import {isValidElementType} from 'react-is'
-import styled from 'styled-components'
-import {
-  responsiveBorderStyle,
-  ResponsiveBorderStyleProps,
-  responsiveRadiusStyle,
-  ResponsiveRadiusStyleProps,
-  responsiveShadowStyle,
-  ResponsiveShadowStyleProps,
-} from '../../styles/internal'
-import {ThemeColorProvider, ThemeColorSchemeKey, useRootTheme} from '../../theme'
-import {CardTone} from '../../types'
-import {Box, BoxProps} from '../box'
-import {ResponsiveBorderProps, ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
-import {cardStyle} from './styles'
-import {CardStyleProps} from './types'
-
-/**
- * @public
- */
-export interface CardProps
-  extends BoxProps,
-    ResponsiveBorderProps,
-    ResponsiveRadiusProps,
-    ResponsiveShadowProps {
-  /**
-   * Do not use in production.
-   * @beta
-   */
-  __unstable_checkered?: boolean
-  /**
-   * Do not use in production.
-   * @beta
-   */
-  __unstable_focusRing?: boolean
-  pressed?: boolean
-  scheme?: ThemeColorSchemeKey
-  tone?: CardTone
-}
-
-const Root = styled(Box)<
-  CardStyleProps &
-    ResponsiveRadiusStyleProps &
-    ResponsiveBorderStyleProps &
-    ResponsiveShadowStyleProps
->(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle)
-
-/**
- * @public
- */
-export const Card = forwardRef(function Card(
-  props: CardProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
-  ref: React.ForwardedRef<HTMLDivElement>
-) {
-  const {
-    pressed = false,
-    __unstable_checkered: checkered = false,
-    __unstable_focusRing: focusRing = false,
-    as: asProp,
-    border,
-    borderTop,
-    borderRight,
-    borderBottom,
-    borderLeft,
-    radius = 0,
-    scheme,
-    selected,
-    shadow,
-    tone: toneProp = 'default',
-    ...restProps
-  } = props
-  const as = isValidElementType(asProp) ? asProp : 'div'
-  const rootTheme = useRootTheme()
-  const tone = toneProp === 'inherit' ? rootTheme.tone : toneProp
-
-  return (
-    <ThemeColorProvider scheme={scheme} tone={tone}>
-      <Root
-        data-as={typeof as === 'string' ? as : undefined}
-        data-checkered={checkered ? '' : undefined}
-        data-pressed={pressed ? '' : undefined}
-        data-scheme={rootTheme.scheme}
-        data-selected={selected ? '' : undefined}
-        data-ui="Card"
-        data-tone={tone}
-        {...restProps}
-        $border={border}
-        $borderTop={borderTop}
-        $borderRight={borderRight}
-        $borderBottom={borderBottom}
-        $borderLeft={borderLeft}
-        $checkered={checkered}
-        $focusRing={focusRing}
-        $radius={radius}
-        $shadow={shadow}
-        $tone={tone}
-        forwardedAs={as}
-        ref={ref}
-        selected={selected}
-      />
-    </ThemeColorProvider>
-  )
-})

package/src/primitives/card/index.ts

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

package/src/primitives/card/styles.ts

@@ -1,148 +0,0 @@
-import {css, FlattenSimpleInterpolation} from 'styled-components'
-import {ThemeProps} from '../../styles'
-import {_colorVarsStyle} from '../../styles/colorVars'
-import {focusRingBorderStyle, focusRingStyle} from '../../styles/focusRing'
-import {CardStyleProps} from './types'
-
-export function cardStyle(
-  props: CardStyleProps & ThemeProps
-): Array<FlattenSimpleInterpolation | (() => FlattenSimpleInterpolation)> {
-  return [cardBaseStyle(props), cardColorStyle(props)]
-}
-
-export function cardBaseStyle(props: CardStyleProps & ThemeProps): FlattenSimpleInterpolation {
-  const {$checkered, theme} = props
-  const space = theme.sanity.space
-
-  return css`
-    ${$checkered &&
-    css`
-      background-size: ${space[3]}px ${space[3]}px;
-      background-position: 50% 50%;
-      background-image: var(--card-bg-image);
-    `}
-
-    &[data-as='button'] {
-      -webkit-font-smoothing: inherit;
-      appearance: none;
-      outline: none;
-      font: inherit;
-      text-align: inherit;
-      border: 0;
-      width: stretch;
-    }
-
-    /* &:is(a) */
-    &[data-as='a'] {
-      outline: none;
-      text-decoration: none;
-    }
-
-    /* &:is(pre) */
-    &[data-as='pre'] {
-      font: inherit;
-    }
-  `
-}
-
-export function cardColorStyle(props: CardStyleProps & ThemeProps): FlattenSimpleInterpolation {
-  const {$checkered, $focusRing, theme} = props
-  const {focusRing} = theme.sanity
-  const {base, card} = theme.sanity.color
-  const border = {width: 0, color: 'var(--card-border-color)'}
-
-  return css`
-    ${_colorVarsStyle(base, card.enabled, $checkered)}
-
-    background-color: var(--card-bg-color);
-    color: var(--card-fg-color);
-
-    /* &:is(button) */
-    &[data-as='button'] {
-      --card-focus-ring-box-shadow: none;
-
-      cursor: default;
-      box-shadow: var(--card-focus-ring-box-shadow);
-
-      &:disabled {
-        ${_colorVarsStyle(base, card.disabled, $checkered)}
-      }
-
-      &:not(:disabled) {
-        &[data-pressed] {
-          ${_colorVarsStyle(base, card.pressed, $checkered)}
-        }
-
-        &[data-selected] {
-          ${_colorVarsStyle(base, card.selected, $checkered)}
-        }
-
-        @media (hover: hover) {
-          &:not([data-pressed]):not([data-selected]) {
-            &:hover {
-              ${_colorVarsStyle(base, card.hovered, $checkered)}
-            }
-
-            &:active {
-              ${_colorVarsStyle(base, card.pressed, $checkered)}
-            }
-          }
-        }
-
-        &:focus {
-          --card-focus-ring-box-shadow: ${$focusRing
-            ? focusRingStyle({base, border, focusRing})
-            : undefined};
-        }
-
-        &:focus:not(:focus-visible) {
-          --card-focus-ring-box-shadow: ${$focusRing ? focusRingBorderStyle(border) : undefined};
-        }
-      }
-    }
-
-    /* &:is(a) */
-    &[data-as='a'] {
-      cursor: pointer;
-      box-shadow: var(--card-focus-ring-box-shadow);
-
-      &[data-disabled] {
-        ${_colorVarsStyle(base, card.disabled, $checkered)}
-      }
-
-      &:not([data-disabled]) {
-        &[data-pressed] {
-          ${_colorVarsStyle(base, card.pressed, $checkered)}
-        }
-
-        &[data-selected] {
-          ${_colorVarsStyle(base, card.selected, $checkered)}
-        }
-
-        @media (hover: hover) {
-          &:not([data-pressed]):not([data-selected]) {
-            &:hover {
-              ${_colorVarsStyle(base, card.hovered, $checkered)}
-            }
-
-            &:active {
-              ${_colorVarsStyle(base, card.pressed, $checkered)}
-            }
-          }
-        }
-
-        &:focus {
-          --card-focus-ring-box-shadow: ${$focusRing
-            ? focusRingStyle({base, border, focusRing})
-            : undefined};
-        }
-
-        &:focus:not(:focus-visible) {
-          --card-focus-ring-box-shadow: ${$focusRing ? focusRingBorderStyle(border) : undefined};
-        }
-      }
-    }
-
-    ${theme.sanity.styles?.card?.root}
-  `
-}

package/src/primitives/card/types.ts

@@ -1,10 +0,0 @@
-import {ThemeColorToneKey} from '../../theme'
-
-/**
- * @internal
- */
-export interface CardStyleProps {
-  $checkered: boolean
-  $focusRing: boolean
-  $tone: ThemeColorToneKey
-}

package/src/primitives/checkbox/__workshop__/.eslintrc

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

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

@@ -1,23 +0,0 @@
-import {Box, Checkbox, Flex, Text} from '@sanity/ui'
-import React, {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={3}>
-          <Text>Label</Text>
-        </Box>
-      </Flex>
-    </Flex>
-  )
-}

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

@@ -1,9 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope('primitives/checkbox', 'Checkbox', [
-  {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-  {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
-  {name: 'read-only', title: 'Read-only', component: lazy(() => import('./readOnly'))},
-  {name: 'multiple-tones', title: 'Multiple tones', component: lazy(() => import('./tones'))},
-])

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

@@ -1,32 +0,0 @@
-import {Box, Checkbox, Flex, Text} from '@sanity/ui'
-import {useAction, useBoolean} from '@sanity/ui-workshop'
-import React from 'react'
-
-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={3}>
-          <Text>Label</Text>
-        </Box>
-      </Flex>
-    </Flex>
-  )
-}

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

@@ -1,15 +0,0 @@
-import {Box, Checkbox, Flex, Text} from '@sanity/ui'
-import React from 'react'
-
-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={3}>
-          <Text>Label</Text>
-        </Box>
-      </Flex>
-    </Flex>
-  )
-}

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

@@ -1,23 +0,0 @@
-import {Card, Checkbox, Flex, Stack} from '@sanity/ui'
-import React from 'react'
-
-export default function MultipleTonesStory() {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Stack>
-        <Card padding={3} tone="primary">
-          <Checkbox />
-        </Card>
-        <Card padding={3} tone="positive">
-          <Checkbox />
-        </Card>
-        <Card padding={3} tone="caution">
-          <Checkbox />
-        </Card>
-        <Card padding={3} tone="critical">
-          <Checkbox />
-        </Card>
-      </Stack>
-    </Flex>
-  )
-}