@yamada-ui/progress 0.0.0-dev-20230603042803

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Hirotomo Yamada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @yamada-ui/progress
+
+## Installation
+
+```sh
+$ pnpm add @yamada-ui/progress
+```
+
+or
+
+```sh
+$ yarn add @yamada-ui/progress
+```
+
+or
+
+```sh
+$ npm install @yamada-ui/progress
+```
+
+## Contribution
+
+Wouldn't you like to contribute? That's amazing! We have prepared a [contribution guide](https://github.com/hirotomoyamada/yamada-ui/blob/main/CONTRIBUTING.md) to assist you.
+
+## Licence
+
+This package is licensed under the terms of the
+[MIT license](https://github.com/hirotomoyamada/yamada-ui/blob/main/LICENSE).

package/dist/chunk-ENCTHIX3.mjs

@@ -0,0 +1,119 @@
+// src/circle-progress.tsx
+import { ui, forwardRef } from "@yamada-ui/core";
+import { useAnimation } from "@yamada-ui/use-animation";
+import { useToken } from "@yamada-ui/use-token";
+import { useValue } from "@yamada-ui/use-value";
+import { cx, valueToPercent } from "@yamada-ui/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CircleProgress = forwardRef(
+  ({
+    className,
+    children,
+    size = "6rem",
+    thickness = "0.625rem",
+    color = "primary",
+    trackColor = "border",
+    value = 0,
+    min = 0,
+    max = 100,
+    isAnimation = false,
+    isRounded,
+    speed = ["1.4s", "2s"],
+    ...rest
+  }, ref) => {
+    var _a, _b;
+    size = (_a = useToken("sizes", useValue(size))) != null ? _a : size;
+    thickness = (_b = useToken("sizes", useValue(thickness))) != null ? _b : thickness;
+    const isTransparent = value === 0 && !isAnimation;
+    const percent = valueToPercent(value, min, max);
+    const interval = !isAnimation ? percent * 2.64 : void 0;
+    const animation = useAnimation({
+      keyframes: {
+        "0%": {
+          strokeDasharray: "1, 400",
+          strokeDashoffset: "0"
+        },
+        "50%": {
+          strokeDasharray: "400, 400",
+          strokeDashoffset: "-100"
+        },
+        "100%": {
+          strokeDasharray: "400, 400",
+          strokeDashoffset: "-260"
+        }
+      },
+      duration: typeof speed[0] === "string" ? speed[0] : `${speed[0]}s`,
+      iterationCount: "infinite",
+      timingFunction: "linear"
+    });
+    const css = {
+      display: "inline-block",
+      position: "relative",
+      verticalAlign: "middle",
+      fontSize: size
+    };
+    const props = isAnimation ? {
+      animation
+    } : {
+      strokeDashoffset: 66,
+      strokeDasharray: interval == null ? void 0 : `${interval} ${264 - interval}`,
+      transitionProperty: "stroke-dasharray, stroke",
+      transitionDuration: "0.6s",
+      transitionTimingFunction: "ease"
+    };
+    return /* @__PURE__ */ jsxs(ui.div, { ref, className: cx("ui-circle-progress", className), __css: css, ...rest, children: [
+      /* @__PURE__ */ jsxs(Shape, { size, isAnimation, speed, children: [
+        /* @__PURE__ */ jsx(Circle, { stroke: trackColor, strokeWidth: thickness }),
+        /* @__PURE__ */ jsx(
+          Circle,
+          {
+            stroke: color,
+            strokeWidth: thickness,
+            strokeLinecap: isRounded ? "round" : void 0,
+            opacity: isTransparent ? 0 : void 0,
+            ...props
+          }
+        )
+      ] }),
+      children
+    ] });
+  }
+);
+var Circle = (rest) => /* @__PURE__ */ jsx(ui.circle, { cx: 50, cy: 50, r: 42, fill: "transparent", ...rest });
+var Shape = ({ size, isAnimation, speed, ...rest }) => {
+  const animation = useAnimation({
+    keyframes: {
+      "0%": {
+        transform: "rotate(0deg)"
+      },
+      "100%": {
+        transform: "rotate(360deg)"
+      }
+    },
+    duration: typeof speed[1] === "string" ? speed[1] : `${speed[1]}s`,
+    iterationCount: "infinite",
+    timingFunction: "linear"
+  });
+  const css = {
+    display: "block",
+    boxSize: size,
+    ...isAnimation ? { animation } : {}
+  };
+  return /* @__PURE__ */ jsx(ui.svg, { viewBox: "0 0 100 100", __css: css, ...rest });
+};
+var CircleProgressLabel = ui("span", {
+  baseStyle: {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: "100%",
+    fontSize: "0.25em",
+    textAlign: "center"
+  }
+});
+
+export {
+  CircleProgress,
+  CircleProgressLabel
+};

package/dist/chunk-RBJMSLYD.mjs

@@ -0,0 +1,118 @@
+// src/progress.tsx
+import {
+  ui,
+  forwardRef,
+  useMultiComponentStyle,
+  omitThemeProps
+} from "@yamada-ui/core";
+import { useAnimation } from "@yamada-ui/use-animation";
+import { createContext, cx, valueToPercent } from "@yamada-ui/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+var [ProgressProvider, useProgress] = createContext({
+  name: `ProgressStylesContext`,
+  errorMessage: `useProgress returned is 'undefined'. Seems you forgot to wrap the components in "<Progress />" `
+});
+var Progress = forwardRef((props, ref) => {
+  var _a;
+  const [styles, mergedProps] = useMultiComponentStyle("Progress", props);
+  const {
+    className,
+    children,
+    value,
+    min,
+    max,
+    hasStripe,
+    isStripeAnimation,
+    isAnimation,
+    speed,
+    borderRadius: _borderRadius,
+    rounded,
+    ...rest
+  } = omitThemeProps(mergedProps);
+  const borderRadius = (_a = _borderRadius != null ? _borderRadius : rounded) != null ? _a : styles.track.borderRadius;
+  const css = {
+    w: "100%",
+    overflow: "hidden",
+    pos: "relative",
+    ...styles.track
+  };
+  return /* @__PURE__ */ jsx(ProgressProvider, { value: styles, children: /* @__PURE__ */ jsxs(
+    ui.div,
+    {
+      ref,
+      className: cx("ui-progress", className),
+      __css: css,
+      borderRadius,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          ProgressFilledTrack,
+          {
+            min,
+            max,
+            value,
+            hasStripe,
+            isStripeAnimation,
+            isAnimation,
+            speed,
+            borderRadius
+          }
+        ),
+        children
+      ]
+    }
+  ) });
+});
+var ProgressFilledTrack = ({
+  value = 0,
+  min = 0,
+  max = 100,
+  hasStripe,
+  isStripeAnimation,
+  isAnimation,
+  speed = "1.4s",
+  ...rest
+}) => {
+  const percent = valueToPercent(value, min, max);
+  const styles = useProgress();
+  const stripeAnimation = useAnimation({
+    keyframes: {
+      "0%": { bgPosition: "1rem 0" },
+      "100%": { bgPosition: "0 0" }
+    },
+    duration: typeof speed === "string" ? speed : `${speed}s`,
+    iterationCount: "infinite",
+    timingFunction: "linear"
+  });
+  const interpolationAnimation = useAnimation({
+    keyframes: {
+      "0%": { left: "-40%" },
+      "100%": { left: "100%" }
+    },
+    duration: typeof speed === "string" ? speed : `${speed}s`,
+    iterationCount: "infinite",
+    timingFunction: "ease"
+  });
+  isStripeAnimation = !isAnimation && hasStripe && isStripeAnimation;
+  const css = {
+    ...isStripeAnimation ? {
+      animation: stripeAnimation
+    } : {},
+    ...isAnimation ? {
+      position: "absolute",
+      willChange: "left",
+      minWidth: "50%",
+      animation: interpolationAnimation
+    } : {}
+  };
+  const __css = {
+    w: `${percent}%`,
+    h: "100%",
+    ...styles.filledTrack
+  };
+  return /* @__PURE__ */ jsx(ui.div, { css, __css, ...rest });
+};
+
+export {
+  Progress
+};

package/dist/circle-progress.d.ts

@@ -0,0 +1,20 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, CSSUIProps } from '@yamada-ui/core';
+
+type CircleProgressOptions = {
+    size?: CSSUIProps['boxSize'];
+    thickness?: CSSUIProps['width'];
+    color?: CSSUIProps['color'];
+    trackColor?: CSSUIProps['color'];
+    value?: number;
+    min?: number;
+    max?: number;
+    isRounded?: boolean;
+    isAnimation?: boolean;
+    speed?: [string | number, string | number];
+};
+type CircleProgressProps = Omit<HTMLUIProps<'div'>, 'color'> & CircleProgressOptions;
+declare const CircleProgress: _yamada_ui_core.Component<"div", CircleProgressProps>;
+declare const CircleProgressLabel: _yamada_ui_core.UIComponent<"span", {}>;
+
+export { CircleProgress, CircleProgressLabel, CircleProgressProps };

package/dist/circle-progress.js

@@ -0,0 +1,144 @@
+"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_use_token = require("@yamada-ui/use-token");
+var import_use_value = require("@yamada-ui/use-value");
+var import_utils = require("@yamada-ui/utils");
+var import_jsx_runtime = require("react/jsx-runtime");
+var CircleProgress = (0, import_core.forwardRef)(
+  ({
+    className,
+    children,
+    size = "6rem",
+    thickness = "0.625rem",
+    color = "primary",
+    trackColor = "border",
+    value = 0,
+    min = 0,
+    max = 100,
+    isAnimation = false,
+    isRounded,
+    speed = ["1.4s", "2s"],
+    ...rest
+  }, ref) => {
+    var _a, _b;
+    size = (_a = (0, import_use_token.useToken)("sizes", (0, import_use_value.useValue)(size))) != null ? _a : size;
+    thickness = (_b = (0, import_use_token.useToken)("sizes", (0, import_use_value.useValue)(thickness))) != null ? _b : thickness;
+    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)({
+      keyframes: {
+        "0%": {
+          strokeDasharray: "1, 400",
+          strokeDashoffset: "0"
+        },
+        "50%": {
+          strokeDasharray: "400, 400",
+          strokeDashoffset: "-100"
+        },
+        "100%": {
+          strokeDasharray: "400, 400",
+          strokeDashoffset: "-260"
+        }
+      },
+      duration: typeof speed[0] === "string" ? speed[0] : `${speed[0]}s`,
+      iterationCount: "infinite",
+      timingFunction: "linear"
+    });
+    const css = {
+      display: "inline-block",
+      position: "relative",
+      verticalAlign: "middle",
+      fontSize: size
+    };
+    const props = isAnimation ? {
+      animation
+    } : {
+      strokeDashoffset: 66,
+      strokeDasharray: interval == null ? void 0 : `${interval} ${264 - interval}`,
+      transitionProperty: "stroke-dasharray, stroke",
+      transitionDuration: "0.6s",
+      transitionTimingFunction: "ease"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.ui.div, { ref, className: (0, import_utils.cx)("ui-circle-progress", className), __css: css, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Shape, { size, isAnimation, speed, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Circle, { stroke: trackColor, strokeWidth: thickness }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Circle,
+          {
+            stroke: color,
+            strokeWidth: thickness,
+            strokeLinecap: isRounded ? "round" : void 0,
+            opacity: isTransparent ? 0 : void 0,
+            ...props
+          }
+        )
+      ] }),
+      children
+    ] });
+  }
+);
+var Circle = (rest) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.circle, { cx: 50, cy: 50, r: 42, fill: "transparent", ...rest });
+var Shape = ({ size, isAnimation, speed, ...rest }) => {
+  const animation = (0, import_use_animation.useAnimation)({
+    keyframes: {
+      "0%": {
+        transform: "rotate(0deg)"
+      },
+      "100%": {
+        transform: "rotate(360deg)"
+      }
+    },
+    duration: typeof speed[1] === "string" ? speed[1] : `${speed[1]}s`,
+    iterationCount: "infinite",
+    timingFunction: "linear"
+  });
+  const css = {
+    display: "block",
+    boxSize: size,
+    ...isAnimation ? { animation } : {}
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.svg, { viewBox: "0 0 100 100", __css: css, ...rest });
+};
+var CircleProgressLabel = (0, import_core.ui)("span", {
+  baseStyle: {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: "100%",
+    fontSize: "0.25em",
+    textAlign: "center"
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CircleProgress,
+  CircleProgressLabel
+});

package/dist/circle-progress.mjs

@@ -0,0 +1,8 @@
+import {
+  CircleProgress,
+  CircleProgressLabel
+} from "./chunk-ENCTHIX3.mjs";
+export {
+  CircleProgress,
+  CircleProgressLabel
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { Progress, ProgressProps } from './progress.js';
+export { CircleProgress, CircleProgressLabel, CircleProgressProps } from './circle-progress.js';
+import '@yamada-ui/core';

package/dist/index.js

@@ -0,0 +1,258 @@
+"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/index.ts
+var src_exports = {};
+__export(src_exports, {
+  CircleProgress: () => CircleProgress,
+  CircleProgressLabel: () => CircleProgressLabel,
+  Progress: () => Progress
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/progress.tsx
+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;
+  const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Progress", props);
+  const {
+    className,
+    children,
+    value,
+    min,
+    max,
+    hasStripe,
+    isStripeAnimation,
+    isAnimation,
+    speed,
+    borderRadius: _borderRadius,
+    rounded,
+    ...rest
+  } = (0, import_core.omitThemeProps)(mergedProps);
+  const borderRadius = (_a = _borderRadius != null ? _borderRadius : rounded) != null ? _a : styles.track.borderRadius;
+  const css = {
+    w: "100%",
+    overflow: "hidden",
+    pos: "relative",
+    ...styles.track
+  };
+  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),
+      __css: css,
+      borderRadius,
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          ProgressFilledTrack,
+          {
+            min,
+            max,
+            value,
+            hasStripe,
+            isStripeAnimation,
+            isAnimation,
+            speed,
+            borderRadius
+          }
+        ),
+        children
+      ]
+    }
+  ) });
+});
+var ProgressFilledTrack = ({
+  value = 0,
+  min = 0,
+  max = 100,
+  hasStripe,
+  isStripeAnimation,
+  isAnimation,
+  speed = "1.4s",
+  ...rest
+}) => {
+  const percent = (0, import_utils.valueToPercent)(value, min, max);
+  const styles = useProgress();
+  const stripeAnimation = (0, import_use_animation.useAnimation)({
+    keyframes: {
+      "0%": { bgPosition: "1rem 0" },
+      "100%": { bgPosition: "0 0" }
+    },
+    duration: typeof speed === "string" ? speed : `${speed}s`,
+    iterationCount: "infinite",
+    timingFunction: "linear"
+  });
+  const interpolationAnimation = (0, import_use_animation.useAnimation)({
+    keyframes: {
+      "0%": { left: "-40%" },
+      "100%": { left: "100%" }
+    },
+    duration: typeof speed === "string" ? speed : `${speed}s`,
+    iterationCount: "infinite",
+    timingFunction: "ease"
+  });
+  isStripeAnimation = !isAnimation && hasStripe && isStripeAnimation;
+  const css = {
+    ...isStripeAnimation ? {
+      animation: stripeAnimation
+    } : {},
+    ...isAnimation ? {
+      position: "absolute",
+      willChange: "left",
+      minWidth: "50%",
+      animation: interpolationAnimation
+    } : {}
+  };
+  const __css = {
+    w: `${percent}%`,
+    h: "100%",
+    ...styles.filledTrack
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { css, __css, ...rest });
+};
+
+// src/circle-progress.tsx
+var import_core2 = require("@yamada-ui/core");
+var import_use_animation2 = require("@yamada-ui/use-animation");
+var import_use_token = require("@yamada-ui/use-token");
+var import_use_value = require("@yamada-ui/use-value");
+var import_utils2 = require("@yamada-ui/utils");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var CircleProgress = (0, import_core2.forwardRef)(
+  ({
+    className,
+    children,
+    size = "6rem",
+    thickness = "0.625rem",
+    color = "primary",
+    trackColor = "border",
+    value = 0,
+    min = 0,
+    max = 100,
+    isAnimation = false,
+    isRounded,
+    speed = ["1.4s", "2s"],
+    ...rest
+  }, ref) => {
+    var _a, _b;
+    size = (_a = (0, import_use_token.useToken)("sizes", (0, import_use_value.useValue)(size))) != null ? _a : size;
+    thickness = (_b = (0, import_use_token.useToken)("sizes", (0, import_use_value.useValue)(thickness))) != null ? _b : thickness;
+    const isTransparent = value === 0 && !isAnimation;
+    const percent = (0, import_utils2.valueToPercent)(value, min, max);
+    const interval = !isAnimation ? percent * 2.64 : void 0;
+    const animation = (0, import_use_animation2.useAnimation)({
+      keyframes: {
+        "0%": {
+          strokeDasharray: "1, 400",
+          strokeDashoffset: "0"
+        },
+        "50%": {
+          strokeDasharray: "400, 400",
+          strokeDashoffset: "-100"
+        },
+        "100%": {
+          strokeDasharray: "400, 400",
+          strokeDashoffset: "-260"
+        }
+      },
+      duration: typeof speed[0] === "string" ? speed[0] : `${speed[0]}s`,
+      iterationCount: "infinite",
+      timingFunction: "linear"
+    });
+    const css = {
+      display: "inline-block",
+      position: "relative",
+      verticalAlign: "middle",
+      fontSize: size
+    };
+    const props = isAnimation ? {
+      animation
+    } : {
+      strokeDashoffset: 66,
+      strokeDasharray: interval == null ? void 0 : `${interval} ${264 - interval}`,
+      transitionProperty: "stroke-dasharray, stroke",
+      transitionDuration: "0.6s",
+      transitionTimingFunction: "ease"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_core2.ui.div, { ref, className: (0, import_utils2.cx)("ui-circle-progress", className), __css: css, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Shape, { size, isAnimation, speed, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Circle, { stroke: trackColor, strokeWidth: thickness }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          Circle,
+          {
+            stroke: color,
+            strokeWidth: thickness,
+            strokeLinecap: isRounded ? "round" : void 0,
+            opacity: isTransparent ? 0 : void 0,
+            ...props
+          }
+        )
+      ] }),
+      children
+    ] });
+  }
+);
+var Circle = (rest) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.circle, { cx: 50, cy: 50, r: 42, fill: "transparent", ...rest });
+var Shape = ({ size, isAnimation, speed, ...rest }) => {
+  const animation = (0, import_use_animation2.useAnimation)({
+    keyframes: {
+      "0%": {
+        transform: "rotate(0deg)"
+      },
+      "100%": {
+        transform: "rotate(360deg)"
+      }
+    },
+    duration: typeof speed[1] === "string" ? speed[1] : `${speed[1]}s`,
+    iterationCount: "infinite",
+    timingFunction: "linear"
+  });
+  const css = {
+    display: "block",
+    boxSize: size,
+    ...isAnimation ? { animation } : {}
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.svg, { viewBox: "0 0 100 100", __css: css, ...rest });
+};
+var CircleProgressLabel = (0, import_core2.ui)("span", {
+  baseStyle: {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: "100%",
+    fontSize: "0.25em",
+    textAlign: "center"
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CircleProgress,
+  CircleProgressLabel,
+  Progress
+});

package/dist/index.mjs

@@ -0,0 +1,12 @@
+import {
+  CircleProgress,
+  CircleProgressLabel
+} from "./chunk-ENCTHIX3.mjs";
+import {
+  Progress
+} from "./chunk-RBJMSLYD.mjs";
+export {
+  CircleProgress,
+  CircleProgressLabel,
+  Progress
+};

package/dist/progress.d.ts

@@ -0,0 +1,16 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, ThemeProps } from '@yamada-ui/core';
+
+type ProgressOptions = {
+    value?: number;
+    min?: number;
+    max?: number;
+    hasStripe?: boolean;
+    isStripeAnimation?: boolean;
+    isAnimation?: boolean;
+    speed?: string | number;
+};
+type ProgressProps = HTMLUIProps<'div'> & ThemeProps<'Progress'> & ProgressOptions;
+declare const Progress: _yamada_ui_core.Component<"div", ProgressProps>;
+
+export { Progress, ProgressProps };

package/dist/progress.js

@@ -0,0 +1,137 @@
+"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;
+  const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Progress", props);
+  const {
+    className,
+    children,
+    value,
+    min,
+    max,
+    hasStripe,
+    isStripeAnimation,
+    isAnimation,
+    speed,
+    borderRadius: _borderRadius,
+    rounded,
+    ...rest
+  } = (0, import_core.omitThemeProps)(mergedProps);
+  const borderRadius = (_a = _borderRadius != null ? _borderRadius : rounded) != null ? _a : styles.track.borderRadius;
+  const css = {
+    w: "100%",
+    overflow: "hidden",
+    pos: "relative",
+    ...styles.track
+  };
+  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),
+      __css: css,
+      borderRadius,
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          ProgressFilledTrack,
+          {
+            min,
+            max,
+            value,
+            hasStripe,
+            isStripeAnimation,
+            isAnimation,
+            speed,
+            borderRadius
+          }
+        ),
+        children
+      ]
+    }
+  ) });
+});
+var ProgressFilledTrack = ({
+  value = 0,
+  min = 0,
+  max = 100,
+  hasStripe,
+  isStripeAnimation,
+  isAnimation,
+  speed = "1.4s",
+  ...rest
+}) => {
+  const percent = (0, import_utils.valueToPercent)(value, min, max);
+  const styles = useProgress();
+  const stripeAnimation = (0, import_use_animation.useAnimation)({
+    keyframes: {
+      "0%": { bgPosition: "1rem 0" },
+      "100%": { bgPosition: "0 0" }
+    },
+    duration: typeof speed === "string" ? speed : `${speed}s`,
+    iterationCount: "infinite",
+    timingFunction: "linear"
+  });
+  const interpolationAnimation = (0, import_use_animation.useAnimation)({
+    keyframes: {
+      "0%": { left: "-40%" },
+      "100%": { left: "100%" }
+    },
+    duration: typeof speed === "string" ? speed : `${speed}s`,
+    iterationCount: "infinite",
+    timingFunction: "ease"
+  });
+  isStripeAnimation = !isAnimation && hasStripe && isStripeAnimation;
+  const css = {
+    ...isStripeAnimation ? {
+      animation: stripeAnimation
+    } : {},
+    ...isAnimation ? {
+      position: "absolute",
+      willChange: "left",
+      minWidth: "50%",
+      animation: interpolationAnimation
+    } : {}
+  };
+  const __css = {
+    w: `${percent}%`,
+    h: "100%",
+    ...styles.filledTrack
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { css, __css, ...rest });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Progress
+});

package/dist/progress.mjs

@@ -0,0 +1,6 @@
+import {
+  Progress
+} from "./chunk-RBJMSLYD.mjs";
+export {
+  Progress
+};

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@yamada-ui/progress",
+  "version": "0.0.0-dev-20230603042803",
+  "description": "Yamada UI progress components",
+  "keywords": [
+    "yamada",
+    "yamada ui",
+    "react",
+    "emotion",
+    "component",
+    "progress",
+    "ui",
+    "uikit",
+    "styled",
+    "style-props",
+    "styled-component",
+    "css-in-js"
+  ],
+  "author": "Hirotomo Yamada <hirotomo.yamada@avap.co.jp>",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hirotomoyamada/yamada-ui",
+    "directory": "packages/components/progress"
+  },
+  "bugs": {
+    "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
+  },
+  "dependencies": {
+    "@yamada-ui/core": "0.0.0-dev-20230603042803",
+    "@yamada-ui/utils": "0.1.0",
+    "@yamada-ui/use-value": "0.0.0-dev-20230603042803",
+    "@yamada-ui/use-token": "0.0.0-dev-20230603042803",
+    "@yamada-ui/use-animation": "0.0.0-dev-20230603042803"
+  },
+  "devDependencies": {
+    "react": "^18.0.0",
+    "clean-package": "2.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "pnpm build:fast -- --watch",
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "gen:docs": "tsx ../../../scripts/generate-docs"
+  }
+}