@sanity/ui 5.0.0-alpha.14 → 5.0.0-alpha.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "5.0.0-alpha.14",
+  "version": "5.0.0-alpha.16",
   "description": "Sanity UI Library",
   "keywords": [
     "components",
@@ -48,7 +48,7 @@
     }
   },
   "dependencies": {
-    "@sanity-labs/design-tokens": "0.0.2-alpha.6",
+    "@sanity-labs/design-tokens": "0.0.2-alpha.7",
     "@sanity/icons": "^5.2.1",
     "clsx": "^2.1.1",
     "comment-json": "^5.0.0",

package/src/components/avatar/Avatar.tsx

@@ -0,0 +1,50 @@
+import clsx from 'clsx'
+import {useState} from 'react'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {Text} from '../text/Text'
+import {type AvatarProps, avatarProps} from './avatar.props'
+
+const avatarClassName = suffixClassName('sui-Avatar')
+
+/** @public */
+export function Avatar({color = 'gray', size = 1, ...props}: AvatarProps) {
+  const {
+    className,
+    style,
+    'aria-label': ariaLabel,
+    name,
+    src,
+    ...rest
+  } = getProps({color, size, ...props}, avatarProps)
+  const [error, setError] = useState(false)
+
+  return (
+    <figure
+      className={clsx(
+        avatarClassName,
+        'sui-display-inline-flex sui-align-items-center sui-justify-content-center sui-radius-full sui-position-relative',
+        className,
+      )}
+      style={style}
+      data-ui="Avatar"
+      {...rest}
+    >
+      {src && !error ? (
+        <img
+          className="sui-radius-full sui-width-full sui-height-full"
+          src={src}
+          alt={ariaLabel || name}
+          onError={() => setError(true)}
+        />
+      ) : (
+        <Text role="img" weight="semibold" aria-label={ariaLabel || name}>
+          {name.slice(0, 1)}
+        </Text>
+      )}
+    </figure>
+  )
+}
+
+export type {AvatarProps}

package/src/components/avatar/avatar.css

@@ -0,0 +1,51 @@
+.sui-Avatar {
+  border: 1px solid transparent;
+  aspect-ratio: 1;
+}
+
+.sui-Avatar img {
+  border: 1px solid light-dark(var(--white), var(--black));
+  object-fit: cover;
+}
+
+.sui-Avatar .sui-Text {
+  color: light-dark(var(--white), var(--black));
+  font-size: inherit;
+  text-transform: uppercase;
+}
+
+.sui-Avatar.sui-avatar-gray {
+  background-color: light-dark(var(--gray-600), var(--gray-400));
+}
+
+.sui-Avatar.sui-avatar-blue {
+  background-color: light-dark(var(--blue-600), var(--blue-400));
+}
+
+.sui-Avatar.sui-avatar-purple {
+  background-color: light-dark(var(--purple-600), var(--purple-400));
+}
+
+.sui-Avatar.sui-avatar-magenta {
+  background-color: light-dark(var(--magenta-600), var(--magenta-400));
+}
+
+.sui-Avatar.sui-avatar-red {
+  background-color: light-dark(var(--red-600), var(--red-400));
+}
+
+.sui-Avatar.sui-avatar-orange {
+  background-color: light-dark(var(--orange-600), var(--orange-400));
+}
+
+.sui-Avatar.sui-avatar-yellow {
+  background-color: light-dark(var(--yellow-600), var(--yellow-400));
+}
+
+.sui-Avatar.sui-avatar-green {
+  background-color: light-dark(var(--green-600), var(--green-400));
+}
+
+.sui-Avatar.sui-avatar-cyan {
+  background-color: light-dark(var(--cyan-600), var(--cyan-400));
+}

package/src/components/avatar/avatar.props.ts

@@ -0,0 +1,57 @@
+import {heightProps} from '../../props/height'
+import {AVATAR_COLOR, AVATAR_SIZE, type AvatarColor, type AvatarSize} from '../../types/Avatar'
+import {type PropDef} from '../../types/PropDef'
+import type {Responsive} from '../../types/Responsive'
+import {TEXT_SIZE} from '../../types/Text'
+
+/** @public */
+export interface AvatarProps extends React.ComponentProps<'figure'> {
+  /** Avatar color */
+  color?: AvatarColor
+  /** Avatar name, only first letter will be displayed */
+  name: string
+  /** Composite prop for setting height and font size */
+  size?: Responsive<AvatarSize>
+  /** Avatar image src */
+  src?: string
+}
+
+export const avatarProps: Record<string, PropDef> = {
+  color: {
+    type: 'union',
+    className: 'avatar',
+    values: AVATAR_COLOR,
+  },
+  name: {
+    type: 'string',
+  },
+  size: {
+    type: 'composite',
+    values: AVATAR_SIZE,
+    composition: {
+      size: {
+        propDef: {
+          type: 'union',
+          className: 'text-body',
+          values: TEXT_SIZE,
+        },
+        mapping: {
+          0: 0,
+          1: 1,
+          2: 2,
+        },
+      },
+      height: {
+        propDef: heightProps['height'] as PropDef,
+        mapping: {
+          0: '19px',
+          1: '25px',
+          2: '33px',
+        },
+      },
+    },
+  },
+  src: {
+    type: 'string',
+  },
+}

package/src/components/avatar-counter/AvatarCounter.tsx

@@ -0,0 +1,38 @@
+import clsx from 'clsx'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {Text} from '../text/Text'
+import {type AvatarCounterProps, avatarCounterProps} from './avatarCounter.props'
+
+const avatarCounterClassName = suffixClassName('sui-AvatarCounter')
+
+/** @public */
+export function AvatarCounter({size = 1, ...props}: AvatarCounterProps) {
+  const {
+    className,
+    style,
+    'aria-label': ariaLabel,
+    count,
+    ...rest
+  } = getProps({size, ...props}, avatarCounterProps)
+
+  return (
+    <figure
+      className={clsx(
+        avatarCounterClassName,
+        'sui-display-inline-flex sui-align-items-center sui-justify-content-center sui-radius-full sui-border',
+        className,
+      )}
+      style={style}
+      data-ui="AvatarCounter"
+      {...rest}
+    >
+      <Text role="img" weight="semibold" aria-label={ariaLabel || `+ ${count} more`}>
+        {count}
+      </Text>
+    </figure>
+  )
+}
+
+export type {AvatarCounterProps}

package/src/components/avatar-counter/avatar-counter.css

@@ -0,0 +1,8 @@
+.sui-AvatarCounter {
+  aspect-ratio: 1;
+  padding-inline: 0.5em;
+}
+
+.sui-AvatarCounter .sui-Text {
+  font-size: inherit;
+}

package/src/components/avatar-counter/avatarCounter.props.ts

@@ -0,0 +1,44 @@
+import {heightProps} from '../../props/height'
+import {AVATAR_SIZE, type AvatarSize} from '../../types/Avatar'
+import {type PropDef} from '../../types/PropDef'
+import {TEXT_SIZE} from '../../types/Text'
+
+/** @public */
+export interface AvatarCounterProps extends React.ComponentProps<'figure'> {
+  /** Count */
+  count: number
+  /** Composite prop for setting height and font size */
+  size?: AvatarSize
+}
+
+export const avatarCounterProps: Record<string, PropDef> = {
+  count: {
+    type: 'number',
+  },
+  size: {
+    type: 'composite',
+    values: AVATAR_SIZE,
+    composition: {
+      size: {
+        propDef: {
+          type: 'union',
+          className: 'text-body',
+          values: TEXT_SIZE,
+        },
+        mapping: {
+          0: 0,
+          1: 1,
+          2: 2,
+        },
+      },
+      height: {
+        propDef: heightProps['height'] as PropDef,
+        mapping: {
+          0: '19px',
+          1: '25px',
+          2: '33px',
+        },
+      },
+    },
+  },
+}

package/src/components/avatar-stack/AvatarStack.tsx

@@ -0,0 +1,60 @@
+import clsx from 'clsx'
+import {Children, cloneElement, isValidElement, type ReactElement} from 'react'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {AvatarCounter} from '../avatar-counter/AvatarCounter'
+import type {AvatarProps} from '../avatar/avatar.props'
+import {type AvatarStackProps, avatarStackProps} from './avatarStack.props'
+
+const avatarStackClassName = suffixClassName('sui-AvatarStack')
+
+/** @public */
+export function AvatarStack({size = 1, ...props}: AvatarStackProps) {
+  const {
+    children,
+    className,
+    style,
+    maxLength: maxLengthProp,
+    size: sizeProp,
+    ...rest
+  } = getProps({size, ...props}, avatarStackProps)
+  const childArray = Children.toArray(children).filter(
+    isValidElement,
+  ) as ReactElement<AvatarProps>[]
+  const length = childArray.length
+  const maxLength = maxLengthProp ?? length
+  const visibleAvatars =
+    length > maxLength ? childArray.slice(length - maxLength, length) : childArray
+
+  return (
+    <ul
+      className={clsx(avatarStackClassName, 'sui-display-flex', className)}
+      style={style}
+      data-ui="AvatarStack"
+      {...rest}
+    >
+      {(!length || length > maxLength) && (
+        <li className="sui-display-flex">
+          <AvatarCounter
+            count={!length ? 0 : length - maxLength}
+            size={sizeProp}
+            aria-label={
+              !length
+                ? 'No users'
+                : `+ ${length - maxLength} more user${length - maxLength > 1 ? 's' : ''}`
+            }
+          />
+        </li>
+      )}
+
+      {visibleAvatars.map((child) => (
+        <li key={child.key} className="sui-display-flex">
+          {cloneElement(child, {size: sizeProp})}
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export type {AvatarStackProps}

package/src/components/avatar-stack/avatar-stack.css

@@ -0,0 +1,16 @@
+.sui-AvatarStack {
+  list-style: none;
+}
+
+.sui-AvatarStack li:has([class*='sui-Avatar']) + li:has([class*='sui-Avatar']) {
+  margin-left: calc(-1 * var(--space-1));
+}
+
+.sui-AvatarStack li:has(+ li [class*='sui-Avatar']) {
+  mask-image: radial-gradient(
+    50% 50% at calc(150% - var(--space-1) - 1.25px) 50%,
+    transparent 97.5%,
+    #000 100%
+  );
+}
+

package/src/components/avatar-stack/avatarStack.props.ts

@@ -0,0 +1,20 @@
+import {AVATAR_SIZE, type AvatarSize} from '../../types/Avatar'
+import {type PropDef} from '../../types/PropDef'
+
+/** @public */
+export interface AvatarStackProps extends React.ComponentProps<'ul'> {
+  /** Max number of avatars to display */
+  maxLength?: number
+  /** Avatar and AvatarCounter size */
+  size?: AvatarSize
+}
+
+export const avatarStackProps: Record<string, PropDef> = {
+  maxLength: {
+    type: 'number',
+  },
+  size: {
+    type: 'union',
+    values: AVATAR_SIZE,
+  },
+}

package/src/components/button/button.css

@@ -10,7 +10,7 @@
 .sui-Button:hover {
   background: color-mix(
     in srgb,
-    var(--tone-500) 25%,
+    var(--tone-500) 12%,
     var(--background-color)
   );
 }
@@ -18,7 +18,7 @@
 .sui-Button.sui-button-level-primary:hover {
   background: color-mix(
     in srgb,
-    var(--tone-950) 25%,
+    var(--tone-950) 12%,
     var(--background-color)
   );
 }

package/src/components/checkbox/Checkbox.tsx

@@ -17,7 +17,7 @@ const checkboxMarkClassName = suffixClassName('sui-CheckboxMark')
 /** @beta */
 export function Checkbox(props: CheckboxProps) {
   const inputRef = useRef<HTMLInputElement>(null)
-  const {className, style, disabled, error, indeterminate, label, ...rest} = getProps(
+  const {className, style, disabled, hasError, indeterminate, label, ...rest} = getProps(
     props,
     checkboxProps,
   )
@@ -34,7 +34,7 @@ export function Checkbox(props: CheckboxProps) {
       style={style}
       data-ui="Checkbox"
       disabled={disabled}
-      error={error}
+      error={hasError}
     >
       <VisuallyHidden
         as="input"
@@ -47,7 +47,7 @@ export function Checkbox(props: CheckboxProps) {
 
       <Box
         as="span"
-        className={clsx(checkboxMarkClassName, error && 'sui-error')}
+        className={clsx(checkboxMarkClassName, hasError && 'sui-error')}
         position="relative"
         radius={2}
         width="17px"

package/src/components/checkbox/checkbox.props.ts

@@ -7,7 +7,7 @@ export interface CheckboxProps extends React.ComponentProps<'input'>, MarginProp
    * Applies error styling to the checkbox mark.
    * @remarks Use when form validation fails. Pair with a visible error message. The prop is visual only.
    */
-  error?: boolean
+  hasError?: boolean
   /**
    * Renders the "mixed state" mark (a horizontal line).
    * @remarks Use when the checkbox controls a group with some-but-not-all children checked.
@@ -20,7 +20,7 @@ export interface CheckboxProps extends React.ComponentProps<'input'>, MarginProp
 }
 
 export const checkboxProps: Record<string, PropDef> = {
-  error: {
+  hasError: {
     type: 'boolean',
   },
   indeterminate: {

package/src/components/grid/grid.props.ts

@@ -1,3 +1,4 @@
+import {flexParentProps, type FlexParentProps} from '../../props/flexParent'
 import {type GapProps, gapProps} from '../../props/gap'
 import {type GridParentProps, gridParentProps} from '../../props/gridParent'
 import {type LayoutProps, layoutProps} from '../../props/layout'
@@ -7,7 +8,11 @@ import type {Responsive} from '../../types/Responsive'
 
 /** @public */
 export interface GridProps<T extends React.ElementType = 'div'>
-  extends GridParentProps, GapProps, LayoutProps {
+  extends
+    Pick<FlexParentProps, 'alignItems' | 'justifyContent'>,
+    GridParentProps,
+    GapProps,
+    LayoutProps {
   /**
    * HTML element or component to render.
    */
@@ -27,6 +32,8 @@ export const gridProps: Record<string, PropDef> = {
     className: 'display',
     values: DISPLAY_GRID,
   },
+  alignItems: flexParentProps['alignItems'] as PropDef,
+  justifyContent: flexParentProps['justifyContent'] as PropDef,
   ...gridParentProps,
   ...gapProps,
   ...layoutProps,

package/src/components/hotkeys/Hotkeys.tsx

@@ -0,0 +1,29 @@
+import clsx from 'clsx'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {KBD} from '../kbd/KBD'
+import {type HotkeysProps, hotkeysProps} from './hotkeys.props'
+
+const hotkeysClassName = suffixClassName('sui-Hotkeys')
+
+/** @alpha */
+export function Hotkeys({keys, ...props}: HotkeysProps) {
+  const {className, style, ...rest} = getProps(props, hotkeysProps)
+
+  if (!keys || keys.length === 0) {
+    return null
+  }
+
+  const hotkeysClasses = clsx(hotkeysClassName, 'sui-display-inline-flex')
+
+  return (
+    <kbd className={clsx(hotkeysClasses, className)} style={style} data-ui="Hotkeys" {...rest}>
+      {keys.map((key) => (
+        <KBD key={key} text={key} />
+      ))}
+    </kbd>
+  )
+}
+
+export type {HotkeysProps}

package/src/components/hotkeys/hotkeys.css

@@ -0,0 +1,3 @@
+.sui-Hotkeys {
+  gap: calc(var(--space-1) / 2);
+}

package/src/components/hotkeys/hotkeys.props.ts

@@ -0,0 +1,15 @@
+import {type PropDef} from '../../types/PropDef'
+
+/** @public */
+export interface HotkeysProps extends React.ComponentProps<'kbd'> {
+  /**
+   * The keys in the shortcut, in order. Each one renders as a KBD.
+   */
+  keys?: string[]
+}
+
+export const hotkeysProps: Record<string, PropDef> = {
+  keys: {
+    type: 'string',
+  },
+}

package/src/components/icon/Icon.tsx

@@ -17,6 +17,7 @@ export function Icon({icon, size = 2, ...props}: IconProps) {
   const svgProps = {
     'className': clsx(
       iconClassName,
+      'sui-display-block',
       className,
       iconElement ? iconElement.props.className : undefined,
     ),

package/src/components/index.css

@@ -1,3 +1,6 @@
+@import './avatar/avatar.css';
+@import './avatar-counter/avatar-counter.css';
+@import './avatar-stack/avatar-stack.css';
 @import './badge/badge.css';
 @import './box/box.css';
 @import './button/button.css';
@@ -10,10 +13,12 @@
 @import './flex/flex.css';
 @import './grid/grid.css';
 @import './heading/heading.css';
+@import './hotkeys/hotkeys.css';
 @import './icon/icon.css';
 @import './indicator/indicator.css';
 @import './indicator-stack/indicator-stack.css';
 @import './inline/inline.css';
+@import './kbd/kbd.css';
 @import './label/label.css';
 @import './link/link.css';
 @import './list/list.css';
@@ -25,6 +30,7 @@
 @import './skip-to-content/skip-to-content.css';
 @import './switch/switch.css';
 @import './text/text.css';
+@import './text-area/text-area.css';
 @import './text-input/text-input.css';
 @import './tooltip/tooltip.css';
 @import './visually-hidden/visually-hidden.css';

package/src/components/kbd/KBD.tsx

@@ -0,0 +1,33 @@
+import clsx from 'clsx'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {Text} from '../text/Text'
+import {type KBDProps, kbdProps} from './kbd.props'
+
+const kbdClassName = suffixClassName('sui-KBD')
+
+/** @alpha */
+export function KBD(props: KBDProps) {
+  const {className, style, text, ...rest} = getProps(props, kbdProps)
+
+  const kbdClasses = clsx(kbdClassName, 'sui-p1 sui-radius2 sui-display-inline-block')
+
+  return (
+    <Text
+      as="kbd"
+      className={clsx(kbdClasses, className)}
+      style={style}
+      data-ui="KBD"
+      size={0}
+      weight="semibold"
+      muted
+      trim
+      {...rest}
+    >
+      {text}
+    </Text>
+  )
+}
+
+export type {KBDProps}

package/src/components/kbd/kbd.css

@@ -0,0 +1,6 @@
+.sui-KBD {
+  --kbd-background: var(--backdrop);
+  --kbd-border-color: var(--separator-low);
+  background-color: var(--kbd-background);
+  box-shadow: inset 0 0 0 1px var(--kbd-border-color);
+}

package/src/components/kbd/kbd.props.ts

@@ -0,0 +1,20 @@
+import {type PropDef} from '../../types/PropDef'
+
+/** @public */
+export interface KBDProps extends React.ComponentProps<'kbd'> {
+  /**
+   * Sets KBD's key label.
+   */
+  text?: string
+  /**
+   * Not accepted.
+   * @remarks Pass the key label via `text`.
+   */
+  children?: never
+}
+
+export const kbdProps: Record<string, PropDef> = {
+  text: {
+    type: 'string',
+  },
+}

package/src/components/radio/Radio.tsx

@@ -13,7 +13,7 @@ const radioMarkClassName = suffixClassName('sui-RadioMark')
 
 /** @beta */
 export function Radio(props: RadioProps) {
-  const {className, style, label, disabled, error, ...rest} = getProps(props, radioProps)
+  const {className, style, label, disabled, hasError, ...rest} = getProps(props, radioProps)
 
   return (
     <Label
@@ -21,7 +21,7 @@ export function Radio(props: RadioProps) {
       style={style}
       data-ui="Radio"
       disabled={disabled}
-      error={error}
+      error={hasError}
     >
       <VisuallyHidden
         as="input"
@@ -33,7 +33,7 @@ export function Radio(props: RadioProps) {
 
       <Box
         as="span"
-        className={clsx(radioMarkClassName, error && 'sui-error')}
+        className={clsx(radioMarkClassName, hasError && 'sui-error')}
         position="relative"
         radius="full"
         width="17px"

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

@@ -7,7 +7,7 @@ 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
+  hasError?: boolean
   /**
    * Visible label next to the radio.
    */
@@ -15,7 +15,7 @@ export interface RadioProps extends React.ComponentProps<'input'>, MarginProps {
 }
 
 export const radioProps: Record<string, PropDef> = {
-  error: {
+  hasError: {
     type: 'boolean',
   },
   label: {

package/src/components/select/select.props.ts

@@ -5,6 +5,7 @@ import {type PropDef} from '../../types/PropDef'
 export interface SelectProps extends React.ComponentProps<'select'>, FormElementDensityProps {
   /**
    * Used to trigger styling for invalid states.
+   * @remarks Use when form validation fails. Pair with a visible error message.
    */
   hasError?: boolean
 }