virtual-ui-lib 1.0.21 → 1.0.23

package/dist/index.js

@@ -32,11 +32,13 @@ __export(index_exports, {
   AlertBanner: () => AlertBanner,
   Button: () => Button,
   Card: () => Card,
+  CopyButton: () => CopyButton,
   Dropdown: () => Dropdown,
   EmptyState: () => EmptyState,
   FormInput: () => FormInput,
   GridLayout: () => GridLayout,
   ImageUploadPreview: () => ImageUploadPreview,
+  Loader: () => Loader,
   Navbar: () => Navbar
 });
 module.exports = __toCommonJS(index_exports);
@@ -555,15 +557,107 @@ var ImageUploadPreview = ({
     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
+  );
+};
+
+// src/components/Loader/Loader.jsx
+var import_react11 = __toESM(require("react"));
+var Loader = ({
+  size = "medium",
+  fullScreen = false,
+  color = "#7c3aed",
+  backgroundColor = "#0f172a",
+  duration = "1s"
+}) => {
+  const sizes = { small: "40px", medium: "60px", large: "80px" };
+  const [fadeIn, setFadeIn] = (0, import_react11.useState)(false);
+  (0, import_react11.useEffect)(() => {
+    setFadeIn(true);
+  }, []);
+  return /* @__PURE__ */ import_react11.default.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: fullScreen ? "100vh" : "auto",
+        background: fullScreen ? backgroundColor : "transparent",
+        transition: "opacity 0.5s",
+        opacity: fadeIn ? 1 : 0
+      }
+    },
+    /* @__PURE__ */ import_react11.default.createElement(
+      "div",
+      {
+        style: {
+          width: sizes[size],
+          height: sizes[size],
+          border: `8px solid ${color}`,
+          borderTop: `8px solid transparent`,
+          borderRadius: "50%",
+          animation: `spin ${duration} linear infinite`
+        }
+      }
+    ),
+    /* @__PURE__ */ import_react11.default.createElement("style", null, `
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+      `)
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AlertBanner,
   Button,
   Card,
+  CopyButton,
   Dropdown,
   EmptyState,
   FormInput,
   GridLayout,
   ImageUploadPreview,
+  Loader,
   Navbar
 });

package/dist/index.mjs

@@ -512,14 +512,106 @@ var ImageUploadPreview = ({
     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
+  );
+};
+
+// src/components/Loader/Loader.jsx
+import React11, { useEffect as useEffect5, useState as useState8 } from "react";
+var Loader = ({
+  size = "medium",
+  fullScreen = false,
+  color = "#7c3aed",
+  backgroundColor = "#0f172a",
+  duration = "1s"
+}) => {
+  const sizes = { small: "40px", medium: "60px", large: "80px" };
+  const [fadeIn, setFadeIn] = useState8(false);
+  useEffect5(() => {
+    setFadeIn(true);
+  }, []);
+  return /* @__PURE__ */ React11.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: fullScreen ? "100vh" : "auto",
+        background: fullScreen ? backgroundColor : "transparent",
+        transition: "opacity 0.5s",
+        opacity: fadeIn ? 1 : 0
+      }
+    },
+    /* @__PURE__ */ React11.createElement(
+      "div",
+      {
+        style: {
+          width: sizes[size],
+          height: sizes[size],
+          border: `8px solid ${color}`,
+          borderTop: `8px solid transparent`,
+          borderRadius: "50%",
+          animation: `spin ${duration} linear infinite`
+        }
+      }
+    ),
+    /* @__PURE__ */ React11.createElement("style", null, `
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+      `)
+  );
+};
 export {
   AlertBanner,
   Button,
   Card,
+  CopyButton,
   Dropdown,
   EmptyState,
   FormInput,
   GridLayout,
   ImageUploadPreview,
+  Loader,
   Navbar
 };

package/package.json

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