virtual-ui-lib 1.0.20 → 1.0.22

package/dist/index.js

@@ -32,10 +32,12 @@ __export(index_exports, {
   AlertBanner: () => AlertBanner,
   Button: () => Button,
   Card: () => Card,
+  CopyButton: () => CopyButton,
   Dropdown: () => Dropdown,
   EmptyState: () => EmptyState,
   FormInput: () => FormInput,
   GridLayout: () => GridLayout,
+  ImageUploadPreview: () => ImageUploadPreview,
   Navbar: () => Navbar
 });
 module.exports = __toCommonJS(index_exports);
@@ -475,14 +477,136 @@ var Navbar = ({
     transition: "color 0.3s"
   }, onMouseOver: (e) => e.currentTarget.style.color = hoverColor, onMouseOut: (e) => e.currentTarget.style.color = linkColor }, link.name))))));
 };
+
+// src/components/ImageUploadPreview/ImageUploadPreview.jsx
+var import_react9 = __toESM(require("react"));
+var ImageUploadPreview = ({
+  width = "300px",
+  height = "200px",
+  bg = "#1e293b",
+  borderColor = "#7c3aed",
+  errorColor = "#dc2626",
+  borderRadius = "12px",
+  onImageChange
+}) => {
+  const [image, setImage] = (0, import_react9.useState)(null);
+  const [error, setError] = (0, import_react9.useState)(false);
+  const handleImageChange = (e) => {
+    const file = e.target.files[0];
+    const validTypes = ["image/png", "image/jpeg", "image/jpg"];
+    if (validTypes.includes(file.type)) {
+      setError(false);
+      const reader = new FileReader();
+      reader.onload = () => {
+        setImage(reader.result);
+        if (onImageChange) onImageChange(reader.result);
+      };
+      reader.readAsDataURL(file);
+    } else {
+      setError(true);
+    }
+  };
+  const handleRemove = () => {
+    setImage(null);
+    setError(false);
+  };
+  return /* @__PURE__ */ import_react9.default.createElement("div", { style: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    width,
+    height,
+    background: bg,
+    border: `2px solid ${error ? errorColor : borderColor}`,
+    borderRadius,
+    position: "relative",
+    overflow: "hidden",
+    transition: "border-color 0.3s"
+  } }, !image && !error && /* @__PURE__ */ import_react9.default.createElement("input", { type: "file", onChange: handleImageChange, style: { display: "none" }, id: "file-input" }), !image && !error && /* @__PURE__ */ import_react9.default.createElement("label", { htmlFor: "file-input", style: { color: "#f1f5f9", cursor: "pointer", textAlign: "center" } }, "Upload Image"), error && /* @__PURE__ */ import_react9.default.createElement("p", { style: { color: errorColor, fontSize: "14px", textAlign: "center" } }, "Invalid image type!"), image && /* @__PURE__ */ import_react9.default.createElement("div", { style: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    background: "rgba(0,0,0,0.6)",
+    transition: "opacity 0.3s",
+    opacity: 1
+  } }, /* @__PURE__ */ import_react9.default.createElement("img", { src: image, alt: "Preview", style: {
+    maxWidth: "100%",
+    maxHeight: "100%",
+    objectFit: "cover",
+    transition: "transform 0.3s",
+    borderRadius,
+    cursor: "zoom-in"
+  }, onMouseEnter: (e) => e.currentTarget.style.transform = "scale(1.05)", onMouseLeave: (e) => e.currentTarget.style.transform = "scale(1)" })), image && /* @__PURE__ */ import_react9.default.createElement("button", { onClick: handleRemove, style: {
+    position: "absolute",
+    top: "10px",
+    right: "10px",
+    background: "rgba(255,255,255,0.8)",
+    color: "#dc2626",
+    border: "none",
+    borderRadius: "50%",
+    width: "30px",
+    height: "30px",
+    cursor: "pointer",
+    fontSize: "16px",
+    transition: "background 0.3s"
+  }, onMouseEnter: (e) => e.currentTarget.style.background = "rgba(255,255,255,1)", onMouseLeave: (e) => e.currentTarget.style.background = "rgba(255,255,255,0.8)" }, "\xD7"));
+};
+
+// src/components/CopyButton/CopyButton.jsx
+var import_react10 = __toESM(require("react"));
+var CopyButton = ({
+  text = "Copy",
+  bg = "#2563eb",
+  color = "white",
+  radius = "8px",
+  icon = /* @__PURE__ */ import_react10.default.createElement("span", { role: "img", "aria-label": "copy" }, "\u{1F4CB}"),
+  padding = "10px 15px",
+  shadow = "0 4px 14px rgba(37,99,235,0.4)"
+}) => {
+  const [copied, setCopied] = (0, import_react10.useState)(false);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  return /* @__PURE__ */ import_react10.default.createElement(
+    "button",
+    {
+      onClick: handleCopy,
+      style: {
+        background: bg,
+        color,
+        border: "none",
+        borderRadius: radius,
+        padding,
+        cursor: "pointer",
+        fontWeight: "600",
+        boxShadow: shadow,
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        transition: "background 0.3s"
+      }
+    },
+    icon,
+    copied ? "Copied!" : text
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AlertBanner,
   Button,
   Card,
+  CopyButton,
   Dropdown,
   EmptyState,
   FormInput,
   GridLayout,
+  ImageUploadPreview,
   Navbar
 });

package/dist/index.mjs

@@ -433,13 +433,135 @@ var Navbar = ({
     transition: "color 0.3s"
   }, onMouseOver: (e) => e.currentTarget.style.color = hoverColor, onMouseOut: (e) => e.currentTarget.style.color = linkColor }, link.name))))));
 };
+
+// src/components/ImageUploadPreview/ImageUploadPreview.jsx
+import React9, { useState as useState6 } from "react";
+var ImageUploadPreview = ({
+  width = "300px",
+  height = "200px",
+  bg = "#1e293b",
+  borderColor = "#7c3aed",
+  errorColor = "#dc2626",
+  borderRadius = "12px",
+  onImageChange
+}) => {
+  const [image, setImage] = useState6(null);
+  const [error, setError] = useState6(false);
+  const handleImageChange = (e) => {
+    const file = e.target.files[0];
+    const validTypes = ["image/png", "image/jpeg", "image/jpg"];
+    if (validTypes.includes(file.type)) {
+      setError(false);
+      const reader = new FileReader();
+      reader.onload = () => {
+        setImage(reader.result);
+        if (onImageChange) onImageChange(reader.result);
+      };
+      reader.readAsDataURL(file);
+    } else {
+      setError(true);
+    }
+  };
+  const handleRemove = () => {
+    setImage(null);
+    setError(false);
+  };
+  return /* @__PURE__ */ React9.createElement("div", { style: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    width,
+    height,
+    background: bg,
+    border: `2px solid ${error ? errorColor : borderColor}`,
+    borderRadius,
+    position: "relative",
+    overflow: "hidden",
+    transition: "border-color 0.3s"
+  } }, !image && !error && /* @__PURE__ */ React9.createElement("input", { type: "file", onChange: handleImageChange, style: { display: "none" }, id: "file-input" }), !image && !error && /* @__PURE__ */ React9.createElement("label", { htmlFor: "file-input", style: { color: "#f1f5f9", cursor: "pointer", textAlign: "center" } }, "Upload Image"), error && /* @__PURE__ */ React9.createElement("p", { style: { color: errorColor, fontSize: "14px", textAlign: "center" } }, "Invalid image type!"), image && /* @__PURE__ */ React9.createElement("div", { style: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    background: "rgba(0,0,0,0.6)",
+    transition: "opacity 0.3s",
+    opacity: 1
+  } }, /* @__PURE__ */ React9.createElement("img", { src: image, alt: "Preview", style: {
+    maxWidth: "100%",
+    maxHeight: "100%",
+    objectFit: "cover",
+    transition: "transform 0.3s",
+    borderRadius,
+    cursor: "zoom-in"
+  }, onMouseEnter: (e) => e.currentTarget.style.transform = "scale(1.05)", onMouseLeave: (e) => e.currentTarget.style.transform = "scale(1)" })), image && /* @__PURE__ */ React9.createElement("button", { onClick: handleRemove, style: {
+    position: "absolute",
+    top: "10px",
+    right: "10px",
+    background: "rgba(255,255,255,0.8)",
+    color: "#dc2626",
+    border: "none",
+    borderRadius: "50%",
+    width: "30px",
+    height: "30px",
+    cursor: "pointer",
+    fontSize: "16px",
+    transition: "background 0.3s"
+  }, onMouseEnter: (e) => e.currentTarget.style.background = "rgba(255,255,255,1)", onMouseLeave: (e) => e.currentTarget.style.background = "rgba(255,255,255,0.8)" }, "\xD7"));
+};
+
+// src/components/CopyButton/CopyButton.jsx
+import React10, { useState as useState7 } from "react";
+var CopyButton = ({
+  text = "Copy",
+  bg = "#2563eb",
+  color = "white",
+  radius = "8px",
+  icon = /* @__PURE__ */ React10.createElement("span", { role: "img", "aria-label": "copy" }, "\u{1F4CB}"),
+  padding = "10px 15px",
+  shadow = "0 4px 14px rgba(37,99,235,0.4)"
+}) => {
+  const [copied, setCopied] = useState7(false);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  return /* @__PURE__ */ React10.createElement(
+    "button",
+    {
+      onClick: handleCopy,
+      style: {
+        background: bg,
+        color,
+        border: "none",
+        borderRadius: radius,
+        padding,
+        cursor: "pointer",
+        fontWeight: "600",
+        boxShadow: shadow,
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        transition: "background 0.3s"
+      }
+    },
+    icon,
+    copied ? "Copied!" : text
+  );
+};
 export {
   AlertBanner,
   Button,
   Card,
+  CopyButton,
   Dropdown,
   EmptyState,
   FormInput,
   GridLayout,
+  ImageUploadPreview,
   Navbar
 };

package/package.json

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