virtuo-ui-library 1.0.8 → 1.0.10

package/dist/index.js

@@ -32,7 +32,9 @@ __export(index_exports, {
   Button: () => Button,
   Card: () => Card,
   EcommerceCard: () => EcommerceCard,
-  ProfileCard: () => ProfileCard
+  NavBar: () => NavBar,
+  ProfileCard: () => ProfileCard,
+  SideBar: () => SideBar
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -351,10 +353,148 @@ var Card = ({
     /* @__PURE__ */ import_react4.default.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ import_react4.default.createElement("h3", { style: { fontSize: "15px", fontWeight: "700", color: "#fff", margin: "0 0 8px", lineHeight: 1.4 } }, title), /* @__PURE__ */ import_react4.default.createElement("p", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", lineHeight: 1.65, margin: "0 0 18px" } }, description))
   );
 };
+
+// src/components/NavBar/NavBar.jsx
+var import_react5 = __toESM(require("react"));
+var NavBar = ({
+  logo = "VirtualAI",
+  links = ["Home", "Features", "Pricing", "Blog"],
+  ctaText = "Get Started",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onCtaClick = () => {
+  },
+  onLinkClick = () => {
+  }
+}) => {
+  const [active, setActive] = (0, import_react5.useState)("Home");
+  const [isMobile, setIsMobile] = (0, import_react5.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 + ")";
+  };
+  (0, import_react5.useEffect)(() => {
+    const check = () => setIsMobile(window.innerWidth < 768);
+    check();
+    window.addEventListener("resize", check);
+    return () => window.removeEventListener("resize", check);
+  }, []);
+  return /* @__PURE__ */ import_react5.default.createElement("nav", { style: { background: bg, borderBottom: "1px solid rgba(255,255,255,0.06)", fontFamily: "system-ui,sans-serif", width: "100%", boxSizing: "border-box", borderRadius: "12px" } }, /* @__PURE__ */ import_react5.default.createElement("div", { style: { maxWidth: "1100px", margin: "0 auto", padding: "0 20px", height: "60px", display: "flex", alignItems: "center", justifyContent: "space-between" } }, /* @__PURE__ */ import_react5.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer" } }, /* @__PURE__ */ import_react5.default.createElement("div", { style: { width: "28px", height: "28px", borderRadius: "8px", background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.6) + ")", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "13px", fontWeight: "800", color: "#fff" } }, logo[0]), /* @__PURE__ */ import_react5.default.createElement("span", { style: { fontSize: "15px", fontWeight: "800", color: "#fff" } }, logo)), !isMobile && /* @__PURE__ */ import_react5.default.createElement("div", { style: { display: "flex", gap: "2px" } }, links.map((link) => /* @__PURE__ */ import_react5.default.createElement("button", { key: link, onClick: () => {
+    setActive(link);
+    onLinkClick(link);
+  }, style: { background: active === link ? alpha(accent, 0.12) : "transparent", border: "none", padding: "7px 16px", borderRadius: "9px", fontSize: "14px", fontWeight: active === link ? "700" : "500", color: active === link ? accent : "rgba(255,255,255,0.5)", cursor: "pointer", fontFamily: "inherit" } }, link))), /* @__PURE__ */ import_react5.default.createElement("button", { onClick: onCtaClick, style: { padding: "8px 18px", borderRadius: "10px", border: "none", background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.75) + ")", color: "#fff", fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" } }, ctaText)));
+};
+
+// src/components/SideBar/SideBar.jsx
+var import_react6 = __toESM(require("react"));
+var SideBar = ({
+  items = ["Dashboard", "Projects", "Team", "Calendar", "Messages"],
+  activeItem = "Dashboard",
+  logo = "Company",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  width = "280px",
+  onItemClick = () => {
+  }
+}) => {
+  const [hoveredItem, setHoveredItem] = (0, import_react6.useState)(null);
+  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 + ")";
+  };
+  return /* @__PURE__ */ import_react6.default.createElement("div", { style: {
+    width,
+    background: bg,
+    height: "100vh",
+    borderRight: "1px solid rgba(255,255,255,0.08)",
+    fontFamily: "system-ui,sans-serif",
+    display: "flex",
+    flexDirection: "column",
+    padding: "24px 0"
+  } }, /* @__PURE__ */ import_react6.default.createElement("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    padding: "0 24px",
+    marginBottom: "32px"
+  } }, /* @__PURE__ */ import_react6.default.createElement("div", { style: {
+    width: "32px",
+    height: "32px",
+    borderRadius: "8px",
+    background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "#fff",
+    fontWeight: "700",
+    fontSize: "14px"
+  } }, logo[0]), /* @__PURE__ */ import_react6.default.createElement("div", { style: { color: "#fff", fontWeight: "700", fontSize: "16px" } }, logo)), /* @__PURE__ */ import_react6.default.createElement("div", { style: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px",
+    padding: "0 16px"
+  } }, items.map((item) => /* @__PURE__ */ import_react6.default.createElement(
+    "button",
+    {
+      key: item,
+      onClick: () => onItemClick(item),
+      onMouseEnter: () => setHoveredItem(item),
+      onMouseLeave: () => setHoveredItem(null),
+      style: {
+        background: activeItem === item ? alpha(accent, 0.15) : hoveredItem === item ? "rgba(255,255,255,0.03)" : "transparent",
+        border: "none",
+        padding: "10px 16px",
+        borderRadius: "8px",
+        display: "flex",
+        alignItems: "center",
+        gap: "10px",
+        cursor: "pointer",
+        color: activeItem === item ? accent : "rgba(255,255,255,0.7)",
+        fontWeight: activeItem === item ? "600" : "500",
+        fontSize: "14px",
+        transition: "all 0.2s"
+      }
+    },
+    /* @__PURE__ */ import_react6.default.createElement("div", { style: {
+      width: "24px",
+      height: "24px",
+      borderRadius: "6px",
+      background: activeItem === item ? alpha(accent, 0.2) : "rgba(255,255,255,0.05)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    } }, /* @__PURE__ */ import_react6.default.createElement("div", { style: {
+      width: "4px",
+      height: "4px",
+      borderRadius: "50%",
+      background: activeItem === item ? accent : "rgba(255,255,255,0.3)"
+    } })),
+    item
+  ))), /* @__PURE__ */ import_react6.default.createElement("div", { style: {
+    marginTop: "auto",
+    padding: "16px 24px",
+    borderTop: "1px solid rgba(255,255,255,0.08)"
+  } }, /* @__PURE__ */ import_react6.default.createElement("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    padding: "8px 12px",
+    borderRadius: "8px",
+    background: "rgba(255,255,255,0.03)",
+    cursor: "pointer"
+  } }, /* @__PURE__ */ import_react6.default.createElement("div", { style: {
+    width: "32px",
+    height: "32px",
+    borderRadius: "50%",
+    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")))));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
   Card,
   EcommerceCard,
-  ProfileCard
+  NavBar,
+  ProfileCard,
+  SideBar
 });

package/dist/index.mjs

@@ -313,9 +313,147 @@ var Card = ({
     /* @__PURE__ */ React4.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ React4.createElement("h3", { style: { fontSize: "15px", fontWeight: "700", color: "#fff", margin: "0 0 8px", lineHeight: 1.4 } }, title), /* @__PURE__ */ React4.createElement("p", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", lineHeight: 1.65, margin: "0 0 18px" } }, description))
   );
 };
+
+// src/components/NavBar/NavBar.jsx
+import React5, { useState as useState4, useEffect } from "react";
+var NavBar = ({
+  logo = "VirtualAI",
+  links = ["Home", "Features", "Pricing", "Blog"],
+  ctaText = "Get Started",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onCtaClick = () => {
+  },
+  onLinkClick = () => {
+  }
+}) => {
+  const [active, setActive] = useState4("Home");
+  const [isMobile, setIsMobile] = useState4(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 + ")";
+  };
+  useEffect(() => {
+    const check = () => setIsMobile(window.innerWidth < 768);
+    check();
+    window.addEventListener("resize", check);
+    return () => window.removeEventListener("resize", check);
+  }, []);
+  return /* @__PURE__ */ React5.createElement("nav", { style: { background: bg, borderBottom: "1px solid rgba(255,255,255,0.06)", fontFamily: "system-ui,sans-serif", width: "100%", boxSizing: "border-box", borderRadius: "12px" } }, /* @__PURE__ */ React5.createElement("div", { style: { maxWidth: "1100px", margin: "0 auto", padding: "0 20px", height: "60px", display: "flex", alignItems: "center", justifyContent: "space-between" } }, /* @__PURE__ */ React5.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer" } }, /* @__PURE__ */ React5.createElement("div", { style: { width: "28px", height: "28px", borderRadius: "8px", background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.6) + ")", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "13px", fontWeight: "800", color: "#fff" } }, logo[0]), /* @__PURE__ */ React5.createElement("span", { style: { fontSize: "15px", fontWeight: "800", color: "#fff" } }, logo)), !isMobile && /* @__PURE__ */ React5.createElement("div", { style: { display: "flex", gap: "2px" } }, links.map((link) => /* @__PURE__ */ React5.createElement("button", { key: link, onClick: () => {
+    setActive(link);
+    onLinkClick(link);
+  }, style: { background: active === link ? alpha(accent, 0.12) : "transparent", border: "none", padding: "7px 16px", borderRadius: "9px", fontSize: "14px", fontWeight: active === link ? "700" : "500", color: active === link ? accent : "rgba(255,255,255,0.5)", cursor: "pointer", fontFamily: "inherit" } }, link))), /* @__PURE__ */ React5.createElement("button", { onClick: onCtaClick, style: { padding: "8px 18px", borderRadius: "10px", border: "none", background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.75) + ")", color: "#fff", fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" } }, ctaText)));
+};
+
+// src/components/SideBar/SideBar.jsx
+import React6, { useState as useState5 } from "react";
+var SideBar = ({
+  items = ["Dashboard", "Projects", "Team", "Calendar", "Messages"],
+  activeItem = "Dashboard",
+  logo = "Company",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  width = "280px",
+  onItemClick = () => {
+  }
+}) => {
+  const [hoveredItem, setHoveredItem] = useState5(null);
+  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 + ")";
+  };
+  return /* @__PURE__ */ React6.createElement("div", { style: {
+    width,
+    background: bg,
+    height: "100vh",
+    borderRight: "1px solid rgba(255,255,255,0.08)",
+    fontFamily: "system-ui,sans-serif",
+    display: "flex",
+    flexDirection: "column",
+    padding: "24px 0"
+  } }, /* @__PURE__ */ React6.createElement("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    padding: "0 24px",
+    marginBottom: "32px"
+  } }, /* @__PURE__ */ React6.createElement("div", { style: {
+    width: "32px",
+    height: "32px",
+    borderRadius: "8px",
+    background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "#fff",
+    fontWeight: "700",
+    fontSize: "14px"
+  } }, logo[0]), /* @__PURE__ */ React6.createElement("div", { style: { color: "#fff", fontWeight: "700", fontSize: "16px" } }, logo)), /* @__PURE__ */ React6.createElement("div", { style: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px",
+    padding: "0 16px"
+  } }, items.map((item) => /* @__PURE__ */ React6.createElement(
+    "button",
+    {
+      key: item,
+      onClick: () => onItemClick(item),
+      onMouseEnter: () => setHoveredItem(item),
+      onMouseLeave: () => setHoveredItem(null),
+      style: {
+        background: activeItem === item ? alpha(accent, 0.15) : hoveredItem === item ? "rgba(255,255,255,0.03)" : "transparent",
+        border: "none",
+        padding: "10px 16px",
+        borderRadius: "8px",
+        display: "flex",
+        alignItems: "center",
+        gap: "10px",
+        cursor: "pointer",
+        color: activeItem === item ? accent : "rgba(255,255,255,0.7)",
+        fontWeight: activeItem === item ? "600" : "500",
+        fontSize: "14px",
+        transition: "all 0.2s"
+      }
+    },
+    /* @__PURE__ */ React6.createElement("div", { style: {
+      width: "24px",
+      height: "24px",
+      borderRadius: "6px",
+      background: activeItem === item ? alpha(accent, 0.2) : "rgba(255,255,255,0.05)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    } }, /* @__PURE__ */ React6.createElement("div", { style: {
+      width: "4px",
+      height: "4px",
+      borderRadius: "50%",
+      background: activeItem === item ? accent : "rgba(255,255,255,0.3)"
+    } })),
+    item
+  ))), /* @__PURE__ */ React6.createElement("div", { style: {
+    marginTop: "auto",
+    padding: "16px 24px",
+    borderTop: "1px solid rgba(255,255,255,0.08)"
+  } }, /* @__PURE__ */ React6.createElement("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    padding: "8px 12px",
+    borderRadius: "8px",
+    background: "rgba(255,255,255,0.03)",
+    cursor: "pointer"
+  } }, /* @__PURE__ */ React6.createElement("div", { style: {
+    width: "32px",
+    height: "32px",
+    borderRadius: "50%",
+    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")))));
+};
 export {
   Button,
   Card,
   EcommerceCard,
-  ProfileCard
+  NavBar,
+  ProfileCard,
+  SideBar
 };

package/package.json

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