virtual-ui-lib 1.0.77 → 1.0.78

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 -0
  2. package/dist/index.mjs +76 -0
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -32,6 +32,7 @@ __export(index_exports, {
32
32
  AnimatedForm: () => AnimatedForm,
33
33
  AvatarCard: () => AvatarCard,
34
34
  BackgoundImageSlider: () => BackgoundImageSlider,
35
+ Card: () => Card,
35
36
  Charts: () => Charts,
36
37
  ColorPicker: () => ColorPicker,
37
38
  EcommerceCard: () => EcommerceCard,
@@ -3781,11 +3782,87 @@ var ReviewCard = ({
3781
3782
  };
3782
3783
  return /* @__PURE__ */ import_react22.default.createElement("div", { style: { background: bg, borderRadius: "16px", padding: "16px", width: "320px", fontFamily: "system-ui,sans-serif", border: "1px solid rgba(255,255,255,0.08)", boxShadow: "0 4px 16px rgba(0,0,0,0.3)" } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "12px" } }, /* @__PURE__ */ import_react22.default.createElement("img", { src: avatar, alt: name, onClick: onProfileClick, style: { width: "40px", height: "40px", borderRadius: "50%", cursor: "pointer" } }), /* @__PURE__ */ import_react22.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "2px" } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: { fontSize: "14px", fontWeight: "700", color: "#fff" } }, name), /* @__PURE__ */ import_react22.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "4px" } }, Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ import_react22.default.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: i < rating ? accent : "rgba(255,255,255,0.15)", stroke: "none" }, /* @__PURE__ */ import_react22.default.createElement("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" })))))), /* @__PURE__ */ import_react22.default.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.7)", lineHeight: 1.5, marginBottom: "12px" } }, review), /* @__PURE__ */ import_react22.default.createElement("div", { style: { fontSize: "11px", color: "rgba(255,255,255,0.4)" } }, date));
3783
3784
  };
3785
+
3786
+ // src/components/Card/Card.jsx
3787
+ var import_react23 = __toESM(require("react"));
3788
+ var Card = ({
3789
+ title = "Performance",
3790
+ description = "Real-time metrics with live dashboard updates every second.",
3791
+ icon = "\u26A1",
3792
+ tag = "Active",
3793
+ onClick
3794
+ }) => {
3795
+ const [hovered, setHovered] = (0, import_react23.useState)(false);
3796
+ return /* @__PURE__ */ import_react23.default.createElement(
3797
+ "div",
3798
+ {
3799
+ onMouseEnter: () => setHovered(true),
3800
+ onMouseLeave: () => setHovered(false),
3801
+ onClick,
3802
+ style: {
3803
+ background: "#ffffff",
3804
+ border: `0.5px solid ${hovered ? "#00000033" : "#0000001a"}`,
3805
+ borderRadius: "12px",
3806
+ padding: "1.25rem",
3807
+ transition: "border-color 0.2s, transform 0.2s",
3808
+ transform: hovered ? "translateY(-2px)" : "translateY(0)",
3809
+ cursor: onClick ? "pointer" : "default",
3810
+ position: "relative",
3811
+ overflow: "hidden",
3812
+ fontFamily: "sans-serif",
3813
+ width: "260px"
3814
+ }
3815
+ },
3816
+ /* @__PURE__ */ import_react23.default.createElement("div", { style: {
3817
+ position: "absolute",
3818
+ top: 0,
3819
+ left: 0,
3820
+ right: 0,
3821
+ height: "3px",
3822
+ background: "#1D9E75",
3823
+ borderRadius: "12px 12px 0 0"
3824
+ } }),
3825
+ /* @__PURE__ */ import_react23.default.createElement("div", { style: {
3826
+ width: 40,
3827
+ height: 40,
3828
+ borderRadius: 8,
3829
+ background: "#E1F5EE",
3830
+ display: "flex",
3831
+ alignItems: "center",
3832
+ justifyContent: "center",
3833
+ fontSize: 18,
3834
+ marginBottom: 14
3835
+ } }, icon),
3836
+ /* @__PURE__ */ import_react23.default.createElement("p", { style: { fontSize: 15, fontWeight: 700, color: "#111", margin: "0 0 6px" } }, title),
3837
+ /* @__PURE__ */ import_react23.default.createElement("p", { style: { fontSize: 13, color: "#666", lineHeight: 1.6, margin: "0 0 16px" } }, description),
3838
+ /* @__PURE__ */ import_react23.default.createElement("div", { style: {
3839
+ display: "flex",
3840
+ alignItems: "center",
3841
+ justifyContent: "space-between",
3842
+ borderTop: "0.5px solid #0000001a",
3843
+ paddingTop: 12
3844
+ } }, /* @__PURE__ */ import_react23.default.createElement("span", { style: {
3845
+ fontSize: 11,
3846
+ fontWeight: 500,
3847
+ padding: "3px 9px",
3848
+ borderRadius: 20,
3849
+ background: "#E1F5EE",
3850
+ color: "#0F6E56"
3851
+ } }, tag), /* @__PURE__ */ import_react23.default.createElement("span", { style: {
3852
+ fontSize: 14,
3853
+ color: "#999",
3854
+ display: "inline-block",
3855
+ transition: "transform 0.2s",
3856
+ transform: hovered ? "translateX(3px)" : "translateX(0)"
3857
+ } }, "\u2192"))
3858
+ );
3859
+ };
3784
3860
  // Annotate the CommonJS export names for ESM import in node:
3785
3861
  0 && (module.exports = {
3786
3862
  AnimatedForm,
3787
3863
  AvatarCard,
3788
3864
  BackgoundImageSlider,
3865
+ Card,
3789
3866
  Charts,
3790
3867
  ColorPicker,
3791
3868
  EcommerceCard,
package/dist/index.mjs CHANGED
@@ -3725,10 +3725,86 @@ var ReviewCard = ({
3725
3725
  };
3726
3726
  return /* @__PURE__ */ React22.createElement("div", { style: { background: bg, borderRadius: "16px", padding: "16px", width: "320px", fontFamily: "system-ui,sans-serif", border: "1px solid rgba(255,255,255,0.08)", boxShadow: "0 4px 16px rgba(0,0,0,0.3)" } }, /* @__PURE__ */ React22.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "12px" } }, /* @__PURE__ */ React22.createElement("img", { src: avatar, alt: name, onClick: onProfileClick, style: { width: "40px", height: "40px", borderRadius: "50%", cursor: "pointer" } }), /* @__PURE__ */ React22.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "2px" } }, /* @__PURE__ */ React22.createElement("div", { style: { fontSize: "14px", fontWeight: "700", color: "#fff" } }, name), /* @__PURE__ */ React22.createElement("div", { style: { display: "flex", alignItems: "center", gap: "4px" } }, Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ React22.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: i < rating ? accent : "rgba(255,255,255,0.15)", stroke: "none" }, /* @__PURE__ */ React22.createElement("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" })))))), /* @__PURE__ */ React22.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.7)", lineHeight: 1.5, marginBottom: "12px" } }, review), /* @__PURE__ */ React22.createElement("div", { style: { fontSize: "11px", color: "rgba(255,255,255,0.4)" } }, date));
3727
3727
  };
3728
+
3729
+ // src/components/Card/Card.jsx
3730
+ import React23, { useState as useState20 } from "react";
3731
+ var Card = ({
3732
+ title = "Performance",
3733
+ description = "Real-time metrics with live dashboard updates every second.",
3734
+ icon = "\u26A1",
3735
+ tag = "Active",
3736
+ onClick
3737
+ }) => {
3738
+ const [hovered, setHovered] = useState20(false);
3739
+ return /* @__PURE__ */ React23.createElement(
3740
+ "div",
3741
+ {
3742
+ onMouseEnter: () => setHovered(true),
3743
+ onMouseLeave: () => setHovered(false),
3744
+ onClick,
3745
+ style: {
3746
+ background: "#ffffff",
3747
+ border: `0.5px solid ${hovered ? "#00000033" : "#0000001a"}`,
3748
+ borderRadius: "12px",
3749
+ padding: "1.25rem",
3750
+ transition: "border-color 0.2s, transform 0.2s",
3751
+ transform: hovered ? "translateY(-2px)" : "translateY(0)",
3752
+ cursor: onClick ? "pointer" : "default",
3753
+ position: "relative",
3754
+ overflow: "hidden",
3755
+ fontFamily: "sans-serif",
3756
+ width: "260px"
3757
+ }
3758
+ },
3759
+ /* @__PURE__ */ React23.createElement("div", { style: {
3760
+ position: "absolute",
3761
+ top: 0,
3762
+ left: 0,
3763
+ right: 0,
3764
+ height: "3px",
3765
+ background: "#1D9E75",
3766
+ borderRadius: "12px 12px 0 0"
3767
+ } }),
3768
+ /* @__PURE__ */ React23.createElement("div", { style: {
3769
+ width: 40,
3770
+ height: 40,
3771
+ borderRadius: 8,
3772
+ background: "#E1F5EE",
3773
+ display: "flex",
3774
+ alignItems: "center",
3775
+ justifyContent: "center",
3776
+ fontSize: 18,
3777
+ marginBottom: 14
3778
+ } }, icon),
3779
+ /* @__PURE__ */ React23.createElement("p", { style: { fontSize: 15, fontWeight: 700, color: "#111", margin: "0 0 6px" } }, title),
3780
+ /* @__PURE__ */ React23.createElement("p", { style: { fontSize: 13, color: "#666", lineHeight: 1.6, margin: "0 0 16px" } }, description),
3781
+ /* @__PURE__ */ React23.createElement("div", { style: {
3782
+ display: "flex",
3783
+ alignItems: "center",
3784
+ justifyContent: "space-between",
3785
+ borderTop: "0.5px solid #0000001a",
3786
+ paddingTop: 12
3787
+ } }, /* @__PURE__ */ React23.createElement("span", { style: {
3788
+ fontSize: 11,
3789
+ fontWeight: 500,
3790
+ padding: "3px 9px",
3791
+ borderRadius: 20,
3792
+ background: "#E1F5EE",
3793
+ color: "#0F6E56"
3794
+ } }, tag), /* @__PURE__ */ React23.createElement("span", { style: {
3795
+ fontSize: 14,
3796
+ color: "#999",
3797
+ display: "inline-block",
3798
+ transition: "transform 0.2s",
3799
+ transform: hovered ? "translateX(3px)" : "translateX(0)"
3800
+ } }, "\u2192"))
3801
+ );
3802
+ };
3728
3803
  export {
3729
3804
  AnimatedForm,
3730
3805
  AvatarCard,
3731
3806
  BackgoundImageSlider,
3807
+ Card,
3732
3808
  Charts,
3733
3809
  ColorPicker,
3734
3810
  EcommerceCard,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "virtual-ui-lib",
3
- "version": "1.0.77",
3
+ "version": "1.0.78",
4
4
  "description": "Virtual UI React Component Library",
5
5
  "author": "Ankush",
6
6
  "license": "ISC",