@flanksource/clicky-ui/dist/data/ProgressBar.js

Flanksource Clicky UI — React component library built on shadcn/ui with light/dark and density theming.

import { jsx } from "react/jsx-runtime";
import { cn } from "../lib/utils.js";
function ProgressBar({ segments, total, height = "h-2", className }) {
  if (total === 0) return null;
  const tooltip = segments.filter((s) => s.count > 0).map((s) => `${s.count} ${s.label}`).join(", ");
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: cn("w-full bg-muted rounded-full flex overflow-hidden", height, className),
      title: tooltip,
      role: "progressbar",
      "aria-valuemin": 0,
      "aria-valuemax": total,
      "aria-valuenow": segments.reduce((acc, s) => acc + s.count, 0),
      children: segments.map((seg, i) => {
        if (seg.count === 0) return null;
        const pct = seg.count / total * 100;
        return /* @__PURE__ */ jsx(
          "div",
          {
            className: cn(seg.color, height, "transition-all duration-300"),
            style: { width: `${pct}%` },
            title: `${seg.count} ${seg.label}`
          },
          i
        );
      })
    }
  );
}
export {
  ProgressBar
};
//# sourceMappingURL=ProgressBar.js.map