@microui-kit/circle-progress 0.0.2-dev-1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/chunk-KEFKFLY7.mjs +50 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.js +110 -0
- package/dist/index.mjs +38 -0
- package/dist/styles.d.ts +6 -0
- package/dist/styles.js +71 -0
- package/dist/styles.mjs +7 -0
- package/dist/types.d.ts +10 -0
- package/dist/types.js +19 -0
- package/dist/types.mjs +1 -0
- package/package.json +67 -0
@@ -0,0 +1,50 @@
|
|
1
|
+
"use client";
|
2
|
+
|
3
|
+
// src/styles.ts
|
4
|
+
var styles_default = ({
|
5
|
+
theme,
|
6
|
+
renderer,
|
7
|
+
size = 24,
|
8
|
+
color
|
9
|
+
}) => {
|
10
|
+
const rotateKeyframe = () => ({
|
11
|
+
"100%": {
|
12
|
+
transform: "rotate(360deg)"
|
13
|
+
}
|
14
|
+
});
|
15
|
+
const dashKeyframe = () => ({
|
16
|
+
"0%": {
|
17
|
+
strokeDasharray: "1,200",
|
18
|
+
strokeDashoffset: 0
|
19
|
+
},
|
20
|
+
"50%": {
|
21
|
+
strokeDasharray: "89,200",
|
22
|
+
strokeDashoffset: -35
|
23
|
+
},
|
24
|
+
"100%": {
|
25
|
+
strokeDasharray: "89,200",
|
26
|
+
strokeDashoffset: -124
|
27
|
+
}
|
28
|
+
});
|
29
|
+
const rotateEffect = renderer.renderKeyframe(rotateKeyframe);
|
30
|
+
const dashEffect = renderer.renderKeyframe(dashKeyframe);
|
31
|
+
return {
|
32
|
+
wrapper: {
|
33
|
+
height: `${size}px`,
|
34
|
+
transformOrigin: "center center",
|
35
|
+
width: `${size}px`,
|
36
|
+
animation: `${rotateEffect} 2s linear infinite`
|
37
|
+
},
|
38
|
+
circle: {
|
39
|
+
strokeDasharray: "150,200",
|
40
|
+
strokeDashoffset: -10,
|
41
|
+
strokeLinecap: "round",
|
42
|
+
stroke: color || theme.colors.base,
|
43
|
+
animation: `${dashEffect} 1.5s ease-in-out infinite`
|
44
|
+
}
|
45
|
+
};
|
46
|
+
};
|
47
|
+
|
48
|
+
export {
|
49
|
+
styles_default
|
50
|
+
};
|
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
@@ -0,0 +1,110 @@
|
|
1
|
+
"use client";
|
2
|
+
"use strict";
|
3
|
+
var __create = Object.create;
|
4
|
+
var __defProp = Object.defineProperty;
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
9
|
+
var __export = (target, all) => {
|
10
|
+
for (var name in all)
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
12
|
+
};
|
13
|
+
var __copyProps = (to, from, except, desc) => {
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
15
|
+
for (let key of __getOwnPropNames(from))
|
16
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
17
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
18
|
+
}
|
19
|
+
return to;
|
20
|
+
};
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
22
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
23
|
+
mod
|
24
|
+
));
|
25
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
26
|
+
|
27
|
+
// src/index.tsx
|
28
|
+
var src_exports = {};
|
29
|
+
__export(src_exports, {
|
30
|
+
default: () => src_default
|
31
|
+
});
|
32
|
+
module.exports = __toCommonJS(src_exports);
|
33
|
+
var import_classnames = __toESM(require("classnames"));
|
34
|
+
var import_with_styles = require("@microui-kit/with-styles");
|
35
|
+
|
36
|
+
// src/styles.ts
|
37
|
+
var styles_default = ({
|
38
|
+
theme,
|
39
|
+
renderer,
|
40
|
+
size = 24,
|
41
|
+
color
|
42
|
+
}) => {
|
43
|
+
const rotateKeyframe = () => ({
|
44
|
+
"100%": {
|
45
|
+
transform: "rotate(360deg)"
|
46
|
+
}
|
47
|
+
});
|
48
|
+
const dashKeyframe = () => ({
|
49
|
+
"0%": {
|
50
|
+
strokeDasharray: "1,200",
|
51
|
+
strokeDashoffset: 0
|
52
|
+
},
|
53
|
+
"50%": {
|
54
|
+
strokeDasharray: "89,200",
|
55
|
+
strokeDashoffset: -35
|
56
|
+
},
|
57
|
+
"100%": {
|
58
|
+
strokeDasharray: "89,200",
|
59
|
+
strokeDashoffset: -124
|
60
|
+
}
|
61
|
+
});
|
62
|
+
const rotateEffect = renderer.renderKeyframe(rotateKeyframe);
|
63
|
+
const dashEffect = renderer.renderKeyframe(dashKeyframe);
|
64
|
+
return {
|
65
|
+
wrapper: {
|
66
|
+
height: `${size}px`,
|
67
|
+
transformOrigin: "center center",
|
68
|
+
width: `${size}px`,
|
69
|
+
animation: `${rotateEffect} 2s linear infinite`
|
70
|
+
},
|
71
|
+
circle: {
|
72
|
+
strokeDasharray: "150,200",
|
73
|
+
strokeDashoffset: -10,
|
74
|
+
strokeLinecap: "round",
|
75
|
+
stroke: color || theme.colors.base,
|
76
|
+
animation: `${dashEffect} 1.5s ease-in-out infinite`
|
77
|
+
}
|
78
|
+
};
|
79
|
+
};
|
80
|
+
|
81
|
+
// src/index.tsx
|
82
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
83
|
+
var CircleProgress = ({
|
84
|
+
prefixCls = "micro-circle-progress",
|
85
|
+
className,
|
86
|
+
classes = {},
|
87
|
+
thickness = 3.6
|
88
|
+
}) => {
|
89
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
90
|
+
"svg",
|
91
|
+
{
|
92
|
+
className: (0, import_classnames.default)(prefixCls, className, classes.wrapper),
|
93
|
+
viewBox: "25 25 50 50",
|
94
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
95
|
+
"circle",
|
96
|
+
{
|
97
|
+
className: (0, import_classnames.default)(classes.circle),
|
98
|
+
cx: "50",
|
99
|
+
cy: "50",
|
100
|
+
r: "20",
|
101
|
+
fill: "none",
|
102
|
+
"stroke-width": thickness
|
103
|
+
}
|
104
|
+
)
|
105
|
+
}
|
106
|
+
);
|
107
|
+
};
|
108
|
+
var src_default = (0, import_with_styles.withStyles)(styles_default)(CircleProgress);
|
109
|
+
// Annotate the CommonJS export names for ESM import in node:
|
110
|
+
0 && (module.exports = {});
|
package/dist/index.mjs
ADDED
@@ -0,0 +1,38 @@
|
|
1
|
+
"use client";
|
2
|
+
import {
|
3
|
+
styles_default
|
4
|
+
} from "./chunk-KEFKFLY7.mjs";
|
5
|
+
|
6
|
+
// src/index.tsx
|
7
|
+
import classNames from "classnames";
|
8
|
+
import { withStyles } from "@microui-kit/with-styles";
|
9
|
+
import { jsx } from "react/jsx-runtime";
|
10
|
+
var CircleProgress = ({
|
11
|
+
prefixCls = "micro-circle-progress",
|
12
|
+
className,
|
13
|
+
classes = {},
|
14
|
+
thickness = 3.6
|
15
|
+
}) => {
|
16
|
+
return /* @__PURE__ */ jsx(
|
17
|
+
"svg",
|
18
|
+
{
|
19
|
+
className: classNames(prefixCls, className, classes.wrapper),
|
20
|
+
viewBox: "25 25 50 50",
|
21
|
+
children: /* @__PURE__ */ jsx(
|
22
|
+
"circle",
|
23
|
+
{
|
24
|
+
className: classNames(classes.circle),
|
25
|
+
cx: "50",
|
26
|
+
cy: "50",
|
27
|
+
r: "20",
|
28
|
+
fill: "none",
|
29
|
+
"stroke-width": thickness
|
30
|
+
}
|
31
|
+
)
|
32
|
+
}
|
33
|
+
);
|
34
|
+
};
|
35
|
+
var src_default = withStyles(styles_default)(CircleProgress);
|
36
|
+
export {
|
37
|
+
src_default as default
|
38
|
+
};
|
package/dist/styles.d.ts
ADDED
package/dist/styles.js
ADDED
@@ -0,0 +1,71 @@
|
|
1
|
+
"use client";
|
2
|
+
"use strict";
|
3
|
+
var __defProp = Object.defineProperty;
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
7
|
+
var __export = (target, all) => {
|
8
|
+
for (var name in all)
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
10
|
+
};
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
13
|
+
for (let key of __getOwnPropNames(from))
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
16
|
+
}
|
17
|
+
return to;
|
18
|
+
};
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
20
|
+
|
21
|
+
// src/styles.ts
|
22
|
+
var styles_exports = {};
|
23
|
+
__export(styles_exports, {
|
24
|
+
default: () => styles_default
|
25
|
+
});
|
26
|
+
module.exports = __toCommonJS(styles_exports);
|
27
|
+
var styles_default = ({
|
28
|
+
theme,
|
29
|
+
renderer,
|
30
|
+
size = 24,
|
31
|
+
color
|
32
|
+
}) => {
|
33
|
+
const rotateKeyframe = () => ({
|
34
|
+
"100%": {
|
35
|
+
transform: "rotate(360deg)"
|
36
|
+
}
|
37
|
+
});
|
38
|
+
const dashKeyframe = () => ({
|
39
|
+
"0%": {
|
40
|
+
strokeDasharray: "1,200",
|
41
|
+
strokeDashoffset: 0
|
42
|
+
},
|
43
|
+
"50%": {
|
44
|
+
strokeDasharray: "89,200",
|
45
|
+
strokeDashoffset: -35
|
46
|
+
},
|
47
|
+
"100%": {
|
48
|
+
strokeDasharray: "89,200",
|
49
|
+
strokeDashoffset: -124
|
50
|
+
}
|
51
|
+
});
|
52
|
+
const rotateEffect = renderer.renderKeyframe(rotateKeyframe);
|
53
|
+
const dashEffect = renderer.renderKeyframe(dashKeyframe);
|
54
|
+
return {
|
55
|
+
wrapper: {
|
56
|
+
height: `${size}px`,
|
57
|
+
transformOrigin: "center center",
|
58
|
+
width: `${size}px`,
|
59
|
+
animation: `${rotateEffect} 2s linear infinite`
|
60
|
+
},
|
61
|
+
circle: {
|
62
|
+
strokeDasharray: "150,200",
|
63
|
+
strokeDashoffset: -10,
|
64
|
+
strokeLinecap: "round",
|
65
|
+
stroke: color || theme.colors.base,
|
66
|
+
animation: `${dashEffect} 1.5s ease-in-out infinite`
|
67
|
+
}
|
68
|
+
};
|
69
|
+
};
|
70
|
+
// Annotate the CommonJS export names for ESM import in node:
|
71
|
+
0 && (module.exports = {});
|
package/dist/styles.mjs
ADDED
package/dist/types.d.ts
ADDED
@@ -0,0 +1,10 @@
|
|
1
|
+
import { FCWithStylesProps } from '@microui-kit/types';
|
2
|
+
export { Style, Styles } from '@microui-kit/types';
|
3
|
+
|
4
|
+
interface CircleProgressProps extends FCWithStylesProps {
|
5
|
+
size?: number;
|
6
|
+
thickness?: number;
|
7
|
+
color?: string;
|
8
|
+
}
|
9
|
+
|
10
|
+
export { CircleProgressProps };
|
package/dist/types.js
ADDED
@@ -0,0 +1,19 @@
|
|
1
|
+
"use client";
|
2
|
+
"use strict";
|
3
|
+
var __defProp = Object.defineProperty;
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
7
|
+
var __copyProps = (to, from, except, desc) => {
|
8
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
9
|
+
for (let key of __getOwnPropNames(from))
|
10
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
11
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
12
|
+
}
|
13
|
+
return to;
|
14
|
+
};
|
15
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
16
|
+
|
17
|
+
// src/types.ts
|
18
|
+
var types_exports = {};
|
19
|
+
module.exports = __toCommonJS(types_exports);
|
package/dist/types.mjs
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
"use client";
|
package/package.json
ADDED
@@ -0,0 +1,67 @@
|
|
1
|
+
{
|
2
|
+
"name": "@microui-kit/circle-progress",
|
3
|
+
"version": "0.0.2-dev-1",
|
4
|
+
"description": "",
|
5
|
+
"keywords": [],
|
6
|
+
"author": "",
|
7
|
+
"homepage": "https://microui.org",
|
8
|
+
"license": "MIT",
|
9
|
+
"main": "dist/index.js",
|
10
|
+
"sideEffects": false,
|
11
|
+
"files": [
|
12
|
+
"dist"
|
13
|
+
],
|
14
|
+
"publishConfig": {
|
15
|
+
"access": "public"
|
16
|
+
},
|
17
|
+
"repository": {
|
18
|
+
"type": "git",
|
19
|
+
"url": "git+https://github.com/microui-org/microui.git",
|
20
|
+
"directory": "packages/components/circle-progress"
|
21
|
+
},
|
22
|
+
"scripts": {
|
23
|
+
"setup": "yarn install",
|
24
|
+
"build": "tsup src --dts",
|
25
|
+
"dev": "pnpm build:fast --watch",
|
26
|
+
"clean": "rimraf dist .turbo",
|
27
|
+
"typecheck": "tsc --noEmit",
|
28
|
+
"build:fast": "tsup src",
|
29
|
+
"prepack": "clean-package",
|
30
|
+
"postpack": "clean-package restore",
|
31
|
+
"prepublishOnly": "node ../../../scripts/prepublish.js",
|
32
|
+
"postpublish": "node ../../../scripts/postpublish.js"
|
33
|
+
},
|
34
|
+
"dependencies": {
|
35
|
+
"@microui-kit/types": "0.0.2-dev-8",
|
36
|
+
"@microui-kit/with-styles": "0.0.2-dev-3",
|
37
|
+
"classnames": "^2.5.1"
|
38
|
+
},
|
39
|
+
"peerDependencies": {
|
40
|
+
"react": ">=18"
|
41
|
+
},
|
42
|
+
"clean-package": "../../../clean-package.config.json",
|
43
|
+
"tsup": {
|
44
|
+
"clean": true,
|
45
|
+
"target": "es2019",
|
46
|
+
"format": [
|
47
|
+
"cjs",
|
48
|
+
"esm"
|
49
|
+
],
|
50
|
+
"banner": {
|
51
|
+
"js": "\"use client\";"
|
52
|
+
},
|
53
|
+
"external": [
|
54
|
+
"classnames"
|
55
|
+
]
|
56
|
+
},
|
57
|
+
"module": "dist/index.mjs",
|
58
|
+
"types": "dist/index.d.ts",
|
59
|
+
"exports": {
|
60
|
+
".": {
|
61
|
+
"types": "./dist/index.d.ts",
|
62
|
+
"import": "./dist/index.mjs",
|
63
|
+
"require": "./dist/index.js"
|
64
|
+
},
|
65
|
+
"./package.json": "./package.json"
|
66
|
+
}
|
67
|
+
}
|