"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

type StatusDotVariant = "online" | "offline" | "busy" | "away" | "neutral";

const variantStyles: Record<StatusDotVariant, string> = {
  online: "bg-primary",
  offline: "bg-muted-foreground",
  busy: "bg-destructive",
  away: "bg-muted-foreground",
  neutral: "bg-border",
};

const pulseStyles: Record<StatusDotVariant, string> = {
  online: "bg-primary/50",
  offline: "bg-muted-foreground/50",
  busy: "bg-destructive/50",
  away: "bg-muted-foreground/50",
  neutral: "bg-border/50",
};

export type StatusDotSize = "xs" | "sm" | "md" | "lg";

const sizeStyles: Record<StatusDotSize, string> = {
  xs: "h-1.5 w-1.5",
  sm: "h-2 w-2",
  md: "h-2.5 w-2.5",
  lg: "h-3 w-3",
};

const pulseSizeStyles: Record<StatusDotSize, string> = {
  xs: "h-3 w-3",
  sm: "h-4 w-4",
  md: "h-5 w-5",
  lg: "h-6 w-6",
};

export interface StatusDotProps extends React.HTMLAttributes<HTMLSpanElement> {
  variant?: StatusDotVariant;
  size?: StatusDotSize;
  pulse?: boolean;
  label?: string;
  showLabel?: boolean;
}

function StatusDot({
  variant = "neutral",
  size = "md",
  pulse = false,
  label,
  showLabel = false,
  className,
  ...props
}: StatusDotProps) {
  const statusLabel = label ?? variant.charAt(0).toUpperCase() + variant.slice(1);

  return (
    <span
      className={cn("inline-flex items-center gap-2", className)}
      {...props}
    >
      <span className="relative inline-flex">
        {pulse ? (
          <span
            className={cn(
              "absolute inset-0 m-auto animate-ping rounded-full opacity-75",
              pulseSizeStyles[size],
              pulseStyles[variant]
            )}
          />
        ) : null}
        <span
          className={cn(
            "relative inline-block rounded-full",
            sizeStyles[size],
            variantStyles[variant]
          )}
          aria-hidden="true"
        />
      </span>
      {showLabel ? (
        <span className="text-sm text-muted-foreground">{statusLabel}</span>
      ) : (
        <span className="sr-only">{statusLabel}</span>
      )}
    </span>
  );
}

export { StatusDot };
Status Dot

Dependencies

Files

Installation
