@sanity/ui 4.2.0 → 5.0.0-alpha.10

package/src/components/code/Code.tsx

@@ -0,0 +1,38 @@
+import clsx from 'clsx'
+import {type ComponentPropsWithRef, lazy, Suspense} from 'react'
+
+import {type CodeTag} from '../../types/Code'
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {type CodeProps, codeProps} from './code.props'
+
+const LazyRefractor = lazy(() => import('./LazyRefractor'))
+
+const codeClassName = suffixClassName('sui-Code')
+
+/** @public */
+export function Code<T extends CodeTag = 'pre'>({
+  size = 2,
+  ...props
+}: CodeProps<T> & Omit<ComponentPropsWithRef<T>, keyof CodeProps<T>>) {
+  const {as, children, className, language, style, ...rest} = getProps({size, ...props}, codeProps)
+  const Component = as || 'pre'
+
+  if (!language) {
+    return (
+      <Component className={clsx(codeClassName, className)} style={style} data-ui="Code" {...rest}>
+        <code>{children}</code>
+      </Component>
+    )
+  }
+
+  return (
+    <Component className={clsx(codeClassName, className)} style={style} data-ui="Code" {...rest}>
+      <Suspense fallback={<code>{children}</code>}>
+        <LazyRefractor language={language} value={children} />
+      </Suspense>
+    </Component>
+  )
+}
+
+export type {CodeProps}

package/src/components/code/LazyRefractor.tsx

@@ -0,0 +1,9 @@
+import {hasLanguage, Refractor, type RefractorProps} from 'react-refractor'
+
+export default function LazyRefractor({language, value}: RefractorProps) {
+  if (!hasLanguage(language)) {
+    return <code>{value}</code>
+  }
+
+  return <Refractor inline language={language} value={value} />
+}

package/src/components/code/code.css

@@ -0,0 +1,40 @@
+.sui-Code {
+  --code-color: light-dark(var(--gray-700), var(--gray-400));
+  color: var(--code-color);
+}
+
+.sui-Code .atrule { color: light-dark(var(--purple-600), var(--purple-400)); }
+.sui-Code .attr-name { color: light-dark(var(--green-600), var(--green-400)); }
+.sui-Code .attr-value { color: light-dark(var(--yellow-700), var(--yellow-400)); }
+.sui-Code .attribute { color: light-dark(var(--yellow-700), var(--yellow-400)); }
+.sui-Code .boolean { color: light-dark(var(--purple-600), var(--purple-400)); }
+.sui-Code .builtin { color: light-dark(var(--purple-600), var(--purple-400)); }
+.sui-Code .cdata { color: light-dark(var(--yellow-700), var(--yellow-400)); }
+.sui-Code .char { color: light-dark(var(--yellow-700), var(--yellow-400)); }
+.sui-Code .class { color: light-dark(var(--orange-600), var(--orange-400)); }
+.sui-Code .class-name { color: light-dark(var(--cyan-600), var(--cyan-400)); }
+.sui-Code .comment { color: light-dark(var(--gray-700), var(--gray-400)); opacity: 0.75; }
+.sui-Code .constant { color: light-dark(var(--purple-600), var(--purple-400)); }
+.sui-Code .deleted { color: light-dark(var(--red-700), var(--red-400)); }
+.sui-Code .entity { color: light-dark(var(--red-700), var(--red-400)); }
+.sui-Code .function { color: light-dark(var(--green-600), var(--green-400)); }
+.sui-Code .hexcode { color: light-dark(var(--blue-600), var(--blue-400)); }
+.sui-Code .id { color: light-dark(var(--purple-600), var(--purple-400)); }
+.sui-Code .important { color: light-dark(var(--purple-600), var(--purple-400)); }
+.sui-Code .inserted { color: light-dark(var(--green-600), var(--green-400)); }
+.sui-Code .keyword { color: light-dark(var(--magenta-600), var(--magenta-400)); }
+.sui-Code .number { color: light-dark(var(--purple-600), var(--purple-400)); }
+.sui-Code .operator { color: light-dark(var(--magenta-600), var(--magenta-400)); }
+.sui-Code .prolog { color: light-dark(var(--gray-700), var(--gray-400)); }
+.sui-Code .property { color: light-dark(var(--blue-600), var(--blue-400)); }
+.sui-Code .pseudo-class { color: light-dark(var(--yellow-700), var(--yellow-400)); }
+.sui-Code .pseudo-element { color: light-dark(var(--yellow-700), var(--yellow-400)); }
+.sui-Code .punctuation { color: light-dark(var(--gray-700), var(--gray-400)); }
+.sui-Code .regex { color: light-dark(var(--blue-600), var(--blue-400)); }
+.sui-Code .selector { color: light-dark(var(--red-700), var(--red-400)); }
+.sui-Code .string { color: light-dark(var(--yellow-700), var(--yellow-400)); }
+.sui-Code .symbol { color: light-dark(var(--purple-600), var(--purple-400)); }
+.sui-Code .tag { color: light-dark(var(--red-700), var(--red-400)); }
+.sui-Code .unit { color: light-dark(var(--orange-600), var(--orange-400)); }
+.sui-Code .url { color: light-dark(var(--red-700), var(--red-400)); }
+.sui-Code .variable { color: light-dark(var(--red-700), var(--red-400)); }

package/src/components/code/code.props.ts

@@ -0,0 +1,44 @@
+import {marginProps} from '../../props/margin'
+import {type TypographyProps, typographyProps} from '../../props/typography'
+import {CODE_SIZE, CODE_TAG, type CodeSize, type CodeTag} from '../../types/Code'
+import {type PropDef} from '../../types/PropDef'
+import type {Responsive} from '../../types/Responsive'
+
+/** @public */
+export interface CodeProps<T extends CodeTag = 'pre'> extends Omit<
+  TypographyProps,
+  'align' | 'truncate' | 'tone'
+> {
+  /**
+   * HTML element or component to render.
+   * @remarks The defined element wraps an inner `<code>` tag.
+   */
+  as?: T
+  /**
+   * Refractor language for syntax highlighting.
+   */
+  language?: string
+  /**
+   * Sets font size.
+   */
+  size?: Responsive<CodeSize>
+}
+
+export const codeProps: Record<string, PropDef> = {
+  as: {
+    type: 'union',
+    values: CODE_TAG,
+  },
+  language: {
+    type: 'string',
+  },
+  size: {
+    type: 'union',
+    className: 'text-code',
+    values: CODE_SIZE,
+  },
+  muted: typographyProps['muted'] as PropDef,
+  trim: typographyProps['trim'] as PropDef,
+  weight: typographyProps['weight'] as PropDef,
+  ...marginProps,
+}

package/src/components/container/Container.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 ContainerProps, containerProps} from './container.props'
+
+const containerClassName = suffixClassName('sui-Container')
+
+/** @public */
+export function Container<T extends ElementType = 'div'>({
+  marginX = 'auto',
+  ...props
+}: ContainerProps<T> & Omit<ComponentPropsWithRef<T>, keyof ContainerProps<T>>) {
+  const {as, children, className, style, ...rest} = getProps({marginX, ...props}, containerProps)
+  const Component = as || 'div'
+
+  return (
+    <Component
+      className={clsx(containerClassName, className)}
+      style={style}
+      data-ui="Container"
+      {...rest}
+    >
+      {children}
+    </Component>
+  )
+}
+
+export type {ContainerProps}

package/src/components/container/container.css

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

package/src/components/container/container.props.ts

@@ -0,0 +1,28 @@
+import {type LayoutProps, layoutProps} from '../../props/layout'
+import {CONTAINER_SIZE, type ContainerSize} from '../../types/Container'
+import {type PropDef} from '../../types/PropDef'
+import type {Responsive} from '../../types/Responsive'
+
+/** @public */
+export interface ContainerProps<T extends React.ElementType = 'div'> extends LayoutProps {
+  /**
+   * HTML element or component to render.
+   */
+  as?: T
+  /**
+   * Maximum width of the container.
+   */
+  size?: Responsive<ContainerSize>
+}
+
+export const containerProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  size: {
+    type: 'union',
+    className: 'container',
+    values: CONTAINER_SIZE,
+  },
+  ...layoutProps,
+}

package/src/components/dialog/Dialog.tsx

@@ -0,0 +1,139 @@
+import {CloseIcon} from '@sanity/icons/Close'
+import clsx from 'clsx'
+import {type ComponentProps, useEffect, useId, useRef} from 'react'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {Box} from '../box/Box'
+import {Flex} from '../flex/Flex'
+import {Heading} from '../heading/Heading'
+import {IconButton} from '../icon-button/IconButton'
+import {type DialogProps, dialogProps} from './dialog.props'
+
+const dialogClassName = suffixClassName('sui-Dialog')
+const dialogContentClassName = suffixClassName('sui-DialogContent')
+const dialogFooterClassName = suffixClassName('sui-DialogFooter')
+
+function DialogRoot({open = false, size = 0, ...props}: DialogProps) {
+  const {children, className, style, header, onClose, ...rest} = getProps(
+    {size, ...props},
+    dialogProps,
+  )
+
+  const dialogRef = useRef<HTMLDialogElement>(null)
+  const headerId = useId()
+
+  const dialogClasses = clsx(
+    dialogClassName,
+    `${props.topAnchor ? 'sui-mx-auto' : 'sui-m-auto'} sui-radius5 sui-shadow3 sui-p4 sui-flex-direction-column sui-gap4 sui-overflow-y-auto`,
+  )
+
+  useEffect(() => {
+    const dialogElement = dialogRef.current
+    if (!dialogElement) return
+
+    // `open` = `open` prop
+    // dialogElement.open = the `open` attribute on the HTML dialog element
+    // The prop and the attribute are manipulated independently, thus they
+    // can get out of sync if not handled within this effect.
+    if (open) {
+      if (!dialogElement.open) {
+        dialogElement.showModal()
+      }
+    } else {
+      if (dialogElement.open) {
+        dialogElement.close()
+      }
+    }
+
+    // Ensure the dialog is closed (and thus its `open` attribute updated)
+    // when the component is unmounted.
+    return () => {
+      dialogElement.close()
+    }
+  }, [open])
+
+  return (
+    <dialog
+      {...rest}
+      ref={dialogRef}
+      closedby="any"
+      aria-labelledby={header ? headerId : undefined}
+      onClose={onClose}
+      className={clsx(dialogClasses, className)}
+      style={style}
+      data-ui="Dialog"
+    >
+      <Flex flexShrink={0} justifyContent="space-between" alignItems="center">
+        {header ? (
+          <Heading trim size={1} id={headerId}>
+            {header}
+          </Heading>
+        ) : (
+          <div />
+        )}
+        <IconButton
+          aria-label="Close"
+          level="tertiary"
+          icon={CloseIcon}
+          onClick={() => dialogRef.current?.close()}
+        />
+      </Flex>
+      {children}
+    </dialog>
+  )
+}
+
+function DialogContent(props: ComponentProps<'div'>) {
+  const {children, className, style, ...rest} = getProps(props, {})
+
+  return (
+    <Box
+      {...rest}
+      className={clsx(dialogContentClassName, className)}
+      style={style}
+      data-ui="DialogContent"
+      flexGrow={1}
+      overflowY="auto"
+    >
+      {children}
+    </Box>
+  )
+}
+
+function DialogFooter(props: ComponentProps<'div'>) {
+  const {children, className, style, ...rest} = getProps(props, {})
+
+  return (
+    <Box
+      {...rest}
+      className={clsx(dialogFooterClassName, className)}
+      style={style}
+      data-ui="DialogFooter"
+      flexShrink={0}
+    >
+      {children}
+    </Box>
+  )
+}
+
+DialogRoot.displayName = 'Dialog'
+
+/**
+ * @beta
+ *
+ * Renders a modal dialog element — should not be used for nonmodal dialogs.
+ * Modal dialogs make their containing documents inert, and render on the topmost
+ * layer within that containing document; they must be dimissed before the containing
+ * document and its contents become unblocked. They also trap focus within the bounds
+ * of the dialog element and its descendants.
+ *
+ * For more on dialogs and modality, refer to the HTML specification for the dialog element:
+ * https://html.spec.whatwg.org/dev/interactive-elements.html#the-dialog-element
+ */
+export const Dialog = DialogRoot
+
+DialogRoot.Content = DialogContent
+DialogRoot.Footer = DialogFooter
+
+export type {DialogProps}

package/src/components/dialog/dialog.css

@@ -0,0 +1,49 @@
+.sui-Dialog {
+  /* Computed width is moderated by Dialog's size prop, which controls max-width */
+  width: calc(100dvw - 2rem);
+  max-height: calc(100dvh - 2rem);
+  transition:
+    display 150ms allow-discrete,
+    overlay 150ms allow-discrete,
+    opacity 150ms var(--timing-linear),
+    scale 150ms var(--timing-curve);
+}
+
+.sui-Dialog:not([open]) {
+  opacity: 0;
+  scale: 0.9;
+}
+
+.sui-Dialog[open] {
+  display: flex;
+  opacity: 1;
+  scale: 1;
+}
+
+.sui-Dialog::backdrop {
+  --dialog-backdrop: hsl(from var(--separator-high) h s l / var(--overlay-opacity));
+  background-color: var(--dialog-backdrop);
+  transition:
+    display 150ms allow-discrete,
+    overlay 150ms allow-discrete,
+    opacity 150ms var(--timing-linear);
+}
+
+.sui-Dialog:not([open])::backdrop {
+  opacity: 0;
+}
+
+.sui-Dialog[open]::backdrop {
+  opacity: 1;
+}
+
+@starting-style {
+  .sui-Dialog[open] {
+    opacity: 0;
+    scale: 0.9;
+  }
+
+  .sui-Dialog[open]::backdrop {
+    opacity: 0;
+  }
+}

package/src/components/dialog/dialog.props.ts

@@ -0,0 +1,45 @@
+import {CONTAINER_SIZE, type ContainerSize} from '../../types/Container'
+import {type PropDef} from '../../types/PropDef'
+import type {Responsive} from '../../types/Responsive'
+
+/** @beta */
+export interface DialogProps extends Omit<React.ComponentProps<'dialog'>, 'open'> {
+  /**
+   * Text for the dialog heading.
+   * @remarks Recommended for accessibility. The component sets `aria-labelledby` to the heading when you give this prop.
+   */
+  header?: string
+  /**
+   * A function to call alongside the native `close` event.
+   * @remarks Use it to set `open` back to `false`. It runs for every close cause: the Escape key, a backdrop click, the close button, or a programmatic close.
+   */
+  onClose: React.ReactEventHandler<HTMLDialogElement>
+  /**
+   * Toggles the dialog's open state.
+   * @remarks `true` calls `showModal()` on the element. `false` calls `close()`.
+   */
+  open?: boolean
+  /** Sets the max width of the dialog */
+  size?: Responsive<ContainerSize>
+  /** CSS length value used to set the Dialog’s distance from the top of the viewport; Dialog is centered if not provided */
+  topAnchor?: string
+}
+
+export const dialogProps: Record<string, PropDef> = {
+  header: {
+    type: 'string',
+  },
+  open: {
+    type: 'boolean',
+  },
+  size: {
+    type: 'union',
+    className: 'container',
+    values: CONTAINER_SIZE,
+  },
+  topAnchor: {
+    type: 'string',
+    className: 'top-anchor',
+    variable: '--top-anchor',
+  },
+}

package/src/components/divider/Divider.tsx

@@ -0,0 +1,23 @@
+import clsx from 'clsx'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {type DividerProps, dividerProps} from './divider.props'
+
+const dividerClassName = suffixClassName('sui-Divider')
+
+/** @public */
+export function Divider(props: DividerProps) {
+  const {className, style, ...rest} = getProps(props, dividerProps)
+
+  return (
+    <hr
+      className={clsx(dividerClassName, 'sui-border-none sui-border-top', className)}
+      style={style}
+      data-ui="Divider"
+      {...rest}
+    />
+  )
+}
+
+export type {DividerProps}

package/src/components/divider/divider.props.ts

@@ -0,0 +1,9 @@
+import {type MarginProps, marginProps} from '../../props/margin'
+import {type PropDef} from '../../types/PropDef'
+
+/** @public */
+export interface DividerProps extends React.ComponentProps<'hr'>, MarginProps {}
+
+export const dividerProps: Record<string, PropDef> = {
+  ...marginProps,
+}

package/src/components/eyebrow/Eyebrow.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 EyebrowProps, eyebrowProps} from './eyebrow.props'
+
+const eyebrowClassName = suffixClassName('sui-Eyebrow')
+
+/** @public */
+export function Eyebrow<T extends ElementType = 'span'>({
+  size = 2,
+  weight = 'semibold',
+  ...props
+}: EyebrowProps<T> & Omit<ComponentPropsWithRef<T>, keyof EyebrowProps<T>>) {
+  const {as, children, className, style, ...rest} = getProps({size, weight, ...props}, eyebrowProps)
+  const Component = as || 'span'
+
+  if (props.truncate && props.trim) {
+    return (
+      <Component
+        className={clsx(
+          eyebrowClassName,
+          className?.replace('sui-line-clamp', '').replace('sui-text-overflow', ''),
+        )}
+        style={style}
+        data-ui="Eyebrow"
+        {...rest}
+      >
+        <span
+          className={clsx(
+            'sui-overflow-hidden',
+            props.truncate === 1 ? 'sui-text-overflow' : 'sui-line-clamp',
+          )}
+        >
+          {children}
+        </span>
+      </Component>
+    )
+  }
+
+  return (
+    <Component
+      className={clsx(eyebrowClassName, props.truncate && 'sui-overflow-hidden', className)}
+      style={style}
+      data-ui="Eyebrow"
+      {...rest}
+    >
+      {children}
+    </Component>
+  )
+}
+
+export type {EyebrowProps}

package/src/components/eyebrow/eyebrow.css

@@ -0,0 +1,11 @@
+.sui-Eyebrow {
+  --eyebrow-color: var(--foreground-high);
+  color: var(--eyebrow-color);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.sui-Eyebrow:where(.sui-text-muted) {
+  --eyebrow-color-muted: var(--foreground-low);
+  color: var(--eyebrow-color-muted);
+}

package/src/components/eyebrow/eyebrow.props.ts

@@ -0,0 +1,28 @@
+import {type TypographyProps, typographyProps} from '../../props/typography'
+import {EYEBROW_SIZE, type EyebrowSize} from '../../types/Eyebrow'
+import {type PropDef} from '../../types/PropDef'
+import type {Responsive} from '../../types/Responsive'
+
+/** @public */
+export interface EyebrowProps<T extends React.ElementType = 'span'> extends TypographyProps {
+  /**
+   * HTML element to render.
+   */
+  as?: T
+  /**
+   * Sets font size. Uses the same scale as Label.
+   */
+  size?: Responsive<EyebrowSize>
+}
+
+export const eyebrowProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  size: {
+    type: 'union',
+    className: 'text-eyebrow',
+    values: EYEBROW_SIZE,
+  },
+  ...typographyProps,
+}

package/src/components/flex/Flex.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 FlexProps, flexProps} from './flex.props'
+
+const flexClassName = suffixClassName('sui-Flex')
+
+/** @public */
+export function Flex<T extends ElementType = 'div'>({
+  display = 'flex',
+  minHeight = '0',
+  minWidth = '0',
+  ...props
+}: FlexProps<T> & Omit<ComponentPropsWithRef<T>, keyof FlexProps<T>>) {
+  const {as, children, className, style, ...rest} = getProps(
+    {display, minHeight, minWidth, ...props},
+    flexProps,
+  )
+  const Component = as || 'div'
+
+  return (
+    <Component className={clsx(flexClassName, className)} style={style} data-ui="Flex" {...rest}>
+      {children}
+    </Component>
+  )
+}
+
+export type {FlexProps}

package/src/components/flex/flex.css

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

package/src/components/flex/flex.props.ts

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

package/src/components/grid/Grid.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 GridProps, gridProps} from './grid.props'
+
+const gridClassName = suffixClassName('sui-Grid')
+
+/** @public */
+export function Grid<T extends ElementType = 'div'>({
+  display = 'grid',
+  minHeight = '0',
+  minWidth = '0',
+  ...props
+}: GridProps<T> & Omit<ComponentPropsWithRef<T>, keyof GridProps<T>>) {
+  const {as, children, className, style, ...rest} = getProps(
+    {display, minHeight, minWidth, ...props},
+    gridProps,
+  )
+  const Component = as || 'div'
+
+  return (
+    <Component className={clsx(gridClassName, className)} style={style} data-ui="Grid" {...rest}>
+      {children}
+    </Component>
+  )
+}
+
+export type {GridProps}

package/src/components/grid/grid.css

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