@sanity/ui 4.0.0-static.9 → 5.0.0-alpha.1

package/src/cli/types.ts

@@ -0,0 +1,77 @@
+export type Framework =
+  | 'next-app'
+  | 'next-pages'
+  | 'react-router'
+  | 'remix'
+  | 'vite'
+  | 'astro'
+  | 'react'
+
+export type PackageManager = 'npm' | 'pnpm' | 'yarn' | 'bun'
+
+export interface PackageJson {
+  name?: string
+  version?: string
+  dependencies?: Record<string, string>
+  devDependencies?: Record<string, string>
+  peerDependencies?: Record<string, string>
+  packageManager?: string
+  eslintConfig?: unknown
+}
+
+export interface ReactInfo {
+  version: string | null
+  source: 'installed' | 'declared' | 'missing'
+}
+
+export interface EntryInfo {
+  entry: string
+  exists: boolean
+}
+
+export interface Detected {
+  pkg: PackageJson | null
+  packageManager: PackageManager
+  framework: Framework
+  typescript: boolean
+  entry: string
+  exists: boolean
+  react: ReactInfo
+  aliasedInstall: string | null
+  legacyInstall: string | null
+}
+
+export type CheckStatus = 'pass' | 'warn' | 'fail'
+
+/**
+ * Result of one verification. `status` carries the three-way outcome; `ok` is the
+ * boolean shorthand. A `warn` is not ok but does not fail the run (e.g. React not
+ * detected at all, versus a hard `fail` like a missing stylesheet import).
+ */
+export interface Check {
+  id: string
+  title: string
+  ok: boolean
+  status: CheckStatus
+  detail?: string
+  fix?: string
+}
+
+/**
+ * One pending change to a compilerOptions key. `merge` appends to an array value
+ * (used for `lib`) instead of replacing it. `load` marks options that actually
+ * break consumption, which doctor reports as failures rather than optional extras.
+ */
+export interface TsconfigChange {
+  key: string
+  from: unknown
+  to: unknown
+  merge?: boolean
+  load?: boolean
+}
+
+export interface CliOptions {
+  cwd: string
+  dry: boolean
+  yes: boolean
+}

package/src/cli/versions.test.ts

@@ -0,0 +1,35 @@
+import {describe, expect, it} from 'vitest'
+
+import {meetsNode, meetsReact, parseVersion} from './versions.js'
+
+describe('parseVersion', () => {
+  it('parses full and partial versions', () => {
+    expect(parseVersion('19.2.6')).toEqual([19, 2, 6])
+    expect(parseVersion('19.2')).toEqual([19, 2, 0])
+    expect(parseVersion('^19.2.0')).toEqual([19, 2, 0])
+    expect(parseVersion('not-a-version')).toBeNull()
+  })
+})
+
+describe('meetsReact', () => {
+  it('requires >= 19.2', () => {
+    expect(meetsReact('19.2.0')).toBe(true)
+    expect(meetsReact('19.2.6')).toBe(true)
+    expect(meetsReact('20.0.0')).toBe(true)
+    expect(meetsReact('19.1.9')).toBe(false)
+    expect(meetsReact('18.3.1')).toBe(false)
+  })
+})
+
+describe('meetsNode', () => {
+  it('implements >=20.19 <22 || >=22.12', () => {
+    expect(meetsNode('20.19.0')).toBe(true)
+    expect(meetsNode('21.7.0')).toBe(true)
+    expect(meetsNode('22.12.0')).toBe(true)
+    expect(meetsNode('24.0.0')).toBe(true)
+    expect(meetsNode('20.18.0')).toBe(false)
+    expect(meetsNode('22.0.0')).toBe(false)
+    expect(meetsNode('22.11.9')).toBe(false)
+    expect(meetsNode('18.20.0')).toBe(false)
+  })
+})

package/src/cli/versions.ts

@@ -0,0 +1,41 @@
+export const REACT_MIN = '19.2'
+export const NODE_REQUIREMENT = '>=20.19 <22 || >=22.12'
+
+type Version = [number, number, number]
+
+/** Parses a loose semver string into [major, minor, patch]; missing parts are 0. */
+export function parseVersion(value: unknown): Version | null {
+  if (typeof value !== 'string') return null
+  const match = value.match(/(\d+)(?:\.(\d+))?(?:\.(\d+))?/)
+  if (!match) return null
+  return [Number(match[1] ?? 0), Number(match[2] ?? 0), Number(match[3] ?? 0)]
+}
+
+function gte(version: unknown, target: unknown): boolean {
+  const a = parseVersion(version)
+  const b = parseVersion(target)
+  if (!a || !b) return false
+  for (let i = 0; i < 3; i++) {
+    const left = a[i] ?? 0
+    const right = b[i] ?? 0
+    if (left > right) return true
+    if (left < right) return false
+  }
+  return true
+}
+
+export function meetsReact(version: unknown): boolean {
+  return gte(version, REACT_MIN)
+}
+
+/** Implements the package's engines range: >=20.19 <22 || >=22.12 */
+export function meetsNode(version: unknown): boolean {
+  const v = parseVersion(version)
+  if (!v) return false
+  const [major, minor] = v
+  if (major === 20 && minor >= 19) return true
+  if (major === 21) return true
+  if (major === 22 && minor >= 12) return true
+  if (major > 22) return true
+  return false
+}

package/src/components/box/Box.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 BoxProps, boxProps} from './box.props'
+
+const boxClassName = suffixClassName('sui-Box')
+
+/** @public */
+export function Box<T extends ElementType = 'div'>({
+  display = 'block',
+  ...props
+}: BoxProps<T> & Omit<ComponentPropsWithRef<T>, keyof BoxProps<T>>) {
+  const {as, children, className, style, ...rest} = getProps({display, ...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,24 @@
+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 {
+  /** Element to render */
+  as?: T
+  /** CSS **display** property */
+  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,104 @@
+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'> {
+  /** Element to render */
+  as?: InteractiveAs<T>
+  /** Composite prop for setting padding and gap */
+  density?: ButtonDensity
+  /** Set CSS **width** property to 100% */
+  fullWidth?: Responsive<boolean>
+  /** Starting icon */
+  iconStart?: React.ElementType | React.ReactNode
+  /** Ending icon */
+  iconEnd?: React.ElementType | React.ReactNode
+  /** Button level */
+  level?: ButtonLevel
+  /** Loading state */
+  loading?: boolean
+  /** Button text */
+  text?: string
+  /** Button tone */
+  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,54 @@
+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 {
+  /** Element to render */
+  as?: T
+  /** Composite prop for setting padding and border radius */
+  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,63 @@
+import {CheckmarkIcon, RemoveIcon} from '@sanity/icons'
+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, 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}