virtual-ui-lib 1.0.18 → 1.0.20

package/dist/index.js

@@ -34,7 +34,9 @@ __export(index_exports, {
   Card: () => Card,
   Dropdown: () => Dropdown,
   EmptyState: () => EmptyState,
-  FormInput: () => FormInput
+  FormInput: () => FormInput,
+  GridLayout: () => GridLayout,
+  Navbar: () => Navbar
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -360,6 +362,119 @@ var FormInput = ({
     }
   ), isError && /* @__PURE__ */ import_react6.default.createElement("p", { style: { marginTop: "8px", color: "#ef4444", fontSize: "12px", opacity: 0, animation: "fadeIn 0.3s forwards" } }, errorMessage), isSuccess && /* @__PURE__ */ import_react6.default.createElement("p", { style: { marginTop: "8px", color: "#22c55e", fontSize: "12px" } }, "Input is valid!"), /* @__PURE__ */ import_react6.default.createElement("style", null, `@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }`));
 };
+
+// src/components/GridLayout/GridLayout.jsx
+var import_react7 = __toESM(require("react"));
+var GridLayout = ({
+  items = [],
+  cols = 3,
+  loading = false,
+  emptyMessage = "No items available",
+  itemBg = "#1f2937",
+  itemColor = "#f1f5f9",
+  spacing = "16px",
+  radius = "8px"
+}) => {
+  const renderItem = (item, index) => /* @__PURE__ */ import_react7.default.createElement("div", { key: index, style: {
+    background: itemBg,
+    color: itemColor,
+    borderRadius: radius,
+    padding: "16px",
+    margin: spacing,
+    transition: "transform 0.3s, box-shadow 0.3s",
+    boxShadow: "0 2px 10px rgba(0, 0, 0, 0.15)",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    cursor: "pointer"
+  }, onMouseEnter: (e) => {
+    e.currentTarget.style.transform = "scale(1.05)";
+  }, onMouseLeave: (e) => {
+    e.currentTarget.style.transform = "scale(1)";
+  } }, item);
+  if (loading) {
+    return /* @__PURE__ */ import_react7.default.createElement("div", { style: { display: "grid", gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: spacing } }, Array.from({ length: cols * 3 }).map((_, index) => /* @__PURE__ */ import_react7.default.createElement("div", { key: index, style: { background: "#334155", height: "100px", borderRadius: radius } })));
+  }
+  if (items.length === 0) {
+    return /* @__PURE__ */ import_react7.default.createElement("div", { style: { color: itemColor, textAlign: "center", padding: "20px" } }, emptyMessage);
+  }
+  return /* @__PURE__ */ import_react7.default.createElement("div", { style: { display: "grid", gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: spacing } }, items.map(renderItem));
+};
+
+// src/components/Navbar/Navbar.jsx
+var import_react8 = __toESM(require("react"));
+var Navbar = ({
+  logo = "Logo",
+  links = [{ name: "Home", href: "#" }, { name: "About", href: "#" }, { name: "Services", href: "#" }, { name: "Contact", href: "#" }],
+  bgColor = "#0f172a",
+  linkColor = "#f1f5f9",
+  hoverColor = "#7c3aed",
+  stickyColor = "#1e293b",
+  radius = "8px"
+}) => {
+  const [isMobileMenuOpen, setMobileMenuOpen] = (0, import_react8.useState)(false);
+  const [isSticky, setSticky] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
+    const handleScroll = () => {
+      setSticky(window.scrollY > 50);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+  return /* @__PURE__ */ import_react8.default.createElement("nav", { style: {
+    background: isSticky ? stickyColor : bgColor,
+    position: isSticky ? "fixed" : "relative",
+    width: "100%",
+    padding: "10px 20px",
+    boxShadow: isSticky ? "0 2px 10px rgba(0,0,0,0.2)" : "none",
+    transition: "background 0.3s ease"
+  } }, /* @__PURE__ */ import_react8.default.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ import_react8.default.createElement("div", { style: { color: linkColor, fontSize: "20px", fontWeight: "600" } }, logo), /* @__PURE__ */ import_react8.default.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ import_react8.default.createElement("ul", { style: { display: "flex", listStyle: "none", gap: "20px", margin: 0, padding: 0 } }, links.map((link) => /* @__PURE__ */ import_react8.default.createElement("li", { key: link.name }, /* @__PURE__ */ import_react8.default.createElement("a", { href: link.href, style: {
+    textDecoration: "none",
+    color: linkColor,
+    position: "relative",
+    fontSize: "16px",
+    transition: "color 0.3s"
+  }, onMouseOver: (e) => e.currentTarget.style.color = hoverColor, onMouseOut: (e) => e.currentTarget.style.color = linkColor }, link.name, /* @__PURE__ */ import_react8.default.createElement("span", { style: {
+    position: "absolute",
+    bottom: "-3px",
+    left: 0,
+    width: "100%",
+    height: "2px",
+    background: hoverColor,
+    transform: "scaleX(0)",
+    transition: "transform 0.3s ease"
+  }, className: "underline" }))))), /* @__PURE__ */ import_react8.default.createElement("button", { onClick: () => setMobileMenuOpen(true), style: {
+    background: "transparent",
+    color: linkColor,
+    border: "none",
+    cursor: "pointer",
+    fontSize: "16px",
+    marginLeft: "20px"
+  } }, "\u2630"))), isMobileMenuOpen && /* @__PURE__ */ import_react8.default.createElement("div", { style: {
+    position: "fixed",
+    top: 0,
+    right: 0,
+    width: "250px",
+    height: "100%",
+    background: bgColor,
+    boxShadow: "-4px 0 10px rgba(0,0,0,0.5)",
+    padding: "20px",
+    transform: "translateX(0)",
+    transition: "transform 0.3s ease"
+  } }, /* @__PURE__ */ import_react8.default.createElement("button", { onClick: () => setMobileMenuOpen(false), style: {
+    background: "transparent",
+    color: linkColor,
+    border: "none",
+    cursor: "pointer",
+    fontSize: "16px",
+    marginBottom: "20px"
+  } }, "\u2716"), /* @__PURE__ */ import_react8.default.createElement("ul", { style: { listStyle: "none", padding: 0 } }, links.map((link) => /* @__PURE__ */ import_react8.default.createElement("li", { key: link.name, style: { margin: "10px 0" } }, /* @__PURE__ */ import_react8.default.createElement("a", { href: link.href, style: {
+    textDecoration: "none",
+    color: linkColor,
+    fontSize: "18px",
+    transition: "color 0.3s"
+  }, onMouseOver: (e) => e.currentTarget.style.color = hoverColor, onMouseOut: (e) => e.currentTarget.style.color = linkColor }, link.name))))));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AlertBanner,
@@ -367,5 +482,7 @@ var FormInput = ({
   Card,
   Dropdown,
   EmptyState,
-  FormInput
+  FormInput,
+  GridLayout,
+  Navbar
 });

package/dist/index.mjs

@@ -320,11 +320,126 @@ var FormInput = ({
     }
   ), isError && /* @__PURE__ */ React6.createElement("p", { style: { marginTop: "8px", color: "#ef4444", fontSize: "12px", opacity: 0, animation: "fadeIn 0.3s forwards" } }, errorMessage), isSuccess && /* @__PURE__ */ React6.createElement("p", { style: { marginTop: "8px", color: "#22c55e", fontSize: "12px" } }, "Input is valid!"), /* @__PURE__ */ React6.createElement("style", null, `@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }`));
 };
+
+// src/components/GridLayout/GridLayout.jsx
+import React7 from "react";
+var GridLayout = ({
+  items = [],
+  cols = 3,
+  loading = false,
+  emptyMessage = "No items available",
+  itemBg = "#1f2937",
+  itemColor = "#f1f5f9",
+  spacing = "16px",
+  radius = "8px"
+}) => {
+  const renderItem = (item, index) => /* @__PURE__ */ React7.createElement("div", { key: index, style: {
+    background: itemBg,
+    color: itemColor,
+    borderRadius: radius,
+    padding: "16px",
+    margin: spacing,
+    transition: "transform 0.3s, box-shadow 0.3s",
+    boxShadow: "0 2px 10px rgba(0, 0, 0, 0.15)",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    cursor: "pointer"
+  }, onMouseEnter: (e) => {
+    e.currentTarget.style.transform = "scale(1.05)";
+  }, onMouseLeave: (e) => {
+    e.currentTarget.style.transform = "scale(1)";
+  } }, item);
+  if (loading) {
+    return /* @__PURE__ */ React7.createElement("div", { style: { display: "grid", gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: spacing } }, Array.from({ length: cols * 3 }).map((_, index) => /* @__PURE__ */ React7.createElement("div", { key: index, style: { background: "#334155", height: "100px", borderRadius: radius } })));
+  }
+  if (items.length === 0) {
+    return /* @__PURE__ */ React7.createElement("div", { style: { color: itemColor, textAlign: "center", padding: "20px" } }, emptyMessage);
+  }
+  return /* @__PURE__ */ React7.createElement("div", { style: { display: "grid", gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: spacing } }, items.map(renderItem));
+};
+
+// src/components/Navbar/Navbar.jsx
+import React8, { useState as useState5, useEffect as useEffect4 } from "react";
+var Navbar = ({
+  logo = "Logo",
+  links = [{ name: "Home", href: "#" }, { name: "About", href: "#" }, { name: "Services", href: "#" }, { name: "Contact", href: "#" }],
+  bgColor = "#0f172a",
+  linkColor = "#f1f5f9",
+  hoverColor = "#7c3aed",
+  stickyColor = "#1e293b",
+  radius = "8px"
+}) => {
+  const [isMobileMenuOpen, setMobileMenuOpen] = useState5(false);
+  const [isSticky, setSticky] = useState5(false);
+  useEffect4(() => {
+    const handleScroll = () => {
+      setSticky(window.scrollY > 50);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+  return /* @__PURE__ */ React8.createElement("nav", { style: {
+    background: isSticky ? stickyColor : bgColor,
+    position: isSticky ? "fixed" : "relative",
+    width: "100%",
+    padding: "10px 20px",
+    boxShadow: isSticky ? "0 2px 10px rgba(0,0,0,0.2)" : "none",
+    transition: "background 0.3s ease"
+  } }, /* @__PURE__ */ React8.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React8.createElement("div", { style: { color: linkColor, fontSize: "20px", fontWeight: "600" } }, logo), /* @__PURE__ */ React8.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React8.createElement("ul", { style: { display: "flex", listStyle: "none", gap: "20px", margin: 0, padding: 0 } }, links.map((link) => /* @__PURE__ */ React8.createElement("li", { key: link.name }, /* @__PURE__ */ React8.createElement("a", { href: link.href, style: {
+    textDecoration: "none",
+    color: linkColor,
+    position: "relative",
+    fontSize: "16px",
+    transition: "color 0.3s"
+  }, onMouseOver: (e) => e.currentTarget.style.color = hoverColor, onMouseOut: (e) => e.currentTarget.style.color = linkColor }, link.name, /* @__PURE__ */ React8.createElement("span", { style: {
+    position: "absolute",
+    bottom: "-3px",
+    left: 0,
+    width: "100%",
+    height: "2px",
+    background: hoverColor,
+    transform: "scaleX(0)",
+    transition: "transform 0.3s ease"
+  }, className: "underline" }))))), /* @__PURE__ */ React8.createElement("button", { onClick: () => setMobileMenuOpen(true), style: {
+    background: "transparent",
+    color: linkColor,
+    border: "none",
+    cursor: "pointer",
+    fontSize: "16px",
+    marginLeft: "20px"
+  } }, "\u2630"))), isMobileMenuOpen && /* @__PURE__ */ React8.createElement("div", { style: {
+    position: "fixed",
+    top: 0,
+    right: 0,
+    width: "250px",
+    height: "100%",
+    background: bgColor,
+    boxShadow: "-4px 0 10px rgba(0,0,0,0.5)",
+    padding: "20px",
+    transform: "translateX(0)",
+    transition: "transform 0.3s ease"
+  } }, /* @__PURE__ */ React8.createElement("button", { onClick: () => setMobileMenuOpen(false), style: {
+    background: "transparent",
+    color: linkColor,
+    border: "none",
+    cursor: "pointer",
+    fontSize: "16px",
+    marginBottom: "20px"
+  } }, "\u2716"), /* @__PURE__ */ React8.createElement("ul", { style: { listStyle: "none", padding: 0 } }, links.map((link) => /* @__PURE__ */ React8.createElement("li", { key: link.name, style: { margin: "10px 0" } }, /* @__PURE__ */ React8.createElement("a", { href: link.href, style: {
+    textDecoration: "none",
+    color: linkColor,
+    fontSize: "18px",
+    transition: "color 0.3s"
+  }, onMouseOver: (e) => e.currentTarget.style.color = hoverColor, onMouseOut: (e) => e.currentTarget.style.color = linkColor }, link.name))))));
+};
 export {
   AlertBanner,
   Button,
   Card,
   Dropdown,
   EmptyState,
-  FormInput
+  FormInput,
+  GridLayout,
+  Navbar
 };

package/package.json

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