"use client"

import * as React from "react"

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

type ProgressBarTone =
  | "text-primary"
  | "text-foreground"
  | "text-muted-foreground"
  | "text-destructive"

type ProgressBarSegment = {
  label?: string
  value: number
  tone?: ProgressBarTone
}

interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
  label?: string
  value?: number
  max?: number
  tone?: ProgressBarTone
  showValue?: boolean
  formatValue?: (value: number, max: number) => string
  segments?: ProgressBarSegment[]
  showSegmentsLegend?: boolean
}

const segmentTones: ProgressBarTone[] = [
  "text-primary",
  "text-foreground",
  "text-muted-foreground",
  "text-destructive",
]

function ProgressBar({
  label,
  value = 0,
  max,
  tone = "text-primary",
  showValue = true,
  formatValue,
  segments,
  showSegmentsLegend = false,
  className,
  ...props
}: ProgressBarProps) {
  const hasSegments = Boolean(segments?.length)
  const computedTotal =
    max ?? (hasSegments ? segments!.reduce((sum, item) => sum + item.value, 0) : 100)
  const safeTotal = computedTotal > 0 ? computedTotal : 1
  const resolvedValue = hasSegments
    ? segments!.reduce((sum, item) => sum + item.value, 0)
    : value
  const percent = Math.min(100, Math.max(0, (resolvedValue / safeTotal) * 100))
  const displayValue = formatValue
    ? formatValue(resolvedValue, safeTotal)
    : `${Math.round(percent)}%`

  return (
    <div className={cn("space-y-3", className)} {...props}>
      {label || showValue ? (
        <div className="flex items-center justify-between text-sm">
          <span className="text-foreground">{label}</span>
          {showValue ? (
            <span className="text-muted-foreground">{displayValue}</span>
          ) : null}
        </div>
      ) : null}
      <div className="h-3 w-full overflow-hidden rounded-full border border-border bg-muted">
        {hasSegments ? (
          <div className="flex h-full w-full">
            {segments!.map((segment, index) => {
              const width = Math.min(100, Math.max(0, (segment.value / safeTotal) * 100))
              const segmentTone = segment.tone ?? segmentTones[index % segmentTones.length]

              return (
                <div
                  key={`${segment.label ?? "segment"}-${index}`}
                  className={cn("h-full", segmentTone)}
                  style={{ width: `${width}%`, backgroundColor: "currentColor" }}
                />
              )
            })}
          </div>
        ) : (
          <div
            className={cn("h-full", tone)}
            style={{ width: `${percent}%`, backgroundColor: "currentColor" }}
          />
        )}
      </div>
      {hasSegments && showSegmentsLegend ? (
        <div className="grid gap-2 text-xs text-muted-foreground sm:grid-cols-2">
          {segments!.map((segment, index) => {
            const percentValue = (segment.value / safeTotal) * 100
            const segmentTone = segment.tone ?? segmentTones[index % segmentTones.length]
            const labelText = segment.label ?? `Segment ${index + 1}`

            return (
              <div
                key={`${labelText}-${index}-legend`}
                className="flex items-center justify-between gap-3"
              >
                <div className="flex items-center gap-2">
                  <span
                    className={cn("h-2.5 w-2.5 rounded-full", segmentTone)}
                    style={{ backgroundColor: "currentColor" }}
                  />
                  <span className="text-foreground">{labelText}</span>
                </div>
                <span className="tabular-nums text-muted-foreground">
                  {percentValue.toFixed(0)}%
                </span>
              </div>
            )
          })}
        </div>
      ) : null}
    </div>
  )
}

export { ProgressBar }
export type { ProgressBarProps, ProgressBarSegment, ProgressBarTone }
Progress Bar

Dependencies

Files

Installation
