prometeo-design-system 8.1.2 → 8.1.4

package/dist/AttachInput.d.ts

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

package/dist/AttachInput.es.js

@@ -0,0 +1,220 @@
+import { j as t } from "./jsx-runtime-GkKLlHH4.js";
+import { c as o } from "./cn-B6yFEsav.js";
+import { memo as E, forwardRef as G, useCallback as H } from "react";
+import { useDropzone as P } from "react-dropzone";
+import _ from "./CardBackground.es.js";
+import q from "./PlainTooltip.es.js";
+import K from "./HelperComponent.es.js";
+import { c as i } from "./index-BOQuZ0gG.js";
+import { UploadCloud as O } from "./Icon-UploadCloud.es.js";
+import { Info as U } from "./Icon-Info.es.js";
+const W = i(
+  "relative w-full radius-large transition-colors duration-200 overflow-hidden flex flex-col items-center justify-center text-center gap-1 p-3 flex-1",
+  {
+    variants: {
+      disabled: {
+        true: "cursor-default",
+        false: "hover:cursor-pointer group"
+      }
+    },
+    defaultVariants: {
+      disabled: !1
+    }
+  }
+), J = {
+  disabled: "text-[var(--border-disabled-ondisabled)]",
+  "drag-active": "text-[var(--border-brand-secondary-default)]",
+  "drag-reject": "text-[var(--border-error-onneutral-default)]",
+  default: "text-[var(--border-neutral-primary-default)]",
+  error: "text-[var(--border-error-onneutral-default)]",
+  success: "text-[var(--border-success-onneutral-default)]"
+}, L = (r, e, n) => n ? "disabled" : e === "active" ? "drag-active" : e === "reject" ? "drag-reject" : r, Q = i(
+  "prometeo-fonts-body-medium text-balanced text-neutral-secondary-default",
+  {
+    variants: {
+      disabled: {
+        true: "text-disabled-default!",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: !1
+    }
+  }
+), X = i("icon-neutral-tertiary-default", {
+  variants: {
+    disabled: {
+      true: "icon-disabled-default!",
+      false: ""
+    }
+  }
+}), Y = i(
+  "prometeo-fonts-label-large flex items-center px-3 gap-0.5",
+  {
+    variants: {
+      visualStatus: {
+        default: "text-neutral-secondary-default",
+        error: "text-semantic-error-onneutral-default",
+        success: "text-semantic-success-onneutral-default"
+      },
+      disabled: {
+        true: "text-disabled-default!",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      visualStatus: "default",
+      disabled: !1
+    }
+  }
+), Z = (r) => {
+  const e = r / 1048576;
+  return e < 1 ? `${Math.round(r / 1024)} KB` : e < 1024 ? `${e % 1 === 0 ? e : e.toFixed(1)} MB` : `${(e / 1024).toFixed(1)} GB`;
+}, N = (r) => Object.keys(r).map((e) => r[e].join(", ")).join(" "), F = (r, e, n) => {
+  if (r.some(
+    (d) => d.errors.some((u) => u.code === "too-many-files")
+  ))
+    return `Máximo ${e} ${e === 1 ? "archivo" : "archivos"} permitido${e === 1 ? "" : "s"}`;
+  const s = r.length;
+  return s === 1 ? "El archivo no pudo cargarse" : `${s} archivos no pudieron cargarse`;
+}, ee = (r, e) => e ? "reject" : r ? "active" : "idle", w = G(
+  ({
+    onFilesAccepted: r,
+    onFilesRejected: e,
+    className: n,
+    label: c,
+    subtitle: s = "Arrastra y suelta los archivos aquí, o haz clic para seleccionar",
+    acceptedFormats: d,
+    status: u,
+    supportingText: f,
+    showSupportingText: z,
+    disabled: a = !1,
+    accept: m,
+    maxFiles: h = 1,
+    maxSize: v,
+    cardBackground: b,
+    ...C
+  }, M) => {
+    const D = H(
+      (j, y) => {
+        j.length > 0 && r?.(j), y.length > 0 && e?.(y);
+      },
+      [r, e]
+    ), {
+      getRootProps: V,
+      getInputProps: $,
+      isDragActive: k,
+      isDragReject: A,
+      fileRejections: g
+    } = P({
+      onDrop: D,
+      accept: m,
+      maxFiles: h,
+      disabled: a,
+      maxSize: v,
+      ...C
+    }), p = g.length > 0, l = p ? "error" : u ?? "default", x = ee(k, A), R = L(l, x, a), S = J[R], I = p ? F([...g], h) : typeof f == "function" ? f() : f, B = d ?? N(m ?? {}), T = N(m ?? {});
+    return /* @__PURE__ */ t.jsxs("div", { className: o("w-full flex flex-col gap-1 h-[136px]", n), children: [
+      c && /* @__PURE__ */ t.jsx(
+        "label",
+        {
+          className: Y({
+            visualStatus: l,
+            disabled: a
+          }),
+          children: c
+        }
+      ),
+      /* @__PURE__ */ t.jsxs(
+        "div",
+        {
+          ref: M,
+          ...V(),
+          className: W({ disabled: a }),
+          children: [
+            /* @__PURE__ */ t.jsx("input", { ...$() }),
+            /* @__PURE__ */ t.jsx(
+              _,
+              {
+                color: "neutral",
+                variant: "default",
+                forced: "default",
+                ...b,
+                className: o("absolute inset-0", b?.className)
+              }
+            ),
+            /* @__PURE__ */ t.jsx(
+              "svg",
+              {
+                "aria-hidden": !0,
+                className: o(
+                  "absolute inset-0 z-[1] w-full h-full pointer-events-none overflow-visible transition-colors duration-200",
+                  S,
+                  !a && x === "idle" && "group-hover:text-[var(--border-brand-secondary-hover)] group-active:text-[var(--border-brand-secondary-pressed)]"
+                ),
+                children: /* @__PURE__ */ t.jsx(
+                  "rect",
+                  {
+                    x: "0.5",
+                    y: "0.5",
+                    width: "99%",
+                    height: "99%",
+                    rx: "15.5",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeDasharray: "8 8",
+                    strokeWidth: x === "active" ? 2 : 1
+                  }
+                )
+              }
+            ),
+            s && /* @__PURE__ */ t.jsx("p", { className: o(Q({ disabled: a }), "relative z-[1]"), children: s }),
+            /* @__PURE__ */ t.jsx(
+              O,
+              {
+                size: 20,
+                className: o(X({ disabled: a }), "relative z-[1]")
+              }
+            ),
+            !p && /* @__PURE__ */ t.jsxs("div", { className: "relative z-[1] w-full overflow-hidden flex justify-center items-center gap-0.5", children: [
+              /* @__PURE__ */ t.jsxs(
+                "p",
+                {
+                  className: o(
+                    "prometeo-fonts-body-xsmall text-neutral-tertiary-default line-clamp-1",
+                    a && "text-disabled-default!"
+                  ),
+                  children: [
+                    B,
+                    v !== void 0 && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+                      " ",
+                      "· Máx. ",
+                      Z(v)
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ t.jsx(q, { title: T, children: /* @__PURE__ */ t.jsx(
+                U,
+                {
+                  size: 12,
+                  className: o(
+                    "icon-neutral-tertiary-default shrink-0",
+                    a && "icon-disabled-default!"
+                  )
+                }
+              ) })
+            ] })
+          ]
+        }
+      ),
+      z && /* @__PURE__ */ t.jsx(K, { variant: l, disabled: a, className: o(l === "default" && !a && "[&>p]:text-neutral-tertiary-default! [&>svg]:icon-neutral-tertiary-default!"), children: I })
+    ] });
+  }
+);
+w.displayName = "AttachInput";
+const ue = E(w);
+export {
+  ue as AttachInput,
+  ue as default
+};

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 O, 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 = O(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((p) => l(p, e.optionValue) === o.id);
+    t && g(t);
+  }, S = (o) => {
+    o && h(o);
+  }, x = (o) => {
+    for (const t of o)
+      n.some(
+        (C) => l(C, e.optionValue) === t.id
+      ) || h(t);
+  }, m = () => {
+    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: x,
+      displayMode: "chips",
+      controls: a,
+      emptyMessage: "Use el buscador para obtener las opciones disponibles",
+      dropdownOptions: {
+        controledSearchValue: r,
+        onSearchValueChange: i,
+        onSearchClear: m,
+        maxHeight: "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: m,
+        maxHeight: "600px",
+        inputSearchPlaceholder: "Buscar pokemons"
+      },
+      isLoading: s
+    }
+  );
+};
+export {
+  _ as default
+};

package/dist/Avatar.d.ts

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

package/dist/Avatar.es.js

@@ -0,0 +1,81 @@
+import { j as m } from "./jsx-runtime-GkKLlHH4.js";
+import { A as u } from "./AvatarAndSubavatar-BsTIg-DR.js";
+import { A as d } from "./AvatarBase-BwHGampH.js";
+const g = "[Pyrion Avatar]", o = /* @__PURE__ */ new Set(), e = (a, r) => {
+  o.has(a) || (o.add(a), console.warn(`${g} ${r}`));
+}, f = {
+  xxxxs: "xsmall",
+  xxxs: "small",
+  xxs: "medium",
+  xs: "large",
+  sm: "large",
+  md: "xlarge",
+  lg: "xlarge",
+  xl: "2xlarge"
+}, b = (a) => {
+  if (a.size) return a.size;
+  if (a.sizeImage ?? a.sizeFallback) {
+    a.sizeImage && e(
+      "sizeImage",
+      'La prop "sizeImage" está deprecada. Usá "size" (AvatarSize) en su lugar.'
+    ), a.sizeFallback && e(
+      "sizeFallback",
+      'La prop "sizeFallback" está deprecada. Usá "size" (AvatarSize) en su lugar.'
+    );
+    const i = a.sizeImage ?? a.sizeFallback;
+    return f[i];
+  }
+  return "medium";
+}, v = (a) => {
+  if (a.name) return a.name;
+  if (a.fallbackText)
+    return e(
+      "fallbackText",
+      'La prop "fallbackText" está deprecada. Usá "name" en su lugar.'
+    ), a.fallbackText;
+}, z = (a) => {
+  const {
+    sizeImage: r,
+    sizeFallback: i,
+    imageDiameter: t,
+    fallbackText: x,
+    subImageDiameter: c,
+    subImageUrl: l,
+    fallbackType: n,
+    ...s
+  } = a;
+  return l && e(
+    "subImageUrl",
+    'La prop "subImageUrl" en Avatar está deprecada. Usá el componente AvatarAndSubavatar en su lugar.'
+  ), t !== void 0 && e(
+    "imageDiameter",
+    'La prop "imageDiameter" ya no tiene efecto. Usá "size" (AvatarSize) en su lugar.'
+  ), c !== void 0 && e(
+    "subImageDiameter",
+    'La prop "subImageDiameter" ya no tiene efecto en el nuevo layout del subavatar.'
+  ), n === "defaultAvatar" && e(
+    "fallbackType-defaultAvatar",
+    'La prop "fallbackType=defaultAvatar" está deprecada. El avatar usa el icono por defecto cuando no hay imagen ni nombre.'
+  ), a.isLoading && e(
+    "isLoading",
+    'La prop "isLoading" en Avatar está deprecada para futuras versiones; sigue soportada por retrocompatibilidad.'
+  ), {
+    imageUrl: s.imageUrl,
+    size: b(a),
+    name: v(a),
+    className: s.className,
+    isLoading: s.isLoading,
+    fallbackType: n ?? "initials",
+    subImageUrl: l,
+    ref: s.ref
+  };
+};
+function p(a) {
+  const r = z(a), { subImageUrl: i, ...t } = r;
+  return i ? /* @__PURE__ */ m.jsx(u, { subImageUrl: i, ...t }) : /* @__PURE__ */ m.jsx(d, { ...t });
+}
+export {
+  p as AvatarAndSubavatar,
+  d as AvatarBase,
+  p as default
+};

package/dist/AvatarAndSubavatar-BsTIg-DR.js

@@ -0,0 +1,45 @@
+import { j as r } from "./jsx-runtime-GkKLlHH4.js";
+import { c as m } from "./index-BOQuZ0gG.js";
+import { memo as l, useState as d, useEffect as n } from "react";
+import { A as x } from "./AvatarBase-BwHGampH.js";
+const c = m(
+  "bg-brand-secondary-default border-neutral-default-default border rounded-full text-brand-secondary-default grid place-items-center overflow-hidden object-cover object-center absolute ",
+  {
+    variants: {
+      size: {
+        "2xlarge": "size-12 -bottom-[6px] -right-[6px]",
+        xlarge: "size-8 -bottom-[6px] -right-[6px]",
+        large: "size-6 -bottom-[6px] -right-[6px]",
+        medium: "size-4 -bottom-[4px] -right-[4px]",
+        small: "size-4 -bottom-[4px] -right-[4px]",
+        xsmall: "size-0"
+      }
+    }
+  }
+), p = ({
+  ref: s,
+  subImageUrl: a,
+  size: t = "medium",
+  ...o
+}) => {
+  const [i, e] = d(!1);
+  return n(() => {
+    e(!1);
+  }, [a]), /* @__PURE__ */ r.jsxs("div", { ref: s, className: "relative size-max", children: [
+    /* @__PURE__ */ r.jsx(x, { ...o, size: t }),
+    a && !i && /* @__PURE__ */ r.jsx(
+      "img",
+      {
+        className: c({ size: t }),
+        src: a,
+        alt: "subimage",
+        draggable: !1,
+        onError: () => e(!0)
+      }
+    )
+  ] });
+}, u = l(p);
+u.displayName = "AvatarAndSubavatar";
+export {
+  u as A
+};

package/dist/AvatarBase-BwHGampH.js

@@ -0,0 +1,67 @@
+import { j as e } from "./jsx-runtime-GkKLlHH4.js";
+import { c as t } from "./cn-B6yFEsav.js";
+import { c } from "./index-BOQuZ0gG.js";
+import { useState as x, useEffect as b } from "react";
+import { S as g } from "./Skeleton-B0cQzX3_.js";
+import { UserAvatar as h } from "./Icon-UserAvatar.es.js";
+const o = c(
+  "bg-brand-secondary-default rounded-full text-brand-secondary-default grid place-items-center overflow-hidden object-cover object-center select-none shrink-0 border border-neutral-default-default",
+  {
+    variants: {
+      size: {
+        "2xlarge": "size-[128px]",
+        xlarge: "size-16",
+        large: "size-[42px]",
+        medium: "size-8",
+        small: "size-6",
+        xsmall: "size-4"
+      }
+    }
+  }
+), j = c("text-brand-secondary-default w-full text-center", {
+  variants: {
+    size: {
+      "2xlarge": "pyrion-fonts-headline-large text-[56px]",
+      xlarge: "pyrion-fonts-headline-medium",
+      large: "pyrion-fonts-headline-small",
+      medium: "pyrion-fonts-label-large",
+      small: "pyrion-fonts-label-medium",
+      xsmall: "pyrion-fonts-label-small text-[8px]"
+    }
+  }
+}), v = (r) => r.trim().split(" ").map((a) => a.charAt(0)).join("").toUpperCase().slice(0, 2);
+function I({
+  ref: r,
+  imageUrl: a,
+  size: s = "medium",
+  isLoading: m = !1,
+  className: l = "",
+  name: n,
+  fallbackType: d = "initials"
+}) {
+  const [f, i] = x(!1);
+  if (b(() => {
+    i(!1);
+  }, [a]), m)
+    return /* @__PURE__ */ e.jsx("div", { ref: r, className: t("inline-flex", l), children: /* @__PURE__ */ e.jsx(
+      g,
+      {
+        shape: "circle",
+        className: t(o({ size: s }), "border-0")
+      }
+    ) });
+  const u = d === "initials" && n, p = !!a && !f;
+  return /* @__PURE__ */ e.jsx("div", { ref: r, className: t(o({ size: s }), l), children: p ? /* @__PURE__ */ e.jsx(
+    "img",
+    {
+      src: a,
+      alt: "avatar",
+      className: "w-full h-full object-cover",
+      draggable: !1,
+      onError: () => i(!0)
+    }
+  ) : u ? /* @__PURE__ */ e.jsx("p", { className: j({ size: s }), children: v(n) }) : /* @__PURE__ */ e.jsx(h, { className: "size-full rounded-full" }) });
+}
+export {
+  I as A
+};

package/dist/Badge.d.ts

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

package/dist/Badge.es.js

@@ -0,0 +1,51 @@
+import { j as t } from "./jsx-runtime-GkKLlHH4.js";
+import { c } from "./index-BOQuZ0gG.js";
+import { c as u } from "./cn-B6yFEsav.js";
+const d = "brand", m = 99, o = c("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",
+      "brand-gradiente": "pyrion-gradient-bg text-neutral-default-default icon-neutral-default-default",
+      "brand-overlay": "bg-brand-overlay-pressed text-neutral-default-default icon-neutral-default-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 ?? d;
+  if (x(e))
+    return /* @__PURE__ */ t.jsx(i, { size: "small", color: a, isTextVariant: !1, className: e.className });
+  if (g(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 r = f(e), s = !l(e);
+  return /* @__PURE__ */ t.jsx(i, { size: "medium", color: a, isTextVariant: s, className: e.className, children: /* @__PURE__ */ t.jsx("span", { className: "pyrion-fonts-label-small text-center", children: r }) });
+}, f = (e) => {
+  if (l(e)) {
+    const a = e.maxCount ?? m;
+    return e.count > a ? `+${a}` : e.count;
+  }
+  return e.text;
+}, x = (e) => e.size === "small", g = (e) => e.variant === "icon", l = (e) => typeof e.count == "number", i = ({
+  size: e,
+  color: a,
+  isTextVariant: r,
+  children: s,
+  className: n
+}) => /* @__PURE__ */ t.jsx("div", { className: u(o({ size: e, color: a, isTextVariant: r }), n), children: s });
+export {
+  N as Badge,
+  N as default
+};

package/dist/Breadcrumbs.d.ts

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