virtual-ui-lib 1.0.57 → 1.0.58

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 +110 -0
  2. package/dist/index.mjs +109 -0
  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,
@@ -903,6 +904,114 @@ var AvatarCard = ({
903
904
  marginBottom: "16px"
904
905
  } }, 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
906
  };
907
+
908
+ // src/components/PricingCard/PricingCard.jsx
909
+ var import_react19 = __toESM(require("react"));
910
+ var PricingCard = ({
911
+ planName = "Pro Plan",
912
+ description = "For teams that need more power.",
913
+ price = 29,
914
+ currency = "$",
915
+ period = "per month",
916
+ badgeText = "Most Popular",
917
+ ctaText = "Get Started",
918
+ accent = "#6366f1",
919
+ bg = "#0f172a",
920
+ radius = "20px",
921
+ features = [
922
+ "Unlimited projects",
923
+ "Priority support",
924
+ "Advanced analytics",
925
+ "Custom integrations",
926
+ "Team collaboration"
927
+ ],
928
+ onCtaClick = () => {
929
+ }
930
+ }) => {
931
+ const alpha = (hex, op) => {
932
+ const r = parseInt(hex.slice(1, 3), 16);
933
+ const g = parseInt(hex.slice(3, 5), 16);
934
+ const b = parseInt(hex.slice(5, 7), 16);
935
+ return `rgba(${r},${g},${b},${op})`;
936
+ };
937
+ return /* @__PURE__ */ import_react19.default.createElement("div", { style: {
938
+ background: bg,
939
+ borderRadius: radius,
940
+ padding: "28px 24px",
941
+ width: "300px",
942
+ color: "#fff",
943
+ fontFamily: "system-ui, sans-serif",
944
+ boxShadow: "0 10px 40px rgba(0,0,0,0.5)",
945
+ border: `1px solid ${alpha(accent, 0.25)}`,
946
+ position: "relative",
947
+ overflow: "hidden"
948
+ } }, /* @__PURE__ */ import_react19.default.createElement("div", { style: {
949
+ position: "absolute",
950
+ top: 0,
951
+ left: 0,
952
+ right: 0,
953
+ height: "3px",
954
+ background: `linear-gradient(90deg, ${accent}, ${alpha(accent, 0.3)})`
955
+ } }), badgeText && /* @__PURE__ */ import_react19.default.createElement("div", { style: {
956
+ display: "inline-flex",
957
+ alignItems: "center",
958
+ gap: "6px",
959
+ padding: "4px 12px",
960
+ borderRadius: "100px",
961
+ marginBottom: "14px",
962
+ background: alpha(accent, 0.12),
963
+ border: `1px solid ${alpha(accent, 0.3)}`,
964
+ fontSize: "11px",
965
+ fontWeight: "700",
966
+ color: accent,
967
+ letterSpacing: "0.5px",
968
+ textTransform: "uppercase"
969
+ } }, /* @__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: {
970
+ width: "18px",
971
+ height: "18px",
972
+ borderRadius: "50%",
973
+ flexShrink: 0,
974
+ display: "flex",
975
+ alignItems: "center",
976
+ justifyContent: "center",
977
+ background: alpha(accent, 0.18),
978
+ border: `1px solid ${alpha(accent, 0.4)}`
979
+ } }, /* @__PURE__ */ import_react19.default.createElement(
980
+ "svg",
981
+ {
982
+ width: "10",
983
+ height: "10",
984
+ viewBox: "0 0 12 12",
985
+ fill: "none",
986
+ stroke: "#fff",
987
+ strokeWidth: "2",
988
+ strokeLinecap: "round",
989
+ strokeLinejoin: "round"
990
+ },
991
+ /* @__PURE__ */ import_react19.default.createElement("polyline", { points: "1.5,6 4.5,9 10.5,3" })
992
+ )), f))), /* @__PURE__ */ import_react19.default.createElement(
993
+ "button",
994
+ {
995
+ onClick: onCtaClick,
996
+ style: {
997
+ width: "100%",
998
+ padding: "13px",
999
+ borderRadius: "12px",
1000
+ border: "none",
1001
+ background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.7)})`,
1002
+ color: "#fff",
1003
+ fontSize: "14px",
1004
+ fontWeight: "700",
1005
+ cursor: "pointer",
1006
+ letterSpacing: "0.2px",
1007
+ fontFamily: "system-ui, sans-serif"
1008
+ },
1009
+ onMouseEnter: (e) => e.currentTarget.style.opacity = "0.88",
1010
+ onMouseLeave: (e) => e.currentTarget.style.opacity = "1"
1011
+ },
1012
+ ctaText
1013
+ ));
1014
+ };
906
1015
  // Annotate the CommonJS export names for ESM import in node:
907
1016
  0 && (module.exports = {
908
1017
  Avatar,
@@ -915,6 +1024,7 @@ var AvatarCard = ({
915
1024
  LoadingSpinner,
916
1025
  NotificationToast,
917
1026
  OtpInput,
1027
+ PricingCard,
918
1028
  ResponsiveNavbar,
919
1029
  SearchBar,
920
1030
  SkeletonLoader,
package/dist/index.mjs CHANGED
@@ -851,6 +851,114 @@ var AvatarCard = ({
851
851
  marginBottom: "16px"
852
852
  } }, 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
853
  };
854
+
855
+ // src/components/PricingCard/PricingCard.jsx
856
+ import React19 from "react";
857
+ var PricingCard = ({
858
+ planName = "Pro Plan",
859
+ description = "For teams that need more power.",
860
+ price = 29,
861
+ currency = "$",
862
+ period = "per month",
863
+ badgeText = "Most Popular",
864
+ ctaText = "Get Started",
865
+ accent = "#6366f1",
866
+ bg = "#0f172a",
867
+ radius = "20px",
868
+ features = [
869
+ "Unlimited projects",
870
+ "Priority support",
871
+ "Advanced analytics",
872
+ "Custom integrations",
873
+ "Team collaboration"
874
+ ],
875
+ onCtaClick = () => {
876
+ }
877
+ }) => {
878
+ const alpha = (hex, op) => {
879
+ const r = parseInt(hex.slice(1, 3), 16);
880
+ const g = parseInt(hex.slice(3, 5), 16);
881
+ const b = parseInt(hex.slice(5, 7), 16);
882
+ return `rgba(${r},${g},${b},${op})`;
883
+ };
884
+ return /* @__PURE__ */ React19.createElement("div", { style: {
885
+ background: bg,
886
+ borderRadius: radius,
887
+ padding: "28px 24px",
888
+ width: "300px",
889
+ color: "#fff",
890
+ fontFamily: "system-ui, sans-serif",
891
+ boxShadow: "0 10px 40px rgba(0,0,0,0.5)",
892
+ border: `1px solid ${alpha(accent, 0.25)}`,
893
+ position: "relative",
894
+ overflow: "hidden"
895
+ } }, /* @__PURE__ */ React19.createElement("div", { style: {
896
+ position: "absolute",
897
+ top: 0,
898
+ left: 0,
899
+ right: 0,
900
+ height: "3px",
901
+ background: `linear-gradient(90deg, ${accent}, ${alpha(accent, 0.3)})`
902
+ } }), badgeText && /* @__PURE__ */ React19.createElement("div", { style: {
903
+ display: "inline-flex",
904
+ alignItems: "center",
905
+ gap: "6px",
906
+ padding: "4px 12px",
907
+ borderRadius: "100px",
908
+ marginBottom: "14px",
909
+ background: alpha(accent, 0.12),
910
+ border: `1px solid ${alpha(accent, 0.3)}`,
911
+ fontSize: "11px",
912
+ fontWeight: "700",
913
+ color: accent,
914
+ letterSpacing: "0.5px",
915
+ textTransform: "uppercase"
916
+ } }, /* @__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: {
917
+ width: "18px",
918
+ height: "18px",
919
+ borderRadius: "50%",
920
+ flexShrink: 0,
921
+ display: "flex",
922
+ alignItems: "center",
923
+ justifyContent: "center",
924
+ background: alpha(accent, 0.18),
925
+ border: `1px solid ${alpha(accent, 0.4)}`
926
+ } }, /* @__PURE__ */ React19.createElement(
927
+ "svg",
928
+ {
929
+ width: "10",
930
+ height: "10",
931
+ viewBox: "0 0 12 12",
932
+ fill: "none",
933
+ stroke: "#fff",
934
+ strokeWidth: "2",
935
+ strokeLinecap: "round",
936
+ strokeLinejoin: "round"
937
+ },
938
+ /* @__PURE__ */ React19.createElement("polyline", { points: "1.5,6 4.5,9 10.5,3" })
939
+ )), f))), /* @__PURE__ */ React19.createElement(
940
+ "button",
941
+ {
942
+ onClick: onCtaClick,
943
+ style: {
944
+ width: "100%",
945
+ padding: "13px",
946
+ borderRadius: "12px",
947
+ border: "none",
948
+ background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.7)})`,
949
+ color: "#fff",
950
+ fontSize: "14px",
951
+ fontWeight: "700",
952
+ cursor: "pointer",
953
+ letterSpacing: "0.2px",
954
+ fontFamily: "system-ui, sans-serif"
955
+ },
956
+ onMouseEnter: (e) => e.currentTarget.style.opacity = "0.88",
957
+ onMouseLeave: (e) => e.currentTarget.style.opacity = "1"
958
+ },
959
+ ctaText
960
+ ));
961
+ };
854
962
  export {
855
963
  Avatar,
856
964
  AvatarCard,
@@ -862,6 +970,7 @@ export {
862
970
  LoadingSpinner,
863
971
  NotificationToast,
864
972
  OtpInput,
973
+ PricingCard,
865
974
  ResponsiveNavbar,
866
975
  SearchBar,
867
976
  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.58",
4
4
  "description": "Virtual UI React Component Library",
5
5
  "author": "Ankush",
6
6
  "license": "ISC",