@sanity/ui 3.0.0-static.4 → 3.0.0-static.41

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'
+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>): React.JSX.Element {
+  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(): 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

@@ -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/core/primitives/spinner/animatedSpinnerIcon.tsx

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

@@ -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'
+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

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

@@ -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/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(): 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

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

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

@@ -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/core/primitives/switch/__workshop__/props.tsx

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

@@ -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'
+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

@@ -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(): 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

@@ -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(): 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

@@ -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: '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

@@ -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(): 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

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

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