geoiq-frontend-ui-kit/dist/index.es52.js

This project is a UI kit for GeoIQ's frontend. It's built with React, TypeScript, and Vite.

import * as e from "react";
import { Clock as E } from "lucide-react";
import { cn as u } from "./index.es85.js";
import { Typography as a } from "./index.es19.js";
import b from "./index.es18.js";
import { CreditsPillVariants as x, CreditsIndicatorVariants as N } from "./index.es81.js";
function C(t) {
  return t >= 1e6 ? `${parseFloat((t / 1e6).toFixed(2))}M` : t >= 1e3 ? `${parseFloat((t / 1e3).toFixed(2))}k` : String(t);
}
const $ = e.forwardRef(
  ({
    remaining: t,
    total: v,
    collapsed: y = !1,
    label: s = "Credits",
    topUpLabel: p = "Top up",
    onTopUp: l,
    topUpWrapper: o,
    size: c,
    className: m,
    id: d,
    ...f
  }, g) => {
    const r = Math.max(v, 0), i = Math.min(Math.max(t, 0), r), h = r === 0 ? 0 : i / r * 100, w = `${i.toLocaleString()} / ${r.toLocaleString()} ${s.toLowerCase()}`;
    if (y) {
      const n = /* @__PURE__ */ e.createElement(
        "div",
        {
          ref: g,
          id: d,
          className: u(x({ size: c }), m),
          ...f
        },
        /* @__PURE__ */ e.createElement(E, { className: "w-3.5 h-3.5 text-[rgb(var(--primary-300))]" }),
        /* @__PURE__ */ e.createElement(a, { variant: "body1", className: "text-white fleading-none" }, C(i)),
        /* @__PURE__ */ e.createElement("div", { className: "w-full h-1 overflow-hidden rounded bg-white/15" }, /* @__PURE__ */ e.createElement(
          "div",
          {
            className: "h-full transition-all duration-300 ease-in-out rounded brand-primary-secondary-gradient",
            style: { width: `${h}%` }
          }
        ))
      );
      return /* @__PURE__ */ e.createElement(
        b,
        {
          content: "",
          headerText: w,
          side: "right",
          sideOffset: 12,
          delayDuration: 100,
          triggerElement: n
        }
      );
    }
    return /* @__PURE__ */ e.createElement(
      "div",
      {
        ref: g,
        id: d,
        className: u(N({ size: c }), m),
        ...f
      },
      /* @__PURE__ */ e.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ e.createElement(
        a,
        {
          variant: "body6",
          className: "font-semibold tracking-wider text-white/50"
        },
        s
      ), (l || o) && (() => {
        const n = /* @__PURE__ */ e.createElement(
          "button",
          {
            type: "button",
            onClick: l,
            className: "inline-flex items-center gap-0.5 text-[rgb(var(--primary-400))] hover:text-[rgb(var(--primary-200))] transition-colors"
          },
          /* @__PURE__ */ e.createElement(a, { variant: "body6", className: "font-semibold" }, p),
          /* @__PURE__ */ e.createElement(
            "img",
            {
              src: "https://frontend-static-files.geoiq.io/strapi/icons_v5_61a46c180e/icons_v5_61a46c180e.svg",
              alt: "",
              className: "w-3 h-3"
            }
          )
        );
        return o ? o(n) : n;
      })()),
      /* @__PURE__ */ e.createElement("div", { className: "flex items-baseline gap-1" }, /* @__PURE__ */ e.createElement(a, { variant: "body1", className: "text-white " }, i.toLocaleString()), /* @__PURE__ */ e.createElement(a, { variant: "body1", className: "text-white " }, "remaining"), /* @__PURE__ */ e.createElement(a, { variant: "body6", className: "text-white/40" }, "/ ", r.toLocaleString())),
      /* @__PURE__ */ e.createElement("div", { className: "w-full h-1 overflow-hidden rounded bg-white/10" }, /* @__PURE__ */ e.createElement(
        "div",
        {
          className: "h-full transition-all duration-300 ease-in-out rounded brand-primary-secondary-gradient",
          style: { width: `${h}%` }
        }
      ))
    );
  }
);
$.displayName = "CreditsIndicator";
export {
  $ as CreditsIndicator,
  N as CreditsIndicatorVariants,
  x as CreditsPillVariants
};
//# sourceMappingURL=index.es52.js.map