virtuo-ui-library 1.0.2 → 1.0.3

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 CHANGED
@@ -31,6 +31,7 @@ var index_exports = {};
31
31
  __export(index_exports, {
32
32
  Button: () => Button,
33
33
  Card: () => Card,
34
+ EcommerceCard: () => EcommerceCard,
34
35
  ProfileCard: () => ProfileCard
35
36
  });
36
37
  module.exports = __toCommonJS(index_exports);
@@ -334,9 +335,182 @@ var ProfileCard = ({
334
335
  /* @__PURE__ */ import_react3.default.createElement("button", { style: buttonStyle, onClick: () => setIsFollowing(!isFollowing) }, isFollowing ? "Following" : "Follow")
335
336
  );
336
337
  };
338
+
339
+ // src/components/EcommerceCard/EcommerceCard.jsx
340
+ var import_react4 = __toESM(require("react"));
341
+ var EcommerceCard = ({
342
+ image = "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=600&q=80",
343
+ title = "Wireless Headphones",
344
+ price = 129.99,
345
+ currency = "$",
346
+ discount = 0,
347
+ rating = 4.5,
348
+ reviewCount = 124,
349
+ badge = "Best Seller",
350
+ accent = "#6366f1",
351
+ bg = "#0f172a",
352
+ onAddToCart = () => {
353
+ }
354
+ }) => {
355
+ const [hovered, setHovered] = (0, import_react4.useState)(false);
356
+ const [wishlisted, setWishlisted] = (0, import_react4.useState)(false);
357
+ const alpha = (hex, op) => {
358
+ const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
359
+ return "rgba(" + r + "," + g + "," + b + "," + op + ")";
360
+ };
361
+ const renderStars = () => {
362
+ const stars = [];
363
+ const fullStars = Math.floor(rating);
364
+ const hasHalfStar = rating % 1 >= 0.5;
365
+ for (let i = 1; i <= 5; i++) {
366
+ if (i <= fullStars) {
367
+ stars.push(
368
+ /* @__PURE__ */ import_react4.default.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "#fbbf24", stroke: "none" }, /* @__PURE__ */ import_react4.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" }))
369
+ );
370
+ } else if (i === fullStars + 1 && hasHalfStar) {
371
+ stars.push(
372
+ /* @__PURE__ */ import_react4.default.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "#fbbf24", stroke: "none" }, /* @__PURE__ */ import_react4.default.createElement("defs", null, /* @__PURE__ */ import_react4.default.createElement("linearGradient", { id: "half", x1: "0", x2: "100%", y1: "0", y2: "0" }, /* @__PURE__ */ import_react4.default.createElement("stop", { offset: "50%", stopColor: "#fbbf24" }), /* @__PURE__ */ import_react4.default.createElement("stop", { offset: "50%", stopColor: "rgba(255,255,255,0.1)" }))), /* @__PURE__ */ import_react4.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)" }))
373
+ );
374
+ } else {
375
+ stars.push(
376
+ /* @__PURE__ */ import_react4.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_react4.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" }))
377
+ );
378
+ }
379
+ }
380
+ return stars;
381
+ };
382
+ return /* @__PURE__ */ import_react4.default.createElement(
383
+ "div",
384
+ {
385
+ onMouseEnter: () => setHovered(true),
386
+ onMouseLeave: () => setHovered(false),
387
+ style: {
388
+ background: bg,
389
+ borderRadius: "16px",
390
+ overflow: "hidden",
391
+ width: "280px",
392
+ border: "1px solid " + (hovered ? alpha(accent, 0.2) : "rgba(255,255,255,0.07)"),
393
+ fontFamily: "system-ui,sans-serif",
394
+ transition: "transform 0.2s, box-shadow 0.2s",
395
+ transform: hovered ? "translateY(-4px)" : "translateY(0px)",
396
+ boxShadow: hovered ? "0 12px 30px rgba(0,0,0,0.4)" : "0 4px 16px rgba(0,0,0,0.3)"
397
+ }
398
+ },
399
+ /* @__PURE__ */ import_react4.default.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ import_react4.default.createElement(
400
+ "img",
401
+ {
402
+ src: image,
403
+ alt: title,
404
+ style: {
405
+ width: "100%",
406
+ height: "200px",
407
+ objectFit: "cover",
408
+ transition: "transform 0.4s",
409
+ transform: hovered ? "scale(1.05)" : "scale(1)"
410
+ }
411
+ }
412
+ ), badge && /* @__PURE__ */ import_react4.default.createElement("div", { style: {
413
+ position: "absolute",
414
+ top: "10px",
415
+ left: "10px",
416
+ padding: "4px 10px",
417
+ borderRadius: "20px",
418
+ background: alpha(accent, 0.9),
419
+ fontSize: "10px",
420
+ fontWeight: "700",
421
+ color: "#fff",
422
+ textTransform: "uppercase",
423
+ letterSpacing: "0.5px"
424
+ } }, badge), /* @__PURE__ */ import_react4.default.createElement(
425
+ "button",
426
+ {
427
+ onClick: () => setWishlisted(!wishlisted),
428
+ style: {
429
+ position: "absolute",
430
+ top: "10px",
431
+ right: "10px",
432
+ width: "32px",
433
+ height: "32px",
434
+ borderRadius: "50%",
435
+ background: "rgba(0,0,0,0.5)",
436
+ border: "none",
437
+ display: "flex",
438
+ alignItems: "center",
439
+ justifyContent: "center",
440
+ cursor: "pointer"
441
+ }
442
+ },
443
+ /* @__PURE__ */ import_react4.default.createElement(
444
+ "svg",
445
+ {
446
+ width: "16",
447
+ height: "16",
448
+ viewBox: "0 0 24 24",
449
+ fill: wishlisted ? "#ef4444" : "none",
450
+ stroke: wishlisted ? "#ef4444" : "#fff",
451
+ strokeWidth: "2"
452
+ },
453
+ /* @__PURE__ */ import_react4.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" })
454
+ )
455
+ )),
456
+ /* @__PURE__ */ import_react4.default.createElement("div", { style: { padding: "16px" } }, /* @__PURE__ */ import_react4.default.createElement("h3", { style: {
457
+ fontSize: "16px",
458
+ fontWeight: "700",
459
+ color: "#fff",
460
+ margin: "0 0 8px",
461
+ lineHeight: 1.4
462
+ } }, title), /* @__PURE__ */ import_react4.default.createElement("div", { style: {
463
+ display: "flex",
464
+ alignItems: "center",
465
+ gap: "6px",
466
+ marginBottom: "12px"
467
+ } }, /* @__PURE__ */ import_react4.default.createElement("div", { style: { display: "flex" } }, renderStars()), /* @__PURE__ */ import_react4.default.createElement("span", { style: {
468
+ fontSize: "12px",
469
+ color: "rgba(255,255,255,0.45)"
470
+ } }, "(", reviewCount, ")")), /* @__PURE__ */ import_react4.default.createElement("div", { style: {
471
+ display: "flex",
472
+ alignItems: "center",
473
+ gap: "10px",
474
+ marginBottom: "16px"
475
+ } }, /* @__PURE__ */ import_react4.default.createElement("span", { style: {
476
+ fontSize: "20px",
477
+ fontWeight: "800",
478
+ color: "#fff"
479
+ } }, currency, price.toFixed(2)), discount > 0 && /* @__PURE__ */ import_react4.default.createElement("span", { style: {
480
+ fontSize: "14px",
481
+ fontWeight: "500",
482
+ color: "#86efac",
483
+ textDecoration: "line-through"
484
+ } }, currency, (price + price * discount / 100).toFixed(2))), /* @__PURE__ */ import_react4.default.createElement(
485
+ "button",
486
+ {
487
+ onClick: onAddToCart,
488
+ style: {
489
+ width: "100%",
490
+ padding: "12px",
491
+ borderRadius: "10px",
492
+ border: "none",
493
+ background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")",
494
+ color: "#fff",
495
+ fontSize: "14px",
496
+ fontWeight: "700",
497
+ cursor: "pointer",
498
+ fontFamily: "inherit",
499
+ display: "flex",
500
+ alignItems: "center",
501
+ justifyContent: "center",
502
+ gap: "8px"
503
+ }
504
+ },
505
+ /* @__PURE__ */ import_react4.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react4.default.createElement("circle", { cx: "9", cy: "21", r: "1" }), /* @__PURE__ */ import_react4.default.createElement("circle", { cx: "20", cy: "21", r: "1" }), /* @__PURE__ */ import_react4.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" })),
506
+ "Add to Cart"
507
+ ))
508
+ );
509
+ };
337
510
  // Annotate the CommonJS export names for ESM import in node:
338
511
  0 && (module.exports = {
339
512
  Button,
340
513
  Card,
514
+ EcommerceCard,
341
515
  ProfileCard
342
516
  });
package/dist/index.mjs CHANGED
@@ -297,8 +297,181 @@ var ProfileCard = ({
297
297
  /* @__PURE__ */ React3.createElement("button", { style: buttonStyle, onClick: () => setIsFollowing(!isFollowing) }, isFollowing ? "Following" : "Follow")
298
298
  );
299
299
  };
300
+
301
+ // src/components/EcommerceCard/EcommerceCard.jsx
302
+ import React4, { useState as useState4 } from "react";
303
+ var EcommerceCard = ({
304
+ image = "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=600&q=80",
305
+ title = "Wireless Headphones",
306
+ price = 129.99,
307
+ currency = "$",
308
+ discount = 0,
309
+ rating = 4.5,
310
+ reviewCount = 124,
311
+ badge = "Best Seller",
312
+ accent = "#6366f1",
313
+ bg = "#0f172a",
314
+ onAddToCart = () => {
315
+ }
316
+ }) => {
317
+ const [hovered, setHovered] = useState4(false);
318
+ const [wishlisted, setWishlisted] = useState4(false);
319
+ const alpha = (hex, op) => {
320
+ const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
321
+ return "rgba(" + r + "," + g + "," + b + "," + op + ")";
322
+ };
323
+ const renderStars = () => {
324
+ const stars = [];
325
+ const fullStars = Math.floor(rating);
326
+ const hasHalfStar = rating % 1 >= 0.5;
327
+ for (let i = 1; i <= 5; i++) {
328
+ if (i <= fullStars) {
329
+ stars.push(
330
+ /* @__PURE__ */ React4.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "#fbbf24", stroke: "none" }, /* @__PURE__ */ React4.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" }))
331
+ );
332
+ } else if (i === fullStars + 1 && hasHalfStar) {
333
+ stars.push(
334
+ /* @__PURE__ */ React4.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "#fbbf24", stroke: "none" }, /* @__PURE__ */ React4.createElement("defs", null, /* @__PURE__ */ React4.createElement("linearGradient", { id: "half", x1: "0", x2: "100%", y1: "0", y2: "0" }, /* @__PURE__ */ React4.createElement("stop", { offset: "50%", stopColor: "#fbbf24" }), /* @__PURE__ */ React4.createElement("stop", { offset: "50%", stopColor: "rgba(255,255,255,0.1)" }))), /* @__PURE__ */ React4.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)" }))
335
+ );
336
+ } else {
337
+ stars.push(
338
+ /* @__PURE__ */ React4.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "rgba(255,255,255,0.1)", stroke: "none" }, /* @__PURE__ */ React4.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" }))
339
+ );
340
+ }
341
+ }
342
+ return stars;
343
+ };
344
+ return /* @__PURE__ */ React4.createElement(
345
+ "div",
346
+ {
347
+ onMouseEnter: () => setHovered(true),
348
+ onMouseLeave: () => setHovered(false),
349
+ style: {
350
+ background: bg,
351
+ borderRadius: "16px",
352
+ overflow: "hidden",
353
+ width: "280px",
354
+ border: "1px solid " + (hovered ? alpha(accent, 0.2) : "rgba(255,255,255,0.07)"),
355
+ fontFamily: "system-ui,sans-serif",
356
+ transition: "transform 0.2s, box-shadow 0.2s",
357
+ transform: hovered ? "translateY(-4px)" : "translateY(0px)",
358
+ boxShadow: hovered ? "0 12px 30px rgba(0,0,0,0.4)" : "0 4px 16px rgba(0,0,0,0.3)"
359
+ }
360
+ },
361
+ /* @__PURE__ */ React4.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React4.createElement(
362
+ "img",
363
+ {
364
+ src: image,
365
+ alt: title,
366
+ style: {
367
+ width: "100%",
368
+ height: "200px",
369
+ objectFit: "cover",
370
+ transition: "transform 0.4s",
371
+ transform: hovered ? "scale(1.05)" : "scale(1)"
372
+ }
373
+ }
374
+ ), badge && /* @__PURE__ */ React4.createElement("div", { style: {
375
+ position: "absolute",
376
+ top: "10px",
377
+ left: "10px",
378
+ padding: "4px 10px",
379
+ borderRadius: "20px",
380
+ background: alpha(accent, 0.9),
381
+ fontSize: "10px",
382
+ fontWeight: "700",
383
+ color: "#fff",
384
+ textTransform: "uppercase",
385
+ letterSpacing: "0.5px"
386
+ } }, badge), /* @__PURE__ */ React4.createElement(
387
+ "button",
388
+ {
389
+ onClick: () => setWishlisted(!wishlisted),
390
+ style: {
391
+ position: "absolute",
392
+ top: "10px",
393
+ right: "10px",
394
+ width: "32px",
395
+ height: "32px",
396
+ borderRadius: "50%",
397
+ background: "rgba(0,0,0,0.5)",
398
+ border: "none",
399
+ display: "flex",
400
+ alignItems: "center",
401
+ justifyContent: "center",
402
+ cursor: "pointer"
403
+ }
404
+ },
405
+ /* @__PURE__ */ React4.createElement(
406
+ "svg",
407
+ {
408
+ width: "16",
409
+ height: "16",
410
+ viewBox: "0 0 24 24",
411
+ fill: wishlisted ? "#ef4444" : "none",
412
+ stroke: wishlisted ? "#ef4444" : "#fff",
413
+ strokeWidth: "2"
414
+ },
415
+ /* @__PURE__ */ React4.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" })
416
+ )
417
+ )),
418
+ /* @__PURE__ */ React4.createElement("div", { style: { padding: "16px" } }, /* @__PURE__ */ React4.createElement("h3", { style: {
419
+ fontSize: "16px",
420
+ fontWeight: "700",
421
+ color: "#fff",
422
+ margin: "0 0 8px",
423
+ lineHeight: 1.4
424
+ } }, title), /* @__PURE__ */ React4.createElement("div", { style: {
425
+ display: "flex",
426
+ alignItems: "center",
427
+ gap: "6px",
428
+ marginBottom: "12px"
429
+ } }, /* @__PURE__ */ React4.createElement("div", { style: { display: "flex" } }, renderStars()), /* @__PURE__ */ React4.createElement("span", { style: {
430
+ fontSize: "12px",
431
+ color: "rgba(255,255,255,0.45)"
432
+ } }, "(", reviewCount, ")")), /* @__PURE__ */ React4.createElement("div", { style: {
433
+ display: "flex",
434
+ alignItems: "center",
435
+ gap: "10px",
436
+ marginBottom: "16px"
437
+ } }, /* @__PURE__ */ React4.createElement("span", { style: {
438
+ fontSize: "20px",
439
+ fontWeight: "800",
440
+ color: "#fff"
441
+ } }, currency, price.toFixed(2)), discount > 0 && /* @__PURE__ */ React4.createElement("span", { style: {
442
+ fontSize: "14px",
443
+ fontWeight: "500",
444
+ color: "#86efac",
445
+ textDecoration: "line-through"
446
+ } }, currency, (price + price * discount / 100).toFixed(2))), /* @__PURE__ */ React4.createElement(
447
+ "button",
448
+ {
449
+ onClick: onAddToCart,
450
+ style: {
451
+ width: "100%",
452
+ padding: "12px",
453
+ borderRadius: "10px",
454
+ border: "none",
455
+ background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")",
456
+ color: "#fff",
457
+ fontSize: "14px",
458
+ fontWeight: "700",
459
+ cursor: "pointer",
460
+ fontFamily: "inherit",
461
+ display: "flex",
462
+ alignItems: "center",
463
+ justifyContent: "center",
464
+ gap: "8px"
465
+ }
466
+ },
467
+ /* @__PURE__ */ React4.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React4.createElement("circle", { cx: "9", cy: "21", r: "1" }), /* @__PURE__ */ React4.createElement("circle", { cx: "20", cy: "21", r: "1" }), /* @__PURE__ */ React4.createElement("path", { d: "M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" })),
468
+ "Add to Cart"
469
+ ))
470
+ );
471
+ };
300
472
  export {
301
473
  Button,
302
474
  Card,
475
+ EcommerceCard,
303
476
  ProfileCard
304
477
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "virtuo-ui-library",
3
- "version": "1.0.2",
3
+ "version": "1.0.3",
4
4
  "description": "Virtual UI React Component Library",
5
5
  "license": "ISC",
6
6
  "author": "Ritik Saini",