prometeo-design-system 3.1.5 → 3.1.7

package/dist/SelectSearch.d.ts

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

package/dist/SelectSearch.es.js

@@ -0,0 +1,284 @@
+import { j as Y } from "./jsx-runtime-GkKLlHH4.js";
+import { g as i } from "./utils-X4-h3cum.js";
+import { useState as A, useRef as E, useEffect as b, useMemo as ee, useCallback as te } from "react";
+import Z from "./Select.es.js";
+function re(e) {
+  const {
+    options: O,
+    fetcher: d,
+    asyncMode: w = "fetch_in_open",
+    disabled: S = !1,
+    debounceDelay: P = 500,
+    minCharacters: T = 3,
+    optionLabel: h,
+    optionValue: s,
+    controlledValue: f,
+    isOpen: F,
+    inputRef: y,
+    name: k
+  } = e || {}, M = O ? O.filter((t) => t != null) : [], [V, g] = A(M || []), [D, I] = A(M || []), [c, N] = A(""), [W, p] = A(!1), [J, U] = A(!1), l = E(null), C = E(null), m = E(!1), L = E(d), _ = e?.multiple === !0 || !1, j = E(_ ? [] : void 0), [a, v] = A(_ ? [] : void 0);
+  b(() => {
+    L.current = d;
+  }, [d]), b(() => {
+    if (_) {
+      const t = z(f, "value");
+      v(t);
+    } else
+      f != null ? v(f) : v(void 0);
+  }, [f]), b(() => {
+    j.current = f !== void 0 ? f : a;
+  }, [f, a]), b(() => {
+    if (e?.options) {
+      const t = e.options.filter((n) => n != null);
+      g(t), I(t);
+    }
+  }, [e?.options]);
+  const B = ee(() => (t, n) => new Promise((o, r) => {
+    l.current && clearTimeout(l.current), l.current = setTimeout(() => t(c).then(o).catch(r), n);
+  }), [c]), ne = (t) => {
+    const n = f !== void 0, o = (r) => s ? i(r, s) : i(r, "id");
+    if (e?.multiple === !0) {
+      const r = j.current || [];
+      let u;
+      r.some((x) => o(x) === o(t)) ? u = r.filter((x) => o(x) !== o(t)) : u = [...r, t], n ? (j.current = u, e?.onChange?.(u, k)) : (j.current = u, v(u), e?.onChange?.(u, k));
+    } else
+      n ? (j.current = t, e?.onChange?.(t, k)) : (j.current = t, v(t), e?.onChange?.(t, k));
+  }, q = (t) => (e?.onFetchingStart?.(), L.current?.(t) || Promise.resolve([])), z = (t, n) => Array.isArray(t) ? (t.some((o) => typeof o != "object" || o === null) && console.debug(`El valor del ${n || "resultado del fetcher"} contiene elementos no válidos (null,undefined, no-object)`, t), t?.filter((o) => o != null) || []) : (console.debug(`El valor del ${n || "resultado del fetcher"} no es un Array (tipo de dato obtenido: ${typeof t})`), []), $ = te((t, n) => t.length === 0 ? n : s ? n.filter((o) => !t.some((r) => i(r, s) === i(o, s))) : n.filter((o) => !t.some((r) => i(r, "id") === i(o, "id"))), [s]);
+  b(() => {
+    const t = e?.subscribeOpenChange;
+    if (!t) return;
+    const n = t((o) => {
+      U(o);
+    });
+    return () => {
+      n && n();
+    };
+  }, [e?.subscribeOpenChange]);
+  const G = F !== void 0 ? F : J;
+  b(() => {
+    if (!S && L.current && w === "fetch_on_type") {
+      if (!c || c === "" || c.length < T) {
+        l.current && clearTimeout(l.current), p(!1);
+        return;
+      }
+      const t = B(q, P);
+      p(!0), t.then((n) => {
+        const o = z(n);
+        g(o);
+      }).finally(() => {
+        p(!1), e?.onFetchingEnd?.();
+      });
+    }
+  }, [w, c, S, P, B, T]), b(() => {
+    if (!S)
+      if (G) {
+        if (e?.onOpen?.(), w === "fetch_in_open") {
+          if (!L.current)
+            return;
+          p(!0), q().then((t) => {
+            const n = z(t);
+            g(() => {
+              const o = n.filter((r) => {
+                if (s)
+                  return i(r, s) !== void 0;
+              });
+              return _ && a.length > 0 ? [...$(a, o), ...a] : o;
+            });
+          }).finally(() => {
+            p(!1), e?.onFetchingEnd?.();
+          });
+        }
+      } else
+        e?.onClose?.();
+  }, [G, w, S]);
+  const H = (t, n) => t?.filter((o) => {
+    if (h)
+      return i(o, h)?.toLowerCase().includes(n.toLowerCase());
+    {
+      const r = o;
+      switch (typeof r) {
+        case "string":
+          return r?.toLowerCase().includes(n.toLowerCase());
+        case "number":
+          return r.toString().includes(n);
+        case "object":
+          return Object.values(r).some((R) => R.toString()?.toLowerCase().includes(n.toLowerCase()));
+        default:
+          return !1;
+      }
+    }
+  }) || [], oe = (t) => t?.sort((n, o) => {
+    if (h)
+      return i(n, h) < i(o, h) ? -1 : 1;
+    {
+      const u = ["label", "name", "value"].find((K) => typeof n == "object" && Object.keys(n).includes(K)), R = n, x = o;
+      switch (typeof R) {
+        case "string":
+          return R < x ? -1 : 1;
+        case "number":
+          return R < x ? -1 : 1;
+        case "object":
+          if (u) {
+            const K = i(n, u), le = i(o, u);
+            return K < le ? -1 : 1;
+          } else
+            return 1;
+        default:
+          return 1;
+      }
+    }
+  }) || [], Q = (t) => {
+    const n = typeof y == "function" ? y() : y;
+    t.target === n?.current && (C.current && clearTimeout(C.current), m.current || (m.current = !0, e?.onTypeStart?.()), C.current = setTimeout(() => {
+      m.current = !1;
+    }, P));
+  };
+  b(() => {
+    if (c === "")
+      I(oe(V));
+    else if (_) {
+      const t = $(a, V);
+      I([...H(t, c), ...a]);
+    } else {
+      const t = $([a], V);
+      I([...H(t, c), a]);
+    }
+  }, [V]), b(() => (document.addEventListener("keydown", Q), () => {
+    document.removeEventListener("keydown", Q);
+  }), []);
+  const X = () => {
+    N("");
+  };
+  return {
+    inputValue: c,
+    setInputValue: N,
+    cleanInputValue: X,
+    cleanOptions: () => {
+      if (_)
+        g(a);
+      else {
+        const t = a;
+        g(t ? [t] : []);
+      }
+      X();
+    },
+    clearValue: () => {
+      v(_ ? [] : void 0);
+    },
+    filteredOptions: D,
+    isLoading: W,
+    value: a,
+    setValue: v,
+    onOptionClick: ne
+  };
+}
+const he = (e) => {
+  const O = E(null), { asyncMode: d = "fetch_in_open" } = e, w = (l, C, m) => {
+    const L = {
+      options: l.options,
+      fetcher: l.fetcher,
+      asyncMode: C,
+      debounceDelay: l.debounceDelay,
+      minCharacters: l.minCharacters,
+      disabled: l.disabled,
+      optionValue: l.optionValue,
+      optionLabel: l.optionLabel,
+      onFetchingStart: () => {
+        C === "fetch_on_type" && m.current?.open();
+      },
+      onTypeStart: () => {
+        !l?.fetcher && m.current?.open();
+      },
+      inputRef: () => m.current?.searchInputRef,
+      subscribeOpenChange: m.current?.subscribeOpenChange,
+      name: l.name
+    };
+    return l.multiple ? {
+      ...L,
+      multiple: !0,
+      controlledValue: l.value,
+      onChange: l.onChange
+    } : {
+      ...L,
+      multiple: !1,
+      controlledValue: l.value,
+      onChange: l.onChange
+    };
+  }, { inputValue: S, setInputValue: P, filteredOptions: T, isLoading: h, value: s, onOptionClick: f, cleanInputValue: F, cleanOptions: y, clearValue: k } = re(w(e, d, O));
+  b(() => {
+    !e.controls || !O.current || (e.controls.current = {
+      ...O.current,
+      cleanOptions: () => {
+        y();
+      }
+    });
+  }, [e.controls, y]);
+  const M = te(
+    () => d === "fetch_on_type" ? h : !1,
+    [d, h]
+  ), V = ee(() => e.multiple ? s.map((l) => i(l, e.optionValue)) : s ? i(s, e.optionValue) : void 0, [s, e.optionValue, e.multiple]), g = (l) => {
+    const C = T.find((m) => i(m, e.optionValue) === l.id);
+    C && f(C);
+  }, { displayMode: D = e.multiple ? "chips" : "compact", dropdownOptions: I, overflow: c = "scroll", onChange: N, onClear: W, ...p } = e.selectComponentProps || {}, J = {
+    controledSearchValue: S,
+    onSearchValueChange: d === "fetch_on_type" ? P : void 0,
+    onSearchClear: d === "fetch_on_type" ? () => {
+      F(), y();
+    } : void 0,
+    inputSearchPlaceholder: e.inputSearchPlaceholder,
+    isLoading: M(),
+    ...I || {}
+  }, U = () => {
+    k(), e?.selectComponentProps?.onClear?.();
+  };
+  return e.multiple ? /* @__PURE__ */ Y.jsx(
+    Z,
+    {
+      disabled: e.disabled,
+      className: e.className,
+      name: e.name,
+      overflow: c,
+      ...p,
+      onClear: e?.selectComponentProps?.onClear && U,
+      multiple: !0,
+      value: V,
+      label: e.label || "",
+      options: T,
+      optionValue: e.optionValue,
+      optionLabel: e.optionLabel,
+      renderOption: e.renderOption,
+      onOptionClick: g,
+      displayMode: D,
+      controls: O,
+      emptyMessage: "Use el buscador para obtener las opciones disponibles",
+      dropdownOptions: J,
+      isLoading: d === "fetch_in_open" ? h : !1
+    }
+  ) : /* @__PURE__ */ Y.jsx(
+    Z,
+    {
+      disabled: e.disabled,
+      ...p,
+      onClear: U,
+      className: e.className,
+      overflow: c,
+      name: e.name,
+      multiple: !1,
+      value: V,
+      label: e.label || "",
+      options: T,
+      optionValue: e.optionValue,
+      optionLabel: e.optionLabel,
+      renderOption: e.renderOption,
+      onOptionClick: g,
+      displayMode: "compact",
+      controls: O,
+      emptyMessage: "Use el buscador para obtener las opciones disponibles",
+      dropdownOptions: J,
+      isLoading: d === "fetch_in_open" ? h : !1
+    }
+  );
+};
+export {
+  he as default
+};

package/dist/Skeleton.d.ts

@@ -0,0 +1,6 @@
+export * from './exports/Skeleton'
+export {}
+import PrometeoDesignSystem from './exports/Skeleton'
+export default PrometeoDesignSystem
+export * from './exports/Skeleton'
+export {}

package/dist/Skeleton.es.js

@@ -0,0 +1,74 @@
+import { j as E } from "./jsx-runtime-GkKLlHH4.js";
+import { c as B } from "./cn-B6yFEsav.js";
+import { memo as N, useRef as R, useCallback as D, useLayoutEffect as M } from "react";
+const y = (n) => {
+  const e = R(null), { debugMode: h = !1, className: f = "", children: k, shape: C = "rounded", animation: g = "shimmer", onlyContainer: i = !1 } = n;
+  let m = "255, 255, 255", d = "255, 255, 255, 0.1";
+  const b = D(() => {
+    if (i || !e.current) return;
+    const o = d.split(",").map(Number), c = m.match(/\d+/g);
+    switch (g) {
+      case "shimmer":
+        e.current.classList.add("skeleton-shimmer-animation"), o && o.length >= 3 && (e.current.style.setProperty("--shimmer-color-r", o[0].toString()), e.current.style.setProperty("--shimmer-color-g", o[1].toString()), e.current.style.setProperty("--shimmer-color-b", o[2].toString()), e.current.style.setProperty("--shimmer-color-a", o[3].toString()));
+        break;
+      case "none":
+        e.current.style.animation = "none";
+        break;
+      case "border":
+        e.current.classList.add("skeleton-border-animation"), e.current.style.backgroundColor = "transparent", c && c.length >= 3 && (e.current.style.setProperty("--border-color-r", c[0]), e.current.style.setProperty("--border-color-g", c[1]), e.current.style.setProperty("--border-color-b", c[2]));
+        break;
+    }
+  }, [g, d, m, i]);
+  M(() => {
+    if (e.current) {
+      const o = (l) => {
+        let t = l;
+        for (; t && t !== document.body; ) {
+          const a = window.getComputedStyle(t).backgroundColor;
+          if (a && a !== "transparent" && a !== "rgba(0, 0, 0, 0)")
+            return a;
+          t = t.parentElement;
+        }
+        const r = window.getComputedStyle(document.body).backgroundColor;
+        return r && r !== "transparent" && r !== "rgba(0, 0, 0, 0)" ? r : "rgb(255, 255, 255)";
+      }, c = (l) => {
+        const t = document.createElement("canvas");
+        t.width = 1, t.height = 1;
+        const r = t.getContext("2d");
+        if (!r) return [255, 255, 255];
+        r.fillStyle = l, r.fillRect(0, 0, 1, 1);
+        const a = r.getImageData(0, 0, 1, 1).data;
+        return [a[0], a[1], a[2]];
+      };
+      if (!e.current.parentElement) return;
+      const p = o(e.current.parentElement), s = c(p), w = s.reduce((l, t) => l + t, 0) < 382;
+      let u;
+      w ? u = `rgb(${s[0] + 10}, ${s[1] + 10}, ${s[2] + 10})` : (u = `rgb(${s[0] - 30}, ${s[1] - 30}, ${s[2] - 30})`, m = "115,115,115", d = "255,255,255, 0.4"), i && (u = "transparent", e.current.style.animation = "none"), e.current.style.backgroundColor = u, b();
+    }
+  }, [d, m, i, b]);
+  const S = {
+    circle: "rounded-full aspect-square",
+    square: "rounded-none",
+    rounded: "rounded"
+  };
+  return /* @__PURE__ */ E.jsx(
+    "div",
+    {
+      ref: e,
+      className: B(
+        h && " border-red-600/20 border",
+        f,
+        "skeleton-container",
+        S[C]
+      ),
+      children: k
+    },
+    `skeleton-${Math.random().toFixed(10)}`
+  );
+};
+y.displayName = "Skeleton";
+const x = N(y, (n, e) => n.debugMode === e.debugMode && n.className === e.className && n.children === e.children && n.shape === e.shape && n.animation === e.animation && n.onlyContainer === e.onlyContainer);
+export {
+  x as Skeleton,
+  x as default
+};

package/dist/Spinner.d.ts

@@ -0,0 +1,6 @@
+export * from './exports/Spinner'
+export {}
+import PrometeoDesignSystem from './exports/Spinner'
+export default PrometeoDesignSystem
+export * from './exports/Spinner'
+export {}

package/dist/Spinner.es.js

@@ -0,0 +1,178 @@
+import { j as n } from "./jsx-runtime-GkKLlHH4.js";
+import { c as l } from "./cn-B6yFEsav.js";
+import { c as p } from "./index-BOQuZ0gG.js";
+import { memo as d } from "react";
+const m = p("rounded-full", {
+  variants: {
+    variant: {
+      sync: "",
+      dot: "",
+      bounce: "",
+      linear: ""
+    },
+    size: {
+      small: "",
+      medium: "",
+      large: ""
+    }
+  },
+  defaultVariants: {
+    variant: "sync",
+    size: "medium"
+  },
+  compoundVariants: [
+    { variant: "sync", size: "small", className: "w-6 h-6" },
+    { variant: "sync", size: "medium", className: "w-8 h-8" },
+    { variant: "sync", size: "large", className: "w-12 h-12" },
+    { variant: "dot", size: "small" },
+    { variant: "dot", size: "medium" },
+    { variant: "dot", size: "large" }
+  ]
+}), u = (o) => {
+  const {
+    variant: s = "sync",
+    color: r = "var(--primary-500)",
+    secondaryColor: a = "var(--primary-200)",
+    size: e = "medium",
+    ...i
+  } = o;
+  return s === "sync" ? /* @__PURE__ */ n.jsx(
+    c,
+    {
+      color: r,
+      secondaryColor: a,
+      size: e,
+      ...i
+    }
+  ) : s === "dot" ? /* @__PURE__ */ n.jsx(
+    v,
+    {
+      size: e,
+      ...i
+    }
+  ) : s === "bounce" ? /* @__PURE__ */ n.jsx(
+    x,
+    {
+      size: e,
+      ...i
+    }
+  ) : s === "linear" ? /* @__PURE__ */ n.jsx(
+    z,
+    {
+      color: r,
+      secondaryColor: a,
+      size: e,
+      ...i
+    }
+  ) : (
+    //default
+    /* @__PURE__ */ n.jsx(
+      c,
+      {
+        color: r,
+        secondaryColor: a,
+        size: e,
+        ...i
+      }
+    )
+  );
+}, y = d(u);
+y.displayName = "Spinner";
+const c = (o) => {
+  const { size: s, className: r, color: a, secondaryColor: e, speedMultiplier: i = 1 } = o, t = {
+    small: "2px",
+    medium: "4px",
+    large: "5px"
+  };
+  return /* @__PURE__ */ n.jsx(
+    "div",
+    {
+      className: l(
+        m({ size: s }),
+        "spinner-sync-animation",
+        r
+      ),
+      style: {
+        "--spinner-color": a,
+        "--spinner-secondary-color": e,
+        "--spinner-speed": i,
+        "--border-width": t[s || "medium"],
+        background: "transparent"
+      }
+    }
+  );
+}, v = (o) => {
+  const {
+    size: s,
+    className: r,
+    color: a = "var(--primary-500)",
+    speedMultiplier: e = 1
+  } = o, t = p("rounded-full", {
+    variants: {
+      size: {
+        small: "w-2 h-2",
+        medium: "w-3 h-3",
+        large: "w-4 h-4"
+      }
+    },
+    defaultVariants: {
+      size: "medium"
+    }
+  })({ size: s });
+  return /* @__PURE__ */ n.jsxs(
+    "div",
+    {
+      className: l("spinner-dot-animation", r),
+      style: {
+        "--spinner-dot-color": a,
+        "--spinner-dot-speed": e
+      },
+      children: [
+        /* @__PURE__ */ n.jsx("span", { className: l("spinner-dot", t) }),
+        /* @__PURE__ */ n.jsx("span", { className: l("spinner-dot", t) }),
+        /* @__PURE__ */ n.jsx("span", { className: l("spinner-dot", t) })
+      ]
+    }
+  );
+}, x = (o) => {
+  const { size: s, className: r, color: a, speedMultiplier: e = 1 } = o;
+  return /* @__PURE__ */ n.jsx(
+    "div",
+    {
+      className: l(
+        m({ size: s }),
+        "spinner-bounce-animation",
+        r
+      ),
+      style: {
+        "--spinner-color": a,
+        "--spinner-speed": e
+      }
+    }
+  );
+}, z = (o) => {
+  const { size: s, className: r, color: a = "var(--primary-500)", secondaryColor: e = "var(--primary-200)", speedMultiplier: i = 1 } = o, t = {
+    small: "0.25rem",
+    medium: "0.33rem",
+    large: "0.5rem"
+  };
+  return /* @__PURE__ */ n.jsx(
+    "div",
+    {
+      className: l(
+        m({ size: s, variant: "linear" }),
+        "spinner-linear-animation min-w-8",
+        r
+      ),
+      style: {
+        "--spinner-color": a,
+        "--spinner-secondary-color": e,
+        "--spinner-speed": i,
+        "--spinner-height": t[s || "medium"]
+      }
+    }
+  );
+};
+export {
+  y as default
+};

package/dist/Steps.d.ts

@@ -0,0 +1,6 @@
+export * from './exports/Steps'
+export {}
+import PrometeoDesignSystem from './exports/Steps'
+export default PrometeoDesignSystem
+export * from './exports/Steps'
+export {}