virtuo-ui-library 1.0.6 → 1.0.8
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/index.js +62 -165
- package/dist/index.mjs +62 -165
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -120,151 +120,8 @@ function shadeColor(hex, percent) {
|
|
|
120
120
|
return `rgb(${r},${g},${b})`;
|
|
121
121
|
}
|
|
122
122
|
|
|
123
|
-
// src/components/Card/Card.jsx
|
|
124
|
-
var import_react2 = __toESM(require("react"));
|
|
125
|
-
var Card = ({
|
|
126
|
-
title = "Card Title",
|
|
127
|
-
description = "This is a simple, reusable card component you can customize with props.",
|
|
128
|
-
image = null,
|
|
129
|
-
badge = null,
|
|
130
|
-
badgeColor = "#6366f1",
|
|
131
|
-
accentColor = "#6366f1",
|
|
132
|
-
actions = [],
|
|
133
|
-
footer = null,
|
|
134
|
-
width = "320px",
|
|
135
|
-
onClick = null
|
|
136
|
-
}) => {
|
|
137
|
-
const [hovered, setHovered] = (0, import_react2.useState)(false);
|
|
138
|
-
const [liked, setLiked] = (0, import_react2.useState)(false);
|
|
139
|
-
const style = {
|
|
140
|
-
width,
|
|
141
|
-
borderRadius: "16px",
|
|
142
|
-
background: "#ffffff",
|
|
143
|
-
boxShadow: hovered ? "0 16px 48px rgba(0,0,0,0.13)" : "0 4px 20px rgba(0,0,0,0.07)",
|
|
144
|
-
transform: hovered ? "translateY(-4px)" : "translateY(0)",
|
|
145
|
-
transition: "all 0.22s ease",
|
|
146
|
-
overflow: "hidden",
|
|
147
|
-
fontFamily: "system-ui, sans-serif",
|
|
148
|
-
cursor: onClick ? "pointer" : "default",
|
|
149
|
-
border: "1px solid #f1f5f9"
|
|
150
|
-
};
|
|
151
|
-
return /* @__PURE__ */ import_react2.default.createElement(
|
|
152
|
-
"div",
|
|
153
|
-
{
|
|
154
|
-
style,
|
|
155
|
-
onMouseEnter: () => setHovered(true),
|
|
156
|
-
onMouseLeave: () => setHovered(false),
|
|
157
|
-
onClick
|
|
158
|
-
},
|
|
159
|
-
image && /* @__PURE__ */ import_react2.default.createElement("div", { style: { width: "100%", height: "180px", overflow: "hidden", position: "relative" } }, /* @__PURE__ */ import_react2.default.createElement(
|
|
160
|
-
"img",
|
|
161
|
-
{
|
|
162
|
-
src: image,
|
|
163
|
-
alt: title,
|
|
164
|
-
style: {
|
|
165
|
-
width: "100%",
|
|
166
|
-
height: "100%",
|
|
167
|
-
objectFit: "cover",
|
|
168
|
-
transform: hovered ? "scale(1.04)" : "scale(1)",
|
|
169
|
-
transition: "transform 0.35s ease"
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
), badge && /* @__PURE__ */ import_react2.default.createElement("span", { style: {
|
|
173
|
-
position: "absolute",
|
|
174
|
-
top: "12px",
|
|
175
|
-
left: "12px",
|
|
176
|
-
background: badgeColor,
|
|
177
|
-
color: "#fff",
|
|
178
|
-
fontSize: "11px",
|
|
179
|
-
fontWeight: 700,
|
|
180
|
-
letterSpacing: "0.06em",
|
|
181
|
-
textTransform: "uppercase",
|
|
182
|
-
padding: "4px 10px",
|
|
183
|
-
borderRadius: "99px"
|
|
184
|
-
} }, badge)),
|
|
185
|
-
/* @__PURE__ */ import_react2.default.createElement("div", { style: { padding: "20px 20px 16px" } }, !image && badge && /* @__PURE__ */ import_react2.default.createElement("span", { style: {
|
|
186
|
-
display: "inline-block",
|
|
187
|
-
background: badgeColor + "18",
|
|
188
|
-
color: badgeColor,
|
|
189
|
-
fontSize: "11px",
|
|
190
|
-
fontWeight: 700,
|
|
191
|
-
letterSpacing: "0.06em",
|
|
192
|
-
textTransform: "uppercase",
|
|
193
|
-
padding: "3px 10px",
|
|
194
|
-
borderRadius: "99px",
|
|
195
|
-
marginBottom: "10px"
|
|
196
|
-
} }, badge), /* @__PURE__ */ import_react2.default.createElement("h3", { style: { margin: "0 0 8px", fontSize: "17px", fontWeight: 700, color: "#0f172a", lineHeight: 1.3 } }, title), /* @__PURE__ */ import_react2.default.createElement("p", { style: { margin: 0, fontSize: "14px", color: "#64748b", lineHeight: 1.6 } }, description)),
|
|
197
|
-
(actions.length > 0 || true) && /* @__PURE__ */ import_react2.default.createElement("div", { style: { padding: "0 20px 18px", display: "flex", alignItems: "center", gap: "10px" } }, actions.map((action, i) => /* @__PURE__ */ import_react2.default.createElement(ActionButton, { key: i, ...action, accentColor, primary: i === 0 })), /* @__PURE__ */ import_react2.default.createElement(
|
|
198
|
-
"button",
|
|
199
|
-
{
|
|
200
|
-
onClick: (e) => {
|
|
201
|
-
e.stopPropagation();
|
|
202
|
-
setLiked(!liked);
|
|
203
|
-
},
|
|
204
|
-
style: {
|
|
205
|
-
marginLeft: "auto",
|
|
206
|
-
background: liked ? "#fef2f2" : "#f8fafc",
|
|
207
|
-
border: "none",
|
|
208
|
-
borderRadius: "8px",
|
|
209
|
-
padding: "8px 10px",
|
|
210
|
-
cursor: "pointer",
|
|
211
|
-
fontSize: "16px",
|
|
212
|
-
transition: "all 0.15s",
|
|
213
|
-
transform: liked ? "scale(1.15)" : "scale(1)"
|
|
214
|
-
},
|
|
215
|
-
title: liked ? "Unlike" : "Like"
|
|
216
|
-
},
|
|
217
|
-
liked ? "\u2764\uFE0F" : "\u{1F90D}"
|
|
218
|
-
)),
|
|
219
|
-
footer && /* @__PURE__ */ import_react2.default.createElement("div", { style: {
|
|
220
|
-
borderTop: "1px solid #f1f5f9",
|
|
221
|
-
padding: "12px 20px",
|
|
222
|
-
fontSize: "12px",
|
|
223
|
-
color: "#94a3b8",
|
|
224
|
-
display: "flex",
|
|
225
|
-
alignItems: "center",
|
|
226
|
-
gap: "6px"
|
|
227
|
-
} }, footer)
|
|
228
|
-
);
|
|
229
|
-
};
|
|
230
|
-
var ActionButton = ({ label = "Action", onClick = () => {
|
|
231
|
-
}, accentColor = "#6366f1", primary = false }) => {
|
|
232
|
-
const [hovered, setHovered] = (0, import_react2.useState)(false);
|
|
233
|
-
return /* @__PURE__ */ import_react2.default.createElement(
|
|
234
|
-
"button",
|
|
235
|
-
{
|
|
236
|
-
onClick: (e) => {
|
|
237
|
-
e.stopPropagation();
|
|
238
|
-
onClick();
|
|
239
|
-
},
|
|
240
|
-
onMouseEnter: () => setHovered(true),
|
|
241
|
-
onMouseLeave: () => setHovered(false),
|
|
242
|
-
style: {
|
|
243
|
-
padding: "8px 18px",
|
|
244
|
-
borderRadius: "8px",
|
|
245
|
-
fontSize: "13px",
|
|
246
|
-
fontWeight: 600,
|
|
247
|
-
cursor: "pointer",
|
|
248
|
-
transition: "all 0.15s",
|
|
249
|
-
background: primary ? hovered ? shadeColor2(accentColor, -15) : accentColor : hovered ? accentColor + "12" : "transparent",
|
|
250
|
-
color: primary ? "#fff" : accentColor,
|
|
251
|
-
border: primary ? "none" : `1.5px solid ${accentColor}`,
|
|
252
|
-
boxShadow: primary && !hovered ? `0 3px 10px ${accentColor}40` : "none"
|
|
253
|
-
}
|
|
254
|
-
},
|
|
255
|
-
label
|
|
256
|
-
);
|
|
257
|
-
};
|
|
258
|
-
function shadeColor2(hex, percent) {
|
|
259
|
-
const num = parseInt(hex.replace("#", ""), 16);
|
|
260
|
-
const r = Math.min(255, Math.max(0, (num >> 16) + percent));
|
|
261
|
-
const g = Math.min(255, Math.max(0, (num >> 8 & 255) + percent));
|
|
262
|
-
const b = Math.min(255, Math.max(0, (num & 255) + percent));
|
|
263
|
-
return `rgb(${r},${g},${b})`;
|
|
264
|
-
}
|
|
265
|
-
|
|
266
123
|
// src/components/EcommerceCard/EcommerceCard.jsx
|
|
267
|
-
var
|
|
124
|
+
var import_react2 = __toESM(require("react"));
|
|
268
125
|
var EcommerceCard = ({
|
|
269
126
|
image = "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=600&q=80",
|
|
270
127
|
title = "Wireless Headphones",
|
|
@@ -279,8 +136,8 @@ var EcommerceCard = ({
|
|
|
279
136
|
onAddToCart = () => {
|
|
280
137
|
}
|
|
281
138
|
}) => {
|
|
282
|
-
const [hovered, setHovered] = (0,
|
|
283
|
-
const [wishlisted, setWishlisted] = (0,
|
|
139
|
+
const [hovered, setHovered] = (0, import_react2.useState)(false);
|
|
140
|
+
const [wishlisted, setWishlisted] = (0, import_react2.useState)(false);
|
|
284
141
|
const alpha = (hex, op) => {
|
|
285
142
|
const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
|
|
286
143
|
return "rgba(" + r + "," + g + "," + b + "," + op + ")";
|
|
@@ -292,21 +149,21 @@ var EcommerceCard = ({
|
|
|
292
149
|
for (let i = 1; i <= 5; i++) {
|
|
293
150
|
if (i <= fullStars) {
|
|
294
151
|
stars.push(
|
|
295
|
-
/* @__PURE__ */
|
|
152
|
+
/* @__PURE__ */ import_react2.default.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "#fbbf24", stroke: "none" }, /* @__PURE__ */ import_react2.default.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }))
|
|
296
153
|
);
|
|
297
154
|
} else if (i === fullStars + 1 && hasHalfStar) {
|
|
298
155
|
stars.push(
|
|
299
|
-
/* @__PURE__ */
|
|
156
|
+
/* @__PURE__ */ import_react2.default.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "#fbbf24", stroke: "none" }, /* @__PURE__ */ import_react2.default.createElement("defs", null, /* @__PURE__ */ import_react2.default.createElement("linearGradient", { id: "half", x1: "0", x2: "100%", y1: "0", y2: "0" }, /* @__PURE__ */ import_react2.default.createElement("stop", { offset: "50%", stopColor: "#fbbf24" }), /* @__PURE__ */ import_react2.default.createElement("stop", { offset: "50%", stopColor: "rgba(255,255,255,0.1)" }))), /* @__PURE__ */ import_react2.default.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2", fill: "url(#half)" }))
|
|
300
157
|
);
|
|
301
158
|
} else {
|
|
302
159
|
stars.push(
|
|
303
|
-
/* @__PURE__ */
|
|
160
|
+
/* @__PURE__ */ import_react2.default.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "rgba(255,255,255,0.1)", stroke: "none" }, /* @__PURE__ */ import_react2.default.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }))
|
|
304
161
|
);
|
|
305
162
|
}
|
|
306
163
|
}
|
|
307
164
|
return stars;
|
|
308
165
|
};
|
|
309
|
-
return /* @__PURE__ */
|
|
166
|
+
return /* @__PURE__ */ import_react2.default.createElement(
|
|
310
167
|
"div",
|
|
311
168
|
{
|
|
312
169
|
onMouseEnter: () => setHovered(true),
|
|
@@ -323,7 +180,7 @@ var EcommerceCard = ({
|
|
|
323
180
|
boxShadow: hovered ? "0 12px 30px rgba(0,0,0,0.4)" : "0 4px 16px rgba(0,0,0,0.3)"
|
|
324
181
|
}
|
|
325
182
|
},
|
|
326
|
-
/* @__PURE__ */
|
|
183
|
+
/* @__PURE__ */ import_react2.default.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ import_react2.default.createElement(
|
|
327
184
|
"img",
|
|
328
185
|
{
|
|
329
186
|
src: image,
|
|
@@ -336,7 +193,7 @@ var EcommerceCard = ({
|
|
|
336
193
|
transform: hovered ? "scale(1.05)" : "scale(1)"
|
|
337
194
|
}
|
|
338
195
|
}
|
|
339
|
-
), badge && /* @__PURE__ */
|
|
196
|
+
), badge && /* @__PURE__ */ import_react2.default.createElement("div", { style: {
|
|
340
197
|
position: "absolute",
|
|
341
198
|
top: "10px",
|
|
342
199
|
left: "10px",
|
|
@@ -348,7 +205,7 @@ var EcommerceCard = ({
|
|
|
348
205
|
color: "#fff",
|
|
349
206
|
textTransform: "uppercase",
|
|
350
207
|
letterSpacing: "0.5px"
|
|
351
|
-
} }, badge), /* @__PURE__ */
|
|
208
|
+
} }, badge), /* @__PURE__ */ import_react2.default.createElement(
|
|
352
209
|
"button",
|
|
353
210
|
{
|
|
354
211
|
onClick: () => setWishlisted(!wishlisted),
|
|
@@ -367,7 +224,7 @@ var EcommerceCard = ({
|
|
|
367
224
|
cursor: "pointer"
|
|
368
225
|
}
|
|
369
226
|
},
|
|
370
|
-
/* @__PURE__ */
|
|
227
|
+
/* @__PURE__ */ import_react2.default.createElement(
|
|
371
228
|
"svg",
|
|
372
229
|
{
|
|
373
230
|
width: "16",
|
|
@@ -377,38 +234,38 @@ var EcommerceCard = ({
|
|
|
377
234
|
stroke: wishlisted ? "#ef4444" : "#fff",
|
|
378
235
|
strokeWidth: "2"
|
|
379
236
|
},
|
|
380
|
-
/* @__PURE__ */
|
|
237
|
+
/* @__PURE__ */ import_react2.default.createElement("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })
|
|
381
238
|
)
|
|
382
239
|
)),
|
|
383
|
-
/* @__PURE__ */
|
|
240
|
+
/* @__PURE__ */ import_react2.default.createElement("div", { style: { padding: "16px" } }, /* @__PURE__ */ import_react2.default.createElement("h3", { style: {
|
|
384
241
|
fontSize: "16px",
|
|
385
242
|
fontWeight: "700",
|
|
386
243
|
color: "#fff",
|
|
387
244
|
margin: "0 0 8px",
|
|
388
245
|
lineHeight: 1.4
|
|
389
|
-
} }, title), /* @__PURE__ */
|
|
246
|
+
} }, title), /* @__PURE__ */ import_react2.default.createElement("div", { style: {
|
|
390
247
|
display: "flex",
|
|
391
248
|
alignItems: "center",
|
|
392
249
|
gap: "6px",
|
|
393
250
|
marginBottom: "12px"
|
|
394
|
-
} }, /* @__PURE__ */
|
|
251
|
+
} }, /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex" } }, renderStars()), /* @__PURE__ */ import_react2.default.createElement("span", { style: {
|
|
395
252
|
fontSize: "12px",
|
|
396
253
|
color: "rgba(255,255,255,0.45)"
|
|
397
|
-
} }, "(", reviewCount, ")")), /* @__PURE__ */
|
|
254
|
+
} }, "(", reviewCount, ")")), /* @__PURE__ */ import_react2.default.createElement("div", { style: {
|
|
398
255
|
display: "flex",
|
|
399
256
|
alignItems: "center",
|
|
400
257
|
gap: "10px",
|
|
401
258
|
marginBottom: "16px"
|
|
402
|
-
} }, /* @__PURE__ */
|
|
259
|
+
} }, /* @__PURE__ */ import_react2.default.createElement("span", { style: {
|
|
403
260
|
fontSize: "20px",
|
|
404
261
|
fontWeight: "800",
|
|
405
262
|
color: "#fff"
|
|
406
|
-
} }, currency, price.toFixed(2)), discount > 0 && /* @__PURE__ */
|
|
263
|
+
} }, currency, price.toFixed(2)), discount > 0 && /* @__PURE__ */ import_react2.default.createElement("span", { style: {
|
|
407
264
|
fontSize: "14px",
|
|
408
265
|
fontWeight: "500",
|
|
409
266
|
color: "#86efac",
|
|
410
267
|
textDecoration: "line-through"
|
|
411
|
-
} }, currency, (price + price * discount / 100).toFixed(2))), /* @__PURE__ */
|
|
268
|
+
} }, currency, (price + price * discount / 100).toFixed(2))), /* @__PURE__ */ import_react2.default.createElement(
|
|
412
269
|
"button",
|
|
413
270
|
{
|
|
414
271
|
onClick: onAddToCart,
|
|
@@ -429,14 +286,14 @@ var EcommerceCard = ({
|
|
|
429
286
|
gap: "8px"
|
|
430
287
|
}
|
|
431
288
|
},
|
|
432
|
-
/* @__PURE__ */
|
|
289
|
+
/* @__PURE__ */ import_react2.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react2.default.createElement("circle", { cx: "9", cy: "21", r: "1" }), /* @__PURE__ */ import_react2.default.createElement("circle", { cx: "20", cy: "21", r: "1" }), /* @__PURE__ */ import_react2.default.createElement("path", { d: "M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" })),
|
|
433
290
|
"Add to Cart"
|
|
434
291
|
))
|
|
435
292
|
);
|
|
436
293
|
};
|
|
437
294
|
|
|
438
295
|
// src/components/ProfileCard/ProfileCard.jsx
|
|
439
|
-
var
|
|
296
|
+
var import_react3 = __toESM(require("react"));
|
|
440
297
|
var ProfileCard = ({
|
|
441
298
|
name = "John Doe",
|
|
442
299
|
bio = "Software Engineer | Tech Enthusiast",
|
|
@@ -452,7 +309,47 @@ var ProfileCard = ({
|
|
|
452
309
|
const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
|
|
453
310
|
return "rgba(" + r + "," + g + "," + b + "," + op + ")";
|
|
454
311
|
};
|
|
455
|
-
return /* @__PURE__ */
|
|
312
|
+
return /* @__PURE__ */ import_react3.default.createElement("div", { style: { background: bg, borderRadius: "20px", padding: "24px", width: "280px", color: "#fff", fontFamily: "system-ui,sans-serif", boxShadow: "0 10px 40px rgba(0,0,0,0.5)", border: "1px solid " + alpha(accent, 0.25), position: "relative", overflow: "hidden" } }, /* @__PURE__ */ import_react3.default.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ import_react3.default.createElement("div", { style: { width: "80px", height: "80px", borderRadius: "50%", overflow: "hidden", border: "3px solid " + alpha(accent, 0.3) } }, /* @__PURE__ */ import_react3.default.createElement("img", { src: avatar, alt: name, style: { width: "100%", height: "100%", objectFit: "cover" } })), /* @__PURE__ */ import_react3.default.createElement("div", { style: { fontSize: "18px", fontWeight: "700", color: "#fff" } }, name), /* @__PURE__ */ import_react3.default.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", textAlign: "center" } }, bio), /* @__PURE__ */ import_react3.default.createElement("div", { style: { display: "flex", gap: "12px", marginTop: "12px" } }, /* @__PURE__ */ import_react3.default.createElement("button", { onClick: onFollowClick, style: { padding: "8px 16px", borderRadius: "8px", border: "none", background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")", color: "#fff", fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" } }, "Follow"), /* @__PURE__ */ import_react3.default.createElement("button", { onClick: onMessageClick, style: { padding: "8px 16px", borderRadius: "8px", border: "1px solid " + alpha(accent, 0.3), background: "transparent", color: accent, fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" } }, "Message"))));
|
|
313
|
+
};
|
|
314
|
+
|
|
315
|
+
// src/components/Card/Card.jsx
|
|
316
|
+
var import_react4 = __toESM(require("react"));
|
|
317
|
+
var Card = ({
|
|
318
|
+
title = "Card Title",
|
|
319
|
+
description = "This is a description of the card content.",
|
|
320
|
+
image = "https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=600&q=80",
|
|
321
|
+
accent = "#6366f1",
|
|
322
|
+
bg = "#0f172a",
|
|
323
|
+
onClick = () => {
|
|
324
|
+
}
|
|
325
|
+
}) => {
|
|
326
|
+
const [hovered, setHovered] = (0, import_react4.useState)(false);
|
|
327
|
+
const alpha = (hex, op) => {
|
|
328
|
+
const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
|
|
329
|
+
return "rgba(" + r + "," + g + "," + b + "," + op + ")";
|
|
330
|
+
};
|
|
331
|
+
return /* @__PURE__ */ import_react4.default.createElement(
|
|
332
|
+
"div",
|
|
333
|
+
{
|
|
334
|
+
onMouseEnter: () => setHovered(true),
|
|
335
|
+
onMouseLeave: () => setHovered(false),
|
|
336
|
+
onClick,
|
|
337
|
+
style: {
|
|
338
|
+
background: bg,
|
|
339
|
+
borderRadius: "20px",
|
|
340
|
+
overflow: "hidden",
|
|
341
|
+
width: "300px",
|
|
342
|
+
border: "1px solid " + (hovered ? alpha(accent, 0.3) : "rgba(255,255,255,0.07)"),
|
|
343
|
+
fontFamily: "system-ui,sans-serif",
|
|
344
|
+
transition: "transform 0.25s, box-shadow 0.25s",
|
|
345
|
+
transform: hovered ? "translateY(-4px)" : "translateY(0px)",
|
|
346
|
+
boxShadow: hovered ? "0 16px 40px rgba(0,0,0,0.5)" : "0 4px 20px rgba(0,0,0,0.3)",
|
|
347
|
+
cursor: "pointer"
|
|
348
|
+
}
|
|
349
|
+
},
|
|
350
|
+
/* @__PURE__ */ import_react4.default.createElement("div", { style: { position: "relative", width: "100%", height: "180px", overflow: "hidden" } }, /* @__PURE__ */ import_react4.default.createElement("img", { src: image, alt: title, style: { width: "100%", height: "100%", objectFit: "cover", transform: hovered ? "scale(1.05)" : "scale(1)", transition: "transform 0.4s ease" } }), /* @__PURE__ */ import_react4.default.createElement("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)" } })),
|
|
351
|
+
/* @__PURE__ */ import_react4.default.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ import_react4.default.createElement("h3", { style: { fontSize: "15px", fontWeight: "700", color: "#fff", margin: "0 0 8px", lineHeight: 1.4 } }, title), /* @__PURE__ */ import_react4.default.createElement("p", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", lineHeight: 1.65, margin: "0 0 18px" } }, description))
|
|
352
|
+
);
|
|
456
353
|
};
|
|
457
354
|
// Annotate the CommonJS export names for ESM import in node:
|
|
458
355
|
0 && (module.exports = {
|
package/dist/index.mjs
CHANGED
|
@@ -82,151 +82,8 @@ function shadeColor(hex, percent) {
|
|
|
82
82
|
return `rgb(${r},${g},${b})`;
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
// src/components/Card/Card.jsx
|
|
86
|
-
import React2, { useState as useState2 } from "react";
|
|
87
|
-
var Card = ({
|
|
88
|
-
title = "Card Title",
|
|
89
|
-
description = "This is a simple, reusable card component you can customize with props.",
|
|
90
|
-
image = null,
|
|
91
|
-
badge = null,
|
|
92
|
-
badgeColor = "#6366f1",
|
|
93
|
-
accentColor = "#6366f1",
|
|
94
|
-
actions = [],
|
|
95
|
-
footer = null,
|
|
96
|
-
width = "320px",
|
|
97
|
-
onClick = null
|
|
98
|
-
}) => {
|
|
99
|
-
const [hovered, setHovered] = useState2(false);
|
|
100
|
-
const [liked, setLiked] = useState2(false);
|
|
101
|
-
const style = {
|
|
102
|
-
width,
|
|
103
|
-
borderRadius: "16px",
|
|
104
|
-
background: "#ffffff",
|
|
105
|
-
boxShadow: hovered ? "0 16px 48px rgba(0,0,0,0.13)" : "0 4px 20px rgba(0,0,0,0.07)",
|
|
106
|
-
transform: hovered ? "translateY(-4px)" : "translateY(0)",
|
|
107
|
-
transition: "all 0.22s ease",
|
|
108
|
-
overflow: "hidden",
|
|
109
|
-
fontFamily: "system-ui, sans-serif",
|
|
110
|
-
cursor: onClick ? "pointer" : "default",
|
|
111
|
-
border: "1px solid #f1f5f9"
|
|
112
|
-
};
|
|
113
|
-
return /* @__PURE__ */ React2.createElement(
|
|
114
|
-
"div",
|
|
115
|
-
{
|
|
116
|
-
style,
|
|
117
|
-
onMouseEnter: () => setHovered(true),
|
|
118
|
-
onMouseLeave: () => setHovered(false),
|
|
119
|
-
onClick
|
|
120
|
-
},
|
|
121
|
-
image && /* @__PURE__ */ React2.createElement("div", { style: { width: "100%", height: "180px", overflow: "hidden", position: "relative" } }, /* @__PURE__ */ React2.createElement(
|
|
122
|
-
"img",
|
|
123
|
-
{
|
|
124
|
-
src: image,
|
|
125
|
-
alt: title,
|
|
126
|
-
style: {
|
|
127
|
-
width: "100%",
|
|
128
|
-
height: "100%",
|
|
129
|
-
objectFit: "cover",
|
|
130
|
-
transform: hovered ? "scale(1.04)" : "scale(1)",
|
|
131
|
-
transition: "transform 0.35s ease"
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
), badge && /* @__PURE__ */ React2.createElement("span", { style: {
|
|
135
|
-
position: "absolute",
|
|
136
|
-
top: "12px",
|
|
137
|
-
left: "12px",
|
|
138
|
-
background: badgeColor,
|
|
139
|
-
color: "#fff",
|
|
140
|
-
fontSize: "11px",
|
|
141
|
-
fontWeight: 700,
|
|
142
|
-
letterSpacing: "0.06em",
|
|
143
|
-
textTransform: "uppercase",
|
|
144
|
-
padding: "4px 10px",
|
|
145
|
-
borderRadius: "99px"
|
|
146
|
-
} }, badge)),
|
|
147
|
-
/* @__PURE__ */ React2.createElement("div", { style: { padding: "20px 20px 16px" } }, !image && badge && /* @__PURE__ */ React2.createElement("span", { style: {
|
|
148
|
-
display: "inline-block",
|
|
149
|
-
background: badgeColor + "18",
|
|
150
|
-
color: badgeColor,
|
|
151
|
-
fontSize: "11px",
|
|
152
|
-
fontWeight: 700,
|
|
153
|
-
letterSpacing: "0.06em",
|
|
154
|
-
textTransform: "uppercase",
|
|
155
|
-
padding: "3px 10px",
|
|
156
|
-
borderRadius: "99px",
|
|
157
|
-
marginBottom: "10px"
|
|
158
|
-
} }, badge), /* @__PURE__ */ React2.createElement("h3", { style: { margin: "0 0 8px", fontSize: "17px", fontWeight: 700, color: "#0f172a", lineHeight: 1.3 } }, title), /* @__PURE__ */ React2.createElement("p", { style: { margin: 0, fontSize: "14px", color: "#64748b", lineHeight: 1.6 } }, description)),
|
|
159
|
-
(actions.length > 0 || true) && /* @__PURE__ */ React2.createElement("div", { style: { padding: "0 20px 18px", display: "flex", alignItems: "center", gap: "10px" } }, actions.map((action, i) => /* @__PURE__ */ React2.createElement(ActionButton, { key: i, ...action, accentColor, primary: i === 0 })), /* @__PURE__ */ React2.createElement(
|
|
160
|
-
"button",
|
|
161
|
-
{
|
|
162
|
-
onClick: (e) => {
|
|
163
|
-
e.stopPropagation();
|
|
164
|
-
setLiked(!liked);
|
|
165
|
-
},
|
|
166
|
-
style: {
|
|
167
|
-
marginLeft: "auto",
|
|
168
|
-
background: liked ? "#fef2f2" : "#f8fafc",
|
|
169
|
-
border: "none",
|
|
170
|
-
borderRadius: "8px",
|
|
171
|
-
padding: "8px 10px",
|
|
172
|
-
cursor: "pointer",
|
|
173
|
-
fontSize: "16px",
|
|
174
|
-
transition: "all 0.15s",
|
|
175
|
-
transform: liked ? "scale(1.15)" : "scale(1)"
|
|
176
|
-
},
|
|
177
|
-
title: liked ? "Unlike" : "Like"
|
|
178
|
-
},
|
|
179
|
-
liked ? "\u2764\uFE0F" : "\u{1F90D}"
|
|
180
|
-
)),
|
|
181
|
-
footer && /* @__PURE__ */ React2.createElement("div", { style: {
|
|
182
|
-
borderTop: "1px solid #f1f5f9",
|
|
183
|
-
padding: "12px 20px",
|
|
184
|
-
fontSize: "12px",
|
|
185
|
-
color: "#94a3b8",
|
|
186
|
-
display: "flex",
|
|
187
|
-
alignItems: "center",
|
|
188
|
-
gap: "6px"
|
|
189
|
-
} }, footer)
|
|
190
|
-
);
|
|
191
|
-
};
|
|
192
|
-
var ActionButton = ({ label = "Action", onClick = () => {
|
|
193
|
-
}, accentColor = "#6366f1", primary = false }) => {
|
|
194
|
-
const [hovered, setHovered] = useState2(false);
|
|
195
|
-
return /* @__PURE__ */ React2.createElement(
|
|
196
|
-
"button",
|
|
197
|
-
{
|
|
198
|
-
onClick: (e) => {
|
|
199
|
-
e.stopPropagation();
|
|
200
|
-
onClick();
|
|
201
|
-
},
|
|
202
|
-
onMouseEnter: () => setHovered(true),
|
|
203
|
-
onMouseLeave: () => setHovered(false),
|
|
204
|
-
style: {
|
|
205
|
-
padding: "8px 18px",
|
|
206
|
-
borderRadius: "8px",
|
|
207
|
-
fontSize: "13px",
|
|
208
|
-
fontWeight: 600,
|
|
209
|
-
cursor: "pointer",
|
|
210
|
-
transition: "all 0.15s",
|
|
211
|
-
background: primary ? hovered ? shadeColor2(accentColor, -15) : accentColor : hovered ? accentColor + "12" : "transparent",
|
|
212
|
-
color: primary ? "#fff" : accentColor,
|
|
213
|
-
border: primary ? "none" : `1.5px solid ${accentColor}`,
|
|
214
|
-
boxShadow: primary && !hovered ? `0 3px 10px ${accentColor}40` : "none"
|
|
215
|
-
}
|
|
216
|
-
},
|
|
217
|
-
label
|
|
218
|
-
);
|
|
219
|
-
};
|
|
220
|
-
function shadeColor2(hex, percent) {
|
|
221
|
-
const num = parseInt(hex.replace("#", ""), 16);
|
|
222
|
-
const r = Math.min(255, Math.max(0, (num >> 16) + percent));
|
|
223
|
-
const g = Math.min(255, Math.max(0, (num >> 8 & 255) + percent));
|
|
224
|
-
const b = Math.min(255, Math.max(0, (num & 255) + percent));
|
|
225
|
-
return `rgb(${r},${g},${b})`;
|
|
226
|
-
}
|
|
227
|
-
|
|
228
85
|
// src/components/EcommerceCard/EcommerceCard.jsx
|
|
229
|
-
import
|
|
86
|
+
import React2, { useState as useState2 } from "react";
|
|
230
87
|
var EcommerceCard = ({
|
|
231
88
|
image = "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=600&q=80",
|
|
232
89
|
title = "Wireless Headphones",
|
|
@@ -241,8 +98,8 @@ var EcommerceCard = ({
|
|
|
241
98
|
onAddToCart = () => {
|
|
242
99
|
}
|
|
243
100
|
}) => {
|
|
244
|
-
const [hovered, setHovered] =
|
|
245
|
-
const [wishlisted, setWishlisted] =
|
|
101
|
+
const [hovered, setHovered] = useState2(false);
|
|
102
|
+
const [wishlisted, setWishlisted] = useState2(false);
|
|
246
103
|
const alpha = (hex, op) => {
|
|
247
104
|
const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
|
|
248
105
|
return "rgba(" + r + "," + g + "," + b + "," + op + ")";
|
|
@@ -254,21 +111,21 @@ var EcommerceCard = ({
|
|
|
254
111
|
for (let i = 1; i <= 5; i++) {
|
|
255
112
|
if (i <= fullStars) {
|
|
256
113
|
stars.push(
|
|
257
|
-
/* @__PURE__ */
|
|
114
|
+
/* @__PURE__ */ React2.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "#fbbf24", stroke: "none" }, /* @__PURE__ */ React2.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }))
|
|
258
115
|
);
|
|
259
116
|
} else if (i === fullStars + 1 && hasHalfStar) {
|
|
260
117
|
stars.push(
|
|
261
|
-
/* @__PURE__ */
|
|
118
|
+
/* @__PURE__ */ React2.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "#fbbf24", stroke: "none" }, /* @__PURE__ */ React2.createElement("defs", null, /* @__PURE__ */ React2.createElement("linearGradient", { id: "half", x1: "0", x2: "100%", y1: "0", y2: "0" }, /* @__PURE__ */ React2.createElement("stop", { offset: "50%", stopColor: "#fbbf24" }), /* @__PURE__ */ React2.createElement("stop", { offset: "50%", stopColor: "rgba(255,255,255,0.1)" }))), /* @__PURE__ */ React2.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2", fill: "url(#half)" }))
|
|
262
119
|
);
|
|
263
120
|
} else {
|
|
264
121
|
stars.push(
|
|
265
|
-
/* @__PURE__ */
|
|
122
|
+
/* @__PURE__ */ React2.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "rgba(255,255,255,0.1)", stroke: "none" }, /* @__PURE__ */ React2.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }))
|
|
266
123
|
);
|
|
267
124
|
}
|
|
268
125
|
}
|
|
269
126
|
return stars;
|
|
270
127
|
};
|
|
271
|
-
return /* @__PURE__ */
|
|
128
|
+
return /* @__PURE__ */ React2.createElement(
|
|
272
129
|
"div",
|
|
273
130
|
{
|
|
274
131
|
onMouseEnter: () => setHovered(true),
|
|
@@ -285,7 +142,7 @@ var EcommerceCard = ({
|
|
|
285
142
|
boxShadow: hovered ? "0 12px 30px rgba(0,0,0,0.4)" : "0 4px 16px rgba(0,0,0,0.3)"
|
|
286
143
|
}
|
|
287
144
|
},
|
|
288
|
-
/* @__PURE__ */
|
|
145
|
+
/* @__PURE__ */ React2.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React2.createElement(
|
|
289
146
|
"img",
|
|
290
147
|
{
|
|
291
148
|
src: image,
|
|
@@ -298,7 +155,7 @@ var EcommerceCard = ({
|
|
|
298
155
|
transform: hovered ? "scale(1.05)" : "scale(1)"
|
|
299
156
|
}
|
|
300
157
|
}
|
|
301
|
-
), badge && /* @__PURE__ */
|
|
158
|
+
), badge && /* @__PURE__ */ React2.createElement("div", { style: {
|
|
302
159
|
position: "absolute",
|
|
303
160
|
top: "10px",
|
|
304
161
|
left: "10px",
|
|
@@ -310,7 +167,7 @@ var EcommerceCard = ({
|
|
|
310
167
|
color: "#fff",
|
|
311
168
|
textTransform: "uppercase",
|
|
312
169
|
letterSpacing: "0.5px"
|
|
313
|
-
} }, badge), /* @__PURE__ */
|
|
170
|
+
} }, badge), /* @__PURE__ */ React2.createElement(
|
|
314
171
|
"button",
|
|
315
172
|
{
|
|
316
173
|
onClick: () => setWishlisted(!wishlisted),
|
|
@@ -329,7 +186,7 @@ var EcommerceCard = ({
|
|
|
329
186
|
cursor: "pointer"
|
|
330
187
|
}
|
|
331
188
|
},
|
|
332
|
-
/* @__PURE__ */
|
|
189
|
+
/* @__PURE__ */ React2.createElement(
|
|
333
190
|
"svg",
|
|
334
191
|
{
|
|
335
192
|
width: "16",
|
|
@@ -339,38 +196,38 @@ var EcommerceCard = ({
|
|
|
339
196
|
stroke: wishlisted ? "#ef4444" : "#fff",
|
|
340
197
|
strokeWidth: "2"
|
|
341
198
|
},
|
|
342
|
-
/* @__PURE__ */
|
|
199
|
+
/* @__PURE__ */ React2.createElement("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })
|
|
343
200
|
)
|
|
344
201
|
)),
|
|
345
|
-
/* @__PURE__ */
|
|
202
|
+
/* @__PURE__ */ React2.createElement("div", { style: { padding: "16px" } }, /* @__PURE__ */ React2.createElement("h3", { style: {
|
|
346
203
|
fontSize: "16px",
|
|
347
204
|
fontWeight: "700",
|
|
348
205
|
color: "#fff",
|
|
349
206
|
margin: "0 0 8px",
|
|
350
207
|
lineHeight: 1.4
|
|
351
|
-
} }, title), /* @__PURE__ */
|
|
208
|
+
} }, title), /* @__PURE__ */ React2.createElement("div", { style: {
|
|
352
209
|
display: "flex",
|
|
353
210
|
alignItems: "center",
|
|
354
211
|
gap: "6px",
|
|
355
212
|
marginBottom: "12px"
|
|
356
|
-
} }, /* @__PURE__ */
|
|
213
|
+
} }, /* @__PURE__ */ React2.createElement("div", { style: { display: "flex" } }, renderStars()), /* @__PURE__ */ React2.createElement("span", { style: {
|
|
357
214
|
fontSize: "12px",
|
|
358
215
|
color: "rgba(255,255,255,0.45)"
|
|
359
|
-
} }, "(", reviewCount, ")")), /* @__PURE__ */
|
|
216
|
+
} }, "(", reviewCount, ")")), /* @__PURE__ */ React2.createElement("div", { style: {
|
|
360
217
|
display: "flex",
|
|
361
218
|
alignItems: "center",
|
|
362
219
|
gap: "10px",
|
|
363
220
|
marginBottom: "16px"
|
|
364
|
-
} }, /* @__PURE__ */
|
|
221
|
+
} }, /* @__PURE__ */ React2.createElement("span", { style: {
|
|
365
222
|
fontSize: "20px",
|
|
366
223
|
fontWeight: "800",
|
|
367
224
|
color: "#fff"
|
|
368
|
-
} }, currency, price.toFixed(2)), discount > 0 && /* @__PURE__ */
|
|
225
|
+
} }, currency, price.toFixed(2)), discount > 0 && /* @__PURE__ */ React2.createElement("span", { style: {
|
|
369
226
|
fontSize: "14px",
|
|
370
227
|
fontWeight: "500",
|
|
371
228
|
color: "#86efac",
|
|
372
229
|
textDecoration: "line-through"
|
|
373
|
-
} }, currency, (price + price * discount / 100).toFixed(2))), /* @__PURE__ */
|
|
230
|
+
} }, currency, (price + price * discount / 100).toFixed(2))), /* @__PURE__ */ React2.createElement(
|
|
374
231
|
"button",
|
|
375
232
|
{
|
|
376
233
|
onClick: onAddToCart,
|
|
@@ -391,14 +248,14 @@ var EcommerceCard = ({
|
|
|
391
248
|
gap: "8px"
|
|
392
249
|
}
|
|
393
250
|
},
|
|
394
|
-
/* @__PURE__ */
|
|
251
|
+
/* @__PURE__ */ React2.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React2.createElement("circle", { cx: "9", cy: "21", r: "1" }), /* @__PURE__ */ React2.createElement("circle", { cx: "20", cy: "21", r: "1" }), /* @__PURE__ */ React2.createElement("path", { d: "M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" })),
|
|
395
252
|
"Add to Cart"
|
|
396
253
|
))
|
|
397
254
|
);
|
|
398
255
|
};
|
|
399
256
|
|
|
400
257
|
// src/components/ProfileCard/ProfileCard.jsx
|
|
401
|
-
import
|
|
258
|
+
import React3 from "react";
|
|
402
259
|
var ProfileCard = ({
|
|
403
260
|
name = "John Doe",
|
|
404
261
|
bio = "Software Engineer | Tech Enthusiast",
|
|
@@ -414,7 +271,47 @@ var ProfileCard = ({
|
|
|
414
271
|
const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
|
|
415
272
|
return "rgba(" + r + "," + g + "," + b + "," + op + ")";
|
|
416
273
|
};
|
|
417
|
-
return /* @__PURE__ */
|
|
274
|
+
return /* @__PURE__ */ React3.createElement("div", { style: { background: bg, borderRadius: "20px", padding: "24px", width: "280px", color: "#fff", fontFamily: "system-ui,sans-serif", boxShadow: "0 10px 40px rgba(0,0,0,0.5)", border: "1px solid " + alpha(accent, 0.25), position: "relative", overflow: "hidden" } }, /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ React3.createElement("div", { style: { width: "80px", height: "80px", borderRadius: "50%", overflow: "hidden", border: "3px solid " + alpha(accent, 0.3) } }, /* @__PURE__ */ React3.createElement("img", { src: avatar, alt: name, style: { width: "100%", height: "100%", objectFit: "cover" } })), /* @__PURE__ */ React3.createElement("div", { style: { fontSize: "18px", fontWeight: "700", color: "#fff" } }, name), /* @__PURE__ */ React3.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", textAlign: "center" } }, bio), /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", gap: "12px", marginTop: "12px" } }, /* @__PURE__ */ React3.createElement("button", { onClick: onFollowClick, style: { padding: "8px 16px", borderRadius: "8px", border: "none", background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")", color: "#fff", fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" } }, "Follow"), /* @__PURE__ */ React3.createElement("button", { onClick: onMessageClick, style: { padding: "8px 16px", borderRadius: "8px", border: "1px solid " + alpha(accent, 0.3), background: "transparent", color: accent, fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" } }, "Message"))));
|
|
275
|
+
};
|
|
276
|
+
|
|
277
|
+
// src/components/Card/Card.jsx
|
|
278
|
+
import React4, { useState as useState3 } from "react";
|
|
279
|
+
var Card = ({
|
|
280
|
+
title = "Card Title",
|
|
281
|
+
description = "This is a description of the card content.",
|
|
282
|
+
image = "https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=600&q=80",
|
|
283
|
+
accent = "#6366f1",
|
|
284
|
+
bg = "#0f172a",
|
|
285
|
+
onClick = () => {
|
|
286
|
+
}
|
|
287
|
+
}) => {
|
|
288
|
+
const [hovered, setHovered] = useState3(false);
|
|
289
|
+
const alpha = (hex, op) => {
|
|
290
|
+
const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
|
|
291
|
+
return "rgba(" + r + "," + g + "," + b + "," + op + ")";
|
|
292
|
+
};
|
|
293
|
+
return /* @__PURE__ */ React4.createElement(
|
|
294
|
+
"div",
|
|
295
|
+
{
|
|
296
|
+
onMouseEnter: () => setHovered(true),
|
|
297
|
+
onMouseLeave: () => setHovered(false),
|
|
298
|
+
onClick,
|
|
299
|
+
style: {
|
|
300
|
+
background: bg,
|
|
301
|
+
borderRadius: "20px",
|
|
302
|
+
overflow: "hidden",
|
|
303
|
+
width: "300px",
|
|
304
|
+
border: "1px solid " + (hovered ? alpha(accent, 0.3) : "rgba(255,255,255,0.07)"),
|
|
305
|
+
fontFamily: "system-ui,sans-serif",
|
|
306
|
+
transition: "transform 0.25s, box-shadow 0.25s",
|
|
307
|
+
transform: hovered ? "translateY(-4px)" : "translateY(0px)",
|
|
308
|
+
boxShadow: hovered ? "0 16px 40px rgba(0,0,0,0.5)" : "0 4px 20px rgba(0,0,0,0.3)",
|
|
309
|
+
cursor: "pointer"
|
|
310
|
+
}
|
|
311
|
+
},
|
|
312
|
+
/* @__PURE__ */ React4.createElement("div", { style: { position: "relative", width: "100%", height: "180px", overflow: "hidden" } }, /* @__PURE__ */ React4.createElement("img", { src: image, alt: title, style: { width: "100%", height: "100%", objectFit: "cover", transform: hovered ? "scale(1.05)" : "scale(1)", transition: "transform 0.4s ease" } }), /* @__PURE__ */ React4.createElement("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)" } })),
|
|
313
|
+
/* @__PURE__ */ React4.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ React4.createElement("h3", { style: { fontSize: "15px", fontWeight: "700", color: "#fff", margin: "0 0 8px", lineHeight: 1.4 } }, title), /* @__PURE__ */ React4.createElement("p", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", lineHeight: 1.65, margin: "0 0 18px" } }, description))
|
|
314
|
+
);
|
|
418
315
|
};
|
|
419
316
|
export {
|
|
420
317
|
Button,
|