@misoto22/kioku-ui 0.0.0

package/dist/tokens/contracts.d.ts

@@ -0,0 +1,140 @@
+type Roles<Group extends string, Role extends string> = Readonly<{
+    [Name in Role]: `${Group}.${Name}`;
+}>;
+type ColorRole = 'canvas' | 'surface' | 'surfaceRaised' | 'surfaceMuted' | 'text' | 'textSecondary' | 'textMuted' | 'textOnAccent' | 'accent' | 'accentHover' | 'accentActive' | 'overlayHover' | 'overlayActive' | 'disabledSurface' | 'disabledText' | 'focus';
+type BorderRole = 'default' | 'strong' | 'interactive' | 'disabled' | 'width' | 'style';
+type StatusRole = 'infoSurface' | 'infoText' | 'successSurface' | 'successText' | 'warningSurface' | 'warningText' | 'dangerSurface' | 'dangerText';
+type FocusRole = 'width' | 'offset';
+type TypographyRole = 'fontFamilyBody' | 'fontFamilyHeading' | 'fontFamilyDisplay' | 'fontFamilyMono' | 'fontFeatureSettings' | 'fontSizeXs' | 'fontSizeSm' | 'fontSizeMd' | 'fontSizeLg' | 'fontSizeXl' | 'fontSize2xl' | 'fontWeightRegular' | 'fontWeightMedium' | 'fontWeightStrong' | 'lineHeightBody' | 'lineHeightHeading';
+type SpacingRole = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type RadiusRole = 'inner' | 'element' | 'container' | 'page' | 'full';
+type SizeRole = 'controlSm' | 'controlMd' | 'controlLg' | 'hitTarget';
+type TextureRole = 'grain';
+type ElevationRole = 'low' | 'medium' | 'high';
+type MotionRole = 'durationFast' | 'durationModerate' | 'durationSlow' | 'easingStandard' | 'easingEmphasized';
+export interface TokenContract {
+    readonly color: Roles<'color', ColorRole>;
+    readonly border: Roles<'border', BorderRole>;
+    readonly status: Roles<'status', StatusRole>;
+    readonly focus: Roles<'focus', FocusRole>;
+    readonly typography: Roles<'typography', TypographyRole>;
+    readonly spacing: Roles<'spacing', SpacingRole>;
+    readonly radius: Roles<'radius', RadiusRole>;
+    readonly size: Roles<'size', SizeRole>;
+    readonly elevation: Roles<'elevation', ElevationRole>;
+    readonly texture: Roles<'texture', TextureRole>;
+    readonly motion: Roles<'motion', MotionRole>;
+}
+export declare const tokenContract: {
+    readonly color: {
+        readonly canvas: "color.canvas";
+        readonly surface: "color.surface";
+        readonly surfaceRaised: "color.surfaceRaised";
+        readonly surfaceMuted: "color.surfaceMuted";
+        readonly text: "color.text";
+        readonly textSecondary: "color.textSecondary";
+        readonly textMuted: "color.textMuted";
+        readonly textOnAccent: "color.textOnAccent";
+        readonly accent: "color.accent";
+        readonly accentHover: "color.accentHover";
+        readonly accentActive: "color.accentActive";
+        readonly overlayHover: "color.overlayHover";
+        readonly overlayActive: "color.overlayActive";
+        readonly disabledSurface: "color.disabledSurface";
+        readonly disabledText: "color.disabledText";
+        readonly focus: "color.focus";
+    };
+    readonly border: {
+        readonly default: "border.default";
+        readonly strong: "border.strong";
+        readonly interactive: "border.interactive";
+        readonly disabled: "border.disabled";
+        readonly width: "border.width";
+        readonly style: "border.style";
+    };
+    readonly status: {
+        readonly infoSurface: "status.infoSurface";
+        readonly infoText: "status.infoText";
+        readonly successSurface: "status.successSurface";
+        readonly successText: "status.successText";
+        readonly warningSurface: "status.warningSurface";
+        readonly warningText: "status.warningText";
+        readonly dangerSurface: "status.dangerSurface";
+        readonly dangerText: "status.dangerText";
+    };
+    readonly focus: {
+        readonly width: "focus.width";
+        readonly offset: "focus.offset";
+    };
+    readonly typography: {
+        readonly fontFamilyBody: "typography.fontFamilyBody";
+        readonly fontFamilyHeading: "typography.fontFamilyHeading";
+        readonly fontFamilyDisplay: "typography.fontFamilyDisplay";
+        readonly fontFamilyMono: "typography.fontFamilyMono";
+        readonly fontFeatureSettings: "typography.fontFeatureSettings";
+        readonly fontSizeXs: "typography.fontSizeXs";
+        readonly fontSizeSm: "typography.fontSizeSm";
+        readonly fontSizeMd: "typography.fontSizeMd";
+        readonly fontSizeLg: "typography.fontSizeLg";
+        readonly fontSizeXl: "typography.fontSizeXl";
+        readonly fontSize2xl: "typography.fontSize2xl";
+        readonly fontWeightRegular: "typography.fontWeightRegular";
+        readonly fontWeightMedium: "typography.fontWeightMedium";
+        readonly fontWeightStrong: "typography.fontWeightStrong";
+        readonly lineHeightBody: "typography.lineHeightBody";
+        readonly lineHeightHeading: "typography.lineHeightHeading";
+    };
+    readonly spacing: {
+        readonly xs: "spacing.xs";
+        readonly sm: "spacing.sm";
+        readonly md: "spacing.md";
+        readonly lg: "spacing.lg";
+        readonly xl: "spacing.xl";
+        readonly '2xl': "spacing.2xl";
+    };
+    readonly radius: {
+        readonly inner: "radius.inner";
+        readonly element: "radius.element";
+        readonly container: "radius.container";
+        readonly page: "radius.page";
+        readonly full: "radius.full";
+    };
+    readonly size: {
+        readonly controlSm: "size.controlSm";
+        readonly controlMd: "size.controlMd";
+        readonly controlLg: "size.controlLg";
+        readonly hitTarget: "size.hitTarget";
+    };
+    readonly elevation: {
+        readonly low: "elevation.low";
+        readonly medium: "elevation.medium";
+        readonly high: "elevation.high";
+    };
+    readonly texture: {
+        readonly grain: "texture.grain";
+    };
+    readonly motion: {
+        readonly durationFast: "motion.durationFast";
+        readonly durationModerate: "motion.durationModerate";
+        readonly durationSlow: "motion.durationSlow";
+        readonly easingStandard: "motion.easingStandard";
+        readonly easingEmphasized: "motion.easingEmphasized";
+    };
+};
+type ContractGroup = (typeof tokenContract)[keyof typeof tokenContract];
+type Values<Value> = Value extends unknown ? Value[keyof Value] : never;
+export type TokenName = Values<ContractGroup>;
+export declare const tokenNames: readonly TokenName[];
+export interface ThemeDefinition {
+    readonly id: string;
+    readonly label: string;
+    readonly tokens: Readonly<Record<TokenName, string>>;
+}
+export interface ThemeDefinitionCandidate {
+    readonly id: string;
+    readonly label?: string;
+    readonly tokens: Readonly<Partial<Record<TokenName, string>>>;
+}
+export declare function validateThemeDefinition(theme: ThemeDefinitionCandidate): TokenName[];
+export declare const tokenCustomProperties: Readonly<Record<TokenName, `--kioku-ui-${string}`>>;
+export {};

package/dist/tokens/contracts.js

@@ -0,0 +1,102 @@
+import "../styles/stylex.css";
+export const tokenContract = {
+  color: {
+    canvas: 'color.canvas',
+    surface: 'color.surface',
+    surfaceRaised: 'color.surfaceRaised',
+    surfaceMuted: 'color.surfaceMuted',
+    text: 'color.text',
+    textSecondary: 'color.textSecondary',
+    textMuted: 'color.textMuted',
+    textOnAccent: 'color.textOnAccent',
+    accent: 'color.accent',
+    accentHover: 'color.accentHover',
+    accentActive: 'color.accentActive',
+    overlayHover: 'color.overlayHover',
+    overlayActive: 'color.overlayActive',
+    disabledSurface: 'color.disabledSurface',
+    disabledText: 'color.disabledText',
+    focus: 'color.focus'
+  },
+  border: {
+    default: 'border.default',
+    strong: 'border.strong',
+    interactive: 'border.interactive',
+    disabled: 'border.disabled',
+    width: 'border.width',
+    style: 'border.style'
+  },
+  status: {
+    infoSurface: 'status.infoSurface',
+    infoText: 'status.infoText',
+    successSurface: 'status.successSurface',
+    successText: 'status.successText',
+    warningSurface: 'status.warningSurface',
+    warningText: 'status.warningText',
+    dangerSurface: 'status.dangerSurface',
+    dangerText: 'status.dangerText'
+  },
+  focus: {
+    width: 'focus.width',
+    offset: 'focus.offset'
+  },
+  typography: {
+    fontFamilyBody: 'typography.fontFamilyBody',
+    fontFamilyHeading: 'typography.fontFamilyHeading',
+    fontFamilyDisplay: 'typography.fontFamilyDisplay',
+    fontFamilyMono: 'typography.fontFamilyMono',
+    fontFeatureSettings: 'typography.fontFeatureSettings',
+    fontSizeXs: 'typography.fontSizeXs',
+    fontSizeSm: 'typography.fontSizeSm',
+    fontSizeMd: 'typography.fontSizeMd',
+    fontSizeLg: 'typography.fontSizeLg',
+    fontSizeXl: 'typography.fontSizeXl',
+    fontSize2xl: 'typography.fontSize2xl',
+    fontWeightRegular: 'typography.fontWeightRegular',
+    fontWeightMedium: 'typography.fontWeightMedium',
+    fontWeightStrong: 'typography.fontWeightStrong',
+    lineHeightBody: 'typography.lineHeightBody',
+    lineHeightHeading: 'typography.lineHeightHeading'
+  },
+  spacing: {
+    xs: 'spacing.xs',
+    sm: 'spacing.sm',
+    md: 'spacing.md',
+    lg: 'spacing.lg',
+    xl: 'spacing.xl',
+    '2xl': 'spacing.2xl'
+  },
+  radius: {
+    inner: 'radius.inner',
+    element: 'radius.element',
+    container: 'radius.container',
+    page: 'radius.page',
+    full: 'radius.full'
+  },
+  size: {
+    controlSm: 'size.controlSm',
+    controlMd: 'size.controlMd',
+    controlLg: 'size.controlLg',
+    hitTarget: 'size.hitTarget'
+  },
+  elevation: {
+    low: 'elevation.low',
+    medium: 'elevation.medium',
+    high: 'elevation.high'
+  },
+  texture: {
+    grain: 'texture.grain'
+  },
+  motion: {
+    durationFast: 'motion.durationFast',
+    durationModerate: 'motion.durationModerate',
+    durationSlow: 'motion.durationSlow',
+    easingStandard: 'motion.easingStandard',
+    easingEmphasized: 'motion.easingEmphasized'
+  }
+};
+export const tokenNames = Object.freeze(Object.values(tokenContract).flatMap(group => Object.values(group)));
+export function validateThemeDefinition(theme) {
+  return tokenNames.filter(name => theme.tokens[name] === undefined);
+}
+export const tokenCustomProperties = Object.freeze(Object.fromEntries(tokenNames.map(name => [name, `--kioku-ui-${name.replaceAll('.', '-').replace(/[A-Z]/g, character => `-${character.toLowerCase()}`)}`])));

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@misoto22/kioku-ui",
+  "version": "0.0.0",
+  "description": "Product-neutral React design system foundations.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Misoto22/kioku-ui.git",
+    "directory": "packages/core"
+  },
+  "homepage": "https://github.com/Misoto22/kioku-ui#readme",
+  "bugs": {
+    "url": "https://github.com/Misoto22/kioku-ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*",
+    "!dist/**/{__tests__,test,tests}/**",
+    "src",
+    "!src/**/*.test.*",
+    "!src/**/*.spec.*",
+    "!src/**/{__tests__,test,tests}/**",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./source": {
+      "types": "./dist/index.d.ts",
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./authoring.stylex": {
+      "types": "./dist/authoring.stylex.d.ts",
+      "import": "./src/authoring.stylex.ts",
+      "default": "./src/authoring.stylex.ts"
+    },
+    "./reset.css": "./dist/styles/reset.css",
+    "./styles.css": "./dist/styles/index.css",
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "import": "./dist/theme/index.js",
+      "default": "./dist/theme/index.js"
+    },
+    "./docs": {
+      "types": "./dist/docs/index.d.ts",
+      "import": "./dist/docs/index.js",
+      "default": "./dist/docs/index.js"
+    },
+    "./authoring": {
+      "types": "./dist/authoring.stylex.d.ts",
+      "import": "./dist/authoring.stylex.js",
+      "default": "./dist/authoring.stylex.js"
+    }
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@stylexjs/stylex": "0.19.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.4",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@babel/plugin-transform-react-jsx": "^7.27.1",
+    "@babel/preset-typescript": "7.28.5",
+    "@stylexjs/cli": "0.19.0",
+    "jsdom": "^29.1.1",
+    "@misoto22/kioku-ui-test-utils": "0.0.0"
+  },
+  "scripts": {
+    "build": "stylex -i src -o dist -b styles/stylex.css --babelPresets @babel/preset-typescript --babelPluginsPost ./build/runtime-transform.cjs && tsc -p tsconfig.build.json",
+    "test": "vitest run src",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/Alert/Alert.doc.ts

@@ -0,0 +1,21 @@
+import type {ComponentDoc} from '../docs/types.js';
+
+export const alertDoc = {
+  name: 'Alert',
+  description:
+    'Announces feedback with a quiet status boundary and polite or assertive live semantics.',
+  props: [
+    {
+      name: 'icon',
+      description:
+        'Overrides the tone-specific decorative status icon without adding an announcement.',
+    },
+    {
+      name: 'tone',
+      description: 'Selects the semantic status tone and live behavior.',
+    },
+  ],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except className and role'],
+  example: '<Alert tone="danger">Unable to save.</Alert>',
+  storyId: 'core-alert--default',
+} satisfies ComponentDoc;

package/src/Alert/Alert.tsx

@@ -0,0 +1,129 @@
+import * as stylex from '@stylexjs/stylex';
+import type {HTMLAttributes, ReactNode} from 'react';
+
+import {semanticTokens} from '../authoring.stylex.js';
+import type {StatusTone} from '../Badge/index.js';
+
+const styles = stylex.create({
+  base: {
+    alignItems: 'flex-start',
+    borderRadius: semanticTokens.radiusElement,
+    borderStyle: semanticTokens.borderStyle,
+    borderWidth: semanticTokens.borderWidth,
+    display: 'flex',
+    fontFamily: semanticTokens.fontFamilyBody,
+    fontSize: semanticTokens.fontSizeMd,
+    gap: semanticTokens.spacingMd,
+    lineHeight: semanticTokens.lineHeightBody,
+    padding: semanticTokens.spacingMd,
+  },
+  info: {
+    backgroundColor: semanticTokens.statusInfoSurface,
+    borderColor: semanticTokens.statusInfoText,
+    color: semanticTokens.statusInfoText,
+  },
+  success: {
+    backgroundColor: semanticTokens.statusSuccessSurface,
+    borderColor: semanticTokens.statusSuccessText,
+    color: semanticTokens.statusSuccessText,
+  },
+  warning: {
+    backgroundColor: semanticTokens.statusWarningSurface,
+    borderColor: semanticTokens.statusWarningText,
+    color: semanticTokens.statusWarningText,
+  },
+  danger: {
+    backgroundColor: semanticTokens.statusDangerSurface,
+    borderColor: semanticTokens.statusDangerText,
+    color: semanticTokens.statusDangerText,
+  },
+  icon: {
+    alignItems: 'center',
+    display: 'flex',
+    flexShrink: 0,
+    height: semanticTokens.spacingLg,
+    justifyContent: 'center',
+    width: semanticTokens.spacingLg,
+  },
+  content: {
+    flex: 1,
+    minWidth: 0,
+  },
+});
+
+export interface AlertProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'className' | 'role'
+> {
+  readonly icon?: ReactNode;
+  readonly tone?: StatusTone;
+}
+
+function DefaultAlertIcon({tone}: {readonly tone: StatusTone}) {
+  const sharedProps = {
+    fill: 'none',
+    height: '100%',
+    stroke: 'currentColor',
+    strokeLinecap: 'round' as const,
+    strokeLinejoin: 'round' as const,
+    strokeWidth: 2,
+    viewBox: '0 0 20 20',
+    width: '100%',
+  };
+
+  if (tone === 'success') {
+    return (
+      <svg {...sharedProps}>
+        <circle cx="10" cy="10" r="8" />
+        <path d="m6.5 10 2.2 2.2 4.8-5" />
+      </svg>
+    );
+  }
+  if (tone === 'warning') {
+    return (
+      <svg {...sharedProps}>
+        <path d="M10 2.5 18 17H2L10 2.5Z" />
+        <path d="M10 7v4" />
+        <path d="M10 14h.01" />
+      </svg>
+    );
+  }
+  if (tone === 'danger') {
+    return (
+      <svg {...sharedProps}>
+        <circle cx="10" cy="10" r="8" />
+        <path d="m7 7 6 6M13 7l-6 6" />
+      </svg>
+    );
+  }
+  return (
+    <svg {...sharedProps}>
+      <circle cx="10" cy="10" r="8" />
+      <path d="M10 9v5" />
+      <path d="M10 6h.01" />
+    </svg>
+  );
+}
+
+export function Alert({children, icon, tone = 'info', ...props}: AlertProps) {
+  const isDanger = tone === 'danger';
+  const hasCustomIcon = icon !== undefined && icon !== null && icon !== false;
+
+  return (
+    <div
+      {...props}
+      aria-live={isDanger ? 'assertive' : 'polite'}
+      role={isDanger ? 'alert' : 'status'}
+      {...stylex.props(styles.base, styles[tone])}
+    >
+      <span
+        aria-hidden="true"
+        data-alert-icon={hasCustomIcon ? 'custom' : tone}
+        {...stylex.props(styles.icon)}
+      >
+        {hasCustomIcon ? icon : <DefaultAlertIcon tone={tone} />}
+      </span>
+      <div {...stylex.props(styles.content)}>{children}</div>
+    </div>
+  );
+}

package/src/Alert/index.ts

@@ -0,0 +1 @@
+export {Alert, type AlertProps} from './Alert.js';

package/src/AsyncState/AsyncState.doc.ts

@@ -0,0 +1,21 @@
+import type {ComponentDoc} from '../docs/types.js';
+
+export const asyncStateDoc = {
+  name: 'AsyncState',
+  description: 'Renders distinct loading, empty, error, and ready states.',
+  props: [
+    {
+      name: 'children',
+      description: 'Renders ready data and is required for the ready state.',
+    },
+    {
+      name: 'state',
+      description: 'Provides the current discriminated async state.',
+      required: true,
+    },
+  ],
+  inheritedProps: ['No inherited DOM attributes'],
+  example:
+    '<AsyncState state={{kind: "ready", data}}>{renderData}</AsyncState>',
+  storyId: 'core-async-state--default',
+} satisfies ComponentDoc;

package/src/AsyncState/AsyncState.tsx

@@ -0,0 +1,75 @@
+import type {ReactNode} from 'react';
+
+import {Alert} from '../Alert/index.js';
+import {EmptyStateContent} from '../EmptyState/index.js';
+import {SpinnerVisual} from '../Spinner/index.js';
+
+export type AsyncStateValue<T> =
+  | {readonly kind: 'loading'; readonly label?: string}
+  | {
+      readonly kind: 'empty';
+      readonly title: ReactNode;
+      readonly detail?: ReactNode;
+      readonly action?: ReactNode;
+    }
+  | {
+      readonly kind: 'error';
+      readonly title: ReactNode;
+      readonly detail?: ReactNode;
+      readonly retry?: ReactNode;
+    }
+  | {readonly kind: 'ready'; readonly data: T};
+
+type PendingAsyncStateValue<T> = Exclude<AsyncStateValue<T>, {kind: 'ready'}>;
+
+export type AsyncStateProps<T> =
+  | {
+      readonly children: (data: T) => ReactNode;
+      readonly state: AsyncStateValue<T>;
+    }
+  | {
+      readonly children?: never;
+      readonly state: PendingAsyncStateValue<T>;
+    };
+
+export function AsyncState<T>({children, state}: AsyncStateProps<T>) {
+  if (state.kind === 'ready' && !children) {
+    throw new Error('AsyncState requires a renderer for ready data');
+  }
+
+  const loadingLabel =
+    state.kind === 'loading' ? (state.label ?? 'Loading') : undefined;
+  const statusContent =
+    state.kind === 'loading' ? (
+      <SpinnerVisual />
+    ) : state.kind === 'empty' ? (
+      <EmptyStateContent
+        action={state.action}
+        detail={state.detail}
+        title={state.title}
+      />
+    ) : state.kind === 'ready' ? (
+      children!(state.data)
+    ) : null;
+
+  return (
+    <>
+      <div
+        aria-atomic="true"
+        aria-busy={state.kind === 'loading'}
+        aria-label={loadingLabel}
+        aria-live="polite"
+        role="status"
+      >
+        {statusContent}
+      </div>
+      {state.kind === 'error' ? (
+        <Alert tone="danger">
+          <div>{state.title}</div>
+          {state.detail ? <div>{state.detail}</div> : null}
+          {state.retry}
+        </Alert>
+      ) : null}
+    </>
+  );
+}

package/src/AsyncState/index.ts

@@ -0,0 +1,5 @@
+export {
+  AsyncState,
+  type AsyncStateProps,
+  type AsyncStateValue,
+} from './AsyncState.js';

package/src/Badge/Badge.doc.ts

@@ -0,0 +1,15 @@
+import type {ComponentDoc} from '../docs/types.js';
+
+export const badgeDoc = {
+  name: 'Badge',
+  description: 'Displays compact, non-live status or category text.',
+  props: [
+    {
+      name: 'tone',
+      description: 'Selects the neutral default or a semantic status tone.',
+    },
+  ],
+  inheritedProps: ['HTMLAttributes<HTMLSpanElement> except className'],
+  example: '<Badge tone="success">Available</Badge>',
+  storyId: 'core-badge--default',
+} satisfies ComponentDoc;

package/src/Badge/Badge.tsx

@@ -0,0 +1,58 @@
+import * as stylex from '@stylexjs/stylex';
+import type {HTMLAttributes} from 'react';
+
+import {semanticTokens} from '../authoring.stylex.js';
+
+/** Semantic feedback tones shared by status components. */
+export type StatusTone = 'info' | 'success' | 'warning' | 'danger';
+
+/** Compact badge tones, including a non-status neutral treatment. */
+export type BadgeTone = 'neutral' | StatusTone;
+
+const styles = stylex.create({
+  base: {
+    borderRadius: semanticTokens.radiusElement,
+    display: 'inline-flex',
+    fontFamily: semanticTokens.fontFamilyBody,
+    fontSize: semanticTokens.fontSizeXs,
+    fontWeight: semanticTokens.fontWeightMedium,
+    paddingBlock: semanticTokens.spacingXs,
+    paddingInline: semanticTokens.spacingSm,
+  },
+  neutral: {
+    backgroundColor: semanticTokens.colorSurfaceMuted,
+    color: semanticTokens.colorTextSecondary,
+  },
+  info: {
+    backgroundColor: semanticTokens.statusInfoSurface,
+    color: semanticTokens.statusInfoText,
+  },
+  success: {
+    backgroundColor: semanticTokens.statusSuccessSurface,
+    color: semanticTokens.statusSuccessText,
+  },
+  warning: {
+    backgroundColor: semanticTokens.statusWarningSurface,
+    color: semanticTokens.statusWarningText,
+  },
+  danger: {
+    backgroundColor: semanticTokens.statusDangerSurface,
+    color: semanticTokens.statusDangerText,
+  },
+});
+
+/** Props for compact status or category text. */
+export interface BadgeProps extends Omit<
+  HTMLAttributes<HTMLSpanElement>,
+  'className'
+> {
+  readonly tone?: BadgeTone;
+}
+
+export function Badge({children, tone = 'neutral', ...props}: BadgeProps) {
+  return (
+    <span {...props} {...stylex.props(styles.base, styles[tone])}>
+      {children}
+    </span>
+  );
+}

package/src/Badge/index.ts

@@ -0,0 +1,6 @@
+export {
+  Badge,
+  type BadgeProps,
+  type BadgeTone,
+  type StatusTone,
+} from './Badge.js';