omui-lib 1.0.25 → 1.0.27

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.
@@ -0,0 +1,141 @@
1
+ // src/components/CircularProgressCard/CircularProgressCard.jsx
2
+ import React from "react";
3
+ var CircularProgressCard = ({
4
+ title = "Project Progress",
5
+ value = 75,
6
+ size = 180,
7
+ strokeWidth = 14,
8
+ color = "#6366f1",
9
+ background = "rgba(255,255,255,0.1)",
10
+ label = "Completed"
11
+ }) => {
12
+ const radius = (size - strokeWidth) / 2;
13
+ const circumference = 2 * Math.PI * radius;
14
+ const offset = circumference - value / 100 * circumference;
15
+ return /* @__PURE__ */ React.createElement(
16
+ "div",
17
+ {
18
+ style: {
19
+ width: "280px",
20
+ padding: "24px",
21
+ borderRadius: "20px",
22
+ background: "rgba(255,255,255,0.08)",
23
+ border: "1px solid rgba(255,255,255,0.12)",
24
+ backdropFilter: "blur(12px)",
25
+ WebkitBackdropFilter: "blur(12px)",
26
+ color: "#fff",
27
+ textAlign: "center",
28
+ boxShadow: "0 10px 30px rgba(0,0,0,0.2)"
29
+ }
30
+ },
31
+ /* @__PURE__ */ React.createElement(
32
+ "h3",
33
+ {
34
+ style: {
35
+ margin: "0 0 24px",
36
+ fontSize: "18px",
37
+ fontWeight: "600"
38
+ }
39
+ },
40
+ title
41
+ ),
42
+ /* @__PURE__ */ React.createElement(
43
+ "div",
44
+ {
45
+ style: {
46
+ position: "relative",
47
+ width: `${size}px`,
48
+ height: `${size}px`,
49
+ margin: "0 auto 20px"
50
+ }
51
+ },
52
+ /* @__PURE__ */ React.createElement(
53
+ "svg",
54
+ {
55
+ width: size,
56
+ height: size,
57
+ style: {
58
+ transform: "rotate(-90deg)"
59
+ }
60
+ },
61
+ /* @__PURE__ */ React.createElement(
62
+ "circle",
63
+ {
64
+ cx: size / 2,
65
+ cy: size / 2,
66
+ r: radius,
67
+ fill: "none",
68
+ stroke: background,
69
+ strokeWidth
70
+ }
71
+ ),
72
+ /* @__PURE__ */ React.createElement(
73
+ "circle",
74
+ {
75
+ cx: size / 2,
76
+ cy: size / 2,
77
+ r: radius,
78
+ fill: "none",
79
+ stroke: color,
80
+ strokeWidth,
81
+ strokeLinecap: "round",
82
+ strokeDasharray: circumference,
83
+ strokeDashoffset: offset,
84
+ style: {
85
+ transition: "stroke-dashoffset 0.6s ease"
86
+ }
87
+ }
88
+ )
89
+ ),
90
+ /* @__PURE__ */ React.createElement(
91
+ "div",
92
+ {
93
+ style: {
94
+ position: "absolute",
95
+ inset: 0,
96
+ display: "flex",
97
+ flexDirection: "column",
98
+ justifyContent: "center",
99
+ alignItems: "center"
100
+ }
101
+ },
102
+ /* @__PURE__ */ React.createElement(
103
+ "span",
104
+ {
105
+ style: {
106
+ fontSize: "32px",
107
+ fontWeight: "700"
108
+ }
109
+ },
110
+ value,
111
+ "%"
112
+ ),
113
+ /* @__PURE__ */ React.createElement(
114
+ "span",
115
+ {
116
+ style: {
117
+ fontSize: "12px",
118
+ color: "rgba(255,255,255,0.5)"
119
+ }
120
+ },
121
+ label
122
+ )
123
+ )
124
+ ),
125
+ /* @__PURE__ */ React.createElement(
126
+ "p",
127
+ {
128
+ style: {
129
+ margin: 0,
130
+ fontSize: "13px",
131
+ color: "rgba(255,255,255,0.55)"
132
+ }
133
+ },
134
+ value >= 100 ? "Everything is completed!" : `${100 - value}% remaining`
135
+ )
136
+ );
137
+ };
138
+
139
+ export {
140
+ CircularProgressCard
141
+ };
@@ -0,0 +1,174 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
20
+ // If the importer is in node compatibility mode or this is not an ESM
21
+ // file that has been converted to a CommonJS file using a Babel-
22
+ // compatible transform (i.e. "__esModule" has not been set), then set
23
+ // "default" to the CommonJS "module.exports" for node compatibility.
24
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
25
+ mod
26
+ ));
27
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
28
+
29
+ // src/components/CircularProgressCard/CircularProgressCard.jsx
30
+ var CircularProgressCard_exports = {};
31
+ __export(CircularProgressCard_exports, {
32
+ CircularProgressCard: () => CircularProgressCard
33
+ });
34
+ module.exports = __toCommonJS(CircularProgressCard_exports);
35
+ var import_react = __toESM(require("react"));
36
+ var CircularProgressCard = ({
37
+ title = "Project Progress",
38
+ value = 75,
39
+ size = 180,
40
+ strokeWidth = 14,
41
+ color = "#6366f1",
42
+ background = "rgba(255,255,255,0.1)",
43
+ label = "Completed"
44
+ }) => {
45
+ const radius = (size - strokeWidth) / 2;
46
+ const circumference = 2 * Math.PI * radius;
47
+ const offset = circumference - value / 100 * circumference;
48
+ return /* @__PURE__ */ import_react.default.createElement(
49
+ "div",
50
+ {
51
+ style: {
52
+ width: "280px",
53
+ padding: "24px",
54
+ borderRadius: "20px",
55
+ background: "rgba(255,255,255,0.08)",
56
+ border: "1px solid rgba(255,255,255,0.12)",
57
+ backdropFilter: "blur(12px)",
58
+ WebkitBackdropFilter: "blur(12px)",
59
+ color: "#fff",
60
+ textAlign: "center",
61
+ boxShadow: "0 10px 30px rgba(0,0,0,0.2)"
62
+ }
63
+ },
64
+ /* @__PURE__ */ import_react.default.createElement(
65
+ "h3",
66
+ {
67
+ style: {
68
+ margin: "0 0 24px",
69
+ fontSize: "18px",
70
+ fontWeight: "600"
71
+ }
72
+ },
73
+ title
74
+ ),
75
+ /* @__PURE__ */ import_react.default.createElement(
76
+ "div",
77
+ {
78
+ style: {
79
+ position: "relative",
80
+ width: `${size}px`,
81
+ height: `${size}px`,
82
+ margin: "0 auto 20px"
83
+ }
84
+ },
85
+ /* @__PURE__ */ import_react.default.createElement(
86
+ "svg",
87
+ {
88
+ width: size,
89
+ height: size,
90
+ style: {
91
+ transform: "rotate(-90deg)"
92
+ }
93
+ },
94
+ /* @__PURE__ */ import_react.default.createElement(
95
+ "circle",
96
+ {
97
+ cx: size / 2,
98
+ cy: size / 2,
99
+ r: radius,
100
+ fill: "none",
101
+ stroke: background,
102
+ strokeWidth
103
+ }
104
+ ),
105
+ /* @__PURE__ */ import_react.default.createElement(
106
+ "circle",
107
+ {
108
+ cx: size / 2,
109
+ cy: size / 2,
110
+ r: radius,
111
+ fill: "none",
112
+ stroke: color,
113
+ strokeWidth,
114
+ strokeLinecap: "round",
115
+ strokeDasharray: circumference,
116
+ strokeDashoffset: offset,
117
+ style: {
118
+ transition: "stroke-dashoffset 0.6s ease"
119
+ }
120
+ }
121
+ )
122
+ ),
123
+ /* @__PURE__ */ import_react.default.createElement(
124
+ "div",
125
+ {
126
+ style: {
127
+ position: "absolute",
128
+ inset: 0,
129
+ display: "flex",
130
+ flexDirection: "column",
131
+ justifyContent: "center",
132
+ alignItems: "center"
133
+ }
134
+ },
135
+ /* @__PURE__ */ import_react.default.createElement(
136
+ "span",
137
+ {
138
+ style: {
139
+ fontSize: "32px",
140
+ fontWeight: "700"
141
+ }
142
+ },
143
+ value,
144
+ "%"
145
+ ),
146
+ /* @__PURE__ */ import_react.default.createElement(
147
+ "span",
148
+ {
149
+ style: {
150
+ fontSize: "12px",
151
+ color: "rgba(255,255,255,0.5)"
152
+ }
153
+ },
154
+ label
155
+ )
156
+ )
157
+ ),
158
+ /* @__PURE__ */ import_react.default.createElement(
159
+ "p",
160
+ {
161
+ style: {
162
+ margin: 0,
163
+ fontSize: "13px",
164
+ color: "rgba(255,255,255,0.55)"
165
+ }
166
+ },
167
+ value >= 100 ? "Everything is completed!" : `${100 - value}% remaining`
168
+ )
169
+ );
170
+ };
171
+ // Annotate the CommonJS export names for ESM import in node:
172
+ 0 && (module.exports = {
173
+ CircularProgressCard
174
+ });
@@ -0,0 +1,6 @@
1
+ import {
2
+ CircularProgressCard
3
+ } from "../../chunk-336OCT6F.mjs";
4
+ export {
5
+ CircularProgressCard
6
+ };
package/dist/index.js CHANGED
@@ -33,6 +33,7 @@ __export(index_exports, {
33
33
  BarChartCard: () => BarChartCard,
34
34
  BlogCard: () => BlogCard,
35
35
  Button: () => Button,
36
+ CircularProgressCard: () => CircularProgressCard,
36
37
  CommentCard: () => CommentCard,
37
38
  DonutChartCard: () => DonutChartCard,
38
39
  FeatureCard: () => FeatureCard,
@@ -2240,12 +2241,151 @@ var DonutChartCard = ({
2240
2241
  )
2241
2242
  );
2242
2243
  };
2244
+
2245
+ // src/components/CircularProgressCard/CircularProgressCard.jsx
2246
+ var import_react22 = __toESM(require("react"));
2247
+ var CircularProgressCard = ({
2248
+ title = "Project Progress",
2249
+ value = 75,
2250
+ size = 180,
2251
+ strokeWidth = 14,
2252
+ color = "#6366f1",
2253
+ background = "rgba(255,255,255,0.1)",
2254
+ label = "Completed"
2255
+ }) => {
2256
+ const radius = (size - strokeWidth) / 2;
2257
+ const circumference = 2 * Math.PI * radius;
2258
+ const offset = circumference - value / 100 * circumference;
2259
+ return /* @__PURE__ */ import_react22.default.createElement(
2260
+ "div",
2261
+ {
2262
+ style: {
2263
+ width: "280px",
2264
+ padding: "24px",
2265
+ borderRadius: "20px",
2266
+ background: "rgba(255,255,255,0.08)",
2267
+ border: "1px solid rgba(255,255,255,0.12)",
2268
+ backdropFilter: "blur(12px)",
2269
+ WebkitBackdropFilter: "blur(12px)",
2270
+ color: "#fff",
2271
+ textAlign: "center",
2272
+ boxShadow: "0 10px 30px rgba(0,0,0,0.2)"
2273
+ }
2274
+ },
2275
+ /* @__PURE__ */ import_react22.default.createElement(
2276
+ "h3",
2277
+ {
2278
+ style: {
2279
+ margin: "0 0 24px",
2280
+ fontSize: "18px",
2281
+ fontWeight: "600"
2282
+ }
2283
+ },
2284
+ title
2285
+ ),
2286
+ /* @__PURE__ */ import_react22.default.createElement(
2287
+ "div",
2288
+ {
2289
+ style: {
2290
+ position: "relative",
2291
+ width: `${size}px`,
2292
+ height: `${size}px`,
2293
+ margin: "0 auto 20px"
2294
+ }
2295
+ },
2296
+ /* @__PURE__ */ import_react22.default.createElement(
2297
+ "svg",
2298
+ {
2299
+ width: size,
2300
+ height: size,
2301
+ style: {
2302
+ transform: "rotate(-90deg)"
2303
+ }
2304
+ },
2305
+ /* @__PURE__ */ import_react22.default.createElement(
2306
+ "circle",
2307
+ {
2308
+ cx: size / 2,
2309
+ cy: size / 2,
2310
+ r: radius,
2311
+ fill: "none",
2312
+ stroke: background,
2313
+ strokeWidth
2314
+ }
2315
+ ),
2316
+ /* @__PURE__ */ import_react22.default.createElement(
2317
+ "circle",
2318
+ {
2319
+ cx: size / 2,
2320
+ cy: size / 2,
2321
+ r: radius,
2322
+ fill: "none",
2323
+ stroke: color,
2324
+ strokeWidth,
2325
+ strokeLinecap: "round",
2326
+ strokeDasharray: circumference,
2327
+ strokeDashoffset: offset,
2328
+ style: {
2329
+ transition: "stroke-dashoffset 0.6s ease"
2330
+ }
2331
+ }
2332
+ )
2333
+ ),
2334
+ /* @__PURE__ */ import_react22.default.createElement(
2335
+ "div",
2336
+ {
2337
+ style: {
2338
+ position: "absolute",
2339
+ inset: 0,
2340
+ display: "flex",
2341
+ flexDirection: "column",
2342
+ justifyContent: "center",
2343
+ alignItems: "center"
2344
+ }
2345
+ },
2346
+ /* @__PURE__ */ import_react22.default.createElement(
2347
+ "span",
2348
+ {
2349
+ style: {
2350
+ fontSize: "32px",
2351
+ fontWeight: "700"
2352
+ }
2353
+ },
2354
+ value,
2355
+ "%"
2356
+ ),
2357
+ /* @__PURE__ */ import_react22.default.createElement(
2358
+ "span",
2359
+ {
2360
+ style: {
2361
+ fontSize: "12px",
2362
+ color: "rgba(255,255,255,0.5)"
2363
+ }
2364
+ },
2365
+ label
2366
+ )
2367
+ )
2368
+ ),
2369
+ /* @__PURE__ */ import_react22.default.createElement(
2370
+ "p",
2371
+ {
2372
+ style: {
2373
+ margin: 0,
2374
+ fontSize: "13px",
2375
+ color: "rgba(255,255,255,0.55)"
2376
+ }
2377
+ },
2378
+ value >= 100 ? "Everything is completed!" : `${100 - value}% remaining`
2379
+ )
2380
+ );
2381
+ };
2243
2382
  // Annotate the CommonJS export names for ESM import in node:
2244
2383
  0 && (module.exports = {
2245
2384
  AnimatedProgressBar,
2246
2385
  BarChartCard,
2247
2386
  BlogCard,
2248
2387
  Button,
2388
+ CircularProgressCard,
2249
2389
  CommentCard,
2250
2390
  DonutChartCard,
2251
2391
  FeatureCard,
package/dist/index.mjs CHANGED
@@ -1,6 +1,9 @@
1
1
  import {
2
2
  SliderCard
3
3
  } from "./chunk-NJSJATQ6.mjs";
4
+ import {
5
+ ProfileCard
6
+ } from "./chunk-WFKB25KN.mjs";
4
7
  import {
5
8
  StatsCard
6
9
  } from "./chunk-472PLVGR.mjs";
@@ -19,6 +22,9 @@ import {
19
22
  import {
20
23
  FeatureCard
21
24
  } from "./chunk-FQO2D4M6.mjs";
25
+ import {
26
+ Graph
27
+ } from "./chunk-SJ4MEFAG.mjs";
22
28
  import {
23
29
  HoverCard
24
30
  } from "./chunk-MQOZXOBV.mjs";
@@ -37,9 +43,6 @@ import {
37
43
  import {
38
44
  ProductCard
39
45
  } from "./chunk-TVYAQSOM.mjs";
40
- import {
41
- ProfileCard
42
- } from "./chunk-WFKB25KN.mjs";
43
46
  import {
44
47
  AnimatedProgressBar
45
48
  } from "./chunk-VA6HDMVP.mjs";
@@ -52,20 +55,21 @@ import {
52
55
  import {
53
56
  Button
54
57
  } from "./chunk-5LA6VVEY.mjs";
58
+ import {
59
+ CircularProgressCard
60
+ } from "./chunk-336OCT6F.mjs";
55
61
  import {
56
62
  CommentCard
57
63
  } from "./chunk-EWRW432G.mjs";
58
64
  import {
59
65
  DonutChartCard
60
66
  } from "./chunk-XPD33K2L.mjs";
61
- import {
62
- Graph
63
- } from "./chunk-SJ4MEFAG.mjs";
64
67
  export {
65
68
  AnimatedProgressBar,
66
69
  BarChartCard,
67
70
  BlogCard,
68
71
  Button,
72
+ CircularProgressCard,
69
73
  CommentCard,
70
74
  DonutChartCard,
71
75
  FeatureCard,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "omui-lib",
3
- "version": "1.0.25",
3
+ "version": "1.0.27",
4
4
  "description": "omUI react component library",
5
5
  "license": "ISC",
6
6
  "author": "Om Mohanty",