prometeo-design-system 2.4.3 → 2.5.0

package/dist/Select.es.js

@@ -1,561 +1,4 @@
-import { j as n } from "./jsx-runtime-ByW6EXIE.js";
-import { Icons as z } from "./Icons.es.js";
-import { c as l } from "./cn-B6yFEsav.js";
-import ie, { useRef as T, useLayoutEffect as Ce, memo as v, useState as de, useMemo as B, useCallback as R, useEffect as se } from "react";
-import Se from "./Spinner.es.js";
-import { createPortal as Ee } from "react-dom";
-import { u as ke } from "./useDragScroll-CHN9OMwn.js";
-import He from "./CheckBox.es.js";
-const Oe = (e) => {
-  let t = e;
-  for (; t && t !== document.body; ) {
-    const s = window.getComputedStyle(t).backgroundColor;
-    if (s && s !== "transparent" && s !== "rgba(0, 0, 0, 0)")
-      return s;
-    t = t.parentElement;
-  }
-  const a = window.getComputedStyle(document.body).backgroundColor;
-  return a && a !== "transparent" && a !== "rgba(0, 0, 0, 0)" ? a : "rgb(255, 255, 255)";
-};
-function Ie() {
-  const e = T(null);
-  return Ce(() => {
-    if (!e.current || !e.current.parentElement) return;
-    const t = Oe(e.current.parentElement);
-    e.current.style.backgroundColor = t;
-  }, []), {
-    ref: e
-  };
-}
-const fe = (e) => {
-  const { variant: t, className: a } = e, u = {
-    default: "text-neutral-medium-default pt-[1px]",
-    error: "text-error-medium-default pt-[1px]",
-    success: "text-success-medium-default"
-  }, s = {
-    default: /* @__PURE__ */ n.jsx(z.Info, { size: 16, className: "text-neutral-medium-default " }),
-    error: /* @__PURE__ */ n.jsx(z.Error, { size: 16, className: "text-error-medium-default" }),
-    success: /* @__PURE__ */ n.jsx(z.Check, { size: 16, className: "text-success-medium-default" })
-  };
-  return /* @__PURE__ */ n.jsx("div", { ref: e.ref, className: l("pl-3", a), children: typeof e.children == "string" ? /* @__PURE__ */ n.jsxs("div", { className: "flex gap-0.5 items-start", children: [
-    s[t],
-    /* @__PURE__ */ n.jsx("p", { className: l(" prometeo-fonts-body-small", u[t]), children: e.children })
-  ] }) : e.children });
-};
-fe.displayName = "HelperText";
-const ze = v(fe), Me = {
-  default: {
-    container: "text-neutral-default-default border-neutral-default-default ",
-    icon: ""
-  },
-  error: {
-    container: "",
-    icon: ""
-  },
-  success: {
-    container: "",
-    icon: ""
-  }
-}, ce = {
-  icon: " text-neutral-default-disabled",
-  container: " border-neutral-strong-default text-neutral-default-disabled"
-}, me = ({ id: e, label: t, onRemove: a, className: u, disabled: s, variant: c = "default" }) => /* @__PURE__ */ n.jsxs(
-  "div",
-  {
-    className: l(
-      "inline-flex max-w-[calc(50%-0.25rem)] items-center gap-1 px-2 py-1 bg-inherit text-xs rounded-lg border",
-      Me[c].container,
-      s && ce.container
-    ),
-    children: [
-      /* @__PURE__ */ n.jsx("span", { className: "truncate w-max ", children: t }),
-      a && /* @__PURE__ */ n.jsx(
-        "button",
-        {
-          onMouseDown: (x) => {
-            s || (x.stopPropagation(), x.preventDefault(), a?.(e));
-          },
-          className: l(
-            "shrink-0 p-0.5 transition-all duration-200 hover:text-neutral-default-hover cursor-pointer z-50 text-neutral-default-default hover:scale-105",
-            s && "cursor-default hover:scale-100",
-            u
-          ),
-          type: "button",
-          tabIndex: -1,
-          children: /* @__PURE__ */ n.jsx(z.Close, { size: 18, className: l(s && ce.icon) })
-        }
-      )
-    ]
-  }
-);
-me.displayName = "Chip";
-const _e = v(me);
-function g(e, t) {
-  if (typeof t == "function")
-    return t(e);
-  const a = t?.split(".");
-  let u = e;
-  for (const s of a)
-    if (u && typeof u == "object" && s in u)
-      u = u[s];
-    else
-      return;
-  return u;
-}
-const re = {
-  default: {
-    container: "",
-    input: l(
-      "border-neutral-default-default text-neutral-default-default",
-      "focus:ring-primary-default-default focus:ring-[1px] focus:border-primary-default-default ",
-      "hover:border-primary-default-default"
-    ),
-    label: l(
-      "text-neutral-medium-default",
-      "peer-focus:text-primary-default-default"
-    ),
-    icon: l(
-      "text-neutral-medium-default",
-      "peer-focus:text-primary-default-default"
-    )
-  },
-  error: {
-    container: "",
-    input: l(
-      "border-error-default-default text-neutral-default-default hover:border-error-default-hover",
-      "focus:border-error-default focus:border-2",
-      "focus:ring-0 focus:ring-error-default/20"
-    ),
-    label: l(
-      "text-error-light",
-      "peer-focus:text-error-light"
-    ),
-    icon: l(
-      "text-error-medium-default",
-      "peer-focus:text-error-light"
-    )
-  },
-  success: {
-    container: "",
-    input: l(
-      "border-success-default-default text-neutral-default-default",
-      "focus:border-success-default focus:border-2",
-      "focus:ring-0 focus:ring-success-default/20"
-    ),
-    label: l(
-      "text-success",
-      "peer-focus:text-success-light"
-    ),
-    icon: l(
-      "text-success-medium-default",
-      "peer-focus:text-success-light"
-    )
-  }
-}, ne = {
-  input: l(
-    "border-neutral-strong-default text-neutral-default-default",
-    "focus:ring-primary-default-default focus:ring-[1px] focus:border-primary-default-default ",
-    "hover:border-primary-default-default"
-  ),
-  label: l(
-    "text-neutral-medium-disabled",
-    "peer-focus:text-primary-default-default"
-  ),
-  icon: l(
-    "text-neutral-medium-disabled",
-    "peer-focus:text-primary-default-default"
-  )
-}, Le = ({
-  label: e,
-  onOptionClick: t,
-  value: a,
-  isLoading: u = !1,
-  options: s,
-  multiple: c = !1,
-  onClear: x,
-  onClose: p,
-  className: i,
-  id: k,
-  emptyMessage: G = "No hay opciones disponibles",
-  optionValue: m,
-  optionLabel: j,
-  renderOption: M,
-  placeholder: w,
-  renderSelection: C,
-  containerClassName: le,
-  buttonClassName: W,
-  dropdownClassName: _,
-  displayMode: A = "compact",
-  onRemoveOption: L,
-  width: P = "100%",
-  height: N,
-  labelVariant: y = "default",
-  attachToParent: f = !1,
-  name: o,
-  overflow: D = "wrap",
-  onChange: h,
-  helperComponent: S,
-  errorComponent: E,
-  disabled: H = !1,
-  variant: U = "default"
-}) => {
-  const [O, $] = de(!1), q = T(null), J = T(null), ae = T(null), { ref: ge } = Ie(), { bind: I, ref: he } = ke({
-    axis: "x",
-    cursor: { idle: "default", dragging: "grabbing" }
-  }), F = a && a.length > 0, Q = B(() => s?.filter((r) => a?.includes(g(r, m))), [a, m, s]), be = () => y === "static" ? "relative prometeo-fonts-label-large" : O || F ? "absolute top-0 -translate-y-1/2 left-2 scale-90 px-1 prometeo-fonts-body-medium" : "absolute top-1/2 -translate-y-1/2 scale-100 prometeo-fonts-body-large", X = {};
-  P && P !== "100%" && (X.width = P), N && (X.height = N);
-  const ye = R(() => C ? { height: D === "scroll" ? "48px" : "max-content" } : N ? { height: N } : {}, [N, D, C]);
-  se(() => {
-    if (!O) return;
-    const r = (d) => {
-      const b = d.target;
-      if (d.type === "mousedown") {
-        if (q.current?.contains(b) || J.current?.contains(b))
-          return;
-        $(!1);
-      }
-      if (d.type === "scroll") {
-        if (J.current?.contains(b))
-          return;
-        $(!1);
-      }
-      d.type === "resize" && $(!1);
-    };
-    return document.addEventListener("mousedown", r), window.addEventListener("scroll", r, !0), window.addEventListener("resize", r, !0), () => {
-      document.removeEventListener("mousedown", r), window.removeEventListener("scroll", r, !0), window.removeEventListener("resize", r, !0);
-    };
-  }, [O]);
-  const oe = R(() => {
-    $((r) => !r);
-  }, []), K = B(() => s.map((r) => ({
-    id: g(r, m),
-    value: g(r, m),
-    label: g(r, j)
-  })), [s, m, j]), Y = T(() => {
-  });
-  Y.current = (r) => {
-    if (c) {
-      const d = a || [], b = d.includes(r.value), ue = K.filter((te) => d.includes(te.value));
-      let ee = [];
-      b ? ee = ue.filter((te) => te.value !== r.value) : ee = [...ue, r], h?.(ee, o);
-    } else
-      h?.([r], o);
-  };
-  const De = R((r) => {
-    t?.(r, o), Y.current?.(r), c || ($(!1), p?.());
-  }, [c, t, p, o]), Ne = (r) => {
-    r.preventDefault(), r.stopPropagation(), r.target.blur(), x?.(), h?.([], o);
-  }, Z = R((r) => {
-    c || h?.([], o);
-    const d = s.find((b) => g(b, m) === r);
-    if (d) {
-      const b = {
-        id: g(d, m),
-        label: g(d, j),
-        value: g(d, m)
-      };
-      t?.(b, o), Y.current?.(b), L?.(d);
-    }
-  }, [t, L, j, m, s, o, c, h]), ve = R((r) => {
-    Z(r);
-  }, [Z]), je = B(() => y === "static" && w ? w : "", [y, w]), V = B(
-    () => new Set(Q.map((r) => g(r, m))),
-    [Q, m]
-  ), we = B(
-    () => K.filter((r) => V.has(r.id)),
-    [K, V]
-  );
-  return /* @__PURE__ */ n.jsxs(
-    "div",
-    {
-      className: l(
-        "relative bg-inherit select-none w-full",
-        i,
-        y === "static" && "mt-2"
-      ),
-      ref: q,
-      style: X,
-      draggable: !1,
-      children: [
-        /* @__PURE__ */ n.jsxs("div", { className: l("relative bg-inherit ", le), children: [
-          /* @__PURE__ */ n.jsx(
-            "label",
-            {
-              htmlFor: k,
-              ref: ge,
-              className: l(
-                "left-3 pointer-events-none bg-inherit z-10",
-                y === "default" && "transition-all duration-200 ease-in-out",
-                be(),
-                F || O ? re[U].label : "text-neutral-medium-default",
-                H && ne.label
-              ),
-              children: e
-            }
-          ),
-          /* @__PURE__ */ n.jsxs(
-            "div",
-            {
-              role: "button",
-              id: k,
-              onClick: (r) => {
-                r.preventDefault(), r.stopPropagation(), oe();
-              },
-              onKeyDown: (r) => {
-                (r.key === "Enter" || r.key === " ") && (r.preventDefault(), r.stopPropagation(), oe());
-              },
-              tabIndex: 0,
-              className: l(
-                "w-full px-2 text-left border rounded-lg transition-all duration-200 ease-in-out",
-                "flex items-center justify-start bg-inherit gap-2 ",
-                "focus:outline-none",
-                A === "chips" && c && F ? "min-h-12 py-2" : !N && "h-12 min-h-12",
-                re[U].input,
-                H && ne.input,
-                W
-              ),
-              style: ye(),
-              children: [
-                /* @__PURE__ */ n.jsx(
-                  "div",
-                  {
-                    className: l(
-                      "flex-1 overflow-x-auto overflow-y-hidden px-1 prometeo-scrollbar-none  ",
-                      C ? " " : ""
-                    ),
-                    ref: he,
-                    onPointerDown: I.onPointerDown,
-                    onPointerMove: I.onPointerMove,
-                    onPointerUp: I.onPointerUp,
-                    onPointerLeave: I.onPointerLeave,
-                    onPointerCancel: I.onPointerCancel,
-                    onClickCapture: I.onClickCapture,
-                    children: C ? ie.createElement(v(
-                      C,
-                      (r, d) => r.disabled === d.disabled && r.multiple === d.multiple
-                    ), {
-                      selectedOptions: Q,
-                      placeholder: w,
-                      multiple: c,
-                      onRemoveOption: ve,
-                      disabled: H
-                    }) : /* @__PURE__ */ n.jsx(
-                      xe,
-                      {
-                        displayMode: A,
-                        selectedOptions: we,
-                        placeholder: je,
-                        onRemoveOption: Z,
-                        multiple: c,
-                        className: l(D === "scroll" ? "flex-nowrap" : "flex-wrap"),
-                        disabled: H
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ n.jsxs("div", { className: "flex items-center gap-2", children: [
-                  u && /* @__PURE__ */ n.jsx(Se, { size: "small", variant: "clip", className: "mt-2", speedMultiplier: 0.7 }),
-                  F && x && /* @__PURE__ */ n.jsx(
-                    "button",
-                    {
-                      onMouseDown: (r) => {
-                        r.preventDefault(), r.stopPropagation(), Ne(r);
-                      },
-                      type: "button",
-                      tabIndex: -1,
-                      children: /* @__PURE__ */ n.jsx(z.Cancel, { size: 24, className: l(" cursor-pointer transition-all", re[U].icon) })
-                    }
-                  ),
-                  /* @__PURE__ */ n.jsx(
-                    z.ChevronDown,
-                    {
-                      size: 20,
-                      className: l(
-                        "transition-transform text-neutral-default-default",
-                        O ? "rotate-180" : "",
-                        H && ne.icon
-                      )
-                    }
-                  )
-                ] })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ n.jsx(
-          $e,
-          {
-            options: M ? s : K,
-            selectedOptionsIds: V,
-            onOptionClick: De,
-            emptyMessage: G,
-            dropdownClassName: _,
-            multiple: c,
-            attachToParent: f,
-            selectRef: q,
-            dropdownRef: J,
-            isOpen: O,
-            renderOption: M,
-            optionLabel: j,
-            optionValue: m,
-            helperComponentRef: ae,
-            disabled: H,
-            labelVariant: y
-          }
-        ),
-        (E || S) && /* @__PURE__ */ n.jsx(
-          ze,
-          {
-            ref: ae,
-            variant: U,
-            className: "mt-1",
-            children: E || S
-          }
-        )
-      ]
-    }
-  );
-}, Ke = v(Le, (e, t) => e.value === t.value && e.options === t.options && e.isLoading === t.isLoading && e.disabled === t.disabled && e.errorComponent === t.errorComponent && e.helperComponent === t.helperComponent && e.variant === t.variant && e.label === t.label && e.id === t.id && e.name === t.name && e.placeholder === t.placeholder);
-function Pe({
-  options: e,
-  onOptionClick: t,
-  dropdownClassName: a,
-  emptyMessage: u,
-  selectedOptionsIds: s,
-  multiple: c,
-  attachToParent: x,
-  selectRef: p,
-  dropdownRef: i,
-  isOpen: k,
-  renderOption: G,
-  optionValue: m,
-  optionLabel: j,
-  helperComponentRef: M,
-  disabled: w,
-  labelVariant: C
-}) {
-  const W = C === "static" ? -24 : 4, [_, A] = de("down"), L = (f) => {
-    if (!i.current || !p.current) return;
-    const o = p.current.getBoundingClientRect();
-    switch (f || _) {
-      case "down":
-        i.current.style.top = `${o.top + o.height - (M?.current?.offsetHeight ? M?.current?.offsetHeight + 4 : 0)}px`;
-        break;
-      case "up":
-        i.current.style.top = "auto", i.current.style.bottom = `${window.innerHeight - o.top + W}px`;
-        break;
-    }
-    i.current.style.left = `${o.left}px`, i.current.style.width = `${o.width}px`;
-  }, P = () => {
-    if (!i.current || !p.current) return _;
-    const f = p.current.getBoundingClientRect(), o = f.bottom + 240 < window.innerHeight, D = f.top - 240 - W > 0;
-    let h = "down";
-    return o ? h = "down" : D && (h = "up"), h;
-  }, N = (f) => {
-    if (!(!i.current || !p.current)) {
-      if (i.current.style.transition = "max-height 0.2s ease,opacity 0.2s ease", !f) {
-        i.current.style.maxHeight = "0", i.current.style.opacity = "0", i.current.style.pointerEvents = "none";
-        return;
-      }
-      if (!x) {
-        const o = P();
-        A(o), L(o);
-      }
-      i.current.style.maxHeight = "240px", i.current.style.opacity = "1", i.current.style.pointerEvents = "auto";
-    }
-  };
-  se(() => {
-    x || !p.current || !k || L();
-  }, [s]), se(() => {
-    N(k);
-  }, [k]);
-  const y = /* @__PURE__ */ n.jsx(
-    "div",
-    {
-      ref: i,
-      style: {
-        opacity: "0",
-        maxHeight: "0"
-      },
-      className: l(
-        " z-50 w-full mt-1 bg-neutral-default-default border border-neutral-default-default rounded-md shadow-lg",
-        "max-h-60 overflow-auto",
-        x ? "absolute z-50 " : "fixed z-100 top-0 left-0",
-        _ === "up" ? "h-auto" : "min-h-52",
-        a
-      ),
-      children: e.length === 0 ? /* @__PURE__ */ n.jsx("div", { className: "px-3 py-2 text-neutral-medium-default", children: u }) : e.map((f) => {
-        const o = typeof f.id < "u" ? f.id : g(f, m), D = s.has(o), h = () => {
-          t({
-            id: o,
-            label: String(g(f, j)),
-            value: g(f, m)
-          });
-        };
-        return G ? ie.createElement(v(G, (S, E) => S.isSelected === E.isSelected && S.option === E.option && S.disabled === E.disabled && S.multiple === E.multiple), {
-          key: o,
-          option: f,
-          isSelected: D,
-          multiple: c,
-          onSelect: h,
-          disabled: w
-        }) : /* @__PURE__ */ n.jsx(
-          pe,
-          {
-            option: f,
-            multiple: c,
-            isSelected: D,
-            onSelect: t,
-            disabled: w
-          },
-          o
-        );
-      })
-    }
-  );
-  return x ? y : Ee(y, document.body);
-}
-const $e = v(Pe, (e, t) => e.options === t.options && e.selectedOptionsIds === t.selectedOptionsIds && e.multiple === t.multiple && e.disabled === t.disabled && e.emptyMessage === t.emptyMessage && e.renderOption === t.renderOption && e.isOpen === t.isOpen && e.attachToParent === t.attachToParent && e.optionValue === t.optionValue && e.optionLabel === t.optionLabel), pe = v(({ option: e, isSelected: t, onSelect: a, multiple: u, disabled: s }) => (
-  // biome-ignore lint/a11y/noStaticElementInteractions: no keyboard interaction needed
-  /* @__PURE__ */ n.jsxs(
-    "div",
-    {
-      onMouseDown: (c) => {
-        c.preventDefault(), c.stopPropagation(), !s && a?.(e);
-      },
-      className: l(
-        "px-3 py-2 cursor-pointer flex items-center transition-colors text-neutral-default-default ",
-        t ? "bg-neutral-medium-selected text-primary-default-default" : "hover:bg-neutral-medium-hover text-neutral-default-hover",
-        s && "text-neutral-default-disabled hover:bg-neutral-default-default"
-      ),
-      children: [
-        u && /* @__PURE__ */ n.jsx(
-          He,
-          {
-            checked: t,
-            disabled: s
-          }
-        ),
-        /* @__PURE__ */ n.jsx("span", { children: e.label })
-      ]
-    }
-  )
-), (e, t) => e.isSelected === t.isSelected);
-pe.displayName = "DefaultOptionRenderer";
-const xe = v(({ selectedOptions: e, placeholder: t, onRemoveOption: a, displayMode: u, multiple: s, className: c, disabled: x }) => e?.length === 0 ? t ? /* @__PURE__ */ n.jsx("span", { className: "text-neutral-medium-default opacity-50", children: t }) : null : u === "chips" && s ? /* @__PURE__ */ n.jsx("div", { className: l("flex items-center gap-1 ", c), children: e.map((p) => /* @__PURE__ */ n.jsx(
-  _e,
-  {
-    id: p.id,
-    label: p.label,
-    onRemove: a,
-    disabled: x
-  },
-  p.id
-)) }) : e?.length === 1 ? /* @__PURE__ */ n.jsx("span", { children: e[0].label }) : /* @__PURE__ */ n.jsxs("span", { children: [
-  e?.length,
-  " seleccionados"
-] }));
-xe.displayName = "DefaultSelectionDisplay";
+import { S as f } from "./Select-CxJFcGuQ.js";
 export {
-  Ke as default
+  f as default
 };

package/dist/SelectFormik.es.js

@@ -1,21 +1,35 @@
-import { j as m } from "./jsx-runtime-ByW6EXIE.js";
-import { useField as s } from "formik";
-import i from "./Select.es.js";
-const p = (e) => {
-  const [o, r, t] = s(e.name), a = (n) => {
-    t.setValue(n.map((l) => l.value));
-  };
+import { j as m } from "./jsx-runtime-DKDX3adD.js";
+import { useField as c } from "formik";
+import { S as f } from "./Select-CxJFcGuQ.js";
+import { useRef as d, useEffect as v } from "react";
+function n(r) {
+  return Array.isArray(r) && r.every(
+    (e) => typeof e == "string" || typeof e == "number"
+  );
+}
+const S = (r) => {
+  const [e, o, a] = c(r.name), t = d(!1);
+  v(() => {
+    t.current || (t.current = !0, n(e.value) || (console.warn(
+      `SelectFormik: El valor del campo "${r.name}" no es un array válido de string | number. Valor recibido:`,
+      e.value,
+      "Inicializando como array vacío."
+    ), a.setValue([])));
+  }, [e.value, a, r.name]);
+  const l = (u) => {
+    a.setValue(u.map((s) => s.value));
+  }, i = n(e.value) ? e.value : [];
   return /* @__PURE__ */ m.jsx(
-    i,
+    f,
     {
-      ...e,
-      value: o.value,
-      onChange: a,
-      variant: r.error ? "error" : "default",
-      errorComponent: r.error || void 0
+      ...r,
+      value: i,
+      onChange: l,
+      variant: o.error ? "error" : "default",
+      errorComponent: o.error || void 0
     }
   );
 };
 export {
-  p as default
+  S as default
 };

package/dist/SelectFormikLegacy.es.js

@@ -1,4 +1,4 @@
-import { j as t } from "./jsx-runtime-ByW6EXIE.js";
+import { j as t } from "./jsx-runtime-DKDX3adD.js";
 import { Icons as g } from "./Icons.es.js";
 import { c as d } from "./cn-B6yFEsav.js";
 import { useField as $, ErrorMessage as q } from "formik";

package/dist/SelectSearch.d.ts

@@ -0,0 +1,4 @@
+export {}
+import PrometeoDesignSystem from './exports/SelectSearch'
+export default PrometeoDesignSystem
+export {}