Status Dot

import { cn } from "cn";
import * as React from "react";

type StatusDotColor = "green" | "yellow" | "indigo";

type StatusDotProps = React.ComponentProps<"span"> & {
  color?: StatusDotColor;
};

const colors = {
  green: {
    halo: "bg-[var(--status-dot-green-halo,var(--muted))]",
    dot: "bg-[var(--status-dot-green-dot,var(--primary))]",
  },
  yellow: {
    halo: "bg-[var(--status-dot-yellow-halo,var(--muted))]",
    dot: "bg-[var(--status-dot-yellow-dot,var(--primary))]",
  },
  indigo: {
    halo: "bg-[var(--status-dot-indigo-halo,var(--muted))]",
    dot: "bg-[var(--status-dot-indigo-dot,var(--primary))]",
  },
};

function StatusDot({ color = "green", className, ...props }: StatusDotProps) {
  return (
    <span
      aria-hidden
      data-slot="status-dot"
      className={cn(
        "inline-flex size-3 shrink-0 items-center self-center justify-center rounded-full",
        colors[color].halo,
        className
      )}
      {...props}
    >
      <span className={cn("size-1.5 rounded-full", colors[color].dot)} />
    </span>
  );
}

export { StatusDot };
export type { StatusDotProps };