prometeo-design-system 1.8.2 → 1.8.4

package/dist/Avatar.es.js

@@ -1,4 +1,4 @@
-import { j as t } from "./jsx-runtime-DKDX3adD.js";
+import { j as t } from "./jsx-runtime-ByW6EXIE.js";
 import { c as p } from "./cn-B6yFEsav.js";
 import { motion as f } from "framer-motion";
 import { useState as u } from "react";

package/dist/Button.es.js

@@ -1,8 +1,9 @@
-import { j as t } from "./jsx-runtime-DKDX3adD.js";
-import { c as n } from "./cn-B6yFEsav.js";
-import { c as C } from "./index-BOQuZ0gG.js";
-import { useAnimationControls as N, motion as m } from "framer-motion";
-const z = C(
+import { j as o } from "./jsx-runtime-ByW6EXIE.js";
+import { c as x } from "./cn-B6yFEsav.js";
+import { c as N } from "./index-BOQuZ0gG.js";
+import { useAnimationControls as k, motion as y } from "framer-motion";
+import { memo as z, useCallback as g, useMemo as i } from "react";
+const A = N(
   "flex items-center justify-center cursor-pointer focus:outline-none font-semibold rounded-md transition-colors",
   {
     variants: {
@@ -75,75 +76,78 @@ const z = C(
     }
   }
 );
-function R({
-  label: o = "Selene",
-  onClick: p,
-  icon: l,
-  contentClassName: c,
-  loadingText: f = "Cargando...",
-  animate: a = !0,
+function M({
+  label: l = "Selene",
+  onClick: h,
+  icon: u,
+  contentClassName: m,
+  loadingText: p = "Cargando...",
+  animate: t = !0,
   animateIcon: s = !0,
   isLoading: e = !1,
   disabled: r = !1,
-  type: b = "button",
-  variant: v = "filled",
-  color: x = "primary",
-  size: i = "medium",
-  children: u,
-  Spinner: g,
-  className: y,
-  form: h,
-  ...w
+  type: w = "button",
+  variant: f = "filled",
+  color: c = "primary",
+  size: d = "medium",
+  children: n,
+  Spinner: b,
+  className: v,
+  form: j,
+  ...C
 }) {
-  const d = N(), j = () => {
-    !a || r || e || !s || d.start({ rotate: 90 });
-  }, H = () => {
-    !a || r || e || !s || d.start({ rotate: 0 });
-  }, S = n(
-    z({
-      variant: v,
-      color: x,
-      size: i,
+  const a = k(), H = g(() => {
+    !t || r || e || !s || a.start({ rotate: 90 });
+  }, [t, r, e, s, a]), S = g(() => {
+    !t || r || e || !s || a.start({ rotate: 0 });
+  }, [t, r, e, s, a]), E = i(() => x(
+    A({
+      variant: f,
+      color: c,
+      size: d,
       disabled: r || e,
       loading: e
     }),
-    y
-  );
-  return /* @__PURE__ */ t.jsx(
-    m.button,
+    v
+  ), [f, c, d, r, e, v]), V = i(() => ({
+    whileHover: t && !r && !e ? { scale: 1.05 } : {},
+    whileTap: t && !r && !e ? { scale: 0.98 } : {},
+    transition: { type: "spring", stiffness: 400, damping: 17 }
+  }), [t, r, e]), B = i(() => e ? /* @__PURE__ */ o.jsxs("div", { className: "flex items-center gap-2", children: [
+    b,
+    d !== "small" && /* @__PURE__ */ o.jsx("span", { children: p })
+  ] }) : n || /* @__PURE__ */ o.jsxs("span", { className: x("flex items-center gap-2", m), children: [
+    u && /* @__PURE__ */ o.jsx(
+      y.div,
+      {
+        animate: s ? a : void 0,
+        transition: {
+          type: "spring",
+          stiffness: 400,
+          damping: 17
+        },
+        children: u
+      }
+    ),
+    l && /* @__PURE__ */ o.jsx("span", { children: l })
+  ] }), [e, n, u, l, b, d, p, s, a, m]);
+  return /* @__PURE__ */ o.jsx(
+    y.button,
     {
-      form: h,
-      onClick: p,
-      className: S,
-      whileHover: a && !r && !e ? { scale: 1.05 } : {},
-      whileTap: a && !r && !e ? { scale: 0.98 } : {},
-      transition: { type: "spring", stiffness: 400, damping: 17 },
-      onHoverStart: j,
-      onHoverEnd: H,
+      form: j,
+      onClick: h,
+      className: E,
+      ...V,
+      onHoverStart: H,
+      onHoverEnd: S,
       disabled: r || e,
-      type: b,
-      ...w,
-      children: e ? /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2", children: [
-        g,
-        i !== "small" && /* @__PURE__ */ t.jsx("span", { children: f })
-      ] }) : u || /* @__PURE__ */ t.jsxs("span", { className: n("flex items-center gap-2", c), children: [
-        l && /* @__PURE__ */ t.jsx(
-          m.div,
-          {
-            animate: s ? d : void 0,
-            transition: {
-              type: "spring",
-              stiffness: 400,
-              damping: 17
-            },
-            children: l
-          }
-        ),
-        o && /* @__PURE__ */ t.jsx("span", { children: o })
-      ] })
+      type: w,
+      ...C,
+      children: B
     }
   );
 }
+const F = z(M);
 export {
-  R as default
+  F as default
 };

package/dist/{CardProfile-Bg_q2qMm.js → CardProfile-BZajBGbO.js}

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-DKDX3adD.js";
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
 import { c as l } from "./cn-B6yFEsav.js";
 import { motion as i, AnimatePresence as u } from "framer-motion";
 import m from "./Avatar.es.js";

package/dist/CardProfile.es.js

@@ -1,4 +1,4 @@
-import { C as a } from "./CardProfile-Bg_q2qMm.js";
+import { C as a } from "./CardProfile-BZajBGbO.js";
 export {
   a as CardProfile
 };

package/dist/CheckBox.es.js

@@ -1,4 +1,4 @@
-import { j as t } from "./jsx-runtime-DKDX3adD.js";
+import { j as t } from "./jsx-runtime-ByW6EXIE.js";
 import { Icons as l } from "./Icons.es.js";
 import { useId as o, useRef as d } from "react";
 const k = ({ className: s, disabled: e, ...a }) => {

package/dist/CheckboxFormik.es.js

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-DKDX3adD.js";
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
 import { Icons as x } from "./Icons.es.js";
 import { c as r } from "./cn-B6yFEsav.js";
 import { useField as h, ErrorMessage as p } from "formik";

package/dist/DialogModal.es.js

@@ -1,4 +1,4 @@
-import { j as t } from "./jsx-runtime-DKDX3adD.js";
+import { j as t } from "./jsx-runtime-ByW6EXIE.js";
 import { forwardRef as u, useState as p, useImperativeHandle as f, useRef as g } from "react";
 import { c as i } from "./cn-B6yFEsav.js";
 const x = u(({

package/dist/DrawerDesktop.es.js

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-DKDX3adD.js";
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
 import { Icons as j } from "./Icons.es.js";
 import { c as m } from "./cn-B6yFEsav.js";
 import { c as d } from "./index-BOQuZ0gG.js";

package/dist/DrawerMobile.es.js

@@ -1,4 +1,4 @@
-import { j as r } from "./jsx-runtime-DKDX3adD.js";
+import { j as r } from "./jsx-runtime-ByW6EXIE.js";
 import { forwardRef as O, useState as g, useRef as x, useCallback as t, useImperativeHandle as D } from "react";
 import { Drawer as n } from "vaul";
 import { c as R } from "./cn-B6yFEsav.js";

package/dist/DropZone.es.js

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-DKDX3adD.js";
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
 import { c as i } from "./cn-B6yFEsav.js";
 import w, { useCallback as z } from "react";
 import { useDropzone as R } from "react-dropzone";

package/dist/Header.es.js

@@ -1,8 +1,8 @@
-import { j as e } from "./jsx-runtime-DKDX3adD.js";
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
 import { c as x } from "./cn-B6yFEsav.js";
 import { motion as i } from "framer-motion";
 import { memo as m } from "react";
-const n = ({ title: t, subtitle: s, children: l, className: a }) => /* @__PURE__ */ e.jsx("header", { className: x("h-16 flex items-center px-4 sm:h-20 md:h-24 md:px-6 lg:h-28 xl:h-32 2xl:h-36", a), children: /* @__PURE__ */ e.jsxs(
+const n = ({ title: t, subtitle: l, children: s, className: a }) => /* @__PURE__ */ e.jsx("header", { className: x("h-16 flex items-center px-4 sm:h-20 md:h-24 md:px-6 lg:h-28 xl:h-32 2xl:h-36", a), children: /* @__PURE__ */ e.jsxs(
   i.div,
   {
     initial: { opacity: 0, y: -10 },
@@ -11,10 +11,10 @@ const n = ({ title: t, subtitle: s, children: l, className: a }) => /* @__PURE__
     className: "flex justify-between items-center w-full ",
     children: [
       /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col leading-6", children: [
-        /* @__PURE__ */ e.jsx("h3", { className: "text-xs font-semibold text-neutral-medium-default leading-1 sm:leading-2", children: s }),
+        /* @__PURE__ */ e.jsx("h3", { className: "text-xs font-semibold text-neutral-medium-default leading-1 sm:leading-2 prometeo-fonts-headline-large", children: l }),
         /* @__PURE__ */ e.jsx("h1", { className: "text-xl font-bold text-neutral-strong-default sm:text-2xl md:text-3xl xl:text-[32px] 2xl:text-[34px]", children: t })
       ] }),
-      /* @__PURE__ */ e.jsx("div", { className: "flex gap-4", children: l })
+      /* @__PURE__ */ e.jsx("div", { className: "flex gap-4", children: s })
     ]
   }
 ) }), f = m(n);

package/dist/Icons.es.js

@@ -1,4 +1,4 @@
-import { j as q } from "./jsx-runtime-DKDX3adD.js";
+import { j as q } from "./jsx-runtime-ByW6EXIE.js";
 const l = ({
   size: t,
   className: h,

package/dist/Input.es.js

@@ -1,10 +1,10 @@
-import { j as r } from "./jsx-runtime-DKDX3adD.js";
-import { Icons as z } from "./Icons.es.js";
+import { j as t } from "./jsx-runtime-ByW6EXIE.js";
+import { Icons as O } from "./Icons.es.js";
 import { c as e } from "./cn-B6yFEsav.js";
-import { memo as oe, useState as L, useRef as ae, useCallback as ne, useEffect as B, useLayoutEffect as ue } from "react";
-import { useDebounce as ce } from "use-debounce";
-import fe from "./Spinner.es.js";
-const h = {
+import { memo as ue, useState as N, useRef as ce, useCallback as fe, useEffect as $, useLayoutEffect as ie } from "react";
+import { useDebounce as de } from "use-debounce";
+import pe from "./Spinner.es.js";
+const j = {
   default: {
     container: "",
     input: e(
@@ -53,161 +53,176 @@ const h = {
       "peer-focus:text-success-light"
     )
   }
-}, x = {
-  small: {
-    container: "text-sm",
-    input: "h-10 px-3 text-sm",
-    label: "text-xs peer-focus:text-xs peer-placeholder-shown:text-sm",
-    icon: "w-4 h-4 right-3"
-  },
-  medium: {
-    container: "text-base",
-    input: "h-12 px-3 text-base",
-    label: "text-sm peer-focus:text-sm peer-placeholder-shown:text-base",
-    icon: "w-5 h-5 right-3"
-  },
-  large: {
-    container: "text-lg",
-    input: "h-14 px-3 text-lg",
-    label: "text-sm peer-focus:text-sm peer-placeholder-shown:text-lg",
-    icon: "w-6 h-6 right-3"
-  }
-}, ie = ({
-  label: w,
-  icon: n,
+}, xe = ({
+  label: C,
+  icon: a,
   iconPosition: m = "left",
-  onChange: y,
-  value: c = "",
-  debounceMs: f = 0,
-  name: j,
+  onChange: S,
+  value: n = "",
+  debounceMs: u = 0,
+  name: E,
   width: g = "100%",
-  height: t,
-  variant: i = "default",
+  height: s,
+  variant: c = "default",
   labelVariant: o = "default",
-  size: d = "medium",
-  disabled: v = !1,
-  type: s = "text",
-  isFetching: p,
-  errorComponent: N,
-  helperComponent: S,
-  placeholder: F,
-  required: k = !1,
-  onFocus: H,
-  onBlur: O,
-  onEmptied: P,
-  onKeyDown: T,
-  onKeyUp: W
+  size: T = "medium",
+  disabled: k = !1,
+  type: r = "text",
+  isFetching: f,
+  errorComponent: H,
+  helperComponent: L,
+  placeholder: G,
+  required: P = !1,
+  onFocus: J,
+  onBlur: K,
+  onEmptied: D,
+  onKeyDown: Q,
+  onKeyUp: U
 }) => {
-  const [b, D] = L(c), [C] = ce(b, f), [A, R] = L(!1), [E, G] = L(!1), a = ae(null), V = ne(y, [y]);
-  B(() => {
-    f > 0 && C !== c && V(C);
-  }, [C, f, V, c]), B(() => {
-    D(c);
-  }, [c]);
-  const J = () => {
-    R(!0), H?.();
-  }, K = () => {
-    R(!1), O?.();
-  }, Q = (l) => {
-    const u = l.target.value, se = l.target.name, le = b;
-    D(u), le.length > 0 && u.length === 0 && P?.(), (!f || f === 0) && y(u, se);
-  }, U = () => {
-    G(!E);
+  const [h, R] = N(n), [v] = de(h, u), [W, V] = N(!1), [z, X] = N(!1), b = ce(null);
+  let i = T;
+  s && (i = "customHeight");
+  const d = {
+    small: {
+      container: "text-sm",
+      input: "h-10 px-3 text-sm",
+      label: "text-xs peer-focus:text-xs peer-placeholder-shown:text-sm",
+      icon: "w-4 h-4 right-3"
+    },
+    medium: {
+      container: "text-base",
+      input: "h-12 px-3 text-base",
+      label: "text-sm peer-focus:text-sm peer-placeholder-shown:text-base",
+      icon: "w-5 h-5 right-3"
+    },
+    large: {
+      container: "text-lg",
+      input: "h-14 px-3 text-lg",
+      label: "text-sm peer-focus:text-sm peer-placeholder-shown:text-lg",
+      icon: "w-6 h-6 right-3"
+    },
+    customHeight: {
+      container: "text-base",
+      input: "text-base",
+      label: "text-sm peer-focus:text-sm peer-placeholder-shown:text-xs ",
+      icon: "w-6 h-6 right-3"
+    }
+  }, A = fe(S, [S]);
+  $(() => {
+    u > 0 && v !== n && A(v);
+  }, [v, u, A, n]), $(() => {
+    R(n);
+  }, [n]);
+  const Y = () => {
+    V(!0), J?.();
+  }, Z = () => {
+    V(!1), K?.();
+  }, _ = (p) => {
+    const x = p.target.value, B = p.target.name, l = h;
+    R(x), l.length > 0 && x.length === 0 && D?.(), (!u || u === 0) && S(x, B);
+  }, q = () => {
+    X(!z);
   }, I = {};
-  g && g !== "100%" && (I.width = g), t && (I.height = t);
-  const X = b.length > 0, $ = i === "error" && N, Y = !$ && S, Z = s === "password", _ = () => o === "static" || A || X ? "-top-2 left-2 scale-90" : t ? "top-1/2 -translate-y-1/2 scale-100" : n ? `top-1/2 -translate-y-1/2 ${m === "left" ? "ml-6" : "mr-6"} scale-100 ` : "top-1/2 -translate-y-1/2 scale-100", q = () => o === "static" ? t ? "text-sm" : "text-xs" : t ? "text-sm" : x[d].label, M = () => t ? { height: t } : {}, ee = () => o === "default" ? w : F || w || "", te = () => Z ? n ? m === "left" ? "pl-10 pr-10" : "pr-16" : "pr-10" : n ? m === "left" ? "pl-10 pr-3" : "pr-10 pl-3" : "", re = o === "default" && "transition-all duration-200 ease-in-out";
-  return ue(() => {
-    if (a.current && a.current.parentElement) {
-      const l = window.getComputedStyle(a.current.parentElement);
-      console.log(l.backgroundColor, "bg color parent");
-      const u = l.backgroundColor;
-      u === "transparent" || u === "rgba(0, 0, 0, 0)" ? (a.current.classList.remove("bg-inherit"), a.current.style.backgroundColor = "var(--neutral-900)") : a.current.classList.add("bg-inherit");
+  g && g !== "100%" && (I.width = g), s && (I.height = s);
+  const M = h.length > 0, F = c === "error" && H, ee = !F && L, te = r === "password", re = () => o === "static" || W || M ? "-top-2 left-2 scale-90" : a ? `top-1/2 -translate-y-1/2 ${m === "left" ? "ml-6" : "mr-6"} scale-100 ` : "top-1/2 -translate-y-1/2 scale-100", se = () => o === "static" ? s ? "text-sm" : "text-xs" : s ? d.customHeight.label : d[i].label, oe = () => s ? { height: s } : {}, le = () => o === "default" ? C : G || C || "", ae = () => te ? a ? m === "left" ? "pl-10 pr-10" : "pr-16" : "pr-10" : a ? m === "left" ? "pl-10 pr-3" : "pr-10 pl-3" : "", ne = o === "default" && "transition-all duration-200 ease-in-out";
+  return ie(() => {
+    if (b.current) {
+      const x = ((B) => {
+        let l = B;
+        for (; l && l !== document.body; ) {
+          const y = window.getComputedStyle(l).backgroundColor;
+          if (y && y !== "transparent" && y !== "rgba(0, 0, 0, 0)")
+            return y;
+          l = l.parentElement;
+        }
+        const w = window.getComputedStyle(document.body).backgroundColor;
+        return w && w !== "transparent" && w !== "rgba(0, 0, 0, 0)" ? w : "rgb(255, 255, 255)";
+      })(b.current.parentElement);
+      b.current.style.backgroundColor = x;
     }
-  }, []), /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-    /* @__PURE__ */ r.jsxs(
+  }, []), /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsxs(
       "div",
       {
         className: e(
           "relative",
-          x[d].container,
+          d[i].container,
           !g && "w-full",
           "bg-inherit",
           o === "static" && "mt-2"
         ),
         style: I,
         children: [
-          /* @__PURE__ */ r.jsx(
+          /* @__PURE__ */ t.jsx(
             "input",
             {
-              id: j,
-              name: j,
-              type: s === "password" && E ? "text" : s,
-              value: b,
-              placeholder: ee(),
+              id: E,
+              name: E,
+              type: r === "password" && z ? "text" : r,
+              value: h,
+              placeholder: le(),
               className: e(
                 "peer w-full border-1 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 placeholder:opacity-50",
-                !t && x[d].input,
-                t && `px-3 ${x[d].input.split(" ").filter((l) => l.startsWith("text-")).join(" ")}`,
-                h[i].input,
-                n && "pr-10",
-                v && "bg-transparent opacity-60 border-neutral-strong-default text-neutral-medium-disabled",
-                h[i].container,
-                te()
+                d[i].input,
+                j[c].input,
+                a && "pr-10",
+                k && "bg-transparent opacity-60 border-neutral-strong-default text-neutral-medium-disabled",
+                j[c].container,
+                ae()
               ),
-              style: M(),
-              onChange: Q,
-              onFocus: J,
-              onBlur: K,
-              disabled: v,
-              required: k,
-              onEmptied: P,
-              onKeyDown: T,
-              onKeyUp: W
+              style: oe(),
+              onChange: _,
+              onFocus: Y,
+              onBlur: Z,
+              disabled: k,
+              required: P,
+              onEmptied: D,
+              onKeyDown: Q,
+              onKeyUp: U
             }
           ),
-          /* @__PURE__ */ r.jsx(
+          /* @__PURE__ */ t.jsx(
             "label",
             {
-              ref: a,
-              htmlFor: j,
+              ref: b,
+              htmlFor: E,
               className: e(
                 "absolute left-3 pointer-events-none px-1 z-10",
-                re,
-                q(),
-                h[i].label,
-                _(),
-                k && "after:content-['*'] after:text-error-default after:ml-1",
-                v && "text-neutral-medium-disabled prometeo-fonts-label-large"
+                ne,
+                se(),
+                j[c].label,
+                re(),
+                P && "after:content-['*'] after:text-error-default after:ml-1",
+                k && "text-neutral-medium-disabled prometeo-fonts-label-large"
               ),
-              children: w
+              children: C
             }
           ),
-          (n || s === "password" || p) && /* @__PURE__ */ r.jsx(
+          (a || r === "password" || f) && /* @__PURE__ */ t.jsx(
             "div",
             {
               className: e(
                 "absolute top-1/2 -translate-y-1/2 flex items-center justify-center z-10",
-                !t && x[d].icon,
-                t && "w-5 h-5 right-3",
-                h[i].icon,
-                s === "password" && !p ? "cursor-pointer" : "pointer-events-none",
+                d[i].icon,
+                j[c].icon,
+                r === "password" && !f ? "cursor-pointer" : "pointer-events-none",
                 m === "right" ? "right-3" : "left-3"
               ),
-              onClick: s === "password" && !p ? U : void 0,
-              onMouseDown: (l) => s === "password" && !p && l.preventDefault(),
-              children: /* @__PURE__ */ r.jsx("div", { children: p && s !== "password" ? /* @__PURE__ */ r.jsx("div", { children: /* @__PURE__ */ r.jsx(fe, { size: 24, color: "#7c86ff", loading: !0, variant: "clip" }) }) : s === "password" ? E ? /* @__PURE__ */ r.jsx(z.EyeVisibility, { size: 24, className: "" }) : /* @__PURE__ */ r.jsx(z.EyeVisibilityOff, { size: 24, className: "" }) : n })
+              onClick: r === "password" && !f ? q : void 0,
+              onMouseDown: (p) => r === "password" && !f && p.preventDefault(),
+              children: /* @__PURE__ */ t.jsx("div", { children: f && r !== "password" ? /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(pe, { size: 24, color: "#7c86ff", loading: !0, variant: "clip" }) }) : r === "password" ? z ? /* @__PURE__ */ t.jsx(O.EyeVisibility, { size: 24, className: "" }) : /* @__PURE__ */ t.jsx(O.EyeVisibilityOff, { size: 24, className: "" }) : a })
             }
           )
         ]
       }
     ),
-    Y && S,
-    $ && N
+    ee && L,
+    F && H
   ] });
-}, he = oe(ie);
+}, Ce = ue(xe);
 export {
-  he as default
+  Ce as default
 };