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

package/src/core/primitives/skeleton/labelSkeleton.tsx

@@ -0,0 +1,47 @@
+import {labelSkeleton, type ResponsiveProp} from '@sanity/ui/css'
+import type {FontLabelSize} from '@sanity/ui/theme'
+
+import type {Props} from '../../types/props'
+import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
+
+/** @beta */
+export const DEFAULT_LABEL_SKELETON_ELEMENT = 'div'
+
+/** @beta */
+export type LabelSkeletonOwnProps = SkeletonOwnProps & {
+  size?: ResponsiveProp<FontLabelSize>
+}
+
+/** @beta */
+export type LabelSkeletonElementType = SkeletonElementType
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export type LabelSkeletonProps<E extends LabelSkeletonElementType = LabelSkeletonElementType> =
+  Props<LabelSkeletonOwnProps, E>
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function LabelSkeleton<
+  E extends LabelSkeletonElementType = typeof DEFAULT_LABEL_SKELETON_ELEMENT,
+>(props: LabelSkeletonProps<E>) {
+  const {
+    className,
+    size = 2,
+    ...rest
+  } = props as LabelSkeletonProps<typeof DEFAULT_LABEL_SKELETON_ELEMENT>
+
+  return (
+    <Skeleton
+      {...rest}
+      className={labelSkeleton({
+        className,
+        size,
+      })}
+    />
+  )
+}

package/src/core/primitives/skeleton/skeleton.tsx

@@ -0,0 +1,71 @@
+import {skeleton, type SkeletonStyleProps} from '@sanity/ui/css'
+import {useEffect, useState} from 'react'
+
+import type {ComponentType, Props} from '../../types/props'
+
+/** @beta */
+export const DEFAULT_SKELETON_ELEMENT = 'div'
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export type SkeletonOwnProps = SkeletonStyleProps & {
+  animated?: boolean
+  delay?: number
+}
+
+/** @beta */
+export type SkeletonElementType = 'div' | 'span' | ComponentType
+
+/** @beta */
+export type SkeletonProps<E extends SkeletonElementType = SkeletonElementType> = Props<
+  SkeletonOwnProps,
+  E
+>
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function Skeleton<E extends SkeletonElementType = typeof DEFAULT_SKELETON_ELEMENT>(
+  props: SkeletonProps<E>,
+) {
+  const {
+    as: As = DEFAULT_SKELETON_ELEMENT,
+    animated = false,
+    className,
+    delay,
+    radius,
+    ...rest
+  } = props as SkeletonProps<typeof DEFAULT_SKELETON_ELEMENT>
+
+  const [visible, setVisible] = useState<boolean>(delay ? false : true)
+
+  useEffect(() => {
+    if (!delay) {
+      return setVisible(true)
+    }
+
+    const timeout = setTimeout(() => {
+      setVisible(true)
+    }, delay)
+
+    return () => {
+      clearTimeout(timeout)
+    }
+  }, [delay])
+
+  return (
+    <As
+      data-ui="Skeleton"
+      {...rest}
+      className={skeleton({
+        className,
+        radius,
+      })}
+      data-animated={animated ? '' : undefined}
+      data-visible={visible ? '' : undefined}
+    />
+  )
+}

package/src/core/primitives/skeleton/textSkeleton.tsx

@@ -0,0 +1,49 @@
+import {type ResponsiveProp, textSkeleton} from '@sanity/ui/css'
+import type {FontTextSize} from '@sanity/ui/theme'
+
+import type {Props} from '../../types/props'
+import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
+
+/** @beta */
+export const DEFAULT_TEXT_SKELETON_ELEMENT = 'div'
+
+/** @beta */
+export type TextSkeletonOwnProps = SkeletonOwnProps & {
+  size?: ResponsiveProp<FontTextSize>
+}
+
+/** @beta */
+export type TextSkeletonElementType = SkeletonElementType
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export type TextSkeletonProps<E extends TextSkeletonElementType = TextSkeletonElementType> = Props<
+  TextSkeletonOwnProps,
+  E
+>
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function TextSkeleton<
+  E extends TextSkeletonElementType = typeof DEFAULT_TEXT_SKELETON_ELEMENT,
+>(props: TextSkeletonProps<E>) {
+  const {
+    className,
+    size = 2,
+    ...rest
+  } = props as TextSkeletonProps<typeof DEFAULT_TEXT_SKELETON_ELEMENT>
+
+  return (
+    <Skeleton
+      {...rest}
+      className={textSkeleton({
+        className,
+        size,
+      })}
+    />
+  )
+}

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

@@ -0,0 +1,15 @@
+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() {
+  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/animatedSpinnerIcon.tsx

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

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

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

@@ -0,0 +1,33 @@
+import {srOnly} from '@sanity/ui/css'
+
+import type {ComponentType, Props} from '../../types/props'
+
+/** @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>,
+) {
+  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__/plain.tsx

@@ -0,0 +1,32 @@
+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() {
+  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

@@ -0,0 +1,65 @@
+import {type ResponsiveProp, stack} from '@sanity/ui/css'
+import type {Space} from '@sanity/ui/theme'
+
+import type {Props} from '../../types/props'
+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'
+> & {
+  /** @deprecated Use `gap` instead. */
+  space?: ResponsiveProp<Space>
+}
+
+/** @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>,
+) {
+  const {
+    as = DEFAULT_STACK_ELEMENT,
+    className,
+    gap,
+    space,
+    ...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 ?? space}
+    />
+  )
+}

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

@@ -0,0 +1,84 @@
+import {
+  _switch,
+  _switchElement,
+  _switchPresentation,
+  _switchThumb,
+  _switchTrack,
+} from '@sanity/ui/css'
+import {useEffect, useImperativeHandle, useRef} from 'react'
+
+import type {ComponentType, Props} from '../../types/props'
+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>,
+) {
+  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

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

@@ -0,0 +1,28 @@
+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() {
+  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__/opticalAlignment.tsx

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

@@ -0,0 +1,74 @@
+import {text, textOverflow, type TextOverflowStyleProps, type TextStyleProps} from '@sanity/ui/css'
+
+import type {ComponentType, Props} from '../../types/props'
+
+/** @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'
+  | 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>) {
+  const {
+    accent,
+    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,
+        accent,
+        align,
+        flex,
+        maxWidth,
+        muted,
+        size,
+        weight,
+      })}
+    >
+      <span
+        className={textOverflow({
+          textOverflow: textOverflowProp,
+        })}
+      >
+        {children}
+      </span>
+    </Element>
+  )
+}

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

@@ -0,0 +1,61 @@
+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() {
+  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>
+  )
+}