virtual-ui-lib 1.0.40 → 1.0.42

package/dist/index.js

@@ -30,7 +30,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   CodeBlock: () => CodeBlock,
+  CustomInputField: () => CustomInputField,
   OtpInput: () => OtpInput,
+  SmartButton: () => SmartButton,
   StatCard: () => StatCard,
   ToastNotification: () => ToastNotification
 });
@@ -260,10 +262,97 @@ var CodeBlock = ({
   };
   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"));
 };
+
+// src/components/SmartButton/SmartButton.jsx
+var import_react5 = __toESM(require("react"));
+var SmartButton = ({
+  buttonText = "Submit",
+  isLoading = false,
+  isDisabled = false,
+  icon = null,
+  success = false,
+  error = false,
+  bg = "#7c3aed",
+  textColor = "#fff",
+  padding = "12px 20px",
+  radius = "8px",
+  onClick = () => {
+  }
+}) => {
+  const bgColor = success ? "#059669" : error ? "#ef4444" : bg;
+  const cursorStyle = isDisabled ? "not-allowed" : "pointer";
+  return /* @__PURE__ */ import_react5.default.createElement(
+    "button",
+    {
+      onClick: !isDisabled && !isLoading ? onClick : () => {
+      },
+      disabled: isDisabled,
+      style: {
+        background: bgColor,
+        color: textColor,
+        padding,
+        borderRadius: radius,
+        border: "none",
+        cursor: cursorStyle,
+        transition: "background 0.3s ease"
+      },
+      onMouseEnter: (e) => {
+        if (!isDisabled && !isLoading) {
+          e.currentTarget.style.background = "#6d28d9";
+        }
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = bgColor;
+      }
+    },
+    isLoading ? /* @__PURE__ */ import_react5.default.createElement("span", null, "Loading...") : /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, icon && /* @__PURE__ */ import_react5.default.createElement("span", { style: { marginRight: "8px" } }, icon), buttonText)
+  );
+};
+
+// src/components/CustomInputField/CustomInputField.jsx
+var import_react6 = __toESM(require("react"));
+var CustomInputField = ({
+  label = "Label",
+  placeholder = "Enter text...",
+  errorMessage = "",
+  helperText = "",
+  value = "",
+  bg = "#1e293b",
+  textColor = "#f1f5f9",
+  accent = "#7c3aed",
+  padding = "10px",
+  radius = "8px",
+  onChange = () => {
+  }
+}) => {
+  const [isFocused, setIsFocused] = (0, import_react6.useState)(false);
+  return /* @__PURE__ */ import_react6.default.createElement("div", { style: { margin: "16px 0" } }, /* @__PURE__ */ import_react6.default.createElement("label", { style: { color: textColor, marginBottom: "4px", display: "block" } }, label), /* @__PURE__ */ import_react6.default.createElement(
+    "input",
+    {
+      type: "text",
+      value,
+      placeholder,
+      onFocus: () => setIsFocused(true),
+      onBlur: () => setIsFocused(false),
+      onChange: (e) => onChange(e.target.value),
+      style: {
+        background: bg,
+        color: textColor,
+        padding,
+        borderRadius: radius,
+        border: isFocused ? `2px solid ${accent}` : "2px solid transparent",
+        transition: "border-color 0.3s ease",
+        width: "100%"
+      }
+    }
+  ), errorMessage && /* @__PURE__ */ import_react6.default.createElement("p", { style: { color: "red", margin: "4px 0 0 0" } }, errorMessage), helperText && /* @__PURE__ */ import_react6.default.createElement("p", { style: { color: textColor, margin: "4px 0 0 0" } }, helperText));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CodeBlock,
+  CustomInputField,
   OtpInput,
+  SmartButton,
   StatCard,
   ToastNotification
 });

package/dist/index.mjs

@@ -222,9 +222,96 @@ var CodeBlock = ({
   };
   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"));
 };
+
+// src/components/SmartButton/SmartButton.jsx
+import React5 from "react";
+var SmartButton = ({
+  buttonText = "Submit",
+  isLoading = false,
+  isDisabled = false,
+  icon = null,
+  success = false,
+  error = false,
+  bg = "#7c3aed",
+  textColor = "#fff",
+  padding = "12px 20px",
+  radius = "8px",
+  onClick = () => {
+  }
+}) => {
+  const bgColor = success ? "#059669" : error ? "#ef4444" : bg;
+  const cursorStyle = isDisabled ? "not-allowed" : "pointer";
+  return /* @__PURE__ */ React5.createElement(
+    "button",
+    {
+      onClick: !isDisabled && !isLoading ? onClick : () => {
+      },
+      disabled: isDisabled,
+      style: {
+        background: bgColor,
+        color: textColor,
+        padding,
+        borderRadius: radius,
+        border: "none",
+        cursor: cursorStyle,
+        transition: "background 0.3s ease"
+      },
+      onMouseEnter: (e) => {
+        if (!isDisabled && !isLoading) {
+          e.currentTarget.style.background = "#6d28d9";
+        }
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = bgColor;
+      }
+    },
+    isLoading ? /* @__PURE__ */ React5.createElement("span", null, "Loading...") : /* @__PURE__ */ React5.createElement(React5.Fragment, null, icon && /* @__PURE__ */ React5.createElement("span", { style: { marginRight: "8px" } }, icon), buttonText)
+  );
+};
+
+// src/components/CustomInputField/CustomInputField.jsx
+import React6, { useState as useState5 } from "react";
+var CustomInputField = ({
+  label = "Label",
+  placeholder = "Enter text...",
+  errorMessage = "",
+  helperText = "",
+  value = "",
+  bg = "#1e293b",
+  textColor = "#f1f5f9",
+  accent = "#7c3aed",
+  padding = "10px",
+  radius = "8px",
+  onChange = () => {
+  }
+}) => {
+  const [isFocused, setIsFocused] = useState5(false);
+  return /* @__PURE__ */ React6.createElement("div", { style: { margin: "16px 0" } }, /* @__PURE__ */ React6.createElement("label", { style: { color: textColor, marginBottom: "4px", display: "block" } }, label), /* @__PURE__ */ React6.createElement(
+    "input",
+    {
+      type: "text",
+      value,
+      placeholder,
+      onFocus: () => setIsFocused(true),
+      onBlur: () => setIsFocused(false),
+      onChange: (e) => onChange(e.target.value),
+      style: {
+        background: bg,
+        color: textColor,
+        padding,
+        borderRadius: radius,
+        border: isFocused ? `2px solid ${accent}` : "2px solid transparent",
+        transition: "border-color 0.3s ease",
+        width: "100%"
+      }
+    }
+  ), errorMessage && /* @__PURE__ */ React6.createElement("p", { style: { color: "red", margin: "4px 0 0 0" } }, errorMessage), helperText && /* @__PURE__ */ React6.createElement("p", { style: { color: textColor, margin: "4px 0 0 0" } }, helperText));
+};
 export {
   CodeBlock,
+  CustomInputField,
   OtpInput,
+  SmartButton,
   StatCard,
   ToastNotification
 };

package/package.json

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