prometeo-design-system 1.6.7 → 1.6.9

package/dist/Button.es.js

@@ -1,8 +1,8 @@
 import { j as t } from "./jsx-runtime-ByW6EXIE.js";
 import { c as n } from "./cn-B6yFEsav.js";
-import { c as S } from "./index-BOQuZ0gG.js";
-import { useAnimationControls as C, motion as m } from "framer-motion";
-const N = S(
+import { c as C } from "./index-BOQuZ0gG.js";
+import { useAnimationControls as N, motion as m } from "framer-motion";
+const z = C(
   "flex items-center justify-center cursor-pointer focus:outline-none font-semibold rounded-md transition-colors",
   {
     variants: {
@@ -75,7 +75,7 @@ const N = S(
     }
   }
 );
-function B({
+function R({
   label: o = "Selene",
   onClick: p,
   icon: l,
@@ -92,14 +92,15 @@ function B({
   children: u,
   Spinner: g,
   className: y,
-  ...h
+  form: h,
+  ...w
 }) {
-  const d = C(), w = () => {
+  const d = N(), j = () => {
     !a || r || e || !s || d.start({ rotate: 90 });
-  }, j = () => {
+  }, H = () => {
     !a || r || e || !s || d.start({ rotate: 0 });
-  }, H = n(
-    N({
+  }, S = n(
+    z({
       variant: v,
       color: x,
       size: i,
@@ -111,16 +112,17 @@ function B({
   return /* @__PURE__ */ t.jsx(
     m.button,
     {
+      form: h,
       onClick: p,
-      className: H,
+      className: S,
       whileHover: a && !r && !e ? { scale: 1.05 } : {},
       whileTap: a && !r && !e ? { scale: 0.98 } : {},
       transition: { type: "spring", stiffness: 400, damping: 17 },
-      onHoverStart: w,
-      onHoverEnd: j,
+      onHoverStart: j,
+      onHoverEnd: H,
       disabled: r || e,
       type: b,
-      ...h,
+      ...w,
       children: e ? /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2", children: [
         g,
         i !== "small" && /* @__PURE__ */ t.jsx("span", { children: f })
@@ -143,5 +145,5 @@ function B({
   );
 }
 export {
-  B as default
+  R as default
 };

package/dist/InputFormik.es.js

@@ -1,89 +1,97 @@
-import { j as t } from "./jsx-runtime-ByW6EXIE.js";
-import { c as n } from "./cn-B6yFEsav.js";
-import { useField as V, ErrorMessage as k } from "formik";
-import { useState as p } from "react";
-import { Icons as b } from "./Icons.es.js";
-const D = ({
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
+import { c as u } from "./cn-B6yFEsav.js";
+import { useField as k, ErrorMessage as B } from "formik";
+import { useState as w } from "react";
+import { Icons as v } from "./Icons.es.js";
+const U = ({
   icon: a,
-  iconPosition: l = "left",
-  label: g,
-  className: y,
-  containerClassName: v,
-  id: i,
-  type: f = "text",
-  disabled: m = !1,
-  ...e
+  iconPosition: s = "left",
+  label: c,
+  className: j,
+  containerClassName: N,
+  id: x,
+  type: p = "text",
+  labelVariant: r = "default",
+  placeholder: o,
+  disabled: h = !1,
+  ...t
 }) => {
-  const [r, c] = V(e), [s, x] = p(!1), [u, w] = p(!1), o = c.touched && c.error, h = r.value && r.value.toString().length > 0, d = f === "password", j = d ? u ? "text" : "password" : f, N = () => s || h ? "-top-3 left-2 scale-90" : "top-1/2 -translate-y-1/2 scale-100", E = () => d ? a ? l === "left" ? "pl-10 pr-10" : "pr-16" : "pr-10" : a ? l === "left" ? "pl-10" : "pr-10" : "", F = () => a && l === "left" ? "left-10" : "left-3", I = () => {
-    w(!u);
+  const [l, g] = k(t), [d, y] = w(!1), [i, E] = w(!1), f = g.touched && g.error, b = l.value && l.value.toString().length > 0, m = p === "password", F = m ? i ? "text" : "password" : p, I = () => {
+    const n = () => a && s === "left" ? "left-9" : "left-0";
+    return r === "static" ? `-top-5 ${n()} scale-90 px-1` : d || b ? `-top-2 ${n()} scale-90` : `top-1/2 -translate-y-1/2 ${n()} scale-100`;
+  }, z = () => r === "static" ? "text-sm" : "text-sm peer-focus:text-sm peer-placeholder-shown:text-base", C = () => r === "static" ? o || c : o || "", K = () => m ? a ? s === "left" ? "pl-10 pr-10" : "pr-16" : "pr-10" : a ? s === "left" ? "pl-10" : "pr-10" : "", P = () => {
+    E(!i);
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: n("relative w-full bg-inherit", v), children: [
-    /* @__PURE__ */ t.jsxs("div", { className: "relative bg-inherit", children: [
-      /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ e.jsxs("div", { className: u("relative w-full bg-inherit", r === "static" && "mt-2", N), children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "relative bg-inherit", children: [
+      /* @__PURE__ */ e.jsx(
         "input",
         {
-          disabled: m,
-          id: i || e.name,
-          type: j,
-          name: r.name,
-          value: r.value || "",
-          onChange: r.onChange,
+          disabled: h,
+          id: x || t.name,
+          type: F,
+          name: l.name,
+          value: l.value || "",
+          placeholder: C(),
+          onChange: l.onChange,
           onFocus: () => {
-            x(!0), e.onFocus?.();
+            y(!0), t.onFocus?.();
           },
-          onEmptied: e.onEmptied,
-          onKeyDown: e.onKeyDown,
-          onKeyUp: e.onKeyUp,
-          onBlur: (K) => {
-            x(!1), e.onBlur?.(), r.onBlur(K);
+          onEmptied: t.onEmptied,
+          onKeyDown: t.onKeyDown,
+          onKeyUp: t.onKeyUp,
+          onBlur: (n) => {
+            y(!1), t.onBlur?.(), l.onBlur(n);
           },
-          className: n(
+          className: u(
             "w-full px-3 h-12 text-left border-1 rounded-lg transition-all duration-200 ease-in-out text-neutral-default-default",
             "bg-transparent focus:outline-none",
-            s ? "border-primary-default-default border-2" : o ? "border-error-default-default" : "border-neutral-default-default hover:border-neutral-strong-default",
-            E(),
-            y
+            r === "default" && !o && "placeholder:text-transparent",
+            r === "default" && o && "placeholder:text-neutral-medium-default placeholder:opacity-50",
+            r === "static" && "placeholder:text-neutral-medium-default placeholder:opacity-50",
+            d ? "border-primary-default-default border-2 text-primary-default-default" : f ? "border-error-default-default" : "border-neutral-default-default hover:border-neutral-strong-default",
+            K(),
+            j
           )
         }
       ),
-      /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ e.jsx(
         "label",
         {
-          htmlFor: i || e.name,
-          className: n(
-            "absolute transition-all duration-200 ease-in-out pointer-events-none bg-inherit px-1 z-10",
-            "text-md",
-            N(),
-            h || s ? "text-primary-default-default" : o ? "text-red-500" : "text-neutral-medium-default",
-            F()
+          htmlFor: x || t.name,
+          className: u(
+            "absolute transition-all duration-200 font-bold text-sm ease-in-out pointer-events-none bg-inherit px-1 z-10",
+            z(),
+            I(),
+            b || d ? "text-primary-default-default" : f ? "text-red-500" : "text-neutral-medium-default"
           ),
-          children: g
+          children: c
         }
       ),
-      a && /* @__PURE__ */ t.jsx("div", { className: n(
+      a && /* @__PURE__ */ e.jsx("div", { className: u(
         "absolute top-1/2 -translate-y-1/2 text-neutral-medium-default",
-        l === "left" ? "left-3" : "right-3"
+        s === "left" ? "left-3" : "right-3"
       ), children: a }),
-      d && /* @__PURE__ */ t.jsx(
+      m && /* @__PURE__ */ e.jsx(
         "button",
         {
           type: "button",
-          onClick: I,
-          className: n(
+          onClick: P,
+          className: u(
             "absolute top-1/2 -translate-y-1/2 p-1 text-neutral-medium-default hover:text-neutral-strong-default",
             "transition-colors duration-200 focus:outline-none focus:text-primary-default-default",
-            a && l === "right" ? "right-8" : "right-3"
+            a && s === "right" ? "right-8" : "right-3"
           ),
           tabIndex: -1,
-          disabled: m,
-          children: u ? /* @__PURE__ */ t.jsx(b.EyeVisibilityOff, { size: 24, className: "text-neutral-default-default" }) : /* @__PURE__ */ t.jsx(b.EyeVisibility, { size: 24, className: "text-neutral-default-default" })
+          disabled: h,
+          children: i ? /* @__PURE__ */ e.jsx(v.EyeVisibility, { size: 24, className: "text-neutral-default-default" }) : /* @__PURE__ */ e.jsx(v.EyeVisibilityOff, { size: 24, className: "text-neutral-default-default" })
         }
       )
     ] }),
-    o && /* @__PURE__ */ t.jsx(
-      k,
+    f && /* @__PURE__ */ e.jsx(
+      B,
       {
-        name: e.name,
+        name: t.name,
         component: "span",
         className: "block text-error-default-default text-xs mt-1"
       }
@@ -91,5 +99,5 @@ const D = ({
   ] });
 };
 export {
-  D as default
+  U as default
 };

package/dist/InputMultiple.d.ts

@@ -0,0 +1,2 @@
+export * from './exports/InputMultiple'
+export {}

package/dist/InputMultiple.es.js

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

package/dist/ProfilePictureUpload.d.ts

@@ -0,0 +1,2 @@
+export * from './exports/ProfilePictureUpload'
+export {}