Establish NODE.DC design system baseline

packages/ui-react/src/StatusBadge.tsx

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "./cn";
+
+export type StatusTone = "neutral" | "success" | "warning" | "danger" | "accent";
+
+export interface StatusBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  tone?: StatusTone;
+}
+
+export function StatusBadge({ tone = "neutral", className, children, ...props }: StatusBadgeProps) {
+  return (
+    <span className={cn("nodedc-status", className)} data-tone={tone === "neutral" ? undefined : tone} {...props}>
+      {children}
+    </span>
+  );
+}
+