virtual-ui-lib 1.0.30 → 1.0.32

package/dist/index.js

@@ -34,6 +34,7 @@ __export(index_exports, {
   Button: () => Button,
   Card: () => Card,
   CopyButton: () => CopyButton,
+  DateRangePicker: () => DateRangePicker,
   Dropdown: () => Dropdown,
   EmptyState: () => EmptyState,
   Footer: () => Footer,
@@ -41,6 +42,7 @@ __export(index_exports, {
   GridLayout: () => GridLayout,
   ImageUploadPreview: () => ImageUploadPreview,
   Loader: () => Loader,
+  MultiStepProgress: () => MultiStepProgress,
   Navbar: () => Navbar,
   OTPInput: () => OTPInput,
   RatingStars: () => RatingStars,
@@ -903,6 +905,100 @@ var AnimatedProgressBar = ({
     fontWeight: "600"
   } }, percentage, "%"));
 };
+
+// src/components/MultiStepProgress/MultiStepProgress.jsx
+var import_react18 = __toESM(require("react"));
+var MultiStepProgress = ({
+  steps = ["Step 1", "Step 2", "Step 3"],
+  activeStep = 0,
+  onStepChange
+}) => {
+  const [currentStep, setCurrentStep] = (0, import_react18.useState)(activeStep);
+  const handleNext = () => {
+    if (currentStep < steps.length - 1) {
+      setCurrentStep((prev) => prev + 1);
+      if (onStepChange) onStepChange(currentStep + 1);
+    }
+  };
+  const handlePrevious = () => {
+    if (currentStep > 0) {
+      setCurrentStep((prev) => prev - 1);
+      if (onStepChange) onStepChange(currentStep - 1);
+    }
+  };
+  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: {
+    width: "40px",
+    height: "40px",
+    margin: "0 auto",
+    borderRadius: "50%",
+    background: index < currentStep ? "#059669" : index === currentStep ? "#2563eb" : "#cbd5e1",
+    color: index <= currentStep ? "white" : "#0f172a",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontWeight: "bold"
+  } }, 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(
+    "div",
+    {
+      style: {
+        height: "100%",
+        width: currentStep / (steps.length - 1) * 100 + "%",
+        background: "#2563eb",
+        borderRadius: "2px"
+      }
+    }
+  )), /* @__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: {
+    padding: "10px 20px",
+    borderRadius: "8px",
+    background: currentStep === 0 ? "#cbd5e1" : "#7c3aed",
+    color: "white",
+    border: "none",
+    cursor: currentStep === 0 ? "not-allowed" : "pointer"
+  } }, "Previous"), /* @__PURE__ */ import_react18.default.createElement("button", { onClick: handleNext, disabled: currentStep === steps.length - 1, style: {
+    padding: "10px 20px",
+    borderRadius: "8px",
+    background: currentStep === steps.length - 1 ? "#cbd5e1" : "#7c3aed",
+    color: "white",
+    border: "none",
+    cursor: currentStep === steps.length - 1 ? "not-allowed" : "pointer"
+  } }, "Next")));
+};
+
+// src/components/DateRangePicker/DateRangePicker.jsx
+var import_react19 = __toESM(require("react"));
+var DateRangePicker = ({
+  startDate = /* @__PURE__ */ new Date(),
+  endDate = new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() + 7)),
+  onChange,
+  bg = "#0f172a",
+  highlightColor = "#2563eb",
+  borderColor = "#7c3aed",
+  borderRadius = "12px",
+  textColor = "#f1f5f9"
+}) => {
+  const [selectedStart, setSelectedStart] = (0, import_react19.useState)(startDate);
+  const [selectedEnd, setSelectedEnd] = (0, import_react19.useState)(endDate);
+  const daysArray = Array.from({ length: 30 }, (_, i) => new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() + i)));
+  const handleSelect = (date) => {
+    if (!selectedStart || selectedEnd && date < selectedStart) {
+      setSelectedStart(date);
+      setSelectedEnd(null);
+    } else {
+      setSelectedEnd(date);
+    }
+    onChange && onChange(selectedStart, selectedEnd);
+  };
+  return /* @__PURE__ */ import_react19.default.createElement("div", { style: { display: "flex", flexDirection: "column", background: bg, padding: "16px", borderRadius, border: `1px solid ${borderColor}`, boxShadow: "0 4px 20px rgba(0, 0, 0, 0.2)", fontFamily: "system-ui, sans-serif" } }, /* @__PURE__ */ import_react19.default.createElement("h3", { style: { color: textColor, margin: "0 0 12px", fontSize: "16px", fontWeight: "600" } }, "Select Date Range"), /* @__PURE__ */ import_react19.default.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: "8px" } }, daysArray.map((date, index) => /* @__PURE__ */ import_react19.default.createElement("button", { key: index, onClick: () => handleSelect(date), style: {
+    background: date >= selectedStart && date <= selectedEnd ? highlightColor : "#334155",
+    color: textColor,
+    padding: "10px 0",
+    borderRadius,
+    border: "none",
+    cursor: "pointer",
+    transition: "background 0.3s",
+    fontSize: "14px"
+  } }, date.getDate()))));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AlertBanner,
@@ -910,6 +1006,7 @@ var AnimatedProgressBar = ({
   Button,
   Card,
   CopyButton,
+  DateRangePicker,
   Dropdown,
   EmptyState,
   Footer,
@@ -917,6 +1014,7 @@ var AnimatedProgressBar = ({
   GridLayout,
   ImageUploadPreview,
   Loader,
+  MultiStepProgress,
   Navbar,
   OTPInput,
   RatingStars,

package/dist/index.mjs

@@ -852,12 +852,107 @@ var AnimatedProgressBar = ({
     fontWeight: "600"
   } }, percentage, "%"));
 };
+
+// src/components/MultiStepProgress/MultiStepProgress.jsx
+import React18, { useState as useState12 } from "react";
+var MultiStepProgress = ({
+  steps = ["Step 1", "Step 2", "Step 3"],
+  activeStep = 0,
+  onStepChange
+}) => {
+  const [currentStep, setCurrentStep] = useState12(activeStep);
+  const handleNext = () => {
+    if (currentStep < steps.length - 1) {
+      setCurrentStep((prev) => prev + 1);
+      if (onStepChange) onStepChange(currentStep + 1);
+    }
+  };
+  const handlePrevious = () => {
+    if (currentStep > 0) {
+      setCurrentStep((prev) => prev - 1);
+      if (onStepChange) onStepChange(currentStep - 1);
+    }
+  };
+  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: {
+    width: "40px",
+    height: "40px",
+    margin: "0 auto",
+    borderRadius: "50%",
+    background: index < currentStep ? "#059669" : index === currentStep ? "#2563eb" : "#cbd5e1",
+    color: index <= currentStep ? "white" : "#0f172a",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontWeight: "bold"
+  } }, 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(
+    "div",
+    {
+      style: {
+        height: "100%",
+        width: currentStep / (steps.length - 1) * 100 + "%",
+        background: "#2563eb",
+        borderRadius: "2px"
+      }
+    }
+  )), /* @__PURE__ */ React18.createElement("div", { style: { display: "flex", justifyContent: "space-between", marginTop: "24px" } }, /* @__PURE__ */ React18.createElement("button", { onClick: handlePrevious, disabled: currentStep === 0, style: {
+    padding: "10px 20px",
+    borderRadius: "8px",
+    background: currentStep === 0 ? "#cbd5e1" : "#7c3aed",
+    color: "white",
+    border: "none",
+    cursor: currentStep === 0 ? "not-allowed" : "pointer"
+  } }, "Previous"), /* @__PURE__ */ React18.createElement("button", { onClick: handleNext, disabled: currentStep === steps.length - 1, style: {
+    padding: "10px 20px",
+    borderRadius: "8px",
+    background: currentStep === steps.length - 1 ? "#cbd5e1" : "#7c3aed",
+    color: "white",
+    border: "none",
+    cursor: currentStep === steps.length - 1 ? "not-allowed" : "pointer"
+  } }, "Next")));
+};
+
+// src/components/DateRangePicker/DateRangePicker.jsx
+import React19, { useState as useState13 } from "react";
+var DateRangePicker = ({
+  startDate = /* @__PURE__ */ new Date(),
+  endDate = new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() + 7)),
+  onChange,
+  bg = "#0f172a",
+  highlightColor = "#2563eb",
+  borderColor = "#7c3aed",
+  borderRadius = "12px",
+  textColor = "#f1f5f9"
+}) => {
+  const [selectedStart, setSelectedStart] = useState13(startDate);
+  const [selectedEnd, setSelectedEnd] = useState13(endDate);
+  const daysArray = Array.from({ length: 30 }, (_, i) => new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() + i)));
+  const handleSelect = (date) => {
+    if (!selectedStart || selectedEnd && date < selectedStart) {
+      setSelectedStart(date);
+      setSelectedEnd(null);
+    } else {
+      setSelectedEnd(date);
+    }
+    onChange && onChange(selectedStart, selectedEnd);
+  };
+  return /* @__PURE__ */ React19.createElement("div", { style: { display: "flex", flexDirection: "column", background: bg, padding: "16px", borderRadius, border: `1px solid ${borderColor}`, boxShadow: "0 4px 20px rgba(0, 0, 0, 0.2)", fontFamily: "system-ui, sans-serif" } }, /* @__PURE__ */ React19.createElement("h3", { style: { color: textColor, margin: "0 0 12px", fontSize: "16px", fontWeight: "600" } }, "Select Date Range"), /* @__PURE__ */ React19.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: "8px" } }, daysArray.map((date, index) => /* @__PURE__ */ React19.createElement("button", { key: index, onClick: () => handleSelect(date), style: {
+    background: date >= selectedStart && date <= selectedEnd ? highlightColor : "#334155",
+    color: textColor,
+    padding: "10px 0",
+    borderRadius,
+    border: "none",
+    cursor: "pointer",
+    transition: "background 0.3s",
+    fontSize: "14px"
+  } }, date.getDate()))));
+};
 export {
   AlertBanner,
   AnimatedProgressBar,
   Button,
   Card,
   CopyButton,
+  DateRangePicker,
   Dropdown,
   EmptyState,
   Footer,
@@ -865,6 +960,7 @@ export {
   GridLayout,
   ImageUploadPreview,
   Loader,
+  MultiStepProgress,
   Navbar,
   OTPInput,
   RatingStars,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-ui-lib",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "description": "Virtual UI React Component Library",
   "author": "Ankush",
   "license": "ISC",