@sanity/ui 3.0.0-static.3 → 3.0.0-static.30

package/src/ui/primitives/container/index.ts

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

package/src/ui/primitives/flex/__workshop__/example.tsx

@@ -1,34 +0,0 @@
-import {Card, Code, Flex} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-import {styled} from 'styled-components'
-
-import {WORKSHOP_FLEX_DIRECTION_OPTIONS} from '../../../../../workshop/constants'
-
-const DebugCard = styled(Card)`
-  outline: 1px solid red;
-  &:not([hidden]) {
-    display: flex;
-  }
-  align-items: center;
-  justify-content: center;
-`
-
-export default function ExampleStory() {
-  const direction = useSelect('Direction', WORKSHOP_FLEX_DIRECTION_OPTIONS, 'row', 'Props')
-
-  return (
-    <Flex direction={direction} height="fill" style={{width: '100%'}}>
-      <DebugCard flex={1}>
-        <Code size={1}>1</Code>
-      </DebugCard>
-
-      <DebugCard flex={[1, 2, 3]}>
-        <Code size={1}>[1,2,3]</Code>
-      </DebugCard>
-
-      <DebugCard flex={['none', 'none', 1]}>
-        <Code size={1}>['none', 'none', 1]</Code>
-      </DebugCard>
-    </Flex>
-  )
-}

package/src/ui/primitives/flex/flex.tsx

@@ -1,29 +0,0 @@
-import {ForwardedRef, forwardRef} from 'react'
-
-import {Props} from '../../types'
-import {Box, BoxProps} from '../box'
-
-/**
- * @public
- */
-export interface FlexProps extends Omit<BoxProps, 'display'> {
-  htmlFor?: string
-}
-
-/**
- * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
- *
- * @public
- */
-export const Flex = forwardRef(function Flex(
-  props: Props<FlexProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {as, direction = 'row', ...restProps} = props
-
-  return (
-    <Box data-ui="Flex" {...restProps} as={as} direction={direction} display="flex" ref={ref} />
-  )
-})
-
-Flex.displayName = 'ForwardRef(Flex)'

package/src/ui/primitives/flex/index.ts

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

package/src/ui/primitives/grid/grid.tsx

@@ -1,30 +0,0 @@
-import {ForwardedRef, forwardRef} from 'react'
-
-import {Props} from '../../types'
-import {Box, BoxProps} from '../box'
-
-/**
- * @public
- */
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface GridProps extends Omit<BoxProps, 'display'> {}
-
-/**
- * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
- *
- * @public
- */
-export const Grid = forwardRef(function Grid(
-  props: Props<GridProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {as, children, ...restProps} = props
-
-  return (
-    <Box data-ui="Grid" {...restProps} as={as} display="grid" ref={ref}>
-      {children}
-    </Box>
-  )
-})
-
-Grid.displayName = 'ForwardRef(Grid)'

package/src/ui/primitives/grid/index.ts

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

package/src/ui/primitives/heading/__workshop__/opticalAlignment.tsx

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

package/src/ui/primitives/heading/__workshop__/plain.tsx

@@ -1,32 +0,0 @@
-import {Flex, Heading} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-
-import {
-  WORKSHOP_FONT_WEIGHT_OPTIONS,
-  WORKSHOP_HEADING_FONT_SIZE_OPTIONS,
-  WORKSHOP_TEXT_OVERFLOW_OPTIONS,
-} from '../../../../../workshop/constants'
-
-export default function PlainStory() {
-  const accent = useBoolean('Accent', false, 'Props')
-  const muted = useBoolean('Muted', false, 'Props')
-  const size = useSelect('Size', WORKSHOP_HEADING_FONT_SIZE_OPTIONS, 2, 'Props')
-  const textChild = useText('Text', 'Hello, world', 'Props')
-  const textOverflow =
-    useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS, '', 'Props') || undefined
-  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, '', 'Props') || undefined
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Heading
-        accent={accent}
-        muted={muted}
-        size={size}
-        textOverflow={textOverflow}
-        weight={weight}
-      >
-        {textChild}
-      </Heading>
-    </Flex>
-  )
-}

package/src/ui/primitives/heading/heading.tsx

@@ -1,62 +0,0 @@
-import {
-  composeClassNames,
-  heading,
-  type HeadingStyleProps,
-  textOverflow,
-  type TextOverflowStyleProps,
-} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
-
-import {Props} from '../../types'
-
-/**
- * @public
- */
-export interface HeadingProps extends HeadingStyleProps, TextOverflowStyleProps {}
-
-/**
- * Typographic headings.
- *
- * @public
- */
-export const Heading = forwardRef(function Heading(
-  props: Props<HeadingProps, 'div'>,
-  ref: ForwardedRef<HTMLElement>,
-) {
-  const {
-    accent = false,
-    align,
-    as: As = 'div',
-    children,
-    className,
-    flex,
-    muted = false,
-    size = 1,
-    textOverflow: textOverflowProp,
-    weight,
-    ...restProps
-  } = props
-
-  return (
-    <As
-      data-ui="Heading"
-      {...restProps}
-      className={composeClassNames(
-        className,
-        heading({
-          accent,
-          align,
-          flex,
-          muted,
-          size,
-          weight,
-        }),
-      )}
-      ref={ref}
-    >
-      <span className={textOverflow({textOverflow: textOverflowProp})}>{children}</span>
-    </As>
-  )
-})
-
-Heading.displayName = 'ForwardRef(Heading)'

package/src/ui/primitives/heading/index.ts

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

package/src/ui/primitives/index.ts

@@ -1,27 +0,0 @@
-export * from './avatar'
-export * from './badge'
-export * from './box'
-export * from './button'
-export * from './card'
-export * from './checkbox'
-export * from './code'
-export * from './container'
-export * from './flex'
-export * from './grid'
-export * from './heading'
-export * from './inline'
-export * from './kbd'
-export * from './label'
-export * from './popover'
-export * from './radio'
-export * from './select'
-export * from './spinner'
-export * from './stack'
-export * from './switch'
-export * from './text'
-export * from './textArea'
-export * from './textInput'
-export * from './tooltip'
-
-// Types
-export * from './types'

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

@@ -1,27 +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 size={1}>Inline item</Text>
-        </Card>
-
-        <Card padding={2} shadow={1}>
-          <Text size={1}>Inline item</Text>
-        </Card>
-
-        <Card padding={3} shadow={1}>
-          <Text size={1}>Inline item</Text>
-        </Card>
-      </Inline>
-    </Flex>
-  )
-}

package/src/ui/primitives/inline/index.ts

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

package/src/ui/primitives/inline/inline.tsx

@@ -1,50 +0,0 @@
-import {ResponsiveProp} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
-import {Children, ForwardedRef, forwardRef, useMemo} from 'react'
-
-import {Props} from '../../types'
-import {Box, BoxProps} from '../box'
-
-/**
- * @public
- */
-export interface InlineProps extends Omit<BoxProps, 'align' | 'display' | 'justify'> {
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
-}
-
-/**
- * The `Inline` component is a layout utility for aligning and spacing items horizontally.
- *
- * @public
- */
-export const Inline = forwardRef(function Inline(
-  props: Props<InlineProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {as, children: childrenProp, gap, gapX, gapY, 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={gap ?? space}
-      gapX={gapX}
-      gapY={gapY}
-      ref={ref}
-      wrap="wrap"
-    >
-      {children}
-    </Box>
-  )
-})
-
-Inline.displayName = 'ForwardRef(Inline)'

package/src/ui/primitives/inline/types.ts

@@ -1,6 +0,0 @@
-/**
- * @internal
- */
-export interface ResponsiveInlineSpaceStyleProps {
-  $space: number[]
-}

package/src/ui/primitives/kbd/index.ts

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

package/src/ui/primitives/kbd/kbd.tsx

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

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

@@ -1,37 +0,0 @@
-import {Container, Flex, Label} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-
-import {
-  WORKSHOP_FONT_WEIGHT_OPTIONS,
-  WORKSHOP_LABEL_FONT_SIZE_OPTIONS,
-  WORKSHOP_TEXT_ALIGN_OPTIONS,
-  WORKSHOP_TEXT_OVERFLOW_OPTIONS,
-} from '../../../../../workshop/constants'
-
-export default function PlainStory() {
-  const accent = useBoolean('Accent', false, 'Props')
-  const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS, undefined, 'Props') || undefined
-  const muted = useBoolean('Muted', false, 'Props')
-  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, '', 'Props') || undefined
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container width={0}>
-        <Label
-          accent={accent}
-          align={align}
-          muted={muted}
-          size={size}
-          textOverflow={textOverflow}
-          weight={weight}
-        >
-          {textChild}
-        </Label>
-      </Container>
-    </Flex>
-  )
-}

package/src/ui/primitives/label/index.ts

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

package/src/ui/primitives/label/label.tsx

@@ -1,67 +0,0 @@
-import {
-  composeClassNames,
-  FontStyleProps,
-  label,
-  LabelSize,
-  ResponsiveProp,
-  textOverflow,
-  TextOverflowStyleProps,
-} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
-
-import {Props} from '../../types'
-
-/**
- * @public
- */
-export interface LabelProps extends FontStyleProps, TextOverflowStyleProps {
-  accent?: boolean
-  htmlFor?: string
-  muted?: boolean
-  size?: ResponsiveProp<LabelSize>
-}
-
-/**
- * Typographic labels.
- *
- * @public
- */
-export const Label = forwardRef(function Label(
-  props: Props<LabelProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    accent,
-    align,
-    as: As = 'div',
-    children,
-    className,
-    muted = false,
-    size = 1,
-    textOverflow: textOverflowProp,
-    weight = 'medium',
-    ...restProps
-  } = props
-
-  return (
-    <As
-      data-ui="Label"
-      {...restProps}
-      className={composeClassNames(
-        className,
-        label({
-          accent,
-          align,
-          muted,
-          size,
-          weight,
-        }),
-      )}
-      ref={ref}
-    >
-      <span className={textOverflow({textOverflow: textOverflowProp})}>{children}</span>
-    </As>
-  )
-})
-
-Label.displayName = 'ForwardRef(Label)'

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

@@ -1,77 +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 size={1}>
-      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/ui/primitives/popover/__workshop__/MatchReferenceWidthStory.tsx

@@ -1,32 +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={3}>
-            <Text size={1}>Content</Text>
-          </Box>
-        }
-        matchReferenceWidth
-        open
-        placement={placement}
-        radius={2}
-      >
-        <Container width={0}>
-          <Stack>
-            <Button fontSize={1} mode="ghost" selected text="Button" />
-          </Stack>
-        </Container>
-      </Popover>
-    </Flex>
-  )
-}