virtual-ui-lib 1.0.57 → 1.0.59

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 +215 -2
  2. package/dist/index.mjs +223 -11
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -39,6 +39,7 @@ __export(index_exports, {
39
39
  LoadingSpinner: () => LoadingSpinner,
40
40
  NotificationToast: () => NotificationToast,
41
41
  OtpInput: () => OtpInput,
42
+ PricingCard: () => PricingCard,
42
43
  ResponsiveNavbar: () => ResponsiveNavbar,
43
44
  SearchBar: () => SearchBar,
44
45
  SkeletonLoader: () => SkeletonLoader,
@@ -622,8 +623,111 @@ var FileUpload = ({ bg = "#1e293b", textColor = "#f1f5f9", accent = "#7c3aed", r
622
623
 
623
624
  // src/components/Loader/Loader.jsx
624
625
  var import_react13 = __toESM(require("react"));
625
- var Loader = ({ bg = "#0f172a", accent = "#7c3aed", size = "40px", borderRadius = "8px" }) => {
626
- return /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", background: bg, height: size, width: size, borderRadius } }, /* @__PURE__ */ import_react13.default.createElement("div", { style: { border: `4px solid ${bg}`, borderTop: `4px solid ${accent}`, borderRadius: "50%", width: "100%", height: "100%", animation: "spin 1s linear infinite" } }));
626
+ var Loader = ({
627
+ type = "spinner",
628
+ size = 48,
629
+ accent = "#6366f1",
630
+ bg = "transparent",
631
+ label = "",
632
+ speed = 1
633
+ }) => {
634
+ const [dots, setDots] = (0, import_react13.useState)(0);
635
+ const [progress, setProgress] = (0, import_react13.useState)(0);
636
+ const alpha = (hex, op) => {
637
+ const r = parseInt(hex.slice(1, 3), 16);
638
+ const g = parseInt(hex.slice(3, 5), 16);
639
+ const b = parseInt(hex.slice(5, 7), 16);
640
+ return `rgba(${r},${g},${b},${op})`;
641
+ };
642
+ (0, import_react13.useEffect)(() => {
643
+ if (type === "dots") {
644
+ const t = setInterval(() => setDots((d) => (d + 1) % 4), 400 / speed);
645
+ return () => clearInterval(t);
646
+ }
647
+ if (type === "bar") {
648
+ const t = setInterval(() => setProgress((p) => p >= 100 ? 0 : p + 2), 30 / speed);
649
+ return () => clearInterval(t);
650
+ }
651
+ }, [type, speed]);
652
+ const dur = `${1 / speed}s`;
653
+ const wrapStyle = {
654
+ display: "inline-flex",
655
+ flexDirection: "column",
656
+ alignItems: "center",
657
+ justifyContent: "center",
658
+ gap: "12px",
659
+ background: bg,
660
+ padding: bg !== "transparent" ? "24px" : "0",
661
+ borderRadius: "16px",
662
+ fontFamily: "system-ui, sans-serif"
663
+ };
664
+ const labelEl = label ? /* @__PURE__ */ import_react13.default.createElement("span", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", letterSpacing: "0.3px" } }, label) : null;
665
+ if (type === "spinner") return /* @__PURE__ */ import_react13.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react13.default.createElement("svg", { width: size, height: size, viewBox: "0 0 48 48" }, /* @__PURE__ */ import_react13.default.createElement(
666
+ "circle",
667
+ {
668
+ cx: "24",
669
+ cy: "24",
670
+ r: "20",
671
+ fill: "none",
672
+ stroke: alpha(accent, 0.15),
673
+ strokeWidth: "4"
674
+ }
675
+ ), /* @__PURE__ */ import_react13.default.createElement(
676
+ "circle",
677
+ {
678
+ cx: "24",
679
+ cy: "24",
680
+ r: "20",
681
+ fill: "none",
682
+ stroke: accent,
683
+ strokeWidth: "4",
684
+ strokeLinecap: "round",
685
+ strokeDasharray: "31.4 94.2",
686
+ style: { transformOrigin: "center", animation: `spin ${dur} linear infinite` }
687
+ }
688
+ ), /* @__PURE__ */ import_react13.default.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`)), labelEl);
689
+ if (type === "pulse") return /* @__PURE__ */ import_react13.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react13.default.createElement("div", { style: { position: "relative", width: size, height: size } }, /* @__PURE__ */ import_react13.default.createElement("div", { style: {
690
+ position: "absolute",
691
+ inset: 0,
692
+ borderRadius: "50%",
693
+ background: alpha(accent, 0.2),
694
+ animation: `pulse ${dur} ease-out infinite`
695
+ } }), /* @__PURE__ */ import_react13.default.createElement("div", { style: {
696
+ position: "absolute",
697
+ inset: "25%",
698
+ borderRadius: "50%",
699
+ background: accent
700
+ } }), /* @__PURE__ */ import_react13.default.createElement("style", null, `@keyframes pulse { 0%{transform:scale(1);opacity:1} 100%{transform:scale(2);opacity:0} }`)), labelEl);
701
+ if (type === "dots") return /* @__PURE__ */ import_react13.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "center" } }, [0, 1, 2].map((i) => /* @__PURE__ */ import_react13.default.createElement("div", { key: i, style: {
702
+ width: size / 5,
703
+ height: size / 5,
704
+ borderRadius: "50%",
705
+ background: dots === i ? accent : alpha(accent, 0.25),
706
+ transition: "background 0.2s"
707
+ } }))), labelEl);
708
+ if (type === "bar") return /* @__PURE__ */ import_react13.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react13.default.createElement("div", { style: {
709
+ width: size * 3,
710
+ height: size / 8,
711
+ background: alpha(accent, 0.15),
712
+ borderRadius: "99px",
713
+ overflow: "hidden"
714
+ } }, /* @__PURE__ */ import_react13.default.createElement("div", { style: {
715
+ height: "100%",
716
+ borderRadius: "99px",
717
+ background: accent,
718
+ width: `${progress}%`,
719
+ transition: "width 0.03s linear"
720
+ } })), labelEl);
721
+ if (type === "ring") return /* @__PURE__ */ import_react13.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react13.default.createElement("div", { style: {
722
+ width: size,
723
+ height: size,
724
+ borderRadius: "50%",
725
+ border: `4px solid ${alpha(accent, 0.15)}`,
726
+ borderTop: `4px solid ${accent}`,
727
+ borderRight: `4px solid ${accent}`,
728
+ animation: `spin ${dur} linear infinite`
729
+ } }), /* @__PURE__ */ import_react13.default.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`), labelEl);
730
+ return null;
627
731
  };
628
732
 
629
733
  // src/components/Avatar/Avatar.jsx
@@ -903,6 +1007,114 @@ var AvatarCard = ({
903
1007
  marginBottom: "16px"
904
1008
  } }, stats.map((s) => /* @__PURE__ */ import_react18.default.createElement("div", { key: s.label, style: { textAlign: "center" } }, /* @__PURE__ */ import_react18.default.createElement("div", { style: { fontSize: "18px", fontWeight: "800" } }, s.value >= 1e3 ? (s.value / 1e3).toFixed(1) + "k" : s.value), /* @__PURE__ */ import_react18.default.createElement("div", { style: { fontSize: "10px", color: "rgba(255,255,255,0.4)", marginTop: "2px" } }, s.label)))));
905
1009
  };
1010
+
1011
+ // src/components/PricingCard/PricingCard.jsx
1012
+ var import_react19 = __toESM(require("react"));
1013
+ var PricingCard = ({
1014
+ planName = "Pro Plan",
1015
+ description = "For teams that need more power.",
1016
+ price = 29,
1017
+ currency = "$",
1018
+ period = "per month",
1019
+ badgeText = "Most Popular",
1020
+ ctaText = "Get Started",
1021
+ accent = "#6366f1",
1022
+ bg = "#0f172a",
1023
+ radius = "20px",
1024
+ features = [
1025
+ "Unlimited projects",
1026
+ "Priority support",
1027
+ "Advanced analytics",
1028
+ "Custom integrations",
1029
+ "Team collaboration"
1030
+ ],
1031
+ onCtaClick = () => {
1032
+ }
1033
+ }) => {
1034
+ const alpha = (hex, op) => {
1035
+ const r = parseInt(hex.slice(1, 3), 16);
1036
+ const g = parseInt(hex.slice(3, 5), 16);
1037
+ const b = parseInt(hex.slice(5, 7), 16);
1038
+ return `rgba(${r},${g},${b},${op})`;
1039
+ };
1040
+ return /* @__PURE__ */ import_react19.default.createElement("div", { style: {
1041
+ background: bg,
1042
+ borderRadius: radius,
1043
+ padding: "28px 24px",
1044
+ width: "300px",
1045
+ color: "#fff",
1046
+ fontFamily: "system-ui, sans-serif",
1047
+ boxShadow: "0 10px 40px rgba(0,0,0,0.5)",
1048
+ border: `1px solid ${alpha(accent, 0.25)}`,
1049
+ position: "relative",
1050
+ overflow: "hidden"
1051
+ } }, /* @__PURE__ */ import_react19.default.createElement("div", { style: {
1052
+ position: "absolute",
1053
+ top: 0,
1054
+ left: 0,
1055
+ right: 0,
1056
+ height: "3px",
1057
+ background: `linear-gradient(90deg, ${accent}, ${alpha(accent, 0.3)})`
1058
+ } }), badgeText && /* @__PURE__ */ import_react19.default.createElement("div", { style: {
1059
+ display: "inline-flex",
1060
+ alignItems: "center",
1061
+ gap: "6px",
1062
+ padding: "4px 12px",
1063
+ borderRadius: "100px",
1064
+ marginBottom: "14px",
1065
+ background: alpha(accent, 0.12),
1066
+ border: `1px solid ${alpha(accent, 0.3)}`,
1067
+ fontSize: "11px",
1068
+ fontWeight: "700",
1069
+ color: accent,
1070
+ letterSpacing: "0.5px",
1071
+ textTransform: "uppercase"
1072
+ } }, /* @__PURE__ */ import_react19.default.createElement("div", { style: { width: 6, height: 6, borderRadius: "50%", background: accent } }), badgeText), /* @__PURE__ */ import_react19.default.createElement("div", { style: { fontSize: "20px", fontWeight: "800", marginBottom: "4px" } }, planName), /* @__PURE__ */ import_react19.default.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", marginBottom: "20px", lineHeight: 1.5 } }, description), /* @__PURE__ */ import_react19.default.createElement("div", { style: { display: "flex", alignItems: "flex-end", gap: "3px", marginBottom: "4px" } }, /* @__PURE__ */ import_react19.default.createElement("span", { style: { fontSize: "18px", fontWeight: "700", color: "rgba(255,255,255,0.5)", lineHeight: 2 } }, currency), /* @__PURE__ */ import_react19.default.createElement("span", { style: { fontSize: "52px", fontWeight: "800", color: "#fff", lineHeight: 1 } }, Math.round(price))), /* @__PURE__ */ import_react19.default.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", marginBottom: "20px" } }, period), /* @__PURE__ */ import_react19.default.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", marginBottom: "16px" } }), /* @__PURE__ */ import_react19.default.createElement("ul", { style: { listStyle: "none", padding: 0, margin: "0 0 22px", display: "flex", flexDirection: "column", gap: "10px" } }, features.map((f, i) => /* @__PURE__ */ import_react19.default.createElement("li", { key: i, style: { display: "flex", alignItems: "center", gap: "10px", fontSize: "13px", color: "rgba(255,255,255,0.75)" } }, /* @__PURE__ */ import_react19.default.createElement("div", { style: {
1073
+ width: "18px",
1074
+ height: "18px",
1075
+ borderRadius: "50%",
1076
+ flexShrink: 0,
1077
+ display: "flex",
1078
+ alignItems: "center",
1079
+ justifyContent: "center",
1080
+ background: alpha(accent, 0.18),
1081
+ border: `1px solid ${alpha(accent, 0.4)}`
1082
+ } }, /* @__PURE__ */ import_react19.default.createElement(
1083
+ "svg",
1084
+ {
1085
+ width: "10",
1086
+ height: "10",
1087
+ viewBox: "0 0 12 12",
1088
+ fill: "none",
1089
+ stroke: "#fff",
1090
+ strokeWidth: "2",
1091
+ strokeLinecap: "round",
1092
+ strokeLinejoin: "round"
1093
+ },
1094
+ /* @__PURE__ */ import_react19.default.createElement("polyline", { points: "1.5,6 4.5,9 10.5,3" })
1095
+ )), f))), /* @__PURE__ */ import_react19.default.createElement(
1096
+ "button",
1097
+ {
1098
+ onClick: onCtaClick,
1099
+ style: {
1100
+ width: "100%",
1101
+ padding: "13px",
1102
+ borderRadius: "12px",
1103
+ border: "none",
1104
+ background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.7)})`,
1105
+ color: "#fff",
1106
+ fontSize: "14px",
1107
+ fontWeight: "700",
1108
+ cursor: "pointer",
1109
+ letterSpacing: "0.2px",
1110
+ fontFamily: "system-ui, sans-serif"
1111
+ },
1112
+ onMouseEnter: (e) => e.currentTarget.style.opacity = "0.88",
1113
+ onMouseLeave: (e) => e.currentTarget.style.opacity = "1"
1114
+ },
1115
+ ctaText
1116
+ ));
1117
+ };
906
1118
  // Annotate the CommonJS export names for ESM import in node:
907
1119
  0 && (module.exports = {
908
1120
  Avatar,
@@ -915,6 +1127,7 @@ var AvatarCard = ({
915
1127
  LoadingSpinner,
916
1128
  NotificationToast,
917
1129
  OtpInput,
1130
+ PricingCard,
918
1131
  ResponsiveNavbar,
919
1132
  SearchBar,
920
1133
  SkeletonLoader,
package/dist/index.mjs CHANGED
@@ -569,9 +569,112 @@ var FileUpload = ({ bg = "#1e293b", textColor = "#f1f5f9", accent = "#7c3aed", r
569
569
  };
570
570
 
571
571
  // src/components/Loader/Loader.jsx
572
- import React13 from "react";
573
- var Loader = ({ bg = "#0f172a", accent = "#7c3aed", size = "40px", borderRadius = "8px" }) => {
574
- return /* @__PURE__ */ React13.createElement("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", background: bg, height: size, width: size, borderRadius } }, /* @__PURE__ */ React13.createElement("div", { style: { border: `4px solid ${bg}`, borderTop: `4px solid ${accent}`, borderRadius: "50%", width: "100%", height: "100%", animation: "spin 1s linear infinite" } }));
572
+ import React13, { useEffect as useEffect4, useState as useState10 } from "react";
573
+ var Loader = ({
574
+ type = "spinner",
575
+ size = 48,
576
+ accent = "#6366f1",
577
+ bg = "transparent",
578
+ label = "",
579
+ speed = 1
580
+ }) => {
581
+ const [dots, setDots] = useState10(0);
582
+ const [progress, setProgress] = useState10(0);
583
+ const alpha = (hex, op) => {
584
+ const r = parseInt(hex.slice(1, 3), 16);
585
+ const g = parseInt(hex.slice(3, 5), 16);
586
+ const b = parseInt(hex.slice(5, 7), 16);
587
+ return `rgba(${r},${g},${b},${op})`;
588
+ };
589
+ useEffect4(() => {
590
+ if (type === "dots") {
591
+ const t = setInterval(() => setDots((d) => (d + 1) % 4), 400 / speed);
592
+ return () => clearInterval(t);
593
+ }
594
+ if (type === "bar") {
595
+ const t = setInterval(() => setProgress((p) => p >= 100 ? 0 : p + 2), 30 / speed);
596
+ return () => clearInterval(t);
597
+ }
598
+ }, [type, speed]);
599
+ const dur = `${1 / speed}s`;
600
+ const wrapStyle = {
601
+ display: "inline-flex",
602
+ flexDirection: "column",
603
+ alignItems: "center",
604
+ justifyContent: "center",
605
+ gap: "12px",
606
+ background: bg,
607
+ padding: bg !== "transparent" ? "24px" : "0",
608
+ borderRadius: "16px",
609
+ fontFamily: "system-ui, sans-serif"
610
+ };
611
+ const labelEl = label ? /* @__PURE__ */ React13.createElement("span", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", letterSpacing: "0.3px" } }, label) : null;
612
+ if (type === "spinner") return /* @__PURE__ */ React13.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React13.createElement("svg", { width: size, height: size, viewBox: "0 0 48 48" }, /* @__PURE__ */ React13.createElement(
613
+ "circle",
614
+ {
615
+ cx: "24",
616
+ cy: "24",
617
+ r: "20",
618
+ fill: "none",
619
+ stroke: alpha(accent, 0.15),
620
+ strokeWidth: "4"
621
+ }
622
+ ), /* @__PURE__ */ React13.createElement(
623
+ "circle",
624
+ {
625
+ cx: "24",
626
+ cy: "24",
627
+ r: "20",
628
+ fill: "none",
629
+ stroke: accent,
630
+ strokeWidth: "4",
631
+ strokeLinecap: "round",
632
+ strokeDasharray: "31.4 94.2",
633
+ style: { transformOrigin: "center", animation: `spin ${dur} linear infinite` }
634
+ }
635
+ ), /* @__PURE__ */ React13.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`)), labelEl);
636
+ if (type === "pulse") return /* @__PURE__ */ React13.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React13.createElement("div", { style: { position: "relative", width: size, height: size } }, /* @__PURE__ */ React13.createElement("div", { style: {
637
+ position: "absolute",
638
+ inset: 0,
639
+ borderRadius: "50%",
640
+ background: alpha(accent, 0.2),
641
+ animation: `pulse ${dur} ease-out infinite`
642
+ } }), /* @__PURE__ */ React13.createElement("div", { style: {
643
+ position: "absolute",
644
+ inset: "25%",
645
+ borderRadius: "50%",
646
+ background: accent
647
+ } }), /* @__PURE__ */ React13.createElement("style", null, `@keyframes pulse { 0%{transform:scale(1);opacity:1} 100%{transform:scale(2);opacity:0} }`)), labelEl);
648
+ if (type === "dots") return /* @__PURE__ */ React13.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React13.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "center" } }, [0, 1, 2].map((i) => /* @__PURE__ */ React13.createElement("div", { key: i, style: {
649
+ width: size / 5,
650
+ height: size / 5,
651
+ borderRadius: "50%",
652
+ background: dots === i ? accent : alpha(accent, 0.25),
653
+ transition: "background 0.2s"
654
+ } }))), labelEl);
655
+ if (type === "bar") return /* @__PURE__ */ React13.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React13.createElement("div", { style: {
656
+ width: size * 3,
657
+ height: size / 8,
658
+ background: alpha(accent, 0.15),
659
+ borderRadius: "99px",
660
+ overflow: "hidden"
661
+ } }, /* @__PURE__ */ React13.createElement("div", { style: {
662
+ height: "100%",
663
+ borderRadius: "99px",
664
+ background: accent,
665
+ width: `${progress}%`,
666
+ transition: "width 0.03s linear"
667
+ } })), labelEl);
668
+ if (type === "ring") return /* @__PURE__ */ React13.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React13.createElement("div", { style: {
669
+ width: size,
670
+ height: size,
671
+ borderRadius: "50%",
672
+ border: `4px solid ${alpha(accent, 0.15)}`,
673
+ borderTop: `4px solid ${accent}`,
674
+ borderRight: `4px solid ${accent}`,
675
+ animation: `spin ${dur} linear infinite`
676
+ } }), /* @__PURE__ */ React13.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`), labelEl);
677
+ return null;
575
678
  };
576
679
 
577
680
  // src/components/Avatar/Avatar.jsx
@@ -615,7 +718,7 @@ var DividerLine = ({
615
718
  };
616
719
 
617
720
  // src/components/Tabs/Tabs.jsx
618
- import React16, { useState as useState10 } from "react";
721
+ import React16, { useState as useState11 } from "react";
619
722
  var Tabs = ({
620
723
  tabs = [
621
724
  { label: "Tab 1", content: "Content for Tab 1" },
@@ -627,7 +730,7 @@ var Tabs = ({
627
730
  textColor = "#f1f5f9",
628
731
  radius = "8px"
629
732
  }) => {
630
- const [activeTab, setActiveTab] = useState10(0);
733
+ const [activeTab, setActiveTab] = useState11(0);
631
734
  return /* @__PURE__ */ React16.createElement("div", { style: { background: bg, borderRadius: radius, padding: "16px", boxShadow: "0 4px 20px rgba(0,0,0,0.5)", fontFamily: "system-ui, sans-serif" } }, /* @__PURE__ */ React16.createElement("div", { style: { display: "flex", borderBottom: `2px solid ${accent}` } }, tabs.map((tab, index) => /* @__PURE__ */ React16.createElement(
632
735
  "button",
633
736
  {
@@ -649,7 +752,7 @@ var Tabs = ({
649
752
  };
650
753
 
651
754
  // src/components/NotificationToast/NotificationToast.jsx
652
- import React17, { useState as useState11, useEffect as useEffect4 } from "react";
755
+ import React17, { useState as useState12, useEffect as useEffect5 } from "react";
653
756
  var NotificationToast = ({
654
757
  title = "New Message",
655
758
  message = "You have a new notification from the team.",
@@ -660,8 +763,8 @@ var NotificationToast = ({
660
763
  radius = "14px",
661
764
  showProgress = true
662
765
  }) => {
663
- const [visible, setVisible] = useState11(true);
664
- const [progress, setProgress] = useState11(100);
766
+ const [visible, setVisible] = useState12(true);
767
+ const [progress, setProgress] = useState12(100);
665
768
  const typeColors = {
666
769
  success: "#10b981",
667
770
  error: "#ef4444",
@@ -675,7 +778,7 @@ var NotificationToast = ({
675
778
  info: "M13 16h-1v-4h-1m1-4h.01M12 2a10 10 0 100 20A10 10 0 0012 2z"
676
779
  };
677
780
  const color = typeColors[type] || accent;
678
- useEffect4(() => {
781
+ useEffect5(() => {
679
782
  if (!showProgress) return;
680
783
  const step = 100 / (duration / 50);
681
784
  const timer = setInterval(() => {
@@ -769,7 +872,7 @@ var NotificationToast = ({
769
872
  };
770
873
 
771
874
  // src/components/AvatarCard/AvatarCard.jsx
772
- import React18, { useState as useState12 } from "react";
875
+ import React18, { useState as useState13 } from "react";
773
876
  var AvatarCard = ({
774
877
  name = "Aryan Sharma",
775
878
  role = "Frontend Developer",
@@ -782,7 +885,7 @@ var AvatarCard = ({
782
885
  bg = "#0f172a",
783
886
  radius = "20px"
784
887
  }) => {
785
- const [followed, setFollowed] = useState12(false);
888
+ const [followed, setFollowed] = useState13(false);
786
889
  const alpha = (hex, op) => {
787
890
  const r = parseInt(hex.slice(1, 3), 16);
788
891
  const g = parseInt(hex.slice(3, 5), 16);
@@ -851,6 +954,114 @@ var AvatarCard = ({
851
954
  marginBottom: "16px"
852
955
  } }, stats.map((s) => /* @__PURE__ */ React18.createElement("div", { key: s.label, style: { textAlign: "center" } }, /* @__PURE__ */ React18.createElement("div", { style: { fontSize: "18px", fontWeight: "800" } }, s.value >= 1e3 ? (s.value / 1e3).toFixed(1) + "k" : s.value), /* @__PURE__ */ React18.createElement("div", { style: { fontSize: "10px", color: "rgba(255,255,255,0.4)", marginTop: "2px" } }, s.label)))));
853
956
  };
957
+
958
+ // src/components/PricingCard/PricingCard.jsx
959
+ import React19 from "react";
960
+ var PricingCard = ({
961
+ planName = "Pro Plan",
962
+ description = "For teams that need more power.",
963
+ price = 29,
964
+ currency = "$",
965
+ period = "per month",
966
+ badgeText = "Most Popular",
967
+ ctaText = "Get Started",
968
+ accent = "#6366f1",
969
+ bg = "#0f172a",
970
+ radius = "20px",
971
+ features = [
972
+ "Unlimited projects",
973
+ "Priority support",
974
+ "Advanced analytics",
975
+ "Custom integrations",
976
+ "Team collaboration"
977
+ ],
978
+ onCtaClick = () => {
979
+ }
980
+ }) => {
981
+ const alpha = (hex, op) => {
982
+ const r = parseInt(hex.slice(1, 3), 16);
983
+ const g = parseInt(hex.slice(3, 5), 16);
984
+ const b = parseInt(hex.slice(5, 7), 16);
985
+ return `rgba(${r},${g},${b},${op})`;
986
+ };
987
+ return /* @__PURE__ */ React19.createElement("div", { style: {
988
+ background: bg,
989
+ borderRadius: radius,
990
+ padding: "28px 24px",
991
+ width: "300px",
992
+ color: "#fff",
993
+ fontFamily: "system-ui, sans-serif",
994
+ boxShadow: "0 10px 40px rgba(0,0,0,0.5)",
995
+ border: `1px solid ${alpha(accent, 0.25)}`,
996
+ position: "relative",
997
+ overflow: "hidden"
998
+ } }, /* @__PURE__ */ React19.createElement("div", { style: {
999
+ position: "absolute",
1000
+ top: 0,
1001
+ left: 0,
1002
+ right: 0,
1003
+ height: "3px",
1004
+ background: `linear-gradient(90deg, ${accent}, ${alpha(accent, 0.3)})`
1005
+ } }), badgeText && /* @__PURE__ */ React19.createElement("div", { style: {
1006
+ display: "inline-flex",
1007
+ alignItems: "center",
1008
+ gap: "6px",
1009
+ padding: "4px 12px",
1010
+ borderRadius: "100px",
1011
+ marginBottom: "14px",
1012
+ background: alpha(accent, 0.12),
1013
+ border: `1px solid ${alpha(accent, 0.3)}`,
1014
+ fontSize: "11px",
1015
+ fontWeight: "700",
1016
+ color: accent,
1017
+ letterSpacing: "0.5px",
1018
+ textTransform: "uppercase"
1019
+ } }, /* @__PURE__ */ React19.createElement("div", { style: { width: 6, height: 6, borderRadius: "50%", background: accent } }), badgeText), /* @__PURE__ */ React19.createElement("div", { style: { fontSize: "20px", fontWeight: "800", marginBottom: "4px" } }, planName), /* @__PURE__ */ React19.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", marginBottom: "20px", lineHeight: 1.5 } }, description), /* @__PURE__ */ React19.createElement("div", { style: { display: "flex", alignItems: "flex-end", gap: "3px", marginBottom: "4px" } }, /* @__PURE__ */ React19.createElement("span", { style: { fontSize: "18px", fontWeight: "700", color: "rgba(255,255,255,0.5)", lineHeight: 2 } }, currency), /* @__PURE__ */ React19.createElement("span", { style: { fontSize: "52px", fontWeight: "800", color: "#fff", lineHeight: 1 } }, Math.round(price))), /* @__PURE__ */ React19.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", marginBottom: "20px" } }, period), /* @__PURE__ */ React19.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", marginBottom: "16px" } }), /* @__PURE__ */ React19.createElement("ul", { style: { listStyle: "none", padding: 0, margin: "0 0 22px", display: "flex", flexDirection: "column", gap: "10px" } }, features.map((f, i) => /* @__PURE__ */ React19.createElement("li", { key: i, style: { display: "flex", alignItems: "center", gap: "10px", fontSize: "13px", color: "rgba(255,255,255,0.75)" } }, /* @__PURE__ */ React19.createElement("div", { style: {
1020
+ width: "18px",
1021
+ height: "18px",
1022
+ borderRadius: "50%",
1023
+ flexShrink: 0,
1024
+ display: "flex",
1025
+ alignItems: "center",
1026
+ justifyContent: "center",
1027
+ background: alpha(accent, 0.18),
1028
+ border: `1px solid ${alpha(accent, 0.4)}`
1029
+ } }, /* @__PURE__ */ React19.createElement(
1030
+ "svg",
1031
+ {
1032
+ width: "10",
1033
+ height: "10",
1034
+ viewBox: "0 0 12 12",
1035
+ fill: "none",
1036
+ stroke: "#fff",
1037
+ strokeWidth: "2",
1038
+ strokeLinecap: "round",
1039
+ strokeLinejoin: "round"
1040
+ },
1041
+ /* @__PURE__ */ React19.createElement("polyline", { points: "1.5,6 4.5,9 10.5,3" })
1042
+ )), f))), /* @__PURE__ */ React19.createElement(
1043
+ "button",
1044
+ {
1045
+ onClick: onCtaClick,
1046
+ style: {
1047
+ width: "100%",
1048
+ padding: "13px",
1049
+ borderRadius: "12px",
1050
+ border: "none",
1051
+ background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.7)})`,
1052
+ color: "#fff",
1053
+ fontSize: "14px",
1054
+ fontWeight: "700",
1055
+ cursor: "pointer",
1056
+ letterSpacing: "0.2px",
1057
+ fontFamily: "system-ui, sans-serif"
1058
+ },
1059
+ onMouseEnter: (e) => e.currentTarget.style.opacity = "0.88",
1060
+ onMouseLeave: (e) => e.currentTarget.style.opacity = "1"
1061
+ },
1062
+ ctaText
1063
+ ));
1064
+ };
854
1065
  export {
855
1066
  Avatar,
856
1067
  AvatarCard,
@@ -862,6 +1073,7 @@ export {
862
1073
  LoadingSpinner,
863
1074
  NotificationToast,
864
1075
  OtpInput,
1076
+ PricingCard,
865
1077
  ResponsiveNavbar,
866
1078
  SearchBar,
867
1079
  SkeletonLoader,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "virtual-ui-lib",
3
- "version": "1.0.57",
3
+ "version": "1.0.59",
4
4
  "description": "Virtual UI React Component Library",
5
5
  "author": "Ankush",
6
6
  "license": "ISC",