@sanity/ui 5.0.0-alpha.8 → 5.0.0-alpha.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "5.0.0-alpha.8",
+  "version": "5.0.0-alpha.9",
   "description": "Sanity UI Library",
   "keywords": [
     "components",

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);
+}

package/src/components/badge/badge.props.ts

@@ -0,0 +1,31 @@
+import {type ToneProps, toneProps} from '../../props/tone'
+import {type PropDef} from '../../types/PropDef'
+
+/** @public */
+export interface BadgeProps<T extends React.ElementType = 'span'> extends ToneProps {
+  /**
+   * HTML element to render.
+   */
+  as?: T
+  /**
+   * Shows an icon in the start position (left side in left-to-right languages).
+   */
+  iconStart?: React.ElementType | React.ReactNode
+  /**
+   * Sets Badge's text label. Use instead of children unless you have a special use case.
+   */
+  text?: string
+}
+
+export const badgeProps: Record<string, PropDef> = {
+  as: {
+    type: 'string',
+  },
+  iconStart: {
+    type: 'string',
+  },
+  text: {
+    type: 'string',
+  },
+  ...toneProps,
+}

package/src/components/index.css

@@ -1,3 +1,4 @@
+@import './badge/badge.css';
 @import './box/box.css';
 @import './button/button.css';
 @import './card/card.css';

package/src/index.ts

@@ -62,3 +62,4 @@ export type {TextSize} from './types/Text'
 export type {TextAlign} from './types/TextAlign'
 export type {FontWeight} from './types/FontWeight'
 export type {Tone} from './types/Tone'
+export * from './components/badge/Badge'

package/src/version.ts

@@ -1,3 +1,3 @@
 // This file is generated by scripts/write-version.js. Do not edit.
-export const VERSION = '500alpha8'
-export const HASH = 'ff7a34'
+export const VERSION = '500alpha9'
+export const HASH = 'fd663f'