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

package/src/components/list/List.tsx

@@ -0,0 +1,167 @@
+import clsx from 'clsx'
+import type {ComponentProps, ComponentPropsWithRef, ElementType} from 'react'
+
+import type {ListTag} from '../../types/List'
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {Flex} from '../flex/Flex'
+import {PressArea} from '../press-area/PressArea'
+import {Text} from '../text/Text'
+import {VStack} from '../v-stack/VStack'
+import {
+  listButtonItemProps,
+  type ListButtonItemProps,
+  type ListItemProps,
+  listItemProps,
+  type ListItemTextProps,
+  listItemTextProps,
+  type ListProps,
+  listProps,
+} from './list.props'
+
+const listClassName = suffixClassName('sui-List')
+const listItemClassName = suffixClassName('sui-ListItem')
+const listButtonItemClassName = suffixClassName('sui-ListButtonItem')
+const listItemTextClassName = suffixClassName('sui-ListItemText')
+const listItemImageClassName = suffixClassName('sui-ListItemImage')
+
+function ListRoot<T extends ListTag = 'ul'>(
+  props: ListProps<T> & Omit<ComponentPropsWithRef<T>, keyof ListProps<T>>,
+) {
+  const {as, children, className, style, ...rest} = getProps(props, listProps)
+  const Component = as || 'ul'
+
+  return (
+    <VStack
+      as={Component}
+      className={clsx(listClassName, className)}
+      style={style}
+      data-ui="List"
+      {...rest}
+    >
+      {children}
+    </VStack>
+  )
+}
+
+function ListItem({density = 'regular', ...props}: ListItemProps) {
+  const {children, className, style, end, start, ...rest} = getProps(
+    {density, ...props},
+    listItemProps,
+  )
+
+  return (
+    <li
+      className={clsx(
+        listItemClassName,
+        'sui-width-full sui-display-flex sui-align-items-center',
+        className,
+      )}
+      style={style}
+      data-ui="ListItem"
+      {...rest}
+    >
+      {start}
+
+      <Flex flexGrow={1} gap="inherit">
+        {children}
+      </Flex>
+
+      {end}
+    </li>
+  )
+}
+
+function ListButtonItem<T extends ElementType = 'button'>({
+  density = 'regular',
+  ...props
+}: ListButtonItemProps<T> & Omit<ComponentPropsWithRef<T>, keyof ListButtonItemProps<T>>) {
+  const {as, children, className, style, end, start, selected, ...rest} = getProps(
+    {density, ...props},
+    listButtonItemProps,
+  )
+  const Component = as || 'button'
+
+  return (
+    <li>
+      <PressArea
+        as={Component}
+        className={clsx(
+          listButtonItemClassName,
+          'sui-width-full sui-display-flex sui-align-items-center sui-radius2',
+          className,
+        )}
+        style={style}
+        data-ui="ListButtonItem"
+        data-selected={selected}
+        {...rest}
+      >
+        {start}
+
+        <Flex flexGrow={1} gap="inherit">
+          {children}
+        </Flex>
+
+        {end}
+      </PressArea>
+    </li>
+  )
+}
+
+function ListItemText<T extends ElementType = 'div'>(
+  props: ListItemTextProps<T> & Omit<ComponentPropsWithRef<T>, keyof ListItemTextProps<T>>,
+) {
+  const {as, className, style, title, subtitle, ...rest} = getProps(props, listItemTextProps)
+  const Component = as || 'div'
+
+  return (
+    <Flex
+      as={Component}
+      className={clsx(listItemTextClassName, className)}
+      style={style}
+      data-ui="ListItemText"
+      flexDirection="column"
+      justifyContent="center"
+      gap={2}
+      flexGrow={1}
+      {...rest}
+    >
+      {title && (
+        <Text size={1} weight="medium" trim truncate={1}>
+          {title}
+        </Text>
+      )}
+
+      {subtitle && (
+        <Text size={1} muted trim truncate={1}>
+          {subtitle}
+        </Text>
+      )}
+    </Flex>
+  )
+}
+
+function ListItemImage(props: ComponentProps<'img'>) {
+  const {className, style, ...rest} = getProps(props, {})
+
+  return (
+    <img
+      className={clsx(listItemImageClassName, 'sui-radius2', className)}
+      style={style}
+      data-ui="ListItemImage"
+      {...rest}
+    />
+  )
+}
+
+ListRoot.displayName = 'List'
+
+/** @beta */
+export const List = ListRoot
+
+ListRoot.Item = ListItem
+ListRoot.ButtonItem = ListButtonItem
+ListRoot.ItemText = ListItemText
+ListRoot.ItemImage = ListItemImage
+
+export type {ListProps, ListItemProps, ListButtonItemProps, ListItemTextProps}

package/src/components/list/list.css

@@ -0,0 +1,25 @@
+.sui-List {
+  list-style-type: none;
+}
+
+.sui-ListButtonItem:hover,
+.sui-ListButtonItem:focus-visible {
+  background: var(--background-low);
+}
+
+.sui-ListButtonItem:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-offset);
+}
+
+.sui-ListButtonItem[data-selected] {
+  background: var(--active-background-emphasized);
+  color: var(--active-foreground-emphasized);
+}
+
+.sui-ListItemImage {
+  max-width: 42px;
+  aspect-ratio: var(--aspect-ratio, 1 / 1);
+  object-fit: cover;
+  flex-shrink: 0;
+}

package/src/components/list/list.props.ts

@@ -0,0 +1,112 @@
+import type React from 'react'
+
+import {type GapProps, gapProps} from '../../props/gap'
+import {heightProps} from '../../props/height'
+import {paddingProps} from '../../props/padding'
+import {DENSITY, type Density} from '../../types/Density'
+import type {InteractiveAs} from '../../types/Interactive'
+import type {ListTag} from '../../types/List'
+import {type PropDef} from '../../types/PropDef'
+import type {Responsive} from '../../types/Responsive'
+
+/** @beta */
+export interface ListProps<T extends ListTag = 'ul'> extends Pick<GapProps, 'gap'> {
+  /** Element to render */
+  as?: T
+}
+
+export const listProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  gap: gapProps['gap'] as PropDef,
+}
+
+/** @beta */
+export interface ListItemProps extends React.ComponentProps<'li'> {
+  /** Composite prop for setting padding and gap */
+  density?: Responsive<Density>
+  /** Starting slot */
+  start?: React.ReactNode
+  /** Ending slot */
+  end?: React.ReactNode
+}
+
+export const listItemProps: Record<string, PropDef> = {
+  density: {
+    type: 'composite',
+    values: DENSITY,
+    composition: {
+      gap: {
+        propDef: gapProps['gap'] as PropDef,
+        mapping: {
+          compact: 2,
+          regular: 2,
+          loose: 3,
+        },
+      },
+      minHeight: {
+        propDef: heightProps['minHeight'] as PropDef,
+        mapping: {
+          compact: '33px',
+          regular: '37px',
+          loose: '45px',
+        },
+      },
+      paddingX: {
+        propDef: paddingProps['padding'] as PropDef,
+        mapping: {
+          compact: 1,
+          regular: 2,
+          loose: 3,
+        },
+      },
+    },
+  },
+  end: {
+    type: 'string',
+  },
+  start: {
+    type: 'string',
+  },
+}
+
+/** @beta */
+export interface ListButtonItemProps<T extends React.ElementType = 'button'> extends ListItemProps {
+  /** Element to render */
+  as?: InteractiveAs<T>
+  /** Selected state */
+  selected?: boolean
+}
+
+export const listButtonItemProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  selected: {
+    type: 'boolean',
+  },
+  ...listItemProps,
+}
+
+/** @beta */
+export interface ListItemTextProps<T extends React.ElementType = 'div'> {
+  /** Element to render */
+  as?: T
+  /** Title text */
+  title?: React.ReactNode
+  /** Subtitle text */
+  subtitle?: React.ReactNode
+}
+
+export const listItemTextProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  title: {
+    type: 'string',
+  },
+  subtitle: {
+    type: 'string',
+  },
+}

package/src/components/press-area/PressArea.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 PressAreaProps, pressAreaProps} from './pressArea.props'
+
+const pressAreaClassName = suffixClassName('sui-PressArea')
+
+/** @public */
+export function PressArea<T extends ElementType = 'button'>(
+  props: PressAreaProps<T> & Omit<ComponentPropsWithRef<T>, keyof PressAreaProps<T>>,
+) {
+  const {as, children, className, style, ...rest} = getProps(props, pressAreaProps)
+  const Component = as || 'button'
+
+  return (
+    <Component
+      className={clsx(pressAreaClassName, 'sui-width-full', className)}
+      style={style}
+      data-ui="PressArea"
+      {...rest}
+    >
+      {children}
+    </Component>
+  )
+}
+
+export type {PressAreaProps}

package/src/components/press-area/press-area.css

@@ -0,0 +1,22 @@
+.sui-PressArea {
+  background: none;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+  text-decoration: inherit;
+  appearance: none;
+}
+
+.sui-PressArea:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-offset);
+}
+
+.sui-PressArea:disabled {
+  pointer-events: none;
+}
+
+.sui-PressArea .sui-Text,
+.sui-PressArea [data-sanity-icon] {
+  color: inherit;
+}

package/src/components/press-area/pressArea.props.ts

@@ -0,0 +1,14 @@
+import type {InteractiveAs} from '../../types/Interactive'
+import {type PropDef} from '../../types/PropDef'
+
+/** @public */
+export interface PressAreaProps<T extends React.ElementType = 'button'> {
+  /** Element to render */
+  as?: InteractiveAs<T>
+}
+
+export const pressAreaProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+}

package/src/components/radio/Radio.tsx

@@ -0,0 +1,48 @@
+import clsx from 'clsx'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {Box} from '../box/Box'
+import {Label} from '../label/Label'
+import {VisuallyHidden} from '../visually-hidden/VisuallyHidden'
+import {type RadioProps, radioProps} from './radio.props'
+
+const radioClassName = suffixClassName('sui-Radio')
+const radioInputClassName = suffixClassName('sui-RadioInput')
+const radioMarkClassName = suffixClassName('sui-RadioMark')
+
+/** @beta */
+export function Radio(props: RadioProps) {
+  const {className, style, label, disabled, error, ...rest} = getProps(props, radioProps)
+
+  return (
+    <Label
+      className={clsx(radioClassName, className)}
+      style={style}
+      data-ui="Radio"
+      disabled={disabled}
+      error={error}
+    >
+      <VisuallyHidden
+        as="input"
+        type="radio"
+        className={radioInputClassName}
+        disabled={disabled}
+        {...rest}
+      />
+
+      <Box
+        as="span"
+        className={clsx(radioMarkClassName, error && 'sui-error')}
+        position="relative"
+        radius="full"
+        width="17px"
+        height="17px"
+      />
+
+      {label}
+    </Label>
+  )
+}
+
+export type {RadioProps}

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,20 @@
+import {type MarginProps, marginProps} from '../../props/margin'
+import {type PropDef} from '../../types/PropDef'
+
+/** @beta */
+export interface RadioProps extends React.ComponentProps<'input'>, MarginProps {
+  /** Error state */
+  error?: boolean
+  /** Input label */
+  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,19 @@
+import {type PropDef} from '../../types/PropDef'
+
+/** @beta */
+export interface SkipToContentProps extends React.ComponentProps<'a'> {
+  /**
+   * Anchor href. The target element should be focusable or have `tabindex="-1"`.
+   */
+  href: string
+  /** Visible/announced label */
+  label: string
+  /** Use label instead */
+  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'
+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,16 @@
+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?: Responsive<IconSize>
+}
+
+export const spinnerProps: Record<string, PropDef> = {
+  size: {
+    type: 'union',
+    className: 'icon-body',
+    values: ICON_SIZE,
+  },
+}