prometeo-design-system 4.1.5 → 4.1.8

package/dist/Input.es.js

@@ -8,7 +8,7 @@ import { EyeVisibility as oe } from "./Icons/EyeVisibility.es.js";
 import { EyeVisibilityOff as se } from "./Icons/EyeVisibilityOff.es.js";
 import le from "./Button.es.js";
 import { Close as ae } from "./Icons/Close.es.js";
-const m = {
+const x = {
   default: {
     container: "",
     input: e(
@@ -44,45 +44,45 @@ const m = {
   }
 }, $ = V(
   ({
-    label: x,
-    icon: s,
-    iconPosition: d = "left",
+    label: h,
+    icon: o,
+    iconPosition: l = "left",
     onChange: I,
     value: S,
-    name: h,
+    name: b,
     width: i = "100%",
-    height: l,
-    variant: a = "default",
-    labelVariant: o = "default",
+    height: a,
+    variant: u = "default",
+    labelVariant: s = "default",
     size: E = "medium",
-    disabled: u = !1,
+    disabled: f = !1,
     type: r = "text",
     isFetching: n,
-    errorComponent: b,
-    helperComponent: g,
+    errorComponent: g,
+    helperComponent: w,
     placeholder: L,
-    required: j = !1,
-    onFocus: P,
-    onBlur: R,
-    onKeyDown: k,
-    onKeyUp: B,
-    className: C,
-    style: D,
-    readOnly: M = !1,
-    onClear: N,
+    required: N = !1,
+    onFocus: R,
+    onBlur: k,
+    onKeyDown: B,
+    onKeyUp: D,
+    className: P,
+    style: M,
+    readOnly: O = !1,
+    onClear: m,
     onClickIcon: z,
     ...v
-  }, O) => {
-    const [w, T] = F(!1), { ref: A } = te();
-    let f = E;
-    l && (f = "customHeight");
+  }, T) => {
+    const [y, A] = F(!1), { ref: C } = te();
+    let p = E;
+    a && (p = "customHeight");
     const c = {
       small: {
         container: "text-sm",
         input: "h-10 px-3 text-[1rem] prometeo-fonts-body-large",
         label: ` prometeo-fonts-label-large 
             peer-focus:prometeo-fonts-label-large  
-            peer-placeholder-shown:${o === "default" ? "prometeo-fonts-body-large" : "prometeo-fonts-label-large"} peer-placeholder-shown:text-neutral-medium-default peer-focus:text-neutral-medium-default `,
+            peer-placeholder-shown:${s === "default" ? "prometeo-fonts-body-large" : "prometeo-fonts-label-large"} peer-placeholder-shown:text-neutral-medium-default peer-focus:text-neutral-medium-default `,
         icon: "w-4 h-4 right-3"
       },
       medium: {
@@ -90,7 +90,7 @@ const m = {
         input: "h-12 px-3 prometeo-fonts-body-large",
         label: ` prometeo-fonts-label-large 
             peer-focus:prometeo-fonts-label-large  
-            peer-placeholder-shown:${o === "default" ? "prometeo-fonts-body-large" : "prometeo-fonts-label-large"} peer-placeholder-shown:text-neutral-medium-default text-neutral-medium-default peer-focus:text-neutral-medium-default `,
+            peer-placeholder-shown:${s === "default" ? "prometeo-fonts-body-large" : "prometeo-fonts-label-large"} peer-placeholder-shown:text-neutral-medium-default text-neutral-medium-default peer-focus:text-neutral-medium-default `,
         icon: "w-5 h-5 right-3"
       },
       large: {
@@ -106,112 +106,113 @@ const m = {
         icon: "w-6 h-6 right-3"
       }
     }, G = () => {
-      T(!w);
-    }, y = {};
-    i && i !== "100%" && (y.width = i), l && (y.height = l);
-    const H = a === "error" && b, J = !H && g, K = r === "password", Q = () => o === "static" ? "-top-1 -translate-y-full left-0 pl-3" : s ? `${p ? "peer-placeholder-shown:top-[calc(50%-12px)]" : "peer-placeholder-shown:top-1/2"} -translate-y-1/2 peer-focus:top-0 peer-focus:left-3 peer-focus:px-1 peer-focus:ml-0 peer-focus:mr-0 ${d === "left" ? "peer-placeholder-shown:ml-6" : "peer-placeholder-shown:mr-6"}` : `${p ? "peer-placeholder-shown:top-[calc(50%-12px)]" : "peer-placeholder-shown:top-1/2"} -translate-y-1/2 peer-focus:top-0 peer-focus:left-3 peer-focus:px-1`, U = () => l ? c.customHeight.label : c[f].label, W = () => l ? { height: l } : {}, X = () => o === "default" ? x : L || x || "", Y = () => K ? s ? d === "left" ? "pl-10 pr-10" : "pr-16" : "pr-10" : s ? d === "left" ? "pl-10 pr-3" : "pr-10 pl-3" : "", Z = o === "default" && "transition-all duration-200 ease-in-out", p = b || g;
+      A(!y);
+    }, j = {};
+    i && i !== "100%" && (j.width = i), a && (j.height = a);
+    const H = u === "error" && g, J = !H && w, K = r === "password", Q = () => s === "static" ? "-top-1 -translate-y-full left-0 pl-3" : o ? `${d ? "peer-placeholder-shown:top-[calc(50%-12px)]" : "peer-placeholder-shown:top-1/2"} -translate-y-1/2 peer-focus:top-0 peer-focus:left-3 peer-focus:px-1 peer-focus:ml-0 peer-focus:mr-0 ${l === "left" ? "peer-placeholder-shown:ml-6" : "peer-placeholder-shown:mr-6"}` : `${d ? "peer-placeholder-shown:top-[calc(50%-12px)]" : "peer-placeholder-shown:top-1/2"} -translate-y-1/2 peer-focus:top-0 peer-focus:left-3 peer-focus:px-1`, U = () => a ? c.customHeight.label : c[p].label, W = () => a ? { height: a } : {}, X = () => s === "default" ? h : L || h || "", Y = () => K ? !o && !m ? "pr-10" : l === "left" ? "pl-10 pr-10" : "pr-16" : m ? o ? l === "left" ? "pl-10 pr-7" : "pr-10 pl-3" : "pr-7" : o ? l === "left" ? "pl-10 pr-3" : "pr-10 pl-3" : "", Z = s === "default" && "transition-all duration-200 ease-in-out", d = g || w;
     return /* @__PURE__ */ t.jsxs(
       "div",
       {
         className: e(
           "relative",
-          c[f].container,
+          c[p].container,
           !i && "w-full",
           "bg-inherit",
-          o === "static" && "mt-2",
-          C
+          s === "static" && "mt-2",
+          P
         ),
-        style: { ...D, ...y },
+        style: { ...M, ...j },
         children: [
           /* @__PURE__ */ t.jsx(
             "input",
             {
-              id: h,
-              name: h,
-              ref: O,
+              id: b,
+              name: b,
+              ref: T,
               value: S,
               placeholder: X(),
-              type: r === "password" && w ? "text" : r,
+              type: r === "password" && y ? "text" : r,
               className: e(
                 "peer w-full border rounded-lg bg-transparent appearance-none transition-all duration-200 ease-in-out",
                 "focus:outline-none px-3",
-                o === "default" && "placeholder:text-transparent",
-                o === "static" && "placeholder:text-neutral-medium-default ",
-                m[a].input,
-                c[f].input,
-                s && "pr-10",
-                u && "bg-transparent opacity-60 border-neutral-strong-default text-neutral-medium-disabled",
-                m[a].container,
+                s === "default" && "placeholder:text-transparent",
+                s === "static" && "placeholder:text-neutral-medium-default ",
+                x[u].input,
+                c[p].input,
+                o && "pr-10",
+                f && "bg-transparent opacity-60 border-neutral-strong-default text-neutral-medium-disabled",
+                x[u].container,
                 Y()
               ),
               style: W(),
               onChange: I,
-              onFocus: P,
-              onBlur: R,
-              disabled: u,
-              required: j,
-              onKeyDown: k,
-              onKeyUp: B,
+              onFocus: R,
+              onBlur: k,
+              disabled: f,
+              required: N,
+              onKeyDown: B,
+              onKeyUp: D,
               defaultValue: v.defaultValue,
-              readOnly: M,
+              readOnly: O,
               ...v
             }
           ),
           /* @__PURE__ */ t.jsx(
             "label",
             {
-              ref: A,
-              htmlFor: h,
+              ref: C,
+              htmlFor: b,
               className: e(
                 "absolute left-3 pointer-events-none px-1 z-10",
                 Z,
                 U(),
-                m[a].label,
+                x[u].label,
                 Q(),
-                j && "after:content-['*'] after:text-error-default after:ml-1",
-                u && "text-neutral-medium-disabled prometeo-fonts-label-large"
+                N && "after:content-['*'] after:text-error-default after:ml-1",
+                f && "text-neutral-medium-disabled prometeo-fonts-label-large"
               ),
-              children: x
+              children: h
             }
           ),
-          (s || r === "password" || n) && /* @__PURE__ */ t.jsx(
+          (o || r === "password" || n) && /* @__PURE__ */ t.jsx(
             "button",
             {
               tabIndex: -1,
               type: "button",
               className: e(
-                `absolute ${p ? "top-[calc(50%-12px)]" : "top-1/2"} -translate-y-1/2 flex items-center justify-center z-10`,
-                c[f].icon,
-                m[a].icon,
+                `absolute ${d ? "top-[calc(50%-12px)]" : "top-1/2"} -translate-y-1/2 flex items-center justify-center z-10`,
+                c[p].icon,
+                x[u].icon,
                 (r === "password" || z) && !n ? "cursor-pointer" : "pointer-events-none",
-                d === "right" ? "right-3" : "left-3"
+                l === "right" ? "right-3" : "left-3"
               ),
               onClick: n ? void 0 : r === "password" ? G : z,
               onMouseDown: (_) => r === "password" && !n && _.preventDefault(),
               children: /* @__PURE__ */ t.jsxs("div", { className: "flex items-center", children: [
-                n && r !== "password" ? /* @__PURE__ */ t.jsx(ee, { variant: "sync", size: "small", className: "size-5" }) : s,
-                r === "password" && (w ? /* @__PURE__ */ t.jsx(oe, { size: 24, className: "" }) : /* @__PURE__ */ t.jsx(se, { size: 24, className: "" }))
+                n && r !== "password" ? /* @__PURE__ */ t.jsx(ee, { variant: "sync", size: "small", className: "size-5" }) : o,
+                r === "password" && (y ? /* @__PURE__ */ t.jsx(oe, { size: 24, className: "" }) : /* @__PURE__ */ t.jsx(se, { size: 24, className: "" }))
               ] })
             }
           ),
-          N && /* @__PURE__ */ t.jsx(
+          m && /* @__PURE__ */ t.jsx(
             le,
             {
               type: "button",
               className: e(
-                `absolute ${p ? "top-[calc(50%-12px)]" : "top-1/2"} -translate-y-1/2 flex items-center justify-center z-10 right-1`,
+                `absolute ${d ? "top-[calc(50%-12px)]" : "top-1/2"} -translate-y-1/2 flex items-center justify-center z-10 right-1`,
                 "size-6 p-1 rounded-full",
                 "hover:bg-neutral-medium-hover transition-colors",
-                u && "opacity-50 cursor-not-allowed"
+                f && "opacity-50 cursor-not-allowed",
+                (o && l === "right" || r === "password" || n) && "mr-9"
               ),
-              disabled: u,
-              onClick: N,
+              disabled: f,
+              onClick: m,
               variant: "text",
               color: "secondary",
               icon: /* @__PURE__ */ t.jsx(ae, { size: 20, className: "" })
             }
           ),
-          p && /* @__PURE__ */ t.jsx("div", { className: "min-h-6", children: (H || J) && /* @__PURE__ */ t.jsx(re, { className: "absolute ", variant: a, children: b || g }) })
+          d && /* @__PURE__ */ t.jsx("div", { className: "min-h-6", children: (H || J) && /* @__PURE__ */ t.jsx(re, { className: "absolute ", variant: u, children: g || w }) })
         ]
       }
     );

package/dist/PlainTooltip.es.js

@@ -1,62 +1,62 @@
 import { j as y } from "./jsx-runtime-GkKLlHH4.js";
 import { c as _ } from "./cn-B6yFEsav.js";
-import { memo as j, useRef as v, useCallback as A, useEffect as a } from "react";
+import { memo as j, useRef as v, useCallback as A, useEffect as u } from "react";
 import { createPortal as C } from "react-dom";
 const G = ({ title: w, children: p, delayToShow: x = 500, delayToClose: R = 1e3, className: B, attachToParent: d = !1, disabled: D = !1 }) => {
-  const s = v(null), r = v(null), n = v(null), o = A(() => {
+  const s = v(null), n = v(null), r = v(null), o = A(() => {
     if (typeof window > "u")
       return;
-    const e = r.current, i = s.current;
+    const e = n.current, i = s.current;
     if (!e || !i)
       return;
     const l = window.getComputedStyle(e).display, c = e.style.display, m = e.style.visibility, f = e.style.translate, h = l === "none";
     h && (e.style.visibility = "hidden", e.style.display = "block"), f && e.style.removeProperty("translate");
     const E = i.getBoundingClientRect();
     d ? (e.style.removeProperty("position"), e.style.removeProperty("left"), e.style.removeProperty("top")) : (e.style.setProperty("position", "fixed"), e.style.setProperty("left", `${E.right}px`), e.style.setProperty("top", `${E.bottom}px`));
-    const u = e.getBoundingClientRect(), I = window.innerWidth, N = window.innerHeight, b = Math.max(0, 0 - u.left), M = Math.max(0, u.right - I), L = Math.max(0, 0 - u.top), P = Math.max(0, u.bottom - N), O = b > 0 ? b + 16 : M > 0 ? -(M + 16) : 0, T = L > 0 ? L + 16 : P > 0 ? -(P + 16) : 0;
+    const a = e.getBoundingClientRect(), I = window.innerWidth, N = window.innerHeight, b = Math.max(0, 0 - a.left), M = Math.max(0, a.right - I), L = Math.max(0, 0 - a.top), P = Math.max(0, a.bottom - N), O = b > 0 ? b + 16 : M > 0 ? -(M + 16) : 0, T = L > 0 ? L + 16 : P > 0 ? -(P + 16) : 0;
     O === 0 && T === 0 ? e.style.removeProperty("translate") : e.style.setProperty("translate", `${O}px ${T}px`), h && (e.style.display = c, e.style.visibility = m);
   }, [d]);
-  if (a(() => {
-    const t = s.current, e = r.current;
+  if (u(() => {
+    const t = s.current, e = n.current;
     if (!t || !e)
       return;
     const i = (m, f) => {
-      n.current = setTimeout(() => {
+      r.current = setTimeout(() => {
         f();
       }, m);
     }, l = () => {
-      n.current && clearTimeout(n.current), o(), i(x, () => {
-        r.current?.classList.add("visible");
+      r.current && clearTimeout(r.current), o(), i(x, () => {
+        n.current?.classList.add("visible");
       });
     }, c = () => {
-      n.current && clearTimeout(n.current), i(R, () => {
-        r.current?.classList.remove("visible");
+      r.current && clearTimeout(r.current), i(R, () => {
+        n.current?.classList.remove("visible");
       });
     };
     return t.addEventListener("mouseenter", l), t.addEventListener("mouseleave", c), () => {
       t.removeEventListener("mouseenter", l), t.removeEventListener("mouseleave", c);
     };
-  }, [x, R, o]), a(() => {
+  }, [x, R, o]), u(() => {
     o();
-  }, [o, w]), a(() => {
+  }, [o, w]), u(() => {
     if (typeof window > "u")
       return;
     const t = () => {
-      r.current && r.current.classList.contains("visible") && o();
+      n.current && n.current.classList.contains("visible") && o();
     };
     return window.addEventListener("resize", t), window.addEventListener("scroll", t, !0), () => {
       window.removeEventListener("resize", t), window.removeEventListener("scroll", t, !0);
     };
-  }, [o]), a(() => () => {
-    n.current && clearTimeout(n.current);
+  }, [o]), u(() => () => {
+    r.current && clearTimeout(r.current);
   }, []), D) return p;
-  const g = /* @__PURE__ */ y.jsx("span", { ref: r, className: _(
+  const g = /* @__PURE__ */ y.jsx("span", { ref: n, className: _(
     "plain-tooltip ",
     "absolute z-999",
     "bg-neutral-weak-default px-2 py-1 rounded-lg w-max",
-    "text-neutral-strong-default prometeo-fonts-body-small ",
+    "text-neutral-strong-default prometeo-fonts-body-small text-balance ",
     B,
-    r.current?.innerText?.length && r.current?.innerText?.length > Math.floor(450 / 10) ? "w-max line-clamp-1" : "max-w-[200px] line-clamp-none"
+    n.current?.innerText?.length && n.current?.innerText?.length > Math.floor(450 / 10) ? "w-max line-clamp-1" : "max-w-[200px] line-clamp-none"
   ), children: w });
   return !d && typeof document < "u" ? /* @__PURE__ */ y.jsxs("div", { ref: s, children: [
     p,