virtual-ui-lib 1.0.56 → 1.0.57

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 +86 -0
  2. package/dist/index.mjs +85 -0
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
30
30
  var index_exports = {};
31
31
  __export(index_exports, {
32
32
  Avatar: () => Avatar,
33
+ AvatarCard: () => AvatarCard,
33
34
  CodeBlock: () => CodeBlock,
34
35
  CustomInputField: () => CustomInputField,
35
36
  DividerLine: () => DividerLine,
@@ -818,9 +819,94 @@ var NotificationToast = ({
818
819
  borderRadius: "0 2px 2px 0"
819
820
  } })));
820
821
  };
822
+
823
+ // src/components/AvatarCard/AvatarCard.jsx
824
+ var import_react18 = __toESM(require("react"));
825
+ var AvatarCard = ({
826
+ name = "Aryan Sharma",
827
+ role = "Frontend Developer",
828
+ followers = 2400,
829
+ following = 180,
830
+ projects = 34,
831
+ bio = "Building beautiful UIs one component at a time.",
832
+ avatar = "",
833
+ accent = "#6366f1",
834
+ bg = "#0f172a",
835
+ radius = "20px"
836
+ }) => {
837
+ const [followed, setFollowed] = (0, import_react18.useState)(false);
838
+ const alpha = (hex, op) => {
839
+ const r = parseInt(hex.slice(1, 3), 16);
840
+ const g = parseInt(hex.slice(3, 5), 16);
841
+ const b = parseInt(hex.slice(5, 7), 16);
842
+ return `rgba(${r},${g},${b},${op})`;
843
+ };
844
+ const initials = name.split(" ").map((n) => n[0]).join("").slice(0, 2).toUpperCase();
845
+ const stats = [
846
+ { label: "Followers", value: followed ? followers + 1 : followers },
847
+ { label: "Following", value: following },
848
+ { label: "Projects", value: projects }
849
+ ];
850
+ return /* @__PURE__ */ import_react18.default.createElement("div", { style: {
851
+ background: bg,
852
+ borderRadius: radius,
853
+ padding: "24px 20px",
854
+ width: "280px",
855
+ color: "#fff",
856
+ fontFamily: "system-ui, sans-serif",
857
+ boxShadow: "0 10px 40px rgba(0,0,0,0.5)",
858
+ border: "1px solid rgba(255,255,255,0.08)",
859
+ position: "relative",
860
+ overflow: "hidden"
861
+ } }, /* @__PURE__ */ import_react18.default.createElement("div", { style: {
862
+ position: "absolute",
863
+ top: 0,
864
+ left: 0,
865
+ right: 0,
866
+ height: "3px",
867
+ background: `linear-gradient(90deg, ${accent}, ${alpha(accent, 0.3)})`
868
+ } }), /* @__PURE__ */ import_react18.default.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", marginBottom: "16px" } }, /* @__PURE__ */ import_react18.default.createElement("div", { style: {
869
+ width: 72,
870
+ height: 72,
871
+ borderRadius: "50%",
872
+ background: avatar ? `url(${avatar}) center/cover` : `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.5)})`,
873
+ display: "flex",
874
+ alignItems: "center",
875
+ justifyContent: "center",
876
+ fontSize: "24px",
877
+ fontWeight: "800",
878
+ color: "#fff",
879
+ border: `3px solid ${alpha(accent, 0.4)}`,
880
+ marginBottom: "12px"
881
+ } }, !avatar && initials), /* @__PURE__ */ import_react18.default.createElement("div", { style: { fontSize: "16px", fontWeight: "700", marginBottom: "3px" } }, name), /* @__PURE__ */ import_react18.default.createElement("div", { style: {
882
+ fontSize: "12px",
883
+ fontWeight: "600",
884
+ color: accent,
885
+ background: alpha(accent, 0.12),
886
+ padding: "2px 10px",
887
+ borderRadius: "20px",
888
+ border: `1px solid ${alpha(accent, 0.3)}`
889
+ } }, role)), /* @__PURE__ */ import_react18.default.createElement("p", { style: {
890
+ fontSize: "12px",
891
+ color: "rgba(255,255,255,0.45)",
892
+ textAlign: "center",
893
+ lineHeight: 1.6,
894
+ marginBottom: "18px",
895
+ padding: "0 4px"
896
+ } }, bio), /* @__PURE__ */ import_react18.default.createElement("div", { style: {
897
+ display: "flex",
898
+ justifyContent: "space-around",
899
+ background: "rgba(255,255,255,0.04)",
900
+ border: "1px solid rgba(255,255,255,0.07)",
901
+ borderRadius: "12px",
902
+ padding: "12px 8px",
903
+ marginBottom: "16px"
904
+ } }, 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
+ };
821
906
  // Annotate the CommonJS export names for ESM import in node:
822
907
  0 && (module.exports = {
823
908
  Avatar,
909
+ AvatarCard,
824
910
  CodeBlock,
825
911
  CustomInputField,
826
912
  DividerLine,
package/dist/index.mjs CHANGED
@@ -767,8 +767,93 @@ var NotificationToast = ({
767
767
  borderRadius: "0 2px 2px 0"
768
768
  } })));
769
769
  };
770
+
771
+ // src/components/AvatarCard/AvatarCard.jsx
772
+ import React18, { useState as useState12 } from "react";
773
+ var AvatarCard = ({
774
+ name = "Aryan Sharma",
775
+ role = "Frontend Developer",
776
+ followers = 2400,
777
+ following = 180,
778
+ projects = 34,
779
+ bio = "Building beautiful UIs one component at a time.",
780
+ avatar = "",
781
+ accent = "#6366f1",
782
+ bg = "#0f172a",
783
+ radius = "20px"
784
+ }) => {
785
+ const [followed, setFollowed] = useState12(false);
786
+ const alpha = (hex, op) => {
787
+ const r = parseInt(hex.slice(1, 3), 16);
788
+ const g = parseInt(hex.slice(3, 5), 16);
789
+ const b = parseInt(hex.slice(5, 7), 16);
790
+ return `rgba(${r},${g},${b},${op})`;
791
+ };
792
+ const initials = name.split(" ").map((n) => n[0]).join("").slice(0, 2).toUpperCase();
793
+ const stats = [
794
+ { label: "Followers", value: followed ? followers + 1 : followers },
795
+ { label: "Following", value: following },
796
+ { label: "Projects", value: projects }
797
+ ];
798
+ return /* @__PURE__ */ React18.createElement("div", { style: {
799
+ background: bg,
800
+ borderRadius: radius,
801
+ padding: "24px 20px",
802
+ width: "280px",
803
+ color: "#fff",
804
+ fontFamily: "system-ui, sans-serif",
805
+ boxShadow: "0 10px 40px rgba(0,0,0,0.5)",
806
+ border: "1px solid rgba(255,255,255,0.08)",
807
+ position: "relative",
808
+ overflow: "hidden"
809
+ } }, /* @__PURE__ */ React18.createElement("div", { style: {
810
+ position: "absolute",
811
+ top: 0,
812
+ left: 0,
813
+ right: 0,
814
+ height: "3px",
815
+ background: `linear-gradient(90deg, ${accent}, ${alpha(accent, 0.3)})`
816
+ } }), /* @__PURE__ */ React18.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", marginBottom: "16px" } }, /* @__PURE__ */ React18.createElement("div", { style: {
817
+ width: 72,
818
+ height: 72,
819
+ borderRadius: "50%",
820
+ background: avatar ? `url(${avatar}) center/cover` : `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.5)})`,
821
+ display: "flex",
822
+ alignItems: "center",
823
+ justifyContent: "center",
824
+ fontSize: "24px",
825
+ fontWeight: "800",
826
+ color: "#fff",
827
+ border: `3px solid ${alpha(accent, 0.4)}`,
828
+ marginBottom: "12px"
829
+ } }, !avatar && initials), /* @__PURE__ */ React18.createElement("div", { style: { fontSize: "16px", fontWeight: "700", marginBottom: "3px" } }, name), /* @__PURE__ */ React18.createElement("div", { style: {
830
+ fontSize: "12px",
831
+ fontWeight: "600",
832
+ color: accent,
833
+ background: alpha(accent, 0.12),
834
+ padding: "2px 10px",
835
+ borderRadius: "20px",
836
+ border: `1px solid ${alpha(accent, 0.3)}`
837
+ } }, role)), /* @__PURE__ */ React18.createElement("p", { style: {
838
+ fontSize: "12px",
839
+ color: "rgba(255,255,255,0.45)",
840
+ textAlign: "center",
841
+ lineHeight: 1.6,
842
+ marginBottom: "18px",
843
+ padding: "0 4px"
844
+ } }, bio), /* @__PURE__ */ React18.createElement("div", { style: {
845
+ display: "flex",
846
+ justifyContent: "space-around",
847
+ background: "rgba(255,255,255,0.04)",
848
+ border: "1px solid rgba(255,255,255,0.07)",
849
+ borderRadius: "12px",
850
+ padding: "12px 8px",
851
+ marginBottom: "16px"
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
+ };
770
854
  export {
771
855
  Avatar,
856
+ AvatarCard,
772
857
  CodeBlock,
773
858
  CustomInputField,
774
859
  DividerLine,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "virtual-ui-lib",
3
- "version": "1.0.56",
3
+ "version": "1.0.57",
4
4
  "description": "Virtual UI React Component Library",
5
5
  "author": "Ankush",
6
6
  "license": "ISC",