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

package/src/core/primitives/heading/heading.tsx

@@ -1,82 +0,0 @@
-import {composeClassNames, FontStyleProps, heading, ResponsiveProp} from '@sanity/ui/css'
-import {FontHeadingSize} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
-import {styled} from '../../lib/styled'
-
-/**
- * @public
- */
-export interface HeadingProps extends FontStyleProps {
-  accent?: boolean
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  muted?: boolean
-  size?: ResponsiveProp<FontHeadingSize>
-  /**
-   * 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'
-}
-
-// todo
-const SpanWithTextOverflow = styled.span`
-  display: block;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  overflow: clip;
-`
-
-/**
- * Typographic headings.
- *
- * @public
- */
-export const Heading = forwardRef(function Heading(
-  props: HeadingProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLElement>,
-) {
-  const {
-    accent = false,
-    align,
-    as: As = 'div',
-    children: childrenProp,
-    className,
-    muted = false,
-    size = 2,
-    textOverflow,
-    weight,
-    ...restProps
-  } = props
-
-  let children = childrenProp
-
-  if (textOverflow === 'ellipsis') {
-    children = <SpanWithTextOverflow>{children}</SpanWithTextOverflow>
-  }
-
-  return (
-    <As
-      data-ui="Heading"
-      {...restProps}
-      // todo
-      // $align={useArrayProp(align)}
-      className={composeClassNames(
-        className,
-        heading({
-          accent,
-          align,
-          muted,
-          size,
-          weight,
-        }),
-      )}
-      ref={ref}
-    >
-      <span>{children}</span>
-    </As>
-  )
-})
-
-Heading.displayName = 'ForwardRef(Heading)'

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

@@ -1,63 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {ThemeProps} from '../../_compat'
-import {css} from '../../lib/styled'
-import {HeadingStyleProps} from './types'
-
-export function headingBaseStyle(props: HeadingStyleProps & ThemeProps): ReturnType<typeof css> {
-  const {$accent, $muted} = props
-  const {font} = getTheme_v2(props.theme)
-
-  return css`
-    ${$accent &&
-    css`
-      color: var(--card-accent-fg-color);
-    `}
-
-    ${$muted &&
-    css`
-      color: var(--card-muted-fg-color);
-    `}
-
-    & code {
-      font-family: ${font.code.family};
-      border-radius: 1px;
-    }
-
-    & 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: ${font.heading.weights.bold};
-    }
-
-    & svg {
-      /* Certain popular CSS libraries changes the defaults for SVG display */
-      /* Make sure SVGs are rendered as inline elements */
-      display: inline;
-    }
-
-    & [data-sanity-icon] {
-      vertical-align: baseline;
-    }
-  `
-}

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

@@ -1,7 +0,0 @@
-/**
- * @internal
- */
-export interface HeadingStyleProps {
-  $accent: boolean
-  $muted: boolean
-}

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

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

package/src/core/primitives/inline/__workshop__/plain.tsx

@@ -1,26 +0,0 @@
-import {Card, Flex, Inline, Text} from '@sanity/ui'
-import {useAction, useSelect} from '@sanity/ui-workshop'
-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">
-      <Inline
-        onClick={useAction('onClick')}
-        space={useSelect('Space', WORKSHOP_SPACE_OPTIONS, 0, 'Props')}
-      >
-        <Card padding={1} shadow={1}>
-          <Text>Inline item</Text>
-        </Card>
-
-        <Card padding={2} shadow={1}>
-          <Text>Inline item</Text>
-        </Card>
-
-        <Card padding={3} shadow={1}>
-          <Text>Inline item</Text>
-        </Card>
-      </Inline>
-    </Flex>
-  )
-}

package/src/core/primitives/inline/inline.tsx

@@ -1,47 +0,0 @@
-import {ResponsiveProp} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
-import {forwardRef, useMemo, Children, ForwardedRef} from 'react'
-import {Box, BoxProps} from '../box'
-
-/**
- * @public
- */
-export interface InlineProps
-  extends Omit<BoxProps, 'align' | 'display' | 'gap' | 'gapX' | 'gapY' | 'justify'> {
-  /** The spacing between children. */
-  space?: ResponsiveProp<Space>
-}
-
-/**
- * The `Inline` component is a layout utility for aligning and spacing items horizontally.
- *
- * @public
- */
-export const Inline = forwardRef(function Inline(
-  props: InlineProps & Omit<React.HTMLProps<HTMLDivElement>, 'wrap'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {as, children: childrenProp, space, ...restProps} = props
-
-  const children = useMemo(
-    () => Children.map(childrenProp, (child) => child && <Box maxWidth="fill">{child}</Box>),
-    [childrenProp],
-  )
-
-  return (
-    <Box
-      data-ui="Inline"
-      {...restProps}
-      align="center"
-      as={as}
-      display="flex"
-      gap={space}
-      ref={ref}
-      wrap="wrap"
-    >
-      {children}
-    </Box>
-  )
-})
-
-Inline.displayName = 'ForwardRef(Inline)'

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

@@ -1,31 +0,0 @@
-import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {rem, _responsive, ThemeProps} from '../../_compat'
-import {ResponsiveInlineSpaceStyleProps} from './types'
-
-export function inlineBaseStyle(): CSSObject {
-  return {
-    'lineHeight': 0,
-
-    '&&:not([hidden])': {
-      display: 'block',
-    },
-
-    '& > div': {
-      display: 'inline-block',
-      verticalAlign: 'middle',
-    },
-  }
-}
-
-export function inlineSpaceStyle(props: ResponsiveInlineSpaceStyleProps & ThemeProps): CSSObject[] {
-  const {media, space} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$space, (spaceIndex) => {
-    const _space = rem(spaceIndex === 0.5 ? space[1] / 2 : space[spaceIndex])
-
-    return {
-      'margin': `-${_space} 0 0 -${_space}`,
-      '& > div': {padding: `${_space} 0 0 ${_space}`},
-    }
-  })
-}

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

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

package/src/core/primitives/kbd/kbd.tsx

@@ -1,53 +0,0 @@
-import {composeClassNames, kbd, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
-import {FontTextSize, Space} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
-import {Box, BoxProps} from '../box'
-import {Text} from '../text'
-
-/**
- * @public
- */
-export interface KBDProps extends BoxProps, RadiusStyleProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  fontSize?: ResponsiveProp<FontTextSize>
-  padding?: ResponsiveProp<Space>
-}
-
-/**
- * Used to define some text as keyboard input.
- *
- * @public
- */
-export const KBD = forwardRef(function KBD(
-  props: KBDProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    as = 'kbd',
-    children,
-    className,
-    display = 'inline-block',
-    fontSize = 0,
-    padding = 1,
-    radius = 2,
-    ...restProps
-  } = props
-
-  return (
-    <Box
-      data-ui="KBD"
-      {...restProps}
-      as={as}
-      className={composeClassNames(className, kbd({radius}))}
-      display={display}
-      padding={padding}
-      ref={ref}
-    >
-      <Text as="span" size={fontSize} weight="semibold">
-        {children}
-      </Text>
-    </Box>
-  )
-})
-
-KBD.displayName = 'ForwardRef(KBD)'

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

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

package/src/core/primitives/label/__workshop__/opticalAlignment.tsx

@@ -1,48 +0,0 @@
-import {AddCircleIcon} from '@sanity/icons'
-import {Box, Card, Flex, Label, Stack} from '@sanity/ui'
-
-export default function OpticalAlignment() {
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Stack space={1}>
-        <Flex>
-          <Card padding={0} scheme="dark">
-            <Label size={4}>Hamburgefonstiv M</Label>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} scheme="dark">
-            <Label size={3}>Hamburgefonstiv M</Label>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} scheme="dark">
-            <Label size={2}>Hamburgefonstiv M</Label>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} scheme="dark">
-            <Label size={1}>Hamburgefonstiv M</Label>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} scheme="dark">
-            <Label size={0}>Hamburgefonstiv M</Label>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={2} scheme="dark">
-            <Label>
-              <AddCircleIcon />
-            </Label>
-          </Card>
-        </Flex>
-      </Stack>
-    </Box>
-  )
-}

package/src/core/primitives/label/__workshop__/plain.tsx

@@ -1,23 +0,0 @@
-import {Flex, Label} from '@sanity/ui'
-import {useSelect, useText} from '@sanity/ui-workshop'
-import {
-  WORKSHOP_LABEL_FONT_SIZE_OPTIONS,
-  WORKSHOP_FONT_WEIGHT_OPTIONS,
-  WORKSHOP_TEXT_OVERFLOW_OPTIONS,
-} from '../../../__workshop__/constants'
-
-export default function PlainStory() {
-  const size = useSelect('Size', WORKSHOP_LABEL_FONT_SIZE_OPTIONS, undefined, 'Props')
-  const textChild = useText('Text', 'Label text', 'Props')
-  const textOverflow =
-    useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS, '', 'Props') || undefined
-  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, undefined, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Label size={size} textOverflow={textOverflow} weight={weight}>
-        {textChild}
-      </Label>
-    </Flex>
-  )
-}

package/src/core/primitives/label/label.tsx

@@ -1,91 +0,0 @@
-import {composeClassNames, FontStyleProps, label} from '@sanity/ui/css'
-import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
-import {responsiveLabelFont, responsiveTextAlignStyle} from '../../_compat/styles/internal'
-import {styled} from '../../lib/styled'
-import {TextAlign} from '../../types'
-import {labelBaseStyle} from './styles'
-
-/**
- * @public
- */
-export interface LabelProps extends FontStyleProps {
-  accent?: boolean
-  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<{
-  $accent?: boolean
-  $align: TextAlign[]
-  $muted: boolean
-  $size: number[]
-}>(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle)
-
-const SpanWithTextOverflow = styled.span`
-  display: block;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  overflow: clip;
-`
-
-/**
- * Typographic labels.
- *
- * @public
- */
-export const Label = forwardRef(function Label(
-  props: LabelProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    accent,
-    align,
-    children: childrenProp,
-    className,
-    muted = false,
-    size = 2,
-    textOverflow,
-    weight,
-    ...restProps
-  } = props
-
-  let children = childrenProp
-
-  if (textOverflow === 'ellipsis') {
-    children = <SpanWithTextOverflow>{children}</SpanWithTextOverflow>
-  } else {
-    children = <span>{children}</span>
-  }
-
-  return (
-    <Root
-      data-ui="Label"
-      {...restProps}
-      $weight={weight}
-      className={composeClassNames(
-        className,
-        label({
-          accent,
-          align,
-          muted,
-          size,
-        }),
-      )}
-      ref={ref}
-    >
-      {children}
-    </Root>
-  )
-})
-
-Label.displayName = 'ForwardRef(Label)'

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

@@ -1,44 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {ThemeProps} from '../../_compat'
-import {css} from '../../lib/styled'
-
-export function labelBaseStyle(
-  props: {$accent?: boolean; $muted: boolean} & ThemeProps,
-): ReturnType<typeof css> {
-  const {$accent, $muted} = props
-  const {font} = getTheme_v2(props.theme)
-
-  return css`
-    text-transform: uppercase;
-
-    ${$accent &&
-    css`
-      color: var(--card-accent-fg-color);
-    `}
-
-    ${$muted &&
-    css`
-      color: var(--card-muted-fg-color);
-    `}
-
-    & code {
-      font-family: ${font.code.family};
-      border-radius: 1px;
-    }
-
-    & a {
-      text-decoration: none;
-      border-radius: 1px;
-    }
-
-    & svg {
-      /* Certain popular CSS libraries changes the defaults for SVG display */
-      /* Make sure SVGs are rendered as inline elements */
-      display: inline;
-    }
-
-    & [data-sanity-icon] {
-      vertical-align: baseline;
-    }
-  `
-}

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

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

package/src/core/primitives/popover/__workshop__/AlignedStory.tsx

@@ -1,76 +0,0 @@
-import {EllipsisVerticalIcon} from '@sanity/icons'
-import {Button, Card, Flex, Popover, Text, useClickOutsideEvent} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import {useCallback, useRef, useState} from 'react'
-import {
-  WORKSHOP_FLEX_ALIGN_OPTIONS,
-  WORKSHOP_FLEX_JUSTIFY_OPTIONS,
-  WORKSHOP_PLACEMENT_OPTIONS,
-  WORKSHOP_WIDTH_OPTIONS,
-} from '../../../__workshop__/constants'
-
-export default function AlignedStory() {
-  const constrainSize = useBoolean('Constrain size', false)
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
-  const portal = useBoolean('Portal', true)
-  const width = useSelect('Width', WORKSHOP_WIDTH_OPTIONS, 'auto')
-
-  const flexAlign = useSelect('Align', WORKSHOP_FLEX_ALIGN_OPTIONS, 'flex-start')
-  const flexJustify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'flex-end')
-
-  const [open, setOpen] = useState(false)
-  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-  const buttonElementRef = useRef<HTMLButtonElement | null>(null)
-  const popoverElementRef = useRef<HTMLDivElement | null>(null)
-
-  const content = (
-    <Text>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at nisl at sem tempor
-      hendrerit scelerisque ut libero. Maecenas iaculis efficitur lorem, ac faucibus mi imperdiet
-      quis. Cras a consectetur erat. Fusce imperdiet, dolor et pellentesque iaculis, ex quam luctus
-      felis, non ultrices enim sem vitae quam. Duis lorem velit, lacinia at rhoncus a, tempus vel
-      neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
-      Sed id mauris quam. Nam finibus sapien non lacinia ultricies. Integer fermentum tortor at
-      pellentesque faucibus. In venenatis commodo placerat. Curabitur commodo tortor libero, vel
-      pellentesque elit luctus sodales. Donec mattis tristique nunc ac lacinia. Vestibulum non
-      pulvinar turpis, posuere consequat arcu. Fusce ut urna blandit, finibus nisi a, molestie elit.
-      Nulla sed eleifend mi.
-    </Text>
-  )
-
-  const handleToggleOpen = useCallback(() => setOpen((v) => !v), [])
-
-  useClickOutsideEvent(
-    () => setOpen(false),
-    () => [buttonElementRef.current, popoverElementRef.current],
-  )
-
-  return (
-    <Card height="fill" padding={[4, 5, 6]} sizing="border" tone="transparent">
-      <Card height="fill" padding={2} ref={setBoundaryElement} shadow={1} sizing="border">
-        <Flex align={flexAlign} height="fill" justify={flexJustify}>
-          <Popover
-            boundaryElement={boundaryElement}
-            constrainSize={constrainSize}
-            content={content}
-            open={open}
-            overflow="auto"
-            padding={3}
-            portal={portal}
-            placement={placement}
-            ref={popoverElementRef}
-            width={width}
-          >
-            <Button
-              icon={EllipsisVerticalIcon}
-              mode="bleed"
-              onClick={handleToggleOpen}
-              ref={buttonElementRef}
-              selected={open}
-            />
-          </Popover>
-        </Flex>
-      </Card>
-    </Card>
-  )
-}

package/src/core/primitives/popover/__workshop__/MatchReferenceWidthStory.tsx

@@ -1,31 +0,0 @@
-import {Box, Button, Container, Flex, Popover, Stack, Text} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
-
-export default function MatchReferenceWidthStory() {
-  const arrow = useBoolean('Arrow', true, 'Props')
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom', 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Popover
-        arrow={arrow}
-        content={
-          <Box padding={2}>
-            <Text>Content</Text>
-          </Box>
-        }
-        matchReferenceWidth
-        open
-        placement={placement}
-        radius={2}
-      >
-        <Container width={0}>
-          <Stack>
-            <Button fontSize={3} text="Button" />
-          </Stack>
-        </Container>
-      </Popover>
-    </Flex>
-  )
-}

package/src/core/primitives/popover/__workshop__/OpenOnMountStory.tsx

@@ -1,11 +0,0 @@
-import {Button, Card, Popover, Text} from '@sanity/ui'
-
-export default function OpenOnMountStory() {
-  return (
-    <Card height="fill" padding={3} sizing="border">
-      <Popover content={<Text>popover content</Text>} open padding={3}>
-        <Button text="This button is the popover reference" />
-      </Popover>
-    </Card>
-  )
-}