bhoomi-virtual-ui-library 1.0.5 → 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.
Files changed (3) hide show
  1. package/dist/index.js +77 -2
  2. package/dist/index.mjs +74 -1
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -32,7 +32,9 @@ __export(index_exports, {
32
32
  Button: () => Button,
33
33
  Card: () => Card,
34
34
  ECommerceCard: () => ECommerceCard,
35
- Profilecard: () => Profilecard
35
+ PricingCard: () => PricingCard,
36
+ Profilecard: () => Profilecard,
37
+ ShoesCard: () => ShoesCard
36
38
  });
37
39
  module.exports = __toCommonJS(index_exports);
38
40
 
@@ -644,10 +646,83 @@ var ECommerceCard = ({
644
646
  };
645
647
  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
648
  };
649
+
650
+ // src/components/PricingCard/PricingCard.jsx
651
+ var import_react5 = __toESM(require("react"));
652
+ var PricingCard = ({
653
+ planName = "Pro Plan",
654
+ description = "For teams that need more power.",
655
+ price = 29,
656
+ currency = "$",
657
+ period = "per month",
658
+ badgeText = "Most Popular",
659
+ ctaText = "Get Started",
660
+ accent = "#6366f1",
661
+ bg = "#0f172a",
662
+ features = ["Unlimited projects", "Priority support", "Advanced analytics", "Custom integrations"],
663
+ onCtaClick = () => {
664
+ }
665
+ }) => {
666
+ const alpha = (hex, op) => {
667
+ const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
668
+ return "rgba(" + r + "," + g + "," + b + "," + op + ")";
669
+ };
670
+ return /* @__PURE__ */ import_react5.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_react5.default.createElement("div", { style: { position: "absolute", top: 0, left: 0, right: 0, height: "3px", background: "linear-gradient(90deg, " + accent + ", " + alpha(accent, 0.3) + ")" } }), badgeText && /* @__PURE__ */ import_react5.default.createElement("div", { style: { display: "inline-flex", alignItems: "center", gap: "6px", padding: "4px 12px", borderRadius: "100px", marginBottom: "14px", background: alpha(accent, 0.12), border: "1px solid " + alpha(accent, 0.3), fontSize: "11px", fontWeight: "700", color: accent, textTransform: "uppercase", letterSpacing: "0.5px" } }, /* @__PURE__ */ import_react5.default.createElement("div", { style: { width: 6, height: 6, borderRadius: "50%", background: accent } }), badgeText), /* @__PURE__ */ import_react5.default.createElement("div", { style: { fontSize: "20px", fontWeight: "800", marginBottom: "4px" } }, planName), /* @__PURE__ */ import_react5.default.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", marginBottom: "20px" } }, description), /* @__PURE__ */ import_react5.default.createElement("div", { style: { display: "flex", alignItems: "flex-end", gap: "3px", marginBottom: "4px" } }, /* @__PURE__ */ import_react5.default.createElement("span", { style: { fontSize: "18px", fontWeight: "700", color: "rgba(255,255,255,0.5)", lineHeight: 2 } }, currency), /* @__PURE__ */ import_react5.default.createElement("span", { style: { fontSize: "52px", fontWeight: "800", lineHeight: 1 } }, Math.round(price))), /* @__PURE__ */ import_react5.default.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", marginBottom: "20px" } }, period), /* @__PURE__ */ import_react5.default.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", marginBottom: "16px" } }), /* @__PURE__ */ import_react5.default.createElement("ul", { style: { listStyle: "none", padding: 0, margin: "0 0 22px", display: "flex", flexDirection: "column", gap: "10px" } }, features.map((f, i) => /* @__PURE__ */ import_react5.default.createElement("li", { key: i, style: { display: "flex", alignItems: "center", gap: "10px", fontSize: "13px", color: "rgba(255,255,255,0.75)", cursor: "pointer" } }, /* @__PURE__ */ import_react5.default.createElement("div", { style: { width: "18px", height: "18px", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", background: alpha(accent, 0.18), border: "1px solid " + alpha(accent, 0.4), flexShrink: 0 } }, /* @__PURE__ */ import_react5.default.createElement("svg", { width: "10", height: "10", viewBox: "0 0 12 12", fill: "none", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react5.default.createElement("polyline", { points: "1.5,6 4.5,9 10.5,3" }))), f))), /* @__PURE__ */ import_react5.default.createElement("button", { onClick: onCtaClick, 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" } }, ctaText));
671
+ };
672
+
673
+ // src/components/ShoesCard/ShoesCard.jsx
674
+ var import_react6 = __toESM(require("react"));
675
+ var ShoesCard = ({
676
+ image = "https://images.unsplash.com/photo-1524015436451-442ee98d8b0e?w=600&q=80",
677
+ title = "Sneaker for the Modern Athlete",
678
+ description = "Experience the perfect blend of style and performance in our latest sneaker release.",
679
+ price = 129,
680
+ currency = "$",
681
+ period = "per pair",
682
+ accent = "#6366f1",
683
+ bg = "#0f172a",
684
+ onButtonClick = () => {
685
+ }
686
+ }) => {
687
+ const alpha = (hex, op) => {
688
+ const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
689
+ return "rgba(" + r + "," + g + "," + b + "," + op + ")";
690
+ };
691
+ return /* @__PURE__ */ import_react6.default.createElement("div", { style: {
692
+ background: bg,
693
+ borderRadius: "20px",
694
+ overflow: "hidden",
695
+ width: "300px",
696
+ border: "1px solid " + alpha(accent, 0.3),
697
+ fontFamily: "system-ui,sans-serif",
698
+ transition: "transform 0.25s, box-shadow 0.25s",
699
+ transform: "translateY(0px)",
700
+ boxShadow: "0 4px 20px rgba(0,0,0,0.3)"
701
+ } }, /* @__PURE__ */ import_react6.default.createElement("div", { style: { position: "relative", width: "100%", height: "180px", overflow: "hidden" } }, /* @__PURE__ */ import_react6.default.createElement("img", { src: image, alt: title, style: {
702
+ width: "100%",
703
+ height: "100%",
704
+ objectFit: "cover",
705
+ transform: "scale(1)",
706
+ transition: "transform 0.4s ease"
707
+ } }), /* @__PURE__ */ import_react6.default.createElement("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)" } })), /* @__PURE__ */ import_react6.default.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ import_react6.default.createElement("h3", { style: { fontSize: "15px", fontWeight: "700", color: "#fff", margin: "0 0 8px", lineHeight: 1.4 } }, title), /* @__PURE__ */ import_react6.default.createElement("p", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", lineHeight: 1.65, margin: "0 0 18px" } }, description), /* @__PURE__ */ import_react6.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "3px", fontSize: "15px", color: "rgba(255,255,255,0.5)", marginBottom: "4px" } }, /* @__PURE__ */ import_react6.default.createElement("span", { style: { fontSize: "18px", fontWeight: "700" } }, currency), /* @__PURE__ */ import_react6.default.createElement("span", { style: { fontSize: "52px", fontWeight: "800" } }, Math.round(price))), /* @__PURE__ */ import_react6.default.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", marginBottom: "20px" } }, period), /* @__PURE__ */ import_react6.default.createElement("button", { onClick: onButtonClick, style: {
708
+ width: "100%",
709
+ padding: "11px",
710
+ borderRadius: "12px",
711
+ border: "none",
712
+ background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")",
713
+ color: "#fff",
714
+ fontSize: "13px",
715
+ fontWeight: "700",
716
+ cursor: "pointer",
717
+ fontFamily: "system-ui,sans-serif"
718
+ } }, "Buy Now")));
719
+ };
647
720
  // Annotate the CommonJS export names for ESM import in node:
648
721
  0 && (module.exports = {
649
722
  Button,
650
723
  Card,
651
724
  ECommerceCard,
652
- Profilecard
725
+ PricingCard,
726
+ Profilecard,
727
+ ShoesCard
653
728
  });
package/dist/index.mjs CHANGED
@@ -606,9 +606,82 @@ var ECommerceCard = ({
606
606
  };
607
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
608
  };
609
+
610
+ // src/components/PricingCard/PricingCard.jsx
611
+ import React5 from "react";
612
+ var PricingCard = ({
613
+ planName = "Pro Plan",
614
+ description = "For teams that need more power.",
615
+ price = 29,
616
+ currency = "$",
617
+ period = "per month",
618
+ badgeText = "Most Popular",
619
+ ctaText = "Get Started",
620
+ accent = "#6366f1",
621
+ bg = "#0f172a",
622
+ features = ["Unlimited projects", "Priority support", "Advanced analytics", "Custom integrations"],
623
+ onCtaClick = () => {
624
+ }
625
+ }) => {
626
+ const alpha = (hex, op) => {
627
+ const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
628
+ return "rgba(" + r + "," + g + "," + b + "," + op + ")";
629
+ };
630
+ return /* @__PURE__ */ React5.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__ */ React5.createElement("div", { style: { position: "absolute", top: 0, left: 0, right: 0, height: "3px", background: "linear-gradient(90deg, " + accent + ", " + alpha(accent, 0.3) + ")" } }), badgeText && /* @__PURE__ */ React5.createElement("div", { style: { display: "inline-flex", alignItems: "center", gap: "6px", padding: "4px 12px", borderRadius: "100px", marginBottom: "14px", background: alpha(accent, 0.12), border: "1px solid " + alpha(accent, 0.3), fontSize: "11px", fontWeight: "700", color: accent, textTransform: "uppercase", letterSpacing: "0.5px" } }, /* @__PURE__ */ React5.createElement("div", { style: { width: 6, height: 6, borderRadius: "50%", background: accent } }), badgeText), /* @__PURE__ */ React5.createElement("div", { style: { fontSize: "20px", fontWeight: "800", marginBottom: "4px" } }, planName), /* @__PURE__ */ React5.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", marginBottom: "20px" } }, description), /* @__PURE__ */ React5.createElement("div", { style: { display: "flex", alignItems: "flex-end", gap: "3px", marginBottom: "4px" } }, /* @__PURE__ */ React5.createElement("span", { style: { fontSize: "18px", fontWeight: "700", color: "rgba(255,255,255,0.5)", lineHeight: 2 } }, currency), /* @__PURE__ */ React5.createElement("span", { style: { fontSize: "52px", fontWeight: "800", lineHeight: 1 } }, Math.round(price))), /* @__PURE__ */ React5.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", marginBottom: "20px" } }, period), /* @__PURE__ */ React5.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", marginBottom: "16px" } }), /* @__PURE__ */ React5.createElement("ul", { style: { listStyle: "none", padding: 0, margin: "0 0 22px", display: "flex", flexDirection: "column", gap: "10px" } }, features.map((f, i) => /* @__PURE__ */ React5.createElement("li", { key: i, style: { display: "flex", alignItems: "center", gap: "10px", fontSize: "13px", color: "rgba(255,255,255,0.75)", cursor: "pointer" } }, /* @__PURE__ */ React5.createElement("div", { style: { width: "18px", height: "18px", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", background: alpha(accent, 0.18), border: "1px solid " + alpha(accent, 0.4), flexShrink: 0 } }, /* @__PURE__ */ React5.createElement("svg", { width: "10", height: "10", viewBox: "0 0 12 12", fill: "none", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React5.createElement("polyline", { points: "1.5,6 4.5,9 10.5,3" }))), f))), /* @__PURE__ */ React5.createElement("button", { onClick: onCtaClick, 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" } }, ctaText));
631
+ };
632
+
633
+ // src/components/ShoesCard/ShoesCard.jsx
634
+ import React6 from "react";
635
+ var ShoesCard = ({
636
+ image = "https://images.unsplash.com/photo-1524015436451-442ee98d8b0e?w=600&q=80",
637
+ title = "Sneaker for the Modern Athlete",
638
+ description = "Experience the perfect blend of style and performance in our latest sneaker release.",
639
+ price = 129,
640
+ currency = "$",
641
+ period = "per pair",
642
+ accent = "#6366f1",
643
+ bg = "#0f172a",
644
+ onButtonClick = () => {
645
+ }
646
+ }) => {
647
+ const alpha = (hex, op) => {
648
+ const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
649
+ return "rgba(" + r + "," + g + "," + b + "," + op + ")";
650
+ };
651
+ return /* @__PURE__ */ React6.createElement("div", { style: {
652
+ background: bg,
653
+ borderRadius: "20px",
654
+ overflow: "hidden",
655
+ width: "300px",
656
+ border: "1px solid " + alpha(accent, 0.3),
657
+ fontFamily: "system-ui,sans-serif",
658
+ transition: "transform 0.25s, box-shadow 0.25s",
659
+ transform: "translateY(0px)",
660
+ boxShadow: "0 4px 20px rgba(0,0,0,0.3)"
661
+ } }, /* @__PURE__ */ React6.createElement("div", { style: { position: "relative", width: "100%", height: "180px", overflow: "hidden" } }, /* @__PURE__ */ React6.createElement("img", { src: image, alt: title, style: {
662
+ width: "100%",
663
+ height: "100%",
664
+ objectFit: "cover",
665
+ transform: "scale(1)",
666
+ transition: "transform 0.4s ease"
667
+ } }), /* @__PURE__ */ React6.createElement("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)" } })), /* @__PURE__ */ React6.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ React6.createElement("h3", { style: { fontSize: "15px", fontWeight: "700", color: "#fff", margin: "0 0 8px", lineHeight: 1.4 } }, title), /* @__PURE__ */ React6.createElement("p", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", lineHeight: 1.65, margin: "0 0 18px" } }, description), /* @__PURE__ */ React6.createElement("div", { style: { display: "flex", alignItems: "center", gap: "3px", fontSize: "15px", color: "rgba(255,255,255,0.5)", marginBottom: "4px" } }, /* @__PURE__ */ React6.createElement("span", { style: { fontSize: "18px", fontWeight: "700" } }, currency), /* @__PURE__ */ React6.createElement("span", { style: { fontSize: "52px", fontWeight: "800" } }, Math.round(price))), /* @__PURE__ */ React6.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", marginBottom: "20px" } }, period), /* @__PURE__ */ React6.createElement("button", { onClick: onButtonClick, style: {
668
+ width: "100%",
669
+ padding: "11px",
670
+ borderRadius: "12px",
671
+ border: "none",
672
+ background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")",
673
+ color: "#fff",
674
+ fontSize: "13px",
675
+ fontWeight: "700",
676
+ cursor: "pointer",
677
+ fontFamily: "system-ui,sans-serif"
678
+ } }, "Buy Now")));
679
+ };
609
680
  export {
610
681
  Button,
611
682
  Card,
612
683
  ECommerceCard,
613
- Profilecard
684
+ PricingCard,
685
+ Profilecard,
686
+ ShoesCard
614
687
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bhoomi-virtual-ui-library",
3
- "version": "1.0.5",
3
+ "version": "1.0.7",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.mjs",
6
6
  "files": [