@sanity/ui 4.0.0-v4.1 → 5.0.0-alpha.2

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, 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,20 @@
+import {type MarginProps, marginProps} from '../../props/margin'
+import {type PropDef} from '../../types/PropDef'
+
+/** @beta */
+export interface SwitchProps extends React.ComponentProps<'input'>, MarginProps {
+  /** Error state */
+  error?: boolean
+  /** Input label */
+  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,24 @@
+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 {
+  /** Element to render */
+  as?: T
+  /** CSS **font-size** property */
+  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,93 @@
+import clsx from 'clsx'
+import {cloneElement, useEffect, useId, useState} from 'react'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {Box} from '../box/Box'
+import {type TooltipProps, tooltipProps} from './tooltip.props'
+
+const tooltipClassName = suffixClassName('sui-Tooltip')
+const tooltipDismissedClassName = suffixClassName('sui-Tooltip-Dismissed')
+
+/** @public */
+export function Tooltip({placement = 'bottom', ...props}: TooltipProps) {
+  const {
+    children,
+    className,
+    style,
+    disabled,
+    id: idProp,
+    text,
+    ...rest
+  } = getProps({placement, ...props}, tooltipProps)
+  const reactId = useId()
+  const id = idProp || reactId
+  const [dismissed, setDismissed] = useState(false)
+
+  useEffect(() => {
+    if (dismissed) {
+      return
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setDismissed(true)
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [dismissed])
+
+  const trigger = cloneElement(children, {
+    'aria-describedby': id,
+    'onMouseEnter': (e) => {
+      setDismissed(false)
+      children.props.onMouseEnter?.(e)
+    },
+    'onFocus': (e) => {
+      setDismissed(false)
+      children.props.onFocus?.(e)
+    },
+    'onClick': (e) => {
+      setDismissed(true)
+      children.props.onClick?.(e)
+    },
+    'style': {
+      ...children.props.style,
+      anchorName: `--tooltip-anchor-${id}`,
+    },
+  })
+
+  if (disabled) {
+    return children
+  }
+
+  return (
+    <>
+      {trigger}
+
+      <Box
+        className={clsx(tooltipClassName, dismissed ? tooltipDismissedClassName : '', className)}
+        role="tooltip"
+        style={{
+          ...style,
+          positionAnchor: `--tooltip-anchor-${id}`,
+        }}
+        data-ui="Tooltip"
+        id={id}
+        paddingX={2}
+        paddingY={1}
+        radius={2}
+        position="fixed"
+        zIndex={9999}
+        shadow={2}
+        {...rest}
+      >
+        {text}
+      </Box>
+    </>
+  )
+}
+
+export type {TooltipProps}

package/src/components/tooltip/tooltip.css

@@ -0,0 +1,52 @@
+.sui-Tooltip {
+  --tooltip-delay-open: var(--tooltip-delay-group, 500ms);
+  --tooltip-delay-close: var(--tooltip-delay-group, 100ms);
+  background: var(--backdrop);
+  opacity: 0;
+  scale: 0.9;
+  visibility: hidden;
+  transition:
+    opacity 200ms cubic-bezier(0.34, 1.2, 0.64, 1) var(--tooltip-delay-close),
+    scale 200ms cubic-bezier(0.34, 1.2, 0.64, 1) var(--tooltip-delay-close),
+    visibility 0s linear calc(var(--tooltip-delay-close) + 200ms);
+}
+
+[aria-describedby]:is(:hover, :focus-visible) + [role="tooltip"]:not(.sui-Tooltip-Dismissed) {
+  visibility: visible;
+  opacity: 1;
+  scale: 1;
+  transition:
+    opacity 200ms cubic-bezier(0.34, 1.2, 0.64, 1) var(--tooltip-delay-open),
+    scale 200ms cubic-bezier(0.34, 1.2, 0.64, 1) var(--tooltip-delay-open),
+    visibility 0s linear var(--tooltip-delay-open);
+}
+
+[aria-describedby]:is(:hover, :focus-visible) + .sui-Tooltip-Dismissed[role="tooltip"] {
+  transition: none;
+}
+
+.sui-Tooltip[class*='placement-bottom'],
+.sui-Tooltip[class*='placement-top'] {
+  margin-block: var(--space-1);
+}
+
+.sui-Tooltip[class*='placement-left'],
+.sui-Tooltip[class*='placement-right'] {
+  margin-inline: var(--space-1);
+}
+
+.sui-Tooltip[class*='bottom'] {
+  transform-origin: center top;
+}
+
+.sui-Tooltip[class*='top'] {
+  transform-origin: center bottom;
+}
+
+.sui-Tooltip[class*='left'] {
+  transform-origin: right center;
+}
+
+.sui-Tooltip[class*='right'] {
+  transform-origin: left center;
+}

package/src/components/tooltip/tooltip.props.ts

@@ -0,0 +1,20 @@
+import {type PlacementProps, placementProps} from '../../props/placement'
+import {type PropDef} from '../../types/PropDef'
+
+/** @public */
+export interface TooltipProps extends React.ComponentProps<'div'>, PlacementProps {
+  /** Tooltip text */
+  text?: React.ReactNode
+  /** Disabled state */
+  disabled?: boolean
+}
+
+export const tooltipProps: Record<string, PropDef> = {
+  text: {
+    type: 'string',
+  },
+  disabled: {
+    type: 'boolean',
+  },
+  ...placementProps,
+}

package/src/components/tooltip-group/TooltipGroup.tsx

@@ -0,0 +1,67 @@
+import clsx from 'clsx'
+import {type ComponentPropsWithRef, type ElementType, useRef, useState} from 'react'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {type TooltipGroupProps, tooltipGroupProps} from './tooltipGroup.props'
+
+const tooltipGroupClassName = suffixClassName('sui-TooltipGroup')
+
+/** @public */
+export function TooltipGroup<T extends ElementType = 'div'>(
+  props: TooltipGroupProps<T> & Omit<ComponentPropsWithRef<T>, keyof TooltipGroupProps<T>>,
+) {
+  const {as, children, className, style, ...rest} = getProps(props, tooltipGroupProps)
+  const Component = as || 'div'
+  const ref = useRef<HTMLElement>(null)
+  const [isActive, setIsActive] = useState(false)
+
+  const handleTransitionEnd = (e: TransitionEvent) => {
+    const tooltip = (e.target as Element).closest('[data-ui="Tooltip"]')
+
+    if (!tooltip) {
+      return
+    }
+
+    if (
+      e.propertyName === 'visibility' &&
+      window.getComputedStyle(tooltip).visibility !== 'hidden'
+    ) {
+      setIsActive(true)
+    }
+  }
+
+  const handleMouseLeave = () => {
+    setIsActive(false)
+  }
+
+  const handleBlur = (e: FocusEvent) => {
+    if (ref.current && ref.current.contains(e.relatedTarget as Node)) {
+      return
+    }
+
+    setIsActive(false)
+  }
+
+  return (
+    <Component
+      className={clsx(tooltipGroupClassName, className)}
+      style={{
+        ...style,
+        ...(isActive && {
+          '--tooltip-delay-group': 0,
+        }),
+      }}
+      data-ui="TooltipGroup"
+      ref={ref}
+      onTransitionEnd={handleTransitionEnd}
+      onMouseLeave={handleMouseLeave}
+      onBlur={handleBlur}
+      {...rest}
+    >
+      {children}
+    </Component>
+  )
+}
+
+export type {TooltipGroupProps}

package/src/components/tooltip-group/tooltipGroup.props.ts

@@ -0,0 +1,13 @@
+import {type PropDef} from '../../types/PropDef'
+
+/** @public */
+export interface TooltipGroupProps<T extends React.ElementType = 'div'> {
+  /** Element to render */
+  as?: T
+}
+
+export const tooltipGroupProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+}

package/src/components/v-stack/VStack.tsx

@@ -0,0 +1,32 @@
+import clsx from 'clsx'
+import type {ComponentPropsWithRef, ElementType} from 'react'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {Flex} from '../flex/Flex'
+import {type VStackProps, vStackProps} from './vStack.props'
+
+const vStackClassName = suffixClassName('sui-VStack')
+
+/** @public */
+export function VStack<T extends ElementType = 'div'>(
+  props: VStackProps<T> & Omit<ComponentPropsWithRef<T>, keyof VStackProps<T>>,
+) {
+  const {as, children, className, style, ...rest} = getProps(props, vStackProps)
+  const Component = as || 'div'
+
+  return (
+    <Flex
+      as={Component}
+      className={clsx(vStackClassName, className)}
+      style={style}
+      data-ui="VStack"
+      flexDirection="column"
+      {...rest}
+    >
+      {children}
+    </Flex>
+  )
+}
+
+export type {VStackProps}

package/src/components/v-stack/vStack.props.ts

@@ -0,0 +1,15 @@
+import {type GapProps, gapProps} from '../../props/gap'
+import {type PropDef} from '../../types/PropDef'
+
+/** @public */
+export interface VStackProps<T extends React.ElementType = 'div'> extends Pick<GapProps, 'gap'> {
+  /** Element to render */
+  as?: T
+}
+
+export const vStackProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  gap: gapProps['gap'] as PropDef,
+}

package/src/components/visually-hidden/VisuallyHidden.tsx

@@ -0,0 +1,29 @@
+import clsx from 'clsx'
+import type {ComponentPropsWithRef, ElementType} from 'react'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {type VisuallyHiddenProps, visuallyHiddenProps} from './visuallyHidden.props'
+
+const visuallyHiddenClassName = suffixClassName('sui-VisuallyHidden')
+
+/** @public */
+export function VisuallyHidden<T extends ElementType = 'span'>(
+  props: VisuallyHiddenProps<T> & Omit<ComponentPropsWithRef<T>, keyof VisuallyHiddenProps<T>>,
+) {
+  const {as, children, className, style, ...rest} = getProps(props, visuallyHiddenProps)
+  const Component = as || 'span'
+
+  return (
+    <Component
+      className={clsx(visuallyHiddenClassName, className)}
+      style={style}
+      data-ui="VisuallyHidden"
+      {...rest}
+    >
+      {children}
+    </Component>
+  )
+}
+
+export type {VisuallyHiddenProps}

package/src/components/visually-hidden/visually-hidden.css

@@ -0,0 +1,9 @@
+.sui-VisuallyHidden:not(.sui-visually-hidden-visible:focus-visible) {
+  width: 1px;
+  height: 1px;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+}

package/src/components/visually-hidden/visuallyHidden.props.ts

@@ -0,0 +1,19 @@
+import {type PropDef} from '../../types/PropDef'
+
+/** @public */
+export interface VisuallyHiddenProps<T extends React.ElementType = 'span'> {
+  /** Element to render */
+  as?: T
+  /** If true, element is visible on :focus-visible */
+  visibleOnFocus?: boolean
+}
+
+export const visuallyHiddenProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  visibleOnFocus: {
+    type: 'boolean',
+    className: 'sui-visually-hidden-visible',
+  },
+}

package/src/css/classes/dynamic/flex-child.css

@@ -0,0 +1,5 @@
+@breakpoints {
+  .sui-flex-basis { flex-basis: var(--flex-basis); }
+  .sui-flex-grow { flex-grow: var(--flex-grow); }
+  .sui-flex-shrink { flex-shrink: var(--flex-shrink); }
+}

package/src/css/classes/dynamic/grid-child.css

@@ -0,0 +1,8 @@
+@breakpoints {
+  .sui-grid-column { grid-column: var(--grid-column); }
+  .sui-grid-column-start { grid-column-start: var(--grid-column-start); }
+  .sui-grid-column-end { grid-column-end: var(--grid-column-end); }
+  .sui-grid-row { grid-row: var(--grid-row); }
+  .sui-grid-row-start { grid-row-start: var(--grid-row-start); }
+  .sui-grid-row-end { grid-row-end: var(--grid-row-end); }
+}

package/src/css/classes/dynamic/grid-parent.css

@@ -0,0 +1,6 @@
+@breakpoints {
+  .sui-grid-auto-columns { grid-auto-columns: var(--grid-auto-columns); }
+  .sui-grid-auto-rows { grid-auto-rows: var(--grid-auto-rows); }
+  .sui-grid-template-columns { grid-template-columns: var(--grid-template-columns); }
+  .sui-grid-template-rows { grid-template-rows: var(--grid-template-rows); }
+}

package/src/css/classes/dynamic/height.css

@@ -0,0 +1,5 @@
+@breakpoints {
+  .sui-height { height: var(--height); }
+  .sui-min-height { min-height: var(--min-height); }
+  .sui-max-height { max-height: var(--max-height); }
+}

package/src/css/classes/dynamic/index.css

@@ -0,0 +1,7 @@
+@import './flex-child.css';
+@import './grid-child.css';
+@import './grid-parent.css';
+@import './height.css';
+@import './width.css';
+@import './line-clamp.css';
+@import './z-index.css';

package/src/css/classes/dynamic/line-clamp.css

@@ -0,0 +1,5 @@
+.sui-line-clamp {
+  display: -webkit-box;
+  -webkit-line-clamp: var(--line-clamp);
+  -webkit-box-orient: vertical;
+}