@sanity/ui 0.37.3 → 0.37.4

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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,78 @@
+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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,98 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,104 @@
+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

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

package/src/primitives/card/styles.ts

@@ -0,0 +1,148 @@
+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

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

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

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

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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,23 @@
+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>
+  )
+}