@yamada-ui/progress 1.1.4-next-20241005220055 → 1.1.4-next-20241008193728
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-ZZK4BQYL.mjs} +55 -42
- package/dist/chunk-ZZK4BQYL.mjs.map +1 -0
- package/dist/circle-progress.d.mts +24 -24
- package/dist/circle-progress.d.ts +24 -24
- package/dist/circle-progress.js +51 -38
- 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 +177 -164
- 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
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)(
|
|
@@ -97,19 +97,27 @@ var CircleProgress = (0, import_core.forwardRef)(
|
|
|
97
97
|
__css: css,
|
|
98
98
|
...rest,
|
|
99
99
|
children: [
|
|
100
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
100
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
101
|
+
CircleProgressShape,
|
|
102
|
+
{
|
|
103
|
+
boxSize,
|
|
104
|
+
isAnimation,
|
|
105
|
+
speed,
|
|
106
|
+
children: [
|
|
107
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CircleProgressCircle, { stroke: trackColor, strokeWidth: "$thickness" }),
|
|
108
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
109
|
+
CircleProgressCircle,
|
|
110
|
+
{
|
|
111
|
+
opacity: isTransparent ? 0 : void 0,
|
|
112
|
+
stroke: color,
|
|
113
|
+
strokeLinecap: isRounded ? "round" : void 0,
|
|
114
|
+
strokeWidth: "$thickness",
|
|
115
|
+
...circleProps
|
|
116
|
+
}
|
|
117
|
+
)
|
|
118
|
+
]
|
|
119
|
+
}
|
|
120
|
+
),
|
|
113
121
|
children
|
|
114
122
|
]
|
|
115
123
|
}
|
|
@@ -118,11 +126,18 @@ var CircleProgress = (0, import_core.forwardRef)(
|
|
|
118
126
|
);
|
|
119
127
|
CircleProgress.displayName = "CircleProgress";
|
|
120
128
|
CircleProgress.__ui__ = "CircleProgress";
|
|
121
|
-
var
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
var
|
|
129
|
+
var CircleProgressCircle = ({ ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.circle, { cx: 50, cy: 50, fill: "transparent", r: 42, ...rest });
|
|
130
|
+
CircleProgressCircle.displayName = "CircleProgressCircle";
|
|
131
|
+
CircleProgressCircle.__ui__ = "CircleProgressCircle";
|
|
132
|
+
var CircleProgressShape = ({
|
|
133
|
+
boxSize,
|
|
134
|
+
isAnimation,
|
|
135
|
+
speed,
|
|
136
|
+
...rest
|
|
137
|
+
}) => {
|
|
125
138
|
const animation = (0, import_use_animation.useAnimation)({
|
|
139
|
+
duration: typeof speed[1] === "string" ? speed[1] : `${speed[1]}s`,
|
|
140
|
+
iterationCount: "infinite",
|
|
126
141
|
keyframes: {
|
|
127
142
|
"0%": {
|
|
128
143
|
transform: "rotate(0deg)"
|
|
@@ -131,28 +146,26 @@ var Shape = ({ boxSize, isAnimation, speed, ...rest }) => {
|
|
|
131
146
|
transform: "rotate(360deg)"
|
|
132
147
|
}
|
|
133
148
|
},
|
|
134
|
-
duration: typeof speed[1] === "string" ? speed[1] : `${speed[1]}s`,
|
|
135
|
-
iterationCount: "infinite",
|
|
136
149
|
timingFunction: "linear"
|
|
137
150
|
});
|
|
138
151
|
const css = {
|
|
139
|
-
display: "block",
|
|
140
152
|
boxSize,
|
|
153
|
+
display: "block",
|
|
141
154
|
...isAnimation ? { animation } : {}
|
|
142
155
|
};
|
|
143
156
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.svg, { viewBox: "0 0 100 100", __css: css, ...rest });
|
|
144
157
|
};
|
|
145
|
-
|
|
146
|
-
|
|
158
|
+
CircleProgressShape.displayName = "CircleProgressShape";
|
|
159
|
+
CircleProgressShape.__ui__ = "CircleProgressShape";
|
|
147
160
|
var CircleProgressLabel = (0, import_core.ui)("span", {
|
|
148
161
|
baseStyle: {
|
|
162
|
+
fontSize: "0.25em",
|
|
163
|
+
left: "50%",
|
|
149
164
|
position: "absolute",
|
|
165
|
+
textAlign: "center",
|
|
150
166
|
top: "50%",
|
|
151
|
-
left: "50%",
|
|
152
167
|
transform: "translate(-50%, -50%)",
|
|
153
|
-
width: "100%"
|
|
154
|
-
fontSize: "0.25em",
|
|
155
|
-
textAlign: "center"
|
|
168
|
+
width: "100%"
|
|
156
169
|
}
|
|
157
170
|
});
|
|
158
171
|
CircleProgressLabel.displayName = "CircleProgressLabel";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/circle-progress.tsx"],"sourcesContent":["import type {\n
|
|
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 `box-size` property.\n *\n * @default '6rem'\n * @deprecated Use `boxSize` instead.\n */\n size?: CSSUIProps[\"boxSize\"]\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 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: CircleProgressCircleProps = 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 <CircleProgressShape\n boxSize={boxSize}\n isAnimation={isAnimation}\n speed={speed}\n >\n <CircleProgressCircle stroke={trackColor} strokeWidth=\"$thickness\" />\n <CircleProgressCircle\n opacity={isTransparent ? 0 : undefined}\n stroke={color}\n strokeLinecap={isRounded ? \"round\" : undefined}\n strokeWidth=\"$thickness\"\n {...circleProps}\n />\n </CircleProgressShape>\n {children}\n </ui.div>\n )\n },\n)\n\nCircleProgress.displayName = \"CircleProgress\"\nCircleProgress.__ui__ = \"CircleProgress\"\n\ninterface CircleProgressCircleProps extends HTMLUIProps<\"circle\"> {}\n\nconst CircleProgressCircle: FC<CircleProgressCircleProps> = ({ ...rest }) => (\n <ui.circle cx={50} cy={50} fill=\"transparent\" r={42} {...rest} />\n)\n\nCircleProgressCircle.displayName = \"CircleProgressCircle\"\nCircleProgressCircle.__ui__ = \"CircleProgressCircle\"\n\ninterface CircleProgressShapeProps\n extends Omit<HTMLUIProps<\"svg\">, \"children\" | \"speed\">,\n Pick<Required<CircleProgressProps>, \"children\" | \"isAnimation\" | \"speed\"> {}\n\nconst CircleProgressShape: FC<CircleProgressShapeProps> = ({\n boxSize,\n isAnimation,\n speed,\n ...rest\n}) => {\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\nCircleProgressShape.displayName = \"CircleProgressShape\"\nCircleProgressShape.__ui__ = \"CircleProgressShape\"\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":[]}
|
package/dist/circle-progress.mjs
CHANGED
package/dist/index.d.mts
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -27,150 +27,38 @@ __export(src_exports, {
|
|
|
27
27
|
});
|
|
28
28
|
module.exports = __toCommonJS(src_exports);
|
|
29
29
|
|
|
30
|
-
// src/progress.tsx
|
|
30
|
+
// src/circle-progress.tsx
|
|
31
31
|
var import_core = require("@yamada-ui/core");
|
|
32
32
|
var import_use_animation = require("@yamada-ui/use-animation");
|
|
33
33
|
var import_utils = require("@yamada-ui/utils");
|
|
34
34
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
35
|
-
var
|
|
36
|
-
name: `ProgressStylesContext`,
|
|
37
|
-
errorMessage: `useProgress returned is 'undefined'. Seems you forgot to wrap the components in "<Progress />" `
|
|
38
|
-
});
|
|
39
|
-
var Progress = (0, import_core.forwardRef)((props, ref) => {
|
|
40
|
-
var _a, _b;
|
|
41
|
-
const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Progress", props);
|
|
42
|
-
const {
|
|
43
|
-
className,
|
|
44
|
-
children,
|
|
45
|
-
value,
|
|
46
|
-
min,
|
|
47
|
-
max,
|
|
48
|
-
hasStripe,
|
|
49
|
-
isStripeAnimation,
|
|
50
|
-
isAnimation,
|
|
51
|
-
speed,
|
|
52
|
-
borderRadius: _borderRadius,
|
|
53
|
-
rounded,
|
|
54
|
-
...rest
|
|
55
|
-
} = (0, import_core.omitThemeProps)(mergedProps, ["filledTrackColor"]);
|
|
56
|
-
const borderRadius = (_b = _borderRadius != null ? _borderRadius : rounded) != null ? _b : (_a = styles.track) == null ? void 0 : _a.borderRadius;
|
|
57
|
-
const css = {
|
|
58
|
-
w: "100%",
|
|
59
|
-
overflow: "hidden",
|
|
60
|
-
pos: "relative",
|
|
61
|
-
...styles.track
|
|
62
|
-
};
|
|
63
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProgressProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
64
|
-
import_core.ui.div,
|
|
65
|
-
{
|
|
66
|
-
ref,
|
|
67
|
-
className: (0, import_utils.cx)("ui-progress", className),
|
|
68
|
-
__css: css,
|
|
69
|
-
borderRadius,
|
|
70
|
-
...rest,
|
|
71
|
-
children: [
|
|
72
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
73
|
-
ProgressFilledTrack,
|
|
74
|
-
{
|
|
75
|
-
min,
|
|
76
|
-
max,
|
|
77
|
-
value,
|
|
78
|
-
hasStripe,
|
|
79
|
-
isStripeAnimation,
|
|
80
|
-
isAnimation,
|
|
81
|
-
speed,
|
|
82
|
-
borderRadius
|
|
83
|
-
}
|
|
84
|
-
),
|
|
85
|
-
children
|
|
86
|
-
]
|
|
87
|
-
}
|
|
88
|
-
) });
|
|
89
|
-
});
|
|
90
|
-
Progress.displayName = "Progress";
|
|
91
|
-
Progress.__ui__ = "Progress";
|
|
92
|
-
var ProgressFilledTrack = ({
|
|
93
|
-
value = 0,
|
|
94
|
-
min = 0,
|
|
95
|
-
max = 100,
|
|
96
|
-
hasStripe,
|
|
97
|
-
isStripeAnimation,
|
|
98
|
-
isAnimation,
|
|
99
|
-
speed = "1.4s",
|
|
100
|
-
...rest
|
|
101
|
-
}) => {
|
|
102
|
-
const percent = (0, import_utils.valueToPercent)(value, min, max);
|
|
103
|
-
const styles = useProgress();
|
|
104
|
-
const stripeAnimation = (0, import_use_animation.useAnimation)({
|
|
105
|
-
keyframes: {
|
|
106
|
-
"0%": { bgPosition: "1rem 0" },
|
|
107
|
-
"100%": { bgPosition: "0 0" }
|
|
108
|
-
},
|
|
109
|
-
duration: typeof speed === "string" ? speed : `${speed}s`,
|
|
110
|
-
iterationCount: "infinite",
|
|
111
|
-
timingFunction: "linear"
|
|
112
|
-
});
|
|
113
|
-
const interpolationAnimation = (0, import_use_animation.useAnimation)({
|
|
114
|
-
keyframes: {
|
|
115
|
-
"0%": { left: "-40%" },
|
|
116
|
-
"100%": { left: "100%" }
|
|
117
|
-
},
|
|
118
|
-
duration: typeof speed === "string" ? speed : `${speed}s`,
|
|
119
|
-
iterationCount: "infinite",
|
|
120
|
-
timingFunction: "ease"
|
|
121
|
-
});
|
|
122
|
-
isStripeAnimation = !isAnimation && hasStripe && isStripeAnimation;
|
|
123
|
-
const css = {
|
|
124
|
-
...isStripeAnimation ? {
|
|
125
|
-
animation: stripeAnimation
|
|
126
|
-
} : {},
|
|
127
|
-
...isAnimation ? {
|
|
128
|
-
position: "absolute",
|
|
129
|
-
willChange: "left",
|
|
130
|
-
minWidth: "50%",
|
|
131
|
-
animation: interpolationAnimation
|
|
132
|
-
} : {}
|
|
133
|
-
};
|
|
134
|
-
const __css = {
|
|
135
|
-
w: `${percent}%`,
|
|
136
|
-
h: "100%",
|
|
137
|
-
...styles.filledTrack
|
|
138
|
-
};
|
|
139
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { css, __css, ...rest });
|
|
140
|
-
};
|
|
141
|
-
ProgressFilledTrack.displayName = "ProgressFilledTrack";
|
|
142
|
-
ProgressFilledTrack.__ui__ = "ProgressFilledTrack";
|
|
143
|
-
|
|
144
|
-
// src/circle-progress.tsx
|
|
145
|
-
var import_core2 = require("@yamada-ui/core");
|
|
146
|
-
var import_use_animation2 = require("@yamada-ui/use-animation");
|
|
147
|
-
var import_utils2 = require("@yamada-ui/utils");
|
|
148
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
149
|
-
var CircleProgress = (0, import_core2.forwardRef)(
|
|
35
|
+
var CircleProgress = (0, import_core.forwardRef)(
|
|
150
36
|
(props, ref) => {
|
|
151
|
-
const [styles, { size = "6rem", ...mergedProps }] = (0,
|
|
37
|
+
const [styles, { size = "6rem", ...mergedProps }] = (0, import_core.useComponentStyle)(
|
|
152
38
|
"CircleProgress",
|
|
153
39
|
props
|
|
154
40
|
);
|
|
155
41
|
let {
|
|
156
42
|
className,
|
|
157
|
-
children,
|
|
158
43
|
boxSize = size,
|
|
159
|
-
|
|
44
|
+
children,
|
|
160
45
|
color = "primary",
|
|
161
|
-
trackColor = "border",
|
|
162
|
-
value = 0,
|
|
163
|
-
min = 0,
|
|
164
|
-
max = 100,
|
|
165
46
|
isAnimation = false,
|
|
166
47
|
isRounded,
|
|
48
|
+
max = 100,
|
|
49
|
+
min = 0,
|
|
167
50
|
speed = ["1.4s", "2s"],
|
|
51
|
+
thickness = "0.625rem",
|
|
52
|
+
trackColor = "border",
|
|
53
|
+
value = 0,
|
|
168
54
|
...rest
|
|
169
|
-
} = (0,
|
|
55
|
+
} = (0, import_core.omitThemeProps)(mergedProps);
|
|
170
56
|
const isTransparent = value === 0 && !isAnimation;
|
|
171
|
-
const percent = (0,
|
|
57
|
+
const percent = (0, import_utils.valueToPercent)(value, min, max);
|
|
172
58
|
const interval = !isAnimation ? percent * 2.64 : void 0;
|
|
173
|
-
const animation = (0,
|
|
59
|
+
const animation = (0, import_use_animation.useAnimation)({
|
|
60
|
+
duration: typeof speed[0] === "string" ? speed[0] : `${speed[0]}s`,
|
|
61
|
+
iterationCount: "infinite",
|
|
174
62
|
keyframes: {
|
|
175
63
|
"0%": {
|
|
176
64
|
strokeDasharray: "1, 400",
|
|
@@ -185,48 +73,54 @@ var CircleProgress = (0, import_core2.forwardRef)(
|
|
|
185
73
|
strokeDashoffset: "-260"
|
|
186
74
|
}
|
|
187
75
|
},
|
|
188
|
-
duration: typeof speed[0] === "string" ? speed[0] : `${speed[0]}s`,
|
|
189
|
-
iterationCount: "infinite",
|
|
190
76
|
timingFunction: "linear"
|
|
191
77
|
});
|
|
192
78
|
const css = {
|
|
193
79
|
...styles,
|
|
80
|
+
fontSize: "$boxSize",
|
|
194
81
|
vars: [
|
|
195
82
|
{ name: "boxSize", token: "sizes", value: boxSize },
|
|
196
83
|
{ name: "thickness", token: "sizes", value: thickness }
|
|
197
|
-
]
|
|
198
|
-
fontSize: "$boxSize"
|
|
84
|
+
]
|
|
199
85
|
};
|
|
200
86
|
const circleProps = isAnimation ? {
|
|
201
87
|
animation
|
|
202
88
|
} : {
|
|
203
|
-
strokeDashoffset: 66,
|
|
204
89
|
strokeDasharray: interval == null ? void 0 : `${interval} ${264 - interval}`,
|
|
205
|
-
|
|
90
|
+
strokeDashoffset: 66,
|
|
206
91
|
transitionDuration: "0.6s",
|
|
92
|
+
transitionProperty: "stroke-dasharray, stroke",
|
|
207
93
|
transitionTimingFunction: "ease"
|
|
208
94
|
};
|
|
209
|
-
return /* @__PURE__ */ (0,
|
|
210
|
-
|
|
95
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
96
|
+
import_core.ui.div,
|
|
211
97
|
{
|
|
212
98
|
ref,
|
|
213
|
-
className: (0,
|
|
99
|
+
className: (0, import_utils.cx)("ui-circle-progress", className),
|
|
214
100
|
__css: css,
|
|
215
101
|
...rest,
|
|
216
102
|
children: [
|
|
217
|
-
/* @__PURE__ */ (0,
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
103
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
104
|
+
CircleProgressShape,
|
|
105
|
+
{
|
|
106
|
+
boxSize,
|
|
107
|
+
isAnimation,
|
|
108
|
+
speed,
|
|
109
|
+
children: [
|
|
110
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CircleProgressCircle, { stroke: trackColor, strokeWidth: "$thickness" }),
|
|
111
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
112
|
+
CircleProgressCircle,
|
|
113
|
+
{
|
|
114
|
+
opacity: isTransparent ? 0 : void 0,
|
|
115
|
+
stroke: color,
|
|
116
|
+
strokeLinecap: isRounded ? "round" : void 0,
|
|
117
|
+
strokeWidth: "$thickness",
|
|
118
|
+
...circleProps
|
|
119
|
+
}
|
|
120
|
+
)
|
|
121
|
+
]
|
|
122
|
+
}
|
|
123
|
+
),
|
|
230
124
|
children
|
|
231
125
|
]
|
|
232
126
|
}
|
|
@@ -235,11 +129,18 @@ var CircleProgress = (0, import_core2.forwardRef)(
|
|
|
235
129
|
);
|
|
236
130
|
CircleProgress.displayName = "CircleProgress";
|
|
237
131
|
CircleProgress.__ui__ = "CircleProgress";
|
|
238
|
-
var
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
var
|
|
242
|
-
|
|
132
|
+
var CircleProgressCircle = ({ ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.circle, { cx: 50, cy: 50, fill: "transparent", r: 42, ...rest });
|
|
133
|
+
CircleProgressCircle.displayName = "CircleProgressCircle";
|
|
134
|
+
CircleProgressCircle.__ui__ = "CircleProgressCircle";
|
|
135
|
+
var CircleProgressShape = ({
|
|
136
|
+
boxSize,
|
|
137
|
+
isAnimation,
|
|
138
|
+
speed,
|
|
139
|
+
...rest
|
|
140
|
+
}) => {
|
|
141
|
+
const animation = (0, import_use_animation.useAnimation)({
|
|
142
|
+
duration: typeof speed[1] === "string" ? speed[1] : `${speed[1]}s`,
|
|
143
|
+
iterationCount: "infinite",
|
|
243
144
|
keyframes: {
|
|
244
145
|
"0%": {
|
|
245
146
|
transform: "rotate(0deg)"
|
|
@@ -248,32 +149,144 @@ var Shape = ({ boxSize, isAnimation, speed, ...rest }) => {
|
|
|
248
149
|
transform: "rotate(360deg)"
|
|
249
150
|
}
|
|
250
151
|
},
|
|
251
|
-
duration: typeof speed[1] === "string" ? speed[1] : `${speed[1]}s`,
|
|
252
|
-
iterationCount: "infinite",
|
|
253
152
|
timingFunction: "linear"
|
|
254
153
|
});
|
|
255
154
|
const css = {
|
|
256
|
-
display: "block",
|
|
257
155
|
boxSize,
|
|
156
|
+
display: "block",
|
|
258
157
|
...isAnimation ? { animation } : {}
|
|
259
158
|
};
|
|
260
|
-
return /* @__PURE__ */ (0,
|
|
159
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.svg, { viewBox: "0 0 100 100", __css: css, ...rest });
|
|
261
160
|
};
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
var CircleProgressLabel = (0,
|
|
161
|
+
CircleProgressShape.displayName = "CircleProgressShape";
|
|
162
|
+
CircleProgressShape.__ui__ = "CircleProgressShape";
|
|
163
|
+
var CircleProgressLabel = (0, import_core.ui)("span", {
|
|
265
164
|
baseStyle: {
|
|
165
|
+
fontSize: "0.25em",
|
|
166
|
+
left: "50%",
|
|
266
167
|
position: "absolute",
|
|
168
|
+
textAlign: "center",
|
|
267
169
|
top: "50%",
|
|
268
|
-
left: "50%",
|
|
269
170
|
transform: "translate(-50%, -50%)",
|
|
270
|
-
width: "100%"
|
|
271
|
-
fontSize: "0.25em",
|
|
272
|
-
textAlign: "center"
|
|
171
|
+
width: "100%"
|
|
273
172
|
}
|
|
274
173
|
});
|
|
275
174
|
CircleProgressLabel.displayName = "CircleProgressLabel";
|
|
276
175
|
CircleProgressLabel.__ui__ = "CircleProgressLabel";
|
|
176
|
+
|
|
177
|
+
// src/progress.tsx
|
|
178
|
+
var import_core2 = require("@yamada-ui/core");
|
|
179
|
+
var import_use_animation2 = require("@yamada-ui/use-animation");
|
|
180
|
+
var import_utils2 = require("@yamada-ui/utils");
|
|
181
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
182
|
+
var [ProgressProvider, useProgress] = (0, import_utils2.createContext)({
|
|
183
|
+
name: `ProgressStylesContext`,
|
|
184
|
+
errorMessage: `useProgress returned is 'undefined'. Seems you forgot to wrap the components in "<Progress />" `
|
|
185
|
+
});
|
|
186
|
+
var Progress = (0, import_core2.forwardRef)((props, ref) => {
|
|
187
|
+
var _a, _b;
|
|
188
|
+
const [styles, mergedProps] = (0, import_core2.useComponentMultiStyle)("Progress", props);
|
|
189
|
+
const {
|
|
190
|
+
className,
|
|
191
|
+
borderRadius: _borderRadius,
|
|
192
|
+
children,
|
|
193
|
+
hasStripe,
|
|
194
|
+
isAnimation,
|
|
195
|
+
isStripeAnimation,
|
|
196
|
+
max,
|
|
197
|
+
min,
|
|
198
|
+
rounded,
|
|
199
|
+
speed,
|
|
200
|
+
value,
|
|
201
|
+
...rest
|
|
202
|
+
} = (0, import_core2.omitThemeProps)(mergedProps, ["filledTrackColor"]);
|
|
203
|
+
const borderRadius = (_b = _borderRadius != null ? _borderRadius : rounded) != null ? _b : (_a = styles.track) == null ? void 0 : _a.borderRadius;
|
|
204
|
+
const css = {
|
|
205
|
+
overflow: "hidden",
|
|
206
|
+
pos: "relative",
|
|
207
|
+
w: "100%",
|
|
208
|
+
...styles.track
|
|
209
|
+
};
|
|
210
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ProgressProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
211
|
+
import_core2.ui.div,
|
|
212
|
+
{
|
|
213
|
+
ref,
|
|
214
|
+
className: (0, import_utils2.cx)("ui-progress", className),
|
|
215
|
+
borderRadius,
|
|
216
|
+
__css: css,
|
|
217
|
+
...rest,
|
|
218
|
+
children: [
|
|
219
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
220
|
+
ProgressFilledTrack,
|
|
221
|
+
{
|
|
222
|
+
borderRadius,
|
|
223
|
+
hasStripe,
|
|
224
|
+
isAnimation,
|
|
225
|
+
isStripeAnimation,
|
|
226
|
+
max,
|
|
227
|
+
min,
|
|
228
|
+
speed,
|
|
229
|
+
value
|
|
230
|
+
}
|
|
231
|
+
),
|
|
232
|
+
children
|
|
233
|
+
]
|
|
234
|
+
}
|
|
235
|
+
) });
|
|
236
|
+
});
|
|
237
|
+
Progress.displayName = "Progress";
|
|
238
|
+
Progress.__ui__ = "Progress";
|
|
239
|
+
var ProgressFilledTrack = ({
|
|
240
|
+
hasStripe,
|
|
241
|
+
isAnimation,
|
|
242
|
+
isStripeAnimation,
|
|
243
|
+
max = 100,
|
|
244
|
+
min = 0,
|
|
245
|
+
speed = "1.4s",
|
|
246
|
+
value = 0,
|
|
247
|
+
...rest
|
|
248
|
+
}) => {
|
|
249
|
+
const percent = (0, import_utils2.valueToPercent)(value, min, max);
|
|
250
|
+
const styles = useProgress();
|
|
251
|
+
const stripeAnimation = (0, import_use_animation2.useAnimation)({
|
|
252
|
+
duration: typeof speed === "string" ? speed : `${speed}s`,
|
|
253
|
+
iterationCount: "infinite",
|
|
254
|
+
keyframes: {
|
|
255
|
+
"0%": { bgPosition: "1rem 0" },
|
|
256
|
+
"100%": { bgPosition: "0 0" }
|
|
257
|
+
},
|
|
258
|
+
timingFunction: "linear"
|
|
259
|
+
});
|
|
260
|
+
const interpolationAnimation = (0, import_use_animation2.useAnimation)({
|
|
261
|
+
duration: typeof speed === "string" ? speed : `${speed}s`,
|
|
262
|
+
iterationCount: "infinite",
|
|
263
|
+
keyframes: {
|
|
264
|
+
"0%": { left: "-40%" },
|
|
265
|
+
"100%": { left: "100%" }
|
|
266
|
+
},
|
|
267
|
+
timingFunction: "ease"
|
|
268
|
+
});
|
|
269
|
+
isStripeAnimation = !isAnimation && hasStripe && isStripeAnimation;
|
|
270
|
+
const css = {
|
|
271
|
+
...isStripeAnimation ? {
|
|
272
|
+
animation: stripeAnimation
|
|
273
|
+
} : {},
|
|
274
|
+
...isAnimation ? {
|
|
275
|
+
animation: interpolationAnimation,
|
|
276
|
+
minWidth: "50%",
|
|
277
|
+
position: "absolute",
|
|
278
|
+
willChange: "left"
|
|
279
|
+
} : {}
|
|
280
|
+
};
|
|
281
|
+
const __css = {
|
|
282
|
+
h: "100%",
|
|
283
|
+
w: `${percent}%`,
|
|
284
|
+
...styles.filledTrack
|
|
285
|
+
};
|
|
286
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.div, { css, __css, ...rest });
|
|
287
|
+
};
|
|
288
|
+
ProgressFilledTrack.displayName = "ProgressFilledTrack";
|
|
289
|
+
ProgressFilledTrack.__ui__ = "ProgressFilledTrack";
|
|
277
290
|
// Annotate the CommonJS export names for ESM import in node:
|
|
278
291
|
0 && (module.exports = {
|
|
279
292
|
CircleProgress,
|