virtual-ui-lib 1.0.43 → 1.0.44

package/dist/index.js

@@ -32,6 +32,7 @@ __export(index_exports, {
   CodeBlock: () => CodeBlock,
   CustomInputField: () => CustomInputField,
   OtpInput: () => OtpInput,
+  SearchBar: () => SearchBar,
   SmartButton: () => SmartButton,
   StatCard: () => StatCard,
   TextArea: () => TextArea,
@@ -390,11 +391,88 @@ var TextArea = ({
     }
   ), /* @__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,

package/dist/index.mjs

@@ -349,10 +349,87 @@ var TextArea = ({
     }
   ), /* @__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,

package/package.json

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