virtuo-ui-library 1.0.10 → 1.0.12

package/dist/index.js

@@ -32,8 +32,10 @@ __export(index_exports, {
   Button: () => Button,
   Card: () => Card,
   EcommerceCard: () => EcommerceCard,
+  LoginForm: () => LoginForm,
   NavBar: () => NavBar,
   ProfileCard: () => ProfileCard,
+  SearchBar: () => SearchBar,
   SideBar: () => SideBar
 });
 module.exports = __toCommonJS(index_exports);
@@ -489,12 +491,257 @@ var SideBar = ({
     background: "rgba(255,255,255,0.1)"
   } }), /* @__PURE__ */ import_react6.default.createElement("div", null, /* @__PURE__ */ import_react6.default.createElement("div", { style: { color: "#fff", fontSize: "13px", fontWeight: "600" } }, "John Doe"), /* @__PURE__ */ import_react6.default.createElement("div", { style: { color: "rgba(255,255,255,0.4)", fontSize: "11px" } }, "Admin")))));
 };
+
+// src/components/LoginForm/LoginForm.jsx
+var import_react7 = __toESM(require("react"));
+var LoginForm = ({
+  title = "Welcome back",
+  subtitle = "Sign in to your account",
+  emailLabel = "Email address",
+  passwordLabel = "Password",
+  rememberLabel = "Remember me",
+  forgotLabel = "Forgot password?",
+  submitText = "Sign in",
+  noAccountText = "Don't have an account?",
+  signupText = "Sign up",
+  accent = "#6366f1",
+  bg = "#1e293b",
+  onSubmit = (email, password) => console.log(email, password),
+  onForgotClick = () => {
+  },
+  onSignupClick = () => {
+  }
+}) => {
+  const [email, setEmail] = (0, import_react7.useState)("");
+  const [password, setPassword] = (0, import_react7.useState)("");
+  const [remember, setRemember] = (0, import_react7.useState)(false);
+  const [isSubmitting, setIsSubmitting] = (0, import_react7.useState)(false);
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+    return "rgba(" + r + "," + g + "," + b + "," + op + ")";
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setTimeout(() => {
+      onSubmit(email, password);
+      setIsSubmitting(false);
+    }, 1e3);
+  };
+  return /* @__PURE__ */ import_react7.default.createElement("div", { style: {
+    background: bg,
+    borderRadius: "16px",
+    padding: "32px",
+    width: "360px",
+    border: "1px solid rgba(255,255,255,0.08)",
+    boxShadow: "0 10px 40px rgba(0,0,0,0.4)",
+    fontFamily: "system-ui,sans-serif"
+  } }, /* @__PURE__ */ import_react7.default.createElement("div", { style: { marginBottom: "28px" } }, /* @__PURE__ */ import_react7.default.createElement("h2", { style: { fontSize: "22px", fontWeight: "700", color: "#fff", margin: "0 0 6px" } }, title), /* @__PURE__ */ import_react7.default.createElement("p", { style: { fontSize: "14px", color: "rgba(255,255,255,0.5)", margin: 0 } }, subtitle)), /* @__PURE__ */ import_react7.default.createElement("form", { onSubmit: handleSubmit }, /* @__PURE__ */ import_react7.default.createElement("div", { style: { marginBottom: "18px" } }, /* @__PURE__ */ import_react7.default.createElement("label", { style: { display: "block", fontSize: "13px", fontWeight: "600", color: "rgba(255,255,255,0.7)", marginBottom: "8px" } }, emailLabel), /* @__PURE__ */ import_react7.default.createElement(
+    "input",
+    {
+      type: "email",
+      value: email,
+      onChange: (e) => setEmail(e.target.value),
+      required: true,
+      style: {
+        width: "100%",
+        padding: "12px 14px",
+        borderRadius: "10px",
+        border: "1px solid rgba(255,255,255,0.1)",
+        background: "rgba(255,255,255,0.05)",
+        color: "#fff",
+        fontSize: "14px",
+        outline: "none",
+        transition: "border-color 0.2s",
+        boxSizing: "border-box"
+      }
+    }
+  )), /* @__PURE__ */ import_react7.default.createElement("div", { style: { marginBottom: "18px" } }, /* @__PURE__ */ import_react7.default.createElement("label", { style: { display: "block", fontSize: "13px", fontWeight: "600", color: "rgba(255,255,255,0.7)", marginBottom: "8px" } }, passwordLabel), /* @__PURE__ */ import_react7.default.createElement(
+    "input",
+    {
+      type: "password",
+      value: password,
+      onChange: (e) => setPassword(e.target.value),
+      required: true,
+      style: {
+        width: "100%",
+        padding: "12px 14px",
+        borderRadius: "10px",
+        border: "1px solid rgba(255,255,255,0.1)",
+        background: "rgba(255,255,255,0.05)",
+        color: "#fff",
+        fontSize: "14px",
+        outline: "none",
+        transition: "border-color 0.2s",
+        boxSizing: "border-box"
+      }
+    }
+  )), /* @__PURE__ */ import_react7.default.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "24px" } }, /* @__PURE__ */ import_react7.default.createElement("label", { style: { display: "flex", alignItems: "center", gap: "8px", fontSize: "13px", color: "rgba(255,255,255,0.7)", cursor: "pointer" } }, /* @__PURE__ */ import_react7.default.createElement(
+    "input",
+    {
+      type: "checkbox",
+      checked: remember,
+      onChange: (e) => setRemember(e.target.checked),
+      style: {
+        width: "16px",
+        height: "16px",
+        borderRadius: "4px",
+        border: "1px solid " + alpha(accent, 0.5),
+        background: remember ? accent : "transparent",
+        cursor: "pointer"
+      }
+    }
+  ), rememberLabel), /* @__PURE__ */ import_react7.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: onForgotClick,
+      style: {
+        background: "none",
+        border: "none",
+        color: accent,
+        fontSize: "13px",
+        fontWeight: "600",
+        cursor: "pointer",
+        padding: 0
+      }
+    },
+    forgotLabel
+  )), /* @__PURE__ */ import_react7.default.createElement(
+    "button",
+    {
+      type: "submit",
+      disabled: isSubmitting,
+      style: {
+        width: "100%",
+        padding: "14px",
+        borderRadius: "10px",
+        border: "none",
+        background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")",
+        color: "#fff",
+        fontSize: "14px",
+        fontWeight: "700",
+        cursor: "pointer",
+        opacity: isSubmitting ? 0.8 : 1,
+        transition: "opacity 0.2s",
+        marginBottom: "20px"
+      }
+    },
+    isSubmitting ? "Signing in..." : submitText
+  ), /* @__PURE__ */ import_react7.default.createElement("div", { style: { textAlign: "center", fontSize: "13px", color: "rgba(255,255,255,0.5)" } }, noAccountText, /* @__PURE__ */ import_react7.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: onSignupClick,
+      style: {
+        background: "none",
+        border: "none",
+        color: accent,
+        fontWeight: "600",
+        cursor: "pointer",
+        padding: 0,
+        fontSize: "inherit"
+      }
+    },
+    signupText
+  ))));
+};
+
+// src/components/SearchBar/SearchBar.jsx
+var import_react8 = __toESM(require("react"));
+var SearchBar = ({
+  placeholder = "Search...",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  width = "400px",
+  onSearch = (query) => {
+  },
+  debounceTime = 300
+}) => {
+  const [query, setQuery] = (0, import_react8.useState)("");
+  const [isFocused, setIsFocused] = (0, import_react8.useState)(false);
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+    return "rgba(" + r + "," + g + "," + b + "," + op + ")";
+  };
+  const handleChange = (e) => {
+    setQuery(e.target.value);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      onSearch(query);
+    }
+  };
+  return /* @__PURE__ */ import_react8.default.createElement("div", { style: {
+    position: "relative",
+    width,
+    maxWidth: "100%"
+  } }, /* @__PURE__ */ import_react8.default.createElement(
+    "input",
+    {
+      type: "text",
+      value: query,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      onFocus: () => setIsFocused(true),
+      onBlur: () => setIsFocused(false),
+      placeholder,
+      style: {
+        width: "100%",
+        padding: "12px 16px 12px 42px",
+        borderRadius: "12px",
+        border: "1px solid " + (isFocused ? alpha(accent, 0.4) : "rgba(255,255,255,0.1)"),
+        background: "rgba(255,255,255,0.03)",
+        color: "#fff",
+        fontSize: "14px",
+        fontFamily: "system-ui, sans-serif",
+        outline: "none",
+        transition: "border 0.2s, box-shadow 0.2s",
+        boxShadow: isFocused ? "0 0 0 3px " + alpha(accent, 0.15) : "none"
+      }
+    }
+  ), /* @__PURE__ */ import_react8.default.createElement("div", { style: {
+    position: "absolute",
+    left: "16px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    color: isFocused ? accent : "rgba(255,255,255,0.4)",
+    transition: "color 0.2s"
+  } }, /* @__PURE__ */ import_react8.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react8.default.createElement("circle", { cx: "11", cy: "11", r: "8" }), /* @__PURE__ */ import_react8.default.createElement("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }))), query && /* @__PURE__ */ import_react8.default.createElement(
+    "button",
+    {
+      onClick: () => {
+        setQuery("");
+        onSearch("");
+      },
+      style: {
+        position: "absolute",
+        right: "12px",
+        top: "50%",
+        transform: "translateY(-50%)",
+        background: "transparent",
+        border: "none",
+        color: "rgba(255,255,255,0.3)",
+        cursor: "pointer",
+        padding: "4px",
+        borderRadius: "50%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "color 0.2s"
+      }
+    },
+    /* @__PURE__ */ import_react8.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react8.default.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ import_react8.default.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))
+  ));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
   Card,
   EcommerceCard,
+  LoginForm,
   NavBar,
   ProfileCard,
+  SearchBar,
   SideBar
 });

package/dist/index.mjs

@@ -449,11 +449,256 @@ var SideBar = ({
     background: "rgba(255,255,255,0.1)"
   } }), /* @__PURE__ */ React6.createElement("div", null, /* @__PURE__ */ React6.createElement("div", { style: { color: "#fff", fontSize: "13px", fontWeight: "600" } }, "John Doe"), /* @__PURE__ */ React6.createElement("div", { style: { color: "rgba(255,255,255,0.4)", fontSize: "11px" } }, "Admin")))));
 };
+
+// src/components/LoginForm/LoginForm.jsx
+import React7, { useState as useState6 } from "react";
+var LoginForm = ({
+  title = "Welcome back",
+  subtitle = "Sign in to your account",
+  emailLabel = "Email address",
+  passwordLabel = "Password",
+  rememberLabel = "Remember me",
+  forgotLabel = "Forgot password?",
+  submitText = "Sign in",
+  noAccountText = "Don't have an account?",
+  signupText = "Sign up",
+  accent = "#6366f1",
+  bg = "#1e293b",
+  onSubmit = (email, password) => console.log(email, password),
+  onForgotClick = () => {
+  },
+  onSignupClick = () => {
+  }
+}) => {
+  const [email, setEmail] = useState6("");
+  const [password, setPassword] = useState6("");
+  const [remember, setRemember] = useState6(false);
+  const [isSubmitting, setIsSubmitting] = useState6(false);
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+    return "rgba(" + r + "," + g + "," + b + "," + op + ")";
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setTimeout(() => {
+      onSubmit(email, password);
+      setIsSubmitting(false);
+    }, 1e3);
+  };
+  return /* @__PURE__ */ React7.createElement("div", { style: {
+    background: bg,
+    borderRadius: "16px",
+    padding: "32px",
+    width: "360px",
+    border: "1px solid rgba(255,255,255,0.08)",
+    boxShadow: "0 10px 40px rgba(0,0,0,0.4)",
+    fontFamily: "system-ui,sans-serif"
+  } }, /* @__PURE__ */ React7.createElement("div", { style: { marginBottom: "28px" } }, /* @__PURE__ */ React7.createElement("h2", { style: { fontSize: "22px", fontWeight: "700", color: "#fff", margin: "0 0 6px" } }, title), /* @__PURE__ */ React7.createElement("p", { style: { fontSize: "14px", color: "rgba(255,255,255,0.5)", margin: 0 } }, subtitle)), /* @__PURE__ */ React7.createElement("form", { onSubmit: handleSubmit }, /* @__PURE__ */ React7.createElement("div", { style: { marginBottom: "18px" } }, /* @__PURE__ */ React7.createElement("label", { style: { display: "block", fontSize: "13px", fontWeight: "600", color: "rgba(255,255,255,0.7)", marginBottom: "8px" } }, emailLabel), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      type: "email",
+      value: email,
+      onChange: (e) => setEmail(e.target.value),
+      required: true,
+      style: {
+        width: "100%",
+        padding: "12px 14px",
+        borderRadius: "10px",
+        border: "1px solid rgba(255,255,255,0.1)",
+        background: "rgba(255,255,255,0.05)",
+        color: "#fff",
+        fontSize: "14px",
+        outline: "none",
+        transition: "border-color 0.2s",
+        boxSizing: "border-box"
+      }
+    }
+  )), /* @__PURE__ */ React7.createElement("div", { style: { marginBottom: "18px" } }, /* @__PURE__ */ React7.createElement("label", { style: { display: "block", fontSize: "13px", fontWeight: "600", color: "rgba(255,255,255,0.7)", marginBottom: "8px" } }, passwordLabel), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      type: "password",
+      value: password,
+      onChange: (e) => setPassword(e.target.value),
+      required: true,
+      style: {
+        width: "100%",
+        padding: "12px 14px",
+        borderRadius: "10px",
+        border: "1px solid rgba(255,255,255,0.1)",
+        background: "rgba(255,255,255,0.05)",
+        color: "#fff",
+        fontSize: "14px",
+        outline: "none",
+        transition: "border-color 0.2s",
+        boxSizing: "border-box"
+      }
+    }
+  )), /* @__PURE__ */ React7.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "24px" } }, /* @__PURE__ */ React7.createElement("label", { style: { display: "flex", alignItems: "center", gap: "8px", fontSize: "13px", color: "rgba(255,255,255,0.7)", cursor: "pointer" } }, /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      type: "checkbox",
+      checked: remember,
+      onChange: (e) => setRemember(e.target.checked),
+      style: {
+        width: "16px",
+        height: "16px",
+        borderRadius: "4px",
+        border: "1px solid " + alpha(accent, 0.5),
+        background: remember ? accent : "transparent",
+        cursor: "pointer"
+      }
+    }
+  ), rememberLabel), /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: onForgotClick,
+      style: {
+        background: "none",
+        border: "none",
+        color: accent,
+        fontSize: "13px",
+        fontWeight: "600",
+        cursor: "pointer",
+        padding: 0
+      }
+    },
+    forgotLabel
+  )), /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "submit",
+      disabled: isSubmitting,
+      style: {
+        width: "100%",
+        padding: "14px",
+        borderRadius: "10px",
+        border: "none",
+        background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")",
+        color: "#fff",
+        fontSize: "14px",
+        fontWeight: "700",
+        cursor: "pointer",
+        opacity: isSubmitting ? 0.8 : 1,
+        transition: "opacity 0.2s",
+        marginBottom: "20px"
+      }
+    },
+    isSubmitting ? "Signing in..." : submitText
+  ), /* @__PURE__ */ React7.createElement("div", { style: { textAlign: "center", fontSize: "13px", color: "rgba(255,255,255,0.5)" } }, noAccountText, /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: onSignupClick,
+      style: {
+        background: "none",
+        border: "none",
+        color: accent,
+        fontWeight: "600",
+        cursor: "pointer",
+        padding: 0,
+        fontSize: "inherit"
+      }
+    },
+    signupText
+  ))));
+};
+
+// src/components/SearchBar/SearchBar.jsx
+import React8, { useState as useState7 } from "react";
+var SearchBar = ({
+  placeholder = "Search...",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  width = "400px",
+  onSearch = (query) => {
+  },
+  debounceTime = 300
+}) => {
+  const [query, setQuery] = useState7("");
+  const [isFocused, setIsFocused] = useState7(false);
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+    return "rgba(" + r + "," + g + "," + b + "," + op + ")";
+  };
+  const handleChange = (e) => {
+    setQuery(e.target.value);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      onSearch(query);
+    }
+  };
+  return /* @__PURE__ */ React8.createElement("div", { style: {
+    position: "relative",
+    width,
+    maxWidth: "100%"
+  } }, /* @__PURE__ */ React8.createElement(
+    "input",
+    {
+      type: "text",
+      value: query,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      onFocus: () => setIsFocused(true),
+      onBlur: () => setIsFocused(false),
+      placeholder,
+      style: {
+        width: "100%",
+        padding: "12px 16px 12px 42px",
+        borderRadius: "12px",
+        border: "1px solid " + (isFocused ? alpha(accent, 0.4) : "rgba(255,255,255,0.1)"),
+        background: "rgba(255,255,255,0.03)",
+        color: "#fff",
+        fontSize: "14px",
+        fontFamily: "system-ui, sans-serif",
+        outline: "none",
+        transition: "border 0.2s, box-shadow 0.2s",
+        boxShadow: isFocused ? "0 0 0 3px " + alpha(accent, 0.15) : "none"
+      }
+    }
+  ), /* @__PURE__ */ React8.createElement("div", { style: {
+    position: "absolute",
+    left: "16px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    color: isFocused ? accent : "rgba(255,255,255,0.4)",
+    transition: "color 0.2s"
+  } }, /* @__PURE__ */ React8.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React8.createElement("circle", { cx: "11", cy: "11", r: "8" }), /* @__PURE__ */ React8.createElement("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }))), query && /* @__PURE__ */ React8.createElement(
+    "button",
+    {
+      onClick: () => {
+        setQuery("");
+        onSearch("");
+      },
+      style: {
+        position: "absolute",
+        right: "12px",
+        top: "50%",
+        transform: "translateY(-50%)",
+        background: "transparent",
+        border: "none",
+        color: "rgba(255,255,255,0.3)",
+        cursor: "pointer",
+        padding: "4px",
+        borderRadius: "50%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "color 0.2s"
+      }
+    },
+    /* @__PURE__ */ React8.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React8.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ React8.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))
+  ));
+};
 export {
   Button,
   Card,
   EcommerceCard,
+  LoginForm,
   NavBar,
   ProfileCard,
+  SearchBar,
   SideBar
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtuo-ui-library",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "Virtual UI React Component Library",
   "license": "ISC",
   "author": "Ritik Saini",