@forgedevstack/bear 1.2.0 → 1.2.2

package/dist/components/DiffViewer/DiffViewer.js

@@ -1,127 +1,119 @@
-import { jsxs as r, jsx as d } from "react/jsx-runtime";
-import { useMemo as v } from "react";
-import { cn as h } from "../../utils/cn.js";
-import { useBear as B } from "../../context/BearProvider.js";
-import { Typography as i } from "../Typography/Typography.js";
-import { LINE_NUMBER_WIDTH as M, DIFF_COLORS as O } from "./DiffViewer.const.js";
-import { computeDiff as _, computeStats as j } from "./DiffViewer.utils.js";
-const H = ({
-  oldValue: l,
-  newValue: m,
-  viewMode: x = "split",
-  showLineNumbers: y = !0,
-  oldTitle: N = "Original",
-  newTitle: u = "Modified",
-  showStats: f = !0,
-  className: p,
-  testId: g
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import { useState as R, useMemo as x, useCallback as y } from "react";
+import { cn as o } from "../../utils/cn.js";
+import { useBear as W } from "../../context/BearProvider.js";
+import { Typography as n } from "../Typography/Typography.js";
+import { DEFAULT_OLD_TITLE as j, DEFAULT_NEW_TITLE as G, DEFAULT_SPACING as H, LINE_NUMBER_WIDTH as P, LINE_SPACING as V, DIFF_COLORS as $, LINE_HOVER_LABELS as q } from "./DiffViewer.const.js";
+import { computeDiff as z, computeStats as J } from "./DiffViewer.utils.js";
+const ae = ({
+  oldValue: p,
+  newValue: f,
+  viewMode: L = "split",
+  showLineNumbers: E = !0,
+  oldTitle: k = j,
+  newTitle: _ = G,
+  showStats: D = !0,
+  spacing: T = H,
+  showLineHoverInfo: i = !1,
+  className: w,
+  testId: v
 }) => {
-  const { mode: w } = B(), b = w === "dark", o = v(() => _(l, m), [l, m]), t = v(() => j(o), [o]), n = (e) => y ? /* @__PURE__ */ d(
+  const { mode: C } = W(), S = C === "dark", [A, b] = R(null), d = x(() => z(p, f), [p, f]), c = x(() => J(d), [d]), h = V[T], B = y((e) => {
+    i && b(e);
+  }, [i]), F = y(() => {
+    b(null);
+  }, []), l = (e) => E ? /* @__PURE__ */ a(
     "span",
     {
-      className: "select-none text-gray-400 dark:text-gray-600 text-right pr-3",
-      style: { minWidth: M },
+      className: o("select-none text-gray-400 dark:text-gray-600 text-right pr-3", h),
+      style: { minWidth: P },
       children: e ?? ""
     }
-  ) : null, s = (e, a) => {
-    const c = O[a], D = a === "add" ? "+" : a === "remove" ? "-" : " ";
-    return /* @__PURE__ */ r(
+  ) : null, m = (e, r, s) => {
+    const g = $[r], U = r === "add" ? "+" : r === "remove" ? "-" : " ", I = s != null && A === s;
+    return /* @__PURE__ */ t(
       "div",
       {
-        className: "flex font-mono text-sm",
+        className: o("flex font-mono text-sm relative group", h),
         style: {
-          backgroundColor: c.bg,
-          borderLeft: `3px solid ${c.border}`
+          backgroundColor: g.bg,
+          borderLeft: `3px solid ${g.border}`
         },
+        onMouseEnter: () => s != null && B(s),
+        onMouseLeave: F,
         children: [
-          /* @__PURE__ */ d(
+          /* @__PURE__ */ a(
             "span",
             {
               className: "px-2 select-none font-bold",
-              style: { color: c.text },
-              children: D
+              style: { color: g.text },
+              children: U
             }
           ),
-          /* @__PURE__ */ d("span", { className: "flex-1 whitespace-pre", children: e })
-        ]
-      }
-    );
-  };
-  if (x === "unified")
-    return /* @__PURE__ */ r(
-      "div",
-      {
-        className: h(
-          "Bear-DiffViewer",
-          "rounded-lg overflow-hidden border",
-          b ? "bg-gray-900 border-gray-700" : "bg-white border-gray-200",
-          p
-        ),
-        "data-testid": g,
-        children: [
-          f && /* @__PURE__ */ r("div", { className: "flex items-center gap-4 px-4 py-2 border-b border-gray-200 dark:border-gray-700", children: [
-            /* @__PURE__ */ r(i, { variant: "caption", className: "text-green-600", children: [
-              "+",
-              t.additions,
-              " additions"
-            ] }),
-            /* @__PURE__ */ r(i, { variant: "caption", className: "text-red-600", children: [
-              "-",
-              t.deletions,
-              " deletions"
-            ] })
-          ] }),
-          /* @__PURE__ */ d("div", { className: "overflow-x-auto", children: o.map((e, a) => /* @__PURE__ */ r("div", { className: "flex", children: [
-            n(e.oldLineNumber || e.newLineNumber),
-            /* @__PURE__ */ d("div", { className: "flex-1", children: s(e.content, e.type) })
-          ] }, a)) })
+          /* @__PURE__ */ a("span", { className: "flex-1 whitespace-pre", children: e }),
+          i && I && r !== "context" && /* @__PURE__ */ a(
+            "span",
+            {
+              className: o(
+                "absolute right-2 top-1/2 -translate-y-1/2 text-xs px-2 py-0.5 rounded",
+                r === "add" ? "bg-green-500/20 text-green-600 dark:text-green-400" : "bg-red-500/20 text-red-600 dark:text-red-400"
+              ),
+              children: q[r]
+            }
+          )
         ]
       }
     );
-  const k = o.filter((e) => e.type !== "add"), L = o.filter((e) => e.type !== "remove");
-  return /* @__PURE__ */ r(
-    "div",
-    {
-      className: h(
-        "Bear-DiffViewer",
-        "rounded-lg overflow-hidden border",
-        b ? "bg-gray-900 border-gray-700" : "bg-white border-gray-200",
-        p
-      ),
-      "data-testid": g,
-      children: [
-        f && /* @__PURE__ */ r("div", { className: "flex items-center gap-4 px-4 py-2 border-b border-gray-200 dark:border-gray-700", children: [
-          /* @__PURE__ */ r(i, { variant: "caption", className: "text-green-600", children: [
-            "+",
-            t.additions,
-            " additions"
-          ] }),
-          /* @__PURE__ */ r(i, { variant: "caption", className: "text-red-600", children: [
-            "-",
-            t.deletions,
-            " deletions"
-          ] })
-        ] }),
-        /* @__PURE__ */ r("div", { className: "grid grid-cols-2 divide-x divide-gray-200 dark:divide-gray-700", children: [
-          /* @__PURE__ */ r("div", { children: [
-            /* @__PURE__ */ d("div", { className: "px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ d(i, { variant: "caption", className: "font-semibold", children: N }) }),
-            /* @__PURE__ */ d("div", { className: "overflow-x-auto", children: k.map((e, a) => /* @__PURE__ */ r("div", { className: "flex", children: [
-              n(e.oldLineNumber),
-              /* @__PURE__ */ d("div", { className: "flex-1", children: s(e.content, e.type === "remove" ? "remove" : "context") })
-            ] }, a)) })
-          ] }),
-          /* @__PURE__ */ r("div", { children: [
-            /* @__PURE__ */ d("div", { className: "px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ d(i, { variant: "caption", className: "font-semibold", children: u }) }),
-            /* @__PURE__ */ d("div", { className: "overflow-x-auto", children: L.map((e, a) => /* @__PURE__ */ r("div", { className: "flex", children: [
-              n(e.newLineNumber),
-              /* @__PURE__ */ d("div", { className: "flex-1", children: s(e.content, e.type === "add" ? "add" : "context") })
-            ] }, a)) })
-          ] })
-        ] })
-      ]
-    }
+  }, u = () => D ? /* @__PURE__ */ t("div", { className: "flex items-center gap-4 px-4 py-2 border-b border-gray-200 dark:border-gray-700", children: [
+    /* @__PURE__ */ t(n, { variant: "caption", className: "text-green-600", children: [
+      "+",
+      c.additions,
+      " additions"
+    ] }),
+    /* @__PURE__ */ t(n, { variant: "caption", className: "text-red-600", children: [
+      "-",
+      c.deletions,
+      " deletions"
+    ] }),
+    /* @__PURE__ */ t(n, { variant: "caption", className: "text-gray-500", children: [
+      c.unchanged,
+      " unchanged"
+    ] })
+  ] }) : null, N = o(
+    "Bear-DiffViewer",
+    "rounded-lg overflow-hidden border",
+    S ? "bg-gray-900 border-gray-700" : "bg-white border-gray-200",
+    w
   );
+  if (L === "unified")
+    return /* @__PURE__ */ t("div", { className: N, "data-testid": v, children: [
+      u(),
+      /* @__PURE__ */ a("div", { className: "overflow-x-auto", children: d.map((e, r) => /* @__PURE__ */ t("div", { className: "flex", children: [
+        l(e.oldLineNumber || e.newLineNumber),
+        /* @__PURE__ */ a("div", { className: "flex-1", children: m(e.content, e.type, r) })
+      ] }, r)) })
+    ] });
+  const M = d.filter((e) => e.type !== "add"), O = d.filter((e) => e.type !== "remove");
+  return /* @__PURE__ */ t("div", { className: N, "data-testid": v, children: [
+    u(),
+    /* @__PURE__ */ t("div", { className: "grid grid-cols-2 divide-x divide-gray-200 dark:divide-gray-700", children: [
+      /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ a("div", { className: "px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ a(n, { variant: "caption", className: "font-semibold", children: k }) }),
+        /* @__PURE__ */ a("div", { className: "overflow-x-auto", children: M.map((e, r) => /* @__PURE__ */ t("div", { className: "flex", children: [
+          l(e.oldLineNumber),
+          /* @__PURE__ */ a("div", { className: "flex-1", children: m(e.content, e.type === "remove" ? "remove" : "context", r) })
+        ] }, r)) })
+      ] }),
+      /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ a("div", { className: "px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ a(n, { variant: "caption", className: "font-semibold", children: _ }) }),
+        /* @__PURE__ */ a("div", { className: "overflow-x-auto", children: O.map((e, r) => /* @__PURE__ */ t("div", { className: "flex", children: [
+          l(e.newLineNumber),
+          /* @__PURE__ */ a("div", { className: "flex-1", children: m(e.content, e.type === "add" ? "add" : "context", r) })
+        ] }, r)) })
+      ] })
+    ] })
+  ] });
 };
 export {
-  H as DiffViewer
+  ae as DiffViewer
 };

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

@@ -3,6 +3,7 @@
  */
 export type DiffViewMode = 'split' | 'unified';
 export type DiffLineType = 'add' | 'remove' | 'context';
+export type DiffSpacing = 'compact' | 'comfortable' | 'spacious';
 export interface DiffViewerProps {
     /** Original text (left side) */
     oldValue: string;
@@ -22,6 +23,10 @@ export interface DiffViewerProps {
     newTitle?: string;
     /** Show diff statistics */
     showStats?: boolean;
+    /** Line spacing density */
+    spacing?: DiffSpacing;
+    /** Show a tooltip on line hover with change type */
+    showLineHoverInfo?: boolean;
     /** Custom class name */
     className?: string;
     /** Test ID */

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

@@ -1,2 +1,2 @@
 export { DiffViewer } from './DiffViewer';
-export type { DiffViewerProps, DiffViewMode, DiffLine, DiffStats } from './DiffViewer.types';
+export type { DiffViewerProps, DiffViewMode, DiffLine, DiffStats, DiffSpacing } from './DiffViewer.types';

package/dist/components/Drawer/Drawer.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("react"),j=require("react-dom"),x=require("../../utils/cn.cjs"),N=require("../Icon/index.cjs"),d=300,q={left:{sm:"bear-w-64",md:"bear-w-80",lg:"bear-w-96",xl:"bear-w-[32rem]"},right:{sm:"bear-w-64",md:"bear-w-80",lg:"bear-w-96",xl:"bear-w-[32rem]"},top:{sm:"bear-h-32",md:"bear-h-48",lg:"bear-h-64",xl:"bear-h-96"},bottom:{sm:"bear-h-32",md:"bear-h-48",lg:"bear-h-64",xl:"bear-h-96"}},C={left:"bear-left-0 bear-top-0 bear-h-full",right:"bear-right-0 bear-top-0 bear-h-full",top:"bear-top-0 bear-left-0 bear-w-full",bottom:"bear-bottom-0 bear-left-0 bear-w-full"},D={left:"bear-translate-x-0",right:"bear-translate-x-0",top:"bear-translate-y-0",bottom:"bear-translate-y-0"},E={left:"-bear-translate-x-full",right:"bear-translate-x-full",top:"-bear-translate-y-full",bottom:"bear-translate-y-full"},S=({isOpen:s,onClose:l,title:o,children:w,side:e="right",size:g="md",showCloseButton:u=!0,closeOnBackdrop:y=!0,closeOnEscape:c=!0,className:p})=>{const[t,m]=a.useState(s),[f,n]=a.useState(!1),[v,h]=a.useState(!1);a.useEffect(()=>{if(s){m(!0),n(!1);const b=requestAnimationFrame(()=>h(!0));return()=>cancelAnimationFrame(b)}if(t){h(!1),n(!0);const b=setTimeout(()=>{m(!1),n(!1)},d);return()=>clearTimeout(b)}},[s,t]);const i=a.useCallback(b=>{c&&b.key==="Escape"&&l()},[c,l]);if(a.useEffect(()=>(t&&(document.addEventListener("keydown",i),document.body.style.overflow="hidden"),()=>{document.removeEventListener("keydown",i),document.body.style.overflow=""}),[t,i]),!t)return null;const k=r.jsxs("div",{className:"bear-fixed bear-inset-0 bear-z-50",children:[r.jsx("div",{className:x.cn("bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity",f?"bear-opacity-0":"bear-opacity-100"),style:{transitionDuration:`${d}ms`},onClick:y?l:void 0,"aria-hidden":"true"}),r.jsxs("div",{role:"dialog","aria-modal":"true","aria-labelledby":o?"drawer-title":void 0,className:x.cn("bear-absolute bear-bg-white dark:bear-bg-neutral-900 bear-shadow-2xl","bear-border-neutral-200 dark:bear-border-neutral-700 bear-overflow-hidden","bear-transform bear-transition-transform",e==="left"&&"bear-border-r",e==="right"&&"bear-border-l",e==="top"&&"bear-border-b",e==="bottom"&&"bear-border-t",C[e],q[e][g],v&&!f?D[e]:E[e],p),style:{transitionDuration:`${d}ms`},children:[(o||u)&&r.jsxs("div",{className:"bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-neutral-200 dark:bear-border-neutral-700",children:[o&&r.jsx("h2",{id:"drawer-title",className:"bear-text-lg bear-font-semibold bear-text-neutral-900 dark:bear-text-white",children:o}),u&&r.jsx("button",{onClick:l,className:"bear-p-1 bear-rounded-lg bear-text-neutral-500 dark:bear-text-neutral-400 hover:bear-text-neutral-900 dark:hover:bear-text-white hover:bear-bg-neutral-100 dark:hover:bear-bg-neutral-700 bear-transition-colors","aria-label":"Close drawer",children:r.jsx(N.XIcon,{className:"bear-w-5 bear-h-5"})})]}),r.jsx("div",{className:"bear-flex-1 bear-overflow-y-auto bear-p-4 bear-text-neutral-700 dark:bear-text-neutral-300",children:w})]})]});return j.createPortal(k,document.body)};exports.Drawer=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("react"),j=require("react-dom"),x=require("../../utils/cn.cjs"),N=require("../Icon/index.cjs"),m=300,q={left:{sm:"bear-w-full sm:bear-w-64 bear-max-w-full sm:bear-max-w-none",md:"bear-w-full sm:bear-w-80 bear-max-w-full sm:bear-max-w-none",lg:"bear-w-full sm:bear-w-96 bear-max-w-full sm:bear-max-w-none",xl:"bear-w-full sm:bear-w-[32rem] bear-max-w-full sm:bear-max-w-none"},right:{sm:"bear-w-full sm:bear-w-64 bear-max-w-full sm:bear-max-w-none",md:"bear-w-full sm:bear-w-80 bear-max-w-full sm:bear-max-w-none",lg:"bear-w-full sm:bear-w-96 bear-max-w-full sm:bear-max-w-none",xl:"bear-w-full sm:bear-w-[32rem] bear-max-w-full sm:bear-max-w-none"},top:{sm:"bear-h-32",md:"bear-h-48",lg:"bear-h-64",xl:"bear-h-96"},bottom:{sm:"bear-h-32",md:"bear-h-48",lg:"bear-h-64",xl:"bear-h-96"}},C={left:"bear-left-0 bear-top-0 bear-h-full",right:"bear-right-0 bear-top-0 bear-h-full",top:"bear-top-0 bear-left-0 bear-w-full",bottom:"bear-bottom-0 bear-left-0 bear-w-full"},D={left:"bear-translate-x-0",right:"bear-translate-x-0",top:"bear-translate-y-0",bottom:"bear-translate-y-0"},E={left:"-bear-translate-x-full",right:"bear-translate-x-full",top:"-bear-translate-y-full",bottom:"bear-translate-y-full"},S=({isOpen:n,onClose:l,title:s,children:h,side:e="right",size:g="md",showCloseButton:i=!0,closeOnBackdrop:y=!0,closeOnEscape:d=!0,className:p})=>{const[t,f]=a.useState(n),[c,o]=a.useState(!1),[v,w]=a.useState(!1);a.useEffect(()=>{if(n){f(!0),o(!1);const b=requestAnimationFrame(()=>w(!0));return()=>cancelAnimationFrame(b)}if(t){w(!1),o(!0);const b=setTimeout(()=>{f(!1),o(!1)},m);return()=>clearTimeout(b)}},[n,t]);const u=a.useCallback(b=>{d&&b.key==="Escape"&&l()},[d,l]);if(a.useEffect(()=>(t&&(document.addEventListener("keydown",u),document.body.style.overflow="hidden"),()=>{document.removeEventListener("keydown",u),document.body.style.overflow=""}),[t,u]),!t)return null;const k=r.jsxs("div",{className:"bear-fixed bear-inset-0 bear-z-[11000]",children:[r.jsx("div",{className:x.cn("bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity",c?"bear-opacity-0":"bear-opacity-100"),style:{transitionDuration:`${m}ms`},onClick:y?l:void 0,"aria-hidden":"true"}),r.jsxs("div",{role:"dialog","aria-modal":"true","aria-labelledby":s?"drawer-title":void 0,className:x.cn("bear-absolute bear-bg-white dark:bear-bg-neutral-900 bear-shadow-2xl","bear-border-neutral-200 dark:bear-border-neutral-700 bear-overflow-hidden","bear-transform bear-transition-transform",e==="left"&&"bear-border-r",e==="right"&&"bear-border-l",e==="top"&&"bear-border-b",e==="bottom"&&"bear-border-t",C[e],q[e][g],v&&!c?D[e]:E[e],p),style:{transitionDuration:`${m}ms`},children:[(s||i)&&r.jsxs("div",{className:"bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-neutral-200 dark:bear-border-neutral-700",children:[s&&r.jsx("h2",{id:"drawer-title",className:"bear-text-lg bear-font-semibold bear-text-neutral-900 dark:bear-text-white",children:s}),i&&r.jsx("button",{onClick:l,className:"bear-p-1 bear-rounded-lg bear-text-neutral-500 dark:bear-text-neutral-400 hover:bear-text-neutral-900 dark:hover:bear-text-white hover:bear-bg-neutral-100 dark:hover:bear-bg-neutral-700 bear-transition-colors","aria-label":"Close drawer",children:r.jsx(N.XIcon,{className:"bear-w-5 bear-h-5"})})]}),r.jsx("div",{className:"bear-flex-1 bear-overflow-y-auto bear-p-4 bear-text-neutral-700 dark:bear-text-neutral-300",children:h})]})]});return j.createPortal(k,document.body)};exports.Drawer=S;

package/dist/components/Drawer/Drawer.js

@@ -1,20 +1,20 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { useState as d, useEffect as p, useCallback as A } from "react";
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { useState as u, useEffect as h, useCallback as A } from "react";
 import { createPortal as E } from "react-dom";
-import { cn as x } from "../../utils/cn.js";
+import { cn as p } from "../../utils/cn.js";
 import { XIcon as I } from "../Icon/index.js";
-const m = 300, D = {
+const i = 300, D = {
   left: {
-    sm: "bear-w-64",
-    md: "bear-w-80",
-    lg: "bear-w-96",
-    xl: "bear-w-[32rem]"
+    sm: "bear-w-full sm:bear-w-64 bear-max-w-full sm:bear-max-w-none",
+    md: "bear-w-full sm:bear-w-80 bear-max-w-full sm:bear-max-w-none",
+    lg: "bear-w-full sm:bear-w-96 bear-max-w-full sm:bear-max-w-none",
+    xl: "bear-w-full sm:bear-w-[32rem] bear-max-w-full sm:bear-max-w-none"
   },
   right: {
-    sm: "bear-w-64",
-    md: "bear-w-80",
-    lg: "bear-w-96",
-    xl: "bear-w-[32rem]"
+    sm: "bear-w-full sm:bear-w-64 bear-max-w-full sm:bear-max-w-none",
+    md: "bear-w-full sm:bear-w-80 bear-max-w-full sm:bear-max-w-none",
+    lg: "bear-w-full sm:bear-w-96 bear-max-w-full sm:bear-max-w-none",
+    xl: "bear-w-full sm:bear-w-[32rem] bear-max-w-full sm:bear-max-w-none"
   },
   top: {
     sm: "bear-h-32",
@@ -44,61 +44,61 @@ const m = 300, D = {
   top: "-bear-translate-y-full",
   bottom: "bear-translate-y-full"
 }, _ = ({
-  isOpen: l,
+  isOpen: o,
   onClose: b,
-  title: o,
+  title: l,
   children: g,
   side: e = "right",
   size: y = "md",
-  showCloseButton: u = !0,
+  showCloseButton: d = !0,
   closeOnBackdrop: v = !0,
-  closeOnEscape: c = !0,
+  closeOnEscape: f = !0,
   className: k
 }) => {
-  const [r, f] = d(l), [h, n] = d(!1), [N, w] = d(!1);
-  p(() => {
-    if (l) {
-      f(!0), n(!1);
-      const a = requestAnimationFrame(() => w(!0));
+  const [r, w] = u(o), [c, n] = u(!1), [N, x] = u(!1);
+  h(() => {
+    if (o) {
+      w(!0), n(!1);
+      const a = requestAnimationFrame(() => x(!0));
       return () => cancelAnimationFrame(a);
     }
     if (r) {
-      w(!1), n(!0);
+      x(!1), n(!0);
       const a = setTimeout(() => {
-        f(!1), n(!1);
-      }, m);
+        w(!1), n(!1);
+      }, i);
       return () => clearTimeout(a);
     }
-  }, [l, r]);
+  }, [o, r]);
   const s = A(
     (a) => {
-      c && a.key === "Escape" && b();
+      f && a.key === "Escape" && b();
     },
-    [c, b]
+    [f, b]
   );
-  if (p(() => (r && (document.addEventListener("keydown", s), document.body.style.overflow = "hidden"), () => {
+  if (h(() => (r && (document.addEventListener("keydown", s), document.body.style.overflow = "hidden"), () => {
     document.removeEventListener("keydown", s), document.body.style.overflow = "";
   }), [r, s]), !r) return null;
-  const C = /* @__PURE__ */ i("div", { className: "bear-fixed bear-inset-0 bear-z-50", children: [
+  const C = /* @__PURE__ */ m("div", { className: "bear-fixed bear-inset-0 bear-z-[11000]", children: [
     /* @__PURE__ */ t(
       "div",
       {
-        className: x(
+        className: p(
           "bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity",
-          h ? "bear-opacity-0" : "bear-opacity-100"
+          c ? "bear-opacity-0" : "bear-opacity-100"
         ),
-        style: { transitionDuration: `${m}ms` },
+        style: { transitionDuration: `${i}ms` },
         onClick: v ? b : void 0,
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ i(
+    /* @__PURE__ */ m(
       "div",
       {
         role: "dialog",
         "aria-modal": "true",
-        "aria-labelledby": o ? "drawer-title" : void 0,
-        className: x(
+        "aria-labelledby": l ? "drawer-title" : void 0,
+        className: p(
           "bear-absolute bear-bg-white dark:bear-bg-neutral-900 bear-shadow-2xl",
           "bear-border-neutral-200 dark:bear-border-neutral-700 bear-overflow-hidden",
           "bear-transform bear-transition-transform",
@@ -108,21 +108,21 @@ const m = 300, D = {
           e === "bottom" && "bear-border-t",
           M[e],
           D[e][y],
-          N && !h ? j[e] : T[e],
+          N && !c ? j[e] : T[e],
           k
         ),
-        style: { transitionDuration: `${m}ms` },
+        style: { transitionDuration: `${i}ms` },
         children: [
-          (o || u) && /* @__PURE__ */ i("div", { className: "bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-neutral-200 dark:bear-border-neutral-700", children: [
-            o && /* @__PURE__ */ t(
+          (l || d) && /* @__PURE__ */ m("div", { className: "bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-neutral-200 dark:bear-border-neutral-700", children: [
+            l && /* @__PURE__ */ t(
               "h2",
               {
                 id: "drawer-title",
                 className: "bear-text-lg bear-font-semibold bear-text-neutral-900 dark:bear-text-white",
-                children: o
+                children: l
               }
             ),
-            u && /* @__PURE__ */ t(
+            d && /* @__PURE__ */ t(
               "button",
               {
                 onClick: b,

package/dist/components/Dropdown/Dropdown.cjs

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={xs:"bear-text-xs bear-py-1 bear-px-2",sm:"bear-text-sm bear-py-1.5 bear-px-3",md:"bear-text-sm bear-py-2 bear-px-3",lg:"bear-text-base bear-py-2.5 bear-px-4",xl:"bear-text-lg bear-py-3 bear-px-5"};exports.SIZE_CLASSES=e;

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

@@ -0,0 +1,7 @@
+export declare const SIZE_CLASSES: {
+    readonly xs: "bear-text-xs bear-py-1 bear-px-2";
+    readonly sm: "bear-text-sm bear-py-1.5 bear-px-3";
+    readonly md: "bear-text-sm bear-py-2 bear-px-3";
+    readonly lg: "bear-text-base bear-py-2.5 bear-px-4";
+    readonly xl: "bear-text-lg bear-py-3 bear-px-5";
+};

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

@@ -0,0 +1,10 @@
+const e = {
+  xs: "bear-text-xs bear-py-1 bear-px-2",
+  sm: "bear-text-sm bear-py-1.5 bear-px-3",
+  md: "bear-text-sm bear-py-2 bear-px-3",
+  lg: "bear-text-base bear-py-2.5 bear-px-4",
+  xl: "bear-text-lg bear-py-3 bear-px-5"
+};
+export {
+  e as SIZE_CLASSES
+};

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

@@ -16,4 +16,3 @@ import { DropdownProps } from './Dropdown.types';
  * ```
  */
 export declare const Dropdown: FC<DropdownProps>;
-export default Dropdown;