// Plaaayground v2 — CharCounter
// Blueprint: 03 — Inline character count display for textarea

import { cn } from "@/lib/utils";

export interface CharCounterProps {
  current: number;
  max: number;
  className?: string;
}

export function CharCounter({ current, max, className }: CharCounterProps) {
  const isOver = current > max;
  const isNearLimit = current > max * 0.9;

  return (
    <span
      className={cn(
        "text-xs font-mono tabular-nums",
        isOver
          ? "text-destructive"
          : isNearLimit
            ? "text-amber-600"
            : "text-muted-foreground",
        className
      )}
      aria-label={`${current} of ${max} characters`}
    >
      {current}/{max}
    </span>
  );
}
CharCounter

Source Code
