@sanity/ui 4.0.0-static.9 → 5.0.0-alpha.1

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

@@ -1,78 +0,0 @@
-import {
-  heading,
-  type HeadingStyleProps,
-  textOverflow,
-  type TextOverflowStyleProps,
-} from '@sanity/ui/css'
-
-import type {ComponentType, Props} from '../../types'
-
-/** @public */
-export const DEFAULT_HEADING_ELEMENT = 'div'
-
-/** @public */
-export type HeadingOwnProps = HeadingStyleProps & TextOverflowStyleProps
-
-/** @public */
-export type HeadingElementType =
-  | 'div'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'label'
-  | 'span'
-  | ComponentType
-
-/** @public */
-export type HeadingProps<E extends HeadingElementType = HeadingElementType> = Props<
-  HeadingOwnProps,
-  E
->
-
-/**
- * Typographic headings.
- *
- * @public
- */
-export function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_ELEMENT>(
-  props: HeadingProps<E>,
-): React.JSX.Element {
-  const {
-    align,
-    as: Element = DEFAULT_HEADING_ELEMENT,
-    children,
-    className,
-    flex,
-    muted = false,
-    size = 2,
-    textOverflow: textOverflowProp,
-    weight = 'regular',
-    ...rest
-  } = props as HeadingProps<typeof DEFAULT_HEADING_ELEMENT>
-
-  return (
-    <Element
-      data-ui="Heading"
-      {...rest}
-      className={heading({
-        className,
-        align,
-        flex,
-        muted,
-        size,
-        weight,
-      })}
-    >
-      <span
-        className={textOverflow({
-          textOverflow: textOverflowProp,
-        })}
-      >
-        {children}
-      </span>
-    </Element>
-  )
-}

package/src/core/primitives/inline/__workshop__/index.ts

@@ -1,10 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/inline',
-  title: 'Inline',
-  stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))}],
-}
-
-export default scope

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

@@ -1,24 +0,0 @@
-import {Card, Flex, Inline, Text} from '@sanity/ui'
-import {useAction, useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_SPACE_OPTIONS} from '$workshop'
-
-export default function PlainStory(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Inline gap={useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 0)} onClick={useAction('onClick')}>
-        <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/core/primitives/inline/inline.tsx

@@ -1,62 +0,0 @@
-import type {Props} from '../../types'
-import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
-
-/** @public */
-export const DEFAULT_INLINE_ELEMENT = 'div'
-
-/** @public */
-export type InlineOwnProps = Omit<
-  BoxOwnProps,
-  | 'alignItems'
-  | 'flexDirection'
-  | 'flexWrap'
-  | 'justifyContent'
-  | 'gridAutoColumns'
-  | 'gridAutoFlow'
-  | 'gridAutoRows'
-  | 'gridColumnEnd'
-  | 'gridColumnStart'
-  | 'gridColumn'
-  | 'gridRowEnd'
-  | 'gridRowStart'
-  | 'gridRow'
-  | 'gridTemplateColumns'
-  | 'gridTemplateRows'
-  // todo: omit deprecated flex and grid props
->
-
-/** @public */
-export type InlineElementType = BoxElementType
-
-/** @public */
-export type InlineProps<E extends InlineElementType = InlineElementType> = Props<InlineOwnProps, E>
-
-/**
- * The `Inline` component is a layout utility for aligning and spacing items horizontally.
- *
- * @public
- */
-export function Inline<E extends InlineElementType = typeof DEFAULT_INLINE_ELEMENT>(
-  props: InlineProps<E>,
-): React.JSX.Element {
-  const {
-    as = DEFAULT_INLINE_ELEMENT,
-    children,
-    gap,
-    ...rest
-  } = props as InlineProps<typeof DEFAULT_INLINE_ELEMENT>
-
-  return (
-    <Box
-      data-ui="Inline"
-      {...rest}
-      alignItems="center"
-      as={as}
-      display="flex"
-      gap={gap}
-      flexWrap="wrap"
-    >
-      {children}
-    </Box>
-  )
-}

package/src/core/primitives/kbd/__workshop__/index.ts

@@ -1,10 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/kbd',
-  title: 'KBD',
-  stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))}],
-}
-
-export default scope

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

@@ -1,9 +0,0 @@
-import {Flex, KBD} from '@sanity/ui'
-
-export default function PlainStory(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <KBD style={{verticalAlign: 'top'}}>Ctrl</KBD>
-    </Flex>
-  )
-}

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

@@ -1,57 +0,0 @@
-import {kbd, type RadiusStyleProps, type ResponsiveProp} from '@sanity/ui/css'
-import type {FontTextSize} from '@sanity/ui/theme'
-
-import type {ComponentType, Props} from '../../types'
-import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
-import {Text} from '../text/text'
-
-/** @public */
-export const DEFAULT_KBD_ELEMENT = 'kbd'
-
-/** @public */
-export type KBDOwnProps = BoxOwnProps &
-  RadiusStyleProps & {
-    fontSize?: ResponsiveProp<FontTextSize>
-  }
-
-/** @public */
-export type KBDElementType = 'kbd' | ComponentType
-
-/** @public */
-export type KBDProps<E extends KBDElementType = KBDElementType> = Props<KBDOwnProps, E>
-
-/**
- * Used to define some text as keyboard input.
- *
- * @public
- */
-export function KBD<E extends KBDElementType = typeof DEFAULT_KBD_ELEMENT>(
-  props: KBDProps<E>,
-): React.JSX.Element {
-  const {
-    as = DEFAULT_KBD_ELEMENT,
-    children,
-    className,
-    display = 'inline-block',
-    fontSize = 1,
-    padding = 1,
-    radius = 2,
-    ...rest
-  } = props as KBDProps<typeof DEFAULT_KBD_ELEMENT>
-
-  return (
-    <Box
-      data-ui="KBD"
-      {...rest}
-      as={as as BoxElementType}
-      className={kbd({className, radius})}
-      display={display}
-      muted
-      padding={padding}
-    >
-      <Text as="span" muted size={fontSize} weight="medium">
-        {children}
-      </Text>
-    </Box>
-  )
-}

package/src/core/primitives/label/__workshop__/index.ts

@@ -1,21 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/label',
-  title: 'Label',
-  stories: [
-    {
-      name: 'plain',
-      title: 'Plain',
-      component: lazy(() => import('./plain')),
-    },
-    {
-      name: 'optical-alignment',
-      title: 'Optical alignment',
-      component: lazy(() => import('./opticalAlignment')),
-    },
-  ],
-}
-
-export default scope

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

@@ -1,54 +0,0 @@
-import {AddCircleIcon} from '@sanity/icons'
-import {Box, Card, Flex, Label, Stack} from '@sanity/ui'
-
-export default function OpticalAlignment(): React.JSX.Element {
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Stack gap={1}>
-        <Flex>
-          <Card padding={0} shadow={1} tone="suggest">
-            <Label size={5}>Hamburgefonstiv M</Label>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} shadow={1} tone="suggest">
-            <Label size={4}>Hamburgefonstiv M</Label>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} shadow={1} tone="suggest">
-            <Label size={3}>Hamburgefonstiv M</Label>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} shadow={1} tone="suggest">
-            <Label size={2}>Hamburgefonstiv M</Label>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} shadow={1} tone="suggest">
-            <Label size={1}>Hamburgefonstiv M</Label>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} shadow={1} tone="suggest">
-            <Label size={0}>Hamburgefonstiv M</Label>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={2} shadow={1} tone="suggest">
-            <Label>
-              <AddCircleIcon />
-            </Label>
-          </Card>
-        </Flex>
-      </Stack>
-    </Box>
-  )
-}

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

@@ -1,28 +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'
-
-export default function PlainStory(): React.JSX.Element {
-  const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS)
-  const muted = useBoolean('Muted', false)
-  const size = useSelect('Size', WORKSHOP_LABEL_FONT_SIZE_OPTIONS)
-  const textChild = useText('Text', 'Label text')
-  const textOverflow = useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS)
-  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS)
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container width={0}>
-        <Label align={align} muted={muted} size={size} textOverflow={textOverflow} weight={weight}>
-          {textChild}
-        </Label>
-      </Container>
-    </Flex>
-  )
-}

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

@@ -1,75 +0,0 @@
-import {
-  label,
-  type LabelStyleProps,
-  textOverflow,
-  type TextOverflowStyleProps,
-} from '@sanity/ui/css'
-
-import type {ComponentType, Props} from '../../types'
-
-/** @public */
-export const DEFAULT_LABEL_ELEMENT = 'div'
-
-/** @public */
-export type LabelOwnProps = LabelStyleProps & TextOverflowStyleProps
-
-/** @public */
-export type LabelElementType =
-  | 'div'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'label'
-  | 'li'
-  | 'p'
-  | 'span'
-  | ComponentType
-
-/** @public */
-export type LabelProps<E extends LabelElementType = LabelElementType> = Props<LabelOwnProps, E>
-
-/**
- * Typographic labels.
- *
- * @public
- */
-export function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>(
-  props: LabelProps<E>,
-): React.JSX.Element {
-  const {
-    align,
-    as: Element = DEFAULT_LABEL_ELEMENT,
-    children,
-    className,
-    muted = false,
-    size = 1,
-    textOverflow: textOverflowProp,
-    weight = 'regular',
-    ...rest
-  } = props
-
-  return (
-    <Element
-      data-ui="Label"
-      {...rest}
-      className={label({
-        className,
-        align,
-        muted,
-        size,
-        weight,
-      })}
-    >
-      <span
-        className={textOverflow({
-          textOverflow: textOverflowProp,
-        })}
-      >
-        {children}
-      </span>
-    </Element>
-  )
-}

package/src/core/primitives/layer/__workshop__/_debug.tsx

@@ -1,17 +0,0 @@
-import {Code, useLayer} from '@sanity/ui'
-
-export function LayerDebugInfo(props: {id?: string}): React.JSX.Element {
-  const {id} = props
-  const layer = useLayer()
-
-  return (
-    <Code id={id} size={1}>
-      {[
-        //
-        `isTopLayer=${layer.isTopLayer}`,
-        `size=${layer.size}`,
-        `zIndex=${layer.zIndex}`,
-      ].join('\n')}
-    </Code>
-  )
-}

package/src/core/primitives/layer/__workshop__/index.ts

@@ -1,26 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/layer',
-  title: 'Layer',
-  stories: [
-    {
-      name: 'nested',
-      title: 'Nested',
-      component: lazy(() => import('./nested')),
-    },
-    {
-      name: 'multiple-roots',
-      title: 'Multiple roots',
-      component: lazy(() => import('./multipleRoots')),
-    },
-    {
-      name: 'responsive-z-offset',
-      title: 'Responsive z-offset',
-      component: lazy(() => import('./responsiveZOffset')),
-    },
-  ],
-}
-
-export default scope

package/src/core/primitives/layer/__workshop__/multipleRoots.tsx

@@ -1,49 +0,0 @@
-import {Card, Layer, LayerProvider, Stack} from '@sanity/ui'
-
-import {LayerDebugInfo} from './_debug'
-
-export default function MultipleRootsStory(): React.JSX.Element {
-  return (
-    <Stack gap={4}>
-      <LayerProvider zOffset={100}>
-        <Card padding={3} shadow={1}>
-          <Stack gap={3}>
-            <LayerDebugInfo />
-            <Layer>
-              <Card padding={3} shadow={1}>
-                <Stack gap={3}>
-                  <LayerDebugInfo />
-                  <Layer>
-                    <Card padding={3} shadow={1}>
-                      <LayerDebugInfo />
-                    </Card>
-                  </Layer>
-                </Stack>
-              </Card>
-            </Layer>
-          </Stack>
-        </Card>
-      </LayerProvider>
-
-      <LayerProvider zOffset={200}>
-        <Card as={Layer} padding={3} shadow={5} style={{top: -50, left: 30}}>
-          <Stack gap={3}>
-            <LayerDebugInfo />
-            <Layer>
-              <Card padding={3} shadow={1}>
-                <Stack gap={3}>
-                  <LayerDebugInfo />
-                  <Layer>
-                    <Card padding={3} shadow={1}>
-                      <LayerDebugInfo />
-                    </Card>
-                  </Layer>
-                </Stack>
-              </Card>
-            </Layer>
-          </Stack>
-        </Card>
-      </LayerProvider>
-    </Stack>
-  )
-}

package/src/core/primitives/layer/__workshop__/nested.tsx

@@ -1,98 +0,0 @@
-import {CloseIcon} from '@sanity/icons'
-import {Box, Button, Card, Flex, Layer, LayerProvider, Stack, Text} from '@sanity/ui'
-import {useCallback, useState} from 'react'
-
-import {LayerDebugInfo} from './_debug'
-
-export default function PlainStory(): React.JSX.Element {
-  return (
-    <Box padding={3}>
-      <Root />
-      <Root />
-      <Root />
-    </Box>
-  )
-}
-
-function Root() {
-  const [open, setOpen] = useState(false)
-  const handleOpen = useCallback(() => setOpen(true), [])
-  const handleClose = useCallback(() => setOpen(false), [])
-
-  return (
-    <LayerProvider>
-      <Card radius={2} shadow={1}>
-        <Box padding={3}>
-          <Text>
-            <strong>Root layer</strong>
-          </Text>
-        </Box>
-        <Box padding={3}>
-          <Stack gap={3}>
-            <LayerDebugInfo id="layer-debug-info-1" />
-            <Button id="open-layer-1" mode="ghost" onClick={handleOpen} text="Open layer 1" />
-            {open && (
-              <Layer style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
-                <Layer1 onClose={handleClose} />
-              </Layer>
-            )}
-          </Stack>
-        </Box>
-      </Card>
-    </LayerProvider>
-  )
-}
-
-function Layer1({onClose}: {onClose: () => void}) {
-  const [open, setOpen] = useState(false)
-  const handleOpen = useCallback(() => setOpen(true), [])
-  const handleClose = useCallback(() => setOpen(false), [])
-
-  return (
-    <Card radius={2} shadow={3}>
-      <Flex>
-        <Box flex={1} padding={3}>
-          <Text>
-            <strong>Layer 1</strong>
-          </Text>
-        </Box>
-        <Box padding={1}>
-          <Button icon={CloseIcon} mode="bleed" onClick={onClose} padding={2} />
-        </Box>
-      </Flex>
-      <Box padding={3}>
-        <Stack gap={3}>
-          <LayerDebugInfo />
-          <Button id="open-layer-2" mode="ghost" onClick={handleOpen} text="Open layer 2" />
-          {open && (
-            <Layer style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
-              <Layer2 onClose={handleClose} />
-            </Layer>
-          )}
-        </Stack>
-      </Box>
-    </Card>
-  )
-}
-
-function Layer2({onClose}: {onClose: () => void}) {
-  return (
-    <Card radius={2} shadow={3}>
-      <Flex>
-        <Box flex={1} padding={3}>
-          <Text>
-            <strong>Layer 2</strong>
-          </Text>
-        </Box>
-        <Box padding={1}>
-          <Button icon={CloseIcon} mode="bleed" onClick={onClose} padding={2} />
-        </Box>
-      </Flex>
-      <Box padding={3}>
-        <Stack gap={3}>
-          <LayerDebugInfo />
-        </Stack>
-      </Box>
-    </Card>
-  )
-}

package/src/core/primitives/layer/__workshop__/responsiveZOffset.tsx

@@ -1,17 +0,0 @@
-import {Layer} from '@sanity/ui'
-
-import {LayerDebugInfo} from './_debug'
-
-export default function ResponsiveZOffsetStory(): React.JSX.Element {
-  return (
-    <Layer
-      id="responsive-layer"
-      padding={[1, 2, 3, 4, 5, 6, 7]}
-      sizing="border"
-      shadow={1}
-      zOffset={[1, 2, 3, 4, 5, 6, 7]}
-    >
-      <LayerDebugInfo />
-    </Layer>
-  )
-}

package/src/core/primitives/layer/getLayerContext.test.ts

@@ -1,32 +0,0 @@
-import {describe, expect, it} from 'vitest'
-
-import {getLayerContext} from './getLayerContext'
-import type {LayerContextValue} from './types'
-
-describe('getLayerContext', () => {
-  describe('0.0', () => {
-    it('should convert 0.0 to 0.0', () => {
-      const contextValue: LayerContextValue = {
-        version: 0.0,
-        isTopLayer: true,
-        level: 0,
-        registerChild: () => () => {
-          //
-        },
-        size: 0,
-        zIndex: 0,
-      }
-
-      const result = getLayerContext(contextValue)
-
-      expect(result).toEqual({
-        version: 0.0,
-        isTopLayer: true,
-        level: 0,
-        registerChild: expect.any(Function),
-        size: 0,
-        zIndex: 0,
-      })
-    })
-  })
-})