@forgedevstack/bear 1.2.3 → 1.2.5

package/dist/components/CommandPalette/CommandPalette.js

@@ -1,51 +1,51 @@
-import { jsxs as l, jsx as t, Fragment as Y } from "react/jsx-runtime";
-import { useState as C, useRef as j, useCallback as k, useMemo as h, useEffect as I } from "react";
+import { jsxs as l, jsx as a, Fragment as Y } from "react/jsx-runtime";
+import { useState as N, useRef as j, useCallback as C, useMemo as f, useEffect as I } from "react";
 import { createPortal as Z } from "react-dom";
 import { cn as H } from "../../utils/cn.js";
 import { COMMAND_PALETTE_DEFAULT_TRANSLATIONS as $, COMMAND_PALETTE_MAX_RECENT as J, COMMAND_PALETTE_TRIGGER_KEY as ee, COMMAND_PALETTE_Z_INDEX as re } from "./CommandPalette.const.js";
-import { defaultFilterFn as te, groupCommandsByCategory as ae, formatShortcut as ne } from "./CommandPalette.utils.js";
+import { defaultFilterFn as ae, groupCommandsByCategory as te, formatShortcut as ne } from "./CommandPalette.utils.js";
 const D = ({
-  command: a,
-  isHighlighted: P,
+  command: t,
+  isHighlighted: w,
   onSelect: m
 }) => /* @__PURE__ */ l(
   "button",
   {
     type: "button",
     onClick: m,
-    disabled: a.disabled,
+    disabled: t.disabled,
     className: H(
       "Bear-CommandPalette__item bear-w-full bear-flex bear-items-center bear-gap-3 bear-px-4 bear-py-2.5 bear-text-left bear-transition-colors",
-      P ? "bear-bg-primary-500/20 bear-text-primary-400" : "bear-text-zinc-300 hover:bear-bg-zinc-700",
-      a.disabled && "bear-opacity-50 bear-cursor-not-allowed"
+      w ? "bear-bg-primary-500/20 bear-text-primary-400" : "bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700",
+      t.disabled && "bear-opacity-50 bear-cursor-not-allowed"
     ),
     children: [
-      a.icon && /* @__PURE__ */ t("span", { className: "Bear-CommandPalette__item-icon bear-text-zinc-400 bear-shrink-0", children: a.icon }),
+      t.icon && /* @__PURE__ */ a("span", { className: "Bear-CommandPalette__item-icon bear-text-gray-500 dark:bear-text-zinc-400 bear-shrink-0", children: t.icon }),
       /* @__PURE__ */ l("div", { className: "Bear-CommandPalette__item-content bear-flex-1 bear-min-w-0", children: [
-        /* @__PURE__ */ t("div", { className: "Bear-CommandPalette__item-label bear-text-sm bear-font-medium bear-truncate", children: a.label }),
-        a.description && /* @__PURE__ */ t("div", { className: "Bear-CommandPalette__item-description bear-text-xs bear-text-zinc-500 bear-truncate", children: a.description })
+        /* @__PURE__ */ a("div", { className: "Bear-CommandPalette__item-label bear-text-sm bear-font-medium bear-truncate", children: t.label }),
+        t.description && /* @__PURE__ */ a("div", { className: "Bear-CommandPalette__item-description bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500 bear-truncate", children: t.description })
       ] }),
-      a.shortcut && /* @__PURE__ */ t("div", { className: "Bear-CommandPalette__item-shortcut bear-flex bear-gap-1 bear-shrink-0", children: ne(a.shortcut).map((w, x) => /* @__PURE__ */ t(
+      t.shortcut && /* @__PURE__ */ a("div", { className: "Bear-CommandPalette__item-shortcut bear-flex bear-gap-1 bear-shrink-0", children: ne(t.shortcut).map((P, h) => /* @__PURE__ */ a(
         "kbd",
         {
-          className: "bear-px-1.5 bear-py-0.5 bear-text-xs bear-font-mono bear-bg-zinc-700 bear-rounded bear-text-zinc-400",
-          children: w
+          className: "bear-px-1.5 bear-py-0.5 bear-text-xs bear-font-mono bear-bg-gray-200 bear-text-gray-600 dark:bear-bg-zinc-700 dark:bear-text-zinc-400 bear-rounded",
+          children: P
         },
-        x
+        h
       )) })
     ]
   }
-), be = ({
-  commands: a,
-  open: P,
+), ce = ({
+  commands: t,
+  open: w,
   onOpenChange: m,
-  placeholder: w,
-  showRecent: x = !0,
-  maxRecent: _ = J,
+  placeholder: P,
+  showRecent: h = !0,
+  maxRecent: g = J,
   recentIds: F,
-  onRecentChange: v,
+  onRecentChange: y,
   groupByCategory: z = !1,
-  filterFn: A = te,
+  filterFn: A = ae,
   triggerKey: T = ee,
   className: R,
   testId: q,
@@ -53,24 +53,24 @@ const D = ({
   icon: G,
   footer: M
 }) => {
-  const [U, X] = C(!1), [i, S] = C(""), [n, N] = C(0), [Q, V] = C([]), K = j(null), B = j(null), u = P ?? U, s = k((e) => {
+  const [U, X] = N(!1), [i, S] = N(""), [n, k] = N(0), [Q, V] = N([]), K = j(null), B = j(null), u = w ?? U, d = C((e) => {
     m == null || m(e), X(e);
-  }, [m]), c = F ?? Q, O = k((e) => {
-    v == null || v(e), V(e);
-  }, [v]), y = h(() => ({
+  }, [m]), s = F ?? Q, O = C((e) => {
+    y == null || y(e), V(e);
+  }, [y]), _ = f(() => ({
     ...$,
     ...L
-  }), [L]), p = h(() => i.trim() ? a.filter((e) => A(e, i)) : a, [a, i, A]), d = h(() => !x || i.trim() ? [] : c.slice(0, _).map((e) => a.find((r) => r.id === e)).filter(Boolean), [x, i, c, _, a]), g = h(() => z ? ae(p) : null, [p, z]), o = h(() => {
+  }), [L]), p = f(() => i.trim() ? t.filter((e) => A(e, i)) : t, [t, i, A]), b = f(() => !h || i.trim() ? [] : s.slice(0, g).map((e) => t.find((r) => r.id === e)).filter(Boolean), [h, i, s, g, t]), v = f(() => z ? te(p) : null, [p, z]), o = f(() => {
     const e = [];
-    return d.length > 0 && e.push(...d), e.push(...p.filter((r) => !c.includes(r.id))), e;
-  }, [d, p, c]);
+    return b.length > 0 && e.push(...b), e.push(...p.filter((r) => !s.includes(r.id))), e;
+  }, [b, p, s]);
   I(() => {
     const e = (r) => {
-      (r.metaKey || r.ctrlKey) && r.key.toLowerCase() === T && (r.preventDefault(), s(!u)), r.key === "Escape" && u && (r.preventDefault(), s(!1));
+      (r.metaKey || r.ctrlKey) && r.key.toLowerCase() === T && (r.preventDefault(), d(!u)), r.key === "Escape" && u && (r.preventDefault(), d(!1));
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [u, T, s]), I(() => {
-    u && (S(""), N(0), setTimeout(() => {
+  }, [u, T, d]), I(() => {
+    u && (S(""), k(0), setTimeout(() => {
       var e;
       return (e = K.current) == null ? void 0 : e.focus();
     }, 50));
@@ -80,25 +80,25 @@ const D = ({
       r && r.scrollIntoView({ block: "nearest" });
     }
   }, [n]);
-  const f = k((e) => {
-    const r = [e.id, ...c.filter((b) => b !== e.id)].slice(0, _);
-    O(r), s(!1), e.onSelect();
-  }, [c, _, O, s]), W = k((e) => {
+  const x = C((e) => {
+    const r = [e.id, ...s.filter((c) => c !== e.id)].slice(0, g);
+    O(r), d(!1), e.onSelect();
+  }, [s, g, O, d]), W = C((e) => {
     switch (e.key) {
       case "ArrowDown":
-        e.preventDefault(), N((r) => r < o.length - 1 ? r + 1 : 0);
+        e.preventDefault(), k((r) => r < o.length - 1 ? r + 1 : 0);
         break;
       case "ArrowUp":
-        e.preventDefault(), N((r) => r > 0 ? r - 1 : o.length - 1);
+        e.preventDefault(), k((r) => r > 0 ? r - 1 : o.length - 1);
         break;
       case "Enter":
-        e.preventDefault(), o[n] && !o[n].disabled && f(o[n]);
+        e.preventDefault(), o[n] && !o[n].disabled && x(o[n]);
         break;
       case "Escape":
-        e.preventDefault(), s(!1);
+        e.preventDefault(), d(!1);
         break;
     }
-  }, [o, n, f, s]);
+  }, [o, n, x, d]);
   return u && typeof document < "u" ? Z(
     /* @__PURE__ */ l(
       "div",
@@ -107,77 +107,77 @@ const D = ({
         style: { zIndex: re },
         "data-testid": q,
         children: [
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ a(
             "div",
             {
               className: "Bear-CommandPalette__backdrop bear-absolute bear-inset-0 bear-bg-black/50 bear-backdrop-blur-sm",
-              onClick: () => s(!1)
+              onClick: () => d(!1)
             }
           ),
-          /* @__PURE__ */ l("div", { className: "Bear-CommandPalette__content bear-relative bear-w-full bear-max-w-xl bear-bg-zinc-800 bear-border bear-border-zinc-700 bear-rounded-xl bear-shadow-2xl bear-overflow-hidden", children: [
-            /* @__PURE__ */ l("div", { className: "Bear-CommandPalette__search bear-flex bear-items-center bear-gap-3 bear-px-4 bear-py-3 bear-border-b bear-border-zinc-700", children: [
-              G ?? /* @__PURE__ */ t("svg", { className: "bear-w-5 bear-h-5 bear-text-zinc-400 bear-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
-              /* @__PURE__ */ t(
+          /* @__PURE__ */ l("div", { className: "Bear-CommandPalette__content bear-relative bear-w-full bear-max-w-xl bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-xl bear-shadow-2xl bear-overflow-hidden", children: [
+            /* @__PURE__ */ l("div", { className: "Bear-CommandPalette__search bear-flex bear-items-center bear-gap-3 bear-px-4 bear-py-3 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700", children: [
+              G ?? /* @__PURE__ */ a("svg", { className: "bear-w-5 bear-h-5 bear-text-gray-500 dark:bear-text-zinc-400 bear-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ a("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
+              /* @__PURE__ */ a(
                 "input",
                 {
                   ref: K,
                   type: "text",
                   value: i,
                   onChange: (e) => {
-                    S(e.target.value), N(0);
+                    S(e.target.value), k(0);
                   },
                   onKeyDown: W,
-                  placeholder: w || y.placeholder,
-                  className: "Bear-CommandPalette__input bear-flex-1 bear-bg-transparent bear-border-0 bear-outline-none bear-text-white placeholder:bear-text-zinc-500"
+                  placeholder: P || _.placeholder,
+                  className: "Bear-CommandPalette__input bear-flex-1 bear-bg-transparent bear-border-0 bear-outline-none bear-text-gray-900 dark:bear-text-white placeholder:bear-text-gray-400 dark:placeholder:bear-text-zinc-500"
                 }
               ),
-              /* @__PURE__ */ t("kbd", { className: "bear-px-2 bear-py-1 bear-text-xs bear-font-mono bear-bg-zinc-700 bear-rounded bear-text-zinc-400", children: "esc" })
+              /* @__PURE__ */ a("kbd", { className: "bear-px-2 bear-py-1 bear-text-xs bear-font-mono bear-bg-gray-200 bear-text-gray-600 dark:bear-bg-zinc-700 dark:bear-text-zinc-400 bear-rounded", children: "esc" })
             ] }),
-            /* @__PURE__ */ t(
+            /* @__PURE__ */ a(
               "div",
               {
                 ref: B,
                 className: "Bear-CommandPalette__list bear-max-h-[60vh] bear-overflow-y-auto",
-                children: o.length === 0 ? /* @__PURE__ */ t("div", { className: "Bear-CommandPalette__empty bear-px-4 bear-py-8 bear-text-center bear-text-sm bear-text-zinc-500", children: y.noResults }) : /* @__PURE__ */ l(Y, { children: [
-                  d.length > 0 && !i.trim() && /* @__PURE__ */ l("div", { className: "Bear-CommandPalette__group", children: [
-                    /* @__PURE__ */ t("div", { className: "Bear-CommandPalette__group-header bear-px-4 bear-py-2 bear-text-xs bear-font-medium bear-text-zinc-500 bear-uppercase bear-tracking-wider bear-bg-zinc-800/50", children: y.recentCommands }),
-                    d.map((e, r) => /* @__PURE__ */ t("div", { "data-command-item": !0, children: /* @__PURE__ */ t(
+                children: o.length === 0 ? /* @__PURE__ */ a("div", { className: "Bear-CommandPalette__empty bear-px-4 bear-py-8 bear-text-center bear-text-sm bear-text-gray-500 dark:bear-text-zinc-500", children: _.noResults }) : /* @__PURE__ */ l(Y, { children: [
+                  b.length > 0 && !i.trim() && /* @__PURE__ */ l("div", { className: "Bear-CommandPalette__group", children: [
+                    /* @__PURE__ */ a("div", { className: "Bear-CommandPalette__group-header bear-px-4 bear-py-2 bear-text-xs bear-font-medium bear-text-gray-500 dark:bear-text-zinc-500 bear-uppercase bear-tracking-wider bear-bg-gray-50 dark:bear-bg-zinc-800/50", children: _.recentCommands }),
+                    b.map((e, r) => /* @__PURE__ */ a("div", { "data-command-item": !0, children: /* @__PURE__ */ a(
                       D,
                       {
                         command: e,
                         isHighlighted: n === r,
-                        onSelect: () => f(e)
+                        onSelect: () => x(e)
                       }
                     ) }, `recent-${e.id}`))
                   ] }),
-                  z && g ? g.map((e) => {
-                    const r = d.length + g.slice(0, g.indexOf(e)).reduce((b, E) => b + E.commands.length, 0);
+                  z && v ? v.map((e) => {
+                    const r = b.length + v.slice(0, v.indexOf(e)).reduce((c, E) => c + E.commands.length, 0);
                     return /* @__PURE__ */ l("div", { className: "Bear-CommandPalette__group", children: [
-                      /* @__PURE__ */ t("div", { className: "Bear-CommandPalette__group-header bear-px-4 bear-py-2 bear-text-xs bear-font-medium bear-text-zinc-500 bear-uppercase bear-tracking-wider bear-bg-zinc-800/50", children: e.name }),
-                      e.commands.map((b, E) => /* @__PURE__ */ t("div", { "data-command-item": !0, children: /* @__PURE__ */ t(
+                      /* @__PURE__ */ a("div", { className: "Bear-CommandPalette__group-header bear-px-4 bear-py-2 bear-text-xs bear-font-medium bear-text-gray-500 dark:bear-text-zinc-500 bear-uppercase bear-tracking-wider bear-bg-gray-50 dark:bear-bg-zinc-800/50", children: e.name }),
+                      e.commands.map((c, E) => /* @__PURE__ */ a("div", { "data-command-item": !0, children: /* @__PURE__ */ a(
                         D,
                         {
-                          command: b,
+                          command: c,
                           isHighlighted: n === r + E,
-                          onSelect: () => f(b)
+                          onSelect: () => x(c)
                         }
-                      ) }, b.id))
+                      ) }, c.id))
                     ] }, e.name);
                   }) : /* @__PURE__ */ l("div", { className: "Bear-CommandPalette__group", children: [
-                    !i.trim() && d.length > 0 && /* @__PURE__ */ t("div", { className: "Bear-CommandPalette__group-header bear-px-4 bear-py-2 bear-text-xs bear-font-medium bear-text-zinc-500 bear-uppercase bear-tracking-wider bear-bg-zinc-800/50", children: y.allCommands }),
-                    p.filter((e) => !c.includes(e.id) || i.trim()).map((e, r) => /* @__PURE__ */ t("div", { "data-command-item": !0, children: /* @__PURE__ */ t(
+                    !i.trim() && b.length > 0 && /* @__PURE__ */ a("div", { className: "Bear-CommandPalette__group-header bear-px-4 bear-py-2 bear-text-xs bear-font-medium bear-text-gray-500 dark:bear-text-zinc-500 bear-uppercase bear-tracking-wider bear-bg-gray-50 dark:bear-bg-zinc-800/50", children: _.allCommands }),
+                    p.filter((e) => !s.includes(e.id) || i.trim()).map((e, r) => /* @__PURE__ */ a("div", { "data-command-item": !0, children: /* @__PURE__ */ a(
                       D,
                       {
                         command: e,
-                        isHighlighted: n === d.length + r,
-                        onSelect: () => f(e)
+                        isHighlighted: n === b.length + r,
+                        onSelect: () => x(e)
                       }
                     ) }, e.id))
                   ] })
                 ] })
               }
             ),
-            M && /* @__PURE__ */ t("div", { className: "Bear-CommandPalette__footer bear-px-4 bear-py-2 bear-border-t bear-border-zinc-700 bear-text-xs bear-text-zinc-500", children: M })
+            M && /* @__PURE__ */ a("div", { className: "Bear-CommandPalette__footer bear-px-4 bear-py-2 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500", children: M })
           ] })
         ]
       }
@@ -186,5 +186,5 @@ const D = ({
   ) : null;
 };
 export {
-  be as CommandPalette
+  ce as CommandPalette
 };

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

@@ -47,6 +47,7 @@ export interface CommandPaletteTranslations {
  * CommandPalette component props
  */
 export interface CommandPaletteProps {
+    id?: string;
     /** Available commands */
     commands: CommandItem[];
     /** Whether the palette is open */

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

@@ -13,6 +13,7 @@ export interface ConfettiPiece {
     shape: 'square' | 'circle' | 'triangle';
 }
 export interface ConfettiProps {
+    id?: string;
     /** Whether confetti is active */
     active?: boolean;
     /** Number of confetti pieces */

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

@@ -0,0 +1 @@
+export declare const C_O_N_T_A_I_N_E_R_ROOT_CLASS = "Bear-Container";

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

@@ -1,6 +1,7 @@
 import { HTMLAttributes } from 'react';
 export type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
 export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+    id?: string;
     /** Maximum width of the container */
     size?: ContainerSize;
     /** Whether to center the container */

package/dist/components/ContextMenu/ContextMenu.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("react"),_=require("../../utils/cn.cjs"),l=require("./ContextMenu.const.cjs"),j=require("./ContextMenu.utils.cjs"),b=({items:S,position:a,onClose:i})=>{const[c,o]=r.useState(null),[u,d]=r.useState({x:0,y:0}),x=r.useRef(null),E=r.useCallback(s=>{var e;s.disabled||s.children||((e=s.onClick)==null||e.call(s),i())},[i]),f=r.useCallback((s,e)=>{if(s.children){const n=e.currentTarget.getBoundingClientRect();d({x:n.right+l.SUB_MENU_OFFSET,y:n.top}),o(s.id)}else o(null)},[]);return t.jsx("div",{ref:x,className:l.MENU_CLASSES,style:{left:a.x,top:a.y},role:"menu",children:S.map(s=>{if(j.isDivider(s))return t.jsx("div",{className:l.DIVIDER_CLASSES,role:"separator"},s.id);const e=s;return t.jsxs("div",{children:[t.jsxs("div",{className:_.cn(l.ITEM_CLASSES,e.disabled&&l.ITEM_DISABLED_CLASSES,e.danger&&l.ITEM_DANGER_CLASSES),onClick:()=>E(e),onMouseEnter:n=>f(e,n),role:"menuitem","aria-disabled":e.disabled,children:[t.jsxs("span",{className:"bear-flex bear-items-center",children:[e.icon&&t.jsx("span",{className:l.ICON_CLASSES,children:e.icon}),e.label]}),t.jsxs("span",{className:"bear-flex bear-items-center",children:[e.shortcut&&t.jsx("span",{className:l.SHORTCUT_CLASSES,children:e.shortcut}),e.children&&t.jsx("span",{className:l.SUB_INDICATOR_CLASSES,children:"▸"})]})]}),e.children&&c===e.id&&t.jsx(b,{items:e.children,position:u,onClose:i})]},e.id)})})},v=({items:S,children:a,disabled:i=!1,onOpenChange:c,testId:o})=>{const[u,d]=r.useState(!1),[x,E]=r.useState({x:0,y:0}),f=r.useRef(null),s=r.useCallback(()=>{d(!1),c==null||c(!1)},[c]),e=r.useCallback(n=>{i||(n.preventDefault(),E({x:n.clientX,y:n.clientY}),d(!0),c==null||c(!0))},[i,c]);return r.useEffect(()=>{if(!u)return;const n=()=>s(),m=M=>{M.key==="Escape"&&s()};return document.addEventListener("mousedown",n),document.addEventListener("keydown",m),()=>{document.removeEventListener("mousedown",n),document.removeEventListener("keydown",m)}},[u,s]),t.jsxs("div",{ref:f,onContextMenu:e,"data-testid":o,children:[a,u&&t.jsx(b,{items:S,position:x,onClose:s})]})};exports.ContextMenu=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react/jsx-runtime"),n=require("react"),T=require("../../utils/generateBearId.utils.cjs"),b=require("../../utils/useBearId.cjs"),k=require("./ContextMenu.const.cjs"),R=require("./components/ContextMenuMenuList/ContextMenuMenuList.cjs"),S=M=>{const{id:v,items:y,children:C,disabled:c=!1,onOpenChange:e,testId:E}=M,[o,i]=n.useState(!1),[I,q]=n.useState({x:0,y:0}),d=n.useRef(null),p=b.useBearId("ContextMenu"),w=T.resolveBearId(v,p),s=n.useCallback(()=>{i(!1),e==null||e(!1)},[e]),L=n.useCallback(t=>{c||(t.preventDefault(),q({x:t.clientX,y:t.clientY}),i(!0),e==null||e(!0))},[c,e]);return n.useEffect(()=>{if(!o)return;const t=r=>{var m;const l=r.target;if((m=d.current)!=null&&m.contains(l))return;const f=document.querySelectorAll(`[${k.CONTEXT_MENU_DATA_ATTR}]`);for(let u=0;u<f.length;u+=1)if(f[u].contains(l))return;s()},a=r=>{r.key==="Escape"&&s()};return document.addEventListener("mousedown",t),document.addEventListener("keydown",a),()=>{document.removeEventListener("mousedown",t),document.removeEventListener("keydown",a)}},[o,s]),x.jsxs("div",{ref:d,id:w,onContextMenu:L,"data-testid":E,children:[C,o&&x.jsx(R.ContextMenuMenuList,{items:y,position:I,onClose:s})]})};exports.ContextMenu=S;

package/dist/components/ContextMenu/ContextMenu.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r="Bear-ContextMenu bear-fixed bear-z-[99999] bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-py-1 bear-min-w-[180px] bear-animate-in",e="bear-flex bear-items-center bear-justify-between bear-px-3 bear-py-1.5 bear-text-sm bear-cursor-pointer bear-transition-colors bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-50 dark:hover:bear-bg-zinc-700",a="bear-opacity-40 bear-cursor-not-allowed",b="bear-text-red-600 dark:bear-text-red-400 hover:bear-bg-red-50 dark:hover:bear-bg-red-900/20",S="bear-my-1 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700",t="bear-mr-2 bear-w-4 bear-h-4 bear-flex-shrink-0",o="bear-text-xs bear-text-gray-400 dark:bear-text-zinc-500 bear-ml-4",E="bear-ml-2 bear-text-gray-400 dark:bear-text-zinc-500",n=4;exports.DIVIDER_CLASSES=S;exports.ICON_CLASSES=t;exports.ITEM_CLASSES=e;exports.ITEM_DANGER_CLASSES=b;exports.ITEM_DISABLED_CLASSES=a;exports.MENU_CLASSES=r;exports.SHORTCUT_CLASSES=o;exports.SUB_INDICATOR_CLASSES=E;exports.SUB_MENU_OFFSET=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="data-bear-context-menu",r="Bear-ContextMenu bear-fixed bear-z-[99999] bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-py-1 bear-min-w-[180px] bear-animate-in",a="bear-flex bear-items-center bear-justify-between bear-px-3 bear-py-1.5 bear-text-sm bear-cursor-pointer bear-transition-colors bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-50 dark:hover:bear-bg-zinc-700",S="bear-opacity-40 bear-cursor-not-allowed",b="bear-text-red-600 dark:bear-text-red-400 hover:bear-bg-red-50 dark:hover:bear-bg-red-900/20",t="bear-my-1 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700",E="bear-mr-2 bear-w-4 bear-h-4 bear-flex-shrink-0",o="bear-text-xs bear-text-gray-400 dark:bear-text-zinc-500 bear-ml-4",_="bear-ml-2 bear-text-gray-400 dark:bear-text-zinc-500",n="bear-flex bear-items-center",A=4,T=8;exports.CONTEXT_MENU_DATA_ATTR=e;exports.DIVIDER_CLASSES=t;exports.ICON_CLASSES=E;exports.ITEM_CLASSES=a;exports.ITEM_DANGER_CLASSES=b;exports.ITEM_DISABLED_CLASSES=S;exports.ITEM_ROW_CLASSES=n;exports.MENU_CLASSES=r;exports.SHORTCUT_CLASSES=o;exports.SUB_INDICATOR_CLASSES=_;exports.SUB_MENU_OFFSET=A;exports.VIEWPORT_PADDING=T;

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

@@ -1,3 +1,4 @@
+export declare const CONTEXT_MENU_DATA_ATTR = "data-bear-context-menu";
 export declare const MENU_CLASSES = "Bear-ContextMenu bear-fixed bear-z-[99999] bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-py-1 bear-min-w-[180px] bear-animate-in";
 export declare const ITEM_CLASSES = "bear-flex bear-items-center bear-justify-between bear-px-3 bear-py-1.5 bear-text-sm bear-cursor-pointer bear-transition-colors bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-50 dark:hover:bear-bg-zinc-700";
 export declare const ITEM_DISABLED_CLASSES = "bear-opacity-40 bear-cursor-not-allowed";
@@ -6,4 +7,6 @@ export declare const DIVIDER_CLASSES = "bear-my-1 bear-border-t bear-border-gray
 export declare const ICON_CLASSES = "bear-mr-2 bear-w-4 bear-h-4 bear-flex-shrink-0";
 export declare const SHORTCUT_CLASSES = "bear-text-xs bear-text-gray-400 dark:bear-text-zinc-500 bear-ml-4";
 export declare const SUB_INDICATOR_CLASSES = "bear-ml-2 bear-text-gray-400 dark:bear-text-zinc-500";
+export declare const ITEM_ROW_CLASSES = "bear-flex bear-items-center";
 export declare const SUB_MENU_OFFSET = 4;
+export declare const VIEWPORT_PADDING = 8;

package/dist/components/ContextMenu/ContextMenu.const.js

@@ -1,12 +1,15 @@
-const r = "Bear-ContextMenu bear-fixed bear-z-[99999] bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-py-1 bear-min-w-[180px] bear-animate-in", e = "bear-flex bear-items-center bear-justify-between bear-px-3 bear-py-1.5 bear-text-sm bear-cursor-pointer bear-transition-colors bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-50 dark:hover:bear-bg-zinc-700", a = "bear-opacity-40 bear-cursor-not-allowed", b = "bear-text-red-600 dark:bear-text-red-400 hover:bear-bg-red-50 dark:hover:bear-bg-red-900/20", t = "bear-my-1 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700", o = "bear-mr-2 bear-w-4 bear-h-4 bear-flex-shrink-0", n = "bear-text-xs bear-text-gray-400 dark:bear-text-zinc-500 bear-ml-4", S = "bear-ml-2 bear-text-gray-400 dark:bear-text-zinc-500", d = 4;
+const r = "data-bear-context-menu", e = "Bear-ContextMenu bear-fixed bear-z-[99999] bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-py-1 bear-min-w-[180px] bear-animate-in", a = "bear-flex bear-items-center bear-justify-between bear-px-3 bear-py-1.5 bear-text-sm bear-cursor-pointer bear-transition-colors bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-50 dark:hover:bear-bg-zinc-700", b = "bear-opacity-40 bear-cursor-not-allowed", t = "bear-text-red-600 dark:bear-text-red-400 hover:bear-bg-red-50 dark:hover:bear-bg-red-900/20", o = "bear-my-1 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700", n = "bear-mr-2 bear-w-4 bear-h-4 bear-flex-shrink-0", S = "bear-text-xs bear-text-gray-400 dark:bear-text-zinc-500 bear-ml-4", c = "bear-ml-2 bear-text-gray-400 dark:bear-text-zinc-500", d = "bear-flex bear-items-center", s = 4, E = 8;
 export {
-  t as DIVIDER_CLASSES,
-  o as ICON_CLASSES,
-  e as ITEM_CLASSES,
-  b as ITEM_DANGER_CLASSES,
-  a as ITEM_DISABLED_CLASSES,
-  r as MENU_CLASSES,
-  n as SHORTCUT_CLASSES,
-  S as SUB_INDICATOR_CLASSES,
-  d as SUB_MENU_OFFSET
+  r as CONTEXT_MENU_DATA_ATTR,
+  o as DIVIDER_CLASSES,
+  n as ICON_CLASSES,
+  a as ITEM_CLASSES,
+  t as ITEM_DANGER_CLASSES,
+  b as ITEM_DISABLED_CLASSES,
+  d as ITEM_ROW_CLASSES,
+  e as MENU_CLASSES,
+  S as SHORTCUT_CLASSES,
+  c as SUB_INDICATOR_CLASSES,
+  s as SUB_MENU_OFFSET,
+  E as VIEWPORT_PADDING
 };

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -1,4 +1,2 @@
-import { FC } from 'react';
 import { ContextMenuProps } from './ContextMenu.types';
-export declare const ContextMenu: FC<ContextMenuProps>;
-export default ContextMenu;
+export declare const ContextMenu: (props: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ContextMenu/ContextMenu.js

@@ -1,65 +1,36 @@
-import { jsxs as i, jsx as n } from "react/jsx-runtime";
-import { useState as u, useRef as b, useCallback as S, useEffect as N } from "react";
-import { cn as _ } from "../../utils/cn.js";
-import { SUB_MENU_OFFSET as h, MENU_CLASSES as A, DIVIDER_CLASSES as I, ICON_CLASSES as M, SHORTCUT_CLASSES as k, SUB_INDICATOR_CLASSES as y, ITEM_DANGER_CLASSES as C, ITEM_DISABLED_CLASSES as D, ITEM_CLASSES as R } from "./ContextMenu.const.js";
-import { isDivider as T } from "./ContextMenu.utils.js";
-const v = ({ items: m, position: o, onClose: c }) => {
-  const [r, d] = u(null), [l, a] = u({ x: 0, y: 0 }), f = b(null), E = S((s) => {
-    var e;
-    s.disabled || s.children || ((e = s.onClick) == null || e.call(s), c());
-  }, [c]), p = S((s, e) => {
-    if (s.children) {
-      const t = e.currentTarget.getBoundingClientRect();
-      a({ x: t.right + h, y: t.top }), d(s.id);
-    } else
-      d(null);
-  }, []);
-  return /* @__PURE__ */ n("div", { ref: f, className: A, style: { left: o.x, top: o.y }, role: "menu", children: m.map((s) => {
-    if (T(s)) return /* @__PURE__ */ n("div", { className: I, role: "separator" }, s.id);
-    const e = s;
-    return /* @__PURE__ */ i("div", { children: [
-      /* @__PURE__ */ i(
-        "div",
-        {
-          className: _(R, e.disabled && D, e.danger && C),
-          onClick: () => E(e),
-          onMouseEnter: (t) => p(e, t),
-          role: "menuitem",
-          "aria-disabled": e.disabled,
-          children: [
-            /* @__PURE__ */ i("span", { className: "bear-flex bear-items-center", children: [
-              e.icon && /* @__PURE__ */ n("span", { className: M, children: e.icon }),
-              e.label
-            ] }),
-            /* @__PURE__ */ i("span", { className: "bear-flex bear-items-center", children: [
-              e.shortcut && /* @__PURE__ */ n("span", { className: k, children: e.shortcut }),
-              e.children && /* @__PURE__ */ n("span", { className: y, children: "▸" })
-            ] })
-          ]
-        }
-      ),
-      e.children && r === e.id && /* @__PURE__ */ n(v, { items: e.children, position: l, onClose: c })
-    ] }, e.id);
-  }) });
-}, F = ({ items: m, children: o, disabled: c = !1, onOpenChange: r, testId: d }) => {
-  const [l, a] = u(!1), [f, E] = u({ x: 0, y: 0 }), p = b(null), s = S(() => {
-    a(!1), r == null || r(!1);
-  }, [r]), e = S((t) => {
-    c || (t.preventDefault(), E({ x: t.clientX, y: t.clientY }), a(!0), r == null || r(!0));
-  }, [c, r]);
-  return N(() => {
-    if (!l) return;
-    const t = () => s(), L = (x) => {
-      x.key === "Escape" && s();
+import { jsxs as k, jsx as A } from "react/jsx-runtime";
+import { useState as f, useRef as h, useCallback as p, useEffect as D } from "react";
+import { resolveBearId as R } from "../../utils/generateBearId.utils.js";
+import { useBearId as _ } from "../../utils/useBearId.js";
+import { CONTEXT_MENU_DATA_ATTR as b } from "./ContextMenu.const.js";
+import { ContextMenuMenuList as j } from "./components/ContextMenuMenuList/ContextMenuMenuList.js";
+const q = (x) => {
+  const { id: v, items: E, children: y, disabled: i = !1, onOpenChange: e, testId: M } = x, [o, d] = f(!1), [w, I] = f({ x: 0, y: 0 }), u = h(null), C = _("ContextMenu"), L = R(v, C), n = p(() => {
+    d(!1), e == null || e(!1);
+  }, [e]), T = p((t) => {
+    i || (t.preventDefault(), I({ x: t.clientX, y: t.clientY }), d(!0), e == null || e(!0));
+  }, [i, e]);
+  return D(() => {
+    if (!o) return;
+    const t = (r) => {
+      var a;
+      const l = r.target;
+      if ((a = u.current) != null && a.contains(l)) return;
+      const m = document.querySelectorAll(`[${b}]`);
+      for (let s = 0; s < m.length; s += 1)
+        if (m[s].contains(l)) return;
+      n();
+    }, c = (r) => {
+      r.key === "Escape" && n();
     };
-    return document.addEventListener("mousedown", t), document.addEventListener("keydown", L), () => {
-      document.removeEventListener("mousedown", t), document.removeEventListener("keydown", L);
+    return document.addEventListener("mousedown", t), document.addEventListener("keydown", c), () => {
+      document.removeEventListener("mousedown", t), document.removeEventListener("keydown", c);
     };
-  }, [l, s]), /* @__PURE__ */ i("div", { ref: p, onContextMenu: e, "data-testid": d, children: [
-    o,
-    l && /* @__PURE__ */ n(v, { items: m, position: f, onClose: s })
+  }, [o, n]), /* @__PURE__ */ k("div", { ref: u, id: L, onContextMenu: T, "data-testid": M, children: [
+    y,
+    o && /* @__PURE__ */ A(j, { items: E, position: w, onClose: n })
   ] });
 };
 export {
-  F as ContextMenu
+  q as ContextMenu
 };

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

@@ -15,6 +15,7 @@ export interface ContextMenuDivider {
 }
 export type ContextMenuEntry = ContextMenuItem | ContextMenuDivider;
 export interface ContextMenuProps {
+    id?: string;
     items: ContextMenuEntry[];
     children: ReactNode;
     disabled?: boolean;

package/dist/components/ContextMenu/ContextMenu.utils.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=i=>"type"in i&&i.type==="divider";exports.isDivider=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./ContextMenu.const.cjs"),P=t=>"type"in t&&t.type==="divider",d=(t,r)=>{const e=r.getBoundingClientRect();let n=t.x,o=t.y;return e.right>window.innerWidth-i.VIEWPORT_PADDING&&(n=window.innerWidth-e.width-i.VIEWPORT_PADDING),e.bottom>window.innerHeight-i.VIEWPORT_PADDING&&(o=window.innerHeight-e.height-i.VIEWPORT_PADDING),{x:Math.max(i.VIEWPORT_PADDING,n),y:Math.max(i.VIEWPORT_PADDING,o)}};exports.clampMenuPosition=d;exports.isDivider=P;

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

@@ -3,3 +3,10 @@ export declare const isDivider: (entry: ContextMenuEntry) => entry is {
     id: string;
     type: "divider";
 };
+export declare const clampMenuPosition: (position: {
+    x: number;
+    y: number;
+}, menuEl: HTMLDivElement) => {
+    x: number;
+    y: number;
+};

package/dist/components/ContextMenu/ContextMenu.utils.js

@@ -1,4 +1,13 @@
-const e = (i) => "type" in i && i.type === "divider";
+import { VIEWPORT_PADDING as i } from "./ContextMenu.const.js";
+const h = (t) => "type" in t && t.type === "divider", w = (t, r) => {
+  const n = r.getBoundingClientRect();
+  let e = t.x, o = t.y;
+  return n.right > window.innerWidth - i && (e = window.innerWidth - n.width - i), n.bottom > window.innerHeight - i && (o = window.innerHeight - n.height - i), {
+    x: Math.max(i, e),
+    y: Math.max(i, o)
+  };
+};
 export {
-  e as isDivider
+  w as clampMenuPosition,
+  h as isDivider
 };

package/dist/components/ContextMenu/components/ContextMenuMenuList/ContextMenuMenuList.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("react"),T=require("react-dom"),f=require("../../../../utils/cn.cjs"),n=require("../../ContextMenu.const.cjs"),E=require("../../ContextMenu.utils.cjs"),C=x=>{const{items:u,position:r,onClose:l}=x,[_,a]=o.useState(null),[M,h]=o.useState({x:0,y:0}),[c,d]=o.useState(r),S=o.useRef(null);o.useLayoutEffect(()=>{d(r)},[r.x,r.y]),o.useLayoutEffect(()=>{const s=S.current;if(!s)return;const e=E.clampMenuPosition(c,s);(e.x!==c.x||e.y!==c.y)&&d(e)},[c.x,c.y,u]);const p=o.useCallback(s=>{var e;s.disabled||s.children||((e=s.onClick)==null||e.call(s),l())},[l]),A=o.useCallback((s,e)=>{if(s.children){const i=e.currentTarget.getBoundingClientRect();h({x:i.right+n.SUB_MENU_OFFSET,y:i.top}),a(s.id)}else a(null)},[]),m=t.jsx("div",{ref:S,[n.CONTEXT_MENU_DATA_ATTR]:!0,className:n.MENU_CLASSES,style:{left:c.x,top:c.y},role:"menu",onMouseDown:s=>s.stopPropagation(),onContextMenu:s=>s.preventDefault(),children:u.map(s=>{if(E.isDivider(s))return t.jsx("div",{className:n.DIVIDER_CLASSES,role:"separator"},s.id);const e=s;return t.jsxs("div",{children:[t.jsxs("div",{className:f.cn(n.ITEM_CLASSES,e.disabled&&n.ITEM_DISABLED_CLASSES,e.danger&&n.ITEM_DANGER_CLASSES),onClick:()=>p(e),onMouseEnter:i=>A(e,i),role:"menuitem","aria-disabled":e.disabled,children:[t.jsxs("span",{className:n.ITEM_ROW_CLASSES,children:[e.icon&&t.jsx("span",{className:n.ICON_CLASSES,children:e.icon}),e.label]}),t.jsxs("span",{className:n.ITEM_ROW_CLASSES,children:[e.shortcut&&t.jsx("span",{className:n.SHORTCUT_CLASSES,children:e.shortcut}),e.children&&t.jsx("span",{className:n.SUB_INDICATOR_CLASSES,children:"▸"})]})]}),e.children&&_===e.id&&t.jsx(C,{items:e.children,position:M,onClose:l})]},e.id)})});return T.createPortal(m,document.body)};exports.ContextMenuMenuList=C;

package/dist/components/ContextMenu/components/ContextMenuMenuList/ContextMenuMenuList.d.ts

@@ -0,0 +1,11 @@
+import { ContextMenuEntry } from '../../ContextMenu.types';
+type ContextMenuMenuListProps = {
+    items: ContextMenuEntry[];
+    position: {
+        x: number;
+        y: number;
+    };
+    onClose: () => void;
+};
+export declare const ContextMenuMenuList: (props: ContextMenuMenuListProps) => import('react').ReactPortal;
+export {};

package/dist/components/ContextMenu/components/ContextMenuMenuList/ContextMenuMenuList.js

@@ -0,0 +1,69 @@
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
+import { useState as c, useRef as T, useLayoutEffect as m, useCallback as p } from "react";
+import { createPortal as x } from "react-dom";
+import { cn as L } from "../../../../utils/cn.js";
+import { SUB_MENU_OFFSET as b, MENU_CLASSES as I, DIVIDER_CLASSES as D, ITEM_ROW_CLASSES as E, ICON_CLASSES as R, SHORTCUT_CLASSES as y, SUB_INDICATOR_CLASSES as O, ITEM_DANGER_CLASSES as P, ITEM_DISABLED_CLASSES as g, ITEM_CLASSES as v, CONTEXT_MENU_DATA_ATTR as U } from "../../ContextMenu.const.js";
+import { clampMenuPosition as j, isDivider as k } from "../../ContextMenu.utils.js";
+const B = (C) => {
+  const { items: a, position: t, onClose: l } = C, [f, d] = c(null), [h, _] = c({ x: 0, y: 0 }), [s, u] = c(t), S = T(null);
+  m(() => {
+    u(t);
+  }, [t.x, t.y]), m(() => {
+    const n = S.current;
+    if (!n) return;
+    const e = j(s, n);
+    (e.x !== s.x || e.y !== s.y) && u(e);
+  }, [s.x, s.y, a]);
+  const A = p((n) => {
+    var e;
+    n.disabled || n.children || ((e = n.onClick) == null || e.call(n), l());
+  }, [l]), N = p((n, e) => {
+    if (n.children) {
+      const r = e.currentTarget.getBoundingClientRect();
+      _({ x: r.right + b, y: r.top }), d(n.id);
+    } else
+      d(null);
+  }, []), M = /* @__PURE__ */ o(
+    "div",
+    {
+      ref: S,
+      [U]: !0,
+      className: I,
+      style: { left: s.x, top: s.y },
+      role: "menu",
+      onMouseDown: (n) => n.stopPropagation(),
+      onContextMenu: (n) => n.preventDefault(),
+      children: a.map((n) => {
+        if (k(n)) return /* @__PURE__ */ o("div", { className: D, role: "separator" }, n.id);
+        const e = n;
+        return /* @__PURE__ */ i("div", { children: [
+          /* @__PURE__ */ i(
+            "div",
+            {
+              className: L(v, e.disabled && g, e.danger && P),
+              onClick: () => A(e),
+              onMouseEnter: (r) => N(e, r),
+              role: "menuitem",
+              "aria-disabled": e.disabled,
+              children: [
+                /* @__PURE__ */ i("span", { className: E, children: [
+                  e.icon && /* @__PURE__ */ o("span", { className: R, children: e.icon }),
+                  e.label
+                ] }),
+                /* @__PURE__ */ i("span", { className: E, children: [
+                  e.shortcut && /* @__PURE__ */ o("span", { className: y, children: e.shortcut }),
+                  e.children && /* @__PURE__ */ o("span", { className: O, children: "▸" })
+                ] })
+              ]
+            }
+          ),
+          e.children && f === e.id && /* @__PURE__ */ o(B, { items: e.children, position: h, onClose: l })
+        ] }, e.id);
+      })
+    }
+  );
+  return x(M, document.body);
+};
+export {
+  B as ContextMenuMenuList
+};

package/dist/components/ContextMenu/components/ContextMenuMenuList/index.d.ts

@@ -0,0 +1 @@
+export { ContextMenuMenuList } from './ContextMenuMenuList';

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

@@ -0,0 +1 @@
+export declare const C_O_P_Y_B_U_T_T_O_N_ROOT_CLASS = "Bear-CopyButton";

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

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
 export interface CopyButtonProps {
+    testId?: string;
+    id?: string;
     value: string;
     children?: ReactNode;
     onCopy?: (value: string) => void;