@sanity/ui 3.0.2 → 4.0.0-static.2

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

@@ -0,0 +1,49 @@
+import {codeSkeleton, type ResponsiveProp} from '@sanity/ui/css'
+import type {FontCodeSize} from '@sanity/ui/theme'
+
+import type {Props} from '../../types'
+import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
+
+/** @beta */
+export const DEFAULT_CODE_SKELETON_ELEMENT = 'div'
+
+/** @beta */
+export type CodeSkeletonOwnProps = SkeletonOwnProps & {
+  size?: ResponsiveProp<FontCodeSize>
+}
+
+/** @beta */
+export type CodeSkeletonElementType = SkeletonElementType
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export type CodeSkeletonProps<E extends CodeSkeletonElementType = CodeSkeletonElementType> = Props<
+  CodeSkeletonOwnProps,
+  E
+>
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function CodeSkeleton<
+  E extends CodeSkeletonElementType = typeof DEFAULT_CODE_SKELETON_ELEMENT,
+>(props: CodeSkeletonProps<E>): React.JSX.Element {
+  const {
+    className,
+    size = 2,
+    ...rest
+  } = props as CodeSkeletonProps<typeof DEFAULT_CODE_SKELETON_ELEMENT>
+
+  return (
+    <Skeleton
+      {...rest}
+      className={codeSkeleton({
+        className,
+        size,
+      })}
+    />
+  )
+}

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

@@ -0,0 +1,48 @@
+import {headingSkeleton, type ResponsiveProp} from '@sanity/ui/css'
+import type {FontHeadingSize} from '@sanity/ui/theme'
+
+import type {Props} from '../../types'
+import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
+
+/** @beta */
+export const DEFAULT_HEADING_SKELETON_ELEMENT = 'div'
+
+/** @beta */
+export type HeadingSkeletonOwnProps = SkeletonOwnProps & {
+  size?: ResponsiveProp<FontHeadingSize>
+}
+
+/** @beta */
+export type HeadingSkeletonElementType = SkeletonElementType
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export type HeadingSkeletonProps<
+  E extends HeadingSkeletonElementType = HeadingSkeletonElementType,
+> = Props<HeadingSkeletonOwnProps, E>
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function HeadingSkeleton<
+  E extends HeadingSkeletonElementType = typeof DEFAULT_HEADING_SKELETON_ELEMENT,
+>(props: HeadingSkeletonProps<E>): React.JSX.Element {
+  const {
+    className,
+    size = 2,
+    ...rest
+  } = props as HeadingSkeletonProps<typeof DEFAULT_HEADING_SKELETON_ELEMENT>
+
+  return (
+    <Skeleton
+      {...rest}
+      className={headingSkeleton({
+        className,
+        size,
+      })}
+    />
+  )
+}

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'
+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>): React.JSX.Element {
+  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,70 @@
+import {skeleton, type SkeletonStyleProps} from '@sanity/ui/css'
+import {useEffect, useState} from 'react'
+
+import type {ComponentType, Props} from '../../types'
+
+/** @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>,
+): React.JSX.Element {
+  const {
+    as: As = DEFAULT_SKELETON_ELEMENT,
+    animated = false,
+    className,
+    delay,
+    ...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,
+        ...rest,
+      })}
+      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'
+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

@@ -1,11 +1,11 @@
 import {Flex, Spinner} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_TEXT_SIZE_OPTIONS} from '../../../__workshop__/constants'
+import {WORKSHOP_TEXT_FONT_SIZE_OPTIONS} from '$workshop'
 
-export default function Props() {
-  const muted = useBoolean('Muted', false, 'Props')
-  const size = useSelect('Size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
+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">

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

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/spinner',
   title: 'Spinner',
   stories: [
@@ -11,4 +11,6 @@ export default defineScope({
       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

@@ -1,46 +1,45 @@
-import {SpinnerIcon} from '@sanity/icons'
-import {forwardRef} from 'react'
-import {keyframes, styled} from 'styled-components'
+import {type ResponsiveProp, spinner} from '@sanity/ui/css'
+import type {FontTextSize} from '@sanity/ui/theme'
 
-import {Text} from '../text'
+import type {ComponentType, Props} from '../../types'
+import {Text} from '../text/text'
+import {AnimatedSpinnerIcon} from './animatedSpinnerIcon'
 
-/**
- * @public
- */
-export interface SpinnerProps {
+/** @public */
+export const DEFAULT_SPINNER_ELEMENT = 'div'
+
+/** @public */
+export type SpinnerOwnProps = {
   muted?: boolean
-  size?: number | number[]
+  size?: ResponsiveProp<FontTextSize>
 }
 
-const rotate = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
+/** @public */
+export type SpinnerElementType = 'div' | 'span' | ComponentType
 
-  to {
-    transform: rotate(360deg);
-  }
-`
-
-const StyledSpinner = styled(Text)`
-  & > span > svg {
-    animation: ${rotate} 500ms linear infinite;
-  }
-`
+/** @public */
+export type SpinnerProps<E extends SpinnerElementType = SpinnerElementType> = Props<
+  SpinnerOwnProps,
+  E
+>
 
 /**
  * Indicate that something is loading for an indeterminate amount of time.
  *
  * @public
  */
-export const Spinner = forwardRef(function Spinner(
-  props: SpinnerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
+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 (
-    <StyledSpinner data-ui="Spinner" {...props} ref={ref}>
-      <SpinnerIcon />
-    </StyledSpinner>
+    <Text as={as} data-ui="Spinner" {...rest} className={spinner({className})}>
+      <AnimatedSpinnerIcon />
+    </Text>
   )
-})
-Spinner.displayName = 'ForwardRef(Spinner)'
+}

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

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

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

@@ -1,13 +1,13 @@
 import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_SPACE_OPTIONS} from '../../../__workshop__/constants'
+import {WORKSHOP_SPACE_OPTIONS} from '$workshop'
 
-export default function PlainStory() {
+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 space={useSelect('Space', WORKSHOP_SPACE_OPTIONS, 0, 'Props')}>
+        <Stack gap={useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 0)}>
           <Card padding={[2, 3, 4]} shadow={1}>
             <Text align="center" muted>
               Stack item

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

@@ -1,43 +1,60 @@
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
+import {stack} from '@sanity/ui/css'
 
-import {useArrayProp} from '../../hooks'
-import {Box, BoxProps} from '../box'
-import {responsiveStackSpaceStyle, ResponsiveStackSpaceStyleProps, stackBaseStyle} from './styles'
+import type {Props} from '../../types'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
 
-/**
- * @public
- */
-export interface StackProps extends BoxProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  space?: number | number[]
-}
+/** @public */
+export const DEFAULT_STACK_ELEMENT = 'div'
 
-const StyledStack = styled(Box)<ResponsiveStackSpaceStyleProps>(
-  stackBaseStyle,
-  responsiveStackSpaceStyle,
-)
+/** @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 const Stack = forwardRef(function Stack(
-  props: StackProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {as, space, ...restProps} = props
+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 (
-    <StyledStack
-      data-as={typeof as === 'string' ? as : undefined}
+    <Box
       data-ui="Stack"
-      {...restProps}
-      $space={useArrayProp(space)}
-      forwardedAs={as}
-      ref={ref}
+      {...rest}
+      as={as}
+      gridAutoRows="min"
+      className={stack({className})}
+      display="grid"
+      gap={gap}
     />
   )
-})
-Stack.displayName = 'ForwardRef(Stack)'
+}

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

@@ -1,7 +1,7 @@
 import {Box, Flex, Switch, Text} from '@sanity/ui'
 import {useCallback, useState} from 'react'
 
-export default function ExampleStory() {
+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>) => {

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

@@ -1,11 +1,13 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+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

@@ -2,7 +2,7 @@ import {Flex, Switch} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 import {useCallback} from 'react'
 
-export default function PropsStory() {
+export default function PropsStory(): React.JSX.Element {
   const checked = useBoolean('Checked', false)
   const indeterminate = useBoolean('Indeterminate', false)
   const readOnly = useBoolean('Read only', false)