@sanity/ui 4.0.0-beta.7 → 4.0.0-next.0

package/src/primitives/spinner/Spinner.tsx

@@ -1,45 +0,0 @@
-import {type ResponsiveProp, spinner} from '@sanity/ui-css'
-import type {FontTextSize} from '@sanity/ui-tokens'
-
-import type {ComponentType, Props} from '../../core/types'
-import {Text} from '../text/Text'
-import {SpinnerAnimatedIcon} from './SpinnerAnimatedIcon'
-
-/** @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})}>
-      <SpinnerAnimatedIcon />
-    </Text>
-  )
-}

package/src/primitives/spinner/SpinnerAnimatedIcon.tsx

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

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

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

package/src/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/primitives/srOnly/SrOnly.tsx

@@ -1,33 +0,0 @@
-import {srOnly} from '@sanity/ui-css'
-
-import type {ComponentType, Props} from '../../core/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/primitives/stack/Stack.tsx

@@ -1,38 +0,0 @@
-import {stack, STACK_STYLE_PROP_KEYS, type StackStyleProps} from '@sanity/ui-css'
-
-import {_splitKeys} from '../../core/_keys'
-import type {Props} from '../../core/types'
-import type {BoxElementType} from '../box/Box'
-
-/** @public */
-export const DEFAULT_STACK_ELEMENT = 'div'
-
-/** @public */
-export type StackOwnProps = StackStyleProps
-
-/** @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 [
-    // split style props
-    styleProps,
-    {
-      as: Element = DEFAULT_STACK_ELEMENT,
-      // split DOM props
-      ...domProps
-    },
-  ] = _splitKeys(props as StackProps<typeof DEFAULT_STACK_ELEMENT>, STACK_STYLE_PROP_KEYS)
-
-  return <Element data-ui="Stack" {...domProps} className={stack(styleProps)} />
-}

package/src/primitives/stack/__workshop__/Plain.tsx

@@ -1,30 +0,0 @@
-import {Card, Container, Flex, SPACE, Stack, Text} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-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', SPACE, 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/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/primitives/switch/Switch.tsx

@@ -1,76 +0,0 @@
-import {
-  _switch,
-  _switch_element,
-  _switch_presentation,
-  _switch_thumb,
-  _switch_track,
-} from '@sanity/ui-css'
-import {useEffect, useImperativeHandle, useRef} from 'react'
-
-import type {ComponentType, Props} from '../../core/types'
-
-/** @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,
-    ...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 (
-    <span className={_switch({className})} data-ui="Switch">
-      <Element
-        {...rest}
-        ref={ref}
-        className={_switch_element()}
-        data-read-only={!disabled && readOnly ? '' : undefined}
-        disabled={disabled || readOnly}
-        type="checkbox"
-      />
-      <span aria-hidden className={_switch_presentation()}>
-        <span className={_switch_track()} />
-        <span className={_switch_thumb()} />
-      </span>
-    </span>
-  )
-}

package/src/primitives/switch/__workshop__/Example.tsx

@@ -1,25 +0,0 @@
-import {Box, Flex, Switch, Text} from '@sanity/ui'
-import {useCallback, useState} from 'react'
-
-import {CardWrapper} from '$workshop'
-
-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 (
-    <CardWrapper alignItems="center" display="flex" justifyContent="center">
-      <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>
-    </CardWrapper>
-  )
-}

package/src/primitives/switch/__workshop__/Props.tsx

@@ -1,23 +0,0 @@
-import {Switch} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-import {useCallback} from 'react'
-
-import {CardWrapper} from '$workshop'
-
-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 (
-    <CardWrapper alignItems="center" display="flex" justifyContent="center">
-      <Switch
-        checked={checked}
-        indeterminate={indeterminate}
-        readOnly={readOnly}
-        onChange={handleChange}
-      />
-    </CardWrapper>
-  )
-}

package/src/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/primitives/text/InlineCode.tsx

@@ -1,25 +0,0 @@
-import {Suspense} from 'react'
-
-import {LazySyntax} from '../_syntax/LazySyntax'
-
-/** @public */
-export const DEFAULT_INLINE_CODE_ELEMENT = 'code'
-
-/** @public */
-export interface InlineCodeProps {
-  children: React.ReactNode
-  /** Language to use for syntax highlighting. */
-  language?: string
-}
-
-/** @public */
-export function InlineCode(props: InlineCodeProps): React.JSX.Element {
-  const {children, language: languageProp} = props
-  const language = typeof languageProp === 'string' ? languageProp : undefined
-
-  return (
-    <Suspense fallback={<code>{children}</code>}>
-      <LazySyntax language={language} value={children} />
-    </Suspense>
-  )
-}

package/src/primitives/text/Text.tsx

@@ -1,68 +0,0 @@
-import {
-  text,
-  TEXT_STYLE_PROP_KEYS,
-  textOverflow,
-  type TextOverflowStyleProps,
-  type TextStyleProps,
-} from '@sanity/ui-css'
-
-import {_splitKeys} from '../../core/_keys'
-import type {ComponentType, Props} from '../../core/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 [
-    styleProps,
-    {
-      as: Element = DEFAULT_TEXT_ELEMENT,
-      children: childrenProp,
-      textOverflow: textOverflowProp,
-      // split DOM props
-      ...domProps
-    },
-  ] = _splitKeys(props as TextProps<typeof DEFAULT_TEXT_ELEMENT>, TEXT_STYLE_PROP_KEYS)
-
-  let children = childrenProp
-
-  if (textOverflowProp) {
-    children = <span className={textOverflow({textOverflow: textOverflowProp})}>{children}</span>
-  }
-
-  return (
-    <Element data-ui="Text" {...domProps} className={text(styleProps)}>
-      {children}
-    </Element>
-  )
-}

package/src/primitives/text/__workshop__/Example.tsx

@@ -1,26 +0,0 @@
-import {FONT_TEXT_SIZE, Text} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-
-import {
-  CardWrapper,
-  WORKSHOP_TEXT_ALIGN_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', FONT_TEXT_SIZE, 2)
-  const text = useText('Text', 'Hello, world')
-  const textOverflow = useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS)
-  const weight = useSelect('Weight', WORKSHOP_TEXT_WEIGHT_OPTIONS)
-
-  return (
-    <CardWrapper>
-      <Text align={align} muted={muted} size={size} textOverflow={textOverflow} weight={weight}>
-        {text}
-      </Text>
-    </CardWrapper>
-  )
-}

package/src/primitives/text/__workshop__/OpticalAlignment.tsx

@@ -1,27 +0,0 @@
-import {CropIcon} from '@sanity/icons'
-import {Box, FONT_TEXT_SIZE, Stack, Text} from '@sanity/ui'
-
-import {CardWrapper} from '$workshop'
-
-export default function OpticalAlignment(): React.JSX.Element {
-  return (
-    <CardWrapper width={0}>
-      <Stack gap={4}>
-        {FONT_TEXT_SIZE.map((size) => (
-          <Box key={size} display="flex" gap={2}>
-            <Box flex="none" muted shadow={1}>
-              <Text muted size={size}>
-                <CropIcon />
-              </Text>
-            </Box>
-            <Box flex={1} muted shadow={1}>
-              <Text muted size={size} textOverflow="ellipsis">
-                Hamburgefonstiv M
-              </Text>
-            </Box>
-          </Box>
-        ))}
-      </Stack>
-    </CardWrapper>
-  )
-}

package/src/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: 'props',
-      title: 'Props',
-      component: lazy(() => import('./Example')),
-    },
-    {
-      name: 'optical-alignment',
-      title: 'Optical alignment',
-      component: lazy(() => import('./OpticalAlignment')),
-    },
-    {
-      name: 'inline-code',
-      title: 'Inline code',
-      component: lazy(() => import('./inline-code')),
-    },
-  ],
-}
-
-export default scope

package/src/primitives/text/__workshop__/inline-code.tsx

@@ -1,13 +0,0 @@
-import {InlineCode, Text} from '@sanity/ui'
-
-import {CardWrapper} from '$workshop'
-
-export default function InlineCodeStory() {
-  return (
-    <CardWrapper pattern="halftone" width={0}>
-      <Text align="center" size={1}>
-        Use the <InlineCode language="jsx">{`<Box>`}</InlineCode> component to build layouts.
-      </Text>
-    </CardWrapper>
-  )
-}

package/src/primitives/textArea/TextArea.tsx

@@ -1,97 +0,0 @@
-import {
-  textArea,
-  textArea_element,
-  textArea_presentation,
-  type TextAreaStyleProps,
-} from '@sanity/ui-css'
-import {useImperativeHandle, useRef} from 'react'
-
-import type {ComponentType, Props} from '../../core/types'
-import {useCustomValidity} from '../../hooks/useCustomValidity'
-
-/** @public */
-export const DEFAULT_TEXT_AREA_ELEMENT = 'textarea'
-
-/** @public */
-export type TextAreaOwnProps = TextAreaStyleProps & {
-  /**
-   * @beta
-   */
-  __unstable_disableFocusRing?: boolean
-  customValidity?: string
-}
-
-/** @public */
-export type TextAreaElementType = 'textarea' | ComponentType
-
-/** @public */
-export type TextAreaProps<E extends TextAreaElementType = TextAreaElementType> = Props<
-  TextAreaOwnProps,
-  E
->
-
-/**
- * A multiline text input.
- *
- * @public
- */
-export function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_AREA_ELEMENT>(
-  props: TextAreaProps<E>,
-): React.JSX.Element {
-  const {
-    __unstable_disableFocusRing,
-    as: Element = DEFAULT_TEXT_AREA_ELEMENT,
-    border = true,
-    className,
-    customValidity,
-    disabled = false,
-    flex,
-    fontSize = 2,
-    fontWeight,
-    gap = 3,
-    padding = 3,
-    radius = 2,
-    readOnly,
-    ref: forwardedRef,
-    width,
-    ...rest
-  } = props as TextAreaProps<typeof DEFAULT_TEXT_AREA_ELEMENT>
-
-  const ref = useRef<HTMLTextAreaElement | null>(null)
-
-  useImperativeHandle<HTMLTextAreaElement | null, HTMLTextAreaElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
-  useCustomValidity(ref, customValidity)
-
-  return (
-    <span
-      className={textArea({
-        className,
-        border,
-        flex,
-        fontSize,
-        fontWeight,
-        gap,
-        padding,
-        radius,
-        width,
-      })}
-      data-ui="TextArea"
-    >
-      <Element
-        {...rest}
-        ref={ref}
-        className={textArea_element()}
-        data-invalid={customValidity ? '' : undefined}
-        data-no-focus-ring={__unstable_disableFocusRing ? '' : undefined}
-        data-read-only={!disabled && readOnly ? '' : undefined}
-        disabled={disabled}
-        readOnly={readOnly}
-      />
-      <span className={textArea_presentation()} />
-    </span>
-  )
-}