@yamada-ui/progress/dist/chunk-QN66U6FL.mjs

Yamada UI progress components

"use client"

// src/circle-progress.tsx
import {
  forwardRef,
  omitThemeProps,
  ui,
  useComponentStyle
} from "@yamada-ui/core";
import { useAnimation } from "@yamada-ui/use-animation";
import { cx, valueToPercent } from "@yamada-ui/utils";
import { jsx, jsxs } from "react/jsx-runtime";
var CircleProgress = forwardRef(
  (props, ref) => {
    const [styles, { size = "6rem", ...mergedProps }] = 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
    } = omitThemeProps(mergedProps);
    const isTransparent = value === 0 && !isAnimation;
    const percent = valueToPercent(value, min, max);
    const interval = !isAnimation ? percent * 2.64 : void 0;
    const 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__ */ jsxs(
      ui.div,
      {
        ref,
        className: cx("ui-circle-progress", className),
        __css: css,
        ...ariaProps,
        ...rest,
        children: [
          /* @__PURE__ */ jsxs(
            CircleProgressShape,
            {
              boxSize,
              isAnimation,
              speed,
              children: [
                /* @__PURE__ */ jsx(CircleProgressCircle, { stroke: trackColor, strokeWidth: "$thickness" }),
                /* @__PURE__ */ 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__ */ jsx(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 = 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__ */ jsx(ui.svg, { "aria-hidden": true, viewBox: "0 0 100 100", __css: css, ...rest });
};
CircleProgressShape.displayName = "CircleProgressShape";
CircleProgressShape.__ui__ = "CircleProgressShape";
var CircleProgressLabel = 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";

export {
  CircleProgress,
  CircleProgressLabel
};
//# sourceMappingURL=chunk-QN66U6FL.mjs.map