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

package/src/components/heading/heading.css

@@ -0,0 +1,9 @@
+.sui-Heading {
+  --heading-color: var(--foreground-high);
+  color: var(--heading-color);
+}
+
+.sui-Heading:where(.sui-text-muted) {
+  --heading-color-muted: var(--foreground-low);
+  color: var(--heading-color-muted);
+}

package/src/components/heading/heading.props.ts

@@ -0,0 +1,25 @@
+import {type TypographyProps, typographyProps} from '../../props/typography'
+import {HEADING_SIZE, HEADING_TAG, type HeadingSize, type HeadingTag} from '../../types/Heading'
+import {type PropDef} from '../../types/PropDef'
+import type {Responsive} from '../../types/Responsive'
+
+/** @public */
+export interface HeadingProps extends TypographyProps {
+  /** Element to render */
+  as?: HeadingTag
+  /** CSS **font-size** property */
+  size?: Responsive<HeadingSize>
+}
+
+export const headingProps: Record<string, PropDef> = {
+  as: {
+    type: 'union',
+    values: HEADING_TAG,
+  },
+  size: {
+    type: 'union',
+    className: 'text-heading',
+    values: HEADING_SIZE,
+  },
+  ...typographyProps,
+}

package/src/components/icon/Icon.tsx

@@ -0,0 +1,24 @@
+import clsx from 'clsx'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {type IconProps, iconProps} from './icon.props'
+
+const iconClassName = suffixClassName('sui-Icon')
+
+/** @public */
+export function Icon({size = 2, ...props}: IconProps) {
+  const {className, style, icon: Component, ...rest} = getProps({size, ...props}, iconProps)
+
+  return (
+    <Component
+      className={clsx(iconClassName, className)}
+      data-ui="Icon"
+      style={style}
+      aria-hidden={props['aria-label'] ? undefined : true}
+      {...rest}
+    />
+  )
+}
+
+export type {IconProps}

package/src/components/icon/icon.css

@@ -0,0 +1,17 @@
+.sui-Icon {
+  --icon-color: var(--foreground-high);
+  color: var(--icon-color);
+}
+
+.sui-Icon:where(.sui-text-muted) {
+  --icon-color-muted: var(--foreground-low);
+  color: var(--icon-color-muted);
+}
+
+@breakpoints {
+  .sui-icon-body0 { font-size: 17px; }
+  .sui-icon-body1 { font-size: 21px; }
+  .sui-icon-body2 { font-size: 25px; }
+  .sui-icon-body3 { font-size: 29px; }
+  .sui-icon-body4 { font-size: 33px; }
+}

package/src/components/icon/icon.props.ts

@@ -0,0 +1,31 @@
+import type {ComponentProps, SVGProps} from 'react'
+
+import {type MarginProps, marginProps} from '../../props/margin'
+import {type ToneProps, toneProps} from '../../props/tone'
+import {type TypographyProps, typographyProps} from '../../props/typography'
+import {ICON_SIZE, type IconSize} from '../../types/Icon'
+import {type PropDef} from '../../types/PropDef'
+import type {Responsive} from '../../types/Responsive'
+
+/** @public */
+export interface IconProps
+  extends ComponentProps<'svg'>, Pick<TypographyProps, 'muted'>, MarginProps, ToneProps {
+  /** Icon to render */
+  icon: React.ComponentType<SVGProps<SVGSVGElement>>
+  /** CSS **font-size** property */
+  size?: Responsive<IconSize>
+}
+
+export const iconProps: Record<string, PropDef> = {
+  icon: {
+    type: 'string',
+  },
+  size: {
+    type: 'union',
+    className: 'icon-body',
+    values: ICON_SIZE,
+  },
+  muted: typographyProps['muted'] as PropDef,
+  ...toneProps,
+  ...marginProps,
+}

package/src/components/icon-button/IconButton.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 {Button} from '../button/Button'
+import {Icon} from '../icon/Icon'
+import {type IconButtonProps, iconButtonProps} from './iconButton.props'
+
+const iconButtonClassName = suffixClassName('sui-IconButton')
+
+/** @public */
+export function IconButton<T extends ElementType = 'button'>(
+  props: IconButtonProps<T> & Omit<ComponentPropsWithRef<T>, keyof IconButtonProps<T>>,
+) {
+  const {as, className, style, icon: IconProp, ...rest} = getProps(props, iconButtonProps)
+  const Component = as || 'button'
+
+  return (
+    <Button
+      as={Component}
+      className={clsx(iconButtonClassName, className)}
+      style={style}
+      data-ui="IconButton"
+      {...rest}
+    >
+      <Icon icon={IconProp} margin={-2} size={1} />
+    </Button>
+  )
+}
+
+export type {IconButtonProps}

package/src/components/icon-button/iconButton.props.ts

@@ -0,0 +1,26 @@
+import type {SVGProps} from 'react'
+import type React from 'react'
+
+import {type PropDef} from '../../types/PropDef'
+import {type ButtonProps, buttonProps} from '../button/button.props'
+
+/** @public */
+export interface IconButtonProps<T extends React.ElementType = 'button'> extends Pick<
+  ButtonProps<T>,
+  'as' | 'density' | 'level' | 'loading' | 'tone'
+> {
+  /** Button label */
+  'aria-label': string
+  /** Icon */
+  'icon': React.ComponentType<SVGProps<SVGSVGElement>>
+}
+
+export const iconButtonProps: Record<string, PropDef> = {
+  'aria-label': {
+    type: 'string',
+  },
+  'as': buttonProps['as'] as PropDef,
+  'icon': {
+    type: 'string',
+  },
+}

package/src/components/index.css

@@ -0,0 +1,25 @@
+@import './box/box.css';
+@import './button/button.css';
+@import './card/card.css';
+@import './checkbox/checkbox.css';
+@import './code/code.css';
+@import './container/container.css';
+@import './eyebrow/eyebrow.css';
+@import './flex/flex.css';
+@import './grid/grid.css';
+@import './heading/heading.css';
+@import './icon/icon.css';
+@import './indicator/indicator.css';
+@import './indicator-stack/indicator-stack.css';
+@import './inline/inline.css';
+@import './label/label.css';
+@import './link/link.css';
+@import './list/list.css';
+@import './press-area/press-area.css';
+@import './radio/radio.css';
+@import './spinner/spinner.css';
+@import './skip-to-content/skip-to-content.css';
+@import './switch/switch.css';
+@import './text/text.css';
+@import './tooltip/tooltip.css';
+@import './visually-hidden/visually-hidden.css';

package/src/components/indicator/Indicator.tsx

@@ -0,0 +1,42 @@
+import clsx from 'clsx'
+import type {ComponentPropsWithRef, ElementType} from 'react'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {Box} from '../box/Box'
+import {type IndicatorProps, indicatorProps} from './indicator.props'
+
+const indicatorClassName = suffixClassName('sui-Indicator')
+
+/** @beta */
+export function Indicator<T extends ElementType = 'span'>({
+  tone = 'neutral',
+  ...props
+}: IndicatorProps<T> & Omit<ComponentPropsWithRef<T>, keyof IndicatorProps<T>>) {
+  const {as, children, className, style, label, ...rest} = getProps(
+    {tone, ...props},
+    indicatorProps,
+  )
+  const Component = as || 'span'
+  const ariaLabel = label || rest['aria-label']
+
+  return (
+    <Box
+      as={Component}
+      className={clsx(indicatorClassName, className)}
+      style={style}
+      data-ui="Indicator"
+      width="5px"
+      height="5px"
+      radius="full"
+      aria-label={ariaLabel}
+      aria-hidden={ariaLabel ? undefined : true}
+      role={ariaLabel ? 'img' : undefined}
+      {...rest}
+    >
+      {children}
+    </Box>
+  )
+}
+
+export type {IndicatorProps}

package/src/components/indicator/indicator.css

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

package/src/components/indicator/indicator.props.ts

@@ -0,0 +1,20 @@
+import {type ToneProps, toneProps} from '../../props/tone'
+import {type PropDef} from '../../types/PropDef'
+
+/** @beta */
+export interface IndicatorProps<T extends React.ElementType = 'span'> extends ToneProps {
+  /** Element to render */
+  as?: T
+  /** Label for aria-label attribute */
+  label?: string
+}
+
+export const indicatorProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  label: {
+    type: 'string',
+  },
+  ...toneProps,
+}

package/src/components/indicator-stack/IndicatorStack.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 {HStack} from '../h-stack/HStack'
+import {type IndicatorStackProps, indicatorStackProps} from './indicatorStack.props'
+
+const indicatorStackClassName = suffixClassName('sui-IndicatorStack')
+
+/** @public */
+export function IndicatorStack<T extends ElementType = 'div'>(
+  props: IndicatorStackProps<T> & Omit<ComponentPropsWithRef<T>, keyof IndicatorStackProps<T>>,
+) {
+  const {as, children, className, style, ...rest} = getProps(props, indicatorStackProps)
+  const Component = as || 'div'
+
+  return (
+    <HStack
+      as={Component}
+      className={clsx(indicatorStackClassName, className)}
+      style={style}
+      data-ui="IndicatorStack"
+      {...rest}
+    >
+      {children}
+    </HStack>
+  )
+}
+
+export type {IndicatorStackProps}

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

@@ -0,0 +1,7 @@
+.sui-IndicatorStack .sui-Indicator:has(+ .sui-Indicator) {
+  mask-image: radial-gradient(
+    circle 3px at calc(100% + 1.75px) 50%,
+    transparent 95%,
+    #000 100%
+  );
+}

package/src/components/indicator-stack/indicatorStack.props.ts

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

package/src/components/inline/Inline.tsx

@@ -0,0 +1,38 @@
+import clsx from 'clsx'
+import {Children, type ComponentPropsWithRef, type ElementType} from 'react'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {inlineChildrenProps, type InlineProps, inlineProps} from './inline.props'
+
+const inlineClassName = suffixClassName('sui-Inline')
+
+/** @deprecated Use HStack component instead */
+/** @public */
+export function Inline<T extends ElementType = 'div'>(
+  // oxlint-disable-next-line no-deprecated
+  props: InlineProps<T> & Omit<ComponentPropsWithRef<T>, keyof InlineProps<T>>,
+) {
+  const {as, children: childrenProp, className, style, ...rest} = getProps(props, inlineProps)
+  const {className: childrenClassName} = getProps(props, inlineChildrenProps)
+  const Component = as || 'div'
+
+  const children = Children.map(
+    childrenProp,
+    (child) => child && <div className={childrenClassName}>{child}</div>,
+  )
+
+  return (
+    <Component
+      className={clsx(inlineClassName, className)}
+      style={style}
+      data-ui="Inline"
+      {...rest}
+    >
+      {children}
+    </Component>
+  )
+}
+
+// oxlint-disable-next-line no-deprecated
+export type {InlineProps}

package/src/components/inline/inline.css

@@ -0,0 +1,4 @@
+.sui-Inline > div {
+  display: inline-block;
+  vertical-align: middle;
+}

package/src/components/inline/inline.props.ts

@@ -0,0 +1,96 @@
+import {marginProps} from '../../props/margin'
+import {type PaddingProps, paddingProps} from '../../props/padding'
+import {type PropDef} from '../../types/PropDef'
+import type {Responsive} from '../../types/Responsive'
+import {SPACE, type SpaceInherit} from '../../types/Space'
+
+/** @deprecated Use HStack component instead */
+/** @public */
+export interface InlineProps<T extends React.ElementType = 'div'> extends PaddingProps {
+  /** Element to render */
+  as?: T
+  /** CSS **gap** property */
+  gap?: Responsive<SpaceInherit>
+}
+
+export const inlineProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  gap: {
+    type: 'composite',
+    values: SPACE,
+    composition: {
+      marginTop: {
+        propDef: marginProps['marginTop'] as PropDef,
+        mapping: {
+          0: 0,
+          1: -1,
+          2: -2,
+          3: -3,
+          4: -4,
+          5: -5,
+          6: -6,
+          7: -7,
+          8: -8,
+          9: -9,
+        },
+      },
+      marginLeft: {
+        propDef: marginProps['marginLeft'] as PropDef,
+        mapping: {
+          0: 0,
+          1: -1,
+          2: -2,
+          3: -3,
+          4: -4,
+          5: -5,
+          6: -6,
+          7: -7,
+          8: -8,
+          9: -9,
+        },
+      },
+    },
+  },
+  ...paddingProps,
+}
+
+export const inlineChildrenProps: Record<string, PropDef> = {
+  gap: {
+    type: 'composite',
+    values: SPACE,
+    composition: {
+      paddingTop: {
+        propDef: paddingProps['paddingTop'] as PropDef,
+        mapping: {
+          0: 0,
+          1: 1,
+          2: 2,
+          3: 3,
+          4: 4,
+          5: 5,
+          6: 6,
+          7: 7,
+          8: 8,
+          9: 9,
+        },
+      },
+      paddingLeft: {
+        propDef: paddingProps['paddingLeft'] as PropDef,
+        mapping: {
+          0: 0,
+          1: 1,
+          2: 2,
+          3: 3,
+          4: 4,
+          5: 5,
+          6: 6,
+          7: 7,
+          8: 8,
+          9: 9,
+        },
+      },
+    },
+  },
+}

package/src/components/label/Label.tsx

@@ -0,0 +1,34 @@
+import clsx from 'clsx'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {Text} from '../text/Text'
+import {type LabelProps, labelProps} from './label.props'
+
+const labelClassName = suffixClassName('sui-Label')
+
+/** @beta */
+export function Label(props: LabelProps) {
+  const {children, className, style, disabled, error, ...rest} = getProps(props, labelProps)
+
+  return (
+    <Text
+      as="label"
+      size={1}
+      muted={disabled}
+      className={clsx(
+        labelClassName,
+        'sui-display-flex sui-align-items-center sui-gap2',
+        error && 'sui-error',
+        className,
+      )}
+      style={style}
+      data-ui="Label"
+      {...rest}
+    >
+      {children}
+    </Text>
+  )
+}
+
+export type {LabelProps}

package/src/components/label/label.css

@@ -0,0 +1,3 @@
+.sui-Label.sui-error {
+  color: var(--error-foreground);
+}

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

@@ -0,0 +1,19 @@
+import {type MarginProps, marginProps} from '../../props/margin'
+import {type PropDef} from '../../types/PropDef'
+
+/** @beta */
+export interface LabelProps extends React.ComponentProps<'label'>, MarginProps {
+  /** Element to render */
+  disabled?: boolean
+  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'> {
+  /** If true, sets `target="_blank"` and `rel="noopener noreferrer"` */
+  openInNewTab?: boolean
+  /**
+   * If true, sets `text-decoration: underline`
+   *
+   * @defaultValue true
+   */
+  underlined?: boolean
+}
+
+export const linkProps: Record<string, PropDef> = {
+  openInNewTab: {
+    type: 'boolean',
+  },
+  underlined: {
+    type: 'boolean',
+    className: 'underlined',
+  },
+}