virtual-ui-lib 1.0.39 → 1.0.40

package/dist/index.js

@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.js
 var index_exports = {};
 __export(index_exports, {
+  CodeBlock: () => CodeBlock,
   OtpInput: () => OtpInput,
   StatCard: () => StatCard,
   ToastNotification: () => ToastNotification
@@ -234,8 +235,34 @@ var OtpInput = ({
     }
   )), otp.join("").length === length && /* @__PURE__ */ import_react3.default.createElement("span", { style: { color: "#4ade80", fontSize: "20px" } }, "\u2705"));
 };
+
+// src/components/CodeBlock/CodeBlock.jsx
+var import_react4 = __toESM(require("react"));
+var CodeBlock = ({
+  code = "const hello = 'Hello, world!';\nconsole.log(hello);",
+  language = "JavaScript",
+  filename = "example.js",
+  bg = "#0d1117",
+  textColor = "#c9d1d9",
+  tokenColors = { string: "#a5d6e9", keyword: "#f9bc41", variable: "#a6e22e" },
+  showLineNumbers = true,
+  wrapWords = false
+}) => {
+  const [copied, setCopied] = (0, import_react4.useState)(false);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    });
+  };
+  const formatCode = () => {
+    return code.split("\n").map((line, index) => /* @__PURE__ */ import_react4.default.createElement("div", { key: index, style: { display: "flex" } }, showLineNumbers && /* @__PURE__ */ import_react4.default.createElement("span", { style: { marginRight: "10px", color: "#58a6ff" } }, index + 1), /* @__PURE__ */ import_react4.default.createElement("span", { style: { color: tokenColors.string } }, line.replace(/(\'.*?\')/g, (match) => `<span style='color:${tokenColors.string}'>${match}</span>`))));
+  };
+  return /* @__PURE__ */ import_react4.default.createElement("div", { style: { background: bg, borderRadius: "8px", padding: "16px", fontFamily: "monospace", position: "relative" } }, filename && /* @__PURE__ */ import_react4.default.createElement("div", { style: { color: textColor, fontWeight: "bold", marginBottom: "8px" } }, filename), /* @__PURE__ */ import_react4.default.createElement("div", { style: { overflowX: wrapWords ? "auto" : "hidden", whiteSpace: wrapWords ? "normal" : "pre" } }, formatCode()), /* @__PURE__ */ import_react4.default.createElement("button", { onClick: handleCopy, style: { position: "absolute", top: "10px", right: "10px", background: copied ? "#28a745" : "#58a6ff", color: "white", border: "none", borderRadius: "4px", padding: "8px 12px", cursor: "pointer", fontSize: "14px", marginLeft: "10px" } }, copied ? "\u2713 Copied" : "Copy"), /* @__PURE__ */ import_react4.default.createElement("button", { onClick: () => wrapWords = !wrapWords, style: { position: "absolute", top: "10px", right: "90px", background: "#58a6ff", color: "white", border: "none", borderRadius: "4px", padding: "8px 12px", cursor: "pointer", fontSize: "14px" } }, wrapWords ? "Wrap Off" : "Wrap On"));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CodeBlock,
   OtpInput,
   StatCard,
   ToastNotification

package/dist/index.mjs

@@ -197,7 +197,33 @@ var OtpInput = ({
     }
   )), otp.join("").length === length && /* @__PURE__ */ React3.createElement("span", { style: { color: "#4ade80", fontSize: "20px" } }, "\u2705"));
 };
+
+// src/components/CodeBlock/CodeBlock.jsx
+import React4, { useState as useState4 } from "react";
+var CodeBlock = ({
+  code = "const hello = 'Hello, world!';\nconsole.log(hello);",
+  language = "JavaScript",
+  filename = "example.js",
+  bg = "#0d1117",
+  textColor = "#c9d1d9",
+  tokenColors = { string: "#a5d6e9", keyword: "#f9bc41", variable: "#a6e22e" },
+  showLineNumbers = true,
+  wrapWords = false
+}) => {
+  const [copied, setCopied] = useState4(false);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    });
+  };
+  const formatCode = () => {
+    return code.split("\n").map((line, index) => /* @__PURE__ */ React4.createElement("div", { key: index, style: { display: "flex" } }, showLineNumbers && /* @__PURE__ */ React4.createElement("span", { style: { marginRight: "10px", color: "#58a6ff" } }, index + 1), /* @__PURE__ */ React4.createElement("span", { style: { color: tokenColors.string } }, line.replace(/(\'.*?\')/g, (match) => `<span style='color:${tokenColors.string}'>${match}</span>`))));
+  };
+  return /* @__PURE__ */ React4.createElement("div", { style: { background: bg, borderRadius: "8px", padding: "16px", fontFamily: "monospace", position: "relative" } }, filename && /* @__PURE__ */ React4.createElement("div", { style: { color: textColor, fontWeight: "bold", marginBottom: "8px" } }, filename), /* @__PURE__ */ React4.createElement("div", { style: { overflowX: wrapWords ? "auto" : "hidden", whiteSpace: wrapWords ? "normal" : "pre" } }, formatCode()), /* @__PURE__ */ React4.createElement("button", { onClick: handleCopy, style: { position: "absolute", top: "10px", right: "10px", background: copied ? "#28a745" : "#58a6ff", color: "white", border: "none", borderRadius: "4px", padding: "8px 12px", cursor: "pointer", fontSize: "14px", marginLeft: "10px" } }, copied ? "\u2713 Copied" : "Copy"), /* @__PURE__ */ React4.createElement("button", { onClick: () => wrapWords = !wrapWords, style: { position: "absolute", top: "10px", right: "90px", background: "#58a6ff", color: "white", border: "none", borderRadius: "4px", padding: "8px 12px", cursor: "pointer", fontSize: "14px" } }, wrapWords ? "Wrap Off" : "Wrap On"));
+};
 export {
+  CodeBlock,
   OtpInput,
   StatCard,
   ToastNotification

package/package.json

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