@sanity/ui 4.0.0-static.9 → 4.0.0

package/src/core/primitives/radio/radio.tsx

@@ -1,64 +0,0 @@
-import {radio, radioInput, radioPresentation} from '@sanity/ui/css'
-import {useImperativeHandle, useRef} from 'react'
-
-import {useCustomValidity} from '../../hooks/useCustomValidity'
-import type {ComponentType, Props} from '../../types'
-
-/** @public */
-export const DEFAULT_RADIO_ELEMENT = 'input'
-
-/** @public */
-export type RadioOwnProps = {
-  customValidity?: string
-}
-
-/** @public */
-export type RadioElementType = 'input' | ComponentType
-
-/** @public */
-export type RadioProps<E extends RadioElementType = RadioElementType> = Props<RadioOwnProps, E>
-
-/**
- * The `Radio` component allows the user to select one option from a set.
- *
- * @public
- */
-export function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>(
-  props: RadioProps<E>,
-): React.JSX.Element {
-  const {
-    as: Element = DEFAULT_RADIO_ELEMENT,
-    className,
-    disabled,
-    style,
-    customValidity,
-    readOnly,
-    ref: forwardedRef,
-    ...rest
-  } = props as RadioProps<typeof DEFAULT_RADIO_ELEMENT>
-
-  const ref = useRef<HTMLInputElement | null>(null)
-
-  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
-  useCustomValidity(ref, customValidity)
-
-  return (
-    <div className={radio({className})} data-ui="Radio" style={style}>
-      <Element
-        {...rest}
-        className={radioInput()}
-        data-invalid={customValidity ? '' : undefined}
-        data-read-only={!disabled && readOnly ? '' : undefined}
-        disabled={disabled || readOnly}
-        readOnly={readOnly}
-        ref={ref}
-        type="radio"
-      />
-      <span className={radioPresentation()} />
-    </div>
-  )
-}

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

@@ -1,13 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/select',
-  title: 'Select',
-  stories: [
-    {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
-    {name: 'read-only', title: 'Read-only', component: lazy(() => import('./readOnly'))},
-  ],
-}
-
-export default scope

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

@@ -1,39 +0,0 @@
-import {Card, Container, Label, Select, Stack} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_RADIUS_OPTIONS, WORKSHOP_TEXT_FONT_SIZE_OPTIONS} from '$workshop'
-
-export default function PlainStory(): React.JSX.Element {
-  const border = useBoolean('Border', true)
-  const disabled = useBoolean('Disabled', false)
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS)
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS)
-  const readOnly = useBoolean('Read only', false)
-
-  return (
-    <Container width={0}>
-      <Card padding={4}>
-        <Stack gap={3}>
-          <Label as="label" htmlFor="select">
-            Select
-          </Label>
-
-          <Select
-            border={border}
-            disabled={disabled}
-            fontSize={fontSize}
-            id="select-example"
-            radius={radius}
-            readOnly={readOnly}
-          >
-            <option value="a">Option A</option>
-            <option value="b">Option B</option>
-            <option value="c">Option C</option>
-            <option value="d">Option D</option>
-            <option value="e">Option E</option>
-          </Select>
-        </Stack>
-      </Card>
-    </Container>
-  )
-}

package/src/core/primitives/select/__workshop__/readOnly.tsx

@@ -1,23 +0,0 @@
-import {Card, Container, Label, Select, Stack} from '@sanity/ui'
-
-export default function ReadOnlyStory(): React.JSX.Element {
-  return (
-    <Container width={0}>
-      <Card padding={4}>
-        <Stack gap={3}>
-          <Label as="label" htmlFor="select">
-            Select
-          </Label>
-
-          <Select id="select-example" readOnly>
-            <option value="a">Option A</option>
-            <option value="b">Option B</option>
-            <option value="c">Option C</option>
-            <option value="d">Option D</option>
-            <option value="e">Option E</option>
-          </Select>
-        </Stack>
-      </Card>
-    </Container>
-  )
-}

package/src/core/primitives/select/select.tsx

@@ -1,75 +0,0 @@
-import {ChevronDownIcon} from '@sanity/icons'
-import {_inputElement, select, selectPresentation, type SelectStyleProps} from '@sanity/ui/css'
-import {useImperativeHandle, useRef} from 'react'
-
-import {useCustomValidity} from '../../hooks/useCustomValidity'
-import type {ComponentType, Props} from '../../types'
-import {Box} from '../box/box'
-import {Text} from '../text/text'
-
-/** @public */
-export const DEFAULT_SELECT_ELEMENT = 'select'
-
-/** @public */
-export type SelectOwnProps = SelectStyleProps & {
-  customValidity?: string
-  readOnly?: boolean
-}
-
-/** @public */
-export type SelectElementType = 'select' | ComponentType
-
-/** @public */
-export type SelectProps<E extends SelectElementType = SelectElementType> = Props<SelectOwnProps, E>
-
-/**
- * The `Select` component provides control of options.
- *
- * @public
- */
-export function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEMENT>(
-  props: SelectProps<E>,
-): React.JSX.Element {
-  const {
-    as: Element = DEFAULT_SELECT_ELEMENT,
-    border = true,
-    children,
-    customValidity,
-    disabled,
-    fontSize = 2,
-    gap = 2,
-    padding = 3,
-    radius = 1,
-    readOnly,
-    ref: forwardedRef,
-    ...rest
-  } = props as SelectProps<typeof DEFAULT_SELECT_ELEMENT>
-
-  const ref = useRef<HTMLSelectElement | null>(null)
-
-  useImperativeHandle<HTMLSelectElement | null, HTMLSelectElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
-  useCustomValidity(ref, customValidity)
-
-  return (
-    <div
-      data-ui="Select"
-      className={select({border, fontSize, gap, padding, radius})}
-      data-icon-right=""
-    >
-      <Element {...rest} className={_inputElement()} disabled={disabled || readOnly} ref={ref}>
-        {children}
-      </Element>
-      <span className={selectPresentation()}>
-        <Box as="span" display="inline-block" padding={padding}>
-          <Text size={fontSize}>
-            <ChevronDownIcon />
-          </Text>
-        </Box>
-      </span>
-    </div>
-  )
-}

package/src/core/primitives/selectable/selectable.tsx

@@ -1,50 +0,0 @@
-import {_selectable, type SelectableStyleProps} from '@sanity/ui/css'
-import type {ElementTone} from '@sanity/ui/theme'
-
-import type {ComponentType, Props} from '../../types'
-import {Box, type BoxOwnProps} from '../box/box'
-
-/** @internal */
-export const DEFAULT_SELECTABLE_ELEMENT = 'button'
-
-/** @internal */
-export type SelectableOwnProps = BoxOwnProps &
-  SelectableStyleProps & {
-    disabled?: boolean
-    href?: string
-    selected?: boolean
-    tone?: ElementTone
-    type?: 'button'
-  }
-
-/** @internal */
-export type SelectableElementType = 'button' | 'a' | ComponentType
-
-/** @internal */
-export type SelectableProps<E extends SelectableElementType = SelectableElementType> = Props<
-  SelectableOwnProps,
-  E
->
-
-/** @internal */
-export function Selectable<E extends SelectableElementType = typeof DEFAULT_SELECTABLE_ELEMENT>(
-  props: SelectableProps<E>,
-): React.JSX.Element {
-  const {
-    as = DEFAULT_SELECTABLE_ELEMENT,
-    className,
-    radius,
-    selected,
-    tone,
-    ...rest
-  } = props as SelectableProps<typeof DEFAULT_SELECTABLE_ELEMENT>
-
-  return (
-    <Box
-      {...rest}
-      as={as}
-      className={_selectable({className, radius, tone})}
-      data-selected={selected ? '' : undefined}
-    />
-  )
-}

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

@@ -1,70 +0,0 @@
-import {
-  Box,
-  Card,
-  CodeSkeleton,
-  Container,
-  Flex,
-  HeadingSkeleton,
-  LabelSkeleton,
-  Skeleton,
-  Stack,
-  Text,
-  TextSkeleton,
-} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
-
-export default function SkeletonDelayStory(): React.JSX.Element {
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
-  const animated = useBoolean('Animated', true)
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Container width={1}>
-        <Text muted>Delayed by 2000ms</Text>
-        <Card tone={tone} marginTop={4} padding={2} radius={2} border>
-          <Flex align="center">
-            <Skeleton
-              style={{width: 90, height: 90}}
-              radius={2}
-              animated={animated}
-              marginRight={3}
-              delay={1000}
-            />
-            <Stack flex={1} gap={2}>
-              <HeadingSkeleton
-                size={4}
-                style={{width: '100%'}}
-                radius={1}
-                animated={animated}
-                delay={1000}
-              />
-              <TextSkeleton
-                size={1}
-                style={{width: '100%'}}
-                radius={1}
-                animated={animated}
-                delay={1000}
-              />
-              <LabelSkeleton
-                size={1}
-                style={{width: '100%'}}
-                radius={1}
-                animated={animated}
-                delay={1000}
-              />
-              <CodeSkeleton
-                size={1}
-                style={{width: '100%'}}
-                radius={1}
-                animated={animated}
-                delay={1000}
-              />
-            </Stack>
-          </Flex>
-        </Card>
-      </Container>
-    </Box>
-  )
-}

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

@@ -1,13 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/skeleton',
-  title: 'Skeleton',
-  stories: [
-    {name: 'skeleton', title: 'Skeleton', component: lazy(() => import('./skeleton'))},
-    {name: 'skeleton-delay', title: 'Skeleton delay', component: lazy(() => import('./delay'))},
-  ],
-}
-
-export default scope

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

@@ -1,64 +0,0 @@
-import {
-  Box,
-  Card,
-  CodeSkeleton,
-  Container,
-  Flex,
-  Grid,
-  HeadingSkeleton,
-  LabelSkeleton,
-  Skeleton,
-  Stack,
-  TextSkeleton,
-} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
-
-export default function SkeletonStory(): React.JSX.Element {
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
-  const animated = useBoolean('Animated', true)
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Container width={1}>
-        <Stack gap={4}>
-          {[1, 2, 3].map((item) => (
-            <Card key={item} tone={tone} padding={2} radius={2} border>
-              <Flex align="center">
-                <Grid gap={2} gridTemplateColumns={2} marginRight={3}>
-                  <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
-                  <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
-                  <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
-                  <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
-                </Grid>
-                <Stack gap={2} flex={1}>
-                  <HeadingSkeleton style={{width: '100%'}} radius={1} animated={animated} />
-                  <TextSkeleton style={{width: '100%'}} radius={1} animated={animated} />
-                  <LabelSkeleton style={{width: '100%'}} radius={1} animated={animated} />
-                  <CodeSkeleton style={{width: '100%'}} radius={1} animated={animated} />
-                </Stack>
-              </Flex>
-              <Flex marginTop={2}>
-                <Skeleton
-                  style={{height: 50}}
-                  flex={1}
-                  marginRight={1}
-                  radius={2}
-                  animated={animated}
-                />
-                <Skeleton
-                  style={{height: 50}}
-                  flex={1}
-                  marginLeft={1}
-                  radius={2}
-                  animated={animated}
-                />
-              </Flex>
-            </Card>
-          ))}
-        </Stack>
-      </Container>
-    </Box>
-  )
-}

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

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

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

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

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

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