virtual-ui-lib 1.0.31 → 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,
@@ -962,6 +963,42 @@ var MultiStepProgress = ({
     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,
@@ -969,6 +1006,7 @@ var MultiStepProgress = ({
   Button,
   Card,
   CopyButton,
+  DateRangePicker,
   Dropdown,
   EmptyState,
   Footer,

package/dist/index.mjs

@@ -910,12 +910,49 @@ var MultiStepProgress = ({
     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,

package/package.json

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