bmi-next-brokers 3.0.4 → 3.0.5
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.
package/dist/assets/Switch.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._switch_3r5ra_1{--switch-bg: var(--ui-blue-100);--switch-active-bg: #2054a5;--switch-active-text: #ffffff;--switch-inactive-text: #2054a5;--switch-inset: 4px;--switch-pad-y: 7px;--switch-pad-x: 12px;--switch-font: 16px;--switch-line-height: 19.2px;position:relative;display:flex;flex-direction:row;gap:0;padding:var(--switch-inset);border-radius:1000px;background:var(--switch-bg);width:fit-content}._extraSmall_3r5ra_25{--switch-inset: 3px;--switch-pad-y: 6px;--switch-pad-x: 12px;--switch-font: 12px;--switch-line-height: 14.4px}._small_3r5ra_33{--switch-inset: 3px;--switch-pad-y: 6px;--switch-pad-x: 12px;--switch-font: 14px;--switch-line-height: 16.8px}._large_3r5ra_41{--switch-inset: 4px;--switch-pad-y: 10px;--switch-pad-x: 16px;--switch-font: 18px;--switch-line-height: 21.6px}._extraLarge_3r5ra_49{--switch-inset: 6px;--switch-pad-y: 6px;--switch-pad-x: 14px;--switch-font: 20px;--switch-line-height: 24px}._switch_3r5ra_1 ._indicator_3r5ra_58{position:absolute;top:var(--switch-inset);bottom:var(--switch-inset);left:0;background:#2054a5;border-radius:1000px;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_3r5ra_1._simple_3r5ra_74 ._indicator_3r5ra_58{transition:transform .22s ease,width .22s ease}._switch_3r5ra_1._simple_3r5ra_74 ._option_3r5ra_80._active_3r5ra_80 ._label_3r5ra_80{animation:none}._switch_3r5ra_1 ._option_3r5ra_80{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 .25s ease,transform .25s 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_3r5ra_1 ._option_3r5ra_80:active{transform:scale(.94)}._switch_3r5ra_1 ._option_3r5ra_80._active_3r5ra_80{color:var(--switch-active-text)}._switch_3r5ra_1 ._option_3r5ra_80._active_3r5ra_80 ._label_3r5ra_80{animation:_pop_3r5ra_1 .32s ease}@keyframes _pop_3r5ra_1{0%{transform:scale(1)}45%{transform:scale(1.12)}to{transform:scale(1)}}._switch_3r5ra_1 ._label_3r5ra_80{line-height:5px}
|
|
@@ -4,7 +4,7 @@ export type SwitchOption = string | {
|
|
|
4
4
|
label: string;
|
|
5
5
|
icon?: IconName;
|
|
6
6
|
};
|
|
7
|
-
export type SwitchSize = "small" | "medium" | "large";
|
|
7
|
+
export type SwitchSize = "extraSmall" | "small" | "medium" | "large" | "extraLarge";
|
|
8
8
|
export interface SwitchProps {
|
|
9
9
|
/** opciones a mostrar: strings u objetos { label, icon } */
|
|
10
10
|
options: SwitchOption[];
|
|
@@ -1,106 +1,110 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useRef as p, useState as
|
|
3
|
-
import { Icon as
|
|
4
|
-
import '../../assets/Switch.css';const T = "
|
|
5
|
-
switch: "
|
|
1
|
+
import { jsxs as I, jsx as u } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as p, useState as j, useLayoutEffect as k } from "react";
|
|
3
|
+
import { Icon as D } from "../../icons/Icon.js";
|
|
4
|
+
import '../../assets/Switch.css';const R = "_extraSmall_3r5ra_25", T = "_small_3r5ra_33", Z = "_large_3r5ra_41", z = "_extraLarge_3r5ra_49", B = "_indicator_3r5ra_58", K = "_simple_3r5ra_74", O = "_option_3r5ra_80", V = "_active_3r5ra_80", X = "_label_3r5ra_80", Y = "_pop_3r5ra_1", c = {
|
|
5
|
+
switch: "_switch_3r5ra_1",
|
|
6
|
+
extraSmall: R,
|
|
6
7
|
small: T,
|
|
7
8
|
large: Z,
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
9
|
+
extraLarge: z,
|
|
10
|
+
indicator: B,
|
|
11
|
+
simple: K,
|
|
12
|
+
option: O,
|
|
13
|
+
active: V,
|
|
14
|
+
label: X,
|
|
15
|
+
pop: Y
|
|
16
|
+
}, A = {
|
|
17
|
+
extraSmall: 15,
|
|
18
|
+
small: 15,
|
|
19
|
+
medium: 19,
|
|
20
|
+
large: 19,
|
|
21
|
+
extraLarge: 19
|
|
22
|
+
}, J = ({
|
|
19
23
|
options: d = [],
|
|
20
24
|
active: l = 0,
|
|
21
|
-
onChange:
|
|
25
|
+
onChange: a,
|
|
22
26
|
size: h = "medium",
|
|
23
|
-
simpleAnimation:
|
|
24
|
-
iconSize:
|
|
27
|
+
simpleAnimation: m = !1,
|
|
28
|
+
iconSize: E,
|
|
25
29
|
className: N = "",
|
|
26
|
-
activeColor:
|
|
27
|
-
activeTextColor:
|
|
28
|
-
inactiveTextColor:
|
|
29
|
-
background:
|
|
30
|
-
equalWidth:
|
|
31
|
-
optionStyle:
|
|
30
|
+
activeColor: w,
|
|
31
|
+
activeTextColor: x,
|
|
32
|
+
inactiveTextColor: y,
|
|
33
|
+
background: L,
|
|
34
|
+
equalWidth: S = !0,
|
|
35
|
+
optionStyle: g
|
|
32
36
|
}) => {
|
|
33
|
-
const _ = p([]),
|
|
37
|
+
const _ = p([]), b = p(l), i = p(null), [$, v] = j({
|
|
34
38
|
left: 0,
|
|
35
39
|
width: 0
|
|
36
40
|
});
|
|
37
|
-
|
|
38
|
-
const t = _.current[l],
|
|
41
|
+
k(() => {
|
|
42
|
+
const t = _.current[l], r = _.current[b.current];
|
|
39
43
|
if (!t) return;
|
|
40
|
-
const
|
|
44
|
+
const o = _.current.filter(
|
|
41
45
|
(e) => e !== null
|
|
42
46
|
);
|
|
43
|
-
if (
|
|
44
|
-
const e = Math.max(...
|
|
45
|
-
|
|
47
|
+
if (o.forEach((e) => e.style.width = "auto"), S) {
|
|
48
|
+
const e = Math.max(...o.map((s) => s.offsetWidth));
|
|
49
|
+
o.forEach((s) => s.style.width = `${e}px`);
|
|
46
50
|
}
|
|
47
|
-
const
|
|
48
|
-
if (!
|
|
49
|
-
const e = Math.min(
|
|
50
|
-
|
|
51
|
+
const n = () => v({ left: t.offsetLeft, width: t.offsetWidth });
|
|
52
|
+
if (!m && r && r !== t) {
|
|
53
|
+
const e = Math.min(r.offsetLeft, t.offsetLeft), s = Math.max(
|
|
54
|
+
r.offsetLeft + r.offsetWidth,
|
|
51
55
|
t.offsetLeft + t.offsetWidth
|
|
52
56
|
);
|
|
53
|
-
|
|
57
|
+
v({ left: e, width: s - e }), i.current && clearTimeout(i.current), i.current = setTimeout(n, 160);
|
|
54
58
|
} else
|
|
55
|
-
|
|
56
|
-
return
|
|
57
|
-
|
|
59
|
+
n();
|
|
60
|
+
return b.current = l, () => {
|
|
61
|
+
i.current && clearTimeout(i.current);
|
|
58
62
|
};
|
|
59
|
-
}, [l, d,
|
|
60
|
-
const
|
|
61
|
-
...
|
|
62
|
-
...
|
|
63
|
-
...
|
|
64
|
-
...
|
|
63
|
+
}, [l, d, m, S]);
|
|
64
|
+
const W = E ?? A[h], M = {
|
|
65
|
+
...w && { "--switch-active-bg": w },
|
|
66
|
+
...x && { "--switch-active-text": x },
|
|
67
|
+
...y && { "--switch-inactive-text": y },
|
|
68
|
+
...L && { "--switch-bg": L }
|
|
65
69
|
};
|
|
66
|
-
return /* @__PURE__ */
|
|
70
|
+
return /* @__PURE__ */ I(
|
|
67
71
|
"div",
|
|
68
72
|
{
|
|
69
|
-
className: `${
|
|
70
|
-
style:
|
|
73
|
+
className: `${c.switch} ${c[h]} ${m ? c.simple : ""} ${N}`,
|
|
74
|
+
style: M,
|
|
71
75
|
children: [
|
|
72
|
-
/* @__PURE__ */
|
|
76
|
+
/* @__PURE__ */ u(
|
|
73
77
|
"span",
|
|
74
78
|
{
|
|
75
|
-
className:
|
|
79
|
+
className: c.indicator,
|
|
76
80
|
style: {
|
|
77
|
-
transform: `translateX(${
|
|
78
|
-
width: `${
|
|
81
|
+
transform: `translateX(${$.left}px)`,
|
|
82
|
+
width: `${$.width}px`
|
|
79
83
|
}
|
|
80
84
|
}
|
|
81
85
|
),
|
|
82
|
-
d.map((t,
|
|
83
|
-
const
|
|
84
|
-
return /* @__PURE__ */
|
|
86
|
+
d.map((t, r) => {
|
|
87
|
+
const o = typeof t == "string", n = o ? t : t.label, e = o ? null : t.icon, s = l === r;
|
|
88
|
+
return /* @__PURE__ */ I(
|
|
85
89
|
"div",
|
|
86
90
|
{
|
|
87
|
-
ref: (
|
|
88
|
-
_.current[
|
|
91
|
+
ref: (f) => {
|
|
92
|
+
_.current[r] = f;
|
|
89
93
|
},
|
|
90
94
|
role: "button",
|
|
91
95
|
tabIndex: 0,
|
|
92
|
-
onClick: () =>
|
|
93
|
-
onKeyDown: (
|
|
94
|
-
(
|
|
96
|
+
onClick: () => a == null ? void 0 : a(r),
|
|
97
|
+
onKeyDown: (f) => {
|
|
98
|
+
(f.key === "Enter" || f.key === " ") && (f.preventDefault(), a == null || a(r));
|
|
95
99
|
},
|
|
96
|
-
className: `${
|
|
97
|
-
style:
|
|
100
|
+
className: `${c.option} ${s ? c.active : ""}`,
|
|
101
|
+
style: g,
|
|
98
102
|
children: [
|
|
99
|
-
e && /* @__PURE__ */
|
|
100
|
-
|
|
103
|
+
e && /* @__PURE__ */ u(D, { name: e, size: W }),
|
|
104
|
+
n && /* @__PURE__ */ u("p", { className: c.label, children: n })
|
|
101
105
|
]
|
|
102
106
|
},
|
|
103
|
-
|
|
107
|
+
r
|
|
104
108
|
);
|
|
105
109
|
})
|
|
106
110
|
]
|
|
@@ -108,5 +112,5 @@ import '../../assets/Switch.css';const T = "_small_56b6x_29", Z = "_large_56b6x_
|
|
|
108
112
|
);
|
|
109
113
|
};
|
|
110
114
|
export {
|
|
111
|
-
|
|
115
|
+
J as Switch
|
|
112
116
|
};
|
package/package.json
CHANGED