@forgedevstack/bear 1.2.1 → 1.2.2

package/dist/components/Stepper/Stepper.js

@@ -1,198 +1,210 @@
-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_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: [
+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" })
-] }), Ne = J(
+] }), Ve = oe(
   ({
     steps: o,
-    activeStep: d,
-    onStepClick: m,
-    orientation: C = "horizontal",
-    size: S = "md",
-    showNumbers: g = !0,
-    clickable: _ = !1,
-    showConnectors: T = !0,
-    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);
+    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 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)
+    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, R) => R),
+          visibleIndices: o.map((c, N) => N),
           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(
+      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(
-            G,
-            H,
-            s.indicator,
-            _ && !e.disabled && "cursor-pointer hover:scale-105"
+          className: s(
+            M,
+            v,
+            l.indicator,
+            L && !e.disabled && "cursor-pointer hover:scale-105"
           ),
           onClick: () => {
-            _ && !e.disabled && m && m(r);
+            L && !e.disabled && h && h(r);
           },
           children: a
         }
       );
-    }, P = (e) => {
-      if (!T || e === o.length - 1) return null;
-      const r = e < d;
-      return /* @__PURE__ */ t(
+    }, T = (e, r) => {
+      if (!x || r) return null;
+      const n = e < E;
+      return d ? /* @__PURE__ */ t(
         "div",
         {
-          className: i(
-            fe,
-            f ? me : he,
-            r ? q.completed : q.pending,
-            b === "dashed" && "border-t-2 border-dashed bg-transparent"
+          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: s(
+            Ae,
+            ue,
+            n ? S.completed : S.pending,
+            g === "dashed" && "border-t-2 border-dashed bg-transparent"
           )
         }
       );
-    }, 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 })
-        ] })
+    }, y = (e, r) => {
+      const n = u[r], l = { ...Y, ...e.labelTypographyProps }, a = { ...q, ...e.descriptionTypographyProps };
+      return /* @__PURE__ */ i(f, { children: [
+        /* @__PURE__ */ t(
+          V,
+          {
+            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) })
       ] });
-    }, 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 }),
+    }, 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 })
         ] })
       ] });
-    }, 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(
-                G,
-                H,
-                v.pending.indicator,
-                "bear-cursor-pointer bear-border-0"
-              ),
-              "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(
+    }, 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 })
+          }
+        ),
+        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: X,
-        className: i(ce, f ? se : ae, K),
-        "data-testid": I,
-        ...Q,
+        ref: re,
+        className: s(me, d ? he : _e, Q),
+        "data-testid": J,
+        ...ee,
         children: [
-          f && !E && o.map((e, r) => /* @__PURE__ */ l("div", { className: i("Bear-Stepper__step", F), children: [
-            Z(e, r),
-            P(r)
+          d && !m && o.map((e, r) => /* @__PURE__ */ i(D.Fragment, { children: [
+            H(e, r),
+            T(r, r === o.length - 1)
           ] }, 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)
+          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);
             }),
-            z.length > 0 && D(z, "right")
+            C.length > 0 && W(C, "right")
           ] }),
-          !f && o.map((e, r) => /* @__PURE__ */ l("div", { className: i("Bear-Stepper__step", le), children: [
-            ee(e, r),
-            P(r)
+          !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))
         ]
       }
     );
   }
 );
-Ne.displayName = "Stepper";
-const ve = J(
-  ({
-    activeStep: o,
-    totalSteps: d,
-    onPrev: m,
-    onNext: C,
-    onComplete: S,
-    disablePrev: g = !1,
-    disableNext: _ = !1,
-    prevLabel: T = "Previous",
-    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 ",
-        o + 1,
-        " of ",
-        d
-      ] }),
-      I ? /* @__PURE__ */ t(O, { variant: "primary", onClick: S, children: h }) : /* @__PURE__ */ t(O, { variant: "primary", onClick: C, disabled: _, children: b })
-    ] });
-  }
-);
-ve.displayName = "StepperControls";
+Ve.displayName = "Stepper";
 export {
-  Ne as Stepper,
-  ve as StepperControls
+  Ve as Stepper
 };

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

@@ -1,4 +1,5 @@
 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';
@@ -16,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 */
@@ -42,9 +47,13 @@ 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 ⋯ menus for the rest (breakpoint map supported). */
+    /** 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 {
@@ -70,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/TagCloud/TagCloud.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),M=require("react"),x=require("../../utils/cn.cjs"),o=require("./TagCloud.const.cjs"),O=({tags:n,minFontSize:u=o.DEFAULT_MIN_FONT,maxFontSize:p=o.DEFAULT_MAX_FONT,colors:h=o.DEFAULT_COLORS,layout:j="flow",mobileCompact:C=!1,onTagClick:s,testId:v,className:y,..._})=>{const{minVal:a,maxVal:f}=M.useMemo(()=>{let e=1/0,t=-1/0;for(const r of n)r.value<e&&(e=r.value),r.value>t&&(t=r.value);return{minVal:e,maxVal:t}},[n]),L=e=>f===a?(u+p)/2:u+(e-a)/(f-a)*(p-u),b=e=>.5+(e-a)/(f-a||1)*.5,I=j==="circle",T=(e,t,r)=>{const l=L(e.value),c=e.color??h[t%h.length],d=b(e.value),m=e.href?"a":"span";return i.jsx(m,{className:x.cn("Bear-TagCloud__tag inline-block transition-all duration-200 hover:scale-110 hover:opacity-100",(s||e.href)&&"cursor-pointer"),style:{fontSize:l,color:c,opacity:d,lineHeight:1.2,...r},onClick:()=>s==null?void 0:s(e),...e.href?{href:e.href,target:"_blank",rel:"noopener noreferrer"}:{},children:e.text},`${e.text}-${t}`)};if(I){const e=o.FULL_CIRCLE_DEG/n.length;return i.jsx("div",{className:x.cn("Bear-TagCloud Bear-TagCloud--circle relative",y),style:{width:"100%",paddingBottom:"100%"},"data-testid":v,..._,children:i.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:n.map((t,r)=>{const l=(e*r-90)*(Math.PI/180),c=o.CIRCLE_RADIUS_RATIO,d=50+c*Math.cos(l),m=50+c*Math.sin(l);return T(t,r,{position:"absolute",left:`${d}%`,top:`${m}%`,transform:"translate(-50%, -50%)"})})})})}return i.jsx("div",{className:x.cn("Bear-TagCloud flex flex-wrap items-center justify-center gap-2 p-4",C&&"max-sm:flex-nowrap max-sm:overflow-x-auto max-sm:justify-start max-sm:gap-3 max-sm:pb-2",y),"data-testid":v,..._,children:n.map((e,t)=>T(e,t))})};exports.TagCloud=O;

package/dist/components/TagCloud/TagCloud.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=12,L=40,T=["#ec4899","#8b5cf6","#3b82f6","#10b981","#f59e0b","#ef4444"],A=38,E=360;exports.CIRCLE_RADIUS_RATIO=A;exports.DEFAULT_COLORS=T;exports.DEFAULT_MAX_FONT=L;exports.DEFAULT_MIN_FONT=_;exports.FULL_CIRCLE_DEG=E;

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

@@ -0,0 +1,5 @@
+export declare const DEFAULT_MIN_FONT = 12;
+export declare const DEFAULT_MAX_FONT = 40;
+export declare const DEFAULT_COLORS: string[];
+export declare const CIRCLE_RADIUS_RATIO = 38;
+export declare const FULL_CIRCLE_DEG = 360;

package/dist/components/TagCloud/TagCloud.const.js

@@ -0,0 +1,8 @@
+const _ = 12, L = 40, c = ["#ec4899", "#8b5cf6", "#3b82f6", "#10b981", "#f59e0b", "#ef4444"], o = 38, t = 360;
+export {
+  o as CIRCLE_RADIUS_RATIO,
+  c as DEFAULT_COLORS,
+  L as DEFAULT_MAX_FONT,
+  _ as DEFAULT_MIN_FONT,
+  t as FULL_CIRCLE_DEG
+};

package/dist/components/TagCloud/TagCloud.d.ts

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

package/dist/components/TagCloud/TagCloud.js

@@ -0,0 +1,76 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useMemo as E } from "react";
+import { cn as p } from "../../utils/cn.js";
+import { FULL_CIRCLE_DEG as M, DEFAULT_MIN_FONT as N, DEFAULT_MAX_FONT as O, DEFAULT_COLORS as b, CIRCLE_RADIUS_RATIO as w } from "./TagCloud.const.js";
+const j = ({
+  tags: n,
+  minFontSize: c = N,
+  maxFontSize: d = O,
+  colors: h = b,
+  layout: L = "flow",
+  mobileCompact: T = !1,
+  onTagClick: a,
+  testId: x,
+  className: v,
+  ..._
+}) => {
+  const { minVal: o, maxVal: f } = E(() => {
+    let e = 1 / 0, t = -1 / 0;
+    for (const r of n)
+      r.value < e && (e = r.value), r.value > t && (t = r.value);
+    return { minVal: e, maxVal: t };
+  }, [n]), C = (e) => f === o ? (c + d) / 2 : c + (e - o) / (f - o) * (d - c), I = (e) => 0.5 + (e - o) / (f - o || 1) * 0.5, A = L === "circle", y = (e, t, r) => {
+    const l = C(e.value), s = e.color ?? h[t % h.length], m = I(e.value), u = e.href ? "a" : "span";
+    return /* @__PURE__ */ i(
+      u,
+      {
+        className: p(
+          "Bear-TagCloud__tag inline-block transition-all duration-200 hover:scale-110 hover:opacity-100",
+          (a || e.href) && "cursor-pointer"
+        ),
+        style: { fontSize: l, color: s, opacity: m, lineHeight: 1.2, ...r },
+        onClick: () => a == null ? void 0 : a(e),
+        ...e.href ? { href: e.href, target: "_blank", rel: "noopener noreferrer" } : {},
+        children: e.text
+      },
+      `${e.text}-${t}`
+    );
+  };
+  if (A) {
+    const e = M / n.length;
+    return /* @__PURE__ */ i(
+      "div",
+      {
+        className: p("Bear-TagCloud Bear-TagCloud--circle relative", v),
+        style: { width: "100%", paddingBottom: "100%" },
+        "data-testid": x,
+        ..._,
+        children: /* @__PURE__ */ i("div", { className: "absolute inset-0 flex items-center justify-center", children: n.map((t, r) => {
+          const l = (e * r - 90) * (Math.PI / 180), s = w, m = 50 + s * Math.cos(l), u = 50 + s * Math.sin(l);
+          return y(t, r, {
+            position: "absolute",
+            left: `${m}%`,
+            top: `${u}%`,
+            transform: "translate(-50%, -50%)"
+          });
+        }) })
+      }
+    );
+  }
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: p(
+        "Bear-TagCloud flex flex-wrap items-center justify-center gap-2 p-4",
+        T && "max-sm:flex-nowrap max-sm:overflow-x-auto max-sm:justify-start max-sm:gap-3 max-sm:pb-2",
+        v
+      ),
+      "data-testid": x,
+      ..._,
+      children: n.map((e, t) => y(e, t))
+    }
+  );
+};
+export {
+  j as TagCloud
+};

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

@@ -0,0 +1,26 @@
+import { HTMLAttributes } from 'react';
+export type TagCloudLayout = 'flow' | 'circle';
+export interface TagCloudItem {
+    text: string;
+    value: number;
+    color?: string;
+    href?: string;
+}
+export interface TagCloudProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Tags with text and weight value */
+    tags: TagCloudItem[];
+    /** Minimum font size in px */
+    minFontSize?: number;
+    /** Maximum font size in px */
+    maxFontSize?: number;
+    /** Color palette (cycled through) */
+    colors?: string[];
+    /** Layout mode */
+    layout?: TagCloudLayout;
+    /** Responsive: collapse to scrollable list on mobile */
+    mobileCompact?: boolean;
+    /** Callback when a tag is clicked */
+    onTagClick?: (tag: TagCloudItem) => void;
+    /** Test ID */
+    testId?: string;
+}

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

@@ -0,0 +1,2 @@
+export { TagCloud } from './TagCloud';
+export type { TagCloudProps, TagCloudItem, TagCloudLayout } from './TagCloud.types';