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

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,25 @@
+import {type MarginProps, marginProps} from '../../props/margin'
+import {type PropDef} from '../../types/PropDef'
+
+/** @beta */
+export interface CheckboxProps extends React.ComponentProps<'input'>, MarginProps {
+  /** Error state */
+  error?: boolean
+  /** Indeterminate state */
+  indeterminate?: boolean
+  /** Input label */
+  label: React.ReactNode
+}
+
+export const checkboxProps: Record<string, PropDef> = {
+  error: {
+    type: 'boolean',
+  },
+  indeterminate: {
+    type: 'boolean',
+  },
+  label: {
+    type: 'string',
+  },
+  ...marginProps,
+}

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,37 @@
+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'
+> {
+  /** Element to render */
+  as?: T
+  /** Refractor language for syntax highlighting */
+  language?: string
+  /** CSS **font-size** property */
+  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,24 @@
+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 {
+  /** Element to render */
+  as?: T
+  /** CSS **max-width** property */
+  size?: Responsive<ContainerSize>
+}
+
+export const containerProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  size: {
+    type: 'union',
+    className: 'container',
+    values: CONTAINER_SIZE,
+  },
+  ...layoutProps,
+}

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,24 @@
+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 {
+  /** Element to render */
+  as?: T
+  /** CSS **font-size** property */
+  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,25 @@
+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',
+  ...props
+}: FlexProps<T> & Omit<ComponentPropsWithRef<T>, keyof FlexProps<T>>) {
+  const {as, children, className, style, ...rest} = getProps({display, ...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,29 @@
+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 {
+  /** Element 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,25 @@
+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',
+  ...props
+}: GridProps<T> & Omit<ComponentPropsWithRef<T>, keyof GridProps<T>>) {
+  const {as, children, className, style, ...rest} = getProps({display, ...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);
+}

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

@@ -0,0 +1,29 @@
+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 {
+  /** Element 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,15 @@
+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'> {
+  /** Element 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}