@flanksource/clicky-ui
Version:
Flanksource Clicky UI — React component library built on shadcn/ui with light/dark and density theming.
64 lines (63 loc) • 2.28 kB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
import { cn } from "../lib/utils.js";
import { Icon } from "./Icon.js";
const toneClass = {
neutral: "text-foreground",
success: "text-green-600 dark:text-green-400",
warning: "text-yellow-600 dark:text-yellow-400",
danger: "text-red-600 dark:text-red-400",
info: "text-blue-600 dark:text-blue-400"
};
function Gauge({
label,
value,
max = 100,
tone = "neutral",
suffix = "%",
icon,
subtitle,
meta,
className
}) {
const pct = max > 0 ? Math.round(value / max * 100) : 0;
const displayValue = max === 100 ? value : pct;
return /* @__PURE__ */ jsxs(
"div",
{
className: cn(
"flex min-h-28 w-[15.5rem] shrink-0 flex-col rounded-lg border border-border bg-card p-3",
className
),
children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 text-xs text-muted-foreground", children: [
/* @__PURE__ */ jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [
icon ? /* @__PURE__ */ jsx(GaugeIcon, { icon }) : null,
/* @__PURE__ */ jsx("span", { className: "truncate", children: label })
] }),
meta ? /* @__PURE__ */ jsx("span", { className: "shrink-0 truncate", children: meta }) : null
] }),
/* @__PURE__ */ jsxs(
"span",
{
className: cn("mt-2 text-2xl font-semibold tabular-nums tracking-tight", toneClass[tone]),
children: [
displayValue,
suffix ? /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-sm opacity-60", children: suffix }) : null
]
}
),
subtitle ? /* @__PURE__ */ jsx("span", { className: "mt-1 truncate text-xs text-muted-foreground", children: subtitle }) : null
]
}
);
}
function GaugeIcon({ icon }) {
if (typeof icon === "string") {
return /* @__PURE__ */ jsx(Icon, { name: icon, width: 16, height: 16, className: "text-muted-foreground" });
}
return /* @__PURE__ */ jsx("span", { className: "inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground [&>svg]:h-4 [&>svg]:w-4", children: icon });
}
export {
Gauge
};
//# sourceMappingURL=Gauge.js.map