"use client"; import * as React from "react"; import { motion } from "motion/react"; import { cn } from "@kineticui/core"; export type UsageSegment = { label: string; value: number; color?: string }; export type UsageMeterProps = { title?: string; /** Usage broken down by category; summed for the total. */ segments: UsageSegment[]; limit: number; unit?: string; /** e.g. "Resets in 3 days". */ footnote?: React.ReactNode; /** Shown when usage passes 80%. */ action?: React.ReactNode; format?: (n: number) => string; className?: string; }; const palette = ["var(--kn-accent)", "#7C8CFF", "#F4A86A", "#F0A3D0", "#6EE7A0"]; const compact = (n: number) => (n >= 1e6 ? `${+(n / 1e6).toFixed(1)}M` : n >= 1e3 ? `${+(n / 1e3).toFixed(1)}k` : String(n)); /** Plan usage bar (tokens, credits, seats) with per-category breakdown and limit warnings. */ export function UsageMeter({ title = "Usage", segments, limit, unit = "", footnote, action, format = compact, className }: UsageMeterProps) { const used = segments.reduce((a, s) => a + s.value, 0); const pct = Math.min(100, (used / limit) * 100); const level = pct >= 100 ? "over" : pct >= 80 ? "warn" : "ok"; let left = 0; return (

{title} {format(used)} / {format(limit)} {unit}

{segments.map((s, i) => { const w = (s.value / Math.max(limit, used)) * 100; const el = ( ); left += w; return el; })}

{segments.map((s, i) => ( {s.label} {format(s.value)} ))}

{level !== "ok" || footnote ? (

{level !== "ok" ? ( {level === "over" ? "You've reached your limit." : `You've used ${Math.round(pct)}% of your plan.`} ) : ( {footnote} )} {level !== "ok" ? action : null}

) : null}

); }

Usage Meter

Installation

Exports