framepexls-ui-lib 0.1.8 → 0.1.9

package/dist/Sidebar.js

@@ -0,0 +1,407 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Sidebar_exports = {};
+__export(Sidebar_exports, {
+  default: () => Sidebar
+});
+module.exports = __toCommonJS(Sidebar_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react2 = require("motion/react");
+var import_Button = __toESM(require("./Button"));
+var import_AvatarSquare = __toESM(require("./AvatarSquare"));
+var import_iconos = require("./iconos");
+function groupItems(items) {
+  var _a;
+  const byGroup = /* @__PURE__ */ new Map();
+  for (const it of items) {
+    const arr = (_a = byGroup.get(it.group)) != null ? _a : [];
+    arr.push(it);
+    byGroup.set(it.group, arr);
+  }
+  return Array.from(byGroup.entries());
+}
+function GroupHeader({ title }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-3 px-1 text-[11px] font-semibold uppercase tracking-wider text-slate-400", children: title });
+}
+function ChevronDown({ open }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: `h-4 w-4 transition-transform ${open ? "rotate-180" : ""}`, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M5.23 7.21a.75.75 0 011.06.02L10 11.127l3.71-3.896a.75.75 0 111.08 1.04l-4.24 4.46a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z",
+      clipRule: "evenodd"
+    }
+  ) });
+}
+function Sidebar({
+  items,
+  activeKey,
+  onNavigate,
+  user,
+  userMenuSlot,
+  onBrandClick,
+  collapsedKey = "ga:sidebar-collapsed",
+  brandInitials = "C",
+  brandTitle = "Campaign",
+  brandSubtitle = "Tablero"
+}) {
+  const [drawerOpen, setDrawerOpen] = (0, import_react.useState)(false);
+  const [collapsed, setCollapsed] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    try {
+      if (localStorage.getItem(collapsedKey) === "1") setCollapsed(true);
+    } catch {
+    }
+  }, [collapsedKey]);
+  const toggleCollapsed = () => {
+    setCollapsed((c) => {
+      const n = !c;
+      try {
+        localStorage.setItem(collapsedKey, n ? "1" : "0");
+      } catch {
+      }
+      return n;
+    });
+  };
+  (0, import_react.useEffect)(() => {
+    if (drawerOpen) document.body.style.overflow = "hidden";
+    else document.body.style.overflow = "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [drawerOpen]);
+  const groups = (0, import_react.useMemo)(() => groupItems(items), [items]);
+  const go = (key) => {
+    onNavigate(key);
+    setDrawerOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sticky top-0 z-40 flex h-14 items-center gap-2 border-b border-black/5 bg-white/80 px-3 backdrop-blur shadow-sm xl:hidden dark:bg-[#0b0a0a]/70", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Button.default,
+        {
+          noPaddingX: true,
+          "aria-label": "Abrir men\xFA",
+          onClick: () => setDrawerOpen(true),
+          variant: "ghost",
+          size: "sm",
+          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.MenuIcon, {}),
+          className: "h-9 w-9 p-0 !gap-0 rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { onClick: onBrandClick, className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-2xl font-black leading-none tracking-tight", children: brandInitials }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold leading-4", children: brandTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-slate-500 text-left", children: brandSubtitle })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "aside",
+      {
+        className: [
+          "hidden xl:fixed xl:inset-y-0 xl:flex xl:flex-col xl:border-r xl:border-black/5 xl:bg-white xl:py-6 dark:xl:bg-[#0b0a0a]/70 z-40",
+          "transition-[width] duration-200",
+          collapsed ? "xl:w-28 xl:px-3" : "xl:w-72 xl:px-4"
+        ].join(" "),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          SidebarInner,
+          {
+            groups,
+            collapsed,
+            toggleCollapsed,
+            activeKey,
+            go,
+            user,
+            userMenuSlot,
+            brandInitials,
+            brandTitle,
+            brandSubtitle
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: ["hidden xl:block", "transition-[width] duration-200", collapsed ? "xl:w-20" : "xl:w-72"].join(" ") }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.AnimatePresence, { children: drawerOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react2.motion.div, { className: "fixed inset-0 z-40 xl:hidden", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-black/40" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_react2.motion.div,
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          initial: { x: -340 },
+          animate: { x: 0 },
+          exit: { x: -340 },
+          transition: { type: "spring", stiffness: 260, damping: 28 },
+          className: "relative h-full w-[88%] max-w-80 bg-white px-5 py-6 shadow-2xl dark:bg-[#0b0a0a]",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_Button.default,
+                {
+                  noPaddingX: true,
+                  onClick: () => setDrawerOpen(false),
+                  variant: "ghost",
+                  size: "sm",
+                  leftIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.CloseIcon, {}),
+                  className: "h-9 w-9 p-0 !gap-0 rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm hover:bg-slate-50 dark:border-white/10 dark:bg-white/5 dark:text-slate-200"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm text-slate-500", children: "Men\xFA" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              SidebarInner,
+              {
+                groups,
+                mobile: true,
+                activeKey,
+                go,
+                user,
+                userMenuSlot,
+                brandInitials,
+                brandTitle,
+                brandSubtitle
+              }
+            )
+          ]
+        }
+      )
+    ] }) })
+  ] });
+}
+function SidebarInner({
+  groups,
+  collapsed,
+  toggleCollapsed,
+  mobile,
+  activeKey,
+  go,
+  user,
+  userMenuSlot,
+  brandInitials,
+  brandTitle,
+  brandSubtitle
+}) {
+  var _a, _b, _c, _d;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between px-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { className: "flex items-center gap-3", title: "Ir al inicio", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-2xl font-black tracking-tight", children: brandInitials }),
+        !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "leading-tight", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg font-semibold tracking-tight", children: brandTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-[11px] uppercase tracking-wide text-slate-400 text-left", children: brandSubtitle })
+        ] })
+      ] }),
+      !mobile && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Button.default,
+        {
+          noPaddingX: true,
+          "aria-label": collapsed ? "Expandir barra lateral" : "Contraer barra lateral",
+          onClick: toggleCollapsed,
+          variant: "ghost",
+          size: "sm",
+          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.ChevronLeftRightIcon, { collapsed: collapsed != null ? collapsed : false }),
+          className: "hidden xl:inline-flex h-8 w-8 p-0 !gap-0 rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm hover:bg-slate-50 dark:border-white/10 dark:bg-white/5 dark:text-slate-200",
+          title: collapsed ? "Expandir" : "Contraer"
+        }
+      )
+    ] }),
+    collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-4 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AvatarSquare.default, { size: 48, src: (_a = user == null ? void 0 : user.avatarUrl) != null ? _a : void 0, radiusClass: "rounded-2xl" }) }),
+    !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-4 flex items-center gap-3 rounded-2xl border border-slate-200 bg-white p-2 pr-3 shadow-sm dark:border-white/10 dark:bg:white/5 dark:bg-white/5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AvatarSquare.default, { size: 48, src: (_b = user == null ? void 0 : user.avatarUrl) != null ? _b : void 0, radiusClass: "rounded-2xl" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-sm font-semibold", children: (_c = user == null ? void 0 : user.name) != null ? _c : "Usuario" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-slate-500", children: (_d = user == null ? void 0 : user.rol_principal) != null ? _d : "\u2014" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ml-auto", children: userMenuSlot })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: "my-6 flex-1 space-y-7 overflow-auto overflow-x-hidden px-2", children: groups.map(([groupName, items]) => {
+      const visibles = items.filter((i) => {
+        var _a2;
+        return ((_a2 = i.children) == null ? void 0 : _a2.length) ? i.children.some((c) => c) : true;
+      });
+      if (visibles.length === 0) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+        !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GroupHeader, { title: groupName }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "space-y-2", children: visibles.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RenderItem, { item, collapsed: collapsed != null ? collapsed : false, activeKey, go }, item.key)) })
+      ] }, groupName);
+    }) })
+  ] });
+}
+function RenderItem({
+  item,
+  collapsed,
+  activeKey,
+  go
+}) {
+  var _a, _b, _c;
+  const Icon = (_a = item.icon) != null ? _a : (() => null);
+  const hasChildren = !!((_b = item.children) == null ? void 0 : _b.length);
+  const children = ((_c = item.children) != null ? _c : []).filter(Boolean);
+  const isActive = item.key === activeKey || hasChildren && children.some((ch) => ch.key === activeKey);
+  const [open, setOpen] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (!hasChildren) return;
+    try {
+      const raw = localStorage.getItem(`ga:submenu:${item.key}`);
+      if (raw === "1") setOpen(true);
+    } catch {
+    }
+  }, [hasChildren, item.key]);
+  (0, import_react.useEffect)(() => {
+    if (!hasChildren) return;
+    try {
+      localStorage.setItem(`ga:submenu:${item.key}`, open ? "1" : "0");
+    } catch {
+    }
+  }, [hasChildren, open, item.key]);
+  if (hasChildren && collapsed) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        onClick: () => go(item.key),
+        title: item.label,
+        className: [
+          "group flex w-full items-center gap-3 rounded-2xl px-3 py-2 text-left text-[15px] transition justify-center",
+          isActive ? "bg-blue-600/20 text-slate-900 ring-1 ring-blue-300 dark:bg-blue-600/25 dark:text-white" : "text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5"
+        ].join(" "),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: [
+              "grid h-9 w-9 place-items-center rounded-xl border transition",
+              isActive ? "border-blue-300/60 bg-white shadow-sm dark:border-blue-700/40 dark:bg-white/10" : "border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/5"
+            ].join(" "),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "h-5 w-5" })
+          }
+        )
+      }
+    );
+  }
+  if (hasChildren) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: [
+            "flex w-full min-w-0 items-center rounded-2xl px-3 py-2 text-[15px] transition gap-2",
+            isActive ? "bg-blue-600/20 text-slate-900 ring-1 ring-blue-300 dark:bg-blue-600/25 dark:text-white" : "text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5"
+          ].join(" "),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { type: "button", onClick: () => go(item.key), className: "flex min-w-0 flex-1 items-center gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  className: [
+                    "grid h-9 w-9 place-items-center rounded-xl border transition",
+                    isActive ? "border-blue-300/60 bg-white shadow-sm dark:border-blue-700/40 dark:bg-white/10" : "border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/5"
+                  ].join(" "),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "h-5 w-5" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate", children: item.label })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_Button.default,
+              {
+                type: "button",
+                "aria-label": open ? "Contraer submen\xFA" : "Expandir submen\xFA",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setOpen(!open);
+                },
+                variant: "ghost",
+                size: "sm",
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, { open }),
+                className: [
+                  "h-8 w-8 shrink-0 rounded-lg p-0 !gap-0 border",
+                  isActive ? "border-blue-200 bg-white/80 dark:border-blue-700/40 dark:bg-white/10" : "border-slate-200 bg-white dark:border-white/10 dark:bg-white/5"
+                ].join(" ")
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.AnimatePresence, { initial: false, children: open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react2.motion.div,
+        {
+          initial: { height: 0, opacity: 0, y: -4 },
+          animate: { height: "auto", opacity: 1, y: 0 },
+          exit: { height: 0, opacity: 0, y: -4 },
+          transition: { type: "tween", duration: 0.18 },
+          className: "mt-1 overflow-hidden",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rounded-xl border border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/5", children: children.map((ch) => {
+            const active2 = ch.key === activeKey;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                onClick: () => go(ch.key),
+                className: [
+                  "block w-full text-left px-3 py-2 text-[14px] transition",
+                  active2 ? "bg-blue-50 text-blue-700 ring-1 ring-blue-200 dark:bg-blue-900/20 dark:text-blue-200 dark:ring-blue-700/40 rounded-xl" : "text-slate-700 hover:bg-slate-50 dark:text-slate-200 dark:hover:bg-white/10"
+                ].join(" "),
+                children: ch.label
+              },
+              ch.key
+            );
+          }) })
+        },
+        `submenu-${item.key}`
+      ) })
+    ] });
+  }
+  const active = item.key === activeKey;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      onClick: () => go(item.key),
+      title: collapsed ? item.label : void 0,
+      className: [
+        "group flex w-full min-w-0 items-center gap-3 rounded-2xl px-3 py-2 text-left text-[15px] transition",
+        active ? "bg-blue-600/20 text-slate-900 ring-1 ring-blue-300 dark:bg-blue-600/25 dark:text-white" : "text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5",
+        collapsed ? "justify-center" : ""
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: [
+              "grid h-9 w-9 place-items-center rounded-xl border text-slate-700 transition group-hover:scale-105 dark:text-slate-200",
+              active ? "border-blue-300/60 bg-white shadow-sm dark:border-blue-700/40 dark:bg-white/10" : "border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/5"
+            ].join(" "),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "h-5 w-5" })
+          }
+        ),
+        !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate", children: item.label })
+      ]
+    }
+  );
+}