bmi-next-brokers 3.0.2 → 3.0.4

package/dist/assets/index5.css

@@ -1 +1 @@
-._stepsContainer_176gx_1{display:flex;flex-direction:column;align-items:center;width:100%}._stepWrapper_176gx_8{display:flex;justify-content:center;align-items:center;width:100%}._step_176gx_1{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px}._iconLine_176gx_25{display:flex;justify-content:center;align-items:center;width:100%;gap:4px}._stepSeparator_176gx_33{flex:1;height:4px;background:#2054a5}._stepSeparatorPending_176gx_38{opacity:.3;background:#2054a5}._textWrapper_176gx_43{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-right:4px;width:100%;box-sizing:border-box;transition:all .3s ease}._stepTitle_176gx_54,._stepState_176gx_55{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;font-family:var(--font-regular)}._start_176gx_63{text-align:start}._middle_176gx_67{text-align:center}._end_176gx_71{text-align:end}._stepTitle_176gx_54{color:#000;font-size:16px;line-height:19.2px}._stepTitle_176gx_54._stepInProgress_176gx_81{font-family:var(--font-medium)}._stepState_176gx_55{color:#000;font-size:13px;line-height:15.6px}._stepTitle_176gx_54._stepPending_176gx_91{color:#cbd5e1}._stepState_176gx_55._stepPending_176gx_91{color:#e2e8f0}._stepState_176gx_55._stepCompleted_176gx_99{color:#65a30d}._stepState_176gx_55._stepInProgress_176gx_81,._stepState_176gx_55._stepBlocked_176gx_104{color:#2054a5}._iconDiv_176gx_108{display:flex;justify-content:center;align-items:center;flex-shrink:0;aspect-ratio:1/1}._iconDiv_176gx_108 svg{width:30px;height:30px}@media (max-width: 697px){._responsive_176gx_122 ._textWrapper_176gx_43{display:none}}@media (max-width: 1280px){._responsive_176gx_122 ._iconDiv_176gx_108 svg{width:22px;height:22px}}@media (max-width: 1280px){._responsive_176gx_122 ._stepSeparator_176gx_33{height:2px}._responsive_176gx_122 ._stepTitle_176gx_54{font-size:12px;line-height:14.4px}._responsive_176gx_122 ._stepState_176gx_55{font-size:11px;line-height:13.2px}}
+._stepsContainer_ojtx7_1{display:flex;flex-direction:column;align-items:center;width:100%}._stepWrapper_ojtx7_8{display:flex;justify-content:center;align-items:center;width:100%}._step_ojtx7_1{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px}._stepClickable_ojtx7_25{cursor:pointer}._stepDisabled_ojtx7_29{cursor:default}._iconLine_ojtx7_33{display:flex;justify-content:center;align-items:center;width:100%;gap:4px}._stepSeparator_ojtx7_41{flex:1;height:4px;background:#2054a5}._stepSeparatorPending_ojtx7_46{opacity:.3;background:#2054a5}._textWrapper_ojtx7_51{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-right:4px;width:100%;box-sizing:border-box;transition:all .3s ease}._stepTitle_ojtx7_62,._stepState_ojtx7_63{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;font-family:var(--font-regular)}._start_ojtx7_71{text-align:start}._middle_ojtx7_75{text-align:center}._end_ojtx7_79{text-align:end}._stepTitle_ojtx7_62{color:#000;font-size:16px;line-height:19.2px}._stepTitle_ojtx7_62._stepInProgress_ojtx7_89{font-family:var(--font-medium)}._stepState_ojtx7_63{color:#000;font-size:13px;line-height:15.6px}._stepTitle_ojtx7_62._stepPending_ojtx7_99{color:#cbd5e1}._stepState_ojtx7_63._stepPending_ojtx7_99{color:#e2e8f0}._stepState_ojtx7_63._stepCompleted_ojtx7_107{color:#65a30d}._stepState_ojtx7_63._stepInProgress_ojtx7_89,._stepState_ojtx7_63._stepBlocked_ojtx7_112{color:#2054a5}._iconDiv_ojtx7_116{display:flex;justify-content:center;align-items:center;flex-shrink:0;aspect-ratio:1/1}._iconDiv_ojtx7_116 svg{width:30px;height:30px}@media (max-width: 697px){._responsive_ojtx7_130 ._textWrapper_ojtx7_51{display:none}}@media (max-width: 1280px){._responsive_ojtx7_130 ._iconDiv_ojtx7_116 svg{width:22px;height:22px}}@media (max-width: 1280px){._responsive_ojtx7_130 ._stepSeparator_ojtx7_41{height:2px}._responsive_ojtx7_130 ._stepTitle_ojtx7_62{font-size:12px;line-height:14.4px}._responsive_ojtx7_130 ._stepState_ojtx7_63{font-size:11px;line-height:13.2px}}

package/dist/components/Switch/Switch.d.ts

@@ -27,5 +27,9 @@ export interface SwitchProps {
     inactiveTextColor?: string;
     /** color de fondo del contenedor (CSS var --switch-bg) */
     background?: string;
+    /** si false, cada opción se adapta a su contenido; por defecto true (todas al ancho de la más larga) */
+    equalWidth?: boolean;
+    /** estilos inline aplicados a todos los botones de opción */
+    optionStyle?: React.CSSProperties;
 }
-export declare const Switch: ({ options, active, onChange, size, simpleAnimation, iconSize, className, activeColor, activeTextColor, inactiveTextColor, background, }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Switch: ({ options, active, onChange, size, simpleAnimation, iconSize, className, activeColor, activeTextColor, inactiveTextColor, background, equalWidth, optionStyle, }: SwitchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Switch/Switch.js

@@ -1,102 +1,106 @@
-import { jsxs as E, jsx as m } from "react/jsx-runtime";
-import { useRef as p, useState as M, useLayoutEffect as j } from "react";
-import { Icon as k } from "../../icons/Icon.js";
-import '../../assets/Switch.css';const D = "_small_56b6x_29", R = "_large_56b6x_40", T = "_indicator_56b6x_52", Z = "_simple_56b6x_68", z = "_option_56b6x_74", B = "_active_56b6x_74", K = "_label_56b6x_74", O = "_pop_56b6x_1", r = {
+import { jsxs as L, jsx as m } from "react/jsx-runtime";
+import { useRef as p, useState as k, useLayoutEffect as D } from "react";
+import { Icon as R } from "../../icons/Icon.js";
+import '../../assets/Switch.css';const T = "_small_56b6x_29", Z = "_large_56b6x_40", z = "_indicator_56b6x_52", B = "_simple_56b6x_68", K = "_option_56b6x_74", O = "_active_56b6x_74", V = "_label_56b6x_74", X = "_pop_56b6x_1", r = {
   switch: "_switch_56b6x_1",
-  small: D,
-  large: R,
-  indicator: T,
-  simple: Z,
-  option: z,
-  active: B,
-  label: K,
-  pop: O
-}, V = {
+  small: T,
+  large: Z,
+  indicator: z,
+  simple: B,
+  option: K,
+  active: O,
+  label: V,
+  pop: X
+}, Y = {
   small: 12,
   medium: 14,
   large: 16
-}, q = ({
+}, G = ({
   options: d = [],
   active: l = 0,
   onChange: o,
   size: h = "medium",
   simpleAnimation: u = !1,
-  iconSize: L,
-  className: S = "",
+  iconSize: S,
+  className: N = "",
   activeColor: b,
   activeTextColor: w,
   inactiveTextColor: x,
-  background: y
+  background: y,
+  equalWidth: $ = !0,
+  optionStyle: W
 }) => {
-  const a = p([]), $ = p(l), n = p(null), [v, I] = M({
+  const _ = p([]), v = p(l), n = p(null), [I, E] = k({
     left: 0,
     width: 0
   });
-  j(() => {
-    const t = a.current[l], e = a.current[$.current];
+  D(() => {
+    const t = _.current[l], s = _.current[v.current];
     if (!t) return;
-    const i = a.current.filter(
-      (s) => s !== null
+    const i = _.current.filter(
+      (e) => e !== null
     );
-    i.forEach((s) => s.style.width = "auto");
-    const _ = Math.max(...i.map((s) => s.offsetWidth));
-    i.forEach((s) => s.style.width = `${_}px`);
-    const f = () => I({ left: t.offsetLeft, width: t.offsetWidth });
-    if (!u && e && e !== t) {
-      const s = Math.min(e.offsetLeft, t.offsetLeft), c = Math.max(
-        e.offsetLeft + e.offsetWidth,
+    if (i.forEach((e) => e.style.width = "auto"), $) {
+      const e = Math.max(...i.map((c) => c.offsetWidth));
+      i.forEach((c) => c.style.width = `${e}px`);
+    }
+    const f = () => E({ left: t.offsetLeft, width: t.offsetWidth });
+    if (!u && s && s !== t) {
+      const e = Math.min(s.offsetLeft, t.offsetLeft), c = Math.max(
+        s.offsetLeft + s.offsetWidth,
         t.offsetLeft + t.offsetWidth
       );
-      I({ left: s, width: c - s }), n.current && clearTimeout(n.current), n.current = setTimeout(f, 160);
+      E({ left: e, width: c - e }), n.current && clearTimeout(n.current), n.current = setTimeout(f, 160);
     } else
       f();
-    return $.current = l, () => {
+    return v.current = l, () => {
       n.current && clearTimeout(n.current);
     };
-  }, [l, d, u]);
-  const N = L ?? V[h], W = {
+  }, [l, d, u, $]);
+  const M = S ?? Y[h], j = {
     ...b && { "--switch-active-bg": b },
     ...w && { "--switch-active-text": w },
     ...x && { "--switch-inactive-text": x },
     ...y && { "--switch-bg": y }
   };
-  return /* @__PURE__ */ E(
+  return /* @__PURE__ */ L(
     "div",
     {
-      className: `${r.switch} ${r[h]} ${u ? r.simple : ""} ${S}`,
-      style: W,
+      className: `${r.switch} ${r[h]} ${u ? r.simple : ""} ${N}`,
+      style: j,
       children: [
         /* @__PURE__ */ m(
           "span",
           {
             className: r.indicator,
             style: {
-              transform: `translateX(${v.left}px)`,
-              width: `${v.width}px`
+              transform: `translateX(${I.left}px)`,
+              width: `${I.width}px`
             }
           }
         ),
-        d.map((t, e) => {
-          const i = typeof t == "string", _ = i ? t : t.label, f = i ? null : t.icon, s = l === e;
-          return /* @__PURE__ */ E(
+        d.map((t, s) => {
+          const i = typeof t == "string", f = i ? t : t.label, e = i ? null : t.icon, c = l === s;
+          return /* @__PURE__ */ L(
             "div",
             {
-              ref: (c) => {
-                a.current[e] = c;
+              ref: (a) => {
+                _.current[s] = a;
               },
               role: "button",
               tabIndex: 0,
-              onClick: () => o == null ? void 0 : o(e),
-              onKeyDown: (c) => {
-                (c.key === "Enter" || c.key === " ") && (c.preventDefault(), o == null || o(e));
+              onClick: () => o == null ? void 0 : o(s),
+              onKeyDown: (a) => {
+                (a.key === "Enter" || a.key === " ") && (a.preventDefault(), o == null || o(s));
               },
-              className: `${r.option} ${s ? r.active : ""}`,
+              className: `${r.option} ${c ? r.active : ""}`,
+              style: W,
               children: [
-                f && /* @__PURE__ */ m(k, { name: f, size: N }),
-                _ && /* @__PURE__ */ m("p", { className: r.label, children: _ })
+                e && /* @__PURE__ */ m(R, { name: e, size: M }),
+                f && /* @__PURE__ */ m("p", { className: r.label, children: f })
               ]
             },
-            e
+            s
           );
         })
       ]
@@ -104,5 +108,5 @@ import '../../assets/Switch.css';const D = "_small_56b6x_29", R = "_large_56b6x_
   );
 };
 export {
-  q as Switch
+  G as Switch
 };

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

@@ -11,6 +11,7 @@ interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
     steps: Step[];
     currentStep: number;
     responsive?: boolean;
+    onStepClick?: (stepIndex: number) => void;
 }
 /**
  * Componente Stepper
@@ -30,6 +31,7 @@ interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
  *   - `disabled` opcional, indica si el paso está deshabilitado.
  * @param currentStep Número del paso actual (1-indexado). El icono y los separadores se ajustan según este valor.
  * @param responsive Posibilidad de estado responsive. Por defecto false.
+ * @param onStepClick Callback invocado con el número de paso (1-indexado) al hacer click sobre un paso no deshabilitado.
  *
  * Ejemplo de uso:
  *
@@ -43,8 +45,14 @@ interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
  *
  * const [currentStep, setCurrentStep] = useState(1);
  *
- * <Stepper steps={steps} currentStep={currentStep} responsive />
+ *  <Stepper
+ *    steps={steps}
+ *    currentStep={currentStep}
+ *    onStepClick={(index) => setCurrentStep(index)}
+ *    responsive
+ * />
+ *
  * ```
  */
-export declare const Stepper: ({ steps, currentStep, responsive, className, ...props }: StepperProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Stepper: ({ steps, currentStep, responsive, onStepClick, className, ...props }: StepperProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/stepper/index.js

@@ -1,68 +1,72 @@
-import { jsx as n, jsxs as _ } from "react/jsx-runtime";
-import { Icon as m } from "../../icons/Icon.js";
-import '../../assets/index5.css';const P = "_stepsContainer_176gx_1", f = "_stepWrapper_176gx_8", v = "_step_176gx_1", x = "_iconLine_176gx_25", $ = "_stepSeparator_176gx_33", h = "_stepSeparatorPending_176gx_38", C = "_textWrapper_176gx_43", S = "_stepTitle_176gx_54", N = "_stepState_176gx_55", u = "_start_176gx_63", T = "_middle_176gx_67", W = "_end_176gx_71", B = "_stepInProgress_176gx_81", D = "_stepPending_176gx_91", b = "_stepCompleted_176gx_99", k = "_stepBlocked_176gx_104", L = "_iconDiv_176gx_108", I = "_responsive_176gx_122", s = {
-  stepsContainer: P,
-  stepWrapper: f,
-  step: v,
-  iconLine: x,
-  stepSeparator: $,
-  stepSeparatorPending: h,
-  textWrapper: C,
-  stepTitle: S,
-  stepState: N,
-  start: u,
-  middle: T,
-  end: W,
-  stepInProgress: B,
-  stepPending: D,
-  stepCompleted: b,
-  stepBlocked: k,
-  iconDiv: L,
-  responsive: I
-}, j = (e, t, r) => r && e + 1 < t ? "StepBlocked" : e + 1 < t ? "StepDone" : e + 1 === t ? "StepInProgress" : "StepPending", y = (e, t, r) => r && e + 1 < t ? s.stepBlocked : e + 1 < t ? s.stepCompleted : e + 1 === t ? s.stepInProgress : s.stepPending, E = (e, t, r, i) => i && e + 1 < t ? "No aplica" : t > r || e + 1 < t ? "Completado" : e + 1 === t ? "En Proceso" : "Pendiente", q = (e, t) => e === 0 ? "start" : e === t - 1 ? "end" : "middle", A = ({
+import { jsx as n, jsxs as l } from "react/jsx-runtime";
+import { Icon as f } from "../../icons/Icon.js";
+import '../../assets/index5.css';const v = "_stepsContainer_ojtx7_1", x = "_stepWrapper_ojtx7_8", b = "_step_ojtx7_1", h = "_stepClickable_ojtx7_25", C = "_stepDisabled_ojtx7_29", $ = "_iconLine_ojtx7_33", N = "_stepSeparator_ojtx7_41", u = "_stepSeparatorPending_ojtx7_46", D = "_textWrapper_ojtx7_51", T = "_stepTitle_ojtx7_62", W = "_stepState_ojtx7_63", k = "_start_ojtx7_71", S = "_middle_ojtx7_75", B = "_end_ojtx7_79", L = "_stepInProgress_ojtx7_89", I = "_stepPending_ojtx7_99", y = "_stepCompleted_ojtx7_107", E = "_stepBlocked_ojtx7_112", R = "_iconDiv_ojtx7_116", q = "_responsive_ojtx7_130", s = {
+  stepsContainer: v,
+  stepWrapper: x,
+  step: b,
+  stepClickable: h,
+  stepDisabled: C,
+  iconLine: $,
+  stepSeparator: N,
+  stepSeparatorPending: u,
+  textWrapper: D,
+  stepTitle: T,
+  stepState: W,
+  start: k,
+  middle: S,
+  end: B,
+  stepInProgress: L,
+  stepPending: I,
+  stepCompleted: y,
+  stepBlocked: E,
+  iconDiv: R,
+  responsive: q
+}, w = (e, t, a) => a && e + 1 < t ? "StepBlocked" : e + 1 < t ? "StepDone" : e + 1 === t ? "StepInProgress" : "StepPending", z = (e, t, a) => a && e + 1 < t ? s.stepBlocked : e + 1 < t ? s.stepCompleted : e + 1 === t ? s.stepInProgress : s.stepPending, A = (e, t, a, i) => i && e + 1 < t ? "No aplica" : t > a || e + 1 < t ? "Completado" : e + 1 === t ? "En Proceso" : "Pendiente", F = (e, t) => e === 0 ? "start" : e === t - 1 ? "end" : "middle", J = ({
   steps: e,
   currentStep: t,
-  responsive: r = !1,
-  className: i,
-  ...l
+  responsive: a = !1,
+  onStepClick: i,
+  className: _,
+  ...m
 }) => e != null && e.length ? /* @__PURE__ */ n(
   "div",
   {
-    className: `${s.stepsContainer} ${r ? s.responsive : ""} ${i && i}`,
-    ...l,
-    children: /* @__PURE__ */ n("div", { className: s.stepWrapper, children: e.map((o, a) => {
-      const d = j(a, t, o.disabled), p = q(a, e.length), c = y(a, t, o.disabled), g = o.stateText ? o.stateText : E(a, t, e.length, o.disabled);
-      return /* @__PURE__ */ _(
+    className: `${s.stepsContainer} ${a ? s.responsive : ""} ${_ && _}`,
+    ...m,
+    children: /* @__PURE__ */ n("div", { className: s.stepWrapper, children: e.map((r, o) => {
+      const g = w(o, t, r.disabled), p = F(o, e.length), c = z(o, t, r.disabled), j = r.stateText ? r.stateText : A(o, t, e.length, r.disabled), P = o + 1 <= t, d = !r.disabled && P;
+      return /* @__PURE__ */ l(
         "div",
         {
-          className: `${s.step} ${s[p]} ${o.disabled ? s.stepDisabled : ""}`,
+          className: `${s.step} ${s[p]} ${d ? s.stepClickable : s.stepDisabled}`,
+          onClick: d ? () => i == null ? void 0 : i(o + 1) : void 0,
           children: [
-            /* @__PURE__ */ _("div", { className: s.iconLine, children: [
+            /* @__PURE__ */ l("div", { className: s.iconLine, children: [
               p !== "start" && /* @__PURE__ */ n(
                 "div",
                 {
-                  className: `${s.stepSeparator} ${t - 1 >= a ? "" : s.stepSeparatorPending}`
+                  className: `${s.stepSeparator} ${t - 1 >= o ? "" : s.stepSeparatorPending}`
                 }
               ),
-              /* @__PURE__ */ n("div", { className: s.iconDiv, children: /* @__PURE__ */ n(m, { name: d }) }),
+              /* @__PURE__ */ n("div", { className: s.iconDiv, children: /* @__PURE__ */ n(f, { name: g }) }),
               p !== "end" && /* @__PURE__ */ n(
                 "div",
                 {
-                  className: `${s.stepSeparator} ${t - 1 > a ? "" : s.stepSeparatorPending}`
+                  className: `${s.stepSeparator} ${t - 1 > o ? "" : s.stepSeparatorPending}`
                 }
               )
             ] }),
-            /* @__PURE__ */ _("div", { className: s.textWrapper, children: [
-              /* @__PURE__ */ n("span", { className: `${s.stepTitle} ${c}`, children: o.title }),
-              /* @__PURE__ */ n("span", { className: `${s.stepState} ${c}`, children: g })
+            /* @__PURE__ */ l("div", { className: s.textWrapper, children: [
+              /* @__PURE__ */ n("span", { className: `${s.stepTitle} ${c}`, children: r.title }),
+              /* @__PURE__ */ n("span", { className: `${s.stepState} ${c}`, children: j })
             ] })
           ]
         },
-        a
+        o
       );
     }) })
   }
 ) : null;
 export {
-  A as Stepper
+  J as Stepper
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bmi-next-brokers",
   "description": "Componentes de UI para proyecto BMI Next Brokers",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "author": "BMI Ahorro España",
   "contributors": [
     "José Ramón Jiménez <jrjimenez@bmicos.com>",