@sanity/ui 4.0.0-beta.7 → 4.0.0-next.0

package/src/primitives/select/Select.tsx

@@ -1,76 +0,0 @@
-import {SelectIcon} from '@sanity/icons'
-import {_input_element, select, select_presentation, type SelectStyleProps} from '@sanity/ui-css'
-import {useImperativeHandle, useRef} from 'react'
-
-import type {ComponentType, Props} from '../../core/types'
-import {useCustomValidity} from '../../hooks/useCustomValidity'
-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,
-    flex,
-    fontSize = 2,
-    gap = 2,
-    padding = 3,
-    radius = 2,
-    readOnly,
-    ref: forwardedRef,
-    width = 'fill',
-    ...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 (
-    <span
-      className={select({border, fontSize, flex, gap, padding, radius, width})}
-      data-icon-right=""
-      data-ui="Select"
-    >
-      <Element {...rest} ref={ref} className={_input_element()} disabled={disabled || readOnly}>
-        {children}
-      </Element>
-      <span className={select_presentation()}>
-        <span>
-          <Text size={fontSize}>
-            <SelectIcon />
-          </Text>
-        </span>
-      </span>
-    </span>
-  )
-}

package/src/primitives/select/__workshop__/Plain.tsx

@@ -1,37 +0,0 @@
-import {FONT_TEXT_SIZE, RADIUS, Select, Stack, Text} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {CardWrapper} from '$workshop'
-
-export default function PlainStory(): React.JSX.Element {
-  const border = useBoolean('Border', true)
-  const disabled = useBoolean('Disabled', false)
-  const fontSize = useSelect('Font size', FONT_TEXT_SIZE)
-  const radius = useSelect('Radius', RADIUS)
-  const readOnly = useBoolean('Read only', false)
-
-  return (
-    <CardWrapper width={0}>
-      <Stack gap={3}>
-        <Text as="label" htmlFor="select" size={1} weight="medium">
-          Select
-        </Text>
-
-        <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>
-    </CardWrapper>
-  )
-}

package/src/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/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/primitives/selectable/Selectable.tsx

@@ -1,48 +0,0 @@
-import {selectable, SELECTABLE_STYLE_PROP_KEYS, type SelectableStyleProps} from '@sanity/ui-css'
-
-import {_splitKeys} from '../../core/_keys'
-import type {ComponentType, Props} from '../../core/types'
-
-/** @public */
-export const DEFAULT_SELECTABLE_ELEMENT = 'button'
-
-/** @public */
-export interface SelectableOwnProps extends SelectableStyleProps {
-  selected?: boolean
-}
-
-/** @public */
-export type SelectableElementType = 'a' | 'button' | 'span' | ComponentType
-
-/** @public */
-export type SelectableProps<E extends SelectableElementType = SelectableElementType> = Props<
-  SelectableOwnProps,
-  E
->
-
-/** @public */
-export function Selectable<E extends SelectableElementType = typeof DEFAULT_SELECTABLE_ELEMENT>(
-  props: SelectableProps<E>,
-): React.JSX.Element {
-  const [
-    styleProps,
-    {
-      as: Element = DEFAULT_SELECTABLE_ELEMENT,
-      selected,
-      // split DOM props
-      ...domProps
-    },
-  ] = _splitKeys(
-    props as SelectableProps<typeof DEFAULT_SELECTABLE_ELEMENT>,
-    SELECTABLE_STYLE_PROP_KEYS,
-  )
-
-  return (
-    <Element
-      data-ui="Selectable"
-      {...domProps}
-      className={selectable(styleProps)}
-      data-pressed={selected ? '' : props['data-pressed']}
-    />
-  )
-}

package/src/primitives/selectable/__workshop__/DataProps.tsx

@@ -1,24 +0,0 @@
-import {Selectable, Stack, Text} from '@sanity/ui'
-
-import {CardWrapper} from '$workshop'
-
-export default function DataPropsStory(): React.JSX.Element {
-  return (
-    <CardWrapper>
-      <Stack gap={4}>
-        <Selectable data-enabled="" padding={3}>
-          <Text size={1}>Selectable {`[data-enabled]`}</Text>
-        </Selectable>
-        <Selectable data-hovered="" padding={3}>
-          <Text size={1}>Selectable {`[data-hovered]`}</Text>
-        </Selectable>
-        <Selectable data-pressed="" padding={3}>
-          <Text size={1}>Selectable {`[data-pressed]`}</Text>
-        </Selectable>
-        <Selectable data-selected="" padding={3}>
-          <Text size={1}>Selectable {`[data-selected]`}</Text>
-        </Selectable>
-      </Stack>
-    </CardWrapper>
-  )
-}

package/src/primitives/selectable/__workshop__/as-link.tsx

@@ -1,13 +0,0 @@
-import {Selectable, Text} from '@sanity/ui'
-
-import {CardWrapper} from '$workshop'
-
-export default function AsLinkStory() {
-  return (
-    <CardWrapper>
-      <Selectable as="a" href="#" padding={4}>
-        <Text>Link</Text>
-      </Selectable>
-    </CardWrapper>
-  )
-}

package/src/primitives/selectable/__workshop__/index.ts

@@ -1,19 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/selectable',
-  title: 'Selectable',
-  stories: [
-    {
-      name: 'data-props',
-      title: 'Data props',
-      component: lazy(() => import('./DataProps')),
-    },
-    {
-      name: 'as-link',
-      title: 'As link',
-      component: lazy(() => import('./as-link')),
-    },
-  ],
-})

package/src/primitives/skeleton/CodeSkeleton.tsx

@@ -1,49 +0,0 @@
-import {code_skeleton, type ResponsiveProp} from '@sanity/ui-css'
-import type {FontCodeSize} from '@sanity/ui-tokens'
-
-import type {Props} from '../../core/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={code_skeleton({
-        className,
-        size,
-      })}
-    />
-  )
-}

package/src/primitives/skeleton/HeadingSkeleton.tsx

@@ -1,48 +0,0 @@
-import {heading_skeleton, type ResponsiveProp} from '@sanity/ui-css'
-import type {FontHeadingSize} from '@sanity/ui-tokens'
-
-import type {Props} from '../../core/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={heading_skeleton({
-        className,
-        size,
-      })}
-    />
-  )
-}

package/src/primitives/skeleton/LabelSkeleton.tsx

@@ -1,47 +0,0 @@
-import {label_skeleton, type ResponsiveProp} from '@sanity/ui-css'
-import type {FontLabelSize} from '@sanity/ui-tokens'
-
-import type {Props} from '../../core/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={label_skeleton({
-        className,
-        size,
-      })}
-    />
-  )
-}

package/src/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 '../../core/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 undefined
-    }
-
-    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={(delay ? visible : true) ? '' : undefined}
-    />
-  )
-}

package/src/primitives/skeleton/TextSkeleton.tsx

@@ -1,49 +0,0 @@
-import {type ResponsiveProp, text_skeleton} from '@sanity/ui-css'
-import type {FontTextSize} from '@sanity/ui-tokens'
-
-import type {Props} from '../../core/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={text_skeleton({
-        className,
-        size,
-      })}
-    />
-  )
-}

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

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

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

@@ -1,63 +0,0 @@
-import {
-  Box,
-  Card,
-  CARD_TONES,
-  CodeSkeleton,
-  Container,
-  Flex,
-  Grid,
-  HeadingSkeleton,
-  LabelSkeleton,
-  Skeleton,
-  Stack,
-  TextSkeleton,
-} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-
-export default function SkeletonStory(): React.JSX.Element {
-  const tone = useSelect('Tone', CARD_TONES)
-  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} border padding={2} radius={2} tone={tone}>
-              <Flex align="center">
-                <Grid gap={2} gridTemplateColumns={2} marginRight={3}>
-                  <Skeleton animated={animated} radius={2} style={{width: 40, height: 40}} />
-                  <Skeleton animated={animated} radius={2} style={{width: 40, height: 40}} />
-                  <Skeleton animated={animated} radius={2} style={{width: 40, height: 40}} />
-                  <Skeleton animated={animated} radius={2} style={{width: 40, height: 40}} />
-                </Grid>
-                <Stack flex={1} gap={2}>
-                  <HeadingSkeleton animated={animated} radius={1} style={{width: '100%'}} />
-                  <TextSkeleton animated={animated} radius={1} style={{width: '100%'}} />
-                  <LabelSkeleton animated={animated} radius={1} style={{width: '100%'}} />
-                  <CodeSkeleton animated={animated} radius={1} style={{width: '100%'}} />
-                </Stack>
-              </Flex>
-              <Flex marginTop={2}>
-                <Skeleton
-                  animated={animated}
-                  flex={1}
-                  marginRight={1}
-                  radius={2}
-                  style={{height: 50}}
-                />
-                <Skeleton
-                  animated={animated}
-                  flex={1}
-                  marginLeft={1}
-                  radius={2}
-                  style={{height: 50}}
-                />
-              </Flex>
-            </Card>
-          ))}
-        </Stack>
-      </Container>
-    </Box>
-  )
-}

package/src/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