ranui/dist/token-meter-Dk6OHfsB.js

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

import { T as d, i as l, m as k } from "./factory-WDxu11V0.js";
import "./builder-EH76YCFS.js";
import { a as m, i as n, n as c, o as v, t as g } from "./utils-U-9uH7EX.js";
import { a as f, n as p } from "./ssr-BzykYefm.js";
var _ = ':host{display:block;color:var(--ran-token-meter-color, var(--ran-color-text-secondary));font-size:var(--ran-token-meter-font-size, var(--ran-text-label-3))}:host([hidden]){display:none}.ran-token-meter{display:flex;align-items:center;gap:var(--ran-token-meter-gap, var(--ran-space-2))}.ran-token-meter-track{flex:1;border-radius:var(--ran-token-meter-track-radius, var(--ran-radius-full));background:var(--ran-token-meter-track-background, var(--ran-color-bg-muted));min-width:var(--ran-token-meter-track-width, 4rem);height:var(--ran-token-meter-track-height, .375rem);overflow:hidden}.ran-token-meter-fill{transition:width var(--ran-token-meter-transition, .2s) ease-out;border-radius:inherit;background:var(--ran-token-meter-fill-background, var(--ran-color-primary));height:100%}:host([level="warn"]) .ran-token-meter-fill{background:var(--ran-token-meter-warn-background, var(--ran-color-warning))}:host([level="over"]) .ran-token-meter-fill{background:var(--ran-token-meter-over-background, var(--ran-color-danger))}.ran-token-meter-text{flex:none;font-variant-numeric:tabular-nums}@media(prefers-reduced-motion:reduce){.ran-token-meter-fill{transition:none}}', x = 0.8;
function a(t) {
  return t < 1e3 ? String(t) : t < 1e4 ? `${(t / 1e3).toFixed(1)}k` : `${Math.round(t / 1e3)}k`;
}
var w = class extends p {
  _shadowDom;
  _fill;
  _text;
  _root;
  static get observedAttributes() {
    return [
      "limit",
      "used",
      "spent",
      "label",
      "sheet"
    ];
  }
  constructor() {
    super(), this._shadowDom = g(this, _);
    const t = d(), e = d(), r = l().class("ran-token-meter").attr("part", "meter").attr("role", "progressbar").attr("aria-valuemin", "0").children(l().class("ran-token-meter-track").attr("part", "track").children(l().class("ran-token-meter-fill").ref(t).attr("part", "fill").build()).build(), k().class("ran-token-meter-text").ref(e).attr("part", "text").build()).build();
    this._shadowDom.appendChild(r), this._root = r, this._fill = m(t, "fill"), this._text = m(e, "text");
  }
  get limit() {
    return this._number("limit");
  }
  set limit(t) {
    n(this, "limit", String(t));
  }
  get used() {
    return this._number("used");
  }
  set used(t) {
    n(this, "used", String(t));
  }
  get spent() {
    return this._number("spent");
  }
  set spent(t) {
    n(this, "spent", String(t));
  }
  get label() {
    return c(this, "label", "Context");
  }
  set label(t) {
    n(this, "label", t);
  }
  get level() {
    const t = this.getAttribute("level");
    return t === "warn" || t === "over" ? t : "ok";
  }
  get sheet() {
    return c(this, "sheet");
  }
  set sheet(t) {
    n(this, "sheet", t);
  }
  connectedCallback() {
    this.handlerExternalCss(), this._render();
  }
  attributeChangedCallback(t, e, r) {
    e !== r && (t === "sheet" ? this.handlerExternalCss() : this._render());
  }
  handlerExternalCss = () => {
    v(this, this._shadowDom, "sheet", null, this.sheet);
  };
  _number(t) {
    const e = Number(this.getAttribute(t));
    return Number.isFinite(e) && e > 0 ? e : 0;
  }
  _render() {
    const { limit: t, used: e, spent: r, label: i } = this, o = t === 0 ? 0 : e / t, s = t === 0 || o < x ? "ok" : o < 1 ? "warn" : "over";
    this.setAttribute("level", s), this._fill.style.width = `${Math.min(100, o * 100)}%`, this._root.setAttribute("aria-valuenow", String(e)), this._root.setAttribute("aria-valuemax", String(t === 0 ? e : t));
    const h = t === 0 ? a(e) : `${a(e)} / ${a(t)}`, u = r === 0 ? h : `${h} · ${a(r)}`;
    this._text.textContent = i === "" ? u : `${i} ${u}`, this._root.setAttribute("title", [
      `${i}: ${e.toLocaleString()}${t === 0 ? "" : ` / ${t.toLocaleString()}`}`,
      r === 0 ? "" : `Spent: ${r.toLocaleString()}`,
      s === "ok" ? "" : s === "warn" ? "Approaching the limit" : "Over the limit"
    ].filter((b) => b !== "").join(`
`));
  }
};
f("r-token-meter", w);
export {
  w as t
};