virtual-ui-lib 1.0.53 → 1.0.54

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 +152 -2
  2. package/dist/index.mjs +151 -2
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -42,7 +42,7 @@ __export(index_exports, {
42
42
  SkeletonLoader: () => SkeletonLoader,
43
43
  SmartButton: () => SmartButton,
44
44
  StatCard: () => StatCard,
45
- Statscard: () => void 0,
45
+ StatsCard: () => StatsCard,
46
46
  Tabs: () => Tabs,
47
47
  TextArea: () => TextArea,
48
48
  ToastNotification: () => ToastNotification
@@ -698,6 +698,156 @@ var Tabs = ({
698
698
  tab.label
699
699
  ))), /* @__PURE__ */ import_react16.default.createElement("div", { style: { padding: "16px", color: textColor } }, /* @__PURE__ */ import_react16.default.createElement("h4", { style: { margin: "0 0 8px", fontSize: "16px", fontWeight: "600" } }, tabs[activeTab].label), /* @__PURE__ */ import_react16.default.createElement("p", { style: { margin: "0", fontSize: "14px" } }, tabs[activeTab].content)));
700
700
  };
701
+
702
+ // src/components/StatsCard/StatsCard.jsx
703
+ var StatsCard = ({
704
+ label = "Total Revenue",
705
+ value = "$48,295",
706
+ trend = 12.4,
707
+ progress = 72,
708
+ footerText = "vs last month",
709
+ accentColor = "#6366f1",
710
+ variant = "dark",
711
+ icon = "chart"
712
+ }) => {
713
+ const isUp = trend >= 0;
714
+ const variants = {
715
+ dark: { bg: "rgba(15,15,30,0.95)", border: "rgba(255,255,255,0.1)", text: "#fff" },
716
+ glass: { bg: "rgba(255,255,255,0.07)", border: "rgba(255,255,255,0.15)", text: "#fff" },
717
+ light: { bg: "rgba(255,255,255,0.95)", border: "rgba(0,0,0,0.08)", text: "#0f0f1e" }
718
+ };
719
+ const v = variants[variant] || variants.dark;
720
+ const alpha = (hex, op) => {
721
+ const r = parseInt(hex.slice(1, 3), 16);
722
+ const g = parseInt(hex.slice(3, 5), 16);
723
+ const b = parseInt(hex.slice(5, 7), 16);
724
+ return `rgba(${r},${g},${b},${op})`;
725
+ };
726
+ const icons = {
727
+ chart: "M3 3v18h18M7 16l4-4 4 4 4-4",
728
+ users: "M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8zM23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75",
729
+ zap: "M13 2L3 14h9l-1 8 10-12h-9l1-8z",
730
+ box: "M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"
731
+ };
732
+ const s = {
733
+ card: {
734
+ width: 240,
735
+ borderRadius: 20,
736
+ padding: 20,
737
+ position: "relative",
738
+ overflow: "hidden",
739
+ background: v.bg,
740
+ border: `1px solid ${v.border}`,
741
+ color: v.text,
742
+ backdropFilter: variant === "glass" ? "blur(12px)" : "none",
743
+ fontFamily: "'DM Sans', sans-serif"
744
+ },
745
+ glow: {
746
+ position: "absolute",
747
+ top: -30,
748
+ right: -30,
749
+ width: 100,
750
+ height: 100,
751
+ borderRadius: "50%",
752
+ background: alpha(accentColor, 0.4),
753
+ filter: "blur(30px)",
754
+ pointerEvents: "none",
755
+ opacity: 0.5
756
+ },
757
+ top: {
758
+ display: "flex",
759
+ alignItems: "flex-start",
760
+ justifyContent: "space-between",
761
+ marginBottom: 16
762
+ },
763
+ iconWrap: {
764
+ width: 40,
765
+ height: 40,
766
+ borderRadius: 12,
767
+ display: "flex",
768
+ alignItems: "center",
769
+ justifyContent: "center",
770
+ background: alpha(accentColor, 0.18),
771
+ border: `1px solid ${alpha(accentColor, 0.35)}`
772
+ },
773
+ trendBadge: {
774
+ display: "flex",
775
+ alignItems: "center",
776
+ gap: 3,
777
+ padding: "3px 8px",
778
+ borderRadius: 20,
779
+ fontSize: 11,
780
+ fontWeight: 700,
781
+ background: isUp ? "rgba(16,185,129,0.15)" : "rgba(244,63,94,0.15)",
782
+ color: isUp ? "#10b981" : "#f43f5e"
783
+ },
784
+ value: {
785
+ fontSize: 32,
786
+ fontWeight: 800,
787
+ marginBottom: 2,
788
+ lineHeight: 1,
789
+ color: v.text
790
+ },
791
+ label: {
792
+ fontSize: 12,
793
+ fontWeight: 500,
794
+ opacity: 0.6,
795
+ marginBottom: 12
796
+ },
797
+ barTrack: {
798
+ height: 4,
799
+ borderRadius: 2,
800
+ overflow: "hidden",
801
+ marginBottom: 12,
802
+ background: alpha(accentColor, 0.15)
803
+ },
804
+ barFill: {
805
+ height: "100%",
806
+ borderRadius: 2,
807
+ width: `${Math.min(100, Math.max(0, progress))}%`,
808
+ background: `linear-gradient(90deg, ${accentColor}, ${alpha(accentColor, 0.7)})`,
809
+ transition: "width 0.5s ease"
810
+ },
811
+ footer: {
812
+ display: "flex",
813
+ alignItems: "center",
814
+ justifyContent: "space-between"
815
+ },
816
+ footerText: { fontSize: 11, opacity: 0.5 },
817
+ dot: {
818
+ width: 6,
819
+ height: 6,
820
+ borderRadius: "50%",
821
+ background: accentColor,
822
+ opacity: 0.7
823
+ }
824
+ };
825
+ return /* @__PURE__ */ React.createElement("div", { style: s.card }, /* @__PURE__ */ React.createElement("div", { style: s.glow }), /* @__PURE__ */ React.createElement("div", { style: s.top }, /* @__PURE__ */ React.createElement("div", { style: s.iconWrap }, /* @__PURE__ */ React.createElement(
826
+ "svg",
827
+ {
828
+ width: "18",
829
+ height: "18",
830
+ viewBox: "0 0 24 24",
831
+ fill: "none",
832
+ stroke: accentColor,
833
+ strokeWidth: "2",
834
+ strokeLinecap: "round",
835
+ strokeLinejoin: "round"
836
+ },
837
+ /* @__PURE__ */ React.createElement("path", { d: icons[icon] || icons.chart })
838
+ )), /* @__PURE__ */ React.createElement("div", { style: s.trendBadge }, /* @__PURE__ */ React.createElement(
839
+ "svg",
840
+ {
841
+ width: "10",
842
+ height: "10",
843
+ viewBox: "0 0 24 24",
844
+ fill: "none",
845
+ stroke: "currentColor",
846
+ strokeWidth: "3"
847
+ },
848
+ /* @__PURE__ */ React.createElement("polyline", { points: isUp ? "18 15 12 9 6 15" : "6 9 12 15 18 9" })
849
+ ), Math.abs(trend).toFixed(1), "%")), /* @__PURE__ */ React.createElement("div", { style: s.value }, value), /* @__PURE__ */ React.createElement("div", { style: s.label }, label), /* @__PURE__ */ React.createElement("div", { style: s.barTrack }, /* @__PURE__ */ React.createElement("div", { style: s.barFill })), /* @__PURE__ */ React.createElement("div", { style: s.footer }, /* @__PURE__ */ React.createElement("span", { style: s.footerText }, footerText), /* @__PURE__ */ React.createElement("div", { style: s.dot })));
850
+ };
701
851
  // Annotate the CommonJS export names for ESM import in node:
702
852
  0 && (module.exports = {
703
853
  Avatar,
@@ -713,7 +863,7 @@ var Tabs = ({
713
863
  SkeletonLoader,
714
864
  SmartButton,
715
865
  StatCard,
716
- Statscard,
866
+ StatsCard,
717
867
  Tabs,
718
868
  TextArea,
719
869
  ToastNotification
package/dist/index.mjs CHANGED
@@ -647,7 +647,156 @@ var Tabs = ({
647
647
  tab.label
648
648
  ))), /* @__PURE__ */ React17.createElement("div", { style: { padding: "16px", color: textColor } }, /* @__PURE__ */ React17.createElement("h4", { style: { margin: "0 0 8px", fontSize: "16px", fontWeight: "600" } }, tabs[activeTab].label), /* @__PURE__ */ React17.createElement("p", { style: { margin: "0", fontSize: "14px" } }, tabs[activeTab].content)));
649
649
  };
650
- var export_Statscard = void 0;
650
+
651
+ // src/components/StatsCard/StatsCard.jsx
652
+ var StatsCard = ({
653
+ label = "Total Revenue",
654
+ value = "$48,295",
655
+ trend = 12.4,
656
+ progress = 72,
657
+ footerText = "vs last month",
658
+ accentColor = "#6366f1",
659
+ variant = "dark",
660
+ icon = "chart"
661
+ }) => {
662
+ const isUp = trend >= 0;
663
+ const variants = {
664
+ dark: { bg: "rgba(15,15,30,0.95)", border: "rgba(255,255,255,0.1)", text: "#fff" },
665
+ glass: { bg: "rgba(255,255,255,0.07)", border: "rgba(255,255,255,0.15)", text: "#fff" },
666
+ light: { bg: "rgba(255,255,255,0.95)", border: "rgba(0,0,0,0.08)", text: "#0f0f1e" }
667
+ };
668
+ const v = variants[variant] || variants.dark;
669
+ const alpha = (hex, op) => {
670
+ const r = parseInt(hex.slice(1, 3), 16);
671
+ const g = parseInt(hex.slice(3, 5), 16);
672
+ const b = parseInt(hex.slice(5, 7), 16);
673
+ return `rgba(${r},${g},${b},${op})`;
674
+ };
675
+ const icons = {
676
+ chart: "M3 3v18h18M7 16l4-4 4 4 4-4",
677
+ users: "M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8zM23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75",
678
+ zap: "M13 2L3 14h9l-1 8 10-12h-9l1-8z",
679
+ box: "M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"
680
+ };
681
+ const s = {
682
+ card: {
683
+ width: 240,
684
+ borderRadius: 20,
685
+ padding: 20,
686
+ position: "relative",
687
+ overflow: "hidden",
688
+ background: v.bg,
689
+ border: `1px solid ${v.border}`,
690
+ color: v.text,
691
+ backdropFilter: variant === "glass" ? "blur(12px)" : "none",
692
+ fontFamily: "'DM Sans', sans-serif"
693
+ },
694
+ glow: {
695
+ position: "absolute",
696
+ top: -30,
697
+ right: -30,
698
+ width: 100,
699
+ height: 100,
700
+ borderRadius: "50%",
701
+ background: alpha(accentColor, 0.4),
702
+ filter: "blur(30px)",
703
+ pointerEvents: "none",
704
+ opacity: 0.5
705
+ },
706
+ top: {
707
+ display: "flex",
708
+ alignItems: "flex-start",
709
+ justifyContent: "space-between",
710
+ marginBottom: 16
711
+ },
712
+ iconWrap: {
713
+ width: 40,
714
+ height: 40,
715
+ borderRadius: 12,
716
+ display: "flex",
717
+ alignItems: "center",
718
+ justifyContent: "center",
719
+ background: alpha(accentColor, 0.18),
720
+ border: `1px solid ${alpha(accentColor, 0.35)}`
721
+ },
722
+ trendBadge: {
723
+ display: "flex",
724
+ alignItems: "center",
725
+ gap: 3,
726
+ padding: "3px 8px",
727
+ borderRadius: 20,
728
+ fontSize: 11,
729
+ fontWeight: 700,
730
+ background: isUp ? "rgba(16,185,129,0.15)" : "rgba(244,63,94,0.15)",
731
+ color: isUp ? "#10b981" : "#f43f5e"
732
+ },
733
+ value: {
734
+ fontSize: 32,
735
+ fontWeight: 800,
736
+ marginBottom: 2,
737
+ lineHeight: 1,
738
+ color: v.text
739
+ },
740
+ label: {
741
+ fontSize: 12,
742
+ fontWeight: 500,
743
+ opacity: 0.6,
744
+ marginBottom: 12
745
+ },
746
+ barTrack: {
747
+ height: 4,
748
+ borderRadius: 2,
749
+ overflow: "hidden",
750
+ marginBottom: 12,
751
+ background: alpha(accentColor, 0.15)
752
+ },
753
+ barFill: {
754
+ height: "100%",
755
+ borderRadius: 2,
756
+ width: `${Math.min(100, Math.max(0, progress))}%`,
757
+ background: `linear-gradient(90deg, ${accentColor}, ${alpha(accentColor, 0.7)})`,
758
+ transition: "width 0.5s ease"
759
+ },
760
+ footer: {
761
+ display: "flex",
762
+ alignItems: "center",
763
+ justifyContent: "space-between"
764
+ },
765
+ footerText: { fontSize: 11, opacity: 0.5 },
766
+ dot: {
767
+ width: 6,
768
+ height: 6,
769
+ borderRadius: "50%",
770
+ background: accentColor,
771
+ opacity: 0.7
772
+ }
773
+ };
774
+ return /* @__PURE__ */ React.createElement("div", { style: s.card }, /* @__PURE__ */ React.createElement("div", { style: s.glow }), /* @__PURE__ */ React.createElement("div", { style: s.top }, /* @__PURE__ */ React.createElement("div", { style: s.iconWrap }, /* @__PURE__ */ React.createElement(
775
+ "svg",
776
+ {
777
+ width: "18",
778
+ height: "18",
779
+ viewBox: "0 0 24 24",
780
+ fill: "none",
781
+ stroke: accentColor,
782
+ strokeWidth: "2",
783
+ strokeLinecap: "round",
784
+ strokeLinejoin: "round"
785
+ },
786
+ /* @__PURE__ */ React.createElement("path", { d: icons[icon] || icons.chart })
787
+ )), /* @__PURE__ */ React.createElement("div", { style: s.trendBadge }, /* @__PURE__ */ React.createElement(
788
+ "svg",
789
+ {
790
+ width: "10",
791
+ height: "10",
792
+ viewBox: "0 0 24 24",
793
+ fill: "none",
794
+ stroke: "currentColor",
795
+ strokeWidth: "3"
796
+ },
797
+ /* @__PURE__ */ React.createElement("polyline", { points: isUp ? "18 15 12 9 6 15" : "6 9 12 15 18 9" })
798
+ ), Math.abs(trend).toFixed(1), "%")), /* @__PURE__ */ React.createElement("div", { style: s.value }, value), /* @__PURE__ */ React.createElement("div", { style: s.label }, label), /* @__PURE__ */ React.createElement("div", { style: s.barTrack }, /* @__PURE__ */ React.createElement("div", { style: s.barFill })), /* @__PURE__ */ React.createElement("div", { style: s.footer }, /* @__PURE__ */ React.createElement("span", { style: s.footerText }, footerText), /* @__PURE__ */ React.createElement("div", { style: s.dot })));
799
+ };
651
800
  export {
652
801
  Avatar,
653
802
  CodeBlock,
@@ -662,7 +811,7 @@ export {
662
811
  SkeletonLoader,
663
812
  SmartButton,
664
813
  StatCard,
665
- export_Statscard as Statscard,
814
+ StatsCard,
666
815
  Tabs,
667
816
  TextArea,
668
817
  ToastNotification
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "virtual-ui-lib",
3
- "version": "1.0.53",
3
+ "version": "1.0.54",
4
4
  "description": "Virtual UI React Component Library",
5
5
  "author": "Ankush",
6
6
  "license": "ISC",