@yamada-ui/progress/dist/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/progress.tsx
var progress_exports = {};
__export(progress_exports, {
  Progress: () => Progress
});
module.exports = __toCommonJS(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 [ProgressProvider, useProgress] = (0, import_utils.createContext)({
  name: `ProgressStylesContext`,
  errorMessage: `useProgress returned is 'undefined'. Seems you forgot to wrap the components in "<Progress />" `
});
var Progress = (0, import_core.forwardRef)((props, ref) => {
  var _a, _b;
  const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Progress", props);
  const {
    className,
    borderRadius: _borderRadius,
    children,
    hasStripe,
    isAnimation,
    isStripeAnimation,
    max = 100,
    min = 0,
    rounded,
    speed,
    value,
    ...rest
  } = (0, import_core.omitThemeProps)(mergedProps, ["filledTrackColor"]);
  const borderRadius = (_b = _borderRadius != null ? _borderRadius : rounded) != null ? _b : (_a = styles.track) == null ? void 0 : _a.borderRadius;
  const css = {
    overflow: "hidden",
    pos: "relative",
    w: "100%",
    ...styles.track
  };
  const ariaProps = !isAnimation ? {
    "aria-valuemax": max,
    "aria-valuemin": min,
    "aria-valuenow": value,
    role: "meter"
  } : {};
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProgressProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    import_core.ui.div,
    {
      ref,
      className: (0, import_utils.cx)("ui-progress", className),
      borderRadius,
      __css: css,
      ...ariaProps,
      ...rest,
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          ProgressFilledTrack,
          {
            borderRadius,
            hasStripe,
            isAnimation,
            isStripeAnimation,
            max,
            min,
            speed,
            value
          }
        ),
        children
      ]
    }
  ) });
});
Progress.displayName = "Progress";
Progress.__ui__ = "Progress";
var ProgressFilledTrack = ({
  hasStripe,
  isAnimation,
  isStripeAnimation,
  max = 100,
  min = 0,
  speed = "1.4s",
  value = 0,
  ...rest
}) => {
  const percent = (0, import_utils.valueToPercent)(value, min, max);
  const styles = useProgress();
  const stripeAnimation = (0, import_use_animation.useAnimation)({
    duration: typeof speed === "string" ? speed : `${speed}s`,
    iterationCount: "infinite",
    keyframes: {
      "0%": { bgPosition: "1rem 0" },
      "100%": { bgPosition: "0 0" }
    },
    timingFunction: "linear"
  });
  const interpolationAnimation = (0, import_use_animation.useAnimation)({
    duration: typeof speed === "string" ? speed : `${speed}s`,
    iterationCount: "infinite",
    keyframes: {
      "0%": { left: "-40%" },
      "100%": { left: "100%" }
    },
    timingFunction: "ease"
  });
  isStripeAnimation = !isAnimation && hasStripe && isStripeAnimation;
  const css = {
    ...isStripeAnimation ? {
      animation: stripeAnimation
    } : {},
    ...isAnimation ? {
      animation: interpolationAnimation,
      minWidth: "50%",
      position: "absolute",
      willChange: "left"
    } : {}
  };
  const __css = {
    h: "100%",
    w: `${percent}%`,
    ...styles.filledTrack
  };
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { css, "aria-hidden": true, __css, ...rest });
};
ProgressFilledTrack.displayName = "ProgressFilledTrack";
ProgressFilledTrack.__ui__ = "ProgressFilledTrack";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Progress
});
//# sourceMappingURL=progress.js.map