bmi-next-brokers 3.0.2 → 3.0.3

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/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.3",
   "author": "BMI Ahorro España",
   "contributors": [
     "José Ramón Jiménez <jrjimenez@bmicos.com>",