omui-lib 1.0.24 → 1.0.26

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,175 @@
1
+ // src/components/DonutChartCard/DonutChartCard.jsx
2
+ import React from "react";
3
+ var DonutChartCard = ({
4
+ title = "Traffic Sources",
5
+ data = [
6
+ { label: "Organic", value: 45 },
7
+ { label: "Social", value: 30 },
8
+ { label: "Direct", value: 15 },
9
+ { label: "Referral", value: 10 }
10
+ ],
11
+ colors = ["#6366f1", "#8b5cf6", "#ec4899", "#14b8a6"]
12
+ }) => {
13
+ const total = data.reduce((sum, item) => sum + item.value, 0);
14
+ let cumulative = 0;
15
+ const gradient = data.map((item, index) => {
16
+ const start = cumulative / total * 100;
17
+ cumulative += item.value;
18
+ const end = cumulative / total * 100;
19
+ return `${colors[index % colors.length]} ${start}% ${end}%`;
20
+ }).join(", ");
21
+ return /* @__PURE__ */ React.createElement(
22
+ "div",
23
+ {
24
+ style: {
25
+ width: "360px",
26
+ padding: "24px",
27
+ borderRadius: "20px",
28
+ background: "rgba(255,255,255,0.08)",
29
+ border: "1px solid rgba(255,255,255,0.12)",
30
+ backdropFilter: "blur(12px)",
31
+ WebkitBackdropFilter: "blur(12px)",
32
+ color: "#fff",
33
+ boxShadow: "0 10px 30px rgba(0,0,0,0.2)"
34
+ }
35
+ },
36
+ /* @__PURE__ */ React.createElement(
37
+ "h3",
38
+ {
39
+ style: {
40
+ margin: "0 0 24px",
41
+ fontSize: "18px",
42
+ fontWeight: "600"
43
+ }
44
+ },
45
+ title
46
+ ),
47
+ /* @__PURE__ */ React.createElement(
48
+ "div",
49
+ {
50
+ style: {
51
+ display: "flex",
52
+ justifyContent: "center",
53
+ marginBottom: "24px"
54
+ }
55
+ },
56
+ /* @__PURE__ */ React.createElement(
57
+ "div",
58
+ {
59
+ style: {
60
+ width: "170px",
61
+ height: "170px",
62
+ borderRadius: "50%",
63
+ background: `conic-gradient(${gradient})`,
64
+ display: "flex",
65
+ justifyContent: "center",
66
+ alignItems: "center"
67
+ }
68
+ },
69
+ /* @__PURE__ */ React.createElement(
70
+ "div",
71
+ {
72
+ style: {
73
+ width: "105px",
74
+ height: "105px",
75
+ borderRadius: "50%",
76
+ background: "#171717",
77
+ display: "flex",
78
+ flexDirection: "column",
79
+ justifyContent: "center",
80
+ alignItems: "center"
81
+ }
82
+ },
83
+ /* @__PURE__ */ React.createElement(
84
+ "span",
85
+ {
86
+ style: {
87
+ fontSize: "24px",
88
+ fontWeight: "700"
89
+ }
90
+ },
91
+ total,
92
+ "%"
93
+ ),
94
+ /* @__PURE__ */ React.createElement(
95
+ "span",
96
+ {
97
+ style: {
98
+ fontSize: "11px",
99
+ color: "rgba(255,255,255,0.5)"
100
+ }
101
+ },
102
+ "Total"
103
+ )
104
+ )
105
+ )
106
+ ),
107
+ /* @__PURE__ */ React.createElement(
108
+ "div",
109
+ {
110
+ style: {
111
+ display: "flex",
112
+ flexDirection: "column",
113
+ gap: "12px"
114
+ }
115
+ },
116
+ data.map((item, index) => /* @__PURE__ */ React.createElement(
117
+ "div",
118
+ {
119
+ key: index,
120
+ style: {
121
+ display: "flex",
122
+ justifyContent: "space-between",
123
+ alignItems: "center"
124
+ }
125
+ },
126
+ /* @__PURE__ */ React.createElement(
127
+ "div",
128
+ {
129
+ style: {
130
+ display: "flex",
131
+ alignItems: "center",
132
+ gap: "8px"
133
+ }
134
+ },
135
+ /* @__PURE__ */ React.createElement(
136
+ "span",
137
+ {
138
+ style: {
139
+ width: "10px",
140
+ height: "10px",
141
+ borderRadius: "50%",
142
+ background: colors[index % colors.length]
143
+ }
144
+ }
145
+ ),
146
+ /* @__PURE__ */ React.createElement(
147
+ "span",
148
+ {
149
+ style: {
150
+ fontSize: "13px",
151
+ color: "rgba(255,255,255,0.65)"
152
+ }
153
+ },
154
+ item.label
155
+ )
156
+ ),
157
+ /* @__PURE__ */ React.createElement(
158
+ "span",
159
+ {
160
+ style: {
161
+ fontSize: "13px",
162
+ fontWeight: "600"
163
+ }
164
+ },
165
+ item.value,
166
+ "%"
167
+ )
168
+ ))
169
+ )
170
+ );
171
+ };
172
+
173
+ export {
174
+ DonutChartCard
175
+ };
@@ -0,0 +1,208 @@
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/DonutChartCard/DonutChartCard.jsx
30
+ var DonutChartCard_exports = {};
31
+ __export(DonutChartCard_exports, {
32
+ DonutChartCard: () => DonutChartCard
33
+ });
34
+ module.exports = __toCommonJS(DonutChartCard_exports);
35
+ var import_react = __toESM(require("react"));
36
+ var DonutChartCard = ({
37
+ title = "Traffic Sources",
38
+ data = [
39
+ { label: "Organic", value: 45 },
40
+ { label: "Social", value: 30 },
41
+ { label: "Direct", value: 15 },
42
+ { label: "Referral", value: 10 }
43
+ ],
44
+ colors = ["#6366f1", "#8b5cf6", "#ec4899", "#14b8a6"]
45
+ }) => {
46
+ const total = data.reduce((sum, item) => sum + item.value, 0);
47
+ let cumulative = 0;
48
+ const gradient = data.map((item, index) => {
49
+ const start = cumulative / total * 100;
50
+ cumulative += item.value;
51
+ const end = cumulative / total * 100;
52
+ return `${colors[index % colors.length]} ${start}% ${end}%`;
53
+ }).join(", ");
54
+ return /* @__PURE__ */ import_react.default.createElement(
55
+ "div",
56
+ {
57
+ style: {
58
+ width: "360px",
59
+ padding: "24px",
60
+ borderRadius: "20px",
61
+ background: "rgba(255,255,255,0.08)",
62
+ border: "1px solid rgba(255,255,255,0.12)",
63
+ backdropFilter: "blur(12px)",
64
+ WebkitBackdropFilter: "blur(12px)",
65
+ color: "#fff",
66
+ boxShadow: "0 10px 30px rgba(0,0,0,0.2)"
67
+ }
68
+ },
69
+ /* @__PURE__ */ import_react.default.createElement(
70
+ "h3",
71
+ {
72
+ style: {
73
+ margin: "0 0 24px",
74
+ fontSize: "18px",
75
+ fontWeight: "600"
76
+ }
77
+ },
78
+ title
79
+ ),
80
+ /* @__PURE__ */ import_react.default.createElement(
81
+ "div",
82
+ {
83
+ style: {
84
+ display: "flex",
85
+ justifyContent: "center",
86
+ marginBottom: "24px"
87
+ }
88
+ },
89
+ /* @__PURE__ */ import_react.default.createElement(
90
+ "div",
91
+ {
92
+ style: {
93
+ width: "170px",
94
+ height: "170px",
95
+ borderRadius: "50%",
96
+ background: `conic-gradient(${gradient})`,
97
+ display: "flex",
98
+ justifyContent: "center",
99
+ alignItems: "center"
100
+ }
101
+ },
102
+ /* @__PURE__ */ import_react.default.createElement(
103
+ "div",
104
+ {
105
+ style: {
106
+ width: "105px",
107
+ height: "105px",
108
+ borderRadius: "50%",
109
+ background: "#171717",
110
+ display: "flex",
111
+ flexDirection: "column",
112
+ justifyContent: "center",
113
+ alignItems: "center"
114
+ }
115
+ },
116
+ /* @__PURE__ */ import_react.default.createElement(
117
+ "span",
118
+ {
119
+ style: {
120
+ fontSize: "24px",
121
+ fontWeight: "700"
122
+ }
123
+ },
124
+ total,
125
+ "%"
126
+ ),
127
+ /* @__PURE__ */ import_react.default.createElement(
128
+ "span",
129
+ {
130
+ style: {
131
+ fontSize: "11px",
132
+ color: "rgba(255,255,255,0.5)"
133
+ }
134
+ },
135
+ "Total"
136
+ )
137
+ )
138
+ )
139
+ ),
140
+ /* @__PURE__ */ import_react.default.createElement(
141
+ "div",
142
+ {
143
+ style: {
144
+ display: "flex",
145
+ flexDirection: "column",
146
+ gap: "12px"
147
+ }
148
+ },
149
+ data.map((item, index) => /* @__PURE__ */ import_react.default.createElement(
150
+ "div",
151
+ {
152
+ key: index,
153
+ style: {
154
+ display: "flex",
155
+ justifyContent: "space-between",
156
+ alignItems: "center"
157
+ }
158
+ },
159
+ /* @__PURE__ */ import_react.default.createElement(
160
+ "div",
161
+ {
162
+ style: {
163
+ display: "flex",
164
+ alignItems: "center",
165
+ gap: "8px"
166
+ }
167
+ },
168
+ /* @__PURE__ */ import_react.default.createElement(
169
+ "span",
170
+ {
171
+ style: {
172
+ width: "10px",
173
+ height: "10px",
174
+ borderRadius: "50%",
175
+ background: colors[index % colors.length]
176
+ }
177
+ }
178
+ ),
179
+ /* @__PURE__ */ import_react.default.createElement(
180
+ "span",
181
+ {
182
+ style: {
183
+ fontSize: "13px",
184
+ color: "rgba(255,255,255,0.65)"
185
+ }
186
+ },
187
+ item.label
188
+ )
189
+ ),
190
+ /* @__PURE__ */ import_react.default.createElement(
191
+ "span",
192
+ {
193
+ style: {
194
+ fontSize: "13px",
195
+ fontWeight: "600"
196
+ }
197
+ },
198
+ item.value,
199
+ "%"
200
+ )
201
+ ))
202
+ )
203
+ );
204
+ };
205
+ // Annotate the CommonJS export names for ESM import in node:
206
+ 0 && (module.exports = {
207
+ DonutChartCard
208
+ });
@@ -0,0 +1,6 @@
1
+ import {
2
+ DonutChartCard
3
+ } from "../../chunk-XPD33K2L.mjs";
4
+ export {
5
+ DonutChartCard
6
+ };
package/dist/index.js CHANGED
@@ -34,6 +34,7 @@ __export(index_exports, {
34
34
  BlogCard: () => BlogCard,
35
35
  Button: () => Button,
36
36
  CommentCard: () => CommentCard,
37
+ DonutChartCard: () => DonutChartCard,
37
38
  FeatureCard: () => FeatureCard,
38
39
  Graph: () => Graph,
39
40
  HoverCard: () => HoverCard,
@@ -2067,6 +2068,178 @@ var BarChartCard = ({
2067
2068
  )
2068
2069
  );
2069
2070
  };
2071
+
2072
+ // src/components/DonutChartCard/DonutChartCard.jsx
2073
+ var import_react21 = __toESM(require("react"));
2074
+ var DonutChartCard = ({
2075
+ title = "Traffic Sources",
2076
+ data = [
2077
+ { label: "Organic", value: 45 },
2078
+ { label: "Social", value: 30 },
2079
+ { label: "Direct", value: 15 },
2080
+ { label: "Referral", value: 10 }
2081
+ ],
2082
+ colors = ["#6366f1", "#8b5cf6", "#ec4899", "#14b8a6"]
2083
+ }) => {
2084
+ const total = data.reduce((sum, item) => sum + item.value, 0);
2085
+ let cumulative = 0;
2086
+ const gradient = data.map((item, index) => {
2087
+ const start = cumulative / total * 100;
2088
+ cumulative += item.value;
2089
+ const end = cumulative / total * 100;
2090
+ return `${colors[index % colors.length]} ${start}% ${end}%`;
2091
+ }).join(", ");
2092
+ return /* @__PURE__ */ import_react21.default.createElement(
2093
+ "div",
2094
+ {
2095
+ style: {
2096
+ width: "360px",
2097
+ padding: "24px",
2098
+ borderRadius: "20px",
2099
+ background: "rgba(255,255,255,0.08)",
2100
+ border: "1px solid rgba(255,255,255,0.12)",
2101
+ backdropFilter: "blur(12px)",
2102
+ WebkitBackdropFilter: "blur(12px)",
2103
+ color: "#fff",
2104
+ boxShadow: "0 10px 30px rgba(0,0,0,0.2)"
2105
+ }
2106
+ },
2107
+ /* @__PURE__ */ import_react21.default.createElement(
2108
+ "h3",
2109
+ {
2110
+ style: {
2111
+ margin: "0 0 24px",
2112
+ fontSize: "18px",
2113
+ fontWeight: "600"
2114
+ }
2115
+ },
2116
+ title
2117
+ ),
2118
+ /* @__PURE__ */ import_react21.default.createElement(
2119
+ "div",
2120
+ {
2121
+ style: {
2122
+ display: "flex",
2123
+ justifyContent: "center",
2124
+ marginBottom: "24px"
2125
+ }
2126
+ },
2127
+ /* @__PURE__ */ import_react21.default.createElement(
2128
+ "div",
2129
+ {
2130
+ style: {
2131
+ width: "170px",
2132
+ height: "170px",
2133
+ borderRadius: "50%",
2134
+ background: `conic-gradient(${gradient})`,
2135
+ display: "flex",
2136
+ justifyContent: "center",
2137
+ alignItems: "center"
2138
+ }
2139
+ },
2140
+ /* @__PURE__ */ import_react21.default.createElement(
2141
+ "div",
2142
+ {
2143
+ style: {
2144
+ width: "105px",
2145
+ height: "105px",
2146
+ borderRadius: "50%",
2147
+ background: "#171717",
2148
+ display: "flex",
2149
+ flexDirection: "column",
2150
+ justifyContent: "center",
2151
+ alignItems: "center"
2152
+ }
2153
+ },
2154
+ /* @__PURE__ */ import_react21.default.createElement(
2155
+ "span",
2156
+ {
2157
+ style: {
2158
+ fontSize: "24px",
2159
+ fontWeight: "700"
2160
+ }
2161
+ },
2162
+ total,
2163
+ "%"
2164
+ ),
2165
+ /* @__PURE__ */ import_react21.default.createElement(
2166
+ "span",
2167
+ {
2168
+ style: {
2169
+ fontSize: "11px",
2170
+ color: "rgba(255,255,255,0.5)"
2171
+ }
2172
+ },
2173
+ "Total"
2174
+ )
2175
+ )
2176
+ )
2177
+ ),
2178
+ /* @__PURE__ */ import_react21.default.createElement(
2179
+ "div",
2180
+ {
2181
+ style: {
2182
+ display: "flex",
2183
+ flexDirection: "column",
2184
+ gap: "12px"
2185
+ }
2186
+ },
2187
+ data.map((item, index) => /* @__PURE__ */ import_react21.default.createElement(
2188
+ "div",
2189
+ {
2190
+ key: index,
2191
+ style: {
2192
+ display: "flex",
2193
+ justifyContent: "space-between",
2194
+ alignItems: "center"
2195
+ }
2196
+ },
2197
+ /* @__PURE__ */ import_react21.default.createElement(
2198
+ "div",
2199
+ {
2200
+ style: {
2201
+ display: "flex",
2202
+ alignItems: "center",
2203
+ gap: "8px"
2204
+ }
2205
+ },
2206
+ /* @__PURE__ */ import_react21.default.createElement(
2207
+ "span",
2208
+ {
2209
+ style: {
2210
+ width: "10px",
2211
+ height: "10px",
2212
+ borderRadius: "50%",
2213
+ background: colors[index % colors.length]
2214
+ }
2215
+ }
2216
+ ),
2217
+ /* @__PURE__ */ import_react21.default.createElement(
2218
+ "span",
2219
+ {
2220
+ style: {
2221
+ fontSize: "13px",
2222
+ color: "rgba(255,255,255,0.65)"
2223
+ }
2224
+ },
2225
+ item.label
2226
+ )
2227
+ ),
2228
+ /* @__PURE__ */ import_react21.default.createElement(
2229
+ "span",
2230
+ {
2231
+ style: {
2232
+ fontSize: "13px",
2233
+ fontWeight: "600"
2234
+ }
2235
+ },
2236
+ item.value,
2237
+ "%"
2238
+ )
2239
+ ))
2240
+ )
2241
+ );
2242
+ };
2070
2243
  // Annotate the CommonJS export names for ESM import in node:
2071
2244
  0 && (module.exports = {
2072
2245
  AnimatedProgressBar,
@@ -2074,6 +2247,7 @@ var BarChartCard = ({
2074
2247
  BlogCard,
2075
2248
  Button,
2076
2249
  CommentCard,
2250
+ DonutChartCard,
2077
2251
  FeatureCard,
2078
2252
  Graph,
2079
2253
  HoverCard,
package/dist/index.mjs CHANGED
@@ -1,39 +1,42 @@
1
1
  import {
2
2
  StatsCard
3
3
  } from "./chunk-472PLVGR.mjs";
4
+ import {
5
+ ProfileCard
6
+ } from "./chunk-WFKB25KN.mjs";
4
7
  import {
5
8
  SwipeCard
6
9
  } from "./chunk-XD6E2QQI.mjs";
7
10
  import {
8
- TeamMemberCard
9
- } from "./chunk-J7V2DYUU.mjs";
11
+ ThumbnailCard
12
+ } from "./chunk-57QJO5RD.mjs";
10
13
  import {
11
14
  TestimonialCard
12
15
  } from "./chunk-M2MU6Y4N.mjs";
13
16
  import {
14
- ThumbnailCard
15
- } from "./chunk-57QJO5RD.mjs";
17
+ TeamMemberCard
18
+ } from "./chunk-J7V2DYUU.mjs";
19
+ import {
20
+ Graph
21
+ } from "./chunk-SJ4MEFAG.mjs";
16
22
  import {
17
23
  HoverCard
18
24
  } from "./chunk-MQOZXOBV.mjs";
19
- import {
20
- LineChartCard
21
- } from "./chunk-GGOOL7HS.mjs";
22
25
  import {
23
26
  Loader
24
27
  } from "./chunk-XGVKPI3O.mjs";
25
28
  import {
26
- NotificationCard
27
- } from "./chunk-QOVSRTLJ.mjs";
28
- import {
29
- PricingCard
30
- } from "./chunk-FGTNFYFJ.mjs";
29
+ LineChartCard
30
+ } from "./chunk-GGOOL7HS.mjs";
31
31
  import {
32
32
  ProductCard
33
33
  } from "./chunk-TVYAQSOM.mjs";
34
34
  import {
35
- ProfileCard
36
- } from "./chunk-WFKB25KN.mjs";
35
+ PricingCard
36
+ } from "./chunk-FGTNFYFJ.mjs";
37
+ import {
38
+ NotificationCard
39
+ } from "./chunk-QOVSRTLJ.mjs";
37
40
  import {
38
41
  SliderCard
39
42
  } from "./chunk-NJSJATQ6.mjs";
@@ -52,18 +55,19 @@ import {
52
55
  import {
53
56
  CommentCard
54
57
  } from "./chunk-EWRW432G.mjs";
58
+ import {
59
+ DonutChartCard
60
+ } from "./chunk-XPD33K2L.mjs";
55
61
  import {
56
62
  FeatureCard
57
63
  } from "./chunk-FQO2D4M6.mjs";
58
- import {
59
- Graph
60
- } from "./chunk-SJ4MEFAG.mjs";
61
64
  export {
62
65
  AnimatedProgressBar,
63
66
  BarChartCard,
64
67
  BlogCard,
65
68
  Button,
66
69
  CommentCard,
70
+ DonutChartCard,
67
71
  FeatureCard,
68
72
  Graph,
69
73
  HoverCard,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "omui-lib",
3
- "version": "1.0.24",
3
+ "version": "1.0.26",
4
4
  "description": "omUI react component library",
5
5
  "license": "ISC",
6
6
  "author": "Om Mohanty",