@forgedevstack/bear 1.0.7 → 1.0.9

package/dist/components/Carousel/Carousel.js

@@ -1,122 +1,269 @@
-import { jsxs as j, jsx as a, Fragment as D } from "react/jsx-runtime";
-import { useState as o, useRef as F, Children as P, useEffect as _ } from "react";
+import { jsxs as M, jsx as t, Fragment as ce } from "react/jsx-runtime";
+import { useState as n, useRef as X, Children as de, useCallback as c, useEffect as ue } from "react";
 import { cn as b } from "../../utils/cn.js";
-const K = ({
-  children: I,
-  autoPlay: l = 0,
-  showDots: L = !0,
-  showArrows: T = !0,
-  loop: i = !0,
-  slidesToShow: n = 1,
-  gap: c = 16,
-  pauseOnHover: g = !0,
-  onSlideChange: d,
-  className: $,
-  testId: E
+import { DEFAULT_TRANSITION_DURATION as he, MIN_SWIPE_DISTANCE as w, PROGRESS_BAR_HEIGHT as fe, DEFAULT_ACTIVE_COLOR as ge, ARROW_BUTTON_SIZE as N, DEFAULT_THUMBNAIL_SIZE as me } from "./Carousel.const.js";
+const we = ({
+  children: F,
+  autoPlay: m = 0,
+  showDots: P = !0,
+  showArrows: H = !0,
+  loop: y = !0,
+  slidesToShow: d = 1,
+  gap: I = 16,
+  pauseOnHover: _ = !0,
+  onSlideChange: p,
+  transition: v = "slide",
+  transitionDuration: u = he,
+  indicator: k = "dots",
+  thumbnails: L,
+  thumbnailSize: R = me,
+  keyboard: T = !0,
+  draggable: j = !0,
+  showProgress: K = !1,
+  showCounter: V = !1,
+  activeColor: h = ge,
+  className: Y,
+  style: Z,
+  testId: q
 }) => {
-  const [t, C] = o(0), [m, k] = o(!1), [v, R] = o(null), [y, x] = o(null), W = F(null), p = P.toArray(I), u = p.length, s = Math.max(0, u - n);
-  _(() => {
-    if (l > 0 && !m) {
-      const e = setInterval(() => {
-        f();
-      }, l);
-      return () => clearInterval(e);
+  const [a, J] = n(0), [z, C] = n(!1), [U, Q] = n(null), [D, S] = n(null), [G, O] = n(!1), ee = X(null), $ = X(null), x = de.toArray(F), f = x.length, s = Math.max(0, f - d), o = c(
+    (r) => {
+      if (G) return;
+      let e = r;
+      y ? r < 0 ? e = s : r > s && (e = 0) : e = Math.max(0, Math.min(s, r)), O(!0), J(e), p == null || p(e), setTimeout(() => O(!1), u);
+    },
+    [G, y, s, p, u]
+  ), l = c(() => o(a + 1), [o, a]), i = c(() => o(a - 1), [o, a]);
+  ue(() => {
+    if (m > 0 && !z)
+      return $.current = setInterval(l, m), () => {
+        $.current && clearInterval($.current);
+      };
+  }, [m, z, l]);
+  const re = c(
+    (r) => {
+      T && (r.key === "ArrowLeft" ? i() : r.key === "ArrowRight" && l());
+    },
+    [T, i, l]
+  ), ae = (r) => {
+    S(null), Q(r.targetTouches[0].clientX);
+  }, te = (r) => {
+    S(r.targetTouches[0].clientX);
+  }, se = () => {
+    if (!U || !D) return;
+    const r = U - D;
+    r > w ? l() : r < -w && i();
+  }, [E, A] = n(!1), [B, oe] = n(0), le = c(
+    (r) => {
+      j && (A(!0), oe(r.clientX));
+    },
+    [j]
+  ), ne = c(
+    (r) => {
+      if (!E) return;
+      A(!1);
+      const e = B - r.clientX;
+      e > w ? l() : e < -w && i();
+    },
+    [E, B, l, i]
+  ), W = `calc((100% - ${I * (d - 1)}px) / ${d})`, be = (r) => {
+    const e = r === a, g = `${u}ms`;
+    switch (v) {
+      case "fade":
+        return {
+          position: "absolute",
+          inset: 0,
+          opacity: e ? 1 : 0,
+          transition: `opacity ${g} ease-in-out`,
+          zIndex: e ? 1 : 0,
+          pointerEvents: e ? "auto" : "none"
+        };
+      case "zoom":
+        return {
+          position: "absolute",
+          inset: 0,
+          opacity: e ? 1 : 0,
+          transform: e ? "scale(1)" : "scale(0.85)",
+          transition: `opacity ${g} ease, transform ${g} ease`,
+          zIndex: e ? 1 : 0,
+          pointerEvents: e ? "auto" : "none"
+        };
+      case "flip":
+        return {
+          position: "absolute",
+          inset: 0,
+          opacity: e ? 1 : 0,
+          transform: e ? "rotateY(0deg)" : "rotateY(90deg)",
+          transition: `opacity ${g} ease, transform ${g} ease`,
+          zIndex: e ? 1 : 0,
+          pointerEvents: e ? "auto" : "none",
+          backfaceVisibility: "hidden"
+        };
+      case "slide":
+      default:
+        return {};
     }
-  }, [l, m, t]);
-  const h = (e) => {
-    let r = e;
-    i ? e < 0 ? r = s : e > s && (r = 0) : r = Math.max(0, Math.min(s, e)), C(r), d == null || d(r);
-  }, f = () => h(t + 1), w = () => h(t - 1), N = 50, X = (e) => {
-    x(null), R(e.targetTouches[0].clientX);
-  }, z = (e) => {
-    x(e.targetTouches[0].clientX);
-  }, A = () => {
-    if (!v || !y) return;
-    const e = v - y, r = e > N, B = e < -N;
-    r ? f() : B && w();
-  }, M = `calc((100% - ${c * (n - 1)}px) / ${n})`;
-  return /* @__PURE__ */ j(
+  }, ie = v === "fade" || v === "zoom" || v === "flip";
+  return /* @__PURE__ */ M(
     "div",
     {
-      ref: W,
-      className: b("bear-relative bear-overflow-hidden", $),
-      onMouseEnter: () => g && k(!0),
-      onMouseLeave: () => g && k(!1),
-      onTouchStart: X,
-      onTouchMove: z,
-      onTouchEnd: A,
-      "data-testid": E,
+      ref: ee,
+      className: b("bear-relative bear-overflow-hidden bear-outline-none", Y),
+      style: Z,
+      onMouseEnter: () => _ && C(!0),
+      onMouseLeave: () => {
+        _ && C(!1), E && A(!1);
+      },
+      onTouchStart: ae,
+      onTouchMove: te,
+      onTouchEnd: se,
+      onMouseDown: le,
+      onMouseUp: ne,
+      onKeyDown: re,
+      tabIndex: T ? 0 : void 0,
+      "data-testid": q,
+      role: "region",
+      "aria-label": "Carousel",
+      "aria-roledescription": "carousel",
       children: [
-        /* @__PURE__ */ a(
+        K && m > 0 && /* @__PURE__ */ t(
           "div",
           {
-            className: "bear-flex bear-transition-transform bear-duration-500 bear-ease-out",
-            style: {
-              gap: `${c}px`,
-              transform: `translateX(calc(-${t} * (${M} + ${c}px)))`
-            },
-            children: p.map((e, r) => /* @__PURE__ */ a(
+            className: "bear-absolute bear-top-0 bear-left-0 bear-right-0 bear-z-20",
+            style: { height: fe },
+            children: /* @__PURE__ */ t(
               "div",
               {
-                className: "bear-shrink-0",
-                style: { width: M },
-                children: e
-              },
-              r
-            ))
+                className: "bear-h-full bear-transition-all bear-ease-linear",
+                style: {
+                  width: `${(a + 1) / f * 100}%`,
+                  background: h,
+                  transition: `width ${u}ms ease`
+                }
+              }
+            )
           }
         ),
-        T && u > n && /* @__PURE__ */ j(D, { children: [
-          /* @__PURE__ */ a(
+        ie ? /* @__PURE__ */ t("div", { className: "bear-relative", style: { minHeight: 200 }, children: x.map((r, e) => /* @__PURE__ */ t("div", { style: be(e), children: r }, e)) }) : /* @__PURE__ */ t(
+          "div",
+          {
+            className: "bear-flex",
+            style: {
+              gap: `${I}px`,
+              transform: `translateX(calc(-${a} * (${W} + ${I}px)))`,
+              transition: `transform ${u}ms cubic-bezier(0.25, 0.1, 0.25, 1)`
+            },
+            children: x.map((r, e) => /* @__PURE__ */ t("div", { className: "bear-shrink-0", style: { width: W }, children: r }, e))
+          }
+        ),
+        H && f > d && /* @__PURE__ */ M(ce, { children: [
+          /* @__PURE__ */ t(
             "button",
             {
-              onClick: w,
-              disabled: !i && t === 0,
+              onClick: i,
+              disabled: !y && a === 0,
               className: b(
                 "bear-absolute bear-left-2 bear-top-1/2 bear--translate-y-1/2",
-                "bear-w-10 bear-h-10 bear-rounded-full bear-flex bear-items-center bear-justify-center",
+                "bear-rounded-full bear-flex bear-items-center bear-justify-center",
                 "bear-bg-white/90 dark:bear-bg-gray-800/90 bear-shadow-lg",
                 "bear-text-gray-700 dark:bear-text-gray-200",
                 "hover:bear-bg-white dark:hover:bear-bg-gray-700",
                 "bear-transition-all bear-z-10",
                 "disabled:bear-opacity-50 disabled:bear-cursor-not-allowed"
               ),
-              children: /* @__PURE__ */ a("svg", { className: "bear-w-5 bear-h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ a("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+              style: { width: N, height: N },
+              "aria-label": "Previous slide",
+              children: /* @__PURE__ */ t("svg", { className: "bear-w-5 bear-h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
             }
           ),
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ t(
             "button",
             {
-              onClick: f,
-              disabled: !i && t === s,
+              onClick: l,
+              disabled: !y && a === s,
               className: b(
                 "bear-absolute bear-right-2 bear-top-1/2 bear--translate-y-1/2",
-                "bear-w-10 bear-h-10 bear-rounded-full bear-flex bear-items-center bear-justify-center",
+                "bear-rounded-full bear-flex bear-items-center bear-justify-center",
                 "bear-bg-white/90 dark:bear-bg-gray-800/90 bear-shadow-lg",
                 "bear-text-gray-700 dark:bear-text-gray-200",
                 "hover:bear-bg-white dark:hover:bear-bg-gray-700",
                 "bear-transition-all bear-z-10",
                 "disabled:bear-opacity-50 disabled:bear-cursor-not-allowed"
               ),
-              children: /* @__PURE__ */ a("svg", { className: "bear-w-5 bear-h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ a("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+              style: { width: N, height: N },
+              "aria-label": "Next slide",
+              children: /* @__PURE__ */ t("svg", { className: "bear-w-5 bear-h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
             }
           )
         ] }),
-        L && u > n && /* @__PURE__ */ a("div", { className: "bear-flex bear-justify-center bear-gap-2 bear-mt-4", children: Array.from({ length: s + 1 }).map((e, r) => /* @__PURE__ */ a(
+        V && /* @__PURE__ */ M("div", { className: "bear-absolute bear-top-3 bear-right-3 bear-z-10 bear-bg-black/50 bear-text-white bear-text-xs bear-font-medium bear-px-2.5 bear-py-1 bear-rounded-full", children: [
+          a + 1,
+          " / ",
+          f
+        ] }),
+        P && k !== "none" && f > d && /* @__PURE__ */ t("div", { className: "bear-flex bear-justify-center bear-gap-2 bear-mt-4", children: k === "thumbnails" && L ? L.map((r, e) => /* @__PURE__ */ t(
           "button",
           {
-            onClick: () => h(r),
+            onClick: () => o(e),
             className: b(
-              "bear-w-2.5 bear-h-2.5 bear-rounded-full bear-transition-all",
-              r === t ? "bear-bg-pink-500 bear-w-6" : "bear-bg-gray-300 dark:bear-bg-gray-600 hover:bear-bg-gray-400 dark:hover:bear-bg-gray-500"
-            )
+              "bear-rounded bear-overflow-hidden bear-border-2 bear-transition-all",
+              e === a ? "bear-opacity-100 bear-scale-110" : "bear-opacity-60 hover:bear-opacity-80"
+            ),
+            style: {
+              width: R,
+              height: R,
+              borderColor: e === a ? h : "transparent"
+            },
+            "aria-label": `Go to slide ${e + 1}`,
+            children: /* @__PURE__ */ t("img", { src: r, alt: "", className: "bear-w-full bear-h-full bear-object-cover" })
           },
-          r
-        )) })
+          e
+        )) : k === "numbers" ? Array.from({ length: s + 1 }).map((r, e) => /* @__PURE__ */ t(
+          "button",
+          {
+            onClick: () => o(e),
+            className: b(
+              "bear-w-7 bear-h-7 bear-rounded-full bear-text-xs bear-font-medium bear-transition-all",
+              "bear-flex bear-items-center bear-justify-center",
+              e === a ? "bear-text-white bear-shadow-md" : "bear-bg-gray-200 dark:bear-bg-gray-600 bear-text-gray-600 dark:bear-text-gray-300 hover:bear-bg-gray-300 dark:hover:bear-bg-gray-500"
+            ),
+            style: e === a ? { background: h } : void 0,
+            "aria-label": `Go to slide ${e + 1}`,
+            children: e + 1
+          },
+          e
+        )) : k === "bars" ? Array.from({ length: s + 1 }).map((r, e) => /* @__PURE__ */ t(
+          "button",
+          {
+            onClick: () => o(e),
+            className: b(
+              "bear-h-1 bear-rounded-full bear-transition-all",
+              e === a ? "bear-w-8" : "bear-w-4 bear-bg-gray-300 dark:bear-bg-gray-600 hover:bear-bg-gray-400 dark:hover:bear-bg-gray-500"
+            ),
+            style: e === a ? { background: h } : void 0,
+            "aria-label": `Go to slide ${e + 1}`
+          },
+          e
+        )) : (
+          /* Default dots */
+          Array.from({ length: s + 1 }).map((r, e) => /* @__PURE__ */ t(
+            "button",
+            {
+              onClick: () => o(e),
+              className: b(
+                "bear-h-2.5 bear-rounded-full bear-transition-all",
+                e === a ? "bear-w-6" : "bear-w-2.5 bear-bg-gray-300 dark:bear-bg-gray-600 hover:bear-bg-gray-400 dark:hover:bear-bg-gray-500"
+              ),
+              style: e === a ? { background: h } : void 0,
+              "aria-label": `Go to slide ${e + 1}`
+            },
+            e
+          ))
+        ) })
       ]
     }
   );
 };
 export {
-  K as Carousel
+  we as Carousel
 };

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

@@ -1,10 +1,18 @@
-import { ReactNode } from 'react';
+import { ReactNode, CSSProperties } from 'react';
+/**
+ * Carousel transition effect
+ */
+export type CarouselTransition = 'slide' | 'fade' | 'zoom' | 'flip';
+/**
+ * Carousel indicator style
+ */
+export type CarouselIndicator = 'dots' | 'numbers' | 'thumbnails' | 'bars' | 'none';
 export interface CarouselProps {
     /** Carousel slides */
     children: ReactNode;
     /** Auto-play interval in ms (0 to disable) */
     autoPlay?: number;
-    /** Show navigation dots */
+    /** Show navigation dots/indicators */
     showDots?: boolean;
     /** Show arrow buttons */
     showArrows?: boolean;
@@ -18,8 +26,30 @@ export interface CarouselProps {
     pauseOnHover?: boolean;
     /** Called when slide changes */
     onSlideChange?: (index: number) => void;
+    /** Transition effect */
+    transition?: CarouselTransition;
+    /** Transition duration in ms */
+    transitionDuration?: number;
+    /** Indicator style */
+    indicator?: CarouselIndicator;
+    /** Thumbnail images for 'thumbnails' indicator */
+    thumbnails?: string[];
+    /** Thumbnail size in px */
+    thumbnailSize?: number;
+    /** Enable keyboard navigation */
+    keyboard?: boolean;
+    /** Enable drag/swipe to navigate */
+    draggable?: boolean;
+    /** Show progress bar */
+    showProgress?: boolean;
+    /** Show slide counter */
+    showCounter?: boolean;
+    /** Active dot/indicator color */
+    activeColor?: string;
     /** Custom class name */
     className?: string;
+    /** Custom styles */
+    style?: CSSProperties;
     /** Test ID */
     testId?: string;
 }

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

@@ -1,2 +1,2 @@
 export { Carousel } from './Carousel';
-export type { CarouselProps } from './Carousel.types';
+export type { CarouselProps, CarouselTransition, CarouselIndicator } from './Carousel.types';

package/dist/components/Chat/Chat.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),d=require("../../utils/cn.cjs"),D=require("../../context/BearProvider.cjs"),I=require("../Button/Button.cjs"),q=require("../Input/Input.cjs"),B=require("../Avatar/Avatar.cjs"),u=require("../Typography/Typography.cjs"),_=require("../Icon/index.cjs"),x=require("./Chat.const.cjs"),R=({message:r,showTimestamp:n=!0,showStatus:s=!0,showAvatar:b=!0,userAvatar:y,botAvatar:m})=>{var c;const a=r.sender==="user",f=r.sender==="system",l=x.SENDER_COLORS[r.sender];if(f)return e.jsx("div",{className:"flex justify-center my-2",children:e.jsx(u.Typography,{variant:"caption",className:"px-3 py-1 rounded-full bg-gray-100 dark:bg-gray-800",style:{color:l.text},children:r.content})});const v=a?y:m,p=r.status?x.MESSAGE_STATUS_ICONS[r.status]:null;return e.jsxs("div",{className:d.cn("flex gap-2 mb-3",a?"flex-row-reverse":"flex-row"),children:[b&&e.jsx(B.Avatar,{src:v,initials:((c=r.name)==null?void 0:c[0])||(a?"U":"B"),size:"sm",className:"flex-shrink-0"}),e.jsxs("div",{className:d.cn("flex flex-col max-w-[70%]",a?"items-end":"items-start"),children:[r.name&&e.jsx(u.Typography,{variant:"caption",className:"mb-1 opacity-60",children:r.name}),e.jsx("div",{className:d.cn("px-4 py-2 rounded-2xl",a?"rounded-br-sm":"rounded-bl-sm"),style:{backgroundColor:l.bg,color:l.text},children:typeof r.content=="string"?e.jsx(u.Typography,{variant:"body2",children:r.content}):r.content}),e.jsxs("div",{className:"flex items-center gap-1 mt-1",children:[n&&r.timestamp&&e.jsx(u.Typography,{variant:"caption",className:"opacity-50 text-xs",children:r.timestamp.toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}),s&&p&&a&&e.jsx("span",{className:d.cn("text-xs",r.status==="read"?"text-blue-500":"opacity-50",r.status==="error"&&"text-red-500"),children:p})]})]})]})},H=({text:r=x.CHAT_DEFAULTS.TYPING_TEXT})=>e.jsxs("div",{className:"flex items-center gap-2 mb-3",children:[e.jsxs("div",{className:"flex gap-1 px-4 py-3 bg-gray-100 dark:bg-gray-800 rounded-2xl rounded-bl-sm",children:[e.jsx("span",{className:"w-2 h-2 bg-gray-400 rounded-full animate-bounce",style:{animationDelay:"0ms"}}),e.jsx("span",{className:"w-2 h-2 bg-gray-400 rounded-full animate-bounce",style:{animationDelay:"150ms"}}),e.jsx("span",{className:"w-2 h-2 bg-gray-400 rounded-full animate-bounce",style:{animationDelay:"300ms"}})]}),e.jsx(u.Typography,{variant:"caption",className:"opacity-50",children:r})]}),U=({messages:r,onSend:n,isLoading:s=!1,placeholder:b=x.CHAT_DEFAULTS.PLACEHOLDER,header:y,footer:m,showTimestamps:a=!0,showStatus:f=!0,showAvatars:l=!0,userAvatar:v,botAvatar:p,isTyping:c=!1,typingText:C,className:S,height:j=x.CHAT_DEFAULTS.HEIGHT,testId:w,disabled:h=!1})=>{const{mode:E}=D.useBear(),k=E==="dark",[o,g]=i.useState(""),T=i.useRef(null);i.useEffect(()=>{var t;(t=T.current)==null||t.scrollIntoView({behavior:"smooth"})},[r,c]);const N=i.useCallback(()=>{o.trim()&&n&&!h&&!s&&(n(o.trim()),g(""))},[o,n,h,s]),A=i.useCallback(t=>{t.key==="Enter"&&!t.shiftKey&&(t.preventDefault(),N())},[N]);return e.jsxs("div",{className:d.cn("Bear-Chat","flex flex-col rounded-xl overflow-hidden border",k?"bg-gray-900 border-gray-700":"bg-white border-gray-200",S),style:{height:typeof j=="number"?`${j}px`:j},"data-testid":w,children:[y&&e.jsx("div",{className:"px-4 py-3 border-b border-gray-200 dark:border-gray-700",children:y}),e.jsxs("div",{className:"flex-1 overflow-y-auto p-4",children:[r.map(t=>e.jsx(R,{message:t,showTimestamp:a,showStatus:f,showAvatar:l,userAvatar:v,botAvatar:p},t.id)),c&&e.jsx(H,{text:C}),e.jsx("div",{ref:T})]}),e.jsxs("div",{className:"p-3 border-t border-gray-200 dark:border-gray-700",children:[e.jsxs("div",{className:"flex gap-2",children:[e.jsx(q.Input,{value:o,onChange:t=>g(t.target.value),onKeyDown:A,placeholder:b,disabled:h||s,className:"flex-1"}),e.jsx(I.Button,{variant:"primary",onClick:N,disabled:!o.trim()||h||s,children:e.jsx(_.BearIcons.SendIcon,{size:18})})]}),m&&e.jsx("div",{className:"mt-2",children:m})]})]})};exports.Chat=U;

package/dist/components/Chat/Chat.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={PLACEHOLDER:"Type a message...",HEIGHT:400,TYPING_TEXT:"is typing..."},t={sending:"○",sent:"✓",delivered:"✓✓",read:"✓✓",error:"!"},r={user:{bg:"var(--bear-primary-500)",text:"white"},bot:{bg:"var(--bear-bg-secondary)",text:"var(--bear-text-primary)"},system:{bg:"transparent",text:"var(--bear-text-tertiary)"}};exports.CHAT_DEFAULTS=e;exports.MESSAGE_STATUS_ICONS=t;exports.SENDER_COLORS=r;

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

@@ -0,0 +1,26 @@
+export declare const CHAT_DEFAULTS: {
+    readonly PLACEHOLDER: "Type a message...";
+    readonly HEIGHT: 400;
+    readonly TYPING_TEXT: "is typing...";
+};
+export declare const MESSAGE_STATUS_ICONS: {
+    readonly sending: "○";
+    readonly sent: "✓";
+    readonly delivered: "✓✓";
+    readonly read: "✓✓";
+    readonly error: "!";
+};
+export declare const SENDER_COLORS: {
+    readonly user: {
+        readonly bg: "var(--bear-primary-500)";
+        readonly text: "white";
+    };
+    readonly bot: {
+        readonly bg: "var(--bear-bg-secondary)";
+        readonly text: "var(--bear-text-primary)";
+    };
+    readonly system: {
+        readonly bg: "transparent";
+        readonly text: "var(--bear-text-tertiary)";
+    };
+};

package/dist/components/Chat/Chat.const.js

@@ -0,0 +1,29 @@
+const e = {
+  PLACEHOLDER: "Type a message...",
+  HEIGHT: 400,
+  TYPING_TEXT: "is typing..."
+}, r = {
+  sending: "○",
+  sent: "✓",
+  delivered: "✓✓",
+  read: "✓✓",
+  error: "!"
+}, t = {
+  user: {
+    bg: "var(--bear-primary-500)",
+    text: "white"
+  },
+  bot: {
+    bg: "var(--bear-bg-secondary)",
+    text: "var(--bear-text-primary)"
+  },
+  system: {
+    bg: "transparent",
+    text: "var(--bear-text-tertiary)"
+  }
+};
+export {
+  e as CHAT_DEFAULTS,
+  r as MESSAGE_STATUS_ICONS,
+  t as SENDER_COLORS
+};

package/dist/components/Chat/Chat.d.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { ChatProps } from './Chat.types';
+/**
+ * Chat - Chat interface component
+ *
+ * @example
+ * ```tsx
+ * const [messages, setMessages] = useState<ChatMessage[]>([
+ *   { id: '1', content: 'Hello!', sender: 'bot', timestamp: new Date() },
+ * ]);
+ *
+ * <Chat
+ *   messages={messages}
+ *   onSend={(msg) => setMessages([...messages, { id: Date.now().toString(), content: msg, sender: 'user' }])}
+ *   isTyping={false}
+ *   showAvatars
+ * />
+ * ```
+ */
+export declare const Chat: FC<ChatProps>;
+export default Chat;