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

package/src/ui/primitives/popover/popoverCard.tsx

@@ -1,155 +0,0 @@
-import {Strategy} from '@floating-ui/react-dom'
-import {motion, MotionProps} from 'framer-motion'
-import {CSSProperties, ForwardedRef, forwardRef, memo, useMemo} from 'react'
-
-import {POPOVER_MOTION_PROPS} from '../../constants'
-import {Placement, PopoverMargins, Props} from '../../types'
-import {Arrow, useLayer} from '../../utils'
-import {Card, CardProps} from '../card'
-import {Flex} from '../flex'
-import {
-  DEFAULT_POPOVER_ARROW_HEIGHT,
-  DEFAULT_POPOVER_ARROW_RADIUS,
-  DEFAULT_POPOVER_ARROW_WIDTH,
-  DEFAULT_POPOVER_MARGINS,
-} from './constants'
-
-/** @internal */
-export interface PopoverCardProps extends CardProps {
-  /** @beta*/
-  __unstable_margins?: PopoverMargins
-  animate?: boolean
-  arrow: boolean
-  arrowRef: ForwardedRef<HTMLDivElement>
-  arrowX?: number
-  arrowY?: number
-  originX?: number
-  originY?: number
-  placement: Placement
-  referenceWidth?: number
-  strategy: Strategy
-  x: number | null
-  y: number | null
-}
-
-const MotionCard = motion.create(Card)
-
-/**
- * @internal
- */
-export const PopoverCard = memo(
-  forwardRef(function PopoverCard(
-    props: Props<PopoverCardProps, 'div'>,
-    ref: ForwardedRef<HTMLDivElement>,
-  ) {
-    const {
-      __unstable_margins: marginsProp,
-      animate,
-      arrow,
-      arrowRef,
-      arrowX,
-      arrowY,
-      children,
-      maxWidth,
-      padding,
-      placement,
-      originX,
-      originY,
-      overflow,
-      radius,
-      referenceWidth,
-      scheme,
-      shadow,
-      strategy,
-      style,
-      tone,
-      // width,
-      x: xProp,
-      y: yProp,
-      ...restProps
-    } = props
-
-    const layer = useLayer()
-
-    // Get margins: [top, right, bottom, left]
-    const margins: PopoverMargins = useMemo(
-      () => marginsProp || DEFAULT_POPOVER_MARGINS,
-      [marginsProp],
-    )
-
-    // Translate according to margins
-    const x = (xProp ?? 0) + margins[3]
-    const y = (yProp ?? 0) + margins[0]
-
-    const rootStyle: CSSProperties = useMemo(
-      () => ({
-        left: x,
-        originX,
-        originY,
-        position: strategy,
-        top: y,
-        width: referenceWidth,
-        zIndex: layer.zIndex ?? 100,
-        willChange: animate ? 'transform' : undefined,
-        ...style,
-      }),
-      [animate, layer.zIndex, originX, originY, referenceWidth, strategy, style, x, y],
-    )
-
-    const arrowStyle: CSSProperties = useMemo(
-      () => ({
-        left: arrowX !== null ? arrowX : undefined,
-        top: arrowY !== null ? arrowY : undefined,
-        right: undefined,
-        bottom: undefined,
-      }),
-      [arrowX, arrowY],
-    )
-
-    return (
-      <MotionCard
-        className="popover-card"
-        data-ui="Popover"
-        {...(restProps as CardProps & MotionProps)}
-        data-placement={placement}
-        direction="column"
-        display="flex"
-        radius={radius}
-        ref={ref}
-        scheme={scheme}
-        shadow={shadow}
-        sizing="border"
-        style={rootStyle}
-        tone={tone}
-        variants={POPOVER_MOTION_PROPS.card}
-        transition={POPOVER_MOTION_PROPS.transition}
-        initial={animate ? ['hidden', 'initial'] : undefined}
-        animate={animate ? ['visible', 'scaleIn'] : undefined}
-        exit={animate ? ['hidden', 'scaleOut'] : undefined}
-      >
-        <Flex
-          data-ui="Popover__wrapper"
-          direction="column"
-          flex={1}
-          maxWidth={maxWidth}
-          overflow={overflow}
-        >
-          <Flex direction="column" flex={1} padding={padding}>
-            {children}
-          </Flex>
-        </Flex>
-
-        {arrow && (
-          <Arrow
-            ref={arrowRef}
-            style={arrowStyle}
-            width={DEFAULT_POPOVER_ARROW_WIDTH}
-            height={DEFAULT_POPOVER_ARROW_HEIGHT}
-            radius={DEFAULT_POPOVER_ARROW_RADIUS}
-          />
-        )}
-      </MotionCard>
-    )
-  }),
-)
-PopoverCard.displayName = 'Memo(ForwardRef(PopoverCard))'

package/src/ui/primitives/popover/types.ts

@@ -1,6 +0,0 @@
-/** @beta */
-export type PopoverUpdateCallback = () => void
-
-/** @public */
-// todo: remove `auto` from PopoverWidth
-export type PopoverWidth = number | 'auto'

package/src/ui/primitives/radio/__workshop__/example.tsx

@@ -1,63 +0,0 @@
-import {Box, Container, Flex, Radio, Stack, Text} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-import {useCallback, useState} from 'react'
-
-export default function ExampleStory() {
-  const [value, setValue] = useState('first-option')
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const readOnly = useBoolean('Read only', false, 'Props')
-
-  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value)
-  }, [])
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[3, 4, 5]} sizing="border">
-      <Container width={0}>
-        <Stack space={3}>
-          <Flex align="center" as="label">
-            <Radio
-              checked={value === 'first-option'}
-              disabled={disabled}
-              name="name"
-              onChange={handleChange}
-              readOnly={readOnly}
-              value="first-option"
-            />
-            <Box marginLeft={2}>
-              <Text>First option</Text>
-            </Box>
-          </Flex>
-
-          <Flex align="center" as="label">
-            <Radio
-              checked={value === 'second-option'}
-              disabled={disabled}
-              name="name"
-              onChange={handleChange}
-              readOnly={readOnly}
-              value="second-option"
-            />
-            <Box marginLeft={2}>
-              <Text>Second option</Text>
-            </Box>
-          </Flex>
-
-          <Flex align="center" as="label">
-            <Radio
-              checked={value === 'third-option'}
-              disabled={disabled}
-              name="name"
-              onChange={handleChange}
-              readOnly={readOnly}
-              value="third-option"
-            />
-            <Box marginLeft={2}>
-              <Text>Third option</Text>
-            </Box>
-          </Flex>
-        </Stack>
-      </Container>
-    </Flex>
-  )
-}

package/src/ui/primitives/radio/__workshop__/index.ts

@@ -1,11 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/radio',
-  title: 'Radio',
-  stories: [
-    {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
-    {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
-  ],
-})

package/src/ui/primitives/radio/__workshop__/plain.tsx

@@ -1,28 +0,0 @@
-import {Flex, Radio} from '@sanity/ui'
-import {useAction, useBoolean} from '@sanity/ui-workshop'
-
-export default function PlainStory() {
-  const checked = useBoolean('Checked', false, 'Props')
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const id = 'radioStory'
-  const name = 'radioStory'
-  const onBlur = useAction('onBlur')
-  const onChange = useAction('onChange')
-  const onFocus = useAction('onFocus')
-  const readOnly = useBoolean('Read only', false, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[3, 4, 5]} sizing="border">
-      <Radio
-        checked={checked}
-        disabled={disabled}
-        id={id}
-        name={name}
-        onBlur={onBlur}
-        onChange={onChange}
-        onFocus={onFocus}
-        readOnly={readOnly}
-      />
-    </Flex>
-  )
-}

package/src/ui/primitives/radio/index.ts

@@ -1 +0,0 @@
-export * from './radio'

package/src/ui/primitives/radio/radio.tsx

@@ -1,49 +0,0 @@
-import {composeClassNames, radio} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef, useImperativeHandle, useRef} from 'react'
-
-import {useCustomValidity} from '../../hooks'
-import {Props} from '../../types'
-
-/**
- * @public
- */
-export interface RadioProps {
-  customValidity?: string
-}
-
-/**
- * The `Radio` component allows the user to select one option from a set.
- *
- * @public
- */
-export const Radio = forwardRef(function Radio(
-  props: Props<RadioProps, 'input'>,
-  forwardedRef: ForwardedRef<HTMLInputElement>,
-) {
-  const {className, disabled, style, customValidity, readOnly, ...restProps} = props
-  const ref = useRef<HTMLInputElement | null>(null)
-
-  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
-  useCustomValidity(ref, customValidity)
-
-  return (
-    <div className={composeClassNames(className, radio())} data-ui="Radio" style={style}>
-      <input
-        data-read-only={!disabled && readOnly ? '' : undefined}
-        data-error={customValidity ? '' : undefined}
-        {...restProps}
-        disabled={disabled || readOnly}
-        readOnly={readOnly}
-        ref={ref}
-        type="radio"
-      />
-      <span />
-    </div>
-  )
-})
-
-Radio.displayName = 'ForwardRef(Radio)'

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

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

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

@@ -1,30 +0,0 @@
-import {Card, Container, Label, Select, Stack} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_TEXT_FONT_SIZE_OPTIONS} from '../../../../../workshop/constants'
-
-export default function PlainStory() {
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
-  const readOnly = useBoolean('Read only', false, 'Props')
-
-  return (
-    <Container width={0}>
-      <Card padding={4}>
-        <Stack space={3}>
-          <Label as="label" htmlFor="select">
-            Select
-          </Label>
-
-          <Select disabled={disabled} fontSize={fontSize} id="select-example" 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/ui/primitives/select/__workshop__/readOnly.tsx

@@ -1,23 +0,0 @@
-import {Card, Container, Label, Select, Stack} from '@sanity/ui'
-
-export default function ReadOnlyStory() {
-  return (
-    <Container width={0}>
-      <Card padding={4}>
-        <Stack space={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/ui/primitives/select/index.ts

@@ -1 +0,0 @@
-export * from './select'

package/src/ui/primitives/select/select.tsx

@@ -1,85 +0,0 @@
-import {ChevronDownIcon} from '@sanity/icons'
-import {
-  _inputElement,
-  ResponsiveProp,
-  select,
-  selectPresentation,
-  SelectStyleProps,
-} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
-import {ForwardedRef, forwardRef, useImperativeHandle, useRef} from 'react'
-
-import {useCustomValidity} from '../../hooks'
-import {Props} from '../../types'
-import {Box} from '../box'
-import {Text} from '../text'
-
-/**
- * @public
- */
-export interface SelectProps extends SelectStyleProps {
-  customValidity?: string
-  readOnly?: boolean
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
-}
-
-/**
- * The `Select` component provides control of options.
- *
- * @public
- */
-export const Select = forwardRef(function Select(
-  props: Props<SelectProps, 'select'>,
-  forwardedRef: ForwardedRef<HTMLSelectElement>,
-) {
-  const {
-    border = true,
-    children,
-    customValidity,
-    disabled,
-    fontSize = 2,
-    gap,
-    padding = 3,
-    radius = 1,
-    readOnly,
-    space = 2,
-    ...restProps
-  } = props
-
-  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, padding, radius, gap: gap ?? space})}
-      data-icon-right=""
-    >
-      <select
-        data-read-only={!disabled && readOnly ? '' : undefined}
-        {...restProps}
-        className={_inputElement()}
-        disabled={disabled || readOnly}
-        ref={ref}
-      >
-        {children}
-      </select>
-      <span className={selectPresentation()}>
-        <Box as="span" display="inline-block" padding={padding}>
-          <Text size={fontSize}>
-            <ChevronDownIcon />
-          </Text>
-        </Box>
-      </span>
-    </div>
-  )
-})
-
-Select.displayName = 'ForwardRef(Select)'

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

@@ -1,16 +0,0 @@
-import {Flex, Spinner} from '@sanity/ui'
-import {FontTextSize} from '@sanity/ui/theme'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_TEXT_SIZE_OPTIONS} from '../../../../../workshop/constants'
-
-export default function Props() {
-  const muted = useBoolean('Muted', false, 'Props')
-  const size = useSelect('Size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Spinner muted={muted} size={size as FontTextSize} />
-    </Flex>
-  )
-}

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

@@ -1,14 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/spinner',
-  title: 'Spinner',
-  stories: [
-    {
-      name: 'props',
-      title: 'Props',
-      component: lazy(() => import('./Props')),
-    },
-  ],
-})

package/src/ui/primitives/spinner/animatedSpinnerIcon.tsx

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

package/src/ui/primitives/spinner/index.ts

@@ -1 +0,0 @@
-export * from './spinner'

package/src/ui/primitives/spinner/spinner.tsx

@@ -1,33 +0,0 @@
-import {ResponsiveProp, spinner} from '@sanity/ui/css'
-import {FontTextSize} from '@sanity/ui/theme'
-import {ForwardedRef, forwardRef} from 'react'
-
-import {Props} from '../../types'
-import {Text} from '../text'
-import {AnimatedSpinnerIcon} from './animatedSpinnerIcon'
-
-/**
- * @public
- */
-export interface SpinnerProps {
-  muted?: boolean
-  size?: ResponsiveProp<FontTextSize>
-}
-
-/**
- * Indicate that something is loading for an indeterminate amount of time.
- *
- * @public
- */
-export const Spinner = forwardRef(function Spinner(
-  props: Props<SpinnerProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  return (
-    <Text data-ui="Spinner" {...props} className={spinner()} ref={ref}>
-      <AnimatedSpinnerIcon />
-    </Text>
-  )
-})
-
-Spinner.displayName = 'ForwardRef(Spinner)'

package/src/ui/primitives/stack/__workshop__/index.ts

@@ -1,14 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/stack',
-  title: 'Stack',
-  stories: [
-    {
-      name: 'plain',
-      title: 'Plain',
-      component: lazy(() => import('./plain')),
-    },
-  ],
-})

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

@@ -1,32 +0,0 @@
-import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_SPACE_OPTIONS} from '../../../../../workshop/constants'
-
-export default function PlainStory() {
-  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')}>
-          <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/ui/primitives/stack/index.ts

@@ -1 +0,0 @@
-export * from './stack'

package/src/ui/primitives/stack/stack.tsx

@@ -1,40 +0,0 @@
-import {ResponsiveProp} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
-import {ForwardedRef, forwardRef} from 'react'
-
-import {Props} from '../../types'
-import {Box, BoxProps} from '../box'
-
-/**
- * @public
- */
-export interface StackProps extends Omit<BoxProps, 'direction' | 'display' | 'gapX' | 'gapY'> {
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
-}
-
-/**
- * The `Stack` component is used to place elements on top of each other.
- *
- * @public
- */
-export const Stack = forwardRef(function Stack(
-  props: Props<StackProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {as, gap, space, ...restProps} = props
-
-  return (
-    <Box
-      data-ui="Stack"
-      {...restProps}
-      as={as}
-      direction="column"
-      display="flex"
-      gap={gap ?? space}
-      ref={ref}
-    />
-  )
-})
-
-Stack.displayName = 'ForwardRef(Stack)'

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

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