virtual-ui-lib 1.0.61 → 1.0.62

package/dist/index.js

@@ -44,6 +44,7 @@ __export(index_exports, {
   PricingCard: () => PricingCard,
   ResponsiveNavbar: () => ResponsiveNavbar,
   SearchBar: () => SearchBar,
+  Sidebar: () => Sidebar,
   SkeletonLoader: () => SkeletonLoader,
   SmartButton: () => SmartButton,
   StatCard: () => StatCard,
@@ -1420,6 +1421,184 @@ var Footer = ({
     link
   ))), /* @__PURE__ */ import_react21.default.createElement("div", { style: { width: "100%", height: "1px", background: "rgba(255,255,255,0.06)" } }), /* @__PURE__ */ import_react21.default.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.22)", margin: 0 } }, "\xA9 ", (/* @__PURE__ */ new Date()).getFullYear(), " ", copyright, ". All rights reserved.")));
 };
+
+// src/components/Sidebar/Sidebar.jsx
+var import_react22 = __toESM(require("react"));
+var Sidebar = ({
+  logo = "VirtualAI",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  items = [
+    {
+      label: "Dashboard",
+      icon: "M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z",
+      component: /* @__PURE__ */ import_react22.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react22.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Dashboard"), /* @__PURE__ */ import_react22.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Welcome to your dashboard overview."))
+    },
+    {
+      label: "Analytics",
+      icon: "M18 20V10M12 20V4M6 20v-6",
+      component: /* @__PURE__ */ import_react22.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react22.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Analytics"), /* @__PURE__ */ import_react22.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "View your stats and performance here."))
+    },
+    {
+      label: "Users",
+      icon: "M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8zM23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75",
+      component: /* @__PURE__ */ import_react22.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react22.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Users"), /* @__PURE__ */ import_react22.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Manage your users and permissions."))
+    },
+    {
+      label: "Settings",
+      icon: "M12 15a3 3 0 100-6 3 3 0 000 6zM19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z",
+      component: /* @__PURE__ */ import_react22.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react22.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Settings"), /* @__PURE__ */ import_react22.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Configure your preferences here."))
+    }
+  ]
+}) => {
+  const [active, setActive] = (0, import_react22.useState)(0);
+  const [collapsed, setCollapsed] = (0, import_react22.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})`;
+  };
+  const activeItem = items[active];
+  return /* @__PURE__ */ import_react22.default.createElement("div", { style: {
+    display: "flex",
+    height: "480px",
+    fontFamily: "system-ui, sans-serif",
+    borderRadius: "16px",
+    overflow: "hidden",
+    border: "1px solid rgba(255,255,255,0.07)"
+  } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: {
+    width: collapsed ? "60px" : "200px",
+    background: bg,
+    borderRight: "1px solid rgba(255,255,255,0.06)",
+    display: "flex",
+    flexDirection: "column",
+    transition: "width 0.25s ease",
+    flexShrink: 0,
+    overflow: "hidden"
+  } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: {
+    height: "56px",
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    padding: collapsed ? "0 14px" : "0 16px",
+    borderBottom: "1px solid rgba(255,255,255,0.05)",
+    overflow: "hidden",
+    flexShrink: 0
+  } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: {
+    width: "28px",
+    height: "28px",
+    borderRadius: "8px",
+    flexShrink: 0,
+    background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.6)})`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "13px",
+    fontWeight: "800",
+    color: "#fff"
+  } }, logo[0]), !collapsed && /* @__PURE__ */ import_react22.default.createElement("span", { style: { fontSize: "14px", fontWeight: "800", color: "#fff", whiteSpace: "nowrap" } }, logo)), /* @__PURE__ */ import_react22.default.createElement("nav", { style: { flex: 1, padding: "10px 8px", display: "flex", flexDirection: "column", gap: "3px", overflowY: "auto" } }, items.map((item, i) => /* @__PURE__ */ import_react22.default.createElement(
+    "button",
+    {
+      key: i,
+      onClick: () => setActive(i),
+      title: collapsed ? item.label : "",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "10px",
+        padding: collapsed ? "9px 0" : "9px 12px",
+        justifyContent: collapsed ? "center" : "flex-start",
+        borderRadius: "10px",
+        border: "none",
+        cursor: "pointer",
+        transition: "all 0.2s",
+        fontFamily: "inherit",
+        width: "100%",
+        background: active === i ? alpha(accent, 0.12) : "transparent",
+        color: active === i ? accent : "rgba(255,255,255,0.45)",
+        borderLeft: active === i ? `2px solid ${accent}` : "2px solid transparent"
+      },
+      onMouseEnter: (e) => {
+        if (active !== i) {
+          e.currentTarget.style.background = "rgba(255,255,255,0.04)";
+          e.currentTarget.style.color = "rgba(255,255,255,0.8)";
+        }
+      },
+      onMouseLeave: (e) => {
+        if (active !== i) {
+          e.currentTarget.style.background = "transparent";
+          e.currentTarget.style.color = "rgba(255,255,255,0.45)";
+        }
+      }
+    },
+    /* @__PURE__ */ import_react22.default.createElement(
+      "svg",
+      {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        style: { flexShrink: 0 }
+      },
+      /* @__PURE__ */ import_react22.default.createElement("path", { d: item.icon })
+    ),
+    !collapsed && /* @__PURE__ */ import_react22.default.createElement("span", { style: { fontSize: "13px", fontWeight: active === i ? "700" : "500", whiteSpace: "nowrap" } }, item.label)
+  ))), /* @__PURE__ */ import_react22.default.createElement("div", { style: { padding: "8px", borderTop: "1px solid rgba(255,255,255,0.05)" } }, /* @__PURE__ */ import_react22.default.createElement(
+    "button",
+    {
+      onClick: () => setCollapsed((c) => !c),
+      style: {
+        width: "100%",
+        padding: "8px",
+        borderRadius: "9px",
+        border: "none",
+        background: "rgba(255,255,255,0.04)",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "rgba(255,255,255,0.3)",
+        transition: "all 0.2s"
+      },
+      onMouseEnter: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.7)",
+      onMouseLeave: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.3)"
+    },
+    /* @__PURE__ */ import_react22.default.createElement(
+      "svg",
+      {
+        width: "15",
+        height: "15",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round"
+      },
+      /* @__PURE__ */ import_react22.default.createElement("path", { d: collapsed ? "M9 18l6-6-6-6" : "M15 18l-6-6 6-6" })
+    )
+  ))), /* @__PURE__ */ import_react22.default.createElement("div", { style: {
+    flex: 1,
+    background: "rgba(255,255,255,0.02)",
+    overflow: "auto"
+  } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: {
+    height: "56px",
+    display: "flex",
+    alignItems: "center",
+    padding: "0 20px",
+    borderBottom: "1px solid rgba(255,255,255,0.05)",
+    gap: "10px"
+  } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: {
+    width: "6px",
+    height: "6px",
+    borderRadius: "50%",
+    background: accent
+  } }), /* @__PURE__ */ import_react22.default.createElement("span", { style: { fontSize: "14px", fontWeight: "700", color: "#fff" } }, activeItem == null ? void 0 : activeItem.label)), /* @__PURE__ */ import_react22.default.createElement("div", { style: { color: "#fff" } }, activeItem == null ? void 0 : activeItem.component)));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
@@ -1437,6 +1616,7 @@ var Footer = ({
   PricingCard,
   ResponsiveNavbar,
   SearchBar,
+  Sidebar,
   SkeletonLoader,
   SmartButton,
   StatCard,

package/dist/index.mjs

@@ -1365,6 +1365,184 @@ var Footer = ({
     link
   ))), /* @__PURE__ */ React21.createElement("div", { style: { width: "100%", height: "1px", background: "rgba(255,255,255,0.06)" } }), /* @__PURE__ */ React21.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.22)", margin: 0 } }, "\xA9 ", (/* @__PURE__ */ new Date()).getFullYear(), " ", copyright, ". All rights reserved.")));
 };
+
+// src/components/Sidebar/Sidebar.jsx
+import React22, { useState as useState15 } from "react";
+var Sidebar = ({
+  logo = "VirtualAI",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  items = [
+    {
+      label: "Dashboard",
+      icon: "M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z",
+      component: /* @__PURE__ */ React22.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ React22.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Dashboard"), /* @__PURE__ */ React22.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Welcome to your dashboard overview."))
+    },
+    {
+      label: "Analytics",
+      icon: "M18 20V10M12 20V4M6 20v-6",
+      component: /* @__PURE__ */ React22.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ React22.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Analytics"), /* @__PURE__ */ React22.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "View your stats and performance here."))
+    },
+    {
+      label: "Users",
+      icon: "M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8zM23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75",
+      component: /* @__PURE__ */ React22.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ React22.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Users"), /* @__PURE__ */ React22.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Manage your users and permissions."))
+    },
+    {
+      label: "Settings",
+      icon: "M12 15a3 3 0 100-6 3 3 0 000 6zM19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z",
+      component: /* @__PURE__ */ React22.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ React22.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Settings"), /* @__PURE__ */ React22.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Configure your preferences here."))
+    }
+  ]
+}) => {
+  const [active, setActive] = useState15(0);
+  const [collapsed, setCollapsed] = useState15(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})`;
+  };
+  const activeItem = items[active];
+  return /* @__PURE__ */ React22.createElement("div", { style: {
+    display: "flex",
+    height: "480px",
+    fontFamily: "system-ui, sans-serif",
+    borderRadius: "16px",
+    overflow: "hidden",
+    border: "1px solid rgba(255,255,255,0.07)"
+  } }, /* @__PURE__ */ React22.createElement("div", { style: {
+    width: collapsed ? "60px" : "200px",
+    background: bg,
+    borderRight: "1px solid rgba(255,255,255,0.06)",
+    display: "flex",
+    flexDirection: "column",
+    transition: "width 0.25s ease",
+    flexShrink: 0,
+    overflow: "hidden"
+  } }, /* @__PURE__ */ React22.createElement("div", { style: {
+    height: "56px",
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    padding: collapsed ? "0 14px" : "0 16px",
+    borderBottom: "1px solid rgba(255,255,255,0.05)",
+    overflow: "hidden",
+    flexShrink: 0
+  } }, /* @__PURE__ */ React22.createElement("div", { style: {
+    width: "28px",
+    height: "28px",
+    borderRadius: "8px",
+    flexShrink: 0,
+    background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.6)})`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "13px",
+    fontWeight: "800",
+    color: "#fff"
+  } }, logo[0]), !collapsed && /* @__PURE__ */ React22.createElement("span", { style: { fontSize: "14px", fontWeight: "800", color: "#fff", whiteSpace: "nowrap" } }, logo)), /* @__PURE__ */ React22.createElement("nav", { style: { flex: 1, padding: "10px 8px", display: "flex", flexDirection: "column", gap: "3px", overflowY: "auto" } }, items.map((item, i) => /* @__PURE__ */ React22.createElement(
+    "button",
+    {
+      key: i,
+      onClick: () => setActive(i),
+      title: collapsed ? item.label : "",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "10px",
+        padding: collapsed ? "9px 0" : "9px 12px",
+        justifyContent: collapsed ? "center" : "flex-start",
+        borderRadius: "10px",
+        border: "none",
+        cursor: "pointer",
+        transition: "all 0.2s",
+        fontFamily: "inherit",
+        width: "100%",
+        background: active === i ? alpha(accent, 0.12) : "transparent",
+        color: active === i ? accent : "rgba(255,255,255,0.45)",
+        borderLeft: active === i ? `2px solid ${accent}` : "2px solid transparent"
+      },
+      onMouseEnter: (e) => {
+        if (active !== i) {
+          e.currentTarget.style.background = "rgba(255,255,255,0.04)";
+          e.currentTarget.style.color = "rgba(255,255,255,0.8)";
+        }
+      },
+      onMouseLeave: (e) => {
+        if (active !== i) {
+          e.currentTarget.style.background = "transparent";
+          e.currentTarget.style.color = "rgba(255,255,255,0.45)";
+        }
+      }
+    },
+    /* @__PURE__ */ React22.createElement(
+      "svg",
+      {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        style: { flexShrink: 0 }
+      },
+      /* @__PURE__ */ React22.createElement("path", { d: item.icon })
+    ),
+    !collapsed && /* @__PURE__ */ React22.createElement("span", { style: { fontSize: "13px", fontWeight: active === i ? "700" : "500", whiteSpace: "nowrap" } }, item.label)
+  ))), /* @__PURE__ */ React22.createElement("div", { style: { padding: "8px", borderTop: "1px solid rgba(255,255,255,0.05)" } }, /* @__PURE__ */ React22.createElement(
+    "button",
+    {
+      onClick: () => setCollapsed((c) => !c),
+      style: {
+        width: "100%",
+        padding: "8px",
+        borderRadius: "9px",
+        border: "none",
+        background: "rgba(255,255,255,0.04)",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "rgba(255,255,255,0.3)",
+        transition: "all 0.2s"
+      },
+      onMouseEnter: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.7)",
+      onMouseLeave: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.3)"
+    },
+    /* @__PURE__ */ React22.createElement(
+      "svg",
+      {
+        width: "15",
+        height: "15",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round"
+      },
+      /* @__PURE__ */ React22.createElement("path", { d: collapsed ? "M9 18l6-6-6-6" : "M15 18l-6-6 6-6" })
+    )
+  ))), /* @__PURE__ */ React22.createElement("div", { style: {
+    flex: 1,
+    background: "rgba(255,255,255,0.02)",
+    overflow: "auto"
+  } }, /* @__PURE__ */ React22.createElement("div", { style: {
+    height: "56px",
+    display: "flex",
+    alignItems: "center",
+    padding: "0 20px",
+    borderBottom: "1px solid rgba(255,255,255,0.05)",
+    gap: "10px"
+  } }, /* @__PURE__ */ React22.createElement("div", { style: {
+    width: "6px",
+    height: "6px",
+    borderRadius: "50%",
+    background: accent
+  } }), /* @__PURE__ */ React22.createElement("span", { style: { fontSize: "14px", fontWeight: "700", color: "#fff" } }, activeItem == null ? void 0 : activeItem.label)), /* @__PURE__ */ React22.createElement("div", { style: { color: "#fff" } }, activeItem == null ? void 0 : activeItem.component)));
+};
 export {
   Avatar,
   AvatarCard,
@@ -1381,6 +1559,7 @@ export {
   PricingCard,
   ResponsiveNavbar,
   SearchBar,
+  Sidebar,
   SkeletonLoader,
   SmartButton,
   StatCard,

package/package.json

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