@forgedevstack/bear 1.3.0 → 1.3.1

package/dist/components/Calendar/Calendar.js

@@ -1,189 +1,208 @@
-import { jsxs as s, Fragment as ue, jsx as t } from "react/jsx-runtime";
-import { useMemo as D, useCallback as l } from "react";
-import { cn as E } from "../../utils/cn.js";
-import { useBearStyles as ye } from "../../hooks/useBearStyles.js";
+import { jsxs as s, Fragment as ge, jsx as t } from "react/jsx-runtime";
+import { useMemo as L, useCallback as m } from "react";
+import { ZERO as Be } from "../../constants/numbers.const.js";
+import { BOOLEAN_TRUE as Ee } from "../../constants/generals.const.js";
+import { cn as R } from "../../utils/cn.js";
+import { useBearStyles as De } from "../../hooks/useBearStyles.js";
 import "../../hooks/useBearComponent/useBearComponent.js";
 import "../../context/BearProvider.js";
+import { OVERLAY_OPEN_EFFECT_NONE as l } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.const.js";
+import { resolveOverlayEffects as we } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.js";
 import "../FormControl/FormControl.context.js";
-import { ChevronsLeftIcon as xe, ChevronLeftIcon as ke, ChevronRightIcon as ve, ChevronsRightIcon as pe } from "../Icon/index.js";
-import { DEFAULT_WEEKDAYS as ze, NUMBER as i, CALENDAR_DROPDOWN_Z_INDEX as Ce, MONTHS as _e, WEEKEND_LABELS as ge } from "./Calendar.const.js";
-import { isSameDay as v, buildCalendarGrid as Ne, reorderWeekdays as fe, isWeekendDay as Be } from "./Calendar.utils.js";
-import { DefaultHeaderLabel as we } from "./Calendar.helpers.js";
-const Ae = (Z) => {
+import { ChevronsLeftIcon as Oe, ChevronLeftIcon as Te, ChevronRightIcon as Pe, ChevronsRightIcon as Le } from "../Icon/index.js";
+import { OVERLAY_EFFECT_TRANSITION as Y } from "../OverlayPortal/OverlayPortal.const.js";
+import { Transition as Re } from "../Transition/Transition.js";
+import { DEFAULT_DURATION as Ye } from "../Transition/Transition.const.js";
+import { DEFAULT_WEEKDAYS as Ae, NUMBER as d, CALENDAR_DROPDOWN_Z_INDEX as Me, MONTHS as Se, WEEKEND_LABELS as We } from "./Calendar.const.js";
+import { isSameDay as _, buildCalendarGrid as Fe, reorderWeekdays as Ie, isWeekendDay as je } from "./Calendar.utils.js";
+import { DefaultHeaderLabel as He } from "./Calendar.helpers.js";
+const sr = (A) => {
   const {
-    viewDate: O,
-    value: P = null,
-    onSelect: p,
+    viewDate: M,
+    value: S = null,
+    onSelect: C,
     onViewChange: n,
     minDate: z,
-    maxDate: C,
-    disabledDates: L = [],
-    highlightedDates: W = [],
-    weekdayLabels: S = ze,
-    firstDayOfWeek: y = i.ZERO,
-    showWeekNumbers: De = !1,
+    maxDate: g,
+    disabledDates: W = [],
+    highlightedDates: F = [],
+    weekdayLabels: I = Ae,
+    firstDayOfWeek: k = d.ZERO,
+    showWeekNumbers: Ue = !1,
     slots: e = {},
-    clearable: X = !0,
+    clearable: te = !0,
     onClear: h,
-    showTodayButton: q = !0,
-    onToday: m,
-    bis: J,
-    style: Q,
-    inline: Y = !1,
-    className: $
-  } = Z, b = O.getFullYear(), M = ye(J, Q), d = O.getMonth(), V = D(() => /* @__PURE__ */ new Date(), []), _ = l(() => {
-    n == null || n(new Date(b - i.ONE, d, i.ONE));
-  }, [b, d, n]), T = l(() => {
-    n == null || n(new Date(b, d - i.ONE, i.ONE));
-  }, [b, d, n]), j = l(() => {
-    n == null || n(new Date(b, d + i.ONE, i.ONE));
-  }, [b, d, n]), g = l(() => {
-    n == null || n(new Date(b + i.ONE, d, i.ONE));
-  }, [b, d, n]), N = T, f = j, ee = {
-    onPrevYear: _,
-    onPrevMonth: T,
-    onNextMonth: j,
-    onNextYear: g
-  }, re = l(
-    (a) => z && a < z || C && a > C ? !0 : L.some((r) => v(r, a)),
-    [z, C, L]
-  ), ae = l(
-    (a) => W.some((r) => v(r, a)),
-    [W]
-  ), te = D(
-    () => Ne(b, d, y),
-    [b, d, y]
-  ), I = D(
-    () => fe(S, y),
-    [S, y]
-  ), R = _e[d], B = P != null, ne = Y ? "Bear-Calendar Bear-Calendar--inline bear-block bear-w-full bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-none bear-border bear-border-zinc-200 dark:bear-border-zinc-700 bear-p-4 bear-text-zinc-900 dark:bear-text-zinc-100" : "Bear-Calendar Bear-Calendar--dropdown bear-mt-2 bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-xl bear-border bear-border-zinc-200 dark:bear-border-zinc-700 bear-p-4 bear-w-80 bear-text-zinc-900 dark:bear-text-zinc-100", A = Y ? void 0 : { zIndex: Ce }, oe = () => {
+    showTodayButton: ne = !0,
+    onToday: u,
+    bis: oe,
+    style: ie,
+    inline: j = !1,
+    className: be,
+    open: H
+  } = A, { openEffect: y, closeEffect: v } = we(A), i = M.getFullYear(), U = De(oe, ie), b = M.getMonth(), de = L(() => /* @__PURE__ */ new Date(), []), B = m(() => {
+    n == null || n(new Date(i - d.ONE, b, d.ONE));
+  }, [i, b, n]), G = m(() => {
+    n == null || n(new Date(i, b - d.ONE, d.ONE));
+  }, [i, b, n]), Z = m(() => {
+    n == null || n(new Date(i, b + d.ONE, d.ONE));
+  }, [i, b, n]), E = m(() => {
+    n == null || n(new Date(i + d.ONE, b, d.ONE));
+  }, [i, b, n]), D = G, w = Z, ce = {
+    onPrevYear: B,
+    onPrevMonth: G,
+    onNextMonth: Z,
+    onNextYear: E
+  }, se = m(
+    (a) => z && a < z || g && a > g ? !0 : W.some((r) => _(r, a)),
+    [z, g, W]
+  ), le = m(
+    (a) => F.some((r) => _(r, a)),
+    [F]
+  ), me = L(
+    () => Fe(i, b, k),
+    [i, b, k]
+  ), K = L(
+    () => Ie(I, k),
+    [I, k]
+  ), X = Se[b], O = S != null, he = j ? "Bear-Calendar Bear-Calendar--inline bear-block bear-w-full bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-none bear-border bear-border-zinc-200 dark:bear-border-zinc-700 bear-p-4 bear-text-zinc-900 dark:bear-text-zinc-100" : "Bear-Calendar Bear-Calendar--dropdown bear-mt-2 bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-xl bear-border bear-border-zinc-200 dark:bear-border-zinc-700 bear-p-4 bear-w-80 bear-text-zinc-900 dark:bear-text-zinc-100", q = j ? void 0 : { zIndex: Me }, ue = () => {
     if (e.header)
-      return e.header({ month: R, year: b, onPrev: N, onNext: f, nav: ee });
-    const a = e.navPrevYear, r = e.navPrev, o = e.navNext, c = e.navNextYear, x = e.headerLabel || we;
+      return e.header({ month: X, year: i, onPrev: D, onNext: w, nav: ce });
+    const a = e.navPrevYear, r = e.navPrev, o = e.navNext, c = e.navNextYear, f = e.headerLabel || He;
     return /* @__PURE__ */ s("div", { className: "Bear-Calendar__header bear-flex bear-items-center bear-justify-between bear-gap-1 bear-mb-4", children: [
       /* @__PURE__ */ s("div", { className: "Bear-Calendar__nav-left bear-flex bear-items-center bear-gap-0.5", children: [
-        a ? a({ onClick: _ }) : /* @__PURE__ */ t(
+        a ? a({ onClick: B }) : /* @__PURE__ */ t(
           "button",
           {
             type: "button",
-            onClick: _,
+            onClick: B,
             className: "Bear-Calendar__nav-btn bear-p-1.5 bear-rounded bear-text-zinc-500 dark:bear-text-zinc-400 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 bear-transition-colors",
             "aria-label": "Previous year",
-            children: /* @__PURE__ */ t(xe, { size: 16 })
+            children: /* @__PURE__ */ t(Oe, { size: 16 })
           }
         ),
-        r ? r({ onClick: N }) : /* @__PURE__ */ t(
+        r ? r({ onClick: D }) : /* @__PURE__ */ t(
           "button",
           {
             type: "button",
-            onClick: N,
+            onClick: D,
             className: "Bear-Calendar__nav-btn bear-p-1.5 bear-rounded bear-text-zinc-500 dark:bear-text-zinc-400 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 bear-transition-colors",
             "aria-label": "Previous month",
-            children: /* @__PURE__ */ t(ke, { size: 16 })
+            children: /* @__PURE__ */ t(Te, { size: 16 })
           }
         )
       ] }),
-      x({ month: R, year: b }),
+      f({ month: X, year: i }),
       /* @__PURE__ */ s("div", { className: "Bear-Calendar__nav-right bear-flex bear-items-center bear-gap-0.5", children: [
-        o ? o({ onClick: f }) : /* @__PURE__ */ t(
+        o ? o({ onClick: w }) : /* @__PURE__ */ t(
           "button",
           {
             type: "button",
-            onClick: f,
+            onClick: w,
             className: "Bear-Calendar__nav-btn bear-p-1.5 bear-rounded bear-text-zinc-500 dark:bear-text-zinc-400 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 bear-transition-colors",
             "aria-label": "Next month",
-            children: /* @__PURE__ */ t(ve, { size: 16 })
+            children: /* @__PURE__ */ t(Pe, { size: 16 })
           }
         ),
-        c ? c({ onClick: g }) : /* @__PURE__ */ t(
+        c ? c({ onClick: E }) : /* @__PURE__ */ t(
           "button",
           {
             type: "button",
-            onClick: g,
+            onClick: E,
             className: "Bear-Calendar__nav-btn bear-p-1.5 bear-rounded bear-text-zinc-500 dark:bear-text-zinc-400 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 bear-transition-colors",
             "aria-label": "Next year",
-            children: /* @__PURE__ */ t(pe, { size: 16 })
+            children: /* @__PURE__ */ t(Le, { size: 16 })
           }
         )
       ] })
     ] });
-  }, be = () => {
-    if (e.weekdays) return e.weekdays({ days: I });
+  }, ye = () => {
+    if (e.weekdays) return e.weekdays({ days: K });
     const a = e.weekday;
-    return /* @__PURE__ */ t("div", { className: "Bear-Calendar__weekdays bear-grid bear-grid-cols-7 bear-gap-1 bear-mb-2", children: I.map(
+    return /* @__PURE__ */ t("div", { className: "Bear-Calendar__weekdays bear-grid bear-grid-cols-7 bear-gap-1 bear-mb-2", children: K.map(
       (r) => a ? /* @__PURE__ */ t("div", { children: a({ label: r }) }, r) : /* @__PURE__ */ t(
         "div",
         {
-          className: E(
+          className: R(
             "Bear-Calendar__weekday bear-text-center bear-text-xs bear-font-medium bear-uppercase bear-text-zinc-500 dark:bear-text-zinc-400",
-            ge.includes(r) && "bear-text-red-500"
+            We.includes(r) && "bear-text-red-500"
           ),
           children: r
         },
         r
       )
     ) });
-  }, de = (a, r) => {
-    const { date: o, isCurrentMonth: c } = a, x = o.getDate(), le = o.getDay(), he = Be(le), u = v(P, o), w = v(V, o), k = re(o), K = ae(o), U = () => {
-      k || p == null || p(o);
-    }, me = {
+  }, ve = (a, r) => {
+    const { date: o, isCurrentMonth: c } = a, f = o.getDate(), _e = o.getDay(), Ce = je(_e), p = _(S, o), P = _(de, o), N = se(o), re = le(o), ae = () => {
+      N || C == null || C(o);
+    }, ze = {
       date: o,
-      day: x,
+      day: f,
       isCurrentMonth: c,
-      isSelected: u,
-      isToday: w,
-      isDisabled: k,
-      isHighlighted: K,
-      onClick: U
+      isSelected: p,
+      isToday: P,
+      isDisabled: N,
+      isHighlighted: re,
+      onClick: ae
     };
-    return e.day ? /* @__PURE__ */ t("span", { children: e.day(me) }, r) : /* @__PURE__ */ t(
+    return e.day ? /* @__PURE__ */ t("span", { children: e.day(ze) }, r) : /* @__PURE__ */ t(
       "button",
       {
         type: "button",
-        onClick: U,
-        disabled: k,
-        className: E(
+        onClick: ae,
+        disabled: N,
+        className: R(
           "Bear-Calendar__day bear-w-8 bear-h-8 bear-rounded-full bear-text-sm bear-font-medium bear-transition-colors bear-flex bear-items-center bear-justify-center",
-          u && "Bear-Calendar__day--selected bear-bg-primary-500 bear-text-white hover:bear-bg-primary-600",
-          !u && w && "Bear-Calendar__day--today bear-ring-2 bear-ring-primary-500/50 bear-bg-transparent",
-          !u && !w && (c ? he ? "Bear-Calendar__day--weekend bear-text-red-500 dark:bear-text-red-400 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800" : "bear-text-zinc-700 dark:bear-text-zinc-300 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800" : "Bear-Calendar__day--other bear-text-zinc-500 dark:bear-text-zinc-600 hover:bear-bg-zinc-50 dark:hover:bear-bg-zinc-800/50"),
-          K && !u && "Bear-Calendar__day--highlighted bear-bg-primary-500/15",
-          k && "Bear-Calendar__day--disabled bear-opacity-40 bear-cursor-not-allowed"
+          p && "Bear-Calendar__day--selected bear-bg-primary-500 bear-text-white hover:bear-bg-primary-600",
+          !p && P && "Bear-Calendar__day--today bear-ring-2 bear-ring-primary-500/50 bear-bg-transparent",
+          !p && !P && (c ? Ce ? "Bear-Calendar__day--weekend bear-text-red-500 dark:bear-text-red-400 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800" : "bear-text-zinc-700 dark:bear-text-zinc-300 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800" : "Bear-Calendar__day--other bear-text-zinc-500 dark:bear-text-zinc-600 hover:bear-bg-zinc-50 dark:hover:bear-bg-zinc-800/50"),
+          re && !p && "Bear-Calendar__day--highlighted bear-bg-primary-500/15",
+          N && "Bear-Calendar__day--disabled bear-opacity-40 bear-cursor-not-allowed"
         ),
-        children: x
+        children: f
       },
       r
     );
-  }, ie = () => {
-    const a = te.map((r, o) => de(r, o));
+  }, pe = () => {
+    const a = me.map((r, o) => ve(r, o));
     return e.daysGrid ? e.daysGrid({ children: a, className: "Bear-Calendar__grid bear-grid bear-grid-cols-7 bear-gap-1" }) : /* @__PURE__ */ t("div", { className: "Bear-Calendar__grid bear-grid bear-grid-cols-7 bear-gap-1", children: a });
-  }, ce = () => {
-    const a = X && B && h, r = q && m;
+  }, ke = () => {
+    const a = te && O && h, r = ne && u;
     if (!a && !r) return null;
     if (e.footer) {
       const o = e.clearButton, c = e.todayButton;
       return e.footer({
         children: /* @__PURE__ */ s("div", { className: "Bear-Calendar__footer bear-flex bear-justify-between bear-gap-2 bear-mt-4 bear-pt-3 bear-border-t bear-border-zinc-200 dark:bear-border-zinc-700", children: [
-          a && o ? o({ onClick: h, hasSelection: B }) : a ? /* @__PURE__ */ t("button", { type: "button", onClick: h, className: "Bear-Calendar__clear-btn bear-text-sm bear-text-zinc-500 dark:bear-text-zinc-400 hover:bear-text-zinc-700 dark:hover:bear-text-zinc-200 bear-transition-colors", children: "Clear" }) : /* @__PURE__ */ t("span", {}),
-          r && c ? c({ onClick: m }) : r ? /* @__PURE__ */ t("button", { type: "button", onClick: m, className: "Bear-Calendar__today-btn bear-text-sm bear-text-primary-600 dark:bear-text-primary-400 hover:bear-text-primary-700 dark:hover:bear-text-primary-300 bear-font-medium", children: "Today" }) : null
+          a && o ? o({ onClick: h, hasSelection: O }) : a ? /* @__PURE__ */ t("button", { type: "button", onClick: h, className: "Bear-Calendar__clear-btn bear-text-sm bear-text-zinc-500 dark:bear-text-zinc-400 hover:bear-text-zinc-700 dark:hover:bear-text-zinc-200 bear-transition-colors", children: "Clear" }) : /* @__PURE__ */ t("span", {}),
+          r && c ? c({ onClick: u }) : r ? /* @__PURE__ */ t("button", { type: "button", onClick: u, className: "Bear-Calendar__today-btn bear-text-sm bear-text-primary-600 dark:bear-text-primary-400 hover:bear-text-primary-700 dark:hover:bear-text-primary-300 bear-font-medium", children: "Today" }) : null
         ] })
       });
     }
     return e.clearButton && e.todayButton ? /* @__PURE__ */ s("div", { className: "Bear-Calendar__footer bear-flex bear-justify-between bear-gap-2 bear-mt-4 bear-pt-3 bear-border-t bear-border-zinc-200 dark:bear-border-zinc-700", children: [
-      a && e.clearButton({ onClick: h, hasSelection: B }),
-      r && e.todayButton({ onClick: m })
+      a && e.clearButton({ onClick: h, hasSelection: O }),
+      r && e.todayButton({ onClick: u })
     ] }) : /* @__PURE__ */ s("div", { className: "Bear-Calendar__footer bear-flex bear-justify-between bear-gap-2 bear-mt-4 bear-pt-3 bear-border-t bear-border-zinc-200 dark:bear-border-zinc-700", children: [
       a ? /* @__PURE__ */ t("button", { type: "button", onClick: h, className: "Bear-Calendar__clear-btn bear-text-sm bear-text-zinc-500 dark:bear-text-zinc-400 hover:bear-text-zinc-700 dark:hover:bear-text-zinc-200 bear-transition-colors", children: "Clear" }) : /* @__PURE__ */ t("span", {}),
-      r ? /* @__PURE__ */ t("button", { type: "button", onClick: m, className: "Bear-Calendar__today-btn bear-text-sm bear-text-primary-400 hover:bear-text-primary-300 bear-font-medium bear-transition-colors", children: "Today" }) : null
+      r ? /* @__PURE__ */ t("button", { type: "button", onClick: u, className: "Bear-Calendar__today-btn bear-text-sm bear-text-primary-400 hover:bear-text-primary-300 bear-font-medium bear-transition-colors", children: "Today" }) : null
     ] });
-  }, H = /* @__PURE__ */ s(ue, { children: [
-    oe(),
-    be(),
-    ie(),
-    ce()
-  ] }), F = E(ne, $), G = Object.keys(M).length ? M : void 0, se = A ? { ...G, ...A } : G;
-  return e.root ? e.root({ children: H, className: F }) : /* @__PURE__ */ t("div", { className: F, style: se, children: H });
+  }, J = /* @__PURE__ */ s(ge, { children: [
+    ue(),
+    ye(),
+    pe(),
+    ke()
+  ] }), Q = R(he, be), $ = Object.keys(U).length ? U : void 0, xe = q ? { ...$, ...q } : $, T = e.root ? e.root({ children: J, className: Q }) : /* @__PURE__ */ t("div", { className: Q, style: xe, children: J }), fe = H !== void 0, x = H ?? Ee;
+  if (!(fe && (y !== l || v !== l)))
+    return T;
+  const V = x ? y : v, ee = V === l ? y === l ? v === l ? void 0 : Y[v] : Y[y] : Y[V], Ne = x && y === l || !x && v === l;
+  return ee ? /* @__PURE__ */ t(
+    Re,
+    {
+      show: x,
+      name: ee,
+      duration: Ne ? Be : Ye,
+      children: T
+    }
+  ) : T;
 };
 export {
-  Ae as Calendar
+  sr as Calendar
 };

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

@@ -1,4 +1,6 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import { BisProp } from '../../types';
+import { OverlayEffectProps } from '../../hooks/useFixedAnchorPosition';
 export interface CalendarDayProps {
     testId?: string;
     date: Date;
@@ -93,7 +95,7 @@ export interface CalendarSlots {
         onClick: () => void;
     }) => ReactNode;
 }
-export interface CalendarProps {
+export interface CalendarProps extends OverlayEffectProps {
     /** Currently viewed month (controls calendar view) */
     viewDate: Date;
     /** Selected date */
@@ -119,11 +121,9 @@ export interface CalendarProps {
     /** Show Today button in footer */
     showTodayButton?: boolean;
     onToday?: () => void;
-    /** Bear Inner Style - sx-like overrides */
-    bis?: import('../../types/bis.types').BisProp;
-    /** Inline styles */
-    style?: React.CSSProperties;
-    /** When true, render as block (no absolute). Use when embedding in DateTimePicker etc. */
+    bis?: BisProp;
+    style?: CSSProperties;
     inline?: boolean;
     className?: string;
+    open?: boolean;
 }

package/dist/components/Chat/Chat.cjs

@@ -1 +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;
+"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"),q=require("../Button/Button.cjs"),I=require("../Input/Input.cjs"),B=require("../Avatar/Avatar.cjs");require("../Box/Box.cjs");const 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(I.Input,{value:o,onChange:t=>g(t.target.value),onKeyDown:A,placeholder:b,disabled:h||s,className:"flex-1"}),e.jsx(q.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.js

@@ -5,6 +5,7 @@ import { useBear as H } from "../../context/BearProvider.js";
 import { Button as O } from "../Button/Button.js";
 import { Input as U } from "../Input/Input.js";
 import { Avatar as j } from "../Avatar/Avatar.js";
+import "../Box/Box.js";
 import { Typography as m } from "../Typography/Typography.js";
 import { BearIcons as G } from "../Icon/index.js";
 import { CHAT_DEFAULTS as g, SENDER_COLORS as K, MESSAGE_STATUS_ICONS as V } from "./Chat.const.js";
@@ -87,7 +88,7 @@ const z = ({
     /* @__PURE__ */ r("span", { className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: "300ms" } })
   ] }),
   /* @__PURE__ */ r(m, { variant: "caption", className: "opacity-50", children: e })
-] }), Z = ({
+] }), ee = ({
   messages: e,
   onSend: o,
   isLoading: l = !1,
@@ -175,5 +176,5 @@ const z = ({
   );
 };
 export {
-  Z as Chat
+  ee as Chat
 };

package/dist/components/DatePicker/DatePicker.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("react"),J=require("react-dom"),K=require("../Calendar/Calendar.cjs"),D=require("../../utils/cn.cjs"),Q=require("../../hooks/useBearStyles.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");require("../../context/BearProvider.cjs");require("../FormControl/FormControl.context.cjs");const U=require("./DatePicker.utils.cjs"),X=({value:c,onChange:t,minDate:y,maxDate:j,disabled:b=!1,placeholder:z="Select date",label:p,error:i,helperText:m,format:B="MM/DD/YYYY",clearable:P=!0,className:_,style:h,bis:v,showWeekNumbers:S=!1,disabledDates:q=[],highlightedDates:N=[],slots:g,weekdayLabels:R,firstDayOfWeek:V=0,size:H="md",variant:M="default",icon:O})=>{const[o,n]=a.useState(!1),[E,L]=a.useState(c??new Date),[x,Y]=a.useState({top:0,left:0}),k=a.useRef(null),d=a.useRef(null),w=Q.useBearStyles(v,h);a.useEffect(()=>{if(o&&d.current){const e=d.current.getBoundingClientRect(),l=8,s=360,G=window.innerHeight-e.bottom<s&&e.top>s;Y({top:G?e.top-s-l:e.bottom+l,left:e.left})}},[o]),a.useEffect(()=>{const e=l=>{var u,f;const s=l.target;(u=k.current)!=null&&u.contains(s)||(f=s.closest)!=null&&f.call(s,"[data-bear-datepicker-calendar]")||n(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const T=a.useCallback(e=>{t==null||t(e),n(!1)},[t]),A=a.useCallback(()=>{t==null||t(null),n(!1)},[t]),I=a.useCallback(e=>{L(e)},[]),W={sm:"bear-py-1.5 bear-px-3 bear-text-sm",md:"bear-py-2 bear-px-4",lg:"bear-py-2.5 bear-px-5 bear-text-lg"},F={default:"bear-bg-white dark:bear-bg-zinc-800 bear-border-zinc-300 dark:bear-border-zinc-600",filled:"bear-bg-zinc-100 dark:bear-bg-zinc-700 bear-border-transparent",outline:"bear-bg-transparent bear-border-zinc-400 dark:bear-border-zinc-500"};return r.jsxs("div",{ref:k,className:D.cn("Bear-DatePicker bear-relative",_),style:Object.keys(w).length?w:void 0,children:[p&&r.jsx("label",{className:"Bear-DatePicker__label bear-block bear-text-sm bear-font-medium bear-text-zinc-700 dark:bear-text-zinc-300 bear-mb-1.5",children:p}),r.jsxs("button",{ref:d,type:"button",onClick:()=>!b&&n(!o),disabled:b,className:D.cn("Bear-DatePicker__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors",W[H],F[M],i?"bear-border-red-500":"focus:bear-border-primary-500",b&&"bear-opacity-50 bear-cursor-not-allowed",c?"bear-text-zinc-900 dark:bear-text-white":"bear-text-zinc-500"),children:[r.jsx("span",{className:"Bear-DatePicker__value",children:c?U.formatDate(c,B):z}),r.jsx("span",{className:"Bear-DatePicker__icon",children:O??r.jsx("svg",{className:"bear-w-5 bear-h-5 bear-text-zinc-400 bear-shrink-0",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"})})})]}),i&&r.jsx("p",{className:"Bear-DatePicker__error bear-mt-1 bear-text-xs bear-text-red-400",children:i}),m&&!i&&r.jsx("p",{className:"Bear-DatePicker__helper bear-mt-1 bear-text-xs bear-text-zinc-500",children:m}),o&&typeof document<"u"&&J.createPortal(r.jsx("div",{"data-bear-datepicker-calendar":!0,className:"Bear-DatePicker__dropdown bear-fixed bear-z-[9999]",style:{top:x.top,left:x.left},children:r.jsx(K.Calendar,{viewDate:E,onViewChange:I,value:c??null,onSelect:T,minDate:y,maxDate:j,disabledDates:q,highlightedDates:N,slots:g,weekdayLabels:R,firstDayOfWeek:V,showWeekNumbers:S,clearable:P,onClear:A,showTodayButton:!0,onToday:()=>{t==null||t(new Date),n(!1)}})}),document.body)]})};exports.DatePicker=X;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("react"),M=require("../Calendar/Calendar.cjs"),U=require("../Icon/index.cjs"),X=require("../OverlayPortal/OverlayPortal.cjs"),A=require("../../utils/cn.cjs"),Z=require("../../hooks/useClickOutside.cjs"),G=require("../../hooks/useBearStyles.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");require("../../context/BearProvider.cjs");const Y=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.cjs"),J=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.cjs");require("../FormControl/FormControl.context.cjs");const Q=require("./DatePicker.utils.cjs"),e=require("./DatePicker.const.cjs"),ee=o=>{const{value:s,onChange:t,minDate:C,maxDate:T,disabled:c=!1,placeholder:f=e.DATEPICKER_DEFAULT_PLACEHOLDER,label:u,error:l,helperText:b,format:x=e.DATEPICKER_DEFAULT_FORMAT,clearable:S=!0,className:O,style:P,bis:m,showWeekNumbers:h=!1,disabledDates:I=[],highlightedDates:y=[],slots:k,weekdayLabels:p,firstDayOfWeek:L=e.DATEPICKER_DEFAULT_FIRST_DAY,size:w="md",variant:K="default",icon:N,testId:q}=o,{openEffect:j,closeEffect:v}=J.resolveOverlayEffects(o),[n,_]=a.useState(!1),[z,F]=a.useState(s??new Date),d=a.useRef(null),E=a.useRef(null),R=a.useRef(null),D=G.useBearStyles(m,P),{style:g,ready:$}=Y.useFixedAnchorPosition({anchorRef:E,open:n,estimatedHeightPx:e.DATEPICKER_DROPDOWN_HEIGHT_PX}),H=a.useCallback(()=>_(!1),[]);Z.useClickOutsideMultiple([d,R],H,{enabled:n});const V=a.useCallback(i=>{t==null||t(i),_(!1)},[t]),W=a.useCallback(()=>{t==null||t(null),_(!1)},[t]),B=a.useCallback(i=>{F(i)},[]);return r.jsxs("div",{ref:d,className:A.cn(e.D_A_T_E_P_I_C_K_E_R_ROOT_CLASS,"bear-relative",O),style:Object.keys(D).length?D:void 0,"data-testid":q,children:[u&&r.jsx("label",{className:`${e.D_A_T_E_P_I_C_K_E_R_ROOT_CLASS}__label bear-block bear-text-sm bear-font-medium bear-text-zinc-700 dark:bear-text-zinc-300 bear-mb-1.5`,children:u}),r.jsxs("button",{ref:E,type:"button",onClick:()=>!c&&_(!n),disabled:c,className:A.cn(`${e.D_A_T_E_P_I_C_K_E_R_ROOT_CLASS}__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors`,e.DATEPICKER_SIZE_CLASSES[w],e.DATEPICKER_VARIANT_CLASSES[K],l?"bear-border-red-500":"focus:bear-border-primary-500",c&&"bear-opacity-50 bear-cursor-not-allowed",s?"bear-text-zinc-900 dark:bear-text-white":"bear-text-zinc-500"),children:[r.jsx("span",{className:`${e.D_A_T_E_P_I_C_K_E_R_ROOT_CLASS}__value`,children:s?Q.formatDate(s,x):f}),r.jsx("span",{className:`${e.D_A_T_E_P_I_C_K_E_R_ROOT_CLASS}__icon`,children:N??r.jsx(U.CalendarIcon,{className:"bear-w-5 bear-h-5 bear-text-zinc-400 bear-shrink-0"})})]}),l&&r.jsx("p",{className:`${e.D_A_T_E_P_I_C_K_E_R_ROOT_CLASS}__error bear-mt-1 bear-text-xs bear-text-red-400`,children:l}),b&&!l&&r.jsx("p",{className:`${e.D_A_T_E_P_I_C_K_E_R_ROOT_CLASS}__helper bear-mt-1 bear-text-xs bear-text-zinc-500`,children:b}),r.jsx(X.OverlayPortal,{open:n,ready:$,style:g,zIndex:e.DATEPICKER_DROPDOWN_Z_INDEX,openEffect:j,closeEffect:v,className:`${e.D_A_T_E_P_I_C_K_E_R_ROOT_CLASS}__dropdown`,panelRef:R,attributes:{[e.DATEPICKER_CALENDAR_ATTR]:""},children:r.jsx(M.Calendar,{viewDate:z,onViewChange:B,value:s??null,onSelect:V,minDate:C,maxDate:T,disabledDates:I,highlightedDates:y,slots:k,weekdayLabels:p,firstDayOfWeek:L,showWeekNumbers:h,clearable:S,onClear:W,showTodayButton:!0,onToday:()=>{t==null||t(new Date),_(!1)}})})]})};exports.DatePicker=ee;

package/dist/components/DatePicker/DatePicker.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _="Bear-DatePicker",E=360,e=11e3,A="data-bear-datepicker-calendar",r="Select date",D="MM/DD/YYYY",T=0,a={sm:"bear-py-1.5 bear-px-3 bear-text-sm",md:"bear-py-2 bear-px-4",lg:"bear-py-2.5 bear-px-5 bear-text-lg"},R={default:"bear-bg-white dark:bear-bg-zinc-800 bear-border-zinc-300 dark:bear-border-zinc-600",filled:"bear-bg-zinc-100 dark:bear-bg-zinc-700 bear-border-transparent",outline:"bear-bg-transparent bear-border-zinc-400 dark:bear-border-zinc-500"};exports.DATEPICKER_CALENDAR_ATTR=A;exports.DATEPICKER_DEFAULT_FIRST_DAY=T;exports.DATEPICKER_DEFAULT_FORMAT=D;exports.DATEPICKER_DEFAULT_PLACEHOLDER=r;exports.DATEPICKER_DROPDOWN_HEIGHT_PX=E;exports.DATEPICKER_DROPDOWN_Z_INDEX=e;exports.DATEPICKER_SIZE_CLASSES=a;exports.DATEPICKER_VARIANT_CLASSES=R;exports.D_A_T_E_P_I_C_K_E_R_ROOT_CLASS=_;

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

@@ -1 +1,17 @@
 export declare const D_A_T_E_P_I_C_K_E_R_ROOT_CLASS = "Bear-DatePicker";
+export declare const DATEPICKER_DROPDOWN_HEIGHT_PX = 360;
+export declare const DATEPICKER_DROPDOWN_Z_INDEX = 11000;
+export declare const DATEPICKER_CALENDAR_ATTR = "data-bear-datepicker-calendar";
+export declare const DATEPICKER_DEFAULT_PLACEHOLDER = "Select date";
+export declare const DATEPICKER_DEFAULT_FORMAT = "MM/DD/YYYY";
+export declare const DATEPICKER_DEFAULT_FIRST_DAY = 0;
+export declare const DATEPICKER_SIZE_CLASSES: {
+    readonly sm: "bear-py-1.5 bear-px-3 bear-text-sm";
+    readonly md: "bear-py-2 bear-px-4";
+    readonly lg: "bear-py-2.5 bear-px-5 bear-text-lg";
+};
+export declare const DATEPICKER_VARIANT_CLASSES: {
+    readonly default: "bear-bg-white dark:bear-bg-zinc-800 bear-border-zinc-300 dark:bear-border-zinc-600";
+    readonly filled: "bear-bg-zinc-100 dark:bear-bg-zinc-700 bear-border-transparent";
+    readonly outline: "bear-bg-transparent bear-border-zinc-400 dark:bear-border-zinc-500";
+};

package/dist/components/DatePicker/DatePicker.const.js

@@ -0,0 +1,20 @@
+const e = "Bear-DatePicker", r = 360, a = 11e3, _ = "data-bear-datepicker-calendar", b = "Select date", E = "MM/DD/YYYY", t = 0, A = {
+  sm: "bear-py-1.5 bear-px-3 bear-text-sm",
+  md: "bear-py-2 bear-px-4",
+  lg: "bear-py-2.5 bear-px-5 bear-text-lg"
+}, D = {
+  default: "bear-bg-white dark:bear-bg-zinc-800 bear-border-zinc-300 dark:bear-border-zinc-600",
+  filled: "bear-bg-zinc-100 dark:bear-bg-zinc-700 bear-border-transparent",
+  outline: "bear-bg-transparent bear-border-zinc-400 dark:bear-border-zinc-500"
+};
+export {
+  _ as DATEPICKER_CALENDAR_ATTR,
+  t as DATEPICKER_DEFAULT_FIRST_DAY,
+  E as DATEPICKER_DEFAULT_FORMAT,
+  b as DATEPICKER_DEFAULT_PLACEHOLDER,
+  r as DATEPICKER_DROPDOWN_HEIGHT_PX,
+  a as DATEPICKER_DROPDOWN_Z_INDEX,
+  A as DATEPICKER_SIZE_CLASSES,
+  D as DATEPICKER_VARIANT_CLASSES,
+  e as D_A_T_E_P_I_C_K_E_R_ROOT_CLASS
+};