prometeo-design-system 2.0.3 → 2.2.1

package/dist/Avatar.es.js

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

package/dist/Button-DsbEyjth.js

@@ -0,0 +1,183 @@
+import { j as f } from "./jsx-runtime-DKDX3adD.js";
+import { c as g } from "./cn-B6yFEsav.js";
+import { clsx as B } from "clsx";
+import { useAnimationControls as E, motion as j } from "framer-motion";
+import { memo as P, useCallback as w, useMemo as h } from "react";
+const C = (l) => typeof l == "boolean" ? `${l}` : l === 0 ? "0" : l, V = B, _ = (l, d) => (e) => {
+  var m;
+  if (d?.variants == null) return V(l, e?.class, e?.className);
+  const { variants: v, defaultVariants: t } = d, n = Object.keys(v).map((s) => {
+    const u = e?.[s], i = t?.[s];
+    if (u === null) return null;
+    const o = C(u) || C(i);
+    return v[s][o];
+  }), r = e && Object.entries(e).reduce((s, u) => {
+    let [i, o] = u;
+    return o === void 0 || (s[i] = o), s;
+  }, {}), a = d == null || (m = d.compoundVariants) === null || m === void 0 ? void 0 : m.reduce((s, u) => {
+    let { class: i, className: o, ...p } = u;
+    return Object.entries(p).every((y) => {
+      let [b, x] = y;
+      return Array.isArray(x) ? x.includes({
+        ...t,
+        ...r
+      }[b]) : {
+        ...t,
+        ...r
+      }[b] === x;
+    }) ? [
+      ...s,
+      i,
+      o
+    ] : s;
+  }, []);
+  return V(l, n, a, e?.class, e?.className);
+}, $ = _(
+  "flex items-center justify-center cursor-pointer focus:outline-none font-semibold rounded-md transition-colors",
+  {
+    variants: {
+      variant: {
+        filled: "",
+        outline: "bg-transparent border-1",
+        text: "bg-transparent border-0"
+      },
+      color: {
+        primary: "",
+        secondary: ""
+      },
+      size: {
+        small: "h-[40px] w-[123px] w-fit px-2 py-3 text-sm",
+        medium: "h-[48px] w-[134px] w-fit px-2 py-3 text-base",
+        large: "h-[56px] w-[145px] w-fit px-4 py-3 text-base"
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: ""
+      },
+      loading: {
+        true: "cursor-wait",
+        false: ""
+      },
+      customSize: {
+        true: "px-4 py-2",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "filled",
+        color: "primary",
+        class: "bg-primary-default-default text-neutral-strong-default border-0 hover:bg-primary-default-hover hover:text-neutral-strong-hover focus:bg-primary-default-pressed focus:text-neutral-strong-focused active:bg-primary-pressed active:text-neutral-strong-pressed disabled:bg-primary-medium-disabled disabled:text-neutral-strong-disabled"
+      },
+      {
+        variant: "filled",
+        color: "secondary",
+        class: "bg-neutral-strong-medium-default text-neutral-strong-default hover:bg-neutral-medium-hover hover:text-neutral-strong-hover focus:bg-neutral-medium-pressed focus:text-neutral-strong-pressed active:bg-neutral-medium-pressed disabled:bg-primary-default-disabled disabled:text-neutral-strong-disabled"
+      },
+      {
+        variant: "outline",
+        color: "primary",
+        class: "text-primary-medium-default border-primary-medium-default hover:bg-neutral-default-hover hover:text-primary-medium-hover hover:border-primary-medium-hover focus:bg-neutral-default-pressed focus:text-primary-medium-pressed focus:border-primary-medium-pressed active:bg-neutral-default-pressed active:text-primary-medium-pressed active:border-primary-medium-pressed disabled:border-primary-disabled disabled:text-primary-disabled"
+      },
+      {
+        variant: "outline",
+        color: "secondary",
+        class: "text-neutral-strong-default border-neutral-strong-default hover:bg-neutral-default-hover hover:text-neutral-strong-hover hover:border-neutral-strong-hover focus:bg-neutral-default-pressed focus:text-neutral-strong-pressed focus:border-neutral-strong-pressed active:bg-neutral-default-pressed active:text-neutral-strong-pressed active:border-neutral-strong-pressed disabled:border-neutral-disabled disabled:text-neutral-disabled"
+      },
+      {
+        variant: "text",
+        color: "primary",
+        class: "text-primary-medium-default hover:bg-neutral-default-hover hover:text-primary-medium-hover focus:bg-neutral-default-pressed focus:text-primary-medium-pressed active:bg-neutral-default-pressed active:text-primary-medium-pressed disabled:text-primary-medium-disabled"
+      },
+      {
+        variant: "text",
+        color: "secondary",
+        class: "text-neutral-strong-default hover:bg-neutral-default-hover hover:text-primary-default-hover focus:bg-neutral-default-pressed focus:text-primary-medium-pressed active:bg-neutral-default-pressed active:text-primary-medium-pressed disabled:text-primary-medium-disabled"
+      }
+    ],
+    defaultVariants: {
+      variant: "filled",
+      color: "primary",
+      size: "medium",
+      disabled: !1,
+      loading: !1,
+      customSize: !1
+    }
+  }
+);
+function z({
+  label: l = "Selene",
+  onClick: d,
+  icon: e,
+  contentClassName: m,
+  loadingText: v = "Cargando...",
+  animate: t = !0,
+  animateIcon: n = !0,
+  isLoading: r = !1,
+  disabled: a = !1,
+  type: s = "button",
+  variant: u = "filled",
+  color: i = "primary",
+  size: o = "medium",
+  children: p,
+  Spinner: y,
+  className: b,
+  form: x,
+  ...N
+}) {
+  const c = E(), H = w(() => {
+    !t || a || r || !n || c.start({ rotate: 90 });
+  }, [t, a, r, n, c]), S = w(() => {
+    !t || a || r || !n || c.start({ rotate: 0 });
+  }, [t, a, r, n, c]), k = h(() => g(
+    $({
+      variant: u,
+      color: i,
+      size: o,
+      disabled: a || r,
+      loading: r
+    }),
+    b
+  ), [u, i, o, a, r, b]), O = h(() => ({
+    whileHover: t && !a && !r ? { scale: 1.05 } : {},
+    whileTap: t && !a && !r ? { scale: 0.98 } : {},
+    transition: { type: "spring", stiffness: 400, damping: 17 }
+  }), [t, a, r]), A = h(() => r ? /* @__PURE__ */ f.jsxs("div", { className: "flex items-center gap-2", children: [
+    y,
+    o !== "small" && /* @__PURE__ */ f.jsx("span", { children: v })
+  ] }) : p || /* @__PURE__ */ f.jsxs("span", { className: g("flex items-center gap-2", m), children: [
+    e && /* @__PURE__ */ f.jsx(
+      j.div,
+      {
+        animate: n ? c : void 0,
+        transition: {
+          type: "spring",
+          stiffness: 400,
+          damping: 17
+        },
+        children: e
+      }
+    ),
+    l && /* @__PURE__ */ f.jsx("span", { children: l })
+  ] }), [r, p, e, l, y, o, v, n, c, m]);
+  return /* @__PURE__ */ f.jsx(
+    j.button,
+    {
+      form: x,
+      onClick: d,
+      className: k,
+      ...O,
+      onHoverStart: H,
+      onHoverEnd: S,
+      disabled: a || r,
+      type: s,
+      ...N,
+      children: A
+    }
+  );
+}
+const W = P(z);
+export {
+  W as B,
+  _ as c
+};

package/dist/Button.es.js

@@ -1,153 +1,4 @@
-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: {
-      variant: {
-        filled: "",
-        outline: "bg-transparent border-1",
-        text: "bg-transparent border-0"
-      },
-      color: {
-        primary: "",
-        secondary: ""
-      },
-      size: {
-        small: "h-[40px] w-[123px] w-fit px-2 py-3 text-sm",
-        medium: "h-[48px] w-[134px] w-fit px-2 py-3 text-base",
-        large: "h-[56px] w-[145px] w-fit px-4 py-3 text-base"
-      },
-      disabled: {
-        true: "opacity-50 cursor-not-allowed",
-        false: ""
-      },
-      loading: {
-        true: "cursor-wait",
-        false: ""
-      },
-      customSize: {
-        true: "px-4 py-2",
-        false: ""
-      }
-    },
-    compoundVariants: [
-      {
-        variant: "filled",
-        color: "primary",
-        class: "bg-primary-default-default text-neutral-strong-default border-0 hover:bg-primary-default-hover hover:text-neutral-strong-hover focus:bg-primary-default-pressed focus:text-neutral-strong-focused active:bg-primary-pressed active:text-neutral-strong-pressed disabled:bg-primary-medium-disabled disabled:text-neutral-strong-disabled"
-      },
-      {
-        variant: "filled",
-        color: "secondary",
-        class: "bg-neutral-strong-medium-default text-neutral-strong-default hover:bg-neutral-medium-hover hover:text-neutral-strong-hover focus:bg-neutral-medium-pressed focus:text-neutral-strong-pressed active:bg-neutral-medium-pressed disabled:bg-primary-default-disabled disabled:text-neutral-strong-disabled"
-      },
-      {
-        variant: "outline",
-        color: "primary",
-        class: "text-primary-medium-default border-primary-medium-default hover:bg-neutral-default-hover hover:text-primary-medium-hover hover:border-primary-medium-hover focus:bg-neutral-default-pressed focus:text-primary-medium-pressed focus:border-primary-medium-pressed active:bg-neutral-default-pressed active:text-primary-medium-pressed active:border-primary-medium-pressed disabled:border-primary-disabled disabled:text-primary-disabled"
-      },
-      {
-        variant: "outline",
-        color: "secondary",
-        class: "text-neutral-strong-default border-neutral-strong-default hover:bg-neutral-default-hover hover:text-neutral-strong-hover hover:border-neutral-strong-hover focus:bg-neutral-default-pressed focus:text-neutral-strong-pressed focus:border-neutral-strong-pressed active:bg-neutral-default-pressed active:text-neutral-strong-pressed active:border-neutral-strong-pressed disabled:border-neutral-disabled disabled:text-neutral-disabled"
-      },
-      {
-        variant: "text",
-        color: "primary",
-        class: "text-primary-medium-default hover:bg-neutral-default-hover hover:text-primary-medium-hover focus:bg-neutral-default-pressed focus:text-primary-medium-pressed active:bg-neutral-default-pressed active:text-primary-medium-pressed disabled:text-primary-medium-disabled"
-      },
-      {
-        variant: "text",
-        color: "secondary",
-        class: "text-neutral-strong-default hover:bg-neutral-default-hover hover:text-primary-default-hover focus:bg-neutral-default-pressed focus:text-primary-medium-pressed active:bg-neutral-default-pressed active:text-primary-medium-pressed disabled:text-primary-medium-disabled"
-      }
-    ],
-    defaultVariants: {
-      variant: "filled",
-      color: "primary",
-      size: "medium",
-      disabled: !1,
-      loading: !1,
-      customSize: !1
-    }
-  }
-);
-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: w = "button",
-  variant: f = "filled",
-  color: c = "primary",
-  size: d = "medium",
-  children: n,
-  Spinner: b,
-  className: v,
-  form: j,
-  ...C
-}) {
-  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
-    }),
-    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: j,
-      onClick: h,
-      className: E,
-      ...V,
-      onHoverStart: H,
-      onHoverEnd: S,
-      disabled: r || e,
-      type: w,
-      ...C,
-      children: B
-    }
-  );
-}
-const F = z(M);
+import { B as f } from "./Button-DsbEyjth.js";
 export {
-  F as default
+  f as default
 };

package/dist/{CardProfile-BiYr6kY9.js → CardProfile-BhFog7j5.js}

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-ByW6EXIE.js";
+import { j as e } from "./jsx-runtime-DKDX3adD.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-BiYr6kY9.js";
+import { C as a } from "./CardProfile-BhFog7j5.js";
 export {
   a as CardProfile
 };

package/dist/CheckBox.es.js

@@ -1,4 +1,4 @@
-import { j as t } from "./jsx-runtime-ByW6EXIE.js";
+import { j as t } from "./jsx-runtime-DKDX3adD.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-ByW6EXIE.js";
+import { j as e } from "./jsx-runtime-DKDX3adD.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/DatePicker.es.js

@@ -1,11 +1,11 @@
-import { j as $ } from "./jsx-runtime-ByW6EXIE.js";
+import { j as $ } from "./jsx-runtime-DKDX3adD.js";
 import m, { createContext as mn, useContext as hn, useCallback as q, useRef as Se, useLayoutEffect as yn, useState as he, useEffect as _e, useMemo as fe, memo as pn } from "react";
 import { InputMultiple as gn } from "./InputMultiple.es.js";
 import wn from "./Input.es.js";
 import { createPortal as bn } from "react-dom";
 import { Icons as Mt } from "./Icons.es.js";
 import { c as Be } from "./cn-B6yFEsav.js";
-import vt from "./Button.es.js";
+import { B as vt } from "./Button-DsbEyjth.js";
 function Mn(e, t, n = "long") {
   return new Intl.DateTimeFormat("en-US", {
     // Enforces engine to render the time. Without the option JavaScriptCore omits it.

package/dist/DialogModal.es.js

@@ -1,4 +1,4 @@
-import { j as t } from "./jsx-runtime-ByW6EXIE.js";
+import { j as t } from "./jsx-runtime-DKDX3adD.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,67 +1,142 @@
-import { j as e } from "./jsx-runtime-ByW6EXIE.js";
-import { c as d } from "./index-BOQuZ0gG.js";
-import { forwardRef as j, useState as D, useRef as x, useCallback as s, useImperativeHandle as b } from "react";
-import { Drawer as o } from "vaul";
-import { Icons as v } from "./Icons.es.js";
-import { c as m } from "./cn-B6yFEsav.js";
-const C = d("text-sm cursor-pointer font-medium shadow-sm transition-all absolute z-30", {
-  variants: {
-    direction: {
-      left: "right-4 top-4",
-      right: "left-4 top-4"
-    }
-  }
-}), O = d("right-0 top-0 bottom-0 fixed z-50 outline-none w-full md:w-[450px] lg:w-[550px] xl:w-[600px] h-full flex flex-col", {
-  variants: {
-    direction: {
-      left: "left-0",
-      right: "right-0"
-    }
-  }
-}), N = j(({ children: t, direction: r, modal: a = !1, className: c, onClose: i, defaultOpen: w = !1 }, h) => {
-  const [l, n] = D(w), f = x(i);
-  f.current = i;
-  const u = s(() => {
+import { j as s } from "./jsx-runtime-DKDX3adD.js";
+import { c as b } from "./cn-B6yFEsav.js";
+import { c as y, B as h } from "./Button-DsbEyjth.js";
+import { createPortal as g } from "react-dom";
+import { Icons as C } from "./Icons.es.js";
+import { forwardRef as k, useState as j, useRef as x, useEffect as v, useCallback as l, useImperativeHandle as D } from "react";
+const O = k((e, a) => {
+  const [t, n] = j(e.defaultOpen || !1), o = x(e.onClose), {
+    modal: c = !1,
+    children: d,
+    className: u,
+    direction: f = "left",
+    attachToParent: i = !1,
+    closeOnOverlayClick: p = !1
+  } = e;
+  v(() => {
+    o.current = e.onClose;
+  }, [e.onClose]);
+  const r = l(() => {
     n(!0);
-  }, []), p = s(() => {
-    n(!1);
-  }, []), g = s(() => {
-    n(!1), f.current?.();
+  }, []), m = l(() => {
+    n(!1), o.current?.();
   }, []);
-  return b(h, () => ({
-    open: u,
-    close: p,
-    isOpen: l
-  }), [u, p, l]), /* @__PURE__ */ e.jsx(o.Root, { direction: r, open: l, onOpenChange: g, modal: a, children: /* @__PURE__ */ e.jsxs(o.Portal, { children: [
-    /* @__PURE__ */ e.jsx(o.Overlay, { className: "fixed inset-0 bg-black/60 z-50" }),
-    /* @__PURE__ */ e.jsxs(
-      o.Content,
+  D(a, () => ({
+    open: r,
+    close: m,
+    isOpen: t
+  }), [t, r, m]);
+  const w = /* @__PURE__ */ s.jsx(
+    z,
+    {
+      isOpen: t,
+      close: m,
+      direction: f,
+      modal: c,
+      className: u,
+      attachToParent: i,
+      closeOnOverlayClick: p,
+      children: d
+    }
+  );
+  return i ? w : g(w, document.body);
+});
+O.displayName = "DrawerDesktopV2";
+const z = ({ children: e, direction: a = "left", isOpen: t, close: n, modal: o = !1, className: c, attachToParent: d = !1, closeOnOverlayClick: u = !1 }) => {
+  v(() => {
+    if (t && o) {
+      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);
+      };
+    }
+  }, [t, o]);
+  const f = y("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"
+      }
+    }
+  }), i = y("fixed inset-0 bg-black/60 z-[55] cursor-default", {
+    variants: {
+      isOpen: {
+        true: "drawer-overlay-visible",
+        false: "drawer-overlay-hidden"
+      }
+    }
+  }), p = y("", {
+    variants: {
+      direction: {
+        left: "right-0",
+        right: "left-0"
+      }
+    }
+  });
+  return /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+    o && /* @__PURE__ */ s.jsx(
+      "div",
       {
-        className: m(O({ direction: r }), c),
-        style: { "--initial-transform": "calc(100% + 8px)" },
+        className: b(i({ isOpen: t })),
+        onClick: (r) => {
+          r.preventDefault(), r.stopPropagation(), u && n();
+        },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ s.jsxs(
+      "div",
+      {
+        className: b(
+          "bg-neutral-strong-default p-4 pt-10 h-full top-0 z-[60] w-max overflow-y-auto",
+          d ? "absolute" : "fixed",
+          f({ isOpen: t, direction: a }),
+          c
+        ),
+        role: "dialog",
+        "aria-modal": o,
         children: [
-          /* @__PURE__ */ e.jsx(o.Close, { className: m(C({ direction: r })), children: /* @__PURE__ */ e.jsx(v.Close, { size: 24, className: "text-neutral-default-default" }) }),
-          /* @__PURE__ */ e.jsx("div", { className: "bg-neutral-default-default w-full flex-1 overflow-y-auto min-h-0 border-l border-neutral-strong-default", children: t })
+          /* @__PURE__ */ s.jsx(
+            h,
+            {
+              icon: /* @__PURE__ */ s.jsx(C.Close, { size: 24 }),
+              animate: !1,
+              type: "button",
+              size: "small",
+              variant: "text",
+              onClick: n,
+              label: "",
+              color: "secondary",
+              className: b(
+                "absolute top-0 z-50",
+                p({ direction: a })
+              ),
+              "aria-label": "Close drawer"
+            }
+          ),
+          e
         ]
       }
     )
-  ] }) });
-});
-N.displayName = "DrawerDesktop";
-const E = () => {
-  const t = x(null), r = s(() => {
-    t.current?.open();
-  }, []), a = s(() => {
-    t.current?.close();
+  ] });
+}, E = () => {
+  const e = x(null), a = l(() => {
+    e.current?.open();
+  }, []), t = l(() => {
+    e.current?.close();
   }, []);
   return {
-    isOpen: s(() => t.current?.isOpen ?? !1, []),
-    open: r,
-    close: a,
-    drawerRef: t
+    isOpen: l(() => e.current?.isOpen ?? !1, []),
+    open: a,
+    close: t,
+    drawerRef: e
   };
 };
 export {
-  N as default,
+  O as default,
   E as useDrawerDesktop
 };