bmi-next 1.0.24 → 1.0.26

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
- ._container_1y71m_1{display:flex;flex-direction:column;gap:5px;width:100%}._textareaContainer_1y71m_8{box-sizing:border-box;display:flex;align-items:flex-start;padding-inline:16px;border-radius:16px;border:solid 1px rgba(3,12,36,.2);gap:16px;padding-bottom:4px;background-color:#fff}._textareaContainer_1y71m_8:has(textarea:invalid){border:solid 1px #f64c71;transition:all .3s ease}._textareaContainer_1y71m_8:has(textarea:focus:not(:invalid)),._textareaContainer_1y71m_8:hover:has(textarea:valid){border:solid 1px #45c2d6;box-shadow:3px 3px #45c2d6;transition:all .3s ease}._textarea_1y71m_8{width:100%;font-size:19px;border:none;font-family:Poppins Regular;box-sizing:border-box;resize:none;min-height:140px;max-height:550px;padding-top:12px;padding-bottom:12px;line-height:24px;overflow-y:auto;field-sizing:content}._textarea_1y71m_8:focus{outline:none}._prefix_1y71m_52{opacity:.6;font-size:19px;font-family:Palaquin BMI}._textarea_1y71m_8:invalid{color:#f64c71}._textarea_1y71m_8:disabled{background-color:#fff}._labelContainer_1y71m_66{display:flex;justify-content:space-between;align-items:center}._labelContainer_1y71m_66>label{margin-left:9px;font-family:Poppins Medium;font-size:14px;line-height:16.8px}._invalidLabel_1y71m_79{color:var(--rojo)}
1
+ ._container_nqpxl_1{display:flex;flex-direction:column;gap:5px;width:100%}._textareaContainer_nqpxl_8{box-sizing:border-box;display:flex;align-items:flex-start;padding-inline:16px;border-radius:16px;border:solid 1px rgba(3,12,36,.2);gap:16px;padding-bottom:4px;background-color:#fff}._textareaContainer_nqpxl_8:has(textarea:invalid){border:solid 1px #f64c71;transition:all .3s ease}._textareaContainer_nqpxl_8:has(textarea:focus:not(:invalid)),._textareaContainer_nqpxl_8:hover:has(textarea:valid){border:solid 1px #45c2d6;box-shadow:3px 3px #45c2d6;transition:all .3s ease}._textarea_nqpxl_8{width:100%;font-size:16px;border:none;font-family:Poppins Regular;box-sizing:border-box;resize:none;min-height:140px;max-height:550px;padding-top:12px;padding-bottom:12px;line-height:24px;overflow-y:auto;field-sizing:content}._textarea_nqpxl_8:focus{outline:none}._prefix_nqpxl_52{opacity:.6;font-size:19px;font-family:Palaquin BMI}._textarea_nqpxl_8:invalid{color:#f64c71}._textarea_nqpxl_8:disabled{background-color:#fff}._labelContainer_nqpxl_66{display:flex;justify-content:space-between;align-items:center}._labelContainer_nqpxl_66>label{margin-left:9px;font-family:Poppins Medium;font-size:14px;line-height:16.8px}._invalidLabel_nqpxl_79{color:var(--rojo)}
@@ -1,95 +1,105 @@
1
- import { jsxs as r, Fragment as D, jsx as o } from "react/jsx-runtime";
2
- import { useRef as E, Fragment as A } from "react";
1
+ import { jsxs as o, Fragment as D, jsx as r } from "react/jsx-runtime";
2
+ import { useRef as h, Fragment as A } from "react";
3
3
  import { r as I } from "../../../index-Cp_B-Y3h.js";
4
4
  import { Icon as j } from "../../../icons/icons.js";
5
5
  import { Image as H } from "../../images/index.js";
6
- import '../../../assets/index3.css';const B = "_overlay_f1ngj_1", Y = "_closing_f1ngj_11", L = "_bottomDrawer_f1ngj_35", S = "_drawerHeader_f1ngj_73", C = "_drawerIndicator_f1ngj_87", X = "_drawerContent_f1ngj_98", $ = "_optionCountry_f1ngj_106", b = "_optionNormal_f1ngj_107", R = "_options_f1ngj_125", M = "_closeButton_f1ngj_137", x = "_separator_f1ngj_150", t = {
6
+ import '../../../assets/index3.css';const B = "_overlay_f1ngj_1", Y = "_closing_f1ngj_11", L = "_bottomDrawer_f1ngj_35", S = "_drawerHeader_f1ngj_73", C = "_drawerIndicator_f1ngj_87", R = "_drawerContent_f1ngj_98", X = "_optionCountry_f1ngj_106", $ = "_optionNormal_f1ngj_107", b = "_options_f1ngj_125", x = "_closeButton_f1ngj_137", M = "_separator_f1ngj_150", t = {
7
7
  overlay: B,
8
8
  closing: Y,
9
9
  bottomDrawer: L,
10
10
  drawerHeader: S,
11
11
  drawerIndicator: C,
12
- drawerContent: X,
13
- optionCountry: $,
14
- optionNormal: b,
15
- options: R,
16
- closeButton: M,
17
- separator: x
12
+ drawerContent: R,
13
+ optionCountry: X,
14
+ optionNormal: $,
15
+ options: b,
16
+ closeButton: x,
17
+ separator: M
18
18
  }, P = ({
19
- isOpen: h,
19
+ isOpen: E,
20
20
  handleClose: s,
21
- dragPosition: f,
22
- setDragPosition: i,
23
- isClosing: _,
24
- title: p,
25
- options: u,
26
- handleOptionClick: w,
27
- countries: N,
28
- zIndex: d
21
+ dragPosition: p,
22
+ setDragPosition: m,
23
+ isClosing: u,
24
+ title: f,
25
+ options: _,
26
+ handleOptionClick: y,
27
+ countries: w,
28
+ zIndex: l
29
29
  }) => {
30
- const y = d ? 50 : 70, l = E(0), m = E(0);
31
- if (!h) return null;
32
- const v = (e) => {
30
+ const N = l ? 50 : 70, d = h(0), i = h(0);
31
+ if (!E) return null;
32
+ const g = (e) => {
33
33
  const n = "touches" in e ? e.touches[0].clientY : e.clientY;
34
- l.current = n, m.current = n, document.addEventListener("mousemove", c), document.addEventListener("touchmove", c), document.addEventListener("mouseup", a), document.addEventListener("touchend", a);
35
- }, a = () => {
36
- document.removeEventListener("mousemove", c), document.removeEventListener("touchmove", c), document.removeEventListener("mouseup", a), document.removeEventListener("touchend", a), m.current - l.current > 100 ? s() : i(0);
37
- }, c = (e) => {
38
- const n = "touches" in e ? e.touches[0].clientY : e.clientY, g = n - l.current;
39
- m.current = n, g > 0 && i(g);
34
+ d.current = n, i.current = n, document.addEventListener("mousemove", a), document.addEventListener("touchmove", a), document.addEventListener("mouseup", c), document.addEventListener("touchend", c);
35
+ }, c = () => {
36
+ document.removeEventListener("mousemove", a), document.removeEventListener("touchmove", a), document.removeEventListener("mouseup", c), document.removeEventListener("touchend", c), i.current - d.current > 100 ? s() : m(0);
37
+ }, a = (e) => {
38
+ const n = "touches" in e ? e.touches[0].clientY : e.clientY, v = n - d.current;
39
+ i.current = n, v > 0 && m(v);
40
40
  };
41
41
  return I.createPortal(
42
- /* @__PURE__ */ r(D, { children: [
43
- /* @__PURE__ */ o(
42
+ /* @__PURE__ */ o(D, { children: [
43
+ /* @__PURE__ */ r(
44
44
  "div",
45
45
  {
46
- style: { zIndex: 2e3 + (d || 0) },
47
- className: `${t.overlay} ${_ ? t.closing : ""}`,
46
+ style: { zIndex: 2e3 + (l || 0) },
47
+ className: `${t.overlay} ${u ? t.closing : ""}`,
48
48
  onClick: s
49
49
  }
50
50
  ),
51
- /* @__PURE__ */ r(
51
+ /* @__PURE__ */ o(
52
52
  "div",
53
53
  {
54
- className: `${t.bottomDrawer} ${_ ? t.closing : ""}`,
54
+ className: `${t.bottomDrawer} ${u ? t.closing : ""}`,
55
55
  style: {
56
- transform: `translateY(${f ?? 0}px)`,
57
- zIndex: 2001 + (d || 0)
56
+ transform: `translateY(${p ?? 0}px)`,
57
+ zIndex: 2001 + (l || 0)
58
58
  },
59
59
  children: [
60
- /* @__PURE__ */ r(
60
+ /* @__PURE__ */ o(
61
61
  "header",
62
62
  {
63
63
  className: t.drawerHeader,
64
- onMouseDown: v,
65
- onTouchStart: v,
64
+ onMouseDown: g,
65
+ onTouchStart: g,
66
66
  children: [
67
- /* @__PURE__ */ o("div", { className: t.drawerIndicator }),
68
- /* @__PURE__ */ o("div", { className: t.closeButton, onClick: s, children: /* @__PURE__ */ o(j, { name: "Close", fill: "rgb(0 0 0/40%)" }) }),
69
- /* @__PURE__ */ o("p", { children: p })
67
+ /* @__PURE__ */ r("div", { className: t.drawerIndicator }),
68
+ /* @__PURE__ */ r("div", { className: t.closeButton, onClick: s, children: /* @__PURE__ */ r(j, { name: "Close", fill: "rgb(0 0 0/40%)" }) }),
69
+ /* @__PURE__ */ r("p", { children: f })
70
70
  ]
71
71
  }
72
72
  ),
73
- /* @__PURE__ */ o(
73
+ /* @__PURE__ */ r(
74
74
  "div",
75
75
  {
76
76
  className: t.drawerContent,
77
- style: { maxHeight: `${y}vh` },
78
- children: /* @__PURE__ */ o("div", { className: t.options, children: u.map(
79
- (e, n) => e.hidden ? null : /* @__PURE__ */ r(A, { children: [
80
- /* @__PURE__ */ r(
77
+ style: { maxHeight: `${N}vh` },
78
+ children: /* @__PURE__ */ r("div", { className: t.options, children: _.map(
79
+ (e, n) => e.hidden ? null : /* @__PURE__ */ o(A, { children: [
80
+ /* @__PURE__ */ o(
81
81
  "div",
82
82
  {
83
- className: `${N ? t.optionCountry : t.optionNormal}`,
84
- onClick: () => w(e),
83
+ className: `${w ? t.optionCountry : t.optionNormal}`,
84
+ onClick: () => y(e),
85
85
  children: [
86
- e.image && /* @__PURE__ */ o(H, { width: 30, height: 30, src: e.image.src }),
87
- e.label
86
+ e.image && /* @__PURE__ */ r(H, { width: 30, height: 30, src: e.image.src }),
87
+ /* @__PURE__ */ o("div", { style: { display: "flex", flexDirection: "column" }, children: [
88
+ /* @__PURE__ */ r("p", { style: { margin: 0 }, children: e.label }),
89
+ e.description && /* @__PURE__ */ r(
90
+ "p",
91
+ {
92
+ className: "small2Regular",
93
+ style: { margin: 0, opacity: 0.5 },
94
+ children: e.description
95
+ }
96
+ )
97
+ ] })
88
98
  ]
89
99
  },
90
100
  e.value
91
101
  ),
92
- n < u.length - 1 && /* @__PURE__ */ o("div", { className: t.separator })
102
+ n < _.length - 1 && /* @__PURE__ */ r("div", { className: t.separator })
93
103
  ] }, n)
94
104
  ) })
95
105
  }
@@ -10,6 +10,7 @@ import { ImgProps } from '../images';
10
10
  * @property {ImgProps} [image] - Imagen opcional para mostrar junto a la opción.
11
11
  * @property {IconPropsWithIconName} [icon] - Icono opcional para mostrar junto a la opción.
12
12
  * @property {boolean} [hidden] - Indica si la opción debe estar oculta en la lista.
13
+ * @property {string} [description] - Descripción opcional para mostrar junto a la opción.
13
14
  */
14
15
  export interface Option {
15
16
  /** El texto que se muestra para la opción */
@@ -22,6 +23,8 @@ export interface Option {
22
23
  icon?: IconPropsWithIconName;
23
24
  /** Indica si la opción debe estar oculta en la lista */
24
25
  hidden?: boolean;
26
+ /** Descripción opcional para mostrar junto a la opción */
27
+ description?: string;
25
28
  }
26
29
  /**
27
30
  * Props del componente Select.
@@ -1,37 +1,37 @@
1
- import { jsxs as m, jsx as e } from "react/jsx-runtime";
2
- import { Icon as y } from "../../icons/icons.js";
1
+ import { jsxs as c, jsx as e } from "react/jsx-runtime";
2
+ import { Icon as f } from "../../icons/icons.js";
3
3
  import { FieldError as h } from "../FieldError/index.js";
4
- import { useRef as p } from "react";
5
- import '../../assets/index.css';const b = "_container_1y71m_1", v = "_textareaContainer_1y71m_8", C = "_textarea_1y71m_8", N = "_prefix_1y71m_52", L = "_labelContainer_1y71m_66", u = "_invalidLabel_1y71m_79", a = {
6
- container: b,
7
- textareaContainer: v,
8
- textarea: C,
9
- prefix: N,
10
- labelContainer: L,
11
- invalidLabel: u
12
- }, $ = ({
4
+ import { useRef as b } from "react";
5
+ import '../../assets/index.css';const v = "_container_nqpxl_1", C = "_textareaContainer_nqpxl_8", q = "_textarea_nqpxl_8", y = "_prefix_nqpxl_52", N = "_labelContainer_nqpxl_66", L = "_invalidLabel_nqpxl_79", a = {
6
+ container: v,
7
+ textareaContainer: C,
8
+ textarea: q,
9
+ prefix: y,
10
+ labelContainer: N,
11
+ invalidLabel: L
12
+ }, T = ({
13
13
  icon: t,
14
14
  error: n,
15
- prefix: l,
15
+ prefix: i,
16
16
  className: r,
17
- onChange: i,
17
+ onChange: l,
18
18
  label: s,
19
19
  ...o
20
20
  }) => {
21
- var c;
22
- const d = p(null), x = `${a.textarea} ${r || ""}`, _ = (f) => {
23
- i == null || i(f);
21
+ var x;
22
+ const d = b(null), _ = `${a.textarea} ${r || ""}`, p = (m) => {
23
+ l == null || l(m);
24
24
  };
25
- return /* @__PURE__ */ m(
25
+ return /* @__PURE__ */ c(
26
26
  "div",
27
27
  {
28
28
  className: a.container,
29
- style: ((c = o.style) == null ? void 0 : c.display) === "none" ? { display: "none" } : {},
29
+ style: ((x = o.style) == null ? void 0 : x.display) === "none" ? { display: "none" } : {},
30
30
  children: [
31
31
  /* @__PURE__ */ e("div", { className: a.labelContainer, children: s && /* @__PURE__ */ e("label", { className: n ? a.invalidLabel : "", children: s }) }),
32
- /* @__PURE__ */ m("div", { className: a.textareaContainer, children: [
32
+ /* @__PURE__ */ c("div", { className: a.textareaContainer, children: [
33
33
  t && /* @__PURE__ */ e("div", { style: { marginTop: "9px" }, children: /* @__PURE__ */ e(
34
- y,
34
+ f,
35
35
  {
36
36
  name: t.name,
37
37
  fill: t.fill,
@@ -39,19 +39,19 @@ import '../../assets/index.css';const b = "_container_1y71m_1", v = "_textareaCo
39
39
  height: t.height
40
40
  }
41
41
  ) }),
42
- l && /* @__PURE__ */ e(
42
+ i && /* @__PURE__ */ e(
43
43
  "span",
44
44
  {
45
45
  className: a.prefix,
46
- children: l
46
+ children: i
47
47
  }
48
48
  ),
49
49
  /* @__PURE__ */ e(
50
50
  "textarea",
51
51
  {
52
52
  ref: d,
53
- className: x,
54
- onChange: _,
53
+ className: _,
54
+ onChange: p,
55
55
  ...o
56
56
  }
57
57
  )
@@ -62,5 +62,5 @@ import '../../assets/index.css';const b = "_container_1y71m_1", v = "_textareaCo
62
62
  );
63
63
  };
64
64
  export {
65
- $ as TextArea
65
+ T as TextArea
66
66
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "bmi-next",
3
3
  "description": "Componentes de UI para proyecto BMI Next",
4
- "version": "1.0.24",
4
+ "version": "1.0.26",
5
5
  "author": "David Fernández Bolaños <david@bmiahorro.com>",
6
6
  "contributors": [
7
7
  "Jorge Martín <jorge@bmiahorro.com>",