@sanity/ui 4.2.0 → 5.0.0-alpha.10

package/src/cli/tsconfig.test.ts

@@ -0,0 +1,174 @@
+import {mkdtempSync, readFileSync, rmSync, writeFileSync} from 'node:fs'
+import {tmpdir} from 'node:os'
+import {join} from 'node:path'
+
+import {parse} from 'comment-json'
+import {afterEach, beforeEach, describe, expect, it} from 'vitest'
+
+import {planTsconfigChanges, reconcileTsconfig, resolveTargetTsconfig} from './tsconfig.js'
+import type {TsconfigChange} from './types.js'
+
+function keysChanged(changes: TsconfigChange[]): string[] {
+  return changes.map((c) => c.key).sort()
+}
+
+interface ParsedTsconfig {
+  compilerOptions?: Record<string, unknown>
+}
+
+function parseConfig(raw: string): ParsedTsconfig {
+  return parse(raw) as unknown as ParsedTsconfig
+}
+
+describe('planTsconfigChanges', () => {
+  it('reports nothing for an already-good config', () => {
+    const changes = planTsconfigChanges({
+      jsx: 'react-jsx',
+      module: 'esnext',
+      moduleResolution: 'bundler',
+      lib: ['DOM', 'DOM.Iterable', 'ES2022'],
+      skipLibCheck: true,
+    })
+    expect(changes).toEqual([])
+  })
+
+  it('fixes a classic moduleResolution and incompatible module together', () => {
+    const changes = planTsconfigChanges({
+      jsx: 'react-jsx',
+      module: 'commonjs',
+      moduleResolution: 'node',
+      lib: ['DOM', 'DOM.Iterable', 'ES2022'],
+      skipLibCheck: true,
+    })
+    expect(keysChanged(changes)).toEqual(['module', 'moduleResolution'])
+    expect(changes.find((c) => c.key === 'moduleResolution')?.to).toBe('bundler')
+    expect(changes.find((c) => c.key === 'module')?.to).toBe('esnext')
+  })
+
+  it('leaves a compatible module alone when resolution is already modern', () => {
+    const changes = planTsconfigChanges({
+      jsx: 'react-jsx',
+      module: 'commonjs',
+      moduleResolution: 'nodenext',
+      lib: ['DOM', 'DOM.Iterable', 'ES2022'],
+      skipLibCheck: true,
+    })
+    // nodenext is modern, but commonjs is not bundler-compatible; nodenext does
+    // not force the change, so module stays untouched.
+    expect(keysChanged(changes)).toEqual([])
+  })
+
+  it('does not force module when resolution is nodenext and module is missing', () => {
+    const changes = planTsconfigChanges({
+      jsx: 'react-jsx',
+      moduleResolution: 'nodenext',
+      lib: ['DOM', 'DOM.Iterable', 'ES2022'],
+      skipLibCheck: true,
+    })
+    expect(changes.find((c) => c.key === 'module')).toBeUndefined()
+  })
+
+  it('adds only missing DOM libs and keeps the existing ES baseline', () => {
+    const changes = planTsconfigChanges({
+      jsx: 'react-jsx',
+      module: 'esnext',
+      moduleResolution: 'bundler',
+      lib: ['ES2023', 'DOM'],
+      skipLibCheck: true,
+    })
+    expect(keysChanged(changes)).toEqual(['lib'])
+    const lib = changes.find((c) => c.key === 'lib')
+    expect(lib?.merge).toBe(true)
+    expect(lib?.to).toEqual(['DOM.Iterable'])
+  })
+
+  it('treats jsx and moduleResolution as load-bearing', () => {
+    const changes = planTsconfigChanges({})
+    const load = changes.filter((c) => c.load).map((c) => c.key)
+    expect(load).toContain('jsx')
+    expect(load).toContain('moduleResolution')
+  })
+})
+
+describe('reconcileTsconfig', () => {
+  let dir: string
+  beforeEach(() => {
+    dir = mkdtempSync(join(tmpdir(), 'sui-tsconfig-'))
+  })
+  afterEach(() => {
+    rmSync(dir, {recursive: true, force: true})
+  })
+
+  it('creates a tsconfig when none exists', () => {
+    const result = reconcileTsconfig(dir)
+    expect(result.created).toBe(true)
+    const written = parseConfig(readFileSync(join(dir, 'tsconfig.json'), 'utf8'))
+    expect(written.compilerOptions?.['jsx']).toBe('react-jsx')
+    expect(written.compilerOptions?.['moduleResolution']).toBe('bundler')
+  })
+
+  it('merges required options while preserving comments and unrelated settings', () => {
+    writeFileSync(
+      join(dir, 'tsconfig.json'),
+      `{
+  // keep me
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "module": "commonjs",
+    "baseUrl": "."
+  }
+}
+`,
+    )
+    const result = reconcileTsconfig(dir)
+    expect(result.created).toBe(false)
+    const raw = readFileSync(join(dir, 'tsconfig.json'), 'utf8')
+    expect(raw).toContain('// keep me')
+    const written = parseConfig(raw)
+    expect(written.compilerOptions?.['baseUrl']).toBe('.')
+    expect(written.compilerOptions?.['moduleResolution']).toBe('bundler')
+    expect(written.compilerOptions?.['module']).toBe('esnext')
+    expect(written.compilerOptions?.['jsx']).toBe('react-jsx')
+  })
+
+  it('is idempotent: a second run makes no changes', () => {
+    reconcileTsconfig(dir)
+    const second = reconcileTsconfig(dir)
+    expect(second.changes).toEqual([])
+  })
+
+  it('targets the referenced config in a solution-style setup', () => {
+    writeFileSync(
+      join(dir, 'tsconfig.json'),
+      `{"files": [], "references": [{"path": "./tsconfig.app.json"}]}\n`,
+    )
+    writeFileSync(
+      join(dir, 'tsconfig.app.json'),
+      `{"compilerOptions": {"moduleResolution": "bundler", "module": "esnext", "jsx": "react-jsx", "lib": ["ES2023", "DOM"], "skipLibCheck": true}}\n`,
+    )
+    const result = reconcileTsconfig(dir)
+    expect(result.file.endsWith('tsconfig.app.json')).toBe(true)
+    expect(keysChanged(result.changes)).toEqual(['lib'])
+  })
+
+  it('skips a referenced config without compilerOptions and picks one that has them', () => {
+    writeFileSync(
+      join(dir, 'tsconfig.json'),
+      `{"files": [], "references": [{"path": "./tsconfig.app.json"}, {"path": "./tsconfig.node.json"}]}\n`,
+    )
+    // The "app" config is preferred by name but carries no options, so it must be skipped.
+    writeFileSync(join(dir, 'tsconfig.app.json'), `{"extends": "./base.json"}\n`)
+    writeFileSync(
+      join(dir, 'tsconfig.node.json'),
+      `{"compilerOptions": {"moduleResolution": "bundler"}}\n`,
+    )
+    const target = resolveTargetTsconfig(dir)
+    expect(target.file.endsWith('tsconfig.node.json')).toBe(true)
+  })
+
+  it('treats a non-object tsconfig.json as unreadable instead of crashing', () => {
+    writeFileSync(join(dir, 'tsconfig.json'), `null\n`)
+    expect(resolveTargetTsconfig(dir).unreadable).toBe(true)
+    expect(reconcileTsconfig(dir).unreadable).toBe(true)
+  })
+})

package/src/cli/tsconfig.ts

@@ -0,0 +1,282 @@
+import {existsSync, readFileSync, writeFileSync} from 'node:fs'
+import {dirname, isAbsolute, join, resolve} from 'node:path'
+
+import {parse, stringify} from 'comment-json'
+
+import type {TsconfigChange} from './types.js'
+
+interface TsconfigDoc {
+  extends?: string | string[]
+  compilerOptions?: Record<string, unknown>
+  references?: Array<{path?: string}>
+}
+
+/** moduleResolution values that read a package `exports` map and its types. */
+const MODERN_RESOLUTIONS = new Set(['bundler', 'node16', 'nodenext'])
+/** module values compatible with moduleResolution: bundler. */
+const BUNDLER_MODULES = new Set(['esnext', 'preserve', 'es2015', 'es2020', 'es2022'])
+const VALID_JSX = new Set(['react-jsx', 'react-jsxdev', 'preserve', 'react', 'react-native'])
+
+/** DOM globals the component types reference, plus a modern JS baseline. */
+const DOM_LIBS = ['DOM', 'DOM.Iterable']
+const ES_BASELINE = 'ES2022'
+
+/**
+ * The full known-good config written when no tsconfig.json exists. Mirrors the
+ * repo's own framework apps so a fresh project type-checks predictably.
+ */
+const DEFAULT_TSCONFIG = {
+  compilerOptions: {
+    target: ES_BASELINE,
+    lib: [...DOM_LIBS, ES_BASELINE],
+    module: 'esnext',
+    moduleResolution: 'bundler',
+    jsx: 'react-jsx',
+    strict: true,
+    esModuleInterop: true,
+    skipLibCheck: true,
+    resolveJsonModule: true,
+    isolatedModules: true,
+    moduleDetection: 'force',
+  },
+  include: ['src', 'app'],
+}
+
+export interface TsconfigInspection {
+  file: string
+  exists: boolean
+  unreadable?: boolean
+  effective?: Record<string, unknown>
+  changes: TsconfigChange[]
+}
+
+export interface TsconfigResult {
+  file: string
+  created: boolean
+  changes: TsconfigChange[]
+  wrote: boolean
+  unreadable?: boolean
+}
+
+function readJsonc(file: string): TsconfigDoc {
+  const data = parse(readFileSync(file, 'utf8'))
+  // comment-json happily parses valid-but-non-object JSON (null, true, []). Treat
+  // those as unreadable so callers don't crash on later property reads.
+  if (typeof data !== 'object' || data === null || Array.isArray(data)) {
+    throw new Error('tsconfig.json is not an object')
+  }
+  return data as unknown as TsconfigDoc
+}
+
+/**
+ * Picks the tsconfig file to edit. Solution-style configs (Vite) keep their
+ * real options in a referenced file, so we follow the first reference that
+ * actually carries compilerOptions.
+ */
+export function resolveTargetTsconfig(cwd: string): {
+  file: string
+  exists: boolean
+  unreadable?: boolean
+} {
+  const root = join(cwd, 'tsconfig.json')
+  if (!existsSync(root)) return {file: root, exists: false}
+
+  let data: TsconfigDoc
+  try {
+    data = readJsonc(root)
+  } catch {
+    return {file: root, exists: true, unreadable: true}
+  }
+
+  const hasOwnOptions = data.compilerOptions && Object.keys(data.compilerOptions).length > 0
+  if (hasOwnOptions || !Array.isArray(data.references)) {
+    return {file: root, exists: true}
+  }
+
+  const referenced = data.references
+    .map((ref) => ref.path)
+    .filter((p): p is string => typeof p === 'string')
+    .map((p) => join(cwd, p.endsWith('.json') ? p : join(p, 'tsconfig.json')))
+    .filter((p) => existsSync(p))
+
+  // Keep only references we can parse and that actually carry compilerOptions, so
+  // we never write into a reference that has none or crash on an unreadable one.
+  // Prefer an "app" config, the common Vite solution-style layout.
+  const withOptions = referenced.filter((p) => {
+    try {
+      const doc = readJsonc(p)
+      return Boolean(doc.compilerOptions && Object.keys(doc.compilerOptions).length > 0)
+    } catch {
+      return false
+    }
+  })
+
+  const appConfig = withOptions.find((p) => p.includes('app')) ?? withOptions[0]
+  return {file: appConfig ?? root, exists: true}
+}
+
+/** Merges compilerOptions across the resolvable `extends` chain (relative paths only). */
+function effectiveCompilerOptions(file: string, seen = new Set<string>()): Record<string, unknown> {
+  if (!existsSync(file) || seen.has(file)) return {}
+  seen.add(file)
+
+  let data: TsconfigDoc
+  try {
+    data = readJsonc(file)
+  } catch {
+    return {}
+  }
+
+  const base: Record<string, unknown> = {}
+  const extendsField = data.extends
+  const extendsList = Array.isArray(extendsField)
+    ? extendsField
+    : extendsField
+      ? [extendsField]
+      : []
+  for (const ext of extendsList) {
+    if (typeof ext !== 'string') continue
+    if (ext.startsWith('.') || isAbsolute(ext)) {
+      const resolved = isAbsolute(ext) ? ext : resolve(dirname(file), ext)
+      const withExt = resolved.endsWith('.json') ? resolved : `${resolved}.json`
+      Object.assign(base, effectiveCompilerOptions(withExt, seen))
+    }
+  }
+
+  return {...base, ...data.compilerOptions}
+}
+
+function libIncludes(libs: unknown, name: string): boolean {
+  if (!Array.isArray(libs)) return false
+  return libs.some((entry) => String(entry).toLowerCase() === name.toLowerCase())
+}
+
+function hasEsBaseline(libs: unknown): boolean {
+  if (!Array.isArray(libs)) return false
+  return libs.some((entry) => /^es(\d{4}|next)$/i.test(String(entry)))
+}
+
+/**
+ * Compares effective options against the minimum a project needs to consume
+ * this package and returns the changes to make. Pure: callers decide whether to
+ * apply them.
+ *
+ * Only options that actually break consumption are touched, so merging into an
+ * existing project never introduces type errors in the user's own code:
+ *   - jsx: required to compile .tsx
+ *   - moduleResolution: required to read the package exports map + its types
+ *   - module: must stay compatible with a bundler resolution
+ *   - lib: DOM/DOM.Iterable back the component element types
+ *   - skipLibCheck: only ever removes errors, safe to add
+ *
+ * `load: true` marks the load-bearing changes that doctor reports as failures.
+ */
+export function planTsconfigChanges(effective: Record<string, unknown>): TsconfigChange[] {
+  const changes: TsconfigChange[] = []
+  const opts = effective
+
+  const jsx = opts['jsx']
+  if (!jsx) changes.push({key: 'jsx', from: undefined, to: 'react-jsx', load: true})
+  else if (typeof jsx !== 'string' || !VALID_JSX.has(jsx)) {
+    changes.push({key: 'jsx', from: jsx, to: 'react-jsx', load: true})
+  }
+
+  const resolution = opts['moduleResolution']
+  const resolutionLower = typeof resolution === 'string' ? resolution.toLowerCase() : null
+  const resolutionIsModern = Boolean(resolutionLower && MODERN_RESOLUTIONS.has(resolutionLower))
+  let willSetBundler = false
+  if (!resolution) {
+    changes.push({key: 'moduleResolution', from: undefined, to: 'bundler', load: true})
+    willSetBundler = true
+  } else if (!resolutionIsModern) {
+    changes.push({key: 'moduleResolution', from: resolution, to: 'bundler', load: true})
+    willSetBundler = true
+  }
+
+  // module only matters when resolution is (or becomes) bundler, which requires
+  // esnext/preserve/es2015+. node16/nodenext pair with their own module values,
+  // so we leave those alone.
+  const resolutionWillBeBundler = willSetBundler || resolutionLower === 'bundler'
+  const module = opts['module']
+  const moduleLower = typeof module === 'string' ? module.toLowerCase() : null
+  const moduleCompatible = Boolean(moduleLower && BUNDLER_MODULES.has(moduleLower))
+  // Only enforce module when resolution is (or becomes) bundler. node16/nodenext
+  // pair with their own module values, so a missing or non-bundler module under
+  // those resolutions is left alone rather than forced to esnext (which would be
+  // an invalid combination and could change a NodeNext project's semantics).
+  if (resolutionWillBeBundler && !moduleCompatible) {
+    changes.push({key: 'module', from: module, to: 'esnext', load: true})
+  }
+
+  const lib = opts['lib']
+  if (lib === undefined) {
+    changes.push({key: 'lib', from: undefined, to: [...DOM_LIBS, ES_BASELINE], load: true})
+  } else {
+    const missing = DOM_LIBS.filter((entry) => !libIncludes(lib, entry))
+    if (!hasEsBaseline(lib)) missing.push(ES_BASELINE)
+    if (missing.length > 0) {
+      changes.push({key: 'lib', from: lib, to: missing, merge: true, load: true})
+    }
+  }
+
+  if (opts['skipLibCheck'] === undefined) {
+    changes.push({key: 'skipLibCheck', from: undefined, to: true})
+  }
+
+  return changes
+}
+
+/** Read-only: what would `init` change about tsconfig? Used by `doctor` too. */
+export function inspectTsconfig(cwd: string): TsconfigInspection {
+  const target = resolveTargetTsconfig(cwd)
+  if (!target.exists) {
+    return {file: target.file, exists: false, changes: planTsconfigChanges({})}
+  }
+  if (target.unreadable) {
+    return {file: target.file, exists: true, unreadable: true, changes: []}
+  }
+  const effective = effectiveCompilerOptions(target.file)
+  return {file: target.file, exists: true, effective, changes: planTsconfigChanges(effective)}
+}
+
+/**
+ * Applies the required options. Existing comments and unrelated settings are
+ * preserved (comment-json round-trips them). Returns what happened.
+ */
+export function reconcileTsconfig(cwd: string, {dryRun = false} = {}): TsconfigResult {
+  const target = resolveTargetTsconfig(cwd)
+
+  if (!target.exists) {
+    if (!dryRun) {
+      writeFileSync(target.file, `${JSON.stringify(DEFAULT_TSCONFIG, null, 2)}\n`)
+    }
+    return {file: target.file, created: true, changes: [], wrote: !dryRun}
+  }
+
+  if (target.unreadable) {
+    return {file: target.file, created: false, changes: [], wrote: false, unreadable: true}
+  }
+
+  const effective = effectiveCompilerOptions(target.file)
+  const changes = planTsconfigChanges(effective)
+  if (changes.length === 0) {
+    return {file: target.file, created: false, changes, wrote: false}
+  }
+
+  if (!dryRun) {
+    const doc = readJsonc(target.file)
+    const options: Record<string, unknown> = doc.compilerOptions ?? {}
+    doc.compilerOptions = options
+    for (const change of changes) {
+      if (change.merge && change.key === 'lib') {
+        const current = Array.isArray(options['lib']) ? (options['lib'] as unknown[]) : []
+        options['lib'] = [...current, ...(change.to as unknown[])]
+      } else {
+        options[change.key] = change.to
+      }
+    }
+    writeFileSync(target.file, `${stringify(doc, null, 2)}\n`)
+  }
+
+  return {file: target.file, created: false, changes, wrote: !dryRun}
+}

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/badge/Badge.tsx

@@ -0,0 +1,53 @@
+import clsx from 'clsx'
+import {isValidElement, type ComponentPropsWithRef, type ElementType} from 'react'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {Icon} from '../icon/Icon'
+import {Text} from '../text/Text'
+import {type BadgeProps, badgeProps} from './badge.props'
+
+const badgeClassName = suffixClassName('sui-Badge')
+
+/** @public */
+export function Badge<T extends ElementType = 'span'>({
+  tone = 'neutral',
+  ...props
+}: BadgeProps<T> & Omit<ComponentPropsWithRef<T>, keyof BadgeProps<T>>) {
+  const {
+    as,
+    children,
+    className,
+    style,
+    iconStart: IconStart,
+    text,
+    ...rest
+  } = getProps({tone, ...props}, badgeProps)
+  const Component = as || 'span'
+
+  const paddingClasses = IconStart ? 'sui-p1' : 'sui-px2 sui-py1'
+
+  const badgeClasses = clsx(
+    badgeClassName,
+    `${paddingClasses} sui-radius-full sui-display-inline-flex sui-align-items-center sui-gap1`,
+  )
+
+  return (
+    <Component className={clsx(badgeClasses, className)} style={style} data-ui="Badge" {...rest}>
+      {IconStart &&
+        (isValidElement(IconStart) ? (
+          IconStart
+        ) : (
+          <Icon icon={IconStart} marginX={-1} marginY={-2} size={0} />
+        ))}
+      {text && (
+        <Text size={1} trim>
+          {text}
+        </Text>
+      )}
+      {children}
+    </Component>
+  )
+}
+
+export type {BadgeProps}

package/src/components/badge/badge.css

@@ -0,0 +1,6 @@
+.sui-Badge {
+  --badge-background: var(--background-high);
+  --badge-color: var(--foreground-high);
+  background-color: var(--badge-background);
+  color: var(--badge-color);
+}