@forgedevstack/bear 1.2.0 → 1.2.1

package/dist/components/Stepper/Stepper.js

@@ -1,151 +1,198 @@
-import { jsx as r, jsxs as l, Fragment as Z } from "react/jsx-runtime";
-import { forwardRef as b } from "react";
+import { jsxs as l, Fragment as V, jsx as t } from "react/jsx-runtime";
+import { forwardRef as J, useState as re, useEffect as te, useMemo as j } from "react";
+import { useBearThemeOptional as ne } from "../../context/BearProvider.js";
+import { resolveMaxVisible as oe } from "../../utils/maxVisible.utils.js";
 import { cn as i } from "../../utils/cn.js";
-import { STEP_STATUS_CLASSES as I, STEP_LABEL_SIZES as z, STEP_LABEL_BASE as O, STEP_DESCRIPTION_CLASSES as g, STEP_WRAPPER_HORIZONTAL as H, STEP_WRAPPER_VERTICAL as W, STEPPER_HORIZONTAL_CLASSES as j, STEPPER_VERTICAL_CLASSES as D, STEPPER_BASE_CLASSES as V, STEP_INDICATOR_SIZES as F, STEP_INDICATOR_BASE as U, CONNECTOR_STATUS as L, CONNECTOR_HORIZONTAL as q, CONNECTOR_VERTICAL as G, CONNECTOR_BASE as J } from "./Stepper.const.js";
-import { Button as v } from "../Button/Button.js";
-const K = () => /* @__PURE__ */ r("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: /* @__PURE__ */ r("polyline", { points: "20 6 9 17 4 12" }) }), M = () => /* @__PURE__ */ l("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: [
-  /* @__PURE__ */ r("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-  /* @__PURE__ */ r("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-] }), Q = b(
+import { STEP_WRAPPER_HORIZONTAL as F, STEP_WRAPPER_HORIZONTAL_WINDOW as ie, STEP_WRAPPER_VERTICAL as le, STEPPER_HORIZONTAL_CLASSES as se, STEPPER_VERTICAL_CLASSES as ae, STEPPER_BASE_CLASSES as ce, STEP_STATUS_CLASSES as v, STEP_LABEL_SIZES as de, STEP_LABEL_BASE as U, STEP_DESCRIPTION_CLASSES as $, CONNECTOR_STATUS as q, CONNECTOR_HORIZONTAL as me, CONNECTOR_VERTICAL as he, CONNECTOR_BASE as fe, STEP_INDICATOR_SIZES as ue, STEP_INDICATOR_BASE as G } from "./Stepper.const.js";
+import { Button as O } from "../Button/Button.js";
+import { Dropdown as pe } from "../Dropdown/Dropdown.js";
+import { BearIcons as Ee } from "../Icon/index.js";
+const Se = () => /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: /* @__PURE__ */ t("polyline", { points: "20 6 9 17 4 12" }) }), _e = () => /* @__PURE__ */ l("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: [
+  /* @__PURE__ */ t("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ t("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+] }), Ne = J(
   ({
-    steps: s,
-    activeStep: o,
-    onStepClick: a,
-    orientation: N = "horizontal",
-    size: d = "md",
-    showNumbers: f = !0,
-    clickable: m = !1,
+    steps: o,
+    activeStep: d,
+    onStepClick: m,
+    orientation: C = "horizontal",
+    size: S = "md",
+    showNumbers: g = !0,
+    clickable: _ = !1,
     showConnectors: T = !0,
-    connectorStyle: _ = "solid",
-    alternativeLabel: S = !1,
-    completedIcon: p,
-    errorIcon: u,
-    testId: A,
-    className: R,
-    ...x
-  }, y) => {
-    const B = (e, t) => t.status ? t.status : e < o ? "completed" : e === o ? "active" : "pending", E = N === "horizontal", k = F[d], h = z[d], P = (e, t, n) => {
-      const C = I[n];
-      let c = null;
-      return e.icon ? c = e.icon : n === "completed" ? c = p || /* @__PURE__ */ r(K, {}) : n === "error" ? c = u || /* @__PURE__ */ r(M, {}) : f && (c = t + 1), /* @__PURE__ */ r(
+    connectorStyle: b = "solid",
+    alternativeLabel: h = !1,
+    completedIcon: w,
+    errorIcon: A,
+    maxVisibleSteps: u,
+    testId: I,
+    className: K,
+    ...Q
+  }, X) => {
+    const B = ne(), [y, Y] = re(() => typeof window < "u" ? window.innerWidth : 1200);
+    te(() => {
+      const e = () => Y(window.innerWidth);
+      return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+    }, []);
+    const p = j(
+      () => u == null ? void 0 : oe(u, { width: y, theme: B }),
+      [u, y, B]
+    ), L = (e, r) => r.status ? r.status : e < d ? "completed" : e === d ? "active" : "pending", f = C === "horizontal", H = ue[S], N = de[S], E = f && p != null && o.length > p, { visibleIndices: W, leftHidden: x, rightHidden: z } = j(() => {
+      if (!E || p == null)
+        return {
+          visibleIndices: o.map((c, R) => R),
+          leftHidden: [],
+          rightHidden: []
+        };
+      const e = p, r = Math.max(0, Math.min(d - Math.floor(e / 2), o.length - e)), n = Array.from({ length: e }, (c, R) => r + R), s = [], a = [];
+      for (let c = 0; c < r; c++) s.push(c);
+      for (let c = r + e; c < o.length; c++) a.push(c);
+      return { visibleIndices: n, leftHidden: s, rightHidden: a };
+    }, [E, p, o.length, d]), M = E ? ie : F, k = (e, r, n) => {
+      const s = v[n];
+      let a = null;
+      return e.icon ? a = e.icon : n === "completed" ? a = w || /* @__PURE__ */ t(Se, {}) : n === "error" ? a = A || /* @__PURE__ */ t(_e, {}) : g && (a = r + 1), /* @__PURE__ */ t(
         "div",
         {
           className: i(
-            U,
-            k,
-            C.indicator,
-            m && !e.disabled && "cursor-pointer hover:scale-105"
+            G,
+            H,
+            s.indicator,
+            _ && !e.disabled && "cursor-pointer hover:scale-105"
           ),
           onClick: () => {
-            m && !e.disabled && a && a(t);
+            _ && !e.disabled && m && m(r);
           },
-          children: c
+          children: a
         }
       );
-    }, w = (e) => {
-      if (!T || e === s.length - 1) return null;
-      const t = e < o;
-      return /* @__PURE__ */ r(
+    }, P = (e) => {
+      if (!T || e === o.length - 1) return null;
+      const r = e < d;
+      return /* @__PURE__ */ t(
         "div",
         {
           className: i(
-            J,
-            E ? q : G,
-            t ? L.completed : L.pending,
-            _ === "dashed" && "border-t-2 border-dashed bg-transparent"
+            fe,
+            f ? me : he,
+            r ? q.completed : q.pending,
+            b === "dashed" && "border-t-2 border-dashed bg-transparent"
           )
         }
       );
-    };
-    return /* @__PURE__ */ r(
-      "div",
-      {
-        ref: y,
-        className: i(
-          V,
-          E ? j : D,
-          R
-        ),
-        "data-testid": A,
-        ...x,
-        children: s.map((e, t) => {
-          const n = B(t, e), C = I[n];
-          return /* @__PURE__ */ l(
-            "div",
+    }, Z = (e, r) => {
+      const n = L(r, e), s = v[n];
+      return /* @__PURE__ */ l("div", { className: i("flex", h ? "flex-col items-center" : "items-center gap-3"), children: [
+        k(e, r, n),
+        /* @__PURE__ */ l("div", { className: i(h && "text-center mt-2"), children: [
+          /* @__PURE__ */ t("div", { className: i(U, N.label, s.label), children: e.label }),
+          e.description && /* @__PURE__ */ t("div", { className: i($, N.description), children: e.description })
+        ] })
+      ] });
+    }, ee = (e, r) => {
+      const n = L(r, e), s = v[n];
+      return /* @__PURE__ */ l(V, { children: [
+        /* @__PURE__ */ t("div", { className: "flex-shrink-0 mr-4", children: k(e, r, n) }),
+        /* @__PURE__ */ l("div", { className: "flex-1 pt-0.5", children: [
+          /* @__PURE__ */ t("div", { className: i(U, N.label, s.label), children: e.label }),
+          e.description && /* @__PURE__ */ t("div", { className: i($, N.description), children: e.description }),
+          e.content && n === "active" && /* @__PURE__ */ t("div", { className: "mt-4", children: e.content })
+        ] })
+      ] });
+    }, D = (e, r) => /* @__PURE__ */ t("div", { className: i("Bear-Stepper__step", "Bear-Stepper__overflow", M), children: /* @__PURE__ */ l("div", { className: i("flex", h ? "flex-col items-center" : "items-center gap-3"), children: [
+      /* @__PURE__ */ t(
+        pe,
+        {
+          placement: "bottom-start",
+          closeOnSelect: !0,
+          trigger: /* @__PURE__ */ t(
+            "button",
             {
+              type: "button",
               className: i(
-                "Bear-Stepper__step",
-                E ? H : W
+                G,
+                H,
+                v.pending.indicator,
+                "bear-cursor-pointer bear-border-0"
               ),
-              children: [
-                E ? (
-                  // Horizontal layout
-                  /* @__PURE__ */ l("div", { className: i("flex", S ? "flex-col items-center" : "items-center gap-3"), children: [
-                    P(e, t, n),
-                    /* @__PURE__ */ l("div", { className: i(S && "text-center mt-2"), children: [
-                      /* @__PURE__ */ r("div", { className: i(O, h.label, C.label), children: e.label }),
-                      e.description && /* @__PURE__ */ r("div", { className: i(g, h.description), children: e.description })
-                    ] })
-                  ] })
-                ) : (
-                  // Vertical layout
-                  /* @__PURE__ */ l(Z, { children: [
-                    /* @__PURE__ */ r("div", { className: "flex-shrink-0 mr-4", children: P(e, t, n) }),
-                    /* @__PURE__ */ l("div", { className: "flex-1 pt-0.5", children: [
-                      /* @__PURE__ */ r("div", { className: i(O, h.label, C.label), children: e.label }),
-                      e.description && /* @__PURE__ */ r("div", { className: i(g, h.description), children: e.description }),
-                      e.content && n === "active" && /* @__PURE__ */ r("div", { className: "mt-4", children: e.content })
-                    ] })
-                  ] })
-                ),
-                w(t)
-              ]
-            },
-            t
-          );
-        })
+              "aria-label": r === "left" ? "Previous steps" : "More steps",
+              children: /* @__PURE__ */ t(Ee.MoreHorizIcon, { size: 16 })
+            }
+          ),
+          items: e.map((n) => ({
+            key: `step-${n}`,
+            label: o[n].label,
+            disabled: o[n].disabled,
+            onClick: () => {
+              o[n].disabled || m == null || m(n);
+            }
+          }))
+        }
+      ),
+      h && /* @__PURE__ */ t("div", { className: "text-center mt-2 bear-text-xs bear-text-gray-400", children: " " })
+    ] }) }, `overflow-${r}`);
+    return /* @__PURE__ */ l(
+      "div",
+      {
+        ref: X,
+        className: i(ce, f ? se : ae, K),
+        "data-testid": I,
+        ...Q,
+        children: [
+          f && !E && o.map((e, r) => /* @__PURE__ */ l("div", { className: i("Bear-Stepper__step", F), children: [
+            Z(e, r),
+            P(r)
+          ] }, r)),
+          f && E && /* @__PURE__ */ l(V, { children: [
+            x.length > 0 && D(x, "left"),
+            W.map((e, r) => {
+              const n = o[e], s = W[r + 1], a = s != null && s === e + 1;
+              return /* @__PURE__ */ l("div", { className: i("Bear-Stepper__step", M), children: [
+                Z(n, e),
+                a && P(e)
+              ] }, e);
+            }),
+            z.length > 0 && D(z, "right")
+          ] }),
+          !f && o.map((e, r) => /* @__PURE__ */ l("div", { className: i("Bear-Stepper__step", le), children: [
+            ee(e, r),
+            P(r)
+          ] }, r))
+        ]
       }
     );
   }
 );
-Q.displayName = "Stepper";
-const X = b(
+Ne.displayName = "Stepper";
+const ve = J(
   ({
-    activeStep: s,
-    totalSteps: o,
-    onPrev: a,
-    onNext: N,
-    onComplete: d,
-    disablePrev: f = !1,
-    disableNext: m = !1,
+    activeStep: o,
+    totalSteps: d,
+    onPrev: m,
+    onNext: C,
+    onComplete: S,
+    disablePrev: g = !1,
+    disableNext: _ = !1,
     prevLabel: T = "Previous",
-    nextLabel: _ = "Next",
-    completeLabel: S = "Complete",
-    showIndicator: p = !0
-  }, u) => {
-    const A = s === 0, R = s === o - 1;
-    return /* @__PURE__ */ l("div", { ref: u, className: "Bear-StepperControls flex items-center justify-between mt-6", children: [
-      /* @__PURE__ */ r(
-        v,
-        {
-          variant: "outline",
-          onClick: a,
-          disabled: A || f,
-          children: T
-        }
-      ),
-      p && /* @__PURE__ */ l("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+    nextLabel: b = "Next",
+    completeLabel: h = "Complete",
+    showIndicator: w = !0
+  }, A) => {
+    const u = o === 0, I = o === d - 1;
+    return /* @__PURE__ */ l("div", { ref: A, className: "Bear-StepperControls flex items-center justify-between mt-6", children: [
+      /* @__PURE__ */ t(O, { variant: "outline", onClick: m, disabled: u || g, children: T }),
+      w && /* @__PURE__ */ l("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
         "Step ",
-        s + 1,
+        o + 1,
         " of ",
-        o
+        d
       ] }),
-      R ? /* @__PURE__ */ r(v, { variant: "primary", onClick: d, children: S }) : /* @__PURE__ */ r(v, { variant: "primary", onClick: N, disabled: m, children: _ })
+      I ? /* @__PURE__ */ t(O, { variant: "primary", onClick: S, children: h }) : /* @__PURE__ */ t(O, { variant: "primary", onClick: C, disabled: _, children: b })
     ] });
   }
 );
-X.displayName = "StepperControls";
+ve.displayName = "StepperControls";
 export {
-  Q as Stepper,
-  X as StepperControls
+  Ne as Stepper,
+  ve as StepperControls
 };

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

@@ -1,4 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
+import { MaxVisibleInput } from '../../utils/maxVisible.utils';
 export type StepperOrientation = 'horizontal' | 'vertical';
 export type StepStatus = 'pending' | 'active' | 'completed' | 'error';
 export type StepperSize = 'sm' | 'md' | 'lg';
@@ -43,6 +44,8 @@ export interface StepperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onCh
     errorIcon?: ReactNode;
     /** Test ID */
     testId?: string;
+    /** When set on horizontal layout, show at most this many steps with ⋯ menus for the rest (breakpoint map supported). */
+    maxVisibleSteps?: MaxVisibleInput;
 }
 export interface StepperControlsProps {
     /** Current step */

package/dist/components/Tabs/TabList.cjs

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

package/dist/components/Tabs/TabList.js

@@ -1,69 +1,84 @@
-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;
+import { jsx as s, Fragment as N, jsxs as T } from "react/jsx-runtime";
+import { useContext as B, useState as L, useEffect as _, useMemo as A, Children as S, cloneElement as j, isValidElement as O } from "react";
+import { cn as E } from "../../utils/cn.js";
+import { useBearThemeOptional as R } from "../../context/BearProvider.js";
+import { resolveMaxVisible as V } from "../../utils/maxVisible.utils.js";
+import { Dropdown as W } from "../Dropdown/Dropdown.js";
+import { BearIcons as D } from "../Icon/index.js";
+import { TabsContext as F } from "./Tabs.js";
+function H(a) {
+  var l;
+  return O(a) && typeof a.type != "string" && ((l = a.props) == null ? void 0 : l.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(
+const X = ({ children: a, maxVisibleTabs: l, wrap: n = !1, className: M }) => {
+  const u = B(F);
+  if (!u) throw new Error("TabList must be used within Tabs");
+  const f = R(), [v, k] = L(() => typeof window < "u" ? window.innerWidth : 1200);
+  _(() => {
+    const e = () => k(window.innerWidth);
+    return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+  }, []);
+  const o = A(
+    () => V(l, { width: v, theme: f }),
+    [l, v, f]
+  ), { activeTab: i, setActiveTab: z, variant: t } = u, w = S.toArray(a).filter(H), b = w.map((e) => ({ id: e.props.id, label: e.props.children, disabled: e.props.disabled })), d = i ? [i, ...b.map((e) => e.id).filter((e) => e !== i)] : b.map((e) => e.id), x = o ?? d.length, I = d.slice(0, x), c = d.slice(x), m = c.includes(i), h = E(
     "Bear-Tabs__list",
     `Bear-Tabs__list--${t}`,
-    "bear-flex bear-gap-1",
-    v && "bear-flex-wrap",
+    o != null && !n && "bear-flex bear-w-full bear-min-w-0 bear-items-stretch",
+    (!o || n) && "bear-flex bear-gap-1",
+    n && "bear-flex-wrap",
+    !n && !o && "bear-gap-1",
     t === "line" && "bear-border-b",
     t === "pills" && "bear-p-1 bear-rounded-lg",
     t === "enclosed" && "bear-border-b",
-    y
-  ), C = {
+    M
+  ), y = {
     ...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)
-          };
-        })
-      }
-    )
+  }, g = /* @__PURE__ */ s(N, { children: o != null ? I.map((e) => {
+    const r = w.find((p) => p.props.id === e);
+    return r ? j(r, { key: r.props.id }) : null;
+  }) : a }), C = o != null && c.length > 0 ? /* @__PURE__ */ s("div", { className: "bear-flex bear-h-full bear-flex-shrink-0 bear-items-stretch", children: /* @__PURE__ */ s(
+    W,
+    {
+      placement: "bottom-end",
+      closeOnSelect: !0,
+      trigger: /* @__PURE__ */ s(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-haspopup": "listbox",
+          "aria-label": "More tabs",
+          className: E(
+            "bear-flex bear-h-full bear-items-center bear-gap-2 bear-px-3 bear-py-2 bear-text-sm bear-font-medium bear-transition-colors bear-border-0 bear-cursor-pointer",
+            t === "pills" && "bear-rounded-md",
+            m && "bear-shadow-sm",
+            !m && "hover:bear-bg-[var(--bear-bg-tertiary)] hover:bear-text-[var(--bear-text-primary)]"
+          ),
+          style: m ? { backgroundColor: "var(--bear-bg-primary)", color: "var(--bear-text-primary)" } : { color: "var(--bear-text-muted)" },
+          children: /* @__PURE__ */ s(D.MoreHorizIcon, { size: 18 })
+        }
+      ),
+      items: c.map((e) => {
+        const r = b.find((p) => p.id === e);
+        return {
+          key: e,
+          label: (r == null ? void 0 : r.label) ?? e,
+          disabled: r == null ? void 0 : r.disabled,
+          onClick: () => z(e)
+        };
+      })
+    }
+  ) }) : null;
+  return o != null && !n ? /* @__PURE__ */ T("div", { role: "tablist", className: h, style: y, children: [
+    /* @__PURE__ */ s("div", { className: "bear-flex bear-min-w-0 bear-flex-1 bear-items-center bear-gap-1 bear-overflow-x-auto bear-overflow-y-visible bear-flex-nowrap", children: g }),
+    C
+  ] }) : /* @__PURE__ */ T("div", { role: "tablist", className: h, style: y, children: [
+    g,
+    C
   ] });
 };
 export {
-  H as TabList
+  X as TabList
 };

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

@@ -1,4 +1,6 @@
 import { ReactNode } from 'react';
+import { MaxVisibleInput } from '../../utils/maxVisible.utils';
+export { type MaxVisibleByBreakpoint, type MaxVisibleInput } from '../../utils/maxVisible.utils';
 export interface TabsContextValue {
     activeTab: string;
     setActiveTab: (id: string) => void;
@@ -23,8 +25,8 @@ 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;
+    /** Max visible tabs before "…" dropdown. Number, or breakpoint map using theme.breakpoints (mobile < md, tablet md–lg, desktop ≥ lg). `custom` overrides all widths. */
+    maxVisibleTabs?: MaxVisibleInput;
     /** Allow tabs to wrap to next line (flex-wrap), no breakpoints */
     wrap?: boolean;
     /** Custom class name */

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

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

package/dist/components/TimePicker/components/TimePickerDialDropdown/TimePickerDialDropdown.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),n=require("../../../../utils/cn.cjs"),i=require("../../TimePicker.constants.cjs"),v=require("../../helpers/ClockFaceSvg.cjs"),m="bear-text-blue-600 dark:bear-text-blue-400 bear-font-bold bear-bg-blue-50 dark:bear-bg-blue-900/30 bear-rounded bear-px-1",_="bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-zinc-300 bear-cursor-pointer bear-px-1",D=({selectedHour:c,setSelectedHour:o,selectedMinute:d,setSelectedMinute:x,period:k,setPeriod:T,format:a,hours:S,minutes:h,timeValue:p,clearable:E,onChange:l,onConfirm:C,onClose:N,translations:P})=>{const[I,s]=u.useState("hour"),b={...i.TIMEPICKER_DEFAULT_TRANSLATIONS,...P},j=a==="12h"?c===12?12:c%12:c,y=d,g=j.toString().padStart(2,"0"),A=y.toString().padStart(2,"0"),M=a==="12h"?[...i.CLOCK_HOURS_12]:S,t=I==="hour",O=t?M:h,R=u.useCallback(r=>{t?(o(a==="12h"&&r===0?12:r),s("minute")):x(r)},[t,a,o,x]);return e.jsxs("div",{className:n.cn(i.TIMEPICKER_DROPDOWN_CLASSES,"Bear-TimePicker__dial bear-w-72"),children:[e.jsx("div",{className:"Bear-TimePicker__dial-title bear-text-center bear-uppercase bear-text-xs bear-text-gray-500 dark:bear-text-zinc-400 bear-mb-2",children:b.selectTime}),e.jsxs("div",{className:"Bear-TimePicker__dial-display bear-flex bear-items-center bear-justify-center bear-gap-1 bear-mb-4",children:[e.jsx("button",{type:"button",onClick:()=>s("hour"),className:n.cn("Bear-TimePicker__dial-hour-btn bear-text-2xl bear-font-bold bear-transition-colors bear-border-none bear-bg-transparent",t?m:_),"aria-label":b.hour,children:g}),e.jsx("span",{className:"bear-text-2xl bear-font-bold bear-text-gray-900 dark:bear-text-white",children:":"}),e.jsx("button",{type:"button",onClick:()=>s("minute"),className:n.cn("Bear-TimePicker__dial-minute-btn bear-text-2xl bear-font-bold bear-transition-colors bear-border-none bear-bg-transparent",t?_:m),"aria-label":b.minute,children:A}),a==="12h"&&e.jsx("div",{className:"Bear-TimePicker__dial-period bear-flex bear-flex-col bear-gap-0.5 bear-ml-2",children:["AM","PM"].map(r=>e.jsx("button",{onClick:()=>T(r),className:n.cn("Bear-TimePicker__dial-period-btn bear-px-2 bear-py-0.5 bear-rounded bear-text-sm bear-transition-colors",k===r?"bear-text-blue-600 dark:bear-text-blue-400 bear-font-medium":"bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-zinc-400"),children:r},r))})]}),e.jsx("div",{className:"Bear-TimePicker__dial-face bear-relative bear-w-48 bear-h-48 bear-mx-auto bear-mb-4",children:e.jsx(v.ClockFaceSvg,{values:O,isHourMode:t,format:a,selectedHour:c,selectedMinute:d,onSelect:R})}),e.jsxs("div",{className:i.TIMEPICKER_FOOTER_CLASSES,children:[E&&p&&e.jsx("button",{onClick:()=>{l==null||l(null),N()},className:i.TIMEPICKER_CLEAR_BUTTON_CLASSES,children:b.cancel}),e.jsx("button",{onClick:C,className:i.TIMEPICKER_CONFIRM_BUTTON_CLASSES,children:b.ok})]})]})};exports.TimePickerDialDropdown=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),k=require("react"),b=require("../../../../utils/cn.cjs"),i=require("../../TimePicker.constants.cjs"),v=require("../../helpers/ClockFaceSvg.cjs"),m="bear-text-pink-600 dark:bear-text-pink-400 bear-font-bold bear-bg-pink-50 dark:bear-bg-pink-900/30 bear-rounded bear-px-1",u="bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-zinc-300 bear-cursor-pointer bear-px-1",D=({selectedHour:c,setSelectedHour:l,selectedMinute:d,setSelectedMinute:x,period:_,setPeriod:p,format:a,hours:T,minutes:S,timeValue:h,clearable:E,onChange:s,onConfirm:C,onClose:N,translations:P})=>{const[I,o]=k.useState("hour"),n={...i.TIMEPICKER_DEFAULT_TRANSLATIONS,...P},j=a==="12h"?c===12?12:c%12:c,y=d,g=j.toString().padStart(2,"0"),A=y.toString().padStart(2,"0"),M=a==="12h"?[...i.CLOCK_HOURS_12]:T,t=I==="hour",O=t?M:S,R=k.useCallback(r=>{t?(l(a==="12h"&&r===0?12:r),o("minute")):x(r)},[t,a,l,x]);return e.jsxs("div",{className:b.cn(i.TIMEPICKER_DROPDOWN_CLASSES,"Bear-TimePicker__dial bear-w-72"),children:[e.jsx("div",{className:"Bear-TimePicker__dial-title bear-text-center bear-uppercase bear-text-xs bear-text-gray-500 dark:bear-text-zinc-400 bear-mb-2",children:n.selectTime}),e.jsxs("div",{className:"Bear-TimePicker__dial-display bear-flex bear-items-center bear-justify-center bear-gap-1 bear-mb-4",children:[e.jsx("button",{type:"button",onClick:()=>o("hour"),className:b.cn("Bear-TimePicker__dial-hour-btn bear-text-2xl bear-font-bold bear-transition-colors bear-border-none bear-bg-transparent",t?m:u),"aria-label":n.hour,children:g}),e.jsx("span",{className:"bear-text-2xl bear-font-bold bear-text-gray-900 dark:bear-text-white",children:":"}),e.jsx("button",{type:"button",onClick:()=>o("minute"),className:b.cn("Bear-TimePicker__dial-minute-btn bear-text-2xl bear-font-bold bear-transition-colors bear-border-none bear-bg-transparent",t?u:m),"aria-label":n.minute,children:A}),a==="12h"&&e.jsx("div",{className:"Bear-TimePicker__dial-period bear-flex bear-flex-col bear-gap-0.5 bear-ml-2",children:["AM","PM"].map(r=>e.jsx("button",{onClick:()=>p(r),className:b.cn("Bear-TimePicker__dial-period-btn bear-px-2 bear-py-0.5 bear-rounded bear-text-sm bear-transition-colors",_===r?"bear-text-pink-600 dark:bear-text-pink-400 bear-font-medium":"bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-zinc-400"),children:r},r))})]}),e.jsx("div",{className:"Bear-TimePicker__dial-face bear-relative bear-w-48 bear-h-48 bear-mx-auto bear-mb-4",children:e.jsx(v.ClockFaceSvg,{values:O,isHourMode:t,format:a,selectedHour:c,selectedMinute:d,onSelect:R})}),e.jsxs("div",{className:i.TIMEPICKER_FOOTER_CLASSES,children:[E&&h&&e.jsx("button",{onClick:()=>{s==null||s(null),N()},className:i.TIMEPICKER_CLEAR_BUTTON_CLASSES,children:n.cancel}),e.jsx("button",{onClick:C,className:i.TIMEPICKER_CONFIRM_BUTTON_CLASSES,children:n.ok})]})]})};exports.TimePickerDialDropdown=D;