virtual-ui-lib 1.0.45 → 1.0.47

package/dist/index.js

@@ -33,7 +33,9 @@ __export(index_exports, {
   CustomInputField: () => CustomInputField,
   LoadingSpinner: () => LoadingSpinner,
   OtpInput: () => OtpInput,
+  ResponsiveNavbar: () => ResponsiveNavbar,
   SearchBar: () => SearchBar,
+  SkeletonLoader: () => SkeletonLoader,
   SmartButton: () => SmartButton,
   StatCard: () => StatCard,
   TextArea: () => TextArea,
@@ -474,13 +476,69 @@ var import_react9 = __toESM(require("react"));
 var LoadingSpinner = ({ size = "40px", color = "#7c3aed", speed = "1s" }) => {
   return /* @__PURE__ */ import_react9.default.createElement("div", { style: { border: `4px solid ${color}`, borderTop: `4px solid transparent`, borderRadius: "50%", width: size, height: size, animation: `spin ${speed} linear infinite` } });
 };
+
+// src/components/SkeletonLoader/SkeletonLoader.jsx
+var import_react10 = __toESM(require("react"));
+var SkeletonLoader = ({ width = "100%", height = "20px", bg = "#1e293b", accent = "#7c3aed", radius = "12px", padding = "0" }) => {
+  const shimmerStyle = {
+    background: `linear-gradient(90deg, ${accent} 25%, ${bg} 50%, ${accent} 75%)`,
+    backgroundSize: "200% 100%",
+    animation: "shimmer 1.5s infinite",
+    borderRadius: radius
+  };
+  return /* @__PURE__ */ import_react10.default.createElement("div", { style: { padding } }, /* @__PURE__ */ import_react10.default.createElement("div", { style: { ...shimmerStyle, width, height, marginBottom: "10px" } }), /* @__PURE__ */ import_react10.default.createElement("div", { style: { ...shimmerStyle, width, height, marginBottom: "10px" } }), /* @__PURE__ */ import_react10.default.createElement("div", { style: { ...shimmerStyle, width, height } }), /* @__PURE__ */ import_react10.default.createElement("style", null, `@keyframes shimmer {
+          0% {
+            background-position: 200% 0;
+          }
+          100% {
+            background-position: 0 0;
+          }
+        }`));
+};
+
+// src/components/ResponsiveNavbar/ResponsiveNavbar.jsx
+var import_react11 = __toESM(require("react"));
+var ResponsiveNavbar = ({
+  logo = "Logo",
+  navItems = [],
+  bg = "#1e293b",
+  textColor = "#f1f5f9",
+  accent = "#7c3aed",
+  padding = "10px 20px",
+  radius = "8px",
+  placeholder = "Search...",
+  onNavItemClick = () => {
+  },
+  onSearchChange = () => {
+  },
+  profileAvatar = "https://via.placeholder.com/40"
+}) => {
+  const [menuActive, setMenuActive] = (0, import_react11.useState)(false);
+  const [searchValue, setSearchValue] = (0, import_react11.useState)("");
+  const handleSearchChange = (e) => {
+    setSearchValue(e.target.value);
+    onSearchChange(e.target.value);
+  };
+  return /* @__PURE__ */ import_react11.default.createElement("nav", { style: { background: bg, color: textColor, padding, borderRadius: radius, display: "flex", justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ import_react11.default.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ import_react11.default.createElement("div", { style: { fontSize: "24px", fontWeight: "bold" } }, logo), /* @__PURE__ */ import_react11.default.createElement("div", { style: { display: "flex", marginLeft: "20px" } }, navItems.map((item, index) => /* @__PURE__ */ import_react11.default.createElement("div", { key: index, onClick: () => onNavItemClick(item), style: { margin: "0 10px", cursor: "pointer", color: item.active ? accent : textColor } }, item.label)))), /* @__PURE__ */ import_react11.default.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ import_react11.default.createElement(
+    "input",
+    {
+      type: "text",
+      value: searchValue,
+      placeholder,
+      onChange: handleSearchChange,
+      style: { background: "#0f172a", color: textColor, border: "none", borderRadius: radius, padding: "8px", marginRight: "20px" }
+    }
+  ), /* @__PURE__ */ import_react11.default.createElement("img", { src: profileAvatar, alt: "Profile", style: { borderRadius: "50%", width: "40px", height: "40px" } }), /* @__PURE__ */ import_react11.default.createElement("div", { onClick: () => setMenuActive(!menuActive), style: { cursor: "pointer", marginLeft: "20px" } }, "\u2630")), menuActive && /* @__PURE__ */ import_react11.default.createElement("div", { style: { position: "absolute", top: "60px", right: "20px", background: bg, borderRadius: radius, boxShadow: "0 4px 8px rgba(0,0,0,0.3)", zIndex: 1 } }, navItems.map((item, index) => /* @__PURE__ */ import_react11.default.createElement("div", { key: index, onClick: () => onNavItemClick(item), style: { padding: "10px", color: item.active ? accent : textColor } }, item.label))));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CodeBlock,
   CustomInputField,
   LoadingSpinner,
   OtpInput,
+  ResponsiveNavbar,
   SearchBar,
+  SkeletonLoader,
   SmartButton,
   StatCard,
   TextArea,

package/dist/index.mjs

@@ -431,12 +431,68 @@ import React9 from "react";
 var LoadingSpinner = ({ size = "40px", color = "#7c3aed", speed = "1s" }) => {
   return /* @__PURE__ */ React9.createElement("div", { style: { border: `4px solid ${color}`, borderTop: `4px solid transparent`, borderRadius: "50%", width: size, height: size, animation: `spin ${speed} linear infinite` } });
 };
+
+// src/components/SkeletonLoader/SkeletonLoader.jsx
+import React10 from "react";
+var SkeletonLoader = ({ width = "100%", height = "20px", bg = "#1e293b", accent = "#7c3aed", radius = "12px", padding = "0" }) => {
+  const shimmerStyle = {
+    background: `linear-gradient(90deg, ${accent} 25%, ${bg} 50%, ${accent} 75%)`,
+    backgroundSize: "200% 100%",
+    animation: "shimmer 1.5s infinite",
+    borderRadius: radius
+  };
+  return /* @__PURE__ */ React10.createElement("div", { style: { padding } }, /* @__PURE__ */ React10.createElement("div", { style: { ...shimmerStyle, width, height, marginBottom: "10px" } }), /* @__PURE__ */ React10.createElement("div", { style: { ...shimmerStyle, width, height, marginBottom: "10px" } }), /* @__PURE__ */ React10.createElement("div", { style: { ...shimmerStyle, width, height } }), /* @__PURE__ */ React10.createElement("style", null, `@keyframes shimmer {
+          0% {
+            background-position: 200% 0;
+          }
+          100% {
+            background-position: 0 0;
+          }
+        }`));
+};
+
+// src/components/ResponsiveNavbar/ResponsiveNavbar.jsx
+import React11, { useState as useState8 } from "react";
+var ResponsiveNavbar = ({
+  logo = "Logo",
+  navItems = [],
+  bg = "#1e293b",
+  textColor = "#f1f5f9",
+  accent = "#7c3aed",
+  padding = "10px 20px",
+  radius = "8px",
+  placeholder = "Search...",
+  onNavItemClick = () => {
+  },
+  onSearchChange = () => {
+  },
+  profileAvatar = "https://via.placeholder.com/40"
+}) => {
+  const [menuActive, setMenuActive] = useState8(false);
+  const [searchValue, setSearchValue] = useState8("");
+  const handleSearchChange = (e) => {
+    setSearchValue(e.target.value);
+    onSearchChange(e.target.value);
+  };
+  return /* @__PURE__ */ React11.createElement("nav", { style: { background: bg, color: textColor, padding, borderRadius: radius, display: "flex", justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React11.createElement("div", { style: { fontSize: "24px", fontWeight: "bold" } }, logo), /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", marginLeft: "20px" } }, navItems.map((item, index) => /* @__PURE__ */ React11.createElement("div", { key: index, onClick: () => onNavItemClick(item), style: { margin: "0 10px", cursor: "pointer", color: item.active ? accent : textColor } }, item.label)))), /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React11.createElement(
+    "input",
+    {
+      type: "text",
+      value: searchValue,
+      placeholder,
+      onChange: handleSearchChange,
+      style: { background: "#0f172a", color: textColor, border: "none", borderRadius: radius, padding: "8px", marginRight: "20px" }
+    }
+  ), /* @__PURE__ */ React11.createElement("img", { src: profileAvatar, alt: "Profile", style: { borderRadius: "50%", width: "40px", height: "40px" } }), /* @__PURE__ */ React11.createElement("div", { onClick: () => setMenuActive(!menuActive), style: { cursor: "pointer", marginLeft: "20px" } }, "\u2630")), menuActive && /* @__PURE__ */ React11.createElement("div", { style: { position: "absolute", top: "60px", right: "20px", background: bg, borderRadius: radius, boxShadow: "0 4px 8px rgba(0,0,0,0.3)", zIndex: 1 } }, navItems.map((item, index) => /* @__PURE__ */ React11.createElement("div", { key: index, onClick: () => onNavItemClick(item), style: { padding: "10px", color: item.active ? accent : textColor } }, item.label))));
+};
 export {
   CodeBlock,
   CustomInputField,
   LoadingSpinner,
   OtpInput,
+  ResponsiveNavbar,
   SearchBar,
+  SkeletonLoader,
   SmartButton,
   StatCard,
   TextArea,

package/package.json

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