bhoomi-virtual-ui-library 1.0.0 → 1.0.5

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.
Files changed (3) hide show
  1. package/dist/index.js +284 -2
  2. package/dist/index.mjs +281 -1
  3. package/package.json +4 -2
package/dist/index.js CHANGED
@@ -30,7 +30,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
30
30
  var index_exports = {};
31
31
  __export(index_exports, {
32
32
  Button: () => Button,
33
- Card: () => Card
33
+ Card: () => Card,
34
+ ECommerceCard: () => ECommerceCard,
35
+ Profilecard: () => Profilecard
34
36
  });
35
37
  module.exports = __toCommonJS(index_exports);
36
38
 
@@ -364,8 +366,288 @@ var Card = ({
364
366
  (footer || onClick) && /* @__PURE__ */ import_react2.default.createElement("div", { style: footerStyle }, /* @__PURE__ */ import_react2.default.createElement("span", { style: { fontSize: "13px", color: "#999", fontFamily: "'DM Mono', monospace" } }, footer || "View details"), onClick && /* @__PURE__ */ import_react2.default.createElement("div", { style: arrowStyle }, "\u2192"))
365
367
  ));
366
368
  };
369
+
370
+ // src/components/Profilecard/Profilecard.jsx
371
+ var import_react3 = __toESM(require("react"));
372
+ var Profilecard = ({
373
+ name = "Aria Montoya",
374
+ role = "Senior Product Designer",
375
+ location = "San Francisco, CA",
376
+ bio = "Crafting digital experiences that balance beauty and function. 8 years shaping products at the intersection of design and technology.",
377
+ avatar = null,
378
+ stats = [
379
+ { label: "Projects", value: "124" },
380
+ { label: "Followers", value: "8.4k" },
381
+ { label: "Following", value: "312" }
382
+ ],
383
+ skills = ["Figma", "Motion", "Research", "Systems"],
384
+ social = {
385
+ twitter: "@ariamontoya",
386
+ github: "aria-m",
387
+ dribbble: "ariamontoya"
388
+ },
389
+ available = true,
390
+ coverColor = "#0d0d0d",
391
+ accentColor = "#c8f135",
392
+ onFollow = null,
393
+ onMessage = null
394
+ }) => {
395
+ const [followed, setFollowed] = (0, import_react3.useState)(false);
396
+ const [hoveredStat, setHoveredStat] = (0, import_react3.useState)(null);
397
+ const [hoveredBtn, setHoveredBtn] = (0, import_react3.useState)(null);
398
+ const handleFollow = () => {
399
+ setFollowed((f) => !f);
400
+ onFollow == null ? void 0 : onFollow();
401
+ };
402
+ return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("style", null, `
403
+ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500&display=swap');
404
+ @keyframes fadeUp {
405
+ from { opacity: 0; transform: translateY(16px); }
406
+ to { opacity: 1; transform: translateY(0); }
407
+ }
408
+ @keyframes pulse {
409
+ 0%, 100% { opacity: 1; transform: scale(1); }
410
+ 50% { opacity: 0.6; transform: scale(0.85); }
411
+ }
412
+ `), /* @__PURE__ */ import_react3.default.createElement("div", { style: {
413
+ width: "360px",
414
+ borderRadius: "24px",
415
+ overflow: "hidden",
416
+ background: "#ffffff",
417
+ boxShadow: "0 24px 80px rgba(0,0,0,0.13), 0 4px 16px rgba(0,0,0,0.06)",
418
+ fontFamily: "'DM Sans', sans-serif",
419
+ animation: "fadeUp 0.5s cubic-bezier(0.22,1,0.36,1) both"
420
+ } }, /* @__PURE__ */ import_react3.default.createElement("div", { style: {
421
+ height: "110px",
422
+ background: coverColor,
423
+ position: "relative",
424
+ overflow: "hidden"
425
+ } }, [...Array(5)].map((_, i) => /* @__PURE__ */ import_react3.default.createElement("div", { key: i, style: {
426
+ position: "absolute",
427
+ height: "1px",
428
+ width: "100%",
429
+ background: `${accentColor}${["18", "22", "18", "12", "0a"][i]}`,
430
+ top: `${18 + i * 20}px`
431
+ } })), /* @__PURE__ */ import_react3.default.createElement("div", { style: {
432
+ position: "absolute",
433
+ width: "180px",
434
+ height: "180px",
435
+ borderRadius: "50%",
436
+ background: `${accentColor}0e`,
437
+ right: "-40px",
438
+ top: "-60px"
439
+ } }), /* @__PURE__ */ import_react3.default.createElement("div", { style: {
440
+ position: "absolute",
441
+ width: "80px",
442
+ height: "80px",
443
+ borderRadius: "50%",
444
+ background: `${accentColor}14`,
445
+ left: "20px",
446
+ bottom: "-30px"
447
+ } }), available && /* @__PURE__ */ import_react3.default.createElement("div", { style: {
448
+ position: "absolute",
449
+ top: "14px",
450
+ right: "16px",
451
+ display: "flex",
452
+ alignItems: "center",
453
+ gap: "5px",
454
+ background: "rgba(255,255,255,0.08)",
455
+ backdropFilter: "blur(8px)",
456
+ border: "1px solid rgba(255,255,255,0.12)",
457
+ borderRadius: "100px",
458
+ padding: "4px 10px 4px 7px"
459
+ } }, /* @__PURE__ */ import_react3.default.createElement("div", { style: {
460
+ width: "7px",
461
+ height: "7px",
462
+ borderRadius: "50%",
463
+ background: accentColor,
464
+ animation: "pulse 2s ease-in-out infinite"
465
+ } }), /* @__PURE__ */ import_react3.default.createElement("span", { style: {
466
+ fontSize: "10px",
467
+ fontFamily: "'Syne', sans-serif",
468
+ fontWeight: "600",
469
+ letterSpacing: "0.08em",
470
+ color: accentColor,
471
+ textTransform: "uppercase"
472
+ } }, "Available"))), /* @__PURE__ */ import_react3.default.createElement("div", { style: { padding: "0 24px", position: "relative" } }, /* @__PURE__ */ import_react3.default.createElement("div", { style: {
473
+ width: "80px",
474
+ height: "80px",
475
+ borderRadius: "50%",
476
+ border: "4px solid #ffffff",
477
+ background: avatar ? "transparent" : `linear-gradient(135deg, ${coverColor} 0%, ${accentColor}88 100%)`,
478
+ marginTop: "-40px",
479
+ overflow: "hidden",
480
+ boxShadow: "0 4px 16px rgba(0,0,0,0.12)",
481
+ display: "flex",
482
+ alignItems: "center",
483
+ justifyContent: "center",
484
+ position: "relative"
485
+ } }, avatar ? /* @__PURE__ */ import_react3.default.createElement("img", { src: avatar, alt: name, style: { width: "100%", height: "100%", objectFit: "cover" } }) : /* @__PURE__ */ import_react3.default.createElement("span", { style: {
486
+ fontFamily: "'Syne', sans-serif",
487
+ fontWeight: "800",
488
+ fontSize: "26px",
489
+ color: "#fff"
490
+ } }, name.split(" ").map((w) => w[0]).join("").slice(0, 2)))), /* @__PURE__ */ import_react3.default.createElement("div", { style: { padding: "10px 24px 0" } }, /* @__PURE__ */ import_react3.default.createElement("div", { style: {
491
+ fontFamily: "'Syne', sans-serif",
492
+ fontWeight: "800",
493
+ fontSize: "21px",
494
+ color: "#0d0d0d",
495
+ letterSpacing: "-0.02em",
496
+ lineHeight: 1.15
497
+ } }, name), /* @__PURE__ */ import_react3.default.createElement("div", { style: {
498
+ fontFamily: "'Syne', sans-serif",
499
+ fontWeight: "600",
500
+ fontSize: "12px",
501
+ color: accentColor === "#c8f135" ? "#6b7280" : accentColor,
502
+ letterSpacing: "0.04em",
503
+ marginTop: "3px"
504
+ } }, role), /* @__PURE__ */ import_react3.default.createElement("div", { style: {
505
+ display: "flex",
506
+ alignItems: "center",
507
+ gap: "5px",
508
+ marginTop: "6px"
509
+ } }, /* @__PURE__ */ import_react3.default.createElement("span", { style: { fontSize: "12px" } }, "\u{1F4CD}"), /* @__PURE__ */ import_react3.default.createElement("span", { style: { fontSize: "12px", color: "#9ca3af", letterSpacing: "0.02em" } }, location)), /* @__PURE__ */ import_react3.default.createElement("p", { style: {
510
+ fontSize: "13px",
511
+ color: "#4b5563",
512
+ lineHeight: "1.65",
513
+ marginTop: "12px",
514
+ marginBottom: "0"
515
+ } }, bio)), /* @__PURE__ */ import_react3.default.createElement("div", { style: {
516
+ display: "flex",
517
+ margin: "18px 16px 0",
518
+ borderRadius: "14px",
519
+ overflow: "hidden",
520
+ border: "1px solid #f0f0f0"
521
+ } }, stats.map((s, i) => /* @__PURE__ */ import_react3.default.createElement(
522
+ "div",
523
+ {
524
+ key: i,
525
+ onMouseEnter: () => setHoveredStat(i),
526
+ onMouseLeave: () => setHoveredStat(null),
527
+ style: {
528
+ flex: 1,
529
+ textAlign: "center",
530
+ padding: "14px 8px",
531
+ borderRight: i < stats.length - 1 ? "1px solid #f0f0f0" : "none",
532
+ background: hoveredStat === i ? `${accentColor}12` : "transparent",
533
+ transition: "background 0.2s ease",
534
+ cursor: "default"
535
+ }
536
+ },
537
+ /* @__PURE__ */ import_react3.default.createElement("div", { style: {
538
+ fontFamily: "'Syne', sans-serif",
539
+ fontWeight: "800",
540
+ fontSize: "18px",
541
+ color: "#0d0d0d",
542
+ letterSpacing: "-0.02em"
543
+ } }, s.value),
544
+ /* @__PURE__ */ import_react3.default.createElement("div", { style: {
545
+ fontSize: "10px",
546
+ color: "#9ca3af",
547
+ fontFamily: "'Syne', sans-serif",
548
+ fontWeight: "600",
549
+ letterSpacing: "0.1em",
550
+ textTransform: "uppercase",
551
+ marginTop: "2px"
552
+ } }, s.label)
553
+ ))), /* @__PURE__ */ import_react3.default.createElement("div", { style: { padding: "16px 24px 0" } }, /* @__PURE__ */ import_react3.default.createElement("div", { style: {
554
+ fontSize: "10px",
555
+ fontFamily: "'Syne', sans-serif",
556
+ fontWeight: "700",
557
+ letterSpacing: "0.15em",
558
+ textTransform: "uppercase",
559
+ color: "#9ca3af",
560
+ marginBottom: "8px"
561
+ } }, "Skills"), /* @__PURE__ */ import_react3.default.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px" } }, skills.map((sk, i) => /* @__PURE__ */ import_react3.default.createElement("span", { key: i, style: {
562
+ padding: "4px 12px",
563
+ background: i === 0 ? coverColor : "#f4f4f5",
564
+ color: i === 0 ? accentColor : "#374151",
565
+ fontSize: "11px",
566
+ fontFamily: "'Syne', sans-serif",
567
+ fontWeight: "600",
568
+ letterSpacing: "0.06em",
569
+ borderRadius: "100px"
570
+ } }, sk)))), /* @__PURE__ */ import_react3.default.createElement("div", { style: { padding: "14px 24px 0", display: "flex", gap: "8px" } }, Object.entries(social).map(([platform, handle]) => /* @__PURE__ */ import_react3.default.createElement("div", { key: platform, style: {
571
+ flex: 1,
572
+ padding: "7px",
573
+ background: "#f9fafb",
574
+ borderRadius: "10px",
575
+ textAlign: "center"
576
+ } }, /* @__PURE__ */ import_react3.default.createElement("div", { style: { fontSize: "9px", color: "#9ca3af", fontFamily: "'Syne', sans-serif", fontWeight: "600", letterSpacing: "0.1em", textTransform: "uppercase" } }, platform), /* @__PURE__ */ import_react3.default.createElement("div", { style: { fontSize: "10px", color: "#374151", fontFamily: "'DM Sans'", fontWeight: "500", marginTop: "2px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, handle)))), /* @__PURE__ */ import_react3.default.createElement("div", { style: { padding: "16px 24px 24px", display: "flex", gap: "10px" } }, /* @__PURE__ */ import_react3.default.createElement(
577
+ "button",
578
+ {
579
+ onClick: handleFollow,
580
+ onMouseEnter: () => setHoveredBtn("follow"),
581
+ onMouseLeave: () => setHoveredBtn(null),
582
+ style: {
583
+ flex: 1,
584
+ padding: "12px",
585
+ borderRadius: "12px",
586
+ border: "none",
587
+ background: followed ? "#f4f4f5" : hoveredBtn === "follow" ? coverColor : coverColor,
588
+ color: followed ? "#374151" : accentColor,
589
+ fontFamily: "'Syne', sans-serif",
590
+ fontWeight: "700",
591
+ fontSize: "13px",
592
+ letterSpacing: "0.04em",
593
+ cursor: "pointer",
594
+ transition: "all 0.2s ease",
595
+ transform: hoveredBtn === "follow" ? "scale(0.97)" : "scale(1)",
596
+ boxShadow: !followed && hoveredBtn === "follow" ? `0 6px 20px ${coverColor}55` : "none"
597
+ }
598
+ },
599
+ followed ? "\u2713 Following" : "Follow"
600
+ ), /* @__PURE__ */ import_react3.default.createElement(
601
+ "button",
602
+ {
603
+ onClick: onMessage,
604
+ onMouseEnter: () => setHoveredBtn("msg"),
605
+ onMouseLeave: () => setHoveredBtn(null),
606
+ style: {
607
+ flex: 1,
608
+ padding: "12px",
609
+ borderRadius: "12px",
610
+ border: "1.5px solid #e5e7eb",
611
+ background: hoveredBtn === "msg" ? "#f9fafb" : "#ffffff",
612
+ color: "#374151",
613
+ fontFamily: "'Syne', sans-serif",
614
+ fontWeight: "700",
615
+ fontSize: "13px",
616
+ letterSpacing: "0.04em",
617
+ cursor: "pointer",
618
+ transition: "all 0.2s ease",
619
+ transform: hoveredBtn === "msg" ? "scale(0.97)" : "scale(1)"
620
+ }
621
+ },
622
+ "Message"
623
+ ))));
624
+ };
625
+
626
+ // src/components/ECommerceCard/ECommerceCard.jsx
627
+ var import_react4 = __toESM(require("react"));
628
+ var ECommerceCard = ({
629
+ image = "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80",
630
+ title = "Discover the Hidden Peaks",
631
+ description = "A breathtaking journey through untouched landscapes and snow-capped summits.",
632
+ buttonText = "Read More",
633
+ accent = "#6366f1",
634
+ bg = "#0f172a",
635
+ price = 29,
636
+ currency = "$",
637
+ period = "per month",
638
+ onButtonClick = () => {
639
+ }
640
+ }) => {
641
+ const alpha = (hex, op) => {
642
+ const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
643
+ return "rgba(" + r + "," + g + "," + b + "," + op + ")";
644
+ };
645
+ return /* @__PURE__ */ import_react4.default.createElement("div", { style: { background: bg, borderRadius: "20px", padding: "28px 24px", width: "300px", 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_react4.default.createElement("div", { style: { position: "absolute", top: 0, left: 0, right: 0, height: "3px", background: "linear-gradient(90deg, " + accent + ", " + alpha(accent, 0.3) + ")" } }), /* @__PURE__ */ import_react4.default.createElement("img", { src: image, alt: title, style: { width: "100%", height: "180px", objectFit: "cover", transform: "scale(1)", transition: "transform 0.4s ease" } }), /* @__PURE__ */ import_react4.default.createElement("div", { style: { fontSize: "20px", fontWeight: "700", marginBottom: "4px" } }, title), /* @__PURE__ */ import_react4.default.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", marginBottom: "20px" } }, description), /* @__PURE__ */ import_react4.default.createElement("div", { style: { display: "flex", alignItems: "flex-end", gap: "3px", marginBottom: "4px" } }, /* @__PURE__ */ import_react4.default.createElement("span", { style: { fontSize: "18px", fontWeight: "700", color: "rgba(255,255,255,0.5)", lineHeight: 2 } }, currency), /* @__PURE__ */ import_react4.default.createElement("span", { style: { fontSize: "52px", fontWeight: "800", lineHeight: 1 } }, price)), /* @__PURE__ */ import_react4.default.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", marginBottom: "20px" } }, period), /* @__PURE__ */ import_react4.default.createElement("button", { onClick: onButtonClick, style: { width: "100%", padding: "13px", borderRadius: "12px", border: "none", background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")", color: "#fff", fontSize: "14px", fontWeight: "700", cursor: "pointer", fontFamily: "system-ui,sans-serif" } }, buttonText));
646
+ };
367
647
  // Annotate the CommonJS export names for ESM import in node:
368
648
  0 && (module.exports = {
369
649
  Button,
370
- Card
650
+ Card,
651
+ ECommerceCard,
652
+ Profilecard
371
653
  });
package/dist/index.mjs CHANGED
@@ -328,7 +328,287 @@ var Card = ({
328
328
  (footer || onClick) && /* @__PURE__ */ React2.createElement("div", { style: footerStyle }, /* @__PURE__ */ React2.createElement("span", { style: { fontSize: "13px", color: "#999", fontFamily: "'DM Mono', monospace" } }, footer || "View details"), onClick && /* @__PURE__ */ React2.createElement("div", { style: arrowStyle }, "\u2192"))
329
329
  ));
330
330
  };
331
+
332
+ // src/components/Profilecard/Profilecard.jsx
333
+ import React3, { useState as useState3 } from "react";
334
+ var Profilecard = ({
335
+ name = "Aria Montoya",
336
+ role = "Senior Product Designer",
337
+ location = "San Francisco, CA",
338
+ bio = "Crafting digital experiences that balance beauty and function. 8 years shaping products at the intersection of design and technology.",
339
+ avatar = null,
340
+ stats = [
341
+ { label: "Projects", value: "124" },
342
+ { label: "Followers", value: "8.4k" },
343
+ { label: "Following", value: "312" }
344
+ ],
345
+ skills = ["Figma", "Motion", "Research", "Systems"],
346
+ social = {
347
+ twitter: "@ariamontoya",
348
+ github: "aria-m",
349
+ dribbble: "ariamontoya"
350
+ },
351
+ available = true,
352
+ coverColor = "#0d0d0d",
353
+ accentColor = "#c8f135",
354
+ onFollow = null,
355
+ onMessage = null
356
+ }) => {
357
+ const [followed, setFollowed] = useState3(false);
358
+ const [hoveredStat, setHoveredStat] = useState3(null);
359
+ const [hoveredBtn, setHoveredBtn] = useState3(null);
360
+ const handleFollow = () => {
361
+ setFollowed((f) => !f);
362
+ onFollow == null ? void 0 : onFollow();
363
+ };
364
+ return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("style", null, `
365
+ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500&display=swap');
366
+ @keyframes fadeUp {
367
+ from { opacity: 0; transform: translateY(16px); }
368
+ to { opacity: 1; transform: translateY(0); }
369
+ }
370
+ @keyframes pulse {
371
+ 0%, 100% { opacity: 1; transform: scale(1); }
372
+ 50% { opacity: 0.6; transform: scale(0.85); }
373
+ }
374
+ `), /* @__PURE__ */ React3.createElement("div", { style: {
375
+ width: "360px",
376
+ borderRadius: "24px",
377
+ overflow: "hidden",
378
+ background: "#ffffff",
379
+ boxShadow: "0 24px 80px rgba(0,0,0,0.13), 0 4px 16px rgba(0,0,0,0.06)",
380
+ fontFamily: "'DM Sans', sans-serif",
381
+ animation: "fadeUp 0.5s cubic-bezier(0.22,1,0.36,1) both"
382
+ } }, /* @__PURE__ */ React3.createElement("div", { style: {
383
+ height: "110px",
384
+ background: coverColor,
385
+ position: "relative",
386
+ overflow: "hidden"
387
+ } }, [...Array(5)].map((_, i) => /* @__PURE__ */ React3.createElement("div", { key: i, style: {
388
+ position: "absolute",
389
+ height: "1px",
390
+ width: "100%",
391
+ background: `${accentColor}${["18", "22", "18", "12", "0a"][i]}`,
392
+ top: `${18 + i * 20}px`
393
+ } })), /* @__PURE__ */ React3.createElement("div", { style: {
394
+ position: "absolute",
395
+ width: "180px",
396
+ height: "180px",
397
+ borderRadius: "50%",
398
+ background: `${accentColor}0e`,
399
+ right: "-40px",
400
+ top: "-60px"
401
+ } }), /* @__PURE__ */ React3.createElement("div", { style: {
402
+ position: "absolute",
403
+ width: "80px",
404
+ height: "80px",
405
+ borderRadius: "50%",
406
+ background: `${accentColor}14`,
407
+ left: "20px",
408
+ bottom: "-30px"
409
+ } }), available && /* @__PURE__ */ React3.createElement("div", { style: {
410
+ position: "absolute",
411
+ top: "14px",
412
+ right: "16px",
413
+ display: "flex",
414
+ alignItems: "center",
415
+ gap: "5px",
416
+ background: "rgba(255,255,255,0.08)",
417
+ backdropFilter: "blur(8px)",
418
+ border: "1px solid rgba(255,255,255,0.12)",
419
+ borderRadius: "100px",
420
+ padding: "4px 10px 4px 7px"
421
+ } }, /* @__PURE__ */ React3.createElement("div", { style: {
422
+ width: "7px",
423
+ height: "7px",
424
+ borderRadius: "50%",
425
+ background: accentColor,
426
+ animation: "pulse 2s ease-in-out infinite"
427
+ } }), /* @__PURE__ */ React3.createElement("span", { style: {
428
+ fontSize: "10px",
429
+ fontFamily: "'Syne', sans-serif",
430
+ fontWeight: "600",
431
+ letterSpacing: "0.08em",
432
+ color: accentColor,
433
+ textTransform: "uppercase"
434
+ } }, "Available"))), /* @__PURE__ */ React3.createElement("div", { style: { padding: "0 24px", position: "relative" } }, /* @__PURE__ */ React3.createElement("div", { style: {
435
+ width: "80px",
436
+ height: "80px",
437
+ borderRadius: "50%",
438
+ border: "4px solid #ffffff",
439
+ background: avatar ? "transparent" : `linear-gradient(135deg, ${coverColor} 0%, ${accentColor}88 100%)`,
440
+ marginTop: "-40px",
441
+ overflow: "hidden",
442
+ boxShadow: "0 4px 16px rgba(0,0,0,0.12)",
443
+ display: "flex",
444
+ alignItems: "center",
445
+ justifyContent: "center",
446
+ position: "relative"
447
+ } }, avatar ? /* @__PURE__ */ React3.createElement("img", { src: avatar, alt: name, style: { width: "100%", height: "100%", objectFit: "cover" } }) : /* @__PURE__ */ React3.createElement("span", { style: {
448
+ fontFamily: "'Syne', sans-serif",
449
+ fontWeight: "800",
450
+ fontSize: "26px",
451
+ color: "#fff"
452
+ } }, name.split(" ").map((w) => w[0]).join("").slice(0, 2)))), /* @__PURE__ */ React3.createElement("div", { style: { padding: "10px 24px 0" } }, /* @__PURE__ */ React3.createElement("div", { style: {
453
+ fontFamily: "'Syne', sans-serif",
454
+ fontWeight: "800",
455
+ fontSize: "21px",
456
+ color: "#0d0d0d",
457
+ letterSpacing: "-0.02em",
458
+ lineHeight: 1.15
459
+ } }, name), /* @__PURE__ */ React3.createElement("div", { style: {
460
+ fontFamily: "'Syne', sans-serif",
461
+ fontWeight: "600",
462
+ fontSize: "12px",
463
+ color: accentColor === "#c8f135" ? "#6b7280" : accentColor,
464
+ letterSpacing: "0.04em",
465
+ marginTop: "3px"
466
+ } }, role), /* @__PURE__ */ React3.createElement("div", { style: {
467
+ display: "flex",
468
+ alignItems: "center",
469
+ gap: "5px",
470
+ marginTop: "6px"
471
+ } }, /* @__PURE__ */ React3.createElement("span", { style: { fontSize: "12px" } }, "\u{1F4CD}"), /* @__PURE__ */ React3.createElement("span", { style: { fontSize: "12px", color: "#9ca3af", letterSpacing: "0.02em" } }, location)), /* @__PURE__ */ React3.createElement("p", { style: {
472
+ fontSize: "13px",
473
+ color: "#4b5563",
474
+ lineHeight: "1.65",
475
+ marginTop: "12px",
476
+ marginBottom: "0"
477
+ } }, bio)), /* @__PURE__ */ React3.createElement("div", { style: {
478
+ display: "flex",
479
+ margin: "18px 16px 0",
480
+ borderRadius: "14px",
481
+ overflow: "hidden",
482
+ border: "1px solid #f0f0f0"
483
+ } }, stats.map((s, i) => /* @__PURE__ */ React3.createElement(
484
+ "div",
485
+ {
486
+ key: i,
487
+ onMouseEnter: () => setHoveredStat(i),
488
+ onMouseLeave: () => setHoveredStat(null),
489
+ style: {
490
+ flex: 1,
491
+ textAlign: "center",
492
+ padding: "14px 8px",
493
+ borderRight: i < stats.length - 1 ? "1px solid #f0f0f0" : "none",
494
+ background: hoveredStat === i ? `${accentColor}12` : "transparent",
495
+ transition: "background 0.2s ease",
496
+ cursor: "default"
497
+ }
498
+ },
499
+ /* @__PURE__ */ React3.createElement("div", { style: {
500
+ fontFamily: "'Syne', sans-serif",
501
+ fontWeight: "800",
502
+ fontSize: "18px",
503
+ color: "#0d0d0d",
504
+ letterSpacing: "-0.02em"
505
+ } }, s.value),
506
+ /* @__PURE__ */ React3.createElement("div", { style: {
507
+ fontSize: "10px",
508
+ color: "#9ca3af",
509
+ fontFamily: "'Syne', sans-serif",
510
+ fontWeight: "600",
511
+ letterSpacing: "0.1em",
512
+ textTransform: "uppercase",
513
+ marginTop: "2px"
514
+ } }, s.label)
515
+ ))), /* @__PURE__ */ React3.createElement("div", { style: { padding: "16px 24px 0" } }, /* @__PURE__ */ React3.createElement("div", { style: {
516
+ fontSize: "10px",
517
+ fontFamily: "'Syne', sans-serif",
518
+ fontWeight: "700",
519
+ letterSpacing: "0.15em",
520
+ textTransform: "uppercase",
521
+ color: "#9ca3af",
522
+ marginBottom: "8px"
523
+ } }, "Skills"), /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px" } }, skills.map((sk, i) => /* @__PURE__ */ React3.createElement("span", { key: i, style: {
524
+ padding: "4px 12px",
525
+ background: i === 0 ? coverColor : "#f4f4f5",
526
+ color: i === 0 ? accentColor : "#374151",
527
+ fontSize: "11px",
528
+ fontFamily: "'Syne', sans-serif",
529
+ fontWeight: "600",
530
+ letterSpacing: "0.06em",
531
+ borderRadius: "100px"
532
+ } }, sk)))), /* @__PURE__ */ React3.createElement("div", { style: { padding: "14px 24px 0", display: "flex", gap: "8px" } }, Object.entries(social).map(([platform, handle]) => /* @__PURE__ */ React3.createElement("div", { key: platform, style: {
533
+ flex: 1,
534
+ padding: "7px",
535
+ background: "#f9fafb",
536
+ borderRadius: "10px",
537
+ textAlign: "center"
538
+ } }, /* @__PURE__ */ React3.createElement("div", { style: { fontSize: "9px", color: "#9ca3af", fontFamily: "'Syne', sans-serif", fontWeight: "600", letterSpacing: "0.1em", textTransform: "uppercase" } }, platform), /* @__PURE__ */ React3.createElement("div", { style: { fontSize: "10px", color: "#374151", fontFamily: "'DM Sans'", fontWeight: "500", marginTop: "2px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, handle)))), /* @__PURE__ */ React3.createElement("div", { style: { padding: "16px 24px 24px", display: "flex", gap: "10px" } }, /* @__PURE__ */ React3.createElement(
539
+ "button",
540
+ {
541
+ onClick: handleFollow,
542
+ onMouseEnter: () => setHoveredBtn("follow"),
543
+ onMouseLeave: () => setHoveredBtn(null),
544
+ style: {
545
+ flex: 1,
546
+ padding: "12px",
547
+ borderRadius: "12px",
548
+ border: "none",
549
+ background: followed ? "#f4f4f5" : hoveredBtn === "follow" ? coverColor : coverColor,
550
+ color: followed ? "#374151" : accentColor,
551
+ fontFamily: "'Syne', sans-serif",
552
+ fontWeight: "700",
553
+ fontSize: "13px",
554
+ letterSpacing: "0.04em",
555
+ cursor: "pointer",
556
+ transition: "all 0.2s ease",
557
+ transform: hoveredBtn === "follow" ? "scale(0.97)" : "scale(1)",
558
+ boxShadow: !followed && hoveredBtn === "follow" ? `0 6px 20px ${coverColor}55` : "none"
559
+ }
560
+ },
561
+ followed ? "\u2713 Following" : "Follow"
562
+ ), /* @__PURE__ */ React3.createElement(
563
+ "button",
564
+ {
565
+ onClick: onMessage,
566
+ onMouseEnter: () => setHoveredBtn("msg"),
567
+ onMouseLeave: () => setHoveredBtn(null),
568
+ style: {
569
+ flex: 1,
570
+ padding: "12px",
571
+ borderRadius: "12px",
572
+ border: "1.5px solid #e5e7eb",
573
+ background: hoveredBtn === "msg" ? "#f9fafb" : "#ffffff",
574
+ color: "#374151",
575
+ fontFamily: "'Syne', sans-serif",
576
+ fontWeight: "700",
577
+ fontSize: "13px",
578
+ letterSpacing: "0.04em",
579
+ cursor: "pointer",
580
+ transition: "all 0.2s ease",
581
+ transform: hoveredBtn === "msg" ? "scale(0.97)" : "scale(1)"
582
+ }
583
+ },
584
+ "Message"
585
+ ))));
586
+ };
587
+
588
+ // src/components/ECommerceCard/ECommerceCard.jsx
589
+ import React4 from "react";
590
+ var ECommerceCard = ({
591
+ image = "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80",
592
+ title = "Discover the Hidden Peaks",
593
+ description = "A breathtaking journey through untouched landscapes and snow-capped summits.",
594
+ buttonText = "Read More",
595
+ accent = "#6366f1",
596
+ bg = "#0f172a",
597
+ price = 29,
598
+ currency = "$",
599
+ period = "per month",
600
+ onButtonClick = () => {
601
+ }
602
+ }) => {
603
+ const alpha = (hex, op) => {
604
+ const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
605
+ return "rgba(" + r + "," + g + "," + b + "," + op + ")";
606
+ };
607
+ return /* @__PURE__ */ React4.createElement("div", { style: { background: bg, borderRadius: "20px", padding: "28px 24px", width: "300px", 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__ */ React4.createElement("div", { style: { position: "absolute", top: 0, left: 0, right: 0, height: "3px", background: "linear-gradient(90deg, " + accent + ", " + alpha(accent, 0.3) + ")" } }), /* @__PURE__ */ React4.createElement("img", { src: image, alt: title, style: { width: "100%", height: "180px", objectFit: "cover", transform: "scale(1)", transition: "transform 0.4s ease" } }), /* @__PURE__ */ React4.createElement("div", { style: { fontSize: "20px", fontWeight: "700", marginBottom: "4px" } }, title), /* @__PURE__ */ React4.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", marginBottom: "20px" } }, description), /* @__PURE__ */ React4.createElement("div", { style: { display: "flex", alignItems: "flex-end", gap: "3px", marginBottom: "4px" } }, /* @__PURE__ */ React4.createElement("span", { style: { fontSize: "18px", fontWeight: "700", color: "rgba(255,255,255,0.5)", lineHeight: 2 } }, currency), /* @__PURE__ */ React4.createElement("span", { style: { fontSize: "52px", fontWeight: "800", lineHeight: 1 } }, price)), /* @__PURE__ */ React4.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", marginBottom: "20px" } }, period), /* @__PURE__ */ React4.createElement("button", { onClick: onButtonClick, style: { width: "100%", padding: "13px", borderRadius: "12px", border: "none", background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")", color: "#fff", fontSize: "14px", fontWeight: "700", cursor: "pointer", fontFamily: "system-ui,sans-serif" } }, buttonText));
608
+ };
331
609
  export {
332
610
  Button,
333
- Card
611
+ Card,
612
+ ECommerceCard,
613
+ Profilecard
334
614
  };
package/package.json CHANGED
@@ -1,9 +1,11 @@
1
1
  {
2
2
  "name": "bhoomi-virtual-ui-library",
3
- "version": "1.0.0",
3
+ "version": "1.0.5",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.mjs",
6
- "files": ["dist"],
6
+ "files": [
7
+ "dist"
8
+ ],
7
9
  "scripts": {
8
10
  "build": "tsup"
9
11
  },