@sanity/ui 3.0.0-static.1 → 3.0.0-static.11

package/src/core/primitives/button/styles.ts

@@ -1,116 +0,0 @@
-import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {ThemeProps} from '../../_compat'
-import {_cardColorStyle} from '../../_compat/styles/card'
-import {focusRingBorderStyle, focusRingStyle} from '../../_compat/styles/internal'
-import {css} from '../../lib/styled'
-import {ButtonMode, ButtonTone, ButtonWidth} from '../../types'
-
-/**
- * @internal
- */
-export function buttonBaseStyles(
-  props: {$width?: ButtonWidth} & ThemeProps,
-): ReturnType<typeof css> {
-  const {$width} = props
-  const {style} = getTheme_v2(props.theme)
-
-  return css`
-    ${style?.button};
-
-    -webkit-font-smoothing: inherit;
-    appearance: none;
-    display: inline-flex;
-    align-items: center;
-    font: inherit;
-    border: 0;
-    outline: none;
-    user-select: none;
-    text-decoration: none;
-    border: 0;
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    white-space: nowrap;
-    text-align: left;
-    position: relative;
-    vertical-align: top;
-
-    ${$width === 'fill' &&
-    css`
-      width: -moz-available;
-      width: -webkit-fill-available;
-      width: stretch;
-    `}
-
-    & > span {
-      display: block;
-      flex: 1;
-      min-width: 0;
-      border-radius: inherit;
-    }
-
-    &::-moz-focus-inner {
-      border: 0;
-      padding: 0;
-    }
-  `
-}
-
-function combineBoxShadow(...boxShadows: (string | undefined)[]): string {
-  return boxShadows.filter(Boolean).join(',')
-}
-
-/**
- * @internal
- */
-export function buttonColorStyles(
-  props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps,
-): CSSObject[] {
-  const {$mode} = props
-  const {button, color: baseColor, style} = getTheme_v2(props.theme)
-  const shadow = props.$mode === 'ghost'
-  const mode = baseColor.button[$mode] || baseColor.button.default
-  const color = mode[props.$tone] || mode.default
-  const border = {
-    width: button.border.width,
-    color: 'var(--card-border-color)',
-  }
-  // const defaultBoxShadow = `inset 0px -1.5px 0px ${buttonTheme.border.width}px color-mix(in srgb, var(--card-border-color) 25%, var(--card-bg-color))`
-  const defaultBoxShadow = undefined
-
-  return [
-    _cardColorStyle(baseColor, color.enabled),
-    {
-      'backgroundColor': 'var(--card-bg-color)',
-      'color': 'var(--card-fg-color)',
-      'boxShadow': focusRingBorderStyle(border),
-      '&:disabled, &[data-disabled="true"]': _cardColorStyle(baseColor, color.disabled),
-      "&:not([data-disabled='true'])": {
-        'boxShadow': combineBoxShadow(
-          focusRingBorderStyle(border),
-          shadow ? defaultBoxShadow : undefined,
-        ),
-        '&:focus': {
-          boxShadow: focusRingStyle({
-            base: baseColor,
-            border: {width: 2, color: baseColor.bg},
-            focusRing: button.focusRing,
-          }),
-        },
-        '&:focus:not(:focus-visible)': {
-          boxShadow: combineBoxShadow(
-            focusRingBorderStyle(border),
-            shadow ? defaultBoxShadow : undefined,
-          ),
-        },
-        '@media (hover: hover)': {
-          '&:hover': _cardColorStyle(baseColor, color.hovered),
-          '&:active': _cardColorStyle(baseColor, color.pressed),
-          '&[data-hovered]': _cardColorStyle(baseColor, color.hovered),
-        },
-        '&[data-selected]': _cardColorStyle(baseColor, color.pressed),
-      },
-    },
-    style?.button?.root,
-  ].filter(Boolean) as CSSObject[]
-}

package/src/core/primitives/card/RootCardContext.ts

@@ -1,3 +0,0 @@
-import {createContext} from 'react'
-
-export const RootCardContext = createContext<{renderedVars: boolean} | null>(null)

package/src/core/primitives/card/__workshop__/.eslintrc

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

package/src/core/primitives/card/__workshop__/allTones.tsx

@@ -1,27 +0,0 @@
-import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function AllTonesStory() {
-  const tones = Object.entries(WORKSHOP_CARD_TONE_OPTIONS)
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container width={0}>
-        <Stack space={5}>
-          {tones.map(([title, tone]) => (
-            <Card
-              key={tone}
-              padding={4}
-              radius={2}
-              shadow={4}
-              style={{textAlign: 'center'}}
-              tone={tone}
-            >
-              <Text>{title}</Text>
-            </Card>
-          ))}
-        </Stack>
-      </Container>
-    </Flex>
-  )
-}

package/src/core/primitives/card/__workshop__/asButton.tsx

@@ -1,88 +0,0 @@
-import {Box, Card, Container, Flex, Grid, Stack, Text} from '@sanity/ui'
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function AsButtonStory() {
-  const tones = Object.entries(WORKSHOP_CARD_TONE_OPTIONS)
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container>
-        <Grid columns={3} gap={2}>
-          <Box>
-            <Text align="center" size={1} weight="medium">
-              Enabled
-            </Text>
-            <Stack marginTop={3} space={2}>
-              {tones.map(([title, tone]) => (
-                <Card
-                  __unstable_focusRing
-                  as="button"
-                  key={tone}
-                  padding={4}
-                  style={{textAlign: 'center'}}
-                  tone={tone}
-                >
-                  <Stack space={2}>
-                    <Text weight="medium">{title}</Text>
-                    <Text muted>Muted</Text>
-                    <Text accent>Accent</Text>
-                  </Stack>
-                </Card>
-              ))}
-            </Stack>
-          </Box>
-
-          <Box>
-            <Text align="center" size={1} weight="medium">
-              Disabled
-            </Text>
-            <Stack marginTop={3} space={2}>
-              {tones.map(([title, tone]) => (
-                <Card
-                  __unstable_focusRing
-                  as="button"
-                  disabled
-                  key={tone}
-                  padding={4}
-                  style={{textAlign: 'center'}}
-                  tone={tone}
-                >
-                  <Stack space={2}>
-                    <Text weight="medium">{title}</Text>
-                    <Text muted>Muted</Text>
-                    <Text accent>Accent</Text>
-                  </Stack>
-                </Card>
-              ))}
-            </Stack>
-          </Box>
-
-          <Box>
-            <Text align="center" size={1} weight="medium">
-              Selected
-            </Text>
-            <Stack marginTop={3} space={2}>
-              {tones.map(([title, tone]) => (
-                <div aria-selected key={tone}>
-                  <Card
-                    __unstable_focusRing
-                    as="button"
-                    padding={4}
-                    style={{textAlign: 'center'}}
-                    tone={tone}
-                  >
-                    <Stack space={2}>
-                      <Text weight="medium">{title}</Text>
-                      <Text muted>Muted</Text>
-                      <Text accent>Accent</Text>
-                    </Stack>
-                  </Card>
-                </div>
-              ))}
-            </Stack>
-          </Box>
-        </Grid>
-      </Container>
-    </Flex>
-  )
-}

package/src/core/primitives/card/__workshop__/asComponent.tsx

@@ -1,27 +0,0 @@
-import {Card, Flex, Text} from '@sanity/ui'
-import {forwardRef} from 'react'
-
-const CustomLink = forwardRef(function CustomLink(
-  props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
-  ref: React.ForwardedRef<HTMLAnchorElement>,
-): React.ReactElement {
-  const {children, req, ...restProps} = props
-
-  return (
-    <a data-required={req} {...restProps} ref={ref}>
-      {children}
-    </a>
-  )
-})
-
-export default function AsComponentStory() {
-  const props = {href: '#'}
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Card as={CustomLink} data-as="a" {...props} padding={3}>
-        <Text>As component</Text>
-      </Card>
-    </Flex>
-  )
-}

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

@@ -1,16 +0,0 @@
-import {Card, Flex, Stack} from '@sanity/ui'
-
-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/core/primitives/card/__workshop__/interactive.tsx

@@ -1,23 +0,0 @@
-import {Card, Flex, Stack, Text} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-
-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/core/primitives/card/__workshop__/listNavigation.tsx

@@ -1,77 +0,0 @@
-import {Box, Card, Flex, Skeleton, Text} from '@sanity/ui'
-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/core/primitives/card/__workshop__/props.tsx

@@ -1,49 +0,0 @@
-import {Card, Flex, Radius, Stack, Text} from '@sanity/ui'
-import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
-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 muted = useBoolean('Muted', 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}
-        muted={muted}
-        onClick={useAction('onClick')}
-        padding={padding}
-        radius={radius as 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/core/primitives/card/__workshop__/selected.tsx

@@ -1,91 +0,0 @@
-import {EditIcon, PublishIcon} from '@sanity/icons'
-import {Box, Card, Container, Flex, Inline, Stack, Text, ThemeProps, useRootTheme} from '@sanity/ui'
-import {ThemeColorStateToneKey, getTheme_v2} from '@sanity/ui/theme'
-import {useBoolean} from '@sanity/ui-workshop'
-import {styled, css} from 'styled-components'
-
-const TextWithTone = styled(Text)<{$tone: ThemeColorStateToneKey}>((
-  props: {
-    $tone: ThemeColorStateToneKey
-  } & ThemeProps,
-) => {
-  const {$tone} = props
-  const {color} = getTheme_v2(props.theme)
-  const tone = color.button.default[$tone]
-
-  return css`
-    &:not([data-selected]) {
-      --card-fg-color: ${tone.enabled.bg};
-      --card-muted-fg-color: ${tone.enabled.bg};
-    }
-
-    [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 rootTheme = useRootTheme()
-
-  return (
-    <Flex>
-      <Box flex={1}>
-        <Text>Title</Text>
-      </Box>
-      <Inline space={3}>
-        <TextWithTone
-          data-selected={selected ? '' : undefined}
-          muted
-          $tone={rootTheme.tone === 'default' ? 'caution' : 'default'}
-        >
-          <EditIcon />
-        </TextWithTone>
-        <TextWithTone
-          data-selected={selected ? '' : undefined}
-          muted
-          $tone={rootTheme.tone === 'default' ? 'positive' : 'default'}
-        >
-          <PublishIcon />
-        </TextWithTone>
-      </Inline>
-    </Flex>
-  )
-}

package/src/core/primitives/card/card.tsx

@@ -1,110 +0,0 @@
-import {card, CardStyleProps, composeClassNames} from '@sanity/ui/css'
-import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {forwardRef, useContext} from 'react'
-import {isValidElementType} from 'react-is'
-import {ThemeColorProvider, useRootTheme} from '../../theme'
-import {CardTone} from '../../types'
-import {Box, BoxProps} from '../box'
-import {RootCardContext} from './RootCardContext'
-
-/**
- * @public
- */
-export interface CardProps extends BoxProps, CardStyleProps {
-  /**
-   * Do not use in production.
-   * @beta
-   */
-  __unstable_checkered?: boolean
-  /**
-   * Do not use in production.
-   * @beta
-   */
-  __unstable_focusRing?: boolean
-  muted?: boolean
-  pressed?: boolean
-  scheme?: ThemeColorSchemeKey
-  tone?: CardTone
-}
-
-/**
- * The `Card` component acts much like a `Box`, but with a background and foreground color.
- * Components within a `Card` inherit its colors.
- *
- * @public
- */
-export const Card = forwardRef(function Card(
-  props: CardProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width' | 'wrap'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    __unstable_checkered: checkered = false,
-    __unstable_focusRing: focusRing = false,
-    as: asProp,
-    border,
-    borderTop,
-    borderRight,
-    borderBottom,
-    borderLeft,
-    className,
-    muted,
-    pressed,
-    radius = 0,
-    scheme,
-    selected,
-    shadow,
-    style,
-    tone: toneProp = 'default',
-    ...restProps
-  } = props
-
-  const as = isValidElementType(asProp) ? asProp : 'div'
-  const rootCard = useContext(RootCardContext)
-  const rootTheme = useRootTheme()
-
-  const tone = toneProp === 'inherit' ? rootTheme.tone : toneProp
-
-  // todo: Consider adding the wrapper approach for nested cards in which the tones are not
-  // changing, avoid unnecessary ThemeColorProvider
-  const node = (
-    <ThemeColorProvider scheme={scheme} tone={tone}>
-      <Box
-        data-as={typeof as === 'string' ? as : undefined}
-        data-scheme={rootTheme.scheme}
-        data-ui="Card"
-        data-tone={tone}
-        {...restProps}
-        as={as}
-        className={composeClassNames(
-          className,
-          // rootCard ? undefined : 'root',
-          card({
-            border,
-            borderTop,
-            borderRight,
-            borderBottom,
-            borderLeft,
-            radius,
-            shadow,
-          }),
-        )}
-        data-checkered={checkered ? '' : undefined}
-        data-focus-ring={focusRing ? '' : undefined}
-        data-muted={muted ? '' : undefined}
-        data-pressed={pressed ? '' : undefined}
-        data-selected={selected ? '' : undefined}
-        ref={ref}
-        selected={selected}
-        style={style}
-      />
-    </ThemeColorProvider>
-  )
-
-  if (!rootCard) {
-    return <RootCardContext.Provider value={{renderedVars: true}}>{node}</RootCardContext.Provider>
-  }
-
-  return node
-})
-
-Card.displayName = 'ForwardRef(Card)'

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

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

package/src/core/primitives/card/types.ts

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

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

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

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

@@ -1,22 +0,0 @@
-import {Card, Checkbox, Flex, Stack} from '@sanity/ui'
-
-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>
-  )
-}