@forgedevstack/bear 1.1.8 → 1.2.0

package/dist/components/Popover/Popover.js

@@ -1,93 +1,93 @@
-import { jsxs as c, jsx as m } from "react/jsx-runtime";
-import { useState as I, useRef as p, useCallback as T, useEffect as h } from "react";
-import { cn as s } from "../../utils/cn.js";
-const P = ({
-  children: v,
-  content: y,
+import { jsxs as x, jsx as E } from "react/jsx-runtime";
+import { useState as k, useRef as z, useCallback as B, useEffect as u } from "react";
+import { createPortal as T } from "react-dom";
+import { cn as c } from "../../utils/cn.js";
+const W = 1e4;
+function Z(b, t, a) {
+  const e = { position: "fixed", zIndex: W }, s = b.split("-")[0], r = b.includes("start"), o = b.includes("end");
+  return s === "bottom" ? (e.top = t.bottom + a, r ? e.left = t.left : o ? e.left = t.right : e.left = t.left + t.width / 2) : s === "top" ? (e.bottom = window.innerHeight - t.top + a, r ? e.left = t.left : o ? e.left = t.right : e.left = t.left + t.width / 2) : s === "left" ? (e.right = window.innerWidth - t.left + a, r ? e.top = t.top : o ? e.bottom = window.innerHeight - t.bottom : e.top = t.top + t.height / 2) : (e.left = t.right + a, r ? e.top = t.top : o ? e.bottom = window.innerHeight - t.bottom : e.top = t.top + t.height / 2), s === "bottom" || s === "top" ? !r && !o ? e.transform = "translateX(-50%)" : o && (e.transform = "translateX(-100%)") : !r && !o ? e.transform = "translateY(-50%)" : o && (e.transform = "translateY(-100%)"), e;
+}
+const F = ({
+  children: b,
+  content: t,
   placement: a = "bottom",
-  trigger: o = "click",
-  open: i,
-  onOpenChange: b,
-  className: x,
-  contentClassName: k,
-  arrow: g = !0,
-  closeOnClickOutside: f = !0,
-  closeOnEscape: d = !0,
-  offset: u = 8
+  trigger: e = "click",
+  open: s,
+  onOpenChange: r,
+  className: o,
+  contentClassName: L,
+  arrow: N = !0,
+  closeOnClickOutside: p = !0,
+  closeOnEscape: m = !0,
+  offset: h = 8
 }) => {
-  const [w, E] = I(!1), l = p(null), z = p(null), t = i !== void 0 ? i : w, r = T((e) => {
-    E(e), b == null || b(e);
-  }, [b]);
-  h(() => {
-    if (!f) return;
-    const e = (n) => {
-      l.current && !l.current.contains(n.target) && r(!1);
+  const [I, M] = k(!1), [P, R] = k({}), f = z(null), v = z(null), i = s !== void 0 ? s : I, l = B((n) => {
+    M(n), r == null || r(n);
+  }, [r]);
+  u(() => {
+    if (i && f.current) {
+      const n = f.current.getBoundingClientRect();
+      R(Z(a, n, h));
+    }
+  }, [i, a, h]), u(() => {
+    if (!p) return;
+    const n = (d) => {
+      var y, g;
+      const w = d.target;
+      (y = f.current) != null && y.contains(w) || (g = v.current) != null && g.contains(w) || l(!1);
     };
-    return t && document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, [t, f, r]), h(() => {
-    if (!d) return;
-    const e = (n) => {
-      n.key === "Escape" && r(!1);
+    return i && document.addEventListener("mousedown", n), () => document.removeEventListener("mousedown", n);
+  }, [i, p, l]), u(() => {
+    if (!m) return;
+    const n = (d) => {
+      d.key === "Escape" && l(!1);
     };
-    return t && document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [t, d, r]);
-  const L = () => {
-    o === "click" && r(!t);
-  }, M = () => {
-    o === "hover" && r(!0);
-  }, N = () => {
-    o === "hover" && r(!1);
-  }, R = {
-    top: "bear-bottom-full bear-left-1/2 -bear-translate-x-1/2 bear-mb-2",
-    "top-start": "bear-bottom-full bear-left-0 bear-mb-2",
-    "top-end": "bear-bottom-full bear-right-0 bear-mb-2",
-    bottom: "bear-top-full bear-left-1/2 -bear-translate-x-1/2 bear-mt-2",
-    "bottom-start": "bear-top-full bear-left-0 bear-mt-2",
-    "bottom-end": "bear-top-full bear-right-0 bear-mt-2",
-    left: "bear-right-full bear-top-1/2 -bear-translate-y-1/2 bear-mr-2",
-    "left-start": "bear-right-full bear-top-0 bear-mr-2",
-    "left-end": "bear-right-full bear-bottom-0 bear-mr-2",
-    right: "bear-left-full bear-top-1/2 -bear-translate-y-1/2 bear-ml-2",
-    "right-start": "bear-left-full bear-top-0 bear-ml-2",
-    "right-end": "bear-left-full bear-bottom-0 bear-ml-2"
-  }, S = {
+    return i && document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
+  }, [i, m, l]);
+  const S = () => {
+    e === "click" && l(!i);
+  }, H = () => {
+    e === "hover" && l(!0);
+  }, X = () => {
+    e === "hover" && l(!1);
+  }, j = {
     top: "bear-top-full bear-left-1/2 -bear-translate-x-1/2 bear-border-t-zinc-700 bear-border-x-transparent bear-border-b-transparent",
     bottom: "bear-bottom-full bear-left-1/2 -bear-translate-x-1/2 bear-border-b-zinc-700 bear-border-x-transparent bear-border-t-transparent",
     left: "bear-left-full bear-top-1/2 -bear-translate-y-1/2 bear-border-l-zinc-700 bear-border-y-transparent bear-border-r-transparent",
     right: "bear-right-full bear-top-1/2 -bear-translate-y-1/2 bear-border-r-zinc-700 bear-border-y-transparent bear-border-l-transparent"
-  }, j = a.split("-")[0];
-  return /* @__PURE__ */ c(
+  }, D = a.split("-")[0], Y = i && typeof document < "u" && T(
+    /* @__PURE__ */ x(
+      "div",
+      {
+        ref: v,
+        "data-bear-popover": !0,
+        className: c(
+          "bear-bg-zinc-800 bear-border bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3",
+          L
+        ),
+        style: P,
+        children: [
+          t,
+          N && /* @__PURE__ */ E("div", { className: c("bear-absolute bear-w-0 bear-h-0 bear-border-8", j[D]) })
+        ]
+      }
+    ),
+    document.body
+  );
+  return /* @__PURE__ */ x(
     "div",
     {
-      ref: l,
-      className: s("bear-relative bear-inline-block", x),
-      onMouseEnter: M,
-      onMouseLeave: N,
+      ref: f,
+      className: c("bear-relative bear-inline-block", o),
+      onMouseEnter: H,
+      onMouseLeave: X,
       children: [
-        /* @__PURE__ */ m("div", { onClick: L, className: "bear-cursor-pointer", children: v }),
-        t && /* @__PURE__ */ c(
-          "div",
-          {
-            ref: z,
-            className: s(
-              "bear-absolute bear-z-50 bear-bg-zinc-800 bear-border bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3",
-              R[a],
-              k
-            ),
-            style: { marginTop: a.startsWith("bottom") ? u : void 0, marginBottom: a.startsWith("top") ? u : void 0 },
-            children: [
-              y,
-              g && /* @__PURE__ */ m("div", { className: s(
-                "bear-absolute bear-w-0 bear-h-0 bear-border-8",
-                S[j]
-              ) })
-            ]
-          }
-        )
+        /* @__PURE__ */ E("div", { onClick: S, className: "bear-cursor-pointer", children: b }),
+        Y
       ]
     }
   );
 };
 export {
-  P as Popover
+  F as Popover
 };

package/dist/components/Portal/Portal.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("react"),a=require("react-dom"),c=({children:e,target:o,disabled:u=!1})=>{const[s,n]=r.useState(!1);return r.useEffect(()=>{n(!0)},[]),u||!s?t.jsx(t.Fragment,{children:e}):a.createPortal(e,o??document.body)};exports.Portal=c;

package/dist/components/Portal/Portal.d.ts

@@ -0,0 +1,11 @@
+import { FC, ReactNode } from 'react';
+export interface PortalProps {
+    /** Content to render in the portal */
+    children: ReactNode;
+    /** Target DOM element (defaults to document.body) */
+    target?: HTMLElement | null;
+    /** Disable portalling — render inline instead */
+    disabled?: boolean;
+}
+export declare const Portal: FC<PortalProps>;
+export default Portal;

package/dist/components/Portal/Portal.js

@@ -0,0 +1,12 @@
+import { jsx as f, Fragment as s } from "react/jsx-runtime";
+import { useState as u, useEffect as a } from "react";
+import { createPortal as n } from "react-dom";
+const i = ({ children: t, target: e, disabled: o = !1 }) => {
+  const [r, m] = u(!1);
+  return a(() => {
+    m(!0);
+  }, []), o || !r ? /* @__PURE__ */ f(s, { children: t }) : n(t, e ?? document.body);
+};
+export {
+  i as Portal
+};

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

@@ -0,0 +1,2 @@
+export { Portal, default } from './Portal';
+export type { PortalProps } from './Portal';

package/dist/components/Select/Select.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("react"),a=require("../../utils/cn.cjs"),j=require("../../hooks/useClickOutside.cjs");require("../../context/BearProvider.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");const f=require("../Icon/index.cjs"),N={sm:"bear-h-8 bear-text-sm bear-px-3",md:"bear-h-10 bear-text-base bear-px-4",lg:"bear-h-12 bear-text-lg bear-px-5"},p=({options:i,value:t,onChange:s,placeholder:g="Select an option",label:u,error:l,disabled:c=!1,size:y="md",fullWidth:h=!1,className:m})=>{const[o,d]=n.useState(!1),x=n.useRef(null),k=!!l,b=i.find(e=>e.value===t),w=n.useCallback(()=>d(!1),[]);j.useClickOutside(x,w);const v=e=>{s==null||s(e),d(!1)};return r.jsxs("div",{ref:x,className:a.cn("bear-relative bear-flex bear-flex-col bear-gap-1.5",h&&"bear-w-full"),children:[u&&r.jsx("label",{className:"bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-300",children:u}),r.jsxs("button",{type:"button",disabled:c,onClick:()=>!c&&d(!o),className:a.cn("bear-flex bear-items-center bear-justify-between bear-w-full","bear-rounded-lg bear-border bear-text-left bear-outline-none bear-transition-all bear-duration-200","bear-bg-white bear-text-gray-900 bear-border-gray-300","focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-white","dark:bear-bg-gray-800 dark:bear-text-white dark:bear-border-gray-600 dark:focus:bear-ring-offset-gray-900",k?"bear-border-red-500 focus:bear-ring-red-500":"focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",c&&"bear-opacity-50 bear-cursor-not-allowed",N[y],m),children:[r.jsx("span",{className:b?"bear-text-gray-900 dark:bear-text-white":"bear-text-gray-500 dark:bear-text-gray-500",children:(b==null?void 0:b.label)||g}),r.jsx(f.ChevronDownIcon,{className:a.cn("bear-w-4 bear-h-4 bear-text-gray-500 dark:bear-text-gray-400 bear-transition-transform",o&&"bear-rotate-180")})]}),o&&r.jsx("div",{className:a.cn("bear-absolute bear-z-50 bear-w-full bear-mt-1","bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden bear-top-full","bear-bg-white bear-border-gray-200 dark:bear-bg-gray-800 dark:bear-border-gray-600"),children:r.jsx("div",{className:"bear-max-h-60 bear-overflow-y-auto",children:i.map(e=>r.jsxs("button",{type:"button",disabled:e.disabled,onClick:()=>!e.disabled&&v(e.value),className:a.cn("bear-flex bear-items-center bear-justify-between bear-w-full bear-px-4 bear-py-2","bear-text-left bear-transition-colors",e.disabled?"bear-text-gray-500 bear-cursor-not-allowed":"bear-text-gray-700 dark:bear-text-gray-300 hover:bear-bg-gray-100 hover:bear-text-gray-900 dark:hover:bear-bg-gray-700 dark:hover:bear-text-white",e.value===t&&"bear-bg-bear-100 bear-text-bear-700 dark:bear-bg-bear-600/20 dark:bear-text-bear-300"),children:[e.label,e.value===t&&r.jsx(f.CheckIcon,{className:"bear-w-4 bear-h-4 bear-text-bear-600 dark:bear-text-bear-400"})]},e.value))})}),l&&r.jsx("p",{className:"bear-text-sm bear-text-red-500",children:l})]})};exports.Select=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("react"),s=require("../../utils/cn.cjs"),j=require("../../hooks/useClickOutside.cjs");require("../../context/BearProvider.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");const m=require("../Icon/index.cjs"),p={sm:"bear-h-8 bear-text-sm bear-px-3",md:"bear-h-10 bear-text-base bear-px-4",lg:"bear-h-12 bear-text-lg bear-px-5"},N=({options:u,value:a,onChange:t,placeholder:v="Select an option",label:i,error:l,disabled:o=!1,size:y="md",fullWidth:g=!1,className:h})=>{const[c,d]=n.useState(!1),f=n.useRef(null),x=!!l,b=u.find(e=>e.value===a),k=n.useCallback(()=>d(!1),[]);j.useClickOutside(f,k);const w=e=>{t==null||t(e),d(!1)};return r.jsxs("div",{ref:f,className:s.cn("bear-relative bear-flex bear-flex-col bear-gap-1.5",g&&"bear-w-full"),children:[i&&r.jsx("label",{className:"bear-text-sm bear-font-medium",style:{color:"var(--bear-text-secondary)"},children:i}),r.jsxs("button",{type:"button",disabled:o,onClick:()=>!o&&d(!c),className:s.cn("bear-flex bear-items-center bear-justify-between bear-w-full","bear-rounded-lg bear-border bear-text-left bear-outline-none bear-transition-all bear-duration-200","focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-[var(--bear-bg-primary)]",x?"bear-border-red-500 focus:bear-ring-red-500":"focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",o&&"bear-opacity-50 bear-cursor-not-allowed",p[y],h),style:{backgroundColor:"var(--bear-bg-primary)",borderColor:x?void 0:"var(--bear-border-default)",color:b?"var(--bear-text-primary)":"var(--bear-text-muted)"},children:[r.jsx("span",{children:(b==null?void 0:b.label)||v}),r.jsx(m.ChevronDownIcon,{className:s.cn("bear-w-4 bear-h-4 bear-shrink-0 bear-transition-transform",c&&"bear-rotate-180"),style:{color:"var(--bear-text-muted)"}})]}),c&&r.jsx("div",{className:"bear-absolute bear-z-50 bear-w-full bear-mt-1 bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden bear-top-full",style:{backgroundColor:"var(--bear-bg-primary)",borderColor:"var(--bear-border-default)"},children:r.jsx("div",{className:"bear-max-h-60 bear-overflow-y-auto",children:u.map(e=>r.jsxs("button",{type:"button",disabled:e.disabled,onClick:()=>!e.disabled&&w(e.value),className:s.cn("bear-flex bear-items-center bear-justify-between bear-w-full bear-px-4 bear-py-2","bear-text-left bear-transition-colors",e.disabled&&"bear-cursor-not-allowed",e.value===a&&"bear-bg-bear-100 bear-text-bear-700 dark:bear-bg-bear-600/20 dark:bear-text-bear-300",!e.disabled&&e.value!==a&&"hover:bear-bg-[var(--bear-bg-tertiary)]"),style:e.disabled?{color:"var(--bear-text-muted)"}:e.value===a?void 0:{color:"var(--bear-text-secondary)"},children:[e.label,e.value===a&&r.jsx(m.CheckIcon,{className:"bear-w-4 bear-h-4 bear-shrink-0 bear-text-bear-600 dark:bear-text-bear-400"})]},e.value))})}),l&&r.jsx("p",{className:"bear-text-sm bear-text-red-500",children:l})]})};exports.Select=N;

package/dist/components/Select/Select.js

@@ -1,64 +1,65 @@
 import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { useState as p, useRef as v, useCallback as N } from "react";
-import { cn as a } from "../../utils/cn.js";
-import { useClickOutside as j } from "../../hooks/useClickOutside.js";
+import { useState as w, useRef as k, useCallback as N } from "react";
+import { cn as t } from "../../utils/cn.js";
+import { useClickOutside as C } from "../../hooks/useClickOutside.js";
 import "../../context/BearProvider.js";
 import "../../hooks/useBearComponent/useBearComponent.js";
-import { ChevronDownIcon as S, CheckIcon as C } from "../Icon/index.js";
+import { ChevronDownIcon as j, CheckIcon as S } from "../Icon/index.js";
 const I = {
   sm: "bear-h-8 bear-text-sm bear-px-3",
   md: "bear-h-10 bear-text-base bear-px-4",
   lg: "bear-h-12 bear-text-lg bear-px-5"
 }, A = ({
   options: i,
-  value: t,
-  onChange: s,
+  value: a,
+  onChange: l,
   placeholder: x = "Select an option",
   label: f,
-  error: l,
+  error: s,
   disabled: o = !1,
-  size: g = "md",
-  fullWidth: m = !1,
+  size: v = "md",
+  fullWidth: h = !1,
   className: y
 }) => {
-  const [d, c] = p(!1), u = v(null), h = !!l, b = i.find((e) => e.value === t), k = N(() => c(!1), []);
-  j(u, k);
-  const w = (e) => {
-    s == null || s(e), c(!1);
+  const [d, c] = w(!1), u = k(null), m = !!s, b = i.find((e) => e.value === a), g = N(() => c(!1), []);
+  C(u, g);
+  const p = (e) => {
+    l == null || l(e), c(!1);
   };
   return /* @__PURE__ */ n(
     "div",
     {
       ref: u,
-      className: a("bear-relative bear-flex bear-flex-col bear-gap-1.5", m && "bear-w-full"),
+      className: t("bear-relative bear-flex bear-flex-col bear-gap-1.5", h && "bear-w-full"),
       children: [
-        f && /* @__PURE__ */ r("label", { className: "bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-300", children: f }),
+        f && /* @__PURE__ */ r("label", { className: "bear-text-sm bear-font-medium", style: { color: "var(--bear-text-secondary)" }, children: f }),
         /* @__PURE__ */ n(
           "button",
           {
             type: "button",
             disabled: o,
             onClick: () => !o && c(!d),
-            className: a(
+            className: t(
               "bear-flex bear-items-center bear-justify-between bear-w-full",
               "bear-rounded-lg bear-border bear-text-left bear-outline-none bear-transition-all bear-duration-200",
-              "bear-bg-white bear-text-gray-900 bear-border-gray-300",
-              "focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-white",
-              "dark:bear-bg-gray-800 dark:bear-text-white dark:bear-border-gray-600 dark:focus:bear-ring-offset-gray-900",
-              h ? "bear-border-red-500 focus:bear-ring-red-500" : "focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",
+              "focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-[var(--bear-bg-primary)]",
+              m ? "bear-border-red-500 focus:bear-ring-red-500" : "focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",
               o && "bear-opacity-50 bear-cursor-not-allowed",
-              I[g],
+              I[v],
               y
             ),
+            style: {
+              backgroundColor: "var(--bear-bg-primary)",
+              borderColor: m ? void 0 : "var(--bear-border-default)",
+              color: b ? "var(--bear-text-primary)" : "var(--bear-text-muted)"
+            },
             children: [
-              /* @__PURE__ */ r("span", { className: b ? "bear-text-gray-900 dark:bear-text-white" : "bear-text-gray-500 dark:bear-text-gray-500", children: (b == null ? void 0 : b.label) || x }),
+              /* @__PURE__ */ r("span", { children: (b == null ? void 0 : b.label) || x }),
               /* @__PURE__ */ r(
-                S,
+                j,
                 {
-                  className: a(
-                    "bear-w-4 bear-h-4 bear-text-gray-500 dark:bear-text-gray-400 bear-transition-transform",
-                    d && "bear-rotate-180"
-                  )
+                  className: t("bear-w-4 bear-h-4 bear-shrink-0 bear-transition-transform", d && "bear-rotate-180"),
+                  style: { color: "var(--bear-text-muted)" }
                 }
               )
             ]
@@ -67,33 +68,35 @@ const I = {
         d && /* @__PURE__ */ r(
           "div",
           {
-            className: a(
-              "bear-absolute bear-z-50 bear-w-full bear-mt-1",
-              "bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden bear-top-full",
-              "bear-bg-white bear-border-gray-200 dark:bear-bg-gray-800 dark:bear-border-gray-600"
-            ),
+            className: "bear-absolute bear-z-50 bear-w-full bear-mt-1 bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden bear-top-full",
+            style: {
+              backgroundColor: "var(--bear-bg-primary)",
+              borderColor: "var(--bear-border-default)"
+            },
             children: /* @__PURE__ */ r("div", { className: "bear-max-h-60 bear-overflow-y-auto", children: i.map((e) => /* @__PURE__ */ n(
               "button",
               {
                 type: "button",
                 disabled: e.disabled,
-                onClick: () => !e.disabled && w(e.value),
-                className: a(
+                onClick: () => !e.disabled && p(e.value),
+                className: t(
                   "bear-flex bear-items-center bear-justify-between bear-w-full bear-px-4 bear-py-2",
                   "bear-text-left bear-transition-colors",
-                  e.disabled ? "bear-text-gray-500 bear-cursor-not-allowed" : "bear-text-gray-700 dark:bear-text-gray-300 hover:bear-bg-gray-100 hover:bear-text-gray-900 dark:hover:bear-bg-gray-700 dark:hover:bear-text-white",
-                  e.value === t && "bear-bg-bear-100 bear-text-bear-700 dark:bear-bg-bear-600/20 dark:bear-text-bear-300"
+                  e.disabled && "bear-cursor-not-allowed",
+                  e.value === a && "bear-bg-bear-100 bear-text-bear-700 dark:bear-bg-bear-600/20 dark:bear-text-bear-300",
+                  !e.disabled && e.value !== a && "hover:bear-bg-[var(--bear-bg-tertiary)]"
                 ),
+                style: e.disabled ? { color: "var(--bear-text-muted)" } : e.value === a ? void 0 : { color: "var(--bear-text-secondary)" },
                 children: [
                   e.label,
-                  e.value === t && /* @__PURE__ */ r(C, { className: "bear-w-4 bear-h-4 bear-text-bear-600 dark:bear-text-bear-400" })
+                  e.value === a && /* @__PURE__ */ r(S, { className: "bear-w-4 bear-h-4 bear-shrink-0 bear-text-bear-600 dark:bear-text-bear-400" })
                 ]
               },
               e.value
             )) })
           }
         ),
-        l && /* @__PURE__ */ r("p", { className: "bear-text-sm bear-text-red-500", children: l })
+        s && /* @__PURE__ */ r("p", { className: "bear-text-sm bear-text-red-500", children: s })
       ]
     }
   );

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 o=require("react/jsx-runtime"),i=require("react"),n=require("../../utils/cn.cjs"),d=i.createContext(null),v=({children:a,value:t,defaultTab:r,variant:e="line",onChange:b,className:l,testId:x})=>{const[T,s]=i.useState(r),c=t!==void 0,g=c?t:T,y=u=>{c||s(u),b==null||b(u)};return o.jsx(d.Provider,{value:{activeTab:g,setActiveTab:y,variant:e},children:o.jsx("div",{className:n.cn("Bear-Tabs",l),"data-testid":x,children:a})})},h=({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 o.jsx("div",{role:"tablist",className:n.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})},p=({id:a,children:t,disabled:r=!1,icon:e})=>{const b=i.useContext(d);if(!b)throw new Error("Tab must be used within Tabs");const{activeTab:l,setActiveTab:x,variant:T}=b,s=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",g={line:n.cn("bear-border-b-2 bear--mb-px",s?"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:n.cn("bear-rounded-md",s?"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:n.cn("bear-rounded-t-lg bear-border bear-border-transparent",s?"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 o.jsxs("button",{role:"tab","aria-selected":s,disabled:r,onClick:()=>!r&&x(a),className:n.cn("Bear-Tabs__tab",s&&"Bear-Tabs__tab--active",c,g[T],r&&"Bear-Tabs__tab--disabled bear-opacity-50 bear-cursor-not-allowed"),children:[e&&o.jsx("span",{className:"Bear-Tabs__tab-icon",children:e}),o.jsx("span",{className:"Bear-Tabs__tab-label",children:t})]})},k=({tabId:a,children:t,className:r})=>{const e=i.useContext(d);if(!e)throw new Error("TabPanel must be used within Tabs");const{activeTab:b}=e;return b!==a?null:o.jsx("div",{role:"tabpanel",className:n.cn("Bear-Tabs__panel bear-py-4",r),children:t})};exports.Tab=p;exports.TabList=h;exports.TabPanel=k;exports.Tabs=v;
+"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>;