prometeo-design-system 2.8.6 → 2.8.8

package/dist/components/InputMultiple/InputMultiple.js

@@ -0,0 +1,262 @@
+import { jsxs as p, jsx as s } from "react/jsx-runtime";
+import { Close as T, Info as ee, Error as te } from "../../Icons/Icons.js";
+import { cn as d } from "../../lib/cn.js";
+import j, { useRef as S, useState as g, useCallback as re, useEffect as le } from "react";
+const ae = ({ label: D, name: K, onChange: f, value: l, icon: F, valueSeparator: N = ",", variant: E = "default", placeholder: U, itemClassName: $, itemIcon: z, helperText: v, errorText: y, disabled: a, onClick: P, className: B, readonly: x, onValueDelete: O, ...q }) => {
+  const o = S(null), C = S(null), [u, n] = g(""), [_, i] = g(0), [A, c] = g(!0), [I, R] = g(!1), [m, h] = g(!1), [V, k] = g(null), b = (e) => {
+    if (x || !e) return;
+    const t = e.selectionStart ?? u.length;
+    i(t);
+  }, G = (e) => {
+    if (x) return;
+    if (e.target.value[e.target.value.length - 1] === N && u.length > 0) {
+      const r = u.trim();
+      if (m) {
+        r.length > 0 ? (n(r), w()) : (h(!1), n(""), c(!0), i(0));
+        return;
+      }
+      if (r.length === 0 || l.includes(r)) {
+        n(""), c(!0), b(e.target);
+        return;
+      }
+      f([...l, r]), n(""), c(!0);
+    } else {
+      if (e.target.value === N) return;
+      n(e.target.value), c(!1);
+    }
+    b(e.target);
+  }, w = re(() => {
+    const e = u.trim();
+    if (e.length === 0) {
+      h(!1), n(""), c(!0), i(0), k(null);
+      return;
+    }
+    h(!1), V !== null && f(W(l.map((t, r) => r === V ? e : t))), n(""), c(!0), i(0), k(null);
+  }, [V, u, f, l]), H = (e) => {
+    if (!x) {
+      if (e.key === "Backspace" && u.length === 0) {
+        if (A) {
+          const t = l[l.length - 1];
+          t && (f(l.filter((r) => r !== t)), n(t), i(t.length));
+        } else
+          c(!0);
+        return;
+      }
+      if (e.key === "Enter") {
+        const t = u.trim();
+        if (m) {
+          t.length > 0 ? (n(t), w()) : (h(!1), n(""), c(!0), i(0));
+          return;
+        }
+        t.length > 0 && !l.includes(t) && t !== N && (f([...l, t]), n(""), c(!0), i(0));
+      }
+      e.key === "Escape" && m && (h(!1), n(""), c(!0), i(0), k(null)), b(e.currentTarget);
+    }
+  }, J = (e) => {
+    const t = l.filter((r) => r !== e);
+    f(t), O?.(e);
+  }, L = (e) => {
+    x || (Q(e), h(!0), n(e), i(e.length), k(l.length - 1), o.current?.focus());
+  }, Q = (e) => {
+    const t = l.filter((r) => r !== e);
+    f([...t, e]);
+  }, W = (e) => e.filter((t, r, Z) => Z.indexOf(t) === r);
+  le(() => {
+    o.current && (o.current.onfocus = () => {
+      R(!0);
+    }, o.current.onblur = () => {
+      R(!1), m && w();
+    }), C.current && (C.current.onblur = () => {
+      m && w();
+    });
+  }, [m, w]);
+  const X = {
+    isFocused: {
+      error: "border-error-default-focused ring-error-default-focused",
+      success: "border-success-default-focused ring-success-default-focused",
+      warning: "border-warning-default-focused ring-warning-default-focused",
+      default: "border-primary-default-focused ring-primary-default-focused"
+    },
+    default: {
+      error: "border-error-default-default hover:border-error-default-hover",
+      success: "border-success-default-default hover:border-success-default-hover",
+      warning: "border-warning-default-default hover:border-warning-default-hover",
+      default: "border-neutral-default-default hover:border-primary-default-hover"
+    },
+    disabled: {
+      error: "border-error-default-disabled",
+      success: "border-success-default-disabled",
+      warning: "border-warning-default-disabled",
+      default: "border-neutral-default-disabled"
+    }
+  }, Y = {
+    default: {
+      default: "text-neutral-default-default",
+      isFocused: "text-neutral-default-focused",
+      disabled: "text-neutral-default-disabled"
+    },
+    error: {
+      default: "text-error-medium-default",
+      isFocused: "text-error-medium-focused",
+      disabled: "text-error-medium-disabled"
+    },
+    success: {
+      default: "text-success-medium-default",
+      isFocused: "text-success-medium-focused",
+      disabled: "text-success-medium-disabled"
+    },
+    warning: {
+      default: "text-warning-default-default",
+      isFocused: "text-warning-default-focused",
+      disabled: "text-warning-default-disabled"
+    }
+  }, M = a ? "disabled" : I ? "isFocused" : "default";
+  return /* @__PURE__ */ p("div", { className: d(
+    "relative w-full",
+    B
+  ), children: [
+    /* @__PURE__ */ s("p", { className: d(
+      "mb-1 px-3",
+      "prometeo-fonts-label-large",
+      Y?.[E || "default"]?.[M]
+    ), children: D }),
+    /* @__PURE__ */ p("div", { className: "relative", children: [
+      /* @__PURE__ */ s(
+        "input",
+        {
+          ref: o,
+          value: u,
+          onKeyUp: H,
+          onChange: G,
+          onClick: (e) => b(e.currentTarget),
+          onSelect: (e) => b(e.currentTarget),
+          name: K,
+          disabled: a,
+          className: d(
+            "absolute inset-0 w-full h-full",
+            "opacity-0 cursor-text z-10",
+            "bg-transparent border-none outline-none",
+            "pointer-events-none"
+          ),
+          autoComplete: "off",
+          autoCorrect: "off",
+          autoCapitalize: "off",
+          spellCheck: "false",
+          inputMode: "text",
+          ...q
+        }
+      ),
+      /* @__PURE__ */ p(
+        "div",
+        {
+          ref: C,
+          className: d(
+            "border border-neutral-default-default rounded-md p-3",
+            "flex flex-wrap gap-1 min-h-[58px]",
+            "transition-all duration-300 ease-in-out",
+            "cursor-text",
+            X[M][E],
+            I ? "ring-[1px]" : "",
+            // 'hover:border-primary-default-hover',
+            a && "hover:border-neutral-default-disabled"
+          ),
+          onMouseDown: (e) => {
+            e.stopPropagation(), P?.(e), o.current?.focus();
+            const t = u.length;
+            o.current && (o.current.selectionStart = t, o.current.selectionEnd = t), i(t);
+          },
+          onClick: (e) => {
+            e.stopPropagation(), o.current?.focus(), P?.(e);
+          },
+          children: [
+            F && /* @__PURE__ */ s("div", { className: d(
+              "flex items-center text-neutral-default-default",
+              a && "text-neutral-default-disabled"
+            ), children: F }),
+            l.map((e, t) => /* @__PURE__ */ p(
+              "div",
+              {
+                className: d(
+                  "h-8 max-h-8 rounded-lg bg-primary-light-default border border-neutral-default-default",
+                  "flex items-center gap-2 px-2",
+                  "prometeo-fonts-label-medium z-20",
+                  t === l.length - 1 && m ? "opacity-0 hidden  overflow-hidden" : "",
+                  a && "border-neutral-default-disabled text-neutral-default-disabled",
+                  $
+                ),
+                children: [
+                  z && /* @__PURE__ */ s("div", { className: "flex items-center", children: j.createElement(
+                    z,
+                    {
+                      size: 16,
+                      className: d(
+                        "text-neutral-default-default",
+                        a && "text-neutral-default-disabled"
+                      )
+                    }
+                  ) }),
+                  /* @__PURE__ */ s(
+                    "span",
+                    {
+                      onClick: (r) => {
+                        r.stopPropagation(), !a && L(e);
+                      },
+                      className: d(
+                        "cursor-pointer hover:text-neutral-default-hover",
+                        a && "cursor-default hover:text-neutral-default-disabled"
+                      ),
+                      children: e
+                    }
+                  ),
+                  /* @__PURE__ */ s(
+                    "div",
+                    {
+                      onClick: (r) => {
+                        r.stopPropagation(), !a && J(e);
+                      },
+                      className: d(
+                        "cursor-pointer hover:scale-105 transition-all duration-200 ",
+                        a && " cursor-default hover:scale-100 "
+                      ),
+                      children: /* @__PURE__ */ s(
+                        T,
+                        {
+                          size: 16,
+                          className: d(
+                            "text-neutral-default-default hover:text-neutral-default-hover transition-all duration-200",
+                            a && "text-neutral-default-disabled hover:text-neutral-default-disabled"
+                          )
+                        }
+                      )
+                    }
+                  )
+                ]
+              },
+              e
+            )),
+            I && !x && /* @__PURE__ */ p("div", { className: "flex items-center min-w-[2px]", children: [
+              /* @__PURE__ */ s("span", { className: "text-neutral-default-default whitespace-pre-wrap wrap-break-word", children: u.slice(0, _) }),
+              /* @__PURE__ */ s("span", { className: "animate-[cursor-intermitent_1s_ease-in-out_infinite] bg-neutral-default-pressed w-[2px] h-5 inline-block align-middle mx-px z-20" }),
+              /* @__PURE__ */ s("span", { className: "text-neutral-default-default whitespace-pre-wrap wrap-break-word", children: u.slice(_) })
+            ] }),
+            l.length === 0 && !I && /* @__PURE__ */ s("span", { className: d(
+              "text-neutral-medium-default self-center",
+              a && "text-neutral-default-disabled"
+            ), children: U || `Escribe los valores separados por ${N}` })
+          ]
+        }
+      )
+    ] }),
+    v && E !== "error" && !a && (typeof v == "string" ? /* @__PURE__ */ p("div", { className: "prometeo-fonts-body-small text-neutral-medium-default ml-3 mt-1 flex items-center gap-1", children: [
+      /* @__PURE__ */ s(ee, { size: 16, className: "text-neutral-medium-default" }),
+      v
+    ] }) : /* @__PURE__ */ s("div", { className: "ml-3", children: v })),
+    y && typeof y == "string" && !a ? /* @__PURE__ */ p("div", { className: "prometeo-fonts-body-small text-error-default-default ml-3 mt-1 flex items-center gap-1", children: [
+      /* @__PURE__ */ s(te, { size: 16, className: "text-error-default-default" }),
+      y
+    ] }) : y
+  ] });
+}, oe = j.memo(ae);
+export {
+  oe as default
+};

package/dist/components/Layout/LayoutGeneric.js

@@ -0,0 +1,13 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { memo as a } from "react";
+import { SidebarProvider as t } from "../Sidebar/context/SidebarContext.js";
+const f = ({
+  children: r,
+  sidebar: l
+}) => /* @__PURE__ */ o("div", { className: "flex h-screen w-full bg-neutral-default-default", children: [
+  /* @__PURE__ */ e(t, { children: l }),
+  /* @__PURE__ */ e("main", { className: "w-full h-full overflow-y-auto", children: r })
+] }), u = a(f);
+export {
+  u as default
+};

package/dist/components/Logo/Logo.js

@@ -0,0 +1,9 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { TicketFilled as r } from "../../Icons/Icons.js";
+const s = () => /* @__PURE__ */ t("div", { className: "container-logo flex items-center justify-center gap-1 bg-linear-to-br from-[#312C85] to-[#1E1A4D] rounded-md min-w-[185px]", children: [
+  /* @__PURE__ */ e(r, { size: 28, className: "rotate-140 text-primary-medium-pressed icon-logo" }),
+  /* @__PURE__ */ e("span", { className: "font-bold text-[28px] text-primary-medium-pressed font-monserra -tracking-wide text-logo", children: "TICKETS" })
+] });
+export {
+  s as default
+};

package/dist/{Menu.es.js → components/Menu/MenuComposable.js}

@@ -1,7 +1,7 @@
-import { j as e } from "./jsx-runtime-DKDX3adD.js";
-import { c as r } from "./cn-B6yFEsav.js";
+import { jsx as e } from "react/jsx-runtime";
+import { cn as r } from "../../lib/cn.js";
 import { AnimatePresence as n, motion as o } from "framer-motion";
-const s = ({ menuRef: t, children: a, className: i }) => /* @__PURE__ */ e.jsx("div", { ref: t, className: r("flex bg-neutral-default-default absolute bottom-10 left-24 border border-neutral-strong-default h-auto w-60 rounded-md px-2", i), children: /* @__PURE__ */ e.jsx(n, { mode: "wait", children: /* @__PURE__ */ e.jsx(
+const l = ({ menuRef: t, children: i, className: a }) => /* @__PURE__ */ e("div", { ref: t, className: r("flex bg-neutral-default-default absolute bottom-10 left-24 border border-neutral-strong-default h-auto w-60 rounded-md px-2", a), children: /* @__PURE__ */ e(n, { mode: "wait", children: /* @__PURE__ */ e(
   o.div,
   {
     initial: { height: 0, opacity: 0 },
@@ -26,9 +26,9 @@ const s = ({ menuRef: t, children: a, className: i }) => /* @__PURE__ */ e.jsx("
       }
     },
     className: "overflow-hidden flex flex-col justify-between  items-center w-full",
-    children: a
+    children: i
   }
-) }) }), l = () => /* @__PURE__ */ e.jsx(
+) }) }), s = () => /* @__PURE__ */ e(
   o.div,
   {
     className: "flex justify-center items-center w-full ",
@@ -42,13 +42,13 @@ const s = ({ menuRef: t, children: a, className: i }) => /* @__PURE__ */ e.jsx("
         ease: "easeInOut"
       }
     },
-    children: /* @__PURE__ */ e.jsx("div", { className: "border-b border-neutral-strong-default border w-full" })
+    children: /* @__PURE__ */ e("div", { className: "border-b border-neutral-strong-default border w-full" })
   }
-), d = ({ onClick: t, children: a, className: i }) => /* @__PURE__ */ e.jsx(
+), d = ({ onClick: t, children: i, className: a }) => /* @__PURE__ */ e(
   o.button,
   {
     onClick: t,
-    className: r("flex py-2 w-full px-2 gap-1 rounded-md cursor-pointer mt-2 items-center overflow-hidden focus:outline-none hover:bg-neutral-medium-selected button-profile", i),
+    className: r("flex py-2 w-full px-2 gap-1 rounded-md cursor-pointer mt-2 items-center overflow-hidden focus:outline-none hover:bg-neutral-medium-selected button-profile", a),
     exit: {
       opacity: 0,
       y: -8,
@@ -65,13 +65,12 @@ const s = ({ menuRef: t, children: a, className: i }) => /* @__PURE__ */ e.jsx("
       transition: { duration: 0.2 }
     },
     whileTap: { scale: 0.98 },
-    children: a
+    children: i
   }
-), f = Object.assign(s, {
-  Divider: l,
+), f = Object.assign(l, {
+  Divider: s,
   Items: d
 });
 export {
-  f as Menu,
-  f as default
+  f as Menu
 };

package/dist/components/OtpInput/OtpInput.js

@@ -0,0 +1,112 @@
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import { Check as P, Error as C } from "../../Icons/Icons.js";
+import { cn as a } from "../../lib/cn.js";
+import { OTPInput as F } from "../../node_modules/input-otp/dist/index.js";
+import p, { memo as L } from "react";
+const M = ({
+  value: t = "",
+  name: s,
+  onChange: b,
+  onComplete: v,
+  onBlur: w,
+  maxLength: j = 6,
+  placeholder: N = "•",
+  disabled: S = !1,
+  className: O,
+  autoFocus: k = !1,
+  pasteTransformer: I,
+  errorComponent: r,
+  hasError: n,
+  helperComponent: d,
+  helperAlignment: m = "left",
+  slotClassName: y,
+  variant: c = "default",
+  hideSlotsMiddleSeparator: _ = !1
+}) => {
+  const i = m === "left" ? "justify-start w-full text-left" : m === "center" ? "justify-center" : "justify-end text-right w-full", l = {
+    default: {
+      text: "text-neutral-default-default",
+      icon: null
+    },
+    error: {
+      text: "text-error-default-default",
+      icon: /* @__PURE__ */ e(C, { size: 18, className: "text-error-default-default" })
+    },
+    success: {
+      text: "text-success-default-default",
+      icon: /* @__PURE__ */ e(P, { size: 18, className: "text-success-default-default" })
+    }
+  };
+  return /* @__PURE__ */ e(
+    F,
+    {
+      value: t,
+      name: s,
+      autoFocus: k,
+      onChange: (u) => {
+        b?.(u, s);
+      },
+      onComplete: v,
+      onBlur: w,
+      maxLength: j,
+      disabled: S,
+      pasteTransformer: I,
+      spellCheck: !1,
+      containerClassName: a("group flex items-center has-[:disabled]:opacity-30 w-max justify-center", O),
+      render: ({ slots: u }) => {
+        const g = Math.floor(u.length / 2), z = u.slice(0, g), E = u.slice(g);
+        return /* @__PURE__ */ f("div", { className: "flex flex-col items-center", children: [
+          /* @__PURE__ */ f("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ e("div", { className: "flex", children: z.map((o, x) => /* @__PURE__ */ e(h, { ...o, placeholder: N, hasError: n, className: y, variant: c }, x)) }),
+            /* @__PURE__ */ e("hr", { className: a("w-2 h-1 mx-2 border-neutral-default-default", _ && "hidden") }),
+            /* @__PURE__ */ e("div", { className: "flex", children: E.map((o, x) => /* @__PURE__ */ e(h, { ...o, placeholder: N, hasError: n, variant: c, className: y }, x)) })
+          ] }),
+          n && r && (typeof r == "string" ? /* @__PURE__ */ f("span", { className: a("text-error-default-default text-xs mt-1 flex items-center gap-1", i, l.error.text), children: [
+            l.error.icon,
+            r
+          ] }) : p.cloneElement(r, { className: a(
+            "text-error-default-default text-xs mt-1",
+            i,
+            l.error.text,
+            r?.props?.className
+          ) })),
+          d && m && (typeof d == "string" ? /* @__PURE__ */ f("span", { className: a("text-neutral-medium-default text-xs mt-1 flex items-center gap-1", l[c].text, i), children: [
+            l[c].icon,
+            d
+          ] }) : p.cloneElement(d, { className: a("text-neutral-medium-default text-xs mt-1", i, l[c].text, d?.props?.className) }))
+        ] });
+      }
+    }
+  );
+};
+M.displayName = "OtpInput";
+const R = (t) => {
+  const s = {
+    default: "border-neutral-default-default",
+    error: "border-error-default-default",
+    success: "border-success-default-default"
+  };
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      className: a(
+        "relative w-12 h-12 md:w-14 md:h-14 text-[1rem] md:text-[1.2rem] text-white",
+        "flex items-center justify-center",
+        "transition-all duration-300",
+        "border-2 border-neutral-default-default rounded-md mx-1",
+        { "border-2 border-primary-default-default": t.isActive },
+        s[t.variant || "default"],
+        t.className,
+        t.hasError && s.error
+      ),
+      children: [
+        /* @__PURE__ */ e("div", { className: "group-has-[input[data-input-otp-placeholder-shown]]:opacity-20", children: t.char ?? t.placeholder }),
+        t.hasFakeCaret && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e("div", { className: "w-3 h-1 rounded-full bg-neutral-default-default animate-pulse" }) })
+      ]
+    }
+  );
+}, h = L(R);
+h.displayName = "Slot";
+export {
+  M as default
+};

package/dist/{Pagination.es.js → components/Pagination/Pagination.js}

@@ -1,49 +1,49 @@
-import { j as t } from "./jsx-runtime-DKDX3adD.js";
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
 import { motion as a } from "framer-motion";
-function h({
-  currentPage: i = 1,
+function m({
+  currentPage: s = 1,
   totalPages: l = 0,
-  onPageChange: p
+  onPageChange: d
 }) {
   const n = (e) => {
-    e >= 1 && e <= l && e !== i && p?.(e);
-  }, d = (() => {
+    e >= 1 && e <= l && e !== s && d?.(e);
+  }, u = (() => {
     const e = [];
     if (l > 7)
-      if (e.push(1), i <= 4) {
-        for (let s = 2; s <= 5; s++)
-          e.push(s);
+      if (e.push(1), s <= 4) {
+        for (let i = 2; i <= 5; i++)
+          e.push(i);
         e.push("ellipsis"), e.push(l);
-      } else if (i >= l - 3) {
+      } else if (s >= l - 3) {
         e.push("ellipsis");
-        for (let s = l - 4; s <= l; s++)
-          e.push(s);
+        for (let i = l - 4; i <= l; i++)
+          e.push(i);
       } else {
         e.push("ellipsis");
-        for (let s = i - 1; s <= i + 1; s++)
-          e.push(s);
+        for (let i = s - 1; i <= s + 1; i++)
+          e.push(i);
         e.push("ellipsis"), e.push(l);
       }
     else
-      for (let s = 1; s <= l; s++)
-        e.push(s);
+      for (let i = 1; i <= l; i++)
+        e.push(i);
     return e;
   })();
-  return /* @__PURE__ */ t.jsxs("div", { className: "flex items-center justify-center gap-2 p-4", children: [
-    /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ p("div", { className: "flex items-center justify-center gap-2 p-4", children: [
+    /* @__PURE__ */ t(
       a.button,
       {
         whileHover: { scale: 1.05 },
         whileTap: { scale: 0.95 },
-        onClick: () => n(i - 1),
-        disabled: i === 1,
+        onClick: () => n(s - 1),
+        disabled: s === 1,
         className: "px-4 py-2 text-primary-medium-default hover:text-primary-default-default disabled:text-gray-600 disabled:cursor-default transition-colors cursor-pointer",
         children: "Anterior"
       }
     ),
-    /* @__PURE__ */ t.jsx("div", { className: "flex items-center gap-1 select-none", children: d.map((e, o) => {
+    /* @__PURE__ */ t("div", { className: "flex items-center gap-1 select-none", children: u.map((e, o) => {
       if (e === "ellipsis")
-        return /* @__PURE__ */ t.jsx(
+        return /* @__PURE__ */ t(
           "span",
           {
             className: "px-3 py-2 text-neutral-default-default",
@@ -51,16 +51,16 @@ function h({
           },
           `ellipsis-${o}`
         );
-      const s = e, r = s === i;
-      return /* @__PURE__ */ t.jsxs(
+      const i = e, r = i === s;
+      return /* @__PURE__ */ p(
         a.button,
         {
           whileHover: r ? {} : { scale: 1.1 },
           whileTap: r ? {} : { scale: 0.9 },
-          onClick: () => n(s),
+          onClick: () => n(i),
           className: `relative px-3 py-2 min-w-[40px] text-center transition-colors ${r ? "text-primary-default-default" : "text-neutral-default-default hover:text-white cursor-pointer "}`,
           children: [
-            r && /* @__PURE__ */ t.jsx(
+            r && /* @__PURE__ */ t(
               a.div,
               {
                 layoutId: "activePage",
@@ -73,19 +73,19 @@ function h({
                 }
               }
             ),
-            /* @__PURE__ */ t.jsx("span", { className: "relative z-10", children: s })
+            /* @__PURE__ */ t("span", { className: "relative z-10", children: i })
           ]
         },
-        s
+        i
       );
     }) }),
-    /* @__PURE__ */ t.jsx(
+    /* @__PURE__ */ t(
       a.button,
       {
         whileHover: { scale: 1.05 },
         whileTap: { scale: 0.95 },
-        onClick: () => n(i + 1),
-        disabled: i === l,
+        onClick: () => n(s + 1),
+        disabled: s === l,
         className: "px-4 py-2 text-primary-medium-default hover:text-primary-default-default disabled:text-gray-600 disabled:cursor-default transition-colors cursor-pointer",
         children: "Siguiente"
       }
@@ -93,5 +93,5 @@ function h({
   ] });
 }
 export {
-  h as default
+  m as default
 };