prometeo-design-system 2.8.5 → 2.8.7

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,396 @@
+import { jsx as o, jsxs as Y } from "react/jsx-runtime";
+import { useState as $, useRef as we, useEffect as z, useCallback as D, useMemo as N, memo as Ee } from "react";
+import Ae from "../InputMultiple/InputMultiple.js";
+import $e from "../Input/Input.js";
+import { createPortal as Re } from "react-dom";
+import { cn as R } from "../../lib/cn.js";
+import { Calendar as be } from "../../Icons/Icons.js";
+/* empty css               */
+import { DayPicker as K } from "../../node_modules/react-day-picker/dist/esm/DayPicker.js";
+import { es as Q } from "../../node_modules/date-fns/locale/es.js";
+import ve from "../Button/Button.js";
+const Ue = (y) => {
+  const {
+    mode: n = "single",
+    required: L = !1,
+    selected: l,
+    onSelect: d,
+    disabledDates: m,
+    header: x,
+    footer: B,
+    hideOutsideDays: T = !1,
+    numberOfMonths: w = 1,
+    startMonth: p,
+    endMonth: b,
+    showActionButtons: a = !1,
+    applyLabel: F = "Aplicar",
+    cancelLabel: v = "Cancelar",
+    onApply: S,
+    onCancel: C,
+    hideFooter: V = !1,
+    variant: t = "input",
+    inputProps: i,
+    label: h = "",
+    name: M = "datepicker",
+    className: W
+  } = y, j = n === "range" || n === "multiple" ? y.min : void 0, _ = n === "range" || n === "multiple" ? y.max : void 0, H = n === "range" ? y.excludeDisabled : void 0, [f, k] = $({}), [c, r] = $(!1), [ee, G] = $(!1), [q, O] = $(l), [te, ne] = $(!1), I = we(null), ae = we(null), U = a ? q : l, u = a ? l : U;
+  z(() => {
+    window.innerWidth < 768 ? ne(!0) : ne(!1);
+  }, []), z(() => {
+    a && O(l);
+  }, [l, a]), z(() => {
+    if (t !== "input" || !c) return;
+    const e = (s) => {
+      I.current && !I.current.contains(s.target) && (r(!1), a && O(l));
+    };
+    return document.addEventListener("mousedown", e), () => {
+      document.removeEventListener("mousedown", e);
+    };
+  }, [t, c, l, a]), z(() => {
+    if (!c || t !== "input" || !I.current) {
+      G(!1);
+      return;
+    }
+    const e = 16, s = () => {
+      const E = I?.current?.getBoundingClientRect(), A = ae?.current?.getBoundingClientRect();
+      if (!E || !A) return;
+      const Le = window.innerHeight, Me = window.innerWidth, de = E.height, ce = E.width, ke = A.left, X = A.bottom, Oe = X, ue = Le - X, pe = Me - A.left, J = ce - pe, fe = J > 0 && pe >= ce + e, me = Oe >= de + e, he = ue >= de + e, ge = !he && me, Ie = !he && !me;
+      let ye = ge ? void 0 : `${X + 8}px`, xe = ge ? `${ue + A.height + 8}px` : void 0;
+      Ie && (ye = void 0, xe = `${e}px`);
+      const Pe = J > 0 ? J : 0;
+      k(
+        {
+          top: ye,
+          bottom: xe,
+          right: fe ? "0" : void 0,
+          left: fe ? void 0 : `${ke - Pe}px`
+        }
+      ), G(!0);
+    }, g = () => {
+      r(!1), G(!1);
+    };
+    window.addEventListener("scroll", g, !0);
+    const P = setTimeout(s, 0);
+    return () => {
+      clearTimeout(P), window.removeEventListener("scroll", g, !0);
+    };
+  }, [c, t]);
+  const oe = D(() => {
+    S?.(q), d?.(q), t === "input" && r(!1);
+  }, [S, d, q, t]), le = D(() => {
+    O(l), C?.(), t === "input" && r(!1);
+  }, [C, l, t]), Se = N(() => {
+    if (!u) return "";
+    if (n === "single")
+      return u.toLocaleDateString("es-ES", { day: "2-digit", month: "2-digit", year: "numeric" });
+    if (n === "range") {
+      const e = u;
+      if (!e.from) return "";
+      const s = e.from.toLocaleDateString("es-ES", { day: "2-digit", month: "2-digit", year: "numeric" });
+      if (!e.to) return s;
+      const g = e.to.toLocaleDateString("es-ES", { day: "2-digit", month: "2-digit", year: "numeric" });
+      return `${s} - ${g}`;
+    }
+    if (n === "multiple") {
+      const e = u;
+      return e.length === 0 ? "" : e.length === 1 ? e[0].toLocaleDateString("es-ES", { day: "2-digit", month: "2-digit", year: "numeric" }) : `${e.length} fechas seleccionadas`;
+    }
+    return "";
+  }, [u, n]), Ce = N(() => t === "input" || t === "input-and-calendar", [t]), De = N(() => t === "only-calendar" || t === "input-and-calendar" || t === "input", [t]), re = D((e) => {
+    d?.(e);
+  }, [d]), ie = D((e) => {
+    const s = new Date(parseInt(e.slice(6, 10)), parseInt(e.slice(3, 5)) - 1, parseInt(e.slice(0, 2)));
+    if (n === "multiple") {
+      const P = (u || []).filter((E) => E.getTime() !== s.getTime());
+      a ? (d?.(P), O(P)) : re(P);
+    }
+  }, [n, u, a, d, re]), se = D((e) => {
+    if (a) {
+      O(e);
+      return;
+    }
+    t === "input" && n === "single" && r(!1), d?.(e);
+  }, [a, t, n, d]), Ne = D(() => /* @__PURE__ */ o(
+    Ae,
+    {
+      label: h,
+      placeholder: "Seleccione una o más fechas",
+      name: M,
+      value: (u || []).sort((s, g) => s.getTime() - g.getTime()).map((s) => s.toLocaleDateString("es-ES", { day: "2-digit", month: "2-digit", year: "numeric" })),
+      onChange: () => {
+      },
+      onClick: () => r(!0),
+      className: R("w-[360px]", i?.className),
+      readonly: !0,
+      onValueDelete: ie,
+      icon: /* @__PURE__ */ o(be, {})
+    }
+  ), [u, h, M, ie, i]);
+  return /* @__PURE__ */ Y("div", { className: R("relative w-max flex flex-col gap-2 lg:min-w-[360px] min-w-auto", i?.className), children: [
+    Ce && /* @__PURE__ */ o(
+      "div",
+      {
+        ref: ae,
+        className: "relative w-full",
+        children: n === "multiple" ? Ne() : /* @__PURE__ */ o(
+          $e,
+          {
+            readOnly: !0,
+            ...i,
+            icon: /* @__PURE__ */ o(be, {}),
+            iconPosition: "right",
+            type: "text",
+            value: Se,
+            onChange: () => {
+            },
+            name: M,
+            label: h,
+            onFocus: (e) => {
+              e.stopPropagation(), t === "input" && r(!0);
+            }
+          }
+        )
+      }
+    ),
+    De && (t === "input" ? document?.body && Re(
+      /* @__PURE__ */ o(
+        Z,
+        {
+          mode: n,
+          footer: B,
+          header: x,
+          selected: l,
+          ref: I,
+          endMonth: b,
+          required: L,
+          onApply: oe,
+          onCancel: le,
+          hideFooter: V,
+          startMonth: p,
+          applyLabel: F,
+          cancelLabel: v,
+          displayValue: U,
+          disabledDates: m,
+          numberOfMonths: te ? 1 : w,
+          onSelect: se,
+          hideOutsideDays: T,
+          showActionButtons: a,
+          min: j,
+          max: _,
+          excludeDisabled: H,
+          className: R("bg-neutral-strong-default text-neutral-default-default shadow", W),
+          style: {
+            top: f?.top,
+            left: f?.left,
+            bottom: f?.bottom,
+            right: f?.right,
+            opacity: ee && c ? 1 : 0,
+            transition: "opacity 0.15s linear",
+            position: "fixed",
+            zIndex: 1e3,
+            pointerEvents: ee && c ? "auto" : "none"
+          }
+        }
+      ),
+      document.body
+    ) : /* @__PURE__ */ o(
+      Z,
+      {
+        min: j,
+        max: _,
+        mode: n,
+        header: x,
+        footer: B,
+        required: L,
+        endMonth: b,
+        selected: l,
+        className: W,
+        onApply: oe,
+        startMonth: p,
+        applyLabel: F,
+        hideFooter: V,
+        onCancel: le,
+        cancelLabel: v,
+        displayValue: U,
+        disabledDates: m,
+        numberOfMonths: te ? 1 : w,
+        onSelect: se,
+        hideOutsideDays: T,
+        showActionButtons: a,
+        excludeDisabled: H
+      }
+    ))
+  ] });
+}, Z = Ee((y) => {
+  const {
+    ref: n,
+    min: L,
+    max: l,
+    style: d,
+    header: m,
+    footer: x,
+    onApply: B,
+    onCancel: T,
+    onSelect: w,
+    selected: p,
+    required: b,
+    endMonth: a,
+    className: F,
+    startMonth: v,
+    displayValue: S,
+    disabledDates: C,
+    excludeDisabled: V,
+    mode: t = "single",
+    readonly: i = !1,
+    numberOfMonths: h = 1,
+    hideFooter: M = !1,
+    applyLabel: W = "Aplicar",
+    cancelLabel: j = "Cancelar",
+    hideOutsideDays: _ = !1,
+    showActionButtons: H = !1
+  } = y, f = N(() => {
+    if (p) {
+      if (t === "single")
+        return p;
+      if (t === "range")
+        return p.from || void 0;
+      if (t === "multiple") {
+        const r = p;
+        return r.length > 0 ? r[0] : void 0;
+      }
+    }
+  }, [p, t]), k = N(() => ({
+    formatWeekdayName: (r) => r.toLocaleDateString("es-ES", { weekday: "narrow" }).toUpperCase()
+  }), []), c = N(() => ({
+    // Días de la semana (cabecera)
+    weekday: " prometeo-fonts-body-large text-neutral-default-default h-12 w-12 ",
+    // Días del mes
+    day: `w-12 h-12 p-1 prometeo-fonts-body-large text-neutral-default-default ${i ? "" : "active:text-neutral-default-focused"}`,
+    day_button: `w-full h-full rounded-[4px] ${i ? "cursor-default" : "cursor-pointer"}`,
+    // Día seleccionado
+    selected: "selected-day-button",
+    // Día de hoy
+    today: `today-day-button text-primary-default-default! ${i ? "cursor-default" : "active:text-primary-default-focused! hover:text-primary-default-hover! cursor-pointer"} opacity-100`,
+    // Rango de fechas
+    range_start: "text-white rounded-l-lg range-start-day-button",
+    range_end: "text-white rounded-r-lg range-end-day-button",
+    range_middle: "text-neutral-default-default range-middle-day-button",
+    // Día deshabilitado
+    disabled: " opacity-10",
+    // Días fuera del mes actual
+    outside: "text-neutral-medium-default",
+    //Contenedor 
+    months: "flex gap-4 justify-center relative w-full flex-wrap overflow-auto ",
+    root: "px-2 text-neutral-default-default "
+  }), [i]);
+  return /* @__PURE__ */ Y(
+    "div",
+    {
+      ref: n,
+      className: R(
+        "border border-neutral-default-default rounded-lg",
+        F
+      ),
+      style: {
+        ...d,
+        width: h * 360,
+        overflowX: "auto"
+      },
+      children: [
+        m && /* @__PURE__ */ o("div", { className: "pt-6 pl-6 pr-3 pb-2 min-h-[68px]", children: typeof m == "string" ? /* @__PURE__ */ o("p", { className: "prometeo-fonts-label-large text-neutral-medium-default w-64 ", children: m }) : m }),
+        t === "single" && /* @__PURE__ */ o(
+          K,
+          {
+            locale: Q,
+            mode: "single",
+            captionLayout: "dropdown",
+            formatters: k,
+            classNames: c,
+            required: b,
+            disabled: C,
+            selected: S,
+            defaultMonth: f,
+            className: "px-3",
+            showOutsideDays: !_,
+            numberOfMonths: h,
+            startMonth: v,
+            endMonth: a,
+            onSelect: i ? () => {
+            } : w
+          }
+        ),
+        t === "range" && /* @__PURE__ */ o(
+          K,
+          {
+            mode: "range",
+            captionLayout: "dropdown",
+            formatters: k,
+            classNames: c,
+            numberOfMonths: h,
+            selected: S,
+            defaultMonth: f,
+            onSelect: i ? () => {
+            } : w,
+            required: b,
+            disabled: C,
+            startMonth: v,
+            endMonth: a,
+            min: L,
+            max: l,
+            pagedNavigation: !0,
+            locale: Q,
+            excludeDisabled: V ?? !0
+          }
+        ),
+        t === "multiple" && /* @__PURE__ */ o(
+          K,
+          {
+            mode: "multiple",
+            captionLayout: "dropdown",
+            formatters: k,
+            classNames: c,
+            selected: S,
+            defaultMonth: f,
+            onSelect: i ? () => {
+            } : w,
+            required: b,
+            disabled: C,
+            startMonth: v,
+            endMonth: a,
+            min: L,
+            max: l,
+            locale: Q
+          }
+        ),
+        !M && /* @__PURE__ */ o("div", { className: R(
+          "w-full min-h-[40px] pt-2 px-3 pb-3 flex items-center relative"
+        ), children: typeof x == "string" ? /* @__PURE__ */ o("p", { className: "prometeo-fonts-label-large text-neutral-medium-default w-64 ", children: x }) : x }),
+        H && /* @__PURE__ */ Y("div", { className: "w-full px-3 pb-3 pt-2 flex gap-2 justify-end ", children: [
+          /* @__PURE__ */ o(
+            ve,
+            {
+              variant: "text",
+              onClick: T,
+              color: "secondary",
+              children: j
+            }
+          ),
+          /* @__PURE__ */ o(
+            ve,
+            {
+              onClick: B,
+              variant: "text",
+              color: "primary",
+              children: W
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+Z.displayName = "Calendar";
+export {
+  Z as Calendar,
+  Ue as default
+};

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,60 @@
+import { jsx as o, Fragment as k } from "react/jsx-runtime";
+import { forwardRef as w, memo as l, useState as f, useRef as p, useCallback as m, useImperativeHandle as F } from "react";
+import { cn as D } from "../../lib/cn.js";
+const x = w(
+  ({ children: e, onClose: t, className: C }, h) => {
+    const [a, c] = f(!1), [n, d] = f(null), u = p(t), r = p(n);
+    u.current = t, r.current = n;
+    const g = m((s) => {
+      d(s ?? null), c(!0);
+    }, []), i = m(() => {
+      c(!1), u.current?.(r.current), setTimeout(() => d(null), 300);
+    }, []);
+    return F(
+      h,
+      () => ({
+        open: g,
+        close: i,
+        isOpen: a,
+        getContext: () => r.current
+      }),
+      [g, i, a]
+    ), /* @__PURE__ */ o(k, { children: a && /* @__PURE__ */ o(
+      "div",
+      {
+        className: "fixed inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-[1.5px]",
+        onClick: i,
+        children: /* @__PURE__ */ o(
+          "div",
+          {
+            className: D(
+              "bg-neutral-default-default w-3/4 h-3/4 xl:w-3/4 xl:h-10/12 rounded-lg shadow-lg border-neutral-strong-default border relative p-6",
+              C
+            ),
+            onClick: (s) => s.stopPropagation(),
+            children: typeof e == "function" ? e(n) : e
+          }
+        )
+      }
+    ) });
+  }
+);
+x.displayName = "Dialog";
+const b = l(({ children: e, className: t }) => /* @__PURE__ */ o("div", { className: t, children: /* @__PURE__ */ o("div", { className: D("flex flex-col gap-4 h-full"), children: e }) }));
+b.displayName = "DialogContent";
+const N = l(({ children: e, className: t }) => /* @__PURE__ */ o("h1", { className: t, children: e }));
+N.displayName = "DialogTitle";
+const v = l(({ children: e, className: t }) => /* @__PURE__ */ o("div", { className: t, children: e }));
+v.displayName = "DialogHeader";
+const y = l(({ children: e, className: t }) => /* @__PURE__ */ o("div", { className: t, children: e }));
+y.displayName = "DialogFooter";
+const H = Object.assign(x, {
+  Content: b,
+  Header: v,
+  Footer: y,
+  Title: N
+});
+H.displayName = "DialogModal";
+export {
+  H as default
+};

package/dist/components/Dialog/useDialogControl.js

@@ -0,0 +1,18 @@
+import { useRef as l, useCallback as n } from "react";
+const p = () => {
+  const e = l(null), t = n((c) => {
+    e.current?.open(c);
+  }, []), o = n(() => {
+    e.current?.close();
+  }, []), r = n(() => e.current?.isOpen ?? !1, []), s = n(() => e.current?.getContext() ?? null, []);
+  return {
+    ref: e,
+    open: t,
+    close: o,
+    isOpen: r,
+    getContext: s
+  };
+};
+export {
+  p as useDialogControl
+};

package/dist/components/Drawer/DrawerDesktop.js

@@ -0,0 +1,179 @@
+import { jsx as v, jsxs as N, Fragment as I } from "react/jsx-runtime";
+import { cn as h } from "../../lib/cn.js";
+import { cva as g } from "../../node_modules/class-variance-authority/dist/index.js";
+import { createPortal as P } from "react-dom";
+import { forwardRef as j, useRef as f, useState as T, useEffect as s, useCallback as V, useImperativeHandle as B } from "react";
+/* empty css                  */
+import { Close as L } from "../../Icons/Icons.js";
+import Y from "../Button/Button.js";
+const F = j((o, c) => {
+  const n = f(null), [e, i] = T(o.defaultOpen || !1), [t, m] = T(null), p = f(o.onClose), a = f(t), {
+    modal: l = !1,
+    children: u,
+    className: w,
+    direction: x = "left",
+    attachToParent: y = !1,
+    closeOnOverlayClick: r = !1,
+    hideCloseButton: E = !1
+  } = o, C = f(r), k = f(e);
+  a.current = t, s(() => {
+    k.current = e;
+  }, [e]), s(() => {
+    a.current = t;
+  }, [t]), s(() => {
+    C.current = r;
+  }, [r]);
+  const O = (d) => {
+    if (!n.current)
+      return;
+    const z = n.current;
+    z && !z.contains(d.target) && C.current && k.current && b();
+  };
+  s(() => {
+    if (!C.current || l || !e)
+      return;
+    const d = setTimeout(() => {
+      document.addEventListener("click", O);
+    }, 0);
+    return () => {
+      clearTimeout(d), document.removeEventListener("click", O);
+    };
+  }, [r, e, l]), s(() => {
+    p.current = o.onClose;
+  }, [o.onClose]);
+  const R = V((d) => {
+    m(d ?? null), i(!0);
+  }, []), b = V(() => {
+    i(!1), p.current?.(a.current), setTimeout(() => m(null), 300);
+  }, []);
+  B(
+    c,
+    () => ({
+      open: R,
+      close: b,
+      isOpen: e,
+      getContext: () => a.current
+    }),
+    [e, R, b]
+  );
+  const D = /* @__PURE__ */ v(
+    H,
+    {
+      context: t,
+      ref: n,
+      isOpen: e,
+      close: b,
+      direction: x,
+      modal: l,
+      className: w,
+      attachToParent: y,
+      closeOnOverlayClick: r,
+      hideCloseButton: E,
+      children: typeof u == "function" ? u(t) : u
+    }
+  );
+  return y ? D : P(D, document.body);
+});
+F.displayName = "DrawerDesktopV2";
+const H = ({
+  ref: o,
+  children: c,
+  direction: n = "left",
+  isOpen: e,
+  close: i,
+  modal: t = !1,
+  className: m,
+  attachToParent: p = !1,
+  closeOnOverlayClick: a = !1,
+  hideCloseButton: l = !1,
+  context: u
+}) => {
+  s(() => {
+    if (e && t) {
+      const r = window.scrollY;
+      return document.body.style.position = "fixed", document.body.style.top = `-${r}px`, document.body.style.width = "100%", () => {
+        document.body.style.position = "", document.body.style.top = "", document.body.style.width = "", window.scrollTo(0, r);
+      };
+    }
+  }, [e, t]);
+  const w = g("border-neutral-strong-default", {
+    variants: {
+      isOpen: {
+        true: "desktop-drawer-visible",
+        false: "desktop-drawer-hidden"
+      },
+      direction: {
+        left: "left-0 border-r-[1px] border-l-0",
+        right: "right-0 border-l-[1px] border-r-0"
+      }
+    }
+  }), x = g(
+    "fixed inset-0 bg-black/60 z-[55] cursor-default",
+    {
+      variants: {
+        isOpen: {
+          true: "drawer-overlay-visible",
+          false: "drawer-overlay-hidden"
+        }
+      }
+    }
+  ), y = g("", {
+    variants: {
+      direction: {
+        left: "right-0",
+        right: "left-0"
+      }
+    }
+  });
+  return /* @__PURE__ */ N(I, { children: [
+    t && /* @__PURE__ */ v(
+      "div",
+      {
+        className: h(x({ isOpen: e })),
+        onClick: (r) => {
+          r.preventDefault(), r.stopPropagation(), a && i();
+        },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ N(
+      "div",
+      {
+        ref: o,
+        className: h(
+          "bg-neutral-strong-default h-full top-0 z-60 w-max overflow-y-auto",
+          p ? "absolute" : "fixed",
+          w({ isOpen: e, direction: n }),
+          !l && "p-4 pt-10",
+          m
+        ),
+        role: "dialog",
+        "aria-modal": t,
+        children: [
+          !l && /* @__PURE__ */ v(
+            Y,
+            {
+              icon: /* @__PURE__ */ v(L, { size: 24 }),
+              animate: !1,
+              type: "button",
+              size: "small",
+              variant: "text",
+              onClick: i,
+              label: "",
+              color: "secondary",
+              className: h(
+                "absolute top-0 z-50",
+                y({ direction: n })
+              ),
+              "aria-label": "Close drawer"
+            }
+          ),
+          typeof c == "function" ? c(u) : c
+        ]
+      }
+    )
+  ] });
+};
+export {
+  F as default
+};