@sanity/ui 4.2.0 → 5.0.0-alpha.10

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

@@ -0,0 +1,33 @@
+import {type GapProps, gapProps} from '../../props/gap'
+import {type GridParentProps, gridParentProps} from '../../props/gridParent'
+import {type LayoutProps, layoutProps} from '../../props/layout'
+import {DISPLAY_GRID, type DisplayGrid} from '../../types/Display'
+import {type PropDef} from '../../types/PropDef'
+import type {Responsive} from '../../types/Responsive'
+
+/** @public */
+export interface GridProps<T extends React.ElementType = 'div'>
+  extends GridParentProps, GapProps, LayoutProps {
+  /**
+   * HTML element or component to render.
+   */
+  as?: T
+  /**
+   * CSS `display` property.
+   */
+  display?: Responsive<DisplayGrid>
+}
+
+export const gridProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  display: {
+    type: 'union',
+    className: 'display',
+    values: DISPLAY_GRID,
+  },
+  ...gridParentProps,
+  ...gapProps,
+  ...layoutProps,
+}

package/src/components/h-stack/HStack.tsx

@@ -0,0 +1,34 @@
+import clsx from 'clsx'
+import type {ComponentPropsWithRef, ElementType} from 'react'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {Flex} from '../flex/Flex'
+import {type HStackProps, hStackProps} from './hStack.props'
+
+const hStackClassName = suffixClassName('sui-HStack')
+
+/** @public */
+export function HStack<T extends ElementType = 'div'>(
+  props: HStackProps<T> & Omit<ComponentPropsWithRef<T>, keyof HStackProps<T>>,
+) {
+  const {as, children, className, style, ...rest} = getProps(props, hStackProps)
+  const Component = as || 'div'
+
+  return (
+    <Flex
+      as={Component}
+      className={clsx(hStackClassName, className)}
+      style={style}
+      data-ui="HStack"
+      display="inline-flex"
+      alignItems="center"
+      flexWrap="wrap"
+      {...rest}
+    >
+      {children}
+    </Flex>
+  )
+}
+
+export type {HStackProps}

package/src/components/h-stack/hStack.props.ts

@@ -0,0 +1,17 @@
+import {type GapProps, gapProps} from '../../props/gap'
+import {type PropDef} from '../../types/PropDef'
+
+/** @public */
+export interface HStackProps<T extends React.ElementType = 'div'> extends Pick<GapProps, 'gap'> {
+  /**
+   * HTML element or component to render.
+   */
+  as?: T
+}
+
+export const hStackProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  gap: gapProps['gap'] as PropDef,
+}

package/src/components/heading/Heading.tsx

@@ -0,0 +1,54 @@
+import clsx from 'clsx'
+import type {ComponentPropsWithRef, ElementType} from 'react'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {type HeadingProps, headingProps} from './heading.props'
+
+const headingClassName = suffixClassName('sui-Heading')
+
+/** @public */
+export function Heading<T extends ElementType = 'h2'>({
+  size = 2,
+  weight = 'bold',
+  ...props
+}: HeadingProps & Omit<ComponentPropsWithRef<T>, keyof HeadingProps>) {
+  const {as, children, className, style, ...rest} = getProps({size, weight, ...props}, headingProps)
+  const Component = as || 'h2'
+
+  if (props.truncate && props.trim) {
+    return (
+      <Component
+        className={clsx(
+          headingClassName,
+          className?.replace('sui-line-clamp', '').replace('sui-text-overflow', ''),
+        )}
+        style={style}
+        data-ui="Heading"
+        {...rest}
+      >
+        <span
+          className={clsx(
+            'sui-overflow-hidden',
+            props.truncate === 1 ? 'sui-text-overflow' : 'sui-line-clamp',
+          )}
+        >
+          {children}
+        </span>
+      </Component>
+    )
+  }
+
+  return (
+    <Component
+      className={clsx(headingClassName, props.truncate && 'sui-overflow-hidden', className)}
+      style={style}
+      data-ui="Heading"
+      {...rest}
+    >
+      {children}
+    </Component>
+  )
+}
+
+export type {HeadingProps}

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,31 @@
+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 {
+  /**
+   * Semantic heading element to render.
+   * @remarks Always set this explicitly.
+   */
+  as?: HeadingTag
+  /**
+   * Sets font size.
+   * @remarks Independent of `as`.
+   */
+  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,35 @@
+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 {
+  /**
+   * The icon component to render.
+   */
+  icon: React.ComponentType<SVGProps<SVGSVGElement>>
+  /**
+   * Sets icon size.
+   */
+  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,31 @@
+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'
+> {
+  /**
+   * Accessible name for the button.
+   * @remarks Because IconButtons have no visible text, this is required.
+   */
+  'aria-label': string
+  /**
+   * Icon to render.
+   */
+  '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,28 @@
+@import './badge/badge.css';
+@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 './dialog/dialog.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 './popover/popover.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,24 @@
+import {type ToneProps, toneProps} from '../../props/tone'
+import {type PropDef} from '../../types/PropDef'
+
+/** @beta */
+export interface IndicatorProps<T extends React.ElementType = 'span'> extends ToneProps {
+  /**
+   * HTML element to render.
+   */
+  as?: T
+  /**
+   * Accessible label.
+   */
+  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,15 @@
+import {type PropDef} from '../../types/PropDef'
+
+/** @public */
+export interface IndicatorStackProps<T extends React.ElementType = 'div'> {
+  /**
+   * HTML 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,100 @@
+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 {
+  /**
+   * HTML element or component to render.
+   */
+  as?: T
+  /**
+   * Space between children.
+   */
+  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);
+}