virtual-ui-lib 1.0.47 → 1.0.48

package/dist/index.js

@@ -31,6 +31,7 @@ var index_exports = {};
 __export(index_exports, {
   CodeBlock: () => CodeBlock,
   CustomInputField: () => CustomInputField,
+  FileUpload: () => FileUpload,
   LoadingSpinner: () => LoadingSpinner,
   OtpInput: () => OtpInput,
   ResponsiveNavbar: () => ResponsiveNavbar,
@@ -530,10 +531,93 @@ var ResponsiveNavbar = ({
     }
   ), /* @__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,

package/dist/index.mjs

@@ -485,9 +485,92 @@ var ResponsiveNavbar = ({
     }
   ), /* @__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,

package/package.json

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