@sanity/ui 4.2.0 → 5.0.0-alpha.10

package/src/components/label/label.props.ts

@@ -0,0 +1,25 @@
+import {type MarginProps, marginProps} from '../../props/margin'
+import {type PropDef} from '../../types/PropDef'
+
+/** @beta */
+export interface LabelProps extends React.ComponentProps<'label'>, MarginProps {
+  /**
+   * Renders the label in a muted color.
+   */
+  disabled?: boolean
+  /**
+   * Renders the label in the error color.
+   * @remarks Use when the linked input has a validation error.
+   */
+  error?: boolean
+}
+
+export const labelProps: Record<string, PropDef> = {
+  disabled: {
+    type: 'boolean',
+  },
+  error: {
+    type: 'boolean',
+  },
+  ...marginProps,
+}

package/src/components/link/Link.tsx

@@ -0,0 +1,29 @@
+import clsx from 'clsx'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {type LinkProps, linkProps} from './link.props'
+
+const linkClassName = suffixClassName('sui-Link')
+
+/** @beta */
+export function Link({underlined = true, ...props}: LinkProps) {
+  const {children, className, style, openInNewTab, ...rest} = getProps(
+    {underlined, ...props},
+    linkProps,
+  )
+
+  return (
+    <a
+      className={clsx(linkClassName, className)}
+      style={style}
+      data-ui="Link"
+      {...(openInNewTab ? {target: '_blank', rel: 'noopener noreferrer'} : {})}
+      {...rest}
+    >
+      {children}
+    </a>
+  )
+}
+
+export type {LinkProps}

package/src/components/link/link.css

@@ -0,0 +1,12 @@
+.sui-Link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.sui-Link:focus-visible {
+  outline-color: var(--blue-500);
+}
+
+.sui-Link.sui-underlined {
+  text-decoration: underline;
+}

package/src/components/link/link.props.ts

@@ -0,0 +1,23 @@
+import {type PropDef} from '../../types/PropDef'
+
+/** @beta */
+export interface LinkProps extends React.ComponentProps<'a'> {
+  /**
+   * Sets the link to `target="_blank"` and `rel="noopener noreferrer"`.
+   */
+  openInNewTab?: boolean
+  /**
+   * Underlines the link.
+   */
+  underlined?: boolean
+}
+
+export const linkProps: Record<string, PropDef> = {
+  openInNewTab: {
+    type: 'boolean',
+  },
+  underlined: {
+    type: 'boolean',
+    className: 'underlined',
+  },
+}

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,130 @@
+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'> {
+  /**
+   * HTML 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'> {
+  /**
+   * Sets horizontal padding, gap, and minimum row height together.
+   */
+  density?: Responsive<Density>
+  /**
+   * Slot at the left edge of the row.
+   */
+  start?: React.ReactNode
+  /**
+   * Slot at the right edge of the row.
+   */
+  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 or component to render for the press target.
+   */
+  as?: InteractiveAs<T>
+  /**
+   * Marks the row as the current selection.
+   */
+  selected?: boolean
+}
+
+export const listButtonItemProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  selected: {
+    type: 'boolean',
+  },
+  ...listItemProps,
+}
+
+/** @beta */
+export interface ListItemTextProps<T extends React.ElementType = 'div'> {
+  /**
+   * HTML element to render.
+   */
+  as?: T
+  /**
+   * Main label.
+   */
+  title?: React.ReactNode
+  /**
+   * Text below the title.
+   */
+  subtitle?: React.ReactNode
+}
+
+export const listItemTextProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  title: {
+    type: 'string',
+  },
+  subtitle: {
+    type: 'string',
+  },
+}

package/src/components/popover/Popover.tsx

@@ -0,0 +1,85 @@
+import clsx from 'clsx'
+import {Activity, 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 PopoverProps, popoverProps} from './popover.props'
+
+const popoverClassName = suffixClassName('sui-PopoverContent')
+
+function PopoverRoot({
+  placement = 'bottom',
+  ...props
+}: PopoverProps & {
+  triggerProps?: Record<string, unknown>
+}) {
+  const {
+    children,
+    className,
+    style,
+    id: idProp,
+    anchorName,
+    content,
+    portal,
+    triggerProps: forwardedTriggerProps,
+    ...rest
+  } = getProps({placement, ...props}, popoverProps)
+  const reactId = useId()
+  const id = idProp || reactId
+  const [open, setOpen] = useState(false)
+  const isClient = useIsClient()
+
+  const handleToggle = (e: ToggleEvent) => {
+    setOpen(e.newState === 'open')
+  }
+
+  const triggerProps = {
+    popoverTarget: id,
+    style: {anchorName: `--anchor-${anchorName || id}`},
+  }
+
+  const trigger = children.type.forwardsTriggerProps
+    ? cloneElement(children, {triggerProps})
+    : cloneElement(children, mergeTriggerProps(children.props, forwardedTriggerProps, triggerProps))
+
+  return (
+    <>
+      {trigger}
+
+      {renderPortal(
+        <Activity mode={open ? 'visible' : 'hidden'}>
+          <div
+            className={clsx(
+              popoverClassName,
+              'sui-px2 sui-py1 sui-radius2 sui-position-fixed sui-shadow2',
+              className,
+            )}
+            style={{
+              ...style,
+              positionAnchor: `--anchor-${anchorName || id}`,
+            }}
+            data-ui="Popover"
+            popover="auto"
+            id={id}
+            onToggle={handleToggle}
+            {...rest}
+          >
+            {content}
+          </div>
+        </Activity>,
+        isClient,
+        portal,
+      )}
+    </>
+  )
+}
+
+/** @beta */
+export const Popover = Object.assign(PopoverRoot, {
+  forwardsTriggerProps: true,
+})
+
+export type {PopoverProps}

package/src/components/popover/popover.css

@@ -0,0 +1,21 @@
+.sui-PopoverContent {
+  visibility: hidden;
+  opacity: 0;
+  scale: 0.9;
+  transition: none;
+}
+
+.sui-PopoverContent:popover-open {
+  visibility: visible;
+  opacity: 1;
+  scale: 1;
+  transition: var(--fade-in-transition);
+}
+
+@starting-style {
+  .sui-PopoverContent:popover-open {
+    visibility: hidden;
+    opacity: 0;
+    scale: 0.9;
+  }
+}

package/src/components/popover/popover.props.ts

@@ -0,0 +1,38 @@
+import {type PlacementProps, placementProps} from '../../props/placement'
+import {type PropDef} from '../../types/PropDef'
+
+/** @beta */
+export interface PopoverProps
+  extends Omit<React.ComponentProps<'div'>, 'children' | 'content'>, PlacementProps {
+  /**
+   * Shared anchor identifier.
+   * @remarks Set the same value on a Tooltip and a Popover to point both at one trigger.
+   */
+  anchorName?: React.ReactNode
+  /**
+   * The trigger element.
+   * @remarks Popover clones it and attaches the `popovertarget` attribute that opens the floating layer.
+   */
+  children: React.ReactElement<Record<string, unknown>>
+  /**
+   * The floating content.
+   */
+  content?: React.ReactNode
+  /**
+   * Renders the content into `document.body` through a React portal instead of inline.
+   */
+  portal?: boolean
+}
+
+export const popoverProps: Record<string, PropDef> = {
+  anchorName: {
+    type: 'string',
+  },
+  content: {
+    type: 'string',
+  },
+  portal: {
+    type: 'boolean',
+  },
+  ...placementProps,
+}

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,16 @@
+import type {InteractiveAs} from '../../types/Interactive'
+import {type PropDef} from '../../types/PropDef'
+
+/** @public */
+export interface PressAreaProps<T extends React.ElementType = 'button'> {
+  /**
+   * Element or component 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, 'sui-position-relative', 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}