@sanity/ui 4.2.0 → 5.0.0-alpha.10

package/src/components/radio/radio.css

@@ -0,0 +1,97 @@
+/**
+  * Custom radio control, base
+  */
+.sui-RadioMark {
+  /* Background and border colours are computed relatively in hover states;
+     we use custom properties to make this easier */
+  --background-color: var(--backdrop);
+  --border-color: var(--separator-high);
+  background-color: var(--background-color);
+  border: 1px solid var(--border-color);
+  transition: var(--hover-transition);
+}
+
+/**
+  * Custom radio marker
+  */
+.sui-RadioMark:after {
+  content: '';
+  background: var(--active-foreground-emphasized);
+  border-radius: var(--radius-round);
+  display: block;
+  inset: 0;
+  position: absolute;
+  opacity: 0;
+  transition: inset 100ms linear;
+}
+
+/**
+  * Hover - uses relative border/background colours to darken/lighten in both normal & error state
+  */
+/** Radio border (unchecked) */
+.sui-Radio:hover .sui-RadioMark {
+  border-color: light-dark(
+    oklch(from var(--border-color) calc(l - var(--hover-lightness-delta)) c h),
+    oklch(from var(--border-color) calc(l + var(--hover-lightness-delta)) c h)
+  );
+}
+
+/* Radio background (checked) */
+.sui-Radio:hover .sui-RadioInput:is(:checked) + .sui-RadioMark {
+  background-color: light-dark(
+    oklch(from var(--background-color) calc(l - var(--hover-lightness-delta)) c h),
+    oklch(from var(--background-color) calc(l + var(--hover-lightness-delta)) c h)
+  );
+}
+
+/**
+  * Focus
+  */
+.sui-RadioInput:focus-visible + .sui-RadioMark {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-offset);
+}
+
+/**
+  * Checked
+  */
+.sui-RadioInput:checked + .sui-RadioMark {
+  --background-color: var(--active-background-emphasized);
+  --border-color: transparent;
+}
+
+.sui-RadioInput:checked + .sui-RadioMark:after {
+  inset: 4px;
+  opacity: 1;
+}
+
+/**
+  * Disabled
+  */
+.sui-RadioInput:disabled + .sui-RadioMark {
+  --background-color: var(--inert-background);
+  --border-color: var(--separator-low);
+}
+
+.sui-RadioInput:disabled + .sui-RadioMark:after {
+  background: light-dark(var(--gray-300), var(--gray-500));
+}
+
+/* Turn hover (and all pointer events) off for disabled radios */
+.sui-Radio:has(:disabled) {
+  pointer-events: none;
+}
+
+/**
+  * Error
+  */
+.sui-RadioMark.sui-error {
+  --border-color: var(--error-separator);
+}
+
+/**
+  * Error, checked
+  */
+.sui-RadioInput:checked + .sui-RadioMark.sui-error {
+  --background-color: var(--error-background-emphasized);
+}

package/src/components/radio/radio.props.ts

@@ -0,0 +1,25 @@
+import {type MarginProps, marginProps} from '../../props/margin'
+import {type PropDef} from '../../types/PropDef'
+
+/** @beta */
+export interface RadioProps extends React.ComponentProps<'input'>, MarginProps {
+  /**
+   * Applies error styling to the radio mark.
+   * @remarks Use when form validation fails. Pair with a visible error message. The prop is visual only.
+   */
+  error?: boolean
+  /**
+   * Visible label next to the radio.
+   */
+  label: React.ReactNode
+}
+
+export const radioProps: Record<string, PropDef> = {
+  error: {
+    type: 'boolean',
+  },
+  label: {
+    type: 'string',
+  },
+  ...marginProps,
+}

package/src/components/skip-to-content/SkipToContent.tsx

@@ -0,0 +1,35 @@
+import clsx from 'clsx'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {Link} from '../link/Link'
+import {Text} from '../text/Text'
+import {VisuallyHidden} from '../visually-hidden/VisuallyHidden'
+import {type SkipToContentProps, skipToContentProps} from './skipToContent.props'
+
+const skipToContentClassName = suffixClassName('sui-SkipToContent')
+
+/** @beta */
+export function SkipToContent(props: SkipToContentProps) {
+  const {className, label, style, ...rest} = getProps(props, skipToContentProps)
+
+  return (
+    <VisuallyHidden
+      as={Link}
+      underlined={false}
+      className={clsx(
+        skipToContentClassName,
+        'sui-position-absolute sui-top2 sui-left2 sui-display-inline-block sui-z-index sui-py2 sui-px3 sui-radius2 sui-text-body1',
+        className,
+      )}
+      style={style}
+      data-ui="SkipToContent"
+      visibleOnFocus
+      {...rest}
+    >
+      <Text size={1}>{label}</Text>
+    </VisuallyHidden>
+  )
+}
+
+export type {SkipToContentProps}

package/src/components/skip-to-content/skip-to-content.css

@@ -0,0 +1,9 @@
+.sui-SkipToContent {
+  --z-index: 9999;
+  background-color: light-dark(var(--gray-900), var(--white));
+  color: light-dark(var(--white), var(--gray-900));
+}
+
+.sui-SkipToContent .sui-Text {
+  color: inherit;
+}

package/src/components/skip-to-content/skipToContent.props.ts

@@ -0,0 +1,25 @@
+import {type PropDef} from '../../types/PropDef'
+
+/** @beta */
+export interface SkipToContentProps extends React.ComponentProps<'a'> {
+  /**
+   * Same-page fragment to jump to.
+   * @remarks Note: The hash character # is required for proper linking.
+   */
+  href: string
+  /**
+   * Visible and announced text.
+   */
+  label: string
+  /**
+   * Not accepted.
+   * @remarks Pass text via `label`.
+   */
+  children?: never
+}
+
+export const skipToContentProps: Record<string, PropDef> = {
+  label: {
+    type: 'string',
+  },
+}

package/src/components/spinner/Spinner.tsx

@@ -0,0 +1,28 @@
+import {SpinnerIcon} from '@sanity/icons/Spinner'
+import clsx from 'clsx'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {Icon} from '../icon/Icon'
+import {type SpinnerProps, spinnerProps} from './spinner.props'
+
+const spinnerClassName = suffixClassName('sui-Spinner')
+
+/** @public */
+export function Spinner({size = 2, ...props}: SpinnerProps) {
+  const {className, style, ...rest} = getProps({size, ...props}, spinnerProps)
+
+  return (
+    <Icon
+      icon={SpinnerIcon}
+      className={clsx(spinnerClassName, className)}
+      style={style}
+      data-ui="Spinner"
+      role="status"
+      aria-label="Loading..."
+      {...rest}
+    />
+  )
+}
+
+export type {SpinnerProps}

package/src/components/spinner/spinner.css

@@ -0,0 +1,10 @@
+.sui-Spinner {
+  --spinner-color: var(--foreground-high);
+  color: var(--spinner-color);
+  animation: 500ms linear 0s infinite normal none running spin;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

package/src/components/spinner/spinner.props.ts

@@ -0,0 +1,19 @@
+import {ICON_SIZE, type IconSize} from '../../types/Icon'
+import {type PropDef} from '../../types/PropDef'
+import type {Responsive} from '../../types/Responsive'
+
+/** @public */
+export interface SpinnerProps extends React.ComponentProps<'svg'> {
+  /**
+   * Size of the spinner icon.
+   */
+  size?: Responsive<IconSize>
+}
+
+export const spinnerProps: Record<string, PropDef> = {
+  size: {
+    type: 'union',
+    className: 'icon-body',
+    values: ICON_SIZE,
+  },
+}

package/src/components/switch/Switch.tsx

@@ -0,0 +1,48 @@
+import clsx from 'clsx'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {Flex} from '../flex/Flex'
+import {Label} from '../label/Label'
+import {VisuallyHidden} from '../visually-hidden/VisuallyHidden'
+import {type SwitchProps, switchProps} from './switch.props'
+
+const switchClassName = suffixClassName('sui-Switch')
+const switchInputClassName = suffixClassName('sui-SwitchInput')
+const switchMarkClassName = suffixClassName('sui-SwitchMark')
+
+/** @beta */
+export function Switch(props: SwitchProps) {
+  const {className, style, disabled, error, label, ...rest} = getProps(props, switchProps)
+
+  return (
+    <Label
+      className={clsx(switchClassName, 'sui-position-relative', className)}
+      style={style}
+      data-ui="Switch"
+      disabled={props.disabled}
+      error={error}
+    >
+      <VisuallyHidden
+        as="input"
+        type="checkbox"
+        role="switch"
+        className={switchInputClassName}
+        disabled={disabled}
+        {...rest}
+      />
+
+      <Flex
+        as="span"
+        className={clsx(switchMarkClassName, error && 'sui-error')}
+        alignItems="center"
+        radius={6}
+        aria-hidden="true"
+      />
+
+      {label}
+    </Label>
+  )
+}
+
+export type {SwitchProps}

package/src/components/switch/switch.css

@@ -0,0 +1,119 @@
+/**
+  * Custom switch control, base
+  */
+.sui-SwitchMark {
+  /* Background and border colours are computed relatively in hover states;
+     we use custom properties to make this easier */
+  --background-color: var(--backdrop);
+  --border-color: var(--separator-high);
+  /* Switch size stored as custom properties to be used with calc
+     for active switch marker's x-axis translation */
+  --width: 25px;
+  --height: 17px;
+  background-color: var(--background-color);
+  border: 1px solid var(--border-color);
+  width: var(--width);
+  height: var(--height);
+  transition: var(--hover-transition);
+}
+
+/**
+  * Custom switch marker
+  */
+.sui-SwitchMark:after {
+  content: '';
+  display: block;
+  background-color: var(--foreground-high);
+  width: 7px;
+  height: 7px;
+  border-radius: var(--radius-round);
+  translate: 50%;
+  transition: translate 100ms linear;
+}
+
+/**
+  * Hover - uses relative border/background colours to darken/lighten in both normal & error state
+  */
+/** Switch border (unchecked) */
+.sui-Switch:hover .sui-SwitchMark {
+  border-color: light-dark(
+    oklch(from var(--border-color) calc(l - var(--hover-lightness-delta)) c h),
+    oklch(from var(--border-color) calc(l + var(--hover-lightness-delta)) c h)
+  );
+}
+
+/* Switch background (checked) */
+.sui-Switch:hover .sui-SwitchInput:is(:checked) + .sui-SwitchMark {
+  background-color: light-dark(
+    oklch(from var(--background-color) calc(l - var(--hover-lightness-delta)) c h),
+    oklch(from var(--background-color) calc(l + var(--hover-lightness-delta)) c h)
+  );
+}
+
+/**
+  * Focus
+  */
+.sui-SwitchInput:focus-visible + .sui-SwitchMark {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-offset);
+}
+
+/**
+  * Checked
+  */
+.sui-SwitchInput:checked + .sui-SwitchMark {
+  --background-color: var(--active-background-emphasized);
+  --border-color: transparent;
+}
+
+.sui-SwitchInput:checked + .sui-SwitchMark:after {
+  background-color: var(--active-foreground-emphasized);
+  translate: calc(var(--width) - 175%);
+}
+
+/**
+  * Disabled
+  */
+.sui-SwitchInput:disabled + .sui-SwitchMark {
+  --background-color: var(--inert-background);
+  --border-color: var(--separator-low);
+}
+
+.sui-SwitchInput:disabled + .sui-SwitchMark:after {
+  background: var(--inert-foreground);
+}
+
+/* Turn hover (and all pointer events) off for disabled switches */
+.sui-Switch:has(:disabled) {
+  pointer-events: none;
+}
+
+/**
+  * Disabled and checked
+  */
+.sui-SwitchInput:disabled:checked + .sui-SwitchMark {
+  --background-color: var(--inert-foreground);
+  --border-color: transparent;
+}
+
+.sui-SwitchInput:disabled:checked + .sui-SwitchMark:after {
+  background-color: var(--inert-background);
+}
+
+/**
+  * Error
+  */
+.sui-SwitchMark.sui-error {
+  --border-color: var(--error-separator);
+}
+
+.sui-SwitchMark.sui-error:after {
+  background-color: var(--error-separator);
+}
+
+/**
+  * Error and checked
+  */
+.sui-SwitchInput:checked + .sui-SwitchMark.sui-error {
+  --background-color: var(--error-background-emphasized);
+}

package/src/components/switch/switch.props.ts

@@ -0,0 +1,25 @@
+import {type MarginProps, marginProps} from '../../props/margin'
+import {type PropDef} from '../../types/PropDef'
+
+/** @beta */
+export interface SwitchProps extends React.ComponentProps<'input'>, MarginProps {
+  /**
+   * Applies error styling to the switch track.
+   * @remarks Use when form validation fails. Pair with a visible error message. The prop is visual only.
+   */
+  error?: boolean
+  /**
+   * Visible label next to the switch.
+   */
+  label: React.ReactNode
+}
+
+export const switchProps: Record<string, PropDef> = {
+  error: {
+    type: 'boolean',
+  },
+  label: {
+    type: 'string',
+  },
+  ...marginProps,
+}

package/src/components/text/Text.tsx

@@ -0,0 +1,53 @@
+import clsx from 'clsx'
+import type {ComponentPropsWithRef, ElementType} from 'react'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {type TextProps, textProps} from './text.props'
+
+const textClassName = suffixClassName('sui-Text')
+
+/** @public */
+export function Text<T extends ElementType = 'span'>({
+  size = 2,
+  ...props
+}: TextProps<T> & Omit<ComponentPropsWithRef<T>, keyof TextProps<T>>) {
+  const {as, children, className, style, ...rest} = getProps({size, ...props}, textProps)
+  const Component = as || 'span'
+
+  if (props.truncate && props.trim) {
+    return (
+      <Component
+        className={clsx(
+          textClassName,
+          className?.replace('sui-line-clamp', '').replace('sui-text-overflow', ''),
+        )}
+        style={style}
+        data-ui="Text"
+        {...rest}
+      >
+        <span
+          className={clsx(
+            'sui-overflow-hidden',
+            props.truncate === 1 ? 'sui-text-overflow' : 'sui-line-clamp',
+          )}
+        >
+          {children}
+        </span>
+      </Component>
+    )
+  }
+
+  return (
+    <Component
+      className={clsx(textClassName, props.truncate && 'sui-overflow-hidden', className)}
+      style={style}
+      data-ui="Text"
+      {...rest}
+    >
+      {children}
+    </Component>
+  )
+}
+
+export type {TextProps}

package/src/components/text/text.css

@@ -0,0 +1,9 @@
+.sui-Text {
+  --text-color: var(--foreground-high);
+  color: var(--text-color);
+}
+
+.sui-Text:where(.sui-text-muted) {
+  --text-color-muted: var(--foreground-low);
+  color: var(--text-color-muted);
+}

package/src/components/text/text.props.ts

@@ -0,0 +1,28 @@
+import {type TypographyProps, typographyProps} from '../../props/typography'
+import {type PropDef} from '../../types/PropDef'
+import type {Responsive} from '../../types/Responsive'
+import {TEXT_SIZE, type TextSize} from '../../types/Text'
+
+/** @public */
+export interface TextProps<T extends React.ElementType = 'span'> extends TypographyProps {
+  /**
+   * HTML element to render.
+   */
+  as?: T
+  /**
+   * Sets font size.
+   */
+  size?: Responsive<TextSize>
+}
+
+export const textProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  size: {
+    type: 'union',
+    className: 'text-body',
+    values: TEXT_SIZE,
+  },
+  ...typographyProps,
+}

package/src/components/tooltip/Tooltip.tsx

@@ -0,0 +1,97 @@
+import clsx from 'clsx'
+import {cloneElement, useId, useState, type ToggleEvent} from 'react'
+
+import {useIsClient} from '../../hooks/useIsClient'
+import {getProps} from '../../utils/getProps'
+import {mergeTriggerProps} from '../../utils/mergeTriggerProps'
+import {renderPortal} from '../../utils/renderPortal'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {type TooltipProps, tooltipProps} from './tooltip.props'
+
+const tooltipClassName = suffixClassName('sui-Tooltip')
+
+function TooltipRoot({
+  placement = 'bottom',
+  ...props
+}: TooltipProps & {
+  triggerProps?: Record<string, unknown>
+}) {
+  const {
+    children,
+    className,
+    style,
+    id: idProp,
+    anchorName,
+    content,
+    portal,
+    triggerProps: forwardedTriggerProps,
+    ...rest
+  } = getProps({placement, ...props}, tooltipProps)
+  const reactId = useId()
+  const id = idProp || reactId
+  const [dismissed, setDismissed] = useState(false)
+  const isClient = useIsClient()
+
+  const triggerProps = {
+    'aria-describedby': id,
+    'interestfor': id,
+    'style': {anchorName: `--anchor-${anchorName || id}`},
+    'onMouseLeave': () => {
+      setDismissed(false)
+    },
+    'onBlur': () => {
+      setDismissed(false)
+    },
+    'onClick': () => {
+      setDismissed(true)
+      document.getElementById(id)?.hidePopover()
+    },
+  }
+
+  const trigger = children.type.forwardsTriggerProps
+    ? cloneElement(children, {triggerProps})
+    : cloneElement(children, mergeTriggerProps(children.props, forwardedTriggerProps, triggerProps))
+
+  const handleBeforeToggle = (e: ToggleEvent) => {
+    if (e.newState === 'open' && dismissed) {
+      e.preventDefault()
+    }
+  }
+
+  return (
+    <>
+      {trigger}
+
+      {renderPortal(
+        <div
+          className={clsx(
+            tooltipClassName,
+            'sui-px2 sui-py1 sui-radius2 sui-position-fixed sui-shadow2',
+            className,
+          )}
+          style={{
+            ...style,
+            positionAnchor: `--anchor-${anchorName || id}`,
+          }}
+          data-ui="Tooltip"
+          role="tooltip"
+          popover="hint"
+          id={id}
+          onBeforeToggle={handleBeforeToggle}
+          {...rest}
+        >
+          {content}
+        </div>,
+        isClient,
+        portal,
+      )}
+    </>
+  )
+}
+
+/** @beta */
+export const Tooltip = Object.assign(TooltipRoot, {
+  forwardsTriggerProps: true,
+}) as typeof TooltipRoot
+
+export type {TooltipProps}

package/src/components/tooltip/tooltip.css

@@ -0,0 +1,31 @@
+[interestfor] {
+  --tooltip-delay: var(--tooltip-delay-group, 500ms);
+  /* The interestfor polyfill looks for intereset delay variables */
+  --interest-delay-start: var(--tooltip-delay);
+  --interest-delay-end: 0ms;
+  interest-delay-start: var(--tooltip-delay);
+  interest-delay-end: 0ms;
+}
+
+.sui-Tooltip {
+  background: var(--backdrop);
+  visibility: hidden;
+  opacity: 0;
+  scale: 0.9;
+  transition: none;
+}
+
+.sui-Tooltip:popover-open {
+  visibility: visible;
+  opacity: 1;
+  scale: 1;
+  transition: var(--fade-in-transition);
+}
+
+@starting-style {
+  .sui-Tooltip:popover-open {
+    visibility: hidden;
+    opacity: 0;
+    scale: 0.9;
+  }
+}