50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1dc8,// Hairline UI · usage-meter · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { NumberRoll } from "./number-roll"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * USAGE METER: how much is left, before it runs out * * normal quiet: "1,240 of 2,000 left"; the numbers roll as * they're spent and the bar eases to match * low amber once a fifth is left; the way to upgrade * opens in beside the reset date * out red; the numbers fold away as the words morph to * "No credits left", and "Resets Oct 12" becomes * "You're out until Oct 12." * * A bar for settings and menus, or a ring small enough for a * composer toolbar (context windows, daily limits). * ───────────────────────────────────────────────────────── */ export interface UsageMeterProps extends React.HTMLAttributes { used: number; limit: number; /** What's being counted, e.g. "credits" or "messages". */ unit?: string; label?: string; /** When it resets (ms or Date). */ resetAt?: number | Date; variant?: "bar" | "ring"; /** Share left at which it turns amber. */ lowAt?: number; onUpgrade?: () => void; upgradeLabel?: string; } const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"; const MORPH = "cubic-bezier(0.16,1,0.3,1)"; const number = new Intl.NumberFormat("en-US"); const GROUPED = { useGrouping: true }; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); /** A piece of a line that opens out of nothing and folds back into it. */ function Reveal({ show, reduced, className = "", children }: { show: boolean; reduced: boolean; className?: string; children: React.ReactNode }) { return ( {children} ); } export function UsageMeter({ used, limit, unit = "credits", label = "Usage", resetAt, variant = "bar", lowAt = 0.2, onUpgrade, upgradeLabel = "Upgrade", className = "", ...props }: UsageMeterProps) { const reduced = useReducedMotion(); const left = Math.max(0, limit - used); const share = limit > 0 ? Math.min(1, used / limit) : 1; const out = left <= 0; const low = !out && limit > 0 && left / limit <= lowAt; const tone = out ? "bg-red-500" : low ? "bg-amber-500" : "bg-foreground"; const stroke = out ? "stroke-red-500" : low ? "stroke-amber-500" : "stroke-foreground"; const resets = resetAt !== undefined ? new Date(resetAt).toLocaleDateString("en-US", { month: "short", day: "numeric" }) : undefined; const summary = out ? `No ${unit} left` : `${number.format(left)} of ${number.format(limit)} ${unit} left`; if (variant === "ring") { const c = 2 * Math.PI * 8; return (

); } return (

{label} {/* The numbers fold away when it runs out; the words that stay glide into "No credits left". */}

{(resets || onUpgrade) && (

{out ? `You’re out until ${resets ?? "the next reset"}.` : resets ? `Resets ${resets}` : ""} {onUpgrade && ( // Opens in once it matters: when it's low or out. )}

)}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/number-roll.json?as=dependency","https://hairlineui.com/r/text-morph.json?as=dependency"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/usage-meter.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]