@forgedevstack/bear 1.0.5 → 1.0.7

package/dist/components/Kanban/Kanban.js

@@ -0,0 +1,90 @@
+import { jsx as i, jsxs as D, Fragment as B } from "react/jsx-runtime";
+import { useCallback as I } from "react";
+import { cn as f } from "../../utils/cn.js";
+import "../../context/BearProvider.js";
+import { useDragDrop as P } from "../../hooks/useDragDrop/useDragDrop.js";
+const S = "bear-kanban", O = ({
+  columns: d,
+  onColumnsChange: o,
+  onCardMove: l,
+  renderCard: h,
+  renderColumnHeader: k,
+  disabled: y = !1,
+  className: _
+}) => {
+  const z = I(
+    (r, e, t, b, n) => {
+      const x = d.find((a) => a.id === r), s = d.find((a) => a.id === e);
+      if (!x || !s) return;
+      const m = d.map((a) => {
+        if (a.id === r) {
+          const c = a.cards.filter((g, p) => p !== t);
+          return { ...a, cards: c };
+        }
+        if (a.id === e) {
+          const c = r === e && t < b ? b - 1 : b, g = [...a.cards];
+          return g.splice(Math.max(0, c), 0, n), { ...a, cards: g };
+        }
+        return a;
+      });
+      o == null || o(m), l == null || l(n.id, r, e, t, b);
+    },
+    [d, o, l]
+  ), { getDragProps: u, getDropProps: w, isDragging: K, draggedId: $, dragOverId: N } = P({
+    disabled: y,
+    dragType: S,
+    onDrop: (r, e, t, b, n) => {
+      var v;
+      const x = String(r), s = String(e), m = x.split("-")[0], a = parseInt(x.split("-")[1], 10) || 0, c = s.endsWith("-col") ? s.replace("-col", "") : s.split("-")[0], g = s.endsWith("-col") ? ((v = d.find((j) => j.id === c)) == null ? void 0 : v.cards.length) ?? 0 : parseInt(s.split("-")[1], 10), p = n;
+      p != null && p.id && z(m, c, a, g, p);
+    }
+  });
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: f(
+        "Bear-Kanban bear-flex bear-gap-4 bear-overflow-x-auto bear-pb-4",
+        y && "bear-opacity-50 bear-pointer-events-none",
+        _
+      ),
+      children: d.map((r) => /* @__PURE__ */ D(
+        "div",
+        {
+          ...w(`${r.id}-col`, r, 0),
+          className: f(
+            "Bear-Kanban__column bear-flex-shrink-0 bear-w-72 bear-flex bear-flex-col bear-rounded-lg bear-bg-gray-100 dark:bear-bg-zinc-800/80 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-transition-colors",
+            N === `${r.id}-col` && "bear-border-bear-500 bear-bg-bear-500/5"
+          ),
+          children: [
+            /* @__PURE__ */ i("div", { className: "bear-px-4 bear-py-3 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700", children: k ? k(r) : /* @__PURE__ */ i("h3", { className: "bear-text-sm bear-font-semibold bear-text-gray-900 dark:bear-text-white", children: r.title }) }),
+            /* @__PURE__ */ i("div", { className: "bear-flex-1 bear-flex bear-flex-col bear-gap-2 bear-p-3 bear-min-h-[120px]", children: r.cards.map((e, t) => {
+              const b = `${r.id}-${t}`, n = K && $ === b;
+              return /* @__PURE__ */ i(
+                "div",
+                {
+                  ...w(b, e, t),
+                  ...u(b, e, t),
+                  className: f(
+                    "Bear-Kanban__card bear-rounded-lg bear-bg-white dark:bear-bg-zinc-700/80 bear-border bear-border-gray-200 dark:bear-border-zinc-600 bear-p-3 bear-cursor-grab active:bear-cursor-grabbing bear-transition-all bear-shadow-sm",
+                    n && "bear-opacity-50 bear-scale-95",
+                    N === b && "bear-border-bear-500 bear-bg-bear-500/10"
+                  ),
+                  children: h ? h(e, r.id) : /* @__PURE__ */ D(B, { children: [
+                    /* @__PURE__ */ i("div", { className: "bear-font-medium bear-text-gray-900 dark:bear-text-white", children: e.title }),
+                    e.description && /* @__PURE__ */ i("div", { className: "bear-text-sm bear-text-gray-600 dark:bear-text-zinc-400 bear-mt-1", children: e.description }),
+                    e.meta && /* @__PURE__ */ i("div", { className: "bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500 bear-mt-2", children: e.meta })
+                  ] })
+                },
+                e.id
+              );
+            }) })
+          ]
+        },
+        r.id
+      ))
+    }
+  );
+};
+export {
+  O as Kanban
+};

package/dist/components/Kanban/Kanban.types.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+export interface KanbanCard {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    meta?: ReactNode;
+}
+export interface KanbanColumn {
+    id: string;
+    title: ReactNode;
+    cards: KanbanCard[];
+}
+export interface KanbanProps {
+    columns: KanbanColumn[];
+    onColumnsChange?: (columns: KanbanColumn[]) => void;
+    onCardMove?: (cardId: string, fromColumnId: string, toColumnId: string, fromIndex: number, toIndex: number) => void;
+    renderCard?: (card: KanbanCard, columnId: string) => ReactNode;
+    renderColumnHeader?: (column: KanbanColumn) => ReactNode;
+    disabled?: boolean;
+    className?: string;
+}

package/dist/components/Kanban/index.d.ts

@@ -0,0 +1,2 @@
+export { Kanban } from './Kanban';
+export type { KanbanProps, KanbanColumn, KanbanCard } from './Kanban.types';

package/dist/components/MentionsInput/MentionsInput.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("react"),v=require("../../utils/cn.cjs"),P={sm:"bear-h-8 bear-text-sm bear-px-3",md:"bear-h-10 bear-text-base bear-px-4",lg:"bear-h-12 bear-text-lg bear-px-5"},U=(u,g)=>{const a=g.toLowerCase();return u.filter(l=>l.value.toLowerCase().includes(a)||String(l.label).toLowerCase().includes(a))},V=({value:u,defaultValue:g="",onChange:a,onMentionSelect:l,options:S,trigger:c="@",placeholder:D="Type @ to mention...",disabled:k=!1,maxSuggestions:L=5,filterOptions:M=U,size:N="md",fullWidth:T=!1,className:$})=>{const[A,q]=t.useState(g),[d,K]=t.useState(""),[Q,x]=t.useState(!1),[b,h]=t.useState(0),[p,B]=t.useState(null),y=t.useRef(null),z=t.useRef(null),w=t.useRef(null),n=u??A,i=M(S,d).slice(0,L),E=Q&&d.length>=0,I=t.useCallback(()=>{const e=n.lastIndexOf(c);if(e===-1)return{query:"",start:null};const r=n.slice(e+c.length),s=r.indexOf(" ");return{query:s===-1?r:r.slice(0,s),start:e}},[n,c]);t.useEffect(()=>{const{query:e,start:r}=I();K(e),B(r),x(r!==null&&!e.includes(" "))},[n,I]),t.useEffect(()=>{h(0)},[d]),t.useEffect(()=>{if(b>=0&&w.current){const e=w.current.children[b];e==null||e.scrollIntoView({block:"nearest"})}},[b]),t.useEffect(()=>{const e=r=>{y.current&&!y.current.contains(r.target)&&x(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const R=e=>{const r=new RegExp(`${c}(\\w+)`,"g"),s=[];let f;for(;(f=r.exec(e))!==null;)s.push(f[1]);return[...new Set(s)]},F=e=>{const r=e.target.value;u===void 0&&q(r),a==null||a(r,R(r))},j=e=>{var O;if(p==null)return;const r=n.slice(0,p),s=n.slice(p+c.length+d.length),f=`${c}${e.value}`,m=r+f+" "+s;u===void 0&&q(m),a==null||a(m,R(m)),l==null||l(e),x(!1),(O=z.current)==null||O.focus()},H=e=>{if(!(!E||i.length===0)){if(e.key==="ArrowDown"){e.preventDefault(),h(r=>Math.min(r+1,i.length-1));return}if(e.key==="ArrowUp"){e.preventDefault(),h(r=>Math.max(r-1,0));return}if(e.key==="Enter"||e.key==="Tab"){e.preventDefault();const r=i[b];r&&j(r);return}e.key==="Escape"&&x(!1)}};return o.jsxs("div",{ref:y,className:v.cn("Bear-MentionsInput bear-relative",T&&"bear-w-full",$),children:[o.jsx("input",{ref:z,type:"text",value:n,onChange:F,onKeyDown:H,placeholder:D,disabled:k,className:v.cn("bear-w-full bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-900 bear-text-gray-900 dark:bear-text-white placeholder:bear-text-gray-500 dark:placeholder:bear-text-zinc-500 bear-outline-none bear-transition-colors focus:bear-border-bear-500 focus:bear-ring-2 focus:bear-ring-bear-500/20",k&&"bear-opacity-50 bear-cursor-not-allowed",P[N])}),E&&i.length>0&&o.jsx("div",{ref:w,className:"bear-absolute bear-z-50 bear-mt-1 bear-w-full bear-max-h-48 bear-overflow-auto bear-rounded-lg bear-border bear-border-gray-200 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-800 bear-py-1 bear-shadow-lg",children:i.map((e,r)=>o.jsxs("button",{type:"button",className:v.cn("bear-w-full bear-flex bear-items-center bear-gap-2 bear-px-3 bear-py-2 bear-text-left bear-text-gray-800 dark:bear-text-zinc-200 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700 bear-transition-colors",r===b&&"bear-bg-gray-100 dark:bear-bg-zinc-700"),onMouseEnter:()=>h(r),onClick:()=>j(e),children:[e.avatar&&o.jsx("span",{className:"bear-shrink-0",children:e.avatar}),o.jsx("span",{children:e.label})]},e.value))})]})};exports.MentionsInput=V;

package/dist/components/MentionsInput/MentionsInput.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { MentionsInputProps } from './MentionsInput.types';
+export declare const MentionsInput: FC<MentionsInputProps>;

package/dist/components/MentionsInput/MentionsInput.js

@@ -0,0 +1,140 @@
+import { jsxs as M, jsx as x } from "react/jsx-runtime";
+import { useState as u, useRef as k, useCallback as G, useEffect as p } from "react";
+import { cn as z } from "../../utils/cn.js";
+const J = {
+  sm: "bear-h-8 bear-text-sm bear-px-3",
+  md: "bear-h-10 bear-text-base bear-px-4",
+  lg: "bear-h-12 bear-text-lg bear-px-5"
+}, P = (o, m) => {
+  const t = m.toLowerCase();
+  return o.filter(
+    (s) => s.value.toLowerCase().includes(t) || String(s.label).toLowerCase().includes(t)
+  );
+}, Z = ({
+  value: o,
+  defaultValue: m = "",
+  onChange: t,
+  onMentionSelect: s,
+  options: T,
+  trigger: l = "@",
+  placeholder: $ = "Type @ to mention...",
+  disabled: I = !1,
+  maxSuggestions: j = 5,
+  filterOptions: A = P,
+  size: K = "md",
+  fullWidth: Q = !1,
+  className: B
+}) => {
+  const [F, q] = u(m), [d, H] = u(""), [S, f] = u(!1), [c, h] = u(0), [g, U] = u(null), w = k(null), E = k(null), y = k(null), a = o ?? F, b = A(T, d).slice(0, j), D = S && d.length >= 0, L = G(() => {
+    const e = a.lastIndexOf(l);
+    if (e === -1) return { query: "", start: null };
+    const r = a.slice(e + l.length), n = r.indexOf(" ");
+    return { query: n === -1 ? r : r.slice(0, n), start: e };
+  }, [a, l]);
+  p(() => {
+    const { query: e, start: r } = L();
+    H(e), U(r), f(r !== null && !e.includes(" "));
+  }, [a, L]), p(() => {
+    h(0);
+  }, [d]), p(() => {
+    if (c >= 0 && y.current) {
+      const e = y.current.children[c];
+      e == null || e.scrollIntoView({ block: "nearest" });
+    }
+  }, [c]), p(() => {
+    const e = (r) => {
+      w.current && !w.current.contains(r.target) && f(!1);
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, []);
+  const O = (e) => {
+    const r = new RegExp(`${l}(\\w+)`, "g"), n = [];
+    let i;
+    for (; (i = r.exec(e)) !== null; )
+      n.push(i[1]);
+    return [...new Set(n)];
+  }, V = (e) => {
+    const r = e.target.value;
+    o === void 0 && q(r), t == null || t(r, O(r));
+  }, N = (e) => {
+    var R;
+    if (g == null) return;
+    const r = a.slice(0, g), n = a.slice(g + l.length + d.length), i = `${l}${e.value}`, v = r + i + " " + n;
+    o === void 0 && q(v), t == null || t(v, O(v)), s == null || s(e), f(!1), (R = E.current) == null || R.focus();
+  }, C = (e) => {
+    if (!(!D || b.length === 0)) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault(), h((r) => Math.min(r + 1, b.length - 1));
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault(), h((r) => Math.max(r - 1, 0));
+        return;
+      }
+      if (e.key === "Enter" || e.key === "Tab") {
+        e.preventDefault();
+        const r = b[c];
+        r && N(r);
+        return;
+      }
+      e.key === "Escape" && f(!1);
+    }
+  };
+  return /* @__PURE__ */ M(
+    "div",
+    {
+      ref: w,
+      className: z(
+        "Bear-MentionsInput bear-relative",
+        Q && "bear-w-full",
+        B
+      ),
+      children: [
+        /* @__PURE__ */ x(
+          "input",
+          {
+            ref: E,
+            type: "text",
+            value: a,
+            onChange: V,
+            onKeyDown: C,
+            placeholder: $,
+            disabled: I,
+            className: z(
+              "bear-w-full bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-900 bear-text-gray-900 dark:bear-text-white placeholder:bear-text-gray-500 dark:placeholder:bear-text-zinc-500 bear-outline-none bear-transition-colors focus:bear-border-bear-500 focus:bear-ring-2 focus:bear-ring-bear-500/20",
+              I && "bear-opacity-50 bear-cursor-not-allowed",
+              J[K]
+            )
+          }
+        ),
+        D && b.length > 0 && /* @__PURE__ */ x(
+          "div",
+          {
+            ref: y,
+            className: "bear-absolute bear-z-50 bear-mt-1 bear-w-full bear-max-h-48 bear-overflow-auto bear-rounded-lg bear-border bear-border-gray-200 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-800 bear-py-1 bear-shadow-lg",
+            children: b.map((e, r) => /* @__PURE__ */ M(
+              "button",
+              {
+                type: "button",
+                className: z(
+                  "bear-w-full bear-flex bear-items-center bear-gap-2 bear-px-3 bear-py-2 bear-text-left bear-text-gray-800 dark:bear-text-zinc-200 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700 bear-transition-colors",
+                  r === c && "bear-bg-gray-100 dark:bear-bg-zinc-700"
+                ),
+                onMouseEnter: () => h(r),
+                onClick: () => N(e),
+                children: [
+                  e.avatar && /* @__PURE__ */ x("span", { className: "bear-shrink-0", children: e.avatar }),
+                  /* @__PURE__ */ x("span", { children: e.label })
+                ]
+              },
+              e.value
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Z as MentionsInput
+};

package/dist/components/MentionsInput/MentionsInput.types.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+export interface MentionOption {
+    value: string;
+    label: ReactNode;
+    avatar?: ReactNode;
+}
+export interface MentionsInputProps {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string, mentions: string[]) => void;
+    onMentionSelect?: (option: MentionOption) => void;
+    options: MentionOption[];
+    trigger?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    maxSuggestions?: number;
+    filterOptions?: (options: MentionOption[], query: string) => MentionOption[];
+    size?: 'sm' | 'md' | 'lg';
+    fullWidth?: boolean;
+    className?: string;
+}

package/dist/components/MentionsInput/index.d.ts

@@ -0,0 +1,2 @@
+export { MentionsInput } from './MentionsInput';
+export type { MentionsInputProps, MentionOption } from './MentionsInput.types';

package/dist/components/NotificationCenter/NotificationCenter.cjs

@@ -0,0 +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;

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

@@ -0,0 +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;

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

@@ -0,0 +1,25 @@
+import { NotificationCenterTranslations, NotificationType } from './NotificationCenter.types';
+/**
+ * Default translations
+ */
+export declare const NOTIFICATION_CENTER_DEFAULT_TRANSLATIONS: NotificationCenterTranslations;
+/**
+ * Maximum visible notifications default
+ */
+export declare const NOTIFICATION_CENTER_MAX_VISIBLE = 5;
+/**
+ * Dropdown z-index
+ */
+export declare const NOTIFICATION_CENTER_Z_INDEX = 9999;
+/**
+ * Type icon colors
+ */
+export declare const NOTIFICATION_TYPE_COLORS: Record<NotificationType, string>;
+/**
+ * Time thresholds for relative time formatting (in ms)
+ */
+export declare const TIME_THRESHOLDS: {
+    readonly MINUTE: number;
+    readonly HOUR: number;
+    readonly DAY: number;
+};

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

@@ -0,0 +1,28 @@
+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"
+}, o = 5, t = 9999, 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",
+  error: "bear-text-red-400 bear-bg-red-500/20"
+}, r = {
+  MINUTE: 60 * 1e3,
+  HOUR: 3600 * 1e3,
+  DAY: 1440 * 60 * 1e3
+};
+export {
+  e as NOTIFICATION_CENTER_DEFAULT_TRANSLATIONS,
+  o as NOTIFICATION_CENTER_MAX_VISIBLE,
+  t as NOTIFICATION_CENTER_Z_INDEX,
+  a as NOTIFICATION_TYPE_COLORS,
+  r as TIME_THRESHOLDS
+};

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

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { NotificationCenterProps } from './NotificationCenter.types';
+/**
+ * NotificationCenter - Notification management component
+ *
+ * @example
+ * ```tsx
+ * <NotificationCenter
+ *   notifications={notifications}
+ *   onMarkAsRead={handleMarkAsRead}
+ *   onDismiss={handleDismiss}
+ * />
+ * ```
+ */
+export declare const NotificationCenter: FC<NotificationCenterProps>;

package/dist/components/NotificationCenter/NotificationCenter.js

@@ -0,0 +1,223 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { useState as y, useRef as O, useMemo as C, useEffect as E, useCallback as Y } from "react";
+import { createPortal as H } from "react-dom";
+import { cn as c } from "../../utils/cn.js";
+import { NOTIFICATION_CENTER_DEFAULT_TRANSLATIONS as U, NOTIFICATION_CENTER_MAX_VISIBLE as Z, NOTIFICATION_CENTER_Z_INDEX as q, NOTIFICATION_TYPE_COLORS as j } from "./NotificationCenter.const.js";
+import { formatRelativeTime as G } from "./NotificationCenter.utils.js";
+const J = ({
+  notification: e,
+  onRead: d,
+  onDismiss: p,
+  onClick: i,
+  translations: k
+}) => /* @__PURE__ */ n(
+  "div",
+  {
+    onClick: () => {
+      e.read || d == null || d(e.id), i == null || i(e);
+    },
+    className: c(
+      "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",
+      !e.read && "bear-bg-gray-50 dark:bear-bg-zinc-800/50"
+    ),
+    children: [
+      /* @__PURE__ */ r("div", { className: "Bear-NotificationCenter__item-icon bear-shrink-0", children: e.avatar ? /* @__PURE__ */ r(
+        "img",
+        {
+          src: e.avatar,
+          alt: "",
+          className: "bear-w-10 bear-h-10 bear-rounded-full bear-object-cover"
+        }
+      ) : e.icon ? /* @__PURE__ */ r("div", { className: c(
+        "bear-w-10 bear-h-10 bear-rounded-full bear-flex bear-items-center bear-justify-center",
+        j[e.type]
+      ), children: e.icon }) : /* @__PURE__ */ n("div", { className: c(
+        "bear-w-10 bear-h-10 bear-rounded-full bear-flex bear-items-center bear-justify-center",
+        j[e.type]
+      ), children: [
+        e.type === "success" && /* @__PURE__ */ r("svg", { className: "bear-w-5 bear-h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ r("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+        e.type === "error" && /* @__PURE__ */ r("svg", { className: "bear-w-5 bear-h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ r("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }),
+        e.type === "warning" && /* @__PURE__ */ r("svg", { className: "bear-w-5 bear-h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ r("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" }) }),
+        e.type === "info" && /* @__PURE__ */ r("svg", { className: "bear-w-5 bear-h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ r("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" }) })
+      ] }) }),
+      /* @__PURE__ */ n("div", { className: "Bear-NotificationCenter__item-content bear-flex-1 bear-min-w-0", children: [
+        /* @__PURE__ */ n("div", { className: "bear-flex bear-items-start bear-justify-between bear-gap-2", children: [
+          /* @__PURE__ */ r("p", { className: c(
+            "Bear-NotificationCenter__item-title bear-text-sm bear-font-medium bear-truncate",
+            e.read ? "bear-text-gray-600 dark:bear-text-zinc-300" : "bear-text-gray-900 dark:bear-text-white"
+          ), children: e.title }),
+          !e.read && /* @__PURE__ */ r("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" })
+        ] }),
+        e.description && /* @__PURE__ */ r("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: e.description }),
+        /* @__PURE__ */ r("p", { className: "Bear-NotificationCenter__item-time bear-text-xs bear-text-gray-400 dark:bear-text-zinc-500 bear-mt-1", children: G(e.timestamp, k) }),
+        e.actions && e.actions.length > 0 && /* @__PURE__ */ r("div", { className: "Bear-NotificationCenter__item-actions bear-flex bear-gap-2 bear-mt-2", children: e.actions.map((a, _) => /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            onClick: (h) => {
+              h.stopPropagation(), a.onClick();
+            },
+            className: c(
+              "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
+          },
+          _
+        )) })
+      ] }),
+      p && /* @__PURE__ */ r(
+        "button",
+        {
+          type: "button",
+          onClick: (a) => {
+            a.stopPropagation(), p(e.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: /* @__PURE__ */ r("svg", { className: "bear-w-4 bear-h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ r("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+        }
+      )
+    ]
+  }
+), ae = ({
+  notifications: e,
+  onNotificationClick: d,
+  onMarkAsRead: p,
+  onMarkAllAsRead: i,
+  onDismiss: k,
+  onClearAll: N,
+  maxVisible: a = Z,
+  groupByCategory: _ = !1,
+  position: h = "top-right",
+  trigger: w,
+  open: M,
+  onOpenChange: A,
+  className: R,
+  testId: P,
+  translations: B,
+  icon: S
+}) => {
+  const [W, F] = y(!1), [z, X] = y({ top: 0, left: 0 }), [v, D] = y(!1), L = O(null), f = O(null), m = M ?? W, g = A ?? F, b = C(() => ({
+    ...U,
+    ...B
+  }), [B]), l = C(
+    () => e.filter((t) => !t.read).length,
+    [e]
+  ), I = C(() => v ? e : e.slice(0, a), [e, a, v]);
+  E(() => {
+    if (m && f.current) {
+      const t = f.current.getBoundingClientRect(), x = window.scrollY || document.documentElement.scrollTop, o = window.scrollX || document.documentElement.scrollLeft;
+      let u = t.bottom + x + 8, s = t.left + o;
+      h.includes("left") ? s = t.left + o : s = t.right + o - 360, h.includes("bottom") && (u = t.top + x - 8), X({ top: u, left: Math.max(8, s) });
+    }
+  }, [m, h]), E(() => {
+    const t = (x) => {
+      var u, s;
+      const o = x.target;
+      (u = L.current) != null && u.contains(o) || (s = o.closest) != null && s.call(o, "[data-bear-notification-center]") || g(!1);
+    };
+    return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
+  }, [g]);
+  const T = Y(() => {
+    g(!m);
+  }, [m, g]);
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ref: L,
+      className: c("Bear-NotificationCenter bear-relative bear-inline-block", R),
+      "data-testid": P,
+      children: [
+        w ? /* @__PURE__ */ r("div", { onClick: T, children: w }) : /* @__PURE__ */ n(
+          "button",
+          {
+            ref: f,
+            type: "button",
+            onClick: T,
+            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: [
+              S ?? /* @__PURE__ */ r("svg", { className: "bear-w-6 bear-h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ r("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 && /* @__PURE__ */ r("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 })
+            ]
+          }
+        ),
+        m && typeof document < "u" && H(
+          /* @__PURE__ */ n(
+            "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: z.top, left: z.left, zIndex: q },
+              children: [
+                /* @__PURE__ */ n("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: [
+                  /* @__PURE__ */ n("h3", { className: "Bear-NotificationCenter__title bear-text-sm bear-font-semibold bear-text-gray-900 dark:bear-text-white", children: [
+                    b.title,
+                    l > 0 && /* @__PURE__ */ n("span", { className: "bear-ml-2 bear-text-xs bear-font-normal bear-text-gray-500 dark:bear-text-zinc-400", children: [
+                      "(",
+                      l,
+                      " ",
+                      b.new.toLowerCase(),
+                      ")"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ n("div", { className: "bear-flex bear-gap-2", children: [
+                    i && l > 0 && /* @__PURE__ */ r(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: i,
+                        className: "Bear-NotificationCenter__mark-all bear-text-xs bear-text-pink-400 hover:bear-text-pink-300 bear-transition-colors",
+                        children: b.markAllRead
+                      }
+                    ),
+                    N && e.length > 0 && /* @__PURE__ */ r(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: N,
+                        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: b.clearAll
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ r("div", { className: "Bear-NotificationCenter__list bear-max-h-[400px] bear-overflow-y-auto", children: I.length === 0 ? /* @__PURE__ */ r("div", { className: "Bear-NotificationCenter__empty bear-py-8 bear-text-center bear-text-sm bear-text-gray-500 dark:bear-text-zinc-500", children: b.noNotifications }) : I.map((t) => /* @__PURE__ */ r(
+                  J,
+                  {
+                    notification: t,
+                    onRead: p,
+                    onDismiss: k,
+                    onClick: d,
+                    translations: b
+                  },
+                  t.id
+                )) }),
+                !v && e.length > a && /* @__PURE__ */ r("div", { className: "Bear-NotificationCenter__footer bear-border-t bear-border-gray-200 dark:bear-border-zinc-700", children: /* @__PURE__ */ n(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => D(!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: [
+                      b.showMore,
+                      " (",
+                      e.length - a,
+                      " more)"
+                    ]
+                  }
+                ) })
+              ]
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+};
+export {
+  ae as NotificationCenter
+};