framepexls-ui-lib 0.1.7 → 0.1.9

package/dist/Sidebar.mjs

@@ -0,0 +1,377 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import Button from "./Button";
+import AvatarSquare from "./AvatarSquare";
+import { CloseIcon, ChevronLeftRightIcon, MenuIcon } from "./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__ */ jsx("div", { className: "mb-3 px-1 text-[11px] font-semibold uppercase tracking-wider text-slate-400", children: title });
+}
+function ChevronDown({ open }) {
+  return /* @__PURE__ */ jsx("svg", { className: `h-4 w-4 transition-transform ${open ? "rotate-180" : ""}`, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ 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] = useState(false);
+  const [collapsed, setCollapsed] = useState(false);
+  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;
+    });
+  };
+  useEffect(() => {
+    if (drawerOpen) document.body.style.overflow = "hidden";
+    else document.body.style.overflow = "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [drawerOpen]);
+  const groups = useMemo(() => groupItems(items), [items]);
+  const go = (key) => {
+    onNavigate(key);
+    setDrawerOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ 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__ */ jsx(
+        Button,
+        {
+          noPaddingX: true,
+          "aria-label": "Abrir men\xFA",
+          onClick: () => setDrawerOpen(true),
+          variant: "ghost",
+          size: "sm",
+          leftIcon: /* @__PURE__ */ jsx(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__ */ jsxs("button", { onClick: onBrandClick, className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-2xl font-black leading-none tracking-tight", children: brandInitials }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold leading-4", children: brandTitle }),
+          /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500 text-left", children: brandSubtitle })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ 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__ */ jsx(
+          SidebarInner,
+          {
+            groups,
+            collapsed,
+            toggleCollapsed,
+            activeKey,
+            go,
+            user,
+            userMenuSlot,
+            brandInitials,
+            brandTitle,
+            brandSubtitle
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: ["hidden xl:block", "transition-[width] duration-200", collapsed ? "xl:w-20" : "xl:w-72"].join(" ") }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: drawerOpen && /* @__PURE__ */ jsxs(motion.div, { className: "fixed inset-0 z-40 xl:hidden", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/40" }),
+      /* @__PURE__ */ jsxs(
+        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__ */ jsxs("div", { className: "mb-4 flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  noPaddingX: true,
+                  onClick: () => setDrawerOpen(false),
+                  variant: "ghost",
+                  size: "sm",
+                  leftIcon: /* @__PURE__ */ jsx(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__ */ jsx("div", { className: "text-sm text-slate-500", children: "Men\xFA" })
+            ] }),
+            /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-1", children: [
+      /* @__PURE__ */ jsxs("button", { className: "flex items-center gap-3", title: "Ir al inicio", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-2xl font-black tracking-tight", children: brandInitials }),
+        !collapsed && /* @__PURE__ */ jsxs("div", { className: "leading-tight", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold tracking-tight", children: brandTitle }),
+          /* @__PURE__ */ jsx("div", { className: "text-[11px] uppercase tracking-wide text-slate-400 text-left", children: brandSubtitle })
+        ] })
+      ] }),
+      !mobile && /* @__PURE__ */ jsx(
+        Button,
+        {
+          noPaddingX: true,
+          "aria-label": collapsed ? "Expandir barra lateral" : "Contraer barra lateral",
+          onClick: toggleCollapsed,
+          variant: "ghost",
+          size: "sm",
+          leftIcon: /* @__PURE__ */ jsx(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__ */ jsx("div", { className: "mt-4 flex items-center justify-center", children: /* @__PURE__ */ jsx(AvatarSquare, { size: 48, src: (_a = user == null ? void 0 : user.avatarUrl) != null ? _a : void 0, radiusClass: "rounded-2xl" }) }),
+    !collapsed && /* @__PURE__ */ 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__ */ jsx(AvatarSquare, { size: 48, src: (_b = user == null ? void 0 : user.avatarUrl) != null ? _b : void 0, radiusClass: "rounded-2xl" }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-semibold", children: (_c = user == null ? void 0 : user.name) != null ? _c : "Usuario" }),
+        /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500", children: (_d = user == null ? void 0 : user.rol_principal) != null ? _d : "\u2014" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "ml-auto", children: userMenuSlot })
+    ] }),
+    /* @__PURE__ */ 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__ */ jsxs("div", { children: [
+        !collapsed && /* @__PURE__ */ jsx(GroupHeader, { title: groupName }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-2", children: visibles.map((item) => /* @__PURE__ */ 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] = useState(false);
+  useEffect(() => {
+    if (!hasChildren) return;
+    try {
+      const raw = localStorage.getItem(`ga:submenu:${item.key}`);
+      if (raw === "1") setOpen(true);
+    } catch {
+    }
+  }, [hasChildren, item.key]);
+  useEffect(() => {
+    if (!hasChildren) return;
+    try {
+      localStorage.setItem(`ga:submenu:${item.key}`, open ? "1" : "0");
+    } catch {
+    }
+  }, [hasChildren, open, item.key]);
+  if (hasChildren && collapsed) {
+    return /* @__PURE__ */ 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__ */ 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__ */ jsx(Icon, { className: "h-5 w-5" })
+          }
+        )
+      }
+    );
+  }
+  if (hasChildren) {
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ 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__ */ jsxs("button", { type: "button", onClick: () => go(item.key), className: "flex min-w-0 flex-1 items-center gap-3", children: [
+              /* @__PURE__ */ 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__ */ jsx(Icon, { className: "h-5 w-5" })
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                "aria-label": open ? "Contraer submen\xFA" : "Expandir submen\xFA",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setOpen(!open);
+                },
+                variant: "ghost",
+                size: "sm",
+                leftIcon: /* @__PURE__ */ 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__ */ jsx(AnimatePresence, { initial: false, children: open && /* @__PURE__ */ jsx(
+        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__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx(Icon, { className: "h-5 w-5" })
+          }
+        ),
+        !collapsed && /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label })
+      ]
+    }
+  );
+}
+export {
+  Sidebar as default
+};

package/dist/TimePopover.js

@@ -84,12 +84,12 @@ function TimePopover({
       if (e.key === "Escape") onClose();
     };
     const onScroll = () => place();
-    window.addEventListener("pointerdown", onDown, true);
+    window.addEventListener("pointerdown", onDown);
     window.addEventListener("keydown", onKey);
     window.addEventListener("scroll", onScroll, true);
     window.addEventListener("resize", onScroll);
     return () => {
-      window.removeEventListener("pointerdown", onDown, true);
+      window.removeEventListener("pointerdown", onDown);
       window.removeEventListener("keydown", onKey);
       window.removeEventListener("scroll", onScroll, true);
       window.removeEventListener("resize", onScroll);

package/dist/TimePopover.mjs

@@ -49,12 +49,12 @@ function TimePopover({
       if (e.key === "Escape") onClose();
     };
     const onScroll = () => place();
-    window.addEventListener("pointerdown", onDown, true);
+    window.addEventListener("pointerdown", onDown);
     window.addEventListener("keydown", onKey);
     window.addEventListener("scroll", onScroll, true);
     window.addEventListener("resize", onScroll);
     return () => {
-      window.removeEventListener("pointerdown", onDown, true);
+      window.removeEventListener("pointerdown", onDown);
       window.removeEventListener("keydown", onKey);
       window.removeEventListener("scroll", onScroll, true);
       window.removeEventListener("resize", onScroll);

package/dist/TimeRangeField.d.mts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type TimeRange = {
+    from: string | null;
+    to: string | null;
+};
+type TimeRangeFieldProps = {
+    value?: TimeRange;
+    onValueChange?: (next: TimeRange) => void;
+    portal?: boolean;
+    portalId?: string;
+    clearable?: boolean;
+    step?: number;
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+};
+declare function TimeRangeField({ value, onValueChange, portal, portalId, clearable, step, placeholder, className, disabled }: TimeRangeFieldProps): react_jsx_runtime.JSX.Element;
+
+export { type TimeRange, type TimeRangeFieldProps, TimeRangeField as default };

package/dist/TimeRangeField.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type TimeRange = {
+    from: string | null;
+    to: string | null;
+};
+type TimeRangeFieldProps = {
+    value?: TimeRange;
+    onValueChange?: (next: TimeRange) => void;
+    portal?: boolean;
+    portalId?: string;
+    clearable?: boolean;
+    step?: number;
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+};
+declare function TimeRangeField({ value, onValueChange, portal, portalId, clearable, step, placeholder, className, disabled }: TimeRangeFieldProps): react_jsx_runtime.JSX.Element;
+
+export { type TimeRange, type TimeRangeFieldProps, TimeRangeField as default };