virtual-ui-lib 1.0.46 → 1.0.48

package/dist/index.js

@@ -31,8 +31,10 @@ var index_exports = {};
 __export(index_exports, {
   CodeBlock: () => CodeBlock,
   CustomInputField: () => CustomInputField,
+  FileUpload: () => FileUpload,
   LoadingSpinner: () => LoadingSpinner,
   OtpInput: () => OtpInput,
+  ResponsiveNavbar: () => ResponsiveNavbar,
   SearchBar: () => SearchBar,
   SkeletonLoader: () => SkeletonLoader,
   SmartButton: () => SmartButton,
@@ -494,12 +496,131 @@ var SkeletonLoader = ({ width = "100%", height = "20px", bg = "#1e293b", accent
           }
         }`));
 };
+
+// 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))));
+};
+
+// src/components/FileUpload/FileUpload.jsx
+var import_react12 = __toESM(require("react"));
+var FileUpload = ({ bg = "#1e293b", textColor = "#f1f5f9", accent = "#7c3aed", radius = "12px", padding = "20px", placeholder = "Drag and drop files here or click to upload", onChange = () => {
+} }) => {
+  const [file, setFile] = (0, import_react12.useState)(null);
+  const [progress, setProgress] = (0, import_react12.useState)(0);
+  const handleDrop = (event) => {
+    event.preventDefault();
+    const droppedFile = event.dataTransfer.files[0];
+    if (droppedFile) {
+      uploadFile(droppedFile);
+    }
+  };
+  const handleClick = () => {
+    document.getElementById("fileInput").click();
+  };
+  const handleFileChange = (event) => {
+    const selectedFile = event.target.files[0];
+    if (selectedFile) {
+      uploadFile(selectedFile);
+    }
+  };
+  const uploadFile = (selectedFile) => {
+    setFile(selectedFile);
+    const uploadProgress = setInterval(() => {
+      setProgress((prev) => {
+        if (prev >= 100) {
+          clearInterval(uploadProgress);
+          return 100;
+        }
+        return prev + 10;
+      });
+    }, 100);
+    onChange(selectedFile);
+  };
+  const handleRemove = () => {
+    setFile(null);
+    setProgress(0);
+  };
+  return /* @__PURE__ */ import_react12.default.createElement(
+    "div",
+    {
+      onDrop: handleDrop,
+      onDragOver: (e) => e.preventDefault(),
+      onClick: handleClick,
+      style: {
+        background: bg,
+        color: textColor,
+        border: `2px dashed ${accent}`,
+        borderRadius: radius,
+        padding,
+        textAlign: "center",
+        cursor: "pointer"
+      }
+    },
+    /* @__PURE__ */ import_react12.default.createElement(
+      "input",
+      {
+        id: "fileInput",
+        type: "file",
+        style: { display: "none" },
+        onChange: handleFileChange
+      }
+    ),
+    file ? /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("p", null, file.name), /* @__PURE__ */ import_react12.default.createElement(
+      "button",
+      {
+        onClick: handleRemove,
+        style: {
+          background: accent,
+          color: "#fff",
+          border: "none",
+          borderRadius: radius,
+          padding: "8px 16px",
+          cursor: "pointer"
+        }
+      },
+      "Remove"
+    ), /* @__PURE__ */ import_react12.default.createElement("div", { style: { background: "#e2e8f0", borderRadius: radius, overflow: "hidden", marginTop: "10px" } }, /* @__PURE__ */ import_react12.default.createElement("div", { style: { width: `${progress}%`, background: accent, height: "8px" } }))) : /* @__PURE__ */ import_react12.default.createElement("p", null, placeholder)
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CodeBlock,
   CustomInputField,
+  FileUpload,
   LoadingSpinner,
   OtpInput,
+  ResponsiveNavbar,
   SearchBar,
   SkeletonLoader,
   SmartButton,

package/dist/index.mjs

@@ -450,11 +450,130 @@ var SkeletonLoader = ({ width = "100%", height = "20px", bg = "#1e293b", accent
           }
         }`));
 };
+
+// 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))));
+};
+
+// src/components/FileUpload/FileUpload.jsx
+import React12, { useState as useState9 } from "react";
+var FileUpload = ({ bg = "#1e293b", textColor = "#f1f5f9", accent = "#7c3aed", radius = "12px", padding = "20px", placeholder = "Drag and drop files here or click to upload", onChange = () => {
+} }) => {
+  const [file, setFile] = useState9(null);
+  const [progress, setProgress] = useState9(0);
+  const handleDrop = (event) => {
+    event.preventDefault();
+    const droppedFile = event.dataTransfer.files[0];
+    if (droppedFile) {
+      uploadFile(droppedFile);
+    }
+  };
+  const handleClick = () => {
+    document.getElementById("fileInput").click();
+  };
+  const handleFileChange = (event) => {
+    const selectedFile = event.target.files[0];
+    if (selectedFile) {
+      uploadFile(selectedFile);
+    }
+  };
+  const uploadFile = (selectedFile) => {
+    setFile(selectedFile);
+    const uploadProgress = setInterval(() => {
+      setProgress((prev) => {
+        if (prev >= 100) {
+          clearInterval(uploadProgress);
+          return 100;
+        }
+        return prev + 10;
+      });
+    }, 100);
+    onChange(selectedFile);
+  };
+  const handleRemove = () => {
+    setFile(null);
+    setProgress(0);
+  };
+  return /* @__PURE__ */ React12.createElement(
+    "div",
+    {
+      onDrop: handleDrop,
+      onDragOver: (e) => e.preventDefault(),
+      onClick: handleClick,
+      style: {
+        background: bg,
+        color: textColor,
+        border: `2px dashed ${accent}`,
+        borderRadius: radius,
+        padding,
+        textAlign: "center",
+        cursor: "pointer"
+      }
+    },
+    /* @__PURE__ */ React12.createElement(
+      "input",
+      {
+        id: "fileInput",
+        type: "file",
+        style: { display: "none" },
+        onChange: handleFileChange
+      }
+    ),
+    file ? /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("p", null, file.name), /* @__PURE__ */ React12.createElement(
+      "button",
+      {
+        onClick: handleRemove,
+        style: {
+          background: accent,
+          color: "#fff",
+          border: "none",
+          borderRadius: radius,
+          padding: "8px 16px",
+          cursor: "pointer"
+        }
+      },
+      "Remove"
+    ), /* @__PURE__ */ React12.createElement("div", { style: { background: "#e2e8f0", borderRadius: radius, overflow: "hidden", marginTop: "10px" } }, /* @__PURE__ */ React12.createElement("div", { style: { width: `${progress}%`, background: accent, height: "8px" } }))) : /* @__PURE__ */ React12.createElement("p", null, placeholder)
+  );
+};
 export {
   CodeBlock,
   CustomInputField,
+  FileUpload,
   LoadingSpinner,
   OtpInput,
+  ResponsiveNavbar,
   SearchBar,
   SkeletonLoader,
   SmartButton,

package/package.json

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