@forgedevstack/bear 1.2.4 → 1.2.6

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

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"},T="bear-relative bear-flex bear-flex-col bear-rounded-xl bear-border bear-overflow-hidden",r="bear-flex-1 bear-overflow-y-auto bear-p-4 bear-flex bear-flex-col bear-gap-3",a="bear-flex bear-items-center bear-gap-3 bear-my-1",M="bear-flex-1 bear-h-px",I="bear-text-xs bear-font-medium bear-whitespace-nowrap",t="bear-flex bear-gap-2",G="bear-flex-row-reverse",b="bear-flex bear-flex-col bear-gap-1 bear-min-w-0 bear-flex-1",s="bear-items-end",o="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",R="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",l="bear-flex-1 bear-flex bear-items-center bear-justify-center bear-text-sm",x=40,P=6,B=36,f=56,U=36,D=12;exports.MESSAGE_LIST_AUTHOR_CLASSES=c;exports.MESSAGE_LIST_BASE_CLASSES=T;exports.MESSAGE_LIST_BOTTOM_THRESHOLD_PX=e;exports.MESSAGE_LIST_BUBBLE_CLASSES=o;exports.MESSAGE_LIST_BUBBLE_ESTIMATE_PX=U;exports.MESSAGE_LIST_BUBBLE_OWN_CLASSES=n;exports.MESSAGE_LIST_DAY_ESTIMATE_PX=B;exports.MESSAGE_LIST_DAY_LABEL_CLASSES=I;exports.MESSAGE_LIST_DAY_LINE_CLASSES=M;exports.MESSAGE_LIST_DAY_SEPARATOR_CLASSES=a;exports.MESSAGE_LIST_DEFAULT_HEIGHT=E;exports.MESSAGE_LIST_DEFAULT_TRANSLATIONS=L;exports.MESSAGE_LIST_EMPTY_CLASSES=l;exports.MESSAGE_LIST_GROUP_BASE_ESTIMATE_PX=f;exports.MESSAGE_LIST_GROUP_BODY_CLASSES=b;exports.MESSAGE_LIST_GROUP_BODY_OWN_CLASSES=s;exports.MESSAGE_LIST_GROUP_CLASSES=t;exports.MESSAGE_LIST_GROUP_OWN_CLASSES=G;exports.MESSAGE_LIST_GROUP_WINDOW_MS=_;exports.MESSAGE_LIST_ITEM_GAP_PX=D;exports.MESSAGE_LIST_META_CLASSES=O;exports.MESSAGE_LIST_MS_PER_DAY=A;exports.MESSAGE_LIST_NEW_MESSAGES_CLASSES=R;exports.MESSAGE_LIST_OVERSCAN=P;exports.MESSAGE_LIST_ROOT_CLASS=S;exports.MESSAGE_LIST_SCROLLER_CLASSES=r;exports.MESSAGE_LIST_TIMESTAMP_CLASSES=C;exports.MESSAGE_LIST_VIRTUALIZE_THRESHOLD=x;

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

@@ -0,0 +1,29 @@
+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";
+export declare const MESSAGE_LIST_VIRTUALIZE_THRESHOLD = 40;
+export declare const MESSAGE_LIST_OVERSCAN = 6;
+export declare const MESSAGE_LIST_DAY_ESTIMATE_PX = 36;
+export declare const MESSAGE_LIST_GROUP_BASE_ESTIMATE_PX = 56;
+export declare const MESSAGE_LIST_BUBBLE_ESTIMATE_PX = 36;
+export declare const MESSAGE_LIST_ITEM_GAP_PX = 12;

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

@@ -0,0 +1,36 @@
+const S = "Bear-MessageList", e = 400, E = 3e5, _ = 40, r = 864e5, a = {
+  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", A = "bear-flex bear-items-center bear-gap-3 bear-my-1", s = "bear-flex-1 bear-h-px", L = "bear-text-xs bear-font-medium bear-whitespace-nowrap", o = "bear-flex bear-gap-2", T = "bear-flex-row-reverse", n = "bear-flex bear-flex-col bear-gap-1 bear-min-w-0 bear-flex-1", M = "bear-items-end", c = "bear-px-4 bear-py-2 bear-rounded-2xl bear-text-sm bear-max-w-[70%] bear-w-fit", I = "bear-self-end", G = "bear-flex bear-items-baseline bear-gap-2 bear-mb-1", x = "bear-text-xs bear-font-semibold", l = "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", O = "bear-flex-1 bear-flex bear-items-center bear-justify-center bear-text-sm", d = 40, m = 6, C = 36, i = 56, p = 36, R = 12;
+export {
+  x as MESSAGE_LIST_AUTHOR_CLASSES,
+  b as MESSAGE_LIST_BASE_CLASSES,
+  _ as MESSAGE_LIST_BOTTOM_THRESHOLD_PX,
+  c as MESSAGE_LIST_BUBBLE_CLASSES,
+  p as MESSAGE_LIST_BUBBLE_ESTIMATE_PX,
+  I as MESSAGE_LIST_BUBBLE_OWN_CLASSES,
+  C as MESSAGE_LIST_DAY_ESTIMATE_PX,
+  L as MESSAGE_LIST_DAY_LABEL_CLASSES,
+  s as MESSAGE_LIST_DAY_LINE_CLASSES,
+  A as MESSAGE_LIST_DAY_SEPARATOR_CLASSES,
+  e as MESSAGE_LIST_DEFAULT_HEIGHT,
+  a as MESSAGE_LIST_DEFAULT_TRANSLATIONS,
+  O as MESSAGE_LIST_EMPTY_CLASSES,
+  i as MESSAGE_LIST_GROUP_BASE_ESTIMATE_PX,
+  n as MESSAGE_LIST_GROUP_BODY_CLASSES,
+  M as MESSAGE_LIST_GROUP_BODY_OWN_CLASSES,
+  o as MESSAGE_LIST_GROUP_CLASSES,
+  T as MESSAGE_LIST_GROUP_OWN_CLASSES,
+  E as MESSAGE_LIST_GROUP_WINDOW_MS,
+  R as MESSAGE_LIST_ITEM_GAP_PX,
+  G as MESSAGE_LIST_META_CLASSES,
+  r as MESSAGE_LIST_MS_PER_DAY,
+  f as MESSAGE_LIST_NEW_MESSAGES_CLASSES,
+  m as MESSAGE_LIST_OVERSCAN,
+  S as MESSAGE_LIST_ROOT_CLASS,
+  t as MESSAGE_LIST_SCROLLER_CLASSES,
+  l as MESSAGE_LIST_TIMESTAMP_CLASSES,
+  d as MESSAGE_LIST_VIRTUALIZE_THRESHOLD
+};

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

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

package/dist/components/MessageList/MessageList.js

@@ -0,0 +1,194 @@
+import { jsxs as o, jsx as S } from "react/jsx-runtime";
+import { useRef as u, useState as h, useEffect as b } from "react";
+import { Avatar as et } from "../Avatar/Avatar.js";
+import { Typography as E } from "../Typography/Typography.js";
+import { MESSAGE_LIST_DEFAULT_HEIGHT as y, MESSAGE_LIST_VIRTUALIZE_THRESHOLD as st, MESSAGE_LIST_DEFAULT_TRANSLATIONS as St, MESSAGE_LIST_EMPTY_CLASSES as nt, MESSAGE_LIST_ROOT_CLASS as e, MESSAGE_LIST_SCROLLER_CLASSES as lt, MESSAGE_LIST_NEW_MESSAGES_CLASSES as _t, MESSAGE_LIST_BASE_CLASSES as rt, MESSAGE_LIST_GROUP_WINDOW_MS as ot, MESSAGE_LIST_OVERSCAN as at, MESSAGE_LIST_DAY_LINE_CLASSES as C, MESSAGE_LIST_DAY_LABEL_CLASSES as ct, MESSAGE_LIST_DAY_SEPARATOR_CLASSES as it, MESSAGE_LIST_BOTTOM_THRESHOLD_PX as Et, MESSAGE_LIST_AUTHOR_CLASSES as At, MESSAGE_LIST_TIMESTAMP_CLASSES as H, MESSAGE_LIST_META_CLASSES as dt, MESSAGE_LIST_BUBBLE_OWN_CLASSES as Lt, MESSAGE_LIST_BUBBLE_CLASSES as mt, MESSAGE_LIST_GROUP_BODY_OWN_CLASSES as Tt, MESSAGE_LIST_GROUP_BODY_CLASSES as It, MESSAGE_LIST_GROUP_OWN_CLASSES as pt, MESSAGE_LIST_GROUP_CLASSES as ut } from "./MessageList.const.js";
+import { buildMessageListItems as ht, getMessageListWindow as Gt, getDefaultDayLabel as Mt, getDefaultTimestamp as Ot } from "./MessageList.utils.js";
+import { cn as s } from "../../utils/cn.js";
+import { resolveBearId as ft } from "../../utils/generateBearId.utils.js";
+import { useBearId as Nt } from "../../utils/useBearId.js";
+const Ut = ({
+  id: w,
+  testId: U,
+  messages: l,
+  currentUserId: D,
+  groupWindowMs: P = ot,
+  showDaySeparators: x = !0,
+  showAvatars: W = !0,
+  showTimestamps: G = !0,
+  autoScroll: M = !0,
+  virtualized: Y,
+  height: _ = y,
+  renderMessage: A,
+  emptyState: F,
+  formatDayLabel: d,
+  formatTimestamp: L,
+  translations: g,
+  onNewMessagesClick: m,
+  className: V
+}) => {
+  const j = Nt("MessageList"), k = ft(w, j), a = u(null), O = u(!0), T = u(null), [z, I] = h(!1), [X, Z] = h(0), [q, f] = h(
+    typeof _ == "number" ? _ : y
+  ), p = { ...St, ...g }, c = ht(l, D, P, x), J = (t) => (d == null ? void 0 : d(t)) ?? Mt(t, p), N = (t) => (L == null ? void 0 : L(t)) ?? Ot(t), v = Y ?? l.length >= st, R = (t) => {
+    const n = a.current;
+    n && n.scrollTo({ top: n.scrollHeight, behavior: t ? "smooth" : "auto" });
+  }, K = () => {
+    const t = a.current;
+    if (!t) return;
+    Z(t.scrollTop), f(t.clientHeight);
+    const i = t.scrollHeight - t.scrollTop - t.clientHeight <= Et;
+    O.current = i, i && I(!1);
+  };
+  b(() => {
+    const t = a.current;
+    t && f(t.clientHeight);
+  }, [_]), b(() => {
+    const t = l.length > 0 ? l[l.length - 1].id : null, n = T.current === null, i = t !== null && t !== T.current;
+    if (T.current = t, !!i) {
+      if (n || M && O.current) {
+        R(!n);
+        return;
+      }
+      I(!0);
+    }
+  }, [l, M]);
+  const Q = () => {
+    R(!0), I(!1), m == null || m();
+  }, tt = (t) => /* @__PURE__ */ o(
+    "div",
+    {
+      className: s(
+        `${e}__group`,
+        ut,
+        t.isOwn && pt
+      ),
+      children: [
+        W && !t.isOwn && /* @__PURE__ */ S(
+          et,
+          {
+            src: t.author.avatar,
+            initials: t.author.name[0],
+            size: "sm",
+            className: "bear-flex-shrink-0"
+          }
+        ),
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: s(
+              `${e}__group-body`,
+              It,
+              t.isOwn && Tt
+            ),
+            children: [
+              !t.isOwn && /* @__PURE__ */ o("div", { className: s(`${e}__meta`, dt), children: [
+                /* @__PURE__ */ S(
+                  E,
+                  {
+                    variant: "caption",
+                    component: "span",
+                    className: s(`${e}__author`, At),
+                    children: t.author.name
+                  }
+                ),
+                G && /* @__PURE__ */ S(
+                  E,
+                  {
+                    variant: "caption",
+                    component: "span",
+                    className: s(`${e}__timestamp`, H),
+                    children: N(t.messages[0].timestamp)
+                  }
+                )
+              ] }),
+              t.messages.map((n) => /* @__PURE__ */ S(
+                "div",
+                {
+                  className: s(
+                    `${e}__bubble`,
+                    mt,
+                    t.isOwn && `${e}__bubble--own`,
+                    t.isOwn && Lt
+                  ),
+                  children: (A == null ? void 0 : A(n)) ?? n.content
+                },
+                n.id
+              )),
+              t.isOwn && G && /* @__PURE__ */ S(
+                E,
+                {
+                  variant: "caption",
+                  component: "span",
+                  className: s(`${e}__timestamp`, H),
+                  children: N(t.messages[t.messages.length - 1].timestamp)
+                }
+              )
+            ]
+          }
+        )
+      ]
+    },
+    t.key
+  ), B = (t) => t.kind === "day" ? /* @__PURE__ */ o(
+    "div",
+    {
+      className: s(
+        `${e}__day-separator`,
+        it
+      ),
+      children: [
+        /* @__PURE__ */ S("span", { className: s(`${e}__day-line`, C) }),
+        /* @__PURE__ */ S("span", { className: s(`${e}__day-label`, ct), children: J(t.date) }),
+        /* @__PURE__ */ S("span", { className: s(`${e}__day-line`, C) })
+      ]
+    },
+    t.key
+  ) : tt(t), r = v ? Gt(c, X, q, at) : null, $ = r === null ? c : c.slice(r.startIndex, r.endIndex + 1);
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      id: k,
+      "data-testid": U,
+      className: s(e, rt, V),
+      style: { height: typeof _ == "number" ? `${_}px` : _ },
+      children: [
+        /* @__PURE__ */ o(
+          "div",
+          {
+            ref: a,
+            onScroll: K,
+            className: s(`${e}__scroller`, lt),
+            role: "log",
+            "aria-live": "polite",
+            children: [
+              c.length === 0 && /* @__PURE__ */ S("div", { className: s(`${e}__empty`, nt), children: F ?? /* @__PURE__ */ S(E, { variant: "body2", component: "span", children: p.emptyLabel }) }),
+              v && r ? /* @__PURE__ */ S(
+                "div",
+                {
+                  className: `${e}__virtual`,
+                  style: { height: r.totalHeight, position: "relative" },
+                  children: /* @__PURE__ */ S("div", { style: { transform: `translateY(${r.offsetTop}px)` }, children: $.map((t) => B(t)) })
+                }
+              ) : $.map((t) => B(t))
+            ]
+          }
+        ),
+        z && /* @__PURE__ */ S(
+          "button",
+          {
+            type: "button",
+            onClick: Q,
+            className: s(
+              `${e}__new-messages`,
+              _t
+            ),
+            children: p.newMessages
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Ut as MessageList
+};

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

@@ -0,0 +1,74 @@
+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;
+    /** Enable windowed rendering for long conversations (auto when message count exceeds threshold) */
+    virtualized?: 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 l=require("./MessageList.const.cjs"),S=(e,i)=>e.getFullYear()===i.getFullYear()&&e.getMonth()===i.getMonth()&&e.getDate()===i.getDate(),h=e=>`${e.getFullYear()}-${e.getMonth()}-${e.getDate()}`,M=(e,i)=>{const o=new Date;if(S(e,o))return i.today;const r=new Date(o.getTime()-l.MESSAGE_LIST_MS_PER_DAY);return S(e,r)?i.yesterday:e.toLocaleDateString([],{year:"numeric",month:"long",day:"numeric"})},y=e=>e.toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"}),E=(e,i,o,r)=>{const t=[];let u=null;for(const s of e){const m=u===null||!S(u,s.timestamp);r&&m&&t.push({kind:"day",key:`day-${h(s.timestamp)}`,date:s.timestamp});const a=t[t.length-1],g=a!==void 0&&a.kind==="group"&&a.author.id===s.author.id&&s.timestamp.getTime()-a.messages[a.messages.length-1].timestamp.getTime()<=o;a!==void 0&&a.kind==="group"&&g?a.messages.push(s):t.push({kind:"group",key:`group-${s.id}`,author:s.author,isOwn:s.author.id===i,messages:[s]}),u=s.timestamp}return t},_=e=>e.kind==="day"?l.MESSAGE_LIST_DAY_ESTIMATE_PX+l.MESSAGE_LIST_ITEM_GAP_PX:l.MESSAGE_LIST_GROUP_BASE_ESTIMATE_PX+e.messages.length*l.MESSAGE_LIST_BUBBLE_ESTIMATE_PX+l.MESSAGE_LIST_ITEM_GAP_PX,T=(e,i,o,r)=>{const t=e.map(_),u=t.reduce((n,c)=>n+c,0);let s=0,m=0;for(let n=0;n<t.length;n+=1){if(s+t[n]>i){m=Math.max(0,n-r);break}s+=t[n]}let a=0;for(let n=0;n<m;n+=1)a+=t[n];let g=m,d=a;for(;g<t.length&&d<i+o;)d+=t[g],g+=1;return g=Math.min(t.length-1,g+r),{startIndex:m,endIndex:g,offsetTop:a,totalHeight:u}};exports.buildMessageListItems=E;exports.estimateMessageListItemHeight=_;exports.getDayKey=h;exports.getDefaultDayLabel=M;exports.getDefaultTimestamp=y;exports.getMessageListWindow=T;exports.isSameDay=S;

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

@@ -0,0 +1,13 @@
+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[];
+export declare const estimateMessageListItemHeight: (item: MessageListItem) => number;
+export declare const getMessageListWindow: (items: MessageListItem[], scrollTop: number, viewportHeight: number, overscan: number) => {
+    startIndex: number;
+    endIndex: number;
+    offsetTop: number;
+    totalHeight: number;
+};

package/dist/components/MessageList/MessageList.utils.js

@@ -0,0 +1,54 @@
+import { MESSAGE_LIST_DAY_ESTIMATE_PX as c, MESSAGE_LIST_ITEM_GAP_PX as d, MESSAGE_LIST_GROUP_BASE_ESTIMATE_PX as _, MESSAGE_LIST_BUBBLE_ESTIMATE_PX as E, MESSAGE_LIST_MS_PER_DAY as p } from "./MessageList.const.js";
+const u = (e, a) => e.getFullYear() === a.getFullYear() && e.getMonth() === a.getMonth() && e.getDate() === a.getDate(), M = (e) => `${e.getFullYear()}-${e.getMonth()}-${e.getDate()}`, T = (e, a) => {
+  const g = /* @__PURE__ */ new Date();
+  if (u(e, g))
+    return a.today;
+  const r = new Date(g.getTime() - p);
+  return u(e, r) ? a.yesterday : e.toLocaleDateString([], { year: "numeric", month: "long", day: "numeric" });
+}, D = (e) => e.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), I = (e, a, g, r) => {
+  const t = [];
+  let l = null;
+  for (const s of e) {
+    const m = l === null || !u(l, s.timestamp);
+    r && m && t.push({
+      kind: "day",
+      key: `day-${M(s.timestamp)}`,
+      date: s.timestamp
+    });
+    const n = t[t.length - 1], o = n !== void 0 && n.kind === "group" && n.author.id === s.author.id && s.timestamp.getTime() - n.messages[n.messages.length - 1].timestamp.getTime() <= g;
+    n !== void 0 && n.kind === "group" && o ? n.messages.push(s) : t.push({
+      kind: "group",
+      key: `group-${s.id}`,
+      author: s.author,
+      isOwn: s.author.id === a,
+      messages: [s]
+    }), l = s.timestamp;
+  }
+  return t;
+}, f = (e) => e.kind === "day" ? c + d : _ + e.messages.length * E + d, A = (e, a, g, r) => {
+  const t = e.map(f), l = t.reduce((i, S) => i + S, 0);
+  let s = 0, m = 0;
+  for (let i = 0; i < t.length; i += 1) {
+    if (s + t[i] > a) {
+      m = Math.max(0, i - r);
+      break;
+    }
+    s += t[i];
+  }
+  let n = 0;
+  for (let i = 0; i < m; i += 1)
+    n += t[i];
+  let o = m, h = n;
+  for (; o < t.length && h < a + g; )
+    h += t[o], o += 1;
+  return o = Math.min(t.length - 1, o + r), { startIndex: m, endIndex: o, offsetTop: n, totalHeight: l };
+};
+export {
+  I as buildMessageListItems,
+  f as estimateMessageListItemHeight,
+  M as getDayKey,
+  T as getDefaultDayLabel,
+  D as getDefaultTimestamp,
+  A as getMessageListWindow,
+  u as isSameDay
+};

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

@@ -0,0 +1,2 @@
+export { MessageList } from './MessageList';
+export type { MessageListProps, MessageListMessage, MessageListAuthor, MessageListTranslations, MessageListItem, MessageListDayItem, MessageListGroupItem, } from './MessageList.types';

package/dist/components/Progress/Progress.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../utils/cn.cjs");require("react");const m={sm:"bear-h-1.5",md:"bear-h-2.5",lg:"bear-h-4"},f={default:"bear-bg-bear-500",success:"bear-bg-green-500",warning:"bear-bg-amber-500",danger:"bear-bg-red-500",info:"bear-bg-blue-500"},x=({value:b,max:n=100,size:l="md",color:o="default",showLabel:i=!1,labelPosition:d="outside",striped:r=!1,animated:c=!1,indeterminate:a=!1,className:g,testId:u})=>{const s=Math.min(100,Math.max(0,b/n*100));return e.jsxs("div",{className:t.cn("bear-w-full",g),"data-testid":u,children:[i&&d==="outside"&&e.jsxs("div",{className:"bear-flex bear-justify-between bear-mb-1",children:[e.jsx("span",{className:"bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200",children:"Progress"}),e.jsxs("span",{className:"bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200",children:[Math.round(s),"%"]})]}),e.jsx("div",{className:t.cn("bear-w-full bear-bg-gray-200 dark:bear-bg-gray-700 bear-rounded-full bear-overflow-hidden",m[l]),children:e.jsx("div",{className:t.cn("bear-h-full bear-rounded-full bear-transition-all bear-duration-300 bear-ease-out","bear-flex bear-items-center bear-justify-center",f[o],r&&"bear-bg-stripes",c&&"bear-animate-stripes",a&&"bear-animate-indeterminate"),style:{width:a?"50%":`${s}%`,backgroundSize:r?"1rem 1rem":void 0,backgroundImage:r?"linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent)":void 0},role:"progressbar","aria-valuenow":a?void 0:b,"aria-valuemin":0,"aria-valuemax":n,children:i&&d==="inside"&&l==="lg"&&!a&&e.jsxs("span",{className:"bear-text-xs bear-font-medium bear-text-white",children:[Math.round(s),"%"]})})})]})};exports.Progress=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("./Progress.const.cjs"),s=require("../../utils/cn.cjs");require("react");const E=require("../../utils/generateBearId.utils.cjs"),P=require("../../utils/useBearId.cjs"),v=m=>{const{id:_,value:l,max:n=100,bufferValue:d,size:b="md",color:R="default",showLabel:o=!1,label:u=e.PROGRESS_DEFAULT_LABEL,labelPosition:S="outside",striped:i=!1,animated:g=!1,indeterminate:r=!1,className:x,testId:f}=m,O=P.useBearId("Progress"),h=E.resolveBearId(_,O),t=Math.min(100,Math.max(0,l/n*100)),c=d==null?null:Math.min(100,Math.max(t,Math.max(0,d/n*100)));return a.jsxs("div",{id:h,className:s.cn(e.PROGRESS_ROOT_CLASS,"bear-w-full",x),"data-testid":f,children:[o&&S==="outside"&&a.jsxs("div",{className:`${e.PROGRESS_ROOT_CLASS}__label-row bear-flex bear-justify-between bear-mb-1`,children:[a.jsx("span",{className:"bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200",children:u}),a.jsxs("span",{className:"bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200",children:[Math.round(t),"%"]})]}),a.jsxs("div",{className:s.cn(`${e.PROGRESS_ROOT_CLASS}__track`,e.PROGRESS_TRACK_CLASSES,e.PROGRESS_SIZE_CLASSES[b]),children:[c!=null&&!r&&a.jsx("div",{className:s.cn(`${e.PROGRESS_ROOT_CLASS}__buffer`,"bear-absolute bear-inset-y-0 bear-left-0 bear-rounded-full",e.PROGRESS_BUFFER_CLASSES),style:{width:`${c}%`}}),a.jsx("div",{className:s.cn(`${e.PROGRESS_ROOT_CLASS}__bar`,"bear-relative bear-h-full bear-rounded-full bear-transition-all bear-duration-300 bear-ease-out","bear-flex bear-items-center bear-justify-center",e.PROGRESS_COLOR_CLASSES[R],i&&"bear-bg-stripes",g&&"bear-animate-stripes",r&&"bear-animate-indeterminate"),style:{width:r?"50%":`${t}%`,backgroundSize:i?"1rem 1rem":void 0,backgroundImage:i?"linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent)":void 0},role:"progressbar","aria-valuenow":r?void 0:l,"aria-valuemin":0,"aria-valuemax":n,"aria-label":u,children:o&&S==="inside"&&b==="lg"&&!r&&a.jsxs("span",{className:"bear-text-xs bear-font-medium bear-text-white",children:[Math.round(t),"%"]})})]})]})};exports.Progress=v;

package/dist/components/Progress/Progress.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S="Bear-Progress",e={sm:"bear-h-1.5",md:"bear-h-2.5",lg:"bear-h-4"},r={default:"bear-bg-bear-500",success:"bear-bg-green-500",warning:"bear-bg-amber-500",danger:"bear-bg-red-500",info:"bear-bg-blue-500"},b="bear-bg-bear-500/30 dark:bear-bg-bear-400/25",R="bear-w-full bear-bg-gray-200 dark:bear-bg-gray-700 bear-rounded-full bear-overflow-hidden bear-relative",a="Progress";exports.PROGRESS_BUFFER_CLASSES=b;exports.PROGRESS_COLOR_CLASSES=r;exports.PROGRESS_DEFAULT_LABEL=a;exports.PROGRESS_ROOT_CLASS=S;exports.PROGRESS_SIZE_CLASSES=e;exports.PROGRESS_TRACK_CLASSES=R;

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

@@ -1 +1,16 @@
-export declare const P_R_O_G_R_E_S_S_ROOT_CLASS = "Bear-Progress";
+export declare const PROGRESS_ROOT_CLASS = "Bear-Progress";
+export declare const PROGRESS_SIZE_CLASSES: {
+    readonly sm: "bear-h-1.5";
+    readonly md: "bear-h-2.5";
+    readonly lg: "bear-h-4";
+};
+export declare const PROGRESS_COLOR_CLASSES: {
+    readonly default: "bear-bg-bear-500";
+    readonly success: "bear-bg-green-500";
+    readonly warning: "bear-bg-amber-500";
+    readonly danger: "bear-bg-red-500";
+    readonly info: "bear-bg-blue-500";
+};
+export declare const PROGRESS_BUFFER_CLASSES = "bear-bg-bear-500/30 dark:bear-bg-bear-400/25";
+export declare const PROGRESS_TRACK_CLASSES = "bear-w-full bear-bg-gray-200 dark:bear-bg-gray-700 bear-rounded-full bear-overflow-hidden bear-relative";
+export declare const PROGRESS_DEFAULT_LABEL = "Progress";

package/dist/components/Progress/Progress.const.js

@@ -0,0 +1,19 @@
+const r = "Bear-Progress", e = {
+  sm: "bear-h-1.5",
+  md: "bear-h-2.5",
+  lg: "bear-h-4"
+}, b = {
+  default: "bear-bg-bear-500",
+  success: "bear-bg-green-500",
+  warning: "bear-bg-amber-500",
+  danger: "bear-bg-red-500",
+  info: "bear-bg-blue-500"
+}, a = "bear-bg-bear-500/30 dark:bear-bg-bear-400/25", S = "bear-w-full bear-bg-gray-200 dark:bear-bg-gray-700 bear-rounded-full bear-overflow-hidden bear-relative", g = "Progress";
+export {
+  a as PROGRESS_BUFFER_CLASSES,
+  b as PROGRESS_COLOR_CLASSES,
+  g as PROGRESS_DEFAULT_LABEL,
+  r as PROGRESS_ROOT_CLASS,
+  e as PROGRESS_SIZE_CLASSES,
+  S as PROGRESS_TRACK_CLASSES
+};

package/dist/components/Progress/Progress.d.ts

@@ -1,13 +1,3 @@
 import { FC } from 'react';
 import { ProgressProps } from './Progress.types';
-/**
- * Progress - Progress bar with multiple variants
- *
- * @example
- * ```tsx
- * <Progress value={75} showLabel />
- * <Progress value={50} color="success" striped animated />
- * <Progress indeterminate />
- * ```
- */
 export declare const Progress: FC<ProgressProps>;