@forgedevstack/bear 1.2.5 → 1.2.6

package/dist/components/MessageList/MessageList.js

@@ -1,119 +1,126 @@
-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
+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 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);
+  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);
   };
-  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);
+  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;
       }
-      m(!0);
+      I(!0);
     }
-  }, [a, u]);
-  const x = () => {
-    O(!0), m(!1), A == null || A();
-  }, F = (S) => /* @__PURE__ */ _(
+  }, [l, M]);
+  const Q = () => {
+    R(!0), I(!1), m == null || m();
+  }, tt = (t) => /* @__PURE__ */ o(
     "div",
     {
-      className: e(
-        `${t}__group`,
-        rS,
-        S.isOwn && lS
+      className: s(
+        `${e}__group`,
+        ut,
+        t.isOwn && pt
       ),
       children: [
-        b && !S.isOwn && /* @__PURE__ */ n(
-          z,
+        W && !t.isOwn && /* @__PURE__ */ S(
+          et,
           {
-            src: S.author.avatar,
-            initials: S.author.name[0],
+            src: t.author.avatar,
+            initials: t.author.name[0],
             size: "sm",
             className: "bear-flex-shrink-0"
           }
         ),
-        /* @__PURE__ */ _(
+        /* @__PURE__ */ o(
           "div",
           {
-            className: e(
-              `${t}__group-body`,
-              aS,
-              S.isOwn && _S
+            className: s(
+              `${e}__group-body`,
+              It,
+              t.isOwn && Tt
             ),
             children: [
-              !S.isOwn && /* @__PURE__ */ _("div", { className: e(`${t}__meta`, eS), children: [
-                /* @__PURE__ */ n(
-                  r,
+              !t.isOwn && /* @__PURE__ */ o("div", { className: s(`${e}__meta`, dt), children: [
+                /* @__PURE__ */ S(
+                  E,
                   {
                     variant: "caption",
                     component: "span",
-                    className: e(`${t}__author`, tS),
-                    children: S.author.name
+                    className: s(`${e}__author`, At),
+                    children: t.author.name
                   }
                 ),
-                h && /* @__PURE__ */ n(
-                  r,
+                G && /* @__PURE__ */ S(
+                  E,
                   {
                     variant: "caption",
                     component: "span",
-                    className: e(`${t}__timestamp`, f),
-                    children: M(S.messages[0].timestamp)
+                    className: s(`${e}__timestamp`, H),
+                    children: N(t.messages[0].timestamp)
                   }
                 )
               ] }),
-              S.messages.map((s) => /* @__PURE__ */ n(
+              t.messages.map((n) => /* @__PURE__ */ S(
                 "div",
                 {
-                  className: e(
-                    `${t}__bubble`,
-                    nS,
-                    S.isOwn && `${t}__bubble--own`,
-                    S.isOwn && sS
+                  className: s(
+                    `${e}__bubble`,
+                    mt,
+                    t.isOwn && `${e}__bubble--own`,
+                    t.isOwn && Lt
                   ),
-                  children: (o == null ? void 0 : o(s)) ?? s.content
+                  children: (A == null ? void 0 : A(n)) ?? n.content
                 },
-                s.id
+                n.id
               )),
-              S.isOwn && h && /* @__PURE__ */ n(
-                r,
+              t.isOwn && G && /* @__PURE__ */ S(
+                E,
                 {
                   variant: "caption",
                   component: "span",
-                  className: e(`${t}__timestamp`, f),
-                  children: M(S.messages[S.messages.length - 1].timestamp)
+                  className: s(`${e}__timestamp`, H),
+                  children: N(t.messages[t.messages.length - 1].timestamp)
                 }
               )
             ]
@@ -121,56 +128,61 @@ const OS = ({
         )
       ]
     },
-    S.key
-  );
-  return /* @__PURE__ */ _(
+    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: w,
-      "data-testid": R,
-      className: e(t, g, H),
-      style: { height: typeof c == "number" ? `${c}px` : c },
+      id: k,
+      "data-testid": U,
+      className: s(e, rt, V),
+      style: { height: typeof _ == "number" ? `${_}px` : _ },
       children: [
-        /* @__PURE__ */ _(
+        /* @__PURE__ */ o(
           "div",
           {
-            ref: L,
-            onScroll: Y,
-            className: e(`${t}__scroller`, V),
+            ref: a,
+            onScroll: K,
+            className: s(`${e}__scroller`, lt),
             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)
-              )
+              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))
             ]
           }
         ),
-        D && /* @__PURE__ */ n(
+        z && /* @__PURE__ */ S(
           "button",
           {
             type: "button",
-            onClick: x,
-            className: e(
-              `${t}__new-messages`,
-              Z
+            onClick: Q,
+            className: s(
+              `${e}__new-messages`,
+              _t
             ),
-            children: T.newMessages
+            children: p.newMessages
           }
         )
       ]
@@ -178,5 +190,5 @@ const OS = ({
   );
 };
 export {
-  OS as MessageList
+  Ut as MessageList
 };

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

@@ -53,6 +53,8 @@ export interface MessageListProps {
     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 */

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

@@ -1 +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;
+"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

@@ -4,3 +4,10 @@ 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

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

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>;