@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 p } from "react/jsx-runtime";
import { AnimatedArc as h } from "./AnimatedArc.js";
import { cx as c } from "../../styled-system/css/cx.js";
import { cva as o } from "../../styled-system/css/cva.js";
const m = o({
  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"
  }
}), g = o({
  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: []
}), u = o({
  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: []
}), y = (e) => ({
  small: {
    radius: 6,
    strokeWidth: 2
  },
  medium: {
    radius: 8,
    strokeWidth: 6
  },
  large: {
    radius: 20,
    strokeWidth: 8
  }
})[e], f = ({
  type: e = "linear",
  size: r = "medium",
  color: s = "primary",
  className: l,
  style: n,
  ...d
}) => {
  if (e === "circular") {
    const { radius: a, strokeWidth: t } = y(r);
    return /* @__PURE__ */ i(
      "div",
      {
        className: c(
          m({ type: e, size: r, color: s }),
          l
        ),
        role: "progressbar",
        "aria-valuetext": "Loading",
        style: n,
        ...d,
        children: /* @__PURE__ */ i(
          "svg",
          {
            viewBox: `0 0 ${a * 2 + t * 2} ${a * 2 + t * 2}`,
            children: /* @__PURE__ */ i(
              h,
              {
                className: u({ type: e, size: r, color: s }),
                radius: a,
                width: t
              }
            )
          }
        )
      }
    );
  }
  return /* @__PURE__ */ p(
    "div",
    {
      className: c(
        m({ type: e, size: r, color: s }),
        l
      ),
      role: "progressbar",
      "aria-valuetext": "Loading",
      style: n,
      ...d,
      children: [
        /* @__PURE__ */ i("div", { className: g({ type: e, size: r }) }),
        /* @__PURE__ */ i("div", { className: u({ type: e, size: r, color: s }) })
      ]
    }
  );
};
f.displayName = "ProgressIndicatorIndeterminate";
export {
  f as ProgressIndicatorIndeterminate
};