@forgedevstack/bear 1.2.4 → 1.2.6

package/dist/components/List/List.js

@@ -1,195 +1,205 @@
-import { jsx as b, jsxs as f } from "react/jsx-runtime";
-import { createContext as k, forwardRef as p, useContext as w } from "react";
-import { cn as n } from "../../utils/cn.js";
-import { LIST_VARIANT_CLASSES as A, LIST_SIZE_CLASSES as E, LIST_PADDING_CLASSES as _, LIST_BASE_CLASSES as D } from "./List.const.js";
-const v = k({}), T = () => w(v), P = p((r, e) => {
+import { jsx as s, jsxs as y } from "react/jsx-runtime";
+import { createContext as w, forwardRef as v, useContext as A } from "react";
+import { cn as i } from "../../utils/cn.js";
+import { LIST_VARIANT_CLASSES as D, LIST_SIZE_CLASSES as E, LIST_PADDING_CLASSES as B, LIST_BASE_CLASSES as T } from "./List.const.js";
+const L = w({}), P = () => A(L), K = v((a, e) => {
   const {
-    variant: s = "default",
-    size: a = "md",
-    hoverable: i = !1,
-    dense: t = !1,
-    disablePadding: x = !1,
-    className: o,
-    children: c,
-    testId: l,
-    ...m
-  } = r;
-  return /* @__PURE__ */ b(v.Provider, { value: { dense: t, hoverable: i }, children: /* @__PURE__ */ b(
+    variant: t = "default",
+    size: r = "md",
+    hoverable: o = !1,
+    dense: n = !1,
+    disablePadding: b = !1,
+    className: l,
+    children: m,
+    testId: g,
+    ...c
+  } = a;
+  return /* @__PURE__ */ s(L.Provider, { value: { dense: n, hoverable: o }, children: /* @__PURE__ */ s(
     "ul",
     {
       ref: e,
       role: "list",
-      className: n(
-        D,
-        !x && _,
-        E[a],
-        A[s],
-        o
+      className: i(
+        T,
+        !b && B,
+        E[r],
+        D[t],
+        l
       ),
-      "data-testid": l,
-      ...m,
-      children: c
+      "data-testid": g,
+      ...c,
+      children: m
     }
   ) });
 });
-P.displayName = "List";
-const j = p(({
-  primary: r,
+K.displayName = "List";
+const j = v(({
+  primary: a,
   secondary: e,
-  leading: s,
-  trailing: a,
-  selected: i = !1,
-  disabled: t = !1,
-  clickable: x = !1,
-  divider: o = !1,
-  dense: c,
-  onClick: l,
-  className: m,
-  children: h,
-  testId: u,
+  leading: t,
+  trailing: r,
+  secondaryAction: o,
+  selected: n = !1,
+  disabled: b = !1,
+  clickable: l = !1,
+  divider: m = !1,
+  dense: g,
+  onClick: c,
+  className: h,
+  children: u,
+  testId: I,
   ...N
 }, S) => {
-  const { dense: L, hoverable: I } = T(), g = c ?? L, d = x || !!l;
-  return /* @__PURE__ */ f(
+  const { dense: k, hoverable: _ } = P(), p = g ?? k, x = l || !!c, f = o ?? r;
+  return /* @__PURE__ */ y(
     "li",
     {
       ref: S,
-      role: d ? "button" : "listitem",
-      tabIndex: d && !t ? 0 : void 0,
-      "aria-selected": i,
-      "aria-disabled": t,
-      onClick: t ? void 0 : l,
-      onKeyDown: (y) => {
-        !t && (y.key === "Enter" || y.key === " ") && (y.preventDefault(), l == null || l());
+      role: x ? "button" : "listitem",
+      tabIndex: x && !b ? 0 : void 0,
+      "aria-selected": n,
+      "aria-disabled": b,
+      onClick: b ? void 0 : c,
+      onKeyDown: (d) => {
+        !b && (d.key === "Enter" || d.key === " ") && (d.preventDefault(), c == null || c());
       },
-      className: n(
+      className: i(
+        "Bear-ListItem",
         "bear-flex bear-items-center bear-gap-3",
-        g ? "bear-py-1 bear-px-3" : "bear-py-2 bear-px-4",
-        d && !t && "bear-cursor-pointer",
-        (I || d) && !t && "hover:bear-bg-gray-100 dark:hover:bear-bg-gray-800",
-        i && "bear-bg-primary-50 dark:bear-bg-primary-900/20",
-        t && "bear-opacity-50 bear-cursor-not-allowed",
-        o && "bear-border-b bear-border-gray-200 dark:bear-border-gray-700",
-        m
+        p ? "bear-py-1 bear-px-3" : "bear-py-2 bear-px-4",
+        x && !b && "bear-cursor-pointer",
+        (_ || x) && !b && "hover:bear-bg-gray-100 dark:hover:bear-bg-gray-800",
+        n && "bear-bg-primary-50 dark:bear-bg-primary-900/20",
+        b && "bear-opacity-50 bear-cursor-not-allowed",
+        m && "bear-border-b bear-border-gray-200 dark:bear-border-gray-700",
+        h
       ),
-      "data-testid": u,
+      "data-testid": I,
       ...N,
       children: [
-        s && /* @__PURE__ */ b("div", { className: "bear-flex-shrink-0 bear-text-gray-500 dark:bear-text-gray-400", children: s }),
-        r || e ? /* @__PURE__ */ f("div", { className: "bear-flex-1 bear-min-w-0", children: [
-          r && /* @__PURE__ */ b("div", { className: "bear-text-gray-900 dark:bear-text-gray-100 bear-truncate", children: r }),
-          e && /* @__PURE__ */ b("div", { className: n(
+        t && /* @__PURE__ */ s("div", { className: "Bear-ListItem__leading bear-flex-shrink-0 bear-text-gray-500 dark:bear-text-gray-400", children: t }),
+        a || e ? /* @__PURE__ */ y("div", { className: "Bear-ListItem__content bear-flex-1 bear-min-w-0", children: [
+          a && /* @__PURE__ */ s("div", { className: "bear-text-gray-900 dark:bear-text-gray-100 bear-truncate", children: a }),
+          e && /* @__PURE__ */ s("div", { className: i(
             "bear-text-gray-500 dark:bear-text-gray-400 bear-truncate",
-            g ? "bear-text-xs" : "bear-text-sm"
+            p ? "bear-text-xs" : "bear-text-sm"
           ), children: e })
-        ] }) : /* @__PURE__ */ b("div", { className: "bear-flex-1 bear-min-w-0", children: h }),
-        a && /* @__PURE__ */ b("div", { className: "bear-flex-shrink-0 bear-text-gray-500 dark:bear-text-gray-400", children: a })
+        ] }) : /* @__PURE__ */ s("div", { className: "Bear-ListItem__content bear-flex-1 bear-min-w-0", children: u }),
+        f && /* @__PURE__ */ s(
+          "div",
+          {
+            className: "Bear-ListItem__secondary-action bear-flex-shrink-0 bear-text-gray-500 dark:bear-text-gray-400",
+            onClick: (d) => d.stopPropagation(),
+            onKeyDown: (d) => d.stopPropagation(),
+            children: f
+          }
+        )
       ]
     }
   );
 });
 j.displayName = "ListItem";
-const G = ({
-  sticky: r = !1,
+const V = ({
+  sticky: a = !1,
   inset: e = !1,
-  className: s,
-  children: a,
-  testId: i,
-  ...t
-}) => /* @__PURE__ */ b(
+  className: t,
+  children: r,
+  testId: o,
+  ...n
+}) => /* @__PURE__ */ s(
   "li",
   {
     role: "presentation",
-    className: n(
+    className: i(
       "bear-py-2 bear-px-4 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider",
       "bear-text-gray-500 dark:bear-text-gray-400",
       "bear-bg-gray-50 dark:bear-bg-gray-800/50",
-      r && "bear-sticky bear-top-0 bear-z-10",
+      a && "bear-sticky bear-top-0 bear-z-10",
       e && "bear-pl-12",
-      s
+      t
     ),
-    "data-testid": i,
-    ...t,
-    children: a
+    "data-testid": o,
+    ...n,
+    children: r
   }
-), V = ({
-  primary: r,
+), Z = ({
+  primary: a,
   secondary: e,
-  inset: s = !1,
-  dense: a = !1,
-  className: i,
-  ...t
-}) => /* @__PURE__ */ f(
+  inset: t = !1,
+  dense: r = !1,
+  className: o,
+  ...n
+}) => /* @__PURE__ */ y(
   "div",
   {
-    className: n(
+    className: i(
       "bear-flex-1 bear-min-w-0",
-      s && "bear-pl-9",
-      i
+      t && "bear-pl-9",
+      o
     ),
-    ...t,
+    ...n,
     children: [
-      r && /* @__PURE__ */ b("div", { className: "bear-text-gray-900 dark:bear-text-gray-100", children: r }),
-      e && /* @__PURE__ */ b("div", { className: n(
+      a && /* @__PURE__ */ s("div", { className: "bear-text-gray-900 dark:bear-text-gray-100", children: a }),
+      e && /* @__PURE__ */ s("div", { className: i(
         "bear-text-gray-500 dark:bear-text-gray-400",
-        a ? "bear-text-xs" : "bear-text-sm"
+        r ? "bear-text-xs" : "bear-text-sm"
       ), children: e })
     ]
   }
-), Z = ({
-  align: r = "center",
+), q = ({
+  align: a = "center",
   className: e,
-  children: s,
-  ...a
-}) => /* @__PURE__ */ b(
+  children: t,
+  ...r
+}) => /* @__PURE__ */ s(
   "div",
   {
-    className: n(
+    className: i(
       "bear-flex-shrink-0 bear-min-w-[36px]",
       "bear-text-gray-500 dark:bear-text-gray-400",
-      r === "top" && "bear-self-start bear-mt-1",
+      a === "top" && "bear-self-start bear-mt-1",
       e
     ),
-    ...a,
-    children: s
+    ...r,
+    children: t
   }
-), q = ({
-  selected: r = !1,
+), F = ({
+  selected: a = !1,
   disabled: e = !1,
-  dense: s = !1,
-  onClick: a,
-  className: i,
-  children: t,
-  ...x
-}) => /* @__PURE__ */ b(
+  dense: t = !1,
+  onClick: r,
+  className: o,
+  children: n,
+  ...b
+}) => /* @__PURE__ */ s(
   "div",
   {
     role: "button",
     tabIndex: e ? -1 : 0,
-    "aria-selected": r,
+    "aria-selected": a,
     "aria-disabled": e,
-    onClick: e ? void 0 : a,
-    onKeyDown: (o) => {
-      !e && (o.key === "Enter" || o.key === " ") && (o.preventDefault(), a == null || a());
+    onClick: e ? void 0 : r,
+    onKeyDown: (l) => {
+      !e && (l.key === "Enter" || l.key === " ") && (l.preventDefault(), r == null || r());
     },
-    className: n(
+    className: i(
       "bear-flex bear-items-center bear-gap-3 bear-w-full bear-text-left",
-      s ? "bear-py-1 bear-px-3" : "bear-py-2 bear-px-4",
+      t ? "bear-py-1 bear-px-3" : "bear-py-2 bear-px-4",
       "bear-cursor-pointer bear-transition-colors",
       "hover:bear-bg-gray-100 dark:hover:bear-bg-gray-800",
-      r && "bear-bg-primary-50 dark:bear-bg-primary-900/20",
+      a && "bear-bg-primary-50 dark:bear-bg-primary-900/20",
       e && "bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none",
-      i
+      o
     ),
-    ...x,
-    children: t
+    ...b,
+    children: n
   }
 );
 export {
-  P as List,
+  K as List,
   j as ListItem,
-  q as ListItemButton,
-  Z as ListItemIcon,
-  V as ListItemText,
-  G as ListSubheader
+  F as ListItemButton,
+  q as ListItemIcon,
+  Z as ListItemText,
+  V as ListSubheader
 };

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

@@ -24,6 +24,8 @@ export interface ListItemProps extends HTMLAttributes<HTMLLIElement> {
     leading?: ReactNode;
     /** Trailing content (icon, button, badge) */
     trailing?: ReactNode;
+    /** Secondary action rendered after content; clicks do not trigger the row onClick */
+    secondaryAction?: ReactNode;
     /** Whether item is selected */
     selected?: boolean;
     /** Whether item is disabled */

package/dist/components/MentionsInput/MentionsInput.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("react"),k=require("../../utils/cn.cjs"),W=require("../Portal/Portal.cjs"),Z=require("./MentionsInput.utils.cjs"),G=1e4,J={sm:"bear-h-8 bear-text-sm bear-px-3",md:"bear-h-10 bear-text-base bear-px-4",lg:"bear-h-12 bear-text-lg bear-px-5"},X=({value:x,defaultValue:L="",onChange:o,onMentionSelect:w,options:O,trigger:l="@",placeholder:P="Type @ to mention...",disabled:E=!1,maxSuggestions:D=5,filterOptions:T=Z.defaultFilter,size:A="md",fullWidth:_=!1,className:$})=>{const[B,I]=r.useState(L),[d,K]=r.useState(""),[Q,f]=r.useState(!1),[u,h]=r.useState(0),[p,F]=r.useState(null),q=r.useRef(null),g=r.useRef(null),m=r.useRef(null),z=r.useRef(null),[v,H]=r.useState({top:0,left:0,width:0}),i=x??B,b=T(O,d).slice(0,D),R=Q&&d.length>=0,y=R&&b.length>0,j=r.useCallback(()=>{const e=i.lastIndexOf(l);if(e===-1)return{query:"",start:null};const t=i.slice(e+l.length),n=t.indexOf(" ");return{query:n===-1?t:t.slice(0,n),start:e}},[i,l]);r.useEffect(()=>{const{query:e,start:t}=j();K(e),F(t),f(t!==null&&!e.includes(" "))},[i,j]),r.useEffect(()=>{h(0)},[d]),r.useEffect(()=>{if(u>=0&&m.current){const e=m.current.children[u];e==null||e.scrollIntoView({block:"nearest"})}},[u]),r.useEffect(()=>{if(!y)return;const e=()=>{var n;const t=(n=g.current)==null?void 0:n.getBoundingClientRect();t&&H({top:t.bottom+4,left:Math.max(8,Math.min(t.left,window.innerWidth-t.width-8)),width:t.width})};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[y]),r.useEffect(()=>{const e=t=>{var s,c;const n=t.target;(s=q.current)!=null&&s.contains(n)||(c=z.current)!=null&&c.contains(n)||f(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const M=e=>{const t=new RegExp(`${l}(\\w+)`,"g"),n=[];let s;for(;(s=t.exec(e))!==null;)n.push(s[1]);return[...new Set(n)]},U=e=>{const t=e.target.value;x===void 0&&I(t),o==null||o(t,M(t))},N=e=>{var S;if(p==null)return;const t=i.slice(0,p),n=i.slice(p+l.length+d.length),s=`${l}${e.value}`,c=t+s+" "+n;x===void 0&&I(c),o==null||o(c,M(c)),w==null||w(e),f(!1),(S=g.current)==null||S.focus()},V=e=>{if(!(!R||b.length===0)){if(e.key==="ArrowDown"){e.preventDefault(),h(t=>Math.min(t+1,b.length-1));return}if(e.key==="ArrowUp"){e.preventDefault(),h(t=>Math.max(t-1,0));return}if(e.key==="Enter"||e.key==="Tab"){e.preventDefault();const t=b[u];t&&N(t);return}e.key==="Escape"&&f(!1)}};return a.jsxs("div",{ref:q,className:k.cn("Bear-MentionsInput bear-relative",_&&"bear-w-full",$),children:[a.jsx("input",{ref:g,type:"text",value:i,onChange:U,onKeyDown:V,placeholder:P,disabled:E,className:k.cn("bear-w-full bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-900 bear-text-gray-900 dark:bear-text-white placeholder:bear-text-gray-500 dark:placeholder:bear-text-zinc-500 bear-outline-none bear-transition-colors focus:bear-border-bear-500 focus:bear-ring-2 focus:bear-ring-bear-500/20",E&&"bear-opacity-50 bear-cursor-not-allowed",J[A])}),y&&a.jsx(W.Portal,{children:a.jsx("div",{ref:z,className:"bear-fixed bear-rounded-lg bear-border bear-border-gray-200 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-800 bear-shadow-lg",style:{top:v.top,left:v.left,width:v.width,zIndex:G},children:a.jsx("div",{ref:m,className:"bear-max-h-48 bear-overflow-auto bear-py-1",children:b.map((e,t)=>a.jsxs("button",{type:"button",className:k.cn("bear-w-full bear-flex bear-items-center bear-gap-2 bear-px-3 bear-py-2 bear-text-left bear-text-gray-800 dark:bear-text-zinc-200 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700 bear-transition-colors",t===u&&"bear-bg-gray-100 dark:bear-bg-zinc-700"),onMouseEnter:()=>h(t),onClick:()=>N(e),children:[e.avatar&&a.jsx("span",{className:"bear-shrink-0",children:e.avatar}),a.jsx("span",{children:e.label})]},e.value))})})})]})};exports.MentionsInput=X;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),t=require("react"),w=require("../../utils/cn.cjs"),C=require("../Portal/Portal.cjs"),G=require("./MentionsInput.utils.cjs"),J=1e4,X=3,Y={sm:"bear-h-8 bear-text-sm bear-px-3",md:"bear-h-10 bear-text-base bear-px-4",lg:"bear-h-12 bear-text-lg bear-px-5"},ee={sm:"bear-text-sm bear-px-3 bear-py-2",md:"bear-text-base bear-px-4 bear-py-2",lg:"bear-text-lg bear-px-5 bear-py-3"},re=({value:g,defaultValue:T="",onChange:i,onMentionSelect:y,options:_,trigger:l="@",placeholder:z="Type @ to mention...",disabled:d=!1,maxSuggestions:A=5,filterOptions:K=G.defaultFilter,size:I="md",fullWidth:U=!1,className:$,multiline:B=!1,rows:F=X})=>{const[Q,R]=t.useState(T),[f,W]=t.useState(""),[H,x]=t.useState(!1),[b,h]=t.useState(0),[m,V]=t.useState(null),q=t.useRef(null),p=t.useRef(null),v=t.useRef(null),j=t.useRef(null),[k,Z]=t.useState({top:0,left:0,width:0}),s=g??Q,u=K(_,f).slice(0,A),L=H&&f.length>=0,E=L&&u.length>0,M=t.useCallback(()=>{const e=s.lastIndexOf(l);if(e===-1)return{query:"",start:null};const r=s.slice(e+l.length),a=r.indexOf(" ");return{query:a===-1?r:r.slice(0,a),start:e}},[s,l]);t.useEffect(()=>{const{query:e,start:r}=M();W(e),V(r),x(r!==null&&!e.includes(" "))},[s,M]),t.useEffect(()=>{h(0)},[f]),t.useEffect(()=>{if(b>=0&&v.current){const e=v.current.children[b];e==null||e.scrollIntoView({block:"nearest"})}},[b]),t.useEffect(()=>{if(!E)return;const e=()=>{var a;const r=(a=p.current)==null?void 0:a.getBoundingClientRect();r&&Z({top:r.bottom+4,left:Math.max(8,Math.min(r.left,window.innerWidth-r.width-8)),width:r.width})};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[E]),t.useEffect(()=>{const e=r=>{var o,c;const a=r.target;(o=q.current)!=null&&o.contains(a)||(c=j.current)!=null&&c.contains(a)||x(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const N=e=>{const r=new RegExp(`${l}(\\w+)`,"g"),a=[];let o;for(;(o=r.exec(e))!==null;)a.push(o[1]);return[...new Set(a)]},S=e=>{const r=e.target.value;g===void 0&&R(r),i==null||i(r,N(r))},O=e=>{var P;if(m==null)return;const r=s.slice(0,m),a=s.slice(m+l.length+f.length),o=`${l}${e.value}`,c=r+o+" "+a;g===void 0&&R(c),i==null||i(c,N(c)),y==null||y(e),x(!1),(P=p.current)==null||P.focus()},D=e=>{if(!(!L||u.length===0)){if(e.key==="ArrowDown"){e.preventDefault(),h(r=>Math.min(r+1,u.length-1));return}if(e.key==="ArrowUp"){e.preventDefault(),h(r=>Math.max(r-1,0));return}if(e.key==="Enter"||e.key==="Tab"){e.preventDefault();const r=u[b];r&&O(r);return}e.key==="Escape"&&x(!1)}};return n.jsxs("div",{ref:q,className:w.cn("Bear-MentionsInput bear-relative",U&&"bear-w-full",$),children:[B?n.jsx("textarea",{ref:p,value:s,rows:F,onChange:S,onKeyDown:D,placeholder:z,disabled:d,className:w.cn("bear-w-full bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-900 bear-text-gray-900 dark:bear-text-white placeholder:bear-text-gray-500 dark:placeholder:bear-text-zinc-500 bear-outline-none bear-transition-colors focus:bear-border-bear-500 focus:bear-ring-2 focus:bear-ring-bear-500/20 bear-resize-none",d&&"bear-opacity-50 bear-cursor-not-allowed",ee[I])}):n.jsx("input",{ref:p,type:"text",value:s,onChange:S,onKeyDown:D,placeholder:z,disabled:d,className:w.cn("bear-w-full bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-900 bear-text-gray-900 dark:bear-text-white placeholder:bear-text-gray-500 dark:placeholder:bear-text-zinc-500 bear-outline-none bear-transition-colors focus:bear-border-bear-500 focus:bear-ring-2 focus:bear-ring-bear-500/20",d&&"bear-opacity-50 bear-cursor-not-allowed",Y[I])}),E&&n.jsx(C.Portal,{children:n.jsx("div",{ref:j,className:"bear-fixed bear-rounded-lg bear-border bear-border-gray-200 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-800 bear-shadow-lg",style:{top:k.top,left:k.left,width:k.width,zIndex:J},children:n.jsx("div",{ref:v,className:"bear-max-h-48 bear-overflow-auto bear-py-1",children:u.map((e,r)=>n.jsxs("button",{type:"button",className:w.cn("bear-w-full bear-flex bear-items-center bear-gap-2 bear-px-3 bear-py-2 bear-text-left bear-text-gray-800 dark:bear-text-zinc-200 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700 bear-transition-colors",r===b&&"bear-bg-gray-100 dark:bear-bg-zinc-700"),onMouseEnter:()=>h(r),onClick:()=>O(e),children:[e.avatar&&n.jsx("span",{className:"bear-shrink-0",children:e.avatar}),n.jsx("span",{children:e.label})]},e.value))})})})]})};exports.MentionsInput=re;

package/dist/components/MentionsInput/MentionsInput.js

@@ -1,149 +1,171 @@
-import { jsxs as T, jsx as l } from "react/jsx-runtime";
-import { useState as c, useRef as p, useCallback as J, useEffect as d } from "react";
-import { cn as z } from "../../utils/cn.js";
-import { Portal as X } from "../Portal/Portal.js";
-import { defaultFilter as Y } from "./MentionsInput.utils.js";
-const C = 1e4, ee = {
+import { jsxs as K, jsx as s } from "react/jsx-runtime";
+import { useState as b, useRef as w, useCallback as X, useEffect as d } from "react";
+import { cn as g } from "../../utils/cn.js";
+import { Portal as Y } from "../Portal/Portal.js";
+import { defaultFilter as ee } from "./MentionsInput.utils.js";
+const re = 1e4, te = 3, ae = {
   sm: "bear-h-8 bear-text-sm bear-px-3",
   md: "bear-h-10 bear-text-base bear-px-4",
   lg: "bear-h-12 bear-text-lg bear-px-5"
-}, oe = ({
-  value: w,
-  defaultValue: A = "",
-  onChange: s,
-  onMentionSelect: x,
+}, ne = {
+  sm: "bear-text-sm bear-px-3 bear-py-2",
+  md: "bear-text-base bear-px-4 bear-py-2",
+  lg: "bear-text-lg bear-px-5 bear-py-3"
+}, ce = ({
+  value: y,
+  defaultValue: U = "",
+  onChange: o,
+  onMentionSelect: v,
   options: $,
-  trigger: o = "@",
-  placeholder: j = "Type @ to mention...",
-  disabled: I = !1,
-  maxSuggestions: B = 5,
-  filterOptions: K = Y,
-  size: Q = "md",
-  fullWidth: S = !1,
-  className: _
+  trigger: i = "@",
+  placeholder: L = "Type @ to mention...",
+  disabled: f = !1,
+  maxSuggestions: j = 5,
+  filterOptions: B = ee,
+  size: N = "md",
+  fullWidth: F = !1,
+  className: Q,
+  multiline: W = !1,
+  rows: H = te
 }) => {
-  const [F, N] = c(A), [f, H] = c(""), [U, h] = c(!1), [u, m] = c(0), [g, V] = c(null), L = p(null), v = p(null), y = p(null), q = p(null), [k, W] = c({ top: 0, left: 0, width: 0 }), a = w ?? F, b = K($, f).slice(0, B), M = U && f.length >= 0, E = M && b.length > 0, O = J(() => {
-    const e = a.lastIndexOf(o);
+  const [V, D] = b(U), [h, Z] = b(""), [C, p] = b(!1), [c, x] = b(0), [k, G] = b(null), M = w(null), m = w(null), z = w(null), O = w(null), [E, J] = b({ top: 0, left: 0, width: 0 }), a = y ?? V, u = B($, h).slice(0, j), R = C && h.length >= 0, I = R && u.length > 0, q = X(() => {
+    const e = a.lastIndexOf(i);
     if (e === -1) return { query: "", start: null };
-    const t = a.slice(e + o.length), r = t.indexOf(" ");
-    return { query: r === -1 ? t : t.slice(0, r), start: e };
-  }, [a, o]);
+    const r = a.slice(e + i.length), t = r.indexOf(" ");
+    return { query: t === -1 ? r : r.slice(0, t), start: e };
+  }, [a, i]);
   d(() => {
-    const { query: e, start: t } = O();
-    H(e), V(t), h(t !== null && !e.includes(" "));
-  }, [a, O]), d(() => {
-    m(0);
-  }, [f]), d(() => {
-    if (u >= 0 && y.current) {
-      const e = y.current.children[u];
+    const { query: e, start: r } = q();
+    Z(e), G(r), p(r !== null && !e.includes(" "));
+  }, [a, q]), d(() => {
+    x(0);
+  }, [h]), d(() => {
+    if (c >= 0 && z.current) {
+      const e = z.current.children[c];
       e == null || e.scrollIntoView({ block: "nearest" });
     }
-  }, [u]), d(() => {
-    if (!E) return;
+  }, [c]), d(() => {
+    if (!I) return;
     const e = () => {
-      var r;
-      const t = (r = v.current) == null ? void 0 : r.getBoundingClientRect();
-      t && W({
-        top: t.bottom + 4,
-        left: Math.max(8, Math.min(t.left, window.innerWidth - t.width - 8)),
-        width: t.width
+      var t;
+      const r = (t = m.current) == null ? void 0 : t.getBoundingClientRect();
+      r && J({
+        top: r.bottom + 4,
+        left: Math.max(8, Math.min(r.left, window.innerWidth - r.width - 8)),
+        width: r.width
       });
     };
     return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
       window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
     };
-  }, [E]), d(() => {
-    const e = (t) => {
-      var n, i;
-      const r = t.target;
-      (n = L.current) != null && n.contains(r) || (i = q.current) != null && i.contains(r) || h(!1);
+  }, [I]), d(() => {
+    const e = (r) => {
+      var n, l;
+      const t = r.target;
+      (n = M.current) != null && n.contains(t) || (l = O.current) != null && l.contains(t) || p(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
   }, []);
-  const R = (e) => {
-    const t = new RegExp(`${o}(\\w+)`, "g"), r = [];
+  const P = (e) => {
+    const r = new RegExp(`${i}(\\w+)`, "g"), t = [];
     let n;
-    for (; (n = t.exec(e)) !== null; )
-      r.push(n[1]);
-    return [...new Set(r)];
-  }, Z = (e) => {
-    const t = e.target.value;
-    w === void 0 && N(t), s == null || s(t, R(t));
-  }, D = (e) => {
-    var P;
-    if (g == null) return;
-    const t = a.slice(0, g), r = a.slice(g + o.length + f.length), n = `${o}${e.value}`, i = t + n + " " + r;
-    w === void 0 && N(i), s == null || s(i, R(i)), x == null || x(e), h(!1), (P = v.current) == null || P.focus();
-  }, G = (e) => {
-    if (!(!M || b.length === 0)) {
+    for (; (n = r.exec(e)) !== null; )
+      t.push(n[1]);
+    return [...new Set(t)];
+  }, T = (e) => {
+    const r = e.target.value;
+    y === void 0 && D(r), o == null || o(r, P(r));
+  }, A = (e) => {
+    var _;
+    if (k == null) return;
+    const r = a.slice(0, k), t = a.slice(k + i.length + h.length), n = `${i}${e.value}`, l = r + n + " " + t;
+    y === void 0 && D(l), o == null || o(l, P(l)), v == null || v(e), p(!1), (_ = m.current) == null || _.focus();
+  }, S = (e) => {
+    if (!(!R || u.length === 0)) {
       if (e.key === "ArrowDown") {
-        e.preventDefault(), m((t) => Math.min(t + 1, b.length - 1));
+        e.preventDefault(), x((r) => Math.min(r + 1, u.length - 1));
         return;
       }
       if (e.key === "ArrowUp") {
-        e.preventDefault(), m((t) => Math.max(t - 1, 0));
+        e.preventDefault(), x((r) => Math.max(r - 1, 0));
         return;
       }
       if (e.key === "Enter" || e.key === "Tab") {
         e.preventDefault();
-        const t = b[u];
-        t && D(t);
+        const r = u[c];
+        r && A(r);
         return;
       }
-      e.key === "Escape" && h(!1);
+      e.key === "Escape" && p(!1);
     }
   };
-  return /* @__PURE__ */ T(
+  return /* @__PURE__ */ K(
     "div",
     {
-      ref: L,
-      className: z(
+      ref: M,
+      className: g(
         "Bear-MentionsInput bear-relative",
-        S && "bear-w-full",
-        _
+        F && "bear-w-full",
+        Q
       ),
       children: [
-        /* @__PURE__ */ l(
+        W ? /* @__PURE__ */ s(
+          "textarea",
+          {
+            ref: m,
+            value: a,
+            rows: H,
+            onChange: T,
+            onKeyDown: S,
+            placeholder: L,
+            disabled: f,
+            className: g(
+              "bear-w-full bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-900 bear-text-gray-900 dark:bear-text-white placeholder:bear-text-gray-500 dark:placeholder:bear-text-zinc-500 bear-outline-none bear-transition-colors focus:bear-border-bear-500 focus:bear-ring-2 focus:bear-ring-bear-500/20 bear-resize-none",
+              f && "bear-opacity-50 bear-cursor-not-allowed",
+              ne[N]
+            )
+          }
+        ) : /* @__PURE__ */ s(
           "input",
           {
-            ref: v,
+            ref: m,
             type: "text",
             value: a,
-            onChange: Z,
-            onKeyDown: G,
-            placeholder: j,
-            disabled: I,
-            className: z(
+            onChange: T,
+            onKeyDown: S,
+            placeholder: L,
+            disabled: f,
+            className: g(
               "bear-w-full bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-900 bear-text-gray-900 dark:bear-text-white placeholder:bear-text-gray-500 dark:placeholder:bear-text-zinc-500 bear-outline-none bear-transition-colors focus:bear-border-bear-500 focus:bear-ring-2 focus:bear-ring-bear-500/20",
-              I && "bear-opacity-50 bear-cursor-not-allowed",
-              ee[Q]
+              f && "bear-opacity-50 bear-cursor-not-allowed",
+              ae[N]
             )
           }
         ),
-        E && /* @__PURE__ */ l(X, { children: /* @__PURE__ */ l(
+        I && /* @__PURE__ */ s(Y, { children: /* @__PURE__ */ s(
           "div",
           {
-            ref: q,
+            ref: O,
             className: "bear-fixed bear-rounded-lg bear-border bear-border-gray-200 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-800 bear-shadow-lg",
             style: {
-              top: k.top,
-              left: k.left,
-              width: k.width,
-              zIndex: C
+              top: E.top,
+              left: E.left,
+              width: E.width,
+              zIndex: re
             },
-            children: /* @__PURE__ */ l("div", { ref: y, className: "bear-max-h-48 bear-overflow-auto bear-py-1", children: b.map((e, t) => /* @__PURE__ */ T(
+            children: /* @__PURE__ */ s("div", { ref: z, className: "bear-max-h-48 bear-overflow-auto bear-py-1", children: u.map((e, r) => /* @__PURE__ */ K(
               "button",
               {
                 type: "button",
-                className: z(
+                className: g(
                   "bear-w-full bear-flex bear-items-center bear-gap-2 bear-px-3 bear-py-2 bear-text-left bear-text-gray-800 dark:bear-text-zinc-200 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700 bear-transition-colors",
-                  t === u && "bear-bg-gray-100 dark:bear-bg-zinc-700"
+                  r === c && "bear-bg-gray-100 dark:bear-bg-zinc-700"
                 ),
-                onMouseEnter: () => m(t),
-                onClick: () => D(e),
+                onMouseEnter: () => x(r),
+                onClick: () => A(e),
                 children: [
-                  e.avatar && /* @__PURE__ */ l("span", { className: "bear-shrink-0", children: e.avatar }),
-                  /* @__PURE__ */ l("span", { children: e.label })
+                  e.avatar && /* @__PURE__ */ s("span", { className: "bear-shrink-0", children: e.avatar }),
+                  /* @__PURE__ */ s("span", { children: e.label })
                 ]
               },
               e.value
@@ -155,5 +177,5 @@ const C = 1e4, ee = {
   );
 };
 export {
-  oe as MentionsInput
+  ce as MentionsInput
 };