@forgedevstack/bear 1.2.0 → 1.2.2

package/dist/components/NavigableSelect/NavigableSelect.js

@@ -1,139 +1,157 @@
-import { jsxs as l, jsx as a } from "react/jsx-runtime";
-import { useState as S, useRef as B, useMemo as V, useEffect as X, useCallback as f } from "react";
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { useState as _, useRef as S, useMemo as j, useEffect as W, useCallback as m } from "react";
 import { cn as s } from "../../utils/cn.js";
-import { DEFAULT_PLACEHOLDER as pe, DEFAULT_MAX_VISIBLE as fe, DEFAULT_EMPTY_TEXT as me, SCROLL_BLOCK as xe, TAG_SIZE_CLASSES as ye, ICON_SIZE as he, TRIGGER_SIZE_CLASSES as ve, DROPDOWN_Z_INDEX as ke, OPTION_SIZE_CLASSES as Ne, OPTION_HEIGHT as _e } from "./NavigableSelect.const.js";
-const Le = (q) => {
+import { Portal as xe } from "../Portal/Portal.js";
+import { DEFAULT_PLACEHOLDER as ye, DEFAULT_MAX_VISIBLE as he, DEFAULT_EMPTY_TEXT as ve, SCROLL_BLOCK as ke, TAG_SIZE_CLASSES as we, ICON_SIZE as Ne, TRIGGER_SIZE_CLASSES as _e, DROPDOWN_Z_INDEX as Se, OPTION_SIZE_CLASSES as Ee, OPTION_HEIGHT as Be } from "./NavigableSelect.const.js";
+const Te = ($) => {
   const {
-    options: _,
-    value: j,
-    defaultValue: Y,
+    options: E,
+    value: H,
+    defaultValue: J,
     onChange: o,
-    multiple: n = !1,
-    searchable: $ = !0,
-    placeholder: J = pe,
-    label: H,
-    helperText: P,
-    error: w,
-    disabled: m = !1,
-    size: x = "md",
-    fullWidth: Q = !1,
-    maxVisible: ee = fe,
-    maxSelections: E,
-    emptyText: re = me,
-    className: ae,
-    style: te,
-    testId: le
-  } = q, y = j !== void 0, W = (e) => e === void 0 ? [] : Array.isArray(e) ? e : [e], [be, F] = S(W(Y)), [g, L] = S(!1), [c, i] = S(-1), [u, C] = S(""), I = B(null), D = B(null), U = B(null), Z = B(null), b = y ? W(j) : be, h = V(() => {
-    if (!u) return _;
-    const e = u.toLowerCase();
-    return _.filter(
+    multiple: b = !1,
+    searchable: Q = !0,
+    placeholder: ee = ye,
+    label: z,
+    helperText: F,
+    error: B,
+    disabled: x = !1,
+    size: y = "md",
+    fullWidth: re = !1,
+    maxVisible: ae = he,
+    maxSelections: L,
+    emptyText: te = ve,
+    className: le,
+    style: ne,
+    testId: be
+  } = $, h = H !== void 0, U = (e) => e === void 0 ? [] : Array.isArray(e) ? e : [e], [se, Z] = _(U(J)), [i, C] = _(!1), [g, c] = _(-1), [f, I] = _(""), G = S(null), K = S(null), D = S(null), X = S(null), A = S(null), [T, ie] = _({ top: 0, left: 0, width: 0 }), n = h ? U(H) : se, v = j(() => {
+    if (!f) return E;
+    const e = f.toLowerCase();
+    return E.filter(
       (r) => {
-        var t;
-        return r.label.toLowerCase().includes(e) || ((t = r.description) == null ? void 0 : t.toLowerCase().includes(e));
+        var a;
+        return r.label.toLowerCase().includes(e) || ((a = r.description) == null ? void 0 : a.toLowerCase().includes(e));
       }
     );
-  }, [_, u]), ne = V(() => {
+  }, [E, f]), oe = j(() => {
     const e = /* @__PURE__ */ new Map();
-    return h.forEach((r) => {
-      const t = r.group || "";
-      e.has(t) || e.set(t, []), e.get(t).push(r);
+    return v.forEach((r) => {
+      const a = r.group || "";
+      e.has(a) || e.set(a, []), e.get(a).push(r);
     }), e;
-  }, [h]), v = V(() => h.filter((e) => !e.disabled), [h]);
-  X(() => {
+  }, [v]), k = j(() => v.filter((e) => !e.disabled), [v]);
+  W(() => {
+    if (!i) return;
+    const e = () => {
+      var a;
+      const r = (a = A.current) == null ? void 0 : a.getBoundingClientRect();
+      r && ie({
+        top: r.bottom + 4,
+        left: Math.max(8, Math.min(r.left, window.innerWidth - r.width - 8)),
+        width: r.width
+      });
+    };
+    return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
+      window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
+    };
+  }, [i]), W(() => {
+    if (!i) return;
     const e = (r) => {
-      I.current && !I.current.contains(r.target) && (L(!1), C(""));
+      var d, N;
+      const a = r.target;
+      (d = G.current) != null && d.contains(a) || (N = K.current) != null && N.contains(a) || (C(!1), I(""));
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, []), X(() => {
-    if (!D.current || c < 0) return;
+  }, [i]), W(() => {
+    if (!D.current || g < 0) return;
     const e = D.current.querySelector('[data-active="true"]');
-    e == null || e.scrollIntoView({ block: xe });
-  }, [c]);
-  const A = f(() => {
-    m || (L(!0), i(0), setTimeout(() => {
+    e == null || e.scrollIntoView({ block: ke });
+  }, [g]);
+  const O = m(() => {
+    x || (C(!0), c(0), setTimeout(() => {
       var e;
-      return (e = U.current) == null ? void 0 : e.focus();
+      return (e = X.current) == null ? void 0 : e.focus();
     }, 0));
-  }, [m]), k = f(() => {
+  }, [x]), w = m(() => {
     var e;
-    L(!1), C(""), i(-1), (e = Z.current) == null || e.focus();
-  }, []), T = f(
+    C(!1), I(""), c(-1), (e = A.current) == null || e.focus();
+  }, []), M = m(
     (e) => {
       let r;
-      if (n)
-        if (b.includes(e))
-          r = b.filter((t) => t !== e);
+      if (b)
+        if (n.includes(e))
+          r = n.filter((a) => a !== e);
         else {
-          if (E && b.length >= E) return;
-          r = [...b, e];
+          if (L && n.length >= L) return;
+          r = [...n, e];
         }
       else
-        r = [e], k();
-      y || F(r), o == null || o(n ? r : r[0] ?? "");
+        r = [e], w();
+      h || Z(r), o == null || o(b ? r : r[0] ?? "");
     },
-    [b, n, y, E, o, k]
-  ), O = f(
+    [n, b, h, L, o, w]
+  ), R = m(
     (e) => {
-      const r = b.filter((t) => t !== e);
-      y || F(r), o == null || o(n ? r : r[0] ?? "");
+      const r = n.filter((a) => a !== e);
+      h || Z(r), o == null || o(b ? r : r[0] ?? "");
     },
-    [b, n, y, o]
-  ), G = f(
+    [n, b, h, o]
+  ), q = m(
     (e) => {
-      if (!g) {
-        (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), A());
+      if (!i) {
+        (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), O());
         return;
       }
       switch (e.key) {
         case "ArrowDown":
-          e.preventDefault(), i((r) => Math.min(r + 1, v.length - 1));
+          e.preventDefault(), c((r) => Math.min(r + 1, k.length - 1));
           break;
         case "ArrowUp":
-          e.preventDefault(), i((r) => Math.max(r - 1, 0));
+          e.preventDefault(), c((r) => Math.max(r - 1, 0));
           break;
         case "Enter":
         case " ":
-          e.preventDefault(), c >= 0 && v[c] && T(v[c].value);
+          e.preventDefault(), g >= 0 && k[g] && M(k[g].value);
           break;
         case "Escape":
-          e.preventDefault(), k();
+          e.preventDefault(), w();
           break;
         case "Backspace":
-          u === "" && n && b.length > 0 && O(b[b.length - 1]);
+          f === "" && b && n.length > 0 && R(n[n.length - 1]);
           break;
         case "Home":
-          e.preventDefault(), i(0);
+          e.preventDefault(), c(0);
           break;
         case "End":
-          e.preventDefault(), i(v.length - 1);
+          e.preventDefault(), c(k.length - 1);
           break;
       }
     },
-    [g, c, v, T, k, A, u, n, b, O]
-  ), se = f((e) => b.includes(e), [b]), d = b.map((e) => _.find((r) => r.value === e)).filter(Boolean), oe = !!w, ie = ve[x], ce = Ne[x], de = ye[x], K = he[x], ge = ee * _e[x];
-  let R = -1;
+    [i, g, k, M, w, O, f, b, n, R]
+  ), ce = m((e) => n.includes(e), [n]), u = n.map((e) => E.find((r) => r.value === e)).filter(Boolean), de = !!B, ge = _e[y], ue = Ee[y], fe = we[y], Y = Ne[y], pe = ae * Be[y];
+  let P = -1;
   return /* @__PURE__ */ l(
     "div",
     {
-      ref: I,
+      ref: G,
       className: s(
         "Bear-NavigableSelect",
         "bear-relative bear-flex bear-flex-col bear-gap-1.5",
-        Q && "bear-w-full",
-        ae
+        re && "bear-w-full",
+        le
       ),
-      style: te,
-      "data-testid": le,
+      style: ne,
+      "data-testid": be,
       children: [
-        H && /* @__PURE__ */ a("label", { className: "Bear-NavigableSelect__label bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-300", children: H }),
+        z && /* @__PURE__ */ t("label", { className: "Bear-NavigableSelect__label bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-300", children: z }),
         /* @__PURE__ */ l(
           "button",
           {
-            ref: Z,
+            ref: A,
             type: "button",
-            disabled: m,
-            onClick: () => g ? k() : A(),
-            onKeyDown: G,
+            disabled: x,
+            onClick: () => i ? w() : O(),
+            onKeyDown: q,
             className: s(
               "Bear-NavigableSelect__trigger",
               "bear-flex bear-items-center bear-justify-between bear-w-full",
@@ -141,15 +159,15 @@ const Le = (q) => {
               "bear-transition-all bear-duration-200",
               "bear-bg-white dark:bear-bg-gray-900",
               "bear-text-gray-900 dark:bear-text-white",
-              oe ? "bear-border-red-500 focus:bear-ring-2 focus:bear-ring-red-500/20" : "bear-border-gray-300 dark:bear-border-gray-600 focus:bear-border-[var(--bear-primary-500)] focus:bear-ring-2 focus:bear-ring-[var(--bear-primary-500)]/20",
-              m && "bear-opacity-50 bear-cursor-not-allowed",
-              ie
+              de ? "bear-border-red-500 focus:bear-ring-2 focus:bear-ring-red-500/20" : "bear-border-gray-300 dark:bear-border-gray-600 focus:bear-border-[var(--bear-primary-500)] focus:bear-ring-2 focus:bear-ring-[var(--bear-primary-500)]/20",
+              x && "bear-opacity-50 bear-cursor-not-allowed",
+              ge
             ),
             "aria-haspopup": "listbox",
-            "aria-expanded": g,
+            "aria-expanded": i,
             children: [
               /* @__PURE__ */ l("span", { className: "Bear-NavigableSelect__value bear-flex bear-items-center bear-gap-1.5 bear-flex-wrap bear-flex-1 bear-min-w-0 bear-overflow-hidden", children: [
-                n && d.length > 0 && d.map((e) => /* @__PURE__ */ l(
+                b && u.length > 0 && u.map((e) => /* @__PURE__ */ l(
                   "span",
                   {
                     className: s(
@@ -157,16 +175,16 @@ const Le = (q) => {
                       "bear-inline-flex bear-items-center bear-gap-1 bear-rounded-md",
                       "bear-bg-[var(--bear-primary-100,#fce7f3)] dark:bear-bg-[var(--bear-primary-900,#831843)]/30",
                       "bear-text-[var(--bear-primary-700,#be185d)] dark:bear-text-[var(--bear-primary-300,#f9a8d4)]",
-                      de
+                      fe
                     ),
                     children: [
                       e.label,
-                      !m && /* @__PURE__ */ a(
+                      !x && /* @__PURE__ */ t(
                         "button",
                         {
                           type: "button",
                           onClick: (r) => {
-                            r.stopPropagation(), O(e.value);
+                            r.stopPropagation(), R(e.value);
                           },
                           className: "bear-ml-0.5 hover:bear-opacity-70",
                           "aria-label": `Remove ${e.label}`,
@@ -177,43 +195,49 @@ const Le = (q) => {
                   },
                   e.value
                 )),
-                !n && d.length > 0 && /* @__PURE__ */ l("span", { className: "bear-truncate", children: [
-                  d[0].icon && /* @__PURE__ */ a("span", { className: "bear-mr-1.5", children: d[0].icon }),
-                  d[0].label
+                !b && u.length > 0 && /* @__PURE__ */ l("span", { className: "bear-truncate", children: [
+                  u[0].icon && /* @__PURE__ */ t("span", { className: "bear-mr-1.5", children: u[0].icon }),
+                  u[0].label
                 ] }),
-                d.length === 0 && /* @__PURE__ */ a("span", { className: "bear-text-gray-400 dark:bear-text-gray-500", children: J })
+                u.length === 0 && /* @__PURE__ */ t("span", { className: "bear-text-gray-400 dark:bear-text-gray-500", children: ee })
               ] }),
-              /* @__PURE__ */ a(
+              /* @__PURE__ */ t(
                 "svg",
                 {
                   className: s(
-                    K,
+                    Y,
                     "bear-text-gray-400 dark:bear-text-gray-500 bear-transition-transform bear-shrink-0 bear-ml-2",
-                    g && "bear-rotate-180"
+                    i && "bear-rotate-180"
                   ),
                   fill: "none",
                   viewBox: "0 0 24 24",
                   stroke: "currentColor",
                   strokeWidth: 2,
-                  children: /* @__PURE__ */ a("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+                  children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
                 }
               )
             ]
           }
         ),
-        g && /* @__PURE__ */ l(
+        i && /* @__PURE__ */ t(xe, { children: /* @__PURE__ */ l(
           "div",
           {
+            ref: K,
             className: s(
               "Bear-NavigableSelect__dropdown",
-              "bear-absolute bear-top-full bear-left-0 bear-w-full bear-mt-1",
+              "bear-fixed",
               "bear-bg-white dark:bear-bg-gray-900",
               "bear-border bear-border-gray-200 dark:bear-border-gray-700",
               "bear-rounded-lg bear-shadow-lg bear-overflow-hidden"
             ),
-            style: { zIndex: ke },
+            style: {
+              zIndex: Se,
+              top: T.top,
+              left: T.left,
+              width: T.width
+            },
             children: [
-              $ && /* @__PURE__ */ l("div", { className: "Bear-NavigableSelect__search bear-flex bear-items-center bear-gap-2 bear-px-3 bear-py-2 bear-border-b bear-border-gray-200 dark:bear-border-gray-700", children: [
+              Q && /* @__PURE__ */ l("div", { className: "Bear-NavigableSelect__search bear-flex bear-items-center bear-gap-2 bear-px-3 bear-py-2 bear-border-b bear-border-gray-200 dark:bear-border-gray-700", children: [
                 /* @__PURE__ */ l(
                   "svg",
                   {
@@ -223,21 +247,21 @@ const Le = (q) => {
                     stroke: "currentColor",
                     strokeWidth: 2,
                     children: [
-                      /* @__PURE__ */ a("circle", { cx: "11", cy: "11", r: "8" }),
-                      /* @__PURE__ */ a("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+                      /* @__PURE__ */ t("circle", { cx: "11", cy: "11", r: "8" }),
+                      /* @__PURE__ */ t("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
                     ]
                   }
                 ),
-                /* @__PURE__ */ a(
+                /* @__PURE__ */ t(
                   "input",
                   {
-                    ref: U,
+                    ref: X,
                     type: "text",
-                    value: u,
+                    value: f,
                     onChange: (e) => {
-                      C(e.target.value), i(0);
+                      I(e.target.value), c(0);
                     },
-                    onKeyDown: G,
+                    onKeyDown: q,
                     placeholder: "Type to search...",
                     className: s(
                       "Bear-NavigableSelect__input",
@@ -255,43 +279,43 @@ const Le = (q) => {
                 {
                   ref: D,
                   className: "Bear-NavigableSelect__list bear-overflow-y-auto bear-py-1",
-                  style: { maxHeight: ge },
+                  style: { maxHeight: pe },
                   role: "listbox",
-                  "aria-multiselectable": n,
+                  "aria-multiselectable": b,
                   children: [
-                    h.length === 0 && /* @__PURE__ */ a("div", { className: "Bear-NavigableSelect__empty bear-px-3 bear-py-4 bear-text-center bear-text-sm bear-text-gray-500 dark:bear-text-gray-400", children: re }),
-                    Array.from(ne.entries()).map(([e, r]) => /* @__PURE__ */ l("div", { className: "Bear-NavigableSelect__group", children: [
-                      e && /* @__PURE__ */ a("div", { className: "Bear-NavigableSelect__group-title bear-px-3 bear-py-1 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider bear-text-gray-400 dark:bear-text-gray-500", children: e }),
-                      r.map((t) => {
-                        const N = t.disabled, z = !N;
-                        z && R++;
-                        const M = R === c, p = se(t.value), ue = R;
+                    v.length === 0 && /* @__PURE__ */ t("div", { className: "Bear-NavigableSelect__empty bear-px-3 bear-py-4 bear-text-center bear-text-sm bear-text-gray-500 dark:bear-text-gray-400", children: te }),
+                    Array.from(oe.entries()).map(([e, r]) => /* @__PURE__ */ l("div", { className: "Bear-NavigableSelect__group", children: [
+                      e && /* @__PURE__ */ t("div", { className: "Bear-NavigableSelect__group-title bear-px-3 bear-py-1 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider bear-text-gray-400 dark:bear-text-gray-500", children: e }),
+                      r.map((a) => {
+                        const d = a.disabled, N = !d;
+                        N && P++;
+                        const V = P === g, p = ce(a.value), me = P;
                         return /* @__PURE__ */ l(
                           "button",
                           {
                             type: "button",
-                            disabled: N,
+                            disabled: d,
                             className: s(
                               "Bear-NavigableSelect__option",
                               "bear-w-full bear-flex bear-items-center bear-gap-2.5 bear-text-left bear-cursor-pointer",
                               "bear-transition-colors bear-duration-100",
-                              ce,
-                              M && "bear-bg-gray-100 dark:bear-bg-gray-800",
-                              p && !M && "bear-bg-[var(--bear-primary-50,#fdf2f8)] dark:bear-bg-[var(--bear-primary-950,#500724)]/20",
-                              N && "bear-opacity-40 bear-cursor-not-allowed"
+                              ue,
+                              V && "bear-bg-gray-100 dark:bear-bg-gray-800",
+                              p && !V && "bear-bg-[var(--bear-primary-50,#fdf2f8)] dark:bear-bg-[var(--bear-primary-950,#500724)]/20",
+                              d && "bear-opacity-40 bear-cursor-not-allowed"
                             ),
-                            "data-active": M,
+                            "data-active": V,
                             onMouseEnter: () => {
-                              z && i(ue);
+                              N && c(me);
                             },
                             onClick: () => {
-                              N || T(t.value);
+                              d || M(a.value);
                             },
                             role: "option",
                             "aria-selected": p,
-                            "aria-disabled": N,
+                            "aria-disabled": d,
                             children: [
-                              n && /* @__PURE__ */ a(
+                              b && /* @__PURE__ */ t(
                                 "span",
                                 {
                                   className: s(
@@ -300,31 +324,31 @@ const Le = (q) => {
                                     "bear-transition-colors",
                                     p ? "bear-bg-[var(--bear-primary-500)] bear-border-[var(--bear-primary-500)] bear-text-white" : "bear-border-gray-300 dark:bear-border-gray-600"
                                   ),
-                                  children: p && /* @__PURE__ */ a("svg", { className: "bear-w-3 bear-h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ a("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) })
+                                  children: p && /* @__PURE__ */ t("svg", { className: "bear-w-3 bear-h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) })
                                 }
                               ),
-                              t.icon && /* @__PURE__ */ a("span", { className: "Bear-NavigableSelect__option-icon bear-shrink-0 bear-text-gray-500 dark:bear-text-gray-400", children: t.icon }),
+                              a.icon && /* @__PURE__ */ t("span", { className: "Bear-NavigableSelect__option-icon bear-shrink-0 bear-text-gray-500 dark:bear-text-gray-400", children: a.icon }),
                               /* @__PURE__ */ l("div", { className: "Bear-NavigableSelect__option-body bear-flex-1 bear-min-w-0", children: [
-                                /* @__PURE__ */ a("div", { className: s(
+                                /* @__PURE__ */ t("div", { className: s(
                                   "Bear-NavigableSelect__option-label bear-truncate",
                                   p ? "bear-text-[var(--bear-primary-700,#be185d)] dark:bear-text-[var(--bear-primary-300,#f9a8d4)] bear-font-medium" : "bear-text-gray-900 dark:bear-text-white"
-                                ), children: t.label }),
-                                t.description && /* @__PURE__ */ a("div", { className: "Bear-NavigableSelect__option-desc bear-text-xs bear-text-gray-500 dark:bear-text-gray-400 bear-truncate", children: t.description })
+                                ), children: a.label }),
+                                a.description && /* @__PURE__ */ t("div", { className: "Bear-NavigableSelect__option-desc bear-text-xs bear-text-gray-500 dark:bear-text-gray-400 bear-truncate", children: a.description })
                               ] }),
-                              !n && p && /* @__PURE__ */ a(
+                              !b && p && /* @__PURE__ */ t(
                                 "svg",
                                 {
-                                  className: s(K, "bear-text-[var(--bear-primary-500)] bear-shrink-0"),
+                                  className: s(Y, "bear-text-[var(--bear-primary-500)] bear-shrink-0"),
                                   fill: "none",
                                   viewBox: "0 0 24 24",
                                   stroke: "currentColor",
                                   strokeWidth: 2,
-                                  children: /* @__PURE__ */ a("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
+                                  children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
                                 }
                               )
                             ]
                           },
-                          t.value
+                          a.value
                         );
                       })
                     ] }, e))
@@ -333,29 +357,29 @@ const Le = (q) => {
               ),
               /* @__PURE__ */ l("div", { className: "Bear-NavigableSelect__footer bear-flex bear-items-center bear-gap-3 bear-px-3 bear-py-1.5 bear-border-t bear-border-gray-200 dark:bear-border-gray-700 bear-text-[11px] bear-text-gray-400 dark:bear-text-gray-500", children: [
                 /* @__PURE__ */ l("span", { className: "bear-flex bear-items-center bear-gap-1", children: [
-                  /* @__PURE__ */ a("kbd", { className: "bear-px-1 bear-rounded bear-bg-gray-100 dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700", children: "↑↓" }),
+                  /* @__PURE__ */ t("kbd", { className: "bear-px-1 bear-rounded bear-bg-gray-100 dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700", children: "↑↓" }),
                   "navigate"
                 ] }),
                 /* @__PURE__ */ l("span", { className: "bear-flex bear-items-center bear-gap-1", children: [
-                  /* @__PURE__ */ a("kbd", { className: "bear-px-1 bear-rounded bear-bg-gray-100 dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700", children: "↵" }),
+                  /* @__PURE__ */ t("kbd", { className: "bear-px-1 bear-rounded bear-bg-gray-100 dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700", children: "↵" }),
                   "select"
                 ] }),
                 /* @__PURE__ */ l("span", { className: "bear-flex bear-items-center bear-gap-1", children: [
-                  /* @__PURE__ */ a("kbd", { className: "bear-px-1 bear-rounded bear-bg-gray-100 dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700", children: "esc" }),
+                  /* @__PURE__ */ t("kbd", { className: "bear-px-1 bear-rounded bear-bg-gray-100 dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700", children: "esc" }),
                   "close"
                 ] })
               ] })
             ]
           }
-        ),
-        (P || w) && /* @__PURE__ */ a("p", { className: s(
+        ) }),
+        (F || B) && /* @__PURE__ */ t("p", { className: s(
           "Bear-NavigableSelect__helper bear-text-xs",
-          w ? "bear-text-red-500" : "bear-text-gray-500 dark:bear-text-gray-400"
-        ), children: w || P })
+          B ? "bear-text-red-500" : "bear-text-gray-500 dark:bear-text-gray-400"
+        ), children: B || F })
       ]
     }
   );
 };
 export {
-  Le as NavigableSelect
+  Te as NavigableSelect
 };

package/dist/components/NotificationCenter/NotificationCenter.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),q=require("react-dom"),c=require("../../utils/cn.cjs"),m=require("./NotificationCenter.const.cjs"),F=require("./NotificationCenter.utils.cjs"),W=({notification:r,onRead:d,onDismiss:g,onClick:b,translations:v})=>{const p=()=>{r.read||d==null||d(r.id),b==null||b(r)};return e.jsxs("div",{onClick:p,className:c.cn("Bear-NotificationCenter__item bear-flex bear-gap-3 bear-p-3 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700 last:bear-border-b-0 bear-cursor-pointer bear-transition-colors hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700/50",!r.read&&"bear-bg-gray-50 dark:bear-bg-zinc-800/50"),children:[e.jsx("div",{className:"Bear-NotificationCenter__item-icon bear-shrink-0",children:r.avatar?e.jsx("img",{src:r.avatar,alt:"",className:"bear-w-10 bear-h-10 bear-rounded-full bear-object-cover"}):r.icon?e.jsx("div",{className:c.cn("bear-w-10 bear-h-10 bear-rounded-full bear-flex bear-items-center bear-justify-center",m.NOTIFICATION_TYPE_COLORS[r.type]),children:r.icon}):e.jsxs("div",{className:c.cn("bear-w-10 bear-h-10 bear-rounded-full bear-flex bear-items-center bear-justify-center",m.NOTIFICATION_TYPE_COLORS[r.type]),children:[r.type==="success"&&e.jsx("svg",{className:"bear-w-5 bear-h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M5 13l4 4L19 7"})}),r.type==="error"&&e.jsx("svg",{className:"bear-w-5 bear-h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"})}),r.type==="warning"&&e.jsx("svg",{className:"bear-w-5 bear-h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"})}),r.type==="info"&&e.jsx("svg",{className:"bear-w-5 bear-h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"})})]})}),e.jsxs("div",{className:"Bear-NotificationCenter__item-content bear-flex-1 bear-min-w-0",children:[e.jsxs("div",{className:"bear-flex bear-items-start bear-justify-between bear-gap-2",children:[e.jsx("p",{className:c.cn("Bear-NotificationCenter__item-title bear-text-sm bear-font-medium bear-truncate",r.read?"bear-text-gray-600 dark:bear-text-zinc-300":"bear-text-gray-900 dark:bear-text-white"),children:r.title}),!r.read&&e.jsx("span",{className:"Bear-NotificationCenter__item-badge bear-w-2 bear-h-2 bear-rounded-full bear-bg-pink-500 bear-shrink-0 bear-mt-1.5"})]}),r.description&&e.jsx("p",{className:"Bear-NotificationCenter__item-description bear-text-xs bear-text-gray-500 dark:bear-text-zinc-400 bear-mt-0.5 bear-line-clamp-2",children:r.description}),e.jsx("p",{className:"Bear-NotificationCenter__item-time bear-text-xs bear-text-gray-400 dark:bear-text-zinc-500 bear-mt-1",children:F.formatRelativeTime(r.timestamp,v)}),r.actions&&r.actions.length>0&&e.jsx("div",{className:"Bear-NotificationCenter__item-actions bear-flex bear-gap-2 bear-mt-2",children:r.actions.map((a,j)=>e.jsx("button",{type:"button",onClick:x=>{x.stopPropagation(),a.onClick()},className:c.cn("bear-px-2 bear-py-1 bear-text-xs bear-rounded bear-transition-colors",a.variant==="primary"&&"bear-bg-pink-500 bear-text-white hover:bear-bg-pink-600",a.variant==="secondary"&&"bear-bg-gray-200 dark:bear-bg-zinc-600 bear-text-gray-900 dark:bear-text-white hover:bear-bg-gray-300 dark:hover:bear-bg-zinc-500",a.variant==="danger"&&"bear-bg-red-500 bear-text-white hover:bear-bg-red-600",!a.variant&&"bear-bg-gray-100 dark:bear-bg-zinc-700 bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-200 dark:hover:bear-bg-zinc-600"),children:a.label},j))})]}),g&&e.jsx("button",{type:"button",onClick:a=>{a.stopPropagation(),g(r.id)},className:"Bear-NotificationCenter__item-dismiss bear-p-1 bear-rounded bear-text-gray-500 dark:bear-text-zinc-500 hover:bear-text-gray-700 dark:hover:bear-text-zinc-300 hover:bear-bg-gray-200 dark:hover:bear-bg-zinc-700 bear-transition-colors bear-shrink-0",children:e.jsx("svg",{className:"bear-w-4 bear-h-4",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"})})})]})},D=({notifications:r,onNotificationClick:d,onMarkAsRead:g,onMarkAllAsRead:b,onDismiss:v,onClearAll:p,maxVisible:a=m.NOTIFICATION_CENTER_MAX_VISIBLE,groupByCategory:j=!1,position:x="top-right",trigger:C,open:I,onOpenChange:T,className:O,testId:E,translations:_,icon:M})=>{const[A,R]=n.useState(!1),[w,S]=n.useState({top:0,left:0}),[f,P]=n.useState(!1),B=n.useRef(null),y=n.useRef(null),h=I??A,N=T??R,o=n.useMemo(()=>({...m.NOTIFICATION_CENTER_DEFAULT_TRANSLATIONS,..._}),[_]),i=n.useMemo(()=>r.filter(t=>!t.read).length,[r]),z=n.useMemo(()=>f?r:r.slice(0,a),[r,a,f]);n.useEffect(()=>{if(h&&y.current){const t=y.current.getBoundingClientRect(),k=window.scrollY||document.documentElement.scrollTop,s=window.scrollX||document.documentElement.scrollLeft;let u=t.bottom+k+8,l=t.left+s;x.includes("left")?l=t.left+s:l=t.right+s-360,x.includes("bottom")&&(u=t.top+k-8),S({top:u,left:Math.max(8,l)})}},[h,x]),n.useEffect(()=>{const t=k=>{var u,l;const s=k.target;(u=B.current)!=null&&u.contains(s)||(l=s.closest)!=null&&l.call(s,"[data-bear-notification-center]")||N(!1)};return document.addEventListener("mousedown",t),()=>document.removeEventListener("mousedown",t)},[N]);const L=n.useCallback(()=>{N(!h)},[h,N]);return e.jsxs("div",{ref:B,className:c.cn("Bear-NotificationCenter bear-relative bear-inline-block",O),"data-testid":E,children:[C?e.jsx("div",{onClick:L,children:C}):e.jsxs("button",{ref:y,type:"button",onClick:L,className:"Bear-NotificationCenter__trigger bear-relative bear-p-2 bear-rounded-lg bear-text-gray-500 dark:bear-text-zinc-400 hover:bear-text-gray-900 dark:hover:bear-text-white hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-800 bear-transition-colors",children:[M??e.jsx("svg",{className:"bear-w-6 bear-h-6",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"})}),i>0&&e.jsx("span",{className:"Bear-NotificationCenter__badge bear-absolute bear-top-0 bear-right-0 bear-w-5 bear-h-5 bear-flex bear-items-center bear-justify-center bear-text-xs bear-font-medium bear-text-white bear-bg-pink-500 bear-rounded-full",children:i>99?"99+":i})]}),h&&typeof document<"u"&&q.createPortal(e.jsxs("div",{"data-bear-notification-center":!0,className:"Bear-NotificationCenter__dropdown bear-fixed bear-w-[360px] bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-overflow-hidden",style:{top:w.top,left:w.left,zIndex:m.NOTIFICATION_CENTER_Z_INDEX},children:[e.jsxs("div",{className:"Bear-NotificationCenter__header bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700",children:[e.jsxs("h3",{className:"Bear-NotificationCenter__title bear-text-sm bear-font-semibold bear-text-gray-900 dark:bear-text-white",children:[o.title,i>0&&e.jsxs("span",{className:"bear-ml-2 bear-text-xs bear-font-normal bear-text-gray-500 dark:bear-text-zinc-400",children:["(",i," ",o.new.toLowerCase(),")"]})]}),e.jsxs("div",{className:"bear-flex bear-gap-2",children:[b&&i>0&&e.jsx("button",{type:"button",onClick:b,className:"Bear-NotificationCenter__mark-all bear-text-xs bear-text-pink-400 hover:bear-text-pink-300 bear-transition-colors",children:o.markAllRead}),p&&r.length>0&&e.jsx("button",{type:"button",onClick:p,className:"Bear-NotificationCenter__clear-all bear-text-xs bear-text-gray-500 dark:bear-text-zinc-400 hover:bear-text-gray-700 dark:hover:bear-text-zinc-300 bear-transition-colors",children:o.clearAll})]})]}),e.jsx("div",{className:"Bear-NotificationCenter__list bear-max-h-[400px] bear-overflow-y-auto",children:z.length===0?e.jsx("div",{className:"Bear-NotificationCenter__empty bear-py-8 bear-text-center bear-text-sm bear-text-gray-500 dark:bear-text-zinc-500",children:o.noNotifications}):z.map(t=>e.jsx(W,{notification:t,onRead:g,onDismiss:v,onClick:d,translations:o},t.id))}),!f&&r.length>a&&e.jsx("div",{className:"Bear-NotificationCenter__footer bear-border-t bear-border-gray-200 dark:bear-border-zinc-700",children:e.jsxs("button",{type:"button",onClick:()=>P(!0),className:"bear-w-full bear-py-2 bear-text-sm bear-text-pink-500 dark:bear-text-pink-400 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700/50 bear-transition-colors",children:[o.showMore," (",r.length-a," more)"]})})]}),document.body)]})};exports.NotificationCenter=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),F=require("react-dom"),d=require("../../utils/cn.cjs"),u=require("./NotificationCenter.const.cjs"),D=require("./NotificationCenter.utils.cjs"),H=({notification:r,onRead:x,onDismiss:m,onClick:c,translations:k})=>{const g=()=>{r.read||x==null||x(r.id),c==null||c(r)};return e.jsxs("div",{onClick:g,className:d.cn("Bear-NotificationCenter__item bear-flex bear-gap-3 bear-p-3 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700 last:bear-border-b-0 bear-cursor-pointer bear-transition-colors hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700/50",!r.read&&"bear-bg-gray-50 dark:bear-bg-zinc-800/50"),children:[e.jsx("div",{className:"Bear-NotificationCenter__item-icon bear-shrink-0",children:r.avatar?e.jsx("img",{src:r.avatar,alt:"",className:"bear-w-10 bear-h-10 bear-rounded-full bear-object-cover"}):r.icon?e.jsx("div",{className:d.cn("bear-w-10 bear-h-10 bear-rounded-full bear-flex bear-items-center bear-justify-center",u.NOTIFICATION_TYPE_COLORS[r.type]),children:r.icon}):e.jsxs("div",{className:d.cn("bear-w-10 bear-h-10 bear-rounded-full bear-flex bear-items-center bear-justify-center",u.NOTIFICATION_TYPE_COLORS[r.type]),children:[r.type==="success"&&e.jsx("svg",{className:"bear-w-5 bear-h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M5 13l4 4L19 7"})}),r.type==="error"&&e.jsx("svg",{className:"bear-w-5 bear-h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"})}),r.type==="warning"&&e.jsx("svg",{className:"bear-w-5 bear-h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"})}),r.type==="info"&&e.jsx("svg",{className:"bear-w-5 bear-h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"})})]})}),e.jsxs("div",{className:"Bear-NotificationCenter__item-content bear-flex-1 bear-min-w-0",children:[e.jsxs("div",{className:"bear-flex bear-items-start bear-justify-between bear-gap-2",children:[e.jsx("p",{className:d.cn("Bear-NotificationCenter__item-title bear-text-sm bear-font-medium bear-truncate",r.read?"bear-text-gray-600 dark:bear-text-zinc-300":"bear-text-gray-900 dark:bear-text-white"),children:r.title}),!r.read&&e.jsx("span",{className:"Bear-NotificationCenter__item-badge bear-w-2 bear-h-2 bear-rounded-full bear-bg-pink-500 bear-shrink-0 bear-mt-1.5"})]}),r.description&&e.jsx("p",{className:"Bear-NotificationCenter__item-description bear-text-xs bear-text-gray-500 dark:bear-text-zinc-400 bear-mt-0.5 bear-line-clamp-2",children:r.description}),e.jsx("p",{className:"Bear-NotificationCenter__item-time bear-text-xs bear-text-gray-400 dark:bear-text-zinc-500 bear-mt-1",children:D.formatRelativeTime(r.timestamp,k)}),r.actions&&r.actions.length>0&&e.jsx("div",{className:"Bear-NotificationCenter__item-actions bear-flex bear-gap-2 bear-mt-2",children:r.actions.map((a,C)=>e.jsx("button",{type:"button",onClick:p=>{p.stopPropagation(),a.onClick()},className:d.cn("bear-px-2 bear-py-1 bear-text-xs bear-rounded bear-transition-colors",a.variant==="primary"&&"bear-bg-pink-500 bear-text-white hover:bear-bg-pink-600",a.variant==="secondary"&&"bear-bg-gray-200 dark:bear-bg-zinc-600 bear-text-gray-900 dark:bear-text-white hover:bear-bg-gray-300 dark:hover:bear-bg-zinc-500",a.variant==="danger"&&"bear-bg-red-500 bear-text-white hover:bear-bg-red-600",!a.variant&&"bear-bg-gray-100 dark:bear-bg-zinc-700 bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-200 dark:hover:bear-bg-zinc-600"),children:a.label},C))})]}),m&&e.jsx("button",{type:"button",onClick:a=>{a.stopPropagation(),m(r.id)},className:"Bear-NotificationCenter__item-dismiss bear-p-1 bear-rounded bear-text-gray-500 dark:bear-text-zinc-500 hover:bear-text-gray-700 dark:hover:bear-text-zinc-300 hover:bear-bg-gray-200 dark:hover:bear-bg-zinc-700 bear-transition-colors bear-shrink-0",children:e.jsx("svg",{className:"bear-w-4 bear-h-4",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"})})})]})},X=({notifications:r,onNotificationClick:x,onMarkAsRead:m,onMarkAllAsRead:c,onDismiss:k,onClearAll:g,maxVisible:a=u.NOTIFICATION_CENTER_MAX_VISIBLE,groupByCategory:C=!1,position:p="top-right",trigger:_,open:T,onOpenChange:E,className:M,testId:A,translations:z,icon:R})=>{const[S,P]=t.useState(!1),[B,W]=t.useState({top:0,left:0}),[f,q]=t.useState(!1),L=t.useRef(null),y=t.useRef(null),h=T??S,v=E??P,o=t.useMemo(()=>({...u.NOTIFICATION_CENTER_DEFAULT_TRANSLATIONS,...z}),[z]),l=t.useMemo(()=>r.filter(n=>!n.read).length,[r]),I=t.useMemo(()=>f?r:r.slice(0,a),[r,a,f]);t.useEffect(()=>{if(!h||!y.current)return;const n=360,N=400,b=8,s=()=>{const i=y.current.getBoundingClientRect();let j=p.includes("left")?i.left:i.right-n;j=Math.max(8,Math.min(j,window.innerWidth-n-8));let w=i.bottom+b;w+N>window.innerHeight-8&&(w=Math.max(8,i.top-N-b)),W({top:w,left:j})};return s(),window.addEventListener("resize",s),window.addEventListener("scroll",s,!0),()=>{window.removeEventListener("resize",s),window.removeEventListener("scroll",s,!0)}},[h,p]),t.useEffect(()=>{const n=N=>{var s,i;const b=N.target;(s=L.current)!=null&&s.contains(b)||(i=b.closest)!=null&&i.call(b,"[data-bear-notification-center]")||v(!1)};return document.addEventListener("mousedown",n),()=>document.removeEventListener("mousedown",n)},[v]);const O=t.useCallback(()=>{v(!h)},[h,v]);return e.jsxs("div",{ref:L,className:d.cn("Bear-NotificationCenter bear-relative bear-inline-block",M),"data-testid":A,children:[_?e.jsx("div",{onClick:O,children:_}):e.jsxs("button",{ref:y,type:"button",onClick:O,className:"Bear-NotificationCenter__trigger bear-relative bear-p-2 bear-rounded-lg bear-text-gray-500 dark:bear-text-zinc-400 hover:bear-text-gray-900 dark:hover:bear-text-white hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-800 bear-transition-colors",children:[R??e.jsx("svg",{className:"bear-w-6 bear-h-6",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"})}),l>0&&e.jsx("span",{className:"Bear-NotificationCenter__badge bear-absolute bear-top-0 bear-right-0 bear-w-5 bear-h-5 bear-flex bear-items-center bear-justify-center bear-text-xs bear-font-medium bear-text-white bear-bg-pink-500 bear-rounded-full",children:l>99?"99+":l})]}),h&&typeof document<"u"&&F.createPortal(e.jsxs("div",{"data-bear-notification-center":!0,className:"Bear-NotificationCenter__dropdown bear-fixed bear-w-[360px] bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-overflow-hidden",style:{top:B.top,left:B.left,zIndex:u.NOTIFICATION_CENTER_Z_INDEX},children:[e.jsxs("div",{className:"Bear-NotificationCenter__header bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700",children:[e.jsxs("h3",{className:"Bear-NotificationCenter__title bear-text-sm bear-font-semibold bear-text-gray-900 dark:bear-text-white",children:[o.title,l>0&&e.jsxs("span",{className:"bear-ml-2 bear-text-xs bear-font-normal bear-text-gray-500 dark:bear-text-zinc-400",children:["(",l," ",o.new.toLowerCase(),")"]})]}),e.jsxs("div",{className:"bear-flex bear-gap-2",children:[c&&l>0&&e.jsx("button",{type:"button",onClick:c,className:"Bear-NotificationCenter__mark-all bear-text-xs bear-text-pink-400 hover:bear-text-pink-300 bear-transition-colors",children:o.markAllRead}),g&&r.length>0&&e.jsx("button",{type:"button",onClick:g,className:"Bear-NotificationCenter__clear-all bear-text-xs bear-text-gray-500 dark:bear-text-zinc-400 hover:bear-text-gray-700 dark:hover:bear-text-zinc-300 bear-transition-colors",children:o.clearAll})]})]}),e.jsx("div",{className:"Bear-NotificationCenter__list bear-max-h-[400px] bear-overflow-y-auto",children:I.length===0?e.jsx("div",{className:"Bear-NotificationCenter__empty bear-py-8 bear-text-center bear-text-sm bear-text-gray-500 dark:bear-text-zinc-500",children:o.noNotifications}):I.map(n=>e.jsx(H,{notification:n,onRead:m,onDismiss:k,onClick:x,translations:o},n.id))}),!f&&r.length>a&&e.jsx("div",{className:"Bear-NotificationCenter__footer bear-border-t bear-border-gray-200 dark:bear-border-zinc-700",children:e.jsxs("button",{type:"button",onClick:()=>q(!0),className:"bear-w-full bear-py-2 bear-text-sm bear-text-pink-500 dark:bear-text-pink-400 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700/50 bear-transition-colors",children:[o.showMore," (",r.length-a," more)"]})})]}),document.body)]})};exports.NotificationCenter=X;

package/dist/components/NotificationCenter/NotificationCenter.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={title:"Notifications",noNotifications:"No notifications",markAllRead:"Mark all as read",clearAll:"Clear all",showMore:"Show more",justNow:"Just now",minutesAgo:"{count}m ago",hoursAgo:"{count}h ago",daysAgo:"{count}d ago",new:"New"},T=5,o=9999,I={info:"bear-text-blue-400 bear-bg-blue-500/20",success:"bear-text-green-400 bear-bg-green-500/20",warning:"bear-text-amber-400 bear-bg-amber-500/20",error:"bear-text-red-400 bear-bg-red-500/20"},N={MINUTE:60*1e3,HOUR:3600*1e3,DAY:1440*60*1e3};exports.NOTIFICATION_CENTER_DEFAULT_TRANSLATIONS=e;exports.NOTIFICATION_CENTER_MAX_VISIBLE=T;exports.NOTIFICATION_CENTER_Z_INDEX=o;exports.NOTIFICATION_TYPE_COLORS=I;exports.TIME_THRESHOLDS=N;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={title:"Notifications",noNotifications:"No notifications",markAllRead:"Mark all as read",clearAll:"Clear all",showMore:"Show more",justNow:"Just now",minutesAgo:"{count}m ago",hoursAgo:"{count}h ago",daysAgo:"{count}d ago",new:"New"},T=5,o=1e4,I={info:"bear-text-blue-400 bear-bg-blue-500/20",success:"bear-text-green-400 bear-bg-green-500/20",warning:"bear-text-amber-400 bear-bg-amber-500/20",error:"bear-text-red-400 bear-bg-red-500/20"},N={MINUTE:60*1e3,HOUR:3600*1e3,DAY:1440*60*1e3};exports.NOTIFICATION_CENTER_DEFAULT_TRANSLATIONS=e;exports.NOTIFICATION_CENTER_MAX_VISIBLE=T;exports.NOTIFICATION_CENTER_Z_INDEX=o;exports.NOTIFICATION_TYPE_COLORS=I;exports.TIME_THRESHOLDS=N;

package/dist/components/NotificationCenter/NotificationCenter.const.d.ts

@@ -10,7 +10,7 @@ export declare const NOTIFICATION_CENTER_MAX_VISIBLE = 5;
 /**
  * Dropdown z-index
  */
-export declare const NOTIFICATION_CENTER_Z_INDEX = 9999;
+export declare const NOTIFICATION_CENTER_Z_INDEX = 10000;
 /**
  * Type icon colors
  */

package/dist/components/NotificationCenter/NotificationCenter.const.js

@@ -9,7 +9,7 @@ const e = {
   hoursAgo: "{count}h ago",
   daysAgo: "{count}d ago",
   new: "New"
-}, o = 5, t = 9999, a = {
+}, o = 5, t = 1e4, a = {
   info: "bear-text-blue-400 bear-bg-blue-500/20",
   success: "bear-text-green-400 bear-bg-green-500/20",
   warning: "bear-text-amber-400 bear-bg-amber-500/20",