virtual-ui-lib 1.0.31 → 1.0.33

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,
+  LoadingSkeleton: () => LoadingSkeleton,
   MultiStepProgress: () => MultiStepProgress,
   Navbar: () => Navbar,
   OTPInput: () => OTPInput,
@@ -962,6 +964,61 @@ 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()))));
+};
+
+// src/components/LoadingSkeleton/LoadingSkeleton.jsx
+var import_react20 = __toESM(require("react"));
+var LoadingSkeleton = ({
+  type = "card",
+  width = "300px",
+  height = "200px",
+  bg = "#334155",
+  shimmerColor = "#7c3aed",
+  radius = "12px",
+  speed = "1.5s"
+}) => {
+  const shimmer = {
+    background: `linear-gradient(90deg, ${shimmerColor} 25%, rgba(255, 255, 255, 0.2) 50%, ${shimmerColor} 75%)`,
+    backgroundSize: "200% 100%",
+    animation: `shimmer ${speed} infinite`
+  };
+  return /* @__PURE__ */ import_react20.default.createElement("div", { style: { width, height, borderRadius: radius, position: "relative", overflow: "hidden", background: bg } }, /* @__PURE__ */ import_react20.default.createElement("div", { style: { width: "100%", height: "100%", ...shimmer } }), /* @__PURE__ */ import_react20.default.createElement("style", null, `@keyframes shimmer { 0% { background-position: 200% 0%; } 100% { background-position: 0% 0%; } }`));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AlertBanner,
@@ -969,6 +1026,7 @@ var MultiStepProgress = ({
   Button,
   Card,
   CopyButton,
+  DateRangePicker,
   Dropdown,
   EmptyState,
   Footer,
@@ -976,6 +1034,7 @@ var MultiStepProgress = ({
   GridLayout,
   ImageUploadPreview,
   Loader,
+  LoadingSkeleton,
   MultiStepProgress,
   Navbar,
   OTPInput,

package/dist/index.mjs

@@ -910,12 +910,68 @@ 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()))));
+};
+
+// src/components/LoadingSkeleton/LoadingSkeleton.jsx
+import React20 from "react";
+var LoadingSkeleton = ({
+  type = "card",
+  width = "300px",
+  height = "200px",
+  bg = "#334155",
+  shimmerColor = "#7c3aed",
+  radius = "12px",
+  speed = "1.5s"
+}) => {
+  const shimmer = {
+    background: `linear-gradient(90deg, ${shimmerColor} 25%, rgba(255, 255, 255, 0.2) 50%, ${shimmerColor} 75%)`,
+    backgroundSize: "200% 100%",
+    animation: `shimmer ${speed} infinite`
+  };
+  return /* @__PURE__ */ React20.createElement("div", { style: { width, height, borderRadius: radius, position: "relative", overflow: "hidden", background: bg } }, /* @__PURE__ */ React20.createElement("div", { style: { width: "100%", height: "100%", ...shimmer } }), /* @__PURE__ */ React20.createElement("style", null, `@keyframes shimmer { 0% { background-position: 200% 0%; } 100% { background-position: 0% 0%; } }`));
+};
 export {
   AlertBanner,
   AnimatedProgressBar,
   Button,
   Card,
   CopyButton,
+  DateRangePicker,
   Dropdown,
   EmptyState,
   Footer,
@@ -923,6 +979,7 @@ export {
   GridLayout,
   ImageUploadPreview,
   Loader,
+  LoadingSkeleton,
   MultiStepProgress,
   Navbar,
   OTPInput,

package/package.json

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