@yamada-ui/progress/dist/circle-progress.js

Yamada UI progress components

"use client"
"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/circle-progress.tsx
var circle_progress_exports = {};
__export(circle_progress_exports, {
  CircleProgress: () => CircleProgress,
  CircleProgressLabel: () => CircleProgressLabel
});
module.exports = __toCommonJS(circle_progress_exports);
var import_core = require("@yamada-ui/core");
var import_use_animation = require("@yamada-ui/use-animation");
var import_utils = require("@yamada-ui/utils");
var import_jsx_runtime = require("react/jsx-runtime");
var CircleProgress = (0, import_core.forwardRef)(
  (props, ref) => {
    const [styles, { size = "6rem", ...mergedProps }] = (0, import_core.useComponentStyle)(
      "CircleProgress",
      props
    );
    const {
      className,
      boxSize = size,
      children,
      color = "primary",
      isRounded,
      fullRounded = isRounded,
      isAnimation = false,
      max = 100,
      min = 0,
      speed = ["1.4s", "2s"],
      thickness = "0.625rem",
      trackColor = "border",
      value = 0,
      ...rest
    } = (0, import_core.omitThemeProps)(mergedProps);
    const isTransparent = value === 0 && !isAnimation;
    const percent = (0, import_utils.valueToPercent)(value, min, max);
    const interval = !isAnimation ? percent * 2.64 : void 0;
    const animation = (0, import_use_animation.useAnimation)({
      duration: typeof speed[0] === "string" ? speed[0] : `${speed[0]}s`,
      iterationCount: "infinite",
      keyframes: {
        "0%": {
          strokeDasharray: "1, 400",
          strokeDashoffset: "0"
        },
        "50%": {
          strokeDasharray: "400, 400",
          strokeDashoffset: "-100"
        },
        "100%": {
          strokeDasharray: "400, 400",
          strokeDashoffset: "-260"
        }
      },
      timingFunction: "linear"
    });
    const css = {
      ...styles,
      fontSize: "$boxSize",
      vars: [
        { name: "boxSize", token: "sizes", value: boxSize },
        { name: "thickness", token: "sizes", value: thickness }
      ]
    };
    const circleProps = isAnimation ? {
      animation
    } : {
      strokeDasharray: interval == null ? void 0 : `${interval} ${264 - interval}`,
      strokeDashoffset: 66,
      transitionDuration: "0.6s",
      transitionProperty: "stroke-dasharray, stroke",
      transitionTimingFunction: "ease"
    };
    const ariaProps = !isAnimation ? {
      "aria-valuemax": max,
      "aria-valuemin": min,
      "aria-valuenow": value,
      role: "meter"
    } : {};
    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
      import_core.ui.div,
      {
        ref,
        className: (0, import_utils.cx)("ui-circle-progress", className),
        __css: css,
        ...ariaProps,
        ...rest,
        children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
            CircleProgressShape,
            {
              boxSize,
              isAnimation,
              speed,
              children: [
                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CircleProgressCircle, { stroke: trackColor, strokeWidth: "$thickness" }),
                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                  CircleProgressCircle,
                  {
                    opacity: isTransparent ? 0 : void 0,
                    stroke: color,
                    strokeLinecap: fullRounded ? "round" : void 0,
                    strokeWidth: "$thickness",
                    ...circleProps
                  }
                )
              ]
            }
          ),
          children
        ]
      }
    );
  }
);
CircleProgress.displayName = "CircleProgress";
CircleProgress.__ui__ = "CircleProgress";
var CircleProgressCircle = ({ ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.circle, { cx: 50, cy: 50, fill: "transparent", r: 42, ...rest });
CircleProgressCircle.displayName = "CircleProgressCircle";
CircleProgressCircle.__ui__ = "CircleProgressCircle";
var CircleProgressShape = ({
  boxSize,
  isAnimation,
  speed,
  ...rest
}) => {
  const animation = (0, import_use_animation.useAnimation)({
    duration: typeof speed[1] === "string" ? speed[1] : `${speed[1]}s`,
    iterationCount: "infinite",
    keyframes: {
      "0%": {
        transform: "rotate(0deg)"
      },
      "100%": {
        transform: "rotate(360deg)"
      }
    },
    timingFunction: "linear"
  });
  const css = {
    boxSize,
    display: "block",
    ...isAnimation ? { animation } : {}
  };
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.svg, { "aria-hidden": true, viewBox: "0 0 100 100", __css: css, ...rest });
};
CircleProgressShape.displayName = "CircleProgressShape";
CircleProgressShape.__ui__ = "CircleProgressShape";
var CircleProgressLabel = (0, import_core.ui)("span", {
  baseStyle: {
    fontSize: "0.25em",
    left: "50%",
    position: "absolute",
    textAlign: "center",
    top: "50%",
    transform: "translate(-50%, -50%)",
    width: "100%"
  }
});
CircleProgressLabel.displayName = "CircleProgressLabel";
CircleProgressLabel.__ui__ = "CircleProgressLabel";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  CircleProgress,
  CircleProgressLabel
});
//# sourceMappingURL=circle-progress.js.map