bmi-next-brokers 3.1.9 → 3.2.0

package/dist/assets/Switch.css

@@ -1 +1 @@
-._switch_1l66v_1{--switch-bg: var(--ui-blue-100);--switch-active-bg: #2054a5;--switch-active-text: #ffffff;--switch-inactive-text: #2054a5;--switch-height: 40px;--switch-inset: 4px;--switch-pad-y: 7px;--switch-pad-x: 12px;--switch-font: 16px;--switch-line-height: 19.2px;position:relative;min-height:var(--switch-height);display:flex;flex-direction:row;gap:0;padding:var(--switch-inset);border-radius:1000px;background:var(--switch-bg);width:fit-content}._switch_1l66v_1._fullWidth_1l66v_26{width:100%}._switch_1l66v_1._fullWidth_1l66v_26 ._option_1l66v_30{flex:1}._extraSmall_1l66v_35{--switch-height: 28px;--switch-inset: 3px;--switch-pad-y: 6px;--switch-pad-x: 12px;--switch-font: 12px;--switch-line-height: 14.4px}._small_1l66v_44{--switch-height: 32px;--switch-inset: 3px;--switch-pad-y: 6px;--switch-pad-x: 12px;--switch-font: 14px;--switch-line-height: 16.8px}._large_1l66v_53{--switch-height: 46px;--switch-inset: 4px;--switch-pad-y: 10px;--switch-pad-x: 16px;--switch-font: 18px;--switch-line-height: 21.6px}._extraLarge_1l66v_62{--switch-height: 52px;--switch-inset: 6px;--switch-pad-y: 6px;--switch-pad-x: 14px;--switch-font: 20px;--switch-line-height: 24px}._switch_1l66v_1 ._indicator_1l66v_72{position:absolute;top:var(--switch-inset);bottom:var(--switch-inset);left:0;background:#2054a5;border-radius:1000px;transition:transform .24s cubic-bezier(.4,0,.2,1),width .24s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:0}._switch_1l66v_1._simple_1l66v_88 ._indicator_1l66v_72,._switch_1l66v_1._simple_1l66v_88 ._option_1l66v_30{transition:none}._switch_1l66v_1 ._option_1l66v_30{position:relative;z-index:1;border:none;background:transparent;color:var(--switch-inactive-text);font-family:var(--font-medium);font-size:var(--switch-font);line-height:var(--switch-line-height);cursor:pointer;transition:color .3s ease;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:4px;padding:var(--switch-pad-y) var(--switch-pad-x);border-radius:1000px}._switch_1l66v_1 ._option_1l66v_30._active_1l66v_114{color:var(--switch-active-text)}
+._switch_1sbs8_1{--switch-bg: var(--ui-blue-100);--switch-active-bg: #2054a5;--switch-active-text: #ffffff;--switch-inactive-text: #2054a5;--switch-height: 40px;--switch-inset: 4px;--switch-pad-y: 7px;--switch-pad-x: 12px;--switch-font: 16px;--switch-line-height: 19.2px;position:relative;min-height:var(--switch-height);display:flex;flex-direction:row;gap:0;padding:var(--switch-inset);border-radius:1000px;background:var(--switch-bg);width:fit-content}._switch_1sbs8_1._fullWidth_1sbs8_26{width:100%}._switch_1sbs8_1._fullWidth_1sbs8_26 ._option_1sbs8_30{flex:1}._extraSmall_1sbs8_35{--switch-height: 28px;--switch-inset: 3px;--switch-pad-y: 6px;--switch-pad-x: 12px;--switch-font: 12px;--switch-line-height: 14.4px}._small_1sbs8_44{--switch-height: 32px;--switch-inset: 3px;--switch-pad-y: 6px;--switch-pad-x: 12px;--switch-font: 14px;--switch-line-height: 16.8px}._large_1sbs8_53{--switch-height: 46px;--switch-inset: 4px;--switch-pad-y: 10px;--switch-pad-x: 16px;--switch-font: 18px;--switch-line-height: 21.6px}._extraLarge_1sbs8_62{--switch-height: 52px;--switch-inset: 6px;--switch-pad-y: 6px;--switch-pad-x: 14px;--switch-font: 20px;--switch-line-height: 24px}._switch_1sbs8_1 ._indicator_1sbs8_72{position:absolute;top:var(--switch-inset);bottom:var(--switch-inset);left:0;background:#2054a5;border-radius:1000px;transition:transform .24s cubic-bezier(.4,0,.2,1),width .24s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:0}._switch_1sbs8_1._simple_1sbs8_88 ._indicator_1sbs8_72,._switch_1sbs8_1._simple_1sbs8_88 ._option_1sbs8_30{transition:none}._switch_1sbs8_1 ._option_1sbs8_30{position:relative;z-index:1;border:none;background:transparent;color:var(--switch-inactive-text);font-family:var(--font-medium);font-size:var(--switch-font);line-height:var(--switch-line-height);cursor:pointer;transition:color .3s ease;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:4px;padding:var(--switch-pad-y) var(--switch-pad-x);border-radius:1000px}._switch_1sbs8_1 ._option_1sbs8_30._active_1sbs8_114{color:var(--switch-active-text)}._toggleRoot_1sbs8_119{--switch-bg: #5c6b87;--switch-active-bg: #2054a5;--switch-inactive-text: #2054a5;--switch-track-h: calc(var(--switch-height, 40px) * .62);--switch-track-w: calc(var(--switch-track-h) * 1.85);--switch-knob-inset: calc(var(--switch-track-h) * .08);display:inline-flex;align-items:center;gap:12px;width:fit-content;cursor:pointer}._toggleRoot_1sbs8_119._fullWidth_1sbs8_26{width:100%;justify-content:space-between}._toggleRoot_1sbs8_119._disabled_1sbs8_141{opacity:.5;cursor:not-allowed}._toggleRoot_1sbs8_119 ._toggleLabel_1sbs8_146{color:var(--switch-label-color, #212121);font-family:var(--font-regular);font-size:var(--switch-label-font, 14px);line-height:1.2}._toggleRoot_1sbs8_119._extraSmall_1sbs8_35{--switch-label-font: 11px}._toggleRoot_1sbs8_119._small_1sbs8_44{--switch-label-font: 12px}._toggleRoot_1sbs8_119._large_1sbs8_53{--switch-label-font: 16px}._toggleRoot_1sbs8_119._extraLarge_1sbs8_62{--switch-label-font: 18px}._toggleRoot_1sbs8_119 ._track_1sbs8_170{position:relative;flex:none;border:none;padding:0;width:var(--switch-track-w);height:var(--switch-track-h);border-radius:1000px;background:var(--switch-bg);cursor:inherit;transition:background .24s cubic-bezier(.4,0,.2,1)}._toggleRoot_1sbs8_119 ._track_1sbs8_170._on_1sbs8_183{background:var(--switch-active-bg)}._toggleRoot_1sbs8_119 ._knob_1sbs8_187{position:absolute;top:var(--switch-knob-inset);left:var(--switch-knob-inset);width:calc(var(--switch-track-h) - var(--switch-knob-inset) * 2);height:calc(var(--switch-track-h) - var(--switch-knob-inset) * 2);border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;transition:transform .24s cubic-bezier(.4,0,.2,1)}._toggleRoot_1sbs8_119 ._track_1sbs8_170._on_1sbs8_183 ._knob_1sbs8_187{transform:translate(calc(var(--switch-track-w) - var(--switch-track-h)))}._toggleRoot_1sbs8_119 ._knobIcon_1sbs8_206{width:85%;height:85%;color:var(--switch-active-bg);opacity:0;transform:scale(.6);transition:opacity .18s ease,transform .18s ease}._toggleRoot_1sbs8_119 ._track_1sbs8_170._on_1sbs8_183 ._knobIcon_1sbs8_206{opacity:1;transform:scale(1)}._toggleRoot_1sbs8_119._simple_1sbs8_88 ._track_1sbs8_170,._toggleRoot_1sbs8_119._simple_1sbs8_88 ._knob_1sbs8_187,._toggleRoot_1sbs8_119._simple_1sbs8_88 ._knobIcon_1sbs8_206{transition:none}

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

@@ -6,8 +6,8 @@ export type SwitchOption = string | {
 };
 export type SwitchSize = "extraSmall" | "small" | "medium" | "large" | "extraLarge";
 export interface SwitchProps {
-    /** opciones a mostrar: strings u objetos { label, icon } */
-    options: SwitchOption[];
+    /** opciones a mostrar: strings u objetos { label, icon }; no aplica en modo `toggle` */
+    options?: SwitchOption[];
     /** índice de la opción activa */
     active?: number;
     /** callback que recibe el índice seleccionado */
@@ -33,9 +33,23 @@ export interface SwitchProps {
     fullWidth?: boolean;
     /** estilos inline aplicados a todos los botones de opción */
     optionStyle?: React.CSSProperties;
+    /** modo interruptor encendido/apagado: ignora `options`, `active` y `onChange` */
+    toggle?: boolean;
+    /** estado del interruptor en modo `toggle` */
+    checked?: boolean;
+    /** callback del interruptor en modo `toggle` */
+    onToggle?: (checked: boolean) => void;
+    /** texto junto al interruptor en modo `toggle` */
+    label?: string;
+    /** lado del `label` respecto al interruptor */
+    labelPosition?: "left" | "right";
+    /** color del `label` (CSS var --switch-label-color) */
+    labelColor?: string;
+    /** deshabilita el interruptor en modo `toggle` */
+    disabled?: boolean;
 }
 /**
  * Control segmentado tipo píldora con indicador deslizante.
  * Todas las opciones se igualan al ancho de la más larga (salvo `equalWidth={false}`).
  */
-export declare const Switch: ({ options, active, onChange, size, simpleAnimation, iconSize, className, activeColor, activeTextColor, inactiveTextColor, background, equalWidth, fullWidth, optionStyle, }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Switch: ({ options, active, onChange, size, simpleAnimation, iconSize, className, activeColor, activeTextColor, inactiveTextColor, background, equalWidth, fullWidth, optionStyle, toggle, checked, onToggle, label, labelPosition, labelColor, disabled, }: SwitchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Switch/Switch.js

@@ -1,110 +1,151 @@
-import { jsxs as S, jsx as _ } from "react/jsx-runtime";
-import { useRef as $, useState as O, useCallback as E, useLayoutEffect as Z, useEffect as z } from "react";
-import { Icon as A } from "../../icons/Icon.js";
-import '../../assets/Switch.css';const B = "_fullWidth_1l66v_26", K = "_option_1l66v_30", M = "_extraSmall_1l66v_35", V = "_small_1l66v_44", X = "_large_1l66v_53", Y = "_extraLarge_1l66v_62", q = "_indicator_1l66v_72", F = "_simple_1l66v_88", G = "_active_1l66v_114", l = {
-  switch: "_switch_1l66v_1",
-  fullWidth: B,
-  option: K,
-  extraSmall: M,
-  small: V,
-  large: X,
-  extraLarge: Y,
-  indicator: q,
-  simple: F,
-  active: G
-}, H = {
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { useRef as D, useState as q, useCallback as O, useLayoutEffect as z, useEffect as A } from "react";
+import { Icon as Z } from "../../icons/Icon.js";
+import '../../assets/Switch.css';const F = "_fullWidth_1sbs8_26", G = "_option_1sbs8_30", H = "_extraSmall_1sbs8_35", J = "_small_1sbs8_44", Q = "_large_1sbs8_53", U = "_extraLarge_1sbs8_62", P = "_indicator_1sbs8_72", T = "_simple_1sbs8_88", C = "_active_1sbs8_114", tt = "_toggleRoot_1sbs8_119", st = "_disabled_1sbs8_141", et = "_toggleLabel_1sbs8_146", ct = "_track_1sbs8_170", ot = "_on_1sbs8_183", lt = "_knob_1sbs8_187", nt = "_knobIcon_1sbs8_206", s = {
+  switch: "_switch_1sbs8_1",
+  fullWidth: F,
+  option: G,
+  extraSmall: H,
+  small: J,
+  large: Q,
+  extraLarge: U,
+  indicator: P,
+  simple: T,
+  active: C,
+  toggleRoot: tt,
+  disabled: st,
+  toggleLabel: et,
+  track: ct,
+  on: ot,
+  knob: lt,
+  knobIcon: nt
+}, at = {
   extraSmall: 15,
   small: 15,
   medium: 19,
   large: 19,
   extraLarge: 19
-}, U = ({
-  options: m = [],
-  active: i = 0,
-  onChange: c,
-  size: a = "medium",
-  simpleAnimation: I = !1,
-  iconSize: W,
-  className: L = "",
-  activeColor: d,
-  activeTextColor: u,
-  inactiveTextColor: p,
-  background: h,
-  equalWidth: v = !0,
-  fullWidth: N = !1,
-  optionStyle: R
+}, ft = ({
+  options: u = [],
+  active: a = 0,
+  onChange: l,
+  size: r = "medium",
+  simpleAnimation: p = !1,
+  iconSize: B,
+  className: h = "",
+  activeColor: w,
+  activeTextColor: $,
+  inactiveTextColor: k,
+  background: y,
+  equalWidth: x = !0,
+  fullWidth: I = !1,
+  optionStyle: K,
+  toggle: M = !1,
+  checked: _ = !1,
+  onToggle: f,
+  label: g,
+  labelPosition: L = "left",
+  labelColor: S,
+  disabled: v = !1
 }) => {
-  const w = $(null), n = $([]), [y, g] = O({
+  const N = D(null), b = D([]), [E, V] = q({
     left: 0,
     width: 0
-  }), f = E(() => {
-    const t = n.current.filter(
-      (s) => s !== null
+  }), d = O(() => {
+    const t = b.current.filter(
+      (e) => e !== null
     );
-    if (t.forEach((s) => s.style.width = "auto"), v) {
-      const s = Math.max(0, ...t.map((e) => e.offsetWidth));
-      t.forEach((e) => e.style.width = `${s}px`);
+    if (t.forEach((e) => e.style.width = "auto"), x) {
+      const e = Math.max(0, ...t.map((c) => c.offsetWidth));
+      t.forEach((c) => c.style.width = `${e}px`);
     }
-  }, [v]), o = E(() => {
-    f();
-    const t = n.current[i];
-    t && g({ left: t.offsetLeft, width: t.offsetWidth });
-  }, [i, f]);
-  Z(() => {
-    o();
-  }, [i, m, a, f]), z(() => {
-    var e;
-    const t = w.current;
+  }, [x]), i = O(() => {
+    d();
+    const t = b.current[a];
+    t && V({ left: t.offsetLeft, width: t.offsetWidth });
+  }, [a, d]);
+  z(() => {
+    i();
+  }, [a, u, r, d]), A(() => {
+    var c;
+    const t = N.current;
     if (!t) return;
-    const s = new ResizeObserver(o);
-    return s.observe(t), (e = document.fonts) != null && e.ready && document.fonts.ready.then(o).catch(() => {
-    }), () => s.disconnect();
-  }, [o]);
-  const k = W ?? H[a], j = {
-    ...d && { "--switch-active-bg": d },
-    ...u && { "--switch-active-text": u },
-    ...p && { "--switch-inactive-text": p },
-    ...h && { "--switch-bg": h }
+    const e = new ResizeObserver(i);
+    return e.observe(t), (c = document.fonts) != null && c.ready && document.fonts.ready.then(i).catch(() => {
+    }), () => e.disconnect();
+  }, [i]);
+  const X = B ?? at[r], R = {
+    ...w && { "--switch-active-bg": w },
+    ...$ && { "--switch-active-text": $ },
+    ...k && { "--switch-inactive-text": k },
+    ...y && { "--switch-bg": y },
+    ...S && { "--switch-label-color": S }
   };
-  return /* @__PURE__ */ S(
+  if (M) {
+    const t = g && /* @__PURE__ */ o("span", { className: s.toggleLabel, children: g });
+    return /* @__PURE__ */ m(
+      "label",
+      {
+        className: `${s.toggleRoot} ${s[r]} ${p ? s.simple : ""} ${I ? s.fullWidth : ""} ${v ? s.disabled : ""} ${h}`,
+        style: R,
+        children: [
+          L === "left" && t,
+          /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              role: "switch",
+              "aria-checked": _,
+              disabled: v,
+              onClick: () => f == null ? void 0 : f(!_),
+              className: `${s.track} ${_ ? s.on : ""}`,
+              children: /* @__PURE__ */ o("span", { className: s.knob, children: /* @__PURE__ */ o(Z, { name: "CheckIcon", className: s.knobIcon }) })
+            }
+          ),
+          L === "right" && t
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ m(
     "div",
     {
-      ref: w,
-      className: `${l.switch} ${l[a]} ${I ? l.simple : ""} ${N ? l.fullWidth : ""} ${L}`,
-      style: j,
+      ref: N,
+      className: `${s.switch} ${s[r]} ${p ? s.simple : ""} ${I ? s.fullWidth : ""} ${h}`,
+      style: R,
       children: [
-        /* @__PURE__ */ _(
+        /* @__PURE__ */ o(
           "span",
           {
-            className: l.indicator,
+            className: s.indicator,
             style: {
-              transform: `translateX(${y.left}px)`,
-              width: `${y.width}px`
+              transform: `translateX(${E.left}px)`,
+              width: `${E.width}px`
             }
           }
         ),
-        m.map((t, s) => {
-          const e = typeof t == "string", x = e ? t : t.label, b = e ? null : t.icon, D = i === s;
-          return /* @__PURE__ */ S(
+        u.map((t, e) => {
+          const c = typeof t == "string", W = c ? t : t.label, j = c ? null : t.icon, Y = a === e;
+          return /* @__PURE__ */ m(
             "div",
             {
-              ref: (r) => {
-                n.current[s] = r;
+              ref: (n) => {
+                b.current[e] = n;
               },
               role: "button",
               tabIndex: 0,
-              onClick: () => c == null ? void 0 : c(s),
-              onKeyDown: (r) => {
-                (r.key === "Enter" || r.key === " ") && (r.preventDefault(), c == null || c(s));
+              onClick: () => l == null ? void 0 : l(e),
+              onKeyDown: (n) => {
+                (n.key === "Enter" || n.key === " ") && (n.preventDefault(), l == null || l(e));
               },
-              className: `${l.option} ${D ? l.active : ""}`,
-              style: R,
+              className: `${s.option} ${Y ? s.active : ""}`,
+              style: K,
               children: [
-                b && /* @__PURE__ */ _(A, { name: b, size: k }),
-                x && /* @__PURE__ */ _("span", { className: l.label, children: x })
+                j && /* @__PURE__ */ o(Z, { name: j, size: X }),
+                W && /* @__PURE__ */ o("span", { className: s.label, children: W })
               ]
             },
-            s
+            e
           );
         })
       ]
@@ -112,5 +153,5 @@ import '../../assets/Switch.css';const B = "_fullWidth_1l66v_26", K = "_option_1
   );
 };
 export {
-  U as Switch
+  ft as Switch
 };

package/package.json

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