@memobit/libs 3.3.0 → 3.4.0

package/dist/components/NotificationPanel/NotificationPanel.css

@@ -1 +1 @@
-.NotificationPanel{position:relative}.NotificationPanel__button{align-items:center;gap:var(--spacing-8);border:1px solid var(--border-color);border-radius:var(--radius);background:var(--card-background-color);color:var(--body-title-color);padding:var(--spacing-8) var(--spacing-12);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);display:inline-flex}.NotificationPanel__button--critical{border-color:color-mix(in srgb, var(--button-danger-border-color) 55%, var(--border-color));background:color-mix(in srgb, var(--button-danger-border-color) 12%, transparent)}.NotificationPanel__badge{min-width:var(--spacing-20);height:var(--spacing-20);border-radius:var(--radius-full);font-size:var(--font-size-xs);background:var(--button-danger-background-color);color:var(--button-danger-color);padding:0 var(--spacing-4);justify-content:center;align-items:center;display:inline-flex}.NotificationPanel__backdrop{z-index:9998;position:fixed;inset:0}.NotificationPanel__panel{z-index:9999;background:var(--card-background-color);border:1px solid var(--border-color);border-radius:var(--radius);width:min(420px,80vw);box-shadow:var(--card-box-shadow);padding:var(--spacing-12);position:fixed;top:0;left:0}.NotificationPanel__title{margin:0 0 var(--spacing-8) 0;font-size:var(--font-size-sm);color:var(--body-title-color);font-weight:var(--font-weight-medium)}.NotificationPanel__list{gap:var(--spacing-4);flex-direction:column;max-height:260px;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.NotificationPanel__list::-webkit-scrollbar{width:var(--scrollbar-size)}.NotificationPanel__list::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.NotificationPanel__list::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color);border-radius:var(--scrollbar-radius)}.NotificationPanel__list::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover-color)}.NotificationPanel__list{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color)}.NotificationPanel__item{font-size:var(--font-size-sm);color:var(--body-color);padding:var(--spacing-8);border-radius:var(--radius-sm);border:1px solid #0000}.NotificationPanel__item--critical{border-color:color-mix(in srgb, var(--button-danger-border-color) 50%, var(--border-color));background:color-mix(in srgb, var(--button-danger-border-color) 10%, transparent)}.NotificationPanel__empty{color:var(--body-sub-title-color);font-size:var(--font-size-sm);margin:0}
+.NotificationPanel{position:relative}.NotificationPanel__button{align-items:center;gap:var(--spacing-8);border:1px solid var(--border-color);border-radius:var(--radius);background:var(--card-background-color);color:var(--body-title-color);padding:var(--spacing-8) var(--spacing-12);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);display:inline-flex}.NotificationPanel__button--critical{border-color:color-mix(in srgb, var(--button-danger-border-color) 55%, var(--border-color));background:color-mix(in srgb, var(--button-danger-border-color) 12%, transparent)}.NotificationPanel__badge{min-width:var(--spacing-20);height:var(--spacing-20);border-radius:var(--radius-full);font-size:var(--font-size-xs);background:var(--button-danger-background-color);color:var(--button-danger-color);padding:0 var(--spacing-4);justify-content:center;align-items:center;display:inline-flex}.NotificationPanel__backdrop{z-index:9998;position:fixed;inset:0}.NotificationPanel__panel{z-index:9999;background:var(--card-background-color);border:1px solid var(--border-color);border-radius:var(--radius);width:min(420px,80vw);box-shadow:var(--card-box-shadow);padding:var(--spacing-12);position:fixed;top:0;left:0}.NotificationPanel__title{margin:0 0 var(--spacing-8) 0;font-size:var(--font-size-sm);color:var(--body-title-color);font-weight:var(--font-weight-medium)}.NotificationPanel__list{gap:var(--spacing-4);flex-direction:column;max-height:260px;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.NotificationPanel__list::-webkit-scrollbar{width:var(--scrollbar-size)}.NotificationPanel__list::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.NotificationPanel__list::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color);border-radius:var(--scrollbar-radius)}.NotificationPanel__list::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover-color)}.NotificationPanel__list{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color)}.NotificationPanel__item{font-size:var(--font-size-sm);color:var(--body-color);padding:var(--spacing-8);border-radius:var(--radius-sm);border:1px solid #0000}.NotificationPanel__item--critical{border-color:color-mix(in srgb, var(--button-danger-border-color) 50%, var(--border-color));background:color-mix(in srgb, var(--button-danger-border-color) 10%, transparent)}.NotificationPanel__item--clickable{cursor:pointer;transition:background-color var(--transition-fast)}.NotificationPanel__item--clickable:hover{background:color-mix(in srgb, var(--body-accent-color) 14%, transparent)}.NotificationPanel__empty{color:var(--body-sub-title-color);font-size:var(--font-size-sm);margin:0}

package/dist/components/NotificationPanel/NotificationPanel2.js

@@ -1,17 +1,17 @@
 import './NotificationPanel.css';
 /* empty css                  */
-import { useEffect as p, useRef as N, useState as g } from "react";
-import { Fragment as k, jsx as n, jsxs as d } from "react/jsx-runtime";
-import { createPortal as w } from "react-dom";
-var S = ({ items: i, buttonLabel: _ = "Alerts", panelTitle: y = "Notifications", emptyMessage: P = "No active notifications." }) => {
-  const [o, m] = g(!1), [v, u] = g({ opacity: 0 }), s = N(null), f = N(null), b = i.some((t) => t.severity === "critical");
-  return p(() => {
-    if (!o || !s.current || !f.current) return;
+import { useEffect as N, useRef as _, useState as g } from "react";
+import { Fragment as w, jsx as n, jsxs as u } from "react/jsx-runtime";
+import { createPortal as E } from "react-dom";
+var B = ({ items: i, buttonLabel: y = "Alerts", panelTitle: P = "Notifications", emptyMessage: v = "No active notifications.", onItemClick: m }) => {
+  const [o, s] = g(!1), [b, h] = g({ opacity: 0 }), f = _(null), d = _(null), R = i.some((t) => t.severity === "critical");
+  return N(() => {
+    if (!o || !f.current || !d.current) return;
     const t = requestAnimationFrame(() => {
-      if (!s.current || !f.current) return;
-      const c = s.current.getBoundingClientRect(), a = f.current.getBoundingClientRect(), h = document.documentElement.clientWidth, R = document.documentElement.clientHeight, e = 8;
-      let l = c.bottom + e, r = c.right - a.width;
-      r < e && (r = e), r + a.width > h - e && (r = h - a.width - e), l + a.height > R - e && (l = c.top - a.height - e), l < e && (l = e), u({
+      if (!f.current || !d.current) return;
+      const a = f.current.getBoundingClientRect(), c = d.current.getBoundingClientRect(), p = document.documentElement.clientWidth, k = document.documentElement.clientHeight, e = 8;
+      let l = a.bottom + e, r = a.right - c.width;
+      r < e && (r = e), r + c.width > p - e && (r = p - c.width - e), l + c.height > k - e && (l = a.top - c.height - e), l < e && (l = e), h({
         position: "fixed",
         top: l,
         left: r,
@@ -19,42 +19,49 @@ var S = ({ items: i, buttonLabel: _ = "Alerts", panelTitle: y = "Notifications",
       });
     });
     return () => cancelAnimationFrame(t);
-  }, [o]), p(() => {
+  }, [o]), N(() => {
     if (!o) return;
-    const t = (c) => {
-      c.key === "Escape" && m(!1);
+    const t = (a) => {
+      a.key === "Escape" && s(!1);
     };
     return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
-  }, [o]), /* @__PURE__ */ d("div", {
+  }, [o]), /* @__PURE__ */ u("div", {
     className: "NotificationPanel",
-    children: [/* @__PURE__ */ d("button", {
-      ref: s,
+    children: [/* @__PURE__ */ u("button", {
+      ref: f,
       type: "button",
-      className: `NotificationPanel__button${b ? " NotificationPanel__button--critical" : ""}`,
+      className: `NotificationPanel__button${R ? " NotificationPanel__button--critical" : ""}`,
       onClick: () => {
-        u({ opacity: 0 }), m((t) => !t);
+        h({ opacity: 0 }), s((t) => !t);
       },
-      children: [_, i.length > 0 && /* @__PURE__ */ n("span", {
+      children: [y, i.length > 0 && /* @__PURE__ */ n("span", {
         className: "NotificationPanel__badge",
         children: i.length
       })]
-    }), o && w(/* @__PURE__ */ d(k, { children: [/* @__PURE__ */ n("div", {
+    }), o && E(/* @__PURE__ */ u(w, { children: [/* @__PURE__ */ n("div", {
       className: "NotificationPanel__backdrop",
-      onClick: () => m(!1)
-    }), /* @__PURE__ */ d("div", {
-      ref: f,
+      onClick: () => s(!1)
+    }), /* @__PURE__ */ u("div", {
+      ref: d,
       className: "NotificationPanel__panel",
-      style: v,
+      style: b,
       children: [/* @__PURE__ */ n("h4", {
         className: "NotificationPanel__title",
-        children: y
+        children: P
       }), i.length === 0 ? /* @__PURE__ */ n("p", {
         className: "NotificationPanel__empty",
-        children: P
+        children: v
       }) : /* @__PURE__ */ n("ul", {
         className: "NotificationPanel__list",
         children: i.map((t) => /* @__PURE__ */ n("li", {
-          className: `NotificationPanel__item${t.severity === "critical" ? " NotificationPanel__item--critical" : ""}`,
+          className: [
+            "NotificationPanel__item",
+            t.severity === "critical" ? "NotificationPanel__item--critical" : "",
+            m ? "NotificationPanel__item--clickable" : ""
+          ].filter(Boolean).join(" "),
+          onClick: m ? () => {
+            s(!1), m(t);
+          } : void 0,
           children: t.message
         }, t.id))
       })]
@@ -62,5 +69,5 @@ var S = ({ items: i, buttonLabel: _ = "Alerts", panelTitle: y = "Notifications",
   });
 };
 export {
-  S as NotificationPanel
+  B as NotificationPanel
 };

package/dist/helpers/VersionInfo.js

@@ -23,7 +23,7 @@ var r = (i) => {
   const o = {
     ...i,
     lib: d,
-    libBuildNumber: 463,
+    libBuildNumber: 467,
     libCommit: n,
     libBuildDate: t
   };

package/dist/index.d.ts

@@ -2433,6 +2433,12 @@ declare interface NotificationPanelProps {
     buttonLabel?: string;
     panelTitle?: string;
     emptyMessage?: string;
+    /**
+     * Makes each row a way into whatever it is warning about, and closes the panel on the
+     * way. Without it the rows are a read-only list — fine for a reading like "battery 0%"
+     * that has nowhere to go, wrong for an alert that names a record you want to open.
+     */
+    onItemClick?: (item: NotificationPanelItem) => void;
 }
 
 declare type OutputFormat = 'html' | 'markdown';

package/dist/version.js

@@ -1,4 +1,4 @@
-var I = "3.3.0", B = 463, L = "1906cce", _ = "2026-10-02T16:48:12.321Z", r = "463";
+var I = "3.4.0", B = 467, L = "e0f3c94", _ = "2026-10-02T17:16:46.471Z", r = "467";
 export {
   _ as LIB_BUILD_DATE,
   r as LIB_BUILD_ID,

package/dist/version.json

@@ -1,6 +1,6 @@
 {
-  "version": "3.3.0",
-  "buildNumber": 463,
-  "commit": "1906cce",
-  "buildDate": "2026-10-02T16:48:12.321Z"
+  "version": "3.4.0",
+  "buildNumber": 467,
+  "commit": "e0f3c94",
+  "buildDate": "2026-10-02T17:16:46.471Z"
 }

package/package.json

@@ -1,121 +1,121 @@
-{
-  "name": "@memobit/libs",
-  "version": "3.3.0",
-  "description": "React component library powering the Memobit apps — 100+ components, helpers and hooks. Icons ship as @memobit/icons and themes as @memobit/themes. TypeScript-first, ESM-only, React 19.",
-  "keywords": [
-    "react",
-    "react-components",
-    "component-library",
-    "ui",
-    "ui-kit",
-    "design-system",
-    "typescript",
-    "hooks",
-    "memobit"
-  ],
-  "author": "Iulian Cristea <iulianx@gmail.com>",
-  "license": "Apache-2.0",
-  "homepage": "https://react.memobit.ro/",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/CristeaIulian/memobit-react-library.git"
-  },
-  "bugs": {
-    "url": "https://github.com/CristeaIulian/memobit-react-library/issues"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "sideEffects": [
-    "**/*.css",
-    "**/*.scss"
-  ],
-  "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./dist/index.css": "./dist/index.css",
-    "./mfa": {
-      "types": "./dist/mfa.d.ts",
-      "import": "./dist/mfa.js"
-    },
-    "./dist/styles/variables.scss": "./dist/styles/variables.scss",
-    "./dist/styles/base.scss": "./dist/styles/base.scss",
-    "./dist/styles/effects.scss": "./dist/styles/effects.scss",
-    "./dist/styles/highlight.scss": "./dist/styles/highlight.scss",
-    "./dist/styles/scrollbars.scss": "./dist/styles/scrollbars.scss",
-    "./dist/styles/utilities.scss": "./dist/styles/utilities.scss",
-    "./dist/styles/utility-classes.scss": "./dist/styles/utility-classes.scss",
-    "./dist/components/*": "./dist/components/*"
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "vite build && npm pack",
-    "release": "npm run build && npm publish",
-    "check:npm-auth": "node scripts/check-npm-auth.mjs",
-    "ship": "npm run check:npm-auth && npm version patch && npm run release && git push --follow-tags",
-    "ship:minor": "npm run check:npm-auth && npm version minor && npm run release && git push --follow-tags",
-    "ship:major": "npm run check:npm-auth && npm version major && npm run release && git push --follow-tags",
-    "prepublishOnly": "vite build",
-    "dev": "vite build --watch",
-    "playground": "vite serve playground --config playground/vite.config.ts",
-    "lint": "eslint src --ext .ts,.tsx",
-    "lint:fix": "eslint src --ext .ts,.tsx --fix",
-    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css}\"",
-    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css}\""
-  },
-  "peerDependencies": {
-    "@memobit/icons": "^1.0.0",
-    "@memobit/themes": "^1.0.0",
-    "react": "19.2.7",
-    "react-dom": "19.2.7"
-  },
-  "devDependencies": {
-    "@eslint/js": "9.39.4",
-    "@memobit/icons": "file:../memobit-react-icons",
-    "@memobit/themes": "file:../memobit-react-themes",
-    "@microsoft/api-extractor": "7.58.8",
-    "@types/react": "19.2.14",
-    "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "6.0.4",
-    "esbuild": "0.28.1",
-    "eslint": "9.39.4",
-    "eslint-config-prettier": "10.1.8",
-    "eslint-plugin-import-x": "4.17.1",
-    "eslint-plugin-prettier": "5.5.5",
-    "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-simple-import-sort": "13.0.0",
-    "globals": "17.6.0",
-    "prettier": "3.8.3",
-    "qrcode.react": "4.2.0",
-    "react": "19.2.7",
-    "react-dom": "19.2.7",
-    "react-router": "8.3.0",
-    "sass": "1.99.0",
-    "terser": "5.47.1",
-    "typescript": "6.0.3",
-    "typescript-eslint": "8.59.3",
-    "vite": "8.1.5",
-    "vite-plugin-dts": "5.0.0",
-    "vite-plugin-static-copy": "3.4.0"
-  },
-  "overrides": {
-    "brace-expansion@1": "1.1.18",
-    "brace-expansion@5": "5.0.9",
-    "fast-uri@3": "3.1.8",
-    "immutable": "5.1.9",
-    "js-yaml": "4.3.2",
-    "minimatch@10": "10.2.6",
-    "nanoid@3": "3.3.18",
-    "picomatch@2": "2.3.2",
-    "postcss": "8.5.26",
-    "esbuild": "0.28.1"
-  }
-}
+{
+  "name": "@memobit/libs",
+  "version": "3.4.0",
+  "description": "React component library powering the Memobit apps — 100+ components, helpers and hooks. Icons ship as @memobit/icons and themes as @memobit/themes. TypeScript-first, ESM-only, React 19.",
+  "keywords": [
+    "react",
+    "react-components",
+    "component-library",
+    "ui",
+    "ui-kit",
+    "design-system",
+    "typescript",
+    "hooks",
+    "memobit"
+  ],
+  "author": "Iulian Cristea <iulianx@gmail.com>",
+  "license": "Apache-2.0",
+  "homepage": "https://react.memobit.ro/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CristeaIulian/memobit-react-library.git"
+  },
+  "bugs": {
+    "url": "https://github.com/CristeaIulian/memobit-react-library/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./dist/index.css": "./dist/index.css",
+    "./mfa": {
+      "types": "./dist/mfa.d.ts",
+      "import": "./dist/mfa.js"
+    },
+    "./dist/styles/variables.scss": "./dist/styles/variables.scss",
+    "./dist/styles/base.scss": "./dist/styles/base.scss",
+    "./dist/styles/effects.scss": "./dist/styles/effects.scss",
+    "./dist/styles/highlight.scss": "./dist/styles/highlight.scss",
+    "./dist/styles/scrollbars.scss": "./dist/styles/scrollbars.scss",
+    "./dist/styles/utilities.scss": "./dist/styles/utilities.scss",
+    "./dist/styles/utility-classes.scss": "./dist/styles/utility-classes.scss",
+    "./dist/components/*": "./dist/components/*"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build && npm pack",
+    "release": "npm run build && npm publish",
+    "check:npm-auth": "node scripts/check-npm-auth.mjs",
+    "ship": "npm run check:npm-auth && npm version patch && npm run release && git push --follow-tags",
+    "ship:minor": "npm run check:npm-auth && npm version minor && npm run release && git push --follow-tags",
+    "ship:major": "npm run check:npm-auth && npm version major && npm run release && git push --follow-tags",
+    "prepublishOnly": "vite build",
+    "dev": "vite build --watch",
+    "playground": "vite serve playground --config playground/vite.config.ts",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css}\""
+  },
+  "peerDependencies": {
+    "@memobit/icons": "^1.0.0",
+    "@memobit/themes": "^1.0.0",
+    "react": "19.2.7",
+    "react-dom": "19.2.7"
+  },
+  "devDependencies": {
+    "@eslint/js": "9.39.4",
+    "@memobit/icons": "file:../memobit-react-icons",
+    "@memobit/themes": "file:../memobit-react-themes",
+    "@microsoft/api-extractor": "7.58.8",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "6.0.4",
+    "esbuild": "0.28.1",
+    "eslint": "9.39.4",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-import-x": "4.17.1",
+    "eslint-plugin-prettier": "5.5.5",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-simple-import-sort": "13.0.0",
+    "globals": "17.6.0",
+    "prettier": "3.8.3",
+    "qrcode.react": "4.2.0",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "react-router": "8.3.0",
+    "sass": "1.99.0",
+    "terser": "5.47.1",
+    "typescript": "6.0.3",
+    "typescript-eslint": "8.59.3",
+    "vite": "8.1.5",
+    "vite-plugin-dts": "5.0.0",
+    "vite-plugin-static-copy": "3.4.0"
+  },
+  "overrides": {
+    "brace-expansion@1": "1.1.21",
+    "brace-expansion@5": "5.0.12",
+    "fast-uri@3": "3.1.8",
+    "immutable": "5.1.9",
+    "js-yaml": "4.3.2",
+    "minimatch@10": "10.2.6",
+    "nanoid@3": "3.3.18",
+    "picomatch@2": "2.3.2",
+    "postcss": "8.5.26",
+    "esbuild": "0.28.1"
+  }
+}