import * as React from "react" import { cn } from "@/lib/utils" export interface SegmentMeterProps extends Omit, "children"> { /** How many segments are filled, from 0 to `segments`. */ value: number /** Number of segments. */ segments?: number /** A word for each level, from the first filled segment to the last. */ labels?: string[] /** Color the segments by level (red, amber, then green), or in the foreground color. */ tone?: "level" | "neutral" } function toneOf(value: number, segments: number, tone: SegmentMeterProps["tone"]) { if (tone === "neutral") return "bg-foreground" const ratio = value / segments if (ratio <= 0.34) return "bg-red-500" if (ratio <= 0.67) return "bg-amber-500" return "bg-emerald-500" } /** * A level in a few segments, such as the strength of a password. Segments * fill one after the other when the value grows. Name it with `aria-label`. */ export function SegmentMeter({ value, segments = 4, labels, tone = "level", className, ...props }: SegmentMeterProps) { const filled = Math.min(segments, Math.max(0, Math.round(value))) const label = filled > 0 ? labels?.[filled - 1] : undefined const color = toneOf(filled, segments, tone) return (

{Array.from({ length: segments }, (_, index) => ( ))}

{labels && ( {label ?? " "} )}

) }