bmi-next-brokers 3.0.3 → 3.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +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}}
1
+ ._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}}
@@ -11,6 +11,7 @@ interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
11
11
  steps: Step[];
12
12
  currentStep: number;
13
13
  responsive?: boolean;
14
+ onStepClick?: (stepIndex: number) => void;
14
15
  }
15
16
  /**
16
17
  * Componente Stepper
@@ -30,6 +31,7 @@ interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
30
31
  * - `disabled` opcional, indica si el paso está deshabilitado.
31
32
  * @param currentStep Número del paso actual (1-indexado). El icono y los separadores se ajustan según este valor.
32
33
  * @param responsive Posibilidad de estado responsive. Por defecto false.
34
+ * @param onStepClick Callback invocado con el número de paso (1-indexado) al hacer click sobre un paso no deshabilitado.
33
35
  *
34
36
  * Ejemplo de uso:
35
37
  *
@@ -43,8 +45,14 @@ interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
43
45
  *
44
46
  * const [currentStep, setCurrentStep] = useState(1);
45
47
  *
46
- * <Stepper steps={steps} currentStep={currentStep} responsive />
48
+ * <Stepper
49
+ * steps={steps}
50
+ * currentStep={currentStep}
51
+ * onStepClick={(index) => setCurrentStep(index)}
52
+ * responsive
53
+ * />
54
+ *
47
55
  * ```
48
56
  */
49
- export declare const Stepper: ({ steps, currentStep, responsive, className, ...props }: StepperProps) => import("react/jsx-runtime").JSX.Element | null;
57
+ export declare const Stepper: ({ steps, currentStep, responsive, onStepClick, className, ...props }: StepperProps) => import("react/jsx-runtime").JSX.Element | null;
50
58
  export {};
@@ -1,68 +1,72 @@
1
- import { jsx as n, jsxs as _ } from "react/jsx-runtime";
2
- import { Icon as m } from "../../icons/Icon.js";
3
- 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 = {
4
- stepsContainer: P,
5
- stepWrapper: f,
6
- step: v,
7
- iconLine: x,
8
- stepSeparator: $,
9
- stepSeparatorPending: h,
10
- textWrapper: C,
11
- stepTitle: S,
12
- stepState: N,
13
- start: u,
14
- middle: T,
15
- end: W,
16
- stepInProgress: B,
17
- stepPending: D,
18
- stepCompleted: b,
19
- stepBlocked: k,
20
- iconDiv: L,
21
- responsive: I
22
- }, 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 = ({
1
+ import { jsx as n, jsxs as l } from "react/jsx-runtime";
2
+ import { Icon as f } from "../../icons/Icon.js";
3
+ 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 = {
4
+ stepsContainer: v,
5
+ stepWrapper: x,
6
+ step: b,
7
+ stepClickable: h,
8
+ stepDisabled: C,
9
+ iconLine: $,
10
+ stepSeparator: N,
11
+ stepSeparatorPending: u,
12
+ textWrapper: D,
13
+ stepTitle: T,
14
+ stepState: W,
15
+ start: k,
16
+ middle: S,
17
+ end: B,
18
+ stepInProgress: L,
19
+ stepPending: I,
20
+ stepCompleted: y,
21
+ stepBlocked: E,
22
+ iconDiv: R,
23
+ responsive: q
24
+ }, 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 = ({
23
25
  steps: e,
24
26
  currentStep: t,
25
- responsive: r = !1,
26
- className: i,
27
- ...l
27
+ responsive: a = !1,
28
+ onStepClick: i,
29
+ className: _,
30
+ ...m
28
31
  }) => e != null && e.length ? /* @__PURE__ */ n(
29
32
  "div",
30
33
  {
31
- className: `${s.stepsContainer} ${r ? s.responsive : ""} ${i && i}`,
32
- ...l,
33
- children: /* @__PURE__ */ n("div", { className: s.stepWrapper, children: e.map((o, a) => {
34
- 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);
35
- return /* @__PURE__ */ _(
34
+ className: `${s.stepsContainer} ${a ? s.responsive : ""} ${_ && _}`,
35
+ ...m,
36
+ children: /* @__PURE__ */ n("div", { className: s.stepWrapper, children: e.map((r, o) => {
37
+ 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;
38
+ return /* @__PURE__ */ l(
36
39
  "div",
37
40
  {
38
- className: `${s.step} ${s[p]} ${o.disabled ? s.stepDisabled : ""}`,
41
+ className: `${s.step} ${s[p]} ${d ? s.stepClickable : s.stepDisabled}`,
42
+ onClick: d ? () => i == null ? void 0 : i(o + 1) : void 0,
39
43
  children: [
40
- /* @__PURE__ */ _("div", { className: s.iconLine, children: [
44
+ /* @__PURE__ */ l("div", { className: s.iconLine, children: [
41
45
  p !== "start" && /* @__PURE__ */ n(
42
46
  "div",
43
47
  {
44
- className: `${s.stepSeparator} ${t - 1 >= a ? "" : s.stepSeparatorPending}`
48
+ className: `${s.stepSeparator} ${t - 1 >= o ? "" : s.stepSeparatorPending}`
45
49
  }
46
50
  ),
47
- /* @__PURE__ */ n("div", { className: s.iconDiv, children: /* @__PURE__ */ n(m, { name: d }) }),
51
+ /* @__PURE__ */ n("div", { className: s.iconDiv, children: /* @__PURE__ */ n(f, { name: g }) }),
48
52
  p !== "end" && /* @__PURE__ */ n(
49
53
  "div",
50
54
  {
51
- className: `${s.stepSeparator} ${t - 1 > a ? "" : s.stepSeparatorPending}`
55
+ className: `${s.stepSeparator} ${t - 1 > o ? "" : s.stepSeparatorPending}`
52
56
  }
53
57
  )
54
58
  ] }),
55
- /* @__PURE__ */ _("div", { className: s.textWrapper, children: [
56
- /* @__PURE__ */ n("span", { className: `${s.stepTitle} ${c}`, children: o.title }),
57
- /* @__PURE__ */ n("span", { className: `${s.stepState} ${c}`, children: g })
59
+ /* @__PURE__ */ l("div", { className: s.textWrapper, children: [
60
+ /* @__PURE__ */ n("span", { className: `${s.stepTitle} ${c}`, children: r.title }),
61
+ /* @__PURE__ */ n("span", { className: `${s.stepState} ${c}`, children: j })
58
62
  ] })
59
63
  ]
60
64
  },
61
- a
65
+ o
62
66
  );
63
67
  }) })
64
68
  }
65
69
  ) : null;
66
70
  export {
67
- A as Stepper
71
+ J as Stepper
68
72
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "bmi-next-brokers",
3
3
  "description": "Componentes de UI para proyecto BMI Next Brokers",
4
- "version": "3.0.3",
4
+ "version": "3.0.4",
5
5
  "author": "BMI Ahorro España",
6
6
  "contributors": [
7
7
  "José Ramón Jiménez <jrjimenez@bmicos.com>",