bmi-next-brokers 2.9.9 → 3.0.1

package/dist/assets/Switch.css

@@ -0,0 +1 @@
+._switch_56b6x_1{--switch-bg: var(--ui-blue-100);--switch-active-bg: #2054A5;--switch-active-text: #ffffff;--switch-inactive-text: #2054A5;--switch-inset: 3px;--switch-pad-y: 10px;--switch-pad-x: 14px;--switch-font: 12px;--switch-radius: 20px;--switch-min-width: 52px;--switch-gap: 5px;--switch-max-height: 48px;position:relative;display:flex;flex-direction:row;gap:0;max-height:var(--switch-max-height);padding:var(--switch-inset);border-radius:var(--switch-radius);background:var(--switch-bg);width:fit-content}._small_56b6x_29{--switch-inset: 3px;--switch-pad-y: 6px;--switch-pad-x: 10px;--switch-font: 11px;--switch-radius: 16px;--switch-min-width: 40px;--switch-gap: 4px;--switch-max-height: 36px}._large_56b6x_40{--switch-inset: 4px;--switch-pad-y: 14px;--switch-pad-x: 18px;--switch-font: 14px;--switch-radius: 24px;--switch-min-width: 64px;--switch-gap: 6px;--switch-max-height: 58px}._switch_56b6x_1 ._indicator_56b6x_52{position:absolute;top:var(--switch-inset);bottom:var(--switch-inset);left:0;background:#2054a5;border-radius:var(--switch-radius);transition:transform .42s cubic-bezier(.34,1.56,.64,1),width .42s cubic-bezier(.34,1.56,.64,1);pointer-events:none;z-index:0}._switch_56b6x_1._simple_56b6x_68 ._indicator_56b6x_52{transition:transform .22s ease,width .22s ease}._switch_56b6x_1._simple_56b6x_68 ._option_56b6x_74._active_56b6x_74 ._label_56b6x_74{animation:none}._switch_56b6x_1 ._option_56b6x_74{position:relative;z-index:1;min-width:var(--switch-min-width);border:none;background:transparent;color:var(--switch-inactive-text);font-size:var(--switch-font);cursor:pointer;transition:color .25s ease,transform .25s ease;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:var(--switch-gap);padding:var(--switch-pad-y) var(--switch-pad-x);border-radius:var(--switch-radius)}._switch_56b6x_1 ._option_56b6x_74:active{transform:scale(.94)}._switch_56b6x_1 ._option_56b6x_74._active_56b6x_74{color:var(--switch-active-text)}._switch_56b6x_1 ._option_56b6x_74._active_56b6x_74 ._label_56b6x_74{animation:_pop_56b6x_1 .32s ease}@keyframes _pop_56b6x_1{0%{transform:scale(1)}45%{transform:scale(1.12)}to{transform:scale(1)}}._switch_56b6x_1 ._label_56b6x_74{line-height:5px}

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

@@ -0,0 +1,31 @@
+import * as Icons from "../../icons/index";
+export type IconName = keyof typeof Icons;
+export type SwitchOption = string | {
+    label: string;
+    icon?: IconName;
+};
+export type SwitchSize = "small" | "medium" | "large";
+export interface SwitchProps {
+    /** opciones a mostrar: strings u objetos { label, icon } */
+    options: SwitchOption[];
+    /** índice de la opción activa */
+    active?: number;
+    /** callback que recibe el índice seleccionado */
+    onChange?: (index: number) => void;
+    /** tamaño que determina el alto del control */
+    size?: SwitchSize;
+    /** si es true, usa un deslizamiento simple en vez del efecto rubber-band */
+    simpleAnimation?: boolean;
+    /** tamaño del icono en px; si se omite, escala según `size` */
+    iconSize?: number;
+    className?: string;
+    /** color de fondo del indicador activo (CSS var --switch-active-bg) */
+    activeColor?: string;
+    /** color del texto de la opción activa (CSS var --switch-active-text) */
+    activeTextColor?: string;
+    /** color del texto de las opciones inactivas (CSS var --switch-inactive-text) */
+    inactiveTextColor?: string;
+    /** color de fondo del contenedor (CSS var --switch-bg) */
+    background?: string;
+}
+export declare const Switch: ({ options, active, onChange, size, simpleAnimation, iconSize, className, activeColor, activeTextColor, inactiveTextColor, background, }: SwitchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Switch/Switch.js

@@ -0,0 +1,108 @@
+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 = {
+  switch: "_switch_56b6x_1",
+  small: D,
+  large: R,
+  indicator: T,
+  simple: Z,
+  option: z,
+  active: B,
+  label: K,
+  pop: O
+}, V = {
+  small: 12,
+  medium: 14,
+  large: 16
+}, q = ({
+  options: d = [],
+  active: l = 0,
+  onChange: o,
+  size: h = "medium",
+  simpleAnimation: u = !1,
+  iconSize: L,
+  className: S = "",
+  activeColor: b,
+  activeTextColor: w,
+  inactiveTextColor: x,
+  background: y
+}) => {
+  const a = p([]), $ = p(l), n = p(null), [v, I] = M({
+    left: 0,
+    width: 0
+  });
+  j(() => {
+    const t = a.current[l], e = a.current[$.current];
+    if (!t) return;
+    const i = a.current.filter(
+      (s) => s !== 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,
+        t.offsetLeft + t.offsetWidth
+      );
+      I({ left: s, width: c - s }), n.current && clearTimeout(n.current), n.current = setTimeout(f, 160);
+    } else
+      f();
+    return $.current = l, () => {
+      n.current && clearTimeout(n.current);
+    };
+  }, [l, d, u]);
+  const N = L ?? V[h], W = {
+    ...b && { "--switch-active-bg": b },
+    ...w && { "--switch-active-text": w },
+    ...x && { "--switch-inactive-text": x },
+    ...y && { "--switch-bg": y }
+  };
+  return /* @__PURE__ */ E(
+    "div",
+    {
+      className: `${r.switch} ${r[h]} ${u ? r.simple : ""} ${S}`,
+      style: W,
+      children: [
+        /* @__PURE__ */ m(
+          "span",
+          {
+            className: r.indicator,
+            style: {
+              transform: `translateX(${v.left}px)`,
+              width: `${v.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(
+            "div",
+            {
+              ref: (c) => {
+                a.current[e] = c;
+              },
+              role: "button",
+              tabIndex: 0,
+              onClick: () => o == null ? void 0 : o(e),
+              onKeyDown: (c) => {
+                (c.key === "Enter" || c.key === " ") && (c.preventDefault(), o == null || o(e));
+              },
+              className: `${r.option} ${s ? r.active : ""}`,
+              children: [
+                f && /* @__PURE__ */ m(k, { name: f, size: N }),
+                _ && /* @__PURE__ */ m("p", { className: r.label, children: _ })
+              ]
+            },
+            e
+          );
+        })
+      ]
+    }
+  );
+};
+export {
+  q as Switch
+};

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

@@ -0,0 +1,2 @@
+export { Switch } from './Switch';
+export type { SwitchProps, SwitchOption, SwitchSize } from './Switch';

package/dist/components/Switch/index.js

@@ -0,0 +1,4 @@
+import { Switch as t } from "./Switch.js";
+export {
+  t as Switch
+};

package/dist/main.d.ts

@@ -13,6 +13,7 @@ export { ProgressBar } from './components/progressBar';
 export { Select } from './components/Select';
 export { SearchableInputGroup } from './components/SearchableInputGroup';
 export { Spinner } from './components/Spinner';
+export { Switch } from './components/Switch';
 export { Stepper } from './components/stepper';
 export { Tab } from './components/tab';
 export { TabGroup } from './components/tab/tabGroup';
@@ -41,6 +42,7 @@ export type { NavbarOption } from './components/navbar';
 export type { ProgressBar as ProgressBarProps } from './components/progressBar';
 export type { SelectProps, SelectSize, SelectOption, } from './components/Select';
 export type { SpinnerProps, SpinnerColor } from './components/Spinner';
+export type { SwitchProps, SwitchOption } from './components/Switch';
 export type { Step } from './components/stepper';
 export type { ToastProps, ToastType, ToastPosition } from './components/Toast';
 export type { StaticToastProps, StaticToastType, StaticToastSize, } from './components/StaticToast';

package/dist/main.js

@@ -3,64 +3,66 @@ import { Badge as p } from "./components/badge/index.js";
 import { Button as m } from "./components/Button/Button.js";
 import { ButtonGroup as a } from "./components/ButtonGroup/ButtonGroup.js";
 import { Dialog as u } from "./components/Dialog/Dialog.js";
-import { FileUpload as c } from "./components/FileUpload/FileUpload.js";
+import { FileUpload as i } from "./components/FileUpload/FileUpload.js";
 import { CompactFileUpload as s } from "./components/FileUpload/CompactFileUpload.js";
-import { Input as S } from "./components/Input/Input.js";
+import { Input as B } from "./components/Input/Input.js";
 import { Checkbox as d } from "./components/Input/Checkbox/Checkbox.js";
 import { RadioButton as b } from "./components/Input/RadioButton/RadioButton.js";
-import { Navbar as h } from "./components/navbar/index.js";
+import { Navbar as g } from "./components/navbar/index.js";
 import { ProgressBar as F } from "./components/progressBar/index.js";
 import { Select as I } from "./components/Select/Select.js";
-import { SearchableInputGroup as D } from "./components/SearchableInputGroup/index.js";
-import { Spinner as U } from "./components/Spinner/Spinner.js";
-import { Stepper as E } from "./components/stepper/index.js";
-import { Tab as L } from "./components/tab/index.js";
-import { TabGroup as N } from "./components/tab/tabGroup/index.js";
-import { Toast as R } from "./components/Toast/Toast.js";
-import { StaticToast as q } from "./components/StaticToast/StaticToast.js";
-import { Modal as z } from "./components/modal/index.js";
-import { Tooltip as J } from "./components/tooltip/index.js";
-import { useScrollLock as Q } from "./hooks/useScrollLock.js";
-import { ScrollContainer as W } from "./components/scrollContainer/index.js";
-import { FieldError as Y } from "./components/fieldError/index.js";
-import { HelperText as _ } from "./components/helperText/index.js";
-import { Drawer as oo } from "./components/drawer/index.js";
-import { Sheet as eo } from "./components/sheet/index.js";
-import { useClose as po } from "./hooks/useClose.js";
-import { useCloseOnBack as mo } from "./hooks/useCloseOnBack.js";
-import { useBTC as ao } from "./hooks/btcContext/useBtcContext.js";
-import { BTCProvider as uo } from "./hooks/btcContext/btcProvider.js";
+import { SearchableInputGroup as w } from "./components/SearchableInputGroup/index.js";
+import { Spinner as P } from "./components/Spinner/Spinner.js";
+import { Switch as E } from "./components/Switch/Switch.js";
+import { Stepper as L } from "./components/stepper/index.js";
+import { Tab as N } from "./components/tab/index.js";
+import { TabGroup as R } from "./components/tab/tabGroup/index.js";
+import { Toast as q } from "./components/Toast/Toast.js";
+import { StaticToast as z } from "./components/StaticToast/StaticToast.js";
+import { Modal as J } from "./components/modal/index.js";
+import { Tooltip as Q } from "./components/tooltip/index.js";
+import { useScrollLock as W } from "./hooks/useScrollLock.js";
+import { ScrollContainer as Y } from "./components/scrollContainer/index.js";
+import { FieldError as _ } from "./components/fieldError/index.js";
+import { HelperText as oo } from "./components/helperText/index.js";
+import { Drawer as eo } from "./components/drawer/index.js";
+import { Sheet as po } from "./components/sheet/index.js";
+import { useClose as mo } from "./hooks/useClose.js";
+import { useCloseOnBack as ao } from "./hooks/useCloseOnBack.js";
+import { useBTC as uo } from "./hooks/btcContext/useBtcContext.js";
+import { BTCProvider as io } from "./hooks/btcContext/btcProvider.js";
 import './assets/main.css';export {
-  uo as BTCProvider,
+  io as BTCProvider,
   p as Badge,
   m as Button,
   a as ButtonGroup,
   d as Checkbox,
   s as CompactFileUpload,
   u as Dialog,
-  oo as Drawer,
-  Y as FieldError,
-  c as FileUpload,
-  _ as HelperText,
+  eo as Drawer,
+  _ as FieldError,
+  i as FileUpload,
+  oo as HelperText,
   e as Icon,
-  S as Input,
-  z as Modal,
-  h as Navbar,
+  B as Input,
+  J as Modal,
+  g as Navbar,
   F as ProgressBar,
   b as RadioButton,
-  W as ScrollContainer,
-  D as SearchableInputGroup,
+  Y as ScrollContainer,
+  w as SearchableInputGroup,
   I as Select,
-  eo as Sheet,
-  U as Spinner,
-  q as StaticToast,
-  E as Stepper,
-  L as Tab,
-  N as TabGroup,
-  R as Toast,
-  J as Tooltip,
-  ao as useBTC,
-  po as useClose,
-  mo as useCloseOnBack,
-  Q as useScrollLock
+  po as Sheet,
+  P as Spinner,
+  z as StaticToast,
+  L as Stepper,
+  E as Switch,
+  N as Tab,
+  R as TabGroup,
+  q as Toast,
+  Q as Tooltip,
+  uo as useBTC,
+  mo as useClose,
+  ao as useCloseOnBack,
+  W as useScrollLock
 };

package/package.json

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