@yamada-ui/progress 1.1.4-dev-20241005224505 → 1.1.4-dev-20241006032009

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,10 +2,10 @@
2
2
 
3
3
  // src/progress.tsx
4
4
  import {
5
- ui,
6
5
  forwardRef,
7
- useComponentMultiStyle,
8
- omitThemeProps
6
+ omitThemeProps,
7
+ ui,
8
+ useComponentMultiStyle
9
9
  } from "@yamada-ui/core";
10
10
  import { useAnimation } from "@yamada-ui/use-animation";
11
11
  import { createContext, cx, valueToPercent } from "@yamada-ui/utils";
@@ -19,23 +19,23 @@ var Progress = forwardRef((props, ref) => {
19
19
  const [styles, mergedProps] = useComponentMultiStyle("Progress", props);
20
20
  const {
21
21
  className,
22
+ borderRadius: _borderRadius,
22
23
  children,
23
- value,
24
- min,
25
- max,
26
24
  hasStripe,
27
- isStripeAnimation,
28
25
  isAnimation,
29
- speed,
30
- borderRadius: _borderRadius,
26
+ isStripeAnimation,
27
+ max,
28
+ min,
31
29
  rounded,
30
+ speed,
31
+ value,
32
32
  ...rest
33
33
  } = omitThemeProps(mergedProps, ["filledTrackColor"]);
34
34
  const borderRadius = (_b = _borderRadius != null ? _borderRadius : rounded) != null ? _b : (_a = styles.track) == null ? void 0 : _a.borderRadius;
35
35
  const css = {
36
- w: "100%",
37
36
  overflow: "hidden",
38
37
  pos: "relative",
38
+ w: "100%",
39
39
  ...styles.track
40
40
  };
41
41
  return /* @__PURE__ */ jsx(ProgressProvider, { value: styles, children: /* @__PURE__ */ jsxs(
@@ -43,21 +43,21 @@ var Progress = forwardRef((props, ref) => {
43
43
  {
44
44
  ref,
45
45
  className: cx("ui-progress", className),
46
- __css: css,
47
46
  borderRadius,
47
+ __css: css,
48
48
  ...rest,
49
49
  children: [
50
50
  /* @__PURE__ */ jsx(
51
51
  ProgressFilledTrack,
52
52
  {
53
- min,
54
- max,
55
- value,
53
+ borderRadius,
56
54
  hasStripe,
57
- isStripeAnimation,
58
55
  isAnimation,
56
+ isStripeAnimation,
57
+ max,
58
+ min,
59
59
  speed,
60
- borderRadius
60
+ value
61
61
  }
62
62
  ),
63
63
  children
@@ -68,33 +68,33 @@ var Progress = forwardRef((props, ref) => {
68
68
  Progress.displayName = "Progress";
69
69
  Progress.__ui__ = "Progress";
70
70
  var ProgressFilledTrack = ({
71
- value = 0,
72
- min = 0,
73
- max = 100,
74
71
  hasStripe,
75
- isStripeAnimation,
76
72
  isAnimation,
73
+ isStripeAnimation,
74
+ max = 100,
75
+ min = 0,
77
76
  speed = "1.4s",
77
+ value = 0,
78
78
  ...rest
79
79
  }) => {
80
80
  const percent = valueToPercent(value, min, max);
81
81
  const styles = useProgress();
82
82
  const stripeAnimation = useAnimation({
83
+ duration: typeof speed === "string" ? speed : `${speed}s`,
84
+ iterationCount: "infinite",
83
85
  keyframes: {
84
86
  "0%": { bgPosition: "1rem 0" },
85
87
  "100%": { bgPosition: "0 0" }
86
88
  },
87
- duration: typeof speed === "string" ? speed : `${speed}s`,
88
- iterationCount: "infinite",
89
89
  timingFunction: "linear"
90
90
  });
91
91
  const interpolationAnimation = useAnimation({
92
+ duration: typeof speed === "string" ? speed : `${speed}s`,
93
+ iterationCount: "infinite",
92
94
  keyframes: {
93
95
  "0%": { left: "-40%" },
94
96
  "100%": { left: "100%" }
95
97
  },
96
- duration: typeof speed === "string" ? speed : `${speed}s`,
97
- iterationCount: "infinite",
98
98
  timingFunction: "ease"
99
99
  });
100
100
  isStripeAnimation = !isAnimation && hasStripe && isStripeAnimation;
@@ -103,15 +103,15 @@ var ProgressFilledTrack = ({
103
103
  animation: stripeAnimation
104
104
  } : {},
105
105
  ...isAnimation ? {
106
- position: "absolute",
107
- willChange: "left",
106
+ animation: interpolationAnimation,
108
107
  minWidth: "50%",
109
- animation: interpolationAnimation
108
+ position: "absolute",
109
+ willChange: "left"
110
110
  } : {}
111
111
  };
112
112
  const __css = {
113
- w: `${percent}%`,
114
113
  h: "100%",
114
+ w: `${percent}%`,
115
115
  ...styles.filledTrack
116
116
  };
117
117
  return /* @__PURE__ */ jsx(ui.div, { css, __css, ...rest });
@@ -122,4 +122,4 @@ ProgressFilledTrack.__ui__ = "ProgressFilledTrack";
122
122
  export {
123
123
  Progress
124
124
  };
125
- //# sourceMappingURL=chunk-KPKODACS.mjs.map
125
+ //# sourceMappingURL=chunk-QOIOQFER.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/progress.tsx"],"sourcesContent":["import type {\n ColorModeToken,\n CSS,\n CSSUIObject,\n FC,\n HTMLUIProps,\n Interpolation,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { createContext, cx, valueToPercent } from \"@yamada-ui/utils\"\n\nconst [ProgressProvider, useProgress] = createContext<{\n [key: string]: CSSUIObject | undefined\n}>({\n name: `ProgressStylesContext`,\n errorMessage: `useProgress returned is 'undefined'. Seems you forgot to wrap the components in \"<Progress />\" `,\n})\n\ninterface ProgressOptions {\n /**\n * The CSS `color` property.\n */\n filledTrackColor?: ColorModeToken<CSS.Property.Color, \"colors\">\n /**\n * If `true`, the progress bar will show stripe.\n *\n * @default false\n */\n hasStripe?: boolean\n /**\n * If `true`, the progress will be indeterminate and the `value` prop will be ignored.\n *\n * @default false\n */\n isAnimation?: boolean\n /**\n * If `true`, and hasStripe is `true`, the stripes will be animated.\n *\n * @default false\n */\n isStripeAnimation?: boolean\n /**\n * The maximum value of the progress.\n *\n * @default 100\n */\n max?: number\n /**\n * The minimum value of the progress.\n *\n * @default 0\n */\n min?: number\n /**\n * The animation speed in seconds.\n *\n * @default '1.4s'\n */\n speed?: number | string\n /**\n * The value of the progress.\n *\n * @default 0\n */\n value?: number\n}\n\nexport interface ProgressProps\n extends HTMLUIProps,\n ThemeProps<\"Progress\">,\n ProgressOptions {}\n\n/**\n * `Progress` is a component for visually indicating progress.\n *\n * @see Docs https://yamada-ui.com/components/feedback/progress\n */\nexport const Progress = forwardRef<ProgressProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Progress\", props)\n const {\n className,\n borderRadius: _borderRadius,\n children,\n hasStripe,\n isAnimation,\n isStripeAnimation,\n max,\n min,\n rounded,\n speed,\n value,\n ...rest\n } = omitThemeProps(mergedProps, [\"filledTrackColor\"])\n\n const borderRadius =\n _borderRadius ?? rounded ?? (styles.track?.borderRadius as number | string)\n\n const css: CSSUIObject = {\n overflow: \"hidden\",\n pos: \"relative\",\n w: \"100%\",\n ...styles.track,\n }\n\n return (\n <ProgressProvider value={styles}>\n <ui.div\n ref={ref}\n className={cx(\"ui-progress\", className)}\n borderRadius={borderRadius}\n __css={css}\n {...rest}\n >\n <ProgressFilledTrack\n borderRadius={borderRadius}\n hasStripe={hasStripe}\n isAnimation={isAnimation}\n isStripeAnimation={isStripeAnimation}\n max={max}\n min={min}\n speed={speed}\n value={value}\n />\n {children}\n </ui.div>\n </ProgressProvider>\n )\n})\n\nProgress.displayName = \"Progress\"\nProgress.__ui__ = \"Progress\"\n\ninterface ProgressFilledTrackProps extends HTMLUIProps, ProgressProps {}\n\nconst ProgressFilledTrack: FC<ProgressFilledTrackProps> = ({\n hasStripe,\n isAnimation,\n isStripeAnimation,\n max = 100,\n min = 0,\n speed = \"1.4s\",\n value = 0,\n ...rest\n}) => {\n const percent = valueToPercent(value, min, max)\n\n const styles = useProgress()\n\n const stripeAnimation = useAnimation({\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n keyframes: {\n \"0%\": { bgPosition: \"1rem 0\" },\n \"100%\": { bgPosition: \"0 0\" },\n },\n timingFunction: \"linear\",\n })\n\n const interpolationAnimation = useAnimation({\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n keyframes: {\n \"0%\": { left: \"-40%\" },\n \"100%\": { left: \"100%\" },\n },\n timingFunction: \"ease\",\n })\n\n isStripeAnimation = !isAnimation && hasStripe && isStripeAnimation\n\n const css: Interpolation<{}> = {\n ...(isStripeAnimation\n ? {\n animation: stripeAnimation,\n }\n : {}),\n ...(isAnimation\n ? {\n animation: interpolationAnimation,\n minWidth: \"50%\",\n position: \"absolute\",\n willChange: \"left\",\n }\n : {}),\n }\n\n const __css: CSSUIObject = {\n h: \"100%\",\n w: `${percent}%`,\n ...styles.filledTrack,\n }\n\n return <ui.div css={css} __css={__css} {...rest} />\n}\n\nProgressFilledTrack.displayName = \"ProgressFilledTrack\"\nProgressFilledTrack.__ui__ = \"ProgressFilledTrack\"\n"],"mappings":";;;AASA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAC7B,SAAS,eAAe,IAAI,sBAAsB;AAiG5C,SAOE,KAPF;AA/FN,IAAM,CAAC,kBAAkB,WAAW,IAAI,cAErC;AAAA,EACD,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AA6DM,IAAM,WAAW,WAAiC,CAAC,OAAO,QAAQ;AApFzE;AAqFE,QAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,YAAY,KAAK;AACtE,QAAM;AAAA,IACJ;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,eAAe,aAAa,CAAC,kBAAkB,CAAC;AAEpD,QAAM,gBACJ,6CAAiB,YAAjB,aAA6B,YAAO,UAAP,mBAAc;AAE7C,QAAM,MAAmB;AAAA,IACvB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,GAAG;AAAA,IACH,GAAG,OAAO;AAAA,EACZ;AAEA,SACE,oBAAC,oBAAiB,OAAO,QACvB;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,WAAW,GAAG,eAAe,SAAS;AAAA,MACtC;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACC;AAAA;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAED,SAAS,cAAc;AACvB,SAAS,SAAS;AAIlB,IAAM,sBAAoD,CAAC;AAAA,EACzD;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,GAAG;AACL,MAAM;AACJ,QAAM,UAAU,eAAe,OAAO,KAAK,GAAG;AAE9C,QAAM,SAAS,YAAY;AAE3B,QAAM,kBAAkB,aAAa;AAAA,IACnC,UAAU,OAAO,UAAU,WAAW,QAAQ,GAAG,KAAK;AAAA,IACtD,gBAAgB;AAAA,IAChB,WAAW;AAAA,MACT,MAAM,EAAE,YAAY,SAAS;AAAA,MAC7B,QAAQ,EAAE,YAAY,MAAM;AAAA,IAC9B;AAAA,IACA,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,yBAAyB,aAAa;AAAA,IAC1C,UAAU,OAAO,UAAU,WAAW,QAAQ,GAAG,KAAK;AAAA,IACtD,gBAAgB;AAAA,IAChB,WAAW;AAAA,MACT,MAAM,EAAE,MAAM,OAAO;AAAA,MACrB,QAAQ,EAAE,MAAM,OAAO;AAAA,IACzB;AAAA,IACA,gBAAgB;AAAA,EAClB,CAAC;AAED,sBAAoB,CAAC,eAAe,aAAa;AAEjD,QAAM,MAAyB;AAAA,IAC7B,GAAI,oBACA;AAAA,MACE,WAAW;AAAA,IACb,IACA,CAAC;AAAA,IACL,GAAI,cACA;AAAA,MACE,WAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,IACd,IACA,CAAC;AAAA,EACP;AAEA,QAAM,QAAqB;AAAA,IACzB,GAAG;AAAA,IACH,GAAG,GAAG,OAAO;AAAA,IACb,GAAG,OAAO;AAAA,EACZ;AAEA,SAAO,oBAAC,GAAG,KAAH,EAAO,KAAU,OAAe,GAAG,MAAM;AACnD;AAEA,oBAAoB,cAAc;AAClC,oBAAoB,SAAS;","names":[]}
@@ -2,10 +2,10 @@
2
2
 
3
3
  // src/circle-progress.tsx
4
4
  import {
5
- ui,
6
5
  forwardRef,
7
- useComponentStyle,
8
- omitThemeProps
6
+ omitThemeProps,
7
+ ui,
8
+ useComponentStyle
9
9
  } from "@yamada-ui/core";
10
10
  import { useAnimation } from "@yamada-ui/use-animation";
11
11
  import { cx, valueToPercent } from "@yamada-ui/utils";
@@ -18,23 +18,25 @@ var CircleProgress = forwardRef(
18
18
  );
19
19
  let {
20
20
  className,
21
- children,
22
21
  boxSize = size,
23
- thickness = "0.625rem",
22
+ children,
24
23
  color = "primary",
25
- trackColor = "border",
26
- value = 0,
27
- min = 0,
28
- max = 100,
29
24
  isAnimation = false,
30
25
  isRounded,
26
+ max = 100,
27
+ min = 0,
31
28
  speed = ["1.4s", "2s"],
29
+ thickness = "0.625rem",
30
+ trackColor = "border",
31
+ value = 0,
32
32
  ...rest
33
33
  } = omitThemeProps(mergedProps);
34
34
  const isTransparent = value === 0 && !isAnimation;
35
35
  const percent = valueToPercent(value, min, max);
36
36
  const interval = !isAnimation ? percent * 2.64 : void 0;
37
37
  const animation = useAnimation({
38
+ duration: typeof speed[0] === "string" ? speed[0] : `${speed[0]}s`,
39
+ iterationCount: "infinite",
38
40
  keyframes: {
39
41
  "0%": {
40
42
  strokeDasharray: "1, 400",
@@ -49,25 +51,23 @@ var CircleProgress = forwardRef(
49
51
  strokeDashoffset: "-260"
50
52
  }
51
53
  },
52
- duration: typeof speed[0] === "string" ? speed[0] : `${speed[0]}s`,
53
- iterationCount: "infinite",
54
54
  timingFunction: "linear"
55
55
  });
56
56
  const css = {
57
57
  ...styles,
58
+ fontSize: "$boxSize",
58
59
  vars: [
59
60
  { name: "boxSize", token: "sizes", value: boxSize },
60
61
  { name: "thickness", token: "sizes", value: thickness }
61
- ],
62
- fontSize: "$boxSize"
62
+ ]
63
63
  };
64
64
  const circleProps = isAnimation ? {
65
65
  animation
66
66
  } : {
67
- strokeDashoffset: 66,
68
67
  strokeDasharray: interval == null ? void 0 : `${interval} ${264 - interval}`,
69
- transitionProperty: "stroke-dasharray, stroke",
68
+ strokeDashoffset: 66,
70
69
  transitionDuration: "0.6s",
70
+ transitionProperty: "stroke-dasharray, stroke",
71
71
  transitionTimingFunction: "ease"
72
72
  };
73
73
  return /* @__PURE__ */ jsxs(
@@ -83,10 +83,10 @@ var CircleProgress = forwardRef(
83
83
  /* @__PURE__ */ jsx(
84
84
  Circle,
85
85
  {
86
+ opacity: isTransparent ? 0 : void 0,
86
87
  stroke: color,
87
- strokeWidth: "$thickness",
88
88
  strokeLinecap: isRounded ? "round" : void 0,
89
- opacity: isTransparent ? 0 : void 0,
89
+ strokeWidth: "$thickness",
90
90
  ...circleProps
91
91
  }
92
92
  )
@@ -99,11 +99,13 @@ var CircleProgress = forwardRef(
99
99
  );
100
100
  CircleProgress.displayName = "CircleProgress";
101
101
  CircleProgress.__ui__ = "CircleProgress";
102
- var Circle = ({ ...rest }) => /* @__PURE__ */ jsx(ui.circle, { cx: 50, cy: 50, r: 42, fill: "transparent", ...rest });
102
+ var Circle = ({ ...rest }) => /* @__PURE__ */ jsx(ui.circle, { cx: 50, cy: 50, fill: "transparent", r: 42, ...rest });
103
103
  Circle.displayName = "Circle";
104
104
  Circle.__ui__ = "Circle";
105
105
  var Shape = ({ boxSize, isAnimation, speed, ...rest }) => {
106
106
  const animation = useAnimation({
107
+ duration: typeof speed[1] === "string" ? speed[1] : `${speed[1]}s`,
108
+ iterationCount: "infinite",
107
109
  keyframes: {
108
110
  "0%": {
109
111
  transform: "rotate(0deg)"
@@ -112,13 +114,11 @@ var Shape = ({ boxSize, isAnimation, speed, ...rest }) => {
112
114
  transform: "rotate(360deg)"
113
115
  }
114
116
  },
115
- duration: typeof speed[1] === "string" ? speed[1] : `${speed[1]}s`,
116
- iterationCount: "infinite",
117
117
  timingFunction: "linear"
118
118
  });
119
119
  const css = {
120
- display: "block",
121
120
  boxSize,
121
+ display: "block",
122
122
  ...isAnimation ? { animation } : {}
123
123
  };
124
124
  return /* @__PURE__ */ jsx(ui.svg, { viewBox: "0 0 100 100", __css: css, ...rest });
@@ -127,13 +127,13 @@ Shape.displayName = "Shape";
127
127
  Shape.__ui__ = "Shape";
128
128
  var CircleProgressLabel = ui("span", {
129
129
  baseStyle: {
130
+ fontSize: "0.25em",
131
+ left: "50%",
130
132
  position: "absolute",
133
+ textAlign: "center",
131
134
  top: "50%",
132
- left: "50%",
133
135
  transform: "translate(-50%, -50%)",
134
- width: "100%",
135
- fontSize: "0.25em",
136
- textAlign: "center"
136
+ width: "100%"
137
137
  }
138
138
  });
139
139
  CircleProgressLabel.displayName = "CircleProgressLabel";
@@ -143,4 +143,4 @@ export {
143
143
  CircleProgress,
144
144
  CircleProgressLabel
145
145
  };
146
- //# sourceMappingURL=chunk-ALBGJOCS.mjs.map
146
+ //# sourceMappingURL=chunk-UD3A4RXP.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/circle-progress.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n CSSUIProps,\n FC,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { cx, valueToPercent } from \"@yamada-ui/utils\"\n\ninterface CircleProgressOptions {\n /**\n * The CSS `color` property.\n *\n * @default 'primary'\n */\n color?: CSSUIProps[\"color\"]\n /**\n * If `true`, the progress will be indeterminate and the `value` prop will be ignored.\n *\n * @default false\n */\n isAnimation?: boolean\n /**\n * If `true`, the cap of the progress indicator will be rounded.\n *\n * @default false\n */\n isRounded?: boolean\n /**\n * The maximum value of the progress.\n *\n * @default 100\n */\n max?: number\n /**\n * The minimum value of the progress.\n *\n * @default 0\n */\n min?: number\n /**\n * The CSS `box-size` property.\n *\n * @default '6rem'\n * @deprecated Use `boxSize` instead.\n */\n size?: CSSUIProps[\"boxSize\"]\n /**\n * The animation speed in seconds.\n *\n * @default '[1.4s, 2s]'\n */\n speed?: [number | string, number | string]\n /**\n * The CSS `width` property.\n *\n * @default '0.625ewm'\n */\n thickness?: CSSUIProps[\"width\"]\n /**\n * The CSS `color` property.\n *\n * @default 'border'\n */\n trackColor?: CSSUIProps[\"color\"]\n /**\n * The value of the progress.\n *\n * @default 0\n */\n value?: number\n}\n\nexport interface CircleProgressProps\n extends Omit<HTMLUIProps, \"color\">,\n Omit<ThemeProps<\"CircleProgress\">, \"size\">,\n CircleProgressOptions {}\n\n/**\n * `CircleProgress` is a component that displays progress in a circular progress bar.\n *\n * @see Docs https://yamada-ui.com/components/feedback/circle-progress\n */\nexport const CircleProgress = forwardRef<CircleProgressProps, \"div\">(\n (props, ref) => {\n const [styles, { size = \"6rem\", ...mergedProps }] = useComponentStyle(\n \"CircleProgress\",\n props,\n )\n let {\n className,\n boxSize = size,\n children,\n color = \"primary\",\n isAnimation = false,\n isRounded,\n max = 100,\n min = 0,\n speed = [\"1.4s\", \"2s\"],\n thickness = \"0.625rem\",\n trackColor = \"border\",\n value = 0,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const isTransparent = value === 0 && !isAnimation\n const percent = valueToPercent(value, min, max)\n\n const interval = !isAnimation ? percent * 2.64 : undefined\n\n const animation = useAnimation({\n duration: typeof speed[0] === \"string\" ? speed[0] : `${speed[0]}s`,\n iterationCount: \"infinite\",\n keyframes: {\n \"0%\": {\n strokeDasharray: \"1, 400\",\n strokeDashoffset: \"0\",\n },\n \"50%\": {\n strokeDasharray: \"400, 400\",\n strokeDashoffset: \"-100\",\n },\n \"100%\": {\n strokeDasharray: \"400, 400\",\n strokeDashoffset: \"-260\",\n },\n },\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n ...styles,\n fontSize: \"$boxSize\",\n vars: [\n { name: \"boxSize\", token: \"sizes\", value: boxSize },\n { name: \"thickness\", token: \"sizes\", value: thickness },\n ],\n }\n\n const circleProps: CircleProps = isAnimation\n ? {\n animation,\n }\n : {\n strokeDasharray:\n interval == null ? undefined : `${interval} ${264 - interval}`,\n strokeDashoffset: 66,\n transitionDuration: \"0.6s\",\n transitionProperty: \"stroke-dasharray, stroke\",\n transitionTimingFunction: \"ease\",\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-circle-progress\", className)}\n __css={css}\n {...rest}\n >\n <Shape boxSize={boxSize} isAnimation={isAnimation} speed={speed}>\n <Circle stroke={trackColor} strokeWidth=\"$thickness\" />\n <Circle\n opacity={isTransparent ? 0 : undefined}\n stroke={color}\n strokeLinecap={isRounded ? \"round\" : undefined}\n strokeWidth=\"$thickness\"\n {...circleProps}\n />\n </Shape>\n {children}\n </ui.div>\n )\n },\n)\n\nCircleProgress.displayName = \"CircleProgress\"\nCircleProgress.__ui__ = \"CircleProgress\"\n\ninterface CircleProps extends HTMLUIProps<\"circle\"> {}\n\nconst Circle: FC<CircleProps> = ({ ...rest }) => (\n <ui.circle cx={50} cy={50} fill=\"transparent\" r={42} {...rest} />\n)\n\nCircle.displayName = \"Circle\"\nCircle.__ui__ = \"Circle\"\n\ninterface ShapeProps\n extends Omit<HTMLUIProps<\"svg\">, \"children\" | \"speed\">,\n Pick<Required<CircleProgressProps>, \"children\" | \"isAnimation\" | \"speed\"> {}\n\nconst Shape: FC<ShapeProps> = ({ boxSize, isAnimation, speed, ...rest }) => {\n const animation = useAnimation({\n duration: typeof speed[1] === \"string\" ? speed[1] : `${speed[1]}s`,\n iterationCount: \"infinite\",\n keyframes: {\n \"0%\": {\n transform: \"rotate(0deg)\",\n },\n \"100%\": {\n transform: \"rotate(360deg)\",\n },\n },\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n boxSize,\n display: \"block\",\n ...(isAnimation ? { animation } : {}),\n }\n\n return <ui.svg viewBox=\"0 0 100 100\" __css={css} {...rest} />\n}\n\nShape.displayName = \"Shape\"\nShape.__ui__ = \"Shape\"\n\nexport const CircleProgressLabel = ui(\"span\", {\n baseStyle: {\n fontSize: \"0.25em\",\n left: \"50%\",\n position: \"absolute\",\n textAlign: \"center\",\n top: \"50%\",\n transform: \"translate(-50%, -50%)\",\n width: \"100%\",\n },\n})\n\nCircleProgressLabel.displayName = \"CircleProgressLabel\"\nCircleProgressLabel.__ui__ = \"CircleProgressLabel\"\n"],"mappings":"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","names":[]}
@@ -3,66 +3,66 @@ import { HTMLUIProps, ThemeProps, CSSUIProps } from '@yamada-ui/core';
3
3
 
4
4
  interface CircleProgressOptions {
5
5
  /**
6
- * The CSS `box-size` property.
6
+ * The CSS `color` property.
7
7
  *
8
- * @default '6rem'
9
- * @deprecated Use `boxSize` instead.
8
+ * @default 'primary'
10
9
  */
11
- size?: CSSUIProps["boxSize"];
10
+ color?: CSSUIProps["color"];
12
11
  /**
13
- * The CSS `width` property.
12
+ * If `true`, the progress will be indeterminate and the `value` prop will be ignored.
14
13
  *
15
- * @default '0.625ewm'
14
+ * @default false
16
15
  */
17
- thickness?: CSSUIProps["width"];
16
+ isAnimation?: boolean;
18
17
  /**
19
- * The CSS `color` property.
18
+ * If `true`, the cap of the progress indicator will be rounded.
20
19
  *
21
- * @default 'primary'
20
+ * @default false
22
21
  */
23
- color?: CSSUIProps["color"];
22
+ isRounded?: boolean;
24
23
  /**
25
- * The CSS `color` property.
24
+ * The maximum value of the progress.
26
25
  *
27
- * @default 'border'
26
+ * @default 100
28
27
  */
29
- trackColor?: CSSUIProps["color"];
28
+ max?: number;
30
29
  /**
31
- * The value of the progress.
30
+ * The minimum value of the progress.
32
31
  *
33
32
  * @default 0
34
33
  */
35
- value?: number;
34
+ min?: number;
36
35
  /**
37
- * The minimum value of the progress.
36
+ * The CSS `box-size` property.
38
37
  *
39
- * @default 0
38
+ * @default '6rem'
39
+ * @deprecated Use `boxSize` instead.
40
40
  */
41
- min?: number;
41
+ size?: CSSUIProps["boxSize"];
42
42
  /**
43
- * The maximum value of the progress.
43
+ * The animation speed in seconds.
44
44
  *
45
- * @default 100
45
+ * @default '[1.4s, 2s]'
46
46
  */
47
- max?: number;
47
+ speed?: [number | string, number | string];
48
48
  /**
49
- * If `true`, the cap of the progress indicator will be rounded.
49
+ * The CSS `width` property.
50
50
  *
51
- * @default false
51
+ * @default '0.625ewm'
52
52
  */
53
- isRounded?: boolean;
53
+ thickness?: CSSUIProps["width"];
54
54
  /**
55
- * If `true`, the progress will be indeterminate and the `value` prop will be ignored.
55
+ * The CSS `color` property.
56
56
  *
57
- * @default false
57
+ * @default 'border'
58
58
  */
59
- isAnimation?: boolean;
59
+ trackColor?: CSSUIProps["color"];
60
60
  /**
61
- * The animation speed in seconds.
61
+ * The value of the progress.
62
62
  *
63
- * @default '[1.4s, 2s]'
63
+ * @default 0
64
64
  */
65
- speed?: [string | number, string | number];
65
+ value?: number;
66
66
  }
67
67
  interface CircleProgressProps extends Omit<HTMLUIProps, "color">, Omit<ThemeProps<"CircleProgress">, "size">, CircleProgressOptions {
68
68
  }
@@ -3,66 +3,66 @@ import { HTMLUIProps, ThemeProps, CSSUIProps } from '@yamada-ui/core';
3
3
 
4
4
  interface CircleProgressOptions {
5
5
  /**
6
- * The CSS `box-size` property.
6
+ * The CSS `color` property.
7
7
  *
8
- * @default '6rem'
9
- * @deprecated Use `boxSize` instead.
8
+ * @default 'primary'
10
9
  */
11
- size?: CSSUIProps["boxSize"];
10
+ color?: CSSUIProps["color"];
12
11
  /**
13
- * The CSS `width` property.
12
+ * If `true`, the progress will be indeterminate and the `value` prop will be ignored.
14
13
  *
15
- * @default '0.625ewm'
14
+ * @default false
16
15
  */
17
- thickness?: CSSUIProps["width"];
16
+ isAnimation?: boolean;
18
17
  /**
19
- * The CSS `color` property.
18
+ * If `true`, the cap of the progress indicator will be rounded.
20
19
  *
21
- * @default 'primary'
20
+ * @default false
22
21
  */
23
- color?: CSSUIProps["color"];
22
+ isRounded?: boolean;
24
23
  /**
25
- * The CSS `color` property.
24
+ * The maximum value of the progress.
26
25
  *
27
- * @default 'border'
26
+ * @default 100
28
27
  */
29
- trackColor?: CSSUIProps["color"];
28
+ max?: number;
30
29
  /**
31
- * The value of the progress.
30
+ * The minimum value of the progress.
32
31
  *
33
32
  * @default 0
34
33
  */
35
- value?: number;
34
+ min?: number;
36
35
  /**
37
- * The minimum value of the progress.
36
+ * The CSS `box-size` property.
38
37
  *
39
- * @default 0
38
+ * @default '6rem'
39
+ * @deprecated Use `boxSize` instead.
40
40
  */
41
- min?: number;
41
+ size?: CSSUIProps["boxSize"];
42
42
  /**
43
- * The maximum value of the progress.
43
+ * The animation speed in seconds.
44
44
  *
45
- * @default 100
45
+ * @default '[1.4s, 2s]'
46
46
  */
47
- max?: number;
47
+ speed?: [number | string, number | string];
48
48
  /**
49
- * If `true`, the cap of the progress indicator will be rounded.
49
+ * The CSS `width` property.
50
50
  *
51
- * @default false
51
+ * @default '0.625ewm'
52
52
  */
53
- isRounded?: boolean;
53
+ thickness?: CSSUIProps["width"];
54
54
  /**
55
- * If `true`, the progress will be indeterminate and the `value` prop will be ignored.
55
+ * The CSS `color` property.
56
56
  *
57
- * @default false
57
+ * @default 'border'
58
58
  */
59
- isAnimation?: boolean;
59
+ trackColor?: CSSUIProps["color"];
60
60
  /**
61
- * The animation speed in seconds.
61
+ * The value of the progress.
62
62
  *
63
- * @default '[1.4s, 2s]'
63
+ * @default 0
64
64
  */
65
- speed?: [string | number, string | number];
65
+ value?: number;
66
66
  }
67
67
  interface CircleProgressProps extends Omit<HTMLUIProps, "color">, Omit<ThemeProps<"CircleProgress">, "size">, CircleProgressOptions {
68
68
  }
@@ -37,23 +37,25 @@ var CircleProgress = (0, import_core.forwardRef)(
37
37
  );
38
38
  let {
39
39
  className,
40
- children,
41
40
  boxSize = size,
42
- thickness = "0.625rem",
41
+ children,
43
42
  color = "primary",
44
- trackColor = "border",
45
- value = 0,
46
- min = 0,
47
- max = 100,
48
43
  isAnimation = false,
49
44
  isRounded,
45
+ max = 100,
46
+ min = 0,
50
47
  speed = ["1.4s", "2s"],
48
+ thickness = "0.625rem",
49
+ trackColor = "border",
50
+ value = 0,
51
51
  ...rest
52
52
  } = (0, import_core.omitThemeProps)(mergedProps);
53
53
  const isTransparent = value === 0 && !isAnimation;
54
54
  const percent = (0, import_utils.valueToPercent)(value, min, max);
55
55
  const interval = !isAnimation ? percent * 2.64 : void 0;
56
56
  const animation = (0, import_use_animation.useAnimation)({
57
+ duration: typeof speed[0] === "string" ? speed[0] : `${speed[0]}s`,
58
+ iterationCount: "infinite",
57
59
  keyframes: {
58
60
  "0%": {
59
61
  strokeDasharray: "1, 400",
@@ -68,25 +70,23 @@ var CircleProgress = (0, import_core.forwardRef)(
68
70
  strokeDashoffset: "-260"
69
71
  }
70
72
  },
71
- duration: typeof speed[0] === "string" ? speed[0] : `${speed[0]}s`,
72
- iterationCount: "infinite",
73
73
  timingFunction: "linear"
74
74
  });
75
75
  const css = {
76
76
  ...styles,
77
+ fontSize: "$boxSize",
77
78
  vars: [
78
79
  { name: "boxSize", token: "sizes", value: boxSize },
79
80
  { name: "thickness", token: "sizes", value: thickness }
80
- ],
81
- fontSize: "$boxSize"
81
+ ]
82
82
  };
83
83
  const circleProps = isAnimation ? {
84
84
  animation
85
85
  } : {
86
- strokeDashoffset: 66,
87
86
  strokeDasharray: interval == null ? void 0 : `${interval} ${264 - interval}`,
88
- transitionProperty: "stroke-dasharray, stroke",
87
+ strokeDashoffset: 66,
89
88
  transitionDuration: "0.6s",
89
+ transitionProperty: "stroke-dasharray, stroke",
90
90
  transitionTimingFunction: "ease"
91
91
  };
92
92
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -102,10 +102,10 @@ var CircleProgress = (0, import_core.forwardRef)(
102
102
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
103
103
  Circle,
104
104
  {
105
+ opacity: isTransparent ? 0 : void 0,
105
106
  stroke: color,
106
- strokeWidth: "$thickness",
107
107
  strokeLinecap: isRounded ? "round" : void 0,
108
- opacity: isTransparent ? 0 : void 0,
108
+ strokeWidth: "$thickness",
109
109
  ...circleProps
110
110
  }
111
111
  )
@@ -118,11 +118,13 @@ var CircleProgress = (0, import_core.forwardRef)(
118
118
  );
119
119
  CircleProgress.displayName = "CircleProgress";
120
120
  CircleProgress.__ui__ = "CircleProgress";
121
- var Circle = ({ ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.circle, { cx: 50, cy: 50, r: 42, fill: "transparent", ...rest });
121
+ var Circle = ({ ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.circle, { cx: 50, cy: 50, fill: "transparent", r: 42, ...rest });
122
122
  Circle.displayName = "Circle";
123
123
  Circle.__ui__ = "Circle";
124
124
  var Shape = ({ boxSize, isAnimation, speed, ...rest }) => {
125
125
  const animation = (0, import_use_animation.useAnimation)({
126
+ duration: typeof speed[1] === "string" ? speed[1] : `${speed[1]}s`,
127
+ iterationCount: "infinite",
126
128
  keyframes: {
127
129
  "0%": {
128
130
  transform: "rotate(0deg)"
@@ -131,13 +133,11 @@ var Shape = ({ boxSize, isAnimation, speed, ...rest }) => {
131
133
  transform: "rotate(360deg)"
132
134
  }
133
135
  },
134
- duration: typeof speed[1] === "string" ? speed[1] : `${speed[1]}s`,
135
- iterationCount: "infinite",
136
136
  timingFunction: "linear"
137
137
  });
138
138
  const css = {
139
- display: "block",
140
139
  boxSize,
140
+ display: "block",
141
141
  ...isAnimation ? { animation } : {}
142
142
  };
143
143
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.svg, { viewBox: "0 0 100 100", __css: css, ...rest });
@@ -146,13 +146,13 @@ Shape.displayName = "Shape";
146
146
  Shape.__ui__ = "Shape";
147
147
  var CircleProgressLabel = (0, import_core.ui)("span", {
148
148
  baseStyle: {
149
+ fontSize: "0.25em",
150
+ left: "50%",
149
151
  position: "absolute",
152
+ textAlign: "center",
150
153
  top: "50%",
151
- left: "50%",
152
154
  transform: "translate(-50%, -50%)",
153
- width: "100%",
154
- fontSize: "0.25em",
155
- textAlign: "center"
155
+ width: "100%"
156
156
  }
157
157
  });
158
158
  CircleProgressLabel.displayName = "CircleProgressLabel";