@forgedevstack/bear 1.2.0 → 1.2.2

package/dist/components/ImageAnnotation/ImageAnnotation.js

@@ -0,0 +1,113 @@
+import { jsxs as h, jsx as l } from "react/jsx-runtime";
+import { useRef as R, useState as v, useCallback as u } from "react";
+import { cn as T } from "../../utils/cn.js";
+import { BearIcons as A } from "../Icon/index.js";
+import { Popover as O } from "../Popover/Popover.js";
+import { Input as j } from "../Input/Input.js";
+import { DEFAULT_PIN_COLOR as D, DEFAULT_PIN_SIZE as F, PIN_ICON_RATIO as $ } from "./ImageAnnotation.const.js";
+let z = 1;
+function U(s, n, r, e) {
+  return /* @__PURE__ */ l("div", { className: "Bear-ImageAnnotation__edit min-w-[160px]", children: /* @__PURE__ */ l(
+    j,
+    {
+      autoFocus: !0,
+      size: "sm",
+      value: s,
+      onChange: (o) => n(o.target.value),
+      onKeyDown: (o) => {
+        o.key === "Enter" && r(), o.key === "Escape" && e();
+      },
+      placeholder: "Add note..."
+    }
+  ) });
+}
+function X(s, n, r, e) {
+  return /* @__PURE__ */ h("div", { className: "Bear-ImageAnnotation__label text-xs text-gray-700 dark:text-gray-200 whitespace-nowrap flex items-center gap-1", children: [
+    e ?? s.text,
+    n && /* @__PURE__ */ l(
+      "button",
+      {
+        type: "button",
+        className: "text-red-400 hover:text-red-600 ml-1",
+        onClick: (o) => {
+          o.stopPropagation(), r(s.id);
+        },
+        children: /* @__PURE__ */ l(A.XIcon, { size: 12 })
+      }
+    )
+  ] });
+}
+const J = ({
+  src: s,
+  alt: n = "",
+  annotations: r,
+  onChange: e,
+  editable: o = !0,
+  pinColor: k = D,
+  pinSize: f = F,
+  renderPopover: p,
+  testId: y,
+  className: N,
+  ...w
+}) => {
+  const x = R(null), [c, a] = v(null), [d, _] = v(""), E = u(
+    (t) => {
+      if (!o || !e || !x.current || t.target.closest(".Bear-ImageAnnotation__pin")) return;
+      const i = x.current.getBoundingClientRect(), I = (t.clientX - i.left) / i.width * 100, g = (t.clientY - i.top) / i.height * 100, m = `ann-${z++}`, P = { id: m, x: I, y: g, text: "" };
+      e([...r, P]), a(m), _("");
+    },
+    [o, e, r]
+  ), B = u(() => {
+    !c || !e || (d.trim() ? e(r.map((t) => t.id === c ? { ...t, text: d } : t)) : e(r.filter((t) => t.id !== c)), a(null));
+  }, [c, d, e, r]), b = u(() => a(null), []), L = u(
+    (t) => {
+      e == null || e(r.filter((i) => i.id !== t)), c === t && a(null);
+    },
+    [e, r, c]
+  );
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      ref: x,
+      className: T("Bear-ImageAnnotation relative inline-block select-none", o && "cursor-crosshair", N),
+      onClick: E,
+      "data-testid": y,
+      ...w,
+      children: [
+        /* @__PURE__ */ l("img", { src: s, alt: n, className: "w-full h-auto block rounded-lg", draggable: !1 }),
+        r.map((t) => {
+          const i = c === t.id, I = !!t.text, g = p == null ? void 0 : p(t), m = i ? U(d, _, B, b) : I ? X(t, o, L, g) : null;
+          return /* @__PURE__ */ l(
+            "div",
+            {
+              className: "Bear-ImageAnnotation__pin absolute transform -translate-x-1/2 -translate-y-full z-10",
+              style: { left: `${t.x}%`, top: `${t.y}%` },
+              children: /* @__PURE__ */ l(
+                O,
+                {
+                  content: m,
+                  trigger: i ? "click" : "hover",
+                  placement: "top",
+                  open: i || void 0,
+                  arrow: !1,
+                  children: /* @__PURE__ */ l(
+                    "div",
+                    {
+                      className: "Bear-ImageAnnotation__marker flex items-center justify-center rounded-full shadow-lg cursor-pointer transition-transform hover:scale-110",
+                      style: { width: f, height: f, backgroundColor: t.color ?? k },
+                      children: /* @__PURE__ */ l(A.MapPinIcon, { size: f * $, className: "text-white" })
+                    }
+                  )
+                }
+              )
+            },
+            t.id
+          );
+        })
+      ]
+    }
+  );
+};
+export {
+  J as ImageAnnotation
+};

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

@@ -0,0 +1,28 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface Annotation {
+    id: string;
+    x: number;
+    y: number;
+    text: string;
+    color?: string;
+}
+export interface ImageAnnotationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+    /** Image source URL */
+    src: string;
+    /** Alt text */
+    alt?: string;
+    /** Current annotations */
+    annotations: Annotation[];
+    /** Called when annotations change (add/edit/delete) */
+    onChange?: (annotations: Annotation[]) => void;
+    /** Whether the user can add new annotations by clicking */
+    editable?: boolean;
+    /** Pin color */
+    pinColor?: string;
+    /** Pin size in px */
+    pinSize?: number;
+    /** Render custom popover content for each annotation */
+    renderPopover?: (annotation: Annotation) => ReactNode;
+    /** Test ID */
+    testId?: string;
+}

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

@@ -0,0 +1,2 @@
+export { ImageAnnotation } from './ImageAnnotation';
+export type { ImageAnnotationProps, Annotation } from './ImageAnnotation.types';

package/dist/components/MediaPlayer/MediaPlayer.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),m=require("../../utils/cn.cjs"),r=require("../Icon/index.cjs"),j=require("./MediaPlayer.const.cjs"),C=require("./MediaPlayer.utils.cjs"),Te=require("../../hooks/useBearStyles.cjs"),Re=320,le=16,ze=({src:D,type:T="video",poster:R,autoPlay:z=!1,loop:L=!1,muted:G=!1,nativeControls:k=!1,width:A,height:H,size:ce="md",accentColor:u=j.DEFAULT_ACCENT,playIcon:Y,pauseIcon:Z,muteIcon:de,unmuteIcon:ue,fullscreenIcon:xe,centerOverlay:me=!1,sticky:q=!1,stickyPosition:$="right",stickySize:U=Re,airPlay:he=!1,playlist:w,onTrackChange:I,bis:fe,testId:ye,className:ge,style:ve,...pe})=>{const h=s.useRef(null),W=s.useRef(null),K=s.useRef(null),[b,F]=s.useState(z),[N,V]=s.useState(0),[g,X]=s.useState(0),[S,be]=s.useState(G),[f,J]=s.useState(L),[M,je]=s.useState(!1),[Q,ke]=s.useState(0),[Ne,_]=s.useState(!z),[l,we]=s.useState(0),O=Te.useBearStyles(fe,ve),x=s.useMemo(()=>w&&w.length>0?w:[{src:D,poster:R,type:T,title:void 0,artist:void 0}],[w,D,R,T]),o=x[l],Ie=o.src,B=o.poster??R,c=o.type??T,d=x.length>1,i=j.SIZE_MAP[ce];s.useEffect(()=>{J(L)},[L]),s.useEffect(()=>{const t=h.current;if(!t)return;const n=()=>V(t.currentTime),a=()=>X(t.duration),p=()=>{d&&l<x.length-1?v(l+1):f?d&&v(0):(F(!1),_(!0))};return t.addEventListener("timeupdate",n),t.addEventListener("loadedmetadata",a),t.addEventListener("ended",p),()=>{t.removeEventListener("timeupdate",n),t.removeEventListener("loadedmetadata",a),t.removeEventListener("ended",p)}},[f,d,l,x.length]),s.useEffect(()=>{if(!q||c!=="video")return;const t=K.current;if(!t)return;const n=()=>{const p=t.getBoundingClientRect().bottom<0;je(p),p&&ke(le)};return window.addEventListener("scroll",n,{passive:!0}),n(),()=>window.removeEventListener("scroll",n)},[q,c]);const v=s.useCallback(t=>{const n=Math.max(0,Math.min(x.length-1,t));we(n),V(0),X(0),_(!1),I==null||I(n,x[n]),setTimeout(()=>{const a=h.current;a&&(a.load(),a.play().catch(()=>{}),F(!0))},50)},[x,I]),E=s.useCallback(()=>{const t=h.current;t&&(b?(t.pause(),_(!0)):(t.play().catch(()=>{}),_(!1)),F(!b))},[b]),ee=s.useCallback(t=>{const n=h.current;if(!n||!g)return;const a=t.currentTarget.getBoundingClientRect(),p=Math.max(0,Math.min(1,(t.clientX-a.left)/a.width));n.currentTime=p*g},[g]),te=s.useCallback(()=>{const t=h.current;t&&(t.muted=!S,be(!S))},[S]),se=s.useCallback(()=>{const t=!f;J(t);const n=h.current;n&&(n.loop=t)},[f]),Se=s.useCallback(()=>{var n;const t=W.current;t&&(document.fullscreenElement?document.exitFullscreen():(n=t.requestFullscreen)==null||n.call(t))},[]),Me=s.useCallback(()=>{const t=h.current;t!=null&&t.webkitShowPlaybackTargetPicker&&t.webkitShowPlaybackTargetPicker()},[]),ne=s.useCallback(()=>{if(N>3){const t=h.current;t&&(t.currentTime=0)}else l>0&&v(l-1)},[N,l,v]),ae=s.useCallback(()=>{l<x.length-1&&v(l+1)},[l,x.length,v]),re=g?N/g*100:0,y=i.iconSm,P=i.iconMd,ie=b?Z??e.jsx(r.BearIcons.PauseIcon,{size:P}):Y??e.jsx(r.BearIcons.PlayIcon,{size:P}),oe=S?de??e.jsx(r.BearIcons.VolumeOffIcon,{size:y}):ue??e.jsx(r.BearIcons.VolumeUpIcon,{size:y}),_e=xe??e.jsx(r.BearIcons.MaximizeIcon,{size:y}),Be=c==="video"?"video":"audio",Ee=s.useMemo(()=>M&&c==="video"?{...O,position:"fixed",top:Q,[$==="left"?"left":"right"]:le,width:U,zIndex:50,boxShadow:"0 8px 32px rgba(0,0,0,0.45)",borderRadius:12,transition:"top 0.15s ease-out"}:{...O,width:A??"100%",height:H,maxWidth:A?void 0:i.maxWidth},[M,c,O,A,H,i.maxWidth,Q,$,U]),Pe=s.useMemo(()=>{if(!M)return{aspectRatio:i.aspectRatio}},[M,i.aspectRatio]),Ce=`${u}20`;return e.jsxs(e.Fragment,{children:[q&&e.jsx("div",{ref:K,style:{height:1}}),e.jsxs("div",{ref:W,className:m.cn("Bear-MediaPlayer relative rounded-xl overflow-hidden bg-black",ge),style:Ee,"data-testid":ye,...pe,children:[e.jsx(Be,{ref:h,src:Ie,poster:B,autoPlay:z,loop:f&&!d,muted:G,controls:k,playsInline:!0,className:m.cn(c==="video"?"Bear-MediaPlayer__video w-full object-cover":"hidden"),style:c==="video"?Pe:void 0,onClick:c==="video"?E:void 0}),me&&c==="video"&&Ne&&!k&&e.jsx("button",{type:"button",onClick:E,className:"Bear-MediaPlayer__overlay absolute inset-0 flex items-center justify-center bg-black/30 transition-opacity",children:e.jsx("div",{className:"w-16 h-16 rounded-full bg-white/90 flex items-center justify-center shadow-lg",children:b?Z??e.jsx(r.BearIcons.PauseIcon,{size:j.CENTER_ICON_SIZE,className:"text-gray-900"}):Y??e.jsx(r.BearIcons.PlayIcon,{size:j.CENTER_ICON_SIZE,className:"text-gray-900"})})}),!k&&c==="video"&&e.jsxs("div",{className:m.cn("Bear-MediaPlayer__controls absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent pt-8",i.padding),children:[e.jsx("div",{className:"Bear-MediaPlayer__progress w-full cursor-pointer mb-2 group",style:{height:j.PROGRESS_HEIGHT},onClick:ee,children:e.jsx("div",{className:"w-full h-full bg-white/30 rounded-full relative overflow-hidden",children:e.jsx("div",{className:"h-full rounded-full transition-all",style:{width:`${re}%`,backgroundColor:u}})})}),e.jsxs("div",{className:m.cn("Bear-MediaPlayer__bar flex items-center",i.gap),children:[d&&e.jsx("button",{type:"button",onClick:ne,className:"text-white hover:text-pink-400 transition-colors",children:e.jsx(r.BearIcons.SkipBackIcon,{size:y})}),e.jsx("button",{type:"button",onClick:E,className:"text-white hover:text-pink-400 transition-colors",children:ie}),d&&e.jsx("button",{type:"button",onClick:ae,className:"text-white hover:text-pink-400 transition-colors",children:e.jsx(r.BearIcons.SkipForwardIcon,{size:y})}),e.jsx("button",{type:"button",onClick:te,className:"text-white hover:text-pink-400 transition-colors",children:oe}),e.jsxs("span",{className:m.cn("Bear-MediaPlayer__time text-white font-mono",i.text),children:[C.formatTime(N)," / ",C.formatTime(g)]}),e.jsx("div",{className:"flex-1"}),e.jsx("button",{type:"button",onClick:se,className:"transition-colors",style:{color:f?u:void 0},title:"Loop",children:e.jsx(r.BearIcons.RepeatIcon,{size:y,className:f?void 0:"text-white/60 hover:text-white"})}),he&&e.jsx("button",{type:"button",onClick:Me,className:"text-white hover:text-pink-400 transition-colors",title:"AirPlay",children:e.jsx(r.BearIcons.CastIcon,{size:y})}),e.jsx("button",{type:"button",onClick:Se,className:"text-white hover:text-pink-400 transition-colors",children:_e})]}),d&&o.title&&e.jsxs("div",{className:"mt-1 flex items-center gap-2 truncate",children:[e.jsx("span",{className:"text-white text-xs font-medium truncate",children:o.title}),o.artist&&e.jsxs("span",{className:"text-white/50 text-xs truncate",children:["— ",o.artist]})]})]}),c==="audio"&&!k&&e.jsxs("div",{className:m.cn("Bear-MediaPlayer__audio bg-gray-100 dark:bg-zinc-800 rounded-xl",i.padding),children:[d&&(B||o.title)&&e.jsxs("div",{className:"flex items-center gap-3 mb-3",children:[B&&e.jsx("img",{src:B,alt:"",className:"w-12 h-12 rounded-lg object-cover shrink-0"}),e.jsxs("div",{className:"min-w-0 flex-1",children:[o.title&&e.jsx("p",{className:"text-sm font-semibold text-gray-900 dark:text-white truncate",children:o.title}),o.artist&&e.jsx("p",{className:"text-xs text-gray-500 dark:text-gray-400 truncate",children:o.artist})]})]}),e.jsx("div",{className:"Bear-MediaPlayer__progress w-full cursor-pointer mb-1",style:{height:j.PROGRESS_HEIGHT},onClick:ee,children:e.jsx("div",{className:"w-full h-full bg-gray-300 dark:bg-zinc-600 rounded-full overflow-hidden",children:e.jsx("div",{className:"h-full rounded-full",style:{width:`${re}%`,backgroundColor:u}})})}),e.jsxs("div",{className:"flex justify-between mb-2",children:[e.jsx("span",{className:m.cn("text-gray-500 font-mono",i.text),children:C.formatTime(N)}),e.jsx("span",{className:m.cn("text-gray-500 font-mono",i.text),children:C.formatTime(g)})]}),e.jsxs("div",{className:m.cn("flex items-center justify-center",i.gap),children:[e.jsx("button",{type:"button",onClick:se,className:"transition-colors",style:{color:f?u:void 0},title:"Loop",children:e.jsx(r.BearIcons.RepeatIcon,{size:y,className:f?void 0:"text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"})}),d&&e.jsx("button",{type:"button",onClick:ne,className:"text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors",children:e.jsx(r.BearIcons.SkipBackIcon,{size:P})}),e.jsx("button",{type:"button",onClick:E,className:"Bear-MediaPlayer__play w-10 h-10 rounded-full flex items-center justify-center text-white transition-colors",style:{backgroundColor:u},children:ie}),d&&e.jsx("button",{type:"button",onClick:ae,className:"text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors",children:e.jsx(r.BearIcons.SkipForwardIcon,{size:P})}),e.jsx("button",{type:"button",onClick:te,className:"text-gray-500 hover:text-gray-700 dark:hover:text-gray-300",children:oe})]})]}),d&&!k&&e.jsx("div",{className:"Bear-MediaPlayer__playlist bg-gray-50 dark:bg-zinc-900 border-t border-gray-200 dark:border-zinc-700 max-h-48 overflow-y-auto",children:x.map((t,n)=>{const a=n===l;return e.jsxs("button",{type:"button",onClick:()=>v(n),className:m.cn("w-full flex items-center gap-3 px-3 py-2 text-left transition-colors",!a&&"hover:bg-gray-100 dark:hover:bg-zinc-800"),style:a?{backgroundColor:Ce}:void 0,children:[t.poster&&e.jsx("img",{src:t.poster,alt:"",className:"w-8 h-8 rounded object-cover shrink-0"}),e.jsxs("div",{className:"min-w-0 flex-1",children:[e.jsx("p",{className:"text-xs font-medium truncate",style:a?{color:u}:void 0,children:t.title??`Track ${n+1}`}),t.artist&&e.jsx("p",{className:"text-[10px] text-gray-400 truncate",children:t.artist})]}),a&&b&&e.jsxs("div",{className:"flex items-end gap-0.5 h-3",children:[e.jsx("span",{className:"w-0.5 rounded-full animate-pulse",style:{height:"60%",backgroundColor:u}}),e.jsx("span",{className:"w-0.5 rounded-full animate-pulse",style:{height:"100%",backgroundColor:u,animationDelay:"0.2s"}}),e.jsx("span",{className:"w-0.5 rounded-full animate-pulse",style:{height:"40%",backgroundColor:u,animationDelay:"0.4s"}})]}),e.jsx("span",{className:"text-[10px] text-gray-400 tabular-nums shrink-0",children:n+1})]},n)})})]})]})};exports.MediaPlayer=ze;

package/dist/components/MediaPlayer/MediaPlayer.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t="#ec4899",a=4,i=48,e={sm:{maxWidth:360,aspectRatio:"4 / 3",padding:"p-2",gap:"gap-2",text:"text-[10px]",iconSm:14,iconMd:16},md:{maxWidth:640,aspectRatio:"16 / 9",padding:"p-3",gap:"gap-3",text:"text-xs",iconSm:18,iconMd:20},lg:{maxWidth:960,aspectRatio:"21 / 9",padding:"p-4",gap:"gap-4",text:"text-sm",iconSm:20,iconMd:24}};exports.CENTER_ICON_SIZE=i;exports.DEFAULT_ACCENT=t;exports.PROGRESS_HEIGHT=a;exports.SIZE_MAP=e;

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

@@ -0,0 +1,36 @@
+export declare const DEFAULT_ACCENT = "#ec4899";
+export declare const PROGRESS_HEIGHT = 4;
+export declare const ICON_SM = 18;
+export declare const ICON_MD = 20;
+export declare const STICKY_WIDTH = 340;
+export declare const STICKY_OFFSET = 16;
+export declare const CENTER_ICON_SIZE = 48;
+export declare const SIZE_MAP: {
+    readonly sm: {
+        readonly maxWidth: 360;
+        readonly aspectRatio: "4 / 3";
+        readonly padding: "p-2";
+        readonly gap: "gap-2";
+        readonly text: "text-[10px]";
+        readonly iconSm: 14;
+        readonly iconMd: 16;
+    };
+    readonly md: {
+        readonly maxWidth: 640;
+        readonly aspectRatio: "16 / 9";
+        readonly padding: "p-3";
+        readonly gap: "gap-3";
+        readonly text: "text-xs";
+        readonly iconSm: 18;
+        readonly iconMd: 20;
+    };
+    readonly lg: {
+        readonly maxWidth: 960;
+        readonly aspectRatio: "21 / 9";
+        readonly padding: "p-4";
+        readonly gap: "gap-4";
+        readonly text: "text-sm";
+        readonly iconSm: 20;
+        readonly iconMd: 24;
+    };
+};

package/dist/components/MediaPlayer/MediaPlayer.const.js

@@ -0,0 +1,11 @@
+const t = "#ec4899", a = 4, p = 48, i = {
+  sm: { maxWidth: 360, aspectRatio: "4 / 3", padding: "p-2", gap: "gap-2", text: "text-[10px]", iconSm: 14, iconMd: 16 },
+  md: { maxWidth: 640, aspectRatio: "16 / 9", padding: "p-3", gap: "gap-3", text: "text-xs", iconSm: 18, iconMd: 20 },
+  lg: { maxWidth: 960, aspectRatio: "21 / 9", padding: "p-4", gap: "gap-4", text: "text-sm", iconSm: 20, iconMd: 24 }
+};
+export {
+  p as CENTER_ICON_SIZE,
+  t as DEFAULT_ACCENT,
+  a as PROGRESS_HEIGHT,
+  i as SIZE_MAP
+};

package/dist/components/MediaPlayer/MediaPlayer.d.ts

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

package/dist/components/MediaPlayer/MediaPlayer.js

@@ -0,0 +1,279 @@
+import { jsx as e, jsxs as s, Fragment as De } from "react/jsx-runtime";
+import { useRef as $, useState as p, useMemo as G, useEffect as U, useCallback as x } from "react";
+import { cn as h } from "../../utils/cn.js";
+import { BearIcons as i } from "../Icon/index.js";
+import { SIZE_MAP as Oe, CENTER_ICON_SIZE as me, PROGRESS_HEIGHT as he, DEFAULT_ACCENT as Ye } from "./MediaPlayer.const.js";
+import { formatTime as C } from "./MediaPlayer.utils.js";
+import { useBearStyles as $e } from "../../hooks/useBearStyles.js";
+const Ge = 320, fe = 16, Xe = ({
+  src: W,
+  type: R = "video",
+  poster: L,
+  autoPlay: j = !1,
+  loop: A = !1,
+  muted: Z = !1,
+  nativeControls: w = !1,
+  width: F,
+  height: q,
+  size: ge = "md",
+  accentColor: u = Ye,
+  playIcon: H,
+  pauseIcon: K,
+  muteIcon: pe,
+  unmuteIcon: xe,
+  fullscreenIcon: ye,
+  centerOverlay: ve = !1,
+  sticky: D = !1,
+  stickyPosition: V = "right",
+  stickySize: X = Ge,
+  airPlay: be = !1,
+  playlist: _,
+  onTrackChange: M,
+  bis: ke,
+  testId: Ne,
+  className: we,
+  style: Ie,
+  ..._e
+}) => {
+  const f = $(null), J = $(null), Q = $(null), [N, O] = p(j), [I, ee] = p(0), [v, te] = p(0), [P, Me] = p(Z), [g, ne] = p(A), [S, Pe] = p(!1), [re, Se] = p(0), [Ee, E] = p(!j), [l, ze] = p(0), Y = $e(ke, Ie), m = G(() => _ && _.length > 0 ? _ : [{ src: W, poster: L, type: R, title: void 0, artist: void 0 }], [_, W, L, R]), a = m[l], Te = a.src, z = a.poster ?? L, c = a.type ?? R, d = m.length > 1, o = Oe[ge];
+  U(() => {
+    ne(A);
+  }, [A]), U(() => {
+    const t = f.current;
+    if (!t) return;
+    const n = () => ee(t.currentTime), r = () => te(t.duration), k = () => {
+      d && l < m.length - 1 ? b(l + 1) : g ? d && b(0) : (O(!1), E(!0));
+    };
+    return t.addEventListener("timeupdate", n), t.addEventListener("loadedmetadata", r), t.addEventListener("ended", k), () => {
+      t.removeEventListener("timeupdate", n), t.removeEventListener("loadedmetadata", r), t.removeEventListener("ended", k);
+    };
+  }, [g, d, l, m.length]), U(() => {
+    if (!D || c !== "video") return;
+    const t = Q.current;
+    if (!t) return;
+    const n = () => {
+      const k = t.getBoundingClientRect().bottom < 0;
+      Pe(k), k && Se(fe);
+    };
+    return window.addEventListener("scroll", n, { passive: !0 }), n(), () => window.removeEventListener("scroll", n);
+  }, [D, c]);
+  const b = x((t) => {
+    const n = Math.max(0, Math.min(m.length - 1, t));
+    ze(n), ee(0), te(0), E(!1), M == null || M(n, m[n]), setTimeout(() => {
+      const r = f.current;
+      r && (r.load(), r.play().catch(() => {
+      }), O(!0));
+    }, 50);
+  }, [m, M]), T = x(() => {
+    const t = f.current;
+    t && (N ? (t.pause(), E(!0)) : (t.play().catch(() => {
+    }), E(!1)), O(!N));
+  }, [N]), se = x((t) => {
+    const n = f.current;
+    if (!n || !v) return;
+    const r = t.currentTarget.getBoundingClientRect(), k = Math.max(0, Math.min(1, (t.clientX - r.left) / r.width));
+    n.currentTime = k * v;
+  }, [v]), ie = x(() => {
+    const t = f.current;
+    t && (t.muted = !P, Me(!P));
+  }, [P]), oe = x(() => {
+    const t = !g;
+    ne(t);
+    const n = f.current;
+    n && (n.loop = t);
+  }, [g]), Be = x(() => {
+    var n;
+    const t = J.current;
+    t && (document.fullscreenElement ? document.exitFullscreen() : (n = t.requestFullscreen) == null || n.call(t));
+  }, []), Ce = x(() => {
+    const t = f.current;
+    t != null && t.webkitShowPlaybackTargetPicker && t.webkitShowPlaybackTargetPicker();
+  }, []), ae = x(() => {
+    if (I > 3) {
+      const t = f.current;
+      t && (t.currentTime = 0);
+    } else l > 0 && b(l - 1);
+  }, [I, l, b]), le = x(() => {
+    l < m.length - 1 && b(l + 1);
+  }, [l, m.length, b]), ce = v ? I / v * 100 : 0, y = o.iconSm, B = o.iconMd, de = N ? K ?? /* @__PURE__ */ e(i.PauseIcon, { size: B }) : H ?? /* @__PURE__ */ e(i.PlayIcon, { size: B }), ue = P ? pe ?? /* @__PURE__ */ e(i.VolumeOffIcon, { size: y }) : xe ?? /* @__PURE__ */ e(i.VolumeUpIcon, { size: y }), Re = ye ?? /* @__PURE__ */ e(i.MaximizeIcon, { size: y }), Le = c === "video" ? "video" : "audio", je = G(() => S && c === "video" ? {
+    ...Y,
+    position: "fixed",
+    top: re,
+    [V === "left" ? "left" : "right"]: fe,
+    width: X,
+    zIndex: 50,
+    boxShadow: "0 8px 32px rgba(0,0,0,0.45)",
+    borderRadius: 12,
+    transition: "top 0.15s ease-out"
+  } : {
+    ...Y,
+    width: F ?? "100%",
+    height: q,
+    maxWidth: F ? void 0 : o.maxWidth
+  }, [S, c, Y, F, q, o.maxWidth, re, V, X]), Ae = G(() => {
+    if (!S)
+      return { aspectRatio: o.aspectRatio };
+  }, [S, o.aspectRatio]), Fe = `${u}20`;
+  return /* @__PURE__ */ s(De, { children: [
+    D && /* @__PURE__ */ e("div", { ref: Q, style: { height: 1 } }),
+    /* @__PURE__ */ s(
+      "div",
+      {
+        ref: J,
+        className: h("Bear-MediaPlayer relative rounded-xl overflow-hidden bg-black", we),
+        style: je,
+        "data-testid": Ne,
+        ..._e,
+        children: [
+          /* @__PURE__ */ e(
+            Le,
+            {
+              ref: f,
+              src: Te,
+              poster: z,
+              autoPlay: j,
+              loop: g && !d,
+              muted: Z,
+              controls: w,
+              playsInline: !0,
+              className: h(c === "video" ? "Bear-MediaPlayer__video w-full object-cover" : "hidden"),
+              style: c === "video" ? Ae : void 0,
+              onClick: c === "video" ? T : void 0
+            }
+          ),
+          ve && c === "video" && Ee && !w && /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: T,
+              className: "Bear-MediaPlayer__overlay absolute inset-0 flex items-center justify-center bg-black/30 transition-opacity",
+              children: /* @__PURE__ */ e("div", { className: "w-16 h-16 rounded-full bg-white/90 flex items-center justify-center shadow-lg", children: N ? K ?? /* @__PURE__ */ e(i.PauseIcon, { size: me, className: "text-gray-900" }) : H ?? /* @__PURE__ */ e(i.PlayIcon, { size: me, className: "text-gray-900" }) })
+            }
+          ),
+          !w && c === "video" && /* @__PURE__ */ s("div", { className: h("Bear-MediaPlayer__controls absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent pt-8", o.padding), children: [
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: "Bear-MediaPlayer__progress w-full cursor-pointer mb-2 group",
+                style: { height: he },
+                onClick: se,
+                children: /* @__PURE__ */ e("div", { className: "w-full h-full bg-white/30 rounded-full relative overflow-hidden", children: /* @__PURE__ */ e("div", { className: "h-full rounded-full transition-all", style: { width: `${ce}%`, backgroundColor: u } }) })
+              }
+            ),
+            /* @__PURE__ */ s("div", { className: h("Bear-MediaPlayer__bar flex items-center", o.gap), children: [
+              d && /* @__PURE__ */ e("button", { type: "button", onClick: ae, className: "text-white hover:text-pink-400 transition-colors", children: /* @__PURE__ */ e(i.SkipBackIcon, { size: y }) }),
+              /* @__PURE__ */ e("button", { type: "button", onClick: T, className: "text-white hover:text-pink-400 transition-colors", children: de }),
+              d && /* @__PURE__ */ e("button", { type: "button", onClick: le, className: "text-white hover:text-pink-400 transition-colors", children: /* @__PURE__ */ e(i.SkipForwardIcon, { size: y }) }),
+              /* @__PURE__ */ e("button", { type: "button", onClick: ie, className: "text-white hover:text-pink-400 transition-colors", children: ue }),
+              /* @__PURE__ */ s("span", { className: h("Bear-MediaPlayer__time text-white font-mono", o.text), children: [
+                C(I),
+                " / ",
+                C(v)
+              ] }),
+              /* @__PURE__ */ e("div", { className: "flex-1" }),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  onClick: oe,
+                  className: "transition-colors",
+                  style: { color: g ? u : void 0 },
+                  title: "Loop",
+                  children: /* @__PURE__ */ e(i.RepeatIcon, { size: y, className: g ? void 0 : "text-white/60 hover:text-white" })
+                }
+              ),
+              be && /* @__PURE__ */ e("button", { type: "button", onClick: Ce, className: "text-white hover:text-pink-400 transition-colors", title: "AirPlay", children: /* @__PURE__ */ e(i.CastIcon, { size: y }) }),
+              /* @__PURE__ */ e("button", { type: "button", onClick: Be, className: "text-white hover:text-pink-400 transition-colors", children: Re })
+            ] }),
+            d && a.title && /* @__PURE__ */ s("div", { className: "mt-1 flex items-center gap-2 truncate", children: [
+              /* @__PURE__ */ e("span", { className: "text-white text-xs font-medium truncate", children: a.title }),
+              a.artist && /* @__PURE__ */ s("span", { className: "text-white/50 text-xs truncate", children: [
+                "— ",
+                a.artist
+              ] })
+            ] })
+          ] }),
+          c === "audio" && !w && /* @__PURE__ */ s("div", { className: h("Bear-MediaPlayer__audio bg-gray-100 dark:bg-zinc-800 rounded-xl", o.padding), children: [
+            d && (z || a.title) && /* @__PURE__ */ s("div", { className: "flex items-center gap-3 mb-3", children: [
+              z && /* @__PURE__ */ e("img", { src: z, alt: "", className: "w-12 h-12 rounded-lg object-cover shrink-0" }),
+              /* @__PURE__ */ s("div", { className: "min-w-0 flex-1", children: [
+                a.title && /* @__PURE__ */ e("p", { className: "text-sm font-semibold text-gray-900 dark:text-white truncate", children: a.title }),
+                a.artist && /* @__PURE__ */ e("p", { className: "text-xs text-gray-500 dark:text-gray-400 truncate", children: a.artist })
+              ] })
+            ] }),
+            /* @__PURE__ */ e("div", { className: "Bear-MediaPlayer__progress w-full cursor-pointer mb-1", style: { height: he }, onClick: se, children: /* @__PURE__ */ e("div", { className: "w-full h-full bg-gray-300 dark:bg-zinc-600 rounded-full overflow-hidden", children: /* @__PURE__ */ e("div", { className: "h-full rounded-full", style: { width: `${ce}%`, backgroundColor: u } }) }) }),
+            /* @__PURE__ */ s("div", { className: "flex justify-between mb-2", children: [
+              /* @__PURE__ */ e("span", { className: h("text-gray-500 font-mono", o.text), children: C(I) }),
+              /* @__PURE__ */ e("span", { className: h("text-gray-500 font-mono", o.text), children: C(v) })
+            ] }),
+            /* @__PURE__ */ s("div", { className: h("flex items-center justify-center", o.gap), children: [
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  onClick: oe,
+                  className: "transition-colors",
+                  style: { color: g ? u : void 0 },
+                  title: "Loop",
+                  children: /* @__PURE__ */ e(i.RepeatIcon, { size: y, className: g ? void 0 : "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" })
+                }
+              ),
+              d && /* @__PURE__ */ e("button", { type: "button", onClick: ae, className: "text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors", children: /* @__PURE__ */ e(i.SkipBackIcon, { size: B }) }),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  onClick: T,
+                  className: "Bear-MediaPlayer__play w-10 h-10 rounded-full flex items-center justify-center text-white transition-colors",
+                  style: { backgroundColor: u },
+                  children: de
+                }
+              ),
+              d && /* @__PURE__ */ e("button", { type: "button", onClick: le, className: "text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors", children: /* @__PURE__ */ e(i.SkipForwardIcon, { size: B }) }),
+              /* @__PURE__ */ e("button", { type: "button", onClick: ie, className: "text-gray-500 hover:text-gray-700 dark:hover:text-gray-300", children: ue })
+            ] })
+          ] }),
+          d && !w && /* @__PURE__ */ e("div", { className: "Bear-MediaPlayer__playlist bg-gray-50 dark:bg-zinc-900 border-t border-gray-200 dark:border-zinc-700 max-h-48 overflow-y-auto", children: m.map((t, n) => {
+            const r = n === l;
+            return /* @__PURE__ */ s(
+              "button",
+              {
+                type: "button",
+                onClick: () => b(n),
+                className: h(
+                  "w-full flex items-center gap-3 px-3 py-2 text-left transition-colors",
+                  !r && "hover:bg-gray-100 dark:hover:bg-zinc-800"
+                ),
+                style: r ? { backgroundColor: Fe } : void 0,
+                children: [
+                  t.poster && /* @__PURE__ */ e("img", { src: t.poster, alt: "", className: "w-8 h-8 rounded object-cover shrink-0" }),
+                  /* @__PURE__ */ s("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ e(
+                      "p",
+                      {
+                        className: "text-xs font-medium truncate",
+                        style: r ? { color: u } : void 0,
+                        children: t.title ?? `Track ${n + 1}`
+                      }
+                    ),
+                    t.artist && /* @__PURE__ */ e("p", { className: "text-[10px] text-gray-400 truncate", children: t.artist })
+                  ] }),
+                  r && N && /* @__PURE__ */ s("div", { className: "flex items-end gap-0.5 h-3", children: [
+                    /* @__PURE__ */ e("span", { className: "w-0.5 rounded-full animate-pulse", style: { height: "60%", backgroundColor: u } }),
+                    /* @__PURE__ */ e("span", { className: "w-0.5 rounded-full animate-pulse", style: { height: "100%", backgroundColor: u, animationDelay: "0.2s" } }),
+                    /* @__PURE__ */ e("span", { className: "w-0.5 rounded-full animate-pulse", style: { height: "40%", backgroundColor: u, animationDelay: "0.4s" } })
+                  ] }),
+                  /* @__PURE__ */ e("span", { className: "text-[10px] text-gray-400 tabular-nums shrink-0", children: n + 1 })
+                ]
+              },
+              n
+            );
+          }) })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  Xe as MediaPlayer
+};

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

@@ -0,0 +1,69 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BisProp } from '../../types/bis.types';
+export type MediaType = 'video' | 'audio';
+export type MediaPlayerSize = 'sm' | 'md' | 'lg';
+export type StickyPosition = 'left' | 'right';
+export interface PlaylistItem {
+    /** Media source URL */
+    src: string;
+    /** Track title */
+    title?: string;
+    /** Artist or subtitle */
+    artist?: string;
+    /** Poster / cover art */
+    poster?: string;
+    /** Media type override */
+    type?: MediaType;
+}
+export interface MediaPlayerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Media source URL */
+    src: string;
+    /** Media type */
+    type?: MediaType;
+    /** Poster image (video only) */
+    poster?: string;
+    /** Auto-play on mount */
+    autoPlay?: boolean;
+    /** Loop playback */
+    loop?: boolean;
+    /** Mute audio */
+    muted?: boolean;
+    /** Show native controls fallback */
+    nativeControls?: boolean;
+    /** Video width */
+    width?: number | string;
+    /** Video height */
+    height?: number | string;
+    /** Player size preset — controls aspect ratio and UI density */
+    size?: MediaPlayerSize;
+    /** Accent color for controls */
+    accentColor?: string;
+    /** Custom play icon */
+    playIcon?: ReactNode;
+    /** Custom pause icon */
+    pauseIcon?: ReactNode;
+    /** Custom mute icon */
+    muteIcon?: ReactNode;
+    /** Custom unmute icon */
+    unmuteIcon?: ReactNode;
+    /** Custom fullscreen icon */
+    fullscreenIcon?: ReactNode;
+    /** Show a large centered play/pause overlay on the video */
+    centerOverlay?: boolean;
+    /** Follow the scroll — player scrolls alongside the page at the given side */
+    sticky?: boolean;
+    /** Which side the sticky player appears on */
+    stickyPosition?: StickyPosition;
+    /** Sticky player width in px */
+    stickySize?: number;
+    /** Show AirPlay button (when browser supports it) */
+    airPlay?: boolean;
+    /** Playlist items — enables gallery mode */
+    playlist?: PlaylistItem[];
+    /** Called when active track changes */
+    onTrackChange?: (index: number, item: PlaylistItem) => void;
+    /** Bear Inner Style overrides */
+    bis?: BisProp;
+    /** Test ID */
+    testId?: string;
+}

package/dist/components/MediaPlayer/MediaPlayer.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=60,n=2;function a(t){const r=Math.floor(t/o),e=Math.floor(t%o);return`${r}:${e.toString().padStart(n,"0")}`}exports.formatTime=a;

package/dist/components/MediaPlayer/MediaPlayer.utils.d.ts

@@ -0,0 +1 @@
+export declare function formatTime(s: number): string;

package/dist/components/MediaPlayer/MediaPlayer.utils.js

@@ -0,0 +1,7 @@
+function n(t) {
+  const o = Math.floor(t / 60), E = Math.floor(t % 60);
+  return `${o}:${E.toString().padStart(2, "0")}`;
+}
+export {
+  n as formatTime
+};

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

@@ -0,0 +1,2 @@
+export { MediaPlayer } from './MediaPlayer';
+export type { MediaPlayerProps, MediaType, MediaPlayerSize, PlaylistItem, StickyPosition } from './MediaPlayer.types';

package/dist/components/MentionsInput/MentionsInput.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),t=require("react"),v=require("../../utils/cn.cjs"),P=require("./MentionsInput.utils.cjs"),U={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"},V=({value:x,defaultValue:O="",onChange:s,onMentionSelect:h,options:D,trigger:l="@",placeholder:M="Type @ to mention...",disabled:w=!1,maxSuggestions:S=5,filterOptions:N=P.defaultFilter,size:T="md",fullWidth:L=!1,className:$})=>{const[A,k]=t.useState(O),[i,K]=t.useState(""),[Q,f]=t.useState(!1),[u,d]=t.useState(0),[p,B]=t.useState(null),g=t.useRef(null),q=t.useRef(null),y=t.useRef(null),a=x??A,o=N(D,i).slice(0,S),I=Q&&i.length>=0,z=t.useCallback(()=>{const e=a.lastIndexOf(l);if(e===-1)return{query:"",start:null};const r=a.slice(e+l.length),n=r.indexOf(" ");return{query:n===-1?r:r.slice(0,n),start:e}},[a,l]);t.useEffect(()=>{const{query:e,start:r}=z();K(e),B(r),f(r!==null&&!e.includes(" "))},[a,z]),t.useEffect(()=>{d(0)},[i]),t.useEffect(()=>{if(u>=0&&y.current){const e=y.current.children[u];e==null||e.scrollIntoView({block:"nearest"})}},[u]),t.useEffect(()=>{const e=r=>{g.current&&!g.current.contains(r.target)&&f(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const E=e=>{const r=new RegExp(`${l}(\\w+)`,"g"),n=[];let b;for(;(b=r.exec(e))!==null;)n.push(b[1]);return[...new Set(n)]},F=e=>{const r=e.target.value;x===void 0&&k(r),s==null||s(r,E(r))},R=e=>{var j;if(p==null)return;const r=a.slice(0,p),n=a.slice(p+l.length+i.length),b=`${l}${e.value}`,m=r+b+" "+n;x===void 0&&k(m),s==null||s(m,E(m)),h==null||h(e),f(!1),(j=q.current)==null||j.focus()},H=e=>{if(!(!I||o.length===0)){if(e.key==="ArrowDown"){e.preventDefault(),d(r=>Math.min(r+1,o.length-1));return}if(e.key==="ArrowUp"){e.preventDefault(),d(r=>Math.max(r-1,0));return}if(e.key==="Enter"||e.key==="Tab"){e.preventDefault();const r=o[u];r&&R(r);return}e.key==="Escape"&&f(!1)}};return c.jsxs("div",{ref:g,className:v.cn("Bear-MentionsInput bear-relative",L&&"bear-w-full",$),children:[c.jsx("input",{ref:q,type:"text",value:a,onChange:F,onKeyDown:H,placeholder:M,disabled:w,className:v.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",w&&"bear-opacity-50 bear-cursor-not-allowed",U[T])}),I&&o.length>0&&c.jsx("div",{ref:y,className:"bear-absolute bear-z-50 bear-mt-1 bear-w-full bear-max-h-48 bear-overflow-auto bear-rounded-lg bear-border bear-border-gray-200 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-800 bear-py-1 bear-shadow-lg",children:o.map((e,r)=>c.jsxs("button",{type:"button",className:v.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===u&&"bear-bg-gray-100 dark:bear-bg-zinc-700"),onMouseEnter:()=>d(r),onClick:()=>R(e),children:[e.avatar&&c.jsx("span",{className:"bear-shrink-0",children:e.avatar}),c.jsx("span",{children:e.label})]},e.value))})]})};exports.MentionsInput=V;
+"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;