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

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

import { jsx as i, jsxs as h } from "react/jsx-runtime";
import { AnimatedArc as y } from "./AnimatedArc.js";
import { normalizeProgress as f } from "./animatedArcProps.js";
import { cx as u } from "../../styled-system/css/cx.js";
import { cva as l } from "../../styled-system/css/cva.js";
const p = l({
  base: {
    position: "relative",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    overflow: "hidden"
  },
  variants: {
    type: {
      linear: {
        width: "100%",
        borderRadius: "sd.system.dimension.radius.full"
      },
      circular: {}
    },
    size: {
      small: {},
      medium: {},
      large: {}
    },
    color: {
      primary: {},
      subtle: {}
    }
  },
  compoundVariants: [
    {
      type: "linear",
      size: "small",
      css: {
        height: "2px"
      }
    },
    {
      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",
    color: "primary"
  }
}), b = l({
  base: {
    position: "absolute",
    backgroundColor: "sd.reference.color.scale.gray.100"
  },
  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 = l({
  base: {
    position: "absolute"
  },
  variants: {
    type: {
      linear: {
        width: "50%",
        height: "100%",
        animation: "progressIndicatorSlide 1.7s cubic-bezier(0.65, 0.05, 0.36, 1) infinite"
      },
      circular: {
        fill: "none",
        strokeLinecap: "butt",
        transformOrigin: "center"
      }
    },
    size: {
      small: {},
      medium: {},
      large: {}
    },
    color: {
      primary: {
        backgroundColor: "sd.system.color.impression.primary",
        stroke: "sd.system.color.impression.primary"
      },
      subtle: {
        backgroundColor: "sd.reference.color.scale.gray.300",
        stroke: "sd.reference.color.scale.gray.300"
      }
    }
  },
  compoundVariants: []
}), x = (r) => ({
  small: {
    radius: 6,
    strokeWidth: 2
  },
  medium: {
    radius: 8,
    strokeWidth: 6
  },
  large: {
    radius: 20,
    strokeWidth: 8
  }
})[r], v = ({
  type: r = "linear",
  size: e = "medium",
  color: s = "primary",
  animationProgress: n,
  className: d,
  style: c,
  ...m
}) => {
  const a = n == null ? void 0 : f(n);
  if (r === "circular") {
    const { radius: t, strokeWidth: o } = x(e);
    return /* @__PURE__ */ i(
      "div",
      {
        className: u(
          p({ type: r, size: e, color: s }),
          d
        ),
        role: "progressbar",
        "aria-valuetext": "Loading",
        style: c,
        ...m,
        children: /* @__PURE__ */ i(
          "svg",
          {
            viewBox: `0 0 ${t * 2 + o * 2} ${t * 2 + o * 2}`,
            children: /* @__PURE__ */ i(
              y,
              {
                className: g({ type: r, size: e, color: s }),
                radius: t,
                width: o,
                progress: a
              }
            )
          }
        )
      }
    );
  }
  return /* @__PURE__ */ h(
    "div",
    {
      className: u(
        p({ type: r, size: e, color: s }),
        d
      ),
      role: "progressbar",
      "aria-valuetext": "Loading",
      style: c,
      ...m,
      children: [
        /* @__PURE__ */ i("div", { className: b({ type: r, size: e }) }),
        /* @__PURE__ */ i(
          "div",
          {
            className: g({ type: r, size: e, color: s }),
            style: a == null ? void 0 : {
              animation: "none",
              transform: `translateX(${a * 300 - 150}%)`
            }
          }
        )
      ]
    }
  );
};
v.displayName = "ProgressIndicatorIndeterminate";
export {
  v as ProgressIndicatorIndeterminate
};