@sanity/ui 4.2.0 → 5.0.0-alpha.10

package/src/components/badge/badge.props.ts

@@ -0,0 +1,31 @@
+import {type ToneProps, toneProps} from '../../props/tone'
+import {type PropDef} from '../../types/PropDef'
+
+/** @public */
+export interface BadgeProps<T extends React.ElementType = 'span'> extends ToneProps {
+  /**
+   * HTML element to render.
+   */
+  as?: T
+  /**
+   * Shows an icon in the start position (left side in left-to-right languages).
+   */
+  iconStart?: React.ElementType | React.ReactNode
+  /**
+   * Sets Badge's text label. Use instead of children unless you have a special use case.
+   */
+  text?: string
+}
+
+export const badgeProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  iconStart: {
+    type: 'string',
+  },
+  text: {
+    type: 'string',
+  },
+  ...toneProps,
+}

package/src/components/box/Box.tsx

@@ -0,0 +1,30 @@
+import clsx from 'clsx'
+import type {ComponentPropsWithRef, ElementType} from 'react'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {type BoxProps, boxProps} from './box.props'
+
+const boxClassName = suffixClassName('sui-Box')
+
+/** @public */
+export function Box<T extends ElementType = 'div'>({
+  display = 'block',
+  minHeight = '0',
+  minWidth = '0',
+  ...props
+}: BoxProps<T> & Omit<ComponentPropsWithRef<T>, keyof BoxProps<T>>) {
+  const {as, children, className, style, ...rest} = getProps(
+    {display, minHeight, minWidth, ...props},
+    boxProps,
+  )
+  const Component = as || 'div'
+
+  return (
+    <Component className={clsx(boxClassName, className)} style={style} data-ui="Box" {...rest}>
+      {children}
+    </Component>
+  )
+}
+
+export type {BoxProps}

package/src/components/box/box.css

@@ -0,0 +1,4 @@
+.sui-Box[class*='sui-tone'] {
+  --box-background: var(--background-low);
+  background-color: var(--box-background);
+}

package/src/components/box/box.props.ts

@@ -0,0 +1,29 @@
+import {type LayoutProps, layoutProps} from '../../props/layout'
+import {DISPLAY_BLOCK, type DisplayBlock} from '../../types/Display'
+import {type PropDef} from '../../types/PropDef'
+import type {Responsive} from '../../types/Responsive'
+
+/** @public */
+export interface BoxProps<T extends React.ElementType = 'div'> extends LayoutProps {
+  /**
+   * HTML element or component to render.
+   */
+  as?: T
+  /**
+   * CSS `display` property.
+   * @remarks Does not include `'flex'` or `'grid'`. Use the Flex or Grid components for those.
+   */
+  display?: Responsive<DisplayBlock>
+}
+
+export const boxProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  display: {
+    type: 'union',
+    className: 'display',
+    values: DISPLAY_BLOCK,
+  },
+  ...layoutProps,
+}

package/src/components/button/Button.tsx

@@ -0,0 +1,78 @@
+import clsx from 'clsx'
+import {type ComponentPropsWithRef, type ElementType, isValidElement} from 'react'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {Flex} from '../flex/Flex'
+import {Icon} from '../icon/Icon'
+import {Spinner} from '../spinner/Spinner'
+import {Text} from '../text/Text'
+import {type ButtonProps, buttonProps} from './button.props'
+
+const buttonClassName = suffixClassName('sui-Button')
+
+/** @public */
+export function Button<T extends ElementType = 'button'>({
+  density = 'regular',
+  level = 'primary',
+  tone = 'neutral',
+  ...props
+}: ButtonProps<T> & Omit<ComponentPropsWithRef<T>, keyof ButtonProps<T>>) {
+  const {
+    as,
+    children,
+    className,
+    disabled,
+    style,
+    iconStart: IconStart,
+    iconEnd: IconEnd,
+    loading,
+    text,
+    ...rest
+  } = getProps({density, level, tone, ...props}, buttonProps)
+  const Component = as || 'button'
+
+  return (
+    <Component
+      className={clsx(
+        buttonClassName,
+        'sui-display-inline-flex sui-align-items-center sui-justify-content-center sui-radius2 sui-position-relative sui-overflow-hidden',
+        className,
+      )}
+      style={style}
+      data-ui="Button"
+      disabled={disabled || loading}
+      aria-busy={loading ? true : undefined}
+      {...rest}
+    >
+      {loading && (
+        <Flex position="absolute" inset={0} alignItems="center" justifyContent="center">
+          <Spinner />
+        </Flex>
+      )}
+
+      {IconStart &&
+        (isValidElement(IconStart) ? (
+          IconStart
+        ) : (
+          <Icon icon={IconStart} marginX={-1} marginY={-2} size={1} />
+        ))}
+
+      {text && (
+        <Text size={1} weight="medium" trim>
+          {text}
+        </Text>
+      )}
+
+      {children}
+      {IconEnd &&
+        (isValidElement(IconEnd) ? (
+          IconEnd
+        ) : (
+          <Icon icon={IconEnd} marginX={-1} marginY={-2} size={1} />
+        ))}
+    </Component>
+  )
+}
+
+export type {ButtonProps}

package/src/components/button/button.css

@@ -0,0 +1,72 @@
+.sui-Button {
+  background: var(--background-color);
+  box-shadow: inset 0 0 0 1px var(--border-color, transparent);
+  color: var(--foreground-color);
+  text-decoration: none;
+  transition: var(--hover-transition);
+  appearance: none;
+}
+
+.sui-Button:hover {
+  background: color-mix(
+    in srgb,
+    var(--tone-500) 25%,
+    var(--background-color)
+  );
+}
+
+.sui-Button.sui-button-level-primary:hover {
+  background: color-mix(
+    in srgb,
+    var(--tone-950) 25%,
+    var(--background-color)
+  );
+}
+
+.sui-Button[class*='sui-tone']:disabled {
+  --background-color: var(--inert-background);
+  --foreground-color: var(--inert-foreground);
+  --border-color: transparent;
+  pointer-events: none;
+}
+
+.sui-Button:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-offset);
+}
+
+.sui-Button :is([data-sanity-icon], .sui-Spinner, .sui-Text) {
+  color: inherit;
+}
+
+.sui-Button > .sui-Flex + * {
+  opacity: 0;
+}
+
+.sui-button-level-primary {
+  --background-color: var(--background-high-emphasized);
+  --foreground-color: var(--foreground-low-emphasized);
+}
+
+.sui-button-level-primary.sui-tone-critical {
+  --background-color: var(--background-low-emphasized);
+}
+
+.sui-button-level-secondary {
+  --background-color: var(--background-high);
+  --foreground-color: var(--foreground-high);
+  --border-color: var(--separator-low)
+}
+
+.sui-button-level-secondary.sui-tone-critical {
+  --foreground-color: var(--foreground-low);
+}
+
+.sui-button-level-tertiary {
+  --background-color: transparent;
+  --foreground-color: var(--foreground-high);
+}
+
+.sui-button-level-tertiary.sui-tone-critical {
+  --foreground-color: var(--foreground-low);
+}

package/src/components/button/button.props.ts

@@ -0,0 +1,122 @@
+import {gapProps} from '../../props/gap'
+import {heightProps} from '../../props/height'
+import {paddingProps} from '../../props/padding'
+import {widthProps} from '../../props/width'
+import {
+  BUTTON_DENSITY,
+  BUTTON_LEVEL,
+  BUTTON_TONE,
+  type ButtonDensity,
+  type ButtonLevel,
+  type ButtonTone,
+} from '../../types/Button'
+import type {InteractiveAs} from '../../types/Interactive'
+import {type PropDef} from '../../types/PropDef'
+import type {Responsive} from '../../types/Responsive'
+
+/** @public */
+export interface ButtonProps<T extends React.ElementType = 'button'> {
+  /**
+   * HTML element to render.
+   */
+  as?: InteractiveAs<T>
+  /**
+   * Sets padding and gap together to specify size.
+   */
+  density?: ButtonDensity
+  /**
+   * Sets Button to fill the width of its container.
+   */
+  fullWidth?: Responsive<boolean>
+  /**
+   * Shows an icon in the start position (left side in left-to-right languages).
+   */
+  iconStart?: React.ElementType | React.ReactNode
+  /**
+   * Shows an icon in the end position (right side in left-to-right languages).
+   */
+  iconEnd?: React.ElementType | React.ReactNode
+  /**
+   * Sets the importance of Button's action.
+   */
+  level?: ButtonLevel
+  /**
+   * Places Button into a loading state.
+   */
+  loading?: boolean
+  /**
+   * Sets Button's text label.
+   */
+  text?: string
+  /**
+   * Sets Button's semantic meaning and related color.
+   */
+  tone?: ButtonTone
+}
+
+export const buttonProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  density: {
+    type: 'composite',
+    values: BUTTON_DENSITY,
+    composition: {
+      gap: {
+        propDef: gapProps['gap'] as PropDef,
+        mapping: {
+          regular: 2,
+          loose: 3,
+        },
+      },
+      padding: {
+        propDef: paddingProps['padding'] as PropDef,
+        mapping: {
+          regular: 2,
+          loose: 3,
+        },
+      },
+      minHeight: {
+        propDef: heightProps['minHeight'] as PropDef,
+        mapping: {
+          regular: '25px',
+          loose: '33px',
+        },
+      },
+      minWidth: {
+        propDef: widthProps['minWidth'] as PropDef,
+        mapping: {
+          regular: '25px',
+          loose: '33px',
+        },
+      },
+    },
+  },
+  fullWidth: {
+    type: 'boolean',
+    className: 'width-full',
+    inverseClassName: 'width-auto',
+  },
+  iconStart: {
+    type: 'string',
+  },
+  iconEnd: {
+    type: 'string',
+  },
+  level: {
+    type: 'union',
+    className: 'button-level',
+    values: BUTTON_LEVEL,
+  },
+  loading: {
+    type: 'boolean',
+  },
+  text: {
+    type: 'string',
+  },
+  tone: {
+    type: 'union',
+    className: 'tone',
+    values: BUTTON_TONE,
+  },
+}

package/src/components/card/Card.tsx

@@ -0,0 +1,31 @@
+import clsx from 'clsx'
+import type {ComponentPropsWithRef, ElementType} from 'react'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {type CardProps, cardProps} from './card.props'
+
+const cardClassName = suffixClassName('sui-Card')
+
+/** @public */
+export function Card<T extends ElementType = 'div'>({
+  density = 'regular',
+  tone = 'neutral',
+  ...props
+}: CardProps<T> & Omit<ComponentPropsWithRef<T>, keyof CardProps<T>>) {
+  const {as, children, className, style, ...rest} = getProps({density, tone, ...props}, cardProps)
+  const Component = as || 'div'
+
+  return (
+    <Component
+      className={clsx(cardClassName, 'sui-border', className)}
+      style={style}
+      data-ui="Card"
+      {...rest}
+    >
+      {children}
+    </Component>
+  )
+}
+
+export type {CardProps}

package/src/components/card/card.css

@@ -0,0 +1,4 @@
+.sui-Card {
+  --card-background: var(--background-low);
+  background-color: var(--card-background);
+}

package/src/components/card/card.props.ts

@@ -0,0 +1,58 @@
+import {borderProps} from '../../props/border'
+import {gapProps} from '../../props/gap'
+import {type MarginProps, marginProps} from '../../props/margin'
+import {paddingProps} from '../../props/padding'
+import {type ToneProps, toneProps} from '../../props/tone'
+import {DENSITY, type Density} from '../../types/Density'
+import {type PropDef} from '../../types/PropDef'
+import {type Responsive} from '../../types/Responsive'
+
+/** @public */
+export interface CardProps<T extends React.ElementType = 'div'> extends MarginProps, ToneProps {
+  /**
+   * HTML element or component to render.
+   */
+  as?: T
+  /**
+   * Sets padding, gap, and border-radius together to specify size. This prop is used in place of separate `padding`, `gap`, and `border-radius` props.
+   */
+  density?: Responsive<Density>
+}
+
+export const cardProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  density: {
+    type: 'composite',
+    values: DENSITY,
+    composition: {
+      gap: {
+        propDef: gapProps['gap'] as PropDef,
+        mapping: {
+          compact: 2,
+          regular: 3,
+          loose: 4,
+        },
+      },
+      padding: {
+        propDef: paddingProps['padding'] as PropDef,
+        mapping: {
+          compact: 3,
+          regular: 4,
+          loose: 5,
+        },
+      },
+      radius: {
+        propDef: borderProps['radius'] as PropDef,
+        mapping: {
+          compact: 2,
+          regular: 3,
+          loose: 4,
+        },
+      },
+    },
+  } satisfies PropDef<Density>,
+  ...toneProps,
+  ...marginProps,
+}

package/src/components/checkbox/Checkbox.tsx

@@ -0,0 +1,64 @@
+import {CheckmarkIcon} from '@sanity/icons/Checkmark'
+import {RemoveIcon} from '@sanity/icons/Remove'
+import clsx from 'clsx'
+import {useEffect, useRef} from 'react'
+
+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 CheckboxProps, checkboxProps} from './checkbox.props'
+
+const checkboxClassName = suffixClassName('sui-Checkbox')
+const checkboxInputClassName = suffixClassName('sui-CheckboxInput')
+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(
+    props,
+    checkboxProps,
+  )
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate
+    }
+  }, [indeterminate])
+
+  return (
+    <Label
+      className={clsx(checkboxClassName, 'sui-position-relative', className)}
+      style={style}
+      data-ui="Checkbox"
+      disabled={disabled}
+      error={error}
+    >
+      <VisuallyHidden
+        as="input"
+        type="checkbox"
+        className={checkboxInputClassName}
+        ref={inputRef}
+        disabled={disabled}
+        {...rest}
+      />
+
+      <Box
+        as="span"
+        className={clsx(checkboxMarkClassName, error && 'sui-error')}
+        position="relative"
+        radius={2}
+        width="17px"
+        height="17px"
+      >
+        {indeterminate ? <RemoveIcon /> : <CheckmarkIcon />}
+      </Box>
+
+      {label}
+    </Label>
+  )
+}
+
+export type {CheckboxProps}

package/src/components/checkbox/checkbox.css

@@ -0,0 +1,100 @@
+/*
+  * Custom checkbox, base
+  */
+.sui-CheckboxMark {
+  /* 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);
+  color: transparent;
+  font-size: 16px;
+  transition: var(--hover-transition);
+}
+
+/**
+  * Hover - uses relative border/background colours to darken/lighten in both normal & error state
+  */
+/** Checkbox border (unchecked) */
+.sui-Checkbox:hover .sui-CheckboxMark {
+  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)
+  );
+}
+
+/** Checkbox background (checked, indeterminate) */
+.sui-Checkbox:hover .sui-CheckboxInput:is(:checked, :indeterminate) + .sui-CheckboxMark {
+  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-CheckboxInput:focus-visible + .sui-CheckboxMark {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-offset);
+}
+
+/**
+  * Checked/indeterminate
+  */
+.sui-CheckboxInput:is(:checked, :indeterminate) + .sui-CheckboxMark {
+  --background-color: var(--active-background-emphasized);
+  --border-color: transparent;
+  color: var(--active-foreground-emphasized);
+}
+
+/**
+  * Disabled
+  */
+.sui-CheckboxInput:disabled + .sui-CheckboxMark {
+  --background-color: var(--inert-background);
+  --border-color: var(--separator-low);
+}
+
+/* Turn hover (and all pointer events) off for disabled checkboxes */
+.sui-Checkbox:has(:disabled) {
+  pointer-events: none;
+}
+
+/**
+  * Disabled, but checked/indeterminate
+  */
+.sui-CheckboxInput:is(:checked, :indeterminate):disabled + .sui-CheckboxMark {
+  --border-color: var(--separator-low);
+  color: var(--inert-foreground);
+}
+
+/**
+  * Error
+  */
+.sui-CheckboxMark.sui-error {
+  --border-color: var(--error-separator);
+}
+
+/**
+  * Error, checked/indeterminate
+  */
+.sui-CheckboxInput:is(:checked, :indeterminate) + .sui-CheckboxMark.sui-error {
+  --background-color: var(--error-background-emphasized);
+}
+
+/**
+  * Check/dash icons
+  */
+.sui-CheckboxMark svg {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.sui-CheckboxMark path {
+  vector-effect: non-scaling-stroke;
+  stroke-width: 1.5px;
+}

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

@@ -0,0 +1,33 @@
+import {type MarginProps, marginProps} from '../../props/margin'
+import {type PropDef} from '../../types/PropDef'
+
+/** @beta */
+export interface CheckboxProps extends React.ComponentProps<'input'>, MarginProps {
+  /**
+   * 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
+  /**
+   * Renders the "mixed state" mark (a horizontal line).
+   * @remarks Use when the checkbox controls a group with some-but-not-all children checked.
+   */
+  indeterminate?: boolean
+  /**
+   * Visible label next to the checkbox.
+   */
+  label: React.ReactNode
+}
+
+export const checkboxProps: Record<string, PropDef> = {
+  error: {
+    type: 'boolean',
+  },
+  indeterminate: {
+    type: 'boolean',
+  },
+  label: {
+    type: 'string',
+  },
+  ...marginProps,
+}