virtual-ui-lib 1.0.30 → 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 +60 -0
  2. package/dist/index.mjs +59 -0
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -41,6 +41,7 @@ __export(index_exports, {
41
41
  GridLayout: () => GridLayout,
42
42
  ImageUploadPreview: () => ImageUploadPreview,
43
43
  Loader: () => Loader,
44
+ MultiStepProgress: () => MultiStepProgress,
44
45
  Navbar: () => Navbar,
45
46
  OTPInput: () => OTPInput,
46
47
  RatingStars: () => RatingStars,
@@ -903,6 +904,64 @@ var AnimatedProgressBar = ({
903
904
  fontWeight: "600"
904
905
  } }, percentage, "%"));
905
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
+ };
906
965
  // Annotate the CommonJS export names for ESM import in node:
907
966
  0 && (module.exports = {
908
967
  AlertBanner,
@@ -917,6 +976,7 @@ var AnimatedProgressBar = ({
917
976
  GridLayout,
918
977
  ImageUploadPreview,
919
978
  Loader,
979
+ MultiStepProgress,
920
980
  Navbar,
921
981
  OTPInput,
922
982
  RatingStars,
package/dist/index.mjs CHANGED
@@ -852,6 +852,64 @@ var AnimatedProgressBar = ({
852
852
  fontWeight: "600"
853
853
  } }, percentage, "%"));
854
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
+ };
855
913
  export {
856
914
  AlertBanner,
857
915
  AnimatedProgressBar,
@@ -865,6 +923,7 @@ export {
865
923
  GridLayout,
866
924
  ImageUploadPreview,
867
925
  Loader,
926
+ MultiStepProgress,
868
927
  Navbar,
869
928
  OTPInput,
870
929
  RatingStars,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "virtual-ui-lib",
3
- "version": "1.0.30",
3
+ "version": "1.0.31",
4
4
  "description": "Virtual UI React Component Library",
5
5
  "author": "Ankush",
6
6
  "license": "ISC",