omui-lib 1.0.6 → 1.0.7
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,155 @@
|
|
|
1
|
+
// src/components/ProductCard/ProductCard.jsx
|
|
2
|
+
import React from "react";
|
|
3
|
+
var ProductCard = ({
|
|
4
|
+
image = "https://images.unsplash.com/photo-1523275335684-37898b6baf30",
|
|
5
|
+
title = "Premium Watch",
|
|
6
|
+
description = "A stylish and elegant watch designed for everyday use.",
|
|
7
|
+
price = "$99",
|
|
8
|
+
oldPrice = "$149",
|
|
9
|
+
discount = "33% OFF",
|
|
10
|
+
buttonText = "Add to Cart",
|
|
11
|
+
color = "#6366f1"
|
|
12
|
+
}) => {
|
|
13
|
+
return /* @__PURE__ */ React.createElement(
|
|
14
|
+
"div",
|
|
15
|
+
{
|
|
16
|
+
style: {
|
|
17
|
+
width: "300px",
|
|
18
|
+
overflow: "hidden",
|
|
19
|
+
borderRadius: "18px",
|
|
20
|
+
background: "rgba(255,255,255,0.08)",
|
|
21
|
+
border: "1px solid rgba(255,255,255,0.12)",
|
|
22
|
+
backdropFilter: "blur(12px)",
|
|
23
|
+
WebkitBackdropFilter: "blur(12px)",
|
|
24
|
+
color: "#fff",
|
|
25
|
+
boxShadow: "0 10px 30px rgba(0,0,0,0.2)"
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
/* @__PURE__ */ React.createElement(
|
|
29
|
+
"div",
|
|
30
|
+
{
|
|
31
|
+
style: {
|
|
32
|
+
position: "relative",
|
|
33
|
+
width: "100%",
|
|
34
|
+
height: "220px",
|
|
35
|
+
overflow: "hidden"
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
/* @__PURE__ */ React.createElement(
|
|
39
|
+
"img",
|
|
40
|
+
{
|
|
41
|
+
src: image,
|
|
42
|
+
alt: title,
|
|
43
|
+
style: {
|
|
44
|
+
width: "100%",
|
|
45
|
+
height: "100%",
|
|
46
|
+
objectFit: "cover"
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
),
|
|
50
|
+
/* @__PURE__ */ React.createElement(
|
|
51
|
+
"span",
|
|
52
|
+
{
|
|
53
|
+
style: {
|
|
54
|
+
position: "absolute",
|
|
55
|
+
top: "12px",
|
|
56
|
+
left: "12px",
|
|
57
|
+
padding: "6px 10px",
|
|
58
|
+
borderRadius: "6px",
|
|
59
|
+
background: color,
|
|
60
|
+
color: "#fff",
|
|
61
|
+
fontSize: "12px",
|
|
62
|
+
fontWeight: "600"
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
discount
|
|
66
|
+
)
|
|
67
|
+
),
|
|
68
|
+
/* @__PURE__ */ React.createElement(
|
|
69
|
+
"div",
|
|
70
|
+
{
|
|
71
|
+
style: {
|
|
72
|
+
padding: "20px"
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
/* @__PURE__ */ React.createElement(
|
|
76
|
+
"h2",
|
|
77
|
+
{
|
|
78
|
+
style: {
|
|
79
|
+
margin: "0 0 8px",
|
|
80
|
+
fontSize: "20px",
|
|
81
|
+
fontWeight: "600"
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
title
|
|
85
|
+
),
|
|
86
|
+
/* @__PURE__ */ React.createElement(
|
|
87
|
+
"p",
|
|
88
|
+
{
|
|
89
|
+
style: {
|
|
90
|
+
margin: "0 0 16px",
|
|
91
|
+
color: "rgba(255,255,255,0.65)",
|
|
92
|
+
fontSize: "14px",
|
|
93
|
+
lineHeight: "1.5"
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
description
|
|
97
|
+
),
|
|
98
|
+
/* @__PURE__ */ React.createElement(
|
|
99
|
+
"div",
|
|
100
|
+
{
|
|
101
|
+
style: {
|
|
102
|
+
display: "flex",
|
|
103
|
+
alignItems: "center",
|
|
104
|
+
gap: "10px",
|
|
105
|
+
marginBottom: "18px"
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
/* @__PURE__ */ React.createElement(
|
|
109
|
+
"span",
|
|
110
|
+
{
|
|
111
|
+
style: {
|
|
112
|
+
fontSize: "22px",
|
|
113
|
+
fontWeight: "700",
|
|
114
|
+
color
|
|
115
|
+
}
|
|
116
|
+
},
|
|
117
|
+
price
|
|
118
|
+
),
|
|
119
|
+
/* @__PURE__ */ React.createElement(
|
|
120
|
+
"span",
|
|
121
|
+
{
|
|
122
|
+
style: {
|
|
123
|
+
fontSize: "14px",
|
|
124
|
+
color: "rgba(255,255,255,0.45)",
|
|
125
|
+
textDecoration: "line-through"
|
|
126
|
+
}
|
|
127
|
+
},
|
|
128
|
+
oldPrice
|
|
129
|
+
)
|
|
130
|
+
),
|
|
131
|
+
/* @__PURE__ */ React.createElement(
|
|
132
|
+
"button",
|
|
133
|
+
{
|
|
134
|
+
style: {
|
|
135
|
+
width: "100%",
|
|
136
|
+
padding: "12px",
|
|
137
|
+
border: "none",
|
|
138
|
+
borderRadius: "10px",
|
|
139
|
+
background: color,
|
|
140
|
+
color: "#fff",
|
|
141
|
+
fontSize: "14px",
|
|
142
|
+
fontWeight: "600",
|
|
143
|
+
cursor: "pointer",
|
|
144
|
+
transition: "transform 0.2s ease"
|
|
145
|
+
}
|
|
146
|
+
},
|
|
147
|
+
buttonText
|
|
148
|
+
)
|
|
149
|
+
)
|
|
150
|
+
);
|
|
151
|
+
};
|
|
152
|
+
|
|
153
|
+
export {
|
|
154
|
+
ProductCard
|
|
155
|
+
};
|
|
@@ -0,0 +1,188 @@
|
|
|
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/ProductCard/ProductCard.jsx
|
|
30
|
+
var ProductCard_exports = {};
|
|
31
|
+
__export(ProductCard_exports, {
|
|
32
|
+
ProductCard: () => ProductCard
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(ProductCard_exports);
|
|
35
|
+
var import_react = __toESM(require("react"));
|
|
36
|
+
var ProductCard = ({
|
|
37
|
+
image = "https://images.unsplash.com/photo-1523275335684-37898b6baf30",
|
|
38
|
+
title = "Premium Watch",
|
|
39
|
+
description = "A stylish and elegant watch designed for everyday use.",
|
|
40
|
+
price = "$99",
|
|
41
|
+
oldPrice = "$149",
|
|
42
|
+
discount = "33% OFF",
|
|
43
|
+
buttonText = "Add to Cart",
|
|
44
|
+
color = "#6366f1"
|
|
45
|
+
}) => {
|
|
46
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
47
|
+
"div",
|
|
48
|
+
{
|
|
49
|
+
style: {
|
|
50
|
+
width: "300px",
|
|
51
|
+
overflow: "hidden",
|
|
52
|
+
borderRadius: "18px",
|
|
53
|
+
background: "rgba(255,255,255,0.08)",
|
|
54
|
+
border: "1px solid rgba(255,255,255,0.12)",
|
|
55
|
+
backdropFilter: "blur(12px)",
|
|
56
|
+
WebkitBackdropFilter: "blur(12px)",
|
|
57
|
+
color: "#fff",
|
|
58
|
+
boxShadow: "0 10px 30px rgba(0,0,0,0.2)"
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
/* @__PURE__ */ import_react.default.createElement(
|
|
62
|
+
"div",
|
|
63
|
+
{
|
|
64
|
+
style: {
|
|
65
|
+
position: "relative",
|
|
66
|
+
width: "100%",
|
|
67
|
+
height: "220px",
|
|
68
|
+
overflow: "hidden"
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
/* @__PURE__ */ import_react.default.createElement(
|
|
72
|
+
"img",
|
|
73
|
+
{
|
|
74
|
+
src: image,
|
|
75
|
+
alt: title,
|
|
76
|
+
style: {
|
|
77
|
+
width: "100%",
|
|
78
|
+
height: "100%",
|
|
79
|
+
objectFit: "cover"
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
),
|
|
83
|
+
/* @__PURE__ */ import_react.default.createElement(
|
|
84
|
+
"span",
|
|
85
|
+
{
|
|
86
|
+
style: {
|
|
87
|
+
position: "absolute",
|
|
88
|
+
top: "12px",
|
|
89
|
+
left: "12px",
|
|
90
|
+
padding: "6px 10px",
|
|
91
|
+
borderRadius: "6px",
|
|
92
|
+
background: color,
|
|
93
|
+
color: "#fff",
|
|
94
|
+
fontSize: "12px",
|
|
95
|
+
fontWeight: "600"
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
discount
|
|
99
|
+
)
|
|
100
|
+
),
|
|
101
|
+
/* @__PURE__ */ import_react.default.createElement(
|
|
102
|
+
"div",
|
|
103
|
+
{
|
|
104
|
+
style: {
|
|
105
|
+
padding: "20px"
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
/* @__PURE__ */ import_react.default.createElement(
|
|
109
|
+
"h2",
|
|
110
|
+
{
|
|
111
|
+
style: {
|
|
112
|
+
margin: "0 0 8px",
|
|
113
|
+
fontSize: "20px",
|
|
114
|
+
fontWeight: "600"
|
|
115
|
+
}
|
|
116
|
+
},
|
|
117
|
+
title
|
|
118
|
+
),
|
|
119
|
+
/* @__PURE__ */ import_react.default.createElement(
|
|
120
|
+
"p",
|
|
121
|
+
{
|
|
122
|
+
style: {
|
|
123
|
+
margin: "0 0 16px",
|
|
124
|
+
color: "rgba(255,255,255,0.65)",
|
|
125
|
+
fontSize: "14px",
|
|
126
|
+
lineHeight: "1.5"
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
description
|
|
130
|
+
),
|
|
131
|
+
/* @__PURE__ */ import_react.default.createElement(
|
|
132
|
+
"div",
|
|
133
|
+
{
|
|
134
|
+
style: {
|
|
135
|
+
display: "flex",
|
|
136
|
+
alignItems: "center",
|
|
137
|
+
gap: "10px",
|
|
138
|
+
marginBottom: "18px"
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
/* @__PURE__ */ import_react.default.createElement(
|
|
142
|
+
"span",
|
|
143
|
+
{
|
|
144
|
+
style: {
|
|
145
|
+
fontSize: "22px",
|
|
146
|
+
fontWeight: "700",
|
|
147
|
+
color
|
|
148
|
+
}
|
|
149
|
+
},
|
|
150
|
+
price
|
|
151
|
+
),
|
|
152
|
+
/* @__PURE__ */ import_react.default.createElement(
|
|
153
|
+
"span",
|
|
154
|
+
{
|
|
155
|
+
style: {
|
|
156
|
+
fontSize: "14px",
|
|
157
|
+
color: "rgba(255,255,255,0.45)",
|
|
158
|
+
textDecoration: "line-through"
|
|
159
|
+
}
|
|
160
|
+
},
|
|
161
|
+
oldPrice
|
|
162
|
+
)
|
|
163
|
+
),
|
|
164
|
+
/* @__PURE__ */ import_react.default.createElement(
|
|
165
|
+
"button",
|
|
166
|
+
{
|
|
167
|
+
style: {
|
|
168
|
+
width: "100%",
|
|
169
|
+
padding: "12px",
|
|
170
|
+
border: "none",
|
|
171
|
+
borderRadius: "10px",
|
|
172
|
+
background: color,
|
|
173
|
+
color: "#fff",
|
|
174
|
+
fontSize: "14px",
|
|
175
|
+
fontWeight: "600",
|
|
176
|
+
cursor: "pointer",
|
|
177
|
+
transition: "transform 0.2s ease"
|
|
178
|
+
}
|
|
179
|
+
},
|
|
180
|
+
buttonText
|
|
181
|
+
)
|
|
182
|
+
)
|
|
183
|
+
);
|
|
184
|
+
};
|
|
185
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
186
|
+
0 && (module.exports = {
|
|
187
|
+
ProductCard
|
|
188
|
+
});
|
package/dist/index.js
CHANGED
|
@@ -36,6 +36,7 @@ __export(index_exports, {
|
|
|
36
36
|
HoverCard: () => HoverCard,
|
|
37
37
|
Loader: () => Loader,
|
|
38
38
|
PricingCard: () => PricingCard,
|
|
39
|
+
ProductCard: () => ProductCard,
|
|
39
40
|
ProfileCard: () => ProfileCard,
|
|
40
41
|
SliderCard: () => SliderCard,
|
|
41
42
|
SwipeCard: () => SwipeCard,
|
|
@@ -940,6 +941,158 @@ var ProfileCard = ({
|
|
|
940
941
|
)
|
|
941
942
|
);
|
|
942
943
|
};
|
|
944
|
+
|
|
945
|
+
// src/components/ProductCard/ProductCard.jsx
|
|
946
|
+
var import_react12 = __toESM(require("react"));
|
|
947
|
+
var ProductCard = ({
|
|
948
|
+
image = "https://images.unsplash.com/photo-1523275335684-37898b6baf30",
|
|
949
|
+
title = "Premium Watch",
|
|
950
|
+
description = "A stylish and elegant watch designed for everyday use.",
|
|
951
|
+
price = "$99",
|
|
952
|
+
oldPrice = "$149",
|
|
953
|
+
discount = "33% OFF",
|
|
954
|
+
buttonText = "Add to Cart",
|
|
955
|
+
color = "#6366f1"
|
|
956
|
+
}) => {
|
|
957
|
+
return /* @__PURE__ */ import_react12.default.createElement(
|
|
958
|
+
"div",
|
|
959
|
+
{
|
|
960
|
+
style: {
|
|
961
|
+
width: "300px",
|
|
962
|
+
overflow: "hidden",
|
|
963
|
+
borderRadius: "18px",
|
|
964
|
+
background: "rgba(255,255,255,0.08)",
|
|
965
|
+
border: "1px solid rgba(255,255,255,0.12)",
|
|
966
|
+
backdropFilter: "blur(12px)",
|
|
967
|
+
WebkitBackdropFilter: "blur(12px)",
|
|
968
|
+
color: "#fff",
|
|
969
|
+
boxShadow: "0 10px 30px rgba(0,0,0,0.2)"
|
|
970
|
+
}
|
|
971
|
+
},
|
|
972
|
+
/* @__PURE__ */ import_react12.default.createElement(
|
|
973
|
+
"div",
|
|
974
|
+
{
|
|
975
|
+
style: {
|
|
976
|
+
position: "relative",
|
|
977
|
+
width: "100%",
|
|
978
|
+
height: "220px",
|
|
979
|
+
overflow: "hidden"
|
|
980
|
+
}
|
|
981
|
+
},
|
|
982
|
+
/* @__PURE__ */ import_react12.default.createElement(
|
|
983
|
+
"img",
|
|
984
|
+
{
|
|
985
|
+
src: image,
|
|
986
|
+
alt: title,
|
|
987
|
+
style: {
|
|
988
|
+
width: "100%",
|
|
989
|
+
height: "100%",
|
|
990
|
+
objectFit: "cover"
|
|
991
|
+
}
|
|
992
|
+
}
|
|
993
|
+
),
|
|
994
|
+
/* @__PURE__ */ import_react12.default.createElement(
|
|
995
|
+
"span",
|
|
996
|
+
{
|
|
997
|
+
style: {
|
|
998
|
+
position: "absolute",
|
|
999
|
+
top: "12px",
|
|
1000
|
+
left: "12px",
|
|
1001
|
+
padding: "6px 10px",
|
|
1002
|
+
borderRadius: "6px",
|
|
1003
|
+
background: color,
|
|
1004
|
+
color: "#fff",
|
|
1005
|
+
fontSize: "12px",
|
|
1006
|
+
fontWeight: "600"
|
|
1007
|
+
}
|
|
1008
|
+
},
|
|
1009
|
+
discount
|
|
1010
|
+
)
|
|
1011
|
+
),
|
|
1012
|
+
/* @__PURE__ */ import_react12.default.createElement(
|
|
1013
|
+
"div",
|
|
1014
|
+
{
|
|
1015
|
+
style: {
|
|
1016
|
+
padding: "20px"
|
|
1017
|
+
}
|
|
1018
|
+
},
|
|
1019
|
+
/* @__PURE__ */ import_react12.default.createElement(
|
|
1020
|
+
"h2",
|
|
1021
|
+
{
|
|
1022
|
+
style: {
|
|
1023
|
+
margin: "0 0 8px",
|
|
1024
|
+
fontSize: "20px",
|
|
1025
|
+
fontWeight: "600"
|
|
1026
|
+
}
|
|
1027
|
+
},
|
|
1028
|
+
title
|
|
1029
|
+
),
|
|
1030
|
+
/* @__PURE__ */ import_react12.default.createElement(
|
|
1031
|
+
"p",
|
|
1032
|
+
{
|
|
1033
|
+
style: {
|
|
1034
|
+
margin: "0 0 16px",
|
|
1035
|
+
color: "rgba(255,255,255,0.65)",
|
|
1036
|
+
fontSize: "14px",
|
|
1037
|
+
lineHeight: "1.5"
|
|
1038
|
+
}
|
|
1039
|
+
},
|
|
1040
|
+
description
|
|
1041
|
+
),
|
|
1042
|
+
/* @__PURE__ */ import_react12.default.createElement(
|
|
1043
|
+
"div",
|
|
1044
|
+
{
|
|
1045
|
+
style: {
|
|
1046
|
+
display: "flex",
|
|
1047
|
+
alignItems: "center",
|
|
1048
|
+
gap: "10px",
|
|
1049
|
+
marginBottom: "18px"
|
|
1050
|
+
}
|
|
1051
|
+
},
|
|
1052
|
+
/* @__PURE__ */ import_react12.default.createElement(
|
|
1053
|
+
"span",
|
|
1054
|
+
{
|
|
1055
|
+
style: {
|
|
1056
|
+
fontSize: "22px",
|
|
1057
|
+
fontWeight: "700",
|
|
1058
|
+
color
|
|
1059
|
+
}
|
|
1060
|
+
},
|
|
1061
|
+
price
|
|
1062
|
+
),
|
|
1063
|
+
/* @__PURE__ */ import_react12.default.createElement(
|
|
1064
|
+
"span",
|
|
1065
|
+
{
|
|
1066
|
+
style: {
|
|
1067
|
+
fontSize: "14px",
|
|
1068
|
+
color: "rgba(255,255,255,0.45)",
|
|
1069
|
+
textDecoration: "line-through"
|
|
1070
|
+
}
|
|
1071
|
+
},
|
|
1072
|
+
oldPrice
|
|
1073
|
+
)
|
|
1074
|
+
),
|
|
1075
|
+
/* @__PURE__ */ import_react12.default.createElement(
|
|
1076
|
+
"button",
|
|
1077
|
+
{
|
|
1078
|
+
style: {
|
|
1079
|
+
width: "100%",
|
|
1080
|
+
padding: "12px",
|
|
1081
|
+
border: "none",
|
|
1082
|
+
borderRadius: "10px",
|
|
1083
|
+
background: color,
|
|
1084
|
+
color: "#fff",
|
|
1085
|
+
fontSize: "14px",
|
|
1086
|
+
fontWeight: "600",
|
|
1087
|
+
cursor: "pointer",
|
|
1088
|
+
transition: "transform 0.2s ease"
|
|
1089
|
+
}
|
|
1090
|
+
},
|
|
1091
|
+
buttonText
|
|
1092
|
+
)
|
|
1093
|
+
)
|
|
1094
|
+
);
|
|
1095
|
+
};
|
|
943
1096
|
// Annotate the CommonJS export names for ESM import in node:
|
|
944
1097
|
0 && (module.exports = {
|
|
945
1098
|
AnimatedProgressBar,
|
|
@@ -949,6 +1102,7 @@ var ProfileCard = ({
|
|
|
949
1102
|
HoverCard,
|
|
950
1103
|
Loader,
|
|
951
1104
|
PricingCard,
|
|
1105
|
+
ProductCard,
|
|
952
1106
|
ProfileCard,
|
|
953
1107
|
SliderCard,
|
|
954
1108
|
SwipeCard,
|
package/dist/index.mjs
CHANGED