Quota banner

QuotaWarning requires percent and resetsAt. period, onDismiss, and onViewUsage are optional. The icon is a triangle alert in an amber tile, and a hairline amber gradient runs along the top edge. The card leaves padding on the right so the dismiss control does not cover the title. The fill is a sand-to-amber gradient, animated with scaleX unless reduced motion is set. The track hides overflow, so a percent past 100 clips the fill even though the number beside it does not clip. Both dismiss controls call the same callback. You do not get a separate event for the X. The demo does not pass onViewUsage, so "See usage" renders and does nothing until you wire it, which is the natural place to open Usage meter. There is no stored "already dismissed" flag inside the file. Hiding it is your state, the way the demo's open flag unmounts the card.

QuotaReached requires resetsIn and resetsAt. plan defaults to "Pro". onUpgrade, onNotify, and notifying are optional. The countdown prints hours as h:mm:ss when an hour or more remains, and m:ss otherwise. Seconds are always two digits. Minutes are padded only in the hours form, so the sub-hour display can be "5:09" rather than "05:09". The demo starts at 4,338 seconds, which paints as 1:12:18, and resetsAt is the separate string "3:40 PM". The component does not derive one from the other, and it does not tick. The demo decrements resetsIn once a second. The countdown node is aria-live off, so the digits do not announce every second. The alert role covers the card as a whole. "Upgrade to Max" does not read a target plan from props. A different tier means changing that label. The demo omits onUpgrade, so the button is visible and inert until you pass the handler. The notify button does not schedule a notification. You store notifying, and the pressed style plus "We'll let you know" is the only change the component makes. The two buttons stack, then sit on one row from 400 pixels wide.

QuotaInline takes remaining, limit, resetsAt, and an optional onUpgrade. It treats remaining at or below zero as out. The ratio is remaining divided by limit, floored at zero, and it drives a ring of radius 6 whose stroke is hidden from assistive tech. The stroke is rose when out, amber when the ratio is under 0.25, and the warm sand tone otherwise. The dash offset eases over 300 milliseconds. At zero the sentence is "No messages left until" the timestamp. Above zero it is the count, "message" or "messages" based on a check for exactly 1, then "left until" the same timestamp. The strip uses a top radius, a bottom border of none, and a single truncating line, so it joins a field underneath. The demo field is a sibling: remaining starts at 3 against a limit of 40, which is already under a quarter, so the ring is amber before anyone types. Each accepted send decrements remaining. At zero the demo disables the input, sets the placeholder to "Upgrade or wait for the reset to keep chatting", and disables send. Its Upgrade handler sets remaining back to 40, which fills the ring and returns it to the sand tone. That refill is the demo, not a plan change inside QuotaInline.