@serendie/ui/dist/components/ProgressIndicator/ProgressIndicator.js

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

import { jsx as a, jsxs as f } from "react/jsx-runtime";
import { useMemo as v } from "react";
import { describeArc as b } from "./util.js";
import { cx as h } from "../../styled-system/css/cx.js";
import { cva as n } from "../../styled-system/css/cva.js";
const u = n({
  base: {
    position: "relative",
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  },
  variants: {
    type: {
      linear: {
        width: "100%"
      },
      circular: {}
    },
    size: {
      small: {},
      medium: {},
      large: {}
    }
  },
  compoundVariants: [
    {
      type: "linear",
      size: "small",
      css: {
        height: "4px"
      }
    },
    {
      type: "linear",
      size: "medium",
      css: {
        height: "4px"
      }
    },
    {
      type: "linear",
      size: "large",
      css: {
        height: "8px"
      }
    },
    {
      type: "circular",
      size: "small",
      css: {
        width: "12px",
        height: "12px"
      }
    },
    {
      type: "circular",
      size: "medium",
      css: {
        width: "16px",
        height: "16px"
      }
    },
    {
      type: "circular",
      size: "large",
      css: {
        width: "40px",
        height: "40px"
      }
    }
  ],
  defaultVariants: {
    type: "linear",
    size: "medium"
  }
}), p = n({
  base: {
    position: "absolute",
    backgroundColor: "sd.system.color.component.surfaceContainerDim",
    overflow: "hidden"
  },
  variants: {
    type: {
      linear: {
        width: "calc(100% - 4px)",
        height: "100%",
        borderRadius: "sd.system.dimension.radius.full"
      },
      circular: {
        width: "100%",
        height: "100%",
        borderRadius: "50%",
        fill: "none"
      }
    },
    size: {
      small: {},
      medium: {},
      large: {}
    }
  },
  compoundVariants: []
}), g = n({
  base: {
    position: "absolute",
    backgroundColor: "sd.system.color.impression.primary"
  },
  variants: {
    type: {
      linear: {
        left: "0px",
        height: "100%",
        borderRadius: "0"
      },
      circular: {
        width: "100%",
        height: "100%",
        fill: "none",
        stroke: "sd.system.color.impression.primary",
        strokeLinecap: "butt",
        transformOrigin: "center"
      }
    },
    size: {
      small: {},
      medium: {},
      large: {}
    }
  },
  compoundVariants: []
}), w = (t) => ({
  small: { radius: 8, strokeWidth: 2 },
  medium: { radius: 12, strokeWidth: 4 },
  large: { radius: 24, strokeWidth: 4 }
})[t], k = ({
  value: t = 0,
  max: o = 1,
  type: i = "linear",
  size: s = "medium",
  className: c,
  style: d,
  ...m
}) => {
  const l = Math.min(Math.max(t / o * 100, 0), 100);
  if (i === "circular") {
    const { radius: r, strokeWidth: e } = w(s), x = v(() => {
      const y = l / 100 * 360 - 1e-5;
      return b(
        r + e,
        r + e,
        r,
        0,
        y
      );
    }, [l, r, e]);
    return /* @__PURE__ */ a(
      "div",
      {
        className: h(u({ type: i, size: s }), c),
        role: "progressbar",
        "aria-valuenow": t,
        "aria-valuemin": 0,
        "aria-valuemax": o,
        style: d,
        ...m,
        children: /* @__PURE__ */ f(
          "svg",
          {
            viewBox: `0 0 ${r * 2 + e * 2} ${r * 2 + e * 2}`,
            style: { width: "100%", height: "100%" },
            children: [
              /* @__PURE__ */ a(
                "circle",
                {
                  cx: r + e,
                  cy: r + e,
                  r,
                  className: p({ type: i, size: s }),
                  stroke: "var(--colors-sd-system-color-component-surface-container-dim)",
                  strokeWidth: e
                }
              ),
              l > 0 && /* @__PURE__ */ a(
                "path",
                {
                  d: x,
                  className: g({ type: i, size: s }),
                  strokeWidth: e * 2
                }
              )
            ]
          }
        )
      }
    );
  }
  return /* @__PURE__ */ a(
    "div",
    {
      className: h(u({ type: i, size: s }), c),
      role: "progressbar",
      "aria-valuenow": t,
      "aria-valuemin": 0,
      "aria-valuemax": o,
      style: d,
      ...m,
      children: /* @__PURE__ */ a("div", { className: p({ type: i, size: s }), children: /* @__PURE__ */ a(
        "div",
        {
          className: g({ type: i, size: s }),
          style: {
            width: `${l}%`
          }
        }
      ) })
    }
  );
};
k.displayName = "ProgressIndicator";
export {
  k as ProgressIndicator
};