prometeo-design-system 7.2.9 → 7.3.1

package/dist/AttachInput.es.js

@@ -1,9 +1,9 @@
 import { j as r } from "./jsx-runtime-GkKLlHH4.js";
 import { c as s } from "./cn-B6yFEsav.js";
-import { memo as T, forwardRef as H, useCallback as P } from "react";
-import { useDropzone as E } from "react-dropzone";
-import G from "./PlainTooltip.es.js";
-import { H as _ } from "./HelperComponent-DaFtt5zg.js";
+import { memo as T, forwardRef as P, useCallback as E } from "react";
+import { useDropzone as G } from "react-dropzone";
+import H from "./PlainTooltip.es.js";
+import _ from "./HelperComponent.es.js";
 import { c as i } from "./index-BOQuZ0gG.js";
 import { UploadCloud as q } from "./Icons/UploadCloud.es.js";
 import { Info as K } from "./Icons/Info.es.js";
@@ -76,7 +76,7 @@ const O = i(
     return `Máximo ${e} ${e === 1 ? "archivo" : "archivos"} permitido${e === 1 ? "" : "s"}`;
   const o = t.length;
   return o === 1 ? "El archivo no pudo cargarse" : `${o} archivos no pudieron cargarse`;
-}, Z = (t, e) => e ? "reject" : t ? "active" : "idle", N = H(
+}, Z = (t, e) => e ? "reject" : t ? "active" : "idle", N = P(
   ({
     onFilesAccepted: t,
     onFilesRejected: e,
@@ -93,7 +93,7 @@ const O = i(
     maxSize: p,
     ...M
   }, C) => {
-    const D = P(
+    const D = E(
       (g, j) => {
         g.length > 0 && t?.(g), j.length > 0 && e?.(j);
       },
@@ -104,7 +104,7 @@ const O = i(
       isDragActive: k,
       isDragReject: A,
       fileRejections: b
-    } = E({
+    } = G({
       onDrop: D,
       accept: m,
       maxFiles: h,
@@ -183,7 +183,7 @@ const O = i(
                   X(p)
                 ] })
               ] }),
-              /* @__PURE__ */ r.jsx(G, { title: B, children: /* @__PURE__ */ r.jsx(
+              /* @__PURE__ */ r.jsx(H, { title: B, children: /* @__PURE__ */ r.jsx(
                 K,
                 {
                   size: 12,

package/dist/Autocomplete.d.ts

@@ -0,0 +1,4 @@
+export {}
+import PrometeoDesignSystem from './exports/Autocomplete'
+export default PrometeoDesignSystem
+export {}

package/dist/Autocomplete.es.js

@@ -0,0 +1,83 @@
+import { j as b } from "./jsx-runtime-GkKLlHH4.js";
+import { useRef as x, useMemo as f } from "react";
+import V from "./Select.es.js";
+import { u as y } from "./useAutocomplete-5HfWBKc-.js";
+import { g as l } from "./utils-X4-h3cum.js";
+const _ = (e) => {
+  const a = x(void 0), { asyncMode: u = "fetch_in_open" } = e, { inputValue: r, setInputValue: i, filteredOptions: c, isLoading: s, value: n, onOptionClick: g } = y({
+    fetcher: e.fetcher,
+    asyncMode: u,
+    debounceDelay: e.debounceDelay,
+    disabled: e.disabled,
+    multiple: e.multiple,
+    optionValue: e.optionValue,
+    optionLabel: e.optionLabel,
+    onFetchingStart: () => {
+      u === "fetch_on_type" && a.current?.open();
+    },
+    onTypeStart: () => {
+      !e?.fetcher && a.current?.open();
+    }
+  }), d = e.multiple ? f(() => n.map((o) => l(o, e.optionValue)), [n, e.optionValue]) : f(() => l(n, e.optionValue), [n, e.optionValue]), h = (o) => {
+    const t = c.find((m) => l(m, e.optionValue) === o.id);
+    t && g(t);
+  }, S = (o) => {
+    o && h(o);
+  }, C = (o) => {
+    for (const t of o)
+      n.some(
+        (O) => l(O, e.optionValue) === t.id
+      ) || h(t);
+  }, p = () => {
+    i("");
+  };
+  return e.multiple ? /* @__PURE__ */ b.jsx(
+    V,
+    {
+      multiple: !0,
+      label: e.label || "",
+      value: d,
+      options: c,
+      optionValue: e.optionValue,
+      optionLabel: e.optionLabel,
+      renderOption: e.renderOption,
+      onChange: C,
+      displayMode: "chips",
+      controls: a,
+      emptyMessage: "Use el buscador para obtener las opciones disponibles",
+      dropdownOptions: {
+        controledSearchValue: r,
+        onSearchValueChange: i,
+        onSearchClear: p,
+        dropdownHeight: "600px",
+        inputSearchPlaceholder: "Buscar pokemons"
+      },
+      isLoading: s
+    }
+  ) : /* @__PURE__ */ b.jsx(
+    V,
+    {
+      label: e.label || "",
+      value: d,
+      options: c,
+      optionValue: e.optionValue,
+      optionLabel: e.optionLabel,
+      renderOption: e.renderOption,
+      onChange: S,
+      displayMode: "compact",
+      controls: a,
+      emptyMessage: "Use el buscador para obtener las opciones disponibles",
+      dropdownOptions: {
+        controledSearchValue: r,
+        onSearchValueChange: i,
+        onSearchClear: p,
+        dropdownHeight: "600px",
+        inputSearchPlaceholder: "Buscar pokemons"
+      },
+      isLoading: s
+    }
+  );
+};
+export {
+  _ as default
+};

package/dist/Badge.d.ts

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

package/dist/Badge.es.js

@@ -0,0 +1,48 @@
+import { j as t } from "./jsx-runtime-GkKLlHH4.js";
+import { c as l } from "./index-BOQuZ0gG.js";
+import { c as m } from "./cn-B6yFEsav.js";
+const u = "brand", o = 99, d = l("radius-full flex items-center justify-center font-medium select-none", {
+  variants: {
+    size: {
+      small: "size-2",
+      medium: "size-[20px] p-1"
+    },
+    color: {
+      neutral: "bg-neutral-tertiary-default text-neutral-default-default icon-neutral-default-default",
+      brand: "bg-brand-primary-default text-neutral-default-default icon-brand-primary-default",
+      warning: "bg-warning-primary-default text-semantic-warning-primary-default icon-semantic-warning-primary-default",
+      success: "bg-success-primary-default text-semantic-success-primary-default icon-semantic-success-primary-default",
+      error: "bg-error-primary-default text-semantic-error-primary-default icon-semantic-error-primary-default"
+    },
+    isTextVariant: {
+      true: " min-w-max px-1 py-0.5",
+      false: ""
+    }
+  },
+  compoundVariants: []
+}), N = (e) => {
+  const a = e.color ?? u;
+  if (x(e))
+    return /* @__PURE__ */ t.jsx(i, { size: "small", color: a, isTextVariant: !1, className: e.className });
+  if (y(e)) {
+    const n = e.icon;
+    return /* @__PURE__ */ t.jsx(i, { size: "medium", color: a, isTextVariant: !1, className: e.className, children: n && /* @__PURE__ */ t.jsx(n, { size: 14 }) });
+  }
+  const s = f(e), r = !c(e);
+  return /* @__PURE__ */ t.jsx(i, { size: "medium", color: a, isTextVariant: r, className: e.className, children: /* @__PURE__ */ t.jsx("span", { className: "pyrion-fonts-label-small text-center", children: s }) });
+}, f = (e) => {
+  if (c(e)) {
+    const a = e.maxCount ?? o;
+    return e.count > a ? `+${a}` : e.count;
+  }
+  return e.text;
+}, x = (e) => e.size === "small", y = (e) => e.variant === "icon", c = (e) => typeof e.count == "number", i = ({
+  size: e,
+  color: a,
+  isTextVariant: s,
+  children: r,
+  className: n
+}) => /* @__PURE__ */ t.jsx("div", { className: m(d({ size: e, color: a, isTextVariant: s }), n), children: r });
+export {
+  N as Badge
+};

package/dist/Button.es.js

@@ -1,12 +1,12 @@
 import { j as a } from "./jsx-runtime-GkKLlHH4.js";
-import { memo as G, useMemo as H, createElement as J, isValidElement as K } from "react";
+import { memo as J, forwardRef as K, useMemo as O, createElement as P, isValidElement as Q } from "react";
 import { c as V } from "./cn-B6yFEsav.js";
 import { c as g } from "./index-BOQuZ0gG.js";
-import O from "./Spinner.es.js";
-const P = (r) => K(r), B = {
+import U from "./Spinner.es.js";
+const W = (r) => Q(r), B = {
   primary: "brand",
   secondary: "neutral"
-}, Q = (r) => r in B, U = (r) => Q(r) ? B[r] : r, o = {
+}, X = (r) => r in B, Y = (r) => X(r) ? B[r] : r, o = {
   small: {
     container: "h-8 px-3 py-1.5 spacing-x-2 radius-small",
     icon: ""
@@ -156,7 +156,7 @@ const P = (r) => K(r), B = {
   false: {
     icon: ""
   }
-}, W = g(f.icon, {
+}, Z = g(f.icon, {
   variants: {
     size: {
       small: `${n.small.icon} ${o.small.icon}`,
@@ -207,7 +207,7 @@ const P = (r) => K(r), B = {
     color: "brand",
     animateIcon: !0
   }
-}), X = g(f.container, {
+}), _ = g(f.container, {
   variants: {
     size: {
       small: `${n.small.container} ${o.small.container}`,
@@ -304,36 +304,36 @@ const P = (r) => K(r), B = {
     variant: "fill",
     color: "brand"
   }
-}), Y = ({
+}), I = K(({
   label: r,
-  onClick: I,
+  onClick: z,
   icon: h,
-  contentClassName: Z,
+  contentClassName: T,
   loadingText: x = "Cargando...",
-  animate: z = !1,
-  animateIcon: N = !1,
+  animate: N = !1,
+  animateIcon: S = !1,
   isLoading: d = !1,
   children: s,
   hideSpinner: y = !1,
   spinner: b,
-  type: S = "button",
-  className: E,
-  disabled: M,
+  type: E = "button",
+  className: M,
+  disabled: F,
   variant: l = "fill",
-  form: F,
+  form: R,
   size: t = "medium",
   color: A = "brand",
   ...D
-}) => {
-  const c = !!(M || d), w = N && !c, L = z && !c, i = c ? "disabled" : U(A), v = typeof s == "string" ? s : r, p = typeof s != "string" ? s : void 0, R = H(() => {
+}, L) => {
+  const c = !!(F || d), w = S && !c, k = N && !c, i = c ? "disabled" : Y(A), v = typeof s == "string" ? s : r, p = typeof s != "string" ? s : void 0, q = O(() => {
     if (d) {
-      const q = {
+      const H = {
         small: "small",
         medium: "medium",
         large: "medium"
       };
       return /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
-        !y && b ? b : /* @__PURE__ */ a.jsx(O, { size: q[t], variant: "clip", color: "brand" }),
+        !y && b ? b : /* @__PURE__ */ a.jsx(U, { size: H[t], variant: "clip", color: "brand" }),
         /* @__PURE__ */ a.jsx(
           "span",
           {
@@ -354,18 +354,18 @@ const P = (r) => K(r), B = {
       return p;
     const u = h;
     let m = null;
-    const k = {
+    const G = {
       small: 20,
       medium: 24,
       large: 24
     };
-    return u && (m = P(u) ? u : J(u, {
-      size: k[t]
+    return u && (m = W(u) ? u : P(u, {
+      size: G[t]
     })), /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
       m && /* @__PURE__ */ a.jsx(
         "span",
         {
-          className: W({
+          className: Z({
             size: t,
             variant: l,
             color: i,
@@ -402,25 +402,28 @@ const P = (r) => K(r), B = {
   return /* @__PURE__ */ a.jsx(
     "button",
     {
-      type: S,
+      ref: L,
+      type: E,
       className: V(
         "group",
-        X({
+        _({
           size: t,
           variant: l,
           color: i,
-          animation: L
+          animation: k
         }),
-        E
+        M
       ),
       disabled: c,
-      form: F,
-      onClick: I,
+      form: R,
+      onClick: z,
       ...D,
-      children: R
+      children: q
     }
   );
-}, ne = G(Y);
+});
+I.displayName = "Button";
+const oe = J(I);
 export {
-  ne as default
+  oe as default
 };

package/dist/Card.es.js

@@ -1,8 +1,8 @@
 import { j as o } from "./jsx-runtime-GkKLlHH4.js";
-import { createContext as p, useContext as j, memo as d, forwardRef as w, useMemo as z } from "react";
-import { c as s } from "./cn-B6yFEsav.js";
+import { createContext as p, useContext as j, memo as s, forwardRef as w, useMemo as z } from "react";
+import { c as d } from "./cn-B6yFEsav.js";
 import { c as i } from "./index-BOQuZ0gG.js";
-import { C as F } from "./CardBackground-D5SgTU1i.js";
+import F from "./CardBackground.es.js";
 const l = p(null);
 function C() {
   const a = j(l);
@@ -55,14 +55,14 @@ const H = i(
     "div",
     {
       ref: h,
-      className: s(H({ direction: t }), x),
+      className: d(H({ direction: t }), x),
       ...v,
       children: [
         /* @__PURE__ */ o.jsx(
           F,
           {
             ...e,
-            className: s(
+            className: d(
               "inset-0 absolute z-0",
               e?.className
             )
@@ -72,31 +72,31 @@ const H = i(
       ]
     }
   ) });
-}), m = d(function({
+}), m = s(function({
   children: r,
   className: t,
   ...e
 }) {
   const { direction: n } = C();
-  return /* @__PURE__ */ o.jsx("div", { className: s(V({ direction: n }), t), ...e, children: r });
-}), u = d(function({
+  return /* @__PURE__ */ o.jsx("div", { className: d(V({ direction: n }), t), ...e, children: r });
+}), u = s(function({
   children: r,
   className: t,
   ...e
 }) {
-  return /* @__PURE__ */ o.jsx("div", { className: s(k(), t), ...e, children: r });
-}), f = d(function({
+  return /* @__PURE__ */ o.jsx("div", { className: d(k(), t), ...e, children: r });
+}), f = s(function({
   children: r,
   className: t,
   ...e
 }) {
   const { direction: n } = C();
-  return /* @__PURE__ */ o.jsx("div", { className: s(b({ direction: n }), t), ...e, children: r });
+  return /* @__PURE__ */ o.jsx("div", { className: d(b({ direction: n }), t), ...e, children: r });
 });
 function E(a, r) {
   return a.variant === r.variant && a.direction === r.direction && a.className === r.className && a.children === r.children && a.cardBackground === r.cardBackground;
 }
-const c = d(y, E);
+const c = s(y, E);
 c.Header = m;
 c.Content = u;
 c.Footer = f;

package/dist/CardBackground.d.ts

@@ -0,0 +1,6 @@
+export * from './exports/CardBackground'
+export {}
+import PrometeoDesignSystem from './exports/CardBackground'
+export default PrometeoDesignSystem
+export * from './exports/CardBackground'
+export {}

package/dist/{CardBackground-D5SgTU1i.js → CardBackground.es.js}

@@ -256,7 +256,8 @@ const _ = (r) => {
 }, x = I(_);
 x.displayName = "CardBackground";
 export {
-  x as C,
-  P as I,
-  W as i
+  P as INTERACTION_EXCLUDE_ATTR,
+  N as INTERACTION_GROUP_ATTR,
+  x as default,
+  W as interactionGroupProps
 };

package/dist/Chat.d.ts

@@ -0,0 +1,6 @@
+export * from './exports/Chat'
+export {}
+import PrometeoDesignSystem from './exports/Chat'
+export default PrometeoDesignSystem
+export * from './exports/Chat'
+export {}

package/dist/Chat.es.js

@@ -0,0 +1,20 @@
+import { j as a } from "./jsx-runtime-GkKLlHH4.js";
+import { memo as r, forwardRef as f } from "react";
+import { c as e } from "./cn-B6yFEsav.js";
+import i from "./CardBackground.es.js";
+const c = f(function({ cardBackground: s, children: t, className: o, ...l }, m) {
+  return /* @__PURE__ */ a.jsxs("div", { className: e("relative w-full", o), ref: m, ...l, children: [
+    s && /* @__PURE__ */ a.jsx(
+      i,
+      {
+        ...s,
+        className: e("absolute inset-0 z-0", s.className)
+      }
+    ),
+    /* @__PURE__ */ a.jsx("div", { className: "relative z-10 flex flex-col w-full overflow-y-auto", children: t })
+  ] });
+}), n = r(c);
+n.displayName = "Chat";
+export {
+  n as default
+};

package/dist/ChatCard.d.ts

@@ -0,0 +1,6 @@
+export * from './exports/ChatCard'
+export {}
+import PrometeoDesignSystem from './exports/ChatCard'
+export default PrometeoDesignSystem
+export * from './exports/ChatCard'
+export {}

package/dist/ChatCard.es.js

@@ -0,0 +1,167 @@
+import { j as r } from "./jsx-runtime-GkKLlHH4.js";
+import { useContext as p, createContext as C, memo as d, forwardRef as v, useMemo as g } from "react";
+import { c as l } from "./cn-B6yFEsav.js";
+import { c as m } from "./index-BOQuZ0gG.js";
+import j from "./Avatar.es.js";
+import y from "./CardBackground.es.js";
+import N from "./Link.es.js";
+const f = C(null);
+function w() {
+  const t = p(f);
+  if (!t)
+    throw new Error("ChatCard must be used inside <ChatCard.Participant>");
+  return t;
+}
+function b(t) {
+  if (!t) return;
+  if (typeof t == "string") return t;
+  const a = String(t.getDate()).padStart(2, "0"), e = String(t.getMonth() + 1).padStart(2, "0"), n = t.getFullYear(), s = String(t.getHours()).padStart(2, "0"), i = String(t.getMinutes()).padStart(2, "0");
+  return `${a}/${e}/${n}, ${s}:${i}`;
+}
+const S = m("relative flex flex-col gap-1 justify-start", {
+  variants: {
+    direction: {
+      left: "items-start",
+      right: "items-end"
+    },
+    withAvatar: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    { direction: "left", withAvatar: !0, class: "pl-12" },
+    { direction: "right", withAvatar: !0, class: "pr-12" }
+  ]
+}), P = m("flex gap-1", {
+  variants: {
+    direction: {
+      left: "flex-row",
+      right: "flex-row-reverse"
+    }
+  }
+}), z = m("relative overflow-hidden flex flex-col rounded-[var(--radius-large)]", {
+  variants: {
+    direction: {
+      left: "[&:last-child]:rounded-bl-none",
+      right: "[&:last-child]:rounded-br-none"
+    }
+  }
+}), V = m("flex flex-col gap-1 relative z-10 px-3 pt-3"), h = d(function({
+  children: a,
+  className: e,
+  ...n
+}) {
+  return /* @__PURE__ */ r.jsx("div", { className: l("flex flex-col gap-2", e), ...n, children: a });
+}), x = d(function({
+  children: a,
+  className: e,
+  ...n
+}) {
+  return /* @__PURE__ */ r.jsx(
+    "p",
+    {
+      className: l(
+        "pyrion-fonts-body-medium text-neutral-primary-default",
+        e
+      ),
+      ...n,
+      children: a
+    }
+  );
+}), u = d(function({
+  date: a,
+  leftSlot: e,
+  actions: n,
+  className: s,
+  ...i
+}) {
+  const o = b(a);
+  return /* @__PURE__ */ r.jsxs(
+    "div",
+    {
+      className: l(
+        "flex items-center pl-3 pr-1 pb-1 relative z-10 min-h-[28px]",
+        s
+      ),
+      ...i,
+      children: [
+        /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-1 flex-1 pyrion-fonts-body-small text-neutral-tertiary-default", children: [
+          e,
+          o && /* @__PURE__ */ r.jsx("span", { children: o })
+        ] }),
+        n && /* @__PURE__ */ r.jsx("div", { className: "shrink-0", children: n })
+      ]
+    }
+  );
+}), A = v(function({ cardBackground: a, children: e, className: n, ...s }, i) {
+  const { direction: o } = w();
+  return /* @__PURE__ */ r.jsxs(
+    "div",
+    {
+      className: l(z({ direction: o }), n),
+      ref: i,
+      ...s,
+      children: [
+        /* @__PURE__ */ r.jsx(
+          y,
+          {
+            color: "neutral",
+            variant: "secondary",
+            ...a,
+            className: l("absolute inset-0 z-0", a?.className)
+          }
+        ),
+        /* @__PURE__ */ r.jsx("div", { className: V(), children: e })
+      ]
+    }
+  );
+}), c = d(A);
+function F({
+  direction: t,
+  avatar: a,
+  link: e,
+  children: n,
+  className: s
+}) {
+  const i = g(
+    () => ({ direction: t, avatar: a, link: e }),
+    [t, a, e]
+  ), o = e.href ? { href: e.href } : { onClick: e.onClick };
+  return /* @__PURE__ */ r.jsx(f.Provider, { value: i, children: /* @__PURE__ */ r.jsxs(
+    "div",
+    {
+      className: l(
+        S({ direction: t, withAvatar: !0 }),
+        s
+      ),
+      children: [
+        /* @__PURE__ */ r.jsxs("div", { className: P({ direction: t }), children: [
+          /* @__PURE__ */ r.jsx("div", { className: "flex items-end shrink-0 self-end", children: /* @__PURE__ */ r.jsx(j, { ...a, size: a.size ?? "small" }) }),
+          /* @__PURE__ */ r.jsx("div", { className: "flex flex-col gap-2 flex-1 min-w-0", children: n })
+        ] }),
+        /* @__PURE__ */ r.jsx(
+          N,
+          {
+            color: "brand",
+            size: "medium",
+            withBackground: !1,
+            ...o,
+            children: e.label
+          }
+        )
+      ]
+    }
+  ) });
+}
+c.Content = h;
+c.Text = x;
+c.Footer = u;
+c.Participant = F;
+c.displayName = "ChatCard";
+h.displayName = "ChatCard.Content";
+x.displayName = "ChatCard.Text";
+u.displayName = "ChatCard.Footer";
+export {
+  c as default
+};

package/dist/DesktopModal.d.ts

@@ -0,0 +1,6 @@
+export * from './exports/DesktopModal'
+export {}
+import PrometeoDesignSystem from './exports/DesktopModal'
+export default PrometeoDesignSystem
+export * from './exports/DesktopModal'
+export {}

package/dist/DesktopModal.es.js

@@ -0,0 +1,10 @@
+import { a as o, u as t } from "./useModalControl-BE-IfhuR.js";
+import { D as u } from "./useModalControl-BE-IfhuR.js";
+const e = o, s = t;
+export {
+  u as default,
+  e as useDesktopModalControl,
+  s as useDesktopModalState,
+  o as useModalControl,
+  t as useModalState
+};

package/dist/DialogModal.es.js

@@ -1,8 +1,7 @@
-import { u as o, a as t } from "./useModalControl-Bmu_6wf8.js";
-import { D as u } from "./useModalControl-Bmu_6wf8.js";
-const s = o, e = t;
+import { D as t } from "./useModalControl-BE-IfhuR.js";
+import { useDesktopModalControl as s, useDesktopModalState as l } from "./DesktopModal.es.js";
 export {
-  u as default,
+  t as default,
   s as useDialogControl,
-  e as useDialogState
+  l as useDialogState
 };

package/dist/Divider.d.ts

@@ -0,0 +1,6 @@
+export * from './exports/Divider'
+export {}
+import PrometeoDesignSystem from './exports/Divider'
+export default PrometeoDesignSystem
+export * from './exports/Divider'
+export {}

package/dist/{Divider-BxsuAgUn.js → Divider.es.js}

@@ -20,5 +20,5 @@ const l = n("", {
 }, m = i(d);
 m.displayName = "Divider";
 export {
-  m as D
+  m as default
 };