// Plaaayground v2 — ColorDot
// Blueprint: 05 — Category color indicator dot (6 categories)

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

const dotVariants = cva("rounded-full flex-shrink-0", {
  variants: {
    category: {
      brand: "bg-[hsl(var(--category-brand,24_100%_50%))]",
      design: "bg-[hsl(var(--category-design,271_91%_65%))]",
      development: "bg-[hsl(var(--category-dev,217_91%_60%))]",
      content: "bg-[hsl(var(--category-content,142_71%_45%))]",
      marketing: "bg-[hsl(var(--category-marketing,38_92%_50%))]",
      launch: "bg-[hsl(var(--category-launch,330_81%_60%))]",
      custom: "bg-muted-foreground",
    },
    size: {
      sm: "w-1.5 h-1.5",
      md: "w-2 h-2",
      lg: "w-2.5 h-2.5",
    },
  },
  defaultVariants: {
    category: "brand",
    size: "md",
  },
});

export interface ColorDotProps extends VariantProps<typeof dotVariants> {
  label?: string;
  className?: string;
}

export function ColorDot({ category, size, label, className }: ColorDotProps) {
  if (label) {
    return (
      <span className={cn("inline-flex items-center gap-2", className)}>
        <span
          className={cn(dotVariants({ category, size }))}
          aria-hidden="true"
        />
        <span className="text-sm font-mono uppercase tracking-wide">{label}</span>
      </span>
    );
  }

  return (
    <span
      className={cn(dotVariants({ category, size }), className)}
      aria-hidden="true"
    />
  );
}
ColorDot

Preview
