// Plaaayground v2 — StatusIndicator
// Blueprint: 05 — Dot + label for status display

import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const dotColors = cva("w-2 h-2 rounded-full flex-shrink-0", {
  variants: {
    status: {
      success: "bg-emerald-500",
      warning: "bg-amber-500",
      error: "bg-red-500",
      neutral: "bg-muted-foreground",
      online: "bg-emerald-500",
      away: "bg-amber-500",
      busy: "bg-red-500",
      offline: "bg-muted-foreground/50",
    },
  },
  defaultVariants: {
    status: "neutral",
  },
});

export interface StatusIndicatorProps
  extends VariantProps<typeof dotColors> {
  label?: string;
  size?: "sm" | "md";
  className?: string;
}

export function StatusIndicator({
  status,
  label,
  size = "md",
  className,
}: StatusIndicatorProps) {
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1.5",
        size === "sm" && "gap-1",
        className
      )}
    >
      <span className={cn(dotColors({ status }), size === "sm" && "w-1.5 h-1.5")} />
      {label && (
        <span
          className={cn(
            "text-muted-foreground",
            size === "sm" ? "text-xs" : "text-sm"
          )}
        >
          {label}
        </span>
      )}
    </span>
  );
}
StatusIndicator

Source Code
