virtual-ui-lib 1.0.41 → 1.0.43

package/dist/index.js

@@ -30,9 +30,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   CodeBlock: () => CodeBlock,
+  CustomInputField: () => CustomInputField,
   OtpInput: () => OtpInput,
   SmartButton: () => SmartButton,
   StatCard: () => StatCard,
+  TextArea: () => TextArea,
   ToastNotification: () => ToastNotification
 });
 module.exports = __toCommonJS(index_exports);
@@ -307,11 +309,94 @@ var SmartButton = ({
     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));
+};
+
+// src/components/TextArea/TextArea.jsx
+var import_react7 = __toESM(require("react"));
+var TextArea = ({
+  label = "Label",
+  placeholder = "Type here...",
+  value = "",
+  bg = "#1e293b",
+  textColor = "#f1f5f9",
+  accent = "#2563eb",
+  radius = "8px",
+  padding = "12px",
+  maxLength = 250,
+  onChange = () => {
+  }
+}) => {
+  const [currentValue, setCurrentValue] = (0, import_react7.useState)(value);
+  const handleChange = (e) => {
+    setCurrentValue(e.target.value);
+    onChange(e.target.value);
+  };
+  return /* @__PURE__ */ import_react7.default.createElement("div", { style: { margin: "16px 0" } }, /* @__PURE__ */ import_react7.default.createElement("label", { style: { color: textColor, marginBottom: "8px", display: "block" } }, label), /* @__PURE__ */ import_react7.default.createElement(
+    "textarea",
+    {
+      value: currentValue,
+      placeholder,
+      maxLength,
+      onChange: handleChange,
+      style: {
+        background: bg,
+        color: textColor,
+        padding,
+        borderRadius: radius,
+        border: `1px solid ${accent}`,
+        width: "100%",
+        minHeight: "100px",
+        resize: "none",
+        transition: "border-color 0.3s"
+      }
+    }
+  ), /* @__PURE__ */ import_react7.default.createElement("div", { style: { color: textColor, marginTop: "8px" } }, currentValue.length, "/", maxLength));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CodeBlock,
+  CustomInputField,
   OtpInput,
   SmartButton,
   StatCard,
+  TextArea,
   ToastNotification
 });

package/dist/index.mjs

@@ -268,10 +268,93 @@ var SmartButton = ({
     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));
+};
+
+// src/components/TextArea/TextArea.jsx
+import React7, { useState as useState6 } from "react";
+var TextArea = ({
+  label = "Label",
+  placeholder = "Type here...",
+  value = "",
+  bg = "#1e293b",
+  textColor = "#f1f5f9",
+  accent = "#2563eb",
+  radius = "8px",
+  padding = "12px",
+  maxLength = 250,
+  onChange = () => {
+  }
+}) => {
+  const [currentValue, setCurrentValue] = useState6(value);
+  const handleChange = (e) => {
+    setCurrentValue(e.target.value);
+    onChange(e.target.value);
+  };
+  return /* @__PURE__ */ React7.createElement("div", { style: { margin: "16px 0" } }, /* @__PURE__ */ React7.createElement("label", { style: { color: textColor, marginBottom: "8px", display: "block" } }, label), /* @__PURE__ */ React7.createElement(
+    "textarea",
+    {
+      value: currentValue,
+      placeholder,
+      maxLength,
+      onChange: handleChange,
+      style: {
+        background: bg,
+        color: textColor,
+        padding,
+        borderRadius: radius,
+        border: `1px solid ${accent}`,
+        width: "100%",
+        minHeight: "100px",
+        resize: "none",
+        transition: "border-color 0.3s"
+      }
+    }
+  ), /* @__PURE__ */ React7.createElement("div", { style: { color: textColor, marginTop: "8px" } }, currentValue.length, "/", maxLength));
+};
 export {
   CodeBlock,
+  CustomInputField,
   OtpInput,
   SmartButton,
   StatCard,
+  TextArea,
   ToastNotification
 };

package/package.json

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