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

package/src/core/primitives/spinner/__workshop__/Props.tsx

@@ -1,15 +0,0 @@
-import {Flex, Spinner} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_TEXT_FONT_SIZE_OPTIONS} from '$workshop'
-
-export default function Props(): React.JSX.Element {
-  const muted = useBoolean('Muted', false)
-  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Spinner muted={muted} size={size} />
-    </Flex>
-  )
-}

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

@@ -1,16 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/spinner',
-  title: 'Spinner',
-  stories: [
-    {
-      name: 'props',
-      title: 'Props',
-      component: lazy(() => import('./Props')),
-    },
-  ],
-}
-
-export default scope

package/src/core/primitives/spinner/animatedSpinnerIcon.tsx

@@ -1,14 +0,0 @@
-import {SpinnerIcon} from '@sanity/icons'
-import {animatedSpinnerIcon} from '@sanity/ui/css'
-import type {SVGProps} from 'react'
-
-/** @internal */
-export function AnimatedSpinnerIcon(
-  props: Omit<SVGProps<SVGSVGElement>, 'className'>,
-): React.JSX.Element {
-  const {...rest} = props
-
-  return (
-    <SpinnerIcon data-sanity-icon="animated-spinner" {...rest} className={animatedSpinnerIcon()} />
-  )
-}

package/src/core/primitives/spinner/spinner.tsx

@@ -1,45 +0,0 @@
-import {type ResponsiveProp, spinner} from '@sanity/ui/css'
-import type {FontTextSize} from '@sanity/ui/theme'
-
-import type {ComponentType, Props} from '../../types'
-import {Text} from '../text/text'
-import {AnimatedSpinnerIcon} from './animatedSpinnerIcon'
-
-/** @public */
-export const DEFAULT_SPINNER_ELEMENT = 'div'
-
-/** @public */
-export type SpinnerOwnProps = {
-  muted?: boolean
-  size?: ResponsiveProp<FontTextSize>
-}
-
-/** @public */
-export type SpinnerElementType = 'div' | 'span' | ComponentType
-
-/** @public */
-export type SpinnerProps<E extends SpinnerElementType = SpinnerElementType> = Props<
-  SpinnerOwnProps,
-  E
->
-
-/**
- * Indicate that something is loading for an indeterminate amount of time.
- *
- * @public
- */
-export function Spinner<E extends SpinnerElementType = typeof DEFAULT_SPINNER_ELEMENT>(
-  props: SpinnerProps<E>,
-): React.JSX.Element {
-  const {
-    as = DEFAULT_SPINNER_ELEMENT,
-    className,
-    ...rest
-  } = props as SpinnerProps<typeof DEFAULT_SPINNER_ELEMENT>
-
-  return (
-    <Text as={as} data-ui="Spinner" {...rest} className={spinner({className})}>
-      <AnimatedSpinnerIcon />
-    </Text>
-  )
-}

package/src/core/primitives/srOnly/srOnly.tsx

@@ -1,33 +0,0 @@
-import {srOnly} from '@sanity/ui/css'
-
-import type {ComponentType, Props} from '../../types'
-
-/** @public */
-export const DEFAULT_SR_ONLY_ELEMENT = 'span'
-
-/** @public */
-export type SrOnlyOwnProps = {} // eslint-disable-line @typescript-eslint/no-empty-object-type
-
-/** @public */
-export type SrOnlyElementType = 'span' | ComponentType
-
-/** @public */
-export type SrOnlyProps<E extends SrOnlyElementType = SrOnlyElementType> = Props<SrOnlyOwnProps, E>
-
-/** @public */
-export function SrOnly<E extends SrOnlyElementType = typeof DEFAULT_SR_ONLY_ELEMENT>(
-  props: SrOnlyProps<E>,
-): React.JSX.Element {
-  const {
-    as: Element = DEFAULT_SR_ONLY_ELEMENT,
-    children,
-    className,
-    ...rest
-  } = props as SrOnlyProps<typeof DEFAULT_SR_ONLY_ELEMENT>
-
-  return (
-    <Element data-ui="SrOnly" {...rest} aria-hidden className={srOnly({className})}>
-      {children}
-    </Element>
-  )
-}

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

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

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

@@ -1,32 +0,0 @@
-import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
-import {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">
-      <Container width={0}>
-        <Stack gap={useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 0)}>
-          <Card padding={[2, 3, 4]} shadow={1}>
-            <Text align="center" muted>
-              Stack item
-            </Text>
-          </Card>
-
-          <Card padding={[2, 3, 4]} shadow={1}>
-            <Text align="center" muted>
-              Stack item
-            </Text>
-          </Card>
-
-          <Card padding={[2, 3, 4]} shadow={1}>
-            <Text align="center" muted>
-              Stack item
-            </Text>
-          </Card>
-        </Stack>
-      </Container>
-    </Flex>
-  )
-}

package/src/core/primitives/stack/stack.tsx

@@ -1,60 +0,0 @@
-import {stack} from '@sanity/ui/css'
-
-import type {Props} from '../../types'
-import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
-
-/** @public */
-export const DEFAULT_STACK_ELEMENT = 'div'
-
-/** @public */
-export type StackOwnProps = Omit<
-  BoxOwnProps,
-  | 'align'
-  | 'alignItems'
-  | 'columns'
-  | 'gridTemplateColumns'
-  | 'direction'
-  | 'display'
-  | 'flexDirection'
-  | 'flexWrap'
-  | 'gapX'
-  | 'gapY'
-  | 'justify'
-  | 'justifyContent'
-  | 'rows'
-  | 'gridTemplateRows'
->
-
-/** @public */
-export type StackElementType = BoxElementType
-
-/** @public */
-export type StackProps<E extends StackElementType = StackElementType> = Props<StackOwnProps, E>
-
-/**
- * The `Stack` component is used to place elements on top of each other.
- *
- * @public
- */
-export function Stack<E extends StackElementType = typeof DEFAULT_STACK_ELEMENT>(
-  props: StackProps<E>,
-): React.JSX.Element {
-  const {
-    as = DEFAULT_STACK_ELEMENT,
-    className,
-    gap,
-    ...rest
-  } = props as StackProps<typeof DEFAULT_STACK_ELEMENT>
-
-  return (
-    <Box
-      data-ui="Stack"
-      {...rest}
-      as={as}
-      gridAutoRows="min"
-      className={stack({className})}
-      display="grid"
-      gap={gap}
-    />
-  )
-}

package/src/core/primitives/switch/__workshop__/example.tsx

@@ -1,23 +0,0 @@
-import {Box, Flex, Switch, Text} from '@sanity/ui'
-import {useCallback, useState} from 'react'
-
-export default function ExampleStory(): React.JSX.Element {
-  const [checked, setChecked] = useState<boolean | undefined>(undefined)
-  const indeterminate = checked === undefined
-  const handleChange = useCallback((event: React.FormEvent<HTMLInputElement>) => {
-    setChecked(event.currentTarget.checked)
-  }, [])
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Flex align="center" as="label">
-        <Switch checked={checked || false} indeterminate={indeterminate} onChange={handleChange} />
-        <Box marginLeft={3}>
-          <Text size={1} weight="medium">
-            Label
-          </Text>
-        </Box>
-      </Flex>
-    </Flex>
-  )
-}

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

@@ -1,13 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/switch',
-  title: 'Switch',
-  stories: [
-    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-    {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
-  ],
-}
-
-export default scope

package/src/core/primitives/switch/__workshop__/props.tsx

@@ -1,21 +0,0 @@
-import {Flex, Switch} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-import {useCallback} from 'react'
-
-export default function PropsStory(): React.JSX.Element {
-  const checked = useBoolean('Checked', false)
-  const indeterminate = useBoolean('Indeterminate', false)
-  const readOnly = useBoolean('Read only', false)
-  const handleChange = useCallback(() => undefined, [])
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Switch
-        checked={checked}
-        indeterminate={indeterminate}
-        onChange={handleChange}
-        readOnly={readOnly}
-      />
-    </Flex>
-  )
-}

package/src/core/primitives/switch/switch.tsx

@@ -1,84 +0,0 @@
-import {
-  _switch,
-  _switchElement,
-  _switchPresentation,
-  _switchThumb,
-  _switchTrack,
-} from '@sanity/ui/css'
-import {useEffect, useImperativeHandle, useRef} from 'react'
-
-import type {ComponentType, Props} from '../../types'
-import {Box} from '../box/box'
-
-/** @public */
-export const DEFAULT_SWITCH_ELEMENT = 'input'
-
-/** @public */
-export type SwitchOwnProps = {
-  indeterminate?: boolean
-}
-
-/** @public */
-export type SwitchElementType = 'input' | ComponentType
-
-/** @public */
-export type SwitchProps<E extends SwitchElementType = SwitchElementType> = Props<SwitchOwnProps, E>
-
-/**
- * The `Switch` component allows the user to toggle a setting on and off.
- *
- * Extends all properties of an `<input type="checkbox" />` element, except type.
- *
- * @public
- */
-export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEMENT>(
-  props: SwitchProps<E>,
-): React.JSX.Element {
-  const {
-    as: Element = DEFAULT_SWITCH_ELEMENT,
-    className,
-    disabled,
-    indeterminate,
-    readOnly,
-    ref: forwardedRef,
-    style,
-    ...rest
-  } = props as SwitchProps<typeof DEFAULT_SWITCH_ELEMENT>
-
-  const ref = useRef<HTMLInputElement | null>(null)
-
-  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
-  useEffect(() => {
-    if (ref.current) {
-      // Set the indeterminate state
-      ref.current.indeterminate = indeterminate || false
-    }
-  }, [indeterminate])
-
-  return (
-    <Box
-      className={_switch({className})}
-      data-ui="Switch"
-      display="block"
-      position="relative"
-      style={style}
-    >
-      <Element
-        {...rest}
-        className={_switchElement()}
-        data-read-only={!disabled && readOnly ? '' : undefined}
-        disabled={disabled || readOnly}
-        type="checkbox"
-        ref={ref}
-      />
-      <span aria-hidden className={_switchPresentation()}>
-        <span className={_switchTrack()} />
-        <span className={_switchThumb()} />
-      </span>
-    </Box>
-  )
-}

package/src/core/primitives/text/__workshop__/colored.tsx

@@ -1,23 +0,0 @@
-import {Flex, Text} from '@sanity/ui'
-import {vars} from '@sanity/ui/css'
-import type {AvatarColor} from '@sanity/ui/theme'
-import {useSelect} from '@sanity/ui-workshop'
-import {styled} from 'styled-components'
-
-import {WORKSHOP_AVATAR_COLOR_OPTIONS} from '$workshop'
-
-const ColoredText = styled(Text)<{$color: AvatarColor}>`
-  ${vars.color.fg.slice(4, -1)}: ${({$color}) => vars.color.avatar[$color].bg};
-`
-
-export default function ColoredTextStory(): React.JSX.Element {
-  const color = useSelect('Color', WORKSHOP_AVATAR_COLOR_OPTIONS, 'gray') ?? 'gray'
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <ColoredText align="center" $color={color} size={4} weight="bold">
-        {color}
-      </ColoredText>
-    </Flex>
-  )
-}

package/src/core/primitives/text/__workshop__/example.tsx

@@ -1,28 +0,0 @@
-import {Container, Flex, Text} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-
-import {
-  WORKSHOP_TEXT_ALIGN_OPTIONS,
-  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
-  WORKSHOP_TEXT_OVERFLOW_OPTIONS,
-  WORKSHOP_TEXT_WEIGHT_OPTIONS,
-} from '$workshop'
-
-export default function TextStory(): React.JSX.Element {
-  const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS)
-  const muted = useBoolean('Muted', false)
-  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 1)
-  const text = useText('Text', 'Hello, world')
-  const textOverflow = useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS)
-  const weight = useSelect('Weight', WORKSHOP_TEXT_WEIGHT_OPTIONS)
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Container width={0}>
-        <Text align={align} muted={muted} size={size} textOverflow={textOverflow} weight={weight}>
-          {text}
-        </Text>
-      </Container>
-    </Flex>
-  )
-}

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

@@ -1,26 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/text',
-  title: 'Text',
-  stories: [
-    {
-      name: 'default',
-      title: 'Text',
-      component: lazy(() => import('./example')),
-    },
-    {
-      name: 'colored',
-      title: 'Colored text',
-      component: lazy(() => import('./colored')),
-    },
-    {
-      name: 'optical-alignment',
-      title: 'Optical alignment',
-      component: lazy(() => import('./opticalAlignment')),
-    },
-  ],
-}
-
-export default scope

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

@@ -1,23 +0,0 @@
-import {CropIcon} from '@sanity/icons'
-import {Box, Stack, Text} from '@sanity/ui'
-import {vars} from '@sanity/ui/css'
-import {FONT_TEXT_SIZE} from '@sanity/ui/theme'
-
-export default function OpticalAlignment(): React.JSX.Element {
-  return (
-    <Stack gap={4} padding={[4, 5, 6]}>
-      {FONT_TEXT_SIZE.map((size) => (
-        <Box display="flex" gap={2} key={size}>
-          <div style={{outline: `0.5px solid ${vars.color.tinted.suggest.border[4]}`}}>
-            <Text size={size}>
-              <CropIcon />
-            </Text>
-          </div>
-          <div style={{outline: `0.5px solid ${vars.color.tinted.suggest.border[4]}`}}>
-            <Text size={size}>Hamburgefonstiv M</Text>
-          </div>
-        </Box>
-      ))}
-    </Stack>
-  )
-}

package/src/core/primitives/text/text.tsx

@@ -1,76 +0,0 @@
-import {text, textOverflow, type TextOverflowStyleProps, type TextStyleProps} from '@sanity/ui/css'
-
-import type {ComponentType, Props} from '../../types'
-
-/** @public */
-export const DEFAULT_TEXT_ELEMENT = 'div'
-
-/** @public */
-export type TextOwnProps = TextStyleProps & TextOverflowStyleProps
-
-/** @public */
-export type TextElementType =
-  | 'div'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'label'
-  | 'li'
-  | 'p'
-  | 'span'
-  | 'summary'
-  | 'time'
-  | ComponentType
-
-/** @public */
-export type TextProps<E extends TextElementType = TextElementType> = Props<TextOwnProps, E>
-
-/**
- * The `Text` component is an agile, themed typographic element.
- *
- * @public
- */
-export function Text<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(
-  props: TextProps<E>,
-): React.JSX.Element {
-  const {
-    align,
-    as: Element = DEFAULT_TEXT_ELEMENT,
-    children,
-    className,
-    flex,
-    maxWidth = 'fill',
-    muted,
-    size = 2,
-    textOverflow: textOverflowProp,
-    weight = 'regular',
-    ...rest
-  } = props as TextProps<typeof DEFAULT_TEXT_ELEMENT>
-
-  return (
-    <Element
-      data-ui="Text"
-      {...rest}
-      className={text({
-        className,
-        align,
-        flex,
-        maxWidth,
-        muted,
-        size,
-        weight,
-      })}
-    >
-      <span
-        className={textOverflow({
-          textOverflow: textOverflowProp,
-        })}
-      >
-        {children}
-      </span>
-    </Element>
-  )
-}

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

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

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

@@ -1,61 +0,0 @@
-import {Card, Container, Stack, Text, TextArea} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {useState} from 'react'
-
-import {
-  WORKSHOP_CARD_TONE_OPTIONS,
-  WORKSHOP_RADIUS_OPTIONS,
-  WORKSHOP_SPACE_OPTIONS,
-  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
-} from '$workshop'
-
-export default function PlainStory(): React.JSX.Element {
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
-
-  const border = useBoolean('Border', true)
-  const customValidity = useText('Custom validity')
-  const disableFocusRing = useBoolean('Disable focus ring (unstable)', false)
-  const disabled = useBoolean('Disabled', false)
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
-  const placeholder = useText('Placeholder', 'Placeholder')
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
-  const readOnly = useBoolean('Read only', false)
-
-  const [value, setValue] = useState('')
-
-  return (
-    <Card
-      alignItems="center"
-      display="flex"
-      height="fill"
-      justifyContent="center"
-      padding={[4, 5, 6]}
-      sizing="border"
-      tone={tone}
-    >
-      <Container width={0}>
-        <Stack gap={3}>
-          <Text as="label" hidden htmlFor="text-area-example" size={1} weight="medium">
-            TextArea
-          </Text>
-          <TextArea
-            __unstable_disableFocusRing={disableFocusRing}
-            border={border}
-            customValidity={customValidity}
-            disabled={disabled}
-            fontSize={fontSize}
-            id="text-area-example"
-            onChange={(e) => setValue(e.target.value)}
-            padding={padding}
-            placeholder={placeholder}
-            radius={radius}
-            readOnly={readOnly}
-            rows={10}
-            value={value}
-          />
-        </Stack>
-      </Container>
-    </Card>
-  )
-}