@forgedevstack/bear 1.1.4 → 1.1.9

package/dist/components/Spotlight/Spotlight.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),b=require("react"),m=require("../../utils/cn.cjs"),x=require("./Spotlight.const.cjs"),R=(s,l)=>{var i,p;const n=l.toLowerCase();return!!(s.label.toLowerCase().includes(n)||(i=s.description)!=null&&i.toLowerCase().includes(n)||(p=s.keywords)!=null&&p.some(y=>y.toLowerCase().includes(n)))},E=(s,l)=>{if(!l)return s;const n=s.toLowerCase().indexOf(l.toLowerCase());return n===-1?s:r.jsxs(r.Fragment,{children:[s.slice(0,n),r.jsx("mark",{className:"Bear-Spotlight__highlight bear-bg-yellow-200 dark:bear-bg-yellow-800 bear-text-inherit bear-rounded-sm bear-px-0.5",children:s.slice(n,n+l.length)}),s.slice(n+l.length)]})},U=s=>{const{actions:l,open:n,onOpenChange:i,placeholder:p=x.DEFAULT_PLACEHOLDER,shortcutKey:y=x.DEFAULT_SHORTCUT_KEY,shortcutMod:v=!0,nothingFoundMessage:L=x.DEFAULT_NOTHING_FOUND,highlightMatches:S=!0,limit:f=x.DEFAULT_LIMIT,filter:k,className:B,style:D,testId:T}=s,[I,A]=b.useState(!1),[o,j]=b.useState(""),[h,u]=b.useState(0),N=b.useRef(null),C=b.useRef(null),g=n??I,d=b.useCallback(e=>{A(e),i==null||i(e),e||(j(""),u(0))},[i]);b.useEffect(()=>{const e=a=>{(v?a.metaKey||a.ctrlKey:!0)&&a.key.toLowerCase()===y.toLowerCase()&&(a.preventDefault(),d(!g)),a.key==="Escape"&&g&&d(!1)};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[y,v,g,d]),b.useEffect(()=>{g&&setTimeout(()=>{var e;return(e=N.current)==null?void 0:e.focus()},x.FOCUS_DELAY)},[g]);const c=b.useMemo(()=>k?k(o,l).slice(0,f):o?l.filter(e=>R(e,o)).slice(0,f):l.slice(0,f),[l,o,k,f]),O=b.useMemo(()=>{const e=new Map;return c.forEach(a=>{const t=a.group||"";e.has(t)||e.set(t,[]),e.get(t).push(a)}),e},[c]),M=b.useCallback(e=>{if(e.key==="ArrowDown")e.preventDefault(),u(a=>Math.min(a+1,c.length-1));else if(e.key==="ArrowUp")e.preventDefault(),u(a=>Math.max(a-1,0));else if(e.key==="Enter"&&c[h]){e.preventDefault();const a=c[h];a.disabled||(a.onTrigger(),d(!1))}},[c,h,d]);if(b.useEffect(()=>{const e=C.current;if(!e)return;const a=e.querySelector('[data-active="true"]');a==null||a.scrollIntoView({block:"nearest"})},[h]),!g)return null;let _=-1;return r.jsxs("div",{className:m.cn("Bear-Spotlight","bear-fixed bear-inset-0 bear-flex bear-items-start bear-justify-center bear-pt-[15vh]"),style:{zIndex:x.SPOTLIGHT_Z_INDEX},"data-testid":T,children:[r.jsx("div",{className:"Bear-Spotlight__backdrop bear-absolute bear-inset-0 bear-bg-black/50 dark:bear-bg-black/70 bear-backdrop-blur-sm",onClick:()=>d(!1),"aria-hidden":"true"}),r.jsxs("div",{className:m.cn("Bear-Spotlight__dialog","bear-relative bear-w-full bear-max-w-[560px] bear-mx-4","bear-bg-white dark:bear-bg-gray-900","bear-rounded-xl bear-shadow-2xl","bear-border bear-border-gray-200 dark:bear-border-gray-700","bear-overflow-hidden",B),style:D,role:"dialog","aria-label":"Search",children:[r.jsxs("div",{className:"Bear-Spotlight__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-gray-700",children:[r.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,className:"bear-text-gray-400 dark:bear-text-gray-500 bear-shrink-0",children:[r.jsx("circle",{cx:"11",cy:"11",r:"8"}),r.jsx("line",{x1:"21",y1:"21",x2:"16.65",y2:"16.65"})]}),r.jsx("input",{ref:N,type:"text",value:o,onChange:e=>{j(e.target.value),u(0)},onKeyDown:M,placeholder:p,className:m.cn("Bear-Spotlight__input","bear-flex-1 bear-bg-transparent bear-outline-none bear-text-base","bear-text-gray-900 dark:bear-text-white","placeholder:bear-text-gray-400 dark:placeholder:bear-text-gray-500"),autoComplete:"off",spellCheck:!1}),r.jsx("kbd",{className:"bear-hidden sm:bear-inline-flex bear-items-center bear-px-1.5 bear-py-0.5 bear-rounded bear-text-[10px] bear-font-mono bear-text-gray-400 dark:bear-text-gray-500 bear-bg-gray-100 dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700",children:"ESC"})]}),r.jsxs("div",{ref:C,className:"Bear-Spotlight__results bear-max-h-[400px] bear-overflow-y-auto bear-py-2",role:"listbox",children:[c.length===0&&r.jsx("div",{className:"Bear-Spotlight__empty bear-px-4 bear-py-8 bear-text-center bear-text-gray-500 dark:bear-text-gray-400 bear-text-sm",children:L}),Array.from(O.entries()).map(([e,a])=>r.jsxs("div",{className:"Bear-Spotlight__group",children:[e&&r.jsx("div",{className:"Bear-Spotlight__group-title bear-px-4 bear-py-1.5 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider bear-text-gray-400 dark:bear-text-gray-500",children:e}),a.map(t=>{_++;const w=_===h,F=_;return r.jsxs("button",{className:m.cn("Bear-Spotlight__action","bear-w-full bear-flex bear-items-center bear-gap-3 bear-px-4 bear-py-2.5 bear-text-left bear-cursor-pointer","bear-transition-colors bear-duration-100",w?"bear-bg-gray-100 dark:bear-bg-gray-800":"hover:bear-bg-gray-50 dark:hover:bear-bg-gray-800/50",t.disabled&&"bear-opacity-50 bear-cursor-not-allowed"),"data-active":w,onMouseEnter:()=>u(F),onClick:()=>{t.disabled||(t.onTrigger(),d(!1))},role:"option","aria-selected":w,"aria-disabled":t.disabled,children:[t.icon&&r.jsx("span",{className:"Bear-Spotlight__action-icon bear-text-gray-500 dark:bear-text-gray-400 bear-shrink-0",children:t.icon}),r.jsxs("div",{className:"Bear-Spotlight__action-body bear-flex-1 bear-min-w-0",children:[r.jsx("div",{className:"Bear-Spotlight__action-label bear-text-sm bear-font-medium bear-text-gray-900 dark:bear-text-white bear-truncate",children:S?E(t.label,o):t.label}),t.description&&r.jsx("div",{className:"Bear-Spotlight__action-desc bear-text-xs bear-text-gray-500 dark:bear-text-gray-400 bear-truncate",children:S?E(t.description,o):t.description})]}),t.rightSection&&r.jsx("span",{className:"Bear-Spotlight__action-right bear-shrink-0",children:t.rightSection})]},t.id)})]},e))]}),r.jsxs("div",{className:"Bear-Spotlight__footer bear-border-t bear-border-gray-200 dark:bear-border-gray-700 bear-px-4 bear-py-2 bear-flex bear-items-center bear-gap-4 bear-text-[11px] bear-text-gray-400 dark:bear-text-gray-500",children:[r.jsxs("span",{className:"bear-flex bear-items-center bear-gap-1",children:[r.jsx("kbd",{className:"bear-px-1 bear-rounded bear-bg-gray-100 dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700",children:"↑↓"}),"navigate"]}),r.jsxs("span",{className:"bear-flex bear-items-center bear-gap-1",children:[r.jsx("kbd",{className:"bear-px-1 bear-rounded bear-bg-gray-100 dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700",children:"↵"}),"select"]}),r.jsxs("span",{className:"bear-flex bear-items-center bear-gap-1",children:[r.jsx("kbd",{className:"bear-px-1 bear-rounded bear-bg-gray-100 dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700",children:"esc"}),"close"]})]})]})]})};exports.Spotlight=U;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),h=require("../../utils/cn.cjs"),o=require("./Spotlight.const.cjs"),m=require("./Spotlight.utils.cjs"),U=N=>{const{actions:g,open:E,onOpenChange:x,placeholder:B=o.DEFAULT_PLACEHOLDER,shortcutKey:k=o.DEFAULT_SHORTCUT_KEY,shortcutMod:_=!0,nothingFoundMessage:T=o.DEFAULT_NOTHING_FOUND,highlightMatches:v=!0,limit:p=o.DEFAULT_LIMIT,filter:u,className:D,style:C,testId:I}=N,[L,A]=s.useState(!1),[b,S]=s.useState(""),[d,c]=s.useState(0),j=s.useRef(null),w=s.useRef(null),n=E??L,l=s.useCallback(e=>{A(e),x==null||x(e),e||(S(""),c(0))},[x]);s.useEffect(()=>{const e=a=>{(_?a.metaKey||a.ctrlKey:!0)&&a.key.toLowerCase()===k.toLowerCase()&&(a.preventDefault(),l(!n)),a.key==="Escape"&&n&&l(!1)};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[k,_,n,l]),s.useEffect(()=>{n&&setTimeout(()=>{var e;return(e=j.current)==null?void 0:e.focus()},o.FOCUS_DELAY)},[n]);const i=s.useMemo(()=>u?u(b,g).slice(0,p):b?g.filter(e=>m.matchAction(e,b)).slice(0,p):g.slice(0,p),[g,b,u,p]),M=s.useMemo(()=>{const e=new Map;return i.forEach(a=>{const t=a.group||"";e.has(t)||e.set(t,[]),e.get(t).push(a)}),e},[i]),O=s.useCallback(e=>{if(e.key==="ArrowDown")e.preventDefault(),c(a=>Math.min(a+1,i.length-1));else if(e.key==="ArrowUp")e.preventDefault(),c(a=>Math.max(a-1,0));else if(e.key==="Enter"&&i[d]){e.preventDefault();const a=i[d];a.disabled||(a.onTrigger(),l(!1))}},[i,d,l]);if(s.useEffect(()=>{const e=w.current;if(!e)return;const a=e.querySelector('[data-active="true"]');a==null||a.scrollIntoView({block:"nearest"})},[d]),!n)return null;let y=-1;return r.jsxs("div",{className:h.cn("Bear-Spotlight","bear-fixed bear-inset-0 bear-flex bear-items-start bear-justify-center bear-pt-[15vh]"),style:{zIndex:o.SPOTLIGHT_Z_INDEX},"data-testid":I,children:[r.jsx("div",{className:"Bear-Spotlight__backdrop bear-absolute bear-inset-0 bear-bg-black/50 dark:bear-bg-black/70 bear-backdrop-blur-sm",onClick:()=>l(!1),"aria-hidden":"true"}),r.jsxs("div",{className:h.cn("Bear-Spotlight__dialog","bear-relative bear-w-full bear-max-w-[560px] bear-mx-4","bear-bg-white dark:bear-bg-gray-900","bear-rounded-xl bear-shadow-2xl","bear-border bear-border-gray-200 dark:bear-border-gray-700","bear-overflow-hidden",D),style:C,role:"dialog","aria-label":"Search",children:[r.jsxs("div",{className:"Bear-Spotlight__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-gray-700",children:[r.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,className:"bear-text-gray-400 dark:bear-text-gray-500 bear-shrink-0",children:[r.jsx("circle",{cx:"11",cy:"11",r:"8"}),r.jsx("line",{x1:"21",y1:"21",x2:"16.65",y2:"16.65"})]}),r.jsx("input",{ref:j,type:"text",value:b,onChange:e=>{S(e.target.value),c(0)},onKeyDown:O,placeholder:B,className:h.cn("Bear-Spotlight__input","bear-flex-1 bear-bg-transparent bear-outline-none bear-text-base","bear-text-gray-900 dark:bear-text-white","placeholder:bear-text-gray-400 dark:placeholder:bear-text-gray-500"),autoComplete:"off",spellCheck:!1}),r.jsx("kbd",{className:"bear-hidden sm:bear-inline-flex bear-items-center bear-px-1.5 bear-py-0.5 bear-rounded bear-text-[10px] bear-font-mono bear-text-gray-400 dark:bear-text-gray-500 bear-bg-gray-100 dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700",children:"ESC"})]}),r.jsxs("div",{ref:w,className:"Bear-Spotlight__results bear-max-h-[400px] bear-overflow-y-auto bear-py-2",role:"listbox",children:[i.length===0&&r.jsx("div",{className:"Bear-Spotlight__empty bear-px-4 bear-py-8 bear-text-center bear-text-gray-500 dark:bear-text-gray-400 bear-text-sm",children:T}),Array.from(M.entries()).map(([e,a])=>r.jsxs("div",{className:"Bear-Spotlight__group",children:[e&&r.jsx("div",{className:"Bear-Spotlight__group-title bear-px-4 bear-py-1.5 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider bear-text-gray-400 dark:bear-text-gray-500",children:e}),a.map(t=>{y++;const f=y===d,R=y;return r.jsxs("button",{className:h.cn("Bear-Spotlight__action","bear-w-full bear-flex bear-items-center bear-gap-3 bear-px-4 bear-py-2.5 bear-text-left bear-cursor-pointer","bear-transition-colors bear-duration-100",f?"bear-bg-gray-100 dark:bear-bg-gray-800":"hover:bear-bg-gray-50 dark:hover:bear-bg-gray-800/50",t.disabled&&"bear-opacity-50 bear-cursor-not-allowed"),"data-active":f,onMouseEnter:()=>c(R),onClick:()=>{t.disabled||(t.onTrigger(),l(!1))},role:"option","aria-selected":f,"aria-disabled":t.disabled,children:[t.icon&&r.jsx("span",{className:"Bear-Spotlight__action-icon bear-text-gray-500 dark:bear-text-gray-400 bear-shrink-0",children:t.icon}),r.jsxs("div",{className:"Bear-Spotlight__action-body bear-flex-1 bear-min-w-0",children:[r.jsx("div",{className:"Bear-Spotlight__action-label bear-text-sm bear-font-medium bear-text-gray-900 dark:bear-text-white bear-truncate",children:v?m.highlightText(t.label,b):t.label}),t.description&&r.jsx("div",{className:"Bear-Spotlight__action-desc bear-text-xs bear-text-gray-500 dark:bear-text-gray-400 bear-truncate",children:v?m.highlightText(t.description,b):t.description})]}),t.rightSection&&r.jsx("span",{className:"Bear-Spotlight__action-right bear-shrink-0",children:t.rightSection})]},t.id)})]},e))]}),r.jsxs("div",{className:"Bear-Spotlight__footer bear-border-t bear-border-gray-200 dark:bear-border-gray-700 bear-px-4 bear-py-2 bear-flex bear-items-center bear-gap-4 bear-text-[11px] bear-text-gray-400 dark:bear-text-gray-500",children:[r.jsxs("span",{className:"bear-flex bear-items-center bear-gap-1",children:[r.jsx("kbd",{className:"bear-px-1 bear-rounded bear-bg-gray-100 dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700",children:"↑↓"}),"navigate"]}),r.jsxs("span",{className:"bear-flex bear-items-center bear-gap-1",children:[r.jsx("kbd",{className:"bear-px-1 bear-rounded bear-bg-gray-100 dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700",children:"↵"}),"select"]}),r.jsxs("span",{className:"bear-flex bear-items-center bear-gap-1",children:[r.jsx("kbd",{className:"bear-px-1 bear-rounded bear-bg-gray-100 dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700",children:"esc"}),"close"]})]})]})]})};exports.Spotlight=U;

package/dist/components/Spotlight/Spotlight.js

@@ -1,100 +1,89 @@
-import { jsxs as b, jsx as t, Fragment as G } from "react/jsx-runtime";
-import { useState as w, useRef as E, useCallback as D, useEffect as v, useMemo as T } from "react";
-import { cn as m } from "../../utils/cn.js";
-import { DEFAULT_PLACEHOLDER as P, DEFAULT_SHORTCUT_KEY as Y, DEFAULT_NOTHING_FOUND as z, DEFAULT_LIMIT as Q, FOCUS_DELAY as V, SPOTLIGHT_Z_INDEX as W } from "./Spotlight.const.js";
-const X = (l, s) => {
-  var o, u;
-  const i = s.toLowerCase();
-  return !!(l.label.toLowerCase().includes(i) || (o = l.description) != null && o.toLowerCase().includes(i) || (u = l.keywords) != null && u.some((y) => y.toLowerCase().includes(i)));
-}, I = (l, s) => {
-  if (!s) return l;
-  const i = l.toLowerCase().indexOf(s.toLowerCase());
-  return i === -1 ? l : /* @__PURE__ */ b(G, { children: [
-    l.slice(0, i),
-    /* @__PURE__ */ t("mark", { className: "Bear-Spotlight__highlight bear-bg-yellow-200 dark:bear-bg-yellow-800 bear-text-inherit bear-rounded-sm bear-px-0.5", children: l.slice(i, i + s.length) }),
-    l.slice(i + s.length)
-  ] });
-}, ee = (l) => {
+import { jsxs as b, jsx as t } from "react/jsx-runtime";
+import { useState as u, useRef as B, useCallback as E, useEffect as f, useMemo as D } from "react";
+import { cn as h } from "../../utils/cn.js";
+import { DEFAULT_PLACEHOLDER as q, DEFAULT_SHORTCUT_KEY as G, DEFAULT_NOTHING_FOUND as P, DEFAULT_LIMIT as Y, FOCUS_DELAY as z, SPOTLIGHT_Z_INDEX as Q } from "./Spotlight.const.js";
+import { matchAction as V, highlightText as T } from "./Spotlight.utils.js";
+const ee = (I) => {
   const {
-    actions: s,
-    open: i,
-    onOpenChange: o,
-    placeholder: u = P,
-    shortcutKey: y = Y,
-    shortcutMod: N = !0,
-    nothingFoundMessage: A = z,
-    highlightMatches: S = !0,
-    limit: x = Q,
-    filter: f,
+    actions: c,
+    open: L,
+    onOpenChange: g,
+    placeholder: A = q,
+    shortcutKey: k = G,
+    shortcutMod: _ = !0,
+    nothingFoundMessage: C = P,
+    highlightMatches: v = !0,
+    limit: p = Y,
+    filter: y,
     className: O,
     style: M,
-    testId: F
-  } = l, [U, K] = w(!1), [n, L] = w(""), [p, h] = w(0), B = E(null), C = E(null), g = i ?? U, d = D(
+    testId: U
+  } = I, [F, K] = u(!1), [l, w] = u(""), [n, d] = u(0), N = B(null), S = B(null), o = L ?? F, s = E(
     (e) => {
-      K(e), o == null || o(e), e || (L(""), h(0));
+      K(e), g == null || g(e), e || (w(""), d(0));
     },
-    [o]
+    [g]
   );
-  v(() => {
+  f(() => {
     const e = (r) => {
-      (N ? r.metaKey || r.ctrlKey : !0) && r.key.toLowerCase() === y.toLowerCase() && (r.preventDefault(), d(!g)), r.key === "Escape" && g && d(!1);
+      (_ ? r.metaKey || r.ctrlKey : !0) && r.key.toLowerCase() === k.toLowerCase() && (r.preventDefault(), s(!o)), r.key === "Escape" && o && s(!1);
     };
     return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-  }, [y, N, g, d]), v(() => {
-    g && setTimeout(() => {
+  }, [k, _, o, s]), f(() => {
+    o && setTimeout(() => {
       var e;
-      return (e = B.current) == null ? void 0 : e.focus();
-    }, V);
-  }, [g]);
-  const c = T(() => f ? f(n, s).slice(0, x) : n ? s.filter((e) => X(e, n)).slice(0, x) : s.slice(0, x), [s, n, f, x]), R = T(() => {
+      return (e = N.current) == null ? void 0 : e.focus();
+    }, z);
+  }, [o]);
+  const i = D(() => y ? y(l, c).slice(0, p) : l ? c.filter((e) => V(e, l)).slice(0, p) : c.slice(0, p), [c, l, y, p]), R = D(() => {
     const e = /* @__PURE__ */ new Map();
-    return c.forEach((r) => {
+    return i.forEach((r) => {
       const a = r.group || "";
       e.has(a) || e.set(a, []), e.get(a).push(r);
     }), e;
-  }, [c]), H = D(
+  }, [i]), H = E(
     (e) => {
       if (e.key === "ArrowDown")
-        e.preventDefault(), h((r) => Math.min(r + 1, c.length - 1));
+        e.preventDefault(), d((r) => Math.min(r + 1, i.length - 1));
       else if (e.key === "ArrowUp")
-        e.preventDefault(), h((r) => Math.max(r - 1, 0));
-      else if (e.key === "Enter" && c[p]) {
+        e.preventDefault(), d((r) => Math.max(r - 1, 0));
+      else if (e.key === "Enter" && i[n]) {
         e.preventDefault();
-        const r = c[p];
-        r.disabled || (r.onTrigger(), d(!1));
+        const r = i[n];
+        r.disabled || (r.onTrigger(), s(!1));
       }
     },
-    [c, p, d]
+    [i, n, s]
   );
-  if (v(() => {
-    const e = C.current;
+  if (f(() => {
+    const e = S.current;
     if (!e) return;
     const r = e.querySelector('[data-active="true"]');
     r == null || r.scrollIntoView({ block: "nearest" });
-  }, [p]), !g) return null;
-  let k = -1;
+  }, [n]), !o) return null;
+  let x = -1;
   return /* @__PURE__ */ b(
     "div",
     {
-      className: m(
+      className: h(
         "Bear-Spotlight",
         "bear-fixed bear-inset-0 bear-flex bear-items-start bear-justify-center bear-pt-[15vh]"
       ),
-      style: { zIndex: W },
-      "data-testid": F,
+      style: { zIndex: Q },
+      "data-testid": U,
       children: [
         /* @__PURE__ */ t(
           "div",
           {
             className: "Bear-Spotlight__backdrop bear-absolute bear-inset-0 bear-bg-black/50 dark:bear-bg-black/70 bear-backdrop-blur-sm",
-            onClick: () => d(!1),
+            onClick: () => s(!1),
             "aria-hidden": "true"
           }
         ),
         /* @__PURE__ */ b(
           "div",
           {
-            className: m(
+            className: h(
               "Bear-Spotlight__dialog",
               "bear-relative bear-w-full bear-max-w-[560px] bear-mx-4",
               "bear-bg-white dark:bear-bg-gray-900",
@@ -127,15 +116,15 @@ const X = (l, s) => {
                 /* @__PURE__ */ t(
                   "input",
                   {
-                    ref: B,
+                    ref: N,
                     type: "text",
-                    value: n,
+                    value: l,
                     onChange: (e) => {
-                      L(e.target.value), h(0);
+                      w(e.target.value), d(0);
                     },
                     onKeyDown: H,
-                    placeholder: u,
-                    className: m(
+                    placeholder: A,
+                    className: h(
                       "Bear-Spotlight__input",
                       "bear-flex-1 bear-bg-transparent bear-outline-none bear-text-base",
                       "bear-text-gray-900 dark:bear-text-white",
@@ -150,39 +139,39 @@ const X = (l, s) => {
               /* @__PURE__ */ b(
                 "div",
                 {
-                  ref: C,
+                  ref: S,
                   className: "Bear-Spotlight__results bear-max-h-[400px] bear-overflow-y-auto bear-py-2",
                   role: "listbox",
                   children: [
-                    c.length === 0 && /* @__PURE__ */ t("div", { className: "Bear-Spotlight__empty bear-px-4 bear-py-8 bear-text-center bear-text-gray-500 dark:bear-text-gray-400 bear-text-sm", children: A }),
+                    i.length === 0 && /* @__PURE__ */ t("div", { className: "Bear-Spotlight__empty bear-px-4 bear-py-8 bear-text-center bear-text-gray-500 dark:bear-text-gray-400 bear-text-sm", children: C }),
                     Array.from(R.entries()).map(([e, r]) => /* @__PURE__ */ b("div", { className: "Bear-Spotlight__group", children: [
                       e && /* @__PURE__ */ t("div", { className: "Bear-Spotlight__group-title bear-px-4 bear-py-1.5 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider bear-text-gray-400 dark:bear-text-gray-500", children: e }),
                       r.map((a) => {
-                        k++;
-                        const _ = k === p, j = k;
+                        x++;
+                        const m = x === n, j = x;
                         return /* @__PURE__ */ b(
                           "button",
                           {
-                            className: m(
+                            className: h(
                               "Bear-Spotlight__action",
                               "bear-w-full bear-flex bear-items-center bear-gap-3 bear-px-4 bear-py-2.5 bear-text-left bear-cursor-pointer",
                               "bear-transition-colors bear-duration-100",
-                              _ ? "bear-bg-gray-100 dark:bear-bg-gray-800" : "hover:bear-bg-gray-50 dark:hover:bear-bg-gray-800/50",
+                              m ? "bear-bg-gray-100 dark:bear-bg-gray-800" : "hover:bear-bg-gray-50 dark:hover:bear-bg-gray-800/50",
                               a.disabled && "bear-opacity-50 bear-cursor-not-allowed"
                             ),
-                            "data-active": _,
-                            onMouseEnter: () => h(j),
+                            "data-active": m,
+                            onMouseEnter: () => d(j),
                             onClick: () => {
-                              a.disabled || (a.onTrigger(), d(!1));
+                              a.disabled || (a.onTrigger(), s(!1));
                             },
                             role: "option",
-                            "aria-selected": _,
+                            "aria-selected": m,
                             "aria-disabled": a.disabled,
                             children: [
                               a.icon && /* @__PURE__ */ t("span", { className: "Bear-Spotlight__action-icon bear-text-gray-500 dark:bear-text-gray-400 bear-shrink-0", children: a.icon }),
                               /* @__PURE__ */ b("div", { className: "Bear-Spotlight__action-body bear-flex-1 bear-min-w-0", children: [
-                                /* @__PURE__ */ t("div", { className: "Bear-Spotlight__action-label bear-text-sm bear-font-medium bear-text-gray-900 dark:bear-text-white bear-truncate", children: S ? I(a.label, n) : a.label }),
-                                a.description && /* @__PURE__ */ t("div", { className: "Bear-Spotlight__action-desc bear-text-xs bear-text-gray-500 dark:bear-text-gray-400 bear-truncate", children: S ? I(a.description, n) : a.description })
+                                /* @__PURE__ */ t("div", { className: "Bear-Spotlight__action-label bear-text-sm bear-font-medium bear-text-gray-900 dark:bear-text-white bear-truncate", children: v ? T(a.label, l) : a.label }),
+                                a.description && /* @__PURE__ */ t("div", { className: "Bear-Spotlight__action-desc bear-text-xs bear-text-gray-500 dark:bear-text-gray-400 bear-truncate", children: v ? T(a.description, l) : a.description })
                               ] }),
                               a.rightSection && /* @__PURE__ */ t("span", { className: "Bear-Spotlight__action-right bear-shrink-0", children: a.rightSection })
                             ]

package/dist/components/Spotlight/Spotlight.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),l=(e,t)=>{var s,o;const r=t.toLowerCase();return!!(e.label.toLowerCase().includes(r)||(s=e.description)!=null&&s.toLowerCase().includes(r)||(o=e.keywords)!=null&&o.some(n=>n.toLowerCase().includes(r)))},a=(e,t)=>{if(!t)return e;const r=e.toLowerCase().indexOf(t.toLowerCase());return r===-1?e:i.jsxs(i.Fragment,{children:[e.slice(0,r),i.jsx("mark",{className:"Bear-Spotlight__highlight bear-bg-yellow-200 dark:bear-bg-yellow-800 bear-text-inherit bear-rounded-sm bear-px-0.5",children:e.slice(r,r+t.length)}),e.slice(r+t.length)]})};exports.highlightText=a;exports.matchAction=l;

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

@@ -0,0 +1,3 @@
+import { SpotlightAction } from './Spotlight.types';
+export declare const matchAction: (action: SpotlightAction, query: string) => boolean;
+export declare const highlightText: (text: string, query: string) => React.ReactNode;

package/dist/components/Spotlight/Spotlight.utils.js

@@ -0,0 +1,18 @@
+import { jsxs as n, Fragment as l, jsx as a } from "react/jsx-runtime";
+const h = (e, s) => {
+  var o, i;
+  const r = s.toLowerCase();
+  return !!(e.label.toLowerCase().includes(r) || (o = e.description) != null && o.toLowerCase().includes(r) || (i = e.keywords) != null && i.some((t) => t.toLowerCase().includes(r)));
+}, d = (e, s) => {
+  if (!s) return e;
+  const r = e.toLowerCase().indexOf(s.toLowerCase());
+  return r === -1 ? e : /* @__PURE__ */ n(l, { children: [
+    e.slice(0, r),
+    /* @__PURE__ */ a("mark", { className: "Bear-Spotlight__highlight bear-bg-yellow-200 dark:bear-bg-yellow-800 bear-text-inherit bear-rounded-sm bear-px-0.5", children: e.slice(r, r + s.length) }),
+    e.slice(r + s.length)
+  ] });
+};
+export {
+  d as highlightText,
+  h as matchAction
+};

package/dist/components/Tabs/TabList.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),l=require("react"),x=require("../../utils/cn.cjs"),C=require("../Dropdown/Dropdown.cjs"),j=require("../Icon/index.cjs"),q=require("./Tabs.cjs");function k(a){var o;return l.isValidElement(a)&&typeof a.type!="string"&&((o=a.props)==null?void 0:o.id)!=null}const E=({children:a,maxVisibleTabs:o,wrap:y=!1,className:f})=>{const u=l.useContext(q.TabsContext);if(!u)throw new Error("TabList must be used within Tabs");const{activeTab:s,setActiveTab:g,variant:t}=u,m=l.Children.toArray(a).filter(k),i=m.map(e=>({id:e.props.id,label:e.props.children,disabled:e.props.disabled})),b=s?[s,...i.map(e=>e.id).filter(e=>e!==s)]:i.map(e=>e.id),v=o??b.length,T=b.slice(0,v),c=b.slice(v),d=c.includes(s),h=x.cn("Bear-Tabs__list",`Bear-Tabs__list--${t}`,"bear-flex bear-gap-1",y&&"bear-flex-wrap",t==="line"&&"bear-border-b",t==="pills"&&"bear-p-1 bear-rounded-lg",t==="enclosed"&&"bear-border-b",f),w={...t==="line"||t==="enclosed"?{borderColor:"var(--bear-border-default)"}:{},...t==="pills"?{backgroundColor:"var(--bear-bg-tertiary)"}:{}};return n.jsxs("div",{role:"tablist",className:h,style:w,children:[o!=null?T.map(e=>{const r=m.find(p=>p.props.id===e);return r?l.cloneElement(r,{key:r.props.id}):null}):a,o!=null&&c.length>0&&n.jsx(C.Dropdown,{placement:"bottom-start",closeOnSelect:!0,trigger:n.jsx("button",{type:"button",role:"tab","aria-haspopup":"listbox","aria-label":"More tabs",className:x.cn("bear-flex bear-items-center bear-gap-2 bear-px-4 bear-py-2 bear-text-sm bear-font-medium bear-transition-colors bear-border-0 bear-cursor-pointer",t==="pills"&&"bear-rounded-md",d&&"bear-shadow-sm",!d&&"hover:bear-bg-[var(--bear-bg-tertiary)] hover:bear-text-[var(--bear-text-primary)]"),style:d?{backgroundColor:"var(--bear-bg-primary)",color:"var(--bear-text-primary)"}:{color:"var(--bear-text-muted)"},children:n.jsx(j.BearIcons.MoreHorizIcon,{size:18})}),items:c.map(e=>{const r=i.find(p=>p.id===e);return{key:e,label:(r==null?void 0:r.label)??e,disabled:r==null?void 0:r.disabled,onClick:()=>g(e)}})})]})};exports.TabList=E;

package/dist/components/Tabs/TabList.d.ts

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

package/dist/components/Tabs/TabList.js

@@ -0,0 +1,69 @@
+import { jsxs as w, jsx as d } from "react/jsx-runtime";
+import { useContext as T, Children as k, cloneElement as E, isValidElement as I } from "react";
+import { cn as f } from "../../utils/cn.js";
+import { Dropdown as _ } from "../Dropdown/Dropdown.js";
+import { BearIcons as A } from "../Icon/index.js";
+import { TabsContext as B } from "./Tabs.js";
+function M(o) {
+  var a;
+  return I(o) && typeof o.type != "string" && ((a = o.props) == null ? void 0 : a.id) != null;
+}
+const H = ({ children: o, maxVisibleTabs: a, wrap: v = !1, className: y }) => {
+  const c = T(B);
+  if (!c) throw new Error("TabList must be used within Tabs");
+  const { activeTab: s, setActiveTab: g, variant: t } = c, m = k.toArray(o).filter(M), l = m.map((e) => ({ id: e.props.id, label: e.props.children, disabled: e.props.disabled })), n = s ? [s, ...l.map((e) => e.id).filter((e) => e !== s)] : l.map((e) => e.id), u = a ?? n.length, x = n.slice(0, u), b = n.slice(u), i = b.includes(s), h = f(
+    "Bear-Tabs__list",
+    `Bear-Tabs__list--${t}`,
+    "bear-flex bear-gap-1",
+    v && "bear-flex-wrap",
+    t === "line" && "bear-border-b",
+    t === "pills" && "bear-p-1 bear-rounded-lg",
+    t === "enclosed" && "bear-border-b",
+    y
+  ), C = {
+    ...t === "line" || t === "enclosed" ? { borderColor: "var(--bear-border-default)" } : {},
+    ...t === "pills" ? { backgroundColor: "var(--bear-bg-tertiary)" } : {}
+  };
+  return /* @__PURE__ */ w("div", { role: "tablist", className: h, style: C, children: [
+    a != null ? x.map((e) => {
+      const r = m.find((p) => p.props.id === e);
+      return r ? E(r, { key: r.props.id }) : null;
+    }) : o,
+    a != null && b.length > 0 && /* @__PURE__ */ d(
+      _,
+      {
+        placement: "bottom-start",
+        closeOnSelect: !0,
+        trigger: /* @__PURE__ */ d(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-haspopup": "listbox",
+            "aria-label": "More tabs",
+            className: f(
+              "bear-flex bear-items-center bear-gap-2 bear-px-4 bear-py-2 bear-text-sm bear-font-medium bear-transition-colors bear-border-0 bear-cursor-pointer",
+              t === "pills" && "bear-rounded-md",
+              i && "bear-shadow-sm",
+              !i && "hover:bear-bg-[var(--bear-bg-tertiary)] hover:bear-text-[var(--bear-text-primary)]"
+            ),
+            style: i ? { backgroundColor: "var(--bear-bg-primary)", color: "var(--bear-text-primary)" } : { color: "var(--bear-text-muted)" },
+            children: /* @__PURE__ */ d(A.MoreHorizIcon, { size: 18 })
+          }
+        ),
+        items: b.map((e) => {
+          const r = l.find((p) => p.id === e);
+          return {
+            key: e,
+            label: (r == null ? void 0 : r.label) ?? e,
+            disabled: r == null ? void 0 : r.disabled,
+            onClick: () => g(e)
+          };
+        })
+      }
+    )
+  ] });
+};
+export {
+  H as TabList
+};

package/dist/components/Tabs/TabPanel.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),o=require("react"),c=require("../../utils/cn.cjs"),i=require("./Tabs.cjs"),u=({tabId:t,children:n,className:r})=>{const e=o.useContext(i.TabsContext);if(!e)throw new Error("TabPanel must be used within Tabs");const{activeTab:a}=e;return a!==t?null:s.jsx("div",{role:"tabpanel",className:c.cn("Bear-Tabs__panel bear-py-4",r),children:n})};exports.TabPanel=u;

package/dist/components/Tabs/TabPanel.d.ts

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

package/dist/components/Tabs/TabPanel.js

@@ -0,0 +1,13 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useContext as s } from "react";
+import { cn as i } from "../../utils/cn.js";
+import { TabsContext as m } from "./Tabs.js";
+const f = ({ tabId: r, children: e, className: o }) => {
+  const t = s(m);
+  if (!t) throw new Error("TabPanel must be used within Tabs");
+  const { activeTab: a } = t;
+  return a !== r ? null : /* @__PURE__ */ n("div", { role: "tabpanel", className: i("Bear-Tabs__panel bear-py-4", o), children: e });
+};
+export {
+  f as TabPanel
+};

package/dist/components/Tabs/Tabs.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),i=require("react"),s=require("../../utils/cn.cjs"),d=i.createContext(null),T=({children:a,defaultTab:t,variant:r="line",onChange:e,className:o,testId:l})=>{const[x,g]=i.useState(t),b=c=>{g(c),e==null||e(c)};return n.jsx(d.Provider,{value:{activeTab:x,setActiveTab:b,variant:r},children:n.jsx("div",{className:s.cn("Bear-Tabs",o),"data-testid":l,children:a})})},y=({children:a,className:t})=>{const r=i.useContext(d);if(!r)throw new Error("TabList must be used within Tabs");const{variant:e}=r;return n.jsx("div",{role:"tablist",className:s.cn("Bear-Tabs__list",`Bear-Tabs__list--${e}`,"bear-flex bear-gap-1",e==="line"&&"bear-border-b bear-border-gray-200 dark:bear-border-gray-700",e==="pills"&&"bear-bg-gray-100 dark:bear-bg-gray-800 bear-p-1 bear-rounded-lg",e==="enclosed"&&"bear-border-b bear-border-gray-200 dark:bear-border-gray-700",t),children:a})},v=({id:a,children:t,disabled:r=!1,icon:e})=>{const o=i.useContext(d);if(!o)throw new Error("Tab must be used within Tabs");const{activeTab:l,setActiveTab:x,variant:g}=o,b=l===a,c="bear-flex bear-items-center bear-gap-2 bear-px-4 bear-py-2 bear-text-sm bear-font-medium bear-transition-colors",u={line:s.cn("bear-border-b-2 bear--mb-px",b?"bear-border-pink-500 bear-text-pink-600 dark:bear-text-pink-400":"bear-border-transparent bear-text-gray-600 dark:bear-text-gray-400 hover:bear-text-gray-900 dark:hover:bear-text-white hover:bear-border-gray-300"),pills:s.cn("bear-rounded-md",b?"bear-bg-white dark:bear-bg-gray-700 bear-text-gray-900 dark:bear-text-white bear-shadow-sm":"bear-text-gray-600 dark:bear-text-gray-400 hover:bear-text-gray-900 dark:hover:bear-text-white"),enclosed:s.cn("bear-rounded-t-lg bear-border bear-border-transparent",b?"bear-bg-white dark:bear-bg-gray-900 bear-border-gray-200 dark:bear-border-gray-700 bear-border-b-white dark:bear-border-b-gray-900 bear--mb-px bear-text-gray-900 dark:bear-text-white":"bear-text-gray-600 dark:bear-text-gray-400 hover:bear-text-gray-900 dark:hover:bear-text-white")};return n.jsxs("button",{role:"tab","aria-selected":b,disabled:r,onClick:()=>!r&&x(a),className:s.cn("Bear-Tabs__tab",b&&"Bear-Tabs__tab--active",c,u[g],r&&"Bear-Tabs__tab--disabled bear-opacity-50 bear-cursor-not-allowed"),children:[e&&n.jsx("span",{className:"Bear-Tabs__tab-icon",children:e}),n.jsx("span",{className:"Bear-Tabs__tab-label",children:t})]})},h=({tabId:a,children:t,className:r})=>{const e=i.useContext(d);if(!e)throw new Error("TabPanel must be used within Tabs");const{activeTab:o}=e;return o!==a?null:n.jsx("div",{role:"tabpanel",className:s.cn("Bear-Tabs__panel bear-py-4",r),children:t})};exports.Tab=v;exports.TabList=y;exports.TabPanel=h;exports.Tabs=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),m=require("react"),b=require("../../utils/cn.cjs"),x=m.createContext(null),T=({children:o,value:n,defaultTab:e,variant:c="line",onChange:a,className:l,testId:d})=>{const[t,r]=m.useState(e),i=n!==void 0,v=i?n:t,u=p=>{i||r(p),a==null||a(p)};return s.jsx(x.Provider,{value:{activeTab:v,setActiveTab:u,variant:c},children:s.jsx("div",{className:b.cn("Bear-Tabs",l),"data-testid":d,children:o})})},y=({id:o,children:n,disabled:e=!1,icon:c})=>{const a=m.useContext(x);if(!a)throw new Error("Tab must be used within Tabs");const{activeTab:l,setActiveTab:d,variant:t}=a,r=l===o,i="bear-flex bear-items-center bear-gap-2 bear-px-4 bear-py-2 bear-text-sm bear-font-medium bear-transition-colors",v={line:b.cn("bear-border-b-2 bear--mb-px",r?"bear-border-pink-500 bear-text-pink-600 dark:bear-text-pink-400":"bear-border-transparent hover:bear-border-[var(--bear-border-default)]"),pills:b.cn("bear-rounded-md",r&&"bear-shadow-sm"),enclosed:b.cn("bear-rounded-t-lg bear-border bear-border-transparent",r&&"bear--mb-px")},u=e?void 0:r?t==="pills"?{backgroundColor:"var(--bear-bg-primary)",color:"var(--bear-text-primary)"}:t==="enclosed"?{backgroundColor:"var(--bear-bg-primary)",borderColor:"var(--bear-border-default)",borderBottomColor:"var(--bear-bg-primary)",color:"var(--bear-text-primary)"}:void 0:{color:"var(--bear-text-muted)"};return s.jsxs("button",{role:"tab","aria-selected":r,disabled:e,onClick:()=>!e&&d(o),className:b.cn("Bear-Tabs__tab",r&&"Bear-Tabs__tab--active",i,v[t],!r&&"hover:bear-bg-[var(--bear-bg-tertiary)] hover:bear-text-[var(--bear-text-primary)]",e&&"Bear-Tabs__tab--disabled bear-opacity-50 bear-cursor-not-allowed"),style:u,children:[c&&s.jsx("span",{className:"Bear-Tabs__tab-icon",children:c}),s.jsx("span",{className:"Bear-Tabs__tab-label",children:n})]})};exports.Tab=y;exports.Tabs=T;exports.TabsContext=x;

package/dist/components/Tabs/Tabs.d.ts

@@ -1,30 +1,5 @@
 import { FC } from 'react';
-import { TabsProps, TabListProps, TabProps, TabPanelProps } from './Tabs.types';
-/**
- * Tabs - Tabbed interface for organizing content
- *
- * @example
- * ```tsx
- * <Tabs defaultTab="tab1" variant="line">
- *   <TabList>
- *     <Tab id="tab1">Tab 1</Tab>
- *     <Tab id="tab2">Tab 2</Tab>
- *   </TabList>
- *   <TabPanel tabId="tab1">Content 1</TabPanel>
- *   <TabPanel tabId="tab2">Content 2</TabPanel>
- * </Tabs>
- * ```
- */
+import { TabsContextValue, TabsProps, TabProps } from './Tabs.types';
+export declare const TabsContext: import('react').Context<TabsContextValue | null>;
 export declare const Tabs: FC<TabsProps>;
-/**
- * TabList - Container for tab buttons
- */
-export declare const TabList: FC<TabListProps>;
-/**
- * Tab - Individual tab button
- */
 export declare const Tab: FC<TabProps>;
-/**
- * TabPanel - Content panel for a tab
- */
-export declare const TabPanel: FC<TabPanelProps>;

package/dist/components/Tabs/Tabs.js

@@ -1,84 +1,66 @@
-import { jsxs as T, jsx as n } from "react/jsx-runtime";
-import { createContext as p, useContext as g, useState as m } from "react";
-import { cn as s } from "../../utils/cn.js";
-const d = p(null), k = ({
-  children: a,
-  defaultTab: t,
-  variant: e = "line",
-  onChange: r,
-  className: o,
-  testId: c
+import { jsxs as u, jsx as l } from "react/jsx-runtime";
+import { createContext as T, useContext as y, useState as f } from "react";
+import { cn as b } from "../../utils/cn.js";
+const x = T(null), C = ({
+  children: o,
+  value: s,
+  defaultTab: e,
+  variant: n = "line",
+  onChange: a,
+  className: c,
+  testId: d
 }) => {
-  const [l, x] = m(t), b = (i) => {
-    x(i), r == null || r(i);
+  const [t, r] = f(e), i = s !== void 0, m = i ? s : t, v = (p) => {
+    i || r(p), a == null || a(p);
   };
-  return /* @__PURE__ */ n(d.Provider, { value: { activeTab: l, setActiveTab: b, variant: e }, children: /* @__PURE__ */ n("div", { className: s("Bear-Tabs", o), "data-testid": c, children: a }) });
-}, w = ({ children: a, className: t }) => {
-  const e = g(d);
-  if (!e) throw new Error("TabList must be used within Tabs");
-  const { variant: r } = e;
-  return /* @__PURE__ */ n(
-    "div",
-    {
-      role: "tablist",
-      className: s(
-        "Bear-Tabs__list",
-        `Bear-Tabs__list--${r}`,
-        "bear-flex bear-gap-1",
-        r === "line" && "bear-border-b bear-border-gray-200 dark:bear-border-gray-700",
-        r === "pills" && "bear-bg-gray-100 dark:bear-bg-gray-800 bear-p-1 bear-rounded-lg",
-        r === "enclosed" && "bear-border-b bear-border-gray-200 dark:bear-border-gray-700",
-        t
-      ),
-      children: a
-    }
-  );
-}, _ = ({ id: a, children: t, disabled: e = !1, icon: r }) => {
-  const o = g(d);
-  if (!o) throw new Error("Tab must be used within Tabs");
-  const { activeTab: c, setActiveTab: l, variant: x } = o, b = c === a, i = "bear-flex bear-items-center bear-gap-2 bear-px-4 bear-py-2 bear-text-sm bear-font-medium bear-transition-colors", y = {
-    line: s(
+  return /* @__PURE__ */ l(x.Provider, { value: { activeTab: m, setActiveTab: v, variant: n }, children: /* @__PURE__ */ l("div", { className: b("Bear-Tabs", c), "data-testid": d, children: o }) });
+}, g = ({ id: o, children: s, disabled: e = !1, icon: n }) => {
+  const a = y(x);
+  if (!a) throw new Error("Tab must be used within Tabs");
+  const { activeTab: c, setActiveTab: d, variant: t } = a, r = c === o, i = "bear-flex bear-items-center bear-gap-2 bear-px-4 bear-py-2 bear-text-sm bear-font-medium bear-transition-colors", m = {
+    line: b(
       "bear-border-b-2 bear--mb-px",
-      b ? "bear-border-pink-500 bear-text-pink-600 dark:bear-text-pink-400" : "bear-border-transparent bear-text-gray-600 dark:bear-text-gray-400 hover:bear-text-gray-900 dark:hover:bear-text-white hover:bear-border-gray-300"
+      r ? "bear-border-pink-500 bear-text-pink-600 dark:bear-text-pink-400" : "bear-border-transparent hover:bear-border-[var(--bear-border-default)]"
     ),
-    pills: s(
+    pills: b(
       "bear-rounded-md",
-      b ? "bear-bg-white dark:bear-bg-gray-700 bear-text-gray-900 dark:bear-text-white bear-shadow-sm" : "bear-text-gray-600 dark:bear-text-gray-400 hover:bear-text-gray-900 dark:hover:bear-text-white"
+      r && "bear-shadow-sm"
     ),
-    enclosed: s(
+    enclosed: b(
       "bear-rounded-t-lg bear-border bear-border-transparent",
-      b ? "bear-bg-white dark:bear-bg-gray-900 bear-border-gray-200 dark:bear-border-gray-700 bear-border-b-white dark:bear-border-b-gray-900 bear--mb-px bear-text-gray-900 dark:bear-text-white" : "bear-text-gray-600 dark:bear-text-gray-400 hover:bear-text-gray-900 dark:hover:bear-text-white"
+      r && "bear--mb-px"
     )
-  };
-  return /* @__PURE__ */ T(
+  }, v = e ? void 0 : r ? t === "pills" ? { backgroundColor: "var(--bear-bg-primary)", color: "var(--bear-text-primary)" } : t === "enclosed" ? {
+    backgroundColor: "var(--bear-bg-primary)",
+    borderColor: "var(--bear-border-default)",
+    borderBottomColor: "var(--bear-bg-primary)",
+    color: "var(--bear-text-primary)"
+  } : void 0 : { color: "var(--bear-text-muted)" };
+  return /* @__PURE__ */ u(
     "button",
     {
       role: "tab",
-      "aria-selected": b,
+      "aria-selected": r,
       disabled: e,
-      onClick: () => !e && l(a),
-      className: s(
+      onClick: () => !e && d(o),
+      className: b(
         "Bear-Tabs__tab",
-        b && "Bear-Tabs__tab--active",
+        r && "Bear-Tabs__tab--active",
         i,
-        y[x],
+        m[t],
+        !r && "hover:bear-bg-[var(--bear-bg-tertiary)] hover:bear-text-[var(--bear-text-primary)]",
         e && "Bear-Tabs__tab--disabled bear-opacity-50 bear-cursor-not-allowed"
       ),
+      style: v,
       children: [
-        r && /* @__PURE__ */ n("span", { className: "Bear-Tabs__tab-icon", children: r }),
-        /* @__PURE__ */ n("span", { className: "Bear-Tabs__tab-label", children: t })
+        n && /* @__PURE__ */ l("span", { className: "Bear-Tabs__tab-icon", children: n }),
+        /* @__PURE__ */ l("span", { className: "Bear-Tabs__tab-label", children: s })
       ]
     }
   );
-}, f = ({ tabId: a, children: t, className: e }) => {
-  const r = g(d);
-  if (!r) throw new Error("TabPanel must be used within Tabs");
-  const { activeTab: o } = r;
-  return o !== a ? null : /* @__PURE__ */ n("div", { role: "tabpanel", className: s("Bear-Tabs__panel bear-py-4", e), children: t });
 };
 export {
-  _ as Tab,
-  w as TabList,
-  f as TabPanel,
-  k as Tabs
+  g as Tab,
+  C as Tabs,
+  x as TabsContext
 };

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

@@ -7,7 +7,9 @@ export interface TabsContextValue {
 export interface TabsProps {
     /** Tab panels */
     children: ReactNode;
-    /** Default active tab */
+    /** Controlled active tab (when set, defaultTab is ignored) */
+    value?: string;
+    /** Default active tab (uncontrolled) */
     defaultTab: string;
     /** Visual variant */
     variant?: 'line' | 'pills' | 'enclosed';
@@ -21,6 +23,10 @@ export interface TabsProps {
 export interface TabListProps {
     /** Tab buttons */
     children: ReactNode;
+    /** Max number of visible tabs before overflow (e.g. 5); rest go in "..." dropdown. Selected tab is always shown first. */
+    maxVisibleTabs?: number;
+    /** Allow tabs to wrap to next line (flex-wrap), no breakpoints */
+    wrap?: boolean;
     /** Custom class name */
     className?: string;
 }

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

@@ -1,2 +1,4 @@
-export { Tabs, TabList, Tab, TabPanel } from './Tabs';
+export { Tabs, Tab, TabsContext } from './Tabs';
+export { TabList } from './TabList';
+export { TabPanel } from './TabPanel';
 export type { TabsProps, TabListProps, TabProps, TabPanelProps, TabsContextValue } from './Tabs.types';