@violetprotocol/nudge-components/dist/es/atoms/GaugeHorizontal/GaugeHorizontal.esm.js

Components for Nudge's websites and applications.

"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useState, useEffect } from "react";
const LENGTH = 40;
const STROKE_WIDTH = 6;
const GaugeHorizontal = ({
  className,
  color,
  bgColor,
  strokeWidth = STROKE_WIDTH,
  length = LENGTH,
  percent
}) => {
  const [displayedValue, setDisplayedValue] = useState(0);
  useEffect(() => {
    setDisplayedValue(percent);
  }, [setDisplayedValue, percent]);
  return /* @__PURE__ */ jsx("div", { className: `${className ?? ""} w-[${length + strokeWidth}px]`, children: /* @__PURE__ */ jsxs(
    "svg",
    {
      className: "relative z-0",
      width: length + strokeWidth,
      height: strokeWidth,
      viewBox: `0 0 ${length} ${strokeWidth}`,
      children: [
        /* @__PURE__ */ jsx(
          "line",
          {
            className: `${(bgColor == null ? void 0 : bgColor.includes("#")) ? "" : bgColor ?? "stroke-neutral-200"}`,
            x1: 0,
            y1: strokeWidth / 2,
            x2: length,
            y2: strokeWidth / 2,
            fill: "none",
            stroke: `${(bgColor == null ? void 0 : bgColor.includes("#")) ? bgColor : ""}`,
            strokeWidth,
            strokeLinecap: "round"
          }
        ),
        percent && /* @__PURE__ */ jsx(
          "line",
          {
            className: `${(color == null ? void 0 : color.includes("#")) ? "" : color ?? "stroke-primary-500"}`,
            x1: 0,
            y1: strokeWidth / 2,
            x2: displayedValue - 1 ? strokeWidth / 2 + (displayedValue - 1) / 99 * (length - strokeWidth / 2) : 0,
            y2: strokeWidth / 2,
            fill: "none",
            stroke: `${(color == null ? void 0 : color.includes("#")) ? color : ""}`,
            strokeWidth,
            strokeLinecap: "round"
          }
        )
      ]
    }
  ) });
};
export {
  GaugeHorizontal
};
//# sourceMappingURL=GaugeHorizontal.esm.js.map