@forgedevstack/bear 1.2.0 → 1.2.2

package/dist/components/Stepper/Stepper.js

@@ -1,151 +1,210 @@
-import { jsx as r, jsxs as l, Fragment as Z } from "react/jsx-runtime";
-import { forwardRef as b } from "react";
-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 { jsxs as i, Fragment as f, jsx as t } from "react/jsx-runtime";
+import D, { forwardRef as oe, useState as ie, useEffect as le, useMemo as U } from "react";
+import { useBearThemeOptional as se } from "../../context/BearProvider.js";
+import { resolveMaxVisible as ae } from "../../utils/maxVisible.utils.js";
+import { cn as s } from "../../utils/cn.js";
+import { Typography as V } from "../Typography/Typography.js";
+import { Dropdown as ce } from "../Dropdown/Dropdown.js";
+import { BearIcons as de } from "../Icon/index.js";
+import { STEP_WRAPPER_VERTICAL as Ee, STEPPER_HORIZONTAL_CLASSES as he, STEPPER_VERTICAL_CLASSES as _e, STEPPER_BASE_CLASSES as me, DEFAULT_ORIENTATION as Te, DEFAULT_SIZE as fe, DEFAULT_SHOW_NUMBERS as Se, DEFAULT_CLICKABLE as Ie, DEFAULT_SHOW_CONNECTORS as Oe, DEFAULT_CONNECTOR_STYLE as Ce, DEFAULT_ALTERNATIVE_LABEL as Ne, CONNECTOR_STATUS as S, CONNECTOR_VERTICAL as ue, CONNECTOR_BASE as Ae, OVERFLOW_LEFT_LABEL as Le, OVERFLOW_RIGHT_LABEL as ge, STEP_STATUS_CLASSES as u, STEP_INDICATOR_SIZES as Re, STEP_INDICATOR_BASE as M, STEP_LABEL_SIZES as pe, STEP_LABEL_BASE as ve, STEP_DESCRIPTION_CLASSES as we, ERROR_ICON_VIEWBOX as be, ERROR_ICON_SIZE as z, CHECK_ICON_VIEWBOX as Be, CHECK_ICON_SIZE as Z, CHECK_ICON_POINTS as Pe } from "./Stepper.const.js";
+import { resolveStepStatus as K, resolveIndicatorContent as ye } from "./Stepper.utils.js";
+const He = 1200, We = 16, Fe = 640, k = 3, De = () => /* @__PURE__ */ t("svg", { width: Z, height: Z, viewBox: Be, fill: "none", stroke: "currentColor", strokeWidth: "3", children: /* @__PURE__ */ t("polyline", { points: Pe }) }), Ue = () => /* @__PURE__ */ i("svg", { width: z, height: z, viewBox: be, 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" })
+] }), Ve = oe(
   ({
-    steps: s,
-    activeStep: o,
-    onStepClick: a,
-    orientation: N = "horizontal",
-    size: d = "md",
-    showNumbers: f = !0,
-    clickable: m = !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(
+    steps: o,
+    activeStep: E,
+    onStepClick: h,
+    orientation: X = Te,
+    size: A = fe,
+    showNumbers: j = Se,
+    clickable: L = Ie,
+    showConnectors: x = Oe,
+    connectorStyle: g = Ce,
+    alternativeLabel: R = Ne,
+    completedIcon: $,
+    errorIcon: G,
+    labelTypographyProps: Y,
+    descriptionTypographyProps: q,
+    maxVisibleSteps: I,
+    testId: J,
+    className: Q,
+    ...ee
+  }, re) => {
+    const p = se(), [O, ne] = ie(() => typeof window < "u" ? window.innerWidth : He);
+    le(() => {
+      const e = () => ne(window.innerWidth);
+      return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+    }, []);
+    const _ = U(() => {
+      if (I != null)
+        return ae(I, { width: O, theme: p });
+      if (O < Fe && o.length > k)
+        return k;
+    }, [I, O, p, o.length]), d = X === "horizontal", v = Re[A], w = pe[A], m = d && _ != null && o.length > _, { visibleIndices: b, leftHidden: B, rightHidden: C } = U(() => {
+      if (!m || _ == null)
+        return {
+          visibleIndices: o.map((c, N) => N),
+          leftHidden: [],
+          rightHidden: []
+        };
+      const e = _, r = Math.floor(e / 2), n = Math.max(0, Math.min(E - r, o.length - e)), l = Array.from({ length: e }, (c, N) => n + N), a = [], F = [];
+      for (let c = 0; c < n; c++) a.push(c);
+      for (let c = n + e; c < o.length; c++) F.push(c);
+      return { visibleIndices: l, leftHidden: a, rightHidden: F };
+    }, [m, _, o, E]), P = (e, r, n) => {
+      const l = u[n], a = ye(
+        e,
+        r,
+        n,
+        j,
+        $,
+        G,
+        /* @__PURE__ */ t(De, {}),
+        /* @__PURE__ */ t(Ue, {})
+      );
+      return /* @__PURE__ */ t(
         "div",
         {
-          className: i(
-            U,
-            k,
-            C.indicator,
-            m && !e.disabled && "cursor-pointer hover:scale-105"
+          className: s(
+            M,
+            v,
+            l.indicator,
+            L && !e.disabled && "cursor-pointer hover:scale-105"
           ),
           onClick: () => {
-            m && !e.disabled && a && a(t);
+            L && !e.disabled && h && h(r);
           },
-          children: c
+          children: a
         }
       );
-    }, w = (e) => {
-      if (!T || e === s.length - 1) return null;
-      const t = e < o;
-      return /* @__PURE__ */ r(
+    }, T = (e, r) => {
+      if (!x || r) return null;
+      const n = e < E;
+      return d ? /* @__PURE__ */ t(
+        "div",
+        {
+          className: s(
+            "Bear-Stepper__connector flex-1 self-center mx-1",
+            "h-0.5 min-w-[12px] transition-colors",
+            n ? S.completed : S.pending,
+            g === "dashed" && "border-t-2 border-dashed bg-transparent"
+          )
+        }
+      ) : /* @__PURE__ */ t(
         "div",
         {
-          className: i(
-            J,
-            E ? q : G,
-            t ? L.completed : L.pending,
-            _ === "dashed" && "border-t-2 border-dashed bg-transparent"
+          className: s(
+            Ae,
+            ue,
+            n ? S.completed : S.pending,
+            g === "dashed" && "border-t-2 border-dashed bg-transparent"
           )
         }
       );
-    };
-    return /* @__PURE__ */ r(
-      "div",
-      {
-        ref: y,
-        className: i(
+    }, y = (e, r) => {
+      const n = u[r], l = { ...Y, ...e.labelTypographyProps }, a = { ...q, ...e.descriptionTypographyProps };
+      return /* @__PURE__ */ i(f, { children: [
+        /* @__PURE__ */ t(
           V,
-          E ? j : D,
-          R
+          {
+            variant: "body2",
+            ...l,
+            className: s(ve, w.label, n.label, l == null ? void 0 : l.className),
+            children: e.label
+          }
+        ),
+        e.description && /* @__PURE__ */ t(
+          V,
+          {
+            variant: "caption",
+            ...a,
+            className: s(we, w.description, a == null ? void 0 : a.className),
+            children: e.description
+          }
+        )
+      ] });
+    }, H = (e, r) => {
+      const n = K(e, r, E);
+      return /* @__PURE__ */ i("div", { className: s("Bear-Stepper__content flex shrink-0", R ? "flex-col items-center" : "items-center gap-2"), children: [
+        P(e, r, n),
+        /* @__PURE__ */ t("div", { className: s(R && "text-center mt-2", "whitespace-nowrap"), children: y(e, n) })
+      ] });
+    }, te = (e, r) => {
+      const n = K(e, r, E);
+      return /* @__PURE__ */ i(f, { children: [
+        /* @__PURE__ */ t("div", { className: "flex-shrink-0 mr-4", children: P(e, r, n) }),
+        /* @__PURE__ */ i("div", { className: "flex-1 pt-0.5", children: [
+          y(e, n),
+          e.content && n === "active" && /* @__PURE__ */ t("div", { className: "mt-4", children: e.content })
+        ] })
+      ] });
+    }, W = (e, r) => /* @__PURE__ */ t("div", { className: "Bear-Stepper__overflow shrink-0", children: /* @__PURE__ */ t(
+      ce,
+      {
+        placement: "bottom-start",
+        closeOnSelect: !0,
+        trigger: /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: s(
+              M,
+              v,
+              u.pending.indicator,
+              "bear-cursor-pointer bear-border-0"
+            ),
+            "aria-label": r === "left" ? Le : ge,
+            children: /* @__PURE__ */ t(de.MoreHorizIcon, { size: We })
+          }
         ),
-        "data-testid": A,
-        ...x,
-        children: s.map((e, t) => {
-          const n = B(t, e), C = I[n];
-          return /* @__PURE__ */ l(
-            "div",
-            {
-              className: i(
-                "Bear-Stepper__step",
-                E ? H : W
-              ),
-              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
-          );
-        })
+        items: e.map((n) => ({
+          key: `step-${n}`,
+          label: o[n].label,
+          disabled: o[n].disabled,
+          onClick: () => {
+            o[n].disabled || h == null || h(n);
+          }
+        }))
+      }
+    ) }, `overflow-${r}`);
+    return /* @__PURE__ */ i(
+      "div",
+      {
+        ref: re,
+        className: s(me, d ? he : _e, Q),
+        "data-testid": J,
+        ...ee,
+        children: [
+          d && !m && o.map((e, r) => /* @__PURE__ */ i(D.Fragment, { children: [
+            H(e, r),
+            T(r, r === o.length - 1)
+          ] }, r)),
+          d && m && /* @__PURE__ */ i(f, { children: [
+            B.length > 0 && /* @__PURE__ */ i(f, { children: [
+              W(B, "left"),
+              T(-1, !1)
+            ] }),
+            b.map((e, r) => {
+              const n = o[e], l = r === b.length - 1 && C.length === 0;
+              return /* @__PURE__ */ i(D.Fragment, { children: [
+                H(n, e),
+                T(e, l)
+              ] }, e);
+            }),
+            C.length > 0 && W(C, "right")
+          ] }),
+          !d && o.map((e, r) => /* @__PURE__ */ i("div", { className: s("Bear-Stepper__step", Ee), children: [
+            te(e, r),
+            T(r, r === o.length - 1)
+          ] }, r))
+        ]
       }
     );
   }
 );
-Q.displayName = "Stepper";
-const X = b(
-  ({
-    activeStep: s,
-    totalSteps: o,
-    onPrev: a,
-    onNext: N,
-    onComplete: d,
-    disablePrev: f = !1,
-    disableNext: m = !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: [
-        "Step ",
-        s + 1,
-        " of ",
-        o
-      ] }),
-      R ? /* @__PURE__ */ r(v, { variant: "primary", onClick: d, children: S }) : /* @__PURE__ */ r(v, { variant: "primary", onClick: N, disabled: m, children: _ })
-    ] });
-  }
-);
-X.displayName = "StepperControls";
+Ve.displayName = "Stepper";
 export {
-  Q as Stepper,
-  X as StepperControls
+  Ve as Stepper
 };

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

@@ -1,4 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
+import { TypographyProps } from '../Typography/Typography.types';
+import { MaxVisibleInput } from '../../utils/maxVisible.utils';
 export type StepperOrientation = 'horizontal' | 'vertical';
 export type StepStatus = 'pending' | 'active' | 'completed' | 'error';
 export type StepperSize = 'sm' | 'md' | 'lg';
@@ -15,6 +17,10 @@ export interface Step {
     disabled?: boolean;
     /** Optional content for this step */
     content?: ReactNode;
+    /** Per-step Typography props for the label */
+    labelTypographyProps?: Partial<TypographyProps>;
+    /** Per-step Typography props for the description */
+    descriptionTypographyProps?: Partial<TypographyProps>;
 }
 export interface StepperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** Array of steps */
@@ -41,8 +47,14 @@ export interface StepperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onCh
     completedIcon?: ReactNode;
     /** Custom error icon */
     errorIcon?: ReactNode;
+    /** Typography props applied to all step labels (overridden by per-step labelTypographyProps) */
+    labelTypographyProps?: Partial<TypographyProps>;
+    /** Typography props applied to all step descriptions (overridden by per-step descriptionTypographyProps) */
+    descriptionTypographyProps?: Partial<TypographyProps>;
     /** Test ID */
     testId?: string;
+    /** When set on horizontal layout, show at most this many steps with dropdown menus for the rest (breakpoint map supported). */
+    maxVisibleSteps?: MaxVisibleInput;
 }
 export interface StepperControlsProps {
     /** Current step */
@@ -67,4 +79,6 @@ export interface StepperControlsProps {
     completeLabel?: string;
     /** Show step indicator */
     showIndicator?: boolean;
+    /** Step indicator format function (receives activeStep + 1 and totalSteps) */
+    indicatorFormat?: (current: number, total: number) => string;
 }

package/dist/components/Stepper/Stepper.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./Stepper.const.cjs");function l(e,t,r){return e.status?e.status:t<r?"completed":t===r?"active":"pending"}function a(e,t,r,n,o,u,c,i){if(e.icon)return e.icon;switch(r){case"completed":return o??c;case"error":return u??i;default:return n?t+s.STEP_NUMBER_OFFSET:null}}exports.resolveIndicatorContent=a;exports.resolveStepStatus=l;

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

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { Step, StepStatus } from './Stepper.types';
+/**
+ * Derives the visual status for a step based on its explicit status or its
+ * position relative to the active step.
+ */
+export declare function resolveStepStatus(step: Step, index: number, activeStep: number): StepStatus;
+/**
+ * Determines the indicator content for a step circle based on status, custom
+ * icons, and the showNumbers flag.
+ */
+export declare function resolveIndicatorContent(step: Step, index: number, status: StepStatus, showNumbers: boolean, completedIcon: ReactNode | undefined, errorIcon: ReactNode | undefined, defaultCompletedIcon: ReactNode, defaultErrorIcon: ReactNode): ReactNode;

package/dist/components/Stepper/Stepper.utils.js

@@ -0,0 +1,19 @@
+import { STEP_NUMBER_OFFSET as f } from "./Stepper.const.js";
+function a(r, t, e) {
+  return r.status ? r.status : t < e ? "completed" : t === e ? "active" : "pending";
+}
+function l(r, t, e, n, u, o, i, c) {
+  if (r.icon) return r.icon;
+  switch (e) {
+    case "completed":
+      return u ?? i;
+    case "error":
+      return o ?? c;
+    default:
+      return n ? t + f : null;
+  }
+}
+export {
+  l as resolveIndicatorContent,
+  a as resolveStepStatus
+};

package/dist/components/Stepper/components/StepperControls.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),A=require("react"),n=require("../../Button/Button.cjs"),F=require("../../Typography/Typography.cjs"),e=require("../Stepper.const.cjs"),o=A.forwardRef(({activeStep:t,totalSteps:s,onPrev:i,onNext:a,onComplete:l,disablePrev:c=!1,disableNext:T=!1,prevLabel:p=e.DEFAULT_PREV_LABEL,nextLabel:u=e.DEFAULT_NEXT_LABEL,completeLabel:E=e.DEFAULT_COMPLETE_LABEL,showIndicator:d=!0,indicatorFormat:_=e.DEFAULT_INDICATOR_FORMAT},L)=>{const S=t===e.FIRST_STEP_INDEX,y=t===s-e.LAST_STEP_OFFSET;return r.jsxs("div",{ref:L,className:"Bear-StepperControls flex items-center justify-between mt-6",children:[r.jsx(n.Button,{variant:"outline",onClick:i,disabled:S||c,children:p}),d&&r.jsx(F.Typography,{variant:"body2",className:"text-gray-500 dark:text-gray-400",children:_(t+e.LAST_STEP_OFFSET,s)}),y?r.jsx(n.Button,{variant:"primary",onClick:l,children:E}):r.jsx(n.Button,{variant:"primary",onClick:a,disabled:T,children:u})]})});o.displayName="StepperControls";exports.StepperControls=o;

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

@@ -0,0 +1,2 @@
+import { StepperControlsProps } from '../Stepper.types';
+export declare const StepperControls: import('react').ForwardRefExoticComponent<StepperControlsProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Stepper/components/StepperControls.js

@@ -0,0 +1,32 @@
+import { jsxs as A, jsx as r } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { Button as t } from "../../Button/Button.js";
+import { Typography as F } from "../../Typography/Typography.js";
+import { DEFAULT_PREV_LABEL as C, DEFAULT_INDICATOR_FORMAT as S, LAST_STEP_OFFSET as o, DEFAULT_COMPLETE_LABEL as h, DEFAULT_NEXT_LABEL as x, FIRST_STEP_INDEX as D } from "../Stepper.const.js";
+const N = y(
+  ({
+    activeStep: e,
+    totalSteps: i,
+    onPrev: a,
+    onNext: n,
+    onComplete: s,
+    disablePrev: l = !1,
+    disableNext: m = !1,
+    prevLabel: p = C,
+    nextLabel: E = x,
+    completeLabel: d = h,
+    showIndicator: T = !0,
+    indicatorFormat: L = S
+  }, c) => {
+    const _ = e === D, f = e === i - o;
+    return /* @__PURE__ */ A("div", { ref: c, className: "Bear-StepperControls flex items-center justify-between mt-6", children: [
+      /* @__PURE__ */ r(t, { variant: "outline", onClick: a, disabled: _ || l, children: p }),
+      T && /* @__PURE__ */ r(F, { variant: "body2", className: "text-gray-500 dark:text-gray-400", children: L(e + o, i) }),
+      f ? /* @__PURE__ */ r(t, { variant: "primary", onClick: s, children: d }) : /* @__PURE__ */ r(t, { variant: "primary", onClick: n, disabled: m, children: E })
+    ] });
+  }
+);
+N.displayName = "StepperControls";
+export {
+  N as StepperControls
+};

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

@@ -1,2 +1,3 @@
-export { Stepper, StepperControls } from './Stepper';
+export { Stepper } from './Stepper';
+export { StepperControls } from './components/StepperControls';
 export type { StepperProps, StepperControlsProps, Step, StepStatus, StepperOrientation, StepperSize } from './Stepper.types';

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
 };