@forgedevstack/bear 1.2.6 → 1.2.8

package/dist/components/MessageList/MessageList.js

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

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

@@ -55,6 +55,8 @@ export interface MessageListProps {
     autoScroll?: boolean;
     /** Enable windowed rendering for long conversations (auto when message count exceeds threshold) */
     virtualized?: boolean;
+    /** Extra items rendered above/below the viewport when virtualized */
+    overscan?: number;
     /** Height of the scrollable area */
     height?: number | string;
     /** Custom message content renderer */

package/dist/components/Modal/Modal.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),S=require("react"),D=require("react-dom"),o=require("../../utils/cn.cjs"),j=require("../Icon/icons/navigation.cjs"),a=require("./Modal.const.cjs"),x=_=>{const{isOpen:r,onClose:l,title:s,children:m,size:b="md",showCloseButton:t=!0,closeOnEscape:E=!0,disableEscapeKeyDown:C=!1,lockBodyScroll:L=!0,cancelPreventScroll:M=!1,closeOnBackdrop:A=!0,hideBackdrop:f=!1,keepMounted:O=!1,isCancelBackgroundClick:n,className:v,footer:d,testId:B,id:h}=_,i=L&&!M,k=n!==void 0?n:A,u=E&&!C,c=S.useCallback(p=>{u&&p.key==="Escape"&&l()},[u,l]);if(S.useEffect(()=>{if(r)return document.addEventListener("keydown",c),i&&(document.body.style.overflow="hidden"),()=>{document.removeEventListener("keydown",c),document.body.style.overflow=""}},[r,c,i]),!r&&!O)return null;const y=e.jsxs("div",{className:"Bear-Modal bear-fixed bear-inset-0 bear-z-[11000] bear-flex bear-items-center bear-justify-center bear-p-4","data-testid":B,id:h,children:[!f&&e.jsx("div",{className:o.cn("Bear-Modal__backdrop",a.MODAL_BACKDROP_CLASSES),onClick:k?l:void 0,"aria-hidden":"true"}),e.jsxs("div",{role:"dialog","aria-modal":"true","aria-labelledby":s?"modal-title":void 0,className:o.cn("Bear-Modal__container",a.MODAL_CONTAINER_CLASSES,a.MODAL_SIZE_CLASSES[b],v),children:[(s||t)&&e.jsxs("div",{className:o.cn("Bear-Modal__header",a.MODAL_HEADER_CLASSES),children:[s&&e.jsx("h2",{id:"modal-title",className:o.cn("Bear-Modal__title",a.MODAL_TITLE_CLASSES),children:s}),t&&e.jsx("button",{onClick:l,className:o.cn("Bear-Modal__close",a.MODAL_CLOSE_CLASSES),"aria-label":"Close modal",children:e.jsx(j.CloseIcon,{className:"bear-w-5 bear-h-5"})})]}),e.jsx("div",{className:o.cn("Bear-Modal__body",a.MODAL_BODY_CLASSES),children:m}),d&&e.jsx("div",{className:o.cn("Bear-Modal__footer",a.MODAL_FOOTER_CLASSES),children:d})]})]});return D.createPortal(y,document.body)};exports.Modal=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("react"),N=require("react-dom"),o=require("../../utils/cn.cjs"),D=require("../../utils/generateBearId.utils.cjs"),I=require("../../utils/useBearId.cjs"),q=require("../Icon/icons/navigation.cjs"),g=require("../Backdrop/Backdrop.cjs"),a=require("./Modal.const.cjs"),w=b=>{const{isOpen:r,onClose:s,title:l,children:B,size:E="md",showCloseButton:n=!0,closeOnEscape:M=!0,disableEscapeKeyDown:C=!1,lockBodyScroll:L=!0,cancelPreventScroll:f=!1,closeOnBackdrop:k=!0,hideBackdrop:v=!1,keepMounted:d=!1,isCancelBackgroundClick:i,className:p,footer:u,testId:y,id:A}=b,O=I.useBearId("Modal"),c=D.resolveBearId(A,O),_=L&&!f,h=i!==void 0?i:k,S=M&&!C,t=m.useCallback(x=>{S&&x.key==="Escape"&&s()},[S,s]);if(m.useEffect(()=>{if(r)return document.addEventListener("keydown",t),_&&(document.body.style.overflow="hidden"),()=>{document.removeEventListener("keydown",t),document.body.style.overflow=""}},[r,t,_]),!r&&!d)return null;const j=e.jsxs("div",{className:"Bear-Modal bear-fixed bear-inset-0 bear-z-[11000] bear-flex bear-items-center bear-justify-center bear-p-4","data-testid":y,id:c,children:[!v&&e.jsx(g.Backdrop,{open:r,keepMounted:d,blur:!0,className:"Bear-Modal__backdrop",onClick:h?()=>s():void 0}),e.jsxs("div",{role:"dialog","aria-modal":"true","aria-labelledby":l?`${c}-title`:void 0,className:o.cn("Bear-Modal__container",a.MODAL_CONTAINER_CLASSES,a.MODAL_SIZE_CLASSES[E],p),children:[(l||n)&&e.jsxs("div",{className:o.cn("Bear-Modal__header",a.MODAL_HEADER_CLASSES),children:[l&&e.jsx("h2",{id:`${c}-title`,className:o.cn("Bear-Modal__title",a.MODAL_TITLE_CLASSES),children:l}),n&&e.jsx("button",{onClick:s,className:o.cn("Bear-Modal__close",a.MODAL_CLOSE_CLASSES),"aria-label":"Close modal",children:e.jsx(q.CloseIcon,{className:"bear-w-5 bear-h-5"})})]}),e.jsx("div",{className:o.cn("Bear-Modal__body",a.MODAL_BODY_CLASSES),children:B}),u&&e.jsx("div",{className:o.cn("Bear-Modal__footer",a.MODAL_FOOTER_CLASSES),children:u})]})]});return N.createPortal(j,document.body)};exports.Modal=w;

package/dist/components/Modal/Modal.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r={sm:"bear-max-w-sm",md:"bear-max-w-md",lg:"bear-max-w-lg",xl:"bear-max-w-xl",full:"bear-max-w-full bear-mx-4"},e="bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity",a="bear-relative bear-w-full bear-max-h-[calc(100vh-2rem)] bear-overflow-y-auto bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-2xl bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-transform bear-transition-all bear-animate-in bear-fade-in bear-zoom-in-95",b="bear-flex bear-items-center bear-justify-between bear-px-6 bear-py-4 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700",t="bear-text-lg bear-font-semibold bear-text-gray-900 dark:bear-text-white",S="bear-p-1 bear-rounded-lg bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-white hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700 bear-transition-colors",o="bear-px-6 bear-py-4 bear-text-gray-600 dark:bear-text-gray-300",A="bear-flex bear-items-center bear-justify-end bear-gap-3 bear-px-6 bear-py-4 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700";exports.MODAL_BACKDROP_CLASSES=e;exports.MODAL_BODY_CLASSES=o;exports.MODAL_CLOSE_CLASSES=S;exports.MODAL_CONTAINER_CLASSES=a;exports.MODAL_FOOTER_CLASSES=A;exports.MODAL_HEADER_CLASSES=b;exports.MODAL_SIZE_CLASSES=r;exports.MODAL_TITLE_CLASSES=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r={sm:"bear-max-w-sm",md:"bear-max-w-md",lg:"bear-max-w-lg",xl:"bear-max-w-xl",full:"bear-max-w-full bear-mx-4"},e="bear-relative bear-w-full bear-max-h-[calc(100vh-2rem)] bear-overflow-y-auto bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-2xl bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-transform bear-transition-all bear-animate-in bear-fade-in bear-zoom-in-95",a="bear-flex bear-items-center bear-justify-between bear-px-6 bear-py-4 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700",b="bear-text-lg bear-font-semibold bear-text-gray-900 dark:bear-text-white",t="bear-p-1 bear-rounded-lg bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-white hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700 bear-transition-colors",S="bear-px-6 bear-py-4 bear-text-gray-600 dark:bear-text-gray-300",o="bear-flex bear-items-center bear-justify-end bear-gap-3 bear-px-6 bear-py-4 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700";exports.MODAL_BODY_CLASSES=S;exports.MODAL_CLOSE_CLASSES=t;exports.MODAL_CONTAINER_CLASSES=e;exports.MODAL_FOOTER_CLASSES=o;exports.MODAL_HEADER_CLASSES=a;exports.MODAL_SIZE_CLASSES=r;exports.MODAL_TITLE_CLASSES=b;

package/dist/components/Modal/Modal.const.js

@@ -4,14 +4,13 @@ const r = {
   lg: "bear-max-w-lg",
   xl: "bear-max-w-xl",
   full: "bear-max-w-full bear-mx-4"
-}, e = "bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity", a = "bear-relative bear-w-full bear-max-h-[calc(100vh-2rem)] bear-overflow-y-auto bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-2xl bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-transform bear-transition-all bear-animate-in bear-fade-in bear-zoom-in-95", b = "bear-flex bear-items-center bear-justify-between bear-px-6 bear-py-4 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700", t = "bear-text-lg bear-font-semibold bear-text-gray-900 dark:bear-text-white", o = "bear-p-1 bear-rounded-lg bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-white hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700 bear-transition-colors", n = "bear-px-6 bear-py-4 bear-text-gray-600 dark:bear-text-gray-300", d = "bear-flex bear-items-center bear-justify-end bear-gap-3 bear-px-6 bear-py-4 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700";
+}, e = "bear-relative bear-w-full bear-max-h-[calc(100vh-2rem)] bear-overflow-y-auto bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-2xl bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-transform bear-transition-all bear-animate-in bear-fade-in bear-zoom-in-95", a = "bear-flex bear-items-center bear-justify-between bear-px-6 bear-py-4 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700", b = "bear-text-lg bear-font-semibold bear-text-gray-900 dark:bear-text-white", t = "bear-p-1 bear-rounded-lg bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-white hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700 bear-transition-colors", o = "bear-px-6 bear-py-4 bear-text-gray-600 dark:bear-text-gray-300", n = "bear-flex bear-items-center bear-justify-end bear-gap-3 bear-px-6 bear-py-4 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700";
 export {
-  e as MODAL_BACKDROP_CLASSES,
-  n as MODAL_BODY_CLASSES,
-  o as MODAL_CLOSE_CLASSES,
-  a as MODAL_CONTAINER_CLASSES,
-  d as MODAL_FOOTER_CLASSES,
-  b as MODAL_HEADER_CLASSES,
+  o as MODAL_BODY_CLASSES,
+  t as MODAL_CLOSE_CLASSES,
+  e as MODAL_CONTAINER_CLASSES,
+  n as MODAL_FOOTER_CLASSES,
+  a as MODAL_HEADER_CLASSES,
   r as MODAL_SIZE_CLASSES,
-  t as MODAL_TITLE_CLASSES
+  b as MODAL_TITLE_CLASSES
 };

package/dist/components/Modal/Modal.js

@@ -1,98 +1,103 @@
-import { jsxs as t, jsx as o } from "react/jsx-runtime";
-import { useCallback as y, useEffect as D } from "react";
-import { createPortal as N } from "react-dom";
-import { cn as e } from "../../utils/cn.js";
-import { CloseIcon as w } from "../Icon/icons/navigation.js";
-import { MODAL_BACKDROP_CLASSES as x, MODAL_TITLE_CLASSES as I, MODAL_CLOSE_CLASSES as R, MODAL_HEADER_CLASSES as T, MODAL_BODY_CLASSES as j, MODAL_FOOTER_CLASSES as P, MODAL_SIZE_CLASSES as g, MODAL_CONTAINER_CLASSES as z } from "./Modal.const.js";
-const G = (_) => {
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { useCallback as D, useEffect as I } from "react";
+import { createPortal as w } from "react-dom";
+import { cn as o } from "../../utils/cn.js";
+import { resolveBearId as x } from "../../utils/generateBearId.utils.js";
+import { useBearId as T } from "../../utils/useBearId.js";
+import { CloseIcon as g } from "../Icon/icons/navigation.js";
+import { Backdrop as j } from "../Backdrop/Backdrop.js";
+import { MODAL_TITLE_CLASSES as R, MODAL_CLOSE_CLASSES as z, MODAL_HEADER_CLASSES as P, MODAL_BODY_CLASSES as $, MODAL_FOOTER_CLASSES as F, MODAL_SIZE_CLASSES as H, MODAL_CONTAINER_CLASSES as K } from "./Modal.const.js";
+const X = (u) => {
   const {
-    isOpen: r,
-    onClose: a,
+    isOpen: a,
+    onClose: r,
     title: l,
     children: S,
-    size: u = "md",
-    showCloseButton: s = !0,
-    closeOnEscape: f = !0,
+    size: p = "md",
+    showCloseButton: c = !0,
+    closeOnEscape: b = !0,
     disableEscapeKeyDown: E = !1,
     lockBodyScroll: C = !0,
-    cancelPreventScroll: b = !1,
+    cancelPreventScroll: B = !1,
     closeOnBackdrop: L = !0,
-    hideBackdrop: p = !1,
-    keepMounted: A = !1,
-    isCancelBackgroundClick: c,
-    className: M,
-    footer: n,
-    testId: B,
-    id: O
-  } = _, i = C && !b, h = c !== void 0 ? c : L, m = f && !E, d = y(
-    (v) => {
-      m && v.key === "Escape" && a();
+    hideBackdrop: M = !1,
+    keepMounted: n = !1,
+    isCancelBackgroundClick: i,
+    className: k,
+    footer: m,
+    testId: A,
+    id: h
+  } = u, v = T("Modal"), d = x(h, v), _ = C && !B, O = i !== void 0 ? i : L, f = b && !E, t = D(
+    (N) => {
+      f && N.key === "Escape" && r();
     },
-    [m, a]
+    [f, r]
   );
-  if (D(() => {
-    if (r)
-      return document.addEventListener("keydown", d), i && (document.body.style.overflow = "hidden"), () => {
-        document.removeEventListener("keydown", d), document.body.style.overflow = "";
+  if (I(() => {
+    if (a)
+      return document.addEventListener("keydown", t), _ && (document.body.style.overflow = "hidden"), () => {
+        document.removeEventListener("keydown", t), document.body.style.overflow = "";
       };
-  }, [r, d, i]), !r && !A) return null;
-  const k = /* @__PURE__ */ t(
+  }, [a, t, _]), !a && !n) return null;
+  const y = /* @__PURE__ */ s(
     "div",
     {
       className: "Bear-Modal bear-fixed bear-inset-0 bear-z-[11000] bear-flex bear-items-center bear-justify-center bear-p-4",
-      "data-testid": B,
-      id: O,
+      "data-testid": A,
+      id: d,
       children: [
-        !p && /* @__PURE__ */ o(
-          "div",
+        !M && /* @__PURE__ */ e(
+          j,
           {
-            className: e("Bear-Modal__backdrop", x),
-            onClick: h ? a : void 0,
-            "aria-hidden": "true"
+            open: a,
+            keepMounted: n,
+            blur: !0,
+            className: "Bear-Modal__backdrop",
+            onClick: O ? () => r() : void 0
           }
         ),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ s(
           "div",
           {
             role: "dialog",
             "aria-modal": "true",
-            "aria-labelledby": l ? "modal-title" : void 0,
-            className: e(
+            "aria-labelledby": l ? `${d}-title` : void 0,
+            className: o(
               "Bear-Modal__container",
-              z,
-              g[u],
-              M
+              K,
+              H[p],
+              k
             ),
             children: [
-              (l || s) && /* @__PURE__ */ t("div", { className: e("Bear-Modal__header", T), children: [
-                l && /* @__PURE__ */ o(
+              (l || c) && /* @__PURE__ */ s("div", { className: o("Bear-Modal__header", P), children: [
+                l && /* @__PURE__ */ e(
                   "h2",
                   {
-                    id: "modal-title",
-                    className: e("Bear-Modal__title", I),
+                    id: `${d}-title`,
+                    className: o("Bear-Modal__title", R),
                     children: l
                   }
                 ),
-                s && /* @__PURE__ */ o(
+                c && /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: a,
-                    className: e("Bear-Modal__close", R),
+                    onClick: r,
+                    className: o("Bear-Modal__close", z),
                     "aria-label": "Close modal",
-                    children: /* @__PURE__ */ o(w, { className: "bear-w-5 bear-h-5" })
+                    children: /* @__PURE__ */ e(g, { className: "bear-w-5 bear-h-5" })
                   }
                 )
               ] }),
-              /* @__PURE__ */ o("div", { className: e("Bear-Modal__body", j), children: S }),
-              n && /* @__PURE__ */ o("div", { className: e("Bear-Modal__footer", P), children: n })
+              /* @__PURE__ */ e("div", { className: o("Bear-Modal__body", $), children: S }),
+              m && /* @__PURE__ */ e("div", { className: o("Bear-Modal__footer", F), children: m })
             ]
           }
         )
       ]
     }
   );
-  return N(k, document.body);
+  return w(y, document.body);
 };
 export {
-  G as Modal
+  X as Modal
 };

package/dist/components/PageHeader/PageHeader.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),e=require("./PageHeader.const.cjs"),E=require("../Typography/Typography.cjs"),a=require("../Flex/Flex.cjs"),s=require("../../utils/cn.cjs");require("react");const R=require("../../utils/generateBearId.utils.cjs"),u=require("../../utils/useBearId.cjs"),P=n=>{const{id:t,testId:A,title:i,description:_,breadcrumbs:o,actions:c,className:S}=n,d=u.useBearId("PageHeader"),l=R.resolveBearId(t,d);return r.jsxs("header",{id:l,"data-testid":A,className:s.cn(e.PAGE_HEADER_ROOT_CLASS,e.PAGE_HEADER_BASE_CLASSES,S),children:[o,r.jsxs(a.Flex,{className:s.cn(`${e.PAGE_HEADER_ROOT_CLASS}__row`,e.PAGE_HEADER_ROW_CLASSES),children:[r.jsxs(a.Flex,{direction:"column",gap:1,className:`${e.PAGE_HEADER_ROOT_CLASS}__copy`,children:[r.jsx(E.Typography,{component:"h1",className:s.cn(`${e.PAGE_HEADER_ROOT_CLASS}__title`,e.PAGE_HEADER_TITLE_CLASSES),children:i}),_&&r.jsx(E.Typography,{component:"p",className:s.cn(`${e.PAGE_HEADER_ROOT_CLASS}__description`,e.PAGE_HEADER_DESCRIPTION_CLASSES),children:_})]}),c&&r.jsx("div",{className:s.cn(`${e.PAGE_HEADER_ROOT_CLASS}__actions`,e.PAGE_HEADER_ACTIONS_CLASSES),children:c})]})]})};exports.PageHeader=P;

package/dist/components/PageHeader/PageHeader.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="Bear-PageHeader",E="bear-flex bear-flex-col bear-gap-3 bear-w-full",S="bear-flex bear-flex-col sm:bear-flex-row sm:bear-items-start sm:bear-justify-between bear-gap-3",A="bear-text-2xl bear-font-semibold bear-text-[var(--bear-text-primary)]",a="bear-text-sm bear-text-[var(--bear-text-secondary)] bear-max-w-2xl",r="bear-flex bear-flex-wrap bear-items-center bear-gap-2";exports.PAGE_HEADER_ACTIONS_CLASSES=r;exports.PAGE_HEADER_BASE_CLASSES=E;exports.PAGE_HEADER_DESCRIPTION_CLASSES=a;exports.PAGE_HEADER_ROOT_CLASS=e;exports.PAGE_HEADER_ROW_CLASSES=S;exports.PAGE_HEADER_TITLE_CLASSES=A;

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

@@ -0,0 +1,6 @@
+export declare const PAGE_HEADER_ROOT_CLASS = "Bear-PageHeader";
+export declare const PAGE_HEADER_BASE_CLASSES = "bear-flex bear-flex-col bear-gap-3 bear-w-full";
+export declare const PAGE_HEADER_ROW_CLASSES = "bear-flex bear-flex-col sm:bear-flex-row sm:bear-items-start sm:bear-justify-between bear-gap-3";
+export declare const PAGE_HEADER_TITLE_CLASSES = "bear-text-2xl bear-font-semibold bear-text-[var(--bear-text-primary)]";
+export declare const PAGE_HEADER_DESCRIPTION_CLASSES = "bear-text-sm bear-text-[var(--bear-text-secondary)] bear-max-w-2xl";
+export declare const PAGE_HEADER_ACTIONS_CLASSES = "bear-flex bear-flex-wrap bear-items-center bear-gap-2";

package/dist/components/PageHeader/PageHeader.const.js

@@ -0,0 +1,9 @@
+const e = "Bear-PageHeader", a = "bear-flex bear-flex-col bear-gap-3 bear-w-full", r = "bear-flex bear-flex-col sm:bear-flex-row sm:bear-items-start sm:bear-justify-between bear-gap-3", t = "bear-text-2xl bear-font-semibold bear-text-[var(--bear-text-primary)]", E = "bear-text-sm bear-text-[var(--bear-text-secondary)] bear-max-w-2xl", b = "bear-flex bear-flex-wrap bear-items-center bear-gap-2";
+export {
+  b as PAGE_HEADER_ACTIONS_CLASSES,
+  a as PAGE_HEADER_BASE_CLASSES,
+  E as PAGE_HEADER_DESCRIPTION_CLASSES,
+  e as PAGE_HEADER_ROOT_CLASS,
+  r as PAGE_HEADER_ROW_CLASSES,
+  t as PAGE_HEADER_TITLE_CLASSES
+};

package/dist/components/PageHeader/PageHeader.d.ts

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

package/dist/components/PageHeader/PageHeader.js

@@ -0,0 +1,57 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { PAGE_HEADER_ROOT_CLASS as e, PAGE_HEADER_TITLE_CLASSES as p, PAGE_HEADER_DESCRIPTION_CLASSES as h, PAGE_HEADER_ACTIONS_CLASSES as I, PAGE_HEADER_ROW_CLASSES as N, PAGE_HEADER_BASE_CLASSES as P } from "./PageHeader.const.js";
+import { Typography as c } from "../Typography/Typography.js";
+import { Flex as i } from "../Flex/Flex.js";
+import { cn as r } from "../../utils/cn.js";
+import "react";
+import { resolveBearId as R } from "../../utils/generateBearId.utils.js";
+import { useBearId as C } from "../../utils/useBearId.js";
+const $ = (_) => {
+  const {
+    id: m,
+    testId: E,
+    title: d,
+    description: s,
+    breadcrumbs: n,
+    actions: a,
+    className: A
+  } = _, S = C("PageHeader"), l = R(m, S);
+  return /* @__PURE__ */ o(
+    "header",
+    {
+      id: l,
+      "data-testid": E,
+      className: r(e, P, A),
+      children: [
+        n,
+        /* @__PURE__ */ o(i, { className: r(`${e}__row`, N), children: [
+          /* @__PURE__ */ o(i, { direction: "column", gap: 1, className: `${e}__copy`, children: [
+            /* @__PURE__ */ t(
+              c,
+              {
+                component: "h1",
+                className: r(`${e}__title`, p),
+                children: d
+              }
+            ),
+            s && /* @__PURE__ */ t(
+              c,
+              {
+                component: "p",
+                className: r(
+                  `${e}__description`,
+                  h
+                ),
+                children: s
+              }
+            )
+          ] }),
+          a && /* @__PURE__ */ t("div", { className: r(`${e}__actions`, I), children: a })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  $ as PageHeader
+};

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

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export interface PageHeaderProps {
+    id?: string;
+    testId?: string;
+    title: ReactNode;
+    description?: ReactNode;
+    breadcrumbs?: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { PageHeader } from './PageHeader';
+export type { PageHeaderProps } from './PageHeader.types';