bmi-next 1.0.13 → 1.0.14

package/dist/assets/index2.css

@@ -1 +1 @@
-._selectDrawer_81kt0_1{position:relative;width:100%}._selected_81kt0_6{border-radius:16px;display:flex;gap:5px;border:1px solid var(--negro-20);padding-inline:16px;height:52px;box-sizing:border-box;background-color:#fff;cursor:pointer;align-items:center;font-family:Poppins Regular;font-size:16px;line-height:19.2px}._selected_81kt0_6>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:100%;line-height:52px}
+._selectDrawer_1o9yc_1{position:relative;width:100%;display:flex;flex-direction:column;gap:5px}._label_1o9yc_9{margin-left:9px;font-family:Poppins Medium;font-size:14px;line-height:16.8px}._selected_1o9yc_16{border-radius:16px;display:flex;gap:5px;border:1px solid var(--negro-20);padding-inline:16px;height:52px;box-sizing:border-box;background-color:#fff;cursor:pointer;align-items:center;font-family:Poppins Regular;font-size:16px;line-height:19.2px}._selected_1o9yc_16>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:100%;line-height:52px}

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

@@ -35,6 +35,7 @@ export interface Option {
  * @property {boolean} [countries] - Flag opcional para mostrar las opciones de países (ejemplo de uso específico).
  * @property {Function} [onChange] - Función callback que se ejecuta cuando cambia la opción seleccionada.
  * @property {number} [zIndex] - Valor opcional para establecer el `z-index` del cajón.
+ * @property {string} [label] - Título del select opcional para mostrar encima del cajón.
  */
 export interface SelectProps {
     /** La opción actualmente seleccionada */
@@ -50,6 +51,7 @@ export interface SelectProps {
     countries?: boolean;
     onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
     zIndex?: number;
+    label?: string;
 }
 /**
  * Componente Select que permite al usuario seleccionar una opción de un conjunto de opciones.
@@ -75,4 +77,4 @@ export interface SelectProps {
  * @param {SelectProps} props - Props del componente Select
  * @returns {JSX.Element} El componente Select.
  */
-export declare function Select({ options, selected, setSelected, title, countries, onChange, zIndex, ...selectProps }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function Select({ options, selected, setSelected, title, countries, onChange, zIndex, label, ...selectProps }: SelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Select/index.js

@@ -1,75 +1,80 @@
-import { jsxs as v, Fragment as x, jsx as t } from "react/jsx-runtime";
-import { Icon as E } from "../../icons/icons.js";
-import { useState as a, useRef as h, useEffect as O } from "react";
-import { Image as P } from "../images/index.js";
-import { DrawerPortal as R } from "./DrawerPortal/index.js";
-import '../../assets/index2.css';const j = "_selectDrawer_81kt0_1", N = "_selected_81kt0_6", w = {
-  selectDrawer: j,
-  selected: N
+import { jsxs as o, Fragment as N, jsx as l } from "react/jsx-runtime";
+import { Icon as O } from "../../icons/icons.js";
+import { useState as c, useRef as y, useEffect as P } from "react";
+import { Image as R } from "../images/index.js";
+import { DrawerPortal as j } from "./DrawerPortal/index.js";
+import '../../assets/index2.css';const k = "_selectDrawer_1o9yc_1", A = "_label_1o9yc_9", F = "_selected_1o9yc_16", i = {
+  selectDrawer: k,
+  label: A,
+  selected: F
 };
-function q({
-  options: o,
-  selected: l,
-  setSelected: c,
-  title: g,
-  countries: p,
-  onChange: i,
-  zIndex: y,
-  ...b
+function B({
+  options: a,
+  selected: t,
+  setSelected: u,
+  title: b,
+  countries: g,
+  onChange: d,
+  zIndex: p,
+  label: f,
+  ..._
 }) {
-  const [r, u] = a(!1), [D, d] = a(!1), _ = h(null), [C, f] = a(0), s = h(null);
-  O(() => (r ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
+  const [s, m] = c(!1), [D, v] = c(!1), C = y(null), [I, h] = c(0), r = y(null);
+  P(() => (s ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
     document.body.style.overflow = "";
-  }), [r]);
-  const m = () => {
-    d(!0), setTimeout(() => {
-      u(!1), d(!1), f(0);
+  }), [s]);
+  const w = () => {
+    v(!0), setTimeout(() => {
+      m(!1), v(!1), h(0);
     }, 350);
-  }, k = (e) => {
-    if (c(e), s.current) {
-      s.current.value = e.value;
+  }, x = (e) => {
+    if (u(e), r.current) {
+      r.current.value = e.value;
       const n = new Event("change", { bubbles: !0 });
-      s.current.dispatchEvent(n);
+      r.current.dispatchEvent(n);
     }
-    m();
+    w();
   };
-  return /* @__PURE__ */ v(x, { children: [
-    /* @__PURE__ */ t(
+  return /* @__PURE__ */ o(N, { children: [
+    /* @__PURE__ */ l(
       "select",
       {
-        ref: s,
-        value: l.value,
+        ref: r,
+        value: t.value,
         onChange: (e) => {
-          const n = o.find((I) => I.value === e.target.value);
-          n && c(n), i && i(e);
+          const n = a.find((E) => E.value === e.target.value);
+          n && u(n), d && d(e);
         },
         style: { display: "none" },
-        ...b,
-        children: o.map((e) => /* @__PURE__ */ t("option", { value: e.value, children: e.label }, e.value))
+        ..._,
+        children: a.map((e) => /* @__PURE__ */ l("option", { value: e.value, children: e.label }, e.value))
       }
     ),
-    /* @__PURE__ */ t("div", { ref: _, className: w.selectDrawer, children: /* @__PURE__ */ v("div", { className: w.selected, onClick: () => u(!r), children: [
-      l.image && /* @__PURE__ */ t(P, { src: l.image.src, width: 30, height: 30 }),
-      /* @__PURE__ */ t("span", { children: l.label }),
-      /* @__PURE__ */ t("div", { style: { marginLeft: "auto" }, children: /* @__PURE__ */ t(E, { name: "ArrowDown" }) })
-    ] }) }),
-    /* @__PURE__ */ t(
-      R,
+    /* @__PURE__ */ o("div", { ref: C, className: i.selectDrawer, children: [
+      f && /* @__PURE__ */ l("label", { className: i.label, children: f }),
+      /* @__PURE__ */ o("div", { className: i.selected, onClick: () => m(!s), children: [
+        t.image && /* @__PURE__ */ l(R, { src: t.image.src, width: 30, height: 30 }),
+        /* @__PURE__ */ l("span", { children: t.label }),
+        /* @__PURE__ */ l("div", { style: { marginLeft: "auto" }, children: /* @__PURE__ */ l(O, { name: "ArrowDown" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ l(
+      j,
       {
-        isOpen: r,
-        handleClose: m,
-        dragPosition: C,
-        setDragPosition: f,
+        isOpen: s,
+        handleClose: w,
+        dragPosition: I,
+        setDragPosition: h,
         isClosing: D,
-        title: g,
-        options: o,
-        handleOptionClick: k,
-        countries: p,
-        zIndex: y
+        title: b,
+        options: a,
+        handleOptionClick: x,
+        countries: g,
+        zIndex: p
       }
     )
   ] });
 }
 export {
-  q as Select
+  B as Select
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bmi-next",
   "description": "Componentes de UI para proyecto BMI Next",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "author": "David Fernández Bolaños <david@bmiahorro.com>",
   "contributors": [
     "Jorge Martín <jorge@bmiahorro.com>",