@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.
- package/dist/{chunk-KPKODACS.mjs → chunk-QOIOQFER.mjs} +29 -29
- package/dist/chunk-QOIOQFER.mjs.map +1 -0
- package/dist/{chunk-ALBGJOCS.mjs → chunk-UD3A4RXP.mjs} +26 -26
- package/dist/chunk-UD3A4RXP.mjs.map +1 -0
- package/dist/circle-progress.d.mts +30 -30
- package/dist/circle-progress.d.ts +30 -30
- package/dist/circle-progress.js +22 -22
- package/dist/circle-progress.js.map +1 -1
- package/dist/circle-progress.mjs +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +151 -151
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -2
- package/dist/progress.d.mts +21 -21
- package/dist/progress.d.ts +21 -21
- package/dist/progress.js +25 -25
- package/dist/progress.js.map +1 -1
- package/dist/progress.mjs +1 -1
- package/package.json +6 -6
- package/dist/chunk-ALBGJOCS.mjs.map +0 -1
- package/dist/chunk-KPKODACS.mjs.map +0 -1
@@ -2,10 +2,10 @@
|
|
2
2
|
|
3
3
|
// src/progress.tsx
|
4
4
|
import {
|
5
|
-
ui,
|
6
5
|
forwardRef,
|
7
|
-
|
8
|
-
|
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
|
-
|
30
|
-
|
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
|
-
|
54
|
-
max,
|
55
|
-
value,
|
53
|
+
borderRadius,
|
56
54
|
hasStripe,
|
57
|
-
isStripeAnimation,
|
58
55
|
isAnimation,
|
56
|
+
isStripeAnimation,
|
57
|
+
max,
|
58
|
+
min,
|
59
59
|
speed,
|
60
|
-
|
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
|
-
|
107
|
-
willChange: "left",
|
106
|
+
animation: interpolationAnimation,
|
108
107
|
minWidth: "50%",
|
109
|
-
|
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-
|
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
|
-
|
8
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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,
|
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-
|
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 `
|
6
|
+
* The CSS `color` property.
|
7
7
|
*
|
8
|
-
* @default '
|
9
|
-
* @deprecated Use `boxSize` instead.
|
8
|
+
* @default 'primary'
|
10
9
|
*/
|
11
|
-
|
10
|
+
color?: CSSUIProps["color"];
|
12
11
|
/**
|
13
|
-
*
|
12
|
+
* If `true`, the progress will be indeterminate and the `value` prop will be ignored.
|
14
13
|
*
|
15
|
-
* @default
|
14
|
+
* @default false
|
16
15
|
*/
|
17
|
-
|
16
|
+
isAnimation?: boolean;
|
18
17
|
/**
|
19
|
-
*
|
18
|
+
* If `true`, the cap of the progress indicator will be rounded.
|
20
19
|
*
|
21
|
-
* @default
|
20
|
+
* @default false
|
22
21
|
*/
|
23
|
-
|
22
|
+
isRounded?: boolean;
|
24
23
|
/**
|
25
|
-
* The
|
24
|
+
* The maximum value of the progress.
|
26
25
|
*
|
27
|
-
* @default
|
26
|
+
* @default 100
|
28
27
|
*/
|
29
|
-
|
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
|
-
|
34
|
+
min?: number;
|
36
35
|
/**
|
37
|
-
* The
|
36
|
+
* The CSS `box-size` property.
|
38
37
|
*
|
39
|
-
* @default
|
38
|
+
* @default '6rem'
|
39
|
+
* @deprecated Use `boxSize` instead.
|
40
40
|
*/
|
41
|
-
|
41
|
+
size?: CSSUIProps["boxSize"];
|
42
42
|
/**
|
43
|
-
* The
|
43
|
+
* The animation speed in seconds.
|
44
44
|
*
|
45
|
-
* @default
|
45
|
+
* @default '[1.4s, 2s]'
|
46
46
|
*/
|
47
|
-
|
47
|
+
speed?: [number | string, number | string];
|
48
48
|
/**
|
49
|
-
*
|
49
|
+
* The CSS `width` property.
|
50
50
|
*
|
51
|
-
* @default
|
51
|
+
* @default '0.625ewm'
|
52
52
|
*/
|
53
|
-
|
53
|
+
thickness?: CSSUIProps["width"];
|
54
54
|
/**
|
55
|
-
*
|
55
|
+
* The CSS `color` property.
|
56
56
|
*
|
57
|
-
* @default
|
57
|
+
* @default 'border'
|
58
58
|
*/
|
59
|
-
|
59
|
+
trackColor?: CSSUIProps["color"];
|
60
60
|
/**
|
61
|
-
* The
|
61
|
+
* The value of the progress.
|
62
62
|
*
|
63
|
-
* @default
|
63
|
+
* @default 0
|
64
64
|
*/
|
65
|
-
|
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 `
|
6
|
+
* The CSS `color` property.
|
7
7
|
*
|
8
|
-
* @default '
|
9
|
-
* @deprecated Use `boxSize` instead.
|
8
|
+
* @default 'primary'
|
10
9
|
*/
|
11
|
-
|
10
|
+
color?: CSSUIProps["color"];
|
12
11
|
/**
|
13
|
-
*
|
12
|
+
* If `true`, the progress will be indeterminate and the `value` prop will be ignored.
|
14
13
|
*
|
15
|
-
* @default
|
14
|
+
* @default false
|
16
15
|
*/
|
17
|
-
|
16
|
+
isAnimation?: boolean;
|
18
17
|
/**
|
19
|
-
*
|
18
|
+
* If `true`, the cap of the progress indicator will be rounded.
|
20
19
|
*
|
21
|
-
* @default
|
20
|
+
* @default false
|
22
21
|
*/
|
23
|
-
|
22
|
+
isRounded?: boolean;
|
24
23
|
/**
|
25
|
-
* The
|
24
|
+
* The maximum value of the progress.
|
26
25
|
*
|
27
|
-
* @default
|
26
|
+
* @default 100
|
28
27
|
*/
|
29
|
-
|
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
|
-
|
34
|
+
min?: number;
|
36
35
|
/**
|
37
|
-
* The
|
36
|
+
* The CSS `box-size` property.
|
38
37
|
*
|
39
|
-
* @default
|
38
|
+
* @default '6rem'
|
39
|
+
* @deprecated Use `boxSize` instead.
|
40
40
|
*/
|
41
|
-
|
41
|
+
size?: CSSUIProps["boxSize"];
|
42
42
|
/**
|
43
|
-
* The
|
43
|
+
* The animation speed in seconds.
|
44
44
|
*
|
45
|
-
* @default
|
45
|
+
* @default '[1.4s, 2s]'
|
46
46
|
*/
|
47
|
-
|
47
|
+
speed?: [number | string, number | string];
|
48
48
|
/**
|
49
|
-
*
|
49
|
+
* The CSS `width` property.
|
50
50
|
*
|
51
|
-
* @default
|
51
|
+
* @default '0.625ewm'
|
52
52
|
*/
|
53
|
-
|
53
|
+
thickness?: CSSUIProps["width"];
|
54
54
|
/**
|
55
|
-
*
|
55
|
+
* The CSS `color` property.
|
56
56
|
*
|
57
|
-
* @default
|
57
|
+
* @default 'border'
|
58
58
|
*/
|
59
|
-
|
59
|
+
trackColor?: CSSUIProps["color"];
|
60
60
|
/**
|
61
|
-
* The
|
61
|
+
* The value of the progress.
|
62
62
|
*
|
63
|
-
* @default
|
63
|
+
* @default 0
|
64
64
|
*/
|
65
|
-
|
65
|
+
value?: number;
|
66
66
|
}
|
67
67
|
interface CircleProgressProps extends Omit<HTMLUIProps, "color">, Omit<ThemeProps<"CircleProgress">, "size">, CircleProgressOptions {
|
68
68
|
}
|
package/dist/circle-progress.js
CHANGED
@@ -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
|
-
|
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
|
-
|
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
|
-
|
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,
|
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";
|