@sanity/ui 3.1.13 → 4.0.0-beta.0

package/src/primitives/spinner/Spinner.tsx

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,14 @@
+import {Flex, Spinner} from '@sanity/ui'
+import {FONT_TEXT_SIZE} from '@sanity/ui/tokens'
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,31 @@
+import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
+import {SPACE} from '@sanity/ui/tokens'
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,27 @@
+import {Text} from '@sanity/ui'
+import {FONT_TEXT_SIZE} from '@sanity/ui/tokens'
+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

@@ -0,0 +1,28 @@
+import {CropIcon} from '@sanity/icons'
+import {Box, Stack, Text} from '@sanity/ui'
+import {FONT_TEXT_SIZE} from '@sanity/ui/tokens'
+
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,97 @@
+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>
+  )
+}