@forgedevstack/bear 1.2.4 → 1.2.5

package/dist/components/MentionsInput/MentionsInput.js

@@ -1,149 +1,171 @@
-import { jsxs as T, jsx as l } from "react/jsx-runtime";
-import { useState as c, useRef as p, useCallback as J, useEffect as d } from "react";
-import { cn as z } from "../../utils/cn.js";
-import { Portal as X } from "../Portal/Portal.js";
-import { defaultFilter as Y } from "./MentionsInput.utils.js";
-const C = 1e4, ee = {
+import { jsxs as K, jsx as s } from "react/jsx-runtime";
+import { useState as b, useRef as w, useCallback as X, useEffect as d } from "react";
+import { cn as g } from "../../utils/cn.js";
+import { Portal as Y } from "../Portal/Portal.js";
+import { defaultFilter as ee } from "./MentionsInput.utils.js";
+const re = 1e4, te = 3, ae = {
   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"
-}, oe = ({
-  value: w,
-  defaultValue: A = "",
-  onChange: s,
-  onMentionSelect: x,
+}, ne = {
+  sm: "bear-text-sm bear-px-3 bear-py-2",
+  md: "bear-text-base bear-px-4 bear-py-2",
+  lg: "bear-text-lg bear-px-5 bear-py-3"
+}, ce = ({
+  value: y,
+  defaultValue: U = "",
+  onChange: o,
+  onMentionSelect: v,
   options: $,
-  trigger: o = "@",
-  placeholder: j = "Type @ to mention...",
-  disabled: I = !1,
-  maxSuggestions: B = 5,
-  filterOptions: K = Y,
-  size: Q = "md",
-  fullWidth: S = !1,
-  className: _
+  trigger: i = "@",
+  placeholder: L = "Type @ to mention...",
+  disabled: f = !1,
+  maxSuggestions: j = 5,
+  filterOptions: B = ee,
+  size: N = "md",
+  fullWidth: F = !1,
+  className: Q,
+  multiline: W = !1,
+  rows: H = te
 }) => {
-  const [F, N] = c(A), [f, H] = c(""), [U, h] = c(!1), [u, m] = c(0), [g, V] = c(null), L = p(null), v = p(null), y = p(null), q = p(null), [k, W] = c({ top: 0, left: 0, width: 0 }), a = w ?? F, b = K($, f).slice(0, B), M = U && f.length >= 0, E = M && b.length > 0, O = J(() => {
-    const e = a.lastIndexOf(o);
+  const [V, D] = b(U), [h, Z] = b(""), [C, p] = b(!1), [c, x] = b(0), [k, G] = b(null), M = w(null), m = w(null), z = w(null), O = w(null), [E, J] = b({ top: 0, left: 0, width: 0 }), a = y ?? V, u = B($, h).slice(0, j), R = C && h.length >= 0, I = R && u.length > 0, q = X(() => {
+    const e = a.lastIndexOf(i);
     if (e === -1) return { query: "", start: null };
-    const t = a.slice(e + o.length), r = t.indexOf(" ");
-    return { query: r === -1 ? t : t.slice(0, r), start: e };
-  }, [a, o]);
+    const r = a.slice(e + i.length), t = r.indexOf(" ");
+    return { query: t === -1 ? r : r.slice(0, t), start: e };
+  }, [a, i]);
   d(() => {
-    const { query: e, start: t } = O();
-    H(e), V(t), h(t !== null && !e.includes(" "));
-  }, [a, O]), d(() => {
-    m(0);
-  }, [f]), d(() => {
-    if (u >= 0 && y.current) {
-      const e = y.current.children[u];
+    const { query: e, start: r } = q();
+    Z(e), G(r), p(r !== null && !e.includes(" "));
+  }, [a, q]), d(() => {
+    x(0);
+  }, [h]), d(() => {
+    if (c >= 0 && z.current) {
+      const e = z.current.children[c];
       e == null || e.scrollIntoView({ block: "nearest" });
     }
-  }, [u]), d(() => {
-    if (!E) return;
+  }, [c]), d(() => {
+    if (!I) return;
     const e = () => {
-      var r;
-      const t = (r = v.current) == null ? void 0 : r.getBoundingClientRect();
-      t && W({
-        top: t.bottom + 4,
-        left: Math.max(8, Math.min(t.left, window.innerWidth - t.width - 8)),
-        width: t.width
+      var t;
+      const r = (t = m.current) == null ? void 0 : t.getBoundingClientRect();
+      r && J({
+        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);
     };
-  }, [E]), d(() => {
-    const e = (t) => {
-      var n, i;
-      const r = t.target;
-      (n = L.current) != null && n.contains(r) || (i = q.current) != null && i.contains(r) || h(!1);
+  }, [I]), d(() => {
+    const e = (r) => {
+      var n, l;
+      const t = r.target;
+      (n = M.current) != null && n.contains(t) || (l = O.current) != null && l.contains(t) || p(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
   }, []);
-  const R = (e) => {
-    const t = new RegExp(`${o}(\\w+)`, "g"), r = [];
+  const P = (e) => {
+    const r = new RegExp(`${i}(\\w+)`, "g"), t = [];
     let n;
-    for (; (n = t.exec(e)) !== null; )
-      r.push(n[1]);
-    return [...new Set(r)];
-  }, Z = (e) => {
-    const t = e.target.value;
-    w === void 0 && N(t), s == null || s(t, R(t));
-  }, D = (e) => {
-    var P;
-    if (g == null) return;
-    const t = a.slice(0, g), r = a.slice(g + o.length + f.length), n = `${o}${e.value}`, i = t + n + " " + r;
-    w === void 0 && N(i), s == null || s(i, R(i)), x == null || x(e), h(!1), (P = v.current) == null || P.focus();
-  }, G = (e) => {
-    if (!(!M || b.length === 0)) {
+    for (; (n = r.exec(e)) !== null; )
+      t.push(n[1]);
+    return [...new Set(t)];
+  }, T = (e) => {
+    const r = e.target.value;
+    y === void 0 && D(r), o == null || o(r, P(r));
+  }, A = (e) => {
+    var _;
+    if (k == null) return;
+    const r = a.slice(0, k), t = a.slice(k + i.length + h.length), n = `${i}${e.value}`, l = r + n + " " + t;
+    y === void 0 && D(l), o == null || o(l, P(l)), v == null || v(e), p(!1), (_ = m.current) == null || _.focus();
+  }, S = (e) => {
+    if (!(!R || u.length === 0)) {
       if (e.key === "ArrowDown") {
-        e.preventDefault(), m((t) => Math.min(t + 1, b.length - 1));
+        e.preventDefault(), x((r) => Math.min(r + 1, u.length - 1));
         return;
       }
       if (e.key === "ArrowUp") {
-        e.preventDefault(), m((t) => Math.max(t - 1, 0));
+        e.preventDefault(), x((r) => Math.max(r - 1, 0));
         return;
       }
       if (e.key === "Enter" || e.key === "Tab") {
         e.preventDefault();
-        const t = b[u];
-        t && D(t);
+        const r = u[c];
+        r && A(r);
         return;
       }
-      e.key === "Escape" && h(!1);
+      e.key === "Escape" && p(!1);
     }
   };
-  return /* @__PURE__ */ T(
+  return /* @__PURE__ */ K(
     "div",
     {
-      ref: L,
-      className: z(
+      ref: M,
+      className: g(
         "Bear-MentionsInput bear-relative",
-        S && "bear-w-full",
-        _
+        F && "bear-w-full",
+        Q
       ),
       children: [
-        /* @__PURE__ */ l(
+        W ? /* @__PURE__ */ s(
+          "textarea",
+          {
+            ref: m,
+            value: a,
+            rows: H,
+            onChange: T,
+            onKeyDown: S,
+            placeholder: L,
+            disabled: f,
+            className: g(
+              "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 bear-resize-none",
+              f && "bear-opacity-50 bear-cursor-not-allowed",
+              ne[N]
+            )
+          }
+        ) : /* @__PURE__ */ s(
           "input",
           {
-            ref: v,
+            ref: m,
             type: "text",
             value: a,
-            onChange: Z,
-            onKeyDown: G,
-            placeholder: j,
-            disabled: I,
-            className: z(
+            onChange: T,
+            onKeyDown: S,
+            placeholder: L,
+            disabled: f,
+            className: g(
               "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",
-              ee[Q]
+              f && "bear-opacity-50 bear-cursor-not-allowed",
+              ae[N]
             )
           }
         ),
-        E && /* @__PURE__ */ l(X, { children: /* @__PURE__ */ l(
+        I && /* @__PURE__ */ s(Y, { children: /* @__PURE__ */ s(
           "div",
           {
-            ref: q,
+            ref: O,
             className: "bear-fixed bear-rounded-lg bear-border bear-border-gray-200 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-800 bear-shadow-lg",
             style: {
-              top: k.top,
-              left: k.left,
-              width: k.width,
-              zIndex: C
+              top: E.top,
+              left: E.left,
+              width: E.width,
+              zIndex: re
             },
-            children: /* @__PURE__ */ l("div", { ref: y, className: "bear-max-h-48 bear-overflow-auto bear-py-1", children: b.map((e, t) => /* @__PURE__ */ T(
+            children: /* @__PURE__ */ s("div", { ref: z, className: "bear-max-h-48 bear-overflow-auto bear-py-1", children: u.map((e, r) => /* @__PURE__ */ K(
               "button",
               {
                 type: "button",
-                className: z(
+                className: g(
                   "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",
-                  t === u && "bear-bg-gray-100 dark:bear-bg-zinc-700"
+                  r === c && "bear-bg-gray-100 dark:bear-bg-zinc-700"
                 ),
-                onMouseEnter: () => m(t),
-                onClick: () => D(e),
+                onMouseEnter: () => x(r),
+                onClick: () => A(e),
                 children: [
-                  e.avatar && /* @__PURE__ */ l("span", { className: "bear-shrink-0", children: e.avatar }),
-                  /* @__PURE__ */ l("span", { children: e.label })
+                  e.avatar && /* @__PURE__ */ s("span", { className: "bear-shrink-0", children: e.avatar }),
+                  /* @__PURE__ */ s("span", { children: e.label })
                 ]
               },
               e.value
@@ -155,5 +177,5 @@ const C = 1e4, ee = {
   );
 };
 export {
-  oe as MentionsInput
+  ce as MentionsInput
 };

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

@@ -20,4 +20,8 @@ export interface MentionsInputProps {
     size?: 'sm' | 'md' | 'lg';
     fullWidth?: boolean;
     className?: string;
+    /** Render a textarea instead of a single-line input */
+    multiline?: boolean;
+    /** Visible rows when multiline */
+    rows?: number;
 }

package/dist/components/MessageList/MessageList.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react/jsx-runtime"),E=require("react"),g=require("../Avatar/Avatar.cjs"),a=require("../Typography/Typography.cjs"),S=require("./MessageList.const.cjs"),d=require("./MessageList.utils.cjs"),s=require("../../utils/cn.cjs"),w=require("../../utils/generateBearId.utils.cjs"),Y=require("../../utils/useBearId.cjs"),W=({id:m,testId:p,messages:n,currentUserId:y,groupWindowMs:N=S.MESSAGE_LIST_GROUP_WINDOW_MS,showDaySeparators:x=!0,showAvatars:B=!0,showTimestamps:M=!0,autoScroll:u=!0,height:r=S.MESSAGE_LIST_DEFAULT_HEIGHT,renderMessage:A,emptyState:j,formatDayLabel:l,formatTimestamp:L,translations:v,onNewMessagesClick:i,className:b})=>{const $=Y.useBearId("MessageList"),f=w.resolveBearId(m,$),o=E.useRef(null),G=E.useRef(!0),T=E.useRef(null),[P,O]=E.useState(!1),I={...S.MESSAGE_LIST_DEFAULT_TRANSLATIONS,...v},R=d.buildMessageListItems(n,y,N,x),U=e=>(l==null?void 0:l(e))??d.getDefaultDayLabel(e,I),h=e=>(L==null?void 0:L(e))??d.getDefaultTimestamp(e),C=e=>{const t=o.current;t&&t.scrollTo({top:t.scrollHeight,behavior:e?"smooth":"auto"})},q=()=>{const e=o.current;if(!e)return;const c=e.scrollHeight-e.scrollTop-e.clientHeight<=S.MESSAGE_LIST_BOTTOM_THRESHOLD_PX;G.current=c,c&&O(!1)};E.useEffect(()=>{const e=n.length>0?n[n.length-1].id:null,t=T.current===null,c=e!==null&&e!==T.current;if(T.current=e,!!c){if(t||u&&G.current){C(!t);return}O(!0)}},[n,u]);const D=()=>{C(!0),O(!1),i==null||i()},H=e=>_.jsxs("div",{className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__group`,S.MESSAGE_LIST_GROUP_CLASSES,e.isOwn&&S.MESSAGE_LIST_GROUP_OWN_CLASSES),children:[B&&!e.isOwn&&_.jsx(g.Avatar,{src:e.author.avatar,initials:e.author.name[0],size:"sm",className:"bear-flex-shrink-0"}),_.jsxs("div",{className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__group-body`,S.MESSAGE_LIST_GROUP_BODY_CLASSES,e.isOwn&&S.MESSAGE_LIST_GROUP_BODY_OWN_CLASSES),children:[!e.isOwn&&_.jsxs("div",{className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__meta`,S.MESSAGE_LIST_META_CLASSES),children:[_.jsx(a.Typography,{variant:"caption",component:"span",className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__author`,S.MESSAGE_LIST_AUTHOR_CLASSES),children:e.author.name}),M&&_.jsx(a.Typography,{variant:"caption",component:"span",className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__timestamp`,S.MESSAGE_LIST_TIMESTAMP_CLASSES),children:h(e.messages[0].timestamp)})]}),e.messages.map(t=>_.jsx("div",{className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__bubble`,S.MESSAGE_LIST_BUBBLE_CLASSES,e.isOwn&&`${S.MESSAGE_LIST_ROOT_CLASS}__bubble--own`,e.isOwn&&S.MESSAGE_LIST_BUBBLE_OWN_CLASSES),children:(A==null?void 0:A(t))??t.content},t.id)),e.isOwn&&M&&_.jsx(a.Typography,{variant:"caption",component:"span",className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__timestamp`,S.MESSAGE_LIST_TIMESTAMP_CLASSES),children:h(e.messages[e.messages.length-1].timestamp)})]})]},e.key);return _.jsxs("div",{id:f,"data-testid":p,className:s.cn(S.MESSAGE_LIST_ROOT_CLASS,S.MESSAGE_LIST_BASE_CLASSES,b),style:{height:typeof r=="number"?`${r}px`:r},children:[_.jsxs("div",{ref:o,onScroll:q,className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__scroller`,S.MESSAGE_LIST_SCROLLER_CLASSES),role:"log","aria-live":"polite",children:[R.length===0&&_.jsx("div",{className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__empty`,S.MESSAGE_LIST_EMPTY_CLASSES),children:j??_.jsx(a.Typography,{variant:"body2",component:"span",children:I.emptyLabel})}),R.map(e=>e.kind==="day"?_.jsxs("div",{className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__day-separator`,S.MESSAGE_LIST_DAY_SEPARATOR_CLASSES),children:[_.jsx("span",{className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__day-line`,S.MESSAGE_LIST_DAY_LINE_CLASSES)}),_.jsx("span",{className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__day-label`,S.MESSAGE_LIST_DAY_LABEL_CLASSES),children:U(e.date)}),_.jsx("span",{className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__day-line`,S.MESSAGE_LIST_DAY_LINE_CLASSES)})]},e.key):H(e))]}),P&&_.jsx("button",{type:"button",onClick:D,className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__new-messages`,S.MESSAGE_LIST_NEW_MESSAGES_CLASSES),children:I.newMessages})]})};exports.MessageList=W;

package/dist/components/MessageList/MessageList.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S="Bear-MessageList",E=400,_=300*1e3,e=40,A=1440*60*1e3,L={newMessages:"New messages",today:"Today",yesterday:"Yesterday",emptyLabel:"No messages yet"},r="bear-relative bear-flex bear-flex-col bear-rounded-xl bear-border bear-overflow-hidden",a="bear-flex-1 bear-overflow-y-auto bear-p-4 bear-flex bear-flex-col bear-gap-3",T="bear-flex bear-items-center bear-gap-3 bear-my-1",b="bear-flex-1 bear-h-px",t="bear-text-xs bear-font-medium bear-whitespace-nowrap",M="bear-flex bear-gap-2",s="bear-flex-row-reverse",G="bear-flex bear-flex-col bear-gap-1 bear-min-w-0 bear-flex-1",o="bear-items-end",I="bear-px-4 bear-py-2 bear-rounded-2xl bear-text-sm bear-max-w-[70%] bear-w-fit",n="bear-self-end",O="bear-flex bear-items-baseline bear-gap-2 bear-mb-1",C="bear-text-xs bear-font-semibold",c="bear-text-xs",l="bear-absolute-x-center bear-bottom-4 bear-flex bear-items-center bear-gap-2 bear-px-4 bear-py-2 bear-rounded-full bear-border-none bear-cursor-pointer bear-shadow-lg bear-text-xs bear-font-medium hover:bear-opacity-90",x="bear-flex-1 bear-flex bear-items-center bear-justify-center bear-text-sm";exports.MESSAGE_LIST_AUTHOR_CLASSES=C;exports.MESSAGE_LIST_BASE_CLASSES=r;exports.MESSAGE_LIST_BOTTOM_THRESHOLD_PX=e;exports.MESSAGE_LIST_BUBBLE_CLASSES=I;exports.MESSAGE_LIST_BUBBLE_OWN_CLASSES=n;exports.MESSAGE_LIST_DAY_LABEL_CLASSES=t;exports.MESSAGE_LIST_DAY_LINE_CLASSES=b;exports.MESSAGE_LIST_DAY_SEPARATOR_CLASSES=T;exports.MESSAGE_LIST_DEFAULT_HEIGHT=E;exports.MESSAGE_LIST_DEFAULT_TRANSLATIONS=L;exports.MESSAGE_LIST_EMPTY_CLASSES=x;exports.MESSAGE_LIST_GROUP_BODY_CLASSES=G;exports.MESSAGE_LIST_GROUP_BODY_OWN_CLASSES=o;exports.MESSAGE_LIST_GROUP_CLASSES=M;exports.MESSAGE_LIST_GROUP_OWN_CLASSES=s;exports.MESSAGE_LIST_GROUP_WINDOW_MS=_;exports.MESSAGE_LIST_META_CLASSES=O;exports.MESSAGE_LIST_MS_PER_DAY=A;exports.MESSAGE_LIST_NEW_MESSAGES_CLASSES=l;exports.MESSAGE_LIST_ROOT_CLASS=S;exports.MESSAGE_LIST_SCROLLER_CLASSES=a;exports.MESSAGE_LIST_TIMESTAMP_CLASSES=c;

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

@@ -0,0 +1,23 @@
+import { MessageListTranslations } from './MessageList.types';
+export declare const MESSAGE_LIST_ROOT_CLASS = "Bear-MessageList";
+export declare const MESSAGE_LIST_DEFAULT_HEIGHT = 400;
+export declare const MESSAGE_LIST_GROUP_WINDOW_MS: number;
+export declare const MESSAGE_LIST_BOTTOM_THRESHOLD_PX = 40;
+export declare const MESSAGE_LIST_MS_PER_DAY: number;
+export declare const MESSAGE_LIST_DEFAULT_TRANSLATIONS: MessageListTranslations;
+export declare const MESSAGE_LIST_BASE_CLASSES = "bear-relative bear-flex bear-flex-col bear-rounded-xl bear-border bear-overflow-hidden";
+export declare const MESSAGE_LIST_SCROLLER_CLASSES = "bear-flex-1 bear-overflow-y-auto bear-p-4 bear-flex bear-flex-col bear-gap-3";
+export declare const MESSAGE_LIST_DAY_SEPARATOR_CLASSES = "bear-flex bear-items-center bear-gap-3 bear-my-1";
+export declare const MESSAGE_LIST_DAY_LINE_CLASSES = "bear-flex-1 bear-h-px";
+export declare const MESSAGE_LIST_DAY_LABEL_CLASSES = "bear-text-xs bear-font-medium bear-whitespace-nowrap";
+export declare const MESSAGE_LIST_GROUP_CLASSES = "bear-flex bear-gap-2";
+export declare const MESSAGE_LIST_GROUP_OWN_CLASSES = "bear-flex-row-reverse";
+export declare const MESSAGE_LIST_GROUP_BODY_CLASSES = "bear-flex bear-flex-col bear-gap-1 bear-min-w-0 bear-flex-1";
+export declare const MESSAGE_LIST_GROUP_BODY_OWN_CLASSES = "bear-items-end";
+export declare const MESSAGE_LIST_BUBBLE_CLASSES = "bear-px-4 bear-py-2 bear-rounded-2xl bear-text-sm bear-max-w-[70%] bear-w-fit";
+export declare const MESSAGE_LIST_BUBBLE_OWN_CLASSES = "bear-self-end";
+export declare const MESSAGE_LIST_META_CLASSES = "bear-flex bear-items-baseline bear-gap-2 bear-mb-1";
+export declare const MESSAGE_LIST_AUTHOR_CLASSES = "bear-text-xs bear-font-semibold";
+export declare const MESSAGE_LIST_TIMESTAMP_CLASSES = "bear-text-xs";
+export declare const MESSAGE_LIST_NEW_MESSAGES_CLASSES = "bear-absolute-x-center bear-bottom-4 bear-flex bear-items-center bear-gap-2 bear-px-4 bear-py-2 bear-rounded-full bear-border-none bear-cursor-pointer bear-shadow-lg bear-text-xs bear-font-medium hover:bear-opacity-90";
+export declare const MESSAGE_LIST_EMPTY_CLASSES = "bear-flex-1 bear-flex bear-items-center bear-justify-center bear-text-sm";

package/dist/components/MessageList/MessageList.const.js

@@ -0,0 +1,30 @@
+const e = "Bear-MessageList", S = 400, r = 3e5, a = 40, E = 864e5, _ = {
+  newMessages: "New messages",
+  today: "Today",
+  yesterday: "Yesterday",
+  emptyLabel: "No messages yet"
+}, b = "bear-relative bear-flex bear-flex-col bear-rounded-xl bear-border bear-overflow-hidden", t = "bear-flex-1 bear-overflow-y-auto bear-p-4 bear-flex bear-flex-col bear-gap-3", s = "bear-flex bear-items-center bear-gap-3 bear-my-1", A = "bear-flex-1 bear-h-px", o = "bear-text-xs bear-font-medium bear-whitespace-nowrap", L = "bear-flex bear-gap-2", n = "bear-flex-row-reverse", T = "bear-flex bear-flex-col bear-gap-1 bear-min-w-0 bear-flex-1", x = "bear-items-end", c = "bear-px-4 bear-py-2 bear-rounded-2xl bear-text-sm bear-max-w-[70%] bear-w-fit", l = "bear-self-end", M = "bear-flex bear-items-baseline bear-gap-2 bear-mb-1", G = "bear-text-xs bear-font-semibold", I = "bear-text-xs", f = "bear-absolute-x-center bear-bottom-4 bear-flex bear-items-center bear-gap-2 bear-px-4 bear-py-2 bear-rounded-full bear-border-none bear-cursor-pointer bear-shadow-lg bear-text-xs bear-font-medium hover:bear-opacity-90", d = "bear-flex-1 bear-flex bear-items-center bear-justify-center bear-text-sm";
+export {
+  G as MESSAGE_LIST_AUTHOR_CLASSES,
+  b as MESSAGE_LIST_BASE_CLASSES,
+  a as MESSAGE_LIST_BOTTOM_THRESHOLD_PX,
+  c as MESSAGE_LIST_BUBBLE_CLASSES,
+  l as MESSAGE_LIST_BUBBLE_OWN_CLASSES,
+  o as MESSAGE_LIST_DAY_LABEL_CLASSES,
+  A as MESSAGE_LIST_DAY_LINE_CLASSES,
+  s as MESSAGE_LIST_DAY_SEPARATOR_CLASSES,
+  S as MESSAGE_LIST_DEFAULT_HEIGHT,
+  _ as MESSAGE_LIST_DEFAULT_TRANSLATIONS,
+  d as MESSAGE_LIST_EMPTY_CLASSES,
+  T as MESSAGE_LIST_GROUP_BODY_CLASSES,
+  x as MESSAGE_LIST_GROUP_BODY_OWN_CLASSES,
+  L as MESSAGE_LIST_GROUP_CLASSES,
+  n as MESSAGE_LIST_GROUP_OWN_CLASSES,
+  r as MESSAGE_LIST_GROUP_WINDOW_MS,
+  M as MESSAGE_LIST_META_CLASSES,
+  E as MESSAGE_LIST_MS_PER_DAY,
+  f as MESSAGE_LIST_NEW_MESSAGES_CLASSES,
+  e as MESSAGE_LIST_ROOT_CLASS,
+  t as MESSAGE_LIST_SCROLLER_CLASSES,
+  I as MESSAGE_LIST_TIMESTAMP_CLASSES
+};

package/dist/components/MessageList/MessageList.d.ts

@@ -0,0 +1,19 @@
+import { FC } from 'react';
+import { MessageListProps } from './MessageList.types';
+/**
+ * MessageList - Chat message list with consecutive-author grouping,
+ * day separators, and auto-scroll with a "new messages" affordance.
+ *
+ * Rendering is plain (non-virtualized); virtualization is planned as
+ * future work for very long conversations.
+ *
+ * @example
+ * ```tsx
+ * <MessageList
+ *   messages={messages}
+ *   currentUserId="me"
+ *   height={420}
+ * />
+ * ```
+ */
+export declare const MessageList: FC<MessageListProps>;

package/dist/components/MessageList/MessageList.js

@@ -0,0 +1,182 @@
+import { jsxs as _, jsx as n } from "react/jsx-runtime";
+import { useRef as I, useState as j, useEffect as k } from "react";
+import { Avatar as z } from "../Avatar/Avatar.js";
+import { Typography as r } from "../Typography/Typography.js";
+import { MESSAGE_LIST_DEFAULT_HEIGHT as X, MESSAGE_LIST_DEFAULT_TRANSLATIONS as q, MESSAGE_LIST_EMPTY_CLASSES as J, MESSAGE_LIST_ROOT_CLASS as t, MESSAGE_LIST_DAY_LINE_CLASSES as N, MESSAGE_LIST_DAY_LABEL_CLASSES as K, MESSAGE_LIST_DAY_SEPARATOR_CLASSES as Q, MESSAGE_LIST_SCROLLER_CLASSES as V, MESSAGE_LIST_NEW_MESSAGES_CLASSES as Z, MESSAGE_LIST_BASE_CLASSES as g, MESSAGE_LIST_GROUP_WINDOW_MS as SS, MESSAGE_LIST_AUTHOR_CLASSES as tS, MESSAGE_LIST_TIMESTAMP_CLASSES as f, MESSAGE_LIST_META_CLASSES as eS, MESSAGE_LIST_BUBBLE_OWN_CLASSES as sS, MESSAGE_LIST_BUBBLE_CLASSES as nS, MESSAGE_LIST_GROUP_BODY_OWN_CLASSES as _S, MESSAGE_LIST_GROUP_BODY_CLASSES as aS, MESSAGE_LIST_GROUP_OWN_CLASSES as lS, MESSAGE_LIST_GROUP_CLASSES as rS, MESSAGE_LIST_BOTTOM_THRESHOLD_PX as cS } from "./MessageList.const.js";
+import { buildMessageListItems as oS, getDefaultDayLabel as ES, getDefaultTimestamp as iS } from "./MessageList.utils.js";
+import { cn as e } from "../../utils/cn.js";
+import { resolveBearId as AS } from "../../utils/generateBearId.utils.js";
+import { useBearId as LS } from "../../utils/useBearId.js";
+const OS = ({
+  id: B,
+  testId: R,
+  messages: a,
+  currentUserId: v,
+  groupWindowMs: C = SS,
+  showDaySeparators: $ = !0,
+  showAvatars: b = !0,
+  showTimestamps: h = !0,
+  autoScroll: u = !0,
+  height: c = X,
+  renderMessage: o,
+  emptyState: y,
+  formatDayLabel: E,
+  formatTimestamp: i,
+  translations: U,
+  onNewMessagesClick: A,
+  className: H
+}) => {
+  const P = LS("MessageList"), w = AS(B, P), L = I(null), G = I(!0), d = I(null), [D, m] = j(!1), T = { ...q, ...U }, p = oS(a, v, C, $), W = (S) => (E == null ? void 0 : E(S)) ?? ES(S, T), M = (S) => (i == null ? void 0 : i(S)) ?? iS(S), O = (S) => {
+    const s = L.current;
+    s && s.scrollTo({ top: s.scrollHeight, behavior: S ? "smooth" : "auto" });
+  }, Y = () => {
+    const S = L.current;
+    if (!S) return;
+    const l = S.scrollHeight - S.scrollTop - S.clientHeight <= cS;
+    G.current = l, l && m(!1);
+  };
+  k(() => {
+    const S = a.length > 0 ? a[a.length - 1].id : null, s = d.current === null, l = S !== null && S !== d.current;
+    if (d.current = S, !!l) {
+      if (s || u && G.current) {
+        O(!s);
+        return;
+      }
+      m(!0);
+    }
+  }, [a, u]);
+  const x = () => {
+    O(!0), m(!1), A == null || A();
+  }, F = (S) => /* @__PURE__ */ _(
+    "div",
+    {
+      className: e(
+        `${t}__group`,
+        rS,
+        S.isOwn && lS
+      ),
+      children: [
+        b && !S.isOwn && /* @__PURE__ */ n(
+          z,
+          {
+            src: S.author.avatar,
+            initials: S.author.name[0],
+            size: "sm",
+            className: "bear-flex-shrink-0"
+          }
+        ),
+        /* @__PURE__ */ _(
+          "div",
+          {
+            className: e(
+              `${t}__group-body`,
+              aS,
+              S.isOwn && _S
+            ),
+            children: [
+              !S.isOwn && /* @__PURE__ */ _("div", { className: e(`${t}__meta`, eS), children: [
+                /* @__PURE__ */ n(
+                  r,
+                  {
+                    variant: "caption",
+                    component: "span",
+                    className: e(`${t}__author`, tS),
+                    children: S.author.name
+                  }
+                ),
+                h && /* @__PURE__ */ n(
+                  r,
+                  {
+                    variant: "caption",
+                    component: "span",
+                    className: e(`${t}__timestamp`, f),
+                    children: M(S.messages[0].timestamp)
+                  }
+                )
+              ] }),
+              S.messages.map((s) => /* @__PURE__ */ n(
+                "div",
+                {
+                  className: e(
+                    `${t}__bubble`,
+                    nS,
+                    S.isOwn && `${t}__bubble--own`,
+                    S.isOwn && sS
+                  ),
+                  children: (o == null ? void 0 : o(s)) ?? s.content
+                },
+                s.id
+              )),
+              S.isOwn && h && /* @__PURE__ */ n(
+                r,
+                {
+                  variant: "caption",
+                  component: "span",
+                  className: e(`${t}__timestamp`, f),
+                  children: M(S.messages[S.messages.length - 1].timestamp)
+                }
+              )
+            ]
+          }
+        )
+      ]
+    },
+    S.key
+  );
+  return /* @__PURE__ */ _(
+    "div",
+    {
+      id: w,
+      "data-testid": R,
+      className: e(t, g, H),
+      style: { height: typeof c == "number" ? `${c}px` : c },
+      children: [
+        /* @__PURE__ */ _(
+          "div",
+          {
+            ref: L,
+            onScroll: Y,
+            className: e(`${t}__scroller`, V),
+            role: "log",
+            "aria-live": "polite",
+            children: [
+              p.length === 0 && /* @__PURE__ */ n("div", { className: e(`${t}__empty`, J), children: y ?? /* @__PURE__ */ n(r, { variant: "body2", component: "span", children: T.emptyLabel }) }),
+              p.map(
+                (S) => S.kind === "day" ? /* @__PURE__ */ _(
+                  "div",
+                  {
+                    className: e(
+                      `${t}__day-separator`,
+                      Q
+                    ),
+                    children: [
+                      /* @__PURE__ */ n("span", { className: e(`${t}__day-line`, N) }),
+                      /* @__PURE__ */ n("span", { className: e(`${t}__day-label`, K), children: W(S.date) }),
+                      /* @__PURE__ */ n("span", { className: e(`${t}__day-line`, N) })
+                    ]
+                  },
+                  S.key
+                ) : F(S)
+              )
+            ]
+          }
+        ),
+        D && /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            onClick: x,
+            className: e(
+              `${t}__new-messages`,
+              Z
+            ),
+            children: T.newMessages
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  OS as MessageList
+};

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

@@ -0,0 +1,72 @@
+import { ReactNode } from 'react';
+export interface MessageListAuthor {
+    /** Unique author identifier — used for consecutive message grouping */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Avatar image URL */
+    avatar?: string;
+}
+export interface MessageListMessage {
+    /** Unique message identifier */
+    id: string;
+    /** Message author */
+    author: MessageListAuthor;
+    /** Message content */
+    content: ReactNode;
+    /** Message timestamp — required for grouping and day separators */
+    timestamp: Date;
+}
+export interface MessageListTranslations {
+    newMessages: string;
+    today: string;
+    yesterday: string;
+    emptyLabel: string;
+}
+export interface MessageListDayItem {
+    kind: 'day';
+    key: string;
+    date: Date;
+}
+export interface MessageListGroupItem {
+    kind: 'group';
+    key: string;
+    author: MessageListAuthor;
+    isOwn: boolean;
+    messages: MessageListMessage[];
+}
+export type MessageListItem = MessageListDayItem | MessageListGroupItem;
+export interface MessageListProps {
+    id?: string;
+    testId?: string;
+    /** Messages in chronological order (oldest first) */
+    messages: MessageListMessage[];
+    /** Author id whose messages are aligned right as "own" messages */
+    currentUserId?: string;
+    /** Max gap in ms between consecutive messages of the same author to stay in one group */
+    groupWindowMs?: number;
+    /** Show day separator rows between messages of different days */
+    showDaySeparators?: boolean;
+    /** Show author avatars */
+    showAvatars?: boolean;
+    /** Show group timestamps */
+    showTimestamps?: boolean;
+    /** Auto-scroll to bottom on new messages when already at the bottom */
+    autoScroll?: boolean;
+    /** Height of the scrollable area */
+    height?: number | string;
+    /** Custom message content renderer */
+    renderMessage?: (message: MessageListMessage) => ReactNode;
+    /** Content rendered when there are no messages */
+    emptyState?: ReactNode;
+    /** Custom day separator label formatter */
+    formatDayLabel?: (date: Date) => string;
+    /** Custom timestamp formatter */
+    formatTimestamp?: (date: Date) => string;
+    /** Replaceable user-facing strings */
+    translations?: Partial<MessageListTranslations>;
+    /** Callback when the "new messages" affordance is clicked */
+    onNewMessagesClick?: () => void;
+    /** Additional CSS class */
+    className?: string;
+}

package/dist/components/MessageList/MessageList.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("./MessageList.const.cjs"),n=(e,s)=>e.getFullYear()===s.getFullYear()&&e.getMonth()===s.getMonth()&&e.getDate()===s.getDate(),u=e=>`${e.getFullYear()}-${e.getMonth()}-${e.getDate()}`,c=(e,s)=>{const o=new Date;if(n(e,o))return s.today;const g=new Date(o.getTime()-y.MESSAGE_LIST_MS_PER_DAY);return n(e,g)?s.yesterday:e.toLocaleDateString([],{year:"numeric",month:"long",day:"numeric"})},d=e=>e.toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"}),D=(e,s,o,g)=>{const i=[];let r=null;for(const t of e){const m=r===null||!n(r,t.timestamp);g&&m&&i.push({kind:"day",key:`day-${u(t.timestamp)}`,date:t.timestamp});const a=i[i.length-1],l=a!==void 0&&a.kind==="group"&&a.author.id===t.author.id&&t.timestamp.getTime()-a.messages[a.messages.length-1].timestamp.getTime()<=o;a!==void 0&&a.kind==="group"&&l?a.messages.push(t):i.push({kind:"group",key:`group-${t.id}`,author:t.author,isOwn:t.author.id===s,messages:[t]}),r=t.timestamp}return i};exports.buildMessageListItems=D;exports.getDayKey=u;exports.getDefaultDayLabel=c;exports.getDefaultTimestamp=d;exports.isSameDay=n;

package/dist/components/MessageList/MessageList.utils.d.ts

@@ -0,0 +1,6 @@
+import { MessageListItem, MessageListMessage, MessageListTranslations } from './MessageList.types';
+export declare const isSameDay: (a: Date, b: Date) => boolean;
+export declare const getDayKey: (date: Date) => string;
+export declare const getDefaultDayLabel: (date: Date, translations: MessageListTranslations) => string;
+export declare const getDefaultTimestamp: (date: Date) => string;
+export declare const buildMessageListItems: (messages: MessageListMessage[], currentUserId: string | undefined, groupWindowMs: number, showDaySeparators: boolean) => MessageListItem[];