virtual-ui-lib 1.0.59 → 1.0.60

package/dist/index.js

@@ -37,6 +37,7 @@ __export(index_exports, {
   FileUpload: () => FileUpload,
   Loader: () => Loader,
   LoadingSpinner: () => LoadingSpinner,
+  Navbar: () => Navbar,
   NotificationToast: () => NotificationToast,
   OtpInput: () => OtpInput,
   PricingCard: () => PricingCard,
@@ -1115,6 +1116,255 @@ var PricingCard = ({
     ctaText
   ));
 };
+
+// src/components/Navbar/Navbar.jsx
+var import_react20 = __toESM(require("react"));
+var Navbar = ({
+  logo = "VirtualAI",
+  links = ["Home", "Features", "Pricing", "Blog"],
+  ctaText = "Get Started",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onCtaClick = () => {
+  },
+  onLinkClick = () => {
+  }
+}) => {
+  const [scrolled, setScrolled] = (0, import_react20.useState)(false);
+  const [menuOpen, setMenuOpen] = (0, import_react20.useState)(false);
+  const [active, setActive] = (0, import_react20.useState)("Home");
+  const [isMobile, setIsMobile] = (0, import_react20.useState)(false);
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r},${g},${b},${op})`;
+  };
+  (0, import_react20.useEffect)(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+  (0, import_react20.useEffect)(() => {
+    const handler = () => setScrolled(window.scrollY > 10);
+    window.addEventListener("scroll", handler);
+    return () => window.removeEventListener("scroll", handler);
+  }, []);
+  (0, import_react20.useEffect)(() => {
+    if (!isMobile) setMenuOpen(false);
+  }, [isMobile]);
+  const handleLink = (link) => {
+    setActive(link);
+    setMenuOpen(false);
+    onLinkClick(link);
+  };
+  return /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement("style", null, `
+        @keyframes nbSlideDown {
+          from { opacity: 0; transform: translateY(-8px); }
+          to   { opacity: 1; transform: translateY(0); }
+        }
+        .nb-link:hover { color: rgba(255,255,255,0.9) !important; background: rgba(255,255,255,0.05) !important; }
+        .nb-cta:hover  { opacity: 0.85 !important; }
+        .nb-ham:hover  { background: rgba(255,255,255,0.1) !important; }
+        .nb-mlink:hover { background: rgba(255,255,255,0.06) !important; }
+      `), /* @__PURE__ */ import_react20.default.createElement("nav", { style: {
+    position: "sticky",
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1e3,
+    background: scrolled ? alpha(bg, 0.96) : bg,
+    borderBottom: `1px solid ${scrolled ? "rgba(255,255,255,0.09)" : "rgba(255,255,255,0.04)"}`,
+    backdropFilter: scrolled ? "blur(12px)" : "none",
+    WebkitBackdropFilter: scrolled ? "blur(12px)" : "none",
+    transition: "all 0.3s ease",
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    width: "100%",
+    boxSizing: "border-box"
+  } }, /* @__PURE__ */ import_react20.default.createElement("div", { style: {
+    maxWidth: "1200px",
+    margin: "0 auto",
+    padding: "0 20px",
+    height: isMobile ? "56px" : "64px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "16px",
+    boxSizing: "border-box"
+  } }, /* @__PURE__ */ import_react20.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer", flexShrink: 0 } }, /* @__PURE__ */ import_react20.default.createElement("div", { style: {
+    width: isMobile ? "26px" : "30px",
+    height: isMobile ? "26px" : "30px",
+    borderRadius: "8px",
+    background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.6)})`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: isMobile ? "12px" : "14px",
+    fontWeight: "800",
+    color: "#fff",
+    flexShrink: 0
+  } }, logo[0]), /* @__PURE__ */ import_react20.default.createElement("span", { style: {
+    fontSize: isMobile ? "14px" : "16px",
+    fontWeight: "800",
+    color: "#fff",
+    letterSpacing: "-0.3px"
+  } }, logo)), !isMobile && /* @__PURE__ */ import_react20.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "2px", flex: 1, justifyContent: "center" } }, links.map((link) => /* @__PURE__ */ import_react20.default.createElement(
+    "button",
+    {
+      key: link,
+      className: "nb-link",
+      onClick: () => handleLink(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",
+        transition: "all 0.2s",
+        fontFamily: "inherit",
+        whiteSpace: "nowrap"
+      }
+    },
+    link
+  ))), /* @__PURE__ */ import_react20.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0 } }, /* @__PURE__ */ import_react20.default.createElement(
+    "button",
+    {
+      className: "nb-cta",
+      onClick: onCtaClick,
+      style: {
+        padding: isMobile ? "7px 14px" : "9px 20px",
+        borderRadius: "10px",
+        border: "none",
+        background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.75)})`,
+        color: "#fff",
+        fontSize: isMobile ? "12px" : "13px",
+        fontWeight: "700",
+        cursor: "pointer",
+        fontFamily: "inherit",
+        transition: "opacity 0.2s",
+        whiteSpace: "nowrap"
+      }
+    },
+    ctaText
+  ), isMobile && /* @__PURE__ */ import_react20.default.createElement(
+    "button",
+    {
+      className: "nb-ham",
+      onClick: () => setMenuOpen((o) => !o),
+      style: {
+        background: "rgba(255,255,255,0.06)",
+        border: "1px solid rgba(255,255,255,0.1)",
+        borderRadius: "8px",
+        width: "34px",
+        height: "34px",
+        cursor: "pointer",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "5px",
+        transition: "background 0.2s",
+        flexShrink: 0,
+        padding: 0
+      }
+    },
+    /* @__PURE__ */ import_react20.default.createElement("div", { style: {
+      width: "16px",
+      height: "1.5px",
+      background: "rgba(255,255,255,0.7)",
+      borderRadius: "2px",
+      transform: menuOpen ? "rotate(45deg) translate(4px, 4px)" : "none",
+      transition: "transform 0.25s"
+    } }),
+    /* @__PURE__ */ import_react20.default.createElement("div", { style: {
+      width: "16px",
+      height: "1.5px",
+      background: "rgba(255,255,255,0.7)",
+      borderRadius: "2px",
+      opacity: menuOpen ? 0 : 1,
+      transition: "opacity 0.2s"
+    } }),
+    /* @__PURE__ */ import_react20.default.createElement("div", { style: {
+      width: "16px",
+      height: "1.5px",
+      background: "rgba(255,255,255,0.7)",
+      borderRadius: "2px",
+      transform: menuOpen ? "rotate(-45deg) translate(4px, -4px)" : "none",
+      transition: "transform 0.25s"
+    } })
+  ))), isMobile && menuOpen && /* @__PURE__ */ import_react20.default.createElement("div", { style: {
+    animation: "nbSlideDown 0.2s ease",
+    borderTop: "1px solid rgba(255,255,255,0.06)",
+    padding: "10px 16px 16px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "3px",
+    background: alpha(bg, 0.98)
+  } }, links.map((link) => /* @__PURE__ */ import_react20.default.createElement(
+    "button",
+    {
+      key: link,
+      className: "nb-mlink",
+      onClick: () => handleLink(link),
+      style: {
+        background: active === link ? alpha(accent, 0.1) : "transparent",
+        border: "none",
+        padding: "11px 14px",
+        borderRadius: "10px",
+        fontSize: "14px",
+        fontWeight: active === link ? "700" : "500",
+        color: active === link ? accent : "rgba(255,255,255,0.55)",
+        cursor: "pointer",
+        textAlign: "left",
+        fontFamily: "inherit",
+        width: "100%",
+        transition: "all 0.15s",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between"
+      }
+    },
+    link,
+    active === link && /* @__PURE__ */ import_react20.default.createElement(
+      "svg",
+      {
+        width: "14",
+        height: "14",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: accent,
+        strokeWidth: "2.5",
+        strokeLinecap: "round"
+      },
+      /* @__PURE__ */ import_react20.default.createElement("polyline", { points: "9 18 15 12 9 6" })
+    )
+  )), /* @__PURE__ */ import_react20.default.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", margin: "8px 0" } }), /* @__PURE__ */ import_react20.default.createElement(
+    "button",
+    {
+      onClick: () => {
+        setMenuOpen(false);
+        onCtaClick();
+      },
+      style: {
+        background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.75)})`,
+        border: "none",
+        padding: "12px",
+        borderRadius: "12px",
+        fontSize: "14px",
+        fontWeight: "700",
+        color: "#fff",
+        cursor: "pointer",
+        fontFamily: "inherit",
+        width: "100%"
+      }
+    },
+    ctaText
+  ))));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
@@ -1125,6 +1375,7 @@ var PricingCard = ({
   FileUpload,
   Loader,
   LoadingSpinner,
+  Navbar,
   NotificationToast,
   OtpInput,
   PricingCard,

package/dist/index.mjs

@@ -1062,6 +1062,255 @@ var PricingCard = ({
     ctaText
   ));
 };
+
+// src/components/Navbar/Navbar.jsx
+import React20, { useState as useState14, useEffect as useEffect6 } from "react";
+var Navbar = ({
+  logo = "VirtualAI",
+  links = ["Home", "Features", "Pricing", "Blog"],
+  ctaText = "Get Started",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onCtaClick = () => {
+  },
+  onLinkClick = () => {
+  }
+}) => {
+  const [scrolled, setScrolled] = useState14(false);
+  const [menuOpen, setMenuOpen] = useState14(false);
+  const [active, setActive] = useState14("Home");
+  const [isMobile, setIsMobile] = useState14(false);
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r},${g},${b},${op})`;
+  };
+  useEffect6(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+  useEffect6(() => {
+    const handler = () => setScrolled(window.scrollY > 10);
+    window.addEventListener("scroll", handler);
+    return () => window.removeEventListener("scroll", handler);
+  }, []);
+  useEffect6(() => {
+    if (!isMobile) setMenuOpen(false);
+  }, [isMobile]);
+  const handleLink = (link) => {
+    setActive(link);
+    setMenuOpen(false);
+    onLinkClick(link);
+  };
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement("style", null, `
+        @keyframes nbSlideDown {
+          from { opacity: 0; transform: translateY(-8px); }
+          to   { opacity: 1; transform: translateY(0); }
+        }
+        .nb-link:hover { color: rgba(255,255,255,0.9) !important; background: rgba(255,255,255,0.05) !important; }
+        .nb-cta:hover  { opacity: 0.85 !important; }
+        .nb-ham:hover  { background: rgba(255,255,255,0.1) !important; }
+        .nb-mlink:hover { background: rgba(255,255,255,0.06) !important; }
+      `), /* @__PURE__ */ React20.createElement("nav", { style: {
+    position: "sticky",
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1e3,
+    background: scrolled ? alpha(bg, 0.96) : bg,
+    borderBottom: `1px solid ${scrolled ? "rgba(255,255,255,0.09)" : "rgba(255,255,255,0.04)"}`,
+    backdropFilter: scrolled ? "blur(12px)" : "none",
+    WebkitBackdropFilter: scrolled ? "blur(12px)" : "none",
+    transition: "all 0.3s ease",
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    width: "100%",
+    boxSizing: "border-box"
+  } }, /* @__PURE__ */ React20.createElement("div", { style: {
+    maxWidth: "1200px",
+    margin: "0 auto",
+    padding: "0 20px",
+    height: isMobile ? "56px" : "64px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "16px",
+    boxSizing: "border-box"
+  } }, /* @__PURE__ */ React20.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer", flexShrink: 0 } }, /* @__PURE__ */ React20.createElement("div", { style: {
+    width: isMobile ? "26px" : "30px",
+    height: isMobile ? "26px" : "30px",
+    borderRadius: "8px",
+    background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.6)})`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: isMobile ? "12px" : "14px",
+    fontWeight: "800",
+    color: "#fff",
+    flexShrink: 0
+  } }, logo[0]), /* @__PURE__ */ React20.createElement("span", { style: {
+    fontSize: isMobile ? "14px" : "16px",
+    fontWeight: "800",
+    color: "#fff",
+    letterSpacing: "-0.3px"
+  } }, logo)), !isMobile && /* @__PURE__ */ React20.createElement("div", { style: { display: "flex", alignItems: "center", gap: "2px", flex: 1, justifyContent: "center" } }, links.map((link) => /* @__PURE__ */ React20.createElement(
+    "button",
+    {
+      key: link,
+      className: "nb-link",
+      onClick: () => handleLink(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",
+        transition: "all 0.2s",
+        fontFamily: "inherit",
+        whiteSpace: "nowrap"
+      }
+    },
+    link
+  ))), /* @__PURE__ */ React20.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0 } }, /* @__PURE__ */ React20.createElement(
+    "button",
+    {
+      className: "nb-cta",
+      onClick: onCtaClick,
+      style: {
+        padding: isMobile ? "7px 14px" : "9px 20px",
+        borderRadius: "10px",
+        border: "none",
+        background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.75)})`,
+        color: "#fff",
+        fontSize: isMobile ? "12px" : "13px",
+        fontWeight: "700",
+        cursor: "pointer",
+        fontFamily: "inherit",
+        transition: "opacity 0.2s",
+        whiteSpace: "nowrap"
+      }
+    },
+    ctaText
+  ), isMobile && /* @__PURE__ */ React20.createElement(
+    "button",
+    {
+      className: "nb-ham",
+      onClick: () => setMenuOpen((o) => !o),
+      style: {
+        background: "rgba(255,255,255,0.06)",
+        border: "1px solid rgba(255,255,255,0.1)",
+        borderRadius: "8px",
+        width: "34px",
+        height: "34px",
+        cursor: "pointer",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "5px",
+        transition: "background 0.2s",
+        flexShrink: 0,
+        padding: 0
+      }
+    },
+    /* @__PURE__ */ React20.createElement("div", { style: {
+      width: "16px",
+      height: "1.5px",
+      background: "rgba(255,255,255,0.7)",
+      borderRadius: "2px",
+      transform: menuOpen ? "rotate(45deg) translate(4px, 4px)" : "none",
+      transition: "transform 0.25s"
+    } }),
+    /* @__PURE__ */ React20.createElement("div", { style: {
+      width: "16px",
+      height: "1.5px",
+      background: "rgba(255,255,255,0.7)",
+      borderRadius: "2px",
+      opacity: menuOpen ? 0 : 1,
+      transition: "opacity 0.2s"
+    } }),
+    /* @__PURE__ */ React20.createElement("div", { style: {
+      width: "16px",
+      height: "1.5px",
+      background: "rgba(255,255,255,0.7)",
+      borderRadius: "2px",
+      transform: menuOpen ? "rotate(-45deg) translate(4px, -4px)" : "none",
+      transition: "transform 0.25s"
+    } })
+  ))), isMobile && menuOpen && /* @__PURE__ */ React20.createElement("div", { style: {
+    animation: "nbSlideDown 0.2s ease",
+    borderTop: "1px solid rgba(255,255,255,0.06)",
+    padding: "10px 16px 16px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "3px",
+    background: alpha(bg, 0.98)
+  } }, links.map((link) => /* @__PURE__ */ React20.createElement(
+    "button",
+    {
+      key: link,
+      className: "nb-mlink",
+      onClick: () => handleLink(link),
+      style: {
+        background: active === link ? alpha(accent, 0.1) : "transparent",
+        border: "none",
+        padding: "11px 14px",
+        borderRadius: "10px",
+        fontSize: "14px",
+        fontWeight: active === link ? "700" : "500",
+        color: active === link ? accent : "rgba(255,255,255,0.55)",
+        cursor: "pointer",
+        textAlign: "left",
+        fontFamily: "inherit",
+        width: "100%",
+        transition: "all 0.15s",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between"
+      }
+    },
+    link,
+    active === link && /* @__PURE__ */ React20.createElement(
+      "svg",
+      {
+        width: "14",
+        height: "14",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: accent,
+        strokeWidth: "2.5",
+        strokeLinecap: "round"
+      },
+      /* @__PURE__ */ React20.createElement("polyline", { points: "9 18 15 12 9 6" })
+    )
+  )), /* @__PURE__ */ React20.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", margin: "8px 0" } }), /* @__PURE__ */ React20.createElement(
+    "button",
+    {
+      onClick: () => {
+        setMenuOpen(false);
+        onCtaClick();
+      },
+      style: {
+        background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.75)})`,
+        border: "none",
+        padding: "12px",
+        borderRadius: "12px",
+        fontSize: "14px",
+        fontWeight: "700",
+        color: "#fff",
+        cursor: "pointer",
+        fontFamily: "inherit",
+        width: "100%"
+      }
+    },
+    ctaText
+  ))));
+};
 export {
   Avatar,
   AvatarCard,
@@ -1071,6 +1320,7 @@ export {
   FileUpload,
   Loader,
   LoadingSpinner,
+  Navbar,
   NotificationToast,
   OtpInput,
   PricingCard,

package/package.json

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