virtual-ui-lib 1.0.29 → 1.0.31

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 +89 -0
  2. package/dist/index.mjs +87 -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
  AlertBanner: () => AlertBanner,
33
+ AnimatedProgressBar: () => AnimatedProgressBar,
33
34
  Button: () => Button,
34
35
  Card: () => Card,
35
36
  CopyButton: () => CopyButton,
@@ -40,6 +41,7 @@ __export(index_exports, {
40
41
  GridLayout: () => GridLayout,
41
42
  ImageUploadPreview: () => ImageUploadPreview,
42
43
  Loader: () => Loader,
44
+ MultiStepProgress: () => MultiStepProgress,
43
45
  Navbar: () => Navbar,
44
46
  OTPInput: () => OTPInput,
45
47
  RatingStars: () => RatingStars,
@@ -875,9 +877,95 @@ var Footer = ({
875
877
  }) => {
876
878
  return /* @__PURE__ */ import_react16.default.createElement("footer", { style: { background: bg, color: textColor, padding: "20px 40px", fontFamily: "system-ui, sans-serif" } }, /* @__PURE__ */ import_react16.default.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ import_react16.default.createElement("h2", { style: { margin: "0 0 10px", fontSize: "24px", fontWeight: "700" } }, brandTitle), /* @__PURE__ */ import_react16.default.createElement("p", { style: { margin: "0 0 20px", fontSize: "14px", textAlign: "center" } }, description), /* @__PURE__ */ import_react16.default.createElement("nav", { style: { display: "flex", justifyContent: "center", gap: "20px", marginBottom: "20px" } }, links.map((link) => /* @__PURE__ */ import_react16.default.createElement("a", { key: link.text, href: link.url, style: { color: textColor, textDecoration: "none", fontSize: "16px", transition: "color 0.3s" }, onMouseOver: (e) => e.currentTarget.style.color = "#7c3aed", onMouseOut: (e) => e.currentTarget.style.color = textColor }, link.text))), /* @__PURE__ */ import_react16.default.createElement("div", { style: { display: "flex", gap: "20px" } }, socialLinks.map((social) => /* @__PURE__ */ import_react16.default.createElement("a", { key: social.url, href: social.url, style: { color: textColor, fontSize: "24px", textDecoration: "none", transition: "color 0.3s" }, onMouseOver: (e) => e.currentTarget.style.color = "#7c3aed", onMouseOut: (e) => e.currentTarget.style.color = textColor }, social.icon)))), /* @__PURE__ */ import_react16.default.createElement("div", { style: { marginTop: "20px", fontSize: "12px", textAlign: "center", color: "#94a3b8" } }, "\xA9 ", (/* @__PURE__ */ new Date()).getFullYear(), " ", brandTitle, ". All rights reserved."));
877
879
  };
880
+
881
+ // src/components/AnimatedProgressBar/AnimatedProgressBar.jsx
882
+ var import_react17 = __toESM(require("react"));
883
+ var AnimatedProgressBar = ({
884
+ percentage = 75,
885
+ bgColor = "linear-gradient(135deg, #2563eb, #7c3aed)",
886
+ height = "24px",
887
+ borderRadius = "12px",
888
+ textColor = "#ffffff",
889
+ fontSize = "14px"
890
+ }) => {
891
+ return /* @__PURE__ */ import_react17.default.createElement("div", { style: { width: "100%", background: "#e5e7eb", borderRadius, overflow: "hidden", position: "relative" } }, /* @__PURE__ */ import_react17.default.createElement("div", { style: {
892
+ width: percentage + "%",
893
+ height,
894
+ background: bgColor,
895
+ borderRadius,
896
+ transition: "width 0.5s ease-in-out"
897
+ } }), /* @__PURE__ */ import_react17.default.createElement("span", { style: {
898
+ position: "absolute",
899
+ top: "50%",
900
+ left: "50%",
901
+ transform: "translate(-50%, -50%)",
902
+ color: textColor,
903
+ fontSize,
904
+ fontWeight: "600"
905
+ } }, percentage, "%"));
906
+ };
907
+
908
+ // src/components/MultiStepProgress/MultiStepProgress.jsx
909
+ var import_react18 = __toESM(require("react"));
910
+ var MultiStepProgress = ({
911
+ steps = ["Step 1", "Step 2", "Step 3"],
912
+ activeStep = 0,
913
+ onStepChange
914
+ }) => {
915
+ const [currentStep, setCurrentStep] = (0, import_react18.useState)(activeStep);
916
+ const handleNext = () => {
917
+ if (currentStep < steps.length - 1) {
918
+ setCurrentStep((prev) => prev + 1);
919
+ if (onStepChange) onStepChange(currentStep + 1);
920
+ }
921
+ };
922
+ const handlePrevious = () => {
923
+ if (currentStep > 0) {
924
+ setCurrentStep((prev) => prev - 1);
925
+ if (onStepChange) onStepChange(currentStep - 1);
926
+ }
927
+ };
928
+ return /* @__PURE__ */ import_react18.default.createElement("div", { style: { fontFamily: "system-ui, sans-serif", width: "100%", maxWidth: "700px", margin: "0 auto" } }, /* @__PURE__ */ import_react18.default.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" } }, steps.map((step, index) => /* @__PURE__ */ import_react18.default.createElement("div", { key: index, style: { flex: 1, textAlign: "center" } }, /* @__PURE__ */ import_react18.default.createElement("div", { style: {
929
+ width: "40px",
930
+ height: "40px",
931
+ margin: "0 auto",
932
+ borderRadius: "50%",
933
+ background: index < currentStep ? "#059669" : index === currentStep ? "#2563eb" : "#cbd5e1",
934
+ color: index <= currentStep ? "white" : "#0f172a",
935
+ display: "flex",
936
+ alignItems: "center",
937
+ justifyContent: "center",
938
+ fontWeight: "bold"
939
+ } }, index + 1), /* @__PURE__ */ import_react18.default.createElement("p", { style: { color: index <= currentStep ? "#f1f5f9" : "#64748b", marginTop: "8px", fontSize: "14px" } }, step)))), /* @__PURE__ */ import_react18.default.createElement("div", { style: { display: "flex", position: "relative", height: "4px", background: "#cbd5e1", borderRadius: "2px" } }, /* @__PURE__ */ import_react18.default.createElement(
940
+ "div",
941
+ {
942
+ style: {
943
+ height: "100%",
944
+ width: currentStep / (steps.length - 1) * 100 + "%",
945
+ background: "#2563eb",
946
+ borderRadius: "2px"
947
+ }
948
+ }
949
+ )), /* @__PURE__ */ import_react18.default.createElement("div", { style: { display: "flex", justifyContent: "space-between", marginTop: "24px" } }, /* @__PURE__ */ import_react18.default.createElement("button", { onClick: handlePrevious, disabled: currentStep === 0, style: {
950
+ padding: "10px 20px",
951
+ borderRadius: "8px",
952
+ background: currentStep === 0 ? "#cbd5e1" : "#7c3aed",
953
+ color: "white",
954
+ border: "none",
955
+ cursor: currentStep === 0 ? "not-allowed" : "pointer"
956
+ } }, "Previous"), /* @__PURE__ */ import_react18.default.createElement("button", { onClick: handleNext, disabled: currentStep === steps.length - 1, style: {
957
+ padding: "10px 20px",
958
+ borderRadius: "8px",
959
+ background: currentStep === steps.length - 1 ? "#cbd5e1" : "#7c3aed",
960
+ color: "white",
961
+ border: "none",
962
+ cursor: currentStep === steps.length - 1 ? "not-allowed" : "pointer"
963
+ } }, "Next")));
964
+ };
878
965
  // Annotate the CommonJS export names for ESM import in node:
879
966
  0 && (module.exports = {
880
967
  AlertBanner,
968
+ AnimatedProgressBar,
881
969
  Button,
882
970
  Card,
883
971
  CopyButton,
@@ -888,6 +976,7 @@ var Footer = ({
888
976
  GridLayout,
889
977
  ImageUploadPreview,
890
978
  Loader,
979
+ MultiStepProgress,
891
980
  Navbar,
892
981
  OTPInput,
893
982
  RatingStars,
package/dist/index.mjs CHANGED
@@ -825,8 +825,94 @@ var Footer = ({
825
825
  }) => {
826
826
  return /* @__PURE__ */ React16.createElement("footer", { style: { background: bg, color: textColor, padding: "20px 40px", fontFamily: "system-ui, sans-serif" } }, /* @__PURE__ */ React16.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ React16.createElement("h2", { style: { margin: "0 0 10px", fontSize: "24px", fontWeight: "700" } }, brandTitle), /* @__PURE__ */ React16.createElement("p", { style: { margin: "0 0 20px", fontSize: "14px", textAlign: "center" } }, description), /* @__PURE__ */ React16.createElement("nav", { style: { display: "flex", justifyContent: "center", gap: "20px", marginBottom: "20px" } }, links.map((link) => /* @__PURE__ */ React16.createElement("a", { key: link.text, href: link.url, style: { color: textColor, textDecoration: "none", fontSize: "16px", transition: "color 0.3s" }, onMouseOver: (e) => e.currentTarget.style.color = "#7c3aed", onMouseOut: (e) => e.currentTarget.style.color = textColor }, link.text))), /* @__PURE__ */ React16.createElement("div", { style: { display: "flex", gap: "20px" } }, socialLinks.map((social) => /* @__PURE__ */ React16.createElement("a", { key: social.url, href: social.url, style: { color: textColor, fontSize: "24px", textDecoration: "none", transition: "color 0.3s" }, onMouseOver: (e) => e.currentTarget.style.color = "#7c3aed", onMouseOut: (e) => e.currentTarget.style.color = textColor }, social.icon)))), /* @__PURE__ */ React16.createElement("div", { style: { marginTop: "20px", fontSize: "12px", textAlign: "center", color: "#94a3b8" } }, "\xA9 ", (/* @__PURE__ */ new Date()).getFullYear(), " ", brandTitle, ". All rights reserved."));
827
827
  };
828
+
829
+ // src/components/AnimatedProgressBar/AnimatedProgressBar.jsx
830
+ import React17 from "react";
831
+ var AnimatedProgressBar = ({
832
+ percentage = 75,
833
+ bgColor = "linear-gradient(135deg, #2563eb, #7c3aed)",
834
+ height = "24px",
835
+ borderRadius = "12px",
836
+ textColor = "#ffffff",
837
+ fontSize = "14px"
838
+ }) => {
839
+ return /* @__PURE__ */ React17.createElement("div", { style: { width: "100%", background: "#e5e7eb", borderRadius, overflow: "hidden", position: "relative" } }, /* @__PURE__ */ React17.createElement("div", { style: {
840
+ width: percentage + "%",
841
+ height,
842
+ background: bgColor,
843
+ borderRadius,
844
+ transition: "width 0.5s ease-in-out"
845
+ } }), /* @__PURE__ */ React17.createElement("span", { style: {
846
+ position: "absolute",
847
+ top: "50%",
848
+ left: "50%",
849
+ transform: "translate(-50%, -50%)",
850
+ color: textColor,
851
+ fontSize,
852
+ fontWeight: "600"
853
+ } }, percentage, "%"));
854
+ };
855
+
856
+ // src/components/MultiStepProgress/MultiStepProgress.jsx
857
+ import React18, { useState as useState12 } from "react";
858
+ var MultiStepProgress = ({
859
+ steps = ["Step 1", "Step 2", "Step 3"],
860
+ activeStep = 0,
861
+ onStepChange
862
+ }) => {
863
+ const [currentStep, setCurrentStep] = useState12(activeStep);
864
+ const handleNext = () => {
865
+ if (currentStep < steps.length - 1) {
866
+ setCurrentStep((prev) => prev + 1);
867
+ if (onStepChange) onStepChange(currentStep + 1);
868
+ }
869
+ };
870
+ const handlePrevious = () => {
871
+ if (currentStep > 0) {
872
+ setCurrentStep((prev) => prev - 1);
873
+ if (onStepChange) onStepChange(currentStep - 1);
874
+ }
875
+ };
876
+ return /* @__PURE__ */ React18.createElement("div", { style: { fontFamily: "system-ui, sans-serif", width: "100%", maxWidth: "700px", margin: "0 auto" } }, /* @__PURE__ */ React18.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" } }, steps.map((step, index) => /* @__PURE__ */ React18.createElement("div", { key: index, style: { flex: 1, textAlign: "center" } }, /* @__PURE__ */ React18.createElement("div", { style: {
877
+ width: "40px",
878
+ height: "40px",
879
+ margin: "0 auto",
880
+ borderRadius: "50%",
881
+ background: index < currentStep ? "#059669" : index === currentStep ? "#2563eb" : "#cbd5e1",
882
+ color: index <= currentStep ? "white" : "#0f172a",
883
+ display: "flex",
884
+ alignItems: "center",
885
+ justifyContent: "center",
886
+ fontWeight: "bold"
887
+ } }, index + 1), /* @__PURE__ */ React18.createElement("p", { style: { color: index <= currentStep ? "#f1f5f9" : "#64748b", marginTop: "8px", fontSize: "14px" } }, step)))), /* @__PURE__ */ React18.createElement("div", { style: { display: "flex", position: "relative", height: "4px", background: "#cbd5e1", borderRadius: "2px" } }, /* @__PURE__ */ React18.createElement(
888
+ "div",
889
+ {
890
+ style: {
891
+ height: "100%",
892
+ width: currentStep / (steps.length - 1) * 100 + "%",
893
+ background: "#2563eb",
894
+ borderRadius: "2px"
895
+ }
896
+ }
897
+ )), /* @__PURE__ */ React18.createElement("div", { style: { display: "flex", justifyContent: "space-between", marginTop: "24px" } }, /* @__PURE__ */ React18.createElement("button", { onClick: handlePrevious, disabled: currentStep === 0, style: {
898
+ padding: "10px 20px",
899
+ borderRadius: "8px",
900
+ background: currentStep === 0 ? "#cbd5e1" : "#7c3aed",
901
+ color: "white",
902
+ border: "none",
903
+ cursor: currentStep === 0 ? "not-allowed" : "pointer"
904
+ } }, "Previous"), /* @__PURE__ */ React18.createElement("button", { onClick: handleNext, disabled: currentStep === steps.length - 1, style: {
905
+ padding: "10px 20px",
906
+ borderRadius: "8px",
907
+ background: currentStep === steps.length - 1 ? "#cbd5e1" : "#7c3aed",
908
+ color: "white",
909
+ border: "none",
910
+ cursor: currentStep === steps.length - 1 ? "not-allowed" : "pointer"
911
+ } }, "Next")));
912
+ };
828
913
  export {
829
914
  AlertBanner,
915
+ AnimatedProgressBar,
830
916
  Button,
831
917
  Card,
832
918
  CopyButton,
@@ -837,6 +923,7 @@ export {
837
923
  GridLayout,
838
924
  ImageUploadPreview,
839
925
  Loader,
926
+ MultiStepProgress,
840
927
  Navbar,
841
928
  OTPInput,
842
929
  RatingStars,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "virtual-ui-lib",
3
- "version": "1.0.29",
3
+ "version": "1.0.31",
4
4
  "description": "Virtual UI React Component Library",
5
5
  "author": "Ankush",
6
6
  "license": "ISC",