virtual-ui-lib 1.0.42 → 1.0.44

package/dist/index.js

@@ -32,8 +32,10 @@ __export(index_exports, {
   CodeBlock: () => CodeBlock,
   CustomInputField: () => CustomInputField,
   OtpInput: () => OtpInput,
+  SearchBar: () => SearchBar,
   SmartButton: () => SmartButton,
   StatCard: () => StatCard,
+  TextArea: () => TextArea,
   ToastNotification: () => ToastNotification
 });
 module.exports = __toCommonJS(index_exports);
@@ -347,12 +349,132 @@ var CustomInputField = ({
     }
   ), 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));
+};
+
+// src/components/SearchBar/SearchBar.jsx
+var import_react8 = __toESM(require("react"));
+var SearchBar = ({
+  placeholder = "Search...",
+  bg = "#1e293b",
+  textColor = "#f1f5f9",
+  accent = "#7c3aed",
+  loading = false,
+  suggestions = [],
+  onChange = () => {
+  },
+  onClear = () => {
+  }
+}) => {
+  const [query, setQuery] = (0, import_react8.useState)("");
+  const handleInputChange = (e) => {
+    setQuery(e.target.value);
+    onChange(e.target.value);
+  };
+  const handleClear = () => {
+    setQuery("");
+    onClear();
+  };
+  return /* @__PURE__ */ import_react8.default.createElement("div", { style: { position: "relative", width: "100%" } }, /* @__PURE__ */ import_react8.default.createElement(
+    "input",
+    {
+      value: query,
+      placeholder,
+      onChange: handleInputChange,
+      style: {
+        background: bg,
+        color: textColor,
+        padding: "10px",
+        borderRadius: "8px",
+        border: "1px solid #cbd5e1",
+        width: "100%",
+        transition: "border-color 0.3s",
+        outline: "none"
+      }
+    }
+  ), query && /* @__PURE__ */ import_react8.default.createElement("button", { onClick: handleClear, style: {
+    position: "absolute",
+    right: "10px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    background: "transparent",
+    color: accent,
+    border: "none",
+    cursor: "pointer"
+  } }, "Clear"), loading && /* @__PURE__ */ import_react8.default.createElement("div", { style: {
+    position: "absolute",
+    left: "10px",
+    top: "50%",
+    transform: "translateY(-50%)"
+  } }, "Loading..."), suggestions.length > 0 && !loading && /* @__PURE__ */ import_react8.default.createElement("ul", { style: {
+    listStyleType: "none",
+    margin: 0,
+    padding: "10px",
+    background: bg,
+    borderRadius: "8px",
+    position: "absolute",
+    zIndex: 1e3,
+    width: "100%",
+    maxHeight: "200px",
+    overflowY: "auto"
+  } }, suggestions.map((suggestion, index) => /* @__PURE__ */ import_react8.default.createElement("li", { key: index, style: {
+    padding: "8px",
+    color: textColor,
+    cursor: "pointer",
+    transition: "background 0.2s"
+  }, onClick: () => {
+    setQuery(suggestion);
+    onChange(suggestion);
+  } }, suggestion))));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CodeBlock,
   CustomInputField,
   OtpInput,
+  SearchBar,
   SmartButton,
   StatCard,
+  TextArea,
   ToastNotification
 });

package/dist/index.mjs

@@ -307,11 +307,131 @@ var CustomInputField = ({
     }
   ), 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));
+};
+
+// src/components/SearchBar/SearchBar.jsx
+import React8, { useState as useState7 } from "react";
+var SearchBar = ({
+  placeholder = "Search...",
+  bg = "#1e293b",
+  textColor = "#f1f5f9",
+  accent = "#7c3aed",
+  loading = false,
+  suggestions = [],
+  onChange = () => {
+  },
+  onClear = () => {
+  }
+}) => {
+  const [query, setQuery] = useState7("");
+  const handleInputChange = (e) => {
+    setQuery(e.target.value);
+    onChange(e.target.value);
+  };
+  const handleClear = () => {
+    setQuery("");
+    onClear();
+  };
+  return /* @__PURE__ */ React8.createElement("div", { style: { position: "relative", width: "100%" } }, /* @__PURE__ */ React8.createElement(
+    "input",
+    {
+      value: query,
+      placeholder,
+      onChange: handleInputChange,
+      style: {
+        background: bg,
+        color: textColor,
+        padding: "10px",
+        borderRadius: "8px",
+        border: "1px solid #cbd5e1",
+        width: "100%",
+        transition: "border-color 0.3s",
+        outline: "none"
+      }
+    }
+  ), query && /* @__PURE__ */ React8.createElement("button", { onClick: handleClear, style: {
+    position: "absolute",
+    right: "10px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    background: "transparent",
+    color: accent,
+    border: "none",
+    cursor: "pointer"
+  } }, "Clear"), loading && /* @__PURE__ */ React8.createElement("div", { style: {
+    position: "absolute",
+    left: "10px",
+    top: "50%",
+    transform: "translateY(-50%)"
+  } }, "Loading..."), suggestions.length > 0 && !loading && /* @__PURE__ */ React8.createElement("ul", { style: {
+    listStyleType: "none",
+    margin: 0,
+    padding: "10px",
+    background: bg,
+    borderRadius: "8px",
+    position: "absolute",
+    zIndex: 1e3,
+    width: "100%",
+    maxHeight: "200px",
+    overflowY: "auto"
+  } }, suggestions.map((suggestion, index) => /* @__PURE__ */ React8.createElement("li", { key: index, style: {
+    padding: "8px",
+    color: textColor,
+    cursor: "pointer",
+    transition: "background 0.2s"
+  }, onClick: () => {
+    setQuery(suggestion);
+    onChange(suggestion);
+  } }, suggestion))));
+};
 export {
   CodeBlock,
   CustomInputField,
   OtpInput,
+  SearchBar,
   SmartButton,
   StatCard,
+  TextArea,
   ToastNotification
 };

package/package.json

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