@forgedevstack/bear 1.2.9 → 1.3.1

package/dist/components/Drawer/Drawer.js

@@ -1,47 +1,47 @@
 import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import { useState as m, useEffect as S, useCallback as R } from "react";
-import { createPortal as C } from "react-dom";
-import { useBearDirectionOptional as L } from "../../context/BearProvider.js";
+import { useState as u, useEffect as S, useCallback as M } from "react";
+import { createPortal as B } from "react-dom";
+import { useBearDirectionOptional as C } from "../../context/BearProvider.js";
 import { cn as T } from "../../utils/cn.js";
-import { resolveBearId as F } from "../../utils/generateBearId.utils.js";
-import { useBearId as P } from "../../utils/useBearId.js";
-import { XIcon as j } from "../Icon/index.js";
-import { Backdrop as $ } from "../Backdrop/Backdrop.js";
-import { DRAWER_ANIMATION_MS as u, TRANSFORM_OPEN as q, TRANSFORM_CLOSED as z, SIZE_CLASSES as H, POSITION_CLASSES as W, BORDER_SIDE_MAP as X } from "./Drawer.const.js";
-import { lockBodyScroll as Z } from "./Drawer.utils.js";
-const ne = ({
+import { resolveBearId as P } from "../../utils/generateBearId.utils.js";
+import { useBearId as F } from "../../utils/useBearId.js";
+import { XIcon as W } from "../Icon/index.js";
+import { Backdrop as j } from "../Backdrop/Backdrop.js";
+import { DRAWER_ANIMATION_MS as m, DRAWER_Z_INDEX as X, DRAWER_ROOT_CLASSES as Z, DRAWER_PANEL_Z_INDEX as $, TRANSFORM_OPEN as z, TRANSFORM_CLOSED as q, SIZE_CLASSES as H, POSITION_CLASSES as G, BORDER_SIDE_MAP as J } from "./Drawer.const.js";
+import { lockBodyScroll as K } from "./Drawer.utils.js";
+const se = ({
   isOpen: s,
   onClose: o,
   title: n,
-  children: N,
-  side: g = "right",
-  anchor: E,
-  variant: G = "temporary",
-  size: I = "md",
+  children: _,
+  side: w = "right",
+  anchor: I,
+  variant: Q = "temporary",
+  size: N = "md",
   showCloseButton: f = !0,
-  closeOnBackdrop: _ = !0,
+  closeOnBackdrop: D = !0,
   closeOnEscape: p = !0,
-  className: y,
-  container: D,
-  id: A,
-  testId: B
+  className: A,
+  container: R,
+  id: g,
+  testId: y
 }) => {
-  const M = P("Drawer"), d = F(A, M), { direction: h } = L(), i = E ?? g, r = h === "rtl" && (i === "left" || i === "right") ? i === "left" ? "right" : "left" : i, [a, v] = m(s), [k, b] = m(!1), [x, w] = m(!1);
+  const O = F("Drawer"), d = P(g, O), { direction: h } = C(), i = I ?? w, r = h === "rtl" && (i === "left" || i === "right") ? i === "left" ? "right" : "left" : i, [a, v] = u(s), [k, b] = u(!1), [x, E] = u(!1);
   S(() => {
     if (s) {
       v(!0), b(!1);
-      const e = requestAnimationFrame(() => w(!0));
+      const e = requestAnimationFrame(() => E(!0));
       return () => cancelAnimationFrame(e);
     }
     if (a) {
-      w(!1), b(!0);
+      E(!1), b(!0);
       const e = setTimeout(() => {
         v(!1), b(!1);
-      }, u);
+      }, m);
       return () => clearTimeout(e);
     }
   }, [s, a]);
-  const l = R(
+  const l = M(
     (e) => {
       p && e.key === "Escape" && o();
     },
@@ -50,7 +50,7 @@ const ne = ({
   if (S(() => {
     if (a) {
       document.addEventListener("keydown", l);
-      const e = Z();
+      const e = K();
       return () => {
         document.removeEventListener("keydown", l), e();
       };
@@ -59,64 +59,77 @@ const ne = ({
       document.removeEventListener("keydown", l);
     };
   }, [a, l]), !a) return null;
-  const O = /* @__PURE__ */ c("div", { id: d, "data-testid": B, className: "Bear-Drawer bear-fixed bear-inset-0 bear-z-[11000]", children: [
-    /* @__PURE__ */ t(
-      $,
-      {
-        open: x && !k,
-        keepMounted: !0,
-        blur: !0,
-        transitionDuration: u,
-        className: "Bear-Drawer__backdrop",
-        onClick: _ ? () => o() : void 0
-      }
-    ),
-    /* @__PURE__ */ c(
-      "div",
-      {
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": n ? `${d}-title` : void 0,
-        className: T(
-          "Bear-Drawer__panel",
-          "bear-absolute bear-bg-white dark:bear-bg-neutral-900 bear-shadow-2xl",
-          "bear-border-neutral-200 dark:bear-border-neutral-700",
-          "bear-flex bear-flex-col bear-overflow-hidden",
-          "bear-transform bear-transition-transform",
-          X[r],
-          W[r],
-          H[r][I],
-          x && !k ? q[r] : z[r],
-          y
+  const L = /* @__PURE__ */ c(
+    "div",
+    {
+      id: d,
+      "data-testid": y,
+      className: Z,
+      style: { zIndex: X },
+      children: [
+        /* @__PURE__ */ t(
+          j,
+          {
+            open: x && !k,
+            keepMounted: !0,
+            blur: !0,
+            nested: !0,
+            transitionDuration: m,
+            className: "Bear-Drawer__backdrop",
+            onClick: D ? () => o() : void 0
+          }
         ),
-        style: { transitionDuration: `${u}ms` },
-        children: [
-          (n || f) && /* @__PURE__ */ c("div", { className: "bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-neutral-200 dark:bear-border-neutral-700 bear-shrink-0", dir: h, children: [
-            n && /* @__PURE__ */ t(
-              "h2",
-              {
-                id: `${d}-title`,
-                className: "bear-text-lg bear-font-semibold bear-text-neutral-900 dark:bear-text-white",
-                children: n
-              }
+        /* @__PURE__ */ c(
+          "div",
+          {
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": n ? `${d}-title` : void 0,
+            className: T(
+              "Bear-Drawer__panel",
+              "bear-absolute bear-bg-white dark:bear-bg-neutral-900 bear-shadow-2xl",
+              "bear-border-neutral-200 dark:bear-border-neutral-700",
+              "bear-flex bear-flex-col bear-overflow-hidden",
+              "bear-transform bear-transition-transform",
+              J[r],
+              G[r],
+              H[r][N],
+              x && !k ? z[r] : q[r],
+              A
             ),
-            f && /* @__PURE__ */ t(
-              "button",
-              {
-                onClick: o,
-                className: "bear-p-1 bear-rounded-lg bear-text-neutral-500 dark:bear-text-neutral-400 hover:bear-text-neutral-900 dark:hover:bear-text-white hover:bear-bg-neutral-100 dark:hover:bear-bg-neutral-700 bear-transition-colors",
-                "aria-label": "Close drawer",
-                children: /* @__PURE__ */ t(j, { className: "bear-w-5 bear-h-5" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ t("div", { className: "bear-flex-1 bear-min-h-0 bear-overflow-y-auto bear-overscroll-contain bear-p-4 bear-text-neutral-700 dark:bear-text-neutral-300", children: N })
-        ]
-      }
-    )
-  ] });
-  return C(O, D ?? document.body);
+            style: {
+              transitionDuration: `${m}ms`,
+              zIndex: $
+            },
+            children: [
+              (n || f) && /* @__PURE__ */ c("div", { className: "bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-neutral-200 dark:bear-border-neutral-700 bear-shrink-0", dir: h, children: [
+                n && /* @__PURE__ */ t(
+                  "h2",
+                  {
+                    id: `${d}-title`,
+                    className: "bear-text-lg bear-font-semibold bear-text-neutral-900 dark:bear-text-white",
+                    children: n
+                  }
+                ),
+                f && /* @__PURE__ */ t(
+                  "button",
+                  {
+                    onClick: o,
+                    className: "bear-p-1 bear-rounded-lg bear-text-neutral-500 dark:bear-text-neutral-400 hover:bear-text-neutral-900 dark:hover:bear-text-white hover:bear-bg-neutral-100 dark:hover:bear-bg-neutral-700 bear-transition-colors",
+                    "aria-label": "Close drawer",
+                    children: /* @__PURE__ */ t(W, { className: "bear-w-5 bear-h-5" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ t("div", { className: "bear-flex-1 bear-min-h-0 bear-overflow-y-auto bear-overscroll-contain bear-p-4 bear-text-neutral-700 dark:bear-text-neutral-300", children: _ })
+            ]
+          }
+        )
+      ]
+    }
+  );
+  return B(L, R ?? document.body);
 };
 export {
-  ne as Drawer
+  se as Drawer
 };

package/dist/components/Dropdown/Dropdown.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),t=require("react"),E=require("../../utils/cn.cjs"),J=require("../../hooks/useClickOutside.cjs");require("../../context/BearProvider.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");require("../FormControl/FormControl.context.cjs");const Q=require("../Portal/Portal.cjs"),X=require("./Dropdown.const.cjs"),Y=({trigger:x,items:c,open:j,defaultOpen:m=!1,placement:i="bottom-start",offset:v=4,matchWidth:C=!1,minWidth:h=150,maxHeight:M=300,size:S="md",closeOnSelect:I=!0,closeOnClickOutside:g=!0,disabled:R=!1,onOpenChange:f,className:P,testId:W,...z})=>{const[A,U]=t.useState(m),[b,u]=t.useState(-1),[k,B]=t.useState({top:0,left:0,minWidth:h}),q=t.useRef(null),D=t.useRef(null),L=t.useRef(null),w=j!==void 0,n=w?j:A,p=t.useCallback(e=>{w||U(e),f==null||f(e)},[w,f]),F=t.useCallback(()=>{R||p(!n)},[R,n,p]),d=t.useCallback(()=>{p(!1),u(-1)},[p]),y=t.useCallback(e=>{var r;e.disabled||e.divider||e.header||((r=e.onClick)==null||r.call(e),I&&!e.items&&d())},[I,d]),T=t.useCallback(()=>{n&&g&&d()},[n,g,d]);J.useClickOutsideMultiple([q,D],T,{enabled:n&&g}),t.useEffect(()=>{if(!n)return;const e=c.filter(a=>!a.disabled&&!a.divider&&!a.header),r=a=>{switch(a.key){case"Escape":a.preventDefault(),d();break;case"ArrowDown":a.preventDefault(),u(o=>{const l=o+1;return l>=e.length?0:l});break;case"ArrowUp":a.preventDefault(),u(o=>{const l=o-1;return l<0?e.length-1:l});break;case"Enter":case" ":a.preventDefault(),b>=0&&b<e.length&&y(e[b]);break}};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[n,c,b,d,y]),t.useEffect(()=>{if(!n)return;const e=()=>{var N;const r=(N=L.current)==null?void 0:N.getBoundingClientRect();if(!r)return;const a=window.innerWidth,o=C?r.width:h,Z=i.endsWith("end")?r.right-o:i==="top"||i==="bottom"?r.left+r.width/2-o/2:r.left,G=Math.min(Math.max(8,Z),Math.max(8,a-o-8)),H=i.startsWith("top")?r.top-v:r.bottom+v;B({top:H,left:G,minWidth:o})};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[n,C,h,i,v]),t.useEffect(()=>{n||u(-1)},[n]);const _=t.useMemo(()=>c.map((e,r)=>({item:e,index:r})).filter(({item:e})=>!e.disabled&&!e.divider&&!e.header),[c]),K=(e,r)=>{if(e.divider)return s.jsx("div",{className:"bear-my-1 bear-mx-2 bear-h-px",style:{backgroundColor:"var(--bear-border-default)"},role:"separator"},e.key);if(e.header)return s.jsx("div",{className:"bear-px-3 bear-py-1.5 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider",style:{color:"var(--bear-text-muted)"},children:e.label},e.key);const a=_.findIndex(l=>l.index===r),o=b===a;return s.jsxs("button",{type:"button",role:"menuitem",disabled:e.disabled,onClick:()=>y(e),onMouseEnter:()=>u(a),className:E.cn("bear-w-full bear-flex bear-items-center bear-gap-2 bear-text-left bear-border-none bear-bg-transparent",X.SIZE_CLASSES[S],"bear-transition-colors bear-cursor-pointer",e.selected&&!e.danger&&"bear-bg-[var(--bear-bg-tertiary)] bear-text-[var(--bear-text-primary)]",o&&!e.danger&&"bear-bg-[var(--bear-bg-tertiary)]",e.danger&&"bear-text-red-600 dark:bear-text-red-400 hover:bear-bg-red-50 dark:hover:bear-bg-red-900/20",!e.danger&&!e.disabled&&"hover:bear-bg-[var(--bear-bg-tertiary)]",e.disabled&&"bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none"),style:e.disabled?{color:"var(--bear-text-muted)"}:e.danger?void 0:{color:"var(--bear-text-secondary)"},children:[e.icon&&s.jsx("span",{className:"bear-flex-shrink-0 bear-w-5 bear-h-5 bear-flex bear-items-center bear-justify-center",children:e.icon}),s.jsx("span",{className:"bear-flex-1",children:e.label}),e.trailing&&s.jsx("span",{className:"bear-flex-shrink-0",style:{color:"var(--bear-text-muted)"},children:e.trailing}),e.items&&s.jsx("svg",{className:"bear-w-4 bear-h-4 bear-flex-shrink-0",style:{color:"var(--bear-text-muted)"},viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:s.jsx("polyline",{points:"9 18 15 12 9 6"})})]},e.key)},V=t.isValidElement(x)?t.cloneElement(x,{onClick:F,ref:L,"aria-expanded":n,"aria-haspopup":!0}):x;return s.jsxs("div",{ref:q,className:E.cn("bear-relative bear-inline-block",P),"data-testid":W,...z,children:[V,n&&s.jsx(Q.Portal,{children:s.jsx("div",{ref:D,role:"menu",className:E.cn("bear-fixed","bear-border bear-rounded-lg bear-shadow-lg","bear-py-1 bear-overflow-y-auto","bear-duration-100"),style:{backgroundColor:"var(--bear-bg-primary)",borderColor:"var(--bear-border-default)",minWidth:k.minWidth,maxHeight:M,top:k.top,left:k.left,zIndex:11e3},children:c.map((e,r)=>K(e,r))})})]})};exports.Dropdown=Y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("react"),C=require("../../utils/cn.cjs"),V=require("../../hooks/useClickOutside.cjs");require("../../context/BearProvider.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");const J=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.cjs"),Q=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.cjs");require("../FormControl/FormControl.context.cjs");const Y=require("../OverlayPortal/OverlayPortal.cjs"),u=require("./Dropdown.const.cjs"),$=k=>{const{trigger:x,items:c,open:E,defaultOpen:I=!1,placement:v="bottom-start",offset:N=u.DROPDOWN_DEFAULT_OFFSET_PX,matchWidth:P=!1,minWidth:R=u.DROPDOWN_DEFAULT_MIN_WIDTH_PX,maxHeight:j=u.DROPDOWN_DEFAULT_MAX_HEIGHT_PX,size:q="md",closeOnSelect:O=!0,closeOnClickOutside:h=!0,disabled:D=!1,onOpenChange:f,className:S,testId:A,openEffect:ee,closeEffect:re,effect:ae,...F}=k,{openEffect:W,closeEffect:T}=Q.resolveOverlayEffects(k),[L,M]=r.useState(I),[d,i]=r.useState(-1),_=r.useRef(null),m=r.useRef(null),w=r.useRef(null),g=E!==void 0,a=g?E:L,X=v==="left"||v==="right"?"bottom-start":v,{style:H,ready:U}=J.useFixedAnchorPosition({anchorRef:w,open:a,offsetPx:N,placement:X,matchWidth:P,minWidthPx:R}),p=r.useCallback(e=>{g||M(e),f==null||f(e)},[g,f]),z=r.useCallback(()=>{D||p(!a)},[D,a,p]),l=r.useCallback(()=>{p(!1),i(-1)},[p]),y=r.useCallback(e=>{var n;e.disabled||e.divider||e.header||((n=e.onClick)==null||n.call(e),O&&!e.items&&l())},[O,l]),Z=r.useCallback(()=>{a&&h&&l()},[a,h,l]);V.useClickOutsideMultiple([_,m],Z,{enabled:a&&h}),r.useEffect(()=>{if(!a)return;const e=c.filter(t=>!t.disabled&&!t.divider&&!t.header),n=t=>{switch(t.key){case"Escape":t.preventDefault(),l();break;case"ArrowDown":t.preventDefault(),i(b=>{const o=b+1;return o>=e.length?0:o});break;case"ArrowUp":t.preventDefault(),i(b=>{const o=b-1;return o<0?e.length-1:o});break;case"Enter":case" ":t.preventDefault(),d>=0&&d<e.length&&y(e[d]);break}};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[a,c,d,l,y]),r.useEffect(()=>{a||i(-1)},[a]);const B=r.useMemo(()=>c.map((e,n)=>({item:e,index:n})).filter(({item:e})=>!e.disabled&&!e.divider&&!e.header),[c]),G=(e,n)=>{if(e.divider)return s.jsx("div",{className:"bear-my-1 bear-mx-2 bear-h-px",style:{backgroundColor:"var(--bear-border-default)"},role:"separator"},e.key);if(e.header)return s.jsx("div",{className:"bear-px-3 bear-py-1.5 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider",style:{color:"var(--bear-text-muted)"},children:e.label},e.key);const t=B.findIndex(o=>o.index===n),b=d===t;return s.jsxs("button",{type:"button",role:"menuitem",disabled:e.disabled,onClick:()=>y(e),onMouseEnter:()=>i(t),className:C.cn("bear-w-full bear-flex bear-items-center bear-gap-2 bear-text-left bear-border-none bear-bg-transparent",u.SIZE_CLASSES[q],"bear-transition-colors bear-cursor-pointer",e.selected&&!e.danger&&"bear-bg-[var(--bear-bg-tertiary)] bear-text-[var(--bear-text-primary)]",b&&!e.danger&&"bear-bg-[var(--bear-bg-tertiary)]",e.danger&&"bear-text-red-600 dark:bear-text-red-400 hover:bear-bg-red-50 dark:hover:bear-bg-red-900/20",!e.danger&&!e.disabled&&"hover:bear-bg-[var(--bear-bg-tertiary)]",e.disabled&&"bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none"),style:e.disabled?{color:"var(--bear-text-muted)"}:e.danger?void 0:{color:"var(--bear-text-secondary)"},children:[e.icon&&s.jsx("span",{className:"bear-flex-shrink-0 bear-w-5 bear-h-5 bear-flex bear-items-center bear-justify-center",children:e.icon}),s.jsx("span",{className:"bear-flex-1",children:e.label}),e.trailing&&s.jsx("span",{className:"bear-flex-shrink-0",style:{color:"var(--bear-text-muted)"},children:e.trailing}),e.items&&s.jsx("svg",{className:"bear-w-4 bear-h-4 bear-flex-shrink-0",style:{color:"var(--bear-text-muted)"},viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:s.jsx("polyline",{points:"9 18 15 12 9 6"})})]},e.key)},K=r.isValidElement(x)?r.cloneElement(x,{onClick:z,ref:w,"aria-expanded":a,"aria-haspopup":!0}):x;return s.jsxs("div",{ref:_,className:C.cn("bear-relative bear-inline-block",S),"data-testid":A,...F,children:[K,s.jsx(Y.OverlayPortal,{open:a,ready:U,style:{...H,backgroundColor:"var(--bear-bg-primary)",borderColor:"var(--bear-border-default)",maxHeight:j},zIndex:u.DROPDOWN_Z_INDEX,openEffect:W,closeEffect:T,panelRef:m,className:"bear-border bear-rounded-lg bear-shadow-lg bear-py-1 bear-overflow-y-auto",attributes:{role:"menu"},children:c.map((e,n)=>G(e,n))})]})};exports.Dropdown=$;

package/dist/components/Dropdown/Dropdown.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={xs:"bear-text-xs bear-py-1 bear-px-2",sm:"bear-text-sm bear-py-1.5 bear-px-3",md:"bear-text-sm bear-py-2 bear-px-3",lg:"bear-text-base bear-py-2.5 bear-px-4",xl:"bear-text-lg bear-py-3 bear-px-5"};exports.SIZE_CLASSES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=11e3,_=150,D=300,t=4,r={xs:"bear-text-xs bear-py-1 bear-px-2",sm:"bear-text-sm bear-py-1.5 bear-px-3",md:"bear-text-sm bear-py-2 bear-px-3",lg:"bear-text-base bear-py-2.5 bear-px-4",xl:"bear-text-lg bear-py-3 bear-px-5"};exports.DROPDOWN_DEFAULT_MAX_HEIGHT_PX=D;exports.DROPDOWN_DEFAULT_MIN_WIDTH_PX=_;exports.DROPDOWN_DEFAULT_OFFSET_PX=t;exports.DROPDOWN_Z_INDEX=e;exports.SIZE_CLASSES=r;

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

@@ -1,3 +1,7 @@
+export declare const DROPDOWN_Z_INDEX = 11000;
+export declare const DROPDOWN_DEFAULT_MIN_WIDTH_PX = 150;
+export declare const DROPDOWN_DEFAULT_MAX_HEIGHT_PX = 300;
+export declare const DROPDOWN_DEFAULT_OFFSET_PX = 4;
 export declare const SIZE_CLASSES: {
     readonly xs: "bear-text-xs bear-py-1 bear-px-2";
     readonly sm: "bear-text-sm bear-py-1.5 bear-px-3";

package/dist/components/Dropdown/Dropdown.const.js

@@ -1,4 +1,4 @@
-const e = {
+const e = 11e3, a = 150, b = 300, r = 4, t = {
   xs: "bear-text-xs bear-py-1 bear-px-2",
   sm: "bear-text-sm bear-py-1.5 bear-px-3",
   md: "bear-text-sm bear-py-2 bear-px-3",
@@ -6,5 +6,9 @@ const e = {
   xl: "bear-text-lg bear-py-3 bear-px-5"
 };
 export {
-  e as SIZE_CLASSES
+  b as DROPDOWN_DEFAULT_MAX_HEIGHT_PX,
+  a as DROPDOWN_DEFAULT_MIN_WIDTH_PX,
+  r as DROPDOWN_DEFAULT_OFFSET_PX,
+  e as DROPDOWN_Z_INDEX,
+  t as SIZE_CLASSES
 };

package/dist/components/Dropdown/Dropdown.js

@@ -1,96 +1,92 @@
-import { jsxs as j, jsx as o } from "react/jsx-runtime";
-import { useState as m, useRef as E, useCallback as u, useEffect as I, useMemo as $, isValidElement as O, cloneElement as ee } from "react";
-import { cn as C } from "../../utils/cn.js";
+import { jsxs as I, jsx as n } from "react/jsx-runtime";
+import { useState as N, useRef as m, useCallback as i, useEffect as C, useMemo as Y, isValidElement as $, cloneElement as ee } from "react";
+import { cn as P } from "../../utils/cn.js";
 import { useClickOutsideMultiple as re } from "../../hooks/useClickOutside.js";
 import "../../context/BearProvider.js";
 import "../../hooks/useBearComponent/useBearComponent.js";
+import { useFixedAnchorPosition as ae } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.js";
+import { resolveOverlayEffects as te } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.js";
 import "../FormControl/FormControl.context.js";
-import { Portal as te } from "../Portal/Portal.js";
-import { SIZE_CLASSES as ae } from "./Dropdown.const.js";
-const ve = ({
-  trigger: v,
-  items: d,
-  open: L,
-  defaultOpen: z = !1,
-  placement: i = "bottom-start",
-  offset: x = 4,
-  matchWidth: N = !1,
-  minWidth: h = 150,
-  maxHeight: A = 300,
-  size: U = "md",
-  closeOnSelect: D = !0,
-  closeOnClickOutside: g = !0,
-  disabled: M = !1,
-  onOpenChange: f,
-  className: B,
-  testId: F,
-  ...K
-}) => {
-  const [T, V] = m(z), [b, c] = m(-1), [w, Z] = m({ top: 0, left: 0, minWidth: h }), R = E(null), W = E(null), P = E(null), y = L !== void 0, a = y ? L : T, p = u((e) => {
-    y || V(e), f == null || f(e);
-  }, [y, f]), _ = u(() => {
-    M || p(!a);
-  }, [M, a, p]), l = u(() => {
-    p(!1), c(-1);
-  }, [p]), k = u((e) => {
-    var r;
-    e.disabled || e.divider || e.header || ((r = e.onClick) == null || r.call(e), D && !e.items && l());
-  }, [D, l]), q = u(() => {
-    a && g && l();
-  }, [a, g, l]);
-  re([R, W], q, {
-    enabled: a && g
-  }), I(() => {
-    if (!a) return;
-    const e = d.filter((t) => !t.disabled && !t.divider && !t.header), r = (t) => {
-      switch (t.key) {
+import { OverlayPortal as ne } from "../OverlayPortal/OverlayPortal.js";
+import { DROPDOWN_DEFAULT_OFFSET_PX as oe, DROPDOWN_DEFAULT_MIN_WIDTH_PX as se, DROPDOWN_DEFAULT_MAX_HEIGHT_PX as le, DROPDOWN_Z_INDEX as ce, SIZE_CLASSES as de } from "./Dropdown.const.js";
+const De = (y) => {
+  const {
+    trigger: p,
+    items: l,
+    open: k,
+    defaultOpen: R = !1,
+    placement: v = "bottom-start",
+    offset: W = oe,
+    matchWidth: A = !1,
+    minWidth: F = se,
+    maxHeight: S = le,
+    size: L = "md",
+    closeOnSelect: E = !0,
+    closeOnClickOutside: h = !0,
+    disabled: O = !1,
+    onOpenChange: f,
+    className: T,
+    testId: M,
+    openEffect: be,
+    closeEffect: ie,
+    effect: fe,
+    ...X
+  } = y, { openEffect: H, closeEffect: U } = te(y), [j, z] = N(R), [c, d] = N(-1), D = m(null), _ = m(null), w = m(null), x = k !== void 0, r = x ? k : j, Z = v === "left" || v === "right" ? "bottom-start" : v, { style: B, ready: G } = ae({
+    anchorRef: w,
+    open: r,
+    offsetPx: W,
+    placement: Z,
+    matchWidth: A,
+    minWidthPx: F
+  }), u = i((e) => {
+    x || z(e), f == null || f(e);
+  }, [x, f]), K = i(() => {
+    O || u(!r);
+  }, [O, r, u]), s = i(() => {
+    u(!1), d(-1);
+  }, [u]), g = i((e) => {
+    var t;
+    e.disabled || e.divider || e.header || ((t = e.onClick) == null || t.call(e), E && !e.items && s());
+  }, [E, s]), V = i(() => {
+    r && h && s();
+  }, [r, h, s]);
+  re([D, _], V, {
+    enabled: r && h
+  }), C(() => {
+    if (!r) return;
+    const e = l.filter((a) => !a.disabled && !a.divider && !a.header), t = (a) => {
+      switch (a.key) {
         case "Escape":
-          t.preventDefault(), l();
+          a.preventDefault(), s();
           break;
         case "ArrowDown":
-          t.preventDefault(), c((n) => {
-            const s = n + 1;
-            return s >= e.length ? 0 : s;
+          a.preventDefault(), d((b) => {
+            const o = b + 1;
+            return o >= e.length ? 0 : o;
           });
           break;
         case "ArrowUp":
-          t.preventDefault(), c((n) => {
-            const s = n - 1;
-            return s < 0 ? e.length - 1 : s;
+          a.preventDefault(), d((b) => {
+            const o = b - 1;
+            return o < 0 ? e.length - 1 : o;
           });
           break;
         case "Enter":
         case " ":
-          t.preventDefault(), b >= 0 && b < e.length && k(e[b]);
+          a.preventDefault(), c >= 0 && c < e.length && g(e[c]);
           break;
       }
     };
-    return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
-  }, [a, d, b, l, k]), I(() => {
-    if (!a) return;
-    const e = () => {
-      var S;
-      const r = (S = P.current) == null ? void 0 : S.getBoundingClientRect();
-      if (!r) return;
-      const t = window.innerWidth, n = N ? r.width : h, Q = i.endsWith("end") ? r.right - n : i === "top" || i === "bottom" ? r.left + r.width / 2 - n / 2 : r.left, X = Math.min(Math.max(8, Q), Math.max(8, t - n - 8)), Y = i.startsWith("top") ? r.top - x : r.bottom + x;
-      Z({
-        top: Y,
-        left: X,
-        minWidth: n
-      });
-    };
-    return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
-      window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
-    };
-  }, [a, N, h, i, x]), I(() => {
-    a || c(-1);
-  }, [a]);
-  const G = $(
-    () => d.map((e, r) => ({ item: e, index: r })).filter(({ item: e }) => !e.disabled && !e.divider && !e.header),
-    [d]
-  ), H = (e, r) => {
+    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+  }, [r, l, c, s, g]), C(() => {
+    r || d(-1);
+  }, [r]);
+  const q = Y(
+    () => l.map((e, t) => ({ item: e, index: t })).filter(({ item: e }) => !e.disabled && !e.divider && !e.header),
+    [l]
+  ), J = (e, t) => {
     if (e.divider)
-      return /* @__PURE__ */ o(
+      return /* @__PURE__ */ n(
         "div",
         {
           className: "bear-my-1 bear-mx-2 bear-h-px",
@@ -100,7 +96,7 @@ const ve = ({
         e.key
       );
     if (e.header)
-      return /* @__PURE__ */ o(
+      return /* @__PURE__ */ n(
         "div",
         {
           className: "bear-px-3 bear-py-1.5 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider",
@@ -109,77 +105,74 @@ const ve = ({
         },
         e.key
       );
-    const t = G.findIndex((s) => s.index === r), n = b === t;
-    return /* @__PURE__ */ j(
+    const a = q.findIndex((o) => o.index === t), b = c === a;
+    return /* @__PURE__ */ I(
       "button",
       {
         type: "button",
         role: "menuitem",
         disabled: e.disabled,
-        onClick: () => k(e),
-        onMouseEnter: () => c(t),
-        className: C(
+        onClick: () => g(e),
+        onMouseEnter: () => d(a),
+        className: P(
           "bear-w-full bear-flex bear-items-center bear-gap-2 bear-text-left bear-border-none bear-bg-transparent",
-          ae[U],
+          de[L],
           "bear-transition-colors bear-cursor-pointer",
           e.selected && !e.danger && "bear-bg-[var(--bear-bg-tertiary)] bear-text-[var(--bear-text-primary)]",
-          n && !e.danger && "bear-bg-[var(--bear-bg-tertiary)]",
+          b && !e.danger && "bear-bg-[var(--bear-bg-tertiary)]",
           e.danger && "bear-text-red-600 dark:bear-text-red-400 hover:bear-bg-red-50 dark:hover:bear-bg-red-900/20",
           !e.danger && !e.disabled && "hover:bear-bg-[var(--bear-bg-tertiary)]",
           e.disabled && "bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none"
         ),
         style: e.disabled ? { color: "var(--bear-text-muted)" } : e.danger ? void 0 : { color: "var(--bear-text-secondary)" },
         children: [
-          e.icon && /* @__PURE__ */ o("span", { className: "bear-flex-shrink-0 bear-w-5 bear-h-5 bear-flex bear-items-center bear-justify-center", children: e.icon }),
-          /* @__PURE__ */ o("span", { className: "bear-flex-1", children: e.label }),
-          e.trailing && /* @__PURE__ */ o("span", { className: "bear-flex-shrink-0", style: { color: "var(--bear-text-muted)" }, children: e.trailing }),
-          e.items && /* @__PURE__ */ o("svg", { className: "bear-w-4 bear-h-4 bear-flex-shrink-0", style: { color: "var(--bear-text-muted)" }, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ o("polyline", { points: "9 18 15 12 9 6" }) })
+          e.icon && /* @__PURE__ */ n("span", { className: "bear-flex-shrink-0 bear-w-5 bear-h-5 bear-flex bear-items-center bear-justify-center", children: e.icon }),
+          /* @__PURE__ */ n("span", { className: "bear-flex-1", children: e.label }),
+          e.trailing && /* @__PURE__ */ n("span", { className: "bear-flex-shrink-0", style: { color: "var(--bear-text-muted)" }, children: e.trailing }),
+          e.items && /* @__PURE__ */ n("svg", { className: "bear-w-4 bear-h-4 bear-flex-shrink-0", style: { color: "var(--bear-text-muted)" }, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ n("polyline", { points: "9 18 15 12 9 6" }) })
         ]
       },
       e.key
     );
-  }, J = O(v) ? ee(v, {
-    onClick: _,
-    ref: P,
-    "aria-expanded": a,
+  }, Q = $(p) ? ee(p, {
+    onClick: K,
+    ref: w,
+    "aria-expanded": r,
     "aria-haspopup": !0
-  }) : v;
-  return /* @__PURE__ */ j(
+  }) : p;
+  return /* @__PURE__ */ I(
     "div",
     {
-      ref: R,
-      className: C("bear-relative bear-inline-block", B),
-      "data-testid": F,
-      ...K,
+      ref: D,
+      className: P("bear-relative bear-inline-block", T),
+      "data-testid": M,
+      ...X,
       children: [
-        J,
-        a && /* @__PURE__ */ o(te, { children: /* @__PURE__ */ o(
-          "div",
+        Q,
+        /* @__PURE__ */ n(
+          ne,
           {
-            ref: W,
-            role: "menu",
-            className: C(
-              "bear-fixed",
-              "bear-border bear-rounded-lg bear-shadow-lg",
-              "bear-py-1 bear-overflow-y-auto",
-              "bear-duration-100"
-            ),
+            open: r,
+            ready: G,
             style: {
+              ...B,
               backgroundColor: "var(--bear-bg-primary)",
               borderColor: "var(--bear-border-default)",
-              minWidth: w.minWidth,
-              maxHeight: A,
-              top: w.top,
-              left: w.left,
-              zIndex: 11e3
+              maxHeight: S
             },
-            children: d.map((e, r) => H(e, r))
+            zIndex: ce,
+            openEffect: H,
+            closeEffect: U,
+            panelRef: _,
+            className: "bear-border bear-rounded-lg bear-shadow-lg bear-py-1 bear-overflow-y-auto",
+            attributes: { role: "menu" },
+            children: l.map((e, t) => J(e, t))
           }
-        ) })
+        )
       ]
     }
   );
 };
 export {
-  ve as Dropdown
+  De as Dropdown
 };

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

@@ -1,5 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { BearSize } from '../../types';
+import { OverlayEffectProps } from '../../hooks/useFixedAnchorPosition';
 export interface DropdownItem {
     /** Unique key */
     key: string;
@@ -28,7 +29,7 @@ export interface DropdownItem {
     /** Nested items for submenu */
     items?: DropdownItem[];
 }
-export interface DropdownProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+export interface DropdownProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>, OverlayEffectProps {
     id?: string;
     /** Dropdown trigger element */
     trigger: ReactNode;
@@ -84,6 +85,5 @@ export interface DropdownProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onC
     footer?: ReactNode;
     /** Virtual scrolling for large lists (renders only visible items) */
     virtualized?: boolean;
-    /** Test ID */
     testId?: string;
 }

package/dist/components/FloatingChat/FloatingChat.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),G=require("react-dom"),r=require("../../utils/cn.cjs"),U=require("../../context/BearProvider.cjs"),g=require("../Button/Button.cjs"),P=require("../Avatar/Avatar.cjs"),o=require("../Typography/Typography.cjs"),M=require("../Badge/Badge.cjs"),l=require("../Icon/index.cjs"),$=require("../Chat/Chat.cjs"),t=require("./FloatingChat.const.cjs"),Z=({messages:d,onSend:j,isLoading:b=!1,isTyping:S=!1,title:h=t.FLOATING_CHAT_DEFAULTS.TITLE,subtitle:_=t.FLOATING_CHAT_DEFAULTS.SUBTITLE,avatar:w,position:m=t.FLOATING_CHAT_DEFAULTS.POSITION,bottom:x=t.FLOATING_CHAT_DEFAULTS.BOTTOM,side:u=t.FLOATING_CHAT_DEFAULTS.SIDE,defaultOpen:E=!1,open:F,onOpenChange:s,trigger:T,badgeCount:i,header:y,welcomeMessage:p=t.FLOATING_CHAT_DEFAULTS.WELCOME_MESSAGE,poweredBy:A,className:L,testId:D})=>{const{mode:q}=U.useBear(),B=q==="dark",[C,v]=c.useState(E),[N,n]=c.useState(!1),a=F??C,I=c.useCallback(()=>{const f=!a;n(!0),v(f),s==null||s(f),setTimeout(()=>n(!1),300)},[a,s]),H=c.useCallback(()=>{n(!0),v(!1),s==null||s(!1),setTimeout(()=>n(!1),300)},[s]),k=d.length===0&&p?[{id:"welcome",content:p,sender:"bot",timestamp:new Date}]:d,z={bottom:`${x}px`,[m==="bottom-right"?"right":"left"]:`${u}px`},O={bottom:`${x+70}px`,[m==="bottom-right"?"right":"left"]:`${u}px`,width:t.CHAT_WINDOW_SIZE.width,height:t.CHAT_WINDOW_SIZE.height},W=e.jsxs("div",{className:r.cn("Bear-FloatingChat",L),"data-testid":D,children:[(a||N)&&e.jsxs("div",{className:r.cn("fixed z-50 rounded-2xl overflow-hidden shadow-2xl","transition-all duration-300 ease-out",a&&!N?"opacity-100 translate-y-0 scale-100":"opacity-0 translate-y-4 scale-95 pointer-events-none"),style:O,children:[y?e.jsx("div",{className:r.cn("px-4 py-3",B?"bg-gray-800":"bg-[var(--bear-primary-500)]"),children:y}):e.jsxs("div",{className:r.cn("px-4 py-3 flex items-center gap-3","bg-[var(--bear-primary-500)] text-white"),children:[e.jsx(P.Avatar,{src:w,initials:h[0],size:"sm",className:"ring-2 ring-white/20"}),e.jsxs("div",{className:"flex-1",children:[e.jsx(o.Typography,{variant:"subtitle2",className:"text-white font-semibold",children:h}),e.jsx(o.Typography,{variant:"caption",className:"text-white/70",children:_})]}),e.jsx(g.Button,{variant:"ghost",size:"sm",onClick:H,className:"!text-white hover:!bg-white/10",children:e.jsx(l.BearIcons.XIcon,{size:18})})]}),e.jsx($.Chat,{messages:k,onSend:j,isLoading:b,isTyping:S,showAvatars:!1,height:t.CHAT_WINDOW_SIZE.height-140,className:"!rounded-none !border-0"}),A&&e.jsx("div",{className:"px-3 py-2 text-center border-t border-gray-200 dark:border-gray-700",children:e.jsxs(o.Typography,{variant:"caption",className:"opacity-50",children:["Powered by ",A]})})]}),e.jsx("div",{className:"fixed z-50",style:z,children:T?e.jsx("div",{onClick:I,children:T}):e.jsxs("div",{className:"relative",children:[e.jsx(g.Button,{variant:"primary",onClick:I,className:r.cn("!w-14 !h-14 !rounded-full !p-0 shadow-lg","transition-transform duration-200",a&&"rotate-180"),children:a?e.jsx(l.BearIcons.XIcon,{size:24}):e.jsx(l.BearIcons.ChatIcon,{size:24})}),!a&&i&&i>0&&e.jsx(M.Badge,{variant:"danger",size:"sm",className:"absolute -top-1 -right-1 !min-w-[20px] !h-5",children:i>99?"99+":i})]})})]});return typeof document>"u"?null:G.createPortal(W,document.body)};exports.FloatingChat=Z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),G=require("react-dom"),r=require("../../utils/cn.cjs"),U=require("../../context/BearProvider.cjs"),g=require("../Button/Button.cjs"),P=require("../Avatar/Avatar.cjs");require("../Box/Box.cjs");const o=require("../Typography/Typography.cjs"),M=require("../Badge/Badge.cjs"),l=require("../Icon/index.cjs"),$=require("../Chat/Chat.cjs"),t=require("./FloatingChat.const.cjs"),Z=({messages:d,onSend:j,isLoading:b=!1,isTyping:S=!1,title:h=t.FLOATING_CHAT_DEFAULTS.TITLE,subtitle:_=t.FLOATING_CHAT_DEFAULTS.SUBTITLE,avatar:w,position:m=t.FLOATING_CHAT_DEFAULTS.POSITION,bottom:u=t.FLOATING_CHAT_DEFAULTS.BOTTOM,side:x=t.FLOATING_CHAT_DEFAULTS.SIDE,defaultOpen:E=!1,open:F,onOpenChange:s,trigger:T,badgeCount:i,header:y,welcomeMessage:p=t.FLOATING_CHAT_DEFAULTS.WELCOME_MESSAGE,poweredBy:A,className:L,testId:q})=>{const{mode:D}=U.useBear(),B=D==="dark",[C,v]=c.useState(E),[N,n]=c.useState(!1),a=F??C,I=c.useCallback(()=>{const f=!a;n(!0),v(f),s==null||s(f),setTimeout(()=>n(!1),300)},[a,s]),H=c.useCallback(()=>{n(!0),v(!1),s==null||s(!1),setTimeout(()=>n(!1),300)},[s]),k=d.length===0&&p?[{id:"welcome",content:p,sender:"bot",timestamp:new Date}]:d,z={bottom:`${u}px`,[m==="bottom-right"?"right":"left"]:`${x}px`},O={bottom:`${u+70}px`,[m==="bottom-right"?"right":"left"]:`${x}px`,width:t.CHAT_WINDOW_SIZE.width,height:t.CHAT_WINDOW_SIZE.height},W=e.jsxs("div",{className:r.cn("Bear-FloatingChat",L),"data-testid":q,children:[(a||N)&&e.jsxs("div",{className:r.cn("fixed z-50 rounded-2xl overflow-hidden shadow-2xl","transition-all duration-300 ease-out",a&&!N?"opacity-100 translate-y-0 scale-100":"opacity-0 translate-y-4 scale-95 pointer-events-none"),style:O,children:[y?e.jsx("div",{className:r.cn("px-4 py-3",B?"bg-gray-800":"bg-[var(--bear-primary-500)]"),children:y}):e.jsxs("div",{className:r.cn("px-4 py-3 flex items-center gap-3","bg-[var(--bear-primary-500)] text-white"),children:[e.jsx(P.Avatar,{src:w,initials:h[0],size:"sm",className:"ring-2 ring-white/20"}),e.jsxs("div",{className:"flex-1",children:[e.jsx(o.Typography,{variant:"subtitle2",className:"text-white font-semibold",children:h}),e.jsx(o.Typography,{variant:"caption",className:"text-white/70",children:_})]}),e.jsx(g.Button,{variant:"ghost",size:"sm",onClick:H,className:"!text-white hover:!bg-white/10",children:e.jsx(l.BearIcons.XIcon,{size:18})})]}),e.jsx($.Chat,{messages:k,onSend:j,isLoading:b,isTyping:S,showAvatars:!1,height:t.CHAT_WINDOW_SIZE.height-140,className:"!rounded-none !border-0"}),A&&e.jsx("div",{className:"px-3 py-2 text-center border-t border-gray-200 dark:border-gray-700",children:e.jsxs(o.Typography,{variant:"caption",className:"opacity-50",children:["Powered by ",A]})})]}),e.jsx("div",{className:"fixed z-50",style:z,children:T?e.jsx("div",{onClick:I,children:T}):e.jsxs("div",{className:"relative",children:[e.jsx(g.Button,{variant:"primary",onClick:I,className:r.cn("!w-14 !h-14 !rounded-full !p-0 shadow-lg","transition-transform duration-200",a&&"rotate-180"),children:a?e.jsx(l.BearIcons.XIcon,{size:24}):e.jsx(l.BearIcons.ChatIcon,{size:24})}),!a&&i&&i>0&&e.jsx(M.Badge,{variant:"danger",size:"sm",className:"absolute -top-1 -right-1 !min-w-[20px] !h-5",children:i>99?"99+":i})]})})]});return typeof document>"u"?null:G.createPortal(W,document.body)};exports.FloatingChat=Z;